JavaScript在XHTML中的用法详解

更新时间：2013年04月11日 16:36:06 作者：

下面的代码在HTML中是有效的，但在XHTML中则是无效的接下来为大家介绍下JavaScript在XHTML中的用法，感兴趣的朋友可以参考下哈

编写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，因此也就没有必要再使用这种格式了。

JSONObject用法详解
本文详细讲解了JSONObject的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
location.href用法总结(最主要的)
location.href在使用中很是频繁，接下来为大家详细介绍下location.href主要的使用方法有哪些，感兴趣的朋友可以参考下
2013-12-12
Javascript开发之三数组对象实例介绍
Javascript开发之三组数对象详细介绍，需要的朋友可以参考下
2012-11-11
浅析JS原型继承与类的继承
下面小编就为大家带来一篇浅析JS原型继承与类的继承。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04
JavaScript基础之this详解
JavaScript中函数的this对象是函数在执行时所处的作用域(例：当在网页的全局作用域中调用函数时，this对象引用的就是window)。
2017-06-06
js 编写规范
js输写最好还是可以面向对象方式用类方向进行包装 js输写两种方式闭包原型
2010-03-03
js自带函数备忘数组
js自带函数备忘数组...
2006-12-12
Javascript this 关键字详解
Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.其实, 这都是因为, 我们对它的不了解.
2014-10-10
微信小程序wx:for循环的实例详解
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。这篇文章主要介绍了微信小程序wx:for循环的相关知识,需要的朋友可以参考下
2018-10-10
JavaScript lastIndexOf方法入门实例（计算指定字符在字符串中最后一次出现的位置）
这篇文章主要介绍了JavaScript字符串对象的lastIndexOf方法入门实例,lastIndexOf方法用于计算指定字符在字符串中最后一次出现的位置,需要的朋友可以参考下
2014-10-10