jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。
方法は2つ
デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。01.アラート
|
1 |
alert('アラートでたよ！'); |
アラートデモ
02.コンソール
|
1 |
console.log('コンソールでたよ！') |
コンソールデモ
アラートはぽんと出てくるので分かりやすいですが、コンソールは、各ブラウザの開発者ツールやfirebugなどの「コンソール」窓を確認すると現れます。
firefox – firebug
Chrome
これらを一体どうやって使うかというと、例えば取得してきた値がどうなっているか調べたり、if文のどっちを通過しているか調べたり…想定していた動きになっているかひとつひとつ調べていきます。
例えばこんな感じ。
|
1 2 3 4 5 6 7 |
$(function(){ var i = 0; alert(i); }); |
変数「i」の値をアラートするという処理なので、こちらの表示結果は「0」になります。「”」で囲むと単純に文字列がアラートされるので「alert(‘i’)」としてしまうと結果は「i」になってしまうので注意してくださいね。ちなみに文字列と繋げてアラートさせたい場合は、「alert(‘iの値は’+ i + ‘です！’)」と+を使用して繋げることができます。これで「iの値は0です！」とアラートされます。
もちろん、アラートで書いているものはconsole.logでも置き換えられます。
次は、if文のどちらを通過しているか調べてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ var i = 0; if(i==0){ alert('ifを通過') }else{ alert('elseを通過') } }); |
さて、なんてアラートされるでしょうか。
デモで確認
デモの直後に正解を書いててアレなんですが、正解は「ifを通過」と表示されます。もしiが1であれば、elseを通過と表示されます。
何かコードを書いてみて動かない時は、本当に想定した値になっているか、一度調べてみましょう。
例を置いておきます
最後に、どんな風に使うものか、例を置いておきますね。結局windowの高さいくつになってるの
|
1 2 3 4 5 6 7 |
$(function(){ var windowHeight = $(window).height(); console.log('windowの高さは' + windowHeight + 'px'); }); |
デモで確認
今iの値はいくつ？
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ var i = 0 console.log(i); i+100; console.log(i); }); |
デモで確認
（思わせぶりな書き方ですが、実は代入がうまくいっていなくて結果はどちらも0になります。本当は2回目を i = i+100 にしないといけません）
今のURL
|
1 2 3 4 5 6 7 |
$(function(){ var href = location.href alert(href) }); |
