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

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

注意： 所有的案例都在這里鏈接: 提取密碼密碼: yvxo，文章中的每個案例后面都有對應的序號。

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

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

window對象是一個全局對象，也可以說是JavaScript中的頂級對象

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

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

window對象下的屬性和方法調用的時候可以省略window

示例代碼： [01-window對象.html]

普通函數(shù)調用的時候：

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

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

構造函數(shù)的時候：

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

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 沒有 new 的時候就相當于普通函數(shù)調用
var obj = new Teacher(); // 打印的this 指的是構造函數(shù)對象 Teacher
console.log(name); // 項羽
console.log(age); // 28
/*
Teacher作為構造函數(shù)的時候，它內部的this指向的是 對象Teacher
此時的全局變量name="項羽" 將不會再受this的影響，所以，打印的是 項羽 28
*/

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

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

注意：

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

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

一個頁面中不能有兩個onload函數(shù)，寫在下面的會覆蓋掉上面的。

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

為什么下面的代碼會報錯呢？

    
    
    
    
    
    
    



    按鈕
    

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

    
    
    
    
    
    



    按鈕
    

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

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

效果圖：

這是因為，瀏覽器會對頁面的加載做優(yōu)化，在加載圖片的時候，圖片的引入會延遲。這時候需要用window.onload：

效果圖：

window.open() 打開一個窗口

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

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

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

點擊在新窗口跳轉到百度
點擊在本窗口跳轉到百度

效果圖：

window.close() 關閉一個窗口 在火狐瀏覽器下會失效解決辦法

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

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

點擊在新窗口跳轉到百度
點擊在本窗口跳轉到百度
點擊關閉打開的新窗口
點擊關閉本窗口

效果圖：

定時器里面不能用this，因為在定時器里面，this，指向的是全局對象window。

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

1、設置延時定時器

語法：setTimeOut(callback, time);

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

示例代碼： [06-延時定時器.html]

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

2.清除延時定時器

語法：clearTimeOut(timerId);

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

示例代碼：

開啟
關閉

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

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

1、設置間歇定時器

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

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

示例代碼：

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

2、清除間歇定時器

語法：clearInterval(intervalID);

參數(shù)：定時器id

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

開啟
關閉

效果圖：

1、獲取短信驗證碼案例 [08-定時器綜合練習-獲取短信驗證碼.html]

效果圖：

2、倒計時案例 [09-定時器綜合練習-倒計時案例.html]

    00
    :
    00
    :
    00

效果圖：

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

效果圖：

4、機械表案例 [11-定時器綜合練習-機械表.html]

效果圖：

location對象也是window的一個屬性，location其實對應的就是瀏覽器中的地址欄。

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

location.; //讓頁面跳轉到百度首頁

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);  // 協(xié)議
console.log(window.location.search);    // 參數(shù)

示例代碼：定時跳轉網址 [12-location對象-定時跳轉.html]

注冊成功，5秒后跳轉

效果圖：

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

navigator.userAgent：返回瀏覽器版本 

navigator.onLin：返回網絡狀態(tài) true / false

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

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

// 打印網絡狀態(tài)
console.log(navigator.onLine);

效果圖：

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

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

返回訪問者屏幕的寬度、高度，以像素計，減去界面特性，比如窗口任務欄。

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

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

2、獲取屏幕寬高

screen.width：獲取屏幕的寬度

screen.height：獲取屏幕的高度

示例代碼： [14-screen對象.html]

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

效果圖：

history對象表示頁面的歷史

1、后退 history.back()

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

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

2、后退 history.forward()

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

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

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

1、警告框 alert

警告框經常用于確保用戶可以得到某些信息。

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

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

2、確認框 confirm

確認框通常用于驗證是否接受用戶操作。

當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。

當你點擊 "確認", 確認框返回 true， 如果點擊 "取消", 確認框返回 false。

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

3、提示框 prompt

提示框經常用于提示用戶在進入頁面前輸入某個值。

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

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為null。

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

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

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

Cookie用于存儲web頁面的用戶信息

1、什么是Cookie？

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

當web服務器向瀏覽器發(fā)送web頁面時，在連接關閉后，服務端不會記錄用戶的信息。

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

當用戶訪問web頁面時，他的名字可以記錄在cookie中。

在用戶下一次訪問該頁面時，可以在cookie中讀取用戶訪問記錄。

Cookie以名/值對形式存儲，如下所示:

username=Levi

當瀏覽器從服務器上請求web頁面時，屬于該頁面的cookie會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。

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

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

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

document.cookie = "username = Levi";

你還可以為cookie添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：

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

你可以使用path參數(shù)告訴瀏覽器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類似于創(chuàng)建cookie，如下所示：

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

舊的cookie將被覆蓋。

5、使用 JavaScript 刪除 Cookie

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

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 進階知識 - 特效篇(一)