なんでもドラッガー fukuwarai.js

ページ内のあらゆる要素をマウスでぐりぐりとドラッグできるようにする JavaScript コードです。

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/fukuwarai.js?"+da.getTime(); document.body.appendChild(s)})();

これを適当なページのアドレスバーに貼り付けて実行すると、そのページのあらゆる要素がドラッグ可能になります（と言っても Flash などは無理です）。リロードすれば元に戻ります。普段見慣れたページを、自分の操作でバラバラにできるのはなかなか新鮮な体験です。
使いまわしのサンプルページに「福笑いモード」という名前で上記コードを埋め込んだリンクを追加しておきました。ブックマークレットの登録にご利用下さい。
先日の「HTML崩壊 meltdown.js - KAZUMiX memo」と同じく、特に何かの役にたつものではありませんが、楽しんでもらえれば！

本体ソース

fukuwarai.js

JavaScript で遊ぶために読んだ本

私自身 JavaScript を勉強し始めたのはごく最近です。前回の反響などをみたら、これから勉強したいと思っている方や興味を持っている方が結構いるようなので、私自身がどういった書籍で勉強したのかを紹介しておきます。

↑この写真の上から順に読み進めました。

WebクリエイティブのためのDOM Scripting （Web Designing Books）

タイトルの通り DOM に焦点を当てた本です。
サンプルコードは、jQuery を利用した場合、prototype.js を利用した場合、それらフレームワークを利用しない場合のそれぞれが紹介されているのがとても嬉しい本です。
DOM やフレームワークを利用するための JavaScript の解説になるため、JavaScript という言語そのものに関しては特につっこんだ解説はありません。しかし、JavaScriptでこんなことができるんだということを知る取っ掛かりとしては最高でした。
この本を読み終わった勢いで当時作ったのが「http://www.rr.iij4u.or.jp/~kazumix/d/javascript/matrixbg/」です。今ならアニメーション処理のためだけにjQuery使ったりしないかも。

初めてのJavaScript

すごく誤植が多いです。

• http://www.marlin-arms.co.jp/jpn/support/ljs/errata.html

「WebクリエイティブのためのDOM Scripting （Web Designing Books）」は DOM に焦点を当てた入門書ですが、こちらは JavaScript そのものの入門書です。DOM の解説なども含めて全体的に薄く広い感じで扱っています。JavaScript 第5版へ突入するための助走として良い本でした。

JavaScript 第5版

JavaScript という言語そのものと、そこから利用できる DOM などを詳細に解説した本です。
標準にこだわらず、特定のブラウザに依存した技術なども、クロスブラウザー対策を含めて解説してるのが超ありがたいです。
読んでる過程であんなことやこんなことができるなーと色々思いつき、実際に作ったもののひとつが先日のHTML崩壊スクリプトです。