摘要：在中我們需要掌握定時(shí)器。定時(shí)器不是我們調(diào)用，我們只需要把函數(shù)的地址傳過(guò)去，時(shí)間到了，會(huì)自己調(diào)用。參數(shù)延時(shí)的時(shí)間單位毫秒返回定時(shí)器的，用于清除示例代碼延時(shí)定時(shí)器秒后將執(zhí)行的代碼。

本篇文章是JavaScript基礎(chǔ)知識(shí)的BOM篇，如果前面的《JavaScript基礎(chǔ)知識(shí)-DOM篇》看完了，現(xiàn)在就可以學(xué)習(xí)BOM了。

注意： 所有的案例都在這里鏈接: 提取密碼密碼: yvxo，文章中的每個(gè)案例后面都有對(duì)應(yīng)的序號(hào)。

BOM(Browser Object Model)：瀏覽器對(duì)象模型，提供了一套操作瀏覽器的工具。

BOM中包含的內(nèi)容很多，但是有很多東西是用不到的。在BOM中我們需要掌握定時(shí)器。

window對(duì)象是一個(gè)全局對(duì)象，也可以說(shuō)是JavaScript中的頂級(jí)對(duì)象

像document、alert()、console.log()這些都是window的屬性，其實(shí)BOM中基本所有的屬性和方法都是屬性window的。

所有定義在全局作用域中的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法

window對(duì)象下的屬性和方法調(diào)用的時(shí)候可以省略window

示例代碼： [01-window對(duì)象.html]

普通函數(shù)調(diào)用的時(shí)候：

var name = "項(xiàng)羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 沒(méi)有 new 的時(shí)候就相當(dāng)于普通函數(shù)調(diào)用
var obj = Teacher(); // 打印的this 指的是全局對(duì)象window
console.log(name);   // 虞姬
console.log(age);    // 22
/* 
為什么會(huì)是 虞姬 和 22 ？ 不是定義了一個(gè)全局變量name = "項(xiàng)羽"嗎？
因?yàn)?Teacher作為一個(gè)普通函數(shù)調(diào)用，它里面的this指的就是全局對(duì)象
js 代碼一步步往下執(zhí)行，一開(kāi)始是定義了一個(gè)name="項(xiàng)羽"的全局變量，
但是下面的this有將"虞姬"指向了全局對(duì)象，所以最后打印的是虞姬 22
*/

構(gòu)造函數(shù)的時(shí)候：

var name = "項(xiàng)羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 沒(méi)有 new 的時(shí)候就相當(dāng)于普通函數(shù)調(diào)用
var obj = new Teacher(); // 打印的this 指的是構(gòu)造函數(shù)對(duì)象 Teacher
console.log(name); // 項(xiàng)羽
console.log(age); // 28
/*
Teacher作為構(gòu)造函數(shù)的時(shí)候，它內(nèi)部的this指向的是 對(duì)象Teacher
此時(shí)的全局變量name="項(xiàng)羽" 將不會(huì)再受this的影響，所以，打印的是 項(xiàng)羽 28
*/

window.onload事件會(huì)在窗體加載完成后執(zhí)行，通常我們稱(chēng)之為入口函數(shù)。

window.onload = function(){
    //里面的代碼會(huì)在窗體加載完成后執(zhí)行。
    //窗體加載完成包括文檔樹(shù)的加載、還有圖片、文件的加載完成。
}

注意：

如果有圖片加載，那么代碼一定要寫(xiě)到window.onload里面，否則會(huì)出現(xiàn)圖片沒(méi)有加載完成，獲取到的寬度和高度不對(duì)的情況。

瀏覽器會(huì)對(duì)頁(yè)面的加載做優(yōu)化，在加載圖片的時(shí)候，圖片的引入會(huì)延遲。

一個(gè)頁(yè)面中不能有兩個(gè)onload函數(shù)，寫(xiě)在下面的會(huì)覆蓋掉上面的。

示例代碼： [02-window.onload對(duì)象(一)]

為什么下面的代碼會(huì)報(bào)錯(cuò)呢？

    
    
    
    
    
    
    



    按鈕
    

此時(shí)就可以用window.onload入口函數(shù)：

    
    
    
    
    
    



    按鈕
    

示例代碼：圖片加載 [03-window.onload對(duì)象(二)]

為什么獲取的寬度和高度都為0呢，js代碼不是寫(xiě)在最后面了嗎？

效果圖：

這是因?yàn)椋瑸g覽器會(huì)對(duì)頁(yè)面的加載做優(yōu)化，在加載圖片的時(shí)候，圖片的引入會(huì)延遲。這時(shí)候需要用window.onload：

效果圖：

window.open() 打開(kāi)一個(gè)窗口

語(yǔ)法：window.open(url, [name], [features]);

參數(shù)1：需要載入的url地址
參數(shù)2：新窗口的名稱(chēng)
       _self:在當(dāng)前窗口打開(kāi)
       _blank:在新的窗口打開(kāi)
參數(shù)3：窗口的屬性，指定窗口的大小
返回值：會(huì)返回剛剛創(chuàng)建的那個(gè)窗口，用于關(guān)閉

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

點(diǎn)擊在新窗口跳轉(zhuǎn)到百度
點(diǎn)擊在本窗口跳轉(zhuǎn)到百度

效果圖：

window.close() 關(guān)閉一個(gè)窗口 在火狐瀏覽器下會(huì)失效解決辦法

newWin.close()；//newWin是剛剛創(chuàng)建的那個(gè)窗口
window.close(); //把當(dāng)前窗口給關(guān)閉了

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

點(diǎn)擊在新窗口跳轉(zhuǎn)到百度
點(diǎn)擊在本窗口跳轉(zhuǎn)到百度
點(diǎn)擊關(guān)閉打開(kāi)的新窗口
點(diǎn)擊關(guān)閉本窗口

效果圖：

定時(shí)器里面不能用this，因?yàn)樵诙〞r(shí)器里面，this，指向的是全局對(duì)象window。

延時(shí)定時(shí)器可以讓代碼延遲一段時(shí)間之后才執(zhí)行。定時(shí)器不是我們調(diào)用，我們只需要把函數(shù)的地址傳過(guò)去，時(shí)間到了，window會(huì)自己調(diào)用。

1、設(shè)置延時(shí)定時(shí)器

語(yǔ)法：setTimeOut(callback, time);

參數(shù)1：回調(diào)函數(shù)，時(shí)間到了就會(huì)執(zhí)行。
參數(shù)2：延時(shí)的時(shí)間 單位：毫秒
返 回：定時(shí)器的id，用于清除

示例代碼： [06-延時(shí)定時(shí)器.html]

var timer = setTimeOut(function(){
    //1秒后將執(zhí)行的代碼。
    console.log("哈哈");
}, 1000);

2.清除延時(shí)定時(shí)器

語(yǔ)法：clearTimeOut(timerId);

// 參數(shù)：定時(shí)器id
clearTimeOut(timerId);

示例代碼：

開(kāi)啟
關(guān)閉

效果圖：兩秒后執(zhí)行代碼，兩秒鐘之內(nèi)清除定時(shí)器，就不會(huì)執(zhí)行

間歇定時(shí)器讓定時(shí)器每隔一段時(shí)間就會(huì)執(zhí)行一次，并且會(huì)一直執(zhí)行，到清除定時(shí)器為止。

1、設(shè)置間歇定時(shí)器

語(yǔ)法：var intervalID = setInterval(func, delay);

參數(shù)1：重復(fù)執(zhí)行的函數(shù)
參數(shù)2：每次延遲的毫秒數(shù)
返 回：定時(shí)器的id，用于清除

示例代碼：

var timer = setInterval(function(){
    //重復(fù)執(zhí)行的代碼。
}, 1000);

2、清除間歇定時(shí)器

語(yǔ)法：clearInterval(intervalID);

參數(shù)：定時(shí)器id

示例代碼： [07-間歇定時(shí)器.html]

開(kāi)啟
關(guān)閉

效果圖：

1、獲取短信驗(yàn)證碼案例 [08-定時(shí)器綜合練習(xí)-獲取短信驗(yàn)證碼.html]

效果圖：

2、倒計(jì)時(shí)案例 [09-定時(shí)器綜合練習(xí)-倒計(jì)時(shí)案例.html]

    00
    :
    00
    :
    00

效果圖：

3、電子表案例 [10-定時(shí)器綜合練習(xí)-電子表.html]

效果圖：

4、機(jī)械表案例 [11-定時(shí)器綜合練習(xí)-機(jī)械表.html]

效果圖：

location對(duì)象也是window的一個(gè)屬性，location其實(shí)對(duì)應(yīng)的就是瀏覽器中的地址欄。

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

location.; //讓頁(yè)面跳轉(zhuǎn)到百度首頁(yè)

location.reload()讓頁(yè)面重新加載

location.reload(true);//強(qiáng)制刷新，相當(dāng)于ctrl+F5
location.reload(false);//刷新，相當(dāng)于F5

location的其他屬性

console.log(window.location.hash);      // 哈希值 其實(shí)就是錨點(diǎn)
console.log(window.location.host);      // 服務(wù)器 服務(wù)器名+端口號(hào)
console.log(window.location.hostname);  // 服務(wù)器名
console.log(window.location.pathname);  // 路徑名
console.log(window.location.port);      // 端口
console.log(window.location.protocol);  // 協(xié)議
console.log(window.location.search);    // 參數(shù)

示例代碼：定時(shí)跳轉(zhuǎn)網(wǎng)址 [12-location對(duì)象-定時(shí)跳轉(zhuǎn).html]

注冊(cè)成功，5秒后跳轉(zhuǎn)

效果圖：

window.navigator的一些屬性可以獲取客戶(hù)端的一些信息

navigator.userAgent：返回瀏覽器版本 

navigator.onLin：返回網(wǎng)絡(luò)狀態(tài) true / false

示例代碼：獲取瀏覽器版本 [13-navigator對(duì)象.html]

// 打印瀏覽器版本
console.log(navigator.userAgent);

// 打印網(wǎng)絡(luò)狀態(tài)
console.log(navigator.onLine);

效果圖：

window.screen的一些屬性可以獲取屏幕的寬高

1、獲取屏幕的可占用寬高

返回訪問(wèn)者屏幕的寬度、高度，以像素計(jì)，減去界面特性，比如窗口任務(wù)欄。

screen.availWidth：獲取屏幕的可用寬度

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

2、獲取屏幕寬高

screen.width：獲取屏幕的寬度

screen.height：獲取屏幕的高度

示例代碼： [14-screen對(duì)象.html]

document.write("當(dāng)前屏幕可占用寬度：" + screen.availWidth + "
");    // 1864
document.write("當(dāng)前屏幕可占用高度：" + screen.availHeight + "
");   // 1080
document.write("當(dāng)前屏幕寬度：" + screen.width + "
");              // 1920
document.write("當(dāng)前屏幕高度：" + screen.height + "
");             // 1080

效果圖：

history對(duì)象表示頁(yè)面的歷史

1、后退 history.back()

history.back() 方法加載歷史列表中的前一個(gè)URL。這與在瀏覽器中點(diǎn)擊后退按鈕是相同的：

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

2、后退 history.forward()

history forward() 方法加載歷史列表中的下一個(gè)URL。這與在瀏覽器中點(diǎn)擊前進(jìn)按鈕是相同的：

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

在javascript中可以創(chuàng)建3種彈框，分別是：警告框、確認(rèn)框、提示框。

1、警告框 alert

警告框經(jīng)常用于確保用戶(hù)可以得到某些信息。

當(dāng)警告框出現(xiàn)后，用戶(hù)需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。

window.alert("呵呵呵");
// window.alert() 方法可以不帶上window對(duì)象，直接使用alert()方法。
alert("呵呵呵");

2、確認(rèn)框 confirm

確認(rèn)框通常用于驗(yàn)證是否接受用戶(hù)操作。

當(dāng)確認(rèn)卡彈出時(shí)，用戶(hù)可以點(diǎn)擊 "確認(rèn)" 或者 "取消" 來(lái)確定用戶(hù)操作。

當(dāng)你點(diǎn)擊 "確認(rèn)", 確認(rèn)框返回 true， 如果點(diǎn)擊 "取消", 確認(rèn)框返回 false。

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

3、提示框 prompt

提示框經(jīng)常用于提示用戶(hù)在進(jìn)入頁(yè)面前輸入某個(gè)值。

當(dāng)提示框出現(xiàn)后，用戶(hù)需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。

如果用戶(hù)點(diǎn)擊確認(rèn)，那么返回值為輸入的值。如果用戶(hù)點(diǎn)擊取消，那么返回值為null。

// 參數(shù)一：提示內(nèi)容  參數(shù)er：可以省略，輸入框默認(rèn)顯示內(nèi)容
var person = prompt("請(qǐng)輸入你的名字", "Levi丶");
if (person != null && person != "") {
    alert("你好" + person);
}

4、彈框換行
彈窗使用 反斜杠 + "n"( ) 來(lái)設(shè)置換行。

alert("大家好
我是
Levi丶");

Cookie用于存儲(chǔ)web頁(yè)面的用戶(hù)信息

1、什么是Cookie？

Cookie是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中。

當(dāng)web服務(wù)器向?yàn)g覽器發(fā)送web頁(yè)面時(shí)，在連接關(guān)閉后，服務(wù)端不會(huì)記錄用戶(hù)的信息。

Cookie的作用就是用于解決 "如何記錄客戶(hù)端的用戶(hù)信息":

當(dāng)用戶(hù)訪問(wèn)web頁(yè)面時(shí)，他的名字可以記錄在cookie中。

在用戶(hù)下一次訪問(wèn)該頁(yè)面時(shí)，可以在cookie中讀取用戶(hù)訪問(wèn)記錄。

Cookie以名/值對(duì)形式存儲(chǔ)，如下所示:

username=Levi

當(dāng)瀏覽器從服務(wù)器上請(qǐng)求web頁(yè)面時(shí)，屬于該頁(yè)面的cookie會(huì)被添加到該請(qǐng)求中。服務(wù)端通過(guò)這種方式來(lái)獲取用戶(hù)的信息。

2、使用 JavaScript 創(chuàng)建Cookie

JavaScript可以使用document.cookie屬性來(lái)創(chuàng)建 、讀取、及刪除cookie。

JavaScript中，創(chuàng)建cookie如下所示：

document.cookie = "username = Levi";

你還可以為cookie添加一個(gè)過(guò)期時(shí)間（以 UTC 或 GMT 時(shí)間）。默認(rèn)情況下，cookie 在瀏覽器關(guān)閉時(shí)刪除：

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

你可以使用path參數(shù)告訴瀏覽器cookie的路徑。默認(rèn)情況下，cookie屬于當(dāng)前頁(yè)面

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

3、使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來(lái)讀取cookie：

var x = document.cookie;

document.cookie將以字符串的方式返回所有的cookie，類(lèi)型格式cookie1=value; cookie2=value; cookie3=value;

4、使用 JavaScript 修改 Cookie

在 JavaScript 中，修改cookie類(lèi)似于創(chuàng)建cookie，如下所示：

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

舊的cookie將被覆蓋。

5、使用 JavaScript 刪除 Cookie

刪除cookie非常簡(jiǎn)單。您只需要設(shè)置expires參數(shù)為以前的時(shí)間即可，如下所示

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

注意，當(dāng)您刪除時(shí)不必指定 cookie 的值。

6、Cookie 字符串

document.cookie屬性看起來(lái)像一個(gè)普通的文本字符串，其實(shí)它不是。

即使您在document.cookie中寫(xiě)入一個(gè)完整的cookie字符串, 當(dāng)您重新讀取該cookie信息時(shí)，cookie 信息是以名/值對(duì)的形式展示的。

如果您設(shè)置了新的cookie，舊的cookie不會(huì)被覆蓋。 新cookie將添加到document.cookie 中，所以如果您重新讀取document.cookie。

上一篇：JavaScript 基礎(chǔ)知識(shí) - DOM篇(二)
下一篇：JavaScript 進(jìn)階知識(shí) - 特效篇(一)