BOM | 青训营笔记

168 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第19

BOM概述

浏览器对象模型(BOM)使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。

浏览器对象模型(BOM)可以使我们通过JS来操作浏览器,在BOM中为我们提供了一组对象,用来完成对浏览器的操作,常见的BOM对象如下:

Window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象 Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器 Location:代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面 History:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效 Screen:代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息 这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。

Windows对象

弹出框

window.alert("sometext");

实例:

alert("i am alert");

确认框

windo.confirm("sometext");

可以不用带window前缀来书写

提示框

window.prompt("sometext:,"defaulttext");


实例:

var preson + prompt("请输入您的姓名","比尔盖茨");

if(person != null){
    conole.log(person);
    
}

JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events)。

window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法:

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

等同于 setTimeout(),但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 window 对象的方法。

延时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

实例为:单机按钮,等待三秒,然后控制台会输出"Hello"