JavaScriptをHTMLに追加する方法

投稿日: 2019-11-08 2022-10-09
タグ: Development, javascript

序章

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

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

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

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

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

The <script> タグはに配置することができます <head> HTMLのセクションまたは <body> JavaScriptをロードするタイミングに応じて、セクション。

通常、JavaScriptコードはドキュメント内に入れることができます <head> それらをHTMLドキュメントのメインコンテンツに含めたり除外したりするためのセクション。

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

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

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ファイルにタグを付けます。

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

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コードは通常1つ以上のページに存在します js CSSなどの外部アセットが参照される方法と同様に、HTMLドキュメント内で参照されるファイル。

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

HTMLマークアップとJavaScriptコードを分離して、両方をより簡単にします
個別のファイルにより、メンテナンスが容易になります
JavaScriptファイルがキャッシュされると、ページの読み込みが速くなります

JavaScriptドキュメントをHTMLドキュメントに接続する方法を示すために、小さなWebプロジェクトを作成してみましょう。それはで構成されます script.js の中に js/ ディレクトリ、 style.css の中に 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>

それでは、日付を次のように表示するJavaScriptコードを移動してみましょう。 <h1> ヘッダー 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>

The <script> タグが指している script.js のファイル js/ Webプロジェクトのディレクトリ。

この行を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>

最後に、 style.css 背景色とスタイルをに追加してファイル <h1> ヘッダ：

style.css

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

そのCSSファイルを内で参照できます <head> 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>
    <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でコメントを書く方法を学ぶことができます。

getdocs

13036