Help us understand the problem. What is going on with this article?

JavaScriptが動かない時に確認すること

More than 1 year has passed since last update.

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

以上を確認すると動くようになるかもですね。

参考サイト

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした