HTMLへのJavaScriptの適応方法

javascript_practice内にindex.htmlを作成しましょう。

作成したら以下のボイラーテンプレートを使用しましょう。また、bodyタグの中に以下を追加しましょう。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

こちらをLIve serverにて開きましょう。

VSCodeはindex.htmlを開いている状態で、二本指でクリックし、Open with Live Serverをクリックします。

クリックすると自動でブラウザが開くかと思います。

ではこのHTMLファイルにJavaScriptを記載してみましょう。

JavaScriptはscriptタグを使って記述します。

scriptタグはheadタグ内か、bodyタグ内に記載します。

最も良い方法は、bodyタグ内の1番最後に記述することです。

理由として、htmlファイルは1番上から読み込まれるので、先頭の方にJavaScriptを記載したとすると、Javascriptが先に読み込まれてcontentの表示が遅くなってしまうためです。

h1タグの後に以下のscriptタグを記述しましょう。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

こちらをブラウザのDevToolsで確認すると、以下のように表示されているかと思います。

scriptタグ内にコードを記載しましたが、実務の場合JavaScriptのコードが何百行、何千行といくつことがほとんどですので、実際の場合は、JavaScriptを別のファイルに分けることが多いです。

javascript_practice内にindex.jsを作成して、以下を記述しましょう。

index.js◎

console.log("Hello World");

htmlファイルにてjsファイルを読み込む場合は、以下のようにscriptタグのsrc属性にファイルのパスを記述します。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="index.js"></script>
  </body>
</html>

Previous環境構築 NextNode.jsを使用したJavaScriptの動作方法

Last updated 2 years ago