JavaScript在XHTML中的用法详解

时间:2024-04-17 10:11:04 

编写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实体(&lt;)替换代码中所有的小于号(<);二、使用一个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,因此也就没有必要再使用这种格式了。

标签:JavaScript,XHTML
0
投稿

猜你喜欢

  • python基础教程之分支、循环简单用法

    2021-05-30 08:51:48
  • 彻底弄懂CSS盒子模式之二(导航栏实例)

    2007-05-11 16:52:00
  • Mootools 1.2教程(19)——Tooltips

    2008-12-25 13:26:00
  • javascript面向对象编程(三)

    2008-03-07 13:19:00
  • Python中turtle绘图模块的详细讲解

    2022-12-30 02:38:27
  • sql存储过程详解

    2024-01-22 07:00:39
  • ASP实现长文章自动分页的函数代码

    2008-10-10 17:09:00
  • 基于python的selenium两种文件上传操作实现详解

    2022-01-31 23:02:17
  • sqlserver中如何查询出连续日期记录的代码

    2011-09-30 11:16:56
  • vue iview的菜单组件Mune 点击不高亮的解决方案

    2024-06-07 15:20:08
  • 一文带你学会使用PHP接口

    2023-06-07 18:40:13
  • django框架两个使用模板实例

    2023-11-01 20:05:18
  • 让python 3支持mysqldb的解决方法

    2024-01-15 22:50:08
  • Python Pygame中精灵和碰撞检测详解

    2021-01-31 05:45:27
  • 纯js实现瀑布流布局及ajax动态新增数据

    2023-08-08 07:11:23
  • 解决python3插入mysql时内容带有引号的问题

    2024-01-24 13:34:09
  • Mysql日期和时间函数大全

    2011-03-08 09:52:00
  • 使用Python实现牛顿法求极值

    2021-10-14 15:10:21
  • MySQL磁盘碎片整理实例演示

    2024-01-26 15:28:26
  • js获取指定字符前/后的字符串简单实例

    2024-05-02 17:31:10
  • asp之家 网络编程 m.aspxhome.com