JavaScript基础学习笔记--BOM（浏览器对象模型）
资料参考 菜鸟教程等。
浏览器对象模型（Browser Object Model,BOM），描述与浏览器进行交互的方法和接口。
1.window
window对象表示的浏览器窗口，所有的浏览器都支持window对象。
所有的JavaScript全局对象、函数及变量均会自动成为window对象。
- 全局变量是window对象的属性。
- 全局函数是window对象的方法。
- HTML DOM的document也是window对象的属性之一。
例如：
window.document.getElementById("header"); document.getElementById("header"); //两者相同
2.window的尺寸
有三种方法可以确定浏览器窗口的尺寸
1.对于 Internet Explorer、Chrome、Firefox、Opera、Safari：
var h = window.innerHeight; //浏览器的内部高度（包括滚动条）
var w = window.innerWidth; //浏览器的内部宽度（包括滚动条）2.对于Internet Explorer8、7、6、5
document.documentElement.clientHeight;
document.documentElement.clientWidth;或者
document.body.clientHeight;
document.body.clientWidth;3.适用所有的浏览器的解决方案
//三种表达式的结果是一致的
var w=window.innerHeight
|| documentElement.clientHeight
||document.body.clientHeight
var h = window.innerWidth
|| documentElement.clientWidth
|| document.body.clientWidth其他常用的windows方法
window.open() //打开窗口
window.close() //关闭窗口
window.moveTo() //移动窗口
window.resizeTo() //调整当前窗口的尺寸- 定义全局变量与window对象上直接定义上的区别：
//全局变量不能通过delete删除，window属性上的定义的变量可以通过delete删除 //访问未知变量会报错，但是通过查询window对象，可以知道某个可能未申明的变量是否存在 //有些自执行函数里面的变量，想要外部也访问到的话，在window上直接定义其属性参考@prisonerdilemma
3.window screen
windows screen对象包含有关用户屏幕的信息。
screen.availWidth; //浏览器的内部高度（包括滚动条）
screen.availWidth; //可用屏幕宽度
screen.colorDepth; //可用色彩深度
screen.pixelDepth; //可用色彩分辨率
4.window location
location.host; //返回主机名
location.href; //返回当前页面的url
location.port;//返回web主机的端口
location.protocol;//返回web使用的协议
location.pathname ;//返回url的路径名
location.reload()；
location.assign()；//加载新的文档5.window history
history.back(); //后退
history.forward();//前进
history.go(1); //正数表示前进6.window navigator
window.navigator 对象包含有关访问者浏览器的信息。
/*
浏览器代号: Mozilla
浏览器名称: Netscape
浏览器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
启用Cookies: true
硬件平台: Win32
用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
用户代理语言: zh-CN
*/7.window 弹窗
1.警告框
用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert("你好，我是一个警告框！");
window.alert("你好，我是一个警告框！");2.确认框
当确认框弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
var r=confirm("按下按钮");3.提示框
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操做。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt("请输入你的名字","Harry Potter");弹窗使用 反斜杠 + "n"(\n) 来设置换行。
8.JavaScript 计时事件
需要设定特定的时间来执行操作时，称为计时事件。
1.setInterval()
间隔指定的毫秒数不停地执行指定的代码,用法：
window.setInterval("javascript function",milliseconds);第一个参数是需要执行的动作，第二个参数是指定的时间间隔，单位是ms.
setInterval(function(){alert("Hello")},3000); //每隔3s弹出hello clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
页面上显示时钟：
2.setTimeout()
setTimeout() 用来指定距离当前多少时间开始执行。
myVar= window.setTimeout("javascript function", milliseconds);第一个参数是执行的动作，第二个参数是等待的时间，单位是ms.
setTimeout(function(){alert("Hello")},3000); //等待3秒，弹出hello clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
点击第一个按钮等待3秒后出现"Hello"弹框。
点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。
9.JavaScript Cookie
什么是Cookie？
Cookie用于存储web页面的用户信息。
当web服务器向浏览器发送web页面时，在链接关闭后，服务端不会记录用户的信息。
Cookie的作用就是用于解决“如何记录客户端的用户信息”：
- 当用户访问web页面时，他的名字可以记录在Cookie中
- 在下一次用户访问该页面的时候，可以在cookie中读取该用户的访问信息
cookie以名/值对的形式存储，例如
document.cookie="username=John Doe";当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到请求中，服务端通过这种方式获取用户的信息。
使用JavaScript创建cookie
- 可以使用document.cookie属性来创建、读取和删除cookie
document.cookie = 'username=John';- 还可以创建一个cookie过期时间（以UTC或者GMT），默认情况下，cookie在浏览器关闭时删除。
document.cookie = "username = john;expires=Fri, 31 Dec 1999 23:59:59 GMT";- 可以使用path参数来告诉浏览器cookie的路劲。默认情况下，cookie属于当前页面。
documen.cookie = "username=john;expires=Fri,31 Dec 1999 23:59:59 GMT:path=/"- 删除cookie
只需将cookie的值设定为以前的时间即可。
document.cookie = "username = john;expires=Fri, 31 Dec 1970 23:59:59 GMT";cookie字符串
document.cookie的属性看起来像是一个普通的文字字符串，其实不是。
当在document.cookie写入一个完整的cookie字符串，当重新读取cookie信息时，cookie信息是以名/值对的形式展示的。
如果设置了新的cookie，旧的的cookie信息不会被覆盖。
JavaScript创建cookie实例
- 设置cookie值的函数
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=None;Secure";
}- 获取cookie值的函数
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i- 检测cookie值的函数
function checkCookie(){
var username = getCookie("username");
if (username != ""){
alert("welcome again " + username);
}else{
username = prompt("Please enter your name:","");
if (username != ""&&username != null){
setCookie("username",username,365);
}
}
}