HTML に JavaScript を読み込む
このレッスンで分かること
<script src="...">の 1 行で、HTML と JavaScript ファイルがつながりますdeferは「HTML を読み終わってから動かす」という指示です
HTML だけでは JavaScript は動かない
index.html と script.js を同じフォルダに置いても、2 つのファイルにはまだ何の関係もありません。ブラウザが最初に読むのは HTML だけなので、JavaScript のファイルに何を書いてもブラウザは気づきません。つなぐには、HTML の側から「このファイルも読んでください」と伝える 1 行が要ります。
HTML
<script src="main.js" defer></script>src に、読み込みたいファイルの名前を書きます。HTML と同じフォルダに置いてあるなら、ファイル名だけで届きます。
defer が無いと空振りする
<script> は、書いた場所でそのまま実行されます。<head> は HTML のいちばん上なので、defer を付けずに置くと、本文がまだ 1 行も用意されていない状態で JavaScript が走り出します。見出しやボタンを操作しようとしても「そんなものは無い」と言われて終わりです。
defer を付けると、ブラウザは読み込みだけ先に進めておき、HTML を最後まで読み終えてから中身を実行します。
置き場所には、</body> の直前に書くやり方もあります。本文を読み終えたあとに実行される点は同じですが、その位置まで読み進まないと読み込みが始まりません。<head> に defer 付きで書くほうが、読み込みを早く始められるぶん有利です。
つながったかどうかを確かめる
書いたら、必ず動いているかを見ます。JavaScript のファイルに、1 行だけ書いてください。
JavaScript
console.log("読み込めました");index.html をブラウザで開き、F12 (Mac は Command + Option + I) で開発者ツールを出して Console タブを見ます。読み込めました と出ていれば成功です。
何も出ないときは、Network タブでファイル名を探します。赤い 404 が出ていれば、src に書いた名前かフォルダの位置が違っています。つづりと大文字小文字を見直してください。
課題
index.htmlの<head>内に、<script src="script.js" defer></script>と記載しましょう。