長篇總結之JavaScript，鞏固前端基礎

魔王哪吒發表於2020-03-01

大家好，我是魔王哪吒，話不多說，今天帶來的是一篇《長篇總結之JavaScript，鞏固前端基礎》文章，歡迎大家喜歡。
複製程式碼

前言

什麼是JavaScript

JavaScript是一種基於物件和事件驅動的客戶端指令碼語言，最初是為了檢驗HTML表單輸入的正確性，起源於Netscape公司的LiveScript語言。

瞭解JavaScript的發展歷史

liveScript ==> javaScript => ECMAscript

關係是：liveScript是javaScript的一個曾用名，ECMAscript: 定義了javascript的語法規範，描述了語言的基本語法和資料型別。

瞭解JavaScript的組成

JavaScript是由ECMAScript語言，Browser Objects(DOM,BOM)組成。

語法：

學習js的註解和分號

//單行註解

/**/多行註解

語句結束使用分號，如果省略，則由接下確定語句的結尾。

學習JavaScript的語法

ECMAScript中的一切是區分大小寫的，如變數，函式名，操作符。

學習識別符號

什麼是識別符號，變數，函式，屬性的名稱，或者是函式的引數。

識別符號的命名規則

由字母，數字，下劃線或者是美元符號組成。
不能以數字開頭。
不能使用關鍵字，保留字等作為識別符號。

學習什麼是變數

什麼是變數，ECMAScript的變數是鬆散型別的。鬆散型別是指可以用來儲存任何型別的資料。

每個變數僅僅只是用於儲存值的佔位符而已。

學習變數的宣告和賦值

變數的宣告：變數的宣告使用var操作符，語法：var變數名。

變數的賦值：

宣告的同時賦值，var 變數名=值
先宣告後賦值，變數名 = 值

一次宣告多個變數，用逗號隔開。

注意，省略var宣告的變數是全域性變數，不推薦省略var操作符來定義全域性變數。

掌握JavaScript的資料型別

ECMAScript中分：簡單資料型別和複雜資料型別。

簡單資料型別也稱為基本資料型別，注意，在ES6中新增了symbol資料型別。

基本資料型別5種：

undefined, null, boolean, number, string

複雜資料型別分：object

學習typeof操作符

typeof是用來檢測變數的型別。

語法結構，typeof 變數或者是typeof(變數)

返回值，是string型別，或者是number,boolean,object,function,undefined等。

學習Undefined

undefined型別只有一個值，即是特殊的undefined。

說明：一般而言，不存在需要顯式地把一個變數設定為undefined值的情況。

學習null

null值表示一個空物件指標；如果定義的變數準備在將來用於儲存物件，那麼最好將變數初始化為null而不是其他值。

undefined值是派生自null值的，所以undefined==null的返回結果為true。

學習`number`知識點

number:表示整數和浮點數。

NaN是（not a number）是一個特殊的數值，表示非數字。

任何涉及NaN的操作，都會返回NaN。

NaN與任何值都不相等，包括NaN本身。

學習`isNaN`知識點

isNaN(n)表示檢測n是否為“非數值”。返回結果為boolean。

說明:isNaN()對接收的數值，先嚐試轉換為數值，再檢測是否為非數值。

數值轉換

Number()
parseInt()
parseFloat()

Number()可以用於任何資料型別，parseInt()和parseFloat()用於把字串轉成數值。

parseInt()是會忽略字串前面的空格，直至找到第一個非空格字元。

parseInt()轉換空字串返回NaN。

parseInt()這個函式提供第二個引數，轉換時使用的基數。

parseFloat()從第一個字元開始解析每個字元，直至遇見一個無效的浮點數字符為止。

除了第一個小數點有效外，parseFloat()與parseInt()的第二個區別在於它始終都會忽略前導的零。

學習Striing

String型別用於表示由零或多個16位Unicode字元組成的字元序列。

學習字串轉換

String()
toString()

str.toString()將str轉換為字串。使用String()函式，能夠將任何型別的值轉換為字串。

學習Boolean

用於表示真假的型別，即是true表示真，false表示假。

學習型別轉換

除了0之外的所有數字，轉換為布林型都為true。

除了“ ”之外的所有字元，轉換為布林型都為true。

null和undefined轉換為布林型為false。

算數操作符

什麼是表示式
JavaScript操作符的分類
學習算數操作符

表示式是將同型別的資料，用運算子號按一定的規則連線起來的，有意義的式子。

操作符的分類

算數操作符
邏輯操作符
賦值操作符
比較操作符
三元操作符

遞增

++a與a++都對a進行遞增的操作。

區別：

++a先返回遞增之後的a的值，a++先返回a的原值，再返回遞增之後的值。

遞減同理。

賦值操作符
比較操作符
三元操作符

三元操作符

語法：條件？執行程式碼1：執行程式碼2

邏輯操作符

邏輯與`&&`

如果第一個運算元隱式型別轉換後為true，那麼返回第一個運算元。

如果第一個運算元隱式型別轉換後為false，那麼返回第二個運算元。

如果，只有有一個運算元為null,NaN,undefined，其中一個，就會返回null,NaN,undefined。

邏輯或與邏輯非

||或,只要有一個條件成立，返回true

!非，無論運算元是什麼資料型別，邏輯非都會返回一個布林值。

流程控制語句

學習掌握if，prompt()，alert()

alert()，彈出警告對話方塊

if語句

if(condition){
    statement1;
}else{
    statement2;
}
複製程式碼

語法：prompt()

彈出輸入框，有確定和取消。

var age = prompt("請輸入您的年齡")
複製程式碼

NaN和任何內容都不相等，包括它本身

document.wirte()，星期的獲取方法，掌握switch

語法：new Date().getDay()

獲取星期，返回值，number(0-6)

var week = new Date().getDay();
console.log(week);
複製程式碼

多條件可以使用switch語句

語法：

switch(expression) {
    case value: statement
    break;
    case value: statement
    break;
    ...
    defalut: statement
}
複製程式碼

向瀏覽器輸出內容：document.write("內容")

JavaScript中的迴圈語句

for
for-in
while
do...while

語法：

while(條件){
    執行的程式碼;
}
複製程式碼

語法：

do{
    需要執行的程式碼
}while(條件)
複製程式碼

迴圈至少要被執行一次。

break語句和continue語句

break立即退出迴圈

continue結束本次迴圈，繼續開始下一次迴圈

JavaScript中的函式

作用
定義
呼叫

函式的作用就是通過函式可以封裝任意多條語句，可以在任何地方，任何時候呼叫執行。

函式是如何定義的，使用function宣告。

函式名屬於識別符號。

<script>
// 宣告一個函式
function myFun(){
    alert("我是一個函式");
}
// 函式的呼叫
myFun();
</script>
複製程式碼

函式的返回值

宣告一個帶有引數的函式：

function add(num1,num2){
    var sum = sum1+sum2;
    return sum;
}

console.log(add(2,3));
複製程式碼

函式會在執行完return語句之後停止並立即退出，return語句也可以不帶有任何返回值，用於提前停止函式執行又不需要返回值的情況。

掌握arguments

在ECMAScript中的引數在內部用一個陣列來表示，在函式體內通過arguments物件來訪問這個陣列引數。

內建物件

物件：字串，函式，陣列

內建物件就是瀏覽器自己封裝好的物件。

Array
String
Math
Date

陣列是用來儲存一組資料的，如何建立陣列，陣列元素的讀和寫，陣列的length屬性。

建立陣列：使用Array建構函式，new Array()，使用字面量表示法。

陣列的棧方法

push()，把引數新增到陣列的最後。
unshift()，把引數新增到陣列的前面。
pop()，刪除最後一個元素，返回被刪除的那個元素。
shift()刪除第一個元素，返回被刪除的那個元素。

join方法，語法：arrayObject.join(separator)，功能是用於把陣列中的所有元素放入一個字串，返回的值是字串。

reverse()方法，語法：arrayObject.reverse()，功能是用於顛倒陣列中元素的順序，返回值為陣列。

sort()方法，語法：arrayObject.sort(sortby)，功能是用於對陣列的元素進行排序，返回值為陣列。-按照字串比較的。

程式碼：

arr.sort(function(a,b){return b-a});
複製程式碼

concat()方法，是用於連線兩個或者多個陣列，返回值為陣列。

arr3 = arr1.concat(arr2);
複製程式碼

slice()擷取，從已有的陣列中返回選定的元素。

語法：arrayObject.slice(start,end)

`splice()`方法-刪除-插入-替換

刪除，語法：arrayObject.splice(index,count)，功能：刪除從index處開始的零個或多個元素。返回值為含有被刪除的元素的陣列。

如果count為0，不刪除任何值，如果count不設定，刪除從index開始的所有值。

插入，語法：arrayObject.splice(index,0,item1,...itemx)，功能為在指定位置插入值。

替換：語法：arrayObject.splice(index,count,itemq,...itemx)，功能，在指定位置插入值，同時刪除任意數量的項。

index為起始位置，count為要刪除的項數，item1...itemx為要插入的項。

位置-indexOf和lastIndexOf

indexOf()，語法，arrayObject.indexOf(searchvalue,startIndex)，功能，從陣列的開頭（位置為0）開始向後查詢。

返回值為number，沒有找到的話就是返回-1，查詢到返回在陣列中的位置。

lastIndexOf()，語法：arrayObject.lastIndexOf(searchvalue,startIndex)，功能是從陣列的末尾開始向前查詢。

String字串的方法：

charAt()
charCodeAt()
indexOf()
lastIndexOf()

charAt()與charCodeAt()的區別

語法：stringObject.charAt(index)，功能返回stringObject中的index位置的字元。

語法：stringObject.charCodeAt(index)，功能返回stringObject中的index位置字元的字元編碼。

字串的擷取

字串物件的擷取：

slice()
substring()
substr()

陣列物件也有slice()的語法

對於字串的擷取：

語法：stringObject.slice(start,end)

功能，擷取子字串。

引數說明：

start為指定字串的開始位置。
end為表示字串到哪裡結束，end本身不在擷取範圍之內。

`substring()`

substring()語法，主要區別是這個當引數為負數時，自動轉換為0。

substring()會將小的數當作開始位置，把較大的數當作結束位置。

substr()，語法：stringObject.substr(start, len)

功能是擷取字串。

start為指定字串開始的位置，len為表示擷取的字元總數，省略時擷取到字串的末尾。

當start為負數時，會將傳入的負值與字串的長度相加。而len為負值時，返回字串。

程式碼：

字串長度為11

str.substring(6,9);
str.substr(6,3);
str.substr(-5,4); // (6,4)
str.substr(3,-4);
複製程式碼

獲取副檔名

var url="http://xxx/index.txt";
function getFileFormat(url) {
    var pos = url.lastIndexOf(".");
    return url.substr(pos); // .txt
}
var formatName = getFileFormat(url);
複製程式碼

`split()`

語法：stringObject.split(separator)。

功能，把一個字串分割成字串陣列。返回值為array。

separator為分隔符。

`replace()`替換

語法：stringObject.replace(regexp/substr,replacement)

功能：在字串中用一些字元替換另一些字元，或替換一個與正規表示式匹配的子串。返回值為String。

toUpperCase()和toLowerCase()

語法：stringObject.toUpperCase()，把字串轉換為大寫。

語法：stringObject.toLowerCase()，把字串轉換為小寫。

str.charAt(6).toUpperCase();
複製程式碼

將每一個單詞的首字母轉換為大寫，連線剩餘的字元

var newStr = word.charAt(0).toUpperCase()+word.substr(1);
複製程式碼

數學物件

min()
max()
ceil()，向上取整。
floor()，向下取整。
round()
abs()

取整，ceil()，floor()

Math.ceil()語法：Math.ceil(num)，功能為向上取整，即返回大於num的最小整數。

Math.floor(num)，向下取整，返回num的整數部分。

Math.round()語法，功能是將數值四捨五入為最接近的整數。

絕對值`Math.abs()`

功能是返回num的絕對值，語法：Math.abs(num)，返回值為Number。

`random()`方法-隨機數

封裝一個求n到m之間的隨機整數的函式。

random=Math.floor(Math.random()*(m-n+1)+n);

Math.random()語法，是返回大於等於0小於1的隨機數。

date物件

new Date()為建立一個日期時間物件。不傳參，返回當前的日期時間物件。

常用的一些方法

getFullYear()返回4位數的年份。
getMonth()返回日期中的月份，返回值為0-11。
getDate()返回月份中的天數。
getDay()返回星期，返回值為0-6。
getHours()返回小時。
getMinutes()返回分。
getSeconds()返回秒。
getTime()返回表示日期的毫秒數。

程式碼：

var today = new Date(),
year = today.getFullYear(),
month = today.getMonth()+1,
date = today.getDate(),
week = today.getDay(), // 0-6
hours = today.getHours(),
minutes = today.getMinutes(),
seconds = today.getSeconds(),
複製程式碼

設定方法

setFullYear(year)設定4位數。
setMonth(mon)設定日期中的月份。
setDate()設定日期。
setHours()設定小時。
setMinutes()設定分。
setSeconds()設定秒。
setTime()以毫秒數設定日期，會改變整個日期。

錯誤處理

Chrome DevTools的基本使用

語法錯誤：不符合js語法的錯誤。

執行時錯誤，程式碼沒有語法錯誤，但是在執行時發生錯誤。

如何區分語法錯誤與執行時錯誤

語法錯誤是不可能執行成功的。
執行時錯誤是有可能執行成功的。

邏輯錯誤

什麼是邏輯錯誤？就是指計算結果很想象的不一樣。

程式碼：

function foo() {
    try {
        throw new Error();
    }catch(e){
        return 1;
    }finally{
        return 2;
    }
}
複製程式碼

DOM節點操作

DOM操作，新增節點，刪除節點，修改節點，查詢節點。

DOM document(文件) object(物件) model(模型)

建立節點

document.write()建立節點

create建立方法：

document.createElement()

document.createTextNode()

document.createDocumentFragment()

document.createComment()

程式碼create建立節點：

myReady(function(){
    var ul = document.getElementById("myList");
    var li = document.createElement("li");
    ul.appendChild(li);
});

<ul id="myList"></ul>
複製程式碼

建立節點的高效方法：

outerText，innerText

innerHTML,outerHTML

節點遍歷

documentElement屬性可返回文件的根節點

tagName屬性返回元素的標籤名

類陣列物件NodeList

類陣列物件HTMLCollection

Ele.getElementsByTagName()
document.scripts
document.links
document.images
document.forms
tr.cells
select.options

示例：

myReady(function(){
    var scripts = document.scripts;
    var links = document.links;
    var cells = document.getElementById("tr").cells;
    var imgs = document.images;
    var forms = document.forms;
    var options = document.getElementById("select").options;
    var ps = document.getElementsByTagName("p");
}
複製程式碼

類陣列物件NamedNodeMap

Ele.attributes

類陣列物件的動態性

三個集合NodeList，HTMLCollection，NamedNodeMap都是動態的。

節點查詢

getElementById()
getElementByName()
getElementByTagName()
getElementByClassName()
querySelector()
querySelectorAll()

獲取元素的方式

document.getElementById()

根據ID獲取元素
返回一個元素
對ID區分大小寫(IE8和IE8以上)

document.getElementsByClassName()

根據class名獲取元素
返回是一個偽陣列
IE8和IE8以下不支援

document.getElementsByTagName()

根據標籤名獲取元素
返回一個偽陣列
相容很好

document.getElementsByName()

根據name名獲取，一般應用於表單
返回偽陣列
只針對對name屬性有效的標籤生效。

偽陣列

必須是物件
必須有length屬性
存放內容必須以索引+內容
有陣列的一些基本特性，但是不能使用陣列的方法。

獲取元素屬性

ele.setAttribute("屬性名","屬性值")
ele.getAttribute("屬性名")
ele.removeAttribute("屬性名")
ele.dataset.prop="值"
複製程式碼

dom.style.prop

可讀寫行間樣式
寫入的值必須是字串格式

window.getComputeStyle(ele,null)

null的地方可以存放偽類
返回的都是絕對值
是隻讀的，不可修改

ele.currentStyle

是隻讀的，不可修改
返回的是經過轉換的絕對值
IE獨有的屬性

ele.id ele.title

獲取樣式：ele.style.prop--效率低，維護不方便
ele.className---維護方便

獲取元素的內容

innerHTML:

在賦值的時候：標籤會被解析成標籤，頁面中不會輸出
在提取內容時：標籤會一併被提取

innerText:

在賦值的時候：標籤會被解析成文字，在頁面中輸出
在提取內容時：標籤不會並被提取，只提取文字內容

value:

使用於表單

offset系列屬性

滾動條滾動的距離：

window.pageYOffset(ie9以下不支援)
document.body.scrollTop
document.documentElement.scrollTop;
複製程式碼

可視視窗尺寸：

window.innerWidth(IE8以下不相容)
document.documentElement.clientWidth
document.body.clientWidth(怪異模式)

判斷怪異模型的方法
    document.compatMode
複製程式碼

滾動到指定位置

scroll(x,y)   scrollTo(x,y)  scrollBy(x,y);  
複製程式碼

節點查詢`querySelector()`和`querySelectorAll()`

querySelector()返回指定css選擇器的一個元素

querySelectorAll()返回指定css選擇器的一組元素

操作節點

appendChild()
insertBefore()
replaceChild()
cloneNode()
normalize()
splitText()

appendChild()為指定元素節點的最後一個子節點之後新增節點，該方法返回新的子節點。

insertBefore()在指定的已有子節點之前插入新的子節點。

replaceChild()該方法用於新節點替換某個子節點。返回被替換的節點。

cloneNode()建立節點的拷貝，並返回該副本。

var myUrl = document.getElementById("myUrl");
var newNode = myUrl.cloneNode(true); // 深度，有其子節點，預設為false，只有父節點
複製程式碼

normalize()能夠合併相鄰的Text節點。

程式碼：

myReady(function(){
    var div = document.createElement("div");
    var textNode = document.createTextNode("dom");
    div.appendChild(textNode);
    
    var textNode2 = document.createTextNode("web");
    div.appendChild(textNode2);
    document.body.appendChild(div);
    
    console.log(div.childNodes.length);
    div.normalize();
    console.log(div.childNode);
    console.log(div.firstChild.nodeValue);
}
複製程式碼

splitText()按照指定的位置把文字節點分割為兩個節點。

刪除節點方法

removeChild()
removeNode()
innerHTML
deleteContents()
textContent

removeChild()刪除某個節點中指定的子節點。

removeChild()必須有引數

myReady(function(){
    var myUrl = document.getElementById("myUrl");
    console.log(myUrl.childNodes.length);
    
    var secondChild = myUrl.removeChild(myUrl.childNode[1]);
    console.log(secondChild);
    console.log(myUrl.childNodes.length);
}
複製程式碼

removeNode()

ie的私有實現
將目標節點從文件刪除，返回目標節點
引數是布林值，預設值為false

removeChild()和innerHTML比較

HTML DOM removeChild() 方法

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
複製程式碼

移除前:

Coffee
Tea
Milk
複製程式碼

移除後:

Tea
Milk
複製程式碼

瀏覽器支援 Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要瀏覽器都支援 removeChild 方法

語法node.removeChild(node)

建立節點，查詢節點，操作節點，刪除節點

DOM屬性

示例：

<div
id="div0"
class="active"
style=""
url=""
xxx=""></div>
複製程式碼

屬性分：property固有屬性和attribute自定義屬性

getNamedItem()
removeNamedItem()
setNamedItem()

示例：

myReady(function(){
    var inputs = document.querySelectorAll("input”);
    inputs[0].checked = true;
}
<input type="checkbox">1
<input type="checkbox" checked="checked">2
<input type="checkbox" checked>3
複製程式碼

性別:
男女

示例：

性別:<br/>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
複製程式碼

你去過的城市：

示例：

你去過的城市：<br/>
<select name="city" id="city">
 <option value="北京">北京</option>
 <option value="上海">上海</option>
</select>
複製程式碼

你去過的城市：

示例：

你去過的城市：<br/>
<select name="city" id="city" multiple="multiple">
 <option value="北京">北京</option>
 <option value="上海" selected>上海</option>
 <option value="紐約">紐約</option>
</select>
複製程式碼

常見的字串屬性

前端

示例：

<p style="text-align:center" title="前端">前端</p>
複製程式碼

事件

什麼是事件？是文件或瀏覽器視窗發生的一些互動瞬間。

事件方法：

onload頁面載入時觸發
onclick滑鼠點選時觸發
onmouseover滑鼠滑過時觸發
onmouseout滑鼠離開時觸發
onfoucs獲取焦點時觸發
onblur失去焦點時觸發
onchange域的內容改變時發生

HTML事件

示例：

<input type="button" value="彈出" onclick='alert("我是按鈕")'>
複製程式碼

繫結事件

繫結事件的方法：

1.onclick:

一個元素上只能繫結一個
this指向dom元素本身

2.obj.addEventListener(type,fn,false);

IE9以下不相容
可以為一個元素繫結多個事件
this指向dom元素本身

3.obj.attchEvent("on"+type,fn);

IE獨有
可以為一個元素繫結多個事件
this指向window

onsubmit表單中的確認按鈕被點選時發生
onmousedown滑鼠按鈕在元素上按下時觸發
onmousemove在滑鼠指標移動時發生
onmouseup在元素上鬆開滑鼠按鈕時觸發
onresize當調整瀏覽器視窗的大小時觸發
onscroll拖動滾動條滾動時觸發

鍵盤事件與`keyCode`屬性

onkeydown在使用者按下一個鍵盤按鍵時發生

onkeypress在按下鍵盤按鍵時發生

onkeyup在鍵盤按鍵被鬆開時發生

keyCode返回onkeypress,onkeydown或onkeyup事件觸發的鍵的值的字元程式碼，或鍵的程式碼。

當使用者與web頁面進行某些互動時，直譯器就會建立響應的event物件以描述事件資訊。

事件控制程式碼，稱事件處理函式，事件監聽函式，指用於響應某個事件而呼叫的函式。

事件的解綁

移除事件，removeEventListener()

語法：element.removeEventListener(event,function,useCapture)，功能，移除addEventListener()方法新增的事件控制程式碼。

示例：

var btn2 = document.getElementById("btn2");
btn2.addEventListener('click',function(){
    alert('btn2');
},false);

// 事件解綁
btn2.removeEventListener('click',function(){
    alert('btn2');
});
複製程式碼

事件解綁成功的主要原因在儲存addxx和removexx裡面的引數相同。

ie事件流（ie事件處理程式）

新增事件：attachEvent()

語法：element.attachEvent(event,function)

功能是用於向指定元素新增事件控制程式碼

移除事件

detachEvent()

語法：element.detachEvent(event,function)

功能是移除attachEvent()方法新增的事件控制程式碼。

事件委託和事件冒泡

事件週期：事件捕獲（事件物件沿dom樹向下傳播），目標觸發(執行事件監聽函式)，事件冒泡（事件沿著dom樹向上傳播）。

事件冒泡和事件捕獲

示例：

// 事件冒泡
document.getElementById('parent').addEventListener("click",function(e){
  alert("parent事件被觸發"+this.id);  
})

document.getElementById("child").addEventListener("click",ffunction(e){
  alert("child事件被觸發"+this.id);  
})
複製程式碼

事件委託的原理就是事件冒泡

event物件屬性與方法

type事件的型別，srcElement/target事件源，就是發生事件的元素。

阻止預設行為

var link = document.getElementById("mylink");
link.onClick = function(event){
    event.preventDefault();
}
複製程式碼

取消事件捕獲或者冒泡

var btn = document.getElementById("myBtn");
btn.onclick=function(event){
    alert("Click");
    event.stopPropagation();
}
document.body.onclick = function(event){
    alert("Body clicked");
}
複製程式碼

target點選誰誰就是target，事件源

currentTarget事件繫結在誰身上，就指向誰

clientY就是指瀏覽器頂部底邊到滑鼠的位置

pageY就是指瀏覽器頂部底邊到滑鼠的位置

screenY就是指螢幕頂部到滑鼠位置

event物件中的屬性和方法

srcElement/target事件源，就是發生事件的元素。
cancelBubble布林屬性，設定為true時，將停止事件進一步起泡到包容層次的元素。
returnValue布林屬性，設定為false時可以組織瀏覽器執行預設的事件動作。

event物件跨瀏覽器相容

示例：

var EventUtil = {
    addHandler: function(element, type, handler) {
        
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        },
        removeHandler: function(element,type,handler){
            
        },
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }
}
複製程式碼

Event addEventListener attacEvent

示例：

var EventUtil = {
    addHandler: function(element,type,handler){
        
    },
    removeHandler: function(element,type,handler){
        
    }
}
複製程式碼

什麼是bom

Bom瀏覽器物件模型。

Window 物件

Window 物件表示瀏覽器中開啟的視窗。

如果文件包含框架（<frame> 或 <iframe> 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。

全域性變數

window宣告和關鍵字宣告

window.變數名=值和var 變數名=值

window物件的方法

語法：window.alert("content")

語法：window.confirm("message")

Window	物件屬性
屬性	描述
closed	返回視窗是否已被關閉。
defaultStatus	設定或返回視窗狀態列中的預設文字。
document	對 Document 物件的只讀引用
frames	返回視窗中所有命名的框架。該集合是 Window 物件的陣列，每個 Window 物件在視窗中含有一個框架。
history	對 History 物件的只讀引用。
innerHeight	返回視窗的文件顯示區的高度。
innerWidth	返回視窗的文件顯示區的寬度。
localStorage	在瀏覽器中儲存 key/value 對。沒有過期時間。
length	設定或返回視窗中的框架數量。
location	用於視窗或框架的 Location 物件。請參閱 Location 物件。
name	設定或返回視窗的名稱。
navigator	對 Navigator 物件的只讀引用

定時器

超時呼叫，間歇呼叫

語法：setTimeout(code,millisec)

語法：setInterval(code,millisec)

示例：

var intervalId = setInterval(function(){
    console.log("web");
},1000);
setTimeout(function(){
    clearInterval(intervalId);
},10000);
複製程式碼

函式可以訪問由函式內部定義的變數，如：

例項

function myFunction() {
    var a = 1;
    return a * a;
}
複製程式碼

函式也可以訪問函式外部定義的變數，如：

例項

var a = 1;
function myFunction() {
    return a * a;
}
複製程式碼

location物件

location物件提供了與當前視窗中載入的文件有關的資訊，還提供了一些導航的功能，它既是window物件的屬性，也是document物件的屬性。

location.href返回當前載入頁面的完整的url。

location.host返回伺服器名稱和埠號。

location.hostname返回不帶埠號的伺服器名稱。

location.pathname返回url中的目錄和檔名。

location.port返回url中指定的埠號，如果沒有，返回空字串。

location.protocol返回頁面使用的協議。

location.search返回url的查詢字串。

改變瀏覽器位置的方法：

location.href屬性。

location物件其他屬性也是可以改變url

location.hash和location.search

location.replace()是重新定向url

location.reload()重新載入當前顯示的頁面

history物件儲存了使用者在瀏覽器中訪問頁面的歷史記錄

history.back()回到歷史記錄的上一步

示例：

var btn = document.getElementById("btn");
// 點選btn按鈕時回到歷史記錄的上一步
btn.onclick = function(){
    //history.back();
    history.go(-1);
}
複製程式碼

history.forward()歷史記錄的下一步

history.go(-n)回到歷史記錄的前n步

history.go(n)回到歷史記錄的後n步

screen物件屬性

screen.availWidth返回可用的螢幕寬度

screen.availHeight返回可用的螢幕高度

獲取視窗文件顯示區的高度和寬度，可以使用innerHeight和innerWidth

navigator物件

示例：

// 檢測瀏覽器型別
function getBrowser(){
    // 獲取userAgent屬性
    var explorer = navigator.userAgent.toLowerCase(),browser;
    if(explorer.indexOf("mise")>-1){
        browser = "IE";
    }else if(explorer.indexOf("chrome")>-1){
        browser = "chrome";
    }else if(explorer.indexOf("opera")>-1){
        browser = "opera";
    }else if(explorer.indexOf("safari")>-1){
        browser = "safari"
    }
    return browser;
}
複製程式碼

閉包

什麼是執行上下文環境？

console.log(a);  // undefined
console.log(this)； //window
b(); // b() is not a function 
c(); // "c"
var a = "a";
var b = function () {
  var b = "b"
  console.log(b);
}  

function c () {
  var c = "c"
  console.log(c);
}
複製程式碼

上下文棧就是一個儲存執行上下文的棧，棧中只有一個上下文是處於活動狀態的，執行全域性程式碼時就會有一個全域性上下文被壓入棧，呼叫一個函式時就會產生一個函式的上下文環境，然後將其壓入棧

js的作用域 - 詞法作用域

js的作用域是詞法作用域(靜態作用域)，實際上大部分的語言作用域都是詞法作用域，與詞法作用域相對的是動態作用域

什麼是閉包

閉包是指有權訪問另一個函式作用域中變數的函式。

閉包的使用

作用域鏈指向的變數物件

閉包的形成及優缺點

形成閉包即要把一個函式當成值傳遞，該函式還引用另一個函式的作用域鏈使得被引用的函式不能被回收

優點：

閉包裡的變數不會汙染全域性，因為變數被封在閉包裡
所有變數都在閉包裡保證了隱私性和私有性

後記

掃碼關注公眾號，訂閱更多精彩內容。

[鞏固基礎]總結Python基礎知識的14張思維導圖
2018-06-06
Python
PHP 函式基礎鞏固
2020-01-13
PHP函式
基礎鞏固 --多執行緒
2020-10-10
執行緒
前端知識點總結——JavaScript基礎
2019-06-20
前端JavaScript
《怎麼鞏固JAVA基礎語法基礎（上）》
2020-07-14
Java
鞏固好基礎，才能學好Linux
2021-11-04
Linux
JavaScript基礎總結
2019-01-04
JavaScript
前端之路---入坑篇之JavaScript基礎筆記
2020-03-31
前端JavaScript筆記
MySQL 細緻總結之基礎篇
2019-03-25
MySql
前端基礎之JavaScript引入
2024-03-19
前端JavaScript
鞏固系統韌性三個基礎策略
2023-09-28
Go 基礎鞏固加強-1.0-指標
2019-11-26
Go指標
JavaScript基礎總結（二）
2019-02-16
JavaScript
最全JavaScript基礎總結
2020-07-20
JavaScript
學Python要避免哪些坑，如何鞏固好基礎
2019-08-08
Python
鞏固Python基礎必學的22個語法
2021-09-11
Python
JavaScript基礎總結（三）——陣列總結
2019-02-16
JavaScript陣列
前端學習之PHP基礎函式總結
2020-10-07
前端PHP函式
前端基礎 — Web事件總結
2021-09-09
前端Web事件
Java基礎知識回顧之七 —– 總結篇
2019-03-03
Java
Java基礎知識回顧之七 ----- 總結篇
2018-06-27
Java
java基礎鞏固-淺析String原始碼及其不可變性
2018-06-13
Java原始碼
Java基礎鞏固第三天（泛型、ArrayList、LinkList、HashSet）
2020-09-24
Java泛型
iOS 動畫基礎總結篇
2018-07-18
iOS動畫
基礎鞏固、探尋Java裝箱和拆箱的奧妙！
2023-05-01
Java
Java基礎知識強化（用於自我鞏固）以及審查
2020-12-15
Java
javascript高階基礎的深入總結
2020-11-02
JavaScript
前端面試（個人收藏總結）javascript篇（二）
2018-04-08
前端面試JavaScript
前端面試（個人收藏總結）javascript篇（一）
2018-04-07
前端面試JavaScript
前端之路---入坑篇之基礎中的基礎html
2020-03-30
前端HTML
前端基礎之JavaScript的資料型別
2024-03-19
前端JavaScript資料型別
Flutter 知識點總結-基礎篇
2021-07-29
Flutter
Java順序結構與選擇結構【花時間看看，鞏固基礎，終生受益，升職加薪】
2020-11-17
Java
前端知識總結之Ajax,axios,fetch篇
2019-06-09
前端iOS
JavaSE複習鞏固
2021-12-01
Java
前端基礎入門四（JavaScript基礎）
2019-05-20
前端JavaScript
Javascript基礎之-this
2019-01-16
JavaScript
iOS之BLE藍芽SDK開發個人總結(基礎篇)
2019-03-05
iOS藍芽

長篇總結之JavaScript，鞏固前端基礎

前言

什麼是JavaScript

瞭解JavaScript的發展歷史

瞭解JavaScript的組成

學習js的註解和分號

學習JavaScript的語法

學習識別符號

識別符號的命名規則

學習什麼是變數

學習變數的宣告和賦值

變數的賦值：

掌握JavaScript的資料型別

學習typeof操作符

學習Undefined

學習null

學習number知識點

學習isNaN知識點

數值轉換

學習Striing

學習字串轉換

學習Boolean

學習型別轉換

算數操作符

遞增

三元操作符

邏輯操作符

邏輯與&&

邏輯或與邏輯非

流程控制語句

document.wirte()，星期的獲取方法，掌握switch

JavaScript中的迴圈語句

break語句和continue語句

JavaScript中的函式

函式的返回值

內建物件

陣列的棧方法

splice()方法-刪除-插入-替換

位置-indexOf和lastIndexOf

字串的擷取

substring()

獲取副檔名

split()

replace()替換

toUpperCase()和toLowerCase()

數學物件

絕對值Math.abs()

random()方法-隨機數

date物件

常用的一些方法

設定方法

錯誤處理

如何區分語法錯誤與執行時錯誤

邏輯錯誤

DOM節點操作

建立節點

節點遍歷

獲取元素的方式

節點查詢querySelector()和querySelectorAll()

操作節點

刪除節點方法

DOM屬性

常見的字串屬性

事件

繫結事件

鍵盤事件與keyCode屬性

事件的解綁

事件委託和事件冒泡

事件冒泡和事件捕獲

event物件中的屬性和方法

event物件跨瀏覽器相容

Window 物件

定時器

location物件

閉包

js的作用域 - 詞法作用域

什麼是閉包

閉包的使用

閉包的形成及優缺點

後記

學習`number`知識點

學習`isNaN`知識點

邏輯與`&&`

`splice()`方法-刪除-插入-替換

`substring()`

`split()`

`replace()`替換

絕對值`Math.abs()`

`random()`方法-隨機數

節點查詢`querySelector()`和`querySelectorAll()`

鍵盤事件與`keyCode`屬性