JavaScript 精華一頁紙

JS 自身操作部分

---

1、資料型別 | 變數定義
動態語言，不需要指定引數的資料型別，也就是說可以任意賦值
數字 | 布林 | 字串 | 陣列 | 物件

未定義的變數 undefined

undefined 和 null 的區別：undefined 值為 null，型別為 undefined，表明未定義；null值為null，型別為 object，表明為空。

字串和Java類似；數字型別都是 64位，不區分具體型別。
型別轉換
數字 - > 字串
toString | String()
字串 -> 數字
parseInt/parseFloat -- 和Java 略有區別的是，如果數字和字母混合，則會擷取一段轉換
進位制轉換
toString(2/8/16) - 精度

型別檢測 - typeOf 類似 instanceof
如果判斷一個物件是什麼型別 一般 可以使用 constructor 屬性來判斷

eval -- 計算並執行 string 裡面的語句；儘量避免使用，防止惡意程式碼；
escape -- 對特殊字元進行編碼

2、物件
三種定義方式，最常用的還是{}方式
var obj = {id:1,name:"aa",fun:function(){}};

可以動態的給物件增加新的屬性和函式；如果需要給已經存在的物件增加函式（比如系統類庫新增方法）
-- 任何類都有prototype屬性，所以新增類方法，只需要給 prototype 增加方法即可 

補充閱讀：原型鏈

物件 this - 在不同位置，代表不同意思，一般是指呼叫 該函式時的物件

函式物件
和Java一樣值傳遞，可以修改 外部的物件引數值
函式並不檢查隱式引數的任何情況，可以使用 arguments 實現很多功能；呼叫時，如果引數個數少於函式定義，則其他的都是undefined

function定義物件
Function(para1,para2){
this.para1 = para1;

this.func = function(){
}
}
function myFunction(a,b){ }

call vs apply - 有點像java的反射呼叫
myFunction.call(obj,a,b); -- 這裡 函式也當成了一個物件，通過物件來呼叫函式，如果是物件的方法，傳入物件，如果是全域性，可以傳入null
myFunction.apply(obj,[a,b]);

數字物件
isNaN - 是否數字 | toFixed() 精度

String物件
indexOf()/charAt/toLowerCase/toUpperCase/length

日期物件 類似於 Java.util.Date
new Date(引數可選 日期|毫秒|年月日等等)
setFullYear / setDate

陣列物件
concat 合併兩個 | filter 過濾 | join 把陣列轉換成字串 | [last]indexOf 索引 | map 處理陣列的每個元素返回新陣列 | push/pop 向尾部增加或者取出 | reverse 反轉| shift 返回第一個並刪除 | slice 選取一部分陣列 | some 是否有符合條件的資料 | sort 排序 | splice 新增 | unshift 向陣列頭部插入元素 | valueOf 返回陣列物件值
-- 這些函式的提供，非常符合函式化特徵，在 scala裡面也大量使用了類似的功能。

正規表示式
new RegExp | /表示式/gim
提供 test exec（返回匹配的字串） 來進行匹配判斷；另外，字串替換,match 都採用了正規表示式物件

Math 物件
PI/round/floor/ceil/ranodm/min/max

物件與json的互轉
json.parse
json.stringify

3、邏輯控制
判斷 | 迴圈 和 java類似(for in 迴圈java 也支援
運算子 | 表示式 都和 java類似

補充閱讀：for in 迴圈如果使用在陣列中,而陣列擴充套件了prototype原型方法,迴圈迭代時,有可能迭代到原型方法

4、異常處理
try{

}catch(err){
-- 因為沒有型別定義，所以只有一個 catch
}
throw

5、提升 （變數和函式）
前面的程式碼 可以使用後面宣告的變數|函式；不建議使用，違反正常閱讀習慣

6、嚴格模式

7、自呼叫函式和閉包
(function(){
var para = aa;
return {
para:para,
func:function
}
})();
首先 是自呼叫，保證了程式碼的執行；其次通過閉包封裝；並返回了一個物件，這樣對模組進行了封裝；實現了類似class的功能。

HTML DOM 操作

---

8、元素操作 - document
獲取元素 getElementById/ getElementByTagName / getElementByClassName
父子|兄弟關係 firstChild/lastChild/nextSibling/parentNode /childNodes
屬性 getAttribute/ attributes
可以直接指定屬性操作 element.src = xxx
新增元素 createElement/ createTextNode/ createAttribute / appendChild / insertBefore
刪除/更新元素 replaceChild / removeChild/ setAtrribute

元素屬性 nodeName | nodeValue | nodeType
文字節點有 value沒有name | 普通節點有name 沒有value | 1元素|2屬性|3文字|8註釋|9文件

這裡有一點和 XML 解析是類似的，就是每個元素節點之間都有 空白文字子節點，就是元素之間的空白?????

9、樣式操作
element.style.xxx = value;
element.className =

10、事件
I、事件型別
a、文件載入相關（系統框架事件)
onload | onunload | onbort | onerror | onpageshow | onresize | onscroll
b、滑鼠事件
onclick | ondbclick | onmouseover | onmouseout | onmousedown | onmouseup | onmouseenter| onmouseleave
c、鍵盤事件
onkeydown | onkeypress | onkeyup
d、表單事件
onchange | onfocus | onblur | onfocusin | onfocusout | oninput | onreset | onsearch | onselect | onsubmit
e、剪貼簿 & 列印 & 拖動 & 動畫 & 多媒體 & 過渡 & 其他等等

II、事件模型
a、DOM level 0 的屬性繫結事件
b、DOM level 2的事件註冊派發模型
addEventListener / attachEventListener / removeEventListener
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
}, 冒泡or捕獲)
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，使用者點選 <p> 元素, 哪個元素的 "click" 事件先被觸發呢
在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點選事件先觸發，然後會觸發 <div> 元素的點選事件。
在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點選事件先觸發 ，然後再觸發 <p> 元素的點選事件

III、事件物件
屬性
bubbles 是否冒泡型別 | currentTarget -- 觸發事件的元素 | target -- 觸發事件的元素 | type - 事件型別

方法
preventDefault -- 通知瀏覽器不執行動作（阻止事件冒泡） | stopPropagation -- 不再派發事件

如果是鍵盤/滑鼠事件物件，還能獲取 座標、位置、鍵盤字母等等
clientX/Y
screenX/Y

target 和 currentTarget的區別？
如果只是 DOM level 0 很簡單，監聽物件很明確，就是 繫結屬性的這個元素。兩者相同
但如果 使用 addEventListener 時，就會存在 父子容器的情況，如果是 子容器的點選事件；父容器在監聽 - 冒泡；或者反過來，捕獲，父容器事件，子容器在點選
target 對應 真實點選事件的 元素物件
currentTarget 對應 監聽事件的 元素物件

javascript:void(0) 代表的是什麼意思呢？
void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表示式但是不返回值。一般可以用在連結轉選單|導航時，點選不跳轉只有其他效果

<a href="javascript:void(0)">單擊此處什麼也不會發生</a>
<a href="javascript:void(alert('Warning!!!'))">點我!</a>

href="#"與href="javascript:void(0)"的區別
# 包含了一個位置資訊，預設的錨是#top 也就是網頁的上端。
而javascript:void(0), 僅僅表示一個死連結。
在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id。
如果你要定義一個死連結請使用 javascript:void(0) 。

瀏覽器相關

---

11、window 物件
window物件 是預設的，所有物件和方法都在 window物件中
Window 物件擁有的屬性
screen 螢幕物件 | location 訪問的url | history 瀏覽歷史 | navigator 瀏覽器 | document 文件物件

方法
setTimout / setInterval / clearTimeout / clearInterval / setScroll / ...

事件
onlaod or ready
一般 把函式引用 和 HTML的聯結 都放在 window.onload 事件中，否則操作的dom 元素可能還未存在
都是載入完畢。ready 只包括html文件，但圖片等可能還未載入完；onload是所有的都載入完

12、彈出框
alert | confirm | prompt

13、cookie
document.cookie
不同瀏覽器不能共享 cookie； 判斷瀏覽器是否支援 cookie -- navigator.cookieEnable

原文部落格  http://www.likeway.net/?p=20