BOM

Borwser Object Model --- 浏览器对象模型
顶级对象：window

window对象 包含的对象

1. 浏览器的信息 navigator对象

navigator对象 包含的对象：

// 以下内容以Chorm浏览器为例

// 1.1 返回浏览器的代码名 --- 内核名称
console.log(window.navigator.appCodeName);    // Mozilla

// 1.2 返回浏览器的名称
console.log(window.navigator.appName);    // Netscape

// 1.3 返回浏览器的平台和版本信息
console.log( window.navigator.appVersion ); 

// 1.4 返回浏览器用于 HTTP 请求 的 用户代理 头部的值
console.log(window.navigator.userAgent);

2. 浏览器的历史记录 history对象

history对象 包含的对象：

// 2.1 返回到上一个页面
history.back()

// 2.2 前进到下一个页面
history.forward()

// 2.3 前进/返回到若干页面
history.go(参)
//参数指定页数 如 -2 则返回到上上个页面

3. 浏览器的地址栏信息 location对象

location对象 包含的对象：

// 3.1 设置或返回地址栏中完整的url
// 设置url --- 跳转页面
window.location.href = 'https://www.baidu.com/'
// 设置属性值时 用引号包裹 用等号连接属性 下同

// 返回当前url
window.location.href()

// 3.2 设置或返回地址栏中的锚点
// 设置锚点 --- 不会跳转页面
window.location.hash = '#abc'
// 应用场景：通过改变锚点来切换到nav栏对应的内容

// 返回当前地址栏中的url
window.locaton.hash()

// 3.3 设置或返回地址栏中的数据
window.location.search = '?abc=123&def=456'
// 数据的格式：?键=值&键=值
// 地址栏内容的组成：文档路径 + 数据 + 锚点

// 返回当前地址栏中的数据
window.location.search()

// 3.4 网页重定向 --- 跳转网页
window.location.assign('https://www.baidu.com/')

// 3.5 用指定地址替换当前地址 --- 跳转网页
window.location.replace('https://www.baidu.com/')

// 3.6 重新加载本页面 --- 刷新
window.location.reload()

4. 浏览器窗口的尺寸

返回浏览器窗口的高度
window.innerHeight

返回浏览器窗口的宽度
window.innerHeight

    [返回值的单位为像素]
    [计算范围包括滚动条区域]
    [应用场景：用JS手动实现媒体查询]

解码、编码

原由：地址栏默认会将符号、汉字进行url编码

// 编码 encodeURI('目标字符')
// 解码 decodeURI(‘编码’)

案例：
var code = encodeURI('前端学习')
// 编码
console.log(code);    // %E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0
// 解码
console.log(decodeURI(code));    // 前端学习

定时器

延迟定时器
setTimeout(参1,参2)
    [参1指定要执行的函数 参2指定延迟时间]
    [返回值为数字 意为 第num个定时器]
    [只执行一次]

间隔定时器
setInterval(参1,参2)
    [参1指定要执行的函数 参2指定每次执行之间的时间间隔]
    [返回值为数字 意为 第num个定时器]
    [默认死循环执行]

关闭定时器
clearTimeout(定时器id/定制器的返回值)
clearInterval(定时器id/定制器的返回值)