一．JavaScript簡介
JavaScript的組成：ECMAScript、DOM、BOM
ECMAScript
1）它定義了腳本語言的所有屬性、方法和對象。
2）JavaScript/ActionScript/ScriptEase等其他語言通過實現ECMAScript作為其功能的基准。
DOM
1）每個瀏覽器都有其自身ECMAScript接口的實現，這些ECMAScript接口被擴展成DOM、BOM等。
2）根據W3C的DOM規范，DOM接口與瀏覽器、平台、語言無關，故用戶可以訪問頁面的其他標准組件。其解決了訪問站點中的數據、腳本和表現層對象時，一些瀏覽器和系統的沖突。
3）DOM把整個網頁規划成，由節點層級構成的文檔。
BOM
1）常見功能：彈出/移動/關閉/調整 瀏覽窗口；提供Web瀏覽器相關信息的導航對象；提供頁面詳細信息的定位對象；提供屏幕分辨率參數的屏幕對象；支持cookie；不同瀏覽器自身的新特性(如IE的ActiveX類)...
二、Web標准
——Web標准概述
1）Web標准為一系列標准的集合。
網頁分為結構Structure、表現presentation、行為Behavior。
三、JavaScript基礎
——JavaScript語法
1） 區分大小寫。
2） 若類型變量。
3） 行尾的分號可有可無。
4） 括號用於代碼塊。
5） 注釋方式同於C和Java。
——變量
1）可不用聲明或用var(variable)關鍵字聲明變量。可同時聲明多個。
2）名稱規則：①首字符可為字母/下划線/美元符，其后還可有數字。
②變量名不能為關鍵字和保留字。
③3種標記規則：Camel/Pascal/匈牙利標記法
——9種數據類型
String、Number、Boolean、Object、Undefined、Null
和3種在JS運行時中間結果的數據類型Reference、List、Completion
1）字符串
①獲取字符串 個數：length屬性。【雙字符算一個字符】
②獲取 指定位置的字符：charAt()方法
③獲取 子字符串：slice()、substring()、substr()
slice()和substring()都接受兩個參數，指起始位置和終止位置，不包含終止字符。可忽略第二個參數。
區別在於負數參數：前者負數從末端計數。后者負數歸0，較小數為始，較大數為終。
substr()的首參數為起始位置，次參數為長度。
④搜索 子字符：indexOf()、lastIndexOf()
indexOf()往前搜。lastIndexOf()往后搜。返回指定字符的位置，找不到則返回-1。
可設置第2參數指定開始搜索位置。位置都是從前面的0下標開始。
2）數值
①var num = 7e5； //其中“7e5”表示“700000”。
②toExponential()用於將數值 轉換為 科學計數法。參數表小數位數。
3）布爾型
只有true和false兩個值。
typeof()返回變量的類型。
4）類型轉換
①轉換為 字符串型：toString()參數可指定要轉換成的進制數
②轉換為數字型：parseInt()轉換為整數。parseFloat()轉換為浮點數。都從0位置開始，檢查到非數值時結束。參數可指定要轉換成的進制數。
字符串型、數字型、布爾型都屬於離散型。離散的變量只能存儲一個值，存儲一組值的變量需使用數值array。
5）數組
①由相同名稱的多個值構成的集合。
②由Array關鍵字聲明，可同時制定個數/長度length：var aTeam = new Array(12): //長度可容12個元素
直接用參數創建元素：var aMap = new Array(“China”，“USA”，“Britain”):
③由方括號[]聲明：var aMap = [“China”，“USA”，“Britain”]:
④數組 轉換為 字符串：toString()。
⑤指定數組的 連接符：join()參數為連接數組項的字符串。無參數等同toString()；空字符串表不用連接符；
⑥字符串 轉換為 數組：split()參數為分隔字符串的標識。
⑦使數組元素 反序：reverse()【字符串沒有類型方法，但可通過split()轉換為數組反序后用join()轉回字符串】
⑧使數組元素 按字母排序：sort()
——函數
1）arguments對象：可訪問函數的參數【通過下標】。
function aFunc(){if(arguments[0]==“aWord”){do something}:}
函數參數個數：arguments.length
2）ECMAScript不會檢驗傳遞給函數的參數個數是否超過函數定義的。【Netscape文檔表面最多26個】任何遺漏的參數都以undefined形式傳給函數，多余的參數回被自動忽略。
——其他對象
1）對象是自我包含的數據集合。訪問對象數據2種方式：屬性和方法。【屬性是對象中的變量，方法則是函數】
創建對象：new關鍵字。var myCar = new Car()；
2）Date對象
①ECMAScript把日期存儲為距離UTC時間1970年1月1日0點的毫秒數。【協調世界時UTC由原子鍾提供】
②計算 程序運行速度：在程序始末各創建一個時間對象，通過第二個時間對象減去前面的，得出運行時間。
③參數 初始化時間對象：
new Date（“month dd，yyyy hh：mm：ss”）；
new Date（“month dd，yyyy”）；
new Date（yyyy，mth，dd，hh，mm，ss）；
new Date（yyyy，mth，dd）；
new Date（ms）；
yyyy：4位數年份。 month：英文月份。 mth：月份0-11。 dd：日數1-31。
hh：小時數0-23。 mm：分針數0-59。 ss秒數。 ms：毫秒數。
※ new Date()在不同瀏覽器中顯示格式不同。【即輸出的字符串不同】
④獲取時間：
aDate.getFullYear() 四位數年份。
aDate.getYear() 不同瀏覽器，返回兩位或四位數年份【不推薦】
aDate.getMonth() 月份0-11
aDate.getDate() 日期1-31
aDate.getDay() 星期0日-6六
aDate.getHours() 小時數0-23
aDate.getMinutes() 分鍾數0-59
aDate.getSeconds() 秒數0-59
aDate.getMilliseconds() 毫秒數0-999
aDate.getTime() 返回從GMT時間1970年1月1日0點0分0秒至aDate的毫秒數
⑤設置時間：aDate.setFullYear...()
——數學計算：Math對象
1）常用屬性： Math.E：e自然對數的底 Math.PI：π圓周率 Math.SQRT2：2的平方根
2）最值：min()、max()返回一組數的最小/大值。
3）小數 轉換 整數：ceil()向上取整、floor()向下取整、round()四舍五入
4）生成隨機數：random() 返回0和1中間的隨機數，不包含0和1。
返回1-100中的隨機數：var aNum = Math.floor(Math.random()*100+1)；【包含1和100】
返回2-99中的隨機數：var aNum = Math.floor(Math.random()*99+2)；【包含1和100】
※通常將隨機選擇打包成一個函數，需要時再調用。
function selectFrom(firstVal，lastVal){
var sum = lastVal–firstVal + 1；
return Math.floor(Math.random()*sum + firstVal)；}
5）Math的其他方法：Math.abs(x)返回x的絕對值....
——BOM基礎
JS提供一些對象用於與瀏覽器窗口的交互。
這些對象包括：window、document、location、navigator、screen等。統稱為BOM。
1）window對象
表示整個瀏覽器窗口。
①4個常用方法：moveBy(dx，dy) 向右移動dx像素，向下移動dy像素。
moveTo(x，y) 移動到相對用戶屏幕的(x，y)處。
resizeBy(dw，dh)相對當前，寬度增加dw像素，長度增加dh像素。【負數為縮小】
resizeTo(w，h) 寬度調整為w像素，高度調整為h像素。【不能用負數】
②打開新窗口：open()
四個參數：冒號包圍，逗號分隔。
1新窗口url
2新窗口名稱【_blank/_self/_parent/_top/框架名】【與a元素的target屬性相同】
3新窗口是否替換當前頁面的布爾值
4特性字符串說明：left、top：新窗口坐標。 width、height：新窗口寬高。
resicable：是否可拖動調整大小。 scrollable：是否使用滾動條。【默認no】
toolbar、status、location：【默認no】是否顯示工具欄、狀態欄、地址欄。
③關閉窗口：close()
④彈出信息：alert() 單向對話框。一個確定按鈕。
confirm() 返回一個布爾值。一個確定按鈕和一個取消按鈕。
prompt() 返回一個字符串。兩個參數：腳本提示、默認值。
⑤window的history屬性：盡管無法獲取歷史頁面的URL，但通過history屬性可訪問歷史頁面。
使瀏覽器后退一頁：window.history.go(-1)；等同於window.history.back()；
使瀏覽器前進一頁：window.history.go(1)； 等同於window.history.forward()；
2）document對象
為window的一個屬性，故可訪問window的所有屬性和方法。即window.document == document為true。
①原本用於處理頁面文檔的功能被CSS和DOM取代，故現在主要用於讀寫一些網頁屬性/屬性集合。
如，讀寫URL。導航到新窗口【在FF不通用】：document.URL=“http://xxx.com/y”；
②常用屬性：anchors 網頁中錨的集合。 由<a name=”anchorsName”>標記
applets applet集合。
embeds 嵌入對象的集合。 由<embed>標記
forms 表單的集合。
images 圖片的集合。
links 超鏈接的集合。 由<a href=“URL”>標記
e.g：var myLinks = document.links；
myLinks[2].target = “_blank”；
③向瀏覽器直接插入HTML流：write()
除非置於在<script>的頂層，否則使用事件句柄調用函數中的document.write()方法時，插入的內容會以覆蓋當前頁面的形式出現。
3）location對象
表示載入窗口的URL。用於分析和設置網頁URL。window對象和document對象的屬性。
①常用屬性：hash：若URL包含書簽#，返回該符號后面的內容。
search：執行GET請求的URL中間號(？)后的部分。
href：當前載入的完整URL。
host：服務器名稱。
pathname：URL中主機名后的部分。
protocol：URL使用的協議。
port：URL周明華請求的端口號。
②location.href屬性與document.URL屬性相似，皆可導航到新頁面。前者對各瀏覽器的兼容性更好。
采用此方法導航，新地址會被加入到瀏覽器的歷史棧中，前個頁面之后，即可通過“后退”訪問之前的頁面。對於像安全級別較高的銀行系統 不希望用戶通過“后退”返回，可以用location.replace()方法代替。
③重新加載頁面：reload() 接受一個布爾值參數。true則從服務器上重載，false則從緩存上重載。
4）navigator對象
包含系列瀏覽器信息的屬性。可用於瀏覽器檢測。
①瀏覽器信息查詢：userAgent屬性
5）screen對象
用戶的屏幕信息。window對象的屬性。
屬性：width/height：屏幕寬高。
availWidth/availHeight：窗口可使用的屏幕寬高。【[ə'veɪl]有用】
colorDepth：用戶表示顏色的位數。
※全屏：window.moveTo(0，0)；
window.resizaTo(window.availWidth，window.availHeight)；
四、CSS進階
傳統HTML缺點：維護困難、標記不足、網頁過胖、定位困難...
——<div>與<span>
1）<div>division塊級元素block-level element。
2）<span>行內元素inline element。
故，<div>標簽可包含<span>元素，反之則不行。
——元素定位
1）float定位：在父級的content區域浮動。
2）position定位：4個值static/absolute/relative/fixed
配合position定位的屬性：top/right/bottom/left
3）z-index空間位置：調整position定位時 重疊塊的上下位置。同值時按原有高低覆蓋關系。
五、DOM模型
定義了用戶操作文檔對象的接口。使開發者能將HTML作為XML文檔來處理。
——網頁DOM模型框架
DOM完成了 通過樹狀圖的這種划分關系，使整個HTML文檔結構清晰可見，各個元素之間的關系很容易表達出來。
——DOM模型中的節點
在DOM中有3種節點：元素/文本/屬性 節點。
1）元素節點(element node)
可以說正個DOM模型都是由元素節點構成的。標簽p/li/h1等為元素節點的名稱。
根元素為html。
2）文本節點(text node)
文本節點被包含在元素節點內部。
3）屬性節點(attribute node)
幾乎所有元素都有title屬性用於描述。
——使用DOM
1）訪問節點
①getElementByTagName()
返回相同標簽名的元素的NodeList
※文檔的 DOM結構 必須在文檔加載完后 才能分析出來。故以上語句需在頁面加載后才能生效。
②getElementById()
返回指定id的元素。
※IE-Bug：當某元素的id值 與其前面某元素的name值相同時，此方法對name值元素作用有效，對id值元素無效。
解決：最好的辦法是避免id和name值相同。
2）檢測節點類型
①通過nodeType屬性克檢測出節點類型。
返回一個(代表節點類型的)整數值。有12個可取值。【document.nodeType返回9】
元素節點返回1、屬性節點返回2、文本節點返回3【故，可對某種類型的節點做單獨處理，常用於搜索節點】
3）利用父子兄關系 查找節點
父子兄：DOM模型中節點之間最重要的3種關系。
①通過父子關系 獲取某節點的所有子節點：hasChildNodes()和childNodes屬性
判斷是否有子節點：if（hasChildNodes()）{dosomething}
使用childNodes屬性 可遍歷所有子節點名 和顯示出來。
※IE7-Bug：再IE7中顯示出所有子節點名；在FF顯示出所有節點名外，之間的空格也會被當成子節點計算出來。
②反過來也可通過某節點 獲取其所有父節點：parentNode屬性。
最近的父節點：var p = aNode.parentNode.lastChild；
③通過兄弟關系 讀寫同一層次的節點：previousSibling屬性、nextSibling屬性【因①中bug，故僅適用於IE】
解決兼容性：用while循環進行nodeType判斷 過濾掉“nodeType不為1或null”的值。
4）設置節點屬性
①getAttribute(“屬性名”)只能通過一個元素節點對象調用！不能用document對象調用。
②setAttribute(“屬性名”，“屬性值”)
5）創建和添加節點
①創建元素節點：createElement(“元素名”)
②創建文本節點：createTextNode(“文本”)
【為元素節點添加-文本節點，即添加子節點：eleVar.appendChild(texVar)/該方法添加的位置，位於childNode位於列表尾部】
③創建文檔碎片節點：createDocumentFragment()
6）在特定節點前 插入節點
通過父節點的insertBefore()方法：同replaceChild()有兩個參數。
7）在特定節點后 插入節點
沒有直接方法，可自行編碼：判斷若為最后一個節點，則用appendChild()添加到末尾；否則添加到下一個兄弟節點的前面insertBefore()。
8）刪除節點
通過父節點的removeChild()方法：oP.parentNode.removeChild(oP)
9）替換節點
通過父節點的replaceChild()方法：olP.parentNode.removeChild(newP，oldP)
====================================================================