本章知识点:
- 怎样使用<script>元素
- 嵌入脚本和外部脚本
- 文档模式对Javascript的影响
- 考虑禁用Javascript的场景
2.1 <script>元素
HTML中插入Javascript的主要方式就是script标签。script有下列属性:
- async:表示立即下载该脚本,但不妨碍页面中的其他操作。比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。
- charset:表示通过src属性指定代码的字符编码。
- defer:表示脚本可以延迟到文档完全被解析和显示之后才执行。
- language:用来表示编写代码使用的脚本语言。已废弃
- src:表示包含要执行的代码的外部文件,也就是路径。
- type:表示编写代码使用的脚本语言的内容类型。大多数值为"text/javascript"。默认值也是它。
以下便是在HTML页面中插入一段Javascript代码:
<script type="text/javascript">
function hi(){
alert('hello world')
}
</script>
尽量不要在代码中任何地方出现</script>字符串。程序会认为那是结束的</script>标签。可以通过转义符"/"来解决问题。例如:
<script type="text/javascript">
function hi(){
alert("<\/script>")
}
</script>
如果通过<Script>元素来包含外部js文件。那么src属性就是必须的。这个属性指向外部JS文件的链接。例如:
<script type="text/javascript" src="http://www.baidu.com"></script>
注意:带有src属性的<Script>元素在其中间不能在包含额外的JS代码。否则该额外代码将被忽略只执行外部脚本文件。
如果不存在defer和async属性的话script的执行顺序是从上到下。
2.1.1 标签的位置
现代浏览器一般把script元素放在body元素中页面内容的后面。如下所示:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Document</title>
</head>
<body>
<!--html内容-->
<script type="text/javascript" src="http://www.baidu.com"></script>
</body>
</html>
2.2 嵌入JS代码与外部JS文件的优缺点
可维护性:所有的js文件放在一个文件夹中,维护起来就相对轻松。可以在不触碰html的情况下直接修改js代码。
可缓存:浏览器可以根据具体的设置缓存链接的所有外部js文件。如果两个页面用1个js文件,那该文件只需要下载一次。能加快页面的打开速度。