JavaScriptの記入場所、書き方について

前回デベロッパーツールについての使用方法について解説をさせていただきました。

今回はJavaScriptの記入場所について説明をさせてたいだきます。

1 JavaScriptを書く場所は？
- 1.1 JavaScriptの基本的な設置場所
  - 1.1.1 ヘッダー・body内に設置をする。
  - 1.1.2 タグ内に設置をする場合
2 JavaScriptの書き方
- 2.1 直接定義
- 2.2 外部定義
3 まとめ

JavaScriptを書く場所は？

JavaScriptの基本的な設置場所

script場合はHTML中のどこに書いてもいいことになっていますが、大きくわけると、『head要素の中』、『body要素の中』、『bodyタグの閉じタグの直前』となります。

最近では、JavaScriptは『bodyタグの閉じタグの直前』に書くことが基本となります。

ヘッダー・body内に設置をする。

サイト上にあるヘッダー内にいれます。
<head>というタグがありその中にJavaScriptを挿入します。

先読みをさせたい画像や関数等を記入する場合この設置方法となります。

bodyタグの中にいれる場合、何かを表示するようなスクリプトの場合は実際に表示する位置に記入をします。

タグ内に設置をする場合

タグの中に記入するには

aタグのhref属性を使ったりします。

<a href="JavaScript:ソース記入">ここをクリック</a><br>

<input type="button" value="Click!" onclick="ソースを記入します。">

aタグのhref属性を用いる場合は、そこにJavaScriptが書かれていることを示すために、 JavaScript:を付けますが、最近はあまり推奨をされていません。

JavaScriptの書き方

直接定義

HTMLファイルに直接JavaScriptを記入する方法のことを言います。

書き方として前述で紹介したＨＴＭＬファイル上に<script>タグを挿入しそこにコードを記載します。

<script>
  ソースを記入
</script>

下記のような形で.htmlを記入をすると

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
   <title>JavaScriptの書き方1: 直接定義</title></head><body>
<!– ここにHTMLを書くする –>
<script>    // ここにJavaScriptを書く
document.write(‘サイト上この部分が表示される’);
</script>
</body>
</html>

このソースコードをブラウザで実行すると、

「サイト上この部分が表示される」

が表示されます。

外部定義

外部定義については、このファイルを読み込むという宣言をして、JavaScriptのコード自体は外部ファイルに分割して書く方法のことを言います。

直接定義とは異なり、何度もコードを書く必要がないため変更の際便利な書き方となる。

ＨＴＭＬファイル上には下記のような形でコードを記載し

sample.jsというファイル名でJavaScriptファイルを用意すればいい形となります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>JavaScriptの書き方1: 直接定義</title></head>
<body>
<!– ここにHTMLを書くする –>
<script src=”my-sample.js”></script></body></html>
</body>
</html>

JavaScript用のファイル（sample.js）には

document.write(‘サイト上この部分が表示される’);

上記の形で更新をすると直接定義と同じ形で表示がされます。