01-BOM浏览器对象模型

1.1-BOM与DOM介绍

• JavaScript语言由三部分组成

  • ECMAJavaScript：定义了js的语法规范

• Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象

  • Dom定义了一套操作HTML文档的API（节点的增删改查）

• Bom：Brower object model浏览器对象模型 例如：一个浏览器的窗口就是一个window对象

  • Bom定义了一套操作浏览器窗口的API

• Bom主要由五大对象组成：

  • window:浏览器核心对象

  • location：包含当前页面的URL信息

  • history：history对象主要用于记录你当前窗口的历史记录

  • navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等

  • screen：获取用户电脑的屏幕分辨率

    • 这个一般不用，因为对开发者没啥作用

    • 1.2-window对象

    • 1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象

      • (1).所有的全局变量都是window对象的属性：最顶级的对象

        • document对象

        • bom对象

        • 全局的方法：alert(),setInterval()...........

      • (2).只要是window的属性和方法，在使用的时候都可以省略window

        • 例如：window.alert() 可以省略window写成alert()

        • 例如：window.document 可以省略window写成document

      • (3).window对象有一个特殊属性叫做name

        • 它永远都是一个字符串，无论给他赋什么值

    • 2.window对象有两个常用的方法：open()与close()

      • open():打开一个窗口

      • close():关闭一个窗口

      • 1.3-window对象三个事件

        window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

      • 1.window.onload:界面上所有的内容加载完毕之后才触发这个事件

      • 2.window.onbeforeunload:界面在关闭之前会触发这个事件

      • 3.window.onunload:界面在关闭的那一瞬间会触发这个事件

      • 1.4-location对象

      • 1.location对象：包含当前页面的URL信息

        • url：全球统一资源定位符

        • url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径

        • 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解

      • 2.location对象有三个常用的方法

        • （1）打开新网页：location.assign('你要打开的新网页的url')

        • （2）替换当前网页：location.replace('要替换的网页url')

        • (3) 刷新当前网页: location.reload()

        • 1.5-history对象

          history对象主要用于记录你当前窗口的历史记录

        • 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）

        • history.forward():前进

        • history.back():后退

      • 1.6-navigator对象

        navigator对象：包含当前浏览器的信息

      • 工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

    • ==02-localstorage与sessionstorage==

      1.1-localstorage

      1.localStorage:本地存储

      将数据存储到浏览器

      2.语法

      存： localStorage.setItem('属性名','属性值')

      取： localStorage.getItem('属性名')

      删： localStorage.removeItem('属性名')

      清空： localStorage.clear()

      3.注意点

      a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

      b.永久存储。除非自己删，否则一直存在于浏览器

    • 1.2-sessionStorage

      1.sessionStorage相当于短命版的localStorage，其他用法完全一致

      2.两者区别：HP值不同

      localStorage：永久存储（存在硬盘，HP值无限）

      sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

      03-localStorage如何存储对象类型数据

       1.localStorage如何存储对象类型数据： 使用JSON格式字符串

              2.JSON对象是什么 ： 本质是一种字符串格式
                  '{"name":"admin","password","123456"}'
              3.JSON对象作用： 解决跨平台兼容性
                  * 实际开发中，我们的数据来源于服务器。 而服务器并不一定是用js语言开发的，例如python、java、c++等，
                  不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言都支持的格式，就是JSON格式对象。 json格式本质是一个字符串，里面所有的数据都要用双引号包起来
              4.JSON与js互转
                  4.1 json转js : JSON.parse(json对象)
                  4.2 js转json :  JSON.stringify(js对象)