《网站前端技术》（梁玲）621-7 教案 第23课 JavaScript基础六_第1页
《网站前端技术》（梁玲）621-7 教案 第23课 JavaScript基础六_第2页
《网站前端技术》（梁玲）621-7 教案 第23课 JavaScript基础六_第3页
《网站前端技术》（梁玲）621-7 教案 第23课 JavaScript基础六_第4页
《网站前端技术》（梁玲）621-7 教案 第23课 JavaScript基础六_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第23课JavaScript基础（六）课时2课时（90min）教学目标知识技能目标：（1）掌握BOM常用的方法（2）能够根据效果图，使用JavaScript在网页上绘制图形素质目标：增加JavaScript相关知识储备，巩固所学理论知识，提升实践能力教学重难点教学重点：BOM常用的方法教学难点：使用JavaScript在网页上绘制图形教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（28min）→头脑风暴（10min）第2节课：→综合案例（35min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解浏览器对象模型BOM的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是浏览器对象模型BOM？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（28min）4.13浏览器对象模型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>标签内输入以下代码：<inputtype="button"value="百度链接"onclick="window.open('','blank','400px','300px')">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中显示按钮“百度链接”，单击该按钮，在新的窗口打开百度首页，窗口大小为宽400px，高300px。window.close()用于关闭当前窗口，其语法格式如下：window.close()window.moveTo()用于移动当前窗口，其语法格式如下：window.moveTo(水平方向位移,垂直方向位移)window.resizeTo()用于调整当前窗口大小，其语法格式如下：window.resizeTo(窗口宽度,窗口高度)4.13.2JavaScriptScreen在JavaScript中，window.screen对象包含屏幕的信息。因为window是全局对象，所以window.screen可以简写为screen。screen对象常用的属性有screen.width、screen.height、screen.availWidth、screen.availHeight、screen.colorDepth、screen.pixelDepth等。screen.width用于返回以像素计的屏幕宽度。screen.height用于返回以像素计的屏幕高度。screen.availWidth用于返回以像素计的访问者屏幕宽度，即屏幕宽度减去窗口工具条等元素的宽度。screen.availHeight用于返回以像素计的访问者屏幕高度，即屏幕高度减去窗口工具条等元素高度。screen.colorDepth用于返回一种颜色的比特数。现代计算机一般为24位或36位，更老的计算机可能为14位，异常古老的手机为8位。screen.pixelDepth用于返回屏幕像素深度。【示例4-13-2】在HTML文档<body>标签内输入以下代码：<divid="text1"></div><divid="text2"></div><divid="text3"></div><divid="text4"></div><divid="text5"></div><divid="text6"></div>在HTML文档<script>标签内输入以下代码：window.onload=function(){ document.getElementById("text1").innerHTML="ScreenWidth="+screen.

width; document.getElementById("text2").innerHTML="ScreenHeight="+screen.

height; document.getElementById("text3").innerHTML="ScreenAvailWidth="+screen.availWidth; document.getElementById("text4").innerHTML="ScreenAvailHeight="+screen.availHeight; document.getElementById("text5").innerHTML="ScreenColorDepth="+screen.colorDepth; document.getElementById("text6").innerHTML="ScreenPixelDepth="+screen.pixelDepth;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“页面显示效果”图片（详见教材），并讲解效果：页面中显示<div>标签的内容，该内容是屏幕的信息数据。4.13.3JavaScriptLocation【课堂互动】✈【教师】提问window.location对象有什么作用？✈【学生】聆听、思考、回答在JavaScript中，window.location对象用于获取当前页面地址信息，也可以用来重新定向到新页面。该对象可以不带前缀window，简写为location。location对象常用的属性和方法有location、location.hostname、location.pathname、tocol、location.port、location.assign()等。location用于返回当前页面地址或设置重新定位的页面地址。location.hostname用于返回当前页面的主机域名。location.pathname用于返回当前页面所在路径。tocol用于返回当前页面的web协议。location.port用于返回当前页面的主机端口。location.assign()用于将当前页面重新定向到指定地址。【示例4-13-3】在HTML文档<body>标签内输入以下代码：<divid="text1"></div><divid="text2"></div><divid="text3"></div><divid="text4"></div><divid="text5"></div><inputtype="button"value="重新定向1"onclick="window.location='';"><inputtype="button"value="重新定向2"onclick="window.location.assign('');">在HTML文档<script>标签内输入以下代码：window.onload=function(){ document.getElementById("text1").innerHTML="页面位置是"+window.location; document.getElementById("text2").innerHTML="主机域名是"+window.location.hostname; document.getElementById("text3").innerHTML="页面路径是"+window.location.pathname; document.getElementById("text4").innerHTML="Web协议是"+window.tocol; document.getElementById("text5").innerHTML="主机端口号是"+window.location.port;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“页面效果”图片（详见教材），并讲解效果：页面中显示<div>标签的内容（该内容是当前页面地址信息）和两个按钮。任意单击其中一个按钮，页面跳转至百度首页。【提示】【示例

4-13-3】在本地服务器上实现，实现方法这里不做详细介绍，重点了解window.location对象常用属性和方法的作用即可。当http协议主机端口号为默认值80和https默认端口号为443时，window.location对象location.port属性返回的主机端口号不显示。4.13.4JavaScriptHistory在JavaScript中，window.history对象包含浏览器历史，该对象常用的方法有history.back()、history.forward()等。history.back()后退方法，相当于点击浏览器后退按钮。history.forward()前进方法，相当于点击浏览器前进按钮。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解浏览器对象模型BOM常用的方法头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何设置页面中显示<div>标签的内容（该内容是当前页面地址信息）和两个按钮。任意单击其中一个按钮，页面跳转至百度首页。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题思考如何使用JavaScript在网页上绘制图形？【学生】思考、举手回答通过提问引导学生思考本节课内容综合案例

（35min）4.14综合案例——美丽的时钟【教师】讲解在网页上绘制时钟的具体流程该项目实现的网页中使用了HTML5新增加的一个专门用于绘制图形的canvas元素。但事实上，该元素本身是没有绘制图形的能力，它只是显示一张设定好背景色的画布，然后借助JavaScript在网页上绘制图形。【教师】ppt展示“时钟最终效果“图片（详见教材），并讲解1.搭建网站，新建并关联相关文件（1）在C盘上新建文件夹，命名为“clock”，此文件夹作为该项目站点。（2）在项目站点中新建js文件夹和index.html文件。其中，js文件夹用于存放JavaScript文件；index.html文件是网站首页的HTML文件。（3）在项目站点js文件夹中创建index.js文件。（4）编辑index.html的基本结构，并利用<script>标签导入index.js文件，代码如下：<!doctypehtml><htmllang="en"><head> <metacharset="UTF-8"> <title>美丽的时钟</title> <scriptsrc="js/fun.js"></script></head><body></body></html>2.添加画布编辑index.html文件，在<body>标签内输入<canvas>标签，并设置画布的大小，即宽为500px，高为500px，同时设置id的属性值为clock，代码如下：<canvaswidth="500"height="500"id="clock"> 您的浏览器不支持<canvas>标签</canvas>此时，如果使用谷歌浏览器打开index.html文件，页面中不会显示标签的内容。但是，IE8.0版本以下的浏览器会因为不兼容<canvas>标签的问题，导致页面中显示<canvas>标签的内容“您的浏览器不支持<canvas>标签”。3.使用JavaScript方法获取<canvas>标签，并获取画布的2D渲染上下文varclock=document.getElementById("clock");varcxt=clock.getContext("2d");【提示】以下封装的相关函数涉及cxt对象，均需要在页面窗口加载事件中封装。4.封装绘制圆的函数circle(r,color,w)，并绘制表盘外圆和中心圆（1）创建绘制圆的函数circle(r,color,w)。【课堂互动】✈【教师】提问绘制圆的步骤有哪些？✈【学生】聆听、思考、回答绘制圆的步骤包括：设置线条宽度、设置线条颜色、起始一条路径、绘制曲线和绘制已定义的路径。其中，绘制曲线包含6个参数，依次是圆心的水平坐标值、圆心的垂直坐标值、半径、圆弧起始点角度、圆弧终止点角度、画弧的方向（false为逆时针，true为顺时针）。绘制圆的函数circle(r,color,w)将画布中心为设置圆心，并将半径、颜色、线条宽度设置为形参，以便于绘制不同的圆，代码如下：functioncircle(r,color,w){ cxt.lineWidth=w;//设置线条宽度 cxt.strokeStyle=color;//设置线条颜色 cxt.beginPath();//起始一条路径 cxt.arc(250,250,r,0,360,false);//绘制曲线,圆心坐标为画布中心（250,250） cxt.stroke();//绘制已定义的路径}（2）调用函数circle(r,color,w)绘制表盘外圆，设置半径为200，颜色为blue，线条宽度为7，代码如下：circle(200,"blue",7);（3）调用函数circle(r,color,w)绘制表盘中心圆，设置半径为10，颜色为red，线条宽度为2，代码如下：circle(10,"red",2);【教师】ppt展示“绘制表盘外圆和中心圆效果”图片（详见教材）5.封装绘制表盘刻度线的函数line(i)，并绘制时刻度线和分刻度线（1）创建绘制表盘刻度线的函数line(i)，代码如下：functionline(i){ cxt.save();//将后续（2）（3）（4）中的代码添加到此处 cxt.restore(); }该函数中为防止循环创建线段覆盖其他线段，在函数开头利用save()保存当前画布状态，在函数结尾利用restore()返回之前保存的绘图状态。（2）设置笔触颜色为黑色，映射画布新的原点坐标为（250，250），旋转的角度为i*6度（换算成弧度为i*6*Math.PI/180），起始一条路径，代码如下：cxt.strokeStyle="#000";cxt.translate(250,250);cxt.rotate(i*6*Math.PI/180);cxt.beginPath();（3）设置线条宽度，并设置移动路径到指定点。当i能被5整除时，线条宽度为7，指定点为（0，−170）；当i不能被5整除时，线条宽度为5，指定点为（0，−180），代码如下：if(i%5==0){ cxt.lineWidth=7; cxt.moveTo(0,-170);}else{ cxt.lineWidth=7; cxt.moveTo(0,-180); }（4）添加一个新的点为（0，−190），绘制已定义路径，代码如下：cxt.lineTo(0,-190);cxt.stroke();（5）通过for循环语句调用line(i)函数绘制60条刻度线，代码如下：for(vari=0;i<60;i++){ 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），旋转角度为r（换算成弧度为r*Math.PI/180），代码如下：cxt.strokeStyle=color;cxt.lineWidth=w;cxt.translate(250,250);cxt.rotate(r*Math.PI/180);（3）起始一条路径，将路径移动到（0，s），添加新的点（0，t），绘制已有路径，返回之前保存的绘图状态，代码如下：cxt.beginPath();cxt.moveTo(0,s);cxt.lineTo(0,t);cxt.stroke();cxt.restore();7.封装美化秒针的函数preSec(r)（1）创建美化秒针的函数preSec(r)，首先保存当前画布状态，设置笔触颜色为红色，设置线条宽度为2，映射原点坐标为（250，250），旋转角度为r（换算成弧度为r*Math.PI/180），代码如下：functionpreSec(r){ cxt.save(); cxt.lineWidth=2; cxt.strokeStyle="red"; cxt.translate(250,250); cxt.rotate(r*Math.PI/180); cxt.beginPath();//将后续（2）（3）（4）中的代码添加到此处}（2）起始一条路径，以（0，−150）为圆心绘制半径为3的逆时针圆，代码如下：cxt.beginPath();cxt.arc(0,-150,3,0,360,false);（3）设置填充颜色为灰色，并填充，代码如下：cxt.fillStyle="#808080";cxt.fill();（4）绘制已有路径，返回之前保存的绘图状态，代码如下：cxt.stroke();cxt.restore();8.封装时钟显示当前时间的函数drawPoint()（1）创建时钟显示当前时间的函数drawPoint()，定义变量now，获取当前时间，接着定义变量h、min、sec分别获取时、分、秒，代码如下：functiondrawPoint(){ varnow=newDate(); varh=now.getHours();//将后续（2）中的代码添加到此处 varmin=now.getMinutes(); varsec=now.getSeconds();//将后续（3）（4）（5）（6）中的代码添加到此处}（2）刷新h的值，保证h为12进制，代码如下：h=h>12?h-12:h;（3）绘制时针，颜色为黑色，线条宽度为10，相对原点起点为20，终点为−60，旋转的角度为h*30+min/60*30，代码如下：needle("#000",10,20,-60,(h*30+min/60*30));（4）绘制分针，颜色为灰色，线条宽度为6，相对原点起点为30，终点为−90，旋转角度为min*6，代码如下：needle("#808080",6,30,-90,min*6);（5）绘制秒针，颜色为红色，线条宽度为2，相对于原点起点为35，终点为−180，旋转角度为sec*6，代码如下：needle("red",2,35,-180,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(200,"blue",7);（3）绘制60个刻度线，代码如下：for(vari=0;i<60;i++){ line(i);}（4）绘制时、分、秒针，代码如下：drawPoint();（5）绘制表盘中心

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论