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プロトコルはサイトに対応できているのか
以上を確認すると動くようになるかもですね。