在HTML中使用JavaScript
0.3.1 <script>元素
向 HTML 页面中插入 JavaScript 的主要方法,就是使用 <script>元素(NetScape创造的)。共有两种方式:直接在页面中嵌入 JavaScript 代码 和 包含外部 JavaScript 文件。
//直接的方式
<script type="text/javascript">
alert("hello world!");
</script>
//引入外部文件
<script type="text/javascript" src="js/index.js"></script>
PS1:
- 使用 引入外部文件的方式 时 <script> 标签之间不应该再包含额外的代码,即使包含也会被忽略。
- 在 HTML 文档中可以多次使用 <script> ,浏览器会从上到下依次解析。
0.3.2 标签的位置
按照传统的做法,我们应该将 <script> 放在 head 元素中,和引入 CSS 文件放在一起。可是,这意味着全部的 JavaScript 代码都被下载、解析并执行完成后,浏览器才会开始呈现页面,而这段时间浏览器会是一片空白。为避免这个问题,把 <script> 放在页面底部依然是最好的选择。
<!DOCTYPE html>
<html>
<head>
<title>document</title>
</head>
<body>
<p>hello world!</p>
</body>
<script type="text/javascript"></script>
</html>
小知识:
- 延迟脚本:<script> 元素还有一个 defer 属性,使用这个属性后脚本会在页面全部解析完成后再运行。即 立即下载,延迟执行。
`js
- 异步脚本:<script> 元素定义了 **async** 属性。使用这个属性告诉浏览器不必按顺序执行脚本(只适用于外部脚本)。也就是说 1.js 和 2.js 都会立即被下载,但 2.js 可能会在 1.js 之前执行
``` js
<script type="text/javascript" async src="1.js"></script>
<script type="text/javascript" async src="2.js"></script>