今度はJavaScriptに挑戦

　CSS に続き、懲りずに再び O'Reilly に挑戦。今度は「初めての JavaScript 第２版」を借りてきた。プログラミング言語の解説本だと、やっぱり O'Reilly は安定感があるなあ。などと偉そうに言っちゃあいるけど、暫くプログラミングはやってないんで、完全に頭が錆び付いてる。おまけに言語の文法はわかっても、組み込みライブラリや DOM(DOcument Object Model) とかはさっぱり、どころか CSS もわかってなきゃデバッガの使い方もロクに理解してないんで、一行書くごとに Google で API を探したり関数の綴りを調べたり。効率が悪いなんてモンじゃない。

　それでも、やっぱり、楽しいんだよね、プログラミングってのは…納期さえなきゃ。「なんだよ Attlibute って(正しい綴りは Attribute)」とか「この文脈の + は連結演算になっちゃうのか」とか「うひゃ、属性は style にまとまってるとは」とか「なんじゃい、CSS で定義した属性は取得できないじゃん」とか、アホみたいなミスを散々繰り返しつつ、エラーコンソールやらデバッガやらを行ったりきたりで、気がつけばホンの十数行を書くのに10数時間かかってる。

　と、悪戦苦闘しながら、なんとか玩具みたいなスクリプトを仕上げてみた。タイトルの背景画像を、縦にスクロールする。見た感じは結構ウザいかも。とりあえず Firefox3.6.12 と、Safari 5.0.2 で動作確認したけど、Opera とかじゃどうなんだろう？

<script type="text/javascript">
//<![CDATA[

window.onload = setInterval( moveImage, 50 );
function moveImage() {
    var b = document.getElementById( "banner" );
    if( ! b ) { return "No Banner" ; }
    var h = b.getElementsByTagName( "h1" );
    if( ! ( h && h.length ) ) { return "No H1" ; }
    var s = h[0].style.backgroundPosition || "1px 2px";
    var r = /^\s*(\d+)\D*(\d*)/ ;
    var p = r.exec( s );
    var x = p[1] ? p[1] : 0; var y = p[2] ? p[2] : 0; y = ( y % 64 ) + 1;
    h[0].style.backgroundPosition = x + "pt " + y + "pt";
    return h[0].style.backgroundPosition;
}
//]]>
</script>

　一応の動作確認を終え、「俺もやればできるじゃん」と満足に浸り、デバッガやエディタなどとっちらかった窓を整理し、一息ついてから気がついた。

…この程度なら、GIF アニメで実現した方が簡単じゃね？

関連記事：

• Shelley Powers「初めてのJavaScript 第２版」オライリージャパン 武舎広幸・武舎るみ著
• Eric.A.Meyer「CSS完全ガイド第2版 CSS2&CSS2.1対応」オライリージャパン 株式会社クイープ訳
• iTunes のラジオ局/プログレ,アニメ,サザンロック,局集
• 今更CSSを勉強中
• このアクセスは人？ロボット？スパム？
• 安岡孝一+安岡素子「キーボード配列QWERTYの謎」NTT出版
• ジェイムズ・Ｒ・チャイルズ「機械仕掛けの神 ヘリコプター全史」早川書房 伏見威蕃訳