第2章：在HTML中使用JavaScript
2011-11-25 15:37
239 查看
一、<script>元素
这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的HTML规范中。HMTL4.01为<script>定义了下列5个属性
使用<script>元素的方式有2种
1、直接在页面嵌入JavaScript代码
<script type="text/javascript">
function sayHi()
{
alert("Hello!");
}
</script>
包含在<script>元素内部的JavaScript代码将被从上至下依次解释，在解释器<script>元素内部所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示
在使用<script>嵌入JavaScript代码时，记住不在要代码中任何地方出现”</script>”字符串，例如，浏览器在加载下面所示代码时就会产生一个错误
<script type="text/javascript">
function sayScript()
{
alert("</script>");
}
</script>
因为浏览器遇到字符串"</script>"时，会认为那是结束的</script>标签，而通过把字符串分割为2部分可以解决这个问题，如：
<script type="text/javascript">
function sayScript()
{
alert("</scr"+"ipt>");
}
</script>
2、通过<script>元素包含外部的JavaScript文件
<script type="text/javascript" src="js/login.js"></script>
注：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码
另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件，这一点既使<script>元素倍显强大，又让它备受争议。<script>与<img>元素非常相似，即它的src属性可以指入当前HTML页面所在的域之外的某个域中的URL，例如
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点可以在必要时通过不同的域来提供JavaScript文件，不过，在访问自己不能控制的服务器上的JavaScript文件则要多加小心，否则文件中的代码随时有可能被替换
无论如何包含代码，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析……
标签的位置
习惯放于HTML页面的<head>标签中
但这样做有时会引起如<head></head>中的外部JS文件没解析完，延迟期间浏览器窗口空白，或者是JS在执行中，出现空对象异常（原因是HTML元素未加载到页面中），因此现在的WEB应用程序一般都把全部的JS引用放在<body>元素中，放在页面内容的后面。
延迟脚本
<script type="text/javascript" src="js/login.js" defer=”defer”></script>
Defer这个属性表示脚本会被延迟到整个页面都解析完毕再运行。实际上与上面介绍的把JS放在页面最底部的效果是一样的。
但不是所有浏览器都支持defer属性，因此建议使用“把JS引用放在<body>元素中，放在页面内容的后面”这个方法
在XHTML中的用法
可扩展超文本标记语言，即XHTML（Extensible HyperText Markup Language），是将HTML作为XML的应用而重新定义的一个标准，编写XHTML代码的规则要比编写HTML严格得多，而且直接影响能否在嵌入JavaScript代码时使用<script />标签。以下面的代码块为例，虽然它们在HTML中是有效的，但在XHTML中则是无效的
<script type="text/javascript">
function compare(a,b)
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
</script>
这是由于a<b中的小于号在XHTML中被当作一个标签的开始，作为标签来讲，小于号后面不能跟空格，因此导致语法错误
解决方法：
1、 用相应的HTML实体(<)替换代码中所有的小于号（<），替换后代码如下
<script type="text/javascript">
function compare(a,b)
{
if(a < b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
</script>
2、 用一个CData片段来包含JavaScript代码，在XHTML(XML)中，CData片段是文档中一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容，
<script type="text/javascript">
function compare(a,b)<![CDATA[
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
]]>
</script>
在兼容XHTML的浏览器中，这个方法可以解决问题，实际上不少浏览器不兼容XHTML，因而不支持CData片段，怎么办呢？再使用JavaScript注释将CData标记注释掉就可以了：
<script type="text/javascript">
function compare(a,b)
//<![CDATA[
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
//]]>
</script>
这种格式在所有现代浏览器都可以正常使用，它能通过XHTML验证，而且对XHTML之前的浏览器也会平稳退化
不推荐使用的语法
<script><!--
function sayHi(){
alert("Hello!");
}
//--></script>
让不支持<script>元素的浏览器能够隐藏嵌入javascript代码。
由于现在所有浏览器都支持javascript，因此没必要再用这种格式了
嵌入代码与外部文件
在HTML嵌入javascript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外中文件，优点如下
可维护性－遍及不同HTML页面的javascript代码会造成维护问题，但把所有javascript文件都放在一个文件夹中，维护起来就轻松多了，开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑javascript代码
可缓存－浏览器能够根据具体的设置缓存链接的所有外部JS文件，也就是说，如果有2个页面都使用同一JS文件，这个文件只须下载一次，最终结果就是能够加快页面加载的速度
可适应未来－通过外部文件来包含javascript无须使用前面提到的XHTML或注释hack，HTML和XHTML包含外部文件的语法是相同的
二、文档模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
最初的2种文档模式是：混杂模式（quirks mode）和标准模式（standards mode），这2种模式主要影响CSS内容的呈现，但在某些情况也会影响JavaScript的解释执行。
如果在HTML文档开始处没有文档类型声明，浏览器会默认开启混杂模式，但采用混杂模式不是值得推荐的做法，因为不同浏览器的混杂模式行为差异非常大，如果不使用某些hack技术，跨浏览器的一致性就无法实现
三、<noscript>元素
当浏览器不支持JS时，使用<noscript>元素显示替代的内容
<noscript>元素可以包含能够出现在<body>中的任何HTML元素－<script>元素除外
包含在<noscript>元素中的内容只有在浏览器不支持脚本或浏览器支持脚本，但脚本被禁用这2种情况下才会显示出来，除此外的其他情况下，浏览器都不会呈现<noscript>中的内容
四、小结
把JavaScript插入到HTML页面中要使用<script>元素，使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript文件，而我们需要注意的地方有：
1、这2种方式都需要把type属性设置为 text/javascript，以表明使用的脚本语言是JavaScript
2、在包含外部JavaScript文件时，必须将src属性设置为指定相应文件的URL，而这个文件即可以是同一服务器上的文件，也可以是其他任何域中的文件
3、所有<script>元素会按照它们在页面中出现的先后顺序依次被解析，只有在解析完前面<script>元素的代码之后，才会开始解析<script>元素中的代码
4、浏览器在呈现后面的页面内容之前，必须先解析前面的<script> 元素中的代码，为此，一般将<script>元素放在页面内容之后和</body>标签之前
5、在IE中，通过defer属性可以让浏览器呈现完文档之后再执行脚本，虽然defer属性是HTML4.01规定的，但只有IE支持该属性
6、<noscript>元素可以指定在不支持脚本或禁用脚本的浏览器中显示的替代内容，但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容
这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的HTML规范中。HMTL4.01为<script>定义了下列5个属性
使用<script>元素的方式有2种
1、直接在页面嵌入JavaScript代码
<script type="text/javascript">
function sayHi()
{
alert("Hello!");
}
</script>
包含在<script>元素内部的JavaScript代码将被从上至下依次解释，在解释器<script>元素内部所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示
在使用<script>嵌入JavaScript代码时，记住不在要代码中任何地方出现”</script>”字符串，例如，浏览器在加载下面所示代码时就会产生一个错误
<script type="text/javascript">
function sayScript()
{
alert("</script>");
}
</script>
因为浏览器遇到字符串"</script>"时，会认为那是结束的</script>标签，而通过把字符串分割为2部分可以解决这个问题，如：
<script type="text/javascript">
function sayScript()
{
alert("</scr"+"ipt>");
}
</script>
2、通过<script>元素包含外部的JavaScript文件
<script type="text/javascript" src="js/login.js"></script>
注：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码
另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件，这一点既使<script>元素倍显强大，又让它备受争议。<script>与<img>元素非常相似，即它的src属性可以指入当前HTML页面所在的域之外的某个域中的URL，例如
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点可以在必要时通过不同的域来提供JavaScript文件，不过，在访问自己不能控制的服务器上的JavaScript文件则要多加小心，否则文件中的代码随时有可能被替换
无论如何包含代码，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析……
标签的位置
习惯放于HTML页面的<head>标签中
但这样做有时会引起如<head></head>中的外部JS文件没解析完，延迟期间浏览器窗口空白，或者是JS在执行中，出现空对象异常（原因是HTML元素未加载到页面中），因此现在的WEB应用程序一般都把全部的JS引用放在<body>元素中，放在页面内容的后面。
延迟脚本
<script type="text/javascript" src="js/login.js" defer=”defer”></script>
Defer这个属性表示脚本会被延迟到整个页面都解析完毕再运行。实际上与上面介绍的把JS放在页面最底部的效果是一样的。
但不是所有浏览器都支持defer属性，因此建议使用“把JS引用放在<body>元素中，放在页面内容的后面”这个方法
在XHTML中的用法
可扩展超文本标记语言，即XHTML（Extensible HyperText Markup Language），是将HTML作为XML的应用而重新定义的一个标准，编写XHTML代码的规则要比编写HTML严格得多，而且直接影响能否在嵌入JavaScript代码时使用<script />标签。以下面的代码块为例，虽然它们在HTML中是有效的，但在XHTML中则是无效的
<script type="text/javascript">
function compare(a,b)
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
</script>
这是由于a<b中的小于号在XHTML中被当作一个标签的开始，作为标签来讲，小于号后面不能跟空格，因此导致语法错误
解决方法：
1、 用相应的HTML实体(<)替换代码中所有的小于号（<），替换后代码如下
<script type="text/javascript">
function compare(a,b)
{
if(a < b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
</script>
2、 用一个CData片段来包含JavaScript代码，在XHTML(XML)中，CData片段是文档中一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容，
<script type="text/javascript">
function compare(a,b)<![CDATA[
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
]]>
</script>
在兼容XHTML的浏览器中，这个方法可以解决问题，实际上不少浏览器不兼容XHTML，因而不支持CData片段，怎么办呢？再使用JavaScript注释将CData标记注释掉就可以了：
<script type="text/javascript">
function compare(a,b)
//<![CDATA[
{
if(a<b){
alert("a is less than b");
}else if(a>b){
alert("a is greater than b");
}else{
alert("a is equal to b");
}
}
//]]>
</script>
这种格式在所有现代浏览器都可以正常使用，它能通过XHTML验证，而且对XHTML之前的浏览器也会平稳退化
不推荐使用的语法
<script><!--
function sayHi(){
alert("Hello!");
}
//--></script>
让不支持<script>元素的浏览器能够隐藏嵌入javascript代码。
由于现在所有浏览器都支持javascript，因此没必要再用这种格式了
嵌入代码与外部文件
在HTML嵌入javascript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外中文件，优点如下
可维护性－遍及不同HTML页面的javascript代码会造成维护问题，但把所有javascript文件都放在一个文件夹中，维护起来就轻松多了，开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑javascript代码
可缓存－浏览器能够根据具体的设置缓存链接的所有外部JS文件，也就是说，如果有2个页面都使用同一JS文件，这个文件只须下载一次，最终结果就是能够加快页面加载的速度
可适应未来－通过外部文件来包含javascript无须使用前面提到的XHTML或注释hack，HTML和XHTML包含外部文件的语法是相同的
二、文档模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
最初的2种文档模式是：混杂模式（quirks mode）和标准模式（standards mode），这2种模式主要影响CSS内容的呈现，但在某些情况也会影响JavaScript的解释执行。
如果在HTML文档开始处没有文档类型声明，浏览器会默认开启混杂模式，但采用混杂模式不是值得推荐的做法，因为不同浏览器的混杂模式行为差异非常大，如果不使用某些hack技术，跨浏览器的一致性就无法实现
三、<noscript>元素
当浏览器不支持JS时，使用<noscript>元素显示替代的内容
<noscript>元素可以包含能够出现在<body>中的任何HTML元素－<script>元素除外
包含在<noscript>元素中的内容只有在浏览器不支持脚本或浏览器支持脚本，但脚本被禁用这2种情况下才会显示出来，除此外的其他情况下，浏览器都不会呈现<noscript>中的内容
四、小结
把JavaScript插入到HTML页面中要使用<script>元素，使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript文件，而我们需要注意的地方有：
1、这2种方式都需要把type属性设置为 text/javascript，以表明使用的脚本语言是JavaScript
2、在包含外部JavaScript文件时，必须将src属性设置为指定相应文件的URL，而这个文件即可以是同一服务器上的文件，也可以是其他任何域中的文件
3、所有<script>元素会按照它们在页面中出现的先后顺序依次被解析，只有在解析完前面<script>元素的代码之后，才会开始解析<script>元素中的代码
4、浏览器在呈现后面的页面内容之前，必须先解析前面的<script> 元素中的代码，为此，一般将<script>元素放在页面内容之后和</body>标签之前
5、在IE中，通过defer属性可以让浏览器呈现完文档之后再执行脚本，虽然defer属性是HTML4.01规定的，但只有IE支持该属性
6、<noscript>元素可以指定在不支持脚本或禁用脚本的浏览器中显示的替代内容，但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 第2章 在HTML 中使用JavaScript
- 第2章 两种调用JS的方法——在HTML中使用JavaScript
- JavaScript高级程序设计(第2章 在HTML中使用JavaScript)
- 第2章 在HTML中使用JavaScript
- javaScript 高级程序设计 第2章 在HTML中使用JavaScript
- JavaScript高级程序设计学习笔记——第2章 在HTML中使用JavaScript
- 第2章 在HTML 中使用JavaScript
- JavaScript高级程序设计——第2章 在HTML中使用JavaScript元素
- 【JavaScript高级程序设计】--第2章 在HTML中使用JavaScript
- 第2章：在html中使用JavaScript
- 使用JavaScript（本机或jQuery）平滑滚动HTML书签
- JavaScript高级程序设计第二章在HTML中使用JavaScript
- 使用php转义输出HTML到JavaScript
- javascript介绍及如何在html中使用js与jQuery
- 使用javascript实现html页面直接下载网盘文件
- html_select结合javascript的使用
- HTML文档中使用JavaScript
- html,css,javascript,jquery使用笔记
- HTML中使用javascript解除禁止input输入框代码：
- javascript 高级程序设计（二）-在html中使用javascript