Javascript on Nishizono Mio's Shaddow

JavaScript Learn Part.C

Mon, 16 Feb 2026 17:47:16 +0800

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()打开的。

窗口设置为顶级窗口

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

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 格式）：

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 格式）：

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

评分标准
- HTML 结构完整、表格布局合理（20 分）；
- CSS 样式、表格交互效果符合要求（30 分）；
- 初始渲染 / 新增 / 删除功能正确（每项 10 分，共 30 分）；
- 修改功能正确（10 分）；
- 查询功能正确（10 分）。

JS练习题二-参考答案

ACABB ABAAA BBBBB

CD ABC ABCD ABC ABC ABC ABC ABC CD BC

undefined
减一（或：减少 1）
1-7 4. window.document
innerHTML、innerText
getElementsByName
onchange
字母
开始、结束
RegExp
test
button
毫秒（或：millisecond）
clearInterval
_self
back
[1-9][0-9]{4，}（或：^[1-9][0-9]{4,}$）
12、红
毫秒
全局

编程题参考答案:
第1题
 第2题
 第3题
 第4题
 第5题

JavaScript Learn Part.B

Fri, 13 Feb 2026 16:33:41 +0800

JS中的事件

常用事件

焦点
- blur失去焦点
- focus获得焦点
击打
- click鼠标单击
- dblclick鼠标双击
键盘
- keydown键盘按下
- keyup键盘弹起
鼠标
- mousedown鼠标按下
- mouseover鼠标经过
- mousemove鼠标移动
- mouseout鼠标离开
- mouseup鼠标弹起
表单
- reset表单重置（在form元素中添加，不是input）
- submit表单提文
其它
- select文本被选定
- change下拉列表选中项改变,或文本框内容改变
- load页面加载完毕【注意此事件在页面所有元素（包括执行完所有script脚本）加载完毕后触发，不是加载时触发】

参考代码020-事件.

注册事件的2种方式

方法一

在标签中使用事件句柄属性，在事件句柄中编写事件代码，当对应的事件发生后，注册在事件句柄当中的代码被监听器调用。一般称事件句柄注册的函数为回调函数（CallBack Function）。回调函数的特点是：

监听器负责调用而非程序
事件发生后监听器来调用

方法二

铺垫：根据id获取节点对象

在JS中有一个隐含的对象document，代表整个HTML文档，是DOM的顶级对象。在JS中有一个隐含的对象window，代表整个浏览器窗口，是BOM的顶级对象。

document对象有一系列方法，其中getElementById()可根据id名返回节点对象。在JS中，获取到节点之后，节点属性可以直接当作JS对象的属性访问（读/写）。因此，可以把写好的函数绑定到事件句柄属性上：obj_onExmapleEvent = myFunction，注意不要写成myFunction()。

代码的执行顺序

一般情况下，如果元素未加载而通过id获取对象，会失败，参考022 Line 11。解决办法：利用表征所有元素加载完成的load事件，参考代码024

当onload句柄的回调函数执行时，所有元素必然加载完毕。当然这里有一个瑕疵，即load事件句柄的回调函数是用第一种绑定方法，可否改造成第二种？解决办法：利用window对象（暂时可以认为是body标签的对象），为onload绑定函数：window.onload = function(){}，参考代码026

例子：通过keydown事件捕捉Enter和ESC

目标：输入框输入完成时按下Enter键，要捕捉到回车键按下，并输出提示.

原理：所有回调函数在被监听器调用时，都会传入一个对象参数，表示发生的事件对象。对于所有的键盘事件，事件对象有keycode属性，可以获取键值。其中Enter键值是13，Esc键值是27。

运算符void

语法格式：void(表达式)
含义：执行表达式，并且不做任何返回（即使表达式本身有返回结果）

示例代码文件

<h1>H1</h1>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<a href="" onclick="alert('执行JS代码')">保留超链接样式，点击后执行一段JS代码，执行完后保证页面不跳转</a>

按下超链接后页面其实会跳转，因为href置空默认跳转到本页，也就是一次刷新。为了不要此次刷新（跳转），关键是要把跳转路径完全干掉，而不是默认值或者空字符串：

1
2
3

<a href="javascript:void('anything')" onclick="alert('执行JS代码')">
    超链接
</a>

注意到要加javascript:以免浏览器认为"void()“是地址。可以观察一下鼠标悬停在超链接文本上时浏览器下角会出现“javascript:void(0)”。

控制语句

JS的控制语句和除了Java相同，也有特别的。

选择
- if
- switch
循环
- for
- while
- do … while
跳转
- break
- continue
- return

特别的语句，了解即可 ——

for … in 语句

遍历数组，index是下标，类型Number

var arr = [true, 4, "abc", 2, NaN, 10, 7] 
for (var i=0; i<arr.length; i++) {
    console.log(arr[i])
}
// 另一种遍历, 注意index是索引值的字符串，例如"0", "1"等，类型是String
for (var index in arr) {
    console.log(arr[index])
}

遍历对象属性, prop是属性名，类型String

function Emp(x, y, z) {
    this.propa = x
    this.propb = y
    this.propc = z
}
obj = new Emp(1, "jack", 123.45)
for(var prop in obj) {
    console.log("obj."+prop+" = "+obj[prop])
}

with语句

内置对象

Array

Array是JS的数组类型，数组长度可变。

创建数组

方法1：创建数组时赋值

JS的数组是可变长的，并且如果为越界下标元素赋值，数组将自动扩容到该下标，并且新扩展的元素除了最后一个被赋值的，其它值默认undefined。

方法2：利用Array类

new Array() 创建空数组
new Array(4) 创建指定长度空数组
new Array(false, NaN, 34.55, 3, 5)

使用for..in或者for来遍历数组，使用下标访问并修改，类型可变。

常用方法

方法	用例	描述
push	arr.push(val)	向数组末尾追加元素，返回追加元素
pop	arr.pop()	将数组末尾元素弹出并返回之，同时数组长度减一 ; 可以说数组的push和pop遵循栈的行为
reverse	arr.reverse()	反转数组，返回数组对象（引用）
join	arr.join(s)	将数组元素用字符（串）s连接成字符串

Date

创建Date对象

new Date() 返回Date对象，包含系统当前时间
new Date(4) // 创建指定长度空数组
new Date(false, NaN, 34.55, 3, 5)

Date的方法

方法	描述
getFullYear	返回四位年份
getYear
getMonth	返回值0-11代表1·12月份
getDay	返回星期数, 1-7代表周一到周日
getDate	返回一个月中第几天
getHours	返回小时
getMinutes	返回分钟
getSeconds	返回喵
getMilliseconds	返回毫秒
toLocaleString	转化成本地语言·地区的日期格式
getTime	获取自1970/0/0 0:0:0 000的毫秒数（时间戳）

附录

JavaScript 基础语法练习题一

考察范围：JS概述（Javascript-Learn全部） - 控制语句（JavaScript-Learn-Part.B）

一、单选题（每题2分，共20分）

1 – 关于JavaScript嵌入方式，以下说法错误的是（）

A. 行间事件法中`window.alert()`可以简写为`alert()`
B. 引入外部JS文件的`<script>`标签内写代码会正常执行
C. 页面脚本块可以出现在HTML文档的任意位置
D. 多个脚本块会按照在文档中出现的顺序依次执行

2 – 执行typeof null的结果是（）

A. null
B. object
C. undefined
D. number

3 – 以下关于JS变量的说法，正确的是（）

A. 声明变量时必须指定数据类型
B. `var a;` 执行后a的值为null
C. 函数内未使用var声明的变量是全局变量
D. 变量一旦赋值，类型无法改变

4 – 关于JS函数，以下描述错误的是（）

A. 函数调用时实参数量可以和形参数量不一致
B. 可以先调用函数再定义函数
C. JS支持函数重载，同名函数会根据参数区分执行
D. `var sum = function(a,b){return a+b}` 是函数的合法定义方式

5 – 执行isNaN("123abc")的结果是（）

A. true
B. false
C. NaN
D. undefined

6 – *以下运算符比较结果为true的是（）

A. null === undefined
B. 10 == "10"
C. NaN == NaN
D. 0 === false

7 – 关于事件绑定，以下说法正确的是（）

A. `window.onload`事件在页面开始加载时立即触发
B. 通过`document.getElementById()`获取元素时，无需等待DOM加载完成
C. 为元素绑定事件时，函数名后加括号表示绑定函数本身
D. keydown事件中，Enter键的keyCode值为13

8 – 执行parseInt("123.99abc")的结果是（）

A. 123.99
B. 123
C. NaN
D. 123.99abc

9 – *关于for…in语句，以下描述错误的是（）

A. 遍历数组arr时，`for(var i in arr)`的i是数组下标，类型为Number
B. 遍历对象elt时，`for(var prop in elt)`的prop是属性名，类型String
C. 可以遍历数组的所有元素
D. 可以遍历对象的所有属性

1 –. 以下关于void运算符的用法，正确的是（）

A. `void(alert("test"))` 执行后会返回alert的执行结果
B. `<a href="void(0)" onclick="alert('test')">` 可阻止超链接跳转
C. `void`运算符的作用是不执行表达式
D. `<a href="javascript:void(0)" onclick="alert('test')">`可阻止超链接跳转

二、不定项选择题（每题4分，共20分，多选、少选、错选均不得分）

1 – 以下属于JavaScript三大组成部分的有（）

A. ECMAScript
B. DOM
C. BOM
D. JQuery

2 – 以下数据类型中，属于JS原始数据类型的有（）

A. Undefined
B. Object
C. Boolean
D. Null

3 – 以下字符串方法的描述，正确的有（）

A. `length`属性用于获取字符串长度
B. `replace(s1,s2)`会替换字符串中所有的s1
C. `split(",")`可将字符串按逗号拆分为数组
D. `charAt(0)`可获取字符串第一个字符

4 – 以下关于JS事件的描述，正确的有（）

A. blur事件表示元素失去焦点
B. submit事件需绑定在form元素上
C. mouseover事件表示鼠标离开元素
D. change事件可监听下拉列表选中项的改变

5 – 以下关于JS对象和原型的描述，正确的有（）

A. 可通过`prototype`为Object扩展方法
B. 访问对象属性的方式有`obj.prop`和`obj["prop"]`
C. JS中通过`function`定义的函数可作为类使用
D. `new String("test")`创建的变量类型为String

三、填空题（每空2分，共20分）

JavaScript中，声明变量使用________关键字（ES6前），未赋值的变量默认值为________。
JS中==是________运算符，===是________运算符。
页面中所有元素加载完毕后触发的事件是________。
isNaN()函数的作用是________，它会首先尝试将参数转换为________类型。
遍历对象属性的特殊循环语句是________。
阻止超链接默认跳转行为时，href属性的正确写法是________。
JS中Number类型的特殊值，非数字用________表示，正无穷大用________表示。
为对象动态扩展属性和方法可使用________属性。
函数内未使用var声明的变量默认是________变量。
DOM顶级对象是________，BOM顶级对象是________。

四、编程题（每题20分，共60分）

题目1：数字判断与转换

要求：

编写一个函数checkNumber，接收一个参数；
判断该参数是否为有效数字（非NaN），若是则返回其整数部分，若不是则返回"不是有效数字”；
测试用例：
- checkNumber(“123.45”) → 123
- checkNumber(“abc”) → “不是有效数字”
- checkNumber(NaN) → “不是有效数字”
- checkNumber(99.99) → 99

题目2：事件绑定实现表单验证

要求：

编写HTML页面，包含一个输入框（id=“username”）和一个按钮（id=“submitBtn”）；
页面加载完成后，通过脚本为按钮绑定点击事件；
点击按钮时，验证输入框内容：
- 若为空，弹出提示"用户名不能为空"；
- 若长度小于6，弹出提示"用户名长度不能小于6位"；
- 若验证通过，弹出提示"用户名验证通过"。
提示：通过元素对象的value属性获取输入的文本

题目3：对象与遍历

要求：

定义一个表示学生的类Student，包含属性：姓名（name）、年龄（age）、成绩（score，数组类型）；
为Student类添加方法getAvgScore，用于计算成绩的平均分；
创建一个Student实例，姓名为"张三"，年龄为18，成绩为[80,90,85,95]；
遍历该实例的所有属性并打印（格式：属性名：属性值）；
调用getAvgScore方法，打印平均分。

JavaScript 基础语法练习题一答案

题号	答案	解析
1	B	引入外部 JS 文件的`<script>`标签内的代码不会执行
2	B	typeof null返回object是 JS 的历史设计 bug
3	C	A：JS 是弱类型，声明变量无需指定类型； B：var a;默认值是 undefined； D：JS 变量类型可动态改变
4	C	JS 不支持函数重载，同名函数仅保留最后定义的版本
5	A	“123abc"无法转换为有效数字，isNaN返回 true
6	B	A：null和undefined类型不同，全等为 false； C：NaN 与任何值（包括自身）都不相等； D：类型不同，全等为 false
7	D	A：window.onload在所有元素加载完毕后触发； B：需等待 DOM 加载完成才能获取元素； C：加括号会立即执行函数，而非绑定
8	B	parseInt从左到右解析，截取整数部分，遇到非数字停止
9	A	遍历数组时，index是字符串类型（如 “0”），需手动转换为数字
10	D	A：void执行表达式但无返回值；B：缺少javascript:前缀，浏览器会认为是普通地址；C：void会执行表达式
11	ABC	JS 三大组成部分：ECMAScript（核心）、 DOM（文档对象模型）、BOM（浏览器对象模型）； JQuery 是 JS 库，非核心组成
12	ACD	原始数据类型：Undefined、Number、String、 Boolean、Null；Object 是引用类型
13	ACD	B：replace(s1,s2)仅替换首次出现的 s1，全替换需正则表达式
14	ABD	C：mouseover是鼠标经过，mouseout是鼠标离开
15	ABC	D：new String(“test”)创建的是 Object 类型，字面量"test"是 String 类型

填空题

var；undefined
等同；全等
load（或window.onload）
判断参数是否为非数字；数字
for…in
javascript:void(0)
NaN；Infinity
prototype
全局
document；window

编程题一

function checkNumber(param) {
    // 判断是否为有效数字
    if (!isNaN(param)) {
        // 转换为数字后取整数部分
        return parseInt(param);
    } else {
        return "不是有效数字";
    }
}

// 测试用例
console.log(checkNumber("123.45"));  // 123
console.log(checkNumber("abc"));     // 不是有效数字
console.log(checkNumber(NaN));       // 不是有效数字
console.log(checkNumber(99.99));     // 99

编程题二

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <input type="text" id="username" placeholder="请输入用户名">
    <button id="submitBtn">提交</button>

    <script>
        // 等待页面加载完成
        window.onload = function() {
            // 获取元素
            var usernameInput = document.getElementById("username");
            var submitBtn = document.getElementById("submitBtn");
            
            // 绑定点击事件
            submitBtn.onclick = function() {
                var username = usernameInput.value;
                // 验证为空
                if (username === "") {
                    alert("用户名不能为空");
                } else if (username.length < 6) {
                    alert("用户名长度不能小于6位");
                } else {
                    alert("用户名验证通过");
                }
            }
        }
    </script>
</body>
</html>

编程题三

// 1. 定义Student类
function Student(name, age, score) {
    this.name = name;
    this.age = age;
    this.score = score;
    
    // 2. 添加计算平均分的方法
    this.getAvgScore = function() {
        if (this.score.length === 0) return 0;
        var sum = 0;
        for (var i = 0; i < this.score.length; i++) {
            sum += this.score[i];
        }
        return sum / this.score.length;
    }
}

// 3. 创建实例
var zhangsan = new Student("张三", 18, [80,90,85,95]);

// 4. 遍历实例属性
console.log("学生信息：");
for (var prop in zhangsan) {
    // 排除方法属性（可选，根据需求）
    if (typeof zhangsan[prop] !== "function") {
        console.log(prop + "：" + zhangsan[prop]);
    }
}

// 5. 调用方法并打印平均分
var avgScore = zhangsan.getAvgScore();
console.log("平均分：" + avgScore); // 输出：平均分：87.5

JavaScript Learn Part A

Sun, 08 Feb 2026 15:08:15 +0800

本文是Javascript学习笔记·A，记录JS基础语法。

JavaScript概述

简称 JS
JavaScript语言是一种脚本语言,JavaScript的“目标程序”是以普通文本的形式保存。用记事本是可以直接打开的。
JavaScript和JScript的关系……
JavaScript主要用来操作HTML中的节点,产生动态效果；JS是一门编程语言，专门用来操作HTML页面中的节点，产生动态效果
JavaScript和 Java的区别：毫无关系
（重要）JS调试要充分利用浏览器开发者页面的控制台，查看器，网络面板

JavaScript包括三块:ECMAScript、DOM、BOM

ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准；ECMAScript是JavaScript核心语法
Document Object Model编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的
Browser Object Modle编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

嵌入JS的三种方式以及JS注释

行间事件法

JS是一种事件驱动的语言，一般是在发生某个事件时执行某些代码。事件有很多种，例如鼠标单机click、鼠标经过mouseover等。并且JS中任何一个事件都有对应的事件句柄：例如click对应事件的句柄是onclick，mouseover对应句柄是onmouseover…… 所有的事件句柄都是以标签的属性形式存在，例如<input type="buttom">就有onclick属性， onclick的属性值就是注册的代码，只要出发点击事件，就会执行这段代码。

举个例子（参考代码001），目标是“点击按钮Hello, 弹出对话框，框中显示HelloWorld”。

怎么实现弹窗？ JS中有内置的BOM对象window，可以直接用，因此我们直接把弹窗函数"window.alert('Hello world');"写在onclick的属性值中。

小TIPS

JS中的一条语句可以以一个分号结尾，也可以没有

window.可以省略

页面脚本块嵌入

在HTML中嵌入脚本块，脚本块中的代码自上而下逐行执行。 脚本块的位置随意（甚至可以在<html>外），并且可有多个。

<script type="text/javascript">
    alert('警告1')
    alert('警告2')
</script>

注意，如果脚本块前后有DOM网页元素，则其前面的内容会先显示，然后执行脚本，然后再加载后面的内容。

引入外部JS文件

编写.js文件，然后通过<script src="path/to/your.js"/>引入。引入一次.js文件，其中代码就会执行一次。并且，使用引入法的脚本块中的代码不会执行，例如下述弹窗不会出现：

1
2
3

<script type="text/javascript" src="js/local.js">
    alert('弹窗')
</script>

标识符合关键字

标识符规则和java一样

变量

变量的声明与赋值

回顾：Java中的变量 ——

声明：int a;，double b;，string s;
赋值：a = 10;，b = 3.14;，s = "hello;
一行可以声明多个变量int a, b=2, c=3;

Java是强类型编译型语言。

回到JS —— JS是弱类型非编译（脚本）语言，参考代码006-变量。

声明：var variable_name，默认赋值undefined（这就是一个具体的值），声明时可赋值
赋值：variable_name = value
一行声明多个变量：var a, b = 90, c;，意味着a, c赋值undefined，b赋值90

重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行。在JS中声明变量时不需要指定变量的数据类型；程序在运行过程当中，赋什么类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。

以下JS代码是可行的：

var i;
i = 100;    // i为整型
i = false;  // 变为布尔型
i = true;
i = 3.14;   // 浮点型 
i = new Object();

函数的定义和调用

Java中的方法：[修饰符列表] 返回值类型方法名(形参列表) {方法体}。例如

1
2
3

public static int sum(int a, int b) {
    return a + b;
}

JS中的函数：function 函数名(形参列表) {函数体}。例如

1
2
3

function sum(a, b) {
    return a + b
}

函数要被调用才会执行，不是定义了就会执行的！参考代码007-函数定义和调用。

TIPS

函数调用时的实参列表不用与形参列表对应，参数从左往右一次配入形参。

JS函数还有另一种定义方式：函数名 = function(形参列表) {函数体}

函数定义的优先级较高，可以在函数定义前调用（参考代码008-函数定义和调用）

局部变量与全局变量

全局变量：在函数体外声明的变量，称为全局变量，在浏览器打开页面时分配空间，直到关闭才销毁；

局部变量：函数调用时分配空间，函数执行结束后内存释放

特别的，若一个变量声明时（应该说是定义时赋值）没有用var关键字，则无论是在哪声明的，默认为全局变量。使用这种特性的变量必须声明时赋值，不能既不用var又不赋值。参考代码009-局部全局变量中“特性”。

Topic - 函数可以重载吗
不可以，同名函数只取最后定义的那个函数来解释，其他同名函数直接消失！根本不可能执行，所以不是覆盖（因为JS函数定义优先级高先解释）。参考代码010

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

Undefined
Numebr
String
Null（通过=null赋予）
Boolean
Object

其中Undefined, Number, String, Boolean， Null都属于基本数据类型， Object属于对象类型（引用数据类型）。

ECMASCRIPT6版本后的数据类型有8种，多了Symbol, Bigint。

typeof运算符（@@@@@）

typeof运算符可以在代码运行时动态的获取变量的数据类型，使用方法typeof variable_name。 typeof算符的运算结果的值为以下6个字符串之一（注意是小写）：

undefined
numebr
string
boolean
object（null类型数据通过typeof算符作用结果为object）
function

在JS中判断字符串是否相等应使用==算符，参考代码011-数据类型。

Numebr类型

Number类型的数据

类比：Number类型代表了Java中的byte, short, int, long, float, double。

Number类型都有哪些值？以下均可取 - -1 - 0 - 1 - 12.34 - NaN - Infinity

参考代码014-Number类型

NaN这个值意思是非数，但数据的类型仍是Number，当一个数学表达式运算最终无法返回数字时，值就是NaN。例如100 / "abc"的运算结果就是NaN。

TIPS
运算式100 + "abc"结果是字符串"100abc"，所以这个表达式不是数学表达式，而是字符串拼接的意思，所以返回值类型不是Number
JS中10/3结果是浮点3.33333

Infinity顾名思义就是无穷大（注意是正无穷）。

isNaN() 函数

形参列表：一个变量
返回值：Boolean，true代表传参是NaN，否则不是
作用：用于判断数据是不是数

注意，这个函数会首先尝试将数据转换成数字，若失败则结果是true；转换成功则结果为false。可以测试

布尔类型true转换为数字类型是1，false转为0
数字字符串可以转化为数

Number()函数

Number()函数将不是Number类型的数据转为Numeber类型，它把**可以转为Number类型（也就是isNaN()返回true的类型）**的数据转为数字；把不可转为Number类型的数据转为NaN；若参数已经是Number类型，保持不变。

parseInt()函数

把字符串表示的小数（或者小数）取整数部；注意不是向下取整。实际上对于字符串参数，类似于把第一个小数点前面的部分截出来转为数字。无法转化的，输出NaN。

JS数学类介绍

向上取整：Math.ceil(123.456)

Boolean类型

Boolean类型是原始类型，只有两个值：true，false。

Boolean()函数

把非Boolean类型数据转为Boolean类型的数据。

数据	类型	转化结果
0	Number	false
1	Number	true
‘abc’	String	true
''	String	false
NaN	Number	false
Infinity	Number	true
null	Null	false
undefined	Undefined	false
Object	Object	true

规律：只有有东西，结果就是true。 Boolean()函数不需要我们手动调用，它会被隐式调用。例如name="zhansan"; if(name) {...}中，JS将自动把name变量转为Boolean类型并判断真伪。
参考代码015-Boolean。

String

String是原始类型。怎么定义一个字符串？在JS中有两种创建方式：

var str = "string" —— 类型是String
var s = new String('string') —— 类型是Object，使用了Object类的子类String，这是JS内置的可以直接用

不论哪种字符串，其方法和属性都是通用的。以下介绍常用属性和方法。参考代码016

属性或方法	描述
length属性	获取字符串长度
charAt()	获取指定下标位置的字符，下标从0开始
concat()	拼接字符串
indexOf()	获取某个字符串在当前字符串第一次出现的索引
lastIndexOf()	获取某个字符串在当前字符串末次出现的索引
replace()	`str.replace(s1, s2)`把str中首次出现的s1替换为s2（只替换一次）。替换所有需要使用正则表达式。
split()	`str.split(s)`，把str以s为分割拆分为若干字符串，返回一个数组
substr()和subtring()	若只有一个参数`n`，其行为相同，都是取字符串index为n到index为末尾的字串。

substr()和subtring()：若两个参数，含义如下

substr(startIndex, length)
substring(start, end)且不包括end |toLowerCase()和toUpperCase() |大小写转化

Object

在JS中内置一个Object类型，可视为所有类型的基类/超类。 JS中默认定义的类型如无特殊说明，默认继承Object。 Object类型中的通用属性和方法如下。参考代码017

prototype属性

意为原型，这个属性可以为对象动态扩展属性和方法。例如：

var o = new Object()
// 演示prototype属性
Object.prototype.doSome = function() {
    console.log("测试Prototype属性")
}
o.doSome()

通过prototype属性为Object拓展了doSome()方法。实际上，prototype属性可以为其它类型也扩展属性和方法，例如

String.prototype.sub = function(start, length) {
    return this.substr(start, length)
} // 扩展String的方法
console.log("1234567".sub(2,3))

类

定义类

方法一

function 类名(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

方法二

类名 = function(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

所以说，function创建一个函数，也创建一个同名类（或者理解为创建一个东西，功能与调用方法有关）。若通过函数名();调用，则是当作函数来用；若是通过var obj = new 类名()创建对象，则是当作类来用，会在堆中分配空间，而obj是堆上对象的引用。参考代码018。

访问属性

方法一：引用.属性名，例如example_obj.test_property
方法二：引用["属性名"]，例如example_obj["test_property"]

null, NaN, undefined的区别

参考代码019

`==`和`===`的区别

==是等同运算符，===是全等运算符。前者只比较值是否相等，类似Java的equals方法；后者比较值和数据类型是否相同。

null, NaN, undefined的区别

类型互不相同，之间全等运算结果肯定是false

null：原始类型，typeof运算结果是object
NaN：原始类型，typeof运算结果是number
undefined：原始类型，typeof运算符结果是undefined

null和undefined是等同关系

null == NaN ? false
null == undefined ? true
undefined == NaN ? false

NaN不与任何值相同，包括自身

NaN == NaN ? false

JSON

eval()函数

window.eval()函数可以把一段字符串当成JS代码解释并执行。

创建JSON对象，访问JSON对象属性

JSON: JavaScript Object Notation，一种轻量（文本少数据量大）数据交换（不同编程语言之间的数据交换）格式；xml也是一种标准的数据交换格式。

JS中的JSON是以对象形式存在的。

语法格式

创建JSON对象：

var jsonObj = {
    "属性名" : "属性值", 
    "属性名" : "属性值", 
    "属性名" : "属性值", 
}

注意，JS中方括弧是数组对象，花括弧是JSON对象。属性值可以是任何类型数据，包括JSON对象。

访问JSON对象属性

jsonObj.prop或jsonObj["prop"]

JSON数据交换

java和javascript两个语言交换数据可以使用JSON格式的字符串。 java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给javascript，然后在javascript当中把json格式的字符串转换成JSON对象，这样就可以从json对象中取数据了，这样就完成了数据的交换。

Javascript on Nishizono Mio's Shaddow

JavaScript Learn Part.C

BOM和DOM

DOM编程案例

案例:动态显示表格内容

正则表达式

常见正则表达式符号

JS中创建正则表达式对象

正则表达式对象的方法

案例:网页时钟

BOM编程案例

附录

JS练习题二

单选题

不定项

填空题

编程题

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

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

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

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

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

JS练习题二-参考答案

JavaScript Learn Part.B

JS中的事件

常用事件

注册事件的2种方式

代码的执行顺序

例子：通过keydown事件捕捉Enter和ESC

运算符void

控制语句

for … in 语句

with语句

内置对象

Array

创建数组

Date

创建Date对象

附录

JavaScript 基础语法练习题一

一、单选题（每题2分，共20分）

二、不定项选择题（每题4分，共20分，多选、少选、错选均不得分）

三、填空题（每空2分，共20分）

四、编程题（每题20分，共60分）

题目1：数字判断与转换

题目2：事件绑定实现表单验证

题目3：对象与遍历

JavaScript 基础语法练习题一 答案

JavaScript Learn Part A

JavaScript概述

JavaScript包括三块:ECMAScript、DOM、BOM

嵌入JS的三种方式以及JS注释

行间事件法

页面脚本块嵌入

引入外部JS文件

标识符合关键字

变量

变量的声明与赋值

函数的定义和调用

局部变量与全局变量

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

typeof运算符（@@@@@）

Numebr类型

Number类型的数据

isNaN() 函数

Number()函数

parseInt()函数

JS数学类介绍

Boolean类型

Boolean()函数

String

Object

prototype属性

类

定义类

访问属性

null, NaN, undefined的区别

==和===的区别

null, NaN, undefined的区别

JavaScript 基础语法练习题一答案

`==`和`===`的区别