JS学习笔记(day08)

Day8(BOM)

一、BOM的简介和功能

- BOM（Browser Object Model）： 浏览器对象模型
- 其实就是操作浏览器的一些能力
- 我们可以操作哪些内容
  - 获取一些浏览器的相关信息（窗口的大小）
  - 操作浏览器进行页面跳转
  - 获取当前浏览器地址栏的信息
  - 操作浏览器的滚动条
  - 浏览器的信息（浏览器的版本）
  - 让浏览器出现一个弹出框（alert/confirm/prompt）
- BOM 的核心就是 window 对象
- window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

二、获取浏览器窗口的尺寸

• innerHeight 和 innerWidth

• 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

• screen.width和screen.height

屏幕分辨率尺寸

    window.screen.width  // 屏幕分辨率宽度
    window.screen.height // 屏幕分辨率高度

三、浏览器的弹出层

`alert` 是在浏览器弹出一个提示框
window.alert('我是一个提示框')
    这个弹出层知识一个提示内容，只有一个确定按钮
    点击确定按钮以后，这个提示框就消失了 

`confirm` 是在浏览器弹出一个询问框
 var boo = window.confirm('我是一个询问框')
    这个弹出层有一个询问信息和两个按钮
    当你点击确定的时候，就会得到 true
    当你点击取消的时候，就会得到 false

`prompt` 是在浏览器弹出一个输入框
 var str = window.prompt('请输入内容')
	这个弹出层有一个输入框和两个按钮
 	当你点击取消的时候，得到的是 null
 	当你点击确定的时候得到的就是你输入的内容

四、获取地址栏相关信息

• location

• 属性

• href 获取的是完整的网址

• protocol 协议

• hostname 域名

• host 域名+端口号

• port 端口号

• pathname 路径部分

• search 请求参数

• hash 哈希值

• origin 源

• 跳转

• location.href = 新网址

• location.assign(新网址)

• location.replace(新网址)

五、一个完整的网址组成部分

 一个完整网址组成部分
    - 协议 http:// https://
    - 域名 www.baidu.com   www.taobao.com
    - 端口号 一般来将 端口号是隐藏的  范围[0,65535]  http 默认端口号80   https 默认端口号443
    - 路径
    - 请求参数 `?a=1&b=2&c=3`
    - 哈希值 `#名称`
    - 源 协议+域名+端口号

六、history历史记录

+ 记录用户打开页面的长度

+ history.back() 返回上一个历史记录

+ history.forward() 去下一个历史记录

+ history.go(num) num为正数 代表前进几个历史记录 num为负数 代表后退几个历史记录

七、刷新页面

方法一： history.go(0)
方法二： location.reload()

八、定时器

+ 定时器
    - 每设置一个定时器 都会返回一个id  这个id具有唯一性 可以根据这个id清除对应的定时器
    - 间隔
            var id = setInterval(function(){
                // 此处代码会间隔ms毫秒执行一次
            }, ms)
    - 延迟
            var id = setTimeout(function(){
                // 此处代码会延迟ms毫秒执行一次
            }, ms)

    - 清除定时器
        - clearInterval(定时器id)
        - clearTimeout(定时器id)

九、本地存储

 - application-->storage
    - 跨页面传参 一个页面把数据传递给另一个页面
    - localStorage是永久存储
    - sessionStorage是会话级别的存储
    - localStorage
        + 存  localStorage.setItem(名称, 值)
        + 取  localStorage.getItem(名称)
    - sessionStorage
        + 存  sessionStorage.setItem(名称, 值)
        + 取  sessionStorage.getItem(名称)