JavaScript中BOM学习

BOM（windows对象）

BOM(Browser Object Model )是浏览器对象模型

• window对象是一个全局对象，也可以说是JavaScript中的顶级对象

• 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

• 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

• window对象下的属性和方法调用的时候可以省略window

// document.querySelector() = window.document.querySelector()
console.log(document === window.document) 
​
function fn() { console.log(11)}
window.fn()
​
var num =10
console.log(window.num

JS 执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是:如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步任务 console.log(1)

console.log (2)

同步任务都在主线程上执行，形成一个执行栈。

异步任务 JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型: 1、普通事件，如click、resize等 2、资源加载，如 load、error 等 任务队列 3、定时器，包括setInterval、setTimeout等 异步任务相关添加到任务队列中(任务队列也称为消息队列)。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop)。

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫setTimeout

语法:

setTimeout(回调函数，等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行,平时省略window

setTimeout(function () { img.style.display = 'none'},3000)

清除延时函数:

let timer = setTimeout(回调函数，等待的毫秒数) 
clearTimeout(timer)

注意：延时器需要等待,所以后面的代码先执行，每一次调用延时器都产生新的，要加变量。

对象

Windows对象的常用方法

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。

属性名	例子	说明
hash	"#contents"	utl中#后面的字符，没有则返回空串
host	www.wrox.com:80	服务器名称和端口号
hostname	www.wrox.com	域名，不带端口号
href	http://www.wrox.com:80/WileyCDA/?q=javascript#contents	完整url
pathname	"/WileyCDA/"	服务器下面的文件路径
port	80	url的端口号，没有则为空
protocol	http:	使用的协议
search	?q=javascript	url的查询字符串，通常为？后面的内容

location. href

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

location.search

search 属性获取地址中携带的参数，符号?后面部分。

console.log(location.search)

location.hash

hash 属性获取地址中的哈希值，符号#后面部分

console.log(location.hash)

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

location.reload()

reload 方法用来刷新当前页面，无参数为普通刷新，传入参数true 时表示强制刷新。

<button>点击刷新</button>
<script>
let btn = document.querySelector('button') 
btn.addEventListener('click',function () {
location.reload(true)
// 强制刷新 类似 ctrL +f5})
</script>

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息。

通过 userAgent 检测浏览器的版本及平台

//检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
//验证是否为Android或iPhone
const android =userAgent.match(/(Android);?[¥s¥/]+([¥d.]+)?/) 
const iphone =userAgent.match(/(iPhone¥sOS)￥s([¥d]+)/)//如果是Android或iPhone，则跳转至移动站点 
if (android ||iphone) {
location.href = 'http://m.itcast.cn'
}

Screen 对象

availHeight

声明了显示浏览器的屏幕的可用高度，以像素计。 语法：screen.availHeight

console.log("长:"+screen.availHeight,"宽:"+screen.availWidth)//输出结果：长:896 宽:414

availWidth

声明了显示浏览器的屏幕的可用宽度，以像素计 语法：screen.availWidth

console.log("长:"+screen.availHeight,"宽:"+screen.availWidth)//输出结果：长:896 宽:414

colorDepth

返回目标设备或缓冲器上的调色板的比特深度。 语法：screen.colorDepth

console.log(screen.colorDepth)//我电脑输出结果：24

height

声明了显示浏览器的屏幕的高度，以像素计。 语法：screen.height

console.log(screen.height);//输出结果：896

pixelDepth

返回显示屏幕的颜色分辨率（比特每像素） 语法：screen.pixelDepth

console.log(screen.pixelDepth)//输出结果：24

width

声明了显示浏览器的屏幕的宽度，以像素计。 语法：screen.width

console.log(screen.width);//輸出結果：1920

histroy对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

history 对象一般在实际开发中比较少用，但是会在一些OA办公系统中见到。

<script>
const back = document.querySelector('button:first-child') 
const forward = back.nextElementSibling
back.addEventListener('click'， function () {
// 后退一步
// history.back() 
history.go(-1)
})
forward.addEventListener('click', function () {
// 前进一步
// history.forward()) 
 history.go(1)
})
</script>

本地储存

Cookie

cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。

cookie中常用属性的解释：

• Name：这个是cookie的名字

• Value：这个是cooke的值

• Path：这个定义了Web站点上可以访问该Cookie的目录

• Expires：这个值表示cookie的过期时间，也就是有效值，cookie在这个值之前都有效。

• Size：这个表示cookie的大小

Cookie使用的常见方法

java中Cookie对象的方法

• new Cookie(String name, String value)：创建一个Cookie对象，必须传入cookie的名字和cookie的值

• getValue()：得到cookie保存的值

• getName()：获取cookie的名字

• setMaxAge(int expiry)：设置cookie的有效期，默认为-1。这个如果设置负数，表示客服端关闭，cookie就会删除。0表示马上删除。正数表示有效时间，单位是秒。

• setPath(String uri)：设置cookie的作用域

HttpServletRequest和HttpServletResponse对Cookie进行操作的常见方法

• response.addCookie(Cookie cookie)：将cookie给客户端进行保存

• resquest.getCookies()：得到客服端传过来的所有cookie对象

localStorage

语法:

存储数据:
localStorage.setltem(key, value)
获取数据:
localStorage.getltem(key)
删除数据:
localStorage.removeltem(key)

<script>
//要存储一个名字 'uname'，'老师"
//localStorage.setItem('键','值')
localStorage.setItem('uname','老师')
//获取方式 都加引号
console.log(localStorage.getItem( 'uname')
//删除本地存储 只删除名字
localStorage.removeItem('uname')
//改
localStorage.setItem('uname','学生')
</script>

本地存储只储存字符串类型。

sessionStorage

特性:

• 生命周期为关闭浏览器窗口

• 在同一个窗口(页面)下数据可以共享

• 以键值对的形式存储使用

• 用法跟localStorage基本相同

以上三种方式都是以键值对进行表示的(key-value)，例如name=jack，这个就表示名字是name，携带的值是jack。

存储复杂数据类型

JSON.stringify

需要将复杂数据类型转换成JSON字符串,在存储到本地。

语法:JSON.stringify(复杂数据类型)

const goods = { name:'小米10'， price: 1999}
localStorage.setItem('goods',JSON.stringify(goods)) 

将复杂数据转换成JSON字符串存储本地存储中。

JSON.parse

把取出来的字符串转换为对象

语法:JSON.parse(JSON字符串)

const obj = JSON.parse(localStorage.getItem('goods')) 
console.log(obj)

将JSON字符串转换成对象，取出时候使用。

map方法

map 可以遍历数组处理数据，并且返回新的数组

const arr = ['red'， 'blue', 'green']
onst newArr = arr.map(function (ele,index) {
console.log(ele)//数组元素 
console.log(index) // 数组索引号 
return ele +'颜色'})
console.log(newArr) // ['red颜色'，'blue颜色'，'green颜色']

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。 map重点在于有返回值，forEach没有返回值.

join方法

join() 方法用于把数组中的所有元素转换一个字符串。

语法:

const arr = ['red颜色'，'blue颜色'，'green颜色']
console.log(arr.join('')) // red颜色blue颜色green颜色

参数：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串(")，则所有元素之间都没有任何字符。

// 数组join方法把数组转换为字符串
//小括号为空则逗号分割
console.log(newArr.join()) // red颜色,blue颜色,pink颜色
// 小括号是空字符串，则元素之间没有分隔符
console.log(newArr.join('')) //red颜色blue颜色pink颜色 
console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色