« iTunes のラジオ局はプレイリストに登録しよう | トップページ | Shelley Powers「初めてのJavaScript 第2版」オライリージャパン 武舎広幸・武舎るみ訳 »

2010年11月18日 (木)

今度はJavaScriptに挑戦

 CSS に続き、懲りずに再び O'Reilly に挑戦。今度は「初めての JavaScript 第2版」を借りてきた。プログラミング言語の解説本だと、やっぱり 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 アニメで実現した方が簡単じゃね?

|

« iTunes のラジオ局はプレイリストに登録しよう | トップページ | Shelley Powers「初めてのJavaScript 第2版」オライリージャパン 武舎広幸・武舎るみ訳 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/201750/50065632

この記事へのトラックバック一覧です: 今度はJavaScriptに挑戦:

« iTunes のラジオ局はプレイリストに登録しよう | トップページ | Shelley Powers「初めてのJavaScript 第2版」オライリージャパン 武舎広幸・武舎るみ訳 »