JavaScript+jQuery前端開發(fā)基礎教程課件

1、JavaScript+jQuery前端開發(fā)基礎教程講授：XXXXX第1頁，共324頁。1.1 JavaScript簡介JavaScript是一種輕量、解釋型腳本編程語言，并具有面向對象的特點。Internet Explorer、Firefox、Chrome等各種常用Web瀏覽器均支持JavaScript，其在Web應用中得到廣泛使用。嵌入到HTML文檔的JavaScript可稱為客戶端的JavaScript，這也是通常所說的JavaScript。當然，JavaScript并不局限于瀏覽器客戶端腳本編寫，也可用于服務器、PC客戶端和移動客戶端。第2頁，共324頁。1.1.1 JavaScript

2、版本JavaScript最初由NetScape公司的Brendan Eich研發(fā)，早期的名稱為LiveScript，并在Navigator瀏覽器中得到實現。NetScape公司與Sun公司合作后，對LiveScript進行了升級，并將其更名為JavaScript，也就是JavaScript 1.0。實現了JavaScript 1.0的Navigator 2.0幾乎壟斷了當時的瀏覽器市場。因為JavaScript 1.0的巨大成功，NetScape公司在Navigator 3.0中實現了JavaScript 1.1。Microsoft公司在進軍瀏覽器市場后，在Internet Explorer

3、3.0中實現了一個JavaScript的克隆版本，并命名為JScript。在Microsoft加入后，有3種不同的JavaScript版本同時存在：Navigator中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。這3種JavaScript的語法和特性并沒有統一。第3頁，共324頁。1997年，JavaScript 1.1作為一個草案提交給歐洲計算機制造商協會（ECMA）。其后，由來自NetScape、Sun、Microsoft、Borland和其他一些對腳本語言感興趣的程序員組成的TC39推出了JavaScript的“ECMA-262標準”，該標準將腳

4、本語言名稱定義為ECMAScript。該標準也被國際標準化組織及國際電工委員會（ISO/IEC）采納，作為各種瀏覽器的JavaScript語言標準規(guī)范。所以，JavaScript成了事實上的名稱，ECMAScript則代表了語言標準。第4頁，共324頁。1.1.2 JavaScript特點JavaScript具有下列主要特點。 解釋性：瀏覽器內置了JavaScript解釋器。在瀏覽器中打開HTML文檔時，其中的JavaScript代碼直接被解釋執(zhí)行。 支持對象：JavaScript可自定義對象，也可使用各種內置對象。 事件驅動：事件驅動使JavaScript能夠響應用戶操作，而不需要Web服務

5、器端處理。例如，當用戶輸入E-mail地址時，可在輸入事件處理函數中檢查輸入的合法性。 跨平臺：JavaScript腳本運行于JavaScript解釋器，配置了JavaScript解釋器的平臺均能執(zhí)行JavaScript腳本。 安全性：JavaScript不允許訪問本地磁盤，不能將數據寫入服務器，也不能對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息的瀏覽和動態(tài)展示。第5頁，共324頁。1.2 JavaScript編程工具JavaScript腳本需要嵌入到HTML文檔，所以可使用各種工具來編寫JavaScript。最簡單的工具是Windows的記事本，常用的集成Web開發(fā)工具有Visual S

6、tudio、Dreamweaver、Eclipse和IntelliJ IDEA等。集成開發(fā)工具通常具有語法高亮、自動完成、錯誤檢測等功能。第6頁，共324頁。1.2.1 下載安裝Visual Studio Community 2017演示第7頁，共324頁。1.2.2 使用Visual Studio演示第8頁，共324頁。1.2.3 使用瀏覽器開發(fā)人員工具目前的各種瀏覽器幾乎都提供了開發(fā)人員工具。在Firefox瀏覽器中，單擊工具欄最右側的“打開菜單”按鈕 ，打開菜單。在其中選擇“Web開發(fā)者”選項，打開Web開發(fā)者菜單，在菜單中列出了打開各種開發(fā)工具的命令。在菜單中選擇“Web控制臺”命令，

7、可打開瀏覽器開發(fā)工具窗口演示第9頁，共324頁。1.3 在HTML中使用JavaScript使用多種方法在HTML文件中插入JavaScript腳本。使用標記嵌入腳本。使用標記鏈接腳本。作為事件處理程序。作為URL。第10頁，共324頁。1.3.1 使用標記嵌入腳本 document.write(JavaScript歡迎你！) 第11頁，共324頁。1.3.2 使用標記鏈接腳本test1-3.js：document.write(使用外部JavaScript腳本) 第12頁，共324頁。.3.3 作為事件處理程序 第13頁，共324頁。1.3.4 作為URL在HTML文件中，使用“javascr

8、ipt”作為協議名稱，即可將JavaScript語句直接放在URL中。在訪問該URL時，JavaScript語句被執(zhí)行。 請單擊此鏈接 第14頁，共324頁。1.4 JavaScript基本語法1.4.1 大小寫敏感JavaScript對大小寫敏感，即嚴格區(qū)別關鍵字、變量、函數以及其他標識符的大小寫。 a = 100 A = 200 document.write(a) document.write() document.write(A ) 第15頁，共324頁。1.4.2 空格、換行符和制表符JavaScript會忽略代碼中不屬于字符串的空格、換行符和制表符。通常，空格、換行符和制表符用于幫助

9、代碼排版，方便閱讀程序。 a = 100 document. write(a) 第16頁，共324頁。1.4.3 語句結束符號JavaScript并不強制要求語句末尾必須使用分號（;）作為語句結束符號。JavaScript解釋器可自動識別語句結束。在某些時候，可使用分號將多條語句寫在一行。例如： a =100; document.write(a)第17頁，共324頁。1.4.4 注釋注釋是程序中的說明信息，幫助理解代碼。腳本執(zhí)行時，注釋內容被忽略。JavaScript提供兩種注釋。/：單行注釋，/之后的內容為注釋。/*/：多行注釋。在“/*”和“*/”之間的內容為注釋，可以占據多個語句行。第1

10、8頁，共324頁。1.4.5 標識符命名規(guī)則標識符用于命名JavaScript中的變量、函數或其他的對象JavaScript標識符命名規(guī)則與Java相同，第一個字符必須是字母、下劃線、美元符號或者漢字，之后可以是字母、數字、下劃線或者漢字。JavaScript使用Unicode字符串，所以允許使用包含中文在內的各國語言字符。第19頁，共324頁。JavaScript+jQuery前端開發(fā)基礎教程講授：XXXXX第20頁，共324頁。2.1 數據類型和變量2.1.1 數據類型JavaScript有3種基本數據類型：數值類型（number）、字符串類型（string）和布爾類型（boolean）第

11、21頁，共324頁。1數值型常量數值型常量可分為整型常量和實型常量。整數可使用十進制、八進制和十六進制表示。十進制是人們常用的計數進制，使用09之間的數碼表示數值。八進制整數以數字0開頭，使用07之間的數碼表示數值。例如，05、010、017。十六進制數以0 x或0X開頭，使用09、af、AF之間的數碼表示數值。例如，0 x5、0 x1F。第22頁，共324頁。實型常量指包含小數的數值。例如，2.25、1.7。如果整數部分為0，JavaScript允許省略小數點前面的0，如0.25可書寫為.25?？捎每茖W計數法表示實數，如1.25e-3、2.5E2。JavaScript有幾個特殊的數值。Inf

12、inity：Infinity表示正無窮大，-Infinity表示負無窮大。在數值除以0時就會出現無窮大。當一個值超出JavaScript表示范圍時，其結果就是無窮大。NaN：意思為“非數字”Not a Number，表示數值運算時出現了錯誤或者未知結果。例如，0除以0的結果為NaN。Number.MAX_VALUE：最大數值。Number.MIN_VALUE：最小數值。Number.NaN：NaN。Number.POSITIVE_INFINITY：Infinity。Number.NEGATIVE_INFINITY：-Infinity。第23頁，共324頁。2字符串常量字符串常量指用英文的雙引號

13、（）或單引號（）括起來的一串字符，如Java、15246。只能用單引號或雙引號作為字符串定界符，不能一個單引號一個雙引號。如果需要在字符串中包含單引號或雙引號，則應用另一個作為字符串定界符或者使用轉義字符。例如，I like JavaScript。字符串中可以使用轉義字符，轉義字符以“”開始。例如，“n”表示換行符，“r”表示回車符。表2-1列出了JavaScript中的轉義字符。第24頁，共324頁。轉義字符說明0空字符，ASCII碼為0b退格符n換行符r回車符t制表符雙引號單引號XXXXXX為3位八進制數，表示字符的ASCII碼，如101表示字符AxXXXX為2位十六進制數，表示字符的AS

14、CII碼，如x41表示字符AuXXXXXXXX為4位十六進制數，表示字符的Unicode碼，如u0041表示字符A第25頁，共324頁。3布爾型常量布爾型常量只有兩個：true和false（注意必須小寫）。4nullnull在JavaScript中表示空值、什么也沒有。5undifined用var聲明一個變量后，其默認值為undifined。例如：var adocument.write(a) /輸出結果為undifined第26頁，共324頁。2.1.2 變量1變量聲明JavaScript要求變量在使用之前必須進行聲明（也可稱為定義）。例如：var a,b該語句聲明了兩個變量a和b。可以在聲明

15、的同時給變量賦值。例如：var a =100,b=200等號“=”表示賦值。一種特殊情況是直接給一個未聲明的變量進行賦值。例如：ab = 100此時，JavaScript會隱式地對變量ab進行聲明。第27頁，共324頁。JavaScript允許重復聲明變量。例如：var a = 100var a = abc重復聲明時，如果沒有為變量賦值，則變量的值不變。例如：var a = 100var a /a的值還是100第28頁，共324頁。2變量的數據類型JavaScript是一種弱類型語言，即不強制變量的數據類型。存入變量的數據決定其數據類型?？梢越o一個變量賦不同類型的值。【例2-3】 給變量賦值不

16、同類型的數據，測試變量數據類型。第29頁，共324頁。2.2 運算符與表達式運算符用于完成運算，參與運算的數稱為操作數。由操作數和運算符組成的式子稱為表達式。JavaScript中的運算可分為算術運算、字符串運算、關系運算、邏輯運算、位運算和賦值運算。第30頁，共324頁。2.2.1 算術運算符算術運算符用于執(zhí)行加、減、乘和除等算術運算。表2-2列出了JavaScript中的算術運算符。運算符說明+變量自加。例如：+x、x+-變量自減。例如：-x、x-*乘法。例如：3*5/除法。例如：3/5%求余。例如：5%3。小數求余時，結果為小數+加法。例如：5+3-減法。例如：5+3第31頁，共324頁

17、。2.2.2 字符串運算符可使用加號（+）將兩個字符串連接成一個字符串。例如：x=I like + JavaScript/x中的值為I like JavaScript加號既可表示加法，也可表示字符串連接，所以在使用時應注意。例如：x=2+3+abc在該語句中，按照從左到右的順序，先計算2+3，再計算5+abc，結果為5abc。x=abc+2+3在該語句中，按照從左到右的順序，先計算abc+2，再計算abc2+3，結果為abc23。所以，當加號兩側都是數值時執(zhí)行加法運算。如果有一個操作數為字符串，加號執(zhí)行字符串連接。第32頁，共324頁。2.2.3 關系運算符關系運算符用于比較操作數大小關系，運

18、算結果為布爾值true或false。表2-3列出了JavaScript中的關系運算符。運算符說明大于=大于等于=小于等于=相等!=不等=絕對相等!=絕對不等第33頁，共324頁。2.2.4 邏輯運算符邏輯運算符用于對布爾型值執(zhí)行運算。運算符說明!取反，!true為false，!false為true&邏輯與，如 x & y，只有在x和y均為true時結果為true|邏輯或，如 x | y，只有在x和y均為false時結果才為false第34頁，共324頁。2.2.5 位運算符位運算符用于對操作數按二進制位執(zhí)行運算。2.2.5 運算符說明按位取反。例如：5結果為-6&按位與。例如：5 & -6結果

19、為0|按位或。例如：5 | -6結果為-1按位異或。例如：5 6結果為-1左移，末尾加0。例如：5右移，符號位不變。例如：-52（-5右移兩位）結果為-2算術右移，高位加0。例如：-52（-5右移兩位）結果為1073741822第35頁，共324頁。2.2.6 賦值運算符等號“=”是JavaScript中的賦值運算符號，用于將等號右側表達式的值賦值給左邊的變量。例如：x=5;y=x*x+2;等號可以和算術運算符以及位運算符組成復合賦值運算符，包括*=、/=、%=、+=、-=、=、=、&=、|=和=。復合賦值運算符首先計算變量和右側表達式的運算，然后將結果賦值給變量。例如：x+=5;/等價于x=

20、x+5賦值運算表達式可出現在任何表達式可出現的位置。例如：x=(y=5)+3; /等價于y=5;x=y+3;第36頁，共324頁。2.2.7 特殊運算符1條件運算符條件運算符基本格式如下。表達式1 ? 表達式2 : 表達式3若表達式1的值為true，則條件運算結果為表達式2的值，否則為表達式3的值。例如，下面的代碼輸出兩個數中的較大的值。var a =2, b = 3, cc = a b ? a : bdocument.write(c)/輸出3第37頁，共324頁。2逗號運算符逗號可以將多個表達式放到一起，整個表達式的值為其中最后一個表達式的值。例如：c = (a = 5, b = 6, a

21、+ b)document.write(c)/輸出11第38頁，共324頁。3數據類型運算符typeof運算符可返回操作數的數據類型，其基本格式如下。typeof 操作數例如：a = 100document.write(typeof a)/輸出number第39頁，共324頁。數據typeof數據類型名稱數值number字符串string邏輯值booleanundefinedundefinednullobject對象object函數function第40頁，共324頁。4new運算符new用于創(chuàng)建對象實例。例如：a = new Array() /創(chuàng)建一個數組對象第41頁，共324頁。2.2.8

22、運算符的優(yōu)先級運算符說明. ( )字段訪問、數組索引、函數調用和表達式分組+ - - ! new delete typeof void一元運算符創(chuàng)建對象、刪除對象、返回數據類型、未定義的值* / %相乘、相除、求余數+ - +相加、相減、字符串串聯 移位 = instanceof小于、小于或等于、大于、大于或等于、是否為特定類的實例= != = !=相等、不相等、全等，不全等&按位“與”按位“異或”|按位“或”&邏輯“與”|邏輯“或”?:條件運算=OP=賦值、賦值運算（如 += 和 &=）,多個計算第42頁，共324頁。2.2.9 表達式中的數據類型轉換運算符要求操作數具有相應的數據類型。算術

23、運算符要求操作數都是數值類型，字符串運算符要求操作數都是字符串，邏輯運算符要求操作數都是邏輯值。JavaScript在計算表達式時，會根據運算符自動轉換不匹配的數據類型。第43頁，共324頁。1其他類型轉換為數值其他類型轉換為數值時，遵循下面的規(guī)則。 字符串：若內容為數字，則轉換為對應數值，否則轉換為NaN。 邏輯值：true轉換為1，false轉換為0。 undefined：轉換為NaN。 null：轉換為0。 其他對象：轉換為NaN。第44頁，共324頁。2其他類型轉換為字符串其他類型轉換為字符串，遵循下面的規(guī)則。 數值：轉換為對應數字的字符串。 邏輯值：true轉換為true，false

24、轉換為false。 undefined：轉換為undefined。 null：轉換為null。 其他對象：若對象存在tostring()方法，則轉換為該方法返回值，否則轉換為undefined。第45頁，共324頁。3其他類型轉換為邏輯值其他類型轉換為邏輯值，遵循下面的規(guī)則。 字符串：長度為0的字符串轉換為false，否則轉換為true。 數值：值為0和NaN時，轉換為false，否則轉換為true。 undefined：轉換為false。 null：轉換為false。 其他對象：轉換為true。第46頁，共324頁。2.3 流程控制語句JavaScript流程控制語句包括if語句、switc

25、h語句、for循環(huán)、while循環(huán)、do/while循環(huán)、continue語句和break語句等。第47頁，共324頁。2.3.1 if語句1格式一if(條件表達式) 代碼段如果條件表達式計算結果為true，則執(zhí)行大括號中的代碼段，否則跳過if語句，執(zhí)行后繼代碼。如果代碼段中只有一條語句，可省略大括號。例如：if (x%2=0) document.write(x+是偶數);第48頁，共324頁。2格式二if(條件表達式) 代碼段1else 代碼段2如果條件表達式計算結果為true，則執(zhí)行代碼段1中的語句，否則執(zhí)行代碼2中的語句。第49頁，共324頁。3格式三if(條件1) 代碼段1else i

26、f(條件2) 代碼段2else if(條件n) 代碼段n else 代碼段n+1第50頁，共324頁。2.3.2 switch語句switch語句用于實現多分支選擇，其基本格式如下。switch(n) case 標號1: 代碼段1 break; case標號2: 代碼段2 break; case 標號n: 代碼段n break;default: 代碼段n+1第51頁，共324頁。2.3.3 for循環(huán)for循環(huán)基本語法格式如下。for(初始化;條件;增量) 循環(huán)體for循環(huán)執(zhí)行步驟如下。（1）執(zhí)行初始化。（2）計算條件，若結果為true，則執(zhí)行第（3）步，否則結束循環(huán)。（3）執(zhí)行循環(huán)體。（4）

27、執(zhí)行增量操作，轉到第（2）步。初始化操作可以放在for循環(huán)前面完成，增量部分可放在循環(huán)體內完成。條件表達式應有計算結果為false的機會，否則會構成“死循環(huán)”。第52頁，共324頁。2.3.4 while循環(huán)while循環(huán)基本語法格式如下。while(條件) 循環(huán)體while循環(huán)執(zhí)行時首先計算條件，若結果為true，則執(zhí)行循環(huán)體，否則結束循環(huán)。每次執(zhí)行完循環(huán)體后，重新計算條件。第53頁，共324頁。2.3.5 do/while循環(huán)do/while循環(huán)是while循環(huán)的變體，其基本格式如下。do 循環(huán)體while(條件);do/while循環(huán)與while循環(huán)類似，都是在條件為true時執(zhí)行循環(huán)體

28、。區(qū)別是while循環(huán)在一開始就測試條件，如果條件不為true，則一次也不執(zhí)行循環(huán)。do/while循環(huán)在執(zhí)行一次循環(huán)體后才測試條件，所以至少執(zhí)行一次循環(huán)。第54頁，共324頁。2.3.6 continue語句continue語句用于終止本次循環(huán)、開始下一次循環(huán)。continue語句只能放在循環(huán)內部，在其他位置使用會出錯。continue語句語法格式如下。continuecontinue 標號不帶標號的continue只作用于當前所在的循環(huán)，帶標號時作用于標號處的循環(huán)。當continue用在while或do/while循環(huán)中時，會轉移到條件計算，然后在條件為true時開始下一次循環(huán)，否則結束循

29、環(huán)。在for循環(huán)中的continue會轉移到增量部分，執(zhí)行增量操作后再計算循環(huán)條件。第55頁，共324頁。2.3.7 break語句break語句的第一種格式如下。break這種格式的break語句用于跳出循環(huán)或switch語句，并且必須放在循環(huán)或switch語句內部，否則會出錯。break語句的第二種格式如下。break 標號這種格式中的標號標示的必須是一個封閉語句或代碼塊，例如循環(huán)、if語句或大括號括起來的代碼塊等。帶標號的break語句用于跳出封閉語句或代碼塊，讓程序流程轉移到其后的語句。第56頁，共324頁。JavaScript+jQuery前端開發(fā)基礎教程講授：XXXXX第57頁，共

30、324頁。3.1 數組數組用于保存一組相關的數據。數組中的數據項稱為數組元素。數組元素在數組中的位置稱為下標。JavaScript數組下標最小值為0。數組元素用數組名和下標來表示。例如，假設a數組中有3個數組元素，這3個元素可表示為a0、a1和a2。JavaScript是弱類型的，所以數組中的各個數組元素可存放各種不同類型的數據，甚至可以是對象或數組。JavaScript不支持多維數組，但可通過在數組元素中保存數組來模擬多維數組。JavaScript的數組本質上也是一種對象。用typeof函數測試數組，其返回值為object。第58頁，共324頁。3.1.1 創(chuàng)建數組1使用直接量創(chuàng)建數組可將“

31、”和“”括起來的一組數據（用逗號分隔）賦值給變量來創(chuàng)建數組。例如：var a=/創(chuàng)建一個空數組var b=1,2,3/b0=1、b1=2、b2=3var c=abc,true,100/c0=abc、c1=true、c2=100數組元素也可以是一個數組。例如：var a=1,2,3,4,5/a00=1、a01=2、a10=3、a11=4、a12=5第59頁，共324頁。2使用Array構造函數創(chuàng)建數組數組對象的構造函數為Array()，可用它來創(chuàng)建數組。例如：var a=new Array()/創(chuàng)建一個空數組var b=new Array(1,true,abc)/b0=1、b1=true、b2=

32、 abc關鍵字new用于調用構造函數，創(chuàng)建新對象。一種特殊情況是，在用一個整數作為Array構造函數參數時，該整數作為數組的大小。例如：var a=new Array(3)/創(chuàng)建一個包含3個元素的數組第60頁，共324頁。3.1.2 使用數組1使用數組元素數組元素通過數組名和下標進行引用。一個數組元素等同一個變量?？梢詾閿到M元素賦值，或將其作用于各種運算。 var a = new Array(3) /創(chuàng)建數組 a0 = 1 /為數組元素賦值 a1 = 2 a2 = a1 + a0 /將數組元素用于計算 document.write(a0=) document.write(a0) /直接輸出數組

33、元素第61頁，共324頁。2關于多維數組JavaScript沒有多維數組的概念，但可在數組元素中保存一個數組。 var a = new Array(3) a0 = 1 a1 = new Array(1,2) /將數組存入數組元素 a2 = new Array(ab, cd, ef) document.write(a0= + a0 + 其數據類型為： + typeof a0) document.write(a1= + a1 + 其數據類型為： + typeof a1) document.write(a2= + a2 + 其數據類型為： + typeof a2) 第62頁，共324頁。3關于數組下

34、標范圍在JavaScript中，數組下標最小值為0，最大值為數組長度減1。JavaScript沒有數組下標超出范圍的概念。當使用了超出范圍的下標時，JavaScript不會報錯，引用的數組元素相當于未聲明的變量，其值為undefined。對超出范圍的下標引用的數組元素賦值時，會為數組添加數組元素。【例3-3】 使用下標超出范圍的數組元素。第63頁，共324頁。4數組賦值JavaScript允許將數組賦值給另一個變量。如果將一個存放了數組的變量賦值給另一個變量，則這兩個變量引用的是同一個數組。通過其中任意一個變量對數組進行操作，另一個變量立即反映其變化（因為引用的是同一個數組！）。將一個數組直接

35、賦值給變量時，會覆蓋其以前存放的數組。第64頁，共324頁。5添加、刪除數組元素JavaScript中的數組長度是不固定的，對不存在的數組元素賦值時，會將其添加到數組中。例如：var a = new Array() /創(chuàng)建一個空數組a0 = 1 /添加數組元素a1 = 2delete關鍵字可用于刪除數組元素。例如：delete a1 /刪除a1需注意的是，delete的實質是刪除變量所引用的內存單元。delete一個數組元素后，數組的大小不會改變。引用一個被刪除的數組元素，得到的值為undefined。第65頁，共324頁。6數組迭代數組通常結合循環(huán)實現數組迭代（或者叫數組元素遍歷）。因為數組

36、下標最小值為0，最大值為數組長度減1。一般情況下，對數組a用for循環(huán)“for (var i = 0; i a.length; i+)”即可實現數組迭代。如果數組元素已經被delete，或者通過賦值語句給一個下標較大的不存在的數組元素賦值，就會導致數組包含一些不存在的元素。使用for/in循環(huán)可忽略掉不存在的元素。第66頁，共324頁。3.1.3 數組的屬性1length數組的length屬性用于獲得數組長度。例如，a.length獲得數組a的長度。JavaScript數組的長度是可變的，通過為不存在的數組元素賦值的方式添加數組元素時，數組的長度也隨之變化。例如：var a = new Arr

37、ay(1, 2, 3)/創(chuàng)建數組，數組長度為3a5 = 10 /添加一個數組元素，數組長度變?yōu)?數組a的原長度為3，執(zhí)行“a5 = 10”后，其長度變?yōu)?。因為數組的長度始終為最后一個元素的下標加1。數組中沒有賦值的元素的值為undefined。數組長度為數組中元素的個數。因為數組元素下標從0開始，所以數組下標范圍為0長度-1。JavaScript允許修改length屬性。例如：a.length=5上面的語句將數組a的長度修改為5。如果修改后的長度小于原來長度，超出新長度的數組元素丟失。如果新長度超出原長度，增加的數組元素初始值為undefined。第67頁，共324頁。2prototype屬

38、性對象的prototype屬性用于為對象添加自定義的屬性或方法。為數組添加自定義屬性或方法的基本語法格式如下。A = value其中，name為自定義的屬性或方法名稱，value為屬性值表達式或者函數。自定義屬性和方法對當前頁面中的所有數組有效。第68頁，共324頁。3.1.4 數組的方法1連接數組join方法用于將數組中的所有元素連接成一個字符串，字符串中的各個數據默認用逗號分隔。也可為join方法指定一個字符串作為分隔符?；菊Z法格式為：a.join()/將數組a中的數據連接成逗號分隔的字符串a.join(x)/將數組a中的數據連接成變量x中的字符串分隔的字符串第69頁，共324頁。2逆轉

39、元素順序reverse方法將數組元素以相反的順序存放。基本語法格式如下。a.reverse()第70頁，共324頁。3數組排序sort方法用于對數組排序。默認情況下，數組元素按字母順序排序，數值會轉換為字符串進行排序?？梢詾閟ort方法提供一個排序函數作為參數，排序函數定義排序規(guī)則。排序函數有兩個參數，設為x和y。若需x排在y之前，則排序函數應返回一個小于0的值。若需x排在y之后，則排序函數應返回一個大于0的值。若兩個參數的位置無關緊要，比較函數返回0。第71頁，共324頁。4子數組slice方法用于從數組中取子數組，其基本語法格式如下。數組名.slice(x,y)從數組中返回下標范圍為xy-

40、1的子數組。如果省略y，則返回從x開始到最后的全部數組元素。如果x或y為負數，則作為和最后一個元素的相對位置。第72頁，共324頁。5添加、刪除數組元素splice方法用于添加或刪除數組元素，其基本語法格式如下。數組名.splice(m,n,x1,x2,)其中，m為開始元素下標，n為從數組中刪除的元素個數。x1、x2等是要添加到數組中的數據，可以省略。splice方法同時會返回刪除的數組元素。第73頁，共324頁。6push和pop方法push和pop方法用于實現數組的堆棧操作（先進后出）。push方法將數據添加到數組末尾，返回數組長度。pop方法返回數組中的最后一個元素，數組長度減1。第74

41、頁，共324頁。7unshift和shift方法unshift和shift方法用于實現數組的隊列操作（先進先出）。unshift方法將數據添加到數組開頭，并返回新的數組長度。shift方法返回數組中的第一個元素，所有數組元素依次前移一位，數組長度減1。第75頁，共324頁。8合并數組concat方法用于將提供的數據合并成一個新的數組，其基本語法格式如下。b = a.concat(x1,x2,x3,)其中x1、x2、x3等是單個的數據或者是數組變量。如果是數組變量，則將其中的數據合并到新數組中。變量b保存合并后的新數組。第76頁，共324頁。3.2 函數當某一段代碼需要重復使用，或者需要對批量數

42、據執(zhí)行相同操作時，就可使用函數來完成。第77頁，共324頁。3.2.1 定義函數1函數的語句定義方法JavaScript用function關鍵字來聲明函數，基本語法格式如下。function 函數名(參數1 , 參數2 , ) 代碼塊 return 返回值在當前腳本中，函數名應該是唯一的。函數參數是可選的。多個參數之間用逗號分隔。大括號中的代碼塊稱為函數體。在函數體中或在函數末尾，可使用return語句指定函數返回值。返回值可以是任意的常量、變量或者表達式。例如，下面的函數用于計算兩個數的和。function sum(a, b) return a + b第78頁，共324頁。2在表達式中定義函

43、數JavaScript允許在表達式中定義函數。例如，在表達式中定義求和函數。var sum2 = function (a, b) return a + b第79頁，共324頁。3使用Function構造函數在JavaScript中，函數也是一種對象。函數對象的構造函數為Function()，可用它來定義函數，其基本語法格式如下。var 變量 = new Function( 參數1 , 參數2 , 函數體)例如：var sum3 = new Function(a , b , return a+b)第80頁，共324頁。3.2.2 調用函數函數的調用基本語法格式如下。函數名(參數)如果是在表達式中

44、或使用Function構造函數定義的函數，則用變量名作為函數名。使用function關鍵字在語句中定義函數時，函數的定義可以放在當前頁面中的腳本的任意位置，即允許函數的調用出現在函數定義之前。在表達式中或使用Function構造函數定義函數時，只能在定義之后通過變量名來調用函數。函數可以在腳本中調用，也可以作為HTML的事件處理程序或URL。第81頁，共324頁。3.2.3 帶參數的函數函數在定義時指定的參數稱為形式參數，簡稱形參。調用函數時指定的參數稱為實際參數，簡稱實參。在調用函數時，實參的值按先后順序、一一對應地傳遞給形參。JavaScript是弱類型的，形參不需要指定數據類型。Java

45、Script不會檢查形參和實參的數據類型，也不會檢查形參和實參的個數。第82頁，共324頁。1關于函數的參數個數函數的length屬性返回形參的個數。在函數內部，arguments數組保存調用函數時傳遞的實參。function getMax(a, b) var max = Number.MIN_VALUE var len = arguments.length /獲得實際參數個數 if (len = 0) document.write(沒有傳遞實際參數!) return document.write(實際參數：) for (var i = 0; i max) max = argumentsi 第

46、83頁，共324頁。2數組作為參數在使用表達式或變量作為實參時，形參接收實參的值，所以在函數中形參的值改變，不會影響到實參。在使用數組作為實參時，形參接收的是數組的內存地址，即形參和實參引用了同一個數組。這種情況下，改變形參數組元素的值，通過實參數組對應元素獲得的是改變后的值?！纠?-21】 使用數組作為參數第84頁，共324頁。3對象作為參數對象也可作為函數參數（對象的詳細內容將在后面的章節(jié)中進行介紹）。與數組類似，形參和實參引用的是同一個對象。如果在函數中修改了形參對象屬性值，實參對象也會反應屬性值的變化?！纠?-22】 使用對象作為參數。第85頁，共324頁。3.2.4 函數的嵌套Jav

47、aScript允許在函數內部嵌套函數的定義。嵌套定義的函數只能在當前函數內部使用?！纠?-23】 使用嵌套定義函數，實現兩個數組的加法運算（對應元素相加）。第86頁，共324頁。3.2.5 遞歸函數遞歸函數是指在函數的內部調用函數自身，形成遞歸調用。使用遞歸函數必須注意遞歸調用的結束條件。若遞歸調用無法停止，則會導致運行腳本的瀏覽器崩潰。【例3-24】 使用遞歸函數計算階乘。第87頁，共324頁。3.3 內置函數1alert函數顯示警告對話框，對話框包括一個“確定”按鈕。【例3-25】 使用alert函數。源文件：03test3-25.html。 alert(使用alert函數顯示的對話框)

48、第88頁，共324頁。2confirm函數顯示確認對話框，對話框包括“確定”和“取消”按鈕。若單擊“確定”按鈕關閉對話框，函數返回值為true。其他方式關閉對話框時，函數返回值為false?！纠?-26】 使用confirm函數。var a = confirm(確認嗎？)document.write(a)第89頁，共324頁。3prompt函數顯示輸入對話框，等待用戶輸入。函數的第1個參數為提示字符串，第2個參數會顯示在輸入框中。輸入數據后，單擊“確定”按鈕，函數返回值為輸入的數據。其他方式關閉對話框時，函數返回值為null?！纠?-27】 使用prompt函數輸入數據。 var a = pr

49、ompt(請輸入數據：,input here) document.write(a) 第90頁，共324頁。4escape和unescape函數escape函數將字符串中的特殊字符轉換成“%xx”格式的字符串，xx為特殊字符ASCII碼的2位十六進制編碼。unescape函數解碼由escape函數編碼的字符。第91頁，共324頁。5eval函數計算表達式的結果。6isNaN函數若參數是NaN值，返回true，否則返回false。7parseFloat函數將字符串轉換成小數形式。8parseInt函數將字符串轉換成整數數字形式，可指定進制。第92頁，共324頁。JavaScript+jQuery前

50、端開發(fā)基礎教程第4章 異常和事件處理第93頁，共324頁。4.1 異常處理當腳本運行發(fā)生錯誤時，瀏覽器通常會停止腳本的運行。嚴重的錯誤有可能會導致瀏覽器崩潰。JavaScript利用異常處理來捕獲腳本中發(fā)生的錯誤，以便向用戶給出友好的提示。第94頁，共324頁。4.1.1 捕獲和處理異常JavaScript使用try/catch/finally語句來捕獲和處理異常，其基本語法格式如下。try /可能發(fā)生異常的代碼塊 catch (err) /發(fā)生異常后，執(zhí)行此處的處理代碼塊 finally /不管是否發(fā)生異常，均會執(zhí)行的代碼塊 try部分的大括號中為可能發(fā)生異常的代碼塊。如果發(fā)生了異常，cat

51、ch語句捕捉到該異常，局部變量err包含了異常信息。finally部分的大括號中為不管是否發(fā)生異常始終都會執(zhí)行的代碼。catch和finally均可省略，但必須有其中的一個才能和try構成一個完整的語句。第95頁，共324頁。finally子句一般很少使用，但其特殊性在于：只要執(zhí)行了try子句，不管完成了多少，finally子句總是會執(zhí)行。在不發(fā)生異常時，程序執(zhí)行流程達到try子句末尾，然后執(zhí)行finally子句。如果try子句中有break、continue或者return語句導致程序流程轉移，則會在轉移前執(zhí)行finally子句。如果try子句發(fā)生了異常，而且同時有捕捉該異常的catch子句

52、，則程序流程轉移到catch子句，catch子句執(zhí)行完后再執(zhí)行finally子句。如果finally子句中有break、continue、return或者throw語句，這些語句會導致程序流程轉移。第96頁，共324頁。4.1.2 拋出異常除了腳本自身發(fā)生的異常外，還可使用throw語句來拋出異常，其語法格式如下。throw 表達式表達式的值可以是任意類型，也可以是Error對象或Error子類對象。例如：throw new Error(出錯了！)Error構造函數的參數將作為拋出的Error對象的message屬性值?！纠?-3】 拋出異常。第97頁，共324頁。4.2 事件處理事件驅動是J

53、avaScript的重要特點。當用戶在瀏覽器中執(zhí)行操作時，產生事件，執(zhí)行相應的事件處理程序完成交互這就是事件驅動。第98頁，共324頁。4.2.1 理解事件JavaScript腳本在瀏覽器中的執(zhí)行分兩個階段：文檔載入階段和事件驅動階段。文檔載入階段指瀏覽器打開一個Web文檔的過程。在這一過程中，非事件處理程序代碼被執(zhí)行。文檔載入完成后，JavaScript腳本進入事件驅動階段。例如，瀏覽器加載完成時，會產生load事件，此時load事件處理程序就會執(zhí)行。當用戶單擊了某個按鈕，產生click事件，按鈕的click事件處理程序被執(zhí)行。JavaScript事件處理的主要概念包括：事件類型、事件目標、

54、事件處理程序、事件對象和事件傳播。第99頁，共324頁。1事件類型事件名稱觸發(fā)條件適用對象load文檔載入body、framesetunload文檔卸載body、framesetchange元素改變input、select、textareasubmit表單被提交formreset表單被重置formselect文本被選取input、textareablur標記失去焦點button、input、label、select、textarea、bodyfocus標記獲得焦點button、input、label、select、textarea、bodykeydown鍵盤被按下表單標記和bodykeypre

55、ss鍵盤被按下后又松開表單標記和bodykeyup鍵盤被松開表單標記和bodyclick鼠標被單擊多數標記dblclick鼠標被雙擊多數標記mousedown鼠標按鈕被按下多數標記mousemove鼠標移動多數標記mouseout鼠標移出標記多數標記mouseover鼠標懸停于標記上多數標記mouseup鼠標被松開多數標記第100頁，共324頁。2事件目標事件目標指發(fā)生事件的對象。例如，單擊標記產生click事件，則標記為click事件的目標。3事件處理程序事件處理程序也稱事件監(jiān)聽程序或者事件回調函數，它是腳本中用于處理事件的函數。為了響應特定目標的事件，首先需要定義事件處理程序，然后進行注冊

56、。特定目標發(fā)生事件時，瀏覽器調用事件處理程序。當對象上注冊的事件處理程序被調用時，我們稱瀏覽器“觸發(fā)”或者“分派”了事件。第101頁，共324頁。4事件對象事件對象是與特定事件相關的對象，它包含了事件的詳細信息。事件被觸發(fā)時，事件對象作為參數傳遞給事件處理程序。全局對象event用于引用事件對象。5事件傳播事件傳播是瀏覽器決定由哪個對象來響應事件的過程。如果是專屬與某個特定對象的事件，則不需要傳播。例如，load事件專屬于Window對象，所以不需要傳播；而click事件適用于多種標記，則會在HTML文件的DOM樹中傳播。事件傳播可分為事件捕獲和事件冒泡兩個過程。第102頁，共324頁。4.2

57、.2 注冊事件處理程序事件處理程序的注冊就是建立函數和對象事件的關聯關系。JavaScript可通過下列方法來注冊事件處理程序。 設置HTML標記屬性來注冊事件處理程序。 設置JavaScript對象屬性來注冊事件處理程序。 調用addEventListener()方法來注冊事件處理程序。第103頁，共324頁。1設置HTML標記屬性注冊事件處理程序早期的Web設計都通過設置HTML標記屬性來注冊事件處理程序。在例4-4中的HTML文件中的代碼：按鈕標記的onclick屬性設置的函數調用，就是為標記注冊click事件處理程序。第104頁，共324頁。2設置JavaScript對象屬性注冊事件處

58、理程序在JavaScript腳本中，將函數設置為事件目標對象的事件屬性值，也可完成事件處理程序的注冊。 function test() alert(這是按鈕單擊響應) document.form1.btTest.onclick = test/注冊事件處理程序 第105頁，共324頁。3使用addEventListener()方法注冊事件處理程序事件目標對象的addEventListener()方法用于注冊事件處理程序。該方法可為事件目標對象的同一個事件注冊多個事件處理程序。當事件發(fā)生時，為事件注冊的所有處理程序均可執(zhí)行。既然是同一個事件的處理程序，為何要注冊多個事件處理程序，不合并為一個呢？這

59、主要是基于模塊化的程序設計思想的考慮。當發(fā)生事件后，需要處理兩種或多種不太相關的邏輯時，將其分別用不同的函數來實現，也便于模塊的獨立性和程序的可維護性。addEventListener()方法基本語法格式如下。事件目標對象.addEventListener(事件名稱, 函數名稱, true|false)方法第1個參數為事件名稱字符串，例如，click、mousemove等。第2個參數為函數名稱。函數名稱直接使用，不需要放在字符串中。第3個參數如果為true時，事件處理程序的調用發(fā)生在事件的捕捉階段，即事件目標對象接收到事件時調用事件處理程序。第3個參數如果為false時，事件直接發(fā)生在事件目標

60、對象上，或者發(fā)生在其子對象上，事件冒泡到該對象時，調用事件處理程序。第106頁，共324頁。4.2.3 事件處理程序的調用1事件處理程序的調用方式事件處理程序的調用和函數的調用方式一致，只是時機不同。事件處理程序在目標對象發(fā)生事件時被調用，調用時間是不確定的。也可直接調用事件處理程序。例如，在例4-5中，完成事件處理程序注冊后，可用下面的語句直接調用事件處理程序。btTest.onclick() /直接調用事件處理程序第107頁，共324頁。2事件處理程序的參數事件處理程序被觸發(fā)時，事件對象作為第1個參數傳遞給事件處理程序。event變量用于在事件處理程序中引用事件對象。直接調用事件處理程序時