HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLマークアップのどこに

JavaScriptのコードは、HTML文書内の<script>タグと</script>タグの間に記述します。このスクリプトタグはWebページ内のどこにでも配置できますが、従来は<head>タグ内に記述することが一般的に推奨されてきました。

<script>タグは、ブラウザに対して「このタグ間のテキストをスクリプトとして解釈せよ」と指示する役割を果たします。

scriptタグの主な属性

<script>タグには、次の2つの重要な属性があります。

  • language属性 − 使用するスクリプト言語を指定します。通常は「javascript」を設定します。ただし、最近のHTML（および後継規格であるXHTML）では、この属性は段階的に廃止される方向にあります。
  • type属性 − 現在使用が推奨されている属性で、採用しているスクリプト言語を示します。値は「text/javascript」に設定します。

「Hello World」を表示するサンプル

ここで、「Hello World」という文字列を出力する簡単な例を見てみましょう。サンプルコードでは、JavaScriptコードを任意のHTMLコメントで囲んでいます。これは、JavaScript非対応の古いブラウザからコードを保護するための手法です。コメントは「//-->」で終了しています。「//」はJavaScriptにおけるコメント記号であり、これを付けることで、ブラウザがHTMLコメントの終了部分をJavaScriptのコードとして誤読することを防いでいます。

続いて、document.write関数を呼び出しています。この関数は、文字列をHTMLドキュメントへ書き出すためのもので、テキストやHTML、あるいはその両方を出力できます。以下のコードをご確認ください。

<html>
   <body>
      <script language="javascript" type="text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>
   </body>
</html>

実行結果

Hello World!

モダンな配置のベストプラクティス

なお、近年のWeb開発では、ページの表示速度への影響を考慮し、<head>内でdefer属性やasync属性を付けたscriptタグを配置するか、<body>タグの終了直前にscriptタグを置く方法が主流になっています。これにより、HTMLの解析を妨げることなくスクリプトを読み込めます。

  1. HTML DOM スクリプトオブジェクトとは？作成方法と主なプロパティを解説

    HTML DOM のスクリプトオブジェクト（Script Object）は、HTML ドキュメント内の <script> 要素を表すオブジェクトです。JavaScript を使って動的に script 要素を生成・操作することで、ページの読み込み後に外部スクリプトを読み込んだり、コードを実行したりできます。 スクリプトオブジェクトの作成方法 構文 スクリプトオブジェクトを作成するには、document オブジェクトの createElement() メソッドを使用します。構文は以下の通りです。 document.createElement(SCRIPT); このメソッドは新しい &

  2. HTML DOM の scripts コレクションとは？構文・プロパティ・使い方を実例付きで解説

    HTML DOM の scripts コレクションは、HTML ドキュメント内に存在するすべての <script> 要素をまとめて取得できるオブジェクトです。ページ上のスクリプト要素を一覧として扱いたい場合や、動的にスクリプト情報を参照したい場合に便利です。 基本構文 scripts コレクションへのアクセスは、以下の構文で行います。 document.scripts scripts コレクションのプロパティ プロパティ説明 lengthHTML ドキュメント内のコレクションに含まれる <script> 要素の数を返します。 scripts コレクションのメ