プロジェクト

全般

プロフィール

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コードを実行する場合、記述した順番に実行されます。


8日前に更新