# HTMLへのJavaScriptの適応方法 `javascript_practice`内にindex.htmlを作成しましょう。作成したら以下のボイラーテンプレートを使用しましょう。また、bodyタグの中に以下を追加しましょう。

<!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タグを記述しましょう。

<!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`を作成して、以下を記述しましょう。

console.log("Hello World");

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

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