前端学习-JavaScript基础（BOM）

JavaScript有三部分组成：ECMAScript、BOM、DOM。前面有提及到，可以往回看看。

BOM

BOM：Browser Object Model的简写，叫浏览器对象模型。

概念：提供操作浏览器的标准。

一、顶层对象(window)

window是浏览器窗口 ，属于Object类型。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

console.log(window)  //object

window是顶级对象，所以使用的时候可以省略。

window.document.getElementById()

document.getElementById()

二、window会嵌套很多小对象

navigator 、history、location、sreen、document

1、navigator （获取浏览器信息）

• appName 属性返回浏览器的应用程序名称，输出netspace，是为了纪念网景公司。

console.log(window.navigator.appName) //netspace

• **appCodeName **浏览器应用程序代码名称

console.log(window.navigator.appCodeName) //浏览器内核：Mozilla

• appVersion 浏览器版本 (还要自己找看浏览器版本)

console.log(window.navigator.appVersion)  

• **cookieEnabled **是否有启用cooike

console.log(window.navigator.cookieEnabled)  // true 返回布尔值

• userAgent 浏览器代理

console.log(window.navigator.userAgent)    //header头信息

• platform 返回运行浏览器的操作系统平台

console.log(window.navigator.platform); //返回运行浏览器的操作系统平台 Win32

我用的Google按循序执行输出如下：

2、histoty(历史记录)

window.history.back () 后退一个页面 （与在浏览器点击后退按钮相同）

history.forward() 前进一个页面（与在浏览器中点击向前按钮相同）

history.go() 正数前进，负数后退，可用跳多个页面；为0时表示刷新页面

3、location（地址栏）

href、search、hash  补充：assign（跳转） replace（跳转）  reload（刷新）

console.log(window.location.href)   //文件地址，url编码
console.log(window.location.hash)   //获取锚点，输出空字符串
console.log(window.location.search)     //输出地址栏数据

页面跳转

window.location.href = window.location.href   //刷新
window.location.href ='http://www.baidu.com'
window.history.go(地址)

补充URL编码解码

**URL解码-decodeURI(字符串) **

var str='file:///F:/AHTML/JS%E5%9F%BA%E7%A1%80/BOM%E5%92%8CDOM/BOM%E4%BB%8B%E7%BB%8D.html'

var res=decodeURI(str)
console.log(res)

URL编码-escape()

var str='BOM介绍'
var res=escape(str)
console.log(res)   //输出: BOM%u4ECB%u7ECD

详细可看：https://www.cnblogs.com/ylxmt/p/10234210.html

4、screen（屏幕尺寸）

属性

• screen.width （屏幕宽度）
• screen.height (屏幕高度)
• screen.availWidth(可用宽度)
• screen.availHeight（可用高度）
• screen.colorDepth（色深-颜色比特数）
• screen.pixelDepth（像素深度）

这个Screen多用处理兼容性，现在比较少用，就不详细介绍

5、document

window的弹出层

window.prompt  //弹出可输入的框
window.alert   //弹出警示框
window.confirm  //弹出对话框

浏览器大小(包括了滚动条大小)

innerWidth() 	//宽
innerHeight()	//高

window的事件

window.onload()  //当网页中的所有资源都加在完成之后执行这个事件
window.onscroll()   //滚动条事件
window.onresize()	//浏览窗口改变事件

全局变量是 window 对象的属性。

  var a=10
    console.log(window)
    console.log(window.a)
    console.log(a)

全局函数是 window 对象的方法。

 function arr(){
        console.log('hahah')
    }
    console.log(window)
    window.arr()
    arr()
    console.log(this.a)  //hahah

三、定时器

setInterval（）（不停的执行）

//函数
window.setInterval(function(){
	console.log(3s);
},3000)


var a =window.setInterval(function(){
	console.log(3s);
},3000)
console.log(a)  //a=1表示第几个计时器

停止定时器
clearInteval(a)

setTimeout（） 延迟一段时间在执行（执行一次）

var b=setTimeout(function(){
	console.log('延迟3秒')
},3000)

clearTimeout(b) //停止延迟

clearInteval、clearTimeout可以混用

四、异步

概念：指两个或两个以上的对象或事件不同时存在或发生（或多个相关事物的发生无需等待其前一事物的完成）

理解：一件事执行要等待另一件事完成才可以进行。

定时器中 setTimeout和setInterval函数就是异步代码。

异步代码执行流程：

js执行代码内容的内存：调用栈；。

从上到下将每一段代码放入调用栈中执行，被执行的同步代码，直接执行；

被执行的是异步代码，将异步代码放在浏览器中开始计时，当浏览器中倒计时到时间，有一段代码就会被执行，但是浏览器不执行这段代码，会将这段代码放到一个队列中，等待执行。等调用栈空闲下来一个一个执行，执行完，还是在队列中找需要执行的代码。

setInterval(function(){
	console.log(1)
},0)
console.log(2) 
// 2, 1

五、同步

概念：各方都实时（或者尽可能实时）地收取（而且必要的话也处理或者回复）信息的即时沟通方式

理解：两件事情，同时进行。

// 同步代码
function fun1() {
  console.log(1);
}
function fun2() {
  console.log(2);
}
fun1();
fun2();

// 输出
1
2

我也还没完全理解，异步和同步可以看：

https://www.cnblogs.com/Yellow-ice/p/10433423.html

这几天身心疲惫，感觉被灌满了（咳咳知识啊），没时间写，那今天水一点，短一点，哈哈哈。