项目二
制作“水果促销”页面
55
目录
56
任务 1 制作“新品水果资讯”模块
任务 2 制作“新品推荐”模块
任务 3 制作“价格计算”功能模块
任务 4 测试与提交“水果促销”页面
制作“新品水果资讯”模块
任务 1
57
项目二 制作“水果促销”页面
1. 了解 DOM 树结构。
2. 了解 DOM 中文档、元素和节点的关系。
3. 了解事件的概念。
4. 掌握常见的鼠标事件。
5. 能根据不同的开发场景选择合适的方法获取元素。
6. 能为页面中的元素注册事件。
7. 能修改 DOM 元素的样式。
58
项目二 制作“水果促销”页面
本任务的主要内容是获取“新品水果资讯”模块中的“字号 +”“字号 -”
按钮元素和资讯段落文字元素，并在两个按钮元素的单击事件中实现对资讯段
落文字元素的字号增大（最大字号为 20 px）和减小（最小字号为 12 px）功能，
方便用户将字号调整至符合自己阅读习惯的大小。增大字号和减小字号的显示
效果如图所示。
59
项目二 制作“水果促销”页面
60
增大字号的显示效果 减小字号的显示效果
项目二 制作“水果促销”页面
一、文档对象模型（DOM）
使用 JavaScript 获取网页中的元素时，需要使用 DOM。DOM 是 HTML
的标准编程接口，通过 DOM 可以获取和改变网页的内容、结构和样式。
61
项目二 制作“水果促销”页面
1. DOM 树结构
DOM 以树结构表达 HTML 文档，HTML 文档与 DOM 文档的对应关系如
图所示。
62
HTML 文档与 DOM 文档的对应关系
项目二 制作“水果促销”页面
2. DOM 节点
HTML 文档中的所有内容都是节点。节点有很多种，整个 HTML 文档是
一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，
HTML 属性是属性节点，注释是注释节点。
63
节点类型示意图
项目二 制作“水果促销”页面
3. 获取元素的方法
DOM 提供了多种获取元素的方法，以下示例代码中布局了 6 个按钮元素。
64
项目二 制作“水果促销”页面
获取按钮元素的方式如下。
（1）使用标签名获取 1 号按钮
getElementsByTagName( ) 方法可获取所有的相同标签的元素（如 button
标签），返回的结果为该标签元素的集合（如所有按钮的集合），随后可通过
编号获取集合中的指定元素（编号从 0 开始），示例代码如下。
（2）使用 id 属性获取 2 号按钮
getElementById( ) 方法可获取指定 id 的元素。由于在布局时为 2 号按钮定
义了 id 为btnId2，所以可以使用此方法获取该按钮，示例代码如下。
65
项目二 制作“水果促销”页面
（3）使用元素类名获取 3 号和 4 号按钮
getElementsByClassName( ) 方法可获取所有的指定类名的元素（如 btnBig
类），返回的结果为该类元素的集合（此处为 3 号按钮、4 号按钮的集合），
随后可使用编号 0 和 1 分别获取这两个按钮，示例代码如下。
66
项目二 制作“水果促销”页面
（4）使用查询选择器获取 5 号和 6 号按钮
querySelector( ) 方法可根据条件查找元素，并返回第一个满足条件的元素。
使用条件 #btnId5并根据 id 获取 5 号按钮，使用条件 .btnClass6 并根据类名获取
6 号按钮，示例代码如下。
67
项目二 制作“水果促销”页面
二、事件
1. 事件的概念
事件是指可以被 JavaScript 侦测到的行为，是一种“触发—响应”机制，
包括加载页面、单击或双击鼠标、移动鼠标指针等具体的动作，它对实现页面
的交互效果起着非常重要的作用。
68
项目二 制作“水果促销”页面
事件的三要素包括事件源、事件类型和事件处理程序。
（1）事件源：指触发事件的元素。
（2）事件类型：指事件的触发方式（如鼠标单击或键盘输入）。
（3）事件处理程序：指事件触发后要执行的代码（函数形式）。
以上三要素可以被简单理解为“谁触发了事件”“触发了什么事件”“触
发了事件后要做什么”。
69
项目二 制作“水果促销”页面
2. 常见的鼠标事件
JavaScript 常见的鼠标事件见下表。
70
JavaScript 常见的鼠标事件
项目二 制作“水果促销”页面
3. 注册事件的方法
假设在布局中有一个 id 为 testButton 的按钮元素，布局示例代码如下。
使用 JavaScript 获取该按钮并将其保存在变量 btnTest 中，示例代码如下。
71
项目二 制作“水果促销”页面
为 DOM 元素注册事件有以下三种常用方法。
（1）直接在布局 HTML 代码中注册事件
以下示例代码实现了为 div 节点注册鼠标单击事件，当用鼠标左键单击该
div 节点时，会执行“alert('Hello World!')”代码，在页面中弹窗显示“Hello
World!”。
72
项目二 制作“水果促销”页面
（2）使用 DOM 属性注册事件
以下示例代码实现了使用 onclick 属性注册鼠标单击事件（同理可注册上
表 中列举的其他鼠标事件）。
若要移除 btnTest 的鼠标单击事件，则可将 btnTest 的事件赋值为 null，示
例代码如下。
73
项目二 制作“水果促销”页面
（3）使用事件监听器注册事件
addEventListener( ) 方法可为元素添加指定的事件监听器。在以下示例代
码中，第 1 行代码为 btnTest 元素注册了 click 事件，即鼠标单击时将调用
function1 函数；第 2 行代码为btnTest 元素注册了 mousemove 事件，即鼠标移
动时将调用 function2 函数。
可使用 removeEventListener( ) 方法移除指定的事件监听器，若要移除
btnTest 的鼠标单击事件监听器，则示例代码如下。
74
制作“新品推荐”模块
任务 2
75
项目二 制作“水果促销”页面
1. 能根据开发需求正确使用 for 循环语句。
2. 能创建并使用数组。
3. 能使用 for 循环语句实现数组的遍历。
4. 能根据不同的开发场景选择合适的方法操作 DOM 元
素内容。
76
项目二 制作“水果促销”页面
本任务的主要内容是定义一个包含推荐水果图片的数组（即推荐水果图
片数组），在获取“新品推荐”图片布局容器后，遍历该数组并在布局容器
中动态显示数组中的所有图片，最终形成的“新品推荐”模块的显示效果如
图所示。
77
“新品推荐”模块的显示效果
项目二 制作“水果促销”页面
一、数组
JavaScript 的数组用于存储一系列的值。本任务要求保存和读取一系列的
推荐水果图片数据，因此可使用 JavaScript 数组来提高代码开发与执行的效率。
78
项目二 制作“水果促销”页面
1. 数组的创建
在 JavaScript 中可使用以下三种方式创建数组。
（1）常规方式
此方式在定义一个数组变量后，通过数组下标（即 [0]～[n]）为数组设置
每个位置的元素，示例代码如下。
79
项目二 制作“水果促销”页面
（2）简洁方式
此方式作为常规方式的简洁写法，在定义变量的同时，可直接设置数组元
素，示例代码如下。
（3）字面量方式
在 JavaScript 语法中，中括号“[]”表示一个数组，可直接使用中括号设
置 testArray 变量的值，程序会自动将该变量识别为数组，示例代码如下。
80
项目二 制作“水果促销”页面
2. 数组的访问
在程序中，通常使用数组下标 [n] 来访问数组中的元素（n 的值从 0 开始）
。若需要获取testArray 数组的第一个元素并将其保存在变量 firstItem 中，则示
例代码如下。
3. 数组的长度
数组的 length 属性可以返回数组的长度，即一个数组中储存的元素个数。
若需要获取testArray 数组的长度并将其保存在变量 getLength 中，则示例代码
如下。
81
项目二 制作“水果促销”页面
二、for 循环语句
在 JavaScript 中可定义各种循环结构，其中，for 循环是最为常见且重要
的一种，它可按照设定的规则自动重复执行指定的代码。for 循环主要包括三个
部分，分别为变量初始值、条件和变量更新方式。首先，在 for 循环中设定一
个初始值作为起点；然后，定义一个判断条件来确定何时结束循环；最后，指
定一个循环操作的任务。在循环执行过程中，程序会循环检查判断条件，当条
件满足时执行循环体内的操作；每次循环完成后，程序会自动更新初始值并再
次检查判断条件，以此循环往复，直到满足终止条件时终止循环。
82
项目二 制作“水果促销”页面
三、DOM 元素内容
获取推荐水果图片数组中的所有图片信息后，可使用 JavaScript 生成图片
显示的代码，然后动态修改“新品推荐”图片布局容器的内容。HTML 提供以
下三个可用于修改 DOM 元素内容的属性。
1. innerHTML 属性
本属性用于设置或获取元素开始标签和结束标签之间的 HTML 内容，返
回结果包含HTML 标签，并保留空格和换行。
83
项目二 制作“水果促销”页面
2. innerText 属性
本属性用于设置或获取元素的文本内容，获取时会去除 HTML 标签和多
余的空格、换行，在设置时会进行特殊字符转义。
3. textContent 属性
本属性用于设置或获取元素的文本内容，并保留空格和换行。
84
制作“价格计算”功能模块
任务 3
85
项目二 制作“水果促销”页面
1. 能根据项目需求正确使用 switch 语句。
2. 能根据项目需求定义函数并完成函数的调用与参数传
递。
3. 能根据属性获取 DOM 元素。
86
项目二 制作“水果促销”页面
本任务主要内容是获取“+”“-”“立即购买”等按钮元素，并为各按钮
注册鼠标单击事件，使单击“+”或“-”按钮时可增加或减少水果数量，并自
动计算总价，显示效果如图所示。
87
增减水果数量并计算总价的显示效果
a）水果数量为 0 b）水果数量为 1 c）水果数量为 7
项目二 制作“水果促销”页面
当用户单击“立即购买”按钮时，使用 switch 语句遍历会员等级单选框，
并调用自定义函数弹出窗口来显示折扣的信息。若用户为非会员，则单击“立
即购买”按钮的弹窗显示效果如图所示。
88
非会员用户单击“立即购买”按钮的弹窗显示效果
a）“立即购买”按钮 b）弹窗显示效果
项目二 制作“水果促销”页面
若用户为会员（VIP），则单击“立即购买”按钮的弹窗显示效果如图所
示。
89
会员用户单击“立即购买”按钮的弹窗显示效果
a）“立即购买”按钮 b）弹窗显示效果
项目二 制作“水果促销”页面
若用户为超级会员（SVIP），则单击“立即购买”按钮的弹窗显示效果
如图所示。
90
超级会员用户单击“立即购买”按钮的弹窗显示效果
a）“立即购买”按钮 b）弹窗显示效果
项目二 制作“水果促销”页面
一、switch 语句
在“价格计算”功能模块中，当用户单击“立即购买”按钮时，程序需要
判断该用户选择的会员类型（包括“否”“VIP”“SVIP”），并根据不同的
会员类型计算对应的优惠价格，此时可以使用 switch 语句来实现该功能。
91
项目二 制作“水果促销”页面
92
switch 语句可基于不同的条件来执行不同的动作，一般适用于有多个条件
和选择的情况，switch 语句的语法格式如下。
项目二 制作“水果促销”页面
93
switch 语句的执行流程如下。
（1）将表达式的值依次与各个 case 值进
行比较，若匹配，则执行该 case 对应的代码块，
在执行的过程中，遇到 break 语句结束。
（2）若表达式的值与所有 case 值都不匹
配，则执行 default 对应的代码块。
switch 语句的执行流程如图所示。
switch 语句的执行流程
项目二 制作“水果促销”页面
二、函数
1. 函数的语法
JavaScript 函数使用 function 关键词定义，函数名可包含字母、数字、下
划线和美元符号，其命名规范与变量名相同。函数可指定不带参数或带多个参
数，如果在定义函数时指定了参数（又称形参）且未设置默认值，那么在调用
函数时也需要传入对应的参数（又称实参）。
94
项目二 制作“水果促销”页面
95
2. 函数的调用
一般情况下，函数只有在被调用时才会执行。调用在上文中定义的 showNumber
( ) 函数的示例代码如下。
3. 函数的返回值
在函数中，可以使用 return 语句将函数的运行结果返回给调用函数的程序，
返回值可以是任何类型（如空值、数组、对象或字符串等）。当函数运行到
return 语句时会立即停止，并返回到调用函数的地方继续执行后续代码。
测试与提交“水果促销”页面
任务 4
96
项目二 制作“水果促销”页面
1. 能使用多种浏览器对页面进行测试。
2. 能根据项目需求测试页面的各种交互功能。
3. 能使用 Git 命令成功提交页面代码。
97
项目二 制作“水果促销”页面
本任务的主要内容是实现“水果促销”页面的测试和提交，先进行网页兼
容性测试和各模块测试，确认页面布局展示和各模块功能均已符合项目需求，
然后使用 Git 命令查看 Git 仓库状态，在本地版本库中保存代码后，将本地分
支版本提交到远程 Git 仓库中。
98
项目二 制作“水果促销”页面
一、网页兼容性测试
为了确保网页在各种浏览器上能良好显示，应进行兼容性测试。由于不同
浏览器采用不同的渲染引擎和技术标准，网页在不同浏览器上的显示效果也可
能会有所差异。因此，在各种主流浏览器（包括 Chrome、Firefox、Microsoft
Edge 等）上进行测试并确认网页显示效果和交互功能的实现是一项非常重要的
工作。
99
项目二 制作“水果促销”页面
遵循标准规范，适配不同浏览器的特性，进行网页兼容性测试，可确保用
户能够在主流浏览器上获得一致的使用体验，提高用户满意度和网页可用性。
网页兼容性测试内容包括页面布局、图像显示、表单输入和功能交互等。为提
升网页的兼容性，在开发时需注意以下几点技术要求。
（1）遵循 HTML 和 CSS 的标准规范，使用正确的标签和属性，确保代
码的结构良好。
（2）确保 JavaScript 代码可在不同浏览器上正常工作。
（3）确保网页中的图像、视频和音频在主流浏览器上能够被正确显示和
播放。
（4）测试网页在不同浏览器上的异常情况处理和错误提示。
100
项目二 制作“水果促销”页面
二、Git 仓库代码提交
1. Git 简介
Git 是一种分布式版本控制系统，常用于软件开发过程中的版本管理。Git
的优点主要体现在以下 5 个方面。
（1）分布式
每个开发人员都可以在本地设备中拥有一套完整的代码库，该机制可以保
证代码的安全性和完整性。
（2）高效的版本控制
使用“快照”机制进行版本管理，能够快速进行版本控制与回滚，也减少
了对存储空间的需求。
101
项目二 制作“水果促销”页面
（3）分支管理
支持创建与合并分支，使不同开发人员可在不干扰主线开发的情况下工作，
大大提高了开发效率。
（4）合并功能
可自动将不同分支的代码合并到一起，以及处理大量的代码冲突。
（5）历史记录
可记录每一次提交的历史，也可以在代码出现问题时快速地回滚，为代码
的维护和追溯提供很大的便利。
102
项目二 制作“水果促销”页面
2. Git 仓库的基本操作
Git 仓库分为开发人员自身设备上的本地仓库和服务器上的远程仓库，以
下为 Git 仓库的基本操作方式。
（1）克隆远程仓库
将远程仓库克隆到本地设备上，命令如下。
该命令将在当前目录下创建一个与远程仓库名称相同的文件夹，并将该远
程仓库的所有内容下载到本地设备中。
103
项目二 制作“水果促销”页面
（2）创建分支
在开始修改代码前，可先创建新的分支，从而将新功能的开发与主线隔离
开，方便管理和合并，命令如下。
该命令将创建一个新的分支并切换到该分支。
（3）查看状态
显示工作目录和暂存区的状态，命令如下。
该命令可查看哪些更改已经提交至暂存区，哪些尚未提交，以及 Git 未跟
踪哪些文件。
104
项目二 制作“水果促销”页面
（4）拉取代码
取回远程主机的更新并与本地分支合并，命令如下。
（5）添加修改的文件
将修改的文件添加到 Git 的暂存区，命令如下。
也可以将指定的文件添加到 Git 的暂存区，命令如下。
105
项目二 制作“水果促销”页面
（6）提交代码
将修改的文件添加到 Git 的暂存区后，可将代码提交到本地版本库，命令
如下。
在提交代码时，需要提供一段简短的提交说明，以便团队其他成员了解本
次提交的目的与内容。
（7）推送到远程仓库
在将代码提交到本地版本库后，可将代码推送到远程仓库，命令如下。
该命令可将本地分支的代码推送到远程仓库中。
106
