fontBomb - Stylishly destroy the web
Click anywhere on this page to plant bombs. To blow up other websites, drag and drop this link fontBomb to your favorites bar. An experiment by Philippe-Antoine Lehoux. Follow me on @plehoux Hymne à la Beauté Viens-tu du ciel profond ou sors-tu de l'abîme, Ô Beauté? ton regard, infernal et divin, Verse confusément le bienfait et le crime, Et l'on peut pour cela te comparer au vin. Tu contiens dans
JavaScript 重箱の隅/ビットシフト
ビットシフトというのは、 2進数で表した整数を右または左に移動するということです。 右ビットシフトなら、最上位ビットに0を補填して最下位ビットを消し、 左ビットシフトなら、最上位ビットを消して最下位ビットに0を補填します。 例えば2進数で0111(=7)を１つビットシフトすると、 左ビットシフト 右ビットシフト 0111 1110(=14) 0011(=3) 基本的には、左ビットシフトするというのは2をかける、 右ビットシフトするというのは2で割るということです。 JavaScriptではこの演算を次のように表します。 7 << 1 7 >> 1 上が１つ左ビットシフトする、 下が１つ右ビットシフトするということを表しています。 負の整数を左ビットシフトすると、 11111111111111111111111111111111(=-1) << 2 => 111111111111111
DOM APIとinnerHTMLは等価ではない
最近、徳丸本をじわじわ読んでいるのですが、DOM based XSSの話が書いてあったので、少し言及しておこうと思います。 徳丸本から引用 DOM based XSSと呼ばれるXSSがあります。これは、JavaScriptによりクライアント側で表示処理する箇所があり、そこに脆弱性がある場合のXSSです。 サンプル書いてみました。 <script> document.write(unescape(location.href)); </script> こいつを適当なファイル名で保存して、domxss.html#<script>alert("hello")<script>などのURLでアクセスするとalertが表示されるはずです。任意のスクリプトが実行可能な状態ってことですね。任意のスクリプトが実行可能ってことは、セッションクッキー盗み放題で、他人に成り済まして買い物できちゃったりするレベルです
Closure Compilerを使う！
「Closure Compilerを使う！」は、Googleが提供しているコード圧縮・最適化ツールであるClosure Compilerの使い方を紹介するサイトです。 このサイトのコンテンツの大部分は公式サイトやチュートリアルの記述をベースに日本語で再構成したものですが、その内容はあくまで管理人の個人的な理解に基づくものです。ご利用は自己責任でお願いします。 Closure Compilerとは Closure CompilerはGoogleが無償で公開しているJavaScriptコードの圧縮・最適化・難読化ツールです。ライセンスはApache License 2.0です。 JavaScriptのコード圧縮・難読化ツールとしては他にpackerやYUI Compressorなどが有名ですが、Closure Compilerも基本的な機能としてそれらと同等のコード圧縮機能を有しています。以下
高度な JavaScript 技集
JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib
)
JavaScript addEventListener() - とみぞーノート
仕様書を読んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。 addEventListener()はIEでは未実装なので関係なし。 以下はFireFoxで確認。 useCaptureの意味 通常登録したイベントハンドラ(*1)はイベント伝搬のバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。 useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。 (*1) 以下のものが含まれる。 DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler) HTMLタグに埋め込んだイベントハンド
[Javascript] 関数宣言の落とし穴 function foo ( ){..} と var foo = function ( ) {..} は動作が違うので要注意！
Home Subscribe function funcname(args){ do something}; は var funcname = function(args){ do something}; と等価になる。 javascriptを理解するためのたった2つの大切なこと javascriptを理解するためのたった2つの大切なこと:改 引用元の記事はすばらしい記事ですが、ここは間違いです。 等価だと思っていたらひどい目にあいます。 サイ本 第5版のp.96にちゃんと書いてあります。 function文はプログラムの静的な構造を定義するだけなのです。 JavaScriptコードが解析されコンパイルされたときに、関数は定義されます。 どういうことかというと、 function foo( ){ ... } はコンパイル時に関数が定義されます。 var foo = function( ){
![[Javascript] 関数宣言の落とし穴 function foo ( ){..} と var foo = function ( ) {..} は動作が違うので要注意！](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
Javascriptによる正規表現まとめ - Y's note
Index JavaScriptで利用できる正規表現についてまとめました。 最後の後読み、否定後読み以外は利用可能かと思います。 モード修飾子(i,m,g) \n,\r,\u2028,\u2029以外の任意の1文字 空白文字以外( \S ) 数字( \d ) 数字以外( \D ) 先頭( ^ ) 末尾( $ ) 単語区切り( \b ) 単語区切り以外( \B ) 0以上の繰り返し( * ) 1以上の繰り返し( + ) 0または1回( ? ) 最短マッチ( .*? ) nの繰り返し( {n} ) n以上の繰り返し( {n,} ) n以上,m以下の繰り返し( {n,m} ) いずれかの文字( [▲◎■] ) いずれかのパターン( (▲|◎|■) ) 後方参照( \n ) エスケープ( \ ) 先読み( ?=◎◎◎ ) 先読み否定( ?!◎◎◎ ) 後読み( ?<=◎◎◎ ) 否定後読み( ?<
記号だけのJavaScriptプログラミングの基本原理 - Articles Advent Calendar 2010 Sym
こんにちは。プログラマ定年を迎えたのであとは悠々自適に日々過ごそうと思ってるはせがわです。 JavaScriptで記号プログラミングを行う基本的な取り組を説明します。 jjencodeなどで使っているテクニックです。 まず最初は数字の作り方。 +[] // 空の配列にプラス演算子で数値の 0 ~[] // 空の配列にビット反転で -1 ~{} // 空のオブジェクトにビット反転で -1 -~[] // 空の配列にビット反転で-1、-1に単項マイナスで +1 -~-~[] // +1 にビット反転で -2、-2 に単項マイナスで +2 このように、空の配列や空のオブジェクトに数値用の演算子を適用することで、任意の数値を記号だけで生成することができます。 次に文字の作り方。 ![] // 空の配列に論理否定で false !![] // 空の配列に論理否定を2回で true (![]+"")
MASAYUKI DAIJIMA | Technical Director / Interaction Designer
日本生まれのテクニカルディレクター、インタラクション・デザイナー、フロントエンド・デベロッパー、VJ。 表現と技術で人をワクワクさせられるモノづくりをしたいと常日頃から考えている。クラフトマンシップにこだわり、自分を研鑽していける日々を過ごせたら本望だと個人的には思っており、消費の速いデジタル作品においても長く残るモノ、せめて次の世代の人たちに触れてもらえるモノを作ることが最終目標である。 2007年5月、株式会社アーキタイプを共同設立。数々の企業のプロモーションやブランディング等に伴うWebサイト、インスタレーション、アプリケーション開発等、デジタルなプロジェクトのテクニカルディレクションやプログラミングに携わる。国外でのデジタル広告賞の受賞が多い。2017年1月、心から自分のやりたいことをしたいと強く思うようになり、設立10年を節目にアーキタイプを退職し、留学のため渡英。ロンドンにて1
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
oCanvas - Object-based canvas drawing
Canvas drawing made easy oCanvas is a JavaScript library intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It’s very straightforward and easy to get started with. Please have a look at the examples to see just how easy it is. View demos & examples Download oCanvas Current release: 2.10.1 Production 21 kB minified & gzipped Development 192
古籏一浩のJavaScriptラボ
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
Katamari Hack
Drag this link to your bookmarks bar: Katamari! Or copy and paste this url into the location bar on any site: javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0); (works best in chrome or firefox 4) What is this? This is
typeof演算子から学ぶJavaScriptのデータ型の概念と関係する考察のまとめ - 三等兵
まずはtypeof演算子について。JavaScript Gardenというウェブページがありまして。こういう一文がありまして。 The typeof operator (together with instanceof) is probably the biggest design flaw of JavaScript, as it is near of being completely broken. http://bonsaiden.github.com/JavaScript-Garden/#typeof 訳）http://efcl.info/adiary/Javascript/JavaScriptGarden#k95p17 要するにtypeof演算子は「ヒャッハーtypeof演算子ぶっ壊れてるぜー」ってことらしい。理由が下記の表。 [表1] Value Class Type - "f
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/
Wonder-boys.net
Surface
ajaxzip3 - Google Code