JavaScript前端开发与实例教程（微课视频版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3.3　在网页中嵌入JavaScript代码

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

1. 行内嵌入

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

【例1-1】行内嵌入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-1 行内嵌入JavaScript</title>;
</head>
<body>
   <button onclick="alert('我是行内JavaScript!')">点我</button>
</body>
</html>

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

图1-8　【例1-1】运行结果

2. 内部嵌入

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

【例1-2】内部嵌入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-2 内部嵌入JavaScript</title>
</head>
<body>
  <script>
   alert('我是内部嵌入JavaScript');
  </script>
</body>
</html>

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

图1-9　【例1-2】运行结果

3. 外部引入

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

【例1-3】外部引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>例1-3 外部引入JavaScript</title>
   <script src="js/demo.js"></script>
</head>
<body>
</body>
</html>

demo.js文件代码，如下所示：

alert('我是外部JavaScript');

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

图1-10　【例1-3】运行结果

本周热推：
微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）测试架构师修炼之道：从测试工程师到测试架构师（第2版）数字图像处理与机器视觉：Visual C++与Matlab实现（第2版）Python爬虫、数据分析与可视化：工具详解与案例实战智能搜索和推荐系统：原理、算法与应用
上一章目录下一章