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

JavaScript

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

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

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を記入する方法のことを言います。

書き方として前述で紹介したHTMLファイル上に<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のコード自体は外部ファイルに分割して書く方法のことを言います。

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

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

<script src=”sample.js”></script>

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(‘サイト上この部分が表示される’);

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

まとめ

いかがでしたでしょうか

今回はJavaScriptの簡単な書き方について紹介をさせてたいだきました。

基本的には外部定義から使用をする場面が多くなると思いますが、この設置と書き方がJavaScriptを覚える第一歩となります。

コメント

タイトルとURLをコピーしました