JavaScript 基础知识 - BOM篇 - Levi丶知识库

前言

本篇文章是JavaScript基础知识的BOM篇，如果前面的《JavaScript基础知识-DOM篇》看完了，现在就可以学习BOM了。

注意： 所有的案例都在这里链接: 提取密码密码: yvxo，文章中的每个案例后面都有对应的序号。

1. BOM 基本概念

BOM(Browser Object Model)：浏览器对象模型，提供了一套操作浏览器的工具。

BOM中包含的内容很多，但是有很多东西是用不到的。在BOM中我们需要掌握定时器。

2. window 对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，其实BOM中基本所有的属性和方法都是属性window的。
所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

示例代码： [01-window对象.html]

普通函数调用的时候：

var name = "项羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = Teacher(); // 打印的this 指的是全局对象window
console.log(name);   // 虞姬
console.log(age);    // 22
/* 
为什么会是 虞姬 和 22 ？ 不是定义了一个全局变量name = "项羽"吗？
因为 Teacher作为一个普通函数调用，它里面的this指的就是全局对象
js 代码一步步往下执行，一开始是定义了一个name="项羽"的全局变量，
但是下面的this有将"虞姬"指向了全局对象，所以最后打印的是虞姬 22
*/

构造函数的时候：

var name = "项羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 没有 new 的时候就相当于普通函数调用
var obj = new Teacher(); // 打印的this 指的是构造函数对象 Teacher
console.log(name); // 项羽
console.log(age); // 28
/*
Teacher作为构造函数的时候，它内部的this指向的是 对象Teacher
此时的全局变量name="项羽" 将不会再受this的影响，所以，打印的是 项羽 28
*/

2.1 window.onload

window.onload事件会在窗体加载完成后执行，通常我们称之为入口函数。

window.onload = function(){
    //里面的代码会在窗体加载完成后执行。
    //窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}

注意：

如果有图片加载，那么代码一定要写到window.onload里面，否则会出现图片没有加载完成，获取到的宽度和高度不对的情况。
浏览器会对页面的加载做优化，在加载图片的时候，图片的引入会延迟。
一个页面中不能有两个onload函数，写在下面的会覆盖掉上面的。

示例代码： [02-window.onload对象(一)]

为什么下面的代码会报错呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.onload</title>
    <!-- script写在上面直接报错 -->
    <!--  
        因为代码是一步步向下执行的，在head里的script获取btn或者box的时候，
        是获取不到的，因为下面的页面结构还没加载到：
    -->
    <script>
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        btn.onclick = function() {
            box.style.width = "500px";
            box.style.height = "500px";
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button>
    <div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>

</html>

此时就可以用window.onload入口函数：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.onload</title>
    
    <script>
    // 这里定义了一个入口函数，就是说等页面所有文档树加载完才会执行这里面的代码：
        window.onload = function() {
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            btn.onclick = function() {
                box.style.width = "500px";
                box.style.height = "500px";
            }
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button>
    <div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>

</html>

示例代码：图片加载 [03-window.onload对象(二)]

为什么获取的宽度和高度都为0呢，js代码不是写在最后面了吗？

<body>
    <!-- html 部分-->
    <img id="img" src="../image/levi.jpg" alt="">

    <!-- js 部分 -->
    <script>
        var img = document.getElementById('img');
        console.log(img.width);     // 0
        console.log(img.height);    // 0
    </script>
</body>

效果图：

这是因为，浏览器会对页面的加载做优化，在加载图片的时候，图片的引入会延迟。这时候需要用window.onload：

<head>
    <script>
    // 当文档加载完成的时候执行，如果有图片，等到图片也加载完成才会执行。
        window.onload = function() {
            var img = document.getElementById('img');
            console.log(img.width);
            console.log(img.height);
        }
    </script>
</head>

<body>
    <img id="img" src="../image/levi.jpg" alt="">
</body>

效果图：

2.2 window.open

window.open() 打开一个窗口

语法：window.open(url, [name], [features]);

参数1：需要载入的url地址
参数2：新窗口的名称
       _self:在当前窗口打开
       _blank:在新的窗口打开
参数3：窗口的属性，指定窗口的大小
返回值：会返回刚刚创建的那个窗口，用于关闭

示例代码： [04-window.open.html]

<!-- html 部分 -->
<button id="btn">点击在新窗口跳转到百度</button>
<button id="btn2">点击在本窗口跳转到百度</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');

    btn.onclick = function() {
        // 在新窗口打开，新窗口的大小为300 * 300
        var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
    }

    btn2.onclick = function() {
        // 在当前窗口打开，新窗口的大小根据当前窗口改变的，设置的无效
        var newWin = window.open("http://www.baidu.com", "_self");
    }
</script>

效果图：

2.3 window.close

window.close() 关闭一个窗口在火狐浏览器下会失效解决办法

newWin.close()；//newWin是刚刚创建的那个窗口
window.close(); //把当前窗口给关闭了

示例代码： [05-window.close.html]

<!-- html 部分 -->
<button id="btn">点击在新窗口跳转到百度</button>
<button id="btn2">点击在本窗口跳转到百度</button>
<button id="btn3">点击关闭打开的新窗口</button>
<button id="btn4">点击关闭本窗口</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');

    btn.onclick = function() {
        // 在新窗口打开，新窗口的大小为300 * 300
        var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");

        btn3.onclick = function() {
            // 关闭打开的新窗口
            newWin.close();
        }
    }
    btn2.onclick = function() {
        // 在当前窗口打开，新窗口的大小根据当前窗口改变的，设置的无效
        var newWin2 = window.open("http://www.baidu.com", "_self");

    }
    btn4.onclick = function() {
        // 关闭本窗口
        window.close();
    }
</script>

效果图：

3. 定时器

定时器里面不能用this，因为在定时器里面，this，指向的是全局对象window。

3.1 延时定时器

延时定时器可以让代码延迟一段时间之后才执行。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，window会自己调用。

1、设置延时定时器

语法：setTimeOut(callback, time);

参数1：回调函数，时间到了就会执行。
参数2：延时的时间 单位：毫秒
返 回：定时器的id，用于清除

示例代码： [06-延时定时器.html]

var timer = setTimeOut(function(){
    //1秒后将执行的代码。
    console.log("哈哈");
}, 1000);

2.清除延时定时器

语法：clearTimeOut(timerId);

// 参数：定时器id
clearTimeOut(timerId);

示例代码：

<!-- html 部分 -->
<button id="btn1">开启</button>
<button id="btn2">关闭</button>

<!-- js 部分 -->
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    // 定义一个全局变量
    var timeId; 
    // 开启定时器
    btn1.onclick = function() {
        //设置了一个定时器，会返回一个定时器id
        timeId = setTimeout(function() {
            // 两秒后在页面显示 Boom！
            document.write("<h1> Boom! </h1>");
        }, 2000);
    }
        
    //  清除定时器
    btn2.onclick = function() {
        //清除定时器, 需要定时器id
        clearTimeout(timeId);
    }
</script>

效果图：两秒后执行代码，两秒钟之内清除定时器，就不会执行

3.2 间歇定时器

间歇定时器让定时器每隔一段时间就会执行一次，并且会一直执行，到清除定时器为止。

1、设置间歇定时器

语法：var intervalID = setInterval(func, delay);

参数1：重复执行的函数
参数2：每次延迟的毫秒数
返 回：定时器的id，用于清除

示例代码：

var timer = setInterval(function(){
    //重复执行的代码。
}, 1000);

2、清除间歇定时器

语法：clearInterval(intervalID);

参数：定时器id

示例代码： [07-间歇定时器.html]

<!-- html 部分 -->
<button id="btn1">开启</button>
<button id="btn2">关闭</button>

<!-- js 部分 -->
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    // 定义一个全局变量 存放定时器
    var timer;
    // 开启定时器
    btn1.onclick = function() {
        //设置了一个定时器，会返回一个定时器 id
        timer = setInterval(function() {
            // 每隔1秒 就会创建一个 h2 标签
            var tag = document.createElement("h2");
            tag.innerHTML = "我是间歇定时器";
            document.body.appendChild(tag);
        }, 1000);
    };
    //  清除定时器
    btn2.onclick = function() {
        //清除定时器, 需要定时器id
        clearInterval(timer);
        document.body.innerHTML = "<h1>间歇定时器已清除</h1>";
    };
</script>

效果图：

2.3 定时器综合练习

1、获取短信验证码案例 [08-定时器综合练习-获取短信验证码.html]

<!-- html 部分-->
<input type="button" value="点击获取短信验证码" id="btn">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var timer = null;
    btn.onclick = function() {
        // 倒计时的秒数
        var num = 5;
        // 当按钮点击的时候 禁用button
        btn.disabled = true;

        timer = setInterval(function() {
            // 每隔一秒修改num的值
            num--;
            // 修改btn的value值  这里不可以用this 因为定时器里的this指的是window对象
            btn.value = num + "秒后可再次发送";

            // 当num = 0 秒的时候，清除定时器
            if (num == 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.value = "点击获取短信验证码";
            }
        }, 1000);
    }
</script>

效果图：

2、倒计时案例 [09-定时器综合练习-倒计时案例.html]

<!-- 样式部分 -->
<style>
    .time {
        width: 160px;
        height: 40px;
        margin: 100px auto;
        line-height: 40px;
        font-size: 24px;
        font-weight: 700;
    }
    #h,
    #m,
    #s {
        float: left;
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        background-color: #F9F9F9;
        box-shadow: 1px 1px 2px #616161;
        color: #453246;
        border-radius: 5px;
    }
    .split {
        width: 20px;
        float: left;
        text-align: center;
    }
</style>

<!-- html 部分 -->
<div class="time">
    <span id="h">00</span>
    <span class="split">:</span>
    <span id="m">00</span>
    <span class="split">:</span>
    <span id="s">00</span>
</div>

<!-- js 部分 -->
<script>
    var h = document.getElementById('h');
    var m = document.getElementById('m');
    var s = document.getElementById('s');

    setTime();
    var timer = setInterval(setTime, 1000);

    function setTime() {
        // 获取当前时间
        var newTime = new Date(); // 此时测试的时间是 2017-12-11 15:24:00(根据本地时间一直在变)
        // 定义一个未来的时间
        var futureTime = new Date("2017-12-11 16:30:31");
        // 获取时间差 单位是毫秒 首先我们需要转成秒 而且时间戳获取的时候 有很多小数 需要取整一下
        var time = parseInt((futureTime - newTime) / 1000);

        // time现在已经是秒了  我们需要将它转换成小时
        // 1h = 3600s
        var hours = parseInt(time / 3600);
        // 将获取的小时添加到页面中 
        // 注意因为时钟是两位数，这里的小时可能只是一个个位数，所以需要拼接一个 "0"
        // 因为 分钟、秒都需要拼0，所以我们可以封装一个函数
        h.innerHTML = addZero(hours);

        // 获取分钟
        // 先将 time 转换成分钟 再去取余60
        var minutes = parseInt(time / 60) % 60;
        // 将获取的分钟添加到页面中 
        m.innerHTML = addZero(minutes);

        // 获取秒
        var seconds = time % 60;
        s.innerHTML = addZero(seconds);

        // 还要做个判断 当time这个时间差小于等于0的时候 清除定时器
        if (time <= 0) {
            // 如果不置0的话 还会继续减
            time = 0;
            clearInterval(timer);
        }
    }

    // 拼接 0 函数
    function addZero(num) {
        // 如果传进来的参数小于10 就要给他拼 0
        return num < 10 ? '0' + num : num;
    }
</script>

效果图：

3、电子表案例 [10-定时器综合练习-电子表.html]

<!-- 样式部分 -->
<style>
    #box {
        width: 300px;
        height: 50px;
        background-color: #F9F9F9;
        box-shadow: 1px 1px 2px #616161;
        color: #453246;
        border-radius: 5px;
        margin: 100px auto;
        font: bold 24px/50px 楷体;
        text-align: center;
    }
</style>

<!-- html 部分 -->
<div id="box"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');
    // 封装一个获取当前时间的函数
    function getTime() {
        // 获取当前时间
        var date = new Date();
        console.log(date);
        // 获取当前的年份
        var year = date.getFullYear();
        // 获取当前时间的月份
        var month = addZero(date.getMonth() + 1);
        // 获取当前的天
        var day = addZero(date.getDate());
        // 获取小时
        var hours = addZero(date.getHours());
        // 获取分钟
        var minutes = addZero(date.getMinutes());
        // 获取秒
        var seconds = addZero(date.getSeconds());
        // 将时间格式设置为如下格式
        var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        return str;
    }
    // 拼 0 函数
    function addZero(num) {
        return num < 10 ? "0" + num : num;
    }
    
    // 定时器会延迟一秒执行，在外面定义一遍 会补偿这个一秒
    box.innerHTML = getTime();
    setInterval(function() {
        box.innerHTML = getTime();
    }, 1000);
</script>

效果图：

4、机械表案例 [11-定时器综合练习-机械表.html]

<!-- 样式部分 -->
<style>
    .clock {
        width: 600px;
        height: 600px;
        margin: 100px auto;
        background: url(../image/机械表/clock.jpg) no-repeat;
        position: relative;
    }
    
    .clock div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../image/机械表/hour.png) no-repeat center center;
    }
    
    #m {
        background-image: url(../image/机械表/minute.png);
    }
    
    #s {
        background-image: url(../image/机械表/second.png);
    }
</style>

<!-- html 部分 -->
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>

<!-- js 部分 -->
<script>
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");

    function setTime() {
        // 获取当前时间
        var date = new Date();
        // 设置秒针
        var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);
        s.style.transform = "rotate(" + 6 * seconds + "deg)";

        // 设置分针
        // 60分钟一圈360度 每分钟相当于 6度 这样只会一分分钟的走
        // 我们想要的效果是秒针旋转地同时  分针也在微弱的旋转 seconds/60得到一个小数 加上分钟 再去乘以角度
        var minutes = date.getMinutes() + seconds / 60;
        m.style.transform = "rotate(" + 6 * minutes + "deg)";

        // 设置时针
        // 12个小时是一圈360度 每个小时相当于 30度
        var hours = date.getHours() + minutes / 60;
        h.style.transform = "rotate(" + 30 * hours + "deg)";
    }
    // 页面一加载就执行一次
    setTime();
    // 让window每隔15ms就执行一次  1秒钟 分成 25份就已经有动画效果  分成60份，很细腻
    setInterval(setTime, 15);
</script>

效果图：

4. Location对象

location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。

4.1 常用的属性和方法

location.href:控制地址栏中的地址

location.href = "http://www.baidu.com"; //让页面跳转到百度首页

location.reload()让页面重新加载

location.reload(true);//强制刷新，相当于ctrl+F5
location.reload(false);//刷新，相当于F5

location的其他属性

console.log(window.location.hash);      // 哈希值 其实就是锚点
console.log(window.location.host);      // 服务器 服务器名+端口号
console.log(window.location.hostname);  // 服务器名
console.log(window.location.pathname);  // 路径名
console.log(window.location.port);      // 端口
console.log(window.location.protocol);  // 协议
console.log(window.location.search);    // 参数

示例代码：定时跳转网址 [12-location对象-定时跳转.html]

<!-- html 部分 -->
<a href="#" id="link">注册成功，5秒后跳转</a>

<!-- js 部分 -->
<script>
    var num = 5;
    var link = document.getElementById('link');
    var timer = setInterval(function() {
        num--;
        link.innerHTML = "注册成功，" + num + "秒后跳转";
        // 如果倒计时等于0的时候，自动跳转到网址
        if (num == 0) {
            clearInterval(timer);
            location.href = "https://segmentfault.com/u/marsman_levi";
        }
    }, 1000);
</script>

效果图：

5. Navigator 对象

window.navigator的一些属性可以获取客户端的一些信息

navigator.userAgent：返回浏览器版本 

navigator.onLin：返回网络状态 true / false

示例代码：获取浏览器版本 [13-navigator对象.html]

// 打印浏览器版本
console.log(navigator.userAgent);

// 打印网络状态
console.log(navigator.onLine);

效果图：

6. Screen 对象

window.screen的一些属性可以获取屏幕的宽高

1、获取屏幕的可占用宽高

返回访问者屏幕的宽度、高度，以像素计，减去界面特性，比如窗口任务栏。

screen.availWidth：获取屏幕的可用宽度

screen.availHeight：获取屏幕的可用高度

2、获取屏幕宽高

screen.width：获取屏幕的宽度

screen.height：获取屏幕的高度

示例代码： [14-screen对象.html]

document.write("当前屏幕可占用宽度：" + screen.availWidth + "<br>");    // 1864
document.write("当前屏幕可占用高度：" + screen.availHeight + "<br>");   // 1080
document.write("当前屏幕宽度：" + screen.width + "<br>");              // 1920
document.write("当前屏幕高度：" + screen.height + "<br>");             // 1080

效果图：

7. History 对象

history对象表示页面的历史

1、后退 history.back()

history.back() 方法加载历史列表中的前一个URL。这与在浏览器中点击后退按钮是相同的：

history.back();
history.go(-1);

2、后退 history.forward()

history forward() 方法加载历史列表中的下一个URL。这与在浏览器中点击前进按钮是相同的：

history.forward();
history.go(1);

8. javascript 弹框

在javascript中可以创建3种弹框，分别是：警告框、确认框、提示框。

1、警告框 alert

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。

window.alert("呵呵呵");
// window.alert() 方法可以不带上window对象，直接使用alert()方法。
alert("呵呵呵");

2、确认框 confirm

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

var result = confirm();
if (result == true) {
    alert("你真的是猪!");
} else {
    alert("你不是猪！");
}

3、提示框 prompt

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。

// 参数一：提示内容  参数er：可以省略，输入框默认显示内容
var person = prompt("请输入你的名字", "Levi丶");
if (person != null && person != "") {
    alert("你好" + person);
}

4、弹框换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。

alert("大家好\n我是\nLevi丶");

9. javascript Cookie

Cookie用于存储web页面的用户信息

1、什么是Cookie？

Cookie是一些数据, 存储于你电脑上的文本文件中。
当web服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie的作用就是用于解决 "如何记录客户端的用户信息":
- 当用户访问web页面时，他的名字可以记录在cookie中。
- 在用户下一次访问该页面时，可以在cookie中读取用户访问记录。

Cookie以名/值对形式存储，如下所示:

username=Levi

当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中。服务端通过这种方式来获取用户的信息。

2、使用 JavaScript 创建Cookie

JavaScript可以使用document.cookie属性来创建、读取、及删除cookie。

JavaScript中，创建cookie如下所示：

document.cookie = "username = Levi";

你还可以为cookie添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";

你可以使用path参数告诉浏览器cookie的路径。默认情况下，cookie属于当前页面

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

3、使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取cookie：

var x = document.cookie;

document.cookie将以字符串的方式返回所有的cookie，类型格式cookie1=value; cookie2=value; cookie3=value;

4、使用 JavaScript 修改 Cookie

在 JavaScript 中，修改cookie类似于创建cookie，如下所示：

document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

旧的cookie将被覆盖。

5、使用 JavaScript 删除 Cookie

删除cookie非常简单。您只需要设置expires参数为以前的时间即可，如下所示

document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";

注意，当您删除时不必指定 cookie 的值。

6、Cookie 字符串

document.cookie属性看起来像一个普通的文本字符串，其实它不是。

即使您在document.cookie中写入一个完整的cookie字符串, 当您重新读取该cookie信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的cookie，旧的cookie不会被覆盖。新cookie将添加到document.cookie 中，所以如果您重新读取document.cookie。

上一篇：JavaScript 基础知识 - DOM篇(二)
下一篇：JavaScript 进阶知识 - 特效篇(一)

JavaScript 基础知识 - BOM篇

前言

1. BOM 基本概念

2. window 对象

2.1 window.onload

2.2 window.open

2.3 window.close

3. 定时器

3.1 延时定时器

3.2 间歇定时器

2.3 定时器综合练习

4. Location对象

4.1 常用的属性和方法

5. Navigator 对象

6. Screen 对象

7. History 对象

8. javascript 弹框

9. javascript Cookie

深海丶Deepsea

引用和评论

原生 js 实现移动端 Touch 滑动反弹

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具