JavaScript 在 HTML 中的应用

1. 概述

Web 页面使用 JavaScript 有 3 种方法，

• 在页面中直接嵌入 JavaScript 代码；
• 链接外部 JavaScript 文件；
• 作为特定标签的属性值使用；

2. 在页面中直接嵌入 JavaScript 代码

HTML 文档中能直接使用 <script> ... </script> 标记将 JavaScript 整个脚本嵌入到其中，在 HTML 文档中可以使用多个<script> ... </script> 标记，每个<script> ... </script>标记中能包含多个 JavaScript 的代码集合，且各个 <script> ... </script>代码之间能相互访问，如同将所有代码放在一对<script> ... </script>标签中的效果；

2.1 language 属性

language 属性指定在 HTML 中使用的脚本语言及其版本；
language 属性语法格式如下所示：

<script language="javaScritp">

2.2 src 属性

src 属性用来指定外部脚本文件的路径，外部脚本文件通常使用 JavaScript 脚本，其扩展名为== .js；
src 属性语法格式如下所示：

<script src="a.js">

2.3 type 属性

type 属性用来指定 HTML 中使用的脚本及其版本，此属性在 HTML 4.0 标准开始，推荐使用 type 属性代替 language 属性；
type 属性语法格式如下所示：

<script type="text/javascript">

2.4 defer 属性

defer 属性的作用是文档完毕在执行脚本，当脚本语言不需要立即运行时，设置 defer 属性后，浏览器将不必等待脚本语言装载，这样页面会加载会更快；
但当有一些脚本需要在页面中加载过程中或加载完成后立即执行时，就不需要使用 defer 属性；
defer 属性使用格式如下所示：

<script defer>

3. 链接外部 JavaScript 文件

web 页面中能引入 JavaScript 的一种方式是链接外部 JavaScript 文件的形式；
若脚本代码比较复杂或是同一段代码能被多个页面所使用，则能将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为 .js），在需要该代码的 web 页面中链接 JavaScript 文件；
web 页面链接外部 JavaScript 文件的语法格式如下所示：

<script type="text/javascript" src="javascript.js"></scritp>

注意：

1. 若外部 JavaScript 文件报存在本机中，src 属性能是绝对路径或相对路径；若外部 JavaScript 文件报存在其他服务器中，src 属性需要指定绝对路径；
2. 在外部 JS 文件中，不能将脚本代码用 <script>和</script>标记括起来；
3. 在使用 src 属性引用外部 JavaScript 文件时，<script> </script>标签中不能包含其他 JavaScript 代码；
4. 在 <script> 标签中使用 src 属性引用外部 JavaScript 文件时， </script>结束标签不能省略；

3. 作为标签的属性值使用

3.1 通过 “JavaScript:” 调用

在 HTML 中，能通过== “JavaScript:”==的方式来调用 JavaScript 的函数或方法；
示例如下：

<a href="javascript:alert('您单击了这个超链接')点击这里</a>

上述例子中==“JavaScript:”== 能调用 alter() 方法，但该方法不是在浏览器解析到 ==“JavaScript:”==时就立即执行，而是在单击该超链接时才会执行；

3.2 与事件结合使用

JavaScript 直接很多事件，事件能影响用户的操作，如 单击鼠标左键、鼠标悬停等；
与事件结合，能能调用执行 JavaScript 的方法或函数；
示例如下：

<input type="button" value="单击按钮" onclick="alert('您单击了这个按钮')"> 

上述代码中，onclick 是单击事件，即当单击对象时就会触发 JavaScript 的方法或函数；