JavaScriptとHTMLファイル¶
HTMLの規格について¶
W3CからWHATWGへの移行¶
もともとは、標準化団体のW3C（1996年設立）がHTMLの仕様を策定していましたが、W3Cの活動とは別にApple, Opera, MozillaによるWHATWG（2004年設立）が独自にHTMLの仕様を作成するようになり、2021年にはW3CがHTML標準化活動を断念し、以降WHATWGでHTMLの標準化が一本化されました。
| HTML Living Standard | https://html.spec.whatwg.org/ |
| HTML Living Standard(日本語訳) | https://momdo.github.io/html/ |
JavaScriptの規格について¶
JavaScriptの規格は、Ecma International団体によって制定されるECMAScriptと呼ばれる規格に基づきます。
以下は2024年6月6日時点での最新規格です。
| ES14 | ES2023 | 2023年6月 | https://ecma-international.org/publications-and-standards/standards/ecma-262/ |
HTMLファイルからJavaScriptのコードを実行¶
Webブラウザ上でJavaScriptを実行する場合の記述方法のメモです。
- HTMLファイル中に、JavaScriptコードを記述する
- HTMLファイルから、JavaScriptコードを記述したファイルを参照する
HTMLファイル中にJavaScriptコードを記述する¶
<script>
// JavaScriptコードを記述
</script>
サンプル1 div要素にJavaScriptからテキストを設定¶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello JavaScript in HTML</title>
</head>
<body>
<div id="output"></div>
<script>
var outputText = document.getElementById('output');
outputText.textContent = "こんにちは、JavaScriptからテキストを設定しました。";
</script>
</body>
</html>
- HTMLのdiv要素にidを定義、JavaScriptから、このidを指定して要素を取得、その要素のテキスト記述を設定
HTMLファイルから、JavaScriptコードを記述したファイルを参照する¶
HTMLの <script>タグを用いてJavaScriptコード記述ファイルを参照します。
<script src="App/hello.js"></script>
<script>タグの記述位置¶
<script>タグは、<head>要素にも<body>要素にも記述できます。
<head>内に記述¶
- 画面表示よりも前に実行したい処理
<body>内に記述¶
- HTMLの要素（タグ）に対する操作をする処理
JavaScriptの実行タイミング¶
HTMLファイルを読み込み、<script>タグが解釈されるときにJavaScriptコードが読み込まれて実行されます。
そのため、JavaScriptのコードをダウンロードして実行が終わるまで後続のHTMLの読み込みが待たされるほか、後続のHTMLの要素にDOMからアクセスすることができないといった問題があります。
例えば、head要素に<script>タグを記述し、時間のかかるJavaScriptコードが実行されると、HTMLの解釈と描画が待たされるため、ブラウザ画面に何も表示されない時間が増えてしまいます。
ここで、<script>タグでasyncまたはdeferを指定すると、後続のHTMLの読み込みをブロックすることなく非同期に（別スレッドで）JavaScriptコードが読み込まれます。
- async指定：JavaScriptコードがダンロードされた直後にHTMLの読み込みをブロックしてJavaScriptコードが実行されます。読み込み完了が実行開始となるので、複数のJavaScriptコードを実行する場合、順不同（ダウンロードが終わった順）で実行されます。
- defer指定：HTMLの読み込みが完了したDOMContentLoadedイベントの直前にJavaScriptコードが実行されます。複数のJavaScriptコードを実行する場合、記述した順番に実行されます。