JavaScript 基础知识

前言

本篇文章是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 进阶知识 - 特效篇(一)