script要素の概要
scriptとはコードをコンパイルしながら実行される簡易的なプログラムのことをいいます。
また、逆にコンパイルという処理をしてからでないと実行できない言語をコンパイル言語といったりします。
コンパイルというのは私たち人間が理解できるプログラム言語からコンピューターが理解できる機械語に翻訳することをいいます。 javascriptはコードを書いてから、人が意識しなくてもブラウザ側で即時コンパイルを行いながら実行されるのでスクリプト言語です。 似た名前の言語にjavaというのがありますが、こちらは機械語に変換する処理をしてからでないと実行できないコンパイル言語となります。
このscript要素はスクリプト言語のプログラムを記述するための要素であるとともに、プログラムを書いた別のファイルを読み込む場合にも 使用されます。
実機サンプル
javascriptを別のファイルから読み込む場合
//hello-world.js (同じフォルダにあります)
document.write("Hello World");
//このページで hello-world.js を読込む
<script src="./hello-world.js"></script>
結果:
javascriptをHTML文書内に記述する場合
//このページのscript要素内にコードを書く
<script>document.write("こんにちは");</script>
結果:
スクリプト要素はどこに書くのか
スクリプト要素をHTML文書のどこに配置するかは状況によって異なりますが、 おおよその決まった場所があります。 基本的にはhead要素の開始タグと終了タグの間に内包するか、body要素内の最後に記述するのが普通です。 ただし、このページで使用しているdocument.writeというコードは文字を表示させる場所にスクリプト要素を配置する必要があります。 では、次にhead要素内と、body要素内に配置する例を見てみましょう。
head要素内に記述する
まず、はじめに題名に「記述」すると書きましたが、これはscript要素での読込みと直接のコード記述の両方を含めた意味です。
それでは本題です。早速ですが実行サンプルをみてみましょう。 まず、このページのhead要素ないにscript要素を配置してコードを記述します。(内容はお約束のアラートメソッドにします)<head>
<script>
function clickAlert(){
window.alert("Hello World");
}
</script>
</head>
<body>
<button onclick="clickAlert()">Hello World</button>
</body>
body要素内の最後に記述する
ボタンをクリックしたら指定した要素の背景色を変更してみます。(p要素の背景色を変更)<body>
<button onclick="clickAlert()">Hello World</button>
<p id="idP">Hello World</p>
//ページのコンテンツを記述
<script>
function clickBgColor(){
document.getElementById("idP").style = "background-color: yellowgreen;"
}
</script>
</body>
Hello World
なぜ、body要素内の最後にscript要素を配置するかの理由ですが、このサンプルの場合、 p要素のid属性をスクリプトが参照しているからです。この<p id="idP">のidPをターゲットに.styleでCSSを設定しています。
HTMLにしてもCSSにしてもjavascriptでもコードは全て上から読み込まれて実行されていきます。 idPという識別子を設定したp要素よりも前にスクリプトのコードがあると、「idPはどこにあるんだ？」とエラーになってしまいます。
つまりページの要素が全て読み込まれてからjavascriptが実行される方がエラーになりにくいということでbody要素内の最後に配置するのです。 しかし、実際にはscriptはhead要素内に配置されることが多いようです。私はbodyの最後も悪くないと思いますが・・・
では、次でhead内にscript要素を配置して管理するためのコードの記述例を見ていきましょう。
head要素内でscript要素を管理する
大きなサイトになるとHTML文書とは別にjavascriptを記述したjsファイルも増えてくることでしょう。 サイト作り始める段階で要素構成やidやclassなどをしっかりと決めておけば、それに見合ったスクリプトファイルを作成して、 それを読み込むコードを各ページのhead要素内に設置するだけで、各ページごとに必要な機能を追加できるようになります。
ただ、前項でも書きましたが、HTML文書の上部にscriptの読込みがあるということは、それ以降に記述してある要素は、まだブラウザが 読み込んでいないわけで、要素はもとより、idやclassなども参照できません。ここで必要なのがイベントの登録といわれるものです。
ここでは、head要素でscriptを読み込んでも使えるようにするための2つのイベント登録のコードをサンプルとして掲載します。 どちらを使うかは、試した状況によって選んでいけば分かるようになってくると思います。
DOMツリーの構築が完了した時点で実行するイベントコード (要素の構成だけ)
document.addEventListener("DOMContentLoaded",function(){
任意のスクリプト処理コード;
},false);
DOMツリーの構築が完了した後、画像などの読込みも全て完了した時点で実行するイベントコード
window.addEventListener("load", function(){
任意のスクリプト処理コード;
},false);