《《网站前端技术》教案第22课JavaScript基础（五）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第22课JavaScript基础（五）.docx（17页珍藏版）》请在三一办公上搜索。
1、LO-.!e5*.三z1点.、U*型.源口三年W&“隹一:e三三?-J4虻gH课题.W.r,-k.、22iJavaScriptgfi(5)|课时2课时(90min)教学目标知识技能目标：（1）理解正则表达式，掌握常见的正则表达式和相关方法（2）掌握DOM的常用方法素质目标：掌握JavaScript的相关知识，增加学生的知识储备教学重难点教学重点：正则表达式、文档对象模型IX）M教学难点：文档对象模型DOM教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（33min）一头脑风暴（5
2、min）第2节课：问题导入（3min）一传授新知（3Omin）一上机操作（7min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解正则表达式与文档对象模型DOM的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是正则表达式？【学生】思考、举手回答【教师】通
3、过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（33min）4.11正则表达式【教师】讲解正则表达式的组成与相关方法正则表达式又称规则表达式，它描述了字符串匹配的模式，可以用来检查字符串是否含有某种子串、将匹配的子串替换或从某个字符串中取出符合某条件的子串等。4.11.1 正则表达式的组成【课堂互动】通过教师讲解、课堂互动、演示操作等方式，使学生了解常见的正则表达式和相关方法，以及部分DOM常用的方法【教师】提问正则表达式由哪些内容组成?+【学生】聆听、思考、回答正则表达式是由普通字符(如字符az)和特殊字符(称为元字符)组成的文本模式，其语法格式如
4、下：/匹配对象的文本模式(正则表达式)/正则表达式中主要包含匹酉嗨、限定符、定位符、转义符等.1 .匹配符匹酉嗨用于匹配某个或某些字符。在正则表达式中，使用一对方括号括起来的内容，称为字符簇，表示一个范围。实际匹配时，匹配这个范围内的某个字符。a-z：匹配4号字母az中的任意一zik字符。A-Z：匹配大写字母AZ中的任意一个字符。0-9：匹配数字09中的任意一个字符，相当于d(匹配一个数字字符)。(详见教材)【提示】在字符簇中，存在Tl三符号称为脱字符，表示取反的意思。【示例4-11-1】在HTML文档script标签内输入以下代码：varstr=133s3123456;varreg=/0-9
5、/;document,write(sir.search(reg);效果：页面中弹出第一个非数字字符的索引位置3。【提示】程序中，sir.search(reg)表示在字符串str中找一个非数字字符，若找到，则返回该字符在字符串中的索引；若没有找到，则返回L2 .限定符限定符用于指定正则表达式的一个匹配字符串必须要匹配多少次。*：匹配零次或者多次，可以使用0,代替。+：匹配1次或者多次，可以使用1.代替。?：匹配0次或者1次,可以使用0,1代替。n：匹配n次。n,:至少匹配n次。11,m)：至少匹配n次且最多匹配m次.【示例4-11-2】在HTML文档scrips标签内输入以下代码：VarteI=
6、电话号码：13333123456;varreg=/(dll/document,write(tel.search(reg);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示【学生】聆听、上机操作、演示效果：页面中弹出Il个连续数字字符的起始索引位置5。【提示】在匹配字符串时，一个中文字符和一个英文字符均算一个字符。正则表达式7dll 表示匹配Il个连续的O 9中的数字。Mtel.search(reg)H表示 返回字符Iel中11个连续数字字符的起始索引位置,索引位置从O算起。若程序确定Id中 存在连续H个数字字符，则返回数字的起始索引；否则返回7.3.定位符【课堂互动】【教
7、师】提问定位符可用于正则表达式中的哪些位置？【学生】聆听、思考、回答定位符用于将一个正则表达式定位在字符串的开始或结束位置进行匹配，也用于在单词内或在单词的开始或结尾处进行匹配。：定位在字符串的开始位置进行匹配。$:定位在字符串的结束位置进行匹配。b:匹配一个单词的分界线(如字符串开头、结尾、空格、逗号、点号等)VB:匹配一个单词的非分界线。【示例4-11-3】在HTML文档VSCriPl标签内输入以下代码：varStr=2021-4-10;varreg=dH4-Idl,2-dJl,2S;document.write(reg.test(str);效果：页面中弹出“true”.【提示】程序中，正
8、则表达式AdH4)-dl,2Hdn,2W表示在字符串开头匹配4个连续的09中的数字，后接一个符号”，再接1个或2个数字，再接一个符号，再接1个或2个数字。其实，该正则表达式用于判断一个字符串表示的是否是日期格式。(详见教材)4.转义符正则表达式中有许多特殊字符，如、+、？、人、人、$等，若想要匹配这些特殊字符，则必须使用转义符进行转义，即将转义符T放在特殊字符前面。这样就可以取消特殊字符的功能，从而对这些特殊字符进行匹配。【示例4-11-4在HTML文档VSCriPl标签内输入以下代码：VarStr=F脱字符功能介绍”；varreg=/J;document.write(reg.test(str
9、);效果：页面中弹出true。【提示】uw表示匹配字符串中的一个脱字符。4.11.2正则表达式相关方法在JaVaSCriPt中，正则表达式对象有两种方法，即字符串方法和正则对象方法。1.字符串方法search()：检索与正则表达式相匹配字符串的索引。*match():找到一个或者多个正则表达式的匹配结果。replace():替换与正则表达式匹配的字符串.2.正则对象方法IeSlo:检测一个字符串是否匹配某个正则表达式。如果字符串中含有匹配的文本，则返回true；否则返回false。exec():检索字符串中的正则表达式匹配，返回一个数组,存放匹配的结果。如果字符串中含有检索的文本，则返回检索结
10、果；否则结果为null。【学生】聆听、记录、理解4.12文档对象模型DOM【教师】讲解DOM获取元素、获取和修改HTML内容、直看和修改DOM元素CSS属性的具体方法文档对象模型(documentobjectmodel,DOM)是由W3C(万维网联盟)组织定义的一个标准。【课堂互动】【教师】提问DOM有什么作用？【学生】聆听、思考、回答创建一个网页并将该网页添加到网站中时，DOM就会根据这个网页创建一个文档，该文档是元素与内容的数据集合。此外，DOM会将文档解析为树状结构，并以树节点的方式表示文档中的各种内容。例如，现有一个HTML文档，内容如下：标题内容二号标题段落内容【教师】PPt展示图片
11、“文档的DOM树”(详见教材)，并讲解通过Dc)M,JavaScripi能够获取、修改、添加、删除HTML文档的元素、属性、CSS样式，还能够创建新的HTML事件并对页面中所有已有的HTML事件作出反应，从而创建动态网页，实现互动操作。4.12.1获取对象【课堂互动】【教师】提问在JavaScript中，可以如何引用获取元素？【学生】聆听、思考、回答在JaVaSCriPl中，引用获取元素方法的语法格式如下：document.方法名称(元素名称)在JaVaSCriPI中，可以通过不同方法获取指定元素，详细介绍如下。getElementById(),根据元素id获取元素,其语法格式如下：docum
12、ent.getElementById(id名称)geiElementsByTagName(),根据标签名获取元素组，其语法格式如下：document.getElementsByTagName(标签名称)。getElemenlsByClassName(),根据类名获取元素组，其语法格式如下：document.getElementsByClassName(类名称querySelectorAll(),根据CSS选择器名获取元素组,其语法格式如下：documeni.querySelectorA11(i器名称根据表单名获取表单，其语法格式如下：document.表单名称根据表单控件名获取控件，其语法格式
13、如下：表单对象.控件名称【提示】获取元素的方法只能在网页加载到窗口之后使用即只能在window.onload事件中使用.4.12.2获取和修改HTML内容【课堂互动】【教师】提问通过MnerHTML属性，如何获取HTML元素内容？【学生】聆听、思考、回答通过innerHTML属性获取HTML元素内容的语法格式如下：元素名称InnerHTML通过innerHTML属性修改HTML元素内容的语法格式如下：元素名称JnnerHTML=字符串：【示例4-12-1】在HTML文档VSCriPl标签内输入以下代码：id元素百度一下新浪微博(详见教材)在HTML文档。CriPl标签内输入以下代码：windo
14、w.onload=function()varbox=document.getElementById(a-box);box是根据id值a-box”获取一的元素，它的内容是id元素vara=document.getElementsByTagName(a);/a是根据标签名a获取的数组，共有三个元素，内容依次是“百度一下新浪微博vartitle=document.getElementsByClassName(title);/wtitlew是根据类名title获取的数组，共有两个元素，内容依次是“标题1和标题2(详见教材)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成
15、后教师迸行点评【学生】聆听、上机操作、演示结果：单击F12,打开开发人员工具视图，选择Console(控制台)选项卡，便可以看到控制台中逐行输出的内容：id元素微博标题2标题二。【提示】所有获取元素的语句都要书写在WindOW加载事件中，这是因为只有页面加载到窗口，才能够获取相关元素。4.12.查看和修改DOM元素CSS属性在JavaScript中，常通过属性名称查看和修改DOM元素的CSS属性。查看DOM元素CSS属性的语法格式如下：DOM元素slyle.属性名称修改DOM元素CSS属性的语法格式如下：DoM元素.style.属性名称=新的属性值【示例4-12-2在HTML文档bo标签内输入
16、以下代码：Kdiv标题2在HTML文档标签内输入以下代码：window.onload=function()vartitle=document.getElementsByClassName(title);console.log(tille0.siyle.color);titlel.style.color=red;【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示结果：单击F12,打开开发人员工具视图，选择Console(控制台)选项卡，便可以看到控制台中输出“标题1的颜色：rgb(O,O,O)。页面中标题2的颜色变为红色。【
17、学生】聆听、记录、理解头脑风暴(5min)【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题,讨论如何使用本节课中介绍的SearCh(施索与正则表达式相匹配字符串的索引，并在网页中杳看和修改DOM元素CSS属性。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神Q!:i!r.第二节课*问题导入（3min）【教师】提出以下问题思考如何查看和修改DOM元素的属性?【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知（30min）1.1.1 档对象模型DoM【教师】讲解查看和修改DOM元素的属性，创建、添加、删除、替换DOM元素,D
18、OM事件的相关内容4.12.4 /看和修改DOM元素的属性在JavaScript中，常使用方法getAltribulc（）和SelAUribUleo查看和修改DOM元素的属性。查看DOM元素属性的语法格式如下：DOM元素.getAttribute（属性名称”）修改DoM元素属性的语法格式如下：DoM元素seiAiiribute（属性名称”,“属性值”,）示例4-12-3在HTML文档标签内输入以下代码：在HTML文档VSCriP标签内输入以下代码：window.onload=function（）varform1=document.form1;通过表单的特殊获取方式document.表单名称”获
19、取表单formlvarUserName=fonLuserName;通过表单控件的获取方式表单变量.控件名称”获取文本域UserName（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】讲解代码效果效果：单击FI2,打开开发人员工具视图，选择Console（控制台）选项卡，便可以看到控制台中输出USerName的VaIUC值请输入用户名。页面中USerPaSS的文本类型变为密码类型。4.12.5 创建、添加、删除、替换DoM元素在JaVaSCriPt中，存在一些方法可以创建、添加、删除、替换DOM元素。创
20、建DoM元素的语法格式如下：document.createElement（标签名称）添加DOM子元素的语法格式如下：父元素对曼名称appendChild（要添加的子元素对象名称）通过教师讲解、课堂互动、演示操作等方式，让学生了解文档对象模型DOM常用的方法删除DOM子元素的语法格式如下：父元素对象名称removeChild(要删除的子元素对象名称)替换DOM子元素的语法格式如下：父元素对象名称replaceChild(要替换的新元素对象名称.被替换的旧元素对象名称)【示例4-12-4在HTML文档标签内输入以下代码：标题11g2在HTML文档标签内输入以下代码：window.onload=fu
21、nction()varbox=document.getElementById(box);/box是获取的外层盒子vartitle3=document.createElement(div);创建的div标签，内容为标题3IitleSJnnerHTML=标题3;vartitle4=document.createElement(div);/创建的div标签,内容为标题4title4.innerHTML=标题4;(洋见教材)【教师】组织学生分组上机完成上面的任务.并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示结果：页面中逐行显示“标题4”和标题3。【提示】在页面加载
22、事件中，如果事件体为空，则页面中只显示“标题1和标题2”.4.12.6DOM事件【课堂互动】【教师】提问JavaScript允许对DOM事件做出反应，这样做可以起到什么作用？*【学生】聆听、思考、回答JavaScript允许对DOM事件做出反应，从而大大增强网页的互动功能。DOM事件需要触发之后才能发生，事件发生之后会产生事件流，事件流的顺序有事件冒泡与捕获。1 .触发DOM事件触发DOM事件的形式有两种。(1)在元素头标签内触发DOM事件，其语法格式如下：事件名称=调用函数名及实参”【提示】被调用函数的定义在标签内或被引用的函数库里。(2)直接在JavaScript文件的页面加载事件中定义触
23、发DOM事件，其语法格式如下：DOM元素变量.事件名称=function()(事件触发时的响应【提示】HTML页面中元素都是在页面加载后才能够捕获到的，onload用于触发页面加载事件，因此，对DOM的操作基本都放在onload事件中。鼠标事件有单击事件OnCliCk、移动事件OnmoUSeover、移开事件OnmOUSeOUI。(示例4-12-5在HTML文档标签内输入以下代码：单击此文本！!functionchangText(id)id.innerHTML=修改后的文本！”；)效果：页面中显示单击此文本！，鼠标单击该内容，变为修改后的文本！“。【示例4-12-6在HTML文档标签内输入以下
24、代码：原始状态在HTML文档VSCriP标签内输入以下代码：window.onload=function()vardiv=document.getElementsByTagName(div)0:div.onmouseover=function()div.innerHTML=鼠标移至”：div.onmouseout=funciion()div.innerHTML=鼠标移出；1【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】讲解代码效果效果：页面刚加载后，页面中显示内容原始状态；当鼠标移至该内容上，内容变为鼠标移至；
25、当鼠标移出该内容的位置，页面内容变为鼠标移出。表单事件有改变事件onchangex获取焦点事件OnfOCUs、输入事件oninput【提示】OnchangcTS用于改变文本框输入的内容。OninPUl常常配合正则验证使用。【示例4-12-7在HTML文档VbOdy标签内输入以下代码：输入文本：functiontoUpper()varchange=document.getElementById(change);change,value=change.value.toUpperCase();I【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听
26、、上机操作、演示结果：输入英文字母，并单击文本域之外的区域或回车键时，文本框中的所有小写字母转换为大写字母。【示例4-12-8在HTML文档标签内输入以下代码：在HTML文档标签内输入以下代码：window.onload=function()UserName=formLuserName;UserPass=form1.userPass;userName.onfbcus=funciion()userName.value=,;)userPass.onfcus=function()userPass.value=;userPass.type=password;)【教师】组织学生分组上机完成上面的任务，并
27、在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】讲解代码效果效果：页面加载后，第一个文本域显示明文请输入用户名，获取焦点时文本域置空；第二个文本域显示明文请输入密码，获取焦点时文本域也置空，且输入的字符显示为暗码。【示例4-12-9在【示例4-12-8的基础上，编辑HTML文档标签的内容，添加如下代码作为用户名正则表达式错误提示：用户名必须是6-16位的数字、字母、下划线,且第TZ不能是数字在标签onload事件中添加对userName输入规则测试的相关语句：varregName=Dw(5,15)$/;varts=document.getElementB
28、yId(ts);userName.oninput=function()if(!regName.test(userName.value)ts.style.display=block*;else(ts.style.display=none;I效果：若输入的用户名不符合6-16位的数字、字母、下划线，且第一位不是数字规则，则在文本框上方显示错误提示用户名必须是6/6位的数字、字母、下划线，且第一位不能是数字；如果符合，则错误提示隐藏.2 .事件冒泡与捕获DoM结构是一个树形结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播，所经过的节点都会收到该事件，这个传播过程
29、可以称为DOM事件流。【教师】PPt展示图片“事件冒泡和事件捕获“(详见教材)，并讲解事件冒泡是指事件从叶子节点沿祖先节点一直向上传播至根节点。其中，子元素先触发，父元素后触发。事件捕获的传播顺序与事件冒泡相反，它是指事件从DoM树最顶层元素开始传播，一直传播至叶子元素。触发事件的语法格式如下：addEventListener(click,doSonething,true)其中，第三个参数为true时，则采用事件捕获；为false时，则采用事件冒泡。【示例4-12-10在HTML文档标签内输入以下代码：divid=在HTML文档标签内输入以下代码：window.onload=function(
30、)dl=documen(.getElemen(ById(d1);d2=document.getElementById(d2):btnl=dcument.getElementById(btn1);dl.addEventListener(click.function(event)(alert(dl响应),true);d2.addEventListener(,click,function(event)alert(12响应),true);EnLaddEvenlLislenerCclick”,funciion(event)aleri(按钮响应),true);【教师】组织学生分组上机完成上面的任务，并在各
31、组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示页面效果”页面警示框”图片(详见教材)，并讲解效果：页面加载后,事件响应JII褥为dkd2xbtnl,页面分别弹出带有dl响应(12响应按钮响应”的3个警示框。【提示】若将【示例4-12-10中的三个布尔值true修改为false,页面展示效果不变，但事件响应顺序为bin1、d2、dl。单击“冒泡测试按钮时，页面分别弹出带有“按钮响应d2响应dl响应”的3个警示框.在实际应用中，我们并不需要依次触发多层元素，而是应该阻止冒泡事件传播，此时应使用方法event.stopPropagation()【示例4
32、/2-11】在【示例4-12/0】的基础上，改写窗口加载事件，代码如下：window.onload=function()dl=document.getElementById(dI,);d2=docunent.getElementById(d2):binl=documen(.ge(ElemeniById(btn1);btnLaddEventListenerCclick,function(event)alert(“按钮响应)：event.stopPropagation();,false);(详见教材)*效果：单击“冒泡测试按钮，弹出带有按钮响应”的警示框，同时阻止冒泡事件传播，因此，其他事件不再被
33、触发。【学生】聆听、记录、理解上机操作(7min)【教师】组织学生分组讨论，上机完成以下任务在创建的coUrSehiml文件中，修改控制台中输出的“标题1的颜色为rgb(O,O,O)”,并设置控制台中输出UserName的value值请输入用户名，页面中UserPass的文本类型变为密码类型。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了正则表达式和文档对象模型DoM的相关内容，希望通过本节课的讲解，大家可以正确理解正则表达式，并掌握常见的正则表达式和相关方法，以及DOM常用的方法。【学生】总结回顾知识点总结知识点，巩固学生对正则
34、表达式和文档对象模型DOM等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的documentCreaieElemeniO添加标签名称，页面中设置显示”单击此文本查看成绩，鼠标单击该内容，变为成绩为98分，最终形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课效果不错，学生积极提问与老师交流。在课堂教学中，教师的作用是不能忽视的，教师应主动由“站在讲台上，变为走到学生中去，使自己成为学生中的一员，与学生共同探讨学习中的问题，以交流、合作、商讨的口气与学生交流心得、体会，这样学生才会亲其师，信其道。
