sample003の解説を読んで大体の意味をつかんだら、次はぜひプログラムを追ってみてください。1回目はあまり分からないかもしれませんが、繰り返し追うことで、理解できる割合が少しずつ増えてきます。そのうちに「わかった！」と思う瞬間が必ずきます。
人間の成長曲線は最初は緩やかですが、ある時点を境に急激に上昇します。プログラミングの学習も同じで、最初は上達を実感できないかもしれませんが、あきらめずに続ければ理解できるようになります。
【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【2】Firefox を起動して、アドレスに以下のように入力し実行します。
http://localhost/ajax/sample003/pref.html
【3】Firebug を起動します。今回は同一ウィンドウで開きます。
＊「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。
【4】JavaScriptのファイルを「pref.js」にします。
【5】適当な場所にブレイクポイントを設定してください。
【6】プログラムを実行します。
どこにブレイクポイントを設定したかで、実行の仕方が異なります。ブラウザの「再読み込み」ボタンや、「データを取得」ボタンをクリックするとプログラムが動き出し、ブレイクポイントを設定した場所で一時停止します。
【7】あとはプログラムを1行ずつ進めてください。
再開、ステップオーバー、ステップイン、ステップアウトの各ボタンを使って進めます。コツはステップオーバーとステップインを使い分けることです。
Prototype.js の機能を使っている部分でステップインすると、Prototype.js の中に入ってしまいます。Prototype.js の中まで理解する必要は無いので、入った時はステップアウトで抜け出してください。
【8】またCSSのボックスを視覚化して、どう反映されているか確認してみてください。
【ワンポイント】
Firebug の操作方法については、以下のページを参考にしてください。
Step4・Firebugでデバッグする
http://ajax.pgtop.net/category/4272522-1.html
Step7・Firebugでボックスを視覚化する
http://ajax.pgtop.net/category/4327773-1.html
