第一章 javascript簡介
1、什麼是js？
認識：js就是一個浏覽器端的腳本語言，負責實作頁面的一些互動效果
(點選事件，輸入觸發事件，滑鼠拖拽事件等)以及實作和背景資料的互動(ajax)
2、javascript中三種輸出方式
1.alert("輸出文本")----調用浏覽器的視窗函數實作
内容展示
2.console.log("輸出文本")----開發者背景才能看見的
輸出内容----檢查代碼錯誤和檢視相關資料
3.document.write("輸出文本内容")----把需要顯示的
内容放入到html結構中顯示
第2章 文法基礎
對于這一章來說，我們需要清楚這5個概念：變量、資料類型、運算符、表達式、語句。可以根據下圖25-38來了解：
圖25-38 分析圖
1、變量
什麼是變量？------變量用于存儲程式中變化的資料
(1)定義變量
es5：
var 變量名 = 資料值
es6：
let 變量名 = 資料值
const 常量名 = 資料值
(2)變量的命名
變量由字母、下劃線、$或數字組成，并且第一個字元不能是數字。
2、在設定變量中，es5文法和es6文法有什麼差別？
1.var可以重新定義let不行
2.var和let都可以重新指派
3.const不能重新定義,也不能重新指派
【注意】
1.var和let定義變量不指派的時候列印出來顯示的是undefined
2.var可以重新定義let不行
3.var和let都可以重新指派
4.const常量定義必須指派，否則列印報錯
6.const不能重新定義,也不能重新指派
3、資料類型
1.基本資料類型---6種(es5 5種 es6 1種)
Number----阿拉伯數字(整數，小數，負數)
String----字元串(用雙引号包裹的資料)
Boolean--(布爾型)true---真 false---假----做邏輯判斷使用
Undefined--(未定義)
null----空
symbol----唯一
2.引用資料類型(複合資料類型)
object-----對象
4、基本資料類型的辨識 typeof
文法結構
var 變量名 = 資料類型；
console.log( typeof 變量名);
5、資料類型的轉換
(1).強制轉換
parseInt----将【字元串】轉化為數字類型隻會保留整數部分
parseFloat----将【字元串】轉化為數字類型保留小數部分
boolean轉換
注意：除了0 "" '' undefined NaN null 得到fasle ， 其他的都是true
(2).自動轉換
案列：
純數字字元串除了+号以外都會自動轉化為數字類型進行計算。
6、運算符的認識
(1)算術運算符
+- * /
重點掌握：----(重點)
%---默---取餘數
++------自身值+1--- a = a+1
【注意】
當++在變量的右邊；先參與其他邏輯程式，再+1；
當++再變量的左邊；先+1在參與其他邏輯程式；
(2)比較運算符
== != > >=
===(全等于) !==(不全等于)
【注意】
1.比較運算符必須用在條件控制語句中，比如分支語句中的if(a
)和循環語句的小括号中比如for(a
)2.使用== 隻會比較變量的值的比對，不會比較資料類型
===會比較值和他的資料類型
(3)指派運算符
+= -= *= /=
文法結構
a += b;-----a = a+b;
(4)邏輯運算符
&& || !
(5)條件運算符(三元運算符)
Var a=條件？ 表達式1：表達式2;
7、字元串拼接符号
es5文法：
在es5文法中如果兩個變量的值都是字元串類型+就是把他們拼接成一個字元串
如果要計算，請強制轉換類型後再計算
var g = 6;
var f = "我的實習駕照現在隻有" + g + "分";
console.log(f);
es6:
var r = 4;
var h = `小明今天開車出去闖紅燈了，被扣了${r}分`;
console.log(h);
8、表達式與語句
1+2是一個表達式，而整一句代碼“var a=1+2;”就是一個語句。
圖25-39 表達式與語句
9、注釋
//單行注釋
第3章 流程控制
1、選擇結構
選擇結構指的是根據“條件判斷”來決定執行哪一段代碼。選擇結構有單向選擇、雙向選擇以及多向選擇3種。
在JavaScript中，選擇結構共有2種方式，一種是if語句，另外一種是switch語句。
(1)if語句的使用
1.單分支語句
文法結構：
if (判斷語句) {
執行代碼
}
特點：滿足就執行，不滿足就不管
2.雙分支語句
文法結構：
if (判斷語句) {
滿足條件執行代碼
} else {
不滿足條件執行代碼
}
特點：滿足條件執行{}中的代碼，否則執行else{}中的代碼
3.多分支語句
文法結構：
if (判斷語句1) {
滿足條件1執行代碼
} else if (判斷語句2) {
滿足條件2執行代碼
}
...
}else{
其他都不滿足時候執行的條件
}
特點：
1.有2個以上的條件判斷時候使用，滿足哪個條件，就執行
哪個條件下的代碼。
2.可以用來做範圍判斷和精确判斷
(2)switch的認識
switch就是做的if多分支語句的精确判斷
文法結構：
switch (info) {
case "a":
console.log("你不用寫作業了");
break;
case "b":
console.log("找人幫你寫作業");
break;
case "c":
console.log("我親自幫你寫作業");
break;
default:
console.log("我發現你有點不尊重我的頭發，作業5倍");
break;
}
2、循環結構
循環語句指的是在“滿足某個條件下”循環反複地執行某些操作的語句。
在JavaScript中，循環語句共有以下3種：
(1)for循環(重點)
文法結構：
for (var a=0;a<5;a++) {
//執行代碼
}
(2)while循環
var a = 1
while (a <= 10) {
console.log(a);
a++;
}
(3)do while循環
var a = 11;
do {
console.log(a);
a++;
} while (a <= 10);
特點：不管條件先執行一次才說判定條件
3、嵌套循環
// 嵌套循環
// 外層循環行
for (var a = 1; a <= 3; a++) {
// 内層循環列
for (var b = 1; b <= 4; b++) {
document.write(a + "-" + b + " ")
}
document.write("
")
}
4、break和continue
break----停止所有循環
continue---跳過目前滿足條件的循環
第4章 初識函數
在JavaScript中，函數指的是一個用大括号“{}”括起來的、可重複使用的、具有特定功能的語句塊。如果想要使用函數，一般需要2步：
② 定義函數；
② 調用函數；
1、什麼是函數？
函數就是把我們常用的代碼集合成一個方法，然後再你想用的地方調用函數
實作操作就ok了，函數定義好但是不能自己運作，需要調用才能執行；
2、函數的定義
(1)聲明式---------(推薦使用)
文法結構：
function 函數名 () {
//要封裝的代碼
}
調用函數運作：函數名();
(2)表達式
文法結構：
var 變量名 = function () {//匿名函數
//要封裝的代碼
}
調用函數運作：變量名();
【差別】聲明式有函數提升作用，是以可以在定義之前調用執行
表達式沒有函數提升作用，不能再定義前調用執行
3、形式參數的認識
作用，實作封裝的功能代碼需要的變化的資料的提供。
文法結構：----(重點)
function 函數名 (形參1=值1，形參2，...) {
//要封裝的代碼
}
函數名(實參)
【特點】
1.形式參數可以有多個，并且按照順序來用實參指派
2.形參可以設定預設值，一旦用用預設值的形參，不需要
傳實參也可以使用，但是如果傳了實參，就會覆寫預設值
3.形式參數就是一個函數的局部變量，隻能在函數中使用
4、函數的作用域
1.全局作用域
在代碼中任何位置都可以使用的區域----整個代碼中
設定在全局作用域下的變量稱之為全局變量，
任何位置都可以使用它
2.局部作用域
在指定的範圍内才能使用的區域----函數中
設定在函數中的變量叫做局部變量，隻能在函數中使用
3.局部變量傳回全局使用
使用return來實作局部變量的值轉移到全局使用
文法結構：
function num() {
var a = 100;
// 使用return傳回a的值到全局
return a;
}
總結函數的特點：
1.函數是用來封裝一段代碼達到優化代碼結構的操作
2.函數定義中可以調用其他函數的執行函數
3.函數中往往會形成一個獨立的操作區域----局部區域
5、系統函數的認識
isNaN(值)-------判定目前資料類型是否為數字類型
是否命題(is not a Number)----是不是不是一個數字
true------不是數字類型
false-----是數字類型
第5章 字元串對象
1、什麼是對象
萬物皆對象
對象是集合了很多的的屬性和方法
了解：我們使用對象就是在使用它的屬性和方法
一般我們會更多的使用内置對象的方法
而我們自己建立的對象，往往把資料作為這個對象的屬性
儲存下來，然後通過渲染進行頁面顯示
2、對象的定義----自定義對象
1.執行個體化定義
var obj = new Object()
2.字面量定義----推薦使用
var obj = {}
3、對象的屬性方法添加
文法結構---通用
對象變量名.屬性名 = 屬性值
存入的屬性結構
{屬性名1：屬性值1，屬性名2：屬性值2}---鍵值對結構
直接在字面量中添加，執行個體化不能直接添加資料
var obj2 = { name: "小魯班" };
4、擷取對象中的具體值---查詢
對象變量名.屬性名
5、this的使用
在函數中設定的this，誰調用這個函數this就指代了誰
6、對象的周遊
for..in----周遊數組
文法結構
for (var key in obj) {
obj[key]----【注意】必須使用索引的中括号才能使key轉義
}
7、内置對象和相關函數和屬性的掌握
内置對象，就是在創造js的時候已經存在擁有屬性和方法的現成對象
我們使用它就是用到它的屬性和方法
1.String對象的屬性和方法
1.屬性
1.length-----擷取字元串的字元個數
var a = "abc" ----自動轉換newString("abc");
a.length
2.方法
1.charAt(index)----通過索引找字元
var str = "abcdefgh";
console.log(str.charAt(5));
【注意】如果給的索引超出範圍，傳回空字元串
2.indexOf(str)----通過字元找索引
str.indexOf("X",start)
start代表的是從第幾個下标開始查找，預設不寫為0
【注意】沒有找到比對字元就傳回-1
3.replace()----字元串替換
【注意】
1.替換的字元串是傳回的新字元串，需要用變量儲存使用
不會覆寫原來的字元串
2.預設替換隻會比對一次，要進行全局替需要使用正則操作
/需要被替換的字元/g
var str1 = str.replace(需要被替換的字元, 替換字元)
4.字元串的截取
1.substr()----截取字元串
str.substr(開始的索引，截取字元串的長度)
2.subString()--截取字元串
str.substring(開始的索引，結束索引(不包含))
【注意】
1.使用substr最後一個值為截取的長度，
subsring最後一個值為結束的索引但是不包括，是以一般我們
+1處理
2.當這兩個函數隻給一個開始索引的時候，
就會從目前位置一直把所有的字元截取完
2.Number對象的屬性和方法
1.方法：
toFixed(index)----保留小數位數
num = num.toFixed(2);
【注意】純數字的字元串不能使用這個方法，
如果要使用請強制轉換為小數
在JavaScript中，字元串對象常用的屬性和方法如下表28-1和表28-2所示：
表28-1 字元串對象的屬性
| 屬性 | 說明 |
| length | 擷取字元串的長度 |
表28-2 字元串對象的方法
| 方法 | 說明 |
| toLowerCase()、toUpperCase() | 大小寫轉換 |
| charAt() | 擷取某一個字元 |
| substring() | 截取字元串 |
| replace() | 替換字元串 |
| split() | 分割字元串 |
| indexOf()、lastIndexOf() | 檢索字元串的位置 |
第6章 數組對象
在JavaScript中，我們可以使用“數組”來存儲一組“相同資料類型”(一般情況下)的資料類型。
1、什麼是數組？
它就是一個資料的集合(按照隊列順序排列資料)
作用：在項目開發中有很多資料需要循環渲染，我們都會把資料設定為數組的
狀态，友善渲染操作
2、數組的定義
(1)執行個體化定義
文法結構
var arr = new Array();
(2)字面量定義-----推薦使用
文法結構
var arr1 = [];
【注意】
1.一般我們都使用字面量建立數組
2.建立出來的數組，沒有任何資料，我們把這
種數組叫空數組。
3、請說出基本資料類型和引用資料類型在記憶體上的差別
所有的資料類型都是存儲在記憶體中的，但是為了更好的快速的操作資料
記憶體被分為了堆和棧兩個區域。
我們儲存基本資料類型的時候，他的變量，和具體的資料都是儲存在
棧
我們儲存引用(複合)資料類型的時候，他的變量是儲存在棧上，
同時棧上還儲存了一個路徑位址(指向儲存在堆中的實際資料)
實際資料是儲存在堆上的；
4、數組的實際操作
1.數組中資料的添加----(重點)
1.直接添加
在定義數組的時候就把值傳入,每個值用逗号隔開
【注意】執行個體化中如果隻給一個數字資料，那麼隻是
讓它建立一個有你設定資料那麼多個null資料的數組
2.索引(下标)添加
利用索引把值添加到具體的位置上去
文法結構
變量名[索引值] = 資料
【注意】
1.使用索引添加資料的時候，盡量按照順序添加
否則會出現練習的null資料
2.如果指定的索引已經有值的時候就會覆寫之前的值
3.push()方法添加
push()是數組的内置(系統)函數
文法結構
變量名.push(值)
【注意】push隻會按照目前的順序添加值
2.數組的通路----(重點)
1.具體值的通路
通過索引來進行通路
文法結構
變量名[索引值]
2.值的個數的擷取
變量名.length
3.修改資料----(重點)
通過指定的索引來修改
文法結構
變量名[索引值] = 你修改的資料
4.删除資料----(重點)
1.delete 變量名[索引值]
【注意】使用delete删除的知識資料，而不會删除索引，
不會改變length的長度擷取
2.清空數組
1.設定數組為空數組
arr1 = [];
2.設定數組的長度為0
arr1.length = 0;
5、使用循環周遊數組的值
(1)使用for----用途最廣的一個操作----(重點)
文法結構
for (var a = 0; a
console.log(arr[a]);
}
【注意】
1.循環多少次使用length擷取最大次數
2.注意将循環的初始條件設定為0開始，應對了數組的索引
我們就可以使用這個初始條件來做索引使用
(2)forEach
數組變量.forEach(function(value,index){
value : 數組元素
index : 索引
})
6、二維數組
概念：第一層數組中索引對應的值為一個獨立的數組
文法結構
var arr = [
[1,2,3],
["a","b","c"]
....
]
基本查找 console.log(arr[2][1]);
循環周遊(嵌套循環)
for (var a = 0; a < arr.length; a++) {
for (var b = 0; b < arr[a].length; b++) {
console.log(arr[a][b]);
}
}
7、數組的内置函數
1.concat()----拼接數組
文法結構：
數組變量1.concat(數組變量2,資料1，資料2...)
2.join()----數組轉字元串
不給值預設用逗号連接配接
3.pop()---删除數組
1.隻能從後面開始删除
2.和delete不同pop連帶索引一起删除
4.reverse---反序數組
var arr1 = arr.reverse();
數組的建立一般用簡寫形式，如[1,2,3,4,5]。數組的擷取和指派，都是使用下标的方式，特别注意一點：數組的下标是從0開始，而不是從1開始的。
其中，數組常用的屬性和方法如下表29-1和表29-2所示：
表29-1 數組的屬性
| 屬性 | 說明 |
| length | 擷取數組的長度 |
表29-2 數組的方法
| 方法 | 說明 |
| slice() | 截取數組部分 |
| unshift() | 添加數組元素，在開頭添加 |
| push() | 添加數組元素，在末尾添加 |
| shift() | 删除數組元素，在開頭删除 |
| pop() | 删除數組元素，在末尾删除 |
| sort() | 數組大小比較 |
| reverse() | 數組颠倒順序 |
| join() | 将數組元素連接配接成字元串 |
第7章 時間對象
1、時間對象常用方法
表30-5 用于擷取時間的getXxx()
| 方法 | 說明 |
| getFullYear() | 擷取年份，取值為4位數字 |
| getMonth() | 擷取月份，取值為0(一月)到11(十二月)之間的整數 |
| getDate() | 擷取日數，取值為1~31之間的整數 |
| getHours() | 擷取小時數，取值為0~23之間的整數 |
| getMinutes() | 擷取分鐘數，取值為0~59之間的整數 |
| getSeconds() | 擷取秒數，取值為0~59之間的整數 |
表30-6 用于設定時間的setXxx()
| 方法 | 說明 |
| setFullYear() | 可以設定年、月、日 |
| setMonth() | 可以設定月、日 |
| setDate() | 可以設定日 |
| setHours() | 可以設定時、分、秒、毫秒 |
| setMinutes() | 可以設定分、秒、毫秒 |
| setSeconds() | 可以設定秒、毫秒 |
getMonth()要擷取正确結果就要+1
2、實時顯示目前時間
<<body>
<div class="date">div>
<script>
// 方式二：
function showdate(){
var date=new Date();
var Y=date.getFullYear();
var M=(date.getMonth()+1);
var D=date.getDate();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var d=week[date.getDay()];
function convert(num){
return num<10? `0${num}`:num;
}
var str=`${Y}-${convert(M)}-${convert(D)} ${convert(h)}:${convert(m)}:${convert(s)} ${d}`
document.querySelector(".date").innerHTML=str;
}
showdate();
setInterval(showdate,1000)
script>
body>
第8章 數學對象
對于Math對象的屬性來說，我們隻需要掌握Math.PI就行。對于Math對象的方法來說，我們需要掌握表31-5中這些方法就行了。
表31-5 Math對象常用方法
| 方法 | 說明 |
| max(a,b,…,n) | 傳回一組數中的最大值 |
| min(a,b,…,n) | 傳回一組數中的最小值 |
| sin(x) | 正弦 |
| cos(x) | 餘弦 |
| tan(x) | 正切 |
| asin(x) | 反正弦 |
| acos(x) | 反餘弦 |
| atan(x) | 反正切 |
| atan2(x) | 反正切 |
| floor(x) | 向下取整 |
| ceil(x) | 向上取整 |
| random() | 生成随機數 |
第9章 DOM基礎
1、DOM是什麼？
對于DOM，我們總結出以下幾點：
(1)DOM操作，可以簡單了解成：元素操作；
(2)一個HTML文檔就是一棵節點樹，頁面中的每一個元素就是一個樹節點；
(3)每一個元素就是一個節點，而每一個節點就是一個對象。我們在操作元素時，就是把這個元素看成一個對象，然後用這個對象的屬性和方法進行操作；
2、節點類型
DOM節點共有12種類型，不過常見的隻有3種(其他不用管)：
(1)元素節點，nodeType值為1
(2)屬性節點，nodeType值為2
(3)文本節點；nodeType值為3
3、擷取元素
在JavaScript中，我們可以通過6種方式來擷取指定元素：
(1)getElementById()
(2)getElementsByTagName()
(3)getElementsByClassName()
(4)querySelector()和querySelectorAll()
(5)getElementsByName()
(6)document.title和document.body
雖然這些方法名又長又臭，不過根據英文意思來記憶就很輕松啦。此外對于這些擷取元素的方式，有幾點需要我們注意的：
(1)隻有getElementsByTagName()可以操作動态DOM，其他的都不行
(2)querySelector()表示選取滿足選擇條件的第1個元素，querySeletorAll()表示選取滿足條件的所有元素
(3)當你選取的隻有一個元素時，querySelector()和querySelectorAll()是等價的
(4)getElementsByName隻用于表單元素，準确來說一般用于單選按鈕和複選框
(5)getElementsByTagName()、getElementsByClassName()、getElementsByName()這3個方法傳回的都是一個類數組(elements嘛)，想要準确擷取其中一個元素，可以使用數組下标來實作
4、DOM操作
表32-2 DOM操作的方法
| 方法 | 說明 |
| createElement() | 建立元素節點 |
| createTextNode() | 建立文本節點 |
| appendChild | 插入元素，在父元素最後一個子元素後面插入 |
| insertBefore() | 插入元素，在父元素任意一個子元素前面插入 |
| removeChild() | 删除元素 |
| cloneNode() | 複制元素 |
| replaceChild() | 替換元素 |
在HTML中直接添加元素，這是靜态方法。而使用JavaScript添加元素，這是動态方法。這一章介紹的這些就是動态方法，也叫動态DOM操作。動态DOM操作在實際開發中用途是非常廣的。
第10章 DOM進階
1、HTML屬性操作
在JavaScript中，有2種操作HTML元素屬性的方式，一種是用“對象屬性”，另外一種是用“對象方法”。不管是用哪種方式，都涉及2種操作：①擷取HTML屬性值；②設定HTML屬性值。
(1)“對象屬性”方式
obj.attr //擷取值
obj.attr= "值" //設定值
(2)“對象方法”方式
obj.getAttribute("attr") //擷取值
obj.setAttribute("attr","值") //設定值
對于操作HTML屬性的2種方式，我們總結一下：
①“對象屬性方式”和“對象方法方式”，這兩種方式都不僅可以操作靜态HTML的屬性，也可以操作動态DOM的屬性；
②隻有“對象方法方式”才可以操作自定義屬性；
2、CSS屬性操作
(1)擷取值
getComputedStyle(obj).attr
(2)設定值
obj.style.attr= "值"; //使用style對象
obj.style.cssText= "值" //使用cssText屬性
3、DOM周遊
表33-2 DOM周遊的屬性
| 屬性 | 說明 |
| parentNode | 查找父元素 |
| childNodes、firstChild、lastChild | 查找子元素，包含文本節點 |
| children、firstElementChild、lastElementChild | 查找子元素，不包含文本節點 |
| previousSibling、nextSibling | 查找兄弟元素，包含文本節點 |
| previousElementSibling、nextElementSibling | 查找兄弟原始，不包含文本節點 |
4、innerHTML和innerText
在JavaScript中，我們可以使用innerHTML屬性很友善地擷取和設定一個元素的“内部元素”，也可以使用innerText屬性擷取和設定一個元素的“内部文本”。
第11章 事件基礎
1、擷取html和body标簽的另外一種方式
正常擷取html标簽
// 另外查詢方式
var html = document.documentElement.clientHeight
console.log(html);
var body = document.body.clientHeight
console.log(body);
2、認識事件的四要素
1.事件源----元素對象
2.事件類型----事件的觸發狀态(點選移入移出 及時輸入監聽。。)
3.事件執行函數---觸發事件以後執行的代碼
4.事件對象----類似于行程記錄儀或者飛機的黑匣子，記錄事件開始到結束
發生和使用的是所有屬性和方法
3、建立節點，添加節點到html結構中顯示
1.建立節點：
var el = document.createElement("标簽名")
// 添加屬性
el.id = "father"
// 添加文本内容
el.innerHTML = "我是js添加的文本"
2.添加節點到html結構中顯示
父級元素節點.appendChlid(添加的子級元素節點)
【注意】添加的子級元素節點隻會作為最後一個子級元素節點添加
4、元素節點的修改操作
父級元素節點.replaceChlid(用來替換的元素節點，被替換的元素節點)
5、删除元素節點的操作
父級元素節點.removeChild(指定要删除的節點)
6、文本的設定操作
擷取元素節點的文本資訊
元素節點.innerHTML
元素節點.innerText
設定元素節點的文本資訊
元素節點.innerHTML = 值
元素節點.innerText = 值
【注意】他們都是設定或擷取标簽之間的文本内容，不涉及
标簽的字元串，都可以使用，但是如果添加的文本中有标簽的
參與，必須使用innerHTML才能讓标簽轉義顯示。
事件操作是JavaScript的核心，不懂事件操作，JavaScript等于白學。在JavaScript中，事件調用方式有2種：①在script标簽中調用；②在元素中調用。
7、常用事件
表34.2 滑鼠事件
| 事件 | 說明 |
| onclick | 滑鼠單擊 |
| onmouseover | 滑鼠移入 |
| onmouseout | 滑鼠移出 |
| mouseenter | 滑鼠懸停 |
| mouseleave | 滑鼠離開 |
| onmousedown | 滑鼠按下 |
| onmouseup | 滑鼠松開 |
| onmousemove | 滑鼠移動 |
表34.3 鍵盤事件
| 事件 | 說明 |
| onkeydown | 鍵盤按下 |
| onkeyup | 鍵盤松開 |
表34.4 表單事件
| 事件 | 說明 |
| onfocus | 擷取焦點 |
| onblur | 失去焦點 |
| onselect | 選擇文本 |
| onchange | 選擇某一項觸發(單選框、複選框、下拉菜單) |
表34.5 編輯事件
| 事件 | 說明 |
| oncopy | 用于防止文本被複制 |
| onselectstart | 用于防止文本被選取 |
| oncontextmenu | 用于禁止滑鼠右鍵 |
表11.6 頁面事件
| 事件 | 說明 |
| window.onload | 頁面加載完畢觸發 |
| window.onunload | 離開頁面觸發 |
上面列出來的都是JavaScript中最常用的事件，對于不常用的，我們已經舍棄掉了。學完這些，我們可以自己嘗試開發一下各種效果了，如圖檔輪播、Tab頁籤、回頂部等。
此外，這些事件大多數都是針對PC端的，像移動端還有一些特殊的事件如touchstart、touchend、touchemove等。
第12章 事件進階
1、事件監聽器
在JavaScript中，想要給元素添加一個事件，其實我們有2種方式：①事件處理器；②事件監聽器。
obj.addEventListener("click",function () {
……
});
obj.οnclick= function () {
……
};
如果想要為一個元素添加多個相同僚件，必須要用事件監聽器，而不能用事件處理器。
(1)綁定事件
文法：
obj.addEventListener(type , fn , false)
(2)解綁事件
文法：
obj.removeEventListener(type , fn , false);
說明：
removeEventListener()隻能解除“事件監聽器”添加的事件，如果要解除“事件處理器”添加的事件，需要用“obj.事件名 = null;”方法來實作。
2、event對象
當一個事件發生的時候，這個事件有關的詳細資訊都會臨時儲存到一個指定的地方，這個地方就是event對象。
表35-3 event對象的屬性
| 屬性 | 說明 |
| type | 事件類型 |
| keyCode | 鍵碼值 |
| shiftKey | 是否按下shift鍵 |
| ctrlKey | 是否按下Ctrl鍵 |
| altKey | 是否按下Alt鍵 |
3、this
在事件操作中，可以這樣了解：哪個DOM對象(元素節點)調用了this所在的函數，那麼this指向的就是哪個DOM對象。
第13章 window對象
1、window圖解
2、js的三大組成部分
1.ECMAScript(es)-----基本文法
2.BOM-----浏覽器對象模型----使用js操作浏覽器上的功能
3.DOM-----文檔對象模型------使用js操作标簽屬性 css
【注意】實際上js隻有兩個大的内容es和BOM，而DOM
是屬于BOM下的一個子對象，但是因為他獨立操作的是文檔内容，我們
一般把它單獨也作為一個組成部分而DOM的頂層對象是document
一個視窗就是一個window對象，這個視窗裡面的HTML文檔就是一個document對象，document對象是window對象的子對象。
表36-5 window對象下的重要子對象
| 子對象 | 說明 |
| document | 文檔對象，用于操作頁面元素 |
| location | 位址對象，用于操作URL位址 |
| navigator | 浏覽器對象，用于擷取浏覽器版本資訊 |
3、彈窗三劍客
alert() 顯示帶有一段消息和一個确認按鈕的警告框。
confirm() 顯示帶有一段消息以及确認按鈕和取消按鈕的對話框。
// 消息确認彈窗
var info = confirm("你看見我了嘛？");
【注意】點選确定擷取的info值為true，相反擷取的是false
console.log(info);
prompt() 顯示可提示使用者輸入的對話框。
表36-6 3種對話框
| 方法 | 說明 |
| alert() | 僅提示文字，沒有傳回值 |
| confirm() | 具有提示文字，傳回“布爾值”(true或false) |
| prompt() | 具有提示文字，傳回“字元串” |
4、定時器
在JavaScript中，我們可以使用setTimeout()方法來“一次性”地調用函數，并且可以使用clearTimeout()來取消執行setTimeout()。
我們也可以使用setInterval()方法來“重複性”地調用函數，并且可以使用clearInterva()來取消執行setInterval()。
1.間歇計時函數
var t = setInterval()
文法結構：
setInterval(執行匿名函數，設定間歇時間(以毫秒為機關))
2.延時計時函數
setTimeout()
文法結構：
setTimeout(執行匿名函數,設定倒計時時間(以毫秒為機關))
3.停止間歇及時函數
clearInterval(間隙計時函數變量(t))
5、location對象
表36-7 location對象的屬性
| 屬性 | 說明 |
| href | 目前頁面位址 |
| search | 目前頁面位址“？”後面的内容 |
| hash | 目前頁面位址“#”後面的内容 |
location-----js中的a标簽---(重點)
文法結構：
location.href = 設定跳轉路徑
6、history對象
1.history-----操作浏覽器的曆史通路記錄----(重點)
1.back()---傳回上一頁
2.forward()---前進下一頁
3.go(index)---傳回或前進index頁(看正負值)
7、navigator對象
在JavaScript中，我們可以使用window對象下的子對象navigator來擷取浏覽器的類型。
8 、阻止事件
(1)return false ---- 阻止預設事件行為
解釋：使用這個傳回可以暫時清除掉标簽自帶的事件。
(2)e.preventaefault----阻止浏覽器預設行為
(3)e.stoppropagation---阻止事件傳播、阻止事件冒泡。
第14章 document對象
document對象其實是window對象下的一個子對象來的，它操作的是HTML文檔裡所有的内容。document對象常用的屬性和方法如下：
表37-3 document對象常用的屬性
| 屬性 | 說明 |
| document.title | 擷取文檔的title |
| document.body | 擷取文檔的body |
| document.URL | 目前文檔的URL |
| document.referrer | 傳回使浏覽者到達目前文檔的URL |
表37-4 document對象常用的方法
| 方法 | 說明 |
| document.getElementById() | 通過id擷取元素 |
| document.getElementsByTagName() | 通過标簽名擷取元素 |
| document.getElementsByClassName() | 通過class擷取元素 |
| document.getElementsByName() | 通過name擷取元素 |
| document.querySelector() | 通過選擇器擷取元素，隻擷取第1個 |
| document.querySelectorAll() | 通過選擇器擷取元素，擷取所有 |
| document.createElement() | 建立元素節點 |
| document.createTextNode() | 建立文本節點 |
| document.write() | 輸出内容 |
| document.writeln() | 輸出内容并換行 |