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);
            }
        }
    }