《JavaScript程序设计》课件——项目6-3 BOM常见对象.pptxVIP

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目6-3BOM常见对象5任务总结

知识回顾任务导入知识讲解任务实施任务总结BOM的构成？常用的window对象事件有哪些？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成获取URL参数案例重点：location对象navigator对象history对象

知识回顾任务导入知识讲解任务实施任务总结location对象1.location对象1.1URL的组成URL组成：各部分说明protocol网络协议，常用的如http，ftp，mailto等host服务器的主机名，如port端口号，可选，省略时使用协议的默认端口，如http默认端口为80path路径，如“/web/index.html”query参数，键值对的形式，通过“”符号分隔，如“a=3b=4”

知识回顾任务导入知识讲解任务实施任务总结location对象1.2location常用属性location常用属性：属性说明location.search返回（或设置）当前URL的查询部分（“?”之后的部分）location.hash返回一个URL的锚部分（从“#”开始的部分）location.host返回一个URL的主机名和端口location.hostname返回URL的主机名location.href返回完整的URLlocation.pathname返回URL的路径名location.port返回一个URL服务器使用的端口号tocol返回一个URL协议

知识回顾任务导入知识讲解任务实施任务总结location对象【案例】获取URL参数创建login.html登录页面：form?action=index.html??用户名：?input?type=text?name=uname??input?type=submit?value=登录/form

知识回顾任务导入知识讲解任务实施任务总结location对象创建index.html首页：console.log(location.search);?//?结果为：?uname=andy????//?1.去掉search中的问号“?”????var?params?=?location.search.substr(1);????console.log(params);//?结果为：uname=andy????//?2.把字符串分割为数组????var?arr?=?params.split(=);????console.log(arr);?//?结果为：[uname,?andy]????var?div?=?document.querySelector(div);????//?3.把数据写入div中????div.innerHTML?=?arr[1]?+?欢迎您;

知识回顾任务导入知识讲解任务实施任务总结location对象1.3location的常用方法常用方法：方法说明assign()载入一个新的文档reload()重新加载当前文档replace()用新的文档替换当前文档，覆盖浏览器当前记录

知识回顾任务导入知识讲解任务实施任务总结navigator对象2.navigator对象2.1常用属性属性说明appCodeName返回浏览器的内部名称appName返回浏览器的完整名称appVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用Cookie的布尔值platform返回运行浏览器的操作系统平台

知识回顾任务导入知识讲解任务实施任务总结navigator对象2.2常用方法常用方法javaEnabled()：指定是否在浏览器中启用Java。

知识回顾任务导入知识讲解任务实施任务总结history对象3.history对象3.1常用属性history.length属性：返回历史列表中的网址数。

知识回顾任务导入知识讲解任务实施任务总结history对象3.2常用方法常用方法：方法说明back()加载history列表中的前一个URLforward()加载history列表中的下一个URLgo()加载history列表中的某个具体页面

知识回顾任务导入知识讲解任务实施任务总结完成获取URL参数案例

知识回顾任务导入知识讲解任务实施任务总结总结：本章主要讲解了location对象、history对象的定义、常用的属性和方法。通过本章的学习，读者可以使用BOM对象中的属性和方法实现URL导航的相关操作。作业：完成课上案例。

感谢聆听2021