上一篇：web客戶端編程基礎(chǔ) – HTML、CSS
主要參考：https://www.w3school.com.cn
思維導(dǎo)圖：
1-???思維導(dǎo)圖
1、什么是JavaScript
首先：JavaScript和Java 是完全不同的語(yǔ)言，不論是概念還是設(shè)計(jì)?。。?/p>
其次：JavaScript是屬于HTML和web的編程語(yǔ)言，是對(duì)網(wǎng)頁(yè)行為進(jìn)行編程的。
2、JavaScript的使用
2.1 使用JavaScript代碼的兩種方式：
1、 在<script>標(biāo)簽中：<script>這里是javascript代碼</script>。
2、 把代碼寫(xiě)在后綴為 .js 的文件中，在<script>標(biāo)簽屬性src引用 <script src="代碼文件.js"></script>
2.2 Js顯示方案：
1、 window.alert() 彈窗警告
2、 document.write() 寫(xiě)入HTML輸出
3、 innerHTML 寫(xiě)入HTML元素
4、 console.log() 寫(xiě)入瀏覽器控制臺(tái)
2.3 使用瀏覽器執(zhí)行JavaScript代碼
在電腦上打開(kāi)瀏覽器，按F12（有些是Fn+F12），出現(xiàn)調(diào)試窗口，在Console 選擇項(xiàng)中，可以直接編寫(xiě)、執(zhí)行、調(diào)試JavaScript代碼。以google瀏覽器為例：
2 – 使用示例
3、語(yǔ)法與變量
在 HTML 中，JavaScript 語(yǔ)句是由 web 瀏覽器“執(zhí)行”的“指令”。 計(jì)算機(jī)程序是由計(jì)算機(jī)“執(zhí)行”的一系列“指令”。
在編程語(yǔ)言中，這些編程指令被稱(chēng)為語(yǔ)句。
JavaScript 程序就是一系列的編程語(yǔ)句。
注釋?zhuān)涸?HTML 中，JavaScript 程序由 web 瀏覽器執(zhí)行。
1、JavaScript的變量和php變量類(lèi)似，都是弱類(lèi)型的。
2、使用 var 來(lái)聲明變量，以分號(hào)；分隔語(yǔ)句。
3、使用 = 號(hào)為變量賦值
4、使用 +-*/ 等算數(shù)運(yùn)算符來(lái)計(jì)算值，（因此js 中不能使用連字符- 來(lái)命名變量）
5、//之后 或 /*與*/ 之間的代碼被視為注釋
4、數(shù)據(jù)類(lèi)型
JavaScript 是一種弱類(lèi)型或者說(shuō)動(dòng)態(tài)語(yǔ)言。不用提前聲明變量的類(lèi)型，在程序運(yùn)行過(guò)程中，類(lèi)型會(huì)被自動(dòng)確定?？梢允褂猛粋€(gè)變量保存不同類(lèi)型的數(shù)據(jù)：字符串（String）、數(shù)字(Number)、布爾(Boolean)、數(shù)組(Array)、對(duì)象(Object)、空（Null）、未定義（Undefined）
4.1 布爾類(lèi)型
布爾表示一個(gè)邏輯實(shí)體，可以有兩個(gè)值：true 和 false。
4.2??Null類(lèi)型
Null 類(lèi)型只有一個(gè)值： null。
4.3??Undefined 類(lèi)型
一個(gè)沒(méi)有被賦值的變量會(huì)有個(gè)默認(rèn)值 undefined。可以通過(guò)將變量的值設(shè)置為 null 來(lái)清空變量。但是用undefined清空變量則會(huì)有意想不到的bug等著你。
4.4??數(shù)字
JavaScript 只有一種數(shù)字類(lèi)型：基于 IEEE 754 標(biāo)準(zhǔn)的雙精度 64 位二進(jìn)制格式的值（-(253 -1) 到 253 -1）。它并沒(méi)有為整數(shù)給出一種特定的類(lèi)型。數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶。
NaN屬于 JavaScript 保留詞，指示某個(gè)數(shù)不是合法數(shù)。嘗試用一個(gè)非數(shù)字字符串進(jìn)行除法會(huì)得到 NaN（Not a Number）。
Infinity （或 -Infinity）是 JavaScript 在計(jì)算數(shù)時(shí)超出最大可能數(shù)范圍時(shí)返回的值。
絕不要用前導(dǎo)零寫(xiě)數(shù)字（比如 07）。
一些 JavaScript 版本會(huì)把帶有前導(dǎo)零的數(shù)解釋為八進(jìn)制。
默認(rèn)地，Javascript 把數(shù)顯示為十進(jìn)制小數(shù)。
但是您能夠使用 toString() 方法把數(shù)輸出為十六進(jìn)制、八進(jìn)制或二進(jìn)制。例如：varNum.toString(8)
其它數(shù)字方法：
toExponential() 返回字符串值，它包含已被四舍五入并使用指數(shù)計(jì)數(shù)法的數(shù)字。
toFixed() 返回字符串值，它包含了指定位數(shù)小數(shù)的數(shù)字。常用于處理金錢(qián)toFixed(2)
toPrecision() 返回字符串值，它包含了指定長(zhǎng)度的數(shù)字。
valueOf() 以數(shù)值返回?cái)?shù)值。
parseFloat()解析一段字符串并返回?cái)?shù)值。允許空格。只返回首個(gè)數(shù)字。
parseInt()解析一段字符串并返回?cái)?shù)值。允許空格。只返回首個(gè)數(shù)字。
4.5??字符串
JavaScript 字符串用于存儲(chǔ)和操作文本，是引號(hào)中的零個(gè)或多個(gè)字符組成。可以用單引號(hào)或雙引號(hào)生成。\ 轉(zhuǎn)義字符的使用，是為避免字符串中的引號(hào)產(chǎn)生歧義從而被切、報(bào)錯(cuò)。
其它六個(gè)有效轉(zhuǎn)義序列：\b 退格鍵；\f 換頁(yè)；\n 新行；\r 回車(chē)；\t 水平制表符；\v 垂直制表符；
內(nèi)建屬性 length 可返回字符串的長(zhǎng)度。
其它常用JavaScript字符串方法：
1、 indexOf() 方法返回字符串中指定文本首次出現(xiàn)的索引（位置），未找到返回-1
2、 lastIndexOf() 方法返回指定文本在字符串中最后一次出現(xiàn)的索引，未找到返回-1
3、 search() 方法搜索特定值的字符串，并返回匹配的位置
4、 slice(start, end) 提取字符串的某個(gè)部分并在新字符串中返回被提取的部分
5、 substring() 類(lèi)似于 slice()。不同之處在于 substring() 無(wú)法接受負(fù)的索引。
6、substr(start, length)提取字符串的某個(gè)部分并在新字符串中返回被提取的部分
7、replace(old, new)方法用另一個(gè)值new替換在字符串中指定的值old
replace() 方法不會(huì)改變調(diào)用它的字符串。它返回的是新字符串。它只替換首個(gè)匹配，且對(duì)大小寫(xiě)敏感。如需執(zhí)行大小寫(xiě)不敏感的替換，則使用正則表達(dá)式。
8、 toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)
9、 toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)
10、?concat() 連接兩個(gè)或多個(gè)字符串
11、trim()方法刪除字符串兩端的空白符
12、?split(“分隔符”) 將字符串轉(zhuǎn)換為數(shù)組
4.6??數(shù)組
JavaScript 數(shù)組用于在單一變量中存儲(chǔ)多個(gè)值。由括號(hào)[和反括號(hào)]或者 new Array()定義聲明。通過(guò)引用索引號(hào)（下標(biāo)號(hào)）來(lái)引用某個(gè)數(shù)組元素，例如arr[0]。數(shù)組是一種特殊類(lèi)型的對(duì)象。在 JavaScript 中對(duì)數(shù)組使用 typeof 運(yùn)算符會(huì)返回 "object"。雖說(shuō)如此，Js數(shù)組還是以數(shù)組來(lái)描述，區(qū)分：數(shù)組是[]括號(hào)，對(duì)象是{}花括號(hào)。
常用的數(shù)組屬性和方法：
1、 length 屬性返回?cái)?shù)組的長(zhǎng)度（數(shù)組元素的數(shù)目）
2、 Array.foreach() 函數(shù)遍歷數(shù)組，一般最安全的方法是使用for循環(huán)。
3、 push方法向數(shù)組添加新元素，返回新數(shù)組的長(zhǎng)度
4、 Array.isArray() 函數(shù)判斷變量是否是數(shù)組（ECMAScript 5，部分老瀏覽器不支持）
5、 toString() 把數(shù)組轉(zhuǎn)換為數(shù)組值（逗號(hào)分隔）的字符串，join(“分隔符”)也可以達(dá)到相同效果
6、 pop() 方法從數(shù)組中刪除最后一個(gè)元素
7、 shift() 方法會(huì)刪除首個(gè)數(shù)組元素，并把所有其他元素“位移”到更低的索引，返回“位移出”的字符串
8、 unshift() 方法（在開(kāi)頭）向數(shù)組添加新元素，并“反向位移”舊元素，返回新數(shù)組的長(zhǎng)度
注意：push、unshift、pop、shift 這四個(gè)方法一起記憶：數(shù)組頭尾添加刪除，添加返回長(zhǎng)度，刪除返回元素。
9、 splice(start, length,…) 方法可用于向數(shù)組添加新項(xiàng)，返回一個(gè)包含已刪除項(xiàng)的數(shù)組，一般的用法是刪除元素:splice(start,1)
10、concat() 方法通過(guò)合并（連接）現(xiàn)有數(shù)組來(lái)創(chuàng)建一個(gè)新數(shù)組, 不會(huì)更改現(xiàn)有數(shù)組。它總是返回一個(gè)新數(shù)組, 可以使用任意數(shù)量的數(shù)組參數(shù)。
11、slice(start, end) 方法用數(shù)組的某個(gè)片段切出新數(shù)組。它不會(huì)從源數(shù)組中刪除任何元素
數(shù)組排序：
1、 sort() 方法以字母順序?qū)?shù)組進(jìn)行排序。如果要對(duì)數(shù)值進(jìn)行排序，則需自定義比值函數(shù)。例如：arr.sort(function(a, b){return a - b})
2、 reverse() 方法反轉(zhuǎn)數(shù)組中的元素。
3、 Math.max 查找數(shù)組中的最高值
4、 Math.min 查找數(shù)組中的最低值
4.7??對(duì)象
天天面向?qū)ο?，卻沒(méi)個(gè)對(duì)象。
示例：
var person = {
?// 屬性:屬性值,
?firstName: "Bill",
?lastName : "Lee",
?id??????: 627,
?// 方法名：函數(shù)定義(參數(shù))
?fullName : function(arg) {
???return arg+this.firstName + " " + this.lastName;
?}
};
對(duì)象訪問(wèn): 值person.id 方法person.fullname(‘hello！’);
JavaScript this 關(guān)鍵詞指的是它所屬的對(duì)象
它擁有不同的值，具體取決于它的使用位置：
在方法中，this 指的是所有者對(duì)象。
單獨(dú)的情況下，this 指的是全局對(duì)象。
在函數(shù)中，this 指的是全局對(duì)象。
在函數(shù)中，嚴(yán)格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 這樣的方法可以將 this 引用到任何對(duì)象。
5、運(yùn)算符
運(yùn)算符常用
1、算術(shù)運(yùn)算符 +-*/ ；
2、比較和邏輯運(yùn)算符：
與&& 或|| 非!
大于> 小于< 大于等于>= 小于等于<= 等于== 全等于=== 不等于!=；
3、賦值運(yùn)算 ++,-- ,+=, -= 。
不常用，但是關(guān)鍵時(shí)刻很好用的“位運(yùn)算符”：
5-運(yùn)算符圖
6、條件語(yǔ)句
使用 if 來(lái)規(guī)定要執(zhí)行的代碼塊，如果指定條件為 true
使用 else 來(lái)規(guī)定要執(zhí)行的代碼塊，如果相同的條件為 false
使用 else if 來(lái)規(guī)定要測(cè)試的新條件，如果第一個(gè)條件為 false
使用 switch 來(lái)規(guī)定多個(gè)被執(zhí)行的備選代碼塊
例1：
if(表達(dá)式){
??????代碼塊
}else if(表達(dá)式){
??????代碼塊
}else{
??????代碼塊
}
例2：
switch(表達(dá)式) {
????case n:
???????代碼塊
???????break;
????case n:
???????代碼塊
???????break;
????default:
???????默認(rèn)代碼塊
}
7、循環(huán)語(yǔ)句
for - 多次遍歷代碼塊
for/in - 遍歷對(duì)象屬性
while - 當(dāng)指定條件為 true 時(shí)循環(huán)一段代碼塊
do/while - 當(dāng)指定條件為 true 時(shí)循環(huán)一段代碼塊
for (語(yǔ)句1; 語(yǔ)句 2; 語(yǔ)句 3) {
????要執(zhí)行的代碼塊
}
語(yǔ)句 1 在循環(huán)（代碼塊）開(kāi)始之前執(zhí)行。
語(yǔ)句 2 定義運(yùn)行循環(huán)（代碼塊）的條件。
語(yǔ)句 3 會(huì)在循環(huán)（代碼塊）每次被執(zhí)行后執(zhí)行。
break 語(yǔ)句“跳出”循環(huán)。
continue 語(yǔ)句“跳過(guò)”循環(huán)中的一個(gè)迭代。
continue 語(yǔ)句（不論有無(wú)標(biāo)簽引用）只能用于跳過(guò)一個(gè)迭代。
break 語(yǔ)句，如果沒(méi)有標(biāo)簽引用，只能用于跳出一個(gè)循環(huán)或一個(gè) switch。
如果有標(biāo)簽引用，則 break 語(yǔ)句可用于跳出任意代碼塊
8、函數(shù)
8.1 函數(shù)的表達(dá)和定義
JavaScript 函數(shù)通過(guò) function 關(guān)鍵詞進(jìn)行定義，其后是函數(shù)名和括號(hào) ()。
函數(shù)名可包含字母、數(shù)字、下劃線和美元符號(hào)（規(guī)則與變量名相同）。
圓括號(hào)可包括由逗號(hào)分隔的參數(shù)
例如：
function functionName(parameters) {
??要執(zhí)行的代碼
}
JavaScript 函數(shù)也可以使用表達(dá)式來(lái)定義。函數(shù)表達(dá)式可以在變量中存儲(chǔ)；
例如：var x = function (a, b) {return a * b};這樣的函數(shù)是一個(gè)匿名函數(shù)。
箭頭函數(shù)允許使用簡(jiǎn)短的語(yǔ)法來(lái)編寫(xiě)函數(shù)表達(dá)式。您不需要 function 關(guān)鍵字、return 關(guān)鍵字和花括號(hào)。例如：
// ES5
var x = function(x, y) {
?return x * y;
}
// ES6 — 早期版本可能不支持
const x = (x, y) => { return x * y };
9、HTML DOM操作
通過(guò) HTML DOM，JavaScript 能夠訪問(wèn)和改變 HTML 文檔的所有元素。
9.1 什么是HTML DOM
HTML DOM 文檔對(duì)象模型。
當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被結(jié)構(gòu)化為對(duì)象樹(shù)：
9_1-對(duì)象樹(shù)
9.2 HTML事件
HTML 事件是發(fā)生在 HTML 元素上的“事情”。
當(dāng)在 HTML 頁(yè)面中使用 JavaScript 時(shí)，JavaScript 能夠“應(yīng)對(duì)”這些事件。
常見(jiàn)的HTML事件：
onchange?????HTML 元素已被改變
onclick??用戶點(diǎn)擊了 HTML 元素
onmouseover 用戶把鼠標(biāo)移動(dòng)到 HTML 元素上
onmouseout?用戶把鼠標(biāo)移開(kāi) HTML 元素
onkeydown??用戶按下鍵盤(pán)按鍵
onload??瀏覽器已經(jīng)完成頁(yè)面加載
9.3 HTML DOM Document 對(duì)象
HTML DOM 文檔對(duì)象是您的網(wǎng)頁(yè)中所有其他對(duì)象的擁有者。
常用的方法和屬性：
1、獲取HTML元素
document.getElementById(id)???通過(guò)元素 id 來(lái)查找元素
document.getElementsByTagName(name)?????通過(guò)標(biāo)簽名來(lái)查找元素
document.getElementsByClassName(name)???通過(guò)類(lèi)名來(lái)查找元素
注意：如果您需要查找匹配指定 CSS 選擇器（id、類(lèi)名、類(lèi)型、屬性、屬性值等等）的所有 HTML 元素，請(qǐng)使用 querySelectorAll() 方法，但是querySelectorAll() 不適用于 Internet Explorer 8 及其更早版本。
2、改變HTML元素
element.innerHTML = new html content??改變?cè)氐?inner HTML
element.attribute = new value???改變 HTML 元素的屬性值
element.setAttribute(attribute, value) 改變 HTML 元素的屬性值
element.style.property = new style???改變 HTML 元素的樣式
3、添加和刪除元素
document.createElement(element)???創(chuàng)建 HTML 元素
document.removeChild(element)?????刪除 HTML 元素
document.appendChild(element)?????添加 HTML 元素
document.replaceChild(element) 替換 HTML 元素
document.write(text)???寫(xiě)入 HTML 輸出流
4、添加事件處理
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件處理程序
document.getElementById("myBtn").addEventListener("click", function(){code}) 事件監(jiān)聽(tīng)器，addEventListener() 方法。
5、查找HTML對(duì)象
document.anchors 返回?fù)碛?name 屬性的所有 <a> 元素。?????
document.applets 返回所有 <applet> 元素（HTML5 不建議使用）
document.baseURI?????返回文檔的絕對(duì)基準(zhǔn) URI
document.body???返回 <body> 元素
document.cookie?返回文檔的 cookie
document.doctype?????返回文檔的 doctype
document.documentElement????返回 <html> 元素
document.documentMode 返回瀏覽器使用的模式
document.documentURI????返回文檔的 URI
document.domain 返回文檔服務(wù)器的域名
document.domConfig?廢棄。返回 DOM 配置
document.embeds?????返回所有 <embed> 元素
document.forms??返回所有 <form> 元素
document.head???返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation?返回 DOM 實(shí)現(xiàn)
document.inputEncoding???返回文檔的編碼（字符集）
document.lastModified 返回文檔更新的日期和時(shí)間
document.links????返回?fù)碛?href 屬性的所有 <area> 和 <a> 元素
document.readyState??返回文檔的（加載）狀態(tài)
document.referrer 返回引用的 URI（鏈接文檔）
document.scripts?返回所有 <script> 元素
document.strictErrorChecking???返回是否強(qiáng)制執(zhí)行錯(cuò)誤檢查
document.title?????返回 <title> 元素
document.URL?????返回文檔的完整 URL
9.4 動(dòng)畫(huà)
原理：JavaScript 動(dòng)畫(huà)是通過(guò)對(duì)元素樣式進(jìn)行漸進(jìn)式變化編程完成的。這種變化通過(guò)一個(gè)計(jì)數(shù)器來(lái)調(diào)用。當(dāng)計(jì)數(shù)器間隔很小時(shí)，動(dòng)畫(huà)看上去就是連貫的。
主要實(shí)現(xiàn)步驟：
1、?用document對(duì)象獲取到要執(zhí)行動(dòng)畫(huà)的元素，比如id=“”animation，則先 var item=document. getElementById(“animation”);
2、?設(shè)置定時(shí)器setInterval(代碼，秒)。setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。
3、?在執(zhí)行函數(shù)中利用document對(duì)象操作HTML元素，動(dòng)態(tài)改變HTML元素的樣式，從而達(dá)到動(dòng)畫(huà)的效果。
示例代碼：
function myMove() {
???var elem =?document.getElementById("animate"); ?//獲取元素
???var pos = 0;
???var id = setInterval(frame, 5);???????????????????//設(shè)置定時(shí)器
????function frame() {
???????if (pos ==?350) {
????????????clearInterval(id);????????//結(jié)束定時(shí)器
???????} else {
????????????pos++; ????????????????????//計(jì)時(shí)
????????????elem.style.top = pos + 'px'; ????//改變?cè)氐母叨任恢?/p>
????????????elem.style.left = pos + 'px'; ????//改變?cè)氐木嘧笪恢?/p>
???????}
????}
}
10、Browser DOM操作
10.1 什么是Browser DOM
瀏覽器對(duì)象模型（Browser Object Model (BOM)）
存在瀏覽器對(duì)象模型（BOM）的官方標(biāo)準(zhǔn)。
現(xiàn)代的瀏覽器已經(jīng)（幾乎）實(shí)現(xiàn)了 JavaScript 交互相同的方法和屬性，因此它經(jīng)常作為 BOM 的方法和屬性被提到。
10.2 常用的屬性和方法
window.document.getElementById("header"); 等同于document.getElementById("header");
瀏覽器窗口尺寸
window.innerHeight - 瀏覽器窗口的內(nèi)高度（以像素計(jì)）
window.innerWidth - 瀏覽器窗口的內(nèi)寬度（以像素計(jì)）
瀏覽器窗口（瀏覽器視口）不包括工具欄和滾動(dòng)條
document.documentElement.clientHeight
document.documentElement.clientWidth
document.body.clientHeight
document.body.clientWidth
其它窗口方法：
window.open() - 打開(kāi)新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() -移動(dòng)當(dāng)前窗口
window.resizeTo() -重新調(diào)整當(dāng)前窗口
screen.width 屬性返回以像素計(jì)的訪問(wèn)者屏幕寬度。
screen.height 屬性返回以像素計(jì)的訪問(wèn)者屏幕的高度。
screen.availWidth 屬性返回訪問(wèn)者屏幕的寬度，以像素計(jì)，減去諸如窗口工具條之類(lèi)的界面特征。
screen.availHeight 屬性返回訪問(wèn)者屏幕的高度，以像素計(jì)，減去諸如窗口工具條之類(lèi)的界面特征。
screen.colorDepth
screen.pixelDepth
瀏覽器信息和路由：
window.location.href 返回當(dāng)前頁(yè)面的 href (URL)
window.location.hostname 返回 web 主機(jī)的域名
window.location.pathname 返回當(dāng)前頁(yè)面的路徑或文件名
window.location.protocol 返回使用的 web 協(xié)議（http: 或 https:）
window.location.assign 加載新文檔
history.back() - 等同于在瀏覽器點(diǎn)擊后退按鈕
history.forward() - 等同于在瀏覽器中點(diǎn)擊前進(jìn)按鈕
navigator: window.navigator 對(duì)象包含有關(guān)訪問(wèn)者的信息
10.3 彈出框：警告框、確認(rèn)框和提示框:
1、 警告窗window.alert()，alert(文字);當(dāng)警告框彈出時(shí)，用戶將需要單擊“確定”來(lái)繼續(xù)。
2、 確認(rèn)框window.confirm()，confirm(文字);當(dāng)確認(rèn)框彈出時(shí)，用戶將不得不單擊“確定”或“取消”來(lái)繼續(xù)進(jìn)行。如果用戶單擊“確定”，該框返回 true。如果用戶單擊“取消”，該框返回 false。
3、 提示框window.prompt()，prompt();當(dāng)提示框彈出時(shí)，用戶將不得不輸入值后單擊“確定”或點(diǎn)擊“取消”來(lái)繼續(xù)進(jìn)行。如果用戶單擊“確定”，該框返回輸入值。如果用戶單擊“取消”，該框返回 NULL。
10.4 Timing事件
window 對(duì)象允許以指定的時(shí)間間隔執(zhí)行代碼。
這些時(shí)間間隔稱(chēng)為定時(shí)事件。
通過(guò) JavaScript 使用的有兩個(gè)關(guān)鍵的方法：
setTimeout(function, milliseconds) 在等待指定的毫秒數(shù)后執(zhí)行函數(shù)。
setInterval(function, milliseconds) 等同于 setTimeout()，但持續(xù)重復(fù)執(zhí)行該函數(shù)。
setTimeout() 和 setInterval()都屬于 HTML DOM Window 對(duì)象的方法
10.5 cookie和本地存儲(chǔ)
Cookie 是在您的計(jì)算機(jī)上存儲(chǔ)在小的文本文件中的數(shù)據(jù)。
11、表單與Ajax
HTML 表單驗(yàn)證能夠通過(guò) JavaScript 來(lái)完成。
如果某個(gè)表單字段（fname）是空的，那么該函數(shù)會(huì)發(fā)出一條警告消息，并返回 false，以防止表單被提交出去。表單提交通常有兩種方式，同步提交和異步提交。
1、 同步提交，則是直接通過(guò)html的form提交或者在js代碼中觸發(fā)submit()提交方法。同步提交，頁(yè)面會(huì)直接跳轉(zhuǎn)到請(qǐng)求地址進(jìn)行重新加載。
2、 異步提交，常用的方式就是ajax
11.1 什么是Ajax
ajax：Asynchronous JavaScript And XML，它并非編程語(yǔ)言。它能做的事情：
不刷新頁(yè)面更新網(wǎng)頁(yè)
在頁(yè)面加載后從服務(wù)器請(qǐng)求數(shù)據(jù)
在頁(yè)面加載后從服務(wù)器接收數(shù)據(jù)
在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)
它僅僅是組合了瀏覽器內(nèi)建的 XMLHttpRequest 對(duì)象（從 web 服務(wù)器請(qǐng)求數(shù)據(jù)）；JavaScript 和 HTML DOM（顯示或使用數(shù)據(jù)）。Ajax 應(yīng)用程序可能使用 XML 來(lái)傳輸數(shù)據(jù)，但將數(shù)據(jù)作為純文本或 JSON 文本傳輸也同樣常見(jiàn)。
Ajax 允許通過(guò)與場(chǎng)景后面的 Web 服務(wù)器交換數(shù)據(jù)來(lái)異步更新網(wǎng)頁(yè)。這意味著可以更新網(wǎng)頁(yè)的部分，而不需要重新加載整個(gè)頁(yè)面。
11.2 基本知識(shí)
Ajax 的核心是 XMLHttpRequest 對(duì)象。所有現(xiàn)代瀏覽器都支持 XMLHttpRequest 對(duì)象。XMLHttpRequest 對(duì)象用于同幕后服務(wù)器交換數(shù)據(jù)。這意味著可以更新網(wǎng)頁(yè)的部分，而不需要重新加載整個(gè)頁(yè)面。
XMLHttpRequest 對(duì)象向服務(wù)器發(fā)送請(qǐng)求：
1、open(method, url, async)?????建立請(qǐng)求
method：請(qǐng)求的類(lèi)型：GET 還是 POST
url：服務(wù)器（文件）位置
async：true（異步）或 false（同步）
2、send()?????向服務(wù)器發(fā)送請(qǐng)求（用于 GET）
3、send(string)????向服務(wù)器發(fā)送請(qǐng)求（用于 POST）
服務(wù)器響應(yīng)：
1、onreadystatechange?????定義了當(dāng) readyState 屬性發(fā)生改變時(shí)所調(diào)用的函數(shù)。
2、readyState?????保存了 XMLHttpRequest 的狀態(tài)。
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 正在處理請(qǐng)求
4: 請(qǐng)求已完成且響應(yīng)已就緒
3、status??????響應(yīng)狀態(tài)
200: "OK"
403: "Forbidden"
404: "Page not found"
statusText?????返回狀態(tài)文本（例如 "OK" 或 "Not Found"）
12、JSON
JSON: JavaScript Object Notation（JavaScript 對(duì)象標(biāo)記法）。
JSON 是一種存儲(chǔ)和交換數(shù)據(jù)的語(yǔ)法。
JSON 是通過(guò) JavaScript 對(duì)象標(biāo)記法書(shū)寫(xiě)的文本。
例如：
{"person":[????//數(shù)組
???{ "firstName":"Bill", "lastName":"Gates" },
???{ "firstName":"Steve", "lastName":"Jobs" },
], ?
“str”:’test’,?//字符串
”num”:1627, // 數(shù)字
”float_num”:1.23,
?“other”:{??????//對(duì)象
??????“key”:”values”,
??????“bool”:false,?????????//布爾值
??????“none”:Null??????????//空值
?}
}
1、JSON 的常規(guī)用途是同 web 服務(wù)器進(jìn)行數(shù)據(jù)傳輸。在從 web 服務(wù)器接收數(shù)據(jù)時(shí)，數(shù)據(jù)永遠(yuǎn)是字符串。通過(guò) JSON.parse() 解析數(shù)據(jù)，這些數(shù)據(jù)會(huì)成為 JavaScript 對(duì)象。
2、JSON 的常規(guī)用途是同 web 服務(wù)器進(jìn)行數(shù)據(jù)交換。在向 web 服務(wù)器發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)必須是字符串。通過(guò)JSON.stringify() 把 JavaScript 對(duì)象轉(zhuǎn)換為字符串。
13、Jquery
jQuery 是JavaScript的一個(gè)庫(kù)，旨在處理瀏覽器不兼容性并簡(jiǎn)化 HTML DOM 操作、事件處理、動(dòng)畫(huà)和 Ajax。
JQuery常用操作：
$("div").click(function(){});???//點(diǎn)擊
$("#a").width("300");?//寬度設(shè)置
$(".a").height("300");?//高度設(shè)置
$("input[name=’a’]").css("display",”none”);?//樣式設(shè)置
$(".a").css({?color:?"red",?background:?"blue"?});//以名值對(duì)的形式設(shè)定樣式?
$("#a").addClass("select");?//為元素增加名稱(chēng)為select的class?
$("#a").removeClass("select");?//刪除元素名稱(chēng)為select的class?
$("#a").toggleClass("select");?//如果存在（不存在）就刪除（添加）名稱(chēng)為select的class
$(“#a”).attr(“data-id”);?//屬性值獲取
//表單操作
$("input").val(); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設(shè)為test
$("input").val(""); //將表單輸入框的value清空
$(“#formId”). serialize() 方法通過(guò)序列化表單值，創(chuàng)建 URL 編碼文本字符串
$(“#formId”). serializeArray() 通過(guò)序列化表單值來(lái)創(chuàng)建對(duì)象數(shù)組（名稱(chēng)和值
$.ajax({?????????//ajax請(qǐng)求
?dataType: "json",
?url: url,
?method:”GET” //get post
?data: data,???????//json數(shù)據(jù)傳參
?success: success??????//成功響應(yīng)函數(shù)
});
