JavaScriptファイルを読み込みたい
HTMLに外部JavaScriptファイルを読み込む必要があるとき、次のタグをHTML内に記述します。パスに指定されたJavaScriptファイルを読み込みます。
<script src="JavaScriptファイルのパス"></script>JavaScriptファイルを読み込むには「<script src=”js/javascript.js”></script>」を記述します。src属性には、JavaScriptファイルのパスを記述します。注意しなければならないのは、</script>終了タグを省略してはいけません。終了タグを省略すると正常に動作しないブラウザがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptファイルを読み込むサンプル</title>
</head>
<body>
<div>
<p>ユーザーIDを忘れた方</p>
<button id="btn">ユーザー名のリセット</button>
</div>
<script src="js/javascript.js"></script>
</body>
</html>type属性は不要
HTML5では、<script>タグをはじめ、<style>タグや<link>タグに、type属性を含める必要がなくなりました。このtype属性は、読み込むファイルやプログラムの種類を示す「MIMEタイプ」を指定するもので、HTML5より前のバージョンでは必須でした。
<script src="js/javascript.js" type="application/javascript">JavaScriptファイルを読み込むには
<script>タグを記述する場所ですが、<head>~</head>の中に書く場合と</body>タグのすぐ上に書く場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptファイルを読み込むサンプル</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/javascript.js"></script>
</head><head>~</head>の中に<script>タグを含める場合は、必ずCSSを読み込む<link>タグの後に記述します。なぜかといえば、CSSを先に読み込ませたほうがページが表示されるまでの速度が速くなり、ユーザーを待たせる時間を短縮できるからです。
<script src="js/javascript.js"></script>
</body>
</html><script>タグを</body>終了タグのすぐ上にかいておくと、ページが表示されるまでの時間がさらに短くなります。そのため、<script>タグは可能な限り</body>終了タグのすぐ上に書きます。ただし、JavaScriptの処理内容によっては、まれに<head>~</head>の中に書いておかないと正しく動作しないことがあります。