前書き

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> `タグは、HTMLの ` <head> `セクション、 ` <body> `セクション、または ` </ body> +`終了タグの後に配置できます。 、JavaScriptをいつ読み込むかによって異なります。

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

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

ブラウザのタイトルが「+ 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ページで現在の日付のアラートを表示できます。

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

最初に、JavaScriptコードを `+ <head> `タグの間に追加し、ページの残りの部分を読み込む前に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>




</head>

<body>

</body>



</html>

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

image:https://assets.digitalocean.com/articles/eng_javascript/js-files/js-alert.png [JavaScriptアラートの例]

また、スクリプトを `+ <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();

 </script>

</body>

</html>

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

image:https://assets.digitalocean.com/articles/eng_javascript/js-files/js-plain-date.png [JavaScript日付の例]

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

</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>

</head>

<body>

</body>

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

</html>

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

image:https://assets.digitalocean.com/articles/eng_javascript/js-files/js-styled-date.png [CSSを使用したJavaScriptの例]

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

結論

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

ここから、https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [JavaScript Developer Console]およびhttps:// wwwでの作業方法を学ぶことができます。 digitalocean.com/community/tutorials/how-to-write-comments-in-javascript[JavaScriptでコメントを書く方法]。