电子书
内容简介
本书采用项目驱动教学的思路编写，内容包括9个小项目和1个综合项目：抽奖页面一一初识JavaScript、体脂率计算器一一JavaScript程序设计基础、猜数字游戏——JavaScript流程控制、计算个人所得税一一JavaScript函数、毕业倒计时一一JavaScript对象、商品放大镜一—DOM对象、故宫轮播图一BOM对象、滑块验证码一一事件和事件处理、异步获取用户信息——AJAX技术、综合项目一一学生成绩查询。各个项目通过情境导入引出教学核心内容，明确教学任务。本书在全面系统地讲解知识的基础上，配备精彩的任务实践，有助于读者对知识的理解。
章节目录
- a-扉页
- 58211-BQ
- c-前言
- d-目录
- 目录 CONTENTS
- 58211-正文
- 项目1
- 抽奖页面——初识JavaScript
- 情境导入
- 项目目标（含思政元素）
- 知识储备
- 00任务1.1 认识JavaScript 0
- 1.1.1 JavaScript的发展概况和特点
- 1. JavaScript的发展概况
- 2. JavaScript的语言特性
- 1.1.2 JavaScript的应用场景
- 1. 动态交互效果
- 2. 数据验证
- 3. 结合流行框架开发移动应用
- 4. 使用AJAX等技术与后端进行数据交互
- 【任务实践1-1】简单JavaScript——认识JavaScript
- 图1-9 简单JavaScript
- 任务1.2 开启JavaScript编程
- 1.2.1 支持JavaScript的浏览器
- 1.2.2 代码编辑器
- 1.2.3 JavaScript在HTML中的应用
- 1. 直接将JavaScript代码嵌入HTML中（内嵌式）
- 【任务实践1-2】希望你可以努力成为自己想要的样子——内嵌式
- 图1-13 内嵌式
- 2. 链接外部的JavaScript文件（外链式）
- 图1-14 链接外部的JavaScript文件
- 3. 直接在HTML标签中使用JavaScript代码（行内式）
- 图1-15 使用“javascript:”方式调用
- 1.2.4 JavaScript常用的输入输出方式
- 1. 使用window.prompt()输入数据
- 2. 使用document.write()将内容输出到页面
- 3. 使用window.alert()弹出对话框输出内容
- 4. 使用console.log()在控制台输出内容
- 图1-16 浏览器控制台
- 【任务实践1-3】欢迎学习JavaScript——简单输入输出
- 图1-19 通过document.write()输出内容
- 1.2.5 JavaScript的注释
- 1. 单行注释符
- 2. 多行注释符
- 项目分析
- 项目实施
- 项目实训——输出个人信息
- 【实训目的】
- 【实训内容】
- 图1-20 项目实训输出结果
- 【具体要求】
- 小结
- 图1-21 项目1任务分解
- 拓展阅读——阿特伍德定律
- 习题
- 项目2
- 体脂率计算器——JavaScript程序设计基础
- 情境导入
- 图2-5 显示结果
- 项目目标（含思政元素）
- 知识储备
- 任务2.1 使用变量
- 2.1.1 标识符
- 2.1.2 关键字和保留字
- 2.1.3 变量的命名
- 2.1.4 变量的声明和赋值
- 1. 使用var声明变量和赋值
- 图2-6 在控制台中查看结果
- 2. 使用let声明变量和赋值
- 图2-7 在控制台中查看结果
- 3. 使用const声明变量和赋值
- 【任务实践2-1】求圆的周长——var和const
- 图2-8 通过PI求圆的周长
- 4. 3种变量声明方式的区别
- 2.1.5 变量的类型
- 【任务实践2-2】输出课程成绩——变量声明和变量赋值
- 图2-9 输出课程成绩——变量声明和变量赋值
- 2.1.6 变量的作用域
- 任务2.2 认识数据类型
- 2.2.1 数据类型分类
- 2.2.2 基本数据类型
- 1. 数值型
- 2. 字符串型
- 3. 布尔型
- 2.2.3 引用数据类型
- 2.2.4 特殊数据类型
- 1. null
- 2. undefined
- 图2-10 输出变量类型为undefined
- 3. NaN
- 4. 转义字符
- 图2-11 转义字符实现效果
- 2.2.5 数据类型判断
- 【任务实践2-3】测试变量类型——typeof
- 图2-12 typeof测试变量类型示例
- 2.2.6 数据类型转换
- 1. 隐式类型转换
- / 试一试
- 2. 显式类型转换
- 任务2.3 使用运算符
- 1. 单目运算符
- 2. 双目运算符
- 3. 三目运算符
- 2.3.1 算术运算符
- 【任务实践2-4】计算账单金额——算术运算符
- 图2-13 计算账单金额示例
- 2.3.2 关系运算符
- 【任务实践2-5】比较两个数的大小——关系运算符
- 图2-14 比较两个数的大小示例
- 2.3.3 赋值运算符
- 【任务实践2-6】变量赋值——赋值运算符
- 图2-15 赋值运算符测试示例
- 2.3.4 逻辑运算符
- 【任务实践2-7】判断某年是否为闰年——逻辑运算符
- 图2-16 判断某年是否为闰年
- 2.3.5 条件运算符
- 【任务实践2-8】判断是否成年——条件运算符
- 图2-17 判断是否成年
- 2.3.6 位操作运算符
- / 试一试
- 【任务实践2-9】交换两个变量的值——位操作运算符
- 图2-18 通过按位异或交换两个变量的值
- 2.3.7 运算符优先级
- 任务2.4 认识表达式
- 【任务实践2-10】人民币和美元换算——表达式
- 项目分析
- 项目实施
- 项目实训——验证用户输入的密码
- 【实训目的】
- 【实训内容】
- 【具体要求】
- 小结
- 图2-23 项目2任务分解
- 扩展阅读——symbol类型
- 习题
- 一、填空题
- 二、选择题
- 项目3
- 猜数字游戏——JavaScript流程控制
- 情境导入
- 图3-5 超过限定猜数次数
- 项目目标（含思政元素）
- 知识储备
- 任务3.1 认识流程控制
- 【任务实践3-1】显示个人信息——顺序结构
- 任务3.2 使用分支结构
- 3.2.1 单分支结构（if语句）
- 3.2.2 双分支结构（if…else语句）
- 【任务实践3-2】判断最大值——双分支语句
- 图3-15 显示最大值
- 3.2.3 分支结构（if…else语句）嵌套
- 图3-16 判断某职工是否退休
- 【任务实践3-3】评定成绩等级——分支结构嵌套
- 图3-17 根据成绩给出学生的考评等级流程图
- 3.2.4 多分支结构（if…else if…else语句）
- 图3-20 流程结构
- 图3-21 流程图对比
- 图3-22 实现过程对比
- 【任务实践3-4】分时问候——多分支结构
- 图3-23 分时问候语
- 图3-24 分时问候
- 3.2.5 多分支结构（switch语句）
- 【任务实践3-5】判断今天是星期几——switch语句
- 图3-26 switch语句判断今天是星期几
- 任务3.3 使用循环结构
- 3.3.1 while循环语句
- 【任务实践3-6】求1到100的奇数累加和——while循环
- 图3-29 通过while循环语句求1到100的奇数累加和
- 3.3.2 do…while循环语句
- 【任务实践3-7】求1到100的偶数累加和——do…while循环
- 3.3.3 for 循环语句
- 【任务实践3-8】求1到100的累加和——for循环
- 图3-35 通过for循环语句求1到100的累加和
- 3.3.4 循环语句嵌套
- 【任务实践3-9】输出直角三角形图案——循环嵌套语句
- 图3-36 输出“*”组成的直角三角形图案
- 3.3.5 break和continue语句
- 1. break语句
- 2. continue语句
- 【任务实践3-10】数值累加——continue和break
- 项目分析
- 图3-40 猜数字游戏流程图
- 项目实施
- 1. 页面结构
- 2. 脚本代码
- 项目实训——答题小游戏
- 【实训目的】
- 【实训内容】
- 【具体要求】
- 小结
- 图3-44 项目3任务分解
- 扩展阅读——其他for循环语句
- 1. for…in循环
- 2. foreach循环
- 3. for…of循环
- 习题
- 一、填空题
- 二、选择题
- 图3-12 if…else语句流程结构
- 图3-25 switch语句流程结构
- 图3-27 while循环语句的流程图
- 图3-28 通过while循环语句求1到 100的奇数累加和流程图
- 图3-30 do…while循环语句的流程图
- 图3-31 通过do…while循环语句求 1到100的偶数累加和流程图
- 图3-32 通过do…while循环语句求 1到100的偶数累加和
- 图3-33 for循环语句的流程图
- 图3-34 通过for循环语句求 1到100的累加和流程图
- 项目4
- 计算个人所得税——JavaScript函数
- 情境导入
- 图4-5 计算个人所得税
- 项目目标（含思政元素）
- 知识储备
- 任务4.1 认识函数
- 【任务实践4-1】输出个人信息——函数的应用
- 图4-6 输出个人信息——函数的应用
- 任务4.2 使用预定义函数
- 4.2.1 消息对话框函数
- 1. 警示对话框函数
- 【任务实践4-2】新学期寄语——警示对话框
- 图4-7 弹出警示对话框示例
- 2. 确认对话框函数
- 【任务实践4-3】确定诗句作者——确认对话框
- 3. 提示对话框函数
- 【任务实践4-4】诗词对答——提示对话框
- 4.2.2 数值处理函数
- 1. isNaN()、isFinite()函数
- 【任务实践4-5】判断数据是否为数字——isNaN()函数
- 2. parseFloat()、parseInt()函数
- 【任务实践4-6】格式化数据——parseFloat()和parseInt()函数
- 3. toString()、toFixed()函数
- 4.2.3 字符串处理函数
- 1. eval()函数
- 【任务实践4-7】计算表达式的值——eval()函数
- 2. escape()、unescape()函数
- 任务4.3 使用自定义函数
- 4.3.1 声明自定义函数
- 【任务实践4-8】计算商品总价——函数定义
- 4.3.2 调用自定义函数
- 1. 使用函数名来调用函数
- 2. 在HTML中用超链接的方式来调用函数
- 3. 在事件处理中用与事件结合的方式调用函数
- 【任务实践4-9】计算商品总价——使用函数名调用函数
- 图4-18 计算商品总价——使用函数名调用函数
- 【任务实践4-10】计算商品总价——使用超链接调用函数
- 4.3.3 函数的参数和返回值
- 1. 函数参数
- 【任务实践4-11】计算任意商品总价——有参函数
- 图4-21 调用有参函数统计商品的总价
- 2. 函数的返回值
- 【任务实践4-12】求两个数的较大数——return语句
- 图4-24 显示较大值
- 4.3.4 函数变量的作用域
- 【任务实践4-13】输出变量的值——变量的作用域
- 图4-25 变量的作用域示例
- 4.3.5 函数的嵌套
- 图4-26 函数嵌套调用的流程
- 【任务实践4-14】求1+(1+2)+(1+2+3)+…+(1+2+…+n)的值——函数嵌套
- 任务4.4 运用函数进阶
- 4.4.1 函数表达式
- 图4-29 自定义有名函数和函数表达式
- 4.4.2 匿名函数
- 图4-30 函数表达式和匿名函数
- 4.4.3 箭头函数
- 图4-31 匿名函数和箭头函数
- 【任务实践4-15】使用箭头函数实现不同层数的三角形图案——箭头函数
- 项目分析
- 项目实施
- 1. 页面框架
- 2. CSS结构
- 3. 脚本代码
- 项目实训——简易计算器
- 【实训目的】
- 【实训内容】
- 【具体要求】
- 图4-34 简易计算器
- 小结
- 图4-35 项目4任务分解
- 扩展阅读——JavaScript中的闭包函数
- 习题
- 一、填空题
- 二、选择题
- 项目5
- 毕业倒计时——JavaScript对象
- 情境导入
- 图5-1 毕业倒计时页面
- 项目目标（含思政元素）
- 知识储备
- 任务5.1 认识对象
- 5.1.1 认识面向过程与面向对象
- 【任务实践5-1】模拟洗衣机洗衣服——面向过程
- 【任务实践5-2】模拟洗衣机洗衣服——面向对象
- 5.1.2 对象的基本概念
- 1. 类的概念
- 2. 对象的概念
- 3. 对象的属性和方法
- 4. 面向对象的特征
- 5.1.3 JavaScript的对象框架
- 任务5.2 使用内置对象
- 5.2.1 Object对象类
- 5.2.2 Date对象类
- 1. 创建Date对象
- 2. Date对象的方法
- 【任务实践5-3】显示指定格式日期——Date对象方法
- 图5-4 读取当前的日期并在页面上显示出来
- 【任务实践5-4】计算已经度过的时光——getTime()方法
- 5.2.3 String对象类
- 1. 创建String对象
- 2. String对象的属性
- 图5-7 计算字符串的长度
- 3. String对象类的方法
- 【任务实践5-5】提取数字——charAt()方法
- 【任务实践5-6】将字符串反向并转换为大写形式——toUpperCase()方法
- 5.2.4 Array对象类
- 1. 数组定义
- 2. 创建数组对象
- 图5-17 两种创建方式的区别
- 3. 数组元素
- 【任务实践5-7】输出今天是星期几——Array对象
- 图5-18 页面显示星期几
- 4. 数组属性
- 图5-19 数组长度
- 5. 数组元素的访问
- 【任务实践5-8】输出十二生肖——for循环
- 图5-20 输出十二生肖
- 【任务实践5-9】输出十二生肖——for…in语句
- 6. 数组元素的添加和删除
- 【任务实践5-10】数组连接——concat()方法
- 图5-24 使用concat()方法将两个数组连接成一个数组
- 图5-27 splice()实现删除操作
- 7. 数组的排序
- 【任务实践5-11】数组元素升序排序——sort()方法
- 5.2.5 Math对象类
- 【任务实践5-12】计算圆的面积——Math对象属性
- 【任务实践5-13】求圆周率的4次方——Math.round()方法
- 【任务实践5-14】模拟抽奖过程——Math.random()方法
- 图5-35 模拟抽奖实现效果
- 5.2.6 Number对象类
- 【任务实践5-15】输出JavaScript能够处理的数值区间——Number对象
- 图5-36 输出JavaScript能够处理的数值区间示例
- 任务5.3 使用自定义对象
- 5.3.1 通过Object对象创建对象
- 【任务实践5-16】创建对象——Object对象类
- 图5-37 通过Object创建对象示例
- 5.3.2 通过字面量对象创建对象
- 【任务实践5-17】创建对象——字面量对象
- 5.3.3 通过构造函数创建对象
- 1. 使用this关键字
- 2. 使用function定义构造函数
- 3. 使用new关键字来创建构造函数
- 图5-38 使用new constructor()来创建对象的方法示例
- 图5-39 判断对象是否为指定类的实例示例
- 4. 类对象的prototype属性
- 图5-40 利用对象访问来自原型对象的属性和方法
- 【任务实践5-18】创建对象——构造函数
- 图5-41 创建对象——构造函数
- 5.3.4 通过Function对象定义方法
- 1. 显式地创建Function对象
- 【任务实践5-19】创建方法——显式创建Function对象
- 图5-42 通过Function对象显式地创建方法示例
- 2. 隐式地创建Function对象
- 【任务实践5-20】创建方法——隐式创建Function对象
- 5.3.5 通过原型对象定义方法
- 【任务实践5-21】访问共享方法——原型对象
- 图5-43 通过原型对象访问共享方法示例
- 5.3.6 通过for…in语句访问对象的属性
- 【任务实践5-22】遍历对象的属性——for…in语句
- 图5-44 for…in语句循环遍历对象的属性示例
- 5.3.7 通过with语句访问对象的属性和方法
- 【任务实践5-23】输出当前日期——with语句
- 5.3.8 继承
- 1. 父类与子类
- 2. call()方法
- 【任务实践5-24】子类拥有父类的属性和方法——继承
- 图5-46 子类拥有父类的属性和方法——继承
- 项目分析
- 项目实施
- 项目实训——模拟随机选人
- 【实训目的】
- 【实训内容】
- 【具体要求】
- 小结
- 图5-48 项目5任务分解
- 扩展阅读——ES6新增面向对象
- 习题
- 一、填空题
- 二、选择题
- 项目6
- 商品放大镜——DOM对象
- 情境导入
- 图6-1 商品放大镜效果
- 项目目标（含思政元素）
- 知识储备
- 任务6.1 认识DOM对象
- 6.1.1 DOM概述
- 1. 核心 DOM——针对任何结构化文档的标准模型
- 2. HTML DOM——针对 HTML 文档的标准模型
- 3. XML DOM——针对XML文档的标准模型
- 6.1.2 核心DOM
- 图6-2 核心DOM对象模型
- 【任务实践6-1】枚举Node对象——核心DOM对象
- 6.1.3 Document对象
- 任务6.2 认识HTML DOM
- 6.2.1 DOM树
- 6.2.2 HTML DOM节点类型
- 【任务实践6-2】节点类型——HTML DOM节点类型
- 6.2.3 HTML DOM对象分类
- 1. 节点对象
- 2. 元素对象
- 3. 文档对象
- 4. 特定类型的HTML元素对象
- 任务6.3 操作元素
- 6.3.1 获取HTML文档元素
- 【任务实践6-3】显示实时时间——document.getElementById()方法
- 图6-8 显示实时时间
- 6.3.2 获取元素的集合对象
- 【任务实践6-4】显示文档的所有标签——DOM集合对象
- 【任务实践6-5】全选购物车商品——document.querySelectorAll()方法
- 图6-10 全选购物车商品
- 6.3.3 改变元素样式
- 【任务实践6-6】隔行换色——设置元素样式
- 图6-11 隔行换色
- 6.3.4 改变元素内容
- 【任务实践6-7】显示当前日期和时间——innerHTML、innerText和textContent
- 图6-12 显示当前日期和时间
- 6.3.5 改变元素位置和大小
- 【任务实践6-8】商品放大镜的移动——offset系列属性
- 图6-16 放大镜移动
- 任务6.4 操作节点
- 6.4.1 节点关系
- 1. 子节点
- 图6-19 第一个子节点
- 2. 父节点
- 图6-20 通过parentNode获取父节点
- 图6-22 通过closest获取父节点
- 3. 兄弟节点
- 图6-23 兄弟节点
- 6.4.2 创建和添加节点
- 【任务实践6-9】列表移动——移动节点
- 6.4.3 复制和替换节点
- 【任务实践6-10】复制表单——复制节点
- 图6-28 复制前的效果
- 【任务实践6-11】替换内容——替换节点
- 6.4.4 删除节点
- 【任务实践6-12】删除水平线——删除节点
- 项目分析
- 图6-35 获取大图的位置
- 项目实施
- 1. 页面框架
- 2. CSS样式
- 3. 脚本代码
- 图6-36 商品未放大效果
- 项目实训——各地人口数据的折叠菜单
- 【实训目的】
- 【实训内容】
- 图6-37 人口普查数据显示效果
- 【具体要求】
- 小结
- 图6-38 项目6任务分解
- 扩展阅读——循环遍历
- 习题
- 一、填空题
- 二、选择题
- 项目7
- 故宫轮播图——BOM对象
- 情境导入
- 图7-1 故宫轮播图
- 项目目标 （含思政元素）
- 知识储备
- 任务7.1 认识BOM
- 图7-2 BOM对象体系
- 1. 设置定时器
- 2. 设置延时器
- 【任务实践7-1】实时变化的时钟——定时器
- 图7-3 实时变化的时钟
- 3. 打开和关闭窗口
- 【任务实践7-2】打开/关闭新窗口——open()方法
- 图7-6 关闭新窗口
- 4. 改变窗口大小
- 【任务实践7-3】改变窗口大小——resizeTo ()和resizeBy()方法
- 5. 改变窗口位置
- 【任务实践7-4】改变窗口位置——moveTo()和moveBy()方法
- 任务7.2 使用Screen对象
- 【任务实践7-5】显示当前屏幕分辨率和可用区域——Screen对象
- /
- 图7-15 显示屏幕信息
- 任务7.3 使用Navigator对象
- 【任务实践7-6】显示当前浏览器和操作系统信息——Navigator对象
- 图7-16 显示浏览器和操作系统信息
- 【任务实践7-7】显示当前窗口占据显示器的区域大小——Navigator对象
- 任务7.4 使用Location对象
- 【任务实践7-8】登录成功，自动跳转——Location对象
- 图7-18 自动跳转
- 任务7.5 使用History对象
- 【任务实践7-9】页面“前进”和“后退”——History对象
- 任务7.6 使用Document对象
- 【任务实践7-10】显示浏览某页面的时间——Document对象
- 图7-21 显示浏览当前页面的时间
- 项目分析
- 项目实施
- 1. 页面结构
- 2. CSS样式
- 3. 脚本代码
- 图7-26 故宫轮播图
- 项目实训——北斗三号发射动画
- 【实训目的】
- 【实训内容】
- 【具体要求】
- 小结
- 图7-29 项目7任务分解
- 扩展阅读——轮播图的Swiper插件
- 1. 引入swiper.min.js和swiper.min.css两个文件
- 2. 给Swiper定义宽度和高度
- 3. 初始化Swiper
- 4. 页面结构设置
- 习题
- 一、填空题
- 二、选择题
- 项目8
- 滑块验证码——事件和事件处理
- 情境导入
- 图8-1 滑块验证码
- 项目目标（含思政元素）
- 知识储备
- 任务8.1 认识事件
- 8.1.1 事件的基本概念
- 1. 事件
- 2. 事件处理和事件处理程序
- 3. 事件驱动和事件驱动编程
- 4. 事件分类
- 8.1.2 事件处理
- 1. 事件属性
- 2. 事件流
- 图8-2 冒泡事件的过程 图8-3 捕获事件的过程
- 3. 事件流的3个阶段
- 4. DOM 0级事件处理
- 【任务实践8-1】天干地支——行内绑定
- 【任务实践8-2】天干地支——动态绑定
- 5. DOM 2级事件处理
- 【任务实践8-3】天干地支——事件监听
- 任务8.2 认识事件对象
- 8.2.1 Event对象
- 【任务实践8-4】显示触发事件——Event对象
- 图8-10 显示触发事件
- 8.2.2 Event对象常用属性和方法
- 【任务实践8-5】显示触发事件名称——Event对象的属性
- 图8-11 显示触发事件名称
- 任务8.3 处理键盘事件
- 8.3.1 键盘事件
- 8.3.2 处理键盘事件
- 1. 处理字符键
- 图8-12 按下a键的触发事件过程
- 图8-13 按下A键的触发事件过程
- 【任务实践8-6】按键以上、下、左、右移动图片——处理字符键
- 图8-14 图片移动
- 2. 处理非字符键
- 图8-15 Alt键触发事件过程
- 【任务实践8-7】使用方向键改变图片大小——处理非字符键
- 图8-16 图片缩小
- 3. 处理组合键
- 图8-17 选择合适的事件
- 【任务实践8-8】取消组合键的全选功能——处理组合键
- 图8-18 取消组合键的全选功能
- 任务8.4 处理鼠标事件
- 8.4.1 鼠标事件
- 1. 鼠标点击事件
- 2. 鼠标移动事件
- 【任务实践8-9】鼠标指针滑过显示不同图形——鼠标指针移入和移出
- 8.4.2 处理鼠标事件
- 1. 鼠标按键对应的Event对象的button属性
- 【任务实践8-10】判断鼠标按键——Event对象的button属性
- 2. 鼠标指针的位置
- 【任务实践8-11】跟随鼠标移动的雪花——鼠标事件的位置属性
- 图8-22 雪花跟随鼠标移动
- 任务8.5 处理页面事件
- 8.5.1 页面加载
- 1. <body>元素绑定onload事件
- 图8-23 onload事件绑定<body>元素示例
- 2. <window>元素绑定onload事件
- 图8-24 onload事件绑定window元素示例
- 【任务实践8-12】网页加载时缩小图片——onload事件
- 图8-25 网页加载时对图片进行缩小设置示例
- 8.5.2 页面大小事件
- 【任务实践8-13】改变浏览器大小时弹出提示——onresize事件
- 图8-26 改变浏览器大小时弹出提示示例
- 任务8.6 处理文本编辑事件
- 【任务实践8-14】禁止使用复制、粘贴方式输入密码——复制、剪切和粘贴操作
- 任务8.7 处理表单事件
- 8.7.1 表单和表单对象
- 1. 定义表单
- 2. 文本框
- 3. 单选按钮
- 4. 复选框
- 5. 列表或菜单
- 6. 按钮
- 【任务实践8-15】会员注册表单——表单元素
- 图8-29 会员注册页面
- 8.7.2 访问表单和表单元素
- 1. 通过表单的ID来访问表单
- 图8-30 通过表单id属性访问表单示例
- 2. 通过表单名称来访问表单
- 图8-31 通过表单name属性访问表单示例
- 3. 通过表单标签名来访问表单
- 【任务实践8-16】随机生成指定位数的验证码——访问表单元素
- 8.7.3 操作表单对象
- 1. 禁用和启用表单对象
- 2. 表单对象获得和失去焦点
- 3. 提交表单
- 图8-40 表单提交示例
- 4. 重置表单
- 5. 表单验证
- 【任务实践8-17】验证表单合法性——表单验证
- 项目分析
- 项目实施
- 1. 页面框架
- 2. CSS样式
- 3. 脚本代码
- 图8-45 滑块验证成功
- 项目实训——选项卡切换
- 【实训目的】
- 【实训内容】
- 图8-46 选项卡切换
- 【具体要求】
- 小结
- 图8-47 项目8任务分解
- 扩展阅读——事件流
- 习题
- 一、填空题
- 二、选择题
- 项目9
- 异步获取用户信息——AJAX技术
- 情境导入
- 图9-1 XML数据显示
- 项目目标（含思政元素）
- 知识储备
- 任务9.1 认识AJAX
- 9.1.1 XMLHttpRequest对象
- 1. 创建 XMLHttpRequest 对象
- 2. 低版本IE的兼容问题
- 9.1.2 XMLHttpRequest对象的常用属性
- 9.1.3 XMLHttpRequest对象的常用方法
- 9.1.4 AJAX请求
- 1. 创建对象
- 2. 建立连接
- 3. 发送请求
- 4. 接收数据
- 【任务实践9-1】读取文本文件信息——AJAX异步获取文件
- 图9-2 1.txt文件
- 任务9.2 AJAX处理数据
- 9.2.1 AJAX处理文本数据
- 【任务实践9-2】读取“健走的好处”页面——AJAX异步获取HTML文件
- 图9-5 显示结果
- 9.2.2 AJAX处理XML数据
- 【任务实践9-3】读取学生信息——AJAX异步获取XML数据
- 图9-6 XML文件
- 图9-7 控制台输出结果
- 9.2.3 AJAX处理JSON数据
- 图9-8 JSON数据格式
- 【任务实践9-4】读取信息——AJAX异步获取JSON文件数据
- 图9-9 在控制台中输出结果
- 任务9.3 AJAX与服务器数据交互
- 9.3.1 与PHP服务器交互
- 1. PHP服务器环境搭建
- 图9-12 PhpStudy官网首页
- 图9-15 PhpStudy服务器启动成功
- 2. Visual Studio Code集成开发环境搭建
- 图9-16 Visual Studio Code的启动界面
- 图9-19 单击“PHP Server: Reload Sever”命令
- 【任务实践9-5】验证表单用户名（一）——AJAX访问PHP服务器
- 图9-20 Visual Studio Code环境中的文件目录及代码
- 图9-21 Visual Studio Code环境中的前端代码
- 图9-22 Visual Studio Code运行程序
- 图9-23 浏览器运行结果
- 9.3.2 与Java服务器交互
- 1. Tomcat服务器环境搭建
- 图9-24 Tomcat的目录结构
- 图9-25 “Tomcat”窗口
- 图9-26 Tomcat主页面
- 2. Eclipse和IDEA集成开发环境
- 图9-27 Eclipse启动后的操作界面
- 图9-28 IDEA启动后的操作界面
- 【任务实践9-6】验证表单用户名（二）——AJAX访问Java后台服务器
- 图9-29 “Preferences”窗口
- 图9-30 在pom.xml中添加Servlet依赖
- / 项目分析
- 项目实施
- 图9-33 程序框架目录
- 项目实训——获取宿舍学生信息
- 【实训目的】
- 【实训内容】
- 图9-34 获取宿舍学生信息
- 【具体要求】
- /小结
- 图9-35 项目9任务分解
- 扩展阅读——jQuery 实现AJAX
- 习题
- 一、填空题
- 二、选择题
- 项目10
- 综合项目——学生成绩查询
- 情境导入
- 图10-1 显示学生成绩
- 项目目标（含思政元素）
- 项目分析
- 项目实施
- 图10-2 数据表中的学生成绩记录
- 图10-3 在IDEA中选择模板
- 图10-4 配置项目
- 图10-5 程序框架结构
- 图10-8 创建Druid数据库连接池连接工具类
- 图10-9 在dao层创建StuDao类
- 图10-10 在com.ryjiaoyu.servlet层中创建AjaxServlet
- 图10-11 实现AJAX无须刷新获得后台数据
- /小结
展开全部
JavaScript前端开发程序设计项目式教程（微课版）（第2版）是2022年由人民邮电出版社出版,作者李玉臣。
版权说明：本电子书已获得正版授权，由出版社通过知传链发行。
得书感谢您对《JavaScript前端开发程序设计项目式教程（微课版）（第2版）》关注和支持，如本书内容有不良信息或侵权等情形的，请联系本网站。
