1.3.4 在网页中嵌入JavaScript代码

CSS有行内样式表、内部样式表和外部样式表3种方式可以添加到HTML页面中。类似地，JavaScript有行内嵌入、内部嵌入和外部引入3种方式添加到HTML页面中。

1．行内嵌入

行内嵌入是指在元素的事件属性中直接添加JavaScript代码。由于结构分离不够彻底，不利于后期维护，复用性不强，因此不推荐使用。

【例1-1】行内嵌入JavaScript

例1-1在Chrome浏览器中的运行结果如图1-13所示。

2．内部嵌入

CSS使用<style></style>标签为HTML文档嵌入内部样式表，JavaScript使用<script></script>标签为HTML文档嵌入JavaScript程序。开发者在HTML文档中插入<script></script>标签，然后在<script></script>标签里面编写JavaScript代码。<script></script>标签可以有任意多个。

【例1-2】内部嵌入JavaScript

例1-2在Chrome浏览器中的运行结果如图1-14所示。

3．外部引入

CSS使用<link>标签链接外部样式表，JavaScript使用<script></script>标签引入外部JavaScript文件。开发者首先新建外部JavaScript文件，然后在HTML文档中使用<script></script>标签引入外部JavaScript文件。

【例1-3】外部引入JavaScript

demo.js文件中的代码如下：

alert('我是外部JavaScript');

src属性代表引入JavaScript文件的路径。外部JavaScript文件具有维护性高、可缓存、方便扩展、复用性高等特点，在项目开发中使用较多。例1-3在Chrome浏览器中的运行结果如图1-15所示。