【第二章】跟我一起学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脚本支持的浏览器中永远也不会被用户看到。