在网页编写JavaScript时，可以通过嵌入式、外链式和行内式

在网页编写JavaScript时，可以通过嵌入式、外链式和行内式这3种方式来引入JavaScript代码，下面针对这3种方式分别进行讲解。

1．嵌入式

嵌入式就是使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，具体实例如下：

<script>

JavaScript语句

</script>

<script type="text/javascript">

JavaScript语句

</script>

上述示例演示了两种书写方式，其中<script>标签的type属性用于告知浏览器脚本的类型，由于HTML5中该属性默认值为"text/javascript"，因此在编写时可以省略。

2．外链式

外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件，具体示例如下：

……

<script src="js/demo.js"></script>

……

js/demo.js文件

……

alert("Hello World");

……

通过示例可以看出，src属性是一个文件路径或URL地址，可以指定为如下形式。

• 相对路径：“js/demo.js”引入当前目录下的js子目录中的demo.js文件；“../js/demo.js”引入上级目录下的js子目录中的demo.js文件。

• 绝对路径：“/js/demo.js”引入网站根目录下的js子目录中的demo.js文件；如果网页在本地，可以通过“file://c:/js/demo.js”引入本地文件

• URL地址：如“http://js.test/demo.js”；若自动使用当前页面协议，可写为“//js.test/demo.js”。

在实际开发中，当需编写大量、逻辑复杂、特有功能的JavaScript代码时，推荐大家使用外链式。相比嵌入式，外链式的优势可以总结为以下3点。

• 嵌入式会导致HTML与JavaScript代码混合在一起，不利于修改和维护。

• 嵌入式会增加HTML文件的体积，影响网页本事的加载速度，而外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入了相同的js文件是，打开第一个页面后，浏览器就会将js文件缓存下来，下次打开其他页面时，就不用重新下载js文件了。

• 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

为了降低JavaScript阻塞问题对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性：async和defer，下面分别介绍其作用。

1. 1)async

async用于异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。

<script src="//js.test/demo.js" async></script>

1. 2)defer

defer用于延后执行，即先下载文件，知道网页加载完成后再执行。

<script src="//js.test/demo.js" defer></script>

添加async或defer属性后，即使文件下载失败，也不会阻塞后面的JavaScript代码执行。

3．行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，单击“test”按钮时，弹出一个警告框提示“Hello World”,具体示例如下。

<a href="javascript:alert('Hello World');">test</a>

JavaScript还可以写在HTML标签的实际属性中，事件是JavaScript中的一种机制。例如，单击网页中的一个按钮时，就会触发按钮的单击事件，具体示例如下。

<input type="button" onclick="alert('Hello World');" value="test">

上述代码实现了单击“test”按钮时，弹出一个警告框提示“Hello World”。

由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。