情境九 使用JavaScript制作交互页面（教案）-《网页设计与制作》同步教学（电子工业版）

情境九 使用JavaScript制作交互页面 课程名称 网页设计与制作 学时 授课时间 授课章节 情境九 使用JavaScript制作交互页面 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握JavaScript语法基础 2、 掌握并能运用JavaScript对象和函数 3、 掌握BOM对象，掌握并能运用DOM对象 4、 掌握并运用JavaScript的事件处理 5、 能使用JavaScript开发交互效果 实际操作技能 1、 握JavaScript基础语言，能正确选择数据类型、设置变量 2、 掌握函数、面向对象功能的使用，能正确使用JavaScript对象和DOM编程 思政元素目标 1、 培养学生的职业素养，提高学生的审美观 知识、技能重点 1、 握JavaScript基础语言，能正确选择数据类型、设置变量 2、 掌握函数、面向对象功能的使用，能正确使用JavaScript对象和DOM编程 知识、技能难点 1、 握JavaScript基础语言，能正确选择数据类型、设置变量 2、 掌握函数、面向对象功能的使用，能正确使用JavaScript对象和DOM编程 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 9.1行为的基本概念及应用 JavaScript的基本概念 JavaScript的应用 9.2模仿型任务讲解 创建并规划站点 创建网页文档 9.3开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：说说你所看过的网页特效有哪些？ 2、展示多个加入了特效的网页； 3、教学目的：掌握在网页中添加行为的方法，并能熟练的修改行为；掌握在网页中使用AP元素的方法。 【讲授新课】 知识储备 1.1学习路线，如图9.1 图9.1 JavaScript学习路线 1.2 知识小天地 JavaScript的组成 一个完整的JavaScript实现由三部分组成：核心（ECMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）。 （1）核心（ECMAScript） ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或Jscript，但实际上后两者是ECMA-262标准的实现和扩展。 ECMAScript定义语言的基础，规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象、js、nodejs都实现了ECMAScript。 （2）文档对象模型（DOM） 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。当网页被加载时，浏览器会创建页面的文档对象模型。 （3）BOM 浏览器对象模型（Browser Object Model）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作。 JavaScript的引用 （1）使用<script></script>标签 在 HTML 页面的 body标签 或者head标签中，例如： <head> <script> alert("第一个 JavaScript"); </script> </head> （2）引用外部的js文件 外部的js文件可以被多个网页使用， JavaScript文件的文件扩展名是.js。通过 <script> 标签的 "src" 属性中设置该外部js 文件： <head> <script src="myScript.js"></script> </head> JavaScript语法 （1）区分大小写：JavaScript是区分大小写的语言。也就是说，关键字、变量、函数名和所有的标识符(identifier）都必须采取一致的大小写形式。比如，关键字“while”必须写成“while”，而不能写成“While”或者“WHILE”；变量“name”和“NAME”时不一样的。 （2）结尾分号可选：和其他许多编程语言一样，JavaScript使用分号“;”作为语句的结束，这对增强代码的可读性和整洁性是非常重要的。 在JavaScript中，如果语句各自独占一行，通常可以省略语句之间的分号，最好的编码习惯时加入分号。以下写法均正确： var name1 = "xiaowang" var name2 = "xiaoli"; 注意：如果将代码写在一行上，则分号不能省略，如下第一个语句结束后的分号不能省略： var name1 = "xiaowang"; var name2 = "xiaoli"; （3）注释：JavaScript支持两种格式的注释：单行注释和多行注释。 单行注释以双斜杠开头（//），// 之后的文本都会被JavaScript当做注释忽略掉的。 多行注释在 /* 和 */ 之间的文本也会当做注释，这种注释可以跨行书写，但不能有嵌套的注释。下面都是合法的注释： //这是单行注释的内容 /* 这是多行注释 * 这是注释的第二行 */ （4）代码块：一段完整的代码块是要写在{ 和 }中间。如下代码所示： if(name1 = "xiaowang"){ document.write(name1); } JavaScript中的关键字 Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。 JavaScript保留关键字如下表： break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try return JavaScript变量、类型和声明 在JavaScript中，变量是存储数据值的容器，如下所示，其中x、y和z都是变量： var x = 1; var y = 2; var z = y-x; JavaScript的数据类型分为两类：原始数据类型和引用数据类型。 原始数据类型(基本类型):数字（Number）、字符串（String）、布尔值（Boolean）、空（Null）、未定义（Undefined）。 注意：字符串被包围在双引号或单引号中，数值不用引号。如果把数值放在引号中，会被视作文本字符串。 布尔（逻辑）只能有两个值：true 或 false。 引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。 在 JavaScript 中通过var关键词来声明变量： var name; 声明之后，变量是没有值的，它的值默认是undefined；如需赋值给变量，可以在声明变量时向它赋值： var name = "xiaoming"; 在上面的例子中，我们创建了名为 name 的变量，并向其赋值"xiaoming"。 也可以在一条语句中声明许多变量，以逗号分隔变量，如： var name = "xiaoming", age = 18; JavaScript 标识符 JavaScript变量必须以唯一的名称进行标识，这些唯一的名称就是标识符。 标识符可以是短名称（比如 x 和 y），或者使用见名知意的名称（如：age、name、count等）。 标识符的命名规则： · 可以包含字母、数字、下划线和美元符号 · 不能以数字开头（建议使用字母开头） · 对大小写敏感（a 和 A 是不同的变量） · 保留关键字不能用作变量名称 JavaScript全局属性 属性 描述 Infinity 代表正的无穷大的数值。 NaN 指示某个值是不是数字值。 undefined 指示未定义的值。 （1）Infinity 属性用于存放表示正无穷大的数值，无穷大可以是正数也可以是负数（负无穷大-Infinity），可以调用isFinite()方法来判断概一个数是否是有穷的。 （2）NaN即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。NaN 属性 与 Number.Nan 属性相同。 可以使用isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。 （3）undefined 属性用于存放 JavaScript 中未定义的值。例如： var num1=""; var num2; JavaScript运算符 JavaScript运算符包括赋值运算符、算术运算符、比较运算符、逻辑运算符、一元运算符、二元运算符和三元运算符，此外，运算符之间存在优先级。 （1）赋值运算符 赋值运算符用于给 JavaScript 变量赋值，给定x=10和y=5，下面的表格解释了赋值运算符： 运算符 例子 等同于 运算结果 = x=y   x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 （2）算术运算符 y=5，下面的表格解释了这些算术运算符： 运算符 描述 例子 X运算结果 X运算结果 + 加法 x=y+2 7 5 - 减法 x=y-2 3 5 * 乘法 x=y*2 10 5 / 除法 x=y/2 2.5 5 % 取模（余数） x=y%2 1 5 ++ 自增 x=++y 6 6 x=y++ 5 6 -- 自减 x=--y 4 4 x=y-- 5 4 （3）比较和逻辑运算符 比较运算符在逻辑语句中使用，以测定变量或值是否相等。给定x=5，下面的表格解释了比较运算符： 运算符 描述 比较 返回结果 == 等于 x==8 false x==5 true === 绝对等于（值和类型均相等） x==="5" false x===5 true !=  不等于 x!=8 true !==  不绝对等于（值和类型有一个不相等，或两个都不相等） x!=="5" true x!==5 false >  大于 x>8 false <  小于 x<8 true >=  大于或等于 x>=8 false <=  小于或等于 x<=8 true 逻辑运算符用于测定变量或值之间的逻辑。给定 x=6 以及 y=3，下表解释了逻辑运算符： 运算符 描述 例子 返回结果 && and，逻辑与 (x < 10 && y > 1) True || or，逻辑或 (x==5 || y==5) False ! not，逻辑取反 !(x==y) True 此外，JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符，即条件运算符： 变量名=(条件)?值1:值2； 如果变量 score的值小于60，则向变量 result赋值 "不合格"，否则赋值 "合格"。 result=(score<60)?"不合格":"合格"; JavaScript分支循环 （1）if条件语句，语法格式如下： if (条件 1) { 条件 1 为 true 时执行的代码块 } else if (条件 2) { 条件 1 为 false 而条件 2 为 true 时执行的代码块 } else { 条件1和条件2同时为 false 时执行的代码块 } 练一练：成绩大于90输出成绩优秀，大于70输出良好，大于60输出合格，否则输出不合格： 代码如下： var score = 80; if(score>90){ document.write("优秀"); }else if(score>70){ document.write("良好"); }else if(score>60){ document.write("合格"); }else{ document.write("不合格"); } （2）switch语句，语法格式如下： switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 } 练一练：getDay()方法返回0至6之间的周名数字，即0代表周日，根据该方法获得的值，输出当前是星期几 代码如下： var x = new Date().getDay(); switch (x) { case 0: day = "星期天"; break; case 1: day = "星期一"; break; case 2: day = "星期二"; break; case 3: day = "星期三"; break; case 4: day = "星期四"; break; case 5: day = "星期五"; break; case 6: day = "星期六"; break; } document.write("今天"+day); （3）for 循环，语法格式如下： for (语句 1; 语句 2; 语句 3) { 要执行的代码块 } 其中：语句1在循环（代码块）开始之前执行； 语句2定义运行循环（代码块）的条件； 语句3会在循环（代码块）每次被执行后执行。 在for循环种会使用两个关键字控制循环： · continue：跳过本次循环，继续下一次循环； · break：跳出整个循环，循环结束。 练一练：偶数输出*，奇数输出+ 代码如下： for(var i=0;i<=10;i++){ if(i%2==0){ document.write("*"); continue; } document.write("+"); } （4）for/in语句用于遍历对象的属性，对象将在后续内容讲解，语法格式如下： for (键 in 对象) { 要执行的代码块 } 练一练：创建一个学生对象，并输出。 代码如下： var stuInfo = { stuName:"LinDa", stunId:"2022", age:17, }; var stu = ""; var key; for (key in stuInfo) { stu += stuInfo[key]; } document.write(stu); （5）while循环，语法格式如下： while(表达式) { 要执行的代码块 } 只要表达式为真，即可进入循环体。 练一练：计算1+2+3+…+100的和，并输出。 代码如下： var i = 1; var sum=0; while(i<=100){ sum+=i; i++; } document.write("1+2+3+…+100的和是："+sum); （6）do-while循环，语法格式如下： do{ 要执行的代码块 } while(表达式) 在检查条件是否为真之前，该循环会先执行一次代码块，然后只要表达式为真就会重复循环。 练一练：计算1+2+3+…+100的和，并输出。 代码如下： var i = 1; var sum=0; while(i<=100){ sum+=i; i++; } document.write("1+2+3+…+100的和是："+sum); JavaScript数组 数组对象是使用单独的变量名来存储一系列的值。创建一个数组，有三种方法： （1）常规方式：使用new关键字创建一个Array对象，可直接在内存中创建一个数组空间，然后向数组中添加元素。如下： //创建数组myCars，并赋值 var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW"; //创建数组myCars，并指定数组长度 var myCars=new Array(3); （2）简洁方式：使用new创建一个Array对象的同时为数组赋值。如下： var myCars=new Array("Saab","Volvo","BMW"); （3）字面：不用new，直接用[]声明一个数组，同时可以直接赋值。如下： var myCars=["Saab","Volvo","BMW"]; JavaScript数组的操作 （1）JavaScript中数组包含的属性如下表： 属性 描述 constructor 返回创建数组对象的原型函数。 length 设置或返回数组元素的个数。 prototype 允许你向数组对象添加属性或方法。 （2）JavaScript中数组包含的方法如下表： 方法 描述 concat() 连接两个或更多的数组，并返回结果。 indexOf() 搜索数组中的元素，并返回它所在的位置。 isArray() 判断对象是否为数组。 join() 把数组的所有元素放入一个字符串。 lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。 pop() 删除数组的最后一个元素并返回删除的元素。 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 reverse() 反转数组的元素顺序。 shift() 删除并返回数组的第一个元素。 slice() 选取数组的一部分，并返回一个新数组。 sort() 对数组的元素进行排序。 splice() 从数组中添加或删除元素。 toString() 把数组转换为字符串，并返回结果。 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 valueOf() 返回数组对象的原始值。 练一练：属使用push()方法给数组myCars追加一个元素 var myCars=new Array(); myCars[1]="Volvo"; myCars[2]="BMW"; myCars.push("Saab"); 数组的遍历 数组的遍历方式可以有多种方式，下面介绍两种遍历方式。 方式一：for循环，也是最常见的 var myCars=new Array("Saab","Volvo","BMW");、 //通过数组属性lenght获取数组长度 var length=myCars.length; for(var i=0;i<length;i++){ document.write(myCars[i]); } 方式二：for......in 遍历数组 var myCars=new Array("Saab","Volvo","BMW");、 for(key in myCars){ document.write(myCars[key]); } JavaScript中的字符串 字符串可以存储一系列字符，如 "Hello world"。字符串可以是插入到引号中的任何字符，可以使用单引号或双引号，如： var carName = "Volvo XC60"; var carName = 'Volvo XC60'; 注意：字符串可以是对象。 通常， JavaScript 字符串是原始值，可以使用字符创建，如： var carName = "Volvo XC60"; 但也可以使用 new 关键字将字符串定义为一个对象，如： var carName = new String("Volvo XC60") 字符串属性如下表： 属性 描述 constructor 返回创建字符串属性的函数 length 返回字符串的长度 prototype 允许您向对象添加属性和方法 字符串方法如下表： 方法 描述 charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串，返回连接后的字符串 fromCharCode() 将 Unicode 转换为字符串 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 localeCompare() 用本地特定的顺序来比较两个字符串 match() 找到一个或多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLowerCase() 把字符串转换为小写 toString() 返回字符串对象值 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白 valueOf() 返回某个字符串对象的原始值 JavaScript中的正则表达式 正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。 正则表达式可以是一个简单的字符（如字符a-z），或一个更复杂的模式，可用于所有文本搜索和文本替换的操作。 语法格式如下： /正则表达式主体/修饰符(可选) 1.正则表达式模式 （1）方括号用于查找某个范围内的字符 表达式 描述 [abc] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。 （2）元字符是拥有特殊含义的字符 表达式 描述 \d 查找数字。 \s 查找空白字符。 \b 匹配单词边界。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 （3）量词 表达式 描述 n+ 匹配任何包含至少一个 n 的字符串，可用{1,}代替。 n* 匹配任何包含零个或多个 n 的字符串，可用{0,}代替。 n? 匹配任何包含零个或一个 n 的字符串，可用{0,1}代替。 {n} 匹配n次 {n,} 至少匹配n次 {n,m} 最少匹配n次且最多匹配m次 （4）定位符 表达式 描述 ^ 匹配输入字符串的开始位置（以***开始）。 $ 匹配输入字符串的结束位置（以***结尾）。 \b 匹配一个单词边界 \B 匹配非单词边界 2.正则表达式修饰符 修饰符可以在全局搜索中不区分大小写，如下表 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 3.正则表达式所用的方法 在JavaScript中，正则表达式有两种使用方法，即字符串方法和正则对象方法。 （1）字符串方法如下表所示： 方法 描述 search() 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。 match() 找到一个或者多个正则表达式的匹配 replace() 替换与正则表达式匹配的字符串 split() 将字符串分割为字符串数组 （2）正则对象（regExp）方法，如下表所示： 方法 描述 test() 该方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false exec() 该方法用于检索字符串中的正则表达式的匹配，该函数返回一个数组，存放匹配的结果。如果未找到匹配，则返回null。 练一练：使用search（）方法匹配任一数字 var phone = "我的电话是13807910001"; var reg = /[0-9]{11}/; document.write("匹配结果是："+phone.search(reg)); 输出结果为：匹配结果是：5 练一练：使用test（）方法检测邮箱格式是否正确。 思路分析：假设邮箱为xiaoming001@qq.com （1）分析邮件名称部分 可能是26个大小写英文字母表示为a-zA-Z，数字表示为0-9，下划线表示为 _ ，中划线表示为 - 等组成，由于名称是由若干个字母、数字、下划线和中划线组成，所以需要用到+表示多次出现  根据以上条件得出邮件名称表达式：[a-zA-Z0-9_-]+ （2）分析域名部分  一般域名的规律为“[N级域名][三级域名.]二级域名.顶级域名”，比如“qq.com”、“www.qq.com”、“126.com”等，分析可得域名类似“** .** .** .**”组成。 “**”部分可以表示为[a-zA-Z0-9_-]+； “.**”部分可以表示为\.[a-zA-Z0-9_-]+； 多个“.**”可以表示为(\.[a-zA-Z0-9_-]+)+； 综上所述，域名部分可以表示为[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+。 由于邮箱的基本格式为“名称@域名”，需要使用“^”匹配邮箱的开始部分，即名称部分；用“$”匹配邮箱结束部分以保证邮箱前后不能有其他字符，所以最终邮箱的正则表达式为：   ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$ var email = "xiaoming001@qq.com"; var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$;/ document.write("匹配结果是："+reg.test(email)); 输出结果为：匹配结果是：true JavaScript函数 在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。 （1）函数语法 语法格式如下： function 函数名() {    // 执行代码 } 函数就是包裹在花括号中的代码块，前面使用了关键词 function，当调用该函数时，会执行函数内的代码。 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript在任何位置进行调用。 注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。 （2）带参数的函数 在调用函数时，也可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以包含任意多的参数，由逗号“ , ”分隔，例如： function myFunction(参数1,参数1) {    // 执行代码 } 练一练：点击按钮弹出hello World！ <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">确定</button> </body> </html> （3）带有返回值的函数 可以使用函数将值返回调用它的地方，通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。 语法格式如下： function myFunction() {     var x=5;     return x; } 上面的函数会返回值 5。 注意：整个JavaScript并不会停止执行，仅仅是函数停止。JavaScript 将继续执行代码，从调用函数的地方。 JavaScript事件 JS事件指在浏览器窗体或者HTML元素上发生的，可以触发JS代码块运行的行为。例如，当用户按下鼠标或者提交一个表单的时候，会触发相应的事件。 事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件相关联，当与页面特定部分相关联的事件发生时，事件处理器就会被调用。 常用的事件类型有窗口事件、鼠标事件、键盘事件、文本事件等。 （1）窗口事件 窗口事件是指当用户与页面其他元素交互时触发的事件，如页面加载完成可以触发事件，以及改变窗口大小可以触发事件等。窗口事件主要包括load、unload、abort、error、select、resize、scroll事件。 【练一练】窗口事件练习 图9.2 示例代码 图9.3　运行效果 （2）鼠标事件 鼠标事件主要是鼠标操作所触发的事件，如鼠标单击、双击、单击按下、单击抬起、鼠标滑过等状态都有相应的触发事件。鼠标事件是Web开发中最常用的一类事件，因为鼠标是最主要的定位设备。 鼠标的具体事件如下表所示： 方 法 描 述 click 用户单击鼠标左键或者按 Enter 键触发 dbclick 用户双击鼠标左键触发 mousedown 在用户按下任意鼠标按钮时触发 mouseenter 在鼠标光标从元素外部首次移动到元素范围内时触发，不冒泡 mouseleave 元素上方的光标移动到元素范围之外时触发，不冒泡 mousemove 光标在元素的内部不断移动时触发 mouseover 鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发 mouseout 用户将光标从一个元素上方移动到另一个元素时触发 mouseup 在用户释放鼠标按钮时触发 mousewheel 滚轮滚动时触发 【练一练】鼠标事件综合练习 图9.4 代码-1 图9.5 代码-2 图9.6 代码-3 图9.7代码-4 图9.8 运行效果 （3）键盘事件 键盘事件就是有关键盘操作所触发的事件，主要包括按下键盘的字符键、按下任意键、键盘抬起时触发的事件。 键盘事件如下表所示： 方 法 描 述 keydown 当用户按下键盘上的任意键时触发。按住不放，会重复触发 Keypress 当用户按下键盘上的字符键时触发。按住不放，会重复触发 keyup 当用户释放键盘上的键时触发 【练一练】移动黑方块 图9.9 示例代码 图9.10 运行效果 （4）事件冒泡与捕获 事件发生会产生事件流。DOM结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可以称为DOM事件流。事件冒泡是指从叶子节点沿祖先节点一直向上传递直到根节点，基本思路是事件按照从特定的事件目标开始到最不特定的事件目标，子级元素先触发，父级元素后触发。事件捕获与事件冒泡则相反，由DOM树最顶层元素一直到最精确的元素，父级元素先触发，子级元素后触发。 div body document div body document 冒泡型事件传播 捕获型事件传播 【练一练】事件冒泡与捕获 图 9.11 代码-1 图 9.12 代码-2 图9.13 运行效果 二、模仿型任务讲解 2.1 制作交互式注册页面 在设计网站或者APP的注册页面时，需要考虑的因素比较多，一个优秀的登录页面设计，能够在很大程度上提升用户的转化。 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表9-1 资讯单 交互式注册界面的设计与制作 学习情景 制作包含事件的注册页面 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.2交互式注册界面的设计与制作案例分析 案例学习目标 · 能够熟练使用事件 · 能够熟练使用函数 案例知识要点 · 函数的定义 · 焦点事件的使用 实现探究 2.3 案例设计思路 在具体实现过程中，可以参考知名网站的注册页面的设计效果，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作。 具体设计思路如下： 图9.14 页面设计 【思考】 （1）如何使用表单标签和表格标签进行嵌套？ （2）如何利用CSS美化表单？ （3）如何设置焦点事件、如何利用函数生成验证码？ 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图所示对话框： 图9.15 创建项目 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 插入表单标签，并在表单标签里面嵌套一个六行两列的表格，如下图： 图9.16 Step03 将最后一行的两个单元格进行合并，用来放置按钮，如图所示： 图9.17 Step04 为表格添加标题，并在每个单元格中，分别写入相应的表单内容，代码如下： 图9.18 图9.19 图9.20 图9.21 Step05 运行效果如图所示： 图9.22 Step06 接下来，使用CSS美化表单，因为<font id="namenote"></font>和<font id="pwdnote"></font>是获得焦点才显示内容，字体颜色设置为红色，具体样式如下： 图9.23 Step07 写好后保存，最表格和表格的标题进行修饰，表格的border设置属性为０，其他样式如下： 图9.24 Step08 为两个按钮添加样式，如下图： 图9.25 Step08 接下来是验证码的样式<span id="ran">16hf</span>，以及验证码后面“刷新”的样式，如下图： 图9.26 Step09 开始事件的编写，首先是焦点事件，分别在用户名的输入框和密码的输入标签中，各添加两个带参数的方法，一个是获取焦点的方法，一个是失去焦点的方法，如下图： 图9.27 Step09 开始事件的编写，首先是焦点事件，分别在用户名的输入框和密码的输入标签中，各添加两个带参数的方法，一个是获取焦点的方法，一个是失去焦点的方法，如下图是用户名的输入框的焦点事件，密码框类似： 图9.28 Step09 实现验证码，代码如下如所示： 图9.29 Step10 最终效果图如下，当用户名输入框获取焦点的时候，会提示相应的红色文字；点击刷新，验证码会更新： 图9.30 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表9-2所示 表9-2 开放型任务卡 任务编号 09-2 任务名称 制作包含事件的注册页面 网页主题 交互式注册界面 开放型任务描述 1、创建一个命名为“交互式注册界面”的站点。 2、在网页index.html中编写JavaScript程序，实现以下网页特效。 3、使用window.onload实现加载页面的时候，直接生成一个验证码。 【课堂小结】 本次任务讲述了AP Div元素的属性及作用，时间轴使用的方法和行为面板的使用。通过这三部分内容的学习，使读者掌握常用的网页特效添加方法，尤其是“行为”的使用，可以方便地创建多种互动特效，提高页面的交互性。 【布置作业】 1. <marquee>标签常用的属性有哪些？ 2. 行为是什么？它由哪几部分组成？ 3. 在“动作”菜单中灰色的菜单项代表什么意思？ 【创新型任务】 分小组选择制作科技强国、红色之旅、绿水青山为主题的包含特效的网页。通过推送学习强国学习视频的绿水青山栏目、科技栏目、看党史的红色故事栏目，搜集相关包含特效的网页素材，分小组设计科技强国、红色之旅、绿水青山的包含特效的网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生不断自我完善的工匠精神和创新精神。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)学会编写简单的JavaScript程序 (3)掌握 JavaScript的基本语法 (4)熟练运用JavaScript技术设计常见的网页特效 能力考核 (5)能灵活运用特效到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$