JavaScriptをHTMLに追加する方法

序章

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

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

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

HTMLドキュメントへのJavaScriptの追加

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

<script>タグは、JavaScriptをいつロードするかに応じて、HTMLの<head>セクションまたは<body>セクションに配置できます。

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

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

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

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 
</body>
 
</html>

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

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

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

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

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

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
 
<body>
 
</body>
 
 
 
</html>

ページを読み込むと、次のようなアラートが表示されます。

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

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
  
  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>
 
</body>
 
</html>

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

小さいスクリプトや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

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 
</body>
 
</html>

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

script.js

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

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

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

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

この行をHTMLファイルのコンテキストで、この場合は<body>セクション内で考えてみましょう。

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 

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

</body> 
 
</html>

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

style.css

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

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

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 

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

</body>
 
</html>

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

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

結論

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

ここから、 JavaScript DeveloperConsoleの操作方法とJavaScriptでコメントを書く方法を学ぶことができます。