js初心者でわりと右も左もわからんよって人対象です。
また、前提として、jsの記述自体は正しいという前提です。
動かへんって時にまず確認すること
「js書いて組み込むだけやったんだけど、読み込まれへんわぁ...」
状況を確認するため、chromeのデベロッパーツールのconsoleを確認。
すると、エラーが出ていました。
Uncaught ReferenceError: jQuery is not defined
jQueryが定義されてないよって言われてますね。
ソースを確認して見ると、
<html>
<head></head>
<body>
・・・・・・・
・・・・・・・
・・・・・・・
<script>
jQuery(function(){
alert("Hello")
});
</script>
</body>
</html>
「何か足りない...はっ！！srcがねぇ！！」
いつもなんとなく使っているsrc、もちろん意味があります。
jQueryを読み込む役割を担っています。
jQueryを使いたいなら先に読み込みなさいということですね。
なので下記を追加しましょう。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head></head>
<body>
・・・・・・・
・・・・・・・
・・・・・・・
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function(){
alert("Hello")
});
</script>
</body>
</html>
ここで気をつけるのはsrcの記述する位置です。
<script>
jQuery(function(){
alert("Hello")
});
</script>
jQueryを定義するよりも前に記述する必要があります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function(){
alert("Hello")
});
</script>
そうしないと <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>を
記述していてもUncaught ReferenceError: jQuery is not definedというエラーを吐きます。
srcも追加したのにエラー文一緒じゃん！！ってならないように注意して下さい。
src追加したけど動かへん時に確認すること
「srcも追加した。けどまだ動かへんなぁ...」
追加する位置も間違えていない。なのにまだエラーが出る人はURLを確認しましょう。
正しくjQueryを読み込めていない可能性があります。
ソースに追加しているURLをコピーしてブラウザで検索してみて下さい。
/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
こんな感じの文字列から始まる画面が表示されます。
上記のような文字がブラウザに表示されていない場合はURLが間違っている可能性があリます。
確認してみましょう。
URLも正しいけど動かへんねんけど...
URLはブラウザで確認して正しいっぽい。
なのにjsが動かない時は再度URLを確認しましょう。
実はsrcで読み込んでいるURLと自分がjsを効かせたいサイトのURLは依存関係にあります。
(正確にはHTTPプロトコルの部分です)
https(保護された通信)から始まるサイトだとjQueryがブロックされ反映されません。
つまり、
サイトのURLがhttp://~で始まる場合
[src]
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok
サイトのURLがhttps://~で始まる場合
[src]
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← no
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok
上記のhttpから始まるURL以外の書き方で
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsというのもあります。
上記はサイトのURLがhttp or httpsのどちらでも動きます。
まとめ
確認すること ・srcの有無と位置 ・srcのURLが正しいか否か ・srcのHTTPプロトコルはサイトに対応できているのか以上を確認すると動くようになるかもですね。