javascript基礎(chǔ)(wxh)

1、JavascriptJavascript基礎(chǔ)知基礎(chǔ)知識識 為什么需要腳本程序n關(guān)于用戶錄入信息的驗證n關(guān)于動態(tài)改變網(wǎng)站上的內(nèi)容 n網(wǎng)頁上添加特效時鐘/滾動文字/拖放操作 n網(wǎng)頁游戲什么是腳本程序和JavaScriptn什么是腳本程序alert(new Date();nJavaScript簡介前身叫作Livescript，是一種基于對象(Object)和事件驅(qū)動(Event Driven)、并具有安全性的腳本語言。 nJavaScript與Java是兩個公司開發(fā)的兩個不同的產(chǎn)品，作用與用途大不一樣，但兩者語法上有很多相似之處，JavaScript并不是Java的子集。 njavascript語言

2、的特點基于對象/動態(tài)語言/無需編譯，直接解釋執(zhí)行 腳本代碼的位置l放置在一個單獨的文件中 l將腳本程序代碼作為屬性值 l放置在標簽對之間Javascript的關(guān)鍵字及保留字關(guān)鍵字(Keywords)break else new var case finally return voidcatch for switch while continue function this withdefault if throwdelete in try do instanceof typeof保留字(Reserved Words)abstract enum int short boolean export

3、interface staticbyte extends long super char final native synchronizedclass float package throws const goto private transientdebugger implements protected volatile double import publicJavascript基本語法lJavaScript中的標識符標識符是指JavaScript中定義的符號，例如，變量名，函數(shù)名，數(shù)組名等。標識符可以由任意順序的大小寫字母、數(shù)字、下劃線(_)和美元符號($)組成，但標識符不能以數(shù)字開頭

4、，不能是JavaScript中的保留關(guān)鍵字。 合法的標識符舉例：indentifier、username、user_name、_userName、$username非法的標識符舉例：int、98.3、Hello World lJavaScript嚴格區(qū)分大小寫computer和Computer是兩個完全不同的符號 lJavaScript程序代碼的格式 每條功能執(zhí)行語句的最后必須用分號(;)結(jié)束，每個詞之間用空格、制表符、換行符或大括號、小括號這樣的分隔符隔開 。l語句塊使用來表示lJavaScript程序的注釋 /*/中可以嵌套“/”注釋，但不能嵌套“ /*/”。 變量n定義一個變量，系統(tǒng)為之

5、設(shè)置一個標識，程序可以用變量名來指向具體的對象內(nèi)存，并通過變量名來獲得對應(yīng)的對象。n聲明變量要使用var關(guān)鍵字例如：var name;n聲明變量的同時為其賦值例如：var name = caishiyou;n對已賦值的變量賦予一個其他類型的數(shù)據(jù)例如：name = 123;n不事先聲明變量而直接使用例如：x = 1234;基本數(shù)據(jù)類型及常量nNumber(數(shù)字類型)1、整型常量(10進制8進制16進制)十六進制以0 x或0X開頭，例如：0 x8a。八進制必須以0開頭，例如：0123。十進制的第一位不能是0（數(shù)字0除外），例如：123。、實型常量 12.32、193.98、 5E7、4e5等。特殊

6、數(shù)值：NaN、Infinity、isNaN()、isFinite()nBoolean(布爾值)true和false。nString字符串 “a book of JavaScript”、abc、 “a”、“”。字符串中的特殊字符，需要以反斜杠（）后跟一個普通字符來表示，例如：r、n、t、b、 、xxxnnull常量nundefined常量 運算符l算術(shù)運算符l賦值運算符l比較運算符l邏輯運算符l位運算符算術(shù)運算符l+ 加法運算符或正值運算符，例如，x + 5，+6。l“+”還能實現(xiàn)多個字符串的相加，也能將字符串與其它的數(shù)據(jù)類型相連成一個新的字符串，條件是該表達式中至少有一個字符串，例如：“x”

7、+ 123的結(jié)果是“x123”。l- 減法運算符或負值運算符，例如，7 - 3，-8。l*乘法運算符，例如，3*6。l/ 除法運算符，例如，9/4。l%求模運算符（也就算術(shù)中的求余），例如，5%2。l+ 將變量值加1后再將結(jié)果賦給這個變量。l“+”有兩種用法：+x，x+。前者是變量在參與其它運算之前先將自己加1后，再用新的值參與其它運算，而后者是先用原值參與其它運算后，再將自己加1。例如：b = +a是a先自增，即a的值加1后，才賦值給b；而b = a+是先將a賦值給b后，a再自增。l-將變量值減1后再將結(jié)果賦給這個變量，與+的用法一樣。賦值運算符l賦值運算符的作用是將一個值賦給一個變量，最常

8、用的賦值運算符是“=”。還可以由“=”賦值運算符和其它一些運算符組合產(chǎn)生一些新的賦值運算符，例如， “+=”，“*=”等。l= 將一個值或表達式的結(jié)果賦給變量l例如， x = 3。l+= 將變量與所賦的值相加后的結(jié)果再賦給該變量l例如， x += 3等價于x = x + 3。l-= 將變量與所賦的值相減后的結(jié)果再賦給該變量l例如， x -= 3等價于x = x - 3。l*= 將變量與所賦的值相乘后的結(jié)果再賦給該變量l例如， x *= 3等價于x = x * 3。l/=將變量與所賦的值相除后的結(jié)果再賦給該變量l例如， x /= 3等價于x = x / 3。l%= 將變量與所賦的值求模后的結(jié)果再

9、賦給該變量l例如， x %= 3等價于x = x % 3。比較運算符l當左邊操作數(shù)大于右邊操作數(shù)時返回true，否則返回false。l=當左邊操作數(shù)大于等于右邊操作數(shù)時返回true，否則返回false。l將左邊操作數(shù)在內(nèi)存中的二進制數(shù)據(jù)右移右邊操作數(shù)指定的位數(shù)，左邊移空的部分，補上左邊操作數(shù)原來的最高位的二進制位值。 l 將左邊操作數(shù)在內(nèi)存中的二進制數(shù)據(jù)右移右邊操作數(shù)指定的位數(shù)，左邊移空的部分補0。程序流程控制n順序結(jié)構(gòu) nif條件選擇語句 nswitch選擇語句 nwhile循環(huán)語句 ndo while語句 nfor循環(huán)語句 nbreak與continue語句 if語句語法if (條件語句)

10、 執(zhí)行語句多學兩招：多學兩招：if(x = null)或if(typeof(x) = “undefined”)可以簡寫成if(!x)。if (條件語句)執(zhí)行語句塊1 else執(zhí)行語句塊2多學兩招：多學兩招：變量 布爾表達式？語句1:語句2；例如，y = x0 ? x : -x;if (條件語句1)執(zhí)行語句塊1 else if(條件語句2)執(zhí)行語句塊2.else if(條件語句n)執(zhí)行語句塊nelse執(zhí)行語句塊n+1if語句的嵌套if (x 1)if(y = 1)alert(x 1,y = 1);elsealert(x 10)if(y = 1)alert(x 10,y = 1);elsealer

11、t(x?,y?);if (x 1)if(y = 1)alert(x 1,y = 1);elsealert(x 10)if(y = 1)alert(x 10,y = 1);elsealert(x 10,y != 1);if (x 1)if(y = 1)alert(x 1,y = 1);elsealert(x 10)if(y = 1)alert(x 10,y = 1);elsealert(x?,y?);if (x 1)if(y = 1)alert(x 1,y = 1);elsealert(x 10)if(y = 1)alert(x 10,y = 1);elsealert(“1 = x = 10);

12、switch選擇語句 switch(表達式)case 取值1:語句塊1break;case 取值n:語句塊nbreak;default:語句塊n+1break;var x = 2;switch(x)case 1: alert(Monday);break;case 2:alert (Tuesday);break;case 3:alert (Wednesday);break;default:alert (Sorry,I dont Know);case 1:case 2:case 3:case 4:case 5: alert (working day);break;default:alert (of

13、f day);while循環(huán)語句while(條件表達式語句)執(zhí)行語句塊var x = 1;while(x 3) alert(x= + x); x+; 多想一想：多想一想：在while從句后面增加一個分號（;）后，程序?qū)a(chǎn)生怎樣的執(zhí)行效果。do while循環(huán)語句do執(zhí)行語句塊while(條件表達式語句);var x = 3;while(x = 0)alert(ok1);x+; var y = 3; do alert(ok2); y+; while(y = 0);for循環(huán)語句for(初始化表達式;循環(huán)條件表達式;循環(huán)后的操作表達式)執(zhí)行語句塊var output = ;for(var x=1;

14、 x10; x+)output = output + x= + x;alert(output);for(;).等效于while(true)for.in循環(huán)語句for(變量 in 集合或?qū)ο?執(zhí)行語句塊var as= 1,4,5,6,output=;for(var x in as)output += x= + asx;alert(output);var as=id:5,name:test;for(var x in as)output += x+=+asx;alert(output);break與continue語句break語句語句 ：st:while(true)while(true)break

15、 st;continue語句語句 ：var output = ;for(var x=1; x10; x+)if(x%2 = 0)continue;output=output + x= + x;alert(output);函數(shù)n函數(shù)的作用與定義n全局變量與局部變量 n參數(shù)個數(shù)可變的函數(shù) n創(chuàng)建動態(tài)函數(shù) nJavaScript中的系統(tǒng)函數(shù) 函數(shù)的作用主程序函數(shù)1函數(shù)2函數(shù)1函數(shù)3函數(shù)1函數(shù)2函數(shù)3函數(shù)的定義及調(diào)用定義一個函數(shù)的格式如下：function 函數(shù)名（參數(shù)列表）程序代碼return 表達式;var msg = 全局變量;function square(x,y)var sum;sum =

16、x*x + y*y;return sum;function show()var msg = 局部變量;alert(msg);/var sum;alert(sum= + sum);sum=square(2,3);alert(sum= + sum);show();undefinedalert(sum= + square(2,3);對函數(shù)進行調(diào)用的幾種方式： 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）變量 = 函數(shù)名（傳遞給函數(shù)的參數(shù)1，傳遞給函數(shù)的參數(shù)2，.）對于有返回值的函數(shù)調(diào)用，也可以在程序中直接使用返回的結(jié)果，例如：alert(sum=“ + square(2,3);不指定任何函數(shù)

17、值的函數(shù)，返回undefined。全局變量與局部變量var msg = 全局變量;function show()msg = 局部變量;show();alert(msg);var msg = 全局變量;function show()var msg; msg = 局部變量;show();alert(msg);此處的msg值為多少？值為“局部變量”此處的msg值為多少？值為“全局變量”JavaScript中的系統(tǒng)函數(shù)(Global類)nencodeURI及encodeURIComponent方法返回對一個URI字符串編碼后的結(jié)果。ndecodeURI及decodeURIComponent()方法將一

18、個已編碼的URI字符串解碼成最初始的字符串并返回。 nparseInt方法將一個字符串按指定的進制轉(zhuǎn)換成一個整數(shù)，語法格式為：parseInt(numString, radix)。如果沒有指定第二個參數(shù)，則前綴為 0 x 的字符串被視為十六進制，前綴為 0 的字符串被視為八進制，所有其他字符串都被視為是十進制。nparseFloat方法將一個字符串轉(zhuǎn)換成對應(yīng)的小數(shù)。 nisNaN方法用于檢測parseInt和parseFloat方法的返回值是否為NaN。 nescape方法返回對一個字符串進行編碼后的結(jié)果字符串。所有空格、標點、重音符號以及任何其他非 ASCII 字符都用 %xx 編碼替換，其

19、中xx等于表示該字符的Unicode編碼的十六進制數(shù)，字符值大于255的字符以%uxxxx格式存儲。 nunescape 方法將一個用escape方法編碼的結(jié)果字符串解碼成原始字符串并返回。neval 方法將其中的參數(shù)字符串作為一個JavaScript表達式執(zhí)行。 面向?qū)ο蟮膉avascriptn類(對象)與對象(對象實例) n構(gòu)造方法與this關(guān)鍵字的作用 n在函數(shù)中修改參數(shù)值的問題對象及對象實例n對象中所包含的變量就是對象的屬性，對象中所包含的對屬性進行操作的函數(shù)就是對象的方法，對象的屬性和方法都叫對象的成員。 n對象是對某一類事物的描述，是抽象上的概念；而對象實例是一類事物中的具體個例。

20、n能夠被用來創(chuàng)建對象實例的函數(shù)就叫對象的構(gòu)造函數(shù)，只要定義了一個對象的構(gòu)造函數(shù)，就等于定義了一個對象。使用new關(guān)鍵字和對象的構(gòu)造函數(shù)就可以創(chuàng)建對象實例，語法格式如下：var objInstance = new ObjName(傳遞給該對象的實際參數(shù)列表);function Person()var person1 = new Person();person1.age = 18; =zxx;/alert( + :“ + person1.age);function sayFunc()alert( + :“ + person1.

21、age);person1.say = sayFunc;person1.say();構(gòu)造函數(shù)對象實例屬性方法l可以為對象實例無限制地添加新的成員 用“對象實例名.成員名”的格式訪問，也可以用（對象實例“成員變量名”）的格式，例如，person1“age”構(gòu)造函數(shù)與this關(guān)鍵字n為一個對象實例新增加的屬性和方法，不會增加到同一個對象所產(chǎn)生的其它對象實例上。 n所有的實例對象在創(chuàng)建后都會自動調(diào)用構(gòu)造函數(shù)，在構(gòu)造函數(shù)中增加的屬性和方法會被增加到每個對象實例上。 n對象實例是用new關(guān)鍵字創(chuàng)建的，在構(gòu)造方法中不要有返回結(jié)果的return語句。 n調(diào)用對象的成員方法時，需要使用“對象實例.成員方法”的形

22、式，很顯然，用作成員方法的函數(shù)被調(diào)用時，一定伴隨有某個對象實例。this關(guān)鍵字代表某個成員方法執(zhí)行時，引用該方法的當前對象實例，所以，this關(guān)鍵字一般只在用作對象成員方法的函數(shù)中出現(xiàn)。function Person(name,age)this.age = age; = name;this.say = sayFunc;function sayFunc()alert( + :“ + this.age);var person1 = new Person(張三,18);person1.say();var person2 = new Person(李四,20);pe

23、rson2.say();引用傳遞及值傳遞將基本數(shù)據(jù)類型的變量作為函數(shù)參數(shù)傳遞的情況：function changeValue(x)x = 5;var x = 3;changeValue(x);alert(x);將對象類型的變量作為函數(shù)參數(shù)傳遞的情況： function Person(name,age)this.age = age; = name;this.say = sayFunc;function sayFunc()alert( + :“ + this.age);function change(p1) = 李四;var person1 = n

24、ew Person(張三,18);change(person1);person1.say();此處的x值為多少？值為3此處的值為多少？值為“李四”成都傳智播客 JavaScript的內(nèi)部類動態(tài)對象使用“對象實例名.成員”的格式來訪問其屬性和方法。靜態(tài)對象直接使用“對象名.成員”的格式來訪問其屬性和方法。nObject類(對象) nNumber類(對象)nString類 (對象)nMath類(對象) nDate類(對象) ntoString方法 Object類Object類是所有javascript類的基類，提供了一種創(chuàng)建自定義對象的簡單方式，不需要程序員再定義構(gòu)造函數(shù)。

25、 主要屬性：constructor-對象的構(gòu)造函數(shù)prototype-獲得類的prototype對象,static性質(zhì)主要方法：hasOwnProperty(property)是否屬于本類定義的屬性isPrototypeOf(object)是否是指定類的prototypepropertyIsEnumerable(property)是否可例舉的屬性toString()返回對象對應(yīng)的字符串valueOf()返回對象對應(yīng)的原始類型值function getAttributeValue(attr)alert(personattr);var person = new Object();person.na

26、me = zs;person.age = 18;getAttributeValue(name);getAttributeValue(age);Number類Number類代表數(shù)據(jù)類，包含一些靜態(tài)的成員及數(shù)值處理的方法。 靜態(tài)屬性：MAX_VALUE、MIN_VALUE、NEGATIVE_INFINITY、POSITIVE_INFINITY、NaN主要方法：toFixed(n)取小數(shù)位數(shù)，自動四舍五入toPrecision(n)是否是指定類的prototypepropertyIsEnumerable(property)是否可例舉的屬性toString()返回對象對應(yīng)的字符串valueOf()返回

27、對象對應(yīng)的原始類型值var oNumberObject = new Number(99);alert(oNumberObject.toFixed(2); /outputs “99.00”String類nlength屬性nanchor、big、bold、fontcolor、link等方法ncharAt方法注意：一個字符串中的第一個字符的索引位置為0，依次類推。ncharCodeAt方法注意：返回的結(jié)果是字符的unicode編碼。nconcat方法，連接字符串nindexOf方法及l(fā)astIndexOf方法nmatch、search方法nreplace、split方法nslice方法說明：str1

28、.slice(0)和str1.slice(0,-1)都是返回整個字符串。nsubstr、substring方法substring方法返回的內(nèi)容不包含結(jié)束位置的字符。ntoLowerCase、toUpperCase 方法 Math類 屬性：nE，代表數(shù)學常數(shù)e，約等于 2.718。nLN10，代表10的自然對數(shù)，約等于 2.302。nLN2，代表2的自然對數(shù)，約等于 0.693。nPI，代表數(shù)學常數(shù)的值，約等于 3.14159。nSQRT1-2，代表2 的平方根分之一，約等于0.707。nSQRT2，代表2 的平方根，約等于1.414。方法：abs方法，返回數(shù)字的絕對值。sin、cos方法，分別

29、返回數(shù)字的正弦、余弦值。asin、acos方法，分別返回數(shù)字的反正弦、反余弦值。random方法，返回介于 0 和 1 之間的偽隨機數(shù)Math對象是一個靜態(tài)類，不能使用new關(guān)鍵字創(chuàng)建對象實例，應(yīng)直接使用“對象名.成員”的格式來訪問其屬性或方法，例如，var num = Math.random();Date類ntoGMTString方法，返回Date對象實例所表示的日期的字符串形式，該字符串使用格林尼治標準時間 (GMT) 格式，例如，“05 Jan 1996 00:00:00 GMT”。ngetYear、getMonth、getDate、getDay方法ngetHours、getMinute

30、s、getSeconds、getMilliseconds方法ngetTime方法，返回自1970年1月1日0點0分0秒算起，至Date對象實例代表的時間為止的毫秒數(shù)。var current_time = new Date();var strDate = current_time.getYear() + 年;strDate += current_time.getMonth() + 月;strDate += current_time.getDate() + 日 ;strDate += current_time.getHours() + :;strDate += current_time.getMi

31、nutes() + :;strDate += current_time.getSeconds();alert(strDate);n構(gòu)造方法 ：Date()、Date(dateVal) 、Date(year, month, date, hours, minutes, seconds,ms) nparse方法，分析一個表示日期時間的字符串，返回它所表示的時間值，該值以自1970年1月1日0點0分0秒算起的毫秒值表示。parse方法屬于一個靜態(tài)方法 。toString方法toString 方法是JavaScript中的所有內(nèi)部對象的一個成員方法，它的主要作用就是將對象中的數(shù)據(jù)轉(zhuǎn)換成某種格式的字符串來

32、表示，具體的轉(zhuǎn)換方式取決于對象的類型。舉例：var x = 328;alert(hex=“ + x.toString(16) + bin=“ + x.toString(2);對象專用語句with語句語句 ：with (對象名稱)執(zhí)行語句塊 for.in語句語句：for（變量 in 對象）執(zhí)行語句forin舉例：舉例： function Person() = zxx;this.age = 19;this.height = 176;var p1 = new Person();var prop, str = ;for(prop in p1)str += prop + ;alert(

33、str);with舉例：舉例：var current_time=new Date();with(current_time)var strDate= getYear() + 年;strDate += getMonth() + 月;strDate += getDate() + 日;strDate += getHours() + :;strDate += getMinutes() + :;strDate += getSeconds();alert(strDate); Host ObjectHost Object是指原始對象以外對象，通常是指javascript運行環(huán)境中提供的內(nèi)部對象，比如瀏覽器中關(guān)

34、于DOM及BOM提供。幾個用于交互的方法：幾個用于交互的方法：alert顯示提示信息框confirm確認框prompt信息錄入框window中的對象：alert(hello world);var ret=confirm(是否要刪除學生記錄?);if(ret)alert(刪除);else alert(不刪除);var s=prompt(請輸入開源團隊名稱:,EasyJF);alert(s);數(shù)組n數(shù)組列表 n用對象的方式實現(xiàn)數(shù)組nArray對象n數(shù)組成員 數(shù)組列表n數(shù)組列表用于表示一組數(shù)據(jù)的集合，它由一對方括號 () 包圍，列表中的每個元素用逗號分隔，數(shù)組元素可以是任意類型的數(shù)據(jù)（包括其他數(shù)組）

35、。例如，var arr = zs,123,li,3.5;n對于每個數(shù)組變量，都有一個length屬性，表示該數(shù)組中元素的個數(shù)。 n使用“數(shù)組變量名索引號”的格式來訪問每個數(shù)組元素。數(shù)組列表中的第一個元素的索引號為0，最后那個元素的索引號為數(shù)組的length屬性值-1。n數(shù)組列表的每個元素既可以是有效的JavaScript 表達式，也可以為空，空元素的值為undefined。例如， var arr = 1,5; n數(shù)組元素本身又是數(shù)組，這就叫數(shù)組的數(shù)組，例如， “Names”,“Beansprout”,“Pumpkin”,“Max”, “Ages”,6,5,4 ，使用“數(shù)組變量名子數(shù)組索引號子數(shù)組中的元素索引號”的格式來訪問數(shù)組的數(shù)組中的元素。va