javascript高级程序设计学习笔记——第二章 在HTML中使用javascript

一、script元素

使用<script>元素，向HTML页面中插入javascript代码；

<script>元素的属性包括：

async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本文件有效；

charset：可选，表示通过src属性指定的代码的字符集；

defer：可选，表示脚本可以延迟到文档完全被解析和显示之后在执行，只对外部脚本文件有效；

language：已废除；

src：可选，表示包含要执行代码的外部文件；

type：可选，表示编写代码使用的脚本语言的内容类型；

使用<script>元素的方式有两种：直接在页面中嵌入javascript代码和包含外部javascript文件；

<script type="text/javascript"><span style="white-space:pre">	</span>//在页面中嵌入javascript代码
function sayHi(){<span style="white-space:pre">	</span>//在解释器对<script>元素内部代码执行完毕之前，页面中的其他内容(HTML、css)都不会被浏览器加载或显示；
alert("Hi!");
}
</script>

<script type="text/javascript" src="example.js"><span style="white-space:pre">	//加载外部javascript文件；</span>
</script>	<span style="white-space:pre">					</span>//带有src属性的<script>不应该在<script></script>之间加入代码，会被解释器自动忽略；

无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中的出现的先后顺序依次对它们进行解析；

1、标签的位置

按照惯例，所有<script>元素都应该放在页面的<head>元素中，例如：

<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><title></title>
<span style="white-space:pre">		</span><script type="text/javascript" src="example.js"></script>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">	</span></bodfy>
</html>

在文档的<head>元素中包含所有javascript文件，意味着必须等到全部javascript代码都被下载解析和执行完成之后，才能开始呈现页面的内容，导致浏览器在呈现页面的时候出现延迟，页面一片空白；为了避免这种情况发生，现在的web应用程序一般把<script>元素放在<body>元素的最后面，如：

<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><title></title>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><script type="text/javascript" src="example.js"></script>
<span style="white-space:pre">	</span></body>
</html>

2、延迟脚本

HTML4.01为<script>标签定义了defer属性，这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面解析完毕后再运行，如：

<!DOCTYPE html>
<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><title></title>
<span style="white-space:pre">		</span><script type="text/javascript" defer="defer" scr="example.js"></script>
<span style="white-space:pre">		</span><script type="text/javascript" defer="defer" scr="example.js"></script>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">	</span></body>
</html>

3、异步脚本

HTML5为<script>元素定义了async属性，这个属性告诉浏览器立即下载文件；标记为async的脚本并不保证按照指定它们的先后顺序执行；

4、在XHTML中的用法

5、不推荐使用的语法

二、嵌入代码和外部文件

在HTML中嵌入javascript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含javascript代码，优点如下：

可维护性：遍及不同HTML页面的javascript会造成维护问题，但把所有javascript文件都放在一个文件夹中，维护起来方便多；

可缓存：浏览器能够根据具体的设置缓存链接的所有外部javascript文件，也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次；

适应未来：

三、文档模式

四、noscript元素

早起浏览器都面临一个特殊的问题，即当浏览器不支持javascript时如何让页面平滑的退出。对这个问题的最终解决方案就是创造一个<noscript>元素，用以在不支持javascript的浏览器中显示代替的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——script元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

浏览器不支持脚本；

浏览器支持脚本，但脚本被禁用；

符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而除此之外的情况，浏览器不会呈现<noscript>中的内容；

<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">		</span><title></title>
<span style="white-space:pre">		</span><script type="text/javascript" defer="defer" src="example.js"></script>
<span style="white-space:pre">		</span><script type="text/javascript" defer="defer" src="example.js"></script>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><noscript>
<span style="white-space:pre">			</span><p>本页面需要浏览器支持javascript</p>
<span style="white-space:pre">		</span></noscript>
<span style="white-space:pre">	</span></body>
</html>