目錄
寫在前面的反思
用了大概一個星期的時間吧，把DOM的基礎知識點和對應的一些案例過了一遍。其實我也沒有嚴格要求自己在多長多長時間內去學完多少多少知識或者看完哪部分知識。我都是看視頻、記筆記，然後再整理整理筆記，練習練習視頻裏面的案例，敲敲代碼，整理思路。就是在敲代碼的過程中要試着去複述案例的思路，核心點這些，不然也會忘記的。
反正在練習案例敲代碼的過程中，儘量自己去完成，如果遇到不懂得點或者案例出問題了，再回頭看看視頻，然後看看自己哪些地方沒有考慮到，再去糾正。我的整個學習過程就是這樣，前期肯定是去模仿別人得代碼，慢慢的時間長了，就有手感了，漸漸的就可以自己去實現一些好玩的效果了。
對我自己來說吧，我還是在模仿別人的效果，看別人寫代碼，看別人的頁面效果，然後自己去做一些小部分功能的實現。總的來說，目前還是挺好的，都是一些基礎問題，也是我認爲前端人員必須要走的過程。還是有很多東西要學要去搞明白的。加油鴨！！
反思結束。。。。。。
BOM筆記
暫時結束DOM的學習，因爲還是接觸的是基礎部分，一些高級操作目前還沒有涉及到。緊接着就開始了BOM的學習。
先附上我的筆記吧。emmmmmmmm...... 可能有點白話文，還有點草，但是結合案例的話，是很好理解的。
###BOM
BOM概述
瀏覽器對象模型，瀏覽器是一個對象。
BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象，核心是window
BOM構成
BOM由document、location、navigation、screen、history構成。
window是瀏覽器的頂級對象，有雙重身份
a.是js訪問瀏覽器窗口的一個接口
b.是一個全局對象，定義在全局作用域中的變量和函數都會變成window對象的屬性和方法
window對象在調用時可以省略
###window
常用事件
窗口加載事件
onload事件：當文檔內容完全加載完成後會觸發事件(所有內容包括圖片、腳本文件等)
DOMContentLoaded事件：當DOM加載完成後會觸發事件(這裏不包括圖片等文件)
DOMContentLoaded加載速度會比onload加載速度稍快
使用這些窗口加載事件，script標籤就不用刻意放在body的最後了，可以放在任意位置
窗口大小事件
onresize事件：使用window.innerWidth和innerHeight來控制觸發事件的。
當瀏覽器的寬度或者高度變化1px就會觸發事件###定時器(兩個方法)
setTimeout(調用函數[,延時時間])
window.setTimeout(),在調用定時器方法時，可以省略window
調用函數就是我們的執行函數，也叫回調函數。
回調函數：就是先執行其他事情，當時間到了，再回頭調用函數，就叫回調函數(callback)
延時時間：單位ms，不寫默認是0ms，要是寫時間的話必須是ms。這個參數是指定什麼時間觸發事件。
setInterval(調用函數，間隔時間)
調用函數：回調函數
間隔時間：數值，單位ms。間隔多久調用一次回調函數
倒計時效果
兩種方法的區別
setTimeout是調用一次回調函數，setInterval是不斷調用回調函數
停止定時器
clearTimeout(timeID) 參數是定時器的標識符(名字)
clearInterval(intervalID) 參數是定時器的標識符(名字)
通常一個文檔中定時器比較多，爲了方便管理應用這些定時器，
一般會給定時器起名字也是標識符(賦值給一個變量保存)。
var time = setTimeout(function(){},2000) 頁面加載完成後2s觸發
var timer = setInterval(function(){},1000) 頁面加載完成後，每間隔1s就觸發###JS執行機制
JS是單線程，同一時間只能做一件事，這就意味着，所有任務都需要排隊，前一個任務結束後纔會執行後一個
任務。這樣所導致的問題是：如果js執行的時間過長，就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的感覺解決上述問題：同步和異步——允許js創建多個線程
同步：主線程執行棧
同步是指，程序執行順序與任務排列順序一致
舉例：做飯時，要燒水-洗菜-炒菜，執行順序：燒水(必須稍晚水才進行下一步)——洗菜——炒菜
異步(回調函數實現)：任務隊列(回調函數是異步進行)
異步是指：同時可以做多個任務
舉例：做飯，燒水時，同時可以洗菜炒菜一起進行。js代碼執行過程
程序先從主線程的執行棧執行，然後去任務對列找異步任務，把異步任務放到執行棧的最後。
當主線程執行棧中的所有同步任務執行完畢後，再執行異步任務。直至完畢後，異步的任務隊列清空
主線程執行棧還會檢測異步任務隊列是否還有任務的存在。
由於主線程不斷重複獲得任務、執行任務、再獲得任務、再執行任務，所有這樣的機制成爲事件機制(Event Loop)###this的指向問題
this的指向在函數定義時是決定不了的，只有函數執行時才能確定this到底指向誰。
一般情況下this最終指向的是那個調用它的對象。
1.全局作用域、普通函數、定時器的this——> window
2.方法調用中，this指向，調用方法的對象。誰調用方法this指向誰
3.構造函數：this指向構造函數的實例化
案例說明
常用事件
窗口加載事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// window是BOM的頂級對象
// 常用事件 窗口加載事件 window.onload \ window.DOMContentLoaded
// onload事件是在文檔所有內容(包括圖片、腳本、css文件等)都加載完成之後，才執行的
// DOMContentLoaded事件是在所有DOM標籤加載完成後執行，不包括圖片等
// 簡單來說，就是一個是把網頁中的所有信息加載完成後，在執行js代碼，用戶體驗差。另一個是
// 只需把標籤加載完成，js代碼就會執行，就算圖片之類加載慢的元素沒有出來，但是功能還是能用的。
window.onload = function () {
console.log(11);
}
var div = document.querySelector('div');
window.onresize = function () {
if (window.innerWidth < 900) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
}
</script>
</body>
</html>
定時器
主要是講解兩個方法的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">點擊暫停定時器</button> <br> <br>
<script>
setTimeout(function () {
console.log('定時2s，彈出此文字');
}, 2000);
// textChange 是回調函數的名稱
var timer = setInterval(textChange, 1000);
function textChange() {
console.log('每隔1s，就會重複出現此文字');
}
// 點擊按鈕時，清除定時器
var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
clearInterval(timer); // 清除定時器時，參數是定時器的名字
})
</script>
</body>
</html>
點擊按鈕，停止定時器
停止定時器的應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>發送消息</title>
</head>
<body>
請輸入手機號：<input type="tel"> <button>發送</button>
<script>
// 點擊發送後，按鈕禁用，並且內容變爲倒計時的內容
// 按鈕點擊後，內容是變化的，所以需要用到定時器
// 倒計時時間到了，按鈕恢復原狀
var btn = document.querySelector('button');
var sec = 3; // 定義倒計時的時間
btn.addEventListener('click', function () {
btn.disabled = true;
// 添加倒計時效果
var time = setInterval(function () {
if (sec == 0) {
// 倒計時時間到了，需要停止倒計時，並且按鈕回覆原狀態
clearInterval(time);
btn.disabled = false;
btn.innerHTML = '發送';
} else {
btn.innerHTML = '還有' + sec + '秒才能發送';
sec--;
}
}, 1000);
})
</script>
</body>
</html>
效果：裏面的秒數是變化的
this指向問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this指向</title>
</head>
<body>
<script>
// 1.全局作用域(window)、普通函數、定時器
console.log(this); // window
function text() {
console.log(this); // window
}
window.text();
var time = setTimeout(function () {
console.log(this); // window
}, 2000)
// 2.方法的調用
var obj = {
sayHi: function () {
console.log(this); // this指向調用次方法的obj對象
}
};
obj.sayHi(); // obj
// 3.構造函數
function Only() {
console.log(this); // this指向 Only的實例對象
}
var person = new Only();
</script>
</body>
</html>
輸出結果：
JS執行機制
同步：主線程執行棧
異步：任務隊列
<script>
// 問題1
console.log(1);
setTimeout(function () {
console.log(4);
}, 1000)
setTimeout(function () {
console.log(3);
}, 1000)
console.log(2);
// 1 2 4 3
// 問題2
console.log(1);
setTimeout(function () {
console.log(4);
}, 0)
setTimeout(function () {
console.log(3);
}, 0)
console.log(2);
// 1 2 4 3
// 問題3
console.log(1);
// 沒有觸發點擊事件時，異步的任務隊列中是沒有這個事件的
document.onclick = function () {
console.log('click');
}
console.log(2);
setTimeout(function () {
console.log(3);
}, 3000)
</script>
輸出結果：
問題1和問題2
問題3：
一定要深入理解JS執行機制！！！