在网页编写JavaScript时，可以通过嵌入式、外链式和行内式这3种方式来引入JavaScript代码，下面针对这3种方式分别进行讲解。
1．嵌入式
嵌入式就是使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，具体实例如下：
上述示例演示了两种书写方式，其中<script>标签的type属性用于告知浏览器脚本的类型，由于HTML5中该属性默认值为"text/javascript"，因此在编写时可以省略。
2．外链式
外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件，具体示例如下：
通过示例可以看出，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) async
async用于异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。
2) defer
defer用于延后执行，即先下载文件，知道网页加载完成后再执行。
添加async或defer属性后，即使文件下载失败，也不会阻塞后面的JavaScript代码执行。
3．行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。例如，单击“test”按钮时，弹出一个警告框提示“Hello World”,具体示例如下。
JavaScript还可以写在HTML标签的实际属性中，事件是JavaScript中的一种机制。例如，单击网页中的一个按钮时，就会触发按钮的单击事件，具体示例如下。
上述代码实现了单击“test”按钮时，弹出一个警告框提示“Hello World”。
由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。