1、JavaScript程序設(shè)計(jì)第1章 JavaScript簡(jiǎn)介1.1 什么是JavaScript1.2 JavaScript與Java區(qū)別1.3 JavaScript能做什么1.4 JavaScript實(shí)現(xiàn)JavaScript程序設(shè)計(jì)第1章 JavaScript簡(jiǎn)介1.5 JavaScript環(huán)境搭建1.6 編寫(xiě)第一個(gè)JavaScript程序JavaScript程序設(shè)計(jì) 什么是JavaScript 特點(diǎn)：簡(jiǎn)單性 動(dòng)態(tài)性 跨平臺(tái)性 節(jié)省服務(wù)器的開(kāi)銷 JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具有安全性能的腳本語(yǔ)言。1.1 什么是JavaScript第1

2、章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 基于對(duì)象和面向?qū)ο?解釋和編譯 強(qiáng)變量和弱變量 代碼格式不一樣 嵌入方式不一樣 靜態(tài)聯(lián)編和動(dòng)態(tài)聯(lián)編1.2 JavaScript與Java區(qū)別第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) JavaScript能做什么 與用戶交互 提供反饋 創(chuàng)建自定義Web界面 處理表單 設(shè)置cookie1.3 JavaScript能做什么第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) JavaScript不能做什么 （1）JavaScript不允許寫(xiě)服務(wù)器機(jī)器上的文件。 （2）JavaScript不能關(guān)閉不是由它自己打開(kāi)的窗

3、口。 （3）JavaScript不能從來(lái)自另一個(gè)服務(wù)器的已經(jīng)打開(kāi)的網(wǎng)頁(yè)中讀取信息。1.3 JavaScript能做什么第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) JavaScript實(shí)現(xiàn)1.4 JavaScript實(shí)現(xiàn)第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 文檔對(duì)象模型DOM Sample Page hello world! 1.4 JavaScript實(shí)現(xiàn)第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 瀏覽器對(duì)象模型BOM BOM 主要處理瀏覽器窗口和框架，不過(guò)通常瀏覽器特定的 JavaScript 擴(kuò)展都被看做 BOM 的一部分: （1

4、）彈出新的瀏覽器窗口; （2）移動(dòng)、關(guān)閉瀏覽器窗口以及調(diào)整窗口大小; （3）提供 Web 瀏覽器詳細(xì)信息的定位對(duì)象; （4）提供用戶屏幕分辨率詳細(xì)信息的屏幕對(duì)象; （5）對(duì) cookie 的支持; （6）IE 擴(kuò)展了 BOM，加入了 ActiveXObject 類，可以通過(guò) JavaScript 實(shí)例化 ActiveX 對(duì)象;1.4 JavaScript實(shí)現(xiàn)第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 環(huán)境搭建 （1）瀏覽器; （2）Web服務(wù)器（wamp）; /en/1.5 JavaScript環(huán)境搭建第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 示例代碼 /

5、 JavaScript Appears here alert(這是第一個(gè)JavaScript例子!); alert(歡迎你進(jìn)入JavaScript世界!); 1.6 編寫(xiě)第一個(gè)JavaScript程序第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì) 什么是JavaScript JavaScript與Java區(qū)別 JavaScript能做什么 JavaScript實(shí)現(xiàn) JavaScript環(huán)境搭建 編寫(xiě)第一個(gè)JavaScript程序總結(jié)第1章 JavaScript簡(jiǎn)介JavaScript程序設(shè)計(jì)謝謝觀看JavaScript程序設(shè)計(jì)第2章 JavaScript基本語(yǔ)法2.1 JavaS

6、cript在HTML中的使用2.2 JavaScript代碼調(diào)試方式2.3 語(yǔ)句2.4 變量JavaScript程序設(shè)計(jì)第2章 JavaScript基本語(yǔ)法2.5 數(shù)據(jù)類型2.6 表達(dá)式和運(yùn)算符2.7 關(guān)鍵字及保留字2.8 正則表達(dá)式JavaScript程序設(shè)計(jì)第2章 JavaScript基本語(yǔ)法2.9 注釋2.10 實(shí)戰(zhàn)：加減運(yùn)算JavaScript程序設(shè)計(jì)2.1 JavaScript在HTML中的使用 兩種方式使用 （1）直接在頁(yè)面上嵌入JavaScript代碼； （2）引用獨(dú)立的js文件；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.2 JavaScript代碼調(diào)試

7、方式 三種代碼調(diào)試方式 （1）使用alert()彈出警告框； （2）使用document.write()方法將內(nèi)容寫(xiě)到HTML文檔中； （3）使用console.log()寫(xiě)入到瀏覽器控制臺(tái)；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.2 JavaScript代碼調(diào)試方式 三種代碼調(diào)試方式比較 （1）如果在文檔已完成加載后執(zhí)行document.write，整個(gè)HTML頁(yè)面將被覆蓋，對(duì)程序執(zhí)行造成不便； （2）alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行，從而造成副作用，而且使用alert()方法需要點(diǎn)擊彈窗的確認(rèn)按鈕操作麻煩，最重要的是alert()只能輸出字

8、符串； （3）console.log()僅在控制臺(tái)打印相關(guān)信息，不會(huì)對(duì)JavaScript程序執(zhí)行造成阻隔，此外，console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象，可以看到清楚的對(duì)象屬性結(jié)構(gòu)，在ajax返回json數(shù)組對(duì)象時(shí)調(diào)試很方便；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.3 語(yǔ)句 語(yǔ)句 JavaScript語(yǔ)句是向?yàn)g覽器發(fā)出的命令；var a = 1+2;var a = 1+2; var b = abc;第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.4 變量 變量概念及命名 （1）變量以字母開(kāi)頭； （2）變量也能

9、以$和_開(kāi)頭（不過(guò)不推薦這么做）； （3）變量名不能包含空格或其他標(biāo)點(diǎn)符號(hào)； （4）變量名稱對(duì)大小寫(xiě)敏感（a和A是不同的變量）；var a; / 聲明變量aa = 1; / 給變量a賦值為1第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.4 變量 變量作用域 （1）全局變量； （2）局部變量；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.4 變量 變量提升 JavaScript引擎工作方式是：先解析代碼，獲取所有被聲明的變量，然后再一行一行的運(yùn)行代碼。這樣所有變量聲明語(yǔ)句都會(huì)被提升到代碼頭部執(zhí)行。這就叫做變量提升。第2章 JavaScript基本語(yǔ)法J

10、avaScript程序設(shè)計(jì)2.5 數(shù)據(jù)類型 基本數(shù)據(jù)類型 （1）String類型； （2）Number類型； （3）Boolean類型； （4）Undefined類型； （5）Null類型；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.5 數(shù)據(jù)類型 引用數(shù)據(jù)類型 （1）Object類型； （2）Array類型； （3）Date類型； （4）RegExp類型； （5）Function類型；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.5 數(shù)據(jù)類型 基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別 （1）聲明變量時(shí)不同的內(nèi)存分配； （2）不同的內(nèi)存分配機(jī)制也帶來(lái)了不同的

11、訪問(wèn)機(jī)制； （3）復(fù)制變量時(shí)的不同； （4）參數(shù)傳遞的不同；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.5 數(shù)據(jù)類型 數(shù)據(jù)類型轉(zhuǎn)換 （1）利用轉(zhuǎn)換函數(shù)； （2）強(qiáng)制類型轉(zhuǎn)換； （3）利用JavaScript變量弱類型轉(zhuǎn)換；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.6 表達(dá)式和運(yùn)算符 表達(dá)式和運(yùn)算符概念 （1）表達(dá)式是各種數(shù)值、變量、運(yùn)算符的綜合體，最簡(jiǎn)單的表達(dá)式可以是常量或者變量名稱； （2）運(yùn)算符是變量中用來(lái)處理運(yùn)算數(shù)的各種符號(hào)； 常量表達(dá)式：hello；變量表達(dá)式：example；賦值表達(dá)式：string=”hello world”。第2章

12、 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.6 表達(dá)式和運(yùn)算符 運(yùn)算符類型 （1）一元運(yùn)算符； （2）算術(shù)運(yùn)算符； （3）關(guān)系運(yùn)算符； （4）邏輯運(yùn)算符； （5）位運(yùn)算符； （6）賦值運(yùn)算符； （7）其他運(yùn)算符；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.6 表達(dá)式和運(yùn)算符 運(yùn)算符優(yōu)先級(jí) （1）+ - - + ! delete typeof void （一元運(yùn)算符、返回?cái)?shù)據(jù)類型、對(duì)象創(chuàng)建、未定義值）； （2）* / % （乘法、除法、取余）； （3）+ - （加法、減法、字符串連接）； （4） （移位）； （5） = instanceof in （小于

13、、小于等于、大于、大于等于、instanceof ）； （6） = != = != （等于、不等于、嚴(yán)格相等、非嚴(yán)格相等）； （7）& （按位與）；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.6 表達(dá)式和運(yùn)算符 運(yùn)算符優(yōu)先級(jí) （8） （按位異或）； （9）| （按位或）； （10）& （邏輯與）； （11）| （邏輯或）； （12）? （條件）； （13） = *= /= %= += -= &= = |= = = （賦值、運(yùn)算賦值）； （14）,（多重求值） ；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.6 表達(dá)式和運(yùn)算符 運(yùn)算符優(yōu)先級(jí) 運(yùn)算符優(yōu)

14、先級(jí)等級(jí)： 一元運(yùn)算符 算術(shù)運(yùn)算符 比較運(yùn)算符 邏輯運(yùn)算符 三元運(yùn)算符 賦值運(yùn)算符 逗號(hào)運(yùn)算符第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.7 關(guān)鍵字及保留字 關(guān)鍵字 （1）break do instanceof typeof； （2）case else new var； （3）catch finally return void； （4）continue for switch while； （5）debugger*； （6） function this with； （7）default if throw； （8） delete in try；第2章 JavaScript基

15、本語(yǔ)法JavaScript程序設(shè)計(jì)2.7 關(guān)鍵字及保留字 保留字 （1）abstract enum int short； （2）boolean export interface static； （3）byte extends long super； （4）char final native synchronized； （5）class float package throws； （6） const goto private transient； （7）debugger implements protected volatile； （8） double import public；第2章 Jav

16、aScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.8 正則表達(dá)式 正則表達(dá)式定義及特性 正則表達(dá)式是對(duì)字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個(gè)“規(guī)則字符串”，這個(gè)“規(guī)則字符串”用來(lái)表達(dá)對(duì)字符串的一種過(guò)濾邏輯var reg=/abcd/ ; /這個(gè)叫對(duì)象直接量方式var reg=new RegExp(abcd); /這個(gè)叫構(gòu)造函數(shù)方式var reg=/abcd/g;var reg=new RegExp(abcd, g);reg = new RegExp(w+); /這里的要轉(zhuǎn)義reg = /w+/ ; /這樣就不需要第2章 JavaScript

17、基本語(yǔ)法JavaScript程序設(shè)計(jì)2.8 正則表達(dá)式 正則表達(dá)式語(yǔ)法 正則表達(dá)式是由普通字符（例如字符 a 到 z）以及特殊字符（稱為元字符）組成的文字模式。模式描述在搜索文本時(shí)要匹配一個(gè)或多個(gè)字符串。正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.8 正則表達(dá)式 普通字符 普通字符包括沒(méi)有顯式指定為元字符的所有可打印和不可打印字符。這包括所有大寫(xiě)和小寫(xiě)字母、所有數(shù)字、所有標(biāo)點(diǎn)符號(hào)和一些其他符號(hào)；第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)2.8 正則表達(dá)式 非打印字符第2章 JavaSc

18、ript基本語(yǔ)法JavaScript程序設(shè)計(jì)字符描述cx匹配由x指明的控制字符。例如， cM 匹配一個(gè) Control-M 或回車符。x 的值必須為 A-Z 或 a-z 之一。否則，將 c 視為一個(gè)原義的 c 字符。f匹配一個(gè)換頁(yè)符。等價(jià)于 x0c 和 cL。n匹配一個(gè)換行符。等價(jià)于 x0a 和 cJ。r匹配一個(gè)回車符。等價(jià)于 x0d 和 cM。s匹配任何空白字符，包括空格、制表符、換頁(yè)符等等。等價(jià)于 fnrtv。S匹配任何非空白字符。等價(jià)于 fnrtv。t匹配一個(gè)制表符。等價(jià)于 x09 和 cI。v匹配一個(gè)垂直制表符。等價(jià)于 x0b 和 cK。2.8 正則表達(dá)式 特殊字符第2章 JavaSc

19、ript基本語(yǔ)法JavaScript程序設(shè)計(jì)特殊字符描述$匹配輸入字符串的結(jié)尾位置。如果設(shè)置了 RegExp 對(duì)象的 Multiline 屬性，則 $ 也匹配 n 或 r。要匹配 $ 字符本身，請(qǐng)使用 $。( )標(biāo)記一個(gè)子表達(dá)式的開(kāi)始和結(jié)束位置。子表達(dá)式可以獲取供以后使用。要匹配這些字符，請(qǐng)使用 ( 和 )。*匹配前面的子表達(dá)式零次或多次。要匹配 * 字符，請(qǐng)使用 *。+匹配前面的子表達(dá)式一次或多次。要匹配 + 字符，請(qǐng)使用 +。.匹配除換行符 n 之外的任何單字符。要匹配 . ，請(qǐng)使用 . 。標(biāo)記一個(gè)中括號(hào)表達(dá)式的開(kāi)始。要匹配 ，請(qǐng)使用 。?匹配前面的子表達(dá)式零次或一次，或指明一個(gè)非貪婪限定

20、符。要匹配 ? 字符，請(qǐng)使用 ?。將下一個(gè)字符標(biāo)記為或特殊字符、或原義字符、或向后引用、或八進(jìn)制轉(zhuǎn)義符。例如， n 匹配字符 n。n 匹配換行符。序列 匹配 ，而 ( 則匹配 (。匹配輸入字符串的開(kāi)始位置，除非在方括號(hào)表達(dá)式中使用，此時(shí)它表示不接受該字符集合。要匹配 字符本身，請(qǐng)使用 。標(biāo)記限定符表達(dá)式的開(kāi)始。要匹配 ，請(qǐng)使用 。|指明兩項(xiàng)之間的一個(gè)選擇。要匹配 |，請(qǐng)使用 |。2.8 正則表達(dá)式 限定符第2章 JavaScript基本語(yǔ)法JavaScript程序設(shè)計(jì)字符描述*匹配前面的子表達(dá)式零次或多次。例如，zo* 能匹配 z 以及 zoo。* 等價(jià)于0,。+匹配前面的子表達(dá)式一次或多次。

21、例如，zo+ 能匹配 zo 以及 zoo，但不能匹配 z。+ 等價(jià)于 1,。？匹配前面的子表達(dá)式零次或一次。例如，do(es)? 可以匹配 do 或 does 中的do 。? 等價(jià)于 0,1。nn 是一個(gè)非負(fù)整數(shù)。匹配確定的 n 次。例如，o2 不能匹配 Bob 中的 o，但是能匹配 food 中的兩個(gè) o。n,n 是一個(gè)非負(fù)整數(shù)。至少匹配n 次。例如，o2, 不能匹配 Bob 中的 o，但能匹配 foooood 中的所有 o。o1, 等價(jià)于 o+。o0, 則等價(jià)于 o*。n,mm 和 n 均為非負(fù)整數(shù)，其中n 30) alert(i大于30); else if ( i 0 ) alert(i

22、小于0); else alert(i在0到30之間); 第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 for循環(huán)語(yǔ)句 for ( initialization; expression; post-loop-expression ) statement;var count = 10;for ( var i = 0; i count; i +) alert(i);第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 for.in循環(huán)語(yǔ)句 for ( property in expression ) statement;for (

23、var propName in window ) document.write(propName);第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 while循環(huán)語(yǔ)句 while ( expression ) statement;var i = 0;while (i 10) alert(i);i += 2;第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 label語(yǔ)句 label : statementstart i : 5第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 break和co

24、ntinue語(yǔ)句 break和continue語(yǔ)句用于循環(huán)中精確地控制代碼的執(zhí)行。break語(yǔ)句可以立即退出循環(huán)，阻止再次反復(fù)執(zhí)行任何代碼。而continue語(yǔ)句只是退出當(dāng)前循環(huán)，根據(jù)控制表達(dá)式還允許繼續(xù)進(jìn)行下一次循環(huán)。第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 do.while語(yǔ)句 dostatements;while (condition)do x=x + The number is + i + ; i+; while (i5);第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.1 程序控制流 switch語(yǔ)句 switch (ex

25、pression) case value: statement; break; default: statement;第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 函數(shù)表達(dá)式及語(yǔ)法 兩種常用的定義函數(shù)方式：第一種：使用函數(shù)聲明語(yǔ)法，第二種：使用函數(shù)表達(dá)式定義。function sum(num1,num2) / 函數(shù)體var sum = function(num1,num2) / 函數(shù)體; 第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 函數(shù)參數(shù) JavaScript函數(shù)的參數(shù)與大多數(shù)其他語(yǔ)言的函數(shù)參數(shù)有所不同。函數(shù)不介意傳遞進(jìn)來(lái)多少

26、個(gè)參數(shù)，也不在乎傳進(jìn)來(lái)的參數(shù)是什么數(shù)據(jù)類型。甚至可以不傳參數(shù)。第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 函數(shù)返回值 JavaScript函數(shù)返回值關(guān)鍵字是return。一個(gè)函數(shù)內(nèi)處理的結(jié)果可以使用return 返回，這樣在調(diào)用函數(shù)的地方就可以用變量接收返回結(jié)果。第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 函數(shù)4種調(diào)用模式 （1）函數(shù)調(diào)用模式； （2）方法調(diào)用模式； （3）構(gòu)造器調(diào)用模式； （4）Apply調(diào)用模式；第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) apply和call的區(qū)別 cal

27、l方法： 語(yǔ)法定義為：call(thisObj,arg1,arg2,.argN) 參數(shù)thisObj為可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。arg1，arg2，argN也為可選項(xiàng)，傳遞的參數(shù)序列； apply方法： 語(yǔ)法定義為：apply(thisObj,argArray)；第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 遞歸調(diào)用 遞歸函數(shù)：就是在函數(shù)體內(nèi)調(diào)用函數(shù)本身。function factorial(num) if(num = 1) return 1; else return num * factorial(num-1);第3章 JavaScript程序構(gòu)成Jav

28、aScript程序設(shè)計(jì)3.2 函數(shù) 函數(shù)作用域var scope = global;function fun()console.log(scope);var scope = local;console.log(scope);fun();第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 異常處理 try / 可能發(fā)生錯(cuò)誤的代碼catch(error) / 發(fā)生錯(cuò)誤時(shí)處理方式第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.2 函數(shù) 閉包 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)；function fun1() var n=999; nAdd=funct

29、ion()n+=1 function fun2() console.log(n); return fun2;var result=fun1();result(); nAdd();result(); 第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.3 事件及事件處理 事件 JavaScript與HTML之間的交互是通過(guò)事件來(lái)實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。 第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.3 事件及事件處理 常用事件 （1）窗口事件：onLoad、onUnload、onResize、onMove、onAbort

30、、onError、onFocus、onBlur； （2）鼠標(biāo)事件：onClick、onDbClick、onMouseDown、onMouseUp、onMouseOver、onMouseOut、onMouseMove； （3）表單事件：onBlur、onChange、onFocus、onReset、onSubmit； （4）鍵盤(pán)事件：onKeyPress、onKeyDown、onKeyUp；第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)3.4 實(shí)戰(zhàn)：Bingo卡片游戲 實(shí)戰(zhàn) （1）案例描述 用JavaScript循環(huán)實(shí)現(xiàn)Bingo卡片游戲。Bingo卡片是5*5的方形，5個(gè)列上

31、標(biāo)著B(niǎo)-I-N-G-O，格子里包含175的數(shù)字。正中間通常是一個(gè)空的格子，印著單詞free。每列可以包含的數(shù)字的范圍是：B列包含數(shù)字115；I列包含數(shù)字1630；N列包含數(shù)字3145；G列包含數(shù)字4660；O列包含數(shù)字6175。 （2）實(shí)現(xiàn)思路 Bingo卡片總共有24個(gè)空格需要填充數(shù)字，且每個(gè)數(shù)字互不重復(fù)；每列數(shù)字有固定的取值范圍。這樣首先需要?jiǎng)?chuàng)建一個(gè)for循環(huán)，用i作循環(huán)變量，循環(huán)24次；每次循環(huán)調(diào)用函數(shù)依次往Bingo卡片中的空格插入數(shù)字。第3章 JavaScript程序構(gòu)成JavaScript程序設(shè)計(jì)總結(jié) 程序控制流 函數(shù) 事件及事件處理第3章 JavaScript程序構(gòu)成JavaSc

32、ript程序設(shè)計(jì)謝謝觀看JavaScript程序設(shè)計(jì)第4章 JavaScript對(duì)象4.1 對(duì)象簡(jiǎn)介4.2 創(chuàng)建對(duì)象4.3 對(duì)象特性4.4 單體內(nèi)置對(duì)象JavaScript程序設(shè)計(jì)第4章 JavaScript對(duì)象4.5 實(shí)戰(zhàn)：產(chǎn)生n個(gè)不重復(fù)隨機(jī)數(shù)JavaScript程序設(shè)計(jì)4.1 對(duì)象簡(jiǎn)介 對(duì)象 所謂對(duì)象，就是一種無(wú)序的數(shù)據(jù)集合，由若干個(gè)“鍵值對(duì)”（key-value）構(gòu)成；var o = p: Hello World;第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.1 對(duì)象簡(jiǎn)介 對(duì)象屬性第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)屬性屬性類型描述Prototy

33、pe對(duì)象對(duì)象的原型，用來(lái)實(shí)現(xiàn)繼承功能的關(guān)鍵對(duì)象Class字符串描述對(duì)象類型的字符串值，使用typeof操作符返回的結(jié)果Get函數(shù)返回屬性值。獲取指定屬性名的值Put函數(shù)設(shè)置指定的屬性值。為指定的屬性賦值CanPut函數(shù)返回指定屬性是否可用通過(guò)Put操作設(shè)置值HasProperty函數(shù)返回對(duì)象是否有指定的屬性Delete函數(shù)從對(duì)象中刪除指定屬性DefaultValue函數(shù)返回對(duì)象的默認(rèn)值，只能是原始值，不能是引用類型Construct函數(shù)通過(guò)new操作符創(chuàng)建一個(gè)對(duì)象。實(shí)現(xiàn)了這個(gè)內(nèi)部屬性的對(duì)象被叫做構(gòu)造函數(shù)（可以理解為類）Call函數(shù)執(zhí)行關(guān)聯(lián)在對(duì)象上的代碼，通過(guò)函數(shù)表達(dá)式調(diào)用（也就是通過(guò)函數(shù)名調(diào)用

34、函數(shù)），實(shí)現(xiàn)了這個(gè)內(nèi)部方法的對(duì)象被叫做函數(shù)HasInstance函數(shù)返回給定的值是否擴(kuò)展了當(dāng)前對(duì)象的屬性和行為（可以理解為給定的對(duì)象是否為本類創(chuàng)建的對(duì)象），在JavaScript本地對(duì)象中，只要Function對(duì)象實(shí)現(xiàn)了這個(gè)屬性Scope對(duì)象作用域鏈定義了一個(gè)函數(shù)的執(zhí)行環(huán)境4.2 創(chuàng)建對(duì)象 對(duì)象字面量模式創(chuàng)建對(duì)象var person = name : Nicholas; age : 22; job :software Engineer; sayName: function() alter();第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象 工廠模式創(chuàng)建對(duì)象func

35、tion createPerson(name,age,job)var o = new Object(); = name;o.age = age;o.job = job;o.sayName = function()alert();return o;var person1 = createPerson(Nicholas,22,software Engineer);var person2 = createPerson(Greg,24,student);第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象 構(gòu)造函數(shù)模式創(chuàng)建對(duì)象function Person(name,age,j

36、ob) = name;this.age = age;this.job = job;this.sayName = function() alert();/通過(guò)new操作符創(chuàng)建Person的實(shí)例var person1 = new Person(Nicholas,22,software Engineer);var person2 = new Person(Greg,24,student);person1.sayName();person2.sayName();第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象 原型模式創(chuàng)建對(duì)象function Person() P =Nic

37、holas;Ptotype.age = 22;Ptotype.job = software Engineer; Ptotype.sayName()alert();var person1 = new Person();person1.sayName(); /Nicholasalert(person1.sayName = person2.sayName);/true第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建對(duì)象第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象 動(dòng)態(tài)原型模式創(chuàng)建對(duì)象function Per

38、son(name,age) = name;this.age = age;this.job =job;/方法if(typeof this.sayName != function) Ptotype.sayName = function() alert(); var friend = new Person(Nicholas,22,Software Engineer); /初次調(diào)用構(gòu)造函數(shù)，此時(shí)修改了原型var person2 = new Person(amy,21); /此時(shí)sayName()方法已經(jīng)存在，不會(huì)再修改原型第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.2 創(chuàng)建對(duì)象 任

39、務(wù)1.任務(wù)介紹定義一個(gè)Person對(duì)象，對(duì)象包括屬性姓名，并獲取實(shí)例化對(duì)象Person的姓名信息。2.任務(wù)目標(biāo)學(xué)會(huì)JavaScript幾種創(chuàng)建對(duì)象模式及全局變量的存儲(chǔ)機(jī)制。3.實(shí)現(xiàn)思路1）選用構(gòu)造函數(shù)模式創(chuàng)建對(duì)象，并且將屬性為方法的屬性定義到函數(shù)之外。2）全局變量是綁定在window對(duì)象上的，是window對(duì)象的屬性。第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.3 對(duì)象特性 對(duì)象的四種特性 抽象性 封裝性 繼承性 多態(tài)性 第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.3 對(duì)象特性 任務(wù)1.任務(wù)介紹定義一個(gè)Student類作為Person類的子類，在Stud

40、ent類中繼承父類的walk()方法、重新定義父類的sayHello()方法并添加Student類自己的sayGoodBye()方法。2.任務(wù)目標(biāo)理解JavaScript面向?qū)ο蟮乃拇筇匦圆⒄莆談?chuàng)建對(duì)象的方法。3.實(shí)現(xiàn)思路1）選用構(gòu)造函數(shù)模式創(chuàng)建對(duì)象，并且將屬性為方法的屬性定義到函數(shù)之外。2）全局變量是綁定在window對(duì)象上的，是window對(duì)象的屬性。第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.4 單體內(nèi)置對(duì)象 Global對(duì)象 Global 對(duì)象是 JavaScript 中最特別的對(duì)象，因?yàn)閷?shí)際上它根本不存在。Global 對(duì)象在某種意義上是作為一個(gè)終極的兜底兒對(duì)象來(lái)

41、定義的。換句話說(shuō)，不屬于任何其他對(duì)象的屬性和方法，最終都是它的屬性和方法。所有在全局作用域中定義的屬性和函數(shù)，都是 Global 對(duì)象的屬性。第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.4 單體內(nèi)置對(duì)象 Global對(duì)象常用內(nèi)置方法 （1）URI 編碼方法 （2）eval()方法第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)4.4 單體內(nèi)置對(duì)象 Global對(duì)象的屬性第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)屬性釋義undefined特殊值undefinedNaN特殊值NaNInfinity特殊值InfinityObject構(gòu)造函數(shù)Objec

42、tArray構(gòu)造函數(shù)ArrayFunction構(gòu)造函數(shù)FunctionBoolean構(gòu)造函數(shù)BooleanString構(gòu)造函數(shù)StringNumber構(gòu)造函數(shù)NumberDate構(gòu)造函數(shù)DateRegExp構(gòu)造函數(shù)RegExpError構(gòu)造函數(shù)ErrorEvalError構(gòu)造函數(shù)EvalErrorRangeError構(gòu)造函數(shù)RangeErrorReferenceError構(gòu)造函數(shù)ReferenceErrorSyntaxError構(gòu)造函數(shù)SyntaxErrorTypeError構(gòu)造函數(shù)TypeErrorURIError構(gòu)造函數(shù)URIError4.4 單體內(nèi)置對(duì)象 Math對(duì)象屬性第4章 Java

43、Script對(duì)象JavaScript程序設(shè)計(jì)屬性釋義Math.E自然對(duì)數(shù)的底數(shù)，即常量e的值Math.LN1010的自然對(duì)數(shù)Math.LN22的自然對(duì)數(shù)Math.LOG2E以2為底e的對(duì)數(shù)Math.LOG10E以10為底e的對(duì)數(shù)Math.PI的值Math.SQRT1_21/2的平方根（即2的平方根的倒數(shù)）Math.SQRT22的平方根4.4 單體內(nèi)置對(duì)象 Math對(duì)象方法 （1）min()和 max()方法； （2）舍入方法：Math.ceil()、Math.floor() 和 Math.round()； （3）random()方法； （4）其他方法；第4章 JavaScript對(duì)象JavaS

44、cript程序設(shè)計(jì)屬性釋義Math.abs(num)返回num的絕對(duì)值Math.asin(x)返回x的反正弦值Math.exp(num)返回Math.E的num次冪Math.atan(x)返回x的反正切值Math.log(num)返回num的自然對(duì)數(shù)Math.atan2(y,x)返回y/x的反正切值Math.pow(num,power)返回num的power次冪Math.cos(x)返回x的余弦值Math.sqrt(num)返回num的平方根Math.sin(x)返回x的正弦值Math.acos(x)返回x的反余弦值Math.tan(x)返回x的正切值4.5 實(shí)戰(zhàn)：產(chǎn)生n個(gè)不重復(fù)隨機(jī)數(shù) 實(shí)戰(zhàn)

45、（1）案例描述 用JavaScript產(chǎn)生n個(gè)min,max區(qū)間內(nèi)的不重復(fù)隨機(jī)數(shù)。 （2）實(shí)現(xiàn)思路 1）運(yùn)用Math對(duì)象的random()方法生成一個(gè)min,max區(qū)間內(nèi)的隨機(jī)數(shù)； 2）生成n個(gè)min,max區(qū)間內(nèi)的不重復(fù)隨機(jī)數(shù)，生成第i個(gè)min,max區(qū)間的隨機(jī)數(shù)時(shí)，與之前i-1個(gè)數(shù)比較，如有重復(fù)，令i=i-1;重復(fù)生成第i個(gè)隨機(jī)數(shù)。確保每次生成的隨機(jī)數(shù)都不重復(fù)。第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)總結(jié) 對(duì)象簡(jiǎn)介 創(chuàng)建對(duì)象 對(duì)象特性 單體內(nèi)置對(duì)象第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)謝謝觀看JavaScript程序設(shè)計(jì)第5章 JavaScript

46、數(shù)組5.1 數(shù)組及數(shù)組元素5.2 添加和刪除元素5.3 二維及多維數(shù)組5.4 數(shù)組常用方法JavaScript程序設(shè)計(jì)第5章 JavaScript數(shù)組5.5 實(shí)戰(zhàn)：計(jì)算產(chǎn)品銷售額JavaScript程序設(shè)計(jì)5.1 數(shù)組及數(shù)組元素 數(shù)組 數(shù)組是一種數(shù)據(jù)類型，它包含或者存儲(chǔ)了編碼的值。每個(gè)編碼的值稱作該數(shù)組的一個(gè)元素，每個(gè)元素的編碼被稱作下標(biāo)。var class1_array = new Array(95,89,60,.,100);var class2_array = new Array(45,89,90,.,88);var class3_array = new Array(91,85,62,.,

47、79);var class4_array = new Array(65,80,90,.,100);var class5_array = new Array(90,80,69,.,100);var class6_array = new Array(99,89,67,.,100);第5章 JavaScript數(shù)組JavaScript程序設(shè)計(jì)5.1 數(shù)組及數(shù)組元素 數(shù)組操作 （1）數(shù)組創(chuàng)建 （2）數(shù)組讀寫(xiě)第5章 JavaScript數(shù)組JavaScript程序設(shè)計(jì)5.2 添加和刪除元素 添加刪除數(shù)組元素 （1）直接把值賦給數(shù)組中最后一個(gè)空位上的元素即可；numbersnumbers.length =

48、 10; （2）使用數(shù)組push方法，把元素添加到數(shù)組末尾；numbers.push(10); （3）unshift可以直接把數(shù)值插入數(shù)組的首位；numbers.unshift(-2); （4）pop刪除數(shù)組最后一個(gè)元素；numbers.pop(); （5）要真正刪除第一個(gè)元素，可以使用數(shù)組的shift方法；numbers.shift(); （6）splice方法從一個(gè)數(shù)組中移除一個(gè)或多個(gè)元素；numbers.splice(5,3);第5章 JavaScript數(shù)組JavaScript程序設(shè)計(jì)5.3 二維及多維數(shù)組 二維數(shù)組/ 1班數(shù)學(xué)成績(jī)var class1_array0 = ;var cl

49、ass1_array00 = 95;var class1_array01 = 89;/ 1班語(yǔ)文成績(jī)var class1_array1 = ;var class1_array10 = 95;var class1_array11 = 89;第5章 JavaScript數(shù)組JavaScript程序設(shè)計(jì)5.4 數(shù)組常用方法 常用方法 （1）數(shù)組合并和截取；concat()和slice()； （2）數(shù)組迭代；every()、some()、forEach()、map()、filter()； （3）數(shù)組搜索和排序；reverse()和sort()；第5章 JavaScript數(shù)組JavaScript程序設(shè)

50、計(jì)5.5 實(shí)戰(zhàn)：計(jì)算產(chǎn)品銷售額 實(shí)戰(zhàn) （1）案例描述 隨機(jī)生成某產(chǎn)品一年中每天的銷售額，并計(jì)算某一個(gè)月日平均銷售額以及某一周日平均銷售額。 （2）實(shí)現(xiàn)思路 1）假設(shè)該產(chǎn)品日銷售額區(qū)間為(0,10000)，運(yùn)用Math對(duì)象的random()方法隨機(jī)生成區(qū)間內(nèi)的隨機(jī)數(shù)； 2）創(chuàng)建三維數(shù)組month用于存放每個(gè)月每一周每一天的日銷售額數(shù)據(jù)。第5章 JavaScript數(shù)組JavaScript程序設(shè)計(jì)總結(jié) 數(shù)組及數(shù)組元素 添加和刪除元素 二維及多維數(shù)組 數(shù)組常用方法第4章 JavaScript對(duì)象JavaScript程序設(shè)計(jì)謝謝觀看JavaScript程序設(shè)計(jì)第6章 窗口和框架6.1 Window對(duì)象

51、概述6.2 窗口框架簡(jiǎn)介6.3 窗口框架控制6.4 FRAME之間的鏈接JavaScript程序設(shè)計(jì)第6章 窗口和框架6.5 浮動(dòng)窗口6.6 實(shí)戰(zhàn)：iframe創(chuàng)建動(dòng)態(tài)內(nèi)容JavaScript程序設(shè)計(jì)6.1 Window對(duì)象概述 Window對(duì)象常用屬性和方法 （1）簡(jiǎn)單對(duì)話框：alert()、confirm()和prompt()； （2）狀態(tài)欄：status屬性和defaultStatus屬性； （3）定時(shí)設(shè)定和時(shí)間間隔：setTimeout()、clearTimeout()、setInterval()、clearInterval()； （4）navigator：用于獲取瀏覽器和操作系統(tǒng)的信

52、息； （5）Screen對(duì)象：有關(guān)用戶顯示器的大小和可用的顏色數(shù)量的信息； （6）Location對(duì)象：窗口中當(dāng)前顯示的文檔的URL； （7）History對(duì)象：保存著用戶上網(wǎng)的歷史記錄；第6章 窗口和框架JavaScript程序設(shè)計(jì)6.1 Window對(duì)象概述 窗口相關(guān)操作 （1）窗口位置獲取：screenLeft和screenTop、screenX和screenY； （2）窗口位置移動(dòng)：moveTo()和moveBy()； （3）窗口大小獲取：outerWidth和outerHeight、innerWidth和innerHeight； （4）窗口大小調(diào)整：resizeTo()和resize

53、By()； （5）打開(kāi)窗口：open()； （6）關(guān)閉窗口：close()；第6章 窗口和框架JavaScript程序設(shè)計(jì)6.2 窗口框架簡(jiǎn)介 什么是窗口框架 窗口框架可用于將窗口畫(huà)面分割成多個(gè)小窗口，且每個(gè)小窗口中，可以顯示不同的網(wǎng)頁(yè)，達(dá)到在瀏覽器中同時(shí)瀏覽多個(gè)不同網(wǎng)頁(yè)的效果。第6章 窗口和框架JavaScript程序設(shè)計(jì)6.2 窗口框架簡(jiǎn)介 窗口框架的基本結(jié)構(gòu) . . 第6章 窗口和框架JavaScript程序設(shè)計(jì)6.3 窗口框架控制 水平/垂直分隔第6章 窗口和框架JavaScript程序設(shè)計(jì)6.3 窗口框架控制 設(shè)置窗口寬度 窗口框架寬度設(shè)置 第6章 窗口和框架JavaScript程序

54、設(shè)計(jì)6.3 窗口框架控制 子窗口設(shè)置標(biāo)簽frame的六個(gè)屬性src、name、marginwidth、marginheight、scrolling和noresize。第6章 窗口和框架JavaScript程序設(shè)計(jì)6.4 FRAME之間的鏈接 鏈接 對(duì)于框架網(wǎng)頁(yè)中的超鏈接，可用target屬性指定該鏈接的內(nèi)容在哪個(gè)窗口顯示；_blank _self _parent _top第6章 窗口和框架JavaScript程序設(shè)計(jì)6.5 浮動(dòng)窗口 浮動(dòng)窗口 在一個(gè)頁(yè)面中直接引入另一個(gè)頁(yè)面，這種技術(shù)稱為浮動(dòng)的窗口（Floating frame）(也叫“內(nèi)部框架”； 第6章 窗口和框架JavaScript程序設(shè)

55、計(jì)6.6 實(shí)戰(zhàn)：iframe創(chuàng)建動(dòng)態(tài)內(nèi)容 實(shí)戰(zhàn) （1）案例描述 編寫(xiě)程序使用JavaScript為iframe創(chuàng)建動(dòng)態(tài)內(nèi)容，當(dāng)用戶點(diǎn)擊頁(yè)面鏈接時(shí)，顯示當(dāng)前session中用戶訪問(wèn)頁(yè)面的次數(shù)。 （2）實(shí)現(xiàn)思路 1）首先創(chuàng)建一個(gè)HTML主頁(yè)面。頁(yè)面包含一個(gè)子窗口iframe； 2）定義函數(shù)initLinks循環(huán)遍歷頁(yè)面上所有的鏈接； 3）定義數(shù)組pageCount用來(lái)記錄加載頁(yè)面的次數(shù)； 4）函數(shù)writeContent設(shè)置變量newText用來(lái)存儲(chǔ)iframe的動(dòng)態(tài)內(nèi)容；第6章 窗口和框架JavaScript程序設(shè)計(jì)總結(jié) Window對(duì)象概述 窗口框架簡(jiǎn)介 窗口框架控制 FRAME之間的鏈接 浮

56、動(dòng)窗口第6章 窗口和框架JavaScript程序設(shè)計(jì)謝謝觀看JavaScript程序設(shè)計(jì)第7章 document對(duì)象7.1 document對(duì)象概述7.2 document對(duì)象屬性7.3 document對(duì)象方法7.4 document對(duì)象集合JavaScript程序設(shè)計(jì)第7章 document對(duì)象7.5 與Window對(duì)象區(qū)別7.6 實(shí)戰(zhàn)：仿LED跑馬燈效果JavaScript程序設(shè)計(jì)7.1 document對(duì)象概述 什么是document對(duì)象 document對(duì)象是文檔的根節(jié)點(diǎn)，window.document屬性就指向這個(gè)對(duì)象。也就是說(shuō)，只要瀏覽器開(kāi)始載入HTML文檔，這個(gè)對(duì)象就開(kāi)始存在了

57、，可以直接調(diào)用。第7章 document對(duì)象JavaScript程序設(shè)計(jì)7.2 document對(duì)象屬性 document對(duì)象屬性 （1）document.title：設(shè)置文檔標(biāo)題等價(jià)于HTML的標(biāo)簽； （2）document.bgColor：設(shè)置頁(yè)面背景色； （3）document.fgColor：設(shè)置前景色(文本顏色)； （4）document.linkColor：未點(diǎn)擊過(guò)的鏈接顏色； （5）document.alinkColor：激活鏈接(焦點(diǎn)在此鏈接上)的顏色； （6）document.vlinkColor：已點(diǎn)擊過(guò)的鏈接顏色；第7章 document對(duì)象JavaScript程序設(shè)計(jì)7

58、.2 document對(duì)象屬性 document對(duì)象屬性 （7）document.URL：設(shè)置URL屬性從而在同一窗口打開(kāi)另一網(wǎng)頁(yè)； （8）document.location：等價(jià)于屬性URL； （9）document.referrer：文檔的URL，包含把瀏覽器帶到當(dāng)前文檔的鏈接（如果存在這樣的鏈接）； （10）document.lastModified：一個(gè)字符串，包含文檔的修改日期； （11）document.cookie：設(shè)置和讀出cookie； （12）document.charset：設(shè)置字符集 簡(jiǎn)體中文：gb2312；第7章 document對(duì)象JavaScript程序設(shè)計(jì)7.3

59、 document對(duì)象方法 document對(duì)象方法 （1）close()：關(guān)閉或結(jié)束open()方法打開(kāi)的文檔； （2）open()：產(chǎn)生一個(gè)新文檔，擦掉已有的文檔內(nèi)容； （3）write()：把文本附加到當(dāng)前打開(kāi)的文檔； （4）writein()：把文本輸出到當(dāng)前打開(kāi)的文檔，并附加一個(gè)換行符。第7章 document對(duì)象JavaScript程序設(shè)計(jì)7.3 document對(duì)象方法 任務(wù) 1.任務(wù)介紹用JavaScript編寫(xiě)一個(gè)動(dòng)態(tài)生成文檔示例。2.任務(wù)目標(biāo)學(xué)會(huì)Document對(duì)象屬性和方法的運(yùn)用。3.實(shí)現(xiàn)思路使用open()、close()、write()和writeln()方法動(dòng)態(tài)創(chuàng)建

60、在瀏覽器窗口中顯示的文檔。第7章 document對(duì)象JavaScript程序設(shè)計(jì)7.4 document對(duì)象集合 document對(duì)象集合 （1）document.anchors：Anchor對(duì)象的一個(gè)數(shù)組，該對(duì)象代表文檔中的錨； （2）document.applets：Applet對(duì)象的一個(gè)數(shù)組，該對(duì)象代表文檔中的Java小程序； （3）document.forms ：Form對(duì)象的一個(gè)數(shù)組，代表文檔中所有的form元素。 （4）document.images：Image對(duì)象的一個(gè)數(shù)組，代表文檔中所有的img元素。 （5）document.links：Link對(duì)象的一個(gè)數(shù)組，代表文檔中的超