「JavaScript」を記述する場所は、3種類あります。その全パターンを紹介します。
CSSを書く場所（3パターン）と非常によく似ていますので、参照しながらみていくとわかりやすいです。
パターン１）<script>タグの内側
初心者が「JavaScript」を学ぶとき、一番最初に利用するのがこの書き方です。
たとえばこのような形で書きます。
<html>
<head>
<title> Title </title>
</head>
<body>
<p>
本文
</p>
<script type="text/javascript">
window.alert("Hello World");
</script>
</body>
</html>
<script>タグには、これはJavaScriptですよ、という属性を付けます。それが、「type=”text/javascript”」です。
※HTMLの属性については、この記事を参照してください：
<script>から</script>までの間が、「JavaScript」の世界です。この場所（<script>タグの内側）だけは、HTMLではなく、JavaScriptのルールでブラウザが解釈します。HTMLとJavaScriptではルールが異なるので気をつけてください。
<script>タグを書く場所
では、この<script>タグは、HTMLのどの部分に書くべきなのでしょうか。
本文、という感じではないので、その意味を考えれば本文として直接表示されない<head>タグの中に書くのが正しいような気がします。しかし、「JavaScript」には本文に追加するようなプログラムを書くこともできます。ですので、<body>の中でもよいような気がします。
実際に試してみると、<head>タグの中でも、<body>タグの中でも、あるいは、<html>タグの外側、つまり、</html>のあとに書いたとしても、ブラウザは同じように解釈して動作させてくれるようです。
よって、動いてほしいところに書く、あるいは、動いてほしいタイミングで書く、と考えるのがよいようです。
たとえば、「Googleアナリティクス」や「Googleタグマネージャー」などでは、新規に登録すると<script>タグが発行されてWebページに貼り付けるように指示されます。たいていの場合、HTMLの中で貼り付けるべき場所が指示されています。これは「動いてほしいところに書いてほしい」からです。
パターン２）外部ファイルに書いて読み込む
外部ファイルに書いて読み込む形が、もっともよく使われます。たとえば、このような書き方をします：
<script type="text/javascript" async="" src="conversion.js"></script><script>タグの属性として、「src=」と指定してパス名を書きます。URLでもOKです。
この場合、タグの中身は必要ありませんが、閉じタグ（</script>）をつけるのがルールです。
※）CSSを読み込む場合の<link>タグには閉じタグがありません。
「JavaScriptライブラリ」と呼ばれるまとまった機能群を読み込むときに、よく使われます。たとえば、「jQuery」という非常によく使われるJavaScriptライブラリを利用する場合には、<head>タグの中に次の１行を加えます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Google社が開発者・コンテンツのつくり手のために提供しています。高速で読み込めるので非常によく利用されます。
よく使われる理由は「キャッシュ」
この外部ファイルとして読み込む書き方が非常によく利用される理由はいくつかありますが、いちばん重要なのは「キャッシュ」です。
HTMLとは別のJavaScriptファイルとして保存して読み込ませると、ブラウザ側は１回読み込んだら、２回めに同じJavaScriptファイルが指定されたときには、サーバには読みに行かずに、１回読み込んだことがある手元に保存されているファイルを利用します。こうすることで、ページの表示が速くなります。
この仕組みを「キャッシュ」と呼びます。
たとえば、Webサイト全体で利用するJavaScriptプログラムは、別ファイルとして保存して読み込ませます。すると、どこかのページを１回表示したら、２ページ目以降はそのJavaScriptファイルを読み込む必要がなくなり、結果としてWebサイト全体の表示が高速になります。
パターン３）インライン
タグの属性として、JavaScriptを書き込むことができます。同じ行に追加するので「インライン」と呼ばれます。
たとえば、以下のような書き方ができます：
<a href="JavaScript:window.alert('hello world');">こんにちは</a>↑この1行をHTMLエスケープの中に書き込んで、「こんにちは」をクリックすると、ダイアログボックスが表示されます。
これは、「<a>タグでつくられたリンクをクリックした」というユーザーの操作によって、この１行のJavaScriptプログラムが起動しています。
このようなユーザーの操作を「イベント」と呼びます。
「イベント」とJavaScriptを組み合わせることによって、ユーザーの操作によって違う動きするWebページをつくることができます。
「クリックした」というイベントを書く方法もあります。たとえば、
<input type="button" value="クリック！" onclick="window.alert('ボタンがクリックされました。')">とHTMLに記入すると、「クリック！」というボタンが表示され、クリックすると「onclick」属性にかかれているJavaScriptが起動します。
まとめ
JavaScriptを書く場所について、３つのパターンをまとめました。
お役に立てば幸いです。
コメント