这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战
一、JavaScript的三大组成部分
1.ECMAScript：
ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。
2.BOM：
BOM（browser object model）：浏览器对象模型。就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象
3.DOM：
DOM（document object model）：文档对象模型。规定了文档的显示结构，可以轻松地删除、添加和替换节点
二、BOM
1.认识BOM：
- 每个浏览器窗口都是一个window对象
- 在每一次打开一个页面的时候默认就创建了一个window对象 相当于var window = new Window();
- 每个页面不共享window
- 每次创建的全局变量和函数都是属于window对象的属性和方法
var a = 10 ;
console.log(window.a) ; //10
function fn(){
console.log(666) ;
}
window.fn() // 666
2.BOM的常见属性：
- navigator： userAgent：会详细的显示浏览器的版本信息
console.log(navigator) ;
console.log(navigator.userAgent) ; //显示浏览器版本信息
- location 地址栏： (用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。) href ：整个网址:
setTimeout(function () {
//获取或设置新的地址
// location.href = 'http://www.baidu.com'
},3000)
host ：域名+端口号 hostname ：域名 port ：端口号(返回URL中的指定的端口号，如URL中不包含端口号返回空字符串) protocal ：协议 (http / https) search： 问号后面的一串 ，表单提交的数据
setTimeout(function () {
location.search = '?username=yy&password=123'
},3000)
hash ：井号后面的一串 锚点,不包含散列，则返回空字符串。 assign() ：跳转至新的页面
setTimeout(function () {
//设置新的地址
location.assign('http://www.baidu.com')
},3000)
replace()： 替换当前页面 --- 不会被历史记录
setTimeout(function () {
//替换新的地址 --- 替换了所有的历史记录
location.replace('http://www.baidu.com')
},3000)
reload() ：刷新页面
location.reload()
- history 历史记录 length：在同一个窗口打开过几个页面 history.forward() ：前进。加载历史列表中的下一个 URL。返回下一页。 history.back() 后退。加载历史列表中的前一个 URL。返回上一页。
windows.history.back(-1) ; //返回上一页
go(1 / -1) ：可进可退。
windows.history.go(1/-1) ; //返回上一页或下一页
document：文档 DOM实际上是BOM的一部分
利用navigator的userAgen判断打开网页的设备
function equipment(){
if(navigator.userAgent.includes('iPhone')){
console.log('使用的是苹果手机') ;
//处理对应的兼容问题
document.body.background = 'black' ;
return
}
if(navigator.userAgent.includes('Android')){
console.log('使用的是安卓手机') ;
return
}
if(navigator.userAgent.includes('win64')){
console.log('使用的是window系统的电脑') ;
}
}
equipment()
注意：第一次使用Open with Live Server打开时，会显示404错误，是因为没有设置icon图标。刷新一下就好了~
打印结果：
3.BOM方法：
- open() ：打开新的浏览器窗口，网页重定向（默认被拦截）
- close()：关闭本窗口
setTimeout(function (){
open('http://www.baidu.com') ;
close()
},300)
4.BOM事件：
- load事件：等待页面资源加载完毕之后执行
<div id="a">666</div>
<script>
window.onload =function() {
var oDiv = document.getElementById('a') ;
console.log(oDiv) ;
}
</script>
- scroll 页面滚动时触发这个事件 --- 高频率触发的事件
<style>
body{
//设置一个高，可以滑动
height: 3000px;
}
</style>
window.onscroll = function () {
console.log(666) ;
}
- resize 窗口大小改变时触发此事件 --- 高频率触发的事件
var t ;
window.onresize = function(){
//这里设置清除定时器，可以
clearInterval(t) ;
t = setTimeout(function () {
console.log(888) ;
},300)
}
- onblur 在对象失去输入焦点时触发。
window.onblur = function() {
console.log('你失去了我') ;
}
- onfocus 当对象获得焦点时触发。
window.onfocus = function(){
console.log('你又关注了我') ;
}
DOM会有延迟 。页面在获取焦点的时候，会优先使用现有的资源，而失去焦点的页面的资源会延后---不等于不处理
setInterval(function () {
document.write(6)
}, 1000)
