1. script元素
向HTML中插入JavaScript的主要方法，就是使用script标签
HTML 4.01为script标签定义了6个属性
- async：可选，表示异步，立即下载脚本，但是不妨碍页面中其它操作。只对外部脚本文件有效
- charset：可选，表示通过src属性指定的代码的字符集。大多数浏览器会忽略他的值
- defer：可选， 表示脚本可以延迟到文档完全被解析之后再执行，只对外部文件有效
- language：已废弃，原用来表示编写代码所使用的脚本语言
- src：可选，表示要执行的代码外部文件
- type：可选，可以看成是language的代替属性，表示编写代码使用的脚本语言的内容类型。默认为 text/javascript
使用script标签的方式：直接在页面中嵌入JavaScript代码和包含外部文件
在使用script标签嵌入JavaScript代码时，需要为该标签指定type属性，然后将JavaScript代码放入即可
<script>
function sayHi(){
alert("Hi~")
}
<script>
注意：
-
如果要使用外部JavaScript文件，则script标签的src属性就是必须的，这个属性的值就是一个指向外部JavaScript文件的链接
<script type="text/javascript" src="example.js"></script> -
在使用嵌入式JavaScript代码时，切忌不要在任何地方出现“script”字符串，因为浏览器会将其解析为结束标签
eg：错误的写法(会报错)
<script>
function sayScript(){
alert("</script>");
}
</script>
eg：正确的写法（通过转义字符转义）
<script>
function sayScript(){
alert("<\/script>");
}
</script>
- 包含在script标签中的代码，将会被从上到下依次解释
2. 标签的位置
按照传统的做法，所有的script标签都要放在页面的head标签中。
这种做法意味着页面要等全部的JavaScript代码都被下载和执行完成以后，才开始呈现页面的内容。这无疑会导致页面页面在加载的时候出现延迟。影响用户体验。为避免这个问题，现代的web应用程序一般把全部的JavaScript放在<body>标签的最后面
<!DOCTYPE>
<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>
3.延迟和异步加载
defer属性：脚本会被延迟到整个页面都解析完成之后再运行，因此，在script标签中设置该属性，等于告诉浏览器，立即下载，延迟执行
async：只适用于外部脚本文件，并告诉浏览器立即下载文件，但是并不保证按照指定它们的先后顺序执行
4.嵌入代码与外部代码的区别
一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码
外部文件含有如下优点：
- 可维护性强
- 可缓存：如果有两个文件使用同一个JavaScript文件，那么该JavaScript文件只会被加载一次，可以加快页面加载速度
- 适应未来
5.noscript元素
包含noscript的元素只有在以下情况下才会显示出来
- 浏览器不支持脚本
- 浏览器支持脚本，但是脚本被禁用
只有符合以上条件，noscript标签中的内容才会显示出来
<!DOCTYPE>
<html>
<head>
<title>Example Html page</title>
<script type="text/javascript" src="example1.js" ></script>
<script type="text/javascript" src="example2.js" ></script>
</head>
<body>
<noscript>
<p>
本页面需要浏览器支持（启用）JavaScript
</p>
</noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户展示一条信息。而在启用了脚本的浏览器中，用户永远也不会看到它，即使它是页面的一部分
6. 小结
- 包含外部的JavaScript文件的时候，
script标签必须使用src属性指定外部文件链接 - 在不使用异步和延迟加载（async，defer）的情况下，所有script标签中的元素都会按照他们在文件中出现的顺序依次依次加载，只有解析完前面的
script标签之后，才会解析后面的 - defer属性可以让脚本在文档完全呈现之后再去执行，延迟脚本总是按照他们的顺序执行
- async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现，但是不能保证异步脚本按照他们原来的顺序
-
noscript标签可以指定在不支持脚本的浏览器中显示替代的内容，但是在启用了脚本的浏览器中，浏览器不会显示该标签中的任何内容
网友评论