DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript在XHTML中的用法詳解
JavaScript在XHTML中的用法詳解
編輯:JavaScript基礎知識     
編寫XHTML代碼的規則要比編寫HTML要嚴格得多,類似下面的代碼在HTML中是有效的,但在XHTML中則是無效的。
[javascript]
復制代碼 代碼如下:
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>

在HTML中,有特殊的規則用以確定<script>元素中的哪些內容可以被解析,但這些規則在XHTML中不適用。因為小於號(<)在XHTML中將被當作開始一個新標簽來解析。但是作為標簽,小於號後面不能跟空格,因此導致語法錯誤。
解決方法有兩個:一、用相應的HTML實體(<)替換代碼中所有的小於號(<);二、使用一個CData片段來包含JavaScript代碼。
方法一相應代碼:
[javascript]
復制代碼 代碼如下:
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>
<script type="text/javascript">
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
</script>

方法二相應代碼:
[javascript]
復制代碼 代碼如下:
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>
<script type="text/javascript"><![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
]]></script>

方法一雖然可以讓代碼在XHTML中正常運行,但卻導致代碼不好理解了;而方法二在兼容XHTML的浏覽器中可以解決問題。但不少浏覽器並不兼容XHTML,因而不支持CData片段。所以再使用JavaScript注釋將CData標記注釋掉。
相應代碼:
[html]
復制代碼 代碼如下:
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function compare(a, b)
{
if(a < b)
{
alert("a is less then b");
}
else if(a > b)
{
alert("a is greater then b");
}
else
{
alert("a is equal to b");
}
}
//]]>
</script>

這種格式在所有現代浏覽器中都可以正常使用。
附:不推薦使用的語法
[javascript]
復制代碼 代碼如下:
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>
<script><!--
function sayHi(){
alert("Hi!);
}
//--></script>

像上面這樣把JavaScript代碼包含在一個HTML注釋中可以讓不支持<script>元素的浏覽器隱藏嵌入的JavaScript代碼,即忽略<script>標簽中的內容,而那些支持JavaScript的浏覽器在遇到這種情況時,則必須進一步確認其中是否包含需要解析的JavaScript代碼。

雖然這種注釋格式得到了所有浏覽器的認可,也能被正確的解釋,但由於所有浏覽器都已經支持JavaScript,因此也就沒有必要再使用這種格式了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved