2.2 JavaScriptはどこに書く？　【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。

jsstudy.hatenablog.com

2.2 JavaScriptはどこに書く？
コメント文
まとめ

2.2 JavaScriptはどこに書く？

(p.44)

<script>タグとJavaScriptの記述場所
HTMLにJavaScriptを直接記述する方法
JavaScriptファイルを読み込む方法

HTMLドキュメントに直接JavaScriptを書く方法

（例）

<body>

：（中略）

<script>

console.log('This is a pen.');

</script>

</body>

これで、コンソール画面に「This is a pen.」と出力されます。

HTMLドキュメント内に<script>、</script>を追加すれば、その中にJavaScriptを直接書くことができます。

<script>タグは、<head> ～ </head>内、または<body> ～ </body>内のどこにでも追加できます。

一般的には、</body>終了タグの直前に追加します。

<script>にtype属性を含める必要はない

HTML5では<script>にtype属性を含める必要がなくなりました。

HTML5の<script>タグ

<script>

console.log('Hello!');

</script>

HTML4以前の<script>タグ

<script type="text/javascript">

console.log('Hello!');

</script>

（参考）HTML4とHTML5の違い（新機能まとめ）

www.htmq.com

JavaScriptファイルを読み込む

(p.47)

JavaScriptプログラムを専用ファイルに書いておいて、それをHTMLファイルに込みこませることもできます。

（例）

「index.html」というHTMLファイルを用意して、以下の中身を書く。

<body>

<script src="script.js"></script>

</body>

「script.js」というJavaScriptファイルを用意して、以下の中身を書く。

//外部JavaScriptファイル

console.log('Hello!');

「index.html」と「script.js」は、同じフォルダ（ディレクトリー）内に置きます。

index.htmlをブラウザーで開くと、コンソール画面に「Hello!」と出力されます。

(p.49)

外部JavaScriptファイルの読み込み

HTMLに外部JavaScriptファイルを読み込むときも<script>タグを使います。

<script>タグにsrc属性を追加して、そこに外部JavaScriptファイルへのパスを指定します。

相対パスで指定する場合は、HTMLファイルからのパスにします。

なお、外部JavaScriptファイルを読み込む場合は、<script>開始タグと</script>終了タグの間には何も書きません。

ただし、</script>終了タグは忘れずに書いてください。

●書式

f:id:jsstudy:20170304004814p:plain

JavaScriptが実行される順序

HTML内にJavaScriptを直接記述する方法と、外部JavaScriptファイルを用意して読み込む方法を、両方同時に使用することができます。

JavaScriptは、<script>タグ内に直接プログラムが書かれているか、外部ファイルが読み込まれているかにかかわらず、HTMLの上のほうに書かれている<script>から順に実行されます。