【第二章】 跟我一起学javascript -- HTML javascript
本章内容
- script元素
- 嵌入脚本和外部脚本
- dtd文档模式对 JavaScript 的影响
- 禁用Javascript时候该怎么办
1、script 元素
如果我们要向html页面中插入javascript,大家都懂的,就是直接在html中写入script标签。然而这个script标签中除了我们经常使用的scr元素(表示外部链接javascript url地址)以外,还有另外5个属性。分别是:
- async [可选] 异步加载,不影响页面中其他操作
- charset [可选] 很少用
- defer [可选] 表示脚本可以延迟到文档完全被解析和显示之后再执行。 IE7 及更早版本对嵌入脚本也支持这个属性
- src [可选] 表示包含要执行代码的外部文件
- type [可选] language 替代品,表示编写代码使用的脚本语言的内容类型 就是MIME,js 直接写成text/javascript
2、嵌入脚本和外部脚本
使用<script>元素的方式有两种:直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript
文件。 建议使用外部引入外部JavaScript文件方式
那么问题来了,多个script脚本执行顺序是怎么样的?
答案是:只要不存在 defer 和 async 属性,浏览器都会按照<script>元素在页面中
出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,第
二个<script>包含的代码才会被解析,然后才是第三个、第四个
2.1、script标签位置放入head或者body大不同
一般很多新手javascripter 都会将javascript标签写入html <head>标签中。
这种做法存在一个问题,就是必须等待head元素中所有的css和javscript 被下载,解析和执行完毕后,才会呈现我们的html页面上的内容,设想假如我们的css,javascript很大,或者在网络带宽有限的情况下,会不会给用户带来不良的使用体验呢?为了避免这个问题,现代 Web 应用程序一般都把全部 JavaScript 引
用放在<body>元素中页面内容的后面,如下例所示:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样,在解析包含的 JavaScript 代码之前,页面的内容将完全
器窗口显示空白页面的时间缩短而感到打开页面的速度加快了
3、dtd文档模式
IE5.5 引入了文档模式的概念,而这个概念是通过使用文档类型( doctype)切换实现的。
如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。但采用混杂模式
不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大,如果不使用某些 hack 技
术,跨浏览器的行为根本就没有一致性可言。
对于标准模式,可以通过使用下面任何一种文档类型来开启:
<!-- 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>
而对于准标准模式,则可以通过使用过渡型( transitional)或框架集型( frameset)文档类型来触发,
如下所示:
<!-- 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 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.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 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
准标准模式是IE提出来的,这种模式不大标准,体现在处理图片间隙的时候,在表格中使用图片时问题最明显
建议使用标准模式
4、禁用Javascript时候该怎么办
采用<noscript>元素可以解决该问题。该元素只有在下列情况才会显示出内容来:
- 浏览器不支持js脚本
- 浏览器支持脚本,但是被用户禁用了
例子:
html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用) JavaScript。
</noscript>
</body>
</html>
该页面中的noscript元素中的内容在启用了javascript脚本支持的浏览器中永远也不会被用户看到。