JavaScript学习笔记（五）

BOM

BOM: 浏览器对象模型 核心对象是window

BOM比DOM更大，包含了DOM

window对象是浏览器的顶级对象

1.它是JS访问浏览器的一个接口
2 .它是全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用时可以省略window

window对象的常见事件

1.窗口加载事件

window.onload=function(){}
//当文档内容全部加载完成会触发该事件
//window.onload传统注册事件方式只能写一次，如有多个，会以最后一个window.onload为准
//或者
window.addEventListener('load',function(){});


document.addEventListener('DOMContentLoaded',function(){});
//DOM加载完毕，不包含图片  falsh css等就可以执行，加载速度比load更快一些

2.调整窗口大小事件

window.onresize=function(){}
//只要窗口大小发生像素变化，就会触发这个事件  响应式布局
//或者
window.addEventListener('resize',function(){});


window.innerWidth  当前屏幕的宽度

定时器

window.setTimeout(调用函数，[延迟的毫秒数])；
//设置一个定时器，该定时器在定时器到期后调用函数
//调用函数可以直接写函数   函数名   还可以'函数名()'
//页面有很多定时器，我们经常给定时器加标识符（名字）
//这个调用函数也叫回调函数callback


window.setInterval(回调函数，[间隔的毫秒数])
//与第一种方法不同的是  setInterval()方法会重复调用一个函数，每隔这个时间，就去调用一次回调函数

停止setTimeout定时器

window.clearTimeout(timeoutID)

停止 setInterval()定时器

window.clearInterval(intervalID)

倒计时案例：

        var hour = document.querySelector('.hour')

        var minute = document.querySelector('.minute')

        var second = document.querySelector('.second')

        var inputtime = +new Date('2023-1-5 00:00:00');

        setInterval(countDown, 1000);


        function countDown() {

            var nowtime = +new Date();

            var times = (inputtime - nowtime) / 1000;

            var h = parseInt(times / 60 / 60 % 24);

            hour.innerHTML = h;

            var m = parseInt(times / 60 % 60);

            minute.innerHTML = m;

            var s = parseInt(times % 60);

            second.innerHTML = s;

        }

this

this的指向在函数的定义时确定不了，只有函数执行的时候才能确定
一般情况下this的最终指向的是那个调用它的对象

1.全局作用域或普通函数中this指向全局对象window（注意定时器里面this指向window）
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例

JS执行队列

JS的一大特点就是单线程，同一个时间只能做一件事情

console.log(1);

setTimeout(function(){
console.log(3)
},10000);

console.log(2);
//打印2需要等待10秒钟，所以系统自动执行第三个任务
//1 2 3

为了解决问题，利用多核CPU的计算能力，H5提出web worker标准，允许JS脚本创建多个线程。于是，JS中出现了同步和异步。

异步：做这件事的同时可以做其他另外的事

console.log(1);

setTimeout(function(){
console.log(3)
},0);

console.log(2);
//输出仍然1 2 3 why??

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

//同步任务
//在主线程执行栈
console.log(1);
setTimeout(fn,0)//回调函数不属于同步任务
console.log(2);


//异步任务
//任务队列(消息队列)
function(){
conole.log(3);
}

//异步任务
//1.普通事件  click  resize等
//2.资源加载    load   error等
//3.定时器      setInterval  setTimeout等

异步任务

1.普通事件 click resize等
2.资源加载 load error等
3.定时器 setInterval setTimeout等

JS的执行机制

1..先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

有多个异步任务会先进行异步进程处理，在把异步任务放入消息队列中

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

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL

URL:统一资源定位符 是互联网上标准资源的地址

语法格式：

protocol://host[:port]/path/[?query]#fragment

protocol:  通信协议  http ftp maito等
host:  主机(域名)  www.baidu.com
port   端口号  可选，省略时使用默认端口   http的默认端口为80
path     路径  由零或多个‘/’符号隔开的字符串，一般来表示主机上的一个目录或文件地址
query   参数  以键值对的形式，通过&符合分隔
fragment   片段  #后面内容常见于链接锚点

location对象的属性

location.href 获取或设置整个URL
location.host 返回主机(域名)
location.port 返回端口号 未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段

location对象的方法

location.assign() 可以跳转页面（记录历史）
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面

navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，该属性可以返回由客户机发生服务器的user-agent头部的值

history对象

与浏览器历史记录进行交互，该对象包含用户访问过的URL

history对象方法

back() 后退功能
forward() 前进功能
go(参数) 前进后退功能 如果是1就前进1个页面 -1就后退一个页面