学习BOM的大致总结

BOM
Browser Object Model 浏览器对象模型

Windows ：表示窗口对象

常用的方法和属性

alert()   系统提示框（弹窗）
使用场景，想要给用户提示信息，带确定的警告框

window.confirm("")   用于一个带有 确定 和 取消的提示框
会打印布尔值，确定 t  取消 f    

prompt()  

prompt();
//带有输入功能的提示框，返回一个字符串

let str = window.prompt('请输入手机号');
如果用户输入的是：123
console.log(str);//123

全局属性与window属性的区别

1、全局属性删除无效，依然可以使用

var i = 5;
delete window.i;
无效 依旧可以输出

2、window属性删除有效。再次使用则为undefined

window.j = 10;
delete windonw.j;
已删除  在使用为undefined;

ES6新增的let和const创建的变量不会成为windo9w的属性
而var的值会成为window的属性
函数会成为window的方法

var i = 10;
let j = 20;
const z = 30;

alert(window.i);//10
alert(window.j);//undefined
alert(window.z);//undefined

function test(){
    console.log("Hello);
}
window.test();  此处调用
输出 Hello

输出页面可视区域的尺寸(浏览器

console.log(innerWidth);
console.log(innerHeight);

输出浏览器的尺寸
//输出浏览器的尺寸

console.log(outerWidth);
console.log(outerHeight);

注：每个浏览器的数据可能会有区别（略微差异）。

输出浏览器的位置 （浏览器到屏幕的位置
即：浏览器离屏幕（0，0）点的位置

console.log(window.screenLeft);
console.log(window.screenTop);

console.log(window.screenX);
console.log(window.screenY);

获取元素的尺寸（宽度、高度）

console.log(JG445.offsetWidth);
console.log(JG445.offsetHeight);

调整窗口位置 (浏览器厂商的已经禁止)
IE可以适用

window.moveTo(100,100);
window.moveBy(200,300);

moveTo是窗口距离屏幕的距离
moveBy是在moveTo基础上进行累加

//打开新窗口
// 4个参数
// 第1个参数：URL
// 第2个参数：打开方式
// 第3个参数：窗口大小
// 第4个参数：是否取代历史记录中的当前页面

window.open("test.html","_blank","width=300,height=200,top=200","resizable=yes");

有一个返回值，对象。
因此，就可以使用这个对象的方法close

let JG445= window.open(“test.html”,"_blank",“width=300,height=200,top=200”,“resizable=yes”)

时间函数
1、定时函数
2、超时函数
定时函数：

格式：
setInterval(参数1，参数2)；
参数1：方法或函数，必须以字符串形式
参数2：设置的是时间，即多少秒后调用参数1

例子：
let first = setInterval(“abc()",1000);
表示1秒后调用abc这个方法

注：一个HTML可以引用多个JS文件，每个JS文件又可以设置多个定时函数。由考虑到网络资源，当定时函数执行时，需要进行关闭

let first = setInterval(“abc()",1000);
clearInterval(first);     关闭相应的定时函数

超时函数
SetTimeout(参数1，参数2)；

例子：
let zck = setTimeout("alert('你以超过3秒')",2000);
clearTimeout(zck);   停止超时函数

navigator

console.log(navigator.appName);   //浏览器名称
console.log(navigator.appVersion);   //浏览器版本
console.log(navigator.language);    //浏览器语言

location 属性， 例： http://www.baidu.com.cn/abc/jionus/index.html#123

hash 返回URL的锚部分 即#后的内容 host 返回服务器的名字 www.baidu.com

hostname 等价于host 但有时不会写www pathname

返回URL后面的部分内容，abc/jionus/index.html port 返回端口 ：8080 portocol

pathname 返回URL后面的部分内容 abc/jionus/index.html

search 返回 ? 后面的内容

history 浏览器历史记录

window.history.go(0);      -1 返回上一条记录  0 刷新

window.history.back();      返回上一个页面 (URL)
window.history.forward();   返回下一个页面 (URL)

当前屏幕的宽高

console.log("屏幕宽度：",window.screen.width);  
console.log("屏幕高度：",window.screen.height);