Txheej txheem cej luam: Nyob rau cov tshooj no peb yuav tham txog qhov browser zajlus ua JavaScript. Java tsab ntawv txheej xwm tseem ceeb heev kom lawv ua tau ntau tus paub tab. Lwm yam tseem ceeb kis yog qhov browser compatibility. Raws li tus java tsab ntawv yog kos rau hauv cov ntaub ntawv html, cov tiav ntawm tsab ntawv java yog browser tub. Java scripts yeej tseem matured txaus lis browser txheej xwm.
Taw qhia:
Ib qhov browser hem yog lub teeb liab los ntawm qhov browser rau daim ntawv thov hais ib yam. Cov txheej xwm yog cov yam nram qab no
- Txheej xwm DOM: No yog tshwmsim los ntawm cov DOM hais e.g. qhov kev tshwm sim nias ib yog triggered thaum lub caij clicked los sis dua tej plaub nas yog triggered thaum tus nas pointer hovered rau lub caij. Cov txheej xwm xa mus ib java tsab ntawv chaws rau daim ntawv.
- Qhov rai txheej xwm: Cov no tshwmsim thaum lub qhov rai browser resized.
Lub sijhawm no zoo li cas?
Ib qho kev tshwm sim yuav tau txhais tias yog ib tes hauj lwm/ua hauj lwm uas xa ib lub teeb liab los java tsab ntawv. Tam sim no java tsab ntawv executes teb raws li tej kev tshwm sim. Tab sis lub caij yuav tsum mus tso npe xa teeb liab los tivthaiv tsab ntawv duas paub java lawm. Nram qab no yog ib co kev cov txheej xwm.
Qhov rai txheej xwm: Tej txheej xwm no tshwmsim thaum qhov rai browser resized.
Txheej xwm DOM: Cov no yog tab tom thaum ib lub caij DOM yeej muaj qee yam nkaus.
Lwm yam txheej xwm: Tej txheej xwm no zoo tag nrho lwm yam txheej xwm apart from ywg saum toj no.
Tej handlers: Peb yuav tsum to taub tias yog sib txawv loj ntawm java thiab java tsab ntawv. Nyob rau hauv java, threading ntau yog tau tab sis yog ib qho java tsab ntawv thaum txoos uake threaded. Li no cov kev tshwm sim handlers muaj ntawv kho mob tseg lawv. Nws hais, Peb xav tias ib tug neeg muaj yam ob txheej xwm, mouseover thiab ces mousemove. Li no cov kev tshwm sim mouseover yuav tau tseg ua ntej. Thaum no cov kev tshwm sim thawj zaug tiav, yuav tau sau tej mousemove.
Yog ib tsab ntawv tau ua ib txoj kev ua txhaum rau ib qho kev tshwm sim, tej zaum nws yuav tsum muaj ib tug ua mob rau nws. Qhov tso cai no raug xa mus ua tej handlers. Feem ntau cov zog muaj npe hu ua cov hom ntawv – ua EVENT_NAME e.g. onclick thiab lwm yam. Tej handlers nyob rau hauv tsab ntawv java yog ib qho threaded thiab sau lawv. Li no yog hais tias muaj ob txheej xwm tshwm sim rau tib lub sijhawm, lawv handlers yuav PHA ib lwm yam tom qab. Muaj ntau ntau txoj kev uas cov kev tshwm sim handlers raug. Cov no yog.
Siv lossis HTML: Cov kev tshwm sim handler yuav tau kab mob rau hauv rau cov markup siv attribute rau-kev tshwm sim.
Qhia 1: Lub handler hem lossis html
[Chaws]
<daim id input = “b1” tus nqi = “Nyem qhov kuv” onclick = “alert(' Tsaug! Kuv yog clicked. ‘); ” yam = “khawm” />
[/Chaws]
Thaum twg txoj no tseg, peb pom ib lub pob nrog ib tug ntaus cim – 'Nyem kuv'. Yog hais tias tus neeg siv hits no khawm ib qhov rai ceeb toom cov lus – Tsaug! Kuv yog clicked. Peb yuav hu rau ib tug muaj nuj nqi rau cov kev tshwm sim yoog. Xav txog cov cai nram qab no
Qhia 2: Lub handler kev tshwm sim muaj nuj nqi
[Chaws]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <lub taub hau> | |||||||||||||||
| <tsab ntawv yam =”ntawv nyeem/javascript”> | |||||||||||||||
| count_rabbits muaj nuj nqi() { | |||||||||||||||
| rau(Var kuv = 1; Kuv <= 3; i ) { | |||||||||||||||
| alert( “Luav “+i ” tawm hauv lub kaus mom!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </tsab ntawv> | |||||||||||||||
| </lub taub hau> | |||||||||||||||
| <lub cev> | |||||||||||||||
| <input yam = “khawm” onclick = “count_rabbits()” tus nqi = “Suav luav!”/> | |||||||||||||||
| </lub cev> | |||||||||||||||
| </html>[/Chaws]Lwm cov kev txaus siab rau cov kev tshwm sim siv this.innerHTML nyob qhov twg no xa mus rau lub caij tam sim no. Cov cai hauv qab no illustrates noQhia 3: Tej handler siv this.innerHTML
[Chaws] <khawm onclick = “alert ( this.innerHTML )”> Kuv mus pom kuv nyem </khawm> [/Chaws] Siv cov cuab yeej kwv DOM: Nov ALJ txim uas siv cov cuab yeej – onevent. Qhov no peb yuav tau lub caij mus thawj thiab ces cob lub handler mus tus kheej onevent. Cov cai nram qab no yog ib qho piv txwv qhov chaw kawm ib nias handler rau lub caij uas tus id ' myId’ Qhia 4: Tej handler siv cuab yeej kwv DOM [Chaws] <daim id input = “myId” yam = “khawm” tus nqi = “Nias kuv”/> <tsab ntawv> document.getElementById( ‘ myId ‘ ).onclick = muaj nuj nqi() { alert('Tsaug') } </tsab ntawv> [/Chaws] Ntawm no ob yam nram qab no yuav tsum tau muab sau kom siv rau qhov no – · Nws yog ib tug, tsis muaj attribute thiab nws lub npe yog onevent uas yog tus nab rhiab thiab yuav tsum tau nyob rau hauv rooj plaub no tsawg dua. · Tus handler yuav tsum ua kom tsis muaj txoj hlua. Thaum twg tus browser ntev ib onevent attribute rau cov HTML markup, nws tsim tau ib tug muaj nuj nqi siv nws txheem thiab assigns rau cov cuab yeej. Li ntawd, ob tus leb hauv qab no puas zoo li qub Qhia 5: Tej handler siv xwb HTML [Chaws] <input yam = “khawm” onclick = “alert( ' Nyem!’ )” tus nqi = “Khawm”/> [/Chaws] Qhia 6: Tej handler siv cov HTML & JS. [Chaws] <input yam = “khawm” ID = “khawm” tus nqi = “Khawm”/> <tsab ntawv> document.getElementById('khawm').onclick = muaj nuj nqi() { alert(' Nyem!’) } </tsab ntawv> [/Chaws] JavaScript overwrites ib handler uas teev nyob rau hauv markup. Cov nram qab no snippet ntau xyoo ib markup handler rau ib lub tshiab Qhia 7: Overwriting handler txheej. <input yam =”khawm” onclick =”alert('Ua ntej')” tus nqi =”Nias kuv”/> <tsab ntawv> document.getElementsByTagName('input')[0].onclick = muaj nuj nqi() { alert('Tom qab') } </tsab ntawv> [/Chaws] Siv kev tshwj xeeb: Nyob rau hauv ib txoj JavaScript tshiab, qhov twg interface sib txawv li ko uas tej kev cai txoj kev yuav siv los cob handlers. Microsoft muab ib cov tshuaj twg tej hauj lwm tsuas nrog IE version tsawg tshaj 9 thiab kuj tau nrog Opera. Handlers yuav raug ua hauj lwm thiab raws li detached Qhia 8: Attaching thiab tshem handlers element.attachEvent( “rau” + hem, handler) [/Chaws] Tshem ib Handler – [Chaws] element.detachEvent( “rau” + hem, handler) [/Chaws] Siv cov kev tshwm sim muab, peb yuav cob ntau handlers mus rau lub caij tib. Snippet chaws hauv qab no qhia tau hais tias qhov no Qhia 9: Muab ntau handlers mus rau ib lub caij. [Chaws] <daim id input = “myElement” yam = “khawm” tus nqi = “Nias kuv” /> <tsab ntawv> Var myElement = document.getElementById( “myElement” ) Var handler = muaj nuj nqi() { alert( ' Tsaug!’ ) } Var handler2 = muaj nuj nqi() { alert( ' Tsaug dua!’ ) } myElement.attachEvent( “onclick”, handler) myElement.attachEvent( “onclick”, handler2) </tsab ntawv> [/Chaws] Rhais cov nplooj ntawv thaum txoos uake tsis dhau lub parameter 'qhov'. As per W3C txheem ALJ handler hauv qab no ua haujlwm nyob rau yuav luag txhua browsers uas yog siv hnub no. Attaching ib Handler Qhia 10: Attaching thiab tshem handlers as per w3c element.addEventListener ( hem, handler, theem ) [/Chaws] caij. removeEventListener ( hem, handler, theem ) [/Chaws]
Tej txheeb tej yam ua tau: Peb yuav tsum saib xyuas plaub yam nram qab no thaum tuav tej txheeb tej yam ua tau · Sau npe rau cov kev tshwm sim handler: Qhov no yuav ua tau uas teev ntsiab e.g onevent ntawm tus kheej. onclick los yog onkeypress thiab lwm yam. Qhov no ua haujlwm nrog qhov browser tag nrho tiam sis muaj ib hnub uas peb tau xa tsuas muaj ib handler kev tshwm sim rau lub caij kawg. Lub sijhawm ntawv yuav raug tshem tawm hauv lub zoo zam siv detachEvent los yog removeEventListener. · Tau cov kev tshwm sim kwv: Feem ntau cov browsers kis tau rau tej kwv li ib tug sib cav mus rau lub handler. Peb cov sijhawm hauv qab no yog generated thaum tus neeg siv clicks nws nas. o Mousedown: ntawd hais tias nas yog pressed. o Mouseup: ntawd hais tias nas yog tso tawm. o Nyem qhov: ntawd hais tias nas yog clicked. Yog hais tias qhov no yuav tshwm sim tau succession, qhov ntawd hais tias ib tug double click muaj tshwm sim. · Extract ntaub ntawv los ntawm koj cov kwv – Cov kauj ruam thib peb yog qhov extract txiav txim hais txog cov lus qhia ntawm tus tsav haus dejcawv thiab pib rau tes hauj lwm. · Qhia txog lub caij ntawv – Qhov no yog cov kauj ruam kawg. Thaum lub caij no auctioned ntse tiav qhov kev tshwm sim yog tus ntawv. Txoj kev: Xaus kev sab laj peb yuav kom cov ntsiab lus hauv qab no nco · Siv los pib ua tes hauj lwm uas yuav tsum tau as per rau cov neeg muas zaub xav. · Txheej xwm yog ob hom – DOM txheej xwm thiab tej txheej xwm qhov rai. · Handlers kev tshwm sim muaj nws qhov kev siv kab mob rau cov txheej xwm. · Tej handlers raug txoj kev no o muaj lossis siv cov HTML o siv DOM cuab yeej kwv o siv tshwj xeeb txoj kev |
||||
NYEEM NTXIV JAVA TSAB NTAWV KHOOM
Java tsab ntawv tsim qauv
CSS3 & JavaScript
Tsab ntawv Java thiab CSS3 zog
