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

  • 0 0 0
  • Gefällt Ihnen dieses papier und der download? Sie können Ihre eigene PDF-Datei in wenigen Minuten kostenlos online veröffentlichen! Anmelden
Datei wird geladen, bitte warten...
Zitiervorschau

SPIS TREŚCI

Wprowadzenie

5

Rozdział 1.

ABC programowania

17

Rozdział 2.

Podstawowe instrukcje JavaScript

59

Rozdział 3.

Funkcje, metody i obiekty

91

Rozdział 4.

Decyzje i pętle

151

Rozdział 5.

Obiektowy model dokumentu

189

Rozdział 6.

Zdarzenia

249

Rozdział 7.

jQuery

299

Rozdział 8.

Ajax i JSON

373

Rozdział 9.

API

415

Rozdział 10. Obsługa błędów i debugowanie

455

Rozdział 11. Panele zawartości

493

Rozdział 12. Filtrowanie, wyszukiwanie i sortowanie

533

Rozdział 13. Usprawnienia i weryfikacja formularzy sieciowych

573

Skorowidz

635

WPROWADZENIE

']LÚNLWHMNVLÈĝFHGRZLHV]VLÚMDNPRĝQDZ\NRU]\VWDÊ ZSU]HJOÈGDUNDFK-DYD6FULSWDE\ZLWU\Q\LQWHUQHWRZHVWDï\ VLÚEDUG]LHMLQWHUDNW\ZQHLQWHUHVXMÈFHLSU]\MD]QHGODXĝ\WNRZQLNöZ3RQDGWRSR]QDV]ELEOLRWHNÚM4XHU\XïDWZLDMÈFÈ WZRU]HQLHNRGX-DYD6FULSW $E\ZSHïQLZ\NRU]\VWDÊPDWHULDïSU]HGVWDZLRQ\ZNVLÈĝFHSRZLQLHQHĂZLHG]LHÊMDNWZRU]\Ê VWURQ\LQWHUQHWRZH]Z\NRU]\VWDQLHP+70/L&663R]DW\PQLHMHVWZ\PDJDQHĝDGQHLQQH GRĂZLDGF]HQLHZ]DNUHVLHSURJUDPRZDQLD1DXNDSURJUDPRZDQLDZMÚ]\NX-DYD6FULSWREHMPXMH QDVWÚSXMÈFHNURNL

1

2

3

3R]QDQLHSHZQ\FKpodstawowych koncepcji programowaniaRUD]SRMÚÊNWöU\FK SURJUDPLĂFL-DYD6FULSW Xĝ\ZDMÈGRLFKRSLVDQLD

3R]QDQLHVDPHJRMÚ]\ND 3RGREQLHMDNZSU]\SDGNX ZV]\VWNLFKMÚ]\NöZNRQLHF]QHMHVWRSDQRZDQLHVNïDGQL LVWUXNWXU\]GDñ

3R]QDQLHsposobu stosoZDQLDMÚ]\NDSU]H]DQDOL]Ú SU]\NïDGöZXĝ\FLD-DYD6FULSW ZWZRU]RQ\FKREHFQLH ZLWU\QDFKLQWHUQHWRZ\FK

-HG\QDU]HF]SRWU]HEQDGRNRU]\VWDQLD]WHMNVLÈĝNLWRNRPSXWHU]SU]HJOÈGDUNÈLQWHUQHWRZÈRUD] HG\WRUHPWHNVWXWDNLPMDN1RWDWQLN7H[W(GLW6XEOLPH7H[W&RGDLWG

6

WPROWADZENIE

UTWORZENIE OBIEKTU ZA POMOCĄ NOTACJI LITERAŁU

1

1DSRF]ÈWNXSU]\NïDGX QDVWÚSXMHXWZRU]HQLHRELHNWX]D SRPRFÈQRWDFMLOLWHUDïX 2ELHNWQRVLQD]ZÚhotel LSU]HGVWDZLDKRWHOQuay z 40 SRNRMDPL]NWöU\FK]RVWDïR ]DUH]HUZRZDQ\FK

=DQLPGRZLHV]VLÚMDNRGF]\W\ZDÊLWZRU]\ÊNRG ZMÚ]\NX-DYD6FULSWQDMSLHUZZDUWRSR]QDÊSHZQH NOXF]RZHNRQFHSFMHSURJUDPRZDQLD=RVWDQÈRQH RPöZLRQHZWU]HFKF]ÚĂFLDFK

ABC PROGRAMOWANIA

B

C

-DNNRPSXWHU\ZNRPSRQRZXMÈ VLÚZRWDF]DMÈF\QDVĂZLDW"

-DNPRĝQDXWZRU]\ÊVNU\SW QDVWURQÚLQWHUQHWRZÈ"

A &]\PMHVWVNU\SWLMDN PRĝQDJRXWZRU]\Ê"

1DVWÚSQLH]DZDUWRĂÊVWURQ\ ]RVWDMHXDNWXDOQLRQDGDQ\PL SRFKRG]ÈF\PL]RELHNWX1D]ZD KRWHOXMHVWZ\ĂZLHWODQDSU]H] X]\VNDQLHGRVWÚSXGRZïDĂFLZRĂFLRQD]ZLHnameQDWRPLDVW OLF]EDZROQ\FKSRNRLMHVW VSUDZG]DQD]DSRPRFÈPHWRG\ checkAvailability()

c3/js/object-literal.js

JAVASCRIPT

var hotel = { name: ’Park’, rooms: 120, booked: 77, checkAvailability: function() { return this.rooms - this.booked; } };

var elName = document.getElementById(’hotelName’); elName.textContent = hotel.name;

var elName = document. getElementById(’hotelName’); elName.textContent = hotel.name;

var elRooms = document.getElementById(’rooms’); elRooms.textContent = hotel.checkAvailability();

1DWHMVWURQLHWZRU]\P\NROHMQ\RELHNW -HJRQD]ZDWRUöZQLHĝhotelDOHW\PUD]HP PRGHOSU]HGVWDZLDKRWHO]XSHïQLHLQQ\ :W\PPRPHQFLHZ\REUDěVRELHLQQÈVWURQÚ ZWHMVDPHMZLWU\QLHLQWHUQHWRZHMSRĂZLÚFRQHMSRGUöĝRP

c03/js/object-literal2.js

JAVASCRIPT

var hotel = { name: ’Quay’, rooms: 40, booked: 25, checkAvailability: function() { return this.rooms - this.booked; } };

$E\X]\VNDÊGRVWÚSGR ZïDĂFLZRĂFLRELHNWXSR MHJRQD]ZLHSRGDQRNURSNÚ DQDVWÚSQLHQD]ZÚLQWHUHVXMÈFHM QDVZïDĂFLZRĂFL

*G\RSDQXMHV]SRGVWDZ\ZNROHMQ\FKUR]G]LDïDFK]REDF]\V]MDNMÚ]\N-DYD6FULSWPRĝQD Z\NRU]\VWDÊZFHOXQDND]DQLDSU]HJOÈGDUNRPLQWHUQHWRZ\PZ\NRQ\ZDQLDSHZQ\FK]DGDñ

UTWORZENIE DALSZYCH OBIEKTÓW ZA POMOCĄ NOTACJI LITERAŁU

+RWHO3DUNMHVWZLÚNV]\PDSRNRL ]NWöU\FK]RVWDïR]DUH]HUZRZDQ\FK :NRG]LH]PLHQLï\VLÚMHG\QLHZDUWRĂFL SRV]F]HJöOQ\FKZïDĂFLZRĂFLRELHNWXhotel:

• QD]ZDKRWHOX • OLF]EDSRNRL • OLF]ED]DUH]HUZRZDQ\FKSRNRL

var elRooms = document. getElementById(’rooms’); elRooms.textContent = hotel. checkAvailability();

WYNIK

3R]RVWDïDF]ÚĂÊVWURQ\G]LDïDZGRNïDGQLH WDNLVDPVSRVöE1D]ZDKRWHOXMHVWZ\ĂZLHWODQD]Xĝ\FLHPWHJRVDPHJRNRGX0HWRGD checkAvailability()UöZQLHĝQLHXOHJD ]PLDQLHLMHVWZ\ZRï\ZDQDZGRNïDGQLHWHQ VDPVSRVöE

WYNIK

-HĝHOLZLWU\QDLQWHUQHWRZD]DZLHUDLQIRUPDFMHRKRWHOLZWHG\MHG\Q\P]PLHQQ\P DVSHNWHPEÚGÈZDUWRĂFLWU]HFKZ\PLHQLRQ\FKZïDĂFLZRĂFLRELHNWX3RQLHZDĝPRGHO KRWHOXMHVWWZRU]RQ\QDSRGVWDZLHGDQ\FK WHQVDPNRGPRĝHX]\VNDÊGRVWÚSGR LQIRUPDFMLLZ\ĂZLHWOLÊMHGODNDĝGHJRKRWHOX NWöUHJRGDQHVÈSU]HFKRZ\ZDQHZW\P VDP\PPRGHOX

3RGREQLHDE\Xĝ\ÊPHWRG\ Z\VWDUF]\SRGDÊQD]ZÚ RELHNWXNURSNÚLPHWRGÚ GRZ\ZRïDQLDQDSU]\NïDG hotel.checkAvailability() -HĝHOLPHWRGDZ\PDJD SDUDPHWUöZPRĝQDMHSRGDÊ ZQDZLDVLH SRGREQLHMDN SU]HND]\ZDQHVÈDUJXPHQW\GR IXQNFML 

18

110

ABC PROGRAMOWANIA

1DSRF]ÈWNXNDĝGHJRUR]G]LDïX]QDMGXMHVLÚwproZDG]HQLHNWöUHSU]HGVWDZLD]DJDGQLHQLDRPöZLRQH ZGDQHMF]ÚĂFLNVLÈĝNL

3U]HGVWDZLRQHSRQLĝHMGU]HZRPRGHOX'20 SRND]XMHF]ÚĂÊJïöZQÈVWURQ\]OLVWÈU]HF]\GR NXSLHQLD3RQLHZDĝQDMSLHUZNRQFHQWUXMHP\VLÚ QDX]\VNDQLXGRVWÚSXGRHOHPHQWöZGLDJUDP ]DZLHUDW\ONRZÚ]ï\HOHPHQWöZ'LDJUDP\QD NROHMQ\FKVWURQDFKEÚGÈMDVQRZVND]\ZDï\ HOHPHQW\]ZUDFDQHSU]H]]DS\WDQLHPRGHOX'20 3DPLÚWDMZÚ]ï\HOHPHQWöZWRUHSUH]HQWDFMD'20 GDQHJRHOHPHQWX 

0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( 2SHUDZV]\VWNLHZHUVMH&KURPH)LUHIR[L6DIDUL

getElementById('one')

querySelector(’selektor css’)

:\NRU]\VWXMHVNïDGQLÚVHOHNWRUD&66Z\ELHUDMÈFHJRMHGHQHOHPHQW OXEZLÚFHMHOHPHQWöZ0HWRGDWD]ZUDFDW\ONRSLHUZV]\]GRSDVRZDQ\FKHOHPHQWöZ 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK IE8, )LUHIR[6DIDUL&KURPHL2SHUD

c z y 0 < 10 ?

querySelector('li.hot')

getElementsByClassName(’klasa’)

getElementsByClassName('hot') h1

h2

ul

script

li

li

li

li

0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK IE9, )LUHIR[6DIDUL&KURPHL2SHUD .LONDZF]HĂQLHMV]\FK ZHUVMLSU]HJOÈGDUHNRIHUXMHF]ÚĂFLRZÈOXE]DZLHUDMÈFÈEïÚG\REVïXJÚ WHMPHWRG\ 

getElementsByTagName(’nazwaZnacznika’) GRUPY WĘZŁÓW ELEMENTÓW

NAJKRÓTSZA TRASA

-HĝHOLPHWRGDPRĝH]ZUöFLÊFRQDMPQLHMGZD ZÚ]ï\WRMHMZDUWRĂFLÈ]ZURWQÈ]DZV]HEÚG]LH NodeListF]\OLkolekcjaZÚ]ïöZ QDZHWZSU]\SDGNX]QDOH]LHQLDW\ONRMHGQHJRGRSDVRZDQHJR HOHPHQWX 1DVWÚSQLH]RWU]\PDQHMOLVW\WU]HED Z\EUDÊHOHPHQW]DSRPRFÈQXPHUXLQGHNVX R]QDF]DWRĝHQXPHU\UR]SRF]\QDMÈVLÚRG0, SRGREQLHMDNZNDĝGHMWDEOLF\ 

:\V]XNDQLHQDMV]\EV]HJRVSRVREXX]\VNDQLD GRVWÚSXGRHOHPHQWXQDVWURQLHSRZRGXMHĝH Xĝ\WNRZQLNRGELHUDMÈMDNRIXQNFMRQXMÈFÈVSUDZQLH LV]\ENRUHDJXMÈFÈQDMHJRG]LDïDQLD1DMNUöWV]D WUDVD]Z\NOHR]QDF]DDQDOL]ÚPLQLPDOQHMOLF]E\ ZÚ]ïöZQDGURG]HGRHOHPHQWX]NWöU\PVNU\SW PDSUDFRZDÊ1DSU]\NïDGPHWRGDgetElementById()V]\ENR]ZUöFLMHGHQHOHPHQW SRQLHZDĝ QDVWURQLHLQWHUQHWRZHMQLHSRZLQQ\]QDMGRZDÊ VLÚGZDHOHPHQW\RWDNLHMVDPHMZDUWRĂFLDWU\EXWX id :\PLHQLRQÈPHWRGÚPRĝQDMHGQDN]DVWRVRZDÊW\ONRZWHG\JG\HOHPHQWPD]GHğQLRZDQ\ DWU\EXWid

198 OBIEKTOWY MODEL DOKUMENTU

j 1 do 1 doda

czy 1 < 10?

j 1 do 0 doda

cz y 8 < 10 ?

j 1 do 8 doda

c z y 9 < 10 ?

j 1 do 9 doda

cz y 1 0 < 1

0?

METODY ZWRACAJĄCE CO NAJMNIEJ JEDEN ELEMENT (W POSTACI NODELIST) :\ELHUDHOHPHQWOXEHOHPHQW\QDSRGVWDZLHZDUWRĂFLDWU\EXWX class$E\HOHPHQWPRĝQDE\ïRZ\EUDÊ]QDF]QLN+70/PXVL ]DZLHUDÊDWU\EXWclass']LDïDQLHWHMPHWRG\MHVWV]\EV]HQLĝ querySelectorAll()

div

111

for (var i = 0; i < 10; i++) { document.write(i); }

3RELHUDMHGHQHOHPHQWQDSRGVWDZLHZDUWRĂFLMHJRDWU\EXWXid $E\HOHPHQWPRĝQDE\ïRZ\EUDÊ]QDF]QLN+70/PXVL]DZLHUDÊ DWU\EXWid

body

1DSU]\NïDGNLONDHOHPHQWöZPRĝHPLHÊWDNÈ VDPÈQD]ZÚ]QDF]QLNDDZLÚFgetElementsByTagName()]DZV]H]ZUöFLNodeList

FUNKCJE, METODY I OBIEKTY

ZAPĘTLANIE

getElementById(’id’)

=DS\WDQLDPRGHOX'20PRJÈ]ZUDFDÊW\ONRMHGHQHOHPHQWOXEWDN]ZDQ\ NodeListF]\OLNROHNFMÚZÚ]ïöZ &]DVDPL]DFKRG]LSRWU]HEDX]\VNDQLDGRVWÚSX GRMHGQHJRHOHPHQWX F]\OLIUDJPHQWXVWURQ\ SU]HFKRZ\ZDQHMSU]H]WHQHOHPHQW =NROHL ZLQQ\FKV\WXDFMDFKNRQLHF]QHMHVWZ\EUDQLH JUXS\HOHPHQWöZQDSU]\NïDGZV]\VWNLFK QDVWURQLHOXEWHĝZV]\VWNLFK

  • ZUDPDFK ZVND]DQHMOLVW\

    FUNKCJE, METODY I OBIEKTY

    6WURQ\informacyjneSU]HGVWDZLDMÈNOXF]RZH HOHPHQW\NRGX-DYD6FULSW.RG+70/MHVWZNRORU]H QLHELHVNLP&66ĽZNRORU]HUöĝRZ\PQDWRPLDVW -DYD6FULSWĽZNRORU]H]LHORQ\P

    METODY ZWRACAJĄCE JEDEN WĘZEŁ ELEMENTU

    UZYSKANIE DOSTĘPU DO ELEMENTÓW

    -HĝHOLPDV]GZDRELHNW\QDVWURQLHWZRU]\V] MH]DSRPRFÈWHMVDPHMQRWDFMLDOHSU]HFKRZXMHV]Z]PLHQQ\FKRUöĝQ\FKQD]ZDFK

    wyświetl na stronie

    wyświetl na stronie

    wyświetl na stronie

    0

    1

    8

    9

    POCZĄTEK i = 0

    :\ELHUDZV]\VWNLHHOHPHQW\QDVWURQLHSRVLDGDMÈFH]QDF]QLN RSRGDQHMQD]ZLH']LDïDQLHWHMPHWRG\MHVWV]\EV]HQLĝquerySelectorAll() .LONDZF]HĂQLHMV]\FKZHUVMLSU]HJOÈGDUHNRIHUXMH F]ÚĂFLRZÈOXE]DZLHUDMÈFÈEïÚG\REVïXJÚWHMPHWRG\  0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK IE6+, )LUHIR[6DIDUL&KURPHL2SHUD

    wyświetl na stronie

    i=1

    i=2

    i=8

    i=9

    i = 10

    END

    getElementsByTagName('li')

    querySelectorAll(’selektor css’)

    8ĝ\ZDVNïDGQLVHOHNWRUD&66ZFHOXZ\EUDQLDMHGQHJRHOHPHQWXOXE ZLÚNV]HMOLF]E\HOHPHQWöZDQDVWÚSQLH]ZUDFDZV]\VWNLHHOHPHQW\ GRSDVRZDQH 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK IE8, )LUHIR[6DIDUL&KURPHL2SHUD

    W trakcie pierwszej iteracji SÚWOL]PLHQQDi OLF]QLN PD SU]\SLVDQÈZDUWRĂÊ0.

    querySelectorAll('li.hot')

    OBIEKTOWY MODEL DOKUMENTU 199

    6WURQ\]informacjami dodatkowymiPDMÈELDïH WïRLZ\MDĂQLDMÈNRQWHNVWWHPDWöZRPöZLRQ\FK ZGDQ\PUR]G]LDOH

    178

    3RGF]DVNDĝGHMNROHMQHM LWHUDFMLQDVWÚSXMHVSUDZG]HQLH ZDUXQNXF]\]PLHQQDiPD ZDUWRĂÊPQLHMV]ÈQLĝ10.

    1DVWÚSQLHZ\NRQ\ZDQ\MHVW NRGZHZQÈWU]SÚWOL SROHFHQLD ]QDMGXMÈFHVLÚZQDZLDVLH NODPURZ\P 

    '(& 18) { JUHHWLQJ ij'REU\ZLHF]öUij } else if (hourNow > 12) { JUHHWLQJ ij']LHñGREU\ij } else if (hourNow > 0) { JUHHWLQJ ij']LHñGREU\ij } else { greeting = ’Witamy!’; } document.write(’’ + greeting + ’’);

    1LHSU]HMPXMVLÚMHĂOLNRG VNU\SWXMHVWGOD&LHELHQLH ]UR]XPLDï\:W\PPRPHQFLH NRQFHQWUXMHP\VLÚQDWZRU]HQLX VNU\SWXLMHJRGRïÈF]HQLXGR VWURQ\+70/ 2  1DVWURQLHhttp://www.javascriptbook.com/]QDMG]LHV]VW\OH &66LLOXVWUDFMHGRRPDZLDQHJR SU]\NïDGX

    $E\]DFKRZDÊRUJDQL]DFMÚ SOLNöZSOLNLDUNXV]\VW\OöZ VÈEDUG]RF]ÚVWRXPLHV]F]DQH ZNDWDORJXRQD]ZLHstylesOXE cssQDWRPLDVWSOLNL-DYD6FULSW ZNDWDORJXRQD]ZLHscripts javascriptOXEjs:RPDZLD Q\PSU]\NïDG]LHQRZ\SOLN ]DSLVXMHP\ZNDWDORJXjs 52

    ABC PROGRAMOWANIA

    1DU\VXQNXPRĝHV]]REDF]\ÊVWUXNWXUÚSOLNöZMDNÈRWU]\PDV] SR]UHDOL]RZDQLXRPDZLDQHJRWXWDMSU]\NïDGX=DZV]HWUDNWXMQD]Z\ SOLNöZWDNMDNE\ZLHONRĂÊOLWHUPLDïDZQLFK]QDF]HQLH

    DOŁĄCZENIE PLIKU JAVASCRIPT NA STRONIE HTML .LHG\QDVWURQLHLQWHUQHWRZHMFKFHV]Xĝ\ÊNRGX-DYD6FULSWPXVLV] Z\NRU]\VWDÊHOHPHQW+70/ QDMOHSV]\P UR]ZLÈ]DQLHPMHVWXPLHV]F]DQLHVNU\SWöZZRGG]LHOQ\FKSOLNDFK 

    Constructive & Co.

    Constructive & Co.

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



    7  7HUD]RWZöU]SOLN+70/ ZHG\WRU]HXVXñDWU\EXWsrc ]H]QDF]QLNDRWZLHUDMÈFHJR GRGDMQRZ\NRGSR ND]DQ\SROHZHMVWURQLH$WU\EXW srcQLHMHVWGïXĝHMSRWU]HEQ\ SRQLHZDĝNRG-DYD6FULSW ]QDMGXMHVLÚQDVWURQLH+70/

    -DNZVSRPQLDQRZSRGUR] G]LDOHķ-DNSRïÈF]\Ê+70/ &66L-DYD6FULSW"ĵQDMOHSLHM MHVWXQLNDÊXPLHV]F]DQLDNRGX -DYD6FULSWQDVWURQDFK+70/ 7DNLHUR]ZLÈ]DQLHSRND]DQR WXWDMSRQLHZDĝPRĝHV]VLÚ VSRWNDÊ]WÈWHFKQLNÈ

    8  2WZöU]SOLN+70/ ZSU]HJOÈGDUFHLQWHUQHWRZHM 1DVWURQLH]RVWDïRZ\ĂZLHWORQH SRZLWDQLH

    -DNSHZQLH]JDGïHĂSROHFHQLH document.write() zapisuje ]DZDUWRĂÊZRELHNFLHdocument VWURQDLQWHUQHWRZD 7RMHVW EDUG]RSURVW\VSRVöEGRGDZD QLD]DZDUWRĂFLQDVWURQLHFKRÊ QLH]DZV]HQDMOHSV]\:UR] G]LDOHEÚGÈSU]HGVWDZLRQH UöĝQHVSRVRE\XDNWXDOQLDQLD ]DZDUWRĂFLVWURQ\ ABC PROGRAMOWANIA

    55

    JAK UŻYWAĆ OBIEKTÓW I METOD? 3U]HGVWDZLRQ\SRQLĝHMMHGHQZLHUV]NRGX-DYD6FULSWSRND]XMHMDNXĝ\ZDÊ RELHNWöZLPHWRG3URJUDPLĂFLQD]\ZDMÈWRZ\ZRïDQLHPPHWRG\RELHNWX

    2ELHNWdocumentSU]HGVWDZLD FDïÈVWURQÚLQWHUQHWRZÈ :V]\VWNLHSU]HJOÈGDUNLLQWHUQH WRZHLPSOHPHQWXMÈWHQRELHNW LPRĝQDJRZ\NRU]\VW\ZDÊSR SURVWXSRGDMÈFMHJRQD]ZÚ OBIEKT

    0HWRGDwrite()RELHNWXdocumentSR]ZDODQDXPLHV]F]HQLH QRZHM]DZDUWRĂFLQDVWURQLH ZPLHMVFXXĝ\FLDHOHPHQWX

    WYNIK

    8ZDJD,VWQLHMHZLHOHVSRVREöZXPLHV]F]DQLD]DZDUWRĂFLQDVWURQLH LZLHOHPLHMVFZNWöU\FKPRĝQDXPLHĂFLÊVNU\SW:DG\L]DOHW\ SRV]F]HJöOQ\FKWHFKQLNEÚGÈRPöZLRQHZUR]G]LDOHZSRGUR]G]LDOHķ3RUöZQDQLHWHFKQLNĽXDNWXDOQLHQLH]DZDUWRĂFL+70/ĵ 3U]HGVWDZLRQDWXWDMWHFKQLNDQLHG]LDïDZSU]HJOÈGDUFH,(

    ZXMHOLF]EÚOLWHU]DPöZLRQ\FKSU]H]NOLHQWD zmienna totalSU]HFKRZXMH FDïNRZLW\NRV]W]DPöZLRQ\FK liter.

    =ZUöÊXZDJÚĝHOLF]E\QLHVÈ XMPRZDQHZ]QDNLF\WRZDQLD Gdy zmiennej zostanie przypiVDQDZDUWRĂÊQD]Z\]PLHQQHM PRĝQDXĝ\ZDÊZFHOXSU]HGVWDZLHQLDWHMZDUWRĂFL SRGREQLH MDNPDWRPLHMVFHZDOJHEU]H  :RPDZLDQ\PSU]\NïDG]LH NRV]WFDïNRZLW\MHVWREOLF]DQ\ SU]H]SRPQRĝHQLHFHQ\MHGQHM OLWHU\SU]H]OLF]EÚOLWHU]DPöZLRQ\FKSU]H]Xĝ\WNRZQLND 8PLHV]F]HQLHPZ\QLNXQD VWURQLH]DMPXMÈVLÚGZD RVWDWQLHSROHFHQLD6]F]HJöïRZHRPöZLHQLHWHMWHFKQLNL ]QDMG]LHV]ZUR]G]LDOH ZSRGUR]G]LDïDFKķ0HWRG\ Z\ELHUDMÈFHSRV]F]HJöOQH HOHPHQW\ĵLķ8]\VNDQLHGRVWÚSX i uaktualnienie tekstu za SRPRFÈZïDĂFLZRĂFLWH[W&RQWHQW LLQQHU7H[W ĵ3LHUZV]H ]Z\PLHQLRQ\FKSROHFHñZ\V]XNXMHHOHPHQWNWöUHJRDWU\EXW idPDZDUWRĂÊcost. Natomiast GUXJLH]DVWÚSXMH]DZDUWRĂÊWHJR HOHPHQWXQRZÈ

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    69

    UŻYCIE ZMIENNEJ DO PRZECHOWYWANIA CIĄGU TEKSTOWEGO 3U]H]PRPHQWVNRQFHQWUXMHP\VLÚQD SLHUZV]\FKF]WHUHFKZLHUV]DFKNRGX -DYD6FULSW=DGHNODURZDQRZQLFKGZLH ]PLHQQH username i message SU]H]QDF]RQH GRSU]HFKRZ\ZDQLDFLÈJöZWHNVWRZ\FK QD]ZDXĝ\WNRZQLNDRUD]Z\ĂZLHWODQ\PX NRPXQLNDW  .RGRGSRZLHG]LDOQ\]DXDNWXDOQLHQLHVWURQ\ RVWDWQLHF]WHU\ZLHUV]H EÚG]LHZSHïQL RPöZLRQ\ZUR]G]LDOH.RGWHQSRELHUD GZDHOHPHQW\QDSRGVWDZLHZDUWRĂFLLFK DWU\EXWöZid7HNVWZHOHPHQWDFKEÚG]LH XDNWXDOQLRQ\ZDUWRĂFLDPLSU]HFKRZ\ZDQ\PL Z]DGHNODURZDQ\FKZF]HĂQLHM]PLHQQ\FK =ZUöÊXZDJÚQDVSRVöEXMÚFLDFLÈJX WHNVWRZHJRZ]QDNLF\WRZDQLD0RJÈWRE\Ê DSRVWURI\OXEFXG]\VïöZDOH]QDNLRWZLHUDMÈF\L]DP\NDMÈF\PXV]ÈE\ÊWDNLHVDPH -HĝHOL]DF]QLHV]RGDSRVWURIXQDNRñFXWDNĝH PXVLV]XPLHĂFLÊDSRVWURI7RVDPRGRW\F]\ FXG]\VïRZX ”witaj” ’witaj’

    ”witaj’ ’witaj”

    =QDNLF\WRZDQLDPXV]ÈE\Ê]Z\NïHQLH GUXNDUVNLH “ ” ’ ’

    “” ‘’

    &LÈJLWHNVWRZH]DZV]HPXV]ÈE\Ê]DSLVDQH ZMHGQ\PZLHUV]X ij=DSR]QDMVLÚ]QDV]\PDVRUW\PHQWHPij ij=DSR]QDMVLÚ z naszym nowym asortymentem’

    70

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    c02/js/string-variable.js

    JAVASCRIPT

    var username; var message; username = ’Marta’; PHVVDJH ij=DSR]QDMVLÚ]QDV]\PDVRUW\PHQWHPij var elName = document.getElementById(’name’); elName.textContent = username; var elNote = document.getElementById(’note’); elNote.textContent = message; c02/string-variable.html

    HTML

    (OGHUĠRZHU

    Witaj, przyjacielu! 5R]HMU]\MVLÚ

    WYNIK

    &]DVDPL]DFKRG]LSRWU]HEDXĝ\FLD DSRVWURIXOXEFXG]\VïRZXZHZQÈWU] FLÈJXWHNVWRZHJR 3RQLHZDĝFLÈJWHNVWRZ\PRĝHE\Ê XMÚW\ZDSRVWURI\OXEFXG]\VïöZWR MHĂOLFKFHV]ZW\PFLÈJXXĝ\Ê]QDNX FXG]\VïRZXXMPLMFDï\FLÈJWHNVWRZ\ ZDSRVWURI\ 3RGREQLHMHĂOLFKFHV]Xĝ\ÊDSRVWURIX ZFLÈJXWHNVWRZ\PFDï\FLÈJ WHNVWRZ\XMPLMZFXG]\VïöZMDN SRND]DQRZWU]HFLPZLHUV]XRPDZLDQHJRSU]\NïDGX ,VWQLHMHUöZQLHĝWHFKQLNDSROHJDMÈFD QDXĝ\FLXV\PEROLVSHFMDOQ\FK. Polega ona na umieszczeniu XNRĂQLND SU]HG]QDNLHPF\WRZDQLDZHZQÈWU] FLÈJXWHNVWRZHJRMDNSRND]DQR ZF]ZDUW\PZLHUV]XRPDZLDQHJR SU]\NïDGX8NRĂQLNLQIRUPXMHLQWHUSUHWHUĝH]QDN]QDMGXMÈF\VLÚSRQLP MHVWF]ÚĂFLÈFLÈJXWHNVWRZHJRDQLH R]QDF]HQLHPMHJRNRñFD 7HFKQLNLSR]ZDODMÈFHQDXPLHV]F]DQLH ]DZDUWRĂFLQDVWURQLHLQWHUQHWRZHM EÚGÈSU]HGVWDZLRQHZUR]G]LDOH :RPDZLDQ\PSU]\NïDG]LHZ\NRU]\VWDOLĂP\ZïDĂFLZRĂÊRQD]ZLH innerHTMLZFHOXGRGDQLDNRGX +70/QDVWURQLH:SHZQ\FKV\WXDFMDFKXĝ\FLHZ\PLHQLRQHMZïDĂFLZRĂFL PRĝHE\ÊU\]\NRZQHRF]\PGRZLHV] VLÚZUR]G]LDOHZSRGUR]G]LDïDFK ķ$WDNLW\SX;66ĵķ2FKURQDSU]HG DWDNDPLW\SX;66ĵķ;66ĽZHU\ğNDFMDLV]DEORQ\ĵķ;66ĽXQLHV]NRGOLZLHQLHLNRQWUROD]QDF]QLNöZĵ PODSTAWOWE INSTRUKCJE JAVASCRIPT

    71

    UŻYCIE ZMIENNEJ DO PRZECHOWYWANIA WARTOŚCI BOOLOWSKIEJ :SUDZG]LH]PLHQQDERRORZVNDPRĝH SU]HFKRZ\ZDÊMHG\QLHZDUWRĂFLtrue lub falseDOHWHQW\SGDQ\FKMHVWEDUG]R Xĝ\WHF]Q\ :SU]\NïDG]LHSRSUDZHMVWURQLHZDUWRĂFL true i falseVÈXĝ\ZDQHZDWU\EXWDFK classHOHPHQWöZ+70/:DUWRĂFLWH SRZRGXMÈSU]\SLVDQLHUöĝQ\FKNODV&66 trueZ\ĂZLHWODķSWDV]NDĵQDWRPLDVWfalse NU]\ĝ\N 6SRVREDPLXVWDZLDQLDDWU\EXWX class]DMPLHP\VLÚZUR]G]LDOH  5]DGNR]GDU]DVLÚSRWU]HEDZ\ĂZLHWOHQLD VïöZtrue lub false na stronie internetoZHMDOHRPDZLDQ\WXWDMW\SGDQ\FKPD GZDSRSXODUQH]DVWRVRZDQLD

    c02/js/boolean-variable.js

    JAVASCRIPT

    var inStock; var shipping; inStock = true; shipping = false; var elStock = document. getElementById(’stock’); elStock.className = inStock; var elShip = document. getElementById(’shipping’); elShip.className = shipping;

    c02/boolean-variable.html

    3LHUZV]HW\SERRORZVNLMHVWVWRVRZDQ\ JG\ZDUWRĂFLÈPRĝHE\ÊW\ONRtrue lub false7HZDUWRĂFLPRĝQDSRWUDNWRZDÊ jako ZïÈF]RQ\ i Z\ïÈF]RQ\ lub 0 i 1true RGSRZLDGDZïÈF]RQ\ lub 1, natomiast falseRGSRZLDGDZ\ïÈF]RQ\ lub 0. 'UXJLHW\SERRORZVNLMHVWXĝ\ZDQ\NLHG\ NRGPRĝHPLHÊZLÚFHMQLĝW\ONRMHGQÈ ĂFLHĝNÚG]LDïDQLD3DPLÚWDMĝHZ]DOHĝQRĂFLRGRNROLF]QRĂFLPRĝQDZ\NRQ\ZDÊ LQQ\NRGMDN]RVWDïRWRSRND]DQHQD GLDJUDPDFKZNVLÈĝFH

    N

    test został wykonany

    T

    ¥FLHĝNDZ\NRQ\ZDQLDNRGX]DOHĝ\ RGZ\QLNXWHVWXOXEZDUXQNX

    72

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    HTML

    (OGHUĠRZHU

    'RVWÚSQ\ :\VïDQ\



    88

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    PRZYKŁAD PODSTAWOWE INSTRUKCJE JAVASCRIPT c02/js/example.js

    JAVASCRIPT

    8WZRU]HQLH]PLHQQ\FKGRREVïXJLNRPXQLNDWXSRZLWDQLD var greeting = ’Witaj, ’; var name = ’Janku’; YDUPHVVDJH ijSURV]ÚVSUDZGě]DPöZLHQLHij 3RïÈF]HQLHSRZ\ĝV]\FK]PLHQQ\FKZFHOXXWZRU]HQLDRVWDWHF]QHJRNRPXQLNDWX var welcome = greeting + name + message; 8WZRU]HQLH]PLHQQ\FKGRREVïXJLV]F]HJöïöZ]ZLÈ]DQ\FK]WDEOLF]NÈ var sign = ’Montague House’; var tiles = sign.length; var subTotal = tiles * 5; var shipping = 7; var grandTotal = subTotal + shipping; 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWJUHHWLQJ var el = document.getElementById(’greeting’); =DVWÈSLHQLHZDUWRĂFLWHJRHOHPHQWXVSHUVRQDOL]RZDQ\PNRPXQLNDWHPSRZLWDQLD el.textContent = welcome; 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWXVHU6LJQDQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elSign = document.getElementById(’userSign’); elSign.textContent = sign; 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWWLOHVDQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elTiles = document.getElementById(’tiles’); elTiles.textContent = tiles; 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWVXE7RWDODQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elSubTotal = document.getElementById(’subTotal’); HO6XE7RWDOWH[W&RQWHQW VXE7RWDOij]ïij 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWVKLSSLQJDQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elSubTotal = document.getElementById(’shipping’); HO6XE7RWDOWH[W&RQWHQW VKLSSLQJij]ïij 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWJUDQG7RWDODQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elGrandTotal = document.getElementById(’grandTotal’); HO*UDQG7RWDOWH[W&RQWHQW JUDQG7RWDOij]ïij

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    89

    PODSUMOWANIE PODSTAWOWE INSTRUKCJE JAVASCRIPT f 6NU\SWVNïDGDVLÚ]VHULLSROHFHñ]NWöU\FKNDĝGHSU]\SRPLQD NURNZSU]HSLVLHNXOLQDUQ\P f 6NU\SW]DZLHUDEDUG]RGRNïDGQHLQVWUXNFMH1DSU]\NïDG QDND]XMH]DSDPLÚWDQLHZDUWRĂFLSU]HGSU]HSURZDG]HQLHP REOLF]Hñ]MHMXĝ\FLHP f =PLHQQHVïXĝÈGRW\PF]DVRZHJRSU]HFKRZ\ZDQLDGDQ\FK Z\NRU]\VW\ZDQ\FKZVNU\SFLH f 7DEOLFDWR]PLHQQDVSHFMDOQHJRW\SXĽPRĝHSU]HFKRZ\ZDÊ ZLHOHHOHPHQWöZSRZLÈ]DQ\FK]HVREÈGDQ\FK f -DYD6FULSWUR]UöĝQLDZDUWRĂFLOLF]ERZH ļ FLÈJLWHNVWRZH WHNVW RUD]ZDUWRĂFLERRORZVNLH true i false  f 1DSRGVWDZLHZ\UDĝHQLDMHVWREOLF]DQDMHGQDZDUWRĂÊ f 3RGF]DVREOLF]DQLDZDUWRĂFLZ\UDĝHQLDRSLHUDMÈVLÚ QDRSHUDWRUDFK

    90

    PODSTAWOWE INSTRUKCJE JAVASCRIPT

    3

    FUNKCJE, METODY I OBIEKTY

    3U]HJOÈGDUNDLQWHUQHWRZDZ\PDJDEDUG]RV]F]HJöïRZ\FK LQVWUXNFMLGRW\F]ÈF\FKWHJRFRPDE\ÊSU]H]QLÈ]URELRQH 'ODWHJRWHĝVNRPSOLNRZDQHVNU\SW\PRJÈVNïDGDÊVLÚ]VHWHN DQDZHWW\VLÚF\ ZLHUV]\NRGX'RRUJDQL]RZDQLDNRGX SURJUDPLĂFLXĝ\ZDMÈIXQNFMLPHWRGLRELHNWöZ7HQUR]G]LDï ]RVWDïSRG]LHORQ\QDWU]\F]ÚĂFLSRĂZLÚFRQHSRV]F]HJöOQ\P ]DJDGQLHQLRP

    92

    FUNKCJE I METODY

    OBIEKTY

    OBIEKTY WBUDOWANE

    )XQNFMDVNïDGDVLÚ]VHULL SROHFHñ]JUXSRZDQ\FK]H VREÈLSU]H]QDF]RQ\FKGR Z\NRQDQLDRNUHĂORQHJR]DGDQLD0HWRGDWRIXQNFMDDOH XWZRU]RQDZHZQÈWU]RELHNWX LVWDQRZLÈFDMHJRF]ÚĂÊ

    :UR]G]LDOHGRZLHG]LDïHĂ VLÚĝHSURJUDPLĂFLXĝ\ZDMÈ RELHNWöZDE\WZRU]\Ê]Z\NRU]\VWDQLHPGDQ\FKPRGHOH SU]HGPLRWöZ]U]HF]\ZLVWRĂFL2ELHNW\]DZLHUDMÈ ZïDĂFLZRĂFLLPHWRG\ :W\PUR]G]LDOH]REDF]\V] MDNWZRU]\ÊZïDVQHRELHNW\ ZMÚ]\NX-DYD6FULSW

    3U]HJOÈGDUNDLQWHUQHWRZD MHVWGRVWDUF]DQDZUD] ]]HVWDZHPRELHNWöZ G]LDïDMÈF\FKZFKDUDNWHU]H ]ELRUXQDU]ÚG]LRZHJR SU]H]QDF]RQHJRGRWZRU]HQLDLQWHUDNW\ZQ\FKVWURQ LQWHUQHWRZ\FK:W\PUR]G]LDOHSR]QDV]SHZQÈOLF]EÚ ZEXGRZDQ\FKRELHNWöZ NWöUHEÚG]LHV]QDSRW\NDï ZSU]\NïDGDFKRPDZLDQ\FK ZWHMNVLÈĝFH

    FUNKCJE, METODY I OBIEKTY

    FUNKCJE, METODY I OBIEKTY

    93

    CO TO JEST FUNKCJA? )XQNFMDSR]ZDODQD]JUXSRZDQLHVHULLSROHFHñRGSRZLHG]LDOQ\FK ]DZ\NRQDQLHRNUHĂORQHJR]DGDQLD-HĝHOLZUöĝQ\FKF]ÚĂFLDFKVNU\SWX F]ÚVWRMHVWZ\NRQ\ZDQHWRVDPR]DGDQLHWRPRĝQDXĝ\ÊIXQNFML ]DPLDVWSRZWDU]DÊWHQVDP]HVWDZSROHFHñ  *UXSRZDQLHSROHFHñMHVW QLH]EÚGQHZFHOXXG]LHOHQLD RGSRZLHG]LQDS\WDQLHOXE Z\NRQDQLH]DGDQLDSRPDJDMÈFHJRZRUJDQL]DFMLNRGX &RZLÚFHMSROHFHQLDIXQNFML QLH]DZV]HVÈZ\NRQ\ZDQH SRGF]DVZF]\W\ZDQLDVWURQ\ DZLÚFIXQNFMDSRWU]HEXMH VSRVREXQDprzechowywanie NURNöZQLH]EÚGQ\FKGRZ\NRQDQLDGDQHJR]DGDQLD6NU\SW PRĝHSöěQLHMQDND]DÊIXQNFML Z\NRQDQLHZV]\VWNLFKNURNöZ JG\EÚG]LHWRNRQLHF]QH1D SU]\NïDG]DGDQLHZVNU\SFLH PRĝHE\ÊZ\NRQ\ZDQHW\ONR ZWHG\JG\Xĝ\WNRZQLNNOLNQLH RNUHĂORQ\HOHPHQWQDVWURQLH -HĝHOLFKFHV]]DFKRZDÊ PRĝOLZRĂÊZ\ZRïDQLDIXQNFML ZSU]\V]ïRĂFLWRPXVLV]QDGDÊ MHMQD]ZÚ1D]ZDWDSRZLQQD RSLV\ZDÊ]DGDQLHZ\NRQ\ZDQH SU]H]IXQNFMÚ.LHG\QDND]XMHV] Z\NRQDQLHGDQHJR]DGDQLDWR MHVWWRZ\ZRïDQLHIXQNFML

    94

    FUNKCJE, METODY I OBIEKTY

    .URNLZ\NRQ\ZDQHSU]H] IXQNFMÚZFHOXZ\NRQDQLD NRQNUHWQHJR]DGDQLDVÈ ]GHğQLRZDQHZEORNXNRGX =SRSU]HGQLHJRUR]G]LDïX SUDZGRSRGREQLHSDPLÚWDV]ĝH EORNNRGXVNïDGDVLÚ]MHGQHJR SROHFHQLDOXEZLÚNV]HMOLF]E\ SROHFHñXPLHV]F]RQ\FKZQDZLDVLHNODPURZ\P ,QDF]HMQLĝ MHVWZSU]\SDGNXSROHFHQLD SRQDZLDVLHNODPURZ\PQLH XPLHV]F]DVLÚĂUHGQLND  :FHOXZ\NRQDQLDGDQHJR ]DGDQLDQLHNWöUHIXQNFMH PXV]ÈRWU]\PDÊLQIRUPDFMH GRGDWNRZH1DSU]\NïDG IXQNFMDREOLF]DMÈFDSROH SURVWRNÈWDPXVL]QDÊMHJR GïXJRĂÊLV]HURNRĂÊ)UDJPHQW\ LQIRUPDFMLSU]HND]\ZDQHIXQNFML VÈQD]\ZDQHSDUDPHWUDPL .LHG\WZRU]\V]IXQNFMÚ LRF]HNXMHV]RGQLHMRWU]\PDQLD RGSRZLHG]LRGSRZLHGěWDMHVW RNUHĂODQDPLDQHPZDUWRĂFL ]ZURWQHM

    3RSUDZHMVWURQLHSU]HGVWDZLRQRSU]\NïDGIXQNFMLZSOLNX -DYD6FULSW)XQNFMDWDQRVL QD]ZÚupdateMessage() 1LHSU]HMPXMVLÚMHĂOLVNïDGQLD SU]\NïDGXSRND]DQHJRSR SUDZHMVWURQLHMHVWGOD&LHELH QLH]UR]XPLDïD1DNROHMQ\FK VWURQDFK]REDF]\V]MDNWZRU]\Ê LZ\NRU]\VW\ZDÊIXQNFMH 3DPLÚWDMĝHMÚ]\NLSURJUDPRZDQLDEDUG]RF]ÚVWRVÈRSDUWH QDSDUDFKQD]ZDZDUWRĂÊ 2PDZLDQDIXQNFMDPDQD]ZÚ updateMessageDMHMZDUWRĂFLÈ MHVWEORNNRGX ]DZLHUDSROHFHQLD *G\IXQNFMD]RVWDQLH Z\ZRïDQD]DSRĂUHGQLFWZHP MHMQD]Z\QDVWÚSXMHZ\NRQDQLH ]GHğQLRZDQ\FKZQLHMSROHFHñ ,VWQLHMÈUöZQLHĝIXQNFMHDQRQLPRZH1LHSRVLDGDMÈQD]Z\ DW\PVDP\PQLHPRJÈE\Ê Z\ZRïDQH'ODWHJRWHĝZ\NRQDQLHWDNLHMIXQNFMLQDVWÚSXMH WXĝSRW\PMDNQDWUDğQDQLÈ LQWHUSUHWHU

    PROSTA FUNKCJA :RPDZLDQ\PSU]\NïDG]LH Xĝ\WNRZQLNRZL]RVWDMHZ\ĂZLHWORQ\NRPXQLNDWQDJöU]H VWURQ\7HQNRPXQLNDW]QDMGXMH VLÚZHOHPHQFLH+70/NWöUHJR ZDUWRĂFLÈDWU\EXWXidMHVW message7UHĂÊNRPXQLNDWX EÚG]LHPRG\ğNRZDQD]Z\NRU]\VWDQLHPNRGX-DYD6FULSW

    3U]HG]DP\NDMÈF\P]QDF]QLNLHP]QDMGXMHVLÚ SROHFHQLHRGSRZLHG]LDOQH]D ZF]\WDQLHSOLNX-DYD6FULSW 1DSRF]ÈWNXSOLNX-DYD6FULSW PDP\]PLHQQÈXĝ\ZDQÈGR SU]HFKRZ\ZDQLDQRZHJRNRPXQLNDWXDQDVWÚSQLHIXQNFMÚ RQD]ZLHupdateMessage()

    :W\PPLHMVFXQLHPXVLV]VLÚ SU]HMPRZDÊsposobemG]LDïDQLDWHMIXQNFMLSR]QDV]JRQD NLONXNROHMQ\FKVWURQDFK:DUWR ]ZUöFLÊXZDJÚĝHZQDZLDVLH NODPURZ\P]QDMGXMÈVLÚGZD SROHFHQLD

    c03/basic-function.html

    HTML



    Prosta funkcja

    TravelWorthy Witamy w naszej witrynie!



    JAVASCRIPT

    c03/js/basic-function.js

    YDUPVJ ij=DSLV]VLÚGRQDV]HJRQHZVOHWWHUDDRWU]\PDV]UDEDWXij function updateMessage() { YDUHO GRFXPHQWJHW(OHPHQW%\,G ijPHVVDJHij  HOWH[W&RQWHQW PVJ } XSGDWH0HVVDJH 

    WYNIK

    3ROHFHQLD-DYD6FULSWXDNWXDOQLDMÈWUHĂÊNRPXQLNDWXZ\ĂZLHWODQHJRQDJöU]HVWURQ\)XQNFMDG]LDïD SRGREQLHMDNPDJD]\QĽSROHFHQLDZQDZLDVLH NODPURZ\PVÈSU]HFKRZ\ZDQHGRSöNLGRSöW\ QLHEÚG]LHV]JRWRZ\QDLFKXĝ\FLH3ROHFHQLDWH QLH]RVWDQÈZLÚFZ\NRQDQHDĝGRFKZLOLwywoïDQLDIXQNFML:\ZRïDQLHIXQNFMLQDVWÚSXMHW\ONR ZRVWDWQLPZLHUV]XVNU\SWX FUNKCJE, METODY I OBIEKTY

    95

    DEKLAROWANIE FUNKCJI :FHOXXWZRU]HQLDIXQNFMLQDGDMHV]MHMQD]ZÚDQDVWÚSQLHZQDZLDVLH NODPURZ\PXPLHV]F]DV]SROHFHQLDQLH]EÚGQHGRZ\NRQDQLD]DGDQLD SU]H]WÚIXQNFMÚ7HQSURFHVQRVLQD]ZÚGHNODUDFMLIXQNFML )XQNFMÚGHNODUXMHV]]DSRPRFÈ VïRZDNOXF]RZHJRfunction

    1DGDMHV]MHMQD]ZÚ F]DVDPL RNUHĂODQÈPLDQHPLGHQW\ğNDWRUD DSRQLHMZSURZDG]DV] QDZLDV]Z\Nï\RWZLHUDMÈF\ L]DP\NDMÈF\

    SŁOWO KLUCZOWE FUNCTION

    3ROHFHQLDRGSRZLHG]LDOQH]D Z\NRQDQLH]DGDQLDVÈXPLHV]F]RQHZEORNXNRGXF]\OL ZHZQÈWU]QDZLDVXNODPURZHJR

    NAZWA FUNKCJI

    function sayHello() { GRFXPHQWZULWH ij:LWDMij  } BLOK KODU (W NAWIASIE KLAMROWYM)

    3RZ\ĝV]DIXQNFMDMHVWQLH]Z\NOH SURVWD VNïDGDVLÚW\ONR]MHGQHJRSROHFHQLD DOHSRND]XMH VSRVöEWZRU]HQLDIXQNFML :LÚNV]RĂÊIXQNFML]NWöU\PL EÚG]LHV]VLÚVSRW\NDÊSUDZGRSRGREQLHEÚG]LH]DZLHUDïD ZLÚNV]ÈOLF]EÚSROHFHñ

    96

    FUNKCJE, METODY I OBIEKTY

    7U]HEDNRQLHF]QLH]DSDPLÚWDÊ ĝHIXQNFMHSU]HFKRZXMÈNRG Z\PDJDQ\GRZ\NRQ\ZDQLD RNUHĂORQ\FK]DGDñ6NU\SW PRĝHZGRZROQ\PPRPHQFLH QDND]DÊIXQNFMLZ\NRQDQLHMHM ]DGDQLD

    -HĝHOLZUöĝQ\FKPLHMVFDFK VNU\SWX]DFKRG]LSRWU]HED Z\NRQDQLDWHJRVDPHJR ]DGDQLDRGSRZLHGQLFKSROHFHñ QLHWU]HEDZLHORNURWQLHSRZWDU]DÊ:\VWDUF]\XPLHĂFLÊMH ZIXQNFMLDQDVWÚSQLHXĝ\ZDÊ MHMGRZ\NRQDQLDGDQHJR ]DGDQLD

    WYWOŁANIE FUNKCJI *G\PDP\]DGHNODURZDQÈIXQNFMÚZV]\VWNLHSROHFHQLDXPLHV]F]RQH ZMHMQDZLDVLHNODPURZ\PPRĝQDZ\NRQDÊ]DSRPRFÈ]DOHGZLH MHGQHJRZLHUV]DNRGX1D]\ZDP\WRZ\ZRïDQLHPIXQNFML :FHOXZ\NRQDQLDNRGX ]GHğQLRZDQHJRZIXQNFML QDOHĝ\SRGDÊQD]ZÚIXQNFML ZUD]]QDZLDVHP]Z\Nï\P

    :ĂZLHFLHSURJUDPLVWöZ PöZLP\ĝHWHQNRGVSRZRGXMH Z\ZRïDQLHIXQNFML

    7ÚVDPÈIXQNFMÚPRĝQDZ\ZRïDÊGRZROQÈOLF]EÚUD]\ZW\P VDP\PVNU\SFLH-DYD6FULSW

    NAZWA FUNKCJI

    VD\+HOOR  )XQNFMDPRĝH SU]HFKRZ\ZDÊLQVWUXNFMH SU]H]QDF]RQHGR Z\NRQDQLDRNUHĂORQHJR ]DGDQLD 2..LHG\GDQH]DGDQLH PDE\ÊZ\NRQDQH ZVNU\SFLHZ\ZRïXMHV] IXQNFMÚ )XQNFMDZ\NRQXMHNRG ]QDMGXMÈF\VLÚZEORNX NRGX

    1

    function sayHello() {

    3 GRFXPHQWZULWH ij:LWDMij 

    } .RGSU]HGZ\ZRïDQLHPIXQNFML 2 VD\+HOOR  4 .RGSRZ\ZRïDQLXIXQNFML

    &]DVDPLPRĝQD]REDF]\Ê Z\ZRïDQLHIXQNFML przedMHMGHNODUDFMÈ 7DNLHUR]ZLÈ]DQLHQDGDO G]LDïDSRQLHZDĝSU]HG Z\NRQDQLHPNDĝGHJR SROHFHQLDLQWHUSUHWHU DQDOL]XMHVNU\SWLGODWHJR ZLHĝHGHNODUDFMDGDQHM IXQNFML]QDMGXMHVLÚ ZGDOV]HMF]ÚĂFLVNU\SWX :RPDZLDQ\PSU]\NïDG]LHGHNODUXMHP\IXQNFMÚ SU]HGMHMZ\ZRïDQLHP

    3R]DNRñF]HQLX Z\NRQ\ZDQLDIXQNFML G]LDïDQLHSURJUDPXMHVW NRQW\QXRZDQHRGPLHMVFDZNWöU\PQDVWÈSLïR Z\ZRïDQLHIXQNFML

    FUNKCJE, METODY I OBIEKTY

    97

    DEKLARACJA FUNKCJI WYMAGAJĄCEJ INFORMACJI &]DVDPLIXQNFMDSRWU]HEXMHSHZQ\FKLQIRUPDFMLZFHOXZ\NRQDQLD MHM]DGDQLD:WDNLFKSU]\SDGNDFKQDOHĝ\]DGHNODURZDÊIXQNFMÚZUD] z SDUDPHWUDPL:HZQÈWU]IXQNFMLSDUDPHWU\G]LDïDMÈQD]DVDG]LHSRGREQHM GR]PLHQQ\FK

    -HĝHOLGRZ\NRQDQLD]DGDQLDIXQNFMDSRWU]HEXMH SHZQ\FKLQIRUPDFMLWRQLH]EÚGQHGDQHVÈ ZVND]\ZDQHZQDZLDVLH]QDMGXMÈF\PVLÚSR QD]ZLHIXQNFML

    (OHPHQW\Z\PLHQLRQHZQDZLDVLHVÈQD]\ZDQH SDUDPHWUDPLIXQNFML:HZQÈWU]IXQNFMLSDUDPHWU\ G]LDïDMÈSRGREQLHMDN]PLHQQH

    PARAMETRY

    function getArea(widthheight) { return width * height } WEWNĄTRZ FUNKCJI PARAMETRY SĄ UŻYWANE JAK ZMIENNE

    3RZ\ĝV]DIXQNFMDREOLF]DLSRGDMHSROHSURVWRNÈWD 'RSUDZLGïRZHJRG]LDïDQLDSRWU]HEXMHGDQ\FK WMV]HURNRĂFLLGïXJRĂFLSURVWRNÈWD:WUDNFLH NDĝGHJRZ\ZRïDQLDIXQNFMLPRĝQDSRGDÊUöĝQH ZDUWRĂFL :WHQVSRVöESRND]DQRĝHNRGPRĝHZ\NRQ\ZDÊ]DGDQLHQLHPDMÈFZF]HĂQLHMGRNïDGQ\FK LQIRUPDFMLV]F]HJöïRZ\FKRLOH]RVWDMÈVSHïQLRQH UHJXï\SR]ZDODMÈFHPXQDZ\NRQDQLH]DGDQLD

    98

    FUNKCJE, METODY I OBIEKTY

    'ODWHJRWHĝSRGF]DVSURMHNWRZDQLDVNU\SWXPXVLV] ]ZUöFLÊXZDJÚQDGDQHMDNLHPRJÈE\ÊSRWU]HEQH IXQNFMLGRZ\NRQDQLD]DGDQLD -HĝHOLSU]\MU]\V]VLÚZQÚWU]XIXQNFMLWR]DXZDĝ\V] ĝHQD]Z\SDUDPHWUöZVÈXĝ\ZDQHSRGREQLHMDN ]PLHQQH:RPDZLDQ\PSU]\NïDG]LHSDUDPHWU\ RQD]ZDFKwidthLheightSU]HGVWDZLDMÈGïXJRĂÊ LZ\VRNRĂÊĂFLDQ\

    WYWOŁANIE FUNKCJI WYMAGAJĄCEJ DANYCH 3RGF]DVZ\ZRï\ZDQLDIXQNFML]SDUDPHWUDPLZDUWRĂFLSU]H]QDF]RQH GRXĝ\FLDQDOHĝ\SRGDÊZQDZLDVLH]QDMGXMÈF\PVLÚSRQD]ZLHIXQNFML :DUWRĂFLWHVÈQD]\ZDQHDUJXPHQWDPL$UJXPHQW\PRJÈE\ÊSRGDQH ZSRVWDFLZDUWRĂFLOXE]PLHQQ\FK

    ARGUMENTY W POSTACI WARTOŚCI

    ARGUMENTY W POSTACI ZMIENNYCH

    :SU]\SDGNXSU]HGVWDZLRQHMSRQLĝHMIXQNFML OLF]ED3R]QDF]DGïXJRĂÊĂFLDQ\QDWRPLDVW5WRMHM Z\VRNRĂÊ

    3RGF]DVZ\ZRï\ZDQLDIXQNFMLQLHWU]HEDSRGDZDÊ U]HF]\ZLVW\FKZDUWRĂFLĽ]DPLDVWQLFKPRĝQD Xĝ\Ê]PLHQQ\FK'ODWHJRWHĝHIHNWSRQLĝV]HJR Z\ZRïDQLDMHVWGRNïDGQLHWDNLVDPMDNSRSU]HGQLHJR

    getArea(35 

    ZDOO:LGWK  ZDOO+HLJKW  getArea(wallWidthwallHeight 

    PARAMETRY KONTRA ARGUMENTY %DUG]RF]ÚVWRPRĝQDVSRWNDÊVLÚ]Z\PLHQQ\P Xĝ\FLHPSRMÚÊSDUDPHWULDUJXPHQWFKRÊPLÚG]\ QLPListniejeVXEWHOQDUöĝQLFD *G\GHNODURZDOLĂP\IXQNFMÚQDVWURQLHSROHZHM ]RVWDï\Xĝ\WHVïRZDwidthLheight ZQDZLDVLH ZSLHUZV]\PZLHUV]X :HZQÈWU]IXQNFMLVïRZD WHG]LDïDMÈMDN]PLHQQH:\PLHQLRQHQD]Z\VÈ SDUDPHWUDPL

    1DWHMVWURQLHZLG]LV]Z\ZRïDQLHIXQNFML getArea()DNRGZVND]XMHU]HF]\ZLVWHOLF]E\ OXE SU]HFKRZXMÈFHMH]PLHQQH NWöUHEÚGÈXĝ\WHGR SU]HSURZDG]HQLDREOLF]Hñ 7HZDUWRĂFLSU]HND]\ZDQHGRNRGX GDQHQLH]EÚGQHGRREOLF]HQLDSRZLHU]FKQLRNUHĂORQHMĂFLDQ\ VÈ QD]\ZDQHDUJXPHQWDPL

    FUNKCJE, METODY I OBIEKTY

    99

    POBRANIE POJEDYNCZEJ WARTOŚCI Z FUNKCJI 3HZQHIXQNFMH]ZUDFDMÈGDQHGRNRGXNWöU\Z\ZRïDïIXQNFMÚ 1DSU]\NïDGSRSU]HSURZDG]HQLXREOLF]HñIXQNFMD]ZUDFDZ\QLN 3U]HGVWDZLRQDSRQLĝHMIXQNFMD calculateArea()]ZUDFD GRZ\ZRïXMÈFHJRMÈNRGX REOLF]RQHSROHSURVWRNÈWD

    :HZQÈWU]IXQNFMLQDVWÚSXMH XWZRU]HQLH]PLHQQHMRQD]ZLH areaNWöUDSU]HFKRZXMH REOLF]RQHSROHSURVWRNÈWD

    6ïRZRNOXF]RZHreturnMHVW Xĝ\ZDQHZFHOX]ZUöFHQLD REOLF]RQHMZDUWRĂFLGRNRGX NWöU\Z\ZRïDïWÚIXQNFMÚ

    IXQFWLRQFDOFXODWH$UHD ZLGWKKHLJKW ^ var area ZLGWK KHLJKW return area } var wallOne FDOFXODWH$UHD   var wallTwo FDOFXODWH$UHD   3DPLÚWDMĝHSRXĝ\FLXSROHFHQLDreturnLQWHUSUHWHURSXV]F]DIXQNFMÚLSRZUDFDGRSROHFHQLDNWöUH VSRZRGRZDïRMHMZ\ZRïDQLH-HĝHOLSRSROHFHQLXreturnZIXQNFML]QDMGXMÈVLÚMDNLHNROZLHNLQQHSROHFHQLDQLHEÚGÈSU]HWZRU]RQH

    =PLHQQDwallOneSU]HFKRZXMH ZDUWRĂÊ15REOLF]RQÈSU]H] IXQNFMÚcalculateArea()

     FUNKCJE, METODY I OBIEKTY

    =NROHLwallTwoSU]HFKRZXMH ZDUWRĂÊ15REOLF]RQÈSU]H]WÚ VDPÈIXQNFMÚcalculateArea()

    :WHQVSRVöE]DGHPRQVWURZDQRĝHWDVDPDIXQNFMDPRĝH E\ÊXĝ\ZDQDGRZ\NRQDQLDW\FK VDP\FKNURNöZDOH]LQQ\PL ZDUWRĂFLDPL

    ZWROT WIELU WARTOŚCI Z FUNKCJI ']LÚNLWDEOLF\IXQNFMDPRĝH]ZUöFLÊZLÚFHMQLĝW\ONRMHGQÈZDUWRĂÊ 1DSU]\NïDGSU]HGVWDZLRQDQDWHMVWURQLHIXQNFMDREOLF]DSROH LSRMHPQRĂÊV]HĂFLDQX 3RQLĝHMSU]HGVWDZLRQRQRZÈ IXQNFMÚRQD]ZLHgetSize() 3ROHSURVWRNÈWD]RVWDMHREOLF]RQHDQDVWÚSQLHSU]HFKRZ\ZDQH Z]PLHQQHMarea

    3RREOLF]HQLXSRMHPQRĂFL ZDUWRĂÊWD]RVWDMHXPLHV]F]RQD Z]PLHQQHMRQD]ZLHvolume 2ELHZDUWRĂFLVÈQDVWÚSQLH ZVWDZLRQHGRWDEOLF\sizes

    1DNRñFXWDEOLFDsizesMHVW ]ZUDFDQDGRNRGXNWöU\Z\ZRïDïWÚIXQNFMÚ:WHQVSRVöE PRĝQDXĝ\ÊZLHOHZDUWRĂFL ]ZUöFRQ\FKSU]H]IXQNFMÚ

    function getSize ZLGWKKHLJKWGHSWK ^ var area ZLGWK KHLJKW var volume ZLGWK KHLJKW GHSWK var sizes = [areavolume@ return sizes } var areaOne = getSize  [0] var volumeOne = getSize  [1] =PLHQQDareaOneSU]HFKRZXMH SROHSURVWRNÈWDRZ\PLDUDFK QD7RREOLF]RQHSROHMHVW SLHUZV]ÈZDUWRĂFLÈZWDEOLF\ sizes

    =PLHQQDvolumeOneSU]HFKRZXMHSRMHPQRĂÊV]HĂFLDQX RZ\PLDUDFKQDQD 2EOLF]RQDSRMHPQRĂÊMHVWGUXJÈ ZDUWRĂFLÈZWDEOLF\sizes

    FUNKCJE, METODY I OBIEKTY

    

    FUNKCJE ANONIMOWE I FUNKCJE WYRAŻENIA :\UDĝHQLHSRZRGXMHZ\JHQHURZDQLHZDUWRĂFL:\UDĝHQLHPRĝQD]DVWRVRZDÊ ZPLHMVFXZNWöU\PVSRG]LHZDQHVÈZDUWRĂFL-HĝHOLZPLHMVFXZNWöU\P SU]HJOÈGDUNDLQWHUQHWRZDRF]HNXMHZ\UDĝHQLDEÚG]LHXĝ\WDIXQNFMD QDSU]\NïDGMDNRDUJXPHQWIXQNFML WR]RVWDQLHSRWUDNWRZDQDMDNRZ\UDĝHQLH DEKLARACJA FUNKCJI

    FUNKCJA WYRAŻENIA

    'HNODUDFMDIXQNFMLSRZRGXMHXWZRU]HQLHIXQNFML NWöUÈPRĝQDSöěQLHMZ\ZRïDÊZNRG]LH7RMHVW URG]DMIXQNFML]NWöU\PLVSRW\NDïHĂVLÚGRWÈG ZNVLÈĝFH

    -HĝHOLIXQNFMÚXPLHĂFLV]ZPLHMVFXZNWöU\P LQWHUSUHWHURF]HNXMHQDZ\UDĝHQLHWREÚG]LHRQD SRWUDNWRZDQDMDNRZ\UDĝHQLH)XQNFMDWDNDMHVW X]QDZDQD]DIXQNFMÚZ\UDĝHQLD:IXQNFMLZ\UDĝHQLDQD]ZDMHVW]Z\NOHSRPLMDQD'ODWHJRWHĝ IXQNFMDSR]EDZLRQDQD]Z\MHVWQD]\ZDQDIXQNFMÈ DQRQLPRZÈ3RQLĝHMSU]HGVWDZLRQRIXQNFMÚSU]HFKRZ\ZDQÈZ]PLHQQHMRQD]ZLHarea)XQNFMD WDPRĝHE\ÊZ\ZRïDQDMDNGRZROQDLQQDIXQNFMD XWZRU]RQD]Z\NRU]\VWDQLHPGHNODUDFMLIXQNFML

    :FHOXZ\ZRïDQLDIXQNFMLZNRG]LHNRQLHF]QHMHVW QDGDQLHMHMQD]Z\ZZ\QLNXF]HJRRWU]\PDP\ QD]ZDQÈIXQNFMÚ3RQLĝHMSU]HGVWDZLRQR]DGHNODURZDQÈIXQNFMÚRQD]ZLHarea()NWöUDPRĝHE\Ê Z\ZRïDQD]DSRPRFÈMHMQD]Z\ function area(ZLGWKKHLJKW) { UHWXUQZLGWK KHLJKW }

    var area = function(ZLGWKKHLJKW) { UHWXUQZLGWK KHLJKW }

    var size = area  

    var size = area  

    -DN]REDF]\V]ZUR]G]LDOHZSRGUR]G]LDOH ķ.RQWHNVWZ\NRQ\ZDQLDLSU]HQLHVLHQLHZJöUÚĵ LQWHUSUHWHU]DZV]HZ\V]XNXMH]PLHQQHLGHNODUDFMH IXQNFMLzanimSU]HMG]LHGRNROHMQ\FKVHNFML VNU\SWXZLHUV]SRZLHUV]X2]QDF]DWRĝHIXQNFMD XWZRU]RQD]DSRPRFÈGHNODUDFMLIXQNFMLPRĝHE\Ê ZVNU\SFLHZ\ZRïDQDprzedPLHMVFHPZNWöU\P ]RVWDïD]DGHNODURZDQD :LÚFHMLQIRUPDFMLQDWHPDWSU]HWZDU]DQLD ]PLHQQ\FKLIXQNFML]QDMG]LHV]ZUR]G]LDOH RGSRGUR]G]LDïXķ.ROHMQRĂÊZ\NRQ\ZDQLDĵGR SRGUR]G]LDïXķ3R]QDMHP\]DNUHVĵZNWöU\FK SRUXV]RQR]DJDGQLHQLDGRW\F]ÈFHZ\NRQ\ZDQLD VNU\SWXL]ZLÈ]DQH]W\PQLHEH]SLHF]HñVWZD

     FUNKCJE, METODY I OBIEKTY

    :IXQNFMLZ\UDĝHQLDQLHMHVWRQDSU]HWZDU]DQD DĝGRFKZLOLJG\LQWHUSUHWHUGRWU]HGRGDQHJR SROHFHQLD2]QDF]DWREUDNPRĝOLZRĂFLZ\ZRïDQLD IXQNFMLprzedMHMZ\NU\FLHPSU]H]LQWHUSUHWHU 3RQDGWRNRGZ\NRQ\ZDQ\SU]HGZ\ZRïDQLHP IXQNFMLPRĝHPLHÊZSï\ZQD]DFKRZDQLHIXQNFML DQRQLPRZHM

    NATYCHMIAST WYKONYWANA FUNKCJA WYRAŻENIA 3U]HGVWDZLRQ\VSRVöEWZRU]HQLDIXQNFMLMHVWVWRVRZDQ\ZZLHOXV\WXDFMDFK )XQNFMHEDUG]RF]ÚVWRVÈXĝ\ZDQHZFHOX]DJZDUDQWRZDQLDĝHPLÚG]\ QD]ZDPL]PLHQQ\FKQLH]DFKRG]ÈNRQĠLNW\ PDWR]QDF]HQLHV]F]HJöOQLH ZWHG\JG\QDVWURQLHMHVWXĝ\ZDQ\FKZLHOHVNU\SWöZ  NATYCHMIAST WYKONYWANA FUNKCJA WYRAŻENIA (IIFE)

    KIEDY UŻYWAĆ FUNKCJI ANONIMOWYCH I TYPU IIFE?

    7HJRURG]DMXIXQNFMHQLHPDMÈSU]\SLVDQHMQD]Z\ =DPLDVWWHJRVÈZ\NRQ\ZDQHWXĝSRLFKRGNU\FLX SU]H]LQWHUSUHWHU

    :NVLÈĝFHSR]QDV]ZLHOHVSRVREöZXĝ\ZDQLD IXQNFMLDQRQLPRZ\FKLW\SX,,)(

    3RQLĝHMPDP\]PLHQQÈRQD]ZLHareaSU]HFKRZXMÈFÈZDUWRĂÊ]ZUöFRQÈSU]H]IXQNFMÚ DQLH SU]HFKRZXMÈFÈIXQNFMÚNWöUDPRĝHE\ÊSöěQLHM Z\ZRïDQD  var area = (function() { YDUZLGWK  YDUKHLJKW  UHWXUQZLGWK KHLJKW }() ) 2VWDWQLDSDUDQDZLDVöZ ZNRORU]H]LHORQ\P SR ]DP\NDMÈF\PQDZLDVLHNODPURZ\PNRñF]ÈF\P EORNNRGXQDND]XMHLQWHUSUHWHURZLQDW\FKPLDVWRZH Z\ZRïDQLHIXQNFML=NROHLRSHUDWRUJUXSRZDQLD ZNRORU]HUöĝRZ\P WRQDZLDVJZDUDQWXMÈF\ SRWUDNWRZDQLHFDïRĂFLMDNRZ\UDĝHQLH :IXQNFMDFKW\SX,,)(PRĝQDVLÚVSRWNDÊ ]XPLHV]F]HQLHPRVWDWQLHMSDU\QDZLDVöZpo ]DP\NDMÈF\PRSHUDWRU]HJUXSRZDQLD-HGQDN SRZV]HFKQLHSU]\MÚWÈSUDNW\NÈMHVWXPLHV]F]DQLH RVWDWQLHMSDU\QDZLDVöZprzed]DP\NDMÈF\P RSHUDWRUHPJUXSRZDQLDMDNZSRZ\ĝV]\PNRG]LH

    =QDMGXMÈRQH]DVWRVRZDQLHZNRG]LHNWöU\ SRGF]DVZ\NRQ\ZDQLDGDQHJR]DGDQLDPRĝHE\Ê XUXFKRPLRQ\W\ONRMHGHQUD]DQLHZLHORNURWQLH SU]H]LQQHIUDJPHQW\VNU\SWX)XQNFMHWHZ\NRU]\VWXMHVLÚQDSU]\NïDG

    ľMDNRDUJXPHQW\ZWUDNFLHZ\ZRï\ZDQLDIXQNFML ZFHOXREOLF]HQLDGODQLHMZDUWRĂFL 

    ľDE\SU]\SLVDÊRELHNWRZLZDUWRĂÊZïDĂFLZRĂFL ľZSURFHGXUDFKREVïXJL]GDU]HñRUD]NRPSRQHQWDFKQDVïXFKXMÈF\FK SDWU]UR]G]LDï ZFHOX Z\NRQDQLD]DGDQLDSRZ\VWÈSLHQLXGDQHJR ]GDU]HQLD

    ľDE\XQLHPRĝOLZLÊSRZVWDQLHNRQĠLNWöZPLÚG]\ GZRPDVNU\SWDPLNWöUHPRJÈXĝ\ZDÊW\FK VDP\FKQD]Z]PLHQQ\FK SDWU]SRGUR]G]LDï ķ-DNG]LDïDMÈSDPLÚÊL]PLHQQH"ĵ 

    )XQNFMHW\SX,,)(VÈXĝ\ZDQHZFKDUDNWHU]H RSDNRZDQLDGODNRGX:V]HONLH]PLHQQH]DGHNODURZDQHZIXQNFMLDQRQLPRZHMVÈHIHNW\ZQLH FKURQLRQHSU]HG]PLHQQ\PLRWDNLFKVDP\FK QD]ZDFKLSRFKRG]ÈF\PL]LQQ\FKVNU\SWöZ :LÈĝHVLÚWR]NRQFHSFMÈ]DNUHVXNWöUÈSR]QDV] QDNROHMQHMVWURQLH7RUöZQLHĝEDUG]RSRSXODUQD WHFKQLNDZELEOLRWHFHM4XHU\

    FUNKCJE, METODY I OBIEKTY 

    ZAKRES ZMIENNEJ 0LHMVFH]DGHNODURZDQLD]PLHQQHMEÚG]LHPLDïRZSï\ZQDWRJG]LHPRĝQDMHM Xĝ\ZDÊZNRG]LH-HĝHOL]PLHQQDEÚG]LH]DGHNODURZDQDZIXQNFMLWRPRĝH E\ÊXĝ\WDMHG\QLHZWHMIXQNFML7RMHVWNRQFHSFMD]DNUHVX]PLHQQHM ZMIENNE LOKALNE

    ZMIENNE GLOBALNE

    -HĝHOL]PLHQQD]RVWDQLHXWZRU]RQDZHZQÈWU] IXQNFML]DSRPRFÈVïRZDNOXF]RZHJRvar, PRĝHE\ÊXĝ\ZDQDMHG\QLHZWHMIXQNFML1RVL ZWHG\QD]ZÚ]PLHQQHMORNDOQHMOXE]PLHQQHMQD SR]LRPLHIXQNFML3RQDGWRPöZLP\ĝHPD]DNUHV ORNDOQ\OXE]DNUHVQDSR]LRPLHIXQNFML7HJR URG]DMX]PLHQQDMHVWQLHGRVWÚSQDQD]HZQÈWU] IXQNFMLZNWöUHM]RVWDïD]DGHNODURZDQD8ĝ\WD ZSRQLĝV]\PSU]\NïDG]LH]PLHQQDareaMHVW ]PLHQQÈORNDOQÈ

    -HĝHOL]PLHQQD]RVWDQLHXWZRU]RQDQD]HZQÈWU] IXQNFMLWRPRĝHE\ÊXĝ\ZDQDZGRZROQ\P PLHMVFXVNU\SWX-HVWQD]\ZDQD]PLHQQÈJOREDOQÈ LPD]DNUHVJOREDOQ\:SU]HGVWDZLRQ\PSRQLĝHM SU]\NïDG]LHwallSizeMHVW]DVWRVRZDQD]PLHQQD JOREDOQD

    ,QWHUSUHWHUWZRU]\]PLHQQHORNDOQHSRUR]SRF]ÚFLXZ\NRQ\ZDQLDIXQNFMLLXVXZDMHWXĝSR ]DNRñF]HQLXG]LDïDQLDSU]H]GDQÈIXQNFMÚ0DWR Z\PLHQLRQHSRQLĝHMLPSOLNDFMH

    ľ-HĝHOLIXQNFMD]RVWDQLHZ\ZRïDQDGZXNURWQLH ]DNDĝG\PUD]HP]PLHQQDPRĝHPLHÊLQQÈ ZDUWRĂÊ

    ľ'ZLHUöĝQHIXQNFMHPRJÈXĝ\ZDÊ]PLHQQ\FK

    RWDNLFKVDP\FKQD]ZDFKEH]REDZRVSRZRGRZDQLHNRQĠLNWXQD]Z

    =PLHQQHJOREDOQHVÈSU]HFKRZ\ZDQHZSDPLÚFL GRSöW\GRSöNLVWURQDSR]RVWDMHZF]\WDQDZSU]HJOÈGDUFHLQWHUQHWRZHM2]QDF]DWRĝH]PLHQQH JOREDOQHZ\PDJDMÈZLÚNV]HMLORĂFLSDPLÚFLQLĝ ]PLHQQHORNDOQHDSRQDGWR]ZLÚNV]DMÈU\]\NR Z\VWÈSLHQLDNRQĠLNWXQD]Z SDWU]NROHMQDVWURQD  =WHJRSRZRGXZV]ÚG]LHJG]LHW\ONRMHVWWR PRĝOLZHQDOHĝ\Xĝ\ZDÊ]PLHQQ\FKORNDOQ\FK -HĝHOL]DSRPQLV]R]DGHNODURZDQLX]PLHQQHM ]HVïRZHPNOXF]RZ\PvarWD]PLHQQDQDGDO EÚG]LHIXQNFMRQRZDïDDOH]RVWDQLHSRWUDNWRZDQD MDNR]PLHQQDglobalna WRMHVWX]QDZDQH]D]ïÈ SUDNW\NÚ 

    IXQFWLRQJHW$UHD ZLGWKKHLJKW ^ var area ZLGWK KHLJKW return area } var wallSize JHW$UHD   document.write(wallSize  ZAKRES LOKALNY (NA POZIOMIE FUNKCJI) ZAKRES GLOBALNY

     FUNKCJE, METODY I OBIEKTY

    JAK DZIAŁAJĄ PAMIĘĆ I ZMIENNE? =PLHQQHJOREDOQHXĝ\ZDMÈZLÚNV]HMLORĂFLSDPLÚFLSRQLHZDĝSU]HJOÈGDUND LQWHUQHWRZDPXVLMHSU]HFKRZ\ZDÊSU]H]FDï\RNUHVZF]\WDQLDVWURQ\LQWHUQHWRZHMZ\NRU]\VWXMÈFHMWH]PLHQQH=PLHQQHORNDOQHVÈSU]HFKRZ\ZDQH ZSDPLÚFLW\ONRZWUDNFLHZ\NRQ\ZDQLDIXQNFMLZNWöUHMMH]DGHNODURZDQR UTWORZENIE ZMIENNEJ W KODZIE

    KOLIZJE NAZW

    .DĝGDGHNODURZDQD]PLHQQDZ\PDJDSHZQHM LORĂFLSDPLÚFL,PZLÚFHM]PLHQQ\FKPXVLE\Ê SU]HFKRZ\ZDQ\FKSU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈW\PZLÚFHMSDPLÚFLZ\PDJDZ\NRQDQLH GDQHJRVNU\SWX6NU\SW\Z\PDJDMÈFHGXĝHMLORĂFL SDPLÚFLPRJÈG]LDïDÊZROQLHMFRSU]HNïDGDVLÚQD Z\GïXĝHQLHF]DVXG]LHODQLDRGSRZLHG]LXĝ\WNRZQLNRZLSU]H]VWURQÚLQWHUQHWRZÈ

    %\ÊPRĝHXZDĝDV]ĝHXQLNQLHV]NRQĠLNWXQD]Z ERSU]HFLHĝznaszZV]\VWNLHXĝ\ZDQHQD]Z\ ]PLHQQ\FK-HGQDNZZLHOXZLWU\QDFKLQWHUQHWRZ\FKVÈZ\NRU]\VW\ZDQHVNU\SW\WZRU]RQHSU]H] UöĝQHRVRE\-HĝHOLQDVWURQLH+70/]DVWRVRZDQR GZDVNU\SW\-DYD6FULSWLREDWZRU]È]PLHQQÈ JOREDOQÈRWDNLHMVDPHMQD]ZLHWRPRJÈVLÚ SRMDZLÊEïÚG\:HěSRGXZDJÚVWURQÚXĝ\ZDMÈFÈ GZöFKSRQLĝV]\FKVNU\SWöZ

    var var var var

    width  height  isWall WUXH canPaint WUXH

    =PLHQQDWRWDNQDSUDZGÚRGQLHVLHQLHGRZDUWRĂFL SU]HFKRZ\ZDQHMZSDPLÚFL7DVDPDZDUWRĂÊ PRĝHE\ÊXĝ\ZDQDSU]H]ZLHOH]PLHQQ\FK var width = 15

    

    var height = 30

    

    var isWall = true var canPaint = true

    true

    :SRZ\ĝV]\PIUDJPHQFLHNRGXZDUWRĂFL]PLHQQ\FKwidthLheightVÈSU]HFKRZ\ZDQHRGG]LHOQLHDOHWDVDPDZDUWRĂÊtruePRĝHE\ÊXĝ\ZDQD ]DUöZQRSU]H] isWallMDNLcanPaint

    2EOLF]HQLHZLHONRĂFLG]LDïNL function showPlotSize(){ var width  var height  UHWXUQij3ROH ZLGWK KHLJKW  } var msg = showArea()

    2EOLF]HQLHZLHONRĂFLRJURGX function showGardenSize() { var width  var height  UHWXUQZLGWK KHLJKW } var msg VKRZ*DUGHQ6L]H  =PLHQQHZ]DNUHVLHJOREDOQ\PZ\VWÚSXMH

    NRQĠLNWQD]Z =PLHQQHZ]DNUHVLHIXQNFMLPLÚG]\QLPLQLH

    Z\VWÚSXMHNRQĠLNWQD]Z

    FUNKCJE, METODY I OBIEKTY 

    CO TO JEST OBIEKT?

    2ELHNWWR]JUXSRZDQ\]ELöU]PLHQQ\FKLIXQNFMLSU]H]QDF]RQ\GRXWZRU]HQLD PRGHOXOXEF]HJRNROZLHNLQQHJRFRMHVW]QDQHZĂZLHFLHU]HF]\ZLVW\P :RELHNFLH]PLHQQHLIXQNFMHSU]\ELHUDMÈQRZHQD]Z\ W OBIEKCIE ZMIENNE STAJĄ SIĘ WŁAŚCIWOŚCIAMI

    W OBIEKCIE FUNKCJE STAJĄ SIĘ METODAMI

    -HĝHOL]PLHQQDMHVWF]ÚĂFLÈRELHNWXWRMHMQD]ZD MHVWZïDĂFLZRĂFLÈ:ïDĂFLZRĂFLGRVWDUF]DMÈ LQIRUPDFMHRRELHNFLHQDSU]\NïDGPRĝHWRE\Ê QD]ZDKRWHOXOXEOLF]EDGRVWÚSQ\FKZQLPSRNRL .DĝG\KRWHOPRĝHPLHÊLQQÈQD]ZÚLLQQÈOLF]EÚ GRVWÚSQ\FKSRNRL

    -HĝHOLIXQNFMDMHVWF]ÚĂFLÈRELHNWXWRQD]\ZDVLÚMÈ PHWRGÈ0HWRG\SU]HGVWDZLDMÈ]DGDQLDSRZLÈ]DQH ]GDQ\PRELHNWHP1DSU]\NïDGOLF]EÚZROQ\FK SRNRLPRĝQDVSUDZG]LÊSU]H]RGMÚFLHOLF]E\ ]DUH]HUZRZDQ\FKSRNRLRGOLF]E\ZV]\VWNLFKSRNRL GRVWÚSQ\FKZGDQ\PKRWHOX

     FUNKCJE, METODY I OBIEKTY

    3RND]DQ\SRQLĝHMRELHNWSU]HGVWDZLDKRWHO=DZLHUDSLÚÊZïDĂFLZRĂFLLMHGQÈ PHWRGÚ,QIRUPDFMHRRELHNFLHVÈXMÚWHZQDZLDVNODPURZ\LSU]HFKRZ\ZDQH Z]PLHQQHMRQD]ZLHhotel 3RGREQLHMDN]PLHQQH LQD]ZDQHIXQNFMHZïDĂFLZRĂFL LPHWRG\SRVLDGDMÈQD]ZÚRUD] ZDUWRĂÊ:RELHNFLHZVSRPQLDQDQD]ZDWRNOXF]

    2ELHNWQLHPRĝH]DZLHUDÊ GZöFKNOXF]\RWDNLHMVDPHM QD]ZLH:\QLNDWR]IDNWX ĝHNOXF]HVÈXĝ\ZDQHZFHOX X]\VNDQLDGRVWÚSXGRRGSRZLDGDMÈF\FKLPZDUWRĂFL

    :DUWRĂFLÈZïDĂFLZRĂFLPRĝH E\ÊFLÈJWHNVWRZ\OLF]ED ZDUWRĂÊERRORZVNDWDEOLFDOXE QDZHWLQQ\RELHNW:DUWRĂFLÈ PHWRG\]DZV]HMHVWIXQNFMD

    var hotel = {

     KLUCZ  WARTOŚĆ

    name: ’Quay’ rooms:  WŁAŚCIWOŚCI

    booked: 

    To są zmienne

    gym: true roomTypes: >ijWZLQijijGRXEOHijijVXLWHij@ checkAvailability: function() { UHWXUQWKLVURRPVWKLVERRNHG }

    METODA To jest funkcja

    ` 3RZ\ĝHMSU]HGVWDZLRQRRELHNWhotelZNWöU\P ]QDMG]LHV]QDVWÚSXMÈFHSDU\NOXF]ZDUWRĂÊ :’$¥&,:2¥&,

    ./8&=

    :$572¥m

    name rooms booked gym roomTypes

    FLÈJWHNVWRZ\ OLF]ED OLF]ED ZDUWRĂÊERRORZVND WDEOLFD

    3URJUDPLĂFLZ\NRU]\VWXMÈZLHOHSDUNOXF]ZDUWRĂÊ ZNRG]LH+70/PDP\DWU\EXW\EÚGÈFHSDUDPL NOXF]ZDUWRĂÊ ZNRG]LH&66PDP\QD]Z\ZïDĂFLZRĂFLLLFK ZDUWRĂFL

    ľ ľ

    =NROHLZNRG]LH-DYD6FULSW

    ľ]PLHQQDPDQD]ZÚLPRĝQDSU]\SLVDÊMHM

    ZDUWRĂÊZSRVWDFLQDSU]\NïDGFLÈJXWHNVWRZHJROLF]E\OXEZDUWRĂFLERRORZVNLHM WDEOLFDPDQD]ZÚLJUXSÚZDUWRĂFL SRV]F]HJöOQHHOHPHQW\ZWDEOLF\WRSDU\NOXF]ZDUWRĂÊ SRQLHZDĝHOHPHQWPDQXPHULQGHNVXLSU]\SLVDQÈPXZDUWRĂÊ  QD]ZDQHIXQNFMHPDMÈQD]ZÚLZDUWRĂÊ ZSRVWDFL]ELRUXSROHFHñZ\NRQ\ZDQ\FKSR Z\ZRïDQLXIXQNFML RELHNWVNïDGDVLÚ]H]ELRUXSDUQD]ZDZDUWRĂÊ FKRÊWXWDMQD]ZDMHVWRNUHĂODQDPLDQHP NOXF]D 

    checkAvailability() IXQNFMD

    ľ

    -DN]REDF]\V]QDNLONXNROHMQ\FKVWURQDFKWRMHVW W\ONRMHGHQ]GRVWÚSQ\FKVSRVREöZWZRU]HQLD RELHNWX

    ľ

    0(72'@ -HĝHOLNOXF]MHVWOLF]EÈWRZFHOXSREUDQLD ZDUWRĂFLNOXF]DWU]HEDJRXPLHĂFLÊZQDZLDVLH NZDGUDWRZ\P 2JöOQLHU]HF]XMPXMÈFWDEOLFHWRMHG\QDNRQVWUXNFMDZNWöUHMNOXF]HEÚGÈOLF]EDPL

     FUNKCJE, METODY I OBIEKTY

    8ZDJDWRSU]\SRPQLHQLHGRW\F]\VSRVREöZ SU]HFKRZ\ZDQLDGDQ\FK:WDEOLF\QLHPRĝQD SU]HFKRZ\ZDÊUHJXïZVND]XMÈF\FKVSRVREX Z\NRQDQLD]DGDQLD7HJRURG]DMXLQIRUPDFMHPRJÈ E\ÊSU]HFKRZ\ZDQHZIXQNFMLOXEZPHWRG]LH

    -HĝHOLGRVWÚSGRHOHPHQWöZFKFHV]X]\VNDÊ]DSRPRFÈQD]Z\ZïDĂFLZRĂFL OXENOXF]DWRXĝ\MRELHNWX SDPLÚWDMĝHNDĝG\NOXF]ZRELHNFLHPXVLE\Ê XQLNDOQ\ -HĝHOLNROHMQRĂÊHOHPHQWöZPD]QDF]HQLHĽXĝ\MWDEOLF\

    POSZCZEGÓLNE OBIEKTY

    WIELE OBIEKTÓW

    2ELHNW\SU]HFKRZXMÈSDU\NOXF]ZDUWRĂÊ0RJÈWR E\ÊZïDĂFLZRĂFL ]PLHQQH OXEPHWRG\ IXQNFMH 

    .LHG\]DFKRG]LSRWU]HEDXWZRU]HQLDZLHOXRELHNWöZQDWHMVDPHMVWURQLHQDOHĝ\Xĝ\ÊNRQVWUXNWRUD ZFHOXGRVWDUF]HQLDV]DEORQXRELHNWX

    :SU]HFLZLHñVWZLHGRWDEOLF\NROHMQRĂÊSDUQLHPD ]QDF]HQLD'RVWÚSGRZDUWRĂFLRGE\ZDVLÚSU]H] MHMNOXF] :ïDĂFLZRĂFLLPHWRG\RELHNWXVÈZQRWDFMLOLWHUDïX RELHNWXSRGDZDQHZQDZLDVLHNODPURZ\P var hotel = { QDPHij4XD\ij URRPV `

    IXQFWLRQ+RWHO QDPHURRPV ^ WKLVQDPH QDPH WKLVURRPV URRPV } 1DVWÚSQLHXWZRU]HQLHHJ]HPSODU]DRELHNWX RGE\ZDVLÚ]DSRPRFÈVïRZDNOXF]RZHJRnew LZ\ZRïDQLDIXQNFMLNRQVWUXNWRUD YDUKRWHO QHZ+RWHO ij4XD\ij  YDUKRWHO QHZ+RWHO ij3DUNij 

    2ELHNW\WZRU]RQH]DSRPRFÈQRWDFMLOLWHUDïXVÈ GREUHZQDVWÚSXMÈF\FKV\WXDFMDFK

    2ELHNW\WZRU]RQH]DSRPRFÈNRQVWUXNWRUDVÈ GREUHZQDVWÚSXMÈF\FKV\WXDFMDFK

    ľNLHG\SU]HFKRZXMHV]OXESU]HND]XMHV]GDQH

    ľQDVWURQLHLQWHUQHWRZHMPDV]GXĝRRELHNWöZ

    PLÚG]\DSOLNDFMDPL

    ľZRELHNWDFKJOREDOQ\FKOXENRQğJXUDF\MQ\FK

    NWöUHSRZRGXMÈXVWDZLHQLHLQIRUPDFMLGODGDQHM VWURQ\

    $E\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLOXEPHWRG RELHNWXQDOHĝ\Z\NRU]\VWDÊQRWDFMÚ]Xĝ\FLHP NURSNL 3RQLĝV]HSROHFHQLHSRELHU]HZDUWRĂÊ4XD\ KRWHOQDPH

    FKDUDNWHU\]XMÈF\FKVLÚSRGREQÈIXQNFMRQDOQRĂFLÈ QDSU]\NïDGZLHOHSRND]öZVODMGöZ RGWZDU]DF]\PXOWLPHGLDOQ\FKSRVWDFLZJU]H LWG 

    ľVNRPSOLNRZDQHRELHNW\PRJÈE\ÊQLHXĝ\ZDQH ZNRG]LH

    $E\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLOXEPHWRG RELHNWXQDOHĝ\Z\NRU]\VWDÊQRWDFMÚ]Xĝ\FLHP NURSNL 3RQLĝV]HSROHFHQLHSRELHU]HZDUWRĂÊ3DUN KRWHOQDPH

    FUNKCJE, METODY I OBIEKTY 

    TABLICA JEST OBIEKTEM 7DEOLFDWRZU]HF]\ZLVWRĂFLVSHFMDOQHJRW\SXRELHNW3U]HFKRZXMH]ELöU SRZLÈ]DQ\FK]HVREÈSDUNOXF]ZDUWRĂÊ SRGREQLHMDNZV]\VWNLHRELHNW\  DOHNOXF]HPSRV]F]HJöOQ\FKZDUWRĂFLMHVWQXPHULFKNOXF]\

    -DNPRJïHĂ]REDF]\ÊZUR]G]LDOHZSRGUR]G]LDOHķ:DUWRĂFLZWDEOLF\ĵWDEOLFDPDZïDĂFLZRĂÊlength ZVND]XMÈFÈOLF]EÚSU]HFKRZ\ZDQ\FKHOHPHQWöZ:UR]G]LDOHGRZLHV]VLÚĝHWDEOLFDPDWDNĝHZLHOH Xĝ\WHF]Q\FKPHWRG

    OBIEKT WŁAŚCIWOŚĆ

    OBIEKT

    room1

    420

    room2

    460

    room3

    230

    room4

    620

    7XWDMNRV]WZ\QDMÚFLDSRNRMXKRWHORZHJRMHVW SU]HFKRZ\ZDQ\ZRELHNFLH:SU]\NïDG]LH Z\PLHQLRQRF]WHU\SRNRMHDNRV]WZ\QDMÚFLD NDĝGHJR]QLFKMHVWZïDĂFLZRĂFLÈRELHNWX costs = { URRP URRP URRP URRP `

    TABLICA NUMER INDEKSU

    

    WARTOŚĆ

    0

    420

    1

    460

    2

    230

    3

    620

    FUNKCJE, METODY I OBIEKTY

    7XWDMWHVDPHGDQHSU]HGVWDZLRQRZSRVWDFL WDEOLF\=DPLDVWQD]ZZïDĂFLZRĂFLPDP\QXPHU\ LQGHNVöZ FRVWV >@

    TABLICA OBIEKTÓW I OBIEKTY W TABLICY ,VWQLHMHPRĝOLZRĂÊïÈF]HQLDWDEOLFLRELHNWöZZFHOXXWZRU]HQLD VNRPSOLNRZDQ\FKVWUXNWXUGDQ\FK7DEOLFDPRĝHSU]HFKRZ\ZDÊVHULÚ RELHNWöZ LSDPLÚWDÊLFKNROHMQRĂÊ =NROHLRELHNWPRĝH]DZLHUDÊWDEOLFH MDNRZDUWRĂFLMHJRZïDĂFLZRĂFL 

    :RELHNFLHNROHMQRĂÊZ\VWÚSRZDQLDZïDĂFLZRĂFLQLHPD]QDF]HQLD1DWRPLDVWZWDEOLF\QXPHU\ LQGHNVöZZVND]XMÈNROHMQRĂÊZïDĂFLZRĂFL:LÚFHMSU]\NïDGöZWHJRURG]DMXVWUXNWXUGDQ\FKSR]QDV] ZUR]G]LDOH

    TABLICE W OBIEKCIE :ïDĂFLZRĂÊGRZROQHJRRELHNWXPRĝH SU]HFKRZ\ZDÊWDEOLFÚ3ROHZHM VWURQLHZLGDÊĝHNDĝGHSRV]F]HJöOQH VNïDGRZHUDFKXQNXZKRWHOXVÈ SU]HFKRZ\ZDQHRGG]LHOQLHZWDEOLF\ $E\X]\VNDÊGRVWÚSGRSLHUZV]HJR HOHPHQWXVNïDGRZHJRUDFKXQNXGOD SRNRMXroom1QDOHĝ\Xĝ\ÊSRQLĝV]HJR SROHFHQLD

    WŁAŚCIWOŚĆ

    OBIEKT

    room1

    items[420, 40, 10]

    room2

    items[460, 20, 20]

    room3

    items[230, 0, 0]

    room4

    items[620, 150, 60]

    FRVWVURRPLWHPV>@

    OBIEKTY W TABLICY :DUWRĂFLÈGRZROQHJRHOHPHQWXWDEOLF\ PRĝHE\ÊRELHNW ]DSLVDQ\]DSRPRFÈ VNïDGQLOLWHUDïXRELHNWX :RPDZLDQ\PSU]\NïDG]LHZFHOXX]\VNDQLD GRVWÚSXGRUDFKXQNX]DWHOHIRQ ZSRNRMXroom3QDOHĝ\Xĝ\ÊSRQLĝV]HJR SROHFHQLD

    NUMER INDEKSU

    WARTOŚĆ

    0

    {accom: 420, food: 40, phone: 10}

    1

    {accom: 460, food: 20, phone: 20}

    2

    {accom: 230, food: 0, phone: 0}

    3

    {accom: 620, food: 150, phone: 60}

    FRVWV>@SKRQH

    FUNKCJE, METODY I OBIEKTY 

    CO TO SĄ OBIEKTY WBUDOWANE?

    3U]HJOÈGDUNDLQWHUQHWRZDMHVWGRVWDUF]DQDZUD]]]HVWDZHPZEXGRZDQ\FK RELHNWöZSU]HGVWDZLDMÈF\FKQDSU]\NïDGRNQRSU]HJOÈGDUNLLDNWXDOQLH Z\ĂZLHWODQÈSU]H]QLHVWURQÚLQWHUQHWRZÈ:VSRPQLDQHZEXGRZDQHRELHNW\ G]LDïDMÈZFKDUDNWHU]H]HVWDZXQDU]ÚG]LRZHJRSR]ZDODMÈFHJRQDWZRU]HQLH LQWHUDNW\ZQ\FKVWURQLQWHUQHWRZ\FK 2ELHNW\WZRU]RQHSU]H]Ciebie]Z\NOHEÚGÈ RGSRZLDGDÊTwoimSRWU]HERP7DNLHRELHNW\ PRGHOXMÈXĝ\ZDQHZQLFKGDQHOXE]DZLHUDMÈ IXQNFMHZ\PDJDQHSU]H]VNU\SW=NROHLZEXGRZDQHRELHNW\]DZLHUDMÈIXQNFMRQDOQRĂÊQDMF]ÚĂFLHM Z\PDJDQÈZZLÚNV]RĂFLVNU\SWöZ

    :EXGRZDQHRELHNW\SRPDJDMÈZSREUDQLX UöĝQRURGQ\FKLQIRUPDFMLWDNLFKMDNV]HURNRĂÊ RNQDSU]HJOÈGDUNLLQWHUQHWRZHM]DZDUWRĂÊ JïöZQHJRQDJïöZNDQDVWURQLHDWDNĝHZLHONRĂÊ WHNVWXZSURZDG]RQHJRSU]H]Xĝ\WNRZQLNDZSROX IRUPXODU]DVLHFLRZHJR

    *G\VWURQDLQWHUQHWRZD]RVWDMHZF]\WDQD ZSU]HJOÈGDUFHRELHNW\VÈJRWRZHĽPRĝQD Z\NRU]\VWDÊMHZVNU\SWDFK

    'RVWÚSGRZïDĂFLZRĂFLLPHWRGX]\VNXMHV]]Z\NRU]\VWDQLHPQRWDFML]Xĝ\FLHPNURSNLSRGREQLH MDNZSU]\SDGNXGRVWÚSXGRZïDĂFLZRĂFLLPHWRG VDPRG]LHOQLHXWZRU]RQHJRRELHNWX

     FUNKCJE, METODY I OBIEKTY

    3LHUZV]\P]DGDQLHPMHVWXVWDOHQLHMDNLHVÈ GRVWÚSQHQDU]ÚG]LD0RĝHV]Z\REUD]LÊVRELH ĝH7ZöMQRZ\]HVWDZQDU]ÚG]LRZ\VNïDGDVLÚ ]WU]HFKVNïDGQLNöZ

    3 GLOBALNE OBIEKTY JAVASCRIPT.

    1 OBIEKTOWY MODEL PRZEGLĄDARKI INTERNETOWEJ. 7HQPRGHO]DZLHUDRELHNW\SU]HGVWDZLDMÈFHELHĝÈFHRNQROXENDUWÚSU]HJOÈGDUNLLQWHUQHWRZHM2IHUXMHGRVWÚS GRRELHNWöZRNUHĂODMÈF\FKU]HF]\ WDNLHMDNKLVWRULDSU]HJOÈGDUNL LHNUDQXU]ÈG]HQLD

    7HRELHNW\SU]HGVWDZLDMÈU]HF]\ NWöU\FKPRGHOHPXV]ÈE\ÊXWZRU]RQH SU]H]MÚ]\N-DYD6FULSW1DSU]\NïDG LVWQLHMHRELHNWSUDFXMÈF\MHG\QLH ]GDWÈLJRG]LQÈ

    2 OBIEKTOWY MODEL DOKUMENTU. 7HQPRGHOXĝ\ZDRELHNWöZ GRXWZRU]HQLDELHĝÈFHMVWURQ\ LQWHUQHWRZHM1RZ\RELHNWMHVW WZRU]RQ\GODNDĝGHJRHOHPHQWX LSRV]F]HJöOQ\FKVHNFML WHNVWXQDVWURQLH 

    CO ZOSTANIE OMÓWIONE W TEJ CZĘŚCI ROZDZIAŁU? :F]HĂQLHMGRZLHG]LDïHĂVLÚMDNX]\VNDÊGRVWÚSGR ZïDĂFLZRĂFLLPHWRGRELHNWX3RQLĝHMSU]HGVWDZLRQRZLÚFFHOWHMF]ÚĂFLUR]G]LDïX

    ľRPöZLHQLHGRVWÚSQ\FKZEXGRZDQ\FKRELHNWöZ

    ľRPöZLHQLHSU]H]QDF]HQLDLFKQDMZDĝQLHMV]\FK ZïDĂFLZRĂFLLPHWRG

    :SR]RVWDïHMF]ÚĂFLUR]G]LDïX]QDMG]LHVLÚNLOND GRGDWNRZ\FKSU]\NïDGöZDE\SRND]DÊVSRVöE Xĝ\FLDZEXGRZDQ\FKRELHNWöZ1DVWÚSQLH ZSR]RVWDïHMF]ÚĂFLNVLÈĝNL]REDF]\V]ZLHOHSUDNW\F]Q\FKSU]\NïDGöZZ\NRU]\VWDQLDZEXGRZDQ\FK RELHNWöZZUöĝQHJRURG]DMXV\WXDFMDFK

    CO TO JEST MODEL OBIEKTOWY? 'RZLHG]LDïHĂVLÚĝHRELHNWPRĝHE\ÊXĝ\W\ GRWHJRDE\PRĝQDE\ïRXWZRU]\ÊQDSRGVWDZLH GDQ\FKPRGHOSHZQHMU]HF]\SRFKRG]ÈFHM ]HĂZLDWDU]HF]\ZLVWHJR 0RGHORELHNWRZ\WRJUXSDRELHNWöZ]NWöU\FK NDĝG\SU]HGVWDZLDSRZLÈ]DQHU]HF]\SRFKRG]ÈFH ]HĂZLDWDU]HF]\ZLVWHJR5D]HPWZRU]ÈPRGHO F]HJRĂ]QDF]QLHZLÚNV]HJR 'ZLHVWURQ\ZF]HĂQLHMGRZLHG]LDïHĂVLÚĝHWDEOLFD PRĝHSU]HFKRZ\ZDÊ]ELöURELHNWöZ3RQDGWR ZïDĂFLZRĂFLÈRELHNWXPRĝHE\ÊWDEOLFD,VWQLHMH UöZQLHĝPRĝOLZRĂÊĝHZïDĂFLZRĂFLÈRELHNWX EÚG]LHLQQ\RELHNW.LHG\RELHNWMHVW]DJQLHĝGĝRQ\ZLQQ\PRELHNFLHQD]\ZDQ\JRRELHNWHP SRWRPQ\P FUNKCJE, METODY I OBIEKTY 

    TRZY GRUPY WBUDOWANYCH OBIEKTÓW UŻYCIE WBUDOWANYCH OBIEKTÓW 7U]\]HVWDZ\ZEXGRZDQ\FKRELHNWöZRIHUXMÈUöĝQHJRURG]DMXQDU]ÚG]LDSRPDJDMÈFHZWZRU]HQLX VNU\SWöZGODVWURQLQWHUQHWRZ\FK 5R]G]LDï]RVWDïSRĂZLÚFRQ\RELHNWRZHPX PRGHORZLGRNXPHQWXSRQLHZDĝPRGHOWHQMHVW Z\PDJDQ\ZFHOXX]\VNDQLDGRVWÚSXGR]DZDUWRĂFLVWURQ\LQWHUQHWRZHMLMHMXDNWXDOQLDQLD 3R]RVWDïHGZD]HVWDZ\RELHNWöZEÚGÈZSURZDG]RQHZW\PUR]G]LDOHDSU]\NïDG\LFKXĝ\FLD ]QDMG]LHV]ZSR]RVWDïHMF]ÚĂFLNVLÈĝNL

    OBIEKTOWY MODEL PRZEGLĄDARKI INTERNETOWEJ 2ELHNWRZ\PRGHOSU]HJOÈGDUNLLQWHUQHWRZHM WZRU]\PRGHOGODRNQDOXENDUW\SU]HJOÈGDUNL LQWHUQHWRZHM 1DVDPHMJöU]HPRGHOX]QDMGXMHVLÚRELHNW windowSU]HGVWDZLDMÈF\ELHĝÈFHRNQROXENDUWÚ SU]HJOÈGDUNLLQWHUQHWRZHM-HJRRELHNW\SRWRPQH SU]HGVWDZLDMÈSR]RVWDïHIXQNFMHSU]HJOÈGDUNL Bieżące okno lub karta przeglądarki internetowej

    WINDOW

    DOCUMENT

    HISTORY

    LOCATION

    NAVIGATOR

    SCREEN

    Bieżąca strona internetowa Strony w historii przeglądarki internetowej Adres URL bieżącej strony Informacje o przeglądarce internetowej Informacje o ekranie urządzenia

    PRZYKŁADY 0HWRGDprint()RELHNWXwindowVSRZRGXMH Z\ĂZLHWOHQLHSU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈRNQD GLDORJRZHJRGRW\F]ÈFHJRZ\GUXNX :WHMNVLÈĝFHGRZLHV]VLÚMDNXĝ\ZDÊZEXGRZDQ\FKRELHNWöZRUD]MDNLHJRURG]DMXLQIRUPDFMH PRĝHV]]QLFKSREUDÊ3RQDGWRSU]HGVWDZLRQH EÚGÈSU]\NïDG\Xĝ\FLDZLHOXLFKQDMSRSXODUQLHMV]\FKIXQNFML

    ZLQGRZSULQW 

    1DSHZQRQLHPDWXWDMZ\VWDUF]DMÈFHMLORĂFLPLHMVFDQDGRNïDGQHRPöZLHQLHZV]\VWNLFKRELHNWöZ ZSRV]F]HJöOQ\FKPRGHODFK-HGQDNQDVWURQLH http://javascriptbook.com/extras/]QDMG]LHV] OLVWÚRGQRĂQLNöZGR]DVREöZ]QDMGXMÈF\FKVLÚ ZLQWHUQHFLH

    ZLQGRZVFUHHQZLGWK

     FUNKCJE, METODY I OBIEKTY

    :ïDĂFLZRĂÊwidthRELHNWXscreenSR]ZROLQD XVWDOHQLHZ\UDĝRQHMZSLNVHODFKV]HURNRĂFLHNUDQX XU]ÈG]HQLD

    'RRELHNWXwindowSRZUöFLP\ZSRGUR]G]LDOH ķ2ELHNWRZ\PRGHOSU]HJOÈGDUNLLQWHUQHWRZHM ĽRELHNWZLQGRZĵQDNWöUHMSR]QDV]SHZQH ZïDĂFLZRĂFLRELHNWöZscreenLhistory

    OBIEKTOWY MODEL DOKUMENTU

    GLOBALNE OBIEKTY JAVASCRIPT

    2ELHNWRZ\PRGHOGRNXPHQWX DQJdocument object modelĽ'20 WZRU]\PRGHOGODELHĝÈFHM VWURQ\LQWHUQHWRZHM

    *OREDOQHRELHNW\-DYD6FULSWQLHWZRU]ÈSRMHG\QF]HJRPRGHOX7RMHVWJUXSDSRV]F]HJöOQ\FK RELHNWöZSRZLÈ]DQ\FK]UöĝQ\PLF]ÚĂFLDPLMÚ]\ND -DYD6FULSW

    1DVDPHMJöU]HPRGHOX]QDMGXMHVLÚRELHNW documentNWöU\SU]HGVWDZLDVWURQÚMDNRFDïRĂÊ -HJRRELHNW\SRWRPQHSU]HGVWDZLDMÈLQQH HOHPHQW\]QDMGXMÈFHVLÚQDVWURQLH

    1D]Z\RELHNWöZJOREDOQ\FK]Z\NOH]DF]\QDMÈVLÚ RGGXĝHMOLWHU\QDSU]\NïDGStringOXEDate :\PLHQLRQHSRQLĝHMRELHNW\SU]HGVWDZLDMÈ SRGVWDZRZHW\S\GDQ\FK

    document

    STRING

    NUMBER

    BOOLEAN





    atrybut

    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%\,G ijRQHij 

    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 screenLhistory EÚGÈF\FK RELHNWDPLSRWRPQ\PLRELHNWX window 

    :’$¥&,:2¥m

    23,6

    window.innerHeight

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

    window.innerWidth

    :\UDĝRQDZSLNVHODFKV]HURNRĂÊRNQD Z\ïÈ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 NROHNFMLNodeList 8ĝ\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%\&ODVV1DPH ijKRWij  // Wyszukanie elementów o klasie hot. LI HOHPHQWVOHQJWK! ^-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%\7DJ1DPH ijOLij  // Wyszukanie elementów

  • . LI HOHPHQWVOHQJWK! ^-HĝHOL]QDOH]LRQ\EÚG]LHFRQDMPQLHMMHGHQHOHPHQW YDUHO HOHPHQWV>@:\ELHUDP\SLHUZV]\]Z\NRU]\VWDQLHPVNïDGQLWDEOLF\ HOFODVV1DPH ijFRROij=PLDQDZDUWRĂFLDWU\EXWXFODVVZ\EUDQHJRHOHPHQWX }

    WYNIK

    :RPDZLDQ\PSU]\NïDG]LHZ\V]XNLZDQHVÈ ZV]\VWNLHHOHPHQW\
  • ZGRNXPHQFLH:\QLN RSHUDFMLMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLH elementsSRQLHZDĝEÚG]LHZ\NRU]\VWDQ\ZLHOH UD]\ 3ROHFHQLHifVSUDZG]DF]\]RVWDï\]QDOH]LRQH MDNLHNROZLHNHOHPHQW\
  • 3RGREQLHMDN ZSU]\SDGNXGRZROQHJRHOHPHQWXNWöU\PRĝH ]ZUöFLÊNROHNFMDNodeListVSUDZG]HQLHLVWQLHQLD RGSRZLHGQLFKHOHPHQWöZSU]HSURZDG]DP\SU]HG SUöEÈLFKZ\NRU]\VWDQLD -HĝHOLGRSDVRZDQHEÚGÈMDNLHNROZLHNHOHPHQW\ WRZ\ELHUDP\SLHUZV]\DQDVWÚSQLH]PLHQLDP\ ZDUWRĂÊMHJRDWU\EXWXFODVV:SURZDG]RQD ]PLDQDGRW\F]\NRORUXWïDHOHPHQWX 2EVïXJDZSU]HJOÈGDUNDFKEDUG]RGREUDPHWRG\ WHMPRĝQDXĝ\ZDÊZGRZROQ\PVNU\SFLH

    OBIEKTOWY MODEL DOKUMENTU 207

    POBRANIE ELEMENTU NA PODSTAWIE SELEKTORA CSS Metoda TXHU\6HOHFWRU ]ZUDFDSLHUZV]\ZÚ]Hï HOHPHQWXNWöU\]RVWDïGRSDVRZDQ\GRVHOHNWRUD&66 =NROHLZDUWRĂFLÈ]ZURWQÈ metody querySeletorAll()MHVW NROHNFMDNodeListZV]\VWNLFK GRSDVRZDñ

    2ELHPHWRG\SRELHUDMÈVHOHNWRU &66MDNRLFKMHG\Q\SDUDPHWU 3RGF]DVZ\ERUXHOHPHQWöZ VNïDGQLDVHOHNWRUD&66 FKDUDNWHU\]XMHVLÚZLÚNV]È HODVW\F]QRĂFLÈLGRNïDGQRĂFLÈ QLĝSRSURVWXSRGDQLHQD]Z\ NODV\OXE]QDF]QLND6NïDGQLD

    WDSRZLQQDE\Ê]QDQDSURJUDPLVWRPDSOLNDFMLLQWHUQHWRZ\FK NWöU]\VÈSU]\]Z\F]DMHQLGR Z\ELHUDQLDHOHPHQWöZ]D SRPRFÈ&66 'ZLHRPDZLDQHWXWDMPHWRG\ ]RVWDï\ZSURZDG]RQHSU]H]

    FMVTXHU\VHOHFWRUMV

    JAVASCRIPT

    // Metoda querySelector() zwraca jedynie pierwsze dopasowanie. YDUHO GRFXPHQWTXHU\6HOHFWRU ijOLKRWij  HOFODVV1DPH ijFRROij 0HWRGDTXHU\6HOHFWRU$OO ]ZUDFDNROHNFMÚ1RGH/LVW 'UXJLGRSDVRZDQ\HOHPHQW WRMHVWWU]HFLHOHPHQWQDOLĂFLH ]RVWDMHZ\EUDQ\ L]PRG\ğNRZDQ\ YDUHOV GRFXPHQWTXHU\6HOHFWRU$OO ijOLKRWij  HOV>@FODVV1DPH ijFRROij SURGXFHQWöZSU]HJOÈGDUHNLQWHUQHWRZ\FK SRQLHZDĝZLHOXSURJUDPLVWöZGRïÈF]DïRQD VWURQLHVNU\SW\WDNLHMDNELEOLRWHNDM4XHU\DE\ PLHÊPRĝOLZRĂÊZ\ERUXHOHPHQWöZ]DSRPRFÈ VHOHNWRUöZ&66 :LÚFHMLQIRUPDFMLRELEOLRWHFH M4XHU\]QDMG]LHV]ZUR]G]LDOH 

    WYNIK

    -HĝHOLVSRMU]\V]QDRVWDWQLZLHUV]NRGXWR]DXZDĝ\V]ĝHGRZ\ERUXGUXJLHJRHOHPHQWX]NROHNFML NodeList]RVWDïDXĝ\WDVNïDGQLDWDEHOLSRPLPR IDNWXSU]HFKRZ\ZDQLDNROHNFMLZ]PLHQQHM

    2EVïXJDZSU]HJOÈGDUNDFKZDGÈREXRPDZLDQ\FKWXWDMPHWRGMHVWWRĝHVÈREVïXJLZDQH MHG\QLHZQDMQRZV]\FKZHUVMDFKSU]HJOÈGDUHN ZQDZLDVDFKSRGDQRSLHUZV]HZ\GDQLD 

    208 OBIEKTOWY MODEL DOKUMENTU

    ,( Z\GDQDZPDUFX  )LUHIR[ Z\GDQDZF]HUZFX  &KURPH Z\GDQDZHZU]HĂQLX  2SHUD Z\GDQDZHZU]HĂQLX  6DIDUL Z\GDQDZOLVWRSDG]LH 

    6NU\SW-DYD6FULSWZ\NRQXMH MHGQRUD]RZRMHGHQZLHUV] NRGXDSROHFHQLDZSï\ZDMÈ QD]DZDUWRĂÊZ\ĂZLHWODQÈQD VWURQLHSRGF]DVLFKSU]HWZDU]DQLDSU]H]LQWHUSUHWHU

    -HĝHOL]DS\WDQLHPRGHOX'20 MHVWZ\NRQ\ZDQHZWUDNFLH ZF]\W\ZDQLDVWURQ\L]RVWDQLH RQRXĝ\WHSöěQLHMQDWHMVWURQLH WR]DNDĝG\PUD]HPPRĝH ]ZUöFLÊUöĝQHHOHPHQW\

    3RQLĝHMSRND]DQRMDN SU]\NïDGSROHZHMVWURQLH (query-selector.js PRĝH ]PLHQLÊGU]HZRPRGHOX'20 ZWUDNFLHZ\NRQ\ZDQLDVNU\SWX

    1. PODCZAS WCZYTYWANIA STRONY HTML

    FTXHU\VHOHFWRUKWPO

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


    1. 7DNZ\JOÈGDVWURQDSRMHMZF]\W\ZDQLX0DP\WU]\HOHPHQW\
  •  NWöU\FKZDUWRĂFLÈDWU\EXWXFODVVMHVW hot. Metoda TXHU\6HOHFWRU wyV]XNXMHSLHUZV]\HOHPHQWDQDVWÚSQLH XDNWXDOQLDZDUWRĂÊMHJRDWU\EXWXFODVV ]hot na FRRO2SHUDFMDSRZRGXMH UöZQLHĝXDNWXDOQLHQLHSU]HFKRZ\ZDQHJRZSDPLÚFLGU]HZDPRGHOX '20'ODWHJRWHĝSRZ\NRQDQLXNRGX W\ONRGUXJLLWU]HFLHOHPHQWEÚGÈPLDï\ atrybut FODVVRZDUWRĂFLhot.

    2. PO PIERWSZYM ZESTAWIE POLECEŃ HTML

    FTXHU\VHOHFWRUKWPO

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


    2. 3RZ\NRQDQLXGUXJLHJRVHOHNWRUD SR]RVWDMÈW\ONRGZDHOHPHQW\
  •  NWöUHEÚGÈPLDï\DWU\EXWFODVV RZDUWRĂFLhot SDWU]SROHZHMVWURQLH  LGODWHJR]RVWDQÈZ\EUDQHMHG\QLH GZD7\PUD]HPVNïDGQLDWDEOLF\MHVW Xĝ\ZDQDGRSUDF\]GUXJLP]GRSDVRZDQ\FKHOHPHQWöZ WRMHVWWU]HFL HOHPHQWQDOLĂFLH 3RQRZQLHZDUWRĂÊ atrybutu FODVV]RVWDMH]PLHQLRQD ]hot na FRRO.

    3. PO DRUGIM ZESTAWIE POLECEŃ HTML

    FTXHU\VHOHFWRUKWPO

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


    3. .LHG\GUXJLVHOHNWRUZ\NRQDVZRMH ]DGDQLHGU]HZRPRGHOX'20]DZLHUD W\ONRMHGHQHOHPHQW
  • NWöU\PD atrybut FODVVRZDUWRĂFLhot.DĝG\ NRGZ\V]XNXMÈF\HOHPHQW\
  •  NWöUHPDMÈDWU\EXWFODVVRZDUWRĂFL hot]QDMG]LHW\ONRWHQMHGHQHOHPHQW -HGQDNZ\V]XNDQLHHOHPHQWöZ
  •  NWöUHPDMÈDWU\EXWFODVVRZDUWRĂFL FRROVSRZRGXMHGRSDVRZDQLHdwóch ZÚ]ïöZHOHPHQWöZ

    OBIEKTOWY MODEL DOKUMENTU 209

    POWTÓRZENIE OPERACJI DLA CAŁEJ KOLEKCJI NODELIST .LHG\PDV]NROHNFMÚNodeListPRĝHV]Z\NRU]\VWDÊSÚWOÚZFHOXLWHUDFML SU]H]ZV]\VWNLHZÚ]ï\DQDVWÚSQLH]DVWRVRZDÊWHVDPHSROHFHQLDGOD NDĝGHJR]QLFK *G\ZRPDZLDQ\PSU]\NïDG]LH MHVWMXĝXWZRU]RQDNROHNFMD NodeList]DSRPRFÈSÚWOLfor SU]HSURZDG]DQDMHVWLWHUDFMD SU]H]ZV]\VWNLHHOHPHQW\ NROHNFML

    :V]\VWNLHSROHFHQLD]QDMGXMÈFHVLÚZHZQÈWU]QDZLDVX NODPURZHJREORNXSÚWOLfor EÚGÈZ\NRQDQHGODNDĝGHJR HOHPHQWXNROHNFMLNodeList.

    $E\ZVND]DÊDNWXDOQLH SU]HWZDU]DQ\HOHPHQWNROHNFML NodeListZDUWRĂÊOLF]QLND iMHVWXĝ\ZDQDZVNïDGQL ZVW\OXWDEOLF\

    var hotItems GRFXPHQWTXHU\6HOHFWRU$OO ijOLKRWij  for (var i = 0; i < KRW,WHPVOHQJWK; i++) { KRW,WHPV>L@FODVV1DPH ijFRROij }

    210

    

    

    Zmienna hotItems]DZLHUD NROHNFMÚNodeList8PLHV]F]RQRZQLHMZV]\VWNLHHOHPHQW\ OLVW\NWöU\FKDWU\EXWFODVV ma ZDUWRĂÊhot(OHPHQW\]RVWDï\ Z\EUDQH]DSRPRFÈZ\ZRïDQLD metody TXHU\6HOHFWRU$OO .

    :DUWRĂÊZïDĂFLZRĂFLlength NROHNFMLNodeListZVND]XMH OLF]EÚHOHPHQWöZ]QDMGXMÈF\FK VLÚZNROHNFML7DOLF]EDRNUHĂOD OLF]EÚLWHUDFMLZ\NRQ\ZDQ\FK SU]H]SÚWOÚ

    OBIEKTOWY MODEL DOKUMENTU

     6NïDGQLDWDEOLF\MHVWXĝ\ZDQD GRZVND]DQLDDNWXDOQLH SU]HWZDU]DQHJRHOHPHQWXNROHNFMLNodeListKRW,WHPV>L@. :QDZLDVLHNZDGUDWRZ\P ]QDMGXMHVLÚ]PLHQQDOLF]QLND

    ITERACJA PRZEZ KOLEKCJĘ NODELIST -HĝHOLWHQVDPNRGFKFHV] ]DVWRVRZDÊGODZLHOXHOHPHQWöZWRLWHUDFMDSU]H]NROHNFMÚ NodeListMHVWWHFKQLNÈREDUG]R GXĝ\FKPRĝOLZRĂFLDFK

    2EHMPXMHRQDRNUHĂOHQLHOLF]E\ HOHPHQWöZZNROHNFMLNodeList DQDVWÚSQLH]GHğQLRZDQLH OLF]QLNDZWDNLVSRVöEDE\ LWHUDFMDREMÚïDMHZV]\VWNLHSR kolei.

    :WUDNFLHNDĝGHMLWHUDFMLSÚWOL VNU\SWVSUDZG]DF]\ZDUWRĂÊ OLF]QLNDMHVWPQLHMV]DQLĝOLF]ED HOHPHQWöZNROHNFMLNodeList.

    FMVQRGHOLVWMV

    JAVASCRIPT

    YDUKRW,WHPV GRFXPHQWTXHU\6HOHFWRU$OO ijOLKRWij  // Kolekcja NodeList jest przechowywana w tablicy. LI KRW,WHPVOHQJWK! ^ -HĝHOLNROHNFMD]DZLHUDMDNLHNROZLHNHOHPHQW\ IRU YDUL LKRW,WHPVOHQJWKL ^ // Iteracja przez wszystkie elementy kolekcji. KRW,WHPV>L@FODVV1DPH ijFRROij =PLDQDZDUWRĂFLDWU\EXWXFODVVZ\EUDQHJRHOHPHQWX } }

    WYNIK

    :RPDZLDQ\PSU]\NïDG]LH NROHNFMDNodeList]RVWDïDZ\JHQHURZDQD]DSRPRFÈPHWRG\ TXHU\6HOHFWRU$OO . Kod Z\V]XNXMHZV]\VWNLHHOHPHQW\
  • NWöUHPDMÈDWU\EXWFODVV RZDUWRĂFLhot. .ROHNFMDNodeListMHVWSU]HFKRZ\ZDQDZ]PLHQQHMRQD]ZLH hotItemsDOLF]EDHOHPHQWöZ ZNROHNFMLMHVWXVWDODQD]D SRPRFÈZïDĂFLZRĂFLlength. 'ODNDĝGHJRHOHPHQWXZNROHNFMLNodeListZDUWRĂÊDWU\EXWX FODVV]RVWDMH]PLHQLRQDQD FRRO.

    OBIEKTOWY MODEL DOKUMENTU

    211

    ITERACJA PRZEZ KOLEKCJĘ NODELIST — KROK PO KROKU

    czy 0 < 10?

    POCZĄTEK

    1DSRF]ÈWNXSU]\NïDGXPDP\OLVWÚ WU]HFKHOHPHQWöZNWöU\FKDWU\EXW FODVVPDZDUWRĂÊhot'ODWHJRWHĝ ZDUWRĂÊKRW,WHPVOHQJWKZ\QRVL3.

    212

    OBIEKTOWY MODEL DOKUMENTU

    i=0

    j 1 do 0 do d a

    i=1

    1DSRF]ÈWNXZDUWRĂÊOLF]QLND Z\QRVL0'ODWHJRWHĝSRELHUDQ\ MHVWSLHUZV]\HOHPHQWNROHNFML NodeList RQXPHU]HLQGHNVX 0 DZDUWRĂÊMHJRDWU\EXWX FODVV]RVWDMH]PLHQLRQDQD FRRO.

    for (var i = 0; LKRW,WHPVOHQJWK i++) { KRW,WHPV>L@FODVV1DPH ijFRROij }

    cz y 1 < 3 ?

    i=1

    cz y 2 < 3 ?

    1d dodaj

    i=2

    .LHG\OLF]QLNEÚG]LHPLDï ZDUWRĂÊ1SREUDQ\EÚG]LH GUXJLHOHPHQWNROHNFMLNodeList RQXPHU]HLQGHNVX1  DZDUWRĂÊMHJRDWU\EXWXFODVV ]RVWDQLH]PLHQLRQDQDFRRO.

    .LHG\OLF]QLNEÚG]LHPLDïZDUWRĂÊ2SREUDQ\EÚG]LHWU]HFL HOHPHQWNROHNFMLNodeList RQXPHU]HLQGHNVX2  DZDUWRĂÊMHJRDWU\EXWXFODVV ]RVWDQLH]PLHQLRQDQDFRRO.

    o2

    cz y 3 < 3 ?

    i=3

    KONIEC

    .LHG\OLF]QLNEÚG]LHPLDï ZDUWRĂÊ3ZDUXQHNQLHEÚG]LH GïXĝHMSU]\MPRZDïZDUWRĂFL true LQDVWÈSL]DNRñF]HQLH G]LDïDQLDSÚWOL6NU\SWNRQW\QXXMHG]LDïDQLHRGSLHUZV]HJR ZLHUV]DNRGXSRSÚWOL

    OBIEKTOWY MODEL DOKUMENTU

    213

    PORUSZANIE SIĘ PO MODELU DOM .LHG\PDV]ZÚ]HïHOHPHQWXPRĝHV]Z\EUDÊLQQ\SRZLÈ]DQ\ ]QLPHOHPHQWZ\NRU]\VWXMÈFZW\PFHOXSLÚÊZïDĂFLZRĂFL 1D]\ZDVLÚWRSRUXV]DQLHPVLÚSRPRGHOX'20 parentNode

    previousSibling nextSibling

    ğUVW&KLOG lastChild

    7DZïDĂFLZRĂÊZ\V]XNXMH ZÚ]HïHOHPHQWXGODHOHPHQWX QDGU]ÚGQHJRZNRG]LH+70/

    7HZïDĂFLZRĂFLSRZRGXMÈ Z\V]XNDQLHRGSRZLHGQLR SRSU]HGQLHJRLQDVWÚSQHJR ZÚ]ïDUöZQRU]ÚGQHJR

    7HZïDĂFLZRĂFLSRZRGXMÈ Z\V]XNDQLHRGSRZLHGQLR SLHUZV]HJRLRVWDWQLHJRHOHPHQWXSRWRPQHJRGODHOHPHQWX ELHĝÈFHJR

    (1)-HĝHOLDQDOL]Ú]DF]QLHP\ RGSLHUZV]HJRHOHPHQWX
  •  WRMHJRZÚ]ïHPQDGU]ÚGQ\P EÚG]LHHOHPHQW
      .

      -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ĝÈFHJR QLHPHWRG\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]HGQLHJR QDVWÚSQHJR  HOHPHQWXUöZQRU]ÚGQHJROXE SLHUZV]HJR RVWDWQLHJR 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]\ HOHPHQWDPL QDSU]\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([SORUHU SRZ\ĝHM LJQRUXMH]QDNLRGVWÚSXLQLHWZRU]\GRGDWNRZ\FKZÚ]ïöZWHNVWRZ\FK

        ul li

        li

        li

        li

        &KURPH)LUHIR[6DIDULL2SHUDWZRU]ÈZÚ]ï\WHNVWRZH GOD]QDNöZRGVWÚSX VSDFMHL]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%\,G ijWZRij  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%\7DJ1DPH ijXOij >@ YDUğUVW,WHP VWDUW,WHPğUVW&KLOG YDUODVW,WHP VWDUW,WHPODVW&KLOG =PLDQDZDUWRĂFLDWU\EXWXFODVVHOHPHQWöZSRWRPQ\FK ğUVW,WHPVHW$WWULEXWH ijFODVVijijFRPSOHWHij  ODVW,WHPVHW$WWULEXWH ijFODVVijijFRROij 

          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]HFL QDVWURQLHSRSUDZHM ]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Ú]ïD SDWU]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öZ SDWU] SRGUR]G]LDïķ8]\VNDQLHGRVWÚSX GR LXDNWXDOQLHQLH WHNVWXRUD] NRGX]QDF]QLNöZ]DSRPRFÈ ZïDĂFLZRĂFLLQQHU+70/ĵ 

          textContent

          3REUDQLHLXDNWXDOQLHQLHMHG\QLH WHNVWX SDWU]SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGRWHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQW LLQQHU7H[W ĵ 

          innerText

          3REUDQLHLXDNWXDOQLHQLHMHG\QLH WHNVWX SDWU]SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGRWHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQW LLQQHU7H[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%\,G ijRQHij ğ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%\,G ijWZRij // Pobranie drugiego elementu listy. YDUHO7H[W LWHP7ZRğUVW&KLOGQRGH9DOXH3REUDQLHMHJR]DZDUWRĂFLWHNVWRZHM HO7H[W HO7H[WUHSODFH ijRU]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ÚZHOHPHQFLH RUD]MHJRHOHPHQWDFKSRWRPQ\FK  textContent :FHOXSREUDQLDWHNVWX]HOHPHQWöZ
        • w omaZLDQ\PSU]\NïDG]LH L]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%\,G ijRQHij 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%\,G ijRQHij  // 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%\,G ijVFULSW5HVXOWVij  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.

            (OHPHQW ZUD]]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 HOHPHQWX LPLHÊ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%\,G ijRQHij 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%\,G ijRQHij 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%\,G ijRQHij  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 QDVWURQLH LQQDQLĝ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\HOHPHQW RSFMRQDOQLHZUD]]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(OHPHQW ijOLij  8WZRU]HQLHZÚ]ïDWHNVWRZHJRLSU]HFKRZ\ZDQLHJRZ]PLHQQHM YDUQHZ7H[W GRFXPHQWFUHDWH7H[W1RGH ijNRPRVDU\ĝRZDij  'RïÈF]HQLHQRZHJRZÚ]ïDWHNVWRZHJRGRQRZHJRHOHPHQWX QHZ(ODSSHQG&KLOG QHZ7H[W  :\V]XNDQLHPLHMVFDZNWöU\PSRZLQLHQE\ÊGRGDQ\QRZ\HOHPHQW YDUSRVLWLRQ GRFXPHQWJHW(OHPHQWV%\7DJ1DPH ijXOij >@ // Wstawienie nowego elementu we wskazanym miejscu. SRVLWLRQDSSHQG&KLOG QHZ(O 

            WYNIK

            :Ú]HïWHNVWRZ\]RVWDQLH]DSRPRFÈPHWRG\ appendChild()GRGDQ\GRQRZHJRZÚ]ïD elementu. Metoda getElementsByTagName() wybiera ZGU]HZLHPRGHOX'20SRïRĝHQLHZNWöU\P ]RVWDQLHZVWDZLRQ\QRZ\HOHPHQW WREÚ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%\7DJ1DPH ijOLij >@ (OHPHQWSU]H]QDF]RQ\GRXVXQLÚFLD YDUFRQWDLQHU(O UHPRYH(OSDUHQW1RGH-HJRHOHPHQWQDGU]ÚGQ\ FRQWDLQHU(OUHPRYH&KLOG UHPRYH(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 HOHPHQWX SU]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öZ NLHG\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ĝ\WNRZQLND QDSU]\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;66 DQJFURVVVLWHVFULSWLQJ). :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\ WRNHQDFKVHVML WRLQIRUPDFMHSR]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-DYD6FULSW FKRÊ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 ijHVFDSH GRFXPHQWFRRNLH 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"ijHVFDSH GRFXPHQWFRRNLH ĵ;> .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]RZDQH SDWU] 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öZ SDWU]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\QLHZSRVWDFLWHNVWX QLHNRGX]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]H SRQLHZDĝ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öE OXEZUöĝ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\QLHZSRVWDFLWHNVWX DQLHNRGX ]QDF]QLNöZ LXPLHV]F]DQDW\ONRZHOHPHQWDFK ZLGRF]QHJRREV]DUX W]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öZ F]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\FK LFK 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]X SR]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 SROHWHNVWRZH NWö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 on PDP\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 SROHWHNVWRZH NWö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]DQHJRHOHPHQWX PDWDNLH 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 on QDSU]\NïDGblurVWDMHVLÚonblur :UR]G]LDOHSR]QDV]LQQHUR]ZLÈ]DQLH RSDUWHQDSOLNX 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ĠRZMV SROHZHMVWURQLHSRND]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 IXQNFMLRSDNRZDQLD RGE\ZDVLÚ WRDXWRPDW\F]QLH 1DVWÚSQLH WU]HEDSRGDÊMÈMDNRSDUDPHWU IXQNFMLQD]ZDQHM MDNSRND]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ĂFL SDWU]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ĂÊ targetRELHNWXevent ZSU]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ĝ\WNRZQLNRZL 0LÚ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öZ QDSU]\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]H DE\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]D SR]QDV] MHZSRGUR]G]LDOHķ=GDU]HQLD IRUPXODU]DVLHFLRZHJRĵ 

                                3URGXFHQFLSU]HJOÈGDUHNLQWHUQHWRZ\FKUöZQLHĝLPSOHPHQWXMÈ SHZQH]GDU]HQLDMDNRF]ÚĂÊ RELHNWRZHJRPRGHOXSU]HJOÈGDUNLLQWHUQHWRZHM DQJbrowser 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]DVLHFLRZHJR 7HJR 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 ]QLFK SR]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ğOWHU SULFH5DQJH )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]ZLHQR8L6OLGHU RSUDFRZDQHMSU]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 ]DNUHVLH 7R]DGDQLHMHVWZ\NRQ\ZDQHZWUDNFLH NDĝGHJRXDNWXDOQLHQLDVXZDND  :FHOXRNUHĂOHQLDNWöU\ZLHUV]PD]RVWDÊ Z\ĂZLHWORQ\OXEXNU\W\NRGPXVLPLHÊPRĝOLZRĂÊ VWRVRZDQLDRGZRïDñPLÚG]\

                                • RELHNWHPpersonZWDEOLF\SHRSOH VSUDZG]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öE DQLHNRSLRZDÊ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(DFK IXQFWLRQ SHUVRQ ^ ,WHUDFMDSU]H]ZV]\VWNLHRELHNW\SHUVRQ ZWDEOLF\SHRSOH YDUURZ  ijWU!WU!ij 8WZRU]HQLHZLHUV]DGODGDQHMRVRE\ URZDSSHQG  ijWG!WG!ij WH[W SHUVRQQDPH  :VWDZLHQLHLPLHQLDRVRE\ URZDSSHQG  ijWG!WG!ij WH[W SHUVRQUDWH  // 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(DFK IXQFWLRQ URZ ^'ODNDĝGHJRRELHNWXZWDEOLF\URZV WERG\DSSHQG URZHOHPHQW 'RGDQLHNRGX+70/GODZLHUV]D `  WDEOHDSSHQG WERG\ 'RGDQLHZLHUV]\GRWDEHOL ` IXQFWLRQXSGDWH PLQPD[ ^8DNWXDOQLHQLH]DZDUWRĂFLWDEHOL URZVIRU(DFK IXQFWLRQ URZ ^'ODNDĝGHJRZLHUV]DZWDEOLF\URZV LI URZSHUVRQUDWH! 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` ` FKDQJH IXQFWLRQ ^XSGDWH PLQYDO PD[YDO `  PDNH5RZV 8WZRU]HQLHWDEOLF\URZVLZLHUV]\WDEHOL DSSHQG5RZV 'RGDQLHZLHUV]\GRWDEHOL XSGDWH PLQYDO 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]HFLQNDPL SDWU] 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 WDJX 3DWU]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ĝ\WNRZQLND 3DWU]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@SXVK LPJ '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ĂFL OXEWDJL 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&ODVV ijDFWLYHij 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVV ijDFWLYHij 8VXQLÚFLH]QLFKNODV\DFWLYH LPJVVKRZ :\ĂZLHWOHQLHZV]\VWNLFKREUD]öZ ` ` DSSHQG7R EXWWRQV 'RGDQLHSU]\FLVNXGRLVWQLHMÈF\FK

                                2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

                                HDFK WDJJHGIXQFWLRQ WDJ1DPH ^'ODNDĝGHJR]QDF]QLND  ijEXWWRQ!ij^8WZRU]HQLHSXVWHJRSU]\FLVNX WH[WWDJ1DPHij ijWDJJHG>WDJ1DPH@OHQJWKij ij'RGDQLHQD]Z\WDJX FOLFNIXQFWLRQ ^'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN $(this) 3REUDQLHNOLNQLÚWHJRSU]\FLVNX DGG&ODVV ijDFWLYHij 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVV ijDFWLYHij 8VXQLÚFLH]QLFKNODV\DFWLYH LPJV:V]\VWNLHREUD]\ .hide() 8NU\FLHLFK ğOWHU WDJJHG>WDJ1DPH@ :\V]XNDQLHREUD]öZZUD]]GDQ\PWDJLHP VKRZ :\ĂZLHWOHQLHW\ONRGRSDVRZDQ\FKREUD]öZ ` ` DSSHQG7R EXWWRQV '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@  1XPEHU D>@ .RQZHUVMDF]DVXQDVHNXQG\ E 1XPEHU E>@  1XPEHU E>@ .RQZHUVMDF]DVXQDVHNXQG\

                                9

                                10

                                11 12

                                13

                                UHWXUQDE:DUWRĂÊ]ZURWQDZ\QRVLDPLQXVE ` GDWHIXQFWLRQ DE ^'RGDQLHPHWRG\RQD]ZLHGDWH  D QHZ'DWH D 1RZ\RELHNW'DWHGRSU]HFKRZ\ZDQLDGDW\ E QHZ'DWH E 1RZ\RELHNW'DWHGRSU]HFKRZ\ZDQLDGDW\ UHWXUQDE:DUWRĂÊ]ZURWQDZ\QRVLDPLQXVE ` `

                                DUHSODFH AWKHLijij  0HWRGDUHSODFH MHVWXĝ\ZDQDGRXVXQLÚFLD ZV]\VWNLFKZ\VWÈSLHñVïRZD7KH]SRF]ÈWNXFLÈJX WHNVWRZHJR']LDïDZNDĝG\PFLÈJXWHNVWRZ\P LSRELHUDW\ONRMHGHQDUJXPHQWZ\UDĝHQLHUHJX ODUQH SDWU]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 HDFK IXQFWLRQ ^ YDUWDEOH  WKLV // Tabela do sortowania. YDUWERG\ WDEOHğQG ijWERG\ij =DZDUWRĂÊWDEHOL YDUFRQWUROV WDEOHğQG ijWKij 1DJïöZNLWDEHOL YDUURZV WERG\ğQG ijWUij WR$UUD\ 7DEOLFDSU]HFKRZXMÈFDZLHUV]H

                                6 7 8 9

                                FRQWUROVRQ ijFOLFNijIXQFWLRQ ^.LHG\Xĝ\WNRZQLNNOLNQLHQDJïöZHN YDUKHDGHU  WKLV 3REUDQLHQDJïöZND YDURUGHU KHDGHUGDWD ijVRUWij 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]\ LI KHDGHULV ijDVFHQGLQJij __KHDGHULV ijGHVFHQGLQJij ^ KHDGHUWRJJOH&ODVV ijDVFHQGLQJGHVFHQGLQJij  =PLDQDZDUWRĂFLDWU\EXWXFODVVQDSU]HFLZQÈ WERG\DSSHQG URZVUHYHUVH 2GZUöFHQLHNROHMQRĂFLHOHPHQWöZWDEOLF\ `HOVH^:SU]HFLZQ\PUD]LHWU]HEDSRVRUWRZDÊWDEOLFÚ KHDGHUDGG&ODVV ijDVFHQGLQJij 'RGDQLHNODV\GRQDJïöZND 8VXQLÚFLHNODV\]ZV]\VWNLFKSR]RVWDï\FKQDJïöZNöZ KHDGHUVLEOLQJV UHPRYH&ODVV ijDVFHQGLQJGHVFHQGLQJij  LI FRPSDUHKDV2ZQ3URSHUW\ RUGHU ^-HĝHOLRELHNWFRPSDUHPDZVND]DQÈPHWRGÚ FROXPQ FRQWUROVLQGH[ WKLV :\V]XNDQLHQXPHUXLQGHNVXNROXPQ\ URZVVRUW IXQFWLRQ DE ^:\ZRïDQLHPHWRG\VRUW ZWDEOLF\URZV D  D ğQG ijWGij HT FROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XD E  E ğQG ijWGij HT FROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XE UHWXUQFRPSDUH>RUGHU@ DE :\ZRïDQLHPHWRG\SRUöZQXMÈFHM `  WERG\DSSHQG URZV  ` ` `  ` 

                                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]PLHQQHMtype SREUDQDZNURNX ]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ïRZHLQIRUPDFMH MHĝ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ñD MDNZLG]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ÈSRSURVWXRELHNWDPL NWö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\PHOHPHQFLH WHQE\ï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]HQLD QDSU]\NïDGclick, blur, mouseover  NRGXSRFKRG]ÈFHJR]IXQNFMLZ\ZRïDQLD ]ZURWQHJR :NRG]LHSU]HGVWDZLRQ\PQDVWURQLHSRSUDZHM ZDUWRĂFLÈPHWRG\MHVWIXQNFMDZ\ZRïDQLD ]ZURWQHJR 7DNLHUR]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 LQGHNVX SRGREQLHMDNZWDEOLF\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ïDGWHNVW text KDVïR password SU]\FLVN RSFML radio SROHZ\ERUX checkbox 

                                name

                                3RELHUDOXEXVWDZLDZDUWRĂÊDWU\EXWXname

                                defaultValue

                                :DUWRĂÊSRF]ÈWNRZDSRODOXEREV]DUXWHNVWRZHJRSRZ\JHQHURZDQLXVWURQ\

                                form

                                )RUPXODU]GRNWöUHJRQDOHĝ\NRQWUROND

                                disabled

                                :\ïÈF]HQLHHOHPHQWX

                                checked

                                :VND]XMHF]\SROHZ\ERUX OXESU]\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\ERUX OXESU]\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ÈHOHPHQWX QDSU]\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.js RPDZLDQ\ 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]D LMHGQRF]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\P DQLH 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\SHV HOHPHQWV>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\ğNDFML NDĝ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\ğNDFML WRW\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 IRU YDUğHOGLQYDOLG ^6SUDZG]HQLHZïDĂFLZRĂFLRELHNWXYDOLG LI YDOLG>ğ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 HOHPHQWX SDWU]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\

                                IXQFWLRQYDOLGDWH5HTXLUHG HO ^ 1 LI LV5HTXLUHG HO ^&]\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]PLHQQHMYDOLG WUXHIDOVH

                                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]H NRGZNRORU]H QLHELHVNLP MHVWSU]H]QDF]RQH GODSU]HJOÈGDUHNREVïXJXMÈF\FK DWU\EXWrequiredZSURZDG]RQ\ Z+70/'UXJL NRGZNRORU]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

                                IXQFWLRQLV5HTXLUHG HO ^ 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ÈWHNVW text 

                                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 = { HPDLOIXQFWLRQ HO ^ 6SUDZG]HQLHDGUHVX HPDLO }, QXPEHUIXQFWLRQ HO ^ 6SUDZG]HQLHF]\ ZDUWRĂÊMHVWOLF]EÈ }, GDWHIXQFWLRQ HO ^ 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 MHGHQSDUDPHWU FLÈ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

                                HPDLOIXQFWLRQ HO ^8WZRU]HQLHPHWRG\HPDLO  var valid = /[^@]+@[^@]+/.test(el.value); :\QLNWHVWXMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMYDOLG if (!valid) { -HĝHOLZDUWRĂFLÈ]PLHQQHMYDOLGQLHMHVWWUXH 2 3 VHW(UURU0HVVDJH HOij3URV]Ú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ĂÊ ]PLHQQHMvalid PRĝ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 validMHVWtrue ZSU]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