HTML で JavaScript を使用する

<script> タグ

HTML5では、スクリプトには次の属性があります: async、defer、charset、src、type、

非同期（オプション）:

キーワード: 非同期スクリプト、外部ファイル、即時ダウンロード。

タグにこの属性が含まれている場合、スクリプト（外部ファイル）はすぐにダウンロードされます。外部スクリプトファイルに対してのみ有効です。ダウンロード中もページ上の他の操作は実行できます。ダウンロードが完了すると解析と実行が停止され、実行後も解析は続行されますが、実行順序は保証されません。

<script src="js/index2.js" async="非同期"></script>

延期（オプション）:

キーワード: 遅延スクリプト、外部ファイル、遅延読み込み。

タグにこの属性が含まれている場合、スクリプトはページが完全に解析または表示されるまで実行を待機できます。これは外部ファイルに対してのみ有効です。同時に defer が指定された 2 つのスクリプトがある場合、遅延により前者が後者より先に実行されます。

<script src="js/index1.js" defer="遅延"></script>

文字セット（オプション）:

キーワード: 文字セット

ほとんどのブラウザはすでにその値を無視しているため、ほとんど使用されません。

src (オプション):

キーワード: 外部参照

参照する必要がある外部ファイルのアドレスを示します。

タイプ（オプション）:

キーワード: MIME (スクリプト言語のコンテンツタイプ)

ブラウザの互換性を最大限に確保するために、type 属性の値は主に text/javascript のままです。この属性が記述されていない場合、デフォルト値は text/javascript のままです。

注意: 外部ファイルを参照する場合、タグ内に他の JS コードを追加しないでください。解析時に、ブラウザは src によって参照される外部スクリプトファイルのみをダウンロードし、テーブルに埋め込まれたコードは無視されます。

<script> タグの位置

通常、外部ファイル (CSS ファイル、JavaScript ファイルを含む) を含むタグへの参照は、同じ場所 (通常は <head> タグ内) に配置します。

ただし、解析プロセス中に複数の JavaScript 外部ファイルに遭遇すると、すべての外部ファイルが読み込まれるまでページを完全に表示できないため、通常は次のように <body> タグの下部に配置します。

上で <script> に defer 属性があることを説明しましたが、HTML5 で説明されているように、HTML5 では埋め込みスクリプトに設定された defer 属性は無視されます。現在、defer 属性をサポートしているのは IE4 ～ IE7 のみです。IE8 以降は HTML5 標準に完全に準拠するため、<script> を <body> タグの下部に配置するのが依然として最善の選択です。

外部ファイルを参照する利点

保守が簡単: すべての JavaScript ファイルを 1 つにまとめると、HTML コードに触れる必要がなくなるだけでなく、開発者がコードを作成して保守しやすくなります。
ブラウジングの高速化: 複数の HTML ページが同じ JavaScript 外部ファイルを参照する場合、ファイルは 1 回だけ読み込まれる (キャッシュされる) ため、ページの読み込み速度を高速化できます。
セキュリティ: 外部ファイルを参照する場合、ユーザーが HTML コードを表示すると JavaScript コードは表示されないため、タグ内に記述するよりも安全です。

<noscript> タグ

文字通りの意味は NO-script、つまりスクリプトなしです。つまり、ブラウザが JavaScript をサポートしていない場合は、<noscript> タグ内のコンテンツが表示されます。