HTML5+CSS3+JavaScript网页设计基础与实战（微课版）教学设计教案.docx

千绛教育HTM1.5÷CSS3+JavaScript网页N殳计基础与实战教学设计语在名称：HTM1.5+CSS3+JavaScriPt网页设计一与实战授课年级：授课学期：教师3名：2022年08月22日>了斛eb前端发展历程二、知识讲解（一）前墙概述I.万集网< 1>万维网的定义万维网（Wor1.dWideWeb,亦作Web、WWW.W3）.是一种基于超文本和闻文本传输协议（HyPCITCXnYansfcrPtmccoI,简称HTTP）的.全球性的，动态交互的，跻平台的分布式图形信息系统。< 2）前端开发前端开发是创建Wcb页面或APP等前端界面呈现给用户的过程，通过HTM1.（HyperTex1.Mark-up1.anguage.超文本标记语；）、CSS（CascadingSty1.eSheets,层通样式表和JaVaSCriPt以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。3前端发展总述Web1.O1.MR:Web前剂发展初期HTM1.技术只能展示简单的网页.那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。WCb2.0时代：涌现出大量的类觎于桌面软件的WCb应用.用户不仅能浏览网页，还能对网页上的内容进行操作.网站的前端因此发生变化，网页不再只是单一的承教文字和图片,各种媒体的应用使网页内容变得更丰富多彩,同时也提升了用户体验礴.Iweb前端发展倚史< 1）峥态页面阶段 1990年的12月25日,伯纳斯李在他的电脑上部署了第一套“主机网站浏览潞”构成的Web系统，这是BS（BrowserZServer）架构网站应用软件的开端,也是曲端工程的开端. 1993年4月，M。SaiC浏览器作为第一款正式的浏览器发布. 1994年12月，W3C在伯纳斯李的主持卜成立，标志着万维网进入了标准化发展的阶段.这个阶段的网页还非常地原始,主要以HTM1.为主，是纯沛态的只读网页，被称为Web1.0时代。< 2>JavaScript诞生1995iV府景通信公司（NetscapeCommunicationsCorporation.亦称Netscape>设计了JaVaSCriPC脚本语言,并集成到NaYiga1.Or2.0版本中.随后微软公司存出JaVaSCriPt的潜力,模仿开发出JSCrip和VBScript.弁应用到IntCmn1.EXPIOrCr（简称正浏览器中，这也导致了船状和NetScape的两个浏览器之间发生产晶竞争。后来Navigator在浏览潺市场上落于下风.于是NetScape把JavaScript提交到欧洲计算机制造商协会（EUrOPeaneonipuierManufacuirer$ASSOCiatiOn,筒称ECMA）,推动制订ECMASCriP1.标准，JavaSaip1.主导了W3C的官方标准，成功实现JavaScript的标准走向国际.< 3>动态页面的发展JavaScript兴起以后,网页可以显示出浮动广告之类的动态效果.但这不是动态网页.以PHPCSP和ASP为代友的后端动态页面技术的应用才实现动态交互，这屿技术可以获取到服务器的数据信息，推动各种论坛以及搜盍引擎的发展,加快了Web的发展进程.< 4>Ajax开启Web2.0时代2004年以前的动态页面是由后端技术第动的，但是每一次交".数捌描要刷新一次网页，焕繁的页面刷新给用户帚来极差的体验感，直到AjaX技术的应用才解决这个问题。AjaX技术实现了异步HTTP请求，用户不用专门去等待请求的响应.就可以维埃浏览或操作网页.AjaX技术开启了WCb2.0的时代.G前端兼容性框架的出现Fircfox火狐浏览器和Opem（欧朋）浏览渊同IE浏览潺之间再次展开产品竞争，不同的浏览器之间，技术标准也会有差异，这样不利于兼容开发，于是催生了Dojo.Moo1.too1.s*YUIExUS、JQUCTy等前玷兼容框架,其中2006年诞生的JQuCry的应用最为广泛.< 6>HTM1.5的出现 2007年,W3C采纳THIM1.5规范草案,并在2008年1月22I1.正式发布.在HTM1.5新规范的指引下，各个浏览器厂商不断改进沏览器，谷歌以JavaScript引擎V8为基础研发的Chmne浏览器发展也十分迅速. 2014年10月28日，W3C正式发布HTM1.5.0标准。<7）前端三大框架 前前3大主JS框架是Angu1.ar,Rcct和Vuc. 2009年，以Chmne的V8引擎为基础开发的Nodejs发布，随后AnguIarJS±.后来被谷歌收的.AngUIar是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路出，过泄器，依籁注入等所有功能。 2011年，React诞生，于1013年5月开源，是一个用于构建用户界面的JaVaSeriP1.框架，核心思想是灼装组件， 2014年,尤雨潴开发出一套用于构建用户界面的渐进式框架Vue.它能战少不必要的DOM操作和提而渲染效率<8）ECMAScript6的发布2015年6月,ECMAScnpt6.0发布,这个版本增加了很多新的语法，更加提升了JaVaScriP1.的开发潜力。三、知识巩固（1）回收上深曲的学习目标，对本节课知识点诳行总结.<2）使用第一章课后作业。第二学时（认识HTM1.5、认识CSS3）一、回顾上节爆内容（I）时上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容,引出本节课主题.3）明确学习方向。> 认识IITM1.5的特点、新特性、文件结物> 掌握m11.5标签和元素的使用方法> 认识CSS3的特戊、新特性、选择器与属性的分类半弊CSS3的3种引入方式二、知识讲解（一）认识HTMIJI.HTMI.5的特点 简易性。HTM1.版本升级采用出集方式，从而更加灵活方便， 可扩展,HTM1.语言应用广泛，同时带来了加强功能，增加标识符等要求，HTMI.果取了类元素的方式,为系统扩展带来保证. 平台无关性。HTM1.可以使用在多种平台上，关联性不大. 通用性.HTM1.是基于标准通用标记谱中,它允许网页开发拧建立图片与文本相结合的复朵页面，页面可被网络上的任何人使刖各种类型的电脑或浏览器进行浏览.2 .HTM1.5的新特性 新的语义元素HTM1.5提供了新的元素来创建更好的页面结构，例如VhCadCr、nav,foo1.er、VartiCIc和VSeCIion。 新的友单控件,HTM1.5拥有多个新的灰用输入类型，这些新特性提供了更好的输入控制和验证，例如，数字（number）、F1.期（Me八时间（Iimc）、tE件（CmaiI）和电话（tc1.）. 强大的图像支持.HTMI.5可使用canvas和VSVg标签通过脚本语言（通常是JaYaSCrip）绘制图形。 强大的多媒体支持，HTM1.5规定了在网页上城入视频和音频元素的标准，即使用VVideo和audio元素。 强大的新APh1.ITM1.5可通过gckcation方法配介第三方的地图API实现地理定位.HTM1.5可以在本地存储用户的浏览数据,Wch存储需娈更加的安全马快速的数据存偌方式，用本地存储方式取代cookie存储方式更加安全便捷.3 .HTM1.5的文件结构文件基本结构主要由文件声明（!DOCTYPEhim、HTM1.文档htm1.）.文件头部（VhCad）和文件主体（body）4部分构成.1文件声明DOCTYPEh1.m1.是HTM1.5标i网页声明，表示向浏览器说明当前文件使用HTNn.5标准规范.2HTM1.文档VhtmIXmtm1.是HTM1.文件的文档标签.htm1.HTM1.文件开始标然，也被称为根标签，是指文件的最外层，VhtmA是HTM1.文件结束标卷.网页的所有内容都需要写在him1.xim1.标签里面，3文件头部headx小ead是HTM1.文件的头部标签，head是HTM1.文件头标签，VhSd是HTM1.文件尾标签.它用于定义文档的头部信息，是所有头部元素的容器，描述了文件的各种屈性和信息，头部元素有meta、111.escripVSIyIe、1.ink等标程4文件主体bodyvbody是主体标签，body是正文内容开始标记,vbody是正文内容结束标记。它用于定义文件的内容.可包含图片、文本、视频、音频、的链接、表格、列表等各种内容.在HTM1.文件中，!-注林内容”是HTM1.文件的注拜，刖于标注网页内容的注锋部分它的主要作用足时代码进行解释，给开发人员作参考.不会被浏览器解析和执行.4.标签和元素I)HTM1.标签HTM1.标签分为唯标签和双标签，单标签是由一个标签组成的，例如,有Vme1.a、img,VinPu1、brVIinkA等。HTM1.标签大多Ift为双标签.双标签由首标签和尾标签构成.音标艇格式为V标签名称,尾标签格式为/标签名称,其语法格式如下所示。标维名称内有/标签名称HTM1.标签的示例代码如下所示.P今天也是天气明明的一天p2HTM1.元素HTMI5文件由元素和标器构成.HTM1.元素指的是从开始标签(StartTag）到结束标签EndTag）的所有代码.整个HTM1.文件就像是一个元素集合，里面包含了许多元素.在HTM1.文件中某个元素的语法定义如下所示.标笠幺称怩性值！也1"胧性M2-"值2"内在/标花名称）HTM1.元素的示例代码如下所示.VdiVtit1.e="spring"小天到了div（二）认识CSS31CSS3定义CSS是层叠样式表，一种用于（增强）控制网页样式并允许将样式信息与网页内容分离的标记性语言，由W5C定义和维护,使用CSS可以实现网页内容与呈现的分离，不仅可以提升网页执行效率，更方便后期管理和代码维护.CSS可以改变HTM1.元素的样式.改变元素样式我们得先弄清她3件事：“改变的对象是谁"、“改什么类型的样式”和“具体改成什么样子”。“改变的对象是谁"要在HI-M1.元素中选择要改变的对望.这需要用到CSS选择器，CSS选和器用于指定、控制CSS要作用的HTM1.元素。“改什么类型的样式”要选择改变IrrM1.元素的具体样式属性，这需要使用CSS属性,CSS属性是指定选择符所具有的属性,“具体改成什么样子”就是指定这个样式屈性的属性伯。2.CSS3的特点 丰富的样式定义 易于使用和修改 多页而应用 层小 页面压缩3.CSS3新特性 新增选挣器。CSS3新增了结构伪类选齐器、伪元素选择涔、阖性选择牌等. 新的边框效果,CSS3新增了前角边框（border-radius、边框阴影(box-shadow)和边框图像(border-image).丰富*元泰的边框效果. 渐变。CSS3新埴了颜色的践性渐变1.ineargradie11和径向渐变(radia1.-gradient).使元素变得更加绚丽多变. 2D转换和3D转换.CSS3增加2D转换和3D转换.有位移(trans1.ate).(rotate)缗放sca1.e)和顺斜(SkeW)4种转换. 过渡，过渡就是把变换的过程细节放大. 动画动湎通过丘)仇的,规则指定一个CSS3样式和动画将逐步从目前的样式更改为新的样式. 弹性向模型。CSS3弹性自(F1.eNib1.eBoX或f1.exbox),是种行页面需要适应不同的屏幕大小以及设备类型时确保元案拂行怡当的行为的布局方式.4.CSS3引入方式 行内样式 内战样式 外锥样式样式的优先等级也有划分，行内样式优先于内嵌样式和外部样式，后两者是按照就近原则决定优先级。样式的引入方式不问，内容与样式的关联性也不同.关联性的强弱会影响后期代眄的维护.5.CSS3选择叁1基本选择器 通用选择潺 标签选择器类选择器 ID选择器选持器优先级为：通用选择器标铃选择器类选捽器VD选择器行内样式V1.mportant2)高级选择器 后代选择器 子代选择涔 并集选择器<3>结构伪类选择器 1first-chi1.d Jast-Chi1.d :n1.h-chi1.d() !nth1.astchi1.d()结构伪类选择那可根据文档结构的关系来兀配特点的元於.<4>伪元素选择器 :first-1.etter :first-1.inc :se1.ection "before :aftcr伪元素选择器可用于在文档中插入假象的元素，在新版本里使用“:“与”:”区分伪类和伪元素。<5>属性选择器 IftI性名 夙性名=“属性值”】 ICIasS"='、阑性名"J c1.ass"字符串'> IC1.aSs$="字符串 c1.ass5"字符申'*属性选择器是根据标签的属性来匹配元素，使用中括号(U)进行标识。6.CSS3常用属性<D字体属性CSS3中对字体样式的设置主要行字体风格、字体粗细、字体大小、字体名称等.千绛教育HTM1.5÷CSS3+JavaScript网页N殳计基础与实战教学设计语在名称：HTM1.5+CSS3+JavaScriPt网页设计一与实战授课年级：授课学期：教师3名：2022年08月25日课程名称第5政我单与表唯设计效果计划学时6学时内容分析本章介绍了表单的fbrm标荏、ini标彩、WdeC标签、VteXu1.rea标签、VfIe1.dCst标签,新增的表单控件,以及border-radius属性、boxshadow属性、background-size,Wt教学目标与教学要求【知识目标】15 .了解表弟的组成16 .理解ge1.方式与post方式的区别17 .掌JKvfie1.dseo标签的使用18 .认识表单新增控件【技能目标】19 .掌握VformA标签、inpui标签、VsekCp标签、textarea标签的应用20 .拿握border-radius屈性、box-shadowM性、background-size腐件的应用【思政育人目标】21 .培养学牛.博康的审美观念22 .引导学生在学习中健全职业道德的规范.23 .引导学生创新思维和探索的科学精神.教学理点掌握inp心标签的各个控件，掌握sckx标签、VtcxiarcC标签的使用，节IfdbonkiadiusKKhbox-shadowtt1.IKIekgr（Hmdsize.M性的应用教学难点实现本承节的3个小节案例教学方式课堂讲解配合PPt演示1学时我学过程第一学时（表单组成、Vform标签）一、提出需求，导入学习任务1）思考如何创建衣单以及对衣单进行效果设计.进入一个新的网站后，用户通常需要进行注册或登录粉证，这就得要使用到表单.网站中的用户登录、注册页附.以及一些收集用户反馈信息的调杳表，就是通过表单制作的.我单作为用户与网页之间或要的交互工具,了解和掌梅表单的应用是卜分重要的，2）明确学习方向，了解表单的组成理解get方式与POSt方式的区别method陋性规定如何发送衣单数据(衣单数据发送到auion属性所规定的页面)，表总数据有常用的ge1.(默认)和POS1.两种提交方式,表单数据可以作为UR1.变量<ne(hod=',gef)或者HTTPPo§i(method="PoST'的方式来发送“ get方式 PS1.方式<3)CnCtyPC属性SC1.ypeM性规定在发送到服务器之前应该如何对衣单数据进行编码。enc1.ypeW性可取值为app1.icationx-u,ww-form-ct>dednu1.tipart',fo11ndii1.a和tcxt/p1.ain. app1.ica(ionwww-fombur1.encode<1. mu1.tipartfc)rm-data tcxt/p1.ain 4)targe1.WtfetargetM定义提交地址的打开方式.常用的打开方式有.se1.f(默认)和J)Ianko三、知识巩固 1)回收上深曲的学习目标，对本节课知识点诳行总结.<2)使用本章课后作业。第二学时(VinPUt>VIHbe1>标签)一、回顾上节爆内容(I)时上节课布置的作业以及学生提出的问题进行答疑解惑。(2)回顾上节课内容,引出本节课主题.3)明确学习方向。>堪握input标签的各控件二、知识讲解获取总富秒值有5种方式.示例代码如卜、vardate1.-4newDateO；vardatc2=Datc.now();vardate3-newDate().getTiJe(1.;vardate4-newDate().va1.uef();vardate5=Date.parseC2021-12-715:00:00");荻取特定时同的怠症杪数，卷效为I1.期字符串，若HjH字符卡的格式不正曲，则返网NaN3.Date对象方法特定的时间类鞭可以通过Da1.e对象的具体方法进行获取或设置，常用的DaIC对象方法如下. getFu1.1.YearO gctMonth() gcDatcf) ge1.Day() gctHours().getMinutes() ge1.Seconds(> gctMi1.1.iscconds() ge(Time() SCtFu1.1.YcarO MMMOnIh() setDatd) SetDayO SeIHQUrSo SetMinutesO setS<xonds()(二)案例讲解讲解跨年倒计时案例.三、知识巩固<1)回顾上课前的学习目标，对本节课知识点进行总结。<2)使用本率课后作业.第五学时一、回顾上节课内容(1)对上节课布置的作业以及学生提出的何虺进行答疑解窸.(2)回顾上节课内容，引出本节课主题.(3)明确学习方向.>掌握数组的使用二、知识讲解(一)*fi13数组是一种特殊的变Sb能够一次存放1个以上的(ft,理论上数组段多可存放65535个1.JavaScrim变量可以是对双，而数组是特殊类型的对您，在JaVaSCriPt中对数如使用IWef运算符会返回“objcc1.”,数细通常使用数字来访问其“元素通过引用索引号下标号来引用某个数组元素,数组索弓I从0开始,例如01是数组中的第I个元素，“1是笫2个元素，2.创建数蛆创建数组有2种方式，第1种方式是使用数组文本创建数组,第2种方式是使用new操作符创建数组，<1)数组文本方式使用数组文本是创建JaVaSCrim数组最简单的方法,其语法格式如下所示Vararray-name-(item1.,1.tem2,.);Wvararc-|;制建一个空数81vararr1.=15,34,26,H1.；创建一个常初始元素的tff1.<2)new操作符方式使用OeW操作符创建数组的语法格式如下所示。vararray-name-newArrayCitecn1.ritem2r.;例Vararc-newArrayO;创it,个空故组vararr2-newArray<22r13r5/39/2);他建，个僭初始元素的tf11以上2种方式效果完全一样,出于简洁、可读性和执行速度的考虑,通常使用数组文本方法创建数组.(二)数妙I作方法数组中常见的操作方法有添加、剧除、转慢、筛选、翻转、排序等,接下来将具体介绍数组相关操作方法，i添加、刷除数粗添加数组和删除数组是数组中常见的搽作方法,主要有PUShO、un$hifj。、shift。、popO'sice'SP1.iCeo等方法。 push() unshift() shif1.() pop() s1.fce<) sp1.ice()2 .转换数俎数组转换为字符申有2柠操作方法，分别为BS1.rinQ和join。方法。 toString() join()join()方法有3种用法，笫1件用法是join。方法设置参数，以指定分隔符分隔.如join(T)：第2种用法是join。方法不设置参数,以逗号分隔，(Q1.join();第3种用法是join。方法参数为交，没有分隔符分隔，如join("),3 .遑历数俎数组遍历就是操作数组中的每一个元素.君见的遍历数组的方法有for新环、for.in新环、QrEaeh遍历、map遍历、every遍历、Soine遍历、fi1.ter遍历等.for循环千绛教育HTM1.5÷CSS3+JavaScript网页N殳计基础与实战教学设计语在名称：HTM1.5+CSS3+JavaScriPt网页设计一与实战授课年级：授课学期：教师3名：2022年09月07日课程名称第8章实现HTM1.5应用计划学时8学时内容分析本章介绍了、讪。标程和VWdk»标签，DOM操作媒体文件的方法与属性，BOM的概述地理定位概述，HTM1.5的gskH沁n属性，canvas的基本使用.canvas绘制图形和文本CanVaS图像与变形以及ViVg标签教学目标与教学要求【知识目标】24. 了解BOM中Wind(W对象的4个基础M性25. 认识地理定位26. 了解VSVg标签【技能目标】32 .掌握vidcc标签和Vaudio标卷33 .掌握DoM愫作媒体文件的方法与属性4.常榴HTM1.5的g0)1.ocaJion网性35 .掌握CanVaS的基本使用36 .掌握CanVaS绘制图形和文本37 .掌握CanVaS图像与变形【眼政育人目标】38 .培养学生健康的审美观念39 .引导学生在学习中健全职业道迩的规范.40 .引导学生创新出M和探索的科学精神.教学Hi点掌握video标笠和VuK1.io标笠的应用、隼握geiCurremPo疝ion。方法的使用、能够使用CanVaS绘制图形和文本教学难点实现本章节的3个小节案例教学方式课堂说好配合PP1.演示I学时教学过程第一学时(vidcoS)一、提出Ii求，导入学习任务(1)思考如何通过HTM1.5新元素实现HTM1.5的相关应用，Hn1.1.5是目1.最新的HTM1.标准,是专门为承找丰。的web内容而设计的,并且无，外插件.H-有新的诏义、图形以及多媒体元素，1canvas,videu等元素.，并且HTM1.5提供的新元索和新的API.简化TWeb应用程序的搭建,如通过Geo1.ocationAPI能更方便的获取到地理信息。(2)明确学习方向。掌握video)标签二、知识讲解()VVidCo>标签1 .定义video标签定义视频，比如电影片段或其他视频流，<video>标签是HTM1.5的新标签，使用<ide>标签可以在网页上宜接插入视频文件，而不需要任何第三方插件.2 .优势 跨平台、好升级、好维护.相对于原生APP其开发成本较低. 具有良好的移动支持，比如支持手势,本地存储和视频续播等，通过HTM1.5可实现网站移动化。 代码更加简洁交互性更好.但<video>标签的不足之处是茶容性差，不同的浏览涔支持的视频格式会不一样,这就朴敢了可能在网页上无法播放该视频。3 .视频格式video标签支持的视频格式干jMPEG4、WebM和Ogg, MPEG4mMP4.是带有H.264视顺编码和AAC音顺编码的MPEG4文件. WebM是带有VPS视领编码和VOrbiS音频编码的WebM文件， OggwiIhetira视颇编码和VOrbiS音频编码的Ogg文件.4 .语法格式VYideo>标签的语法格式如卜所示。<videcsrc-视频文件路径”><vfdeo>或者<video><sourceBrC-"初领文件路诧"Wpe"ftJ8格式1.rCe><video>在上述语法中，$rv是SOUNe的缩写，意思是来源，实际指视菽的路径。VSOUKx>标签为媒体元族(比如<vide>视频和<audio>W频)定义煤介资源.WC期性规定媒体文件的UR1.地址，Iypc蜀性规定资源的媒体类型.source标签可以写多个，这是为了祭容各个浏览器，但里.面只能有一个MV属性说明文件路径,指定IyPC属性兼容不同浏览器解码支舟.type属性的属性值行VidCOIGgg、VidCO/mp4和VideOZwcbm,例如，<sourccWC="happy.mp4”type="videa,mp4Mx/soura:>,53属性<"deo>标甚的常用属性有contro1.s>autop1.ay>1.oopmuted>poster%pre1.oad>width、heigh1.等。 contro1.s auio1.a), 1.oop muted poster pre1.oad WidIh height6.演示说明在网页中添加一个视频文件，使用<video>标签僦性设附.该文件.三、知识巩固<1)回顾上课前的学习目标，对本节课知识点迸行总结。<2)使用本章课后作业。第二学时(<audi0>标签、DOM操作媒体文件)一、回顾上节课内容(I)时上节课件置的作业以及学生提出的问题进行答疑解惑。(2)回联上节课内容.引出本节课主JS(3)明确学习方向。> 堪押audio标签> 熟练使用I)(W操作媒体文件二、知识讲解(一)<audio>标签I.定义<audio>标签定义声都比如自乐或其他音频流.V1.Udi。>标签是HTM1.5的新标拄，使用VaUdif»标签可以在网页上直接插入音Ift文件，而不辐要任何第三方插件。2.音频格式<audio>标签支持的音频格式有MP3、Vorbis和Wav. MP3是一种哲频乐缩技术,其全林为动态影像£家压缩标准吾频层而3(MovingPictureExpertsGroupAudio1.ayer111.简称MP3).被用来大幅度地降低音频数据 Vorbis是类似于ACC的另一种免粉和开源的音频编码，用于替代MP3的下一代音频压缩技术. Wav是录音时用的标准的Windows文件格式，文件的扩展名为-WAV.数据本身的格式为PCM或质缩型,属于无损音乐格式的一种.3.语法格式VaUdio>标签的谱法格式如下所示<audioyr.音箱文件路桧"><audio>或?f<audio><source版文件路低”type-”有领格式"><sourue><audio><audio>标签的使用方法与<video>标签基本相同。(一)DOM操作媒体文件1掾作碗HTM1.5为VVideO元素和adio元洪提供了用于DOM操作的方法。 Pay() PauSeo IoadO rcqucstFu1.1.scrccn()2.掾作M性HM1.5为VVideo元索和VaUdio元素提供j用于DOM操作的属性. CurrentTinw CurrcntSrc duration vo1.ume paused muted ended error P1.aybackRate 1.oop(三)案例讲解讲解JS控制视频案例。三、知识巩固1)回顾上课徜的学习f1.标，对本节课知识点迸行总结。2)使用本币课后作业。第三学时(BOM¼WindO3对象)一、回顾上节爆内容(1)对上节课倚置的作业以及学生提出的何甥进行答疑解惑。(2)同颈上节课内容，引出本节课主JB.(3)明确学习方向。>了解BoX二、知识讲解（）BOM1.了解BOM浏货器对象帙m（BrowserObjectMode1.BoM）提供了独立于内容但可以与浏览器窗口进行交互的对象，使JavaScript有能力与浏览器“对话''J对话”指对浏览器的操作，如改变窗口大小、打开新窗口、关闭窗n、弹出对话框、诳行导航以及获取客户的一些信息（如捌览器名称、版本和屏窑分辨率）等。（二）window对象，1.定义在BOM中利用window对象获取浏览器窗口，BOM是一个分层结构，WindOW对象是整个BoM的核心（顶层）对象.表示浏览潺中打开的窗口。在浏览潞中打开网页时，首先看到的是浏览器窗口，即顶层的WindowXj象，可以使用WindOW标识符引用。”顶层对象”是指被裔一层的对象.其他所有对象郴是它的下属JavaScript中规定,浏览涔环境的所有全身变瓜都是window对象。WindOW对象中定义了一些属性,如代表IOCation对象的IOCatiOn胧性表示浏览器当前打开页面的UR1.信息：代太history对望的history属性我示浏览器历史访问列表：代农ku11en（对象的document属性表示浏览器中打开的文档：代表navigator对象的navigator属性包含浏览!本身相关的信息.ZJotation对象<1）定义Igation对象衣示浏览器当前打开页面的UR1.信息.在网络中，统一资源标识符（UnifOrmResource1.oca>r,UR1.）是信息资源的,种字符申表示方式,统称为网址.通常UR1.的谙法格式如下所示.scheme：/hostna:portZpathTquerys1.ringIfragrrieA1.<2）属性<at1on对象中定义了一系列的域性,用于获取UR1.各部分内容. href hash host hostname pathname protoco1. port search 3）操作UR1.的方法 Tdoad（）方法 rep1.ace。方法 assign。方法3.hist<>ry对藏<1）定义history对象代表浏览器历史访问列表，保存用户访问网页的历史记录.history行一个式示浏览器历史访问列表UR1.数址的域性ICngth,数也包含所有历史记录数，即所有可前进和后退的记录数;鼠出于安全方面的考虑，开发人员无法获取history对象中的具体信息，但可以借助历史访问列表，在不知道实际访问URI.的情况下实现的进或后退.<2）前进或后退方法 forward。方法 back。方法 go<>方法4.navigator对霰<1）定义navigatorXj象最早是在NetscapeNaviga1.or2.0中引入的,现在己成为识别客户剧浏览器信息的事实标准.即所有支持JavaScript的浏览器每有navigator对象的使用。<2）对象属性navigator时软中包含了常用于检测浏览器信息的屈性.(一)地理定位HTM1.5frGeokaionAP(地理位况应用程序接口)用于获得用户的地理位置,签于该特性可能设犯用户的隐私,除非用户同意.否则用户位置信息是不可用的，地埋定位(Geo1.ocation)是通过HTMIS技术狭取到经纬度值，再配合第三方的地图API接口，便可以展现当前应用所在的位置。2 .地理位置获取流程 (I)打开需要获取位置的Web应用. (2>应用向浏览涔请求地理位置，泡问用户是否允许获取当脚位置信总. (3)如果用户允许，浏览器从设茁上获取信息， <4>浏览器将获取到的信息发送到一个信任的位置服务器,服务器返回地理信息. (5)浏览器持续追踪用户的地理位置 (6)需要与第三方地图AP1.闻合.交互呈现位置信息.3 .关于地图API目前常用的第三方地图API为百度地图API,用户可在网站上搜索“百度地图开放平台”进入AP1.(应用程序接1)，根据需要选择相关的开发文档实现地理定位。<1)介绍百度地图JaVaSCriPtAPIG1.VI.0是套由JavaScript语言编写的应用程序接口,可帮助用户在网站中构建功能丰富、交互性委的地图应用，支持PC端和移动端基于浏览涔的地图应用开发,且支持HTM1.5特件的地图开发.百度地图JaVaSCriP1.AP1.支持HTTP和HTTPS,免也对外开放，可直接使用,接口使用无次数眼制JavaScriptAPIG1.使用了WebG1.对地图、覆靛物等进行渲染.支片3D视角展示地图，G1.版本接I1基本向下兼容，迁移成本低，目前V1.Q版本支持了范本的3D地图展示、触本地图控件和班族物.<2)使用范困百度地图APIUJ让用户在接受使用条款约束的情况卜.，在网站上显示百度地图图片,进行地点搜索、路线查询和交通流量显示等操作.用户只可使用在百度地图API文档中所列明开放的AP1.功能来对API相关服务数据的结果进行展示不得直接存取、使用内部数据、图片、程序.模块或是任何其他百度地图的服分或功能.(二)navigator.geo1.ocation属性1 .定义HTM1.5为navigator对象新增了一个geokcation属性，geo1.ocaion属性是属于地理定位(Gco1.ocation)对象，UJ获取浏览者的地理位置，利用JavaScript接1中navigator.geo1.ocation性的3个方法可以实现HTM1.5地理定位的操作，这3个方法分别为geiCu11entPosi(ion(),WatChPOSiti<>n()和c1.earWatcW).2 .getCurrentPositiom)<1)定义gciCurrcmPHMiOm)方法用于获取用户当前地理位置信息.其谙法格式如下所示。navigator.go1.ocatior.getCurrentPos11io