TOC

JavaScriptをHTMLに追加する方法

前書き

JavaScriptは、JSとも略され、Web開発で使用されるプログラミング言語です。 HTMLおよびCSSとともにWebのコアテクノロジーの1つとして、JavaScriptを使用してWebページをインタラクティブにし、Webアプリを構築します。 一般的な表示標準に準拠した最新のWebブラウザーは、追加のプラグインを必要とせずに、組み込みエンジンを介してJavaScriptをサポートします。

Web用のファイルを操作する場合、JavaScriptを読み込んでHTMLマークアップと一緒に実行する必要があります。 これは、HTMLドキュメント内でインラインで行うことも、ブラウザがHTMLドキュメントと一緒にダウンロードする別のファイルで行うこともできます。

このチュートリアルでは、JavaScriptをWebファイルに、HTMLドキュメントにインラインで、および別個のファイルとして組み込む方法について説明します。

JavaScriptをHTMLドキュメントに追加する

JavaScriptコードをラップアラウンドする専用のHTMLタグ<script>を使用することにより、HTMLドキュメントにJavaScriptコードを追加できます。

<script>タグは、JavaScriptのタイミングに応じて、HTMLの<head>セクション、<body>セクション、または</body>closeタグの後に配置できます。負荷。

通常、JavaScriptコードは、ドキュメントの<head>セクション内に配置して、HTMLドキュメントのメインコンテンツに含まれないようにすることができます。

ただし、スクリプトをページのレイアウト内の特定のポイントで実行する必要がある場合（document.writeを使用してコンテンツを生成する場合など）、スクリプトを呼び出す必要のあるポイント、通常は<body>内に配置する必要があります。セクション。

ブラウザのタイトルがToday's Dateの次の空白のHTMLドキュメントについて考えてみましょう。

index.html





    
    
    Today's Date

現在、このファイルにはHTMLマークアップのみが含まれています。 次のJavaScriptコードをドキュメントに追加するとします。 

let d = new Date();
alert("Today's date is " + d);

これにより、ユーザーがいつサイトをロードしたかに関係なく、Webページで現在の日付のアラートを表示できます。

これを実現するために、<script>タグとJavaScriptコードをHTMLファイルに追加します。

まず、<head>タグの間にJavaScriptコードを追加し、ページの残りの部分に読み込む前にJavaScriptスクリプトを実行するようにブラウザに通知します。 たとえば、次のように、<title>タグの下にJavaScriptを追加できます。

index.html





    
    
    Today's Date

ページをロードすると、次のようなアラートが表示されます。

JavaScript Alert Example

スクリプトを<body>タグの内側または外側に配置して、ページを再読み込みすることもできます。 これは堅牢なHTMLドキュメントではないため、ページの読み込みに違いはほとんどありません。

HTMLの本文に表示される内容を変更する場合は、次の例のように、ページに表示されるように<head>セクションの後に実装する必要があります。

index.html





    
    
    Today's Date

Webブラウザーからロードされた上記のHTMLドキュメントの出力は、次のようになります。

JavaScript Date Example

小さいスクリプトまたは1ページでのみ実行されるスクリプトはHTMLファイル内で正常に機能しますが、大きなスクリプトまたは多くのページで使用されるスクリプトの場合、それを含めると扱いにくくなったり読みにくくなったりするため、あまり効果的なソリューションではありません理解します。 次のセクションでは、HTMLドキュメントで個別のJavaScriptファイルを処理する方法について説明します。

別のJavaScriptファイルを使用する

より大きなスクリプトまたは複数のページで使用されるスクリプトに対応するために、JavaScriptコードは通常、CSSなどの外部アセットが参照される方法と同様に、HTMLドキュメント内で参照される1つ以上のjsファイルに存在します。

別のJavaScriptファイルを使用する利点は次のとおりです。

  • HTMLマークアップとJavaScriptコードを分離して、両方をより簡単にする

  • 個別のファイルでメンテナンスが簡単に

  • JavaScriptファイルがキャッシュされると、ページの読み込みが速くなります

JavaScriptドキュメントをHTMLドキュメントに接続する方法を示すために、小さなWebプロジェクトを作成しましょう。 これは、js/ディレクトリのscript.js、css/ディレクトリのstyle.css、およびプロジェクトのルートのメインindex.htmlで構成されます。 

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

上記のセクションから以前のHTMLテンプレートから始めることができます。

index.html





    
    
    Today's Date

それでは、日付を<h1>ヘッダーとして表示するJavaScriptコードをscript.jsファイルに移動しましょう。

script.js

let d = new Date();
document.body.innerHTML = "
Today's date is " + d + "
"

次のコード行を使用して、このスクリプトへの参照を<body>セクションまたはその下に追加できます。

<script>タグは、Webプロジェクトのjs/ディレクトリにあるscript.jsファイルを指しています。

この行をHTMLファイルのコンテキストで見てみましょう。この場合は、<body>セクションの下にあります。

index.html





    
    
    Today's Date

最後に、<h1>ヘッダーに背景色とスタイルを追加して、style.cssファイルも編集しましょう。

style.css

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

HTMLドキュメントの<head>セクション内でそのCSSファイルを参照できます。

index.html





    
    
    Today's Date

これで、JavaScriptとCSSを配置して、index.htmlページを選択したWebブラウザーにロードできます。 次のようなページが表示されます。

JavaScript Date with CSS Example

JavaScriptをファイルに配置したので、追加のWebページから同じ方法でJavaScriptを呼び出し、すべてを1つの場所で更新できます

結論

このチュートリアルでは、JavaScriptをWebファイルに組み込む方法について説明しました。HTMLドキュメントにインラインで組み込む方法と、個別の.jsファイルとして組み込む方法の両方です。

ここから、JavaScript Developer Consoleとhow to write comments in JavaScriptの操作方法を学ぶことができます。

Related