HTML内でのJavaScriptの記述方法について

JavaScript

HTML文書にJavaScriptを埋め込む方法は、主に二つあります。一つは、HTML文書内に<script>タグを使って直接JavaScriptのコードを記述する方法です。もう一つは、別のファイルにJavaScriptのコードを保存して、HTML文書から<script>タグのsrc属性で読み込む方法です。それぞれの方法について、詳しく見ていきましょう。

HTML内に直接JavaScriptを記述する場合

HTML内に直接JavaScriptを記述する場合は、<script>タグと</script>タグの間にJavaScriptのコードを書きます。例えば、以下のようなコードです。

<script>
  document.write("この文字がブラウザに表示される");
</script>

このコードは、ブラウザに「この文字がブラウザに表示される」という文字列を出力します。document.write()は、JavaScriptの組み込み関数で、引数に指定した文字列をHTML文書に書き込む機能を持ちます。

<script>タグは、HTML文書内であればどこでも記述できますが、一般的には<head>タグや<body>タグの中に記述します。<head>タグの中に記述した場合は、HTML文書が読み込まれるときにJavaScriptが実行されます。<body>タグの中に記述した場合は、HTML文書が表示されるときにJavaScriptが実行されます。

<script>タグには、type属性やlanguage属性などを指定することもできますが、現在のHTML5では必要ありません。ブラウザは、<script>タグ内のコードをデフォルトでJavaScriptとして解釈します。

別のファイルにJavaScriptを記述して読み込む場合

別のファイルにJavaScriptを記述して読み込む場合は、<script>タグのsrc属性にファイル名を指定します。例えば、以下のようなコードです。

<script src="sample.js"></script>

このコードは、sample.jsというファイルに保存されたJavaScriptのコードを読み込んで実行します。sample.jsというファイルは、同じディレクトリにあると仮定していますが、相対パスや絶対パスで指定することもできます。

<script src="sample.js"></script>
 ↓
<script src="./script/sample.js"></script>  ‘script フォルダ内にsample.js を配置した場合
 ↓
<script src="www.myweb.com/script/sample.js"></script>  絶対パス指定の場合

別のファイルにJavaScriptを記述して読み込む場合の利点は、以下のようなものがあります。

– HTML文書とJavaScriptのコードを分離することで、可読性や保守性が向上します。

– 同じJavaScriptのコードを複数のHTML文書から共通して利用できます。

– ブラウザは、一度読み込んだJavaScriptファイルをキャッシュすることで、通信量や読み込み時間を節約できます。

別のファイルにJavaScriptを記述して読み込む場合は、<script>タグの記述場所が重要です。
<script>タグは、ブラウザがその位置に到達すると、その時点でJavaScriptファイルを読み込んで実行します。そのため、<script>タグが<head>タグや<body>タグの先頭にあると、ページの表示が遅くなる可能性があります。特に外部サーバーからJavaScriptファイルを読み込む場合は、通信遅延やエラーが発生する可能性もあるため、<body>タグの最後に記述することが推奨されています。

コメント