JavaScript學(xué)習(xí)筆記

1、JavaScript 概述Java 與 JavaScript 全然不同不同點(diǎn)JavaScript 的對(duì)象模型與 Java 不同JavaScript 不是強(qiáng)類(lèi)型語(yǔ)言 Java 為強(qiáng)類(lèi)型語(yǔ)言JavaScript 變量無(wú)須事先申明，類(lèi)型動(dòng)態(tài)定義JavaScript 的對(duì)象是動(dòng)態(tài)的JavaScript 執(zhí)行時(shí)對(duì)象的數(shù)據(jù)成員和方法的數(shù)量是可變的 Java中的對(duì)象是靜態(tài)的相同點(diǎn) 表達(dá)式的語(yǔ)法、賦值語(yǔ)句、控制語(yǔ)句何時(shí)使用 JavaScript完成一些本來(lái)應(yīng)通過(guò)服務(wù)器端完成的編程任務(wù) 實(shí)現(xiàn)基于表單元素的用戶(hù)交互 實(shí)現(xiàn)與 Web 頁(yè)面的交互Document Object Model ： 文檔對(duì)象模型提供比 HT

2、ML/CSS 更復(fù)雜的用戶(hù)交互事件驅(qū)動(dòng)機(jī)制鼠標(biāo)點(diǎn)擊、按鍵等用戶(hù)動(dòng)作構(gòu)成事件 /events 大部分 JavaScript 程序需要對(duì)事件作出響應(yīng) 例如：驗(yàn)證表單數(shù)據(jù)注意：客戶(hù)端驗(yàn)證不可靠！ ！XHTML/JavaScript 文檔JavaScript 嵌入在 XHTML 文檔中，瀏覽器需要 JavaScript 解釋器 JavaScript 的編寫(xiě)位置 文檔頭部的 JavaScript 可被多次調(diào)用 文檔體中的 JavaScript 只執(zhí)行一次面向?qū)ο蠛?JavaScriptJavaScript 是基于對(duì)象的： object-basedJavaScript 對(duì)象封裝了數(shù)據(jù)和處理JavaScri

3、pt 不具有真正的繼承JavaScript 提供了基于原型的繼承JavaScript 對(duì)象對(duì)象是屬性 （屬性/值對(duì) ）的集合data properties數(shù)據(jù)屬性） method properties方法屬性）數(shù)據(jù)屬性可以是原始值 （primitive values）, 也可以是對(duì)其他對(duì)象的引 用Object對(duì)象是所有對(duì)象的祖先一個(gè) JavaScript 對(duì)象是一組屬性 /值對(duì)的集合屬性：名稱(chēng)值：數(shù)據(jù)值類(lèi)型或者函數(shù) 屬性集合是動(dòng)態(tài)的：隨時(shí)可添加或者刪除 所有函數(shù)都是對(duì)象，通過(guò)變量引用引入 JavaScriptJavaScript in XHTMLDirectly embedded:在XHTML

4、 文檔中直接嵌入Indirect reference :間接引用該方法推薦使用JavaScript 程序示例/HighLow.jsvar thinkingOf; /Number the computer has chosen(1 through 1000) var guess; /Users latest guess/Initialize the computers number thinkingOf=Math.ceil(Math.random()*1000);/Play until user guesses the number guess=mpt(Im thinking

5、 of a number between 1 and 1000.+ What is it?,);與 Java/C+ 區(qū)別一說(shuō)明： 1)沒(méi)有 main() 之類(lèi)的方法2) / Comments like Java/c+(/*/ alse allowed)3) Variable declarations: Not required, Data type not specified4) Semi-colons are usually not required,but always allowed at statement end5) Arithmetic operators same as Java

6、/C+6) String concatenation operator as well as addition7) Arguments can be any expressions8) Argument lists are comma-separated9) Object do notation for method calls as in Java/C+while(guess!=thinkingOf)/Evaluate the users guess if(guess= 0 & name_listlast new_name) name_listlast + 1 = name_listlast

7、;last-; name_listlast + 1 = new_name; document.write(The new name list is: , );for (index = 0; index name_list.length; index+) document.write(name_listindex, ); document.write(); /* end of the outer while loopWindow and DocumentWindow 對(duì)象：表示包含正在顯示的腳本文檔的窗口Document 對(duì)象：表示基于 DOM 模型顯示的文檔本身Window 對(duì)象有兩個(gè)屬性wi

8、ndow 表示文檔窗口對(duì)象本身 document 表示文檔對(duì)象 JavaScript 的默認(rèn)對(duì)象是當(dāng)前正在顯示的 Window 對(duì)象，因此，調(diào)用其 屬性和方法不需要包含對(duì)象引用Window 對(duì)象的三個(gè)方法可創(chuàng)建對(duì)話(huà)框alert() confirm() prompt()Document 對(duì)象的 Write 方法在瀏覽器窗口寫(xiě)出它的 write 方法的參數(shù)輸出被瀏覽器解釋為 html如果需要換行，則可添加 Function :函數(shù)函數(shù)返回語(yǔ)句如無(wú) return 語(yǔ)句，或 return 語(yǔ)句沒(méi)有包含表達(dá)式，返回值為 undefined 必須保證解釋器能夠在遇到函數(shù)調(diào)用之前首先遇到該函數(shù) 的定義函數(shù)是

9、對(duì)象函數(shù)可以被賦給變量和對(duì)象屬性 具有函數(shù)值的對(duì)象屬性即為對(duì)象方法Examplefunction fun() document.write(This surely is fun! );ref_fun = fun; / Now, ref_fun refers to the fun objectfun(); / A call to fun ref_fun(); / Also a call to funParametersParameters are passed by valu e: 按值傳遞函數(shù)可以修改作為實(shí)參的對(duì)象的內(nèi)容 因?yàn)閷?duì)象的引用被傳遞無(wú)法通過(guò)對(duì)形參賦值，實(shí)現(xiàn)對(duì)實(shí)參的修改 functio

10、n fun1(my_list) var list2 = new Array(1, 3, 5);my_list3 = 14;my_list = list2;var list = new Array(2, 4, 6, 8) fun1(list);參數(shù)檢查函數(shù)調(diào)用時(shí)不檢查參數(shù)的類(lèi)型和個(gè)數(shù)形參沒(méi)有類(lèi)型定義多余的實(shí)參被忽略多余的形參為 undefinedThis is typical of scripting languages( 動(dòng)態(tài)語(yǔ)言 ) 如何通過(guò)引用傳遞原始類(lèi)型的值 通過(guò)數(shù)組function by10(a) a0 *= 10; var x;var listx = new Array(1);lis

11、tx0 = x;by10(listx);x = listx0;通過(guò)函數(shù)function by10_2(a) return 10*avar x;x = by10_2(x);Document Object Model :文檔對(duì)象模型一個(gè)簡(jiǎn)單文檔的 DOM結(jié)構(gòu)怯 simpledocunient *I1ITTLunch1-所有HTML文檔可以被認(rèn)為是一棵概念樹(shù) 樹(shù)的節(jié)點(diǎn)即為JS對(duì)象JavaScript 中的元素訪(fǎng)問(wèn)第一種方法（使用表單數(shù)組）vform acti on = docume nt.forms0.eleme ntO第二種方法（使用名稱(chēng)屬性）所有從引用元素上升到body元素（不包括body元素）

12、都必須有名稱(chēng)屬性與XHTML標(biāo)準(zhǔn)不符vform n ame = myForm action =Referencing the in putdocume nt.myForm.pushMe第三種方法（使用 id 屬性）使用 getElementById() 方法 document.getElementById( “ turnItOn)使用隱式數(shù)組eCar Truck Bikevar numChecked = 0;vehicleGroup ” );var dom = document.getElementByID( for (index = 0; index dom.vehicles.length;

13、 index+) if (dom.vehiclesindex.checked) numChecked+;Events and Event Handling :事件與事件處理預(yù)定義事件EventTag Attributebluronblurchangeonchangeclickonclickdblclickondblclickfocusonfocuskeydownonkeydownkeypressonkeypresskeyuponkeyuploadonloadmousedownonmousedownmousemoveonmousemovemouseou七onmouseoutmauseov電工on

14、mouseovermouseuponmouseupresetonresetselectonselectsubmitonsubmitunloadonunload事件屬性出現(xiàn)在哪些標(biāo)簽中?AttributeTagDescriptiononblurThe link la&es the in口譏 focusThe button loses the input focusThe input element loses the inpuit fcreusThe text area loses the input focusThe seleclion element loses the input focu

15、scrLchangeinp uitAThe input element is changed and loses the input focusThe 戈皂茸t area is changed and lose& the input focusThe selection element is changed and loses the input focusonclickThe user cliciks on the linkThe input element is clickedondblclickMost elementsThe user doublle clicks the left m

16、ouse buttononf OdcusThe link acquires the input focusiThe input element receives the input focumA text area receives t忤e input focusA selection element receives the in put focusonkeydownB iorm elementsA key Is pressed downonkeypressB lariTi elementsA key is pressed down and releasedonkeupodyp form e

17、lerrientsA key Is releasedonloadcbodyThe document Is finished loadingAttributeTagDescriptiononmousedownMost elementsThe user clicks the left mouse buttononmousemoveMost elementsThe user moves the mouse cursor within the elementonmouseoutMost elementsThe mouse cursor is moved away from being over the

18、 elementonmouseoverMost elementsThfl mou&e cursor is movetf over the elementonmouseupMost elementsThe left mouse button is unclickedonreaetThe reset button is clickedonselectThe mouse cursor is moved over the elementThe (ext area is selected within the text aresonsubmitThe Submit button is pressedon

19、unloadThe user exits the document事件注冊(cè)將事件處理程序連接到事件兩種注冊(cè)方法通過(guò)設(shè)置標(biāo)簽的事件屬性注冊(cè)1) 單條JavaScript可賦給某個(gè) XHTML屬性2) 關(guān)聯(lián)函數(shù)：適用于事件處理程序多于一條語(yǔ)句通過(guò)設(shè)置 DOM 節(jié)點(diǎn)的關(guān)聯(lián)事件屬性注冊(cè)document.getElementByld(“ freeButton”).onclick =freeButton注意沒(méi)有參數(shù)!兩種不同注冊(cè)方式的比較1) 通過(guò)標(biāo)簽屬性注冊(cè)：更靈活，允許參數(shù)傳遞2) 通過(guò) DOM 節(jié)點(diǎn)的關(guān)聯(lián)事件屬性注冊(cè)易于分離 HTML 和 JS 代碼 在需要變更事件處理程序時(shí)，可重新注冊(cè)事件例子處理

20、復(fù)選框和單選按鈕事件 Model 152 Model 172 (Skyhawk) Model 182 (Skylane) Model 210 (Centurian) function planeChoice (plane) switch (plane) case 152:alert(A small two-place airplane for flight training); break;case 172:alert(The smaller of two four-place airplanes); break;case 182:alert(The larger of two four-place airplanes); break;case 210:alert(A six-place high-performance airplane); break; default:alert(Error