《网站前端技术》教案第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在网页上绘制图形？【学生】思考、举手回答通过提问
