HTMLドキュメントにJavaScriptを埋め込む

JavaScriptこそ最も大衆に開かれた言語である。ブラウザあれば誰でも実行・開発できる。このサイトに基本をまとめた記事がないので少しずつまとめることにする。

以下のように書くのがベストだと思う。

<script type="text/javascript">
//<![CDATA[
alert('hello!');
//]]>
</script>

ちなみに以下のように書いても動作の上では問題なく実行される。

<script type="text/javascript">
alert('hello!');
</script>

しかしXHTMLとして書く場合は、「<」などの記号がXMLとして認識される。したがって以下のように囲むのが理論上は正しい。

<script type="text/javascript">
<![CDATA[
alert('hello<>');
]]>
</script>

但し、ファイルの拡張子がxhtmlかつブラウザがFirefox3.6やChromeだった場合にのみ上述のスクリプトが実行され、それ以外の条件下ではこれは正しく認識されない。

スクリプト内で閉じタグを文字列として書くときは文字列結合を使用しなくてはならない。

//<![CDATA[
alert('<' + '/script>');
//]]>

以下のように記述するとパースエラーとなる。それはHTMLパーサがJavaScriptのリテラルを理解しない為である。

//<![CDATA[
alert('</script>');
//]]>

このような厄介な問題を回避するためのもっとも良い方法は別ファイルにすることである。

以下のように記述することにより外部のスクリプトファイルを読み込むことができる。

<script type="text/javascript" src="./js/sample.js"></script>

現在、以下の様なlanguage属性は非推奨である。type属性が存在する場合は常に無視される。

<script language="Javascript" src="./js/sample.js"></script>

以下のようにjavascript:と書いてからjavascriptを記述すると、内容がjavascriptとして認識される。

<a href="javascript:alert('test');"></a>

また以下のようにイベントハンドラを使用することもできる。

<a onclick="alert('test');"></a>

いくつでも書くことができる。

<script type="text/javascript" src="./js/sample.js"></script>
<script type="text/javascript" src="./js/example.js"></script>

パーサーはHTMLドキュメント内での出現順に処理をするため、head要素内のscriptからbody要素内の要素に以下のようにアクセスすることはできない。

//<![CDATA[
alert(document.getElementById('container').innerHTML);
//]]>

以下のようにロード完了時に実行するようにしなければならない。

//<![CDATA[
window.onload = function(){
    alert(document.getElementById('container').innerHTML);
}
//]]>

E4Xなどはこの記事では解説しない。

@blog.justoneplanet.info