JavaScript Learn Part.C

BOM和DOM

BOM包含DOM；
使用document对象，实际上是使用window.document，window一般可省略

DOM编程案例

innerHTML和innerText来操作div和span

通过元素的innerHTML可以设置元素内部（标签对之间）的内容：

divElt.innerHTML = "<font color='red'>整个字符串会被当成HTML内容填充到标签对之间</font>"

通过元素的innerText可以设置元素内部（标签对之间）的内容：

divElt.innerText = "<font color='red'>整个字符串会被当成普通字符串内容填充到标签对之间</font>"

复选框的全选和取消全选

需求：某个复选框选中时，所有复选框选中。

解决办法：

选中即为click事件；
document.getElementsByName()获取同名元素
复选框选中/未选中。关键是checked属性

下拉列表选择项

案例:动态显示表格内容

业务背景：网页显示学生信息表格，一开始只显示表头，点击按钮后显示所有表项。

解决思路：

Java会给出一个JSON格式字符串，包含待显示的数据
JS通过eval()解析数据
通过拼字拼出tbody的html内容
通过属性innerHTML放到表格中，完成显示

正则表达式

什么是正则表达式,有什么用?

正则表达式是一门独立的学科,基本每个语言都支持。
正则表达式不是JS专属的。不过在Js中使用居多。
通常使用正则表达式进行字符串格式匹配。

正则表达式是有一堆特殊的符号组成的一个表达式。每一个特殊的符号都有特殊的代表含义。

例如: qq号的正则表达式。邮箱地址的正则表达式。

邮箱地址格式验证:

程序中有一个邮箱地址的正则表达式。
用户输入了一个邮箱地址。
那么邮箱地址的正则表达式和邮箱地址进行匹配,能匹配成功,表示合法,反之表示不合法。

对于javascript程序员来说,我们对于正则表达式掌握到什么程度呢?

第一:能够看懂正则表达式
第二:简单的正则要会写
第三:要能够独立的从网络当中搜索到你想要的正则表达式(搜索能力要有)，利用手册
第四:要会创建Js的正则表达式对象。
第五:要会调用Js正则表达式对象的方法。

参考手册

常见正则表达式符号

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

例子：
[a-z]{1}意思是a-z所有字母中任意一个；
[a-z0-9A-Z]{3,}意思是a-z，0-9，A-Z字符集合中出现三个
[1-9][0-9]{4，}就是QQ号的正则表达式
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$就是匹配邮箱地址

JS中创建正则表达式对象

方式一：var regExp = /正则表达式/标记
标记是可选项，可选值：

g: 全局
i: 忽略大小写
m: 不要求掌握

方式二：var regExp = new RegExp("正则表达式", "标记")

正则表达式对象的方法

正则表达式对象的test()方法用于检查字符串是否匹配规则。参考代码

字符串对象可以使用正则表达式：var str = "1970-1-1".replace(/-/g, "/")表示匹配中所有（正则表达式使用g标记）的减号，替换成斜杠

表单验证

需求描述：
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成,不能含有其它符号(正则表达式)
(4)密码和确认密码一致
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
(7)文本框再次获得焦点后,清空错误提示信息
(8)最终表单中所有项均合法方可提交

核心难点：

为了防止用户不听提示而提交，不要用submit按钮，改用button，并用form对象的submit方法提交表单
如何在提交前检查输入是否合法？
- 方法一：让表单元素先对焦focus再失焦blur，从而触发检查，也就是通过JS代码产生事件
提示信息的显示/消失用span控制

案例:网页时钟

需求：点击按钮显示时钟，并且以秒为间隔更新

解决办法：

执行window.setInterval("一段JS代码", milliTime)会开始周期性执行JS代码。特别的，如果代码是一个函数，可以不加引号和括弧，只写函数名。这个函数返回一个值，该值传入window.clearInterval()可以终止此段代码的周期调用。

BOM编程案例

window.open()和close()

window.open(url, opt)打开新窗口

url: 新页面的字符串
opt: ‘_self’为当前窗口打开; 默认值’_blank’; 其他可选值’_parent’, ‘_top’等

window.close()关闭当前页面，可用前提是当前页面是由open()打开的。

window.conirm()

弹出提示框，返回布尔类型

窗口设置为顶级窗口

应用场景：网页长时间待机后，工作区子窗口要变成登录页并变成顶级

1
2
3


if (window.top !== window.self) {
    window.top.href = window.self.location
}

前进后退

跳转到前一页面： window.history.back()

跳转到执行一次回退前的页面： window.history.go(1)

发送请求的多种方式

地址栏URL
点击超链接
提交表单
window.open(‘url’)
js代码: 四种效果相同
- window.location.href = 'https://www.baidu.com'
- window.location = 'https://www.baidu.com'
- document.location.href = 'https://www.baidu.com'
- document.location = 'https://www.baidu.com'

附录

JS练习题二

单选题

1 – 执行var arr = new Array(3); arr[5] = 10;后，arr[4]的值是？（）

A. undefined B. null C. 0 D. 报错

2 – Date 对象的getMonth()方法返回值为 5，代表的实际月份是？（）

A. 4 月 B. 5 月 C. 6 月 D. 7 月

3 – 以下关于innerHTML和innerText的区别，说法正确的是？（）

A. innerHTML 会解析 HTML 标签，innerText 仅作为普通文本
B. innerText 会解析 HTML 标签，innerHTML 仅作为普通文本
C. 两者都会解析 HTML 标签
D. 两者都仅作为普通文本

4 – 获取页面中所有name=“hobby"的复选框，正确的方法是？（）

A. document.getElementById ("hobby")
B. document.getElementsByName ("hobby")
C. document.getElementsByTagName ("hobby")
D. document.querySelector ("hobby")

5 – 正则表达式\d的含义是？（）

A. 匹配任意空白符 B. 匹配数字 C. 匹配字母 / 数字 / 下划线 D. 匹配除换行外任意字符

6 – 创建忽略大小写的正则表达式/abc/，正确的写法是？（）

A. var reg = /abc/i 
B. var reg = new RegExp ("abc", "g")
C. var reg = /abc/g 
D. var reg = new RegExp ("abc", "m")

7 – 以下能实现 “每隔 1 秒执行一次showTime()函数” 的代码是？（）

A. window.setTimeout ("showTime ()", 1000)
B. window.setInterval (showTime, 1000)
C. window.setInterval ("showTime ()", 1)
D. window.setTimeout (showTime, 1)

8 – 关闭由window.open()打开的当前窗口，正确的代码是？（）

A. window.close () B. window.stop () C. window.exit () D. window.shut ()

9 – 表单验证中，要判断密码框 (pwd) 和确认密码框 (repwd) 的值一致，正确的判断条件是？（）

A. pwd.value == repwd.value 
B. pwd == repwd
C. pwd.innerText == repwd.innerText 
D. pwd.innerHTML == repwd.innerHTML

10 – 以下代码执行后str的值是？（）

var str = "2026-02-16".replace(/-/g, "/")

A. "2026/02/16" B. "2026-02/16" C. "2026/02-16" D. "20260216"

11 – Date 对象的getTime()方法返回的是？（）

A. 当前时间的小时数 
B. 1970/01/01 00:00:00 到现在的毫秒数
C. 当前时间的分钟数 
D. 当前时间的时间戳（秒数）

12 – 要让下拉列表的选中变化触发事件，应使用的事件名是？（）

A. onclick B. onchange C. onblur D. onfocus

13 – 以下关于 BOM 和 DOM 的关系，正确的是？（）

A. DOM 包含 BOM B. BOM 包含 DOM C. 两者相互独立 D. 两者完全等同

14 – 正则表达式^[1-9][0-9]{4,}$匹配的是？（）

A. 至少 4 位的数字 
B. 至少 5 位的数字（首位非 0）
C. 4-5 位的数字 
D. 任意长度的数字（首位非 0）

15 – 关于数组push方法，以下描述正确的是？（）

A. 向数组开头添加元素，返回新数组长度
B. 向数组末尾添加元素，返回被添加的元素
C. 向数组末尾添加元素，返回新数组长度
D. 向数组开头添加元素，返回被添加的元素

不定项

16 – 以下创建数组的方式，正确的有？（）

A. var arr = {1, 2, 3}; 
B. var arr = Array ();
C. var arr = new Array (5); 
D. var arr = new Array ("a", "b");

17 – 关于数组方法，以下说法正确的有？（）

A. pop () 方法会删除数组最后一个元素并返回该元素
B. reverse () 方法会反转数组并返回数组引用
C. join (",") 会将数组元素用逗号连接成字符串
D. push () 方法可以一次添加多个元素

18 – 以下属于 Date 对象的方法有？（）

A. getFullYear () B. getDay () C. getMinutes () D. toLocaleString ()

19 – 以下关于复选框checked属性，正确的描述有？（）

A. 该属性值为布尔类型
B. 设置chk.checked = true可选中复选框
C. 获取chk.checked可判断是否选中
D. 该属性只能通过 HTML 标签设置，无法通过 JS 修改

20 – 以下正则表达式标记，正确的有？（）

A. g（全局匹配） B. i（忽略大小写） C. m（多行匹配） D. s（单行匹配）

21 – 以下能实现 “页面跳转至百度” 的代码有？（）

A. window.location.href = "https://www.baidu.com"
B. document.location = "https://www.baidu.com"
C. window.open("https://www.baidu.com", "_self")
D. window.history.go("https://www.baidu.com")

22 – 表单验证的触发时机，符合笔记要求的有？（）

A. 文本框失去焦点（onblur）时验证
B. 文本框获得焦点（onfocus）时清空错误提示
C. 点击提交按钮前统一验证所有项
D. 页面加载时自动验证所有项

23 – 关于window.setInterval()和window.clearInterval()，正确的有？（）

A. setInterval () 返回一个标识 ID，用于 clearInterval () 终止执行
B. clearInterval () 需要传入 setInterval () 返回的 ID 才能生效
C. setInterval () 的第一个参数可以是字符串形式的 JS 代码
D. setInterval () 的第二个参数单位是秒

24 – 以下关于正则表达式符号，含义正确的有？（）

A. *：重复一次或更多次 
B. +：重复零次或更多次
C. ?：重复零次或一次 
D. {n,m}：重复 n 到 m 次（包含 n 和 m）

35 – 以下关于 BOM 的操作，正确的有？（）

A. window.confirm () 会弹出确认框，返回字符串
B. window.history.back () 可返回上一页
C. window.top !== window.self 表示当前窗口不是顶级窗口
D. window.open () 默认在当前窗口（_self）打开链接

填空题

JS 数组是可变长的，越界下标赋值会自动扩容，未赋值的扩展元素默认值为______。

数组pop()方法会弹出末尾元素并返回，数组长度会______。

Date 对象的getDay()方法返回星期数，______代表周一到周日（填写数值范围）。

document对象的完整写法是______，其中window可省略。

要将 HTML 标签解析后填充到元素中，应使用______属性；仅填充普通文本用______属性。

获取同名复选框的方法是document.______()。

下拉列表选中变化的事件名是______。

正则表达式中，\w匹配______、数字、下划线或汉字。

正则表达式^匹配字符串的______，$匹配字符串的______。

创建正则表达式的两种方式：字面量/正则/标记和new ______(“正则”, “标记”)。

正则表达式对象的______() 方法用于检查字符串是否匹配规则。

表单验证中，要让所有项合法后才能提交，应使用______按钮替代 submit 按钮，通过form.submit()提交。

window.setInterval()的第二个参数单位是______。

终止setInterval()的周期性执行，需调用window.______()并传入标识 ID。

window.open()的第二个参数为______时，在当前窗口打开链接。

跳转到前一页面的 BOM 方法是window.history.______()。

QQ 号的正则表达式是______（填写笔记中的表达式）。

表单验证中，错误提示信息要求字体______号、______色。

Date 对象的getTime()方法返回自 1970/01/01 00:00:00 的______数。

字符串的replace()方法结合正则g标记，可______替换所有匹配的内容。

编程题

编程题 1：用户注册表单（表单验证 + CSS 样式 + 事件处理）

题目要求：实现一个符合以下要求的用户注册表单页面：

HTML 结构（30 分）
- 包含表单（action 设为#），表单项：用户名、密码、确认密码、手机号、邮箱、性别单选框、注册按钮、重置按钮；
- 每个输入项对应标签，错误提示用（初始隐藏）；
- 手机号和邮箱输入框添加placeholder提示。
CSS 样式（20 分）
- 表单整体居中，宽度 400px，内边距 20px，边框 1px 实线 #ccc；
- 输入框宽度 100%，高度 30px，margin-bottom 10px；
- 错误提示文字：12px、红色、margin-left 5px；
- 按钮宽度 100%，高度 35px，注册按钮背景色 #007bff，鼠标悬停时背景色 #0056b3，重置按钮背景色 #6c757d；
- 输入框获取焦点时边框颜色变为 #007bff。
JS 验证逻辑（50 分）
- 失去焦点验证：
  ✅ 用户名：非空、6-14 位、仅字母 / 数字（正则：/^[a-zA-Z0-9]{6,14}$/）；
  ✅ 密码：非空、长度≥8；
  ✅ 确认密码：与密码一致；
  ✅ 手机号：非空、11 位数字（正则：/^\d{11}$/）；
  ✅ 邮箱：符合邮箱格式（正则：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/）；
- 输入框获得焦点时清空对应错误提示；
- 点击注册按钮时，触发所有输入项的验证，全部合法则弹出 “注册成功”，否则阻止表单提交；
- 点击重置按钮时，清空所有输入和错误提示。
评分标准
- HTML 结构完整、语义化（30 分）；
- CSS 样式符合要求，交互样式生效（20 分）；
- 每个输入项的验证逻辑正确（每项 8 分，共 40 分）；
- 按钮点击逻辑正确（10 分）。

编程题 2：商品列表展示（侧重：DOM 操作 + CSS 布局 + 数据渲染）

题目要求：实现一个商品列表页面，支持动态渲染和样式控制：

HTML 结构（20 分）
- 包含：搜索框、搜索按钮、商品列表容器（<div>）、清空列表按钮；
- 商品列表初始为空，渲染后每个商品项包含：商品名称、价格、库存（用<div>/<span>布局）。
CSS 样式（30 分）
- 搜索区域：输入框宽度 200px，按钮 margin-left 10px；
- 商品列表：每个商品项为独立卡片，宽度 200px，边框 1px 实线 #eee，内边距 10px，margin 10px，浮动左对齐；
- 商品名称：字体加粗，价格红色，库存灰色；
- 鼠标悬停商品卡片时，边框颜色变为 #ff6700，背景色 #f5f5f5；
- 清除浮动，避免布局错乱。???
JS 功能（50 分）

页面加载完成后，默认渲染所有商品；
搜索功能：输入商品名称关键词，点击搜索按钮筛选商品（忽略大小写）；
清空列表：点击按钮清空商品列表容器内容；
动态渲染逻辑：通过拼接 HTML 字符串 + innerHTML实现，而非手动创建节点。

预设商品数据（JSON 格式）：

1
2
3
4
5
6
7


var goodsData = [
    {name: "小米手机", price: 1999, stock: 100},
    {name: "华为平板", price: 2999, stock: 50},
    {name: "苹果耳机", price: 1299, stock: 80},
    {name: "小米手环", price: 199, stock: 200},
    {name: "华为手表", price: 1599, stock: 80}
];

评分标准
- HTML 结构合理（20 分）；
- CSS 布局、样式、交互效果符合要求（30 分）；
- 默认渲染商品列表（15 分）；
- 搜索筛选功能正确（20 分）；
- 清空列表功能正确（15 分）。

编程题 3：待办事项清单（侧重：事件绑定 + CSS 显隐 + 数组操作）

题目要求：实现一个待办事项（TODO）清单页面，支持增删改查：

HTML 结构（20 分）
- 包含：输入框（待办内容）、添加按钮、待办列表（<ul>）、完成 / 未完成筛选按钮；
- 每个待办项包含：文本、完成按钮、删除按钮。
CSS 样式（30 分）
- 待办列表宽度 300px，列表项无默认编号（list-style-type: none），内边距 10px，边框 1px 实线 #ddd，margin 5px 0；
- 已完成的待办项：文字划线（text-decoration: line-through）、颜色 #999；
- 筛选按钮：margin 5px，点击时背景色变为 #28a745；
- 完成 / 删除按钮：margin-left 10px，小尺寸（宽 60px，高 25px）。
JS 功能（50 分）
- 存储待办数据：用数组保存，每个项包含content（文本）、isDone（是否完成）；
- 添加待办：输入非空内容，点击添加按钮，新增待办项到列表，清空输入框；
- 完成待办：点击完成按钮，切换待办项的isDone状态，同步更新样式；
- 删除待办：点击删除按钮，从数组和页面中移除对应项；
- 筛选功能：点击 “完成” 按钮只显示已完成项，点击 “未完成” 只显示未完成项，点击 “全部” 显示所有项；
- 所有事件绑定采用 “获取元素 + 赋值事件句柄” 方式（而非行间事件）。
评分标准
- HTML 结构完整（20 分）；
- CSS 样式、筛选按钮交互、完成项样式符合要求（30 分）；
- 添加待办功能正确（10 分）；
- 完成 / 删除待办功能正确（20 分）；
- 筛选功能正确（20 分）。

编程题 4：网页计算器（侧重：JS 运算 + CSS 布局 + 事件委托）

题目要求：实现一个简易计算器，支持加减乘除运算：

HTML 结构（25 分）
- 包含：显示框（<input type="text"，只读）、数字按钮（0-9）、运算符按钮（+、-、×、÷）、等号按钮、清空按钮；
- 按钮用<button>标签，按计算器布局排列（4 列）。
CSS 样式（25 分）
- 计算器整体居中，宽度 300px，边框 2px 实线 #333，内边距 10px；
- 显示框：宽度 100%，高度 40px，字体大小 18px，文本右对齐，margin-bottom 10px；
- 按钮：宽度 70px，高度 70px，字体大小 16px，margin 2px；
- 运算符按钮背景色 #ff9500，等号按钮背景色 #ff3b30，清空按钮背景色 #e6e6e6；
- 按钮点击时（:active）背景色加深。
JS 功能（50 分）
- 显示框初始为空，点击数字 / 运算符按钮，内容追加到显示框；
- 点击等号按钮：
- ✅ 解析显示框中的运算表达式（如 “12+34”），计算结果并显示；
- ✅ 处理除零错误，弹出提示 “除数不能为 0”；
- ✅ 处理非法表达式，弹出提示 “表达式错误”；
- 点击清空按钮，清空显示框；
- 事件处理：采用事件委托（给按钮父容器绑定点击事件），而非逐个绑定按钮事件。
评分标准
- HTML 结构符合计算器布局（25 分）；
- CSS 样式、按钮交互效果符合要求（25 分）；
- 数字 / 运算符输入功能正确（15 分）；
- 运算逻辑正确（含除零 / 非法表达式处理）（25 分）；
- 事件委托实现（10 分）。

编程题 5：动态表格管理系统（侧重：表格操作 + CSS 样式 + JSON 数据）

题目要求：实现一个学生信息表格管理页面，支持新增、删除、修改、查询：

HTML 结构（20 分）
- 包含：查询输入框、查询按钮、新增表单（姓名、年龄、班级）、提交按钮、学生信息表格（表头：姓名、年龄、班级、操作）；
- 操作列包含 “修改”“删除” 按钮，表格边框 1px 实线。
CSS 样式（30 分）
- 表格宽度 80%，居中，单元格内边距 8px，表头背景色 #f8f9fa，文字居中；
- 表格行鼠标悬停时背景色 #e9ecef；
- 新增表单：输入框宽度 150px，margin 5px，提交按钮背景色 #17a2b8；
- 修改 / 删除按钮：分别为 #ffc107、#dc3545，小尺寸（宽 60px，高 28px）。
JS 功能（50 分）
- 页面加载完成后，渲染学生数据到表格；
- 新增功能：表单验证（姓名非空、年龄为数字），验证通过后添加到数组并刷新表格；
- 删除功能：点击删除按钮，确认（confirm）后删除对应学生，刷新表格；
- 修改功能：点击修改按钮，将学生信息填充到新增表单，提交按钮变为 “修改”，点击后更新数据并恢复按钮文本；
- 查询功能：输入姓名关键词，筛选并渲染符合条件的学生。

预设学生数据（JSON 格式）：

1
2
3
4
5


var students = [
  {name: "张三", age: 18, class: "计算机1班"},
  {name: "李四", age: 19, class: "软件2班"},
  {name: "王五", age: 17, class: "网络3班"}
];