《网站前端技术》教案第23课JavaScript基础（六).docx
课题第23课JaVaSeriPt基础（六）课时2课时(90min)教学目标知识技能目标：（1）掌握BoM常用的方法（2）能够根据效果图，使用JavaScript在网页上绘制图形素质目标：增加JavaScript相关知识储备，巩固所学理论知识，提升实践能力教学重难点教学重点：BOM常用的方法教学难点：使用JaVaSeriPt在网页上绘制图形教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务T考勤（2min）一问题导入（5min）一传授新知（28min）一头脑风暴（10min）第2节课：问题导入（5min）一综合案例（35min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务,和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解浏览器对象模型BOM的相关内容.【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是浏览器对象模型BOM?【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）4.13浏览器对象模型BOM【教师】讲解浏览器对象模型BOM常用的方法【课堂互动】中【教师】提问浏览器对象模型有什么作用？通过教师讲解、课堂互动、演示操作等方式，使学生了解浏览器对象模型BOM常用的方法浏览器对象模型(browserobjectmodel,BOM)用于描述对象与对象之间层次关系的模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。4.13.1JavaScriptWindowwindow对象表示一个浏览器窗口所有浏览器都支持window对象。所有全局JavaScript对象、函数和变量自动成为window对象的成员。其中，全局变量是window对象的属性；全局函数是window对象的方法。【课堂互动】+【教师】提问WindOW对象有哪些方法？十【学生】聆听、思考、回答window对象的方法有WindoW.open。、WindOW.close。、window.moveTo()%window.resizeTo()等。WindoW.open()用于宙旨定窗口打开指定的链接，并设定窗口参数，如宽度、高度等，其语法格式如下：window.open(URL,windowName,parameterlist)【示例4-13-1】在HTML文档<body>标签内输入以下代码：<inputIyPe="buiton"value="百度链接”onclick="window.open(,http7',blank,400px','3(X)px')">【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示,演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中显示按钮“百度链接"，单击该按钮，在新的窗口打开百度首页，窗口大小为宽400px,高300pxWindoW.close。用于关闭当前窗口，其语法格式如下：window.c!ose()WindOW.moveTo()用于移动当前窗口，其语法格式如下：WindOW.moveTo(水平方向位移，垂直方向位移)WindOWIesizeToO用于调整当前窗口大小，其语法格式如下：WindOW.resizeTo(窗口宽度窗口高度)4.13.2 JavaScriptScreen在JavaScript中，window.screen对象包含屏幕的信息。因为window是全局对象，所以window.screen可以简写为screen,screen对象常用的属性有screen.width,screen.heightxscreen.availWidthscreen.availHeightxscreen.colorDepthxscreen.pixelDep(h等。screen.width用于返回以像素计的屏幕宽度。screen.height用于返回以像素计的屏幕高度。ScreeiLavailWidth用于返回以像素计的访问者屏幕宽度，即屏幕宽度减去窗口工具条等元素的宽度。>»*ScreenavailHeight用于返回以像素计的访问者屏幕高度，即屏幕高度减去窗口工具条等元素高度。ScreenxolorDepth用于返回一种颜色的比特数。现代计算机一般为24位或36位，更老的计算机可能为14位，异常古老的手机为8位。screen.piXelDepth用于返回屏幕像素深度。【示例4-13-2在HTML文档<body>标签内输入以下代码：<divid="textl"><div><divid="text2"><div><divid="text3"><div><divid="texl4"><div><divid="text5"><div><divid=',text6',xdiv>在HTML文档(scrip。标签内输入以下代码：window.onload=function()document.getElementById("text2").innerHTML="Screen Height="+scree”.height',document.getElemen(ById("lex(3").innerHTML="Screen "+screen.avaitWidth:document.getElementById("text4").innerHTML="Screen ,+screen.availHeight,document.getElementById("iext5").innerHTML="Screen ''+ScreenxolorDepth:document.getElementById(',text6").innerHTML="Screen "+ScreempixelDeplh;IAvailWidih=AvailHeight=ColorDeplh=PixeIDepth=documen(.getElemen(ById("text1',).innerHTML="ScreenWidlh="+scree”.width;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”页面显示效果”图片(详见教材)，并讲解效果：页面中显示<div>标签的内容，该内容是屏幕的信息数据。4.13.3 JavaScriptLocation【课堂互动】-H教师】提问WindowJocation对象有什么作用？-H学生】聆听、思考、回答在JavaScript中，WindowJocation对象用于获取当前页面地址信息,也可以用来重新定向到新页面。该对象可以不带前缀windowz简写为location,location对象常用的属性和方法有location、IOCatiOn.hostname、location.pathnane、location.protocol、IoCalion.port、IOCatiOn.assign。等。location用于返回当前页面地址或设置重新定位的页面地址。location.hostname用于返回当前页面的主机域名。IoCatiOn.pathname用于返回当前页面所在路径。location.protocol用于返回当前页面的web协议。【示例4-13-3在HTML文档body标签内输入以下代码：<divid="textl"xdiv><divid="text2"xdiv><divid="texl3"xdiv><divid="text4"xdiv><divid="text5"xdiv><inpuiIype="binton"value="重新定向1"onclick="window.location=''"><inutIyPe="buMon"VaIUe="重新定向2"onclick="H'iH(M,.ocafzoH.assn('http')z">在HTML文档<scripl>标签内输入以下代码：window.onload=function()document.getElementById("text1").innerHTML="页面是Iocatiomdocument.geiElementById("tex(2").innerHTML="主机域名是,+window.location.hostamedocument.geiElementById("text3").innerHTML="页面路径是"+window.location.pathname;documeni.geiElementById("text4").innerHTML="Web协议是''+window.IoCatiOn.protocol;document.geiElementById("tex(5").innerHTML="主机端口号是"+window.location.port;)【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示“页面效果”图片(详见教材)，并讲解效果：页面中显示div标签的内容(该内容是当前页面地址信息)和两个按钮。任意单击其中一个按钮，页面成阵专至百度首页。【提示】【示例4/3-3】在本地服务器上实现，实现方法这里不做详细介绍，重点了解WindowJocation对象常用属性和方法的作用即可。当http协议主机端口号为默认值80和https默认端口号为443时,winclow.location对象location.port属性返回的主机端口号不显示。4.13.4 JavaScriptHistory在JavaScript中fWindoW.history对象包含浏览器历史,该对象常用的方法有historjf.back()shistory.forward。等。hisiory.back()后退方法，相当于点击浏览器后退按钮。history.forward。前进方法，相当于点击浏览器前进按钮。【学生】聆听、记录、理解头脑风暴(10min)【教师】根据头脑风暴主题，组织学生分组开展讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能 力和团队精神根据各队伍的网站主题，讨论如何设置页面中显示<div>标签的内容(该内容是当前页 面地址信息)和两个按钮。任意单击其中一个按钮，页面目姬至百度首页。【学生】思考、讨论第二节课问题导入(5min)【教师】提出以下问题思考如何使用JavaScript在网页上绘制图形？【学生】思考、举手回答通过提问引导学生思考本节课内容综合案例(35min)4.14综合案例一美丽的时钟【教师】讲解在网页上绘制时钟的具体流程该项目实现的网页中使用了HTML5新增加的一个专门用于绘制图形的canvas元素。但事实上，该元素本身是没有绘制图形的能力，它只是显示T长设定好背景色的画布，然后借助JavaScript在网页上绘制图形。【教师】ppt展示“时钟最终效果”图片(详见教材),并讲解1.搭建网站，新建井关联相关文件(1)在C盘上新建文件夹，命名为"clock",此文件夹作为该项目站点。(2)在项目站点中新建js文件夹和index.html文件。其中Js文件夹用于存放JavaScript文件；index.html文件是网站首页的HTML文件。(3)在项目站点js文件夹中创建index.js文件。(4)编辑index.html的基本结构，并利用<scrip>标签导入index.js文件,代码如下：<Jdoctypehtml><h(mllang="en'|><head><metacharset="UTF-8"><title>美丽的时钟<title><scriptsrc=,jsfunjs,><Jscript><head><body><body><html>2 .添加画布编辑index.html文件，在<body>标签内输入<canvas>标签,并设置画布的大小，即宽为500px,高为500px,同时设置id的属性值为clock,代码如下：VCanVaSWidIh="500"heighi="500"id="clock',>您的浏览器不支持<canvas>标签<canvas>此时，如果使用谷歌浏览器打开in加x.html文件，页面中不会显示标签的内容。但是，IEKO版本以下的浏览器会因为不兼容<canvas>标签的问题，导致页面中显示<canvas>标签的内容"您的浏览器不支持<canvas>标签”.3 .使用JavaScript方法获取<canvas>标签，并获取画布的2D澧染上下文varclock=document.getElementById("clock");varcxt=clock.getContext(',2d");通过教师讲解、课堂互动等方式，让学生了解使用JavaScript在网页上绘制时钟的具体流程和操作以下封装的相关函数涉及CXI对象，均需要在页面窗口加载事件中封装。4.封装绘制圆的函数circle(r,color,w),并绘制表盘外圆和中心圆(1)创建绘制圆的函数circle(rtcolor,w).【课堂互动】十【教师】提问绘制圆的步骤有哪些？÷【学生】聆听、思考、回答绘制圆的步骤包括：设置线条宽度、设置线条颜色、起始一条路径、绘制曲线和绘制已定义的路径。其中，绘制曲线包含6个参数，依次是圆心的水平坐标值、圆心的垂直坐标值、半径、圆弧起始点角度、圆弧终止点角度、画弧的方向(false为逆时针，true为顺时针)绘制圆的函数Cirde(r,color,w)将画布中心为设置圆心，并将半径、颜色、线条宽度设置为形参，以便于绘制不同的圆，代码如下：functioncircle(r,color,w)cxt.lineWidth=w;设置线条宽度CxLsirokeSlyle=CoIor;颜色cxt.beginPalh();/起始一条路径cxt.arc(250,250,r,0,360,false);绘制曲线,圆心坐标为画布中心(250,250)cxt.stroke();绘制已定义的路径(2)调用函数CirCIe(r,8or,w)绘制表盘外圆，设置半径为200,颜色为blue,线条宽度为7,代码如下：CircIe(200,"blue”,7);(3)调用函数CirCle(I,81or,w)绘制表盘中心圆，设置半径为10,颜色为red,线条宽度为2,代码如下：CircIe(IO,"red",2);【教师】PPt展示”绘制表盘外圆和中心圆效果”图片(详见教材)5 .封装绘制表盘刻度线的函数Iine，并绘制时刻度线和分刻度线(I)创建绘制表盘刻度线的函数line(i),代码如下：functionline(i)cxt.save();/解后续(2)(3)(4)中的代码添加到此处cxt.restore();该函数中为防止循环创建线段覆盖其他线段,在函数开头利用save。保存当前画布状态，在函数结尾利用resiore()返回之前保存的绘图状态。(2)设置笔触颜色为黑色，映射画布新的原点坐标为(250,250),旋转的角度为i*6度(换算成弧度为i*6*Math.PI180)f起始一条路径，代码如下：cxt.strokeStyle="#000"cxt.translate(250,250);cxt.rotate(i*6*Math.PI180);cx(.beeinPath();>»*(3)设置线条宽度，并设置移动路径到指定点。当i能被5整除时，线条宽度为7,指定点为(0,770)；当i不能被5整除时，线条宽度为5,指定点为(0,-180),代码如下：if(i%5=0)cxt.lineWid(h=7;cxt.moveTb(0,-170);elsecxt.lineWidth=7;cxt.movelb(0,-180);(4)添加一个新的点为(0,T90),绘制已定义路径，代码如下：cxt.lineTb(0,-190);cxt.stroke();(5)通过for循环语句调用Iine函数绘制60条刻度线,代码如下：for(vari=0j<60u+)line(i);【教师】PPt展示”绘制时钟刻度线效果”图片(详见教材)6 .封装绘制时、分、秒针的函数needle(color,w,r»s,t)【课堂互动】+【教师】提问绘制时、分、秒针需要用到什么函数？÷【学生】聆听、思考、回答(1)创建绘制时、分、秒针的函数needle(color,w,r,s,t),首先保存当前画布状态，代码如下：functionneedle(color,w,r,s,t)cxt.save();将后续(2)(3)中的代码添加到此处(2)设置笔触颜色为color,线条宽度为w,映射原点坐标为(250,250)z旋转角度为r(换算成弧度为r*Math.PU180),代码如下：cxt.strokeStyle=color;cxt.lineWidth=w;cxt.translate(250,250);cxt.rota(e(r*Math.PI/180);(3)起始一条路径，将路径移动到(0,s),添加新的点(0,t),绘制已有路径，返回之前保存的绘图状态，代码如下：cxt.beginPath();cxt.moveT(0,s);cxt.lineTo(0,t);cxt.stroke();cxt.restore();7 .封装美化秒针的函数PreSeC(r)(1)创建美化秒针的函数preSec(r),首先保存当前画布状态，设置笔触颜色为红色，设置线条宽度为2,映射原点坐标为(250,250),旋转角度为r(换算成弧度为r*Math.PI180),代码如下：functionpreSec(r)cxt.save():cxt.lineWidth=2;cxt.strokeStyle="red"cxt.translate(250,250);cxt.rotate(r*Math.PI180);cxt.beginPath();雨后续(2)(3)(4)中的代码添加到此处)(2)起始一条路径，以(0,150)为圆，隙制半径为3的逆时针圆，代码如下：cxt.beginPath();cxt.arc(0,-150,3,0,360,false);(3)设置填充颜色为灰色，并填充，代码如下：cxl.fillSlyle="#808080"cxt.fill();(4)绘制已有路径，返回之前保存的绘图状态，代码如下：cxt.stroke();cxt.restore();8 .封装时钟显示当前时间的函数(IrawPointO(I)创建时钟显示当前时间的函数drawPoint(),定义变量now,获取当前时间，接着定义变量h、min、SeC分别获取时、分、秒，代码如下：functiondrawPoint()varnow=newDate();varh=now.getHours();雨后续(2)中的代码添加到此处varmin=now.getMinutes();varsec=now.getSeconds();/解后续(3)(4)(5)(6)中的代码添加到此处I(2)刷新h的值，保证h为12进制，代码如下：h=h>12?h-12:h;(3)绘制时针，颜色为黑色，线条宽度为10,相对原点起点为20,终点为-60,旋转的角度为h*30+min60*30,代码如下：needle("000",10,20,-60,(h*30+min60*30);(4)绘制分针，颜色为灰色，线条宽度为6,相对原点起点为30,终点为-90,旋转角度为min*6,代码如下：needle("#808080",6,30,-90,min*6);(5)绘制秒针，颜色为红色，线条宽度为2,相对于原点起点为35,终点为780,旋转角度为sec*6,代码如下：needle("red",2,35,-l80,sec*6);(6)美械针.preSec(sec*6);【教师】PPt展示“时钟显示当前时间的效果”图片(详见教材)时钟显示的时间为当前时间，但各指针并不随时间的推移而行走。9 .封装绘制表盘的函数draw(),优化程序(1)创建绘制表盘的函数draw(),清除500*500的画布像素，代码如下：functiondraw()cxt.clearRect(0,0,500,500);雨后续(2)(3)(4)(5)(6)中的代码添加到此处)(2)绘制表盘的外圆，代码如下：CirCle)0JbIUe",7);>»fbr(vari=0;i<60;i+)line(i);)(4)绘制时、分、秒针，代码如下：drawPoint();(5)绘制表盘中心圆，代码如下：circled0,"red",2);(6)绘制时、分、秒针交叉圆点，代码如下：circle(2,"red",2);若该函数中缺少酶画布像素语句"cxtclearRect(O,(),500,500);则随着时间的联网页呈现的图形。【教师】PPt展示”不清除画布像素形成的页面效果”图片(详见教材)【提示】函数draw。对index.js文件的程序进行了优化，所以要删除该文件中与函数draw。代码重复的语句。10.按照指定的周期(以毫秒计)调用函数或计算表达式使用SellnlerVmO按照指定的周期(如100o亳秒，即1秒)调用绘制表盘函数draw(),代码如下：setlnterval(function()draw();,I(XX);此时，页面中的时、分、秒针每秒刷新一次，视觉效果上用户会感觉秒针一直在行走。.【代码参考】详见教材【学生】聆听、记录、理解课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了浏览器对象模型BOM常用的方法,以及借助JavaScript在网页上绘制图形的具体流程，希望通过本节课的讲解，大家可以掌握相关方法与操作，并对JaVaSCriPt有更深入地了解。【学生】总结回顾知识点总结知识点，巩固学生对BOM常用方法、使用JavaScript在网页上绘制图形的具体流程等相关知识的印象作业布置(2min)【教师】布置课后实训作业个人作业：请根据课堂所学知识，完成课后习题团队作业：请用”实训作业素材VM-JavaScripi”文件夹中的图像素材，使用JavaScript技术及HTML/HTML5和CSS/CSS3知识制作如教材图4-15-1所示的页面，并完成下述功能。(1)显示验证码并实现刷新功能。其中，验证码包含六个字符，字符集为26个英文字母(2)每一个文本框含有输入提示.(3)当输入用户名和两个密码时，显示如图4-15-2所示的报错提示信息。(4)单击"注册"按钮，判断检测验证码是否正确，若不正确,显示报错信息.【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思I本节课效果不错，学生能够积极参与到案例的设计中。教学上，应本着"授之鱼不如授之以渔"的宗旨，注重对学生能力的培养，不仅要教会他们知识，还要让他们在学习过程中掌握学习方法.(3)绘制60个刻度线，代码如下:
