DHTML4-JavaScript核心

1、HandsOnJavaScript CoreHandsOn回顧回顧l什么是表單？表單有什么用？什么是表單？表單有什么用？l表單的常用屬性？表單的常用屬性？l說出說出4個常用的表單元素及其常用屬性？個常用的表單元素及其常用屬性？l說出說出4個常用的表單元素及其常用屬性？個常用的表單元素及其常用屬性？l說出其余常用的表單元素及其常用屬性？說出其余常用的表單元素及其常用屬性？l框架及其常用屬性？框架及其常用屬性？l可以在可以在HTML中加入哪些多媒體？如何加入？中加入哪些多媒體？如何加入？l說出說出display與與visibility的異同點？的異同點？HandsOn目標目標l理解什么是理解什么是

2、JavaScriptl理解理解JavaScript的語法基礎(chǔ)的語法基礎(chǔ)l了解了解JavaScript核心核心l熟悉熟悉JavaScript常用函數(shù)及類常用函數(shù)及類HandsOn澄清誤解澄清誤解lJavaScript是是Java的變種嗎？的變種嗎？ JavaScript確實受到了確實受到了Java的啟發(fā)，但是與的啟發(fā)，但是與Java本質(zhì)上是不同的本質(zhì)上是不同的兩者的關(guān)系類似雷鋒與雷峰塔的關(guān)系兩者的關(guān)系類似雷鋒與雷峰塔的關(guān)系lJavaScript簡單嗎？簡單嗎？很多人認為很多人認為JavaScript是一種簡單的腳本語言是一種簡單的腳本語言而非程序設(shè)計語言而非程序設(shè)計語言實際上，實際上，JavaS

3、cript是一種具有豐富功能的程是一種具有豐富功能的程序設(shè)計語言，其在執(zhí)行復(fù)雜的任務(wù)將會變得非序設(shè)計語言，其在執(zhí)行復(fù)雜的任務(wù)將會變得非常復(fù)雜常復(fù)雜HandsOn什么是什么是JavaScriptlJavaScriptJavaScript是一種具有是一種具有面向?qū)ο竽芰Φ?，面向?qū)ο竽芰Φ?，解釋型解釋型的程序設(shè)計語言。在句法結(jié)構(gòu)上與的程序設(shè)計語言。在句法結(jié)構(gòu)上與JavaJava相似。相似。l是一種松散類型的語言，即變量不必有一是一種松散類型的語言，即變量不必有一個明確的類型。個明確的類型。l本名本名LiveScriptLiveScript，由，由SunSun和和NetscapeNetscape開發(fā)，

4、開發(fā)，之所以叫之所以叫JavaScriptJavaScript，是，是當時網(wǎng)景為了營當時網(wǎng)景為了營銷考慮與銷考慮與SunSun公司達成協(xié)議的結(jié)果，后來公司達成協(xié)議的結(jié)果，后來ECMAECMA對其進行了標準化，之后的官方名稱對其進行了標準化，之后的官方名稱為為ECMAScriptECMAScript。HandsOnJavaScript版本版本HandsOnJavaScript用途用途lJavaScript應(yīng)用應(yīng)用客戶端客戶端JavaScript當把一個當把一個JavaScript解釋器嵌入到解釋器嵌入到Web瀏覽器當中瀏覽器當中這是這是JavaScript應(yīng)用最為廣泛的一個領(lǐng)域應(yīng)用最為廣泛的一個

5、領(lǐng)域服務(wù)器端服務(wù)器端JavaScript嵌入到嵌入到Web Server，比如微軟的，比如微軟的IIS嵌入到其他應(yīng)用嵌入到其他應(yīng)用可以嵌入到可以嵌入到C#語言中腳本化語言中腳本化C#腳本化腳本化Flash的的ActionScriptHandsOnJavaScript語法基礎(chǔ)語法基礎(chǔ)lJavaScript在語法上與在語法上與Java、C#語言是十語言是十分相似的：分相似的：兩者都遵循兩者都遵循C系語言的語法以及書寫風格系語言的語法以及書寫風格兩者都支持面向?qū)ο髢烧叨贾С置嫦驅(qū)ο髢烧叩臉俗R符都兩者的標識符都區(qū)分大小寫區(qū)分大小寫JavaScript擁有與擁有與C#大部分運算符大部分運算符擁有幾乎相同

6、的擁有幾乎相同的選擇、分支、循環(huán)選擇、分支、循環(huán)語句語句都支持異常以及其捕獲都支持異常以及其捕獲都支持正則表達式都支持正則表達式HandsOnl兩者都遵循兩者都遵循C系語言的語法以及書寫風格，系語言的語法以及書寫風格，這主要體現(xiàn)在：這主要體現(xiàn)在：使用成對的大括號劃分作用域使用成對的大括號劃分作用域注釋方式支持注釋方式支持行尾注釋和塊注釋行尾注釋和塊注釋標識符必須與字母標識符必須與字母_$開頭，后面可以是數(shù)字字開頭，后面可以是數(shù)字字母或母或$_支持轉(zhuǎn)義字符支持轉(zhuǎn)義字符有保留字和關(guān)鍵字有保留字和關(guān)鍵字HandsOn不同之處不同之處lJavaScript與與C#也有很多不同之處，而這也有很多不同之處

7、，而這正是我們本節(jié)課內(nèi)容的重點：正是我們本節(jié)課內(nèi)容的重點：JavaScript是一種是一種解釋型解釋型的的動態(tài)腳本動態(tài)腳本語言語言JavaScript是一種是一種弱類型弱類型的語言的語言JavaScript有一些額外的運算符有一些額外的運算符JavaScript有函數(shù)有函數(shù)JavaScript通過通過原型原型方式實現(xiàn)面向?qū)ο蠓绞綄崿F(xiàn)面向?qū)ο驤avaScript中的數(shù)組及常用類中的數(shù)組及常用類HandsOn解釋執(zhí)行解釋執(zhí)行l(wèi)JavaScript是一種腳本語言，這意味著：是一種腳本語言，這意味著：它是解釋執(zhí)行的，不需要編譯它是解釋執(zhí)行的，不需要編譯編程速度快，且腳本文件的大小明顯小于同類編程速度快

8、，且腳本文件的大小明顯小于同類C程序文件程序文件以效率為代價，運行速度與靜態(tài)編譯型語言相以效率為代價，運行速度與靜態(tài)編譯型語言相比要慢得多，而且占用更多的內(nèi)存比要慢得多，而且占用更多的內(nèi)存通常十分靈活，同其它語言編寫的程序組件之通常十分靈活，同其它語言編寫的程序組件之間通信功能很強大間通信功能很強大 HandsOn弱類型弱類型lJavaScript是一種弱類型的語言，這意味是一種弱類型的語言，這意味著：著：變量的類型可以隨需要任意轉(zhuǎn)換，并且通常是變量的類型可以隨需要任意轉(zhuǎn)換，并且通常是自動的自動的變量可以不需要聲明類型，在運行時會自動確變量可以不需要聲明類型，在運行時會自動確定變量的類型定變量

9、的類型HandsOn變量聲明變量聲明l在在JavaScript中，要使用一個變量之前，要中，要使用一個變量之前，要先聲明它：先聲明它：var i ; var sum;var i , sum;for( var i = 0; i 10; i+) /doing something.如果沒有聲明一個變量就使用它，如果沒有聲明一個變量就使用它，JavaScript將隱將隱式聲明其為全局變量式聲明其為全局變量HandsOnJavascript數(shù)據(jù)類型數(shù)據(jù)類型lJavascript支持以下數(shù)據(jù)類型：支持以下數(shù)據(jù)類型：基本數(shù)據(jù)類型：基本數(shù)據(jù)類型：數(shù)字數(shù)字 所有數(shù)字都是由所有數(shù)字都是由浮點數(shù)浮點數(shù)類型表示的類型

10、表示的當一個算術(shù)運算產(chǎn)生一個未定義的結(jié)果當一個算術(shù)運算產(chǎn)生一個未定義的結(jié)果(如如0/0)，則，則會返回一個非數(shù)字的特殊值，會返回一個非數(shù)字的特殊值，NaN，有專門的函數(shù)，有專門的函數(shù)isNaN()來檢測這個值來檢測這個值字符串字符串無無char類型，由類型，由(或或“)擴起來的擴起來的Unicode字符序列字符序列字符串的字符串的length屬性表示字符串的長度屬性表示字符串的長度支持支持substring()、charAt()、indexOf()等方法，但等方法，但沒有沒有trim()方法方法HandsOn基本數(shù)據(jù)類型基本數(shù)據(jù)類型布爾型值布爾型值true | falsenull代表”無對象“

11、的值undefined使用一個并未聲明的變量使用一個并未聲明的變量使用一個已經(jīng)聲明但還未賦值的變量使用一個已經(jīng)聲明但還未賦值的變量使用一個不存在的對象屬性使用一個不存在的對象屬性上述這三種情況會返回一個上述這三種情況會返回一個undefined值值l可以使用typeof 運算符返回描述變量類型的字符串HandsOn函數(shù)函數(shù)引用數(shù)據(jù)類型：引用數(shù)據(jù)類型：函數(shù)函數(shù)類似于類似于C#中的方法，使用中的方法，使用function關(guān)鍵字定義關(guān)鍵字定義函數(shù)，函數(shù)可以有形式參數(shù)，但是這些函數(shù)，函數(shù)可以有形式參數(shù)，但是這些形式參數(shù)形式參數(shù)不能指定類型不能指定類型function square(x) return

12、x*x; 等價于等價于var square = function(x) return x*x; JavaScript不會檢查傳入?yún)?shù)的個數(shù)，不會檢查傳入?yún)?shù)的個數(shù)，參數(shù)多的參數(shù)多的時候多余的參數(shù)會被忽略，參數(shù)不夠的時候少的時候多余的參數(shù)會被忽略，參數(shù)不夠的時候少的參數(shù)會被賦予參數(shù)會被賦予undefinedHandsOn數(shù)組數(shù)組數(shù)組數(shù)組有編號值的有序集合有編號值的有序集合var a = new Array(); 等價于等價于 var a = ;var b = 1,2,3,4,5,6;JavaScript中的數(shù)組可以有任意個數(shù)的元素中的數(shù)組可以有任意個數(shù)的元素，可以在任意時刻改變元素個數(shù)，可以在任

13、意時刻改變元素個數(shù)var a = new Array(10); a10 = 10; atom = 15; a-1.24 = 5;JavaScript中的數(shù)組中中的數(shù)組中可以存放不同類型的可以存放不同類型的元素元素，并且是稀疏的，這意味著下標可以不，并且是稀疏的，這意味著下標可以不連續(xù)連續(xù)HandsOn對象對象對象對象已命名值的無序集合已命名值的無序集合var empty = var homer = name: 張三張三, age: 20 等價于等價于 var homer = new Object(); = 張三張三; homer.age = 20;通過通過homer.na

14、me可以訪問屬性可以訪問屬性nameHandsOn包裝類包裝類l三種基本數(shù)據(jù)類型分別對應(yīng)有一個包裝類：三種基本數(shù)據(jù)類型分別對應(yīng)有一個包裝類：基本數(shù)據(jù)類型基本數(shù)據(jù)類型包裝類包裝類數(shù)字數(shù)字Number字符串字符串String布爾布爾Boolean當一個基本數(shù)據(jù)類型調(diào)用一個方法時，這個時候基當一個基本數(shù)據(jù)類型調(diào)用一個方法時，這個時候基本數(shù)據(jù)類型會自動裝箱成對應(yīng)的包裝類對象，然后本數(shù)據(jù)類型會自動裝箱成對應(yīng)的包裝類對象，然后調(diào)用對象的方法。調(diào)用對象的方法。HandsOn基本類型轉(zhuǎn)換基本類型轉(zhuǎn)換字符串字符串str數(shù)字數(shù)字num布爾布爾bflagstr 0;Number(str);num.toString(

15、);String(num);num+”;Boolean(num);!num;Number(bflag);bflag-0;Boolean(str);!str;bflag.toString();String(bflag);bflag+”;HandsOn數(shù)據(jù)類型之間的轉(zhuǎn)換關(guān)系數(shù)據(jù)類型之間的轉(zhuǎn)換關(guān)系值值字符串字符串數(shù)字數(shù)字布爾布爾未定義的值未定義的值“undefined”NaNfalsenull“null”0false非空字符串非空字符串不變不變數(shù)值或數(shù)值或NaNtrue空字符串空字符串不變不變0false0“0”不變不變falseNaN“NaN”不變不變falsetrue“true”1不變不變fal

16、se“false”0不變不變非非0數(shù)字數(shù)字數(shù)字字符串值數(shù)字字符串值 不變不變trueHandsOn額外的運算符額外的運算符l除了除了C#當中的運算符外，當中的運算符外，JavaScript還包還包括：括：相等運算符相等運算符(=)與等同運算符與等同運算符(=)= 表示值相同表示值相同“1” = true=表示值相同，并且類型也相同表示值相同，并且類型也相同注意：注意：null與與undefined相等但不等同相等但不等同對象的比較是地址的比較，只有地址相等才相等對象的比較是地址的比較，只有地址相等才相等HandsOnJavaScript實現(xiàn)面向?qū)ο髮崿F(xiàn)面向?qū)ο髄JavaScript目前版本不支

17、持真正的類，但是目前版本不支持真正的類，但是JavaScript中可以定義偽類中可以定義偽類(pseudo-class)來實來實現(xiàn)面向?qū)ο?，做到這一點的就是現(xiàn)面向?qū)ο螅龅竭@一點的就是構(gòu)造函數(shù)和原型構(gòu)造函數(shù)和原型對象對象。構(gòu)造函數(shù)：設(shè)計來和構(gòu)造函數(shù)：設(shè)計來和new運算符一起使用的函運算符一起使用的函數(shù)，此時該函數(shù)就與數(shù)，此時該函數(shù)就與C#、Java當中的構(gòu)造方法當中的構(gòu)造方法類似類似function Rectangle( w, h )this.width = w; /定義一個屬性this.height = h; /定義一個方法this.area = function() return this

18、.width * this.height var rect1 = new Rectangle(3,5);var a = rect1.area(); HandsOn原型原型l上述方案有效的模擬了類，但它仍不是最優(yōu)的，上述方案有效的模擬了類，但它仍不是最優(yōu)的，原因在于大多數(shù)情況下，每個對象中的屬性值可原因在于大多數(shù)情況下，每個對象中的屬性值可能不同，但是方法一般是相同的：能不同，但是方法一般是相同的：在上面的例子中，在上面的例子中，Rectangle類中的每個對象類中的每個對象的的area()方法應(yīng)當都是相同的方法應(yīng)當都是相同的,但上述例子中寫但上述例子中寫法會導致每一個對象都包含一個自己的法會導

19、致每一個對象都包含一個自己的area(),導致內(nèi)存空間的浪費以及效率的降低。導致內(nèi)存空間的浪費以及效率的降低。因此，我們應(yīng)當想到將方法和不變的屬性放在因此，我們應(yīng)當想到將方法和不變的屬性放在一個位置，所有對象都共同擁有它，這樣以來一個位置，所有對象都共同擁有它，這樣以來既提高了效率，又節(jié)省了空間，那么在既提高了效率，又節(jié)省了空間，那么在JavaScript中，這個位置就叫做原型。中，這個位置就叫做原型。HandsOnprototypel原型是這樣一種對象：每個原型是這樣一種對象：每個JavaScript對象當對象當中都包含一個原型對象，每個對象都從其原型中都包含一個原型對象，每個對象都從其原型

20、對象中對象中繼承繼承方法和不變的屬性。方法和不變的屬性。對于任意對象對于任意對象Object，其原型對象就是，其原型對象就是Ototypel原型存在的意義：原型存在的意義：使用原型明顯減少對象所需內(nèi)存數(shù)量使用原型明顯減少對象所需內(nèi)存數(shù)量可以為已經(jīng)存在的對象動態(tài)添加方法可以為已經(jīng)存在的對象動態(tài)添加方法HandsOn改進改進Rectanglel此時，此時，Rectangle類就可以加以改進：類就可以加以改進：function Rectangle( w, h)this.width = w;this.height = h; /添加原型方法添加原型方法Rtoty

21、pe.area = function()return this.width * this.height;var rec = new Rectangle(); /創(chuàng)建一個對象創(chuàng)建一個對象var area = rec.area(); /調(diào)用對象方法調(diào)用對象方法HandsOn原型應(yīng)用原型應(yīng)用l通過原型不僅可以擴展自定義類，還可以通過原型不僅可以擴展自定義類，還可以擴展內(nèi)建類型。擴展內(nèi)建類型。前面提到，前面提到，String類型沒有類型沒有trim()方法，而此方法，而此方法在實際當中經(jīng)常使用，我們可以擴展：方法在實際當中經(jīng)常使用，我們可以擴展： Stotype.trim = fun

22、ction () return this.replace(/(s*)|(s*$)/g, ); 一般情況下要慎用擴展內(nèi)建類型，這樣就更一般情況下要慎用擴展內(nèi)建類型，這樣就更改了改了JavaScript核心核心不允許為不允許為Ototype添加屬性和方法添加屬性和方法HandsOn常用函數(shù)與類常用函數(shù)與類HandsOnl全局函數(shù)全局函數(shù)l全局對象全局對象ArrayDateMathRegExpHandsOn全局函數(shù)全局函數(shù)l全局函數(shù)全局函數(shù)可以直接使用可以直接使用函數(shù)名稱函數(shù)名稱說明說明encodeURI()decodeURI()轉(zhuǎn)義某些字符串對轉(zhuǎn)義某些字符串對URI編碼編碼將轉(zhuǎn)義

23、后的字符串解碼將轉(zhuǎn)義后的字符串解碼eval()計算參數(shù)中表達式的值，返回結(jié)果計算參數(shù)中表達式的值，返回結(jié)果isNaN()如果是如果是NaN，返回，返回trueparseInt()從字符串解析一個整數(shù)從字符串解析一個整數(shù)escape()unescape()用轉(zhuǎn)移序列替換某些字符來編碼用轉(zhuǎn)移序列替換某些字符來編碼編碼編碼(解碼解碼)成成Unicode格式格式HandsOnArraylArray類常用方法類常用方法 var arr = 1,2,3; 方法名稱方法名稱示例示例說明說明concat()arr.concat(4,5)給數(shù)組添加元素給數(shù)組添加元素join()arr.join(+)將數(shù)組元素使

24、用分隔符連接將數(shù)組元素使用分隔符連接成字符串成字符串pop()arr.pop()刪除并返回最后一個元素刪除并返回最后一個元素push()arr.push(4)添加到數(shù)組末尾并返回長度添加到數(shù)組末尾并返回長度reverse()arr.reverse()顛倒數(shù)組元素順序顛倒數(shù)組元素順序sort()arr.sort()數(shù)組排序數(shù)組排序HandsOnDatelDate類常用方法類常用方法 var date = new Date();方法名稱方法名稱方法說明方法說明getDate()返回一個月的第幾天返回一個月的第幾天getDay()返回一周的第幾天返回一周的第幾天getFullYear()返回返回4位

25、年份位年份getTime()返回返回Date()對象的毫秒數(shù)對象的毫秒數(shù)toString()本地時間日期字符串本地時間日期字符串toLocaleString()本地時間本地格式化日期字符串本地時間本地格式化日期字符串與與C#中的中的Date相似，相似， Date也可以根據(jù)毫秒數(shù)構(gòu)建，或根也可以根據(jù)毫秒數(shù)構(gòu)建，或根據(jù)年月日時分秒構(gòu)建據(jù)年月日時分秒構(gòu)建HandsOnMathlMath類常用方法類常用方法方法名稱方法名稱方法說明方法說明max() / min()參數(shù)可以為參數(shù)可以為0個或多個，最大個或多個，最大/最小值最小值random()0到到1之間隨機數(shù)之間隨機數(shù)ceil() / floor()

26、大于此數(shù)的最小整數(shù)大于此數(shù)的最小整數(shù)/小于此數(shù)的最大整數(shù)小于此數(shù)的最大整數(shù)round()四舍五入四舍五入sin() / cos()正正/余弦余弦Math還有以下常量：還有以下常量：Math.EMath.PIHandsOnRegExplRegExp是是JavaScript中的處理正則表達式中的處理正則表達式的語句對象，類似于的語句對象，類似于Java中的中的Pattern類，類，類似于類似于C#中的中的Match。var regexp = new RegExp(a+);等價于等價于 var regexp = / a+ / ; 其中位于其中位于“/”定界符之間的部分就是將要在目標定界符之間的部分就

27、是將要在目標對象中進行匹配的模式對象中進行匹配的模式 HandsOnRegExplRegExp類常用方法類常用方法方法名稱方法名稱方法說明方法說明test()如果匹配返回如果匹配返回trueexec()如果不匹配返回如果不匹配返回null, 如果匹配返回如果匹配返回一個數(shù)組，這個數(shù)組的第一個數(shù)組，這個數(shù)組的第0個元素就個元素就是匹配的文本是匹配的文本lRegExp類常用屬性：類常用屬性：global 是否支持全局匹配是否支持全局匹配ignoreCase 是否支持忽略大小寫匹配是否支持忽略大小寫匹配HandsOn常用正則常用正則aaaAAA.match(new RegExp(a+);aaaAAA

28、A.replace( /a/g , b);aaaAAA.search(/a+/);String類當中有類當中有3個方法支持使用正則表達式：個方法支持使用正則表達式：方法名稱方法名稱方法說明方法說明match()與與RegExp類的類的exec()相同相同replace()返回替換后的字符串返回替換后的字符串search()返回第一個配置的起始位置索引返回第一個配置的起始位置索引，如果不存在返回，如果不存在返回-1HandsOn常用正則常用正則l驗證郵箱驗證郵箱 /w-+(.w-+)*w-+(.w-+)+$/l驗證手機驗證手機 /0*(13|15)d9$/HandsOn總結(jié)（一）總結(jié)（一）lJavaScript是一種腳本語言，使用它可以創(chuàng)建客戶端是一種腳本語言，使用它可以創(chuàng)建客戶端腳本和服務(wù)器端腳本。腳本和服務(wù)器端腳本。l可以使用不同的方法將可以使用不同的方法將JavaScript語句插入到語句插入到HTML文文檔中。檔中。lJavaScript支持的基本數(shù)據(jù)類型有數(shù)字型、邏輯型或支持的基本數(shù)據(jù)類型有數(shù)字型、邏輯型或布爾型布爾型 、字符串型、字符串型 和空型。和空型。l JavaScript支持的運算符包括：算術(shù)運算符、比較運支持的運算符包括：算術(shù)運算符、比較運算符、邏輯運算符、字符串運算符和求值運算符。算符、邏輯運算符、字符串運算符和求值運算符。l數(shù)組用于存儲具