JavaScript高级程序设计第三版（第二章：在HTML中使用JavaScript）

时间 2019-11-20 标签 javascript 高级程序设计第三第二 html 使用

1、script元素

HTML4.0.1为script元素定义了下列6个属性：javascript

async：可选。表示应该当即下载脚本，但不该妨碍页面中的其余操做，好比下载其余资源或等待加载其余脚本。（只对外部脚本文件有效）。
charset：可选。大多浏览器会忽略它的值，这个属性不多有人用。
defer：可选。表示脚本能够延迟到文档彻底解析和显示以后在执行。只对外部脚本有效。
language：已废弃。
src：可选。表示包含要执行代码的外部文件。
type：可选。这个属性不是必须的，若是没有指定，其值默认是text/javascript。

使用<script>的两种方式：直接在页面中嵌入脚本和包含外部脚本。html

<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

包含在script元素内部的JavaScript代码将被从上到下依次解释。在解释器对<script>元素内部的全部代码求值完毕之前，页面中的其他内容都不会被浏览器加载或显示。（在写嵌入代码时，不要在代码中任何地方出现"</script>"标签）java

引用外部脚本：<script type="text/javascript" src="example.js"></script>。与解析嵌入式JavaScript代码同样，在解析外部JavaScript文件（包括下载该文件）的时候，页面的处理会暂时中止。在引用外部脚本的时候，<script >和</script>标签之间的代码将会被忽略。另外，<script>元素的src属性还能够包含来自外部域的JavaScript文件。不管如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的前后顺序对它们依次进行解析。浏览器

2、标签的位置

放入<head>元素中服务器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	<script type="text/javascript" src="js/example1.js" ></script>
	<script type="text/javascript" src="js/example2.js" ></script>
</head>
<body>
	<!-- 这里放内容 -->
</body> 
</html>

把JavaScript文件放入<head>元素中，意味着必须等到所有JavaScript代码都被下载，解析和执行完成以后，才开始呈现页面内容（浏览器在遇到body标签时才开始呈现内容）。这个问题会致使浏览器在呈现页面时出现明显延迟，致使浏览器窗口一片空白。如今Web程序通常都把JavaScript引用放在<body>元素页面的内容后面。异步

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	
</head>
<body>
	<!-- 这里放内容 -->
<script type="text/javascript" src="js/example1.js" ></script>
<script type="text/javascript" src="js/example2.js" ></script>
</body> 
</html>

3、延迟脚本

HTML4.0.1为<script>标签订义了defer属性（只适用外部脚本）。这个属性是代表脚本在执行的时候不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后在运行（当即下载，延迟执行）。IE四、FireFox3.五、Safari五、Chrome是最先支持defer属性的浏览器。其余浏览器会忽略这个属性，像日常脚本同样处理。async

4、异步脚本

HTML5为<script>标签订义了async属性（只适用外部脚本）。告诉浏览器当即下载文件。标记为async的脚本并不保证它们的前后顺序执行。spa

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	
</head>
<body>
	<!-- 这里放内容 -->
<script type="text/javascript" async src="js/example1.js" ></script>
<script type="text/javascript" async src="js/example2.js" ></script>
</body> 
</html>

以上代码中第二个脚本可能会在第一个脚本以前执行，因此要确保二者互不依赖。指定async属性是为了避免让页面等待两个脚本下载和执行，从而异步加载页面其余内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本必定会在页面的load事件前执行。支持异步脚本的有、FireFox3.六、Safari五、Chrome。code

5、<noscript>元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
</head>
<body>
	<!-- 这里放内容 -->
<noscript>
	本页面须要浏览器支持JavaScript。
</noscript>
</body> 
</html>

6、小结

JavaScript的src属性能够设置为同一个服务器上的文件，也能够是其它任何域中的文件。
全部的<script>元素都会按照他们在页面中出现的前后顺序依次被解析。
使用defer属性可让脚本在文档彻底呈现以后在执行。延迟执行脚本老是按照指定它们的顺序执行。
使用async属性能够表示当前脚本没必要等待其余脚本，也没必要阻塞文档呈现。不能保证异步脚本按照指定它们的顺序执行。