JavaScript i jQuery Interaktywne strony WWW dla kazdego 8328301261, 9788328301269 [PDF]

6NïDGDQLH]DPöZLHñLZV]HONLHLQIRUPDFMHVÈ GRVWÚSQHSRGQXPHUHPWHOHIRQX 555-3344

tekst

Do pracy z wartościami w postaci ciągów tekstowych Do pracy z wartościami w postaci liczb Do pracy z wartościami w postaci wartości boolowskich

:\PLHQLRQHSRQLĝHMRELHNW\SRPDJDMÈZSUDF\ ]NRQFHSFMDPL]QDQ\PL]HĂZLDWDU]HF]\ZLVWHJR DATE

Do przedstawienia i pracy z datami

MATH

Do pracy z liczbami i przeprowadzania obliczeń

REGEX

W celu dopasowywania wzorców w ciągach tekstowych

PRZYKŁADY

PRZYKŁADY

0HWRGDgetElementById()RELHNWXdocument SRZRGXMHSREUDQLHHOHPHQWXQDSRGVWDZLH ZDUWRĂFLMHJRDWU\EXWXid

0HWRGDtoUpperCase()RELHNWXStringSRZRGXMH ]PLDQÚQDGXĝHZV]\VWNLFKOLWHUZHZVND]DQHM ]PLHQQHM

GRFXPHQWJHW(OHPHQW%\,GijRQHij 

KRWHOWR8SSHU&DVH 

:ïDĂFLZRĂÊODVW0RGLğHGRELHNWXdocument SRGDMHGDWÚRVWDWQLHMPRG\ğNDFMLVWURQ\

:ïDĂFLZRĂÊPIRELHNWXMath]ZUDFD ZDUWRĂÊSL

GRFXPHQWODVW0RGLğHG

0DWK3, 

'RRELHNWXdocumentSRZUöFLP\ZSRGUR]G]LDOH ķ2ELHNWRZ\PRGHOGRNXPHQWXĽRELHNWGRFXPHQWĵQDWRPLDVWV]F]HJöïRZHRPöZLHQLHPRGHOX '20]QDMG]LHV]ZUR]G]LDOH

'RRELHNWöZString, Number, DateLMathZUöFLP\ ZGDOV]HMF]ÚĂFLUR]G]LDïX

FUNKCJE, METODY I OBIEKTY 

OBIEKTOWY MODEL PRZEGLĄDARKI INTERNETOWEJ — OBIEKT WINDOW 2ELHNWwindowSU]HGVWDZLDELHĝÈFHRNQROXENDUWÚ SU]HJOÈGDUNLLQWHUQHWRZHM2ELHNWWHQ]QDMGXMHVLÚ QDVDPHMJöU]HRELHNWRZHJRPRGHOXSU]HJOÈGDUNL L]DZLHUDLQQHRELHNW\GRVWDUF]DMÈFHLQIRUPDFMH RQLHM

3RQLĝHMSU]HGVWDZLRQRZ\EUDQH ZïDĂFLZRĂFLLPHWRG\RELHNWX window=QDMG]LHV]WXWDMWDNĝH SHZQHZïDĂFLZRĂFLRELHNWöZ screenLhistoryEÚGÈF\FK RELHNWDPLSRWRPQ\PLRELHNWX window 

:’$¥&,:2¥m

23,6

window.innerHeight

:\UDĝRQDZSLNVHODFKZ\VRNRĂÊRNQDZ\ïÈF]DMÈFLQWHUIHMVXĝ\WNRZQLNDZSU]HJOÈGDUFH LQWHUQHWRZHM 

window.innerWidth

:\UDĝRQDZSLNVHODFKV]HURNRĂÊRNQDZ\ïÈF]DMÈFLQWHUIHMVXĝ\WNRZQLNDZSU]HJOÈGDUFH LQWHUQHWRZHM 

window.pageXOffset

:\UDĝRQDZSLNVHODFKRGOHJïRĂÊRMDNÈGRNXPHQW]RVWDïSU]HZLQLÚW\ZSR]LRPLH

window.pageYOffset

:\UDĝRQDZSLNVHODFKRGOHJïRĂÊRMDNÈGRNXPHQW]RVWDïSU]HZLQLÚW\ZSLRQLH

window.screenX

:\UDĝRQDZSLNVHODFKZVSöïU]ÚGQD;ZVNDěQLNDZ]JOÚGHPOHZHJRJöUQHJRURJXHNUDQX

window.screenY

:\UDĝRQDZSLNVHODFKZVSöïU]ÚGQD@ }







8WZRU]HQLHNROHNFMLNodeList ]DZLHUDMÈFHMHOHPHQW\NWöU\FK atrybut FODVVPDZDUWRĂÊhot. 7HHOHPHQW\]RVWDMÈXPLHV]F]RQHZNROHNFMLNodeList SU]HFKRZ\ZDQHMSU]H]]PLHQQÈ elements.

-HĝHOLOLF]EDHOHPHQWöZ Z\QRVLMHGHQOXEZLÚFHM ]RVWDQLHZ\NRQDQ\NRGZEORNX SROHFHQLDif.

3REUDQLHSLHUZV]HJRHOHPHQWX NROHNFMLNodeList8ĝ\WRF\IU\ 0SRQLHZDĝQXPHU\LQGHNVöZ ]DF]\QDMÈVLÚRG]HUD 

OBIEKTOWY MODEL DOKUMENTU 205

POBRANIE ELEMENTU NA PODSTAWIE WARTOŚCI ATRYBUTU CLASS Metoda getElementsByClassName() SR]ZDODQDZ\EöUW\FKHOHPHQWöZNWöU\FKDWU\EXWFODVV ma ZVND]DQÈZDUWRĂÊ

0HWRGDPDW\ONRMHGHQSDUDPHWU ĽQD]ZÚNODV\XMÚWÈZ]QDNL F\WRZDQLDLSRGDQÈZQDZLDVLH WXĝSRQD]ZLHPHWRG\

FMVJHWHOHPHQWVE\FODVVQDPHMV

3RQLHZDĝZLHOHHOHPHQWöZ QDVWURQLHPRĝHPLHÊWÚVDPÈ ZDUWRĂÊDWU\EXWXFODVVZDUWRĂFLÈ]ZURWQÈPHWRG\]DZV]HMHVW NROHNFMDNodeList. JAVASCRIPT

YDUHOHPHQWV GRFXPHQWJHW(OHPHQWV%\&ODVV1DPHijKRWij  // Wyszukanie elementów o klasie hot. LIHOHPHQWVOHQJWK! ^-HĝHOL]RVWDQÈ]QDOH]LRQHFRQDMPQLHMWU]\ YDUHO HOHPHQWV>@// Z kolekcji NodeList wybierz trzeci. HOFODVV1DPH ijFRROij=PLDQDZDUWRĂFLDWU\EXWXFODVVZ\EUDQHJRHOHPHQWX } 1DSRF]ÈWNXSU]\NïDGXNRGZ\V]XNXMHHOHPHQW\ NWöU\FKDWU\EXWFODVV zawieraZDUWRĂÊhot. :DUWRĂÊDWU\EXWXFODVVPRĝH]DZLHUDÊZLHOH QD]ZNODVUR]G]LHORQ\FKVSDFMDPL :\QLN Z\NRQDQLDWHJR]DS\WDQLD'20MHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLHelementsSRQLHZDĝ ]RVWDQLHXĝ\W\ZLHOHUD]\ 3ROHFHQLHifVSUDZG]DF]\]DS\WDQLH]QDOD]ïRFR QDMPQLHMWU]\HOHPHQW\-HĝHOLWDNZ\EUDQ\]RVWDMH WU]HFLNWöU\MHVWXPLHV]F]DQ\Z]PLHQQHMel. 1DVWÚSQLHDWU\EXWFODVVWHJRHOHPHQWXMHVW XDNWXDOQLDQ\ĽWXWDMRWU]\PXMHZDUWRĂÊFRRO. 7R]NROHLSRZRGXMHGRGDQLHQRZHJRVW\OX&66 NWöU\]PLHQLDZ\JOÈGZ\ĂZLHWODQHJRHOHPHQWX  2EVïXJDZSU]HJOÈGDUNDFK,()LUHIR[ &KURPH2SHUD6DIDUL

206 OBIEKTOWY MODEL DOKUMENTU

WYNIK

POBRANIE ELEMENTU NA PODSTAWIE NAZWY ZNACZNIKA Metoda getElementsByTagName() SR]ZDODQDZ\EöUHOHPHQWöZ QDSRGVWDZLHQD]Z\]QDF]QLND

1D]ZDMHVWSRGDZDQDMDNR SDUDPHWUDZLÚFQDOHĝ\MÈXMÈÊ Z]QDNLF\WRZDQLDLXPLHĂFLÊ ZQDZLDVLH

=ZUöÊXZDJÚQDWRĝHQLH Xĝ\ZDVLÚQDZLDVöZRVWU\FK ZQD]ZLH]QDF]QLNöZ+70/ ZQDZLDVLHVÈSRGDZDQH MHG\QLHOLWHU\  FMVJHWHOHPHQWVE\WDJQDPHMV

JAVASCRIPT

YDUHOHPHQWV GRFXPHQWJHW(OHPHQWV%\7DJ1DPHijOLij  // Wyszukanie elementów

OLLG ĵRQHĵFODVV ĵKRWĵ! ĂZLHĝH ğJL OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód
• RFHWEDOVDPLF]Q\

OLLG ĵRQHĵFODVV ĵFRRO”> ĂZLHĝH ğJL OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód
• RFHWEDOVDPLF]Q\

OLLG ĵRQHĵFODVV ĵFRRO”> ĂZLHĝH ğJL OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH OLLG ĵWKUHHĵFODVV ĵFRRO”>miód
• RFHWEDOVDPLF]Q\

.

-HĝHOLUR]SRF]QLHP\DQDOL]Ú RGSLHUZV]HJRHOHPHQWX
•  to nie mamy SRSU]HGQLHJR HOHPHQWXUöZQRU]ÚGQHJR. -HGQDNQDVWÚSQ\PHOHPHQWHP UöZQRU]ÚGQ\P (2)EÚG]LHZÚ]Hï SU]HGVWDZLDMÈF\GUXJLHOHPHQW
• .
  
  ul
  
  1
  
  li
  
  li
  
  -HĝHOLDQDOL]Ú]DF]QLHP\RG elementu
  WRpierwszym elementem potomnymMHVW ZÚ]HïSU]HGVWDZLDMÈF\SLHUZV]\ element
  • QDWRPLDVW ostatnim elementem potomnym (3)EÚG]LHRVWDWQLHOHPHQW
  • .
    
    3
    
    li
    
    li
    
    2
    
    6ÈWRZïDĂFLZRĂFLZÚ]ïDELHĝÈFHJRQLHPHWRG\SU]H]QDF]RQH do wyboru elementu) i dlatego WHĝQDLFKNRñFXQLH]QDMGXMH VLÚQDZLDV
    
    214
    
    OBIEKTOWY MODEL DOKUMENTU
    
    -HĝHOLXĝ\ZDV]Z\PLHQLRQ\FK ZïDĂFLZRĂFLDOHQLHPDV] SRSU]HGQLHJRQDVWÚSQHJR  HOHPHQWXUöZQRU]ÚGQHJROXE SLHUZV]HJRRVWDWQLHJR HOHPHQWXSRWRPQHJRWRZDUWRĂFLÈ ZïDĂFLZRĂFLEÚG]LHnull.
    
    :\PLHQLRQHZïDĂFLZRĂFLVÈ W\ONRGRRGF]\WXQLHPRJÈ E\ÊXĝ\ZDQHZFHOXZ\EUDQLD QRZHJRZÚ]ïDDWDNĝHQLH PRJÈXDNWXDOQLDÊHOHPHQWX QDGU]ÚGQHJRUöZQRU]ÚGQHJR OXESRWRPQHJR
    
    WĘZŁY ZNAKÓW ODSTĘPU 3RUXV]DQLHVLÚSRPRGHOX'20PRĝHE\ÊWUXGQHSRQLHZDĝSHZQHSU]HJOÈGDUNLLQWHUQHWRZHGRGDMÈZÚ]ï\WHNVWRZHZPLHMVFX]QDNöZRGVWÚSXSRMDZLDMÈF\FKVLÚPLÚG]\HOHPHQWDPL
    
    3R]D,QWHUQHW([SORUHUHP ZLÚNV]RĂÊSU]HJOÈGDUHN WUDNWXMH]QDNLRGVWÚSXPLÚG]\ HOHPHQWDPLQDSU]\NïDGVSDFMÚ OXE]QDNQRZHJRZLHUV]D MDNR ZÚ]ï\WHNVWRZH'ODWHJRWHĝ Z\PLHQLRQHSRQLĝHMZïDĂFLZRĂFL ]ZUDFDMÈUöĝQHHOHPHQW\ Z]DOHĝQRĂFLRGSU]HJOÈGDUNL previousSibling nextSibling ğUVW&KLOG lastChild
    
    1DSRQLĝV]\PGLDJUDPLHPRĝHV]]REDF]\ÊZV]\VWNLHZÚ]ï\ ]QDNöZRGVWÚSXGRGDQHZGU]HZLHPRGHOX'20ZSU]\NïDG]LH OLVW\U]HF]\GRNXSLHQLD.DĝG\ ZÚ]HïMHVWV\PEROL]RZDQ\ SU]H]]LHORQ\SURVWRNÈW,VWQLHMH PRĝOLZRĂÊXVXQLÚFLDZV]\VWNLFK ZÚ]ïöZRGVWÚSX]HVWURQ\SU]HG MHMSU]HND]DQLHPSU]HJOÈGDUFH 6NXWNLHPEÚG]LH]PQLHMV]HQLH VWURQ\LMHMV]\EV]HSREUDQLH RUD]ZF]\WDQLH-HGQDNR]QDF]D WRWDNĝHĝH]DZDUWRĂÊVWURQ\ VWDQLHVLÚ]QDF]QLHWUXGQLHMV]D GRRGF]\WDQLD
    
    ,QQ\PUR]ZLÈ]DQLHPWHJR SUREOHPXPRĝHE\ÊXQLNQLÚFLH Xĝ\FLDZ\PLHQLRQ\FKZF]HĂQLHM ZïDĂFLZRĂFLPRGHOX'20 -HGQ\P]QDMSRSXODUQLHMV]\FK UR]ZLÈ]DñWHJRURG]DMX SUREOHPöZMHVWXĝ\FLHELEOLRWHNL -DYD6FULSWWDNLHMMDNM4XHU\ 7DNLHQLHVSöMQRĂFLZG]LDïDQLX SU]HJOÈGDUHNE\ï\F]\QQLNLHP NWöU\PLDïRJURPQ\ZSï\ZQD ]\VNDQLHSRSXODUQRĂFLSU]H] M4XHU\
    
    ul li
    
    li
    
    li
    
    li
    
    ,QWHUQHW([SORUHUSRZ\ĝHM LJQRUXMH]QDNLRGVWÚSXLQLHWZRU]\GRGDWNRZ\FKZÚ]ïöZWHNVWRZ\FK
    
    ul li
    
    li
    
    li
    
    li
    
    &KURPH)LUHIR[6DIDULL2SHUDWZRU]ÈZÚ]ï\WHNVWRZH GOD]QDNöZRGVWÚSXVSDFMHL]QDNLQRZHJRZLHUV]D 
    
    OBIEKTOWY MODEL DOKUMENTU
    
    215
    
    POPRZEDNI I NASTĘPNY ELEMENT RÓWNORZĘDNY 'RZLHG]LDïHĂVLÚMXĝĝH RPDZLDQHZF]HĂQLHMZïDĂFLZRĂFLPRJÈ]ZUöFLÊUöĝQH Z\QLNLZ]DOHĝQRĂFLRGXĝ\WHM SU]HJOÈGDUNL-HGQDNPRĝQD ]QLFKEH]SLHF]QLHNRU]\VWDÊ JG\PLÚG]\HOHPHQWDPLQLH Z\VWÚSXMÈ]QDNLRGVWÚSX
    
    :RPDZLDQ\PWXWDMSU]\NïDG]LH ZV]\VWNLH]QDNLRGVWÚSX PLÚG]\HOHPHQWDPL+70/ ]RVWDï\XVXQLÚWH:FHOX SRND]DQLDG]LDïDQLDZïDĂFLZRĂFL GUXJLHOHPHQWOLVW\]RVWDQLH Z\EUDQ\]DSRPRFÈPHWRG\ getElementById().
    
    =SR]LRPXZ\EUDQHJR ZÚ]ïDHOHPHQWXZïDĂFLZRĂÊ previousSibling]ZUöFL SLHUZV]\HOHPHQW
  •  QDWRPLDVWnextSibling]ZUöFL WU]HFLHOHPHQW
  • .
    
    FVLEOLQJKWPO
    
    HTML
    
    XO!OLLG ĵRQHĵFODVV ĵKRWĵ!HP!ĂZLHĝH ğJLOL!OLLG ĵWZRĵ FODVV ĵKRWĵ!RU]HV]NLSLQLRZHOL!OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód
  • RFHWEDOVDPLF]Q\
  
  
  FMVVLEOLQJMV
  
  JAVASCRIPT
  
  :\EöUSXQNWXSRF]ÈWNRZHJRLRGV]XNDQLHMHJRHOHPHQWöZUöZQRU]ÚGQ\FK YDUVWDUW,WHP GRFXPHQWJHW(OHPHQW%\,GijWZRij  YDUSUHY,WHP VWDUW,WHPSUHYLRXV6LEOLQJ YDUQH[W,WHP VWDUW,WHPQH[W6LEOLQJ =PLDQDZDUWRĂFLDWU\EXWXFODVVHOHPHQWöZUöZQRU]ÚGQ\FK SUHY,WHPFODVV1DPH ijFRPSOHWHij QH[W,WHPFODVV1DPH ijFRROij
  
  ul li
  
  li
  
  WYNIK
  
  li
  
  li
  
  Początek Poprzedni element równorzędny Następny element równorzędny
  
  =ZUöÊXZDJÚMDNZÚ]ï\UöZQRU]ÚGQHVÈSU]HFKRZ\ZDQHZQRZ\FK]PLHQQ\FK2]QDF]DWR ĝHZïDĂFLZRĂFLWDNLHMDNFODVV1DPHPRJÈE\Ê Z\NRU]\VWDQHSU]H]ZÚ]HïĽZ\VWDUF]\]DVWRVRZDÊQRWDFMÚ]Xĝ\FLHPNURSNLF]\OLXPLHĂFLÊ NURSNÚPLÚG]\QD]ZÈ]PLHQQHMLZïDĂFLZRĂFLÈ 216
  
  OBIEKTOWY MODEL DOKUMENTU
  
  PIERWSZY I OSTATNI ELEMENT POTOMNY Omawiane na kilku poprzednich VWURQDFKZïDĂFLZRĂFLPRJÈ ]ZUöFLÊQLHVSöMQHZ\QLNLJG\ PLÚG]\HOHPHQWDPL]QDMGXMÈ VLÚ]QDNLRGVWÚSX:SRQLĝV]\P SU]\NïDG]LH]DVWRVRZDQRQLHFR RGPLHQQHUR]ZLÈ]DQLHZNRG]LH +70/ĽQDZLDV]DP\NDMÈF\
  
  ]QDF]QLNMHVWXPLHV]F]DQ\RERN QDZLDVXRWZLHUDMÈFHJRNROHMQ\ HOHPHQWFRZSRUöZQDQLX ]SRSU]HGQLPSU]\NïDGHP ]DSHZQLD]QDF]QLHZLÚNV]È F]\WHOQRĂÊ1DSRF]ÈWNX Z\ZRï\ZDQDMHVWPHWRGD getElementsByTagName()
  
  ZFHOXZ\EUDQLDHOHPHQWX
  QDVWURQLH=SR]LRPX Z\PLHQLRQHJRHOHPHQWX ZïDĂFLZRĂÊğUVW&KLOG zwróci SLHUZV]\HOHPHQWOL! natomiast ODVW&KLOG zwróci ostatni element OL!
  
  FFKLOGKWPO
  
  HTML
  
  
  
  
  ĵRQHĵFODVV ĵKRWĵ!HP!ĂZLHĝH ğJLOL ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZHOL ĵWKUHHĵFODVV ĵKRWĵ!PLöGOL ĵIRXUĵ!RFHWEDOVDPLF]Q\OL
  
  FMVFKLOGMV
  
  JAVASCRIPT
  
  :\EöUSXQNWXSRF]ÈWNRZHJRLRGV]XNDQLHMHJRHOHPHQWöZSRWRPQ\FK YDUVWDUW,WHP GRFXPHQWJHW(OHPHQWV%\7DJ1DPHijXOij >@ YDUğUVW,WHP VWDUW,WHPğUVW&KLOG YDUODVW,WHP VWDUW,WHPODVW&KLOG =PLDQDZDUWRĂFLDWU\EXWXFODVVHOHPHQWöZSRWRPQ\FK ğUVW,WHPVHW$WWULEXWHijFODVVijijFRPSOHWHij  ODVW,WHPVHW$WWULEXWHijFODVVijijFRROij 
  
  ul
  
  WYNIK
  
  OL
  
  OL
  
  OL
  
  OL
  
  Początek Pierwszy element potomny Ostatni element potomny
  
  OBIEKTOWY MODEL DOKUMENTU
  
  217
  
  JAK POBRAĆ I UAKTUALNIĆ ZAWARTOŚĆ ELEMENTU? -DNGRWÈGNRQFHQWURZDOLĂP\VLÚZUR]G]LDOHQDZ\V]XNLZDQLXHOHPHQWöZ ZGU]HZLHPRGHOX'203R]RVWDïDF]ÚĂÊUR]G]LDïXEÚG]LHZLÚFSRĂZLÚFRQD Z\MDĂQLHQLXMDNPRĝQDX]\VNDÊGRVWÚSGR]DZDUWRĂFLHOHPHQWXLXDNWXDOQLDÊ MÈ=DVWRVRZDQDWHFKQLNDEÚG]LH]DOHĝDïDRG]DZDUWRĂFLHOHPHQWX 6SöMU]QDSU]\NïDGRZHHOHPHQW\
  • SRSUDZHM VWURQLH.DĝG\]QLFKGRGDMHSHZLHQNRG]QDF]QLNöZ]DWHPIUDJPHQWGU]HZDPRGHOX'20GOD NDĝGHJRHOHPHQWXOLVW\MHVWLQQ\
    
    
  • ğJL
  li
  
  • 3LHUZV]\QDWHMVWURQLH ]DZLHUDW\ONRWHNVW • 'UXJLLWU]HFLQDVWURQLHSRSUDZHM ]DZLHUDMÈ
  
  atrybut
  
  tekst: figi
  
  SRïÈF]HQLHWHNVWXLHOHPHQWX.
  
  0RĝHV]]REDF]\ÊĝHGRGDQLHF]HJRĂWDNSURVWHJR MDNHOHPHQWSRZRGXMH]QDF]QÈ]PLDQÚ VWUXNWXU\GU]HZDPRGHOX'207R]NROHLPD ZSï\ZQDVSRVöESUDF\]HOHPHQWHPOLVW\.LHG\ HOHPHQW]DZLHUDSRïÈF]HQLHWHNVWXLLQQ\FK HOHPHQWöZWRSUDZGRSRGRELHñVWZRĝHEÚG]LHP\ SUDFRZDÊUDF]HM]MHJRHOHPHQWHPQDGU]ÚGQ\P QLĝ]SRV]F]HJöOQ\PLZÚ]ïDPLNDĝGHJRSRWRPND MHVW]QDF]QLHZLÚNV]H
  
  3RND]DQ\SRZ\ĝHMHOHPHQW
  • PD
    
    $E\SUDFRZDÊ]]DZDUWRĂFLÈHOHPHQWöZPRĝQD
    
    WĘZŁY TEKSTOWE
    
    • 3U]HMĂÊGRZÚ]ïöZWHNVWRZ\FK6SUDZG]DVLÚ
    
    *G\SU]HMG]LHV]]HOHPHQWXGRMHJRZÚ]ïDWHNVWRZHJR]DXZDĝ\V]ĝHMHVWWDPMHGQDZïDĂFLZRĂÊ ]NWöUHMEÚG]LHV]NRU]\VWDÊGRĂÊF]ÚVWR
    
    •
    
    218
    
    WRQDMOHSLHMJG\HOHPHQW]DZLHUDMHG\QLHWHNVW EH]ĝDGQ\FKLQQ\FKHOHPHQWöZ 3UDFD]HOHPHQWHPQDGU]ÚGQ\P W ten VSRVöEPRĝQDX]\VNDÊGRVWÚSGRMHJRZÚ]ïöZ WHNVWRZ\FKLHOHPHQWöZSRWRPQ\FK6SUDZG]D VLÚWRQDMOHSLHMJG\HOHPHQWSRVLDGDZÚ]ï\ WHNVWRZHLUöZQRU]ÚGQHHOHPHQW\SRWRPQH
    
    OBIEKTOWY MODEL DOKUMENTU
    
    • -HGHQZÚ]HïpotomnySU]HFKRZXMÈF\VïRZRğJL •
    
    Z\ĂZLHWODQHQDOLĂFLH :Ú]HïDWU\EXWXSU]HFKRZXMÈF\DWU\EXWid.
    
    WŁAŚCIWOŚĆ
    
    OPIS
    
    nodeValue
    
    8]\VNDQLHGRVWÚSXGRWHNVWX]ZÚ]ïDSDWU]SRGUR]G]LDïķ8]\VNDQLH GRVWÚSXGRZÚ]ïDWHNVWRZHJR LMHJRXDNWXDOQLHQLH]DSRPRFÈ ZïDĂFLZRĂFLQRGH9DOXHĵ 
    
    
  • ĂZLHĝH ğJL
  
  
  
  • V]HĂÊ ĂZLHĝ\FK ğJ
  
  
  li
  
  li
  
  atrybut
  
  em
  
  tekst: figi
  
  em
  
  atrybut
  
  tekst: figi
  
  tekst: sześć
  
  tekst: świeże
  
  tekst: świeże
  
  'RGDQ\]RVWDïHOHPHQWVWDïVLÚWHUD] SLHUZV]\PHOHPHQWHPSRWRPQ\P
  
  • :Ú]HïHOHPHQWXSRVLDGDZïDVQ\potomny •
  
  ZÚ]HïWHNVWRZ\]DZLHUDMÈF\VïRZRĂZLHĝH. 3RF]ÈWNRZ\ZÚ]HïWHNVWRZ\MHVWWHUD]równoU]ÚGQ\]ZÚ]ïHPSU]HGVWDZLDMÈF\PHOHPHQW .
  
  3RGRGDQLXWHNVWXSU]HGHOHPHQWHP
  
  • Pierwszy element potomny elementu
  • MHVW • •
    
    ZÚ]ïHPWHNVWRZ\P]DZLHUDMÈF\PVïRZRV]HĂÊ. 3RVLDGDHOHPHQWUöZQRU]ÚGQ\NWöU\MHVW ZÚ]ïHPHOHPHQWXGOD. Z kolei ten ZÚ]HïHOHPHQWXSRVLDGDpotomnyZÚ]Hï WHNVWRZ\]DZLHUDMÈF\VïRZRĂZLHĝH. 1DNRñFXLVWQLHMHZÚ]HïWHNVWRZ\]DZLHUDMÈF\ VïRZRğJ-HVWWRHOHPHQWUöZQRU]ÚGQ\]DUöZQR GODZÚ]ïDWHNVWRZHJRVïRZDV]HĂÊMDNLZÚ]ïD elementu .
    
    ELEMENT NADRZĘDNY *G\SUDFXMHV]]ZÚ]ïHPHOHPHQWX]DPLDVWMHJR ZÚ]ïHPWHNVWRZ\P HOHPHQWWHQPRĝH]DZLHUDÊ NRG]QDF]QLNöZ0RĝHV]]GHF\GRZDÊF]\UöZQLHĝ SR]DWHNVWHPFKFHV]SREUDÊOXEXDNWXDOQLÊWHQ NRG]QDF]QLNöZ WŁAŚCIWOŚĆ
    
    OPIS
    
    innerHTML
    
    3REUDQLHLXDNWXDOQLHQLHWHNVWX RUD]NRGX]QDF]QLNöZSDWU] SRGUR]G]LDïķ8]\VNDQLHGRVWÚSX GRLXDNWXDOQLHQLH WHNVWXRUD] NRGX]QDF]QLNöZ]DSRPRFÈ ZïDĂFLZRĂFLLQQHU+70/ĵ 
    
    textContent
    
    3REUDQLHLXDNWXDOQLHQLHMHG\QLH WHNVWXSDWU]SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGRWHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQWLLQQHU7H[W ĵ 
    
    innerText
    
    3REUDQLHLXDNWXDOQLHQLHMHG\QLH WHNVWXSDWU]SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGRWHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQWLLQQHU7H[W ĵ 
    
    .LHG\Z\PLHQLRQHZïDĂFLZRĂFLVÈXĝ\ZDQHGR XDNWXDOQLHQLD]DZDUWRĂFLHOHPHQWXQRZD]DZDUWRĂÊEÚG]LHQDGSLV\ZDÊFDïÈ]DZDUWRĂÊHOHPHQWX ]DUöZQRWHNVWMDNLNRG]QDF]QLNöZ  1DSU]\NïDGMHĝHOLGRZROQD]W\FKZïDĂFLZRĂFL ]RVWDQLHXĝ\WDGRXDNWXDOQLHQLD]DZDUWRĂFL elementu WRXDNWXDOQLRQD]RVWDQLHFDïD VWURQDLQWHUQHWRZD
    
    OBIEKTOWY MODEL DOKUMENTU
    
    219
    
    UZYSKANIE DOSTĘPU DO WĘZŁA TEKSTOWEGO ZA POMOCĄ WŁAŚCIWOŚCI NODEVALUE I JEGO UAKTUALNIENIE *G\Z\ELHU]HP\ZÚ]HïWHNVWRZ\EÚG]LHP\PRJOLSREUDÊMHJR]DZDUWRĂÊ L]PRG\ğNRZDÊMÈ]DSRPRFÈZïDĂFLZRĂFLnodeValue.
    
    
  • ĂZLHĝH ğJL
  li em
  
  atrybut
  
  tekst: figi
  
  text: świeże .RGSU]HGVWDZLRQ\SRQLĝHMSRND]XMHX]\VNDQLHGRVWÚSXGRGUXJLHJRZÚ]ïDWHNVWRZHJR :DUWRĂFLÈ]ZURWQÈEÚG]LHVïRZRğJL.
  
  GRFXPHQWJHW(OHPHQW%\,GijRQHij ğUVW&KLOGQH[W6LEOLQJnodeValue; 1
  
  $E\Xĝ\ÊZïDĂFLZRĂFLnodeValueWU]HED]QDMGRZDÊVLÚZZÚěOHWHNVWRZ\PDQLHZHOHPHQFLH ]DZLHUDMÈF\PWHNVW :RPDZLDQ\PSU]\NïDG]LHSRND]DQRĝHSU]HMĂFLH ]ZÚ]ïDHOHPHQWXGRZÚ]ïDWHNVWRZHJRPRĝHE\Ê VNRPSOLNRZDQH -HĝHOLQLHZLHV]F]\ZÚ]HïHOHPHQWXEÚG]LH GRVWÚSQ\ZUD]]ZÚ]ïDPLWHNVWRZ\PLWRQDMOHSLHM SUDFRZDÊ]HOHPHQWHPQDGU]ÚGQ\P 220 OBIEKTOWY MODEL DOKUMENTU
  
  2
  
  3
  
  4
  
  1. :Ú]HïHOHPHQWX
  • ]RVWDMHZ\EUDQ\]D SRPRFÈPHWRG\getElementById(). 2. Pierwszym elementem potomnym
  • MHVW element . 3. :Ú]HïWHNVWRZ\MHVWQDVWÚSQ\PHOHPHQWHP UöZQRU]ÚGQ\P tego elementu . 4. 0DV]ZÚ]HïWHNVWRZ\LGODWHJRGRVWÚSGR MHJR]DZDUWRĂFLPRĝHV]X]\VNDÊ]DSRPRFÈ ZïDĂFLZRĂFLnodeValue.
    
    UZYSKANIE DOSTĘPU DO WĘZŁA TEKSTOWEGO I JEGO ZMIANA $E\PöFSUDFRZDÊ]WHNVWHP ZHOHPHQFLHQDMSLHUZWU]HED X]\VNDÊGRVWÚSGRZÚ]ïD HOHPHQWXDQDVWÚSQLHGRMHJR ZÚ]ïDWHNVWRZHJR
    
    JAVASCRIPT
    
    :Ú]HïWHNVWRZ\PDZïDĂFLZRĂÊ RQD]ZLHnodeValueNWöUD ]DZLHUDWHNVW]QDMGXMÈF\VLÚ ZGDQ\PZÚěOHWHNVWRZ\P
    
    ,VWQLHMHUöZQLHĝPRĝOLZRĂÊ Xĝ\FLDZïDĂFLZRĂFLnodeValue GRXDNWXDOQLHQLD]DZDUWRĂFL ZÚ]ïDWHNVWRZHJR
    
    FMVQRGHYDOXHMV
    
    YDULWHP7ZR GRFXPHQWJHW(OHPHQW%\,GijWZRij // Pobranie drugiego elementu listy. YDUHO7H[W LWHP7ZRğUVW&KLOGQRGH9DOXH3REUDQLHMHJR]DZDUWRĂFLWHNVWRZHM HO7H[W HO7H[WUHSODFHijRU]HV]NLSLQLRZHijijNDSXVWDij  // Zmiana orzeszki piniowe na kapusta. LWHP7ZRğUVW&KLOGQRGH9DOXH HO7H[W// Uaktualnienie elementu listy.
    
    WYNIK
    
    :RPDZLDQ\PSU]\NïDG]LHSRELHUDP\WHNVW GUXJLHJRHOHPHQWXOLVW\L]PLHQLDP\JR ]ZDUWRĂFLRU]HV]NLSLQLRZH na kapusta. :LHUV]SLHUZV]\VNU\SWXSRELHUDGUXJL HOHPHQWOLVW\U]HF]\GRNXSLHQLDLSU]HFKRZXMHJRZ]PLHQQHMRQD]ZLHLWHP7ZR. 1DVWÚSQLH]DZDUWRĂÊWHNVWRZÈHOHPHQWX XPLHV]F]DP\Z]PLHQQHMelText. :LHUV]WU]HFLVNU\SWX]DVWÚSXMHZ\UDĝHQLH RU]HV]NLSLQLRZHVïRZHPkapusta Xĝ\ZDMÈFGRWHJRPHWRG\UHSODFH obiektu String. 2VWDWQLZLHUV]VNU\SWXZ\NRU]\VWXMHZïDĂFLZRĂÊnodeValueZFHOXXDNWXDOQLHQLDZÚ]ïD WHNVWRZHJRQRZÈZDUWRĂFLÈ
    
    OBIEKTOWY MODEL DOKUMENTU 221
    
    UZYSKANIE DOSTĘPU DO TEKSTU I JEGO UAKTUALNIENIE ZA POMOCĄ WŁAŚCIWOŚCI TEXTCONTENT (I INNERTEXT) :ïDĂFLZRĂÊtextContentSR]ZDODQDSRELHUDQLHOXEXDNWXDOQLDQLHWHNVWX ]QDMGXMÈFHJRVLÚZHOHPHQFLHRUD]MHJRHOHPHQWDFKSRWRPQ\FK  textContent :FHOXSREUDQLDWHNVWX]HOHPHQWöZ
  • w omaZLDQ\PSU]\NïDG]LHL]LJQRURZDQLDFDïHJRNRGX ]QDF]QLNöZZHOHPHQFLH PRĝQDXĝ\ÊZïDĂFLZRĂFL textContentHOHPHQWXQDGU]ÚGQHJR]DZLHUDMÈFHgo dane elementy
  • :RPDZLDQ\PSU]\NïDG]LHZDUWRĂFLÈ]ZURWQÈEÚG]LHĂZLHĝHğJL. :\PLHQLRQÈZïDĂFLZRĂÊPRĝQDZ\NRU]\VWDÊWDNĝH GRXDNWXDOQLHQLD]DZDUWRĂFLHOHPHQWX:öZF]DV ]DVWÈSLRQDEÚG]LHFDïD]DZDUWRĂÊHOHPHQWX ïÈF]QLH]NRGHP]QDF]QLNöZ
    
    
  • ĂZLHĝH ğJL
  li em
  
  atrybut
  
  tekst: figi
  
  text: świeże GRFXPHQWJHW(OHPHQW%\,GijRQHij textContent; -HG\Q\SUREOHP]ZLÈ]DQ\]ZïDĂFLZRĂFLÈ textContentSROHJDQDW\PĝHQLHMHVWRQD REVïXJLZDQDZSU]HJOÈGDUFH,QWHUQHW([SORUHU ZZHUVMDFKZF]HĂQLHMV]\FKQLĝ:V]\VWNLH SR]RVWDïHSU]HJOÈGDUNLREVïXJXMÈWÚZïDĂFLZRĂÊ 
  
  innerText 0RĝHV]VSRWNDÊVLÚ]ZïDĂFLZRĂFLÈRQD]ZLHinnerTextDOHRJöOQLHU]HF]ELRUÈFSRZLQLHQHĂXQLNDÊMHM VWRVRZDQLD]WU]HFKZDĝQ\FKSRZRGöZZ\PLHQLRQ\FKSRQLĝHM
  
  OBSŁUGA :SUDZG]LHZLÚNV]RĂÊSURGXFHQWöZSU]HJOÈGDUHN]DDGDSWRZDïRWÚZïDĂFLZRĂÊDOH)LUHIR[ MHMQLHREVïXJXMHSRQLHZDĝ innerTextQLHMHVWF]ÚĂFLÈ ĝDGQHJRVWDQGDUGX
  
  222 OBIEKTOWY MODEL DOKUMENTU
  
  PRZESTRZEGANIE REGUŁ CSS :ïDĂFLZRĂÊQLHSR]ZDODQD Z\ĂZLHWOHQLH]DZDUWRĂFLNWöUD ]RVWDïDXNU\WD]DSRPRFÈ&66 -HĂOLQDSU]\NïDGLVWQLHMHUHJXïD &66XNU\ZDMÈFDHOHPHQW\ WRZïDĂFLZRĂÊinnerText ]ZUöFLMHG\QLHVïRZRğJL.
  
  WYDAJNOŚĆ 3RQLHZDĝZïDĂFLZRĂÊ innerTextXZ]JOÚGQLDXVWDZLHQLDGRW\F]ÈFHXNïDGXRUD] ZLGRF]QRĂFLHOHPHQWXWRSRELHUDQLH]DZDUWRĂFLPRĝHRGE\ZDÊ VLÚZROQLHMQLĝ]DSRPRFÈ ZïDĂFLZRĂFLtextContent.
  
  UZYSKANIE DOSTĘPU JEDYNIE DO $E\SRND]DÊUöĝQLFÚPLÚG]\ VSRVREHPG]LDïDQLDZïDĂFLZRĂFL textContent i innerText ZSRQLĝV]\PSU]\NïDG]LH]DVWRVRZDQRUHJXïÚ&66XNU\ZDMÈFÈ ]DZDUWRĂÊHOHPHQWX.
  
  1DSRF]ÈWNXVNU\SWSRELHUD ]DZDUWRĂÊSLHUZV]HJRHOHPHQWX OLVW\Xĝ\ZDMÈFGRWHJRREX ZïDĂFLZRĂFLtextContent i innerText1DVWÚSQLHSREUDQH ZDUWRĂFLVÈZ\ĂZLHWODQH]DOLVWÈ
  
  1DNRñFXZDUWRĂÊSLHUZV]HJRHOHPHQWXOLVW\]RVWDMH XDNWXDOQLRQDGRSRVWDFL FKOHEQD]DNZDVLH.
  
  FMVLQQHUWH[WDQGWH[WFRQWHQWMV
  
  JAVASCRIPT
  
  YDUğUVW,WHP GRFXPHQWJHW(OHPHQW%\,GijRQHij  // Wyszukanie pierwszego elementu listy. YDUVKRZ7H[W&RQWHQW ğUVW,WHPWH[W&RQWHQW 3REUDQLHZDUWRĂFLZïDĂFLZRĂFLWH[W&RQWHQW YDUVKRZ,QQHU7H[W ğUVW,WHPLQQHU7H[W 3REUDQLHZDUWRĂFLZïDĂFLZRĂFLLQQHU7H[W :\ĂZLHWOHQLHWXĝ]DOLVWÈ]DZDUWRĂFLREXZïDĂFLZRĂFL YDUPVJ ijS!WH[W&RQWHQWijVKRZ7H[W&RQWHQWijS!ij PVJ ijS!LQQHU7H[WijVKRZ,QQHU7H[WijS!ij YDUHO GRFXPHQWJHW(OHPHQW%\,GijVFULSW5HVXOWVij  HOLQQHU+70/ PVJ ğUVW,WHPWH[W&RQWHQW ijFKOHEQD]DNZDVLHij // Uaktualnienie pierwszego elementu listy.
  
  WYNIK
  
  :ZLÚNV]RĂFLSU]HJOÈGDUHN ZïDĂFLZRĂÊtextContentSRELHU]HVïRZD ĂZLHĝHğJL ZïDĂFLZRĂÊinnerTextZ\ĂZLHWOLMHG\QLH VïRZRğJLSRQLHZDĝVïRZRĂZLHĝH]RVWDïR XNU\WHSU]H]&66
  
  • •
  
  -HGQDN SU]HJOÈGDUND,QWHUQHW([SORUHULMHM ZF]HĂQLHMV]HZHUVMHQLHREVïXJXMÈZïDĂFLZRĂFLtextContent ZSU]HJOÈGDUFH)LUHIR[ZïDĂFLZRĂÊ innerTextEÚG]LHPLDïDZDUWRĂÊXQGHğQHG SRQLHZDĝZ\PLHQLRQDZïDĂFLZRĂÊQLJG\ QLH]RVWDïD]DLPSOHPHQWRZDQD
  
  • •
  
  OBIEKTOWY MODEL DOKUMENTU 223
  
  DODANIE LUB USUNIĘCIE ZAWARTOŚCI HTML 0DP\GZD]XSHïQLHRGPLHQQHSRGHMĂFLDZ]DNUHVLHGRGDZDQLDLXVXZDQLD ]DZDUWRĂFLZGU]HZLHPRGHOX'20ZïDĂFLZRĂÊinnerHTMLLRSHUDFMH na modelu DOM.
  
  WŁAŚCIWOŚĆ INNERHTML 8ZDJDXĝ\FLHZïDĂFLZRĂFLinnerHTMLMHVWU\]\NRZQHZLÚFHMLQIRUPDFMLQDWHQWHPDW]QDMG]LHV] ZSRGUR]G]LDOHķ$WDNLW\SX;66ĵ
  
  PODEJŚCIE
  
  DODANIE ZAWARTOŚCI
  
  USUNIĘCIE ZAWARTOŚCI
  
  :ïDĂFLZRĂÊinnerHTMLPRĝH E\ÊXĝ\ZDQDZGRZROQ\P ZÚěOHHOHPHQWX6ïXĝ\]DUöZQR GRSRELHUDQLDMDNL]DVWÚSRZDQLD]DZDUWRĂFL$E\XDNWXDOQLÊ HOHPHQWQRZD]DZDUWRĂÊPXVL E\ÊSRGDQDZSRVWDFLFLÈJX WHNVWRZHJR0RĝHRQ]DZLHUDÊ NRG]QDF]QLNöZGODHOHPHQWöZ SRWRPQ\FK
  
  $E\GRGDÊQRZÈ]DZDUWRĂÊ QDOHĝ\Z\NRQDÊSRQLĝV]HNURNL 1. 1RZÈ]DZDUWRĂÊïÈF]QLH ]NRGHP]QDF]QLNöZ SU]\JRWXM ZSRVWDFLFLÈJXWHNVWRZHJR LXPLHĂÊZ]PLHQQHM 2. :\ELHU]HOHPHQWNWöUHJR ]DZDUWRĂÊPDE\Ê]DVWÈSLRQD 3. :ïDĂFLZRĂFLinnerHTML Z\EUDQHJRHOHPHQWXSU]\SLV] SU]\JRWRZDQ\ZF]HĂQLHMFLÈJ WHNVWRZ\
  
  :FHOXXVXQLÚFLDFDïHM]DZDUWRĂFLHOHPHQWXMHJRZïDĂFLZRĂFL innerHTMLSU]\SLV]SXVW\ FLÈJWHNVWRZ\$E\XVXQÈÊ SRMHG\QF]\HOHPHQW]IUDJPHQWX PRGHOX'20QDSU]\NïDG MHGHQ
  • ]
    NRQLHF]QH MHVWSRGDQLHFDïHJRIUDJPHQWX DOHSR]EDZLRQHJRHOHPHQWX SU]H]QDF]RQHJRGRXVXQLÚFLD
    
    PRZYKŁAD. ZMIANA ELEMENTU LISTY 8WZöU]]PLHQQÈSU]HFKRZXMÈFÈNRG]QDF]QLNöZ
    
    :\ELHU]HOHPHQWNWöUHJR ]DZDUWRĂÊPDE\ÊXDNWXDOQLRQD
    
    var item; LWHP ijHP!¥ZLHĝHHP!ğJLij :]PLHQQHMPRĝHV]XPLHĂFLÊ GRZROQÈZ\PDJDQÈLORĂÊNRGX ]QDF]QLNöZ7RMHVWV]\ENLVSRVöE QDGRGDZDQLHGXĝHMLORĂFLNRGX ]QDF]QLNöZGRGU]HZDPRGHOX DOM.
    
    8DNWXDOQLM]DZDUWRĂÊ wybranego elementu nowym NRGHP]QDF]QLNöZ
    
    ul
    
    ul
    
    li
    
    li
    
    li
    
    li
    
    li
    
    tekst
    
    tekst
    
    tekst: figi
    
    tekst
    
    tekst
    
    li em tekst: świeże
    
    224 OBIEKTOWY MODEL DOKUMENTU
    
    tekst: figi
    
    2SHUDFMHQDPRGHOX'20PRJÈGRW\F]\ÊSRV]F]HJöOQ\FKZÚ]ïöZGU]HZD PRGHOX'20QDWRPLDVWZïDĂFLZRĂÊinnerHTMLMHVWOHSLHMGRVWRVRZDQD GRXDNWXDOQLDQLDFDï\FKIUDJPHQWöZ
    
    METODY OPERACJI NA MODELU DOM 2SHUDFMHQDPRGHOX'20PRJÈE\ÊEH]SLHF]QLHMV]HQLĝXĝ\FLHZïDĂFLZRĂFLinnerHTMLDOHWDNLH UR]ZLÈ]DQLHZ\PDJD]QDF]QLHZLÚNV]HMLORĂFLNRGXLPRĝHE\ÊZROQLHMV]H
    
    PODEJŚCIE
    
    DODANIE ZAWARTOŚCI
    
    USUNIĘCIE ZAWARTOŚCI
    
    2SHUDFMHQDPRGHOX'20 R]QDF]DMÈ]ELöUPHWRG'20 SR]ZDODMÈF\FKQDWZRU]HQLH HOHPHQWXLZÚ]ïöZWHNVWRZ\FK DQDVWÚSQLHXPLHV]F]DQLHLFK ZGU]HZLHPRGHOX'20OXE XVXZDQLHLFK]QLHJR
    
    $E\GRGDÊ]DZDUWRĂÊQDOHĝ\ Xĝ\ÊPHWRG\'20RGSRZLHG]LDOQHM]DXWZRU]HQLHQRZHM ]DZDUWRĂFLZZÚěOHLSU]HFKRZ\ZDQLHMHMZ]PLHQQHM 1DVWÚSQLHLQQDPHWRGD '20MHVWZ\NRU]\VW\ZDQD ZFHOXGRïÈF]HQLD]DZDUWRĂFL ZRGSRZLHGQLPPLHMVFXGU]HZD modelu DOM.
    
    (OHPHQWZUD]]FDïÈ]DZDUWRĂFLÈLHOHPHQWDPLSRWRPQ\PL  PRĝQDXVXQÈÊ]GU]HZDPRGHOX '20]DSRPRFÈSRMHG\QF]HM metody.
    
    PRZYKŁAD. DODANIE ELEMENTU LISTY 8WZöU]QRZ\ZÚ]HïWHNVWRZ\ tekst
    
    :\ELHU]HOHPHQWGR NWöUHJRPD]RVWDÊGRGDQ\QRZ\ fragment.
    
    8WZöU]QRZ\ZÚ]HïHOHPHQtu.
    
    ul
    
    li 'RGDMZÚ]HïWHNVWRZ\ GRZÚ]ïDHOHPHQWX
    
    'RGDMQRZ\IUDJPHQW GRZ\EUDQHJRZF]HĂQLHM elementu. ul
    
    li
    
    li
    
    li
    
    li
    
    li
    
    tekst
    
    tekst
    
    tekst
    
    tekst
    
    tekst
    
    li tekst OBIEKTOWY MODEL DOKUMENTU 225
    
    UZYSKANIE DOSTĘPU DO (I UAKTUALNIENIE) TEKSTU ORAZ KODU ZNACZNIKÓW ZA POMOCĄ WŁAŚCIWOŚCI INNERHTML 8ĝ\ZDMÈFZïDĂFLZRĂFLinnerHTMLPRĝHV]X]\VNDÊGRVWÚSGR]DZDUWRĂFL HOHPHQWXLPLHÊPRĝOLZRĂÊMHM]PRG\ğNRZDQLD RUD]ZV]\VWNLFKMHJR HOHPHQWöZSRWRPQ\FK innerHTML *G\ZïDĂFLZRĂÊinnerHTMLSRELHUD NRG+70/]HOHPHQWXWRSRELHUD ]DZDUWRĂÊWHJRHOHPHQWXL]ZUDFD MÈZSRVWDFLMHGQHJRGïXJLHJRFLÈJX WHNVWRZHJRïÈF]QLH]FDï\PNRGHP ]QDF]QLNöZMDNLPRĝH]QDMGRZDÊVLÚ ZW\PHOHPHQFLH .LHG\ZïDĂFLZRĂÊWDMHVWXĝ\ZDQD GRXVWDZLHQLDQRZHM]DZDUWRĂFLGOD HOHPHQWXSRELHUDFLÈJWHNVWRZ\ NWöU\PRĝH]DZLHUDÊNRG]QDF]QLNöZ 1DVWÚSQLHSU]HWZDU]DWHQFLÈJ WHNVWRZ\LGRGDMHZV]\VWNLH]QDMGXMÈFHVLÚZQLPHOHPHQW\GRGU]HZD modelu DOM. *G\GRGDMHV]QRZÈ]DZDUWRĂÊ]D SRPRFÈinnerHTMLPXVLV]SDPLÚWDÊ ĝHSRPLQLÚFLHFKRÊMHGQHJR]QDF]QLND ]DP\NDMÈFHJRPRĝHVSRZRGRZDÊ ]QLV]F]HQLHSURMHNWXFDïHMVWURQ\ &RJRUV]DMHĝHOLZïDĂFLZRĂÊ innerHTMLMHVWXĝ\ZDQDGRGRGDZDQLD]DZDUWRĂFLXWZRU]RQHMQDVWURQLH SU]H]Xĝ\WNRZQLNöZVNXWNLHPPRĝH E\ÊGRGDQLH]DZDUWRĂFL]DZLHUDMÈFHM NRGR]ïRĂOLZ\PG]LDïDQLXSDWU] SRGUR]G]LDïķ$WDNLW\SX;66ĵ 226 OBIEKTOWY MODEL DOKUMENTU
    
    
    • ĂZLHĝH ğJL
    li em
    
    atrybut
    
    tekst: figi
    
    tekst: świeże
    
    POBRANIE ZAWARTOŚCI 3RQLĝV]\ZLHUV]NRGXSRELHUD]DZDUWRĂÊHOHPHQWXOLVW\ DQDVWÚSQLHGRGDMHJRGR]PLHQQHMRQD]ZLHelContent YDUHO&RQWHQW GRFXPHQWJHW(OHPHQW%\,GijRQHij LQQHU+70/ Zmienna elContentEÚG]LHWHUD]]DZLHUDïDQDVWÚSXMÈF\FLÈJ WHNVWRZ\ ’ĂZLHĝH ğJL’
    
    USTAWIENIE ZAWARTOŚCI 3RQLĝV]\ZLHUV]NRGXSRZRGXMHGRGDQLH]DZDUWRĂFL]PLHQQHM elContentïÈF]QLH]FDï\PNRGHP]QDF]QLNöZ GRSLHUZV]HJR HOHPHQWXOLVW\ GRFXPHQWJHW(OHPHQW%\,GijRQHij LQQHU+70/ HO&RQWHQW
    
    UAKTUALNIENIE TEKSTU I KODU ZNACZNIKÓW 1DSRF]ÈWNXRPDZLDQHJR VNU\SWX]DZDUWRĂÊSLHUZV]HJR HOHPHQWXOLVW\]RVWDMHXPLHV]F]RQDZ]PLHQQHMRQD]ZLH ğUVW,WHP.
    
    1DVWÚSQLHSRELHUDQDMHVW ]DZDUWRĂÊWHJRHOHPHQWXOLVW\ ]DZDUWRĂÊWDXPLHV]F]RQD]RVWDMHZ]PLHQQHMitemContent.
    
    :UHV]FLH]DZDUWRĂÊOLVW\]RVWDMH XPLHV]F]RQDZïÈF]X=ZUöÊ XZDJÚQDSRSU]HG]HQLHXNRĂQLNDPL]QDNöZFXG]\VïRZX
    
    FMVLQQHUKWPOMV
    
    JAVASCRIPT
    
    // Umieszczenie w zmiennej pierwszego elementu listy. YDUğUVW,WHP GRFXPHQWJHW(OHPHQW%\,GijRQHij  3REUDQLH]DZDUWRĂFLSLHUZV]HJRHOHPHQWXOLVW\ YDULWHP&RQWHQW ğUVW,WHPLQQHU+70/ 8DNWXDOQLHQLH]DZDUWRĂFLSLHUZV]HJRHOHPHQWXOLVW\DE\VWDïVLÚïÈF]HP ğUVW,WHPLQQHU+70/ ijDKUHI ?ĵKWWSH[DPSOHRUJ?ĵ!ijLWHP&RQWHQWijD!ij
    
    WYNIK
    
    3RQLHZDĝ]DZDUWRĂÊFLÈJXWHNVWRZHJR]RVWDïD GRGDQDGRHOHPHQWX]DSRPRFÈZïDĂFLZRĂFL innerHTMLZV]\VWNLH]QDOH]LRQHZQLP HOHPHQW\EÚGÈSU]H]SU]HJOÈGDUNÚXPLHV]F]RQHZGU]HZLHPRGHOX'20:RPDZLDQ\P SU]\NïDG]LHQDVWURQLH]RVWDïXPLHV]F]RQ\ element 1RZHHOHPHQW\RF]\ZLĂFLH EÚGÈGRVWÚSQHGODLQQ\FKVNU\SWöZGRïÈF]RQ\FKQDVWURQLH  -HĝHOLZNRG]LH+70/Xĝ\ZDV]DWU\EXWöZ ]QDNLF\WRZDQLDQDOHĝ\SRSU]HG]LÊXNRĂQLkiem (\ ']LÚNLWHPXZVND]XMHV]ĝHWDN SRSU]HG]RQ\]QDNF\WRZDQLDQLHMHVWF]ÚĂFLÈ VNU\SWX
    
    OBIEKTOWY MODEL DOKUMENTU 227
    
    DODANIE ELEMENTÓW ZA POŚREDNICTWEM OPERACJI NA MODELU DOM 2SHUDFMHQDPRGHOX'20WRLQQDWHFKQLNDGRGDZDQLDQRZHM]DZDUWRĂFL QDVWURQLHLQQDQLĝGRGDZDQLHQRZHM]DZDUWRĂFL]DSRPRFÈZïDĂFLZRĂFL innerHTML 2EHMPXMHWU]\Z\PLHQLRQHSRQLĝHMNURNL
    
    
    
    
    
    
    
    UTWORZENIE ELEMENTU
    
    DOSTARCZENIE ZAWARTOŚCI
    
    DODANIE ELEMENTU DO MODELU DOM
    
    FUHDWH(OHPHQW
    
    FUHDWH7H[W1RGH
    
    appendChild()
    
    3UDFÚUR]SRF]\QDV]RGXWZRU]HQLDQRZHJRZÚ]ïDHOHPHQWX ]Z\NRU]\VWDQLHPPHWRG\ FUHDWH(OHPHQW 7HQZÚ]Hï HOHPHQWXMHVWSU]HFKRZ\ZDQ\ Z]PLHQQHM
    
    Metoda FUHDWH7H[W1RGH SRZRGXMHXWZRU]HQLHQRZHJR ZÚ]ïDWHNVWRZHJR7HQZÚ]Hï UöZQLHĝEÚG]LHSU]HFKRZ\ZDQ\Z]PLHQQHM0RĝQDJR GRGDÊGRZÚ]ïDHOHPHQWX]D SRPRFÈPHWRG\RQD]ZLH appendChild().
    
    3U]\JRWRZDQ\HOHPHQWRSFMRQDOQLHZUD]]SHZQÈ]DZDUWRĂFLÈZZÚěOHWHNVWRZ\P PRĝQD XPLHĂFLÊZGU]HZLHPRGHOX '20]DSRPRFÈPHWRG\ appendChild().
    
    *G\]RVWDQLHXWZRU]RQ\ ZÚ]HïHOHPHQWXQLHVWDQRZLRQ MHV]F]HF]ÚĂFLGU]HZDPRGHOX '20ĽEÚG]LHGRGDQ\GRSLHUR w kroku 3.
    
    :SU]\NïDG]LHQDNRñFX UR]G]LDïX]REDF]\V]LQQÈPHWRGÚ]DNWöUHMSRPRFÈPRĝQD XPLHĂFLÊHOHPHQWZGU]HZLH PRGHOX'20%ÚG]LHWRPHWRGD insertBefore()SU]H]QDF]RQD do dodawania nowego elemenWXSU]HGZVND]DQ\PZÚ]ïHP DOM.
    
    228 OBIEKTOWY MODEL DOKUMENTU
    
    :WHQVSRVöEGRVWDUF]DP\ ]DZDUWRĂÊGODHOHPHQWX7HQ NURNPRĝQDSRPLQÈÊMHĂOL ZGU]HZLHPRGHOX'20PD ]RVWDÊXPLHV]F]RQ\SXVW\ element.
    
    Metoda appendChild()SR]ZDODQDZVND]DQLHHOHPHQWXNWöU\ MDNRSRWRPQ\PD]RVWDÊGRGDQ\ GRZÚ]ïD
    
    =DUöZQRRSHUDFMHQDPRGHOX'20MDNLZïDĂFLZRĂÊinnerHTML PDMÈVZRMHSU]H]QDF]HQLH$QDOL]ÚGRW\F]ÈFÈZ\ERUXRGSRZLHGQLHJR UR]ZLÈ]DQLD]QDMG]LHV]ZSRGUR]G]LDOHķ3RUöZQDQLHWHFKQLNĽ XDNWXDOQLHQLH]DZDUWRĂFL+70/ĵ 8ZDJD0RĝHV]VLÚVSRWNDÊ]V\WXDFMÈJG\SURJUDPLĂFLSR]RVWDZLDMÈSXVW\HOHPHQWQDVWURQDFK+70/ZFHOXGRïÈF]DQLDQRZHM ]DZDUWRĂFLGRWHJRHOHPHQWX-HGQDNQDMOHSLHMXQLNDÊWDNLHJR SRGHMĂFLDMHĂOLQLHPDDEVROXWQHMNRQLHF]QRĂFL
    
    DODANIE ELEMENTU W DRZEWIE MODELU DOM Metoda FUHDWH(OHPHQW SRZRGXMHXWZRU]HQLHHOHPHQWXNWöU\PRĝQDXPLHĂFLÊ ZGU]HZLHPRGHOX'20 :RPDZLDQ\PSU]\NïDG]LHMHVW WRSXVW\HOHPHQW
    • OLVW\
      
      1RZ\HOHPHQW]QDMGXMHVLÚ Z]PLHQQHMRQD]ZLHQHZ(O GRSöNLQLH]RVWDQLHSöěQLHM XPLHV]F]RQ\ZGU]HZLHPRGHOX DOM.
      
      Metoda FUHDWH7H[W1RGH SR]ZDODQDXWZRU]HQLHQRZHJR ZÚ]ïDWHNVWRZHJRZFHOXMHJR GRïÈF]HQLDGRHOHPHQWX:Ú]Hï WHNVWRZ\MHVWSU]HFKRZ\ZDQ\ Z]PLHQQHMQHZ7H[W.
      
      FMVDGGHOHPHQWMV
      
      JAVASCRIPT
      
      // Utworzenie nowego elementu i przechowywanie go w zmiennej. YDUQHZ(O GRFXPHQWFUHDWH(OHPHQWijOLij  8WZRU]HQLHZÚ]ïDWHNVWRZHJRLSU]HFKRZ\ZDQLHJRZ]PLHQQHM YDUQHZ7H[W GRFXPHQWFUHDWH7H[W1RGHijNRPRVDU\ĝRZDij  'RïÈF]HQLHQRZHJRZÚ]ïDWHNVWRZHJRGRQRZHJRHOHPHQWX QHZ(ODSSHQG&KLOGQHZ7H[W  :\V]XNDQLHPLHMVFDZNWöU\PSRZLQLHQE\ÊGRGDQ\QRZ\HOHPHQW YDUSRVLWLRQ GRFXPHQWJHW(OHPHQWV%\7DJ1DPHijXOij >@ // Wstawienie nowego elementu we wskazanym miejscu. SRVLWLRQDSSHQG&KLOGQHZ(O 
      
      WYNIK
      
      :Ú]HïWHNVWRZ\]RVWDQLH]DSRPRFÈPHWRG\ appendChild()GRGDQ\GRQRZHJRZÚ]ïD elementu. Metoda getElementsByTagName() wybiera ZGU]HZLHPRGHOX'20SRïRĝHQLHZNWöU\P ]RVWDQLHZVWDZLRQ\QRZ\HOHPHQWWREÚG]LH SLHUZV]\HOHPHQW
      QDVWURQLH  1DNRñFXPHWRGDappendChild()MHVW Xĝ\WDSRQRZQLHW\PUD]HPGRZVWDZLHQLD ZGU]HZLHPRGHOX'20QRZHJRHOHPHQWX LMHJR]DZDUWRĂFL
      
      OBIEKTOWY MODEL DOKUMENTU 229
      
      USUNIĘCIE ELEMENTÓW ZA POMOCĄ OPERACJI NA MODELU DOM 2SHUDFMHQDPRGHOX'20PRĝQDZ\NRU]\VWDÊGRXVXQLÚFLDHOHPHQWöZ ]GU]HZDPRGHOX'20
      
      
      
      
      
      
      
      UMIESZCZENIE W ZMIENNEJ ELEMENTU PRZEZNACZONEGO DO USUNIĘCIA
      
      UMIESZCZENIE W ZMIENNEJ ELEMENTU NADRZĘDNEGO
      
      USUNIĘCIE ELEMENTU Z ELEMENTU NADRZĘDNEGO
      
      3UDFÚUR]SRF]\QDV]RGZ\ERUX HOHPHQWXSU]H]QDF]RQHJRGR XVXQLÚFLDLXPLHV]F]HQLHWHJR ZÚ]ïDHOHPHQWXZ]PLHQQHM
      
      .ROHMQ\PNURNLHPMHVWXVWDOHQLH HOHPHQWXQDGU]ÚGQHJR]DZLHUDMÈFHJRHOHPHQWSU]H]QDF]RQ\GR XVXQLÚFLDDQDVWÚSQLHXPLHV]F]HQLHMHJRZÚ]ïDHOHPHQWX Z]PLHQQHM
      
      Metoda removeChild() SRZLQQDE\ÊXĝ\WDZHOHPHQFLH QDGU]ÚGQ\PZ\EUDQ\PZNURNX 2.
      
      $E\Z\EUDÊHOHPHQWPRĝQD Z\NRU]\VWDÊGRZROQÈ]PHWRG SU]HGVWDZLRQ\FKZF]ÚĂFL UR]G]LDïXSRĂZLÚFRQHM]DS\WDniom modelu DOM.
      
      1DMSURVWV]\PUR]ZLÈ]DQLHP MHVWWXWDMXĝ\FLHZïDĂFLZRĂFL parentNode elementu.
      
      3DPLÚWDMĝHNLHG\XVXZDV]HOHPHQW]PRGHOX'20XVXQLÚWH EÚGÈUöZQLHĝZV]\VWNLHMHJR HOHPHQW\SRWRPQH
      
      230 OBIEKTOWY MODEL DOKUMENTU
      
      3U]\NïDGSU]HGVWDZLRQ\QD VWURQLHSRSUDZHMMHVWEDUG]R SURVW\DOHWDWHFKQLNDPRĝH ZSRZDĝQ\PVWRSQLX]PLHQLÊ GU]HZRPRGHOX'20
      
      Metoda removeChild()SRELHUD W\ONRMHGHQSDUDPHWUMDNLPMHVW RGQLHVLHQLHGRHOHPHQWXNWöU\ PD]RVWDÊXVXQLÚW\
      
      8VXQLÚFLHHOHPHQWöZ]PRGHOX '20ZSï\ZDQDQXPHU\LQGHNVöZHOHPHQWöZUöZQRU]ÚGQ\FK ZNROHNFMLNodeList.
      
      USUNIĘCIE ELEMENTU Z DRZEWA MODELU DOM :SRQLĝV]\PSU]\NïDG]LH Z\NRU]\VWXMHP\PHWRGÚ removeChild()GRXVXQLÚFLD F]ZDUWHJRHOHPHQWXOLVW\ ZUD]]MHJR]DZDUWRĂFLÈ 
      
      3LHUZV]D]PLHQQDRQD]ZLH removeElSU]HFKRZXMHU]HF]\ZLVW\HOHPHQWSU]H]QDF]RQ\ GRXVXQLÚFLD]HVWURQ\WRMHVW F]ZDUW\HOHPHQWQDOLĂFLH 
      
      'UXJD]PLHQQDRQD]ZLH FRQWDLQHU(OSU]HFKRZXMHHOHment
      ]DZLHUDMÈF\ element SU]H]QDF]RQ\GRXVXQLÚFLD
      
      FMVUHPRYHHOHPHQWMV
      
      JAVASCRIPT
      
      YDUUHPRYH(O GRFXPHQWJHW(OHPHQWV%\7DJ1DPHijOLij >@ (OHPHQWSU]H]QDF]RQ\GRXVXQLÚFLD YDUFRQWDLQHU(O UHPRYH(OSDUHQW1RGH-HJRHOHPHQWQDGU]ÚGQ\ FRQWDLQHU(OUHPRYH&KLOGUHPRYH(O 8VXQLÚFLHHOHPHQWX
      
      WYNIK
      
      Metoda removeChild() MHVWXĝ\ZDQDZ]PLHQQHM SU]HFKRZXMÈFHMQD]ZÚZÚ]ïD QDGU]ÚGQHJR :\PDJDSRGDQLDMHGQHJR SDUDPHWUXMDNLPMHVWHOHPHQW SU]H]QDF]RQ\GRXVXQLÚFLD SU]HFKRZ\ZDQ\ZGUXJLHM ]PLHQQHM  ul li
      
      li
      
      li
      
      li
      
      ELEMENT NADRZĘDNY ELEMENT PRZEZNACZONY DO USUNIĘCIA
      
      OBIEKTOWY MODEL DOKUMENTU
      
      231
      
      PORÓWNANIE TECHNIK — UAKTUALNIENIE ZAWARTOŚCI HTML 3R]QDïHĂWU]\WHFKQLNLSR]ZDODMÈFHQDGRGDQLH]DZDUWRĂFL+70/QDVWURQLH LQWHUQHWRZHM:DUWRSRUöZQDÊGRVWÚSQHPRĝOLZRĂFLZW\P]DNUHVLH :NDĝG\PMÚ]\NXSURJUDPRZDQLDF]ÚVWRLVWQLHMH ZLHOHVSRVREöZQDZ\NRQDQLHGDQHJR]DGDQLD -HĝHOLSRSURVLV]G]LHVLÚFLXSURJUDPLVWöZRXWZRU]HQLHGDQHJRVNU\SWXPRĝHV]RWU]\PDÊG]LHVLÚÊ UöĝQ\FKSRGHMĂÊ 1LHNWöU]\SURJUDPLĂFLVÈSU]HNRQDQLĝHVWRVRZDQHSU]H]QLFKUR]ZLÈ]DQLHMHVWķZïDĂFLZ\Pĵ UR]ZLÈ]DQLHPGDQHJRSUREOHPXJG\LVWQLHMHZLHOH UöĝQ\FKVSRVREöZ-HĝHOLUR]XPLHV]GODF]HJR SHZQHRVRE\Z\ELHUDMÈNRQNUHWQHUR]ZLÈ]DQLD ]DPLDVWLQQ\FKWR]QDMGXMHV]VLÚQDZïDĂFLZHM GURG]HDE\]GHF\GRZDÊF]\GDQHSRGHMĂFLHMHVW RGSRZLHGQLHZ7ZRLPSURMHNFLH
      
      GRFXPHQWZULWH Metoda GRFXPHQWZULWH RIHUXMHSURVW\VSRVöE GRGDQLDQDVWURQLH]DZDUWRĂFLQLHLVWQLHMÈFHMZMHM SLHUZRWQ\PNRG]LHěUöGïRZ\P-HGQDNVWRVRZDQLH WHMPHWRG\U]DGNRMHVW]DOHFDQH
      
      ZALETY
      
      • 3RF]ÈWNXMÈF\SURJUDPLĂFLPRJÈEDUG]RV]\ENR LïDWZR]REDF]\ÊMDNPRĝQDGRGDZDÊQRZÈ ]DZDUWRĂÊQDVWURQLH
      
      WADY
      
      • 7DPHWRGDG]LDïDW\ONRSRGF]DVSRF]ÈWNRZHJR ZF]\W\ZDQLDVWURQ\
      
      • -HĝHOLXĝ\MHV]WHMPHWRG\SRZF]\WDQLXVWURQ\
      
      WR 1. PRĝHQDVWÈSLÊQDGSLVDQLHFDïHMVWURQ\ 2. QRZD]DZDUWRĂÊPRĝHQLH]RVWDÊGRGDQD 3. PRĝHQDVWÈSLÊXWZRU]HQLHQRZHMVWURQ\ 0HWRGDPRĝHSRZRGRZDÊSUREOHP\]HVWURQDPL;+70/ĂFLĂOH]JRGQ\PL]HVWDQGDUGDPL VLHFLRZ\PL 2EHFQLHPHWRGDWDMHVWU]DGNRVWRVRZDQDSU]H] SURJUDPLVWöZRJöOQLHU]HF]ELRUÈFMHMXĝ\FLH MHVWRGUDG]DQH
      
      • • 232 OBIEKTOWY MODEL DOKUMENTU
      
      :]DOHĝQRĂFLRG]DGDQLDPRĝQD]DVWRVRZDÊUöĝQHWHFKQLNL PDMÈFSU]\W\PQDXZDG]HUR]EXGRZÚSU]\V]ïHMZLWU\Q\  elementLQQHU+70/
      
      OPERACJE NA MODELU DOM
      
      :ïDĂFLZRĂÊinnerHTMLSR]ZDODQDSREUDQLH OXEXDNWXDOQLHQLHFDïHM]DZDUWRĂFLGRZROQHJR HOHPHQWXïÈF]QLH]NRGHP]QDF]QLNöZ MDNRFLÈJX WHNVWRZHJR
      
      3RMÚFLHķRSHUDFMHQDPRGHOX'20ĵRGQRVLVLÚ GR]ELRUXPHWRGLZïDĂFLZRĂFLSR]ZDODMÈF\FK QDX]\VNDQLHGRVWÚSXGRHOHPHQWöZLZÚ]ïöZ WHNVWRZ\FKRUD]LFKWZRU]HQLHLXDNWXDOQLDQLH
      
      ZALETY
      
      ZALETY
      
      • ']LÚNLZ\PLHQLRQHMZïDĂFLZRĂFLPRĝQDGRGDÊ
      
      • 3RGHMĂFLHWRGRVNRQDOHVSUDZG]DVLÚSRGF]DV
      
      •
      
      •
      
      •
      
      GXĝÈLORĂÊQRZHJRNRGX]QDF]QLNöZXĝ\ZDMÈF SU]\W\PPQLHMV]HMLORĂFLNRGXQLĝZSU]\SDGNX RSHUDFMLQDPRGHOX'20 *G\GRGDMHP\GXĝRQRZ\FKHOHPHQWöZQD VWURQLHLQWHUQHWRZHMNRU]\VWDQLH]WHMZïDĂFLZRĂFLMHVWV]\EV]HQLĝSU]HSURZDG]DQLHRSHUDFML na modelu DOM. :ïDĂFLZRĂÊWDSR]ZDODQDXVXQLÚFLH ZSURVW\VSRVöEFDïHM]DZDUWRĂFL]MHGQHJR HOHPHQWXSU]H]SU]\SLVDQLHPXSXVWHJRFLÈJX WHNVWRZHJR 
      
      •
      
      ]PLDQ\MHGQHJRHOHPHQWXZHIUDJPHQFLH PRGHOX'20]DZLHUDMÈF\PZLHOHHOHPHQWöZ UöZQRU]ÚGQ\FK 3RGHMĂFLHWRQLHPDZSï\ZXQDSURFHGXU\ REVïXJL]GDU]Hñ 3RGHMĂFLHWRSR]ZDODVNU\SWRPQDSU]\URVWRZH GRGDZDQLHHOHPHQWöZNLHG\MHGQRUD]RZRQLH FKFHV]]PLHQLDÊEDUG]RGXĝHMLORĂFLNRGX 
      
      WADY
      
      WADY
      
      • :ïDĂFLZRĂÊWDQLHSRZLQQDE\ÊVWRVRZDQD
      
      • -HĝHOLFKFHV]ZSURZDG]LÊGXĝR]PLDQ
      
      • •
      
      ZFHOXGRGDQLD]DZDUWRĂFLSRFKRG]ÈFHMRG Xĝ\WNRZQLNDQDSU]\NïDGQD]ZDXĝ\WNRZQLND OXENRPHQWDU]QDEORJX SRQLHZDĝZLÈĝHVLÚ WR]]DJURĝHQLDPLNWöUHEÚGÈRPöZLRQHQD F]WHUHFKNROHMQ\FKVWURQDFK :GXĝ\PIUDJPHQFLHPRGHOX'20RGL]RORZDQLHSRMHG\QF]\FKHOHPHQWöZPRĝHE\ÊWUXGQH 3URFHGXU\REVïXJL]GDU]HñPRJÈQLHG]LDïDÊ ]JRGQLH]RF]HNLZDQLDPL
      
      •
      
      Z]DZDUWRĂFLQDVWURQLHSRGHMĂFLHWRRNDĝHVLÚ ZROQLHMV]HQLĝXĝ\FLHZïDĂFLZRĂFLinnerHTML. 'RRVLÈJQLÚFLDWHJRVDPHJRFHOXNRQLHF]QHMHVW XWZRU]HQLH]QDF]QLHZLÚNV]HMLORĂFLNRGXQLĝ ZSU]\SDGNXSRGHMĂFLDRSDUWHJRQDZïDĂFLZRĂFL innerHTML.
      
      OBIEKTOWY MODEL DOKUMENTU 233
      
      ATAKI TYPU XSS -HĝHOL]DZDUWRĂÊ+70/GRGDMHV]QDVWURQLH]DSRPRFÈZïDĂFLZRĂFLinnerHTML OXENLONXPHWRGELEOLRWHNLM4XHU\ WRSRZLQLHQHĂPLHÊĂZLDGRPRĂÊ QLHEH]SLHF]HñVWZD]ZLÈ]DQHJR]DWDNDPLW\SX;66DQJFURVVVLWHVFULSWLQJ). :SU]HFLZQ\PUD]LHDWDNXMÈF\PRĝHX]\VNDÊGRVWÚSGRNRQWXĝ\WNRZQLNöZ :NVLÈĝFHSRGDQRZLHOHRVWU]HĝHñRQLHEH]SLHF]HñVWZDFKNWöUHF]\KDMÈQDSURJUDPLVWÚJG\ GRGDMH]DZDUWRĂÊ+70/QDVWURQLH]DSRĂUHGQLFWZHPZïDĂFLZRĂFLinnerHTML=QDMG]LHV]WDNĝH XZDJLGRW\F]ÈFH]ZLÈ]DQHJR]W\PXĝ\FLDM4XHU\ 
      
      1DNROHMQ\FKVWURQDFK]RVWDQÈRPöZLRQHNZHVWLH MDNLHSRZLQLHQHĂEUDÊSRGXZDJÚ'RZLHV]VLÚ WDNĝHMDN]DEH]SLHF]\ÊZLWU\QÚSU]HGDWDNDPL RPDZLDQ\FKWXWDMW\SöZ
      
      CO MOŻE ZROBIĆ ATAKUJĄCY? JAK DOCHODZI DO ATAKU TYPU XSS? :SU]\SDGNXDWDNXW\SX;66DWDNXMÈF\XPLHV]F]D ZZLWU\QLHLQWHUQHWRZHMNRGR]ïRĂOLZ\PG]LDïDQLX :LWU\Q\F]ÚVWRRIHUXMÈ]DZDUWRĂÊSU]\JRWRZDQÈ SU]H]ZLHOHUöĝQ\FKRVöE1DSU]\NïDG Xĝ\WNRZQLF\PRJÈWZRU]\ÊSURğOHLGRGDZDÊ NRPHQWDU]H ZLHOXDXWRUöZPRĝHSUDFRZDÊQDGSXEOLNRZDQ\PLDUW\NXïDPL GDQHPRJÈSRFKRG]LÊ]ZLWU\QWU]HFLFKWDNLFK MDN)DFHERRN7ZLWWHUNDQDï\LQIRUPDF\MQH LLQQH Xĝ\WNRZQLNPRĝHPLHÊPRĝOLZRĂÊSU]HND]\ZDQLDSOLNöZQDSU]\NïDG]GMÚÊOXENOLSöZZLGHR
      
      • • • •
      
      'DQHQDGNWöU\PLQLHPDV]NRQWUROLVÈRNUHĂODQH mianem GDQ\FKQLH]DXIDQ\FKLPXV]ÈE\Ê REVïXJLZDQH]]DFKRZDQLHPGXĝHMRVWURĝQRĂFL
      
      3U]HSURZDG]DMÈFDWDNW\SX;66LQWUX]PRĝH ]GRE\ÊGRVWÚSGRLQIRUPDFML]QDMGXMÈF\FKVLÚZ PRGHOX'20ïÈF]QLH]GDQ\PLZIRUPXODU]DFK VLHFLRZ\FK  SOLNDFKFRRNLHVGDQHMZLWU\Q\ WRNHQDFKVHVMLWRLQIRUPDFMHSR]ZDODMÈFHQD RGUöĝQLHQLHGDQHJRXĝ\WNRZQLNDRGLQQ\FK Xĝ\WNRZQLNöZORJXMÈF\FKVLÚGRZLWU\Q\ 
      
      • • •
      
      ']LÚNLZ\PLHQLRQ\PLQIRUPDFMRPDWDNXMÈF\PRĝH X]\VNDÊGRVWÚSGRNRQWDXĝ\WNRZQLNDDQDVWÚSQLH GRNRQDÊ]DNXSöZ]SR]LRPXSU]HMÚWHJRNRQWD Xĝ\WNRZQLND XPLHV]F]DÊQLHGR]ZRORQÈ]DZDUWRĂÊ GDOHMLV]\EFLHMUR]SU]HVWU]HQLDÊ]ïRĂOLZLH G]LDïDMÈF\NRG
      
      • • •
      
      NAWET PROSTY KOD MOŻE POWODOWAĆ PROBLEMY .RGR]ïRĂOLZ\PG]LDïDQLXïÈF]\ZVRELH+70/L-DYD6FULSWFKRÊWRDGUHV\85/LVW\OH&66PRJÈE\Ê Z\NRU]\VWDQHGR]DLQLFMRZDQLDDWDNöZW\SX;66 'ZDSRQLĝV]HSU]\NïDG\SRND]XMÈĝHQDZHWFDïNLHP SURVW\NRGPRĝHSRPöFDWDNXMÈFHPXZX]\VNDQLXGRVWÚSXGRNRQWDXĝ\WNRZQLND 3LHUZV]\SU]\NïDGSRZRGXMHXVWDZLHQLHGDQ\FKFRRNLHZ]PLHQQHMQDVWÚSQLHPRĝQDMHSU]HND]DÊGR ]XSHïQLHLQQHJRVHUZHUD VFULSW!YDUDGU ijKWWSH[DPSOHFRP[VVSKS"FRRNLH ijHVFDSHGRFXPHQWFRRNLH VFULSW! =NROHLSRQLĝV]\NRGSRND]XMHMDNEUDNXMÈF\REUD]PRĝHE\ÊXĝ\W\ZUD]]DWU\EXWHP+70/GR]DLQLFMRZDQLDG]LDïDQLD]ïRĂOLZHJRNRGX LPJVUF ĵKWWSQRğOHĵRQHUURU ĵDGU ijKWWSH[DPSOHFRP[VVSKS"ijHVFDSHGRFXPHQWFRRNLH ĵ;> .DĝG\NRG+70/]QLH]DXIDQHJRěUöGïDRWZLHUDPRĝOLZRĂÊSU]HSURZDG]HQLDDWDNXW\SX;66-HGQDN ]DJURĝHQLHMHVW]ZLÈ]DQHW\ONR]QLHNWöU\PL]QDNDPL 234 OBIEKTOWY MODEL DOKUMENTU
      
      OCHRONA PRZED ATAKAMI TYPU XSS WERYFIKACJA DANYCH WEJŚCIOWYCH DOSTARCZANYCH SERWEROWI 1.2GZLHG]DMÈF\PZLWU\QÚ SR]ZDODMQDXĝ\ZDQLHW\ONR W\FK]QDNöZNWöUHVÈSRWU]HEQH ZFHOXGRVWDUF]HQLDLQIRUPDFML 1D]\ZDVLÚWRZHU\ğNDFMÈ. Nie SR]ZDODMQLH]DXIDQ\PXĝ\WNRZQLNRPQDSU]HND]\ZDQLH ]QDF]QLNöZ+70/OXENRGX -DYD6FULSW
      
      2.:VHUZHU]HGZXNURWQLH VSUDZG]DMGDQHSRFKRG]ÈFH RGXĝ\WNRZQLND]DQLPMH Z\ĂZLHWOLV]OXEZVWDZLV]GR ED]\GDQ\FK7RMHVWEDUG]R ZDĝQHSRQLHZDĝZ\ïÈF]DMÈF REVïXJÚ-DYD6FULSWXĝ\WNRZQLF\ PRJÈSRPLQÈÊSU]HSURZDG]HQLH ZHU\ğNDFMLZSU]HJOÈGDUFH LQWHUQHWRZHM
      
      3.%D]DGDQ\FKPRĝHEH]SLHF]QLH]DZLHUDÊNRG]QDF]QLNöZLVNU\SW\SRFKRG]ÈFH ]]DXIDQ\FKěUöGHïQDSU]\NïDG Xĝ\ZDQ\SU]H]&LHELHV\VWHP &06 :\QLNDWR]IDNWXĝH ED]DGDQ\FKMHG\QLHSU]HFKRZXMHNRGOHF]QLHSUöEXMHJR SU]HWZDU]DÊ
      
      Żądania stron z serwera WWW i dane przekazywane do tego serwera
      
      Pobranie informacji z przeglądarki i przekazanie ich do bazy danych
      
      Przechowywanie informacji utworzonych przez administratorów i użytkowników witryny
      
      PRZEGLĄDARKA Przetwarzanie plików HTML, CSS i JavaScript pochodzących z serwera WWW
      
      SERWER WWW Wygenerowanie stron na podstawie danych pochodzących z bazy danych oraz wstawienie ich w szablonach
      
      BAZA DANYCH Zwrot zawartości wymaganej do utworzenia stron internetowych
      
      ZNEUTRALIZOWANIE DANYCH POCHODZĄCYCH Z SERWERA I BAZY DANYCH 6..LHG\GDQHRSXV]F]ÈED]Ú GDQ\FKZV]\VWNLHSRWHQFMDOQLH QLHEH]SLHF]QH]QDNLSRZLQQ\ E\Ê]QHXWUDOL]RZDQHSDWU] SRGUR]G]LDïķ;66Ľ]QHXWUDOL]RZDQLHLNRQWUROD]QDF]QLNöZĵ 
      
      5.8SHZQLMVLÚĝH]DZDUWRĂÊ Z\JHQHURZDQDSU]H]Xĝ\WNRZQLNöZMHVWZVWDZLDQDMHG\QLH ZRNUHĂORQ\FKF]ÚĂFLDFKSOLNöZ V]DEORQöZSDWU]SRGUR]G]LDï ķ;66ĽZHU\ğNDFMDLV]DEORQ\ĵ 
      
      4. 1LHWZöU]IUDJPHQWöZ PRGHOX'20]DZLHUDMÈF\FKNRG +70/SRFKRG]ÈF\]QLH]DXIDQ\FKěUöGHï7DND]DZDUWRĂÊ SRZLQQDE\ÊGRGDZDQDMHG\QLH ZSRVWDFLWHNVWXRUD]SRMHM ZF]HĂQLHMV]\P]QHXWUDOL]RZDQLX
      
      :ïDĂFLZRĂFLinnerHTMLPRĝHV]ZLÚFXĝ\ZDÊGREH]SLHF]QHJRGRGDZDQLDNRGX]QDF]QLNöZQDVWURQLH MHĝHOLVDPRG]LHOQLHXWZRU]\ïHĂWHQNRG:SU]\SDGNXMDNLHMNROZLHN]DZDUWRĂFLSRFKRG]ÈFHM]QLH]DXIDQ\FKěUöGHïSRZLQQDE\ÊRQD]QHXWUDOL]RZDQDLGRGDQDMHG\QLHZSRVWDFLWHNVWXQLHNRGX]QDF]QLNöZ  ]DSRPRFÈZïDĂFLZRĂFLWDNLFKMDNtextContent. OBIEKTOWY MODEL DOKUMENTU 235
      
      XSS — WERYFIKACJA I SZABLONY 8SHZQLMVLÚĝHXĝ\WNRZQLF\PRJÈZSURZDG]DÊMHG\QLH]QDNLQLH]EÚGQH GRSU]HND]DQLDLQIRUPDFML3RQDGWRRJUDQLF]PLHMVFDQDVWURQLH ZNWöU\FKEÚG]LHZ\ĂZLHWODQDGRVWDUF]DQDSU]H]QLFK]DZDUWRĂÊ FILTRUJ I WERYFIKUJ DANE WEJŚCIOWE 3RGVWDZRZ\PĂURGNLHPRFKURQ\MHVWXQLHPRĝOLZLHQLHXĝ\WNRZQLNRPZSURZDG]DQLDZSRODFK IRUPXODU]\VLHFLRZ\FKW\FK]QDNöZNWöUHQLH VÈQLH]EÚGQHGRSU]HND]DQLDGDQHJRURG]DMX LQIRUPDFML 1DSU]\NïDGQD]ZDXĝ\WNRZQLNDLDGUHVHPDLO QLH]DZLHUDMÈQDZLDVöZRVWU\FKDPSHUVDQGöZ LQDZLDVöZ]Z\Nï\FK0RĝQDZLÚFSU]HSURZDG]LÊ ZHU\ğNDFMÚGDQ\FKPDMÈFÈQDFHOXXQLHPRĝOLZLHQLHXĝ\FLDZ\PLHQLRQ\FK]QDNöZ 7ÚRSHUDFMÚPRĝQDSU]HSURZDG]LÊZSU]HJOÈGDUFHLQWHUQHWRZHMDOHWU]HED]URELÊWRWDNĝH ZVHUZHU]HSRQLHZDĝXĝ\WNRZQLNPöJïZ\ïÈF]\Ê REVïXJÚ-DYD6FULSWZSU]HJOÈGDUFH :LÚFHM LQIRUPDFMLQDWHPDWZHU\ğNDFMLGDQ\FK]QDMG]LHV] ZUR]G]LDOH
      
      OGRANICZ MIEJSCA, W KTÓRYCH JEST UMIESZCZANA ZAWARTOŚĆ POCHODZĄCA OD UŻYTKOWNIKÓW ,QWUX]QLHXĝ\MHpo prostu]QDF]QLNöZVFULSW! ZFHOXSUöE\SU]HSURZDG]HQLDDWDNXW\SX;66 -DNVLÚGRZLHG]LDïHĂZSRGUR]G]LDOHķ$WDNLW\SX ;66ĵNRGR]ïRĂOLZ\PG]LDïDQLXPRĝH]QDMGRZDÊ VLÚZDWU\EXFLHSURFHGXU\REVïXJLDZLÚFSR]D ]QDF]QLNDPLVFULSW!$WDNW\SX;66PRĝQD ]DLQLFMRZDÊ]DSRPRFÈ]ïRĂOLZHJRNRGXZVW\ODFK &66OXEDGUHVDFK85/ 3U]HJOÈGDUNLLQWHUQHWRZHSU]HWZDU]DMÈNRG+70/ &66L-DYD6FULSWZUöĝQ\VSRVöEOXEZUöĝQ\FK NRQWHNVWDFKZ\NRQ\ZDQLD 3RQDGWRZSRV]F]HJöOQ\FKMÚ]\NDFKSURJUDPRZDQLDLQQH]QDNLPRJÈ SRZRGRZDÊSUREOHP\'ODWHJRWHĝ]DZDUWRĂÊ SRFKRG]ÈFD]QLH]DXIDQ\FKěUöGHïSRZLQQDE\Ê GRGDZDQDMHG\QLHZSRVWDFLWHNVWXDQLHNRGX ]QDF]QLNöZ LXPLHV]F]DQDW\ONRZHOHPHQWDFK ZLGRF]QHJRREV]DUXW]ZviewportuF]\OLREV]DUX RNQDSU]HJOÈGDUNLZNWöU\PZ\ĂZLHWODVLÚVWURQD internetowa).
      
      %\ÊPRĝHGRVWU]HJïHĂĝHVHNFMHNRPHQWDU]\ ZZLWU\QDFKLQWHUQHWRZ\FKU]DGNRSR]ZDODMÈQD GRGDZDQLHGXĝHMLORĂFLNRGX]QDF]QLNöZF]DVDPL WRMHG\QLHEDUG]RRJUDQLF]RQ\]ELöU+70/ 0D WRQDFHOXXQLHPRĝOLZLHQLHZVWDZLDQLDZ]QDF]QLNDFKVFULSW!NRGXR]ïRĂOLZ\PG]LDïDQLXOXE LQQ\FK]QDNöZ]DWU\EXWDPLSURFHGXUREVïXJL
      
      =DZDUWRĂFLGRVWDUF]RQHMSU]H]Xĝ\WNRZQLNöZ QLJG\QLHXPLHV]F]DMZZ\PLHQLRQ\FKSRQLĝHM PLHMVFDFKEH]GRNïDGQHJRMHMVSUDZG]HQLDLJG\ QLHPDV]Z\VWDUF]DMÈFHMZLHG]\RSRWHQFMDOQ\FK QLHEH]SLHF]HñVWZDFK]W\P]ZLÈ]DQ\FKLFK RPöZLHQLHZ\NUDF]DSR]D]DNUHVWHPDW\F]Q\ NVLÈĝNL 
      
      1DZHWHG\WRU\+70/Xĝ\ZDQHZZLHOXV\VWHPDFK &06RJUDQLF]DMÈPRĝOLZ\GRXĝ\FLDZQLFKNRG RUD]DXWRPDW\F]QLHSUöEXMÈPRG\ğNRZDÊZV]HONL NRG]QDF]QLNöZNWöU\Z\JOÈGDSRGHMU]DQLH
      
      Znaczniki c06/js/event-attributes.js
      
      JAVASCRIPT
      
      function checkUsername() { // Deklaracja funkcji. var elMsg = document.getElementById(’feedback’); // Pobranie elementu feedback. var elUsername = document.getElementById(’username’); 3REUDQLHQD]Z\Xĝ\WNRZQLND if (elUsername.value.length < 5) { -HĝHOLQD]ZDXĝ\WNRZQLNDMHVW]E\WNUöWND HO0VJWH[W&RQWHQW ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZij // Komunikat. } else { // W przeciwnym razie. elMsg.textContent = ’’; 8VXQLÚFLHNRPXQLNDWX } } 1D]Z\DWU\EXWöZSURFHGXU\REVïXJL ]GDU]HñZ+70/VÈLGHQW\F]QH ]QD]ZDPL]GDU]HñZ\PLHQLRQ\FK ZSRGUR]G]LDïDFKķ5öĝQHW\S\ ]GDU]HñĵLķ7HUPLQRORJLDĵDOHVÈ SRSU]HG]RQHSU]HGURVWNLHPon
      
      1DSU]\NïDG HOHPHQW\PRJÈPLHÊ]GDU]HQLDonclickonmouseover onmouseout; HOHPHQW\PRJÈPLHÊ]GDU]HQLDonsubmit; HOHPHQW\PRJÈPLHÊ]GDU]HQLDonkeypress onfocusonblus ZDARZENIA 257
      
      ľ ľ ľ
      
      TRADYCYJNE PROCEDURY OBSŁUGI ZDARZEŃ W MODELU DOM :V]\VWNLHQRZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZHSRWUDğÈREVïXJLZDÊWHQ VSRVöEWZRU]HQLDSURFHGXUREVïXJL]GDU]HñDOHGRNDĝGHM]QLFKPRĝQD GRïÈF]\ÊW\ONRMHGQÈIXQNFMÚ 3RQLĝHMSU]HGVWDZLRQRVNïDGQLÚGRïÈF]DQLD]GDU]HQLDGRHOHPHQWX]D SRPRFÈSURFHGXU\REVïXJL]GDU]Hñ:VND]\ZDQDMHVWIXQNFMDNWöUD SRZLQQD]RVWDÊZ\NRQDQDSRZ\VWÈSLHQLXGDQHJR]GDU]HQLD
      
      element.onzdarzenie = nazwaFunkcji; ELEMENT
      
      ZDARZENIE
      
      KOD
      
      Węzeł elementu w modelu DOM.
      
      Poprzedzone przedrostkiem on zdarzenie dołączone do węzła.
      
      Nazwa funkcji przeznaczonej do wywołania (bez nawiasu na końcu).
      
      :SRQLĝV]\PIUDJPHQFLHNRGX SURFHGXUDREVïXJL]GDU]Hñ MHVWZ\ZRï\ZDQDZRVWDWQLP ZLHUV]XSR]GHğQLRZDQLX IXQNFMLRUD]Z\ERU]HHOHPHQWX ZPRGHOX'20 
      
      Odniesienie do węzła elementu w modelu DOM jest często przechowywane w zmiennej.
      
      .LHG\IXQNFMDMHVWZ\ZRï\ZDQD QDZLDV]QDMGXMÈF\VLÚQDNRñFX MHMQD]Z\QDND]XMHLQWHUSUHWHURZLķ8UXFKRPWHUD]WHQNRGĵ
      
      3RQLHZDĝQLHFKFHP\XUXFKDPLDÊNRGXSU]HGZ\VWÈSLHQLHP ]GDU]HQLDQDZLDVMHVWSRPLQLÚW\ZSURFHGXU]HREVïXJL]GDU]Hñ SRND]DQHMZRVWDWQLPZLHUV]X
      
      function checkUsername() { .RGVSUDZG]DMÈF\OLF]EÚ]QDNöZZQD]ZLHXĝ\WNRZQLND } var el = document.getElementById(’username’); el.onblur = checkUsername; Nazwa zdarzenia jest poprzedzona przedrostkiem on.
      
      Na początku kodu znajduje się definicja nazwanej funkcji.
      
      Funkcja jest wywoływana przez procedurę obsługi zdarzeń w ostatnim wierszu, ale nawias został pominięty.
      
      3U]\NïDG\]DVWRVRZDQLDIXQNFMLDQRQLPRZHMLIXQNFMLZUD]]SDUDPHWUDPL]RVWDQÈSU]HGVWDZLRQH ZSRGUR]G]LDOHķ8ĝ\FLHSDUDPHWUöZZSURFHGXUDFKREVïXJL]GDU]HñLREVHUZDWRUDFK]GDU]Hñĵ 258 ZDARZENIA
      
      UŻYCIE PROCEDURY OBSŁUGI ZDARZEŃ W MODELU DOM :SRQLĝV]\PSU]\NïDG]LHSURFHGXUDREVïXJL]GDU]Hñ]QDMGXMH VLÚZRVWDWQLPZLHUV]XNRGX -DYD6FULSW3U]HG]DVWRVRZDQLHPSURFHGXU\REVïXJL]GDU]Hñ ZPRGHOX'20WU]HEDZ\NRQDÊ GZDNURNL -HĝHOLSRZ\VWÈSLHQLX ]GDU]HQLDZHZVND]DQ\P ZÚěOHZPRGHOX'20PDE\Ê Z\ZRïDQDQD]ZDQDIXQNFMDWR QDMSLHUZWU]HED]GHğQLRZDÊMHM NRG,VWQLHMHPRĝOLZRĂÊXĝ\FLD WDNĝHIXQNFMLDQRQLPRZHM 
      
      :RVWDWQLPZLHUV]XNRGX RPDZLDQHJRSU]\NïDGX SURFHGXUDREVïXJL]GDU]Hñ elUsername.onblurZVND]XMH ĝHNRGRF]HNXMHQDZ\VWÈSLHQLH ]GDU]HQLDblurZHOHPHQFLH SU]HFKRZ\ZDQ\PSU]H] ]PLHQQÈRQD]ZLHelUsername
      
      :Ú]HïHOHPHQWXPRGHOX'20 MHVWSU]HFKRZ\ZDQ\Z]PLHQQHM:RPDZLDQ\PSU]\NïDG]LH SROHWHNVWRZHNWöUHJRDWU\EXW idPDZDUWRĂÊusername  ]RVWDMHXPLHV]F]RQHZ]PLHQQHM RQD]ZLHelUsername
      
      1DVWÚSQLHPDP\]QDNUöZQRĂFL LGDOHMQD]ZÚIXQNFMLNWöUD ]RVWDQLHZ\NRQDQDSRZ\VWÈSLHQLX]GDU]HQLDZHZVND]DQ\P HOHPHQFLH=ZUöÊXZDJÚQD EUDNQDZLDVXSRQD]ZLHIXQNFML 2]QDF]DWREUDNPRĝOLZRĂFL
      
      JAVASCRIPT
      
      1
      
      2 3
      
      3RGF]DVXĝ\ZDQLDSURFHGXU REVïXJL]GDU]HñQD]ZD]GDU]HQLDMHVWSRSU]HG]DQDSUHğNVHP onPDP\ZLÚFonsubmit onchangeonfocusonblur onmouseoveronmouseoutLWG 
      
      c06/js/event-handler.js
      
      function checkUsername() { // Deklaracja funkcji. var elMsg = document.getElementById(’feedback’); // Pobranie elementu feedback. if (this.value.length < 5) { -HĝHOLQD]ZDXĝ\WNRZQLNDMHVW]E\WNUöWND elMsg.textContent = ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZij // Komunikat. } else { // W przeciwnym razie. elMsg.textContent = ’’; 8VXQLÚFLHNRPXQLNDWX } } var elUsername = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJRXVHUQDPH elUsername.onblur = checkUsername; *G\VWDQLHVLÚQLHDNW\ZQHQDOHĝ\Z\ZRïDÊIXQNFMÚ FKHFN8VHUQDPH 
      
      SU]HND]DQLDDUJXPHQWöZGRWHM IXQNFML-HĝHOLFKFHV]SU]HND]DÊ DUJXPHQW\IXQNFMLZ\ZRï\ZDQHM ZSURFHGXU]HREVïXJL]GDU]Hñ ]HUNQLMGRSRGUR]G]LDïXķ8ĝ\FLH SDUDPHWUöZZSURFHGXUDFK REVïXJL]GDU]HñLREVHUZDWRUDFK ]GDU]Hñĵ  .RG+70/SR]RVWDMHWDNLVDP MDNSU]HGVWDZLRQ\ZSRGUR]G]LDOHķ3URFHGXU\REVïXJL ]GDU]HñZDWU\EXWDFK+70/ĵ DOHMHVWSR]EDZLRQ\DWU\EXWX onblur3URFHGXUDREVïXJL]GDU]Hñ]QDMGXMHVLÚZLÚFZNRG]LH -DYD6FULSWDQLH+70/ 2EVïXJDZSU]HJOÈGDUNDFK ZZLHUV]XIXQNFMD checkUsername()Xĝ\ZDVïRZD NOXF]RZHJRthisZSROHFHQLX ZDUXQNRZ\PDE\VSUDZG]LÊ OLF]EÚ]QDNöZZSURZDG]RQ\FK SU]H]Xĝ\WNRZQLND3U]HGVWDZLRQ\SU]\NïDGG]LDïDZZLÚNV]RĂFL SU]HJOÈGDUHNLQWHUQHWRZ\FK SRQLHZDĝZLHG]ÈRQHĝH thisRGQRVLVLÚGRHOHPHQWX ZNWöU\PZ\VWÈSLïR]GDU]HQLH -HGQDNZSU]HJOÈGDUFH,QWHUQHW([SORUHURUD]ZF]HĂQLHMV]\FKVïRZRNOXF]RZH thisMHVW WUDNWRZDQHMDNRRGQLHVLHQLHGR RELHNWXwindow:Z\QLNXWHJR SU]HJOÈGDUNDQLHZLHZNWöU\P HOHPHQFLHZ\VWÈSLïR]GDU]HQLH7RR]QDF]DEUDNZDUWRĂFLGR VSUDZG]HQLDLZ\JHQHURZDQLH NRPXQLNDWXREïÚG]LH5R]ZLÈ]DQLHWHJRSUREOHPX]RVWDQLH SU]HGVWDZLRQHZSRGUR]G]LDOH ķ2ELHNW]GDU]HQLDZSU]HJOÈGDUFH,QWHUQHW([SORUHUļĵ
      
      ZDARZENIA 
      
      OBSERWATORY ZDARZEŃ 2EVHUZDWRU\]GDU]HñWRQDMQRZV]HSRGHMĂFLHZ]DNUHVLHSURFHGXUREVïXJL ]GDU]Hñ']LÚNLQLPPRĝQDSU]\SLVDÊ]GDU]HQLXZLHOHIXQNFML DOHMHGQRF]HĂQLHREVHUZDWRU\]GDU]HñQLHVÈREVïXJLZDQHZVWDUV]\FK ZHUVMDFKSU]HJOÈGDUHNLQWHUQHWRZ\FK 3RQLĝHMSU]HGVWDZLRQRVNïDGQLÚGRïÈF]DQLD]GDU]HQLDGRHOHPHQWX ]DSRPRFÈREVHUZDWRUD]GDU]Hñ:VND]\ZDQDMHVWIXQNFMDNWöUD SRZLQQD]RVWDÊZ\NRQDQDSRZ\VWÈSLHQLXGDQHJR]GDU]HQLD
      
      Dodaje ona obserwatora zdarzeń do węzła elementu w modelu DOM. METODA
      
      element.addEventListener(’zdarzenie’, nazwaFunkcji > ZDUWRĂÊBERRORZVND]); ELEMENT
      
      ZDARZENIE
      
      KOD
      
      PRZEPŁYW ZDARZEŃ
      
      Węzeł elementu w modelu DOM.
      
      Zdarzenie dołączane do węzła, ujęte w znaki cytowania.
      
      Nazwa funkcji przeznaczonej do wywołania.
      
      Wskazuje sposób przepływu zdarzeń. Najczęściej ma przypisaną wartość false (patrz podrozdział „Przepływ zdarzeń”).
      
      Odniesienie do węzła elementu w modelu DOM jest często przechowywane w zmiennej.
      
      function checkUsername() { .RGVSUDZG]DMÈF\OLF]EÚ]QDNöZZQD]ZLHXĝ\WNRZQLND } var el = document.getElementById(’username’); el.addEventListener(’blur’, checkUsername, false); Nazwa zdarzenia jest ujęta w znaki cytowania.
      
      Na początku kodu znajduje się definicja nazwanej funkcji.
      
      Funkcja jest wywoływana przez obserwatora zdarzeń w ostatnim wierszu, ale nawias został pominięty.
      
      3U]\NïDG\]DVWRVRZDQLDIXQNFMLDQRQLPRZHMLIXQNFMLZUD]]SDUDPHWUDPL]RVWDQÈSU]HGVWDZLRQH ZSRGUR]G]LDOHķ8ĝ\FLHSDUDPHWUöZZSURFHGXUDFKREVïXJL]GDU]HñLREVHUZDWRUDFK]GDU]Hñĵ
      
      260 ZDARZENIA
      
      UŻYCIE OBSERWATORA ZDARZEŃ :SRQLĝV]\PSU]\NïDG]LH REVHUZDWRU]GDU]HñSRMDZLD VLÚZRVWDWQLPZLHUV]XNRGX -DYD6FULSW3U]HG]DVWRVRZDQLHPREVHUZDWRUD]GDU]Hñ ZPRGHOX'20WU]HEDZ\NRQDÊ GZDNURNL -HĝHOLSRZ\VWÈSLHQLX ]GDU]HQLDZHZVND]DQ\P ZÚěOHZPRGHOX'20PDE\Ê Z\ZRïDQDQD]ZDQDIXQNFMDWR QDMSLHUZWU]HED]GHğQLRZDÊMHM NRG,VWQLHMHPRĝOLZRĂÊXĝ\FLD WDNĝHIXQNFMLDQRQLPRZHM  :Ú]HïHOHPHQWXPRGHOX'20 MHVWSU]HFKRZ\ZDQ\Z]PLHQQHM:RPDZLDQ\PSU]\NïDG]LH SROHWHNVWRZHNWöUHJRDWU\EXW idPDZDUWRĂÊusername  ]RVWDMHXPLHV]F]RQHZ]PLHQQHM RQD]ZLHelUsername JAVASCRIPT
      
      1
      
      2
      
      0HWRGDaddEventListener() SRELHUDWU]\ZïDĂFLZRĂFL L 2EVHUZRZDQH]GDU]HQLH :RPDZLDQ\PSU]\NïDG]LHWR MHVW]GDU]HQLHblur LL .RGSU]H]QDF]RQ\GRZ\NRQDQLDSRZ\ZRïDQLX]GDU]HQLD :RPDZLDQ\PSU]\NïDG]LHWR MHVWIXQNFMDcheckUsername() =ZUöÊXZDJÚQDEUDNQDZLDVöZ ZW\PPLHMVFXSRQLHZDĝ R]QDF]Dï\E\RQHXUXFKRPLHQLH IXQNFMLSRGF]DVZF]\WDQLD VWURQ\]DPLDVWSRZ\VWÈSLHQLX ]GDU]HQLD  LLL :DUWRĂÊERRORZVNDZVND]XMÈFDQDVSRVöESU]HSï\ZX ]GDU]HñSDWU]SRGUR]G]LDï ķ3U]HSï\Z]GDU]Hñĵ]UHJXï\ EÚG]LHWRZDUWRĂÊfalse 
      
      c06/js/event-listener.js
      
      function checkUsername() { // Deklaracja funkcji. var elMsg = document.getElementById(’feedback’); // Pobranie elementu feedback. if (this.value.length < 5) { -HĝHOLQD]ZDXĝ\WNRZQLNDMHVW]E\WNUöWND elMsg.textContent = ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZij // Komunikat. } else { // W przeciwnym razie. elMsg.textContent = ’’; 8VXQLÚFLHNRPXQLNDWX } } var elUsername = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJRXVHUQDPH *G\VWDQLHVLÚQLHDNW\ZQHQDOHĝ\Z\ZRïDÊIXQNFMÚ FKHFN8VHUQDPH  elUsername.addEventListener(’blur’, checkUsername, i ii false); iii
      
      OBSŁUGA W PRZEGLĄDARKACH INTERNETOWYCH ,QWHUQHW([SORUHULZF]HĂQLHMV]HZHUVMHQLHREVïXJXMÈ PHWRG\addEventListener() 1DWRPLDVWREVïXJXMÈPHWRGÚ RQD]ZLHaddEventListener() NWöUHMSU]\NïDGXĝ\FLD]RVWDQLH SU]HGVWDZLRQ\ZSRGUR]G]LDOH ķ2EVïXJDZVWDUV]\FKZHUVMDFK SU]HJOÈGDUNL,QWHUQHW([SORUHUĵ 3RQDGWRSRGREQLHMDNZSRSU]HGQLPSU]\NïDG]LHSU]HJOÈGDUND,(LZF]HĂQLHMV]HMHM Z\GDQLDQLHZLHG]ÈGRF]HJR RGZRïXMHVLÚVïRZRNOXF]RZH thisZSROHFHQLXZDUXQNRZ\P$OWHUQDW\ZQHSRGHMĂFLH SR]ZDODMÈFHQDUR]ZLÈ]DQLH WHJRSUREOHPX]RVWDQLH ]DSUH]HQWRZDQHZSRGUR]G]LDOH ķ:NWöU\PHOHPHQFLHZ\VWÈSLïR ]GDU]HQLH"ĵ
      
      NAZWY ZDARZEŃ ,QDF]HMQLĝZSU]\SDGNXSURFHGXUREVïXJL]GDU]HñZ+70/ RUD]WUDG\F\MQ\FKSURFHGXU REVïXJL]GDU]HñZPRGHOX '20JG\EÚG]LHP\SRGDZDÊ QD]ZÚ]GDU]HQLDQDNWöUH EÚG]LHUHDJRZDïNRGQLH EÚG]LHP\PXVLHOLSRSU]HG]DÊ MHMSU]HGURVWNLHPon -HĝHOL]DFKRG]LSRWU]HEDXVXQLÚFLDREVHUZDWRUD]GDU]HñGR G\VSR]\FMLPDV]IXQNFMÚRQD]ZLHremoveEventListener() 3RZRGXMHRQDXVXQLÚFLH REVHUZDWRUD]GDU]Hñ]H ZVND]DQHJRHOHPHQWXPDWDNLH VDPHSDUDPHWU\ 
      
      ZDARZENIA
      
      261
      
      UŻYCIE PARAMETRÓW W PROCEDURACH OBSŁUGI ZDARZEŃ I OBSERWATORACH ZDARZEŃ 3RQLHZDĝZSURFHGXU]HREVïXJL]GDU]HñRUD]ZREVHUZDWRUDFK]GDU]Hñ QLHPRĝQDXĝ\ZDÊQDZLDVXSRQD]ZLHIXQNFMLPRĝOLZRĂÊSU]HND]DQLD DUJXPHQWöZIXQNFMLZ\PDJD]DVWRVRZDQLDSHZQHMV]WXF]NL =Z\NOHNLHG\IXQNFMDZ\PDJD SHZQ\FKLQIRUPDFMLDE\ PRJïDZ\NRQDÊVZRMH]DGDQLH RGSRZLHGQLHDUJXPHQW\VÈ SRGDZDQHZQDZLDVLH]QDMGXMÈF\PVLÚSRQD]ZLHIXQNFML
      
      .LHG\LQWHUSUHWHUQDSRW\ND QDZLDVSRQD]ZLHIXQNFML QDW\FKPLDVWZ\NRQXMHMHMNRG -HGQDNZSU]\SDGNXSURFHGXU\ REVïXJL]GDU]HñZ\NRQDQLHNRGX FKFHP\ZVWU]\PDÊDĝGRFKZLOL Z\VWÈSLHQLDRGSRZLHGQLHJR ]GDU]HQLD
      
      Nazwa zdarzenia Nazwana funkcja ma po nazwie nawias zawierający parametr
      
      'ODWHJRWHĝMHĝHOL]DFKRG]L NRQLHF]QRĂÊSU]HND]DQLDDUJXPHQWöZIXQNFMLZ\ZRï\ZDQHM SU]H]SURFHGXUÚREVïXJL]GDU]Hñ OXEREVHUZDWRUD]GDU]HñWR WU]HEDMÈRSDNRZDÊZ\ZRïDQLHPIXQNFMLDQRQLPRZHM
      
      Początek funkcji anonimowej
      
      el.addEventListener(’blur’, function() { checkUsername(5); }, false);
      
      Funkcja anonimowa jest używana jako drugi argument. Stanowi „opakowanie” dla funkcji nazwanej
      
      Koniec polecenia Koniec metody addEventListener() Koniec funkcji anonimowej
      
      Wartość boolowska wskazująca na sposób przepływu zdarzeń (patrz podrozdział „Przepływ zdarzeń”)
      
      1D]ZDQDIXQNFMDZ\PDJDMÈFD DUJXPHQWöZ]QDMGXMHVLÚ ZHZQÈWU]IXQNFMLDQRQLPRZHM
      
      262 ZDARZENIA
      
      :SUDZG]LHIXQNFMDDQRQLPRZD PDQDZLDVDOH]RVWDMH Z\NRQDQDW\ONRSRZ\ZRïDQLX GDQHJR]GDU]HQLD
      
      )XQNFMDQD]ZDQDPRĝHXĝ\ZDÊ DUJXPHQWöZSRQLHZDĝMHVW Z\NRQ\ZDQDW\ONRSRZ\ZRïDQLXIXQNFMLDQRQLPRZHM
      
      UŻYCIE PARAMETRÓW W OBSERWATORZE ZDARZEŃ 3LHUZV]\ZLHUV]SRQLĝV]HJRSU]\NïDGXSRND]XMH XDNWXDOQLRQÈIXQNFMÚcheckUsername()3DUDPHWU minLengthRNUHĂODPLQLPDOQÈOLF]EÚ]QDNöZ ZQD]ZLHXĝ\WNRZQLND
      
      :DUWRĂÊSU]HND]\ZDQDIXQNFMLcheckUsername() MHVWZ\NRU]\VW\ZDQDZSROHFHQLXZDUXQNRZ\P GRVSUDZG]HQLDF]\QD]ZDXĝ\WNRZQLNDPD Z\VWDUF]DMÈFÈGïXJRĂÊ1DMHMSRGVWDZLHXĝ\WNRZQLNRWU]\PDRGSRZLHGQLNRPXQLNDWMHĂOLQD]ZD Xĝ\WNRZQLNDMHVW]E\WNUöWND c06/js/event-listener-with-parameters.js
      
      JAVASCRIPT
      
      var elUsername = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJRXVHUQDPH var elMsg = document.getElementById(’feedback’); // Pobranie elementu feedback. function checkUsername(minLength) { if (elUsername.value.length < minLength) {
      
      // Deklaracja funkcji. -HĝHOLQD]ZDXĝ\WNRZQLND MHVW]E\WNUöWND
      
      3U]\JRWRZDQLHNRPXQLNDWXREïÚG]LH HO0VJWH[W&RQWHQW ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMijPLQ/HQJWKij]QDNöZij } else { // W przeciwnym razie. elMsg.innerHTML = ’’; 8VXQLÚFLHNRPXQLNDWX } } elUsername.addEventListener(’blur’, function() { *G\HOHPHQWVWDQLHVLÚQLHDNW\ZQ\ checkUsername(5); :W\PPLHMVFXVÈSU]HND]\ZDQHDUJXPHQW\ }, false); 2EVHUZDWRU]GDU]HñZRVWDWQLFKWU]HFKZLHUV]DFK MHVWGïXĝV]\QLĝZSRSU]HGQLPSU]\NïDG]LH SRQLHZDĝZ\ZRïDQLHIXQNFMLcheckUsername() PXVL]DZLHUDÊZDUWRĂÊSDUDPHWUXminLength
      
      $E\RWU]\PDÊRGSRZLHGQLHGDQHREVHUZDWRU ]GDU]HñXĝ\ZDIXQNFMLDQRQLPRZHMG]LDïDMÈFHM ZFKDUDNWHU]HRSDNRZDQLD:HZQÈWU]WHJR RSDNRZDQLDQDVWÚSXMHZ\ZRïDQLHIXQNFML checkUsername()LSU]HND]DQLHDUJXPHQWX
      
      2EVïXJDZSU]HJOÈGDUNDFKQDNROHMQHMVWURQLH GRZLHV]VLÚMDNUR]ZLÈ]DÊSUREOHPEUDNXREVïXJL REVHUZDWRUöZ]GDU]HñZSU]HJOÈGDUFH,(RUD]MHM ZF]HĂQLHMV]\FKZ\GDQLDFK
      
      ZDARZENIA 263
      
      OBSŁUGA W STARSZYCH WERSJACH PRZEGLĄDARKI INTERNET EXPLORER :SU]HJOÈGDUFH,QWHUQHW([SORUHUļ]DVWRVRZDQRLQQ\PRGHO]GDU]Hñ FRR]QDF]DEUDNREVïXJLPHWRG\addEventListener()1DV]F]ÚĂFLHPRĝQD ]DVWRVRZDÊUR]ZLÈ]DQLHDZDU\MQHG]LÚNLNWöUHPXREVHUZDWRU\]GDU]Hñ G]LDïDMÈZVWDUV]\FKZHUVMDFKSU]HJOÈGDUNL,( 3U]HJOÈGDUNL,(ļQLHREVïXJXMÈPHWRG\ addEventListener()=DPLDVWWHJRZ\NRU]\VWXMÈZïDVQÈPHWRGÚRQD]ZLHattachEvent() Z\NRQXMÈFÈWRVDPR]DGDQLHDOHGRVWÚSQÈMHG\QLH ZSU]HJOÈGDUNDFK,QWHUQHW([SORUHU-HĝHOLFKFHV] Xĝ\ZDÊREVHUZDWRUöZ]GDU]HñZ,(RUD]ZH ZF]HĂQLHMV]\FKZ\GDQLDFKWHMSU]HJOÈGDUNLWR SRZLQLHQHĂ]DVWRVRZDÊSU]HGVWDZLRQHSRQLĝHM SROHFHQLHZDUXQNRZH
      
      -HĝHOLSU]HJOÈGDUNDREVïXJXMH addEventListener(): :\NRQDMNRGZHZQÈWU]WHJR QDZLDVXNODPURZHJR -HĝHOLQLHWR]DVWRVXMLQQH SRGHMĂFLH 8UXFKRPNRGZW\P QDZLDVLHNODPURZ\P
      
      ']LÚNLNRQVWUXNFMLif-elsePRĝQDVSUDZG]LÊ F]\SU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMHPHWRGÚ addEventListener():DUWRĂFLÈZDUXQNXZSROHFHQLXifEÚG]LHtrueMHĂOLSU]HJOÈGDUNDREVïXJXMH Z\PLHQLRQÈPHWRGÚZWHG\PRĝQDMHMXĝ\ZDÊ 1DWRPLDVWMHĂOLSU]HJOÈGDUNDQLHREVïXJXMHPHWRG\ addEventListener()WRNRGVSUöEXMH]DVWRVRZDÊ PHWRGÚattachEvent()
      
      if (el.addEventListener) { el.addEventListener(’blur’, function() { checkUsername(5); }, false ); } else { el.attachEvent(’onblur’, function() { checkUsername(5); }); }
      
      .LHG\Xĝ\ZDQDMHVWPHWRGDattachEvent()QD]ZD]GDU]HQLDSRZLQQDE\ÊSRSU]HG]RQDSU]HGURVWNLHP onQDSU]\NïDGblurVWDMHVLÚonblur :UR]G]LDOHSR]QDV]LQQHUR]ZLÈ]DQLHRSDUWHQDSOLNX QDU]ÚG]LRZ\P SR]ZDODMÈFHQDREVïXJÚPRGHOX]GDU]HñZVWDUV]\FKZ\GDQLDFK,( 264 ZDARZENIA
      
      ROZWIĄZANIE AWARYJNE UŻYCIA OBSERWATORÓW ZDARZEŃ W IE8 .RGSURFHGXU\REVïXJL]GDU]Hñ SU]HGVWDZLRQHMSRQLĝHM]RVWDï XWZRU]RQ\QDED]LHNRGX ]SRSU]HGQLHJRSU]\NïDGXDOH W\PUD]HPMHVW]QDF]QLHGïXĝV]\ SRQLHZDĝ]DZLHUDUR]ZLÈ]DQLH DZDU\MQHSU]H]QDF]RQHGODSU]HJOÈGDUHN,QWHUQHW([SORUHUļ 3RIXQNFMLcheckUsername() ]QDMGXMHVLÚSROHFHQLHif JAVASCRIPT
      
      VSUDZG]DMÈFHF]\PHWRGD addEventListener()MHVW REVïXJLZDQD:DUWRĂFLÈ ]ZURWQÈMHVWtrueMHĂOLZÚ]Hï HOHPHQWXREVïXJXMHWÚPHWRGÚ ZSU]HFLZQ\PUD]LH]ZUDFDQD MHVWZDUWRĂÊfalse -HĝHOLSU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMHPHWRGÚ addEventListener()WR
      
      c06/js/event-listener-with-ie-fallback.js
      
      var elUsername = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJRXVHUQDPH var elMsg = document.getElementById(’feedback’); // Pobranie elementu feedback. function checkUsername(minLength) { // Deklaracja funkcji. if (elUsername.value.length < minLength) { -HĝHOLQD]ZDXĝ\WNRZQLNDMHVW]E\WNUöWND 3U]\JRWRZDQLHNRPXQLNDWX elMsg.innerHTML = ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMijPLQ/HQJWK ij]QDNöZij } else { // W przeciwnym razie. elMsg.innerHTML = ’’; 8VXQLÚFLHNRPXQLNDWXREïÚG]LH } } if (elUsername.addEventListener) { -HĝHOLREVHUZDWRU]GDU]HñMHVWREVïXJLZDQ\ elUsername.addEventListener(’blur’, function(){ *G\SROHVWDMHVLÚQLHDNW\ZQH checkUsername(5); :\ZRïDQLHIXQNFMLFKHFN8VHUQDPH  }, false ); 3U]HFKZ\FHQLHSRGF]DVID]\SURSDJDFML]GDU]Hñ } else { // W przeciwnym razie. elUsername.attachEvent(’onblur’, function(){ 5R]ZLÈ]DQLHDZDU\MQHGOD,(RQEOXU checkUsername(5); :\ZRïDQLHIXQNFMLFKHFN8VHUQDPH  }); }
      
      Z\NRQDQ\]RVWDQLHNRGXPLHV]F]RQ\ZSLHUZV]\PQDZLDVLH NODPURZ\PRSDUW\ZïDĂQLHQD PHWRG]LHaddEventListener() 1DWRPLDVWMHĂOLSU]HJOÈGDUND LQWHUQHWRZDQLHREVïXJXMH Z\PLHQLRQHMPHWRG\WRXĝ\WD ]RVWDQLHPHWRGDattachEvent() ]QDQDZF]HĂQLHMV]\PZHUVMRP ,(=ZUöÊXZDJÚQDNRQLHF]QRĂÊ SRSU]HG]HQLDQD]Z\]GDU]HQLD SU]HGURVWNLHPon -HĝHOL]DFKRG]LSRWU]HED]DSHZQLHQLDREVïXJLSU]HJOÈGDUNL,( OXEZF]HĂQLHMV]\FKZ\GDñ  WR]DPLDVWVWRVRZDÊWDNLHUR]ZLÈ]DQLHDZDU\MQHGODNDĝGHgo]GDU]HQLDQDNWöUHNRGPD UHDJRZDÊOHSV]\PSRGHMĂFLHP MHVWXWZRU]HQLHZïDVQHMIXQNFML %ÚG]LHWRWDN]ZDQDIXQNFMDSRPRFQLF]DWZRU]ÈFDRGSRZLHGQLÈSURFHGXUÚREVïXJL]GDU]Hñ 3U]\NïDGWDNLHJRUR]ZLÈ]DQLD SR]QDV]ZUR]G]LDOHZNWöU\P]DMPXMHP\VLÚXVSUDZQLDQLHPLZHU\ğNDFMÈIRUPXODU]\ VLHFLRZ\FK %DUG]RZDĝQHMHVWSR]QDQLH VNïDGQLXĝ\ZDQHMSU]H],( LVWDUV]HZ\GDQLD DE\ ZLHG]LHÊGODF]HJRIXQNFMD SRPRFQLF]DMHVWXĝ\ZDQDLQD F]\PSROHJDMHMG]LDïDQLH -DNVLÚSU]HNRQDV]ZQDVWÚSQ\PUR]G]LDOHWRMHVWNROHMQD QLHVSöMQRĂÊPLÚG]\SU]HJOÈGDUNDPLLQWHUQHWRZ\PLNWöUDPRĝH E\Ê]QLZHORZDQDSU]H]Xĝ\FLH ELEOLRWHNLM4XHU\
      
      ZDARZENIA 265
      
      PRZEPŁYW ZDARZEŃ (OHPHQW\+70/VÈ]DJQLHĝGĝDQHZLQQ\FKHOHPHQWDFK-HĝHOLXPLHĂFLV] NXUVRUQDGïÈF]HPOXENOLNQLHV]MHWRDNW\ZXMHV]OXENOLNQLHV]WDNĝHMHJR HOHPHQW\QDGU]ÚGQH :\REUDěVRELHOLVWÚ]DZLHUDMÈFÈïÈF]H*G\]QDMG]LHVLÚQDGQLPNXUVRUP\V]\OXE]RVWDQLHRQR NOLNQLÚWH-DYD6FULSWZ\ZRïD]GDU]HQLDZGDQ\P HOHPHQFLHRUD]ZHZV]\VWNLFKHOHPHQWDFK ZHZQÈWU]NWöU\FK]QDMGXMHVLÚWHQHOHPHQW
      
      DO CU
      
      >
      
      >
      
      PROPAGACJA ZDARZEŃ
      
      PRZECHWYTYWANIE ZDARZEŃ
      
      1DSRF]ÈWNX]GDU]HQLH]QDMGXMHVLÚZQDMEDUG]LHM V]F]HJöïRZ\PZÚěOHDQDVWÚSQLHSU]HSï\ZDQD ]HZQÈWU]GRnajmniejV]F]HJöïRZHJR7RMHVW GRP\ĂOQ\W\SSU]HSï\ZX]GDU]HñSRZV]HFKQLH REVïXJLZDQ\SU]H]SU]HJOÈGDUNLLQWHUQHWRZH
      
      1DSRF]ÈWNX]GDU]HQLH]QDMGXMHVLÚZnajmniej V]F]HJöïRZ\PZÚěOHDQDVWÚSQLHSU]HSï\ZDGR ZHZQÈWU]GRQDMEDUG]LHMV]F]HJöïRZHJR7HQ W\SSU]HSï\ZX]GDU]HñQLHMHVWREVïXJLZDQ\SU]H] SU]HJOÈGDUNÚ,QWHUQHW([SORUHULMHMZF]HĂQLHMV]H ZHUVMH
      
      266 ZDARZENIA
      
      DLACZEGO PRZEPŁYW ZDARZEŃ MA ZNACZENIE? 3U]HSï\Z]GDU]HñWDNQDSUDZGÚPD]QDF]HQLHJG\NRG]DZLHUDSURFHGXU\ REVïXJL]GDU]HñZHOHPHQWDFKorazMHGHQ]QLFKMHVWHOHPHQWHPSRWRPQ\P OXESU]RGNLHP 3U]HGVWDZLRQ\SRQLĝHMSU]\NïDG PDREVHUZDWRUD]GDU]HñRGSRZLDGDMÈFHJRQD]GDU]HQLHclick ZZ\PLHQLRQ\FKHOHPHQWDFK MHGHQZHOHPHQFLH
      ; MHGHQZHOHPHQFLH
      • ; MHGHQZHOHPHQFLH HOHPHQWXOLVW\
        
        ľ ľ ľ
        
        :RNQLHGLDORJRZ\PNRPXQLNDWX]GDU]HQLHZ\ĂZLHWOD ]DZDUWRĂÊ+70/GDQHJR HOHPHQWXDG]LÚNLSU]HSï\ZRZL ]GDU]HñPRĝQDZVND]DÊ HOHPHQWRGSRZLHG]LDOQ\]D UHDNFMÚQD]GDU]HQLHclick
        
        -HĂOLFKRG]LRWUDG\F\MQHSURFHGXU\REVïXJL]GDU]HñZPRGHOX'20 RUD]SURFHGXU\REVïXJL]GDU]HñZDWU\EXWDFK+70/ ZV]\VWNLH QRZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZHGRP\ĂOQLHVWRVXMÈSURSDJDFMÚ ]GDU]Hñ]DPLDVWLFKSU]HFKZ\W\ZDQLD:SU]\SDGNXREVHUZDWRUD ]GDU]HñRVWDWQLSDUDPHWUPHWRG\addEventListener()SR]ZDODQD ZVND]DQLHNLHUXQNXZ\ZRï\ZDQLD]GDU]Hñ trueR]QDF]DID]ÚSU]HFKZ\W\ZDQLD falseR]QDF]DSURSDJDFMÚ]GDU]HñZDUWRĂÊfalseMHVWF]ÚVWRXĝ\ZDQDGRP\ĂOQLHSRQLHZDĝSU]HFKZ\W\ZDQLHQLHMHVWREVïXJLZDQH Z,(RUD]ZHZF]HĂQLHMV]\FKZ\GDQLDFKWHMSU]HJOÈGDUNL 
        
        ľ ľ
        
        3OLNHYHQWĠRZMVSROHZHMVWURQLHSRND]DQRZ\QLNMHJRG]LDïDQLD VDPSOLNMHVWGRVWÚSQ\ZPDWHULDïDFKGRïÈF]RQ\FKGRNVLÈĝNL  GHPRQVWUXMHUöĝQLFÚPLÚG]\SURSDJDFMÈ]GDU]HñDLFKSU]HFKZ\W\ZDQLHP:W\PSU]\NïDG]LHSURFHGXUDREVïXJL]GDU]HñPDZDUWRĂÊ falseGODRVWDWQLHJRSDUDPHWUXPHWRG\addEventListener() FRZVND]XMHQDXĝ\FLHSURSDJDFML]GDU]Hñ:SLHUZV]\PRNQLH GLDORJRZ\PZLG]LP\]DZDUWRĂÊ]QDMGXMÈFHJRVLÚQDMEDUG]LHM ZHZQÈWU]HOHPHQWXZNROHMQ\FKRNQDFKĽ]DZDUWRĂÊQDVWÚSQ\FKHOHPHQWöZZNLHUXQNXQD]HZQÈWU]:HUVMÚSU]HGVWDZLDMÈFÈ SU]HFKZ\W\ZDQLH]GDU]Hñ]QDMG]LHV]ZHZVSRPQLDQ\FKPDWHULDïDFK GRïÈF]RQ\FKGRNVLÈĝNL
        
        ZDARZENIA 267
        
        OBIEKT ZDARZENIA .LHG\]GDU]HQLHZ\VWÚSXMHRELHNWeventSU]HND]XMHLQIRUPDFMHRGDQ\P ]GDU]HQLXLHOHPHQFLHZNWöU\P]RVWDïRRQRZ\ZRïDQH =DNDĝG\PUD]HPJG\Z\VWÚSXMH]GDU]HQLHRELHNWevent ]DZLHUDZLHOHXĝ\WHF]Q\FK GDQ\FKGRW\F]ÈF\FKWHJR ]GDU]HQLD ZVND]XMHHOHPHQWZNWöU\P Z\VWÈSLïR]GDU]HQLH ZVND]XMHNODZLV]QDFLĂQLÚW\ GOD]GDU]HQLDkeypress; ZVND]XMHNWöUÈF]ÚĂÊ YLHZSRUWXXĝ\WNRZQLNNOLNQÈï GOD]GDU]HQLDclick
        
        ľ ľ ľ
        
        2ELHNW]GDU]HQLDMHVWSU]HND]\ZDQ\GRNDĝGHMIXQNFML ]GHğQLRZDQHMZSURFHGXU]H REVïXJLOXEREVHUZDWRU]H ]GDU]HQLD -HĝHOL]DFKRG]LSRWU]HED SU]HND]DQLDDUJXPHQWöZGRQD]ZDQHMIXQNFMLWRRELHNWevent EÚG]LHZSLHUZV]HMNROHMQRĂFL SU]HND]\ZDQ\DQRQLPRZHM IXQNFMLRSDNRZDQLDRGE\ZDVLÚ WRDXWRPDW\F]QLH 1DVWÚSQLH WU]HEDSRGDÊMÈMDNRSDUDPHWU IXQNFMLQD]ZDQHMMDNSRND]DQR QDQDVWÚSQHMVWURQLH 
        
        .LHG\RELHNWeventMHVW SU]HND]\ZDQ\IXQNFMLWRF]ÚVWR RWU]\PXMHSDUDPHWURQD]ZLHe; WRSRZV]HFKQLHVWRVRZDQ\VNUöW UR]ZLÈ]DQLHWRMHVWVWRVRZDQH UöZQLHĝZWHMNVLÈĝFH  3DPLÚWDMĝHQLHNWöU]\SURJUDPLĂFLXĝ\ZDMÈSDUDPHWUXRQD]ZLH eZFHOXRGZRïDQLDVLÚGR RELHNWXerror'ODWHJRWHĝ ZSHZQ\FKVNU\SWDFKePRĝH R]QDF]DÊeventOXEerror
        
        3U]HJOÈGDUND,QWHUQHW([SORUHUPDQLHW\ONRLQQÈVNïDGQLÚREVHUZDWRUöZ]GDU]HñMDNZVSRPQLDQR ZSRGUR]G]LDOHķ2EVïXJDZVWDUV]\FKZHUVMDFKSU]HJOÈGDUNL,QWHUQHW([SORUHUĵ DOHRELHNWeventZ,( ļPDWDNĝHLQQHQD]Z\PHWRGLZïDĂFLZRĂFLZ\PLHQLRQ\FKZSRQLĝV]\FKWDEHODFKLSU]HGVWDZLRQ\FK ZSU]\NïDG]LHZSRGUR]G]LDOHķ8ĝ\FLHREVHUZDWRUD]GDU]HñZUD]]RELHNWHPHYHQWĵ :’$¥&,:2¥m
        
        2'32:,('1,.:,(ļ
        
        OPIS
        
        target
        
        srcElement
        
        :VND]XMHHOHPHQWGRFHORZ\GOD]GDU]HQLD HOHPHQW]NWöU\PEÚG]LHSURZDG]RQDLQWHUDNFMD 
        
        type
        
        type
        
        7\SZ\ZRïDQHJR]GDU]HQLD
        
        cancelable
        
        QLHREVïXJLZDQD
        
        :VND]XMHF]\PRĝQDDQXORZDÊGRP\ĂOQH ]DFKRZDQLHHOHPHQWX
        
        METODA
        
        :’$¥&,:2¥m:,(ļ
        
        OPIS
        
        preventDefault()
        
        returnValue
        
        $QXOXMHGRP\ĂOQH]DFKRZDQLH]GDU]HQLD RLOHLVWQLHMHWDNDPRĝOLZRĂÊ 
        
        stopPropagation()
        
        cancelBubble
        
        8QLHPRĝOLZLD]GDU]HQLXGDOV]ÈSURSDJDFMÚ OXESU]HFKZ\W\ZDQLH
        
        268 ZDARZENIA
        
        OBSERWATOR ZDARZEŃ BEZ PARAMETRÓW 2
        
        function checkUsername(e) { 3 var target = e.target; 3REUDQLHHOHPHQWXGRFHORZHJRGOD]GDU]HQLD } var el = document.getElementById(’username’); el.addEventListener(’blur’, checkUsername, false); 1
        
        %H]NRQLHF]QRĂFLSRGHMPRZDQLDMDNLFKNROZLHNNURNöZ RGZRïDQLHGRRELHNWXeventMHVW DXWRPDW\F]QLHSU]HND]\ZDQHRG SRïRĝHQLDZVND]\ZDQHJRSU]H] OLF]EÚZNWöU\PREVHUZDWRU ]GDU]HñZ\ZRïXMHIXQNFMÚĮ
        
        Į'RWHJRSRïRĝHQLDJG]LH MHVW]GHğQLRZDQDIXQNFMD1D W\PHWDSLHSDUDPHWUPXVLE\Ê QD]ZDQ\'ODRELHNWXevent SDUDPHWUEDUG]RF]ÚVWRPD QD]ZÚe
        
        7DQD]ZDPRĝHE\Ê Xĝ\WDZHZQÈWU]IXQNFMLMDNR RGZRïDQLHGRRELHNWXevent 7HUD]PRĝQDMXĝXĝ\ZDÊPHWRG LZïDĂFLZRĂFLRELHNWXevent
        
        OBSERWATOR ZDARZEŃ Z PARAMETRAMI 3
        
        function checkUsername(e, minLength) { 4 var target = e.target; 3REUDQLHHOHPHQWXGRFHORZHJRGOD]GDU]HQLD } var el = document.getElementById(’username’); el.addEventListener(’blur’, function(e){ 1 checkUsername(e, 5); 2 }, false);
        
        2GZRïDQLHGRRELHNWXevent MHVWDXWRPDW\F]QLHSU]HND]\ZDQHIXQNFMLDQRQLPRZHMDOH PXVLE\ÊZVND]DQHZQDZLDVLH
        
        2GZRïDQLHGRRELHNWX eventPRĝHE\ÊSU]HND]DQH IXQNFMLQD]ZDQHMZSRVWDFLMHM SLHUZV]HJRSDUDPHWUX
        
        )XQNFMDQD]ZDQDRWU]\PXMH RGZRïDQLHGRRELHNWXevent MDNRSLHUZV]\SDUDPHWUPHWRG\ 1D]Z\WHMPRĝQDWHUD] Xĝ\ZDÊZQD]ZDQHMIXQNFML
        
        ZDARZENIA 
        
        OBIEKT ZDARZENIA W PRZEGLĄDARCE INTERNET EXPLORER 5 – 8 3RQLĝHMSU]HGVWDZLRQRMDNRELHNWeventPRĝQDX]\VNDÊZSU]HJOÈGDUFH ,(ļNieMHVWRQSU]HND]\ZDQ\DXWRPDW\F]QLHGRIXQNFMLSURFHGXU\ REVïXJLOXEREVHUZDWRUD]GDU]HñDOHjestGRVWÚSQ\MDNRHOHPHQW SRWRPQ\RELHNWXwindow :NRG]LHSRSUDZHMVWURQLHSROHFHQLHifVSUDZG]DF]\RELHNWevent]RVWDïSU]HND]DQ\IXQNFML -DNPRJïHĂ]REDF]\ÊZUR]G]LDOHZSRGUR]G]LDOHķ6SUDZG]HQLHUöZQRĂFLLLVWQLHQLDĵLVWQLHQLH RELHNWXMHVWWUDNWRZDQHMDNRZDUWRĂÊtruthy 'ODWHJRWHĝZDUXQHNPRĝQDRGF]\WDÊQDVWÚSXMÈFR ķ-HĝHOLRELHNW]GDU]HQLDnie istniejeĮĵ
        
        function checkUsername(e) { if (!e) { e = window.event; } }
        
        :SU]HJOÈGDUFH,QWHUQHW([SORUHURUD] ZF]HĂQLHMV]\FKZ\GDQLDFKeQLHSU]HFKRZXMH RELHNWXSU]HGVWDZLRQ\NRG]RVWDMHZ\NRQDQ\ DeRWU]\PXMHRELHNWeventEÚGÈF\HOHPHQWHP SRWRPQ\PRELHNWXwindow
        
        POBRANIE WŁAŚCIWOŚCI *G\RWU]\PDP\RGQLHVLHQLHGRRELHNWXevent GRVWÚSGRMHJRZïDĂFLZRĂFLPRĝQDX]\VNDÊ ZVSRVöESRND]DQ\ZNRG]LHSRSUDZHMVWURQLH 7HFKQLNDWDG]LDïDUöZQLHĝZSU]\SDGNXV]\ENLHJR REOLF]DQLDZDUWRĂFLSDWU]UR]G]LDïSRGUR]G]LDï ķ3U]HUZDQLHREOLF]DQLDZDUWRĂFLĵ 
        
        var target; target = e.target || e.srcElement;
        
        FUNKCJA POBIERAJĄCA ELEMENT DOCELOWY DLA ZDARZENIA -HĝHOLREVHUZDWRUD]GDU]HñWU]HEDSU]\SLVDÊNLONX HOHPHQWRPPRĝQDWR]URELÊ]DSRPRFÈNRGX SU]HGVWDZLRQHJRSRSUDZHMVWURQLH-HVWWRIXQNFMD ]ZUDFDMÈFDRGQLHVLHQLHGRHOHPHQWXZNWöU\P Z\VWÈSLïR]GDU]HQLH
        
        270 ZDARZENIA
        
        function getEventTarget(e) { if (!e) { e = window.event; } return e.target || e.srcElement; }
        
        UŻYCIE OBSERWATORA ZDARZEŃ WRAZ Z OBIEKTEM EVENT 3RQLĝHMSU]HGVWDZLRQRSU]\NïDGZ\NRU]\VW\ZDQ\ GRWÈGZUR]G]LDOHDOH]SHZQ\PLPRG\ğNDFMDPL )XQNFMDQRVLQD]ZÚcheckLength()]DPLDVW checkUsername()LPRĝHE\ÊXĝ\WDZGRZROQ\P SROXWHNVWRZ\P 2ELHNWeventMHVWSU]HND]\ZDQ\GRREVHUZDWRUD]GDU]Hñ2PDZLDQ\SU]\NïDG]DZLHUD UR]ZLÈ]DQLHDZDU\MQHGODSU]HJOÈGDUHNLQWHUQHWRZ\FK,(ļZUR]G]LDOH]DGHPRQVWURZDQR ]DVWRVRZDQLHIXQNFMLSRPRFQLF]HMGRWHJRFHOX  $E\RNUHĂOLÊHOHPHQW\Xĝ\ZDQHSU]H] LQWHUQDXWÚIXQNFMDZ\NRU]\VWXMHZïDĂFLZRĂÊ targetRELHNWXeventZSU]HJOÈGDUNDFK,(ļ VWRVRZDQDMHVW]NROHLZïDĂFLZRĂÊsrcElement 
        
        JAVASCRIPT function checkLength(e, minLength) { var el, elMsg; if (!e) { e = window.event; } el = e.target || e.srcElement; elMsg = el.nextSibling; if (el.value.length < minLength) {
        
        ']LÚNLZ\PLHQLRQ\PPRG\ğNDFMRPIXQNFMD MHVW]QDF]QLHHODVW\F]QLHMV]DQLĝSU]HGVWDZLRQD ZF]HĂQLHMZUR]G]LDOHSRQLHZDĝ 0RĝQDMÈZ\NRU]\VWDÊGRVSUDZG]HQLD GïXJRĂFLGRZROQHJRSRODWHNVWRZHJRRLOHSR W\PHOHPHQFLH]QDMGXMHVLÚSXVW\HOHPHQWNWöU\ PRĝHSU]HFKRZ\ZDÊNRPXQLNDWZ\ĂZLHWODQ\ Xĝ\WNRZQLNRZL0LÚG]\HOHPHQWDPLQLHSRZLQQ\ Z\VWÚSRZDÊVSDFMHOXE]QDNLQRZHJRZLHUV]D SRQLHZDĝZWHG\QLHNWöUHSU]HJOÈGDUNLLQWHUQHWRZH PRJÈ]ZUöFLÊZÚ]Hï]QDNXRGVWÚSX  .RGG]LDïDZSU]HJOÈGDUNDFK,(ļSRQLHZDĝ VSUDZG]DF]\SU]HJOÈGDUNDREVïXJXMHQDMQRZV]H ZSURZDG]RQHIXQNFMH-HĂOLLFKQLHREVïXJXMH WR]RVWDQLH]DVWRVRZDQHUR]ZLÈ]DQLHDZDU\MQH ZSRVWDFLVWDUV]\FKWHFKQLN  c06/js/event-listener-with-event-object.js
        
        // Deklaracja funkcji. // Deklaracja zmiennych. -HĝHOLRELHNWHYHQWQLHLVWQLHMH 8ĝ\FLHUR]ZLÈ]DQLDDZDU\MQHJRGOD,(
        
        3REUDQLHHOHPHQWXGRFHORZHJRGOD]GDU]HQLD 3REUDQLHQDVWÚSQHJRHOHPHQWXUöZQRU]ÚGQHJR -HĝHOLGïXJRĂÊMHVWQLHZ\VWDUF]DMÈFD GHğQLXMHP\NRPXQLNDW HO0VJLQQHU+70/ ij1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMijPLQ/HQJWKij]QDNöZij } else { // W przeciwnym razie. elMsg.innerHTML = ’’; 8VXQLÚFLHNRPXQLNDWX } } var elUsername = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJRXVHUQDPH if (elUsername.addEventListener) { -HĝHOLREVHUZDWRU]GDU]HñMHVW REVïXJLZDQ\ elUsername.addEventListener(’blur’, function(e) { // W przypadku zdarzenia blur. checkLength(e, 5); :\ZRïDQLHIXQNFMLFKHFN/HQJWK  }, false); 3U]HFKZ\FHQLHSRGF]DVID]\ SURSDJDFML]GDU]Hñ } else { // W przeciwnym razie. elUsername.attachEvent(’onblur’, function(e){ 5R]ZLÈ]DQLHDZDU\MQHGOD,(RQEOXU checkLength(e, 5); :\ZRïDQLHIXQNFMLFKHFN/HQJWK  }); }
        
        ZDARZENIA
        
        271
        
        DELEGACJA ZDARZENIA 8WZRU]HQLHREVHUZDWRUöZ]GDU]HñGODGXĝHMOLF]E\HOHPHQWöZPRĝHVSRZROQLÊG]LDïDQLHVWURQ\DOHSU]HSï\Z]GDU]HñSR]ZDODQDQDVïXFKLZDQLH]GDU]Hñ ZHOHPHQFLHQDGU]ÚGQ\P -HĝHOLXĝ\WNRZQLNSURZDG]LLQWHUDNFMÚ]GXĝÈ OLF]EÈHOHPHQWöZQDVWURQLHQDSU]\NïDGQD VNXWHNLVWQLHQLD EDUG]RGXĝHMOLF]E\SU]\FLVNöZZLQWHUIHMVLH Xĝ\WNRZQLND GïXJLHMOLVW\ Z\SHïQLRQ\FKZV]\VWNLFKNRPöUHNWDEHOL WRGRGDQLHREVHUZDWRUD]GDU]HñGRNDĝGHJR HOHPHQWXPRĝHGRSURZDG]LÊGR]Xĝ\FLDGXĝHM LORĂFLSDPLÚFLL]PQLHMV]\ÊZ\GDMQRĂÊDSOLNDFML
        
        ľ ľ ľ
        
        3RQLHZDĝ]GDU]HQLDZSï\ZDMÈQDHOHPHQW\ QDGU]ÚGQH]HZ]JOÚGXQDSU]HSï\Z]GDU]HñSDWU] SRGUR]G]LDïķ3U]HSï\Z]GDU]Hñĵ WRSURFHGXUÚ REVïXJL]GDU]HñPRĝQDXPLHĂFLÊZHOHPHQFLH QDGU]ÚGQ\PLXĝ\ZDÊZïDĂFLZRĂFLtargetRELHNWX eventGRZ\V]XNDQLDHOHPHQWöZSRWRPQ\FK ZNWöU\FKZ\VWÈSLïR]GDU]HQLH 3U]H]GRïÈF]HQLHREVHUZDWRUD]GDU]HñGR HOHPHQWXQDGU]ÚGQHJRRGSRZLHGěMHVWXG]LHODQD W\ONRMHGQHPXHOHPHQWRZL]DPLDVWVWRVRZDÊ SURFHGXUÚREVïXJL]GDU]HñGODNDĝGHJRHOHPHQWX SRWRPQHJR 
        
        =DGDQLHREVHUZDWRUD]GDU]Hñ]RVWDMHGHOHJRZDQH GRHOHPHQWXQDGU]ÚGQHJR:SU]\SDGNXOLVW\ SRND]DQHMSRSUDZHMVWURQLHMHĝHOLREVHUZDWRU ]GDU]Hñ]RVWDQLHXPLHV]F]RQ\ZHOHPHQFLH
        ]DPLDVWZSRV]F]HJöOQ\FKHOHPHQWDFK
        • WR SRWU]HEQ\MHVWW\ONRMHGHQREVHUZDWRU]GDU]Hñ 6NXWNLHPEÚG]LHRVLÈJQLÚFLHOHSV]HMZ\GDMQRĂFL DSRGRGDQLXOXEXVXQLÚFLXHOHPHQWöZOLVW\ UR]ZLÈ]DQLHEÚG]LHQDGDOIXQNFMRQRZDïRZWDNL VDPVSRVöE.RGRPDZLDQHJRSU]\NïDGX]RVWDï SU]HGVWDZLRQ\ZSRGUR]G]LDOHķ+70/ĵ 
          
          DODATKOWE KORZYŚCI WYNIKAJĄCE Z DELEGACJI ZDARZEŃ DZIAŁANIE Z NOWYMI ELEMENTAMI -HĝHOLZGU]HZLHPRGHOX'20 ]RVWDQÈXPLHV]F]RQHQRZH HOHPHQW\QLHWU]HEDEÚG]LH GRGDZDÊGRQLFKSURFHGXU REVïXJL]GDU]HñSRQLHZDĝ ]DGDQLHWR]RVWDïRGHOHJRZDQH GRHOHPHQWXQDGU]ÚGQHJR
          
          272 ZDARZENIA
          
          WYELIMINOWANIE OGRANICZEŃ ZWIĄZANYCH ZE SŁOWEM KLUCZOWYM THIS :HZF]HĂQLHMV]HMF]ÚĂFL UR]G]LDïXVïRZRNOXF]RZHthis ]RVWDïRXĝ\WHGRLGHQW\ğNDFML HOHPHQWXGRFHORZHJRGOD ]GDU]HQLD-HGQDNWHFKQLND WDQLHG]LDïDZSU]HJOÈGDUFH ,(OXEMHĂOLIXQNFMDZ\PDJD SDUDPHWUöZ
          
          UPROSZCZENIE KODU 'RXWZRU]HQLDMHVWPQLHMV]D OLF]EDIXQNFML3RQDGWRPQLHMV]D OLF]EDZDUVWZZ\VWÚSXMHPLÚG]\ PRGHOHP'20LNRGHPFR XïDWZLDREVïXJÚLNRQVHUZDFMÚ
          
          ZMIANA ZACHOWANIA DOMYŚLNEGO 2ELHNWeventSRVLDGDPHWRG\SR]ZDODMÈFHQD]PLDQÚGRP\ĂOQHJR]DFKRZDQLDHOHPHQWXRUD]QD]PLDQÚVSRVREXZMDNLHOHPHQW\QDGU]ÚGQHHOHPHQWX RGSRZLDGDMÈQD]GDU]HQLH preventDefault()
          
          stopPropagation()
          
          UŻYCIE OBU METOD
          
          3HZQH]GDU]HQLDWDNLHMDN NOLNQLÚFLHïÈF]DOXEZ\VïDQLH IRUPXODU]DVLHFLRZHJRSRZRGXMÈSU]HQLHVLHQLHXĝ\WNRZQLNDQD LQQÈVWURQÚ
          
          *G\]GDU]HQLH]RVWDQLH REVïXĝRQH]DSRPRFÈMHGQHJR HOHPHQWXPRĝHZ\VWÈSLÊ SRWU]HEDZVWU]\PDQLDSURSDJRZDQLD]GDU]HQLDGRHOHPHQWöZ QDGU]ÚGQ\FK]ZïDV]F]DMHĂOL LVWQLHMÈWDPRGG]LHOQHSURFHGXU\REVïXJLRGSRZLDGDMÈFHQDWH VDPH]GDU]HQLD 
          
          :SRGREQ\FKV\WXDFMDFK F]DVDPLPRĝQDVLÚVSRWNDÊ ]Xĝ\FLHPSRQLĝV]HJRSROHFHQLD ZIXQNFML return false;
          
          $E\]PLHQLÊ]DFKRZDQLH GRP\ĂOQHZVSRPQLDQ\FK HOHPHQWöZQDSU]\NïDG]DWU]\PDÊXĝ\WNRZQLNDQDWHMVDPHM VWURQLH]DPLDVWSU]HQLHĂÊJR GRVWURQ\ZVND]DQHMSU]H]ïÈF]H OXEQDQRZÈVWURQÚSRZ\VïDQLX IRUPXODU]DVLHFLRZHJR  PRĝQDZ\NRU]\VWDÊPHWRGÚ preventDefault()RELHNWX event 3U]HJOÈGDUND,(ļSRVLDGDZïDĂFLZRĂÊRQD]ZLH returnValueNWöUHMPRĝQD SU]\SLVDÊZDUWRĂÊfalse .RQVWUXNFMDZDUXQNRZD PRĝHVSUDZG]DÊF]\PHWRGD preventDefault()MHVW REVïXJLZDQDĽMHĂOLQLHWR ]DVWRVRZDQH]RVWDQLHSRGHMĂFLH ,( if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
          
          $E\]DWU]\PDÊSURSDJRZDQLH ]GDU]HñQDOHĝ\Xĝ\ÊPHWRG\ stopPropagation()RELHNWX event 2GSRZLHGQLNLHPZSU]HJOÈGDUFH,(RUD]ZF]HĂQLHMV]\FK MHMZ\GDQLDFKMHVWZïDĂFLZRĂÊ cancelBubbleNWöUHMPRĝQD SU]\SLVDÊZDUWRĂÊtrue7XWDM WDNĝHNRQVWUXNFMDZDUXQNRZD PRĝHVSUDZG]LÊF]\PHWRGD stopPropagation()MHVWREVïXJLZDQDĽMHĂOLQLHWR]RVWDQLH ]DVWRVRZDQHSRGHMĂFLH,(
          
          if (event.stopPropogation) { event.stopPropogation(); } else { event.cancelBubble = true; }
          
          8QLHPRĝOLZLDRQR]DFKRZDQLH GRP\ĂOQHHOHPHQWXDWDNĝH ZVWU]\PXMHSURSDJRZDQLH ]GDU]HñOXELFKSU]HFKZ\W\ZDQLH5R]ZLÈ]DQLHWRG]LDïD ZHZV]\VWNLFKSU]HJOÈGDUNDFK LQWHUQHWRZ\FKLMHVWQLH]Z\NOH SRSXODUQH =ZUöÊMHGQDNXZDJÚQDWR ĝHNLHG\LQWHUSUHWHUQDSRWND SROHFHQLHreturn false;QLH SU]HWZRU]\ĝDGQHJRNROHMQHJR NRGXZGDQHMIXQNFMLLSU]HMG]LH GRSLHUZV]HJRSROHFHQLDSR Z\ZRïXMÈF\PWÚIXQNFMÚ 3RQLHZDĝLVWQLHMHQLHEH]SLHF]HñVWZR]DEORNRZDQLDNRGX ZIXQNFMLF]ÚVWROHSV]\P UR]ZLÈ]DQLHPMHVWXĝ\FLH PHWRG\preventDefault() RELHNWXevent]DPLDVWSROHFHQLDreturn false;
          
          ZDARZENIA 273
          
          UŻYCIE DELEGACJI ZDARZEŃ :W\PSU]\NïDG]LHZ\NRU]\VWDP\ZLHG]Ú]GRE\WÈ GRWÈGZUR]G]LDOH.DĝG\HOHPHQWOLVW\]DZLHUDïÈF]H .LHG\Xĝ\WNRZQLNNOLNQLHïÈF]HDE\ZVND]DÊ]DNRñF]HQLH]DGDQLD HOHPHQW]RVWDQLHXVXQLÚW\]OLVW\ :\JOÈGXUXFKRPLRQHJRSURJUDPXSRND]DQR ZSRGUR]G]LDOHķ'HOHJDFMD]GDU]HQLDĵ 3RSUDZHMVWURQLHSU]HGVWDZLRQRGLDJUDPNWöU\ SRZLQLHQSRPöFZ]UR]XPLHQLXNROHMQRĂFLSU]HWZDU]DQLDNRGX 1DVWURQLHSRSUDZHM]QDMG]LHV]NRGěUöGïRZ\ SU]\NïDGX
          
          ľ
          
          1
          
          Pobranie elementu
          listy rzeczy do kupienia
          
          2
          
          N
          
          ľ
          
          4
          
          :NRG]LH+70/ïÈF]DSURZDG]ÈQDVWURQÚLWHP'RQH phpMHĂOLSU]HJOÈGDUNDQLHREVïXJXMHVNU\SWöZ -DYD6FULSW:\PLHQLRQ\SOLN3+3QLH]QDMGXMHVLÚ ZPDWHULDïDFKGRïÈF]RQ\FKGRNVLÈĝNLSRQLHZDĝ ]DZLHUDNRGZMÚ]\NXG]LDïDMÈF\PSRVWURQLHVHUZHUD :::ĽZ\NUDF]DWRSR]DSRUXV]DQÈWHPDW\NÚ 
          
          274
          
          ZDARZENIA
          
          T 3
          
          Użyj attachEvent()
          
          ľ
          
          2EVHUZDWRU]GDU]Hñ]RVWDïGRGDQ\GRHOHPHQWX
          DZLÚFPXVLE\ÊZ\EUDQ\ 6SUDZG]HQLHF]\SU]HJOÈGDUNDLQWHUQHWRZD REVïXJXMHPHWRGÚaddEventListener() -HĝHOLWDNQDVWÚSXMHZ\ZRïDQLHIXQNFMLitemDone() SRNOLNQLÚFLXHOHPHQWXOLVW\SU]H]Xĝ\WNRZQLND -HĝHOLQLHXĝ\ZDQDMHVWPHWRGDattachEvent() )XQNFMDitemDone()XVXQLHHOHPHQW]OLVW\'R G]LDïDQLDIXQNFMDSRWU]HEXMHSHZQ\FKLQIRUPDFML =DGHNODURZDQH]RVWDMÈWU]\]PLHQQHSU]HFKRZXMÈFH LQIRUPDFMHQLH]EÚGQHGRG]LDïDQLDIXQNFMLitemDone() =PLHQQDtargetZVND]XMHHOHPHQWNOLNQLÚW\ SU]H]Xĝ\WNRZQLND:FHOXRNUHĂOHQLDWHJRHOHPHQWX Z\ZRïDQDMHVWIXQNFMDgetTarget()2GE\ZDVLÚWRQD SRF]ÈWNXVNU\SWXLMHVWSRND]DQHQDGROHGLDJUDPX =PLHQQDelParentSU]HFKRZXMHHOHPHQWQDGU]ÚGQ\ HOHPHQW
          •  =PLHQQDelGrandparentSU]HFKRZXMHHOHPHQW QDGU]ÚGQ\HOHPHQWXQDGU]ÚGQHJR (OHPHQW
          • ]RVWDMHXVXQLÚW\]HOHPHQWX
             6SUDZG]HQLHF]\SU]HJOÈGDUNDLQWHUQHWRZD REVïXJXMHpreventDefault()0DWRQDFHOXXQLHPRĝOLZLHQLHSU]HQLHVLHQLDXĝ\WNRZQLNDQDQRZÈVWURQÚ -HĝHOLWDNQDOHĝ\Xĝ\ÊZ\PLHQLRQHMPHWRG\ -HĝHOLQLHXĝ\WDEÚG]LHVWDUV]DZïDĂFLZRĂÊ,( RQD]ZLHreturnValue
            
            Czy obsługiwana jest metoda addEventListener()?
            
            Użyj addEventListener()
            
            Zdarzenie: click, czyli kliknięcie dowolnego łącza listy
            
            Funkcja: itemDone() Usuwa z listy ukończone zadanie
            
            5
            
            6
            
            Utworzenie zmiennych: target: kliknięty element elParent: element nadrzędny klikniętego elementu elGrandparent: element nadrzędny elementu nadrzędnego
            
            7
            
            Pobranie klikniętego elementu; wywołanie getTarget()
            
            8
            
            Pobranie elementu nadrzędnego (
            • )
              
              9
              
              Pobranie elementu nadrzędnego elementu nadrzędnego (
              )
              
              10
              
              Usunięcie elementu
              • z
                
                
                11
                
                Czy metoda preventDefault() jest obsługiwana?
                
                N 13
                
                Użyj returnValue
                
                T 12
                
                preventDefault()
                
                Funkcja: getTarget() Pobiera element kliknięty przez użytkownika
                
                N
                
                Pobranie elementu docelowego dla zdarzenia
                
                Czy istnieje obiekt event?
                
                T
                
                Pobranie elementu docelowego dla zdarzenia za pomocą starego obiektu event w IE
                
                c06/event-delegation.html
                
                HTML
                
                
                • ocet balsamiczny
                
                
                JAVASCRIPT
                
                function getTarget(e) { if (!e) { e = window.event; } return e.target || e.srcElement; } 5 6 7 8
                
                function itemDone(e) { 8VXQLÚFLHHOHPHQWX]OLVW\ var target, elParent, elGrandparent; target = getTarget(e); elParent = target.parentNode;
                
                9 10
                
                11 12 13
                
                }
                
                1 2 3
                
                4
                
                c06/js/event-delegation.js
                
                // Deklaracja funkcji. -HĝHOLRELHNWHYHQWQLHLVWQLHMH 8ĝ\FLHVWDUHJRRELHNWXHYHQWZ,( 3REUDQLHHOHPHQWXGRFHORZHJRGOD // zdarzenia. // Deklaracja funkcji.
                
                // Deklaracja zmiennych. 3REUDQLHNOLNQLÚWHJRHOHPHQWX 3REUDQLHHOHPHQWXQDGU]ÚGQHJR GODNOLNQLÚWHJR elGrandparent = target.parentNode.parentNode; 3REUDQLHOLVW\ elGrandparent.removeChild(elParent); 8VXQLÚFLHHOHPHQWXOLVW\ 8QLHPRĝOLZLHQLH]DFKRZDQLDGRP\ĂOQHJRïÈF]DF]\OLSU]HQLHVLHQLDXĝ\WNRZQLND QDLQQÈVWURQÚ if (e.preventDefault) { &]\PHWRGDSUHYHQW'HIDXOW MHVW REVïXJLZDQD" e.preventDefault(); 8ĝ\FLHPHWRG\SUHYHQW'HIDXOW  } else { // W przeciwnym razie. e.returnValue = false; 8ĝ\FLHVWDUV]HMZHUVML,( }
                
                .RQğJXUDFMDREVHUZDWRUD]GDU]HñZ\ZRïDQLHLWHP'RQH ZRGSRZLHG]L  // na zdarzenie click. var el = document.getElementById(’shoppingList’); 3REUDQLHOLVW\U]HF]\GR // kupienia. if (el.addEventListener) { -HĝHOLREVHUZDWRU]GDU]HñMHVW REVïXJLZDQ\ el.addEventListener(’click’, function(e) { 'RGDQLHREVHUZDWRUD itemDone(e); :\ZRïDQLHLWHP'RQH  }, false); 8ĝ\FLHSURSDJDFML]GDU]HQLD } else { // W przeciwnym razie. el.attachEvent(’onclick’, function(e){ 8ĝ\FLHVWDUHJRPRGHOX,( // onclick. itemDone(e); :\ZRïDQLHLWHP'RQH  }); }
                
                ZDARZENIA 275
                
                W KTÓRYM ELEMENCIE WYSTĄPIŁO ZDARZENIE? 3RGF]DVZ\ZRï\ZDQLDIXQNFMLXĝ\FLHZïDĂFLZRĂFLtargetRELHNWXevent WRQDMOHSV]\VSRVöEXVWDOHQLDZNWöU\PHOHPHQFLHZ\VWÈSLïR]GDU]HQLH 7DNLHSRGHMĂFLH]RVWDïRSU]HGVWDZLRQHSRQLĝHMLRSLHUDVLÚQDVïRZLH NOXF]RZ\Pthis SŁOWO KLUCZOWE THIS 6ïRZRNOXF]RZHthisRGZRïXMHVLÚGRZïDĂFLFLHODIXQNFML :NRG]LHSRSUDZHMVWURQLH thisRGZRïXMHVLÚGRHOHPHQWX ZNWöU\PZ\VWÈSLïR]GDU]HQLH 7DNLHUR]ZLÈ]DQLHG]LDïDNLHG\ IXQNFMLQLHVÈSU]HND]\ZDQH ĝDGQHSDUDPHWU\LGODWHJRQLH MHVWZ\ZRï\ZDQD]SR]LRPX IXQNFMLDQRQLPRZHM 
                
                function checkUsername() { var elMsg = document.getElementById(’feedback’); if (this.value.length < 5) { HO0VJLQQHU+70/ ij1D]ZDXĝ\WNRZQLNDMHVW]E\WNUöWNDij } else { elMsg.innerHTML = ’’; } } var el = document.getElementById(’username’); el.addEventListener(’blur’, checkUsername, false); To jakby funkcja została zdefiniowana w tym miejscu, a nie gdzieś indziej.
                
                UŻYCIE PARAMETRÓW -HĝHOLIXQNFMLVÈSU]HND]\ZDQH SDUDPHWU\VïRZRNOXF]RZH thisQLHG]LDïDSRQLHZDĝ ZïDĂFLFLHOGDQHMIXQNFMLQLH MHVWMXĝHOHPHQWHPGRNWöUHJR GRïÈF]RQRREVHUZDWRUD]GDU]Hñ DOHMHVWIXQNFMÈDQRQLPRZÈ (OHPHQWZNWöU\PZ\ZRïDQR ]GDU]HQLHPRĝQDSU]HND]DÊ MDNRLQQ\SDUDPHWUIXQNFML :REXSU]\SDGNDFKSUHIHURZDQ\PSRGHMĂFLHPMHVWXĝ\FLH RELHNWXevent
                
                276
                
                ZDARZENIA
                
                function checkUsername(el, minLength) { var elMsg = document.getElementById(’feedback’); if (el.value.length < minLength) { HO0VJLQQHU+70/ ij1D]ZDXĝ\WNRZQLNDMHVW]E\WNUöWNDij } else { elMsg.innerHTML = ’’; } } var el = document.getElementById(’username’); el.addEventListener(’blur’, function() { checkUsername(el, 5); }, false);
                
                RÓŻNE TYPY ZDARZEŃ :SR]RVWDïHMF]ÚĂFLUR]G]LDïXSR]QDV]UöĝQHW\S\]GDU]HñQDNWöUHPRĝQD XG]LHODÊRGSRZLHG]L =GDU]HQLDVÈ]GHğQLRZDQHZ VSHF\ğNDFML:&'20 VSHF\ğNDFML+70/ RELHNWRZ\FKPRGHODFK SU]HJOÈGDUHNLQWHUQHWRZ\FK %20 
                
                ľ ľ ľ
                
                :LÚNV]RĂÊ]GDU]HñMHVW Z\QLNLHPSURZDG]RQHMSU]H] Xĝ\WNRZQLNDLQWHUDNFML]NRGHP +70/DOHLVWQLHMHNLOND]GDU]Hñ UHDJXMÈF\FKQD]GDU]HQLD SU]HJOÈGDUNLLQWHUQHWRZHMOXE LQQH]GDU]HQLD'20
                
                :SUDZG]LHZNVLÈĝFHQLHRPöZLP\ZV]\VWNLFK]GDU]HñDOH SU]HGVWDZLRQHSU]\NïDG\GDG]È &LZ\VWDUF]DMÈFÈZLHG]ÚDE\Ă PöJïSUDFRZDÊ]HZV]\VWNLPL W\SDPL]GDU]Hñ
                
                ZDARZENIA W3C DOM
                
                ZDARZENIA HTML5
                
                ZDARZENIA BOM
                
                =GDU]HQLDZVSHF\ğNDFMLPRGHOX'20VÈ]DU]ÈG]DQHSU]H] NRQVRUFMXP:&NWöUHMHVW RGSRZLHG]LDOQHWDNĝH]DLQQH VSHF\ğNDFMHPLÚG]\LQQ\PL +70/&66L;0/:LÚNV]RĂÊ ]GDU]HñZ\PLHQLRQ\FKZW\P UR]G]LDOHMHVWF]ÚĂFLÈVSHF\ğNDFML:&'20
                
                6SHF\ğNDFMD+70/QDGDO RSUDFRZ\ZDQD V]F]HJöïRZR Z\PLHQLD]GDU]HQLDNWöUH SRZLQQ\E\ÊREVïXJLZDQH SU]H]SU]HJOÈGDUNLLQWHUQHWRZH LXĝ\ZDQHZNRG]LH+70/ 1DSU]\NïDGPDP\]GDU]HQLD Z\ZRï\ZDQHSRZ\VïDQLXIRUPXODU]DVLHFLRZHJROXE]PLDQLH HOHPHQWöZIRUPXODU]DSR]QDV] MHZSRGUR]G]LDOHķ=GDU]HQLD IRUPXODU]DVLHFLRZHJRĵ 
                
                3URGXFHQFLSU]HJOÈGDUHNLQWHUQHWRZ\FKUöZQLHĝLPSOHPHQWXMÈ SHZQH]GDU]HQLDMDNRF]ÚĂÊ RELHNWRZHJRPRGHOXSU]HJOÈGDUNLLQWHUQHWRZHMDQJbrowser REMHFWPRGHOĽ%20 =UHJXï\ QLHVÈWR]GDU]HQLDZ\PLHQLRQH ZVSHF\ğNDFML:&FKRÊ QLHNWöUHZSU]\V]ïRĂFL]RVWDQÈ GRGDQHGRWHMVSHF\ğNDFML  .LOND]WHJRURG]DMX]GDU]Hñ MHVWSU]H]QDF]RQ\FKGRSUDF\ ]HNUDQDPLGRW\NRZ\PL
                
                3U]HJOÈGDUNLLQWHUQHWRZH LPSOHPHQWXMÈZV]\VWNLH ]GDU]HQLD]DSRPRFÈRPöZLRQHJRMXĝRELHNWXevent 3RQDGWRLQIRUPXMÈRHOHPHQFLH ZNWöU\PZ\VWÈSLïR]GDU]HQLH NODZLV]XQDFLĂQLÚW\PSU]H] Xĝ\WNRZQLNDPLHMVFXSRïRĝHQLD NXUVRUDLWG ,VWQLHMÈMHGQDNSHZQH]GDU]HQLD QLHREVïXJLZDQHSU]H]PRGHO ]GDU]Hñ'20ZV]F]HJöOQRĂFL GRW\F]\WR]GDU]HñSU]H]QDF]RQ\FKGRSUDF\]HOHPHQWDPL IRUPXODU]DVLHFLRZHJR7HJR URG]DMX]GDU]HQLDE\ï\F]ÚĂFLÈ PRGHOX'20DOH]RVWDï\ SU]HQLHVLRQHGRVSHF\ğNDFML +70/ 
                
                submit input change ,VWQLHMÈUöZQLHĝQRZH]GDU]HQLD ZSURZDG]RQHZVSHF\ğNDFML +70/LREVïXJLZDQHZMHG\QLH QDMQRZV]\FKZHUVMDFKSU]HJOÈGDUHNLQWHUQHWRZ\FK2WRNLOND ]QLFKSR]QDV]MHZSRGUR]G]LDOHķ=GDU]HQLD+70/ĵ  readystatechange DOMContentLoaded hashchange
                
                touchstart touchend touchmove orientationchange ,QQH]GDU]HQLDVÈGRGDZDQH ZFHOXSU]HFKZ\W\ZDQLD JHVWöZRUD]Z\NRU]\VWDQLD ]DOHWSï\QÈF\FK]REVïXJL SU]\VSLHV]HQLRPLHU]D3U]\ Z\NRU]\VW\ZDQLXZ\PLHQLRQ\FK IXQNFMLQDOHĝ\]DFKRZDÊGXĝÈ RVWURĝQRĂÊSRQLHZDĝSRV]F]HJöOQHSU]HJOÈGDUNLLQWHUQHWRZH EDUG]RF]ÚVWRWZRU]ÈRGPLHQQH LPSOHPHQWDFMHSRGREQHM IXQNFMRQDOQRĂFL ZDARZENIA 277
                
                ZDARZENIA INTERFEJSU UŻYTKOWNIKA =GDU]HQLDLQWHUIHMVXXĝ\WNRZQLNDVÈVNXWNLHPLQWHUDNFML]RNQHP SU]HJOÈGDUNLDQLHZ\ĂZLHWODQÈSU]H]QLÈVWURQÈ+70/ĽPRĝHWRE\Ê QDSU]\NïDGZF]\WDQLHVWURQ\OXE]PLDQDZ\PLDUöZRNQDSU]HJOÈGDUNL 3URFHGXUDREVïXJL]GDU]HñOXE REVHUZDWRU]GDU]HñLQWHUIHMVX Xĝ\WNRZQLND SRZLQQDE\Ê GRïÈF]RQDGRRNQDSU]HJOÈGDUNL LQWHUQHWRZHM
                
                :VWDU\PNRG]LH+70/PRĝQDQDSRWNDÊWH]GDU]HQLDXĝ\ZDQH ZFKDUDNWHU]HDWU\EXWöZRWZLHUDMÈFHJR]QDF]QLND 1DSU]\NïDGVWDUV]\NRGPRĝHXĝ\ZDÊDWU\EXWXonloadZFHOX Z\ZRïDQLDNRGXSU]H]QDF]RQHJRGRXUXFKRPLHQLDSRZF]\WDQLX VWURQ\LQWHUQHWRZHM 
                
                ZDARZENIE :@7DEOLFD]DZLHUDMÈFDGRSDVRZDQHRVRE\ UHVXOWV SHRSOHğOWHUSULFH5DQJH )XQNFMDğOWHU Z\ZRïXMHSULFH5DQJH  ,WHUDFMDSU]H]WDEOLFÚUHVXOWVGRSDVRZDQHRVRE\VÈXPLHV]F]DQHZWDEHOL Z\ĂZLHWODQHMQDVWURQLH ` 
                
                .RGSU]HGVWDZLRQ\ZSRGUR]G]LDOHķ:\ĂZLHWOHQLHWDEOLF\ĵLSU]H]QDF]RQ\GRZ\ĂZLHWOHQLDWDEHOLZ\QLNöZ PRĝH]QDMGRZDÊVLÚZPHWRG]LH.forEach()7XWDM]RVWDïMHGQDNRGG]LHORQ\DE\SRND]DÊUöĝQHSRGHMĂFLD Z]DNUHVLHğOWURZDQLDLWZRU]HQLDQRZ\FKWDEOLF FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 543
                
                FILTROWANIE DYNAMICZNE -HĝHOLSR]ZROLV]Xĝ\WNRZQLNRPQDğOWURZDQLH]DZDUWRĂFLVWURQ\WRPRĝHV] SU]\JRWRZDÊNRG+70/FDïHM]DZDUWRĂFLDQDVWÚSQLHZ\ĂZLHWODÊLXNU\ZDÊ RGSRZLHGQLHMHMIUDJPHQW\JG\Xĝ\WNRZQLNNRU]\VWD]ğOWUöZ :\REUDěVRELHĝHPDV]GRVWDUF]\ÊXĝ\WNRZQLNRP VXZDNSU]H]QDF]RQ\GRZVND]\ZDQLD]DNUHVX VWDZNLJRG]LQRZHMMDNÈVÈJRWRZL]DSïDFLÊ7HJR URG]DMXVXZDNEÚG]LHDXWRPDW\F]QLHXDNWXDOQLDï ]DZDUWRĂÊWDEHOLQDSRGVWDZLH]DNUHVX]GHğQLRZD QHJRSU]H]Xĝ\WNRZQLND -HĝHOLQRZDWDEHODMHVWWZRU]RQD]DNDĝG\P UD]HPJG\Xĝ\WNRZQLNNRU]\VWD]VXZDND SRGREQLHMDNZSRSU]HGQLFKGZöFKSU]\NïDGDFK SRND]XMÈF\FKğOWURZDQLHGDQ\FK R]QDF]DWR WZRU]HQLHLXVXZDQLHRJURPQHMLORĂFLHOHPHQWöZ =E\WGXĝDLORĂÊWHJRURG]DMXRSHUDFMLQDPRGHOX '20PRĝHVSRZROQLÊG]LDïDQLHVNU\SWöZ
                
                544 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                =QDF]QLHHIHNW\ZQLHMV]HUR]ZLÈ]DQLHSU]HGVWDZLD VLÚQDVWÚSXMÈFR 1. 8WZRU]HQLHZLHUV]DWDEHOLGODNDĝGHMRVRE\ 2. :\ĂZLHWODQLHZLHUV]\W\FKRVöENWöUH]QDMGXMÈ VLÚZHZVND]DQ\P]DNUHVLHLXVXZDQLHZLHUV]\ RVöEVSR]DSRGDQHJR]DNUHVX 8ĝ\W\SRQLĝHMVXZDN]DNUHVXSRFKRG]L]ZW\F]NL M4XHU\RQD]ZLHQR8L6OLGHURSUDFRZDQHMSU]H] /ÓRQD*HUVRQD  KWWSUHIUHVKOHVVFRPQRXLVOLGHU
                
                =DQLPSU]HMG]LHP\GRNRGXRPDZLDQHJRSU]\ NïDGXSRĂZLÚFLP\FKZLOÚQDDQDOL]ÚSRGHMĂFLD ]DVWRVRZDQHJRZW\PVNU\SFLH2WR]DGDQLDMDNLH PXV]ÈE\ÊZ\NRQDQHSU]H]VNU\SW i) .RQLHF]QRĂÊLWHUDFMLSU]H]ZV]\VWNLHRELHNW\ ZWDEOLF\RUD]XWZRU]HQLHZLHUV]DGODNDĝGHJR ]QLFK ii) 8WZRU]RQ\ZLHUV]WU]HEDGRGDÊGRWDEHOL Z\ĂZLHWODQHMQDVWURQLH iii) .DĝG\ZLHUV]WDEHOLPDE\ÊZ\ĂZLHWORQ\OXE XNU\W\Z]DOHĝQRĂFLRGWHJRF]\VWDZNDRVRE\ NWöUÈSU]HGVWDZLDPLHĂFLVLÚZ]GHğQLRZDQ\P ]DNUHVLH7R]DGDQLHMHVWZ\NRQ\ZDQHZWUDNFLH NDĝGHJRXDNWXDOQLHQLDVXZDND  :FHOXRNUHĂOHQLDNWöU\ZLHUV]PD]RVWDÊ Z\ĂZLHWORQ\OXEXNU\W\NRGPXVLPLHÊPRĝOLZRĂÊ VWRVRZDQLDRGZRïDñPLÚG]\
                
                • RELHNWHPpersonZWDEOLF\SHRSOHVSUDZG]H •
                
                QLHVWDZNLGDQHMRVRE\ ZLHUV]HPWDEHOLRGSRZLDGDMÈF\PGDQHMRVRELH Z\ĂZLHWOHQLHOXEXNU\FLHWHJRZLHUV]D 
                
                $E\]DSHZQLÊPRĝOLZRĂÊVWRVRZDQLDWHJRURG]DMX RGZRïDñNRQLHF]QHMHVWXWZRU]HQLHQRZHMWDEOLF\ RQD]ZLHURZV%ÚG]LHZQLHMSU]HFKRZ\ZDQD VHULDRELHNWöZRGZöFKZïDĂFLZRĂFLDFK
                
                • personRGQLHVLHQLHGRRELHNWXGDQHMRVRE\ •
                
                :NRG]LHWZRU]\P\IXQNFMHSU]HGVWDZLDMÈFH Z\PLHQLRQHZF]HĂQLHM]DGDQLD1RZDWDEOLFD EÚG]LHXWZRU]RQDZSLHUZV]HMIXQNFML PDNH5RZV ĽIXQNFMDWDXWZRU]\GODNDĝGHM RVRE\ZLHUV]ZWDEHOLorazXPLHĂFLQRZ\RELHNW ZWDEOLF\URZV DSSHQG5RZV ĽIXQNFMDWDSU]HSURZDG]DLWHUDFMÚ SU]H]WDEOLFÚURZVLGRGDMHSRV]F]HJöOQHZLHUV]H GRWDEHOL update()ĽIXQNFMDWDRNUHĂOLNWöUHZLHUV]HPDMÈ E\ÊZ\ĂZLHWORQHOXEXNU\WHQDSRGVWDZLHGDQ\FK SREUDQ\FK]VXZDND 2SUöF]WHJRGRGDMHP\MHV]F]HF]ZDUWÈIXQNFMÚ RQD]ZLHinit():WHMIXQNFML]QDMGXMÈVLÚ ZV]\VWNLHLQIRUPDFMHZ\PDJDQHSRGF]DV SLHUZV]HJRZF]\WDQLDVWURQ\PLÚG]\LQQ\PLNRG WZRU]ÈF\VXZDN]DSRPRFÈZW\F]NL  1D]ZDinitWRVNUöWRGinicjacjiSURJUDPLĂFL F]ÚVWRVWRVXMÈWÚQD]ZÚGODIXQNFMLOXEVNU\SWöZ Z\NRQ\ZDQ\FKSRGF]DVSLHUZV]HJRZF]\W\ZDQLD VWURQ\ =DQLPGRNïDGQLHSU]HDQDOL]XMHP\VNU\SWQD NROHMQ\FKGZöFKVWURQDFKGRZLHV]VLÚZLÚFHM RWDEOLF\URZVRUD]WZRU]HQLXRGQLHVLHñPLÚG]\ RELHNWDPLLZLHUV]DPLWDEHOLSU]HGVWDZLDMÈF\PL SRV]F]HJöOQHRVRE\
                
                ZWDEOLF\SHRSOH HOHPHQWNROHNFMDM4XHU\]DZLHUDMÈFDZLHUV] RGSRZLDGDMÈF\GDQHMRVRELHZWDEHOLZ\ĂZLHW ODQHMQDVWURQLH
                
                FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 545
                
                PRZECHOWYWANIE ODNIESIEŃ DO OBIEKTÓW I WĘZŁÓW MODELU DOM 7DEOLFDURZV]DZLHUDRELHNW\RGZöFKSRZLÈ]DQ\FK]HVREÈZïDĂFLZRĂFLDFK 2GQLHVLHQLDGRRELHNWöZSU]HGVWDZLDMÈF\FKRVRE\ZWDEOLF\SHRSOH 2GQLHVLHQLDGRZLHUV]\SU]HGVWDZLDMÈF\FKWHRVRE\ZWDEHOLQDVWURQLH NROHNFMHM4XHU\  :NVLÈĝFHVSRWNDïHĂVLÚ]SU]\NïDGDPLZNWöU\FK ]PLHQQHE\ï\Xĝ\ZDQHZFHOXSU]HFKRZ\ZDQLD RGQLHVLHñGRZÚ]ïöZPRGHOX'20OXEHOHPHQWöZ Z\EUDQ\FKZM4XHU\]DPLDVWGZXNURWQHJRZ\ ELHUDQLDW\FKVDP\FKHOHPHQWöZ 7DNLHSRGHMĂFLH QRVLQD]ZÚbuforowania
                
                TABLICA ROWS INDEKS:
                
                :RPDZLDQ\PWXWDMSU]\NïDG]LHLGHÚEXIRURZDQLD MHV]F]HEDUG]LHMUR]EXGRZXMHP\*G\NRG SU]HSURZDG]DLWHUDFMÚSU]H]RELHNW\ZWDEOLF\ SHRSOHWZRU]ÈFGODGDQHMRVRE\ZLHUV]ZWDEHOL Z\ĂZLHWODQHMQDVWURQLHGRGDWNRZRWZRU]RQ\ MHVWQRZ\RELHNWGODGDQHMRVRE\LXPLHV]F]DQ\ ZWDEOLF\RQD]ZLHURZV&HOHPWDNLHJRUR]ZLÈ]D QLDMHVWSU]\JRWRZDQLHSRZLÈ]DQLDPLÚG]\
                
                OBIEKT:
                
                0
                
                person
                
                people[0]
                
                $element
                
                
                
                1
                
                person
                
                people[1]
                
                $element
                
                
                
                2
                
                person
                
                people[2]
                
                $element
                
                
                
                3
                
                person
                
                people[3]
                
                $element
                
                
                
                • RELHNWHPGODGDQHMRVRE\]QDMGXMÈF\PVLÚ •
                
                ZěUöGOHGDQ\FK ZLHUV]HPGODGDQHMRVRE\ZWDEHOLZ\ĂZLHWODQHM QDVWURQLH
                
                3RGF]DVRNUHĂODQLDZ\ĂZLHWODQ\FKZLHUV]\NRG PRĝHSU]HSURZDG]LÊLWHUDFMÚSU]H]QRZÈWDEOLFÚ LVSUDZG]LÊVWDZNÚXVWDORQÈSU]H]GDQÈRVREÚ -HĝHOLVWDZNDMHVWRGSRZLHGQLDZLHUV]PRĝQD Z\ĂZLHWOLÊ:SU]HFLZQ\PUD]LHZLHUV]EÚG]LH XNU\W\ 7DNLHSRGHMĂFLHZ\PDJDPQLHMV]HMLORĂFL]DVREöZ QLĝSRQRZQHWZRU]HQLH]DZDUWRĂFLWDEHOLJG\ Xĝ\WNRZQLN]PLHQLVWDZNÚNWöUÈMHVWJRWRZ\ ]DSïDFLÊ
                
                546 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                3RSUDZHMVWURQLHPRĝHV]]REDF]\ÊMDNPHWRGD push()RELHNWXArrayWZRU]\QRZ\HOHPHQW ZWDEOLF\URZV7HQHOHPHQWMHVWOLWHUDïHPRELHNWX LSU]HFKRZXMHRELHNWpersonRUD]WZRU]RQ\GOD QLHJRZLHUV]ZWDEHOLZ\ĂZLHWODQHMQDVWURQLH
                
                URZVSXVK^ SHUVRQWKLV HOHPHQWURZ ` 
                
                TABLICA PEOPLE INDEKS: 
                
                0
                
                2ELHNWSHUVRQ .ROHNFMDM4XHU\
                
                TABELA HTML
                
                OBIEKT: name
                
                Czesław
                
                rate
                
                70
                
                td tr
                
                1
                
                name
                
                Celina
                
                rate
                
                80
                
                td td tr
                
                2
                
                name
                
                td
                
                Grzegorz
                
                table rate
                
                tbody
                
                75
                
                td tr
                
                3
                
                name
                
                Nikodem
                
                rate
                
                120
                
                td td tr td
                
                7DEOLFDSHRSOHSU]HFKRZXMHMXĝHOHPHQW\ RSRV]F]HJöOQ\FKRVREDFKRUD]SRELHUDQ\FKSU]H] QLHVWDZNDFK'ODWHJRWHĝRELHNW\ZWDEOLF\URZV PXV]ÈMHG\QLHZVND]\ZDÊSLHUZRWQHRELHNW\GOD GDQ\FKRVöEDQLHNRSLRZDÊMH 
                
                2ELHNWM4XHU\]RVWDïXĝ\W\GRXWZRU]HQLD SRV]F]HJöOQ\FKZLHUV]\WDEHOL2ELHNW\ZWDEOLF\ URZVSU]HFKRZXMÈRGQLHVLHQLDGRSRV]F]HJöOQ\FK ZLHUV]\ZWDEHOLZ\ĂZLHWODQHMQDVWURQLH:LHUV]\ QLHWU]HEDSRQRZQLHWZRU]\ÊOXEZ\ELHUDÊ FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 547
                
                FILTROWANIE DYNAMICZNE 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)(QLHSRND]DQR WHJRZRPDZLDQ\PGLDJUDPLH ']LDïDQLH,,)(]DF]\QDVLÚ RGWDEOLF\SHRSOH 2. 8WZRU]HQLHF]WHUHFK]PLHQQ\FKJOREDOQ\FKXĝ\ZDQ\FK ZFDï\PVNU\SFLH URZVĽSU]H]QDF]RQHMGRSU]HFKRZ\ZDQLDWDEOLF\RGQLH VLHñ $minĽSU]HFKRZXMÈFHMGDQHZHMĂFLRZHGRZ\ĂZLHWOHQLD VWDZNLPLQLPDOQHM PD[ĽSU]HFKRZXMÈFHMGDQHZHMĂFLRZHGRZ\ĂZLHWOHQLD VWDZNLPDNV\PDOQHM WDEOHĽSU]HFKRZXMÈFHMWDEHOÚZ\ĂZLHWODQÈQDVWURQLH 3. )XQNFMDPDNH5RZV SU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VW NLHRVRE\Z\PLHQLRQHZWDEHOLSHRSOHLZ\ZRïXMHIXQNFMÚ DQRQLPRZÈGODNDĝGHJRRELHNWXZWDEOLF\=ZUöÊXZDJÚQD Xĝ\FLHpersonMDNRQD]Z\SDUDPHWUX2]QDF]DWRĝHZWHM IXQNFMLpersonRGQRVLVLÚGRELHĝÈFHJRRELHNWXZWDEOLF\ 4. 'ODNDĝGHMRVRE\WZRU]RQ\MHVWQRZ\RELHNWM4XHU\ RQD]ZLHURZL]DZLHUDHOHPHQW 5. ,PLÚRVRE\LXVWDORQDSU]H]QLÈVWDZND]RVWDMÈZVWDZLRQH GRHOHPHQWöZ 6. 'RWDEOLF\URZVZVWDZLRQ\]RVWDMHQRZ\RELHNWZUD] ]GZRPDZïDĂFLZRĂFLDPLpersonSU]HFKRZXMHRGQLHVLHQLH GRRELHNWXGDQHMRVRE\QDWRPLDVWHOHPHQWSU]HFKRZXMH RGQLHVLHQLHGRHOHPHQWXSU]HGVWDZLDMÈFHJRRVREÚ ZWDEHOL 7. 0HWRGDDSSHQG5RZV WZRU]\QRZ\RELHNWM4XHU\ RQD]ZLH$tbody]DZLHUDMÈF\HOHPHQW 8. 1DVWÚSQLHSU]HSURZDG]DQDMHVWLWHUDFMDSU]H]ZV]\VWNLH RELHNW\WDEOLF\URZVRUD]QDVWÚSXMHGRGDQLHRGSRZLDGDMÈ F\FKLPHOHPHQWöZGR$tbody 9. 1RZD]DZDUWRĂÊ$tbodyMHVWGRGDZDQDGRHOHPHQW WDEOH! 10. 0HWRGDupdate()SU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLH RELHNW\WDEOLF\URZVLVSUDZG]DF]\VWDZNDSRELHUDQDSU]H] GDQÈRVREÚMHVWZLÚNV]DRGSRGDQHJRZVXZDNXPLQLPXP LMHGQRF]HĂQLHPQLHMV]DRGSRGDQHJRZVXZDNXPDNVLPXP 11. -HĝHOLWDNPHWRGDM4XHU\RQD]ZLHVKRZ Z\ĂZLHWOD GDQ\ZLHUV]WDEHOL 12. -HĝHOLQLHPHWRGDM4XHU\RQD]ZLH$hide()XNU\ZD GDQ\ZLHUV]WDEHOL 13. 1DSRF]ÈWNXIXQNFMLinit()QDVWÚSXMHXWZRU]HQLH NRQWURONLVXZDND 14. =DNDĝG\PUD]HPJG\SRïRĝHQLHVXZDNDXOHJD]PLDQLH SRQRZQLHZ\ZRï\ZDQDMHVWIXQNFMDupdate() 15. 3RVNRQğJXURZDQLXVXZDNDZ\ZRï\ZDQHVÈIXQNFMH PDNH5RZV , DSSHQG5RZV Lupdate() 16. :\ZRïDQLHIXQNFMLinit()NWöUD]NROHLZ\ZRïXMH NROHMQHIUDJPHQW\NRGX 548 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                Utworzenie zmiennych: URZV: tablica pozwalająca na połączenie poszczególnych osób z odpowiadającymi im wierszami tabeli na stronie $min i PD[: dane wejściowe w postaci minimalnej i maksymalnej stawki WDEOH: tutaj znajduje się tabela zawierająca informacje o dopasowanych osobach
                
                2
                
                FUNKCJA: PDNH5RZV Utworzenie wierszy tabeli oraz wypełnienie tablicy URZV
                
                3
                
                Iteracja przez obiekty w tablicy SHRSOH FUNKCJA ANONIMOWA Utworzenie obiektu URZ przechowującego element Dodanie elementów zawierających imię i stawkę Dodanie nowego obiektu do tablicy URZV Dodanie odniesień do person i URZ
                
                4 5 6
                
                Przejście do kolejnego obiektu tablicy SHRSOH
                
                FUNKCJA: DSSHQG5RZV dodaje wiersze do Utworzenie elementu przeznaczonego na elementy
                
                7
                
                Iteracja przez obiekty w tablicy URZV Dodanie URZ do elementu $tbody
                
                8
                
                Przejście do kolejnego obiektu tablicy URZV
                
                9
                
                Dodanie elementu do WDEOH!
                
                FUNKCJA: update() uaktualnia zawartość tabeli
                
                10
                
                Iteracja przez obiekty w tablicy URZV
                
                12
                
                Czy UDWH! min i rate  PD[?
                
                Ukryj wiersz
                
                11
                
                Wyświetl wiersz
                
                Przejście do kolejnego obiektu tablicy URZV
                
                FUNKCJA: init() konfiguracja skryptu
                
                13
                
                Konfiguracja VOLGHU Wywołanie PDNH5RZV , DSSHQG5RZV i update()
                
                14
                
                Wywołanie init() po wczytaniu modelu DOM
                
                15
                
                16
                
                FILTROWANIE TABLICY JAVASCRIPT 1
                
                2 3 4 5
                
                6
                
                7
                
                8 9 10
                
                11
                
                12
                
                13
                
                14 15
                
                16
                
                FMVG\QDPLFğOWHUMV
                
                (function(){ 0LHMVFHQDWDEOLFÚSHRSOH YDUURZV >@// Tablica rows. PLQ ijYDOXHPLQij 3ROHWHNVWRZHGODZDUWRĂFLPLQLPDOQHMVWDZNL PD[ ijYDOXHPD[ij 3ROHWHNVWRZHGODZDUWRĂFLPDNV\PDOQHMVWDZNL WDEOH ijUDWHVij 7DEHODSU]H]QDF]RQDQDGRSDVRZDQHRVRE\ IXQFWLRQPDNH5RZV ^8WZRU]HQLHWDEOLF\LZLHUV]\WDEHOL SHRSOHIRU(DFKIXQFWLRQSHUVRQ ^ ,WHUDFMDSU]H]ZV]\VWNLHRELHNW\SHUVRQ ZWDEOLF\SHRSOH YDUURZ ijWU!WU!ij 8WZRU]HQLHZLHUV]DGODGDQHMRVRE\ URZDSSHQGijWG!WG!ij WH[WSHUVRQQDPH  :VWDZLHQLHLPLHQLDRVRE\ URZDSSHQGijWG!WG!ij WH[WSHUVRQUDWH  // Wstawienie stawki. URZVSXVK^ 'RGDQLHRELHNWX]DSHZQLDMÈFHJRRGZRï\ZDQLHVLÚPLÚG]\WDEOLFDPL SHRSOHLURZV SHUVRQSHUVRQ2GZRïDQLHGRRELHNWXSHUVRQ HOHPHQWURZ2GZRïDQLHGRZLHUV]DMDNRRELHNWXM4XHU\ `  `  ` IXQFWLRQDSSHQG5RZV ^'RGDQLHZLHUV]\GRWDEHOL YDUWERG\ ijWERG\!WERG\!ij 8WZRU]HQLHHOHPHQWXWERG\! URZVIRU(DFKIXQFWLRQURZ ^'ODNDĝGHJRRELHNWXZWDEOLF\URZV WERG\DSSHQGURZHOHPHQW 'RGDQLHNRGX+70/GODZLHUV]D `  WDEOHDSSHQGWERG\ 'RGDQLHZLHUV]\GRWDEHOL ` IXQFWLRQXSGDWHPLQPD[ ^8DNWXDOQLHQLH]DZDUWRĂFLWDEHOL URZVIRU(DFKIXQFWLRQURZ ^'ODNDĝGHJRZLHUV]DZWDEOLF\URZV LIURZSHUVRQUDWH! PLQ URZSHUVRQUDWH PD[ ^ -HĝHOLZDUWRĂÊMHVWZ]DNUHVLH URZHOHPHQWVKRZ :\ĂZLHWOHQLHZLHUV]D `HOVH^:SU]HFLZQ\PUD]LH URZHOHPHQWKLGH 8NU\FLHZLHUV]D ` `  ` function init() { =DGDQLDZ\NRQ\ZDQHSRSLHUZV]\PXUXFKRPLHQLXVNU\SWX ijVOLGHUij QR8L6OLGHU^.RQğJXUDFMDNRQWURONLVXZDND UDQJH>@VWDUW>@KDQGOHVPDUJLQFRQQHFWWUXH VHULDOL]DWLRQ^WR>PLQPD[@UHVROXWLRQ` ` FKDQJHIXQFWLRQ ^XSGDWHPLQYDO PD[YDO `  PDNH5RZV 8WZRU]HQLHWDEOLF\URZVLZLHUV]\WDEHOL DSSHQG5RZV 'RGDQLHZLHUV]\GRWDEHOL XSGDWHPLQYDO PD[YDO  8DNWXDOQLHQLHWDEHOLDE\]DZLHUDïDGRSDVRZDQHRVRE\ ` LQLW :\ZRïDQLHIXQNFMLLQLW SRZF]\WDQLXPRGHOX'20 ` 
                
                FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 
                
                FILTROWANA GALERIA OBRAZÓW :W\PSU]\NïDG]LHJDOHULDREUD]öZ]DZLHUDWDJL8ĝ\WNRZQLNPRĝHMHNOLNDÊ DW\PVDP\PZ\ĂZLHWODÊMHG\QLHGRSDVRZDQHREUD]\ OBRAZY SĄ TAGAMI
                
                OBIEKT TAGGED
                
                PRZYCISKI FILTROWANIA
                
                :RPDZLDQ\PSU]\NïDG]LH VHULD]GMÚÊ]DZLHUDWDJL7DJL VÈSU]HFKRZ\ZDQHZDWU\EXFLH +70/RQD]ZLHGDWDWDJV NDĝGHJRHOHPHQWXLPJ! 6SHF\ğNDFMD+70/SR]ZDOD QDSU]HFKRZ\ZDQLHGRZROQ\FK GDQ\FKZUD]]HOHPHQWHP SU]\Z\NRU]\VWDQLXDWU\EXWX RQD]ZLHUR]SRF]\QDMÈFHMVLÚ RGGDWD3RV]F]HJöOQHWDJLVÈ UR]G]LHORQHSU]HFLQNDPLSDWU] VWURQDSRSUDZHM 
                
                6NU\SWWZRU]\RELHNWWDJJHG, DQDVWÚSQLHSU]HSURZDG]D LWHUDFMÚSU]H]ZV]\VWNLH REUD]\VSUDZG]DMÈFLFKWDJL =QDOH]LRQHWDJLVÈGRGDZDQH MDNRZïDĂFLZRĂÊRELHNWWDJJHG :DUWRĂÊZïDĂFLZRĂFLWRWDEOLFD SU]HFKRZXMÈFDRGQLHVLHQLD GRZV]\VWNLFKHOHPHQWöZ LPJ!Xĝ\ZDMÈF\FKGDQHJR WDJX3DWU]SRGUR]G]LDï\ ķ3U]HWZDU]DQLHWDJöZĵLķ2ELHNW WDJJHGĵ 
                
                ']LÚNLLWHUDFMLSU]H]ZV]\VWNLH NOXF]HRELHNWXWDJJHGPRĝQD DXWRPDW\F]QLHZ\JHQHURZDÊ SU]\FLVNL/LF]E\Z\ĂZLHWODQH RERNQD]ZWDJöZVÈSRELHUDQH ZHZïDĂFLZRĂFLOHQJWKWDEOLF\ .DĝGHPXSU]\FLVNRZLMHVW SU]\SLVDQDSURFHGXUDREVïXJL ]GDU]Hñ.OLNQLÚFLHSU]\FLVNX SRZRGXMHğOWURZDQLHREUD]öZ LZ\ĂZLHWOHQLHMHG\QLHW\FK NWöUHPDMÈWDJZ\EUDQ\SU]H] Xĝ\WNRZQLND3DWU]SRGUR] G]LDï\ķ)LOWURZDQLHJDOHULLĵ Lķ3U]\FLVNLğOWURZDQLDĵ
                
                 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                OBRAZY Z TAGAMI HTML
                
                FğOWHUWDJVKWPO
                
                K!&UHDWLYH)RONK! KHDGHU! GLYLG ĵEXWWRQVĵ!GLY! GLYLG ĵJDOOHU\ĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ$QLPDWRU]\,OXVWUDWRU]\ĵDOW ĵ5DEELWĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\)LOPRZF\ĵDOW ĵ6HDĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\)LOPRZF\ĵDOW ĵ'HHUĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFLĵDOW ĵ1HZWDJ1DPH@ QXOO ^-HĝHOLRELHNWQLHPDWDJX WDJJHG>WDJ1DPH@ >@WRQDOHĝ\GRGDÊSXVWÈWDEOLFÚGRRELHNWX ` WDJJHG>WDJ1DPH@SXVKLPJ 'RGDQLHREUD]XGRWDEOLF\ `  ` `  0LHMVFHQDSU]\FLVNLSURFHGXU\REVïXJL]GDU]HñLğOWU\ ` 
                
                FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 553
                
                FILTROWANIE GALERII 3U]\FLVNLğOWURZDQLDVÈWZRU]RQHLGRGDZDQH SU]H]VNU\SW3RNOLNQLÚFLXSU]\FLVNXQDVWÚSXMH Z\ZRïDQLHIXQNFMLDQRQLPRZHMNWöUDVSRZRGXMH XNU\FLHLZ\ĂZLHWOHQLHRGSRZLHGQLFKREUD]öZGOD GDQHJRWDJX 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)(QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH  2. 8WZRU]HQLHSU]\FLVNXGRZ\ĂZLHWODQLDZV]\VW NLFKREUD]öZ'UXJLPSDUDPHWUHPMHVWOLWHUDï RELHNWXXVWDZLDMÈF\MHJRZïDĂFLZRĂFL 3. 7HNVWQDSU]\FLVNX:\ĂZLHWOZV]\VWNR 4. 'RDWU\EXWXFODVV]RVWDMHGRGDQDZDUWRĂÊ active 5. .LHG\Xĝ\WNRZQLNNOLNQLHSU]\FLVNQDVWÈSL Z\ZRïDQLHIXQNFMLDQRQLPRZHM6NXWNLZ\ZRïDQLD VÈQDVWÚSXMÈFH 6. 7HQSU]\FLVNMHVWSU]HFKRZ\ZDQ\ZRELHNFLH M4XHU\LRWU]\PXMHZDUWRĂÊactiveGODDWU\EXWX FODVV 7. 3REUDQH]RVWDMÈMHJRHOHPHQW\UöZQRU]ÚGQH LZDUWRĂÊactiveMHVWXVXZDQD]LFKDWU\EXWX FODVV 8. 0HWRGDVKRZ MHVWZ\ZRï\ZDQDGODZV]\VW NLFKREUD]öZ 9. =DSRPRFÈPHWRG\DSSHQG7R SU]\FLVN ]RVWDMHGRïÈF]RQ\GRNRQWHQHUDQDSU]\FLVNL-HVW WRSRïÈF]HQLH]ZïDĂQLHXWZRU]RQ\PRELHNWHP M4XHU\ 10. 1DVWÚSQLHWZRU]RQHVÈLQQHSU]\FLVNL ğOWURZDQLD0HWRGDM4XHU\RQD]ZLH.each() MHVWXĝ\ZDQDGRSU]HSURZDG]HQLDLWHUDFMLSU]H] ZV]\VWNLHZïDĂFLZRĂFLOXEWDJL ZRELHNFLH WDJJHG7DVDPDIXQNFMDDQRQLPRZDMHVW Z\ZRï\ZDQDGODNDĝGHJRWDJX 11. 'ODWDJX]RVWDMHXWZRU]RQ\SU]\FLVN]DSR PRFÈWDNLHMVDPHMWHFKQLNLMDNSRGF]DVWZRU]HQLD SU]\FLVNX:\ĂZLHWOZV]\VWNR 12. 7HNVWHPZ\ĂZLHWODQ\PQDSU]\FLVNXMHVW QD]ZDWDJXRUD]ZLHONRĂÊWDEOLF\F]\OLOLF]ED REUD]öZZNWöU\FKWHQWDJMHVW]DVWRVRZDQ\  13. =GDU]HQLHFOLFNZSU]\FLVNXSRZRGXMH Z\ZRïDQLHIXQNFMLDQRQLPRZHM 14. $WU\EXWFODVVSU]\FLVNXRWU]\PXMHZDUWRĂÊ active 15. :DUWRĂÊactive]RVWDMHXVXQLÚWD]DWU\EXWX FODVVZV]\VWNLFKHOHPHQWöZUöZQRU]ÚGQ\FK
                
                2 3 4 5
                
                Utworzenie pustego elementu Dodanie tekstu: :\ĂZLHWOZV]\VWNR Dodanie klasy: active
                
                Zdarzenie: FOLFN w przycisku
                
                FUNKCJA ANONIMOWA: Wyświetla wszystkie obrazy
                
                6 7
                
                Dodanie klasy active do tego przycisku oraz usunięcie klasy active z przycisków równorzędnych
                
                8
                
                Wyświetlenie wszystkich obrazów
                
                9
                
                Dodanie przycisku do innych przycisków filtrowania
                
                10
                
                Iteracja przez wszystkie właściwości obiektu WDJJHG
                
                FUNKCJA ANONIMOWA: Utworzenie przycisku dla tagu 11
                
                Utworzenie pustego elementu
                
                12
                
                Umieszczenie na przycisku nazwy tagu i liczby
                
                13
                
                Zdarzenie: FOLFN w przycisku
                
                FUNKCJA ANONIMOWA: Wyświetla obrazy zawierające wskazany tag 14 15
                
                Dodanie klasy active do tego przycisku oraz usunięcie klasy active z przycisków równorzędnych
                
                16
                
                Ukrycie wszystkich obrazów
                
                17
                
                Filtrowanie obrazów z danym tagiem
                
                18
                
                Wyświetlenie dopasowanych obrazów
                
                19
                
                Dodanie przycisku do innych przycisków filtrowania Przejście do następnej właściwości
                
                554 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                PRZYCISKI FILTROWANIA JAVASCRIPT
                
                FMVğOWHUWDJVMV
                
                (function() {
                
                1
                
                8WZRU]HQLH]PLHQQ\FK 8WZRU]HQLHRELHNWXWDJJHG ijEXWWRQ!ij^8WZRU]HQLHSXVWHJRSU]\FLVNX WH[Wij:\ĂZLHWOZV]\VWNRij'RGDQLHWHNVWXķ:\ĂZLHWOZV]\VWNRĵ FODVVijDFWLYHij3U]\FLVNVWDMHVLÚDNW\ZQ\ FOLFNIXQFWLRQ ^'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN $(this) 3REUDQLHNOLNQLÚWHJRSU]\FLVNX DGG&ODVVijDFWLYHij 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVVijDFWLYHij 8VXQLÚFLH]QLFKNODV\DFWLYH LPJVVKRZ :\ĂZLHWOHQLHZV]\VWNLFKREUD]öZ ` ` DSSHQG7REXWWRQV 'RGDQLHSU]\FLVNXGRLVWQLHMÈF\FK
                
                2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
                
                HDFKWDJJHGIXQFWLRQWDJ1DPH ^'ODNDĝGHJR]QDF]QLND ijEXWWRQ!ij^8WZRU]HQLHSXVWHJRSU]\FLVNX WH[WWDJ1DPHijijWDJJHG>WDJ1DPH@OHQJWKij ij'RGDQLHQD]Z\WDJX FOLFNIXQFWLRQ ^'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN $(this) 3REUDQLHNOLNQLÚWHJRSU]\FLVNX DGG&ODVVijDFWLYHij 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVVijDFWLYHij 8VXQLÚFLH]QLFKNODV\DFWLYH LPJV:V]\VWNLHREUD]\ .hide() 8NU\FLHLFK ğOWHUWDJJHG>WDJ1DPH@ :\V]XNDQLHREUD]öZZUD]]GDQ\PWDJLHP VKRZ :\ĂZLHWOHQLHW\ONRGRSDVRZDQ\FKREUD]öZ ` ` DSSHQG7REXWWRQV 'RGDQLHSU]\FLVNXGRLVWQLHMÈF\FK `  ` 
                
                16. :V]\VWNLHREUD]\]RVWDMÈXNU\WH 17. 0HWRGDM4XHU\RQD]ZLHğOWHU MHVW Xĝ\ZDQDGRSREUDQLDREUD]öZNWöUHPDMÈ SU]\SLVDQ\GDQ\WDJ:\NRQXMHZLÚF]DGDQLH SRGREQHGR]DGDQLDPHWRG\ğOWHU RELHNWX ArrayDOH]ZUDFDNROHNFMÚM4XHU\3RQDGWRPRĝH G]LDïDÊZUD]]RELHNWHPOXEHOHPHQWHPWDEOLF\ QLHSRND]DQRWHJRZRPDZLDQ\PSU]\NïDG]LH 
                
                18. 0HWRGDVKRZ MHVWXĝ\ZDQDGRZ\ĂZLHWOD QLDREUD]öZZVND]DQ\FKSU]H]PHWRGÚğOWHU  19. =DSRPRFÈPHWRG\DSSHQG7R QRZ\ SU]\FLVN]RVWDMHGRGDQ\GRLVWQLHMÈF\FKSU]\FL VNöZğOWURZDQLD
                
                FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 555
                
                WYSZUKIWANIE :\V]XNLZDQLHSU]\SRPLQDğOWURZDQLHDOHZ\ĂZLHWODQHVÈMHG\QLHZ\QLNL GRSDVRZDQHGRSRGDQHJRZ\UDĝHQLD:W\PSU]\NïDG]LHSR]QDV]WDN]ZDQÈ WHFKQLNÚOLYHVHDUFK3RGF]DVZ\V]XNLZDQLD]DPLDVWWDJöZXĝ\ZDQ\WHNVWX ZDWU\EXFLHDOWREUD]öZ WYSZUKIWANIE W ATRYBUCIE ALT OBRAZÓW
                
                UŻYCIE INDEXOF() DO ZNALEZIENIA DOPASOWANIA
                
                PRZESZUKIWANIE WŁASNEGO OBIEKTU BUFORA
                
                :W\PSU]\NïDG]LHEÚG]LH Z\NRU]\VWDQ\]ELöUREUD]öZ ]SRSU]HGQLHJRSU]\NïDGXDOH ]DLPSOHPHQWXMHP\IXQNFMÚ OLYHVHDUFK*G\UR]SRF]QLHP\ ZSLV\ZDQLHV]XNDQHJRZ\UDĝH QLDZ\ĂZLHWODQHEÚGÈMHG\QLH REUD]\VSHïQLDMÈFHNU\WHULD Z\V]XNLZDQLD
                
                'RSU]HSURZDG]HQLDVSUDZ G]HQLDSRGNÈWHPV]XNDQHJR Z\UDĝHQLDXĝ\ZDQDMHVWPHWRGD LQGH[2I RELHNWX6WULQJ -HĝHOLZ\UDĝHQLHQLH]RVWDQLH ]QDOH]LRQHZDUWRĂFLÈ]ZURWQÈ PHWRG\LQGH[2I MHVW 3RQLHZDĝPHWRGDWDUR]UöĝQLD ZLHONRĂÊOLWHUZDĝQHMHVW VNRQZHUWRZDQLHFDïHJRWHNVWX ]DUöZQRZDWU\EXFLHDOW, MDNLV]XNDQHJRZ\UDĝHQLD  QD]DSLVDQ\PDï\PLOLWHUDPL :W\PFHOXPRĝQDXĝ\ÊIXQNFML WR/RZHU&DVH RELHNWX6WULQJ
                
                1LHFKFHP\DE\RSHUDFMD NRQZHUVMLZLHONRĂFLOLWHUE\ïD SU]HSURZDG]DQDGODZV]\VWNLFK REUD]öZZWUDNFLHNDĝGHM ]PLDQ\V]XNDQHJRZ\UDĝHQLD 'ODWHJRWHĝWZRU]\P\RELHNW RQD]ZLHcacheSU]H]QDF]RQ\ GRSU]HFKRZ\ZDQLDWHNVWXZUD] ]REUD]HPNWöUHJRDWU\EXWDOW ]DZLHUDGDQ\WHNVW
                
                2SHUDFMDZ\V]XNLZDQLD VSUDZG]DWHNVWZDWU\EXWDFK DOWREUD]öZLZ\ĂZLHWODMHG\QLH WHHOHPHQW\LPJ!NWöU\FK DWU\EXWDOW]DZLHUDV]XNDQH Z\UDĝHQLH
                
                556 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                .LHG\Xĝ\WNRZQLNZSLV]H FRNROZLHNZSROXZ\V]XNLZD QLDVSUDZG]DQ\EÚG]LHRELHNW cacheDQLHSRV]F]HJöOQH REUD]\
                
                WYSZUKIWANIE W OBRAZACH HTML
                
                FğOWHUWDJVKWPO
                
                K!&UHDWLYH)RONK! KHDGHU! GLYLG ĵEXWWRQVĵ!GLY! GLYLG ĵJDOOHU\ĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ$QLPDWRU]\,OXVWUDWRU]\ĵDOW ĵ5DEELWĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\)LOPRZF\ĵDOW ĵ6HDĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\)LOPRZF\ĵDOW ĵ'HHUĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFLĵDOW ĵ1HZ@  1XPEHUD>@ .RQZHUVMDF]DVXQDVHNXQG\ E 1XPEHUE>@  1XPEHUE>@ .RQZHUVMDF]DVXQDVHNXQG\
                
                9
                
                10
                
                11 12
                
                13
                
                UHWXUQDE:DUWRĂÊ]ZURWQDZ\QRVLDPLQXVE ` GDWHIXQFWLRQDE ^'RGDQLHPHWRG\RQD]ZLHGDWH  D QHZ'DWHD 1RZ\RELHNW'DWHGRSU]HFKRZ\ZDQLDGDW\ E QHZ'DWHE 1RZ\RELHNW'DWHGRSU]HFKRZ\ZDQLDGDW\ UHWXUQDE:DUWRĂÊ]ZURWQDZ\QRVLDPLQXVE ` `
                
                DUHSODFHAWKHLijij  0HWRGDUHSODFH MHVWXĝ\ZDQDGRXVXQLÚFLD ZV]\VWNLFKZ\VWÈSLHñVïRZD7KH]SRF]ÈWNXFLÈJX WHNVWRZHJR']LDïDZNDĝG\PFLÈJXWHNVWRZ\P LSRELHUDW\ONRMHGHQDUJXPHQWZ\UDĝHQLHUHJX ODUQHSDWU]UR]G]LDïSRGUR]G]LDïķ:\UDĝHQLD UHJXODUQHĵ -HVWWRSU]\GDWQHJG\VïRZR7KHQLH ]DZV]HMHVWXĝ\ZDQHZQD]ZDFKQDSU]\NïDG ZQD]ZDFK]HVSRïöZPX]\F]Q\FKOXEW\WXïDFK ğOPöZ:\UDĝHQLHUHJXODUQHMHVWSLHUZV]\P SDUDPHWUHPPHWRG\UHSODFH 
                
                • V]XNDQ\FLÈJWHNVWRZ\]RVWDïXPLHV]F]RQ\ • • •
                
                PLÚG]\XNRĂQLNDPL ]QDNAR]QDF]DĝHVïRZRthePXVL]QDMGRZDÊ VLÚQDSRF]ÈWNXFLÈJXWHNVWRZHJR spacjaSRtheR]QDF]DĝHSRW\PVïRZLHPXVL ]QDMGRZDÊVLÚVSDFMD RSFMDiR]QDF]DĝHZLHONRĂÊ]QDNöZQLHPD ]QDF]HQLD
                
                *G\]RVWDQLH]QDOH]LRQHGRSDVRZDQLHGR Z\UDĝHQLDUHJXODUQHJRGUXJLSDUDPHWUPHWRG\ RNUHĂOD]DVWÚSXMÈF\FLÈJWHNVWRZ\:RPDZLDQ\P SU]\NïDG]LHMHVWWRSXVW\FLÈJWHNVWRZ\
                
                FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 
                
                SORTOWANIE KOLUMN 1. 'ODNDĝGHJRHOHPHQWXSRVLDGDMÈFHJRDWU\EXW FODVVRZDUWRĂFLVRUWDEOHQDOHĝ\Z\NRQDÊ IXQNFMÚDQRQLPRZÈ 2. 3U]HFKRZ\ZDQLHELHĝÈFHJRHOHPHQWXWDEOH! Z]PLHQQHMWDEOH 3. 3U]HFKRZ\ZDQLH]DZDUWRĂFLWDEHOLZ]PLHQQHM $tbody 4. 3U]HFKRZ\ZDQLHHOHPHQWöZZ]PLHQQHM FRQWUROV 5. .DĝG\ZLHUV]]$tbody]RVWDMHXPLHV]F]RQ\ ZWDEOLF\RQD]ZLHURZV 6. 'RGDQLHSURFHGXU\REVïXJL]GDU]HñJG\Xĝ\W NRZQLNNOLNQLHQDJïöZHNNROXPQ\WDEHOL:WHG\ SRZLQQD]RVWDÊZ\ZRïDQDIXQNFMDDQRQLPRZD 7. =PLHQQD$headerSU]HFKRZXMHWHQHOHPHQW ZRELHNFLHM4XHU\ 8. 8PLHV]F]HQLHZ]PLHQQHMRQD]ZLHorder ZDUWRĂFLDWU\EXWXGDWDVRUW 9. =DGHNODURZDQLH]PLHQQHMRQD]ZLHFROXPQ 10. :SU]\SDGNXQDJïöZNDNOLNQLÚWHJRSU]H] Xĝ\WNRZQLNDMHĝHOLDWU\EXWFODVVPDZDUWRĂÊ DVFHQGLQJOXEGHVFHQGLQJR]QDF]DWRĝH NROXPQD]RVWDïDMXĝSRVRUWRZDQD 11. =PLDQDZDUWRĂFLDWU\EXWXFODVV DE\]DZLHUDïZDUWRĂÊSU]HFLZQÈGRDVFHQGLQJ OXEGHVFHQGLQJ  12. 2GZUöFHQLHNROHMQRĂFLZLHUV]\SU]HFKRZ\ZD Q\FKZWDEOLF\URZV ]DSRPRFÈPHWRG\WDEOLF\ RQD]ZLHreverse() 13. :SU]HFLZQ\PUD]LHMHĝHOLZLHUV]NOLNQLÚW\ SU]H]Xĝ\WNRZQLNDQLHE\ïZ\EUDQ\GRGDMHP\ NODVÚDVFHQGLQJGRQDJïöZND 14. 8VXQLÚFLHNODV\DVFHQGLQJOXEGHVFHQGLQJ ]HZV]\VWNLFKSR]RVWDï\FKHOHPHQWöZZWHM WDEHOL 15. -HĝHOLRELHNWcomparePDPHWRGÚGRSDVRZDQÈ GRZDUWRĂFLDWU\EXWXGDWDW\SHGODWHMNROXPQ\ WRĮ 16.ĮQDVWÚSXMHSREUDQLHQXPHUXNROXPQ\]D SRPRFÈPHWRG\LQGH[ NWöUD]ZUDFDQXPHU LQGHNVXHOHPHQWXZGRSDVRZDQ\P]ELRU]HM4XHU\ :DUWRĂÊWDMHVWSU]HFKRZ\ZDQDZ]PLHQQHM FROXPQ 17. 0HWRGDsort()]RVWDMHZ\NRQDQDGODWDEOLF\ UHNRUGöZLSRUöZQXMHGZDZLHUV]HMHGQRF]HĂQLH :WUDNFLHSRUöZQ\ZDQLDZDUWRĂFL
                
                1 2 3 4 5
                
                ITERACJA PRZEZ TABELĘ Utworzenie zmiennych: WDEOH: element WDEOH! $tbody: element FRQWUROV: elementy URZV: tablica elementów
                
                Zdarzenie: FOLFN w elemencie
                
                6
                
                FUNKCJA ANONIMOWA: Sortuje dane na podstawie nagłówka klikniętej kolumny
                
                7 8 9
                
                Utworzenie zmiennych (na podstawie klikniętego nagłówka kolumny) header: nagłówek klikniętej kolumny order: wartość atrybutu GDWDVRUW FROXPQ: indeks nagłówka klikniętej kolumny
                
                Czy atrybut FODVV ma wartość DVFHQGLQJ, czy GHVFHQGLQJ?
                
                10
                
                N
                
                13
                
                Do elementu dodaj atrybut FODVV o wartości DVFHQGLQJ
                
                11
                
                Wartość atrybutu FODVV zmień na przeciwną
                
                14
                
                Usuń wartość DVFHQGLQJ lub GHVFHQGLQJ z pozostałych nagłówków
                
                12
                
                Odwróć kolejność wierszy w tabeli
                
                15
                
                N
                
                Czy obiekt compare ma wartość dopasowaną do zmiennej order?
                
                T
                
                16
                
                Zmienna FROXPQ otrzymuje numer indeksu klikniętego elementu
                
                17
                
                Sortowanie tablicy URZV za pomocą funkcji porównującej
                
                18
                
                a to tekst z pierwszego porównywanego wiersza, natomiast b to tekst z drugiego wiersza
                
                19
                
                Użycie obiektu compare do porównania a i b za pomocą metody wskazanej w zmiennej order
                
                20
                
                Wstawienie zawartości tablicy do elementu
                
                GO TO NEXT SORTABLE TABLE
                
                 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                T
                
                SKRYPT SORTUJĄCY TABELĘ JAVASCRIPT
                
                FMVVRUWWDEOHMV
                
                5
                
                $(’.VRUWDEOHij HDFKIXQFWLRQ ^ YDUWDEOH WKLV // Tabela do sortowania. YDUWERG\ WDEOHğQGijWERG\ij =DZDUWRĂÊWDEHOL YDUFRQWUROV WDEOHğQGijWKij 1DJïöZNLWDEHOL YDUURZV WERG\ğQGijWUij WR$UUD\ 7DEOLFDSU]HFKRZXMÈFDZLHUV]H
                
                6 7 8 9
                
                FRQWUROVRQijFOLFNijIXQFWLRQ ^.LHG\Xĝ\WNRZQLNNOLNQLHQDJïöZHN YDUKHDGHU WKLV 3REUDQLHQDJïöZND YDURUGHU KHDGHUGDWDijVRUWij 3REUDQLHZDUWRĂFLDWU\EXWXGDWDVRUW YDUFROXPQ=DGHNODURZDQLH]PLHQQHMRQD]ZLHFROXPQ
                
                1 2 3 4
                
                10 11 12 13
                
                14 15 16
                
                17 18 19
                
                20
                
                -HĝHOLZ\EUDQ\HOHPHQWPDDWU\EXWFODVVRZDUWRĂFLDVFHQGLQJOXEGHVFHQGLQJ WU]HEDRGZUöFLÊNROHMQRĂÊZLHUV]\ LIKHDGHULVijDVFHQGLQJij __KHDGHULVijGHVFHQGLQJij ^ KHDGHUWRJJOH&ODVVijDVFHQGLQJGHVFHQGLQJij  =PLDQDZDUWRĂFLDWU\EXWXFODVVQDSU]HFLZQÈ WERG\DSSHQGURZVUHYHUVH 2GZUöFHQLHNROHMQRĂFLHOHPHQWöZWDEOLF\ `HOVH^:SU]HFLZQ\PUD]LHWU]HEDSRVRUWRZDÊWDEOLFÚ KHDGHUDGG&ODVVijDVFHQGLQJij 'RGDQLHNODV\GRQDJïöZND 8VXQLÚFLHNODV\]ZV]\VWNLFKSR]RVWDï\FKQDJïöZNöZ KHDGHUVLEOLQJV UHPRYH&ODVVijDVFHQGLQJGHVFHQGLQJij  LIFRPSDUHKDV2ZQ3URSHUW\RUGHU ^-HĝHOLRELHNWFRPSDUHPDZVND]DQÈPHWRGÚ FROXPQ FRQWUROVLQGH[WKLV :\V]XNDQLHQXPHUXLQGHNVXNROXPQ\ URZVVRUWIXQFWLRQDE ^:\ZRïDQLHPHWRG\VRUW ZWDEOLF\URZV D D ğQGijWGij HTFROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XD E E ğQGijWGij HTFROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XE UHWXUQFRPSDUH>RUGHU@DE :\ZRïDQLHPHWRG\SRUöZQXMÈFHM `  WERG\DSSHQGURZV  ` ` `  ` 
                
                18. :DUWRĂFLaLbVÈSU]HFKRZ\ZDQHZ]PLHQ Q\FK0HWRGDğQG SRELHUDHOHPHQW\GOD GDQHJRZLHUV]DWDEHOL0HWRGDHT VSUDZG]D NRPöUNÚZZLHUV]XNWöUHMQXPHULQGHNVXMHVWGR SDVRZDQ\GR]PLHQQHMFROXPQ0HWRGDWH[W SRELHUDWHNVW]HZVND]DQHMNRPöUNL
                
                19. 2ELHNWcompareMHVWXĝ\ZDQ\GRSRUöZQDQLD ZDUWRĂFLaLb:\NRU]\VWDQDEÚG]LHPHWRGD ZVND]DQDZ]PLHQQHMtypeSREUDQDZNURNX ]DWU\EXWXGDWDVRUW  20. :VWDZLHQLHZLHUV]\SU]HFKRZ\ZDQH ZWDEOLF\URZV GRWDEHOL FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                571
                
                PODSUMOWANIE FILTROWANIE, WYSZUKIWANIE I SORTOWANIE f 7DEOLFHVÈQDMF]ÚĂFLHMXĝ\ZDQHGRSU]HFKRZ\ZDQLD]ELRUX RELHNWöZ f 7DEOLFHRIHUXMÈSU]\GDWQHPHWRG\SR]ZDODMÈFHQDGRGDZDQLH XVXZDQLHğOWURZDQLHLVRUWRZDQLH]QDMGXMÈF\FKVLÚZQLFK HOHPHQWöZ f )LOWURZDQLHXPRĝOLZLDXVXQLÚFLHHOHPHQWöZLZ\ĂZLHWOHQLH MHG\QLHLFKSRG]ELRUXQDSRGVWDZLHZVND]DQ\FKNU\WHULöZ f )LOWURZDQLHF]ÚVWRRSLHUDVLÚQDZïDVQ\FKIXQNFMDFKNWöUH VSUDZG]DMÈF]\HOHPHQW\VSHïQLDMÈGDQHNU\WHULD f :\V]XNLZDQLHSR]ZDODQDSU]HSURZDG]HQLHğOWURZDQLDQD SRGVWDZLHGDQ\FKZSURZDG]RQ\FKSU]H]Xĝ\WNRZQLND f 6RUWRZDQLHSR]ZDODQD]PLDQÚNROHMQRĂFLHOHPHQWöZZWDEOLF\ f -HĝHOLFKFHV]]\VNDÊNRQWUROÚQDGNROHMQRĂFLÈZMDNLHMVÈ VRUWRZDQHHOHPHQW\PRĝHV]Xĝ\ÊIXQNFMLSRUöZQ\ZDQLD f $E\]DSHZQLÊREVïXJÚVWDUV]\FKSU]HJOÈGDUHNLQWHUQHWRZ\FK PRĝQDZ\NRU]\VWDÊVNU\SW(&0$6FULSW6KLP
                
                 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE
                
                13
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                )RUPXODU]HVLHFLRZHSR]ZDODMÈQD]HEUDQLHLQIRUPDFML RGRGZLHG]DMÈF\FK-DYD6FULSWSRPRĝH&LZSREUDQLX RGSRZLHGQLFKGDQ\FK]IRUPXODU]\ 2GVDPHJRSRF]ÈWNXVZRMHJRLVWQLHQLDMÚ]\N-DYD6FULSWMHVWZ\NRU]\VW\ZDQ\GRXVSUDZQLDQLD LZHU\ğNDFMLIRUPXODU]\VLHFLRZ\FK']LÚNLXVSUDZQLHQLRPIRUPXODU]HVWDMÈVLÚïDWZLHMV]H ZXĝ\FLX1DWRPLDVWZHU\ğNDFMDGDQ\FKSU]HGZ\VïDQLHPIRUPXODU]DSR]ZDODXSHZQLÊVLÚ ĝHXĝ\WNRZQLNZSURZDG]LïSUDZLGïRZHLQIRUPDFMHMHĝHOLQLHWU]HEDZ\ĂZLHWOLÊRGSRZLHGQL NRPXQLNDW 5R]G]LDïWHQ]RVWDïSRG]LHORQ\QDWU]\F]ÚĂFL
                
                USPRAWNIENIA FORMULARZY
                
                ELEMENTY FORMULARZY HTML5
                
                WERYFIKACJA FORMULARZY
                
                :WHMF]ÚĂFL]QDMG]LHV]ZLHOH SU]\NïDGöZXVSUDZQLHñ IRUPXODU]\VLHFLRZ\FK .DĝG\ZSURZDG]DUöĝQH ZïDĂFLZRĂFLLPHWRG\NWöUH PRĝQDZ\NRU]\VWDÊSRGF]DV SUDF\]HOHPHQWDPLIRUPXODU]D
                
                6SHF\ğNDFMD+70/]DZLHUD IXQNFMHZHU\ğNDFMLQLHXĝ\ZDMÈFH-DYD6FULSW:WHM F]ÚĂFL]RVWDQÈRPöZLRQH VSRVRE\QDMDNLHZHU\ğNDFMÚ PRĝQDVSöMQLH]DVWRVRZDÊ Z]DUöZQRVWDUV]\FKMDN LQRZ\FKSU]HJOÈGDUNDFK LQWHUQHWRZ\FK
                
                2VWDWQLLQDMGïXĝV]\SU]\NïDG ZNVLÈĝFHSU]HGVWDZLDVNU\SW SU]H]QDF]RQ\GRZHU\ğNDFML LXVSUDZQLHQLD IRUPXODU]D UHMHVWUDF\MQHJRNWöU\PRĝHV] ]REDF]\ÊQDVWURQLHSR SUDZHM6NU\SWWHQ]DZLHUD SRQDGZLHUV]\NRGX
                
                3RQDGWRZSLHUZV]HMF]ÚĂFLUR]G]LDïXUH]\JQXMHP\]M4XHU\QDU]HF]]Z\NïHJR-DYD6FULSW SRQLHZDĝQLH]DZV]HQDOHĝ\RSLHUDÊVLÚQDELEOLRWHFHM4XHU\]ZïDV]F]DZSU]\SDGNXVNU\SWöZ NWöUHZ\NRU]\VWXMÈMHG\QLHQLHZLHONÈF]ÚĂÊIXQNFMRQDOQRĂFLM4XHU\ 
                
                574
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                575
                
                FUNKCJE POMOCNICZE :F]ÚĂFLSLHUZV]HMUR]G]LDïX EÚG]LHP\Xĝ\ZDÊ]Z\NïHJRNRGX -DYD6FULSWDQLHM4XHU\8WZRU]\P\ ZïDVQ\SOLN-DYD6FULSWSU]H]QDF]RQ\ GRUR]ZLÈ]\ZDQLDSUREOHPöZ]ZLÈ]DQ\FK]UöĝQLFDPLPLÚG]\SU]HJOÈGDUNDPLLQWHUQHWRZ\PL:SOLNX ]QDMG]LHVLÚIXQNFMDSRPRFQLF]D SU]H]QDF]RQDGRWZRU]HQLD]GDU]Hñ )RUPXODU]HVLHFLRZHXĝ\ZDMÈZLHOXSURFHGXU REVïXJL]GDU]HñDMDNZLG]LDïHĂZUR]G]LDOH  SU]HJOÈGDUNL,(ļPDMÈLQQ\PRGHO]GDU]Hñ QLĝSR]RVWDïHSU]HJOÈGDUNL'RUR]ZLÈ]\ZDQLD SUREOHPöZ]ZLÈ]DQ\FK]UöĝQÈREVïXJÈ]GDU]Hñ ZSU]HJOÈGDUNDFKPRĝQDZ\NRU]\VWDÊELEOLRWHNÚ M4XHU\-HĝHOLMHGQDNQLHFKFHV]GRïÈF]DÊFDïHJR VNU\SWXM4XHU\W\ONRZFHOXREVïXJL]GDU]Hñ ZVWDUV]\FKZHUVMDFK,(PXVLV]VDPRG]LHOQLH XWZRU]\ÊNRGRGSRZLHG]LDOQ\]DREVïXJÚ]GDU]Hñ =DPLDVWWZRU]\ÊWHQVDPNRG]DNDĝG\PUD]HP JG\SRWU]HEXMHV]SURFHGXU\REVïXJL]GDU]HñRGSRZLHGQLNRGPRĝHV]SU]\JRWRZDÊUD]LXPLHĂFLÊ go w funkcji pomocniczej1DVWÚSQLHIXQNFMÚ WÚZ\ZRïXMHV]JG\QDVWURQLHWU]HEDXPLHĂFLÊ SURFHGXUÚREVïXJL]GDU]Hñ 1DVWURQLHSRSUDZHMSU]HGVWDZLRQRNRGIXQNFML RQD]ZLHaddEvent()7DIXQNFMD]RVWDïDXPLHV]F]RQDZSOLNXRQD]ZLHutilities.js3RGRGDQLX WHJRSOLNXGRVWURQ\+70/ZV]\VWNLHVNU\SW\ NWöUH]RVWDQÈGRïÈF]RQHpoVNU\SFLHZ\PLHQLRQ\P ZF]HĂQLHMEÚGÈPRJï\Xĝ\ZDÊMHJRIXQNFMLZFHOX XWZRU]HQLDSURFHGXU\REVïXJL]GDU]HñVSöMQLH G]LDïDMÈFHMZSU]HJOÈGDUNDFK
                
                addEvent(el, event, callback); i
                
                ii
                
                iii
                
                )XQNFMDSRELHUDWU]\SDUDPHWU\ i) elWRZÚ]HïPRGHOX'20SU]HGVWDZLDMÈF\ HOHPHQWGRNWöUHJR]RVWDQLHGRGDQH]GDU]HQLHOXE ]NWöUHJR]RVWDQLHXVXQLÚWH ii) eventWRURG]DMQDVïXFKLZDQHJR]GDU]HQLD
                
                576
                
                iii) callbackWRIXQNFMDZ\ZRïDQLD]ZURWQHJR NWöUD]RVWDQLHZ\ZRïDQDSRZ\VWÈSLHQLXZVND]DQHJR]GDU]HQLDZW\PHOHPHQFLH 3OLNutilities.jsZZLWU\QLHLQWHUQHWRZHMSRĂZLÚFRQHMNVLÈĝFHPDWDNĝHPHWRGÚSU]H]QDF]RQÈGR XVXZDQLD]GDU]Hñ -HĝHOLSU]\MU]\V]VLÚPHWRG]LHaddEvent()SU]HGVWDZLRQHMQDVWURQLHSRSUDZHMWR]REDF]\V]ĝHSROHFHQLHZDUXQNRZHVSUDZG]DF]\SU]HJOÈGDUNDREVïXJXMH addEventListener()-HĝHOLWDNGRGDQ\]RVWDQLH VWDQGDUGRZ\REVHUZDWRU]GDU]Hñ:SU]HFLZQ\P UD]LHWZRU]RQHMHVWUR]ZLÈ]DQLHDZDU\MQHGOD,( 5R]ZLÈ]DQLHDZDU\MQHPDQDVWÚSXMÈFHFHFK\ 8ĝ\ZDRIHURZDQHMSU]H],(PHWRG\attachEvent() :SU]HJOÈGDUNDFK,(ļRELHNWeventQLHMHVW DXWRPDW\F]QLHSU]HND]\ZDQ\IXQNFMLREVïXJL ]GDU]HñLQLHMHVWGRVWÚSQ\]DSRPRFÈVïRZD NOXF]RZHJRthis MDNRPöZLRQRZUR]G]LDOH ZSRGUR]G]LDOHķ2ELHNW]GDU]HQLDZSU]HJOÈGDUFH,QWHUQHW([SORUHUļĵ=DPLDVWWHJR GRVWÚSQ\MHVWZRELHNFLHwindow'ODWHJRWHĝ NRGPXVLSU]HND]DÊRELHNWeventMDNRSDUDPHWU SURFHGXU\REVïXJL]GDU]Hñ 3RGF]DVSU]HND]\ZDQLDSDUDPHWUöZGR IXQNFMLREVïXJL]GDU]HñZ\ZRïDQLHPXVLE\Ê RSDNRZDQHIXQNFMÈDQRQLPRZÈMDNSRND]DQRZUR]G]LDOHZSRGUR]G]LDOHķ8ĝ\FLH SDUDPHWUöZZSURFHGXUDFKREVïXJL]GDU]Hñ LREVHUZDWRUDFK]GDU]Hñĵ
                
                • •
                
                •
                
                $E\X]\VNDÊRF]HNLZDQ\HIHNWUR]ZLÈ]DQLH DZDU\MQHGRGDMHGZLHPHWRG\GRHOHPHQWX GODNWöUHJRSU]\JRWRZ\ZDQDMHVWSURFHGXUD REVïXJL]GDU]HñSDWU]NURNLLQDVWURQLHSR SUDZHM 1DVWÚSQLHXĝ\ZDPHWRG\,(RQD]ZLH attachEvent()ZFHOXGRGDQLDGRHOHPHQWXNRGX SURFHGXU\REVïXJL]GDU]Hñ )XQNFMHGHPRQVWUXMÈGZLHQRZHWHFKQLNL 'RGDQLHQRZ\FKPHWRGGRZÚ]ïöZPRGHOX'20 0HWRG\PRĝQDGRGDÊGRZÚ]ïöZPRGHOX'20 SRQLHZDĝVÈSRSURVWXRELHNWDPLNWöUHSU]HGVWDZLDMÈHOHPHQW\  8WZRU]HQLHQD]ZPHWRG]DSRPRFÈ]PLHQQHM 1DZLDVöZNZDGUDWRZ\FKPRĝQDXĝ\ÊGRXVWDZLHQLDZïDĂFLZRĂFLOXEPHWRG\]DZDUWRĂÊQDZLDVöZ EÚG]LHSU]HNV]WDïFRQDQDSRVWDÊFLÈJXWHNVWRZHJR
                
                • •
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                PLIK UTILITIES.JS 3RQLĝHMSU]HGVWDZLRQRIXQNFMÚaddEvent()NWöUD EÚG]LHZ\NRU]\VWDQDGRXWZRU]HQLDZV]\VWNLFK SURFHGXUREVïXJL]GDU]HñZW\PUR]G]LDOH'HğQLFMDWHMIXQNFML]QDMGXMHVLÚZSOLNXutilities.js
                
                7HJRURG]DMXJRWRZHGRSRQRZQHJRXĝ\FLDIXQNFMH VÈF]ÚVWRRNUHĂODQHPLDQHPfunkcji pomocniczych*G\EÚG]LHV]WZRU]\ÊZLÚNV]ÈLORĂÊ NRGX-DYD6FULSWSUDZGRSRGREQLHFRUD]F]ÚĂFLHM EÚG]LHV]RSUDFRZ\ZDÊWHJRURG]DMXIXQNFMH c13/js/utilities.js
                
                JAVASCRIPT
                
                1 2 3 4 5 6
                
                7
                
                )XQNFMDSRPRFQLF]DRGSRZLHG]LDOQD]DGRGDQLHREVHUZDWRUD]GDU]Hñ function addEvent(el, event, callback) { if (’addEventListener’ in el) { -HĝHOLPHWRGDDGG(YHQW/LVWHQHU G]LDïD el.addEventListener(event, callback, false); QDOHĝ\MHMXĝ\Ê } else { :SU]HFLZQ\PUD]LH el[’e’ + event + callback] = callback; :\ZRïDQLH]ZURWQHPHWRG\HO el[event + callback] = function() { 'RGDQLHGUXJLHMPHWRG\ el[’e’ + event + callback](window.event); 8ĝ\FLHMHMGRZ\ZRïDQLD SRSU]HGQLHMIXQNFML }; el.attachEvent(’on’ + event, el[event + callback]); 8ĝ\FLHDWWDFK(YHQW } GRZ\ZRïDQLDGUXJLHMIXQNFMLNWöUD]NROHLZ\ZRïDSLHUZV]È } 1. =DGHNODURZDQLHIXQNFMLaddEvent()ZUD] ]WU]HPDSDUDPHWUDPLHOHPHQWW\S]GDU]HQLD LIXQNFMDZ\ZRïDQLD]ZURWQHJR 2. 3ROHFHQLHZDUXQNRZHVSUDZG]DF]\HOHPHQW REVïXJXMHPHWRGÚaddEventListener() 3. -HĝHOLWDNXĝ\ZDQDMHVWPHWRGD addEventListener() 4. -HĝHOLQLH]RVWDQLH]DVWRVRZDQ\NRGUR]ZLÈ]DQLDDZDU\MQHJR 5R]ZLÈ]DQLHDZDU\MQHPXVLGRGDÊGZLHPHWRG\GR HOHPHQWXGODNWöUHJRWZRU]RQDMHVWSURFHGXUDREVïXJL ]GDU]Hñ1DVWÚSQLHPHWRGDattachEvent()GRVWÚSQD Z,(MHVWXĝ\ZDQDGRZ\ZRïDQLDQRZ\FKPHWRGSR Z\VWÈSLHQLX]GDU]HQLDZGDQ\PHOHPHQFLH 5. 3LHUZV]DPHWRGDGRGDZDQDGRHOHPHQWXWR NRGNWöU\SRZLQLHQE\ÊZ\NRQDQ\SRZ\VWÈSLHQLX ]GDU]HQLDZGDQ\PHOHPHQFLHWHQE\ïZVND]DQ\ MDNRWU]HFLSDUDPHWUIXQNFML  6. 'UXJDPHWRGDZ\ZRïXMHPHWRGÚ]SRSU]HGQLHJRNURNX7RMHVWNRQLHF]QHZFHOXSU]HND]DQLD RELHNWXeventGRIXQNFMLZVND]DQHMZNURNX 7. 0HWRGDattachEvent()MHVWZ\NRU]\VW\ZDQD ZFHOXQDVïXFKLZDQLDRNUHĂORQHJR]GDU]HQLDZH ZVND]DQ\PHOHPHQFLH3RZ\VWÈSLHQLX]GDU]HQLD QDVWÚSXMHZ\ZRïDQLHPHWRG\GRGDQHMZNURNX NWöUD]NROHLZ\ZRïXMHPHWRGÚ]NURNXXĝ\ZDMÈF RGSRZLHGQLHJRRGQLHVLHQLDGRRELHNWXevent
                
                :NURNDFKLZ\NRU]\VWDQRQRWDFMÚQDZLDVX NZDGUDWRZHJRDE\GRGDÊQD]ZÚPHWRG\GR HOHPHQWX
                
                el[’e’ + event + callback] i
                
                ii
                
                i) :Ú]HïPRGHOX'20MHVWSU]HFKRZ\ZDQ\ Zel1DZLDVNZDGUDWRZ\SR]ZDODQDGRGDQLH QD]Z\PHWRG\GRWHJRZÚ]ïD1D]ZDWDPXVLE\Ê XQLNDOQDGODHOHPHQWXLGODWHJRMHVWWZRU]RQDQD SRGVWDZLHWU]HFKIUDJPHQWöZLQIRUPDFML ii) 1D]ZDPHWRG\VNïDGDVLÚ] OLWHU\e]DVWRVRZDQDGODSLHUZV]HMPHWRG\ ZNURNXDOHQLHXĝ\ZDQDZNURNX  W\SX]GDU]HQLDQDSU]\NïDGclick, blur, mouseover  NRGXSRFKRG]ÈFHJR]IXQNFMLZ\ZRïDQLD ]ZURWQHJR :NRG]LHSU]HGVWDZLRQ\PQDVWURQLHSRSUDZHM ZDUWRĂFLÈPHWRG\MHVWIXQNFMDZ\ZRïDQLD ]ZURWQHJR7DNLHUR]ZLÈ]DQLHPRĝHSURZDG]LÊ GRSRZVWDQLDGïXJLFKQD]ZPHWRGDOHGREU]H VSUDZG]DVLÚZSU]\SDGNXQDV]\FKSRWU]HE  )XQNFMDWDMHVWRSDUWDQDIXQNFMLRSUDFRZDQHM SU]H]-RKQD5HVLJDNWöU\VWZRU]\ïM4XHU\ KWWSHMRKQRUJEORJĠH[LEOHMDYDVFULSWHYHQWV 
                
                • • •
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 577
                
                ELEMENT :Ú]ï\PRGHOX'20NRQWUROHNIRUPXODU]DVLHFLRZHJRPDMÈZïDĂFLZRĂFL PHWRG\L]GDU]HQLDUöĝQHRGHOHPHQWöZNWöUHE\ï\RPDZLDQHGRWÈG 3RQLĝHMZ\PLHQLRQRNLONDZïDĂFLZRĂFLPHWRGL]GDU]HñFKDUDNWHU\VW\F]Q\FK GODHOHPHQWX :’$¥&,:2¥m 23,6 action
                
                $GUHV85/QDNWöU\MHVWZ\V\ïDQ\ IRUPXODU]
                
                method
                
                2NUHĂOHQLHPHWRG\Z\VïDQLD IRUPXODU]DGETOXEPOST
                
                name
                
                5]DGNRXĝ\ZDQD]QDF]QLH F]ÚĂFLHMIRUPXODU]MHVWSRELHUDQ\ ]Z\NRU]\VWDQLHPZDUWRĂFLMHJR DWU\EXWXid
                
                elements
                
                .ROHNFMDHOHPHQWöZZIRUPXODU]X]NWöU\PLPRĝHSUDFRZDÊ Xĝ\WNRZQLN6ÈRQHGRVWÚSQH]D SRĂUHGQLFWZHPQXPHUöZLQGHNVX OXEZDUWRĂFLLFKDWU\EXWöZname
                
                3U]HGVWDZLRQHZUR]G]LDOHPHWRG\PRGHOX'20WDNLHMDNgetElementById() getElementsByTagName() i querySelector()VÈ QDMSRSXODUQLHMV]\PLWHFKQLNDPLX]\VNDQLDGRVWÚSX GR]DUöZQRHOHPHQWXMDNLNRQWUROHUD IRUPXODU]DZGRZROQ\PIRUPXODU]XVLHFLRZ\P -HGQDNRELHNWdocumentRIHUXMHWHĝWDN]ZDQÈ NROHNFMÚIRUPXODU]\.ROHNFMDWD]DZLHUDRGQLHVLHQLDGRZV]\VWNLFKHOHPHQWöZ]QDMGXMÈF\FK VLÚQDVWURQLH .DĝG\HOHPHQWZNROHNFMLPDSU]\SLVDQ\QXPHU LQGHNVXSRGREQLHMDNZWDEOLF\QXPHU\UR]SRF]\QDMÈVLÚ0 3RQLĝV]HZ\ZRïDQLHSR]ZDODQD X]\VNDQLHGRVWÚSXGRGUXJLHJRIRUPXODU]D document.forms[1]; ,VWQLHMHUöZQLHĝPRĝOLZRĂÊX]\VNDQLDGRVWÚSX GRIRUPXODU]D]DSRĂUHGQLFWZHPZDUWRĂFLMHJR DWU\EXWXname3RQLĝV]HZ\ZRïDQLHSRZRGXMH SREUDQLHIRUPXODU]DNWöUHJRDWU\EXWname ma ZDUWRĂÊlogin document.forms.login
                
                0(72'$
                
                23,6
                
                submit()
                
                :\ZRïDQLHPHWRG\PDWDNLVDPHIHNW MDNNOLNQLÚFLHSU]\FLVNXZ\V\ïDMÈFHJR IRUPXODU]
                
                reset()
                
                :\]HURZDQLHIRUPXODU]DGRMHJR ZDUWRĂFLSRF]ÈWNRZ\FKMDNLHPLDïSR ZF]\WDQLXVWURQ\
                
                ='$5=(1,(
                
                23,6
                
                submit
                
                :\ZRï\ZDQHSRZ\VïDQLXIRUPXODU]D
                
                reset
                
                :\ZRï\ZDQHSRZ\]HURZDQLX IRUPXODU]D
                
                .DĝG\HOHPHQWQDVWURQLHPDUöZQLHĝWDN ]ZDQÈNROHNFMÚHOHPHQWöZ3U]HFKRZXMHRQD ZV]\VWNLHNRQWURONL]GDQHJRIRUPXODU]D'RVWÚS GRSRV]F]HJöOQ\FKHOHPHQWöZNROHNFMLelements UöZQLHĝPRĝHRGE\ZDÊVLÚ]DSRĂUHGQLFWZHP QXPHUXLQGHNVXOXEZDUWRĂFLMHJRDWU\EXWXname 3RQLĝV]HZ\ZRïDQLHVSRZRGXMHX]\VNDQLHGRVWÚSX do drugiegoIRUPXODU]DQDVWURQLHDQDVWÚSQLH SREUDQLHMHJRpierwszejNRQWURONL document.forms[1].elements[0]; =NROHLSRQLĝV]HZ\ZRïDQLHVSRZRGXMHX]\VNDQLH GRVWÚSXGRdrugiegoIRUPXODU]DQDVWURQLH DQDVWÚSQLHSREUDQLHHOHPHQWXNWöUHJRDWU\EXW namePDZDUWRĂÊpassword document.forms[1].elements.password; Uwaga:1XPHU\LQGHNVöZZNROHNFMLHOHPHQWöZ PRJÈXOHF]PLDQLHSRPRG\ğNDFMLNRGX]QDF]QLNöZQDVWURQLH'ODWHJRWHĝXĝ\FLHQXPHUöZ LQGHNVXSRZRGXMHSRZLÈ]DQLHVNU\SWX]NRGHP ]QDF]QLNöZ+70/QLHVSHïQLRQDMHVWZLÚF]DVDGD SRG]LDïXRGSRZLHG]LDOQRĂFL 
                
                 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                KONTROLKI FORMULARZA 3RV]F]HJöOQHURG]DMHNRQWUROHNIRUPXODU]DXĝ\ZDMÈRGPLHQQ\FKSRïÈF]Hñ Z\PLHQLRQ\FKSRQLĝHMZïDĂFLZRĂFLPHWRGL]GDU]Hñ=ZUöÊXZDJÚQD PRĝOLZRĂÊZ\NRU]\VWDQLDPHWRGGRV\PXODFMLVSRVREXZMDNLXĝ\WNRZQLN SRZLQLHQSUDFRZDÊ]NRQWURONDPLIRUPXODU]D :’$¥&,:2¥m
                
                23,6
                
                value
                
                :SROXWHNVWRZ\PMHVWWRWHNVWZSURZDG]DQ\SU]H]Xĝ\WNRZQLND:SR]RVWDï\FK SU]\SDGNDFKMHVWWRZDUWRĂÊDWU\EXWXvalue
                
                type
                
                .LHG\NRQWURONDIRUPXODU]DMHVWWZRU]RQD]DSRPRFÈHOHPHQWXZïDĂFLZRĂÊWD RNUHĂODURG]DMHOHPHQWXIRUPXODU]DQDSU]\NïDGWHNVWtext KDVïRpassword SU]\FLVN RSFMLradio SROHZ\ERUXcheckbox 
                
                name
                
                3RELHUDOXEXVWDZLDZDUWRĂÊDWU\EXWXname
                
                defaultValue
                
                :DUWRĂÊSRF]ÈWNRZDSRODOXEREV]DUXWHNVWRZHJRSRZ\JHQHURZDQLXVWURQ\
                
                form
                
                )RUPXODU]GRNWöUHJRQDOHĝ\NRQWUROND
                
                disabled
                
                :\ïÈF]HQLHHOHPHQWX
                
                checked
                
                :VND]XMHF]\SROHZ\ERUXOXESU]\FLVN RSFMLSRZLQQRE\Ê]D]QDF]RQH:ïDĂFLZRĂÊ WDSU]\MPXMHZDUWRĂÊERRORZVNÈZ-DYD6FULSW]D]QDF]HQLHSRODOXENOLNQLÚFLHSU]\FLVNX R]QDF]DZDUWRĂÊtrue
                
                defaultChecked
                
                2NUHĂODF]\GDQHSROHZ\ERUXOXESU]\FLVN RSFMLPDE\Ê]D]QDF]RQHSRZF]\WDQLX VWURQ\ZDUWRĂÊERRORZVND 
                
                selected
                
                :VND]XMHF]\HOHPHQWOLVW\UR]ZLMDQHMPDE\Ê]D]QDF]RQ\ZDUWRĂÊERRORZVNDtrue R]QDF]D]D]QDF]HQLH 
                
                0(72'$
                
                23,6
                
                focus()
                
                (OHPHQWVWDMHVLÚDNW\ZQ\
                
                blur()
                
                (OHPHQWVWDMHVLÚQLHDNW\ZQ\
                
                select()
                
                :\ELHUDLSRGĂZLHWOD]DZDUWRĂÊWHNVWRZÈHOHPHQWXQDSU]\NïDGZSRODFKWHNVWRZ\FK REV]DUDFKWHNVWRZ\FKSRODFKKDVHïLWG 
                
                click()
                
                :\ZRïXMH]GDU]HQLHclickZSU]\FLVNDFKSRODFKZ\ERUXLSU]\FLVNDFKSRZRGXMÈF\FK SU]HND]DQLHSOLNX3RQDGWRZ\ZRïXMH]GDU]HQLHsubmitZSU]\FLVNXZ\VïDQLDIRUPXODU]D L]GDU]HQLHresetZSU]\FLVNX]HUXMÈF\PIRUPXODU]
                
                ='$5=(1,(
                
                23,6
                
                blur
                
                :\ZRï\ZDQHJG\Xĝ\WNRZQLNRSXĂFLSROH
                
                focus
                
                :\ZRï\ZDQHJG\Xĝ\WNRZQLNSU]HMG]LHGRSROD
                
                click
                
                :\ZRï\ZDQHJG\Xĝ\WNRZQLNNOLNQLHHOHPHQW
                
                change
                
                :\ZRï\ZDQHJG\ZDUWRĂÊHOHPHQWXXOHJQLH]PLDQLH
                
                input
                
                :\ZRï\ZDQHJG\]PLDQLHXOHJQLHHOHPHQWOXE
                
                keydown, keyup, keypress
                
                :\ZRï\ZDQHJG\Xĝ\WNRZQLNNRU]\VWD]NODZLDWXU\
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                579
                
                WYSŁANIE FORMULARZA 7. 8WZRU]HQLHNRPXQLNDWX]SRZLWDQLHP LXPLHV]F]HQLHJRZ]PLHQQHMRQD]ZLHmsg :NRPXQLNDFLHW\PZLGQLHMHQD]ZDXĝ\WNRZQLND SRGDQDSU]H]RGZLHG]DMÈFHJR 8. 3U]\JRWRZDQ\NRPXQLNDW]DVWÚSXMHQDVWURQLH +70/IRUPXODU]VLHFLRZ\
                
                :RPDZLDQ\PSU]\NïDG]LHSURVW\IRUPXODU]ORJRZDQLDSR]ZDODQDSRGDQLHQD]Z\Xĝ\WNRZQLND LKDVïD.LHG\Xĝ\WNRZQLNZ\ĂOHIRUPXODU]]RVWDQLHRQ]DVWÈSLRQ\SU]H]NRPXQLNDW]SRZLWDQLHP 1DVWURQLHSRSUDZHMSU]HGVWDZLRQRNRG]DUöZQR +70/MDNL-DYD6FULSWWHJRSU]\NïDGX
                
                :GRNXPHQFLH+70/SOLNutilities.jsRPDZLDQ\ ZSRGUR]G]LDOHķ3OLNXWLOLWLHVMVĵ MHVWGRïÈF]DQ\ SU]HGVNU\SWHPVXEPLWHYHQWMVSRQLHZDĝIXQNFMD addEvent()MHVWXĝ\ZDQDGRXWZRU]HQLDSURFHGXU\REVïXJL]GDU]HñZW\PSU]\NïDG]LH:\PLHQLRQ\ SOLNutilities.jsEÚG]LHGRïÈF]DQ\ZHZV]\VWNLFK SU]\NïDGDFKRPDZLDQ\FKZUR]G]LDOH
                
                1. 8PLHV]F]HQLHVNU\SWXZSU]HGVWDZLRQHM ZUR]G]LDOHZSRGUR]G]LDOHķ1DW\FKPLDVW Z\NRQ\ZDQDIXQNFMDZ\UDĝHQLDĵIXQNFMLW\SX,,)( QLHSRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH  2. 8WZRU]HQLH]PLHQQHMRQD]ZLHform prze]QDF]RQHMGRSU]HFKRZ\ZDQLHOHPHQWX %ÚG]LHXĝ\ZDQDZREVHUZDWRU]H]GDU]Hñ ZNROHMQ\PZLHUV]XNRGX 3. 2EVHUZDWRU]GDU]HñSRZRGXMHZ\NRQDQLH IXQNFMLDQRQLPRZHMSRZ\VïDQLXIRUPXODU]D VLHFLRZHJR=ZUöÊXZDJÚQDSU]HSURZDG]HQLH NRQğJXUDFML]DSRPRFÈIXQNFMLaddEvent() ]GHğQLRZDQHMZSOLNXutilities.jsSU]HGVWDZLRQ\P ZSRGUR]G]LDOHķ3OLNXWLOLWLHVMVĵ 4. $E\XQLHPRĝOLZLÊZ\VïDQLHIRUPXODU]DLMHGQRF]HĂQLHSR]ZROLÊQDZ\ĂZLHWOHQLHNRPXQLNDWX Xĝ\WNRZQLNRZL ZIRUPXODU]X]RVWDMH]DVWRVRZDQDPHWRGDpreventDefault() 5. .ROHNFMDHOHPHQWöZWHJRIRUPXODU]DMHVW SU]HFKRZ\ZDQDZ]PLHQQHMRQD]ZLHelements 6. $E\SREUDÊQD]ZÚXĝ\WNRZQLND]NROHNFML elementsSRELHUDQHMHVWRGSRZLHGQLHSROHWHNVWRZHQDSRGVWDZLHZDUWRĂFLMHJRDWU\EXWXname 1DVWÚSQLHSREUDQLHWHNVWXZSURZDG]RQHJRSU]H] Xĝ\WNRZQLNDMHVWPRĝOLZH]DSRPRFÈZïDĂFLZRĂFL valueWHJRHOHPHQWX
                
                2
                
                Utworzenie zmiennej: form przechowującej element
                
                3
                
                Zdarzenie: submit w formularzu
                
                FUNKCJA ANONIMOWA: Powitanie użytkownika jego imieniem Uniemożliwienie akcji domyślnej, czyli wysłania formularza
                
                4
                
                5 6 7
                
                Utworzenie zmiennych: elements: kolekcja elementów username: nazwa użytkownika msg: komunikat z powitaniem
                
                Zastąpienie formularza komunikatem z powitaniem
                
                8
                
                2EVHUZDWRU]GDU]HñRF]HNXMHQDZ\VWÈSLHQLH ]GDU]HQLDsubmitZIRUPXODU]XVLHFLRZ\PDQLH clickZSU]\FLVNXZ\V\ïDMÈF\PIRUPXODU] SRQLHZDĝIRUPXODU]PRĝQDZ\VïDÊQDLQQHVSRVRE\ QLHW\ONRNOLNDMÈFSU]\FLVNĽXĝ\WNRZQLNPRĝHQD SU]\NïDGQDFLVQÈÊNODZLV]Enter
                
                 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                ZDARZENIE SUBMIT I POBRANIE WARTOŚCI Z FORMULARZA c13/submit-event.html
                
                HTML
                
                ...
                
                ğHOGVHW! Logowanie 1D]ZDXĝ\WNRZQLND
                
                +DVïR
                
                ğHOGVHW! WZRWKLUGV! ...
                
                c13/js/submit-event.js
                
                JAVASCRIPT 1 2
                
                (function(){ var form = document.getElementById(’login’);
                
                3 4 5 6
                
                addEvent(form, ’submit’, function(e) { .LHG\Xĝ\WNRZQLNZ\ĂOHIRUPXODU] e.preventDefault(); 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D var elements = this.elements; 3REUDQLHZV]\VWNLFKHOHPHQWöZIRUPXODU]D var username = elements.username.value; 3REUDQLHZSURZDG]RQHMQD]Z\Xĝ\WNRZQLND var msg = ’Witaj, ’ + username; 8WZRU]HQLHNRPXQLNDWX]SRZLWDQLHP document.getElementById(’main’).textContent = msg; :\ĂZLHWOHQLHNRPXQLNDWX ]SRZLWDQLHP }); }());
                
                7 8
                
                3RZ\EUDQLXZÚ]ïDPRGHOX'20MHĝHOLSODQXMHV] Xĝ\ÊJRSRQRZQLHWRGREU\PUR]ZLÈ]DQLHP EÚG]LHMHJREXIRURZDQLH3RSUDZHMVWURQLHSU]HGVWDZLRQRZDULDQWSRZ\ĝV]HJRNRGXZNWöU\P QD]ZDXĝ\WNRZQLNDLHOHPHQWmainVÈSU]HFKRZ\ZDQHZ]PLHQQ\FK]GHğQLRZDQ\FKQD]HZQÈWU] REVHUZDWRUD]GDU]Hñ-HĝHOLXĝ\WNRZQLNSRVWDQRZL SRQRZQLHZ\VïDÊIRUPXODU]WRSU]HJOÈGDUND QLHEÚG]LHPXVLDïD]QöZZ\ELHUDÊW\FKVDP\FK HOHPHQWöZ
                
                3REUDQLHHOHPHQWXIRUP!
                
                var form = document. getElementById(’login’); var elements = form.elements; var elUsername = elements.username; var elMain = document. getElementById(’main’); addEvent(form, ’submit’, function(e) { e.preventDefault(); var msg = ’Witaj, ’ + elUsername.value; elMain.textContent = msg; });
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 
                
                ZMIANA RODZAJU ELEMENTU
                
                :W\PSU]\NïDG]LHSRGSROHPWHNVWRZ\P VïXĝÈF\PGRSRGDQLDKDVïDXPLHĂFLP\SROH Z\ERUX-HĝHOLXĝ\WNRZQLNMH]D]QDF]\KDVïR VWDQLHVLÚZLGRF]QH-HVWWRPRĝOLZHG]LÚNLXĝ\FLX ZïDĂFLZRĂFL-DYD6FULSWRQD]ZLHtypeL]PLDQLH URG]DMXHOHPHQWX z passwordQDtext :ïDĂFLZRĂÊtypeZPRGHOX'20RGSRZLDGD DWU\EXWRZLtypeZ+70/ 
                
                8. :SU]HFLZQ\PUD]LHZDUWRĂFLÈMHVWpassword 9. -HĝHOLSUöED]PLDQ\URG]DMXSRODZ\ZRïXMH EïÈGWRNODX]XODcatchSRZRGXMHZ\NRQDQLH LQQHJREORNXNRGX 10. :\ĂZLHWOHQLHNRPXQLNDWXXĝ\WNRZQLNRZL
                
                2
                
                Utworzenie zmiennych: pwd: pole tekstowe dla hasła chk: pole wyboru
                
                =PLDQDZïDĂFLZRĂFLtypeSRZRGXMHZ\JHQHURZD3 QLHEïÚGXZSU]HJOÈGDUFH,(RUD]MHMZF]HĂQLHMV]\FKZHUVMDFK DZLÚFNRG]RVWDïXPLHV]F]RQ\ ZNRQVWUXNFMLtry-catch-HĝHOLSU]HJOÈGDUND Z\NU\MHEïÈGVNU\SWEÚG]LHNRQW\QXRZDïG]LDïDQLH LZ\NRQDGUXJÈF]ÚĂÊNRGX 4 5
                
                Zdarzenie: event w polu wyboru
                
                FUNKCJA ANONIMOWA: Zmiana wartości atrybutu type pola hasła Pobranie klikniętego elementu Próba przetworzenia poniższego bloku kodu
                
                6
                
                Czy pole wyboru jest zaznaczone?
                
                N 8
                
                7
                
                Atrybutowi type przypisz wartość password
                
                1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)(QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH  2. 8PLHV]F]HQLHSRODGODKDVïDRUD]SRODZ\ERUX Z]PLHQQ\FK 3. 2EVHUZDWRU]GDU]HñSRZRGXMHZ\ZRïDQLH IXQNFMLDQRQLPRZHMJG\]PLDQLHXOHJQLHSROH Z\ERUXZ\ĂZLHWODQHSRGSROHPGODKDVïD 4. (OHPHQWGRFHORZ\SROHZ\ERUX GOD]GDU]HQLD MHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLH target-DN]REDF]\ïHĂZUR]G]LDOHZ\ZRïDQLH e.targetG]LDïDZZLÚNV]RĂFLSU]HJOÈGDUHN 1DWRPLDVWZ\ZRïDQLHe.srcElementMHVWXĝ\ZDQH W\ONRZSU]\SDGNXVWDUV]\FKZHUVML,( 5. .RQVWUXNFMDtry-catchVSUDZG]DF]\Z\VWÈSLï EïÈGSRGF]DVXDNWXDOQLDQLDDWU\EXWXtype 6. -HĝHOLSROHZ\ERUX]RVWDïR]D]QDF]RQH 7. :DUWRĂÊDWU\EXWXtypeSRODWHNVWRZHJRGOD KDVïD]RVWDMH]PLHQLRQDQDtext
                
                N
                
                9
                
                T
                
                Atrybutowi type przypisz wartość text
                
                Blok catch: Czy wystąpił błąd?
                
                T
                
                Wyświetlenie komunikatu: L@  YDOLGDWH7\SHVHOHPHQWV>L@  if (!isValid) { -HĝHOLHOHPHQWQLH]DOLF]DW\FKGZöFKWHVWöZ showErrorMessage(elements[i]); :\ĂZLHWOHQLHNRPXQLNDWöZREïÚGDFK } else { :SU]HFLZQ\PUD]LH removeErrorMessage(elements[i]); 8VXQLÚFLHNRPXQLNDWöZREïÚGDFK } .RQLHFSROHFHQLDLI valid[elements[i].id] = isValid; 'RGDQLHHOHPHQWXGRRELHNWXYDOLG } .RQLHFSÚWOLIRU
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                OGÓLNE OMÓWIENIE KODU — CIĄG DALSZY
                
                C. PRZEPROWADZENIE WŁASNEJ WERYFIKACJI
                
                D. CZY WERYFIKACJA FORMULARZA ZAKOŃCZYŁA SIĘ POWODZENIEM?
                
                14. 3RSU]HSURZDG]HQLXLWHUDFMLSU]H]ZV]\VWNLH HOHPHQW\IRUPXODU]DPRĝQDSU]HSURZDG]LÊZïDVQÈ ZHU\ğNDFMÚ:RPDZLDQ\PSU]\NïDG]LHPDP\ WU]\URG]DMHQLHVWDQGDUGRZHMZHU\ğNDFMLNDĝG\ ]QLFKXĝ\ZDZïDVQHMIXQNFML  i) &]\LQIRUPDFMHNWöUHXĝ\WNRZQLNZSURZDG]Lï RVRELHQLHVÈ]E\WGïXJLH"3DWU]SRGUR]G]LDï ķ:\ĂZLHWODQLHNRPXQLNDWXREïÚG]LHĵ ii) &]\KDVïRMHVWSUDZLGïRZH" iii) &]\ZLHNXĝ\WNRZQLNDSR]ZDODPXQD]DORJRZDQLHVLÚ"-HĝHOLQLHWRF]\]RVWDïR]D]QDF]RQH SROHZ\ERUXR]QDF]DMÈFH]JRGÚXG]LHORQÈSU]H] URG]LFöZ"3DWU]SRGUR]G]LDïķ:HU\ğNDFMDXG]LHOHQLD]JRG\SU]H]URG]LFöZĵ
                
                2ELHNWvalidPDWHUD]ZïDĂFLZRĂÊGODNDĝGHJR HOHPHQWXDZDUWRĂÊZïDĂFLZRĂFLZVND]XMHF]\ HOHPHQWMHVWSUDZLGïRZ\F]\QLH
                
                15. -HĝHOLFKRÊMHGQDZïDVQDZHU\ğNDFMD HOHPHQWX]DNRñF]\VLÚQLHSRZRG]HQLHPQDVWÈSL Z\ZRïDQLHIXQNFMLshowErrorMessage()DRGSRZLHGQLDZïDĂFLZRĂÊZRELHNFLHvalidEÚG]LH PLDïDSU]\SLVDQÈZDUWRĂÊfalse
                
                17. .RGSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLH ZïDĂFLZRĂFLZRELHNFLHvalid 18. 3ROHFHQLHifVSUDZG]DF]\HOHPHQWE\ï QLHSUDZLGïRZ\ 19. -HĝHOLHOHPHQWE\ïQLHSUDZLGïRZ\ZDUWRĂFLÈ ]PLHQQHMisFormValidMHVWfalseLQDVWÚSXMH ]DWU]\PDQLHG]LDïDQLDSÚWOL 20. :SU]HFLZQ\PUD]LHZDUWRĂFLÈ]PLHQQHM isFormValidMHVWtrue 21. 1DNRñFXSRSU]HSURZDG]HQLXLWHUDFMLSU]H] RELHNWvalidMHĝHOL]PLHQQDisFormValid ma ZDUWRĂÊfalseWRPHWRGDpreventDefault() XQLHPRĝOLZLDZ\VïDQLHIRUPXODU]DVLHFLRZHJR :SU]HFLZQ\PUD]LHIRUPXODU]]RVWDMHZ\VïDQ\
                
                16. -HĝHOLWHVWHOHPHQWX]DNRñF]\VLÚ SRZRG]HQLHPQDVWÈSLZ\ZRïDQLHIXQNFML removeErrorMessage()GODWHJRHOHPHQWX
                
                
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                JAVASCRIPT
                
                14
                
                15
                
                16
                
                17 18 19 20
                
                21
                
                FMVSODFHKROGHUSRO\ğOOMV
                
                3U]HSURZDG]HQLHZïDVQHMZHU\ğNDFMLWRW\ONR]IXQNFML  if (!validateBio()) { :\ZRïDQLHYDOLGDWH%LR MHĝHOLNRQWURONDMHVWQLHSUDZLGïRZD showErrorMessage(document.getElementById(’bio’)); :\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH valid.bio = false; 8DNWXDOQLHQLHRELHNWXHOHPHQWQLHSRSUDZQ\ } else { :SU]HFLZQ\PUD]LH removeErrorMessage(document.getElementById(’bio’)); 8VXQLÚFLHNRPXQLNDWXREïÚG]LH } 0LHMVFHQDGZLHNROHMQHIXQNFMH &]\WHVW\]RVWDï\]DOLF]RQHLF]\PRĝQDZ\VïDÊIRUPXODU]" ,WHUDFMDSU]H]RELHNWYDOLGMHĝHOLZ\VWÈSLï\EïÚG\WR]PLHQQDLV)RUP9DOLG PDSU]\SLVDQÈZDUWRĂÊIDOVH IRUYDUğHOGLQYDOLG ^6SUDZG]HQLHZïDĂFLZRĂFLRELHNWXYDOLG LIYDOLG>ğHOG@ ^-HĝHOLHOHPHQWMHVWQLHSUDZLGïRZ\ isFormValid = false; 3U]\SLVDQLH]PLHQQHMLV)RUP9DOLGZDUWRĂFLIDOVH break; =DWU]\PDQLHSÚWOLIRU]QDOH]LRQREïÈG } :SU]HFLZQ\PUD]LH isFormValid = true; )RUPXODU]MHVWZ\SHïQLRQ\SUDZLGïRZRPRĝQDJRZ\VïDÊ } -HĝHOLIRUPXODU]MHVWZ\SHïQLRQ\QLHSUDZLGïRZRQLHZROQRJRZ\VïDÊ if (!isFormValid) { -HĝHOL]PLHQQDLV)RUP9DOLGPDZDUWRĂÊLQQÈQLĝWUXH e.preventDefault(); 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D } }); .RQLHFSURFHGXU\REVïXJL]GDU]Hñ ... 0LHMVFHQDZ\ZRï\ZDQHSRZ\ĝHMIXQNFMH }()); .RQLHFIXQNFMLW\SX,,)(
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                WYMAGANE ELEMENTY FORMULARZA )XQNFMDYDOLGDWH5HTXLUHG MHVWZ\ZRï\ZDQDGODNDĝGHJR HOHPHQWXSDWU]NURNZSRGUR]G]LDOHķ2JöOQHRPöZLHQLH NRGXĵ -HG\Q\PSDUDPHWUHP IXQNFMLMHVWHOHPHQWSU]H]QDF]RQ\GRVSUDZG]HQLD
                
                $WU\EXWrequiredZ+70/ R]QDF]DĝHGDQHSROHPXVLPLHÊ ZDUWRĂÊ8WZRU]RQDSU]H]QDV IXQNFMDYDOLGDWH5HTXLUHG przede ZV]\VWNLPVSUDZG]DZ\PLHQLRQ\ DWU\EXW-HĝHOLMHVWGRVWÚSQ\QDVWÚSXMH VSUDZG]HQLHF]\PDZDUWRĂÊ
                
                :\PLHQLRQDIXQNFMDZ\ZRïXMH QDVWÚSQLHWU]\LQQH i) LV5HTXLUHG VSUDZG]D F]\HOHPHQW]DZLHUDDWU\EXW required
                
                ii) isEmpty()PRĝHVSUDZG]LÊ F]\HOHPHQWPDZDUWRĂÊ iii) setErrorMessage()SU]\JRWRZXMHNRPXQLNDW\REïÚGDFK MHĂOLZ\VWÈSLÈMDNLHNROZLHN SUREOHP\
                
                IXQFWLRQYDOLGDWH5HTXLUHGHO ^ 1 LILV5HTXLUHGHO ^&]\HOHPHQWMHVWZ\PDJDQ\ 2 var valid = !isEmpty(el); &]\HOHPHQWSRVLDGDZDUWRĂÊWUXHIDOVH  if (!valid) { -HĝHOLZDUWRĂFLÈ]PLHQQHMYDOLGMHVWIDOVH 3 setErrorMessage(el, ’To pole jest wymagane’); 4
                
                3U]\JRWRZDQLHNRPXQLNDWXREïÚG]LH } return valid; =ZURW]PLHQQHMYDOLGWUXHIDOVH
                
                5
                
                } return true;
                
                6
                
                -HĝHOLQLHMHVWZ\PDJDQ\WRZV]\VWNRZSRU]ÈGNX
                
                }
                
                A. CZY ELEMENT MA ATRYBUT REQUIRED? 1. 3ROHFHQLHifXĝ\ZDIXQNFML RQD]ZLHLV5HTXLUHG do VSUDZG]HQLDF]\HOHPHQW ]DZLHUDDWU\EXWrequired )XQNFMDLV5HTXLUHG ]RVWDïD SRND]DQDQDVWURQLHSRSUDZHM -HĝHOLZ\PLHQLRQ\DWU\EXW ]QDMGXMHVLÚZHOHPHQFLH QDVWÈSLZ\NRQDQLHNROHMQHJR EORNXNRGX 6. -HĝHOLQLHNRGSU]HFKRG]L GRNURNXFRR]QDF]DĝH ]HOHPHQWHPZV]\VWNRMHVW ZSRU]ÈGNX
                
                
                
                B. JEŻELI TAK, TO CZY MA ON PRZYPISANĄ WARTOŚĆ?
                
                C. CZY NALEŻY PRZYGOTOWAĆ KOMUNIKAT O BŁĘDZIE?
                
                -HĝHOLSROHIRUPXODU]DMHVW Z\PDJDQHNROHMQ\PNURNLHP MHVWVSUDZG]HQLHF]\]DZLHUD RQRZDUWRĂÊ'RWHJRFHOXVïXĝ\ Z\ZRïDQLHIXQNFMLisEmpty() UöZQLHĝSU]HGVWDZLRQHMQD VWURQLHSRSUDZHM 2. :DUWRĂÊ]ZUöFRQDSU]H] IXQNFMÚisEmpty()MHVWSU]HFKRZ\ZDQDZ]PLHQQHMRQD]ZLH valid-HĝHOLGDQHSROH IRUPXODU]DnieEÚG]LHSXVWH ]PLHQQDEÚG]LHSU]HFKRZ\ZDÊ ZDUWRĂÊtrue-HĝHOLMHVWSXVWH ZDUWRĂFLÈMHVWfalse
                
                3.3ROHFHQLHifVSUDZG]DF]\ ZDUWRĂFLÈ]PLHQQHMvalid nie MHVWtrue 4.-HĝHOLZDUWRĂÊMHVWLQQDQLĝ trueSU]\JRWRZ\ZDQ\MHVW NRPXQLNDWREïÚG]LH]DSRPRFÈ IXQNFMLsetErrorMessage() NWöUD]RVWDïDSU]HGVWDZLRQD ZSRGUR]G]LDOHķ7ZRU]HQLH NRPXQLNDWXREïÚG]LHĵ 5.=PLHQQDvalidMHVW ]ZUDFDQDZNROHMQ\PZLHUV]X ZNWöU\PNRñF]\VLÚG]LDïDQLH RPDZLDQHMIXQNFML
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                )XQNFMDYDOLGDWH5HTXLUH Xĝ\ZDGZöFKLQQ\FKGRSU]HSURZDG]HQLD RSHUDFMLVSUDZG]HQLD LV5HTXLUHG VSUDZG]DF]\HOHPHQWPDDWU\EXWrequired LV(PSW\ VSUDZG]DF]\HOHPHQWPDZDUWRĂÊ LV5HTXLUHG )XQNFMDLV5HTXLUHG SRELHUD HOHPHQWMDNRSDUDPHWUDQDVWÚSQLHVSUDZG]DF]\DWU\EXW requiredMHVWREHFQ\ZW\P HOHPHQFLH:DUWRĂFLÈ]ZURWQÈ MHVWZDUWRĂÊERRORZVND
                
                ,VWQLHMÈGZDURG]DMHVSUDZG]HQLD3LHUZV]HNRGZNRORU]H QLHELHVNLP MHVWSU]H]QDF]RQH GODSU]HJOÈGDUHNREVïXJXMÈF\FK DWU\EXWrequiredZSURZDG]RQ\ Z+70/'UXJLNRGZNRORU]H SRPDUDñF]RZ\P MHVWGOD VWDUV]\FKSU]HJOÈGDUHN
                
                :FHOXVSUDZG]HQLDF]\ DWU\EXWrequiredMHVWREHFQ\ Xĝ\OLĂP\ZNRG]LHRSHUDWRUD typeof-HJRG]LDïDQLHSROHJD QDVSUDZG]HQLXMDNLZHGïXJ SU]HJOÈGDUNLMHVWW\SGDQ\FK DWU\EXWXrequired
                
                IXQFWLRQLV5HTXLUHGHO ^ return (W\SHRIHOUHTXLUHG ijERROHDQij  HOUHTXLUHG) || (typeof el.required === ’string’); } NOWOCZESNE PRZEGLĄDARKI INTERNETOWE
                
                STARSZE PRZEGLĄDARKI INTERNETOWE
                
                1RZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZHZLHG]ÈĝHZïDĂFLZRĂÊ requiredWRZDUWRĂÊERRORZVND =DWHPSLHUZV]DF]ÚĂÊRSHUDFML VSUDZG]HQLDWRXVWDOHQLHF]\Xĝ\ZDQDMHVWQRZRF]HVQDSU]HJOÈGDUND'UXJDF]ÚĂÊVSUDZG]HQLD WRXVWDOHQLHF]\HOHPHQW]DZLHUD DWU\EXWrequired-HĝHOLDWU\EXW WHQMHVWGRVWÚSQ\MHJRZDUWRĂFLÈ EÚG]LHtrue:SU]HFLZQ\PUD]LH ZDUWRĂFLÈ]ZURWQÈMHVWXQGHğQHG NWöUDEÚG]LHX]QDQD]DZDUWRĂÊ falsy
                
                3U]HJOÈGDUNLLQWHUQHWRZHQLHREVïXJXMÈFH+70/QDGDOPRJÈ ZVND]DÊF]\DWU\EXW+70/ ]QDMGXMHVLÚZHOHPHQFLH :WHJRURG]DMXSU]HJOÈGDUNDFK MHĝHOLDWU\EXWrequiredEÚG]LH REHFQ\WR]RVWDQLHSRWUDNWRZDQ\MDNRFLÈJWHNVWRZ\ DZLÚFMDNRZDUWRĂÊtrue-HĝHOL DWU\EXWXQLHPDWRW\SHPMHVW XQGHğQHGF]\OLZDUWRĂÊfalsy
                
                7U]HED]ZUöFLÊXZDJÚĝHDWU\EXWrequiredMHG\QLHZVND]XMH LVWQLHQLHpewnejZDUWRĂFL1LH RNUHĂODMDNGïXJRWDZDUWRĂÊ SRZLQQDE\ÊDWDNĝHQLH SU]HSURZDG]DĝDGQHJRURG]DMX ZHU\ğNDFML.RQNUHWQHRSHUDFMH VSUDZG]HQLDWDNLHMDNWXWDM RPDZLDQHSRZLQQ\E\ÊGRGDQH GRIXQNFMLvalidateTypes()OXE VHNFMLZVNU\SFLH]DZLHUDMÈFHM NRGZïDVQHMZHU\ğNDFML
                
                WSZYSTKIE PRZEGLĄDARKI INTERNETOWE
                
                STARSZE PRZEGLĄDARKI INTERNETOWE
                
                3LHUZV]HVSUDZG]HQLHPDQD FHOXXVWDOHQLHF]\HOHPHQWnie PDZDUWRĂFL-HĝHOLHOHPHQWPD ZDUWRĂÊIXQNFMD]ZUDFDfalse -HĝHOLZDUWRĂÊMHVWSXVWD IXQNFMD]ZUDFDtrue
                
                -HĝHOLVWDUV]DSU]HJOÈGDUND LQWHUQHWRZDXĝ\ZDVNU\SWXW\SX SRO\ğOOGODWHNVWXSRGSRZLHG]L WRZDUWRĂÊEÚG]LHWDNDVDPD MDNSRGSRZLHGě%ÚG]LHZLÚF X]QDQD]DSXVWÈMHĝHOLRELH ZDUWRĂFL]RVWDQÈGRSDVRZDQH
                
                isEmpty() 3U]HGVWDZLRQDSRQLĝHM IXQNFMDisEmpty()SRELHUD SDUDPHWUZSRVWDFLHOHPHQWX DQDVWÚSQLHVSUDZG]DF]\ PDRQZDUWRĂÊ3RGREQLHMDN ZSU]\SDGNXLV5HTXLUHG  GZLHRSHUDFMHVSUDZG]HQLD VÈXĝ\ZDQHGR]DSHZQLHQLD REVïXJL]DUöZQRQRZ\FKMDN LVWDUV]\FKSU]HJOÈGDUHN
                
                CO JEST WERYFIKOWANE?
                
                function isEmpty(el) { return !el.value || el.value === el.placeholder; }
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                TWORZENIE KOMUNIKATU O BŁĘDZIE .RGRGSRZLHG]LDOQ\]DZHU\ğNDFMÚSU]HWZDU]DHOHPHQW\SRMHG\QF]R DZV]HONLHNRPXQLNDW\REïÚGDFKVÈSU]HFKRZ\ZDQH]DSRPRFÈ PHWRG\M4XHU\RQD]ZLH.data() JAK USTAWIANE SĄ BŁĘDY?
                
                JAK DANE SĄ PRZECHOWYWANE Z WĘZŁAMI?
                
                -HĝHOLZWUDNFLHG]LDïDQLDNRGXRGSRZLHG]LDOQHJR ]DZHU\ğNDFMÚ]RVWDQLHQDSRWNDQ\EïÈGQDVWÚSXMH Z\ZRïDQLHIXQNFMLsetErrorMessage()NWöUD SRELHUDGZDDUJXPHQW\ i) elHOHPHQWGODNWöUHJRSU]\JRWRZ\ZDQ\MHVW NRPXQLNDWREïÚG]LH ii) messageWUHĂÊNRPXQLNDWXREïÚG]LHNWöUD ]RVWDQLHZ\ĂZLHWORQDXĝ\WNRZQLNRZL
                
                .DĝG\NRPXQLNDWREïÚG]LHEÚG]LHSU]HFKRZ\ZDQ\ ZUD]]ZÚ]ïHPHOHPHQWXFRRGE\ZDVLÚ]D SRPRFÈPHWRG\M4XHU\.data().LHG\PDV] HOHPHQW\ZGRSDVRZDQ\P]ELRU]HM4XHU\PHWRGD .data()SR]ZDODQDSU]HFKRZ\ZDQLHLQIRUPDFML ZSRVWDFLSDUNOXF]ZDUWRĂÊGODSRV]F]HJöOQ\FK HOHPHQWöZ
                
                1DSU]\NïDGSRQLĝV]HZ\ZRïDQLH VSRZRGXMHGRGDQLHNRPXQLNDWX :\SHïQLHQLHWHJRSRODMHVWZ\PDJDQH do HOHPHQWXSU]HFKRZ\ZDQHJRZ]PLHQQHMel
                
                0HWRGD.data()PDGZDSDUDPHWU\ i)NOXF]NWöU\P]DZV]HEÚG]LHerrorMessage ii)ZDUWRĂÊNWöUÈEÚG]LHWUHĂÊNRPXQLNDWX REïÚG]LHSU]H]QDF]RQDGRZ\ĂZLHWOHQLD
                
                setErrorMessage(el, ’To pole jest wymagane’);
                
                setErrorMessage() 1 function setErrorMessage(el, message) {
                
                $(el).data(’errorMessage’, message); 3U]HFKRZ\ZDQLHNRPXQLNDWXREïÚG]LHZUD]]HOHPHQWHP
                
                2
                
                }
                
                
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                WYŚWIETLANIE KOMUNIKATU O BŁĘDZIE -HĝHOLSRVSUDZG]HQLXZV]\VWNLFKHOHPHQWöZFKRÊMHGHQ]QLFK EÚG]LHQLHSUDZLGïRZ\IXQNFMDshowErrorMessage()Z\ĂZLHWOL QDVWURQLHNRPXQLNDWREïÚG]LH JAK WYŚWIETLANE SĄ KOMUNIKATY O BŁĘDACH? -HĝHOL]DFKRG]LNRQLHF]QRĂÊZ\ĂZLHWOHQLDNRPXQLNDWXREïÚG]LHQDMSLHUZQDVWURQLHGRGDQ\EÚG]LH HOHPHQWEH]SRĂUHGQLRSRSROXIRUPXODU]D ZNWöU\PZ\VWÈSLïEïÈG 1DVWÚSQLHNRPXQLNDWREïÚG]LH]RVWDQLHGRGDQ\ GRZ\PLHQLRQHJRHOHPHQWX$E\SREUDÊ WUHĂÊNRPXQLNDWXXĝ\ZDQDMHVWWDVDPDPHWRGD M4XHU\.data()]DSRPRFÈNWöUHMZF]HĂQLHM SU]\JRWRZDOLĂP\NRPXQLNDW7\PUD]HPPHWRGD SRELHUDW\ONRMHGHQSDUDPHWUNOXF]]DZV]HQLP EÚG]LHerrorMessage  ']LHMHVLÚWRZHZQÈWU]IXQNFMLRQD]ZLH showErrorMessage()NWöUHMNRGSU]HGVWDZLRQR SRQLĝHM
                
                1. $elSU]HFKRZXMHZ\EUDQ\SU]H]M4XHU\ HOHPHQWNWöUHJRGRW\F]\NRPXQLNDWREïÚG]LH 2. $errorContainerZ\V]XNXMHZV]HONLHLVWQLHMÈFH EïÚG\ZW\PHOHPHQFLH2GE\ZDVLÚWRSU]H] VSUDZG]HQLHF]\LVWQLHMÈHOHPHQW\UöZQRU]ÚGQH RNODVLHerror 3. -HĝHOLHOHPHQWQLHPDSU]\SLVDQHJRĝDGQHJR NRPXQLNDWXREïÚG]LHZ\NRQDQ\EÚG]LHNRG ZQDZLDVLHNODPURZ\P 4. $errorContainerSU]HFKRZXMHHOHPHQW 1DVWÚSQLHPHWRGD.insertAfter() XPLHV]F]DHOHPHQWQDVWURQLHWXĝ]D HOHPHQWHPNWöU\VSRZRGRZDïEïÈG 5. =DZDUWRĂÊHOHPHQWXMHVWZ\SHïQLDQD NRPXQLNDWHPREïÚG]LHGODGDQHJRHOHPHQWX 7UHĂÊNRPXQLNDWXMHVWSRELHUDQD]DSRPRFÈ PHWRG\.data()WHJRHOHPHQWX
                
                showErrorMessage() function showErrorMessage(el) { var $el = $(el); :\V]XNDQLHHOHPHQWX]EïÚGHP var $errorContainer = $el.siblings(’.error’); &]\]DZLHUDMXĝMDNLHNROZLHNEïÚG\" 2 1
                
                if (!$errorContainer.length) { -HĝHOLQLH]QDOH]LRQRNRPXQLNDWöZREïÚGDFK 8WZRU]HQLHHOHPHQWXVSDQ!GRSU]HFKRZ\ZDQLDEïÚGXLGRGDQLHJRSRHOHPHQFLH ZNWöU\PZ\VWÈSLïEïÈG */ $errorContainer = $(’’).insertAfter($el); } $errorContainer.text($(el).data(’errorMessage’)); 'RGDQLHNRPXQLNDWXREïÚG]LH }
                
                3
                
                4 5
                
                }
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                WERYFIKACJA RÓŻNEGO RODZAJU ELEMENTÓW
                
                1RZHW\S\HOHPHQWöZZ+70/PDMÈZEXGRZDQHPHFKDQL]P\ ZHU\ğNDFML:RPDZLDQ\PSU]\NïDG]LHXĝ\ZDQHVÈHOHPHQW\+70/ DOHLFKZHU\ğNDFMÚSU]HSURZDG]DP\]DSRPRFÈNRGX-DYD6FULSWDE\ ]DSHZQLÊVSöMQHG]LDïDQLHSU]\NïDGXZHZV]\VWNLFKSU]HJOÈGDUNDFK )XQNFMDvalidateTypes()EÚG]LHSU]HSURZDG]DïDZHU\ğNDFMÚ SRGREQÈMDNZQRZRF]HVQ\FK SU]HJOÈGDUNDFKGODHOHPHQWöZ +70/DOHWXWDMEÚG]LHGRW\F]\ïDZV]\VWNLFKSU]HJOÈGDUHN .RQLHF]QHMHVW VSUDZG]HQLHMDNLHJRW\SX GDQHSRZLQQ\E\ÊSU]HFKRZ\ZDQHSU]H]HOHPHQW IRUPXODU]D ]DJZDUDQWRZDQLHĝH]DZDUWRĂÊHOHPHQWXRGSRZLDGD MHJRW\SRZL
                
                • •
                
                
                
                1. 3LHUZV]\ZLHUV]ZIXQNFML VSUDZG]DF]\HOHPHQWPD ZDUWRĂÊ-HĝHOLXĝ\WNRZQLNQLH ZSURZDG]LïĝDGQ\FKLQIRUPDFML QLHPRĝQD]ZHU\ğNRZDÊ W\SXGDQ\FK&RZLÚFHMQLH PRĝQDZöZF]DVPöZLÊ o QLHZïDĂFLZ\PW\SLHGDQ\FK 'ODWHJRWHĝZSU]\SDGNXEUDNX ZDUWRĂFLIXQNFMD]ZUDFDtrue DSR]RVWDïDF]ÚĂÊNRGXIXQNFML QLHMHVWZ\NRQ\ZDQD 
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                2. -HĝHOLHOHPHQWPDZDUWRĂÊ QDVWÚSXMHXWZRU]HQLH]PLHQQHM RQD]ZLHtypeSU]H]QDF]RQHM GRSU]HFKRZ\ZDQLDZDUWRĂFL DWU\EXWXtype3U]HGHZV]\VWNLPNRGVSUDZG]DF]\M4XHU\ SU]HFKRZXMHMDNLHNROZLHN LQIRUPDFMHRW\SLHXĝ\ZDMÈF GRWHJRVZRMHMPHWRG\.data() ĽZSRGUR]G]LDOHķ8NU\FLH SRODZ\ERUXGRW\F]ÈFHJR]JRG\ URG]LFöZĵGRZLHV]VLÚGODF]HJR -HĝHOLQLHVÈSU]HFKRZ\ZDQH ĝDGQHLQIRUPDFMHSRELHUDQD MHVWZDUWRĂÊDWU\EXWXtype
                
                1 2 3 4 5
                
                function validateTypes(el) { if (!el.value) return true; -HĝHOLHOHPHQWQLHPDZDUWRĂFLQDOHĝ\]ZUöFLÊWUXH :SU]HFLZQ\PUD]LHWU]HEDSREUDÊZDUWRĂÊ]DSRPRFÈPHWRG\GDWD var type = $(el).data(’type’) || el.getAttribute(’type’); OXESREUDÊDWU\EXWW\SHSRODWHNVWRZHJR if (typeof validateType[type] === ’function’) { &]\DWU\EXWZVND]XMHPHWRGÚGRZHU\ğNDFMLRELHNWX" return validateType[type](el); -HĝHOLWDNVSUDZG]DP\SRSUDZQRĂÊZDUWRĂFL } else { -HĝHOLQLH return true; =ZUDFDP\WUXHSRQLHZDĝZDUWRĂFLQLHPRĝQDSU]HWHVWRZDÊ } }
                
                :RPDZLDQ\PSU]\NïDG]LH ]DPLDVWZïDĂFLZRĂFLPRGHOX '20Xĝ\ZDQDMHVWPHWRGD getAttribute()SRQLHZDĝ ZV]\VWNLHSU]HJOÈGDUNLPRJÈ ]ZUöFLÊZDUWRĂÊDWU\EXWXtype SRGF]DVJG\SU]HJOÈGDUNLQLHUR]SR]QDMÈFHQRZHMZïDĂFLZRĂFL W\SXPRGHOX'20Z+70/SR SURVWX]ZUöFÈWHNVWtext 
                
                3. 7DIXQNFMDXĝ\ZDRELHNWX RQD]ZLHvalidateType MHJRNRGSU]HGVWDZLRQRQD NROHMQHMVWURQLH GRVSUDZG]HQLD ]DZDUWRĂFLHOHPHQWX3ROHFHQLH ifVSUDZG]DF]\RELHNW validateTypePDPHWRGÚRQD]ZLHRGSRZLDGDMÈFHMZDUWRĂFL DWU\EXWXtype-HĝHOLLVWQLHMH PHWRGDRQD]ZLHGRSDVRZDQHM GRW\SXNRQWURONLIRUPXODU]DWR
                
                4. (OHPHQWMHVWSU]HND]\ZDQ\ RELHNWRZLZDUWRĂFLÈ]ZURWQÈ MHVWtrueOXEfalse 5. -HĝHOLQLHGRSDVRZDQR ĝDGQHMPHWRG\RELHNWQLHPRĝH SU]HSURZDG]LÊZHU\ğNDFML NRQWURONLIRUPXODU]DLQLH ]RVWDQLHSU]\JRWRZDQ\NRPXQLNDWREïÚG]LH
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                UTWORZENIE OBIEKTU DO WERYFIKACJI TYPÓW DANYCH 3U]HGVWDZLRQ\SRQLĝHMRELHNW validateTypePDWU]\PHWRG\
                
                .RGZSRV]F]HJöOQ\FK PHWRGDFKMHVWSUDNW\F]QLH LGHQW\F]Q\1DGROHVWURQ\ PRĝHV]]REDF]\ÊIRUPDW PHWRG\email().DĝGDPHWRGD ZHU\ğNXMHGDQH]DSRPRFÈWDN ]ZDQHJRZ\UDĝHQLDUHJXODUnego:VSRPQLDQHZ\UDĝHQLH UHJXODUQHWRMHG\QDUöĝQLFD PLÚG]\RPDZLDQ\PLWXWDMPHWRGDPLLVïXĝ\GRVSUDZG]DQLD RGPLHQQ\FKW\SöZGDQ\FK
                
                var validateType = { HPDLOIXQFWLRQHO ^ 6SUDZG]HQLHDGUHVX HPDLO }, QXPEHUIXQFWLRQHO ^ 6SUDZG]HQLHF]\ ZDUWRĂÊMHVWOLF]EÈ }, GDWHIXQFWLRQHO ^ 6SUDZG]HQLHIRUPDWX GDW\ } }
                
                :\UDĝHQLDUHJXODUQHSR]ZDODMÈQDsprawdzenie istnienia Z]RUFöZZFLÈJDFKWHNVWRZ\FK :RPDZLDQ\PSU]\NïDG]LH VÈXĝ\ZDQHZUD]]PHWRGÈ RQD]ZLHtest()
                
                :LÚFHMLQIRUPDFMLRZ\UDĝHQLDFK UHJXODUQ\FKLLFKVNïDGQL ]QDMG]LHV]QDGZöFKNROHMQ\FK VWURQDFK7HUD]PXVLV]MHG\QLH ZLHG]LHÊĝHVÈZ\NRU]\VW\ZDQH GRVSUDZG]HQLDF]\NRQWHQHU GDQ\FK]DZLHUDRNUHĂORQ\ Z]RU]HF]QDNöZ 3U]HFKRZ\ZDQLHW\FKRSHUDFML VSUDZG]HñMDNRPHWRGRELHNWX SRZRGXMHĝHEDUG]RïDWZR X]\VNDÊGRQLFKGRVWÚSNLHG\ ]DFKRG]LSRWU]HEDZHU\ğNDFML UöĝQHJRW\SXSöOIRUPXODU]D
                
                iii
                
                /[^@]+@[^@]+/.test(el.value); i
                
                i):\UDĝHQLHUHJXODUQHPD SRVWDÊ[^@]+@[^@]+]QDMGXMH VLÚPLÚG]\]QDNDPL/ i /  2]QDF]DZ]RU]HF]QDNöZ NWöUHQDMF]ÚĂFLHM]QDMGXMÈVLÚ ZDGUHVDFKHPDLO
                
                ii
                
                ii)0HWRGDtest()SRELHUD MHGHQSDUDPHWUFLÈJWHNVWRZ\  LQDVWÚSQLHVSUDZG]DF]\ Z\UDĝHQLHUHJXODUQHPRĝH GRSDVRZDÊ]QDNLZW\PFLÈJX WHNVWRZ\P:DUWRĂFLÈ]ZURWQÈ PHWRG\MHVWZDUWRĂÊERRORZVND
                
                 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                iii):RPDZLDQ\PSU]\NïDG]LH PHWRG]LHtest()MHVWSU]HND]\ZDQDZDUWRĂÊHOHPHQWX SU]H]QDF]RQHJRGRVSUDZG]HQLD3RQLĝHMSU]HGVWDZLRQR PHWRGÚVSUDZG]DMÈFÈDGUHV\ HPDLO
                
                HPDLOIXQFWLRQHO ^8WZRU]HQLHPHWRG\HPDLO  var valid = /[^@]+@[^@]+/.test(el.value); :\QLNWHVWXMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMYDOLG if (!valid) { -HĝHOLZDUWRĂFLÈ]PLHQQHMYDOLGQLHMHVWWUXH 2 3 VHW(UURU0HVVDJHHOij3URV]ÚSRGDÊSRSUDZQ\DGUHVHPDLOij  3U]\JRWRZDQLHNRPXQLNDWXREïÚG]LH } return valid; =ZURW]PLHQQHMYDOLG 4 }, 1
                
                1. =PLHQQDRQD]ZLHvalid SU]HFKRZXMHZ\QLNWHVWX SU]HSURZDG]RQHJR]DSRPRFÈ Z\UDĝHQLDUHJXODUQHJR
                
                2. -HĝHOLFLÈJWHNVWRZ\QLH ]DZLHUDGRSDVRZDQLD]QDNöZ ZVND]\ZDQ\FKSU]H]Z\UDĝHQLH UHJXODUQH 3. 3U]\JRWRZDQLHNRPXQLNDWX REïÚG]LH
                
                4. )XQNFMD]ZUDFDZDUWRĂÊ ]PLHQQHMvalidPRĝHWRE\Ê trueOXEfalse 
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                
                
                WYRAŻENIA REGULARNE :\UDĝHQLDUHJXODUQHSRZRGXMÈZ\V]XNLZDQLH]QDNöZWZRU]ÈF\FKZ]RU]HF 8PRĝOLZLDMÈWDNĝH]DVWÈSLHQLHW\FK]QDNöZLQQ\PL :\UDĝHQLDUHJXODUQHQLH Z\V]XNXMÈSRSURVWXGRSDVRZDQ\FK]QDNöZPRJÈ SU]HSURZDG]DÊVSUDZG]HQLH SRGNÈWHPVHNZHQFML]QDNöZ PDï\FKLGXĝ\FKOLF]E]QDNöZ SU]HVWDQNRZ\FKLLQQ\FK
                
                ,GHDMHVWSRGREQDGRRIHURZDQHMSU]H]HG\WRU\WHNVWX IXQNFMLW\SXķ]QDMGěL]DPLHñĵ DOHSR]ZDODQDSU]\JRWRZDQLH ]QDF]QLHEDUG]LHMVNRPSOLNRZDQ\FKRSHUDFMLZ\V]XNLZDQLD NRPELQDFML]QDNöZ
                
                3RQLĝHMSU]HGVWDZLRQRHOHPHQW\ NRQVWUXNF\MQHZ\UDĝHñUHJXODUQ\FK1DVWURQLHSRSUDZHM ]QDMG]LHV]NLONDSU]\NïDGöZ SRïÈF]HQLDW\FKHOHPHQWöZ ZFHOXXWZRU]HQLDQDU]ÚG]L VïXĝÈF\FKGRGRSDVRZDQLD Z]RUFDNWöUHEÚGÈRIHURZDÊ ]QDF]QLHZLÚNV]HPRĝOLZRĂFL
                
                .
                
                [ ]
                
                [^ ]
                
                ^
                
                $
                
                GRZROQ\]QDN ]Z\MÈWNLHP QRZHJRZLHUV]D
                
                MHGHQ]QDN SRGDQ\ ZQDZLDVLH
                
                MHGHQ]QDN QLH]QDMGXMÈF\VLÚ ZW\PQDZLDVLH
                
                SRïRĝHQLH SRF]ÈWNRZH ZGRZROQ\P wierszu
                
                SRïRĝHQLH NRñFRZH ZGRZROQ\P wierszu
                
                ( )
                
                *
                
                \n
                
                {m,n}
                
                \d
                
                VXEZ\UDĝHQLD F]DVDPL QD]\ZDQH EORNDPLOXE grupami SU]HFKZ\W\ZDQLD
                
                SRSU]HGQL HOHPHQW Z\VWÚSXMH]HUR OXEZLÚFHMUD]\
                
                nWH VXEZ\UDĝHQLH nWRF\IUD RGGR
                
                SRSU]HGQL HOHPHQW Z\VWÚSXMH PLQLPXPmUD]\ DOHQLHZLÚFHMQLĝ nUD]\
                
                F\IUD
                
                \D
                
                \s
                
                \S
                
                \w
                
                \W
                
                ]QDNLQQ\QLĝ F\IUD
                
                ]QDNRGVWÚSX
                
                ]QDNLQQ\QLĝ ]QDNRGVWÚSX
                
                ]QDN DOIDQXPHU\F]Q\ $ļ=Dļ] ļ
                
                ]QDNLQQ\QLĝ DOIDQXPHU\F]Q\ ]Z\MÈWNLHP_
                
                 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                NAJCZĘŚCIEJ STOSOWANE WYRAŻENIA REGULARNE 2WRZ\EUDQHZ\UDĝHQLDUHJXODUQHNWöUHPRĝHV]Z\NRU]\VWDÊZNRG]LH &]ÚĂÊ]QLFKRIHUXMH]QDF]QLHZLÚNV]HPRĝOLZRĂFLQLĝWHNWöUH]DDGDSWRZDQR ZSU]HJOÈGDUNDFKLQWHUQHWRZ\FK *G\SRZVWDZDïDWDNVLÈĝND QLHNWöUHUHJXï\ZHU\ğNDFML VWRVRZDQHSU]H]QDMZDĝQLHMV]H SU]HJOÈGDUNLQLHG]LDïDï\ QDMOHSLHM&]ÚĂÊ]SRQLĝV]\FK Z\UDĝHñUHJXODUQ\FKPD ]QDF]QLHEDUG]LHMU\JRU\VW\F]QH G]LDïDQLH
                
                -HGQDNZ\UDĝHQLDUHJXODUQHQLH VÈGRVNRQDïH7RQDGDOFLÈJL WHNVWRZHNWöUHPRJÈQLHE\Ê ZVWDQLHSU]HSURZDG]LÊZHU\ğNDFMLGDQ\FKDOHSU]HNDĝÈWH WHVW\QLĝHM
                
                :DUWRUöZQLHĝSDPLÚWDÊ RLVWQLHQLXZLHOXVSRVREöZ QDZ\UDĝHQLHWHJRVDPHJR ]Z\NRU]\VWDQLHPZ\UDĝHñ UHJXODUQ\FK'ODWHJRWHĝ PRĝHV]VSRW\NDÊVLÚ]LQQ\PL Z\UDĝHQLDPLUHJXODUQ\PLSU]H]QDF]RQ\PLGRZ\NRQ\ZDQLD Z\PLHQLRQ\FKSRQLĝHM]DGDñ
                
                /^\d+$/ R]QDF]DOLF]EÚ
                
                ^[ \s]+ R]QDF]D]QDNRGVWÚSXQDSRF]ÈWNXZLHUV]D
                
                /[^@]+@[^@]+/ R]QDF]DDGUHVHPDLO
                
                /^#[a-fA-F0-9]{6}$/ R]QDF]DNRORUZ\UDĝRQ\MDNRZDUWRĂÊV]HVQDVWNRZD
                
                ĵ ?ij # !>??@ABC^_`a R]QDF]DNRORUZ\UDĝRQ\MDNRZDUWRĂÊV]HVQDVWNRZD
                
                A?G^`??G^`??G^` _?G^`?G^`?G^`  R]QDF]DGDWÚZIRUPDFLHUUPPGG
                
                USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 
                
                WERYFIKACJA NIESTANDARDOWA 2VWDWQLDF]ÚĂÊVNU\SWXSU]HSURZDG]DWU]\RSHUDFMHVSUDZG]HQLD NWöUHPDMÈ]DVWRVRZDQLHZSRV]F]HJöOQ\FKHOHPHQWDFK IRUPXODU]D.DĝGDRSHUDFMDMHVW]GHğQLRZDQDZQD]ZDQHMIXQNFML 1DNROHMQ\FKVWURQDFKSR]QDV] WHWU]\IXQNFMH.DĝGD]QLFK MHVWZ\ZRï\ZDQDZGRNïDGQLH WDNLVDPVSRVöEMDNSU]HGVWDZLRQDSRQLĝHMvalidateBio() 3HïQ\NRGZ\ZRïXMÈF\WH IXQNFMHMHVWZUD]]SR]RVWDï\PL SU]\NïDGDPLGRVWÚSQ\ZZLWU\QLHLQWHUQHWRZHMSRĂZLÚFRQHM NVLÈĝFH 
                
                )81.&-$
                
                23,6
                
                validateBio()
                
                6SUDZG]HQLHF]\LQIRUPDFMHRXĝ\WNRZQLNX PDMÈPQLHMQLĝ]QDNöZ
                
                validatePassword()
                
                6SUDZG]HQLHF]\KDVïRPDSU]\QDMPQLHM ]QDNöZ
                
                validateParentsConsent()
                
                -HĝHOLXĝ\WNRZQLNPDPQLHMQLĝODW PXVLE\Ê]D]QDF]RQHSROHR]QDF]DMÈFH ]JRGÚURG]LFöZ
                
                :V]\VWNLHZ\PLHQLRQHIXQNFMH]ZUDFDMÈZDUWRĂÊtrueOXEfalse if (!validateBio()) { :\ZRïDQLHYDOLGDWH%LR MHĂOLNRQWURONDMHVWQLHSUDZLGïRZD showErrorMessage(document.getElementById(’bio’)); 2 :\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH valid.bio = false; 8DNWXDOQLHQLHRELHNWXHOHPHQWQLHSRSUDZQ\ } else { :SU]HFLZQ\PUD]LHQDVWÚSXMHXVXQLÚFLHNRPXQLNDWXREïÚG]LH removeErrorMessage(document.getElementById(’bio’)); 3 } 1
                
                1. )XQNFMDMHVWZ\ZRï\ZDQD MDNRZDUXQHNZNRQVWUXNFML if-else=RVWDïRWRSRND]DQH ZSRGUR]G]LDOHķ2JöOQH RPöZLHQLHNRGXĵMDNRNURNLRG GR 2. -HĝHOLZDUWRĂFLÈ]ZURWQÈ IXQNFMLMHVWfalseQDVWÚSXMH Z\ĂZLHWOHQLHNRPXQLNDWX REïÚG]LHDRGSRZLHGQLHMZïDĂFLZRĂFLRELHNWXvalid]RVWDMH SU]\SLVDQDZDUWRĂÊfalse
                
                3. -HĝHOLZDUWRĂFLÈ]ZURWQÈ IXQNFMLMHVWtrueNRPXQLNDW REïÚG]LHMHVWXVXZDQ\ ]RGSRZLHGQLHJRHOHPHQWX N
                
                1 Wywołanie funkcji. Czy jej wartością zwrotną jest true?
                
                2 Wywołanie funkcji: showErrorMessage() i ustawienie odpowiedniej właściwości obiektu valid
                
                 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH
                
                T 3
                
                Wywołanie funkcji: removeErrorMessage()
                
                WERYFIKACJA INFORMACJI O UŻYTKOWNIKU I HASŁA )XQNFMDvalidateBio() 1. :]PLHQQHMRQD]ZLHbio SU]HFKRZXMHHOHPHQWIRUPXODU]D]DZLHUDMÈF\LQIRUPDFMH RXĝ\WNRZQLNX
                
                2. -HĝHOLZLHONRĂÊW\FK LQIRUPDFMLZ\QRVL]QDNöZ OXEPQLHMZDUWRĂFLÈ]PLHQQHM validMHVWtrueZSU]HFLZQ\P UD]LHZDUWRĂFLÈMHVWfalse  3. -HĝHOL]PLHQQDvalid ma ZDUWRĂÊLQQÈQLĝtrueWRĮ
                
                c13/js/validation.js
                
                JAVASCRIPT
                
                1 2 3 4 5
                
                function validateBio() { var bio = document.getElementById(’bio’); 3U]HFKRZ\ZDQLHRGQLHVLHQLDGRLQIRUPDFMLRXĝ\WNRZQLNX var valid = bio.value.length