JavaScript ファイルを HTML ファイルにリンクする
この記事では、JavaScript ファイルを HTML ファイルにリンクする 2つの方法について説明します。最初のプロセスでは、JavaScript ファイルを作成し、ファイルを外部にリンクします。2 番目のプロセスでは、JavaScript コードを HTML ドキュメントに挿入します。
<script> タグと src 属性を使用して、外部 JavaScript を HTML にリンクする
このメソッドでは、<script> タグの src 属性を使用して、JavaScript ファイルを HTML ファイルにリンクします。src 属性は、外部ファイルの URL またはファイルの場所を指定するために使用されます。Web サイトの複数のページで同じ JavaScript を使用する場合は、同じ JavaScript を何度も書き込むのではなく、外部の JavaScript ファイルを作成する必要があります。HTML の <head> タグ内に <script> を記述します。スクリプトファイルを.js 拡張子で保存した後、<script> タグの src 属性を使用して参照します。
たとえば、HTML ファイルと JavaScript ファイルの 2つのファイルを作成します。JS ファイルに JavaScript を記述し、HTML ファイルに HTML を記述します。保存時に 2つのファイルにそれぞれ名前を付けた後、.html および .js 拡張子を使用することを忘れないでください。これらの 2つのファイルを同じフォルダー内に配置します。HTML ファイルの <script> タグの src 属性に JavaScript ファイル名を書き込みます。たとえば、ファイル名が hello.js の場合、<script src="hello.js"> </script> と記述します。
以下の例は、JavaScript ファイルを HTML ファイルにリンクする方法を示しています。HTML ファイルに This is HTML と書き、JavaScript ファイルに This is written from JavaScript と書きました。以下の出力セクションの両方のテキストでわかるように、JavaScript が HTML にリンクされていることを証明しています。
サンプルコード：
<html>
<head>
<script src="hello.js"> </script>
</head>
<body>
<p> This is HTML</p>
</body>
</html>
document.write('This is written from JavaScript');
出力：
<script> タグを使用して、内部 JavaScript を HTML にリンクする
最初の方法とは異なり、<script> タグを使用して JavaScript のコードを HTML ファイルに追加します。<script> タグは、クライアント側のスクリプトを追加するために使用されます。JavaScript は、HTML ファイルの <script> タグ内に内部的に記述できます。HTML ファイルを実行すると、JavaScript がロードされていることがわかります。
たとえば、HTML の <p> タグに This is HTML というテキストを記述します。次に、<script> タグを開き、document.write を使用して This is written from JavaScript というメッセージを入力します。次に、script タグを閉じます。
以下の出力には、HTML と JavaScript で記述された両方のテキストが表示されていることがわかります。HTML と JavaScript がリンクされていることを証明します。
例：
<html>
<head>
</head>
<body>
<p> This is HTML </p>
</body>
<script>
document.write("This is written from JavaScript");
</script>
</html>
出力：
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn