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

你們好，我是魔王哪吒，話很少說，今天帶來的是一篇《長篇總結之JavaScript，鞏固前端基礎》文章，歡迎你們喜歡。
複製代碼

前言

什麼是JavaScript

JavaScript是一種基於對象和事件驅動的客戶端腳本語言，最初是爲了檢驗HTML表單輸入的正確性，起源於Netscape公司的LiveScript語言。

瞭解JavaScript的發展歷史

liveScript ==> javaScript => ECMAscript

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

瞭解JavaScript的組成

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

1. 語法：

學習js的註解和分號

//單行註解

/**/多行註解

語句結束使用分號，若是省略，則由接下肯定語句的結尾。

學習JavaScript的語法

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

學習標識符

什麼是標識符，變量，函數，屬性的名稱，或者是函數的參數。

標識符的命名規則

1. 由字母，數字，下劃線或者是美圓符號組成。
2. 不能以數字開頭。
3. 不能使用關鍵字，保留字等做爲標識符。

學習什麼是變量

什麼是變量，ECMAScript的變量是鬆散類型的。鬆散類型是指能夠用來保存任何類型的數據。

每一個變量僅僅只是用於保存值的佔位符而已。

學習變量的聲明和賦值

變量的聲明：變量的聲明使用var操做符，語法：var變量名。

變量的賦值：

1. 聲明的同時賦值，var 變量名=值
2. 先聲明後賦值，變量名 = 值

一次聲明多個變量，用逗號隔開。

注意，省略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()對接收的數值，先嚐試轉換爲數值，再檢測是否爲非數值。

數值轉換

1. Number()
2. parseInt()
3. parseFloat()

Number()能夠用於任何數據類型，parseInt()和parseFloat()用於把字符串轉成數值。

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

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

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

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

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

學習Striing

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

學習字符串轉換

1. String()
2. toString()

str.toString()將str轉換爲字符串。使用String()函數，可以將任何類型的值轉換爲字符串。

學習Boolean

用於表示真假的類型，便是true表示真，false表示假。

學習類型轉換

除了0以外的全部數字，轉換爲布爾型都爲true。

除了「 」以外的全部字符，轉換爲布爾型都爲true。

null和undefined轉換爲布爾型爲false。

算數操做符

1. 什麼是表達式
2. JavaScript操做符的分類
3. 學習算數操做符

表達式是將同類型的數據，用運算符號按必定的規則鏈接起來的，有意義的式子。

操做符的分類

1. 算數操做符
2. 邏輯操做符
3. 賦值操做符
4. 比較操做符
5. 三元操做符

遞增

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

區別：

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

遞減同理。

1. 賦值操做符
2. 比較操做符
3. 三元操做符

三元操做符

語法：條件？執行代碼1：執行代碼2

邏輯操做符

邏輯與&&

若是第一個操做數隱式類型轉換後爲true，那麼返回第一個操做數。

若是第一個操做數隱式類型轉換後爲false，那麼返回第二個操做數。

若是，只有有一個操做數爲null,NaN,undefined，其中一個，就會返回null,NaN,undefined。

邏輯或與邏輯非

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

!非，不管操做數是什麼數據類型，邏輯非都會返回一個布爾值。

流程控制語句

1. 學習掌握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中的循環語句

1. for
2. for-in
3. while
4. do...while

語法：

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

語法：

do{
    須要執行的代碼
}while(條件)
複製代碼

循環至少要被執行一次。

break語句和continue語句

break當即退出循環

continue結束本次循環，繼續開始下一次循環

JavaScript中的函數

1. 做用
2. 定義
3. 調用

函數的做用就是經過函數能夠封裝任意多條語句，能夠在任何地方，任什麼時候候調用執行。

函數是如何定義的，使用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對象來訪問這個數組參數。

內置對象

對象：字符串，函數，數組

內置對象就是瀏覽器本身封裝好的對象。

1. Array
2. String
3. Math
4. Date

數組是用來存儲一組數據的，如何建立數組，數組元素的讀和寫，數組的length屬性。

建立數組：使用Array構造函數，new Array()，使用字面量表示法。

數組的棧方法

1. push()，把參數添加到數組的最後。
2. unshift()，把參數添加到數組的前面。
3. pop()，刪除最後一個元素，返回被刪除的那個元素。
4. 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字符串的方法：

1. charAt()
2. charCodeAt()
3. indexOf()
4. lastIndexOf()

charAt()與charCodeAt()的區別

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

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

字符串的截取

字符串對象的截取：

1. slice()
2. substring()
3. substr()

數組對象也有slice()的語法

對於字符串的截取：

語法：stringObject.slice(start,end)

功能，截取子字符串。

參數說明：

1. start爲指定字符串的開始位置。
2. 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);
複製代碼

數學對象

1. min()
2. max()
3. ceil()，向上取整。
4. floor()，向下取整。
5. round()
6. 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()爲建立一個日期時間對象。不傳參，返回當前的日期時間對象。

經常使用的一些方法

1. getFullYear()返回4位數的年份。
2. getMonth()返回日期中的月份，返回值爲0-11。
3. getDate()返回月份中的天數。
4. getDay()返回星期，返回值爲0-6。
5. getHours()返回小時。
6. getMinutes()返回分。
7. getSeconds()返回秒。
8. 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(),
複製代碼

設置方法

1. setFullYear(year)設置4位數。
2. setMonth(mon)設置日期中的月份。
3. setDate()設置日期。
4. setHours()設置小時。
5. setMinutes()設置分。
6. setSeconds()設置秒。
7. setTime()以毫秒數設置日期，會改變整個日期。

錯誤處理

1. Chrome DevTools的基本使用

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

運行時錯誤，代碼沒有語法錯誤，可是在運行時發生錯誤。

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

1. 語法錯誤是不可能運行成功的。
2. 運行時錯誤是有可能運行成功的。

邏輯錯誤

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

代碼：

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都是動態的。

節點查找

1. getElementById()
2. getElementByName()
3. getElementByTagName()
4. getElementByClassName()
5. querySelector()
6. querySelectorAll()

獲取元素的方式

• document.getElementById()

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

• document.getElementsByClassName()

1. 根據class名獲取元素
2. 返回是一個僞數組
3. IE8和IE8如下不支持

• document.getElementsByTagName()

1. 根據標籤名獲取元素
2. 返回一個僞數組
3. 兼容很好

• document.getElementsByName()

1. 根據name名獲取，通常應用於表單
2. 返回僞數組
3. 只針對對name屬性有效的標籤生效。

僞數組

1. 必須是對象
2. 必須有length屬性
3. 存放內容必須以索引+內容
4. 有數組的一些基本特性，可是不能使用數組的方法。

獲取元素屬性

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

dom.style.prop

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

window.getComputeStyle(ele,null)

1. null的地方能夠存放僞類
2. 返回的都是絕對值
3. 是隻讀的，不可修改

ele.currentStyle

1. 是隻讀的，不可修改
2. 返回的是通過轉換的絕對值
3. IE獨有的屬性

ele.id ele.title

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

獲取元素的內容

innerHTML:

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

innerText:

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

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選擇器的一組元素

操做節點

1. appendChild()
2. insertBefore()
3. replaceChild()
4. cloneNode()
5. normalize()
6. 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()按照指定的位置把文本節點分割爲兩個節點。

刪除節點方法

1. removeChild()
2. removeNode()
3. innerHTML
4. deleteContents()
5. 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()

1. ie的私有實現
2. 將目標節點從文檔刪除，返回目標節點
3. 參數是布爾值，默認值爲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自定義屬性

1. getNamedItem()
2. removeNamedItem()
3. 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>
複製代碼

事件

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

事件方法：

1. onload頁面加載時觸發
2. onclick鼠標點擊時觸發
3. onmouseover鼠標滑過期觸發
4. onmouseout鼠標離開時觸發
5. onfoucs獲取焦點時觸發
6. onblur失去焦點時觸發
7. onchange域的內容改變時發生

HTML事件

示例：

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

綁定事件

綁定事件的方法：

1.onclick:

1. 一個元素上只能綁定一個
2. this指向dom元素自己

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

• IE9如下不兼容
• 能夠爲一個元素綁定多個事件
• this指向dom元素自己

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

• IE獨有
• 能夠爲一個元素綁定多個事件
• this指向window

1. onsubmit表單中的確認按鈕被點擊時發生
2. onmousedown鼠標按鈕在元素上按下時觸發
3. onmousemove在鼠標指針移動時發生
4. onmouseup在元素上鬆開鼠標按鈕時觸發
5. onresize當調整瀏覽器窗口的大小時觸發
6. 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的做用域是詞法做用域(靜態做用域)，實際上大部分的語言做用域都是詞法做用域，與詞法做用域相對的是動態做用域

什麼是閉包

閉包是指有權訪問另外一個函數做用域中變量的函數。

閉包的使用

做用域鏈指向的變量對象

閉包的造成及優缺點

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

優勢：

1. 閉包裏的變量不會污染全局，由於變量被封在閉包裏
2. 全部變量都在閉包裏保證了隱私性和私有性

後記

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