《网站前端技术》教案第22课JavaScript基础（五）.docx
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）一头脑风暴（5min）第2节课：问题导入（3min）一传授新知（3Omin）一上机操作（7min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解正则表达式与文档对象模型DOM的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是正则表达式？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（33min）4.11正则表达式【教师】讲解正则表达式的组成与相关方法正则表达式又称规则表达式，它描述了字符串匹配的模式，可以用来检查字符串是否含有某种子串、将匹配的子串替换或从某个字符串中取出符合某条件的子串等。4.11.1 正则表达式的组成【课堂互动】通过教师讲解、课堂互动、演示操作等方式，使学生了解常见的正则表达式和相关方法，以及部分DOM常用的方法【教师】提问正则表达式由哪些内容组成?+【学生】聆听、思考、回答正则表达式是由普通字符(如字符az)和特殊字符(称为元字符)组成的文本模式，其语法格式如下：/匹配对象的文本模式(正则表达式)/正则表达式中主要包含匹酉嗨、限定符、定位符、转义符等.1 .匹配符匹酉嗨用于匹配某个或某些字符。在正则表达式中，使用一对方括号括起来的内容，称为"字符簇"，表示一个范围。实际匹配时，匹配这个范围内的某个字符。a-z：匹配4号字母az中的任意一zik字符。A-Z：匹配大写字母AZ中的任意一个字符。0-9：匹配数字09中的任意一个字符，相当于d(匹配一个数字字符)。(详见教材)【提示】在字符簇中，存在Tl三符号"称为脱字符，表示取反的意思。【示例4-11-1】在HTML文档script标签内输入以下代码：varstr="133s3123456"varreg=/0-9/;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="电话号码：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.定位符【课堂互动】÷【教师】提问定位符可用于正则表达式中的哪些位置？÷【学生】聆听、思考、回答定位符用于将一个正则表达式定位在字符串的开始或结束位置进行匹配，也用于在单词内或在单词的开始或结尾处进行匹配。：定位在字符串的开始位置进行匹配。$:定位在字符串的结束位置进行匹配。b:匹配一个单词的分界线(如字符串开头、结尾、空格、逗号、点号等)VB:匹配一个单词的非分界线。【示例4-11-3】在HTML文档VSCriPl标签内输入以下代码：varStr="2021-4-10"varreg=dH4-Idl,2-dJl,2S;document.write(reg.test(str);效果：页面中弹出“true”.【提示】程序中，正则表达式"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);效果：页面中弹出"true"。【提示】uw表示匹配字符串中的一个脱字符。4.11.2正则表达式相关方法在JaVaSCriPt中，正则表达式对象有两种方法，即字符串方法和正则对象方法。1.字符串方法search()：检索与正则表达式相匹配字符串的索引。*match():找到一个或者多个正则表达式的匹配结果。replace():替换与正则表达式匹配的字符串.2.正则对象方法IeSlo:检测一个字符串是否匹配某个正则表达式。如果字符串中含有匹配的文本，则返回true；否则返回false。exec():检索字符串中的正则表达式匹配，返回一个数组,存放匹配的结果。如果字符串中含有检索的文本，则返回检索结果；否则结果为null。【学生】聆听、记录、理解4.12文档对象模型DOM【教师】讲解DOM获取元素、获取和修改HTML内容、直看和修改DOM元素CSS属性的具体方法文档对象模型(documentobjectmodel,DOM)是由W3C(万维网联盟)组织定义的一个标准。【课堂互动】【教师】提问DOM有什么作用？÷【学生】聆听、思考、回答创建一个网页并将该网页添加到网站中时，DOM就会根据这个网页创建一个文档，该文档是元素与内容的数据集合。此外，DOM会将文档解析为树状结构，并以树节点的方式表示文档中的各种内容。例如，现有一个HTML文档，内容如下：<html><head><tile>标题内容<title><head><body><h2>二号标题<小2><p>段落内容<p><body><html>【教师】PPt展示图片“文档的DOM树”(详见教材)，并讲解通过Dc)M,JavaScripi能够获取、修改、添加、删除HTML文档的元素、属性、CSS样式，还能够创建新的HTML事件并对页面中所有已有的HTML事件作出反应，从而创建动态网页，实现互动操作。4.12.1获取对象【课堂互动】÷【教师】提问在JavaScript中，可以如何引用获取元素？÷【学生】聆听、思考、回答在JaVaSCriPl中，引用获取元素方法的语法格式如下：document.方法名称(元素名称)在JaVaSCriPI中，可以通过不同方法获取指定元素，详细介绍如下。getElementById(),根据元素id获取元素,其语法格式如下：document.getElementById("id名称")geiElementsByTagName(),根据标签名获取元素组，其语法格式如下：document.getElementsByTagName("标签名称")。getElemenlsByClassName(),根据类名获取元素组，其语法格式如下：document.getElementsByClassName("类名称querySelectorAll(),根据CSS选择器名获取元素组,其语法格式如下：documeni.querySelectorA11("i器名称根据表单名获取表单，其语法格式如下：document.表单名称根据表单控件名获取控件，其语法格式如下：表单对象.控件名称【提示】获取元素的方法只能在网页加载到窗口之后使用即只能在window.onload事件中使用.4.12.2获取和修改HTML内容【课堂互动】÷【教师】提问通过MnerHTML属性，如何获取HTML元素内容？÷【学生】聆听、思考、回答通过innerHTML属性获取HTML元素内容的语法格式如下：元素名称InnerHTML通过innerHTML属性修改HTML元素内容的语法格式如下：元素名称JnnerHTML=字符串：【示例4-12-1】在HTML文档VSCriPl>标签内输入以下代码：<divid="a-box">id元素<div><ahref="http:/WWW">百度一下<a><ahref="hiip:/WWW.$ina.CO”>新浪<a><ahref="hltp:/WWW">微博<a>(详见教材)在HTML文档。CriPl>标签内输入以下代码：window.onload=function()varbox=document.getElementById("a-box");"b
