在 HTML 中嵌入 JavaScript
在 HTML 文档里嵌入客户端 JavaScript 代码有四种方法：
- 内联，放置在
<script>和</script>标签之间 - 放置在由
<script>标签的src属性指定的外部文件中 - 放置在 HTML 事件处理程序中，该事件处理程序由
onclick或onmouseover这样的 HTML 属性值指定 - 放在一个 URL 里，这个 URL 使用特殊的
javascript:协议
其中后两种方法在现代 JavaScript 代码里已经很少用了，内联脚本现在也用的少了，有个编程哲学叫「Unobtrusive JavaScript」，主张内容（HTML）和行为（JavaScript）尽量分离，根据这个哲学，JavaScript 最好通过上述第二种方式嵌入。尽管如此，作为学习，我们还是将所有嵌入方式都介绍一下。
script 元素
JavaScript 代码可以以内联的形式出现在 HTML 文件里的 <script> 和 </script> 标签之间：
<script>
// 这里是你的JavaScript代码
</script>
如果是在 XML 中，需要将 JavaScript 代码放到 CDATA 里面：
<script><![CDATA[
// 这里是你的JavaScript代码
]]></script>
下面是一个简单的示例，演示 JavaScript 和 CSS 如何嵌入 HTML 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字时钟</title>
<script>
// 定义一个用于显示时间的函数，每隔1s执行一次
function displayTime() {
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();
setTimeout(displayTime, 1000);
}
window.onload = displayTime;
</script>
<style>
#clock {
font: bold 24pt sans;
background: #ddf;
padding: 10px;
border: solid black 2px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>数字时钟</h1>
<span id="clock"></span>
</body>
</html>
在浏览器中访问该 HTML 页面显示如下：
外部文件中的脚本
<script> 标签还支持 src 属性，这个属性指定包含 JavaScript 代码文件的 URL。其用法如下：
<script src="../../scripts/util.js"></script>
具有 src 属性的 <script> 标签的行为就像指定的 JavaScript 文件的内容直接出现在标签 <script> 和 </script> 之间一样。需要注意的是指定 src 属性的 <script> 标签之间没有 JavaScript 代码，结束的 </script> 标签也不能省略。
以下是 src 属性方式嵌入 JavaScript 的一些优点：
- 可以把大块 JavaScript 代码从 HTML 文件中移除，从而简化 HTML 文件
- 可以在多个 Web 页面共用相同的 JavaScript 代码，提高代码的复用性
- 如果一个 JavaScript 代码文件被多个页面共享，就只需加载一次，提高页面的响应速度
- 引入的 JavaScript 文件不限于应用所在服务器或域名，比如很多互联网广告依赖这种方式引入
- 从其他网站载入脚本的能力，可以让我们更好地利用缓存，比如很多公共类库可以通过CDN加载
HTML 中的事件处理程序
可以通过将 JavaScript 代码放置在 HTML 属性里来定义事件处理程序，这些属性都以「on」开头，并且跟上事件名。比如，要定义用户切换表单中的复选框时调用的事件处理程序，可以为复选框的 HTML 元素属性指定处理程序代码：
<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">
HTML中定义的事件处理程序属性可以包含任意多条 JavaScript 语句，相互之间用逗号分隔，但是这种将 JavaScript 和 HTML 混合在一起的处理方式不是一个好的编程习惯，应该尽量避免。
URL 中的 JavaScript
在 URL 前面跟一个 javascript: 协议限定符，是另一种嵌入 JavaScript 代码到客户端的方式。这种特殊的协议类型指定 URL 内容为任意字符串，这个字符串是会被 JavaScript 解释器运行的 JavaScript 代码。javascript:URL 能识别的「资源」是转换成字符串的执行代码的返回值，如果代码返回 undefined，那么这个资源是没有内容的。
javascript:URL 可以用在任意使用常规 URL 的地方，比如 <a> 标签的 href 属性，<form> 标签的 action 属性，甚至 window.open() 方法的参数：
<a href="javascript:new Date().toLocaleTimeString();">
现在是什么时间了？
</a>
部分浏览器（Firefox、Chrome）会执行 URL 里面的代码，并使用返回的字符串作为待显示新文档的内容。但是有些浏览器（如Safari）则不支持这种语法，但是类似这样的 URL 还是支持的：
<a href="javascript:alert(new Date().toLocaleTimeString());">
现在是什么时间了？
</a>
上面两种方式第一种会使用返回值覆盖当前文档，第二种不会，如果要确保不覆盖当前文档，可以用 void 操作符强制函数调用或给表达式赋予 undefined 值：
<a href="javascript:void window.open('about:blank');">打开一个窗口</a>
和 HTML 事件处理程序的属性一样，javascript:URL 是 Web 早期的遗物，通常都应该避免在现代 HTML 中使用。
但 javascript:URL 除了在 HTML 文档之外还有着重要作用：如果要测试一小段 JavaScript 代码，可以在浏览器地址栏直接输入 javascript:URL 来测试；此外，还可以用于浏览器书签，在 Web 浏览器中，「书签」就是一个保存起来的 URL。如果书签是 javascript:URL 那么保存的就是一小段脚本，叫做 bookmarklet，bookmarklet 是一个小型程序，很容易就可以从浏览器的菜单或工具栏里启动，bookmarklet 里的代码执行起来就像页面上的脚本一样，可以查询和设置文档的内容、呈现和行为，只要书签不返回值，就可以操作当前显示的任何文档，而不把文档替换成新内容。
No Comments