スポンサード リンク

Ajax プログラムを繰り返し追ってみることが効果的。

Ajax のプログラムを理解するには、Firebug でブレイクポイントを設定し、何度もプログラムを追ってみることが効果的です。

sample003の解説を読んで大体の意味をつかんだら、次はぜひプログラムを追ってみてください。1回目はあまり分からないかもしれませんが、繰り返し追うことで、理解できる割合が少しずつ増えてきます。そのうちに「わかった!」と思う瞬間が必ずきます。

人間の成長曲線は最初は緩やかですが、ある時点を境に急激に上昇します。プログラミングの学習も同じで、最初は上達を実感できないかもしれませんが、あきらめずに続ければ理解できるようになります。


【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【2】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample003/pref.html

ajax-178.gif


【3】Firebug を起動します。今回は同一ウィンドウで開きます。

ajax-192.gif

*「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。


【4】JavaScriptのファイルを「pref.js」にします。

ajax-193.gif


【5】適当な場所にブレイクポイントを設定してください。

ajax-194.gif


【6】プログラムを実行します。

ajax-197.gif

どこにブレイクポイントを設定したかで、実行の仕方が異なります。ブラウザの「再読み込み」ボタンや、「データを取得」ボタンをクリックするとプログラムが動き出し、ブレイクポイントを設定した場所で一時停止します。


【7】あとはプログラムを1行ずつ進めてください。

ajax-196.gif

再開、ステップオーバー、ステップイン、ステップアウトの各ボタンを使って進めます。コツはステップオーバーとステップインを使い分けることです。

Prototype.js の機能を使っている部分でステップインすると、Prototype.js の中に入ってしまいます。Prototype.js の中まで理解する必要は無いので、入った時はステップアウトで抜け出してください。


【8】またCSSのボックスを視覚化して、どう反映されているか確認してみてください。

ajax-195.gif


【ワンポイント】

Firebug の操作方法については、以下のページを参考にしてください。

Step4・Firebugでデバッグする
http://ajax.pgtop.net/category/4272522-1.html

Step7・Firebugでボックスを視覚化する
http://ajax.pgtop.net/category/4327773-1.html


スポンサード リンク






Ajax初心者入門講座TOPへ