XHTMLファイルでのスクリプトの記述

広告

XHTMLの場合、<script>と</script>の間に記述されたJavaScriptのスクリプトもXHTMLファイル内の他のコンテンツと同じようにXMLとして解釈を行います。その結果、スクリプトの中に「<」や「&」が現れた場合はXMLマークアップ用のタグであるかのように扱います。

<script type="text/javascript">
document.write("<p>JavaScript テスト</p>");
</script>

上記ではJavaScriptを使って「<p>JavaScript テスト</p>」を一連の文字列として出力したいのですが、XHTMLの場合は<p>などの「<」が特別な記号として解釈されてしまいます。

スクリプト内の「<」や「&」を解釈されないようにするため1番目の方法として「<」などをエスケープして「&lt;」として記述する方法もあります。

<script type="text/javascript">
document.write("&lt;p&gt;JavaScript テスト&lt;/p&gt;");
</script>

ただし数が多い場合は煩雑になりますしエスケープを忘れる可能性あります。また可読性も悪くなってしまいます。

そこで2番目の方法としてJavaScriptのスクリプト全体をCDATAセクションに記述する方法があります。

<![CDATA[
スクリプト
]]>

CDATAセクションにするにはスクリプトを「<![CDATA[」と「]]>」で囲みます。具体的には次のように記述します。

<script type="text/javascript">
<![CDATA[
document.write("<p>JavaScript テスト</p>");
]]>
</script>

CDATAセクション内に記述された内容は文字列データであってXMLマークアップ用のデータは含まれて居ないことを表します。その為「<」や「&」が含まれていてもマークアップ用の記号とは解釈されません。(ただし、CDATAセクションの終わりを表す ]]> だけはエスケープが必要であり ]]&gt; とエスケープが必要です)。

※XHTMLではscriptタグで囲まれた内容はPCDATAとして扱われますがHTMLではCDATAとして扱われます。その為、HTMLではこのような処理が必要ありません。

ただ一部のブラウザでは <![CDATA[ が現れるとエラーとなるブラウザが存在します。そこで次のように記述して下さい。

<script type="text/javascript">
//<![CDATA[
document.write("<p>JavaScript テスト</p>");
//]]>
</script>

他の方法としてJavaScriptのスクリプトを外部ファイルとして保存し、XHTMLページから読み込むという方法もあります。この方法は別のページで確認します。

サンプルコード

それではHTMLの場合のサンプルを下記に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript">
//<![CDATA[

document.write("<p>JavaScript テスト</p>");

//]]>
</script>

</body>
</html>

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

JavaScript入門の他の記事を見てみる

( Written by Tatsuo Ikura )