第二章 在HTML中使用javascript
- 使用<script>元素
- 嵌入脚本与外部脚本
- 文档模式对javascript的影响
- 考虑禁用javascript的场景
在html规范中增加对js脚本的支持
2.1 <script>元素
<script>元素六个属性:async、charset、defer、language、src、type
2.1.1标签的位置(body元素 页面内容之后)
2.1.2延时脚本(弃用)
2.1.3异步脚本 (异步 加载)
2.1.4在XHTML中的用法
2.1.5不推荐使用的语法
早期 不支持js的用法 现在所有浏览器都支持js
<script><!--
//js代码
//--></script>
2.2 嵌入代码与外部文件
外部文件优势:可维护性、可缓存、适应未来
2.3 文档模式
通过文档类型(doctype)切换实现
混杂模式、标准模式、准标准模式。
标准模式
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE html>
准标准模式 过渡性 框架集型
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Framaset//EN"
"http://www.w3.org/TR/html4/framaset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Framaset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-framaset.dtd">
(暂略)
2.4 <noscript>元素
noscript元素只会在浏览器不支持脚本或者浏览器支持脚本,但脚本被禁用 这两种情况才会被启用。其他情况浏览器不会呈现noscript元素中的内容,用户无法看见,尽管他是页面的一部分。
<html>
<head>
<title>Example HTML Page</title>
<script type="type/javascript" defer="defer" src="example1.js"></script>
<script type="type/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
</noscript>
</body>
</html>
2.5 小结
把js插入到html页面中,要使用script元素。使用这个元素可以把js嵌入到html页面中,让脚本与标记混合在一起;也可以包含外部的js文件。而我们需要注意的地方有:
1 在包含外部js文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
Script元素 属性值 =》 绝对地址 相对地址
2 所有script元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下,只有在解析完前面script元素中的代码之后,才会开始解析后面script元素中的代码
不使用defer async
Script代码 执行顺序 =》先后顺序
3 由于浏览器会先解析完不使用defer属性的script元素中的代码,然后再解析后面的内容,所以一般应该把script元素放在页面最后,即主要内容后面,/body标签前面。
4 使用defer的属性可以让脚本在文档完全呈现之后再执行。延时脚本总是按照指定它们的顺序执行。
5 使用async属性也可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中出现的顺序执行。
6 另外,使用 noscript元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示noscript元素中的内容。