【JavaScript】HTML操作の基礎①　JavaScriptを書く場所

2023.11.16

UnsplashのNEOMが撮影した写真

JavaScriptを書く場所は大きく2箇所

JavaScriptを書く場所は大きく分けると、以下の2箇所があります。

続いて、①、②それぞれの書き方を説明します。

以下コードのように、

HTMLの</body>の直前に<style></style>を書き、その中にJavaScriptを書きます。

<html>
    <head>
    </head>
    <body>

        <script>
            console.log('hello');
        </script>
    </body>
</html>

この方法は以下の2つの手順が必要です。

同じフォルダ内に「sample.js」、「sample.html」を作成し、以下手順１，２をやってみてください。

手順１．「.js」の拡張子でファイルを作成し、そのファイルにJavaScriptを書く。

[ファイル名：sample.js]
console.log('hello');

手順２．そのファイルをHTML内で読み込む

[ファイル名：sample.html]
<html>
    <head>


    </head>
    <body>


       <script src="sample.js"></script>
    </body>
</html>

上では「①HTMLファイルに書き込む」と「②別ファイルに書いてHTMLファイルで読み込む」共に<script>タグを</body>の直前で読み込みましたが、

実は<head>タグ、<body>タグ内ならどこにでも<script>タグは書けます。

しかし、JavaScriptは基本的にHTML要素が生成された後に動かすものなので、</body>タグの直前で読み込んでおくと良いです。