JavaScript高级程序设计:在HTML中使用JavaScript
1.<script>元素
在HTML插入JavaScript代码的主要方法就是使用<script>元素。
1)<script>元素定义了下列6种属性:
- async:表示应该立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本有效
- charset:表示通过src属性指定的代码的字符集
- defer:表示脚本可延迟到文档全部被解析和显示之后再执行。只对外部脚本有效
- language:已废弃
- src:表示包含要执行代码的外部文件
- type:表示代码使用的脚本语言的内容类型。目前type属性的值依旧还是text/javascript。
2)两种使用<script>元素的方式
①可用<script>元素嵌入JavaScript代码,只需为<script>指定type类型。包含在<script>元素内部的JavaScript代码将被从上至下依次解释。
②通过<script>元素包含外部JavaScript文件,src属性必需的。这个属性的值是一个指向外部JavaScript文件的链接。带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码。<script>元素的src属性可以包含外部域的JavaScript文件。但是这个文件最好是安全可靠的JavaScript文件。
3)标签的位置
①<script>元素可放在页面的<head>中。
但是,这样做意味着所有的JavaScript文件必须等到全部JavaScript代码下载、解析和执行完成之后,才能开始呈现页面的内容。
②于是,现代Web应用程序一般将quanbuJavaScript引用放在<body>元素页面内容的后面。
4)延迟脚本
defer属性:表明脚本在执行时不会影响页面的构造。就是脚本会被延迟到整个页面被解析完毕后再运行。因此设置defer属性相当于告诉浏览器立即下载,但延迟执行。且只适用于外部脚本文件。
在现实中,延迟脚本不一定会按顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
同时,把defer属性放在页面底部仍然是最佳选择。
5)异步脚本
async属性:用于改变脚本,只适用于外部脚本,并告诉浏览立即下载文件。但与defer属性不同的是,标记为async的脚本并不按照指定它们的先后顺序执行。
建议异步脚本不要在加载时期修改DOM。异步脚本一定会在页面的load事件前执行,但可能在DOMContentLoaded事件触发之前或之后执行。
6)在XHTML中的用法
<在XHTML中被当做开始一个新标签来解析。
解决这个语法错误的方法有两种:
①用相应的HTML实体(<)替换代码中所有的小于号
②用一个CData片段来包含JavaScript代码。在XHTML中,CData片段是一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。引入CData片段后的JavaScript代码如下:
[code]<script type="text/javascript"><![CDATA[ function compare(a,b){ if(a<b){ alert("A is less than B"); }else if(a>b){ alert("A is greater than A"); }else{ alert("A is equal to B"); } } ]]> </script>
如果浏览器不兼容XHTML,因而不支持CData片段,怎么办?再使用JavaScript注释将CData片段注释掉就可以了。
[code]<script type="text/javascript"> //<![CDATA[ function compare(a,b){ if(a<b){ alert("A is less than B"); }else if(a>b){ alert("A is greater than A"); }else{ alert("A is equal to B"); } } //]]> </script>
2.嵌入代码与外部文件
一般认为的最好做法就是 尽可能使用外部文件来 包含JavaScript代码。
3.文档模式
IE5.5引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。
最初的两种文档模式是:混杂模式和标准模式。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。
在此之后,IE又提出了一种所谓的准标准模式。这种模式下的浏览器特性很多都是符合标准的,但也不尽然。不标准的地方主要体现在处理图片间隙的时候。
如果文档开始没有发现文档类型声明,则所有浏览器都默认开启混杂模式。
①标准模式
[code] <!-- HTML4.01严格型 --> <!DOCTYPE HTML PUBLIC "-//WEC//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- XHTML 1.0 严格型 --> <!DOCTYPE HTML PUBLIC "-//WEC//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> <!-- HTML5 --> <!DOCTYPE html>
②准标准模式:可使用过渡型或框架集型来触发。准标准模式与标准模式非常接近,它们的差异几乎可以忽略不计。
[code]<!-- HTML 4.01 过渡型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.did"> <!-- HTML 4.01 框架集型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.did"> <!-- XHTML 1.0 过渡型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.did"> <!-- XHTML 1.0 框架集型 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-frameset.did">
4.<noscript>元素
当浏览器不支持JavaScript时如何使页面平稳地退化。
这个问题的最终解决方案就是创造一个<script>元素,用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可出现在<body>中的任何HTML元素——<script>元素除外。
包含在<noscript>元素中的内容只有在:浏览器不支持脚本或 浏览器支持脚本,但脚本被禁用的情况下才会被显示出来。
阅读更多- avaScript高级程序设计之在 HTML 中使用 JavaScript 第2.1讲笔记
- 2. javacript高级程序设计-在HTML中使用JavaScript
- JavaScript高级程序设计笔记(2)_在HTML中使用js
- JavaScript高级程序设计(二):在HTML中使用JavaScript
- avaScript高级程序设计之在 HTML 中使用 JavaScript 第2.2讲笔记
- JavaScript高级程序设计——第2章 在HTML中使用JavaScript元素
- 在HTML中使用JavaScript(总结自JavaScript高级程序设计)
- 【JavaScript高级程序设计】--第2章 在HTML中使用JavaScript
- JavaScript高级程序设计(第2章 在HTML中使用JavaScript)
- JavaScript高级程序设计 第二章 在HTML中使用javascript
- JavaScript高级程序设计第二章在HTML中使用JavaScript
- JavaScript高级程序设计-(1)html中使用JavaScript
- JS高级程序设计第三版——在HTML中使用JavaScript
- JavaScript高级程序设计学习笔记一在HTML中使用JS
- JavaScript高级程序设计第三版(第二章:在HTML中使用JavaScript)
- 《avascript 高级程序设计(第三版)》 ---第二章 在HTML中使用Javascript
- Javascript高级程序设计——在HTML中使用Javascript
- javascript 高级程序设计(二)-在html中使用javascript
- JavaScript高级程序设计:在HTML中使用JavaScript
- JavaScript高级程序设计 第二章 --- 在HTML中使用JavaScript