jQueryが外部ファイルのjsに記述すると読み込まれない

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title></title>
7    <meta name="description" content="ディスクリプション" />
8    <meta property="og:type" content="website" />
9    <meta property="og:title" content="タイトル" />
10    <meta property="og:image" content="/img/icon.png" />
11    <meta property="og:url" content="http://example.net/" />
12    <meta property="og:site_name" content="サイト名" />
13    <meta property="og:description" content="ディスクリプション" />
14    <meta name="robots" content="noarchive">
15    <link rel="shortcut icon" href="/img/favicon.ico">
16    <link rel="stylesheet" type="text/css" href="css/main.css">
17    <script type="text/javascript" src="js/main.js"></script>
18    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
19    
20  </head>
21  <body>
22  
23<script type="text/javascript"> 
24
25
26$(document).ready(function(){ 
27
28
29alert("jQueryファイルの読み込み完了でーす。"); 
30
31
32}); 
33
34
35</script> 
36
37
38  </body>
39</html>

js
1
2alert("Hello");
3

上記2つのファイルで『jQueryファイルの読み込み完了でーす。』は出力されますが下記2つのファイルでは出力されません。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title></title>
7    <meta name="description" content="ディスクリプション" />
8    <meta property="og:type" content="website" />
9    <meta property="og:title" content="タイトル" />
10    <meta property="og:image" content="/img/icon.png" />
11    <meta property="og:url" content="http://example.net/" />
12    <meta property="og:site_name" content="サイト名" />
13    <meta property="og:description" content="ディスクリプション" />
14    <meta name="robots" content="noarchive">
15    <link rel="shortcut icon" href="/img/favicon.ico">
16    <link rel="stylesheet" type="text/css" href="css/main.css">
17    <script type="text/javascript" src="js/main.js"></script>
18    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
19    
20  </head>
21  <body>
22  
23  </body>
24</html>

js
1
2alert("Hello");
3
4
5$(document).ready(function(){ 
6
7
8alert("jQueryファイルの読み込み完了でーす。"); 
9
10
11}); 
12
13

『Hello』はどちらも出力されているので読み込みされていないということはなさそうなのですが、外部ファイルの場合気を付けるところがほかにあるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLは上から順に読み込んでいくのでJavaScriptは記述した順に読み込まれます。
先にjqueryを記述しましょう。

投稿2018/09/17 00:44

編集2018/09/17 00:46

yukihisa

総合スコア672

sobue

2018/09/17 00:47

ありがとうございます。無事解決しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQueryが外部ファイルのjsに記述すると読み込まれない

関連した質問