- Home ›
- JavaScript入門 ›
- JavaScriptの記述方法 ›
- HERE
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番目の方法として「<」などをエスケープして「<」として記述する方法もあります。
<script type="text/javascript">
document.write("<p>JavaScript テスト</p>");
</script>
ただし数が多い場合は煩雑になりますしエスケープを忘れる可能性あります。また可読性も悪くなってしまいます。
そこで2番目の方法としてJavaScriptのスクリプト全体をCDATAセクションに記述する方法があります。
<![CDATA[ スクリプト ]]>
CDATAセクションにするにはスクリプトを「<![CDATA[」と「]]>」で囲みます。具体的には次のように記述します。
<script type="text/javascript">
<![CDATA[
document.write("<p>JavaScript テスト</p>");
]]>
</script>
CDATAセクション内に記述された内容は文字列データであってXMLマークアップ用のデータは含まれて居ないことを表します。その為「<」や「&」が含まれていてもマークアップ用の記号とは解釈されません。(ただし、CDATAセクションの終わりを表す ]]> だけはエスケープが必要であり ]]> とエスケープが必要です)。
※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>
上記を実際にブラウザ見てみると次のように表示されます。
( Written by Tatsuo Ikura )
AjaxTower