第十九章 添加 JavaScript
前言
HTML 定义网页的内容，CSS 定义网页的表现，JavaScript 则定义特殊的行为。建立网站不可能脱离 HTML（如果要让网站看起来很吸引人，则离不开 CSS），但 JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由 HTML 和 CSS 构建的核心体验的基础上进行增强。
通过编写简单的 JavaScript 程序，可以显示和隐藏内容；通过编写复杂一些的程序，可以加载数据并动态地更新页面。可以操作定制的 HTML5 audio 和 video 元素控件，使用HTML5 的canvas 元素创建游戏。可以利用地理定位，根据访问者所在的位置定制其体验；可以让访问者通过将文件拖放到浏览器窗口进行上传。可以利用JavaScript和一些强大的HTML5特性及相关技术构建成熟的Web应用程序。
19.1加载外部脚本
脚本主要有两种类型，一种是从外部文件（使用纯文本格式）加载的脚本，另一种是嵌入在页面中的脚本（这一种将在下一节讲解）。这同外部样式表和嵌入样式表的概念是类似的。
无论是加载外部脚本还是嵌入脚本，均使用 script（脚本）元素。
加载外部脚本的方法
输入<script src="script.js"></script>，这里的script.js 是外部脚本在服务器上的位
置及文件名。应该尽可能地将脚本元素放在</body> 结束标签之前，而不是放在文档的 head 元素里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Loading an External Script</title>
<link rel="stylesheet"
➝ href="css/global.css" />
</head>
<body>
... 所有的HTML内容写在这里 ...
<script src="behavior.js"></script>
</body>
</html>
script 元 素 的 src 属 性 引 用 脚 本 的URL。在大多数情况下，最好在页面的最末尾加载脚本，即
</body>结束标签的前面。也可以在页面的 head 元素中加载脚本，但这样做会影响页面显示的速率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Loading an External Script</title>
<!-- 在加载任何JS文件之前加载样式表 -->
<link rel="stylesheet" href="css/
➝ global.css" />
<script src="behavior.js"></script>
</head>
<body>
... 所有的HTML内容写在这里 ...
</body>
</html>
在这个例子中，脚本是在head中加载的。它位于 link 元素的后面，因此不会影响 CSS 文件先于脚本开始加载。关于为什么要尽可能地避免在head 中加载脚本。
19.2添加嵌入脚本
嵌入脚本位于 HTML 文档之内，同嵌入样式表很相似。嵌入的脚本包含在 script 元素内。嵌入脚本并不是首选的方法，但有时必须这样做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Adding an Embedded Script</title>
<link rel="stylesheet"
➝ href="css/global.css" />
</head>
<body>
... 所有HTML内容写在这里 ...
<script>
/*
JavaScript 代码写在这里
*/
</script>
</body>
</html>
嵌入脚本没有 src 属性。相反，代码位于页面之内。如果要嵌入脚本，应该尽可能地在
</body>结束标签之前这样做。虽然也可以在head中嵌入脚本，但通常出于性能原因而避免这样做
添加嵌入脚本的步骤
(1) 在 HTML 文档中，输入 <script>。
(2) 输入脚本的内容。
(3) 输入 </script>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Loading an External Script</title>
<!-- 在加载任何JS文件之前加载样式表 -->
<link rel="stylesheet"
➝ href="global.css" />
<script>
/*
JavaScript代码写在这里
*/
</script>
</head>
<body>
... 所有的HTML内容写在这里 ...
</body>
</html>
在这个例子中，嵌入脚本位于 head 中。它位于 link 元素的后面，从而让 CSS 文件更快地加载。关于为什么要尽可能地避免在 head中嵌入脚本。