Web-Sites-Design-and-Programming-6計算機科學(xué)與技術(shù)-網(wǎng)站設(shè)計與編程-雙語教學(xué)課件_第1頁
Web-Sites-Design-and-Programming-6計算機科學(xué)與技術(shù)-網(wǎng)站設(shè)計與編程-雙語教學(xué)課件_第2頁
Web-Sites-Design-and-Programming-6計算機科學(xué)與技術(shù)-網(wǎng)站設(shè)計與編程-雙語教學(xué)課件_第3頁
Web-Sites-Design-and-Programming-6計算機科學(xué)與技術(shù)-網(wǎng)站設(shè)計與編程-雙語教學(xué)課件_第4頁
Web-Sites-Design-and-Programming-6計算機科學(xué)與技術(shù)-網(wǎng)站設(shè)計與編程-雙語教學(xué)課件_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

WebSitesDesignandProgrammingLecturer:LijieGuoRoom:XNA508Phone:23678517Email:2024/4/31JavaScriptandHTMLDocumentsWDP[CN]第九章,

客戶端腳本：JavaScript,250－285

第十章,文檔對象模型與動態(tài)HTML,285－327WDP[EN]Chapter9,Client-SideScripting,312－335Chapter10,DocumentObjectModel,353－404P3W[CN]第五章,144－1732024/4/32OverviewTheDocumentObjectModel(DOM)ElementAccessinJavaScriptEventsandEventHandlingHandlingeventsfromBodyElementsHandlingeventsfromButtonElementsHandlingeventsfromTextBoxandPasswordElementsTheDOM2EventModel2024/4/33JavaScriptExecutionEnvironmentTheJavaScriptWindowobjectrepresentsthewindowinwhichthebrowserdisplaysdocumentsTheWindowobjectprovidesthelargestenclosingreferencingenvironmentforscripts.AllglobalvariablesarepropertiesofWindowImplicitlydefinedWindowproperties:document-areferencetotheDocumentobjectthatthewindowdisplaysframes-anarrayofreferencestotheframesofthedocumentEveryDocumentobjecthas:forms-anarrayofreferencestotheformsofthedocumentEachFormobjecthasanelementsarray,whichhasreferencestotheform’selementsDocumentalsohasanchors,linksandimages2024/4/34TheDocumentObjectModelDOM0issupportedbyallJavaScript-enabledbrowsers(nowrittenspecification)DOM1wasreleasedin1998DOM2in2000DOM3isthecurrentrecommendation.Nobrowserimplementsitcompletely.TheDOMisanabstractmodelthatdefinestheinterfacebetweenHTMLdocumentsandapplicationprograms—anAPI2024/4/35TheDocumentObjectModel(con.)AlanguagethatsupportstheDOMmusthaveabindingtotheDOMconstructsIntheJavaScriptbinding,XHTMLelementsarerepresentedasobjectsandelementattributesarerepresentedaspropertiese.g.,<inputtype="text"name="address">wouldberepresentedasanobjectwithtwoproperties,typeandname,withthevalues"text"and"address"2024/4/36DOMStructureDocumentsintheDOMhaveatreelikestructure

<htmlxmlns=":///1999/xhtml"><head><title>Asimpledocument</title></head><body><table><tr><th>Breakfast</th><td>0</td><td>1</td></tr><tr><th>Lunch</th><td>1</td><td>0</td></tr></table></body></html>2024/4/37Somethinglikethis…2024/4/38…orlikethis…2024/4/39…orthis!2024/4/310ElementAccessinJavaScriptThereareseveralwaystodoit1.DOMaddressExample(adocumentwithjustoneformandonewidget):

<formaction=""><inputtype="button"name="pushMe"></form>document.forms[0].element[0]Problem:documentchanges2024/4/311ElementAccessinJavaScript(con.)2.Elementnames

requirestheelementandallofitsancestors(exceptbody)tohavenameattributesExample:

<formname="myForm"action=""><inputtype="button"name="pushMe"></form>Problem:XHTML1.1specdoesn’tallowthenameattributeinformelementsOnlyvalidationproblem,nodifficultyforbrowsers2024/4/312ElementAccessinJavaScript(con.)3.getElementByIdMethod(definedinDOM1)Example:

<formaction=""><inputtype="button"id="pushMe"></form>document.getElementById("pushMe")Formelementsoftenhaveidsandnamesbothsettothesamevalue2024/4/313ElementAccessinJavaScript(con.)Checkboxesandradiobuttonhaveanimplicitarray,whichhastheirname

<formid="toppingGroup"><inputtype="checkbox"name="toppings"value="olives"/>...<inputtype="checkbox"name="toppings"value="tomatoes"/></form>...varnumChecked=0;vardom=document.getElementById("toppingGroup");for(index=0;index<;index++)if(dom.toppings[index].checked]numChecked++;2024/4/314EventsandEventHandlingAneventisanotificationthatsomethingspecifichasoccurred,eitherwiththebrowseroranactionofthebrowseruserAneventhandlerisascriptthatisimplicitlyexecutedinresponsetotheappearanceofaneventTheprocessofconnectinganeventhandlertoaneventiscalledregistrationDon’tusedocument.writeinaneventhandler,becausetheoutputmaygoontopofthedisplay2024/4/315EventsandtheirTagAttributes

EventTagAttributeblur onblurchange onchangeclick onclickfocus onfocusload onloadmousedown onmousedownmousemove onmousemovemouseout onmouseoutmouseover onmouseovermouseup onmouseupselect onselectsubmit onsubmitunload onunload2024/4/316Events,AttributesandTagsThesameattributecanappearinseveraldifferenttagse.g.,Theonclickattributecanbein<a>and<input>Usuallytheeventsareassociatedwithtypicalusesoftheelement.Ifyouhaveusedacorrectelement,youwillfindtheeventyouneed.2024/4/317Events,AttributesandTags(con.)Eventscanbetriggeredinmanyways.

E.G.Atextelementgetsfocusinthreeways:WhentheuserputsthemousecursoroveritandpressestheleftbuttonWhentheusertabstotheelementByexecutingthefocusmethod2024/4/3182024/4/319RegistrationofEventHandlerEventhandlerscanberegisteredintwoways,weteachtheformer.Byassigningtheeventhandlerscripttoaneventtagattribute

<inputtype“button”name=“Button” onclick="alert(‘Youclickedit!');“/>

<inputtype“button”name=“myButton” onclick="myHandler();"

/>2024/4/320RegistrationofEventHandler

(self-study)2.ThehandlerisregisteredbyassigningittoapropertyoftheJavaScriptobjectsassociatedwiththeHTMLelements.Asin:Vardom=document.getElementById(″myForm″)dom.elements[0].onclick=planeChoice;ThisregistrationmustfollowboththehandlerfunctionandtheXHTMLform.Ifthisisdone,forexample,foraradiobuttongroup,eachelementofthearraymustbeassignedInthiscase,thecheckedpropertyofaradiobuttonobjectisusedtodeterminewhetherabuttonisclickedThedisadvantageofspecifyinghandlersbyassigningthemtoeventpropertiesisthatthereisnowaytouseparametersTheadvantageofspecifyinghandlersbyassigningthemtoeventpropertiesistheseparationofXHTMLandJavaScript2024/4/321HandlingEventsfromBodyElementsEventsmostoftencreatedbybodyelementsareloadandunload

Example:theload

event-triggeredwhentheloadingofadocumentiscompleted

E.G.WDP-6/load.html2024/4/322HandlingEventsfromButton

ElementsPlainButtons–usetheonclickproperty<inputtype“button”name=“Button” onclick="alert(‘Youclickedit!');“/>RadioButtonsExample1:

E.G.WDP-6/radio_click.htmThehandlerisregisteredinthemarkup,sotheparticularbuttonthatwasclickedcanbesenttothehandlerasaparameterExampe2:(self-study)

E.G.WDP-6/radio_click2.htmThehandlerisregisteredbyassigningittoapropertyoftheJavaScriptobjectsassociatedwiththeXHTMLelementsThisregistrationmustfollowboththehandlerfunctionandtheXHTMLform2024/4/323HandlingEventsfromTextboxandPasswordElements(self-study)CheckingFormInputAgooduseofJavaScript,becauseitfindserrorsinforminputbeforeitissenttotheserverforprocessingThingsthatmustbedone:DetecttheerrorandproduceanalertmessagePuttheelementinfocus(thefocusfunction)-putsthecursorintheelementSelecttheelement(theselectfunction)-highlightsthetextintheelementTokeeptheformactiveaftertheeventhandlerisfinished,thehandlermustreturnfalse2024/4/324HandlingEventsfromTextboxandPasswordElements(self-study)Example1–comparingpasswordsTheformjusthastwopasswordinputboxesandResetandSubmitbuttonsTheeventhandleristriggeredbytheSubmitbutton

E.G.WDP-6/pswd_chk.htmExample2–checkingtheformatofanameandphonenumberTheeventhandlerwillbetriggeredbythechangeeventofthetextboxesforthenameandphonenumber

E.G.WDP-6/validator.htm2024/4/325TheDOM2EventModelDoesnotincludeDOM0features,buttheyarestillsupportedbybrowsersandwillbeforawhileDOM2ismodularized—onemoduleisEvents,whichhastwosubmodules,HTMLEventsandMouseEv

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論