為什么學(xué)習(xí)JavaScript？

????JavaScript在網(wǎng)頁(yè)中占據(jù)非常重要的位置，可以實(shí)現(xiàn)驗(yàn)證表單曲秉、制作特效等功能

????1、客戶端表單驗(yàn)證

????????????在登錄注冊(cè)時(shí)歧譬，如果某項(xiàng)信息格式輸入錯(cuò)誤，或沒有輸入內(nèi)容搏存，表單頁(yè)面將及時(shí)給出錯(cuò)誤提示瑰步，這減輕了服務(wù)器端的壓力，這是JavaScript最常用的場(chǎng)合

? ? ?2璧眠、頁(yè)面動(dòng)態(tài)效果

????????????在JavaScript中缩焦，可以編寫響應(yīng)鼠標(biāo)單擊等事件代碼，創(chuàng)建動(dòng)態(tài)頁(yè)面特效责静，從而高效控制頁(yè)面的內(nèi)容袁滥。例如：層的切換特效、級(jí)聯(lián)菜單特效等灾螃，它們可以在有限的頁(yè)面空間里展現(xiàn)更多的內(nèi)容题翻，增加客戶端的體驗(yàn)，從而使我們懂得網(wǎng)站更加有動(dòng)感腰鬼、有魅力嵌赠、吸引更多的瀏覽者

什么是JavaScript

? ? JavaScript是一種描述性語(yǔ)言塑荒，也是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（Event Driven）的，并具有安全性能的腳本語(yǔ)言姜挺，JavaScript應(yīng)用程序都要下載到瀏覽器的客戶端執(zhí)行齿税，從而減輕了服務(wù)器端的負(fù)擔(dān)

特點(diǎn)：

????????JavaScript主要用于在HTML頁(yè)面中添加交互行為

????????JavaScript是一種腳本語(yǔ)言，語(yǔ)法和Java類似

????????JavaScript一般用來(lái)編寫客戶端的腳本

????????JavaScript是一種解釋性語(yǔ)言炊豪，編執(zhí)行邊解釋

JavaScript的組成

? ? ? ?1凌箕、ECMAScript標(biāo)準(zhǔn)

????????????????ECMAScript是一種開發(fā)的、被國(guó)際上廣為接受的词渤、標(biāo)準(zhǔn)的腳本語(yǔ)言規(guī)范牵舱。它不與任何具體的瀏覽器綁定

????????????????ECMAScript主要描述了一下內(nèi)容：

????????????????????????語(yǔ)法

????????????????????????變量和數(shù)據(jù)類型

????????????????????????運(yùn)算符

????????????????????????邏輯控制語(yǔ)句

????????????????????????關(guān)鍵字、保留字

????????????????????????對(duì)象

????????????????ECMAScript是一個(gè)描述掖肋，規(guī)定了腳本語(yǔ)言的所有屬性仆葡、方法和對(duì)象的標(biāo)準(zhǔn)，因此在使用Web客戶端編寫腳本語(yǔ)言編碼時(shí)一定要遵循ECMAScript標(biāo)準(zhǔn)

????????2志笼、瀏覽器對(duì)象模型

????????????????瀏覽器對(duì)象模型（Browser Object Model沿盅，BOM），提供了獨(dú)立于內(nèi)容與瀏覽器窗口進(jìn)行交互的對(duì)象纫溃，使用瀏覽器對(duì)象模型可以實(shí)現(xiàn)與HTM的交互腰涧，例如：網(wǎng)上常見的彈出窗口、前進(jìn)后退等功能都是瀏覽器對(duì)象控制的

????????3紊浩、文檔對(duì)象模型

????????????????文檔對(duì)象模型（Document Object Model窖铡，DOM），是HTML文檔對(duì)象模型（HTML DOM）定義的一套標(biāo)準(zhǔn)方法坊谁，用來(lái)訪問(wèn)和操作HTML文檔费彼，如：網(wǎng)上商城常見的隨鼠標(biāo)移動(dòng)顯示大的圖片、彈出小提示等都是文檔對(duì)象的功能

JavaScript的基本結(jié)構(gòu)

? ??????????通常口芍，JavaScript代碼是用<script>標(biāo)簽嵌入HTML文檔中的箍铲。如果需要將多條JavaScript代碼嵌入一個(gè)文檔中，只需要每條JavaScript代碼都封裝在<script>標(biāo)簽中即可鬓椭。瀏覽器將檢查JavaScript語(yǔ)句的語(yǔ)法颠猴，如果有任何錯(cuò)誤，則會(huì)警告框中顯示小染；如果沒有錯(cuò)誤翘瓮，則瀏覽器將編譯并執(zhí)行語(yǔ)句

????????????1、JavaScript的基本結(jié)構(gòu)

????????????????????<script type="text/Javascript">

????????????????????????JavaScript語(yǔ)句

????????????????????</script>

????????????其中type是<script>標(biāo)簽得屬性裤翩，用于指定文本使用的語(yǔ)言類別為text/JavaScript

? ??????????????document.write()用來(lái)向頁(yè)面輸出可以包含HTML標(biāo)簽得內(nèi)容

? ? ?

????????????2资盅、JavaScript的執(zhí)行原理

????????????????????在JavaScript的執(zhí)行過(guò)程中，瀏覽器客戶端與應(yīng)用服務(wù)器端采用請(qǐng)求/響應(yīng)模式進(jìn)行交互，如圖所示：

????????處理過(guò)程

????????????（1）律姨、瀏覽器客戶端向服務(wù)器發(fā)送請(qǐng)求：一個(gè)用戶在瀏覽器的地址欄中輸入要訪問(wèn)的頁(yè)面

? ? ? ? ? ? （2）振峻、數(shù)據(jù)處理：服務(wù)器端將某個(gè)包含JavaScript的頁(yè)面進(jìn)行處理

????????????（3）、發(fā)送響應(yīng)：服務(wù)器端將含有JavaScript的HTML文件處理頁(yè)面發(fā)送到瀏覽器客戶端择份，然后由瀏覽器客戶端從上至下逐條解析HTML標(biāo)簽和JavaScript扣孟，并將頁(yè)面效果呈現(xiàn)給用戶

? ? ? ? ? ? （4）、包含JavaScript的頁(yè)面只要下載一次即可荣赶，這樣能減少不必要的網(wǎng)絡(luò)通信

????????????（5）凤价、JavaScript程序由瀏覽器客戶端執(zhí)行，而不是有服務(wù)器端執(zhí)行的因此能減輕服務(wù)器端的壓力

在網(wǎng)頁(yè)中引用JavaScript的方式

? ??????????嵌入網(wǎng)頁(yè)時(shí)有以下三種方式：

????????????????內(nèi)部JavaScript文件

????????????????使用外部JavaScript文件

????????????????直接在HTML標(biāo)簽中

????????????1拔创、內(nèi)部JavaScript文件

????????????????????直接使用script標(biāo)簽將JavaScript代碼加入HTML文檔中

????????????2利诺、使用外部JavaScript文件

????????????????注意：外部文件不能包含<script>標(biāo)簽，通常將擴(kuò)展名為.js的文件放到網(wǎng)站目錄中單獨(dú)存放腳本的子目錄中剩燥，這樣便于維護(hù)和管理

????????????3慢逾、直接在HTML標(biāo)簽中

????????????????????例如：

????????三種方式的應(yīng)用場(chǎng)合：

????????????????內(nèi)部JavaScript文件適用于JavaScript特效代碼量少，僅用于單個(gè)頁(yè)面

????????????????外部js文件則適用于代碼較多灭红，重復(fù)應(yīng)用于多個(gè)頁(yè)面

????????????????直接在標(biāo)簽中寫JavaScript則適用于極少代碼侣滩，僅用于當(dāng)前標(biāo)簽，但是這種方式增加了HTML代碼

變量的聲明和賦值

????????????JavaScript是一種弱類型語(yǔ)言变擒，沒有明確的數(shù)據(jù)類型君珠，也就是說(shuō)在聲明變量時(shí)，不需要指定變量的類型娇斑，變量的類型由賦給變量的值決定

????????????語(yǔ)法：var 合法的變量名策添；

????????????變量命名規(guī)則：可以由數(shù)字、字母毫缆、下劃線和”$“符號(hào)組成唯竹，但首字母不能是數(shù)字，并且不能使用關(guān)鍵字命名苦丁；可以在聲明變量時(shí)賦值浸颓，大小寫不同的變量名表示不同的變量

????????????規(guī)范：

????????????????千萬(wàn)要注意JavaScript區(qū)分大小寫，特別是變量的命名芬骄、語(yǔ)句關(guān)鍵字等猾愿，這種錯(cuò)誤有時(shí)很難查找

????????????????變量可以不經(jīng)過(guò)聲明直接使用鹦聪，但這種方法很容易出錯(cuò)账阻，也很難查找排錯(cuò)，因此不推薦使用泽本，在使用變量之前淘太，請(qǐng)先聲明后使用

數(shù)據(jù)類型

? ? ? ? 常用的基本數(shù)據(jù)類型：

????????????????undefined（未定義類型）

????????????????null（空類型）

????????????????number（數(shù)值類型）

????????????????String（字符串類型）

????????????????boolean（布爾類型）

????????1、typeof

????????????????用來(lái)判斷一個(gè)值或變量究竟屬于那種數(shù)據(jù)類型

????????????????語(yǔ)法：typeof（變量賦值）

????????????????返回結(jié)果：

????????????????????undefined：如果變量是undefined類型的，則返回undefined類型的結(jié)果

? ? ? ? ? ? ? ? ? ? number：如果變量時(shí)number類型的蒲牧，則返回number類型的結(jié)果

????????????????????String：如果變量是String類型的撇贺，則返回String類型結(jié)果

? ? ? ? ? ? ? ? ? ? ?boolean：如果變量是boolean類型的，則返回boolean類型的結(jié)果

? ? ? ? ? ? ? ? ? ? ?object：如果變量是null類型的冰抢，或者變量是一種引用類型松嘶，如對(duì)象、函數(shù)挎扰、數(shù)組翠订，則返回object類型的結(jié)果

????????????????2、undefined類型

????????????????????????????undefined類型只有一個(gè)值遵倦，即undefined尽超。當(dāng)聲明的變量未初始化時(shí)，該變量的默認(rèn)值是undefined

????????3梧躺、null類型

????????????????????只有一個(gè)值的類型是null似谁，是個(gè)表示“什么都沒有”的占位符，可以用來(lái)檢測(cè)某個(gè)變量是否被賦值

????????4掠哥、number類型

????????????????????既可以表示32位的整數(shù)巩踏，又可以表示64位的浮點(diǎn)數(shù)，整數(shù)也可以表示為八進(jìn)制或十六進(jìn)制龙致，八進(jìn)制首數(shù)組必須是0蛀缝，后面的數(shù)組任意（0~7），十六進(jìn)制首字母必須是0目代，后面任意（0~9和A~F）屈梁，NaN（Not a Number）表表示非數(shù)

????????5、String類型

????????????????在JavaScript中榛了，字符串是一組被引號(hào)（單引號(hào)或雙引號(hào)）括起來(lái)的文本在讶，不對(duì)字符或字符串加以區(qū)別

????????????????JavaScript語(yǔ)言中的String也是一種對(duì)象，length表示字符串的長(zhǎng)度（包括空格）

????????????????語(yǔ)法：字符串對(duì)象.length;

????????????????使用字符串對(duì)象的語(yǔ)法：字符串對(duì)象.方法名（）霜大；

????????????????toLowerCase()? 把字符串轉(zhuǎn)化為小寫

? ? ? ? ? ? ? ? toUpperCase() 把字符串轉(zhuǎn)化為大寫

????????6构哺、boolean類型

????????????????稱為：布爾類型數(shù)據(jù)或邏輯型數(shù)據(jù)，只有兩個(gè)值：True和False

數(shù)組

???????? JavaScript中的數(shù)組也是具有相同數(shù)據(jù)類型的一個(gè)或多個(gè)值的集合战坤。數(shù)組用一個(gè)名稱存儲(chǔ)一系列的值曙强，用下標(biāo)區(qū)分?jǐn)?shù)組中的每個(gè)值，數(shù)組下標(biāo)從0開始

????????1途茫、創(chuàng)建數(shù)組語(yǔ)法：var 數(shù)組名稱=new Array(size)碟嘴；

????????????其中，new是用來(lái)創(chuàng)建數(shù)組的關(guān)鍵字囊卜，Array表示數(shù)組的關(guān)鍵字娜扇，而size表示數(shù)組中可存放的元素總數(shù)

????????2错沃、為數(shù)組元素賦值語(yǔ)法：var fruit new Array("apple"，"orange"雀瓢，"peach"枢析，“banana”);

? ? ? ? ? ? ? 或者：var fruit =[“apple”，“orange”刃麸，“peach”醒叁，“banana”]；

????????3泊业、訪問(wèn)數(shù)組元素可以通過(guò)數(shù)字的名稱和數(shù)組下標(biāo)直接訪問(wèn)數(shù)組的元素辐益，訪問(wèn)數(shù)組的表示形式：數(shù)組名[下標(biāo)]；

????????4脱吱、數(shù)組的常用屬性和方法 ? ??

????????????????join的使用方法：join（分隔符）智政；

運(yùn)算符號(hào)

? ??????

????????????????==表示等于，===表示恒等于箱蝠，续捂！==表示不恒等于，都是用于比較宦搬，但是==用于一般比較牙瓢，===用于嚴(yán)格比較，==在比較時(shí)可以轉(zhuǎn)換數(shù)據(jù)類型间校，===嚴(yán)格比較矾克，只要數(shù)據(jù)類型不匹配就返回false

邏輯控制語(yǔ)句

? ? ? ??1、條件語(yǔ)句

????????????????（1）憔足、if結(jié)構(gòu)

????????????????????????語(yǔ)法：if（表達(dá)式）{

????????????????????????????? //JavaScript語(yǔ)句1胁附；

????????????????????? ? }else{

????????????????????????? ? //JavaScript語(yǔ)句2；

????????????????????? ? }

????????????????（2）滓彰、switch語(yǔ)句

????????????????????????語(yǔ)法：switch（表達(dá)式）{

????????????????????????????????????????case 值1：

????????????????????????????????????????????????//JavaScript語(yǔ)句1控妻；

????????????????????????????????????????????????break；

????????????????????????????????????????? case 值2：

????????????????????????????????????????????????//JavaScript語(yǔ)句2揭绑；

????????????????????????????????????????????????break弓候；

????????????????????????????????????????? ? case 值3：

????????????????????????????????????????????????//JavaScript語(yǔ)句3；

????????????????????????????????????????????????break他匪；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? default ：

????????????????????????????????????????????????//JavaScript語(yǔ)句n菇存；

??????????????????????????????????????????????????break;

????????????????????????????????? ? }

????????????2、循環(huán)結(jié)構(gòu)

????????????????????（1）邦蜜、for循環(huán)語(yǔ)句

????????????????????????????語(yǔ)法：for（初始化依鸥；條件；增減量）{

????????????????????????????????????????????//JavaScript語(yǔ)句畦徘；

????????????????????????????????????? }

????????????????????（2）毕籽、while循環(huán)語(yǔ)句

????????????????????????????語(yǔ)法：while（條件）{

????????????????????????????????????????????//JavaScript語(yǔ)句；

????????????????????????????????????? ? }

????????????????????（3）井辆、do-while循環(huán)語(yǔ)句

????????????????????????????????????語(yǔ)法：do{

????????????????????????????????????????????????????//JavaScript語(yǔ)句关筒；

????????????????????????????????????????????? }while（條件）；

? ? ? ? ? ? ? ? ? ? ? （4）杯缺、for-in循環(huán)語(yǔ)句

????????????????????????????????語(yǔ)法：for（變量 in 對(duì)象）{

????????????????????????????????? ? ? //JavaScript語(yǔ)句蒸播；

????????????????????????????? ? }

????????????????????????（5）、中斷循環(huán)

????????????????????????????????????break：可以立即退出整個(gè)循環(huán)

????????????????????????????????????continue：只是退出當(dāng)前的循環(huán)萍肆，根據(jù)判斷條件決定是否進(jìn)行下一次循環(huán)

注釋

? ? ? ? 單行注釋：//

????????多行注釋：/*.......*/

常用的輸入/輸出

? ? ????1袍榆、警告（alert）

????????????????alert（）方法會(huì)創(chuàng)建一個(gè)特殊的小對(duì)話框，該對(duì)話框帶有一串字符和一個(gè)“確定”按鈕

????????????????語(yǔ)法：alert（“提示信息”）塘揣；

? ? ? ? ? ? ? ? ?警告對(duì)話框是當(dāng)前運(yùn)行的網(wǎng)頁(yè)彈出的包雀，在對(duì)該對(duì)話框做出處理前，當(dāng)前網(wǎng)頁(yè)將不可用亲铡，后面的代碼也不會(huì)被執(zhí)行才写，只有對(duì)警告對(duì)話框進(jìn)行處理后（單擊“確定”按鈕或直接關(guān)閉），當(dāng)前網(wǎng)頁(yè)才會(huì)繼續(xù)顯示后面的內(nèi)容

????????????2奖蔓、提示（prompt）

????????????????prompt（）方法會(huì)彈出一個(gè)提示對(duì)話框赞草，等待用戶輸入一行數(shù)據(jù)

????????????????語(yǔ)法：prompt（“提示信息”，“輸入框的默認(rèn)信息”）吆鹤；

? ? ? ? ? ? ? ? ?prompt（）方法的第一個(gè)參數(shù)值顯示在對(duì)話框上厨疙，通常是一些提示信息；第二個(gè)參數(shù)出現(xiàn)在用戶輸入的文本框疑务，且被選中沾凄，作為默認(rèn)值使用。如果省略第二個(gè)參數(shù)知允，則提示對(duì)話框的輸入文本框中會(huì)出現(xiàn)“underfined”搭独，可以將第二個(gè)參數(shù)的值設(shè)置為空置字符串

語(yǔ)法約定

? ? ? ? 1、大小寫區(qū)分

????????????????JavaScript的關(guān)鍵字永遠(yuǎn)是小寫的

????????????????內(nèi)置對(duì)象廊镜，如Math和Date是以大寫字符開頭的

????????????????對(duì)象的名稱通常是小寫

????????2牙肝、變量、對(duì)象和函數(shù)的名稱

????????????????與Java的命名規(guī)范類似嗤朴，當(dāng)聲明使用變量配椭、對(duì)象或函數(shù)時(shí)，名稱可以包括大寫字母雹姊、小寫字母股缸、數(shù)字、下劃線和美元符號(hào)（$）吱雏，但必須以字母敦姻、下劃線或美元符號(hào)（$）開頭

? ? ? ? 3瘾境、分號(hào)

????????????????JavaScript允許開發(fā)者自行決定是否以分號(hào)結(jié)束一行代碼，如果沒有分號(hào)镰惦，JavaScript就將行代碼的結(jié)尾看作該語(yǔ)句的結(jié)尾

Chrome開發(fā)人員工具

????????1迷守、語(yǔ)法錯(cuò)誤的排除

????????????????chrome的開發(fā)工具常用八個(gè)大模塊，主要功能如下：

????????????????Elements：用于查看和編輯當(dāng)前頁(yè)面中的HTML和CSS元素

????????????????Console：用于顯示腳本中所輸出的調(diào)試信息旺入，或運(yùn)行測(cè)試腳本等

????????????????Sources：用于查看和調(diào)試當(dāng)前頁(yè)面所加載的腳本的源文件

????????????????NetWork：用于查看HTTP請(qǐng)求的詳細(xì)信息兑凿，如請(qǐng)求頭、響應(yīng)頭及返回內(nèi)容等

????????????????TimeLine：用于查看腳本執(zhí)行時(shí)間茵瘾、頁(yè)面元素渲染時(shí)間等信息

????????????????Profiles：用于查看CPU執(zhí)行時(shí)間與內(nèi)存占用等信息

????????????????Resource：用于查看當(dāng)前頁(yè)面所請(qǐng)求的資源文件礼华，如HTML、CSS樣式文件等

????????????????Audits：用于優(yōu)化前段頁(yè)面拗秘，加速網(wǎng)頁(yè)加載速度等

????????2圣絮、邏輯錯(cuò)誤的排除

????????????????（1）、確定斷點(diǎn)得到位置

????????????????（2）雕旨、單步調(diào)試

????????????????（3）晨雳、修改錯(cuò)誤

常用系統(tǒng)函數(shù)

? ? ? ? 1、parseInt（）

????????????????parseInt()函數(shù)課解析一個(gè)字符串奸腺，并返回一個(gè)整數(shù)

????????????????語(yǔ)法：parseInt（“字符串”）餐禁；

????????????? ??2、parseFloat()

????????????????????parseFloat()函數(shù)可解析一個(gè)字符串突照，并返回一個(gè)浮點(diǎn)數(shù)

????????????????????語(yǔ)法：parseFloat(“字符串”)帮非；

????????????????????parseFloat()函數(shù)與parseInt（）函數(shù)的處理方式相似，從位置0開始查看每一個(gè)字符讹蘑，直到找到一個(gè)非有效的字符為止末盔，然后把該字符的字符串轉(zhuǎn)換為浮點(diǎn)數(shù)

????????????3、isNaN（）

????????????????????isNaN（）函數(shù)用于檢查其參數(shù)是否是非數(shù)字

????????????????????語(yǔ)法：isNaN（x）座慰；

????????????????????如果x是特殊的非數(shù)字值陨舱，則返回是true，否則返回false版仔；

自定義函數(shù)

? ? ? ?1游盲、定義函數(shù)

? ??????
????????????????????function是定義函數(shù)的關(guān)鍵字，必須有

????????????????????參數(shù)1蛮粮、參數(shù)2等是函數(shù)的參數(shù)益缎，本身沒有類型的檢查和限定，函數(shù)中的參數(shù)是可選的然想，分為有參函數(shù)和無(wú)參函數(shù)

? ? ? ? ? ? ? ? ? ? “{”和“}”定義了函數(shù)的開始和結(jié)束

????????????????????return語(yǔ)句用來(lái)規(guī)定函數(shù)返回的值

????????????2莺奔、調(diào)用函數(shù)

????????????????????要執(zhí)行一個(gè)函數(shù)，必須先調(diào)用這個(gè)函數(shù)变泄，當(dāng)調(diào)用這個(gè)函數(shù)時(shí)令哟，必須指定函數(shù)名及其后面的參數(shù)恼琼。函數(shù)的調(diào)用一般和元素的事件結(jié)合使用

????????????????????語(yǔ)法：事件名=“函數(shù)名（）”；

變量的作用域

? ??????????JavaScript根據(jù)作用范圍不同分為局部變量和全局變量

????????????局部變量是在函數(shù)內(nèi)聲明的變量屏富，晴竞，只有在該函數(shù)中且位于該變量之后的代碼中可以使用這個(gè)變量，如果在之后的其他函數(shù)中聲明了與這個(gè)局部變量同名的變量役听，則后聲明與這個(gè)局部變量毫無(wú)關(guān)系

????????????全局變量是在所有函數(shù)在外的腳本中聲明的變量，作用范圍是該變量定義后的所有語(yǔ)句表窘，包括其后定義的函數(shù)中的代碼