【JavaScript】入門10. JavaScriptをHTMLへ組み込む方法

Posted on 2017-10-03
Last updated on 2018-04-13

こんにちは（・∀・）

今日はJavaScriptで書いたスクリプトをHTMLファイルに組み込む方法をご紹介します。

HTMLにJavaScriptを記述する場所ですが、どこでも良い訳ではありません。JavaScriptの記述場所は基本body要素内の閉じタグ「</body>」の直前に記述します。

ただし、スクリプトの内容によってはHTMLが全て読み込まれる前にJavaScriptを読み込ませたい場合があります。その場合はhead要素内にJavaScript記述します。他にインラインで記述する方法もありますが、JavaScriptの記述場所はほぼこのどちらかとなります。

しかしここでは基本的にbody要素内の閉じタグ「</body>」の直前と覚えておいてください。


<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</body>
</html>


<html>
<head>
<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</head>
<body>
</body>
</html>


<p><a href-"javascript:void(0)" onclick="history.back(); return false;">BACK<a><p>

JavaScriptをHTMLに記述する場所についてはご理解いただけましたでしょうか⁉️続いてはJavaScriptをHTMLに記述する方法です。

JavaScriptをHTMLに記述する方法は2通りあります。一つはHTMLに直接書き込む方法で、もう一つはJavaScriptを別ファイルにしてHTMLに読み込ませる方法です。


<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</body>
</html>


<script src="hoge.js"></script>
</body>
</html>

別ファイルにJavaScriptを記述してHTMLにそのファイルを読み込ませます。

その際、文字化けを防ぐためJavaScriptファイルのエンコード設定に注意してください。例として、HTMLファイルのエンコードがutf-8の場合はJavaScriptファイルのエンコードもutf-8に設定してください。

またJavaScriptファイルにスクリプトを記述する時は<script>タグは不要です。

いかがでしたでしょうか、JavaScriptをHTMLに記述する場所と記述方法について、ご理解いただけましたでしょうか⁉️