js(jQuery)が正しいはずなのに動かない時に確認すること

js(jQuery)が正しいはずなのに動かない時に確認すること:

自分が初心者なので、出来るだけ丁寧に書いています。

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://~で始まる場合

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://~で始まる場合

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プロトコルはサイトに対応できているのか

以上を確認すればきっとあなたのjsは動いているでしょう。

※jsの記述自体に誤りがないことを前提にしています。

参考サイト

“https” だと jQuery が動かない時には
【jQuery】プログラム動かない時に確認すること

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫