文章目录
- 一、BOM概述
- 1.1 什么是BOM
- 二、window对象的常见事件
- 2.1 页面加载事件
- 2.2 调整窗口大小事件onresize
- 三、定时器
- 3.1 案例
- 四、JS执行机制
- 4.1 this指向
- 4.2 JS执行机制
- 1、JS是单线程
- 2、JS的同步和异步
- 3、JS的执行机制
- 五、location对象
- 5.1 locationc对象常用属性
- 5.2 location对象的方法
- 六、navigator对象
- 七、history对象
一、BOM概述
1.1 什么是BOM
BOM ( Browser Object Model) 即浏览器对象模型，它提供了独立于内容而与浏览密商口进行交与的对象，其校心对象足window.
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性.
BOM缺乏标准，JavaScript语法的标准化组织是ECMAScript，DOM的标准化组织是W3C，BOM最初是Netscape览器标准的一部分
BOM：
- 浏览器对象模型
- 把【浏览器】当做一个【对象】来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM中最大的对象window:
- window 对象是浏览器的顶级对象，它具有双重负色
- 它足JS 访问浏觉器商口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window 对象的属性和方法
- 在调用的时候可以省略window，如alert()、promp()等.
- 注意：window下的一个特殊属性window.name
二、window对象的常见事件
2.1 页面加载事件
1、window.onload
window.onload 或 window.addEventListener(“load”,function(){})
- window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像，脚本文件、CSS文件等),就调用的处理函数。
- 注意：
- 有了window.onload 就可以把J5 代码与到页面元素的上方，因为 onload 是等页面内容全部加技完毕再去执行处理函数
- window.onload传统注册事件方式只能与一次，如果有多个，会以最后一个window.onload为准
- 如果使用addsventistener 则没有限制
2、DOMContentLoaded
- document.addEventListener(“DOMContentLoaded”,function(){})
- DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等.（IE9以上支持）
- 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间.交互效果就不的实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适
<script>
// 示例1： window.onload
// 重复注册onload事件，最后一个会覆盖之前
// window.οnlοad=function(){
// alert(111)
// }
// window.onload = function(){
// alert(22)
// }
// 示例2： window.addEventListener("load",fn)
// 多次注册均能执行，且按注册顺序执行
// window.addEventListener("load",function(){
// alert(11)
// })
// window.addEventListener("load",function(){
// alert(22)
// })
// 示例3： DOMContentLoaded事件
// 注意：此事件是DOM加载完成时就会执行，不包含图片，flass，css等，加载速度比load更快
document.addEventListener("DOMContentLoaded",function(){
alert("content loaded")
})
</script>
2.2 调整窗口大小事件onresize
- window.onresize
- window.addEventListener(“resize”,fn)
- 只要窗口大小发生像素变化，就会能发这个事件
- 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:300px;
height:300px;
background:pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div")
window.addEventListener("resize",function(){
if(window.innerWidth<800){
div.style.background='purple'
}else{
div.style.background='pink'
}
})
</script>
</body>
</html>
三、定时器
- setTimeout(fn, [延迟的毫秒数])：延迟一定时间后，执行fn函数（只执行一次）,返回定时器对象
- clearTimeout(定时器对象)： 清除定时器
- setInterval(fn, 间隔毫秒数)：每间隔一定时间执行一次
- clearInterval(定时器对象)：清除持续定时器
<script>
// 执行一次定时器
var timer = setTimeout(function(){
console.log("1秒执行了")
clearTimeout(timer)
},1000)
// 持续执行定时器
var intervalTimer = setInterval(function(){
console.log("每1秒执行")
},1000)
</script>
3.1 案例
1、倒计时
<body>
<div>5</div>
<script>
var div = document.querySelector("div")
var start = 5
var timer = setInterval(function () {
start -= 1
if (start >= 0) {
div.innerHTML = start
} else {
alert("时间到了！")
// 清除定时器
clearInterval(timer)
}
}, 1000)
</script>
</body>
2、验证码倒计时
<body>
<div class="form">
<input type="text">
<button>发送验证码</button>
</div>
<script>
var btn = document.querySelector("button")
var input = document.querySelector("input")
btn.onclick=function(){
btn.disabled = true
if(input.value.length<=0){
alert("请输入手机号")
return;
}
var start = 5
var timer = setInterval(function(){
start-=1
if(start==0){
btn.innerHTML = "发送验证码"
btn.disabled = false
start = 5
clearInterval(timer)
}else{
btn.innerHTML=start+"秒后重新获取"
}
},1000)
}
</script>
</body>
四、JS执行机制
4.1 this指向
1、在全局作用域或都普通 函数中this指向全局对象window
2、对象方法中的this，指向对象本身（调用者）
3、构造函数中的this：指定实例化的对象
<body>
<button>按钮</button>
<script>
// 示例：this指向
// 1、全局作用域或普通函数中的this
console.log(this) // window
function fn(){
console.log(this,'fn') // window
}
fn(); // 调用普通函数
// 2、对象方法
var obj = {
say:function(){
console.log(this,'obj.say') // obj
}
}
obj.say();
var btn = document.querySelector("button")
btn.addEventListener('click',function(){
console.log(this,'btn.onclick') // <button>按钮</button>
})
// 3、构造函数中的this
function Fn(){
console.log(this,'Fn')
}
var ins = new Fn() // this指向ins
</script>
</body>
4.2 JS执行机制
1、JS是单线程
JavaScript语言的一大持点就是单线程，也就是说，同一个时问只做一件事，这是因为javascript这门脚本语言诞生的使命 是为处理页面中交互，以及提作DOM而生的。比如我们对某个 DOM 元素进行添加和删除操作，不会同时进行。应该先进行添加，之后再删除。
为了解决JS单线程的问题，利用多核CPU的计算力，HTML5提出 Web Worker 标准，允许 JavaScript脚本创建多个线程，但是子线程受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质，也因此，HTML5中出现了同步和异步。
2、JS的同步和异步
同步：一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭，等水开了( 10分钟之后），再去切菜。炒菜。
异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。
JS同步任务：
- 同步任务都在主线程上执行，形成一个执行栈，
JS异步任务：
- JS的异步任务是通过回调函数实现的，JS中的异步任务是在单独的任务栈中，当主线程上的执行栈执行完毕后开始执行任务队列
一般的异步任务有以下三类：- 普通事件，如click,resize等
- 资源加载，如load,error等
- 定时器，如setInterval,setTimeout等
3、JS的执行机制
- 先执行主线程的执行栈
- 如果遇到异步任务(回调函数）放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务（event loop），于是被读取的异步任务结束等待状态，进入执行栈，开始执行
事件循环（Event Loop）：
同步任务和异步任务分别 进入不同的执行“场所”，同步任务进入主线程执行栈中执行，异步任务进入(Event Table）并注册回调函数。当执行栈(call stack）中的代码执行完毕，执行栈(call stack)中的任务为空时，就会读取任务队列(task quene)中的任务，去执行对应的回调;如此循环，就形成js的事件循环机制(Event Loop),
- eventloop: 由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（eventloop）
<script>
// 1->2->3
console.log(1)
// setTimeout回调函数是异步任务会在主任务执行完后再执行
setTimeout(function(){
console.log(3)
},0)
console.log(2)
</script>
五、location对象
1、什么是location对象
window 对象给我们提供了一个location 属性用于获取或设置窗体的URL，并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location 对象。
2、什么是URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址与联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位百以及浏览器应该怎么处理它.
URL的一般语法格式：
protocol://host [:port]/path/[?query]#fragment
5.1 locationc对象常用属性
1、案例：5秒后跳转页面
<body>
<div>即将跳转</div>
<script>
// location.href可直接读取页面URL
console.log(location.href)
var div = document.querySelector("div")
var time = 5
let timer = setInterval(function(){
time--
if(time==0){
// location.href赋值则会跳转
window.location.href = 'https://www.baidu.com'
clearInterval(timer)
time = 5
}else{
div.innerHTML = time +"秒后即将跳转"
}
},1000)
</script>
</body>
2、案例：获取页面参数（location.search)
<script>
// 页面添加参数?name=lala&age=12
var search = location.search
var queryObj = parseSearch(search)
// {name:'lala',age:'12'}
console.log(queryObj)
function parseSearch(searchStr){
// 未传入或无参数时不执行
if(!searchStr) return;
let mainStr = searchStr.substr(1)
let keyValueArr = mainStr.split('&')
let queryObj = {}
for(let i=0;i<keyValueArr.length;i++){
let itemArr = keyValueArr[i].split("=")
queryObj[itemArr[0]]=itemArr[1]
}
return queryObj
}
</script>
5.2 location对象的方法
<script>
// 重定向
// location.assign("https://www.baidu.com")
// 替换,不记入历史记录
location.replace("https://www.baidu.com")
// 重新加载
// location.reload(true)
</script>
六、navigator对象
- navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
<script>
let reg = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Windows Phone)/i
if(navigator.userAgent.match(reg)){
console.log("移动端访问")
}else{
console.log("PC端访问")
}
</script>
七、history对象
window 对象给我们提供了一个history 对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
![[用go实现解释器]笔记1-词法分析](https://img-blog.csdnimg.cn/img_convert/fd6c97651124c01e323e5360495f3f0e.png)
