JavaScript i jQuery: Interaktywne strony WWW dla każdego

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<h1> QDVWURQLHOXEWHĝZV]\VWNLFK<li>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 '(&<=-(,3}7/( =PLHQQDiPRĝHE\ÊZ\NRU]\VWDQDZHZQÈWU]SÚWOL :RPDZLDQ\PSU]\NïDG]LHMHVW Xĝ\ZDQDZFHOXZ\ĂZLHWOHQLD OLF]E\QDVWURQLH 3RZ\NRQDQLXSROHFHñ ZSÚWOLQDVWÚSXMHLQNUHPHQWDFMD ]PLHQQHMi. ']LDïDQLHSÚWOLNRñF]\VLÚJG\ ZDUXQHNQLHSU]\MPXMHGïXĝHM ZDUWRĂFLtrue6NU\SWSU]HFKRG]LGRNROHMQHJRZLHUV]DNRGX SREORNXSÚWOL '(&<=-(,3}7/( 179 DiagramyLLNRQRJUDğNLVÈSU]HGVWDZLRQHQD FLHPQ\PWOH6WDQRZLÈSURVWÈZL]XDOQÈSUH]HQWDFMÚ RPDZLDQ\FK]DJDGQLHñ PODSUMOWANIE PRZYKŁAD PODSTAWOWE INSTRUKCJE JAVASCRIPT AJAX I JSON f 6NU\SWVNïDGDVLÚ]VHULLSROHFHñ]NWöU\FKNDĝGHSU]\SRPLQD NURNZSU]HSLVLHNXOLQDUQ\P :W\PSU]\NïDG]LHZ\ĂZLHWODQHVÈLQIRUPDFMHGRW\F]ÈFHWU]HFKZ\GDU]Hñ'DQHSRFKRG]È]WU]HFK UöĝQ\FKěUöGHï f 6NU\SW]DZLHUDEDUG]RGRNïDGQHLQVWUXNFMH1DSU]\NïDG QDND]XMH]DSDPLÚWDQLHZDUWRĂFLSU]HGSU]HSURZDG]HQLHP REOLF]Hñ]MHMXĝ\FLHP 3RGF]DVZF]\W\ZDQLDVWURQ\LQIRUPDFMHGRW\F]ÈFHPLHMVF Z\GDU]HñVÈXPLHV]F]DQHZNRG]LH+70/.LHG\Xĝ\WNRZQLNNOLNQLH ]GDU]HQLHZOHZHMNROXPQLHĂURGNRZDEÚG]LH]DZLHUDÊKDUPRQRJUDPZ\EUDQHJR]GDU]HQLD f =PLHQQHVïXĝÈGRW\PF]DVRZHJRSU]HFKRZ\ZDQLDGDQ\FK Z\NRU]\VW\ZDQ\FKZVNU\SFLH :OHZHMNROXPQLHïÈF]DPDMÈDWU\EXWidNWöUHJRZDUWRĂÊWRGZXOLWHURZ\LGHQW\ğNDWRUVWDQXZ86$ZNWöU\PEÚG]LHPLDïRPLHMVFH GDQHZ\GDU]HQLH <a id=”tx” href=”tx.html”>... Austin, TX</a> f 7DEOLFDWR]PLHQQDVSHFMDOQHJRW\SXĽPRĝHSU]HFKRZ\ZDÊ ZLHOHHOHPHQWöZSRZLÈ]DQ\FK]HVREÈGDQ\FK +DUPRQRJUDP\Z\GDU]HñVÈSU]HFKRZ\ZDQHZRELHNFLH-621 Z]HZQÚWU]Q\PSOLNXSREUDQ\PSRGF]DVZF]\W\ZDQLDPRGHOX'20 *G\Xĝ\WNRZQLNNOLNQLHZ\EUDQÈVHVMÚZĂURGNRZHMNROXPQLHMHM RSLVSRMDZLVLÚZNROXPQLHSUDZHM f -DYD6FULSWUR]UöĝQLDZDUWRĂFLOLF]ERZH ļ FLÈJLWHNVWRZH WHNVW RUD]ZDUWRĂFLERRORZVNLH trueLfalse :ĂURGNRZHMNROXPQLHZ\ĂZLHWODMÈFHMKDUPRQRJUDP\Z\GDU]HñW\WXï NDĝGHMVHVMLMHVWZVWDZLDQ\ZHZQÈWU]ïÈF]DSRZRGXMÈFHJRZ\ĂZLHWOHQLHLQIRUPDFMLRGDQHMVHVML <a href=”descriptions.html#Circuit-Hacking”> Circuit Hacking</a> f 1DSRGVWDZLHZ\UDĝHQLDMHVWREOLF]DQDMHGQDZDUWRĂÊ f 3RGF]DVREOLF]DQLDZDUWRĂFLZ\UDĝHQLDRSLHUDMÈVLÚ QDRSHUDWRUDFK 2SLV\ZV]\VWNLFKVHVMLVÈSU]HFKRZ\ZDQHZSOLNX+70/ 3RV]F]HJöOQHRSLV\VHVMLVÈZ\ELHUDQH]DSRPRFÈPHWRG\M4XHU\ RQD]ZLH.load()RUD]VHOHNWRUD#SU]HGVWDZLRQHJRZSRGUR]G]LDOH ķ:F]\W\ZDQLH]DZDUWRĂFL+70/QDVWURQLH]Z\NRU]\VWDQLHP M4XHU\ĵ :SUDZHMNROXPQLHRSLVVHVMLMHVWSRELHUDQ\]SOLNX+70/.DĝGD VHVMDMHVWSU]HFKRZ\ZDQDZHOHPHQFLHNWöUHJRDWU\EXWid]DZLHUD W\WXïVHVML ZUD]]HVSDFMDPL]DVWÈSLRQ\PLïÈF]QLNDPL <div id=”Wprowadzenie-do-modelowania-3D”> <h3>:SURZDG]HQLHGRĂZLDWD'</h3> <p>3U]\MGěLSU]HNRQDMVLÚMDNWZRU]\ÊPRGHOH'</p> </div> 3RQLHZDĝïÈF]DVÈGRGDZDQHLXVXZDQHZSU]\NïDG]LHXĝ\WR GHOHJDFML]GDU]Hñ 406 AJAX I JSON AJAX I JSON 407 3U]\NïDGWRSRGVXPRZDQLHLQIRUPDFMLSU]HGVWDZLRQ\FKZGDQ\PUR]G]LDOHSRND]XMHSUDNW\F]Q\ VSRVöELFK]DVWRVRZDQLD 90 PODSTAWOWE INSTRUKCJE JAVASCRIPT 1DNRñFXNDĝGHJRUR]G]LDïX]QDMG]LHV]podsumowanie=DZLHUDRQRNOXF]RZH]DJDGQLHQLDRPöZLRQH ZGDQ\PUR]G]LDOH WPROWADZENIE 7 JAK JAVASCRIPT ZAPEWNIA WIĘKSZĄ INTERAKTYWNOŚĆ STRON INTERNETOWYCH? -DYD6FULSW ]DSHZQLDZLÚNV]È LQWHUDNW\ZQRĂÊVWURQ LQWHUQHWRZ\FKSRQLHZDĝ XPRĝOLZLDPRG\ğNRZDQLH LFK]DZDUWRĂFLRUD] NRGX]QDF]QLNöZ G]LÚNLNWöU\PVWURQ\WH PRJÈE\ÊZ\ĂZLHWODQH ZSU]HJOÈGDUNDFK 1 DOSTĘP DO ZAWARTOŚCI -DYD6FULSWPRĝQDZ\NRU]\VWDÊGRZ\EUDQLD GRZROQHJRHOHPHQWXDWU\EXWXOXEWHNVWX QDVWURQLH+70/1DSU]\NïDG • Z\ELHU]WHNVW]QDMGXMÈF\VLÚZHZV]\VW• • NLFKHOHPHQWDFK<h1>QDVWURQLH Z\ELHU]ZV]\VWNLHHOHPHQW\NWöUHPDMÈ SU]\SLVDQ\DWU\EXWclassRZDUWRĂFL note VSUDZGěGDQHZSURZDG]RQHZSROX GDQ\FKZHMĂFLRZ\FKNWöUHPDSU]\SLVDQ\DWU\EXWidRZDUWRĂFLemail 2 MODYFIKACJA ZAWARTOŚCI STRONY -DYD6FULSWPRĝQDZ\NRU]\VWDÊZFHOXGRGDZDQLDHOHPHQWöZDWU\EXWöZRUD]WHNVWX QDVWURQLHEÈGěWHĝZFHOXLFKXVXZDQLD 6SUöEXMQDSU]\NïDG • GRGDÊDNDSLWWHNVWXSRSLHUZV]\P • • 8 WPROWADZENIE HOHPHQFLH<h1> ]PLHQLÊZDUWRĂÊDWU\EXWöZclassZFHOX SU]\SLVDQLDW\PHOHPHQWRPLQQ\FKVW\OöZ &66 ]PLHQLÊZLHONRĂÊOXESRïRĝHQLHHOHPHQWX <img> 3 REGUŁY PROGRAMU ,VWQLHMHPRĝOLZRĂÊ]GHğQLRZDQLDNURNöZ Z\NRQ\ZDQ\FKSU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈ QDZ]öUSU]HSLVXNXOLQDUQHJR NWöUHSR]ZROÈ MHMQDX]\VNDQLHGRVWÚSXGR]DZDUWRĂFLVWURQ\ L]PLDQÚWHM]DZDUWRĂFL1DSU]\NïDG • VNU\SWJDOHULLPRĝHVSUDZG]LÊF]\Xĝ\WNRZ• • QLNNOLNQÈïREUD]LMHĂOLWDNWRZ\ĂZLHWOLÊ ZLÚNV]ÈZHUVMÚWHJRREUD]X NDONXODWRUNRV]WXNUHG\WXKLSRWHF]QHJR PRĝHSREUDÊZDUWRĂFL]IRUPXODU]D SU]HSURZDG]LÊREOLF]HQLDLZ\ĂZLHWOLÊ Z\VRNRĂÊUDW\ ZWUDNFLHDQLPDFMLDSOLNDFMDPRĝH VSUDZG]LÊZ\PLDU\RNQDSU]HJOÈGDUNL LQWHUQHWRZHMDQDVWÚSQLHSU]HVXQÈÊREUD] QDGöïZLGRF]QHJRREV]DUX QD]\ZDQHJR WDNĝHviewport :MÚ]\NX-DYD6FULSW VWRVRZDQ\FKMHVWZLHOHWUDG\F\MQ\FK UHJXïSURJUDPRZDQLD ']LÚNLXĝ\FLXNRGX-DYD6FULSWVWURQD LQWHUQHWRZDPRĝHE\ÊSRVWU]HJDQD MDNREDUG]LHMLQWHUDNW\ZQD SRQLHZDĝUHDJXMHQDG]LDïDQLD SRGHMPRZDQHSU]H] Xĝ\WNRZQLND 4 REAKCJA NA ZDARZENIA 0RĝQDRNUHĂOLÊĝHVNU\SWSRZLQLHQE\Ê Z\NRQDQ\SRZ\VWÈSLHQLXZVND]DQHJR ]GDU]HQLD1DSU]\NïDGZ\NRQDQLHVNU\SWX PRĝHQDVWÈSLÊQDVNXWHN • NOLNQLÚFLDSU]\FLVNX • NOLNQLÚFLDïÈF]D • XPLHV]F]HQLDNXUVRUDP\V]\QDG • • • HOHPHQWHP ZSURZDG]HQLDGDQ\FKGRIRUPXODU]D VLHFLRZHJR XSï\ZXRNUHĂORQHJRF]DVX ]DNRñF]HQLDZF]\W\ZDQLDVWURQ\ LQWHUQHWRZHM WPROWADZENIE 9 PRZYKŁADY UŻYCIA KODU JAVASCRIPT W PRZEGLĄDARCE INTERNETOWEJ 0RĝOLZRĂÊ]PLDQ\]DZDUWRĂFL VWURQ\+70/SRMHMZF]\WDQLX ZSU]HJOÈGDUFHLQWHUQHWRZHM WRSRWÚĝQDIXQNFMD:\PLHQLRQH SRQLĝHMSU]\NïDG\RSLHUDMÈVLÚQD PRĝOLZRĂFLX]\VNDQLDGRVWÚSX GR]DZDUWRĂFLVWURQ\ PRG\ğNDFML]DZDUWRĂFLVWURQ\ UHJXïDFKSURJUDPXOXESROHFHQLDFK SU]H]QDF]RQ\FKGODSU]HJOÈGDUNL LQWHUQHWRZHM UHDNFMLQD]GDU]HQLDZ\ZRï\ZDQH SU]H]Xĝ\WNRZQLNDOXESU]HJOÈGDUNÚ LQWHUQHWRZÈ POKAZ SLAJDÓW 3U]HGVWDZLRQ\ZUR]G]LDOH 3RND]VODMGöZPRĝHZ\ĂZLHWOLÊZLHOHUöĝQ\FK REUD]öZ OXE]DZDUWRĂÊ+70/ ZW\PVDP\P PLHMVFXQDVWURQLH6ODMG\VÈRGWZDU]DQH DXWRPDW\F]QLHMDNRVHNZHQFMDOXEUÚF]QLHJG\ Xĝ\WNRZQLNSRUXV]DVLÚPLÚG]\SRV]F]HJöOQ\PL VODMGDPL']LÚNLSRND]RZLVODMGöZPRĝQD Z\ĂZLHWOLÊZLÚNV]ÈLORĂÊWUHĂFLQDRJUDQLF]RQ\P REV]DU]HVWURQ\ 5HDNFMDVNU\SWMHVWZ\ZRï\ZDQ\SRGF]DV ZF]\W\ZDQLDVWURQ\ 'RVWÚSSREUDQLHZV]\VWNLFKVODMGöZ]SRND]X VODMGöZ 0RG\ğNDFMDZ\ĂZLHWOHQLHW\ONRSLHUZV]HJRVODMGX XNU\FLHSR]RVWDï\FK 3URJUDPXVWDZLHQLHOLF]QLNDF]DVXRNUHĂODMÈFHJR PRPHQWZ\ĂZLHWOHQLDNROHMQHJRVODMGX 0RG\ğNDFMD]PLDQDZ\ĂZLHWODQHJRVODMGX 5HDNFMDXĝ\WNRZQLNNOLNDSU]\FLVNR]QDF]DMÈF\ LQQ\VODMG 3URJUDPXVWDOHQLHVODMGXNWöU\SRZLQLHQE\Ê Z\ĂZLHWORQ\ 0RG\ğNDFMDZ\ĂZLHWOHQLHNOLNQLÚWHJRVODMGX 10 WPROWADZENIE 3U]\NïDG\Z\PLHQLRQHQDW\FKGZöFKVWURQDFK GDMÈSU]HGVPDNPRĝOLZRĂFLNRGX-DYD6FULSWQD VWURQLHLQWHUQHWRZHMRUD]WHFKQLNSUH]HQWRZDQ\FK ZNVLÈĝFH :NROHMQ\FKUR]G]LDïDFKGRZLHV]VLÚMDNLNLHG\ X]\VNDÊGRVWÚSOXEPRG\ğNRZDÊ]DZDUWRĂÊ GRGDZDÊUHJXï\SURJUDPRZDQLDLUHDJRZDÊQD ]GDU]HQLD FORMULARZE SIECIOWE 3U]HGVWDZLRQHZUR]G]LDOH :HU\ğNDFMDIRUPXODU]\VLHFLRZ\FK VSUDZG]HQLH F]\]RVWDï\SUDZLGïRZRZ\SHïQLRQH MHVWQLH]Z\NOH ZDĝQDMHĂOLGDQHZHMĂFLRZHDSOLNDFMLVÈGRVWDUF]DQHSU]H]Xĝ\WNRZQLND-DYD6FULSWPRĝHSRLQIRUPRZDÊXĝ\WNRZQLNDREïÚGQLHZSURZDG]RQ\FK GDQ\FK3RQDGWRSRWUDğSU]HSURZDG]LÊVNRPSOLNRZDQHREOLF]HQLDQDSRGVWDZLHGRZROQ\FKGDQ\FK ZSURZDG]RQ\FKSU]H]Xĝ\WNRZQLNDDQDVWÚSQLH SU]HND]DÊXĝ\WNRZQLNRZLZ\QLNREOLF]Hñ ReakcjaSRZSURZDG]HQLXQD]Z\Xĝ\WNRZQLN NOLNQÈïSU]\FLVNZ\V\ïDMÈF\IRUPXODU] 'RVWÚSVNU\SWSRELHUDZDUWRĂÊ]SRODIRUPXODU]D VLHFLRZHJR ProgramVSUDZG]HQLHF]\QD]ZDXĝ\WNRZQLND MHVWZ\VWDUF]DMÈFRGïXJD 0RG\ğNDFMDZ\ĂZLHWOHQLHNRPXQLNDWXLQIRUPXMÈFHJRĝHQD]ZDXĝ\WNRZQLND]DZLHUD]E\WPDïR ]QDNöZ ODŚWIEŻENIE FRAGMENTU STRONY 3U]HGVWDZLRQHZUR]G]LDOH %\ÊPRĝHQLHFKFHV]Z\PXV]DÊQDRGZLHG]DMÈF\FKRGĂZLHĝHQLD]DZDUWRĂFLFDïHMVWURQ\ LQWHUQHWRZHM]ZïDV]F]DJG\XDNWXDOQLRQ\PDE\Ê W\ONRMHMQLHZLHONLIUDJPHQW2GĂZLHĝHQLHW\ONR IUDJPHQWXVWURQ\PRĝHGDZDÊXĝ\WNRZQLNRZL SRF]XFLHĝHG]LDïDRQDV]\EFLHMLSRGREQLHMDN ]Z\NïDDSOLNDFMDNRPSXWHURZD ReakcjaNOLNQLÚFLHïÈF]DSU]H]Xĝ\WNRZQLND SRZRGXMHZ\ZRïDQLHVNU\SWX 'RVWÚSNOLNQLÚWHïÈF]H ProgramZF]\WDQLHQRZHM]DZDUWRĂFLZVND]\ZDQHMSU]H]NOLNQLÚWHïÈF]H 'RVWÚSZ\V]XNDQLHHOHPHQWöZGR]DVWÈSLHQLDQD VWURQLH 0RG\ğNDFMD]DVWÈSLHQLH]DZDUWRĂFLQRZÈ WPROWADZENIE 11 FILTROWANIE DANYCH 3U]HGVWDZLRQHZUR]G]LDOH -HĝHOLQDVWURQLHPD]RVWDÊZ\ĂZLHWORQ\FK ZLHOHLQIRUPDFMLWRPRĝQDSRPöFXĝ\WNRZQLNRP ZZ\V]XNLZDQLXSRWU]HEQ\FKLPLQIRUPDFMLSU]H] ]DSHZQLHQLHREVïXJLğOWUöZ:RPDZLDQ\P SU]\NïDG]LHEÚGÈWRSU]\FLVNLZ\JHQHURZDQHQD SRGVWDZLHGDQ\FKZDWU\EXWDFKHOHPHQWöZ+70/ <img>.LHG\Xĝ\WNRZQLNNOLNQLHMHGHQ]SU]\FLVNöZZöZF]DVZ\ĂZLHWODQHVÈW\ONRWHREUD]\ NWöUHPDMÈSU]\SLVDQHVïRZRNOXF]RZHZVND]DQH SU]H]NOLNQLÚW\SU]\FLVN ReakcjaVNU\SWMHVWZ\ZRï\ZDQ\SRGF]DV ZF]\W\ZDQLDVWURQ\ Program]HEUDQLHVïöZNOXF]RZ\FK]GHğQLRZDQ\FKZREUD]DFK Program]DPLDQDVïöZNOXF]RZ\FKQDSU]\FLVNL NWöUHPRJÈE\ÊNOLNDQHSU]H]Xĝ\WNRZQLND ReakcjaXĝ\WNRZQLNNOLNDMHGHQ]SU]\FLVNöZ ProgramZ\V]XNDQLH]ELRUXREUD]öZNWöUH SRZLQQ\E\ÊZ\ĂZLHWORQH 0RG\ğNDFMDZ\ĂZLHWOHQLHSRG]ELRUXREUD]öZ NWöUHXĝ\ZDMÈGDQHJRWDJX 12 WPROWADZENIE STRUKTURA KSIĄŻKI $E\ĂPöJïQDXF]\ÊVLÚ]WHMNVLÈĝNLMÚ]\ND-DYD6FULSW ]RVWDïDRQDSRG]LHORQDQDGZLHF]ÚĂFL KONCEPCJE PODSTAWOWE PRAKTYCZNE APLIKACJE 3LHUZV]HG]LHZLÚÊUR]G]LDïöZVWDQRZLZSURZDG]HQLHGRSRGVWDZSURJUDPRZDQLDZMÚ]\NX -DYD6FULSW'RZLHV]VLÚMDNXĝ\ZDÊ-DYD6FULSWGR XWZRU]HQLDEDUG]LHMSU]\FLÈJDMÈF\FKLQWHUDNW\ZQ\FKLXĝ\WHF]Q\FKZLWU\QLQWHUQHWRZ\FK 'RWHJRPLHMVFDNVLÈĝNLSR]QDV]MXĝZLHOHSU]\NïDGöZXĝ\FLDMÚ]\ND-DYD6FULSWZSRSXODUQ\FK ZLWU\QDFKLQWHUQHWRZ\FK3R]QDQHGRWÈGWHFKQLNL Z\NRU]\VWDP\ZSUDNW\F]Q\FKGHPRQVWUDFMDFK Xĝ\FLDMÚ]\ND-DYD6FULSWSU]H]SURIHVMRQDOQ\FK SURJUDPLVWöZ1LHW\ONRSR]QDV]SU]\NïDG\ Z\PDJDMÈFHFDïHJRUR]G]LDïXDOHUöZQLHĝGRZLHV] VLÚZLÚFHMRSURFHVLHSURMHNWRZDQLDLWZRU]HQLD VNU\SWöZ]XSHïQLHRGSRF]ÈWNX :UR]G]LDOHSR]QDV]NOXF]RZHNRQFHSFMH ]ZLÈ]DQH]SURJUDPRZDQLHPNRPSXWHURZ\P =REDF]\V]MDN]DSRPRFÈGDQ\FKNRPSXWHUWZRU]\PRGHOU]HF]\ZLVWHJRĂZLDWDRUD]MDNPRĝQD Z\NRU]\VWDÊ-DYD6FULSWGR]PLDQ\]DZDUWRĂFL VWURQ\+70/ :UR]G]LDïDFKRGGR]RVWDQÈRPöZLRQH SRGVWDZ\MÚ]\ND-DYD6FULSW :UR]G]LDOH]REDF]\V]MDNRELHNWRZ\PRGHO GRNXPHQWX DQJDocument Object Model SR]ZDODQDX]\VNDQLHGRVWÚSXGRGRNXPHQWX L]PLDQÚMHJR]DZDUWRĂFLJG\]RVWDQLHZF]\WDQ\ ZSU]HJOÈGDUFHLQWHUQHWRZHM :UR]G]LDOHGRZLHV]VLÚMDN]DSRPRFÈ ]GDU]HñZ\ZRï\ZDÊNRG :UR]G]LDOHSU]HNRQDV]VLÚĝHELEOLRWHND M4XHU\PRĝH]QDF]QLHSU]\VSLHV]\ÊLXïDWZLÊ SURFHVWZRU]HQLDVNU\SWöZ :UR]G]LDOH]RVWDQLHZSURZDG]RQDWHFKQRORJLD $MD[F]\OL]ELöUWHFKQLNSR]ZDODMÈF\FKQD]PLDQÚ IUDJPHQWXVWURQ\LQWHUQHWRZHMEH]NRQLHF]QRĂFL RGĂZLHĝDQLDFDïHMVWURQ\ :UR]G]LDOH]DMPLHP\VLÚREVïXJÈEïÚGöZ GHEXJRZDQLHPDWDNĝHVSRVREDPLSU]HWZDU]DQLD NRGX-DYD6FULSW :UR]G]LDOHSR]QDV]WHFKQLNLWZRU]HQLD SDQHOL]DZDUWRĂFLWDNLFKMDNSRND]\VODMGöZRNQD PRGDOQHNDUW\LSDQHOHW\SXDFFRUGLRQ :UR]G]LDOHSU]HGVWDZLRQ\FKEÚG]LHNLOND WHFKQLNğOWURZDQLDLVRUWRZDQLDGDQ\FK2PöZLRQH]DJDGQLHQLDREHMPXMÈğOWURZDQLHJDOHULL REUD]öZDWDNĝH]PLDQÚNROHMQRĂFLZLHUV]\WDEHOL SRNOLNQLÚFLXQDJïöZNDNROXPQ\ :UR]G]LDOH]DMPLHP\VLÚXVSUDZQLHQLDPL RUD]ZHU\ğNDFMÈSöOIRUPXODU]DVLHFLRZHJR -HĂOLQLHMHVWHĂSURJUDPLVWÈQDMOHSV]\PUR]ZLÈ]DQLHPEÚG]LHOHNWXUDWHMNVLÈĝNLRGSRF]ÈWNX GRNRñFD3R]GRE\FLXSHZQHJRGRĂZLDGF]HQLD PRĝHV]SRWUDNWRZDÊMÈMDNRXĝ\WHF]Q\SU]HZRGQLN SRGF]DVWZRU]HQLDZïDVQ\FKVNU\SWöZ :UR]G]LDOH]DMPLHP\VLÚLQWHUIHMVDPLSURJUDPRZDQLDDSOLNDFML $3, PLÚG]\LQQ\PLQRZ\P $3,EÚGÈF\PF]ÚĂFLÈVWDQGDUGX+70/LZLWU\Q WDNLFKMDN*RRJOH0DSV WPROWADZENIE 13 KRÓTKIE WPROWADZENIE DO HTML I CSS =DQLPSU]HMG]LHP\GRMÚ]\ND-DYD6FULSWZDUWRZ\MDĂQLÊSHZQHSRMÚFLD ]ZLÈ]DQH]+70/L&66=ZUöÊXZDJÚMDNDWU\EXW\+70/LZïDĂFLZRĂFL&66 Xĝ\ZDMÈSDUQD]ZDZDUWRĂÊ ELEMENTY HTML (OHPHQW\+70/VÈGRGDZDQH GR]DZDUWRĂFLVWURQ\ZFHOX RSLVDQLDMHMVWUXNWXU\(OHPHQW VNïDGDVLÚ]H]QDF]QLNöZ RWZLHUDMÈFHJRL]DP\NDMÈFHJR RUD]]MHJR]DZDUWRĂFL =QDF]QLNL]Z\NOHSRMDZLDMÈVLÚ SDUDPLRWZLHUDMÈF\L]DP\NDMÈF\,VWQLHMHWDNĝHNLONDSXVW\FK HOHPHQWöZSR]EDZLRQ\FK ]DZDUWRĂFLQDSU]\NïDG<img> :öZF]DVVÈWRSRMHG\QF]H VDPR]DP\NDMÈFHVLÚ]QDF]QLNL Znacznik otwierający =QDF]QLNRWZLHUDMÈF\PRĝH ]DZLHUDÊDWU\EXW\GRVWDUF]DMÈFHGRGDWNRZ\FKLQIRUPDFML RGDQ\PHOHPHQFLH$WU\EXWPD QD]ZÚLZDUWRĂÊNWöUDQDMF]ÚĂFLHMMHVWXMÚWDZFXG]\VïöZ Znacznik zamykający <p class=”owoce”>brzoskwinie</p> Nazwa atrybutu 14 WPROWADZENIE Wartość atrybutu REGUŁY CSS 5HJXï\&66VÈXĝ\ZDQHGR ZVND]DQLDZMDNLVSRVöE ]DZDUWRĂÊHOHPHQWX HOHPHQWöZ PDE\ÊZ\ĂZLHWODQDSU]H] SU]HJOÈGDUNÚLQWHUQHWRZÈ .DĝGDUHJXïDPDVHOHNWRULEORN GHNODUDFML 6HOHNWRURNUHĂODGRNWöUHJR HOHPHQWXOXEGRNWöU\FK HOHPHQWöZPD]DVWRVRZDQLH GDQDUHJXïD1DWRPLDVWEORN GHNODUDFML]DZLHUDUHJXï\ RNUHĂODMÈFHVSRVöEZ\ĂZLHWODQLD HOHPHQWXSU]H]SU]HJOÈGDUNÚ LQWHUQHWRZÈ Selektor .DĝGDGHNODUDFMDZEORNXPD ZïDĂFLZRĂÊ NRQWURORZDQ\ DVSHNW LZDUWRĂÊSU]\SLVDQÈ GDQHMZïDĂFLZRĂFL Blok deklaracji .owoce {color: pink;} Nazwa właściwości Wartość właściwości WPROWADZENIE OBSŁUGA W PRZEGLĄDARKACH INTERNETOWYCH 1LHNWöUH]SLHUZV]\FKSU]\NïDGöZZNVLÈĝFHQLHG]LDïDMÈZSU]HJOÈGDUFH ,QWHUQHW([SORUHULMHMZF]HĂQLHMV]\FKZHUVMDFK DOWHUQDW\ZQHSU]\NïDG\ NRGXG]LDïDMÈFHZ,(PRĝQDSREUDÊ]ZLWU\Q\http://javascriptbook.com/ :SöěQLHMV]\FKUR]G]LDïDFK]RVWDQÈSU]HGVWDZLRQHWHFKQLNLXĝ\FLD-DYD6FULSW ZVWDUV]\FKZHUVMDFKSU]HJOÈGDUHNLQWHUQHWRZ\FK :NDĝGHMZHUVMLSU]HJOÈGDUNLLQWHUQHWRZHM GRGDZDQHVÈQRZHIXQNFMH%DUG]RF]ÚVWRWH QRZHIXQNFMHXïDWZLDMÈZ\NRQ\ZDQLH]DGDñOXEVÈ X]QDZDQH]DOHSV]HQLĝVWDUV]HWHFKQLNL $E\XïDWZLÊ&LQDXNÚ-DYD6FULSWZSLHUZV]\FK NLONXUR]G]LDïDFKXĝ\WRSHZQ\FKIXQNFML WHJRMÚ]\NDNWöUHQLHVÈREVïXJLZDQHZ,( 1DV]F]ÚĂFLH 2GZLHG]DMÈF\ZLWU\Q\LQWHUQHWRZHQLH]DZV]H Xĝ\ZDMÈQDMQRZV]\FKZHUVMLSU]HJOÈGDUHNLGODWHJR SURJUDPLĂFLQLHPRJÈRSLHUDÊVLÚW\ONRLZ\ïÈF]QLH QDQDMQRZV]\FKWHFKQRORJLDFK • :SöěQLHMV]\FKUR]G]LDïDFKGRZLHV]VLÚMDN -DN]REDF]\V]PLÚG]\SU]HJOÈGDUNDPLLQWHUQHWRZ\PLZ\VWÚSXMHZLHOHQLHVSöMQRĂFLZSï\ZDMÈF\FK QDSUDFÚSURJUDPLVWöZ-DYD6FULSW%LEOLRWHND M4XHU\SRPDJDZSRNRQDQLXZVSRPQLDQ\FK QLHVSöMQRĂFL WRWDNĝHMHGHQ]QDMZDĝQLHMV]\FK SRZRGöZGODNWöU\FKELEOLRWHNDM4XHU\]GRE\ïD WDNGXĝÈSRSXODUQRĂÊZĂUöGSURJUDPLVWöZ ::: -HGQDN]DQLP]DF]QLHV]SR]QDZDÊ M4XHU\ZF]HĂQLHMZDUWRXVWDOLÊMDNLHIHNWFKFHV] X]\VNDÊ 16 WPROWADZENIE • SUDFRZDÊ],(LVWDUV]\PLZHUVMDPLSU]HJOÈGDUHNLQWHUQHWRZ\FKSRQLHZDĝZLHOXNOLHQWöZ RF]HNXMHĝHZLWU\Q\LQWHUQHWRZHEÚGÈG]LDïDï\ Z,(7RZ\PDJDSRSURVWXXWZRU]HQLDGRGDWNRZHJRNRGXLĂZLDGRPRĂFLQLHEH]SLHF]HñVWZD Z\VWÈSLHQLDSHZQ\FKSUREOHPöZ :Z\PLHQLRQHMZF]HĂQLHMZLWU\QLH]QDMG]LHV] DOWHUQDW\ZQHZHUVMHSU]\NïDGöZG]LDïDMÈFH WDNĝHZ,(8SHZQLMVLÚĝHSU]HF]\WDïHĂ NRPHQWDU]H]DPLHV]F]RQHZDOWHUQDW\ZQ\FK ZHUVMDFKSRQLHZDĝGRW\F]ÈRQHSUREOHPöZ NWöUHPRJÈVLÚSRMDZLÊSRGF]DVXĝ\FLDWHJR NRGX 1 ABC PROGRAMOWANIA =DQLPGRZLHV]VLÚMDNRGF]\W\ZDÊLWZRU]\ÊNRG ZMÚ]\NX-DYD6FULSWQDMSLHUZZDUWRSR]QDÊSHZQH NOXF]RZHNRQFHSFMHSURJUDPRZDQLD=RVWDQÈRQH RPöZLRQHZWU]HFKF]ÚĂFLDFK A &]\PMHVWVNU\SWLMDN PRĝQDJRXWZRU]\Ê" B C -DNNRPSXWHU\ZNRPSRQRZXMÈ VLÚZRWDF]DMÈF\QDVĂZLDW" -DNPRĝQDXWZRU]\ÊVNU\SW QDVWURQÚLQWHUQHWRZÈ" *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ñ 18 ABC PROGRAMOWANIA 1/a CZYM JEST SKRYPT I JAK MOŻNA GO UTWORZYĆ? ABC PROGRAMOWANIA 19 SKRYPT TO SERIA POLECEŃ Skrypt to seria poleceń wydawanych komputerowi, aby wykonał pewne = zadanie. Skrypt można porównać do dowolnego z poniższych elementów. PRZEPIS KULINARNY Wykonując we wskazanej PRZEWODNIK Duże firmy bardzo często PODRĘCZNIK kolejności polecenia podane = opracowują przewodniki dla = stają z podręcznika samochodu = podczas naprawy nieznanego = Mechanicy bardzo często korzy w przepisie, można po raz = nowych pracowników, w któ-= pierwszy przygotować nieznaną = rych przedstawione są proce-= im modelu. Wspomniany = wcześniej potrawę. dury stosowane w konkretnych = podrę sytuacjach. serii Pewne przepisy są łatwe i do-= tyczą tylko "jednowątkowego" = scenariusza, takiego jak prosty = opracowany dla pracownika = posiłek. Z kolei inne wymagają = hotelu może zawierać omó wykonania wielu zadań, których = nie kroków podejmowanych wynikiem ma być przygotowanie = podczas meldowania posiłku złożonego z trzech dań. sprzątania pokoju, o � e � �;t � k zawiera omówienie = ' przep Na przykład przewodnik = "'- �� Jeżeli stawiasz pierwsze kroki = �e � otyczące sposobów usunięcia = = = Na przykład mogą to być infor-= macje o sposobie sprawdzenia = hamulców. Jeżeli test zostanie = w programowaniu lub gotowa-= W każdej niu, będziesz musiał opanować = sytuacji dużo nowych terminów. wykony �roki związane = � kluczowych funkcji = ochodu, a także informacje = ewentualnych problemów. �� alarmu pożarowe ""\.. �i które należy = dzić, aby sprawdzić onych = cy muszą = ��ret4Mym typem zdarzenia. = �no nie chcesz, aby = z � """'- racownik przeglądał każdy= �ok omówiony w przewodniku, = """'-'\ podczas gdy gość hotelu czeka = � w recepcji). Podobna sytuacja = zaliczony, mechanik przechodzi = do kolejnego testu bez koniecz-= ności naprawy hamulców. = Natomiast niepowodzenie testu działania hamulców oznacza, = że mechanik musi wykonywać= polecenia pozwalające na ich = naprawę. ma miejsce w skomplikowanym = Po przeprowadzeniu naprawy = skrypcie- przeglądarka = ponownie wykonuje test hamul-= internetowa może używać tylko = ców i sprawdza, czy znaleziona = podzbioru kodu dostępnego = wcześniej usterka została = w danej chwili. usunięta. Jeżeli test zostaje = zaliczony, to mechanik wie, że = hamulce są naprawione, i może = przejść do kolejnego testu. Podobnie skrypty mogą pozwo-= lić przeglądarce internetowej na = sprawdzenie aktualnej sytuacji = i wykonanie zestawu kroków = tylko wtedy, gdy dana akcja jest = odpowiednia. @ ABC PROGRAMOWANIA UTWORZENIE SKRYPTU W celu utworzenia skryptu należy = najpierw zdefiniować cel, a następnie zastanowić się nad zadaniami, które muszą być wykonane, aby ten cel osiągnąć. Ludzie potrafią osiągać skomplikowane cele bez zbyt = długiego zastanawiania się nad tym. Na przykład = możesz prowadzić samochód, przygotować śniadanie = lub wysłać wiadomość e- mail i nie potrzebujesz do = tego zestawu dokładnych instrukcji. Jednak w trakcie = pierwszego wykonania dowolnego z wymienionych = zadań wydaje się ono skomplikowane. Dlatego też = podczas zdobywania nowych umiejętności nauka = jest często dzielona na mniejsze zadania, które = o � w wykonywaniu poszczególnych zadań, osiągni� wyznaczonego celu wydaje się łatwiejsze. 0V trzeba poznawać po kolei. Mając doświadczeni �� Pewne skrypty, które będziesz odczytyv�:ub,worzyć = po zakończeniu lektury niniejsze· ks· całkiem skomplikowane i na poc budzić grozę. Jednak skryp t poleceń, z których każde s z konkretnego problemu. Dlateg o ogą być = będą zapewne = stu seria krótkich = rozwiązania = też utworzenie skryptu = przypomina przygotowanie przepisu lub podręcznika = pozwalającego komputerowi na rozwiązanie układanki = krok po kroku. Warto w tym miejscu wspomnieć, że w przeciwień-= stwie do człowieka komputer nie uczy się sposobu = wykonywania zadań. Wymaga zestawu instrukcji = za każdym razem, gdy wykonuje dane zadanie. = Program musi dostarczyć komputerowi wystarczającej = ilości informacji szczegółowych, jakby zadanie za = każdym razem było wykonywane po raz pierwszy. @ ABC PROGRAMOWANIA Rozpocznij od określenia = ostatecznego celu, a następnie = podziel go na kilka mniejszych . 1: WYZNACZENIE CELU � określić zadanie do �� można się posłużyć= Przede wszystkim trz � � � Ol��tJ�ANIE SKRYPTU wykonania. W tym analogią do je do ułoże 2: łóżmy, że komputer ma = li • �� A� acowania skryptu wyznaczony cel odzielić na serię zadań wymaganych = � wykonania, aby ułożyć puzzle wspomniane = w poprzednim punkcie. Można się posiłkować = diagramem. Należy zapisać poszczególne kroki, które = muszą być wykonane przez komputer w celu = zakończenia zadań cząstkowych. (Nie zapomnij = tutaj o informacjach wymaganych do wykonania = zadań). To jest podejście odmienne od na przykład = opracowania przepisu, którego kolejne kroki są = wykonywane. UTWORZENIE KODU POSZCZEGÓLNYCH KROKÓW 3: Każdy krok należy zapisać w języku programowa nia zrozumiałym dla komputera. W omawianym = przypadku to będzie JavaScript. Być może korci Cię, aby od razu przystąpić do = tworzenia kodu. O wiele lepszym rozwiązaniem = będzie poświęcenie chwili na zastanowienie się = nad projektem skryptu przed faktycznym rozpo częciem jego tworzenia. ABC PROGRAMOWANIA @ OD KROKÓW DO KODU Każdy krok właściwy dla danego zadania wymienionego na diagramie musi być zapisany w języku zrozumiałym dla komputera. W tej książce koncentrujemy się na języku = JavaScript i sposobie jego użycia w przeglądar-= kach internetowych. Podobnie jak w przypadku nauki dowolnego = nowego języka konieczne jest poznanie: • ' · '-.� słownictwa, czyli słów zrozumiałych dla = komputera; • składni, czyli sposobu łączenia poszczególnych = słów, aby utworzyć instrukcje dla komputera. OV O � n� Jeżeli stawiasz pierwsze kroki na polu programo-= wania, to podczas nauki języka musisz również = poznać sposoby osiągania przez komputer = różnego rodzaju celów. Odbywa się to za po- � � � średnictwem programistycznego podejścia = do rozwiązywania problemów. X-1 o Komputery zachowują się niezwykle logicznie i są = bardzo posłuszne. Konieczne jest podanie każdego szczegółu operacji, które mają do wykonania. = Zrobią to wszystko bez słowa sprzeciwu. Ponieważ = w przeciwieństwie do człowieka potrzebują = różnego typu poleceń, każdy, kto rozpoczyna = naukę programowania, na początku popełnia = wiele błędów. Nie zniechęcaj się! W rozdziale l O. = poznasz kilka sposobów odkrywania potencjalnych = problemów- programiści nazywają to = debugowaniem. @ ABC PROGRAMOWANIA � � '-� 0XVLV]QDXF]\ÊVLÚķP\ĂOHÊMDN NRPSXWHUĵSRQLHZDĝNRPSXWHU\ Z\NRQXMÈ]DGDQLD]XSHïQLHLQDF]HM QLĝP\ .RPSXWHU\UR]ZLÈ]XMÈSUREOHP\ZVSRVöESURJUDPLVW\F]Q\Z\NRQXMÈVHULÚSROHFHñMHGQRSR GUXJLP7\S\QLH]EÚGQ\FKLQVWUXNFMLEDUG]RF]ÚVWR VÈRGPLHQQHRGSROHFHñZ\GDZDQ\FKF]ïRZLHNR ZL'ODWHJRWHĝQDVWURQDFKWHMNVLÈĝNLSR]QDV]QLH W\ONRZ\NRU]\VW\ZDQHZ-DYD6FULSWVïRZQLFWZR LVNïDGQLÚDOHUöZQLHĝVSRVöESU]\JRWRZ\ZDQLD LQVWUXNFMLNWöUHPRJÈE\ÊZ\NRQ\ZDQHSU]H] NRPSXWHU 6SöMU]QDU\VXQHNSROHZHMVWURQLH&]\PRĝHV] SRZLHG]LHÊNWöUD]SRND]DQ\FKQDQLPRVöEMHVW QDMZ\ĝV]D".RPSXWHUSRWU]HEXMHV]F]HJöïRZ\FK LQVWUXNFMLNWöUHEÚG]LHZ\NRQ\ZDïNURNSRNURNX 1. 2NUHĂOZ\VRNRĂÊSLHUZV]HMRVRE\ 2. 3U]\MPLM]DïRĝHQLHĝHWRMHVWQDMZ\ĝV]DRVRED 3. 6SUDZGěZ\VRNRĂÊSR]RVWDï\FKRVöESRNROHL LSRUöZQXMLFKZ\VRNRĂÊ]H]QDOH]LRQÈGRWÈG ķQDMZ\ĝV]ÈRVREÈĵ 4. -HĂOL]QDMG]LHV]RVREÚNWöUHMZ\VRNRĂÊMHVW ZLÚNV]DQLĝZ\VRNRĂÊDNWXDOQHMķQDMZ\ĝV]HM RVRE\ĵWRVWDMHVLÚRQDQRZÈķQDMZ\ĝV]È RVREÈĵ 5. 3RVSUDZG]HQLXZV]\VWNLFKRVöESRLQIRUPXM NWöUD]QLFKMHVWQDMZ\ĝV]D -DNZLG]LV]NRPSXWHUPXVLSU]HDQDOL]RZDÊ SRNROHLZV]\VWNLHRVRE\LSU]HSURZDG]LÊWHVW F]\DNWXDOQLHDQDOL]RZDQDRVREDMHVWZ\ĝV]D RG]QDOH]LRQHMGRWÈGQDMZ\ĝV]HM .RPSXWHUPRĝH XG]LHOLÊRGSRZLHG]LGRSLHURZWHG\JG\Z\NRQD WR]DGDQLHDQDOL]XMÈFZ\VRNRĂÊZV]\VWNLFKRVöE ABC PROGRAMOWANIA 27 ZDEFINIOWANIE CELU I OPRACOWANIE SKRYPTU 7HUD]]DSR]QDV]VLÚ]Z\MDĂQLHQLHPMDNPRĝQDSU]\JRWRZDÊ UöĝQHJRURG]DMXVNU\SW\:RPDZLDQ\PSU]\NïDG]LHREOLF]DQ\ MHVWNRV]WWDEOLF]NL]LPLHQLHPĽNOLHQWSïDFL]DNDĝGÈOLWHUÚ 3LHUZV]\P]DGDQLHPMHVWRNUHĂOHQLHFHOXVNU\SWX FRFKFHV]RVLÈJQÈÊ" .OLHQWPRĝH]DNXSLÊWDEOLF]NÚ]LPLHQLHPĽ NDĝGDOLWHUDNRV]WXMH]ï*G\Xĝ\WNRZQLNSRGD LPLÚZ\ĂZLHWONRV]WSU]\JRWRZDQLDWDEOLF]NL 1DVWÚSQLHG]LHOLP\FHOQDVHULÚ]DGDñNWöUH WU]HEDSRNROHLZ\NRQDÊDE\RVLÈJQÈÊZ\]QDF]R Q\FHO 1. 8UXFKRPLHQLHVNU\SWXQDVWÚSXMHSRNOLNQLÚFLX SU]\FLVNX 2. 6NU\SWSRELHUDLPLÚZSURZDG]RQHZSROX IRUPXODU]DVLHFLRZHJR 3. 6NU\SWVSUDZG]DF]\Xĝ\WNRZQLNZSURZDG]Lï GDQHZHMĂFLRZH 4. -HĝHOLXĝ\WNRZQLNQLHSRGDïĝDGQ\FKGDQ\FK QDHNUDQLHZ\ĂZLHWOLVLÚNRPXQLNDW]DFKÚFDMÈ F\GRSRGDQLDLPLHQLD 5. -HĝHOLXĝ\WNRZQLNSRGDïLPLÚQDOHĝ\REOLF]\Ê NRV]WSU]\JRWRZDQLDWDEOLF]NLPQRĝÈFOLF]EÚ OLWHUSU]H]NRV]WMHGQHMOLWHU\ 6. :\ĂZLHWOHQLHNRV]WXSU]\JRWRZDQLDWDEOLF]NL :\PLHQLRQHSRZ\ĝHMSXQNW\RGSRZLDGDMÈGLDJUD PRZLSU]HGVWDZLRQHPXQDVWURQLHSRSUDZHM 28 ABC PROGRAMOWANIA UMIESZCZENIE ZADAŃ NA DIAGRAMIE %DUG]RF]ÚVWRVLÚ]GDU]DĝHVNU\SW\PXV]ÈZ\NRQ\ZDÊUöĝQH]DGDQLD ZUR]PDLW\FKV\WXDFMDFK']LÚNLGLDJUDPRZLPRĝQDRNUHĂOLÊVSRVöE SRZLÈ]DQLD]DGDñ]HVREÈ'LDJUDPSRND]XMHWDNĝHSRïÈF]HQLDPLÚG]\ SRV]F]HJöOQ\PLNURNDPL 1 Po kliknięciu przycisku 2 Pobierz imię podane w polu formularza 3 Czy są jakiekolwiek dane do pobrania? 4 N T 6WU]DïNLSRND]XMÈMDNVNU\SWSU]HFKRG]LRG MHGQHJR]DGDQLDGRGUXJLHJR5öĝQHNV]WDïW\ SUH]HQWXMÈRGPLHQQHW\S\]DGDñ&]DVDPL VÈWRGHF\]MHNWöUHSRZRGXMÈ]PLDQÚĂFLHĝNL Z\NRQ\ZDQHJRNRGX 6SRVöE]DPLDQ\RPDZLDQHJRWXWDMSU]\NïDGX QDNRGSR]QDV]ZUR]G]LDOH1DVWURQDFKNVLÈĝNL ]REDF]\V]WDNĝHZLHOHLQQ\FKSU]\NïDGöZUöĝQ\FK GLDJUDPöZDSRQDGWR]DSR]QDV]VLÚ]NRGHP SRPDJDMÈF\PZV\WXDFMLGDQHJRW\SX Poproś użytkownika o podanie imienia 5 Oblicz koszt przygotowania tabliczki (litery · cena) 6 Wyświetl na ekranie koszt przygotowania tabliczki =DDZDQVRZDQLSURJUDPLĂFLXĝ\ZDMÈ RZLHOHEDUG]LHMVNRPSOLNRZDQ\FKGLDJUDPöZ ]DSURMHNWRZDQ\FKGRSU]HGVWDZLDQLDNRGX -HGQDNGRRGF]\WDQLDWDNLFKGLDJUDPöZ Z\PDJDQHVÈRGSRZLHGQLHXPLHMÚWQRĂFL 3U]HGVWDZLDQHWXWDMQLHIRUPDOQHGLDJUDP\SRPRJÈ &LZSR]QDQLXVSRVREöZG]LDïDQLDVNU\SWöZ ZWUDNFLHQDXNLMÚ]\ND LEGENDA DIAGRAMU Ogólny krok Zdarzenie Dane wejściowe lub wyjściowe Decyzja ABC PROGRAMOWANIA 29 PODSUMOWANIE ABC PROGRAMOWANIA A. Czym jest skrypt i jak można go utworzyć? f 6NU\SWWRVHULDLQVWUXNFMLNWöUHNRPSXWHUPRĝHZ\NRQDÊ DE\RVLÈJQÈÊZ\]QDF]RQ\FHO f :WUDNFLHNDĝGHJRXUXFKRPLHQLDVNU\SWXPRĝHE\ÊZ\NRQDQ\ MHG\QLHSRG]ELöUZV]\VWNLFKGRVWÚSQ\FKLQVWUXNFML f :\NRU]\VW\ZDQHSU]H]NRPSXWHU\SRGHMĂFLHZ]DNUHVLH Z\NRQ\ZDQLD]DGDñUöĝQLVLÚRGSRGHMĂFLDVWRVRZDQHJRSU]H] F]ïRZLHND:\GDZDQHLQVWUXNFMHPXV]ÈSR]ZROLÊNRPSXWHURZL QDSURJUDPLVW\F]QHZ\NRQDQLH]DGDQLD f $E\SU]\JRWRZDÊVNU\SWSRG]LHOFHOQDVHULÚ]DGDñ DQDVWÚSQLHRSUDFXMSRV]F]HJöOQHNURNLQLH]EÚGQHGR XNRñF]HQLD]DGDQLD WXWDMGLDJUDPPRĝHRND]DÊVLÚSRPRFQ\ 30 ABC PROGRAMOWANIA 1/b JAK KOMPUTERY WKOMPONOWUJĄ SIĘ W OTACZAJĄCY NAS ŚWIAT? ABC PROGRAMOWANIA 31 KOMPUTERY TWORZĄ MODELE ŚWIATA NA PODSTAWIE DANYCH 2WRPRGHOKRWHOXZUD]]GU]HZDPLOXGěPLLVDPRFKRGDPL 'ODF]ïRZLHNDMHVW]XSHïQLHMDVQHMDNLURG]DMU]HF]\ZLVWHJR RELHNWXSU]HGVWDZLDMÈSRV]F]HJöOQHPRGHOH 32 ABC PROGRAMOWANIA =NROHLNRPSXWHUQLHSRVLDGD SUHGHğQLRZDQHMNRQFHSFML F]\PMHVWKRWHOOXEVDPRFKöG =XSHïQLHQLH]QDLFKSU]H ]QDF]HQLD8ĝ\ZDQ\SU]H] &LHELHODSWRSOXEWHOHIRQQLHPD XOXELRQHMPDUNLVDPRFKRGX DWDNĝHQLHZLHLOHJZLD]GHN PDKRWHOZNWöU\PVLÚ ]DWU]\PDïHĂ :MDNLZLÚFVSRVöEZ\NRU]\ VWXMHP\NRPSXWHU\ZFHOX XWZRU]HQLDDSOLNDFMLSR]ZDOD MÈFHMQDGRNRQDQLHUH]HUZDFML ZKRWHOXOXEZFHOXVWZRU]HQLD JLHUZLGHRZNWöU\FKJUDF]H ĂFLJDMÈVLÚVDPRFKRGDPL" 2GSRZLHGěMHVWQDVWÚSXMÈFD SURJUDPLĂFLWZRU]ÈUöĝQHJR URG]DMXPRGHOH]ZïDV]F]DGOD NRPSXWHUöZ :VSRPQLDQHPRGHOHSRWU]HEXMÈ GDQ\FK1LHPDZW\PQLF G]LZQHJRĽGDQHWRZV]\VWNR F]HJRNRPSXWHUSRWU]HEXMHDE\ Z\NRQDÊZ\GDQHPXLQVWUXNFMH SURZDG]ÈFHGRUHDOL]RZDQLD ]DGDñ TYP OBIEKTU: HOTEL TYP OBIEKTU: SAMOCHÓD TYP OBIEKTU: SAMOCHÓD ABC PROGRAMOWANIA 33 OBIEKTY I WŁAŚCIWOŚCI -HĝHOLQLHZLG]LV]REUD]XSRND]XMÈFHJRKRWHOLVDPRFKRG\ WRPLPRZV]\VWNRGDQHSU]HGVWDZLRQHZUDPNDFK GRVWDUF]DMÈZLHOHLQIRUPDFMLRVFHQLH OBIEKTY (RZECZY) :ĂZLHFLHSURJUDPRZDQLDNRPSXWHURZHJRNDĝGÈ U]HF]ĂZLDWDğ]\F]QHJRPRĝQDSU]HGVWDZLÊ ZSRVWDFLRELHNWX,VWQLHMÈUöĝQHW\S\RELHNWöZ WXWDMWRKRWHOLVDPRFKöG 3URJUDPLĂFLSRZLHG]LHOLE\ĝHZRPDZLDQ\P SU]\NïDG]LHPDP\MHGHQHJ]HPSODU]RELHNWXKRWHO i dwa HJ]HPSODU]HRELHNWXVDPRFKöG .DĝG\RELHNWSRVLDGDZïDVQH • • ]GDU]HQLD • PHWRG\ ZïDĂFLZRĂFL 5D]HPSR]ZDODMÈRQHQDXWZRU]HQLHG]LDïDMÈFHJR PRGHOXGDQHJRRELHNWX WŁAŚCIWOŚCI (CECHY CHARAKTERYSTYCZNE) 2EDSRND]DQHVDPRFKRG\PDMÈWHVDPHFHFK\ FKDUDNWHU\VW\F]QH:U]HF]\ZLVWRĂFLNDĝG\ VDPRFKöGPDSURGXFHQWDNRORULSRMHPQRĂÊ VLOQLND,VWQLHMHQDZHWPRĝOLZRĂÊRNUHĂOHQLD MHJRDNWXDOQHMV]\ENRĂFL RLOHVLÚSRUXV]D :\PLHQLRQHFHFK\FKDUDNWHU\VW\F]QHVÈSU]H] SURJUDPLVWöZQD]\ZDQHZïDĂFLZRĂFLDPLRELHNWX .DĝGDZïDĂFLZRĂÊPDQD]ZÚ i ZDUWRĂÊ SRV]F]HJöOQHSDU\QD]ZDZDUWRĂÊGRVWDUF]DMÈ SHZQ\FKLQIRUPDFMLRHJ]HPSODU]XRELHNWX 1DMEDUG]LHMRF]\ZLVWÈZïDĂFLZRĂFLÈKRWHOX MHVWZïDĂFLZRĂÊname:DUWRĂÊZ\PLHQLRQHM ZïDĂFLZRĂFLWRQuay/LF]EÚSRNRLZW\PKRWHOX PRĝHV]SR]QDÊSDWU]ÈFQDZDUWRĂÊZïDĂFLZRĂFL rooms ,GHDSDUQD]ZDZDUWRĂÊMHVWVWRVRZDQD]DUöZQRZ+70/MDNL&66:NRG]LH]QDF]QLNöZ+70/DWU\EXW SU]\SRPLQDZïDĂFLZRĂÊSRV]F]HJöOQHDWU\EXW\PDMÈUöĝQHQD]Z\DNDĝGHPXDWU\EXWRZLPRĝHE\Ê SU]\SLVDQDZDUWRĂÊ3RGREQLHZVW\ODFK&66PRĝQD]PLHQLÊNRORUQDJïöZNDSU]H]XWZRU]HQLHUHJXï\ SU]\SLVXMÈFHMZïDĂFLZRĂFLcolorRGSRZLHGQLÈZDUWRĂÊOXE]PLHQLÊF]FLRQNÚSU]H]SU]\SLVDQLHZïDĂFLZRĂFL font-familyQD]Z\Z\EUDQHMF]FLRQNL3DU\QD]ZDZDUWRĂÊVÈZSURJUDPRZDQLXSRZV]HFKQH 34 ABC PROGRAMOWANIA OBIEKT HOTEL OBIEKT SAMOCHÓD 2ELHNWKRWHOZ\NRU]\VWXMHQD]Z\ZïDĂFLZRĂFL LLFKZDUWRĂFLZFHOXGRVWDUF]HQLDLQIRUPDFML RGDQ\PKRWHOXWDNLFKMDNMHJRQD]ZDOLF]ED JZLD]GHNOLF]EDSRNRLOLF]EDZROQ\FKSRNRLLWG 1DSRGVWDZLHW\FKLQIRUPDFMLPRĝQDWDNĝHXVWDOLÊ F]\KRWHOXGRVWÚSQLDRNUHĂORQHDWUDNFMH 2EDHJ]HPSODU]HRELHNWXVDPRFKöGZVSöïG]LHOÈ WHVDPHZïDĂFLZRĂFLFKRÊLFKZDUWRĂFLPRJÈE\Ê LQQH1DSRGVWDZLHZDUWRĂFLZïDĂFLZRĂFLPRĝQD XVWDOLÊSURGXFHQWDSRMD]GXMHJRDNWXDOQÈV]\E NRĂÊ RLOHZïDĂQLHVLÚSRUXV]D NRORUNDURVHULL LW\SSDOLZDNWöUHJRSRWU]HEXMH TYP OBIEKTU: HOTEL WŁAŚCIWOŚCI name name Quay rating rating 4 rooms rooms 42 bookings bookings 21 gym gym false pool pool true TYP OBIEKTU: SAMOCHÓD TYP OBIEKTU: SAMOCHÓD WŁAŚCIWOŚCI WŁAŚCIWOŚCI make make BMW make make Porsche currentSpeed currentSpeed 30 km/h currentSpeed currentSpeed 20 km/h color color srebrny color color srebrny fuel fuel diesel fuel fuel benzyna ABC PROGRAMOWANIA 35 ZDARZENIA :U]HF]\ZLVW\PĂZLHFLHOXG]LHXĝ\ZDMÈU]HF]\ RELHNWöZ =DFKRG]ÈFH LQWHUDNFMHPRJÈVSRZRGRZDÊ]PLDQÚZDUWRĂFLZïDĂFLZRĂFLRELHNWöZ CO TO JEST ZDARZENIE? CO ROBI ZDARZENIE? ,VWQLHMHZLHOHSRZV]HFKQLH]QDQ\FKVSRVREöZ LQWHUDNFMLOXG]L]UöĝQ\PLRELHNWDPL1D SU]\NïDGNLHURZFDVDPRFKRGXQDMF]ÚĂFLHMXĝ\ZD SU]\QDMPQLHMGZöFKSHGDïöZ6DPRFKöG]RVWDï ]EXGRZDQ\WDNDE\RGSRZLHGQLRUHDJRZDÊ JG\NLHURZFDMHQDFLVND 3URJUDPLĂFLZ\ELHUDMÈ]GDU]HQLDQDNWöUHEÚGÈ UHDJRZDÊWZRU]RQHSU]H]QLFKDSOLNDFMH'DQH ]GDU]HQLHPRĝQDZ\NRU]\VWDÊGRXUXFKRPLHQLD RNUHĂORQHJRIUDJPHQWXNRGX • SHGDïJD]XSRZRGXMH]ZLÚNV]HQLHV]\ENRĂFL VDPRFKRGX • SHGDïKDPXOFD]PQLHMV]DV]\ENRĂÊVDPRFKRGX 3RGREQLHSURJUDP\VÈ]DSURMHNWRZDQHGRZ\NR Q\ZDQLDUöĝQ\FKU]HF]\Z]DOHĝQRĂFLRGVSRVREX LQWHUDNFMLXĝ\WNRZQLND]NRPSXWHUHP*G\ Xĝ\WNRZQLNNOLNQLHQDSU]\NïDGïÈF]HKontakt na VWURQLHLQWHUQHWRZHMVSRZRGXMHWRZ\ĂZLHWOHQLH IRUPXODU]DNRQWDNWRZHJRQDWRPLDVWJG\ZSLV]H WHNVWZSROXZ\V]XNLZDQLD]RVWDQLHDXWRPDW\F] QLHXUXFKRPLRQDIXQNFMDZ\V]XNLZDQLD =GDU]HQLHSR]ZDODNRPSXWHURZLQDVWZLHUG]HQLH ķ+HMWRVLÚZïDĂQLH]GDU]\ïRĵ 36 ABC PROGRAMOWANIA :VNU\SWDFKEDUG]RF]ÚVWRUöĝQH]GDU]HQLD VÈZ\NRU]\VW\ZDQHGRXUXFKDPLDQLDUöĝQ\FK IXQNFMRQDOQRĂFL 6NU\SWZLÚFUHDJXMHQD]GDU]HQLD ]DZLHUDNRG NWöU\EÚG]LHXUXFKDPLDQ\SRZ\VWÈSLHQLXGDQHJR ]GDU]HQLD OBIEKT HOTEL OBIEKT SAMOCHÓD :KRWHOXUHJXODUQLHEÚGÈUH]HUZRZDQHSRNRMH :WUDNFLHNDĝGHMRSHUDFMLUH]HUZDFMLSRNRMX ]GDU]HQLHRQD]ZLHbookPRĝQDZ\NRU]\VWDÊ GRZ\NRQDQLDNZRGX]ZLÚNV]DMÈFHJRZDUWRĂÊ ZïDĂFLZRĂFLbookings3RGREQLH]GDU]HQLHcancel PRĝHZ\ZRïDÊNRGRGSRZLHG]LDOQ\]D]PQLHMV]H QLHZDUWRĂFLZïDĂFLZRĂFLbookings .LHURZFDZWUDNFLHMD]G\VDPRFKRGHPEÚG]LH ]ZLÚNV]DïL]PQLHMV]DïV]\ENRĂÊ=GDU]HQLH acceleratePRĝHZ\ZRïDÊNRG]ZLÚNV]DMÈF\ ZDUWRĂÊZïDĂFLZRĂFLcurrentSpeedQDWRPLDVW ]GDU]HQLHbrakeZ\ZRïDÊNRG]PQLHMV]DMÈF\ZDU WRĂÊZ\PLHQLRQHMZïDĂFLZRĂFL1DNROHMQHMVWURQLH GRZLHV]VLÚQLHFRZLÚFHMRNRG]LHUHDJXMÈF\PQD ]GDU]HQLDL]PLHQLDMÈF\PZDUWRĂÊZïDĂFLZRĂFL TYP OBIEKTU: HOTEL ZDARZENIE występuje gdy: book book tworzona jest nowa rezerwacja cancel cancel rezerwacja jest anulowana TYP OBIEKTU: SAMOCHÓD TYP OBIEKTU: SAMOCHÓD ZDARZENIE występuje gdy: ZDARZENIE występuje gdy: brake brake kierowca zwalnia brake brake kierowca zwalnia accelerate accelerate kierowca przyspiesza accelerate accelerate kierowca przyspiesza ABC PROGRAMOWANIA 37 METODY 0HWRG\WRLQDF]HMWRFROXG]LHURELÈ]RELHNWDPL0RĝHWRE\ÊQDSU]\NïDG SREUDQLHOXEXDNWXDOQLHQLHZDUWRĂFLZïDĂFLZRĂFLRELHNWX CZYM JEST METODA? JAKIE SĄ ZADANIA METODY? 0HWRGDWRVSRVöESURZDG]HQLDSU]H]OXG]L OXE FRNROZLHNLQQHJR LQWHUDNFML]RELHNWHPZĂZLHFLH U]HF]\ZLVW\P .RGPHWRG\PRĝH]DZLHUDÊZLHOHLQVWUXNFML NWöUHUD]HPSU]HGVWDZLDMÈMHGQR]DGDQLH 0HWRG\PRĝQDSRUöZQDÊGRS\WDñLLQVWUXNFML NWöUH • GRVWDUF]DMÈLQIRUPDFMLRRELHNFLH QDSRGVWDZLH GDQ\FKSU]HFKRZ\ZDQ\FKZMHJRZïDĂFLZRĂ FLDFK • ]PLHQLDMÈZDUWRĂÊFRQDMPQLHMMHGQHMZïDĂFLZR ĂFLGDQHJRRELHNWX 38 ABC PROGRAMOWANIA .LHG\Xĝ\ZDV]PHWRG\QLH]DZV]HPXVLV] ZLHG]LHÊjakiMHVWMHMVSRVöEG]LDïDQLD7U]HED ZLHG]LHÊMDNLHS\WDQLH]DGDÊPHWRG]LHLMDN ]LQWHUSUHWRZDÊXG]LHORQÈSU]H]QLÈRGSRZLHGě OBIEKT HOTEL OBIEKT SAMOCHÓD :KRWHOXEDUG]RF]ÚVWRSRMDZLDVLÚS\WDQLHRGR VWÚSQRĂÊSU]\QDMPQLHMMHGQHJRZROQHJRSRNRMX $E\XG]LHOLÊRGSRZLHG]LQDWDNLHS\WDQLHPRĝQD SU]\JRWRZDÊPHWRGÚNWöUHMNRGRGHMPLHOLF]EÚ UH]HUZDFMLRGRJöOQHMOLF]E\SRNRL0HWRG\PRĝQD UöZQLHĝZ\NRU]\VWDÊGR]ZLÚNV]HQLDOXE]PQLHM V]HQLDZDUWRĂFLZïDĂFLZRĂFLbookingsSRGF]DV UH]HUZDFMLOXEDQXORZDQLDUH]HUZDFMLSRNRL :DUWRĂÊZïDĂFLZRĂFLcurrentSpeedPXVLE\Ê ]ZLÚNV]DQDOXE]PQLHMV]DQDJG\NLHURZFD ]ZLÚNV]DOXE]PQLHMV]DV]\ENRĂÊVDPRFKRGX .RGRGSRZLHG]LDOQ\]D]PLDQÚZDUWRĂFLZïDĂFLZR ĂFLcurrentSpeedPRĝH]QDMGRZDÊVLÚZPHWR G]LHNWöUHMPRĝQDQDGDÊQD]ZÚchangeSpeed() TYP OBIEKTU: HOTEL METODA jej działanie polega na: makeBooking() makeBooking() zwiększeniu wartości właściwości bookings cancelBooking() cancelBooking() zmniejszeniu wartości właściwości bookings checkAvailability() checkAvailability() odjęciu wartości właściwości bookings od wartości właściwości rooms i podaniu liczby wolnych pokoi TYP OBIEKTU: SAMOCHÓD TYP OBIEKTU: SAMOCHÓD METODA jej działanie polega na: METODA changeSpeed() changeSpeed() zmniejszeniu lub zwiększeniu wartości właściwości currentSpeed changeSpeed() zmniejszeniu lub changeSpeed() zwiększeniu wartości właściwości currentSpeed jej działanie polega na: ABC PROGRAMOWANIA 39 ZEBRANIE WSZYSTKIEGO W CAŁOŚĆ .RPSXWHU\Xĝ\ZDMÈGDQ\FKZFHOXWZRU]HQLDPRGHOLU]HF]\SRFKRG]ÈF\FK ]HĂZLDWDU]HF]\ZLVWHJR=GDU]HQLDPHWRG\LZïDĂFLZRĂFLRELHNWXVÈ]HVREÈ ĂFLĂOHSRZLÈ]DQH=GDU]HQLDPRJÈZ\ZRï\ZDÊPHWRG\NWöUH]NROHLPRJÈ SRELHUDÊOXEXDNWXDOQLDÊZïDĂFLZRĂFLRELHNWX TYP OBIEKTU: HOTEL ZDARZENIE 1 występuje gdy: method called: WŁAŚCIWOŚCI book book tworzona jest nowa rezerwacja makeBooking() name Quay cancel cancel rezerwacja jest anulowana cancelBooking() rating 4 rooms 42 METODA 2 40 jej działanie polega na: bookings 22 makeBooking() makeBooking() zwiększeniu wartości właściwości bookings gym false cancelBooking() cancelBooking() zmniejszeniu wartości właściwości bookings pool true checkAvailability() checkAvailability() odjęciu wartości właściwości bookings od wartości właściwości rooms i podaniu liczby wolnych pokoi ABC PROGRAMOWANIA 3 OBIEKT HOTEL OBIEKTY SAMOCHÓD 1. 3RGRNRQDQLXUH]HUZDFMLQDVWÚSXMHZ\ZRïDQLH ]GDU]HQLDbook 2. =GDU]HQLHbookZ\ZRïXMHPHWRGÚmakeBooking()NWöUD]ZLÚNV]DZDUWRĂÊZïDĂFLZRĂFL bookings 3. :DUWRĂÊZïDĂFLZRĂFLbookings]RVWDïD ]PLHQLRQDLRG]ZLHUFLHGODOLF]EÚZROQ\FKSRNRL ZKRWHOX 1. .LHG\NLHURZFDSU]\VSLHV]DQDVWÚSXMH Z\ZRïDQLH]GDU]HQLDaccelerate 2. =GDU]HQLHaccelerateZ\ZRïXMHPHWRGÚ changeSpeed()NWöUD]NROHL]ZLÚNV]DZDUWRĂÊ ZïDĂFLZRĂFLcurrentSpeed 3. :DUWRĂÊZïDĂFLZRĂFLcurrentSpeedRG]ZLHU FLHGODDNWXDOQÈV]\ENRĂÊVDPRFKRGX TYP OBIEKTU: SAMOCHÓD 1 2 ZDARZENIE występuje gdy: wywołuje metodę: brake brake kierowca zwalnia changeSpeed() make make BMW accelerate accelerate kierowca przyspiesza changeSpeed() currentSpeed currentSpeed 45 km/h color color srebrny fuel fuel diesel METODA jej działanie polega na: changeSpeed() changeSpeed() zwiększeniu lub zwiększeniu wartości właściwości currentSpeed WŁAŚCIWOŚCI 3 ABC PROGRAMOWANIA 41 PRZEGLĄDARKI INTERNETOWE SĄ PROGRAMAMI ZBUDOWANYMI NA PODSTAWIE OBIEKTÓW =REDF]\ïHĂMDNGDQHPRĝQDZ\NRU]\VWDÊGRSU]\JRWRZDQLDPRGHOLKRWHOX LVDPRFKRGX3U]HJOÈGDUNLLQWHUQHWRZHWZRU]ÈSRGREQHPRGHOHZ\ĂZLHWODQHM VWURQ\LQWHUQHWRZHMLRNQDSURJUDPXZNWöU\PGDQDVWURQDMHVWZ\ĂZLHWODQD 42 OBIEKT WINDOW OBIEKT DOCUMENT 1DVWURQLHSRSUDZHMSRND]DQRPRGHONRPSXWHUD ]Z\ĂZLHWORQ\PQDHNUDQLHRNQHPSU]HJOÈGDUNL LQWHUQHWRZHM 6WURQDLQWHUQHWRZDDNWXDOQLHZF]\WDQDZRNQLH MHVWPRGHORZDQD]Z\NRU]\VWDQLHPRELHNWX document .DĝGHRNQROXENDUWÚSU]HJOÈGDUNDLQWHUQHWRZD SU]HGVWDZLD]DSRPRFÈRELHNWXwindow:ïDĂFLZRĂÊlocationRELHNWXwindowZVND]XMHDGUHV 85/ELHĝÈFHMVWURQ\ :ïDĂFLZRĂÊtitleRELHNWXdocumentZVND]XMH ]DZDUWRĂÊ]QDMGXMÈFÈVLÚPLÚG]\]QDF]QLNDPL <title>L</title>GDQHMVWURQ\LQWHUQHWRZHM =NROHLZïDĂFLZRĂÊODVW0RGLğHGRELHNWXdocument SRGDMHGDWÚRVWDWQLHMDNWXDOL]DFMLVWURQ\ ABC PROGRAMOWANIA TYP OBIEKTU: WINDOW WŁAŚCIWOŚCI location location http://www.javascriptbook.com/ TYP OBIEKTU: DOCUMENT WŁAŚCIWOŚCI URL http://www.javascriptbook.com/ lastModified 09/04/2014 15:33:37 title Learn JavaScript & jQuery — A book that teaches you in a nicer way ABC PROGRAMOWANIA 43 OBIEKT DOCUMENT PRZEDSTAWIA STRONĘ HTML =DSRPRFÈRELHNWXdocumentPRĝQDX]\VNDÊGRVWÚS GR]DZDUWRĂFLZ\ĂZLHWODQHMXĝ\WNRZQLNRP L]PLHQLDÊMÈ QDVWURQLHRUD]UHDJRZDÊQDSRGHMPRZDQHSU]H]QLFKG]LDïDQLD 3RGREQLHMDNLQQHRELHNW\SU]HGVWDZLDMÈFHU]HF]\ ]HĂZLDWDU]HF]\ZLVWHJRRELHNWdocumentPD WŁAŚCIWOŚCI :ïDĂFLZRĂFLRSLVXMÈFHFHFK\FKDUDNWHU\VW\F]QH DNWXDOQHMVWURQ\LQWHUQHWRZHMQDSU]\NïDGMHMW\WXï METODY 0HWRG\Z\NRQXMÈFH]DGDQLD]ZLÈ]DQH]GRNX PHQWHPDNWXDOQLHZF]\WDQ\PZSU]HJOÈGDUFH LQWHUQHWRZHMQDSU]\NïDGSRELHUDQLHLQIRUPDFML ]HZVND]DQHJRHOHPHQWXOXEGRGDQLHQRZHM ]DZDUWRĂFL ZDARZENIA ,VWQLHMHPRĝOLZRĂÊUHDJRZDQLDQD]GDU]HQLDWDNLH MDNNOLNQLÚFLHHOHPHQWXSU]H]Xĝ\WNRZQLND 44 ABC PROGRAMOWANIA 3RQLHZDĝZV]\VWNLHQDMZDĝQLHMV]HSU]HJOÈGDUNL LQWHUQHWRZHLPSOHPHQWXMÈRELHNWdocument w do NïDGQLHWDNLVDPVSRVöESURJUDPLĂFLWZRU]ÈF\ SU]HJOÈGDUNLLQWHUQHWRZHPDMÈMXĝ • ]DLPSOHPHQWRZDQHZïDĂFLZRĂFLGRNWöU\FK PRĝQDX]\VNDÊGRVWÚSPRĝQDSRQDGWR]HEUDÊ ZLÚFHMLQIRUPDFMLRDNWXDOQLHZ\ĂZLHWODQHM VWURQLHLQWHUQHWRZHM • JRWRZHPHWRG\GRZ\NRQ\ZDQLDSHZQ\FK QDMF]ÚĂFLHMSRMDZLDMÈF\FKVLÚ]DGDñNWöUH SUDZGRSRGREQLHWU]HEDEÚG]LHZ\NRQDÊQD VWURQLH+70/ 'RZLHV]VLÚZLÚFMDNSUDFRZDÊ]RELHNWHP document2ELHNWdocumentWRZLVWRFLHMHGHQ]H ]ELRUXRELHNWöZREVïXJLZDQ\FKSU]H]ZV]\VWNLH QDMZDĝQLHMV]HSU]HJOÈGDUNLLQWHUQHWRZH.LHG\ SU]HJOÈGDUNDWZRU]\PRGHOVWURQ\LQWHUQHWRZHM WRSU]\JRWRZXMHQLHW\ONRRELHNWdocumentDOH UöZQLHĝQRZ\RELHNWGODNDĝGHJRHOHPHQWX ]QDMGXMÈFHJRVLÚQDVWURQLH7HZV]\VWNLHRELHNW\ VWDQRZLÈRELHNWRZ\PRGHOGRNXPHQWXNWöU\ ]RVWDQLHRPöZLRQ\ZUR]G]LDOH TYP OBIEKTU: DOCUMENT WŁAŚCIWOŚCI URL http://www.javascriptbook.com/ lastModified 09/04/2014 15:33:37 title Learn JavaScript & jQuery — A book that teaches you in a nicer way ZDARZENIE występuje, gdy: load nastąpiło zakończenie wczytywania strony i jej zasobów click użytkownik kliknął myszą na stronie użytkownik nacisnął klawisz METODA jej działanie polega na: write() dodaniu nowej zawartości do dokumentu getElementById() uzyskaniu dostępu do elementu wskazywanego przez atrybut id ABC PROGRAMOWANIA 45 JAK PRZEGLĄDARKA INTERNETOWA „WIDZI” STRONĘ INTERNETOWĄ? :FHOX]UR]XPLHQLDMDNPRĝQD]PLHQLÊ]DZDUWRĂÊVWURQ\+70/ ]Z\NRU]\VWDQLHPMÚ]\ND-DYD6FULSWWU]HEDZLHG]LHÊMDNSU]HJOÈGDUND LQWHUQHWRZDLQWHUSUHWXMHNRG+70/LVWRVXMHZQLPVW\OH 1. POBRANIE STRONY JAKO KODU HTML .DĝGDVWURQDZLWU\Q\LQWHUQHWR ZHMPRĝHE\ÊSRVWU]HJDQDMDNR RGG]LHOQ\GRNXPHQW'ODWHJR WHĝVLHÊVNïDGDVLÚ]ZLHOX ZLWU\QLQWHUQHWRZ\FK]NWöU\FK NDĝGDPDFRQDMPQLHMMHGHQ GRNXPHQW 2. UTWORZENIE MODELU STRONY I PRZECHOWYWANIE GO W PAMIĘCI 0RGHOSRND]DQ\QDVWURQLHSR SUDZHMVWDQRZLUHSUH]HQWDFMÚ EDUG]RSURVWHMVWURQ\LQWHUQH WRZHM6WUXNWXUDWDSU]\SRPLQD GU]HZRJHQHDORJLF]QH1DJöU]H PRGHOXPDP\RELHNW document SU]HGVWDZLDMÈF\GRNXPHQWMDNR FDïRĂÊ 3RQLĝHMRELHNWXdocumentSR V]F]HJöOQHUDPNLVÈQD]\ZDQH ZÚ]ïDPL.DĝG\]W\FKZÚ]ïöZ WRNROHMQ\RELHNW:RPDZLD Q\PSU]\NïDG]LHPDP\WU]\ W\S\ZÚ]ïöZSU]HGVWDZLDMÈF\FK HOHPHQW\WHNVWZHOHPHQWDFK RUD]DWU\EXW 46 ABC PROGRAMOWANIA 3. UŻYCIE SILNIKA PRZEGLĄDARKI INTERNETOWEJ DO WYŚWIETLENIA STRONY NA EKRANIE -HĝHOLVWURQDQLH]DZLHUDVW\OöZ &66WRVLOQLNSU]HJOÈGDUNLLQWHU QHWRZHM]DVWRVXMHZHOHPHQWDFK +70/VW\OHGRP\ĂOQH-HGQDN ZNRG]LH+70/RPDZLDQHJR SU]\NïDGX]QDMGXMHVLÚSROHFH QLHZF]\WXMÈFHDUNXV]VW\OöZ &66'ODWHJRWHĝSU]HJOÈGDUND LQWHUQHWRZDSRELHUDZVND]DQ\ SOLNDQDVWÚSQLHZ\ĂZLHWOD VWURQÚ]Xĝ\FLHPGRïÈF]RQ\FK VW\OöZ .LHG\SU]HJOÈGDUNDLQWHUQHWRZD RWU]\PXMHUHJXï\&66WR VLOQLNSU]HWZDU]DMHLVWRVXMH NDĝGÈUHJXïÚGRRGSRZLHGQLFK HOHPHQWöZ:WHQVSRVöESU]H JOÈGDUNDLQWHUQHWRZDXPLHV]F]D SRV]F]HJöOQHHOHPHQW\QD ZïDĂFLZ\FKPLHMVFDFKZUD] ]RGSRZLHGQLPLNRORUDPL F]FLRQNDPLLWG :V]\VWNLHQRZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZHXĝ\ZDMÈLQWHUSUHWHUD -DYD6FULSWGRSU]HNV]WDïFHQLDLQVWUXNFMLSURJUDPLVW\ ZMÚ]\NX -DYD6FULSW QDLQVWUXNFMHPRĝOLZHGRZ\NRQDQLDSU]H]NRPSXWHU .LHG\Xĝ\ZDV]NRGX-DYD6FULSW ZSU]HJOÈGDUFHLQWHUQHWRZHM ]DMPXMHVLÚW\PMHMF]ÚĂÊ QD]\ZDQDLQWHUSUHWHUHP OXE VLOQLNLHPVNU\SWRZ\P ,QWHUSUHWHUELHU]HSU]\JR WRZDQHSU]H]SURJUDPLVWÚ SROHFHQLD ZMÚ]\NX-DYD6FULSW L]DVWÚSXMHMHLQVWUXNFMDPL NWöUHSU]HJOÈGDUNDLQWHUQHWRZD PRĝHZ\NRU]\VWDÊGRZ\NR QDQLD]DGDñ]OHFRQ\FKSU]H] Xĝ\WNRZQLND W LQWHUSUHWRZDQ\PMÚ]\NX SURJUDPRZDQLDWDNLPMDN -DYD6FULSWNDĝG\ZLHUV]NRGX MHVWSU]HNV]WDïFDQ\SRNROHL ZWUDNFLHZ\NRQ\ZDQLDVNU\SWX 1 <!DOCTYPE html> <html> <head> Przeglądarka <title>Constructive & Co.</title> internetowa otrzymuje stronę HTML. <link rel=”stylesheet” href=”css/c01.css” /> </head> <body> <h1>Constructive & Co.</h1> <p>6NïDGDQLH]DPöZLHñLZV]HONLHLQIRUPDFMHVÈGRVWÚSQHSRGQXPHUHPWHOHIRQX <em>555-3344</em>.</p> </body> </html> 2 document Tworzy model strony i przechowuje go w pamięci. <html> <head> <title> Constructive & Co. <link> rel stylesheet href css/c01.css <body> <h1> Constructive & Co. OBIEKT ELEMENT TEKST ATRYBUTY <p> Składanie zamówień i wszelkie informacje są dostępne pod numerem telefonu <em> 555-3344 3 Wyświetlenie strony na ekranie z wykorzystaniem silnika przeglądarki internetowej. ABC PROGRAMOWANIA 47 PODSUMOWANIE ABC PROGRAMOWANIA B. Jak komputery wkomponowują się w otaczający nas świat? f :\NRU]\VWXMÈFGDQHNRPSXWHU\WZRU]ÈPRGHOHU]HF]\ ]HĂZLDWDU]HF]\ZLVWHJR f 0RGHOHRSLHUDMÈVLÚQDRELHNWDFKZFHOXSU]HGVWDZLDQLD ğ]\F]Q\FKU]HF]\2ELHNW\PRJÈPLHÊZïDĂFLZRĂFLNWöUH GRVWDUF]DMÈGDQ\FKRQLFKPHWRG\Z\NRQXMÈFH]DGDQLD ]DSRPRFÈZïDĂFLZRĂFLGDQHJRRELHNWXRUD]]GDU]HQLD Z\ZRï\ZDQHSRGF]DVSUDF\Xĝ\WNRZQLND]NRPSXWHUHP f 3URJUDPLĂFLPRJÈWZRU]\ÊNRGR]QDF]DMÈF\ķ.LHG\Z\VWÈSL WR]GDU]HQLHQDOHĝ\XUXFKRPLÊWHQNRGĵ f 3U]HJOÈGDUNLLQWHUQHWRZHXĝ\ZDMÈNRGX]QDF]QLNöZ+70/ ZFHOXXWZRU]HQLDPRGHOXVWURQ\LQWHUQHWRZHM3RV]F]HJöOQH HOHPHQW\WZRU]ÈZïDVQHZÚ]ï\ ZÚ]HïWRURG]DMRELHNWX f $E\]DSHZQLÊLQWHUDNW\ZQRĂÊVWURQLQWHUQHWRZ\FKSURJUDPLVWD WZRU]\NRGZ\NRU]\VWXMÈF\PRGHOGDQHMVWURQ\SU]\JRWRZDQ\ SU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈ 48 ABC PROGRAMOWANIA 1/c JAK MOŻNA UTWORZYĆ SKRYPT NA STRONĘ INTERNETOWĄ? ABC PROGRAMOWANIA 49 JAK POŁĄCZYĆ HTML, CSS I JAVASCRIPT? =DQLP]DJïÚELP\VLÚZMÚ]\N-DYD6FULSWQDMSLHUZ SRZLQLHQHĂGRZLHG]LHÊVLÚMDNSRïÈF]\ÊJR ]NRGHP+70/L&66QDVWURQDFKLQWHUQHWRZ\FK 3URJUDPLĂFLDSOLNDFMLLQWHUQHWR Z\FK]Z\NOHZ\PLHQLDMÈWU]\ MÚ]\NLSURJUDPRZDQLDZ\NR U]\VW\ZDQHSRGF]DVWZRU]HQLD VWURQLQWHUQHWRZ\FK+70/ &66L-DYD6FULSW <html> WARSTWA ZAWARTOŚCI PLIKI .HTML -HVWWRZDUVWZD]DZDUWRĂFL Z\ĂZLHWODQHMQDVWURQDFK LQWHUQHWRZ\FK.RG+70/ QDGDMHVWURQLHVWUXNWXUÚRUD] VHPDQW\NÚ -HĝHOLWRPRĝOLZHNRGZ\ PLHQLRQ\FKMÚ]\NöZSRZLQLHQ ]QDMGRZDÊVLÚZRGG]LHOQ\FK SOLNDFKSU]\F]\PZGRNX PHQFLH+70/XPLHV]F]DQHVÈ SROHFHQLDZF]\WXMÈFH]DZDUWRĂÊ SOLNöZ&66L-DYD6FULSW {css} WARSTWA PREZENTACYJNA PLIKI .CSS 6W\OH&66XVSUDZQLDMÈVWURQÚ +70/]DSRPRFÈUHJXïRNUH ĂODMÈF\FKVSRVöESUH]HQWDFML ]DZDUWRĂFL+70/ NRORUWïD REUDPRZDQLHZ\PLDU\HOHPHQ WöZNRORUWHNVWXF]FLRQNLLWG 3U]HGVWDZLRQHSRGHMĂFLHSURJUDPLĂFLEDUG]RF]ÚVWRRNUHĂODMÈ mianem VHSDUDFML]DGDñ DQJseparation on concerns 50 ABC PROGRAMOWANIA .DĝG\MÚ]\NWZRU]\RGG]LHOQÈ ZDUVWZÚVïXĝÈFÈGR]XSHïQLH LQQHJRFHOX3RV]F]HJöOQH ZDUVWZ\ RGOHZHMGRSUDZHM VWURQ\ VÈ]EXGRZDQHQD SRSU]HGQLFK MDYDVFULSW WARSTWA ZACHOWANIA PLIKI .JS 7DZDUVWZDSR]ZDODQD]PLDQÚ ]DFKRZDQLDVWURQ\LQWHUQHWRZHM LGRGDQLHMHMLQWHUDNW\ZQRĂFL 1DOHĝ\]URELÊZV]\VWNRDE\ NRG-DYD6FULSW]QDMGRZDïVLÚ ZRGG]LHOQ\FKSOLNDFK STOPNIOWE ULEPSZANIE :\PLHQLRQHZF]HĂQLHMWU]\ZDUVWZ\VWDQRZLÈSRGVWDZÚSRSXODUQHJRSR GHMĂFLDZ]DNUHVLHEXGRZ\VWURQLQWHUQHWRZ\FKQD]\ZDQHJRVWRSQLRZ\P XOHSV]DQLHP DQJprogressive enhancement 1DU\QNXSRMDZLDVLÚFRUD] ZLÚFHMXU]ÈG]Hñ]GRVWÚSHPGR LQWHUQHWXLGODWHJRNRQFHSFMD VWRSQLRZHJRXOHSV]DQLD]\VNDïD GXĝÈSRSXODUQRĂÊ 8U]ÈG]HQLDUöĝQLÈVLÚQLHW\ONR ZLHONRĂFLÈHNUDQXDOHWDNĝH V]\ENRĂFLÈSRïÈF]HQLD]LQWHUQH WHPLVZRLPLPRĝOLZRĂFLDPL 3RQDGWRQLHNWöU]\Xĝ\WNRZQLF\ Z\ïÈF]DMÈZSU]HJOÈGDUNDFKLQ WHUQHWRZ\FKREVïXJÚ-DYD6FULSW 1DOHĝ\VLÚZLÚFXSHZQLÊĝH VWURQDLQWHUQHWRZDQDGDOEÚG]LH G]LDïDïDSRPLPREUDNXREVïXJL -DYD6FULSWX TYLKO HTML HTML + CSS HTML + CSS + JAVASCRIPT 5R]SRF]ÚFLHSUDF\RGZDUVWZ\ +70/SR]ZDODVNRQFHQWURZDÊ VLÚQDQDMZDĝQLHMV]\PDVSHNFLH ZLWU\Q\LQWHUQHWRZHMMDNLPMHVW MHM]DZDUWRĂÊ 8PLHV]F]HQLHUHJXï&66 ZRGG]LHOQ\PSOLNXSR]ZDODQD RGG]LHOHQLHVSRVREXSUH]HQWDFML RGVDPHM]DZDUWRĂFLVWURQ\ .RG-DYD6FULSWMHVWGRGDZDQ\ QDNRñFXZFHOXSRSUDZLHQLD Xĝ\WHF]QRĂFLVWURQ\OXE ZUDĝHñMDNLHXĝ\WNRZQLNRGQRVL SRGF]DVLQWHUDNFML]ZLWU\QÈ LQWHUQHWRZÈ =Z\Nï\NRG+70/SRZLQLHQE\Ê SUDZLGïRZRREVïXJLZDQ\ZH ZV]\VWNLFKURG]DMDFKXU]ÈG]Hñ GRVWÚSQ\GODZV]\VWNLFK Xĝ\WNRZQLNöZRUD]ZF]\W\ZDQ\ V]\ENRQDZHWZSU]\SDGNXZRO QHJRSRïÈF]HQLD]LQWHUQHWHP 7HQVDPDUNXV]VW\OöZPRĝQD Z\NRU]\VW\ZDÊZHZV]\VWNLFK ZLWU\QDFKFRSR]ZDODQDLFK V]\EV]HZF]\W\ZDQLHLïDWZLHM V]ÈNRQVHUZDFMÚ2F]\ZLĂFLH PRĝQDVWRVRZDÊUöĝQHDUNXV]H VW\OöZGODWHMVDPHM]DZDUWRĂFL DW\PVDP\PSU]\JRWRZDÊ RGPLHQQ\Z\JOÈGGODW\FK VDP\FKGDQ\FK =DFKRZDQLHVHSDUDFMLPLÚG]\ SRV]F]HJöOQ\PLZDUVWZDPL R]QDF]DĝHVWURQDQDGDOEÚG]LH IXQNFMRQRZDïDQDZHWSRPLPR EUDNXPRĝOLZRĂFLZF]\WDQLDOXE XUXFKRPLHQLDNRGX-DYD6FULSW 3RQDGWRWHJRVDPHJRNRGX -DYD6FULSWPRĝQDXĝ\ÊQDZLHOX VWURQDFKFRSU]HNïDGDVLÚQD V]\EV]HZF]\W\ZDQLHZLWU\Q\ LQWHUQHWRZHMLMHMïDWZLHMV]È NRQVHUZDFMÚ ABC PROGRAMOWANIA 51 TWORZENIE PROSTEGO KODU JAVASCRIPT 3RGREQLHMDN+70/L&66WDNĝHNRG-DYD6FULSWPDSRVWDÊ]Z\NïHJR WHNVWX'ODWHJRWHĝGRMHJRSU]\JRWRZDQLDQLHSRWU]HEXMHV]ĝDGQHJRQRZHJR QDU]ÚG]LD:RPDZLDQ\PSU]\NïDG]LHGRGDMHP\SRZLWDQLHQDVWURQLH+70/ 7HNVWSRZLWDQLDEÚG]LH]DOHĝDïRGSRU\GQLD 8WZöU]NDWDORJSU]H]QDF]R Q\QDSOLNLSU]\NïDGXLQDGDM PXQD]ZÚc011DVWÚSQLH XUXFKRPXOXELRQ\HG\WRUWHNVWX LZSURZDGěNRGSU]HGVWDZLRQ\ SRSUDZHMVWURQLH 1 3OLN-DYD6FULSWWR]Z\Nï\ SOLNWHNVWRZ\ SRGREQLHMDN SOLNL+70/L&66 DOHSRVLDGD UR]V]HU]HQLH.js'ODWHJRWHĝ QRZ\SOLN]DSLV]SRGQD]ZÈ add-content.js var today = new Date(); var hourNow = today.getHours(); var greeting; if (hourNow > 18) { JUHHWLQJ ĳ'REU\ZLHF]öUĳ } else if (hourNow > 12) { JUHHWLQJ ĳ']LHñGREU\ĳ } else if (hourNow > 0) { JUHHWLQJ ĳ']LHñGREU\ĳ } else { greeting = ’Witamy!’; } document.write(’<h3>’ + greeting + ’</h3>’); 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/<script>LQDND]DÊSU]HJOÈGDUFHLQWHUQHWRZHM ZF]\WDQLHVNU\SWX$WU\EXWsrcZVND]XMHPLHMVFHSU]HFKRZ\ZDQLDSOLNX -DYD6FULSW <!DOCTYPE html> <html> <head> <title>Constructive & Co.</title> <link rel=”stylesheet” href=”css/c01.css” /> </head> <body> <h1>Constructive & Co.</h1> VFULSWVUF ĵMVDGGFRQWHQWMVĵ!VFULSW! <p>6NïDGDQLH]DPöZLHñLZV]HONLHLQIRUPDFMHVÈ GRVWÚSQHSRGQXPHUHPWHOHIRQX <em>555-3344</em></p> </body> </html> 3 :HG\WRU]HNRGXěUöGïR ZHJRZSURZDGěNRG+70/ SU]HGVWDZLRQ\SROHZHMVWURQLH 1DVWÚSQLH]DSLV]SOLNSRG QD]ZÈadd-content.html (OHPHQW+70/<script>MHVW Xĝ\ZDQ\ZFHOXZF]\WDQLDSOLNX -DYD6FULSWQDVWURQLH(OHPHQW WHQSRVLDGDDWU\EXWsrc NWöUHJRZDUWRĂFLÈMHVWĂFLHĝND GRVWÚSXGRGRïÈF]DQHJRSOLNX :WHQVSRVöEQDND]XMHP\ SU]HJOÈGDUFHLQWHUQHWRZHM RGV]XNDQLHLZF]\WDQLHSOLNX VNU\SWX GRNïDGQLHWDNVDPR MDNZSU]\SDGNXDWU\EXWXsrc Z]QDF]QLNX<img> 4 :SU]HJOÈGDUFHLQWHUQHWR ZHMRWZöU]SU]\JRWRZDQ\SOLN +70/3RZLQLHQHĂ]REDF]\Ê ĝHNRG-DYD6FULSWXPLHĂFLïQD VWURQLHSRZLWDQLH WXWDMDobry wieczór! 3RZLWDQLHWR]RVWDïR Z\JHQHURZDQHSU]H]NRG -DYD6FULSWLQLH]QDMGXMHVLÚ ZSOLNX+70/ =ZUöÊXZDJÚĝHSU]HJOÈGDUND,QWHUQHW([SORUHUF]DVDPLXQLHPRĝOLZLDZ\NRQDQLHNRGX-DYD6FULSW SRGF]DVRWZLHUDQLDVWURQ\SU]HFKRZ\ZDQHMORNDOQLHQDG\VNX-HĝHOLVSRWNDV]VLÚ]WDNÈV\WXDFMÈ Z\SUöEXMLQQÈSU]HJOÈGDUNÚLQWHUQHWRZÈQDSU]\NïDG&KURPH)LUHIRNVD2SHUÚOXE6DIDUL ABC PROGRAMOWANIA 53 KOD ŹRÓDŁOWY NIE JEST MODYFIKOWANY -HĝHOLVSRMU]\V]QDNRGěUöGïRZ\RPDZLDQHJRSU]\NïDGX WRSU]HNRQDV]VLÚĝH]QDF]QLNL+70/SR]RVWDï\GRNïDGQLHWDNLHVDPH 5 *G\Z\SUöEXMHV]ZSU]H JOÈGDUFHLQWHUQHWRZHMSU]\JR WRZDQ\SU]\NïDGZ\ĂZLHWONRG ěUöGïRZ\VWURQ\ 2GSRZLHGQLÈ RSFMÚQDMF]ÚĂFLHM]QDMG]LHV] ZPHQXWidok1DU]ÚG]LDOXE Programowanie 6 .RGěUöGïRZ\Z\ĂZLHWORQHM VWURQ\LQWHUQHWRZHMQLH]DZLHUD QRZHJRHOHPHQWXXPLHV] F]RQHJRQDVWURQLH3RND]XMH SROHFHQLHZF]\WXMÈFHSOLN -DYD6FULSW :GDOV]\FKUR]G]LDïDFK]RED F]\V]ĝHZLÚNV]RĂÊVNU\SWöZ MHVWGRïÈF]DQ\FKSU]HG]QDF] QLNLHP]DP\NDMÈF\P</body> 7RPLHMVFHMHVWEDUG]R F]ÚVWRXZDĝDQH]DQDMOHSV]H GRGRïÈF]DQLDVNU\SWöZ 54 ABC PROGRAMOWANIA UMIESZCZENIE SKRYPTU NA STRONIE =DSHZQHZLG]LDïHĂNRG-DYD6FULSWXPLHV]F]RQ\ZGRNXPHQFLH+70/PLÚG]\ ]QDF]QLNDPLRWZLHUDMÈF\P<script>L]DP\NDMÈF\P</script> QDMOHSV]\P UR]ZLÈ]DQLHPMHVWXPLHV]F]DQLHVNU\SWöZZRGG]LHOQ\FKSOLNDFK <!DOCTYPE html> <html> <head> <title>Constructive & Co.</title> <link rel=”stylesheet” href=”css/c01.css” /> </head> <body> <h1>Constructive & Co.</h1> <script>document.write(’<h3>Witamy!</h3>’);</script> <p>6NïDGDQLH]DPöZLHñLZV]HONLHLQIRUPDFMHVÈ GRVWÚSQHSRGQXPHUHPWHOHIRQX <em>555-3344</em></p> </body> </html> 7 7HUD]RWZöU]SOLN+70/ ZHG\WRU]HXVXñDWU\EXWsrc ]H]QDF]QLNDRWZLHUDMÈFHJR <script>DQDVWÚSQLHPLÚG]\ ]QDF]QLNDPL<script> i </script>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 <script> METODA document.write(Ĳ'REU\ZLHF]öUĳ); OPERATOR ELEMENTU SKŁADOWEGO 2ELHNWdocumentSRVLDGDZLHOHPHWRG LZïDĂFLZRĂFL6ÈRQHQD]\ZDQHHOHPHQWDPL VNïDGRZ\PLRELHNWX 'RVWÚSGRHOHPHQWöZVNïDGRZ\FKRELHNWX PRĝQDX]\VNDÊ]Z\NRU]\VWDQLHPNURSNL XPLHV]F]DQHMPLÚG]\QD]ZÈRELHNWXLQD]ZÈ HOHPHQWXVNïDGRZHJRNWöUHJRFKFHV]Xĝ\Ê .URSNDMHVWQD]\ZDQDRSHUDWRUHPHOHPHQWX VNïDGRZHJR 3U]HJOÈGDUNDLQWHUQHWRZDXĝ\ZD ZWOH]QDF]QLHZLÚNV]HMLORĂFL NRGXDE\]DZDUWRĂÊSRMDZLïD VLÚQDHNUDQLH1DV]F]ÚĂFLHQLH PXVLV]ZLHG]LHÊMDNSU]HJOÈ GDUNDWRUREL 56 ABC PROGRAMOWANIA PARAMETRY -HĝHOLGRSUDZLGïRZHJRG]LDïDQLD PHWRGDZ\PDJDSHZQ\FKLQIRUPDFML GRGDWNRZ\FKWRGDQHVÈSU]HND]\ZDQH ZQDZLDVLH .DĝG\IUDJPHQWLQIRUPDFMLQRVLQD]ZÚ SDUDPHWUXPHWRG\:RPDZLDQ\P SU]\NïDG]LHPHWRGDwrite()PXVL ZLHG]LHÊMDNÈ]DZDUWRĂÊPDXPLHĂFLÊQD VWURQLHLQWHUQHWRZHM -HGQDNWU]HEDZLHG]LHÊMDN Z\ZRï\ZDÊRELHNWLPHWRGÚ DWDNĝHMDNSU]HND]\ZDÊLQIRU PDFMHQLH]EÚGQHGRZ\NRQDQLD ]OHFRQHJRSU]H]&LHELH]DGDQLD 3U]HJOÈGDUNDLQWHUQHWRZD ]DMPXMHVLÚUHV]WÈ ,VWQLHMH]QDF]QLHZLÚFHM RELHNWöZSRGREQ\FKGR SU]HGVWDZLRQHJRRELHNWX documentRUD]ZLHOHPHWRG WDNLFKMDNwrite()NWöUHRNDĝÈ VLÚSRPRFQHSRGF]DVWZRU]HQLD VNU\SWöZ KOD JAVASCRIPT JEST URUCHAMIANY W MIEJSCU, GDZIE JEST UMIESZCZONY W DOKUMENCIE HTML .LHG\SU]HJOÈGDUNDLQWHUQHWRZDQDSRWNDHOHPHQW<script>]DWU]\PXMH G]LDïDQLHZFHOXZF]\WDQLDVNU\SWXDQDVWÚSQLHVSUDZG]DF]\PXVL FRNROZLHN]URELÊ <!DOCTYPE html> <html> <head> <title>Constructive & Co.</title> <link rel=”stylesheet” href=”css/c01.css” /> </head> <body> <h1>Constructive & Co.</h1> <p>6NïDGDQLH]DPöZLHñLZV]HONLHLQIRUPDFMHVÈGRVWÚSQHSRGQXPHUHPWHOHIRQX <em>555-3344</em></p> VFULSWVUF ĵMVDGGFRQWHQWMVĵ!VFULSW! </body> </html> =ZUöÊXZDJÚQDPRĝOLZRĂÊSU]HQLHVLHQLDHOHPHQ WX<script>ZPLHMVFH]DSLHUZV]\PDNDSLWHPFR ZSï\ZDQDPLHMVFHZ\ĂZLHWOHQLDWHNVWXSRZLWDQLD QDVWURQLH 0LHMVFHZ\ĂZLHWODQLDGDQ\FKJHQHURZDQ\FKSU]H] VNU\SWZSï\ZDQDXPLHMVFRZLHQLHHOHPHQWöZ <script>QDVWURQLHLQWHUQHWRZHMRUD]QDRJöOQ\ F]DVMHMZF]\W\ZDQLDSDWU]SRGUR]G]LDïķ*G]LH XPLHV]F]DÊVNU\SW\"ĵ ABC PROGRAMOWANIA 57 PODSUMOWANIE ABC PROGRAMOWANIA C. Jak można utworzyć skrypt na stronę internetową? f 1DMOHSV]\PUR]ZLÈ]DQLHPMHVWXPLHV]F]HQLHNRGX-DYD6FULSW ZRGG]LHOQ\PSOLNX-DYD6FULSW7REÚG]LH]Z\Nï\SOLNWHNVWRZ\ SRGREQLHMDNSOLNLVWURQ+70/LDUNXV]\VW\OöZ&66 DOH ]UR]V]HU]HQLHP.js f (OHPHQW+70/<script>MHVWXĝ\ZDQ\QDVWURQDFK+70/ ZFHOXZVND]DQLDSU]HJOÈGDUFHLQWHUQHWRZHMNRQLHF]QRĂFL ZF]\WDQLDSOLNX-DYD6FULSW SRGREQLHMDNHOHPHQW<link>PRĝH E\ÊXĝ\W\GRZF]\WDQLDSOLNX&66 f *G\Z\ĂZLHWOLV]ZSU]HJOÈGDUFHLQWHUQHWRZHMNRGěUöGïRZ\ VWURQ\WR]DXZDĝ\V]ĝH-DYD6FULSWQLHPRG\ğNXMH]QDF]QLNöZ +70/6NU\SWG]LDïDQDXWZRU]RQ\PSU]H]SU]HJOÈGDUNÚ PRGHOXVWURQ\LQWHUQHWRZHM 58 ABC PROGRAMOWANIA 2 PODSTAWOWE INSTRUKCJE JAVASCRIPT :W\PUR]G]LDOH]DF]QLHV]XF]\ÊVLÚRGF]\WXLWZRU]HQLD NRGX-DYD6FULSW3RQDGWR]REDF]\V]MDNZ\GDZDÊSROHFHQLD SU]HJOÈGDUFHLQWHUQHWRZHM JĘZYK — SŁOWNICTWO I SKŁADNIA 3RGREQLHMDNZSU]\SDGNXNDĝGHJRQRZHJR MÚ]\NDSU]\QDXFH-DYD6FULSWGRRSDQRZDQLD MHVWZLHOHQRZ\FKVïöZ VïRZQLFWZR LUHJXï GRW\F]ÈF\FKLFKXĝ\FLD VNïDGQLD WYDAWANIE POLECEŃ PRZEGLĄDARCE INTERNETOWEJ 3U]HJOÈGDUNLLQWHUQHWRZH LRJöOQLHNRPSXWHU\ Z\NRQXMÈ]DGDQLDZ]XSHïQLHRGPLHQQ\ VSRVöEQLĝF]ïRZLHN:\GDZDQHSU]H]&LHELH SROHFHQLDPXV]ÈRG]ZLHUFLHGODÊVSRVöE G]LDïDQLDNRPSXWHUD 1DXNÚUR]SRF]QLHP\RGNLONXNOXF]RZ\FKHOHPHQWöZNRQVWUXNF\MQ\FKMÚ]\ND'RZLHV]VLÚ MDNPRĝQDMHZ\NRU]\VWDÊGRRSUDFRZDQLDEDUG]RSURVW\FKVNU\SWöZ VNïDGDMÈF\FKVLÚ]NLONX NURNöZ DGRSLHURZNROHMQ\FKUR]G]LDïDFK]DMPLHP\VLÚQLHFREDUG]LHMVNRPSOLNRZDQ\PL koncepcjami. 60 PODSTAWOWE INSTRUKCJE JAVASCRIPT PODSTAWOWE INSTRUKCJE JAVASCRIPT 61 POLECENIA 6NU\SWWRVHULDLQVWUXNFMLZ\NRQ\ZDQ\FKNROHMQRSU]H]NRPSXWHU .DĝGDSRMHG\QF]DLQVWUXNFMD NURN MHVWQD]\ZDQDpoleceniem. 1DNRñFXSROHFHQLDSRZLQLHQ]QDMGRZDÊVLÚĂUHGQLN ']LDïDQLHNRGXNWöU\SU]HGVWDZLRQRSRSUDZHM VWURQLHZNUöWFH]RVWDQLHRPöZLRQHDOHWHUD] ]ZUöÊXZDJÚQDQDVWÚSXMÈFHNZHVWLH • .DĝG\ZLHUV]NRGXZNRORU]Hzielonym jest poleceniem. • 1DZLDV\NODPURZHZNRORU]HUöĝRZ\P R]QDF]DMÈSRF]ÈWHNLNRQLHFbloku kodu. %ORNNRGXPRĝH]DZLHUDÊZLHOHSROHFHñ • .RGZNRORU]HğROHWRZ\PXVWDODNWöU\ IUDJPHQWNRGXSRZLQLHQ]RVWDÊZ\NRQDQ\MDN VLÚSU]HNRQDV]ZUR]G]LDOHZSRGUR]G]LDOH ķ2FHQDZDUXQNXLSROHFHñZDUXQNRZ\FKĵ var today = new Date(); var hourNow = today.getHours(); var greeting; if (hourNow > 18) { greeting = ’Dobry wieczór!’; } else if (hourNow > 12) { JUHHWLQJ ĳ']LHñGREU\ĳ } else if (hourNow > 0) { JUHHWLQJ ĳ']LHñGREU\ĳ } else { greeting = ’Witamy!’; } document.write(’<h3>’ + greeting + ’</h3>’); W JĘZYKU JAVASCRIPT WIELKOŚĆ LITER MA ZNACZENIE :LHONRĂÊOLWHUZNRG]LH-DYD6FULSWPD]QDF]HQLH 'ODWHJRWHĝhourNowR]QDF]D]XSHïQLHFRLQQHJR QLĝHourNow lub HOURNOW. POLECENIA SĄ INSTRUKCJAMI, KAŻDE Z NICH ROZPOCZYNA SIĘ W NOWYM WIERSZU 3ROHFHQLHWRSRMHG\QF]DLQVWUXNFMDNWöUDSRZLQQD E\ÊZ\NRQDQDSU]H]NRPSXWHU.DĝGHSROHFHQLH SRZLQQRUR]SRF]\QDÊVLÚZQRZ\PZLHUV]X LNRñF]\ÊVLÚĂUHGQLNLHP.RGěUöGïRZ\XWZRU]RQ\ ZWDNLVSRVöEMHVWïDWZ\ZRGF]\FLH ¥UHGQLNZVND]XMHLQWHUSUHWHURZL-DYD6FULSWNRQLHF NURNXLSU]HMĂFLHGRNROHMQHJR 62 PODSTAWOWE INSTRUKCJE JAVASCRIPT POLECENIA MOGĄ BYĆ ORGANIZOWANE W BLOKI KODU 3HZQHSROHFHQLDVÈXMÚWHZQDZLDV\NODPURZH LQRV]ÈQD]ZÚEORNöZNRGX3R]DP\NDMÈF\P QDZLDVLHNODPURZ\PQLHXPLHV]F]DVLÚĂUHGQLND :SU]HGVWDZLRQ\PSRZ\ĝHMSU]\NïDG]LHNDĝG\ EORNNRGX]DZLHUDMHGQRSROHFHQLHGRW\F]ÈFH DNWXDOQHMJRG]LQ\%ORNLNRGXVÈF]ÚVWRXĝ\ZDQH GR]JUXSRZDQLDZLHOXSROHFHñFRSRPDJD SURJUDPLĂFLHZRUJDQL]DFMLNRGXNWöU\]NROHL VWDMHVLÚ]QDF]QLHF]\WHOQLHMV]\ KOMENTARZE :NRG]LHQDOHĝ\XPLHV]F]DÊNRPHQWDU]HZ\MDĂQLDMÈFHVSRVöEMHJRG]LDïDQLD ']LÚNLNRPHQWDU]RPNRGVWDMHVLÚïDWZLHMV]\GRRGF]\WXL]UR]XPLHQLD .RPHQWDU]HPRJÈSRPöF]DUöZQR7RELHMDNLLQQ\PZRGF]\FLHNRGX 7HQVNU\SWZ\ĂZLHWODXĝ\WNRZQLNRZLWHNVWSRZLWDQLDZ\EUDQ\QDSRGVWDZLHDNWXDOQHM JRG]LQ\3U]\NïDGSRFKRG]L]NVLÈĝNL-DYD6FULSW M4XHU\ var today = new Date(); 8WZRU]HQLHQRZHJRRELHNWXGDW\ var hourNow = today.getHours(); 8VWDOHQLHDNWXDOQHMJRG]LQ\ var greeting; :\ĂZLHWOHQLHRGSRZLHGQLHJRWHNVWXSRZLWDQLDQDSRGVWDZLHDNWXDOQHMJRG]LQ\ if (hourNow > 18) { greeting = ’Dobry wieczór!’; } else if (hourNow > 12) { JUHHWLQJ ĳ']LHñGREU\ĳ Kolor zielony — kod JavaScript. } else if (hourNow > 0) { JUHHWLQJ ĳ']LHñGREU\ĳ } else { greeting = ’Witamy!’; } document.write(’<h3>’ + greeting Kolor UöĝRZ\ĽNRPHQWDU]ZLHORZLHUV]RZ\ Kolor V]DU\ĽNRPHQWDU]MHGQRZLHUV]RZ\ + ’</h3>’); KOMENTARZ WIELOWIERSZOWY KOMENTARZ JEDNOWIERSZOWY -HĝHOLNRPHQWDU]PDREHMPRZDÊZLÚFHMQLĝ W\ONRMHGHQZLHUV]WRQDOHĝ\Xĝ\ÊNRPHQWDU]D ZLHORZLHUV]RZHJR. W takim przypadku komentarz UR]SRF]\QDVLÚ]QDNDPL/*LNRñF]\VLÚ]QDNDPL */:V]\VWNRWRFR]QDMGXMHVLÚPLÚG]\W\PL R]QDF]HQLDPLQLHEÚG]LHSU]HWZDU]DQHSU]H] interpreter JavaScript. W komentarzu MHGQRZLHUV]RZ\PZV]\VWNR FR]QDMGXMHVLÚ]DGZRPDXNRĂQLNDPL // ZGDQ\PZLHUV]XQLHEÚG]LHSU]HWZDU]DQH przez interpreter JavaScript. Komentarze MHGQRZLHUV]RZHVÈF]ÚVWRVWRVRZDQH ZFKDUDNWHU]HNUöWNLFKRSLVöZZ\MDĂQLDMÈF\FK G]LDïDQLHNRGX .RPHQWDU]HZLHORZLHUV]RZHF]ÚVWRVÈZ\NRU]\VW\ZDQHGRRSLVDQLDVSRVREXG]LDïDQLDVNU\SWXOXE XQLHPRĝOLZLHQLDXUXFKRPLHQLDGDQHJRIUDJPHQWX VNU\SWXSRGF]DVMHJRWHVWRZDQLD .RPHQWDU]HRNDĝÈVLÚV]F]HJöOQLHFHQQHMHĂOL GRNRGXSRZUöFLV]SRZLHOXGQLDFKOXEPLHVLÈFDFK3RPDJDMÈUöZQLHĝRVRERPNWöUHGRSLHUR ]DSR]QDMÈVLÚ]XWZRU]RQ\PSU]H]&LHELHNRGHP PODSTAWOWE INSTRUKCJE JAVASCRIPT 63 CO TO JEST ZMIENNA? 6NU\SWPXVLPLHÊPRĝOLZRĂÊ W\PF]DVRZHJRSU]HFKRZ\ZDQLD LQIRUPDFMLQLH]EÚGQ\FKGRZ\NRQDQLD]DGDQLD'DQHPRJÈE\Ê SU]HFKRZ\ZDQHZzmiennych. .LHG\WZRU]\V]NRG-DYD6FULSWPXVLV]ZVND]DÊ LQWHUSUHWHURZLNDĝG\NURNSU]H]QDF]RQ\GR Z\NRQDQLD&]DVDPLR]QDF]DWRRZLHOHZLÚFHM LQIRUPDFMLV]F]HJöïRZ\FKQLĝSU]\SXV]F]DV] 5R]ZDĝQDSU]\NïDGREOLF]HQLHSRZLHU]FKQL ĂFLDQ\:PDWHPDW\FHREOLF]HQLHSRZLHU]FKQL SURVWRNÈWDZ\PDJDSRPQRĝHQLDGZöFKOLF]E V]HURNRĂÊĿZ\VRNRĂÊ SRZLHU]FKQLD 7HJRURG]DMXREOLF]HQLDPRĝHV]SU]HSURZDG]LÊ ZSDPLÚFL-HGQDNSRGF]DVWZRU]HQLDVNU\SWX SU]H]QDF]RQHJRGRREOLF]HQLDSRZLHU]FKQL PXVLV]GRVWDUF]\ÊNRPSXWHURZLGRNïDGQH LQVWUXNFMH0RĝHV]ZLÚFQDND]DÊZ\NRQDQLH SRNROHLF]WHUHFKZ\PLHQLRQ\FKQLĝHMNURNöZ 1. =DSDPLÚWDMZDUWRĂÊV]HURNRĂÊ. 2. =DSDPLÚWDMZDUWRĂÊZ\VRNRĂÊ. 3. 3RPQöĝZDUWRĂÊV]HURNRĂÊ przez Z\VRNRĂÊ, REOLF]DMÈFW\PVDP\PSRZLHU]FKQLÚ. 4. 3U]HNDĝZ\QLNXĝ\WNRZQLNRZL :WDNLPSU]\SDGNXGRķ]DSDPLÚWDQLDĵZDUWRĂFL V]HURNRĂFL i Z\VRNRĂFLVÈXĝ\ZDQH]PLHQQH 7RLOXVWUXMHUöZQLHĝĝHVNU\SW]DZLHUDGRNïDGQH LQVWUXNFMHRG]LDïDQLDFKMDNLHPDSRGHMPRZDÊ NRPSXWHU =PLHQQÈPRĝQDSRUöZQDÊGR SDPLÚFLNUöWNRWUZDïHMSRQLHZDĝSRRSXV]F]HQLX GDQHMVWURQ\SU]HJOÈGDUNDLQWHUQHWRZDķ]DSRPQLĵ ZV]\VWNLH]ZLÈ]DQH]QLÈLQIRUPDFMH PODSTAWOWE INSTRUKCJE JAVASCRIPT =PLHQQDWRGREUDQD]ZDGOD SU]HGVWDZLRQHMNRQFHSFMLSRQLHZDĝ GDQHSU]HFKRZ\ZDQHZ]PLHQQHM PRJÈXOHJDÊ]PLDQLH OXEUöĝQLÊVLÚ ZWUDNFLHNDĝGHJRXUXFKDPLDQLD skryptu. 1LH]DOHĝQLHRGZ\PLDUöZĂFLDQ\GRVNRQDOHZLHV] ĝHMHMSRZLHU]FKQLÚPRĝHV]REOLF]\ÊSU]H]SRPQRĝHQLHV]HURNRĂFLĂFLDQ\SU]H]MHMZ\VRNRĂÊ. 3RGREQLHWHVDPHVNU\SW\F]ÚVWRVÈXĝ\ZDQHGR Z\NRQDQLDWHJRVDPHJR]DGDQLDQDZHWSRPLPR LFKXUXFKDPLDQLD]LQQ\PLGDQ\PL'ODWHJRWHĝ ]PLHQQHPRĝQDZ\NRU]\VWDÊGRSU]HGVWDZLHQLD ZVNU\SWDFKW\FKZDUWRĂFLNWöUHXOHJDMÈ]PLDQLH 0öZLP\ZLÚFĝHZ\QLNEÚG]LHobliczony na podVWDZLHGDQ\FKSU]HFKRZ\ZDQ\FKZ]PLHQQ\FK :\NRU]\VWDQLH]PLHQQ\FKGRSU]HGVWDZLHQLDOLF]E OXELQQHJRURG]DMXGDQ\FKMHVWEDUG]RSRGREQH GRNRQFHSFMLVWRVRZDQ\FKZDOJHEU]HJG]LHGR SU]HGVWDZLHQLDOLF]EVïXĝÈOLWHU\-HGQDNLVWQLHMH MHGQDNOXF]RZDUöĝQLFD=QDNUöZQRĂFLPD]XSHïQLHLQQH]QDF]HQLHZSURJUDPRZDQLXRF]\PVLÚ SU]HNRQDV]QDGZöFKNROHMQ\FKVWURQDFK PODSTAWOWE INSTRUKCJE JAVASCRIPT 65 ZMIENNE — JAK JE DEKLAROWAĆ? =DQLPEÚG]LHV]PöJïXĝ\Ê]PLHQQHMQDMSLHUZPXVLV]]JïRVLÊWDNÈFKÚÊ 7RR]QDF]DNRQLHF]QRĂÊXWZRU]HQLD]PLHQQHMLQDGDQLDMHMQD]Z\ 3URJUDPLĂFLQD]\ZDMÈWRGHNODURZDQLHP zmiennej. var quantity; SŁOWO KLUCZOWE OZNACZAJĄCE ZMIENNĄ varWRSU]\NïDGWHJRFR SURJUDPLĂFLQD]\ZDMÈVïRZHP NOXF]RZ\P. Interpreter -DYD6FULSWZLHĝHWRVïRZR MHVWXĝ\ZDQHGRXWZRU]HQLD zmiennej. 66 NAZWA ZMIENNEJ :FHOXXĝ\FLD]PLHQQHM WU]HEDQDGDÊMHMQD]ZÚ F]DVDPLRNUHĂODQÈPLDQHP LGHQW\ğNDWRUD :RPDZLDQ\P SU]\SDGNX]PLHQQDQRVLQD]ZÚ quantity. PODSTAWOWE INSTRUKCJE JAVASCRIPT -HĝHOLQD]ZD]PLHQQHMWRZLÚFHM QLĝW\ONRMHGQRVïRZRWRGRMHM ]DSLVDQLDQDMF]ÚĂFLHMVWRVXMH VLÚVW\ORQD]ZLHFDPHO&DVH 2]QDF]DWRĝHSLHUZV]HVïRZR UR]SRF]\QDVLÚPDïÈOLWHUÈ DNDĝGHNROHMQHGXĝÈ ZMIENNE — JAK PRZYPISYWAĆ IM WARTOŚĆ? 3RXWZRU]HQLX]PLHQQHMPRĝQDRNUHĂOLÊMDNLHLQIRUPDFMHPDMÈE\Ê ZQLHMSU]HFKRZ\ZDQH3URJUDPLĂFLPöZLÈZöZF]DV o SU]\SLVDQLXZDUWRĂFL zmiennej. OPERATOR PRZYPISANIA quantity = 3; NAZWA ZMIENNEJ :W\PPRPHQFLHPRĝQD ]DVWRVRZDÊ]PLHQQÈSRSU]H] Xĝ\FLHMHMQD]Z\:RPDZLDQ\PSU]\SDGNXXVWDZLOLĂP\ ZDUWRĂÊ]PLHQQHMRQD]ZLH quantity. Kiedy istnieje taka PRĝOLZRĂÊQD]ZD]PLHQQHM SRZLQQDZVND]\ZDÊURG]DM SU]HFKRZ\ZDQ\FKSU]H]QLÈ GDQ\FK WARTOŚĆ ZMIENNEJ =QDNUöZQRĂFL = MHVWRSHUDtorem przypisania. Informuje RQRSU]\SLVDQLXZDUWRĂFL ]PLHQQHM3RQDGWRMHVWXĝ\ZDQ\ GRXDNWXDOQLHQLDZDUWRĂFLGDQHM ]PLHQQHM SDWU]SRGUR]G]LDï ķ=PLDQDZDUWRĂFL]PLHQQHMĵ 'RSöNL]PLHQQHMQLHMHVW SU]\SLVDQDZDUWRĂÊRNUHĂODP\ ZDUWRĂÊ]PLHQQHMMDNRQLH]GHğQLRZDQÈ. 0LHMVFH]DGHNODURZDQLD]PLHQQHMPRĝHPLHÊZSï\ZQDWRZNWöU\FKIUDJPHQWDFKVNU\SWXPRĝQDXĝ\ZDÊ WHM]PLHQQHM3URJUDPLĂFLPöZLÈZöZF]DVR]DVLÚJX]PLHQQHMFR]RVWDQLHRPöZLRQHZUR]G]LDOH ZSRGUR]G]LDOHķ=DNUHV]PLHQQHMĵ PODSTAWOWE INSTRUKCJE JAVASCRIPT 67 TYPY DANYCH -DYD6FULSWUR]UöĝQLDOLF]E\FLÈJLWHNVWRZH RUD]ZDUWRĂFLtrue i falseRNUHĂODQHPLDQHP ZDUWRĂFLERRORZVNLFK 68 TYPY LICZBOWE TYPY TEKSTOWE TYPY BOOLOWSKIE 7\S\OLF]ERZHVÈSU]H]QDF]RQH GRREVïXJLOLF]E 'DQHZSRVWDFLFLÈJöZ WHNVWRZ\FKVNïDGDMÈVLÚ]OLWHU RUD]LQQ\FK]QDNöZ 7\SERRORZVNLPRĝHSU]\MPRZDÊMHGQÈ]GZöFKZDUWRĂFL true lub false. 0.75 ’Witaj, Janku!’ true :SU]\SDGNX]DGDñREHMPXMÈF\FKREOLF]HQLDEÚG]LHV]Xĝ\ZDï F\IURGGR1DSU]\NïDG OLF]EDSLÚÊW\VLÚF\GZLHĂFLH VLHGHPG]LHVLÈWGZDMHVW ]DSLV\ZDQDZSRVWDFL ]ZUöÊXZDJÚQDEUDNVHSDUDWRUDW\VLÚF]QHJR 2F]\ZLĂFLH PRĝQDUöZQLHĝXĝ\ZDÊOLF]E XMHPQ\FK QDSU]\NïDG L]DZLHUDMÈF\FKF]ÚĂÊG]LHVLÚWQÈ QDSU]\NïDGWU]\F]ZDUWH ]DSLVDQHZSRVWDFL =ZUöÊXZDJÚQDXMÚFLHFLÈJX WHNVWRZHJRZDSRVWURI\7R UöZQLHĝPRĝHE\ÊFXG]\VïöZ DOHRWZLHUDMÈF\L]DP\NDMÈF\ ]QDNF\WRZDQLDPXV]ÈE\ÊWDNLH same. %\ÊPRĝHQDUD]LHZ\GDMH VLÚWRQLHFRDEVWUDNF\MQHDOH ZU]HF]\ZLVWRĂFLW\SERRORZVNL MHVWQLH]Z\NOHXĝ\WHF]Q\ /LF]E\VÈZ\NRU]\VW\ZDQH QLHW\ONRZNDONXODWRUDFKDOH UöZQLHĝZ]DGDQLDFKWDNLFK MDNXVWDOHQLHZLHONRĂFLHNUDQX SU]HVXQLÚFLHHOHPHQWXGR ZVND]DQHMSR]\FMLQDVWURQLH OXEXVWDZLHQLHLORĂFLF]DVX ZWUDNFLHNWöUHJRHOHPHQWPD ]QLNQÈÊ 3R]DZ\PLHQLRQ\PLWU]HPDW\SDPLGDQ\FK-DYD6FULSWREVïXJXMH WDNĝHLQQH WDEOLFHRELHNW\XQGHğQHG i null ĽSR]QDV]MH ZGDOV]\FKUR]G]LDïDFK &LÈJLWHNVWRZHVÈXĝ\ZDQH podczas pracy z tekstem doZROQHJRURG]DMX%DUG]RF]ÚVWR VÈZ\NRU]\VW\ZDQHZFHOX GRGDZDQLDQRZHM]DZDUWRĂFLQD VWURQLHPRJÈUöZQLHĝ]DZLHUDÊ znaczniki HTML. 3RWUDNWXMJRMDNZïÈF]QLN ĂZLDWïDĽ]QDMGXMHVLÚ ZSR]\FMLķZïÈF]RQ\ĵOXE ķZ\ïÈF]RQ\ĵ-DNVLÚSU]HNRQDV] ZUR]G]LDOHW\SERRORZVNL MHVWQLH]Z\NOHXĝ\WHF]Q\ SRGF]DVXVWDODQLDNWöUD F]ÚĂÊVNU\SWXSRZLQQDE\Ê XUXFKRPLRQD ,QDF]HMQLĝMHVWZLQQ\FKMÚ]\NDFKSURJUDPRZDQLDZMÚ]\NX -DYD6FULSWSRGF]DVGHNODURZDQLD]PLHQQHMQLHPDNRQLHF]QRĂFL ZVND]DQLDW\SXSU]HFKRZ\ZDQ\FKSU]H]QLÈGDQ\FK PODSTAWOWE INSTRUKCJE JAVASCRIPT UŻYCIE ZMIENNEJ DO PRZECHOWYWANIA LICZBY JAVASCRIPT c02/js/numeric-variable.js var price; var quantity; var total; • zmienna priceSU]HFKRZXMH FHQÚMHGQHMOLWHU\ • zmienna quantitySU]HFKR- price = 5; quantity = 14; total = price * quantity; • var el = document.getElementById(’cost’); HOWH[W&RQWHQW WRWDOĳ]ïĳ HTML :SU]HGVWDZLRQ\PSU]\NïDG]LH XWZRU]RQRWU]\]PLHQQH LSU]\SLVDQRLPZDUWRĂFL c02/numeric-variable.html <h1>(OGHUĠRZHU</h1> <div id=”content”> <h2>:ïDVQDWDEOLF]ND</h2> <div id=”cost”>.RV]W]ï]DOLWHUÚ</div> <img src=”images/preview.jpg” DOW ĵ3U]\NïDGWDEOLF]NLĵ! </div> <script src=”js/numeric-variable.js”></script> 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 ĳ=DSR]QDMVLÚ]QDV]\PDVRUW\PHQWHPĳ ĳ=DSR]QDMVLÚ z naszym nowym asortymentem’ 70 PODSTAWOWE INSTRUKCJE JAVASCRIPT c02/js/string-variable.js JAVASCRIPT var username; var message; username = ’Marta’; PHVVDJH ĳ=DSR]QDMVLÚ]QDV]\PDVRUW\PHQWHPĳ var elName = document.getElementById(’name’); elName.textContent = username; var elNote = document.getElementById(’note’); elNote.textContent = message; c02/string-variable.html HTML <h1>(OGHUĠRZHU</h1> <div id=”content”> <div id=”title”>Witaj, <span id=”name”>przyjacielu</span>!</ div> <div id=”note”>5R]HMU]\MVLÚ</div> </div> <script src=”js/string-variable.js”></ script> WYNIK UŻYCIE ZNAKÓW CYTOWANIA W CIĄGU TEKSTOWYM JAVASCRIPT c02/js/string-with-quotes.js var title; var message; title = “Oferta specjalna w Molly’s”; message = ’<a href=\”sale.html\”>Rabat 25%!</a>’; var elTitle = document.getElementById(’title’); elTitle.innerHTML = title; var elNote = document.getElementById(’note’); elNote.innerHTML = message; HTML c02/string-with-quotes.html <h1>(OGHUĠRZHU</h1> <div id=”content”> <div id=”title”>Oferty specjalne</div> <div id=”note”>=DSLV]VLÚDE\RWU]\P\ZDÊRIHUW\ przygotowane specjalnie dla Ciebie!</div> </div> <script src=”js/string-with-quotes.js”></script> 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 <h1>(OGHUĠRZHU</h1> <div id=”content”> <div class=”message”>'RVWÚSQ\ <span id=”stock”></span></div> <div class=”message”>:\VïDQ\ <span id=”shipping”></span></div> </div> <script src=”js/boolean-variable.js”></ script> WYNIK SKRÓTY PODCZAS TWORZENIA ZMIENNYCH JAVASCRIPT 1 2 c02/js/shorthand-variable.js var price = 5; var quantity = 14; var total = price * quantity; var price, quantity, total; price = 5; quantity = 14; total = price * quantity; 3 var price = 5, quantity = 14; var total = price * quantity; 4 :\ĂZLHWOHQLHZDUWRĂFLFDïNRZLWHM ZHOHPHQFLHNWöUHJRZDUWRĂÊDWU\EXWXLG Z\QRVLFRVW var el = document.getElementById(’cost’); HOWH[W&RQWHQW WRWDOĳ]ïĳ WYNIK 3URJUDPLĂFLF]DVHPVWRVXMÈVNUöW\ SRGF]DVWZRU]HQLD]PLHQQ\FK3RQLĝHM SU]HGVWDZLRQRWU]\VSRVRE\GHNODURZDQLD ]PLHQQ\FKLSU]\SLV\ZDQLDLPZDUWRĂFL 1. =DGHNODURZDQLH]PLHQQHMLSU]\SLVDQLH MHMZDUWRĂFLRGE\ZDVLÚZW\PVDP\P SROHFHQLX 2. 7U]\]PLHQQH]RVWDï\]DGHNODURZDQH ZMHGQ\PZLHUV]X:NROHMQ\FKZLHUV]DFK SU]\SLVDQRLPZDUWRĂFL 3. =DGHNODURZDQLHGZöFK]PLHQQ\FK LSU]\SLVDQLHLPZDUWRĂFLQDVWÈSLïR ZMHGQ\PZLHUV]X:GUXJLPZLHUV]XMHVW ]DGHNODURZDQDNROHMQD]PLHQQDNWöUHM UöZQLHĝSU]\SLVDQRZDUWRĂÊ :SU]\NïDG]LHWU]HFLPSRND]DQRGZLH OLF]E\DOHZMHGQ\PZLHUV]XPRĝQD ]DGHNODURZDÊ]PLHQQHSU]HFKRZXMÈFH GDQHLQQ\FKW\SöZQDSU]\NïDGFLÈJ WHNVWRZ\LOLF]EÚ 4. 7XWDM]PLHQQD]RVWDïDZ\NRU]\VWDQD ZFHOXSU]HFKRZ\ZDQLDRGQLHVLHQLDGR HOHPHQWXQDVWURQLH+70/']LÚNLWHPX PRĝQDSUDFRZDÊEH]SRĂUHGQLR]HOHPHQWHPSU]HFKRZ\ZDQ\PZWHM]PLHQQHM :LÚFHMLQIRUPDFMLQDWHQWHPDW]QDMG]LHV] ZUR]G]LDOHZSRGUR]G]LDOHķ%XIRURZDQLH]DS\WDñPRGHOX'ĵ :SUDZG]LHVNUöWPRĝH]DRV]F]ÚG]LÊ SURJUDPLĂFLHQLHFRSLVDQLDDOHMHGQRF]HĂQLHXWUXGQLDRGF]\WNRGX-HĝHOLUR]SRF]\QDV]QDXNÚSURJUDPRZDQLDOHSV]\P UR]ZLÈ]DQLHPEÚG]LHXPLHV]F]HQLHNRGX ZZLÚNV]HMOLF]ELHZLHUV]\SRQLHZDĝ ZöZF]DVMHVWïDWZLHMV]\GRRGF]\WX L]UR]XPLHQLD PODSTAWOWE INSTRUKCJE JAVASCRIPT 73 ZMIANA WARTOŚCI ZMIENNEJ 3RSU]\SLVDQLXZDUWRĂFL]PLHQQHMPRĝHV] SöěQLHMZW\PVDP\PVNU\SFLH]PLHQLÊWÚ ZDUWRĂÊ c02/js/update-variable.js 3RXWZRU]HQLX]PLHQQHMQLHWU]HED SRQRZQLHXĝ\ZDÊVïRZDNOXF]RZHJRvar, DE\SU]\SLVDÊMHMQRZÈZDUWRĂÊ:\VWDUF]\ Xĝ\ÊQD]Z\]PLHQQHM]QDNXUöZQRĂFL QD]\ZDQHJRWDNĝHRSHUDWRUHPSU]\SLVDQLD LQRZHMZDUWRĂFLGODGDQHM]PLHQQHM inStock = true; shipping = false; 1DSU]\NïDGSRF]ÈWNRZDZDUWRĂÊ]PLHQQHM shippingPRĝHZ\QRVLÊfalse1DVWÚSQLH QDVNXWHNSHZQHM]PLDQ\RND]XMHVLÚ ĝHSURGXNWPRĝHE\ÊZ\VïDQ\'ODWHJR WHĝZNRG]LHZDUWRĂÊ]PLHQQHMshipping ulega zmianie na true. inStock = false; shipping = true; :RPDZLDQ\PSU]\NïDG]LHZDUWRĂFLREX ]PLHQQ\FK]PLHQLDMÈVLÚQDSU]HFLZQH JAVASCRIPT var inStock; var shipping; :W\PPLHMVFXPRJÈE\ÊSU]HWZDU]DQHGDQH 6NXWNLHPSU]HWZDU]DQLDPRĝHE\ÊSRWU]HED ]PLDQ\ZDUWRĂFL]PLHQQ\FK var elStock = document. getElementById(’stock’); elStock.className = inStock; var elShip = document. getElementById(’shipping’); elShip.className = shipping; WYNIK PODSTAWOWE INSTRUKCJE JAVASCRIPT REGUŁY DOTYCZĄCE NADAWANIA NAZW ZMIENNYM 3RQLĝHMSU]HGVWDZLRQRV]HĂÊUHJXïNWöU\FKQDOHĝ\SU]HVWU]HJDÊSRGF]DV QDGDZDQLDQD]Z]PLHQQ\P 1 1D]ZDPXVLUR]SRF]\QDÊVLÚ OLWHUÈ]QDNLHPGRODUD $ OXE SRGNUHĂOHQLHP _ QDWRPLDVW QLHPRĝHUR]SRF]\QDÊVLÚRG cyfry. 2 3 1D]ZD]PLHQQHMPRĝH]DZLHUDÊ ]QDNGRODUD $ OXESRGNUHĂOHQLH _ DOHQLHZROQRXĝ\ZDÊ P\ĂOQLND - OXENURSNL . 1LHZROQRXĝ\ZDÊVïöZ NOXF]RZ\FK lub ]DUH]HUZRZDnych6ïRZDNOXF]RZHWRVïRZD VSHFMDOQHQDND]XMÈFHLQWHUSUHWHURZLZ\NRQ\ZDQLHRNUHĂORQ\FK]DGDñ1DSU]\NïDGVïRZR NOXF]RZHvarMHVWXĝ\ZDQHGR ]DGHNODURZDQLD]PLHQQHM=NROHLVïRZD]DUH]HUZRZDQHPRJÈ E\ÊZ\NRU]\VWDQHZSU]\V]ï\FK ZHUVMDFK-DYD6FULSW WIĘCEJ W SIECI 3HïQÈOLVWÚVïöZNOXF]RZ\FK L]DUH]HUZRZDQ\FKZ-DYD6FULSWPRĝQD]QDOHěÊQDVWURQLH SRĂZLÚFRQHMWHMNVLÈĝFH 5 6 :HZV]\VWNLFK]PLHQQ\FK ZLHONRĂÊOLWHUPD]QDF]HQLH 'ODWHJRWHĝscore i Score to zuSHïQLHUöĝQHQD]Z\]PLHQQ\FK =ïÈSUDNW\NÈMHVWWZRU]HQLH GZöFK]PLHQQ\FKRWHMVDPHM QD]ZLHDOHUöĝQLÈF\FKVLÚW\ONR ZLHONRĂFLÈOLWHU 8ĝ\ZDMQD]Z\ZVND]XMÈFHMQD URG]DMLQIRUPDFMLSU]HFKRZ\ZDQ\FKSU]H]GDQÈ]PLHQQÈ 1DSU]\NïDG]PLHQQDğUVW1DPH PRĝHSU]HFKRZ\ZDÊLPLÚ Xĝ\WNRZQLNDlastName jego QD]ZLVNRQDWRPLDVWage jego ZLHN -HĝHOLQD]ZD]PLHQQHMVNïDGD VLÚ]ZLÚFHMQLĝW\ONRMHGQHJR VïRZDWRSRF]ÈZV]\RG GUXJLHJRVïRZDSLHUZV]DOLWHUD SRZLQQDE\ÊGXĝD1DSU]\NïDGQDGDM]PLHQQHMQD]ZÚ ğUVW1DPH zamiast ğUVWQDPH. 7DNLVW\OQD]ZMHVWRNUHĂODQ\ mianem camelCase. Istnieje UöZQLHĝPRĝOLZRĂÊUR]G]LHODQLD VïöZ]QDNLHPSRGNUHĂOHQLD QLH ZROQRXĝ\ZDÊP\ĂOQLNöZ PODSTAWOWE INSTRUKCJE JAVASCRIPT 75 TABLICE Tablica to zmienna specjalnego typu. 1LHSU]HFKRZXMHW\ONRMHGQHMZDUWRĂFLDOHLFKOLVWÚ 8ĝ\FLHWDEOLF\QDOHĝ\UR]ZDĝ\Ê podczas pracy z OLVWÈ lub zbiorem SRZLÈ]DQ\FK]HVREÈ ZDUWRĂFL 7DEOLFDMHVWV]F]HJöOQLH Xĝ\WHF]QDJG\QLHZLDGRPR LOHGRNïDGQLHHOHPHQWöZEÚG]LH ]QDMGRZDïRVLÚQDOLĂFLHSRQLHZDĝZWUDNFLHWZRU]HQLDWDEOLF\ MHV]F]HQLH]RVWDïDRNUHĂORQD OLF]EDSU]HFKRZ\ZDQ\FKZQLHM ZDUWRĂFL 7DEOLFDPRĝHE\ÊQDSU]\NïDG SU]H]QDF]RQDGRSU]HFKRZ\ZDQLDSRV]F]HJöOQ\FKHOHPHQWöZ listy rzeczy do kupienia, SRQLHZDĝHOHPHQW\WHMOLVW\VÈ ]HVREÈSRZLÈ]DQH Ponadto podczas SU]\JRWRZ\ZDQLDQRZHMOLVW\ rzeczy do kupienia liczba HOHPHQWöZQDSRV]F]HJöOQ\FK OLVWDFKPRĝHE\ÊUöĝQD -HĝHOLQLHZLHV]LOHHOHPHQWöZ EÚG]LH]DZLHUDïDOLVWDWR]DPLDVWWZRU]\ÊZLHOH]PLHQQ\FK GODGïXJLHMOLVW\ NLHG\LWDN EÚG]LHPRĝQDZ\NRU]\VWDÊW\ONR QLHZLHONÈLFKOLF]EÚ ]QDF]QLH OHSLHMEÚG]LHXĝ\ÊWDEOLF\ 76 PODSTAWOWE INSTRUKCJE JAVASCRIPT Jak zobaczysz na kolejnej VWURQLHZDUWRĂFLZWDEOLF\VÈ rozdzielane przecinkami. :UR]G]LDOHGRZLHV]VLÚ ĝHWDEOLFHPRJÈE\ÊQLH]Z\NOH Xĝ\WHF]QHSRGF]DVSU]HGVWDZLDQLDVNRPSOLNRZDQ\FKGDQ\FK TWORZENIE TABLICY JAVASCRIPT c02/js/array-literal.js var colors; FRORUV >ĳELDï\ĳĳF]DUQ\ĳĳLQQ\ĳ@ var el = document.getElementById(’colors’); el.textContent = colors[0]; WYNIK 7DEOLFÚWZRU]\V]LQDGDMHV]MHMQD]ZÚ SRGREQLHMDNZSU]\SDGNXNDĝGHMLQQHM ]PLHQQHMF]\OL]Z\NRU]\VWDQLHPVïRZD NOXF]RZHJRvarLQD]Z\WDEOLF\ :DUWRĂFLSU]H]QDF]RQHGRZVWDZLHQLD ZWDEOLF\VÈSRGDZDQHZQDZLDVLH NZDGUDWRZ\PLUR]G]LHORQHSU]HFLQNDPL :DUWRĂFLZWDEOLF\QLHPXV]ÈE\ÊWHJR VDPHJRW\SXGDQ\FKDZLÚFZWHMVDPHM WDEOLF\PRĝQDSU]HFKRZ\ZDÊFLÈJL WHNVWRZHOLF]E\LZDUWRĂFLERRORZVNLH 7DNDWHFKQLNDWZRU]HQLDWDEOLF\MHVWRNUHĂODQDPLDQHPOLWHUDïXWDEOLF\. To preferoZDQDPHWRGDWZRU]HQLDWDEOLF\,VWQLHMH PRĝOLZRĂÊXPLHV]F]HQLDSRV]F]HJöOQ\FK ZDUWRĂFLZRGG]LHOQ\FKZLHUV]DFK FRORUV >ĳELDï\ĳ ’czarny’, ’inny’]; JAVASCRIPT c02/js/array-constructor.js YDUFRORUV QHZ$UUD\ ĳELDï\ĳ ’czarny’, ’inny’); var el = document.getElementById(’colors’); el.innerHTML = colors.item(0); 3ROHZHMVWURQLHSRND]DQRSU]\NïDG XWZRU]HQLDWDEOLF\]Z\NRU]\VWDQLHP LQQHMWHFKQLNLQD]\ZDQHMNRQVWUXNWRUHP WDEOLF\:NRG]LH]QDMGXMHVLÚVïRZR NOXF]RZHnewZUD]]Array();:DUWRĂFL VÈSRGDQHZQDZLDVLH]Z\Nï\P QLH NZDGUDWRZ\P LUR]G]LHORQHSU]HFLQNDPL 'RSREUDQLDGDQ\FK]WDEOLF\PRĝQDXĝ\Ê PHWRG\RQD]ZLHitem(). Numer indeksu HOHPHQWXMHVWSRGDZDQ\ZQDZLDVLH 3RGF]DVWZRU]HQLDWDEOLF\]DVWRVRZDQLHOLWHUDïXWDEOLF\ SU]HGVWDZLRQHMZSLHUZV]\PIUDJPHQFLHNRGX MHVW SUHIHURZDQH]DPLDVWXĝ\FLDNRQVWUXNWRUDWDEOLF\ PODSTAWOWE INSTRUKCJE JAVASCRIPT 77 WARTOŚCI W TABLICY :DUWRĂFLZWDEOLF\VÈGRVWÚSQHWDNMDNE\WZRU]\ï\ SRQXPHURZDQÈOLVWÚ7U]HEDNRQLHF]QLHSDPLÚWDÊ ĝHQXPHU\WHMOLVW\]DF]\QDMÈVLÚRG]HUDDQLHRGMHG\QNL NUMEROWANIE ELEMENTÓW TABLICY UZYSKANIE DOSTĘPU DO ELEMENTÓW TABLICY LICZBA ELEMENTÓW W TABLICY .DĝG\HOHPHQWWDEOLF\PD DXWRPDW\F]QLHQDGDQÈOLF]EÚ QD]\ZDQÈindeksem. Za SRĂUHGQLFWZHPLQGHNVXPRĝQD X]\VNDÊGRVWÚSGRZVND]DQHJR HOHPHQWXWDEOLF\5R]ZDĝ SRQLĝV]ÈWDEOLFÚSU]HFKRZXMÈFÈ WU]\NRORU\ $E\SREUDÊWU]HFLHOHPHQW ]OLVW\SRGDMQD]ZÚWDEOLF\ RUD]QXPHULQGHNVXZQDZLDVLH NZDGUDWRZ\P .DĝGDWDEOLFDSRVLDGDZïDĂFLZRĂÊRQD]ZLHlengthSU]HFKRZXMÈFÈOLF]EÚHOHPHQWöZNWöUH ]QDMGXMÈVLÚZGDQHMWDEOLF\ 3RQLĝHMSU]HGVWDZLRQR GHNODUDFMÚ]PLHQQHMRQD]ZLH itemThree. Tej zmiennej ]RVWDQLHSU]\SLVDQDZDUWRĂÊ trzeciego koloru z tablicy colors. 3RQLĝHMSU]HGVWDZLRQR GHNODUDFMÚ]PLHQQHMRQD]ZLH numColors. Tej zmiennej ]RVWDQLHSU]\SLVDQDZDUWRĂÊ ZSRVWDFLOLF]E\HOHPHQWöZ ]QDMGXMÈF\FKVLÚZWDEOLF\ var itemThree; itemThree = colors[2]; 3RQD]ZLHWDEOLF\PDP\NURSNÚ DQDVWÚSQLHVïRZRNOXF]RZH length. var colors; FRORUV >ĳELDï\ĳ ’czarny’, ’inny’]; 'H]RULHQWXMÈFHPRĝHE\ÊWR ĝHQXPHU\LQGHNVöZ]DF]\QDMÈ VLÚRG0 QLHRG1 :SRQLĝV]HM WDEHOLSU]HGVWDZLRQRHOHPHQW\ WDEOLF\LRGSRZLDGDMÈFHLP ZDUWRĂFLLQGHNVöZ Indeks :DUWRĂÊ 0 ĳELDï\ĳ 1 ’czarny’ 2 ’inny’ var numColors; numColors = colors.length; :NVLÈĝFH ]ZïDV]F]DZUR]G]LDOH SR]QDV]]QDF]QLH ZLÚFHMIXQNFMLWDEOLFNWöUH VÈZ-DYD6FULSWNRQVWUXNFMÈ HODVW\F]QÈLRIHUXMÈFÈEDUG]R GXĝHPRĝOLZRĂFL 78 PODSTAWOWE INSTRUKCJE JAVASCRIPT UZYSKANIE DOSTĘPU I ZMIANA WARTOŚCI W TABLICY JAVASCRIPT c02/js/update-array.js 8WZRU]HQLHWDEOLF\ YDUFRORUV >ĳELDï\ĳ ’czarny’, ’inny’]; 3LHUZV]\ZLHUV]NRGXNWöU\SU]HGVWDZLRQR SROHZHMVWURQLHSRZRGXMHXWZRU]HQLH WDEOLF\]DZLHUDMÈFHMOLVWÚWU]HFKNRORUöZ :DUWRĂFLPRJÈE\ÊGRGDQHZW\PVDP\P ZLHUV]XOXEZRGG]LHOQ\FKMDNZRPDZLDQ\PSU]\NïDG]LH 8DNWXDOQLHQLHWU]HFLHJRHOHPHQWXWDEOLF\ FRORUV>@ ĳEHĝRZ\ĳ *G\WDEOLFDMHVWXWZRU]RQDMHMWU]HFL element zostaje zmieniony z ’inny’ na ĳEHĝRZ\ĳ. 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈ DWU\EXWXLGMHVWFRORUV var el = document.getElementById(’colors’); $E\X]\VNDÊGRVWÚSGRZDUWRĂFLZWDEOLF\ SRQD]ZLHWDEOLF\QDOHĝ\SRGDÊQXPHU LQGHNVXXMÚW\ZQDZLDVNZDGUDWRZ\ =DVWÈSLHQLHWU]HFLHJRHOHPHQWXWDEOLF\ el.textContent = colors[2]; :DUWRĂÊHOHPHQWXWDEOLF\PRĝQD ]PLHQLÊSU]H]MHJRZ\EöUDQDVWÚSQLH SU]\SLVDQLHPXQRZHMZDUWRĂFLSRGREQLH MDNZSU]\SDGNXNDĝGHMLQQHM]PLHQQHM 3RGF]DV]PLDQ\ZDUWRĂFLXĝ\ZDVLÚ]QDNX UöZQRĂFLSRNWöU\PXPLHV]F]DVLÚQRZÈ ZDUWRĂÊGODGDQHJRHOHPHQWX WYNIK :GZöFKRVWDWQLFKSROHFHQLDFKQRZR uaktualniony trzeci element tablicy zostaje dodany na stronie. -HĝHOLFKFHV]Z\ĂZLHWOLÊZV]\VWNLH HOHPHQW\]WDEOLF\WRQDOHĝ\Xĝ\ÊSÚWOL FR]RVWDQLHRPöZLRQHZUR]G]LDOH ZSRGUR]G]LDOHķ3ÚWOHĵ PODSTAWOWE INSTRUKCJE JAVASCRIPT 79 WYRAŻENIA Obliczenie Z\UDĝHQLDVNXWNXMHRWU]\PDQLHPMHGQHMZDUWRĂFL 2JöOQLHU]HF]ELRUÈFPDP\GZDURG]DMHZ\UDĝHñ 1 WYRAŻENIE, KTÓRE PO PROSTU PRZYPISUJE WARTOŚĆ ZMIENNEJ $E\]PLHQQDE\ïDXĝ\WHF]QDQDOHĝ\SU]\SLVDÊ MHMZDUWRĂÊ-DN]GÈĝ\ïHĂMXĝ]REDF]\ÊRGE\ZD VLÚWR]Z\NRU]\VWDQLHPRSHUDWRUDSU]\SLVDQLD ]QDNXUöZQRĂFL 2 WYRAŻENIE WYKORZYSTUJĄCE CO NAJMNIEJ DWIE WARTOŚCI DO ZWRÓCENIA JEDNEJ WARTOŚCI ,VWQLHMHPRĝOLZRĂÊSU]HSURZDG]HQLDRSHUDFML QDGRZROQHMOLF]ELHSRV]F]HJöOQ\FKZDUWRĂFL ]REDF]QDQDVWÚSQHMVWURQLH ZFHOXXVWDOHQLD MHGQHMZDUWRĂFL1DSU]\NïDG YDUFRORU ĳEHĝRZ\ĳ YDUDUHD :DUWRĂFLÈ]PLHQQHMcolor jest teraz EHĝRZ\. :DUWRĂFLÈ]PLHQQHMarea jest teraz 6. .LHG\SRUD]SLHUZV]\GHNODUXMHV]]PLHQQÈ ]DSRPRFÈVïRZDNOXF]RZHJRvar, nadajesz jej ZDUWRĂÊVSHFMDOQÈXQGHğQHG. To ulegnie zmianie SRSU]\SLVDQLX]PLHQQHMLQQHMZDUWRĂFL3RG Z]JOÚGHPWHFKQLF]Q\PXQGHğQHG to typ taki jak OLF]EDFLÈJWHNVWRZ\OXEZDUWRĂÊERRORZVND 3U]HGVWDZLRQHWXWDMZ\UDĝHQLH3 * 2 daje ZZ\QLNXZDUWRĂÊ6:SU]\NïDG]LHXĝ\WRWDNĝH RSHUDWRUDSU]\SLVDQLDDZLÚFREOLF]RQ\Z\QLN Z\UDĝHQLD3 * 2MHVWSU]HFKRZ\ZDQ\Z]PLHQQHM RQD]ZLHarea. ,QQ\SU]\NïDGZ\UDĝHQLDXĝ\ZDMÈFHJRGZöFK ZDUWRĂFLGRRNUHĂOHQLDMHGQHMWRSRïÈF]HQLHGZöFK FLÈJöZWHNVWRZ\FKZMHGHQFLÈJ 80 PODSTAWOWE INSTRUKCJE JAVASCRIPT OPERATORY ']LDïDQLHZ\UDĝHñRSLHUDVLÚQDWDN]ZDQ\FKRSHUDWRUDFK, NWöUHSR]ZDODMÈSURJUDPLVWRPQDWZRU]HQLHSRMHG\QF]\FKZDUWRĂFL QDSRGVWDZLHFRQDMPQLHMMHGQHMZDUWRĂFLZ\MĂFLRZHM :W\PUR]G]LDOH]RVWDï\ RPöZLRQHRSHUDWRU\ :UR]G]LDOH]RVWDQÈ RPöZLRQHRSHUDWRU\ PRZYPISANIA PORÓWNANIA 2SHUDWRU\SU]\SLVDQLDSU]\SLVXMÈZDUWRĂÊ ]PLHQQHM 2SHUDWRU\SRUöZQDQLDSRUöZQXMÈZDUWRĂFL ]PLHQQ\FKL]ZUDFDMÈtrueEÈGěfalse FRORU ĳEHĝRZ\ĳ EX\ ! :DUWRĂFLÈ]PLHQQHMcolor jest teraz EHĝRZ\. 3DWU]SRGUR]G]LDïķ=PLHQQHĽMDNSU]\SLV\ZDÊ LPZDUWRĂÊ"ĵ :DUWRĂFLÈ]PLHQQHMbuy jest teraz false. 3DWU]UR]G]LDïSRGUR]G]LDïķ2SHUDWRU\ SRUöZQDQLDĽRFHQDZDUXQNöZĵ ARYTMETYCZNE LOGICZNE 2SHUDWRU\DU\WPHW\F]QHSU]HSURZDG]DMÈSRGVWDZRZHRSHUDFMHPDWHPDW\F]QH 3RUöZQXMÈZ\UDĝHQLDL]ZUDFDMÈtrue lub false DUHD EX\ ! :DUWRĂFLÈ]PLHQQHMarea jest teraz 6. 3DWU]SRGUR]G]LDïķ2SHUDWRU\DU\WPHW\F]QHĵ :DUWRĂFLÈ]PLHQQHMbuy jest teraz true. 3DWU]UR]G]LDïSRGUR]G]LDïķ2SHUDWRU\ ORJLF]QHĵ CIĄGÓW TEKSTOWYCH 2SHUDWRU\WHSR]ZDODMÈQDSRïÈF]HQLHGZöFK FLÈJöZWHNVWRZ\FK JUHHWLQJ ĳ:LWDMĳĳ-DQHNĳ :DUWRĂFLÈ]PLHQQHMgreeting jest teraz Witaj, Janek. 3DWU]SRGUR]G]LDïķ2SHUDWRU\FLÈJöZWHNVWRZ\FKĵ PODSTAWOWE INSTRUKCJE JAVASCRIPT 81 OPERATORY ARYTMETYCZNE -DYD6FULSWREVïXJXMHZ\PLHQLRQHSRQLĝHMRSHUDWRU\PDWHPDW\F]QH NWöUHPRĝQDVWRVRZDÊZSRïÈF]HQLX]OLF]EDPL0RĝHV]MHSDPLÚWDÊ z lekcji matematyki. NAZWA DODAWANIE ODEJMOWANIE DZIELENIE 012¿(1,( INKREMENTACJA DEKREMENTACJA MODULO OPERATOR OPIS 35=<.$' WYNIK 'RGDQLHMHGQHMZDUWRĂFLGRGUXJLHM 10 + 5 15 2GMÚFLHMHGQHMZDUWRĂFLRGGUXJLHM 10 - 5 5 3RG]LHOHQLHGZöFKZDUWRĂFL 10 / 5 2 * 3RPQRĝHQLHGZöFKZDUWRĂFLĽ Z\NRU]\VWDQLHJZLD]GNL ]ZUöÊ XZDJÚĝHWRQLHMHVWOLWHUDx 10 * 5 50 ++ 'RGDQLHZDUWRĂFL1GRELHĝÈFHM ŘŘ 2GMÚFLHZDUWRĂFL1RGELHĝÈFHM + Ř / % i = 10; 11 i++; i = 10; 9 i--; 3RG]LHOHQLHGZöFKZDUWRĂFLL]ZURW reszty z dzielenia 10 % 3 1 KOLEJNOŚĆ WYKONYWANIA :MHGQ\PZ\UDĝHQLXPRĝH ]QDMGRZDÊVLÚZLHOHRSHUDWRUöZ DU\WPHW\F]Q\FKLGODWHJRZDĝQH MHVW]UR]XPLHQLHMDNEÚG]LH REOLF]RQ\Z\QLN0QRĝHQLH LG]LHOHQLHVÈSU]HSURZDG]DQH SU]HGGRGDZDQLHPLRGHMPRZDQLHP.ROHMQRĂÊRSHUDFML ZSï\ZDZLÚFQDZ\QLNNWöU\ VSRG]LHZDV]VLÚRWU]\PDÊ$E\ WR]LOXVWURZDÊVSöMU]QDSU]HGVWDZLRQHSRQLĝHMSU]\NïDG\ 82 2WRRSHUDFMHSU]HSURZDG]DQH RGOHZHMGRSUDZHMVWURQ\ Z\QLNZ\QRVL16 total = 2 + 4 + 10; -HGQDNZ\QLNLHPSRQLĝV]HJR Z\UDĝHQLDMHVW42, a nie 60 total = 2 + 4 * 10; :\QLNDWR]IDNWXĝHPQRĝHQLH LG]LHOHQLHMHVWSU]HSURZDG]DQH SU]HGGRGDZDQLHPLRGHMPRZDQLHP PODSTAWOWE INSTRUKCJE JAVASCRIPT $E\]PLHQLÊNROHMQRĂÊ SU]HSURZDG]DQLDRSHUDFMLWH NWöUHPDMÈE\ÊZ\NRQDQHMDNR SLHUZV]HXPLHĂÊZQDZLDVLH :\QLNLHPSRQLĝV]HJRZ\UDĝHQLD jest 60 total = (2 + 4) * 10; 1DZLDVZVND]XMHGRGDQLHOLF]E\ 2 do 4DQDVWÚSQLHSRPQRĝHQLH Z\QLNXSU]H]10. UŻYCIE OPERATORÓW ARYTMETYCZNYCH JAVASCRIPT c02/js/arithmetic-operator.js var subtotal = (13 + 1) * 5; :DUWRĂÊ]PLHQQHMVXEWRWDOZ\QRVL var shipping = 0.5 * (13 + 1); :DUWRĂÊ]PLHQQHMVKLSSLQJZ\QRVL var total = subtotal + shipping; :DUWRĂÊ]PLHQQHMWRWDOZ\QRVL :SU]\NïDG]LHSRND]DQRXĝ\FLHRSHUDWRUöZ PDWHPDW\F]Q\FKZUD]]OLF]EDPLZFHOX REOLF]HQLDZDUWRĂFLGZöFKNRV]WöZ :SLHUZV]\FKGZöFKZLHUV]DFKNRGX QDVWÚSXMHXWZRU]HQLHGZöFK]PLHQQ\FK 3LHUZV]DSU]HFKRZXMHZDUWRĂÊF]ÚĂFLRZÈ ]DPöZLHQLDQDWRPLDVWGUXJDNRV]W Z\V\ïNL]DPöZLHQLD2ELH]PLHQQHPDMÈ RGSRZLHGQLHQD]Z\subtotal i shipping. var elSub = document. getElementById(’subtotal’); elSub.textContent = subtotal; :ZLHUV]XWU]HFLPREOLF]DQDMHVWZDUWRĂÊ FDïNRZLWD]DPöZLHQLDNWöUDMHVWVXPÈ REOLF]RQ\FKZF]HĂQLHMGZöFKZDUWRĂFL var elShip = document. getElementById(’shipping’); elShip.textContent = shipping; :WHQVSRVöESRND]DQRMDNRSHUDWRU\PDWHPDW\F]QHXĝ\ZDMÈ]PLHQQ\FKSU]HGVWDZLDMÈF\FKOLF]E\ 2]QDF]DWRĝHOLF]E\QLH PXV]ÈE\ÊZ\UDěQLHSRGDZDQHZNRG]LH var elTotal = document. getElementById(’total’); elTotal.textContent = total; 3R]RVWDïHV]HĂÊZLHUV]\RGSRZLDGD ]DZ\ĂZLHWOHQLHREOLF]RQ\FKZDUWRĂFL na ekranie. WYNIK PODSTAWOWE INSTRUKCJE JAVASCRIPT 83 OPERATOR CIĄGU TEKSTOWEGO 0DP\W\ONRMHGHQRSHUDWRUFLÈJXWHNVWRZHJR]QDN+. 7HQRSHUDWRUMHVWSU]H]QDF]RQ\GRïÈF]HQLDFLÈJöZWHNVWRZ\FK ]QDMGXMÈF\FKVLÚSRREXVWURQDFKRSHUDWRUD ,VWQLHMHZLHOHV\WXDFMLZNWöU\FKPRĝHZ\VWÈSLÊSRWU]HED SRïÈF]HQLDFRQDMPQLHMGZöFK FLÈJöZWHNVWRZ\FKZMHGQÈ ZDUWRĂÊ7HQSURFHV]ïÈF]DQLD ZLHOXFLÈJöZWHNVWRZ\FK SURJUDPLĂFLQD]\ZDMÈNRQNDWHQDFMÈ. 1DSU]\NïDGLPLÚLQD]ZLVNRPRJÈ]QDMGRZDÊVLÚZGZöFK RGG]LHOQ\FK]PLHQQ\FK']LÚNLSRïÈF]HQLXLFKZDUWRĂFLPRĝQD Z\ĂZLHWOLÊLPLÚLQD]ZLVNRXĝ\WNRZQLND:SRQLĝV]\PSU]\NïDG]LH ]PLHQQDRQD]ZLHfullNameEÚG]LHSU]HFKRZ\ZDïDFLÈJWHNVWRZ\ ’Jan Kowalski’. YDUğUVW1DPH ĳ-DQĳ var lastName = ’Kowalski’; YDUIXOO1DPH ğUVW1DPHODVW1DPH ŁĄCZENIE LICZB I CIĄGÓW TEKSTOWYCH 3RXMÚFLXOLF]E\Z]QDNL F\WRZDQLDVWDMHVLÚRQDFLÈJLHP WHNVWRZ\P DQLHOLF]ERZ\P W\SHPGDQ\FK 1DFLÈJDFK WHNVWRZ\FKQLHPRĝQDSU]HSURZDG]DÊRSHUDFMLGRGDZDQLD -HĝHOLVSUöEXMHV]GRGDÊZDUWRĂÊ OLF]ERZÈGRFLÈJXWHNVWRZHJR WROLF]EDVWDQLHVLÚF]ÚĂFLÈ FLÈJXWHNVWRZHJR3U]\NïDGHP PRĝHE\ÊGRGDQLHQXPHUX EXG\QNXGRQD]Z\XOLF\ -HĝHOLVSUöEXMHV]SU]HSURZDG]LÊ inne operacje arytmetyczne QDFLÈJDFKWHNVWRZ\FKWR Z\QLNLHPQDMF]ÚĂFLHMEÚG]LH ZDUWRĂÊRQD]ZLHNaN. Oznacza RQDĝHZ\QLNQLHMHVWOLF]EÈ DQJQRWDQXPEHU var cost1 = ’7’; var cost2 = ’9’; var total = cost1 + cost2; var number = 12; var street = ’Nowa’; var add = street + number; var score = ’siedem’; YDUVFRUH ĳG]LHZLÚÊĳ var total = score * score2; :\QLNLHPZSRZ\ĝV]\P IUDJPHQFLHNRGXMHVWFLÈJ WHNVWRZ\’79’. :\QLNLHPZSRZ\ĝV]\PIUDJPHQFLHNRGXMHVWFLÈJWHNVWRZ\ ’Nowa 12’. :\QLNLHPZSRZ\ĝV]\P IUDJPHQFLHNRGXMHVWZDUWRĂÊ NaN. PODSTAWOWE INSTRUKCJE JAVASCRIPT UŻYCIE OPERATORÓW CIĄGU TEKSTOWEGO JAVASCRIPT c02/js/string-operator.js var greeting = ’Witaj, ’; var name = ’Janku’; var welcomeMessage = greeting + name + ’!’; var el = document. getElementById(’greeting’); el.textContent = welcomeMessage; HTML :SLHUZV]\PZLHUV]XNRGXWZRU]RQD jest zmienna greetingSU]HFKRZXMÈFD NRPXQLNDWZ\ĂZLHWODQ\Xĝ\WNRZQLNRZL 7XWDMMHVWWRVïRZRWitaj,. :ZLHUV]XGUXJLPWZRU]RQDMHVW]PLHQQD SU]HFKRZXMÈFDLPLÚXĝ\WNRZQLND 7D]PLHQQDQRVLQD]ZÚnameDMHMZDUWRĂFLÈZRPDZLDQ\PSU]\NïDG]LHMHVWJanku. c02/string-operator.html <h1>(OGHUĠRZHU</h1> <div id=”content”> <div id=”greeting” class=”message”>Witaj, <span id=”name”>przyjacielu</span>! </div> </div> <script src=”js/string-operator.js”></ script> WYNIK 3U]HGVWDZLRQ\SU]\NïDGSRZRGXMHZ\ĂZLHWOHQLHVSHUVRQDOL]RZDQHJRSRZLWDQLD na stronie. 6SHUVRQDOL]RZDQ\NRPXQLNDWSRZLWDQLD MHVWWZRU]RQ\SU]H]NRQNDWHQDFMÚ LQDF]HM]ïÈF]HQLH GZöFKZ\PLHQLRQ\FK ]PLHQQ\FKRUD]GRGDQLHQDNRñFX ]QDNXZ\NU]\NQLND&DïRĂÊMHVWSU]HFKRZ\ZDQDZQRZHM]PLHQQHMRQD]ZLH welcomeMessage. 3RZUöÊMHV]F]HQDFKZLOÚGR]PLHQQHM greetingXWZRU]RQHMZZLHUV]XSLHUZV]\PL]ZUöÊXZDJÚQDVSDFMÚSRVïRZLH Witaj,-HĝHOLSRPLQLHV]WÚVSDFMÚ ZDUWRĂFLÈ]PLHQQHMwelcomeMessage EÚG]LH”Witaj,Janku!”. PODSTAWOWE INSTRUKCJE JAVASCRIPT 85 86 PODSTAWOWE INSTRUKCJE JAVASCRIPT PRZYKŁAD PODSTAWOWE INSTRUKCJE JAVASCRIPT :W\PSU]\NïDG]LHZ\NRU]\VWDQRZLHOHWHFKQLN RPöZLRQ\FKZUR]G]LDOH .RGěUöGïRZ\SU]\NïDGX]RVWDï]DPLHV]F]RQ\QDGZöFKNROHMQ\FK VWURQDFK'RRSLVDQLDSRV]F]HJöOQ\FKVHNFMLNRGXXĝ\WRNRPHQWDU]\ MHGQRZLHUV]RZ\FK 1DSRF]ÈWNXWZRU]RQHVÈWU]\]PLHQQHSU]H]QDF]RQHGRSU]HFKRZ\ZDQLDLQIRUPDFMLZ\NRU]\VW\ZDQ\FKZNRPXQLNDFLHSRZLWDQLD 7H]PLHQQHVÈQDVWÚSQLHïÈF]RQHZFHOXSU]\JRWRZDQLDSHïQHMWUHĂFL NRPXQLNDWXZ\ĂZLHWODQHJRXĝ\WNRZQLNRZL .ROHMQDF]ÚĂÊSU]\NïDGXSRND]XMHVSRVöEZ\NRQ\ZDQLDSRGVWDZRZ\FKRSHUDFMLPDWHPDW\F]Q\FKQDOLF]EDFKDE\REOLF]\ÊNRV]W tabliczki. =PLHQQDRQD]ZLHsignSU]HFKRZXMHWHNVWNWöU\EÚG]LHXPLHV]czony na tabliczce. :ïDĂFLZRĂÊRQD]ZLHlengthMHVWXĝ\ZDQDZFHOXXVWDOHQLD OLF]E\]QDNöZ]QDMGXMÈF\FKVLÚZFLÈJXWHNVWRZ\P ZLÚFHMRWHM ZïDĂFLZRĂFL]QDMG]LHV]ZUR]G]LDOHZSRGUR]G]LDOHķ2ELHNWRZ\ PRGHOGRNXPHQWXĵ &]ÚĂFLRZ\NRV]WWDEOLF]NLMHVWREOLF]DQ\SU]H]SRPQRĝHQLHOLF]E\ ]QDNöZSU]H]NRV]WMHGQHJR]QDNX &DïNRZLW\NRV]W]DPöZLHQLDMHVWREOLF]DQ\SU]H]GRGDQLHNRV]WX Z\V\ïNL ]ï GRNRV]WXF]ÚĂFLRZHJR • • • • 1DNRñFXLQIRUPDFMHVÈZ\ĂZLHWODQHQDVWURQLH2GE\ZDVLÚWRSU]H] Z\EöUHOHPHQWöZDQDVWÚSQLH]DVWÈSLHQLHLFK]DZDUWRĂFL]Z\NRU]\VWDQLHPWHFKQLNLGRNïDGQLHRPöZLRQHMZUR]G]LDOH:WHFKQLFHWHM HOHPHQWQDVWURQLH+70/MHVWZ\ELHUDQ\QDSRGVWDZLHZDUWRĂFLMHJR atrybutu idDQDVWÚSQLHNRGXDNWXDOQLD]DZDUWRĂÊWHJRHOHPHQWX 3RSU]HDQDOL]RZDQLXSU]\NïDGXSRZLQLHQHĂPLHÊVROLGQÈZLHG]Ú GRW\F]ÈFÈSU]HFKRZ\ZDQLDGDQ\FKZ]PLHQQ\FKRUD]SU]HSURZDG]DQLDSRGVWDZRZ\FKRSHUDFMLQDGDQ\FK]QDMGXMÈF\FKVLÚZW\FK ]PLHQQ\FK PODSTAWOWE INSTRUKCJE JAVASCRIPT 87 PRZYKŁAD PODSTAWOWE INSTRUKCJE JAVASCRIPT c02/example.html HTML <!DOCTYPE html> <html> <head> <title>-DYD6FULSW DPSM4XHU\5R]G]LDï3RGVWDZRZHLQVWUXNFMH-DYD6FULSW SU]\NïDG</title> <link rel=”stylesheet” href=”css/c02.css” /> </head> <body> <h1>(OGHUĠRZHU</h1> <div id=”content”> <div id=”greeting” class=”message”>Witaj!</div> <table> <tr> <td>7UHĂÊWDEOLF]NL </td> <td id=”userSign”></td> </tr> <tr> <td>Liczba znaków: </td> <td id=”tiles”></td> </tr> <tr> <td>:DUWRĂÊF]ÚĂFLRZD </td> <td id=”subTotal”>$</td> </tr> <tr> <td>.RV]WZ\V\ïNL </td> <td id=”shipping”>$</td> </tr> <tr> <td>:DUWRĂÊFDïNRZLWD </td> <td id=”grandTotal”>$</td> </tr> </table> <a href=”#” class=”action”>2SïDÊ]DPöZLHQLH</a> </div> <script src=”js/example.js”></script> </body> </html> 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 ĳSURV]ÚVSUDZGě]DPöZLHQLHĳ 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 VXE7RWDOĳ]ïĳ 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWVKLSSLQJDQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elSubTotal = document.getElementById(’shipping’); HO6XE7RWDOWH[W&RQWHQW VKLSSLQJĳ]ïĳ 3REUDQLHHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXLGMHVWJUDQG7RWDODQDVWÚSQLH XDNWXDOQLHQLHMHJR]DZDUWRĂFL var elGrandTotal = document.getElementById(’grandTotal’); HO*UDQG7RWDOWH[W&RQWHQW JUDQG7RWDOĳ]ïĳ 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</body>]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 <!DOCTYPE html> <html> <head> <title>Prosta funkcja</title> <link rel=”stylesheet” href=”css/c03.css” /> </head> <body> <h1>TravelWorthy</h1> <div id=”message”>Witamy w naszej witrynie!</div> <script src=”js/basic-function.js”></script> </body> </html> JAVASCRIPT c03/js/basic-function.js YDUPVJ ĳ=DSLV]VLÚGRQDV]HJRQHZVOHWWHUDDRWU]\PDV]UDEDWXĳ function updateMessage() { YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳPHVVDJHĳ 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 ĳ:LWDMĳ } 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 ĳ:LWDMĳ } .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 ľ ľZSURFHGXUDFKREVïXJL]GDU]HñRUD]NRPSRQHQDE\SU]\SLVDÊRELHNWRZLZDUWRĂÊZïDĂFLZRĂFL WDFKQDVï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 UHWXUQĳ3ROH 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: >ĳWZLQĳĳGRXEOHĳĳVXLWHĳ@ 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'< ľ FUNKCJE, METODY I OBIEKTY UTWORZENIE OBIEKTU — NOTACJA LITERAŁU 1RWDFMDOLWHUDïXWRQDMïDWZLHMV]\LMHGQRF]HĂQLHQDMSRSXODUQLHMV]\ VSRVöEWZRU]HQLDRELHNWöZ ,VWQLHMHZLHOHVSRVREöZSR]ZDODMÈF\FK QDWZRU]HQLHRELHNWöZ 2ELHNWWRQDZLDVNODPURZ\LMHJR]DZDUWRĂÊ :SRQLĝV]\PSU]\NïDG]LHRELHNWMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLHhotelDZLÚF RGZRïXMHP\VLÚGRQLHJRMDNRGRRELHNWXhotel .OXF]RGZDUWRĂFLMHVWRGG]LHORQ\GZXNURSNLHP 1DWRPLDVWSRV]F]HJöOQHZïDĂFLZRĂFLLPHWRG\VÈ UR]G]LHORQHSU]HFLQNDPL QLHGRW\F]\WRRVWDWQLHJR HOHPHQWX KLUCZ WARTOŚĆ KLUCZ var hotel = { name: ’Quay’ rooms: booked: WŁAŚCIWOŚCI checkAvailability: function() { UHWXUQWKLVURRPVWKLVERRNHG } METODA ` :PHWRG]LHcheckAvailability()PDP\VïRZR NOXF]RZHthisNWöUHZVND]XMHĝHroomsLbooked WRZïDĂFLZRĂFLdanego DQJthis RELHNWX FUNKCJE, METODY I OBIEKTY *G\NRQğJXUXMHV]ZïDĂFLZRĂÊMHMZDUWRĂFLWUDNWXM WDNVDPRMDNZDUWRĂFLZSU]\SDGNX]PLHQQ\FK 2]QDF]DWRĝHFLÈJWHNVWRZ\WU]HEDXMÈÊZ]QDNL F\WRZDQLDDWDEOLFÚZQDZLDVNZDGUDWRZ\ UZYSKANIE DOSTĘPU DO OBIEKTU I NOTACJA Z UŻYCIEM KROPKI 'RVWÚSGRZïDĂFLZRĂFLLPHWRGRELHNWXRGE\ZDVLÚ]DSRPRFÈQRWDFML ]Xĝ\FLHPNURSNL'RZïDĂFLZRĂFLPRĝQDX]\VNDÊGRVWÚSWDNĝH]DSRPRFÈ QDZLDVXNZDGUDWRZHJR $E\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLOXEPHWRG\ RELHNWXQDOHĝ\SRGDÊQD]ZÚRELHNWXNURSNÚ DQDVWÚSQLHQD]ZÚLQWHUHVXMÈFHM&LÚZïDĂFLZRĂFL OXEPHWRG\7RQRVLQD]ZÚQRWDFML]Xĝ\FLHP NURSNL OBIEKT .URSNDMHVWRNUHĂODQDPLDQHPRSHUDWRUDHOHPHQWXVNïDGRZHJR3RGDQDSRSUDZHMVWURQLH RSHUDWRUDZïDĂFLZRĂÊOXEPHWRGDMHVWHOHPHQWHP VNïDGRZ\PQDWRPLDVWRELHNW]QDMGXMHVLÚSR OHZHMVWURQLHRSHUDWRUD3RQLĝHMSU]HGVWDZLRQR GZLH]PLHQQHXWZRU]RQHZFHOXSU]HFKRZ\ZDQLD QD]Z\KRWHOXRUD]OLF]E\ZROQ\FKSRNRL NAZWA WŁAŚCIWOŚCI LUB METODY var hotelName = hotel.name var roomsFree = hotel.checkAvailability() OPERATOR ELEMENTU SKŁADOWEGO 'RVWÚSGRZïDĂFLZRĂFLRELHNWX DOHQLHMHJR PHWRG PRĝQDX]\VNDÊWDNĝH]DSRPRFÈVNïDGQL QDZLDVXNZDGUDWRZHJR 7\PUD]HPSRQD]ZLHRELHNWX]QDMGXMHVLÚQDZLDV NZDGUDWRZ\ZNWöU\PXPLHV]F]DV]QD]ZÚ ZïDĂFLZRĂFLGRNWöUHMFKFHV]X]\VNDÊGRVWÚS var hotelName = hotel[’name’@ 7HJRURG]DMXQRWDFMDMHVWQDMF]ÚĂFLHMXĝ\ZDQDJG\ ľQD]ZDZïDĂFLZRĂFLMHVWOLF]EÈ SRGZ]JOÚGHPWHFKQLF]Q\PWRMHVWGR]ZRORQHDOHRJöOQLHU]HF]ELRUÈF QDOHĝ\XQLNDÊWDNLHJRUR]ZLÈ]DQLD ľ]PLHQQDMHVWXĝ\ZDQDZPLHMVFXQD]Z\ZïDĂFLZRĂFL SU]\NïDG]DVWRVRZDQLDWHMWHFKQLNL]REDF]\V] ZUR]G]LDOH FUNKCJE, METODY I OBIEKTY UTWORZENIE OBIEKTU ZA POMOCĄ NOTACJI LITERAŁU 1DSRF]ÈWNXSU]\NïDGX QDVWÚSXMHXWZRU]HQLHRELHNWX]D SRPRFÈQRWDFMLOLWHUDïX 2ELHNWQRVLQD]ZÚhotel LSU]HGVWDZLDKRWHOQuay ]SRNRMDPL]NWöU\FK ]RVWDïR]DUH]HUZRZDQ\FK 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() $E\X]\VNDÊGRVWÚSGR ZïDĂFLZRĂFLRELHNWXSR MHJRQD]ZLHSRGDQRNURSNÚ DQDVWÚSQLHQD]ZÚLQWHUHVXMÈFHM QDVZïDĂFLZRĂFL 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\ GRIXQNFML FUNKCJE, METODY I OBIEKTY c3/js/object-literal.js JAVASCRIPT var hotel = { QDPHĳ4XD\ĳ URRPV ERRNHG checkAvailability: function() { UHWXUQWKLVURRPVWKLVERRNHG } ` YDUHO1DPH GRFXPHQWJHW(OHPHQW%\,G ĳKRWHO1DPHĳ HO1DPHWH[W&RQWHQW KRWHOQDPH YDUHO5RRPV GRFXPHQWJHW(OHPHQW%\,G ĳURRPVĳ HO5RRPVWH[W&RQWHQW KRWHOFKHFN$YDLODELOLW\ WYNIK UTWORZENIE DALSZYCH OBIEKTÓW ZA POMOCĄ NOTACJI LITERAŁU JAVASCRIPT FMVREMHFWOLWHUDOMV var hotel = { QDPHĳ3DUNĳ URRPV ERRNHG checkAvailability: function() { UHWXUQWKLVURRPVWKLVERRNHG } ` var elName = document. JHW(OHPHQW%\,G ĳKRWHO1DPHĳ HO1DPHWH[W&RQWHQW KRWHOQDPH var elRooms = document. JHW(OHPHQW%\,G ĳURRPVĳ elRooms.textContent = hotel. FKHFN$YDLODELOLW\ WYNIK 1DWHMVWURQLHWZRU]\P\NROHMQ\RELHNW -HJRQD]ZDWRUöZQLHĝhotelDOHW\PUD]HP PRGHOSU]HGVWDZLDKRWHO]XSHïQLHLQQ\ :W\PPRPHQFLHZ\REUDěVRELHLQQÈVWURQÚ ZWHMVDPHMZLWU\QLHLQWHUQHWRZHMSRĂZLÚFRQHMSRGUöĝRP +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 3R]RVWDïDF]ÚĂÊVWURQ\G]LDïDZGRNïDGQLH WDNLVDPVSRVöE1D]ZDKRWHOXMHVWZ\ĂZLHWODQD]Xĝ\FLHPWHJRVDPHJRNRGX0HWRGD checkAvailability()UöZQLHĝQLHXOHJD ]PLDQLHLMHVWZ\ZRï\ZDQDZGRNïDGQLHWHQ VDPVSRVöE -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 -HĝHOLPDV]GZDRELHNW\QDVWURQLHWZRU]\V] MH]DSRPRFÈWHMVDPHMQRWDFMLDOHSU]HFKRZXMHV]Z]PLHQQ\FKRUöĝQ\FKQD]ZDFK FUNKCJE, METODY I OBIEKTY UTWORZENIE OBIEKTU ZA POMOCĄ NOTACJI Z UŻYCIEM KONSTRUKTORA 6ïRZRNOXF]RZHnewLNRQVWUXNWRURELHNWXSRZRGXMÈXWZRU]HQLHSXVWHJR RELHNWX1DVWÚSQLHPRĝQDGRQLHJRGRGDÊZïDĂFLZRĂFLLPHWRG\ :SLHUZV]HMNROHMQRĂFLQDOHĝ\XWZRU]\ÊQRZ\ RELHNW]DSRPRFÈSRïÈF]HQLDVïRZDNOXF]RZHJR newLIXQNFMLNRQVWUXNWRUDObject():\PLHQLRQD IXQNFMDSR]RVWDMHF]ÚĂFLÈMÚ]\ND-DYD6FULSWLMHVW Xĝ\ZDQDZFHOXWZRU]HQLDRELHNWöZ var hotel QHZ2EMHFW 0DMÈFXWZRU]RQ\SXVW\RELHNWPRĝQDSU]\VWÈSLÊ GRGRGDZDQLDZïDĂFLZRĂFLLPHWRG]DSRPRFÈ QRWDFML]Xĝ\FLHPNURSNL.DĝGHSROHFHQLH GRGDMÈFHZïDĂFLZRĂÊOXEPHWRGÚSRZLQQRNRñF]\Ê VLÚĂUHGQLNLHP OBIEKT KLUCZ WARTOŚĆ hotel.name = ’Quay’ hotel.rooms = hotel.booked = WŁAŚCIWOŚCI hotel.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG } METODA 3U]HGVWDZLRQÈVNïDGQLÚPRĝQDZ\NRU]\VWDÊ ZFHOXGRGDQLDZïDĂFLZRĂFLLPHWRGGRGRZROQHJR XWZRU]RQHJRRELHNWX QLH]DOHĝQLHRGWHJRMDND QRWDFMD]RVWDïDXĝ\WDGRMHJRXWZRU]HQLD 8WZRU]HQLHSXVWHJRRELHNWX]DSRPRFÈQRWDFML OLWHUDïXSU]HGVWDZLDVLÚQDVWÚSXMÈFR var hotel = {} 3XVW\QDZLDVNODPURZ\R]QDF]DXWZRU]HQLH SXVWHJRRELHNWX FUNKCJE, METODY I OBIEKTY UAKTUALNIENIE OBIEKTU :FHOXXDNWXDOQLHQLDZDUWRĂFLZïDĂFLZRĂFLQDOHĝ\Z\NRU]\VWDÊQRWDFMÚ ]Xĝ\FLHPNURSNLOXEQDZLDVXNZDGUDWRZHJR7DNLHUR]ZLÈ]DQLHG]LDïD ZRELHNWDFKXWZRU]RQ\FK]Z\NRU]\VWDQLHPQRWDFMLOLWHUDïXDWDNĝH NRQVWUXNWRUD1DWRPLDVWZFHOXXVXQLÚFLDZïDĂFLZRĂFLWU]HEDXĝ\ÊVïRZD NOXF]RZHJRdelete :FHOXXDNWXDOQLHQLDZïDĂFLZRĂFLXĝ\MWHFKQLNL NWöUÈSRND]DQRQDVWURQLHSROHZHMWHFKQLNDWD SR]ZDODQDGRGDQLHZïDĂFLZRĂFLGRRELHNWX7\P UD]HPZïDĂFLZRĂFLSU]\SLV]QRZÈZDUWRĂÊ OBIEKT -HĝHOLRELHNWQLHSRVLDGDZïDĂFLZRĂFLNWöUHM ZDUWRĂÊSUöEXMHV]XDNWXDOQLÊWRGRRELHNWX ]RVWDQLHGRGDQDQRZDZïDĂFLZRĂÊ NAZWA WŁAŚCIWOŚCI hotel . name = ’Park’ OPERATOR ELEMENTU SKŁADOWEGO ,VWQLHMHUöZQLHĝPRĝOLZRĂÊXDNWXDOQLHQLDZïDĂFLZRĂFLRELHNWX DOHQLHPHWRG ]DSRPRFÈVNïDGQL ]Xĝ\FLHPQDZLDVXNZDGUDWRZHJR3RQD]ZLH RELHNWXSRGDMHV]QDZLDVNZDGUDWRZ\ZNWöU\P WU]HEDXPLHĂFLÊQD]ZÚZïDĂFLZRĂFLNWöUÈFKFHV] ]PRG\ğNRZDÊ WARTOŚĆ WŁAŚCIWOŚCI 1RZDZDUWRĂÊGODZïDĂFLZRĂFLMHVWSRGDZDQD SRRSHUDWRU]HSU]\SLVDQLD:DUWRSU]\SRPQLHÊ SRQRZQLHĝHMHĂOLZïDĂFLZRĂÊNWöUHMZDUWRĂÊ SUöEXMHV]XDNWXDOQLÊQLHLVWQLHMHWR]RVWDQLH GRGDQDGRRELHNWX hotel[’name’] = ’Park’ 'RXVXQLÚFLDZïDĂFLZRĂFLVïXĝ\VïRZRNOXF]RZH deleteSRNWöU\PSRGDMHVLÚQD]ZÚRELHNWX NURSNÚLQD]ZÚZïDĂFLZRĂFL -HĝHOLFKFHV]W\ONRXVXQÈÊZDUWRĂÊZïDĂFLZRĂFL SU]\SLV]MHMZDUWRĂÊZSRVWDFLSXVWHJRFLÈJX WHNVWRZHJR delete hotel.name hotel.name ĳĳ FUNKCJE, METODY I OBIEKTY UTWORZENIE WIELU OBIEKTÓW — NOTACJA Z UŻYCIEM KONSTRUKTORA &]DVDPL]DFKRG]LSRWU]HEDDE\NLONDRELHNWöZSU]HGVWDZLDïRSRGREQH U]HF]\.RQVWUXNWRURELHNWXPRĝHXĝ\ZDÊIXQNFMLZFKDUDNWHU]HV]DEORQX GODWZRU]RQ\FKRELHNWöZ:SLHUZV]HMNROHMQRĂFLQDOHĝ\SU]\JRWRZDÊ V]DEORQZUD]]ZïDĂFLZRĂFLDPLLPHWRGDPLRELHNWX )XQNFMDRQD]ZLHHotel()EÚG]LHXĝ\WDMDNR V]DEORQGODWZRU]HQLDQRZ\FKRELHNWöZSU]HGVWDZLDMÈF\FKKRWHOH3RGREQLHMDNZV]\VWNLHIXQNFMH WDNĝHLWD]DZLHUDSROHFHQLD:RPDZLDQ\P SU]\NïDG]LHSRZRGXMÈRQHGRGDQLHZïDĂFLZRĂFL LPHWRGGRRELHNWX 2PDZLDQDIXQNFMDPDWU]\SDUDPHWU\]NWöU\FKNDĝG\SRZRGXMHSU]\SLVDQLHZDUWRĂFLGR ZïDĂFLZRĂFLRELHNWX0HWRG\EÚGÈWDNLHVDPH GODNDĝGHJRRELHNWXWZRU]RQHJR]DSRPRFÈWHM IXQNFML KLUCZ WARTOŚĆ function Hotel(nameroomsbooked) { this.name = name this.rooms = rooms this.booked = booked WŁAŚCIWOŚCI this.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG } METODA } 6ïRZRNOXF]RZHthisMHVWXĝ\ZDQH]DPLDVWQD]Z\ RELHNWXLZVND]XMHĝHZïDĂFLZRĂÊOXEPHWRGD QDOHĝÈGRRELHNWXXWZRU]RQHJRSU]H]WÚIXQNFMÚ .DĝGHSROHFHQLHRGSRZLHG]LDOQH]DXWZRU]HQLH QRZHMZïDĂFLZRĂFLOXEPHWRG\ZW\PRELHNFLH NRñF]\VLÚĂUHGQLNLHPDQLHSU]HFLQNLHPXĝ\ZDQ\PZVNïDGQLOLWHUDïX FUNKCJE, METODY I OBIEKTY 1D]ZDIXQNFMLNRQVWUXNWRUD]Z\NOHUR]SRF]\QD VLÚGXĝÈOLWHUÈ SU]HFLZLHñVWZRGRLQQ\FKIXQNFML NWöU\FKQD]Z\]Z\NOHUR]SRF]\QDMÈVLÚRGPDïHM OLWHU\ 'XĝDOLWHUDPDSRPöFSURJUDPLVWRPSDPLÚWDÊ RNRQLHF]QRĂFLXĝ\FLDVïRZDNOXF]RZHJRnew SRGF]DVWZRU]HQLDRELHNWX]DSRPRFÈWHMIXQNFML SDWU]NROHMQDVWURQD =DSRPRFÈIXQNFMLNRQVWUXNWRUDWZRU]\V]HJ]HPSODU]HRELHNWX 6ïRZRNOXF]RZHnewSRNWöU\P]QDMGXMHVLÚZ\ZRïDQLHIXQNFML R]QDF]DXWZRU]HQLHQRZHJRRELHNWX:ïDĂFLZRĂFLSRV]F]HJöOQ\FK RELHNWöZVÈSRGDZDQHZSRVWDFLDUJXPHQWöZIXQNFML 3RQLĝHM]QDMGXMÈVLÚGZDRELHNW\SU]HGVWDZLDMÈFH GZDKRWHOHFRR]QDF]DĝHRELHNW\PXV]È PLHÊUöĝQHQD]Z\.LHG\]DSRPRFÈVïRZD NOXF]RZHJRnewZ\ZRïXMHP\IXQNFMÚNRQVWUXNWRUD ]GHğQLRZDQÈSROHZHMVWURQLH GRFKRG]L GRXWZRU]HQLDRELHNWX OBIEKT :WUDNFLHSRV]F]HJöOQ\FKZ\ZRïDñDUJXPHQW\ VÈUöĝQHSRQLHZDĝWRZïDĂFLZRĂFLWZRU]RQ\FK RELHNWöZ2EDRELHNW\DXWRPDW\F]QLHRWU]\PXMÈ WÚVDPÈPHWRGÚ]GHğQLRZDQÈZIXQNFML NRQVWUXNWRUD FUNKCJA KONSTRUKTORA var quayHotel = new Hotel(’Quay’ var parkHotel = new Hotel(’Park’77 OPERATOR PRZYPISANIA SŁOWO KLUCZOWE NEW WARTOŚCI UŻYTE WE WŁAŚCIWOŚCIACH DANEGO OBIEKTU 3LHUZV]\RELHNWQRVLQD]ZÚquayHotel 1D]ZDKRWHOXWRQuayKRWHO]DZLHUDSRNRL ]NWöU\FK]RVWDïR]DUH]HUZRZDQ\FK 'UXJLRELHNWQRVLQD]ZÚparkHotel 1D]ZDKRWHOXWRParkKRWHO]DZLHUDSRNRL ]NWöU\FK]RVWDïR]DUH]HUZRZDQ\FK 1DZHWNLHG\ZLHOHRELHNWöZMHVWWZRU]RQ\FK]D SRPRFÈWHMVDPHMIXQNFMLNRQVWUXNWRUDPHWRG\ SR]RVWDMÈWHVDPHSRQLHZDĝSR]ZDODMÈQD XDNWXDOQLHQLHGDQ\FKSU]HFKRZ\ZDQ\FKZH ZïDĂFLZRĂFLDFKOXEQDSU]HSURZDG]HQLHQDQLFK REOLF]Hñ 3U]HGVWDZLRQÈWHFKQLNÚPRĝQDZ\NRU]\VWDÊMHĂOL VNU\SW]DZLHUDEDUG]RVNRPSOLNRZDQHRELHNW\ NWöUHPXV]ÈE\ÊGRVWÚSQHDOHQLHNRQLHF]QLHEÚGÈ Xĝ\ZDQH2ELHNWMHVW]GHğQLRZDQ\ZIXQNFML DOHEÚG]LHutworzonyW\ONRZWHG\JG\]DMG]LH SRWU]HED FUNKCJE, METODY I OBIEKTY UTWORZENIE OBIEKTU ZA POMOCĄ SKŁADNI KONSTRUKTORA :NRG]LHSRSUDZHMVWURQLH QDVWÚSXMHXWZRU]HQLHSXVWHJR RELHNWXRQD]ZLHhotel]D SRPRFÈIXQNFMLNRQVWUXNWRUD 8WZRU]RQHPXRELHNWRZL]RVWDMÈ SU]\SLVDQHWU]\ZïDĂFLZRĂFL LPHWRGD -HĝHOLRELHNWMXĝSRVLDGD NWöUÈNROZLHN]W\FKZïDĂFLZRĂFLWRLFKZDUWRĂFL]RVWDQÈ QDGSLVDQH $E\X]\VNDÊGRVWÚSGR ZïDĂFLZRĂFLWHJRRELHNWX PRĝQDZ\NRU]\VWDÊVNïDGQLÚ ]Xĝ\FLHPRELHNWXSRGREQLHMDN ZSU]\SDGNXLQQHJRGRZROQHJR RELHNWX $E\QDSU]\NïDGSREUDÊQD]ZÚ KRWHOXPRĝQDXĝ\ÊZ\ZRïDQLD hotel.name 3RGREQLHZFHOXXĝ\FLDPHWRG\ QDOHĝ\SRGDÊQD]ZÚRELHNWX DQDVWÚSQLHQD]ZÚPHWRG\ hotel.checkAvailability() FUNKCJE, METODY I OBIEKTY c3/js/object-constructor.js JAVASCRIPT YDUKRWHO QHZ2EMHFW KRWHOQDPH ĳ3DUNĳ KRWHOURRPV KRWHOERRNHG hotel.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG ` YDUHO1DPH GRFXPHQWJHW(OHPHQW%\,G ĳKRWHO1DPHĳ HO1DPHWH[W&RQWHQW KRWHOQDPH YDUHO5RRPV GRFXPHQWJHW(OHPHQW%\,G ĳURRPVĳ HO5RRPVWH[W&RQWHQW KRWHOFKHFN$YDLODELOLW\ WYNIK UTWORZENIE OBIEKTU I UZYSKANIE DOSTĘPU DO NIEGO Z WYKORZYSTANIEM SKŁADNI KONSTRUKTORA JAVASCRIPT c03/js/multiple-objects.js IXQFWLRQ+RWHO QDPHURRPVERRNHG ^ WKLVQDPH QDPH WKLVURRPV URRPV WKLVERRNHG ERRNHG this.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG ` } )XQNFMDNRQVWUXNWRUDGHğQLXMHV]DEORQ GODKRWHOL3öěQLHMQDVWÚSXMHXWZRU]HQLHGZöFKUöĝQ\FKHJ]HPSODU]\ RELHNWXW\SXhotel3LHUZV]\SU]HGVWDZLDKRWHO4XD\QDWRPLDVWGUXJL GRW\F]\KRWHOX3DUN YDUTXD\+RWHO QHZ+RWHO ĳ4XD\ĳ YDUSDUN+RWHO QHZ+RWHO ĳ3DUNĳ var details1 = ’pokoje w hotelu ’ + TXD\+RWHOQDPHĳĳ GHWDLOV TXD\+RWHOFKHFN$YDLODELOLW\ var elHotel1 = document. JHW(OHPHQW%\,G ĳKRWHOĳ HO+RWHOWH[W&RQWHQW GHWDLOV YDUGHWDLOV ĳSRNRMHZKRWHOXĳ SDUN+RWHOQDPHĳĳ GHWDLOV SDUN+RWHOFKHFN$YDLODELOLW\ YDUHO+RWHO GRFXPHQW JHW(OHPHQW%\,G ĳKRWHOĳ HO+RWHOWH[W&RQWHQW GHWDLOV WYNIK $E\MHV]F]HZ\UDěQLHMSRND]DÊLGHÚ XWZRU]HQLDZLHOXRELHNWöZQDWHMVDPHMVWURQLHSU]HGVWDZLRQRWXSU]\NïDG Z\ĂZLHWODMÈF\LQIRUPDFMHRSRNRMDFK GRVWÚSQ\FKZGZöFKKRWHODFK 0DMÈFXWZRU]RQHHJ]HPSODU]H RELHNWöZPRĝQDX]\VNDÊGRVWÚSGR LFKZïDĂFLZRĂFLLPHWRG]DSRPRFÈWHM VDPHMQRWDFML]Xĝ\FLHPNURSNLNWöUD MHVWVWRVRZDQDZLQQ\FKRELHNWDFK :RPDZLDQ\PSU]\NïDG]LHGDQH SRFKRG]ÈFH]REXRELHNWöZ]RVWDï\ XPLHV]F]RQHQDVWURQLH .RG+70/ Xĝ\ZDQ\ZW\PSU]\NïDG]LHXOHJïQLHFR ]PLDQLHDE\Z\ĂZLHWODÊLQIRUPDFMH RGUXJLPKRWHOX :SU]\SDGNXNDĝGHJRKRWHOXQDVWÚSXMHXWZRU]HQLH]PLHQQHMSU]HFKRZXMÈFHMFLÈJWHNVWRZ\Pokoje w hotelu, VSDFMÚLQD]ZÚKRWHOX :NROHMQ\PZLHUV]XGR]PLHQQHM ZVWDZLDQDMHVWOLF]EDZROQ\FKSRNRL 2SHUDWRU+=]RVWDïXĝ\W\ZFHOX GRGDQLD]DZDUWRĂFLGRLVWQLHMÈFHM ]PLHQQHM FUNKCJE, METODY I OBIEKTY DODAWANIE I USUWANIE WŁAŚCIWOŚCI 3RXWZRU]HQLXRELHNWX ]Z\NRU]\VWDQLHP QRWDFMLOLWHUDïXOXENRQVWUXNWRUD PRĝQD SU]\VWÈSLÊGRGRGDZDQLDGRQLHJRQRZ\FK ZïDĂFLZRĂFL 2GE\ZDVLÚWR]]DVWRVRZDQLHPVNïDGQL ]NURSNÈMDNSRND]DQRZSRGUR]G]LDOH ķ8]\VNDQLHGRVWÚSXGRRELHNWXLQRWDFMD ]Xĝ\FLHPNURSNLĵSRGF]DVGRGDZDQLD ZïDĂFLZRĂFLGRRELHNWX :RPDZLDQ\PSU]\NïDG]LHPRĝHV] ]REDF]\ÊĝHHJ]HPSODU]RELHNWXhotel ]RVWDïXWZRU]RQ\]DSRPRFÈQRWDFML OLWHUDïXRELHNWX 2ELHNWhotelRWU]\PXMHGZLHGRGDWNRZH ZïDĂFLZRĂFLLQIRUPXMÈFHRZ\SRVDĝHQLXKRWHOXZVDOÚGRÊZLF]HñRUD] EDVHQ:VSRPQLDQ\PZïDĂFLZRĂFLRP VÈSU]\SLVDQHZDUWRĂFLERRORZVNLH (trueOXEfalse 3RGRGDQLXNROHMQ\FKZïDĂFLZRĂFLGR RELHNWXPRĝQDX]\VNDÊGRQLFKGRVWÚS ZGRNïDGQLHWDNLVDPVSRVöEMDNGR ZV]HONLFKLQQ\FKRELHNWöZLZïDĂFLZRĂFL :RPDZLDQ\PSU]\NïDG]LHLFKZDUWRĂFL VÈXĝ\ZDQHGRXDNWXDOQLHQLDDWU\EXWX classZRGSRZLHGQLFKHOHPHQWDFKZFHOX Z\ĂZLHWOHQLDķSWDV]NDĵOXENU]\ĝ\ND c3/js/adding-and-removing-properties.js JAVASCRIPT var hotel = { QDPHĳ3DUNĳ URRPV ERRNHG ` KRWHOJ\P WUXH KRWHOSRRO IDOVH GHOHWHKRWHOERRNHG var elName = document. JHW(OHPHQW%\,G ĳKRWHO1DPHĳ HO1DPHWH[W&RQWHQW KRWHOQDPH YDUHO3RRO GRFXPHQWJHW(OHPHQW%\,G ĳSRROĳ HO3RROFODVV1DPH ĳ%DVHQĳKRWHOSRRO YDUHO*\P GRFXPHQWJHW(OHPHQW%\,G ĳJ\Pĳ HO*\PFODVV1DPH ĳ6LïRZQLDĳKRWHOJ\P WYNIK $E\XVXQÈÊZïDĂFLZRĂÊQDOHĝ\Xĝ\Ê VïRZDNOXF]RZHJRdeleteDQDVWÚSQLH]D SRPRFÈVNïDGQL]Xĝ\FLHPNURSNLZVND]DÊ ZïDĂFLZRĂÊOXEPHWRGÚSU]H]QDF]RQÈGR XVXQLÚFLD]RELHNWX :RPDZLDQ\PSU]\NïDG]LH]RELHNWX XVXQLÚWRZïDĂFLZRĂÊbooked FUNKCJE, METODY I OBIEKTY -HĝHOLRELHNWMHVWWZRU]RQ\]DSRPRFÈIXQNFMLNRQVWUXNWRUD WDVNïDGQLDSRZRGXMHGRGDQLHOXEXVXQLÚFLHZïDĂFLZRĂFL ]W\ONRMHGQHJRHJ]HPSODU]DRELHNWöZ DQLHZV]\VWNLFK RELHNWöZXWZRU]RQ\FK]DSRPRFÈGDQHMIXQNFML PRZYPOMNIENIE SPOSOBÓW TWORZENIA OBIEKTÓW UTWORZENIE OBIEKTU, A NASTĘPNIE DODANIE WŁAŚCIWOŚCI I METOD :REXSU]HGVWDZLRQ\FKSRQLĝHMSU]\NïDGDFK RELHNWMHVWWZRU]RQ\ZSLHUZV]\PZLHUV]XNRGX 1DVWÚSQLHGRGDZDQHVÈZïDĂFLZRĂFLLPHWRG\ *G\RELHNW]RVWDQLHXWZRU]RQ\VNïDGQLDSR]ZDODMÈFDQDGRGDZDQLHOXEXVXZDQLHZïDĂFLZRĂFL LPHWRG]GDQHJRRELHNWXSR]RVWDMHWDNDVDPD NOTACJA LITERAŁU NOTACJA KONSTRUKTORA OBIEKTU var hotel = {} YDUKRWHO QHZ2EMHFW KRWHOQDPH ĳ4XD\ĳ KRWHOURRPV KRWHOERRNHG hotel.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG ` KRWHOQDPH ĳ4XD\ĳ KRWHOURRPV KRWHOERRNHG hotel.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG ` UTWORZENIE OBIEKTU WRAZ Z WŁAŚCIWOŚCIAMI I METODAMI NOTACJA LITERAŁU NOTACJA KONSTRUKTORA OBIEKTU 3U]HFLQHNUR]G]LHODSRV]F]HJöOQHSDU\ NOXF]ZDUWRĂÊ1DWRPLDVWPLÚG]\NDĝG\P NOXF]HPLMHJRZDUWRĂFLÈ]QDMGXMHVLÚGZXNURSHN )XQNFMDPRĝHE\ÊZ\NRU]\VWDQDGRXWZRU]HQLD ZLHOXRELHNWöZ6ïRZRNOXF]RZHthis]RVWDïR Xĝ\WH]DPLDVWQD]Z\RELHNWX var hotel = { QDPHĳ4XD\ĳ URRPV ERRNHG checkAvailability: function() { UHWXUQWKLVURRPVWKLVERRNHG } ` IXQFWLRQ+RWHO QDPHURRPVERRNHG ^ WKLVQDPH QDPH WKLVURRPV URRPV WKLVERRNHG ERRNHG this.checkAvailability = function() { UHWXUQWKLVURRPVWKLVERRNHG ` } YDUTXD\+RWHO QHZ+RWHO ĳ4XD\ĳ YDUSDUN+RWHO QHZ+RWHO ĳ3DUNĳ FUNKCJE, METODY I OBIEKTY SŁOWO KLUCZOWE THIS 6ïRZRNOXF]RZHthisMHVWSRZV]HFKQLHXĝ\ZDQHZIXQNFMDFK LRELHNWDFK0LHMVFH]DGHNODURZDQLDIXQNFMLPDZSï\ZQD]QDF]HQLH this7RVïRZRNOXF]RZH]DZV]HRGZRïXMHVLÚGRMHGQHJRRELHNWX QDMF]ÚĂFLHMWHJRZNWöU\PRSHUXMHIXQNFMD FUNKCJA W ZAKRESIE GLOBALNYM ZMIENNE GLOBALNE .LHG\IXQNFMDMHVWXWZRU]RQDQDQDMZ\ĝV]\P SR]LRPLHVNU\SWX WR]QDF]\QLHZHZQÈWU] LQQHJRRELHNWXOXEIXQNFML WR]QDMGXMHVLÚ Z]DNUHVLHJOREDOQ\PLQDF]HM]ZDQ\P NRQWHNVWHPJOREDOQ\P :V]\VWNLH]PLHQQHJOREDOQHUöZQLHĝVWDMÈVLÚ ZïDĂFLZRĂFLDPLRELHNWXwindow.LHG\IXQNFMD G]LDïDZNRQWHNĂFLHJOREDOQ\P]DSRPRFÈRELHNWX windowPRĝQDX]\VNDÊGRVWÚSGR]PLHQQ\FK JOREDOQ\FKDWDNĝHSR]RVWDï\FKZïDĂFLZRĂFL Z\PLHQLRQHJRRELHNWX 'RP\ĂOQLHRELHNWHPZNRQWHNĂFLHJOREDOQ\P MHVWwindowZLÚFXĝ\FLHVïRZDNOXF]RZHJRthis ZHZQÈWU]IXQNFMLZNRQWHNĂFLHJOREDOQ\PRGQRVL VLÚGRRELHNWXwindow 3RQLĝHMSU]HGVWDZLRQRIXQNFMÚshowWidth() G]LDïDMÈFÈZ]DNUHVLHJOREDOQ\P3ROHFHQLH this.widthRGZRïXMHVLÚGR]PLHQQHMwidth :SRQLĝV]\PIUDJPHQFLHNRGXVïRZRNOXF]RZH this]RVWDïRXĝ\WHZFHOX]ZUöFHQLDZïDĂFLZRĂFL RELHNWRZLwindow SU]HGVWDZLRQHWXWDMZïDĂFLZRĂFL]REDF]\V]]QöZZSRGUR]G]LDOHķ2ELHNWRZ\PRGHOSU]HJOÈGDUNLLQWHUQHWRZHMĽRELHNW ZLQGRZĵ var width = 600 YDUVKDSH ^ZLGWK` function windowSize() { YDUZLGWK WKLVLQQHU:LGWK YDUKHLJKW WKLVLQQHU+HLJKW UHWXUQ>KHLJKWZLGWK@ } VKRZ:LGWK :WOHVïRZRNOXF]RZHthisMHVWRGQLHVLHQLHP GRRELHNWXZNWöU\P]RVWDïDXWZRU]RQDGDQD IXQNFMD FUNKCJE, METODY I OBIEKTY var showWidth = function() { document.write(this.width ` 3U]HGVWDZLRQDSRZ\ĝHMIXQNFMDZ\ĂZLHWOLQD VWURQLHZDUWRĂÊ600 Xĝ\ZDMÈFGRWHJRPHWRG\ write()RELHNWXdocument -DNPRĝHV]]REDF]\Ê]QDF]HQLHthis]PLHQLDVLÚ Z]DOHĝQRĂFLRGV\WXDFML1LHSU]HMPXMVLÚMHĂOLQLH ZV]\VWNRSU]HGVWDZLRQHQDW\FKGZöFKVWURQDFK MHVWRGUD]XMDVQH.LHG\]DF]QLHV]WZRU]\Ê IXQNFMHLRELHNW\]DSUH]HQWRZDQHWXWDMNRQFHSFMH VWDQÈVLÚ]UR]XPLDïH-HĝHOLthisQLH]ZUDFD RF]HNLZDQHMZDUWRĂFLLQIRUPDFMHSU]HGVWDZLRQH WXWDMPRJÈRND]DÊVLÚSRPRFQHZ]QDOH]LHQLX ZïDĂFLZHJRUR]ZLÈ]DQLD :DUWRMHV]F]HZVSRPQLHÊRMHGQ\PVFHQDULXV]X Ľ]DJQLHĝGĝHQLXIXQNFMLZHZQÈWU]LQQHMIXQNFML 7DNDV\WXDFMD]GDU]DVLÚZ]QDF]QLHEDUG]LHM VNRPSOLNRZDQ\FKVNU\SWDFKDOHZöZF]DV ZDUWRĂÊthisPRĝHVLÚ]PLHQLDÊ Z]DOHĝQRĂFLRG Xĝ\ZDQHMSU]HJOÈGDUNLLQWHUQHWRZHM 3RWHQFMDOQ\P UR]ZLÈ]DQLHPMHVWSU]HFKRZ\ZDQLHZDUWRĂFL thisZ]PLHQQHMXWZRU]RQHMZSLHUZV]HMIXQNFML DQDVWÚSQLHXĝ\FLHZIXQNFMLSRWRPQHMQD]Z\WHM ]PLHQQHM]DPLDVWthis METODA OBIEKTU FUNKCJA WYRAŻENIA JAKO METODA .LHG\IXQNFMDMHVWGHğQLRZDQDZHZQÈWU]RELHNWX VWDMHVLÚPHWRGÈ:SU]\SDGNXPHWRG\this RGQRVLVLÚGRRELHNWX]DZLHUDMÈFHJRWÚPHWRGÚ -HĝHOLQD]ZDQDIXQNFMD]RVWDQLH]GHğQLRZDQD Z]DNUHVLHJOREDOQ\PDQDVWÚSQLHXĝ\WDMDNR PHWRGDRELHNWXWRthisRGQRVLVLÚGRRELHNWX ZNWöU\P]QDMGXMHVLÚPHWRGD :SU]HGVWDZLRQ\PSRQLĝHMSU]\NïDG]LHPHWRGD getArea()MHVW]GHğQLRZDQDZHZQÈWU]RELHNWX shapeDZLÚFthisRGQRVLVLÚGRRELHNWXshape ]DZLHUDMÈFHJRWÚPHWRGÚ var shape = { width: 600 height: getArea: function() { return this.width * this.height } ` :NROHMQ\PSU]\NïDG]LHZ\NRU]\VWXMHP\WÚVDPÈ IXQNFMÚZ\UDĝHQLDshowWidth()FRSRND]DQD QDVWURQLHSROHZHMDOHSU]\SLVDQDMDNRPHWRGD RELHNWX YDUZLGWK var shape = {width: 300` var showWidth = function() { document.write(this.width ` 3RQLHZDĝVïRZRNOXF]RZHthisRGZRïXMHVLÚGR RELHNWXshapeRGSRZLDGDSRQLĝV]HPXSROHFHQLX VKDSHJHW:LGWK VKRZ:LGWK VKDSHJHW:LGWK UHWXUQVKDSHZLGWK VKDSHKHLJKW 2VWDWQLZLHUV]ZVND]XMHĝHIXQNFMDshowWidth() MHVWXĝ\WDMDNRPHWRGDRELHNWXshape1D]ZD PHWRG\MHVWQLHFRLQQDgetWidth() -HĝHOLWZRU]\V]ZLHOHRELHNWöZ]DSRPRFÈ NRQVWUXNWRUDRELHNWX DSRV]F]HJöOQHNV]WDïW\ PDMÈUöĝQHZ\PLDU\ WRthisRGZRïXMHVLÚGR SRV]F]HJöOQ\FKHJ]HPSODU]\QRZRWZRU]RQ\FK RELHNWöZ3RZ\ZRïDQLXPHWRG\getArea() QDVWÈSLREOLF]HQLHZ\PLDUöZZNRQNUHWQ\P HJ]HPSODU]XRELHNWX 3RZ\ZRïDQLXPHWRG\getWidth()QDZHWSRPLPR Xĝ\FLDIXQNFMLshowWidth()VïöZNRthisRGZRïXMH VLÚGRRELHNWXshapeDQLHNRQWHNVWXJOREDOQHJR (this.widthRGZRïXMHVLÚGRZïDĂFLZRĂFLwidth RELHNWXshape 'ODWHJRWHĝQDVWURQLH]RVWDQLH Z\ĂZLHWORQDZDUWRĂÊ300 FUNKCJE, METODY I OBIEKTY PRZYPOMNIENIE SPOSOBÓW PRZECHOWYWANIA DANYCH :MÚ]\NX-DYD6FULSWGDQHVÈSU]HGVWDZLDQHZSRVWDFLSDUQD]ZDZDUWRĂÊ $E\]RUJDQL]RZDÊGDQHPRĝQDXĝ\ÊWDEOLF\OXERELHNWXLJUXSRZDÊ]ELöU SRZLÈ]DQ\FK]HVREÈZDUWRĂFL:WDEOLFDFKLRELHNWDFKQD]ZDMHVWRNUHĂODQD UöZQLHĝPLDQHPNOXF]D ZMIENNE TABLICE =PLHQQDPDW\ONRMHGHQNOXF] VZRMÈQD]ZÚ RUD] MHGQÈZDUWRĂÊ 7DEOLFHPRJÈSU]HFKRZ\ZDÊZLHOHHOHPHQWöZ LQIRUPDFML3RV]F]HJöOQHHOHPHQW\VÈUR]G]LHORQH SU]HFLQNDPL.ROHMQRĂÊZDUWRĂFLPD]QDF]HQLH SRQLHZDĝNDĝGHPXHOHPHQWRZLWDEOLF\MHVW SU]\SLVDQ\QXPHU QD]\ZDQ\LQGHNVHP 1D]Z\]PLHQQ\FKVÈRGG]LHORQHRGZDUWRĂFL ]QDNLHPUöZQRĂFL MHVWWRRSHUDWRUSU]\SLVDQLD YDUKRWHO ĳ4XD\ĳ :DUWRĂFLZWDEOLF\VÈSRGDZDQHZQDZLDVLH NZDGUDWRZ\PLUR]G]LHORQHSU]HFLQNDPL $E\SREUDÊZDUWRĂÊ]PLHQQHMQDOHĝ\Xĝ\ÊMHM QD]Z\ var hotels = [ ĳ4XD\ĳ ĳ3DUNĳ ĳ%HDFKĳ ’Bloomsbury’ ] 3RQLĝV]HSROHFHQLHSRELHU]HZDUWRĂÊ4XD\ KRWHO .LHG\]PLHQQD]RVWDïD]DGHNODURZDQD DOHQLHSU]\SLVDQRMHMZDUWRĂFLWRZDUWRĂFLÈ MHVWXQGHğQHG -HĝHOLVïRZRNOXF]RZHvarQLH]RVWDQLHXĝ\WH WR]PLHQQDEÚG]LH]DGHNODURZDQDZ]DNUHVLH JOREDOQ\P ]DZV]HSRZLQLHQHĂNRU]\VWDÊ]WHJR VïRZDNOXF]RZHJR .DĝG\HOHPHQWWDEOLF\PRĝQDSRWUDNWRZDÊMDNR NROHMQÈSDUÚNOXF]ZDUWRĂÊ.OXF]MHVWQXPHUHP LQGHNVXSRGF]DVJG\ZDUWRĂFLVÈSRGDQHQDOLĂFLH UR]G]LHORQHMSU]HFLQNDPL $E\SREUDÊHOHPHQWQDOHĝ\Xĝ\ÊMHJRLQGHNVX 3RQLĝV]HSROHFHQLHSRELHU]HZDUWRĂÊ3DUN KRWHOV>@ -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 = { QDPHĳ4XD\ĳ 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 ĳ4XD\ĳ YDUKRWHO QHZ+RWHO ĳ3DUNĳ 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 <html> NUMBER BOOLEAN <head> <body> <title> <div> atrybut <p> 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 ĳRQHĳ 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<ZVNDěQLNDZ]JOÚGHPOHZHJRJöUQHJRURJXHNUDQX window.location %LHĝÈF\DGUHV85/RELHNWXwindow OXEĂFLHĝNDGRVWÚSXGRSOLNXORNDOQHJR window.document 2GQLHVLHQLHGRRELHNWXdocumentNWöU\MHVWXĝ\ZDQ\ZFHOXSU]HGVWDZLHQLDELHĝÈFHMVWURQ\ Z\ĂZLHWORQHMZRNQLHSU]HJOÈGDUNLLQWHUQHWRZHM window.history 2GQLHVLHQLHGRRELHNWXhistoryGODRNQDOXENDUW\SU]HJOÈGDUNLLQWHUQHWRZHM2ELHNW]DZLHUD LQIRUPDFMHV]F]HJöïRZHRVWURQDFKRGZLHG]RQ\FKZW\PRNQLHOXENDUFLH window.history.length /LF]EDHOHPHQWöZ]QDMGXMÈF\FKVLÚZRELHNFLHhistoryGODWHJRRNQDOXENDUW\SU]HJOÈGDUNL LQWHUQHWRZHM window.screen 2GQLHVLHQLHGRRELHNWXscreen window.screen.width 8]\VNDQLHGRVWÚSXGRRELHNWXscreenRUD]Z\V]XNDQLHZ\UDĝRQHMZSLNVHODFKZDUWRĂFL ZïDĂFLZRĂFLwidth window.screen.height 8]\VNDQLHGRVWÚSXGRRELHNWXscreenRUD]Z\V]XNDQLHZ\UDĝRQHMZSLNVHODFKZDUWRĂFL ZïDĂFLZRĂFLheight 0(72'$ 23,6 window.alert() :\ĂZLHWODRNQRGLDORJRZHZUD]]NRPXQLNDWHP Xĝ\WNRZQLNPXVLNOLNQÈÊSU]\FLVNOK, DE\MH]DPNQÈÊ window.open() 2WZLHUDQRZHRNQRSU]HJOÈGDUNLLQWHUQHWRZHMZUD]]HVWURQÈRDGUHVLH85/ZVND]DQ\PMDNR SDUDPHWU -HĝHOLZSU]HJOÈGDUFH]DLQVWDORZDQRRSURJUDPRZDQLHFKURQLÈFHSU]HGZ\ĂZLHWODQLHPUHNODPUR]ZLÈ]DQLHWRPRĝHQLHG]LDïDÊ window.print() 0HWRGDLQIRUPXMHSU]HJOÈGDUNÚLQWHUQHWRZÈĝHXĝ\WNRZQLNFKFHZ\GUXNRZDÊ]DZDUWRĂÊ ELHĝÈFHMVWURQ\ 0HWRGDG]LDïDWDNMDNE\Xĝ\WNRZQLNZ\EUDïRSFMÚZ\GUXNXZLQWHUIHMVLH Xĝ\WNRZQLNDSU]HJOÈGDUNLLQWHUQHWRZHM FUNKCJE, METODY I OBIEKTY UŻYCIE OBIEKTOWEGO MODELU PRZEGLĄDARKI INTERNETOWEJ 3RQLĝHMSU]HGVWDZLRQRGDQHGRW\F]ÈFH SU]HJOÈGDUNLLQWHUQHWRZHMNWöUH]RVWDï\SREUDQH ]RELHNWXwindowRUD]MHJRRELHNWöZSRWRPQ\FK SU]HFKRZ\ZDQHZ]PLHQQHMRQD]ZLHmsg LZ\ĂZLHWORQHQDVWURQLH2SHUDWRU+=SRZRGXMH XPLHV]F]HQLHQRZ\FKGDQ\FKSU]\SLVDQ\FKQD NRñFX]PLHQQHMmsg 'ZLHZïDĂFLZRĂFLRELHNWXwindowF]\OL innerWidthLinnerHeightGRVWDUF]DMÈLQIRUPDFMH RV]HURNRĂFLLZ\VRNRĂFLRNQDSU]HJOÈGDUNL LQWHUQHWRZHM 2ELHNW\SRWRPQHVÈSU]HFKRZ\ZDQHMDNR ZïDĂFLZRĂFLLFKRELHNWöZQDGU]ÚGQ\FK:FHOX X]\VNDQLDGRQLFKGRVWÚSXZ\NRU]\VW\ZDQDMHVW QRWDFMD]Xĝ\FLHPNURSNLSRGREQLHMDNZSU]\SDGNXGRVWÚSXGRLQQHMGRZROQHMZïDĂFLZRĂFL RELHNWX JAVASCRIPT 1 2 3 4 $E\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLRELHNWX SRWRPQHJRXĝ\ZDQDMHVWNROHMQDNURSND XPLHV]F]DQDPLÚG]\QD]ZÈRELHNWX SRWRPQHJRLMHJRZïDĂFLZRĂFLÈQDSU]\NïDG window.history.length :\EUDQ\]RVWDMHHOHPHQWNWöUHJRZDUWRĂFLÈ DWU\EXWXidMHVWinfo8WZRU]RQ\Z]PLHQQHMmsg NRPXQLNDW]RVWDMHZ\ĂZLHWORQ\QDVWURQLH :UR]G]LDOHZSRGUR]G]LDOHķ$WDNLW\SX;66ĵ ]QDMG]LHV]LQIRUPDFMHGRW\F]ÈFHXĝ\FLDZïDĂFLZRĂFLinnerHTML:DUWRVLÚ]QLPL]DSR]QDÊ SRQLHZDĝQLHSUDZLGïRZHXĝ\FLHinnerHTMLZLÈĝH VLÚ]QLHEH]SLHF]HñVWZHP 0HWRGDalert()RELHNWXwindow]RVWDïDXĝ\WD ZFHOXZ\ĂZLHWOHQLDRNQDGLDORJRZHJRQDHNUDQLH 7RRNQRQD]\ZDP\NRPXQLNDWHP:SUDZG]LH Xĝ\WDPHWRGDQDOHĝ\GRRELHNWXwindowDOH c03/js/window-object.js var msg ĳK!RNQRSU]HJOÈGDUNLK!S!V]HURNRĂÊĳZLQGRZLQQHU:LGWKĳS!ĳ PVJ ĳS!Z\VRNRĂÊĳZLQGRZLQQHU+HLJKWĳS!ĳ PVJ ĳK!KLVWRULDK!S!HOHPHQW\ĳZLQGRZKLVWRU\OHQJWKĳS!ĳ PVJ ĳK!HNUDQK!S!V]HURNRĂÊĳZLQGRZVFUHHQZLGWKĳS!ĳ PVJ ĳS!Z\VRNRĂÊĳZLQGRZVFUHHQKHLJKWĳS!ĳ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳLQIRĳ HOLQQHU+70/ PVJ DOHUW ĳ%LHĝÈFDVWURQDĳZLQGRZORFDWLRQ WYNIK PRĝHV]VSRWNDÊVLÚ]MHM]DVWRVRZDQLHPMDNR PHWRG\VDPRG]LHOQHMSRQLHZDĝRELHNWwindowMHVW WUDNWRZDQ\MDNRGRP\ĂOQ\JG\ĝDGHQQLH]RVWDQLH ZVND]DQ\ .LHG\ĂPHWRGDalert()E\ïDXĝ\ZDQD ZFHOXZ\ĂZLHWODQLDRVWU]HĝHñXĝ\WNRZQLNRP 2EHFQLHPDP\]QDF]QLHOHSV]HVSRVRE\Z\ĂZLHWODQLDLQIRUPDFMLXĝ\WNRZQLNRP FUNKCJE, METODY I OBIEKTY OBIEKTOWY MODEL DOKUMENTU — OBIEKT DOCUMENT 1DVDPHMJöU]HRELHNWRZHJRPRGHOXGRNXPHQWX PRGHO'20 ]QDMGXMHVLÚ obiekt document3U]HGVWDZLDRQELHĝÈFÈVWURQÚZF]\WDQÈZRNQLH OXENDUFLHSU]HJOÈGDUNLLQWHUQHWRZHM2ELHNW\SRWRPQHRELHNWXdocument EÚGÈSU]HGVWDZLRQHZUR]G]LDOH 3RQLĝHMZ\PLHQLRQRZ\EUDQH ZïDĂFLZRĂFLRELHNWXdocument GRVWDUF]DMÈFHLQIRUPDFMH RELHĝÈFHMVWURQLH -DN]REDF]\V]ZUR]G]LDOH PRGHO'20WZRU]\RELHNWGOD NDĝGHJRHOHPHQWXVWURQ\ :$¥&,:2¥m 23,6 document.title 7\WXïELHĝÈFHJRGRNXPHQWX GRFXPHQWODVW0RGLğHG 'DWDRVWDWQLHMPRG\ğNDFMLGRNXPHQWX document.URL &LÈJWHNVWRZ\]DZLHUDMÈF\DGUHV85/ELHĝÈFHJRGRNXPHQWX document.domain 'RPHQDELHĝÈFHJRGRNXPHQWX Model DOM ma istotne ]QDF]HQLHSRGF]DVX]\VNLZDQLD GRVWÚSXGRPRG\ğNDFML ]DZDUWRĂFLELHĝÈFHMVWURQ\ internetowej. 3RQLĝHMZ\PLHQLRQRNLONDPHWRG SU]H]QDF]RQ\FKGRSRELHUDQLD LXDNWXDOQLDQLD]DZDUWRĂFL VWURQ\ 0(72'$ 23,6 document.write() 8PLHV]F]HQLHWHNVWXZGRNXPHQFLHĽ]DSR]QDMVLÚ]RJUDQLF]HQLDPLZ\PLHQLRQ\PLZUR]G]LDOHZSRGUR]G]LDOHķ3RUöZQDQLHWHFKQLNĽXDNWXDOQLHQLH ]DZDUWRĂFL+70/ĵ document.getElementById() =ZUDFDHOHPHQWRLOHLVWQLHMHHOHPHQWNWöUHJRZDUWRĂÊDWU\EXWXid zostanie GRSDVRZDQDĽGRNïDGQHRPöZLHQLHWHMPHWRG\]QDMG]LHV]ZUR]G]LDOH ZSRGUR]G]LDOHķ3REUDQLHHOHPHQWXQDSRGVWDZLHZDUWRĂFLDWU\EXWXLGĵ document.querySelectorAll() =ZUDFDOLVWÚHOHPHQWöZGRSDVRZXMÈF\FKVHOHNWRU&66SRGDQ\MDNRSDUDPHWU ĽSDWU]UR]G]LDïSRGUR]G]LDïķ3REUDQLHHOHPHQWXQDSRGVWDZLHVHOHNWRUD &66ĵ document.createElement() 7ZRU]\QRZ\HOHPHQWĽSDWU]UR]G]LDïSRGUR]G]LDïķ'RGDQLHHOHPHQWöZ ]DSRPRFÈRSHUDFMLQDPRGHOX'20ĵ document.createTextNode() 7ZRU]\QRZ\WHNVWĽSDWU]UR]G]LDïSRGUR]G]LDïķ'RGDQLHHOHPHQWöZ ]DSRPRFÈRSHUDFMLQDPRGHOX'20ĵ 132 FUNKCJE, METODY I OBIEKTY UŻYCIE OBIEKTOWEGO MODELU DOKUMENTU :SRQLĝV]\PSU]\NïDG]LH SRELHUDQHVÈLQIRUPDFMHRVWURQLHNWöUHQDVWÚSQLH]RVWDMÈ XPLHV]F]RQHZVWRSFH ,QIRUPDFMHV]F]HJöïRZH RVWURQLHVÈSREUDQH]ZïDĂFLZRĂFLRELHNWXdocument :VSRPQLDQHLQIRUPDFMHV]F]HJöïRZH]RVWDMÈXPLHV]F]RQH Z]PLHQQHMRQD]ZLHmsgZUD] ]NRGHP]QDF]QLNöZ+70/ SU]H]QDF]RQ\PGRLFKZ\ĂZLHWOHQLD3RQRZQLHMHVWXĝ\ZDQ\ RSHUDWRU+=ZFHOXGRGDQLD QRZHMZDUWRĂFLGRLVWQLHMÈFHM ]DZDUWRĂFL]PLHQQHMmsg JAVASCRIPT =Xĝ\FLHPPHWRG\ getElementById()RELHNWX documentVSRWNDïHĂVLÚMXĝ ZNLONXZF]HĂQLHMV]\FK SU]\NïDGDFK0HWRGD Z\ELHUDHOHPHQWQDVWURQLH QDSRGVWDZLHZDUWRĂFLMHJR DWU\EXWXid'RNïDGQLHMV]H RPöZLHQLHZ\PLHQLRQHMPHWRG\ ]QDMG]LHV]ZUR]G]LDOH ZSRGUR]G]LDOHķ3REUDQLH HOHPHQWXQDSRGVWDZLHZDUWRĂFL DWU\EXWXLGĵ c03/js/document-object.js 1 YDUPVJ ĳS!E!W\WXïVWURQ\E!ĳGRFXPHQWWLWOHĳEU!ĳ PVJ ĳE!DGUHVVWURQ\E!ĳGRFXPHQW85/ĳEU!ĳ PVJ ĳE!RVWDWQLDPRG\ğNDFMDE!ĳGRFXPHQWODVW0RGLğHGĳS!ĳ 2 YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳIRRWHUĳ HOLQQHU+70/ PVJ WYNIK :UR]G]LDOHZSRGUR]G]LDOH ķ$WDNLW\SX;66ĵ]QDMG]LHV] LQIRUPDFMHGRW\F]ÈFHXĝ\FLD ZïDĂFLZRĂFLinnerHTML :DUWRVLÚ]QLPL]DSR]QDÊ SRQLHZDĝQLHSUDZLGïRZHXĝ\FLH innerHTMLZLÈĝHVLÚ]QLHEH]SLHF]HñVWZHP -HĝHOLZ\ĂZLHWOLV]VWURQÚ ORNDOQLH]DPLDVW]VHUZHUD :::DGUHV85/EÚG]LH Z\JOÈGDï]XSHïQLHLQDF]HM :WHG\EÚG]LH]DF]\QDïVLÚRG ğOH]DPLDVWRGhttp:// FUNKCJE, METODY I OBIEKTY OBIEKTY GLOBALNE — OBIEKT STRING :SU]\SDGNXZDUWRĂFLEÚGÈFHMFLÈJLHPWHNVWRZ\PPRĝQDXĝ\ÊZïDĂFLZRĂFL LPHWRG\RELHNWXString:RPDZLDQ\PSU]\NïDG]LH]PLHQQD]DZLHUD ZDUWRĂÊHome sweet home YDUVD\LQJ ĳ+RPHVZHHWKRPHĳ :\PLHQLRQHWXWDMZïDĂFLZRĂFL LPHWRG\VÈEDUG]RF]ÚVWRXĝ\ZDQH SRGF]DVSUDF\]WHNVWHPSU]HFKRZ\ZDQ\PZ]PLHQQ\FKOXERELHNWDFK :$¥&,:2¥m 23,6 length :ZLÚNV]RĂFLSU]\SDGNöZ]ZUDFDOLF]EÚ]QDNöZ ]QDMGXMÈF\FKVLÚZFLÈJXWHNVWRZ\P SDWU] XZDJDQDGROHVWURQ\ 1DVWURQLHSRSUDZHM]ZUöÊ XZDJÚQDIDNWĝHSRQD]ZLH ]PLHQQHM saying ]QDMGXMHVLÚ NURSNDDQDVWÚSQLHGHPRQVWURZDQD ZïDĂFLZRĂÊOXEPHWRGD SRGREQLH MDNZSU]\SDGNXQD]Z\RELHNWXSR NWöUHM]QDMGXMHVLÚNURSNDLZïDĂFLZRĂÊOXEPHWRGDRELHNWX 0(72'$ 23,6 toUpperCase() =PLHQLDQDGXĝH]QDNLZFLÈJXWHNVWRZ\P toLowerCase() =PLHQLDQDPDïH]QDNLZFLÈJXWHNVWRZ\P charAt() 3RELHUDQXPHULQGHNVXMDNRSDUDPHWUDQDVWÚSQLH]ZUDFD]QDN]QDMGXMÈF\VLÚZHZVND]DQ\P SRïRĝHQLX indexOf() =ZUDFDQXPHULQGHNVXSLHUZV]HJR]QDNXOXE ]ELRUX]QDNöZZGDQ\PFLÈJXWHNVWRZ\P lastIndexOf() =ZUDFDQXPHULQGHNVXRVWDWQLHJR]QDNXOXE ]ELRUX]QDNöZZGDQ\PFLÈJXWHNVWRZ\P substring() =ZUDFD]QDNL]QDOH]LRQHPLÚG]\GZRPD LQGHNVDPLSU]\F]\P]QDN]QDMGXMÈF\VLÚZSRïRĝHQLXZVND]\ZDQ\PSU]H]SLHUZV]\LQGHNV MHVWGRïÈF]RQ\QDWRPLDVW]QDNZVND]\ZDQ\ SU]H]GUXJLLQGHNVQLHMHVWGRïÈF]RQ\ split() 3RSRGDQLX]QDNXPHWRGDSRZRGXMHSRG]LDï FLÈJXWHNVWRZHJRZNDĝG\PPLHMVFXZ\VWÈSLHQLDGDQHJR]QDNXDQDVWÚSQLHSRV]F]HJöOQH HOHPHQW\SU]HFKRZXMHZWDEOLF\ trim() 8VXZD]QDNLRGVWÚSXQDSRF]ÈWNXLNRñFXFLÈJX WHNVWRZHJR replace() ']LDïDSRGREQLHMDNIXQNFMDW\SXķ]QDMGě L]DPLHñĵ3RELHUDZDUWRĂÊGR]QDOH]LHQLD RUD]ZDUWRĂÊ]DVWÚSXMÈFÈ GRP\ĂOQLH]DVWÈSLHQLHZDUWRĂFLQDVWÚSXMHW\ONRGODSLHUZV]HJR ]QDOH]LRQHJRGRSDVRZDQLD 'ODWHJRWHĝRELHNWStringMHVWQD]\ZDQ\]DUöZQRRELHNWHPJOREDOQ\P G]LDïDZNDĝG\PPLHMVFXVNU\SWX MDNLRELHNWHP RSDNRZDQLD, SRQLHZDĝG]LDïDZFKDUDNWHU]H RSDNRZDQLDGODGRZROQHMZDUWRĂFL EÚGÈFHMFLÈJLHPWHNVWRZ\P 2]QDF]DWRĝHZïDĂFLZRĂFLLPHWRG\ RELHNWXStringPRĝQDZ\NRU]\VWDÊ GODGRZROQHMZDUWRĂFLEÚGÈFHM FLÈJLHPWHNVWRZ\P :ïDĂFLZRĂÊlength]OLF]DķMHGQRVWNL NRGXĵZFLÈJXWHNVWRZ\P:ZLÚNV]RĂFLSU]\SDGNöZMHGHQ]QDN ]DMPXMHW\ONRMHGQÈMHGQRVWNÚNRGX ZLÚNV]RĂÊSURJUDPLVWöZVWRVXMHWÚ ZïDĂFLZRĂÊZWDNLZïDĂQLHVSRVöE =GDU]DMÈVLÚV\WXDFMHJG\]QDN PRĝH]DMÈÊGZLHMHGQRVWNLNRGX FUNKCJE, METODY I OBIEKTY .DĝG\]QDNZFLÈJXWHNVWRZ\PDXWRPDW\F]QLHRWU]\PXMHQXPHU QD]\ZDQÈQXPHUHPLQGHNVX3RGREQLHMDNZSU]\SDGNXWDEOLF\ QXPHU\LQGHNVXUR]SRF]\QDMÈVLÚRG]HUDDQLHRGMHGQHJR Home sweet home 0 1 2 3 4 5 6 7 8 9 10 35=<.$' 11 12 13 14 15 :<1,. VD\LQJOHQJWK Home sweet home 35=<.$' :<1,. VD\LQJWR8SSHU&DVH Home sweet home ’HOME SWEET HOME ’ VD\LQJWR/RZHU&DVH Home sweet home ’home sweet home ’ VD\LQJFKDU$W Home sweet home ’o’ VD\LQJLQGH[2I ĳHHĳ Home sweet home 7 VD\LQJODVW,QGH[ ĳHĳ Home sweet home VD\LQJVXEVWULQJ Home sweet home ’et hom’ VD\LQJVSOLW ĳĳ Home sweet home >ĳ+RPHĳĳVZHHWĳĳKRPHĳĳĳ@ VD\LQJWULP Home sweet home ’Home sweet home’ Home sweet home ’How sweet home ’ VD\LQJUHSODFH ĳPHĳĳZĳ FUNKCJE, METODY I OBIEKTY PRACA Z CIĄGIEM TEKSTOWYM :W\PSU]\NïDG]LH]DGHPRQVWURZDQRZïDĂFLZRĂÊlength RUD]ZLHOHPHWRGRELHNWX StringZ\PLHQLRQ\FKQD SRSU]HGQLHMVWURQLH 3U]\NïDGUR]SRF]\QDVLÚ RGSU]\SLVDQLDZDUWRĂFL “Home sweet home ”]PLHQQHM RQD]ZLHsaying :NROHMQ\FKZLHUV]DFK NRGSRGDMHOLF]EÚ]QDNöZ FLÈJXWHNVWRZHJRRNUHĂORQÈ]D SRPRFÈZïDĂFLZRĂFLlength RELHNWXStringLSU]HFKRZXMHMÈ Z]PLHQQHMmsg :GDOV]HMF]ÚĂFLSU]\NïDGX SU]HGVWDZLRQHMHVWXĝ\FLHZLHOX PHWRGRELHNWXString JAVASCRIPT 1 2 3 4 3RQD]ZLH]PLHQQHM saying ]QDMGXMHVLÚNURSNDDQDVWÚSQLH QD]ZDGHPRQVWURZDQHM ZïDĂFLZRĂFLOXEPHWRG\ ZGRNïDGQLHWHQVDPVSRVöE QRWDFMD]Xĝ\FLHPNURSNLMHVW Z\NRU]\VW\ZDQDSU]H]LQQH RELHNW\RPDZLDQHZUR]G]LDOH c03/js/string-object.js YDUVD\LQJ ĳ+RPHVZHHWKRPHĳ YDUPVJ ĳK!OLF]ED]QDNöZK!S!ĳVD\LQJOHQJWKĳS!ĳ PVJ ĳK!GXĝHOLWHU\K!S!ĳVD\LQJWR8SSHU&DVH ĳS!ĳ PVJ ĳK!PDïHOLWHU\K!S!ĳVD\LQJWR/RZHU&DVH ĳS!ĳ PVJ ĳK!]QDNQUK!S!ĳVD\LQJFKDU$W ĳS!ĳ PVJ ĳK!SLHUZV]HZ\VWÈSLHQLHHHK!S!ĳVD\LQJLQGH[2I ĳHHĳ ĳS!ĳ PVJ ĳK!RVWDWQLHZ\VWÈSLHQLHHK!S!ĳVD\LQJODVW,QGH[2I ĳHĳ ĳS!ĳ PVJ ĳK!]QDNLQUK!S!ĳVD\LQJVXEVWULQJ ĳS!ĳ PVJ ĳK!IXQNFMD]DVWÈSLHQLDK!S!ĳVD\LQJUHSODFH ĳPHĳĳZĳ ĳS!ĳ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳLQIRĳ HOLQQHU+70/ PVJ WYNIK :GZöFKRVWDWQLFKZLHUV]DFKZ\EUDQ\]RVWDMHHOHPHQW NWöUHJRZDUWRĂFLÈDWU\EXWXid MHVWinfo8WZRU]RQ\GRWÈG NRPXQLNDWZ]PLHQQHMmsg ]RVWDMHZ\ĂZLHWORQ\QDVWURQLH 3DPLÚWDMRNZHVWLDFKEH]SLHF]HñVWZD]ZLÈ]DQ\FK]Xĝ\FLHP ZïDĂFLZRĂFLinnerHTML:LÚFHM LQIRUPDFMLQDWHQWHPDW]QDMG]LHV]ZUR]G]LDOHZSRGUR]G]LDOHķ$WDNLW\SX;66ĵ FUNKCJE, METODY I OBIEKTY PODSUMOWANIE TYPÓW DANYCH :MÚ]\NX-DYD6FULSWPDP\V]HĂÊW\SöZGDQ\FK3LÚÊ]QLFKRNUHĂODVLÚ PLDQHPSURVW\FK1DWRPLDVWV]öVW\PMHVWRELHNW WHQW\SMHVWRNUHĂODQ\ PLDQHP]ïRĝRQHJRW\SXGDQ\FK PROSTE TYPY DANYCH ZŁOŻONE TYPY DANYCH -DYD6FULSWRIHUXMHSLÚÊSURVW\FKW\SöZGDQ\FK -DYD6FULSWREVïXJXMHWDNĝH]ïRĝRQ\W\SGDQ\FK String Number Boolean 8QGHğQHG ]PLHQQD]RVWDïD]DGHNODURZDQDDOH MHV]F]HQLHSU]\SLVDQRMHMZDUWRĂFL Null ]PLHQQDQLHSRVLDGDZDUWRĂFLĽPRJïD ZF]HĂQLHMPLHÊZDUWRĂÊDOHREHFQLHMHMQLH SRVLDGD Obiekt -DNPRJïHĂ]REDF]\Ê]DUöZQRSU]HJOÈGDUND LQWHUQHWRZDMDNLELHĝÈF\GRNXPHQWPRJÈE\Ê PRGHORZDQH]DSRPRFÈRELHNWöZNWöUH]NROHL PRJÈPLHÊPHWRG\LZïDĂFLZRĂFL 2GNU\FLHĝHSURVWDZDUWRĂÊ WDNDMDNFLÈJ WHNVWRZ\OLF]EDOXEZDUWRĂÊERRORZVND PRĝH PLHÊPHWRG\LZïDĂFLZRĂFLF]DVDPLZSURZDG]D Z]DNïRSRWDQLH:WOHMÚ]\N-DYD6FULSWWUDNWXMH NDĝGÈ]PLHQQÈMDNRRELHNWQDZïDVQ\FKSUDZDFK String-HĝHOL]PLHQQDOXEZïDĂFLZRĂÊRELHNWX ]DZLHUDFLÈJWHNVWRZ\WRSRGF]DVSUDF\]WÈ ]PLHQQÈPRĝHV]Xĝ\ZDÊZïDĂFLZRĂFLLPHWRG RELHNWXString Number-HĝHOL]PLHQQDOXEZïDĂFLZRĂÊRELHNWX SU]HFKRZXMHOLF]EÚWRSRGF]DVSUDF\]WÈ]PLHQQÈ PRĝHV]Xĝ\ZDÊZïDĂFLZRĂFLLPHWRGRELHNWX Number SDWU]NROHMQDVWURQD :WOHWDEOLFHLIXQNFMHVÈX]QDZDQH]DRELHNW\ TABLICA JEST OBIEKTEM -DN]REDF]\ïHĂZSRGUR]G]LDOHķ7DEOLFDMHVWRELHNWHPĵWDEOLFDWR]ELöUSDUNOXF]ZDUWRĂÊ SRGREQLH MDNNDĝG\LQQ\RELHNW -HGQDNZWDEOLF\QLHWU]HED SRGDZDÊQD]Z\ZSDU]HNOXF]ZDUWRĂÊĽWRMHVW QXPHULQGHNVX 3RGREQLHMDNLQQHRELHNW\WDNĝHWDEOLFDPDZïDĂFLZRĂFLLPHWRG\:UR]G]LDOHZSRGUR]G]LDOH ķ:DUWRĂFLZWDEOLF\ĵGRZLHG]LDïHĂVLÚĝHWDEOLFD PDZïDĂFLZRĂÊRQD]ZLHlengthNWöUDSRGDMH OLF]EÚHOHPHQWöZ]QDMGXMÈF\FKVLÚZWDEOLF\ ,VWQLHMHUöZQLHĝ]ELöUPHWRGSU]H]QDF]RQ\FKGR GRGDZDQLDLXVXZDQLDHOHPHQWöZWDEOLF\DWDNĝH ]PLDQ\LFKNROHMQRĂFL:VSRPQLDQHPHWRG\ SR]QDV]ZUR]G]LDOH FUNKCJA JEST OBIEKTEM 3RGZ]JOÚGHPWHFKQLF]Q\PIXQNFMDUöZQLHĝMHVW RELHNWHPDOHFKDUDNWHU\]XMHVLÚGRGDWNRZ\PL FHFKDPL3U]HGHZV]\VWNLPPRĝQDMÈZ\ZRïDÊ FRR]QDF]DPRĝOLZRĂÊSRLQIRUPRZDQLDLQWHUSUHWHUDĝHFKFHV]Z\NRQDÊSROHFHQLD]QDMGXMÈFHVLÚ ZIXQNFML Boolean,VWQLHMHRELHNWBooleanNWöU\MHGQDN U]DGNRE\ZDXĝ\ZDQ\ :DUWRĂFLXQGHğQHGLnullQLHVÈRELHNWDPL FUNKCJE, METODY I OBIEKTY OBIEKTY GLOBALNE — OBIEKT NUMBER -HĝHOLPDV]ZDUWRĂÊEÚGÈFÈOLF]EÈWRPRĝHV] QDQLHMXĝ\ZDÊPHWRGLZïDĂFLZRĂFLRELHNWXNumber :\PLHQLRQHSRQLĝHMPHWRG\ RND]XMÈVLÚXĝ\WHF]QHZZLHOX UöĝQHJRURG]DMXDSOLNDFMDFK SRF]ÈZV]\RGSU]HSURZDG]DMÈF\FKREOLF]HQLDğQDQVRZHDĝGR DQLPDFML :LHOHREOLF]HñQDZDUWRĂFLDFK SLHQLÚĝQ\FK QDSU]\NïDG Z\VRNRĂÊSRGDWNX PXVLE\Ê ]DRNUÈJORQ\FKGRRNUHĂORQHM OLF]E\PLHMVFSRSU]HFLQNX G]LHVLÚWQ\P =NROHLZSU]\SDGNXDQLPDFML PRĝHZ\VWÈSLÊSRWU]HED ZVND]DQLDĝHRNUHĂORQD OLF]EDHOHPHQWöZPDE\ÊUöZQR UR]ïRĝRQDQDVWURQLH 0(72'$ 23,6 isNaN() 6SUDZG]DF]\ZDUWRĂÊQLHMHVWOLF]EÈ toFixed() =DRNUÈJODZDUWRĂÊGRSRGDQHMOLF]E\PLHMVFSRSU]HFLQNXG]LHVLÚWQ\P ZDUWRĂFLÈ ]ZURWQÈMHVWFLÈJWHNVWRZ\ toPrecision() =DRNUÈJODZDUWRĂÊGRSRGDQHMOLF]E\F\IU ZDUWRĂFLÈ]ZURWQÈMHVWFLÈJWHNVWRZ\ toExponential() =ZUDFDFLÈJWHNVWRZ\SU]HGVWDZLDMÈF\OLF]EÚZ\UDĝRQÈZQRWDFMLZ\NïDGQLF]HM NAJCZĘŚCIEJ UŻYWANE POJĘCIA ľ/LF]EDFDïNRZLWDWROLF]EDSR]EDZLRQDF]ÚĂFLXïDPNRZHM ľ/LF]EDU]HF]\ZLVWDWROLF]EDNWöUDPRĝH]DZLHUDÊF]ÚĂÊXïDPNRZÈ ľ/LF]ED]PLHQQRSU]HFLQNRZDWROLF]EDU]HF]\ZLVWD]DSLVDQD]Z\NRU]\VWDQLHPQRWDFMLXïDPNRZHM 3RMÚFLHķ]PLHQQRSU]HFLQNRZDĵRGQRVLVLÚGRSU]HFLQNDRGG]LHODMÈFHJRF]ÚĂÊG]LHVLÚWQÈ ľ1RWDFMDZ\NïDGQLF]DWRVSRVöE]DSLVXOLF]ENWöUHVÈ]E\WGXĝHOXE]E\WPDïHDE\PRĝQDE\ïR Z\JRGQLH]DSLVDÊMHZSRVWDFLG]LHVLÚWQHM1DSU]\NïDGOLF]EÚPRĝQD]DSLVDÊ ZSRVWDFLŚ9OXEH FUNKCJE, METODY I OBIEKTY PRACA Z LICZBAMI DZIESIĘTNYMI 3RGREQLHMDNZSU]\SDGNX RELHNWXStringZïDĂFLZRĂFL LPHWRG\RELHNWXNumberPRJÈ E\ÊXĝ\WHGODNDĝGHMZDUWRĂFL EÚGÈFHMOLF]EÈ :RPDZLDQ\PSU]\NïDG]LH OLF]EDMHVWSU]HFKRZ\ZDQD Z]PLHQQHMRQD]ZLH originalNumberDQDVWÚSQLH ]DRNUÈJODQD]DSRPRFÈGZöFK UöĝQ\FKWHFKQLN JAVASCRIPT 1 2 3 :REXSU]\SDGNDFKNRQLHF]QH MHVWSRGDQLHOLF]E\F\IUGR NWöU\FKPDQDVWÈSLÊ]DRNUÈJOHQLH:LHONRĂÊ]DRNUÈJOHQLD MHVWSRGDZDQDZQDZLDVLHMDNR SDUDPHWUPHWRG\ c03/js/number-object.js YDURULJLQDO1XPEHU YDUPVJ ĳK!OLF]EDSRF]ÈWNRZDK!S!ĳRULJLQDO1XPEHUĳS!ĳ PVJ ĳK!WU]\PLHMVFDG]LHVLÚWQHK!S!ĳRULJLQDO1XPEHUWR)L[HG ĳS!ĳ PVJ ĳK!WU]\F\IU\K!S!ĳRULJLQDO1XPEHUWR3UHFLVLRQ ĳS!ĳ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳLQIRĳ HOLQQHU+70/ PVJ WYNIK 3ROHFHQLH originalNumber.toFixed(3) VSRZRGXMH]DRNUÈJOHQLH OLF]E\SU]HFKRZ\ZDQHM Z]PLHQQHMoriginalNumber GRWU]HFKPLHMVFSRSU]HFLQNX G]LHVLÚWQ\P /LF]EDPLHMVF SRSU]HFLQNXMHVWSRGDQD ZQDZLDVLH :DUWRĂFLÈ]ZURWQÈ PHWRG\MHVWFLÈJWHNVWRZ\ SRQLHZDĝJG\OLF]ED]RVWDQLH ]DRNUÈJORQDQLHPRĝQD GRNïDGQLHMHMSU]HGVWDZLÊMDNR OLF]E\]PLHQQRSU]HFLQNRZHM 0HWRGDtoPrecision(3) Xĝ\ZDZDUWRĂFLSRGDQHMZQDZLDVLHGRZVND]DQLDFDïNRZLWHM OLF]E\F\IUNWöUHPDMÈWZRU]\Ê OLF]EÚ:DUWRĂÊ]ZURWQDUöZQLHĝ MHVWFLÈJLHPWHNVWRZ\P *G\ LVWQLHMHZLÚNV]DOLF]EDF\IUQLĝ SRGDQDZZ\ZRïDQLXZDUWRĂÊ ]ZURWQDPRĝHE\ÊZSRVWDFL QRWDFMLZ\NïDGQLF]HM FUNKCJE, METODY I OBIEKTY OBIEKTY GLOBALNE — OBIEKT MATH 2ELHNWMathPDZïDĂFLZRĂFLLPHWRG\SU]H]QDF]RQH GRSUDF\]IXQNFMDPLLVWDï\PLPDWHPDW\F]Q\PL :$¥&,:2¥m 23,6 Math.PI =ZUDFDZDUWRĂÊSL F]\OLZSU]\EOLĝHQLX 0(72'$ 23,6 Math.round() =DRNUÈJODOLF]EÚGRQDMEOLĝV]HMOLF]E\FDïNRZLWHM Math.sqrt(n) =ZUDFDSLHUZLDVWHNNZDGUDWRZ\OLF]E\GRGDWQLHMQDSU]\NïDGZ\ZRïDQLH 0DWKVTUW ]ZUDFD3 Math.ceil() =DRNUÈJODOLF]EÚZJöUÚGRQDMEOLĝV]HMOLF]E\FDïNRZLWHM 0DWKĠRRU =DRNUÈJODOLF]EÚZGöïGRQDMEOLĝV]HMOLF]E\FDïNRZLWHM Math.random() *HQHUXMHORVRZRZ\EUDQÈOLF]EÚ]]DNUHVXRG0 ZïÈF]QLH GR1 Z\NOXF]DMÈF 3RQLHZDĝRELHNWMathMHVW RELHNWHPJOREDOQ\PPRĝQD SRSURVWXSRGDÊMHJRQD]ZÚ NURSNÚRUD]QD]ZÚZïDĂFLZRĂFL OXEPHWRG\GRNWöUHMFKFHV] X]\VNDÊGRVWÚS 2WU]\PDQÈOLF]EÚEÚG]LHV] SöěQLHM]Z\NOHSU]HFKRZ\ZDÊ Z]PLHQQHM2ELHNWPRĝHPLHÊ ZLHOHIXQNFMLWU\JRQRPHWU\F]Q\FKQDSU]\NïDGsin(), cos() Ltan() FUNKCJE, METODY I OBIEKTY :DUWRĂÊ]ZURWQDIXQNFMLWU\JRQRPHWU\F]Q\FKMHVWSRGDZDQD ZUDGLDQDFKNWöUHPRĝQD VNRQZHUWRZDÊQDVWRSQLH :W\PFHOXZDUWRĂÊSRG]LHO SU]H](Pi/180) WYGENEROWANIE LICZBY LOSOWEJ ZA POMOCĄ OBIEKTU MATH 7HQSU]\NïDGSRND]XMHZ\JHQHURZDQLHOLF]E\FDïNRZLWHM ]]DNUHVXRGGR 0HWRGDrandom()RELHNWXMath SRZRGXMHZ\JHQHURZDQLHOLF]E\ ORVRZHM]]DNUHVXRGGR L]DZLHUDMÈFHMZLHOHPLHMVFSR SU]HFLQNXG]LHVLÚWQ\P $E\RWU]\PDÊOLF]EÚFDïNRZLWÈ]]DNUHVXRGGR NRQLHF]QHMHVWSRPQRĝHQLH OLF]E\ORVRZRZ\JHQHURZDQHM SU]H] 7DOLF]EDQDGDOEÚG]LHPLDïD F]ÚĂÊG]LHVLÚWQÈLGODWHJRWU]HED MÈ]DRNUÈJOLÊZGöïGRQDMEOLĝV]HMOLF]E\FDïNRZLWHM :WHQVSRVöERWU]\PDV]ZDUWRĂÊ]]DNUHVXRGGR-HĝHOL QDVWÚSQLHGRGDV]WRPDV] OLF]EÚ]]DNUHVXRGGR c03/js/math-object.js JAVASCRIPT YDUUDQGRP1XP 0DWKĠRRU 0HWRGDĠRRU MHVWXĝ\ZDQD GRQDND]DQLDSU]HSURZDG]HQLD RSHUDFML]DRNUÈJOHQLDOLF]E\ ZGöï DQLHZJöUÚlubZGöï 0DWKUDQGRP YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳLQIRĳ HOLQQHU+70/ ĳK!ORVRZRZ\JHQHURZDQDOLF]EDK!S!ĳUDQGRP1XPĳS!ĳ WYNIK :SU]\SDGNXXĝ\FLDPHWRG\ round()]DPLDVWĠRRU OLF]E\ LEÚGÈZ\ELHUDQH]QDF]QLH F]ÚĂFLHMQLĝOLF]E\RGGR :V]\VWNLHOLF]E\]]DNUHVXRG GREÚGÈ]DRNUÈJODQH GRQDWRPLDVWPLÚG]\L EÚGÈ]DRNUÈJODQHGR 8ĝ\FLHPHWRG\ĠRRU JZDUDQWXMHĝHZ\JHQHURZDQDOLF]ED ]DZV]HEÚG]LH]DRNUÈJORQD ZGöïGRQDMEOLĝV]HMOLF]E\ FDïNRZLWHM1DVWÚSQLHPRĝQD GRQLHMGRGDÊLW\PVDP\P X]\VNDÊOLF]EÚ]]DNUHVXRG GR FUNKCJE, METODY I OBIEKTY UTWORZENIE EGZEMPLARZA OBIEKTU DATE $E\PöFSUDFRZDÊ]GDWÈWU]HEDXWZRU]\ÊHJ]HPSODU]RELHNWXDate 1DVWÚSQLHPRĝQDZVND]DÊGDWÚLJRG]LQÚMDNDPDE\Ê SU]HGVWDZLRQD]DSRPRFÈWHJRRELHNWX $E\XWZRU]\ÊRELHNWDateQDOHĝ\Xĝ\ÊIXQNFML NRQVWUXNWRUDRQD]ZLHDate()6NïDGQLDMHVW GRNïDGQLHWDNDVDPDMDNZSU]\SDGNXLQQ\FK IXQNFMLNRQVWUXNWRUD SDWU]SRGUR]G]LDïķ8WZRU]HQLHZLHOXRELHNWöZĽQRWDFMD]Xĝ\FLHP NRQVWUXNWRUDĵ :\PLHQLRQÈIXQNFMÚNRQVWUXNWRUD PRĝQDZ\NRU]\VWDÊGRXWZRU]HQLDZLÚFHMQLĝW\ONR MHGQHJRRELHNWXDate NAZWA ZMIENNEJ 'RP\ĂOQLHWZRU]RQ\RELHNWDateEÚG]LH]DZLHUDï ELHĝÈFÈGDWÚLELHĝÈFÈJRG]LQÚ-HĝHOLFKFHV] ZQLPSU]HFKRZ\ZDÊLQQÈGDWÚPXVLV]Z\UDěQLH SRGDÊGDWÚLJRG]LQÚNWöUHPDMÈE\ÊSU]HFKRZ\ZDQH SŁOWO KLUCZOWE NEW var today = new Date() DEKLARACJA ZMIENNEJ OPERATOR PRZYPISANIA 3RZ\ĝV]HSROHFHQLHPRĝHV]SRWUDNWRZDÊMDNR WZRU]ÈFH]PLHQQÈRQD]ZLHtodayLSU]HFKRZXMÈFÈOLF]EÚ:\QLNDWR]IDNWXĝHZMÚ]\NX-DYD6FULSWGDWDMHVWSU]HFKRZ\ZDQDZSRVWDFLOLF]E\ DGRNïDGQLHOLF]E\PLOLVHNXQGNWöUHXSï\QÚï\RG SöïQRF\GQLDVW\F]QLDURNX =ZUöÊXZDJÚĝHELHĝÈFDGDWDLJRG]LQDVÈ RNUHĂODQHQDSRGVWDZLH]HJDUDNRPSXWHUD-HĝHOL Xĝ\WNRZQLN]QDMGXMHVLÚZLQQHMVWUHğHF]DVRZHM QLĝ7\MHJRG]LHñPRĝH]DF]\QDÊVLÚZF]HĂQLHM OXESöěQLHMQLĝ7ZöM3RQDGWRMHĂOLZHZQÚWU]Q\ ]HJDUNRPSXWHUDEÚG]LHSRGDZDïQLHSUDZLGïRZÈ GDWÚOXEJRG]LQÚWRRELHNWDateRG]ZLHUFLHGOLWÚ QLHSUDZLGïRZRĂÊLUöZQLHĝEÚG]LH]DZLHUDïEïÚGQÈ GDWÚ FUNKCJE, METODY I OBIEKTY KONSTRUKTOR OBIEKTU DATE )XQNFMDNRQVWUXNWRUDDate()LQIRUPXMH-DYD6FULSW ĝH]PLHQQDMHVWGDWÈ7RSR]ZDODQDXĝ\FLHPHWRG RELHNWXDateZFHOXXVWDZLDQLDLSRELHUDQLDGDW\ RUD]JRG]LQ\]RELHNWXDate OLVWÚPHWRG]QDMG]LHV]QDVWURQLHSRSUDZHM 8VWDZLHQLHGDW\L OXE JRG]LQ\PRĝQDSU]HSURZDG]LÊ]DSRPRFÈGRZROQHJR]SRQLĝV]\FKIRUPDWöZ OXEPHWRGZ\PLHQLRQ\FKQDVWURQLHSRSUDZHM YDUGRE QHZ'DWH YDUGRE QHZ'DWH ĳ'HFĳ YDUGRE QHZ'DWH OBIEKTY GLOBALNE — OBIEKT DATY (I GODZINY) *G\PDP\XWZRU]RQ\RELHNWDateZ\PLHQLRQHSRQLĝHMPHWRG\ SR]ZDODMÈQDXVWDZLHQLHOXESRELHUDQLHGDW\LJRG]LQ\ SU]HGVWDZLDQHMSU]H]GDQ\RELHNW 0(72'$ getDate() 23,6 setDate() =ZUDFDOXEXVWDZLDG]LHñPLHVLÈFD RGGR =ZUDFDG]LHñW\JRGQLD RGGR getDay() getFullYear() setFullYear() =ZUDFDOXEXVWDZLDURN F\IU\ getHours() setHours() =ZUDFDOXEXVWDZLDJRG]LQÚ RGGR getMilliseconds() setMilliseconds() =ZUDFDOXEXVWDZLDPLOLVHNXQG\ RGGR setMilliseconds() setMinutes() =ZUDFDOXEXVWDZLDPLQXW\ RGGR getMonth() setMonth() =ZUDFDOXEXVWDZLDPLHVLÈF RGGR getSeconds() setSeconds() =ZUDFDOXEXVWDZLDVHNXQG\ RGGR getTime() setTime() /LF]EDPLOLVHNXQGNWöUHXSï\QÚï\RGVW\F]QLDURNX 87&'ODGDW\VSU]HGSRGDQHJRGQLDZDUWRĂÊMHVWXMHPQD getTimezoneOffset() =ZUDFDZ\UDĝRQHZPLQXWDFKSU]HVXQLÚFLHVWUHI\F]DVRZHMGOD ELHĝÈFHMORNDOL]DFML toDateString() =ZUDFDķGDWÚĵZSRVWDFLFLÈJXWHNVWRZHJRF]\WHOQHJRGODF]ïRZLHND toTimeString() =ZUDFDķJRG]LQÚĵZSRVWDFLFLÈJXWHNVWRZHJRF]\WHOQHJRGOD F]ïRZLHND toString() =ZUDFDFLÈJWHNVWRZ\SU]HGVWDZLDMÈF\ZVND]DQÈGDWÚ 0HWRGDtoDateString() Z\ĂZLHWOLGDWÚZQDVWÚSXMÈF\P IRUPDFLHĂUNZL -HĝHOLFKFHV]Z\ĂZLHWOLÊGDWÚ ZLQQ\VSRVöEWRQDOHĝ\SU]\JRWRZDÊRGSRZLHGQLIRUPDW]D SRPRFÈPHWRGZ\PLHQLRQ\FK SRZ\ĝHMLSU]HGVWDZLDMÈF\FK SRV]F]HJöOQHNRPSRQHQW\GDW\ G]LHñW\JRGQLDNROHMQ\G]LHñ PLHVLÈFDPLHVLÈFLURN 0HWRGDtoTimeString()Z\ĂZLHWODJRG]LQÚ:LHOHMÚ]\NöZ SURJUDPRZDQLDSRGDMHGDWÚ ZSRVWDFLOLF]E\PLOLVHNXQG NWöUHXSï\QÚï\RGSöïQRF\GQLD VW\F]QLDURNX7RMHVW WDN]ZDQ\F]DVV\VWHPX8QL[ 3RïRĝHQLHJHRJUDğF]QHRGZLHG]DMÈFHJRZLWU\QÚPRĝHPLHÊ ZSï\ZQDVWUHIÚF]DVRZÈLMÚ]\N Z\NRU]\VW\ZDQ\ZXU]ÈG]HQLX RGZLHG]DMÈFHJR3URJUDPLĂFL Xĝ\ZDMÈZ\UDĝHQLDORNDOL]DFMD ZRGQLHVLHQLXGRLQIRUPDFML RSRïRĝHQLXXĝ\WNRZQLND 2ELHNWDateQLHSU]HFKRZXMH QD]ZGQLW\JRGQLDLPLHVLÚF\ SRQLHZDĝVÈRQHUöĝQH ZSRV]F]HJöOQ\FKMÚ]\NDFK =DPLDVWWHJRXĝ\ZDF\IU\RG GRZFHOXSU]HGVWDZLHQLD GQLDW\JRGQLDRUD]RGGR ZFHOXSU]HGVWDZLHQLD PLHVLÈFD $E\Z\ĂZLHWOLÊQD]ZÚGQLD W\JRGQLDOXEPLHVLÈFD NRQLHF]QHMHVWXWZRU]HQLH WDEOLF\LSU]HFKRZ\ZDQLHZQLHM RGSRZLHGQLFKQD]Z SDWU] SU]\NïDGķ)XQNFMHPHWRG\ LRELHNW\ĵ FUNKCJE, METODY I OBIEKTY UTWORZENIE OBIEKTU DATE :RPDZLDQ\PSU]\NïDG]LH QRZ\RELHNWDateRQD]ZLH today]RVWDMHXWZRU]RQ\]D SRPRFÈIXQNFMLNRQVWUXNWRUD Date() -HĝHOLSRGF]DVWZRU]HQLD RELHNWXDateQLH]RVWDQLH SRGDQDĝDGQDGDWDWRRELHNW EÚG]LH]DZLHUDïGDWÚLJRG]LQÚ QDSRWNDQLDWHJRZLHUV]DNRGX SU]H]LQWHUSUHWHU-DYD6FULSW c03/js/date-object.js JAVASCRIPT 1 2 3 YDUWRGD\ QHZ'DWH YDU\HDU WRGD\JHW)XOO<HDU 3RXWZRU]HQLXHJ]HPSODU]D RELHNWXDate SU]HFKRZXMÈFHJRELHĝÈFÈGDWÚLJRG]LQÚ PRĝQDXĝ\ZDÊMHJRZïDĂFLZRĂFL LPHWRG YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳIRRWHUĳ HOLQQHU+70/ ĳS!&RS\ULJKW FRS\ĳ\HDUĳS!ĳ WYNIK :W\PSU]\NïDG]LHZLG]LV] Xĝ\FLHPHWRG\getFullYear() ZFHOXSREUDQLDURNXSU]HFKRZ\ZDQHJRZRELHNFLHDate :RPDZLDQ\PSU]\NïDG]LH URNZ\NRU]\VWXMHP\ZZLHUV]X LQIRUPDFMLRSUDZDFKDXWRUVNLFK FUNKCJE, METODY I OBIEKTY PRACA Z DATĄ I GODZINĄ $E\ZVND]DÊGDWÚLJRG]LQÚ PRĝQDXĝ\ÊSRQLĝV]HJR IRUPDWX .ROHMQRĂÊLVNïDGQLDNRPSRQHQWöZSU]HGVWDZLDVLÚ QDVWÚSXMÈFR <<<<00''++0066 5RN 0LHVLÈF 3RZ\ĝV]\]DSLVSU]HGVWDZLD GDWÚNZLHWQLDURNX LJRG]LQÚ ']LHñ *RG]LQD 0LQXWD 6HNXQGD F]WHU\F\IU\ ļ VW\F]HñWR ļ ļ ļ ļ ,QQ\IRUPDWGDW\MHVWQDVWÚSXMÈF\ 000''<<<<++0066 $SU -HĝHOLJRG]LQDMHVWQLHSRWU]HEQDPRĝQDMÈSRPLQÈÊ 0LOLVHNXQGD ļ JAVASCRIPT 1 2 3 c03/js/date-object-difference.js YDUWRGD\ QHZ'DWH YDU\HDU WRGD\JHW)XOO<HDU YDUHVW QHZ'DWH ĳ$SUĳ YDUGLIIHUHQFH WRGD\JHW7LPH HVWJHW7LPH GLIIHUHQFH GLIIHUHQFH YDUHO0VJ GRFXPHQWJHW(OHPHQW%\,G ĳPHVVDJHĳ HO0VJWH[W&RQWHQW 0DWKĠRRU GLIIHUHQFH ĳODWGRĂZLDGF]HQLDĳ WYNIK :RPDZLDQ\PSU]\NïDG]LH SRND]DQRXVWDZLHQLHGDW\ ]SU]HV]ïRĂFL -HĝHOLSUöEXMHV]RNUHĂOLÊ UöĝQLFÚPLÚG]\GZRPD GDWDPLZ\QLNMHVWSRGDZDQ\ ZPLOLVHNXQGDFK $E\X]\VNDÊUöĝQLFÚ Z\UDĝRQÈZGQLDFKW\JRGQLDFK OXEODWDFKRWU]\PDQÈOLF]EÚ QDOHĝ\SRG]LHOLÊSU]H]OLF]EÚ PLOLVHNXQGZGQLXW\JRGQLX OXEURNX 7XWDMZDUWRĂÊMHVWG]LHORQD SU]H]F]\OL OLF]EÚPLOLVHNXQGZURNX WRQLH MHVWURNSU]HVWÚSQ\ FUNKCJE, METODY I OBIEKTY FUNKCJE, METODY I OBIEKTY PRZYKŁAD FUNKCJE, METODY I OBIEKTY 3U]HGVWDZLRQ\WXWDMSU]\NïDGMHVWSRG]LHORQ\QD GZLHF]ÚĂFL:SLHUZV]HM]QDMGXMÈVLÚLQIRUPDFMH V]F]HJöïRZHRKRWHOXPLÚG]\LQQ\PLNRV]WZ\QDMÚFLD SRNRMXLZ\VRNRĂÊUDEDWX:GUXJLHMF]ÚĂFLSRGDQR LQIRUPDFMHRF]DVLHWUZDQLDSURPRFML &Dï\NRGMHVWXPLHV]F]RQ\ZIXQNFMLW\SX,,)( Z\NRQ\ZDQHQDW\FKPLDVW Z\UDĝHQLHIXQNFML 0DWRQDFHOX]DJZDUDQWRZDQLHĝHQD]Z\]PLHQQ\FK ZVNU\SFLHQLHEÚGÈNROLGRZDï\]QD]ZDPL]PLHQQ\FKSRFKRG]ÈF\FK ]LQQ\FKVNU\SWöZ &]ÚĂÊSLHUZV]DVNU\SWXWZRU]\RELHNWhotelZUD]]WU]HPDZïDĂFLZRĂFLDPL QD]ZDKRWHOXNRV]WZ\QDMÚFLDSRNRMXLZ\VRNRĂÊRIHURZDQHJR UDEDWX 2SUöF]WHJRRELHNW]DZLHUDPHWRGÚNWöUDREOLF]DZ\ĂZLHWODQÈ Xĝ\WNRZQLNRZLFHQÚXZ]JOÚGQLDMÈFÈUDEDW ,QIRUPDFMHV]F]HJöïRZHRUDEDFLHVÈZ\ĂZLHWODQHXĝ\WNRZQLNRZL]DSRPRFÈRELHNWXhotel$E\FHQDXZ]JOÚGQLDMÈFDUDEDWE\ïDZ\ĂZLHWODQD ZUD]]F]ÚĂFLÈG]LHVLÚWQÈ MDNPDWRPLHMVFHZZLÚNV]RĂFLSU]\SDGNöZ SRGDZDQLDFHQ ]DVWRVRZDQRPHWRGÚtoFixed()RELHNWXNumber &]ÚĂÊGUXJDVNU\SWXSRND]XMHĝHRIHUWDZ\JDĂQLHZFLÈJXGQL'RWHJR FHOXVïXĝ\IXQNFMDRQD]ZLHofferExpires()$NWXDOQLHXVWDZLRQDGDWD ZNRPSXWHU]HXĝ\WNRZQLNDMHVWSU]HND]\ZDQDMDNRDUJXPHQWIXQNFML offerExpires()REOLF]DMÈFHMGDWÚZ\JDĂQLÚFLDRIHUW\SURPRF\MQHM :HZQÈWU]IXQNFMLofferExpires()WZRU]RQ\MHVWQRZ\RELHNWDate, DGRGDW\]RVWDMHGRGDQ\FKVLHGHPGQL2ELHNWDateSU]HGVWDZLD GQLLPLHVLÈFHZSRVWDFLOLF]E SRF]ÈZV]\RG 'ODWHJRWHĝZFHOX Z\ĂZLHWOHQLDQD]Z\GQLDW\JRGQLDLPLHVLÈFD]RVWDï\XWZRU]RQHGZLH WDEOLFHSU]HFKRZXMÈFHZV]\VWNLHQD]Z\GQLW\JRGQLDLPLHVLÚF\:FKZLOL Z\ĂZLHWODQLDNRPXQLNDWXQDVWÚSXMHSREUDQLHRGSRZLHGQLHMQD]Z\GQLD W\JRGQLDLPLHVLÈFD]HZVSRPQLDQ\FKWDEOLF .RPXQLNDWZ\ĂZLHWODMÈF\GDWÚZ\JDĂQLÚFLDRIHUW\SURPRF\MQHMMHVW SU]\JRWRZ\ZDQ\Z]PLHQQHMRQD]ZLHexpiryMsg.RGZ\ZRïXMÈF\ IXQNFMÚofferExpires()LZ\ĂZLHWODMÈF\NRPXQLNDW]QDMGXMHVLÚQDNRñFX VNU\SWX:\V]XNXMHHOHPHQWZNWöU\PSRZLQLHQ]QDOHěÊVLÚNRPXQLNDWDQDVWÚSQLHXDNWXDOQLDMHJR]DZDUWRĂÊ]DSRPRFÈZïDĂFLZRĂFL innerHTMLNWöUD]RVWDQLHRPöZLRQDZUR]G]LDOH FUNKCJE, METODY I OBIEKTY PRZYKŁAD FUNKCJE, METODY I OBIEKTY c03/js/example.js JAVASCRIPT 7HQVNU\SWMHVWXPLHV]F]RQ\ZQDW\FKPLDVWZ\NRQ\ZDQ\PZ\UDĝHQLXIXQNFML FRSRPDJDZRFKURQLH]DNUHVX]PLHQQ\FK (function() { &]ÚĂÊ,8WZRU]HQLHRELHNWXKRWHORUD]Z\ĂZLHWOHQLHV]F]HJöïöZRIHUW\ 8WZRU]HQLHRELHNWXKRWHO]DSRPRFÈVNïDGQLOLWHUDïXRELHNWX var hotel = { QDPHĳ3DUNĳ URRP5DWH// :DUWRĂÊZ\UDĝRQDZ]ïRW\FK GLVFRXQW5DEDWZ\UDĝRQ\ZSURFHQWDFK offerPrice: function() { YDURIIHU5DWH WKLVURRP5DWH WKLVGLVFRXQW UHWXUQRIIHU5DWH } } :\ĂZLHWOHQLHQD]Z\KRWHOXFHQ\VWDQGDUGRZHMRUD]FHQ\VSHFMDOQHM ]XZ]JOÚGQLRQ\PUDEDWHP YDUKRWHO1DPHURRP5DWHVSHFLDO5DWH'HNODUDFMD]PLHQQ\FK KRWHO1DPH GRFXPHQWJHW(OHPHQW%\,G ĳKRWHO1DPHĳ 3REUDQLHHOHPHQWöZ URRP5DWH GRFXPHQWJHW(OHPHQW%\,G ĳURRP5DWHĳ VSHFLDO5DWH GRFXPHQWJHW(OHPHQW%\,G ĳVSHFLDO5DWHĳ KRWHO1DPHWH[W&RQWHQW KRWHOQDPH:\ĂZLHWOHQLHQD]Z\KRWHOX URRP5DWHWH[W&RQWHQW KRWHOURRP5DWHWR)L[HG ĳ]ïĳ :\ĂZLHWOHQLHFHQ\VWDQGDUGRZHM VSHFLDO5DWHWH[W&RQWHQW KRWHORIIHU3ULFH ĳ]ïĳ :\ĂZLHWOHQLHFHQ\VSHFMDOQHM]XZ]JOÚGQLRQ\PUDEDWHP *G\]DSR]QDV]VLÚ]NRPHQWDU]DPL]DPLHV]F]RQ\PLZNRG]LH]UR]XPLHV]MDNG]LDïDRPDZLDQ\ WXWDMSU]\NïDG FUNKCJE, METODY I OBIEKTY PRZYKŁAD FUNKCJE, METODY I OBIEKTY c03/js/example.js JAVASCRIPT &]ÚĂÊ,,2EOLF]HQLHLZ\ĂZLHWOHQLHV]F]HJöïöZGRW\F]ÈF\FKF]DVXWUZDQLDRIHUW\ SURPRF\MQHM YDUH[SLU\0VJ.RPXQLNDWZ\ĂZLHWODQ\Xĝ\WNRZQLNRZL YDUWRGD\%LHĝÈFDGDWD YDUHO(QGV(OHPHQWZ\ĂZLHWODMÈF\NRPXQLNDWRGDFLHZ\JDĂQLÚFLDRIHUW\SURPRF\MQHM function offerExpires(today) { =DGHNODURZDQLH]PLHQQ\FKZIXQNFMLDZLÚFPDMÈ]DNUHVORNDOQ\ YDUZHHN)URP7RGD\GD\GDWHPRQWK\HDUGD\1DPHVPRQWK1DPHV 'RGDQLHVLHGPLXGQL Z\UDĝRQ\FKZPLOLVHNXQGDFK ZHHN)URP7RGD\ QHZ'DWH WRGD\JHW7LPH 8WZRU]HQLHWDEOLFSU]HFKRZXMÈF\FKQD]Z\GQLW\JRGQLDLPLHVLÚF\ GD\1DPHV >ĳQLHG]LHOÚĳĳSRQLHG]LDïHNĳĳZWRUHNĳĳĂURGÚĳĳF]ZDUWHNĳ ĳSLÈWHNĳĳVRERWÚĳ@ PRQWK1DPHV >ĳVW\F]QLDĳĳOXWHJRĳĳPDUFDĳĳNZLHWQLDĳĳPDMDĳĳF]HUZFDĳ ĳOLSFDĳĳVLHUSQLDĳĳZU]HĂQLDĳĳSDěG]LHUQLNDĳĳOLVWRSDGDĳĳJUXGQLDĳ@ :\EöUNRPSRQHQWöZGDW\Z\ĂZLHWODQHMQDVWURQLH GD\ GD\1DPHV>ZHHN)URP7RGD\JHW'D\ @ GDWH ZHHN)URP7RGD\JHW'DWH PRQWK PRQWK1DPHV>ZHHN)URP7RGD\JHW0RQWK @ \HDU ZHHN)URP7RGD\JHW)XOO<HDU 3U]\JRWRZDQLHNRPXQLNDWX H[SLU\0VJ ĳ2IHUWDZ\JDVDZĳ H[SLU\0VJ GD\ĳEU! ĳGDWHĳĳPRQWKĳĳ\HDUĳ ĳ UHWXUQH[SLU\0VJ } WRGD\ QHZ'DWH 8PLHV]F]HQLHG]LVLHMV]HMGDW\Z]PLHQQHM HO(QGV GRFXPHQWJHW(OHPHQW%\,G ĳRIIHU(QGVĳ 3REUDQLHHOHPHQWXRIIHU(QGV HO(QGVLQQHU+70/ RIIHU([SLUHV WRGD\ :\ĂZLHWOHQLHSU]\JRWRZDQHJRNRPXQLNDWX .RQLHFQDW\FKPLDVWZ\ZRïDQHJRZ\UDĝHQLDIXQNFML ` 7HQV\PEROR]QDF]DĝHNRG SRFKRG]L]SRSU]HGQLHJRZLHUV]DLQLHZROQRWXWDMZVWDZLDÊ ]QDNXQRZHJRZLHUV]D :W\PSU]\NïDG]LHSU]HGVWDZLRQRNLONDNRQFHSFML]ZLÈ]DQ\FK]GDWÈ -HĝHOLXĝ\WNRZQLNPDXVWDZLRQÈQLHSUDZLGïRZÈGDWÚZNRPSXWHU]H EïÚGQLHG]LDïDMÈF\]HJDU WRZ\ĂZLHWORQDGDWDEÚG]LHZVND]\ZDïD VLHGHPGQLQLHRGFKZLOLREHFQHMDOHRGGDW\XVWDZLRQHMZNRPSXWHU]HXĝ\WNRZQLND FUNKCJE, METODY I OBIEKTY PODSUMOWANIE FUNKCJE, METODY I OBIEKTY f )XQNFMHSR]ZDODMÈQD]JUXSRZDQLHSRZLÈ]DQ\FK]HVREÈ SROHFHñSU]HGVWDZLDMÈF\FK]DGDQLH f )XQNFMHPRJÈSRELHUDÊSDUDPHWU\ LQIRUPDFMHZ\PDJDQH GRZ\NRQDQLD]DGDQLD RUD]]ZUDFDÊZDUWRĂÊ f 2ELHNWWRVHULD]PLHQQ\FKLIXQNFMLSU]HGVWDZLDMÈF\FKU]HF] SRFKRG]ÈFÈ]HĂZLDWDU]HF]\ZLVWHJR f :RELHNFLH]PLHQQHVÈQD]\ZDQHZïDĂFLZRĂFLDPLRELHNWX QDWRPLDVWIXQNFMHWRPHWRG\RELHNWX f 3U]HJOÈGDUNLLQWHUQHWRZHLPSOHPHQWXMÈRELHNW\ SU]HGVWDZLDMÈFH]DUöZQRRNQRSU]HJOÈGDUNLMDNLZF]\WDQ\ ZQLPGRNXPHQW f -DYD6FULSWPDZLHOHZEXGRZDQ\FKRELHNWöZWDNLFKMDN String, Number, MathLDate,FKZïDĂFLZRĂFLLPHWRG\RIHUXMÈ IXQNFMRQDOQRĂÊNWöUDPRĝHSRPöFZWZRU]HQLXVNU\SWöZ f 7DEOLFHLRELHNW\PRJÈE\ÊXĝ\ZDQHZFHOXWZRU]HQLD VNRPSOLNRZDQ\FK]ELRUöZGDQ\FK REDW\S\PRJÈ]DZLHUDÊVLÚ QDZ]DMHP FUNKCJE, METODY I OBIEKTY 4 DECYZJE I PĘTLE 3DWU]ÈFQDGLDJUDP\ ]ïRĝRQ\FKVNU\SWöZ ïDWZRGRVWU]HF ĝHNRGPRĝHE\ÊZ\NRQ\ZDQ\QDZLHOHVSRVREöZ2]QDF]D WRĝHSU]HJOÈGDUNDLQWHUQHWRZDZ\NRQXMHUöĝQHIUDJPHQW\ NRGXZ]DOHĝQRĂFLRGV\WXDFML:W\PUR]G]LDOHGRZLHV] VLÚMDNNRQWURORZDÊSU]HSï\ZGDQ\FKZVNU\SWDFKDE\W\P VDP\P]DSHZQLÊLPPRĝOLZRĂÊREVïXJLUöĝQ\FKV\WXDFML =DFKRZDQLHVNU\SWöZ]D]Z\F]DMSRZLQQRE\ÊX]DOHĝQLRQHRGVSRVREXZMDNLXĝ\WNRZQLN NRU]\VWD]HVWURQ\LQWHUQHWRZHMOXERNQDSU]HJOÈGDUNL:FHOXRNUHĂOHQLDVWRVRZDQHJR SRGHMĂFLDSURJUDPLĂFL]Z\NOHRSLHUDMÈVLÚQDWU]HFKQDVWÚSXMÈF\FKNRQFHSFMDFK 152 OCENA DECYZJE PĘTLE :DUWRĂFLZVNU\SFLHPRĝQD SU]HDQDOL]RZDÊLXVWDOLÊF]\ VÈ]JRGQH]RF]HNLZDQLDPL 1DSRGVWDZLHZ\QLNXRFHQ\ PRĝQDSRGMÈÊGHF\]MHRVSRVRELHZ\NRQDQLDVNU\SWX ,VWQLHMHZLHOHV\WXDFML ZNWöU\FK]DFKRG]LSRWU]HED NROHMQHJRZ\NRQDQLDW\FK VDP\FKNURNöZ '(&<=-(,3}7/( '(&<=-(,3}7/( 153 PODEJMOWANIE DECYZJI :VNU\SFLH]UHJXï\]QDMGXMHVLÚZLHOHPLHMVFZNWöU\FKSRGHMPRZDQHVÈ GHF\]MHZSï\ZDMÈFHQDZ\NRQ\ZDQHQDVWÚSQLHZLHUV]HNRGX 'LDJUDP\PRJÈSRPöFZ]DSODQRZDQLXZVSRPQLDQ\FKPLHMVF 1DSU]HGVWDZLRQ\PGLDJUDPLHURPEZVND]XMH SXQNWZNWöU\PWU]HEDSRGMÈÊGHF\]MÚDNRG PRĝHSRGÈĝDÊW\ONRMHGQÈ]GZöFKGRVWÚSQ\FK ĂFLHĝHN.DĝGD]HĂFLHĝHNVNïDGDVLÚ]UöĝQHJR ]HVWDZX]DGDñFRR]QDF]DNRQLHF]QRĂÊSU]\JRWRZDQLDNRGXGODREXV\WXDFML N :FHOXRNUHĂOHQLDĂFLHĝNLNRGXGRZ\NRQDQLD QDOHĝ\]GHğQLRZDÊwarunek1DSU]\NïDGPRĝQD VSUDZG]LÊZDUWRĂÊMHGQHM]PLHQQHMZ]JOÚGHPLQQHM ķZLÚNV]DQLĝĵķUöZQDĵķPQLHMV]DQLĝĵ -HĝHOL ZDUXQHNSU]\MPXMHZDUWRĂÊtrueWRZ\ELHUDQD MHVWMHGQDĂFLHĝNDNRGXQDWRPLDVWZDUWRĂÊfalse R]QDF]DZ\EöULQQHMĂFLHĝNLNRGX Czy wynik testu jest większy niż 50? Komunikat: Spróbuj ponownie… T Komunikat: Zaliczyłeś! KONTYNUACJA SKRYPTU 3R]DRSHUDWRUDPLSU]HSURZDG]DMÈF\PLSRGVWDZRZHRSHUDFMHPDWHPDW\F]QHOXEïÈF]ÈF\PLGZD FLÈJLWHNVWRZHLVWQLHMÈMHV]F]Hoperatory porównaniaNWöUHSR]ZDODMÈQDSRUöZQ\ZDQLHZDUWRĂFL LVSUDZG]DQLHF]\ZDUXQHN]RVWDïVSHïQLRQ\ 154 '(&<=-(,3}7/( 'RRSHUDWRUöZSRUöZQDQLD]DOLF]DP\ķZLÚNV]\ QLĝĵ > ķPQLHMV]\QLĝĵ < LUöZQRĂFL == 2VWDWQL ]QLFKWRGZD]QDNLUöZQRĂFLĽRSHUDWRUVSUDZG]DF]\ZDUWRĂFLVÈWDNLHVDPH OCENA WARUNKU I POLECEŃ WARUNKOWYCH 0DP\GZDVNïDGQLNLSRGF]DVSRGHMPRZDQLDGHF\]ML 2FHQLDQHZ\UDĝHQLHNWöUH]ZUDFDZDUWRĂÊ 3ROHFHQLHZDUXQNRZHZVND]XMÈFHG]LDïDQLHSRGHMPRZDQH ZGDQHMV\WXDFML OCENA WARUNKU POLECENIA WARUNKOWE :FHOXSRGMÚFLDGHF\]MLNRGVSUDZG]DELHĝÈF\ VWDQVNU\SWX1DMF]ÚĂFLHMRGE\ZDVLÚWRSU]H] SRUöZQDQLHGZöFKZDUWRĂFL]DSRPRFÈRSHUDWRUD SRUöZQDQLDNWöUHJRZDUWRĂFLÈ]ZURWQÈMHVWtrue OXEfalse 3ROHFHQLHZDUXQNRZHMHVWRSDUWHQDNRQFHSFML SROHFHñif/then/else-HĝHOL if ZDUXQHN]RVWDï VSHïQLRQ\WR then NRGZ\NRQXMHSROHFHQLH SROHFHQLD ZSU]HFLZQ\PUD]LH else NRG Z\NRQXMHFRĂ]XSHïQLHLQQHJR OXEWHĝ]XSHïQLH SRPLMDNURN WARUNEK DZIAŁANIE KODU if (score > 50) { -HĝHOLZDUXQHN]ZUöFLZDUWRĂÊtrue GRFXPHQWZULWH ĳ=DOLF]\ïHĂĳ Z\NRQDQH]RVWDQÈSROHFHQLDXMÚWH ZpierwszymQDZLDVLHNODPURZ\P } else { ZSU]HFLZQ\PUD]LH GRFXPHQWZULWH ĳ6SUöEXMSRQRZQLHĳ Z\NRQDQH]RVWDQÈSROHFHQLDXMÚWH ZdrugimQDZLDVLHNODPURZ\P } ,VWQLHMHPRĝOLZRĂÊ]DVWRVRZDQLDZLHOXZDUXQNöZ SU]H]LFKSRïÈF]HQLH]DSRPRFÈGZöFKOXEZLÚFHM RSHUDWRUöZSRUöZQDQLD1DSU]\NïDGPRĝQD VSUDZG]LÊF]\VSHïQLRQH]RVWDï\REDZDUXQNLOXE W\ONRMHGHQ]NLONX]GHğQLRZDQ\FK :SRGUR]G]LDOHķ:DUWRĂFLWUXWK\LIDOV\ĵ SR]QDV]ZDUWRĂFLtruthyLfalsyĽVÈ RQHWUDNWRZDQHMDNRtrueLfalse 1DNROHMQ\FKNLONXVWURQDFKSR]QDV]UöĝQH RGPLDQ\SROHFHñifDWDNĝHSROHFHQLHRQD]ZLH switch:V]\VWNLHUD]HPVÈRNUHĂODQHPLDQHP SROHFHñZDUXQNRZ\FK '(&<=-(,3}7/( 155 OPERATORY PORÓWNANIA — OCENA WARUNKÓW 6\WXDFMÚPRĝQDRFHQLÊSU]H]SRUöZQDQLHZDUWRĂFLZVNU\SFLH]RF]HNLZDQÈ :\QLNLHPEÚG]LHZDUWRĂÊERRORZVNDtrueOXEfalse == (RÓWNY Z) (RÓŻNY) 7HQRSHUDWRUSRUöZQXMHGZLHZDUWRĂFL OLF]E\ FLÈJLWHNVWRZHZDUWRĂFLERRORZVNLH LVSUDZG]D F]\VÈWDNLHVDPH 7HQRSHUDWRUSRUöZQXMHGZLHZDUWRĂFL OLF]E\ FLÈJLWHNVWRZHZDUWRĂFLERRORZVNLH LVSUDZG]D F]\VÈUöĝQH :\QLNLHPSRUöZQDQLD’Witaj’ == ĳ¿HJQDMĳ MHVW IDOVHSRQLHZDĝZDUWRĂFLnieSU]HGVWDZLDMÈWHJR VDPHJRFLÈJXWHNVWRZHJR :\QLNLHPSRUöZQDQLD ’Witaj’ != ĳ¿HJQDMĳ MHVW WUXHSRQLHZDĝZDUWRĂFLnieSU]HGVWDZLDMÈWHJR VDPHJRFLÈJXWHNVWRZHJR :\QLNLHPSRUöZQDQLD ’Witaj’ == ’Witaj’ MHVW WUXHSRQLHZDĝRELHZDUWRĂFLSU]HGVWDZLDMÈWHQ VDPFLÈJWHNVWRZ\ :\QLNLHPSRUöZQDQLD ’Witaj’ != ’Witaj’ MHVW IDOVHSRQLHZDĝRELHZDUWRĂFLSU]HGVWDZLDMÈWHQ VDPFLÈJWHNVWRZ\ =Z\NOHSUHIHURZDQHMHVWXĝ\FLHPHWRG\ĂFLVïHM =Z\NOHSUHIHURZDQHMHVWXĝ\FLHPHWRG\ĂFLVïHM === (IDENTYCZNY Z) (NIEIDENTYCZNY Z) 7HQRSHUDWRUSRUöZQXMHGZLHZDUWRĂFLLVSUDZG]D F]\]DUöZQRZDUWRĂFLMDNLW\S\GDQ\FKVÈWDNLH VDPH 7HQRSHUDWRUSRUöZQXMHGZLHZDUWRĂFLLVSUDZG]D F]\]DUöZQRZDUWRĂÊMDNLW\SGDQ\FKnieVÈWDNLH VDPH :\QLNLHPSRUöZQDQLD’3’ === 3 MHVW IDOVH SRQLHZDĝSRUöZQ\ZDQHZDUWRĂFLnieVÈWHJR VDPHJRW\SX :\QLNLHPSRUöZQDQLD ’3’ !== 3 MHVW WUXH SRQLHZDĝSRUöZQ\ZDQHZDUWRĂFLnieVÈGDQ\PL WHJRVDPHJRW\SX :\QLNLHPSRUöZQDQLD’3’ === ’3’ MHVW WUXH SRQLHZDĝSRUöZQ\ZDQHZDUWRĂFLVÈWHJRVDPHJR W\SXGDQ\FK :\QLNLHPSRUöZQDQLD’3’ !== ’3’ MHVW IDOVH SRQLHZDĝSRUöZQ\ZDQHZDUWRĂFLVÈGDQ\PLWHJR VDPHJRW\SX 156 '(&<=-(,3}7/( !== =DGDQLHWHVWRZDQLDOXEVSUDZG]DQLDZDUXQNXSURJUDPLĂFL]Z\NOHRNUHĂODMÈPLDQHPoszacowania ZDUXQNX6SUDZG]DQHZDUXQNLPRJÈE\Ê]QDF]QLH EDUG]LHMVNRPSOLNRZDQHQLĝSU]HGVWDZLRQHWXWDM DOHZ\QLNLHPRSHUDFML]Z\NOHMHVWZDUWRĂÊtrue OXEfalse ,VWQLHMÈGZDZ\MÈWNLQDNWöUHZDUWR]ZUöFLÊ XZDJÚ L .DĝGDZDUWRĂÊPRĝHE\ÊpotraktowanaMDNR trueOXEfalseQDZHWMHĂOLQLHMHVWZDUWRĂFLÈ ERRORZVNÈĽSDWU]SRGUR]G]LDïķ:DUWRĂFLWUXWK\ LIDOV\ĵ LL :NUöWNLPRV]DFRZDQLXZDUXQHNQLHPXVLE\Ê VSUDZG]DQ\ĽSDWU]SRGUR]G]LDïķ3U]HUZDQLH REOLF]DQLDZDUWRĂFLĵ (WIĘKSZY NIŻ) > (MNIEJSZY NIŻ) 7HQRSHUDWRUVSUDZG]DF]\OLF]EDSROHZHMVWURQLH MHVWZLÚNV]DQLĝOLF]EDSRSUDZHMVWURQLH 7HQRSHUDWRUVSUDZG]DF]\OLF]EDSROHZHMVWURQLH MHVWPQLHMV]DQLĝOLF]EDSRSUDZHMVWURQLH :\QLNLHPSRUöZQDQLD 4 > 3 MHVW WUXH :\QLNLHPSRUöZQDQLD 4 < 3 MHVW IDOVH :\QLNLHPSRUöZQDQLD 3 < 4 MHVW IDOVH :\QLNLHPSRUöZQDQLD 3 < 4 MHVW WUXH >= < <= (WIĘKSZY NIŻ LUB RÓWNY) (MNIEJSZY NIŻ LUB RÓWNY) 7HQRSHUDWRUVSUDZG]DF]\OLF]EDSROHZHMVWURQLH MHVWZLÚNV]DQLĝOXEUöZQDOLF]ELHSRSUDZHM VWURQLH 7HQRSHUDWRUVSUDZG]DF]\OLF]EDSROHZHMVWURQLH MHVWPQLHMV]DQLĝOXEUöZQDOLF]ELHSRSUDZHM VWURQLH :\QLNLHPSRUöZQDQLD 4 >= 3 MHVW WUXH :\QLNLHPSRUöZQDQLD 4 <= 3 MHVW IDOVH :\QLNLHPSRUöZQDQLD 3 <= 4 MHVW IDOVH :\QLNLHPSRUöZQDQLD 3 <= 4 MHVW WUXH :\QLNLHPSRUöZQDQLD 3 >= 3 MHVW WUXH :\QLNLHPSRUöZQDQLD 3 <= 3 MHVW WUXH '(&<=-(,3}7/( 157 STRUKTURA OPERATORÓW PORÓWNANIA 3UDNW\F]QLHZNDĝG\PZDUXQNXVÈMHGHQRSHUDWRULGZDRSHUDQG\ XPLHV]F]RQHSRREXVWURQDFKRSHUDWRUD2SHUDQGDPLPRJÈE\ÊZDUWRĂFL OXE]PLHQQH&]ÚVWRPRĝQDVSRWNDÊVLÚ]Z\UDĝHQLDPLXMÚW\PLZQDZLDV NAWIAS OBEJMUJĄCY WYRAŻENIE (score >= pass) OPERAND OPERATOR PORÓWNANIA -HĝHOLSRZUöFLV]SDPLÚFLÈGRUR]G]LDïX SU]\SRPQLV]VRELHĝHSRZ\ĝHMPDP\SU]\NïDG Z\UDĝHQLDSRQLHZDĝMHJRZ\QLNLHPMHVWSRMHG\QF]DZDUWRĂÊ:RPDZLDQ\PSU]\NïDG]LHEÚG]LH WRtrueOXEfalse 158 '(&<=-(,3}7/( OPERAND 1DZLDVREHMPXMÈF\Z\UDĝHQLHMHVWEDUG]RZDĝQ\ JG\WRZ\UDĝHQLHMHVWXĝ\ZDQHZFKDUDNWHU]H ZDUXQNXZRSHUDWRU]HSRUöZQDQLD1DWRPLDVW SRGF]DVSU]\SLV\ZDQLDZDUWRĂFL]PLHQQHMQLHPD NRQLHF]QRĂFLVWRVRZDQLDQDZLDVX SDWU]VWURQD SRSUDZHM UŻYCIE OPERATORÓW PORÓWNANIA JAVASCRIPT c04/js/comparison-operator.js YDUSDVV // Minimalna liczba punktów ]DOLF]DMÈF\FKWHVW YDUVFRUH :\QLNWHVWX 6SUDZG]HQLHF]\Xĝ\WNRZQLN]DOLF]\ïWHVW YDUKDV3DVVHG VFRUH! SDVV :\ĂZLHWOHQLHRGSRZLHGQLHJRNRPXQLNDWXQDVWURQLH YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW ĳ7HVW]DOLF]RQ\ĳKDV3DVVHG WYNIK 1DQDMQLĝV]\PSR]LRPLHGZLH ]PLHQQHPRĝQDVSUDZG]LÊ]D SRPRFÈRSHUDWRUDSRUöZQDQLD NWöU\]ZUDFDZDUWRĂÊtrueOXE false :RPDZLDQ\PSU]\NïDG]LH Xĝ\WNRZQLNUR]ZLÈ]XMHWHVW DVNU\SWLQIRUPXMHF]\WHVW ]RVWDï]DOLF]RQ\ 1DSRF]ÈWNXNRGX]RVWDMÈ ]GHğQLRZDQHGZLH]PLHQQH 1. passSU]HFKRZXMHZDUWRĂÊ ZVND]XMÈFÈPLQLPDOQÈ OLF]EÚSXQNWöZ]DOLF]DMÈFÈ WHVW 2. scoreSU]HFKRZXMHZ\QLN RVLÈJQLÚW\SU]H]Xĝ\WNRZQLND :NRG]LHSU]HSURZDG]DQD MHVWRSHUDFMDVSUDZG]HQLD F]\ZDUWRĂÊ]PLHQQHMscore MHVWZLÚNV]DOXEUöZQDpass :\QLNLHPEÚG]LHZDUWRĂÊ trueOXEfalseSU]HFKRZ\ZDQDZ]PLHQQHMRQD]ZLH hasPassed:NROHMQ\PZLHUV]X NRGXZ\QLNWHVWX]RVWDMH Z\ĂZLHWORQ\QDHNUDQLH 2VWDWQLHGZDZLHUV]HSRZRGXMÈ Z\EöUHOHPHQWXNWöUHJRZDUWRĂFLÈDWU\EXWXidMHVWanswer DQDVWÚSQLHXDNWXDOQLDMÈMHJR ]DZDUWRĂÊ:LÚFHMLQIRUPDFML QDWHPDWWHMWHFKQLNL]QDMG]LHV] ZQDVWÚSQ\PUR]G]LDOH '(&<=-(,3}7/( 159 UŻYCIE WYRAŻEŃ WRAZ Z OPERATORAMI PORÓWNANIA 2SHUDQGQLHPXVLE\ÊSRMHG\QF]ÈZDUWRĂFLÈOXEQD]ZÈ]PLHQQHM 2SHUDQGPRĝHE\ÊUöZQLHĝZ\UDĝHQLHPSRQLHZDĝNDĝGHZ\UDĝHQLH GDMHZZ\QLNXSRMHG\QF]ÈZDUWRĂÊ NAWIAS OBEJMUJĄCY WYRAŻENIE ((score1 + score2) > (highScore1 + highScore2)) OPERAND 160 '(&<=-(,3}7/( OPERATOR PORÓWNANIA OPERAND PORÓWNANIE DWÓCH WYRAŻEŃ :SRQLĝV]\PSU]\NïDG]LH PDP\QLHFRZLÚFHMZDUWRĂFL GRVSUDZG]HQLD.RGVSUDZG]D F]\Xĝ\WNRZQLNX]\VNDïQRZ\ UHNRUGLF]\SRELïW\PVDP\P SRSU]HGQL 1DSRF]ÈWNXVNU\SWXPDP\GHNODUDFMH]PLHQQ\FKSU]HFKRZXMÈF\FKZ\QLNLRVLÈJQLÚWHSU]H] Xĝ\WNRZQLNDZSRV]F]HJöOQ\FK JAVASCRIPT UXQGDFK1DVWÚSQLHQDMZ\ĝV]\ Z\QLNUXQG\MHVWSU]HFKRZ\ZDQ\ZRGG]LHOQHM]PLHQQHM 2SHUDWRUSRUöZQDQLDVSUDZG]D F]\ïÈF]Q\Z\QLNX]\VNDQ\ SU]H]Xĝ\WNRZQLNDMHVWZLÚNV]\ QLĝQDMZLÚNV]\GRWÈGDZ\QLN SRUöZQDQLDMHVWXPLHV]F]DQ\ Z]PLHQQHMRQD]ZLH comparison :RSHUDWRU]HSRUöZQDQLD RSHUDQGSROHZHMVWURQLHREOLF]D FDïNRZLW\Z\QLNX]\VNDQ\SU]H] Xĝ\WNRZQLND=NROHLRSHUDQGSR SUDZHMVWURQLHïÈF]\QDMZ\ĝV]H Z\QLNLZSRV]F]HJöOQ\FK UXQGDFK:\QLNSRUöZQDQLD MHVWQDVWÚSQLHZ\ĂZLHWODQ\ QDVWURQLH c04/js/comparison-operator-continued.js YDUVFRUH :\QLNUXQG\ YDUVFRUH :\QLNUXQG\ YDUKLJK6FRUH 1DMZ\ĝV]\Z\QLNUXQG\ YDUKLJK6FRUH 1DMZ\ĝV]\Z\QLNUXQG\ 6SUDZG]HQLHF]\ïÈF]Q\Z\QLNMHVWZLÚNV]\RGDNWXDOQLHQDMOHSV]\FKZ\QLNöZ YDUFRPSDULVRQ VFRUHVFRUH ! KLJK6FRUHKLJK6FRUH :\ĂZLHWOHQLHRGSRZLHGQLHJRNRPXQLNDWXQDVWURQLH YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW ĳ1RZ\QDMZ\ĝV]\Z\QLNĳFRPSDULVRQ WYNIK 3RGF]DVSU]\SLV\ZDQLD]PLHQQHMZ\QLNXSRUöZQDQLDQLH MHVWNRQLHF]QHXĝ\FLHQDZLDVX Z\ĂZLHWORQ\ZNRORU]HELDï\P QDVWURQLHSROHZHM 1LHNWöU]\SURJUDPLĂFLLWDN LFKXĝ\ZDMÈDE\ZVND]DÊĝH Z\QLNLHPGDQHJRNRGXEÚG]LH SRMHG\QF]DZDUWRĂÊ,QQL SURJUDPLĂFLXĝ\ZDMÈQDZLDVX REHMPXMÈFHJRW\ONRZWHG\JG\ VWDQRZLRQF]ÚĂÊZ\UDĝHQLD '(&<=-(,3}7/( 161 OPERATORY LOGICZNE :\QLNLHPG]LDïDQLDRSHUDWRUöZSRUöZQDQLD]Z\NOHMHVWSRMHG\QF]DZDUWRĂÊ WUXHOXEIDOVH2SHUDWRU\ORJLF]QHSR]ZDODMÈQDSRUöZQ\ZDQLHZ\QLNöZ G]LDïDQLDFRQDMPQLHMGZöFKRSHUDWRUöZSRUöZQDQLD &]\Z\QLNLHPREXZ\UDĝHñMHVW WUXH? IDOVH WYRAŻENIE 3 ((5 < 2) && (2 >= 3)) WYRAŻENIE 1 OPERATOR LOGICZNY &]\SLÚÊMHVWPQLHMV]HQLĝGZD" IDOVH :SRZ\ĝV]\PZLHUV]XNRGX]QDMGXMÈVLÚWU]\ Z\UDĝHQLDDZDUWRĂFLÈNDĝGHJR]QLFKMHVW WUXH OXE IDOVH :\UDĝHQLDSROHZHMLSUDZHMVWURQLHXĝ\ZDMÈ RSHUDWRUöZSRUöZQDQLDDZ\QLNLHPREXMHVW IDOVH 162 '(&<=-(,3}7/( WYRAŻENIE 2 &]\GZDMHVWZLÚNV]HQLĝOXEUöZQHWU]\" IDOVH 7U]HFLHZ\UDĝHQLHXĝ\ZDRSHUDWRUDORJLF]QHJR DQLHSRUöZQDQLD2SHUDWRUORJLF]Q\$1'VSUDZG]DF]\REDZ\UDĝHQLDSRMHJROHZHMLSUDZHM VWURQLH]ZUDFDMÈZDUWRĂÊ WUXH:RPDZLDQ\P SU]\SDGNXWDNQLHMHVWLGODWHJRZDUWRĂFLÈ RSHUDWRUDORJLF]QHJRMHVW IDOVH && || LOGICZNE AND LOGICZNE OR LOGICZNE NOT 7HQRSHUDWRUVSUDZG]DFR QDMPQLHMGZDZDUXQNL 7HQRSHUDWRUVSUDZG]DFR QDMPQLHMMHGHQZDUXQHN 7HQRSHUDWRUSRELHUDSRMHG\QF]ÈZDUWRĂÊERRORZVNÈ LRGZUDFDMÈ ((2 < 5) && (3 >= 2)) ((2 < 5) || (2 < 1)) ( < 1)2 3RZ\ĝV]HZ\UDĝHQLH]ZUDFD ZDUWRĂÊWUXH 3RZ\ĝV]HZ\UDĝHQLH]ZUDFD ZDUWRĂÊ WUXH 3RZ\ĝV]HZ\UDĝHQLH]ZUDFD ZDUWRĂÊWUXH -HĝHOLREDZ\UDĝHQLD]ZUDFDMÈ ZDUWRĂÊ WUXHWRZDUWRĂFLÈ FDïHJRZ\UDĝHQLDUöZQLHĝ EÚG]LH WUXH-HĝHOLFKRÊMHGQR Z\UDĝHQLH]ZUöFL IDOVHWRFDïH Z\UDĝHQLHWDNĝH]ZUöFL IDOVH -HĝHOLNWöUHNROZLHNZ\UDĝHQLH ]ZUDFDZDUWRĂÊ WUXHWR ZDUWRĂFLÈFDïHJRZ\UDĝHQLD UöZQLHĝEÚG]LH WUXH-HĝHOLRED Z\UDĝHQLD]ZUDFDMÈ IDOVHWR FDïHZ\UDĝHQLHWDNĝH]ZUöFL IDOVH ']LDïDQLHRSHUDWRUDSROHJDQD RGZUöFHQLXVWDQXZ\UDĝHQLD -HĝHOLMHJRZ\QLNLHPE\ïD ZDUWRĂÊIDOVH EH]]QDNXQD SRF]ÈWNXZ\UDĝHQLD WRRVWDWHF]QLH]ZUöFLWUXH1DWRPLDVW MHĂOLZ\QLNLHPZ\UDĝHQLDE\ïD ZDUWRĂÊIDOVH]ZUöFLWUXH WUXH WUXH IDOVH IDOVH && && && && WUXH zwraca WUXH IDOVH zwraca IDOVH WUXH zwraca IDOVH IDOVH zwraca IDOVH WUXH WUXH IDOVH IDOVH || || || || WUXH zwraca WUXH IDOVH zwraca WUXH WUXH zwraca WUXH IDOVH zwraca IDOVH WUXH zwraca IDOVH IDOVH zwraca WUXH SZYBKA OCENA :\UDĝHQLDORJLF]QHVÈRFHQLDQH RGOHZHMGRSUDZHMVWURQ\ -HĝHOLSLHUZV]\ZDUXQHNPRĝH GRVWDUF]\ÊZ\VWDUF]DMÈFHM LORĂFLLQIRUPDFMLDE\X]\VNDÊ RGSRZLHGěWRQLHMHVWNRQLHF]QHSU]HSURZDG]DQLHRFHQ\ GUXJLHJRZ\UDĝHQLD IDOVH && FRNROZLHN ^ ]QDOH]LRQRZDUWRĂÊIDOVH WUXH || FRNROZLHN ^ ]QDOH]LRQRZDUWRĂÊWUXH 1LHWU]HEDVSUDZG]DÊZDUWRĂFL GUXJLHJRZDUXQNXSRQLHZDĝ REDQLHEÚGÈMXĝPLDï\ZDUWRĂFL WUXH 1LHWU]HEDVSUDZG]DÊZDUWRĂFL GUXJLHJRZDUXQNXSRQLHZDĝ FRQDMPQLHMMHGHQPDZDUWRĂÊ WUXH '(&<=-(,3}7/( 163 UŻYCIE LOGICZNEGO AND :SRQLĝV]\PSU]\NïDG]LH WHVWPDWHPDW\F]Q\VNïDGDVLÚ ]GZöFKUXQG'ODNDĝGHMUXQG\ LVWQLHMÈGZLH]PLHQQH-HGQD SU]HFKRZXMHOLF]EÚSXQNWöZ ]GRE\W\FKSU]H]Xĝ\WNRZQLND ZWHMUXQG]LHQDWRPLDVWGUXJD ZVND]XMHPLQLPDOQÈOLF]EÚ SXQNWöZ]DOLF]DMÈF\FKWÚUXQGÚ /RJLF]QH$1'MHVWXĝ\ZDQH GRVSUDZG]HQLDF]\ZDUWRĂÊ X]\VNDQDSU]H]Xĝ\WNRZQLND MHVWZLÚNV]DOXEUöZQDZDUWRĂFL ]DOLF]DMÈFHMZREXUXQGDFK WHVWX:\QLNMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLH passBoth c04/js/logical-and.js 1DNRñFXMHVWZ\ĂZLHWODQ\ NRPXQLNDWLQIRUPXMÈF\ Xĝ\WNRZQLNDRZ\QLNXWHVWX JAVASCRIPT YDUVFRUH :\QLNUXQG\ YDUVFRUH :\QLNUXQG\ YDUSDVV :DUWRĂÊ]DOLF]DMÈFDGODUXQG\ YDUSDVV :DUWRĂÊ]DOLF]DMÈFDGODUXQG\ 6SUDZG]HQLHF]\Xĝ\WNRZQLN]DOLF]\ïRELHUXQG\:\QLN]RVWDMHXPLHV]F]RQ\ Z]PLHQQHM YDUSDVV%RWK VFRUH! SDVV VFRUH! SDVV 8WZRU]HQLHNRPXQLNDWX YDUPVJ ĳ=DOLF]HQLHREXUXQGĳSDVV%RWK :\ĂZLHWOHQLHNRPXQLNDWXQDVWURQLH YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW PVJ 1DSUDZGÚEDUG]RU]DGNRZ\VWÚSXMHSRWU]HEDZ\ĂZLHWODQLD ZDUWRĂFLERRORZVNLHMQDVWURQLH MDNWRG]LHMHVLÚZRPDZLDQ\PSU]\NïDG]LH :GDOV]HM F]ÚĂFLUR]G]LDïX]REDF]\V]ĝH ]UHJXï\VSUDZG]DV]ZDUXQHN DQDVWÚSQLHQDSRGVWDZLH Z\QLNXVSUDZG]HQLDZ\NRQXMHV]RGSRZLHGQLHSROHFHQLD 164 '(&<=-(,3}7/( WYNIK UŻYCIE LOGICZNEGO OR I NOT 3RQLĝHMSU]HGVWDZLRQRWHQVDP WHVWDOHW\PUD]HPRSDUW\QD ORJLF]Q\PRSHUDWRU]H25ZFHOX XVWDOHQLDF]\Xĝ\WNRZQLN ]DOLF]\ïFRQDMPQLHMMHGQÈ ]GZöFKUXQG-HĝHOL]DOLF]RQD ]RVWDïDMHGQDUXQGDQLHWU]HED SRQRZQLHSRGFKRG]LÊGRWHVWX 6SöMU]QDOLF]E\SU]HFKRZ\ZDQHZF]WHUHFK]PLHQQ\FK QDSRF]ÈWNXSU]\NïDGX 8ĝ\WNRZQLN]DOLF]\ïRELH UXQG\DZLÚF]PLHQQDminPass EÚG]LHSU]HFKRZ\ZDïDZDUWRĂÊ ERRORZVNÈtrue JAVASCRIPT .RPXQLNDWZ\ĂZLHWODQ\QD VWURQLH]QDMGXMHVLÚZ]PLHQQHM RQD]ZLHmsg1DNRñFX NRPXQLNDWXORJLF]Q\RSHUDWRU 127RGZUöFL]PLHQQÈERRORZVNÈDZLÚFMHMZDUWRĂFLÈEÚG]LH false7DZDUWRĂÊ]RVWDQLH Z\ĂZLHWORQDQDVWURQLH c04/js/logical-or-logical-not.js YDUVFRUH :\QLNUXQG\ YDUVFRUH :\QLNUXQG\ YDUSDVV :DUWRĂÊ]DOLF]DMÈFDGODUXQG\ YDUSDVV :DUWRĂÊ]DOLF]DMÈFDGODUXQG\ 6SUDZG]HQLHF]\Xĝ\WNRZQLN]DOLF]\ïRELHUXQG\:\QLN]RVWDMHXPLHV]F]RQ\ Z]PLHQQHM YDUPLQ3DVV VFRUH! SDVV __ VFRUH! SDVV 8WZRU]HQLHNRPXQLNDWX YDUPVJ ĳ.RQLHF]QHSRZWöU]HQLHWHVWXĳ PLQ3DVV :\ĂZLHWOHQLHNRPXQLNDWXQDVWURQLH YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW PVJ WYNIK '(&<=-(,3}7/( 165 POLECENIE IF 3ROHFHQLHifGRNRQXMHRFHQ\ZDUXQNX VSUDZG]DJR -HĝHOLZDUWRĂFLÈ ZDUXQNXEÚG]LHWUXHWRQDVWÈSLZ\NRQDQLHSROHFHñ]QDMGXMÈF\FKVLÚ ZEORNXNRGX]GHğQLRZDQ\PWXĝSRSROHFHQLXif WARUNEK SŁOWO KLUCZOWE OTWIERAJĄCY NAWIAS KLAMROWY if (score >= 50) { FRQJUDWXODWH } KOD DO WYKONANIA, JEŚLI WARTOŚCIĄ POLECENIA IF JEST TRUE ZAMYKAJĄCY NAWIAS KLAMROWY -HĝHOLZDUWRĂFLÈZDUXQNXEÚG]LH WUXHWRQDVWÈSL Z\NRQDQLHEORNXNRGX]QDMGXMÈFHJRVLÚSRQLĝHM F]\OLXMÚWHJRZSLHUZV]\QDZLDVNODPURZ\SR SROHFHQLXif 166 '(&<=-(,3}7/( 1DWRPLDVWMHĂOLZDUWRĂFLÈZDUXQNXEÚG]LH IDOVH WRSROHFHQLDZEORNXNRGXnieEÚGÈZ\NRQDQH 6NU\SWEÚG]LHNRQW\QXRZDïG]LDïDQLHGRSROHFHQLD ]QDMGXMÈFHJRVLÚWXĝSREORNXNRGX UŻYCIE POLECENIA IF c04/js/if-statement.js JAVASCRIPT YDUVFRUH :\QLN YDUPVJ.RPXQLNDW if (score >= 50) { -HĝHOLZ\QLNZ\QRVLOXE ZLÚFHM PVJ ĳ*UDWXODFMHĳ PVJ ĳ3U]HFKRG]LV]GRNROHMQHMUXQG\ĳ } YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW PVJ WYNIK :SU]HGVWDZLRQ\PSU]\NïDG]LH SROHFHQLHifVSUDZG]DF]\ DNWXDOQDZDUWRĂÊ]PLHQQHM RQD]ZLHscoreZ\QRVL50OXE ZLÚFHM :RPDZLDQ\PSU]\SDGNXSROHFHQLHSU]\MPXMHZDUWRĂÊtrue SRQLHZDĝZ\QLNWR75F]\OL MHVWZLÚNV]\RG50'ODWHJRWHĝ QDVWÚSXMHZ\NRQDQLHSROHFHñ ]QDMGXMÈF\FKVLÚZEORNXNRGX SU]\JRWRZDQLHNRPXQLNDWX ]JUDWXODFMDPLGODXĝ\WNRZQLND RUD]SRLQIRUPRZDQLHJRĝH SU]HFKRG]LGRNROHMQHMUXQG\ 3REORNXNRGX]QDMGXMHVLÚ SROHFHQLHZ\ĂZLHWODMÈFHSU]\JRWRZDQ\ZF]HĂQLHMNRPXQLNDW -HĝHOLZDUWRĂÊ]PLHQQHM scoreEÚG]LHPQLHMV]DQLĝ50 SROHFHQLDZEORNXNRGXQLH ]RVWDQÈZ\NRQDQHDVNU\SW EÚG]LHNRQW\QXRZDïG]LDïDQLH RGSLHUZV]HJRZLHUV]D]QDMGXMÈFHJRVLÚSREORNXNRGX JAVASCRIPT c04/js/if-statement-with-function.js YDUVFRUH :\QLN YDUPVJ ĳĳ.RPXQLNDW function congratulate() { PVJ ĳ*UDWXODFMHĳ } if (score >= 50) { -HĝHOLZ\QLNZ\QRVLOXE ZLÚFHM FRQJUDWXODWH PVJ ĳ3U]HFKRG]LV]GRNROHMQHMUXQG\ĳ } YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOLQQHU+70/ PVJ 3ROHZHMVWURQLH]QDMGXMHVLÚ DOWHUQDW\ZQDZHUVMDWHJRVDPHJRSU]\NïDGXNWöUDSRND]XMH ĝHZLHUV]HNRGXQLH]DZV]HVÈ Z\NRQ\ZDQHZVSRG]LHZDQHM NROHMQRĂFL-HĝHOLZDUXQHNif MHVWVSHïQLRQ\WR 1. 3LHUZV]HSROHFHQLH ZEORNXNRGXZ\ZRïXMHIXQNFMÚ congratulate() 2. .RG]QDMGXMÈF\VLÚZIXQNFML congratulate()]RVWDQLH Z\NRQDQ\ 3. :\NRQDQ\EÚG]LHGUXJL ZLHUV]ZEORNXNRGXSROHFHQLD if '(&<=-(,3}7/( 167 KONSTRUKCJA IF-ELSE .RQVWUXNFMDif-elseVSUDZG]DZDUXQHN -HĝHOLZ\QLNLHPMHVWZDUWRĂÊWUXHWRQDVWÚSXMHZ\NRQDQLH SLHUZV]HJREORNXNRGX 1DWRPLDVWMHĂOLZ\QLNLHPMHVWIDOVHZ\NRQDQ\EÚG]LHGUXJLEORNNRGX if (score >= 50) { FRQJUDWXODWH } else { HQFRXUDJH } KOD DO WYKONANIA, JEŚLI WARTOŚCIĄ POLECENIA IF JEST TRUE KOD DO WYKONANIA, JEŚLI WARTOŚCIĄ POLECENIA IF JEST FALSE POLECENIE WARUNKOWE WARUNEK BLOK KODU POLECENIA IF BLOK KODU POLECENIA ELSE 168 '(&<=-(,3}7/( UŻYCIE KONSTRUKCJI IF-ELSE c04/js/if-else-statement.js JAVASCRIPT YDUSDVV 0LQLPDOQDZDUWRĂÊ]DOLF]DMÈFD WHVW YDUVFRUH %LHĝÈF\Z\QLN YDUPVJ.RPXQLNDW 3U]\JRWRZDQLHNRPXQLNDWXZRSDUFLXRZ\QLN X]\VNDQ\SU]H]Xĝ\WNRZQLND if (score >= pass) { PVJ ĳ*UDWXODFMH]DOLF]\ïHĂWHVWĳ } else { PVJ ĳ6SUöEXMSRQRZQLHĳ } 1DSRGVWDZLHSU]\NïDGXPRĝHV] ]REDF]\ÊĝHNRQVWUXNFMD if-elseSR]ZDODQDGRVWDUF]HQLHGZöFK]HVWDZöZNRGX 1. -HGHQ]HVWDZĽZ\NRQ\ZDQ\JG\ZDUWRĂFLÈZDUXQNX EÚG]LHtrue 2. 'UXJL]HVWDZĽZ\NRQ\ZDQ\JG\ZDUWRĂFLÈZDUXQNX EÚG]LHfalse :WUDNFLHWHVWXPRJÈZ\VWÈSLÊ GZLHV\WXDFMH3LHUZV]D ĽXĝ\WNRZQLN]GRE\ZDFR QDMPQLHMPLQLPDOQÈOLF]EÚ SXQNWöZQLH]EÚGQÈGR ]DOLF]HQLDWHVWX LW\PVDP\P ]DOLF]DJR 'UXJDĽXĝ\WNRZQLNX]\VNXMHPQLHMV]ÈOLF]EÚ SXQNWöZQLĝPLQLPDOQDZ\PDJDQD LW\PVDP\PQLH]DOLF]D WHVWX :REXSU]\SDGNDFK WU]HEDSU]\JRWRZDÊRGSRZLHGQL NRPXQLNDWNWöU\SöěQLHM]RVWDMH Z\ĂZLHWORQ\QDVWURQLH YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW PVJ WYNIK =ZUöÊXZDJÚĝHSRSROHFHQLX ifSRZLQLHQ]QDMGRZDÊVLÚ ĂUHGQLN1LHPDQDWRPLDVW SRWU]HE\XPLHV]F]DQLDĂUHGQLND SR]DP\NDMÈF\PQDZLDVLH NODPURZ\PEORNXNRGX 3ROHFHQLHifZ\NRQXMHSROHFHQLDZEORNXNRGX W\ONRZWHG\JG\ZDUXQHNSU]\MPXMHZDUWRĂÊtrue N Czy VFRUH! ? %ORNif-elseZ\NRQXMHW\ONRMHGHQ]HVWDZ SROHFHñZ]DOHĝQRĂFLRGZDUWRĂFLZDUXQNX Czy VFRUH! ? T N Zaliczyłeś! Spróbuj ponownie… kontynuacja skryptu… T Zaliczyłeś! kontynuacja skryptu… '(&<=-(,3}7/( 169 KONSTRUKCJA SWITCH .RQVWUXNFMDswitchUR]SRF]\QDVLÚ RG]PLHQQHMQD]\ZDQHMZDUWRĂFLÈ switch.DĝG\EORNcase]DZLHUD PRĝOLZÈZDUWRĂÊGODWHM]PLHQQHM LXUXFKDPLD]GHğQLRZDQHZQLP SROHFHQLDMHĂOLQDVWÈSLGRSDVRZDQLH ZDUWRĂFL]PLHQQHM :SU]HGVWDZLRQ\PSU]\NïDG]LH]PLHQQDRQD]ZLH OHYHOMHVWZDUWRĂFLÈswitch-HĝHOLZDUWRĂFLÈ ]PLHQQHMOHYHOEÚG]LHFLÈJWHNVWRZ\-HGHQWR ]RVWDQLHZ\NRQDQ\NRGZSLHUZV]\PEORNXcase :SU]\SDGNXZDUWRĂFLDwaQDVWÈSLZ\NRQDQLH SROHFHñZGUXJLPEORNXcase=NROHLZDUWRĂÊ TrzyR]QDF]DZ\NRQDQLHSROHFHñZWU]HFLPEORNX case-HĝHOLZDUWRĂÊ]PLHQQHMlevelQLH]RVWDQLH GRSDVRZDQDGRĝDGQHJREORNXcaseQDVWÈSL Z\NRQDQLHEORNXGHIDXOW &DïDNRQVWUXNFMD]QDMGXMHVLÚZMHGQ\PEORNX NRGX XMÚWDZQDZLDVNODPURZ\ DGZXNURSHN RGG]LHODRSFMHRGSROHFHñZ\NRQ\ZDQ\FKSR GRSDVRZDQLXZDUWRĂFLZSROHFHQLXcaseGR ZDUWRĂFLswitch switch (level) { case ’Jeden’: WLWOH ĳ3R]LRPĳ EUHDN case ’Dwa’: WLWOH ĳ3R]LRPĳ EUHDN case ’Trzy’: WLWOH ĳ3R]LRPĳ EUHDN default: WLWOH ĳ7HVWĳ EUHDN } 1DNRñFXNDĝGHJREORNXcase]QDMGXMHVLÚVïRZR NOXF]RZHEUHDN,QIRUPXMHRQRLQWHUSUHWHU-DYD6FULSWR]DNRñF]HQLXG]LDïDQLDGDQHJRSROHFHQLD switchLQDVWÚSXMHSU]HMĂFLHGRZLHUV]DNRGX ]QDMGXMÈFHJRVLÚWXĝ]D]DP\NDMÈF\PQDZLDVHP NODPURZ\PNRQVWUXNFMLswitch IF-ELSE SWITCH • • 'RVWÚSQDMHVWRSFMDdefaultZ\NRQ\ZD- 1LHPDNRQLHF]QRĂFLSRGDZDQLD RSFMLelse :\VWDUF]\Xĝ\ÊMHG\QLH SROHFHQLDif • :SU]\SDGNXVHULLSROHFHñifVSUDZ- G]DQHVÈZV]\VWNLHSROHFHQLDnawetSR ]QDOH]LHQLXGRSDVRZDQLD DZLÚFG]LDïDQLH NRQVWUXNFMLif-elseMHVWZROQLHMV]HQLĝ switch 170 '(&<=-(,3}7/( KONTRA QDMHĂOLQLH]RVWDQLHGRSDVRZDQ\ĝDGHQ EORNcase • :SU]\SDGNX]QDOH]LHQLDGRSDVRZDQLD QDVWÚSXMHZ\NRQDQLHNRGX3ROHFHQLH EUHDN]DWU]\PXMHZ\NRQ\ZDQLHSR]RVWDïHM F]ÚĂFLNRQVWUXNFMLswitch G]LÚNLF]HPX NRQVWUXNFMDswitchFKDUDNWHU\]XMHVLÚ OHSV]ÈZ\GDMQRĂFLÈQLĝZLHOHSROHFHñif UŻYCIE KONSTRUKCJI SWITCH JAVASCRIPT c04/js/switch-statement.js YDUPVJ.RPXQLNDW YDUOHYHO 3R]LRP 3U]\JRWRZDQLHNRPXQLNDWXQDSRGVWDZLHSR]LRPX switch (level) { case 1: PVJ ĳ3RZRG]HQLDQDSLHUZV]\PWHĂFLHĳ EUHDN case 2: PVJ ĳ'UXJL]WU]HFKMHVWQLHěOHĳ EUHDN case 3: PVJ ĳ2VWDWQLDUXQGDMXĝSUDZLHVNRñF]\ïHĂĳ EUHDN default: PVJ ĳ3RZRG]HQLDĳ EUHDN } YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ HOWH[W&RQWHQW PVJ WYNIK :SU]HGVWDZLRQ\PSU]\NïDG]LHFHOHPNRQVWUXNFMLswitchMHVWZ\ĂZLHWOHQLHRGSRZLHGQLHJRNRPXQLNDWX Z]DOHĝQRĂFLRGSR]LRPXQDNWöU\P VLÚ]QDMGXMHXĝ\WNRZQLN.RPXQLNDW MHVWSU]HFKRZ\ZDQ\Z]PLHQQHM RQD]ZLHmsg =PLHQQDlevelSU]HFKRZXMHOLF]EÚ ZVND]XMÈFÈSR]LRPQDNWöU\P ]QDMGXMHVLÚXĝ\WNRZQLN7D]PLHQQD MHVWQDVWÚSQLHXĝ\ZDQDMDNRZDUWRĂÊ switch :DUWRĂFLÈswitchPRĝH E\ÊUöZQLHĝZ\UDĝHQLH :EORNXNRGXNRQVWUXNFML ZHZQÈWU] QDZLDVXNODPURZHJR ]QDMGXMÈ VLÚWU]\RSFMHRGSRZLDGDMÈFH PRĝOLZ\PZDUWRĂFLRP]PLHQQHM level12OXE3 -HĝHOL]PLHQQDlevelEÚG]LHPLDïDZDUWRĂÊ1WR ZDUWRĂÊ]PLHQQHMmsgWR 3RZRG]HQLDQDSLHUZV]\PWHĂFLH :SU]\SDGNXZDUWRĂFL2]PLHQQD msg]DZLHUDFLÈJWHNVWRZ\ 'UXJL]WU]HFKMHVWQLHěOH 1DWRPLDVWGODZDUWRĂFL3]PLHQQHM levelZDUWRĂFLÈ]PLHQQHMmsgMHVW 2VWDWQLDUXQGDMXĝSUDZLH VNRñF]\ïHĂ :SU]\SDGNXEUDNXGRSDVRZDQLD ZDUWRĂFLÈ]PLHQQHMmsgEÚG]LH 3RZRG]HQLD .DĝG\EORNcaseNRñF]\VLÚVïRZHP NOXF]RZ\PEUHDNNWöUHQDND]XMH LQWHUSUHWHURZL-DYD6FULSWSRPLQLÚFLH SR]RVWDïHMF]ÚĂFLNRGXLNRQW\QXRZDQLHZ\NRQ\ZDQLDVNU\SWXRG SLHUZV]HJRSROHFHQLDSR]DP\NDMÈF\PQDZLDVLHNODPURZ\P '(&<=-(,3}7/( 171 NARZUCANIE TYPU I LUŹNE OKREŚLANIE TYPU -HĝHOLZ-DYD6FULSWXĝ\MHV]QLHRF]HNLZDQHJRW\SXGDQ\FKWR]DPLDVW]JïRVLÊ EïÈGLQWHUSUHWHUSUöEXMHZVHQVRZQ\VSRVöEZ\NRQDÊRSHUDFMÚ -DYD6FULSWSRWUDğZWOH SU]HSURZDG]LÊNRQZHUVMÚW\SöZ GDQ\FKDE\PöFZ\NRQDÊ ]OHFRQÈRSHUDFMÚ1RVLWRQD]ZÚ narzucania typu1DSU]\NïDG ZZ\UDĝHQLX(’1’ > 0)FLÈJ WHNVWRZ\’1’]RVWDQLHVNRQZHUWRZDQ\QDOLF]EÚ1:\QLNLHP Z\PLHQLRQHJRZ\UDĝHQLDEÚG]LH ZDUWRĂÊtrue -DYD6FULSWXĝ\ZDOXěQHJR RNUHĂODQLDW\SXSRQLHZDĝW\S GDQ\FKGODZDUWRĂFLPRĝHXOHF ]PLDQLH:QLHNWöU\FKMÚ]\NDFK SURJUDPRZDQLDZ\PDJDQHMHVW ZVND]DQLHW\SXGDQ\FKNDĝGHM ]PLHQQHM:WDNLPSU]\SDGNX PöZLP\RĂFLVï\PRNUHĂODQLX typu 1DU]XFDQLHW\SXGDQ\FKPRĝH GRSURZDG]LÊGRSRZVWDQLD QLHRF]HNLZDQ\FKZDUWRĂFLZNRG]LH LW\PVDP\PSRZRGRZDÊ EïÚG\ 'ODWHJRWHĝSRGF]DV VSUDZG]DQLDF]\GZLHZDUWRĂFL VÈUöZQHOHSV]\PUR]ZLÈ]DQLHPEÚG]LHXĝ\FLHĂFLVï\FK RSHUDWRUöZUöZQRĂFL===L ]DPLDVW==L 3LHUZV]HGZD ]Z\PLHQLRQ\FKRSHUDWRUöZ VSUDZG]DMÈQLHW\ONRZDUWRĂÊ DOHUöZQLHĝW\SGDQ\FK 172 '(&<=-(,3}7/( TYP DANYCH OPIS string 7HNVW number /LF]ED Boolean :DUWRĂÊtrueOXEfalse null 3XVWDZDUWRĂÊ XQGHğQHG =PLHQQD]RVWDïD]DGHNODURZDQDDOHMHV]F]HQLHSU]\SLVDQRMHM ZDUWRĂFL NaNWRZDUWRĂÊX]QDZDQD]DOLF]EÚ0RĝHV]VLÚRW\PSU]HNRQDÊ NLHG\OLF]EDMHVWRF]HNLZDQDDOHQLH]RVWDQLH]ZUöFRQD1DSU]\NïDG Z\UDĝHQLH ĳG]LHVLÚÊĳ ]ZUDFDZDUWRĂÊNaN WARTOŚCI TRUTHY I FALSY =HZ]JOÚGXQDQDU]XFDQLHW\SXNDĝGDZDUWRĂÊZ-DYD6FULSWPRĝHE\ÊWUDNWRZDQDMDNRtrueLfalse7RSRZRGXMHSHZQHLQWHUHVXMÈFHHIHNW\XERF]QH WARTOŚCI FALSY :$572¥m OPIS YDUKLJK6FRUH IDOVH 7UDG\F\MQDZDUWRĂÊERRORZVNDfalse YDUKLJK6FRUH /LF]ED]HUR YDUKLJK6FRUH ĳĳ 3XVWDZDUWRĂÊ YDUKLJK6FRUH ĳVFRUHĳ :DUWRĂÊNaN YDUKLJK6FRUH =PLHQQDNWöUHMQLHSU]\SLVDQRZDUWRĂFL 1LHPDOZV]\VWNRSR]RVWDïHSU]\MPXMHZDUWRĂÊtruthy… WARTOŚCI TRUTHY :$572¥m OPIS YDUKLJK6FRUH WUXH 7UDG\F\MQDZDUWRĂÊERRORZVNDtrue YDUKLJK6FRUH /LF]EDLQQDQLĝ]HUR YDUKLJK6FRUH ĳPDUFKHZĳ &LÈJWHNVWRZ\ZUD]]]DZDUWRĂFLÈ YDUKLJK6FRUH 2EOLF]HQLDQDOLF]EDFK YDUKLJK6FRUH ĳWUXHĳ YDUKLJK6FRUH ĳĳ YDUKLJK6FRUH ĳIDOVHĳ :DUWRĂÊtrue]DSLVDQDZSRVWDFLFLÈJX WHNVWRZHJR =HUR]DSLVDQHZSRVWDFLFLÈJXWHNVWRZHJR :DUWRĂÊfalse]DSLVDQDZSRVWDFLFLÈJX WHNVWRZHJR :DUWRĂFLfalsyVÈWUDNWRZDQH WDNMDNE\E\ï\ZDUWRĂFLDPL false:WDEHOLSROHZHM VWURQLHZ\PLHQLRQR]PLHQQÈ highScoreZUD]]VHULÈ ZDUWRĂFL]NWöU\FKZV]\VWNLH WRfalsy :DUWRĂFLfalsyPRJÈE\ÊUöZQLHĝWUDNWRZDQHMDNROLF]ED0 :DUWRĂFLtruthyVÈWUDNWRZDQH WDNMDNE\E\ï\ZDUWRĂFLDPL true3UDNW\F]QLHZV]\VWNR FRZWDEHOLQLHMHVWfalsyPRĝH E\ÊSRWUDNWRZDQHMDNRZDUWRĂÊ true :DUWRĂFLtruthyPRJÈE\Ê UöZQLHĝWUDNWRZDQHMDNR OLF]ED1 3RQDGWRREHFQRĂÊRELHNWXOXE WDEOLF\MHVW]Z\NOHX]QDZDQD ]DZDUWRĂÊtruthy1DMF]ÚĂFLHM VSRW\NDVLÚWRSRGF]DV VSUDZG]DQLDF]\GDQ\HOHPHQW LVWQLHMHQDVWURQLH 1DNROHMQHMVWURQLHGRZLHV] VLÚGODF]HJRZ\PLHQLRQHWXWDM NRQFHSFMHVÈZDĝQH '(&<=-(,3}7/( 173 SPRAWDZENIE RÓWNOŚCI I ISTNIENIA 3RQLHZDĝREHFQRĂÊRELHNWXOXEWDEOLF\PRĝHE\ÊX]QDQD ]DZDUWRĂÊtruthyWHQIDNWEDUG]RF]ÚVWRZ\NRU]\VWXMHVLÚ SRGF]DVVSUDZG]DQLDF]\GDQ\HOHPHQWLVWQLHMHQDVWURQLH Operator jednoargumentowy ]ZUDFDZ\QLNQDSRGVWDZLH RFHQ\SRSURVWXMHGQHJR RSHUDQGX:SU]HGVWDZLRQ\P SU]\NïDG]LHSROHFHQLHif VSUDZG]DF]\LVWQLHMHHOHPHQW -HĝHOLLVWQLHMHZ\QLNLHPEÚG]LH ZDUWRĂÊtruthyDW\PVDP\P Z\NRQDQ\]RVWDQLHSLHUZV]\ EORNNRGX1DWRPLDVWMHĂOL HOHPHQWQLHLVWQLHMHZ\NRQDQ\ ]RVWDQLHGUXJLEORNNRGX if (document.getElementById(’header’)) { =QDOH]LRQRZ\NRQDMSHZQH]DGDQLH } else { 1LH]QDOH]LRQRZ\NRQDMLQQH]DGDQLH } 2VRE\GRSLHUR]DF]\QDMÈFHSURJUDPRZDQLHZMÚ]\NX-DYD6FULSW F]ÚVWRVÈG]ÈĝHSRQLĝV]\ZLHUV]NRGXG]LDïDGRNïDGQLHWDNVDPRMDN SU]HGVWDZLRQ\SRZ\ĝHM if (document.getElementById(’header’) == true) -HGQDNZ\ZRïDQLHdocument.getElementById(’header’)]ZUDFD RELHNWX]QDZDQ\]DZDUWRĂÊtruthyNWöUDnieMHVWUöZQDZDUWRĂFL ERRORZVNLHMtrue =SRZRGXVWRVRZDQLDQDU]XFDQLDW\SXĂFLVïHRSHUDWRU\UöZQRĂFL===L GDMÈPQLHMV]ÈOLF]EÚQLHRF]HNLZDQ\FKZDUWRĂFLQLĝZSU]\SDGNXXĝ\FLD RSHUDWRUöZ==L 174 -HĝHOLXĝ\MHV]RSHUDWRUD==WR Z\PLHQLRQHZïDĂFLZRĂFLVÈ X]QDZDQH]DUöZQHfalse0 L’’ SXVW\FLÈJWHNVWRZ\ -HGQDNQLHVÈRQHUöZQHSRGF]DV Xĝ\FLDĂFLVï\FKRSHUDWRUöZ :SUDZG]LHnullLXQGHğQHG VÈX]QDZDQH]DfalsyDOHQLH VÈUöZQHQLF]HPXLQQHPXQLĝ RGSRZLHGQLRnullLXQGHğQHG 2]QDF]DWRĝHQLHVÈRGSRZLHGQLNDPLSRGF]DVXĝ\FLDĂFLVï\FK RSHUDWRUöZ :SUDZG]LHZDUWRĂÊNaNMHVW X]QDZDQD]DfalsyDOHQLH RGSRZLDGDĝDGQHMLQQHMQLHMHVW QDZHWRGSRZLHGQLNLHPVDPHM VLHELH VNRURNaNWRQLH]GHğQLRZDQDOLF]EDWRQLHPRĝQD SRUöZQ\ZDÊ]HVREÈGZöFK ZDUWRĂFLNaN :<5$¿(1,( :<5$¿(1,( :<5$¿(1,( WYNIK XQGHğQHG (false == 0) true (false === 0) false (false == ’’) true XQGHğQHG (false === ’’) (null == false) false (null == 0) (0 == ’’) true XQGHğQHG (0 === ’’) false XQGHğQHG '(&<=-(,3}7/( QXOO IDOVH WYNIK (NaN == null) false false (NaN == NaN) false false false QXOO WYNIK true false false PRZERWANIE OBLICZANIA WARTOŚCI 2SHUDWRU\ORJLF]QHVÈSU]HWZDU]DQHRGOHZHMGRSUDZHMVWURQ\ 3U]HUZDQLHREOLF]DQLDZDUWRĂFLQDVWÚSXMHQDW\FKPLDVWSRRWU]\PDQLXZ\QLNX =ZUDFDQDMHVWZöZF]DVZDUWRĂÊNWöUDSU]HUZDïDSU]HWZDU]DQLH WRQLHNRQLHF]QLHEÚG]LHtrueOXEfalse :ZLHUV]XSLHUZV]\P]PLHQQHMartist]RVWDMHSU]\SLVDQDZDUWRĂÊ Rembrandt :ZLHUV]XGUXJLP]PLHQQDartistPDZDUWRĂÊQDVWÚSQLH]PLHQQHM artistA]RVWDMHSU]\SLVDQDWDVDPDZDUWRĂÊMDNÈPDartist SRQLHZDĝQLHSXVW\FLÈJWHNVWRZ\MHVWX]QDZDQ\]DZDUWRĂÊtruthy YDUDUWLVW ĳ5HPEUDQGWĳ YDUDUWLVW$ DUWLVW__ĳQLH]QDQ\ĳ -HĝHOLFLÈJWHNVWRZ\MHVWSXVW\ SDWU]SRQLĝHM WR]PLHQQDartistA PDSU]\SLVDQÈZDUWRĂÊnieznany YDUDUWLVW ĳĳ YDUDUWLVW$ DUWLVW__ĳQLH]QDQ\ĳ ,VWQLHMHQDZHWPRĝOLZRĂÊXWZRU]HQLDSXVWHJRRELHNWXMHĂOL]PLHQQD artist QLHPDSU]\SLVDQHMZDUWRĂFL YDUDUWLVW ĳĳ YDUDUWLVW$ DUWLVW__^` 3RQLĝHMSU]HGVWDZLRQRWU]\ZDUWRĂFL-HĝHOLNWöUDNROZLHN]QLFK ]RVWDQLHX]QDQD]DtruthyWRQDVWÈSLZ\NRQDQLHNRGX]QDMGXMÈFHJR VLÚZSROHFHQLXif.LHG\VNU\SWQDSRWNDvalueBZRSHUDWRU]H ORJLF]Q\PSU]HUZLHSU]HWZDU]DQLHZ\UDĝHQLDSRQLHZDĝOLF]EDMHVW X]QDZDQD]DtruthyLQDVWÈSLZ\NRQDQLHNROHMQHJREORNXNRGX YDOXH$ YDOXH% YDOXH& if (valueA || valueB || valueC) { :\NRQDMSHZQH]DGDQLH } 7DWHFKQLNDUöZQLHĝPRĝHE\ÊXĝ\ZDQDGRVSUDZG]HQLDF]\QD VWURQLHLVWQLHMHGDQ\HOHPHQWMDNPLDïRWRPLHMVFHZSRGUR]G]LDOH ķ6SUDZG]HQLHUöZQRĂFLLLVWQLHQLDĵ 2SHUDWRU\ORJLF]QHQLH]DZV]H ]ZUDFDMÈZDUWRĂÊtrueOXE falseSRQLHZDĝ ZDUWRĂFLÈ]ZURWQÈMHVWWD NWöUDSU]HUZDïDSU]HWZDU]DQLHZ\UDĝHQLD ZDUWRĂÊPRJïD]RVWDÊ SRWUDNWRZDQDMDNRtruthy OXEfalsyFKRÊQLHE\ïD ZDUWRĂFLÈERRORZVNÈ • • 3URJUDPLĂFLNUHDW\ZQLH Z\NRU]\VWXMÈWHPRĝOLZRĂFL QDSU]\NïDGGRSU]\SLV\ZDQLD ZDUWRĂFL]PLHQQ\POXEQDZHW SRGF]DVWZRU]HQLDRELHNWöZ 1DW\FKPLDVWSR]QDOH]LHQLX ZDUWRĂFLtruthyQDVWÚSXMHSU]HUZDQLHVSUDZG]DQLDNROHMQ\FK RSFML'ODWHJRWHĝGRĂZLDGF]HQL SURJUDPLĂFLF]ÚVWR NRGNWöU\QDMSUDZGRSRGREQLHM]ZUöFLZDUWRĂÊtrue XPLHV]F]DMÈMDNRpierwszy ZRSHUDFMDFK25QDWRPLDVW ]ZUDFDMÈF\falseĽMDNR SLHUZV]\ZRSHUDFMDFK$1' RSFMHZ\PDJDMÈFHQDMZLÚNV]HM PRF\REOLF]HQLRZHMXPLHV]F]DMÈQDNRñFXQDZ\SDGHN JG\E\ZDUWRĂFLÈ]ZURWQÈE\ïR trueLQLH]DFKRG]LïDSRWU]HED SU]HSURZDG]DQLDZ\PDJDMÈF\FKREOLF]Hñ • • '(&<=-(,3}7/( 175 PĘTLE 3ÚWODVSUDZG]DZDUXQHN-HĝHOLZDUWRĂFLÈEÚG]LHtrueWRQDVWÈSL Z\NRQDQLHEORNXNRGX:öZF]DVZDUXQHN]RVWDMHVSUDZG]RQ\ SRQRZQLHLMHĂOLQDGDO]ZUDFDtrueEORNNRGX]QöZEÚG]LH Z\NRQDQ\&Dï\SURFHVMHVWSRZWDU]DQ\GRFKZLOLJG\ZDUXQHN ]ZUöFLfalse1DMF]ÚĂFLHMVSRW\NDP\WU]\URG]DMHSÚWOL FOR WHILE DO-WHILE -HĝHOLFKFHV]Z\NRQDÊNRGRNUHĂORQÈOLF]EÚUD]\Xĝ\MSÚWOLfor 7RMHVWQDMF]ÚĂFLHMXĝ\ZDQD SÚWOD :SÚWOLforZDUXQHNWR ]Z\NOHOLF]QLNRNUHĂODMÈF\OLF]EÚ LWHUDFMLGDQHMSÚWOL -HĝHOLQLHZLHV]LOHUD]\ SRZLQLHQE\ÊZ\NRQDQ\NRG Xĝ\MSÚWOLwhile:DUXQNLHPWHM SÚWOLPRĝHE\ÊFRNROZLHNLQQHJR QLĝOLF]QLN.RGSÚWOLEÚG]LH Z\NRQ\ZDQ\GRSöNLGRSöW\ ZDUXQHNSU]\MPXMHZDUWRĂÊ true 3ÚWODdo-whileMHVWEDUG]R SRGREQDGRwhileDOH]MHGQÈ ZDĝQÈUöĝQLFÈ3ROHFHQLD ]QDMGXMÈFHVLÚZSÚWOL ZHZQÈWU]QDZLDVXNODPURZHJR ]RVWDQÈZ\NRQDQHFRQDMPQLHM MHGHQUD]QDZHWMHĂOLZDUXQHN SU]\MPXMHZDUWRĂÊfalse WARUNEK (LICZNIK) SŁOWO KLUCZOWE OTWIERAJĄCY NAWIAS KLAMROWY for YDUL LL { GRFXPHQWZULWH L } KOD DO WYKONANIA W TRAKCIE PĘTLI ZAMYKAJĄCY NAWIAS KLAMROWY 3RZ\ĝHMSU]HGVWDZLRQRSÚWOÚ for:DUXQNLHPMHVWOLF]QLN NWöU\RGOLF]DGR:\QLNLHP G]LDïDQLDSÚWOLEÚG]LHZ\ĂZLHWOHQLHF\IU0123456789QDHNUDQLH 176 '(&<=-(,3}7/( -HĝHOL]PLHQQDiPDZDUWRĂÊ PQLHMV]ÈQLĝ10WRZ\NRQ\ZDQ\ MHVWNRGZQDZLDVLHNODPURZ\P1DVWÚSQLHSU]HSURZDG]DQDMHVWLQNUHPHQWDFMDOLF]QLND :DUXQHN]RVWDMHVSUDZG]RQ\ SRQRZQLH-HĝHOL]PLHQQD iQDGDOPDZDUWRĂÊPQLHMV]È QLĝ10WRNRGMHVWZ\NRQ\ZDQ\ SRQRZQLH1DNROHMQ\FKWU]HFK VWURQDFK]QDF]QLHGRNïDGQLHM SR]QDV]G]LDïDQLHSÚWOL LICZNIKI PĘTLI 3ÚWODforXĝ\ZDOLF]QLNDMDNRZDUXQNX/LF]QLNZVND]XMH LOHUD]\]RVWDQLHZ\NRQDQ\NRGSÚWOL-DNPRĝHV]]REDF]\ÊSRQLĝHM ZDUXQHNVNïDGDVLÚ]WU]HFKSROHFHñ INICJALIZACJA WARUNEK UAKTUALNIENIE 8WZRU]HQLH]PLHQQHMLSU]\SLVDQLHMHMZDUWRĂFL07D]PLHQQD F]ÚVWRPDQD]ZÚiRUD]G]LDïD ZFKDUDNWHU]HOLF]QLND 3ÚWODSRZLQQDNRQW\QXRZDÊ G]LDïDQLHDĝGRFKZLOLJG\ OLF]QLNRVLÈJQLHRNUHĂORQÈ ZDUWRĂÊ :WUDNFLHNDĝGHMLWHUDFMLSÚWOL Z\NRQ\ZDQLD]QDMGXMÈF\FK VLÚZQLHMSROHFHñ QDVWÚSXMH GRGDQLHZDUWRĂFL1GROLF]QLND YDUL L i++ =PLHQQDMHVWWZRU]RQDW\ONR ZWUDNFLHSLHUZV]HMLWHUDFMLSÚWOL &]DVHPPRĝQDVLÚVSRWNDÊ ]V\WXDFMÈZNWöUHMWD]PLHQQD PDQD]ZÚindex]DPLDVWSR SURVWXi =PLHQQDiPLDïDSRF]ÈWNRZR SU]\SLVDQÈZDUWRĂÊ0'ODWHJR WHĝZRPDZLDQ\PSU]\SDGNX SÚWOD]RVWDQLHZ\NRQDQD UD]\ :DUWRĂÊOLF]QLNDMHVW]ZLÚNV]DQD]DSRPRFÈRSHUDWRUD LQNUHPHQWDFML i++ 1LHUD]PRĝQD]REDF]\ÊĝH ]PLHQQD]RVWDMH]DGHNODURZDQD MHV]F]HSU]HGZDUXQNLHPSÚWOL 3U]HGVWDZLRQ\SRQLĝHMNRGG]LDïDGRNïDGQLHWDNVDPR:\EöU Xĝ\ZDQHJRSRGHMĂFLD]DOHĝ\RG SUHIHUHQFMLSURJUDPLVW\ YDUL IRU L LL ^ 0LHMVFHQDNRGSÚWOL } :DUXQHNUöZQLHĝPRĝH]DZLHUDÊ]PLHQQÈSU]HFKRZXMÈFÈ OLF]EÚ-HĝHOL]PLHQQDRQD]ZLH roundsSU]HFKRZXMHOLF]EÚ UXQGWHVWXDSÚWODMHVWZ\NRQ\ZDQDUD]GODNDĝGHMUXQG\WR ZDUXQHNEÚG]LHPLDïSRVWDÊ 2WRLQQ\VSRVöERGF]\WDQLD SRZ\ĝV]HJRZLHUV]DNRGX ķ:Hě]PLHQQÈiDQDVWÚSQLH]D SRPRFÈRSHUDWRUD++GRGDMGR QLHMZDUWRĂÊ1ĵ ,VWQLHMHUöZQLHĝPRĝOLZRĂÊDE\ OLF]QLNSÚWOL]PQLHMV]DïVZRMÈ ZDUWRĂÊSU]\Xĝ\FLXRSHUDWRUD GHNUHPHQWDFML -- YDUURXQGV L URXQGV '(&<=-(,3}7/( 177 ZAPĘTLANIE c z y 0 < 10 ? POCZĄTEK i = 0 :WUDNFLHSLHUZV]HMLWHUDFML SÚWOL]PLHQQDi OLF]QLN PD SU]\SLVDQÈZDUWRĂÊ0 178 '(&<=-(,3}7/( czy 1 < 10? j 1 do 0 doda j 1 do 1 doda wyświetl na stronie wyświetl na stronie 0 1 i=1 3RGF]DVNDĝGHMNROHMQHM LWHUDFMLQDVWÚSXMHVSUDZG]HQLH ZDUXQNXF]\]PLHQQDiPD ZDUWRĂÊPQLHMV]ÈQLĝ10 i=2 1DVWÚSQLHZ\NRQ\ZDQ\MHVW NRGZHZQÈWU]SÚWOL SROHFHQLD ]QDMGXMÈFHVLÚZQDZLDVLH NODPURZ\P for (YDUL L i++) { GRFXPHQWZULWH L } cz y 8 < 10 ? j 1 do 8 doda c z y 9 < 10 ? j 1 do 9 doda wyświetl na stronie wyświetl na stronie 8 9 i=8 =PLHQQDiPRĝHE\ÊZ\NRU]\VWDQDZHZQÈWU]SÚWOL :RPDZLDQ\PSU]\NïDG]LHMHVW Xĝ\ZDQDZFHOXZ\ĂZLHWOHQLD OLF]E\QDVWURQLH i=9 3RZ\NRQDQLXSROHFHñ ZSÚWOLQDVWÚSXMHLQNUHPHQWDFMD ]PLHQQHMi cz y 1 0 < 1 i = 10 0? END ']LDïDQLHSÚWOLNRñF]\VLÚJG\ ZDUXQHNQLHSU]\MPXMHGïXĝHM ZDUWRĂFLtrue6NU\SWSU]HFKRG]LGRNROHMQHJRZLHUV]DNRGX SREORNXSÚWOL '(&<=-(,3}7/( 179 KLUCZOWE KONCEPCJE PĘTLI 3RQLĝHMZ\PLHQLRQRWU]\NZHVWLHNWöUHQDOHĝ\ Z]LÈÊSRGXZDJÚSRGF]DVSUDF\]SÚWODPL.DĝGD]QLFK ]RVWDQLH]LOXVWURZDQDSU]\NïDGHPQDWU]HFKNROHMQ\FKVWURQDFK SŁOWA KLUCZOWE PĘTLE I TABLICE :SÚWODFKPRĝQDQDMF]ÚĂFLHM VSRWNDÊGZDZ\PLHQLRQH SRQLĝHMVïRZDNOXF]RZH 3ÚWOHVÈEDUG]RXĝ\WHF]QHSRGF]DVSUDF\]WDEOLFDPLMHĂOLWHQ VDPNRGPDE\ÊZ\NRQ\ZDQ\ GODNDĝGHJRHOHPHQWXWDEOLF\ BREAK 7RVïRZRNOXF]RZHSRZRGXMH SU]HUZDQLHZ\NRQ\ZDQLD SÚWOLLQDND]XMHLQWHUSUHWHURZL SU]HMĂFLHGRNROHMQHJRSROHFHQLD MXĝQD]HZQÈWU]SÚWOL 7RVïRZR NOXF]RZHPRĝQDVSRWNDÊWDNĝH ZIXQNFMDFK CONTINUE 7RVïRZRNOXF]RZHQDND]XMH LQWHUSUHWHURZL]DWU]\PDQLH ELHĝÈFHMLWHUDFMLDQDVWÚSQLH SRQRZQHVSUDZG]HQLHZDUXQNX -HĝHOLZDUXQHNSU]\MPLH ZDUWRĂÊtrueNRG]RVWDQLH Z\NRQDQ\SRQRZQLH 1DSU]\NïDGFKFHV]Z\ĂZLHWOLÊ QDVWURQLHZDUWRĂÊNDĝGHJR HOHPHQWXSU]HFKRZ\ZDQHJR ZWDEOLF\ 3RGF]DVWZRU]HQLDVNU\SWXQLH PXVLV]]QDÊOLF]E\HOHPHQWöZ ]QDMGXMÈF\FKVLÚZWDEOLF\ 3RXUXFKRPLHQLXNRGXPRĝH RQZSÚWOLVSUDZG]LÊZLHONRĂÊ WDEOLF\1DVWÚSQLHWÚZLHONRĂÊ Z\NRU]\VWXMHVLÚZOLF]QLNXGR XVWDOHQLDOLF]E\LWHUDFMLSÚWOL *G\SÚWOD]RVWDQLHZ\NRQDQD RNUHĂORQÈOLF]EÚUD]\MHM G]LDïDQLHVLÚNRñF]\ KWESTIE ZWIĄZANE Z WYDAJNOŚCIĄ 7U]HEDNRQLHF]QLHSDPLÚWDÊĝH NLHG\SU]HJOÈGDUNDLQWHUQHWRZD GRWU]HGRVNU\SWX-DYD6FULSW WRZVWU]\PXMHZV]\VWNLHLQQH ]DGDQLDDĝGRFKZLOLFDïNRZLWHJR SU]HWZRU]HQLDGDQHJRVNU\SWX -HĝHOLSÚWODSU]HWZDU]DW\ONR QLHZLHONÈOLF]EÚHOHPHQWöZWR QDSHZQRQLHEÚG]LHWRVWDQRZLïRSUREOHPX$OHMHĂOLSÚWOD PXVLSU]HWZRU]\ÊEDUG]RGXĝR HOHPHQWöZWRPRĝH]QDF]QLH Z\GïXĝ\ÊF]DVZF]\W\ZDQLD VWURQ\ :SU]\SDGNXZDUXQNXNWöU\QLJG\QLH]ZUDFDZDUWRĂFLfalse PöZLP\RSÚWOLG]LDïDMÈFHM ZQLHVNRñF]RQRĂÊ7DNLNRG QLH]DNRñF]\G]LDïDQLDDĝGR FKZLOL]Xĝ\FLDSU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈFDïHMZROQHM SDPLÚFLZV\VWHPLH SVXMÈFW\P VDP\PG]LDïDQLHVNU\SWX :V]\VWNLH]PLHQQHNWöUH PRĝQD]GHğQLRZDÊQD]HZQÈWU] SÚWOLRUD]NWöUHQLH]PLHQLDMÈ QLF]HJRZHZQÈWU]SÚWOL ]GHF\GRZDQLHSRZLQQ\E\Ê GHğQLRZDQHQD]HZQÈWU]SÚWOL -HĝHOL]RVWDQÈ]DGHNODURZDQH ZHZQÈWU]SÚWOLWREÚGÈPXVLDï\ E\ÊREOLF]DQHZWUDNFLHNDĝGHM LWHUDFMLSÚWOLQLHSRWU]HEQLH ]Xĝ\ZDMÈF]DVRE\V\VWHPX 180 '(&<=-(,3}7/( UŻYCIE PĘTLI FOR JAVASCRIPT c04/js/for-loop.js YDUVFRUHV >@ 7DEOLFDZ\QLNöZ YDUDUUD\/HQJWK VFRUHVOHQJWK /LF]EDHOHPHQWöZZWDEOLF\ YDUURXQG1XPEHU %LHĝÈFDUXQGD YDUPVJ ĳĳ.RPXQLNDW YDUL/LF]QLN ,WHUDFMDSU]H]HOHPHQW\]QDMGXMÈFHVLÚ ZWDEOLF\ IRU L LDUUD\/HQJWKL ^ ,QGHNV\HOHPHQWöZWDEOLF\UR]SRF]\QDMÈ VLÚRG F]\OLR]QDF]DUXQGÚ 'RGDQLHGRELHĝÈFHMUXQG\ URXQG1XPEHU L :\ĂZLHWOHQLHZNRPXQLNDFLHQXPHUX ELHĝÈFHMUXQG\ PVJ ĳ5XQGDĳURXQG1XPEHUĳĳ 3REUDQLHZ\QLNX]WDEOLF\Z\QLNöZ PVJ VFRUHV>L@ĳEU!ĳ } document.getElementById(’answer’).innerHTML PVJ WYNIK /LF]QLNLLQGHNV\HOHPHQWöZWDEOLF\UR]SRF]\QDMÈVLÚRG 0 DQLHRG1 'ODWHJRWHĝZHZQÈWU]SÚWOLGRSREUDQLD ELHĝÈFHJRHOHPHQWX]WDEOLF\Xĝ\ZDQDMHVW]PLHQQD OLF]QLNDiNWöUDZQDVWÚSXMÈF\VSRVöEZVND]XMHHOHPHQW WDEOLF\scores[i]3DPLÚWDMĝHWRMHVWOLF]EDQLĝV]DQLĝ PRĝHV]RF]HNLZDÊ QDSU]\NïDGSLHUZV]DLWHUDFMDWR0 GUXJDWR1 3ÚWODforMHVWZ\NRU]\VWDQDZFHOX SU]HSURZDG]HQLDLWHUDFMLSU]H]HOHPHQW\ ]QDMGXMÈFHVLÚZWDEOLF\ :RPDZLDQ\PSU]\NïDG]LHZ\QLNLGOD NDĝGHMUXQG\WHVWXVÈSU]HFKRZ\ZDQH ZWDEOLF\RQD]ZLHscores &DïNRZLWDOLF]EDHOHPHQWöZ]QDMGXMÈF\FKVLÚZWDEOLF\MHVWSU]HFKRZ\ZDQD Z]PLHQQHMRQD]ZLHarrayLength 8VWDOHQLHWHMOLF]E\RGE\ZDVLÚ]DSRPRFÈ ZïDĂFLZRĂFLlengthWDEOLF\ :VNU\SFLHPDP\MHV]F]HWU]\LQQH ]PLHQQH=PLHQQDroundNumberSU]HFKRZXMHQXPHUUXQG\WHVWXmsg]DZLHUD NRPXQLNDWGRZ\ĂZLHWOHQLDQDWRPLDVWiWR OLF]QLN ]PLHQQDi]RVWDïD]DGHNODURZDQD QD]HZQÈWU]SÚWOL 3ÚWODUR]SRF]\QDVLÚRGVïRZDNOXF]RZHJR forNWöUHZQDZLDVLH]DZLHUD]GHğQLRZDQ\ZDUXQHN'RSöNLZDUWRĂÊOLF]QLNDMHVW PQLHMV]DRGFDïNRZLWHMOLF]E\HOHPHQWöZ WDEOLF\GRSöW\Z\NRQ\ZDQ\MHVWNRGSÚWOL ]GHğQLRZDQ\ZQDZLDVLHNODPURZ\P :WUDNFLHNDĝGHMLWHUDFMLSÚWOLQDVWÚSXMH ]ZLÚNV]HQLHQXPHUXUXQG\R :QDZLDVLHNODPURZ\P]QDMGXMÈVLÚ SROHFHQLDRGSRZLDGDMÈFH]DSU]HFKRZ\ZDQLHQXPHUXUXQG\RUD]ZVWDZLHQLH JRGRSU]\JRWRZ\ZDQHJRNRPXQLNDWX =PLHQQH]DGHNODURZDQHQD]HZQÈWU]SÚWOL VÈXĝ\ZDQHZHZQÈWU]SÚWOL 1DVWÚSQLH]DZDUWRĂÊ]PLHQQHMmsg ]RVWDMHZ\ĂZLHWORQDQDVWURQLH:DUWRĂFLÈ ]PLHQQHMMHVWNRG+70/ZLÚFZ\NRU]\VWXMHP\ZïDĂFLZRĂÊinnerHTML3DPLÚWDM R]DSR]QDQLXVLÚZUR]G]LDOHZSRGUR]G]LDOHķ$WDNLW\SX;66ĵ]LQIRUPDFMDPL RQLHEH]SLHF]HñVWZDFKZLÈĝÈF\FKVLÚ ]Xĝ\FLHPZ\PLHQLRQHMZïDĂFLZRĂFL '(&<=-(,3}7/( 181 UŻYCIE PĘTLI WHILE 3RQLĝHMSU]HGVWDZLRQRSU]\NïDG SÚWOLwhileNWöUDZ\ĂZLHWODQD VWURQLHIUDJPHQWWDEOLF]NLPQRĝHQLD :WUDNFLHNDĝGHMLWHUDFMLSÚWOLNROHMQ\ ZLHUV]IUDJPHQWXWDEOLF]NLPQRĝHQLD MHVWGRGDZDQ\GR]PLHQQHMmsg ']LDïDQLHSÚWOLMHVWNRQW\QXRZDQH GRSöNLGRSöW\ZDUWRĂFLÈZDUXQNX ]GHğQLRZDQHJRZQDZLDVLHMHVW true:VSRPQLDQ\PZDUXQNLHP MHVWOLF]QLNRNUHĂODMÈF\ĝHGRSöNL ]PLHQQDiPDZDUWRĂÊPQLHMV]È QLĝ10SRZLQQ\E\ÊZ\NRQ\ZDQH SROHFHQLD]QDMGXMÈFHVLÚZEORNX NRGX c04/js/while-loop.js JAVASCRIPT YDUL 3U]\SLVDQLHOLF]QLNRZLZDUWRĂFL YDUPVJ ĳĳ.RPXQLNDW =PLHQQDSU]HFKRZXMHIUDJPHQWWDEOLF]NL PQRĝHQLD while (i < 10) { PVJ Lĳ[ ĳ L ĳEU!ĳ L } GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ LQQHU+70/ PVJ WYNIK :HZQÈWU]EORNXNRGXPDP\GZD SROHFHQLD 3LHUZV]HXĝ\ZDRSHUDWRUD+=Z\NRU]\VW\ZDQHJRZFHOXGRGDQLDQRZHM ]DZDUWRĂFLGR]PLHQQHMmsg:WUDNFLHNDĝGHMLWHUDFMLSÚWOLQDNRñFX NRPXQLNDWXSU]H]QDF]RQHJRGR Z\ĂZLHWOHQLDGRGDZDQ\MHVWQRZ\ ZLHUV]IUDJPHQWXWDEOLF]NLPQRĝHQLD RUD]]QDNQRZHJRZLHUV]D'ODWHJR WHĝRSHUDWRU+=MHVWVNUöWHPGOD SROHFHQLDmsg = msg + ’nowy msg’ 'RNïDGQHRPöZLHQLHWHJRSROHFHQLD ]QDMG]LHV]QDGROHQDVWÚSQHMVWURQ\ 'UXJLHSROHFHQLHSRZRGXMH LQNUHPHQWDFMÚRMHGHQZDUWRĂFL ]PLHQQHMOLF]QLND ,QNUHPHQWDFMD MHVWSU]HSURZDG]DQDZHZQÈWU]SÚWOL DQLHZMHMZDUXQNX 3R]DNRñF]HQLXG]LDïDQLDSÚWOL LQWHUSUHWHUSU]HFKRG]LGRZ\NRQDQLD SLHUZV]HJRZLHUV]DSREORNX SÚWOLFRZRPDZLDQ\PSU]\NïDG]LH R]QDF]DZ\ĂZLHWOHQLHQDVWURQLH ]DZDUWRĂFL]PLHQQHMmsg 182 '(&<=-(,3}7/( :RPDZLDQHMSÚWOLZDUXQHNRNUHĂODĝHNRGSRZLQLHQE\Ê Z\NRQDQ\G]LHZLÚFLRNURWQLH=QDF]QLHEDUG]LHMW\SRZH Xĝ\FLHSÚWOLwhile]DFKRG]LZV\WXDFMDFKNLHG\QLH wiadomoLOHUD]\SRZLQLHQE\ÊZ\NRQDQ\NRGSÚWOL3ÚWOD EÚG]LHG]LDïDïDGRSöNLGRSöW\ZDUXQHNMHVWVSHïQLDQ\ UŻYCIE PĘTLI DO-WHILE c04/js/do-while-loop.js JAVASCRIPT YDUL 3U]\SLVDQLHOLF]QLNRZLZDUWRĂFL YDUPVJ ĳĳ.RPXQLNDW =PLHQQDSU]HFKRZXMHIUDJPHQWWDEOLF]NLPQRĝHQLD do { PVJ Lĳ[ ĳ L ĳEU!ĳ L `ZKLOH L =ZUöÊXZDJÚĝHFKRÊOLF]QLNPDZDUWRĂÊ WRSÚWODLWDN]RVWDMHZ\NRQDQD GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ LQQHU+70/ PVJ .OXF]RZDUöĝQLFDPLÚG]\ SÚWODPLwhileLdo-while SROHJDQDW\PĝHZWHMGUXJLHM SÚWOLSROHFHQLDZEORNXNRGXVÈ Z\NRQ\ZDQHSU]HGVSUDZG]HQLHPZDUXQNX2]QDF]DWRĝH SROHFHQLD]RVWDQÈZ\NRQDQHFR QDMPQLHMMHGHQUD]QDZHWMHĂOL ZDUXQHNQLH]RVWDQLHVSHïQLRQ\ 6SöMU]QDZDUXQHNVSUDZG]DP\F]\ZDUWRĂÊ]PLHQQHMiMHVW PQLHMV]DQLĝ1:DUWRĂÊELHĝÈFD WHM]PLHQQHMWR1 'ODWHJRWHĝIUDJPHQWWDEOLF]NL PQRĝHQLD]RVWDMHZ\ĂZLHWORQ\ QDVWURQLHSRPLPRWHJRĝH ZDUWRĂÊOLF]QLNDMHVWZLÚNV]D RG1 WYNIK 1LHNWöU]\SURJUDPLĂFL]DSLVXMÈ SROHFHQLHwhileZRGG]LHOQ\P ZLHUV]XSR]DP\NDMÈF\P QDZLDVLHNODPURZ\P 2PöZLHQLHSLHUZV]HJRSROHFHQLD]SU]\NïDGöZ SU]HGVWDZLRQ\FKQDREXVWURQDFK 1 2 3 4 5 6 PVJ Lĳ[ ĳ L ĳEU!ĳ 1. 3REUDQLH]PLHQQHMRQD]ZLHmsg 2. 'RGDQLHGRQLHMZVND]DQHMZDUWRĂFL 3. :DUWRĂÊOLF]QLND 4. 'RGDQLHFLÈJXWHNVWRZHJRx 5 = 5. 3RPQRĝHQLHOLF]QLNDSU]H]5 6. 'RGDQLH]QDNXNRñFDZLHUV]D '(&<=-(,3}7/( 183 184 '(&<=-(,3}7/( PRZYKŁAD DECYZJE I PĘTLE :W\PSU]\NïDG]LHXĝ\WNRZQLN]REDF]\ Z\ĂZLHWORQÈRSHUDFMÚGRGDZDQLDOXEPQRĝHQLD GDQHMOLF]E\6NU\SWSRND]XMHXĝ\FLHORJLNL ZDUXQNRZHMRUD]SÚWOL 1DSRF]ÈWNXPDP\GHNODUDFMHGZöFK]PLHQQ\FK 1. =PLHQQDnumberSU]HFKRZXMHOLF]EÚQDNWöUHM]RVWDQÈSU]HSURZDG]RQHREOLF]HQLD ZRPDZLDQ\PSU]\SDGNXWR3 2. =PLHQQDoperatorZVND]XMHURG]DMZ\NRQ\ZDQHMRSHUDFMLGRGDZDQLHOXEPQRĝHQLH ZRPDZLDQ\PSU]\SDGNXWRGRGDZDQLH .RQVWUXNFMDif-elseVïXĝ\GRZ\ERUXRSHUDFML GRGDZDQLHOXE PQRĝHQLH SU]HSURZDG]DQHMQDGDQHMOLF]ELH-HĝHOLZDUWRĂFLÈ ]PLHQQHMRQD]ZLHoperatorEÚG]LHadditionWROLF]E\]RVWDQÈ GRGDQH:SU]HFLZQ\PUD]LHEÚGÈSRPQRĝRQH :NRQVWUXNFMLZDUXQNRZHMSÚWODwhileMHVWXĝ\ZDQDGRREOLF]HQLD Z\QLNX3ÚWODZ\NRQDLWHUDFMLSRQLHZDĝZZDUXQNXVSUDZG]DP\ F]\ZDUWRĂÊOLF]QLNDMHVWPQLHMV]DQLĝ11 '(&<=-(,3}7/( 185 PRZYKŁAD DECYZJE I PĘTLE c04/example.html HTML '2&7<3(KWPO! <html> <head> <title>7UDğÊZG]LHVLÈWNÚ</title> OLQNUHO ĵVW\OHVKHHWĵKUHI ĵFVVFFVVĵ! </head> <body> VHFWLRQLG ĵSDJHĵ! <h1>7UDğÊZG]LHVLÈWNÚ</h1> LPJVUF ĵLPDJHVWHDFKHUSQJĵLG ĵWHDFKHUĵDOW ĵĵ! VHFWLRQLG ĵEODFNERDUGĵ!VHFWLRQ! </section> VFULSWVUF ĵMVH[DPSOHMVĵ!VFULSW! </body> </html> 2PDZLDQ\WXWDMNRG+70/MHVWQLHFRLQQ\ RGSR]RVWDï\FKSU]\NïDGöZSU]HGVWDZLRQ\FK ZUR]G]LDOHSRQLHZDĝJHQHUXMHWDEOLFÚV]NROQÈ QDNWöUHMQDVWÚSQLHEÚGÈZ\ĂZLHWORQHGDQH 186 '(&<=-(,3}7/( -DNPRĝHV]]REDF]\ÊVNU\SW]RVWDïQDVWURQLH GRGDQ\WXĝSU]HG]DP\NDMÈF\P]QDF]QLNLHP </body> PRZYKŁAD DECYZJE I PĘTLE c04/js/example.js JAVASCRIPT YDUWDEOH /LF]EDQDNWöUHMEÚGÈSU]HSURZDG]DQHRSHUDFMH YDURSHUDWRU ĳDGGLWLRQĳ5RG]DMREOLF]Hñ GRP\ĂOQLHWRGRGDZDQLH YDUL 3U]\SLVDQLHOLF]QLNRZLZDUWRĂFL YDUPVJ ĳĳ.RPXQLNDW if (operator === ’addition’) { -HĝHOLZDUWRĂFLÈ]PLHQQHMRSHUDWRUMHVW DGGLWLRQ while (i < 11) { 'RSöNLOLF]QLNPDZDUWRĂÊPQLHMV]ÈQLĝ PVJ LĳĳWDEOHĳ ĳ LWDEOH ĳEU!ĳ2EOLF]HQLD L'RGDQLHGRZDUWRĂFLOLF]QLND } } else { :SU]HFLZQ\PUD]LH while (i < 11) { 'RSöNLOLF]QLNPDZDUWRĂÊPQLHMV]ÈQLĝ PVJ Lĳ[ĳWDEOHĳ ĳ L WDEOH ĳEU!ĳ2EOLF]HQLD L'RGDQLHGRZDUWRĂFLOLF]QLND } } :\ĂZLHWOHQLHQDVWURQLH]DZDUWRĂFL]PLHQQHMPVJ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳEODFNERDUGĳ HOLQQHU+70/ PVJ *G\]DSR]QDV]VLÚ]NRPHQWDU]DPLZNRG]LH EÚG]LHV]ZLHG]LDïMDNRQG]LDïD1DSRF]ÈWNX VNU\SWXPDP\GHNODUDFMÚLSU]\SLVDQLHZDUWRĂFL F]WHUHP]PLHQQ\P 1DVWÚSQLHZSROHFHQLXifVSUDZG]DP\F]\ ZDUWRĂFLÈ]PLHQQHMRQD]ZLHoperatorMHVW addition-HĝHOLWDNWRSÚWODwhileMHVWXĝ\ZDQD GRSU]HSURZDG]HQLDREOLF]HñLXPLHV]F]HQLDLFK Z\QLNXZ]PLHQQHMmsg -HĝHOL]PLHQLV]ZDUWRĂÊ]PLHQQHMoperatorQD MDNÈNROZLHNLQQÈQLĝadditionWRNRQVWUXNFMD ZDUXQNRZDZ\ELHU]HGUXJL]HVWDZSROHFHñ7HQ ]HVWDZWDNĝH]DZLHUDSÚWOÚwhileDOHW\PUD]HP SU]HSURZDG]DMÈFÈRSHUDFMHPQRĝHQLD ]DPLDVW GRGDZDQLD *G\Z\EUDQDSÚWOD]DNRñF]\G]LDïDQLHRVWDWQLH GZDZLHUV]HVNU\SWXSRELHUDMÈHOHPHQWNWöUHJR DWU\EXWidPDZDUWRĂÊEODFNERDUGDQDVWÚSQLH XPLHV]F]DMÈQDVWURQLH]DZDUWRĂÊ]PLHQQHMmsg '(&<=-(,3}7/( 187 PODSUMOWANIE DECYZJE I PĘTLE f 3ROHFHQLDZDUXQNRZHSR]ZDODMÈQDSRGHMPRZDQLHZNRG]LH GHF\]MLGRW\F]ÈF\FKGDOV]HJRVSRVREXMHJRZ\NRQ\ZDQLD f 2SHUDWRU\SRUöZQDQLD === == <><==> VÈ Xĝ\ZDQHGRSRUöZQ\ZDQLDGZöFKRSHUDQGöZ f 2SHUDWRU\ORJLF]QHSR]ZDODMÈQDïÈF]HQLHFRQDMPQLHMGZöFK ]HVWDZöZRSHUDWRUöZSRUöZQDQLD f .RQVWUXNFMDif-elseSR]ZDODQDZ\NRQDQLHMHGQHJR]HVWDZX NRGXJG\ZDUXQHNSU]\MPXMHZDUWRĂÊtrueRUD]LQQHJRMHĂOL ZDUXQHNPDZDUWRĂÊfalse f .RQVWUXNFMDswitchSR]ZDODQDSRUöZQ\ZDQLHZDUWRĂFL ]PRĝOLZ\PLGRX]\VNDQLDZ\QLNDPL DSRQDGWR]DSHZQLD RSFMÚGRP\ĂOQÈXĝ\ZDQÈZSU]\SDGNXEUDNXGRSDVRZDQLD f 7\S\GDQ\FKPRJÈE\Ê]PLHQLDQH f :V]\VWNLHZDUWRĂFLPRĝQDRFHQLÊMDNRtruthyOXEfalsy f ,VWQLHMÈWU]\URG]DMHSÚWOLforwhileLdo-while.DĝGD]QLFK SR]ZDODQDSRZWöU]HQLHZ\NRQDQLDSHZQHJR]HVWDZXSROHFHñ 188 '(&<=-(,3}7/( 5 OBIEKTOWY MODEL DOKUMENTU Obiektowy model dokumentu (ang. document object modelĽ'20 RNUHĂODMDNSU]HJOÈGDUND SRZLQQDXWZRU]\ÊPRGHO+70/VWURQ\LQWHUQHWRZHM DWDNĝHMDN-DYD6FULSWPRĝHX]\VNDÊGRVWÚSGR]DZDUWRĂFLVWURQ\L]PRG\ğNRZDÊWÚ]DZDUWRĂÊSRGF]DVZ\ĂZLHWODQLDVWURQ\ZRNQLHSU]HJOÈGDUNL 0RGHO'20QLHMHVWF]ÚĂFLÈDQL+70/DQL-DYD6FULSWĽMHVWWRRGG]LHOQ\]ELöUUHJXï LPSOHPHQWRZDQ\SU]H]SURGXFHQWöZZV]\VWNLFKQDMZDĝQLHMV]\FKSU]HJOÈGDUHNLQWHUQHWRZ\FK REHMPXMHGZDSRGVWDZRZHREV]DU\ UTWORZENIE MODELU STRONY HTML .LHG\SU]HJOÈGDUNDZF]\WXMHVWURQÚZSDPLÚFLWZRU]\PRGHOWHMVWURQ\ 0RGHO'20RNUHĂODVSRVöEZMDNLSU]HJOÈGDUNDSRZLQQDSU]\JRWRZDÊMHJRVWUXNWXUÚ ]Z\NRU]\VWDQLHPdrzewa modelu DOM. 0RGHO'20MHVWQD]\ZDQ\PRGHOHP RELHNWRZ\PSRQLHZDĝVNïDGDVLÚ]RELHNWöZ GU]HZRPRGHOX'20 .DĝG\RELHNWSU]HGVWDZLDLQQÈF]ÚĂÊVWURQ\ ZF]\WDQÈZRNQLHSU]HJOÈGDUNL 190 OBIEKTOWY MODEL DOKUMENTU UZYSKANIE DOSTĘPU DO STRONY HTML I JEJ MODYFIKACJA 0RGHO'20GHğQLXMHUöZQLHĝPHWRG\ LZïDĂFLZRĂFLVïXĝÈFHGRX]\VNLZDQLDGRVWÚSX GR LXDNWXDOQLDQLD SRV]F]HJöOQ\FKRELHNWöZ PRGHOXNWöUH]NROHLXDNWXDOQLDMÈ]DZDUWRĂÊ ZLG]LDQÈSU]H]Xĝ\WNRZQLNDZRNQLHSU]HJOÈdarki. 0RĝHV]VLÚVSRWNDÊ]V\WXDFMÈZNWöUHMPRGHO '20MHVWQD]\ZDQ\interfejsem programowania aplikacji (API),QWHUIHMVXĝ\WNRZQLND SR]ZDODOXG]LRPQDNRU]\VWDQLH]SURJUDPöZ ]NROHL$3,SR]ZDODSURJUDPRP LVNU\SWRP QDZ]DMHPQÈNRPXQLNDFMÚ0RGHO'20 RNUHĂODFRVNU\SWPRĝH]URELÊ]ELHĝÈFÈ VWURQÈZF]\WDQÈZSU]HJOÈGDUFHLQWHUQHWRZHM DWDNĝHMDNPRĝHZ\GDZDÊSU]HJOÈGDUFH SROHFHQLDXDNWXDOQLDMÈFH]DZDUWRĂÊZ\ĂZLHWODQÈXĝ\WNRZQLNRZL :SU]\NïDGDFKSRND]DQ\FKZW\P UR]G]LDOHNRG-DYD6FULSWEÚG]LH PRG\ğNRZDïSU]HGVWDZLRQ\WXWDM GRNXPHQW+70/.RORU\]RVWDï\ Xĝ\WHZFHOXR]QDF]HQLDSULRU\WHWX LVWDQXSRV]F]HJöOQ\FKHOHPHQWöZ OLVW\U]HF]\GR]URELHQLD PILNE SPOKOJNIE NORMALNE ZAKOŃCZONE OBIEKTOWY MODEL DOKUMENTU 191 DRZEWO MODELU DOM JEST MODELEM STRONY INTERNETOWEJ .LHG\SU]HJOÈGDUNDZF]\WXMHVWURQÚLQWHUQHWRZÈWZRU]\MHMPRGHOĽ W]ZPRGHOGU]HZD'20NWöU\MHVWSU]HFKRZ\ZDQ\ZSDPLÚFL]DMPRZDQHM SU]H]SU]HJOÈGDUNÚ6NïDGDVLÚ]F]WHUHFKSRGVWDZRZ\FKW\SöZZÚ]ïöZ CZĘŚĆ GŁÓWNA STRONY HTML <html> <body> <div id=”page”> <h1 id=”header”>Lista</h1> <h2>$UW\NXï\VSRĝ\ZF]H</h2> <ul> <li LG ĵRQHĵFODVV ĵKRWĵ><em>ĂZLHĝH</em> ğJL</li> <li LG ĵWZRĵFODVV ĵKRWĵ>RU]HV]NLSLQLRZH</li> <li LG ĵWKUHHĵFODVV ĵKRWĵ>miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> VFULSWVUF ĵMVOLVWMVĵ!VFULSW! </div> </body> </html> WĘZEŁ DOCUMENT 3RZ\ĝHMSU]HGVWDZLRQRNRG+70/OLVW\U]HF]\ GRNXSLHQLDQDWRPLDVWSRSUDZHMVWURQLHdrzewo modelu DOM.DĝG\HOHPHQWDWU\EXWLIUDJPHQW WHNVWXZNRG]LH+70/MHVWSU]HGVWDZLDQ\]DSRPRFÈZïDVQHJRZÚ]ïD'201DVDPHMJöU]HGU]HZD ]QDMGXMHVLÚZÚ]HïGRFXPHQWNWöU\SU]HGVWDZLD FDïÈVWURQÚ LMHGQRF]HĂQLHRGSRZLDGDRELHNWRZL GRFXPHQWNWöU\SR]QDïHĂZUR]G]LDOH .LHG\X]\VNXMHV]GRVWÚSGRGRZROQHJRZÚ]ïD HOHPHQWXDWU\EXWXOXEWHNVWXSU]HFKRG]LV]GR QLHJR]DSRPRFÈZÚ]ïDGRFXPHQW7RMHVWSXQNW Z\MĂFLDGODZV]\VWNLFKZL]\WZGU]HZLHPRGHOX DOM. 192 OBIEKTOWY MODEL DOKUMENTU WĘZŁY ELEMENTÓW (OHPHQW\+70/RSLVXMÈVWUXNWXUÚVWURQ\+70/ =QDF]QLNLRG<h1> do <h6>ZVND]XMÈQDJïöZNL ]QDF]QLN<p>R]QDF]DDNDSLWWHNVWXLWG $E\X]\VNDÊGRVWÚSGRGU]HZDPRGHOX'20 QDOHĝ\UR]SRF]ÈÊRGZ\V]XNLZDQLDHOHPHQWöZ Po]QDOH]LHQLXĝÈGDQHJRHOHPHQWXPDP\GRVWÚS GRZÚ]ïöZMHJRWHNVWXLDWU\EXWXRLOH]DFKRG]L SRWU]HED'ODWHJRPHWRG\SR]ZDODMÈFHQDGRVWÚS GRZÚ]ïöZHOHPHQWXSR]QDV]ZF]HĂQLHMQLĝ VSRVRE\QDX]\VNDQLHGRVWÚSXGRWHNVWXEÈGě DWU\EXWöZ Uwaga:3U]\NïDGOLVW\U]HF]\GRNXSLHQLD EÚG]LHP\Z\NRU]\VW\ZDÊZUR]G]LDOHELHĝÈF\P RUD]ZGZöFKNROHMQ\FK']LÚNLWHPXEÚG]LHV] PöJï]REDF]\ÊMDNUöĝQHWHFKQLNLSR]ZDODMÈQD XDNWXDOQLHQLHVWURQ\LQWHUQHWRZHM SU]HGVWDZLDQHM SU]H]WRGU]HZRPRGHOX'20 5HODFMHPLÚG]\ZÚ]ïHPGRFXPHQWLZV]\VWNLPL ZÚ]ïDPLHOHPHQWöZVÈRNUHĂODQHW\PLVDP\PL WHUPLQDPLQDGU]ÚGQ\SRWRPQ\UöZQRU]ÚGQ\ SU]RGHNLSRWRPHN .DĝG\ZÚ]HïMHVWSRWRPNLHP ZÚ]ïDGRFXPHQW). .DĝG\ZÚ]HïMHVWGRNXPHQWHPZUD]]PHWRGDPLLZïDĂFLZRĂFLDPL 6NU\SW\X]\VNXMÈGRVWÚSGRGU]HZDPRGHOX'20 QLHSOLNXěUöGïRZHJR +70/ LXDNWXDOQLDMÈMH:V]HONLH]PLDQ\ZSURZDG]RQHZGU]HZLH PRGHOX'20VÈRG]ZLHUFLHGODQHZSU]HJOÈGDUFH GRFXPHQW DRZEWO MODELU DOM html body div h1 em atrybut tekst h2 atrybut tekst li atrybut ul VFULSW atrybut tekst li atrybut tekst li atrybut tekst li atrybut tekst tekst WĘZŁY ATRYBUTÓW 2WZLHUDMÈF\]QDF]QLNHOHPHQWX+70/PRĝH ]DZLHUDÊDWU\EXW\NWöUHZGU]HZLHPRGHOX'20 VÈSUH]HQWRZDQHSU]H]ZÚ]ï\DWU\EXWöZ :Ú]ï\DWU\EXWöZQLHVÈelementami potomnymi ]DZLHUDMÈFHJRJRHOHPHQWXDOHVWDQRZLÈF]ÚĂÊ GRNXPHQWX*G\X]\VNDV]GRVWÚSGRHOHPHQWX GRVWÚSQHEÚGÈRNUHĂORQHPHWRG\LZïDĂFLZRĂFL -DYD6FULSWSR]ZDODMÈFHQDRGF]\WOXE]PLDQÚ DWU\EXWöZWHJRHOHPHQWX1DSU]\NïDGF]ÚVWRWU]HEDGRNRQ\ZDÊ]PLDQZDUWRĂFLDWU\EXWöZFODVV ZFHOX]DVWRVRZDQLDQRZ\FKUHJXï&66PDMÈF\FK ZSï\ZQDVSRVöESUH]HQWDFMLGDQHJRHOHPHQWX WĘZŁY TEKSTOWE *G\X]\VNDP\GRVWÚSGRZÚ]ïDHOHPHQWX PRĝHP\SU]HMĂÊGRWHNVWXSU]HFKRZ\ZDQHJR ZW\PHOHPHQFLH7HNVW]QDMGXMHVLÚZHZïDVQ\P ZÚěOHWHNVWRZ\P :Ú]ï\WHNVWRZHQLHPRJÈPLHÊHOHPHQWöZ SRWRPQ\FK-HĝHOLHOHPHQW]DZLHUDWHNVWRUD]LQQ\ HOHPHQWSRWRPQ\WRWHQHOHPHQWSRWRPQ\nieMHVW SRWRPNLHPZÚ]ïDWHNVWRZHJRDOHUDF]HMobejmuMÈFHJRJRHOHPHQWX =DSR]QDMVLÚ]HOHPHQWHP <em>ZSLHUZV]\PHOHPHQFLH<li> 7RSRND]XMH ĝHZÚ]HïWHNVWRZ\]DZV]HMHVWQRZÈJDïÚ]LÈ ZGU]HZLHPRGHOX'20]NWöUHMQLHZ\ZRG]ÈVLÚ ĝDGQHGDOV]HJDïÚ]LH OBIEKTOWY MODEL DOKUMENTU 193 PRACA Z DRZEWEM MODELU DOM 8]\VNDQLHGRVWÚSXGRGU]HZDPRGHOX '20LPRĝOLZRĂÊMHJRXDNWXDOQLDQLD Z\PDJDMÈZ\NRQDQLDGZöFKNURNöZ 2GV]XNDQLHZÚ]ïDSU]HGVWDZLDMÈFHJR HOHPHQW]NWöU\PFKFHV]SUDFRZDÊ 8ĝ\FLHMHJR]DZDUWRĂFLWHNVWRZHM HOHPHQWöZSRWRPQ\FKLDWU\EXWöZ KROK 1. UZYSKANIE DOSTĘPU DO ELEMENTÓW 3RQLĝHMSU]HGVWDZLRQRRJöOQHRPöZLHQLHPHWRGLZïDĂFLZRĂFLSR]ZDODMÈF\FKQDX]\VNDQLHGRVWÚSX GRHOHPHQWöZ,FKSU]\EOLĝHQLH]QDMG]LHV]ZSRGUR]G]LDïDFKRGķ8]\VNDQLHGRVWÚSXGRHOHPHQWöZĵ GRķ3LHUZV]\LRVWDWQLHOHPHQWSRWRPQ\ĵ 3LHUZV]HGZLHNROXPQ\VÈ]QDQHMDNR]DS\WDQLDPRGHOX'20=NROHLRVWDWQLDNROXPQDMHVW]QDQDMDNR SRUXV]DQLHVLÚSRPRGHOX'20 WYBÓR KONKRETNEGO WĘZŁA ELEMENTU WYBÓR WIELU ELEMENTÓW (NODELIST) PORUSZANIE SIĘ MIĘDZY WĘZŁAMI ELEMENTÓW 3RQLĝHMZ\PLHQLRQRWU]\VSRVRE\ QDMF]ÚĂFLHMXĝ\ZDQHZFHOX wyboru konkretnego elementu. 3RQLĝHMZ\PLHQLRQRWU]\ VSRVRE\QDMF]ÚĂFLHMXĝ\ZDQH ZFHOXZ\ERUXZLHOXHOHPHQWöZ ,VWQLHMHPRĝOLZRĂÊSU]HMĂFLD ]MHGQHJRZÚ]ïDHOHPHQWXGR LQQHJRSRZLÈ]DQHJR]QLP getElementById() 8ĝ\ZDZDUWRĂFLDWU\EXWXid HOHPHQWX SRZLQQDE\ÊXQLNDOQD QDVWURQLH 3DWU]SRGUR]G]LDï ķ3REUDQLHHOHPHQWXQDSRGVWDZLHZDUWRĂFLDWU\EXWXLGĵ getElementsByClassName() :\ELHUDZV]\VWNLHHOHPHQW\ NWöUHPDMÈRNUHĂORQÈZDUWRĂÊ atrybutu FODVV3DWU]SRGUR]G]LDïķ3REUDQLHHOHPHQWXQD SRGVWDZLHZDUWRĂFLDWU\EXWX FODVVĵ parentNode :\ELHUDHOHPHQWQDGU]ÚGQ\ ELHĝÈFHJRZÚ]ïDHOHPHQWX NWöU\]ZUöFLSRSURVWXMHGHQ HOHPHQW 3DWU]SRGUR]G]LDï ķ3RUXV]DQLHVLÚSRPRGHOX '20ĵ TXHU\6HOHFWRU 8ĝ\ZDVHOHNWRUD&66L]ZUDFD SLHUZV]\GRSDVRZDQ\HOHPHQW 3DWU]SRGUR]G]LDïķ3REUDQLH HOHPHQWXQDSRGVWDZLH VHOHNWRUD&66ĵ getElementsByTagName() :\ELHUDZV]\VWNLHHOHPHQW\ NWöUHPDMÈRNUHĂORQÈQD]ZÚ ]QDF]QLND3DWU]SRGUR]G]LDï ķ3REUDQLHHOHPHQWXQDSRGVWDZLHQD]Z\]QDF]QLNDĵ previousSibling / nextSibling :\ELHUDSRSU]HGQLOXEQDVWÚSQ\ HOHPHQWUöZQRU]ÚGQ\ZGU]HZLH PRGHOX'203DWU]SRGUR]G]LDï ķ3RSU]HGQLLQDVWÚSQ\HOHPHQW UöZQRU]ÚGQ\ĵ 3RV]F]HJöOQHHOHPHQW\PRĝQD WDNĝHZ\ELHUDÊSU]H]SU]HMĂFLH ]MHGQHJRHOHPHQWXGRLQQHJR ZGU]HZLHPRGHOX'20 SDWU] WU]HFLDNROXPQD TXHU\6HOHFWRU$OO 8ĝ\ZDVHOHNWRUD&66ZFHOX Z\EUDQLDZV]\VWNLFKGRSDVRZDQ\FKHOHPHQWöZ3DWU] SRGUR]G]LDïķ3REUDQLHHOHPHQWX QDSRGVWDZLHVHOHNWRUD&66ĵ ğUVW&KLOGODVW&KLOG :\ELHUDSLHUZV]\OXERVWDWQL HOHPHQWSRWRPQ\ELHĝÈFHJR HOHPHQWX3DWU]SRGUR]G]LDï ķ3LHUZV]\LRVWDWQLHOHPHQW SRWRPQ\ĵ 194 OBIEKTOWY MODEL DOKUMENTU :UR]G]LDOHQDWUDğV]QDXZDJLMHĂOLPHWRG\PRGHOX'20EÚGÈG]LDïDÊW\ONRZRNUHĂORQ\FKSU]HJOÈGDUNDFKOXEEÚGÈ]DZLHUDÊEïÚG\1LHVSöMQDREVïXJDPRGHOX'20SU]H]SU]HJOÈGDUNLWRQDMZDĝQLHMV]\ SRZöGGODNWöUHJRELEOLRWHNDM4XHU\]\VNDïDWDNZLHONÈSRSXODUQRĂÊ 3RMÚFLDelementy i ZÚ]ï\HOHPHQWöZVÈXĝ\ZDQHZ\PLHQQLH -HGQDNNLHG\PöZLP\ĝHPRGHO'20G]LDïD]HOHPHQWHPWDNQDSUDZGÚ PDP\QDP\ĂOLSUDFÚ]ZÚ]ïHPSU]HGVWDZLDMÈF\P dany element. KROK 2. PRACA Z WYBRANYMI ELEMENTAMI 3RQLĝHMSU]HGVWDZLRQRRJöOQHRPöZLHQLHPHWRGLZïDĂFLZRĂFLSU]H]QDF]RQ\FKGRSUDF\]HOHPHQWDPL ZSURZDG]RQ\PLZSRGUR]G]LDOHķ'U]HZRPRGHOX'20MHVWPRGHOHPVWURQ\LQWHUQHWRZHMĵ UZYSKANIE DOSTĘPU DO WĘZŁÓW TEKSTOWYCH I ICH UAKTUALNIENIE li PRACA Z ZAWARTOŚCIĄ HTML li atrybut 1. :\ELHU]HOHPHQW<li>. 2. 8ĝ\MZïDĂFLZRĂFLğUVW&KLOG ZFHOXSREUDQLDZÚ]ïD WHNVWRZHJR 3. 8ĝ\MZïDĂFLZRĂFLMHG\QLHZÚ]ïDWHNVWRZHJR nodeValue) ZFHOXSREUDQLDWHNVWX danego elementu. nodeValue 7DZïDĂFLZRĂÊSR]ZDOD QDX]\VNDQLHGRVWÚSXGR ]DZDUWRĂFLZÚ]ïDWHNVWRZHJR LQDMHMXDNWXDOQLHQLH3DWU] SRGUR]G]LDïķ8]\VNDQLHGRVWÚSX GRZÚ]ïDWHNVWRZHJR]DSRPRFÈ ZïDĂFLZRĂFLQRGH9DOXHLMHJR XDNWXDOQLHQLHĵ :Ú]HïWHNVWRZ\QLH]DZLHUD WHNVWXSRFKRG]ÈFHJR]MDNLFKNROZLHNHOHPHQWöZSRWRPQ\FK atrybut tekst tekst 7HNVWZGRZROQ\PHOHPHQFLH MHVWSU]HFKRZ\ZDQ\ZHZQÈWU] ZÚ]ïDWHNVWRZHJR$E\X]\VNDÊ GRVWÚSGRSRND]DQHJRSRZ\ĝHM ZÚ]ïDWHNVWRZHJR UZYSKANIE DOSTĘPU DO WARTOŚCI ATRYBUTU LUB JEJ UAKTUALNIENIE :\PLHQLRQDSRQLĝHMZïDĂFLZRĂÊ XPRĝOLZLDX]\VNDQLHGRVWÚSX GRHOHPHQWöZSRWRPQ\FK L]DZDUWRĂFLWHNVWRZHM innerHTML 3DWU]SRGUR]G]LDïķ8]\VNDQLH GRVWÚSXGRWHNVWXRUD]NRGX ]QDF]QLNöZ]DSRPRFÈ ZïDĂFLZRĂFLLQQHU+70/LLFK XDNWXDOQLHQLHĵ =NROHLSRQLĝV]DZïDĂFLZRĂÊ SR]ZDODQDGRVWÚSGRMHG\QLH ]DZDUWRĂFLWHNVWRZHM textContent 3DWU]SRGUR]G]LDïķ8]\VNDQLH GRVWÚSXGRWHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQW LLQQHU7H[W ĵ .LONDPHWRGSR]ZDODQDWZRU]HQLHQRZ\FKZÚ]ïöZGRGDZDQLH ZÚ]ïöZGRGU]HZDDWDNĝH XVXZDQLHZÚ]ïöZ]GU]HZD FUHDWH(OHPHQW FUHDWH7H[W1RGH appendChild() / removeChild() 7RWDN]ZDQHRSHUDFMHQD PRGHOX'203DWU]SRGUR]G]LDï ķ'RGDQLHHOHPHQWöZ]DSRPRFÈ RSHUDFMLQDPRGHOX'20ĵ 3RQLĝHMSU]HGVWDZLRQRNLOND ZïDĂFLZRĂFLLPHWRGNWöUH PRĝQDZ\NRU]\VWDÊSRGF]DV SUDF\]DWU\EXWDPL FODVV1DPHLG 3R]ZDODQDSREUDQLHOXEXDNWXDOQLHQLHZDUWRĂFLDWU\EXWöZ FODVV i id3DWU]SRGUR]G]LDï ķ:Ú]ï\DWU\EXWöZĵ hasAttribute() getAttribute() setAttribute() removeAttribute() 3LHUZV]D]Z\PLHQLRQ\FK PHWRGVSUDZG]DF]\ZVND]DQ\ DWU\EXWLVWQLHMH'UXJDSRELHUD MHJRZDUWRĂÊWU]HFLDXDNWXDOQLD MHJRZDUWRĂÊ]NROHLF]ZDUWD SR]ZDODQDMHJRXVXQLÚFLH 3DWU]SRGUR]G]LDïķ:Ú]ï\ DWU\EXWöZĵ OBIEKTOWY MODEL DOKUMENTU 195 BUFOROWANIE ZAPYTAŃ MODELU DOM 0HWRG\Z\V]XNXMÈFHHOHPHQW\ZGU]HZLHPRGHOX'20VÈQD]\ZDQH ]DS\WDQLDPLPRGHOX'20.LHG\]GDQ\PHOHPHQWHPPXVLV]SUDFRZDÊ ZLÚFHMQLĝW\ONRMHGHQUD]UR]VÈGQ\PUR]ZLÈ]DQLHPMHVWXĝ\FLH]PLHQQHM GRSU]HFKRZ\ZDQLDZ\QLNXGDQHJR]DS\WDQLD *G\VNU\SWZ\ELHUDHOHPHQW ZFHOXX]\VNDQLDGRQLHJR GRVWÚSXOXEXDNWXDOQLHQLDJR LQWHUSUHWHUPXVLZ\V]XNDÊHOHPHQW OXEHOHPHQW\ ZGU]HZLH modelu DOM. 3RQLĝV]HSROHFHQLHQDND]XMH LQWHUSUHWHURZLZ\V]XNDQLH ZGU]HZLHPRGHOX'20 HOHPHQWXNWöUHJRZDUWRĂFLÈ atrybutu idMHVWone. 3R]QDOH]LHQLXZÚ]ïDSU]HGVWDZLDMÈFHJRZVND]DQ\HOHPHQW OXEZVND]DQHHOHPHQW\ PRĝQD UR]SRF]ÈÊSUDFÚ]VDP\PZÚ]ïHPMHJRZÚ]ïHPQDGU]ÚGQ\P OXEMHJRGRZROQ\PLZÚ]ïDPL SRWRPQ\PL getElementById(’one’); body div h1 h2 ul VFULSW li li li li 196 OBIEKTOWY MODEL DOKUMENTU .LHG\SURJUDPLĂFLUR]PDZLDMÈRSU]HFKRZ\ZDQLXHOHPHQWöZZ]PLHQQ\FK WDNQDSUDZGÚPDMÈQDP\ĂOLSU]HFKRZ\ZDQLHZ]PLHQQHMSRïRĝHQLD HOHPHQWX OXEHOHPHQWöZ ZGU]HZLHPRGHOX'20:ïDĂFLZRĂFLLPHWRG\ WHJRZÚ]ïDHOHPHQWXG]LDïDMÈQD]PLHQQHM -HĝHOLVNU\SWPXVLXĝ\ÊWHJR VDPHJRHOHPHQWX OXEHOHPHQWöZ FRQDMPQLHMGZDUD]\ WRSRïRĝHQLHHOHPHQWXPRĝQD SU]HFKRZ\ZDÊZ]PLHQQHM 7\PVDP\PSU]HJOÈGDUND LQWHUQHWRZDQLHPXVLZLHORNURWQLHSU]HV]XNLZDÊGU]HZD PRGHOX'20DE\SRQRZQLH ]QDOHěÊWHQVDPHOHPHQW7DNLH UR]ZLÈ]DQLHMHVWRNUHĂODQLH mianem buforowania. 3URJUDPLĂFLPöZLÈĝH]PLHQQD SU]HFKRZXMHodniesienie GRRELHNWX]QDMGXMÈFHJRVLÚ ZGU]HZLHPRGHOX'20 3U]HFKRZ\ZDQHMHVWSRïRĝHQLH ZÚ]ïD var itemOne = getElementById(’one’); body div h1 h2 ul VFULSW li li li li Zmienna itemOneQLHSU]HFKRZXMHHOHPHQWX<li>DOH odniesienieGRPLHMVFDZNWöU\PWHQZÚ]Hï]QDMGXMH VLÚZGU]HZLHPRGHOX'20$E\X]\VNDÊGRVWÚSGR ]DZDUWRĂFLWHNVWRZHMHOHPHQWXPRĝQDXĝ\ÊQD]Z\ ]PLHQQHMLWHP2QHWH[W&RQWHQW. OBIEKTOWY MODEL DOKUMENTU 197 UZYSKANIE DOSTĘPU DO ELEMENTÓW =DS\WDQLDPRGHOX'20PRJÈ]ZUDFDÊW\ONRMHGHQHOHPHQWOXEWDN]ZDQ\ NodeListF]\OLNROHNFMÚZÚ]ïöZ 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 danego elementu). &]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<h1> QDVWURQLHOXEWHĝZV]\VWNLFK<li>ZUDPDFK ZVND]DQHMOLVW\ body div h1 h2 ul VFULSW li li li li 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 ĝHXĝ\WNRZQLNRGELHUDMÈMDNRIXQNFMRQXMÈFÈ VSUDZQLHLV]\ENRUHDJXMÈFÈQDMHJRG]LDïDQLD 1DMNUöWV]DWUDVD]Z\NOHR]QDF]DDQDOL]ÚPLQLPDOQHMOLF]E\ZÚ]ïöZQDGURG]HGRHOHPHQWX ]NWöU\PVNU\SWPDSUDFRZDÊ1DSU]\NïDG metoda getElementById()V]\ENR]ZUöFLMHGHQ HOHPHQW SRQLHZDĝQDVWURQLHLQWHUQHWRZHMQLHSRZLQQ\]QDMGRZDÊVLÚGZDHOHPHQW\RWDNLHMVDPHM ZDUWRĂFLDWU\EXWXid :\PLHQLRQÈPHWRGÚPRĝQD MHGQDN]DVWRVRZDÊW\ONRZWHG\JG\HOHPHQWPD ]GHğQLRZDQ\DWU\EXWid. 1DSU]\NïDGNLONDHOHPHQWöZPRĝHPLHÊ WDNÈVDPÈQD]ZÚ]QDF]QLNDDZLÚF getElementsByTagName()]DZV]H]ZUöFL NodeList. 198 OBIEKTOWY MODEL DOKUMENTU METODY ZWRACAJĄCE JEDEN WĘZEŁ ELEMENTU getElementById(’id’) 3RELHUDMHGHQHOHPHQWQDSRGVWDZLHZDUWRĂFLMHJRDWU\EXWXid. $E\HOHPHQWPRĝQDE\ïRZ\EUDÊ]QDF]QLN+70/PXVL]DZLHUDÊ atrybut id. 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( 2SHUDZV]\VWNLHZHUVMH&KURPH)LUHIR[L6DIDUL JHW(OHPHQW%\,G RQH TXHU\6HOHFWRU ĳVHOHNWRUFVVĳ :\NRU]\VWXMHVNïDGQLÚVHOHNWRUD&66Z\ELHUDMÈFHJRMHGHQHOHPHQW OXEZLÚFHMHOHPHQWöZ0HWRGDWD]ZUDFDW\ONRSLHUZV]\]GRSDVRZDQ\FKHOHPHQWöZ 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( )LUHIR[6DIDUL&KURPHL2SHUD TXHU\6HOHFWRU OLKRW METODY ZWRACAJĄCE CO NAJMNIEJ JEDEN ELEMENT (W POSTACI NODELIST) getElementsByClassName(’klasa’) :\ELHUDHOHPHQWOXEHOHPHQW\QDSRGVWDZLHZDUWRĂFLDWU\EXWX FODVV$E\HOHPHQWPRĝQDE\ïRZ\EUDÊ]QDF]QLN+70/PXVL ]DZLHUDÊDWU\EXWFODVV']LDïDQLHWHMPHWRG\MHVWV]\EV]HQLĝ TXHU\6HOHFWRU$OO . JHW(OHPHQWV%\&ODVV1DPH KRW 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( )LUHIR[6DIDUL&KURPHL2SHUD .LONDZF]HĂQLHMV]\FK ZHUVMLSU]HJOÈGDUHNRIHUXMHF]ÚĂFLRZÈOXE]DZLHUDMÈFÈEïÚG\REVïXJÚ WHMPHWRG\ JHW(OHPHQWV%\7DJ1DPH ĳQD]ZD=QDF]QLNDĳ :\ELHUDZV]\VWNLHHOHPHQW\QDVWURQLHSRVLDGDMÈFH]QDF]QLN RSRGDQHMQD]ZLH']LDïDQLHWHMPHWRG\MHVWV]\EV]HQLĝ TXHU\6HOHFWRU$OO .LONDZF]HĂQLHMV]\FKZHUVMLSU]HJOÈGDUHN RIHUXMHF]ÚĂFLRZÈOXE]DZLHUDMÈFÈEïÚG\REVïXJÚWHMPHWRG\ 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( )LUHIR[6DIDUL&KURPHL2SHUD JHW(OHPHQWV%\7DJ1DPH OL TXHU\6HOHFWRU$OO ĳVHOHNWRUFVVĳ 8ĝ\ZDVNïDGQLVHOHNWRUD&66ZFHOXZ\EUDQLDMHGQHJRHOHPHQWXOXE ZLÚNV]HMOLF]E\HOHPHQWöZDQDVWÚSQLH]ZUDFDZV]\VWNLHHOHPHQW\ GRSDVRZDQH 0HWRGDSRUD]SLHUZV]\REVïXJLZDQDZSU]HJOÈGDUNDFK,( )LUHIR[6DIDUL&KURPHL2SHUD TXHU\6HOHFWRU$OO OLKRW OBIEKTOWY MODEL DOKUMENTU 199 METODY WYBIERAJĄCE POSZCZEGÓLNE ELEMENTY Metody getElementById() i TXHU\6HOHFWRU SRWUDğÈSU]HV]XNDÊFDï\ GRNXPHQWL]ZUöFLÊSRMHG\QF]HHOHPHQW\2ELHFKDUDNWHU\]XMÈVLÚSRGREQÈ VNïDGQLÈ Metoda getElementById()WRQDMV]\EV]\ LQDMHIHNW\ZQLHMV]\VSRVöEX]\VNDQLDGRVWÚSX GRHOHPHQWXSRQLHZDĝGZDHOHPHQW\QLHPRJÈ PLHÊWHMVDPHMZDUWRĂFLDWU\EXWXid6NïDGQLD RPDZLDQHMPHWRG\]RVWDïDSU]HGVWDZLRQDSRQLĝHM DSU]\NïDGMHMXĝ\FLD]QDMG]LHV]QDVWURQLHSR SUDZHM documentRGQRVLVLÚGRRELHNWX GRFXPHQW=DSRPRFÈRELHNWXGRFXPHQW ]DZV]HPRĝHV]X]\VNDÊGRVWÚSGR SRV]F]HJöOQ\FKHOHPHQWöZ Metoda TXHU\6HOHFWRU WRQDMQRZV]\GRGDWHN GRPRGHOX'20DZLÚFQLHMHVWREVïXJLZDQD ZVWDUV]\FKZHUVMDFKSU]HJOÈGDUHN&KDUDNWHU\]XMHVLÚGXĝÈHODVW\F]QRĂFLÈSRQLHZDĝMHMSDUDPHWU MHVWVHOHNWRUHP&662]QDF]DWRPRĝOLZRĂÊXĝ\FLD RPDZLDQHMPHWRG\DE\WUDIQLHZ\EUDÊZLHOH HOHPHQWöZ Metoda getElementById()ZVND]XMH ĝHFKFHV]Z\V]XNDÊHOHPHQWQDSRGVWDZLHZDUWRĂFLMHJRDWU\EXWXid. OBIEKT METODA GRFXPHQWgetElementById(’one’) OPERATOR ELEMENTU SKŁADOWEGO PARAMETR 1RWDFMD]Xĝ\FLHPNURSNLZVND]XMH ĝHPHWRGD SRSUDZHM EÚG]LHZ\NRQDQD ZZÚěOHSRGDQ\PSROHZHMVWURQLH NURSNL 2PDZLDQHSROHFHQLH]ZUöFLZÚ]HïHOHPHQWXGOD HOHPHQWXNWöUHJRDWU\EXWidPDZDUWRĂÊone. %DUG]RF]ÚVWRPRĝQDVSRWNDÊVLÚ]V\WXDFMÈJG\ ZÚ]ï\HOHPHQWöZVÈSU]HFKRZ\ZDQHZ]PLHQQHM ZFHOXLFKSöěQLHMV]HJRXĝ\FLDZVNU\SFLH ZVSRPQLDQRMXĝRW\PZSRGUR]G]LDOHķ%XIRURZDQLH ]DS\WDñPRGHOX'20ĵ 200 OBIEKTOWY MODEL DOKUMENTU 0HWRGDPXVL]QDÊZDUWRĂÊ atrybutu idĝÈGDQHJR HOHPHQWX7RMHVWSDUDPHWU metody. :RPDZLDQ\PSROHFHQLXPHWRGDMHVWXĝ\ZDQD ZRELHNFLHGRFXPHQWDZLÚFZ\V]XNXMHHOHPHQW QDFDïHMVWURQLH0HWRG\PRGHOX'20PRJÈE\Ê WDNĝHXĝ\ZDQHZZÚ]ïDFKHOHPHQWöZQDVWURQLH DE\Z\V]XNDÊSRWRPNöZGDQHJRZÚ]ïD POBRANIE ELEMENTU NA PODSTAWIE WARTOŚCI ATRYBUTU ID JAVASCRIPT FMVJHWHOHPHQWE\LGMV // Wybór elementu i umieszczenie go w zmiennej. YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ =PLDQDZDUWRĂFLDWU\EXWXFODVV HOFODVV1DPH ĳFRROĳ HTML FMVH[DPSOHMV <h1 id=”header”>List King</h1> <h2>$UW\NXï\VSRĝ\ZF]H</h2> <ul> OLLG ĵRQHĵFODVV ĵKRWĵ!HP!ĂZLHĝH</em>ğJL</li> OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> WYNIK Metoda getElementById()SR]ZDODQD Z\EöUZÚ]ïDHOHPHQWXSU]H]SRGDQLH ZDUWRĂFLMHJRDWU\EXWXid. 2PDZLDQDPHWRGDPDW\ONRMHGHQ SDUDPHWUMDNLPMHVWZDUWRĂÊDWU\EXWX idHOHPHQWXNWöU\PD]RVWDÊZ\EUDQ\ 3RQLHZDĝZDUWRĂÊMHVWFLÈJLHP WHNVWRZ\PWRQDOHĝ\MÈXMÈÊZ]QDNL F\WRZDQLD1LHPD]QDF]HQLDF]\WR EÚGÈDSRVWURI\F]\FXG]\VïöZZDĝQH DE\SR]RVWDï\GRSDVRZDQH :SU]\NïDG]LHSROHZHMVWURQLHSLHUZV]\ ZLHUV]NRGX-DYD6FULSWZ\V]XNXMH HOHPHQWNWöUHJRZDUWRĂFLÈDWU\EXWX idMHVWoneLRGQLHVLHQLHGRWHJRZÚ]ïD SU]HFKRZXMHZ]PLHQQHMRQD]ZLHel. 1DVWÚSQLHNRGZ\NRU]\VWXMHZïDĂFLZRĂÊ RQD]ZLHFODVV1DPH EÚG]LHRPöZLRQD ZSRGUR]G]LDOHķ:Ú]ï\DWU\EXWöZĵ GRXDNWXDOQLHQLDZDUWRĂFLDWU\EXWX FODVVHOHPHQWXZVND]\ZDQHJRSU]H] ]PLHQQÈel:DUWRĂFLÈDWU\EXWX MHVWFRROFRSRZRGXMHZ\ZRïDQLH QRZHMUHJXï\&66RGSRZLHG]LDOQHM ]DXVWDZLHQLHNRORUXWïDHOHPHQWX =ZUöÊXZDJÚQDVSRVöEXĝ\FLDZïDĂFLZRĂFLFODVV1DPHZ]PLHQQHMSU]HFKRZXMÈFHMRGQLHVLHQLHGRHOHPHQWX :\QLNSRND]XMHSU]\NïDGSRW\PMDNVNU\SWXDNWXDOQLï SLHUZV]\HOHPHQWQDOLĂFLH3U]\NïDGZVWDQLHSRF]ÈWNRZ\P SU]HGXUXFKRPLHQLHPVNU\SWX ]RVWDïSRND]DQ\QDU\VXQNX ]SRGUR]G]LDïXķ8]\VNDQLHGRVWÚSXGRVWURQ\+70/LMHM PRG\ğNDFMDĵ 2EVïXJDZSU]HJOÈGDUNDFKLQWHUQHWRZ\FKĽWRMHGQD]QDMVWDUV]\FK LQDMOHSLHMREVïXJLZDQ\FKPHWRG SR]ZDODMÈF\FKQDX]\VNDQLHGRVWÚSX do elementu. OBIEKTOWY MODEL DOKUMENTU 201 NODELIST — ZAPYTANIA MODELU DOM ZWRACAJĄCE WIELE ELEMENTÓW Kiedy metoda DOM PRĝH]ZUöFLÊZLHOHHOHPHQWöZ DQLHW\ONRMHGHQ ZDUWRĂFLÈ]ZURWQÈMHVWNodeList QDZHWZSU]\SDGNXGRSDVRZDQLD W\ONRMHGQHJRHOHPHQWX NodeListWRNROHNFMDZÚ]ïöZHOHPHQWöZ.DĝG\ ZÚ]HïRWU]\PXMHQXPHULQGHNVX SRGREQLHMDN ZSU]\SDGNXWDEOLF\QXPHU\UR]SRF]\QDMÈVLÚ RG]HUD .ROHMQRĂÊXPLHV]F]DQLDZÚ]ïöZHOHPHQWöZ w NodeListMHVWGRNïDGQLHWDNDVDPDZMDNLHMWH ZÚ]ï\SRMDZLDMÈVLÚQDVWURQLH+70/ *G\]DS\WDQLHPRGHOX'20]ZUöFLNodeList PRĝQDSRGMÈÊZ\PLHQLRQHSRQLĝHMNURNL • • 8ĝ\FLHSÚWOLLSU]HWZRU]HQLHZV]\VWNLFK :\EöUMHGQHJRHOHPHQWX]NodeList. HOHPHQWöZZNodeListDE\QDNDĝG\P]QLFK Z\NRQDÊWHVDPHRNUHĂORQHSROHFHQLD NodeListSU]\SRPLQDWDEOLFÚLMHVWSRQXPHURZDQD MDNWDEOLFDDOHWDNQDSUDZGÚQLÈQLHMHVW7RMHVW W\SRELHNWXRNUHĂODQ\PLDQHPkolekcji. 3RGREQLHMDNZSU]\SDGNXLQQ\FKRELHNWöZ NodeListPDZïDĂFLZRĂFLPHWRG\PLÚG]\LQQ\PL • ZïDĂFLZRĂÊlengthNWöUDSRGDMHOLF]EÚ HOHPHQWöZ]QDMGXMÈF\FKVLÚZGDQHMNROHNFML NodeList • PHWRGÚitem()NWöUHMZDUWRĂFLÈ]ZURWQÈMHVW RNUHĂORQ\HOHPHQW]NROHNFML3DUDPHWUHP PHWRG\MHVW SRGDQ\ZQDZLDVLH QXPHU LQGHNVXLQWHUHVXMÈFHJR&LÚHOHPHQWX-HGQDN ]QDF]QLHF]ÚĂFLHMVWRVRZDQHUR]ZLÈ]DQLHSROHJD QDXĝ\FLXVNïDGQLWDEOLF\ QDZLDVNZDGUDWRZ\ GRSREUDQLDHOHPHQWX]NodeListMDN]RVWDQLH SRND]DQHZSRGUR]G]LDOHķ0HWRGDLWHP ĵ KOLEKCJA NODELIST STATYCZNA I TYPU LIVE =GDU]DMÈVLÚV\WXDFMHJG\ZLHORNURWQLHWU]HED SUDFRZDÊ]W\PVDP\P]HVWDZHPHOHPHQWöZ 'ODWHJRWHĝNROHNFMÚNodeListPRĝQDSU]HFKRZ\ZDÊZ]PLHQQHMLSRQRZQLHMÈZ\NRU]\VWDÊ ]DPLDVW]QöZZ\V]XNLZDÊWHVDPHHOHPHQW\ :SU]\SDGNXkolekcji NodeList typu liveJG\ VNU\SWXDNWXDOQLDVWURQÚNROHNFMDUöZQLHĝEÚG]LH XDNWXDOQLRQD0HWRG\RQD]ZDFKUR]SRF]\QDMÈF\FKVLÚRGJHW(OHPHQWV%\]ZUDFDMÈNROHNFMH NodeListW\SXOLYH7HJRURG]DMXNROHNFMH]Z\NOH PRĝQDZ\JHQHURZDÊV]\EFLHMQLĝVWDW\F]QH NROHNFMHNodeList. 202 OBIEKTOWY MODEL DOKUMENTU :SU]\SDGNXstatycznej kolekcji NodeListJG\ VNU\SWXDNWXDOQLVWURQÚNROHNFMDSR]RVWDMHEH] ]PLDQDZLÚFQLHRG]ZLHUFLHGOD]PLDQZSURZDG]RQ\FKSU]H]VNU\SW 1RZHPHWRG\RQD]ZDFKUR]SRF]\QDMÈF\FKVLÚ od TXHU\6HOHFWRU Xĝ\ZDMÈVNïDGQLVHOHNWRUD &66 ]ZUDFDMÈVWDW\F]QHNROHNFMHNodeList. Tego URG]DMXNROHNFMHRG]ZLHUFLHGODMÈVWDQGRNXPHQWX ]FKZLOLZ\NRQ\ZDQLD]DS\WDQLD-HĝHOLVNU\SW ]PLHQL]DZDUWRĂÊVWURQ\NROHNFMDNodeList nie EÚG]LHXDNWXDOQLRQDZFHOXRG]ZLHUFLHGOHQLD ZVSRPQLDQ\FK]PLDQ 3RQLĝHMSU]HGVWDZLRQRF]WHU\UöĝQH]DS\WDQLDPRGHOX'20]ZUDFDMÈFH NROHNFMHNodeList'ODNDĝGHJR]DS\WDQLDSU]HGVWDZLRQR]ZUöFRQH ZNROHNFMLHOHPHQW\RUD]QXPHU\LFKLQGHNVöZ getElementsByTagName(’h1’) 0LPRĝHWR]DS\WDQLH]ZUDFD W\ONRMHGHQHOHPHQWZDUWRĂÊ ]ZURWQDLWDNMHVWZSRVWDFL NROHNFMLNodeListSRQLHZDĝ PRĝH]ZUöFLÊZLÚFHMQLĝMHGHQ element. NUMER INDEKSU 0 ELEMENT <h1> getElementsByTagName(’li’) 7DPHWRGD]ZUDFDF]WHU\ HOHPHQW\FRRGSRZLDGDOLF]ELH HOHPHQWöZ<li>]QDMGXMÈF\FK VLÚQDVWURQLH3RMDZLDMÈVLÚRQH ZWDNLHMVDPHMNROHMQRĂFLMDNQD VWURQLH+70/ NUMER INDEKSU ELEMENT OLLG ĵRQHĵFODVV ĵKRWĵ! OLLG ĵWZRĵFODVV ĵKRWĵ! OLLG ĵWKUHHĵFODVV ĵKRWĵ! 3 <li id=”four”> getElementsByClassName(’hot’) =ZUöFRQDSU]H]WÚPHWRGÚ NROHNFMDNodeList]DZLHUDW\ONR WU]\HOHPHQW\<li>SRQLHZDĝ Z\V]XNDQH]RVWDï\MHG\QLHWH HOHPHQW\NWöU\FKZDUWRĂFLÈ atrybutu FODVVMHVWhot. NUMER INDEKSU ELEMENT OLLG ĵRQHĵFODVV ĵKRWĵ! OLLG ĵWZRĵFODVV ĵKRWĵ! OLLG ĵWKUHHĵFODVV ĵKRWĵ! TXHU\6HOHFWRU$OO ĳOL>LG@ĳ 0HWRGDWD]ZUDFDF]WHU\ HOHPHQW\FRRGSRZLDGDOLF]ELH HOHPHQWöZ<li>]QDMGXMÈF\FK VLÚQDVWURQLHLSRVLDGDMÈF\FK atrybut id MHJRZDUWRĂÊQLHPD WXWDMĝDGQHJR]QDF]HQLD NUMER INDEKSU ELEMENT OLLG ĵRQHĵFODVV ĵKRWĵ! OLLG ĵWZRĵFODVV ĵKRWĵ! OLLG ĵWKUHHĵFODVV ĵKRWĵ! 3 <li id=”four”> OBIEKTOWY MODEL DOKUMENTU 203 POBRANIE ELEMENTU Z KOLEKCJI NODELIST 0DP\GZDVSRVRE\Z\ELHUDQLDHOHPHQWXZNROHNFMLNodeList3LHUZV]\ WRXĝ\FLHPHWRG\item()QDWRPLDVWGUXJLRSLHUDVLÚQDVNïDGQLWDEOLF\ 2EDVSRVRE\Z\PDJDMÈXĝ\FLDQXPHUXLQGHNVXZ\ELHUDQHJRHOHPHQWX METODA ITEM() .ROHNFMDNodeListRIHUXMH PHWRGÚRQD]ZLHitem()NWöUHM ZDUWRĂFLÈ]ZURWQÈMHVWSRMHG\QF]\ZÚ]Hï]NROHNFML -DNRSDUDPHWUPHWRG\SRGDMHV] ZQDZLDVLH QXPHULQGHNVX LQWHUHVXMÈFHJR&LÚHOHPHQWX :\NRQDQLHNRGXZV\WXDFMLJG\ QLH]RVWDï\Z\EUDQHĝDGQHHOHPHQW\R]QDF]DPDUQRWUDZVWZR ]DVREöZ'ODWHJRWHĝSU]HG Z\NRQDQLHPNRGXSURJUDPLĂFL EDUG]RF]ÚVWRVSUDZG]DMÈF]\ NROHNFMDNodeList]DZLHUD SU]\QDMPQLHMMHGHQHOHPHQW :W\PFHOXQDOHĝ\Z\NRU]\VWDÊ ZïDĂFLZRĂÊlengthNROHNFML NWöUDSRGDMHOLF]EÚHOHPHQWöZ ]QDMGXMÈF\FKVLÚZNodeList. :SRQLĝV]\PIUDJPHQFLH NRGXZ\NRU]\VWDQRSROHFHQLH warunkowe if. Warunek dla SROHFHQLDifVSUDZG]DF]\ ZDUWRĂÊZïDĂFLZRĂFLlength MHVWZLÚNV]DQLĝ]HUR-HĝHOLWDN Z\NRQDQH]RVWDQÈSROHFHQLD ]GHğQLRZDQHZEORNXNRQVWUXNFMLif-HĝHOLQLHG]LDïDQLH VNU\SWXMHVWNRQW\QXRZDQH SRF]ÈZV]\RGSLHUZV]HJRZLHUV]DSR]DP\NDMÈF\PQDZLDVLH klamrowym. YDUHOHPHQWV GRFXPHQWJHW(OHPHQWV%\&ODVV1DPH ĳKRWĳ LI HOHPHQWVOHQJWK! { YDUğUVW,WHP HOHPHQWVLWHP } :\EöUHOHPHQWöZNWöUHPDMÈ atrybut FODVVRZDUWRĂFLhot. (OHPHQW\WH]RVWDMÈXPLHV]F]RQHZNROHNFMLNodeList SU]HFKRZ\ZDQHMSU]H]]PLHQQÈ elements. 8ĝ\FLHZïDĂFLZRĂFLlength ZFHOXVSUDZG]HQLDOLF]E\ ]QDOH]LRQ\FKHOHPHQWöZ-HĝHOL ]QDOH]LRQ\MHVWFRQDMPQLHM MHGHQHOHPHQW]RVWDQLHZ\NRQDQ\NRGZEORNXSROHFHQLDif. 3LHUZV]\HOHPHQWNROHNFML NodeListMHVWSU]HFKRZ\ZDQ\ Z]PLHQQHMRQD]ZLHğUVW,WHP. 8ĝ\WRF\IU\0SRQLHZDĝ QXPHU\LQGHNVöZ]DF]\QDMÈVLÚ RG]HUD 204 OBIEKTOWY MODEL DOKUMENTU =DPLDVWPHWRG\item()SUHIHURZDQDMHVWVNïDGQLDWDEOLF\SRQLHZDĝG]LDïD V]\EFLHM3U]HGZ\EUDQLHPZÚ]ïD]NROHNFMLNodeListQDOHĝ\VSUDZG]LÊ F]\NROHNFMD]DZLHUDMDNLHNROZLHNZÚ]ï\-HĝHOLF]ÚVWREÚG]LHV]Xĝ\ZDïGDQHM NROHNFMLNodeListSU]HFKRZXMMÈZ]PLHQQHM SKŁADNIA TABLICY 'RVWÚSGRSRV]F]HJöOQ\FK ZÚ]ïöZPRĝQDX]\VNDÊ NRU]\VWDMÈF]HVNïDGQL]Xĝ\FLHPQDZLDVXNZDGUDWRZHJR F]\OLSRGREQHMGRVWRVRZDQHM SRGF]DVSRELHUDQLDHOHPHQWöZ ]WDEOLF\ 3RGREQLHMDNZSU]\SDGNX ZV]\VWNLFK]DS\WDñPRGHOX '20MHĂOL]DFKRG]LSRWU]HED NLONDNURWQHJRX]\VNDQLDGRVWÚSX GRWHMVDPHMNROHNFMLNodeList Z\QLN]DS\WDQLDQDOHĝ\ SU]HFKRZ\ZDÊZ]PLHQQHM :QDZLDVLHNZDGUDWRZ\P SRQD]ZLHNROHNFMLNodeList SRGDMHV]QXPHULQGHNVX LQWHUHVXMÈFHJR&LÚHOHPHQWX :SU]\NïDGDFKSU]HGVWDZLRQ\FKQDREXVWURQDFKNROHNFMD NodeListMHVWSU]HFKRZ\ZDQD Z]PLHQQHMRQD]ZLHelements. -HĝHOLWZRU]\V]]PLHQQÈ SU]H]QDF]RQÈGR SU]HFKRZ\ZDQLDNROHNFML NodeList MDNSRQLĝHM DOHQLH ]RVWDQÈGRSDVRZDQHĝDGQH HOHPHQW\WR]PLHQQDEÚG]LH SXVWÈNROHNFMÈNodeList. *G\VSUDZG]LP\MHMZLHONRĂÊ ]DSRPRFÈZïDĂFLZRĂFL lengthZDUWRĂFLÈ]ZURWQÈ EÚG]LH0SRQLHZDĝZNROHNFML QLH]QDMGXMÈVLÚĝDGQHHOHPHQW\ YDUHOHPHQWV GRFXPHQWJHW(OHPHQWV%\&ODVV1DPH ĳKRWĳ LI HOHPHQWVOHQJWK! { YDUğUVW,WHP HOHPHQWV>@ } 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 ĳKRWĳ // Wyszukanie elementów o klasie hot. LI HOHPHQWVOHQJWK! ^-HĝHOL]RVWDQÈ]QDOH]LRQHFRQDMPQLHMWU]\ YDUHO HOHPHQWV>@// Z kolekcji NodeList wybierz trzeci. HOFODVV1DPH ĳFRROĳ=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 ĳOLĳ // Wyszukanie elementów <li>. LI HOHPHQWVOHQJWK! ^-HĝHOL]QDOH]LRQ\EÚG]LHFRQDMPQLHMMHGHQHOHPHQW YDUHO HOHPHQWV>@:\ELHUDP\SLHUZV]\]Z\NRU]\VWDQLHPVNïDGQLWDEOLF\ HOFODVV1DPH ĳFRROĳ=PLDQDZDUWRĂFLDWU\EXWXFODVVZ\EUDQHJRHOHPHQWX } WYNIK :RPDZLDQ\PSU]\NïDG]LHZ\V]XNLZDQHVÈ ZV]\VWNLHHOHPHQW\<li>ZGRNXPHQFLH:\QLN RSHUDFMLMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLH elementsSRQLHZDĝEÚG]LHZ\NRU]\VWDQ\ZLHOH UD]\ 3ROHFHQLHifVSUDZG]DF]\]RVWDï\]QDOH]LRQH MDNLHNROZLHNHOHPHQW\<li>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 ĳOLKRWĳ HOFODVV1DPH ĳFRROĳ 0HWRGDTXHU\6HOHFWRU$OO ]ZUDFDNROHNFMÚ1RGH/LVW 'UXJLGRSDVRZDQ\HOHPHQW WRMHVWWU]HFLHOHPHQWQDOLĂFLH ]RVWDMHZ\EUDQ\ L]PRG\ğNRZDQ\ YDUHOV GRFXPHQWTXHU\6HOHFWRU$OO ĳOLKRWĳ HOV>@FODVV1DPH ĳFRROĳ 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 <ul> OLLG ĵRQHĵFODVV ĵKRWĵ! <em>ĂZLHĝH</em> ğJL</li> OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> 1. 7DNZ\JOÈGDVWURQDSRMHMZF]\W\ZDQLX0DP\WU]\HOHPHQW\<li> 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 <ul> OLLG ĵRQHĵFODVV ĵFRRO”> <em>ĂZLHĝH</em> ğJL</li> OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> 2. 3RZ\NRQDQLXGUXJLHJRVHOHNWRUD SR]RVWDMÈW\ONRGZDHOHPHQW\<li> 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 <ul> OLLG ĵRQHĵFODVV ĵFRRO”> <em>ĂZLHĝH</em> ğJL</li> OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> OLLG ĵWKUHHĵFODVV ĵFRRO”>miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> 3. .LHG\GUXJLVHOHNWRUZ\NRQDVZRMH ]DGDQLHGU]HZRPRGHOX'20]DZLHUD W\ONRMHGHQHOHPHQW<li>NWöU\PD atrybut FODVVRZDUWRĂFLhot.DĝG\ NRGZ\V]XNXMÈF\HOHPHQW\<li> NWöUHPDMÈDWU\EXWFODVVRZDUWRĂFL hot]QDMG]LHW\ONRWHQMHGHQHOHPHQW -HGQDNZ\V]XNDQLHHOHPHQWöZ<li> 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 ĳOLKRWĳ for (var i = 0; i < KRW,WHPVOHQJWK; i++) { KRW,WHPV>L@FODVV1DPH ĳFRROĳ } 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 ĳOLKRWĳ // 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 ĳFRROĳ =PLDQDZDUWRĂFLDWU\EXWXFODVVZ\EUDQHJRHOHPHQWX } } WYNIK :RPDZLDQ\PSU]\NïDG]LH NROHNFMDNodeList]RVWDïDZ\JHQHURZDQD]DSRPRFÈPHWRG\ TXHU\6HOHFWRU$OO . Kod Z\V]XNXMHZV]\VWNLHHOHPHQW\ <li>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 ĳFRROĳ } 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<li> WRMHJRZÚ]ïHPQDGU]ÚGQ\P EÚG]LHHOHPHQW<ul>. -HĝHOLUR]SRF]QLHP\DQDOL]Ú RGSLHUZV]HJRHOHPHQWX<li> to nie mamy SRSU]HGQLHJR HOHPHQWXUöZQRU]ÚGQHJR. -HGQDNQDVWÚSQ\PHOHPHQWHP UöZQRU]ÚGQ\P (2)EÚG]LHZÚ]Hï SU]HGVWDZLDMÈF\GUXJLHOHPHQW <li>. ul 1 li li -HĝHOLDQDOL]Ú]DF]QLHP\RG elementu <ul>WRpierwszym elementem potomnymMHVW ZÚ]HïSU]HGVWDZLDMÈF\SLHUZV]\ element <li>QDWRPLDVW ostatnim elementem potomnym (3)EÚG]LHRVWDWQLHOHPHQW<li>. 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<li> QDWRPLDVWnextSibling]ZUöFL WU]HFLHOHPHQW<li>. FVLEOLQJKWPO HTML XO!OLLG ĵRQHĵFODVV ĵKRWĵ!HP!ĂZLHĝH</em> ğJLOL!OLLG ĵWZRĵ FODVV ĵKRWĵ!RU]HV]NLSLQLRZHOL!OLLG ĵWKUHHĵFODVV ĵKRWĵ!miód</li><li id=”four”>RFHWEDOVDPLF]Q\</li></ul> FMVVLEOLQJMV JAVASCRIPT :\EöUSXQNWXSRF]ÈWNRZHJRLRGV]XNDQLHMHJRHOHPHQWöZUöZQRU]ÚGQ\FK YDUVWDUW,WHP GRFXPHQWJHW(OHPHQW%\,G ĳWZRĳ YDUSUHY,WHP VWDUW,WHPSUHYLRXV6LEOLQJ YDUQH[W,WHP VWDUW,WHPQH[W6LEOLQJ =PLDQDZDUWRĂFLDWU\EXWXFODVVHOHPHQWöZUöZQRU]ÚGQ\FK SUHY,WHPFODVV1DPH ĳFRPSOHWHĳ QH[W,WHPFODVV1DPH ĳFRROĳ 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 <ul>QDVWURQLH=SR]LRPX Z\PLHQLRQHJRHOHPHQWX ZïDĂFLZRĂÊğUVW&KLOG zwróci SLHUZV]\HOHPHQWOL! natomiast ODVW&KLOG zwróci ostatni element OL! FFKLOGKWPO HTML <ul !OLLG !OLLG !OLLG !OLLG ></ul> ĵRQHĵFODVV ĵKRWĵ!HP!ĂZLHĝH</em> ğ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 ĳXOĳ >@ YDUğUVW,WHP VWDUW,WHPğUVW&KLOG YDUODVW,WHP VWDUW,WHPODVW&KLOG =PLDQDZDUWRĂFLDWU\EXWXFODVVHOHPHQWöZSRWRPQ\FK ğUVW,WHPVHW$WWULEXWH ĳFODVVĳĳFRPSOHWHĳ ODVW,WHPVHW$WWULEXWH ĳFODVVĳĳFRROĳ 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\<li>SRSUDZHM VWURQLH.DĝG\]QLFKGRGDMHSHZLHQNRG]QDF]QLNöZ]DWHPIUDJPHQWGU]HZDPRGHOX'20GOD NDĝGHJRHOHPHQWXOLVW\MHVWLQQ\ <li id=”one”>ğJL</li> li • 3LHUZV]\ QDWHMVWURQLH ]DZLHUDW\ONRWHNVW • 'UXJLLWU]HFL QDVWURQLHSRSUDZHM ]DZLHUDMÈ atrybut tekst: figi SRïÈF]HQLHWHNVWXLHOHPHQWX<em>. 0RĝHV]]REDF]\ÊĝHGRGDQLHF]HJRĂWDNSURVWHJR MDNHOHPHQW<em>SRZRGXMH]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<li>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ĵ <li id=”one”><em>ĂZLHĝH</em> ğJL</li> <li id=”one”>V]HĂÊ <em>ĂZLHĝ\FK</em> ğJ</li> li li atrybut em tekst: figi em atrybut tekst: figi tekst: sześć tekst: świeże tekst: świeże 'RGDQ\]RVWDïHOHPHQW<em>VWDïVLÚWHUD] SLHUZV]\PHOHPHQWHPSRWRPQ\P • :Ú]HïHOHPHQWX<em>SRVLDGDZï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 <em>. 3RGRGDQLXWHNVWXSU]HGHOHPHQWHP<em> • Pierwszy element potomny elementu <li>MHVW • • ZÚ]ïHPWHNVWRZ\P]DZLHUDMÈF\PVïRZRV]HĂÊ. 3RVLDGDHOHPHQWUöZQRU]ÚGQ\NWöU\MHVW ZÚ]ïHPHOHPHQWXGOD<em>. Z kolei ten ZÚ]HïHOHPHQWX<em>SRVLDGDpotomnyZÚ]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 <em>. 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 <body>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. <li id=”one”><em>ĂZLHĝH</em> ğJL</li> 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 ĳRQHĳ ğ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<li>]RVWDMHZ\EUDQ\]D SRPRFÈPHWRG\getElementById(). 2. Pierwszym elementem potomnym <li>MHVW element <em>. 3. :Ú]HïWHNVWRZ\MHVWQDVWÚSQ\PHOHPHQWHP UöZQRU]ÚGQ\P tego elementu <em>. 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 ĳWZRĳ // Pobranie drugiego elementu listy. YDUHO7H[W LWHP7ZRğUVW&KLOGQRGH9DOXH3REUDQLHMHJR]DZDUWRĂFLWHNVWRZHM HO7H[W HO7H[WUHSODFH ĳRU]HV]NLSLQLRZHĳĳNDSXVWDĳ // 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<li> w omaZLDQ\PSU]\NïDG]LH L]LJQRURZDQLDFDïHJRNRGX ]QDF]QLNöZZHOHPHQFLH PRĝQDXĝ\ÊZïDĂFLZRĂFL textContentHOHPHQWXQDGU]ÚGQHJR]DZLHUDMÈFHgo dane elementy <li>: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 <li id=”one”><em>ĂZLHĝH</em> ğJL</li> li em atrybut tekst: figi text: świeże GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ 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\ <em>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<em>. 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 ĳRQHĳ // 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 ĳS!WH[W&RQWHQWĳVKRZ7H[W&RQWHQWĳS!ĳ PVJ ĳS!LQQHU7H[WĳVKRZ,QQHU7H[WĳS!ĳ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳVFULSW5HVXOWVĳ HOLQQHU+70/ PVJ ğUVW,WHPWH[W&RQWHQW ĳFKOHEQD]DNZDVLHĳ // 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<li>]<ul>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 ĳHP!¥ZLHĝHHP!ğJLĳ :]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 <li id=”one”><em>ĂZLHĝH</em> ğJL</li> 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 ĳRQHĳ LQQHU+70/ Zmienna elContentEÚG]LHWHUD]]DZLHUDïDQDVWÚSXMÈF\FLÈJ WHNVWRZ\ ’<em>ĂZLHĝH</em> ğ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 ĳRQHĳ 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 ĳRQHĳ 3REUDQLH]DZDUWRĂFLSLHUZV]HJRHOHPHQWXOLVW\ YDULWHP&RQWHQW ğUVW,WHPLQQHU+70/ 8DNWXDOQLHQLH]DZDUWRĂFLSLHUZV]HJRHOHPHQWXOLVW\DE\VWDïVLÚïÈF]HP ğUVW,WHPLQQHU+70/ ĳDKUHI ?ĵKWWSH[DPSOHRUJ?ĵ!ĳLWHP&RQWHQWĳD!ĳ 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 <a> 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<li>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 ĳOLĳ 8WZRU]HQLHZÚ]ïDWHNVWRZHJRLSU]HFKRZ\ZDQLHJRZ]PLHQQHM YDUQHZ7H[W GRFXPHQWFUHDWH7H[W1RGH ĳNRPRVDU\ĝRZDĳ 'RïÈF]HQLHQRZHJRZÚ]ïDWHNVWRZHJRGRQRZHJRHOHPHQWX QHZ(ODSSHQG&KLOG QHZ7H[W :\V]XNDQLHPLHMVFDZNWöU\PSRZLQLHQE\ÊGRGDQ\QRZ\HOHPHQW YDUSRVLWLRQ GRFXPHQWJHW(OHPHQWV%\7DJ1DPH ĳXOĳ >@ // 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<ul>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 <ul> ]DZLHUDMÈF\ element SU]H]QDF]RQ\GRXVXQLÚFLD FMVUHPRYHHOHPHQWMV JAVASCRIPT YDUUHPRYH(O GRFXPHQWJHW(OHPHQWV%\7DJ1DPH ĳOLĳ >@ (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 ĳKWWSH[DPSOHFRP[VVSKS"FRRNLH ĳHVFDSH 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 ĳKWWSH[DPSOHFRP[VVSKS"ĳHVFDSH 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 <script> Komentarze HTML 1D]Z\]QDF]QLNöZ Atrybuty :DUWRĂFL&66 236 OBIEKTOWY MODEL DOKUMENTU VFULSW!QLHWXWDMVFULSW! QLHWXWDM! QLH7XWDMKUHI ĵWHVWĵ! GLYQLH7XWDM ĵDQL1LH7XWDMĵ! ^FRORUQLHWXWDM` XSS — ZNEUTRALIZOWANIE I KONTROLA ZNACZNIKÓW .DĝGD]DZDUWRĂÊZ\JHQHURZDQDSU]H]Xĝ\WNRZQLNöZL]DZLHUDMÈFD]QDNL VWRVRZDQHZNRG]LHSRZLQQDE\Ê]QHXWUDOL]RZDQDSRVWURQLHVHUZHUD 7U]HED]DFKRZDÊNRQWUROÚQDGZV]\VWNLPL]QDF]QLNDPLGRGDZDQ\PLQDVWURQLH ZNEUTRALIZOWANIE ZAWARTOŚCI DOSTARCZONEJ PRZEZ UŻYTKOWNIKA DODANIE ZAWARTOŚCI POCHODZĄCEJ OD UŻYTKOWNIKA :V]\VWNLHGDQHSRFKRG]ÈFH]QLH]DXIDQ\FKěUöGHï SRZLQQ\E\Ê]QHXWUDOL]RZDQHSRVWURQLHVHUZHUD DGRSLHURSöěQLHMXPLHV]F]DQHQDVWURQLH:LÚNV]RĂÊMÚ]\NöZVWRVRZDQ\FKZSURJUDPRZDQLXSR VWURQLHVHUZHUD]DZLHUDIXQNFMHSRPRFQLF]HNWöUH SR]E\ZDMÈVLÚNRGXR]ïRĂOLZ\PG]LDïDQLX .LHG\QDVWURQLH+70/XPLHV]F]DV]]DZDUWRĂÊ SRFKRG]ÈFÈ]QLH]DXIDQHJRěUöGïDSRZLQQDE\Ê ]QHXWUDOL]RZDQDSU]H]VHUZHULGRGDWNRZRGRGDQD ZSRVWDFL]Z\NïHJRWHNVWX=DUöZQR-DYD6FULSW MDNLM4XHU\RIHUXMÈSU]\GDWQHQDU]ÚG]LD JAVASCRIPT HTML 1HXWUDOL]XMZ\PLHQLRQHSRQLĝHM]QDNLĽSRZLQQ\ E\ÊZ\ĂZLHWODQHMDNR]QDNLDQLHSU]HWZDU]DQH MDNRNRG & & ’ ' (nie ') < < „ " > > / / ` ` 8¿<-ZïDĂFLZRĂFLtextContent OXEinnerText ĽSDWU]SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGR WHNVWXLMHJRXDNWXDOQLHQLH]DSRPRFÈZïDĂFLZRĂFL WH[W&RQWHQW LLQQHU7H[W ĵ 1,(8¿<:$-ZïDĂFLZRĂFLinnerHTML ĽSDWU] SRGUR]G]LDïķ8]\VNDQLHGRVWÚSXGR LXDNWXDOQLHQLH WHNVWXRUD]NRGX]QDF]QLNöZ]DSRPRFÈ ZïDĂFLZRĂFLLQQHU+70/ĵ JAVASCRIPT JQUERY :VNU\SWDFK-DYD6FULSWnigdyQLHXPLHV]F]DM GDQ\FKSRFKRG]ÈF\FK]QLH]DXIDQ\FKěUöGHï 7RR]QDF]D]QHXWUDOL]RZDQLHZV]\VWNLFK]QDNöZ $6&,,RNRGDFKNWöU\FKZDUWRĂÊMHVWPQLHMV]D QLĝLQLHEÚGÈF\FK]QDNDPLDOIDQXPHU\F]Q\PL SRQLHZDĝPRJÈE\ÊQLHEH]SLHF]QH 8¿<-PHWRG\text() ĽSDWU]UR]G]LDïSRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ 1,(8¿<:$-PHWRG\html()ĽSDWU]UR]G]LDï SRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ ADRESY URL -HĝHOLPDV]ïÈF]D]DZLHUDMÈFHGDQHZHMĂFLRZH SRFKRG]ÈFHRGXĝ\WNRZQLND QDSU]\NïDG ïÈF]DGRSURğOLXĝ\WNRZQLNöZOXE]DS\WDQLD Z\V]XNLZDQLD WRXĝ\ZDMPHWRG\-DYD6FULSW encodeURIComponent()ZFHOX]QHHXWUDOL]RZDQLD W\FKGDQ\FKZHMĂFLRZ\FK:\PLHQLRQDPHWRGD QHXWUDOL]XMHSRQLĝV]H]QDNL , / ? : @ & = + $ # :SUDZG]LHZFHOXGRGDQLD]DZDUWRĂFL+70/ ZPRGHOX'20PRĝQDXĝ\ÊZïDĂFLZRĂFL innerHTMLLPHWRG\M4XHU\html()DOHQDOHĝ\VLÚ XSHZQLÊR SRVLDGDQLXNRQWUROLQDGwszystkimiJHQHURZDQ\PL]QDF]QLNDPL ]DZDUWRĂÊSRFKRG]ÈFD RGXĝ\WNRZQLNDQLHPRĝH]DZLHUDÊNRGX ]QDF]QLNöZ ]QHXWUDOL]RZDQLX]DZDUWRĂFLSRFKRG]ÈFHMRG Xĝ\WNRZQLNDLGRGDQLXMHMZSRVWDFL]Z\NïHJR WHNVWX]DSRPRFÈSU]HGVWDZLRQ\FKZF]HĂQLHM WHFKQLNDQLHMDNR]DZDUWRĂFL+70/ • • OBIEKTOWY MODEL DOKUMENTU 237 WĘZŁY ATRYBUTÓW 3RXWZRU]HQLXZÚ]ïDHOHPHQWXPRĝQDZ\NRU]\VWDÊZQLPLQQHZïDĂFLZRĂFL LPHWRG\DE\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLZÚ]ïDLPRG\ğNRZDÊMH $E\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFLLPLHÊPRĝOLZRĂÊLFK PRG\ğNRZDQLDWU]HEDZ\NRQDÊ GZLHF]\QQRĂFL 3LHUZV]DWRZ\EöUZÚ]ïD HOHPHQWX]DZLHUDMÈFHJRDWU\EXW LXPLHV]F]HQLHSRQLPNURSNL :\V]XNDQLHZÚ]ïDHOHPHQWX G]LDïD ]NDĝGÈWHFKQLNÈRPöZLRQÈZUR]G]LDOH 'UXJDWRXĝ\FLHMHGQHM ]Z\PLHQLRQ\FKSRQLĝHMPHWRG OXEZïDĂFLZRĂFLDE\PRĝQD E\ïRSUDFRZDÊ]DWU\EXWDPL elementu. 3REUDQLHZDUWRĂFLDWU\EXWX ZVND]DQHJRMDNRSDUDPHWUPHWRG\ ZAPYTANIE MODELU DOM METODA GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ JHW$WWULEXWH ĳFODVVĳ ; OPERATOR ELEMENTU SKŁADOWEGO :VND]XMHĝHNROHMQHPHWRG\EÚGÈXĝ\ZDQH ZZÚěOHSRGDQ\PSROHZHMVWURQLH METODA OPIS getAttribute() 3RELHUDZDUWRĂÊDWU\EXWX hasAttribute() 6SUDZG]DF]\ZÚ]HïHOHPHQWX PDZVND]DQ\DWU\EXW setAttribute() 8VWDZLDZDUWRĂÊDWU\EXWX removeAttribute() 8VXZDDWU\EXW]ZÚ]ïDHOHPHQWX WŁAŚCIWOŚĆ OPIS FODVV1DPH 3RELHUDOXEXVWDZLDZDUWRĂÊ atrybutu FODVV. id 3RELHUDOXEXVWDZLDZDUWRĂÊDWU\EXWXid. 238 OBIEKTOWY MODEL DOKUMENTU :LHV]MXĝĝHPRGHO'20 WUDNWXMHNDĝG\HOHPHQW+70/ MDNRRGG]LHOQ\RELHNWZGU]HZLH PRGHOX'20:ïDĂFLZRĂFL RELHNWXRGSRZLDGDMÈDWU\EXWRP NWöUHGDQ\W\SHOHPHQWXSRWUDğ REVïXJLZDÊ3ROHZHMVWURQLH PRĝHV]]REDF]\ÊZïDĂFLZRĂFL FODVV1DPH i id ,QQHZïDĂFLZRĂFLWRDFFHVV.H\FKHFNHG hreflang i title). SPRAWDZENIE, CZY ATRYBUT ISTNIEJE, I POBRANIE JEGO WARTOŚCI =DQLPSU]\VWÈSLV]GRSUDF\ ]DWU\EXWHPGREUÈSUDNW\NÈ MHVWVSUDZG]HQLHF]\RQLVWQLHMH-HĂOLQLHLVWQLHMHPRĝQD ]DRV]F]ÚG]LÊ]DVRE\ JAVASCRIPT Metoda hasAttribute() ZGRZROQ\PZÚěOHHOHPHQWX SR]ZDODQDVSUDZG]HQLHF]\ ZVND]DQ\DWU\EXWLVWQLHMH 1D]ZDDWU\EXWXMHVWSRGDZDQD ZQDZLDVLHMDNRSDUDPHWU metody. 8ĝ\FLHZ\ZRïDQLDPHWRG\ hasAttribute()ZSROHFHQLX ifR]QDF]DĝHNRGZQDZLDVLH NODPURZ\P]RVWDQLHZ\NRQDQ\ W\ONRZWHG\JG\ZVND]DQ\ DWU\EXWLVWQLHMHZGDQ\P HOHPHQFLH FMVJHWDWWULEXWHMV YDUğUVW,WHP GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ // Pobranie pierwszego elementu listy. LI ğUVW,WHPKDV$WWULEXWH ĳFODVVĳ ^-HĝHOLPDDWU\EXWFODVV YDUDWWU ğUVW,WHPJHW$WWULEXWH ĳFODVVĳ // Pobranie atrybutu. 8PLHV]F]HQLHZDUWRĂFLDWU\EXWX]DOLVWÈ YDUHO GRFXPHQWJHW(OHPHQW%\,G ĳVFULSW5HVXOWVĳ HOLQQHU+70/ ĳS!3LHUZV]\HOHPHQWOLVW\PDNODVÚRQD]ZLHĳDWWUĳS!ĳ } WYNIK :RPDZLDQ\PSU]\NïDG]LH]DS\WDQLH'20 ZSRVWDFLZ\ZRïDQLDgetElementById()]ZUDFD HOHPHQWNWöUHJRZDUWRĂFLÈDWU\EXWXidMHVWone. Metoda hasAttribute()MHVWXĝ\ZDQDGRVSUDZG]HQLDF]\WHQHOHPHQWPDDWU\EXWRQD]ZLH FODVV:DUWRĂFLÈ]ZURWQÈPHWRG\MHVWZDUWRĂÊ ERRORZVNDXĝ\ZDQDQDVWÚSQLHZSROHFHQLXif. .RGZQDZLDVLHNODPURZ\PEÚG]LHZ\NRQDQ\ W\ONRZWHG\JG\DWU\EXWFODVVLVWQLHMH Metoda getAttribute()]ZUDFDZDUWRĂÊDWU\EXWX FODVVNWöUDQDVWÚSQLH]RVWDMHZ\ĂZLHWORQDQD VWURQLH 2EVïXJDZSU]HJOÈGDUNDFK — obie wymienione PHWRG\VÈGREU]HREVïXJLZDQHZHZV]\VWNLFK QDMZDĝQLHMV]\FKSU]HJOÈGDUNDFK OBIEKTOWY MODEL DOKUMENTU 239 UTWORZENIE ATRYBUTU I ZMIANA JEGO WARTOŚCI :ïDĂFLZRĂÊFODVV1DPHSR]ZDOD QD]PLDQÚZDUWRĂFLDWU\EXWX FODVV-HĝHOLDWU\EXWQLH LVWQLHMHWR]RVWDQLHXWZRU]RQ\ LRWU]\PDZVND]DQÈZDUWRĂÊ :ïDĂFLZRĂÊWDE\ïDZUR]G]LDOH Xĝ\ZDQDGRXDNWXDOQLDQLD VWDQXHOHPHQWöZOLVW\3RQLĝHM PRĝHV]]REDF]\ÊLQQ\VSRVöE Z\NRQDQLDWHJR]DGDQLD FMVVHWDWWULEXWHMV Metoda setAttribute() SR]ZDODQDXDNWXDOQLHQLH ZDUWRĂFLGRZROQHJR atrybutu. 3RELHUDGZDSDUDPHWU\QD]ZÚ DWU\EXWXRUD]ZDUWRĂÊGODWHJR atrybutu. JAVASCRIPT YDUğUVW,WHP GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ // Pobranie pierwszego elementu. ğUVW,WHPFODVV1DPH ĳFRPSOHWHĳ// Zmiana jego atrybutu class. YDUIRXUWK,WHP GRFXPHQWJHW(OHPHQWV%\7DJ1DPH ĳOLĳ LWHP // Pobranie czwartego elementu. IRXUWK,WHPVHW$WWULEXWH ĳFODVVĳĳFRROĳ // Dodanie do niego atrybutu. .LHG\ZïDĂFLZRĂÊLVWQLHMH QDSU]\NïDG FODVV1DPH lub id WR]DOHSV]HUR]ZLÈ]DQLH X]QDMHVLÚXDNWXDOQLHQLHZïDĂFLZRĂFL]DPLDVW Xĝ\FLDPHWRG\ :WOHPHWRGDLWDNVSRZRGXMHXVWDZLHQLHZïDĂFLZRĂFL WYNIK .LHG\XDNWXDOQLDV]ZDUWRĂÊDWU\EXWX ]ZïDV]F]DFODVV PRĝHWRVSRZRGRZDÊZ\NRQDQLH QRZHMUHJXï\&66DW\PVDP\P]PLHQLÊ Z\JOÈGHOHPHQWöZZ\ĂZLHWODQ\FKQDVWURQLH 8ZDJD3U]HGVWDZLRQDWXWDMWHFKQLNDSRZRGXMH QDGSLVDQLHFDïHMZDUWRĂFLDWU\EXWXFODVV1LHVSRZRGXMHGRGDQLDQRZHMZDUWRĂFLGRLVWQLHMÈFHMZDUWRĂFL atrybutu FODVV. -HĝHOLQRZÈZDUWRĂÊFKFHV]GRGDÊGRLVWQLHMÈFHMZDUWRĂFLDWU\EXWXFODVVWRQDMSLHUZWU]HEDRGF]\WDÊMHJR ]DZDUWRĂÊDQDVWÚSQLHGRGDÊQRZ\WHNVWGRLVWQLHMÈFHM ZDUWRĂFLDWU\EXWX OXEXĝ\ÊPHWRG\M4XHU\RQD]ZLH addClass()MDNSU]HGVWDZLRQRZUR]G]LDOHZSRGUR]G]LDOHķ3RELHUDQLHLXVWDZLDQLHZDUWRĂFLDWU\EXWXĵ 240 OBIEKTOWY MODEL DOKUMENTU USUNIĘCIE ATRYBUTU $E\XVXQÈÊDWU\EXW ]HOHPHQWXQDOHĝ\ZSLHUZV]HM NROHMQRĂFLZ\EUDÊHOHPHQW DQDVWÚSQLHZ\ZRïDÊPHWRGÚ removeAttribute(). Ma RQDW\ONRMHGHQSDUDPHWU NWöU\PMHVWQD]ZDDWU\EXWX SU]H]QDF]RQHJRGRXVXQLÚFLD JAVASCRIPT 3UöEDXVXQLÚFLDQLHLVWQLHMÈFHJR DWU\EXWXQLHVSRZRGXMHEïÚGX -HGQDNGREUÈSUDNW\NÈMHVWDE\ SU]HGSUöEÈXVXQLÚFLDDWU\EXWX VSUDZG]LÊF]\RQZRJöOH LVWQLHMH :SRQLĝV]\PSU]\NïDG]LH metoda getElementById()MHVW Xĝ\ZDQDGRSREUDQLDSLHUZV]HJRHOHPHQWX]OLVW\NWöU\PD atrybut idRZDUWRĂFLone. FMVUHPRYHDWWULEXWHMV YDUğUVW,WHP GRFXPHQWJHW(OHPHQW%\,G ĳRQHĳ // Pobranie pierwszego elementu. LI ğUVW,WHPKDV$WWULEXWH ĳFODVVĳ ^-HĝHOLPDDWU\EXWFODVV ğUVW,WHPUHPRYH$WWULEXWH ĳFODVVĳ 8VXQLÚFLHMHJRDWU\EXWXFODVV } WYNIK 6NU\SWVSUDZG]DF]\ZVND]DQ\ element ma atrybut FODVV-HĂOL WDNDWU\EXW]RVWDMHXVXQLÚW\ OBIEKTOWY MODEL DOKUMENTU 241 ANALIZA MODELU DOM W PRZEGLĄDARCE CHROME 1RZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZHVÈGRVWDUF]DQHZUD]]QDU]ÚG]LDPL SRPDJDMÈF\PLZDQDOL]LHVWURQDWDNĝHZ]UR]XPLHQLXVWUXNWXU\GU]HZD modelu DOM. 1DU\VXQNXSRSUDZHMVWURQLH SRND]DQRHOHPHQW<li>SRGĂZLHWORQ\ZSDQHOXProperties (1)ZVND]XMÈF\PĝHMHVWWR element <li>ZUD]]DWU\EXtem idRZDUWRĂFLoneRUD] atrybutem FODVVRZDUWRĂFL hot element HTMLLIElement HTMLElement HOHPHQW ZÚ]Hï obiekt. • • • • • • 2ERNNDĝGHM]Z\PLHQLRQ\FK QD]ZRELHNWöZ]QDMGXMHVLÚ VWU]DïNDNWöUHMNOLNQLÚFLH VSRZRGXMHUR]ZLQLÚFLHZVND]DQHMVHNFML:WHQVSRVöEPRĝQD SR]QDÊZïDĂFLZRĂFLGRVWÚSQH GODGDQHJRURG]DMXZÚ]ïD :Ú]ï\]RVWDï\UR]G]LHORQH SRQLHZDĝSHZQHZïDĂFLZRĂFL VÈFKDUDNWHU\VW\F]QHGOD HOHPHQWöZOLVW\LQQHGOD ZÚ]ïöZHOHPHQWXLQQHGOD ZV]\VWNLFKZÚ]ïöZNROHMQH GODZV]\VWNLFKRELHNWöZ 3RV]F]HJöOQHZïDĂFLZRĂFLVÈ Z\ĂZLHWODQHZRGSRZLHGQLFK W\SDFKZÚ]ïöZ3U]\SRPLQDMÈ RQHGRNWöU\FKZïDĂFLZRĂFL PRĝQDX]\VNDÊGRVWÚS]D SRPRFÈZÚ]ïDPRGHOX'20GOD danego elementu. 242 OBIEKTOWY MODEL DOKUMENTU $E\Z\ĂZLHWOLÊQDU]ÚG]LD SURJUDPLVW\F]QHZSU]HJOÈGDUFH &KURPHZV\VWHPLH0DFNOLNQLM menu WidokDQDVWÚSQLH Z\ELHU]3URJUDPLVWD1DU]ÚG]LD GODSURJUDPLVWöZ:V\VWHPLH :LQGRZVSU]HMGěGRPHQX1DU]ÚG]LD (lub :LÚFHMQDU]ÚG]L DQDVWÚSQLHZ\ELHU]1DU]ÚG]LD GODSURJUDPLVWöZ. 3UDZ\PSU]\FLVNLHPP\V]\ NOLNQLMGRZROQ\HOHPHQW LZ\ELHU]RSFMÚZbadaj element. =PHQXZRNQLHQDU]ÚG]LD Z\ELHU]NDUWÚElements. Kod ěUöGïRZ\VWURQ\]RVWDQLH Z\ĂZLHWORQ\SROHZHMVWURQLH QDWRPLDVWRSFMHSRSUDZHM -HĝHOLHOHPHQW]DZLHUDHOHPHQW SRWRPQ\WRRERNQLHJRSRMDZLD VLÚVWU]DïNDNWöUHMNOLNQLÚFLH UR]ZLMDHOHPHQWLSRND]XMHMHJR ]DZDUWRĂÊ 3DQHOProperties Z\ĂZLHWODQ\ SRSUDZHM SRGDMHW\SRELHNWX ]D]QDF]RQHJRHOHPHQWX :SHZQ\FKZHUVMDFKSU]HJOÈGDUNL&KURPHWHQSDQHOMHVW Z\ĂZLHWODQ\ZSRVWDFLNDUW\ .LHG\]D]QDF]\V]LQQ\HOHPHQW ZRNQLHJïöZQ\PSROHZHM VWURQLHZDUWRĂFLZSDQHOX PropertiesSRSUDZHMEÚGÈ GRW\F]\ï\Z\EUDQHJRHOHPHQWX ANALIZA MODELU DOM W PRZEGLĄDARCE INTERNETOWEJ FIREFOX 3U]HJOÈGDUND)LUHIR[PDSRGREQHZEXGRZDQHQDU]ÚG]LD0RĝQDUöZQLHĝ SREUDÊQDU]ÚG]LH'20,QVSHFWRUNWöUHZ\ĂZLHWODZÚ]ï\WHNVWRZH -HĝHOLZXOXELRQHMZ\V]XNLZDUFH LQWHUQHWRZHMSRGDV]Z\UDĝHQLH DOM InspectorWR]QDMG]LHV] SRND]DQHSROHZHMVWURQLH QDU]ÚG]LH]DSURMHNWRZDQHGOD SU]HJOÈGDUNL)LUHIR[1DHNUDQLH PRĝQD]REDF]\ÊZLGRNGU]HZD SRGREQ\GRSRND]DQHJRZF]HĂQLHMZSU]HJOÈGDUFH&KURPH -HGQDNWXWDM]DZDUWHVÈUöZQLHĝ ZÚ]ï\]QDNöZRGVWÚSX Z\ĂZLHWODQHMDNR#text :DUWRĂFL ZÚ]ïöZVÈSRGDZDQHZSDQHOX SRSUDZHMVWURQLHRNQD:Ú]ï\ ]QDNöZRGVWÚSXQLHPDMÈ ZDUWRĂFLZW\PSDQHOX ,QQHUR]V]HU]HQLHGODSU]HJOÈGDUNL)LUHIR[ZDUWHZ\SUöERZDQLDWR)LUHEXJ )LUHIR[RIHUXMHWDNĝHZLGRN'PRGHOX '20:RNöïNDĝGHJRHOHPHQWXZ\ĂZLHWODQHMHVWSXGHïNRPRĝQD]PLHQLÊNÈWSRG NWöU\PVÈZ\ĂZLHWODQHSRV]F]HJöOQHHOHPHQW\,PEDUG]LHMGDQ\HOHPHQWZ\VWDMH W\PZLÚFHMPDHOHPHQWöZSRWRPQ\FK :WHQVSRVöEPRĝHV] V]\ENR X]\VNDÊLQWHUHVXMÈF\SRGJOÈGSR]LRPXVNRPSOLNRZDQLDNRGX]QDF]QLNöZQDVWURQLHLSR]QDÊ JïÚERNRĂÊ]DJQLHĝGĝHQLDHOHPHQWöZ OBIEKTOWY MODEL DOKUMENTU 243 244 OBIEKTOWY MODEL DOKUMENTU PRZYKŁAD OBIEKTOWY MODEL DOKUMENTU :W\PSU]\NïDG]LH]RVWDQÈZ\NRU]\VWDQHZ\EUDQH WHFKQLNLRPöZLRQHZUR]G]LDOHLSU]H]QDF]RQH GRXDNWXDOQLHQLD]DZDUWRĂFLOLVW\3U]\NïDGVNïDGD VLÚ]WU]HFKF]ÚĂFL 1. DODANIE NOWEGO ELEMENTU NA POCZĄTKU I KOŃCU LISTY Dodanie elementu na SRF]ÈWNXOLVW\Z\PDJDXĝ\FLDLQQHMPHWRG\ QLĝZSU]\SDGNXGRGDZDQLDHOHPHQWXQDNRñFXOLVW\ 2. USTAWIENIE ATRYBUTU CLASS DLA WSZYSTKICH ELEMENTÓW 7R]DGDQLHZ\PDJDXĝ\FLDSÚWOLZFHOXLWHUDFMLSU]H]ZV]\VWNLH elementy <li>LSU]\SLVDQLDZDUWRĂFLFRRO atrybutowi FODVV elementu. 3. DODANIE DO NAGŁÓWKA LICZBY ELEMENTÓW ZNAJDUJĄCYCH SIĘ NA LIŚCIE 7R]DGDQLHR]QDF]DNRQLHF]QRĂÊZ\NRQDQLDF]WHUHFKNURNöZ 1. RGF]\W]DZDUWRĂFLQDJïöZND 2. XVWDOHQLHOLF]E\HOHPHQWöZ<li>QDVWURQLH 3. GRGDQLHOLF]E\HOHPHQWöZGRQDJïöZND 4. XDNWXDOQLHQLHQDJïöZNDQRZÈ]DZDUWRĂFLÈ OBIEKTOWY MODEL DOKUMENTU 245 PRZYKŁAD OBIEKTOWY MODEL DOKUMENTU FMVVHWDWWULEXWHMV JAVASCRIPT 'RGDQLHHOHPHQWöZQDSRF]ÈWNXLNRñFXOLVW\ YDUOLVW GRFXPHQWJHW(OHPHQWV%\7DJ1DPH ĳXOĳ >@// Pobranie elementu <ul>. 'RGDQLHQRZHJRHOHPHQWXQDNRñFXOLVW\ YDUQHZ,WHP/DVW GRFXPHQWFUHDWH(OHPHQW ĳOLĳ // Utworzenie elementu. YDUQHZ7H[W/DVW GRFXPHQWFUHDWH7H[W1RGH ĳNUHPĳ 8WZRU]HQLHZÚ]ïDWHNVWRZHJR QHZ,WHP/DVWDSSHQG&KLOG QHZ7H[W/DVW 'RGDQLHZÚ]ïDWHNVWRZHJR // do elementu. OLVWDSSHQG&KLOG QHZ,WHP/DVW // Umieszczenie elementu QDNRñFXOLVW\ 'RGDQLHQRZHJRHOHPHQWXQDSRF]ÈWNXOLVW\ YDUQHZ,WHP)LUVW GRFXPHQWFUHDWH(OHPHQW ĳOLĳ // Utworzenie elementu. YDUQHZ7H[W)LUVW GRFXPHQWFUHDWH7H[W1RGH ĳNDSXVWDĳ 8WZRU]HQLHZÚ]ïDWHNVWRZHJR QHZ,WHP)LUVWDSSHQG&KLOG QHZ7H[W)LUVW 'RGDQLHZÚ]ïDWHNVWRZHJRGRHOHPHQWX OLVWLQVHUW%HIRUH QHZ,WHP)LUVWOLVWğUVW&KLOG 8PLHV]F]HQLHHOHPHQWXQDSRF]ÈWNXOLVW\ :WHMF]ÚĂFLSU]\NïDGXGRGDMHP\GZDHOHPHQW\ OLVW\GRHOHPHQWX<ul>ĽSRMHGQ\PQDSRF]ÈWNX LNRñFX8ĝ\WDWHFKQLNDWRRSHUDFMHQDPRGHOX '203RQLĝHMZ\PLHQLRQRF]WHU\NURNLSURZDG]ÈFHGRXWZRU]HQLDQRZHJRZÚ]ïDHOHPHQWXLMHJR XPLHV]F]HQLDZGU]HZLHPRGHOX'20 1. 2. 3. 4. 8WZRU]HQLHZÚ]ïDHOHPHQWX 8WZRU]HQLHZÚ]ïDWHNVWRZHJR 'RGDQLHZÚ]ïDWHNVWRZHJRGRZÚ]ïDHOHPHQWX 8PLHV]F]HQLHHOHPHQWXZGU]HZLHPRGHOX DOM. :\NRQDQLHF]ZDUWHJRNURNXZ\PDJDQDMSLHUZ SRGDQLDHOHPHQWXQDGU]ÚGQHJRNWöU\EÚG]LH ]DZLHUDïQRZ\HOHPHQW:REXSU]\SDGNDFKWR MHVW<ul>:Ú]HïGODWHJRHOHPHQWXMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLHlistSRQLHZDĝ EÚG]LHZ\NRU]\VWDQ\NLONDNURWQLH Metoda appendChild()SRZRGXMHGRGDQLH QRZHJRZÚ]ïDMDNRHOHPHQWXSRWRPQHJRGOD 246 OBIEKTOWY MODEL DOKUMENTU ZVND]DQHJRHOHPHQWX0DW\ONRMHGHQSDUDPHWU ĽWMQRZÈ]DZDUWRĂÊXPLHV]F]DQÈZGU]HZLH PRGHOX'20-HĝHOLHOHPHQWQDGU]ÚGQ\PDMXĝ HOHPHQW\SRWRPQHWRQRZ\EÚG]LHGRGDQ\SR RVWDWQLPLVWQLHMÈF\PHOHPHQFLHSRWRPQ\P DW\P VDP\PVWDQLHVLÚRVWDWQLPHOHPHQWHPSRWRPQ\P GDQHJRHOHPHQWXQDGU]ÚGQHJR QDGU]ÚGQ\DSSHQG&KLOG nowyElement); 3RZ\ĝV]ÈPHWRGÚVSRWNDïHĂMXĝZLHOHUD]\ SRGF]DVGRGDZDQLD]DUöZQRQRZ\FKHOHPHQWöZ ZGU]HZLHMDNLZÚ]ïöZWHNVWRZ\FKGRZÚ]ïöZ HOHPHQWöZ $E\XPLHĂFLÊHOHPHQWQDSRF]ÈWNXOLVW\Xĝ\ZDP\ metody insertBefore():\PDJDRQDSRGDQLD GRGDWNRZ\FKLQIRUPDFMLĽHOHPHQWXSU]HG NWöU\PPD]RVWDÊZVWDZLRQDQRZD]DZDUWRĂÊ HOHPHQWGRFHORZ\ QDGU]ÚGQ\LQVHUW%HIRUH nowyElement elementDocelowy); PRZYKŁAD OBIEKTOWY MODEL DOKUMENTU JAVASCRIPT FMVH[DPSOHMV YDUOLVW,WHPV GRFXPHQWTXHU\6HOHFWRU$OO ĳOLĳ // Wszystkie elementy <li>. // Dodanie klasy cool do wszystkich elementów listy. var i; // Zmienna licznika. IRU L LOLVW,WHPVOHQJWKL ^// Iteracja przez elementy. OLVW,WHPV>L@FODVV1DPH ĳFRROĳ// Zmiana klasy na cool. } 'RGDQLHGRQDJïöZNDOLF]E\HOHPHQWöZ]QDMGXMÈF\FKVLÚQDOLĂFLH YDUKHDGLQJ GRFXPHQWTXHU\6HOHFWRU ĳKĳ // Element <h2>. YDUKHDGLQJ7H[W KHDGLQJğUVW&KLOGQRGH9DOXH7HNVWHOHPHQWXK! YDUWRWDO,WHPV OLVW,WHPVOHQJWK// Liczba elementów <li>. YDUQHZ+HDGLQJ KHDGLQJ7H[WĳVSDQ!ĳWRWDO,WHPVĳVSDQ!ĳ=DZDUWRĂÊ KHDGLQJLQQHU+70/ QHZ+HDGLQJ// Uaktualnienie elementu <h2>. .ROHMQ\PNURNLHPZSU]\NïDG]LHMHVWSU]HSURZDG]HQLHLWHUDFMLSU]H]ZV]\VWNLHHOHPHQW\OLVW\ LSU]\SLVDQLHZDUWRĂFLFRROLFKDWU\EXWRPFODVV. 2GE\ZDVLÚWRSU]H]SREUDQLHZV]\VWNLFK HOHPHQWöZOLVW\LXPLHV]F]HQLHLFKZ]PLHQQHM RQD]ZLHlistItems'RSU]HSURZDG]HQLDLWHUDFML SU]H]ZV]\VWNLHHOHPHQW\SRNROHL]RVWDïDXĝ\WD SÚWODfor/LF]EDLWHUDFMLSÚWOLMHVWRNUHĂODQDQD SRGVWDZLHZDUWRĂFLZïDĂFLZRĂFLlength. :UHV]FLHNRGXDNWXDOQLDQDJïöZHNDE\]DZLHUDï LQIRUPDFMHROLF]ELHHOHPHQWöZ]QDMGXMÈF\FKVLÚ QDOLĂFLH8DNWXDOQLHQLHQDVWÚSXMH]DSRĂUHGQLFWZHPZïDĂFLZRĂFLinnerHTMLDQLHXĝ\W\FKZH ZF]HĂQLHMV]HMF]ÚĂFLVNU\SWXWHFKQLNRSHUDFMLQD modelu DOM. :WHQVSRVöESRND]DQRMDNPRĝQDGRGDZDÊ ]DZDUWRĂÊGRMXĝLVWQLHMÈFHJRHOHPHQWXSU]H]QDMSLHUZRGF]\WMHJRELHĝÈFHMZDUWRĂFLDQDVWÚSQLH GRGDQLHQRZHM3RGREQÈWHFKQLNÚPRĝQD]DVWRVRZDÊMHĂOL]DFKRG]LSRWU]HEDGRGDQLDZDUWRĂFLGR DWU\EXWXEH]QDGSLV\ZDQLDMXĝLVWQLHMÈFHM $E\XPLHĂFLÊZQDJïöZNXOLF]EÚHOHPHQWöZ]QDMGXMÈF\FKVLÚQDOLĂFLHNRQLHF]QHMHVWGRVWDUF]HQLH MHV]F]HGZöFKLQIRUPDFML 1. 3RF]ÈWNRZD]DZDUWRĂÊQDJïöZNDĽSR]ZROL QDGRGDQLHGRQLHJROLF]E\HOHPHQWöZ]QDMGXMÈF\FKVLÚQDOLĂFLH=DZDUWRĂÊSRF]ÈWNRZÈ SRELHUDP\]Z\NRU]\VWDQLHPZïDĂFLZRĂFL nodeValueFKRÊUöZQLHGREU]HPRĝQDXĝ\Ê ZïDĂFLZRĂFLinnerHTML lub textContent. 2. /LF]EDHOHPHQWöZ]QDMGXMÈF\FKVLÚQDOLĂFLH. 7ÚOLF]EÚPRĝQDXVWDOLÊQDSRGVWDZLHZDUWRĂFL ZïDĂFLZRĂFLlength]PLHQQHMlistItems. *G\]ELHU]HP\Z\PDJDQHLQIRUPDFMHXDNWXDOQLHQLH]DZDUWRĂFLHOHPHQWX<h2>PRĝHP\SU]HSURZDG]LÊZGZöFKSU]HGVWDZLRQ\FKSRQLĝHMNURNDFK 1. 8WZRU]HQLHQRZHJRQDJïöZNDLXPLHV]F]HQLH JRZ]PLHQQHM1RZ\QDJïöZHNVNïDGDVLÚ ]QDJïöZNDSRF]ÈWNRZHJRX]XSHïQLRQHJR OLF]EÈHOHPHQWöZ]QDMGXMÈF\FKVLÚQDOLĂFLH 2. 8DNWXDOQLHQLHQDJïöZND2GE\ZDVLÚWRSU]H] XDNWXDOQLHQLH]DZDUWRĂFLHOHPHQWXQDJïöZND ]DSRPRFÈZïDĂFLZRĂFLinnerTextZÚ]ïD QDJïöZND OBIEKTOWY MODEL DOKUMENTU 247 PODSUMOWANIE OBIEKTOWY MODEL DOKUMENTU f 3U]HJOÈGDUNDLQWHUQHWRZDSU]HGVWDZLDVWURQÚ]DSRPRFÈ GU]HZDPRGHOX'20 f 'U]HZRPRGHOX'20]DZLHUDF]WHU\W\S\ZÚ]ïöZĽGRFXPHQW ZÚ]ï\HOHPHQWöZZÚ]ï\DWU\EXWöZLZÚ]ï\WHNVWRZH f :Ú]ï\HOHPHQWöZPRĝQDZ\ELHUDÊ]DSRPRFÈLFKDWU\EXWöZ id lub FODVVQD]Z\]QDF]QLNDEÈGěWHĝVNïDGQLVHOHNWRUD&66 f -HĝHOL]DS\WDQLHPRGHOX'20PRĝH]ZUöFLÊZLÚFHMQLĝW\ONR MHGHQZÚ]HïWRZDUWRĂFLÈ]ZURWQÈ]DZV]HEÚG]LHNROHNFMD NodeList. f =SR]LRPXZÚ]ïDHOHPHQWXPRĝQDX]\VNDÊGRVWÚSGRMHJR ]DZDUWRĂFLLXDNWXDOQLÊMÈ]DSRPRFÈZïDĂFLZRĂFLWDNLFKMDN textContent i innerHTMLOXEWHFKQLNRSHUDFMLQDPRGHOX DOM. f :Ú]HïHOHPHQWXPRĝH]DZLHUDÊZLHOHZÚ]ïöZWHNVWRZ\FK DWDNĝHHOHPHQW\SRWRPQHNWöUHEÚGÈUöZQRU]ÚGQHZREHF VLHELH f :VWDUV]\FKSU]HJOÈGDUNDFKLQWHUQHWRZ\FKLPSOHPHQWDFMD PRGHOX'20MHVWQLHVSöMQD WRMHGQRF]HĂQLHMHGHQ]W\SRZ\FK SRZRGöZXĝ\FLDELEOLRWHNLM4XHU\ f 1DU]ÚG]LDZEXGRZDQHZSU]HJOÈGDUNDFKLQWHUQHWRZ\FK SR]ZDODMÈQDZ\ĂZLHWODQLHGU]HZDPRGHOX'20 248 OBIEKTOWY MODEL DOKUMENTU 6 ZDARZENIA .LHG\SU]HJOÈGDV]]DVRE\LQWHUQHWXSU]HJOÈGDUNDUHMHVWUXMH UöĝQHJRW\SX]GDU]HQLDMDNE\]DXZDĝDïDķ+HMWRVLÚ ZïDĂQLH]GDU]\ïRĵ7ZöMVNU\SWPRĝHQDVWÚSQLHUHDJRZDÊ QDWH]GDU]HQLD %DUG]RF]ÚVWRUHDNFMÈVNU\SWXQD]GDU]HQLDMHVWXDNWXDOQLDQLH]DZDUWRĂFLQDVWURQLHLQWHUQHWRZHM ]DSRPRFÈPRGHOX'20 FRXXĝ\WNRZQLNDZ\ZRïXMHZUDĝHQLHĝHVWURQDMHVWEDUG]LHM LQWHUDNW\ZQD:W\PUR]G]LDOHGRZLHV]VLÚMDN INTERAKCJE TWORZĄ ZDARZENIA ZDARZENIA WYWOŁUJĄ KOD =GDU]HQLDZ\VWÚSXMÈJG\ Xĝ\WNRZQLNNOLNQLHOXEQDFLĂQLHïÈF]HXPLHĂFLNXUVRU QDGHOHPHQWHP]DF]QLH ZSLV\ZDÊWHNVW]NODZLDWXU\ ]PLHQLZLHONRĂÊRNQDOXEJG\ ]RVWDQLHZF]\WDQDĝÈGDQD SU]H]QLHJRVWURQD .LHG\Z\VWÈSL]GDU]HQLH PRĝHE\ÊZ\NRU]\VWDQH GRZ\ZRïDQLDRNUHĂORQHM IXQNFML5öĝQHURG]DMH NRGXPRJÈE\ÊZ\ZRïDQH JG\Xĝ\WNRZQLNSURZDG]L LQWHUDNFMH]SRV]F]HJöOQ\PL VHNFMDPLVWURQ\LQWHUQHWRZHM 250 ZDARZENIA KOD REAGUJE NA DZIAŁANIA UŻYTKOWNIKA :SRSU]HGQLPUR]G]LDOH GRZLHG]LDïHĂVLÚMDN PRGHO'20PRĝHE\Ê Xĝ\W\GRXDNWXDOQLHQLDVWURQ\ LQWHUQHWRZHM=GDU]HQLD PRJÈZ\ZRï\ZDÊ]PLDQ\ ZPRGHOX'20:WHQ VSRVöEVWURQDUHDJXMHQD G]LDïDQLDSRGHMPRZDQH SU]H]Xĝ\WNRZQLND ZDARZENIA 251 RÓŻNE TYPY ZDARZEŃ 3RQLĝHMSU]HGVWDZLRQRZ\EUDQH]GDU]HQLDZ\VWÚSXMÈFHZSU]HJOÈGDUFH JG\SU]HJOÈGDV]]DVRE\LQWHUQHWX.DĝGH]W\FK]GDU]HñPRĝHE\Ê Z\NRU]\VWDQHGRZ\ZRïDQLDIXQNFMLZNRG]LH-DYD6FULSW ZDARZENIA UI :\VWÚSXMÈJG\Xĝ\WNRZQLNSURZDG]LLQWHUDNFMH]JUDğF]Q\PLQWHUIHMVHPXĝ\WNRZQLND DQJuser interfaceĽ8, SU]HJOÈGDUNLDQLH]HVDPÈVWURQÈ ZDARZENIE OPIS load =DNRñF]RQRZF]\W\ZDQLHVWURQ\LQWHUQHWRZHM unload 6WURQDLQWHUQHWRZDMHVWXVXZDQD ]Z\NOH]SRZRGXSRMDZLHQLDVLÚĝÈGDQLDZF]\WDQLDQRZHM VWURQ\ error 3U]HJOÈGDUNDLQWHUQHWRZDQDSRWNDïDEïÈG-DYD6FULSWOXE]DVöEQLHLVWQLHMH resize =PLHQLRQRZLHONRĂÊRNQDSU]HJOÈGDUNLLQWHUQHWRZHM scroll 8ĝ\WNRZQLNSU]HZLQÈïVWURQÚZJöUÚOXEZGöï ZDARZENIA KLAWIATURY :\VWÚSXMÈJG\Xĝ\WNRZQLNSURZDG]LLQWHUDNFMH]NODZLDWXUÈ ]REDF]WDNĝH]GDU]HQLHinput ZDARZENIE OPIS keydown 8ĝ\WNRZQLNSRUD]SLHUZV]\QDFLVQÈïNODZLV] ]GDU]HQLHSRZWDU]DVLÚJG\NODZLV]SR]RVWDMH QDFLĂQLÚW\ keyup 8ĝ\WNRZQLN]ZROQLïNODZLV] keypress 1DVWÈSLïRZVWDZLHQLH]QDNX ]GDU]HQLHSRZWDU]DVLÚJG\NODZLV]SR]RVWDMHQDFLĂQLÚW\ ZDARZENIA MYSZY :\VWÚSXMÈJG\Xĝ\WNRZQLNSURZDG]LLQWHUDNFMH]P\V]ÈJïDG]LNLHPOXEHNUDQHPGRW\NRZ\P ZDARZENIE OPIS click 8ĝ\WNRZQLNQDFLVQÈïL]ZROQLïSU]\FLVNP\V]\QDGW\PVDP\PHOHPHQWHP dblclick 8ĝ\WNRZQLNGZXNURWQLHQDFLVQÈïL]ZROQLïSU]\FLVNP\V]\QDGW\PVDP\PHOHPHQWHP mousedown 8ĝ\WNRZQLNQDFLVQÈïSU]\FLVNP\V]\QDGHOHPHQWHP mouseup 8ĝ\WNRZQLN]ZROQLïSU]\FLVNP\V]\QDGHOHPHQWHP mousemove 8ĝ\WNRZQLNSU]HVXQÈïP\V] QLHGRW\F]\HNUDQXGRW\NRZHJR mouseover 8ĝ\WNRZQLNSU]HVXQÈïNXUVRUP\V]\QDGHOHPHQW QLHGRW\F]\HNUDQXGRW\NRZHJR mouseout 8ĝ\WNRZQLNSU]HVXQÈïNXUVRUP\V]\SR]DHOHPHQW QLHGRW\F]\HNUDQXGRW\NRZHJR 252 ZDARZENIA TERMINOLOGIA ZDARZENIA SĄ WYWOŁYWANE 2]GDU]HQLXPRĝQDSRZLHG]LHÊĝH]RVWDïR]JïRV]RQHOXEZ\ZRïDQH *G\Xĝ\WNRZQLNNOLNQLHïÈF]H SDWU]U\VXQHNSRSUDZHMVWURQLH ZSU]HJOÈGDUFHLQWHUQHWRZHMQDVWÈSLZ\ZRïDQLH]GDU]HQLDclick SKRYPTY SĄ WYWOŁYWANE PRZEZ ZDARZENIA 0öZLVLÚĝH]GDU]HQLDZ\ZRïXMÈIXQNFMÚOXEVNU\SW.LHG\ ZVSRPQLDQHSRZ\ĝHM]GDU]HQLHclick]RVWDQLHZ\ZRïDQHPRĝH XUXFKRPLÊVNU\SWSRZLÚNV]DMÈF\Z\EUDQ\HOHPHQW ZDARZENIA AKTYWNOŚCI :\VWÚSXMÈJG\HOHPHQW QDSU]\NïDGïÈF]HOXESROHIRUPXODU]D VLHFLRZHJR VWDMHVLÚDNW\ZQ\EÈGěQLHDNW\ZQ\ ZDARZENIE OPIS focus / focusin (OHPHQWVWDMHVLÚDNW\ZQ\ blur / focusout (OHPHQWVWDMHVLÚQLHDNW\ZQ\ ZDARZENIA FORMULARZY SIECIOWYCH :\VWÚSXMÈJG\Xĝ\WNRZQLNSURZDG]LLQWHUDNFMH ]HOHPHQWHPIRUPXODU]DVLHFLRZHJR ZDARZENIE OPIS input =PLDQLHXOHJïDZDUWRĂÊZGRZROQ\PHOHPHQFLH<input>OXE<textarea> ,( EÈGěWHĝ ZGRZROQ\PHOHPHQFLH]DZLHUDMÈF\PDWU\EXWcontenteditable change =PLDQLHXOHJïDZDUWRĂÊZHOHPHQFLH<select>SROXZ\ERUXOXESU]\FLVNXRSFML ,( submit 8ĝ\WNRZQLNZ\VïDïIRUPXODU]VLHFLRZ\ ]DSRPRFÈSU]\FLVNXOXENODZLV]D reset 8ĝ\WNRZQLNNOLNQÈïSU]\FLVN]HUXMÈF\IRUPXODU]VLHFLRZ\ REHFQLHU]DGNRVWRVRZDQ\ cut 8ĝ\WNRZQLNZ\FLÈï]DZDUWRĂÊ]SRODIRUPXODU]DVLHFLRZHJR copy 8ĝ\WNRZQLNVNRSLRZDï]DZDUWRĂÊ]SRODIRUPXODU]DVLHFLRZHJR paste 8ĝ\WNRZQLNZNOHLï]DZDUWRĂÊGRSRODIRUPXODU]DVLHFLRZHJR select 8ĝ\WNRZQLN]D]QDF]\ïSHZLHQWHNVWZSROXIRUPXODU]DVLHFLRZHJR ZDARZENIA DOTYCZĄCE ZMIAN* :\VWÚSXMÈJG\QDVWÈSL]PLDQDVWUXNWXU\PRGHOX'20 QDVNXWHNG]LDïDQLDVNU\SWX %ÚGÈ]DVWÈSLRQHSU]H]REVHUZDWRU\]PLDQ SDWU]SRGUR]G]LDïķ=GDU]HQLDGRW\F]ÈFH]PLDQLREVHUZDWRU\ĵ ZDARZENIE OPIS '206XEWUHH0RGLğHG :SURZDG]RQR]PLDQÚZGRNXPHQFLH DOMNodeInserted :Ú]Hï]RVWDïZVWDZLRQ\MDNREH]SRĂUHGQLHOHPHQWSRWRPQ\LQQHJRZÚ]ïD DOMNodeRemoved :Ú]Hï]RVWDïXVXQLÚW\]LQQHJRZÚ]ïD DOMNodeInsertedIntoDocument :Ú]Hï]RVWDïZVWDZLRQ\MDNRHOHPHQWSRWRPQ\LQQHJRZÚ]ïD DOMNodeRemovedFromDocument :Ú]Hï]RVWDïXVXQLÚW\MDNRHOHPHQWSRWRPQ\LQQHJRZÚ]ïD ZDARZENIA 253 JAK ZDARZENIA WYWOŁUJĄ KOD JAVASCRIPT? .LHG\Xĝ\WNRZQLNSURZDG]LLQWHUDNFMH]NRGHP+70/QDVWURQLHLQWHUQHWRZHM PDP\WU]\NURNLSURZDG]ÈFHGRZ\ZRïDQLDSHZQHJRNRGX-DYD6FULSW5D]HP WHNURNLVÈRNUHĂODQHPLDQHPSURFHGXU\REVïXJL]GDU]Hñ 1. 2. 3. :\ELHU]ZÚ]Hï HOHPHQWXGRNWöUHJR VNU\SWPDSU]HVïDÊ RGSRZLHGě :VNDĝ]GDU]HQLH NWöUHZZ\EUDQ\P HOHPHQFLHVSRZRGXMH XG]LHOHQLHRGSRZLHG]L =GHğQLXMNRG XUXFKDPLDQ\ SRZ\VWÈSLHQLX ]GDU]HQLD -HĂOLQDSU]\NïDGFKFHV] Z\ZRïDÊIXQNFMÚJG\Xĝ\WNRZQLNNOLNQLHRNUHĂORQHïÈF]HWR PXVLV]SREUDÊZÚ]HïPRGHOX '20GODHOHPHQWXWHJRïÈF]D :W\PFHOXQDOHĝ\Z\NRU]\VWDÊ RPöZLRQHZUR]G]LDOH ]DS\WDQLHPRGHOX'20 3URJUDPLĂFLQD]\ZDMÈWR GRïÈF]HQLHP]GDU]HQLDGR ZÚ]ïDPRGHOX'20 .LHG\RNUHĂORQH]GDU]HQLH Z\VWÈSLZHZVND]DQ\P HOHPHQFLH]RVWDQLHZ\ZRïDQD IXQNFMD0RĝHWRE\ÊIXQNFMD QD]ZDQDOXEDQRQLPRZD =GDU]HQLDLQWHUIHMVXXĝ\WNRZQLNDSRZLÈ]DQH]RNQHP SU]HJOÈGDUNLLQWHUQHWRZHM DQLH]ZF]\WDQÈZQLPVWURQÈ +70/ G]LDïDMÈ]RELHNWHP window]DPLDVW]ZÚ]ïHP HOHPHQWX3U]\NïDGHPPRJÈ E\Ê]GDU]HQLD]DFKRG]ÈFHSR ]DNRñF]HQLXZF]\W\ZDQLDĝÈGDQHMVWURQ\OXESRMHMSU]HZLQLÚFLXSU]H]Xĝ\WNRZQLND:LÚFHM LQIRUPDFMLRW\FK]GDU]HQLDFK ]QDMG]LHV]ZSRGUR]G]LDOHķ=GDU]HQLDLQWHUIHMVXXĝ\WNRZQLNDĵ 3HZQH]GDU]HQLDG]LDïDMÈ ZZLÚNV]RĂFLZÚ]ïöZHOHPHQWöZ3U]\NïDGHPPRĝHE\Ê ]GDU]HQLHmouseoverNWöUHMHVW Z\ZRï\ZDQHSRXPLHV]F]HQLX NXUVRUDP\V]\QDGGRZROQ\P HOHPHQWHP=NROHLLQQH ]GDU]HQLDG]LDïDMÈW\ONR]RNUHĂORQ\PLZÚ]ïDPLHOHPHQWöZ 3U]\NïDGHPMHVW]GDU]HQLH submitNWöUHG]LDïDMHG\QLH ]IRUPXODU]HPVLHFLRZ\P 254 ZDARZENIA 1DSRSU]HGQLFKGZöFK VWURQDFKZ\PLHQLRQRQDMSRSXODUQLHMV]H]GDU]HQLDSRGNÈWHP NWöU\FKPRĝQDPRQLWRURZDÊ Z\EUDQ\HOHPHQW 3RQLĝHMSRND]DQRMDNSURFHGXUDREVïXJL]GDU]HñPRĝHE\ÊZ\NRU]\VWDQD ZFHOXGRVWDUF]HQLDXĝ\WNRZQLNRZLLQIRUPDFMLJG\Z\SHïQLDRQIRUPXODU] UHMHVWUDF\MQ\-HĝHOLQD]ZDXĝ\WNRZQLNDEÚG]LH]E\WNUöWNDWR]RVWDQLHZ\ĂZLHWORQ\NRPXQLNDWREïÚG]LH 1. 2. 3. WYBÓR ELEMENTU WSKAZANIE ZDARZENIA WYWOŁANIE KODU .LHG\Xĝ\WNRZQLNRSXĂFLZVSRPQLDQHSROHWHNVWRZHVWDQLH VLÚRQRQLHDNW\ZQHLGODGDQHJR HOHPHQWX]RVWDQLHZ\ZRïDQH ]GDU]HQLHblur 3RZ\ZRïDQLX]GDU]HQLD blurGODSRODWHNVWRZHJR SR]ZDODMÈFHJRQDSRGDQLH QD]Z\Xĝ\WNRZQLNDQDVWÈSL Z\ZRïDQLHIXQNFMLRQD]ZLH checkUsername())XQNFMDWD VSUDZG]DF]\QD]ZDXĝ\WNRZQLNDPDPQLHMQLĝ]QDNöZ (OHPHQW]NWöU\PEÚG]LH SUDFRZDïXĝ\WNRZQLNWRSROH WHNVWRZHSU]H]QDF]RQHQD QD]ZÚXĝ\WNRZQLND 2 1 Zdarzenie: blur w polu tekstowym dla nazwy użytkownika Funkcja: checkUsername() Sprawdza, czy nazwa użytkownika jest wystarczająco długa 3 Pobranie nazwy użytkownika N Czy nazwa użytkownika ma mniej niż pięć znaków? Usuń komunikat T Wyświetl komunikat o błędzie -HĝHOLQD]ZDXĝ\WNRZQLNDQLH PDZ\VWDUF]DMÈFRGXĝHMOLF]E\ ]QDNöZQDHNUDQLHEÚG]LH Z\ĂZLHWORQ\RGSRZLHGQLNRPXQLNDWREïÚG]LHDLQWHUQDXWD SRZLQLHQSRGDÊGïXĝV]ÈQD]ZÚ Xĝ\WNRZQLND -HĝHOLQD]ZDXĝ\WNRZQLND zawieraRGSRZLHGQLÈOLF]EÚ ]QDNöZWRHOHPHQWSU]HFKRZXMÈF\NRPXQLNDWREïÚG]LH SRZLQLHQE\ÊXVXQLÚW\ :\QLNDWR]IDNWXĝHNRPXQLNDW WHQPöJï]RVWDÊZF]HĂQLHMZ\ĂZLHWORQ\Xĝ\WNRZQLNRZLNWöU\ QDVWÚSQLHSRSUDZLïEïÈG -HĝHOL NRPXQLNDWEÚG]LHQDGDOZ\ĂZLHWODQ\SRPLPRĝHIRUPXODU] EÚG]LHSRSUDZQLHZ\SHïQLRQ\ WREÚG]LHWRGH]RULHQWXMÈFHGOD Xĝ\WNRZQLND ZDARZENIA 255 TRZY SPOSOBY DOŁĄCZANIA ZDARZENIA DO ELEMENTU 3URFHGXU\REVïXJL]GDU]HñSR]ZDODMÈZVND]DÊQDNWöUH]GDU]HQLHRF]HNXMH SHZLHQNRQNUHWQ\HOHPHQW0DP\WU]\URG]DMHSURFHGXUREVïXJL]GDU]Hñ PROCEDURY OBSŁUGI ZDARZEŃ W HTML 3DWU]SRGUR]G]LDïķ3URFHGXU\ REVïXJL]GDU]HñZDWU\EXWDFK +70/ĵ 7R]ïDSUDNW\NDDOHPXVLV] PLHÊĂZLDGRPRĂÊMHMLVWQLHQLDSRQLHZDĝWHJRURG]DMX UR]ZLÈ]DQLHPRĝQDVSRWNDÊ ZVWDUV]\PNRG]LH :F]HVQHZHUVMH+70/]DZLHUDï\]ELöUDWU\EXWöZ]ZLÈ]DQ\FK ]UHDJRZDQLHPQD]GDU]HQLD ZHOHPHQFLHGRNWöUHJR]RVWDï\ GRGDQH1D]Z\DWU\EXWöZRGSRZLDGDï\QD]ZRP]GDU]Hñ,FK ZDUWRĂFLZ\ZRï\ZDï\IXQNFMH SU]H]QDF]RQHGRZ\NRQDQLDSR Z\VWÈSLHQLXGDQHJR]GDU]HQLD 1DSU]\NïDGNRGZSRVWDFL <a onclick=”hide()”> ZVND]XMHĝHSRNOLNQLÚFLXWHJR HOHPHQWX<a>SU]H]Xĝ\WNRZQLNDQDVWÈSLZ\ZRïDQLHIXQNFML hide() 7DNDPHWRGDREVïXJL]GDU]Hñ QLHSRZLQQDE\ÊGïXĝHM VWRVRZDQDSRQLHZDĝOHSV]\P UR]ZLÈ]DQLHPEÚG]LHRGG]LHOHQLHNRGX-DYD6FULSWRG+70/ =DPLDVWWHJRSRZLQLHQHĂ Xĝ\ZDÊMHGQHJR]GZöFKSR]RVWDï\FKSRGHMĂÊZ\PLHQLRQ\FK QDVWURQLH 256 ZDARZENIA TRADYCYJNE PROCEDURY OBSŁUGI ZDARZEŃ W MODELU DOM 3DWU]SRGUR]G]LDïķ7UDG\F\MQH SURFHGXU\REVïXJL]GDU]Hñ ZPRGHOX'20ĵ 3URFHGXU\REVïXJL]GDU]Hñ ZPRGHOX'20]RVWDï\ ZSURZDG]RQHZSLHUZRWQHM VSHF\ğNDFMLPRGHOX'206È X]QDZDQH]DOHSV]HUR]ZLÈ]DQLH QLĝSURFHGXU\REVïXJL]GDU]Hñ Z+70/SRQLHZDĝSR]ZDODMÈ QDUR]G]LHOHQLHNRGX-DYD6FULSW L+70/ 3RGHMĂFLHWRMHVWGRVNRQDOH REVïXJLZDQHSU]H]ZV]\VWNLH QDMZDĝQLHMV]HSU]HJOÈGDUNL LQWHUQHWRZH3RGVWDZRZÈZDGÈ MHVWPRĝOLZRĂÊSU]\SLVDQLD GRZROQHPX]GDU]HQLXW\ONR MHGQHMIXQNFML1DSU]\NïDG ]GDU]HQLHsubmitIRUPXODU]D VLHFLRZHJRQLHPRĝHZ\ZRïDÊ MHGQHMIXQNFMLSU]H]QDF]RQHMGR VSUDZG]HQLD]DZDUWRĂFLIRUPXODU]DRUD]GUXJLHMZ\V\ïDMÈFHM GDQHIRUPXODU]DVLHFLRZHJR MHĂOLLFKZHU\ğNDFMD]DNRñF]\ïD VLÚSRZRG]HQLHP :Z\QLNXZ\PLHQLRQHJR RJUDQLF]HQLDMHĂOLQDWHMVDPHM VWURQLHVÈXĝ\ZDQHGZDVNU\SW\ OXEZLÚNV]DLFKOLF]ED LRED XG]LHODMÈRGSRZLHG]LQDWR VDPR]GDU]HQLH]DUöZQRMHGHQ MDNLGUXJLPRĝHQLHG]LDïDÊ ]JRGQLH]RF]HNLZDQLDPL OBSERWATORY ZDARZEŃ (DOM LEVEL 2) 3DWU]SRGUR]G]LDïķ2EVHUZDWRU\ ]GDU]Hñĵ 2EVHUZDWRU\]GDU]HñZSURZDG]RQRZVSHF\ğNDFMLPRGHOX '20 Z\GDQDZURNX VSHF\ğNDFMD'20/HYHO 2EHFQLHMHVWWR]DOHFDQ\VSRVöE REVïXJL]GDU]Hñ 6NïDGQLDMHVWFDïNLHPLQQD :SU]HFLZLHñVWZLHGRWUDG\F\MQ\FKSURFHGXUREVïXJL]GDU]Hñ REVHUZDWRU\WHSR]ZDODMÈ DE\MHGQR]GDU]HQLHZ\ZRïDïR ZLHOHIXQNFML'ODWHJRWHĝ LVWQLHMH]QDF]QLHPQLHMV]H QLHEH]SLHF]HñVWZRZ\VWÈSLHQLD NRQĠLNWöZPLÚG]\UöĝQ\PL VNU\SWDPLG]LDïDMÈF\PLQDWHM VDPHMVWURQLH 7HFKQLNDWDQLHG]LDïD ZSU]HJOÈGDUFHLQWHUQHWRZHM ,( RUD]ZF]HĂQLHMV]\FK Z\GDQLDFK,( DOHRGSRZLHGQLH REHMĂFLHWHJRSUREOHPXEÚG]LH SU]HGVWDZLRQHZSRGUR]G]LDOH ķ2EVïXJDZVWDUV]\FKZHUVMDFK SU]HJOÈGDUNL,QWHUQHW([SORUHUĵ 5öĝQLFHZRIHURZDQHMSU]H] SRV]F]HJöOQHSU]HJOÈGDUNLLQWHUQHWRZHREVïXG]HPRGHOX'20 L]GDU]Hñ]QDF]QLHSU]\VSLHV]\ï\ DGDSWDFMÚELEOLRWHNLM4XHU\ MHGQDNPXVLV]ZLHG]LHÊQD F]\PSROHJDMÈ]GDU]HQLDDE\ ]UR]XPLHÊZMDNLVSRVöEVÈ Xĝ\ZDQHSU]H]M4XHU\ PROCEDURY OBSŁUGI ZDARZEŃ W ATRYBUTACH HTML (NIE UŻYWAJ TEGO ROZWIĄZANIA) 8ZDJD3U]HGVWDZLRQHWXWDM SRGHMĂFLHMHVWWHUD]X]QDZDQH ]D]ïÈSUDNW\NÚ-HGQDN PXVLV]PLHÊĂZLDGRPRĂÊMHM LVWQLHQLDSRQLHZDĝWHJRURG]DMX UR]ZLÈ]DQLHPRĝQDVSRWNDÊ ZVWDUV]\PNRG]LH SDWU] SRSU]HGQLDVWURQD :NRG]LH+70/SLHUZV]\ HOHPHQW<input>PDDWU\EXW RQD]ZLHonblur Z\ZRï\ZDQ\ JG\Xĝ\WNRZQLNRSXĂFLGDQ\ HOHPHQW :DUWRĂFLÈDWU\EXWX MHVWQD]ZDIXQNFMLNWöUD SRZLQQDE\ÊZ\NRQDQD :DUWRĂFLÈDWU\EXWöZSURFHGXU\ REVïXJL]GDU]HñEÚG]LHNRG -DYD6FULSW%DUG]RF]ÚVWR Z\ZRï\ZDQDMHVWIXQNFMD NWöUD]RVWDïD]GHğQLRZDQD ZHOHPHQFLH<head>OXEWHĝ RGG]LHOQ\PSOLNX-DYD6FULSW MDNSU]HGVWDZLRQRSRQLĝHM c06/event-attributes.html HTML <form method=”post” action=”http://www.example.org/register”> <label for=”username”>3RGDMQD]ZÚXĝ\WNRZQLND </label> <input type=”text” id=”username” onblur=”checkUsername()” /> <div id=”feedback”></div> <label for=”password”>3RGDMKDVïR </label> <input type=”password” id=”password” /> <input type=”submit” value=”Zarejestruj!” /> </form> ... <script type=”text/javascript” src=”js/event-attributes.js”></script> 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 ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZĳ // 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\<a>PRJÈPLHÊ]GDU]HQLDonclickonmouseover onmouseout; HOHPHQW\<form>PRJÈPLHÊ]GDU]HQLDonsubmit; HOHPHQW\<input>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 = ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZĳ // 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 = ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZĳ // 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 ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMĳPLQ/HQJWKĳ]QDNöZĳ } 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 = ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMĳPLQ/HQJWK ĳ]QDNöZĳ } 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 HOHPHQFLH<a>RUD]ZHZV]\VWNLFKHOHPHQWDFK ZHZQÈWU]NWöU\FK]QDMGXMHVLÚWHQHOHPHQW<a> DO CU <ht m <b o <ul < li ME DO CU NT l> dy 3URFHGXU\REVïXJL]GDU]HñRUD]REVHUZDWRU\]GDU]HñPRĝQDGRïÈF]DÊGRHOHPHQWöZQDGU]ÚGQ\FK F]\OLZRPDZLDQ\PSU]\NïDG]LHGR<li><ul> <body> i <html>DWDNĝHGRRELHNWöZdocument i window.ROHMQRĂÊZ\ZRï\ZDQLD]GDU]HñQRVL QD]ZÚSU]HSï\ZX]GDU]HñD]GDU]HQLDSRUXV]DMÈ VLÚZREXNLHUXQNDFK <ht m <b o > > > <a> <ul < li ME NT l> dy > > > <a> 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<ul>; MHGHQZHOHPHQFLH<li>; MHGHQZHOHPHQFLH<a> 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]HOHPHQWX<a>ZNROHMQ\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/ ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHMĳPLQ/HQJWKĳ]QDNöZĳ } 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<ul> ]DPLDVWZSRV]F]HJöOQ\FKHOHPHQWDFK<li>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 <ul> 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 <ul>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<li> =PLHQQDelGrandparentSU]HFKRZXMHHOHPHQW QDGU]ÚGQ\HOHPHQWXQDGU]ÚGQHJR (OHPHQW<li>]RVWDMHXVXQLÚW\]HOHPHQWX<ul> 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 (<li>) 9 Pobranie elementu nadrzędnego elementu nadrzędnego (<ul>) 10 Usunięcie elementu <li> z <ul> 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 <ul id=”shoppingList”> <li class=”complete”><a <li class=”complete”><a <li class=”complete”><a <li class=”complete”><a </ul> href=”itemDone.php?id=1”><em>ĂZLHĝH</em> ğJL</a></li> href=”itemDone.php?id=2”>orzeszki piniowe</a></li> href=”itemDone.php?id=3”>PLöG</a></li> href=”itemDone.php?id=4”>ocet balsamiczny</a></li> 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/ ĳ1D]ZDXĝ\WNRZQLNDMHVW]E\WNUöWNDĳ } 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/ ĳ1D]ZDXĝ\WNRZQLNDMHVW]E\WNUöWNDĳ } 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<body> 1DSU]\NïDGVWDUV]\NRGPRĝHXĝ\ZDÊDWU\EXWXonloadZFHOX Z\ZRïDQLDNRGXSU]H]QDF]RQHJRGRXUXFKRPLHQLDSRZF]\WDQLX VWURQ\LQWHUQHWRZHM ZDARZENIE :<:2<:$1( load 2%68*$:35=(*/k'$5.$&+ ,17(51(72:<&+ :\ZRï\ZDQHSRSHïQ\PZF]\WDQLXVWURQ\ :HGïXJVSHF\ğNDFML'20/HYHO OLVWRSDG RPDZLDQH LQWHUQHWRZHM=GDU]HQLHWRMHVWZ\ZRï\ZDQH ]GDU]HQLHMHVWZ\ZRï\ZDQHZRELHNFLHdocumentFKRÊZF]HĂ- WDNĝHZZÚ]ïDFKLQQ\FKHOHPHQWöZSU]H- QLHME\ïRZ\ZRï\ZDQHZRELHNFLHwindow:FHOX]DSHZQLHQLD ]QDF]RQ\FKGRZF]\WDQLDWDNLFKMDNREUD]\ ZVWHF]QHM]JRGQRĂFLSU]HJOÈGDUNLREVïXJXMÈREDSRGHMĂFLD VNU\SW\LRELHNW\ SURJUDPLĂFLF]ÚVWRGRïÈF]DMÈSURFHGXU\REVïXJL]GDU]Hñload GRRELHNWXwindow ]DPLDVWdocument unload :\ZRï\ZDQHSRGF]DVXVXZDQLDVWURQ\ :HGïXJVSHF\ğNDFML'20/HYHORPDZLDQH]GDU]HQLHMHVW LQWHUQHWRZHM QDMF]ÚĂFLHMSRZ\VWÈSLHQLX Z\ZRïDQHZZÚěOHGODHOHPHQWX<body>DOHZVWDUV]\FK ĝÈGDQLDSREUDQLDQRZHMVWURQ\ =DSR]QDM SU]HJOÈGDUNDFKLQWHUQHWRZ\FKMHVWZ\ZRï\ZDQHZRELHNFLH VLÚWDNĝH]RSLVHP]GDU]HQLDbeforeunload window WÚPRĝOLZRĂÊF]ÚVWR]DFKRZXMHVLÚZFHOX]DFKRZD- SDWU]SRGUR]G]LDïķ=GDU]HQLD+70/ĵ NWöUH QLDZVWHF]QHM]JRGQRĂFL MHVWZ\ZRï\ZDQHSU]HGRSXV]F]HQLHPVWURQ\ SU]H]Xĝ\WNRZQLND error :\ZRï\ZDQHNLHG\SU]HJOÈGDUNDLQWHUQHWRZD 2EVïXJDWHJR]GDU]HQLDMHVWQLHVSöMQDZSU]HJOÈGDUNDFK QDSRWNDEïÈG-DYD6FULSWOXEJG\]DVöEQLH LQWHUQHWRZ\FKLGODWHJRQLHVWDQRZLRQRQLH]DZRGQHJR LVWQLHMH VSRVREXREVïXJLEïÚGöZ:LÚFHMLQIRUPDFMLQDWHQWHPDW ]QDMG]LHV]ZUR]G]LDOH resize :\ZRï\ZDQHSR]PLDQLHZLHONRĂFLRNQD 3RGF]DV]PLDQ\ZLHONRĂFLRNQDSU]HJOÈGDUNDLQWHUQHWRZD SU]HJOÈGDUNLLQWHUQHWRZHM QLHXVWDQQLHZ\ZRïXMH]GDU]HQLHresize'ODWHJRWHĝXQLNDM Xĝ\FLDWHJR]GDU]HQLDGRZ\NRQ\ZDQLDVNRPSOLNRZDQHJR NRGXSRQLHZDĝVWURQDPRĝHE\ÊZöZF]DVRGHEUDQDMDNR ZROQRUHDJXMÈFDQDG]LDïDQLDXĝ\WNRZQLND scroll :\ZRï\ZDQHSRSU]HZLQLÚFLX]DZDUWRĂFL 3RGF]DVSU]HZLMDQLD]DZDUWRĂFLRNQDSU]HJOÈGDUNDLQWHUQHWR- VWURQ\ZJöUÚOXEZGöï0RĝHRGQRVLÊVLÚ ZDQLHXVWDQQLHZ\ZRïXMH]GDU]HQLHscroll'ODWHJRWHĝXQLNDM GRFDïHMVWURQ\OXERNUHĂORQHJRHOHPHQWXQD Xĝ\FLDWHJR]GDU]HQLDGRZ\NRQ\ZDQLDVNRPSOLNRZDQHJR VWURQLH QDSU]\NïDG<textarea>SRVLDGDMÈFH- NRGXJG\Xĝ\WNRZQLNSU]HZLMD]DZDUWRĂÊVWURQ\ JRSDVNLSU]HZLMDQLD 278 ZDARZENIA ZDARZENIE LOAD =GDU]HQLHloadMHVWEDUG]R F]ÚVWRXĝ\ZDQHGRZ\NRQDQLD VNU\SWXNWöU\PXVLX]\VNDÊ GRVWÚSGR]DZDUWRĂFLQDVWURQLH :RPDZLDQ\PSU]\NïDG]LH IXQNFMDRQD]ZLHsetup() XDNW\ZQLDSROHWHNVWRZHSR ZF]\WDQLXVWURQ\ =GDU]HQLHMHVWDXWRPDW\F]QLH Z\ZRï\ZDQHSU]H]RELHNW windowSR]DNRñF]HQLX ZF]\W\ZDQLDVWURQ\+70/oraz MHM]DVREöZREUD]öZVW\OöZ &66VNU\SWöZ QDZHW]DZDUWRĂFLGRVWDUF]DQHMSU]H]ğUP\ WU]HFLHQDSU]\NïDGEDQHUöZ UHNODPRZ\FK )XQNFMDsetup()QLHEÚG]LH G]LDïDïDSU]HGZF]\WDQLHP VWURQ\SRQLHZDĝRSLHUDVLÚQD Z\V]XNDQLXHOHPHQWXNWöUHJR ZDUWRĂFLÈDWU\EXWXidMHVW username2GQDOH]LRQ\HOHPHQW MHVWQDVWÚSQLHDNW\ZRZDQ\ c06/js/load.js JAVASCRIPT function setup() { // Deklaracja funkcji. var textInput; // Utworzenie zmiennej. textInput = document.getElementById(’username’); 3REUDQLHSRODWHNVWRZHJR XVHUQDPH textInput.focus(); 8DNW\ZQLHQLHHOHPHQWXSRODWHNVWRZHJR } window.addEventListener(’load’, setup, false); 3RZF]\WDQLXVWURQ\EÚG]LHZ\ZRïDQDIXQNFMDVHWXS WYNIK =ZUöÊXZDJÚQDGRïÈF]HQLHREVHUZDWRUD]GDU]Hñ GRRELHNWXwindow DQLHRELHNWXdocument SRQLHZDĝZRPDZLDQ\PSU]\NïDG]LHPRĝHWR GRSURZDG]LÊGRSUREOHPöZZ\QLNDMÈF\FK]EUDNX ]JRGQRĂFLPLÚG]\SU]HJOÈGDUNDPL 3RQLHZDĝ]GDU]HQLHloadMHVWZ\ZRï\ZDQH GRSLHURSRZF]\WDQLXFDïHM]DZDUWRĂFLVWURQ\ REUD]\VNU\SW\DQDZHWUHNODP\ Xĝ\WNRZQLN UR]SRF]QLHNRU]\VWDQLH]HVWURQ\zanimQDVWÈSL XUXFKRPLHQLHVNU\SWX -HĝHOLHOHPHQW<script>]QDMGXMHVLÚQDNRñFX VWURQ\+70/WRPRGHO'20ZF]\WDHOHPHQW\ IRUPXODU]DVLHFLRZHJRSU]HGXUXFKRPLHQLHP VNU\SWXDW\PVDP\PQLHPDNRQLHF]QRĂFL RF]HNLZDQLDQD]GDU]HQLHload 3DWU]WDNĝH ]GDU]HQLHDOMContentLoadedZSRGUR]G]LDOH ķ=GDU]HQLD+70/ĵLPHWRGDdocument.ready() ELEOLRWHNLM4XHU\SU]HGVWDZLRQDZUR]G]LDOH ZSRGUR]G]LDOHķ6SUDZG]HQLHF]\VWURQDMHVW JRWRZDGRWHJRE\]QLÈSUDFRZDÊĵ =SXQNWXZLG]HQLDXĝ\WNRZQLNDV]F]HJöOQLHZLGRF]QDEÚG]LHZSURZDG]RQDSU]H]VNU\SW]PLDQD Z\JOÈGXVWURQ\]PLDQDDNW\ZQHJRHOHPHQWX OXEZ\EöUHOHPHQWXIRUPXODU]DJG\Xĝ\WNRZQLN ]QLHJRNRU]\VWD 3RQDGWRZLWU\QDPRĝHE\Ê ZF]\W\ZDQDZROQLHM :\REUDěVRELHIRUPXODU]VLHFLRZ\]ZLHORPD SRODPLWHNVWRZ\PL8ĝ\WNRZQLNPöJïMXĝPLHÊZ\SHïQLRQHSHZQHSROD QDSU]\NïDGGUXJLHLWU]HFLH ZFKZLOLXUXFKRPLHQLDVNU\SWXNWöU\DNW\ZXMH SLHUZV]HSROH$NW\ZDFMDWDQDVWÚSXMH]E\WSöěQR L]DNïöFDSUDFÚXĝ\WNRZQLNRZL ZDARZENIA ZDARZENIA FOCUS I BLUR (OHPHQW\+70/]NWöU\PLXĝ\WNRZQLNSURZDG]LLQWHUDNFMÚQDSU]\NïDG ïÈF]DLHOHPHQW\IRUPXODU]DVLHFLRZHJRPRJÈVWDZDÊVLÚDNW\ZQH ,VWQLHMÈ]GDU]HQLDZ\ZRï\ZDQHDNW\ZDFMÈOXEGH]DNW\ZDFMÈHOHPHQWöZ -HĝHOL]GDQ\PHOHPHQWHP+70/PRĝQD SURZDG]LÊLQWHUDNFMÚWRHOHPHQWWHQPRĝHVWDÊ VLÚDNW\ZQ\OXEQLHDNW\ZQ\3RQDGWR]DSRPRFÈ NODZLV]DTabPRĝQDSRUXV]DÊVLÚPLÚG]\HOHPHQWDPLNWöUHPRJÈE\ÊDNW\ZQH WDWHFKQLNDMHVW F]ÚVWRZ\NRU]\VW\ZDQDSU]H]RVRE\QLHSHïQRVSUDZQH :VWDUV]\FKVNU\SWDFK]GDU]HQLDfocus i blurVÈ EDUG]RF]ÚVWRXĝ\ZDQHZFHOX]PLDQ\Z\JOÈGX HOHPHQWXNWöU\VWDïVLÚDNW\ZQ\-HGQDNREHFQLH SVHXGRNODVD&66RQD]ZLH:focusMHVWOHSV]\P UR]ZLÈ]DQLHP RLOHQLHWU]HEDPLHÊZSï\ZXQD HOHPHQWinnyQLĝWHQNWöU\VWDïVLÚDNW\ZQ\ =GDU]HQLDfocus i blurVÈEDUG]RF]ÚVWRZ\NRU]\VW\ZDQHZIRUPXODU]DFKVLHFLRZ\FK6]F]HJöOQLH Xĝ\WHF]QHVÈZQDVWÚSXMÈF\FKV\WXDFMDFK ľ.RQLHF]QRĂÊZ\ĂZLHWOHQLDSRGSRZLHG]LOXE NRPXQLNDWXXĝ\WNRZQLNRZLZWUDNFLHMHJRSUDF\ ]HOHPHQWDPLIRUPXODU]DVLHFLRZHJR SRGSRZLHG]LWHVÈ]Z\NOHZ\ĂZLHWODQHZinnych HOHPHQWDFKDnieW\FK]NWöU\PLXĝ\WNRZQLN ZïDĂQLHSUDFXMH .RQLHF]QRĂÊSU]HSURZDG]HQLDZHU\ğNDFML IRUPXODU]DVLHFLRZHJRSRGF]DVSU]HMĂFLD Xĝ\WNRZQLND]MHGQHMNRQWURONLGRLQQHM DQLH RF]HNLZDQLH]ZHU\ğNDFMÈGRFKZLOLZ\VïDQLD FDïHJRIRUPXODU]DVLHFLRZHJR ľ ZDARZENIE :<:2<:$1( 35=(3<:='$5=( focus .LHG\HOHPHQWVWDMHVLÚDNW\ZQ\GODMHJRZÚ]ïD'20MHVW Z\ZRï\ZDQH]GDU]HQLHfocus 3U]HFKZ\W\ZDQLH blur .LHG\HOHPHQWVWDMHVLÚQLHDNW\ZQ\GODMHJRZÚ]ïD'20 MHVWZ\ZRï\ZDQH]GDU]HQLHblur 3U]HFKZ\W\ZDQLH focusin 3RGREQLHMDNfocus SDWU]SRZ\ĝHMJG\SRZVWDZDïDWD NVLÈĝND]GDU]HQLHWRQLHE\ïRREVïXJLZDQHZSU]HJOÈGDUFH )LUHIR[ 3U]HFKZ\W\ZDQLHLSURSDJRZDQLH focusout 3RGREQLHMDNblur SDWU]SRZ\ĝHMJG\SRZVWDZDïDWD NVLÈĝND]GDU]HQLHWRQLHE\ïRREVïXJLZDQHZSU]HJOÈGDUFH )LUHIR[ 3U]HFKZ\W\ZDQLHLSURSDJRZDQLH 280 ZDARZENIA ZDARZENIA FOCUS I BLUR :SU]HGVWDZLRQ\PSRQLĝHMSU]\NïDG]LHSROH WHNVWRZHVWDMHVLÚDNW\ZQHLQLHDNW\ZQHDRGSRZLHGQLNRPXQLNDWMHVWZ\ĂZLHWODQ\Xĝ\WNRZQLNRZL ZHOHPHQFLH<div>]QDMGXMÈF\PVLÚSRGSROHP WHNVWRZ\P'RREVïXJLNRPXQLNDWXXĝ\ZDQHVÈ GZLHIXQNFMH 3LHUZV]DWRtipUsername()Z\ZRï\ZDQDJG\ SROHWHNVWRZHVWDMHVLÚDNW\ZQH=PLDQLHXOHJD DWU\EXWclassHOHPHQWX]DZLHUDMÈFHJRNRPXQLNDW LXDNWXDOQLDQDMHVW]DZDUWRĂÊHOHPHQWX c06/js/focus-blur.js JAVASCRIPT function checkUsername() { var username = el.value; // Deklaracja funkcji. 1D]ZDXĝ\WNRZQLNDMHVW // przechowywana w zmiennej. if (username.length < 5) { -HĝHOLQD]ZDXĝ\WNRZQLNDPD PQLHMQLĝ]QDNöZ elMsg.className = ’warning’; =PLDQDDWU\EXWXFODVV // w elemencie komunikatu. HO0VJWH[W&RQWHQW ĳ1D]ZDQDGDO]E\WNUöWNDĳ// Uaktualnienie komunikatu. } else { // W przeciwnym razie. elMsg.textContent = ’’; 8VXQLÚFLHNRPXQLNDWX } } function tipUsername() { // Deklaracja funkcji. elMsg.className = ’tip’; =PLDQDDWU\EXWXFODVV // w elemencie komunikatu. HO0VJLQQHU+70/ ĳ1D]ZDXĝ\WNRZQLNDPXVLPLHÊSU]\QDMPQLHM]QDNöZĳ // Dodanie komunikatu. } var el = document.getElementById(’username’); var elMsg = document.getElementById(’feedback’); 'DQHZHMĂFLRZHZSROXXVHUQDPH (OHPHQWZ\ĂZLHWODMÈF\NRPXQLNDW .LHG\SROHWHNVWRZHVWDMHVLÚDNW\ZQHOXEQLHDNW\ZQH QDOHĝ\Z\ZRïDÊRGSRZLHGQLÈIXQNFMÚ el.addEventListener(’focus’, tipUsername, false); $NW\ZQHWLS8VHUQDPH el.addEventListener(’blur’, checkUsername, false); // 1LHDNW\ZQHFKHFN8VHUQDPH WYNIK 'UXJDWRcheckUsername()Z\ZRï\ZDQDJG\ SROHWHNVWRZHVWDMHVLÚQLHDNW\ZQH7DIXQNFMD GRGDMHNRPXQLNDWL]PLHQLDDWU\EXWclassMHĂOL QD]ZDXĝ\WNRZQLNDPDPQLHMQLĝSLÚÊ]QDNöZ :SU]HFLZQ\PUD]LHQDVWÚSXMHXVXQLÚFLHNRPXQLNDWX ZDARZENIA 281 ZDARZENIA MYSZY =GDU]HQLDP\V]\VÈZ\ZRï\ZDQHSRGF]DV SRUXV]DQLDP\V]ÈRUD]NOLNDQLDMHMSU]\FLVNDPL :V]\VWNLHHOHPHQW\]QDMGXMÈFHVLÚQDVWURQLH REVïXJXMÈ]GDU]HQLDP\V]\DSRQDGWRZV]\VWNLH SURSDJXMÈWH]GDU]HQLD=ZUöÊXZDJÚQDIDNWĝH DNFMHVÈ]XSHïQLHLQQHZXU]ÈG]HQLDFKZ\SRVDĝRQ\FKZHNUDQGRW\NRZ\ 8QLHPRĝOLZLHQLH]DFKRZDQLDGRP\ĂOQHJRPRĝH VSRZRGRZDÊQLHRF]HNLZDQHZ\QLNLĽQDSU]\NïDG ]GDU]HQLHclickMHVWZ\ZRï\ZDQHMHG\QLHSRGF]DV MHGQRF]HVQHJRZ\VWÈSLHQLD]GDU]Hñmousedown i mouseup ZDARZENIE :<:2<:$1( (.5$1'27<.2:< click :\ZRï\ZDQHJG\Xĝ\WNRZQLNNOLNQLHSRGVWDZRZ\P SU]\FLVNLHPP\V]\ QDMF]ÚĂFLHMMHVWWROHZ\SU]\FLVN ZP\V]DFKZ\SRVDĝRQ\FKZFRQDMPQLHMGZDSU]\FLVNL =GDU]HQLHclickEÚG]LHZ\ZRï\ZDQHGODHOHPHQWXQDG NWöU\PDNWXDOQLH]QDMGXMHVLÚNXUVRUP\V]\=RVWDQLH Z\ZRïDQHWDNĝHZWHG\JG\Xĝ\WNRZQLNQDFLĂQLHNODZLV]Esc QDNODZLDWXU]HNLHG\HOHPHQWMHVWDNW\ZQ\ 1DFLĂQLÚFLHHNUDQXGRW\NRZHJR MHVWWUDNWRZDQHMDNMHGQRNURWQH NOLNQLÚFLHOHZ\PSU]\FLVNLHP P\V]\ dblclick :\ZRï\ZDQHJG\ZNUöWNLPRGVWÚSLHF]DVXXĝ\WNRZQLN GZXNURWQLHNOLNQLHSRGVWDZRZ\PSU]\FLVNLHPP\V]\ 'ZXNURWQHQDFLĂQLÚFLHHNUDQX GRW\NRZHJRMHVWWUDNWRZDQH MDNGZXNURWQHNOLNQLÚFLHOHZ\P SU]\FLVNLHPP\V]\ mousedown :\ZRï\ZDQHJG\Xĝ\WNRZQLNZFLĂQLHGRZROQ\SU]\FLVN P\V]\ QLHPRĝHE\ÊZ\ZRïDQHSU]H]QDFLĂQLÚFLHNODZLV]D QDNODZLDWXU]H 0RĝQDXĝ\Ê]GDU]HQLD touchstart mouseup :\ZRï\ZDQHJG\Xĝ\WNRZQLN]ZROQLSU]\FLVNP\V]\ QLHPRĝHE\ÊZ\ZRïDQHSU]H]QDFLĂQLÚFLHNODZLV]DQD NODZLDWXU]H 0RĝQDXĝ\Ê]GDU]HQLDtouchend mouseover :\ZRï\ZDQHJG\NXUVRU]QDMGRZDïVLÚQD]HZQÈWU] HOHPHQWXL]RVWDïXPLHV]F]RQ\QDGHOHPHQWHP QLHPRĝH E\ÊZ\ZRïDQHSU]H]QDFLĂQLÚFLHNODZLV]DQDNODZLDWXU]H :\ZRï\ZDQHJG\NXUVRU]RVWDQLHSU]HVXQLÚW\QDGHOHPHQW mouseout :\ZRï\ZDQHJG\NXUVRUMHVWQDGHOHPHQWHPDQDVWÚSQLH ]RVWDMHSU]HQLHVLRQ\QDGLQQ\ĽQD]HZQÈWU]HOHPHQWX ELHĝÈFHJROXEMHJRHOHPHQWöZSRWRPQ\FK QLHPRĝHE\Ê Z\ZRïDQHSU]H]QDFLĂQLÚFLHNODZLV]DQDNODZLDWXU]H :\ZRï\ZDQHJG\NXUVRU ]RVWDQLHSU]HQLHVLRQ\]QDG HOHPHQWX mousemove :\ZRï\ZDQHSRGF]DVSRUXV]DQLDNXUVRUHPQDGHOHPHQWHP :\ZRï\ZDQHSRGF]DVSRUXV]D7R]GDU]HQLHMHVWZ\ZRï\ZDQHQLHXVWDQQLH QLHPRĝHE\Ê QLDNXUVRUHP Z\ZRïDQHSU]H]QDFLĂQLÚFLHNODZLV]DQDNODZLDWXU]H KIEDY UŻYWAĆ STYLÓW CSS? =GDU]HQLDmouseover i mouseoutVÈEDUG]RF]ÚVWR Xĝ\ZDQHGR]PLDQ\Z\JOÈGXHOHPHQWöZOXE ]PLDQ\REUD]öZSRXPLHV]F]HQLXNXUVRUDP\V]\ QDGREUD]HP$E\]PLHQLÊZ\JOÈGHOHPHQWX SUHIHURZDQÈWHFKQLNÈMHVWXĝ\FLHSVHXGRNODV\&66 RQD]ZLH:hover 282 ZDARZENIA DLACZEGO MAMY ODDZIELNE ZDARZENIA MOUSEDOWN I MOUSEUP? =GDU]HQLDmouseover i mouseoutVÈRGG]LHOQ\PL ]GDU]HQLDPLZ\ZRï\ZDQ\PLSRGF]DVRGSRZLHGQLRQDFLĂQLÚFLDL]ZROQLHQLDSU]\FLVNXP\V]\ 1DMF]ÚĂFLHMVÈZ\NRU]\VW\ZDQHZFHOXGRGDQLD IXQNFMLķSU]HFLÈJQLMLXSXĂÊĵOXEWHĝ]DSHZQLHQLD SHZQHMNRQWUROLZJUDFK ZDARZENIE CLICK &HOHPSRQLĝV]HJRSU]\NïDGX MHVWXĝ\FLH]GDU]HQLDclickGR XVXQLÚFLDGXĝHJRNRPXQLNDWX Z\ĂZLHWODQHJRQDĂURGNXVWURQ\ -HGQDNZSLHUZV]HMNROHMQRĂFL VNU\SWPXVLXWZRU]\ÊWHQ NRPXQLNDW 3RQLHZDĝNRPXQLNDW]QDMGXMH VLÚQDQDMZ\ĝV]HMZDUVWZLH VWURQ\SRZLQLHQE\ÊZ\ĂZLHWODQ\W\ONRZWHG\JG\REVïXJD -DYD6FULSWMHVWZïÈF]RQD ZSU]HFLZQ\PUD]LHXĝ\WNRZQLNQLHEÚG]LHPLDïPRĝOLZRĂFL MHJRXNU\FLD *G\Z\VWÈSL]GDU]HQLHclick QDïÈF]X]DP\NDMÈF\PNRPXQLNDWQDVWÈSLZ\ZRïDQLHIXQNFML dismissNote()=DGDQLHP Z\PLHQLRQHMIXQNFMLMHVW XVXQLÚFLHNRPXQLNDWXGRGDQHJR SU]H]WHQVDPVNU\SW c06/js/click.js JAVASCRIPT 3U]\JRWRZDQLHNRGX+70/GODNRPXQLNDWX var msg = ’<div class=\”header\”><a id=\”close\” href=”#”>zamknij X</a></div>’; PVJ ĳGLY!K!.RQVHUZDFMDV\VWHPXK!ĳ PVJ ĳ0LÚG]\JRG]LQDPLDQDV]HVHUZHU\EÚGÈNRQVHUZRZDQHĳ PVJ ĳ:W\PF]DVLHPRJÈZ\VWÈSLÊQLHZLHONLH]DNïöFHQLDZG]LDïDQLXXVïXJGLY!ĳ var elNote = document.createElement(’div’); elNote.setAttribute(’id’, ’note’); elNote.innerHTML = msg; document.body.appendChild(elNote); 8WZRU]HQLHQRZHJRHOHPHQWX 'RGDQLHDWU\EXWXLGRZDUWRĂFLQRWH // Dodanie komunikatu. 8PLHV]F]HQLHHOHPHQWXQDVWURQLH function dismissNote() { document.body.removeChild(elNote); } // Deklaracja funkcji. 8VXQLÚFLHHOHPHQWX var elClose = document.getElementById(’close’); 3REUDQLHSU]\FLVNX]DP\NDMÈFHJR elClose.addEventListener(’click’, dismissNote, false); .OLNQLÚFLHSU]\FLVNX]DP\NDMÈFHJR WYNIK DOSTĘPNOŚĆ =GDU]HQLHclickPRĝHE\Ê]DVWRVRZDQHZGRZROQ\PHOHPHQFLH-HGQDNQDMOHSLHMVWRVRZDÊ MHZHOHPHQWDFKQDMF]ÚĂFLHMNOLNDQ\FKLQLHGRVWÚSQ\FKGODRVöENWöUHGRQDZLJDFMLSRVWURQLH LQWHUQHWRZHMZ\NRU]\VWXMÈNODZLDWXUÚ %\ÊPRĝHEÚG]LHV]NXV]RQ\Xĝ\FLHP]GDU]HQLD clickZFHOXXUXFKRPLHQLDVNU\SWXJG\Xĝ\WNRZQLNNOLNQLHHOHPHQWIRUPXODU]DVLHFLRZHJR:W\P SU]\SDGNXOHSV]\PUR]ZLÈ]DQLHPMHVWXĝ\FLH ]GDU]HQLDfocusSRQLHZDĝMHVWRQRZ\ZRï\ZDQH JG\Xĝ\WNRZQLNX]\VNXMHGRVWÚSGRNRQWURONL ]DSRPRFÈNODZLV]DTab ZDARZENIA 283 GDZIE WYSTĘPUJĄ ZDARZENIA? 2ELHNWeventPRĝHGRVWDUF]\ÊLQIRUPDFMHRPLHMVFXSRïRĝHQLDNXUVRUD JG\Z\VWÈSLïR]GDU]HQLH X EKRAN STRONA KLIENT Y EKRAN STRONA KLIENT :ïDĂFLZRĂFLscreenX i screenY ZVND]XMÈSRïRĝHQLHNXUVRUDQD HNUDQLHPRQLWRUD3RPLDUMHVW GRNRQ\ZDQ\Z]JOÚGHPOHZHJR JöUQHJRURJXHNUDQX DQLHRNQD SU]HJOÈGDUNL :ïDĂFLZRĂFLpageX i pageY ZVND]XMÈSRïRĝHQLHNXUVRUD Z]JOÚGHPFDïHMVWURQ\ LQWHUQHWRZHM3RF]ÈWHNVWURQ\ PRĝH]QDMGRZDÊVLÚSR]D YLHZSRUWHP'ODWHJRWHĝQDZHW MHĂOLNXUVRU]QDMGXMHVLÚZW\P VDP\PSRïRĝHQLXZVSöïU]ÚGQH VWURQ\LNOLHQWDPRJÈE\ÊUöĝQH :ïDĂFLZRĂFLclientX i clientY ZVND]XMÈSRïRĝHQLHNXUVRUD ZYLHZSRUFLHSU]HJOÈGDUNL -HĝHOLXĝ\WNRZQLNSU]HZLQÈï VWURQÚLMHMSRF]ÈWHNSR]RVWDMH QLHZLGRF]Q\WRQLHPDWR ZSï\ZXQDZVSöïU]ÚGQHNOLHQWD 284 ZDARZENIA USTALENIE POŁOŻENIA :SRQLĝV]\PSU]\NïDG]LHJG\ NXUVRUP\V]\MHVWSU]HPLHV]F]DQ\QDHNUDQLHSRODWHNVWRZHQD SRF]ÈWNXVWURQ\EÚGÈZ\ĂZLHWODï\DNWXDOQHMHJRSRïRĝHQLH :WHQVSRVöEEÚGÈ]DGHPRQVWURZDQHWU]\UöĝQHSRïRĝHQLD MDNLHPRJÈZ\VWÚSRZDÊ SRGF]DVSRUXV]DQLDP\V]È OXEQDFLVNDQLDMHMGRZROQ\FK SU]\FLVNöZ JAVASCRIPT =ZUöÊXZDJÚQDWRMDNIXQNFMD showPosition()RWU]\PXMH SDUDPHWUeventRGZRïXMÈF\VLÚ GRRELHNWXevent3RïRĝHQLH NXUVRUDP\V]\MHVWRGF]\W\ZDQH ]ZïDĂFLZRĂFLZ\PLHQLRQHJR RELHNWXevent c06/js/position.js var sx = document.getElementById(’sx’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLVFUHHQ; var sy = document.getElementById(’sy’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLVFUHHQ< var px = document.getElementById(’px’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLSDJH; var py = document.getElementById(’py’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLSDJH< var cx = document.getElementById(’cx’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLFOLHQW; var cy = document.getElementById(’cy’); (OHPHQWSU]HFKRZXMÈF\ZDUWRĂÊZïDĂFLZRĂFLFOLHQW< function showPosition(event) { // Deklaracja funkcji. sx.value = event.screenX; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLVFUHHQ; sy.value = event.screenY; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLVFUHHQ< px.value = event.pageX; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLSDJH; py.value = event.pageY; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLSDJH< cx.value = event.clientX; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLFOLHQW; cy.value = event.clientY; 8DNWXDOQLHQLHHOHPHQWXZDUWRĂFLÈZïDĂFLZRĂFLFOLHQW< } var el = document.getElementById(’body’); // Pobranie elementu <body>. el.addEventListener(’mousemove’, showPosition, false); 5XFKSRZRGXMHXDNWXDOQLHQLHZDUWRĂFL WYNIK ZDARZENIA 285 ZDARZENIA KLAWIATURY =GDU]HQLDNODZLDWXU\VÈZ\ZRï\ZDQHJG\Xĝ\WNRZQLNNRU]\VWD]NODZLDWXU\ VÈZ\ZRï\ZDQHWDNĝHGODNDĝGHJRURG]DMXXU]ÈG]HQLDZ\SRVDĝRQHJR ZNODZLDWXUÚ ZDARZENIE :<:2<:$1( input :\ZRï\ZDQHSRGF]DV]PLDQ\ZDUWRĂFLHOHPHQWX<input>OXE<textarea>2EVïXJLZDQHSRUD] SLHUZV]\Z,( FKRÊQLHZ\ZRï\ZDQHSRGF]DVXVXZDQLDWHNVWXZ,( :SU]\SDGNXVWDUV]\FK SU]HJOÈGDUHNLQWHUQHWRZ\FKPRĝQDZ\NRU]\VWDÊUR]ZLÈ]DQLHDZDU\MQHRSDUWHQD]GDU]HQLX keydown keydown :\ZRï\ZDQHJG\Xĝ\WNRZQLNQDFLĂQLHGRZROQ\NODZLV]QDNODZLDWXU]H-HĝHOLNODZLV]EÚG]LH SU]\WU]\PDQ\]GDU]HQLHEÚG]LHZ\ZRï\ZDQHQLHXVWDQQLH7RMHVWEDUG]RZDĝQHSRQLHZDĝ GRNïDGQLHSRZLHOD]DFKRZDQLHZSROXWHNVWRZ\PNLHG\Xĝ\WNRZQLNSU]\WU]\PDQDFLĂQLÚW\NODZLV] WHQVDP]QDNEÚG]LHQLHXVWDQQLHZVWDZLDQ\ZSROXWHNVWRZ\P keypress :\ZRï\ZDQHJG\Xĝ\WNRZQLNQDFLĂQLHNODZLV]FRVSRZRGXMHZ\ĂZLHWOHQLHQDHNUDQLHRGSRZLHGQLHJR]QDNX=GDU]HQLHWRQLHEÚG]LHZ\ZRï\ZDQHQDSU]\NïDGSRQDFLĂQLÚFLXNODZLV]DNXUVRUD FKRÊZVSRPQLDQ\]QDNSRZRGXMHZ\ZRïDQLH]GDU]HQLDkeydown-HĝHOLXĝ\WNRZQLNSU]\WU]\PD QDFLĂQLÚW\NODZLV]]GDU]HQLHEÚG]LHZ\ZRï\ZDQHQLHXVWDQQLH keyup :\ZRï\ZDQHJG\Xĝ\WNRZQLN]ZDOQLDNODZLV]QDNODZLDWXU]H=GDU]HQLDkeydown i keypressVÈ Z\ZRï\ZDQHSU]HGZ\ĂZLHWOHQLHP]QDNXQDHNUDQLHSRGF]DVJG\keyupMXĝSRMHJRZ\ĂZLHWOHQLX 7U]\]GDU]HQLDNWöU\FKQD]Z\]DF]\QDMÈVLÚRG SU]HGURVWNDkeyVÈZ\ZRï\ZDQHZSRQLĝV]HM NROHMQRĂFL keydownĽXĝ\WNRZQLNQDFLVQÈïNODZLV] keypressĽXĝ\WNRZQLNQDFLVQÈïOXESU]\WU]\PXMHQDFLĂQLÚW\NODZLV]SRZRGXMÈF\Z\ĂZLHWOHQLH]QDNXQDVWURQLH keyupĽXĝ\WNRZQLN]ZROQLïNODZLV] KTÓRY KLAWISZ ZOSTAŁ NACIŚNIĘTY? .LHG\Xĝ\ZDV]]GDU]HñkeydownOXEkeypress RELHNWeventSRVLDGDZïDĂFLZRĂÊRQD]ZLH keyCode0RĝQDMÈZ\NRU]\VWDÊGRXVWDOHQLD NWöU\NODZLV]]RVWDïQDFLĂQLÚW\-HGQDNZDUWRĂFLÈ ]ZURWQÈQLHEÚG]LHOLWHUDSU]\SRU]ÈGNRZDQDGDQHPXNODZLV]RZL MDNPRĝQDRF]HNLZDÊ DOHNRG $6&,,SU]HGVWDZLDMÈF\PDïÈOLWHUÚRGSRZLDGDMÈFÈ WHPXNODZLV]RZL7DEHOÚ]QDNöZLRGSRZLDGDMÈF\FKLPNRGöZ$6&,,]QDMG]LHV]ZLQWHUQHFLHQD VWURQLHSRĂZLÚFRQHMNVLÈĝFH -HĝHOLFKFHV]SREUDÊU]HF]\ZLVWÈOLWHUÚOXEF\IUÚ ]DPLDVWRGSRZLDGDMÈFHJRMHMNRGX$6&,, RELHNW String]DZLHUDZEXGRZDQÈPHWRGÚRQD]ZLH fromCharCode()NWöUDSU]HSURZDG]DRGSRZLHGQLÈNRQZHUVMÚ String.fromCharCode(event.keycode); 286 ZDARZENIA KTÓRY KLAWISZ ZOSTAŁ NACIŚNIĘTY? :RPDZLDQ\PSU]\NïDG]LH HOHPHQW<textarea>]DZLHUD W\ONR]QDNöZ.LHG\Xĝ\WNRZQLNZSURZDG]DWHNVWVNU\SW Z\ĂZLHWODOLF]EÚ]QDNöZMDNLH MHV]F]HSR]RVWDï\GRXĝ\FLD 2EVHUZDWRU]GDU]HñVSUDZG]D ]GDU]HQLDkeypressGODHOHPHQWX<textarea>=DNDĝG\P UD]HPJG\Z\VWÈSL]GDU]HQLH IXQNFMDcharCount()XDNWXDOQLD OLF]EÚ]QDNöZLSRND]XMH RVWDWQLRXĝ\W\ JAVASCRIPT var el; =GDU]HQLHinputEÚG]LHVSUDZG]DïRVLÚGRVNRQDOHSRGF]DV XDNWXDOQLDQLDOLF]E\SR]RVWDï\FK ]QDNöZJG\Xĝ\WNRZQLN ZNOHMDWHNVWOXEXĝ\ZDNODZLV]D BackspaceFKRÊQLHGRVWDUF]\ ZöZF]DVLQIRUPDFMLRRVWDWQLP QDFLĂQLÚW\PNODZLV]X c06/js/keypress.js // Deklaracja zmiennych. function charCount(e) { // Deklaracja funkcji. YDUWH[W(QWHUHGFKDU'LVSOD\FRXQWHUODVW.H\// Deklaracja zmiennych. textEntered = document.getElementById(’message’).value; 7HNVWSRGDQ\SU]H]Xĝ\WNRZQLND charDisplay = document.getElementById(’charactersLeft’); (OHPHQWOLF]QLND counter = (180 - (textEntered.length)); /LF]EDSR]RVWDï\FK]QDNöZ charDisplay.textContent = counter; :\ĂZLHWOHQLHOLF]E\SR]RVWDï\FK ]QDNöZ lastkey = document.getElementById(’lastkey’); 6SUDZG]HQLHRVWDWQLHJR QDFLĂQLÚWHJRNODZLV]D ODVWNH\WH[W&RQWHQW ĳ2VWDWQLNODZLV]PDNRG$6&,,ĳHNH\&RGH // Utworzenie komunikatu. } el = document.getElementById(’message’); // Pobranie elementu komunikatu. el.addEventListener(’keypress’, charCount, false); =GDU]HQLHNH\SUHVV WYNIK ZDARZENIA 287 ZDARZENIA FORMULARZA SIECIOWEGO ,VWQLHMÈGZD]GDU]HQLDQDMF]ÚĂFLHMXĝ\ZDQHZIRUPXODU]DFKVLHFLRZ\FK 1DMF]ÚĂFLHMEÚG]LHV]VLÚVSRW\NDï]H]GDU]HQLHPsubmitVWRVRZDQ\PSRGF]DV ZHU\ğNDFMLIRUPXODU]DVLHFLRZHJR ZDARZENIE :<:2<:$1( submit .LHG\IRUPXODU]VLHFLRZ\]RVWDMH Z\VïDQ\]GDU]HQLHsubmitMHVW Z\ZRï\ZDQHZZÚěOHSU]HGVWDZLDMÈF\PHOHPHQW<form>1DMF]ÚĂFLHM MHVWXĝ\ZDQHZWUDNFLHVSUDZG]DQLD ZDUWRĂFLZSURZDG]RQ\FKSU]H] Xĝ\WNRZQLNDSU]HGLFKZ\VïDQLHPGR VHUZHUD change :\ZRï\ZDQHSRGF]DV]PLDQ\ VWDQXZLHOXHOHPHQWöZIRUPXODU]D VLHFLRZHJRQDSU]\NïDG GRNRQDQRZ\ERUX]UR]ZLMDQHM OLVW\ Z\EUDQRSU]\FLVNRSFML ]D]QDF]RQROXEXVXQLÚWR ]D]QDF]HQLHSRODZ\ERUX &]ÚVWROHSV]\PUR]ZLÈ]DQLHP MHVWXĝ\FLH]GDU]HQLDchange ]DPLDVWclickSRQLHZDĝNOLNQLÚFLH P\V]ÈQLHMHVWMHG\Q\PVSRVREHP ZMDNLXĝ\WNRZQLNPRĝHSUDFRZDÊ ]HOHPHQWDPLIRUPXODU]\VLHFLRZ\FK 8ĝ\WNRZQLNPRĝHQDSU]\NïDG NRU]\VWDÊ]NODZLV]\NXUVRUDTab EnterLWG ľ ľ ľ input 288 ZDARZENIA =GDU]HQLHinputNWöUHZ\NRU]\VWDOLĂP\QDSRSU]HGQLHMVWURQLHMHVW QDMF]ÚĂFLHMXĝ\ZDQH]HOHPHQWDPL <input> i <textarea> ZDARZENIA FOCUS I BLUR =GDU]HQLDfocus i blur SR]QDïHĂMHZSRGUR]G]LDOHķ=GDU]HQLDIRFXVLEOXUĵ VÈF]ÚVWRXĝ\ZDQH ZIRUPXODU]DFKVLHFLRZ\FKFKRÊPRJÈE\Ê VWRVRZDQHWDNĝHZSRïÈF]HQLX]LQQ\PLHOHPHQWDPLWDNLPLMDNïÈF]D QLHVÈZLÚFSRZLÈ]DQH Z\ïÈF]QLH]IRUPXODU]DPLVLHFLRZ\PL WERYFIKACJA 6SUDZG]DQLHZDUWRĂFLQRVLQD]ZÚZHU\ğNDFML -HĝHOLXĝ\WNRZQLNSRPLQLHZ\PDJDQHLQIRUPDFMH OXEZSURZDG]LQLHSRSUDZQHGDQHWRVSUDZG]HQLH IRUPXODU]DVLHFLRZHJRSRGW\PNÈWHP]DSRPRFÈ -DYD6FULSWMHVWV]\EV]HQLĝZ\VïDQLHGDQ\FKGR VHUZHUDZFHOXLFKZHU\ğNDFML7HPDWZHU\ğNDFML SRUXV]RQRZUR]G]LDOH UŻYCIE ZDARZEŃ FORMULARZA SIECIOWEGO .LHG\Xĝ\WNRZQLNNRU]\VWD]OLVW\UR]ZLMDQHM]GDU]HQLHchange VSRZRGXMHZ\ZRïDQLHIXQNFML packageHint()=DGDQLHP WHMIXQNFMLMHVWZ\ĂZLHWOHQLH NRPXQLNDWXSRGUR]ZLMDQÈOLVWÈ LQIRUPXMÈFHJRRGRNRQDQ\P Z\ERU]H *G\Xĝ\WNRZQLNZ\ĂOHIRUPXODU] VLHFLRZ\QDVWÈSLZ\ZRïDQLH IXQNFMLcheckTerms()=DGDQLHPIXQNFMLMHVWVSUDZG]HQLH F]\Xĝ\WNRZQLN]D]QDF]\ïSROH Z\ERUXZVND]XMÈFHQDMHJR ]JRGÚQDZDUXQNXNRU]\VWDQLD ]ZLWU\Q\LQWHUQHWRZHM :SU]\SDGNXEUDNX]JRG\ IXQNFMDXQLHPRĝOLZLGRP\ĂOQH ]DFKRZDQLHHOHPHQWXIRUPXODU]DVLHFLRZHJR LZVWU]\PD SU]HND]DQLHGDQ\FKIRUPXODU]D GRVHUZHUD RUD]Z\ĂZLHWOL Xĝ\WNRZQLNRZLNRPXQLNDW REïÚG]LH JAVASCRIPT c06/js/form.js var elForm, elSelectPackage, elPackageHint, elTerms, elTermsHint; // Deklaracja zmiennych. elForm = document.getElementById(’formSignup’); 3U]HFKRZ\ZDQLHHOHPHQWöZ elSelectPackage = document.getElementById(’package’); elPackageHint = document.getElementById(’packageHint’); elTerms = document.getElementById(’terms’); elTermsHint = document.getElementById(’termsHint’); function packageHint() { // Deklaracja funkcji. var pack = this.options[this.selectedIndex].value; // Pobranie wybranej opcji. if (pack == ’monthly’) { -HĝHOLZDUWRĂFLÈMHVWPRQWKO\ HO3DFNDJH+LQWLQQHU+70/ ĳ3ïDFÈF]DURNRV]F]ÚG]DV]]ïĳ :\ĂZLHWOHQLHWHJRNRPXQLNDWX } else { // W przeciwnym razie. HO3DFNDJH+LQWLQQHU+70/ ĳ'REU\Z\EöUĳ:\ĂZLHWOHQLHWHJRNRPXQLNDWX } } function checkTerms(event) { // Deklaracja funkcji. if (!elTerms.checked) { -HĝHOL]D]QDF]RQRSROHZ\ERUX HO7HUPV+LQWLQQHU+70/ ĳ0XVLV]VLÚ]JRG]LÊ]ZDUXQNDPLĳ :\ĂZLHWOHQLHNRPXQLNDWX event.preventDefault(); 1LHZ\V\ïDMIRUPXODU]DVLHFLRZHJR } } 8WZRU]HQLHREVHUZDWRUöZ]GDU]HñVXEPLWZ\ZRïXMHFKHFN7HUPV QDWRPLDVWFKDQJHZ\ZRïXMHSDFNDJH+LQW elForm.addEventListener(’submit’, checkTerms, false); elSelectPackage.addEventListener(’change’, packageHint, false); ZDARZENIA ZDARZENIA DOTYCZĄCE ZMIAN I OBSERWATORY 'RGDQLHOXEXVXQLÚFLHHOHPHQWX]PRGHOX'20SRZRGXMH]PLDQÚMHJR VWUXNWXU\=PLDQDWDZ\ZRïXMH]GDU]HQLHGRW\F]ÈFH]PLDQ .LHG\VNU\SWGRGDMHOXEXVXZD]DZDUWRĂÊQD VWURQLHQDVWÚSXMHXDNWXDOQLHQLHMHMGU]HZD PRGHOX'20,VWQLHMHZLHOHSRZRGöZGODNWöU\FK PRĝQDUHDJRZDÊQDWRXDNWXDOQLHQLHQDSU]\NïDG SRLQIRUPRZDQLHXĝ\WNRZQLNDR]PLDQLHZSURZDG]RQHMQDVWURQLH 3RQLĝHMZ\PLHQLRQRSHZQH]GDU]HQLDZ\ZRï\ZDQH SR]PLDQLHPRGHOX'207H]GDU]HQLDGRW\F]ÈFH ]PLDQ]RVWDï\ZSURZDG]RQHZSU]HJOÈGDUNDFK )LUHIR[,(6DIDULLZV]\VWNLFKZHUVMDFK &KURPHĳD:DUWRZW\PPLHMVFXGRGDÊĝH ]GDU]HQLDWHPDMÈE\Ê]DVWÈSLRQHSU]H]]GDU]HQLD DOWHUQDW\ZQHQD]\ZDQHREVHUZDWRUDPL]PLDQ ZDARZENIE :<:2<:$1( DOMNodeInserted :\ZRï\ZDQHSRZVWDZLHQLXZÚ]ïDZGU]HZLHPRGHOX'20QDSU]\NïDG ]DSRPRFÈappendChild()replaceChild() i insertBefore() DOMNodeRemoved :\ZRï\ZDQHSRXVXQLÚFLXZÚ]ïD]GU]HZDPRGHOX'20QDSU]\NïDG ]DSRPRFÈremoveChild()OXEreplaceChild() '206XEWUHH0RGLğHG :\ZRï\ZDQHSR]PLDQLHVWUXNWXU\PRGHOX'20ĽSRGZöFK Z\PLHQLRQ\FKSRZ\ĝHM]GDU]HQLDFK DOMNodeInsertedIntoDocument :\ZRï\ZDQHSRZVWDZLHQLXZÚ]ïDZGU]HZLHPRGHOX'20MDNRZÚ]ïD SRWRPQHJRLQQHJRZÚ]ïD]QDMGXMÈFHJRVLÚMXĝZGRNXPHQFLH DOMNodeRemovedFromDocument :\ZRï\ZDQHSRXVXQLÚFLXZÚ]ïDZGU]HZLHPRGHOX'20MDNRZÚ]ïD SRWRPQHJRLQQHJRZÚ]ïD]QDMGXMÈFHJRVLÚMXĝZGRNXPHQFLH PROBLEM ZE ZDARZENIAMI DOTYCZĄCYMI ZMIAN -HĝHOLVNU\SWZSURZDG]DZLHOH]PLDQQDVWURQLH VNXWNLHPPRĝHE\ÊZ\ZRï\ZDQLHEDUG]RGXĝHM OLF]E\]GDU]HñGRW\F]ÈF\FK]PLDQ3RZVWDMHZUDĝHQLHĝHVWURQDVLÚZF]\WXMHLUHDJXMHQDG]LDïDQLD Xĝ\WNRZQLND3U]H]]GDU]HQLDWHPRJÈE\ÊUöZQLHĝ Z\ZRïDQHLQQHREVHUZDWRU\]GDU]HñSRGF]DVJG\ SURSDJXMÈ]GDU]HQLDZPRGHOX'20PRG\ğNXMÈFH LQQHMHJRF]ÚĂFLLZ\ZRïXMÈFHNROHMQH]GDU]HQLD GRW\F]ÈFH]PLDQ'ODWHJRWHĝVÈ]DVWÚSRZDQH SU]H]REVHUZDWRU\]PLDQ 2EVïXJDZSU]HJOÈGDUNDFK&KURPH)LUHIR[ ,(2SHUD6DIDUL ZDARZENIA NOWE OBSERWATORY ZMIAN 2EVHUZDWRU\]PLDQRSUDFRZDQRZWDNLVSRVöE DE\PRJï\ZVWU]\PDÊVLÚ]G]LDïDQLHPDĝGR ]DNRñF]HQLDZ\NRQ\ZDQLD]DGDQLDSU]H]VNU\SW 1DVWÚSQLH]PLDQ\VÈ]JïDV]DQHJUXSRZR DQLH SRMHG\QF]R :VND]XMHV]URG]DM]PLDQZPRGHOX '20QDNWöUHPDMÈ]DUHDJRZDÊREVHUZDWRU\ -HGQDNJG\SRZVWDZDïDWDNVLÈĝNDREVïXJDREVHUZDWRUöZSU]H]SU]HJOÈGDUNLLQWHUQHWRZHQLHE\ïD MHV]F]HQDW\OHUR]SRZV]HFKQLRQDDE\Xĝ\ZDÊLFK ZSXEOLF]QLHRIHURZDQ\FKZLWU\QDFK 2EVïXJDZSU]HJOÈGDUNDFK,()LUHIR[ &KURPH OXE]SUHğNVHPwebkit 6DIDUL 2SHUD:XU]ÈG]HQLDFKPRELOQ\FK $QGURLG6DIDULZL26 UŻYCIE ZDARZEŃ DOTYCZĄCYCH ZMIAN :SRQLĝV]\PSU]\NïDG]LHGZDREVHUZDWRU\]GDU]HñZ\ZRïXMÈZïDVQHIXQNFMH3LHUZV]\]QDMGXMH VLÚZSU]HGRVWDWQLPZLHUV]XNRGXRF]HNXMHQD NOLNQLÚFLHïÈF]DSURZDG]ÈFHJRGRGRGDQLDQRZHJR HOHPHQWXOLVW\1DVWÚSQLHZ\NRU]\VWXMH]GDU]HQLD RSHUDFMLQDPRGHOX'20ZFHOXGRGDQLDQRZHJRHOHPHQWX ]PLDQDVWUXNWXU\PRGHOX'20 LZ\ZRïDQLH]GDU]HñGRW\F]ÈF\FK]PLDQ c06/js/mutation.js JAVASCRIPT var elList, addLink, newEl, newText, counter, listItems; // Deklaracja zmiennych. elList = document.getElementById(’list’); 3REUDQLHOLVW\ addLink = document.querySelector(’a’); 3REUDQLHSU]\FLVNXGRGDZDQLDHOHPHQWX counter = document.getElementById(’counter’); // Pobranie elementu licznika. function addItem(e) { // Deklaracja funkcji. e.preventDefault(); 8QLHPRĝOLZLHQLHDNFMLïÈF]D newEl = document.createElement(’li’); // Nowy element <li>. newText = document.createTextNode(’New list item’); 1RZ\ZÚ]HïWHNVWRZ\ newEl.appendChild(newText); 'RGDQLHWHNVWXGRHOHPHQWXOL! elList.appendChild(newEl); 'RGDQLHHOHPHQWXOL!GROLVW\ } function updateCount() { // Deklaracja funkcji. listitems = list.getElementsByTagName(’li’).length; 8VWDOHQLHFDïNRZLWHMOLF]E\HOHPHQWöZOL! counter.innerHTML = listitems; // Uaktualnienie licznika. } addLink.addEventListener(’click’, addItem, false); .OLNQLÚFLHSU]\FLVNX elList.addEventListener(’DOMNodeInserted’, updateCount, false); 0RGHO'20XDNWXDOQLRQ\ WYNIK 'UXJLREVHUZDWRU]GDU]HñRF]HNXMHQD]PLDQÚ GU]HZDPRGHOX'20GODHOHPHQWX<ul> 3RZ\ZRïDQLX]GDU]HQLDDOMNodeInserted QDVWÚSXMHZ\ZRïDQLHIXQNFMLRQD]ZLH updateCount()=DGDQLHPIXQNFMLMHVWZ\ĂZLHWODQLHOLF]E\ZVND]XMÈFHMQDZLHONRĂÊOLVW\ RUD]XDNWXDOQLHQLHWHMZDUWRĂFLZ\ĂZLHWODQHM QDSRF]ÈWNXVWURQ\ ZDARZENIA ZDARZENIA HTML5 7XWDMSU]HGVWDZLRQRWU]\G]LDïDMÈFHQDSR]LRPLHVWURQ\]GDU]HQLDGRïÈF]RQH ZZHUVMLVSHF\ğNDFML+70/NWöUDEDUG]RV]\ENRVWDïDVLÚSRSXODUQD 2%68*$ :35=(*/k'$5.$&+ ,17(51(72:<&+ ZDARZENIE :<:2<:$1( DOMContentLoaded =GDU]HQLHZ\ZRï\ZDQHSRGF]DVWZRU]HQLDGU]HZDPRGHOX '20 REUD]\VW\OH&66LVNU\SW\-DYD6FULSWZFLÈĝPRJÈ E\ÊZF]\W\ZDQH 6NU\SW\VÈXUXFKDPLDQHZF]HĂQLHMQLĝ]D SRPRFÈ]GDU]HQLDloadZNWöU\PQDVWÚSXMHRF]HNLZDQLH QDZF]\WDQLHSR]RVWDï\FK]DVREöZQDSU]\NïDGREUD]öZ LUHNODP3RZVWDMHZLÚFZUDĝHQLHĝHVWURQDMHVWZF]\W\ZDQDV]\EFLHM-HGQDN]SRZRGXZ\HOLPLQRZDQLDRF]HNLZDQLD QDZF]\WDQLHVNU\SWXGU]HZRPRGHOX'20PRĝHQLH ]DZLHUDÊNRGX+70/JHQHURZDQHJRSU]H]ZVSRPQLDQH VNU\SW\=GDU]HQLHPRĝHE\ÊGRïÈF]RQHGRRELHNWöZwindow OXEdocument hashchange =GDU]HQLHZ\ZRï\ZDQHJG\]PLHQLVLÚZDUWRĂÊKDVKDGUHVX ,()LUHIR[6DIDUL 85/ F]\OLEH]RGĂZLHĝHQLDFDïHJRRNQD :DUWRĂÊKDVK &KURPH2SHUD MHVWXĝ\ZDQDZFHOXZVND]DQLDRNUHĂORQ\FKIUDJPHQWöZ F]DVDPLQD]\ZDQ\FKNRWZLFDPL QDVWURQLHDWDNĝHMHVW VWRVRZDQDQDVWURQDFKNRU]\VWDMÈF\FK]WHFKQRORJLL$MD[ GRZF]\W\ZDQLD]DZDUWRĂFL3URFHGXUDREVïXJLhashchange G]LDïDZRELHNFLHwindow3RZ\ZRïDQLX]GDU]HQLDRELHNW eventEÚG]LHSRVLDGDïZïDĂFLZRĂFLoldURL i newURL SU]HFKRZXMÈFHDGUHV\85/SU]HG]PLDQÈLSR]PLDQLH beforeunload =GDU]HQLHZ\ZRï\ZDQHZRELHNFLHwindowSU]HGXVXQLÚFLHP &KURPH)LUHIR[,( VWURQ\3RZLQQRE\ÊXĝ\ZDQHW\ONRSRWRDE\SRPöF 6DIDUL2SHUD Xĝ\WNRZQLNRZL DQLH]DFKÚFDÊJRGRSR]RVWDQLDQDVWURQLH MHĂOL]GHF\GRZDïVLÚMÈRSXĂFLÊ 1DSU]\NïDGSRPRFQHPRĝH E\ÊSRLQIRUPRZDQLHXĝ\WNRZQLNDĝH]PLDQ\ZSURZDG]RQH ZIRUPXODU]XVLHFLRZ\PQLH]RVWDï\]DSLVDQH0RĝQD GRGDÊNRPXQLNDWGRRNQDGLDORJRZHJRZ\ĂZLHWODQHJR SU]H]SU]HJOÈGDUNÚ1LHPDV]MHGQDNNRQWUROLQDGWHNVWHP Z\ĂZLHWODQ\PSU]HGNRPXQLNDWHPRUD]QDSU]\FLVNDFK NOLNDQ\FKSU]H]Xĝ\WNRZQLND PRJÈVLÚUöĝQLÊZ]DOHĝQRĂFL RGXĝ\ZDQHMSU]HJOÈGDUNLLV\VWHPXRSHUDF\MQHJR &KURPH)LUHIR[ ,(6DIDUL2SHUD ,VWQLHMHMHV]F]HZLHOHLQQ\FK]GDU]HñZSURZDG]RQ\FKGRREVïXJLQDMQRZV]\FKXU]ÈG]HñQDSU]\NïDG VPDUWIRQöZLWDEOHWöZ5HDJXMÈRQHQD]GDU]HQLDWDNLHMDNJHVW\LUXFKQDSRGVWDZLHZDUWRĂFL GRVWDUF]DQ\FKSU]H]SU]\VSLHV]HQLRPLHU] Z\NU\ZDNÈWSRGNWöU\PMHVWWU]\PDQHXU]ÈG]HQLH ZDARZENIA UŻYCIE ZDARZEŃ HTML5 :SRQLĝV]\PSU]\NïDG]LHWXĝ SRXWZRU]HQLXGU]HZDPRGHOX '20DNW\ZQHVWDQLHVLÚSROH WHNVWRZHRLGHQW\ğNDWRU]H username =GDU]HQLHDOMcontentLoaded MHVWZ\ZRï\ZDQHSU]HG]GDU]HQLHPload SRQLHZDĝGUXJLH ]Z\PLHQLRQ\FKRF]HNXMHQD ZF]\WDQLHZV]\VWNLFK]DVREöZ VWURQ\ JAVASCRIPT -HĝHOLXĝ\WNRZQLN]GHF\GXMHVLÚ QDRSXV]F]HQLHVWURQ\SU]HG NOLNQLÚFLHPSU]\FLVNXZ\V\ïDMÈFHJRIRUPXODU]VLHFLRZ\]GDU]HQLHbeforeunloadVSUDZG]L F]\Xĝ\WNRZQLNQDSHZQRFKFH RSXĂFLÊVWURQÚ 06/js/html5-events.js function setup() { var textInput; textInput = document.getElementById(’message’); textInput.focus(); } window.addEventListener(’DOMContentLoaded’, setup, false); window.addEventListener(’beforeunload’, function(event){ return ’Masz niezapisane zmiany...’; }, false); WYNIK 3ROHZHMVWURQLHPRĝHV] ]REDF]\ÊRNQRGLDORJRZHNWöUH MHVWZ\ĂZLHWODQHJG\QDVWÈSL SUöEDRSXV]F]HQLDVWURQ\ 7HNVWZ\ĂZLHWODQ\SU]HG NRPXQLNDWHPLSU]\FLVNL PRJÈE\ÊLQQHZ]DOHĝQRĂFL RGSU]HJOÈGDUNLLQWHUQHWRZHM QLHPDV]QDGW\PNRQWUROL ZDARZENIA ZDARZENIA PRZYKŁAD ZDARZENIA 7HQSU]\NïDGZ\ĂZLHWODXĝ\WNRZQLNRZLLQWHUIHMV SR]ZDODMÈF\QDUHMHVWUDFMÚQRWDWHNJïRVRZ\FK 8ĝ\WNRZQLNPRĝHSRGDÊQD]ZÚZ\ĂZLHWODQÈ ZQDJïöZNXDQDVWÚSQLHQDFLVQÈÊSU]\FLVNUR]SRF]\QDMÈF\QDJU\ZDQLH FRVSRZRGXMH]PLDQÚ Z\ĂZLHWODQHJRREUD]X .LHG\Xĝ\WNRZQLNUR]SRF]QLHZSURZDG]DQLHQD]Z\ZSROXWHNVWRZ\P]GDU]HQLHkeyupVSRZRGXMHZ\ZRïDQLHIXQNFMLwriteLabel() =DGDQLHWHMIXQNFMLSROHJDQDVNRSLRZDQLXWHNVWX]SRODIRUPXODU]D VLHFLRZHJRL]DSLVDQLXJRZJïöZQ\PQDJïöZNXSRGORJR:VSRPQLDQ\WHNVW]DVWÈSLZLÚFVïRZDAUDIO NOTE 3U]\FLVNķQDJUDMSDX]DĵMHVW]QDF]QLHEDUG]LHMLQWHUHVXMÈF\3RVLDGD RQDWU\EXWRQD]ZLHdata-state.LHG\VWURQDMHVWZF]\W\ZDQD ZDUWRĂFLÈDWU\EXWXEÚG]LHrecord*G\Xĝ\WNRZQLNNOLNQLHSU]\FLVN ZDUWRĂÊDWU\EXWXXOHJQLH]PLDQLHQDpause WRVSRZRGXMHZ\ZRïDQLH QRZHMUHJXï\&66ZVND]XMÈFHMQDQDJU\ZDQLH -HĝHOLQLHXĝ\ZDïHĂMHV]F]HDWU\EXWöZdata-Z+70/WRPXVLV] ZLHG]LHÊĝHSR]ZDODMÈRQHQDSU]HFKRZ\ZDQLHZïDVQ\FKGDQ\FK ZGRZROQ\PHOHPHQFLH+70/ 1D]ZDDWU\EXWXPRĝHE\ÊGRZROQD LUR]SRF]\QDÊVLÚRGdata-RLOHEÚG]LH]DSLVDQDPDï\PLOLWHUDPL :WHQVSRVöEGHPRQVWUXMHP\QRZÈWHFKQLNÚRSDUWÈQDGHOHJDFML ]GDU]Hñ2EVHUZDWRU]GDU]HñMHVWXPLHV]F]RQ\ZHOHPHQFLHQDGU]ÚGQ\PNWöUHJRZDUWRĂFLÈDWU\EXWXidMHVWbuttons2ELHNWevent MHVWZ\NRU]\VW\ZDQ\GRRNUHĂOHQLDZDUWRĂFLDWU\EXWXidXĝ\WHJR HOHPHQWX1DVWÚSQLHZDUWRĂÊDWU\EXWXidMHVWXĝ\ZDQDZNRQVWUXNFML switchGRZ\EUDQLDZ\ZRï\ZDQHMIXQNFML Z]DOHĝQRĂFLRGVWDQX ZNWöU\P]QDMGXMHVLÚSU]\FLVNĽrecordOXEpause 7RGREU\VSRVöEQDREVïXJÚZLHOXSU]\FLVNöZSRQLHZDĝ]PQLHMV]D OLF]EÚREVHUZDWRUöZ]GDU]HñZNRG]LH 2EVHUZDWRU\]GDU]Hñ]QDMGXMÈVLÚQDNRñFXVWURQ\=DSHZQLOLĂP\ WDNĝHUR]ZLÈ]DQLHDZDU\MQHGODXĝ\WNRZQLNöZSU]HJOÈGDUNLLQWHUQHWRZHM,(OXEVWDUV]HM Z\NRU]\VWXMÈRQHLQQ\PRGHO]GDU]Hñ ZDARZENIA PRZYKŁAD ZDARZENIA 1DSRF]ÈWNXVNU\SWXXPLHV]F]DP\GHğQLFMH]PLHQQ\FK Z\PDJDQ\FKGRG]LDïDQLDNRGX DQDVWÚSQLH]ELHUDP\SRWU]HEQH QDPZÚ]ï\HOHPHQWöZ )XQNFMHRGWZDU]DF]D SRND]DQH QDVWURQLHSRSUDZHM SRMDZLÈ VLÚGDOHMQDWRPLDVWQDGROH VWURQ\PDP\REVHUZDWRU\ ]GDU]Hñ 2EVHUZDWRU\]GDU]Hñ]QDMGXMÈ VLÚZNRQVWUXNFMLZDUXQNRZHM ZLÚFPHWRGDattachEvent() PRĝHE\ÊXĝ\WDZSU]\SDGNX JG\Xĝ\WNRZQLNNRU]\VWD ]SU]HJOÈGDUNLLQWHUQHWRZHM,( OXEVWDUV]HM c06/js/example.js JAVASCRIPT var noteInput, noteName, textEntered, target; // Deklaracja zmiennych. noteName = document.getElementById(’noteName’); (OHPHQW]DZLHUDMÈF\QRWDWNÚ noteInput = document.getElementById(’noteInput’); (OHPHQWSR]ZDODMÈF\QDGRGDQLHQRWDWNL function writeLabel(e) { if (!e) { e = window.event; } target = e.target || e.srcElement; textEntered = e.target.value; noteName.textContent = textEntered; } // Deklaracja funkcji. -HĝHOLRELHNW]GDU]HQLDQLHLVWQLHMH 8ĝ\FLHUR]ZLÈ]DQLDDZDU\MQHJRGOD,( 3REUDQLHHOHPHQWXGRFHORZHJRGOD]GDU]HQLD :DUWRĂÊWHJRHOHPHQWX 8DNWXDOQLHQLHWHNVWXQRWDWNL :W\PPLHMVFX]QDMGXMÈVLÚNRQWURONLQDJU\ZDQLDLSDX]\RUD]IXQNFMH .RG]QDMG]LHV]QDVWURQLHSRSUDZHM if (document.addEventListener) { -HĝHOLREVHUZDWRU]GDU]HñMHVWREVïXJLZDQ\ document.addEventListener(’click’, function(e){ // W przypadku zdarzenia click. recorderControls(e); :\ZRïDQLHIXQNFMLUHFRUGHU&RQWUROV }, false); 3U]HFKZ\FHQLHZID]LHSURSDJRZDQLD]GDU]Hñ -HĝHOL]GDU]HQLHLQSXW]RVWDQLHZ\ZRïDQHGODSRODWHNVWRZHJRQRWH,QSXW WRZ\ZRïDMIXQNFMÚZULWH/DEHO noteInput.addEventListener(’input’, writeLabel, false); } else { // W przeciwnym razie. document.attachEvent(’onclick’, function(e){ 5R]ZLÈ]DQLHDZDU\MQHGOD,(GRZROQH]GDU]HQLHFOLFN recorderControls(e); :\ZRïDQLHIXQNFMLUHFRUGHU&RQWUROV }); -HĝHOL]GDU]HQLHNH\XS]RVWDQLHZ\ZRïDQHGODSRODWHNVWRZHJRQRWH,QSXW WRZ\ZRïDMIXQNFMÚZULWH/DEHO noteInput.attachEvent(’onkeyup’, writeLabel, false); } ZDARZENIA PRZYKŁAD ZDARZENIA )XQNFMDrecorderControls()MHVWDXWRPDW\F]QLH SU]HND]\ZDQDRELHNWRZLevent1LHW\ONR]DSHZQLDWRREVïXJÚVWDUV]\FKZHUVMLSU]HJOÈGDUNL,( DOHUöZQLHĝXQLHPRĝOLZLDïÈF]XMHJR]DFKRZDQLH GRP\ĂOQH SU]HQLHVLHQLHXĝ\WNRZQLNDQDQRZÈ VWURQÚ JAVASCRIPT .RQVWUXNFMDswitch]RVWDïDXĝ\WDGRZVND]DQLD IXQNFMLZ\ZRï\ZDQHMZ]DOHĝQRĂFLRGWHJRFR SUöEXMH]URELÊXĝ\WNRZQLNĽUR]SRF]ÈÊOXE]DNRñF]\ÊQDJU\ZDQLHQRWDWNLJïRVRZHM7DNDWHFKQLND GHOHJDFMLWRGREU\VSRVöEREVïXJLZLHOXSU]\FLVNöZ ]QDMGXMÈF\FKVLÚZLQWHUIHMVLHXĝ\WNRZQLND c06/js/example.js function recorderControls(e) { 'HNODUDFMDIXQNFMLUHFRUGHU&RQWUROV if (!e) { -HĝHOLRELHNW]GDU]HQLDQLHLVWQLHMH e = window.event; 8ĝ\FLHUR]ZLÈ]DQLDDZDU\MQHJRGOD,( } target = e.target || e.srcElement; 3REUDQLHHOHPHQWXGRFHORZHJR if (event.preventDefault) { -HĝHOLPHWRGDSUHYHQW'HIDXOW MHVWREVïXJLZDQD e.preventDefault(); =DWU]\PDQLHDNFMLGRP\ĂOQHM } else { // W przeciwnym razie. event.returnValue = false; 5R]ZLÈ]DQLHDZDU\MQHGOD,(]DWU]\PDQLHDNFMLGRP\ĂOQHM } switch(target.getAttribute(’data-state’)) { 3REUDQLHDWU\EXWXGDWDVWDWH case ’record’: -HĝHOLZDUWRĂÊDWU\EXWXZ\QRVLUHFRUG record(target); :\ZRïDQLHIXQNFMLUHFRUG break; 2SXV]F]HQLHIXQNFML case ’stop’: -HĝHOLZDUWRĂÊDWU\EXWXZ\QRVLVWRS stop(target); :\ZRïDQLHIXQNFMLVWRS break; 2SXV]F]HQLHIXQNFML 7XWDMPRĝQDGRGDÊNROHMQHSU]\FLVNL } }; function record(target) { // Deklaracja funkcji. target.setAttribute(’data-state’, ’stop’); 3U]\SLVDQLHDWU\EXWRZLGDWDVWDWHZDUWRĂFLVWRS target.textContent = ’stop’; 8VWDZLHQLHWHNVWXĳVWRSĳ } function stop(target) { target.setAttribute(’data-state’, ’record’); 3U]\SLVDQLHDWU\EXWRZLGDWDVWDWHZDUWRĂFLUHFRUG target.textContent = ’record’; 8VWDZLHQLHWHNVWXĳUHFRUGĳ } ZDARZENIA PODSUMOWANIE ZDARZENIA f =GDU]HQLDWRRIHURZDQ\SU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈVSRVöE ZVND]DQLDĝHFRĂVLÚ]GDU]\ïR QDSU]\NïDG]DNRñF]\ïRVLÚ ZF]\W\ZDQLHVWURQ\OXE]RVWDïQDFLĂQLÚW\SU]\FLVN f 'RïÈF]DQLHWRSURFHVRNUHĂOHQLDNWöUH]GDU]HQLHPDZ\VWÈSLÊ LNWöU\HOHPHQWRF]HNXMHQDZ\VWÈSLHQLHGDQHJR]GDU]HQLD f .LHG\]GDU]HQLHZ\VWÈSLZHOHPHQFLHPRĝHZ\ZRïDÊIXQNFMÚ -DYD6FULSW.LHG\QDVWÚSQLHIXQNFMDZSHZLHQVSRVöE ]PRG\ğNXMHVWURQÚLQWHUQHWRZÈPRĝQDRGQLHĂÊZUDĝHQLHĝH MHVWZFLÈĝLQWHUDNW\ZQDĽUHDJXMHQDG]LDïDQLDXĝ\WNRZQLND f 'HOHJDFMÚ]GDU]HñPRĝQDZ\NRU]\VWDÊGRPRQLWRURZDQLD ]GDU]Hñ]DFKRG]ÈF\FKZHZV]\VWNLFKHOHPHQWDFKSRWRPQ\FK GDQHJRHOHPHQWX f 1DMF]ÚĂFLHMXĝ\ZDQHVÈ]GDU]HQLD]GHğQLRZDQHSU]H] NRQVRUFMXP:&ZVSHF\ğNDFMLPRGHOX'20,VWQLHMÈWDNĝH LQQH]GDU]HQLD]GHğQLRZDQHQDSU]\NïDGZVSHF\ğNDFML +70/LFKDUDNWHU\VW\F]QHGODGDQ\FKSU]HJOÈGDUHN LQWHUQHWRZ\FK ZDARZENIA 7 JQUERY Biblioteka jQuery oferuje prosty sposób na wykonywanie QDMF]ÚĂFLHMVSRW\NDQ\FK]DGDñ-DYD6FULSW2GE\ZD VLÚWRV]\ENRLVSöMQLHZHZV]\VWNLFKQDMZDĝQLHMV]\FK SU]HJOÈGDUNDFKLQWHUQHWRZ\FKEH]NRQLHF]QRĂFLVWRVRZDQLD MDNLFKNROZLHNUR]ZLÈ]DñDZDU\MQ\FKZNRG]LH WYBÓR ELEMENTÓW WYKONYWANIE ZADAŃ OBSŁUGA ZDARZEŃ 'RVWÚSGRHOHPHQWöZMHVW SURVWV]\]DSRPRFÈVHOHNWRUöZVW\OX&66RIHURZDQ\FK SU]H]M4XHU\QLĝSU]\Xĝ\FLX ]DS\WDñ'206HOHNWRU\ FKDUDNWHU\]XMÈVLÚZLÚNV]È HODVW\F]QRĂFLÈLZLÚNV]\PL PRĝOLZRĂFLDPL 0HWRG\M4XHU\SR]ZDODMÈQD XDNWXDOQLHQLHGU]HZDPRGHOX '20DQLPDFMÚHOHPHQWöZ SRMDZLDMÈF\FKVLÚZZLGRNX L]QLNDMÈF\FK]QLHJRDWDNĝH Z\NRQ\ZDQLHSÚWOLQD]ELRU]H HOHPHQWöZĽZV]\VWNRWR ZMHGQ\PZLHUV]XNRGX Biblioteka jQuery zawiera PHWRG\SR]ZDODMÈFHQD GRïÈF]DQLHREVHUZDWRUöZ ]GDU]HñGRZ\EUDQ\FK HOHPHQWöZEH]NRQLHF]QRĂFL tworzenia jakiegokolwiek UR]ZLÈ]DQLDDZDU\MQHJR ZNRG]LHGRREVïXJL VWDUV]\FKSU]HJOÈGDUHN LQWHUQHWRZ\FK :W\PUR]G]LDOHSU]\MÚWR]DïRĝHQLHĝHSU]HF]\WDïHĂZF]HĂQLHMV]HUR]G]LDï\NVLÈĝNLL]QDV] SRGVWDZ\MÚ]\ND-DYD6FULSW-DN]REDF]\V]ZSRïÈF]HQLX]WUDG\F\MQ\PLWHFKQLNDPL-DYD6FULSW ELEOLRWHNDM4XHU\RIHUXMHEDUG]RGXĝHPRĝOLZRĂFL.RQLHF]QHMHVWMHGQDN]UR]XPLHQLH-DYD6FULSW DE\PöFZSHïQLZ\NRU]\VWDÊM4XHU\ 300 JQUERY JQUERY 301 CO TO JEST JQUERY? M4XHU\WRSOLN-DYD6FULSWGRïÈF]DQ\QDVWURQDFKLQWHUQHWRZ\FK %LEOLRWHNDWDSR]ZDODQDZ\V]XNLZDQLHHOHPHQWöZ]DSRPRFÈ VHOHNWRUöZVW\OX&66DQDVWÚSQLHZ\NRQ\ZDQLHGRZROQ\FK]DGDñ QDW\FKHOHPHQWDFK]Z\NRU]\VWDQLHPPHWRGM4XHU\ 1. WYSZUKIWANIE ELEMENTÓW ZA POMOCĄ SELEKTORÓW STYLU CSS Funkcja o nazwie jQuery()SR]ZDODQDZ\V]XNDQLHFRQDMPQLHM MHGQHJRHOHPHQWXQDVWURQLH7ZRU]\RELHNWRQD]ZLHjQuery ]DZLHUDMÈF\RGQLHVLHQLDGRHOHPHQWöZ-DNSRND]DQRSRQLĝHM$() WRF]ÚVWRVWRVRZDQ\VNUöW]DPLDVWjQuery() FUNKCJA (TWORZY OBIEKT JQUERY) $(’li.hot’) SELEKTOR Funkcja jQuery()PDMHGHQSDUDPHWUselektorVW\OX&66 3U]HGVWDZLRQ\WXWDMVHOHNWRUZ\V]XNXMHZV]\VWNLHHOHPHQW\<li> NWöU\FKZDUWRĂFLÈDWU\EXWXclass jest hot PODOBIEŃSTWA DO MODELU DOM • 6HOHNWRU\M4XHU\Z\NRQXMÈ]DGDQLDSRGREQHGRWUDG\F\MQ\FK]DS\WDñ'20DOHLFKVNïDGQLDMHVW ]QDF]QLHSURVWV]D • 2ELHNWM4XHU\PRĝQDSU]HFKRZ\ZDÊZ]PLHQQHMSRGREQLHMDNZSU]\SDGNXZÚ]ïöZPRGHOX'20 • :ïDĂFLZRĂFLLPHWRG\M4XHU\ SRGREQLHMDNZïDĂFLZRĂFLLPHWRG\PRGHOX'20 PRĝQDZ\NRU]\VWDÊ GRSU]HSURZDG]DQLDRSHUDFMLQDZ\EUDQ\FKZÚ]ïDFKPRGHOX'20 302 JQUERY 2ELHNWjQueryPDZLHOHPHWRGNWöU\FKPRĝQDXĝ\ÊGRSUDF\]Z\EUDQ\PL HOHPHQWDPL0HWRG\WHSU]HGVWDZLDMÈ]DGDQLDNWöUHVÈQDMF]ÚĂFLHM Z\NRQ\ZDQHQDW\FKHOHPHQWDFK 2. WYKONANIE ZADAŃ NA ELEMENTACH ZA POMOCĄ METOD JQUERY 3RQLĝHMPDP\RELHNWjQuery utworzony przez IXQNFMÚjQuery()2ELHNWL]QDMGXMÈFHVLÚZQLP HOHPHQW\VÈRNUHĂODQHPLDQHPdopasowanego zbioru lub kolekcji elementów wybranych przez jQuery 0HWRG\RELHNWXjQueryPRĝQDZ\NRU]\VWDÊGR XDNWXDOQLHQLD]QDMGXMÈF\FKVLÚZQLPHOHPHQWöZ 3RQLĝV]DPHWRGDSRZRGXMHGRGDQLHQRZHM ZDUWRĂFLGODDWU\EXWXclass OBIEKT JQUERY METODA $(’li.hot’).addClass(’complete’); OPERATOR ELEMENTU SKŁADOWEGO 2SHUDWRUHOHPHQWXVNïDGRZHJRZVND]XMHĝH PHWRGDSRSUDZHMVWURQLHSRZLQQDE\ÊXĝ\WD GRXDNWXDOQLHQLDHOHPHQWöZZRELHNFLHjQuery Z\PLHQLRQ\PSROHZHMVWURQLH PARAMETR(Y) .DĝGDPHWRGDPDSDUDPHWU SDUDPHWU\ GRVWDUF]DMÈF\V]F]HJöïRZHLQIRUPDFMHRVSRVRELH XDNWXDOQLHQLDHOHPHQWöZ7XWDMSDUDPHWUZVND]XMH ZDUWRĂÊGRGDZDQÈGRDWU\EXWXclass KLUCZOWE RÓŻNICE W STOSUNKU DO MODELU DOM • %LEOLRWHNDG]LDïDVSöMQLHZZLHOXSU]HJOÈGDUNDFKLQWHUQHWRZ\FKQLHWU]HEDWZRU]\ÊUR]ZLÈ]Dñ DZDU\MQ\FKZNRG]LH • :\EöUHOHPHQWöZMHVWSURVWV]\ SRQLHZDĝRSLHUDVLÚQDVNïDGQLVW\OöZ&66 L]QDF]QLHGRNïDGQLHMV]\ • 2EVïXJD]GDU]HñMHVWSURVWV]DSRQLHZDĝRSLHUDVLÚQDMHGQHMPHWRG]LHG]LDïDMÈFHMZHZV]\VWNLFK • • • QDMZDĝQLHMV]\FKSU]HJOÈGDUNDFKLQWHUQHWRZ\FK 0HWRG\G]LDïDMÈQDZV]\VWNLFKZ\EUDQ\FKHOHPHQWDFKQLHPDNRQLHF]QRĂFLSU]HSURZDG]DQLDLWHUDFML SU]H]ZV]\VWNLH SDWU]SRGUR]G]LDïķ3ÚWOHĵ 'RVWDUF]RQHVÈPHWRG\GRGDWNRZHSU]H]QDF]RQHGRZ\NRQ\ZDQLDF]ÚVW\FK]DGDñQDSU]\NïDG DQLPDFML SDWU]SRGUR]G]LDïķ(IHNW\ĵ *G\]RVWDQLHGRNRQDQ\Z\EöUQDHOHPHQWDFKPRĝQDZ\ZRïDÊZLHOHPHWRG JQUERY 303 PROSTY PRZYKŁAD UŻYCIA JQUERY :SU]\NïDGDFKSU]HGVWDZLRQ\FK ZW\PUR]G]LDOHEÚG]LHP\ Xĝ\ZDÊDSOLNDFMLOLVW\U]HF]\ GRNXSLHQLDZ\NRU]\VW\ZDQHM ZGZöFKSRSU]HGQLFKUR]G]LDïDFK=DZDUWRĂÊQDVWURQLH EÚG]LHXDNWXDOQLDQD]DSRPRFÈ ELEOLRWHNLM4XHU\ 1. $E\]DVWRVRZDÊELEOLRWHNÚ M4XHU\QDMSLHUZQDOHĝ\ GRïÈF]\ÊVNU\SWM4XHU\QD VWURQLH-DNZLG]LV]]RVWDï GRïÈF]RQ\SU]HG]DP\NDMÈF\P ]QDF]QLNLHP</body> 2. 3RGRïÈF]HQLXM4XHU\ na stronie wczytywany jest GUXJLSOLN-DYD6FULSWXĝ\ZDMÈF\ PHWRGLVHOHNWRUöZM4XHU\GR XDNWXDOQLDQLD]DZDUWRĂFLQD VWURQLH+70/ c07/basic-example.html 1 2 SKĄD POBRAĆ JQUERY I W JAKIEJ WERSJI? :SRZ\ĝV]\PSU]\NïDG]LH ELEOLRWHNDM4XHU\]RVWDïD GRïÈF]RQDSU]HG]DP\NDMÈF\P ]QDF]QLNLHP</body>SRGREQLH MDNLQQHVNU\SW\ -HV]F]HLQQ\ VSRVöEGRïÈF]HQLDVNU\SWX SRND]DQRZSRGUR]G]LDOH ķ:F]\WDQLHM4XHU\]&'1ĵ .RSLDELEOLRWHNLM4XHU\]RVWDïD XPLHV]F]RQDZPDWHULDïDFK GRïÈF]RQ\FKGRNVLÈĝNL M4XHU\PRĝHV]UöZQLHĝ SREUDÊ]ZLWU\Q\https:// jquery.org/1XPHUZHUVML biblioteki jQuery powinien E\ÊSRGDQ\ZQD]ZLHSOLNX :RPDZLDQ\PSU]\NïDG]LHMHVW to plik jquery-1.11.0.jsFKRÊ ZFKZLOLJG\EÚG]LHV]F]\WDï WÚNVLÈĝNÚSUDZGRSRGREQLH EÚG]LHGRVWÚSQDMXĝQRZV]D HTML <body> <div id=”page” <h1 id=”header”>Lista</h1> <h2>$UW\NXï\VSRĝ\ZF]H</h2> <ul> <li id=”one” class=”hot”><em>ĂZLHĝH</em> ğJL</li> OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> <li id=”three” class=”hot”>miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> </ul> </div> <script src=”js/jquery-1.11.0.js”></script> <script src=”js/basic-example.js”></script> </body> 304 JQUERY ZHUVMDM4XHU\3U]HGVWDZLRQH WXWDMSU]\NïDG\EÚGÈG]LDïDï\ WDNĝHZQRZV]\FKZHUVMDFK ELEOLRWHNL %DUG]RF]ÚVWRPRĝQD]REDF]\Ê ĝHZLWU\Q\LQWHUQHWRZHXĝ\ZDMÈ pliku jQuery wraz z rozszeU]HQLHP.min.js2]QDF]D WRĝHQLHSRWU]HEQH]QDNL VSDFMLLQRZHJRZLHUV]D]RVWDï\ XVXQLÚWH]SOLNXQDSU]\NïDG jquery-1.11.0.js przybiera SRVWDÊjquery-1.11.0.min.js 8VXQLÚFLHQLHSRWU]HEQ\FK ]QDNöZMHVWZ\QLNLHPSURFHVX o nazwie minimalizacja VWÈGminZQD]ZLHSOLNX 2WU]\PXMHP\SOLNR]QDF]QLH PQLHMV]HMZLHONRĂFLNWöU\MHVW SRELHUDQ\SU]H]SU]HJOÈGDUNÚ ZGXĝRNUöWV]\PF]DVLH-HGQDN ]PLQLPDOL]RZDQ\SOLNMHVW WUXGQLHMV]\ZRGF]\FLH -HĝHOLFKFHV]VSRMU]HÊQD ]DZDUWRĂÊSOLNXM4XHU\PRĝHV] JRRWZRU]\ÊZGRZROQ\P HG\WRU]HWHNVWRZ\P-HVWWRSR SURVWXSOLNWHNVWRZ\]DZLHUDMÈF\ EDUG]RVNRPSOLNRZDQ\NRG -DYD6FULSW :LÚNV]RĂÊRVöEXĝ\ZDMÈF\FK biblioteki jQuery nie próbuje ]UR]XPLHÊZMDNLVSRVöENRG -DYD6FULSWZM4XHU\Z\NRQXMH ]DGDQLD-HĝHOLW\ONRZLHV] MDNZ\ELHUDÊHOHPHQW\RUD] VWRVRZDÊPHWRG\LZïDĂFLZRĂFL WRPRĝHV]Z\NRU]\VWDÊ]DOHW\ M4XHU\EH]NRQLHF]QRĂFL]DJOÈGDQLDGRZQÚWU]DELEOLRWHNL :SRQLĝV]\PSU]\NïDG]LHSOLN -DYD6FULSWXĝ\ZDVNUöWX$() GODIXQNFMLjQuery():\ELHUD HOHPHQW\LWZRU]\WU]\RELHNW\ M4XHU\SU]HFKRZXMÈFHRGQLHVLHQLDGRW\FKHOHPHQWöZ 0HWRG\RELHNWXjQuery pokazuMÈLXNU\ZDMÈHOHPHQW\OLVW\RUD] XVXZDMÈMHSRNOLNQLÚFLX1LH SU]HMPXMVLÚMHĂOLMHV]F]HQLH UR]XPLHV]NRGX c07/js/basic-example.js JAVASCRIPT 1 2 3 3U]HGHZV]\VWNLPGRZLHV] VLÚMDNZ\ELHUDÊHOHPHQW\ ]DSRPRFÈVHOHNWRUöZM4XHU\ DQDVWÚSQLHMDNXDNWXDOQLDÊ WHHOHPHQW\]DSRPRFÈPHWRG LZïDĂFLZRĂFLRELHNWXjQuery $(’:header’).addClass(’headline’); $(’li:lt(3)’).hide().fadeIn(1500); $(’li’).on(’click’, function() { $(this).remove(); }); 1. :ZLHUV]XSLHUZV]\P Z\ELHUDP\ZV]\VWNLHQDJïöZNL RG<h1>GR<h6> LGRGDMHP\ ZDUWRĂÊheadlineGRLFK atrybutu class 2. :ZLHUV]XGUXJLPZ\ELHUDP\WU]\SLHUZV]HHOHPHQW\ OLVW\LZ\NRQXMHP\QDQLFKGZD ]DGDQLD HOHPHQW\]RVWDMÈXNU\WH DE\ PRĝOLZHE\ïRZ\NRQDQLH NROHMQHJRNURNX HOHPHQW\]QLNDMÈZZLGRNX • • WYNIK 3. 2VWDWQLHWU]\ZLHUV]HVNU\SWX SRZRGXMÈXVWDZLHQLHREVHUZDWRUD]GDU]HñZSRV]F]HJöOQ\FK HOHPHQWDFK<li>.LHG\ Xĝ\WNRZQLNNOLNQLHHOHPHQW QDVWÈSLZ\ZRïDQLHIXQNFML DQRQLPRZHMXVXZDMÈFHMGDQ\ HOHPHQW]HVWURQ\ 3RQLĝHMSU]HGVWDZLRQRSU]\SRPQLHQLH]QDF]HQLDNRORUöZ Xĝ\ZDQ\FKGRZVND]DQLD priorytetu i stanu poszczególQ\FKHOHPHQWöZOLVW\ PILNE SPOKOJNIE NORMALNE ZAKOŃCZONE JQUERY 305 DLACZEGO UŻYWAĆ JQUERY? %LEOLRWHNDM4XHU\QLHRIHUXMHQLF]HJRF]HJRQLHPöJïE\ĂX]\VNDÊ]DSRPRFÈ NRGX-DYD6FULSW-HVWWRSOLN-DYD6FULSWDOHZ\NRU]\VW\ZDQ\PQLHMZLÚFHM ZMHGQHMF]ZDUWHMZLWU\QGRVWÚSQ\FKZLQWHUQHFLHSRQLHZDĝXïDWZLD WZRU]HQLHNRGX 1. PROSTE SELEKTORY -DN]REDF]\ïHĂZUR]G]LDOHZNWöU\PZSURZDG]RQRPRGHO'20Z\EöUĝÈGDQ\FKHOHPHQWöZ QLH]DZV]HQDOHĝ\GRSURVW\FK1DSU]\NïDG 6WDUV]HSU]HJOÈGDUNLQLHREVïXJXMÈQDMQRZV]\FK PHWRGZ\ERUXHOHPHQWöZ ,(ZSU]HFLZLHñVWZLHGRLQQ\FKSU]HJOÈGDUHN QLHWUDNWXMH]QDNöZRGVWÚSXPLÚG]\HOHPHQWDPLMDNRZÚ]ïöZWHNVWRZ\FK • • 7HJRURG]DMXNZHVWLHXWUXGQLDMÈZ\EöURGSRZLHGQLFKHOHPHQWöZQDVWURQLHZHZV]\VWNLFK QDMZDĝQLHMV]\FKSU]HJOÈGDUNDFK 1LHPXVLP\SR]QDZDÊQRZ\FKVSRVREöZZ\ERUX HOHPHQWöZSRQLHZDĝELEOLRWHNDM4XHU\Z\NRU]\VWXMH]QDQ\MXĝSURJUDPLVWRPMÚ]\NLQWHUIHMVX Xĝ\WNRZQLNDZLWU\Q:::F]\OLVHOHNWRU\&66 NWöUH VÈ]QDF]QLHV]\EV]HSRGF]DVZ\ERUXHOHPHQWöZ PRJÈE\Ê]QDF]QLHGRNïDGQLHMV]HSRGF]DV ZVND]\ZDQLDHOHPHQWöZGRZ\EUDQLD F]ÚVWRZ\PDJDMÈPQLHMV]HMLORĂFLNRGXQLĝ VWDUV]HPHWRG\PRGHOX'20 VÈMXĝZ\NRU]\VW\ZDQHSU]H]ZLÚNV]RĂÊSURJUDPLVWöZLQWHUIHMVXXĝ\WNRZQLNDZLWU\Q::: • • • • %LEOLRWHNDM4XHU\GRGDMHQDZHWNLONDVHOHNWRUöZ VW\OX&66DW\PVDP\PGRGDWNRZÈIXQNFMRQDOQRĂÊ *G\SRZVWDïDELEOLRWHNDM4XHU\ZQRZRF]HVQ\FK SU]HJOÈGDUNDFKLQWHUQHWRZ\FK]DLPSOHPHQWRZDQR PHWRG\querySelector() i querySelectorAll() SR]ZDODMÈFHSURJUDPLVWRPQDZ\EöUHOHPHQWöZ]D SRPRFÈVNïDGQL&66-HGQDNZ\PLHQLRQHPHWRG\ QLHVÈREVïXJLZDQHZVWDUV]\FKSU]HJOÈGDUNDFK 306 JQUERY 2. MNIEJ KODU W NAJCZĘŚCIEJ WYKONYWANYCH ZADANIACH ,VWQLHMÈSHZQH]DGDQLDUHJXODUQLHZ\NRQ\ZDQH SU]H]SURJUDPLVWöZLQWHUIHMVXXĝ\WNRZQLND ZLWU\Q:::QDSU]\NïDGLWHUDFMDSU]H]Z\EUDQH HOHPHQW\ %LEOLRWHNDM4XHU\]DZLHUDPHWRG\SR]ZDODMÈFH SURJUDPLVWRPQDXSURV]F]HQLHVSRVREöZ Z\NRQ\ZDQLDW\FK]DGDñQDSU]\NïDG LWHUDFMLSU]H]HOHPHQW\ GRGDZDQLDLXVXZDQLDHOHPHQWöZ]GU]HZD PRGHOX'20 REVïXJL]GDU]Hñ REVïXJLZ\ĂZLHWODQLDLXNU\ZDQLDHOHPHQWöZ ZLGRNX REVïXJLĝÈGDñ$MD[ • • • • • M4XHU\XïDWZLDZ\PLHQLRQH]DGDQLDLSR]ZDODQD XWZRU]HQLHPQLHMV]HMLORĂFLNRGXDE\MHZ\NRQDÊ %LEOLRWHNDM4XHU\RIHUXMHUöZQLHĝPRĝOLZRĂÊ ïÈF]HQLDPHWRG WDWHFKQLNDEÚG]LHZSURZDG]RQD ZSRGUR]G]LDOHķÈF]HQLHPHWRGĵ 3RZ\EUDQLX SHZQ\FKHOHPHQWöZ]\VNXMHV]PRĝOLZRĂÊ ]DVWRVRZDQLDZLHOXPHWRGQDZLHOXZ\EUDQ\FK HOHPHQWDFK 0RWWRM4XHU\EU]PLķ7ZöU]PQLHMNRGXRVLÈJQLMZLÚFHMĵ SRQLHZDĝELEOLRWHNDWDSR]ZDODQDRVLÈJQLÚFLHW\FKVDP\FKFHOöZ DOH]Z\NRU]\VWDQLHPPQLHMV]HMLORĂFLNRGXQLĝWU]HEDE\XWZRU]\Ê Z]Z\Nï\P-DYD6FULSW 3. ZGODNOŚĆ MIĘDZY PRZEGLĄDARKAMI INTERNETOWYMI M4XHU\DXWRPDW\F]QLH]DMPXMHVLÚREVïXJÈUöĝQLF ZVSRVREDFKZMDNLHSRV]F]HJöOQHSU]HJOÈGDUNL Z\ELHUDMÈHOHPHQW\LREVïXJXMÈ]GDU]HQLD1LH PXVLV]ZLÚFWZRU]\ÊĝDGQ\FKUR]ZLÈ]DñDZDU\MQ\FKZNRG]LH MDNWRSU]HGVWDZLRQRZGZöFK SRSU]HGQLFKUR]G]LDïDFK M4XHU\Xĝ\ZDwykrywacza funkcjiDE\XVWDOLÊ QDMOHSV]\VSRVöEZ\NRQDQLD]DGDQLD2EHMPXMH WR]DVWRVRZDQLHZLHOXNRQVWUXNFMLZDUXQNRZ\FK -HĝHOLSU]HJOÈGDUNDREVïXJXMHLGHDOQ\VSRVöE Z\NRQDQLD]DGDQLDWRSRGHMĂFLHWREÚG]LHZ\NRU]\VWDQH:SU]HFLZQ\PUD]LHELEOLRWHNDVSUDZG]D F]\REVïXJLZDQDMHVWNROHMQDQDMOHSV]DRSFMD SR]ZDODMÈFDQDZ\NRQDQLHWHJRVDPHJR]DGDQLD 7HFKQLNDWD]RVWDïDZ\NRU]\VWDQDZRVWDWQLP UR]G]LDOHZFHOXRNUHĂOHQLDF]\SU]HJOÈGDUND REVïXJXMHREVHUZDWRU\]GDU]Hñ-HĝHOLREVHUZDWRU\ ]GDU]HñQLHVÈREVïXJLZDQHWRRIHURZDQHMHVW SRGHMĂFLHDOWHUQDW\ZQH GODSU]HJOÈGDUHN,QWHUQHW ([SORUHUZZHUVMLLVWDUV]\FK 7XWDMNRQVWUXNFMDZDUXQNRZDVSUDZG]DF]\ SU]HJOÈGDUNDREVïXJXMHPHWRGÚquerySelector() -HĝHOLWDNZ\PLHQLRQDPHWRGD]RVWDQLH]DVWRVRZDQD-HĝHOLQLHVSUDZG]DP\REVïXJÚQDVWÚSQHM QDMOHSV]HMRSFMLLZ\NRU]\VWXMHP\MÈ N Czy obsługiwana jest metoda querySelector()? Sprawdź, czy przeglądarka internetowa obsługuje następną najlepszą opcję T JQUERY 1.9.X CZY 2.0.X? :WUDNFLHSUDFQDGELEOLRWHNÈM4XHU\XPLHV]F]RQR ZQLHMZLHOHNRGXSU]H]QDF]RQHJRGRREVïXJL SU]HJOÈGDUHN,QWHUQHW([SORUHUZZHUVMDFK LFR]ZLÚNV]\ïRZLHONRĂÊVNU\SWXLVSUDZLïR ĝHVWDïVLÚ]QDF]QLHEDUG]LHMVNRPSOLNRZDQ\ 3RUR]SRF]ÚFLXSUDFQDGZHUVMÈ]HVSöïM4XHU\ SRVWDQRZLïRXWZRU]HQLXZHUVMLNWöUDQLHEÚG]LH REVïXJLZDÊVWDUV]\FKSU]HJOÈGDUHNFRSR]ZROLïR QDRSUDFRZDQLHPQLHMV]HJRLV]\EFLHMG]LDïDMÈFHJR VNU\SWX =HVSöïM4XHU\E\ïMHGQDNĂZLDGRP\IDNWXĝHZLHOH RVöEQDGDONRU]\VWD]HVWDUV]\FKZHUVMLSU]HJOÈGDUHNLGODWHJRZFLÈĝ]DFKRG]LSRWU]HEDLFKREVïXJL =GHF\GRZDQRVLÚZLÚFQDMHGQRF]HVQHUR]ZLMDQLH GZöFKZHUVMLM4XHU\ jQuery 1.9+:]DZLHUDWHVDPHIXQNFMHNWöUH PRĝQD]QDOHěÊZZHUVML[DOH]DSHZQLD REVïXJÚ,(ļ jQuery 2.0+:QLHREVïXJXMHVWDUV]\FKZHUVML SU]HJOÈGDUHNLQWHUQHWRZ\FKFRSRZRGXMHĝH VNU\SWMHVWPQLHMV]\LG]LDïDV]\EFLHM :NUöWNLPRNUHVLHQLHVÈVSRG]LHZDQH]E\WGXĝH UöĝQLFHZIXQNFMRQDOQRĂFLREXZHUVMLM4XHU\ 1D]ZDELEOLRWHNLM4XHU\SRZLQQD]DZLHUDÊ QXPHUZHUVML QDSU]\NïDGjquery-1.11.0.js lub jquery-1.11.0.min.js -HĝHOLQLH]DZLHUD SU]HJOÈGDUNDEÚG]LHSUöERZDïDZ\NRU]\VW\ZDÊ EXIRURZDQÈZHUVMÚSOLNXNWöUDPRĝHRND]DÊVLÚ starsza lubQRZV]D7R]NROHLPRĝHXQLHPRĝOLZLÊ SUDZLGïRZHG]LDïDQLHVNU\SWöZ Doskonale! Użyj tej funkcji, jako najlepszej opcji JQUERY 307 WYSZUKIWANIE ELEMENTÓW 8ĝ\ZDMÈFM4XHU\HOHPHQW\PRĝQD]Z\NOH Z\ELHUDÊ]DSRPRFÈVHOHNWRUöZVW\OX&66 'RVWÚSQHVÈWDNĝHVHOHNWRU\GRGDWNRZH R]QDF]RQHSRQLĝHMMDNRjQ 3U]\NïDG\]DVWRVRZDQLDW\FK VHOHNWRUöZ]QDMG]LHV]ZFDï\P UR]G]LDOH6NïDGQLDEÚG]LH ]QDQDRVRERPZ\NRU]\VWXMÈF\P VHOHNWRU\Z&66 SELEKTORY PODSTAWOWE :V]\VWNLHHOHPHQW\ :V]\VWNLHHOHPHQW\RQD]ZLHelement (OHPHQW\NWöU\FKDWU\EXWidPDZVND]DQÈZDUWRĂÊ (OHPHQW\NWöU\FKDWU\EXWclassPDZVND]DQÈZDUWRĂÊ (OHPHQW\GRSDVRZXMÈFHZLÚFHMQLĝW\ONRMHGHQVHOHNWRU ]DSR]QDM VLÚWDNĝH]RSLVHPPHWRG\.add()NWöUDFKDUDNWHU\]XMHVLÚZLÚNV]È HIHNW\ZQRĂFLÈSRGF]DVïÈF]HQLDZ\ELHUDQ\FKHOHPHQWöZ * element #id .klasa selektor1, selektor2 HIERARCHIA (OHPHQWNWöU\MHVWHOHPHQWHPSRWRPQ\PLQQHJR QDSU]\NïDGli a (OHPHQWEÚGÈF\EH]SRĂUHGQLPHOHPHQWHPSRWRPQ\PLQQHJR PRĝQD Xĝ\Ê*ZPLHMVFXHOHPHQWXSRWRPQHJRDE\Z\EUDÊZV]\VWNLHHOHPHQW\ SRWRPQHZVND]DQHJRHOHPHQWXQDGU]ÚGQHJR 6HOHNWRUVÈVLDGXMÈF\FKHOHPHQWöZUöZQRU]ÚGQ\FKZ\ELHUDW\ONRWHNWöUH ]QDMGXMÈVLÚWXĝSRSRSU]HGQLPHOHPHQFLH 6HOHNWRUHOHPHQWöZUöZQRU]ÚGQ\FKZ\ELHU]HWHHOHPHQW\NWöUHVÈ UöZQRU]ÚGQH]SRSU]HGQLP przodek potomek QDGU]ÚGQ\!SRWRPQ\ SRSU]HGQLQDVWÚSQ\ SRSU]HGQLaUöZQRU]ÚGQH PODSTAWOWE FILTRY :not(selektor) ğUVW :last :even jQ jQ jQ :odd :eq(indeks) :gt(indeks) :lt(indeks) :header :animated :focus jQ jQ jQ jQ jQ jQ JQUERY :V]\VWNLHHOHPHQW\]Z\MÈWNLHPZVND]DQHJRVHOHNWRUD QDSU]\NïDG div:not(’#summary’) 3LHUZV]\HOHPHQW]Z\EUDQ\FK 2VWDWQLHOHPHQW]Z\EUDQ\FK (OHPHQW\RSDU]\VW\FKQXPHUDFKLQGHNVX]H]ELRUXZ\EUDQ\FK (OHPHQW\RQLHSDU]\VW\FKQXPHUDFKLQGHNVX]H]ELRUXZ\EUDQ\FK (OHPHQW\RQXPHU]HLQGHNVXUöZQ\PSRGDQHPXZSDUDPHWU]H (OHPHQW\RQXPHU]HLQGHNVXZLÚNV]\PRGSRGDQHJRZSDUDPHWU]H (OHPHQW\RQXPHU]HLQGHNVXPQLHMV]\PRGSRGDQHJRZSDUDPHWU]H :V]\VWNLHHOHPHQW\RG<h1>GR<h6> (OHPHQW\NWöUHDNWXDOQLHVÈDQLPRZDQH (OHPHQW\NWöUHDNWXDOQLHVÈDNW\ZQH FILTRY ZAWARTOŚCI :contains(’tekst’) :empty :parent jQ :has(selektor) jQ (OHPHQW\]DZLHUDMÈFHZVND]DQ\tekstMDNRSDUDPHWU :V]\VWNLHHOHPHQW\QLHSRVLDGDMÈFHHOHPHQWöZSRWRPQ\FK :V]\VWNLHHOHPHQW\SRVLDGDMÈFHZÚ]ï\SRWRPQH ZSRVWDFLWHNVWX OXEHOHPHQWX (OHPHQW\]DZLHUDMÈFHSU]\QDMPQLHMMHGHQHOHPHQWGRSDVRZDQ\ GRVHOHNWRUD QDSU]\NïDGdiv:has(p)SRZRGXMHGRSDVRZDQLHZV]\VWNLFK HOHPHQWöZ<div>]DZLHUDMÈF\FKHOHPHQW<p> FILTRY WIDOCZNOŚCI :hidden :visible jQ :V]\VWNLHHOHPHQW\XNU\WH jQ :V]\VWNLHHOHPHQW\]DMPXMÈFHPLHMVFHZXNïDG]LHJUDğF]Q\PQDVWURQLH 1LHEÚGÈ]D]QDF]RQHZSU]\SDGNXXĝ\FLDdisplay: none; KHLJKWZLGWKHOHPHQWQDGU]ÚGQ\MHMXNU\W\%ÚGÈ]D]QDF]RQH ZSU]\SDGNX]DVWRVRZDQLDvisibility: hidden; opacity: 0 SRQLHZDĝZöZF]DV]DMPXMÈPLHMVFHZXNïDG]LHQDVWURQLH FILTRY POTOMNE :DUWRĂÊSRGDQDZW\PPLHMVFXQLHMHVWOLF]RQDRG]HUDĽQDSU]\NïDG ul li:nth-child(2) 3LHUZV]\HOHPHQWSRWRPQ\GODDNWXDOQLHZ\EUDQHJR 2VWDWQLHOHPHQWSRWRPQ\GODDNWXDOQLHZ\EUDQHJR .LHG\LVWQLHMHW\ONRMHGHQHOHPHQWSRWRPQ\ div p:only-child :nth-child(Z\UDĝHQLH) ğUVWFKLOG :last-child :only-child FILTRY ATRYBUTU [DWU\EXW] (OHPHQW\]DZLHUDMÈFHRNUHĂORQ\DWU\EXW ZUD]]GRZROQÈZDUWRĂFLÈ [DWU\EXW=ĳZDUWRĂÊĳ] (OHPHQW\]DZLHUDMÈFHRNUHĂORQ\DWU\EXWZUD]]HZVND]DQÈZDUWRĂFLÈ [DWU\EXW!=ĳZDUWRĂÊĳ] jQ (OHPHQW\]DZLHUDMÈFHRNUHĂORQ\DWU\EXWDOHQLH]HZVND]DQÈZDUWRĂFLÈ [DWU\EXW^=ĳZDUWRĂÊĳ] :DUWRĂÊDWU\EXWXUR]SRF]\QDVLÚRGSRGDQHMZDUWRĂFL [DWU\EXW=ĳZDUWRĂÊĳ] :DUWRĂÊDWU\EXWXNRñF]\VLÚQDSRGDQHMZDUWRĂFL [DWU\EXW*=ĳZDUWRĂÊĳ] :DUWRĂÊSRZLQQDSRMDZLDÊVLÚZGRZROQ\PPLHMVFXZDUWRĂFLDWU\EXWX [DWU\EXW|=ĳZDUWRĂÊĳ] 5öZQDSRGDQHPXFLÈJRZLWHNVWRZHPXOXEUR]SRF]\QDVLÚRGSRGDQHJRFLÈJX WHNVWRZHJRLP\ĂOQLND [DWU\EXW~=ĳZDUWRĂÊĳ] :DUWRĂÊSRZLQQDE\ÊMHGQÈ]ZDUWRĂFLXPLHV]F]RQ\FKQDOLĂFLHLUR]G]LHORQ\FK VSDFMDPL [DWU\EXW][DWU\EXW] (OHPHQW\NWöUHGRSDVRZDï\ZV]\VWNLHVHOHNWRU\ FORMULARZE SIECIOWE :input :text SDVVZRUG :radio :checkbox :submit :image :reset :button ğOH :selected :enabled :disabled :checked jQ jQ jQ jQ jQ jQ jQ jQ jQ jQ jQ :V]\VWNLHHOHPHQW\<input> :V]\VWNLHSRODWHNVWRZH :V]\VWNLHSRODWHNVWRZHGRSRGDZDQLDKDVHï :V]\VWNLHSU]\FLVNLRSFML :V]\VWNLHSRODZ\ERUX :V]\VWNLHSU]\FLVNLZ\V\ïDMÈFHIRUPXODU]HVLHFLRZH :V]\VWNLHHOHPHQW\<img> :V]\VWNLHSU]\FLVNL]HURZDQLDIRUPXODU]\VLHFLRZ\FK :V]\VWNLHHOHPHQW\<button> :V]\VWNLHSRODSR]ZDODMÈFHQDZ\EöUSOLNöZ :V]\VWNLH]D]QDF]RQHHOHPHQW\OLVWUR]ZLMDQ\FK :V]\VWNLHZïÈF]RQHHOHPHQW\IRUPXODU]\VLHFLRZ\FK GRP\ĂOQLHZV]\VWNLHHOHPHQW\ :V]\VWNLHZ\ïÈF]RQHHOHPHQW\IRUPXODU]\VLHFLRZ\FK Xĝ\ZDMÈFHZïDĂFLZRĂFL&66disabled :V]\VWNLH]D]QDF]RQHSU]\FLVNLRSFMLOXESRODZ\ERUX JQUERY 309 WYKONYWANIE OPERACJI NA WYBRANYCH ELEMENTACH 3RZ\ĝHMSU]HGVWDZLRQRSRGVWDZ\G]LDïDQLDELEOLRWHNLM4XHU\ ZLÚNV]RĂÊUR]G]LDïXEÚG]LH SRĂZLÚFRQDZ\MDĂQLHQLXMDN G]LDïDMÈZ\PLHQLRQHPHWRG\ 1DW\FKGZöFKVWURQDFK Z\PLHQLRQRPHWRG\M4XHU\ LZVND]DQRQXPHU\VWURQ QDNWöU\FK]QDMG]LHV]ZLÚFHM LQIRUPDFMLQDLFKWHPDW %DUG]RF]ÚVWRPRĝHV]]REDF]\ÊQD]Z\PHWRGM4XHU\ ]DF]\QDMÈFHVLÚRGNURSNL7R Xĝ\WDZNVLÈĝFHNRQZHQFMD NWöUDSRPRĝH&LZRGUöĝQLDQLX PHWRGM4XHU\RGZEXGRZDQ\FK PHWRG-DYD6FULSWOXEZïDVQ\FK RELHNWöZ .LHG\GRNRQXMHV]Z\ERUX tworzony obiekt jQueryPD ZïDĂFLZRĂÊlength]DZLHUDMÈFÈ OLF]EÚHOHPHQWöZ]QDMGXMÈF\FK VLÚZRELHNFLH -HĝHOLQLH]RVWDï\GRSDVRZDQH ĝDGQHHOHPHQW\WRZ\ZRïDQLH Z\PLHQLRQ\FKWXWDMPHWRGQLH ]DNRñF]\VLÚEïÚGHP0HWRG\ SRSURVWXQLH]ZUöFÈĝDGQ\FK ZDUWRĂFL ,VWQLHMÈUöZQLHĝPHWRG\SU]H]QDF]RQHVSHFMDOQLHGRSUDF\ ]RPöZLRQÈZUR]G]LDOH WHFKQRORJLÈ$MD[ SR]ZDODRQD QDRGĂZLHĝDQLHW\ONRIUDJPHQWX VWURQ\]DPLDVWFDïHM 310 JQUERY FILTRY ZAWARTOŚCI 3REUDQLHOXE]PLDQD]DZDUWRĂFLHOHPHQWöZDWU\EXWöZLZÚ]ïöZ WHNVWRZ\FK POBIERANIE I ZMIANA ZAWARTOŚCI .html() SRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ .text() SRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ .replaceWith() SRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ .remove() SRGUR]G]LDïķ8DNWXDOQLDQLHHOHPHQWöZĵ ELEMENTY .before() .after() .prepend() .append() .remove() .clone() XQZUDS .detach() .empty() .add() ATRYBUTY .attr() .removeAttr() .addClass() .removeClass() .css() SRGUR]G]LDïķ:VWDZLDQLHHOHPHQWXĵ SRGUR]G]LDïķ:VWDZLDQLHHOHPHQWXĵ SRGUR]G]LDïķ:VWDZLDQLHHOHPHQWXĵ SRGUR]G]LDïķ:VWDZLDQLHHOHPHQWXĵ SRGUR]G]LDïķ:\FLQDQLHLNRSLRZDQLHHOHPHQWöZĵ SRGUR]G]LDïķ:\FLQDQLHLNRSLRZDQLHHOHPHQWöZĵ SRGUR]G]LDïķ:\FLQDQLHLNRSLRZDQLHHOHPHQWöZĵ SRGUR]G]LDïķ:\FLQDQLHLNRSLRZDQLHHOHPHQWöZĵ SRGUR]G]LDïķ:\FLQDQLHLNRSLRZDQLHHOHPHQWöZĵ SRGUR]G]LDïķ'RGDZDQLHLğOWURZDQLH HOHPHQWöZZGRSDVRZDQ\P]ELRU]Hĵ SRGUR]G]LDïķ3RELHUDQLHLXVWDZLDQLHZDUWRĂFLDWU\EXWXĵ SRGUR]G]LDïķ3RELHUDQLHLXVWDZLDQLHZDUWRĂFLDWU\EXWXĵ SRGUR]G]LDïķ3RELHUDQLHLXVWDZLDQLHZDUWRĂFLDWU\EXWXĵ SRGUR]G]LDïķ3RELHUDQLHLXVWDZLDQLHZDUWRĂFLDWU\EXWXĵ SRGUR]G]LDïķ3RELHUDQLHLXVWDZLDQLHZïDĂFLZRĂFL&66ĵ WARTOŚCI FORMULARZA SIECIOWEGO .val() SRGUR]G]LDïķ=GDU]HQLDLPHWRG\IRUPXODU]DVLHFLRZHJRĵ .isNumeric() SRGUR]G]LDïķ=GDU]HQLDLPHWRG\IRUPXODU]DVLHFLRZHJRĵ WYSZUKIWANIE ELEMENTÓW :\V]XNLZDQLHLZ\ELHUDQLHHOHPHQWöZGRSUDF\ DWDNĝHSRUXV]DQLHVLÚSRPRGHOX'20 OGÓLNE ğQG .closest() .parent() .parents() .children() .siblings() .next() .nextAll() .prev() .prevAll() SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ WYSZUKIWANIE ELEMENTÓW ciąg dalszy FILTROWANIE I TESTOWANIE ğOWHU .not() .has() .is() :contains() SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX'20ĵ KOLEJNOŚĆ ELEMENTÓW .eq() .lt() .gt() SRGUR]G]LDïķ:\V]XNLZDQLHHOHPHQWöZZHGïXJNROHMQRĂFLĵ SRGUR]G]LDïķ:\V]XNLZDQLHHOHPHQWöZZHGïXJNROHMQRĂFLĵ SRGUR]G]LDïķ:\V]XNLZDQLHHOHPHQWöZZHGïXJNROHMQRĂFLĵ *G\HOHPHQW\]RVWDQÈZ\EUDQH LXPLHV]F]RQHZRELHNcie jQuery PHWRG\M4XHU\Z\PLHQLRQHQDW\FKGZöFK VWURQDFKZ\NRQXMÈQDW\FKHOHPHQWDFKSHZQH]DGDQLD WYMIARY I POŁOŻENIE EFEKTY I ANIMACJA 3RELHUDQLHOXEXDNWXDOQLDQLHZ\PLDUöZEÈGěSRïRĝHQLDHOHPHQWX 'RGDZDQLHHIHNWöZLDQLPDFML GRIUDJPHQWöZVWURQ\ WYMIARY .height() ZLGWK .innerHeight() .innerWidth() .outerHeight() .outerWidth() $(document).height() GRFXPHQW ZLGWK ZLQGRZ KHLJKW ZLQGRZ ZLGWK SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\SXGHïNDĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ POŁOŻENIE .offset() .position() .scrollLeft() .scrollTop() SRGUR]G]LDïķ3RïRĝHQLHHOHPHQWöZQDVWURQLHĵ SRGUR]G]LDïķ3RïRĝHQLHHOHPHQWöZQDVWURQLHĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ SRGUR]G]LDïķ:\PLDU\RNQDLVWURQ\ĵ ZDARZENIA PODSTAWOWE VKRZ SRGUR]G]LDïķ(IHNW\ĵ .hide() SRGUR]G]LDïķ(IHNW\ĵ .toggle() SRGUR]G]LDïķ(IHNW\ĵ ROZJAŚNIANIE .fadeIn() .fadeOut() .fadeTo() .fadeToggle() SRGUR]G]LDïķ(IHNW\ĵ SRGUR]G]LDïķ(IHNW\ĵ SRGUR]G]LDïķ(IHNW\ĵ SRGUR]G]LDïķ(IHNW\ĵ PRZESUWANIE VOLGH'RZQ SRGUR]G]LDïķ(IHNW\ĵ .slideUp() SRGUR]G]LDïķ(IHNW\ĵ .slideToggle() SRGUR]G]LDïķ(IHNW\ĵ WŁASNE .delay() .stop() .animate() SRGUR]G]LDïķ(IHNW\ĵ SRGUR]G]LDïķ(IHNW\ĵ SRGUR]G]LDïķ(IHNW\ĵ 7ZRU]HQLHREVHUZDWRUöZ]GDU]HñGODNDĝGHJRHOHPHQWXZ]ELRU]HZ\EUDQ\FK DOKUMENT I PLIK .ready() SRGUR]G]LDïķ6SUDZG]HQLHF]\VWURQDMHVWJRWRZDE\PRĝQDE\ïR]QLÈSUDFRZDÊĵ .load() SRGUR]G]LDïķ=GDU]HQLHORDGĵ INTERAKCJE UŻYTKOWNIKA .on() SRGUR]G]LDïķ0HWRG\]GDU]Hñĵ ,VWQLHMÈPHWRG\SU]H]QDF]RQHGODSRV]F]HJöOQ\FKW\SöZ]GDU]HñLGODWHJRPRĝHV]VLÚVSRWNDÊ]PHWRGDPLWDNLPLMDN.click().hover() i .submit()-HGQDNDE\PRĝQDE\ïRREVïXJLZDÊ]GDU]HQLD]RVWDï\ RQHSRU]XFRQHQDU]HF]PHWRG\.on() JQUERY 311 DOPASOWANY ZBIÓR I ELEMENTY WYBRANE PRZEZ JQUERY .LHG\Z\ELHU]HV]FRQDMPQLHMMHGHQHOHPHQWZDUWRĂFLÈ]ZURWQÈEÚG]LHRELHNW jQuery1RVLRQUöZQLHĝQD]ZÚdopasowanego zbioru lub elementów wybranych przez jQuery. POJEDYNCZY ELEMENT WIELE ELEMENTÓW -HĝHOLVHOHNWRU]ZUDFDMHGHQHOHPHQWWRRELHNW jQuery zawiera odniesienie do po prostu jednego ZÚ]ïDHOHPHQWX -HĝHOLVHOHNWRU]ZUDFDZLHOHHOHPHQWöZWRRELHNW jQuery zawiera odniesienia do poszczególnych ZÚ]ïöZHOHPHQWöZ $(’ul’) $(’li’) 7HQVHOHNWRUSRELHUDHOHPHQW<ul> na stronie. 'ODWHJRWHĝRELHNWjQuery zawiera odniesienie do MHGQHJRZÚ]ïD MHG\Q\HOHPHQW<ul>]QDMGXMÈF\ VLÚQDVWURQLH 6HOHNWRUWHQSRELHUDZV]\VWNLHHOHPHQW\<li> na VWURQLH'ODWHJRWHĝRELHNWjQuery zawiera odnieVLHQLDGRNDĝGHJRZ\EUDQHJRZÚ]ïD SRV]F]HJöOQH elementy <li>]QDMGXMÈFHVLÚQDVWURQLH ul ul li li li li .DĝG\HOHPHQWPDSU]\SLVDQ\QXPHULQGHNVX 3RQLĝHMSU]HGVWDZLRQRV\WXDFMÚJG\RELHNW ]DZLHUDW\ONRMHGHQHOHPHQW INDEKS 0 312 JQUERY :}=((/(0(178 ul li li li li 2ELHNWM4XHU\EÚG]LH]DZLHUDïF]WHU\HOHPHQW\ OLVW\3DPLÚWDMĝHQXPHU\LQGHNVöZUR]SRF]\QDMÈ VLÚRG]HUD INDEKS :}=((/(0(178 0 li#one.hot 1 li#two.hot 2 li#three.hot 3 li#four METODY JQUERY PRZEZNACZONE DO POBIERANIA I USTAWIANIA DANYCH 3HZQHPHWRG\M4XHU\VÈSU]H]QDF]RQHGRSRELHUDQLDLQIRUPDFML]HOHPHQWöZ RUD]GRLFKXDNWXDOQLDQLD1LH]DZV]HPRJÈE\ÊVWRVRZDQHZHZV]\VWNLFK HOHPHQWDFK POBIERANIE INFORMACJI UAKTUALNIANIE INFORMACJI -HĝHOLZ\EöUM4XHU\]DZLHUDZLÚFHMQLĝW\ONRMHGHQ HOHPHQWDPHWRGDMHVWXĝ\ZDQDZFHOXSREUDQLD LQIRUPDFML]Z\EUDQ\FKHOHPHQWöZWRinformacje WH]RVWDQÈSREUDQHW\ONR]SLHUZV]HJRHOHPHQWX ZGRSDVRZDQ\P]ELRU]H -HĝHOLM4XHU\Z\ELHU]HFRQDMPQLHMGZDHOHPHQW\ DPHWRGDMHVWXĝ\ZDQDZFHOXXDNWXDOQLDQLD LQIRUPDFMLQDVWURQLHWRXDNWXDOQLRQHEÚGÈ wszystkie elementyZGRSDVRZDQ\P]ELRU]H DQLHW\ONRSLHUZV]\ :SRGDQ\PWXWDMSU]\NïDG]LHOLVW\SRQLĝV]\ VHOHNWRUVSRZRGXMHZ\EöUF]WHUHFKHOHPHQWöZ <li>]OLVW\ $(’li’) ul li li li li .LHG\ZFHOXSREUDQLDLQIRUPDFML]HOHPHQWX Xĝ\MHV]PHWRG\.html()ĽEÚG]LHRPöZLRQD ZSRGUR]G]LDOHķ8DNWXDOQLDQLHHOHPHQWöZĵĽMHM ZDUWRĂFLÈ]ZURWQÈEÚG]LH]DZDUWRĂÊSLHUZV]HJR HOHPHQWXZGRSDVRZDQ\P]ELRU]H .LHG\GRXDNWXDOQLHQLDHOHPHQWXZ\NRU]\VWDV] PHWRGÚ.html()ĽEÚG]LHRPöZLRQDZSRGUR]G]LDOHķ8DNWXDOQLDQLHHOHPHQWöZĵĽ]DVWÈSLRQD ]DZDUWRĂÊZV]\VWNLFKHOHPHQWöZZGRSDVRZDQ\P ]ELRU]H3RQLĝV]HSROHFHQLHSRZRGXMHXDNWXDOQLHQLH]DZDUWRĂFLNDĝGHJRHOHPHQWXOLVW\ var content = $(’li’).html(); $(’li’).html(’Uaktualniony’); 3RZ\ĝV]HSROHFHQLHSRZRGXMHSREUDQLH]DZDUWRĂFL SLHUZV]HJRHOHPHQWXOLVW\LXPLHV]F]HQLHMHM Z]PLHQQHMRQD]ZLHcontent 3ROHFHQLHXDNWXDOQLD]DZDUWRĂÊZV]\VWNLFK HOHPHQWöZOLVW\ZGRSDVRZDQ\P]ELRU]HVïRZHP Uaktualniony $E\SREUDÊLQQ\HOHPHQWPRĝQDVNRU]\VWDÊ ]PHWRGSU]H]QDF]RQ\FKGRSRUXV]DQLDVLÚSR PRGHOX'20 SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX '20ĵ OXEğOWURZDQLD SRGUR]G]LDïķ'RGDZDQLH LğOWURZDQLHHOHPHQWöZZGRSDVRZDQ\P]ELRU]Hĵ Z\EUDQ\FKHOHPHQWöZEÈGěWHĝXWZRU]\Ê GRNïDGQLHMV]\VHOHNWRU SRGUR]G]LDïķ:\V]XNLZDQLH HOHPHQWöZĵ $E\XDNWXDOQLÊW\ONRjedenHOHPHQWPRĝQDXĝ\Ê PHWRGSU]H]QDF]RQ\FKGRSRUXV]DQLDVLÚSR PRGHOX'20 SRGUR]G]LDïķ1DZLJDFMDSRPRGHOX '20ĵ OXEğOWURZDQLD SRGUR]G]LDïķ'RGDZDQLH LğOWURZDQLHHOHPHQWöZZGRSDVRZDQ\P]ELRU]Hĵ Z\EUDQ\FKHOHPHQWöZEÈGěWHĝXWZRU]\Ê GRNïDGQLHMV]\VHOHNWRU SRGUR]G]LDïķ:\V]XNLZDQLH HOHPHQWöZĵ $E\SREUDÊ]DZDUWRĂÊZV]\VWNLFKHOHPHQWöZQDOHĝ\]DVWRVRZDÊPHWRGÚ.each()RNWöUHMZLÚFHM VLÚGRZLHV]ZSRGUR]G]LDOHķ3UDFD]SRV]F]HJöOQ\PLHOHPHQWDPLZGRSDVRZDQ\P]ELRU]Hĵ JQUERY 313 OBIEKTY JQUERY PRZECHOWUJĄCE ODNIESIENIA DO OBIEKTÓW .LHG\GRNRQXMHV]Z\ERUXHOHPHQWöZ]DSRĂUHGQLFWZHPM4XHU\ SU]HFKRZ\ZDQHVÈRGQLHVLHQLDGRRGSRZLDGDMÈF\FKLPZÚ]ïöZ ZGU]HZLHPRGHOX'201LHVÈWZRU]RQHNRSLHZÚ]ïöZ -DNMXĝZLG]LDïHĂSRGF]DVZF]\W\ZDQLDVWURQ\ +70/SU]HJOÈGDUNDWZRU]\ZSDPLÚFLPRGHOWHM VWURQ\:\REUDěVRELHSDPLÚÊSU]HJOÈGDUNLMDNR ]ELöUSï\WHN <> :Ú]ï\ZPRGHOX'20]DELHUDMÈSRMHGQHMSï\WFH var =PLHQQH]DELHUDMÈSRMHGQHMSï\WFH 6NRPSOLNRZDQHRELHNW\-DYD6FULSWPRJÈ]DELHUDÊ ZLHOHSï\WHNSRQLHZDĝSU]HFKRZXMÈZLÚNV]ÈLORĂÊ GDQ\FK $ :U]HF]\ZLVWRĂFLHOHPHQW\]QDMGXMÈFHVLÚZSDPLÚFLSU]HJOÈGDUNLQLHVÈUR]ïRĝRQHZWDNLVSRVöE MDNSRND]DQRQDGLDJUDPLH-HGQDNGLDJUDP SRPDJDZZ\MDĂQLHQLXNRQFHSFML .LHG\SURJUDPLĂFLPöZLÈĝH]PLHQQDOXERELHNW SU]HFKRZXMHRGQLHVLHQLHGRF]HJRĂR]QDF]DWR SU]HFKRZ\ZDQLHGDQ\FKRSRïRĝHQLXLQIRUPDFML ZSDPLÚFLSU]HJOÈGDUNL:RPDZLDQ\PSU]\NïDG]LHRELHNWM4XHU\EÚG]LHZLHG]LDïĝHHOHPHQW\ OLVW\VÈSU]HFKRZ\ZDQHZ$%L&:DUWR SU]\SRPQLHÊSRQRZQLHĝHWRW\ONRLOXVWUDFMD NRQFHSFML3DPLÚÊSU]HJOÈGDUNLQLHMHVWWDNSURVWD MDNSODQV]D]SRND]DQ\PLSRïRĝHQLDPL A B C D E F 1 <> <> <> var var var 2 <> <> <> 3 <> <> <> 0 A4 li li li 2 C4 4 314 .LHG\GRNRQXMHV]Z\ERUXZM4XHU\RELHNWM4XHU\ zawiera odniesieniaGRHOHPHQWöZZPRGHOX '20QLHWZRU]\LFKNRSLL JQUERY $('li'); 1 B4 var 2ELHNWM4XHU\MHVWSRGREQ\GR WDEOLF\SRQLHZDĝSU]HFKRZXMH OLVWÚHOHPHQWöZZWDNLHMVDPHM NROHMQRĂFLZMDNLHMSRMDZLDMÈ VLÚRQHZGRNXPHQFLH+70/ -HVWWRSU]HFLZLHñVWZRLQQ\FK RELHNWöZZNWöU\FKNROHMQRĂÊ ZïDĂFLZRĂFL]Z\NOHQLHEÚG]LH ]DFKRZDQD BUFOROWANIE W ZMIENNYCH JQUERY WYBRANYCH ELEMENTÓW 2ELHNWM4XHU\SU]HFKRZXMHRGQLHVLHQLDGRHOHPHQWöZ %XIRURZDQLHRELHNWXM4XHU\SRZRGXMHSU]HFKRZ\ZDQLH Z]PLHQQHMRGQLHVLHQLDGRWHJRRELHNWX 8WZRU]HQLHRELHNWXM4XHU\PRĝHZ\PDJDÊQLHFR F]DVX]DVREöZSURFHVRUDDWDNĝHSDPLÚFL ,QWHUSUHWHUPXVLZ\NRQDÊSRQLĝV]H]DGDQLD 3RQLĝHMXWZRU]RQ\]RVWDMHRELHNWM4XHU\ĽSU]HFKRZXMHSRïRĝHQLHHOHPHQWöZ<li>ZGU]HZLH PRGHOX'20 1. :\V]XNDQLHZGU]HZLHPRGHOX'20GRSDVRZDQ\FKZÚ]ïöZ 2. 8WZRU]HQLHRELHNWXM4XHU\ 3. 3U]HFKRZ\ZDQLHZRELHNFLHM4XHU\RGQLHVLHñ GRZÚ]ïöZ $(’li’); 'ODWHJRWHĝMHĝHOLWHVDPHHOHPHQW\NRGPXVLZ\EUDÊFRQDMPQLHMGZDUD]\OHSV]\PUR]ZLÈ]DQLHP EÚG]LHSRQRZQHXĝ\FLHRELHNWXQLĝSRZWöU]HQLH SU]HGVWDZLRQHJRSRZ\ĝHMSURFHVX:W\PFHOXRGQLHVLHQLHGRRELHNWXM4XHU\QDOHĝ\SU]HFKRZ\ZDÊ Z]PLHQQHM 2GQLHVLHQLHGRWHJRRELHNWXMHVWSU]HFKRZ\ZDQH Z]PLHQQHMRQD]ZLH$listItems=ZUöÊXZDJÚ QDMHGHQIDNWNLHG\]PLHQQD]DZLHUDRELHNWM4XHU\MHMQD]ZDF]ÚVWR]DF]\QDVLÚRG]QDNX$ FR PDSRPöFZRGUöĝQLHQLXMHMRGLQQ\FK]PLHQQ\FK Xĝ\ZDQ\FKZVNU\SFLH $listItems = $(’li’); A B C D E F 1 <> <> <> var var var 2 <> <> <> 3 <> <> <> 0 A4 li li li 2 C4 4 $('li'); var 1 B4 %XIRURZDQLHHOHPHQWöZ Z\EUDQ\FKSU]H]M4XHU\MHVW SRGREQHGRLGHLSU]HFKRZ\ZDQLDRGQLHVLHQLDGRZÚ]ïD PRGHOX'20SRZ\NRQDQLX ]DS\WDQLDPRGHOX'20 MDN SU]HGVWDZLRQRZUR]G]LDOH JQUERY 315 PĘTLE :]Z\Nï\PNRG]LH-DYD6FULSW MHĝHOLWRVDPR]DGDQLHPD ]RVWDÊZ\NRQDQHQDZLHOX HOHPHQWDFKWRNRQLHF]QHMHVW ]DVWRVRZDQLHSÚWOLSU]HSURZDG]DMÈFHMLWHUDFMÚSU]H]ZV]\VWNLH Z\EUDQHHOHPHQW\ :SU]\SDGNXM4XHU\JG\VHOHNWRU]ZUDFDZLHOHHOHPHQWöZ WRZV]\VWNLHPRĝQDXDNWXDOQLÊ ]DSRPRFÈW\ONRMHGQHMPHWRG\ 1LHPDNRQLHF]QRĂFLXĝ\FLD SÚWOL c07/js/looping.js :SRQLĝV]\PIUDJPHQFLH NRGXWDVDPDZDUWRĂFL]RVWDMH GRGDQDGRDWU\EXWXclass ZV]\VWNLFKHOHPHQWöZZ\V]XNDQ\FK]DSRPRFÈVHOHNWRUD /LF]ED]QDOH]LRQ\FKHOHPHQWöZ QLHPDWXWDMĝDGQHJR]QDF]HQLD JAVASCRIPT $(’li em’).addClass(’seasonal’); $(’li.hot’).addClass(’favorite’); :RPDZLDQ\PSU]\NïDG]LH SLHUZV]\VHOHNWRUPD]DVWRVRZDQLHW\ONRGRMHGQHJR HOHPHQWXDQRZDZDUWRĂÊ atrybutu classSRZRGXMH Z\ZRïDQLHQRZHMUHJXï\&66 NWöUDGRGDMHLNRQÚNDOHQGDU]D SROHZHMVWURQLHHOHPHQWX =NROHLGUXJLVHOHNWRUPD]DVWRVRZDQLHGODWU]HFKHOHPHQWöZ 1RZDZDUWRĂÊGRGDQDGR atrybutu classW\FKHOHPHQWöZ SRZRGXMHGRGDQLHLNRQ\VHUFD SRSUDZHMVWURQLHHOHPHQWX 0RĝOLZRĂÊXDNWXDOQLHQLD ZV]\VWNLFKHOHPHQWöZZ]ELRU]HZ\EUDQ\FKSU]H]M4XHU\ QRVLQD]ZÚniejawnej iteracji .LHG\LQIRUPDFMHWU]HEDSREUDÊ ]VHULLHOHPHQWöZPRĝQDXĝ\Ê PHWRG\.each()Ľ]RVWDQLH SU]HGVWDZLRQDZSRGUR]G]LDOH ķ3UDFD]SRV]F]HJöOQ\PL HOHPHQWDPLZGRSDVRZDQ\P ]ELRU]HĵĽ]DPLDVWWZRU]\Ê SÚWOÚ 316 JQUERY WYNIK ŁĄCZENIE METOD -HĝHOLFKFHV]VNRU]\VWDÊ]ZLHOX PHWRGM4XHU\QDZ\EUDQ\FK HOHPHQWDFKWRPRĝHV]MH SRGDÊUR]G]LHODMÈFMHNURSNDPL MDNSRND]DQRSRQLĝHM :SU]HGVWDZLRQ\PSROHFHQLX QDW\FKVDP\FKHOHPHQWDFK VÈZ\NRQ\ZDQHWU]\PHWRG\ hide() RGSRZLHG]LDOQD]D XNU\FLHHOHPHQWöZ delay() SRZRGXMÈFDSDX]Ú LfadeIn() SRND]XMÈFDHOHPHQW\ JAVASCRIPT 3URFHVXPLHV]F]HQLDZLHOX PHWRGZW\PVDP\PVHOHNWRU]H QRVLQD]ZÚïÈF]HQLDPHWRG-DN PRĝHV]]REDF]\ÊHIHNWHPMHVW NRGZ]ZLÚ]ïHMSRVWDFL c07/js/chaining.js $(’li[id!=”one”]’).hide().delay(500).fadeIn(1400); WYNIK $E\NRGE\ïïDWZLHMV]\ZRGF]\FLHZ\ZRïDQLHSRV]F]HJöOQ\FK PHWRGPRĝQDXPLHĂFLÊ ZRGG]LHOQ\FKZLHUV]DFK $(’li[id!=”one”]’) .hide() .delay(500) .fadeIn(1400); .DĝG\ZLHUV]]DZLHUDMÈF\Z\ZRïDQLHPHWRG\UR]SRF]\QDVLÚ RGNURSNLDĂUHGQLNQDNRñFX SROHFHQLDR]QDF]D]DNRñF]HQLH SUDF\]Z\EUDQ\PLHOHPHQWDPL :LÚNV]RĂÊPHWRGXĝ\ZDQ\FK GRuaktualnianiaHOHPHQWöZ Z\EUDQ\FKZM4XHU\PRĝQD]H VREÈïÈF]\Ê-HGQDNPHWRG\poELHUDMÈFHLQIRUPDFMH]PRGHOX '20 OXEGDQHRSU]HJOÈGDUFH LQWHUQHWRZHM QLHPRJÈE\Ê ïÈF]RQH :DUWRZW\PPLHMVFXZVSRPQLHÊRMHGQ\PMHĝHOLMHGQD ]PHWRGZïDñFXFKXQLHG]LDïD WRSR]RVWDïHUöZQLHĝQLHEÚGÈ G]LDïDï\ JQUERY 317 SPRAWDZENIE, CZY STRONA JEST GOTOWA, BY MOŻNA BYŁO Z NIĄ PRACOWAĆ 2IHURZDQDSU]H]M4XHU\PHWRGD.ready()VSUDZG]D F]\VWURQDMHVWJRWRZDGRSUDF\]NRGHP $(document) tworzy obiekt M4XHU\SU]HGVWDZLDMÈF\VWURQÚ OBIEKT JQUERY .LHG\VWURQDMHVWJRWRZDGR WHJRE\]QLÈSUDFRZDÊIXQNFMD XPLHV]F]RQDZQDZLDVLHPHWRG\ .ready()EÚG]LHJRWRZDGR Z\NRQDQLD METODA ZDARZENIA READY $(document).ready(function() { 0LHMVFHQDNRGVNU\SWX }); 3RGREQLHMDNZSU]\SDGNX ]Z\NïHJRNRGX-DYD6FULSW MHĝHOLSU]HJOÈGDUNDMHV]F]HQLH SU]\JRWRZDïDGU]HZDPRGHOX '20WRELEOLRWHNDM4XHU\QLH EÚG]LHPRJïDZ\ELHUDÊ]QLHJR HOHPHQWöZ -HĝHOLVNU\SW]RVWDQLHXPLHV]F]RQ\QDNRñFXVWURQ\ WXĝ SU]HG]DP\NDMÈF\P]QDF]QLNLHP</body> WRHOHPHQW\ EÚGÈZF]\WDQHZGU]HZLH PRGHOX'20 -HĝHOLNRGM4XHU\]RVWDQLH RSDNRZDQ\SRZ\ĝV]ÈPHWRGÈ QDGDOEÚG]LHG]LDïDïJG\ ]RVWDQLHXĝ\W\ZGRZROQ\P PLHMVFXQDVWURQLHOXEQDZHW ZLQQ\PSOLNX 6NUöWSRZ\ĝV]HJRZ\ZRïDQLD]RVWDïSRND]DQ\QDVWURQLHSRSUDZHM6NUöWWHQMHVWVWRVRZDQ\]QDF]QLH F]ÚĂFLHMQLĝGïXĝV]DZHUVMDZ\ZRïDQLD JQUERY 2PDZLDQH]GDU]HQLHQDOHĝ\ Z\NRU]\VW\ZDÊJG\VNU\SW RSLHUDVLÚQDZF]\W\ZDQ\FK ]DVREDFKQDSU]\NïDGPXVL PLHÊLQIRUPDFMÚRZ\PLDUDFK REUD]X =GDU]HQLHG]LDïDZHZV]\VWNLFK SU]HJOÈGDUNDFKDSRQDGWR RIHUXMH]DNUHVQDSR]LRPLH IXQNFMLGOD]QDMGXMÈF\FKVLÚ ZQLP]PLHQQ\FK -HĝHOL]GDU]HQLH DOMContentLoaded jest REVïXJLZDQHPHWRGDM4XHU\ WZRU]\REVHUZDWRUD]GDU]HñRGSRZLDGDMÈFHJRQDZ\PLHQLRQH ]GDU]HQLH-HGQDNWR]GDU]HQLH MHVWREVïXJLZDQHMHG\QLHZQRZRF]HVQ\FKSU]HJOÈGDUNDFK :VWDUV]\FKELEOLRWHNDM4XHU\ EÚG]LHRF]HNLZDÊQDZ\ZRïDQLH ]GDU]HQLDload KONTRA METODA .READY() 0HWRGDM4XHU\RQD]ZLH .ready()VSUDZG]DF]\SU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMH ]GDU]HQLHDOMContentLoaded SRQLHZDĝMHVWRQRZ\ZRï\ZDQH WXĝSRZF]\WDQLXPRGHOX'20 QLHPDRF]HNLZDQLDQD]DNRñF]HQLHSRELHUDQLD]DVREöZ LMHJRXĝ\FLHPRĝHVSUDZLÊ ZUDĝHQLHĝHVWURQDZF]\WXMHVLÚ V]\EFLHM KONTRA ZDARZENIE LOAD %LEOLRWHNDM4XHU\PDPHWRGÚ .load()-HVWRQDZ\ZRï\ZDQD Z]GDU]HQLDFKloadDOH]RVWDïD ]DVWÈSLRQDSU]H]PHWRGÚ.on() -DNZLG]LDïHĂZUR]G]LDOH ZSRGUR]G]LDOHķ=GDU]HQLD LQWHUIHMVXXĝ\WNRZQLNDĵ]GDrzenie loadMHVWZ\ZRï\ZDQH po wczytaniu strony wraz z jej ZV]\VWNLPL]DVREDPL REUD]\ VW\OH&66LVNU\SW\ UMIESZCZENIE SKRYPTÓW PRZED ZAMYKAJĄCYM ZNACZNIKIEM </BODY> .LHG\XPLHĂFLV]VNU\SWQD NRñFXVWURQ\ SU]HG]DP\NDMÈF\P]QDF]QLNLHP</body> NRG +70/]RVWDQLHZF]\WDQ\GR PRGHOX'20SU]HGXUXFKRPLHQLHPVNU\SWX 1DGDOEÚG]LHV]VSRW\NDïVLÚ ]Xĝ\FLHPPHWRG\.ready() SRQLHZDĝZ\NRU]\VWXMÈFHMÈ VNU\SW\EÚGÈG]LDïDÊQDZHW ZWHG\JG\]QDF]QLN<script> ]RVWDQLHSU]HQLHVLRQ\GRLQQHM F]ÚĂFLVWURQ\+70/ =GDU]DVLÚ WRQDMF]ÚĂFLHMZWHG\JG\VNU\SW VWDMHVLÚGRVWÚSQ\WDNĝHGOD LQQ\FKXĝ\WNRZQLNöZ SKRÓT DLA METODY ZDARZENIA READY W OBIEKCIE DOCUMENT $(function() { 0LHMVFHQDNRGVNU\SWX }); 3RZ\ĝHMPRĝHV]]REDF]\Ê VNU\SWSRZV]HFKQLHXĝ\ZDQ\]DPLDVWZ\ZRïDQLD $(document).ready() 3R]\W\ZQ\PHIHNWHPWZRU]HQLD NRGXM4XHU\ZHZQÈWU]WHM PHWRG\MHVWWRĝHGOD]PLHQQ\FKVWDMHVLÚGRVWÚSQ\]DNUHV QDSR]LRPLHIXQNFML =DNUHVWHQFKURQLSU]HG NROL]MDPLQD]Z]LQQ\PL VNU\SWDPLZNWöU\FKPRJÈ E\ÊZ\NRU]\VW\ZDQH]PLHQQH RWDNLFKVDP\FKQD]ZDFK :V]\VWNLHSROHFHQLD]QDMGXMÈFHVLÚZPHWRG]LH]RVWDQÈDXWRPDW\F]QLHZ\NRQDQHSRZF]\WDQLXVWURQ\ 7ÚZHUVMÚZ\ZRïDQLDEÚG]LHP\VWRVRZDÊZSU]\NïDGDFKSU]HGVWDZLRQ\FKZSR]RVWDïHMF]ÚĂFLUR]G]LDïX JQUERY 319 POBIERANIE ZAWARTOŚCI ELEMENTU 0HWRG\.html() i .text()SRELHUDMÈLXDNWXDOQLDMÈ]DZDUWRĂÊHOHPHQWöZ 1DWHMVWURQLHNRQFHQWUXMHP\VLÚQDSRELHUDQLX]DZDUWRĂFLHOHPHQWX-HĝHOL FKFHV]GRZLHG]LHÊVLÚMDNXDNWXDOQLDÊ]DZDUWRĂÊHOHPHQWX]DMU]\MGRSRGUR]G]LDïXķ8DNWXDOQLDQLHHOHPHQWöZĵ .html() .text() .LHG\PHWRGDWDMHVWXĝ\ZDQDGRSRELHUDQLD LQIRUPDFML]HOHPHQWöZZ\EUDQ\FKZM4XHU\ NRG+70/EÚG]LHSRELHUDQ\W\ONR]pierwszego HOHPHQWXZGRSDVRZDQ\P]ELRU]HZUD]]MHJR ZV]\VWNLPLHOHPHQWDPLSRWRPQ\PL .LHG\PHWRGDWDMHVWZ\NRU]\VW\ZDQDGRSRELHUDQLDWHNVWX]HOHPHQWöZ]ZUöFRQ\FKSU]H]M4XHU\ ]ZUDFD]DZDUWRĂÊNDĝGHJRHOHPHQWX]GRSDVRZDQHJR]ELRUXM4XHU\ZUD]]WHNVWHPZV]\VWNLFK HOHPHQWöZSRWRPQ\FK 1DSU]\NïDGZDUWRĂFLÈ]ZURWQÈZ\ZRïDQLD $(’ul’).html();MHVW 1DSU]\NïDGZDUWRĂFLÈ]ZURWQÈZ\ZRïDQLD $(’ul’).text();MHVW <li id=”one”><em>ĂZLHĝH</em> ğJL</li> OLLG ĵWZRĵ!RU]HV]NLSLQLRZH</li> <li id=”three”>miód</li> <li id=”four”>RFHWEDOVDPLF]Q\</li> ĂZLHĝHğJL RU]HV]NLSLQLRZH miód RFHWEDOVDPLF]Q\ 3RGF]DVJG\Z\ZRïDQLH$(’li’).html();]ZUDFD 3RGF]DVJG\Z\ZRïDQLH$(’li’).text();]ZUDFD <em>ĂZLHĝH</em> ğJL ĂZLHĝHğJLRU]HV]NLSLQLRZHPLöGRFHW EDOVDPLF]Q\ =ZUöÊXZDJÚĝHZDUWRĂFLÈ]ZURWQÈMHVWW\ONR ]DZDUWRĂÊSLHUZV]HJRHOHPHQWX<li> =DXZDĝĝH]ZUöFRQ\]RVWDïWHNVW]HZV]\VWNLFK HOHPHQWöZ<li> ïÈF]QLH]HVSDFMDPLPLÚG]\ VïRZDPL LĝHQLHPDVSDFMLPLÚG]\SRV]F]HJöOQ\PLHOHPHQWDPLOLVW\ -HĝHOLFKFHV]SREUDÊZDUWRĂÊNDĝGHJRHOHPHQWX PXVLV]Xĝ\ÊPHWRG\.each()NWöUDEÚG]LHZSURZDG]RQDZSRGUR]G]LDOHķ3UDFD]SRV]F]HJöOQ\PL HOHPHQWDPLZGRSDVRZDQ\P]ELRU]Hĵ 320 JQUERY $E\SREUDÊ]DZDUWRĂÊHOHPHQWöZ<input> lub <textarea>QDOHĝ\]DVWRVRZDÊPHWRGÚ.val() NWöUD]RVWDQLHZSURZDG]RQDZSRGUR]G]LDOH ķ=GDU]HQLDLPHWRG\IRUPXODU]DVLHFLRZHJRĵ POBIERANIE ZAWARTOŚCI 1DWHMVWURQLHSU]HGVWDZLRQRUöĝQHVSRVRE\Z\NRU]\VWDQLDPHWRG .html() i .text()QDWHMVDPHMOLĂFLH Z]DOHĝQRĂFLRGHOHPHQWöZ Z\EUDQ\FKSU]H]VHOHNWRU<ul> lub <li> JAVASCRIPT 8ZDJD0HWRGD.append()Ľ ]RVWDQLHRPöZLRQDZSRGUR]G]LDOH ķ:VWDZLDQLHHOHPHQWXĵĽSR]ZDOD QDGRGDZDQLH]DZDUWRĂFLQDVWURQLH c07/js/get-html-fragment.js var $listHTML = $(’ul’).html(); $(’ul’).append($listHTML); 6HOHNWRUWHQ]ZUDFDHOHPHQW<ul>0HWRGD.html() pobiera znajGXMÈF\VLÚZQLPFDï\NRG+70/ F]WHU\HOHPHQW\<li> 1DVWÚSQLH SREUDQD]DZDUWRĂÊMHVWGRïÈF]DQDQDNRñFXZ\EUDQ\FKHOHPHQWöZ F]\OLWXWDMĽSRLVWQLHMÈF\FKHOHPHQWDFK<li> JAVASCRIPT var $listText = $(’ul’).text(); $(’ul’).append(’<p>’ + $listText c07/js/get-text-fragment.js + ’</p>’); 6HOHNWRUWHQ]ZUDFDHOHPHQW<ul>0HWRGD.text() pobiera tekst ]HZV]\VWNLFKHOHPHQWöZSRWRPQ\FK<ul>1DVWÚSQLHSREUDQD ]DZDUWRĂÊMHVWGRïÈF]DQDQDNRñFXZ\EUDQ\FKHOHPHQWöZF]\OL WXWDMĽSRLVWQLHMÈF\PHOHPHQFLH<ul> JAVASCRIPT c07/js/get-html-node.js var $listItemHTML = $(’li’).html(); $(’li’).append(’<i>’ + $listItemHTML + ’</i>’); 6HOHNWRUWHQ]ZUDFDHOHPHQW<li>DOHPHWRGD.html() zwraca ]DZDUWRĂÊW\ONRSLHUZV]HJR]QLFK1DVWÚSQLHSREUDQD]DZDUWRĂÊ MHVWGRïÈF]DQDQDNRñFXZ\EUDQ\FKHOHPHQWöZF]\OLWXWDMĽSR LVWQLHMÈF\FKHOHPHQWDFK<li> JAVASCRIPT c07/js/get-text-node.js var $listItemText = $(’li’).text(); $(’li’).append(’<i>’ + $listItemText + ’</i>’); 6HOHNWRUWHQ]ZUDFDF]WHU\HOHPHQW\<li>0HWRGD.text() pobiera WHNVW]HZV]\VWNLFKHOHPHQWöZSRWRPQ\FK<ul>1DVWÚSQLHSREUDQD ]DZDUWRĂÊMHVWGRïÈF]DQDQDNRñFXNDĝGHJRZ\EUDQHJRHOHPHQWX <li> JQUERY 321 UAKTUALNIANIE ELEMENTÓW 3RQLĝHMZ\PLHQLRQRF]WHU\PHWRG\SU]H]QDF]RQHGRXDNWXDOQLDQLD ]DZDUWRĂFLZV]\VWNLFKHOHPHQWöZZ\EUDQ\FKZM4XHU\ .LHG\PHWRG\.html() i .text()VÈXĝ\ZDQHGR GHğQLRZDQLD XDNWXDOQLDQLD ]DZDUWRĂFL]DVWÚSXMÈ]DZDUWRĂÊ NDĝGHJRHOHPHQWX]QDMGXMÈFHJR VLÚZGRSDVRZDQ\P]ELRU]H ZUD]]GRZROQÈ]DZDUWRĂFLÈ LHOHPHQWDPLSRWRPQ\PL 0HWRG\.replaceWith() i .remove()SRZRGXMÈ]DVWÈSLHQLHLXVXQLÚFLHGRSDVRZDQ\FK HOHPHQWöZDWDNĝHLFK]DZDUWRĂFL LZV]\VWNLFKHOHPHQWöZ SRWRPQ\FK 0HWRG\.html().text() i .replaceWith()PRJÈ SRELHUDÊSDUDPHWUZSRVWDFL FLÈJXWHNVWRZHJR&LÈJWHQ PRĝHE\ÊSU]HFKRZ\ZDQ\ Z]PLHQQHM PRĝH]DZLHUDÊNRG]QDF]QLNöZ • • .LHG\GRGDMHV]NRG]QDF]QLNöZ GRPRGHOX'20XSHZQLMVLÚ RSU]HSURZDG]HQLXZVHUZHU]H SUDZLGïRZHMQHXWUDOL]DFML QLH]DXIDQHM]DZDUWRĂFL 3RGF]DVXĝ\FLDPHWRG.html() i .replaceWith()Z\VWÚSXMH QLHEH]SLHF]HñVWZRZ\NRU]\VWDQLDLFKGRSU]HSURZDG]HQLD DWDNXW\SX;66SRGREQLHMDN ZSU]\SDGNXSUDF\]ZïDĂFLZRĂFLÈinnerHTMLPRGHOX'20 :UR]G]LDOHRGSRGUR]G]LDïX ķ$WDNLW\SX;66ĵGRķ;66 ĽQHXWUDOL]DFMDLNRQWUROD ]QDF]QLNöZĵ]QDMG]LHV]ZLÚFHM LQIRUPDFMLRDWDNDFKW\SX;66 322 JQUERY .html() .text() 0HWRGDWDQDGDMHWÚVDPÈQRZÈ ]DZDUWRĂÊNDĝGHPXHOHPHQWRZL ]QDMGXMÈFHPXVLÚZGRSDVRZDQ\P]ELRU]H1RZD]DZDUWRĂÊ PRĝH]DZLHUDÊNRG+70/ 0HWRGDWDQDGDMHWÚVDPÈQRZÈ ]DZDUWRĂÊNDĝGHPXHOHPHQWRZL ]QDMGXMÈFHPXVLÚZGRSDVRZDQ\P]ELRU]H:V]HONLNRG ]QDF]QLNöZ]RVWDQLHZ\ĂZLHWORQ\MDNRWHNVW .replaceWith() .remove() .DĝG\HOHPHQW]QDMGXMÈF\ VLÚZGRSDVRZDQ\P]ELRU]H PHWRGDWD]DVWÚSXMHQRZÈ ]DZDUWRĂFLÈ3RQDGWR]ZUDFD ]DVWÈSLRQHHOHPHQW\ 0HWRGDWDXVXZDZV]\VWNLH HOHPHQW\ZGRSDVRZDQ\P ]ELRU]H UŻYCIE FUNKCJI DO UAKTUALNIENIA ZAWARTOŚCI -HĝHOLFKFHV]Z\NRU]\VWDÊoraz]PRG\ğNRZDÊ]DZDUWRĂÊDNWXDOQLH Z\EUDQ\FKHOHPHQWöZZ\PLHQLRQHPHWRG\PRJÈSREUDÊSDUDPHWU ZSRVWDFLIXQNFML)XQNFMÚWÚPRĝQD]DVWRVRZDÊGRXWZRU]HQLD QRZHM]DZDUWRĂFL3RQLĝHMSU]HGVWDZLRQRSU]\NïDGZNWöU\PWHNVW NDĝGHJRHOHPHQWXMHVWXPLHV]F]DQ\ZHZQÈWU]]QDF]QLNöZ<em> $(’li.hot’).html(function() { return ’<em>’ + $(this).text() + ’</em>’; }); 1 2 3 2 1. Polecenie returnZVND]XMHĝH]DZDUWRĂÊSRZLQQDE\Ê]ZUöFRQD SU]H]IXQNFMÚ 2. =QDF]QLNL<em>VÈXPLHV]F]RQHZRNöïWHNVWX]DZDUWRĂFLGDQHJR HOHPHQWXOLVW\ 3. 6ïRZRNOXF]RZHthisRGZRïXMHVLÚGRELHĝÈFHJRHOHPHQWXOLVW\ $(this)XPLHV]F]DHOHPHQWZQRZ\PRELHNFLHM4XHU\DE\PRĝQD E\ïRXĝ\ÊZQLPPHWRGM4XHU\ ZMIANA ZAWARTOŚCI :SRQLĝV]\PSU]\NïDG]LH PRĝQD]REDF]\ÊZ\NRU]\VWDQLH WU]HFKPHWRGSU]H]QDF]RQ\FK GRXDNWXDOQLHQLD]DZDUWRĂFL c07/js/changing-content.js JAVASCRIPT 1 2 3 VWURQ\3RGF]DVXDNWXDOQLDQLD HOHPHQWXPRĝQDXĝ\ZDÊ FLÈJXWHNVWRZHJR]PLHQQHMOXE IXQNFML $(function() { ĳOLFRQWDLQV ĴRU]HV]NLĵ ĳ WH[W ĳPOHNRPLJGDïRZHĳ $(’li.hot’).html(function() { return ’<em>’ + $(this).text() + ’</em>’; }); $(’li#one’).remove(); }); 1. 7HQZLHUV]NRGXSRZRGXMH ĝHZ\EUDQH]RVWDQÈZV]\VWNLH HOHPHQW\OLVW\]DZLHUDMÈFH VïRZRRU]HV]NL1DVWÚSQLH]D SRPRFÈPHWRG\.text() tekst ZGRSDVRZDQ\FKHOHPHQWDFK ]RVWDQLH]DVWÈSLRQ\SU]H]VïRZR POHNRPLJGDïRZH WYNIK 2. 7HQZLHUV]NRGXSRZRGXMH Z\EöUZV]\VWNLFKHOHPHQWöZ OLVW\NWöU\FKDWU\EXWclass ]DZLHUDVïRZRhot0HWRGD .html()MHVWXĝ\ZDQDGR XDNWXDOQLHQLD]DZDUWRĂFL NDĝGHJR]QLFK 0HWRGD.html() wykorzystuje IXQNFMÚGRXPLHV]F]HQLD ZHOHPHQFLH<em>]DZDUWRĂFL NDĝGHJRHOHPHQWX 6NïDGQLÚ SU]HGVWDZLRQRQDGROHVWURQ\ SROHZHM 3. 7HQZLHUV]NRGXSRZRGXMH Z\EöUHOHPHQWX<li>NWöUHJR ZDUWRĂFLÈDWU\EXWXid jest one1DVWÚSQLH]DSRPRFÈ PHWRG\remove()HOHPHQW ]RVWDMHXVXQLÚW\ 7DPHWRGDQLH Z\PDJDSDUDPHWUX 3RGF]DVSRGDZDQLDQRZHM ]DZDUWRĂFLGRNïDGQLH]DVWDQöZ VLÚMDNLH]QDNLF\WRZDQLD SRZLQQ\]RVWDÊXĝ\WH DSRVWURI\ OXEFXG]\VïöZ -HĝHOLGRïÈF]DQ\HOHPHQW]DZLHUDDWU\EXW\ WR]DZDUWRĂÊXMPLMZDSRVWURI\ 1DVWÚSQLHZ\NRU]\VWDMFXG]\VïöZZFHOXSRGDQLDZDUWRĂFL DWU\EXWöZ JQUERY 323 WSTAWIANIE ELEMENTU :VWDZLDQLHQRZHJRHOHPHQWXZ\PDJDGZöFKNURNöZ 8WZRU]HQLHQRZ\FKHOHPHQWöZZRELHNFLHM4XHU\ 8ĝ\FLHPHWRG\SU]H]QDF]RQHMGRZVWDZLDQLD]DZDUWRĂFLQDVWURQLH 0RĝQDWZRU]\ÊQRZHRELHNW\ SU]H]QDF]RQHGRSU]HFKRZ\ ZDQLDWHNVWXL]QDF]QLNöZ DQDVWÚSQLHGRGDZDÊWH RELHNW\GRGU]HZDPRGHOX '20]DSRPRFÈMHGQHM]PHWRG Z\PLHQLRQ\FKZNURNX 1. UTWORZENIE NOWYCH ELEMENTÓW W OBIEKCIE JQUERY. -HĝHOLWZRU]\V]NROHNFMÚ ]ZUDFDMÈFÈZLHOHHOHPHQWöZ PHWRG\WHEÚGÈGRGDZDÊWÚ VDPÈ]DZDUWRĂÊGRZV]\VWNLFK HOHPHQWöZZGRSDVRZDQ\P ]ELRU]H 3RQLĝV]HSROHFHQLHSRZRGXMHXWZRU]HQLH]PLHQQHMRQD]ZLH QHZ,WHPLSU]HFKRZXMHZQLHMRELHNWM4XHU\7HQRELHNW]NROHL]DZLH UDSXVW\HOHPHQW<li>ZUD]]DWU\EXWHPclassLSHZQ\PWHNVWHP YDUQHZ,WHP ĳOLFODVV ĵQHZĵ!HOHPHQWOL!ĳ 3RGF]DVGRGDZDQLD]DZDUWRĂFL GRPRGHOX'20XSHZQLM VLÚF]\ZVHUZHU]H]RVWDïD SU]HSURZDG]RQDRSHUDFMD]QHX WUDOL]RZDQLDFDïHMQLH]DXIDQHM ]DZDUWRĂFL 3DWU]UR]G]LDï RGSRGUR]G]LDïXķ$WDNLW\SX ;66ĵGRķ;66ĽQHXWUDOL]DFMD LNRQWUROD]QDF]QLNöZĵJG]LH RPöZLRQRDWDNLW\SX;66 .before() .after() <li> item </li> .prepend() .append() 3RQLĝV]HSROHFHQLHSRZRGXMHXWZRU]HQLH]PLHQQHMRQD]ZLH QHZ)UDJPHQWLSU]HFKRZXMHZQLHMRELHNWM4XHU\:W\PPRPHQFLH RELHNWM4XHU\]DZLHUDSXVW\HOHPHQW<li> YDUQHZ)UDJPHQW ĳOL!ĳ 2. UŻYCIE METODY PRZEZNACZONEJ DO WSTAWIANIA ZAWARTOŚCI NA STRONIE. *G\GRGDP\]PLHQQÈSU]H]QDF]RQÈGRSU]HFKRZ\ZDQLDQRZHM ]DZDUWRĂFL]DSRPRFÈZ\PLHQLRQ\FKSRQLĝHMPHWRGPRĝHP\GRGDÊ QRZÈZDUWRĂÊGRGU]HZDPRGHOX'20 .before() .after() 3RZRGXMHZVWDZLHQLH ]DZDUWRĂFLSU]HGZ\EUDQ\PL HOHPHQWDPL 3RZRGXMHZVWDZLHQLH]DZDUWR ĂFLSRZ\EUDQ\FKHOHPHQWDFK .prepend() .append() 3RZRGXMHZVWDZLHQLH]DZDU WRĂFLZHZQÈWU]Z\EUDQ\FK HOHPHQWöZSR]QDF]QLNX RWZLHUDMÈF\P 3RZRGXMHZVWDZLHQLH]DZDU WRĂFLZHZQÈWU]Z\EUDQ\FK HOHPHQWöZSU]HG]QDF]QLNLHP ]DP\NDMÈF\P ,VWQLHMÈSRQDGWRPHWRG\.prependTo() i .appendTo(),FKG]LDïDQLH MHVWQLHFRLQQHQLĝ.prepend() i .append() a.prepend(b)SRZRGXMH GRGDQLHbGRa a.prependTo(b)SRZRGXMH GRGDQLHaGRb 324 JQUERY a.append(b)SRZRGXMHGRGDQLH bGRa a.appendTo(b)SRZRGXMH GRGDQLHaGRb DODAWANIE NOWEJ ZAWARTOŚCI :SRQLĝV]\PSU]\NïDG]LH PRĝQD]REDF]\ÊWU]\RSHUDFMH Z\ERUXHOHPHQWöZZM4XHU\ .DĝGD]QLFKZ\NRU]\VWXMH LQQÈPHWRGÚGRPRG\ğNDFML ]DZDUWRĂFLOLVW\ FMVDGGLQJQHZFRQWHQWMV JAVASCRIPT 1 2 3 Pierwsza wstawia nowy NRPXQLNDWSU]HGOLVWÈGUXJD XPLHV]F]D]QDN+SU]HG HOHPHQWDPLRNODVLHhot QDWRPLDVWWU]HFLDZVWDZLDQRZ\ HOHPHQWQDNRñFXOLVW\ $(function() { ĳOLFRQWDLQV RU]HV]NLĵ ĳ WH[W ĳPOHNRPLJGDïRZHĳ $(’li.hot’).html(function() { return ’<em>’ + $(this).text() + ’</em>’; }); $(’li#one’).remove(); }); 1. 1DVWÈSLïRZ\EUDQLHHOHPHQWX <ul>0HWRGD.before() ]RVWDïDXĝ\WDGRZVWDZLHQLD QRZHJRDNDSLWXSU]HGOLVWÈ WYNIK 2. Polecenie wybiera wszystkie HOHPHQW\<li>NWöU\FKDWU\EXW class]DZLHUDZDUWRĂÊhot 1DVWÚSQLH]DSRPRFÈPHWRG\ .prepend()QDVWÚSXMHXPLHV]czenie znaku +SU]HGWHNVWHP 3. =RVWDMHXWZRU]RQ\QRZ\ HOHPHQW<li>NWöU\MHVW XPLHV]F]DQ\Z]PLHQQHM 1DVWÚSQLHSROHFHQLHZ\ELHUD RVWDWQLHOHPHQW<li> i za SRPRFÈPHWRG\.after() wstawia nowo przygotowany HOHPHQW JQUERY 325 POBIERANIE I USTAWIANIE WARTOŚCI ATRYBUTU =]DVWRVRZDQLHPF]WHUHFKZ\PLHQLRQ\FKSRQLĝHMPHWRGPRĝQDWZRU]\Ê DWU\EXW\OXEX]\VNLZDÊGRQLFKGRVWÚSLXDNWXDOQLDÊLFK]DZDUWRĂÊ 0HWRGÚattr() i removeAttr() PRĝQDZ\NRU]\VWDÊGRSUDF\ ]GRZROQ\PHOHPHQWHP -HĝHOLPHWRG\attr()Xĝ\ZDV] GRXDNWXDOQLHQLDQLHLVWQLHMÈFHJRDWU\EXWXVSRZRGXMH ona utworzenie wskazanego DWU\EXWXLSU]\SLVDQLHPX SRGDQHMZDUWRĂFL :DUWRĂÊDWU\EXWXclassPRĝH SU]HFKRZ\ZDÊZLÚFHMQLĝW\ONR MHGQÈQD]ZÚNODV\ UR]G]LHORQH VSDFMDPL 0HWRG\addClass() i removeClass()RIHUXMÈEDUG]R GXĝHPRĝOLZRĂFLSRQLHZDĝ SR]ZDODMÈQDGRGDZDQLHOXE usuwanie poszczególnych nazw NODVZZDUWRĂFLDWU\EXWXclass LQLHZSï\ZDMÈSU]\W\PQD SR]RVWDïHQD]Z\NODV .attr() .removeAttr() 0HWRGDWDPRĝHSREUDÊOXE XVWDZLÊRNUHĂORQ\DWU\EXWLMHJR ZDUWRĂÊ$E\SREUDÊZDUWRĂÊ DWU\EXWXQDOHĝ\SRGDÊQD]ZÚ DWU\EXWXZQDZLDVLH 7DPHWRGDSRZRGXMHXVXQLÚFLH RNUHĂORQHJRDWU\EXWX LMHJR ZDUWRĂFL :QDZLDVLHSR SURVWXSRGDMHV]QD]ZÚDWU\EXWX SU]H]QDF]RQHJRGRXVXQLÚFLD ]HOHPHQWX $(’li#one’).attr(’id’); $(’li#one’). removeAttr(’id’); $E\XDNWXDOQLÊZDUWRĂÊ DWU\EXWXWU]HEDSRGDÊ]DUöZQR QD]ZÚDWU\EXWXMDNLMHJR ZDUWRĂÊ $(’li#one’). attr(’id’,’hot’); .addClass() .removeClass() 7DPHWRGDSRZRGXMHGRGDQLH QRZHMZDUWRĂFLGRLVWQLHMÈFHM ZDUWRĂFLDWU\EXWXclass1LH SRZRGXMHQDGSLVDQLDLVWQLHMÈF\FKZDUWRĂFL 7DPHWRGDSRZRGXMHXVXQLÚFLH ZDUWRĂFL]DWU\EXWXclass 3R]RVWDïHQD]Z\NODVZDWU\EXFLHSR]RVWDMÈEH]]PLDQ 'ZLHRVWDWQLHPHWRG\WRLQQ\GREU\SU]\NïDGNWöU\SRND]XMH MDNELEOLRWHNDM4XHU\GRGDMHQLH]Z\NOHSU]\GDWQHIXQNFMHSRWU]HEQH SURJUDPLVWRPDSOLNDFMLLQWHUQHWRZ\FKSUDNW\F]QLHFRG]LHQQLH 326 JQUERY PRACA Z ATRYBUTAMI 3ROHFHQLDZSRQLĝV]\PSU]\NïDG]LHXĝ\ZDMÈPHWRGM4XHU\ ZFHOX]PLDQ\DWU\EXWöZclass i idRNUHĂORQ\FKHOHPHQWöZ +70/ .LHG\ZDUWRĂÊZ\PLHQLRQ\FK DWU\EXWöZXOHJD]PLDQLHGR HOHPHQWöZ]RVWDMÈ]DVWRVRZDQH QRZHUHJXï\&66NWöUHPRJÈ VSRZRGRZDÊ]PLDQÚLFK Z\JOÈGX c07/js/attributes.js JAVASCRIPT 1 2 3 :\NRU]\VWDQLH]GDU]HñGR Z\ZRïDQLD]PLDQZZDUWRĂFLDFKDWU\EXWXSRZRGXMÈF\FK ]DVWRVRZDQLHQRZ\FKUHJXï&66 to popularny sposób zapewQLHQLDLQWHUDNW\ZQRĂFLVWURQ\ LQWHUQHWRZHM $(function() { $(’li#three’).removeClass(’hot’); $(’li.hot’).addClass(’favorite’); $(’ul’).attr(’id’, ’group’); }); 1. Pierwsze polecenie wyV]XNXMHWU]HFLHOHPHQWOLVW\ RDWU\EXFLHidRZDUWRĂFL three LXVXZDNODVÚhot ]ZDUWRĂFLDWU\EXWXclass tego HOHPHQWX7REDUG]RZDĝQH SRQLHZDĝPDZSï\ZQDNROHMQH SROHFHQLH 2. Drugie polecenie wybiera HOHPHQW\<li>NWöU\FKDWU\EXW classPDZDUWRĂÊhot1DVWÚSQLHGRGDMHQRZÈNODVÚRQD]ZLH favorite3RQLHZDĝNURN VSRZRGRZDïXDNWXDOQLHQLH WU]HFLHJRHOHPHQWXOLVW\ELHĝÈFH SROHFHQLHZSï\ZDMHG\QLHQD GZDSLHUZV]HHOHPHQW\OLVW\ 3. 7U]HFLHSROHFHQLHZ\ELHUD HOHPHQW<ul>GRGDMHDWU\EXWid RZDUWRĂFLgroup 6SRZRGXMH WRĝH]RVWDQLHZ\ZRïDQDUHJXïD &66GRGDMÈFDGRHOHPHQWX<ul> PDUJLQHVLREUDPRZDQLH WYNIK JQUERY 327 POBIERANIE I USTAWIANIE WŁAŚCIWOŚCI CSS 0HWRGD.css() pozwala na pobieranie LXVWDZLDQLHZDUWRĂFLZïDĂFLZRĂFL&66 Aby SREUDÊZDUWRĂÊZïDĂFLZRĂFL&66QDOHĝ\ZQDZLDVLH SRGDÊQD]ZÚZïDĂFLZRĂFL -HĝHOLGRSDVRZDQ\]ELöU]DZLHUDFRQDMPQLHMGZDHOHPHQW\WR ]RVWDQLH]ZUöFRQDZDUWRĂÊW\ONR ]SLHUZV]HJRHOHPHQWX Aby XVWDZLÊZDUWRĂÊZïDĂFLZRĂFL&66MHMQD]ZÚQDOHĝ\ SRGDÊZQDZLDVLHMDNRSLHUZV]\ DUJXPHQWQDVWÚSQLHXPLHĂFLÊ SU]HFLQHNLZDUWRĂÊMDNR GUXJLDUJXPHQW:WHQVSRVöE QDVWÈSLXDNWXDOQLHQLHZV]\VWNLFKHOHPHQWöZ]QDMGXMÈF\FK VLÚZGRSDVRZDQ\P]ELRU]H ']LÚNLQRWDFMLOLWHUDïXRELHNWX LVWQLHMHPRĝOLZRĂÊSRGDQLD ZLHOXZïDĂFLZRĂFLZWHMVDPHM PHWRG]LH 8ZDJD:PHWRG]LHNWöUDMHVW Z\NRU]\VW\ZDQDGRXVWDZLHQLD SRMHG\QF]HMZïDĂFLZRĂFL QD]ZDZïDĂFLZRĂFLLMHMZDUWRĂÊ VÈUR]G]LHORQHSU]HFLQNLHP SRQLHZDĝZV]\VWNLHSDUDPHWU\ ZPHWRG]LHVÈUR]G]LHODQH SU]HFLQNDPL :QRWDFMLOLWHUDïXRELHNWX ZïDĂFLZRĂFLLLFKZDUWRĂFLVÈ UR]G]LHODQHGZXNURSNLHP JQUERY JAK POBRAĆ WŁAŚCIWOŚĆ CSS? 3RQLĝV]HSROHFHQLHSRZRGXMHSU]HFKRZ\ZDQLHZ]PLHQQHMRQD]ZLH backgroundColorNRORUXWïDSLHUZV]HJRHOHPHQWXOLVW\.RORU ]RVWDQLH]ZUöFRQ\MDNRZDUWRĂÊ5*% var backgroundColor = $(’li’).css(’background-color’); JAK USTAWIĆ WŁAŚCIWOŚĆ CSS? 3RQLĝV]HSROHFHQLHSRZRGXMHXVWDZLHQLHNRORUXWïDGODZV]\VWNLFK HOHPHQWöZOLVW\=ZUöÊXZDJÚĝHZïDĂFLZRĂÊ&66LMHMZDUWRĂÊVÈ UR]G]LHORQHSU]HFLQNLHP]DPLDVWGZXNURSNLHP $(’li’).css(’background-color’, ’#272727’); 3RGF]DVSUDF\]Z\PLDUDPLSRGDZDQ\PLZSLNVHODFKLVWQLHMH PRĝOLZRĂÊ]ZLÚNV]DQLDL]PQLHMV]DQLDZDUWRĂFL]DSRPRFÈRSHUDWRrów += i -= $(’li’).css(’padding-left’, ’+=20’); USTAWIENIE WIELU WŁAŚCIWOŚCI ,VWQLHMHPRĝOLZRĂÊXVWDZLHQLDZLHOXZïDĂFLZRĂFL]DSRPRFÈnotacji OLWHUDïXRELHNWX ZïDĂFLZRĂFLLZDUWRĂFLVÈXPLHV]F]RQHZQDZLDVLHNODPURZ\P GRRGG]LHOHQLDQD]Z\ZïDĂFLZRĂFLRGMHMZDUWRĂFLXĝ\ZDQ\MHVW GZXNURSHN SRV]F]HJöOQHSDU\VÈUR]G]LHORQHSU]HFLQNDPL SRRVWDWQLHMSDU]H QLHXPLHV]F]DVLÚSU]HFLQND • • • 3RQLĝV]HSROHFHQLHSRZRGXMHXVWDZLHQLHNRORUXWïDLURG]LQ\F]FLRQNL GODZV]\VWNLFKHOHPHQWöZOLVW\ $(’li’).css({ ’background-color’: ’#272727’, ’font-family’: ’Courier’ }); ZMIANA REGUŁ CSS :SRQLĝV]\PSU]\NïDG]LH SRND]DQRMDNPRĝQD]DVWRVRZDÊPHWRGÚ.css()GRZ\ERUX RUD]XDNWXDOQLHQLDZïDĂFLZRĂFL &66HOHPHQWöZ 6NU\SWVSUDZG]DMDNLMHVWNRORU WïDSLHUZV]HJRHOHPHQWXOLVW\SR ZF]\WDQLXVWURQ\DQDVWÚSQLH SRGOLVWÈZ\ĂZLHWODRGSRZLHGQL NRPXQLNDW .ROHMQ\PNURNLHPMHVWXDNWXDOQLHQLHNLONXZïDĂFLZRĂFL&66 ZHZV]\VWNLFKHOHPHQWDFK OLVW\:W\PFHOXXĝ\ZDQDMHVW PHWRGD.css()ZUD]]QRWDFMÈ OLWHUDïXRELHNWX c07/js/css.js JAVASCRIPT 1 2 3 $(function() { var backgroundColor = $(’li’).css(’background-color’); $(’ul’).append(’<p>Kolor to: ’ + backgroundColor + ’</p>’); $(’li’).css({ ’background-color’: ’#c5a996’, ’border’: ’1px solid #fff’, ’color’: ’#000’, ’font-family’: ’Georgia’, ’padding-left’: ’+=75’ }); }); 1. :W\PZLHUV]XNRGX WZRU]RQDMHVW]PLHQQD backgroundColor:\ELHUDQHVÈZV]\VWNLHHOHPHQW\ <li>DPHWRGD.css() ]ZUDFDZDUWRĂÊZïDĂFLZRĂFL background-color pierwszego ]QLFK WYNIK 2. .RORUWïDSLHUZV]HJR HOHPHQWXOLVW\MHVWZ\ĂZLHWODQ\ QDVWURQLH]DSRPRFÈPHWRG\ .append()NWöUÈSR]QDïHĂ ZSRGUR]G]LDOHķ:VWDZLDQLH HOHPHQWXĵ7XWDM]RVWDïDXĝ\WD ZFHOXGRGDQLD]DZDUWRĂFL]D HOHPHQWHP<ul> 3. 6HOHNWRUZ\ELHUDZV]\VWNLH HOHPHQW\<li>DQDVWÚSQLH PHWRGD.css() uaktualnia MHGQRF]HĂQLHZLHOHZïDĂFLZRĂFL NRORUWïD]RVWDMH]PLHQLRQ\ QDEUÈ]RZ\ GRGDQH]RVWDMHELDïH REUDPRZDQLHOLVW\ NRORUWHNVWX]RVWDMH]PLHQLRQ\QDF]DUQ\ URG]LQDF]FLRQNL]RVWDMH ]PLHQLRQDQD*HRUJLD GRGDWNRZHGRSHïQLHQLH]RVWDMHGRGDQHSROHZHMVWURQLH • • • • • 8ZDJD=QDF]QLHOHSV]\P UR]ZLÈ]DQLHPMHVW]PLDQD ZDUWRĂFLDWU\EXWXclass ZFHOX Z\ZRïDQLDQRZ\FKUHJXï&66 ZDUNXV]XVW\OöZ ]DPLDVW ]PLDQ\ZïDĂFLZRĂFL&66 ]SR]LRPXSOLNX-DYD6FULSW JQUERY 329 PRACA Z POSZCZEGÓLNYMI ELEMENTAMI W DOPASOWANYM ZBIORZE ']LÚNLPHWRG]LH.each()M4XHU\SR]ZDODQDRGWZRU]HQLHIXQNFMRQDOQRĂFL SÚWOLSU]HSURZDG]DMÈFHMLWHUDFMÚSU]H]Z\EUDQHHOHPHQW\ 3R]QDïHĂMXĝNLONDPHWRGM4XHU\ SU]H]QDF]RQ\FKGRXDNWXDOQLDQLDZV]\VWNLFKHOHPHQWöZ ZGRSDVRZDQ\P]ELRU]HEH] NRQLHF]QRĂFLVWRVRZDQLDSÚWOL =GDU]DMÈVLÚMHGQDNV\WXDFMH JG\WU]HEDSU]HSURZDG]LÊ LWHUDFMÚSU]H]Z\EUDQHHOHPHQW\1DMF]ÚĂFLHMEÚG]LHWR • SREUDQLHLQIRUPDFML]NDĝGH• JRHOHPHQWXZGRSDVRZDQ\P]ELRU]H SU]HSURZDG]HQLHserii akcji na SRV]F]HJöOQ\FKHOHPHQWDFK 0HWRGD.each()VïXĝ\GR Z\PLHQLRQ\FKFHOöZ3DUDPHWUHPPHWRG\.each() jest IXQNFMD0RĝHWRE\ÊIXQNFMD DQRQLPRZD MDNWXWDMSRND]DQR OXEQD]ZDQD .each() $this lub $(this) Pozwala na wykonanie SROHFHQLD SROHFHñ QDNDĝG\P HOHPHQFLHZGRSDVRZDQ\P ]ELRU]H]ZUöFRQ\PSU]H] VHOHNWRU']LDïDQLHPHWRG\ SU]\SRPLQDSÚWOÚZ-DYD6FULSW *G\PHWRGD.each() przeproZDG]DLWHUDFMÚSU]H]Z\EUDQH HOHPHQW\GRVWÚSGRELHĝÈFHJR HOHPHQWXPRĝQDX]\VNDÊ]D SRPRFÈVïRZDNOXF]RZHJR this 0HWRGDSRELHUDW\ONRMHGHQ SDUDPHWUIXQNFMÚ]DZLHUDMÈFÈ SROHFHQLDNWöUHPDMÈE\ÊZ\NRQDQHZNDĝG\PHOHPHQFLH %DUG]RF]ÚVWRPRĝQDVLÚ UöZQLHĝVSRWNDÊ]NRQVWUXNFMÈ $(this)3RZRGXMHRQDXĝ\FLH VïRZDNOXF]RZHJRthis w celu utworzenia nowej kolekcji M4XHU\]DZLHUDMÈFHMELHĝÈF\ HOHPHQW']LÚNLWHPXPHWRG\ M4XHU\PRJÈE\ÊZ\NRU]\VW\ZDQHQDHOHPHQFLHELHĝÈF\P 1 2 $(’li’).each(function() { var ids = this.id; 3 $(this).append(’ <em class=”order”>’ + ids + ’</em>’); }); 1. =ELöUZ\EUDQ\FKHOHPHQWöZ]DZLHUDZV]\VWNLHHOHPHQW\<li> 2. 0HWRGD.each()SRZRGXMH]DVWRVRZDQLHWHJRVDPHJRNRGXGR ZV]\VWNLFKZ\EUDQ\FKHOHPHQWöZ 3. )XQNFMDDQRQLPRZDMHVWZ\NRQ\ZDQDGODNDĝGHJRHOHPHQWX ]QDMGXMÈFHJRVLÚQDOLĂFLH 3RQLHZDĝthisRGQRVLVLÚGRZÚ]ïDELHĝÈFHJR WRMHĝHOLFKFHV]X]\VNDÊGRVWÚSGRZïDĂFLZRĂFL WHJRZÚ]ïDQDSU]\NïDGDWU\EXWöZid lub class HOHPHQWXOHSV]\PUR]ZLÈ]DQLHPMHVWXĝ\FLH ]Z\NïHJRNRGX-DYD6FULSW ids = this.id; 330 JQUERY 7R]QDF]QLHHIHNW\ZQLHMV]HQLĝSROHFHQLH ids = $(this).attr(’id’);NWöUHR]QDF]D zastosowanie interpretera w celu utworzenia QRZHJRRELHNWXM4XHU\DQDVWÚSQLHZ\NRU]\VWDQLH PHWRG\DE\X]\VNDÊGRVWÚSGRZïDĂFLZRĂFL UŻYCIE .EACH() 3RQLĝV]\SU]\NïDGSRZRGXMH utworzenie obiektu jQuery zaZLHUDMÈFHJRZV]\VWNLHHOHPHQW\ OLVW\QDVWURQLH 1DVWÚSQLHPHWRGD.each() jest Z\NRU]\VW\ZDQDGRSU]HSURZDG]HQLDLWHUDFMLSU]H]HOHPHQW\ listy i wykonanie funkcji DQRQLPRZHMGODNDĝGHJR]QLFK )XQNFMDDQRQLPRZDSRELHUD ZDUWRĂÊDWU\EXWXidHOHPHQWX <li>LXPLHV]F]DMÈRERNWHNVWX HOHPHQWX c07/js/each.js JAVASCRIPT 1 2 3 $(function() { $(’li’).each(function() { var ids = this.id; $(this).append(’ <span class=”order”>’ + ids + ’</span>’); }); }); 1. 6HOHNWRUWZRU]\RELHNWM4XHU\ ]DZLHUDMÈF\ZV]\VWNLHHOHPHQW\ <li>0HWRGD.each() Z\ZRïXMHIXQNFMÚDQRQLPRZÈ GODNDĝGHJRHOHPHQWXOLVW\ ]QDMGXMÈFHJRVLÚZGRSDVRZDQ\P]ELRU]H WYNIK 2. 6ïRZRNOXF]RZHthisRGZRïXMHVLÚGRZÚ]ïDELHĝÈFHJR HOHPHQWXZSÚWOL-HVWXĝ\ZDQH ZFHOXX]\VNDQLDGRVWÚSXGR ZDUWRĂFLDWU\EXWXidELHĝÈFHJR HOHPHQWXNWöU\MHVWSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLHids 3. .RQVWUXNFMD$(this) jest Z\NRU]\VW\ZDQDGRXWZRU]HQLD RELHNWXM4XHU\]DZLHUDMÈFHJR ELHĝÈF\HOHPHQWZSÚWOL 3RVLDGDQLHHOHPHQWXZRELHNFLH jQuery pozwala na stosowanie PHWRGM4XHU\ZW\PHOHPHQFLH :RPDZLDQ\PSU]\NïDG]LH PHWRGD.append()MHVWXĝ\ZDQDZFHOXGRGDQLDQRZHJR HOHPHQWX<span>ZELHĝÈF\P HOHPHQFLHOLVW\ =DZDUWRĂFLÈWHJRHOHPHQWXMHVW ZDUWRĂÊMHJRDWU\EXWXidNWöUD ]RVWDïDSREUDQDZNURNX JQUERY 331 METODY ZDARZEŃ 0HWRGD.on()MHVWXĝ\ZDQDGRREVïXJLZV]\VWNLFK]GDU]Hñ :WOHELEOLRWHNDM4XHU\]DMPXMHVLÚREVïXJÈZV]\VWNLFKZ\PLHQLRQ\FK ZF]HĂQLHMQLH]JRGQRĂFLPLÚG]\SU]HJOÈGDUNDPLLQWHUQHWRZ\PL :\NRU]\VWDQLHPHWRG\.on() QLHUöĝQLVLÚQLF]\PRGXĝ\FLD MDNLHMNROZLHNLQQHMPHWRG\ M4XHU\ • =DVWRVXMVHOHNWRUGRZ\ERUX • HOHPHQWöZ =DVWRVXMPHWRGÚ.on() ZFHOXZVND]DQLD]GDU]HQLD QDNWöUHPD]DUHDJRZDÊ NRG'RNDĝGHJRHOHPHQWX ZGRSDVRZDQ\P]ELRU]H ]RVWDMHGRGDQ\REVHUZDWRU ]GDU]Hñ 0HWRGD.on()]RVWDïDZSURZDG]RQDZZHUVMLELEOLRWHNL M4XHU\:F]HĂQLHMELEOLRWHND M4XHU\Z\NRU]\VW\ZDïDRGG]LHOQHPHWRG\GODSRV]F]HJöOQ\FK ]GDU]HñQDSU]\NïDG.click() i .focus()=LFKXĝ\FLHP PRĝHV]VLÚVSRWNDÊZVWDUV]\P NRG]LHDOHREHFQLHSRZLQLHQHĂ VWRVRZDÊPHWRGÚ.on() 1 2 3 $(’li’).on(’click’, function() { $(this).addClass(’complete’); }); 4 1. :\EUDQH]RVWDï\ZV]\VWNLHHOHPHQW\<li> 2. 0HWRGD.on()MHVWXĝ\ZDQDGRREVïXJL]GDU]HñLZ\PDJDSRGDQLD GZöFKSDUDPHWUöZ 3. 3LHUZV]\SDUDPHWUWR]GDU]HQLHQDNWöUHPD]DUHDJRZDÊNRG :RPDZLDQ\PSU]\NïDG]LHWR]GDU]HQLHclick 4. 'UXJLSDUDPHWUWRNRGNWöU\PD]RVWDÊZ\NRQDQ\SRZ\VWÈSLHQLX ZVND]DQHJR]GDU]HQLDZMDNLPNROZLHNHOHPHQFLHZGRSDVRZDQ\P ]ELRU]H0RĝHWRE\ÊIXQNFMDQD]ZDQDOXEDQRQLPRZD3RZ\ĝHM ZLG]LP\IXQNFMÚDQRQLPRZÈNWöUDGRGDMHZDUWRĂÊcompleteGR atrybutu class %DUG]LHM]DDZDQVRZDQHRSFMHPHWRG\.on()]QDMG]LHV]ZSRGUR]G]LDOHķ3DUDPHWU\GRGDWNRZHGODSURFHGXUREVïXJL]GDU]Hñĵ ZDARZENIA JQUERY 3RQLĝHMZ\PLHQLRQRQDMSRSXODUQLHMV]H]GDU]HQLDREVïXJLZDQHSU]H] PHWRGÚ.on()%LEOLRWHNDM4XHU\RIHUXMHWDNĝHSHZQHGRGDWNL XïDWZLDMÈFHSUDFÚSURJUDPLVWRP3U]\NïDGHPPRĝHE\Ê]GDU]HQLH readyZ\ZRï\ZDQHJG\VWURQDMHVWJRWRZDGRSUDF\]QLÈ'RGDWNL ]RVWDï\R]QDF]RQHJZLD]GNÈ * ,QWHUIHMVXĝ\WNRZQLNDĽfocusblurchange .ODZLDWXUDĽinputNH\GRZQkeyupkeypress 0\V]ĽclickdblclickmouseupPRXVHGRZQmouseover mousemovemouseouthover* )RUPXODU]VLHFLRZ\Ľsubmitselectchange 'RNXPHQWĽready*loadunload* 3U]HJOÈGDUNDLQWHUQHWRZDĽerrorUHVL]Hscroll 332 JQUERY ZDARZENIA :SRQLĝV]\PSU]\NïDG]LH XPLHV]F]HQLHP\V]\QDG HOHPHQWHPOLVW\SRZRGXMH ĝHZDUWRĂÊDWU\EXWXid zostaje Z\ĂZLHWORQDRERNHOHPHQWX 7RVDPRG]LHMHVLÚZWHG\JG\ Xĝ\WNRZQLNNOLNQLHHOHPHQWOLVW\ SRQLHZDĝ]GDU]HQLHmouseover QLHG]LDïDZXU]ÈG]HQLDFK Z\SRVDĝRQ\FKZHNUDQ\ GRW\NRZH =GDU]HQLHmouseoutSRZRGXMH XVXQLÚFLHW\FKGRGDWNRZ\FK LQIRUPDFML]HVWURQ\DE\ XQLHPRĝOLZLDÊGRGDZDQLH ]DZDUWRĂFLZQLHVNRñF]RQRĂÊ c07/js/events.js JAVASCRIPT 1 $(function() { var ids = ’’; var $listItems = $(’li’); 2 $listItems.on(’mouseover click’, function() { ids = this.id; $listItems.children(’span’).remove(); $(this).append(’ <span class=”priority”>’ + ids + ’</span>’); }); 3 $listItems.on(’mouseout’, function() { $(this).children(’span’).remove(); }); }); 1. 6HOHNWRUZ\V]XNXMH ZV]\VWNLHHOHPHQW\OLVW\QD VWURQLH3RQLHZDĝRWU]\PDQ\ RELHNWM4XHU\EÚG]LHXĝ\ZDQ\ ZLÚFHMQLĝW\ONRMHGHQUD]WR SU]HFKRZXMHP\JRZ]PLHQQHM o nazwie $listItems WYNIK 2. 0HWRGD.on()SRZRGXMH XWZRU]HQLHREVHUZDWRUD]GDU]HñRF]HNXMÈFHJRDĝXĝ\WNRZQLNXPLHĂFLNXUVRUP\V]\QDG HOHPHQWHPOLVW\OXEJRNOLNQLH :öZF]DVMHVWZ\ZRï\ZDQD IXQNFMDDQRQLPRZD =ZUöÊXZDJÚĝHZWHMVDPHM parze znaków cytowania SRGDQRGZD]GDU]HQLDUR]G]LHORQHVSDFMÈ ']LDïDQLHIXQNFMLDQRQLPRZHMSU]HGVWDZLDVLÚ QDVWÚSXMÈFR SREUDQLHZDUWRĂFLDWU\EXWXidGDQHJRHOHPHQWX XVXQLÚFLHHOHPHQWöZ<span>]HZV]\VWNLFK HOHPHQWöZOLVW\ GRGDQLHZDUWRĂFLDWU\EXWXidGRHOHPHQWXOLVW\ ZQRZ\PHOHPHQFLH<span> • • • 3. 0HWRGD.mouseout()SRZRGXMHZ\ZRïDQLH RSHUDFMLXVXQLÚFLDZV]\VWNLFKHOHPHQWöZSRWRPQ\FKHOHPHQWX<span>DE\XQLNQÈÊGRGDZDQLD QRZ\FKZDUWRĂFLZQLHVNRñF]RQRĂÊ JQUERY 333 OBIEKT EVENT .DĝGDIXQNFMDREVïXJL]GDU]HñRWU]\PXMHRELHNWevent =DZLHUDRQPHWRG\LZïDĂFLZRĂFLSRZLÈ]DQH]H]GDU]HQLHP NWöUHZ\VWÈSLïR 1 3RGREQLHMDNZSU]\SDGNX obiektu eventZ-DYD6FULSW obiekt jQuery eventSRVLDGD ZïDĂFLZRĂFLLPHWRG\GRVWDUF]DMÈFHLQIRUPDFMHR]GDU]HQLX NWöUHZ\VWÈSLïR -HĝHOLVSRMU]\V]QDIXQNFMÚ Z\ZRï\ZDQÈSRZ\VWÈSLHQLX ]GDU]HQLDRELHNWevent jest wyPLHQLRQ\ZQDZLDVLH3RGREQLH MDNNDĝG\LQQ\SDUDPHWUQD]ZD WDMHVWSöěQLHMZ\NRU]\VW\ZDQD ZIXQNFMLZFHOXRGZRïDQLDVLÚ GRRELHNWXevent :SU]\NïDG]LHSRSUDZHMVWURQLH Xĝ\WDMHVWOLWHUDe jako skrót GODRELHNWXevent-HGQDNMDN ZVSRPQLDQRZSRSU]HGQLP UR]G]LDOHZDUWRSDPLÚWDÊ ĝHWHQVNUöWMHVWEDUG]R F]ÚVWRZ\NRU]\VW\ZDQ\WDNĝH ZRGQLHVLHQLXGRRELHNWXerror 334 JQUERY $(’li’).on(’click’ function(e) { eventType = e.type; }); 2 3 1. 1DGDQLHRELHNWRZLeventQD]Z\SDUDPHWUX 2. 8ĝ\FLHWHMQD]Z\ZIXQNFMLZFHOXRGZRïDQLDVLÚGRRELHNWX event 3. 8]\VNDQLHGRVWÚSXGRPHWRGLZïDĂFLZRĂFLRELHNWX]DSRPRFÈ QRWDFML]NURSNÈ RSHUDWRUHOHPHQWXVNïDGRZHJR :$¥&,:2¥m 23,6 type 7\S]GDU]HQLD QDSU]\NïDGclickmouseover ZKLFK .OLNQLÚW\SU]\FLVNOXEQDFLĂQLÚW\NODZLV] data /LWHUDïRELHNWX]DZLHUDMÈF\LQIRUPDFMHGRGDWNRZH SU]HND]\ZDQHIXQNFMLJG\Z\VWÈSLïR]GDU]HQLH SU]\NïDGSRND]DQRQDVWURQLHSRSUDZHM target (OHPHQWPRGHOX'20NWöU\]DLQLFMRZDï ]GDU]HQLH pageX 3RïRĝHQLHP\V]\RGOHZHMNUDZÚG]LYLHZSRUWX pageY 3RïRĝHQLHP\V]\RGJöUQHMNUDZÚG]LYLHZSRUWX timeStamp /LF]EDPLOLVHNXQGNWöUHXSï\QÚï\RGVW\F]QLD U WDN]ZDQ\F]DVV\VWHPX8QL[ GRFKZLOL Z\VWÈSLHQLD]GDU]HQLD1LHG]LDïDZSU]HJOÈGDUFH )LUHIR[ 0(72'$ 23,6 .preventDefault() 8QLHPRĝOLZLD]DFKRZDQLHGRP\ĂOQH QD SU]\NïDGZ\VïDQLHIRUPXODU]DVLHFLRZHJR .stopPropagation() =DWU]\PXMHSURSDJRZDQLH]GDU]HñGRHOHPHQWöZ QDGU]ÚGQ\FK UŻYCIE OBIEKTU EVENT :SRQLĝV]\PSU]\NïDG]LHJG\ Xĝ\WNRZQLNNOLNQLHHOHPHQWOLVW\ GDWDZ\VWÈSLHQLD]GDU]HQLDRUD] MHJRURG]DM]RVWDMÈZ\ĂZLHWORQH SRSUDZHMVWURQLHGDQHJR HOHPHQWX $E\X]\VNDÊWHQHIHNW Z\NRU]\VWDQRGZLHZïDĂFLZRĂFL obiektu eventtimeStamp i type3LHUZV]DSRGDMH GDWÚZ\VWÈSLHQLD]GDU]HQLD QDWRPLDVWGUXJDĽMHJRURG]DM c07/js/event-object.js JAVASCRIPT 1 2 3 4 $E\XQLHPRĝOLZLÊ]DĂPLHFDQLH HOHPHQWXOLVW\ZLHORPDZSLVDPL GDW\NOLNQLÚFLHHOHPHQWXOLVW\ SRZRGXMHXVXQLÚFLH]QLHM ZV]\VWNLFKHOHPHQWöZ<span> $(function() { $(’li’).on(’click’ function(e) { $(’li span’).remove(); YDUGDWH QHZ'DWH date.setTime(e.timeStamp); var clicked = date.toDateString(); $(this).append(’<span class=”date”>’ + clicked + ’ ’ + e.type + ’</span>’); }); }); 1. :V]HONLHHOHPHQW\<span> LVWQLHMÈFHZHZQÈWU]HOHPHQWöZ <li>EÚGÈXVXQLÚWH WYNIK 2. 7ZRU]RQ\MHVWQRZ\RELHNW DateĽSU]HFKRZXMHRQGDWÚ Z\VWÈSLHQLD]GDU]HQLD 3. 'DWDZ\VWÈSLHQLD]GDU]HQLD MHVWNRQZHUWRZDQDQDSRVWDÊ FLÈJXWHNVWRZHJRDE\PRJïD E\ÊRGF]\WDQD 4. 'DWDNOLNQLÚFLDHOHPHQWXOLVW\ RUD]URG]DM]GDU]HQLD]RVWDQÈ Z\ĂZLHWORQHSRSUDZHMVWURQLH HOHPHQWX =ZUöÊXZDJÚQDWRĝHZïDĂFLZRĂÊtimeStampQLHG]LDïD ZSU]HJOÈGDUFH)LUHIR[ JQUERY 335 PARAMETRY DODATKOWE DLA PROCEDUR OBSŁUGI ZDARZEŃ 0HWRGD.on()PDGZLHRSFMRQDOQHZïDĂFLZRĂFLSR]ZDODMÈFHQDğOWURZDQLH SRF]ÈWNRZRZ\EUDQHJRZM4XHU\]ELRUXHOHPHQWöZDE\]DUHDJRZDÊW\ONR ZSRG]ELRU]HHOHPHQWöZRUD]QDSU]HND]\ZDQLH]DSRPRFÈQRWDFMLOLWHUDïX RELHNWXLQIRUPDFMLGRGDWNRZ\FKGRSURFHGXU\REVïXJL]GDU]Hñ 3RQLĝHMPRĝHV]]REDF]\ÊGZLH ZVSRPQLDQHZïDĂFLZRĂFL GRGDWNRZHNWöUHPRJÈE\Ê Xĝ\ZDQHZPHWRG]LH.on() 1DZLDVNZDGUDWRZ\ZQD]ZLH PHWRG\R]QDF]DĝHSDUDPHWU MHVWRSFMRQDOQ\ 3RPLQLÚFLHSDUDPHWUXSRGDQHJR ZQDZLDVLHNZDGUDWRZ\PQLH XQLHPRĝOLZLDG]LDïDQLDPHWRG\ 1. -HVWWR]GDU]HQLH OXEVÈ WR]GDU]HQLD QDNWöUHEÚG]LH UHDJRZDïNRG-HĝHOLNRGPD UHDJRZDÊQDZLHOH]GDU]Hñ WRPRĝQDSRGDÊUR]G]LHORQÈ VSDFMDPLOLVWÚQD]Z]GDU]Hñ QDSU]\NïDG’focus click’ R]QDF]DUHDNFMÚQD]GDU]HQLD focus i click 2. -HĝHOLNRGPDUHDJRZDÊ QD]GDU]HQLHZ\VWÚSXMÈFH tylko w podzbiorzeHOHPHQWöZ SRF]ÈWNRZRZ\EUDQ\FKSU]H] M4XHU\WRPRĝQDSRGDÊGUXJL VHOHNWRUğOWUXMÈF\HOHPHQW\ 3. )XQNFMLZ\ZRï\ZDQHM SRZ\VWÈSLHQLX]GDU]HQLD PRĝQDSU]HND]DÊLQIRUPDFMH GRGDWNRZH,QIRUPDFMHWHVÈ SU]HND]\ZDQHZUD]]RELHNWHP event e .on(zdarzenia[, selektor][, dane], function(e)); 1 4. 7RMHVWIXQNFMDNWöUDSRZLQQDE\ÊZ\NRQDQDJG\ZVND]DQH]GDU]HQLHZ\VWÈSLZMHGQ\P ]HOHPHQWöZZGRSDVRZDQ\P ]ELRU]H 336 JQUERY 2 3 5. )XQNFMDMHVWDXWRPDW\F]QLH przekazywana obiektowi event MDNRSDUDPHWUFRPRJïHĂ ]REDF]\ÊQDGZöFKSRSU]HGQLFKVWURQDFK 3DPLÚWDMĽMHĂOL Xĝ\ZDV]WHMIXQNFMLPXVLV] SRGDÊMHMQD]ZÚZQDZLDVLH 4 5 :VWDUV]\FKVNU\SWDFKM4XHU\ PRĝQDVSRWNDÊVLÚ]Z\NRU]\VWDQLHPPHWRG\.delegate() ZFHOXGHOHJRZDQLD]GDU]Hñ -HGQDNRGZHUVMLELEOLRWHNL M4XHU\SUHIHURZDQ\PSRGHMĂFLHPZGHOHJRZDQLX]GDU]Hñ PHWRGDMHVW.on() DELEGACJA ZDARZEŃ :SRQLĝV]\PSU]\NïDG]LH SURFHGXUDREVïXJL]GDU]Hñ EÚG]LHXUXFKRPLRQDJG\ Xĝ\WNRZQLNNOLNQLHHOHPHQWOLVW\ EÈGěXPLHĂFLQDGQLPNXUVRU P\V]\]Z\MÈWNLHP ostatniego HOHPHQWXOLVW\ :\ĂZLHWORQH]RVWDQÈ]DZDUWRĂÊ HOHPHQWXZ\NRU]\VWDQHJRSU]H] Xĝ\WNRZQLNDNRPXQLNDWVWDQX ]DSRPRFÈZïDĂFLZRĂFLdata RUD]URG]DM]GDU]HQLD ,QIRUPDFMHSU]HND]\ZDQHZH ZïDĂFLZRĂFLdataVÈWXWDMRSDUWHQDQRWDFMLOLWHUDïXRELHNWX FRSR]ZDODQDREVïXJÚZLHOX ZïDĂFLZRĂFL c07/js/event-delegation.js JAVASCRIPT $(function() { var listItem, itemStatus, eventType; 1 2 3 4 $(’ul’).on( ’click mouseover’, ’:not(#four)’, {status: ’important’}, function(e) { listItem = ’Element: ’ + e.target.textContent + ’<br />’; itemStatus = ’Stan: ’ + e.data.status + ’<br />’; HYHQW7\SH ĳ=GDU]HQLHĳHW\SH $(’#notes’).html(listItem + itemStatus + eventType); } ); }); WYNIK 1. 3URFHGXUDREVïXJL]GDU]HñEÚG]LHZ\ZRï\ZDQD GOD]GDU]Hñclick i mouseover 2. 3DUDPHWUselector RGğOWURZXMHHOHPHQW którego atrybut idPDZDUWRĂÊfour 3. 'RGDWNRZHGDQHNWöUHEÚGÈZ\NRU]\VW\ZDQH SU]H]SURFHGXUÚREVïXJLVÈSU]HND]\ZDQHMDNR OLWHUDïRELHNWX :RPDZLDQ\PSU]\NïDG]LHLVWQLHMHGRGDWNRZ\ HOHPHQW+70/SU]H]QDF]RQ\GRSU]HFKRZ\ZDQLD HOHPHQWöZZ\ĂZLHWODQ\FKSRGOLVWÈ 4. 3URFHGXUDREVïXJL]GDU]HñXĝ\ZDRELHNWX eventGRZ\ĂZLHWOHQLD]DZDUWRĂFLHOHPHQWX Z\NRU]\VW\ZDQHJRSU]H]Xĝ\WNRZQLNDGDQ\FK SU]HND]DQ\FKIXQNFMLRUD]URG]DMX]GDU]HQLD :\PLHQLRQHLQIRUPDFMHVÈZ\ĂZLHWODQHSRGOLVWÈ ZHOHPHQFLHRELDï\PNRORU]HWïD JQUERY 337 EFEKTY .LHG\Xĝ\ZDV]M4XHU\PRĝHV]UR]EXGRZDÊVWURQÚLQWHUQHWRZÈRUöĝQHHIHNW\ 1DWHMVWURQLHZ\PLHQLRQRQLHNWöUHHIHNW\M4XHU\SR]ZDODMÈFH QDZ\ĂZLHWODQLHOXEXNU\ZDQLH HOHPHQWöZLLFK]DZDUWRĂFL ,VWQLHMHPRĝOLZRĂÊDQLPDFML SRMDZLDQLDVLÚL]QLNDQLD DWDNĝHSU]HPLHV]F]DQLDVLÚ HOHPHQWöZ .LHG\HOHPHQWE\ïSRSU]HGQLR XNU\W\MHJRSRMDZLHQLHVLÚOXE ķZMHFKDQLHĵZZLGRNXPRĝH VSRZRGRZDÊĝHLQQHHOHPHQW\ QDVWURQLHSU]HVXQÈVLÚDE\ ]URELÊGODQLHJRPLHMVFH =NROHLNLHG\HOHPHQWMHVW XNU\ZDQ\]QLNDOXEķZ\MHĝGĝDĵ ]ZLGRNXLQQHHOHPHQW\QD VWURQLHPRJÈSU]HVXQÈÊVLÚQD PLHMVFH]DMPRZDQHZF]HĂQLHM SU]H]QLHJR 0HWRG\NWöUHSRVLDGDMÈVïRZR toggleZQD]ZLHVSUDZG]DMÈ ELHĝÈF\VWDQHOHPHQWX ZLGRF]Q\OXEXNU\W\ DQDVWÚSQLH SRZRGXMÈSU]HMĂFLHGRSU]HFLZQHJRVWDQX ,QWHUHVXMÈFDMHVWPRĝOLZRĂÊ WZRU]HQLDDQLPDFML]DSRPRFÈ &66&]ÚVWRVÈRQHV]\EV]H QLĝLFKRGSRZLHGQLNLZM4XHU\ DOHG]LDïDMÈW\ONRZQDMQRZV]\FKZHUVMDFKSU]HJOÈGDUHN JQUERY PODSTAWOWE EFEKTY 0(72'$ 23,6 VKRZ :\ĂZLHWODZ\EUDQHHOHPHQW\ .hide() 8NU\ZDZ\EUDQHHOHPHQW\ .toggle() 3U]HïÈF]DPLÚG]\Z\ĂZLHWOHQLHPLXNU\FLHPZ\EUDQ\FK HOHPHQWöZ EFEKTY POJAWIANIA SIĘ 0(72'$ 23,6 .fadeIn() 3RZROLUR]MDĂQLDZ\EUDQHHOHPHQW\NWöUHQDNRñFX VWDMÈVLÚFDïNRZLFLHZLGRF]QH .fadeOut() 3RZROLSU]\FLHPQLDZ\EUDQHHOHPHQW\NWöUHQDNRñFX VWDMÈVLÚFDïNRZLFLHSU]H]URF]\VWH .fadeTo() =PLHQLDSU]H]URF]\VWRĂÊZ\EUDQ\FKHOHPHQWöZ .fadeToggle() 8NU\ZDOXEZ\ĂZLHWODZ\EUDQHHOHPHQW\SU]H]]PLDQÚ LFKSU]H]URF]\VWRĂFL SU]HFLZLHñVWZRLFKDNWXDOQHJR VWDQX EFEKTY „WJEŻDŻANIA” 0(72'$ 23,6 .slideUp() :\ĂZLHWODZ\EUDQHHOHPHQW\]HIHNWHPZĂOL]JX VOLGH'RZQ 8NU\ZDZ\EUDQHHOHPHQW\]HIHNWHPZĂOL]JX .slideToggle() :\ĂZLHWODOXEXNU\ZDZ\EUDQHHOHPHQW\]HIHNWHP ZĂOL]JX ZNLHUXQNXSU]HFLZQ\PGRLFKDNWXDOQHJR VWDQX WŁASNE EFEKTY 0(72'$ 23,6 .delay() 2SöěQLDZ\NRQDQLHNROHMQ\FKHOHPHQWöZZNROHMFH .stop() =DWU]\PXMHDQLPDFMÚMHĂOLMHVWDNWXDOQLHRGWZDU]DQD .animate() 7ZRU]\ZïDVQHDQLPDFMH SRGUR]G]LDïķ$QLPDFMD ZïDĂFLZRĂFL&ĵ PODSTAWOWE EFEKTY :SRQLĝV]\PSU]\NïDG]LH OLVWDHOHPHQWöZSRMDZLDVLÚ ZZLGRNXSRGF]DVZF]\W\ZDQLD VWURQ\.OLNQLÚFLHHOHPHQWX SRZRGXMHMHJR]QLNQLÚFLH :U]HF]\ZLVWRĂFLHOHPHQW\ VÈZF]\W\ZDQHZ]Z\Nï\ VSRVöEZUD]]SR]RVWDïÈF]ÚĂFLÈ VWURQ\DQDVWÚSQLHQDW\FKPLDVW XNU\ZDQH]DSRPRFÈNRGX -DYD6FULSW c07/js/effects.js JAVASCRIPT 1 2 3 3RXNU\FLXSRZROLSRMDZLDMÈ VLÚZZLGRNX:WHQVSRVöE SR]RVWDQÈZLGRF]QHQDZHW MHĂOLZSU]HJOÈGDUFHZ\ïÈF]RQR REVïXJÚ-DYD6FULSW $(function() { ĳKĳ KLGH VOLGH'RZQ var $li = $(’li’); $li.hide().each(function(index) { $(this).delay(700 * index).fadeIn(700); }); $li.on(’click’, function() { $(this).fadeOut(700); }); }); 1. :SLHUZV]\PSROHFHQLX VHOHNWRUZ\ELHUDHOHPHQW<h2> LXNU\ZDJRDE\QDVWÚSQLH PöJïE\ÊDQLPRZDQ\(IHNW Z\EUDQ\GRZ\ĂZLHWOHQLD QDJïöZNDMHVWX]\VNLZDQ\]D SRPRFÈPHWRG\VOLGH'RZQ =ZUöÊXZDJÚQDVSRVöE ïÈF]HQLDPHWRGĽQLHWU]HED SRQRZQLHZ\ELHUDÊHOHPHQWöZ GODNDĝGHJR]DGDQLD WYNIK 2. :GUXJLHMF]ÚĂFLNRGX SROHFHQLDSRZRGXMÈSRMDZLDQLH VLÚQDVWURQLHHOHPHQWöZOLVW\ MHGHQSRGUXJLP3RQLHZDĝ HOHPHQW\PDMÈVLÚSRMDZLÊ QDVWURQLHZF]HĂQLHMPXV]È E\ÊXNU\WH1DVWÚSQLHPHWRGD .each() jest wykorzystywana GRLWHUDFMLSU]H]SRV]F]HJöOQH HOHPHQW\<li>0RĝHV]]REDF]\ÊWXWDMZ\ZRïDQLHIXQNFML DQRQLPRZHM :HZQÈWU]IXQNFMLDQRQLPRZHM ZïDĂFLZRĂÊindexG]LDïDZFKDUDNWHU]HOLF]QLNDZVND]XMÈFHJR DNWXDOQ\HOHPHQW<li> 0HWRGD.delay()SRZRGXMH SDX]ÚPLÚG]\Z\ĂZLHWODQLHP NROHMQ\FKHOHPHQWöZOLVW\ 2SöěQLHQLHMHVWREOLF]DQH SU]H]SRPQRĝHQLHZDUWRĂFL indexSU]H]OLF]EÚPV ZSU]HFLZQ\PUD]LHZV]\VWNLH HOHPHQW\OLVW\SRNDĝÈVLÚ MHGQRF]HĂQLH 1DVWÚSQLH PHWRGDfadeIn() pokazuje GDQ\HOHPHQWQDVWURQLH 3. :RVWDWQLHMF]ÚĂFLNRGX WZRU]RQ\MHVWREVHUZDWRU]GDU]HñRF]HNXMÈF\QDNOLNQLÚFLH HOHPHQWXSU]H]Xĝ\WNRZQLND 3RNOLNQLÚFLXHOHPHQWSRZROL ]QLND]OLVW\ HIHNWWUZDRNRïR PV JQUERY 339 ANIMACJA WŁAŚCIWOŚCI CSS 0HWRGD.animate()SR]ZDODQDWZRU]HQLHZïDVQ\FKHIHNWöZ LDQLPDFMLSU]H]]PLDQÚZïDĂFLZRĂFL&66 ,VWQLHMHPRĝOLZRĂÊDQLPDFMLGRZROQHMZïDĂFLZRĂFL&66NWöUHM ZDUWRĂÊPRĝHE\ÊZ\UDĝRQD ZSRVWDFLOLF]E\QDSU]\NïDG heightZLGWK i IRQWVL]H 1LHPRĝQDDQLPRZDÊW\FK ZïDĂFLZRĂFLNWöU\FKZDUWRĂFLÈ EÚG]LHFLÈJWHNVWRZ\QD SU]\NïDGfont-family lub text-transform :ïDĂFLZRĂFL&66VÈSRGDZDQHZQRWDFMLFDPHO&DVH DZLÚFSLHUZV]HVïRZRMHVW ]DSLV\ZDQHPDï\PLOLWHUDPL QDWRPLDVWZNDĝG\PNROHMQ\P SLHUZV]DOLWHUDMHVWGXĝD QDSU]\NïDGZïDĂFLZRĂÊ border-top-left-radius SU]\ELHU]HSRVWDÊ borderTopLeftRadius :ïDĂFLZRĂFL&66VÈSRGDZDQH ]DSRPRFÈQRWDFMLOLWHUDïX RELHNWX MDNPRĝHV]]REDF]\Ê QDVWURQLHSRSUDZHM 0HWRGD PRĝHUöZQLHĝSREUDÊWU]\ RSFMRQDOQHSDUDPHWU\MDN SU]HGVWDZLRQRSRQLĝHM .animate({ 6W\OHSU]H]QDF]RQHGR]PLDQ\ }[, speed][, easing][, complete]); 1 1. 3DUDPHWUspeed wskazuje GïXJRĂÊDQLPDFMLZ\UDĝRQÈ ZPLOLVHNXQGDFK 0RĝQD UöZQLHĝXĝ\ÊVïöZNOXF]RZ\FK VORZ i fast 2 2. 3DUDPHWUeasingPRĝH SU]\MÈÊGZLHZDUWRĂFLlinear V]\ENRĂÊDQLPDFMLSR]RVWDMH VWDïD LVZLQJ V]\ENRĂÊ DQLPDFML]ZLÚNV]DVLÚZĂURGNX SU]HMĂFLDQDWRPLDVWQDSRF]ÈWNXLNRñFXMHVWZROQLHMV]D 3 3. 3DUDPHWUcomplete jest Xĝ\ZDQ\ZFHOXZ\ZRïDQLD IXQNFMLNWöUDSRZLQQDE\Ê XUXFKRPLRQDSR]DNRñF]HQLX DQLPDFML7RWDN]ZDQDfunkcja Z\ZRïDQLD]ZURWQHJR PRZYKŁADY STOSOWANYCH W JQUERY ODPOWIEDNIKÓW NAZW WŁAŚCIWOŚCI CSS bottogm , left , right , top , backgroundPositionX , backgroundPositionY , height , ZLGWK, maxHeight , minHeight , maxWidth , minWidth , margin , marginBottom , marginLeft , marginRight , marginTop , outlineWidth , padding , paddingBottom , paddingLeft , paddingRight , paddingTop , IRQW6L]H, letterSpacing , ZRUG6SDFLQJ, lineHeight , textIndent , borderRadius , borderWidth , borderBottomWidth , borderLeftWidth , borderRightWidth , borderTopWidth , borderSpacing . 340 JQUERY UŻYCIE ANIMACJI :SRQLĝV]\PSU]\NïDG]LH PHWRGD.animate()MHVW Xĝ\ZDQDZFHOXVWRSQLRZHM ]PLDQ\ZDUWRĂFLGZöFK ZïDĂFLZRĂFL&662ELHPDMÈ ZDUWRĂFLZ\UDĝRQHOLF]ERZR opacity i padding-left .LHG\Xĝ\WNRZQLNNOLNQLH HOHPHQWOLVW\HOHPHQWSRZROL ]QLNQLHDWHNVW]RVWDQLHSU]HVXQLÚW\ZSUDZÈVWURQÚ (IHNW WUZDPV 3R]DNRñF]HQLX DQLPDFMLQDVWÚSXMHXUXFKRPLHQLHIXQNFMLZ\ZRïDQLD]ZURWQHJRNWöUDXVXZDHOHPHQW c07/js/animate.js JAVASCRIPT 1 2 3 4 ,VWQLHMHPRĝOLZRĂÊ]ZLÚNV]HQLD OXE]PQLHMV]HQLDZDUWRĂFL OLF]ERZHMRSRGDQÈZDUWRĂÊ :RPDZLDQ\PSU]\NïDG]LH Z\UDĝHQLH+=80VïXĝ\GR]ZLÚNV]HQLDZDUWRĂFLZïDĂFLZRĂFL paddingRSLNVHOL :FHOX MHM]PQLHMV]HQLDRSLNVHOL QDOHĝ\Xĝ\Ê-=80 $(function() { $(’li’).on(’click’, function() { $(this).animate({ opacity: 0.0, paddingLeft: ’+=80’ }, 500, function() { $(this).remove(); }); }); }); 1. :\EUDQHVÈZV]\VWNLH HOHPHQW\OLVW\*G\Xĝ\WNRZQLN NOLNQLHMHGHQ]QLFKQDVWÚSXMH XUXFKRPLHQLHIXQNFMLDQRQLPRZHM:HZQÈWU]IXQNFML $(this)WZRU]\QRZ\RELHNW M4XHU\SU]HFKRZXMÈF\HOHPHQW NOLNQLÚW\SU]H]Xĝ\WNRZQLND 1DVWÚSQLHPHWRGD.animate() ]RVWDMHZ\ZRïDQDZQRZR XWZRU]RQ\PRELHNFLHM4XHU\ WYNIK 2. :HZQÈWU]PHWRG\ .animate()]PLDQLHXOHJDMÈ ZïDĂFLZRĂFLopacity i paddingLeft:DUWRĂÊ ZïDĂFLZRĂFLpaddingLeft MHVW]ZLÚNV]DQDRSLNVHOL FRVWZDU]DZUDĝHQLHĝHWHNVW SU]HVXZDVLÚZSUDZÈVWURQÚ SRGF]DVMHJR]DQLNDQLD 3. 0HWRGD.animate()PDGZD GRGDWNRZHSDUDPHWU\3LHUZV]\ RNUHĂODGïXJRĂÊDQLPDFMLZ\UDĝRQÈZPLOLVHNXQGDFK WXWDMWR PV 1DWRPLDVWGUXJLWR IXQNFMDDQRQLPRZDZVND]XMÈFD WRFRSRZLQQRVLÚ]GDU]\ÊSR ]DNRñF]HQLXDQLPDFML 4. 3R]DNRñF]HQLXDQLPDFML IXQNFMDZ\ZRïDQLD]ZURWQHJR SRZRGXMHXVXQLÚFLHHOHPHQWX OLVW\]HVWURQ\Xĝ\ZDMÈFGRWHJR PHWRG\.remove() -HĝHOLFKFHV]SU]HSURZDG]LÊ DQLPDFMÚNRORUöZ]DPLDVW PHWRG\.animate()Z\NRU]\VWDM GRWHJRFHOXZW\F]NÚM4XHU\ https://github.com/jquery/ jquery-color/ JQUERY 341 NAWIGACJA PO MODELU DOM *G\Z\ELHU]HP\HOHPHQW\ZM4XHU\Z\PLHQLRQHWXWDMPHWRG\PRĝQD Z\NRU]\VWDÊZFHOXX]\VNDQLDGRVWÚSXGRZÚ]ïöZLQQ\FKHOHPHQWöZ SRZLÈ]DQ\FK]SRF]ÈWNRZRZ\EUDQ\PL .DĝGDPHWRGDZ\V]XNXMH HOHPHQW\NWöUHPDMÈUöĝQH UHODFMH]DNWXDOQLHZ\EUDQ\PL QDSU]\NïDGVÈHOHPHQWDPL QDGU]ÚGQ\PLOXESRWRPQ\PL DNWXDOQLHZ\EUDQ\FK 0HWRG\ğQG i .closest() Z\PDJDMÈSRGDQLDDUJXPHQWX ZSRVWDFLVHOHNWRUDVW\OX&66 :SU]\SDGNXSR]RVWDï\FK PHWRGVHOHNWRUVW\OX&66MHVW RSFMRQDOQ\-HĝHOLVHOHNWRU ]RVWDQLHSRGDQ\GRSDVRZDQH PXV]ÈE\ÊPHWRGDLVHOHNWRU DE\HOHPHQWPöJï]RVWDÊ GRGDQ\GRZ\EUDQ\FK 1DSU]\NïDGMHĂOLQDSRF]ÈWNX Z\EUDQ\MHVWW\ONRMHGHQ HOHPHQWOLVW\WR]DSRPRFÈ PHWRG\.siblings()GR]ELRUX PRĝQDGRïÈF]\ÊSR]RVWDïH HOHPHQW\OLVW\ -HĝHOLZPHWRG]LHEÚG]LH SRGDQ\VHOHNWRUQDSU]\NïDG .siblings(’.important’) WRZ\V]XNDQH]RVWDQÈW\ONRWH HOHPHQW\UöZQRU]ÚGQHNWöU\FK atrybut classPDZDUWRĂÊ important 342 JQUERY METODY WYMAGAJĄCE SELEKTORA 0(72'$ 23,6 ğQG :V]\VWNLHHOHPHQW\Z]ELRU]HDNWXDOQLHZ\EUDQ\FK ZNWöU\FKGRSDVRZDQRVHOHNWRU .closest() 1DMEOLĝV]\HOHPHQWQDGU]ÚGQ\ QLHW\ONREH]SRĂUHGQL GRSDVRZDQ\GRVHOHNWRUD METODY NIEWYMAGAJĄCE SELEKTORA 0(72'$ 23,6 .parent() %H]SRĂUHGQLHOHPHQWQDGU]ÚGQ\DNWXDOQLHZ\EUDQHJR .parents() :V]\VWNLHHOHPHQW\QDGU]ÚGQHDNWXDOQLHZ\EUDQHJR .children() :V]\VWNLHHOHPHQW\SRWRPQHDNWXDOQLHZ\EUDQHJR .siblings() :V]\VWNLHHOHPHQW\UöZQRU]ÚGQHDNWXDOQLHZ\EUDQHJR .next() 1DVWÚSQ\HOHPHQWUöZQRU]ÚGQ\DNWXDOQLHZ\EUDQHJR .nextAll() :V]\VWNLHQDVWÚSQHHOHPHQW\UöZQRU]ÚGQHDNWXDOQLH Z\EUDQHJR .prev() 3RSU]HGQLHOHPHQWUöZQRU]ÚGQ\DNWXDOQLHZ\EUDQHJR .prevAll() :V]\VWNLHSRSU]HGQLHHOHPHQW\UöZQRU]ÚGQHDNWXDOQLH Z\EUDQHJR -HĝHOLGRSDVRZDQ\]ELöUSRF]ÈWNRZR]DZLHUDZLHOHHOHPHQWöZ WRZ\PLHQLRQHPHWRG\EÚGÈG]LDïDï\ZHZV]\VWNLFKZ\EUDQ\FK HOHPHQWDFK FRPRĝHVNXWNRZDÊGRĂÊG]LZQ\PLNROHNFMDPLHOHPHQWöZ =DQLPSU]\VWÈSLV]GRQDZLJDFMLSRPRGHOX'20PRĝHV] ]DZÚ]LÊ]ELöUZ\EUDQ\FKHOHPHQWöZ :WOHELEOLRWHNDM4XHU\REVïXJXMHQLHVSöMQRĂFLPLÚG]\SU]HJOÈGDUNDPLZ]DNUHVLHQDZLJDFMLSRPRGHOX'20 QDSU]\NïDGZÚ]ï\]QDNöZ RGVWÚSXGRGDZDQHZQLHNWöU\FKSU]HJOÈGDUNDFK NAWIGACJA .LHG\VWURQDMHVWZF]\W\ZDQD OLVWDSR]RVWDMHXNU\WDDGR QDJïöZND]RVWDMHGRGDQHïÈF]H LQIRUPXMÈFHXĝ\WNRZQLNDRPRĝOLZRĂFLMHMZ\ĂZLHWOHQLD ÈF]HMHVWGRGDZDQHZQDJïöZNX-HĝHOLXĝ\WNRZQLNNOLNQLH JG]LHNROZLHNZHOHPHQFLH<h2> WRQDVWURQLHSRMDZLVLÚHOHPHQW <ul> 3RQDGWRZV]\VWNLHHOHPHQW\ <li>SRVLDGDMÈFHDWU\EXW classRZDUWRĂFLhotRWU]\PDMÈ ZDUWRĂÊGRGDWNRZÈcomplete c07/js/traversing.js JAVASCRIPT $(function() { var $h2 = $(’h2’); $(’ul’).hide(); KDSSHQG ĳD!SRNDĝD!ĳ 1 2 3 4 5 6 $h2.on(’click’, function() { $h2.next() .fadeIn(500) .children(’.hot’) .addClass(’complete’); KğQG ĳDĳ IDGH2XW }); }); 1. =GDU]HQLHclickZHOHPHQcie <h2>VSRZRGXMHZ\ZRïDQLH IXQNFMLDQRQLPRZHM 2. 0HWRGD.next()MHVWXĝ\ZDQDZFHOXZ\ERUXQDVWÚSQHJR HOHPHQWXUöZQRU]ÚGQHJRSR <h2>F]\OLZRPDZLDQ\P SU]\NïDG]LHHOHPHQWX<ul> WYNIK 3. (OHPHQW<ul>SRMDZLDVLÚ ZZLGRNX 4. 0HWRGD.children() Z\ELHUDZV]\VWNLHHOHPHQW\ SRWRPQHHOHPHQWX<ul> a selektor wskazuje wybór tylko W\FKNWöU\FKZDUWRĂÊDWU\EXWX class wynosi hot 5. 0HWRGD.addClass() jest QDVWÚSQLHXĝ\ZDQDZFHOX GRGDQLDZVND]DQ\PHOHPHQWRP <li> klasy complete=REDF]\ïHĂWHUD]MDNïÈF]\ÊPHWRG\ LSRUXV]DÊVLÚPLÚG]\ZÚ]ïDPL 6. :RVWDWQLPNURNXPHWRGD ğQG PRĝHE\ÊZ\NRU]\VWDQD GRZ\ERUXHOHPHQWX<a>EÚGÈFHJRHOHPHQWHPSRWRPQ\P <h2>LMHJRXNU\FLDSRQLHZDĝ ZW\PPRPHQFLHOLVWDMHVW Z\ĂZLHWORQDXĝ\WNRZQLNRZL JQUERY 343 DODAWANIE I FILTROWANIE ELEMENTÓW W DOPASOWANYM ZBIORZE 3RZ\EUDQLXHOHPHQWöZZM4XHU\GR]ELRUXPRĝQDGRGDÊ NROHMQHHOHPHQW\OXEğOWURZDÊLVWQLHMÈFHDE\W\PVDP\P SUDFRZDÊMHG\QLH]SRG]ELRUHPHOHPHQWöZ 0HWRGD.add() pozwala na GRGDQLHNROHMQ\FKHOHPHQWöZ GRZF]HĂQLHMZ\EUDQ\FK :GUXJLHMWDEHOLSRSUDZHM VWURQLHZ\PLHQLRQRPHWRG\ SR]ZDODMÈFHQDWZRU]HQLHSRG]ELRUXQDSRGVWDZLHSLHUZRWQLH Z\EUDQ\FKHOHPHQWöZ 0HWRG\SRELHUDMÈSDUDPHWU w postaci kolejnego selektora L]ZUDFDMÈSU]HğOWURZDQ\ GRSDVRZDQ\]ELöU (OHPHQW\WDEHOLUR]SRF]\QDMÈFH VLÚRGGZXNURSNDPRJÈE\Ê Xĝ\ZDQHZV]ÚG]LHWDPJG]LHVÈ VWRVRZDQHVHOHNWRU\VW\OX&66 6HOHNWRU\:not() i :has() SRELHUDMÈSDUDPHWUZSRVWDFL LQQHJRVHOHNWRUDVW\OX&663RQDGWRLVWQLHMHVHOHNWRURQD]ZLH :contains()NWöU\SR]ZDOD QDZ\V]XNDQLHHOHPHQWöZ ]DZLHUDMÈF\FKRNUHĂORQ\WHNVW 0HWRGD.is() pozwala na Xĝ\FLHLQQHJRVHOHNWRUDZFHOX VSUDZG]HQLDF]\DNWXDOQLH Z\EUDQHHOHPHQW\VÈGRSDVRZDQHGRZDUXQNX-HĝHOL WDNZDUWRĂFLÈ]ZURWQÈEÚG]LH true7DPHWRGDVSUDZG]DVLÚ ZNRQVWUXNFMDFKZDUXQNRZ\FK 344 JQUERY DODAWANIE ELEMENTÓW DO WCZEŚNIEJ WYBRANYCH 0(72'$ 23,6 .add() 3RZRGXMHGRGDQLHZVND]DQHJRHOHPHQWXGRZF]HĂQLHM Z\EUDQ\FK FILTROWANIE ZA POMOCĄ DRUGIEGO SELEKTORA 0(72'$6(/(.725 23,6 ğOWHU :\V]XNXMHZGRSDVRZDQLXHOHPHQW\NWöUHVÈ GRSDVRZDQHGRGUXJLHJRVHOHNWRUD ğQG :GRSDVRZDQ\P]ELRU]HZ\V]XNXMHHOHPHQW\ SRWRPQHGRSDVRZDQHGRVHOHNWRUD .not() / :not() :\V]XNXMHHOHPHQW\NWöUHQLHVÈGRSDVRZDQH GRVHOHNWRUD .has() / :has() :GRSDVRZDQ\P]ELRU]HZ\V]XNXMHHOHPHQW\ NWöUHPDMÈHOHPHQW\SRWRPQHGRSDVRZDQH GRVHOHNWRUD :contains() :\ELHUDZV]\VWNLHHOHPHQW\]DZLHUDMÈFH RNUHĂORQ\WHNVW ZLHONRĂÊOLWHUSDUDPHWUX PD]QDF]HQLH 'ZDSRQLĝV]HVHOHNWRU\VÈRGSRZLHGQLNDPL $(’li’).not(’.hot’).addClass(’cool’); $(’li:not(.hot)’).addClass(’cool’); :SU]HJOÈGDUNDFKREVïXJXMÈF\FKPHWRG\querySelector() i querySelectorAll()Xĝ\FLH:not()MHVWV]\EV]HQLĝ.not() QDWRPLDVW:has()MHVWV]\EV]HQLĝ.has() SPRAWDZANIE ZAWARTOŚCI 0(72'$ 23,6 .is() 6SUDZG]DF]\DNWXDOQLHZ\EUDQHHOHPHQW\VÈGRSDVRZDQH GRZDUXQNX ZDUWRĂFLÈ]ZURWQÈPHWRG\MHVWZDUWRĂÊ ERRORZVND UŻYCIE FILTRÓW :SRQLĝV]\PSU]\NïDG]LHZ\ELHUDQHVÈZV]\VWNLHHOHPHQW\ OLVW\1DVWÚSQLH]DSRPRFÈ UöĝQ\FKğOWUöZZ\ELHUDQHVÈ SRG]ELRU\SU]H]QDF]RQHGR GDOV]HMSUDF\ :SU]\NïDG]LHZ\NRU]\VWDQR RELHPHWRG\ğOWURZDQLDMDN UöZQLHĝSVHXGRVHOHNWRUVW\OX &66F]\OL:not() FMVğOWHUVMV JAVASCRIPT 1 2 3 *G\ğOWUZ\ELHU]HSRG]ELöU HOHPHQWöZLQQHPHWRG\M4XHU\ VÈXĝ\ZDQHGRXDNWXDOQLHQLD Z\EUDQ\FKHOHPHQWöZ var $listItems = $(’li’); OLVW,WHPVğOWHU ĳKRWODVWĳ UHPRYH&ODVV ĳKRWĳ $(’li:not(.hot)’).addClass(’cool’); $listItems.has(’em’).addClass(’complete’); 4 $listItems.each(function() { var $this = $(this); if ($this.is(’.hot’)) { WKLVSUHSHQG ĳ3ULRU\WHWRZHĳ } }); 5 $(’li:contains("miód”)’).append(’ (lokalny)’); 1. 0HWRGDğOWHU wyszukuje RVWDWQLHOHPHQWOLVW\NWöUHJR ZDUWRĂFLÈDWU\EXWXclass jest hot1DVWÚSQLHXVXZDZDUWRĂÊ ]WHJRDWU\EXWX WYNIK 2. 6HOHNWRU:not()MHVWXĝ\ZDQ\ ZHZQÈWU]VHOHNWRUDM4XHU\GR Z\V]XNLZDQLDHOHPHQWöZ<li> EH]ZDUWRĂFLhot w atrybucie classDQDVWÚSQLHGRGDMH ZDUWRĂÊcool 3. 0HWRGD.has() wyszukuje HOHPHQW<li>]DZLHUDMÈF\ HOHPHQW<em>DQDVWÚSQLH GRGDMHZDUWRĂÊcompleteGR atrybutu class 4. 0HWRGD.each() SU]HSURZDG]DLWHUDFMÚSU]H] HOHPHQW\OLVW\(OHPHQWELHĝÈF\ jest buforowany w obiekcie M4XHU\0HWRGD.is() VSUDZG]DF]\HOHPHQW<li> PDDWU\EXWclassRZDUWRĂFL hot-HĝHOLWDNWRQDSRF]ÈWNX HOHPHQWXXPLHV]F]DQ\MHVWWHNVW 3ULRU\WHWRZH 5. 6HOHNWRU:contains VSUDZG]DF]\HOHPHQW<li> zawiera tekst miódLGRïÈF]D tekst (lokalny)QDNRñFXWHJR HOHPHQWX JQUERY 345 WYSZUKIWANIE ELEMENTÓW WEDŁUG KOLEJNOŚCI .DĝG\HOHPHQW]ZUDFDQ\SU]H]VHOHNWRUM4XHU\PDSU]\SLVDQ\QXPHULQGHNVX NWöU\PRĝHE\ÊZ\NRU]\VWDQ\GRğOWURZDQLDZ\EUDQ\FKHOHPHQWöZ 2ELHNWjQueryMHVWF]DVDPL RNUHĂODQ\PLDQHPRELHNWX w stylu tablicySRQLHZDĝ ZV]\VWNLPHOHPHQWRPSU]\SLVXMHOLF]E\NWöUHQDVWÚSQLH VÈ]ZUDFDQHSU]H]VHOHNWRU :VSRPQLDQDOLF]EDMHVW QXPHUHPLQGHNVXFRR]QDF]D ĝHQXPHURZDQLH]DF]\QDVLÚ RG]HUD :\EUDQHHOHPHQW\PRĝQD ğOWURZDÊQDSRGVWDZLHZDUWRĂFLLQGHNVXZ\NRU]\VWXMÈF Z\PLHQLRQHWXWDMPHWRG\OXE GRGDWNRZHVHOHNWRU\VW\OX&66 RIHURZDQHSU]H]M4XHU\ 0HWRG\VÈVWRVRZDQHZHOHPHQWDFKZ\EUDQ\FKZM4XHU\ QDWRPLDVWVHOHNWRU\MDNRF]ÚĂÊ VHOHNWRUöZVW\OX&66 3RSUDZHMVWURQLHPRĝHV] ]REDF]\ÊVHOHNWRUZ\ELHUDMÈF\ ZV]\VWNLHHOHPHQW\<li> ]OLVW\Xĝ\ZDQHMZW\P UR]G]LDOH:WDEHOLZ\PLHQLRQR SRV]F]HJöOQHHOHPHQW\OLVW\ RUD]RGSRZLDGDMÈFHLPQXPHU\ LQGHNVX3U]\NïDGQDNROHMQHM stronie pokazuje wykorzystanie W\FKQXPHUöZGRZ\ERUX HOHPHQWöZOLVW\LXDNWXDOQLDQLD LFKDWU\EXWöZclass 346 JQUERY WYSZUKIWANIE ELEMENTÓW WEDŁUG NUMERU INDEKSU 0(72'$6(/(.725 23,6 .eq() (OHPHQWGRSDVRZDQ\GRQXPHUXLQGHNVX :lt() (OHPHQWRQXPHU]HLQGHNVXPQLHMV]\PQLĝ SRGDQ\ :gt() (OHPHQWRQXPHU]HLQGHNVXZLÚNV]\PQLĝ SRGDQ\ $(’li’) INDEKS +70/ 0 <li id=”one” class=”hot”><em>ĂZLHĝH</em> ğJL</li> 1 OLLG ĵWZRĵFODVV ĵKRWĵ!RU]HV]NLSLQLRZH</li> 2 <li id=”three” class=”hot”>miód</li> 3 <li id=”four”>RFHWEDOVDPLF]Q\</li> UŻYCIE WARTOŚCI INDEKSU 7HQSU]\NïDGSRND]XMHMDN M4XHU\QDGDMHQXPHU\LQGHNVX SRV]F]HJöOQ\PHOHPHQWRP ]QDMGXMÈF\PVLÚZGRSDVRZDQ\P]ELRU]H 6HOHNWRU\:lt() i :gt()DWDNĝH PHWRGD.eq()VÈXĝ\ZDQH GRZ\V]XNDQLDHOHPHQWöZ QDSRGVWDZLHLFKQXPHUöZ LQGHNVX c07/js/index-numbers.js JAVASCRIPT 1 2 3 :NDĝG\PGRSDVRZDQ\P HOHPHQFLH]PLHQLDQDMHVW ZDUWRĂÊDWU\EXWXclass $(function() { $(’li:lt(2)’).removeClass(’hot’); $(’li’).eq(0).addClass(’complete’); $(’li:gt(2)’).addClass(’cool’); }); 1. 6HOHNWRU:lt()MHVWXĝ\ZDQ\ ZVHOHNWRU]HGRZ\ERUXHOHPHQWöZOLVW\RQXPHU]HLQGHNVX PQLHMV]\PQLĝ21DVWÚSQLH ]LFKDWU\EXWXclass zostaje XVXQLÚWDZDUWRĂÊhot 2. 0HWRGD.eq() wybiera SLHUZV]\HOHPHQWOLVW\ Z\NRU]\VWDQ\]RVWDïQXPHU0SRQLHZDĝ QXPHU\LQGHNVXUR]SRF]\QDMÈ VLÚRG]HUD 1DVWÚSQLHGR atrybutu class]RVWDMHGRGDQD ZDUWRĂÊcomplete 3. 6HOHNWRU:gt()MHVWXĝ\ZDQ\ ZVHOHNWRU]HM4XHU\GRZ\ERUX HOHPHQWöZOLVW\RQXPHU]H LQGHNVXZLÚNV]\PQLĝ2 1DVWÚSQLHGRDWU\EXWXclass ]RVWDMHGRGDQDZDUWRĂÊcool WYNIK JQUERY 347 WYBÓR Z ELEMENTÓW jQuery oferuje selektory zaprojektowane specjalnie do pracy z formularzami sieciowymi. -HGQDNQLH]DZV]H]DSHZQLDMÈ one najszybszy sposób wybierania elementów. -HĝHOLNRU]\VWDV]]MHGQHJR z takich selektorów, jQuery przeanalizuje wszystkie elementy w dokumencie w celu znalezienia dopasowania Xĝ\ZDMÈFNRGXZSOLNXM4XHU\ NWöU\QLHG]LDïDWDNV]\ENRMDN selektory CSS). 'ODWHJRWHĝQDOHĝ\]DZÚ]LÊ IUDJPHQWGRNXPHQWXDQDOL]Rwany przez skrypt. Odbywa VLÚWRSU]H]XPLHV]F]HQLH QD]Z\HOHPHQWXOXEXĝ\FLH LQQHJRVHOHNWRUDM4XHU\SU]HG zastosowaniem selektorów wymienionych na tej stronie. 'RVWÚSGRHOHPHQWXZIRUPXODU]\VLHFLRZ\FKPRĝHRGE\ZDÊ VLÚWDNĝH]DSRPRFÈW\FK VDP\FKVHOHNWRUöZNWöUHVïXĝÈ GRZ\ERUXGRZROQHJRHOHPHQWX ZM4XHU\&]ÚVWREÚG]LHWR najszybsza opcja. :DUWRZVSRPQLHÊMHV]F]H RMHGQ\P3RQLHZDĝM4XHU\ REVïXJXMHQLHVSöMQRĂFLGRW\F]Èce sposobu traktowania znaków RGVWÚSXSU]H]SU]HJOÈGDUNL SRUXV]DQLHVLÚSRHOHPHQWDFK EÚG]LHïDWZLHMV]H]DSRĂUHGnictwem biblioteki jQuery QLĝ]Xĝ\FLHP]Z\NïHJRNRGX JavaScript. 348 JQUERY SELEKTORY DLA ELEMENTÓW FORMULARZA SIECIOWEGO SELEKTOR OPIS :button Elementy <button> i <input>, których atrybut type ma ZDUWRĂÊbutton. :checkbox Elementy <input>, których atrybut typePDZDUWRĂÊ checkbox=ZUöÊXZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊPRĝQD X]\VNDÊ]DSRPRFÈ$(’[type=”checkbox”]’). :checked Zaznaczone elementy w polach wyboru oraz przyciskach opcji (patrz :selected dla pól select). :disabled :V]\VWNLHHOHPHQW\NWöUH]RVWDï\Z\ïÈF]RQH :enabled :V]\VWNLHHOHPHQW\NWöUH]RVWDï\ZïÈF]RQH :focus (OHPHQWNWöU\MHVWDNWXDOQLHDNW\ZQ\=ZUöÊXZDJÚQD IDNWĝHOHSV]ÈZ\GDMQRĂÊPRĝQDX]\VNDÊ]DSRPRFÈ $(document.activeElement). ğOH :V]\VWNLHHOHPHQW\NWöUHSR]ZDODMÈQDZ\EöUSOLNX :image Wszystkie elementy <input>, których atrybut type ma ZDUWRĂÊimage=ZUöÊXZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊ PRĝQDX]\VNDÊ]DSRPRFÈ[type=”image”]. :input Wszystkie elementy <button>, <input>, <select> i <textarea>=ZUöÊXZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊ PRĝQDX]\VNDÊSU]H]Z\EöUHOHPHQWöZDQDVWÚSQLHXĝ\FLH metody ğOWHU ĴLQSXWĵ . :password Wszystkie elementy <input>, których atrybut type ma warWRĂÊpassword=ZUöÊXZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊ PRĝQDX]\VNDÊ]DSRPRFÈ$(’input:password’). :radio Wszystkie elementy <input>, których atrybut type ma ZDUWRĂÊradio$E\Z\EUDÊJUXSÚSU]\FLVNöZRSFMLPRĝQD Xĝ\Ê$(’input[name=”gender”]:radio’). :reset Wszystkie elementy <input>, których atrybut type ma ZDUWRĂÊreset. :selected :V]\VWNLHHOHPHQW\NWöUH]RVWDï\Z\EUDQH=ZUöÊ XZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊPRĝQDX]\VNDÊ]D SRPRFÈVHOHNWRUD&66ZPHWRG]LHğOWHU QDSU]\NïDG ğOWHU ĴVHOHFWHGĵ . :submit Elementy <button> i <input>, których atrybut type ma ZDUWRĂÊsubmit=ZUöÊXZDJÚQDIDNWĝHOHSV]ÈZ\GDMQRĂÊ PRĝQDX]\VNDÊ]DSRPRFÈ[type=”submit”]. :text Wybiera elementy <input>, których atrybut type ma ZDUWRĂÊtext lub których atrybut typeQLH]RVWDïXĝ\W\ 3UDZGRSRGREQLHOHSV]ÈZ\GDMQRĂÊPRĝQDX]\VNDÊ]D SRPRFÈ(’input:text’). ZDARZENIA I METODY FORMULARZA SIECIOWEGO POBIERANIE WARTOŚCI ELEMENTÓW 0(72'$ 23,6 .val() 0HWRGDXĝ\ZDQDSU]HGHZV]\VWNLP]HOHPHQWDPL <input><select> i <textarea>0RĝHSREUDÊZDUWRĂÊ SLHUZV]HJRHOHPHQWXZGRSDVRZDQ\P]ELRU]HOXE XDNWXDOQLÊZDUWRĂÊZV]\VWNLFK INNE METODY 0(72'$ 23,6 ğOWHU 8ĝ\ZDQDGRğOWURZDQLDHOHPHQWöZZ\EUDQ\FKZM4XHU\ )LOWURZDQLHRGE\ZDVLÚ]DSRPRFÈGUXJLHJRVHOHNWRUD GRW\F]\WR]ZïDV]F]DğOWUöZFKDUDNWHU\VW\F]Q\FKGOD IRUPXODU]\VLHFLRZ\FK .is() %DUG]RF]ÚVWRZ\NRU]\VW\ZDQDZSRïÈF]HQLX]ğOWUDPL GRVSUDZG]HQLDF]\SROHIRUPXODU]DVLHFLRZHJR]RVWDïR Z\EUDQHOXE]D]QDF]RQH $.isNumeric() 6SUDZG]DF]\ZDUWRĂÊSU]HGVWDZLDOLF]EÚ:DUWRĂFLÈ ]ZURWQÈMHVWZDUWRĂÊERRORZVND'ODZ\PLHQLRQ\FK SRQLĝHMSU]\SDGNöZ]ZUDFDQDMHVWZDUWRĂÊtrue $.isNumeric(1) $.isNumeric(-3) $.isNumeric(“2”) $.isNumeric(4.4) LV1XPHULF LV1XPHULF [)) ZDARZENIA 0(72'$ 23,6 .on() 0HWRGDXĝ\ZDQDGRREVïXJLZV]\VWNLFK]GDU]Hñ ='$5=(1,( 23,6 blur :\VWÚSXMHJG\HOHPHQWVWDMHVLÚQLHDNW\ZQ\ change :\VWÚSXMHJG\ZDUWRĂÊHOHPHQWX<input>XOHJD]PLDQLH focus :\VWÚSXMHJG\HOHPHQWVWDMHVLÚDNW\ZQ\ select :\VWÚSXMHJG\RSFMDHOHPHQWX<select>XOHJQLH]PLDQLH submit :\VWÚSXMHJG\IRUPXODU]VLHFLRZ\]RVWDQLHZ\VïDQ\ 3U]\GDWQÈPHWRGÈSRGF]DVZ\V\ïDQLDIRUPXODU]DVLHFLRZHJRMHVW UöZQLHĝPHWRGDVHULDOL]H NWöUÈSR]QDV]ZUR]G]LDOH ZSRGUR]G]LDïDFKķ:\V\ïDQLHIRUPXODU]\VLHFLRZ\FK]Z\NRU]\VWDQLHPWHFKQRORJLL$MD[ĵLķ:\V\ïDQLHIRUPXODU]\VLHFLRZ\FKĵ 0HWRGD.val()SRELHUDZDUWRĂÊ SLHUZV]HJRHOHPHQWX<input> <select> i <textarea>ZGRSDVRZDQ\P]ELRU]HM4XHU\0RĝH E\ÊUöZQLHĝZ\NRU]\VWDQDGR XVWDZLHQLDZDUWRĂFLGODZV]\VWNLFKGRSDVRZDQ\FKHOHPHQWöZ 0HWRG\ğOWHU i .is()VÈ SRZV]HFKQLHVWRVRZDQHZUD] ]HOHPHQWDPLIRUPXODU]DVLHFLRZHJR3R]QDïHĂMHZSRGUR]G]LDOH ķ'RGDZDQLHLğOWURZDQLHHOHPHQWöZZGRSDVRZDQ\P]ELRU]Hĵ $.isNumeric()WRPHWRGD JOREDOQD1LHMHVWXĝ\ZDQD ZHOHPHQWDFKZ\EUDQ\FK ZM4XHU\=DPLDVWWHJRZDUWRĂÊ NWöUÈFKFHV]VSUDZG]LÊ SU]HND]XMHV]PHWRG]LHMDNRMHM DUJXPHQW :V]\VWNLHPHWRG\Z\PLHQLRQH SROHZHMVWURQLHRGSRZLDGDMÈ ]GDU]HQLRP-DYD6FULSWNWöUH PRJÈE\ÊZ\NRU]\VW\ZDQHGR Z\ZRï\ZDQLDIXQNFML3RGREQLH MDNZSU]\SDGNXLQQHJRNRGX M4XHU\ZWOHZ\PLHQLRQH PHWRG\]DMPXMÈVLÚREVïXJÈ QLHVSöMQRĂFLZ\VWÚSXMÈF\FK PLÚG]\SU]HJOÈGDUNDPL %LEOLRWHNDM4XHU\XïDWZLDSUDFÚ ]JUXSÈHOHPHQWöZ QDSU]\NïDG SU]\FLVNDPLRSFMLSRODPL Z\ERUXLRSFMDPLQDOLĂFLHUR]ZLMDQHM SRQLHZDĝSRZ\EUDQLX HOHPHQWöZPRĝQDZ\NRU]\VWDÊ ZQLFKSRV]F]HJöOQHPHWRG\EH] NRQLHF]QRĂFLVWRVRZDQLDSÚWOL 1DNROHMQHMVWURQLH]QDMGXMH VLÚSU]\NïDGXĝ\FLDIRUPXODU]D VLHFLRZHJR:LÚFHMSU]\NïDGöZ SU]HGVWDZLRQRZUR]G]LDOH JQUERY 349 PRACA Z FORMULARZEM SIECIOWYM :SRQLĝV]\PSU]\NïDG]LHSRGOLVWÈ]RVWDïXPLHV]F]RQ\SU]\FLVN LIRUPXODU]VLHFLRZ\.LHG\ Xĝ\WNRZQLNNOLNQLHSU]\FLVNGRGDZDQLDQRZHJRHOHPHQWXOLVW\ IRUPXODU]]RVWDQLHZ\ĂZLHWORQ\ ZZLGRNX )RUPXODU]VLHFLRZ\SR]ZDODQD GRGDQLHQRZHJRHOHPHQWXGR OLVW\6NïDGDVLÚ]SRMHG\QF]HJR pola tekstowego oraz przycisku Z\V\ïDMÈFHJR]DZDUWRĂÊIRUPXODU]D .LHG\IRUPXODU]MHVW Z\ĂZLHWORQ\ZZLGRNXSU]\FLVN SRZRGXMÈF\GRGDQLHQRZHJR HOHPHQWXSR]RVWDMHXNU\W\ .LHG\Xĝ\WNRZQLNNOLNQLH SU]\FLVNZ\V\ïDMÈF\]DZDUWRĂÊ IRUPXODU]DQRZ\HOHPHQW ]RVWDQLHGRGDQ\QDNRñFXOLVW\ 5öZQRF]HĂQLHIRUPXODU]EÚG]LH XNU\W\DSRQRZQLHSRMDZLVLÚ SU]\FLVNGRGDZDQLDQRZHJR HOHPHQWX c07/form.html HTML 0LHMVFHQDOLVWÚ!...</ul> GLYLG ĵQHZ,WHP%XWWRQĵ!EXWWRQKUHI ĵĵLG ĵVKRZ)RUPĵ!1RZ\HOHPHQW</button></div> IRUPLG ĵQHZ,WHP)RUPĵ! <input type=”text” id=”itemDescription” placeholder=”Dodaj opis...” /> <input type=”submit” id=”addButton” value=”Dodaj” /> </form> WYNIK 350 JQUERY 1. 8WZRU]RQH]RVWDMÈQRZH obiekty jQuery przeznaczone GRSU]HFKRZ\ZDQLDSU]\FLVNX GRGDZDQLDQRZHJRHOHPHQWX IRUPXODU]DVLHFLRZHJRRUD] SU]\FLVNXZ\V\ïDMÈFHJR IRUPXODU]:V]\VWNLHZ\PLHQLRQHRELHNW\VÈEXIRURZDQH Z]PLHQQ\FK 2. 3RGF]DVZF]\W\ZDQLDVWURQ\ &66XNU\ZDSU]\FLVNGRGDZDQLDQRZHJRHOHPHQWXOLVW\ LZ\ĂZLHWODIRUPXODU] DZLÚF PHWRG\M4XHU\Z\ĂZLHWODMÈ Z\PLHQLRQ\SU]\FLVNLXNU\ZDMÈ IRUPXODU] 3. -HĝHOLXĝ\WNRZQLNNOLNQLH SU]\FLVNGRGDZDQLDQRZHJRHOHPHQWXOLVW\ HOHPHQW<button> którego atrybut idPDZDUWRĂÊ VKRZ)RUP Z\PLHQLRQ\SU]\FLVN ]RVWDQLHXNU\W\DZ\ĂZLHWORQ\ EÚG]LHIRUPXODU] $(function() { 4. 3RZ\VïDQLXIRUPXODU]D VLHFLRZHJRQDVWÚSXMHZ\ZRïDQLHIXQNFMLDQRQLPRZHMNWöUD RWU]\PXMHRELHNWevent 1 YDUQHZ,WHP%XWWRQ ĳQHZ,WHP%XWWRQĳ YDUQHZ,WHP)RUP ĳQHZ,WHP)RUPĳ var $textInput = $(’input:text’); 5. 0HWRGD.preventDefault() PRĝHXQLHPRĝOLZLÊZ\VïDQLH IRUPXODU]DVLHFLRZHJR 2 QHZ,WHP%XWWRQVKRZ QHZ,WHP)RUPKLGH 3 ĳVKRZ)RUPĳ RQ ĳFOLFNĳIXQFWLRQ QHZ,WHP%XWWRQKLGH QHZ,WHP)RUPVKRZ }); 6. 6HOHNWRU:text pobiera HOHPHQW<input>NWöUHJR atrybut typePDZDUWRĂÊtext 0HWRGD.val()SRELHUDZDUWRĂÊ ZSURZDG]RQÈSU]H]Xĝ\WNRZQLNDZSROXIRUPXODU]D:DUWRĂÊ WDMHVWQDVWÚSQLHXPLHV]F]DQD Z]PLHQQHMRQD]ZLHQHZ7H[W c07/js/form.js JAVASCRIPT 4 5 6 7 8 ^ QHZ,WHP)RUPRQ ĳVXEPLWĳIXQFWLRQ H ^ e.preventDefault(); YDUQHZ7H[W ĳLQSXWWH[Wĳ YDO ĳOLODVWĳ DIWHU ĳOL!ĳQHZ7H[WĳOL!ĳ QHZ,WHP)RUPKLGH QHZ,WHP%XWWRQVKRZ $textInput.val(’’); }); }); 7. =DSRPRFÈPHWRG\.after() QRZ\HOHPHQW]RVWDMHXPLHV]F]RQ\QDNRñFXOLVW\ 8. )RUPXODU]VLHFLRZ\]RVWDMH XNU\W\SU]\FLVNGRGDZDQLD QRZHJRHOHPHQWXMHVWSRQRZQLH Z\ĂZLHWORQ\D]DZDUWRĂÊSROD WHNVWRZHJR]RVWDMHXVXQLÚWD DE\Xĝ\WNRZQLNPöJïGRGDÊ NROHMQ\HOHPHQWMHĂOLFKFH JQUERY 351 WYCINANIE I KOPIOWANIE ELEMENTÓW Gdy zostanie dokonany wybór elementów w jQuery, Z\PLHQLRQHWXWDMPHWRG\PRĝQDZ\NRU]\VWDÊ GRXVXQLÚFLDHOHPHQWöZOXEXWZRU]HQLDLFKNRSLL Metoda .remove() usuwa ]GU]HZDPRGHOX'20GRSDVRwane elementy oraz wszystkie LFKHOHPHQW\SRWRPQH Metoda .detach()UöZQLHĝ usuwa z drzewa modelu '20GRSDVRZDQHHOHPHQW\ RUD]ZV]\VWNLHLFKHOHPHQW\ SRWRPQHMHGQDN]DFKRZXMH ZV]\VWNLHSURFHGXU\REVïXJL ]GDU]Hñ LLQQHGDQHSRZLÈ]DQH ]M4XHU\ DE\PRJï\E\Ê ]SRZURWHPXPLHV]F]RQH QDVWURQLH Metody .empty() i .unwrap() XVXZDMÈHOHPHQW\SRZLÈ]DQH ]DNWXDOQLHZ\EUDQ\PL Metoda .clone()SRZRGXMH XWZRU]HQLHNRSLLGRSDVRZDQHJR ]ELRUXHOHPHQWöZ LLFKHOHPHQWöZSRWRPQ\FK -HĝHOL]DVWRVXMHV]WÚPHWRGÚGRHOHPHQWöZ +70/SRVLDGDMÈF\FKDWU\EXW\ idWRZDUWRĂÊDWU\EXWöZid EÚG]LHZ\PDJDïDXDNWXDOQLHQLD SRQLHZDĝZSU]HFLZQ\PUD]LH QLHEÚGÈGïXĝHMXQLNDOQH-HĝHOL FKFHV]SU]HND]DÊMDNÈNROZLHN SURFHGXUÚREVïXJLSRZLQLHQHĂ SRGDÊZDUWRĂÊtrueZQDZLDVLH 352 JQUERY WYCINANIE METODA OPIS .remove() 8VXZD]GU]HZDPRGHOX'20GRSDVRZDQHHOHPHQW\ ïÈF]QLH]ZV]\VWNLPLHOHPHQWDPLSRWRPQ\PLLZÚ]ïDPL WHNVWRZ\PL .detach() ']LDïDSRGREQLHMDN.remove()DOHZSDPLÚFL]DFKRZXMH NRSLÚHOHPHQWöZ .empty() 8VXZDZV]\VWNLHZÚ]ï\SRWRPQH]ZV]\VWNLFKHOHPHQWöZ ]QDMGXMÈF\FKVLÚZGRSDVRZDQ\P]ELRU]H .unwrap() 8VXZDHOHPHQW\QDGU]ÚGQHGRSDVRZDQHJR]ELRUX SR]RVWDZLDMÈFSU]\W\PHOHPHQW\GRSDVRZDQH KOPIOWANIE METODA OPIS .clone() 7ZRU]\NRSLÚGRSDVRZDQHJR]ELRUX ïÈF]QLH]ZV]\VWNLPL HOHPHQWDPLSRWRPQ\PLLZÚ]ïDPLWHNVWRZ\PL WKLEJANIE 6SRVöEGRGDZDQLDHOHPHQWöZGRGU]HZDPRGHOX'20SU]HGVWDZLRQRZSRGUR]G]LDOHķ:VWDZLDQLHHOHPHQWXĵ WYTNIJ, KOPIUJ, WKLEJ :SRQLĝV]\PSU]\NïDG]LH PRĝHV]]REDF]\ÊMDNIUDJPHQW\ GU]HZDPRGHOX'20VÈXVXZDQHSRZLHODQHLXPLHV]F]DQH ZLQQ\PPLHMVFXQDVWURQLH .RG+70/WXĝ]DOLVWÈ ]DZLHUDGRGDWNRZ\HOHPHQW <p>ZNWöU\PXPLHV]F]RQR F\WDW(OHPHQWWHQ]RVWDQLH SU]HQLHVLRQ\LXPLHV]F]RQ\SRG QDJïöZNLHP JAVASCRIPT 1 2 3 4 5 6 3RQDGWRSLHUZV]\HOHPHQWOLVW\ ]RVWDïRGïÈF]RQ\LSU]HQLHVLRQ\ QDNRQLHFOLVW\ c07/js/cut-copy-paste.js $(function() { var $p = $(’p’); var $clonedQuote = $p.clone(); $p.remove(); $clonedQuote.insertAfter(’h2’); var $moveItem = $(’#one’).detach(); $moveItem.appendTo(’ul’); }); WYNIK 1. (OHPHQWZ\EUDQ\ZM4XHU\WRHOHPHQW<p> ]QDMGXMÈF\VLÚQDNRñFXVWURQ\-HVWEXIRURZDQ\ Z]PLHQQHMRQD]ZLH$p 2. =DSRPRFÈPHWRG\.clone()HOHPHQWWHQ ]RVWDMHVNRSLRZDQ\ ZUD]]]DZDUWRĂFLÈLHOHPHQWDPLSRWRPQ\PL .RSLDMHVWSU]HFKRZ\ZDQD Z]PLHQQHMRQD]ZLH$clonedQuote 3. $NDSLW]RVWDMHXVXQLÚW\ 4. .ORQRZDQDZHUVMDF\WDWX]RVWDMHZVWDZLRQDWXĝ SRHOHPHQFLH<h2>QDSRF]ÈWNXVWURQ\ 5. 3LHUZV]\HOHPHQWOLVW\]RVWDMHRGïÈF]RQ\RG GU]HZDPRGHOX'20LXPLHV]F]RQ\Z]PLHQQHM o nazwie $moveItem R]QDF]DWRSUDNW\F]QLHMHJR XVXQLÚFLH]GU]HZDPRGHOX'20 6. 1DVWÚSQLHZVSRPQLDQ\HOHPHQWOLVW\]RVWDMH GRïÈF]RQ\QDMHMNRñFX JQUERY 353 WYMIARY PUDEŁKA 0HWRG\Z\PLHQLRQHSRQLĝHMSR]ZDODMÈQDXVWDOHQLHOXEXDNWXDOQLHQLHV]HURNRĂFLLZ\VRNRĂFLZV]\VWNLFKSXGHïHNQDVWURQLH &66WUDNWXMHNDĝG\HOHPHQW QDVWURQLHLQWHUQHWRZHMMDNE\ ]QDMGRZDïVLÚZHZïDVQ\P SXGHïNX7DNLHSXGHïNRPRĝH PLHÊGRSHïQLHQLHNUDZÚGě LPDUJLQHV-HĝHOLXVWDZLDV] V]HURNRĂÊOXEZ\VRNRĂÊ SXGHïNDZ&66ZDUWRĂÊWDQLH REHMPXMHGRSHïQLHQLDNUDZÚG]L LPDUJLQHVXĽ]DZLHUDMÈVLÚ RQHZZ\PLDUDFKSXGHïND :\PLHQLRQHWXWDMPHWRG\ SR]ZDODMÈQDSRELHUDQLHV]HURNRĂFLLZ\VRNRĂFLSLHUZV]HJR HOHPHQWXZGRSDVRZDQ\P ]ELRU]H3LHUZV]HGZDSR]ZDODMÈWDNĝHQDXDNWXDOQLHQLH Z\PLDUöZZV]\VWNLFKSXGHïHN ZGRSDVRZDQ\P]ELRU]H 3R]RVWDïHPHWRG\XPRĝOLZLDMÈ SU]HSURZDG]HQLHUöĝQ\FK SRPLDUöZZ]DOHĝQRĂFLRG WHJRFRPD]RVWDÊXZ]JOÚGQLRQHGRSHïQLHQLHNUDZÚGěF]\ PDUJLQHV=ZUöÊXZDJÚQDIDNW ĝHPHWRG\.outerHeight() i .outerWidth()SRELHUDMÈ SDUDPHWUtrueMHĂOLPDUJLQHV PD]RVWDÊXZ]JOÚGQLRQ\ POBIERANIE LUB USTAWIANIE WYMIARÓW PUDEŁKA 0(72'$ 23,6 .height() :\VRNRĂÊSXGHïND QLHREHMPXMHPDUJLQHVXNUDZÚG]L LGRSHïQLHQLD ZLGWK 6]HURNRĂÊSXGHïND QLHREHMPXMHPDUJLQHVXNUDZÚG]L LGRSHïQLHQLD (1) TYLKO POBIERANIE WYMIARÓW PUDEŁKA 0(72'$ 23,6 .innerHeight() :\VRNRĂÊSXGHïNDSOXVGRSHïQLHQLH .innerWidth() 6]HURNRĂÊSXGHïNDSOXVGRSHïQLHQLH(2) .outerHeight() :\VRNRĂÊSXGHïNDSOXVGRSHïQLHQLH LNUDZÚGě .outerWidth() 6]HURNRĂÊSXGHïNDSOXVGRSHïQLHQLH LNUDZÚGě(3) .outerHeight(true) :\VRNRĂÊSXGHïNDSOXVGRSHïQLHQLH NUDZÚGěLPDUJLQHV .outerWidth(true) 6]HURNRĂÊSXGHïNDSOXVGRSHïQLHQLH NUDZÚGěLPDUJLQHV(4) *G\VÈSRELHUDQHZ\PLDU\ ZDUWRĂFL]ZURWQHPHWRGVÈ Z\UDĝRQHZSLNVHODFK DOPEŁNIENIE 354 JQUERY 1 ZLGWK 2 .innerWidth() 3 .outerWidth() 4 .outerWidth(true) KRAWĘDŹ MARGINES ZMIANA WYMIARÓW :SRQLĝV]\PSU]\NïDG]LH SRND]DQR]DVWRVRZDQLHPHWRG .height() i ZLGWK GRSREUDQLDLXDNWXDOQLHQLDLQIRUPDFML RZ\PLDUDFKSXGHïND c07/js/dimensions.js JAVASCRIPT 1 2 3 4 1DVWURQLHZ\ĂZLHWODQ\MHVW NRPXQLNDWSRGDMÈF\Z\VRNRĂÊ NRQWHQHUD1DVWÚSQLH]PLHQLDQD MHVWV]HURNRĂÊHOHPHQWöZOLVW\ ]Xĝ\FLHPZDUWRĂFLZ\UDĝRQ\FK ZSURFHQWDFKLSLNVHODFK $(function() { var listHeight = $(’#page’).height(); ĳXOĳ DSSHQG ĳS!:\VRNRĂÊĳOLVW+HLJKWĳS[S!ĳ ĳOLĳ ZLGWK ĳĳ ĳOLRQHĳ ZLGWK ĳOLWZRĳ ZLGWK ĳĳ }); 1. 8WZRU]RQD]RVWDMH]PLHQQD o nazwie listHeight prze]QDF]RQDGRSU]HFKRZ\ZDQLD Z\VRNRĂFLNRQWHQHUDVWURQ\ :DUWRĂÊMHVWSRELHUDQD]D SRPRFÈPHWRG\.height() WYNIK 2. :\VRNRĂÊVWURQ\MHVW Z\ĂZLHWODQDSRGOLVWÈ'RWHJR FHOXXĝ\WRPHWRG\.append() DVDPDZDUWRĂÊPRĝH]DOHĝHÊ RGSU]HJOÈGDUNL 3. 6HOHNWRUZ\ELHUDZV]\VWNLH HOHPHQW\<li>DQDVWÚSQLH ]DSRPRFÈPHWRG\ZLGWK XVWDZLDLPV]HURNRĂÊZ\QRV]ÈFÈDNWXDOQHM 4. 7HGZDSROHFHQLDSRZRGXMÈXVWDZLHQLHV]HURNRĂFL SLHUZV]HJRHOHPHQWXOLVW\QD SLNVHOLQDWRPLDVWGUXJLHJR QDV]HURNRĂFLVWURQ\ SRGF]DVMHMZF]\W\ZDQLD :\QLNLSRPLDUöZSU]HSURZDG]DQ\FKZSURFHQWDFKOXE MHGQRVWNDFKHPSRZLQQ\E\Ê SRGDZDQHZSRVWDFLFLÈJXWHNVWRZHJRZUD]]SU]\URVWNLHP% lub em3LNVHOHQLHZ\PDJDMÈ SU]\URVWNDLQLHVÈXMPRZDQH Z]QDNLF\WRZDQLD JQUERY 355 WYMIARY OKNA I STRONY 0HWRG\.height() i ZLGWK PRJÈE\ÊXĝ\ZDQHGRXVWDOHQLDZ\PLDUöZ ]DUöZQRRNQDSU]HJOÈGDUNLMDNLGRNXPHQWX+70/,VWQLHMÈUöZQLHĝPHWRG\ SR]ZDODMÈFHQDSREUDQLHOXEXVWDZLHQLHSRïRĝHQLDSDVNöZSU]HZLMDQLD :SRGUR]G]LDOHķ:\PLDU\SXGHïNDĵ]REDF]\ïHĂĝHZ\VRNRĂÊ OXEV]HURNRĂÊSXGHïNDPRĝQD SREUDÊLXVWDZLÊ]DSRPRFÈ PHWRG.height() i ZLGWK 7HPHWRG\PRĝQDZ\NRU]\VWDÊ WDNĝHZGRSDVRZDQ\P]ELRU]H M4XHU\]DZLHUDMÈF\PRELHNW\ ZLQGRZ lub document 0(72'$ 23,6 .height() :\VRNRĂÊZ\EUDQHJRHOHPHQWXZM4XHU\ ZLGWK 6]HURNRĂÊZ\EUDQHJRHOHPHQWXZM4XHU\ .scrollLeft() 3RELHUDSR]LRPHSRïRĝHQLHSDVNDSU]HZLMDQLDGOD SLHUZV]HJRHOHPHQWXZGRSDVRZDQ\P]ELRU]HOXE XVWDZLDSR]LRPHSRïRĝHQLHSDVNDSU]HZLMDQLDGOD GRSDVRZDQ\FKZÚ]ïöZ .scrollTop() 3RELHUDSLRQRZHSRïRĝHQLHSDVNDSU]HZLMDQLDGOD SLHUZV]HJRHOHPHQWXZGRSDVRZDQ\P]ELRU]HOXE XVWDZLDSLRQRZHSRïRĝHQLHSDVNDSU]HZLMDQLDGOD GRSDVRZDQ\FKZÚ]ïöZ 3U]HJOÈGDUNDPRĝHZ\ĂZLHWOLÊ SDVNLSU]HZLMDQLDMHĝHOL Z\VRNRĂÊOXEV]HURNRĂÊ ]DZDUWRĂFLSXGHïNDMHVW ZLÚNV]DQLĝSU]H]QDF]RQHGOD QLHJRPLHMVFH ELHĝÈFDVWURQDSU]HGVWDZLDQD przez obiekt document jest ZLÚNV]DQLĝZ\PLDU\ZLGRF]QHJRREV]DUX W]Zviewportu RNQDSU]HJOÈGDUNL • • 0HWRG\.scrollLeft() i .scrollTop()SR]ZDODMÈQD SREUDQLHLXVWDZLHQLHSRïRĝHQLD SDVNöZSU]HZLMDQLD 2 3RGF]DVSRELHUDQLDZ\PLDUöZ ZDUWRĂFL]ZURWQHPHWRGVÈ Z\UDĝRQHZSLNVHODFK 1 ZLQGRZ KHLJKW $(document).height(); 356 JQUERY -HĝHOLGHNODUDFMD '2&7<3(QLH]RVWDQLH SRGDQDQDVWURQLH +70/PHWRGDWD F]ÚVWR]ZUDFDQLHSUDZLGïRZÈZDUWRĂÊ POŁOŻENIE ELEMENTÓW NA STRONIE 0HWRG\.offset() i .position()PRJÈE\Ê Xĝ\ZDQHZFHOXRNUHĂOHQLDSRïRĝHQLDHOHPHQWöZQDVWURQLH 0(72'$ 23,6 .offset() 3RELHUDOXEXVWDZLDZVSöïU]ÚGQHHOHPHQWXZ]JOÚGHP lewego górnego rogu obiektu document(1) .position() 3RELHUDOXEXVWDZLDZVSöïU]ÚGQHHOHPHQWXZ]JOÚGHP GRZROQHJRHOHPHQWXQDGU]ÚGQHJRNWöU\]RVWDïZ\MÚW\ SRSU]H]SU]HVXQLÚFLHSXGHïND&66 ]HVWDQGDUGRZHJR SU]HSï\ZXHOHPHQWöZ-HĝHOLĝDGHQHOHPHQWQDGU]ÚGQ\ QLH]QDMGXMHVLÚSR]DVWDQGDUGRZ\PSU]HSï\ZHPWRZDUWRĂÊ]ZURWQDPHWRG\MHVWWDNDVDPDMDN.offset()(2) 'ZLHPHWRG\Z\PLHQLRQH SROHZHMVWURQLHSRPDJDMÈ ZXVWDOHQLXSRïRĝHQLDHOHPHQWX QDVWURQLH Z]JOÚGHPHOHPHQWX QDGU]ÚGQHJRNWöU\]RVWDï Z\MÚW\VSR]DVWDQGDUGRZHJR SU]HSï\ZX • • 2ELHPHWRG\]ZUDFDMÈRELHNW SRVLDGDMÈF\GZLHSRQLĝV]H ZïDĂFLZRĂFL topĽSRïRĝHQLHRGJöU\ GRNXPHQWXOXEHOHPHQWX .offset() leftĽSRïRĝHQLHRGOHZHM GRNXPHQWXOXEHOHPHQWX 1 2 .position() :FHOXSREUDQLDZDUWRĂFLSU]HVXQLÚFLDOXESRïRĝHQLDRELHNW]ZUöFRQ\SU]H]Z\PLHQLRQHPHWRG\QDOHĝ\XPLHĂFLÊZ]PLHQQHM1DVWÚSQLH ]DSRPRFÈZïDĂFLZRĂFLleft i rightPRĝQDSREUDÊSRïRĝHQLH 3RGREQLHMDNZSU]\SDGNX LQQ\FKPHWRGM4XHU\NLHG\ RPDZLDQHWXWDMPHWRG\ VÈXĝ\ZDQHGRSRELHUDQLD LQIRUPDFMLWR]ZUDFDMÈZVSöïU]ÚGQHSLHUZV]HJRHOHPHQWX ZGRSDVRZDQ\P]ELRU]H -HĝHOLVÈZ\NRU]\VW\ZDQHGR XVWDZLHQLDSRïRĝHQLDHOHPHQWöZWRXDNWXDOQLDMÈSRïRĝHQLH ZV]\VWNLFKHOHPHQWöZZGRSDVRZDQ\P]ELRU]H XPLHV]F]DMÈ MHZW\PVDP\PSXQNFLH var offset = $(’div’).offset(); YDUWH[W ĳ/HZRĳRIIVHWOHIWĳ3UDZRĳRIIVHWULJKW JQUERY 357 OKREŚLENIE POŁOŻENIA ELEMENTÓW NA STRONIE :RPDZLDQ\PWXWDMSU]\NïDG]LHNLHG\Xĝ\WNRZQLNSU]HZLMD VWURQÚZGöïSXGHïNRMHVW SU]HZLMDQHZSXGHïNXMDNE\ VWRSNDPLDïDSLNVHOL 7ÚF]ÚĂÊVWURQ\PRĝHP\ RNUHĂOLÊPLDQHPVWUHI\NRñFRZHMD7ZRLP]DGDQLHPMHVW XVWDOHQLHZ\VRNRĂFLQDNWöUHM ]DF]\QDVLÚendZone =DNDĝG\PUD]HPJG\Xĝ\WNRZQLNSU]HZLMD]DZDUWRĂÊWU]HED VSUDZG]LÊSRïRĝHQLHSDVND SU]HZLMDQLDZ]JOÚGHPSRF]ÈWNX VWURQ\ -HĝHOLSDVHNSU]HZLMDQLD ]QDMG]LHVLÚSRQLĝHMSRF]ÈWNX VWUHI\NRñFRZHMSXGHïNREÚG]LH DQLPRZDQHQDVWURQLH-HĂOL QLHĽSXGHïNRSR]RVWDMHXNU\WH 1DNRñFXVWURQ\ZNRG]LH +70/RPDZLDQHJRSU]\NïDGX ]QDMGXMHVLÚGRGDWNRZ\HOHPHQW <div>]DZLHUDMÈF\UHNODPÚ :LHOHHOHPHQWöZ]RVWDïR GRGDQ\FKGROLVW\DE\XWZRU]\Ê GïXJÈVWURQÚSR]ZDODMÈFÈQDMHM SU]HZLMDQLH JQUERY c07/position.html HTML ...<li>NRPRVDU\ĝRZD</li> </ul> <p id=”footer”>© ListKing</p> <div id=”slideAd”> .XS/LVW.LQJ3UR]DMHG\QH]ï </div> </div> <script src=”js/jquery-1.9.1.min.js”></script> <script src=”js/position.js”></script> WYNIK 1. %XIRURZDQLHRNQDLUHNODP\ 2. 2EOLF]HQLHZ\VRNRĂFLVWUHI\ NRñFRZHMLSU]HFKRZ\ZDQLHWHM ZDUWRĂFLZ]PLHQQHMRQD]ZLH endZone 3. =GDU]HQLHscrollSRZRGXMH Z\ZRïDQLHIXQNFMLDQRQLPRZHM ]DNDĝG\PUD]HPJG\Xĝ\WNRZQLNSU]HZLMD]DZDUWRĂÊZJöUÚ OXEZGöï 4. .RQVWUXNFMDZDUXQNRZD VSUDZG]DF]\SRïRĝHQLHELHĝÈFHMHVWGDOHMRGSRF]ÈWNXVWURQ\ QLĝSRF]ÈWHNVWUHI\NRñFRZHM 5. -HĝHOLZDUWRĂFLÈ]ZURWQÈ konstrukcji warunkowej jest trueSXGHïNRSU]HVXZDVLÚRG SUDZHMNUDZÚG]LVWURQ\(IHNW WUZDPLOLVHNXQG 6. -HĝHOLZDUWRĂFLÈ]ZURWQÈ konstrukcji warunkowej jest falseOXESXGHïNR]QDMGXMH VLÚZĂURGNXDQLPDFMLWRMHVW ]DWU]\P\ZDQH]DSRPRFÈ PHWRG\.stop()1DVWÚSQLH]]D SUDZHMNUDZÚG]LVWURQ\Z\VXZD VLÚUHNODPD(IHNWWHQWUZD UöZQLHĝPLOLVHNXQG c07/js/position.js JAVASCRIPT 2 $(function() { YDUZLQGRZ ZLQGRZ var $slideAd = $(’#slideAd’); YDUHQG=RQH ĳIRRWHUĳ RIIVHW 3 ZLQGRZRQ ĳVFUROOĳIXQFWLRQ 4 5 LI HQG=RQH ZLQGRZVFUROO7RS ^ $slideAd.animate({ ’right’: ’0px’ }, 250); } else { $slideAd.stop(true).animate({ ’right’: ’-360px’ }, 250); } 1 6 WRSZLQGRZKHLJKW ^ }); }); OBLICZENIE STREFY KOŃCOWEJ 2WRSU]HELHJSURFHVXREOLF]HQLD Z\VRNRĂFLQDNWöUHMSRZLQQR SRMDZLÊVLÚSXGHïNR a)3REUDQLHZ\UDĝRQHMZSLNVHODFKRGOHJïRĂFLRGSRF]ÈWNX VWURQ\GRSRF]ÈWNXVWRSNL V]DU\ SDVHN b)2GMÚFLHZ\VRNRĂFLYLHZSRUWX RGREOLF]RQHMZDUWRĂFL c)2GMÚFLHNROHMQ\FKSLNVHOL SU]H]QDF]RQ\FKQDREV]DUQD NWöU\PSXGHïNRSRMDZLVLÚ ZZLGRNX NRORUUöĝRZ\QD U\VXQNX 2GOHJïRĂÊQDMDNÈXĝ\WNRZQLN SU]HZLQÈïVWURQÚZGöïPRĝQD REOLF]\Ê]DSRPRFÈSROHFHQLD ZLQGRZ VFUROO7RS -HĝHOLRGOHJïRĂÊMHVWZLÚNV]DRG WHMQDNWöUHMSRZLQQDSRND]DÊ VLÚVWUHIDNRñFRZDWRSXGHïNR VWDMHVLÚZLGRF]QH -HĝHOLQLHZWHG\SXGHïNRMHVW Z\S\FKDQHSR]DVWURQÚ A B C JQUERY 359 SPOSOBY DOŁĄCZANIA JQUERY NA STRONIE 3OLNM4XHU\PRĝQDSU]HFKRZ\ZDÊZUD] ]SR]RVWDïÈF]ÚĂFLÈZLWU\Q\LQWHUQHWRZHMOXEWHĝ Xĝ\ÊZHUVMLXGRVWÚSQLDQHMSU]H]LQQHğUP\ -HGQDNZWDNLPSU]\SDGNXQDGDOQDOHĝ\GRïÈF]DÊ ZHUVMÚDZDU\MQÈ *G\SRZVWDZDïDWDNVLÈĝND SRGVWDZRZHVHUZHU\&'1 RIHURZDQHGODM4XHU\WRM4XHU\ &'1 RSDUWHQD0D[&'1 VHUZHU\*RRJOHL0LFURVRIW ŹRÓDŁO &RQWHQW'HOLYHU\1HWZRUN &'1 WRVHULDVHUZHUöZUR]SURV]RQ\FKQDFDï\PĂZLHFLH =RVWDï\]DSURMHNWRZDQHZFHOX EDUG]RV]\ENLHJRKRVWLQJX SOLNöZVWDW\F]Q\FK WDNLFK MDN+70/&66-DYD6FULSW REUD]öZPX]\NLLZLGHR 360 JQUERY &'1SUöEXMHZ\V]XNDÊ VHUZHU]QDMGXMÈF\VLÚQDMEOLĝHM Xĝ\WNRZQLNDDQDVWÚSQLH SU]HND]XMHGDQH]WHJRVHUZHUD DE\QLHPXVLDï\SRNRQ\ZDÊ]E\W GXĝHMRGOHJïRĂFL:SU]\SDGNX M4XHU\SRGF]DVRGZLHG]DQLD LQQHMZLWU\Q\Xĝ\WNRZQLF\PRJÈ PLHÊMXĝSREUDQ\L]EXIRURZDQ\ SOLN]&'1 CDN UŻYTKOWNIK -HĝHOLGRïÈF]DV]ELEOLRWHNÚ M4XHU\QDVWURQLHPRĝHV] VSUöERZDÊZF]\WDÊMÈ]MHGQHJR ]GRVWÚSQ\FKVHUZHUöZ&'1 1DVWÚSQLHVSUDZG]DV]F]\ ]RVWDïDZF]\WDQD-HĝHOL QLHPRĝHV]GRïÈF]\ÊZHUVMÚ SU]HFKRZ\ZDQÈZHZïDVQ\FK VHUZHUDFK MHVWWRWDN]ZDQH UR]ZLÈ]DQLHDZDU\MQH WCZYTANIE JQUERY Z CDN .LHG\QDVWURQLHLQWHUQHWRZHM biblioteka jQuery jest wczytyZDQD]&'1F]ÚVWRPRĝQDVLÚ VSRWNDÊ]HVNïDGQLÈSRGREQÈ GRSU]HGVWDZLRQHMSRQLĝHM 5R]SRF]\QDVLÚRG]QDF]QLND <script>RGSRZLHG]LDOQHJR za wczytanie pliku jQuery ]VHUZHUD&'1=ZUöÊXZDJÚ ĝHDGUHV85/VNU\SWXUR]SRF]\QDVLÚRGGZöFKXNRĂQLNöZ DQLHRGhttp: 1D]\ZDVLÚWRDGUHVHP85/ Z]JOÚGQHJRSURWRNRïX-HĝHOL ELHĝÈFDVWURQDMHVWZF]\WDQD przez httpsWRQLHZ\ĂZLHWOLVLÚ NRPXQLNDWREïÚG]LHLQIRUPXMÈF\Xĝ\WNRZQLNDRQLHEH]SLHF]Q\FKHOHPHQWDFK]QDMGXMÈF\FK VLÚQDVWURQLH8ZDJD to nie G]LDïDORNDOQLH]SURWRNRïHP ğOH %DUG]RF]ÚVWRREHFQ\MHVWMHV]F]HGUXJL]QDF]QLN<script> ]DZLHUDMÈF\RSHUDWRUORJLF]Q\ NWöU\VSUDZG]DF]\ELEOLRWHND M4XHU\]RVWDïDZF]\WDQD-HĝHOL QLH]RVWDïDZF]\WDQDSU]HJOÈGDUNDVSUöEXMHZF]\WDÊVNU\SW M4XHU\]WHJRVDPHJRVHUZHUD ZNWöU\P]QDMGXMHVLÚSR]RVWDïD F]ÚĂÊZLWU\Q\ c07/js/position.js HTML <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”> </script> <script> ZLQGRZM4XHU\__GRFXPHQWZULWH ĳVFULSWVUF ĵMVMTXHU\MVĵ!?VFULSW!ĳ </script> 2SHUDWRUORJLF]Q\V]XNDRELHNWX jQueryXGRVWÚSQLDQHJRSU]H] VNU\SWM4XHU\-HĝHOLZ\PLHQLRQ\RELHNWLVWQLHMHZDUWRĂFLÈ ]ZURWQÈEÚG]LHtruthy i opeUDWRUORJLF]Q\V]\ENR]DNRñF]\ G]LDïDQLH SDWU]UR]G]LDï SRGUR]G]LDïķ:DUWRĂFLWUXWK\ LIDOV\ĵ -HĝHOLELEOLRWHNDM4XHU\QLH ]RVWDïDZF]\WDQDPHWRGD GRFXPHQWZULWH VSRZRGXMH GRGDQLHQRZHJR]QDF]QLND <script>QDVWURQLH1RZ\ znacznik wczyta plik biblioteki M4XHU\]WHJRVDPHJRVHUZHUD ZNWöU\P]QDMGXMHVLÚSR]RVWDïD F]ÚĂÊZLWU\Q\ =DVWRVRZDQLHUR]ZLÈ]DQLD DZDU\MQHJRMHVWZDĝQH SRQLHZDĝVHUZHU&'1PRĝHE\Ê QLHGRVWÚSQ\SOLNPöJï]RVWDÊ SU]HQLHVLRQ\DSRQDGWRSHZQH NUDMHEORNXMÈZ\EUDQHQD]Z\ GRPHQ QDSU]\NïDG*RRJOH JQUERY 361 GDZIE UMIESZCZAĆ SKRYPTY? 3RïRĝHQLHHOHPHQWöZ<script>PRĝHPLHÊZSï\ZQDWRMDNXĝ\WNRZQLN SRVWU]HJDV]\ENRĂÊZF]\W\ZDQLDVWURQ\LQWHUQHWRZHM SZYBKOŚĆ :SLHUZV]\PRNUHVLHIXQNFMRQRZDQLDLQWHUQHWX SURJUDPLĂFLXPLHV]F]DOL]QDF]QLNL<script> ZHOHPHQFLH<head>ZLWU\Q\SRGREQLHMDNDUNXV]H VW\OöZ-HGQDNWDNLHUR]ZLÈ]DQLHPRĝHZ\ZRïDÊ ZUDĝHQLHĝHVWURQ\ZF]\WXMÈVLÚZROQR 6WURQDLQWHUQHWRZDPRĝHXĝ\ZDÊSOLNöZSRFKRG]ÈF\FK]ZLHOXUöĝQ\FKPLHMVF QDSU]\NïDG REUD]\LSOLNL&66PRJÈE\ÊZF]\W\ZDQH]MHGQHJRVHUZHUD&'1ELEOLRWHNDM4XHU\]VHUZHUD&'1 M4XHU\OXE*RRJOHDF]FLRQNL]MHV]F]HLQQHJR =UHJXï\SU]HJOÈGDUNDLQWHUQHWRZDMHGQRF]HĂQLH SRELHUDPDNV\PDOQLHGZDSOLNL]UöĝQ\FK VHUZHUöZ-HGQDNSRUR]SRF]ÚFLXSRELHUDQLD SOLNX-DYD6FULSWQDVWÚSXMH]DWU]\PDQLHSRELHUDQLD LQQ\FKSOLNöZLZVWU]\PDQLHJHQHURZDQLDVWURQ\ DĝGRFKZLOL]DNRñF]HQLDZF]\W\ZDQLDVNU\SWX -DYD6FULSWLMHJRSU]HWZRU]HQLD 'ODWHJRWHĝMHĝHOLXPLHĂFLV]VNU\SWQDNRñFXVWURQ\WXĝSU]HG]DP\NDMÈF\P]QDF]QLNLHP</body> QLHEÚG]LHWRPLDïRZSï\ZXQDJHQHURZDQLH SR]RVWDïHMF]ÚĂFLVWURQ\ .LHG\W\ONRMHVWWRPRĝOLZH VWDUDMVLÚSRV]XNLZDÊDOWHUQDW\Z GODVNU\SWöZ1DSU]\NïDG NRU]\VWDM]&66GRDQLPDFML LDWU\EXWX+70/RQD]ZLH autofocus]DPLDVWXĝ\ZDÊ ]GDU]HQLDloadGRDNW\ZRZDQLD HOHPHQWX 362 JQUERY KOD HTML WCZYTANY W DRZEWIE MODELU DOM .LHG\VNU\SWX]\VNXMHGRVWÚSGRGRNXPHQWX +70/QDVWURQLHLQWHUQHWRZHMGRUR]SRF]ÚFLD G]LDïDQLDWHJRVNU\SWXZ\PDJDQHMHVWDE\+70/ E\ïZF]\WDQ\ZGU]HZLHPRGHOX'20 &]ÚVWRMHVW WRRNUHĂODQHPLDQHPZF]\WDQLDPRGHOX'20 =GDU]HQLHloadPRĝQDZ\NRU]\VWDÊGRZ\ZRïDQLD IXQNFMLFRLQIRUPXMHRZF]\WDQLX+70/-HGQDN ]GDU]HQLHWRMHVWZ\ZRï\ZDQHW\ONRSRZF]\WDQLX VWURQ\LMHMZV]\VWNLFK]DVREöZ:SUDZG]LH PRĝQDXĝ\Ê]GDU]HQLD+70/DOMContentLoaded DOHRQRQLHG]LDïDZVWDUV]\FKSU]HJOÈGDUNDFK WCZYTANY JESZCZE NIE WCZYTANY ul li li li li -HĝHOLVNU\SWVSUöEXMHX]\VNDÊGRVWÚSGR HOHPHQWX]DQLP]RVWDQLHRQZF]\WDQ\QDVWÈSL Z\JHQHURZDQLHEïÚGX:SRZ\ĝV]\PGLDJUDPLH VNU\SWPRĝHX]\VNDÊGRVWÚSGRGZöFKSLHUZV]\FK HOHPHQWöZ<li>DOHQLHGRWU]HFLHJRLF]ZDUWHJR -HĝHOLZF]\W\ZDQLHVWURQ\ SU]HELHJDZROQRLFKFHV] XPLHĂFLÊMHG\QLHQLHZLHONÈ LORĂÊNRGXSU]HGZF]\WDQLHP SR]RVWDïHMF]ÚĂFLVWURQ\WR znacznik <script>PRĝHV] XPLHĂFLÊZHOHPHQFLH<body> *G\SRZVWDZDïDWDNVLÈĝND WHFKQLNDWDE\ïDSRZV]HFKQLH wykorzystywana przez Google w celu przyspieszenia wczytyZDQLDVWURQ\FKRÊNRGMHVWSU]\ W\PWUXGQLHMV]\ZNRQVHUZDFML <!DOCTYPE html> <html> <head> WLWOH!3U]\NïDGRZDVWURQDWLWOH! <link rel=”stylesheet” href=”sample.css” /> <script src=”js/sample.js”></script> <head> <body> K!3U]\NïDGRZDVWURQDK! GLYLG ĵSDJHĵ!0LHMVFHQD]DZDUWRĂÊVWURQ\GLY! </body> </html> W ELEMENCIE <head> 7HJRSRïRĝHQLDQDMOHSLHMXQLNDÊ SRQLHZDĝ 1.0RĝQDRGQLHĂÊZUDĝHQLHĝHVWURQ\ VÈZROQRZF]\W\ZDQH 2.=DZDUWRĂÊPRGHOX'20QLHMHVW ZF]\WDQDZPRPHQFLHZ\NRQ\ZDQLD VNU\SWX.RQLHF]QHMHVWZLÚFZVWU]\PDQLHVLÚ]XUXFKDPLDQLHPIXQNFML DĝGRZ\ZRïDQLD]GDU]HQLDWDNLHJR jak load lub DOMContentLoaded -HĝHOLPXVLV]Xĝ\Ê]QDF]QLND <script>ZHOHPHQFLH<head> WRXPLHĂÊJRWXĝSU]HG]DP\NDMÈF\P ]QDF]QLNLHP</head> <!DOCTYPE html> <html> <head> WLWOH!3U]\NïDGRZDVWURQDWLWOH! <link rel=”stylesheet” href=”sample.css” /> <head> <body> K!3U]\NïDGRZDVWURQDK! <script src=”js/sample.js”></script> GLYLG ĵSDJHĵ!0LHMVFHQD]DZDUWRĂÊVWURQ\GLY! </body> </html> <!DOCTYPE html> <html> <head> WLWOH!3U]\NïDGRZDVWURQDWLWOH! <link rel=”stylesheet” href=”sample.css” /> <head> <body> K!3U]\NïDGRZDVWURQDK! GLYLG ĵSDJHĵ!0LHMVFHQD]DZDUWRĂÊVWURQ\GLY! <script src=”js/sample.js”></script> </body> </html> W ELEMENCIE <body> 3RGREQLHMDNZSU]\SDGNXVNU\SWöZ ZHOHPHQFLH<head>XPLHV]F]HQLH VNU\SWXSRĂURGNXHOHPHQWX<body> VSRZRGXMHVSRZROQLHQLHZF]\W\ZDQLD SR]RVWDïHMF]ÚĂFLVWURQ\ -HĝHOLXĝ\ZDV]Z\ZRïDQLD GRFXPHQWZULWH HOHPHQW <script>SRZLQLHQ]QDMGRZDÊ VLÚZPLHMVFXZNWöU\PPDVLÚ SRMDZLÊ]DZDUWRĂÊ7RMHVWMHGHQ ]ZLHOXGREU\FKSRZRGöZGOD NWöU\FKQDOHĝ\XQLNDÊVWRVRZDQLD GRFXPHQWZULWH PRZED ZAMYKAJĄCYM ZNACZNIKIEM </body> 7RMHVWLGHDOQHPLHMVFHQDZF]\WDQLH VNU\SWXSRQLHZDĝ 1.6NU\SWQLHEORNXMHZF]\W\ZDQLD SR]RVWDï\FKNRPSRQHQWöZVWURQ\ 2.=DQLPGRMG]LHGRXUXFKRPLHQLD VNU\SWXPRGHO'20MHVWMXĝ ZF]\WDQ\ JQUERY 363 DOKUMENTACJA JQUERY 'RNïDGQÈOLVWÚIXQNFMLRIHURZDQ\FKSU]H]M4XHU\ ]QDMG]LHV]ZZLWU\QLHhttp://api.jquery.com/ 1LHPDPRĝOLZRĂFLSU]HGVWDZLHQLDFDïHM IXQNFMRQDOQRĂFLM4XHU\ZMHGQ\PUR]G]LDOH QDZHWWDNGïXJLPMDNWHQ3R]QDïHĂWXWDMZLHOH QDMSRSXODUQLHMV]\FKIXQNFMLLSRZLQLHQHĂPLHÊMXĝ Z\VWDUF]DMÈFÈZLHG]ÚRM4XHU\DE\]UR]XPLHÊ VSRVöEG]LDïDQLDELEOLRWHNLLSRWUDğÊZ\NRU]\VWDÊ MÈZHZïDVQ\FKVNU\SWDFK :SR]RVWDï\FKUR]G]LDïDFKNVLÈĝNL]REDF]\V] NROHMQHSU]\NïDG\RSDUWHQDWHMELEOLRWHFH KORZYSTANIE Z DOKUMENTACJI *G\Z\ĂZLHWODV]ZLWU\QÚ]GRNXPHQWDFMÈSR OHZHMVWURQLHPDV]UöĝQHW\S\IXQNFMRQDOQRĂFL ]NWöU\PLPRĝHV]VLÚ]DSR]QDÊ -HĂOLNOLNQLHV]GRZROQÈPHWRGÚZNROXPQLH JïöZQHMZ\ĂZLHWOLVLÚOLVWDSDUDPHWUöZSU]\MPRZDQ\FKSU]H]WÚPHWRGÚ3DUDPHWU\RSFMRQDOQHVÈ SRGDZDQHZQDZLDVDFKNZDGUDWRZ\FK :GRNXPHQWDFML]QDMG]LHV]WDNĝHPHWRG\ SU]HVWDU]DïH8ĝ\FLHWHJRURG]DMXPHWRGMHVW RGUDG]DQHSRQLHZDĝSUDZGRSRGREQLH]RVWDQÈ XVXQLÚWHZSU]\V]ï\FKZHUVMDFKM4XHU\ RLOHQLH ]RVWDï\MXĝXVXQLÚWH 364 JQUERY =GRE\WDGRWÈGZLHG]DSRZLQQD&LZ\VWDUF]\Ê GRUR]SRF]ÚFLDSUDF\]REV]HUQÈLGRNïDGQÈ GRNXPHQWDFMÈM4XHU\NWöUÈ]QDMG]LHV]ZZLWU\QLH http://api.jquery.com/ :LWU\QDGRNXPHQWDFML]DZLHUDLQIRUPDFMHQD WHPDWZV]\VWNLFKGRVWÚSQ\FKPHWRGLZïDĂFLZRĂFLZW\PUöZQLHĝQRZ\FKIXQNFMLGRGDQ\FK ZQDMQRZV]\FKZ\GDQLDFKELEOLRWHNL3RQDGWR ZGRNXPHQWDFML]QDMG]LHV]LQIRUPDFMHRIXQNFMDFKNWöU\FKREVïXJDEÚG]LHSRU]XFRQD ROZSZERZENIE JQUERY ZA POMOCĄ WTYCZEK :W\F]NLWRSRSURVWXVNU\SW\UR]V]HU]DMÈFHIXQNFMRQDOQRĂÊELEOLRWHNLM4XHU\ 'RVWÚSQHVÈVHWNLZW\F]HNJRWRZ\FKGRXĝ\FLD :W\F]NLRIHUXMÈIXQNFMRQDOQRĂÊQLHGRVWÚSQÈ ZELEOLRWHFHM4XHU\=UHJXï\VÈSU]H]QDF]RQHGR Z\NRQ\ZDQLDRNUHĂORQ\FK]DGDñQDSU]\NïDG WZRU]HQLDSRND]XVODMGöZRGWZDU]DQLDZLGHR SU]\JRWRZ\ZDQLDDQLPDFMLWUDQVIRUPDFMLGDQ\FK XVSUDZQLDQLDIRUPXODU]\VLHFLRZ\FKLZ\ĂZLHWODQLDQRZ\FKGDQ\FKSRFKRG]ÈF\FK]H]GDOQHJR VHUZHUD :W\F]NLVÈWZRU]RQHZWDNLVSRVöEDE\QRZH PHWRG\UR]V]HU]Dï\RELHNWjQueryLW\PVDP\P PRJï\E\ÊVWRVRZDQHZGRSDVRZDQ\P]ELRU]H -HĝHOLZLHV]MDNZ\NRQDÊSRQLĝV]HRSHUDFMH ZM4XHU\ 2GZLHGěZLWU\QÚhttp://plugins.jquery.com/ DE\]REDF]\ÊLOHMHVWGRVWÚSQ\FKZW\F]HNLMDNL MHVWLFK]DNUHV:V]\VWNLHPRĝQDEH]SïDWQLH SRELHUDÊLZ\NRU]\VW\ZDÊZHZïDVQ\FKZLWU\QDFKLQWHUQHWRZ\FK,VWQLHMÈWDNĝHZLWU\Q\ RIHUXMÈFHSïDWQHZW\F]NLM4XHU\ QDSU]\NïDG http://codecanyon.net/ WRRJURPQÈF]ÚĂÊIXQNFMRQDOQRĂFLZW\F]HNPRĝHV] Z\NRU]\VWDÊEH]NRQLHF]QRĂFLVDPRG]LHOQHJR WZRU]HQLDNRGX:UR]G]LDOH]QDMG]LHV] SU]\NïDGXWZRU]HQLDSURVWHMZW\F]NLM4XHU\ • Z\ELHUDÊHOHPHQW\ • Z\ZRï\ZDÊPHWRG\LXĝ\ZDÊSDUDPHWUöZ JAK WYBRAĆ WTYCZKĘ? 3RGF]DVZ\ERUXZW\F]NLZDUWRVSUDZG]LÊF]\ QDGDOMHVWUR]ZLMDQDRUD]F]\LQQLXĝ\WNRZQLF\ QDSRWNDOLMDNLHNROZLHN]ZLÈ]DQH]QLÈSUREOHP\ 3RPRFQHPRĝHE\Ê]DSR]QDQLHVLÚ]QDVWÚSXMÈF\PLLQIRUPDFMDPL • .LHG\RVWDWQLRXDNWXDOQLRQRZW\F]NÚ" • ,OHRVöEREVHUZXMHGDQÈZW\F]NÚ" • &RPRĝQD]QDOHěÊZUDSRUWDFKEïÚGöZ" -HĝHOL]QDMG]LHV]EïÈGZVNU\SFLHL]DGDMHV] S\WDQLHWRSDPLÚWDMĝHDXWRU]\ZW\F]HNF]ÚVWR PDMÈVZRMÈSUDFÚL]DMPXMÈVLÚQLPLZF]DVLH ZROQ\PDE\SRPöFLQQ\PLPLHÊZNïDGZUR]ZöM VSRïHF]QRĂFL JQUERY 365 BIBLIOTEKI JAVASCRIPT M4XHU\WRSU]\NïDGWHJRFRSURJUDPLĂFLQD]\ZDMÈELEOLRWHNÈ-DYD6FULSW 7RSRSURVWXSOLN-DYD6FULSWGRïÈF]DQ\QDVWURQLH 3RMHJRZF]\WDQLXPDV]GRVWÚSGR]GHğQLRZDQ\FKZELEOLRWHFHIXQNFML RELHNWöZPHWRGLZïDĂFLZRĂFL .RQFHSFMDELEOLRWHNLSROHJDQD W\PĝHSR]ZDODSRĝ\F]DÊNRG ]MHGQHJRSOLNXDQDVWÚSQLH Xĝ\ZDÊMHJRIXQNFMLRELHNWöZ PHWRGLZïDĂFLZRĂFLZLQQ\P VNU\SFLH 3RGRïÈF]HQLXVNU\SWXQD VWURQLHMHJRIXQNFMRQDOQRĂÊ MHVWJRWRZDGRXĝ\FLD6SRVöE wykorzystania biblioteki ]QDMG]LHV]ZSRĂZLÚFRQHMMHM GRNXPHQWDFML M4XHU\WRQDMF]ÚĂFLHMXĝ\ZDQD ELEOLRWHNDZLQWHUQHFLH.LHG\ MÈSR]QDV]PRĝHV]VSUöERZDÊ VNRU]\VWDÊWDNĝH]LQQ\FK Z\PLHQLRQ\FKSRQLĝHMELEOLRWHN =DOHWÈSRSXODUQ\FKELEOLRWHN MHVWWRĝHVÈGRNïDGQLH SU]HWHVWRZDQH1DGQLHNWöU\PL SUDFXMÈFDïH]HVSRï\SURJUDPLVWöZ]DMPXMÈF\FKVLÚW\P ZZROQ\PF]DVLH -HGQÈ]SRGVWDZRZ\FKZDG ELEOLRWHNMHVWWRĝHQDMF]ÚĂFLHM ]DZLHUDMÈWDNĝHQLHSRWU]HEQÈ &LIXQNFMRQDOQRĂÊ2]QDF]D WRNRQLHF]QRĂÊSREUDQLD QLHSRWU]HEQHJRNRGX FRPRĝH VSRZROQLÊG]LDïDQLHZLWU\Q\ 5R]ZLÈ]DQLHPMHVWVNRSLRZDQLH i wykorzystanie tylko interesuMÈFHJR&LÚIUDJPHQWXELEOLRWHNL OXEZUÚF]VDPRG]LHOQHSU]\JRWRZDQLHVNU\SWXZ\NRQXMÈFHJR WR]DGDQLH MODEL DOM I ZDARZENIA INTERFEJS UŻYTKOWNIKA GRAFIKA I WYKRESY =HSWRMV YUI 'RMRMV 0RR7RROVMV jQuery UI M4XHU\0RELOH 7ZLWWHU%RRWVWUDS YUI &KDUWMV 'MV 3URFHVVLQJMV 5DSKDHOMV SZABLONY APLIKACJE SIECIOWE 0XVWDFKHMV +DQGOHEDUVMV M4XHU\0RELOH $QJXODUMV %DFNERQHMV (PEHUMV ZAPEWNIENIE ZGODNOŚCI 366 JQUERY 0RGHUQL]UMV <HS1RSHMV 5HTXLUHMV UNIKANIE KONFLIKTÓW Z INNYMI BIBLIOTEKAMI :F]HĂQLHMZUR]G]LDOHGRZLHG]LDïHĂVLÚĝH$()MHVWVNUöWHPGODjQuery() =QDN$MHVWXĝ\ZDQ\WDNĝHSU]H]LQQHELEOLRWHNLQDSU]\NïDGSURWRW\SHMV 0RR7RROVL<8,$E\XQLNQÈÊNRQĠLNWöZPLÚG]\VNU\SWDPLQDOHĝ\VWRVRZDÊ Z\PLHQLRQHSRQLĝHMWHFKQLNL DOŁĄCZENIE JQUERY PO INNYCH BIBLIOTEKACH DOŁĄCZENIE JQUERY PRZED INNYMI BIBLIOTEKAMI 3RQLĝHMSLHUZV]HñVWZREÚG]LHPLDïRXĝ\FLH]QDNX $SU]H]M4XHU\ 3RQLĝHMSLHUZV]HñVWZREÚG]LHPLDïRXĝ\FLH]QDNX $SU]H]LQQHVNU\SW\ <script src=”inna-biblioteka.js”></script> <script src=”jquery.js”></script> <script src=”jquery.js”></script> <script src=”inna-biblioteka.js”></script> 1DSRF]ÈWNXVNU\SWXPRĝQD]DVWRVRZDÊPHWRGÚ QR&RQĠLFW LQDND]DÊ]ZROQLHQLHVNUöWX$DE\ PöJïE\ÊZ\NRU]\VW\ZDQ\SU]H]LQQHVNU\SW\ 1DVWÚSQLHQDOHĝ\Xĝ\ZDÊSHïQHMQD]Z\IXQNFML ]DPLDVWMHMVNUöWX =QDN$PDWXWDM]QDF]HQLH]GHğQLRZDQHZLQQHM ELEOLRWHFH3RQDGWRQLHWU]HEDVWRVRZDÊPHWRG\ QR&RQĠLFW SRQLHZDĝQLHEÚG]LHPLDïD ĝDGQHJRHIHNWX-HGQDNQDGDOPRĝQDXĝ\ZDÊ SHïQHMQD]Z\jQuery M4XHU\QR&RQĠLFW jQuery(function() { jQuery(’div’).hide(); }); jQuery(document).ready(function() { jQuery(’div’).hide(); }); 6NU\SWPRĝQDRSDNRZDÊZ,,)(LW\PVDP\P ]DFKRZDÊPRĝOLZRĂÊ]DVWRVRZDQLD$ ,VWQLHMHPRĝOLZRĂÊSU]HND]DQLD$MDNRDUJXPHQWX IXQNFMLDQRQLPRZHMZ\ZRï\ZDQHMSU]H]PHWRGÚ .ready()QDSU]\NïDGZQDVWÚSXMÈF\VSRVöE M4XHU\QR&RQĠLFW (function($) { $(’div’).hide(); })(jQuery); jQuery(document).ready(function($) { $(’div’).hide(); }); (ZHQWXDOQLHPRĝQDZVND]DÊZïDVQ\DOLDVQD SU]\NïDG$j 3RQLĝHMSU]HGVWDZLRQRRGSRZLHGQLNSRZ\ĝV]HJR NRGX YDUM M4XHU\QR&RQĠLFW $j(document).ready(function() { $j(’div’).hide(); }); jQuery(function($){ $(’div’).hide(); }); JQUERY 367 JQUERY PRZYKŁAD JQUERY :W\PSU]\NïDG]LHZ\NRU]\VWDQRZLHOHWHFKQLN SU]HGVWDZLRQ\FKZUR]G]LDOH%XGXMHP\WXOLVWÚ GRNWöUHMXĝ\WNRZQLNPRĝHGRGDZDÊQRZHHOHPHQW\DWDNĝHXVXZDÊ]QLHMLVWQLHMÈFH • 8ĝ\WNRZQLNPDPRĝOLZRĂÊGRGDZDQLDQRZ\FKHOHPHQWöZOLVW\ • 8ĝ\WNRZQLNPRĝHNOLNQÈÊHOHPHQWLW\PVDP\PZVND]DÊZ\NRQD• QLHGDQHJR]DGDQLD 3RNOLNQLÚFLXHOHPHQW]RVWDQLHSU]HQLHVLRQ\ QDNRQLHFOLVW\LR]QDF]RQ\MDNRZ\NRQDQ\ 3RQRZQHNOLNQLÚFLHHOHPHQWXZVND]XMÈFHJRZ\NRQDQH]DGDQLH VSRZRGXMHXVXQLÚFLHHOHPHQWX]OLVW\ 1DJïöZHNOLVW\]DZLHUDXDNWXDOQLRQÈOLF]EÚHOHPHQWöZ]QDMGXMÈF\FK VLÚQDOLĂFLH -DNPRĝHV]]REDF]\ÊZSU]\NïDG]LHNRGRSDUW\QDM4XHU\MHVW ]QDF]QLH]ZLÚěOHMV]\QLĝJG\E\SRZVWDïMHG\QLHZ-DYD6FULSW 3RQDGWRELEOLRWHNDM4XHU\]DMPXMHVLÚZV]HONLPLQLHVSöMQRĂFLDPL Z\VWÚSXMÈF\PLPLÚG]\SU]HJOÈGDUNDPLLQWHUQHWRZ\PLLQLHSRWU]HEQH MHVWĝDGQHGRGDWNRZHUR]ZLÈ]DQLHDZDU\MQH 3RQLHZDĝGROLVW\PRJÈE\ÊGRGDZDQHQRZHHOHPHQW\]GDU]HQLDVÈ REVïXJLZDQH]DSRPRFÈGHOHJDFML]GDU]Hñ*G\Xĝ\WNRZQLNNOLNQLH GRZROQHPLHMVFHHOHPHQWX<ul>PHWRGD.on()SU]\VWÚSXMHGR REVïXJL]GDU]HQLD:HZQÈWU]SURFHGXU\REVïXJL]GDU]Hñ]QDMGXMH VLÚNRQVWUXNFMDZDUXQNRZDVSUDZG]DMÈFDF]\]DGDQLHZGDQ\P HOHPHQFLHOLVW\ • QLH]RVWDïRMHV]F]HZ\NRQDQHĽZWDNLPSU]\SDGNXNOLNQLÚFLH • SRZRGXMHR]QDF]HQLH]DGDQLDMDNRZ\NRQDQHJRSU]HVXQLÚFLHJR QDNRQLHFOLVW\LXDNWXDOQLHQLHOLF]QLND ]RVWDïRZ\NRQDQHĽZWDNLPSU]\SDGNXGUXJLHNOLNQLÚFLH HOHPHQWXSRZRGXMHMHJRXNU\FLHLRVWDWHF]QHXVXQLÚFLH]OLVW\ 8ĝ\FLHNRQVWUXNFMLZDUXQNRZHMLZïDVQ\FKIXQNFML GRREVïXJLOLF]QLND SRND]XMHMDNWHFKQLNLM4XHU\VÈZ\NRU]\VW\ZDQHZSRïÈF]HQLX ]WUDG\F\MQ\PMÚ]\NLHP-DYD6FULSWNWöU\SR]QDMHV]ZWHMNVLÈĝFH 3RMDZLDQLHVLÚLXVXZDQLHHOHPHQWöZMHVWDQLPRZDQHDDQLPDFMH WHSRND]XMÈMDNPRĝQDïÈF]\ÊPHWRG\ZFHOXWZRU]HQLDVNRPSOLNRZDQ\FKLQWHUDNFMLNWöUHPDMÈ]DFKRG]LÊZW\FKVDP\FKZ\EUDQ\FK HOHPHQWDFK JQUERY 369 PRZYKŁAD JQUERY c07/js/example.js JAVASCRIPT $(function() { .RQğJXUDFMD YDUOLVWQHZ,WHP)RUPQHZ,WHP%XWWRQ var item = ’’; 7D]PLHQQDHOHPHQWX]DZLHUDSXVW\FLÈJWHNVWRZ\ $list = $(’ul’); %XIRURZDQLHQLHXSRU]ÈGNRZDQHMOLVW\ QHZ,WHP)RUP ĳQHZ,WHP)RUPĳ %XIRURZDQLHIRUPXODU]DGRGDZDQLDQRZHJRHOHPHQWX QHZ,WHP%XWWRQ ĳQHZ,WHP%XWWRQĳ %XIRURZDQLHSU]\FLVNXSRND]XMÈFHJRIRUPXODU] $(’li’).hide().each(function(index) { 8NU\FLHHOHPHQWöZOLVW\ $(this).delay(450 * index).fadeIn(1600); $QDVWÚSQLHLFKSRND]DQLH }); // Licznik elementów. function updateCount() { 'HNODUDFMDIXQNFML var items = $(’li[class!=complete]’).length; /LF]EDHOHPHQWöZ]QDMGXMÈF\FK VLÚQDOLĂFLH */ $(’#counter’).text(items); 8PLHV]F]HQLHOLF]E\ZQDJïöZNX } updateCount(); :\ZRïDQLHIXQNFML .RQğJXUDFMDIRUPXODU]DGRGDZDQLDQRZHJRHOHPHQWX QHZ,WHP%XWWRQVKRZ 3RND]DQLHSU]\FLVNX QHZ,WHP)RUPKLGH 8NU\FLHIRUPXODU]D ĳVKRZ)RUPĳ RQ ĳFOLFNĳIXQFWLRQ ^3RNOLNQLÚFLXQRZHJRHOHPHQWX QHZ,WHP%XWWRQKLGH 8NU\FLHSU]\FLVNX QHZ,WHP)RUPVKRZ 3RND]DQLHIRUPXODU]D }); ']LDïDQLHVNU\SWXMHVW ZVWU]\PDQHDĝGRFKZLOL ZF]\WDQLDFDïHJRPRGHOX'20 SRQLHZDĝZ\ZRïDQLH]QDMGXMH VLÚZVNUöFLHGODPHWRG\ document.ready()7ZRU]RQH VÈ]PLHQQHSU]H]QDF]RQHGR Xĝ\FLDZVNU\SFLHPLÚG]\ LQQ\PLHOHPHQW\Z\EUDQHSU]H] M4XHU\NWöUHWU]HEDEXIRURZDÊ 370 JQUERY Funkcja updateCount() VSUDZG]DLOHHOHPHQWöZ]QDMGXMHVLÚQDOLĂFLHDQDVWÚSQLH Z\ĂZLHWODWÚOLF]EÚZQDJïöZNX )XQNFMDWDMHVWZ\ZRï\ZDQD QDW\FKPLDVWZFHOXREOLF]HQLD OLF]E\HOHPHQWöZOLVW\ZWUDNFLH ZF]\W\ZDQLDOLVW\DOLF]EDMHVW Z\ĂZLHWODQDRERNQDJïöZND )RUPXODU]SU]H]QDF]RQ\GR GRGDZDQLDQRZ\FKHOHPHQWöZ OLVW\MHVWXNU\W\SRGF]DVZF]\W\ZDQLDVWURQ\LZ\ĂZLHWODQ\ JG\Xĝ\WNRZQLNNOLNQLHSU]\FLVN GRGDQLDQRZHJRHOHPHQWX 3RNOLNQLÚFLXWHJRSU]\FLVNX SU]H]Xĝ\WNRZQLNDQDVWÚSXMH GRGDQLHQRZHJRHOHPHQWXLZ\ZRïDQLHIXQNFMLupdateCount() PRZYKŁAD JQUERY c07/js/example.js JAVASCRIPT 'RGDQLHQRZHJRHOHPHQWXOLVW\ QHZ,WHP)RUPRQ ĳVXEPLWĳIXQFWLRQ H ^.LHG\QRZ\HOHPHQW]RVWDQLHSU]HND]DQ\ e.preventDefault(); 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D var text = $(’input:text’).val(); 3REUDQLHZDUWRĂFLSRODWHNVWRZHJR $list.append(’<li>’ + text + ’</li>’); 'RGDQLHHOHPHQWXQDNRñFXOLVW\ $(’input:text’).val(’’); 2SUöĝQLHQLHSRODWHNVWRZHJR updateCount(); 8DNWXDOQLHQLHOLF]QLND }); 2EVïXJDNOLNQLÚFLDXĝ\ZDQDMHVWGHOHJDFMDZHOHPHQFLHXO! $list.on(’click’, ’li’, function() { var $this = $(this); %XIRURZDQLHHOHPHQWXZRELHNFLHM4XHU\ var complete = $this.hasClass(’complete’); &]\]DGDQLH]RVWDïRZ\NRQDQH" if (complete === true) { $this.animate({ 6SUDZG]HQLHF]\]DGDQLH]RVWDïRZ\NRQDQH -HĝHOLWDNDQLPXMHP\ZïDĂFLZRĂFLRSDFLW\ // i padding. opacity: 0.0, paddingLeft: ’+=180’ `ĳVZLQJĳIXQFWLRQ ^ 8ĝ\FLHIXQNFMLZ\ZRïDQLD]ZURWQHJRSR]DNRñF]HQLXDQLPDFML $this.remove(); &DïNRZLWHXVXQLÚFLHGDQHJRHOHPHQWX }); } else { :SU]HFLZQ\PUD]LHR]QDF]DP\]DGDQLHMDNRZ\NRQDQH item = $this.text(); 3REUDQLHWHNVWX]HOHPHQWXOLVW\ $this.remove(); 8VXQLÚFLHHOHPHQWXOLVW\ $list 'RGDQLHHOHPHQWX]SRZURWHPQDNRñFXOLVW\MDNR]DGDQLDZ\NRQDQHJR DSSHQG ĳOLFODVV ?ĵFRPSOHWH?ĵ!ĳLWHPĳOL!ĳ .hide().fadeIn(300); 8NU\FLHHOHPHQWXDE\PöJïVLÚSöěQLHMSRMDZLÊ updateCount(); 8DNWXDOQLHQLHOLF]QLND } .RQLHFEORNXHOVH }); .RQLHFSURFHGXU\REVïXJL]GDU]Hñ }); 0HWRGD.on()QDVïXFKXMH F]\Xĝ\WNRZQLNNOLNQÈï OLVWÚSRQLHZDĝVNU\SWVWRVXMH GHOHJDFMÚ]GDU]Hñ*G\QDVWÈSL NOLNQLÚFLHOLVW\NOLNQLÚW\HOHPHQW MHVWSU]HFKRZ\ZDQ\ZRELHNFLH M4XHU\LEXIRURZDQ\Z]PLHQQHM o nazwie $this :NROHMQ\PNURNXNRGVSUDZG]DF]\HOHPHQWPDNODVÚ o nazwie complete-HĝHOLWDN Xĝ\WNRZQLNZLG]LDQLPDFMÚ HOHPHQWX]QLNDMÈFHJR]ZLGRNX DQDVWÚSQLHHOHPHQWMHVWXVXZDQ\]OLVW\:SU]\SDGNXEUDNX klasy completeHOHPHQW]RVWDMH SU]HQLHVLRQ\QDNRQLHFOLVW\ 3RXPLHV]F]HQLXHOHPHQWXQD NRñFXOLVW\MHJRDWU\EXWclass RWU]\PXMHZDUWRĂÊcomplete 1DNRñFXQDVWÚSXMHZ\ZRïDQLH funkcji updateCount() w celu XDNWXDOQLHQLDOLF]E\HOHPHQWöZ SR]RVWDï\FKQDOLĂFLH JQUERY 371 PODSUMOWANIE f M4XHU\WRSOLN-DYD6FULSWNWöU\GRïÈF]DV]QDVWURQDFK LQWHUQHWRZ\FK f 'RïÈF]RQ\SOLNSR]ZDODQDV]\EV]HLïDWZLHMV]HWZRU]HQLH NRGX-DYD6FULSWG]LDïDMÈFHJRZUöĝQ\FKSU]HJOÈGDUNDFK LQWHUQHWRZ\FK2SLHUDVLÚWRQDGZöFKNURNDFK 1.8ĝ\FLHVHOHNWRUöZ&66ZFHOXZ\EUDQLDMHGQHJROXEZLÚFHM ZÚ]ïöZGU]HZDPRGHOX'20 2.8ĝ\FLHZEXGRZDQ\FKPHWRGM4XHU\GRSUDF\]Z\EUDQ\PL HOHPHQWDPL f 6NïDGQLDVHOHNWRUDVW\OX&66SR]ZDODQDïDWZHZ\ELHUDQLH HOHPHQWöZSU]H]QDF]RQ\FKGRGDOV]HMSUDF\3RQDGWR ELEOLRWHNDRIHUXMHPHWRG\XïDWZLDMÈFHQDZLJDFMÚSRPRGHOX '20 f M4XHU\XïDWZLDREVïXJÚ]GDU]HñSRQLHZDĝPHWRG\]GDU]Hñ G]LDïDMÈZHZV]\VWNLFKSU]HJOÈGDUNDFK f M4XHU\RIHUXMHPHWRG\SR]ZDODMÈFHV]\ENRLïDWZRZ\NRQDÊ ZLHOH]DGDñNWöUHQDMF]ÚĂFLHMPXV]ÈE\ÊSU]HSURZDG]DQH SU]H]SURJUDPLVWöZ-DYD6FULSW 372 JQUERY 8 AJAX I JSON Ajax to technika wczytywania danych we fragmencie strony EH]SRWU]HE\RGĂZLHĝDQLDMHMFDïRĂFL'DQHVÈQDMF]ÚĂFLHM dostarczane w formacie o nazwie JSON DQJJavaScript Object Notation 0RĝOLZRĂÊZF]\WDQLDQRZHM]DZDUWRĂFLW\ONRQDF]ÚĂFLVWURQ\]QDF]QLHSRSUDZLDZUDĝHQLD Xĝ\WNRZQLNDSRQLHZDĝQLHPXVLRQRF]HNLZDÊQDRGĂZLHĝHQLHFDïHMVWURQ\ZFHOXXDNWXDOQLHQLDW\ONRMHMIUDJPHQWX'RSURZDG]LïRWRGRSRZVWDQLDWDN]ZDQ\FKDSOLNDFMLLQWHUQHWRZ\FK ZSRVWDFLSRMHG\QF]\FKVWURQ QDU]ÚG]LDLQWHUQHWRZHSU]\SRPLQDMÈFHZG]LDïDQLXWUDG\F\MQH RSURJUDPRZDQLHFKRÊXUXFKDPLDQHZSU]HJOÈGDUFHLQWHUQHWRZHM :W\PUR]G]LDOH]RVWDQÈ RPöZLRQHQDVWÚSXMÈFH]DJDGQLHQLD 374 CO TO JEST AJAX? FORMATY DANYCH JQUERY I AJAX $MD[SR]ZDODQDĝÈGDQLH danych z serwera oraz wczyWDQLHLFKEH]NRQLHF]QRĂFL RGĂZLHĝHQLDFDïHMVWURQ\ 6HUZHU\]Z\NOHZ\V\ïDMÈ GDQHZIRUPDWDFK+70/ XML i JSON — formaty te SR]QDV]ZW\PUR]G]LDOH M4XHU\XïDWZLDZ\NRQ\ZDQLH ĝÈGDñ$MD[RUD]SU]HWZDrzanie danych zwróconych SU]H]VHUZHU AJAX I JSON AJAX I JSON 375 CO TO JEST AJAX? =WHFKQRORJLÈ$MD[PRJïHĂVLÚ]HWNQÈÊZZLHOXZLWU\QDFKLQWHUQHWRZ\FK QDZHWMHĂOLQLHZLHG]LDïHĂRMHM]DVWRVRZDQLX Moog Music Inc. @moogmusicinc multimoog multimoog for sale multimodal :\V]XNLZDQLHQDĝ\ZR OXEDXWRPDW\F]QHX]XSHï QLDQLH QDMF]ÚĂFLHMRSLHUDVLÚQDWHFKQRORJLL$MD[ )XQNFMÚWDNLHJRZ\V]XNLZDQLDRIHUXMHPLÚG]\ LQQ\PL*RRJOH*G\ZSURZDG]DV]Z\UDĝHQLD ZSROXZ\V]XNLZDQLDQDVWURQLHJïöZQHM*RRJOH F]DVDPLRWU]\PXMHV]Z\QLNL]DQLP]DNRñF]\V] ZSLV\ZDQLHWHNVWX Urodzeni tego dnia w 1896 roku: Léon Theremin, fizyk, szpieg i wynalazca jednego z pierwszych elektronicznych instrumentów muzycznych pic.twitter.com/theremin :LWU\Q\LQWHUQHWRZH]DZLHUDMÈFHWUHĂÊJHQHURZDQÈ SU]H]Xĝ\WNRZQLNöZQDSU]\NïDG7ZLWWHUL)OLFNU PRJÈSR]ZDODÊQDZ\ĂZLHWODQLHWHMWUHĂFL WDNLFK MDNQDMQRZV]\WZHHWOXE]GMÚFLD QDLQQ\FK ZLWU\QDFKFRZLÈĝHVLÚ]SRELHUDQLHPLQIRUPDFML ]VHUZHUöZZ\PLHQLRQ\FKXVïXJ Wybierz nazwę użytkownika 1 produkt dodano do koszyka wyświetl koszyk Czasami podczas zakupów internetowych GRGDMHV]SURGXNWGRNRV]\NDNWöU\]RVWDMH XDNWXDOQLRQ\EH]RSXV]F]DQLDELHĝÈFHMVWURQ\ -HGQRF]HĂQLHZLWU\QDPRĝHZ\ĂZLHWOLÊNRPXQLNDW SRWZLHUG]DMÈF\GRGDQLHSURGXNWXGRNRV]\ND Ta nazwa użytkownika jest zajęta. Wypróbujesz inną? Dostępna: minimoog70 *G\UHMHVWUXMHV]NRQWRXĝ\WNRZQLNDZZLWU\QLH ]DQLPXNRñF]\V]Z\SHïQLDQLHFDïHJRIRUPXODU]D VLHFLRZHJRVNU\SWPRĝHVSUDZG]LÊF]\Z\EUDQD QD]ZDXĝ\WNRZQLNDMHVWGRVWÚSQD :LWU\Q\LQWHUQHWRZHPRJÈNRU]\VWDÊ]WHFKQRORJLL$MD[GRZF]\W\ZDQLDGDQ\FKZWOHDE\PRJï\E\Ê Xĝ\WHOXEZ\ĂZLHWORQHSöěQLHM 376 AJAX I JSON DLACZEGO UŻYWAĆ TECHNOLOGII AJAX? $MD[Z\NRU]\VWXMHPRGHOSU]HWZDU]DQLDDV\QFKURQLF]QHJR2]QDF]DWR ĝHXĝ\WNRZQLNPRĝHZ\NRQ\ZDÊLQQH]DGDQLDJG\SU]HJOÈGDUNDLQWHUQHWRZD RF]HNXMHQDZF]\WDQLHGDQ\FK']LÚNLWHPXXĝ\WNRZQLNPDOHSV]HZUDĝHQLD UŻYCIE TECHNOLOGII AJAX PODCZAS WCZYTYWANIA STRON UŻYCIE TECHNOLOGII AJAX PO WCZYTANIU STRON .LHG\SU]HJOÈGDUNDQDSRW\ND]QDF]QLN<script> QDMF]ÚĂFLHM]DWU]\PXMHJHQHURZDQLHSR]RVWDïHM F]ÚĂFLVWURQ\DĝGRFKZLOLZF]\WDQLDLSU]HWZRU]HQLDGDQHJRVNU\SWX7DNLHSRGHMĂFLHMHVWQD]\ZDQH modelem przetwarzania synchronicznego 3RZF]\WDQLXVWURQ\MHĝHOLFKFHV]XDNWXDOQLÊ ]DZDUWRĂÊZLG]LDQÈSU]H]Xĝ\WNRZQLNDZRNQLH SU]HJOÈGDUNLWR]Z\NOHRGĂZLHĝDV]FDïÈVWURQÚ 2]QDF]DWRĝHXĝ\WNRZQLNPXVL]DF]HNDÊQD SREUDQLHFDïHM]XSHïQLHQRZHMVWURQ\LZ\JHQHURZDQLHMHMSU]H]SU]HJOÈGDUNÚ Kiedy podczas wczytywania strony skrypt musi SREUDÊGDQH]VHUZHUD QDSU]\NïDGNXUV\Z\PLDQ\ZDOXWOXELQIRUPDFMHRVWDQLH SU]HJOÈGDUNDQLH W\ONRF]HNDQDZF]\WDQLHLSU]HWZRU]HQLHVNU\SWX DOHUöZQLHĝQDSREUDQLH]VHUZHUDGDQ\FKNWöUH PDMÈE\ÊZ\ĂZLHWORQHSU]H]VNU\SW :SU]\SDGNXWHFKQRORJLL$MD[SU]HJOÈGDUNDPRĝH ĝÈGDÊSHZQ\FKGDQ\FK]VHUZHUDDQDVWÚSQLH MXĝSRZ\NRQDQLXĝÈGDQLDGDQ\FK NRQW\QXRZDÊ ZF]\W\ZDQLHSR]RVWDïHMF]ÚĂFLVWURQ\LSU]HWZDU]DQLHG]LDïDñSRGHMPRZDQ\FKSU]H]Xĝ\WNRZQLND QDWHMVWURQLH7DNLHSRGHMĂFLHMHVWQD]\ZDQH modelem przetwarzania asynchronicznego (inaczej QLHEORNXMÈFHJR 3U]HJOÈGDUNDLQWHUQHWRZDQLHF]HNDQDSREUDQLH ]HZQÚWU]Q\FKGDQ\FKDE\Z\ĂZLHWOLÊVWURQÚ .LHG\VHUZHUXG]LHOLRGSRZLHG]LLGRVWDUF]\GDQH QDVWÚSXMHZ\ZRïDQLH]GDU]HQLD SRGREQLHMDN zdarzenie loadMHVWZ\ZRï\ZDQHSR]DNRñF]HQLX ZF]\W\ZDQLDVWURQ\ =GDU]HQLHWRPRĝHZ\ZRïDÊ IXQNFMÚRGSRZLHG]LDOQÈ]DSU]HWZRU]HQLHGDQ\FK *G\PDV]GRG\VSR]\FMLWHFKQRORJLÚ$MD[LFKFHV] XDNWXDOQLÊW\ONRfragmentVWURQ\Z\VWDUF]\ XDNWXDOQLÊ]DZDUWRĂÊMHGQHJRHOHPHQWX2GE\ZD VLÚWRSU]H]SU]HFKZ\FHQLH]GDU]HQLD QDSU]\NïDG NOLNDïÈF]HOXEZ\V\ïDIRUPXODU]VLHFLRZ\ DQDVWÚSQLHĝÈGDQLHQRZHM]DZDUWRĂFL]VHUZHUD ]DSRĂUHGQLFWZHPĝÈGDQLDDV\QFKURQLF]QHJR 3RGF]DVZF]\W\ZDQLDGDQ\FKXĝ\WNRZQLNPRĝH NRQW\QXRZDÊSUDFÚ]SR]RVWDïÈF]ÚĂFLÈVWURQ\ LQWHUQHWRZHM*G\VHUZHUXG]LHOLRGSRZLHG]L VSHFMDOQHĝÈGDQLH$MD[SRZRGXMHZ\ZRïDQLHLQQHM F]ÚĂFLVNU\SWXRGF]\WXMÈFHMQRZHGDQH]VHUZHUD LXDNWXDOQLDMÈFHMSRSURVWXMHGQÈF]ÚĂÊVWURQ\ 3RQLHZDĝQLHPDSRWU]HE\RGĂZLHĝDQLDFDïHMVWURQ\GDQHVÈZF]\W\ZDQHV]\EFLHMDXĝ\WNRZQLN QDGDOPRĝHNRU]\VWDÊ]SR]RVWDïHMF]ÚĂFLVWURQ\ RF]HNXMÈFQDZF]\WDQLHGDQ\FK 1DSRF]ÈWNX$MD[E\ïDNURQLPHPR]QDF]DMÈF\PWHFKQRORJLHXĝ\ZDQHSRGF]DVZ\NRQ\ZDQLDĝÈGDñ DV\QFKURQLF]Q\FKWDNLFKMDNRPöZLRQHSRZ\ĝHMĽDV\QFKURQLF]Q\-DYD6FULSWL;0/2GWDPWHJRF]DVX ZLHOHVLÚ]PLHQLïRWHFKQRORJLHVÈUR]ZLMDQHDSRMÚFLH$MD[R]QDF]DWHUD]JUXSÚWHFKQRORJLLRIHUXMÈF\FK DV\QFKURQLF]QÈIXQNFMRQDOQRĂÊZSU]HJOÈGDUFHLQWHUQHWRZHM AJAX I JSON 377 JAK DZIAŁA AJAX? 3RGF]DVXĝ\FLDWHFKQRORJLL$MD[SU]HJOÈGDUNDLQWHUQHWRZDZ\NRQXMHĝÈGDQLH GRW\F]ÈFHSHZQ\FKLQIRUPDFML]VHUZHUD:::1DVWÚSQLHSU]HWZDU]D RGSRZLHGěXG]LHORQÈSU]H]VHUZHULZ\ĂZLHWODMÈQDVWURQLH 1. ŻĄDANIE 3U]HJOÈGDUNDĝÈGDGDQ\FK ]VHUZHUD::: 3U]HJOÈGDUNDZ\V\ïDGRVHUZHUD :::ĝÈGDQLHSHZQ\FKGDQ\FK¿ÈGDQLHPRĝH]DZLHUDÊ informacje wymagane przez VHUZHUSRGREQLHIRUPXODU] VLHFLRZ\Z\V\ïDGDQHGR VHUZHUD :SU]HJOÈGDUNDFKLPSOHPHQtowany jest obiekt o nazwie XMLHttpRequest przeznaczony GRREVïXJLĝÈGDñ$MD[3R Z\VïDQLXĝÈGDQLDSU]HJOÈGDUND QLHPXVLF]HNDÊQDXG]LHOHQLH RGSRZLHG]LSU]H]VHUZHU 378 AJAX I JSON 2. W SERWERZE WWW 6HUZHU:::XG]LHODRGSRZLHG]LGRVWDUF]DMÈFĝÈGDQHGDQH QDMF]ÚĂFLHMZIRUPDFLH+70/ ;0/OXE-621 Operacje przeprowadzane ZVHUZHU]HQLHVÈF]ÚĂFLÈWHJR FRRNUHĂODP\PLDQHP$MD[ 7HFKQRORJLHG]LDïDMÈFHSR VWURQLHVHUZHUDQDSU]\NïDG $631(73+31RGHMVL5XE\ PRJÈJHQHURZDÊVWURQ\ LQWHUQHWRZHGODXĝ\WNRZQLNöZ .LHG\SRMDZLDVLÚĝÈGDQLH$MD[ VHUZHUPRĝHXG]LHOLÊRGSRZLHdzi w postaci danych HTML OXEWHĝZLQQ\PIRUPDFLH WDNLPMDN-621OXE;0/ NWöU\ SU]HJOÈGDUNDNRQZHUWXMHQD SRVWDÊ+70/ ODPOWIEDŹ 3U]HJOÈGDUNDSU]HWZDU]D ]DZDUWRĂÊLXPLHV]F]DMÈ QDVWURQLH .LHG\VHUZHU]DNRñF]\ XG]LHODQLHRGSRZLHG]LQD ĝÈGDQLHSU]HJOÈGDUNDZ\ZRïXMH ]GDU]HQLH SRGREQLHMDNPRĝH Z\ZRïDÊ]GDU]HQLHSR]DNRñF]HQLXZF]\W\ZDQLDVWURQ\ =GDU]HQLHWRPRĝQDZ\NRU]\VWDÊGRXUXFKRPLHQLDIXQNFML -DYD6FULSWSU]HWZDU]DMÈFHMGDQH LXPLHV]F]DMÈFHMMHQDVWURQLH EH]ZSï\ZXQDSR]RVWDïÈF]ÚĂÊ VWURQ\ OBSŁUGA ŻĄDAŃ I ODPOWIEDZI AJAX :FHOXZ\NRQDQLDĝÈGDQLD$MD[SU]HJOÈGDUNDLQWHUQHWRZDXĝ\ZDRELHNWX XMLHttpRequest3RRWU]\PDQLX]VHUZHUDRGSRZLHG]LQDĝÈGDQLHWHQVDP obiekt XMLHttpRequestEÚG]LHSU]HWZDU]DïZ\QLN ŻĄDANIE 1 var xhr = new XMLHttpRequest(); 2 xhr.open(’GET’, ’data/test.json’, true); 3 xhr.send(’search=arduino’); 1. 8WZRU]HQLHHJ]HPSODU]D obiektu XMLHttpRequest za SRPRFÈQRWDFMLNRQVWUXNWRUD RELHNWX WÚQRWDFMÚSR]QDïHĂ ZUR]G]LDOHZSRGUR]G]LDOH ķ:DUWRĂFLWUXWK\LIDOV\ĵ 8ĝ\WH]RVWDïRVïRZRNOXF]RZH newDRELHNWMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMNWöUHM nazwa xhr jest skrótem od XMLHttpRequest (nazwa RELHNWX 2. Metoda open() obiektu XMLHttpRequest przygotowuje ĝÈGDQLH0DRQDWU]\SDUDPHWU\ NWöUHSR]QDV]ZSRGUR]G]LDOH ķ:F]\W\ZDQLH+70/]DSRPRFÈ WHFKQRORJLL$MD[ĵ i) nazwa metody HTTP; ii) DGUHV85/VWURQ\NWöUD EÚG]LHREVïXJLZDÊĝÈGDQLH iii) ZDUWRĂÊERRORZVNDZVND]XMÈFDF]\ĝÈGDQLHSRZLQQRE\Ê DV\QFKURQLF]QH 3. Metoda send() jest odpowieG]LDOQD]DZ\VïDQLHGRVHUZHUD SU]\JRWRZDQHJRZF]HĂQLHM ĝÈGDQLD,QIRUPDFMHGRGDWNRZH PRĝQDSU]HND]DÊVHUZHURZL XPLHV]F]DMÈFMHZQDZLDVLH -HĝHOLQLHVÈSU]HND]\ZDQH ĝDGQHLQIRUPDFMHGRGDWNRZH PRĝQDVLÚVSRWNDÊ]Xĝ\FLHP VïRZDNOXF]RZHJRnull FKRÊ WRQLHMHVWĂFLĂOHZ\PDJDQH xhr.send(null) ODPOWIEDŹ 1 xhr.onload = function() { if (xhr.status === 200) { 2 // Kod odpowiedzialny za przetwarzanie odpowiedzi udzielonej przez serwer. } } 1. .LHG\SU]HJOÈGDUNDRWU]\PD LZF]\WDRGSRZLHGě]VHUZHUD QDVWÈSLZ\ZRïDQLH]GDU]HQLD onload7R]NROHLVSRZRGXMH wykonanie funkcji (tutaj jest to IXQNFMDDQRQLPRZD 2. Funkcja sprawdza stan ZïDĂFLZRĂFLstatusRELHNWX 0DWRQDFHOXXSHZQLHQLH VLÚĝHRGSRZLHGěRWU]\PDQD ]VHUZHUDMHVWSUDZLGïRZD -HĝHOLZ\PLHQLRQDZïDĂFLZRĂÊ MHVWSXVWDQDOHĝ\VSUDZG]LÊ NRQğJXUDFMÚVHUZHUD :DUWR]ZUöFLÊXZDJÚĝH,( WRSLHUZV]DZHUVMDSU]HJOÈGDUNL ,QWHUQHW([SORUHUNWöUDREVïXguje ten sposób odpowiedzi QDĝÈGDQLD$MD[-HĝHOLFKFHV] DE\WRIXQNFMRQRZDïRWDNĝH ZVWDUV]\FKSU]HJOÈGDUNDFK PRĝHV]Xĝ\ÊELEOLRWHNLM4XHU\ SDWU]SRGUR]G]LDïķM4XHU\ L$MD[ĽĝÈGDQLDĵ AJAX I JSON 379 FORMATY DANYCH 2GSRZLHGěQDĝÈGDQLH$MD[MHVW]Z\NOHXG]LHODQDZMHGQ\P]WU]HFKQDVWÚSXMÈF\FKIRUPDWöZ+70/;0/OXE-6213RQLĝHMSU]HGVWDZLRQRSRUöZQDQLH Z\PLHQLRQ\FKIRUPDWöZ:SURZDG]HQLHGR;0/L-621]QDMG]LHV]QDWU]HFK NROHMQ\FKVWURQDFK HTML XML JSON 3UDZGRSRGREQLHQDMOHSLHM ]QDV]IRUPDW+70/LGODWHJR SRGF]DVXDNWXDOQLDQLDIUDJPHQWX VWURQ\Xĝ\FLHWHJRIRUPDWX MHVWQDMïDWZLHMV]\PVSRVREHP umieszczenia nowych danych na VWURQLH 'DQH;0/Z\JOÈGDMÈSRGREQLH MDN+70/DOHQD]Z\]QDF]QLNöZVÈLQQHSRQLHZDĝRSLVXMÈ ]QDMGXMÈFHVLÚZQLFKGDQH 6NïDGQLDMHVWEDUG]LHMU\JRU\VW\F]QDQLĝZ+70/ :FHOXSU]HGVWDZLHQLDGDQ\FK IRUPDW-621 DQJJavaScript Object Notation Xĝ\ZDVNïDGQL SRGREQHMGRQRWDFMLOLWHUDïXRELHNWXNWöUÈSR]QDïHĂZUR]G]LDOH ZSRGUR]G]LDOHķ8WZRU]HQLH RELHNWXĽQRWDFMDOLWHUDïXĵ ZALETY ZALETY ZALETY • DWZHWZRU]HQLHĝÈGDQLH • 7RHODVW\F]Q\IRUPDWSR- • 0RĝOLZRĂÊZ\ZRïDQLD • LZ\ĂZLHWODQLHGDQ\FK 'DQHRWU]\PDQH]VHUZHUDVÈ EH]SRĂUHGQLRXPLHV]F]DQH QDVWURQLH:SU]HFLZLHñVWZLHGRGZöFKSR]RVWDï\FK IRUPDWöZGDQHQLHPXV]È E\ÊSU]HWZDU]DQHSU]H] SU]HJOÈGDUNÚ • • ]ZDODMÈF\QDSU]HGVWDZLHQLH VNRPSOLNRZDQ\FKVWUXNWXU GDQ\FK 'RVNRQDOHVSUDZG]DVLÚ QDUöĝQ\FKSODWIRUPDFK LZUöĝQ\FKDSOLNDFMDFK 'DQHVÈSU]HWZDU]DQH]D SRPRFÈW\FKVDP\FKPHWRG '20FRZSU]\SDGNX+70/ • • ]GRZROQHMGRPHQ\ -6213 &256 :LÚNV]D]ZLÚ]ïRĂÊQLĝ Z+70/L;0/ Powszechne wykorzystanie ZMÚ]\NX-DYD6FULSW ]\VNXMH FRUD]ZLÚNV]ÈSRSXODUQRĂÊ ZDSOLNDFMDFKVLHFLRZ\FK WADY WADY WADY • • • 6NïDGQLDPXVLE\ÊEH]EïÚG- • • 6HUZHUPXVLZ\JHQHURZDÊ HTML w postaci gotowej do Xĝ\FLDQDGDQHMVWURQLH 7HQIRUPDWQLHVSUDZG]DVLÚ ]E\WGREU]HZDSOLNDFMDFK uruchamianych poza przeJOÈGDUNÈ1LHFKDUDNWHU\]XMH VLÚ]E\WGREUÈSU]HQRĂQRĂFLÈ danych ¿ÈGDQLHPXVLSRFKRG]LÊ]WHM samej domeny* (patrz uwaga SRQLĝHM • • -Ú]\NWHQMHVWX]QDZDQ\]D UR]ZOHNï\SRQLHZDĝ]QDF]QLNLGRGDMÈZLHOHGRGDWNRZ\FK znaków do przekazywanych GDQ\FK ¿ÈGDQLHPXVLSRFKRG]LÊ]WHM VDPHMGRPHQ\FRSR]RVWDïD F]ÚĂÊVWURQ\ SDWU]XZDJD SRQLĝHM 3U]HWZRU]HQLHZ\QLNXPRĝH Z\PDJDÊRJURPQHMLORĂFL NRGX 3U]HJOÈGDUNLSR]ZDODMÈWHFKQRORJLL$MD[QDZF]\W\ZDQLHNRGX +70/L;0/MHG\QLH]WHMVDPHMGRPHQ\]NWöUHMSRFKRG]LVWURQD 1DSU]\NïDGMHĂOLVWURQD]QDMGXMHVLÚZGRPHQLHwww.przyklad.pl WRĝÈGDQLH$MD[PXVL]ZUöFLÊGDQHSRFKRG]ÈFH]www.przyklad.pl 380 AJAX I JSON • QD%UDNXMÈF\]QDNF\WRZDQLDSU]HFLQHNOXEGZXNURSHN PRĝHXQLHPRĝOLZLÊSUDZLGïRZHG]LDïDQLHSOLNX 3RQLHZDĝWRMHVWNRG -DYD6FULSWPRĝH]DZLHUDÊ ]DZDUWRĂÊR]ïRĂOLZ\PG]LDïDQLX SDWU]DWDNLW\SX;66 ZUR]G]LDOHZSRGUR]G]LDOHķ$WDNLW\SX;66ĵ 'ODWHJR WHĝGDQ\FKZIRUPDFLH -621QDOHĝ\Xĝ\ZDÊW\ONR ]]DXIDQ\FKěUöGHï XML — EXTENSIBLE MARKUP LANGUAGE .RG;0/Z\JOÈGDMDN+70/DOH]QDF]QLNL]DZLHUDMÈUöĝQHVïRZD &HOHP]QDF]QLNöZMHVWRSLVDQLHURG]DMXSU]HFKRZ\ZDQ\FK SU]H]QLHGDQ\FK <?xml version=”1.0” encoding=”utf-8” ?> <events> <event> <location>San Francisco, CA</location> <date>1 maja</date> <map>img/map-ca.png</map> </event> <event> <location>Austin, TX</location> <date>15 maja</date> <map>img/map-tx.png</map> </event> <event> <location>Nowy Jork, NY</location> <date>30 maja</date> <map>img/map-ny.png</map> </event> </events> 3OLN;0/PRĝQDSU]HWZDU]DÊ]Z\NRU]\VWDQLHPW\FKVDP\FKPHWRG '20NWöUHVÈXĝ\ZDQHZSUDF\]+70/3RQLHZDĝSU]HJOÈGDUNL ZUöĝQ\VSRVöEWUDNWXMÈ]QDNLRGVWÚSXZGRNXPHQWDFK+70/L;0/ SU]HWZDU]DQLH;0/MHVWïDWZLHMV]H]]DVWRVRZDQLHPM4XHU\QLĝ ]Z\NïHJRMÚ]\ND-DYD6FULSW SRGREQLHMDNZSU]\SDGNX+70/ Podobnie jak HTML jest MÚ]\NLHP]QDF]QLNöZXĝ\ZDQ\P do opisania struktury i semanW\NLVWURQ\LQWHUQHWRZHM;0/ PRĝQDZ\NRU]\VWDÊGRRSUDFRZDQLDMÚ]\NöZ]QDF]QLNöZGOD LQQHJRURG]DMXGDQ\FK]XSHïQLH GRZROQ\FKRGUDSRUWöZ JLHïGRZ\FKDĝSRLQIRUPDFMH PHG\F]QH =QDF]QLNLZSOLNX;0/SRZLQQ\ RSLV\ZDÊ]QDMGXMÈFHVLÚZQLFK GDQH'ODWHJRWHĝQDZHWMHĂOL QLJG\ZF]HĂQLHMQLHVSRWNDïHĂ VLÚ]NRGHPSRND]DQ\PSR OHZHMVWURQLHWRLWDNEH]SUREOHPX]DXZDĝ\V]ĝH]DZLHUDRQ LQIRUPDFMHRNLONXZ\GDU]HQLDFK HOHPHQW<events>; poszczeJöOQHZ\GDU]HQLDVÈSU]HGVWDZLDQH]DSRPRFÈRGG]LHOQ\FK znaczników <event> )RUPDW;0/G]LDïDQDNDĝGHM SODWIRUPLHQDMZLÚNV]ÈSRSXODUQRĂÊ]\VNDïQDSRF]ÈWNXZLHNX SRQLHZDĝ]QDF]QLHXïDWZLDï SU]HQRV]HQLHGDQ\FKPLÚG]\ UöĝQHJRURG]DMXDSOLNDFMDPL 7RMHGQRF]HĂQLHQLH]Z\NOH HODVW\F]Q\IRUPDWGDQ\FK]D MHJRSRPRFÈPRĝQDSU]HGVWDZLDÊQDSUDZGÚVNRPSOLNRZDQH VWUXNWXU\GDQ\FK AJAX I JSON 381 JAVASCRIPT OBJECT NOTATION 'DQHPRĝQDVIRUPDWRZDÊ]DSRPRFÈ-621 Z\PΖĚࡩĞࡁƐ࠯Ŷ 6NïDGQLDMHVWEDUG]RSRGREQDGRQRWDFMLOLWHUDïXRELHNWX DOHWRQLHMHVWRELHNW 'DQHZIRUPDFLH-621SU]\SRPLQDMÈQRWDFMÚOLWHUDïXRELHNWX NWöUÈSR]QDïHĂZUR]G]LDOH ZSRGUR]G]LDOHķ8WZRU]HQLH RELHNWXĽQRWDFMDOLWHUDïXĵ7R MHGQDNQLHMHVWRELHNWOHF]GDQH ZSRVWDFL]Z\NïHJRWHNVWX 5öĝQLFDPRĝHZ\GDZDÊVLÚ GUREQDDOHSDPLÚWDMĝH+70/ WRWDNĝH]Z\Nï\WHNVWDSU]HJOÈdarka internetowa konwertuje JRQDSRVWDÊRELHNWöZPRGHOX '20 5]HF]\ZLVW\FKRELHNWöZQLH PRĝQDSU]HND]\ZDÊSU]H]VLHÊ =DPLDVWWHJRZ\V\ïDQ\MHVW WHNVWNWöU\QDVWÚSQLHEÚG]LH SU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈ VNRQZHUWRZDQ\QDSRVWDÊ RELHNWöZ { “location”: “San Francisco, CA”, “capacity”: 270, “booking”: true } KLUCZ WARTOŚĆ (ujęty w cudzysłów) KLUCZ WARTOŚĆ :IRUPDFLH-621NOXF]SRZLQLHQ]RVWDÊXMÚW\ZFXG]\VïöZ DQLHDSRVWURI\ :DUWRĂÊPRĝHE\ÊMHGQHJR]Z\PLHQLRQ\FKSRQLĝHMW\SöZGDQ\FK QLHNWöUHSU]HGVWDZLRQRQDSU]\NïDG]LHSRZ\ĝHMSR]RVWDïHSRND]DQR ZSU]\NïDG]LHQDVWURQLHSRSUDZHM .OXF] LQDF]HMQD]ZD MHVW RGG]LHORQ\RGZDUWRĂFL GZXNURSNLHP TYP DANYCH OPIS string 7HNVW PXVLE\ÊXMÚW\ZFXG]\VïöZ number /LF]ED 3RV]F]HJöOQHSDU\NOXF]ZDUWRĂÊVÈUR]G]LHORQH SU]HFLQNDPL-HGQDN]ZUöÊ XZDJÚQDbrak przecinka po RVWDWQLHMSDU]H Boolean :DUWRĂÊtrueOXEfalse array 7DEOLFDZDUWRĂFLĽPRĝHWRE\ÊUöZQLHĝWDEOLFD RELHNWöZ object 2ELHNW-DYD6FULSWĽPRĝH]DZLHUDÊRELHNW\SRWRPQH OXEWDEOLFH null :DUWRĂÊSXVWDOXEZRJöOHEUDNZDUWRĂFL 382 AJAX I JSON PRACA Z DANYMI JSON Obiekt JSONZMÚ]\NX-DYD6FULSWPRĝH]DPLHQLÊGDQH-621 QDSRVWDÊRELHNWX-DYD6FULSW3R]ZDODUöZQLHĝSU]HSURZDG]LÊ NRQZHUVMÚRELHNWX-DYD6FULSWQDFLÈJWHNVWRZ\ { “events”: [ { “location”: “San Francisco, CA”, “date”: “1 maja”, “map”: “img/map-ca.png” }, { “location”: “Austin, TX”, “date”: “15 maja”, “map”: “img/map-tx.png” }, { “location”: “Nowy Jork, NY”, “date”: “30 maja”, “map”: “img/map-ny.png” 2ELHNWSROHZHMVWURQLH SU]HGVWDZLDVHULÚWU]HFK Z\GDU]HñRNWöU\FKLQIRUPDFMH VÈSU]HFKRZ\ZDQHZWDEOLF\ o nazwie events7DEOLFD Z\NRU]\VWXMHQRWDFMÚQDZLDVX kwadratowego i przechowuje WU]\RELHNW\ SRMHGQ\PGOD NDĝGHJRZ\GDU]HQLD Metoda JSON.stringify() SU]HSURZDG]DNRQZHUVMÚ RELHNWX-DYD6FULSWQDFLÈJWHNVWRZ\VIRUPDWRZDQ\MDNRGDQH -621:WHQVSRVöERELHNW\ -DYD6FULSWPRĝQDSU]HV\ïDÊ ]SU]HJOÈGDUNLGRLQQHMDSOLNDFML } ] } OBIEKT TABLICA 2ELHNWPRĝQD]DSLVDÊWDNĝHZMHGQ\PZLHUV]X MDNSRND]DQRSRQLĝHM Metoda JSON.parse() przetwaU]DFLÈJWHNVWRZ\]DZLHUDMÈF\ GDQH-6213U]HSURZDG]DNRQZHUVMÚGDQ\FK-621QDSRVWDÊ RELHNWöZ-DYD6FULSWJRWRZ\FK GRXĝ\FLDZSU]HJOÈGDUFH 2EVïXJDZSU]HJOÈGDUNDFK &KURPH)LUHIR[,( L6DIDUL { “events”: [ { “location”: “San Francisco, CA”, “date”: “1 maja”, “map”: “img/map-ca.png” }, { “location”: “Austin, TX”, “date”: “15 maja”, “map”: “img/map-tx.png” }, { “location”: “Nowy Jork, NY”, “date”: “30 maja”, “map”: “img/map-ny.png” } ] } AJAX I JSON 383 WCZYTYWANIE HTML Z WYKORZYSTANIEM TECHNOLOGII AJAX +70/WRQDMïDWZLHMV]\W\SGDQ\FKMDNLHPRĝQDGRGDÊQDVWURQLH ]Z\NRU]\VWDQLHPWHFKQRORJLL$MD[3U]HJOÈGDUNDZ\JHQHUXMHMH GRNïDGQLHWDNVDPRMDNNDĝGHLQQHGDQH+70/ 'RQRZHM]DZDUWRĂFLEÚGÈ]DVWRVRZDQHLVWQLHMÈFHUHJXï\&66 3RQLĝHMSU]HGVWDZLRQRSU]\NïDGZF]\WXMÈF\]DSRPRFÈ WHFKQRORJLL$MD[GDQHRWU]HFK Z\GDU]HQLDFK :NROHMQ\FK F]WHUHFKSU]\NïDGDFKZ\QLN EÚG]LHGRNïDGQLHWDNLVDP Strona otwierana przez Xĝ\WNRZQLNDQLHSU]HFKRZXMH GDQ\FKGRW\F]ÈF\FKZ\GDU]Hñ R]QDF]RQHNRORUHPUöĝRZ\P 7HFKQRORJLD$MD[MHVWZ\NRU]\stywana do wczytania danych ]LQQHJRSOLNX Obszar w kolorze różowym jest wczytany z wykorzystaniem technologii Ajax .LHG\VHUZHUXG]LHODRGSRZLHG]LQDGRZROQHĝÈGDQLHSRZLQLHQ SU]HND]DÊNRPXQLNDWRVWDQLHZVND]XMÈF\F]\ĝÈGDQLH]RVWDïR XNRñF]RQH2WRSU]\NïDGRZHZDUWRĂFLNRPXQLNDWXRVWDQLH 200ĽVHUZHUXG]LHOLïRGSRZLHG]LLZV]\VWNRMHVWZSRU]ÈGNX 304ĽQLH]PRG\ğNRZDQ\ 404ĽVWURQDQLH]RVWDïD]QDOH]LRQD 500ĽZHZQÚWU]Q\EïÈGVHUZHUD -HĝHOLXUXFKDPLDV]NRGORNDOQLHWRQLHRWU]\PDV]ZïDĂFLZRĂFLVWDQX VHUZHUD3ROHFHQLHVSUDZG]HQLDWU]HEDZLÚFXPLHĂFLÊZNRPHQWDU]X DZDUWRĂFLÈZDUXQNXSRZLQQRE\Êtrue-HĝHOLVHUZHUQLH]ZUDFD ZïDĂFLZRĂFLstatusVSUDZGěMHJRNRQğJXUDFMÚ 384 AJAX I JSON 3U]HJOÈGDUNDSR]ZROLQDXĝ\FLH tej techniki wczytywania danych +70/W\ONRZWHG\JG\SRFKRG]È ]WHMVDPHMGRPHQ\GRNWöUHM QDOHĝ\SR]RVWDïDF]ÚĂÊVWURQ\ 1LH]DOHĝQLHRGIRUPDWX danych zwróconych przez VHUZHU +70/;0/OXE-621 SURFHVNRQğJXUDFMLĝÈGDQLD $MD[LVSUDZG]HQLDF]\SOLN MHVWJRWRZ\GRSUDF\SU]HGVWDZLDVLÚGRNïDGQLHWDNVDPR =PLDQLHXOHJDMHG\QLHVSRVöE SUDF\]RWU]\PDQ\PLGDQ\PL :SU]\NïDG]LHSRSUDZHMVWURQLH NRGRGSRZLHG]LDOQ\]DZ\ĂZLHWOHQLHQRZHM]DZDUWRĂFL+70/ MHVWXPLHV]F]RQ\ZHZQÈWU] NRQVWUXNFMLZDUXQNRZHM 8ZDJD Przedstawione tutaj SU]\NïDG\QLHG]LDïDMÈORNDOQLH ZSU]HJOÈGDUFH&KURPHDOHSRZLQQ\G]LDïDÊZSU]HJOÈGDUNDFK )LUHIR[L6DIDUL:SU]\SDGNX ZHUVML,(ZF]HĂQLHMV]\FKQLĝ HIHNW\E\ZDMÈUöĝQH :GDOV]HMF]ÚĂFLUR]G]LDïX ]REDF]\V]ĝHM4XHU\RIHUXMH OHSV]ÈREVïXJÚ$MD[ZUöĝQ\FK SU]HJOÈGDUNDFK 1. Obiekt XMLHttpRequest jest przechowywany w zmiennej o nazwie xhr. 2. Metoda open() obiektu XMLHttpRequest przygotowuje ĝÈGDQLH0HWRGDWDPDWU]\ parametry: i). HTTP GET lub POST w celu wskazania sposobu wykonania ĝÈGDQLD ii). ĂFLHĝNÚGRVWÚSXGRVWURQ\ RGSRZLHG]LDOQHM]DREVïXJÚ ĝÈGDQLD iii). ZDUWRĂÊERRORZVNÈ NWöUDZVND]XMHF]\ĝÈGDQLHMHVW asynchroniczne. 3. 'RWHMFKZLOLSU]HJOÈGDUND MHV]F]HQLHVNRQWDNWRZDïDVLÚ ]VHUZHUHPDE\SREUDÊQRZÈ ]DZDUWRĂÊ+70/ .RQWDNWQLHQDVWÈSLDĝGR wykonania ostatniego wiersza ZVNU\SFLHZ\ZRïXMÈFHJR PHWRGÚsend() obiektu XMLHttpRequest. Metoda send() wymaga podania DUJXPHQWX-HĝHOLQLHVÈ SU]HND]\ZDQHĝDGQHGDQH DUJXPHQWHPPRĝHE\Ênull. 4. Po udzieleniu odpowiedzi SU]H]VHUZHUQDVWÈSLZ\ZRïDQLH]GDU]HQLDonloadFR spowoduje wykonanie funkcji anonimowej. 5. :HZQÈWU]IXQNFMLNRQVWUXNFMD ZDUXQNRZDVSUDZG]DF]\ ZDUWRĂFLÈZïDĂFLZRĂFLstatus obiektu jest 200NWöUDR]QDF]D udzielenie przez serwer SUDZLGïRZHMRGSRZLHG]L-HĝHOL SU]\NïDGMHVWXUXFKDPLDQ\ORNDOQLHQLHEÚG]LHRGSRZLHG]L LQLHPRĝQDSU]HSURZDG]LÊ sprawdzenia. c08/js/data-html.js JAVASCRIPT 1 var xhr = new XMLHttpRequest(); 4 xhr.onload = function() { // Po wczytaniu odpowiedzi. 3RQLĝV]DNRQVWUXNFMDZDUXQNRZDQLHG]LDïDORNDOQLHG]LDïDMHG\QLHZVHUZHU]H if(xhr.status === 200) { -HĝHOLVWDQVHUZHUDZVND]XMH ĝHZV]\VWNRMHVWZSRU]ÈGNX document.getElementById(’content’).innerHTML = xhr.responseText; 8DNWXDOQLHQLH } }; 5 6 2 3 // Utworzenie obiektu XMLHttpRequest. xhr.open(’GET’, ’data/data.html’, true); xhr.send(null); 3U]\JRWRZDQLHĝÈGDQLD :\NRQDQLHĝÈGDQLD 6. 1DVWÚSXMHXDNWXDOQLHQLHVWURQ\ document.getElementById(’content’).innerHTML = xhr.responseText;. A A. Wybrany zostanie element SU]HFKRZXMÈF\QRZÈ]DZDUWRĂÊ +70/ :RPDZLDQ\PSU]\NïDG]LHWRHOHPHQWNWöUHJRDWU\EXW idPDZDUWRĂÊcontent). B C B. :ïDĂFLZRĂÊinnerHTML ]DVWÚSXMH]DZDUWRĂÊZVND]DQHJRHOHPHQWXQRZÈ]DZDUWRĂFLÈ +70/SREUDQÈ]VHUZHUD C. 1RZD]DZDUWRĂÊ+70/ MHVWSRELHUDQD]ZïDĂFLZRĂFL responseText obiektu XMLHttpRequest. 3DPLÚWDMĝHZïDĂFLZRĂÊinnerHTMLSRZLQQDE\ÊXĝ\ZDQDW\ONRZWHG\JG\ZLDGRPRĝHVHUZHUQLH ]ZUöFL]DZDUWRĂFLR]ïRĂOLZ\PG]LDïDQLX:V]HOND]DZDUWRĂÊXWZRU]RQDSU]H]Xĝ\WNRZQLNDOXEğUP\ WU]HFLHSRZLQQDE\Ê]QHXWUDOL]RZDQDZVHUZHU]H SDWU]UR]G]LDïSRGUR]G]LDïķ$WDNLW\SX;66ĵ AJAX I JSON 385 WCZYTYWANIE XML Z WYKORZYSTANIEM TECHNOLOGII AJAX ¿ÈGDQLHGDQ\FK;0/RGE\ZDVLÚSRGREQLHMDNZSU]\SDGNXGDQ\FK+70/ Jednak przetworzenie danych zwróconych przez serwer jest znacznie bardziej VNRPSOLNRZDQHSRQLHZDĝGDQH;0/PXV]ÈE\ÊVNRQZHUWRZDQHQD+70/ DE\PRĝQDMHZ\ĂZLHWOLÊQDVWURQLH 1DVWURQLHSRSUDZHMPRĝHV] ]REDF]\ÊĝHNRGĝÈGDQLDSOLNX XML jest praktycznie identyczny ]NRGHPĝÈGDQLDGDQ\FK+70/ pokazanym na poprzedniej VWURQLH=PLDQLHXOHJïIUDJPHQW ZHZQÈWU] konstrukcji warunkoZHMSU]HWZDU]DMÈFHMRGSRZLHGě (punkty 1 – 4 na stronie po SUDZHM 'DQH;0/PXV]È E\ÊVNRQZHUWRZDQHQD+70/ 6WUXNWXUD+70/SRV]F]HJöOQ\FK Z\GDU]Hñ]RVWDïDSU]HGVWDZLRQD SRQLĝHM 1. .LHG\VHUZHUXG]LHOD RGSRZLHG]LSU]HND]XMÈFGDQH ;0/PRĝQDMHX]\VNDÊ]DSRPRFÈZïDĂFLZRĂFLresponseXML obiektu XMLHttpRequest :RPDZLDQ\PSU]\NïDG]LH ]ZUöFRQHGDQH;0/VÈ przechowywane w zmiennej o nazwie response 'DQH;0/NDĝGHJR]GDU]HQLD VÈSU]HNV]WDïFDQHQDQDVWÚSXMÈFÈVWUXNWXUÚ+70/ 386 AJAX I JSON 2. 1DVWÚSQLHPDP\GHNODUDFMÚ nowej zmiennej o nazwie eventsSU]HFKRZXMÈFHM ZV]\VWNLHHOHPHQW\<event> ]GRNXPHQWX;0/ 3OLN;0/ ZLG]LDïHĂZSRGUR]G]LDOH ķ;0/Ľ([WHQVLEOH0DUNXS /DQJXDJHĵ 3. 3OLN;0/MHVWSU]HWZDU]DQ\ ]DSRPRFÈPHWRG'20 RPöZLRQ\FKZUR]G]LDOH 1DSRF]ÈWNX]Z\NRU]\VWDQLHP SÚWOLfor przeprowadzana jest LWHUDFMDSU]H]ZV]\VWNLHHOHPHQty <event>LQDVWÚSXMH]HEUDQLH danych przechowywanych ZLFKHOHPHQWDFKSRWRPQ\FK oraz umieszczenie tych danych ZQRZ\FKHOHPHQWDFK+70/ 4. :HZQÈWU]SÚWOLfor widzimy ZLHORNURWQHZ\ZRïDQLHIXQNFML getNodeValue()&HOHPW\FK Z\ZRïDñMHVWSREUDQLH]DZDUWRĂFLSRV]F]HJöOQ\FKHOHPHQWöZ ;0/:\PLHQLRQDIXQNFMD SRELHUDGZDSDUDPHWU\ i). obj to fragment XML; ii). tagWRQD]ZD]QDF]QLND ]NWöUHJRPDMÈE\ÊSREUDQH LQIRUPDFMH Funkcja wyszukuje dopasowany znacznik we fragmencie ;0/Xĝ\ZDMÈFGRWHJR PHWRG\'20RQD]ZLH getElementsByTagName() 1DVWÚSQLHSRELHUDWHNVW]SLHUZV]HJRHOHPHQWXGRSDVRZDQHJR ZGDQ\PIUDJPHQFLH 1DVWÚSQLHNDĝG\]QRZ\FK HOHPHQWöZ+70/MHVWXPLHV]F]DQ\QDVWURQLH HTML <div class=”event”> <img src=”plik.png” alt=”Lokalizacja” /> <p><b>Lokalizacja</b><br />Data wydarzenia</p> </div> c07/js/position.js JAVASCRIPT var xhr = new XMLHttpRequest(); // Utworzenie obiektu XMLHttpRequest. xhr.onload = function() { // Po wczytaniu odpowiedzi. 3RQLĝV]DNRQVWUXNFMDZDUXQNRZDQLHG]LDïDORNDOQLHG]LDïDMHG\QLHZVHUZHU]H if (xhr.status === 200) { -HĝHOLVWDQVHUZHUDZVND]XMHĝHZV]\VWNRMHVWZSRU]ÈGNX 1 2 7HQIUDJPHQWMHVWLQQ\SRQLHZDĝSU]HWZDU]DQHVÈGDQH;0/DQLH+70/ var response = xhr.responseXML; // Pobranie danych XML z serwera. var events = response.getElementsByTagName(’event’); // Wyszukanie elementów <event>. for (var i = 0; i < events.length; i++) { var container, image, location, city, newline; container = document.createElement(’div’); container.className = ’event’; // // // // Iteracja przez znalezione elementy. Deklaracja zmiennych. Utworzenie pojemnika <div>. Dodanie atrybutu class. image = document.createElement(’img’); // Dodanie obrazu mapy. image.setAttribute(’src’, getNodeValue(events[i], ’map’)); image.appendChild(document.createTextNode(getNodeValue(events[i], ’map’))); container.appendChild(image); 3 4 location = document.createElement(’p’); 'RGDQLHGDQ\FKGRW\F]ÈF\FKORNDOL]DFML city = document.createElement(’b’); newline = document.createElement(’br’); city.appendChild(document.createTextNode(getNodeValue(events[i], ’location’))); location.appendChild(newline); location.insertBefore(city, newline); location.appendChild(document.createTextNode(getNodeValue(events[i], ’date’))); container.appendChild(location); document.getElementById(’content’).appendChild(container); } function getNodeValue(obj, tag) { 3REUDQLH]DZDUWRĂFL]GDQ\FK;0/ UHWXUQREMJHW(OHPHQWV%\7DJ1DPH WDJ >@ğUVW&KLOGQRGH9DOXH } 2VWDWQLIUDJPHQWMHVWWDNLVDPMDNZSU]\SDGNXGDQ\FK+70/ DOHĝÈGDQLHGRW\F]\SOLNX;0/ } }; xhr.open(’GET’, ’data/data.xml’, true); 3U]\JRWRZDQLHĝÈGDQLD xhr.send(null); :\NRQDQLHĝÈGDQLD AJAX I JSON 387 WCZYTYWANIE DANYCH JSON Z WYKORZYSTANIEM TECHNOLOGII AJAX ¿ÈGDQLHGDQ\FK-621RSLHUDVLÚQDWHMVDPHMVNïDGQLNWöUÈSR]QDïHĂ ZSU]\NïDGDFKGRW\F]ÈF\FKĝÈGDñGDQ\FK+70/L;0/.LHG\VHUZHUXG]LHOD RGSRZLHG]LGDQH-621VÈNRQZHUWRZDQHQDSRVWDÊ+70/ .LHG\GDQHZIRUPDFLH-621VÈ SU]HND]\ZDQH]VHUZHUD::: GRSU]HJOÈGDUNLLQWHUQHWRZHM SRGF]DVWUDQVPLVMLPDMÈSRVWDÊ FLÈJXWHNVWRZHJR *G\FLÈJWHNVWRZ\GRWU]HGR SU]HJOÈGDUNLVNU\SWPXVL VNRQZHUWRZDÊJRQDRELHNW -DYD6FULSW3URFHVWHQQRVL QD]ZÚdeserializacjiRELHNWX 2GE\ZDVLÚWR]Z\NRU]\staniem metody parse() wbudowanego obiektu o nazwie JSON7RMHVWRELHNWJOREDOQ\ DZLÚFPRĝQDJRXĝ\ZDÊEH] NRQLHF]QRĂFLZF]HĂQLHMV]HJR XWZRU]HQLDHJ]HPSODU]D RELHNWX *G\FLÈJWHNVWRZ\]RVWDQLH SU]HWZRU]RQ\VNU\SWPRĝH X]\VNDÊGRVWÚSGRGDQ\FK RELHNWXDQDVWÚSQLHXWZRU]\Ê ]DZDUWRĂÊ+70/NWöUDEÚG]LH Z\ĂZLHWORQDQDVWURQLH =DZDUWRĂÊ+70/MHVWGRGDZDQD QDVWURQLH]DSRPRFÈZïDĂFLZRĂFLinnerHTML'ODWHJRWHĝSRZLQLHQHĂXĝ\ZDÊMHMW\ONRZWHG\ JG\PDV]DEVROXWQÈSHZQRĂÊ ĝHGRGDZDQDWUHĂÊQLH]DZLHUD ĝDGQHJRNRGXR]ïRĂOLZ\P G]LDïDQLX SDWU]DWDNLW\SX;66 ZUR]G]LDOHZSRGUR]G]LDOH ķ$WDNLW\SX;66ĵ *G\SU]\NïDGRZ\NRG]RVWDQLH Z\NRQDQ\ZSU]HJOÈGDUFHHIHNW EÚG]LHGRNïDGQLHWDNLVDPMDN ZSU]\SDGNXGZöFKSRSU]HGQLFK Obiekt JSONPDUöZQLHĝPHWRGÚ o nazwie stringify()NWöUD NRQZHUWXMHRELHNW\QDSRVWDÊ FLÈJXWHNVWRZHJRXĝ\ZDMÈF QRWDFML-6217RSR]ZDODQD SU]HV\ïDQLHRELHNWX]SU]HJOÈGDUNLGRVHUZHUD:::3URFHV WHQQD]\ZDVLÚVHULDOL]DFMÈ RELHNWX :\PLHQLRQÈPHWRGÚPRĝQD VWRVRZDÊJG\Xĝ\WNRZQLN Z\NRU]\VWXMHVWURQÚZWDNL VSRVöEĝHQDVWÚSXMHXDNWXDOnienie danych przechowywaQ\FKZRELHNFLH-DYD6FULSW QD SU]\NïDGQDVNXWHNZ\SHïQLHQLD IRUPXODU]DVLHFLRZHJR 3R]ZDODWRQDXDNWXDOQLHQLH informacji przechowywanych ZVHUZHU]H 3RQLĝHMSU]HGVWDZLRQRGDQH-621NWöUHEÚGÈSU]HWZDU]DQH GDQHWHZSURZDG]RQRZSRGUR]G]LDOHķ3UDFD]GDQ\PL-621ĵ =ZUöÊXZDJÚQDWRĝHSOLN]RVWDï]DSLVDQ\ZUD]]UR]V]HU]HQLHP.jsonZQD]ZLH c08/data/data.json JAVASCRIPT { “events”: [ { “location”: “San Francisco, CA”, “date”: “1 maja”, “map”: “img/map-ca.png” }, { “location”: “Austin, TX”, “date”: “15 maja”, “map”: “img/map-tx.png” }, { “location”: “Nowy Jork, NY”, “date”: “30 maja”, “map”: “img/map-ny.png”} ] } 388 AJAX I JSON 1. 'DQH-621RWU]\PDQH ]VHUZHUDVÈSU]HFKRZ\wane w zmiennej o nazwie responseObject%ÚGÈ GRVWÚSQH]DSRPRFÈZïDĂFLZRĂFLresponseText obiektu XMLHttpRequest 'DQH-621RWU]\PDQH ]VHUZHUDPDMÈSRVWDÊFLÈJX WHNVWRZHJR'ODWHJRWHĝQDOHĝ\ MHVNRQZHUWRZDÊQDRELHNW -DYD6FULSWXĝ\ZDMÈFPHWRG\ parse()RELHNWX-621 2. Utworzenie zmiennej newContent przeznaczonej do przechowywania nowych GDQ\FK+70/3R]DSÚWOÈ zmiennej jest przypisywany SXVW\FLÈJWHNVWRZ\DZLÚFNRG ZSÚWOLPRĝHGRGDZDÊGRQLHJR GDQH 3. Iteracja przez obiekty SU]HGVWDZLDMÈFHSRV]F]HJöOQH ]GDU]HQLD'DQHZHZV]\VWNLFK RELHNWDFKVÈGRVWÚSQHZQRWDFML ]Xĝ\FLHPNURSNLSRGREQLHMDN RELHNW\ :HZQÈWU]SÚWOL]DZDUWRĂÊ obiektu zostaje dodana do zmiennej newContent wraz z odpowiednim kodem znaczniNöZ+70/ 4. *G\NRñF]\VLÚG]LDïDQLHSÚWOLSURZDG]ÈFHM LWHUDFMÚSU]H]RELHNWevent w responseObject nowa zaZDUWRĂÊ+70/]RVWDMHXPLHV]F]RQDQDVWURQLH]DSRPRFÈ ZïDĂFLZRĂFLinnerHTML c08/js/data-json.js JAVASCRIPT var xhr = new XMLHttpRequest(); // Utworzenie obiektu XMLHttpRequest. xhr.onload = function() { if(xhr.status === 200) { // Po zmianie stanu. -HĝHOLVWDQVHUZHUDZVND]XMH ĝHZV]\VWNRMHVWZSRU]ÈGNX responseObject = JSON.parse(xhr.responseText); 1 2 3 4 8WZRU]HQLHFLÈJXWHNVWRZHJRZUD]]QRZÈ]DZDUWRĂFLÈ PRĝQDXĝ\ÊWDNĝHRSHUDFML // opartych na modelu DOM). var newContent = ’’; for (var i = 0; i < responseObject.events.length; i++) { // Iteracja przez obiekt. newContent += ’<div class=”event”>’; newContent += ’<img src=”’ + responseObject.events[i].map + ’” ’; newContent += ’alt=”’ + responseObject.events[i].location + ’” />’; newContent += ’<p><b>’ + responseObject.events[i].location + ’</b><br>’; newContent += responseObject.events[i].date + ’</p>’; newContent += ’</div>’; } 8DNWXDOQLHQLHVWURQ\QRZÈ]DZDUWRĂFLÈ document.getElementById(’content’).innerHTML = newContent; } }; xhr.open(’GET’, ’data/data.json’, true); xhr.send(null); 3U]\JRWRZDQLHĝÈGDQLD :\NRQDQLHĝÈGDQLD AJAX I JSON 389 PRACA Z DANYMI POCHODZĄCYMI Z INNYCH SERWERÓW $MD[G]LDïDGRVNRQDOHZSU]\SDGNXGDQ\FKSRFKRG]ÈF\FK]7ZRMHJRVHUZHUD DOH]HZ]JOÚGöZEH]SLHF]HñVWZDSU]HJOÈGDUNLLQWHUQHWRZHQLHZF]\WXMÈ RGSRZLHG]L$MD[]LQQ\FKGRPHQ RGSRZLHG]LEÚGÈF\FKZ\QLNLHPWDN ]ZDQ\FKĝÈGDñW\SXFURVVGRPDLQ 'RVWÚSQHVÈWU]\QDMF]ÚĂFLHMVWRVRZDQH UR]ZLÈ]DQLDSUREOHPX PLIK PROXY W SERWERZE WWW CROSS-ORIGIN RESOURCE SHARING 3LHUZV]\VSRVöEQDZF]\WDQLHGDQ\FK]]HZQÚWU]QHJRVHUZHUDSROHJDQDXWZRU]HQLXZHZïDVQ\P VHUZHU]HSOLNXSU]H]QDF]RQHJRQDGDQHSRFKRG]ÈFH ]H]GDOQHJRVHUZHUD ]Z\NRU]\VWDQLHPMÚ]\ND G]LDïDMÈFHJRSRVWURQLHVHUZHUDWDNLHJRMDN$63 1(73+31RGHMV5XE\ 6WURQ\Z7ZRMHMZLWU\QLH EÚGÈĝÈGDï\GDQ\FK]HZVSRPQLDQHJRSOLNX ZVHUZHU]HNWöU\]NROHLSRELHU]HRGSRZLHGQLHGDQH ]VHUZHUD]GDOQHJR7DNLHUR]ZLÈ]DQLHQRVLQD]ZÚ proxySRQLHZDĝG]LDïDZLPLHQLXLQQHMVWURQ\ :WUDNFLHNRPXQLNDFMLSU]HJOÈGDUNLLQWHUQHWRZHM LVHUZHUD:::LQIRUPDFMHPLÚG]\QLPLVÈ SU]HND]\ZDQH]DSRPRFÈQDJïöZNöZ+773&256 DQJCross-Origin Resource Sharing) oznacza XPLHV]F]HQLHZQDJïöZNDFK+773LQIRUPDFML GRGDWNRZ\FKNWöUHZVND]XMÈSU]HJOÈGDUFHLVHUZHURZL:::VSRVöESURZDG]HQLDNRPXQLNDFML 5R]ZLÈ]DQLHRSLHUDVLÚQDWZRU]HQLXVWURQ ZMÚ]\NXG]LDïDMÈF\PSRVWURQLHVHUZHUDDZLÚF wykracza poza zakres tematyczny niniejszej NVLÈĝNL JSONP JSONP F]DVHPPRĝQDVSRWNDÊ]DSLV-6213 REHMPXMHGRGDQLHQDVWURQLHHOHPHQWX<script> RGSRZLHG]LDOQHJR]DZF]\WDQLHGDQ\FK-621 ]LQQHJRVHUZHUD7DNLHUR]ZLÈ]DQLHG]LDïDSRQLHZDĝQLHLVWQLHMÈRJUDQLF]HQLDGRW\F]ÈFHěUöGïD SRFKRG]HQLDVNU\SWXZHOHPHQFLH<script> 6NU\SW]DZLHUDZ\ZRïDQLHIXQNFMLDGDQH ZIRUPDFLH-621VÈGRVWDUF]DQHMDNRDUJXPHQW IXQNFML:\ZRï\ZDQDIXQNFMDMHVW]GHğQLRZDQD QDVWURQLHĝÈGDMÈFHMGDQ\FKLXĝ\ZDQDMHVWGRLFK SU]HWZRU]HQLDRUD]Z\ĂZLHWOHQLD3DWU]RSLVQD NROHMQHMVWURQLH 390 AJAX I JSON &256WRVSHF\ğNDFMD:&DOHREVïXJLZDQD MHG\QLHZQDMQRZV]\FKZHUVMDFKSU]HJOÈGDUHN 3RQLHZDĝZ\PDJDNRQğJXUDFMLQDJïöZNöZ+773 ZVHUZHU]H:::Z\NUDF]DWRSR]D]DNUHV WHPDW\F]Q\QLQLHMV]HMNVLÈĝNL ALTERNATYWY :LHOHRVöEXĝ\ZDM4XHU\ZFHOXZ\NRQ\ZDQLD ĝÈGDñSRELHUDMÈF\FKGDQH]H]GDOQ\FKVHUZHUöZ 8SUDV]F]DWRSURFHVL]DSHZQLDZVWHF]QÈ]JRGQRĂÊ]HVWDUV]\PLSU]HJOÈGDUNDPL-DNPRĝHV] ]REDF]\ÊZQDVWÚSQHMNROXPQLHREVïXJDQLHNWöU\FKQRZ\FKSRGHMĂÊPRĝHE\ÊSUREOHPDW\F]QD OBSŁUGA CORS 6WDQGDUGRZRREVïXJÚ&256RIHUXMÈSU]HJOÈGDUNL &KURPH)LUHIR[,(6DIDUL$QGURLG LL26 3U]HJOÈGDUNL,QWHUQHW([SORUHUļXĝ\ZDMÈ niestandardowego obiektu XDomainRequest do REVïXJLĝÈGDñ&256 JAK DZIAŁA JSONP? Strona musi przede wszystkim ]DZLHUDÊIXQNFMÚSU]H]QDF]RQÈGR przetwarzania danych w formacie -6211DVWÚSQLH]DSRPRFÈHOHmentu <script> wykonywane jest ĝÈGDQLHGDQ\FK]VHUZHUD 6HUZHU]ZUDFDSOLNNWöU\Z\ZRïXMH IXQNFMÚSU]HWZDU]DMÈFÈGDQH'DQH ZIRUPDFLH-621VÈGRVWDUF]DQH MDNRDUJXPHQWWHMIXQNFML PRZEGLĄDARKA INTERNETOWA SERWER 6WURQD+70/Xĝ\ZDGZöFKIUDJPHQWöZNRGX -DYD6FULSW .LHG\VHUZHUXG]LHODRGSRZLHG]LVNU\SW]DZLHUD Z\ZRïDQLHGRQD]ZDQHMIXQNFMLNWöUDEÚG]LH SU]HWZDU]DÊGDQH IXQNFMDWD]RVWDïD]GHğQLRZDQD ZNURNX :\ZRïDQLHWHMIXQNFMLMHVWR]QDF]RQH OLWHUÈ3ZVNUöFLH-6213'DQHZIRUPDFLH-621 VÈGRVWDUF]DQHMDNRDUJXPHQWWHMIXQNFML 1. )XQNFMDSU]HWZDU]DMÈFDGDQH-621Z\VïDQH SU]H]VHUZHU:SU]\NïDG]LHSU]HGVWDZLRQ\P QDQDVWÚSQHMVWURQLHIXQNFMDWDPDQD]ZÚ showEvents() 2. (OHPHQW<script>NWöUHJRDWU\EXWsrc ZVND]XMHGDQH-621]H]GDOQHJRVHUZHUD <script> function showEvents(data) { // Kod odpowiedzialny za przetworzenie GDQ\FKLZ\ĂZLHWOHQLHLFKQDVWURQLH } </script> <script src=”http://example.org/jsonp”> </script> :RPDZLDQ\PSU]\NïDG]LHGDQH-621]QDMGXMÈ VLÚZHZQÈWU]Z\ZRïDQLDIXQNFMLshowEvents() showEvents({ “events”: [ { “location”: “San Francisco, CA”, “date”: “1 maja”, “map”: “img/map-ca.png” }... ] }); 7U]HED]ZUöFLÊXZDJÚQDEUDNNRQLHF]QRĂFLXĝ\FLDPHWRGparse()OXEstringfy() obiektu JSON podczas SUDF\]-62133RQLHZDĝGDQHVÈSU]HND]\ZDQHMDNRSOLNVNU\SWX DQLHFLÈJWHNVWRZ\ EÚGÈWUDNWRZDQH MDNRRELHNW 3OLNZVHUZHU]HMHVWF]ÚVWR]DSLV\ZDQ\DZLÚFPRĝQDSRGDÊQD]ZÚIXQNFMLNWöUDEÚG]LHSU]HWZDU]DïD RWU]\P\ZDQHGDQH1D]ZDWHMIXQNFMLMHVW]Z\NOHSRGDZDQDZFLÈJXWHNVWRZ\P]DS\WDQLDDGUHVX85/ http://example.org/upcomingEvents.php?callback=showEvents AJAX I JSON 391 UŻYCIE JSONP 3U]\NïDGWHQZ\JOÈGDWDNVDPR MDNSU]\NïDGZ\NRU]\VWXMÈF\ GDQH-621DOHLQIRUPDFMH V]F]HJöïRZHGRW\F]ÈFH ]GDU]HQLDVÈSRELHUDQH]H ]GDOQHJRVHUZHUD'ODWHJRWHĝ ZNRG]LH+70/]QDMGXMÈVLÚ GZDHOHPHQW\<script> Pierwszy z nich jest odpowieG]LDOQ\]DZF]\WDQLHSOLNX -DYD6FULSW]DZLHUDMÈFHJRIXQNFMÚshowEvents():\PLHQLRQD IXQNFMDVïXĝ\GRZ\ĂZLHWOHQLD LQIRUPDFMLRZ\GDU]HQLDFK 1DWRPLDVWGUXJLHOHPHQW <script> wczytuje informacje ]H]GDOQHJRVHUZHUD1D]ZD IXQNFMLSU]HWZDU]DMÈFHMGDQH MHVWSRGDZDQDZFLÈJX WHNVWRZ\P]DS\WDQLD c08/data-jsonp.html HTML <script src=”js/data-jsonp.js”></script> <script src=”http://deciphered.com/js/jsonp.js?callback=showEvents”></script> </body> </html> c08/js/data-jsonp.js function showEvents(data) { var newContent = ’’; 1 JAVASCRIPT )XQNFMDZ\ZRïDQLD]ZURWQHJRSRZF]\WDQLX-621 =PLHQQDSU]HFKRZXMÈFD]DZDUWRĂÊ+70/ 8WZRU]HQLHFLÈJXWHNVWRZHJRZUD]]QRZÈ]DZDUWRĂFLÈ PRĝQDXĝ\ÊWDNĝHRSHUDFML // opartych na modelu DOM). for (var i = 0; i < data.events.length; i++) { // Iteracja przez dane. newContent += ’<div class=”event”>’; newContent += ’<img src=”’ + data.events[i].map + ’”’; newContent += ’ alt=”’ + data.events[i].location + ’” />’; newContent += ’<p><b>’ + data.events[i].location + ’</b><br>’; newContent += data.events[i].date + ’</p>’; newContent += ’</div>’; } 8DNWXDOQLHQLHVWURQ\QRZÈ]DZDUWRĂFLÈ document.getElementById(’content’).innerHTML = newContent; } 1. .RGZSÚWOLfor (wykorzystywanej do przetworzenia danych JSON oraz utworzenia ]DZDUWRĂFL+70/ LZLHUV]NRGX RGSRZLHG]LDOQ\]DXPLHV]F]HQLH ]DZDUWRĂFLQDVWURQLHVÈ WDNLHVDPHMDNZSU]\NïDG]LH SU]HWZDU]DMÈF\PGDQH-621 SREUDQH]WHJRVDPHJRVHUZHUD 392 AJAX I JSON ,VWQLHMÈWU]\ZDĝQHUöĝQLFH i) .RGMHVWRSDNRZDQ\IXQNFMÈ o nazwie showEvents() ii) 'DQH-621VÈSRGDZDQH MDNRDUJXPHQWZ\ZRïDQLD IXQNFML iii) 'DQHQLHPXV]ÈE\ÊSU]HWZDU]DQH]DSRPRFÈPHWRG\ JSON.parse():SÚWOLfor RGZRïDQLHGRGDQ\FKQDVWÚSXMH z zastosowaniem parametru data =DPLDVWGHğQLRZDÊGUXJLHOHment <script> w dokumentach +70/PRĝQDZ\NRU]\VWDÊ-DYD6FULSWGRZVWDZLHQLDQRZHJR HOHPHQWX<script> na stronie HTML (podobnie jak dodajesz QDQLHMNDĝG\LQQ\HOHPHQW ']LÚNLWHPXFDïDIXQNFMRQDOQRĂÊ GRW\F]ÈFD]HZQÚWU]Q\FKGDQ\FK EÚG]LH]QDMGRZDïDVLÚZMHGQ\P SOLNX-DYD6FULSW -6213ZF]\WXMH-DYD6FULSW DNDĝGHGDQH-DYD6FULSWPRJÈ ]DZLHUDÊNRGR]ïRĂOLZ\P G]LDïDQLX=WHJRSRZRGX SRZLQLHQHĂZF]\W\ZDÊGDQH MHG\QLH]]DXIDQ\FKěUöGHï 3RQLHZDĝ-6213R]QDF]D wczytywanie danych z innego VHUZHUDPRĝHV]GRGDÊ]HJDU ZFHOXVSUDZG]HQLDF]\VHUZHU XG]LHOLïRGSRZLHG]LZRNUHĂORQ\PF]DVLH MHĂOLRGSRZLHGěQLH QDGHMG]LHPRĝQDZ\ĂZLHWOLÊ NRPXQLNDWREïÚG]LH JAVASCRIPT :LÚFHMLQIRUPDFMLGRW\F]ÈF\FK REVïXJLEïÚGöZ]QDMG]LHV] ZUR]G]LDOHQDWRPLDVW SU]\NïDGXĝ\FLD]HJDUD SU]HGVWDZLRQRZUR]G]LDOH ZNWöU\PWZRU]\P\VODMG\ ]]DZDUWRĂFLÈ http://htmlandcssbook.com/js/jsonp.js showEvents({ “events”: [ { “location”: “San Francisco, CA”, “date”: “1 maja”, “map”: “img/map-ca.png” }, { “location”: “Austin, TX”, “date”: “15 maja”, “map”: “img/map-tx.png” }, { “location”: “New York, NY”, “date”: “30 maja”, “map”: “img/map-ny.png” } ] }); WYNIK =DZDUWRĂÊSOLNX]ZUöFRQHJR ]VHUZHUDMHVWZZ\ZRïDQLX funkcji showEvents() opakowana danymi w formacie -621'ODWHJRWHĝIXQNFMD showEvents()EÚG]LHZ\ZRï\ZDQDW\ONRZWHG\JG\SU]HJOÈGDUNDLQWHUQHWRZDZF]\WD ]HZQÚWU]QHGDQH AJAX I JSON 393 JQUERY I AJAX — ŻĄDANIA M4XHU\RIHUXMHNLONDPHWRGSU]H]QDF]RQ\FKGRREVïXJLĝÈGDñ$MD[ 3RGREQLHMDNLQQHSU]\NïDG\ZUR]G]LDOHSURFHVWHQVNïDGDVLÚ]GZöFK NURNöZĽZ\NRQDQLDĝÈGDQLDLREVïXJLRWU]\PDQHMRGSRZLHG]L :WDEHOLSRSUDZHMVWURQLH Z\PLHQLRQRV]HĂÊPHWRGM4XHU\ SR]ZDODMÈF\FKQDZ\NRQ\ZDQLH ĝÈGDñ$MD[3LHUZV]HSLÚÊ to skróty metody $.ajax() NWöUD]RVWDïDZ\PLHQLRQDMDNR RVWDWQLD V]öVWD Metoda .load() operuje QDHOHPHQWDFKZ\EUDQ\FK ZM4XHU\ F]\OLG]LDïDSRGREQLH MDNZLÚNV]RĂÊPHWRGM4XHU\ 1RZÈ]DZDUWRĂÊ+70/PHWRGD ta umieszcza we wskazanych HOHPHQWDFK 0RĝHV]]REDF]\ÊĝH]DSLV SR]RVWDï\FKSLÚFLXPHWRGMHVW ]XSHïQLHLQQ\7RVÈPHWRG\ RELHNWXJOREDOQHJRjQuery VWÈGLFKQD]Z\]DF]\QDMÈVLÚ od znaku $0HWRG\WHMHG\QLH ĝÈGDMÈGDQ\FK]VHUZHUDQLH Xĝ\ZDMÈDXWRPDW\F]QLHW\FK GDQ\FKZFHOXXDNWXDOQLHQLD HOHPHQWöZ]QDMGXMÈF\FKVLÚ ZGRSDVRZDQ\P]ELRU]H 'ODWHJRWHĝSR]QDNX$ nie ]QDMGXMHVLÚVHOHNWRU .LHG\VHUZHU]ZUöFLGDQH VNU\SWPXVLZVND]DÊZMDNL VSRVöEPDMÈE\ÊSU]HWZRU]RQH 394 AJAX I JSON 0(72'$ 6.$'1,$ OPIS .load() :F]\WXMHIUDJPHQW\+70/ZHOHPHQFLH To jest najprostsza metoda przeznaczona GRSRELHUDQLDGDQ\FK $.get() :F]\WXMHGDQH]DSRPRFÈPHWRG\+773 GET8ĝ\ZDQDGRĝÈGDQLDGDQ\FK]VHUZHUD $.post() :F]\WXMHGDQH]DSRPRFÈPHWRG\+773 POST8ĝ\ZDQDZFHOXZ\V\ïDQLDGDQ\FK NWöUHXDNWXDOQLDMÈGDQHZVHUZHU]H $.getJSON() :F]\WXMHGDQH-621]DSRPRFÈĝÈGDQLD GET0HWRGDXĝ\ZDQDGODGDQ\FK-621 $.getScript() :F]\WXMHLZ\NRQXMHGDQH-DYD6FULSW]D SRPRFÈĝÈGDQLDGET0HWRGDXĝ\ZDQDGOD GDQ\FK-DYD6FULSW QDSU]\NïDG-6213 $.ajax() Metoda wykorzystywana do wykonywania ZV]\VWNLFKĝÈGDñ:\PLHQLRQHZF]HĂQLHM PHWRG\ZWOHXĝ\ZDMÈ$.ajax() JQUERY I AJAX — ODPOWIEDZI 3RGF]DVXĝ\FLDPHWRG\.load()]DZDUWRĂÊ+70/]ZUDFDQDSU]H]VHUZHU ]RVWDMHZVWDZLRQDGRHOHPHQWöZZ\EUDQ\FKZM4XHU\:SU]\SDGNX SR]RVWDï\FKPHWRGWU]HEDZVND]DÊVSRVöESU]HWZRU]HQLDGDQ\FK ]ZUöFRQ\FK]DSRPRFÈRELHNWXjqXHR :$¥&,:2¥&,-4;+5 OPIS responseText =ZUöFRQHGDQHWHNVWRZH responseXML =ZUöFRQHGDQH;0/ status .RGVWDQX statusText 2SLVVWDQX ]Z\NOHZ\NRU]\VW\ZDQ\ GRZ\ĂZLHWOHQLDLQIRUPDFMLREïÚG]LH MHĂOLWDNLZ\VWÈSL 0(72'<-4;+5 OPIS .done() .RGSU]H]QDF]RQ\GRXUXFKRPLHQLDMHĂOLZ\NRQDQLH ĝÈGDQLD]DNRñF]\ïRVLÚSRZRG]HQLHP .fail() .RGSU]H]QDF]RQ\GRXUXFKRPLHQLDMHĂOLZ\NRQDQLH ĝÈGDQLD]DNRñF]\ïRVLÚQLHSRZRG]HQLHP .always() .RGSU]H]QDF]RQ\GRXUXFKRPLHQLDMHĂOLZ\NRQDQLH ĝÈGDQLD]DNRñF]\ïRVLÚSRZRG]HQLHPOXEQLHSRZRG]HQLHP .abort() :VWU]\PDQLHNRPXQLNDFML WZGLĘDNE ADRESY URL -HĝHOL]DZDUWRĂÊZF]\W\ZDQD ]DSRPRFÈWHFKQRORJLL$MD[ ]DZLHUDZ]JOÚGQHDGUHV\85/ QDSU]\NïDGREUD]\LïÈF]D WRWHDGUHV\85/EÚGÈWUDNWRZDQHZWDNLVSRVöEMDNE\ E\ï\Z]JOÚGQHGODpierwotnie ZF]\WDQHMVWURQ\ -HĝHOLQRZD]DZDUWRĂÊ+70/ ]QDMGXMHVLÚZLQQ\PNDWDORJXQLĝSLHUZRWQDVWURQDWR Z]JOÚGQHĂFLHĝNLDGUHVXPRJÈ RND]DÊVLÚQLHSUDZLGïRZH 1. 7HQSOLN+70/Z\NRU]\VWXMHWHFKQRORJLÚ$MD[ZFHOX ZF]\WDQLD]DZDUWRĂFL]HVWURQ\ ]QDMGXMÈFHMVLÚZNDWDORJX ZVND]DQ\PZSXQNFLH 2. 6WURQDZW\PNDWDORJX ]DZLHUDREUD]\RĂFLHĝNDFK GRVWÚSXZ]JOÚGQ\FKGOD GUXJLHJRNDWDORJX <img src=”img/box.gif” /> 3. 3OLN+70/QLHPRĝHRGV]XNDÊREUD]XSRQLHZDĝĂFLHĝND GRVWÚSXQLHMHVWMXĝSUDZLGïRZD ĽQLHSURZDG]LGRHOHPHQWX ZNDWDORJXSRWRPQ\P jQuery ma obiekt o nazwie jqXHRNWöU\XïDWZLDREVïXJÚ GDQ\FKRWU]\PDQ\FK]VHUZHUD :ïDĂFLZRĂFLLPHWRG\WHJR RELHNWX Z\PLHQLRQHZWDEHODFK SROHZHMVWURQLH EÚGÈXĝ\ZDQH QDNLONXNROHMQ\FKVWURQDFK 3RQLHZDĝM4XHU\SR]ZDODQD ïÈF]HQLHPHWRGWR]DSRPRFÈ metod .done().fail() i .always()PRĝQDXUXFKRPLÊ RGSRZLHGQLNRGZ]DOHĝQRĂFL od wyniku operacji wczytywania GDQ\FK 1 2 3 AJAX I JSON 395 WCZYTYWANIE ZAWARTOŚCI HTML NA STRONIE Z WYKORZYSTANIEM JQUERY Metoda .load()WRQDMSURVWV]D]PHWRGM4XHU\$MD[0RĝHE\ÊXĝ\ZDQD MHG\QLHGRZF]\W\ZDQLD]DZDUWRĂFL+70/]VHUZHUDDOHNLHG\VHUZHU XG]LHODRGSRZLHG]L]DZDUWRĂÊWDMHVWXPLHV]F]DQDZHOHPHQWDFKZ\EUDQ\FK ZM4XHU\ SELEKTOR JQUERY ADRES URL STRONY SELEKTOR 1DSRF]ÈWNXQDOHĝ\Z\EUDÊ HOHPHQWZNWöU\PPD]RVWDÊ XPLHV]F]RQD]DZDUWRĂÊ+70/ 1DVWÚSQLHPHWRGD.load() jest Xĝ\ZDQDGRZVND]DQLDDGUHVX 85/VWURQ\+70/SU]H]QDF]R QHMGRZF]\WDQLD ,VWQLHMHPRĝOLZRĂÊRNUHĂOHQLD ĝHPD]RVWDÊZF]\WDQDW\ONR F]ÚĂÊVWURQ\ ]DPLDVWFDïHM $(’#content’).load(’jq-ajax3.html #content’); 1 1. 8WZRU]HQLHRELHNWXM4XHU\ NWöUHJRDWU\EXWidPDZDUWRĂÊ content. 2 2. $GUHV85/VWURQ\]NWöUHM PD]RVWDÊZF]\WDQD]DZDUWRĂÊ +70/0LÚG]\DGUHVHP85/ LVHOHNWRUHPZNURNXPXVL ]QDMGRZDÊVLÚVSDFMD 1DVWURQLHSRND]DQHMSRSUDZHMïÈF]D ]QDMGXMÈFHVLÚZSUDZ\PJöUQ\PURJX VÈXĝ\ZDQHGRSU]HMĂFLDQDLQQHVWURQ\ -HĝHOLXĝ\WNRZQLNPDZïÈF]RQÈREVïXJÚ -DYD6FULSWWRNOLNQLÚFLHïÈF]DSRZRGXMH ĝHNRGZPHWRG]LHREVïXJL]GDU]HQLD .on()QLHZF]\WXMHFDïHMQRZHMVWURQ\ =DPLDVWWHJRPHWRGD.load()]DVWÚSXMH REV]DUR]QDF]RQ\NRORUHPUöĝRZ\P VHNFMDZNWöUHMDWU\EXWidPDZDUWRĂÊ content RGSRZLHGQLPIUDJPHQWHP]H VWURQ\ZVND]DQHMSU]H]Xĝ\WNRZQLND 2GĂZLHĝRQ\EÚG]LHMHG\QLHREV]DU R]QDF]RQ\NRORUHPUöĝRZ\PDQLH FDïDVWURQD 396 AJAX I JSON 3 3. 7RMHVWIUDJPHQWVWURQ\ +70/SU]H]QDF]RQ\GR Z\ĂZLHWOHQLD3RQRZQLHEÚG]LH WRVHNFMDNWöUHMDWU\EXWid ma ZDUWRĂÊcontent. WCZYTYWANIE ZAWARTOŚCI .LHG\Xĝ\WNRZQLNNOLNQLH GRZROQHïÈF]HZHOHPHQFLH <nav>QDVWÈSLMHGQR]GZöFK SRQLĝV]\FK]GDU]Hñ -HĝHOLZïÈF]RQDMHVWREVïXJD -DYD6FULSW]GDU]HQLHclick VSRZRGXMHZ\ZRïDQLHIXQNFML DQRQLPRZHMNWöUD]NROHL ZF]\WDLXPLHĂFLQDVWURQLH QRZÈ]DZDUWRĂÊ -HĝHOLREVïXJD-DYD6FULSW QLHMHVWZïÈF]RQDWRQDVWÈSL VWDQGDUGRZHSU]HMĂFLH]MHGQHM VWURQ\QDLQQÈ :HZQÈWU]IXQNFMLDQRQLPRZHM PRĝQDZ\UöĝQLÊSLÚÊHWDSöZ G]LDïDQLD 3. Atrybuty classZïÈF]DFK ]RVWDMÈXDNWXDOQLRQHLZVND]XMÈ VWURQÚELHĝÈFÈ 1. :\ZRïDQLH e.preventDefault() wstrzyPXMHSU]HQLHVLHQLHXĝ\WNRZQLND QDQRZÈVWURQÚ 4. (OHPHQWSU]HFKRZXMÈF\ ]DZDUWRĂÊ]RVWDMHXVXQLÚW\ 2. Zmienna o nazwie url SU]HFKRZXMHDGUHV85/VWURQ\ GRZF]\WDQLD$GUHVWHQMHVW pobierany z atrybutu hrefïÈF]D NOLNQLÚWHJRSU]H]Xĝ\WNRZQLND LZVND]XMHVWURQÚSU]H]QDF]RQÈ GRZF]\WDQLD c08/js/jq-load.js JAVASCRIPT 1 2 $(’nav a’).on(’click’, function(e) { e.preventDefault(); var url = this.href; 5 8ĝ\WNRZQLNNOLNQÈïïÈF]H =DWU]\PDQLHZF]\W\ZDQLDQRZHJRïÈF]D 3REUDQLHZDUWRĂFLDWU\EXWXKUHI $(’nav a.current’).removeClass(’current’); 8VXQLÚFLHNODV\FXUUHQW $(this).addClass(’current’); 2NUHĂOHQLHQRZHJRHOHPHQWXMDNRELHĝÈFHJR 3 4 5. 1DVWÚSXMHZ\EöUHOHPHQWX NRQWHQHUDDPHWRGD.load() SRELHUDQRZÈ]DZDUWRĂÊ (OHPHQWMHVWQDW\FKPLDVWXNU\ZDQ\]DSRPRFÈZ\ZRïDQLD .hide()DE\PöJïSRMDZLÊVLÚ QDVWURQLHQDVNXWHNZ\ZRïDQLD fadeIn() $(’#container’).remove(); 8VXQLÚFLHVWDUHM]DZDUWRĂFL $(’#content’).load(url + ’ #content’).hide().fadeIn(’slow’); 1RZD]DZDUWRĂÊ }); HTML c08/jq-load.html <nav> <a href=”jq-load.html” class=”current”>6WURQDJïöZQD</a> <a href=”jq-load2.html”>Trasa</a> <a href=”jq-load3.html”>*DGĝHW\</a> </nav> <section id=”content”> <div id=”container”> 0LHMVFHQD]DZDUWRĂÊVWURQ\! </div> </section> ÈF]DEÚGÈG]LDïDï\QDZHW MHĂOLREVïXJD-DYD6FULSWMHVW Z\ïÈF]RQDZSU]HJOÈGDUFH :SU]\SDGNXZïÈF]HQLDREVïXJL-DYD6FULSWELEOLRWHND M4XHU\]DZDUWRĂÊZVND]DQHM VWURQ\ZF]\WDGRHOHPHQWX <div>NWöUHJRDWU\EXWid PDZDUWRĂÊcontent3R]RVWDïDF]ÚĂÊVWURQ\QLHPXVL E\ÊSRQRZQLHZF]\W\ZDQD AJAX I JSON 397 SKRÓTY METOD AJAX W JQUERY jQuery oferuje skróty metod przeznaczonych GRREVïXJLRNUHĂORQ\FKW\SöZĝÈGDñ$MD[ :\PLHQLRQHSRQLĝHMPHWRG\VÈ PHWRGDPLVNUöWöZ3DWU]ÈFQD NRGěUöGïRZ\M4XHU\]DXZDĝ\V]ĝHZWOHZV]\VWNLHRQH Xĝ\ZDMÈPHWRG\$.ajax() 0HWRG\WHSR]QDV]QDNROHMQ\FK NLONXVWURQDFKZSURZDG]DMÈ RQHNOXF]RZHDVSHNW\PHWRG\ $.ajax() :SU]HFLZLHñVWZLHGRLQQ\FK metod wymienione tutaj nie G]LDïDMÈ]HOHPHQWDPLZ\EUDQ\PLZM4XHU\'ODWHJRWHĝ MHG\Q\PSUHğNVHPMHVW]QDN $]DPLDVWNROHNFMLHOHPHQWöZ Z\EUDQ\FKZM4XHU\=UHJXï\ PHWRG\WHVÈZ\ZRï\ZDQHSU]H] ]GDU]HQLHWDNLHMDNZF]\WDQLH VWURQ\OXEG]LDïDQLDSRGHMPRZDQHSU]H]Xĝ\WNRZQLNDQD VWURQLH QDSU]\NïDGNOLNQLÚFLH ïÈF]DZ\VïDQLHIRUPXODU]D :SU]\SDGNXĝÈGDQLD$MD[F]ÚVWR]DFKRG]LSRWU]HEDZ\VïDQLD GDQ\FKGRVHUZHUDFR]NROHL ZSï\ZDQDGDQHSU]HND]\ZDQH SU]HJOÈGDUFHSU]H]VHUZHU Podobnie jak w przypadku IRUPXODU]\+70/ LĝÈGDñ$MD[ SU]HGVWDZLRQ\FKZF]HĂQLHM ZUR]G]LDOH GDQHPRĝQD Z\VïDÊ]DSRPRFÈ+773GET OXEPOST 0(72'$ 6.$'1,$ OPIS $.get(url[, dane][, Z\ZRïDQLHB]ZURWQH][, typ]) ¿ÈGDQLH+773GETPDMÈFHQDFHOXSREUDQLHGDQ\FK $.post(url[, dane][, Z\ZRïDQLHB]ZURWQH][, typ]) ¿ÈGDQLH+773POSTXDNWXDOQLDMÈFHGDQHZVHUZHU]H $.getJSON(url[, dane][, Z\ZRïDQLHB]ZURWQH]) :F]\WDQLHGDQ\FK-621]DSRPRFÈĝÈGDQLDGET $.getScript(url[, Z\ZRïDQLHB]ZURWQH]) :F]\WDQLHLZ\NRQDQLHNRGX-DYD6FULSW QDSU]\NïDG -6213 ]DSRPRFÈĝÈGDQLDGET 3DUDPHWU\Z\PLHQLRQHZQDZLDVDFKNZDGUDWRZ\FKVÈRSFMRQDOQH $ZVND]XMHĝHMHVWWRPHWRGDRELHNWXjQuery urlRNUHĂODPLHMVFHVNÈGPDMÈE\ÊSREUDQHGDQH daneGRVWDUF]DZV]HONLHLQIRUPDFMHGRGDWNRZHSU]HND]\ZDQHVHUZHURZL Z\ZRïDQLHB]ZURWQHZVND]XMHĝHIXQNFMDSRZLQQDE\ÊZ\ZRïDQDJG\]RVWDQÈ]ZUöFRQHGDQH PRĝHWRE\ÊIXQNFMDDQRQLPRZDOXEQD]ZDQD typZVND]XMHW\SGDQ\FKRF]HNLZDQ\FK]VHUZHUD 8ZDJD3U]HGVWDZLRQHWXWDMSU]\NïDG\G]LDïDMÈMHG\QLHZVHUZHU]H::: DQLHORNDOQ\PV\VWHPLH SOLNöZ .RQğJXUDFMDVHUZHUD:::LMÚ]\NLG]LDïDMÈFHSRVWURQLHVHUZHUDWR]DJDGQLHQLDZ\NUDF]DMÈFH SR]D]DNUHVWHPDW\F]Q\WHMNVLÈĝNL3U]\NïDG\PRĝHV]MHGQDNZ\SUöERZDÊZZLWU\QLHSRĂZLÚFRQHM NVLÈĝFH3OLNL3+3]QDMGXMÈVLÚZPDWHULDïDFKGRïÈF]RQ\FKGRNVLÈĝNLDOHXPLHV]F]RQRMHWDPW\ONR ZFHODFKGHPRQVWUDF\MQ\FK 398 AJAX I JSON ŻĄDANIE DANYCH :SU]HGVWDZLRQ\PSRQLĝHM SU]\NïDG]LHXĝ\WNRZQLNJïRVXMH QDXOXELRQÈNRV]XONÚLQLHPXVL SU]\W\PRSXV]F]DÊVWURQ\ MHVWSU]HFKRZ\ZDQDZ]PLHQQHM o nazwie queryString w formaFLHFLÈJXWHNVWRZHJR]DS\WDQLD QDSU]\NïDGvote=gray iii) )XQNFMDREVïXJXMÈFD GDQHRWU]\PDQH]VHUZHUD :RPDZLDQ\PSU]\NïDG]LHWR IXQNFMDDQRQLPRZD 1. .OLNQLÚFLHNRV]XONLSU]H] Xĝ\WNRZQLNDSRZRGXMHZ\ZRïDQLHIXQNFMLDQRQLPRZHM 4. Metoda $.get()MHVW Z\ZRï\ZDQD]Xĝ\FLHPWU]HFK SDUDPHWUöZ i) 6WURQDRGSRZLHG]LDOQD]D SU]HWZRU]HQLHĝÈGDQLD ZW\P VDP\PVHUZHU]H ii) 'DQHZ\V\ïDQHGRVHUZHUD ZRPDZLDQ\PSU]\NïDG]LHMHVW WRFLÈJWHNVWRZ\]DPöZLHQLD DOHWRPRJÈE\ÊUöZQLHĝGDQH -621 5. 3RXG]LHOHQLXRGSRZLHG]L SU]H]VHUZHUZ\ZRïDQLH]ZURWQH ZSRVWDFLIXQNFMLDQRQLPRZHM ]DMPXMHVLÚREVïXJÈGDQ\FK :RPDZLDQ\PSU]\NïDG]LH NRGIXQNFMLSRZRGXMHSREUDQLH HOHPHQWXSU]HGVWDZLDMÈFHJR NRV]XONÚZ\EUDQÈSU]H] Xĝ\WNRZQLNDDQDVWÚSQLH ]DVWÈSLHQLHJRNRGHP+70/ RWU]\PDQ\P]VHUZHUD2GE\ZD VLÚWR]DSRPRFÈPHWRG\M4XHU\ o nazwie .html() 2. Metoda e.PreventDefault() XQLHPRĝOLZLDSU]HMĂFLHQDQRZÈ VWURQÚ 3. :\EöUGRNRQDQ\SU]H] Xĝ\WNRZQLNDWRZDUWRĂÊ DWU\EXWXidREUD]X:DUWRĂÊWD JAVASCRIPT 1 2 3 4 5 c08/js/jq-get.js $(’#selector a’).on(’click’, function(e) { e.preventDefault(); var queryString = ’vote=’ + event.target.id; $.get(’votes.php’, queryString, function(data) { $(’#selector’).html(data); }); }); HTML (Ten kod HTML jest tworzony przez kod znajdujący się w pliku JS). <div class=”third”><a href=”vote.php?vote=gray”> <img src=”img/t-gray.png” id=”gray” alt=”gray” /></a></div> <div class=”third”><a href=”vote.php?vote=yellow”> <img src=”img/t-yellow.png” id=”yellow” alt=”yellow” /></a></div> <div class=”third”><a href=”vote.php?vote=green”> <img src=”img/t-green.png” id=”green” alt=”green” /></a></div> WYNIK ÈF]DSURZDG]ÈFHGRNRV]XOHNVÈWZRU]RQHSU]H] NRG]QDMGXMÈF\VLÚZSOLNX-6*ZDUDQWXMHWR LFKZ\ĂZLHWOHQLHW\ONRZWHG\JG\SU]HJOÈGDUND REVïXJXMH-DYD6FULSW Z\QLNRZDVWUXNWXUD+70/ ]RVWDïDSU]HGVWDZLRQDSRZ\ĝHM .LHG\VHUZHU XG]LHODRGSRZLHG]LQLHPXVLRQD]DZLHUDÊNRGX +70/:DUWRĂFLÈ]ZURWQÈPRJÈE\ÊGRZROQHJR URG]DMXGDQHNWöUHSU]HJOÈGDUNDSRWUDğSU]HWZRU]\ÊLZ\NRU]\VWDÊ AJAX I JSON 399 WYSYŁANIE FORMULARZY SIECIOWYCH Z WYKORZYSTANIEM TECHNOLOGII AJAX :FHOXZ\VïDQLDGDQ\FKGRVHUZHUD SUDZGRSRGREQLHXĝ\MHV]PHWRG\ .post()%LEOLRWHNDM4XHU\RIHUXMHWDNĝHPHWRGÚ.serialize() SU]H]QDF]RQÈGR]ELHUDQLDGDQ\FK ]IRUPXODU]DVLHFLRZHJR • XPLHV]F]HQLHW\FKLQIRUPDFMLZFLÈJXWHNVWR- WYSYŁANIE DANYCH FORMULARZA SIECIOWEGO :\V\ïDRQDMHG\QLHGDQH]NRQWUROHNIRUPXODU]D sieciowego oznaczonych jako SUDZLGïRZR Z\SHïQLRQHFRR]QDF]DĝHQLH]RVWDQÈZ\VïDQH LQIRUPDFMH ]NRQWUROHNZ\ïÈF]RQ\FK ]NRQWUROHNZNWöU\FKQLHZ\EUDQRĝDGQHM opcji; ]SU]\FLVNXZ\V\ïDMÈFHJRIRUPXODU] Metoda HTTP POSTMHVWF]ÚVWRVWRVRZDQDSRGF]DV Z\V\ïDQLDGDQ\FKIRUPXODU]DVLHFLRZHJRGR VHUZHUD3RVLDGDRGSRZLDGDMÈFÈMHMIXQNFMÚĽ PHWRGÚ.post()NWöUDSRELHUDWU]\WDNLHVDPH parametry jak metoda .get() i) QD]ZÚSOLNX ZW\PVDP\PVHUZHU]H RGSRZLHG]LDOQHJR]DSU]HWZRU]HQLHGDQ\FKIRUPXODU]D sieciowego; ii) GDQHIRUPXODU]DZ\V\ïDQHGRVHUZHUD iii) IXQNFMÚZ\ZRïDQLD]ZURWQHJRREVïXJXMÈFÈ RGSRZLHGěXG]LHORQÈSU]H]VHUZHU 1DVWURQLHSRSUDZHMPRĝHV]]REDF]\Ê]DVWRVRwanie metody $.post() wraz z .serialize() FRVWDQRZLEDUG]RXĝ\WHF]QHSRïÈF]HQLHSRGF]DV SUDF\]IRUPXODU]DPLVLHFLRZ\PL:\PLHQLRQH PHWRG\UD]HPZ\V\ïDMÈGDQHGRVHUZHUD POBIERANIE DANYCH FORMULARZA SIECIOWEGO ']LDïDQLHPHWRG\M4XHU\.serialize() przedstaZLDVLÚQDVWÚSXMÈFR SREUDQLHZV]\VWNLFKLQIRUPDFML]IRUPXODU]D sieciowego; • 400 AJAX I JSON • Z\PNWöU\MHVWJRWRZ\GRZ\VïDQLDGRVHUZHUD ]DNRGRZDQLH]QDNöZNWöUHQLHPRJÈE\Ê Xĝ\ZDQHZFLÈJXWHNVWRZ\P]DS\WDQLD =Z\NOHPHWRGDWDEÚG]LHVWRVRZDQDZVHOHNFML ]DZLHUDMÈFHMHOHPHQW<form> FKRÊPRĝQDMÈ Z\NRU]\VW\ZDÊWDNĝHZSRV]F]HJöOQ\FKHOHPHQWDFKOXESRG]ELRU]HIRUPXODU]D • • • PO STRONIE SERWERA .LHG\VWURQDSRVWURQLHVHUZHUD]DMPXMHVLÚREVïXJÈIRUPXODU]DVLHFLRZHJRPRĝQDMÈZ\NRU]\VWDÊ WDNĝHZQDVWÚSXMÈF\FKV\WXDFMDFK :\NRQDQH]RVWDïR]Z\NïHĝÈGDQLHVWURQ\ LQWHUQHWRZHM ZWDNLPSU]\SDGNXZ\V\ïDQDMHVW FDïDVWURQD :\NRQDQH]RVWDïRĝÈGDQLH$MD[ ZWDNLP SU]\SDGNXZ\V\ïDQ\PRĝHE\ÊW\ONRIUDJPHQW VWURQ\ • • =DSRĂUHGQLFWZHPQDJïöZNDX-Requested-With SRVWURQLHVHUZHUDPRĝQDVSUDZG]LÊF]\ĝÈGDQLH ]RVWDïRZ\NRQDQHZWHFKQRORJLL$MD[ -HĝHOLZ\PLHQLRQ\QDJïöZHNMHVWXVWDZLRQ\LPD ZDUWRĂÊXMLHttpRequestWRZLDGRPRĝHĝÈGDQLH ]RVWDïRZ\NRQDQHZWHFKQRORJLL$MD[ WYSYŁANIE FORMULARZY SIECIOWYCH 1. .LHG\Xĝ\WNRZQLNZ\V\ïD IRUPXODU]VLHFLRZ\QDVWÚSXMH Z\NRQDQLHIXQNFMLDQRQLPRZHM 2. Metoda e.PreventDefault() XQLHPRĝOLZLDZ\VïDQLHIRUPXODU]DVLHFLRZHJR 3. =DSRPRFÈPHWRG\ .serialize()QDVWÚSXMH ]HEUDQLHGDQ\FKIRUPXODU]D JAVASCRIPT 1 2 3 4 5 DQDVWÚSQLHLFKXPLHV]F]HQLH w zmiennej details 4. Metoda $.post() jest Z\ZRïDQD]Xĝ\FLHPWU]HFK SDUDPHWUöZ i) DGUHVX85/VWURQ\GRNWöUHM VÈSU]HND]\ZDQHGDQH ii) GDQ\FK]HEUDQ\FK]IRUPXODrza sieciowego; iii) IXQNFMLZ\ZRïDQLD]ZURWQHJRNWöUDZ\ĂZLHWOLZ\QLNL Xĝ\WNRZQLNRZL 5. .LHG\VHUZHUXG]LHOLRGSRZLHG]L]DZDUWRĂÊHOHPHQWX którego atrybut idPDZDUWRĂÊ register]RVWDQLHQDGSLVDQD QRZÈ]DZDUWRĂFLÈ+70/ RWU]\PDQÈ]VHUZHUD c08/js/jq-post.js $(’#register’).on(’submit’, function(e) { 3RZ\VïDQLXIRUPXODU]DVLHFLRZHJR e.preventDefault(); 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D var details = $(’#register’).serialize(); 6HULDOL]DFMDGDQ\FKIRUPXODU]D $.post(’register.php’, details, function(data) { 8ĝ\FLHPHWRG\SRVW GRZ\VïDQLDGDQ\FK $(’#register’).html(data); 0LHMVFHZ\ĂZLHWOHQLDZ\QLNX }); }); HTML c08/jq-post.html <form id=”register” action=”register.php” method=”post”> <h2>Rejestracja</h2> <label for=”name”>1D]ZDXĝ\WNRZQLND</label><input type=”text” id=”name” name=”name” /> <label for=”pwd”>+DVïR</label><input type=”password” id=”pwd” name=”pwd” /> <label for=”email”>E-mail</label><input type=”email” id=”email” name=”email” /> LQSXWW\SH ĵVXEPLWĵYDOXH ĵ'RïÈF]ĵ! </form> WYNIK 3U]\NïDGWHQWU]HEDXUXFKRPLÊZVHUZHU]H::: 6WURQD]QDMGXMÈFDVLÚSRVWURQLHVHUZHUD]ZUöFL NRPXQLNDWSRWZLHUG]HQLD DOHQLHSU]HSURZDG]D ZHU\ğNDFMLRWU]\PDQ\FKGDQ\FKRUD]QLHZ\V\ïD ZLDGRPRĂFLHPDLO]SRWZLHUG]HQLHP AJAX I JSON 401 WCZYTYWANIE DANYCH JSON I OBSŁUGA BŁĘDÓW AJAX 'DQH-621PRĝQDZF]\WDÊ]DSRPRFÈPHWRG\$.getJSON() ,VWQLHMÈWDNĝHPHWRG\SRPDJDMÈFHZSU]HWZRU]HQLXRGSRZLHG]L JG\Z\NRQDQLHPHWRG\]DNRñF]\VLÚQLHSRZRG]HQLHP WCZYTANIE DANYCH JSON SUKCES I NIEPOWODZENIE -HĝHOLFKFHV]ZF]\WDÊGDQH-621GRG\VSR]\FML PDV]PHWRGÚRQD]ZLH$.getJSON()-HMG]LDïDQLHSROHJDQDSREUDQLXGDQ\FK-621]WHJR VDPHJRVHUZHUD]NWöUHJRSRFKRG]LVWURQD $E\Xĝ\Ê-6213QDOHĝ\Z\NRU]\VWDÊPHWRGÚ $.getScript() 'RVWÚSQHVÈWU]\PHWRG\NWöUHPRĝQDïÈF]\ÊSR $.get()$.post()$.getJSON() oraz $.ajax() ZFHOXREVïXĝHQLDVXNFHVXOXEQLHSRZRG]HQLD ĝÈGDQLD AJAX I BŁĘDY &]DVDPL]GDU]DVLÚĝHĝÈGDQLHVWURQ\LQWHUQHWRZHM]DNRñF]\VLÚQLHSRZRG]HQLHPWHFKQRORJLD $MD[QLHMHVWWXWDMZ\MÈWNLHP'ODWHJRWHĝM4XHU\ GRVWDUF]DGZLHPHWRG\NWöUHPRJÈXUXFKRPLÊ RGSRZLHGQLNRGZ]DOHĝQRĂFLRGZ\QLNXZ\NRQDQLDĝÈGDQLD VXNFHVOXEQLHSRZRG]HQLH 3RQDGWR GRVWÚSQDMHVWMHV]F]HWU]HFLDPHWRGDXUXFKDPLDMÈFDNRGQLH]DOHĝQLHRGZ\QLNXZ\NRQDQLD ĝÈGDQLD 3RQLĝHMSU]HGVWDZLRQRSU]\NïDGSRND]XMÈF\WH NRQFHSFMH 402 AJAX I JSON .done()ĽPHWRGD]GDU]HQLDNWöUDMHVWZ\ZRï\ZDQDJG\Z\NRQDQLHĝÈGDQLD]DNRñF]\VLÚ powodzeniem; .fail()ĽPHWRGD]GDU]HQLDNWöUDMHVWZ\ZRï\ZDQDJG\Z\NRQDQLHĝÈGDQLD]DNRñF]\VLÚ niepowodzeniem; .always()ĽPHWRGD]GDU]HQLDNWöUDMHVW Z\ZRï\ZDQDSRZ\NRQDQLXĝÈGDQLDQLH]DOHĝQLHRG MHJRZ\QLNX VXNFHVOXEQLHSRZRG]HQLH :VWDUV]\FKVNU\SWDFKPRĝQDVSRWNDÊVLÚ]Xĝ\ciem metod .success().error() i .complete() ]DPLDVWZ\PLHQLRQ\FK,FKG]LDïDQLHMHVWWDNLH VDPRDOHQRZV]HPHWRG\VÈSUHIHURZDQÈRSFMÈ SRF]ÈZV]\RGM4XHU\ JSON I BŁĘDY 1. :RPDZLDQ\PSU]\NïDG]LH GDQH-621SU]HGVWDZLDMÈ NXUV\Z\PLDQ\ZDOXWZF]\WDQH QDVWURQLH]DSRPRFÈIXQNFML o nazwie loadRates() 2. :SLHUZV]\PZLHUV]XVNU\Stu na stronie zostaje umieszF]RQ\HOHPHQWSU]H]QDF]RQ\GR SU]HFKRZ\ZDQLDGDQ\FK 3. Funkcja loadRates() jest Z\ZRï\ZDQDZRVWDWQLP ZLHUV]XVNU\SWX JAVASCRIPT 4. :HZQÈWU]IXQNFML loadRates() metoda $.getJSON()SUöEXMHZF]\WDÊ SHZQHGDQH-6213R wymienionej metodzie mamy GRïÈF]RQHZ\ZRïDQLDMHV]F]H WU]HFKLQQ\FK1LHZV]\VWNLH ]QLFK]RVWDQÈZ\ZRïDQH 5. Metoda .done() jest wykoQDQDW\ONRZWHG\JG\SREUDQLH GDQ\FK]DNRñF]\VLÚVXNFHVHP =DZLHUDIXQNFMÚDQRQLPRZÈ Z\ĂZLHWODMÈFÈNXUV\Z\PLDQ\ LJRG]LQÚLFKZ\ĂZLHWOHQLD 6. Metoda .fail() jest wykoQ\ZDQDW\ONRZWHG\JG\VHUZHU QLHPRĝH]ZUöFLÊGDQ\FK-HM ]DGDQLHPMHVWZ\ĂZLHWOHQLH Xĝ\WNRZQLNRZLNRPXQLNDWX REïÚG]LH 7. Metoda .always()EÚG]LH Z\NRQDQDQLH]DOHĝQLHRG Z\QLNXĝÈGDQLD'RGDMH SU]\FLVNRGĂZLHĝHQLDRUD] SURFHGXUÚREVïXJL]GDU]Hñ SRQRZQLHZ\ZRïXMÈFÈIXQNFMÚ loadRates() c08/js/jq-getJSON.js 2 $(’#exchangerates’).append(’<div id=”rates”></div><div id=”reload”></div>’); 1 4 5 function loadRates() { $.getJSON(’data/rates.json’) .done( function(data){ 6HUZHU]ZUDFDGDQH var d = new Date(); // Utworzenie obiektu daty. var hrs = d.getHours(); 2NUHĂOHQLHJRG]LQ\ var mins = d.getMinutes(); 2NUHĂOHQLHPLQXW\ var msg = ’<h2>Kursy wymiany walut</h2>’; 3RF]ÈWHNNRPXQLNDWX $.each(data, function(key, val) { // Dodanie poszczególnych kursów wymiany. msg += ’<div class=”’ + key + ’”>’ + key + ’: ’ + val + ’</div>’; }); msg += ’<br>Ostatnia aktualizacja: ’ + hrs + ’:’ + mins + ’<br>’; :\ĂZLHWOHQLHXDNWXDOQLRQHMJRG]LQ\ $(’#rates’).html(msg); // Umieszczenie na stronie kursów wymiany. }).fail( function() { :\VWÈSLïEïÈG ĳDVLGHĳ DSSHQG ĳ3U]HSUDV]DP\QLHPRĝQDSREUDÊGDQ\FKĳ :\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH }).always( function() { 7DPHWRGD]DZV]HMHVWZ\ZRï\ZDQD var reload = ’<a id=”refresh” href=”#”>’; 'RGDQLHïÈF]DRGĂZLHĝDMÈFHJR]DZDUWRĂÊ reload += ’<img src=”img/refresh.png” alt=”refresh” /></a>’; $(’#reload’).html(reload); 'RGDQLHïÈF]DRGĂZLHĝDMÈFHJR]DZDUWRĂÊ $(’#refresh’).on(’click’, function(e) { 'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN e.preventDefault(); 8QLHPRĝOLZLHQLHSU]HMĂFLDQDQRZÈVWURQÚ loadRates(); :\ZRïDQLHIXQNFMLORDG5DWHV }); }); } 6 7 3 loadRates(); :\ZRïDQLHIXQNFMLORDG5DWHV AJAX I JSON 403 WIĘKSZA KONTROLA NAD ŻĄDANIAMI AJAX Metoda $.ajax()GDMHZLÚNV]ÈNRQWUROÚQDGĝÈGDQLDPL$MD[ :WOHMHVWRQDZ\NRU]\VW\ZDQDZM4XHU\SU]H]ZV]\VWNLH PHWRG\VNUöWXGRW\F]ÈFHĝÈGDñ$MD[ :ELEOLRWHFHM4XHU\PHWRGD$.ajax() jest wykoU]\VW\ZDQDSU]H]LQQHPHWRG\SRPRFQLF]H$MD[ NWöUH]RVWDï\GRWÈGRPöZLRQH SR]ZDODMÈRQHQD ]QDF]QLHSURVWV]HZ\NRQ\ZDQLHĝÈGDñ$MD[ Metoda $.ajax()RIHUXMHZLÚNV]ÈNRQWUROÚQDG FDï\PSURFHVHPXGRVWÚSQLDSRQDGUöĝQ\FK XVWDZLHñSR]ZDODMÈF\FKQDNRQWUROÚQDGĝÈGDQLHP$MD[:WDEHOLSRQLĝHMZ\PLHQLRQRZ\EUDQH XVWDZLHQLD8VWDZLHQLDWHVÈGRVWDUF]DQH]D SRPRFÈQRWDFMLOLWHUDïXRELHNWX EÚG]LHWRRELHNW XVWDZLHñ 3U]\NïDGSU]HGVWDZLRQ\QDVWURQLHSRSUDZHM Z\JOÈGDLG]LDïDSRGREQLHMDNSU]\NïDGGHPRQVWUXMÈF\G]LDïDQLHPHWRG\.load()ZSRGUR]G]LDOH ķ:F]\W\ZDQLH]DZDUWRĂFL+70/QDVWURQLH]Z\NRU]\VWDQLHPM4XHU\ĵ-HGQDNWXWDM]RVWDïDXĝ\WD metoda $.ajax() • 8VWDZLHQLDPRJÈSRMDZLDÊVLÚZGRZROQHM • • NROHMQRĂFLRLOHZ\NRU]\VWXMÈSUDZLGïRZÈ QRWDFMÚOLWHUDïX-DYD6FULSW 8VWDZLHQLDPRJÈSRELHUDÊIXQNFMÚNWöUD]NROHL PRĝHXĝ\ZDÊIXQNFMLQD]ZDQHMOXEDQRQLPRZHM Metoda $.ajax()QLHSR]ZDODQDZF]\W\ZDQLH W\ONRIUDJPHQWXVWURQ\'ODWHJRWHĝPHWRGD jQuery o nazwie ğQG MHVWXĝ\ZDQDGR Z\EUDQLDLQWHUHVXMÈFHM&LÚF]ÚĂFLVWURQ\ USTAWIENIE OPIS type 0RĝHSRELHUDÊZDUWRĂÊGETOXEPOSTZ]DOHĝQRĂFLRGPHWRG\]DSRPRFÈNWöUHMMHVWZ\NRQ\ZDQHĝÈGDQLH+773GETOXEPOST url 6WURQDGRNWöUHMNLHURZDQHMHVWĝÈGDQLH data 'DQHZ\V\ïDQHGRVHUZHUDZUD]]ĝÈGDQLHP success )XQNFMDXUXFKDPLDQDJG\Z\NRQDQLHĝÈGDQLD$MD[]DNRñF]\VLÚSRZRG]HQLHPXVWDZLHQLH podobne do metody .done() error )XQNFMDXUXFKDPLDQDJG\Z\NRQDQLHĝÈGDQLD$MD[]DNRñF]\VLÚQLHSRZRG]HQLHPXVWDZLHQLH podobne do metody .fail() beforeSend )XQNFMD DQRQLPRZDOXEQD]ZDQD XUXFKDPLDQDSU]H]Z\NRQDQLHPĝÈGDQLD$MD[:SU]\NïDG]LHSRND]DQ\PQDVWURQLHSRSUDZHMVïXĝ\GRZ\ĂZLHWOHQLDLNRQ\R]QDF]DMÈFHMZF]\W\ZDQLH GDQ\FK complete )XQNFMDZ\NRQ\ZDQDSR]DNRñF]HQLXĝÈGDQLDQLH]DOHĝQLHRGMHJRVWDQX VXNFHVOXE QLHSRZRG]HQLH :SU]\NïDG]LHSRND]DQ\PQDVWURQLHSRSUDZHMVïXĝ\GRXVXQLÚFLDLNRQ\ R]QDF]DMÈFHMZF]\W\ZDQLHGDQ\FK timeout 2NUHĂODOLF]EÚPLOLVHNXQGNWöUHPXV]ÈXSï\QÈÊ]DQLPZ\VWÈSL]GDU]HQLHR]QDF]DMÈFH QLHSRZRG]HQLH 404 AJAX I JSON KONTROLA TECHNOLOGII AJAX .LHG\Xĝ\WNRZQLNNOLNQLHïÈF]H ZHOHPHQFLH<nav>QDVWURQLH zostaje umieszczona nowa ]DZDUWRĂÊ-HVWWRUR]ZLÈ]DQLH EDUG]RSRGREQHGRSU]\NïDGX SRND]DQHJRZSRGUR]G]LDOH ķ:F]\W\ZDQLH]DZDUWRĂFL+70/ na stronie z wykorzystaniem M4XHU\ĵGRW\F]ÈFHJRPHWRG\ .load()DOHZ\PDJDïDRQD W\ONRMHGQHJRZLHUV]DNRGX 7XWDMPDP\VLHGHPXVWDZLHñ zastosowanych w metodzie $.ajax()3LHUZV]HWU]\WR ZïDĂFLZRĂFLQDWRPLDVWF]WHU\ ostatnie to funkcje anonimowe Z\ZRï\ZDQHQDUöĝQ\FK HWDSDFKĝÈGDQLD$MD[ 2. 3U]\NïDGWHQSRZRGXMH XVWDZLHQLHZïDĂFLZRĂFLtimeout QDND]XMÈFHMGZXVHNXQGRZH RF]HNLZDQLHQDRGSRZLHGě$MD[ 1. :W\PSU]\NïDG]LHSURFHGXUDREVïXJL]GDU]HñZ\ZRïXMH PHWRGÚ$.ajax() 3. Kod umieszcza na stronie WDNĝHHOHPHQW\SU]H]QDF]RQHGR Z\ĂZLHWOHQLDZF]\W\ZDQ\FKGDQ\FK0RĝHV]LFKQLH]REDF]\Ê MHĂOLĝÈGDQLH]RVWDQLHREVïXĝRQH V]\ENR-HGQDNQDSHZQRMH GRVWU]HĝHV]JG\VWURQDMHVW ZF]\W\ZDQDZROQR 4. -HĝHOLZ\NRQDQLHĝÈGDQLD $MD[]DNRñF]\VLÚQLHSRZRG]HQLHPWRXĝ\WNRZQLNRZL ]RVWDQLHZ\ĂZLHWORQ\NRPXQLNDW REïÚG]LH c08/js/jq-ajax.js JAVASCRIPT 1 $(’nav a’).on(’click’, function(e) { e.preventDefault(); var url = this.href; var $content = $(’#content’); $(’nav a.current’).removeClass(’current’); $(this).addClass(’current’); $(’#container’).remove(); 2 3 4 // Adres URL strony do wczytania. // Buforowanie wyboru. 8DNWXDOQLHQLHïÈF]\ 8VXQLÚFLH]DZDUWRĂFL $.ajax({ type: “POST”, :\EöUPHWRG\*(7OXE3267 url: url, ¥FLHĝNDGRVWÚSXGRSOLNX timeout: 2000, // Czas oczekiwania. beforeSend: function() { 3U]HGZ\NRQDQLHPĝÈGDQLD$MD[ $content.append(’<div id=”load”>Wczytywanie</div>’); // Wczytanie komunikatu. }, complete: function() { 3RZ\NRQDQLXĝÈGDQLD$MD[ $(’#loading’).remove(); 8VXQLÚFLHNRPXQLNDWX }, success: function(data) { :\ĂZLHWOHQLH]DZDUWRĂFL FRQWHQWKWPO GDWD ğQG ĳFRQWDLQHUĳ KLGH IDGH,Q }, fail: function() { :\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH ĳSDQHOĳ KWPO ĳGLYFODVV ĵORDGLQJĵ!3URV]ÚVSUöERZDÊZNUöWFHGLY!ĳ } }); }); AJAX I JSON 405 406 AJAX I JSON PRZYKŁAD AJAX I JSON :W\PSU]\NïDG]LHZ\ĂZLHWODQHVÈLQIRUPDFMHGRW\F]ÈFHWU]HFKZ\GDU]Hñ'DQHSRFKRG]È]WU]HFK UöĝQ\FKěUöGHï 3RGF]DVZF]\W\ZDQLDVWURQ\LQIRUPDFMHGRW\F]ÈFHPLHMVF Z\GDU]HñVÈXPLHV]F]DQHZNRG]LH+70/.LHG\Xĝ\WNRZQLNNOLNQLH ]GDU]HQLHZOHZHMNROXPQLHĂURGNRZDEÚG]LH]DZLHUDÊKDUPRQRJUDPZ\EUDQHJR]GDU]HQLD :OHZHMNROXPQLHïÈF]DPDMÈDWU\EXWidNWöUHJRZDUWRĂÊWRGZXOLWHURZ\LGHQW\ğNDWRUVWDQXZ86$ZNWöU\PEÚG]LHPLDïRPLHMVFH GDQHZ\GDU]HQLH <a id=”tx” href=”tx.html”>... Austin, TX</a> +DUPRQRJUDP\Z\GDU]HñVÈSU]HFKRZ\ZDQHZRELHNFLH-621 Z]HZQÚWU]Q\PSOLNXSREUDQ\PSRGF]DVZF]\W\ZDQLDPRGHOX'20 *G\Xĝ\WNRZQLNNOLNQLHZ\EUDQÈVHVMÚZĂURGNRZHMNROXPQLHMHM RSLVSRMDZLVLÚZNROXPQLHSUDZHM :ĂURGNRZHMNROXPQLHZ\ĂZLHWODMÈFHMKDUPRQRJUDP\Z\GDU]HñW\WXï NDĝGHMVHVMLMHVWZVWDZLDQ\ZHZQÈWU]ïÈF]DSRZRGXMÈFHJRZ\ĂZLHWOHQLHLQIRUPDFMLRGDQHMVHVML <a href=”descriptions.html#Circuit-Hacking”> Circuit Hacking</a> 2SLV\ZV]\VWNLFKVHVMLVÈSU]HFKRZ\ZDQHZSOLNX+70/ 3RV]F]HJöOQHRSLV\VHVMLVÈZ\ELHUDQH]DSRPRFÈPHWRG\M4XHU\ o nazwie .load()RUD]VHOHNWRUD#SU]HGVWDZLRQHJRZSRGUR]G]LDOH ķ:F]\W\ZDQLH]DZDUWRĂFL+70/QDVWURQLH]Z\NRU]\VWDQLHP M4XHU\ĵ :SUDZHMNROXPQLHRSLVVHVMLMHVWSRELHUDQ\]SOLNX+70/.DĝGD VHVMDMHVWSU]HFKRZ\ZDQDZHOHPHQFLHNWöUHJRDWU\EXWid zawiera W\WXïVHVML ZUD]]HVSDFMDPL]DVWÈSLRQ\PLïÈF]QLNDPL <div id=”Wprowadzenie-do-modelowania-3D”> <h3>:SURZDG]HQLHGRĂZLDWD'</h3> <p>3U]\MGěLSU]HNRQDMVLÚMDNWZRU]\ÊPRGHOH'</p> </div> 3RQLHZDĝïÈF]DVÈGRGDZDQHLXVXZDQHZSU]\NïDG]LHXĝ\WR GHOHJDFML]GDU]Hñ AJAX I JSON 407 PRZYKŁAD AJAX I JSON 7HQSU]\NïDGZ\NRU]\VWXMHGDQH]WU]HFKRGG]LHOQ\FKěUöGHï ZFHOX]DGHPRQVWURZDQLDWHFKQLN$MD[ :OHZHMNROXPQLH]QDMGXMÈVLÚ WU]\PLHMVFDZNWöU\FKRGE\ZDMÈVLÚSHZQHZ\GDU]HQLD /RNDOL]DFMHWHVÈ]GHğQLRZDQH ZNRG]LH+70/GODVWURQ\ ]DZLHUDMÈFHMKDUPRQRJUDP Z\GDU]Hñ.DĝGHZ\GDU]HQLH MHVWïÈF]HP 1. .OLNQLÚFLH]GDU]HQLDSRZRduje wczytanie harmonogramu VHVMLGODGDQHJR]GDU]HQLD ,QIRUPDFMHVÈSU]HFKRZ\ZDQH ZSOLNXRQD]ZLHexample.json który zostaje pobrany podczas ZF]\W\ZDQLDPRGHOX'20 1 408 AJAX I JSON 2. .OLNQLÚFLHVHVMLVSRZRGXMHZF]\WDQLHMHMRSLVX 2SLV\]QDMGXMÈVLÚZSOLNX descriptions.htmlNWöU\MHVW ZF]\W\ZDQ\SRNOLNQLÚFLXW\WXïX VHVML 2 PRZYKŁAD AJAX I JSON HTML c08/example.html <body> <header> <h1>THE MAKER BUS</h1> <nav> <a href=”jq-load.html”>67521$*:1$</a> <a href=”jq-load2.html”>TRASA</a> <a href=”jq-load3.html”>*$'¿(7<</a> <a href=”example.html” class=”current”>HARMONOGRAM</a> </nav> </header> <section id=”content”> <div id=”container”> <div class=”third”> <div id=”event”> <a id=”ca” href=”ca.html”> <img src=”img/map-ca.png” alt=”SF, CA” />San Francisco, CA</a> <a id=”tx” href=”tx.html”> <img src=”img/map-tx.png” alt=”Austin, TX” />Austin, TX</a> <a id=”ny” href=”ny.html”> <img src=”img/map-ny.png” alt=”New York, NY” />Nowy Jork, NY</a> </div> </div> <div class=”third”> <div id=”sessions”>Wybierz wydarzenie w lewej kolumnie</div> </div> <div class=”third”> <div id=”details>,QIRUPDFMHV]F]HJöïRZH</div> </div> </div> </section> <script src=”js/jquery-1.11.0.min.js”></script> <script src=”js/example.js”></script> </body> :SRZ\ĝV]\POLVWLQJX]QDMGXMHVLÚNRG+70/ VWURQ\1DVWURQLHPDP\QDJïöZHNRUD]WU]\ NROXPQ\:F]\WDQLHGZöFKVNU\SWöZRGE\ZDVLÚ SU]HG]QDF]QLNLHP]DP\NDMÈF\P</body> /HZDNROXPQDOLVWDZ\GDU]Hñ ¥URGNRZDNROXPQD harmonogram sesji danego Z\GDU]HQLD 3UDZDNROXPQDRSLV\SRV]F]HJöOQ\FKVHVML AJAX I JSON 409 PRZYKŁAD AJAX I JSON c08/data/example.json JAVASCRIPT { “CA”: [ { “time”: “09.00”, ĴWLWOHĵĴ:SURZDG]HQLHGRĂZLDWD'ĵ }, { “time”: “10.00”, “title”: “Circuit Hacking” }, { “time”: “11.30”, “title”: “Zabawy z Arduino” }... c08/descriptions.html HTML <div id=”Wprowadzenie-do-modelowania-3D”> <h3>:SURZDG]HQLHGRĂZLDWD'</h3> <p>3U]\MGěLSU]HNRQDMVLÚMDNWZRU]\ÊPRGHOH'NWöUHQDVWÚSQLH</p> </div> <div id=”Circuit-Hacking”> <h3>Circuit Hacking</h3> <p>:(OHFWUR7HQWEÚG]LHV]PöJï]REDF]\ÊMDN</p> </div> <div id=”Zabawy-z-Arduino”> <h3>Zabawy z Arduino</h3> <p>3U]HNRQDMVLÚMDNSURJUDPRZDÊLXĝ\ZDÊ$UGXLQR7RMHVWïDWZ\</p> </div> .LHG\VNU\SW]RVWDMHXUXFKRPLRQ\IXQNFMD loadTimetable()ZF]\WXMH]SOLNX-621RQD]ZLH example.json harmonogramy wszystkich trzech Z\GDU]Hñ'DQHVÈEXIRURZDQHZ]PLHQQHM times 410 AJAX I JSON =GDU]HQLDVÈLGHQW\ğNRZDQHSU]H]GZXOLWHURZ\ NRGVWDQXZ86$3RZ\ĝHMSU]HGVWDZLRQR SU]\NïDGRZHGDQHVIRUPDWRZDQHMDNR-621 RUD]SU]\NïDGRZ\NRG+70/Z\JHQHURZDQ\ QDSRGVWDZLHZ\PLHQLRQ\FKGDQ\FK PRZYKŁAD AJAX I JSON c08/js/example.js JAVASCRIPT 1 2 3 4 5 6 7 $(function() { .LHG\PRGHO'20EÚG]LHJRWRZ\ var times; // Deklaracja zmiennej globalnej. $.ajax({ .RQğJXUDFMDĝÈGDQLD beforeSend: function(xhr){ 3U]HGZ\NRQDQLHPĝÈGDQLD if (xhr.overrideMimeType) { -HĝHOLSU]HJOÈGDUNDREVïXJXMHWÚPHWRGÚ xhr.overrideMimeType(“application/json”); XVWDZW\S0,0(DE\XQLNQÈÊEïÚGöZ } } }); )XQNFMDSRELHUDMÈFDGDQH]SOLNX-621 function loadTimetable() { // Deklaracja funkcja $.getJSON(’data/example.json’) 3UöED]HEUDQLDGDQ\FK-621 .done( function(data){ -HĝHOL]DNRñF]\VLÚSRZRG]HQLHP times = data; WRGDQHEÚGÈSU]HFKRZ\ZDQHZ]PLHQQHM }).fail( function() { :SU]\SDGNXSUREOHPXQDOHĝ\Z\ĂZLHWOLÊNRPXQLNDW ĳHYHQWĳ KWPO ĳ3U]HSUDV]DP\1LHXGDïRVLÚZF]\WDÊKDUPRQRJUDPXĳ }); } loadTimetable(); :\ZRïDQLHIXQNFML 1. 6NU\SWZ\NRQXMÈF\FDïÈSUDFÚPDQD]ZÚ example.js i jest uruchamiany po wczytaniu PRGHOX'20 4. 1DVWÚSQLHPDP\IXQNFMÚRQD]ZLH loadTimetable()SU]H]QDF]RQÈGRZF]\WDQLD GDQ\FKKDUPRQRJUDPöZ]SOLNXexample.json 2. Zmienna timesEÚG]LHXĝ\WDGRSU]HFKRZ\ZDQLDKDUPRQRJUDPXVHVMLZV]\VWNLFK]GDU]Hñ 5. -HĝHOLZF]\WDQLHGDQ\FK]DNRñF]\VLÚSRZRG]HQLHPWRGDQHKDUPRQRJUDPöZEÚGÈSU]HFKRZ\wane w zmiennej times 3. =DQLPSU]HJOÈGDUND]DĝÈGDGDQ\FK-621 VNU\SWVSUDZG]DF]\REVïXJXMHRQDPHWRGÚ overrideMimeType()0HWRGDWDMHVWVWRVRZDQD ZFHOXRNUHĂOHQLDF]\RGSRZLHGěRWU]\PDQD]VHUZHUDSRZLQQDE\ÊWUDNWRZDQDMDNRGDQH-621 0RĝQDMÈZ\NRU]\VWDÊJG\VHUZHUSU]\SDGNRZR ZVNDĝHĝH]ZUDFDQHGDQHVÈZLQQ\PIRUPDFLH 6. -HĝHOLZF]\WDQLHGDQ\FK]DNRñF]\VLÚQLHSRZRG]HQLHPWRXĝ\WNRZQLNRZLEÚG]LHZ\ĂZLHWORQ\ NRPXQLNDWREïÚG]LH 7. Funkcja loadTimetable()MHVWZ\ZRï\ZDQD ZFHOXZF]\WDQLDGDQ\FK AJAX I JSON 411 PRZYKŁAD AJAX I JSON 1. Metoda pomocnicza jQuery F]HNDDĝXĝ\WNRZQLNNOLNQLH QD]ZÚZ\GDU]HQLD:ĂURGNRZHMNROXPQLHZF]\WDQ\EÚG]LH KDUPRQRJUDPVHVMLZ\EUDQHJR Z\GDU]HQLD 2. Metoda preventDefault() XQLHPRĝOLZLDSU]HMĂFLHQDQRZÈ VWURQÚ SRQLHZDĝZ\ĂZLHWORQH ]RVWDQÈGDQHSREUDQH]D SRPRFÈWHFKQRORJLL$MD[ 3. 8WZRU]RQD]RVWDMH]PLHQQD RQD]ZLHloc, przeznaczona GRSU]HFKRZ\ZDQLDPLHMVFD ZNWöU\PRGE\ZDVLÚGDQH Z\GDU]HQLH-HMZDUWRĂÊ MHVWSRELHUDQD]DWU\EXWXid NOLNQLÚWHJRïÈF]D 4. .RG+70/GODKDUPRQRJUDPXVHVMLEÚG]LHSU]HFKRZ\ZDQ\Z]PLHQQHMRQD]ZLH newContent3RF]ÈWNRZR ZDUWRĂFLÈ]PLHQQHMMHVWSXVW\ FLÈJWHNVWRZ\ 5. ,QIRUPDFMHRSRV]F]HJöOQ\FK VHVMDFKVÈSU]HFKRZ\ZDQH ZHOHPHQWDFK<li>1DSRF]ÈWNX NDĝGHJRHOHPHQWX]QDMGXMHVLÚ JRG]LQDUR]SRF]ÚFLDGDQHMVHVML 6. Do harmonogramu zostaje GRGDQHïÈF]HXĝ\ZDQHZFHOX Z\ĂZLHWOHQLDRSLVXÈF]H SURZDG]LGRSOLNXdescriptions. html3RQLHZDĝïÈF]HMHVW poprzedzone znakiem #, ZVND]XMHRQRRGSRZLHGQL IUDJPHQWVWURQ\ 7. 7\WXïVHVMLMHVWXPLHV]czany po znaku #0HWRGD .replace()]DVWÚSXMH VSDFMHZW\WXOHïÈF]QLNDPL 412 AJAX I JSON c08/data/example.json 1 2 3 4 5 6 7 8 9 10 11 JAVASCRIPT .OLNQLÚFLHZ\GDU]HQLDSRZRGXMHZF]\WDQLH KDUPRQRJUDPX $(’#content’).on(’click’, ’#event a’, function(e) { 8ĝ\WNRZQLNNOLNDZ\EUDQÈORNDOL]DFMÚ e.preventDefault(); 8QLHPRĝOLZLHQLHZF]\WDQLDVWURQ\ var loc = this.id.toUpperCase(); 3REUDQLHZDUWRĂFLDWU\EXWXLG var newContent = ’’; :FHOXXWZRU]HQLDKDUPRQRJUDPX for (var i = 0; i < times[loc].length; i++) { SU]HSURZDG]DP\LWHUDFMHSU]H]VHVMH newContent += ’<li><span class=”time”>’ + times[loc][i].time + ’</span>’; newContent += ’<a href=”descriptions.html#’; newContent += times[loc][i].title.replace (/ /g, ’-’) + ’”>’; newContent += times[loc][i].title + ’</a></li>’; } $(’#sessions’).html(’<ul>’ + newContent + ’</ul>’); :\ĂZLHWOHQLHJRG]LQ\ $(’#event a.current’).removeClass(’current’); 8DNWXDOQLHQLHZ\EUDQHJRïÈF]D $(this).addClass(’current’); $(’#details’).text(’’); 8VXQLÚFLH]DZDUWRĂFLWU]HFLHMNROXPQ\ }); DE\GRSDVRZDÊZDUWRĂÊDWU\EXtu idZSOLNXdescriptions.html GRSRV]F]HJöOQ\FKVHVML 10. $WU\EXW\classZïÈF]DFK Z\GDU]HñVÈXDNWXDOQLDQHDE\ ZVND]DÊELHĝÈFHZ\GDU]HQLH 8. :HZQÈWU]ïÈF]DPRĝQD GRVWU]HFW\WXïVHVML 11. -HĝHOLWU]HFLDNROXPQD ]DZLHUDïDMDNLHNROZLHNGDQH WR]RVWDMÈRQHXVXQLÚWH 9. 1RZD]DZDUWRĂÊMHVWXPLHV]F]DQDZĂURGNRZHMNROXPQLH PRZYKŁAD AJAX I JSON JAVASCRIPT 1 2 3 4 5 6 c08/js/example.js .OLNQLÚFLHVHVMLSRZRGXMHZF]\WDQLHMHMRSLVX $(’#content’).on(’click’, ’#sessions li a’, function(e) { .OLNQLÚFLHVHVML e.preventDefault(); 1LHPDSU]HMĂFLDQDQRZÈVWURQÚ var fragment = this.href; 7\WXï]QDMGXMHVLÚZDWU\EXFLHKUHI fragment = fragment.replace(’#’, ’ #’); // Dodanie spacji po znaku #. $(’#details’).load(fragment); // Wczytanie opisu. $(’#sessions a.current’).removeClass(’current’); // Uaktualnienie elementu. $(this).addClass(’current’); }); .OLNQLÚFLHQDZLJDFML $(’nav a’).on(’click’, function(e) { .OLNQLÚFLHZHOHPHQFLHQDY! e.preventDefault(); 1LHPDSU]HMĂFLDQDQRZÈVWURQÚ var url = this.href; // Pobranie adresu URL do wczytania. 7 $(’nav a.current’).removeClass(’current’); // Uaktualnienie klas w nawigacji. $(this).addClass(’current’); $(’#container’).remove(); 8VXQLÚFLHVWDUHJRHOHPHQWX $(’#content’).load(url + ’ #container’).hide(). fadeIn(’slow’); // Dodanie nowego elementu. }); }); 1. Inna metoda pomocnicza M4XHU\]RVWDMHVNRQğJXURZDQD ZFHOXUHDNFMLJG\Xĝ\WNRZQLN NOLNQLHVHVMÚZĂURGNRZHM NROXPQLH=DGDQLHPPHWRG\ MHVWZF]\WDQLHRSLVXVHVML 2. Metoda preventDefault() XQLHPRĝOLZLDSU]HMĂFLHQDQRZÈ VWURQÚ 3. Utworzona zostaje zmienna o nazwie fragment przeznaczoQDGRSU]HFKRZ\ZDQLDïÈF]D SURZDG]ÈFHJRGRVHVML:DUWRĂÊ tej zmiennej zostaje pobrana z atrybutu hrefNOLNQLÚWHJR ïÈF]D 4. Po znaku # umieszczona ]RVWDMHVSDFMDDE\W\PVDP\P SU]\JRWRZDÊRGSRZLHGQLIRUPDW GODPHWRG\M4XHU\.load() RGSRZLHG]LDOQHM]DSREUDQLH IUDJPHQWX QLHFDïRĂFL VWURQ\ +70/QDSU]\NïDGdescription. html #Zabawy-z-Arduino 5. 6HOHNWRUM4XHU\MHVWXĝ\ZDQ\ GR]QDOH]LHQLDZWU]HFLHM NROXPQLHHOHPHQWXNWöUHJR atrybut idPDZDUWRĂÊdetails 1DVWÚSQLHPHWRGD.load() ZF]\WXMHRSLVVHVMLZ]QDOH]LRQ\PHOHPHQFLH 6. ÈF]D]RVWDMÈXDNWXDOQLRQH DE\SRGĂZLHWOLÊRGSRZLHGQLÈ VHVMÚZĂURGNRZHMNROXPQLH 7. *ïöZQDQDZLJDFMDQDVWURQLH ]RVWDMHXVWDZLRQDMDNSRND]DQRZF]HĂQLHM SDWU]SRGUR]G]LDï ķ:F]\W\ZDQLH]DZDUWRĂFLĵ AJAX I JSON 413 PODSUMOWANIE f $MD[R]QDF]DJUXSÚWHFKQRORJLLSR]ZDODMÈF\FKQDXDNWXDOQLHQLH W\ONRMHGQHJRIUDJPHQWXVWURQ\]DPLDVWMHMFDïHM f 1DVWURQLHLQWHUQHWRZHMPRĝQDZ\NRU]\VWDÊGDQHZIRUPDWDFK +70/;0/L-621 )RUPDW-621]GRE\ZDFRUD]ZLÚNV]È SRSXODUQRĂÊ f $E\ZF]\WDÊGDQH-621]LQQHMGRPHQ\PRĝQDXĝ\Ê-6213 DOHW\ONRZWHG\JG\NRGSRFKRG]L]]DXIDQHJRěUöGïD f %LEOLRWHNDM4XHU\RIHUXMHPHWRG\XïDWZLDMÈFHZ\NRU]\VWDQLH WHFKQRORJLL$MD[ f 8ĝ\FLHPHWRG\.load() to najprostszy sposób umieszczenia ]DZDUWRĂFL+70/QDVWURQLHSR]ZDODQDXDNWXDOQLHQLHW\ONR IUDJPHQWXVWURQ\ f Metoda .ajax()RIHUXMH]QDF]QLHZLÚNV]HPRĝOLZRĂFLFKRÊ MHVWSU]\W\P]QDF]QLHEDUG]LHMVNRPSOLNRZDQD 'RVWÚSQ\FK MHVWWDNĝHNLONDPHWRGVNUöWöZ f 7U]HEDNRQLHF]QLHUR]ZDĝ\ÊMDNEÚG]LHG]LDïDïDZLWU\QDMHĂOL Xĝ\WNRZQLNPDZ\ïÈF]RQÈREVïXJÚ-DYD6FULSWOXEMHĝHOLVWURQD QLHPDGRVWÚSXGRGDQ\FK]VHUZHUD 414 AJAX I JSON 9 API ,QWHUIHMVXĝ\WNRZQLNDSR]ZDODQDLQWHUDNFMÚF]ïRZLHND ]SURJUDPHP1DWRPLDVWLQWHUIHMVSURJUDPRZDQLDDSOLNDFML DQJApplication Programming InterfaceĽ$3, XPRĝOLZLD Z]DMHPQÈNRPXQLNDFMÚSURJUDPRPQDSU]\NïDGVNU\SWRP 3U]HJOÈGDUNLLQWHUQHWRZHVNU\SW\ZLWU\Q\LQWHUQHWRZHRUD]LQQHDSOLNDFMHEDUG]RF]ÚVWR XGRVWÚSQLDMÈVZRMÈIXQNFMRQDOQRĂÊDE\SURJUDPLĂFLPRJOL]QLHMNRU]\VWDÊ1DSU]\NïDG PRZEGLĄDARKI INTERNETOWE 0RGHO'20WR$3,3R]ZDOD VNU\SWRPQDX]\VNDQLH GRVWÚSXLXDNWXDOQLDQLH ]DZDUWRĂFLVWURQ\LQWHUQHWRZHMSRMHMZF]\WDQLX ZSU]HJOÈGDUFH:W\P UR]G]LDOHSR]QDV]SHZQH $3,-DYD6FULSWZ+70/ ]DSHZQLDMÈFHGRVWÚSGR LQQ\FKIXQNFMLSU]HJOÈGDUNL SKRYPTY PLATFORMY %LEOLRWHNDM4XHU\WRSOLN -DYD6FULSWZUD]]$3, 3R]ZDODQDZ\EöUHOHPHQWöZDQDVWÚSQLHXĝ\FLH PHWRGM4XHU\GRSUDF\ ]Z\EUDQ\PLHOHPHQWDPL M4XHU\WRSRSURVWXMHGHQ]H VNU\SWöZRIHUXMÈF\EDUG]R GXĝHPRĝOLZRĂFL :LWU\Q\LQWHUQHWRZHWDNLHMDN )DFHERRN*RRJOHL7ZLWWHU RWZLHUDMÈSODWIRUP\DE\W\P VDP\PXPRĝOLZLÊGRVWÚS LXDNWXDOQLDQLHSU]HFKRZ\ZDQ\FKWDPGDQ\FK ]DSRPRFÈZLWU\QLQWHUQHWRZ\FKLDSOLNDFML :W\P UR]G]LDOH]REDF]\V]MDN *RRJOHSR]ZDODQDGRGDQLH PDS\QD7ZRMHMVWURQLH 1LHPXVLV]ZLHG]LHÊjakLQQ\VNU\SWOXESURJUDPZ\NRQXMHGDQH]DGDQLH3RZLQLHQHĂZLHG]LHÊ FRURELMDN]OHFLÊPXZ\NRQDQLH]DGDQLDDWDNĝHMDNSU]HWZRU]\ÊGDQHRWU]\PDQHZRGSRZLHG]L'ODWHJRWHĝZW\PUR]G]LDOHSR]QDV]IRUPÚZMDNLHMSU]HGVWDZLDQHMHVW$3, 416 API API 417 BEZPROBLEMOWA WSPÓŁPRACA Z INNYMI 1LH]DZV]HPXVLV]ZLHG]LHÊjakG]LDïDVNU\SWOXESURJUDP RLOHZLHV]ZMDNLVSRVöE]OHFLÊPXZ\NRQDQLH]DGDQLD DWDNĝHSRWUDğV]SU]HWZRU]\ÊRWU]\PDQÈRGSRZLHGě 3\WDQLDNWöUHPRĝQD]DGDZDÊLIRUPDWRGSRZLHG]LWZRU]È$3, JAKIE MOŻLIWOŚCI OFERUJE API? W JAKI SPOSÓB UZYSKAĆ DO NIEGO DOSTĘP? -HĝHOLVNU\SWOXESURJUDP RIHUXMHSRWU]HEQÈ&LIXQNFMRQDOQRĂÊWRUR]ZDĝMHJRXĝ\FLH ]DPLDVWVDPRG]LHOQLHWZRU]\ÊWÚ IXQNFMRQDOQRĂÊRGSRGVWDZ 1DVWÚSQLHPXVLV]XVWDOLÊ ZMDNLVSRVöEX]\VNDÊGRVWÚS GRIXQNFMRQDOQRĂFL$3,]DQLP EÚG]LHV]PöJïJRXĝ\ZDÊ 3RQLHZDĝNDĝG\VNU\SW SURJUDPOXESODWIRUPDFKDUDNWHU\]XMÈVLÚUöĝQ\PLIXQNFMDPL SLHUZV]\P]DGDQLHPMHVW XVWDOHQLHQDFRSR]ZDOD$3, 1DSU]\NïDG • $3,PRGHOX'20LELEOLRWHNL • M4XHU\SR]ZDODQDX]\VNDQLH GRVWÚSXGRVWURQ\LQWHUQHWRZHMZF]\WDQHMZSU]HJOÈGDUFHLMHMXDNWXDOQLDQLHRUD] UHDJRZDQLHQD]DFKRG]ÈFH QDQLHM]GDU]HQLD $3,XGRVWÚSQLRQHSU]H] VHUZLV\)DFHERRN*RRJOH L7ZLWWHUSR]ZDODQDX]\VNDQLHGRVWÚSXLXDNWXDOQLDQLH SURğOLDWDNĝHWZRU]HQLH XDNWXDOQLHñVWDQXQDLFK SODWIRUPDFK .LHG\]QDV]PRĝOLZRĂFL RIHURZDQHSU]H]$3,PRĝHV] RNUHĂOLÊF]\WRRGSRZLHGQLH QDU]ÚG]LHGRZ\NRQDQLD7ZRMHM SUDF\ 418 API )XQNFMRQDOQRĂÊPRGHOX'20 MHVWZEXGRZDQDZLQWHUSUHWHU]H -DYD6FULSW]QDMGXMÈF\PVLÚ ZSU]HJOÈGDUFHLQWHUQHWRZHM :SU]\SDGNXM4XHU\SOLNELEOLRWHNLWU]HEDGRïÈF]\ÊQDVWURQLH SRELHUDMÈFJR]ZïDVQHJR VHUZHUDOXE]&'1 )DFHERRN*RRJOH7ZLWWHU RUD]LQQHZLWU\Q\RIHUXMÈUöĝQH VSRVRE\X]\VNDQLDGRVWÚSXGR IXQNFMRQDOQRĂFLSODWIRUP\]D SRPRFÈ$3, SKŁADNIA 0XVLV]VLÚWDNĝHQDXF]\ÊMDN QDND]DÊ$3,Z\NRQ\ZDQLH SHZQ\FK]DGDñRUD]SR]QDÊ IRUPDWZNWöU\PPRĝHV] VSRG]LHZDÊVLÚX]\VNDQLD RGSRZLHG]L -HĝHOLZLHV]MDNWZRU]\Ê RELHNWZ\ZRï\ZDÊMHJRPHWRG\ LX]\VNLZDÊGRVWÚSGRMHJR ZïDĂFLZRĂFLWRQLHSRZLQLHQHĂ PLHÊSUREOHPX]Xĝ\FLHP GRZROQHJR$3,-DYD6FULSW :W\PUR]G]LDOHSR]QDV]UöĝQH $3,FRSR]ZROL&LQDQDEUDQLH SHZQRĂFLVLHELHLSU]HNRQD&LÚ GRQDXNLNROHMQ\FK$3, API JAVASCRIPT W HTML5 3U]HGHZV]\VWNLPSR]QDP\SHZQHQRZH$3,Z+70/ :UD]]NRGHP]QDF]QLNöZZVSHF\ğNDFML+70/]HVWDZ$3,GHğQLXMH VSRVöEZMDNLPRĝQDNRU]\VWDÊ]IXQNFMLRIHURZDQ\FKSU]H]SU]HJOÈGDUNL DLACZEGO HTML5 MA API? 7HFKQRORJLDHZROXXMHLWRVDPR GRW\F]\SU]HJOÈGDQLDZLWU\Q LQWHUQHWRZ\FK1DSU]\NïDG VPDUWIRQ\PDMÈPQLHMV]HHNUDQ\ LPQLHMV]ÈPRFREOLF]HQLRZÈ QLĝWUDG\F\MQHNRPSXWHU\DOH ]DZLHUDMÈIXQNFMHU]DGNRVSRW\NDQHZNRPSXWHUDFKWDNLHMDN SU]\VSLHV]HQLRPLHU]L*36 :VSHF\ğNDFML+70/GRGDQR QLHW\ONRQRZH]QDF]QLNLDOH UöZQLHĝQRZ\]HVWDZ$3,-DYD6FULSWVWDQGDU\]XMÈF\VSRVöE Xĝ\FLDZVSRPQLDQ\FKQRZ\FK IXQNFMLZGRZROQ\PLPSOHPHQWXMÈF\PMHXU]ÈG]HQLX CZEGO DOTYCZY TO API? CZEGO SIĘ NAUCZYSZ? :SRV]F]HJöOQ\FK$3,+70/ QDFLVNSRïRĝRQRSU]\QDMPQLHM QDMHGHQRELHNWLPSOHPHQWRZDQ\SU]H]SU]HJOÈGDUNL LQWHUQHWRZHZFHOXGRVWDUF]HQLD RNUHĂORQHMIXQNFMRQDOQRĂFL 1LHPDP\WXWDMPLHMVFD QDGRNïDGQHRPDZLDQLH SRV]F]HJöOQ\FK$3,Z+70/ ]QDMG]LHV]VSRURNVLÈĝHN ZFDïRĂFLSRĂZLÚFRQ\FKQRZ\P IXQNFMRPZSURZDG]RQ\P Z+70/ :UR]G]LDOH SR]QDV]WU]\]GRVWÚSQ\FK$3, LSU]HDQDOL]XMHV]SU]\NïDG\ SUDF\]QLPL 1DSU]\NïDG$3,JHRORNDFML RSLVXMHRELHNWgeolocation SR]ZDODMÈF\]DS\WDÊXĝ\WNRZQLNDRMHJRSRïRĝHQLHRUD]GZD RELHNW\REVïXJXMÈFHX]\VNDQÈ RGSRZLHGě 0DP\UöZQLHĝ$3,RIHUXMÈFH XVSUDZQLHQLDZLVWQLHMÈFHM IXQNFMRQDOQRĂFL1DSU]\NïDG $3,:HE6WRUDJHSR]ZDODQD SU]HFKRZ\ZDQLHLQIRUPDFML ZSU]HJOÈGDUFHEH]NRQLHF]QRĂFLRSLHUDQLDVLÚSU]\W\PQD SOLNDFKFRRNLHV ']LÚNLWHPX]REDF]\V]MDN PRĝQDSUDFRZDÊ]$3,+70/ LMDNGRZLHG]LHÊVLÚZLÚFHM QDWHPDW$3,MHĝHOL]DMG]LH SRWU]HED3RQDGWRQDXF]\V]VLÚ MDNVSUDZG]LÊF]\SU]HJOÈGDUND REVïXJXMHRNUHĂORQÈIXQNFMRQDOQRĂÊRIHURZDQÈSU]H]GRVWÚSQH $3, API OPIS 32'52='=,$ geolocation 3R]ZDODQDRNUHĂOHQLHPLHMVFDJHRJUDğF]QHJR ZNWöU\PSU]HE\ZDXĝ\WNRZQLN SRGUR]G]LDïķ$3,JHRORNDOL]DFMLĵ localStorage 3R]ZDODQDSU]HFKRZ\ZDQLHLQIRUPDFMLZSU]HJOÈGDUFH QDZHWNLHG\Xĝ\WNRZQLN]DPNQLHNDUWÚOXERNQR SRGUR]G]LDïķ$3,:HE6WRUDJH ĽSU]HFKRZ\ZDQLHGDQ\FK ZSU]HJOÈGDUNDFKLQWHUQHWRZ\FKĵ sessionStorage 3R]ZDODQDSU]HFKRZ\ZDQLHLQIRUPDFMLZSU]HJOÈGDUFH JG\NDUWDOXERNQRSR]RVWDMÈRWZDUWH history 3R]ZDODQDX]\VNDQLHGRVWÚSXGRHOHPHQWöZ ]QDMGXMÈF\FKVLÚZKLVWRULLSU]HJOÈGDUNL SRGUR]G]LDïķ$3,+LVWRU\ L3XVKVWDWHĵ API 419 WYKRYWANIE FUNKCJI .LHG\WZRU]\V]NRGZ\NRU]\VWXMÈF\$3,+70/ OXENRGMDNLHMNROZLHN QRZHMIXQNFMLZSU]HJOÈGDUFHLQWHUQHWRZHM PRĝHZ\VWÈSLÊNRQLHF]QRĂÊ VSUDZG]HQLDF]\SU]HJOÈGDUNDXĝ\WNRZQLNDREVïXJXMHWÚIXQNFMÚ ]DQLPNRGEÚG]LHSUöERZDïMHMXĝ\Ê $3,+70/RSLVXMHRELHNW\Xĝ\ZDQHSU]H] SU]HJOÈGDUNLLQWHUQHWRZHGRLPSOHPHQWDFMLQRZHM IXQNFMRQDOQRĂFL1DSU]\NïDGPDP\RELHNW RQD]ZLHgeolocationVWRVRZDQ\GRXVWDOHQLD SRïRĝHQLDJHRJUDğF]QHJRXĝ\WNRZQLND-HGQDN RELHNWWHQMHVWREVïXJLZDQ\W\ONRZQRZRF]HVQ\FK SU]HJOÈGDUNDFK'ODWHJRWHĝSU]HGSUöEÈZ\NRU]\VWDQLDZ\PLHQLRQHJRRELHNWXQDOHĝ\VSUDZG]LÊ F]\SU]HJOÈGDUNDJRREVïXJXMH N Czy obiekt navigator.geolocation jest obsługiwany? Wykonanie poleceń nieużywających geolokalizacji. T Wykonanie poleceń używających geolokalizacji. =DSHZQHQLHEÚG]LHV]]DVNRF]RQ\Vï\V]ÈF RLVWQLHQLXPLÚG]\SRV]F]HJöOQ\PLSU]HJOÈGDUNDPL LQWHUQHWRZ\PLUöĝQLFGRW\F]ÈF\FKZ\NU\ZDQLD IXQNFML 1DSU]\NïDGZSU]HJOÈGDUFH,(LVWQLHMHSHZLHQ EïÈG]ZLÈ]DQ\]HVSUDZG]DQLHPREVïXJLRELHNWX geolcation'ODWHJRWHĝZ\NRQDQLHSU]HGVWDZLRQHJRSRZ\ĝHMNRGXPRĝHGRSURZDG]LÊGR Z\FLHNXSDPLÚFLZWUDNFLHZVSRPQLDQHMRSHUDFML 6NXWNLHPPRĝHE\ÊZROQLHMV]HZF]\W\ZDQLHVWURQ LQWHUQHWRZ\FK 420 API 6SUDZG]HQLHF]\SU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMHXĝ\FLHGDQHJRRELHNWXPRĝQDSU]HSURZDG]LÊ ]DSRPRFÈNRQVWUXNFMLZDUXQNRZHM -HĝHOLSU]HJOÈGDUNDREVïXJXMHGDQ\RELHNWZDUWRĂFLÈ]ZURWQÈEÚG]LHtruthyLQDVWÈSLZ\NRQDQLH SLHUZV]HJR]HVWDZXSROHFHñ1DWRPLDVWMHĂOL RELHNWQLH]RVWDï]DLPSOHPHQWRZDQ\Z\NRQDQ\ EÚG]LHGUXJL]HVWDZSROHFHñ if (navigator.geolocation) { :DUWRĂÊ]ZURWQDWUXWK\DZLÚFRELHNW MHVWREVïXJLZDQ\ 1DVWÈSLZ\NRQDQLHSROHFHñZW\PEORNX NRGX } else { )XQNFMDMHVWQLHREVïXJLZDQDOXE Z\ïÈF]RQD (ZHQWXDOQLHXĝ\WNRZQLNRGU]XFLï ĝÈGDQLH } 1DV]F]ÚĂFLHLVWQLHMHELEOLRWHNDRQD]ZLH0RGHUQL]UNWöUD]DMPXMHVLÚQLZHORZDQLHPUöĝQLF Z\VWÚSXMÈF\FKPLÚG]\SU]HJOÈGDUNDPL SRGREQLH MDNM4XHU\SRGF]DVZ\NU\ZDQLDREVïXJLZDQ\FK IXQNFML 8ĝ\FLH0RGHUQL]UWR]QDF]QLHOHSV]\VSRVöEQDVSUDZG]HQLHF]\SU]HJOÈGDUNDREVïXJXMH QRZHIXQNFMH6NU\SW0RGHUQL]UMHVWUHJXODUQLH XDNWXDOQLDQ\LGRSUDFRZ\ZDQ\DE\REVïXJLZDÊ NROHMQH]QDOH]LRQHQLH]JRGQRĂFL']LÚNLWHPX LVWQLHMHPQLHMV]HQLHEH]SLHF]HñVWZRĝHQLH]JRGQRĂFLWHXWUXGQLÈG]LDïDQLH7ZRMHJRNRGX MODERNIZR 0RGHUQL]UWRVNU\SWNWöU\PRĝQDVWRVRZDÊQDVWURQDFKLQWHUQHWRZ\FKZFHOX XVWDOHQLDF]\SU]HJOÈGDUNDREVïXJXMHIXQNFMH+70/&66L-DYD6FULSW 6NU\SWWHQZ\NRU]\VWDP\ZNUöWFHZSU]\NïDGDFKGRW\F]ÈF\FK$3,+70/ JAK POBRAĆ MODERNIZR? JAK DZIAŁA MODERNIZR? 3U]HGHZV]\VWNLPQDOHĝ\SREUDÊSOLNVNU\SWX ]ZLWU\Q\LQWHUQHWRZHMhttp://modernizr.com/ ZNWöUHM]QDMG]LHV] 'RïÈF]RQ\GRVWURQ\VNU\SW0RGHUQL]UGRGDMH RELHNWRQD]ZLHModernizrNWöU\VSUDZG]D F]\SU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMHIXQNFMÚ ZVND]DQÈGRSU]HWHVWRZDQLD.DĝGDIXQNFMDSU]H]QDF]RQDGRVSUDZG]HQLDVWDMHVLÚZïDĂFLZRĂFLÈ RELHNWXModernizr,FKZDUWRĂFLDPLVÈZDUWRĂFL ERRORZVNLH trueOXEfalse NWöUHLQIRUPXMÈF]\ GDQDIXQNFMDMHVWREVïXJLZDQD • 3URJUDPLVW\F]QÈZHUVMÚVNU\SWX-HVWWR • QLHVNRPSUHVRZDQ\VNU\SWNWöU\REVïXJXMH ZV]\VWNLHRSHUDFMHVSUDZG]HQLDMDNLHPRJÈ E\ÊSU]HSURZDG]RQHSU]H]0RGHUQL]U 1DU]ÚG]LH VSöMU]QDU\VXQHNSRQLĝHM SR]ZDODMÈFHQDZ\EöUIXQNFMLNWöUHPDMÈE\Ê VSUDZG]DQH0RĝHV]ZLÚFSU]\JRWRZDÊZïDVQÈ ZHUVMÚVNU\SWX]DZLHUDMÈFÈMHG\QLHQLH]EÚGQH VSUDZG]HQLD:XGRVWÚSQLRQHMSXEOLF]QLH ZLWU\QLHLQWHUQHWRZHMQLHSRZLQLHQHĂSU]HSURZDG]DÊRSHUDFMLVSUDZG]HQLDSRGNÈWHP QLHXĝ\ZDQ\FKIXQNFMLSRQLHZDĝVSRZDOQLDWR G]LDïDQLHZLWU\Q\ 0RGHUQL]UPRĝQDXĝ\ÊZNRQVWUXNFMLZDUXQNRZHM WDNLHMMDNķ-HĝHOLZïDĂFLZRĂÊgeolocation RELHNWXModernizr]ZUöFLZDUWRĂÊtrueZ\NRQDM NRGXMÚW\ZQDZLDVNODPURZ\ĵ if (Modernizr.geolocation) { *HRORNDOL]DFMDMHVWREVïXJLZDQD } :SU]\NïDGDFKSU]HGVWDZLRQ\FKZNVLÈĝFH VNU\SW0RGHUQL]UMHVWXĝ\ZDQ\SUDZLHQDVDP\P NRñFXWXĝSU]HGVNU\SWHPZ\NRU]\VWXMÈF\PMHJR PRĝOLZRĂFL0RĝHV]VLÚMHGQDNVSRWNDÊ]GRïÈF]DQLHP0RGHUQL]UZHOHPHQFLH<head>VWURQ\+70/ MHĝHOL]DZDUWRĂÊVWURQ\Xĝ\ZDIXQNFMLNWöU\FK GRVWÚSQRĂÊMHVWVSUDZG]DQD WŁAŚCIWOŚCI MODERNIZR 1DU\VXQNXSROHZHMVWURQLHPRĝHV]]REDF]\Ê Z\EUDQHIXQNFMHNWöU\FKGRVWÚSQRĂÊVSUDZG]D 0RGHUQL]U3HïQÈOLVWÚZïDĂFLZRĂFL0RGHUQL]U ]QDMG]LHV]QDVWURQLHhttp://modernizr.github.io/ Modernizr/test/index.html API 421 API GEOLOKALIZACJI — OKREŚLANIE POŁOŻENIA UŻYTKOWNIKA &RUD]ZLÚNV]DOLF]EDZLWU\QLQWHUQHWRZ\FKRIHUXMHIXQNFMHGRGDWNRZH Xĝ\WNRZQLNRPNWöU]\XMDZQLDMÈVZRMHSRïRĝHQLHJHRJUDğF]QH ,QIRUPDFMLRSRïRĝHQLXPRĝQDĝÈGDÊ]DSRPRFÈ$3,JHRORNDOL]DFML NA CZYM POLEGA DZIAŁANIE API GEOLOKALIZACJI? JAK UZYSKAĆ DOSTĘP DO INFORMACJI GEOLOKALIZACJI? 3U]HJOÈGDUNLLPSOHPHQWXMÈFH$3,JHRORNDOL]DFML SR]ZDODMÈXĝ\WNRZQLNRPZLWU\QLQWHUQHWRZ\FKQD XMDZQLHQLHLQIRUPDFMLRSRïRĝHQLXJHRJUDğF]Q\P ,QIRUPDFMHWHVÈSRGDZDQHZSRVWDFLZVSöïU]ÚGQ\FKJHRJUDğF]Q\FK,VWQLHMHNLONDVSRVREöZ QDMDNLHSU]HJOÈGDUNDPRĝHRNUHĂOLÊSRïRĝHQLH JHRJUDğF]QHXĝ\WNRZQLNDQDSRGVWDZLHDGUHVX,3 SRïÈF]HQLDVLHFLEH]SU]HZRGRZHMGDQ\FK]VLHFL NRPöUNRZHMOXESRFKRG]ÈF\FK]XU]ÈG]HQLD*36 $3,JHRORNDOL]DFMLMHVWGRP\ĂOQLHGRVWÚSQH ZNDĝGHMREVïXJXMÈFHMMHSU]HJOÈGDUFHLQWHUQHWRZHM SRGREQLHMDNZSU]\SDGNXPRGHOX'20 3RUD]SLHUZV]\]RVWDïRZSURZDG]RQHZ,( )LUHIR[6DIDUL&KURPH2SHUD L26L$QGURLG :SHZQ\FKXU]ÈG]HQLDFK$3,JHRORNDOL]DFML PRĝHXGRVWÚSQLÊQLHFRZLÚFHMGDQ\FKQLĝW\ONR ZVSöïU]ÚGQHJHRJUDğF]QH-HGQDNNRQFHQWUXMHP\ VLÚQDW\FKIXQNFMDFKSRQLHZDĝVÈRQHQDMF]ÚĂFLHM REVïXJLZDQH-HĝHOLSöěQLHMEÚG]LHV]PXVLDï SUDFRZDÊ]LQQ\PLIXQNFMDPLQLHSRZLQLHQHĂ PLHÊ]W\PSUREOHPX 3U]HJOÈGDUNLREVïXJXMÈFHJHRORNDOL]DFMÚSR]ZDODMÈXĝ\WNRZQLNRPQDZ\ïÈF]HQLHWHMIXQNFML :SU]\SDGNXZïÈF]RQHMIXQNFMLJHRORNDOL]DFML SU]HJOÈGDUNDEÚG]LHS\WDïDXĝ\WNRZQLNDF]\FKFH RQXGRVWÚSQLÊGDQHSRV]F]HJöOQ\PZLWU\QRP ĝÈGDMÈF\PWHJRURG]DMXLQIRUPDFML 6SRVöEZMDNLSU]HJOÈGDUNDLQWHUQHWRZDS\WD Xĝ\WNRZQLNDR]JRGÚQDXGRVWÚSQLHQLHGDQ\FK ]DOHĝ\RGNRQNUHWQHMSU]HJOÈGDUNLLXU]ÈG]HQLD 3U]HJOÈGDUND&KURPHQDNRPSXWHU]H0DF 3U]HJOÈGDUND6DIDULQDWDEOHFLHL3DG 422 API 3U]HJOÈGDUND)LUHIR[ZV\VWHPLH:LQGRZV ŻĄDANIE INFORMACJI O POŁOŻENIU UŻYTKOWNIKA PRZETWARZANIE ODPOWIEDZI Kiedy przeglądarka internetowa udzieli odpowiedzi, mamy dwie możliwe sytuacje 1 N Czy obiekt navigator.geolocation jest obsługiwany? 3 T Metoda getCurrentPosition() nie otrzymała żądanych informacji Metoda getCurrentPosition() otrzymała żądane informacje Wywołanie funkcji fail(). Wartością zwrotną jest obiekt PositionError Wywołanie funkcji success(). Wartością zwrotną są obiekty Position i Position.coords 2 Wykonanie poleceń nieużywających geolokalizacji. Wywołanie metody navigator.geolocation. getCurrentPosition() $3,JHRORNDOL]DFMLRSLHUDVLÚQDRELHNFLHRQD]ZLH geolocation-HĝHOLFKFHV]VSUöERZDÊZ\NRU]\VWDÊGDQHRSRïRĝHQLXJHRJUDğF]Q\PXĝ\WNRZQLND ZSLHUZV]HMNROHMQRĂFLWU]HEDVSUDZG]LÊF]\ Z\PLHQLRQ\RELHNWMHVWREVïXJLZDQ\SU]H] SU]HJOÈGDUNÚ:RPDZLDQ\PSU]\NïDG]LHGR SU]HSURZDG]HQLDRSHUDFMLVSUDZG]HQLDZ\NRU]\VWDP\ELEOLRWHNÚ0RGHUQL]U 1. .RQVWUXNFMDZDUXQNRZD]RVWDMHXĝ\WDGR VSUDZG]HQLDF]\SU]HJOÈGDUNDREVïXJXMHJHRORNDOL]DFMÚ 3RZ\ZRïDQLXPHWRG\getCurrentPosition() VNU\SWNRQW\QXXMHG]LDïDQLHRGNROHMQHJRZLHUV]D NRGXSRQLHZDĝĝÈGDQLHMHVWDV\QFKURQLF]QH SRGREQLHMDNĝÈGDQLD$MD[SU]HGVWDZLRQH ZSRSU]HGQLPUR]G]LDOH ¿ÈGDQLHMHVWZ\NRQ\ZDQHDV\QFKURQLF]QLH]ZDĝQHJRSRZRGXRNUHĂOHQLH SRïRĝHQLDJHRJUDğF]QHJRXĝ\WNRZQLND]DMPLH SU]HJOÈGDUFHLQWHUQHWRZHMFKZLOÚLQLHFKFHV] DE\ZF]\W\ZDQLHSR]RVWDïHMF]ÚĂFLVWURQ\]RVWDïR ]DWU]\PDQHJG\SU]HJOÈGDUNDRNUHĂODWRSRïRĝHQLH'ODWHJRWHĝPHWRGDPDGZDSDUDPHWU\ getCurrentPosition(VXFFHVV, IDLO) 2. -HĝHOLJHRORNDOL]DFMDMHVWREVïXJLZDQDSU]HJOÈGDUND]ZUDFDZDUWRĂÊtruthyLZ\NRQDQ\EÚG]LH SLHUZV]\]HVWDZSROHFHñ¿ÈGDMÈRQHLQIRUPDFML RSRïRĝHQLXJHRJUDğF]Q\PXĝ\WNRZQLNDZ\NRU]\VWXMÈFGRWHJRPHWRGÚgetCurrentPosition() RELHNWXgeolocation 3. -HĝHOLJHRORNDOL]DFMDQLHMHVWREVïXJLZDQDWR QDVWÈSLZ\NRQDQLHGUXJLHJR]HVWDZXSROHFHñ if (Modernizr.geolocation) { :DUWRĂÊ]ZURWQDWUXWK\DZLÚFRELHNW MHVWREVïXJLZDQ\ 1DVWÈSLZ\NRQDQLHSROHFHñ ZW\PEORNXNRGX } else { )XQNFMDMHVWQLHREVïXJLZDQDOXE Z\ïÈF]RQD (ZHQWXDOQLHXĝ\WNRZQLNRGU]XFLï ĝÈGDQLH } VXFFHVVWRQD]ZDIXQNFMLNWöUDEÚG]LH Z\ZRï\ZDQDJG\ZDUWRĂFLÈ]ZURWQÈPHWRG\ getCurrentPosition()EÚGÈZVSöïU]ÚGQH JHRJUDğF]QH:VND]DQDWXWDMIXQNFMDDXWRPDW\F]QLHRWU]\PDRELHNWRQD]ZLHposition ]DZLHUDMÈF\LQIRUPDFMHRSRïRĝHQLXJHRJUDğF]Q\P Xĝ\WNRZQLND IDLOWRQD]ZDIXQNFMLZ\ZRï\ZDQHMJG\QLHXGDïR VLÚX]\VNDÊLQIRUPDFMLRSRïRĝHQLXXĝ\WNRZQLND :VND]DQDWXWDMIXQNFMDDXWRPDW\F]QLHRWU]\PD RELHNWRQD]ZLHPositionError]DZLHUDMÈF\ V]F]HJöïRZHLQIRUPDFMHREïÚG]LH 2JöOQLHU]HF]XMPXMÈFPDP\WU]\QRZH RELHNW\NWöUHWU]HEDZ\NRU]\VWDÊSRGF]DV SUDF\]$3,JHRORNDOL]DFMLgeolocation positionLPositionError,FKVNïDGQLD]RVWDQLH SU]HGVWDZLRQDQDQDVWÚSQHMVWURQLH API API GEOLOKALIZACJI 2EVïXJDJHRORNDOL]DFMLQDVWURQLHLQWHUQHWRZHMZ\PDJDXĝ\FLDWU]HFK RELHNWöZ:SRQLĝV]\FKWDEHODFKSRND]DQRMDNGRNXPHQWDFMD$3, ]Z\NOHRSLVXMHGRVWÚSQHRELHNW\ZïDĂFLZRĂFLLPHWRG\ OBIEKT GEOLOCATION 2ELHNWgeolocationMHVWZ\NRU]\VW\ZDQ\ZFHOXĝÈGDQLDGDQ\FKGRW\F]ÈF\FKSRïRĝHQLDXĝ\WNRZQLND -HVWWRRELHNWSRWRPQ\RELHNWXnavigator METODA :$572¥m=:5271$ getCurrentPosition (VXFFHVV, IDLO) 0HWRGDĝÈGDLQIRUPDFMLRSRïRĝHQLXJHRJUDğF]Q\PXĝ\WNRZQLND-HĝHOLXĝ\WNRZQLN]JRG]L VLÚQDLFKXGRVWÚSQLHQLHWRZDUWRĂFLÈ]ZURWQÈVÈZVSöïU]ÚGQHJHRJUDğF]QHRUD]LQQH LQIRUPDFMH3DUDPHWUVXFFHVVWRQD]ZDIXQNFMLZ\ZRï\ZDQHMSRRWU]\PDQLXZVSöïU]ÚGQ\FKJHRJUDğF]Q\FKQDWRPLDVWIDLOWRQD]ZDIXQNFMLZ\ZRï\ZDQHMMHĂOLZVSöïU]ÚGQH WHQLH]RVWDQÈRWU]\PDQH OBIEKT POSITION -HĝHOLXĝ\WNRZQLN]JRG]LVLÚQDXGRVWÚSQLHQLHLQIRUPDFMLRVZRLPSRïRĝHQLXJHRJUDğF]Q\PRELHNW PositionEÚG]LHSU]HND]DQ\IXQNFMLZ\ZRïDQLD]ZURWQHJR2ELHNWWHQ]DZLHUDRELHNWSRWRPQ\coords NWöUHJRZïDĂFLZRĂFLSU]HFKRZXMÈLQIRUPDFMHRSRïRĝHQLXXĝ\WNRZQLND-HĝHOLXU]ÈG]HQLHREVïXJXMHRELHNW geolocationPXVLGRVWDUF]DÊPLQLPDOQÈLORĂÊGDQ\FK SDWU]NROXPQDWymagana SR]RVWDïHZïDĂFLZRĂFL VÈRSFMRQDOQHLLFKGRVWDUF]HQLHPRĝHE\ÊX]DOHĝQLRQHRGPRĝOLZRĂFLGDQHJRXU]ÈG]HQLD :$¥&,:2¥m :$572¥m=:5271$ Position.coords.latitude 6]HURNRĂÊJHRJUDğF]QDZ\UDĝRQDZVWRSQLDFK 7DN :<0$*$1$ Position.coords.longitude 'ïXJRĂÊJHRJUDğF]QDZ\UDĝRQDZVWRSQLDFK 7DN Position.coords.accuracy :\UDĝRQDZPHWUDFKGRNïDGQRĂÊZVSöïU]ÚGQ\FKJHRJUDğF]Q\FK 7DN Position.coords.altitude 0HWU\QDGSR]LRPHPPRU]D 7DN ZDUWRĂFLÈPRĝHE\Ênull) Position.coords.altitudeAccuracy :\UDĝRQDZPHWUDFKGRNïDGQRĂÊSRGF]DV SRGDZDQLDZ\VRNRĂFL 7DN ZDUWRĂFLÈPRĝHE\Ênull) Position.coords.heading /LF]EDVWRSQLRGFK\OHQLDRGNLHUXQNX SöïQRFQHJR 1LH ]DOHĝ\RGXU]ÈG]HQLD Position.coords.speed :\UDĝRQDZPHWUDFKQDVHNXQGÚV]\ENRĂÊ SRUXV]DQLDVLÚ 1LH ]DOHĝ\RGXU]ÈG]HQLD Position.coords.timestamp &]DVNWöU\XSï\QÈïRGFKZLOLXWZRU]HQLD RELHNWX VIRUPDWRZDQ\MDNRRELHNWDate 1LH ]DOHĝ\RGXU]ÈG]HQLD OBIEKT POSITIONERROR -HĝHOLQLHXGDVLÚX]\VNDÊLQIRUPDFMLRSRïRĝHQLXJHRJUDğF]Q\PXĝ\WNRZQLNDIXQNFMDZ\ZRïDQLD ]ZURWQHJRRWU]\PDRELHNWPositionError :$¥&,:2¥m :$572¥m=:5271$ PositionError.code 1XPHUEïÚGXPRĝHSU]\MÈÊQDVWÚSXMÈFHZDUWRĂFL1ĽEUDNXSUDZQLHñ 7DN 2ĽGDQHQLHGRVWÚSQH3ĽSU]HNURF]HQLHF]DVXRF]HNLZDQLD PositionError.message .RPXQLNDW QLHSU]H]QDF]RQ\GODXĝ\WNRZQLNDNRñFRZHJR 424 API :<0$*$1$ 7DN PRACA Z INFORMACJAMI O POŁOŻENIU UŻYTKOWNIKA JAVASCRIPT c09/js/geolocation.js var elMap = document.getElementById(’loc’); (OHPHQW+70/ var msg = ĳ3U]HSUDV]DP\QLHXGDïRVLÚXVWDOLÊ7ZRMHJRSRïRĝHQLDĳ .RPXQLNDWREUDNXGDQ\FKGRW\F]ÈF\FKSRïRĝHQLD 1 2 4 if (Modernizr.geolocation) { &]\JHRORNDOL]DFMDMHVWREVïXJLZDQD" navigator.geolocation.getCurrentPosition(success, fail); 3\WDQLHR]JRGÚQDXĝ\FLHLQIRUPDFML HO0DSWH[W&RQWHQW ĳ6SUDZG]DQLHSRïRĝHQLDĳ .RPXQLNDWLQIRUPXMÈF\RVSUDZG]HQLXSRïRĝHQLD } else { %UDNREVïXJLJHRORNDOL]DFML elMap.textContent = msg; :\ĂZLHWOHQLHNRPXQLNDWX } 1. :SU]HGVWDZLRQ\PSU]\NïDG]LHVNU\SW0RGHUQL]UVSUDZG]DF]\JHRORNDOL]DFMDMHVW REVïXJLZDQDSU]H]SU]HJOÈGDUNÚ LQWHUQHWRZÈLZïÈF]RQDSU]H] Xĝ\WNRZQLND 2. 3RGF]DVZ\ZRïDQLDIXQNFML getCurrentPosition() Xĝ\WNRZQLN]RVWDQLHSRSURV]RQ\ R]JRGÚQDXGRVWÚSQLHQLH LQIRUPDFMLRVZRLPSRïRĝHQLX JHRJUDğF]Q\P 3. -HĝHOLLQIRUPDFMHRSRïRĝHQLX]RVWDQÈRWU]\PDQH ZVSöïU]ÚGQHJHRJUDğF]QHEÚGÈ Z\ĂZLHWORQHQDVWURQLH 4. -HĝHOLLQIRUPDFMHRSRïRĝHQLXQLH]RVWDQÈRWU]\PDQH Xĝ\WNRZQLN]REDF]\NRPXQLNDW LQIRUPXMÈF\REUDNXPRĝOLZRĂFL RNUHĂOHQLDMHJRSRïRĝHQLD 3 function success(position) { 2WU]\PDQRGDQHRSRïRĝHQLXXĝ\WNRZQLND PVJ ĳK!'ïXJRĂÊJHRJUDğF]QDEU!ĳ 8WZRU]HQLHNRPXQLNDWX msg += position.coords.latitude + ’</h3>’; 'RGDQLHV]HURNRĂFLJHRJUDğF]QHM PVJ ĳK!6]HURNRĂÊJHRJUDğF]QDEU!ĳ 8WZRU]HQLHNRPXQLNDWX msg += position.coords.longitude + ’</h3>’; 'RGDQLHGïXJRĂFLJHRJUDğF]QHM HO0DSLQQHU+70/ PVJ :\ĂZLHWOHQLHZVSöïU]ÚGQ\FKJHRJUDğF]Q\FK } 5 function fail(msg) { 1LHRWU]\PDQRGDQ\FKRSRïRĝHQLX elMap.textContent = msg; :\ĂZLHWOHQLHNRPXQLNDWX console.log(msg.code); =DUHMHVWURZDQLHEïÚGX } -HĝHOLQLHX]\VNDV]Z\QLNX ZSU]HJOÈGDUFHQDNRPSXWHU]H SU]HGVWDZLRQ\SU]\NïDGZ\SUöEXMQDVPDUWIRQLH:V]\VWNLH SU]\NïDG\PRĝQDXUXFKRPLÊ EH]SRĂUHGQLRZZLWU\QLHLQWHUQHWRZHMSRĂZLÚFRQHMNVLÈĝFH http://www.javascriptbook. com/:FHOXREVïXJLVWDUV]\FK SU]HJOÈGDUHNSRV]XNDMVNU\SWX RQD]ZLHgeoPosition.js HTML c09/geolocation.html <script src=”js/geolocation.js”></script> 5. -HĝHOL]MDNLHJRNROZLHN SRZRGXQLHXGDVLÚX]\VNDÊLQIRUPDFMLRSRïRĝHQLXSRQRZQLH ]RVWDQLHZ\ĂZLHWORQ\RGSRZLHGQLNRPXQLNDW.RGEïÚGXSRMDZL VLÚZRNQLHNRQVROLSU]HJOÈGDUNL LQWHUQHWRZHM API 0HFKDQL]P :HE6WRUDJH LQDF]HM +70/6WRUDJH SR]ZDODQDSU]HFKRZ\ZDQLHGDQ\FK ZSU]HJOÈGDUFHLQWHUQHWRZHM,VWQLHMÈGZD URG]DMHPHFKDQL]PX ORNDOQ\LVHVML API WEB STORAGE — PRZECHOWYWANIE DANYCH W PRZEGLĄDARKACH INTERNETOWYCH JAK UZYSKAĆ DOSTĘP DO API WEB STORAGE? 3U]HGZSURZDG]HQLHP+70/SRGVWDZRZ\ PHFKDQL]PSU]HFKRZ\ZDQLDLQIRUPDFMLZSU]HJOÈGDUFHVWDQRZLï\SOLNLFRRNLHV-HGQDNUR]ZLÈ]DQLH RSDUWHQDFRRNLHVPDNLONDSRZDĝQ\FKRJUDQLF]Hñ PLÚG]\LQQ\PL • PRĝOLZRĂÊSU]HFKRZ\ZDQLDMHG\QLHQLHZLHONLHM • • LORĂFLGDQ\FK Z\V\ïDQLHFRRNLHZUD]]NDĝG\PĝÈGDQLHP VWURQ\ZGDQHMGRPHQLH MHVWX]QDZDQH]DQLHEH]SLHF]QH 'ODWHJRWHĝZVSHF\ğNDFML+70/ZSURZDG]RQR RELHNWSDPLÚFLPDVRZHM,VWQLHMÈGZDURG]DMH WHJRRELHNWXlocalStorageLsessionStorage :REXRELHNWDFKXĝ\ZDQHVÈWHVDPHPHWRG\ LZïDĂFLZRĂFL5öĝQLFDSROHJDQDRNUHVLHSU]H] MDNLVÈSU]HFKRZ\ZDQHGDQHDWDNĝHQDW\PF]\ ZV]\VWNLHNDUW\PRJÈX]\VNDÊGRVWÚSGRSU]HFKRZ\ZDQ\FKGDQ\FK 3$0,}m0$62:$ /2.$/1$ SESJI &]\GDQHPDMÈE\ÊSU]HFKRZ\ZDQHSR]DPNQLÚFLXNDUW\ OXERNQD" 3 2 &]\ZV]\VWNLHRWZDUWH NDUW\OXERNQDPRJÈX]\VNDÊ GRVWÚSGRGDQ\FK" 3 2 :RELHNFLHSDPLÚFLPDVRZHMSU]HJOÈGDUNLPRJÈ SU]HFKRZ\ZDÊQDMF]ÚĂFLHMGR0%GDQ\FKGOD GDQHMGRPHQ\-HĝHOLZLWU\QDSUöEXMHXPLHĂFLÊ ZLÚNV]ÈLORĂÊGDQ\FKSU]HJOÈGDUND]Z\NOHS\WD Xĝ\WNRZQLNDR]JRGÚQDSU]HFKRZ\ZDQLHGRGDWNRZ\FKGDQ\FK 1LJG\QLHZROQRSU]\MPRZDÊ ]DïRĝHQLDĝHXĝ\WNRZQLN]JRG]LVLÚDE\ZLWU\QD SU]HFKRZ\ZDïDZLÚNV]ÈLORĂÊGDQ\FK 426 API 'DQHVÈSU]HFKRZ\ZDQHZSRVWDFLZïDĂFLZRĂFL RELHNWöZSDPLÚFLPDVRZHM SDUNOXF]ZDUWRĂÊ :DUWRĂÊZSDU]H]DZV]HMHVWFLÈJLHPWHNVWRZ\P $E\FKURQLÊLQIRUPDFMHSU]HFKRZ\ZDQHSU]H] ZLWU\Q\ZHZVSRPQLDQ\FKRELHNWDFKSU]HJOÈGDUNL VWRVXMÈSROLW\NÚWHJRVDPHJRěUöGïD2]QDF]DWR ĝHGRVWÚSGRGDQ\FKPDMÈMHG\QLHVWURQ\]QDMGXMÈFHVLÚZWHMVDPHMGRPHQLH KWWSZZZJRRJOHSO 1 2 3 4 'RSDVRZDQHPXV]ÈE\ÊF]WHU\NRPSRQHQW\ DGUHVX85/ 1. 3URWRNöï'RSDVRZDQLHSURWRNRïXMHVW NRQLHF]QH-HĝHOLGDQH]RVWDï\XPLHV]F]RQH SU]H]VWURQÚNWöUHMDGUHV]DF]\QDVLÚRG httpWRRELHNWQLHEÚG]LHGRVWÚSQ\GODVWURQ RDGUHVDFKUR]SRF]\QDMÈF\FKVLÚRGhttps 2. 6XEGRPHQD1D]ZDVXEGRPHQ\UöZQLHĝPXVL E\ÊGRSDVRZDQD1DSU]\NïDGVWURQDmaps. google.plQLHPRĝHX]\VNDÊGRVWÚSXGRGDQ\FK ]DFKRZDQ\FKSU]H]www.google.pl 3. 'RPHQD1D]ZDGRPHQ\PXVLE\ÊGRSDVRZDQD1DSU]\NïDGVWURQDgoogle.plQLHPRĝH X]\VNDÊGRVWÚSXGRPDJD]\QXORNDOQHJR XWZRU]RQHJRGODfacebook.com 4. 3RUW1XPHUSRUWXPXVLE\ÊGRSDVRZDQ\ 6HUZHU\:::PRJÈPLHÊZLHOHSRUWöZ 1XPHUSRUWXQDMF]ÚĂFLHMQLHMHVWSRGDZDQ\ ZDGUHVLH85/DZLWU\QDLQWHUQHWRZDXĝ\ZD SRUWXGODVWURQ3DPLÚWDMĝHQXPHUSRUWX PRĝHVLÚ]PLHQLÊ 2ELHNW\SDPLÚFLPDVRZHMWRW\ONRMHGQR]QRZ\FK$3,Z+70/SU]H]QDF]RQ\FKGRSU]HFKRZ\ZDQLD GDQ\FK,QQHSR]ZDODMÈQDX]\VNDQLHGRVWÚSXGRV\VWHPXSOLNöZ ]DSRPRFÈ$3,)LOH6\VWHP RUD]ED] GDQ\FK]QDMGXMÈF\FKVLÚSRVWURQLHNOLHQWDQDSU]\NïDG:HE64/ JAK UZYSKAĆ DOSTĘP DO API WEB STORAGE? 2EDRPDZLDQHRELHNW\VÈLPSOHPHQWRZDQH ZRELHNFLHZLQGRZDZLÚFQLHPDSRWU]HE\ SRSU]HG]DQLDQD]ZPHWRGMDNÈNROZLHNLQQÈQD]ZÈ RELHNWX ,VWQLHMHUöZQLHĝPRĝOLZRĂÊZVWDZLDQLDLSRELHUDQLDNOXF]\RUD]ZDUWRĂFL]DSRPRFÈQRWDFML ]NURSNÈF]\OLSRGREQLHMDNZSU]\SDGNXLQQ\FK RELHNWöZ $E\XPLHĂFLÊHOHPHQWZRELHNFLHSDPLÚFLPDVRZHMQDOHĝ\Xĝ\ÊPHWRG\setItem()NWöUDSRELHUD GZDSDUDPHWU\QD]ZÚNOXF]DRUD]SU]\SLVDQÈPX ZDUWRĂÊ 2ELHNW\SDPLÚFLPDVRZHMVÈQDMF]ÚĂFLHMZ\NRU]\VW\ZDQHGRSU]HFKRZ\ZDQLDGDQ\FKZIRUPDFLH -621'ODWHJRWHĝ PHWRGDparse()RELHNWXJSONMHVWXĝ\ZDQD GRNRQZHUVMLGDQ\FK-621QDSRVWDÊRELHNWX -DYD6FULSW PHWRGDstringify()RELHNWXJSON jest Xĝ\ZDQDGRSU]HNV]WDïFHQLDRELHNWöZQDSRVWDÊ FLÈJöZWHNVWRZ\FKVIRUPDWRZDQ\FKMDNR-621 1DWRPLDVWSREUDQLHZDUWRĂFL]RELHNWXSDPLÚFL PDVRZHMXPRĝOLZLDPHWRGDgetItem()NWöUD SRELHUDDUJXPHQWZSRVWDFLNOXF]D 3U]HFKRZ\ZDQLHLQIRUPDFML ORFDO6WRUDJHVHW,WHP ĳZLHNĳĳĳ ORFDO6WRUDJHVHW,WHP ĳNRORUĳĳQLHELHVNLĳ 8]\VNDQLHGRVWÚSXGRLQIRUPDFML LSU]HFKRZ\ZDQLHLFKZ]PLHQQHM YDUDJH ORFDO6WRUDJHJHW,WHP ĳZLHNĳ var color = localStorage.getItem(’kolor’); /LF]EDSU]HFKRZ\ZDQ\FKHOHPHQWöZ var items = localStorage.length; 'DQHZRELHNWDFKSDPLÚFLPDVRZHMVÈZVWDZLDQH LSRELHUDQHZVSRVöEV\QFKURQLF]Q\2]QDF]DWR ]DWU]\PDQLHZV]HONLFKLQQ\FKRSHUDFMLVNU\SWX SRGF]DVX]\VNLZDQLDGRVWÚSXGRGDQ\FKOXELFK ZVWDZLDQLD'ODWHJRWHĝMHĝHOL]DFKRG]LSRWU]HED FLÈJïHJRX]\VNLZDQLDGRVWÚSXGRSU]HFKRZ\ZDQ\FKGDQ\FKPRĝQD]DXZDĝ\ÊVSRZROQLHQLH G]LDïDQLDZLWU\Q\ METODA • • 3U]HFKRZ\ZDQLHLQIRUPDFML QRWDFMDRELHNWX ORFDO6WRUDJHZLHN ORFDO6WRUDJHNRORU ĳQLHELHVNLĳ 8]\VNDQLHGRVWÚSXGRLQIRUPDFML QRWDFMDRELHNWX YDUDJH ORFDO6WRUDJHZLHN var color = localStorage.kolor; /LF]EDSU]HFKRZ\ZDQ\FKHOHPHQWöZ var items = localStorage.length; 3RQLĝHM]QDMGXMÈVLÚWDEHOH]DZLHUDMÈFHPHWRG\ LZïDĂFLZRĂFLRELHNWöZSDPLÚFLPDVRZHM7DEHOH WHVÈSRGREQHGRSU]HGVWDZLRQ\FKZF]HĂQLHMGOD $3,JHRORNDOL]DFMLLZVND]XMÈW\SWDEHO]MDNLPL PRĝHV]VLÚVSRW\NDÊZGRNXPHQWDFMDFKGRW\F]ÈF\FK$3, OPIS setItem(NOXF], ZDUWRĂÊ) 8WZRU]HQLHQRZHMSDU\NOXF]ZDUWRĂÊ getItem(NOXF]) 3REUDQLHZDUWRĂFLZVND]DQHJRNOXF]D removeItem(NOXF]) 8VXQLÚFLHSDU\NOXF]ZDUWRĂÊGODZVND]DQHJRNOXF]D clear() 8VXQLÚFLHZV]\VWNLFKLQIRUPDFML]RELHNWX :$¥&,:2¥m OPIS length /LF]EDNOXF]\ API 427 MAGAZYN LOKALNY 3U]\NïDG\SU]HGVWDZLRQHQDWHMLQDVWÚSQHMVWURQLH SU]HFKRZXMÈGDQHNWöUHXĝ\WNRZQLNZSURZDG]Lï ZSRODFKWHNVWRZ\FK3U]\NïDG\UöĝQLÈVLÚ GïXJRĂFLÈF]DVXSU]HFKRZ\ZDQLDGDQ\FK 1. .RQVWUXNFMDZDUXQNRZD]RVWDïDXĝ\WDGR VSUDZG]HQLDF]\SU]HJOÈGDUNDREVïXJXMHSRWU]HEQHQDP$3, 2. 2GQLHVLHQLDGRSöOWHNVWRZ\FKQD]Z\ Xĝ\WNRZQLNDLRGSRZLHG]L]RVWDMÈ]DFKRZDQH Z]PLHQQ\FK 3. =DSRPRFÈPHWRG\getItem()VNU\SWVSUDZG]DF]\RELHNWSDPLÚFLPDVRZHM]DZLHUDZDUWRĂÊ GODNWöUHJRNROZLHN]HZVND]DQ\FKNOXF]\-HĝHOL WDN]RVWDMHRQDZ\ĂZLHWORQDZRGSRZLHGQLPSROX WHNVWRZ\PSU]H]XDNWXDOQLHQLHMHJRZïDĂFLZRĂFL value 4. =DNDĝG\PUD]HPJG\GODGRZROQHJRSROD WHNVWRZHJRMHVWZ\ZRï\ZDQH]GDU]HQLHinput IRUPXODU]]DSLVXMHGDQHZRELHNFLHlocalStorage OXEsessionStorage:DUWRĂFLWHEÚGÈDXWRPDW\F]QLHZ\ĂZLHWORQHSRRGĂZLHĝHQLXVWURQ\ c09/js/local-storage.js JAVASCRIPT 1 LI ZLQGRZORFDOVWRUDJH ^ 2 var txtUsername = document.getElementById(’username’); 3REUDQLHHOHPHQWöZIRUPXODU]D YDUW[W$QVZHU GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ 3 txtUsername.value = localStorage.getItem(’username’); :DUWRĂFLHOHPHQWöZVÈ W[W$QVZHUYDOXH ORFDO6WRUDJHJHW,WHP ĳDQVZHUĳ SREUDQH]RELHNWX ORFDO6WRUDJH W[W8VHUQDPHDGG(YHQW/LVWHQHU ĳLQSXWĳIXQFWLRQ ^'DQH]RVWDï\]DSLVDQH localStorage.setItem(’username’, txtUsername.value); }, false); 4 W[W$QVZHUDGG(YHQW/LVWHQHU ĳLQSXWĳIXQFWLRQ ^'DQH]RVWDï\]DSLVDQH ORFDO6WRUDJHVHW,WHP ĳDQVZHUĳW[W$QVZHUYDOXH }, false); } FORFDOVWRUDJHKWPO -HG\QDUöĝQLFDZVHVVLRQVWRUDJHKWPOWRïÈF]HSURZDG]ÈFHGRVNU\SWX GLYFODVV ĵWZRWKLUGVĵ! <form id=”application” action=”apply.php”> ODEHOIRU ĵXVHUQDPHĵ!,PLÚODEHO! LQSXWW\SH ĵWH[WĵLG ĵXVHUQDPHĵQDPH ĵXVHUQDPHĵ!EU! ODEHOIRU ĵDQVZHUĵ!2GSRZLHGěODEHO! WH[WDUHDLG ĵDQVZHUĵQDPH ĵDQVZHUĵ!WH[WDUHD! LQSXWW\SH ĵVXEPLWĵ! </form> </div> <script src=”js/local-storage.js”></script> 428 API HTML MAGAZYN SESJI 2ELHNWsessionStorageMHVWOHSLHMGRVWRVRZDQ\GR LQIRUPDFMLFKDUDNWHU\]XMÈF\FKVLÚQDVWÚSXMÈF\PL FHFKDPL 2ELHNWlocalStorageMHVWOHSLHMGRVWRVRZDQ\GR LQIRUPDFMLFKDUDNWHU\]XMÈF\FKVLÚQDVWÚSXMÈF\PL FHFKDPL • &]ÚVWRXOHJDMÈ]PLDQRP ]DNDĝG\PUD]HPJG\ • =PLDQ\VÈZSURZDG]DQHMHG\QLHFRSHZLHQ F]DV QDSU]\NïDGKDUPRQRJUDPOXEFHQ\ FR • Xĝ\WNRZQLNRGZLHG]DZLWU\QÚLQWHUQHWRZÈQD SU]\NïDGLQIRUPDFMHR]DORJRZDQLXXĝ\WNRZQLND OXERMHJRSRïRĝHQLX 6WDQRZLÈGDQHRVRELVWHNWöUHQLHSRZLQQ\ E\ÊGRVWÚSQHGODLQQ\FKXĝ\WNRZQLNöZGDQHJR XU]ÈG]HQLD • PRĝHE\ÊSRPRFQHSRGF]DVLFKSU]HFKRZ\ZDQLDRIĠLQH 8ĝ\WNRZQLNPRĝHSRZUöFLÊQDVWURQÚLFKFH SRQRZQLHXĝ\ÊW\FKVDP\FKLQIRUPDFML QD SU]\NïDG]DSLVDQHXVWDZLHQLD JAVASCRIPT c09/js/session-storage.js 1 LI ZLQGRZVHVVLRQVWRUDJH ^ 2 var txtUsername = document.getElementById(’username’); 3REUDQLHHOHPHQWöZIRUPXODU]D YDUW[W$QVZHU GRFXPHQWJHW(OHPHQW%\,G ĳDQVZHUĳ 3 txtUsername.value = sessionStorage.getItem(’username’); :DUWRĂFLHOHPHQWöZVÈ W[W$QVZHUYDOXH VHVVLRQ6WRUDJHJHW,WHP ĳDQVZHUĳ SREUDQH]RELHNWXVHVVLRQ6WRUDJH W[W8VHUQDPHDGG(YHQW/LVWHQHU ĳLQSXWĳIXQFWLRQ ^'DQH]RVWDï\]DSLVDQH sessionStorage.setItem(’username’, txtUsername.value); }, false); 4 W[W$QVZHUDGG(YHQW/LVWHQHU ĳLQSXWĳIXQFWLRQ ^'DQH]RVWDï\]DSLVDQH VHVVLRQ6WRUDJHVHW,WHP ĳDQVZHUĳW[W$QVZHUYDOXH }, false); } WYNIK API 429 API HISTORY I PUSHSTATE 3RSU]HMĂFLX]MHGQHMVWURQ\QDLQQÈSU]HJOÈGDUNDLQWHUQHWRZDSDPLÚWD RGZLHG]DQHVWURQ\-HGQDNZDSOLNDFMDFKRSDUW\FKQDWHFKQRORJLL$MD[ QLHQDVWÚSXMHSU]HMĂFLHQD]XSHïQLHQRZÈVWURQÚLGODWHJRXĝ\ZDMÈRQH$3, +LVWRU\GRXDNWXDOQLDQLDSDVNDDGUHVXLKLVWRULL NA CZYM POLEGA DZIAŁANIE API HISTORY? .DĝGDNDUWDLRNQRZSU]HJOÈGDUFHSU]HFKRZXMH ZïDVQÈKLVWRULÚRGZLHG]RQ\FKVWURQ.LHG\ ZNDUFLHOXERNQLHZ\ĂZLHWODV]QRZÈVWURQÚMHM DGUHV85/]RVWDMHGRGDQ\GROLVW\VWURQZKLVWRULL RGZLHG]RQ\FK :SURZDG]RQHZ+70/$3,+LVWRU\PRĝHSRPöF ZUR]ZLÈ]DQLXSU]HGVWDZLRQHJRSUREOHPX3R]ZDODQDSUDFÚ]RELHNWHPhistorySU]HJOÈGDUNL • ']LÚNLPHWRGRPpushState() • LreplaceState()]\VNXMHV]PRĝOLZRĂÊ XDNWXDOQLHQLDVWRVXKLVWRULLSU]HJOÈGDUNL :UD]]NDĝG\PHOHPHQWHPPRJÈE\ÊSU]HFKRZ\ZDQHLQIRUPDFMHGRGDWNRZH ']LÚNLWHPXZSU]HJOÈGDUFHLQWHUQHWRZHMPRĝQD Xĝ\ZDÊSU]\FLVNöZķZVWHF]ĵLķGDOHMĵGRSRUXV]DQLDVLÚSRVWURQDFKRGZLHG]RQ\FKZGDQHM NDUFLHOXERNQLH-HGQDNZZLWU\QDFKRSDUW\FKQD WHFKQRORJLL$MD[DGUHV\85/QLHVÈDXWRPDW\F]QLH XDNWXDOQLDQH DSU]\FLVNķZVWHF]ĵPRĝHQLH SRND]\ZDÊRVWDWQLRZ\ĂZLHWODQHM]DZDUWRĂFL -DNZNUöWFH]REDF]\V]GRRELHNWXhistoryPRĝQD GRGDZDÊLQIRUPDFMHSRGF]DVZ\NRQ\ZDQLDĝÈGDñ $MD[3RQDGWRSRNOLNQLÚFLXSU]\FLVNXķZVWHF]ĵ Z\ĂZLHWODQDMHVWSUDZLGïRZD]DZDUWRĂÊ PIERWSZE ŁĄCZE: TRZECIE ŁĄCZE: DRUGIE ŁĄCZE: jeden.html dwa.html trzy.html dwa.html JEDEN DWA TRZY JEDEN DWA TRZY JEDEN DWA TRZY JEDEN DWA TRZY 1 2 3 2 Pierwsza odwiedzona Kliknięcie łącza: ta strona strona zostaje umieszczona zostaje umieszczona na na stosie historii górze stosu historii jeden.html Kliknięcie łącza: ta strona zostaje umieszczona na górze stosu historii Kliknięcie przycisku „wstecz” powoduje przejście w dół stosu historii GZDKWPO trzy.html trzy.html jeden.html GZDKWPO GZDKWPO jeden.html jeden.html 3U]HJOÈGDQLHVWURQLQWHUQHWRZ\FKJG\VÈSU]HJOÈGDQHVWURQ\LQWHUQHWRZHDGUHV85/ZSDVNX ]RVWDMHXDNWXDOQLRQ\%LHĝÈFDVWURQD]RVWDMH SRQDGWRXPLHV]F]RQDQDJöU]HWDN]ZDQHJRVWRVX KLVWRULL .OLNQLÚFLHSU]\FLVNXķZVWHF]ĵSRZRGXMHSU]HMĂFLH ZGöïVWRVXKLVWRULL API PRZYCISK „WSTECZ”: .OLNQLÚFLHSU]\FLVNXķGDOHMĵSRZRGXMHSU]HMĂFLH ZJöUÚVWRVXKLVWRULL RLOHWRPRĝOLZH 1RZDVWURQDMHĝHOLSRMDZLVLÚĝÈGDQLHZ\ĂZLHWOHQLDQRZHMVWURQ\WRGDQHQRZHMVWURQ\]DVWÈSLÈQD VWRVLHKLVWRULLZV]\VWNRFR]QDMGXMHVLÚSRZ\ĝHM ELHĝÈFHMVWURQ\ 6WDQR]QDF]DV\WXDFMÚZNWöUHMFRĂVLÚG]LHMHZGDQ\PF]DVLH+LVWRULDSU]HJOÈGDUNLWRVWRVLQIRUPDFML RVWDQDFKXïRĝRQ\FKMHGHQQDGUXJLP7U]\PHWRG\Z\PLHQLRQHQDWHMVWURQLHSR]ZDODMÈQDSU]HSURZDG]DQLHRSHUDFMLQDVWDQLHSU]HJOÈGDUNL DODANIE INFORMACJI DO OBIEKTU HISTORII 0HWRGDpushState()SRZRGXMHZVWDZLHQLHLQIRUPDFMLGRRELHNWXhistory=NROHLreplaceState() XDNWXDOQLDELHĝÈF\ZSLVKLVWRULL2ELHPHWRG\ SRELHUDMÈWHVDPHWU]\SDUDPHWU\ SDWU]SRQLĝHM ]NWöU\FKNDĝG\XDNWXDOQLDRELHNWhistory 3RQLHZDĝRELHNWhistoryMHVWRELHNWHPSRWRPQ\P ZLQGRZMHJRQD]ZÚPRĝQDEH]SRĂUHGQLRZ\NRU]\VW\ZDÊZVNU\SFLH'ODWHJRPRĝHV]Z\GDÊSROHFHQLHhistory.pushState()ĽQLHPXVLV]Z\GDZDÊ SROHFHQLDZLQGRZKLVWRU\SXVK6WDWH history.pushState(VWDWH, WLWOH, XUO); 1 1. 2ELHNWhistoryPRĝH SU]HFKRZ\ZDÊLQIRUPDFMH ZNDĝG\PHOHPHQFLHXPLHV]F]RQ\PZKLVWRULL-HVWWR PRĝOLZHG]LÚNLSDUDPHWURZL stateDLQIRUPDFMHPRJÈE\Ê SRQRZQLHSREUDQHSRSRZURFLH QDGDQÈVWURQÚ 2. $NWXDOQLHQLHZ\NRU]\VW\ZDQ\ SU]H]ZLÚNV]RĂÊSU]HJOÈGDUHN SDUDPHWUtitleMHVWSU]H]QDF]RQ\GR]PLDQ\W\WXïXVWURQ\ 0RĝHV]SRGDÊFLÈJWHNVWRZ\ GODWHMZDUWRĂFLEÚG]LHJRWRZ\ GRXĝ\FLDJG\SU]HJOÈGDUNL ]DF]QÈREVïXJLZDÊSDUDPHWU title 2 3 3. $GUHV85/NWöU\PDSU]H] SU]HJOÈGDUNÚ]RVWDÊZ\ĂZLHWORQ\GODGDQHMVWURQ\LQWHUQHWRZHM0XVLPLHÊWDNLHVDPR ěUöGïRMDNELHĝÈF\DGUHV85/ LSRZLQLHQZ\ĂZLHWODÊSUDZLGïRZÈ]DZDUWRĂÊJG\Xĝ\WNRZQLN ]GHF\GXMHVLÚSRZUöFLÊQDWÚ VWURQÚ POBRANIE INFORMACJI Z OBIEKTU HISTORY 'RGDQLH]DZDUWRĂFLGRKLVWRULLSU]HJOÈGDUNLWR MHG\QLHF]ÚĂÊUR]ZLÈ]DQLD'UXJÈF]ÚĂFLÈMHVW ZF]\WDQLHSUDZLGïRZHM]DZDUWRĂFLJG\Xĝ\WNRZQLN NOLNQLHSU]\FLVNķZVWHF]ĵOXEķGDOHMĵZSU]HJOÈGDUFH$E\SRPöFZZ\ĂZLHWOHQLXSUDZLGïRZHM]DZDUWRĂFLZ\ZRï\ZDQHMHVW]GDU]HQLHonpopstate JG\Xĝ\WNRZQLN]DĝÈGDQRZHMVWURQ\ :\PLHQLRQH]GDU]HQLHSRZRGXMHZ\ZRïDQLH IXQNFMLRGSRZLHG]LDOQHM]DZF]\WDQLHRGSRZLHGQLHM]DZDUWRĂFLQDVWURQLH,VWQLHMÈGZDVSRVRE\ RNUHĂOHQLDMDND]DZDUWRĂÊSRZLQQDE\ÊXPLHV]F]RQDQDVWURQLH • RELHNWlocation SU]HGVWDZLDSDVHNDGUHVX • ZSU]HJOÈGDUFH ZDUWRĂÊZïDĂFLZRĂFLstateZRELHNFLHhistory 2ELHNWlocation -HĝHOLXĝ\WNRZQLNNOLNQLHSU]\FLVNķZVWHF]ĵOXE ķGDOHMĵZSU]HJOÈGDUFHSDVHNDGUHVX]RVWDQLH XDNWXDOQLRQ\FRSR]ZROLQDSREUDQLHDGUHVX85/ VWURQ\NWöUDSRZLQQDE\ÊZF]\WDQD]DSRPRFÈ location.pathname (locationWRRELHNWSRWRPQ\ RELHNWXZLQGRZQDWRPLDVWMHJRZïDĂFLZRĂÊ pathnameWRELHĝÈF\DGUHV85/ 7DNLHUR]ZLÈ]DQLHVSUDZG]DVLÚGRVNRQDOHSRGF]DVXDNWXDOQLDQLD FDïHMVWURQ\ 2ELHNWstate 3RQLHZDĝSLHUZV]\SDUDPHWUPHWRG\pushState() SU]HFKRZXMHGDQHZUD]]RELHNWHPhistoryGOD WHMVWURQ\PRĝQDJRZ\NRU]\VWDÊGRSU]HFKRZ\ZDQLDGDQ\FKZIRUPDFLH-621'DQHWHPRJÈ E\ÊQDVWÚSQLHEH]SRĂUHGQLRZF]\WDQHQDVWURQLH 7DNVLÚG]LHMHJG\QRZD]DZDUWRĂÊZF]\WXMH GDQH]DPLDVWWUDG\F\MQHMVWURQ\LQWHUQHWRZHM API OBIEKT HISTORY :SURZDG]RQHZ+70/$3,+LVWRU\RSLVXMHIXQNFMRQDOQRĂÊRELHNWXhistory ZQRZRF]HVQ\FKSU]HJOÈGDUNDFK3R]ZDODQDX]\VNDQLHGRVWÚSXGRKLVWRULL SU]HJOÈGDUNLLXDNWXDOQLDQLHWHMKLVWRULL DOHGRW\F]ÈFHMMHG\QLHVWURQZ7ZRMHM ZLWU\QLHNWöUHRGZLHG]LïXĝ\WNRZQLN 1DZHWMHĂOLRGZLHG]DMÈF\QLHMHVWSU]HQRV]RQ\QDQRZÈVWURQÚLQWHUQHWRZÈ QDSU]\NïDGQDVNXWHN XDNWXDOQLHQLDW\ONRIUDJPHQWXVWURQ\]DSRPRFÈWHFKQRORJLL$MD[ WRQDGDOPRĝQD]PRG\ğNRZDÊ RELHNWhistoryDE\]DJZDUDQWRZDÊG]LDïDQLHSU]\FLVNöZķZVWHF]ĵLķGDOHMĵ]JRGQLH]RF]HNLZDQLDPL Xĝ\WNRZQLNDF]\OLWDNMDNQDVWURQDFKQLHNRU]\VWDMÈF\FK]WHFKQRORJLL$MD[ :SRQLĝV]\FKWDEHODFKSU]HGVWDZLRQRLQIRUPDFMHMDNLHPRĝHV]]QDOHěÊZGRNXPHQWDFML$3, 3RQDE\FLXGRĂZLDGF]HQLDZSUDF\]Z\PLHQLRQ\PLPHWRGDPLZïDĂFLZRĂFLDPLL]GDU]HQLDPL SU]HNRQDV]VLÚĝHSUDFD]LQQ\PLURG]DMDPL$3,MHVWïDWZLHMV]D OBIEKT HISTORY METODA KLVWRU\EDFN OPIS 3U]HMĂFLHķZVWHF]ĵZKLVWRULLSRGREQLHMDNZSU]\SDGNXXĝ\FLDSU]\FLVNX ķZVWHF]ĵZSU]HJOÈGDUFH KLVWRU\IRUZDUG 3U]HMĂFLHGRSU]RGXZKLVWRULLSRGREQLHMDNZSU]\SDGNXXĝ\FLDSU]\FLVNX ķGDOHMĵZSU]HJOÈGDUFH history.go() 3U]HMĂFLHGRZVND]DQHMVWURQ\ZKLVWRULL7RMHVWQXPHULQGHNVXSRF]ÈZV]\RG 0:\ZRïDQLH.go(1)R]QDF]DNOLNQLÚFLHSU]\FLVNXķGDOHMĵQDWRPLDVW.go(-1) — SU]\FLVNXķZVWHF]ĵ history.pushState() 8PLHV]F]HQLHHOHPHQWXQDVWRVLHKLVWRULL .OLNQLÚFLHïÈF]DQDVWURQLH]Z\NOH SRZRGXMHZ\ZRïDQLH]GDU]HQLDhashchange]DPLDVWloadDOHĝDGQH]GDU]HQLH QLH]RVWDQLHZ\ZRïDQHSRXĝ\FLXPHWRG\pushState()JG\DGUHV85/]DZLHUD ]QDNKDVK history.replaceState() ']LDïDQLHWDNLHVDPRMDNPHWRG\pushState()]Z\MÈWNLHPPRG\ğNDFML ELHĝÈFHJRHOHPHQWXZKLVWRULL :$¥&,:2¥m OPIS length :ïDĂFLZRĂÊSRGDMHOLF]EÚHOHPHQWöZ]QDMGXMÈF\FKVLÚZRELHNFLHhistory ='$5=(1,( OPIS ZLQGRZRQSRSVWDWH =GDU]HQLHZ\NRU]\VW\ZDQHGRREVïXJLSRUXV]DQLDVLÚXĝ\WNRZQLNDPLÚG]\ VWURQDPL API PRACA Z HISTORIĄ 1. )XQNFMDloadContent()Z\NRU]\VWXMHPHWRGÚ M4XHU\.load()ĽSDWU]UR]G]LDïSRGUR]G]LDï ķ:F]\W\ZDQLH]DZDUWRĂFL+70/QDVWURQLH]D SRPRFÈM4XHU\ĵĽZFHOXZF]\WDQLD]DZDUWRĂFL QDVWURQLH 2. 3RNOLNQLÚFLXïÈF]DQDVWÚSXMHZ\ZRïDQLHIXQNFML DQRQLPRZHM JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 3. 6WURQDSU]H]QDF]RQDGRZF]\WDQLDMHVW SU]HFKRZ\ZDQDZ]PLHQQHMRQD]ZLHhref 4. 1DVWÚSXMHXDNWXDOQLHQLHïÈF]\ 5. :\ZRï\ZDQDMHVWIXQNFMDloadContent() SDWU]NURN 6. 0HWRGDpushState()RELHNWXhistory XDNWXDOQLDVWRVKLVWRULL c09/js/history.js $(function() { 0RGHO'20]RVWDïZF]\WDQ\ function loadContent(url){ :F]\WDQLHQRZHM]DZDUWRĂFLQDVWURQLH ĳFRQWHQWĳ ORDG XUOĳFRQWDLQHUĳ KLGH IDGH,Q ĳVORZĳ } $(’nav a’).on(’click’, function(e) { 3URFHGXUDREVïXJLNOLNQLÚFLD e.preventDefault(); 8QLHPRĝOLZLHQLHSU]HMĂFLDQDQRZÈVWURQÚ var href = this.href; 3REUDQLHZDUWRĂFLDWU\EXWXKUHIïÈF]D var $this = $(this); 3U]HFKRZ\ZDQLHïÈF]DZRELHNFLHM4XHU\ $(’a’).removeClass(’current’); 8VXQLÚFLHNODV\FXUUHQW]ïÈF]\ $this.addClass(’current’); 'RGDQLHNODV\FXUUHQW loadContent(href); :\ZRïDQLHIXQNFMLZF]\WDQLH]DZDUWRĂFL history.pushState(’’, $this.text, href); 8DNWXDOQLHQLHKLVWRULL }); ZLQGRZRQSRSVWDWH IXQFWLRQ ^2EVïXJDSU]\FLVNöZZVWHF]GDOHM var path = location.pathname; 3REUDQLHĂFLHĝNLGRVWÚSXGRSOLNX loadContent(path); :\ZRïDQLHIXQNFMLZFHOXZF]\WDQLDVWURQ\ YDUSDJH SDWKVXEVWULQJ ORFDWLRQSDWKQDPHODVW,QGH[2I Ĵĵ $(’a’).removeClass(’current’); 8VXQLÚFLHNODV\FXUUHQW]ïÈF]\ $(’[href=”’ + page + ’”]’).addClass(’current’); 'RGDQLHNODV\FXUUHQW }; }); WYNIK 7. .LHG\Xĝ\WNRZQLNNOLNQLHSU]\FLVNķZVWHF]ĵ OXEķGDOHMĵQDVWÚSXMHZ\ZRïDQLH]GDU]HQLD onpopstate6ïXĝ\RQRGRZ\ZRïDQLDIXQNFML DQRQLPRZHM 8. 3DVHNDGUHVXSU]HJOÈGDUNLZ\ĂZLHWODRGSRZLHGQLÈVWURQÚ]HVWRVXKLVWRULL:ïDĂFLZRĂÊ location.pathnameMHVWZ\NRU]\VW\ZDQDZFHOX SREUDQLDĂFLHĝNLGRVWÚSXGRVWURQ\NWöUDPD ]RVWDÊZF]\WDQD 9. )XQNFMDloadContent()ĽSDWU]NURNĽMHVW Z\ZRï\ZDQDSRQRZQLHDE\SREUDÊZVND]DQÈ VWURQÚ 10. 3RELHUDQDMHVWQD]ZDSOLNXFRSR]ZDODQD XDNWXDOQLHQLHïÈF]\ API SKRYPTY WRAZ Z API :LQWHUQHFLH]QDMG]LHV]VHWNLEH]SïDWQ\FKVNU\SWöZ :LHOH]QLFKSRVLDGD$3,NWöUHWU]HEDVWRVRZDÊ DE\PöFXĝ\ÊGDQHJRVNU\SWX API SKRYPTU WTYCZKI JQUERY ANGULARJS :LHOXSURJUDPLVWöZVWRVXMH ZZLWU\QDFKZïDVQHVNU\SW\ &]DVDPLWRVÈZ]JOÚGQLHSURVWH VNU\SW\SU]H]QDF]RQHGRUHDOL]RZDQLDSRMHG\QF]\FK]DGDñ QDSU]\NïDGVOLGHUOLJKWER[ LVRUWRZDQLHWDEHO =NROHL LQQH QDSU]\NïDGM4XHU\ VÈ ]QDF]QLHEDUG]LHMVNRPSOLNRZDQHLPRJÈE\ÊZ\NRU]\VW\ZDQH GRZLHOXUöĝQ\FKFHOöZ :LHOXSURJUDPLVWöZWZRU]\NRG NWöUHJR]DGDQLHPMHVWUR]EXGRZDPRĝOLZRĂFLRIHURZDQ\FK SU]H]M4XHU\6NU\SW\WHGRGDMÈ PHWRG\UR]V]HU]DMÈFHRELHNW jQueryLVÈ]QDQHMDNRZW\F]NL M4XHU\ $QJXODU-6WRNROHMQDELEOLRWHND -DYD6FULSWDOH]XSHïQLHLQQD QLĝM4XHU\SRQLHZDĝMHMFHOHP MHVWXïDWZLHQLHWZRU]HQLD DSOLNDFMLVLHFLRZ\FK :WHMF]ÚĂFLNVLÈĝNL]RVWDQÈ SU]HGVWDZLRQHGZDURG]DMH VNU\SWöZNWöU\FKNRGPRĝHV] Z\NRU]\VWDÊSRSR]QDQLX$3, VNU\SWX • ]HVWDZZW\F]HNM4XHU\ ]QDQ\FKMDNRM4XHU\8, • VNU\SWRQD]ZLH$QJXODU-6 .LHG\FKFHV]VNRU]\VWDÊ ]ZW\F]NLM4XHU\PXVLV]GRGDÊ QDVWURQLHQDMSLHUZVNU\SW M4XHU\DGRSLHURSöěQLHMVNU\SW ZW\F]NL1DVWÚSQLHZ\ELHUDV] HOHPHQW\ SRGREQLHMDN ZSU]\SDGNXSUDF\]HVWDQGDUGRZ\PLPHWRGDPLM4XHU\ DZW\F]NDSR]ZDODQDXĝ\FLH ]GHğQLRZDQ\FKZQLHMPHWRG :WHQVSRVöEX]\VNXMHV]GRVWÚS GRIXQNFMRQDOQRĂFLQLHGRVWÚSQHM ZRU\JLQDOQ\PVNU\SFLHM4XHU\ -HGQÈ]MHMQDMEDUG]LHMU]XFDMÈF\FKVLÚZRF]\FHFKMHVW PRĝOLZRĂÊX]\VNDQLDGRVWÚSX GR]DZDUWRĂFLLXDNWXDOQLHQLH MHMEH]NRQLHF]QRĂFLWZRU]HQLD NRGXSU]H]QDF]RQHJRGRREVïXJL ]GDU]HñZ\ERUXHOHPHQWöZ OXEXDNWXDOQLDQLD]DZDUWRĂFL HOHPHQWX:W\PUR]G]LDOH PDP\PLHMVFHQDMHG\QLH NUöWNLHZSURZDG]HQLHGR $QJXODU-6FKRÊSRZLQQRRQR SRPöFZSRND]DQLXUöĝQRURGQRĂFLGRVWÚSQ\FKVNU\SWöZ XïDWZLDMÈF\WZRU]HQLH DSOLNDFMLVLHFLRZ\FK SKRYPTY FIRM TRZECICH =DQLPSU]\VWÈSLV]GRWZRU]HQLD ZïDVQHJRVNU\SWXRGDQHM IXQNFMRQDOQRĂFLZDUWRVSUDZG]LÊF]\NWRĂLQQ\MXĝZF]HĂQLHM QLHRSUDFRZDïF]HJRĂWDNLHJR SU]HFLHĝQLHPDVHQVXZ\ZDĝDQLHRWZDUW\FKGU]ZL API 'REU]HMHVWZLÚFVSUDZG]LÊ F]\ • ]QDOH]LRQ\VNU\SWMHVWZPLD• • UÚUHJXODUQLHXDNWXDOQLDQ\ ]QDOH]LRQ\VNU\SWVWRVXMH ]DVDGÚUR]G]LDïXNRGX+70/ RG-DYD6FULSW LVWQLHMÈUHFHQ]MHGRW\F]ÈFH LQWHUHVXMÈFHJR&LÚVNU\SWX :WHQVSRVöEPRĝHV]VLÚ XSHZQLÊF]\ZVNU\SFLH]DVWRVRZDQRQRZRF]HVQHSUDNW\NL LF]\MHVWRQQDGDOXDNWXDOQLDQ\ 7U]HEDUöZQLHĝSDPLÚWDÊĝH SROHFHQLDGRW\F]ÈFHVSRVREX Xĝ\FLDGDQHJRVNU\SWXQLH ]DZV]HVÈRNUHĂODQHPLDQHP $3, JQUERY UI )XQGDFMDM4XHU\SU]\JRWRZDïDZïDVQ\]HVWDZZW\F]HNGODM4XHU\ NWöUH]RVWDï\QD]ZDQHM4XHU\8,:W\F]NLWHPDMÈSRPöFZWZRU]HQLX LQWHUIHMVXXĝ\WNRZQLND NA CZYM POLEGA DZIAŁANIE JQUERY UI? JAK UZYSKAĆ DOSTĘP DO JQUERY UI? M4XHU\8,WR]HVWDZZW\F]HN GODM4XHU\PDMÈF\FKQDFHOX UR]EXGRZÚPRĝOLZRĂFLM4XHU\ RPHWRG\SU]H]QDF]RQHGR WZRU]HQLD $E\Xĝ\ÊM4XHU\8,QDVWURQLH ZSLHUZV]HMNROHMQRĂFLWU]HED GRïÈF]\ÊGRQLHMVNU\SWM4XHU\ DGRSLHURSöěQLHMM4XHU\8, • ZLGĝHWöZ QDSU]\NïDG SDQHOHW\SXDFFRUGLQLNDUW\ • HIHNWöZ SRMDZLDQLHVLÚ • L]QLNDQLHHOHPHQWöZ LQWHUDNFML QDSU]\NïDG IXQNFMDSU]HFLÈJDQLD LXSXV]F]DQLD :W\F]NDM4XHU\8,QLHW\ONR GRVWDUF]DJRWRZ\GRXĝ\FLDNRG -DYD6FULSWDOHUöZQLHĝ]DZLHUD ]HVWDZPRW\ZöZSRPDJDMÈF\FK ZRNUHĂOHQLXZ\JOÈGXZW\F]NL QDVWURQLH :HUVMHVNU\SWXM4XHU\8,VÈ GRVWÚSQHZW\FKVDP\FKVHUZHUDFK&'1ZNWöU\FK]QDMG]LHV] ELEOLRWHNÚM4XHU\-HĝHOL SRWU]HEXMHV]W\ONRQLHZLHONLHJR Z\FLQNDIXQNFMRQDOQRĂFLM4XHU\ 8,PRĝHV]SREUDÊRGSRZLHGQLH IUDJPHQW\VNU\SWX]ZLWU\Q\ http://jqueryui.com/']LÚNL WHPXEÚG]LHV]PLDïPQLHMV]\ SOLN-DYD6FULSWFRVNUDFDF]DV SRELHUDQLDVNU\SWX SKŁADNIA *G\GRïÈF]\V]VNU\SW\M4XHU\ LM4XHU\8,QDVWURQLHVNïDGQLD LFKXĝ\FLDEÚG]LHSRGREQDMDN ZSU]\SDGNX]Z\Nï\FKPHWRG M4XHU\2]QDF]DWRĝHQDMSLHUZ Z\ELHUDV]HOHPHQW\M4XHU\ DQDVWÚSQLHZ\ZRïXMHV]PHWRG\ ]GHğQLRZDQHZHZW\F]FH -DNPRĝHV]VLÚSU]HNRQDÊ GRNXPHQWDFMDM4XHU\8,QLH W\ONRZ\MDĂQLDMDNXĝ\ZDVLÚ PHWRG\-DYD6FULSWLZïDĂFLZRĂFLDOHUöZQLHĝSRND]XMHMDN WZRU]\ÊVWUXNWXUÚNRGX+70/ MHĂOLFKFHV]Z\NRU]\VWDÊZLHOH ZLGĝHWöZLLQWHUDNFMLRIHURZDQ\FKSU]H]M4XHU\8, -HĝHOLFKFHV]X]\VNDÊZLÚNV]È NRQWUROÚQDGZ\JOÈGHPZW\F]HN M4XHU\ZSU]HJOÈGDUFHPRĝHV] Xĝ\ÊQDU]ÚG]LD7KHPH5ROOHU NWöUH]DSHZQLD]QDF]QLH GRNïDGQLHMV]ÈNRQWUROÚQDG Z\JOÈGHPHOHPHQWöZ API PANEL TYPU ACCORDION W JQUERY UI 8WZRU]HQLHSDQHOXW\SX DFFRUGLRQZM4XHU\8,MHVW EDUG]RSURVWH0XVLV]MHG\QLH ZLHG]LHÊ • MDNSU]\JRWRZDÊVWUXNWXUÚ • • NRGX+70/ NWöUHHOHPHQW\SRZLQQ\E\Ê Xĝ\WHZVHOHNWRU]HM4XHU\ MDNLHQDOHĝ\Z\ZRï\ZDÊ PHWRG\M4XHU\8, 1. :RPDZLDQ\PSU]\NïDG]LH NRG+70/GODSDQHOXW\SX DFFRUGLRQ]QDMGXMHVLÚZHOHPHQFLH<div> MHJRDWU\EXWid PDZDUWRĂÊprizesNWöUD]RVWDQLH]DVWRVRZDQDZVNU\SFLH .DĝG\SDQHO]DZLHUD c09/jqui-accordion.html 1 2 3 4 5 6 2. (OHPHQW<h3>GODQDJïöZND NWöU\PRĝQDNOLNQÈÊ HTML ERG\! <div id=”prizes”> <h3>3LHUZV]DQDJURGD</h3> <div><p>3LHUZV]DQDJURGDWR'-,</p></div> <h3>Druga nagroda</h3> <div><p>Druga nagroda to...</p></div> <h3>7U]HFLDQDJURGD</h3> <div><p>7U]HFLDQDJURGDWR</p></div> </div> <script src=”js/jquery-1.9.1.js”></script> <script src=”js/1.10.3/jquery-ui.js”></script> <script> $(function() { $(’#prizes’).accordion(); }); </script> ERG\! 3. (OHPHQW<div>ZUD]]]DZDUWRĂFLÈGDQHJRSDQHOX WYNIK 4. 3U]HG]QDF]QLNLHP]DP\NDMÈF\PERG\!]QDMGXMÈVLÚ SROHFHQLDGRGDMÈFHVNU\SW\ M4XHU\LM4XHU\8, 5. 7U]HFLHOHPHQW<script> ]DZLHUDIXQNFMÚDQRQLPRZÈ XUXFKDPLDQÈSRZF]\WDQLX VWURQ\ 6. :HZQÈWU]ZVSRPQLDQHM IXQNFMLVWDQGDUGRZ\VHOHNWRU M4XHU\Z\ELHUDHOHPHQW <div>]DZLHUDMÈF\SDQHOW\SX DFFRUGLRQ Xĝ\ZDMÈFZW\P FHOXZDUWRĂFLDWU\EXWXid )XQNFMRQDOQRĂÊSDQHOXW\SX DFFRUGLRQMHVWZ\ZRï\ZDQD]D SRPRFÈPHWRG\.accordion() GODZ\EUDQ\FKHOHPHQWöZ API 1LHPXVLV]ZLHG]LHÊZMDNL VSRVöEZW\F]NDM4XHU\Z\NRQXMHVZRMH]DGDQLHRLOHZLHV] MDNÈWU]HEDSU]\JRWRZDÊ VWUXNWXUÚGODNRGX+70/ MDNLHHOHPHQW\WU]HEDZ\EUDÊ ZM4XHU\ MDNZ\ZRïDÊQRZÈPHWRGÚ ]GHğQLRZDQÈZHZW\F]FH M4XHU\ • • • 8ZDJD:U]HF]\ZLVW\FK ZLWU\QDFKLQWHUQHWRZ\FK NRG-DYD6FULSWSRZLQLHQ ]QDMGRZDÊVLÚZRGG]LHOQ\P SOLNXDE\]DFKRZDÊ]DVDGÚ SRG]LDïXRGSRZLHG]LDOQRĂFL :RPDZLDQ\PSU]\NïDG]LHNRG -DYD6FULSWL+70/VÈZMHGQ\P SOLNXFRPDQDFHOXSRND]DQLH MDNQLHZLHONDLORĂÊSUDF\MHVW NRQLHF]QDGRX]\VNDQLDHIHNWX KARTY W JQUERY UI HTML 1 2 3 4 FMTXLWDEVKWPO <div id=”prizes”> <ul> OL!DKUHI ĵWDEĵ!I nagroda</a></li> OL!DKUHI ĵWDEĵ!II nagroda</a></li> OL!DKUHI ĵWDEĵ!III nagroda</a></li> </ul> GLYLG ĵWDEĵ!S!3LHUZV]DQDJURGDWR</p></div> GLYLG ĵWDEĵ!S!Druga nagroda to...</p></div> GLYLG ĵWDEĵ!S!7U]HFLDQDJURGDWR</p></div> </div> <script src=”js/jquery-1.9.1.js”></script> <script src=”js/jquery-ui.js”></script> <script> $(function() { ĳSUL]HVĳ WDEV }); </script> WYNIK .DUW\WRNRQFHSFMDSRGREQD GRSU]HGVWDZLRQHJRZF]HĂQLHM SDQHOXW\SXDFFRUGLRQ 1. .DUW\]QDMGXMÈVLÚZHOHPHQFLH <div>NWöU\EÚG]LHXĝ\W\ZVHOHNWRU]HM4XHU\-HGQDN]DZDUWRĂÊ HOHPHQWXMHVWQLHFRLQQD 2. .DUW\VÈWZRU]RQHQDSRGVWDZLHQLHXSRU]ÈGNRZDQHMOLVW\ ÈF]H]QDMGXMÈFHVLÚZHZQÈWU] NDĝGHJRHOHPHQWXSURZDG]LGR HOHPHQWX<div>]QDMGXMÈFHJRVLÚ ZGDOV]HMF]ÚĂFLVWURQ\LSU]HFKRZXMÈFHJR]DZDUWRĂÊGDQHMNDUW\ 3. =ZUöÊXZDJÚQDWRĝH DWU\EXW\idHOHPHQWöZ<div> PXV]ÈPLHÊZDUWRĂÊGRSDVRZDQÈ GRZDUWRĂFLDWU\EXWXhrefNDUW 3RGRGDQLXVNU\SWöZM4XHU\ LM4XHU\8,QDVWURQLHPDP\ MHV]F]HWU]HFL]QDF]QLN<script> ZUD]]IXQNFMÈDQRQLPRZÈ Z\NRQ\ZDQÈSRZF]\WDQLX PRGHOX'20 4. 6HOHNWRUM4XHU\Z\ELHUDHOHPHQWNWöUHJRZDUWRĂFLÈDWU\EXWX id jest prizes WRMHVWHOHPHQW ]DZLHUDMÈF\NDUW\ 1DVWÚSQLHGOD Z\EUDQHJRHOHPHQWXZ\ZRï\ZDQDMHVWPHWRGDWDEV 3U]HGVWDZLRQDVWUXNWXUD MHVWSRZV]HFKQLHVWRVRZDQD ZZLÚNV]RĂFLZW\F]HNM4XHU\ 1. :F]\WDQLHELEOLRWHNLM4XHU\ 2. :F]\WDQLHZW\F]NL 3. 8UXFKRPLHQLHIXQNFMLDQRQLPRZHMSRZF]\WDQLXVWURQ\ )XQNFMDDQRQLPRZDSR]ZDOD QDZ\EöUHOHPHQWöZM4XHU\ LZ\ZRïDQLHGODQLFKPHWRG\ ]GHğQLRZDQHMZHZW\F]FH M4XHU\'RSUDZLGïRZHJRG]LDïDQLDSHZQHPHWRG\Z\PDJDMÈ SRGDQLDSDUDPHWUöZ :U]HF]\ZLVW\FKZLWU\QDFK LQWHUQHWRZ\FKNRG-DYD6FULSWSRZLQLHQ]QDMGRZDÊVLÚZRGG]LHOQ\PSOLNXDE\]DFKRZDÊ]DVDGÚ SRG]LDïXRGSRZLHG]LDOQRĂFL :RPDZLDQ\PSU]\NïDG]LHNRG -DYD6FULSWL+70/VÈZMHGQ\P SOLNXFRPDQDFHOXSRND]DQLH MDNQLHZLHONDLORĂÊSUDF\MHVW NRQLHF]QDGRX]\VNDQLDHIHNWX API FORMULARZ W JQUERY UI :W\F]NDM4XHU\8,ZSURZDG]DZLHOH NRQWUROHNIRUPXODU]DVLHFLRZHJRFR XïDWZLDXĝ\WNRZQLNRPZSURZDG]DQLH GDQ\FK:W\PSU]\NïDG]LH]DGHPRQVWURZDQRGZLH]QLFK 6XZDN7DNRQWURONDSR]ZDOD Xĝ\WNRZQLNRZLQDZ\EöUZDUWRĂFL OLF]ERZHM]DSRPRFÈVXZDNDNWöU\ PRĝQDSU]HFLÈJDÊ3RND]DQ\WXWDMVXZDNPDGZDXFKZ\W\FRXPRĝOLZLD XVWDZLHQLH]DNUHVXPLÚG]\GZRPD OLF]EDPL-DNPRĝHV]]REDF]\ÊSR SUDZHMVWURQLHNRG+70/WZRU]ÈF\ VXZDNPDGZDNRPSRQHQW\ 1. =Z\NïHSROHWHNVWRZHLHW\NLHWÚ SU]H]QDF]RQHGRWUDG\F\MQHJR ZSURZDG]HQLDZDUWRĂFLOLF]ERZHM 2. 'RGDWNRZ\HOHPHQW<div> SU]HFKRZXMÈF\VXZDNZLGRF]Q\ QDVWURQLH c09/jqui-form.html 1 2 3 HTML ERG\! <h2>=QDMGěSRNöMZKRWHOX</h2> ... <p id=”price”> ODEHOIRU ĵDPRXQWĵ!=DNUHVFHQODEHO! <input type=”text” id=”amount” /> </p> <div id=”price-range”></div> <p> ODEHOIRU ĵDUULYDOĵ!'DWDSU]\E\FLDODEHO! <input type=”text” id=”arrival” /> </p> LQSXWW\SH ĵVXEPLWĵYDOXH ĵ=QDMGěKRWHOĵ! <script src=”js/jquery-1.9.1.js”></script> <script src=”js/jquery-ui.js”></script> <script src=”js/form-init.js”></script> ERG\! WYNIK .RQWURONDZ\ERUXGDW\.RQWURONDWD SR]ZDODQDZ\EöUGDW\]Z\VNDNXMÈFHJRNDOHQGDU]D']LÚNLWHPXPDV] SHZQRĂÊĝHGDWDZ\EUDQDSU]H] Xĝ\WNRZQLND]RVWDQLHZHZïDĂFLZ\P IRUPDFLHSU]HND]DQDVNU\SWRZL 3. 7RMHVWSRSURVWXSROHWHNVWRZHĽ QLHZ\PDJDĝDGQ\FKGRGDWNRZ\FK ]QDF]QLNöZ 3U]HG]QDF]QLNLHP]DP\NDMÈF\P ERG\!]QDMGXMÈVLÚWU]\HOHPHQW\ <script>3LHUZV]\SRZRGXMHZF]\WDQLHVNU\SWXM4XHU\GUXJLVNU\SWX M4XHU\8,QDWRPLDVWWU]HFLVNU\SWX ]DZLHUDMÈFHJRSROHFHQLDNRQğJXUXMÈFHGZLHZ\PLHQLRQHZF]HĂQLHM NRQWURONLIRUPXODU]DVLHFLRZHJR VSöMU]QDVWURQÚSRSUDZHM -HĝHOL REVïXJD-DYD6FULSWQLHMHVWZïÈF]RQD NRQWURONLWHZ\JOÈGDMÈMDN]Z\NïH NRQWURONLIRUPXODU]DEH]XVSUDZQLHñ GRGDZDQ\FKSU]H]M4XHU\ API :LÚNV]RĂÊVNU\SWöZM4XHU\ ]QDMGXMHVLÚZHZQÈWU]IXQNFML .ready()OXEMHMVNUöWX MDNSRND]DQRQDQDVWÚSQHM VWURQLH :UR]G]LDOHGRZLHG]LDïHĂVLÚĝHJZDUDQWXMH WRZ\NRQDQLHVNU\SWXGRSLHUR SRZF]\WDQLXPRGHOX'20 -HĝHOLGRïÈF]\V]ZLÚFHMQLĝ W\ONRMHGQÈZW\F]NÚM4XHU\ ]NWöU\FKNDĝGDXĝ\ZDPHWRG\.ready()WRQLHPXVLV] SRZWDU]DÊZ\PLHQLRQHM PHWRG\.RGGODZV]\VWNLFK ZW\F]HNPRĝQDXPLHĂFLÊ ZMHGQHMPHWRG]LH.ready() 1. .RG-DYD6FULSW]QDMGXMHVLÚ ZVNUöFLHGODPHWRG\M4XHU\ .ready()L]DZLHUDSROHFHQLD SU]H]QDF]RQHGRNRQğJXUDFML REXNRQWUROHNIRUPXODU]D 2. $E\]PLHQLÊSROHWHNVWRZH ZNRQWURONÚZ\ERUXGDW\ WU]HEDMHG\QLHZ\EUDÊWRSROH WHNVWRZHDQDVWÚSQLHZ\ZRïDÊ PHWRGÚdatepicker() 3. %XIRURZDQLHGDQ\FK ZHMĂFLRZ\FKZSRVWDFLFHQ\ 4. 6XZDNXĝ\ZDQRWDFML OLWHUDïXRELHNWXGRXVWDZLHQLD ZïDĂFLZRĂFLPHWRG\.slider() ĽSDWU]SRQLĝHM c09/js/form-init.js JAVASCRIPT 1 $(function() { 2 $(’#arrival’).datepicker(); 3 var $amount = $(’#amount’); var $range = $(’#price-range’); 4 5 =PLDQDSRODWHNVWRZHJRZNRQWURONÚ-48,GDWHSLFNHU %XIRURZDQLHGDQ\FKZHMĂFLRZ\FK FHQD %XIRURZDQLHGLY!GOD]DNUHVXFHQ\ $(’#price-range’).slider({ =PLDQDSROD]DNUHVXFHQ\QDVXZDN UDQJHWUXH-HĝHOLWR]DNUHVNRQLHF]QHVÈGZDXFKZ\W\ PLQ:DUWRĂÊPLQLPDOQD PD[:DUWRĂÊPDNV\PDOQD YDOXHV>@:DUWRĂFLXĝ\ZDQHSRGF]DVZF]\W\ZDQLDVWURQ\ VOLGHIXQFWLRQ HYHQWXL ^ 3RXĝ\FLXVXZDNDQDOHĝ\XDNWXDOQLÊ HOHPHQWDPRXQW DPRXQWYDO XLYDOXHV>@ĳ]ïĳXLYDOXHV>@ĳ]ïĳ } }); $amount 8VWDZLHQLHZDUWRĂFLSRF]ÈWNRZ\FKGODHOHPHQWXDPRXQW YDO UDQJHVOLGHU ĳYDOXHVĳ ĳ]ïĳ 0QLHMV]DZDUWRĂÊ]DNUHVXDQDVWÚSQLHĴ]ïĵ ĳĳUDQJHVOLGHU ĳYDOXHVĳ ĳ]ïĳ :LÚNV]DZDUWRĂÊ]DNUHVXDQDVWÚSQLHĴ]ïĵ }); 5. 3RGF]DVZF]\W\ZDQLDIRUPXODU]DSROHWHNVWRZHZ\ĂZLHWOD ZDUWRĂÊMDNRWHNVWDE\SRGDÊ SRF]ÈWNRZ\]DNUHVVXZDND :DUWRĂÊWHJRSRODWHNVWRZHJR VNïDGDVLÚ] a) PQLHMV]HMZDUWRĂFL]DNUHVX SRNWöUHM]QDMGXMÈVLÚ]QDNL]ï b) PLQXVDLZLÚNV]HMZDUWRĂFL ]DNUHVXSRNWöUHM]QDMGXMÈVLÚ ]QDNL]ï 6NU\SWQRVLQD]ZÚform-init.js 3URJUDPLĂFLEDUG]RF]ÚVWR VWRVXMÈLQLWMDNRVNUöWRGLQLFMDFMLDRPDZLDQ\VNU\SWMHVW Z\NRU]\VW\ZDQ\GRSRF]ÈWNRZHM NRQğJXUDFMLIRUPXODU]D .LHG\ZW\F]NDM4XHU\PDXVWDZLHQLDUöĝQLÈFHVLÚZWUDNFLHNDĝGHJR Xĝ\FLDEDUG]RF]ÚVWRWDNLHXVWDZLHQLDVÈSU]HND]\ZDQHMDNROLWHUDï RELHNWX0RĝHV]WR]REDF]\ÊZSU]\SDGNXPHWRG\.slider()NWöUD RWU]\PXMHZLHOHSDUDPHWUöZ :$¥&,:2¥m OPIS range :DUWRĂÊERRORZVNDQDGDMÈFDVXZDNRZLGZDXFKZ\W\ DQLHSRMHG\QF]ÈZDUWRĂÊ min :DUWRĂÊPLQLPDOQDGODVXZDND max :DUWRĂÊPDNV\PDOQDGODVXZDND values 7DEOLFD]DZLHUDMÈFDGZLHZDUWRĂFLGRZVND]DQLDSRF]ÈWNRZHJR]DNUHVXVXZDNDSRSLHUZV]\PZF]\WDQLXVWURQ\ METODA OPIS slider() 8DNWXDOQLDSROHWHNVWRZHZ\ĂZLHWODMÈFHZDUWRĂFL WHNVWRZHGODVXZDND RGSRZLHGQLHSU]\NïDG\]QDMG]LHV] ZGRNXPHQWDFML API ANGULARJS $QJXODU-6WRIUDPHZRUNXïDWZLDMÈF\WZRU]HQLHDSOLNDFMLVLHFLRZ\FK :V]F]HJöOQRĂFLMHVWXĝ\WHF]Q\SRGF]DVWZRU]HQLDDSOLNDFMLNWöUH]DSLVXMÈ RGF]\WXMÈXDNWXDOQLDMÈLXVXZDMÈGDQHZED]LHGDQ\FK]QDMGXMÈFHMVLÚ ZVHUZHU]H )UDPHZRUN$QJXODU-6RSDUWRQD Z]RUFX09& DQJmodel-view-controllerF]\OLPRGHOZLGRNNRQWUROHU 7DNQDSUDZGÚMHVW WRRGPLDQDZ]RUFD09&DQLH ĂFLVï\09&$E\PöFXĝ\ZDÊ $QJXODU-6ZSURMHNFLHQDMSLHUZ WU]HEDGRGDÊVNU\SWangular. jsGRVWURQ\NWöU\QDVWÚSQLH XGRVWÚSQLDSHZQHQDU]ÚG]LD SRGREQLHMDNZSU]\SDGNX M4XHU\ WIDOK :LGRN2]QDF]DWRFR ZLG]LXĝ\WNRZQLN:DSOLNDFML VLHFLRZHMMHVWWRVWURQD+70/ $QJXODU-6SR]ZDODQDWZRU]HQLHV]DEORQöZZUD]]PLHMVFDPL SU]\JRWRZDQ\PLGODSHZQ\FK URG]DMöZ]DZDUWRĂFL-HĝHOL Xĝ\WNRZQLN]PLHQLZDUWRĂFL ZZLGRNX]RVWDQÈZ\NRQDQH SROHFHQLD (1)PDMÈFHQDFHOX XDNWXDOQLHQLHPRGHOX 'ODW\FKVDP\FKGDQ\FK PRJÈLVWQLHÊUöĝQHZLGRNLQD SU]\NïDGRGG]LHOQHGODXĝ\WNRZQLNöZLDGPLQLVWUDWRUöZ 440 API &HOHP]DVWRVRZDQLDZ]RUFD09&MHVWUR]G]LHOHQLHSRV]F]HJöOQ\FK F]ÚĂFLDSOLNDFMLVLHFLRZHMWDNMDNSURJUDPLĂFLRGG]LHODMÈ]DZDUWRĂÊ +70/ RGVSRVREXMHMSUH]HQWDFML &66 LVSRVREXG]LDïDQLD -DYD6FULSW :WHMNVLÈĝFHQLHPDZ\VWDUF]DMÈFHMLORĂFLPLHMVFDQDGRNïDGQH RPöZLHQLH$QJXODU-6DOHSU]HGVWDZLRQ\EÚG]LHSU]\NïDGVNU\SWX ]$3,DWDNĝHWDNLHNRQFHSFMHMDNSRGHMĂFLH09&Xĝ\FLHV]DEORQöZ RUD]GRïÈF]DQLHGDQ\FK)UDPHZRUN$QJXODU-6RUD]GRNXPHQWDFMÚ MHJRSHïQHJR$3,]QDMG]LHV]ZZLWU\QLHhttps://angularjs.org/ WidokMODEL :LGRN0RGHO (kontroler). .RQWUROHUMHVWRGSRZLHG]LDOQ\ ]DXDNWXDOQLHQLHZLGRNXSRZ\VWÈSLHQLX]PLDQZPRGHOXRUD] ]DXDNWXDOQLHQLHPRGHOXJG\ Z\VWÈSLÈMDNLHNROZLHN]PLDQ\ ZZLGRNX=DGDQLH]DFKRZDQLD V\QFKURQL]DFMLPLÚG]\ZLGRNLHP LPRGHOHPQRVLQD]ZÚGRïÈF]DQLDGDQ\FK 1DSU]\NïDGXDNWXDOQLHQLHIRUPXODU]DVLHFLRZHJRZZLGRNX SRZRGXMHRG]ZLHUFLHGOHQLHW\FK ]PLDQZZLGRNXRUD]XDNWXDOQLHQLHVHUZHUD MODEL 0RGHO:DSOLNDFMLVLHFLRZHM PRGHOMHVWQDMF]ÚĂFLHM SU]HFKRZ\ZDQ\ZED]LH GDQ\FKL]DU]ÈG]DQ\SU]H]NRG G]LDïDMÈF\SRVWURQLHVHUZHUD .RGWHQPRĝHX]\VNDÊGRVWÚS LXDNWXDOQLDÊPRGHO .LHG\GRMG]LHGRXDNWXDOQLHQLD PRGHOXSRZLDGRPLHQLD R]PLDQDFK VÈSU]HND]\ZDQHGRNRQWUROHUD7HLQIRUPDFMH PRJÈE\ÊSU]HND]DQHWDNĝH GRZLGRNXDE\]DSHZQLÊMHJR DNWXDOQRĂÊ UŻYCIE ANGULARJS HTML c09/angular-introduction.html '2&7<3(KWPO! <html ng-app> <head> ... VFULSWVUF ĵKWWSVDMD[JRRJOHDSLVFRPDMD[ OLEVDQJXODUMVDQJXODUPLQMVĵ!VFULSW! </head> ERG\!... <form> 'REU! <input ng-model=”name”W\SH ĵWH[Wĵ!EU! :LDGRPRĂÊEU! <textarea ng-model=”message”></textarea> LQSXWW\SH ĵVXEPLWĵYDOXH ĵZ\ĂOLMZLDGRPRĂÊĵ! </form> ... <div class=”postcard”> <div>{{ name }}</div> <p>{{ message }}</p> </div> ... ERG\! </html> WYNIK 'RRWU]\PDQLDZ\PLHQLRQHJRHIHNWXQLHSRWU]HED ĝDGQHJRGRGDWNRZHJRNRGX-DYD6FULSW1DWRPLDVW X]\VNDQLHWHJRHIHNWXZM4XHU\Z\PDJDZ\NRQDQLDSRQLĝV]\FKF]WHUHFKNURNöZ 1. 8WZRU]HQLHSURFHGXU\REVïXJL]GDU]HñGOD HOHPHQWöZIRUPXODU]DVLHFLRZHJR :SU]HGVWDZLRQ\PSU]\NïDG]LHSRELHUDQDMHVW]DZDUWRĂÊHOHPHQWöZ <input>L<textarea>DQDVWÚSQLH ]DSLV\ZDQDZLQQHMF]ÚĂFLVWURQ\ ZSOLNX+70/QRZHPLHMVFDVÈ R]QDF]RQHSRGZöMQ\PLQDZLDVDPL NODPURZ\PL 3U]HGHZV]\VWNLPWU]HEDGRGDÊ VNU\SW$QJXODU-60RĝQDJR SU]HFKRZ\ZDÊORNDOQLHOXEXĝ\Ê ZHUVML]QDMGXMÈFHMVLÚZ*RRJOH &'1'RSöNLQLHSR]QDV]OHSLHM IUDPHZRUND$QJXODU-6VNU\SWWDNL GRïÈF]DMZHOHPHQFLH<head> =ZUöÊXZDJÚQDQRZH]QDF]QLNL ZNRG]LH+70/6ÈWRDWU\EXW\ UR]SRF]\QDMÈFHVLÚRGng- VNUöW R]QDF]DMÈF\$QJXODU-6 1RV]È RQHQD]ZÚG\UHNW\Z3LHUZV]È G\UHNW\ZÚ]QDMG]LHV]Z]QDF]QLNX RWZLHUDMÈF\P<html>QDWRPLDVW NROHMQHZHOHPHQWDFKIRUPXODU]D :DUWRĂÊDWU\EXWXng-model ZSRODFKWHNVWRZ\FKGRSDVRZXMH ZDUWRĂFL]QDMGXMÈFHVLÚZSRGZöMQ\FKQDZLDVDFKNODPURZ\FK $QJXODU-6automatycznieSRELHUD ]DZDUWRĂÊHOHPHQWöZIRUPXODU]D LZVWDZLDMÈQDVWURQLHZPLHMVFX ZNWöU\P]QDMGXMÈVLÚRGSRZLHGQLHQDZLDV\NODPURZH 2. 8ĝ\FLHSU]\JRWRZDQHMSURFHGXU\GRSREUDQLD ]DZDUWRĂFLHOHPHQWöZ 3. :\EöUZÚ]ïöZQRZ\FKHOHPHQWöZ 4. 8PLHV]F]HQLHGDQ\FK QDVWURQLH API 441 WIDOK I MODEL :W\PSU]\NïDG]LH]ZUöÊXZDJÚQDSOLNangular-controller.js8ĝ\ZDRQIXQNFMLNRQVWUXNWRUD GRXWZRU]HQLDRELHNWXRQD]ZLHBasketCtrl 2ELHNWWHQMHVWQD]\ZDQ\NRQWUROHUHP LQDF]HM :LGRN0RGHO -DNRDUJXPHQWRWU]\PXMHLQQ\ RELHNW$scope:ïDĂFLZRĂFLRELHNWX$scopeVÈ XVWDZLDQHZIXQNFMLNRQVWUXNWRUD 1. =ZUöÊXZDJÚĝHQD]ZDRELHNWX BasketCtrl) MHVWGRSDVRZDQDGRZDUWRĂFLDWU\EXWX ng-controllerZ]QDF]QLNXRWZLHUDMÈF\P WDEOH!:RPDZLDQ\PSU]\NïDG]LHQLHNRU]\VWDP\]ED]\GDQ\FKDZLÚFNRQWUROHUEÚG]LHG]LDïDï UöZQLHĝZFKDUDNWHU]HPRGHOXLZVSöïG]LHOLïGDQH ]ZLGRNLHP 3OLN+70/ ZLGRN SRELHUDGDQH]RELHNWX BasketCtrlZNRQWUROHU]H-DYD6FULSW=DXZDĝĝH ZNRG]LH+70/QD]Z\XMÚWHZSRGZöMQHQDZLDV\ NODPURZH QDSU]\NïDG{{ cost }}L{{ qty }}) VÈGRSDVRZDQHGRZïDĂFLZRĂFLRELHNWX$scope Z-DYD6FULSW 3OLN+70/MHVWWHUD]QD]\ZDQ\V]DEORQHP SRQLHZDĝZ\ĂZLHWOLGDQH]QDMGXMÈFHVLÚZRGSRZLDGDMÈF\PPXNRQWUROHU]H1D]Z\ZQDZLDVDFK NODPURZ\FKVÈMDN]PLHQQHGRSDVRZXMÈFHGDQH ZRELHNFLH*G\E\RELHNW-DYD6FULSWPLDïLQQH ZDUWRĂFLWR]RVWDï\E\RQHZ\ĂZLHWORQHSU]H]NRG ZSOLNX+70/ c09/angular-controller.html 1 2 3 '2&7<3(KWPO! <html ng-app> <head> <title>-DYD6FULSW DPSM4XHU\UR]G]LDï</title> VFULSWVUF ĵKWWSVDMD[JRRJOHDSLVFRPDQJXODUPLQMVĵ!VFULSW! <script src=”js/angular-controller.js”></script> <link rel=”stylesheet” href=”css/c09.css”> </head> ERG\! WDEOHng-controller=”BasketCtrl”> <tr><td>%LOHW</td><td>{{ description }}</td></tr> <tr><td>.RV]W</td><td>${{ cost }}</td></tr> <tr><td>,ORĂÊWG!WG!LQSXWW\SH ĵQXPEHUĵng-model=”qty”></td></tr> <tr><td>:DUWRĂÊ</td><td>{{qty * cost | currency}}</td></tr> WDEOH!... ERG\! </html> c09/js/angular-controller.js 1 2 3 HTML function BasketCtrl($scope) { $scope.description = ’pojedynczy’; VFRSHFRVW $scope.qty = 1; } 442 API JAVASCRIPT ZAKRES I DOŁĄCZANIE DANYCH 2. ,VWQLHMHUöZQLHĝPRĝOLZRĂÊREOLF]HQLDZDUWRĂFL Z\UDĝHQLD]QDMGXMÈFHJRVLÚZHZQÈWU]QDZLDVöZ NODPURZ\FK:NURNXZV]DEORQLHREOLF]RQD ]RVWDMHZDUWRĂÊF]ÚĂFLRZDNWöUDQDVWÚSQLHMHVW IRUPDWRZDQDMDNRZDUWRĂÊSLHQLÚĝQD&RZLÚFHM SRXDNWXDOQLHQLXNROXPQ\LORĂFLZIRUPXODU]X PRGHOGDQ\FK ZRELHNFLH-DYD6FULSW ]RVWDQLH XDNWXDOQLRQ\REOLF]RQÈZDUWRĂFLÈ6SUöEXM ]PLHQLÊZDUWRĂFLZSOLNX-DYD6FULSWDQDVWÚSQLH RGĂZLHĝ\ÊGRNXPHQW+70/DE\]REDF]\ÊMDN WRG]LDïD2WU]\PXMHV]SU]\NïDGWDN]ZDQHJR GRïÈF]DQLDGDQ\FK'DQH]QDMGXMÈFHVLÚZSOLNX -DYD6FULSWVÈGRïÈF]DQHGRGRNXPHQWX+70/LQD RGZUöW-HĝHOLNRQWUROHUVLÚ]PLHQLZLGRN]RVWDQLH XDNWXDOQLRQ\:SU]\SDGNX]PLDQ\ZLGRNX QDVWÈSLXDNWXDOQLHQLHNRQWUROHUD -DNPRĝHV]]REDF]\ÊIUDPHZRUN$QJXODU-6MHVW V]F]HJöOQLHXĝ\WHF]Q\SRGF]DVZF]\W\ZDQLDGR ZLGRNXGDQ\FKSRFKRG]ÈF\FK]RGG]LHOQHJRSOLNX 6WURQDPRĝHPLHÊZLHOHNRQWUROHUöZDNDĝG\ ]QLFKZïDVQ\]DNUHV:NRG]LH+70/DWU\EXW ng-controllerMHVWZ\NRU]\VW\ZDQ\ZHOHPHQFLH GR]GHğQLRZDQLD]DNUHVXGDQHJRNRQWUROHUD -HVWWRSRGREQHGRNRQFHSFML]DNUHVX]PLHQQHM 3RV]F]HJöOQHHOHPHQW\PRJÈPLHÊUöĝQHNRQWUROHU\ QDSU]\NïDGStoreCtrl NWöUHEÚGÈ]DZLHUDï\ ZïDĂFLZRĂÊRQD]ZLHdescription3RQLHZDĝ ]DNUHVGRW\F]\W\ONRGDQHJRHOHPHQWXZïDĂFLZRĂÊ descriptionNRQWUROHUDPRĝHE\ÊXĝ\ZDQDW\ONR Z]DNUHVLHWHJRNRQWUROHUD WYNIK API POBIERANIE DANYCH Z ZEWNĄTRZ :W\PSU]\NïDG]LHNRQWUROHU SOLN-DYD6FULSW SRELHUDPRGHO GDQH-621 ]SOLNX]QDMGXMÈFHJR VLÚZVHUZHU]H:DSOLNDFMLVLHFLRZHMGDQH-621 ]Z\NOHEÚGÈSRFKRG]Lï\]ED]\GDQ\FK'DQHWH VïXĝÈGRXDNWXDOQLHQLDZLGRNXZ+70/ $E\SREUDÊGDQH$QJXODU-6Z\NRU]\VWXMHWDN ]ZDQÈXVïXJÚ $http:SOLNXangular.jsNRGXĝ\ZDRELHNWX;0/+WWS5HTXHVWGRZ\NRQDQLDĝÈGDñ $MD[ SRGREQ\FKGRSRND]DQ\FKZUR]G]LDOH 1. ¥FLHĝNDGRVWÚSXGRSOLNX-621MHVWZ]JOÚGQD GODV]DEORQX+70/DnieSOLNX-DYD6FULSW SRPLPRIDNWXMHVW]DSLVDQLDZNRG]LH-DYD6FULSW 3RGREQLHMDNPHWRGD.ajax()ZM4XHU\WDNĝHGOD XVïXJL$httpLVWQLHMÈSHZQHVNUöW\XïDWZLDMÈFH Z\NRQ\ZDQLHĝÈGDñ:FHOXSREUDQLDGDQ\FK Z\NRU]\VW\ZDQHVÈPHWRG\get()post()Ljsonp() GRXVXQLÚFLDGDQ\FKVïXĝ\PHWRGDdelete()DGR XWZRU]HQLDQRZ\FKUHNRUGöZPHWRGDput():RPDZLDQ\PSU]\NïDG]LHXĝ\ZDQDMHVWPHWRGDget() c09/angular-external-data.html 5 WDEOHQJFRQWUROOHU ĵ7LPHWDEOH&WUOĵ> <tr><th>godzina</th><th>W\WXï</th><th>opis</th></tr> <tr ng-repeat=”session in sessions”> <td>{{ session.time }}</td> <td>{{ session.title }}</td> <td>{{ session.detail }}</td> </tr> WDEOH! c09/js/angular-external-data.js 1 2 3 JAVASCRIPT IXQFWLRQ7LPHWDEOH&WUO VFRSHKWWS ^ $http.get(’js/items.json’) .success(function(data) { $scope.sessions = data.sessions; }) .error(function(data) { console.log(’error’) }); :\VWÈSLïEïÈGZDUWRZ\ĂZLHWOLÊXĝ\WNRZQLNRZLSU]\MD]Q\NRPXQLNDW } c09/js/items.json 4 HTML JAVASCRIPT { ĴVHVVLRQVĵ> ^ĴWLPHĵĴĵĴWLWOHĵĴ:SURZDG]HQLHGRPRGHORZDQLD'ĵĴGHWDLOĵĴ3U]\MGěĵ` ^ĴWLPHĵĴĵĴWLWOHĵĴ&LUFXLW+DFNLQJĵĴGHWDLOĵĴ:(OHFWUR7HQWĵ` ^ĴWLPHĵĴĵĴWLWOHĵĴ=DEDZ\]$UGXLQRĵĴGHWDLOĵĴ3U]HNRQDMVLÚĵ` ] } 444 API ITERACJA PRZEZ WYNIK 2. -HĝHOLĝÈGDQLH]SRZRG]HQLHPSRELHU]HGDQH WR]RVWDQLHZ\ZRïDQDIXQNFMDsuccess():WDNLP SU]\SDGNXR]QDF]DWRĝHRELHNW$scopeRWU]\PD GDQHSRFKRG]ÈFH]RELHNWXJSON3R]ZDODWR V]DEORQRZLZ\ĂZLHWOLÊGDQH 3. -HĝHOLĝÈGDQLH]DNRñF]\VLÚQLHSRZRG]HQLHP ]RVWDQLHZ\ZRïDQDIXQNFMDerror()-HM]DGDQLHPMHVWZ\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH :RPDZLDQ\PSU]\NïDG]LHIXQNFMDWD SR]QDV]MÈ ZUR]G]LDOHZSRGUR]G]LDOHķ1DU]ÚG]LDSURJUDPLVW\F]QHZSU]HJOÈGDUNDFKLNRQVROD-DYD6FULSWĵ LPSOLNXMHXPLHV]F]HQLHNRPXQLNDWXZNRQVROL 4. 'DQH-621]DZLHUDMÈZLHOHRELHNWöZZ\ĂZLHWODQ\FKQDVWURQLH=ZUöÊXZDJÚQDEUDNSÚWOL -DYD6FULSWZNRQWUROHU]H=DPLDVWWHJRLWHUDFMD SU]H]RELHNW\MHVWSU]HSURZDG]DQDZV]DEORQLH +70/ ZLGRNX 5. '\UHNW\ZDng-repeatZ]QDF]QLNXRWZLHUDMÈF\P<tr>ZVND]XMHĝHZLHUV]WDEHOLSRZLQLHQ G]LDïDÊMDNSÚWOD2]QDF]DWRLWHUDFMÚSU]H]ZV]\VWNLHRELHNW\WDEOLF\sessionsRUD]XWZRU]HQLH QRZHJRZLHUV]DWDEHOLGODNDĝGHJR]QLFK :NRG]LH+70/ZDUWRĂFLÈG\UHNW\Z\ng-repeat MHVWsession in sessions: • sessionsGRSDVRZXMHGDQH-621RGSRZLDGD • -HĝHOLDWU\EXWng-repeatXĝ\ZD]XSHïQLHLQQ\FK QD]ZQLĝsessionWRZDUWRĂÊZQDZLDVDFKNODPURZ\FKZNRG]LH+70/EÚG]LHPXVLDïDE\Ê]PLHQLRQDDE\RG]ZLHUFLHGOLÊWÚQD]ZÚ-HĂOLPDP\ QDSU]\NïDGSROHFHQLHlecture in sessions NRGZQDZLDVDFKNODPURZ\FKSRZLQLHQPLHÊ QDVWÚSXMÈFÈSRVWDÊ {{ lecture.time }}, {{ lecture.title }} itd. 7RW\ONREDUG]RNUöWNLHZSURZDG]HQLHGR$QJXODU-6DOHGHPRQVWUXMHSHZQHSRSXODUQHWHFKQLNL VWRVRZDQHSRGF]DVXĝ\FLD-DYD6FULSWGRWZRU]HQLD DSOLNDFMLLQWHUQHWRZ\FK • Z\NRU]\VWDQLHV]DEORQöZSRELHUDMÈF\FK • • WYNIK QD]ZLHRELHNWX sessionWRLGHQW\ğNDWRUZ\NRU]\VW\ZDQ\ ZV]DEORQLHGRZVND]DQLDQD]Z\SRMHG\QF]HJR RELHNWXZRELHNFLHsessions. ]DZDUWRĂÊ]NRGX-DYD6FULSWLXDNWXDOQLDMÈF\FK VWURQÚ+70/ Xĝ\FLHIUDPHZRUNöZRSDUW\FKQDZ]RUFX 09&LSU]H]QDF]RQ\FKGRWZRU]HQLDDSOLNDFML VLHFLRZ\FK Xĝ\FLHELEOLRWHNFRSR]ZDODSURJUDPLVWRP XQLNQÈÊNRQLHF]QRĂFLWZRU]HQLDGXĝHMLORĂFL NRGX :LÚFHMLQIRUPDFMLQDWHPDW IUDPHZRUND$QJXODU-6]QDMG]LHV] ZZLWU\QLHhttps://angularjs.org/. 3RSXODUQÈDOWHUQDW\ZÈGOD $QJXODU-6MHVW%DFNERQH http://backbonejs.org/. API 445 API PLATFORM :LHOHGXĝ\FKZLWU\QLQWHUQHWRZ\FKXGRVWÚSQLD$3,SR]ZDODMÈFHQDX]\VNDQLH GRVWÚSXGRGDQ\FKZLWU\Q\LLFKXDNWXDOQLHQLH'RW\F]\WRPLÚG]\LQQ\PL VHUZLVöZ)DFHERRN*RRJOHL7ZLWWHU CO MOŻNA ZROBIĆ? JAK UZYSKAĆ DOSTĘP? SKŁADNIA .DĝGDZLWU\QDRIHUXMHLQQ\ ]HVWDZPRĝOLZRĂFLQDSU]\NïDG :LQWHUQHFLHPRĝHV]X]\VNDÊ GRVWÚSGRZLHOX$3,SODWIRUP SU]H]XPLHV]F]HQLHQDVWURQLH VNU\SWöZGRVWDUF]DQ\FKSU]H] WZöUFöZSODWIRUP\7DNLVNU\SW ]Z\NOHWZRU]\RELHNW SRGREQLH MDNVNU\SWM4XHU\GRGDMHRELHNW jQuery 1RZ\RELHNWRIHUXMH PHWRG\LZïDĂFLZRĂFLNWöUH PRĝQDZ\NRU]\VWDÊZFHOX X]\VNDQLDGRVWÚSXGRGDQ\FK QDSODWIRUPLHDF]DVHPWDNĝH GRLFKXDNWXDOQLHQLD 6NïDGQLDVWRVRZDQDZ$3, ]DOHĝ\RGSODWIRUP\=UHJXï\ MHVWXGRNXPHQWRZDQDWDEHODPL RELHNWöZPHWRGLZïDĂFLZRĂFL SRGREQLHMDNQDSRF]ÈWNXWHJR UR]G]LDïX&]DVDPLGRVWDUF]DQH VÈUöZQLHĝSU]\NïDGRZH IUDJPHQW\NRGXNWöUHGHPRQVWUXMÈ]DGDQLDZ\NRQ\ZDQH]D SRPRFÈGDQHJR$3, SRGREQLH MDNZF]HĂQLHMSRND]DQRZW\P UR]G]LDOH • )DFHERRNXGRVWÚSQLDWDNLH • • IXQNFMHMDNXPRĝOLZLHQLH Xĝ\WNRZQLNRPSROXELHQLDZLWU\Q\GRGDZDQLHNRPHQWDU]\ RUD]SURZDG]HQLHG\VNXVML ZZLGĝHFLH)DFHERRNDQDWHM ZLWU\QLH 0DS\*RRJOHSR]ZDODMÈXĝ\WNRZQLNRPQDXPLHV]F]DQLH ZLHOXUöĝQ\FKURG]DMöZPDS QDLFKZïDVQ\FKVWURQDFK 7ZLWWHUSR]ZDODXĝ\WNRZQLNRPQDZ\ĂZLHWODQLH QDMQRZV]\FKNRPXQLNDWöZ WZHHWöZ QDLFKZïDVQ\FK VWURQDFKOXEWHĝQDZ\V\ïDQLH QRZ\FKNRPXQLNDWöZ 3U]H]XGRVWÚSQLHQLHIXQNFMRQDOQRĂFLZïDVQ\FKSODWIRUP WZRU]ÈFHMHğUP\UHNODPXMÈ VZRMHZLWU\Q\DWDNĝHVWDUDMÈ VLÚSU]\FLÈJDÊXĝ\WNRZQLNöZ 7R]NROHLR]QDF]DZ]URVW DNW\ZQRĂFLZZLWU\QLHFR SU]HNïDGDVLÚQDZLÚNV]H]\VNL ]MHMIXQNFMRQRZDQLD 0XVLV]PLHÊĂZLDGRPRĂÊĝH ğUP\PRJÈ]PLHQLÊVSRVöE X]\VNDQLDGRVWÚSXGR$3,OXE MHJRPRĝOLZRĂFL 446 API :LÚNV]RĂÊZLWU\QXGRVWÚSQLDMÈF\FK$3,RIHUXMHWDNĝH GRNXPHQWDFMÚREMDĂQLDMÈFÈ ]SURVW\PLSU]\NïDGDPL Xĝ\FLH RELHNWöZPHWRGLZïDĂFLZRĂFL :SU]\SDGNXZLÚNV]\FKZLWU\Q F]DVHPGRVWÚSQHVÈVWURQ\ ]NWöU\FKPRĝHV]VNRSLRZDÊ NRGDQDVWÚSQLHZNOHLÊJRQD VZRLFKVWURQDFKQDZHWEH] NRQLHF]QRĂFLDQDOL]RZDQLD$3, )DFHERRN*RRJOHL7ZLWWHU ZSURZDG]Lï\]PLDQ\ZVSRVREDFKGRVWÚSXGR$3,orazMHJR Xĝ\FLD $3,QLHNWöU\FKSODWIRUPMHVW RIHURZDQHZZLHOXMÚ]\NDFKFR SR]ZDODQDSUDFÚ]QLP]Z\NRU]\VWDQLHPMÚ]\NDG]LDïDMÈFHJR SRVWURQLHVHUZHUD QDSU]\NïDG 3+3OXE& DWDNĝHMÚ]\ND SRVWURQLHNOLHQWD QDSU]\NïDG -DYD6FULSW :SR]RVWDïHMF]ÚĂFLUR]G]LDïX VNRQFHQWUXMHP\VLÚQD$3,0DS *RRJOH%ÚG]LHWRSU]\NïDGWHJR FRPRĝQD]URELÊ]Z\NRU]\VWDQLHP$3,WHMSODWIRUP\ -HĝHOLSUDFXMHV]QDGZLWU\QÈGOD NOLHQWDXSHZQLMVLÚĝHPDRQ ĂZLDGRPRĂÊPRĝOLZRĂFLZ\VWÈSLHQLD]PLDQZ$3, FRPRĝH SöěQLHMZ\PDJDÊZSURZDG]HQLD ]PLDQZZLWU\QLHQLH]EÚGQ\FK GRNRQW\QXRZDQLDNRU]\VWDQLD ]GDQHJR$3, API MAP GOOGLE 2EHFQLHMHGQ\P]QDMSRSXODUQLHMV]\FK$3,ZLQWHUQHFLHMHVW$3,0DS*RRJOH NWöUHSR]ZDODQDXPLHV]F]DQLHPDSQDZïDVQ\FKVWURQDFK NA CZYM POLEGA DZIAŁANIE API MAP GOOGLE? $3,0DS*RRJOHZ-DYD6FULSW SR]ZDODQDPQDZ\ĂZLHWODQLH PDS]WHJRVHUZLVXQDQDV]\FK VWURQDFKLQWHUQHWRZ\FK 3RQDGWRPRĝHP\GRVWRVRZDÊ GRVZRLFKSRWU]HEZ\JOÈGPDS RUD]Z\ĂZLHWODQHSU]H]QLH LQIRUPDFMH :DUWR]DSR]QDÊVLÚ]GRNXPHQWDFMÈ$3,0DS*RRJOHZNWöUHM ]QDMGXMÈVLÚWDNĝHSU]\NïDG\ 'RNXPHQWDFMDSRND]XMHUöĝQH PRĝOLZRĂFLRIHURZDQHSU]H] $3,=QDMG]LHV]MÈQDVWURQLH https://developers.google.com/ maps/ JAKI UZYSKASZ EFEKT? KLUCZ API 2PöZLP\WXW\ONRNLOND SU]\NïDGöZIXQNFML$3,0DS*RRJOHNWöUHSRZLQQ\&LSRPöF ZUR]SRF]ÚFLXSUDF\ :SU]\SDGNXSHZQ\FK$3, SURJUDPLVWDPXVLX]\VNDÊNOXF] SR]ZDODMÈF\QDSRELHUDQLH GDQ\FK]VHUZHUD.OXF]$3,WR FLÈJOLWHULF\IUXQLNDOQLHLGHQW\ğNXMÈF\SURJUDPLVWÚZZLWU\QLH ZïDĂFLFLHOD$3,:WHQVSRVöE ZïDĂFLFLHO$3,]\VNXMHPRĝOLZRĂÊPRQLWRURZDQLDSR]LRPX LFHOXXĝ\FLDWHJR$3, 1DMSLHUZ]REDF]\V]MDNGRGDÊ QDVWURQLHLQWHUQHWRZHMPDSÚ 1DVWÚSQLHGRZLHV]VLÚMDN ]PLHQLDÊNRQWURONL1DNRQLHF GRGDP\]QDF]QLNLQDPDSLH L]PLHQLP\LFKNRORU\ *G\SRZVWDZDïDWDNVLÈĝND VHUZLV*RRJOHSR]ZDODï ZLWU\QRPQDZ\ZRï\ZDQLH$3, PDSGRUD]\QDGREÚ EH]NRQLHF]QRĂFLX]\VNLZDQLD NOXF]D$3,:ïDĂFLFLHOHZLWU\Q NWöUHZ\NRQXMÈZLÚNV]ÈOLF]EÚ Z\ZRïDñPXV]ÈX]\VNDÊNOXF] $3,L]DSïDFLÊ]DXVïXJÚ -HĝHOLSU]\JRWRZXMHV]ZLWU\QÚ NRPHUF\MQÈOXEPDSDVWDQRZL ZDĝQ\VNïDGQLNDSOLNDFMLGREUÈ SUDNW\NÈEÚG]LHXĝ\FLHNOXF]D $3,SRQLHZDĝ PRĝHV]SU]HNRQDÊVLÚLOH UD]\ZLWU\QDĝÈGDïD$3, *RRJOHPRĝHVLÚ]7REÈ VNRQWDNWRZDÊJG\]PLDQLH XOHJQÈZDUXQNLXĝ\FLD$3, OXEWU]HEDEÚG]LHZQLHĂÊ RSïDWÚ]DNRU]\VWDQLH ]XVïXJL $E\X]\VNDÊNOXF]$3,SU]HMGě QDVWURQÚhttps://cloud.google. com/console • • API 447 PODSTAWOWE USTAWIENIA MAPY *G\GRïÈF]\V]GRZLWU\Q\VNU\SW0DS*RRJOHEÚG]LHV]PöJïNRU]\VWDÊ QDQLHM]RELHNWXmapsNWöU\XPRĝOLZLDZ\ĂZLHWODQLHPDS UTWORZENIE MAPY OPCJE MAPY 2ELHNWmapsMHVWSU]HFKRZ\ZDQ\ZRELHNFLHRQD ]ZLHgoogleNWöU\WZRU]\]DNUHVGODZV]\VWNLFK RELHNWöZ*RRJOH $E\GRGDÊPDSÚQDVWURQLHQDOHĝ\XWZRU]\ÊQRZ\ RELHNWPDS\]DSRPRFÈNRQVWUXNWRUDMap()NWöU\ MHVWF]ÚĂFLÈRELHNWXmapsLPDGZDSDUDPHWU\ HOHPHQWZNWöU\PPD]RVWDÊZ\ĂZLHWORQD PDSD OLWHUDïRELHNWX]DZLHUDMÈF\]HVWDZRSFMLPDS\ NWöUHNRQWUROXMÈVSRVöEMHMZ\ĂZLHWODQLD 8VWDZLDQLDZ\JOÈGXPDS\VÈSU]HFKRZ\ZDQH ZHZQÈWU]LQQHJRRELHNWX-DYD6FULSWĽRQD]ZLH mapOptions2ELHNWWHQMHVWWZRU]RQ\SU]\Xĝ\FLX QRWDFMLOLWHUDïXRELHNWXMHV]F]HSU]HGZ\ZRïDQLHP NRQVWUXNWRUDMap():NRG]LH-DYD6FULSWSU]HG VWDZLRQ\PQDVWURQLHSRSUDZHMPRĝQD]REDF]\Ê ĝHRELHNWmapOptionsZ\NRU]\VWXMHWU]\HOHPHQW\ LQIRUPDFML ZVSöïU]ÚGQHJHRJUDğF]QHĂURGNDPDS\ SR]LRPSU]\EOLĝHQLDPDS\ URG]DMZ\ĂZLHWODQHMPDS\ 3R]LRPSU]\EOLĝHQLDMHVW]Z\NOHXVWDZLDQ\ ]Z\NRU]\VWDQLHPOLF]E\]]DNUHVXRG FDïD =LHPLD GR ZQLHNWöU\FKPLDVWDFKPRĝHE\Ê ZLÚNV]\ 2EUD]\WZRU]ÈFHPDSÚVÈQD]\ZDQHNDIHONDPL 'RVWÚSQHVÈF]WHU\URG]DMHPDS Poziom przybliżenia: 0 Poziom przybliżenia: 4 Mapa drogowa Mapa satelitarna Poziom przybliżenia: 8 Poziom przybliżenia: 16 Mapa hybrydowa Mapa terenu • • 448 API • • • PROSTY PRZYKŁAD UŻYCIA MAP GOOGLE c09/google-map.html HTML <div id=”map”></div> <script src=”js/google-map.js”></script> ERG\! c09/js/google-map.js JAVASCRIPT 3 4 function init() { var mapOptions = { .RQğJXUDFMDRSFMLPDS\ FHQWHUQHZJRRJOHPDSV/DW/QJ PDS7\SH,GJRRJOHPDSV0DS7\SH,G52$'0$3 ]RRP }; var venueMap; 0HWRGD0DS SRZRGXMHZ\JHQHURZDQLHPDS\ YHQXH0DS QHZJRRJOHPDSV0DS GRFXPHQWJHW(OHPHQW%\,G ĳPDSĳ PDS2SWLRQV } 2 function loadScript() { var script = document.createElement(’script’); 8WZRU]HQLHHOHPHQWXVFULSW! VFULSWVUF ĳKWWSPDSVJRRJOHDSLVFRPPDSVDSLMV" VHQVRU IDOVH FDOOEDFN LQLWLDOL]Hĳ GRFXPHQWERG\DSSHQG&KLOG VFULSW 8PLHV]F]HQLHHOHPHQWXQDVWURQLH } 1 ZLQGRZRQORDG ORDG6FULSW:\ZRïDQLH]GDU]HQLDRQORDG WYNIK 1. 5R]SRF]\QDP\RGNRñFDVNU\SWXJG\VWURQD]RVWDïD ZF]\WDQDD]GDU]HQLHonloadZ\ZRïDïRIXQNFMÚ loadScript() 2. )XQNFMDloadScript()WZRU]\HOHPHQW<script> SU]H]QDF]RQ\GRZF]\WDQLD$3,0DS*RRJOH 3RZF]\WDQLX$3,QDVWÚSXMHZ\ZRïDQLHPHWRG\init() ZFHOXLQLFMDFMLPDS\ 3. 0HWRGDinit()ZF]\WXMHPDSÚQDVWURQLH+70/ 1DSRF]ÈWNXWZRU]\RELHNWmapOptionsZUD]]WU]HPD ZïDĂFLZRĂFLDPL 4. 1DVWÚSQLHXĝ\ZDNRQVWUXNWRUDMap()GRXWZRU]HQLD PDS\LZ\ĂZLHWOHQLDMHMQDVWURQLH.RQVWUXNWRUSRELHUD GZDSDUDPHWU\ HOHPHQWZHZQÈWU]NWöUHJRPD]RVWDÊZ\ĂZLHWORQD PDSD RELHNWmapOptions • • API 449 ZMIANA KONTROLEK WIDOCZNOŚĆ KONTROLEK MAPY POŁOŻENIE KONTROLEK MAPY TOP_LEFT 2 4 TOP_CENTER TOP_RIGHT LEFT_TOP RIGHT_TOP CENTER_LEFT CENTER_RIGHT LEFT_BOTTOM RIGHT_BOTTOM 5 1 3 BOTTOM_LEFT BOTTOM_CENTER BOTTOM_RIGHT :FHOXZ\ĂZLHWOHQLDOXEXNU\FLDNRQWURONLQDOHĝ\Xĝ\ÊMHMQD]Z\RUD]ZDUWRĂFLtrue Z\ĂZLHWOHQLH OXE false XNU\FLH :SUDZG]LH0DS\*RRJOHSUöEXMÈXQLNQÈÊQDNïDGDQLDVLÚNRQWUROHNDOHLWDNZDUWR ]DFKRZDÊRVWURĝQRĂÊSRGF]DVLFKUR]PLHV]F]DQLD .21752/.$ OPIS :$572¥m'20<¥/1$ zoomControl (1) 8VWDZLDSR]LRPSU]\EOLĝHQLDGODPDS\'RWHJR VïXĝÈVXZDN GXĝHPDS\ OXESU]\FLVNL+L– PDïHPDS\ :ïÈF]RQD panControl (2) 3R]ZDODQDSDQRUDPRZDQLHPDS\ :ïÈF]RQDZXU]ÈG]HQLDFK QLHZ\SRVDĝRQ\FKZHNUDQ GRW\NRZ\ scaleControl (3) :\ĂZLHWODVNDOÚPDS\ :\ïÈF]RQD PDS7\SH&RQWURO 3R]ZDODQD]PLDQÚURG]DMXPDS\ QDSU]\NïDG 52$'0$3OXE6$7(//,7( :ïÈF]RQD VWUHHW9LHZ&RQWURO ,NRQDSU]HGVWDZLDMÈFDĝöïWÈSRVWDÊNWöUDPRĝH E\ÊSU]HFLÈJDQDLXSXV]F]DQDQDVWURQLHZFHOX SU]HMĂFLDGRWU\EX6WUHHW9LHZ :ïÈF]RQD rotateControl 5RWDFMDPDSGODNWöU\FKLVWQLHMÈGRGDWNRZH ]GMÚFLD QLHSRND]DQR :ïÈF]RQDJG\LVWQLHMHWDND PRĝOLZRĂÊ RYHUYLHZ0DS&RQWURO 0LQLDWXUDSRND]XMÈFDGXĝ\REV]DU1DZLÚNV]\P REV]DU]HRG]ZLHUFLHGODPLHMVFHSRND]\ZDQH SU]H]ELHĝÈFÈPDSÚ QLHSRND]DQR :ïÈF]RQDJG\PDSDMHVW VFKRZDQDQDSU]\NïDGZWU\ELH 6WUHHW9LHZ API MAPA GOOGLE Z WŁASNYMI KONTROLKAMI WYGLĄD KONTROLEK POŁOŻENIE KONTROLKI :FHOX]PLDQ\Z\JOÈGXLSRïRĝHQLDNRQWUROHN PDS\QDOHĝ\GRGDÊRELHNWmapOptions 1. $E\SRND]DÊOXEXNU\ÊNRQWURONÚZ\NRU]\VWXMH VLÚQD]ZÚNRQWURONLRUD]SU]\SLVDQÈMHMZDUWRĂÊ ERRORZVNÈ trueZ\ĂZLHWODNRQWURONÚfalse XNU\ZDMÈ 2. .DĝGDNRQWURONDPDZïDVQ\RELHNWRSFML Xĝ\ZDQ\GR]GHğQLRZDQLDMHMVW\OXLSRïRĝHQLD 1D]ZDRELHNWXMHVWWZRU]RQDSU]H]GRGDQLH VïRZDOptionsSRQD]ZLHNRQWURONLQDSU]\NïDG zoomControlOptions6W\OH]RVWDQÈRPöZLRQH SRQLĝHM'LDJUDPSRND]DQ\QDVWURQLHSR OHZHMZVND]XMHRSFMHGRVWÚSQHGODZïDĂFLZRĂFL position c09/js/google-map-controls.js JAVASCRIPT var mapOptions = { ]RRP FHQWHUQHZJRRJOHPDSV/DW/QJ PDS7\SH,GJRRJOHPDSV0DS7\SH,G52$'0$3 1 1 3 2 1 3 2 1 2 1 1 SDQ&RQWUROIDOVH ]RRP&RQWUROWUXH ]RRP&RQWURO2SWLRQV^ VW\OHJRRJOHPDSV=RRP&RQWURO6W\OH60$// SRVLWLRQJRRJOHPDSV&RQWURO3RVLWLRQ723B5,*+7 }, PDS7\SH&RQWUROWUXH PDS7\SH&RQWURO2SWLRQV^ VW\OHJRRJOHPDSV0DS7\SH&RQWURO6W\OH'523'2:1B0(18 SRVLWLRQJRRJOHPDSV&RQWURO3RVLWLRQ723B/()7 }, VFDOH&RQWUROWUXH VFDOH&RQWURO2SWLRQV^ SRVLWLRQJRRJOHPDSV&RQWURO3RVLWLRQ723B&(17(5 }, VWUHHW9LHZ&RQWUROIDOVH RYHUYLHZ0DS&RQWUROIDOVH }; STYLE KONTROLEK MAPY 3. :\JOÈGSR]LRPXSU]\EOLĝHQLDLURG]DMNRQWUROHNPDS\PRĝQD]PLHQLÊ]DSRPRFÈQDVWÚSXMÈF\FKRSFML zoomControlStyle 60$//ĽPDïHSU]\FLVNL+L– /$5*(ĽVXZDNSLRQRZ\ '()$8/7ĽXVWDZLHQLDGRP\ĂOQHGODGDQHJR XU]ÈG]HQLD 0DS7\SH&RQWURO6W\OH +25,=217$/B%$5ĽSU]\FLVNLRERNVLHELH '523'2:1B0(18ĽUR]ZLMDQDOLVWDRSFML '()$8/7ĽXVWDZLHQLDGRP\ĂOQHGODGDQHJR XU]ÈG]HQLD API NADAWANIE STYLU MAPIE $E\QDGDÊVW\OPDSLHWU]HEDSRGDÊWU]\URG]DMH LQIRUPDFML IHDWXUH7\SHVĽHOHPHQWPDS\NWöUHPX FKFHV]QDGDÊVW\OQDSU]\NïDGXOLFHSDUNL GURJLZRGQHWUDQVSRUWSXEOLF]Q\ HOHPHQW7\SHVĽNRQNUHWQDFHFKDHOHPHQWX NWöUDPD]RVWDÊ]PRG\ğNRZDQDQDSU]\NïDG MHJRJHRPHWULD NV]WDïW\ OXEHW\NLHW\ stylersZïDĂFLZRĂFLSR]ZDODMÈFHQDGRVWRVRZDQLHNRORUöZLZLGRF]QRĂFLHOHPHQWöZQD PDSLH • • • :ïDĂFLZRĂÊstylesZRELHNFLHmapOptions SR]ZDODQDXVWDZLHQLHVW\OXPDS\:DUWRĂFLÈMHVW WDEOLFDRELHNWöZDSRV]F]HJöOQHRELHNW\ZSï\ZDMÈ QDIXQNFMHPDS\ c09/js/google-map-styled.js :ïDĂFLZRĂÊstylersMHVWWDEOLFÈRELHNWöZ LSR]ZDODQD]PLDQÚNRORUöZPDS\MDNRFDïRĂFL ZïDĂFLZRĂÊhue]PLHQLDNRORUMHJRZDUWRĂÊMHVW SRGDZDQDZSRVWDFLOLF]E\V]HVQDVWNRZHM ZïDĂFLZRĂFLlighneessLsaturationPRJÈ SU]\MPRZDÊZDUWRĂFLRG-100GR100 • • 3RV]F]HJöOQHIXQNFMHPDS\PRJÈPLHÊZïDVQH RELHNW\LW\PVDP\PZïDVQHZïDĂFLZRĂFLstylers :ïDĂFLZRĂÊYLVLELOLW\PRĝHZQLFKSU]\MÈÊ MHGQÈ]WU]HFKZDUWRĂFL onZ\ĂZLHWODGDQÈIXQNFMÚ offXNU\ZDWÚIXQNFMÚ VLPSOLğHGZ\ĂZLHWODSRGVWDZRZÈZHUVMÚ IXQNFML • • • JAVASCRIPT sW\OHV>:ïDĂFLZRĂÊVW\OHVWRWDEOLFDRELHNWöZ { VW\OHUV>:ïDĂFLZRĂÊVW\OHUVSU]HFKRZXMHWDEOLFÚRELHNWöZ ^KXHĴIIIĵ`2JöOQHNRORU\PDS\ ^VDWXUDWLRQ`2JöOQHQDV\FHQLHPDS\ ] }, { IHDWXUH7\SHĴURDGĵ0RG\ğNDFMHGRW\F]ÈFHGUöJ HOHPHQW7\SHĴJHRPHWU\ĵ*HRPHWULDZ\ĂZLHWODQHJRHOHPHQWX OLQLH VW\OHUV> ÔLJKWQHVV`-DVQRĂÊGUöJ ^YLVLELOLW\ĴVLPSOLğHGĵ`3R]LRPV]F]HJöïRZRĂFLGUöJ ] }, { IHDWXUH7\SHĴWUDQVLWĵ0RG\ğNDFMHGRW\F]ÈFHWUDQVSRUWXSXEOLF]QHJR HOHPHQW7\SHĴJHRPHWU\ĵ*HRPHWULDZ\ĂZLHWODQHJRHOHPHQWX OLQLH VW\OHUV> ^KXHĴIIĵ`.RORUGODWUDQVSRUWXSXEOLF]QHJR ^VDWXUDWLRQ`1DV\FHQLHGODWUDQVSRUWXSXEOLF]QHJR ] }, { IHDWXUH7\SHĴWUDQVLWĵ0RG\ğNDFMHGRW\F]ÈFHWUDQVSRUWXSXEOLF]QHJR HOHPHQW7\SHĴODEHOVĵ(W\NLHW\GODZ\ĂZLHWODQHJRHOHPHQWX VW\OHUV> ^KXHĴIIĵ`.RORUHW\NLHW\ ^VDWXUDWLRQ`1DV\FHQLHHW\NLHW\ ] } ... :LÚFHMVW\OöZ]QDMGXMHVLÚZPDWHULDïDFKGRïÈF]RQ\FKGRNVLÈĝNL API DODANIE ZNACZNIKÓW :W\PSU]\NïDG]LHSRND]DQRMDNPRĝQDGRGDÊ ]QDF]QLNGRPDS\8WZRU]\OLĂP\PDSÚLQDGDOLĂP\MHMQD]ZÚvenueMap 1. 3LHUZV]\PNURNLHPMHVWXWZRU]HQLHRELHNWX /DW/QJZNWöU\PEÚGÈSU]HFKRZ\ZDQHGDQH RNUHĂODMÈFHSRïRĝHQLH]QDF]QLND8ĝ\WD]RVWDïD VNïDGQLDNRQVWUXNWRUDRELHNWX2ELHNWQRVLQD]ZÚ SLQ/RFDWLRQ 2. .RQVWUXNWRUMarker()WZRU]\RELHNWmarker 0DW\ONRMHGHQSDUDPHWURELHNW]DZLHUDMÈF\ XVWDZLHQLDXWZRU]RQ\]Z\NRU]\VWDQLHPQRWDFML OLWHUDïXRELHNWX 2ELHNWsettings]DZLHUDWU]\ZïDĂFLZRĂFL 3. positionĽRELHNWSU]HFKRZXMÈF\SRïRĝHQLH ]QDF]QLND SLQ/RFDWLRQ 4. mapĽPDSDQDNWöUHMSRZLQLHQSRMDZLÊVLÚ ]QDF]QLN QDVWURQLHPRĝH]QDMGRZDÊVLÚZLÚFHM PDSQLĝW\ONRMHGQD 5. iconĽĂFLHĝNDGRVWÚSXGRREUD]XZ\ĂZLHWODQHJRMDNR]QDF]QLNQDPDSLH ĂFLHĝNDSRZLQQD E\ÊZ]JOÚGQDGODVWURQ\+70/ JAVASCRIPT c09/js/google-map-styled.js 1 YDUSLQ/RFDWLRQ QHZJRRJOHPDSV/DW/QJ 2 3 4 5 YDUVWDUW3RVLWLRQ QHZJRRJOHPDSV0DUNHU ^8WZRU]HQLHQRZHJR]QDF]QLND SRVLWLRQSLQ/RFDWLRQ=GHğQLRZDQLHMHJRSRïRĝHQLD PDSYHQXH0DS:VND]DQLHPDS\ LFRQĴLPJJRSQJĵ¥FLHĝNDGRVWÚSXGRREUD]XZ]JOÚGQDGOD+70/ }); WYNIK API PODSUMOWANIE API f $3,MHVWXĝ\ZDQHZSU]HJOÈGDUNDFKLQWHUQHWRZ\FK VNU\SWDFKRUD]ZZLWU\QDFKLQWHUQHWRZ\FKNWöUH ZVSöïG]LHOÈSHZQHIXQNFMRQDOQRĂFL]SURJUDPDPLOXE LQQ\PLZLWU\QDPL f $3,SR]ZDODQDWZRU]HQLHNRGXZ\NRQXMÈFHJRĝÈGDQLH ZNWöU\PLQQ\SURJUDPOXEVNU\SWMHVWSURV]RQ\ RZ\NRQDQLHSHZQHJR]DGDQLD f $3,RNUHĂODWDNĝHIRUPDWZMDNLPRF]HNXMHRGSRZLHG]L DE\PRJïDE\ÊRQD]UR]XPLDQD f $E\]DVWRVRZDÊ$3,ZZLWU\QLHLQWHUQHWRZHMQDMHM VWURQDFKNRU]\VWDMÈF\FK]WHJR$3,NRQLHF]QHMHVW GRïÈF]HQLHRGSRZLHGQLHJRVNU\SWX f :GRNXPHQWDFML$3,]Z\NOH]QDMGXMÈVLÚWDEHOH RELHNWöZPHWRGLZïDĂFLZRĂFL f -HĝHOLZLHV]MDNWZRU]\ÊRELHNWZ\ZRï\ZDÊMHJR PHWRG\X]\VNLZDÊGRVWÚSGRMHJRZïDĂFLZRĂFL LWZRU]\ÊNRGUHDJXMÈF\QD]GDU]HQLDWRQLHSRZLQLHQHĂ PLHÊSUREOHPX]RSDQRZDQLHPGRZROQHJR$3, -DYD6FULSW API 10 OBSŁUGA BŁĘDÓW I DEBUGOWANIE -Ú]\N-DYD6FULSWPRĝHE\ÊWUXGQ\ZQDXFHSRQDGWRNDĝG\ SRSHïQLDEïÚG\SRGF]DVWZRU]HQLDNRGX:W\PUR]G]LDOH GRZLHV]VLÚMDNZ\V]XNLZDÊEïÚG\ZNRG]LH=REDF]\V] WHĝMDNWZRU]\ÊVNU\SW\NWöUH]QDNRPLFLHSRUDG]ÈVRELH ]HZHQWXDOQ\PLEïÚGDPL .LHG\WZRU]\V]NRG-DYD6FULSWQLHPRĝHV]RF]HNLZDÊĝHRGUD]XEÚG]LHRQGRVNRQDï\ 3URJUDPRZDQLHWRUR]ZLÈ]\ZDQLHSUREOHPöZ3U]\SRPLQDWRV\WXDFMÚZNWöUHMRWU]\PXMHV] SX]]OHLmusiszQLHW\ONRMHXïRĝ\ÊDOHWHĝSU]\JRWRZDÊLQVWUXNFMHSR]ZDODMÈFHWDNĝH komputerowiQDLFKXïRĝHQLH *G\WZRU]\P\GïXJLVNU\SWQLHSRZVWDMHRGUD]XGRVNRQDï\NRG*HQHURZDQHSU]H]SU]HJOÈGDUNÚ LQWHUQHWRZÈNRPXQLNDW\REïÚGDFKQDSRF]ÈWNXZ\GDMÈVLÚ]DZLïHDOHSRPDJDMÈZXVWDOHQLX GODF]HJRNRG-DYD6FULSWQLHG]LDïDSUDZLGïRZRLMDNPRĝQDJRQDSUDZLÊ:W\PUR]G]LDOH ]RVWDQÈSRUXV]RQHQDVWÚSXMÈFH]DJDGQLHQLD KONSOLA I NARZĘDZIA PROGRAMISTYCZNE NAJCZĘŚCIEJ WYSTĘPUJĄCE BŁĘDY 1DU]ÚG]LDZEXGRZDQH ZSU]HJOÈGDUNÚLQWHUQHWRZÈ NWöUHSRPDJDMÈSURJUDPLĂFLH Z\V]XNLZDÊEïÚG\ 1DMF]ÚVWV]HěUöGïDEïÚGöZ RUD]VSRVRE\SRSUDZLDQLD EïÚGöZ 456 2%68*$%}':,'(%8*2:$1,( OBSŁUGA BŁĘDÓW :\MDĂQLHQLHMDNNRGPRĝH UDG]LÊVRELH]SRWHQFMDOQ\PL EïÚGDPL 2%68*$%}':,'(%8*2:$1,( 457 KOLEJNOŚĆ WYKONYWANIA $E\]QDOHěÊěUöGïREïÚGXZDUWRZLHG]LHÊMDNZ\JOÈGDSURFHVSU]HWZDU]DQLD VNU\SWöZ.ROHMQRĂÊZ\NRQ\ZDQLDSROHFHñPRĝHE\ÊVNRPSOLNRZDQD DQLHNWöUH]DGDQLDQLHPRJÈE\ÊXNRñF]RQH]DQLPQLH]RVWDQLHXUXFKRPLRQH LQQHSROHFHQLHOXEIXQNFMD 2 function greetUser() { return ’Witaj, ’ + getName(); } function getName() { var name = ’Marta’; 3 return name; } 1 var greeting = greetUser(); 4 alert(greeting); 3U]HGVWDZLRQ\SRZ\ĝHMVNU\SWWZRU]\NRPXQLNDW ]SRZLWDQLHPDQDVWÚSQLHZ\ĂZLHWODJRZRNQLH GLDORJRZ\P QDVWURQLHSRSUDZHM :FHOXSU]\JRWRZDQLDWHJRNRPXQLNDWX]SRZLWDQLHP]RVWDï\ Xĝ\WHGZLHIXQNFMHgreetUser()LgetName() %\ÊPRĝHVÈG]LV]ĝHWDN]ZDQDNROHMQRĂÊ wykonywania NROHMQRĂÊSU]HWZDU]DQLDSROHFHñ EÚG]LH]JRGQD]SU]HGVWDZLRQ\PLQXPHUDPLRG GR-HGQDNRND]XMHVLÚWR]QDF]QLHEDUG]LHM VNRPSOLNRZDQH $E\XNRñF]\ÊNURNLQWHUSUHWHUSRWU]HEXMH Z\QLNXZ\NRQDQLDIXQNFMLZNURNDFKoraz SRQLHZDĝNRPXQLNDW]DZLHUDZDUWRĂFL]ZUDFDQH SU]H]WHIXQNFMH.ROHMQRĂÊZ\NRQ\ZDQLDEÚG]LH ZLÚFQDVWÚSXMÈFD =PLHQQDgreetingSRELHUDZDUWRĂÊ]IXQNFML greetUser() 2.)XQNFMDgreetUser()WZRU]\NRPXQLNDW SU]H]SRïÈF]HQLHFLÈJXWHNVWRZHJR’Witaj, ’ ]Z\QLNLHPZ\ZRïDQLDgetName() 3.)XQNFMDgetName()SU]HND]XMHLPLÚIXQNFML greetUser() :IXQNFMLgreetUser()]QDQHMHVWWHUD]LPLÚ Xĝ\WNRZQLND]RVWDMHRQRZVWDZLRQHZSU]\JRWRZ\ZDQ\PFLÈJXWHNVWRZ\P1DVWÚSQLHIXQNFMD ]ZUDFDNRPXQLNDWGRSROHFHQLDNWöUHZNURNX Z\ZRïDïRWÚIXQNFMÚ :DUWRĂÊ]PLHQQHMgreetingMHVWSU]HFKRZ\ZDQDZSDPLÚFL :DUWRĂÊ]PLHQQHMgreeting]RVWDMHZ\ĂZLHWORQDZRNQLHGLDORJRZ\P 458 2%68*$%}':,'(%8*2:$1,( KONTEKST WYKONYWANIA ,QWHUSUHWHU-DYD6FULSWZ\NRU]\VWXMHNRQFHSFMÚNRQWHNVWXZ\NRQ\ZDQLD -HVWWRMHGHQJOREDOQ\NRQWHNVWZ\NRQ\ZDQLDNDĝGDIXQNFMDWZRU]\QRZ\ NRQWHNVWZ\NRQ\ZDQLD2GSRZLDGDMÈRQH]DNUHVRP]PLHQQ\FK KONTEKST WYKONYWANIA ZAKRES ZMIENNEJ .DĝGHSROHFHQLHVNU\SWXPRĝQD]QDOHěÊZMHGQ\P ]WU]HFKNRQWHNVWöZZ\NRQ\ZDQLD 3LHUZV]HGZDNRQWHNVW\RGSRZLDGDMÈQRWDFML ]DNUHVX SR]QDïHĂJRZUR]G]LDOHZSRGUR] G]LDOHķ=DNUHV]PLHQQHMĵ KONTEKST GLOBALNY .RG]QDMGXMÈF\VLÚZVNU\SFLHDOHQLH ZIXQNFML1DNDĝGHMVWURQLH]QDMGXMHVLÚW\ONR MHGHQNRQWHNVWJOREDOQ\ KONTEKST FUNKCJI .RGXUXFKDPLDQ\ZHZQÈWU]IXQNFML.DĝGD IXQNFMDPDZïDVQ\NRQWHNVW KONTEKST EVAL (NIEPOKAZANY) 7HNVWMHVWZ\NRQ\ZDQ\MDNNRGZIXQNFML ZHZQÚWU]QHMRQD]ZLHeval()1LHEÚG]LHWR RPöZLRQHZWHMNVLÈĝFH ZAKRES GLOBALNY -HĝHOL]PLHQQDMHVW]DGHNODURZDQDQD ]HZQÈWU]IXQNFMLPRĝHE\ÊVWRVRZDQDJG]LH NROZLHNSRQLHZDĝPD]DNUHVJOREDOQ\-HĝHOL SRGF]DVWZRU]HQLD]PLHQQHMQLH]RVWDïRXĝ\WH VïRZRNOXF]RZHvarEÚG]LHRQDXPLHV]F]RQD Z]DNUHVLHJOREDOQ\P ZAKRES NA POZIOMIE FUNKCJI .LHG\]PLHQQD]RVWDMH]DGHNODURZDQDZH ZQÈWU]IXQNFMLPRĝHE\ÊXĝ\ZDQDW\ONRZWHM IXQNFMLSRQLHZDĝPD]GHğQLRZDQ\]DNUHVQD SR]LRPLHIXQNFML 2%68*$%}':,'(%8*2:$1,( 459 STOS ,QWHUSUHWHU-DYD6FULSWMHGQRUD]RZRSU]HWZDU]DW\ONRMHGHQZLHUV]NRGX .LHG\SROHFHQLHZ\PDJDGDQ\FK]LQQHMIXQNFMLQDstosieXPLHV]F]D Z\ZRïDQLHQRZHMIXQNFMLSU]\NU\ZDMÈFQLPELHĝÈFH]DGDQLH .LHG\SROHFHQLHPXVLZ\ZRïDÊ LQQ\NRGZFHOXZ\NRQDQLD VZRMHJR]DGDQLDQRZH]DGDQLH MHVWXPLHV]F]DQHQDJöU]HVWRVX ]DGDñGRZ\NRQDQLD 3RZ\NRQDQLXQRZHJR]DGDQLD LQWHUSUHWHUPRĝHSRZUöFLÊGR SRSU]HGQLHJR Funkcja greetUser() zwraca ’Witaj, ’ oraz wynik wywołania getName() =DNDĝG\PUD]HPJG\QDVWRVLH MHVWXPLHV]F]DQ\QRZ\HOHPHQW QDVWÚSXMHXWZRU]HQLHQRZHJR NRQWHNVWXZ\NRQ\ZDQLD =PLHQQH]GHğQLRZDQHZIXQNFML OXENRQWHNĂFLHZ\NRQ\ZDQLD VÈGRVWÚSQHMHG\QLHZWHM IXQNFML Utworzenie zmiennej greeting i wywołanie funkcji greetUser() w celu otrzymania wartości -HĝHOLIXQNFMDEÚG]LHZ\ZRïDQD SRUD]GUXJL]PLHQQHPRJÈ PLHÊLQQHZDUWRĂFL 1DGLDJUDPLHSRSUDZHMVWURQLH PRĝHV]]REDF]\ÊMDNNRG SU]HGVWDZLRQ\GRWÈGZUR]G]LDOHEÚG]LHZ\NRQ\ZDQ\SU]H] XPLHV]F]HQLHSRV]F]HJöOQ\FK ]DGDñQDVWRVLH .RGMHVWSRND]DQ\ZSUDZ\P JöUQ\PURJXQDVWURQLHSR SUDZHM :DUWRĂÊ]PLHQQHMgreeting MHVWSRELHUDQDSU]H]Z\ZRïDQLH IXQNFMLgreetUser()'ODWHJR WHĝ]PLHQQHMQLHPRĝQDSU]\SLVDÊZDUWRĂFLGRSöNLIXQNFMD greetUser()QLH]DNRñF]\ G]LDïDQLD 460 2%68*$%}':,'(%8*2:$1,( Oczekiwanie… :SUDNW\FHR]QDF]DWR ZVWU]\PDQLH]DGDQLDDQD JöU]HVWRVX]RVWDMHXPLHV]F]RQH Z\ZRïDQLHIXQNFMLgreetUser() -HGQDNIXQNFMDgreetUser() QLHPRĝH]ZUöFLÊZDUWRĂFL GRSöNLIXQNFMDgetName()QLH Z\NRQDswojego]DGDQLD function greetUser() { return ’Witaj, ’ + getName(); } function getName() { var name = ’Marta’; return name; } var greeting = greetUser(); alert(greeting); Funkcja getName() przekazuje wartość ’Marta’ funkcji greetUser() Oczekiwanie… Funkcja greetUser() przypisuje wartość ’Witaj, Marta’ zmiennej greeting Oczekiwanie… Oczekiwanie… 7DNZLÚFZ\ZRïDQLHIXQNFML getName()MHVWXPLHV]F]RQHQD JöU]HVWRVXQDGZ\ZRïDQLHP IXQNFMLgreetUser()-DN ZLG]LV]VWRVZ\ZRïDñ]DF]\QD SRZROLSRZVWDZDÊ.LHG\ IXQNFMDgetName()]DNRñF]\ G]LDïDQLHMHMZDUWRĂÊ]ZURWQD EÚG]LHSU]HND]DQD]SRZURWHP IXQNFMLgreetUser() 3RQLHZDĝIXQNFMDgetName() Z\NRQDïDVZRMH]DGDQLH ]RVWDMHXVXQLÚWD]HVWRVX 7HUD]IXQNFMDgreetUser() PRĝH]DNRñF]\ÊVZRMH]DGDQLH LSU]HND]DÊRGSRZLHGQLÈ ZDUWRĂÊ]PLHQQHMgreeting Zmienna greeting przechowuje wartość ’Witaj, Marta’ )XQNFMDgreetUser()NRñF]\ ]DGDQLHLMHVWXVXZDQD]HVWRVX 2GSRZLHGQLDZDUWRĂÊ]RVWDMH ZUHV]FLHSU]\SLVDQD]PLHQQHM greeting 2%68*$%}':,'(%8*2:$1,( 461 KONTEKST WYKONYWANIA I PRZENIESIENIE W GÓRĘ =DNDĝG\PUD]HPJG\VNU\SWZFKRG]LGRQRZHJRNRQWHNVWXZ\NRQ\ZDQLD PRĝHP\Z\UöĝQLÊGZLHID]\DNW\ZQRĂFL 1. PRZYGOTOWANIE 2. WYKONANIE ľ7ZRU]RQ\MHVWQRZ\]DNUHV ľ7ZRU]RQHVÈ]PLHQQHIXQNFMHLDUJXPHQW\ ľ2NUHĂODQDMHVWZDUWRĂÊVïRZDNOXF]RZHJRthis ľ1DVWÚSXMHSU]\SLVDQLHZDUWRĂFL]PLHQQ\P ľ2GZRïDQLDGRIXQNFMLLZ\NRQDQLHLFKNRGX ľ:\NRQDQLHSROHFHñ 3R]QDQLHWHJRFRG]LHMHVLÚZGZöFKZ\PLHQLRQ\FKID]DFKSRPDJDZ]UR]XPLHQLXNRQFHSFML RNUHĂODQHMPLDQHPSU]HQLHVLHQLDZJöUÚ DQJ hoist -DNSHZQLH]DXZDĝ\ïHĂmaszZ\PLHQLRQH SRQLĝHMPRĝOLZRĂFL %\ÊPRĝHVSRG]LHZDV]VLÚĝHZ\NRQDQLHSRQLĝV]HJRIUDJPHQWXNRGX]DNRñF]\VLÚQLHSRZRG]HQLHPSRQLHZDĝZ\ZRïDQLHIXQNFMLgreetUser() QDVWÚSXMHSU]HGMHM]GHğQLRZDQLHP ľ :\ZRïDQLDIXQNFMLSU]HGLFK]DGHNODURZDQLHP MHĝHOL]RVWDï\XWZRU]RQH]Z\NRU]\VWDQLHPGHNODUDFMLIXQNFMLDQLHZ\UDĝHñIXQNFMLĽSDWU] UR]G]LDïSRGUR]G]LDïķ)XQNFMHDQRQLPRZH LIXQNFMHZ\UDĝHQLDĵ 3U]\SLVDQLDZDUWRĂFL]PLHQQHMNWöUDMHV]F]HQLH ]RVWDïD]DGHNODURZDQD ľ :\QLNDWR]IDNWXĝHZV]\VWNLH]PLHQQHLIXQNFMH ZLFKNRQWHNĂFLHZ\NRQ\ZDQLDVÈWZRU]RQH ]DQLPEÚGÈZ\NRQDQH )D]DSU]\JRWRZDQLDMHVWF]ÚVWRRNUHĂODQD MDNRZ]LÚFLHZV]\VWNLFK]PLHQQ\FK LIXQNFMLDQDVWÚSQLHSU]HQLHVLHQLHLFKQDJöUÚ NRQWHNVWXZ\NRQ\ZDQLD0RĝHV]WRX]QDÊ]D przygotowywanieZ\PLHQLRQ\FKNRPSRQHQWöZ .DĝG\NRQWHNVWZ\NRQDQLDWZRU]\WDNĝHZïDVQ\ RELHNW]PLHQQ\FK:W\PRELHNFLH]QDMGXMÈVLÚ LQIRUPDFMHV]F]HJöïRZHGRW\F]ÈFHZV]\VWNLFK ]PLHQQ\FKIXQNFMLLSDUDPHWUöZGODGDQHJR NRQWHNVWXZ\NRQ\ZDQLD 2%68*$%}':,'(%8*2:$1,( var greeting = greetUser(); function greetUser() { // Utworzenie komunikatu z powitaniem. } -HGQDNSRZ\ĝV]\IUDJPHQWNRGXG]LDïDJG\ĝ IXQNFMDLSLHUZV]HSROHFHQLH]QDMGXMÈVLÚZW\P VDP\PNRQWHNĂFLHZ\NRQDQLDLNRGPRĝQD SRWUDNWRZDÊWDNMDNSU]HGVWDZLRQRSRQLĝHM function greetUser() { // Utworzenie komunikatu z powitaniem. } var greeting = greetUser(); =NROHLZ\NRQDQLHQDVWÚSXMÈFHJRNRGX]DNRñF]\ VLÚQLHSRZRG]HQLHPSRQLHZDĝIXQNFMD greetUser()MHVWWZRU]RQDZNRQWHNĂFLHIXQNFML getName() var greeting = greetUser(); function getName() { function greetUser() { // Utworzenie komunikatu z powitaniem. } 8ĝ\FLHLPLHQLDZNRPXQLNDFLH // z powitaniem. } POZNAJEMY ZAKRES :LQWHUSUHWHU]HNDĝG\NRQWHNVWZ\NRQ\ZDQLDPDZïDVQ\RELHNWvariables 3U]HFKRZXMHRQ]PLHQQHIXQNFMHLSDUDPHWU\GRVWÚSQHZGDQ\P]DNUHVLH 3RQDGWRNDĝG\NRQWHNVWZ\NRQ\ZDQLDPRĝHX]\VNDÊGRVWÚSGRQDGU]ÚGQHJR RELHNWXvariables 0öZLVLÚĝHIXQNFMHZ-DYD6FULSWPDMÈ]DNUHV leksykalny6ÈSRïÈF]RQH]RELHNWHPNWöU\]RVWDï ]GHğQLRZDQ\ZHZQÈWU]'ODWHJRWHĝGODNDĝGHJR NRQWHNVWXZ\NRQ\ZDQLD]DNUHVEÚG]LHVNïDGDïVLÚ ]RELHNWXvariablesELHĝÈFHJRNRQWHNVWXZ\NRQ\ZDQLDDWDNĝH]RELHNWöZvariablesZHZV]\VWNLFKQDGU]ÚGQ\FKNRQWHNVWDFKZ\NRQ\ZDQLD var greeting = (function() { var d = new Date(); var time = d.getHours(); var greeting = greetUser(); function greetUser() { if (time < 12) { YDUPVJ ĳ']LHñGREU\ĳ } else { var msg = ’Witaj, ’; } return = msg + getName(); function getName() { var name = ’Marta’; return name; } } }); alert(greeting); :\REUDěVRELHNDĝGÈIXQNFMÚMDNRPDWULRV]NLF]\OL ODONLZïRĝRQHMHGQDZGUXJÈ=DNUHVSRWRPQ\PRĝH SRSURVLÊ]DNUHV\QDGU]ÚGQHRLQIRUPDFMH]QDMGXMÈFHVLÚZLFK]PLHQQ\FK-HGQDN]DNUHV\QDGU]ÚGQH QLHPRJÈSRELHUDÊ]PLHQQ\FK]]DNUHVöZSRWRPQ\FK.DĝG\]DNUHVSRWRPQ\RWU]\PDWÚVDPÈ RGSRZLHGěRGWHJRVDPHJR]DNUHVXQDGU]ÚGQHJR -HĝHOL]PLHQQDQLH]RVWDQLH]QDOH]LRQDZRELHNFLH variablesELHĝÈFHJRNRQWHNVWXZ\NRQ\ZDQLD WRPRĝQDMHMSRV]XNDÊZRELHNFLHvariables QDGU]ÚGQHJRNRQWHNVWXZ\NRQ\ZDQLD:DUWR MHGQDNSDPLÚWDÊĝHRSHUDFMDSU]HV]XNLZDQLD ZJöUÚVWRVXPRĝHPLHÊQHJDW\ZQ\ZSï\ZQD Z\GDMQRĂÊ'ODWHJRWHĝLGHDOQ\PUR]ZLÈ]DQLHP EÚG]LHWZRU]HQLH]PLHQQ\FKZHZQÈWU]IXQNFML NWöUHMHZ\NRU]\VWXMÈ 6SöMU]QDVWURQÚSROHZHMĽZHZQÚWU]QDIXQNFMD PRĝHX]\VNDÊGRVWÚSGRIXQNFML]HZQÚWU]Q\FK LLFK]PLHQQ\FK1DSU]\NïDGIXQNFMDgreetUser() PRĝHX]\VNDÊGRVWÚSGR]PLHQQHMtime]DGHNODURZDQHMZ]HZQÚWU]QHMIXQNFMLgreeting() :WUDNFLHNDĝGHJRZ\ZRïDQLDIXQNFMLRWU]\PXMH RQDZïDVQ\NRQWHNVWZ\NRQ\ZDQLDLRELHNW variables :WUDNFLHNDĝGHJRZ\ZRïDQLDIXQNFMLZHZQÚWU]QHM SU]H]IXQNFMÚ]HZQÚWU]QÈIXQNFMDZHZQÚWU]QD EÚG]LHPLDïDQRZ\RELHNWvariables-HGQDN ]PLHQQHZIXQNFML]HZQÚWU]QHMSR]RVWDQÈWHVDPH 8ZDJD=SR]LRPXNRGXQLHPRĝHV]X]\VNDÊ GRVWÚSXGRRELHNWXvariables2ELHNWWHQMHVW WZRU]RQ\SU]H]LQWHUSUHWHULXĝ\ZDQ\ZWOH-HGQDN ]UR]XPLHQLHWHJRFRVLÚG]LHMHZWOHQDSHZQR SRPRĝHZSR]QDQLXVSRVREXG]LDïDQLD]DNUHVX 2%68*$%}':,'(%8*2:$1,( POZNAJEMY BŁĘDY -HĝHOLSROHFHQLH-DYD6FULSWZ\JHQHUXMHEïÈGQDVWÚSXMH]JïRV]HQLHZ\MÈWNX 1DW\PHWDSLHLQWHUSUHWHU]DWU]\PXMHZ\NRQ\ZDQLHNRGXLV]XNDNRGX SU]H]QDF]RQHJRGRREVïXJLZ\MÈWNöZ -HĝHOLSU]HZLGXMHV]ĝHFRĂZNRG]LHPRĝH VSRZRGRZDÊEïÈGPRĝHV]Xĝ\Ê]HVWDZXSROHFHñ ZFHOXREVïXJLWHJREïÚGX SROHFHQLDWHSR]QDV] ZSRGUR]G]LDOHķ2EVïXJDZ\MÈWNöZĵ 7REDUG]R ZDĝQHSRQLHZDĝMHĝHOLEïÈGQLH]RVWDQLHREVïXĝRQ\VNU\SWSRSURVWX]DWU]\PDSU]HWZDU]DQLH DXĝ\WNRZQLNQLHEÚG]LHQDZHW]QDïSU]\F]\Q\ SU]HUZDQLDG]LDïDQLDVNU\SWX'ODWHJRWHĝNRG SU]H]QDF]RQ\GRREVïXJLZ\MÈWNöZSRZLQLHQ ZVND]\ZDÊXĝ\WNRZQLNRPěUöGïRSUREOHPX function greetUser() { 2 ,QWHUSUHWHUG]LDïDWXWDM } function getName() { :\REUDěVRELHEïÈGWXWDM 3 VSRZRGRZDQ\SU]H]JUHHW8VHU } 1 var greeting = greetUser(); 4 alert(greeting); .LHG\LQWHUSUHWHUQDSRWNDEïÈGUR]SRF]\QD Z\V]XNLZDQLHNRGXSU]H]QDF]RQHJRGRREVïXJL EïÚGöZ:SRND]DQ\PRERNGLDJUDPLHNRGPD GRNïDGQLHWDNÈVDPÈVWUXNWXUÚMDNZGLDJUDPDFK QDSRF]ÈWNXUR]G]LDïX3ROHFHQLHZNURNX Xĝ\ZDIXQNFML]NURNXNWöUD]NROHLZ\NRU]\VWXMHIXQNFMÚ]NURNX:\REUDěVRELHZ\VWÈSLHQLH EïÚGXZNURNX 3R]JïRV]HQLXZ\MÈWNXLQWHUSUHWHU]DWU]\PXMH G]LDïDQLHLVSUDZG]DELHĝÈF\NRQWHNVWZ\NRQ\ZDQLDSRGNÈWHPNRGXSU]H]QDF]RQHJRGRREVïXJL EïÚGöZ-HĝHOLEïÈGZ\VWÈSLZIXQNFMLgetName() (3)LQWHUSUHWHUEÚG]LHV]XNDïZWHMZïDĂQLHIXQNFML NRGXREVïXJXMÈFHJREïÚG\ -HĝHOLEïÈGZ\VWÈSLZIXQNFMLDGDQDIXQNFMDQLH ]DZLHUDSURFHGXU\REVïXJLZ\MÈWNöZWRLQWHUSUHWHU SU]HFKRG]LGRZLHUV]DNRGXNWöU\Z\ZRïDïWÚ IXQNFMÚ:RPDZLDQ\PSU]\NïDG]LHIXQNFMD getName()]RVWDïDZ\ZRïDQDSU]H]greetUser() LLQWHUSUHWHUEÚG]LHV]XNDïNRGXREVïXJLZ\MÈWNöZ ZGUXJLHM]Z\PLHQLRQ\FKIXQNFML(2)-HĝHOL QLH]QDMG]LHWHJRNRGXZ\V]XNLZDQLHEÚG]LH NRQW\QXRZDQHQDNROHMQ\PSR]LRPLH,QWHUSUHWHU VSUDZG]LF]\ZVNU\SFLH]QDMGXMHVLÚNRG SU]H]QDF]RQ\GRREVïXJLEïÚGöZZW\PNRQWHNĂFLH Z\NRQ\ZDQLD2SHUDFMDEÚG]LHNRQW\QXRZDQDDĝ GRRVLÈJQLÚFLDNRQWHNVWXJOREDOQHJRZNWöU\P QDVWÈSLSU]HUZDQLHZ\NRQ\ZDQLDVNU\SWX LXWZRU]HQLHRELHNWXError -DNZLG]LV]SRGF]DVZ\V]XNLZDQLDNRGXSU]H]QDF]RQHJRGRREVïXJLEïÚGöZPDP\GRF]\QLHQLD ]SU]HMĂFLHPZJöUÚVWRVXDĝGRRVLÈJQLÚFLD NRQWHNVWXJOREDOQHJR-HĝHOLPLPRWHJRQDGDOQLH ]RVWDQLH]QDOH]LRQ\NRGSU]H]QDF]RQ\GRREVïXJL EïÚGöZVNU\SW]DWU]\PXMHG]LDïDQLHLWZRU]RQ\ MHVWRELHNWError 464 2%68*$%}':,'(%8*2:$1,( OBIEKT ERROR 2ELHNWErrorPRĝHSRPöFZZ\V]XNDQLXSRSHïQLRQ\FKEïÚGöZ DSU]HJOÈGDUNLLQWHUQHWRZHPDMÈQDU]ÚG]LDSRPDJDMÈFHZLFKRGF]\FLH 8WZRU]RQ\RELHNWErrorEÚG]LH]DZLHUDïZ\PLHQLRQHSRQLĝHMZïDĂFLZRĂFL :-DYD6FULSWLVWQLHMHVLHGHPZEXGRZDQ\FKW\SöZ RELHNWXEïÚGX]REDF]\V]MHQDGZöFKNROHMQ\FK VWURQDFK :$¥&,:2¥m 23,6 2%,(.7 23,6 name 7\SZ\NRQ\ZDQLD Error message 2SLV %ïÈGRJöOQ\ZV]\VWNLHSR]RVWDïH EïÚG\RSDUWHVÈQDW\PEïÚG]LH ğOH1XPEHU 1D]ZDSOLNX-DYD6FULSW 6\QWD[(UURU %ïÈGVNïDGQL 1XPHUZLHUV]DZNWöU\P Z\VWÈSLïEïÈG ReferenceError 3UöEDRGZRïDQLDGR]PLHQQHM NWöUDQLH]RVWDïD]DGHNODURZDQD Z]DNUHVLH 7\SH(UURU 1LHRF]HNLZDQ\W\SGDQ\FKNWöU\ QLHPRĝHE\ÊXVWDORQ\ RangeError /LF]E\VSR]DDNFHSWRZDQHJR ]DNUHVX URIError 1LHSUDZLGïRZHXĝ\FLHPHWRG encodeURI()decodeURI() LSRGREQ\FK EvalError 1LHSUDZLGïRZHXĝ\FLHPHWRG\ eval() lineNumber .LHG\Z\VWÈSLEïÈGZV]\VWNLH]ZLÈ]DQH]QLP LQIRUPDFMHPRĝQDRGF]\WDÊZNRQVROL-DYD6FULSW RIHURZDQHMSU]H]SU]HJOÈGDUNÚLQWHUQHWRZÈ :LÚFHMLQIRUPDFMLRNRQVROL]QDMG]LHV]ZSRGUR]G]LDOHķ1DU]ÚG]LDSURJUDPLVW\F]QHZSU]HJOÈGDUNDFKLNRQVROD-DYD6FULSWĵQDWRPLDVWMHMSU]\NïDG ZSU]HJOÈGDUFH&KURPHSRND]DQRQDU\VXQNX SRQLĝHM 1 1.:NRORU]HF]HUZRQ\PSROHZHMVWURQLH SRND]DQRSU]\NïDGEïÚGXVNïDGQL 6\QWD[(UURU =QDOH]LRQRQLHRF]HNLZDQ\]QDN 2 2.3RSUDZHMVWURQLHZLG]LV]ĝHEïÈGZ\VWÈSLï ZZLHUV]XF]ZDUW\PSOLNXRQD]ZLHerrors.js 2%68*$%}':,'(%8*2:$1,( 465 OBIEKT ERROR — CIĄG DALSZY 3U]HGVWDZLRQHWXWDMNRPXQLNDW\REïÚGDFKVÈJHQHURZDQH SU]H]&KURPH.RPXQLNDW\WH ZLQQ\FKSU]HJOÈGDUNDFKPRJÈ Z\JOÈGDÊLQDF]HM 6\QWD[(UURU ReferenceError NIEPRAWIDŁOWA SKŁADNIA ZMIENNA NIE ISTNIEJE 7HQEïÈGMHVWVSRZRGRZDQ\SU]H]QLHSUDZLGïRZH Xĝ\FLHUHJXïMÚ]\ND1DMF]ÚĂFLHMWRHIHNW]Z\NïHM OLWHUöZNL 7HQEïÈGMHVWVSRZRGRZDQ\SU]H]]PLHQQÈNWöUD QLH]RVWDïD]DGHNODURZDQDOXENWöUHMZDUWRĂÊMHVW VSR]D]DNUHVX NIEDOPASOWANE LUB BRAKUJĄCE ZNAKI NIEZADEKLAROWANA ZMIENNA CYTOWANIA var width = 12; var area = width * height ; document.write(“Witaj ’ ); 6\QWD[(UURU8QH[SHFWHG(2) BRAKUJĄCY NAWIAS ZAMYKAJĄCY GRFXPHQWJHW(OHPHQW%\,G ĳSDJHĳ 6\QWD[(UURU([SHFWHGWRNHQĳ ĳ BRAKUJĄCY PRZECINEK W TABLICY 5HIHUHQFH(UURU&DQĳWğQGYDULDEOH height NIEZDEFINIOWANA NAZWANA FUNKCJA document.write(UDQGRP)XQFWLRQ ); 5HIHUHQFH(UURU&DQĳWğQGYDULDEOH UDQGRP)XQFWLRQ 7HQVDPEïÈGZ\VWÈSLJG\QDNRñFXSROHFHQLD ]DEUDNQLHQDZLDVX] var list = [’Element 1’, ’Element 2’ ’Element 3’]; 6\QWD[(UURU([SHFWHGWRNHQĳ@ĳ NIEPRAWIDŁOWA NAZWA WŁAŚCIWOŚCI :SUDZG]LHZQD]ZLH]QDMGXMHVLÚVSDFMDDOH QD]ZDQLH]RVWDïDXMÚWDZFXG]\VïöZ XVHU ^ğUVW QDPHĴ%DUWHNĵODVW1DPH Ĵ1RZDNĵ` 6\QWD[(UURU([SHFWHGDQLGHQWLğHUEXW found ’name’ instead EvalError NIEPRAWIDŁOWE UŻYCIE FUNKCJI EVAL() )XQNFMDeval()SU]HSURZDG]DRV]DFRZDQLH WHNVWX]DSRPRFÈLQWHUSUHWHUDLXUXFKDPLDJR MDNRNRG WRQLHEÚG]LHRPDZLDQHZNVLÈĝFH %DUG]RU]DGNRVSRWNDV]VLÚ]EïÚGHPWHJRURG]DMX SRQLHZDĝSU]HJOÈGDUNLF]ÚVWR]JïDV]DMÈLQQHEïÚG\ ]DPLDVWEvalError 466 2%68*$%}':,'(%8*2:$1,( URIError NIEPRAWIDŁOWE UŻYCIE FUNKCJI URI -HĝHOLNWöU\NROZLHN]Z\PLHQLRQ\FK]QDNöZQLH ]RVWDQLHSUDZLGïRZR]QHXWUDOL]RZDQ\ZDGUHVLH 85/VSRZRGXMHWRZ\JHQHURZDQLHEïÚGX " ZNAK NIE ZOSTAŁ PRAWIDŁOWO ZNEUTRALIZOWANY GHFRGH85, ĳKWWSEEFFRPQHZVSKS ? a=1’); 85,(UURU85,HUURU 1DW\FKGZöFKVWURQDFKSRND]DQRVLHGHPUöĝQ\FKW\SöZRELHNWXEïÚGX Z-DYD6FULSWRUD]SHZQHQDMF]ÚĂFLHMVSRW\NDQHSU]\NïDG\WHJRURG]DMX EïÚGöZ-DNPRĝHV]]REDF]\ÊNRPXQLNDW\REïÚGDFKZ\ĂZLHWODQHSU]H] SU]HJOÈGDUNLF]ÚVWRE\ZDMÈ]DZLïH 7\SH(UURU RangeError WARTOŚĆ JEST NIEOCZEKIWANEGO TYPU LICZBA SPOZA ZAKRESU DANYCH 7HQURG]DMEïÚGXZ\VWÈSLMHĝHOLVSUöEXMHV]Xĝ\Ê OLF]E\VSR]DDNFHSWRZDQHJR]DNUHVX 7HQEïÈGSRMDZLDVLÚQDMF]ÚĂFLHMJG\SUöEXMHV] Xĝ\ÊQLHLVWQLHMÈFHJRRELHNWXOXEPHWRG\ NIE MOŻNA UTWORZYĆ TABLICY ZAWIERAJĄCEJ NIEPRAWIDŁOWA WIELKOŚĆ ZNAKU W NAZWIE –1 ELEMENTÓW OBIEKTU DOCUMENT YDUDQ$UUD\ QHZ$UUD\ -1 ); D RFXPHQWZULWH ĳ8SVĳ 5DQJH(UURU$UUD\VL]HLVQRWDVPDOO HQRXJKSRVLWLYHLQWHJHU 7\SH(UURUĳXQGHğQHGĳLVQRWDIXQFWLRQ HYDOXDWLQJĳ'RFXPHQWZULWH ĳ8SVĳ ĳ NIEPRAWIDŁOWA WIELKOŚĆ ZNAKU W NAZWIE METODY WRITE() document. W ULWH ĳ8SVĳ 7\SH(UURUĳXQGHğQHGĳLVQRWDIXQFWLRQ HYDOXDWLQJĳGRFXPHQW:ULWH ĳ8SVĳ ĳ METODA NIE ISTNIEJE YDUER[ ^` ER[ getArea() ; 8WZRU]HQLHSXVWHJR RELHNWX 3UöEDX]\VNDQLD GRVWÚSXGRJHW$UHD 7\SH(UURUĳXQGHğQHGĳLVQRWDIXQFWLRQ HYDOXDWLQJĳER[JHW$UHD ĳ GDY UŻYWANA JEST FUNKCJA TOFIXED(), PO PRZECINKU DZIESIĘTNYM MOŻE BYĆ MAKSYMALNIE 20 CYFR YDUSULFH SULFHWR)L[HG 21 ); 5DQJH(UURUWR)L[HG DUJXPHQWPXVWEH between 0 and 20 GDY UŻYWANA JEST FUNKCJA TOPRECISION(), LICZBA CYFR MOŻE WYNOSIĆ OD 1 DO 21 num = 2.3456; num.toPrecision( 22 ); 5DQJH(UURUWR3UHFLVLRQ DUJXPHQWPXVW be between 1 and 21 WĘZEŁ MODELU DOM NIE ISTNIEJE YDUHO GRFXPHQWJHW(OHPHQW%\,G ’z’); el.innerHTML = ’Mango’; 7\SH(UURUĳQXOOĳLVQRWDQREMHFW (evaluating ’el.innerHTML = ’Mango’’) NaN TO NIE JEST BŁĄD Error OGÓLNY OBIEKT BŁĘDU 7HQRJöOQ\RELHNWEïÚGXMHVWV]DEORQHP SURWRW\SHP QDSRGVWDZLHNWöUHJRWZRU]RQHVÈZV]\VWNLH SR]RVWDïHRELHNW\EïÚGX 8ZDJD-HĝHOLSU]HSURZDG]DV]RSHUDFMHPDWHPDW\F]QHQDZDUWRĂFLQLHEÚGÈFHMOLF]EÈWRPRĝHV] RWU]\PDÊZDUWRĂÊNaNDQLHW\SEïÚGX TO NIE JEST LICZBA var total = 3 * ĳ,Y\ĳ ; 2%68*$%}':,'(%8*2:$1,( 467 JAK RADZIĆ SOBIE Z BŁĘDAMI? 6NRURZLHV]F]\PMHVWEïÈGLMDNMHVWWUDNWRZDQ\SU]H]SU]HJOÈGDUNÚ PDV]GZDVSRVRE\QDMDNLHPRĝHV]VRELHUDG]LÊ]EïÚGDPL 1. DEBUGOWANIE SKRYPTU W CELU USUNIĘCIA BŁĘDÓW -HĝHOLEïÈGQDSRWNDV]SRGF]DVWZRU]HQLDVNU\SWX OXENWRĂ]JïRVLMHJRLVWQLHQLH PXVLV]GHEXJRZDÊ NRGZ\ĂOHG]LÊěUöGïREïÚGXDQDVWÚSQLH XVXQÈÊJR 3U]HNRQDV]VLÚĝHGRVWÚSQHZNDĝGHMQRZRF]HVQHMSU]HJOÈGDUFHLQWHUQHWRZHMQDU]ÚG]LDSURJUDPLVW\F]QHQLH]Z\NOHSRPDJDMÈZW\P]DGDQLX :UR]G]LDOHSR]QDV]QDU]ÚG]LDSURJUDPLVW\F]QH RIHURZDQHSU]H]SU]HJOÈGDUNL&KURPHL)LUHIR[ 1DU]ÚG]LDGRVWÚSQHZ&KURPHVÈLGHQW\F]QH ]RIHURZDQ\PLSU]H]2SHUÚ 3U]HJOÈGDUNL,(L6DIDULWDNĝHPDMÈZEXGRZDQH QDU]ÚG]LDSURJUDPLVW\F]QH ZNVLÈĝFHQLHPDP\ Z\VWDUF]DMÈFHMLORĂFLPLHMVFDQDLFKRPöZLHQLH 468 2%68*$%}':,'(%8*2:$1,( 2. ELEGANCKA OBSŁUGA BŁĘDÓW %ïÚG\PRĝQDHOHJDQFNRREVïXĝ\Ê]DSRPRFÈ SROHFHñWU\catchthrowLğQDOO\ &]DVDPLEïÈGZVNU\SFLHPRĝHZ\VWÈSLÊ ]SRZRGXNWöU\SR]RVWDMHSR]D7ZRMÈNRQWUROÈ 1DSU]\NïDGZ\NRQXMHV]ĝÈGDQLHGDQ\FK]ğUP\ WU]HFLHMDOHMHMVHUZHUQLHRGSRZLDGD:WDNLP SU]\SDGNXV]F]HJöOQLHZDĝQHMHVWSRVLDGDQLHNRGX SU]H]QDF]RQHJRGRREVïXJLEïÚGöZ :GDOV]HMF]ÚĂFLUR]G]LDïXGRZLHV]VLÚMDNPRĝQD VSUDZG]LÊF]\SHZLHQNRPSRQHQWG]LDïDDWDNĝH MDN]DRIHURZDÊUR]ZLÈ]DQLHDOWHUQDW\ZQHJG\ ZVSRPQLDQ\NRPSRQHQWQLHG]LDïD PROCES DEBUGOWANIA 3URFHVGHEXJRZDQLDSU]\SRPLQDGHGXNFMÚF]\OLHOLPLQRZDQLHSRWHQFMDOQ\FK SU]\F]\QEïÚGX2WRRJöOQ\RSLVWHFKQLNNWöUHEÚG]LHP\DQDOL]RZDÊ QDNROHMQ\FKVWURQDFK6SUöEXM]DZÚ]LÊPLHMVFHZ\VWÚSRZDQLDEïÚGX DQDVWÚSQLHSRV]XNDMZVND]öZHN GDZIE WYSTĘPUJE PROBLEM? NA CZYM DOKŁADNIE POLEGA PROBLEM? 3U]HGHZV]\VWNLPVSUöEXM]DZÚ]LÊREV]DUQD NWöU\PZ\VWÚSXMHSUREOHP7RMHVWV]F]HJöOQLH ZDĝQHZGïXJLFKVNU\SWDFK .LHG\VÈG]LV]ĝH]QDOD]ïHĂREV]DUZNWöU\P Z\VWÚSXMHEïÈGPRĝHV]VSUöERZDÊRNUHĂOLÊ U]HF]\ZLVW\ZLHUV]NRGXSRZRGXMÈF\WHQEïÈG 2GF]\WDMNRPXQLNDWREïÚG]LH 6SUDZGěMDNDMHVWQD]ZDVNU\SWXNWöU\ VSRZRGRZDïEïÈG 8VWDOQXPHUZLHUV]DNRGXZNWöU\PLVWQLHQLH EïÚGXVWDïRVLÚRF]\ZLVWHGODLQWHUSUHWHUD -DN ]REDF]\V]przyczynaEïÚGXPRĝH]QDMGRZDÊ VLÚZHZF]HĂQLHMV]HMF]ÚĂFLVNU\SWXZVND]DQ\ ZLHUV]WRSXQNWRGNWöUHJRNRQW\QXRZDQLH VNU\SWXMHVWQLHPRĝOLZH 2NUHĂOW\SEïÚGX SU]\F]\QDEïÚGXPRĝHE\Ê LQQD .LHG\]GHğQLXMHV]SXQNW\NRQWUROQHPRĝHV] VSUDZG]LÊF]\]QDMGXMÈFHVLÚZSREOLĝX]PLHQQH PDMÈRF]HNLZDQHZDUWRĂFL-HĂOLQLHVSUDZGě ZF]HĂQLHMV]ÈF]ÚĂÊVNU\SWX 6SUDZGěGRMDNLHJRPLHMVFDMHVWZ\NRQ\ZDQ\ VNU\SW :\NRU]\VWDMQDU]ÚG]LDGRZ\ĂZLHWODQLDZNRQVROL NRPXQLNDWöZSRND]XMÈF\FKPLHMVFHGRNWöUHJR MHVWZ\NRQ\ZDQ\VNU\SW ľ ľ ľ ľ 3RG]LHONRGQDPQLHMV]HIUDJPHQW\DE\ SU]HWHVWRZDÊPQLHMV]HEORNLSRV]F]HJöOQ\FK IXQNFMRQDOQRĂFL :DUWRĂFL]PLHQQ\FKZ\ĂZLHWOZNRQVROL =SR]LRPXNRQVROLZ\ZRïXMIXQNFMHDE\ VSUDZG]LÊF]\LFKZDUWRĂFL]ZURWQHVÈ]JRGQH ]RF]HNLZDQLDPL 6SUDZGěF]\LVWQLHMÈRELHNW\LPDMÈRF]HNLZDQH PHWRG\RUD]ZïDĂFLZRĂFL ľ ľ 6SUDZGěOLF]EÚSDUDPHWUöZIXQNFMLOXEOLF]EÚ HOHPHQWöZ]QDMGXMÈF\FKVLÚZWDEOLF\ :PLHMVFDFKSRWHQFMDOQHJRZ\VWÚSRZDQLD EïÚGöZXĝ\MSXQNWöZNRQWUROQ\FK 6SRZRGXMÈRQHZVWU]\PDQLHZ\NRQ\ZDQLDVNU\SWX LSR]ZROÈQDSU]HMU]HQLHZDUWRĂFLSU]HFKRZ\ZDQ\FKZ]PLHQQ\FK 3RQDGWRPXVLV]E\ÊSU]\JRWRZDQ\QDSRZWöU]HQLH FDïHJRSRZ\ĝV]HJRSURFHVXMHĂOLXVXQÈïHĂMHGHQ EïÈGLW\PVDP\PRGNU\ïHĂNROHMQ\Į -HĝHOLXWNQÈïHĂUR]ZLÈ]XMÈFSHZQ\SUREOHP SRGHMPLMMDNVXJHUXMHZLHOXSURJUDPLVWöZ SUöEÚRSLVDQLD RSRZLHG]HQLDQDJïRV FDïHM V\WXDFMLLQQHPXSURJUDPLĂFLH:\MDĂQLMMDNLHMHVW RF]HNLZDQH]DFKRZDQLHDWDNĝHZVNDĝPLHMVFH ZNWöU\PSRMDZLDVLÚEïÈG0RĝHWRE\ÊHIHNW\ZQ\ VSRVöEZ\V]XNLZDQLDEïÚGöZZHZV]\VWNLFK MÚ]\NDFKSURJUDPRZDQLD -HĝHOLQLHPRĝHV] VNRU]\VWDÊ]SRPRF\SURJUDPLVW\VSUöEXMRSLVDÊ WÚV\WXDFMÚGODVDPHJRVLHELH *G\SUREOHPMHVWWUXGQ\GRZ\ĂOHG]HQLDEDUG]R ïDWZRVWUDFLÊUDFKXEÚFR]RVWDïRDFRQLH]RVWDïR VSUDZG]RQH'ODWHJRWHĝRGFKZLOLUR]SRF]ÚFLD SURFHVXGHEXJRZDQLDQRWXMFR]RVWDïR]URELRQH LMDNLRWU]\PDïHĂHIHNW1LH]DOHĝQLHRGWHJRMDN EDUG]RVWUHVXMÈFDEÚG]LHV\WXDFMDMHĂOLW\ONR ]DFKRZDV]VSRNöML]DVWRVXMHV]PHWRG\F]QH SRGHMĂFLHSUREOHPZ\GDVLÚPQLHMSU]\WïDF]DMÈF\ LV]\EFLHMJRUR]ZLÈĝHV] 2%68*$%}':,'(%8*2:$1,( 469 NARZĘDZIA PROGRAMISTYCZNE W PRZEGLĄDARKACH I KONSOLA JAVASCRIPT ']LÚNLNRQVROL-DYD6FULSWPRĝQDGRZLHG]LHÊVLÚĝHZVNU\SFLHLVWQLHMH SUREOHPJG]LHV]XNDÊSUREOHPXDWDNĝH]MDNLHJRURG]DMXSUREOHPHP PDP\GRF]\QLHQLD 1DW\FKGZöFKVWURQDFKSU]HGVWDZLRQHVÈ SROHFHQLDVïXĝÈFHGRZ\ĂZLHWODQLDNRQVROLZH ZV]\VWNLFKQDMZDĝQLHMV]\FKSU]HJOÈGDUNDFK MHGQDNZSR]RVWDïHMF]ÚĂFLUR]G]LDïXVNRQFHQWUXMHP\ VLÚQD&KURPLHL)LUHIRNVLH CHROME I OPERA :NRPSXWHUDFK3&QDFLĂQLMNODZLV]F12OXE 3U]HMGěGRPHQXRSFML LNRQDSU]HGVWDZLDMÈFD WU]\OLQLH :\ELHU]RSFMÚ1DU]ÚG]LDOXE:LÚFHMQDU]ÚG]L :\ELHU]Konsola JavaScriptOXE1DU]ÚG]LDGOD programistów :NRPSXWHUDFK0DFQDFLĂQLMNODZLV]H $OW&PG-OXE 3U]HMGěGRPHQX:LGRN :\ELHU]RSFMÚProgramista :\ELHU]Konsola JavaScriptOXE1DU]ÚG]LDGOD programistówDQDVWÚSQLHConsole INTERNET EXPLORER 1DFLĂQLMNODZLV]F12OXE 3U]HMGěGRPHQXXVWDZLHñZSUDZ\PJöUQ\P URJX :\ELHU]RSFMÚ1DU]ÚG]LDGHZHORSHUVNLH) 470 2%68*$%}':,'(%8*2:$1,( 3URGXFHQFLSU]HJOÈGDUHNF]DVDPL]PLHQLDMÈ VSRVöEX]\VNDQLDGRVWÚSXGRQDU]ÚG]LSURJUDPLVW\F]Q\FK-HĝHOLSU]HGVWDZLRQHWXWDMLQVWUXNFMH RNDĝÈVLÚQLHSU]\GDWQHSU]HV]XNDMSOLNLSRPRF\ SU]HJOÈGDUNLSRGNÈWHPKDVïDkonsola .RQVROD-DYD6FULSWWRMHGQR]ZLHOXQDU]ÚG]LSURJUDPLVW\F]Q\FKRIHURZDQ\FK SU]H]ZV]\VWNLHQRZRF]HVQHSU]HJOÈGDUNLLQWHUQHWRZH .LHG\SU]HSURZDG]DV]SURFHVGHEXJRZDQLD SRPRFQHPRĝHE\ÊVSUDZG]HQLHF]\GDQ\EïÈG Z\VWÚSXMHZUöĝQ\FKSU]HJOÈGDUNDFKSRQLHZDĝ JHQHUXMÈRQHUöĝQHNRPXQLNDW\REïÚGDFK -HĝHOLSOLNerror.htmlRWZRU]\V]ZSU]HJOÈGDUFH DQDVWÚSQLHSU]HMG]LHV]GRNRQVROLWR]REDF]\V] Z\ĂZLHWORQ\NRPXQLNDWREïÚG]LH FIREFOX :NRPSXWHUDFK3&QDFLĂQLMNODZLV]H Ctrl+Shift+KOXE 3U]HMGěGRPHQX1DU]ÚG]LD :\ELHU]Dla twórców witryn 2WZöU]Konsola WWW :NRPSXWHUDFK0DFQDFLĂQLMNODZLV]H $OW&PG.OXE 3U]HMGěGRPHQX1DU]ÚG]LD :\ELHU]Dla twórców witryn 2WZöU]Konsola WWW SAFARI 1DFLĂQLMNODZLV]H$OW&PG.OXE 3U]HMGěGRPHQXProgramowanie :\ELHU]RSFMÚ3RNDĝNRQVROÚEïÚGöZ -HĝHOLPHQXProgramowanieQLHMHVWZ\ĂZLHWODQH 3U]HMGěGRPHQXSafari :\ELHU]Preferencje… :\ELHU]Zaawansowane =D]QDF]SROHZ\ERUXPokazuj menu Programowanie na pasku menu 2%68*$%}':,'(%8*2:$1,( 471 JAK WYSZUKIWAĆ BŁĘDY ZA POMOCĄ PRZEGLĄDARKI CHROME? .RQVROD]RVWDQLHZ\ĂZLHWORQDJG\ZNRG]LH-DYD6FULSWZ\VWÈSLEïÈG .RQVRODEÚG]LHZ\ĂZLHWODïDZLHUV]ZNWöU\PLVWQLHQLHEïÚGXVWDïRVLÚ RF]\ZLVWHGODLQWHUSUHWHUD 1 3 2 =D]QDF]RQRRSFMÚConsole 7\SEïÚGXRUD]NRPXQLNDW REïÚG]LHVÈZ\ĂZLHWORQH ZNRORU]HF]HUZRQ\P 1D]ZDSOLNXLQXPHUZLHUV]D VÈZ\ĂZLHWORQHSRSUDZHM VWURQLHNRQVROL 3DPLÚWDMĝHSRGDQ\QXPHU ZLHUV]DQLH]DZV]HZVND]XMH ZLHUV]ZNWöU\PIDNW\F]QLH LVWQLHMHEïÈG=DPLDVWWHJRRNUHĂODZLHUV]ZNWöU\PLVWQLHQLH EïÚGXVWDïRVLÚRF]\ZLVWHGOD LQWHUSUHWHUD 2%68*$%}':,'(%8*2:$1,( -HĝHOLEïÈGXQLHPRĝOLZLGDOV]H Z\NRQ\ZDQLHVNU\SWXNRQVROD EÚG]LH]DZLHUDïDLQIRUPDFMH W\ONRRMHGQ\PEïÚG]LH 3RXVXQLÚFLXEïÚGXPRĝHVLÚ RND]DÊĝHZVNU\SFLHLVWQLHMÈ MHV]F]HLQQH JAK WYSZUKIWAĆ BŁĘDY ZA POMOCĄ PRZEGLĄDARKI FIREFOX? 1 2 3 =D]QDF]RQRRSFMÚConsole :ïÈF]RQHPXV]ÈE\ÊMHG\QLH RSFMHJavaScriptLLogging 1DWRPLDVWRSFMHNetCSS LSecurityGRVWDUF]DMÈLQQH LQIRUPDFMH 4 7\SEïÚGXRUD]NRPXQLNDW REïÚG]LHVÈZ\ĂZLHWODQHSR OHZHMVWURQLH 3RSUDZHMVWURQLHNRQVROL MHVWZ\ĂZLHWODQDQD]ZDSOLNX -DYD6FULSWRUD]QXPHUZLHUV]D ZNWöU\PLVWQLHQLHEïÚGXVWDïR VLÚRF]\ZLVWH =ZUöÊXZDJÚĝHSRGF]DVGHEXJRZDQLD]PLQLPDOL]RZDQHJR NRGX-DYD6FULSWRSHUDFMDEÚG]LH ïDWZLHMV]DMHĝHOLNRG]RVWDQLH QDMSLHUZUR]ZLQLÚW\ 2%68*$%}':,'(%8*2:$1,( WYDAWANIE POLECEŃ W KONSOLI PRZEGLĄDARKI CHROME :NRQVROLPRĝQDUöZQLHĝZ\GDZDÊSROHFHQLD LREVHUZRZDÊZ\QLNLLFKZ\NRQ\ZDQLD 1 3RZ\ĝHMPRĝHV]]REDF]\Ê SU]\NïDGNRGX-DYD6FULSW ZSURZDG]DQHJREH]SRĂUHGQLR ZNRQVROL7RMHVWVSRVöEQD V]\ENLHLïDWZHWHVWRZDQLHNRGX 474 *G\ZSURZDG]DV]ZLHUV] NRGXLQWHUSUHWHUPRĝHXG]LHOLÊ RGSRZLHG]L:RPDZLDQ\P SU]\NïDG]LHWRZ\ĂZLHWOHQLH ZDUWRĂFLNDĝGHMXWZRU]RQHM ]PLHQQHM 2%68*$%}':,'(%8*2:$1,( :V]\VWNLH]PLHQQHXWZRU]RQH ZNRQVROLEÚGÈ]DFKRZDQHDĝ GRFKZLOLXVXQLÚFLD]DZDUWRĂFL NRQVROL :SU]HJOÈGDUFH&KURPH]QDN ķ]DND]ZMD]GXĵMHVWXĝ\ZDQ\ GRXVXQLÚFLD]DZDUWRĂFLNRQVROL WYDAWANIE POLECEŃ W KONSOLI PRZEGLĄDARKI FIREFOX 1 2 :SU]HJOÈGDUFH)LUHIR[ SU]\FLVNClearMHVWXĝ\ZDQ\ GRXVXQLÚFLD]DZDUWRĂFLNRQVROL -HJRNOLNQLÚFLHLQIRUPXMH LQWHUSUHWHUĝHQLHPXVLGïXĝHM SDPLÚWDÊ]PLHQQ\FKXWZRU]RQ\FKGRWÈGZNRQVROL 6WU]DïNLZOHZRLSUDZR SRND]XMÈZLHUV]HZSURZDG]RQH SU]H]SURJUDPLVWÚRUD]ZLHUV]H Z\JHQHURZDQHSU]H]LQWHUSUHWHU 2%68*$%}':,'(%8*2:$1,( 475 WYŚWIETLANIE PRZEZ SKRYPT INFORMACJI W KONSOLI 3U]HJOÈGDUNLLQWHUQHWRZHZ\SRVDĝRQHZNRQVROÚPDMÈRELHNWconsole RIHUXMÈF\NLONDPHWRG]DSRPRFÈNWöU\FKVNU\SWPRĝHZ\ĂZLHWODÊGDQH ZNRQVROL7HQRELHNWMHVWXGRNXPHQWRZDQ\Z$3,&RQVROH 1 2 3 0HWRGDconsole.log() PRĝHZ\ĂZLHWODÊZNRQVROL GDQHSRFKRG]ÈFH]HVNU\SWX -HĝHOLRWZRU]\V]SOLN console-log.html]REDF]\V] ĝHSRZF]\WDQLXVWURQ\ ZNRQVROL]RVWDQLHZ\ĂZLHWORQ\ WHNVW 476 :VSRPQLDQ\WHNVWPRĝH ZVND]DÊGRNWöUHJRPLHMVFD MHVWZ\NRQ\ZDQ\VNU\SWRUD] MDNLHRWU]\PXMHZDUWRĂFL :RPDZLDQ\PSU]\NïDG]LH ]GDU]HQLHblurSRZRGXMHĝH ZDUWRĂÊZSURZDG]DQDZSROX WHNVWRZ\PMHVWZ\ĂZLHWODQD ZNRQVROL 2%68*$%}':,'(%8*2:$1,( :\ĂZLHWOHQLH]PLHQQ\FK SR]ZDODQDVSUDZG]HQLHMDNLH VÈLFKZDUWRĂFLZLGRF]QHGOD LQWHUSUHWHUD:RPDZLDQ\P SU]\NïDG]LHZDUWRĂFL]PLHQQ\FK VÈZ\ĂZLHWODQHZNRQVROLSR Z\VïDQLXIRUPXODU]DVLHFLRZHJR WYŚWIETLANIE DANYCH W KONSOLI :SU]HGVWDZLRQ\PSU]\NïDG]LH SRND]DQRZLHOHZ\ZRïDñ PHWRG\console.log() .LHG\Xĝ\WNRZQLNZ\ĂOH IRUPXODU]VLHFLRZ\Z\ĂZLHWORQH EÚGÈF]WHU\ZDUWRĂFL :LHUV]SLHUZV]\ZVND]XMHĝH VNU\SW]RVWDïXUXFKRPLRQ\ 1DVWÚSQLHSURFHGXUDREVïXJL ]GDU]HñF]HNDDĝXĝ\WNRZQLN ZSURZDG]LGDQHZSROXWHNVWRZ\PZSURZDG]RQDZIRUPXODU]XVLHFLRZ\PZDUWRĂÊEÚG]LH Z\ĂZLHWORQDZNRQVROL 8ĝ\WNRZQLNNOLNQÈïSU]\FLVN Z\V\ïDMÈF\IRUPXODU] :DUWRĂÊZSURZDG]RQD ZSROX'ïXJRĂÊ :DUWRĂÊZSURZDG]RQD ZSROX:\VRNRĂÊ :DUWRĂÊ]PLHQQHMarea 0HWRGDconsole.log()PRĝH MHGQRF]HĂQLHZ\ĂZLHWODÊZLHOH ZDUWRĂFLZNRQVROL0XV]ÈE\Ê RQHUR]G]LHORQHSU]HFLQNDPL MDNSRND]DQRSRGF]DVZ\ĂZLHWODQLDZ\VRNRĂFL(5) ']LÚNLZ\ĂZLHWOHQLXZ\PLHQLRQ\FKGDQ\FKPRĝQDVSUDZG]LÊ JAVASCRIPT 1 2 F]\ZDUWRĂFLVÈ]JRGQH ]RF]HNLZDQLDPL 3U]HGXĝ\FLHPVNU\SWX ZU]HF]\ZLVWHMZLWU\QLHWHJR URG]DMXNRGGHEXJXMÈF\]DZV]H QDOHĝ\XVXZDÊ c10/js/console-log.js FRQVROHORJ ĳ,RWRMHVWHĂP\ĳ :VND]XMHĝHVNU\SW]RVWDïXUXFKRPLRQ\ var $form, width, height, area; $form = $(’#calculator’); ĳIRUPLQSXW>W\SH ĵWH[Wĵ@ĳ RQ ĳEOXUĳIXQFWLRQ ^ .LHG\SROHSU]HVWDMHE\ÊDNW\ZQH FRQVROHORJ ĳ:SURZDG]LïHĂĳWKLVYDOXH :\ĂZLHWOHQLHZDUWRĂFLZNRQVROL }); 3 $(’#calculator’).on(’submit’, function(e) { .LHG\Xĝ\WNRZQLNQDFLĂQLHSU]\FLVNZ\V\ïDMÈF\IRUPXODU] HSUHYHQW'HIDXOW 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D FRQVROHORJ ĳ.OLNQÈïHĂSU]\FLVNĳ :VND]XMHNOLNQLÚFLHSU]\FLVNX 4 width = $(’#width’).val(); FRQVROHORJ ĳ'ïXJRĂÊĳZLGWK :\ĂZLHWOHQLHZNRQVROLZDUWRĂFLGïXJRĂFL 5 height = $(’#height’).val(); FRQVROHORJ ĳ:\VRNRĂÊĳKHLJKW :\ĂZLHWOHQLHZNRQVROLZDUWRĂFLZ\VRNRĂFL 6 area = width * height; console.log(area); :\ĂZLHWOHQLHZNRQVROLZDUWRĂFLSROD IRUPDSSHQG ĳS!ĳDUHDĳS!ĳ }); 2%68*$%}':,'(%8*2:$1,( 477 WIĘCEJ METOD KONSOLI :FHOXUR]UöĝQLHQLDURG]DMöZ NRPXQLNDWöZZ\ĂZLHWODQ\FK ZNRQVROLPRĝQDXĝ\ÊWU]HFK UöĝQ\FKPHWRG:\NRU]\VWXMÈ RQHRGPLHQQHNRORU\LLNRQ\ 0HWRGDconsole.info() PRĝHE\ÊXĝ\ZDQDGRZ\ĂZLHWODQLDLQIRUPDFMLRJöOQ\FK 0HWRGDconsole.warn() PRĝHE\ÊXĝ\ZDQDGRZ\ĂZLHWODQLDRVWU]HĝHñ 0HWRGDconsole.error() PRĝHE\ÊXĝ\ZDQDGRZ\ĂZLHWODQLDNRPXQLNDWöZREïÚGDFK c10/js/console-methods.js 1 7HFKQLNDWDV]F]HJöOQLH SU]\GDMHVLÚGRZVND]\ZDQLD QDWXU\LQIRUPDFMLZ\ĂZLHWODQ\FK QDHNUDQLH :SU]\SDGNX SU]HJOÈGDUNL)LUHIR[XSHZQLM VLÚĝHZ\EUDQD]RVWDïDRSFMD Logging JAVASCRIPT FRQVROHLQIR ĳ,RWRMHVWHĂP\ĳ ,QIRVNU\SW]RVWDïXUXFKRPLRQ\ var $form, width, height, area; $form = $(’#calculator’); 2 ĳIRUPLQSXW>W\SH ĵWH[Wĵ@ĳ RQ ĳEOXUĳIXQFWLRQ ^ 3RZ\VWÈSLHQLX]GDU]HQLDEOXU FRQVROHZDUQ ĳ:SURZDG]LïHĂĳWKLVYDOXH 2VWU]HĝHQLHZSURZDG]RQHGDQH }); $(’#calculator’).on(’submit’, function(e) { HSUHYHQW'HIDXOW 3RZ\VïDQLXIRUPXODU]DVLHFLRZHJR width = $(’#width’).val(); height = $(’#height’).val(); 3 area = width * height; console.error(area); %ïÈGZ\ĂZLHWOHQLHREOLF]RQHJRSROD IRUPDSSHQG ĳSFODVV ĵUHVXOWĵ!ĳDUHDĳS!ĳ 478 2%68*$%}':,'(%8*2:$1,( GRUPOWANIE KOMUNIKATÓW -HĝHOLZNRQVROLFKFHV] Z\ĂZLHWOLÊ]ELöUSRZLÈ]DQ\FK]HVREÈLQIRUPDFML PRĝHV]Z\NRU]\VWDÊPHWRGÚ FRQVROHJURXS ZFHOXJUXSRZDQLDNRPXQLNDWöZ1DVWÚSQLH UR]ZLMDV]LZ\ĂZLHWODV]Z\QLNL 0HWRGDSRELHUDMHGHQSDUDPHWU QD]ZÚXĝ\ZDQÈGODJUXS\ NRPXQLNDWöZ=DZDUWRĂÊJUXS\ PRĝQDUR]ZLMDÊLXNU\ZDÊ NOLNDMÈFWUöMNÈWZ\ĂZLHWODQ\ RERNQD]Z\JUXS\MDNSRND]DQRQDU\VXQNXSRQLĝHM JAVASCRIPT 3R]DNRñF]HQLXJUXSRZDQLD Z\QLNöZNRQLHFJUXS\MHVW V\JQDOL]RZDQ\Z\ZRïDQLHP PHWRG\FRQVROHJURXS(QG FMVFRQVROHJURXSMV var $form = $(’#calculator’); $form.on(’submit’, function(e) { .RGZ\NRQ\ZDQ\SRZ\VïDQLXIRUPXODU]D HSUHYHQW'HIDXOW FRQVROHORJ ĳ.OLNQÈïHĂSU]\FLVNĳ :\ĂZLHWOHQLHLQIRUPDFMLRNOLNQLÚW\PSU]\FLVNX var width, height, area; width = $(’#width’).val(); height = $(’#height’).val(); area = width * height; 1 2 FRQVROHJURXS ĳ2EOLF]HQLHSRODĳ 3RF]ÈWHNJUXSRZDQLD FRQVROHLQIR ĳ6]HURNRĂÊĳZLGWK :\ĂZLHWOHQLHGïXJRĂFL FRQVROHLQIR ĳ:\VRNRĂÊĳKHLJKW :\ĂZLHWOHQLHZ\VRNRĂFL console.log(area); :\ĂZLHWOHQLHSROD FRQVROHJURXS(QG .RQLHFJUXSRZDQLD IRUPDSSHQG ĳS!ĳDUHDĳS!ĳ }); 2%68*$%}':,'(%8*2:$1,( 479 WYŚWIETLENIE DANYCH TABELARYCZNYCH :SU]HJOÈGDUNDFKREVïXJXMÈF\FKPHWRGÚconsole.table() PRĝQDZ\ĂZLHWOLÊGDQH Z\MĂFLRZHZSRVWDFLWDEHOL ]DZLHUDMÈFH RELHNW\ WDEOLFH]DZLHUDMÈFHLQQH RELHNW\OXEWDEOLFH ľ ľ 3U]HGVWDZLRQ\SRQLĝHMSU]\NïDG SRND]XMHGDQHSRFKRG]ÈFH ]RELHNWXcontacts:\ĂZLHWODQHVÈQDVWÚSXMÈFHGDQH PLDVWRQXPHUWHOHIRQXLNUDM 7RUR]ZLÈ]DQLHV]F]HJöOQLH Xĝ\WHF]QHZSU]\SDGNXGDQ\FK SRFKRG]ÈF\FK]ğUPWU]HFLFK 1DU\VXQNXSRQLĝHMSRND]DQR Z\QLNX]\VNDQ\ZSU]HJOÈGDUFH &KURPH Z2SHU]HEÚG]LH LGHQW\F]Q\ 6DIDULZ\ĂZLHWOL UR]ZLMDQHSDQHOH*G\SRZVWDZDïDWDNVLÈĝNDSU]HJOÈGDUNL )LUHIR[L,(QLHREVïXJLZDï\WHM PHWRG\ c10/js/console-table.js JAVASCRIPT var contacts = { ,QIRUPDFMHVÈSU]HFKRZ\ZDQHZSRVWDFLOLWHUDïXRELHNWX Ĵ/RQG\Qĵ^ Ĵ7HOĵĴ ĵ Ĵ.UDMĵĴ8.ĵ` Ĵ6\GQH\ĵ^ Ĵ7HOĵĴ ĵ Ĵ.UDMĴĴ$XVWUDOLDĵ` Ĵ1RZ\-RUNĵ^ Ĵ7HOĵĴ ĵ Ĵ.UDMĴĴ86$ĵ` } 1 console.table(contacts); :\ĂZLHWOHQLHGDQ\FKZNRQVROL YDUFLW\FRQWDFW'HWDLOV=DGHNODURZDQLH]PLHQQ\FKGODVWURQ\ contactDetails = ’’; =PLHQQDSU]H]QDF]RQDQDGDQHZ\ĂZLHWODQHQDVWURQLH HDFK FRQWDFWVIXQFWLRQ FLW\FRQWDFWV ^,WHUDFMDSU]H]GDQH FRQWDFW'HWDLOV FLW\ĳĳFRQWDFWV7HOĳEU!ĳ }); ĳKĳ DIWHU ĳS!ĳFRQWDFW'HWDLOVĳS!ĳ 8PLHV]F]HQLHGDQ\FKQDVWURQLH 480 2%68*$%}':,'(%8*2:$1,( WYŚWIETLANIE WARUNKOWE =DSRPRFÈPHWRG\ console.assert()PRĝQD VSUDZG]LÊF]\SRGDQ\ZDUXQHN ]RVWDïVSHïQLRQ\LZ\ĂZLHWOLÊ NRPXQLNDWW\ONRZWHG\JG\ ZDUWRĂFLÈZ\UDĝHQLDMHVWtrue :SU]HGVWDZLRQ\PSRQLĝHM SU]\NïDG]LHJG\Xĝ\WNRZQLN ZSURZDG]LGDQHZHMĂFLRZHNRG VSUDZG]LF]\ZDUWRĂÊZ\QRVL 10OXEZLÚFHM-HĝHOLQLHQD HNUDQLH]RVWDQLHZ\ĂZLHWORQ\ NRPXQLNDW JAVASCRIPT 'UXJDRSHUDFMDVSUDZG]HQLD GRW\F]\REOLF]RQHJRSRODNWöUH SRZLQQRE\ÊZDUWRĂFLÈOLF]ERZÈ-HĝHOLQLHMHVWR]QDF]D WRĝHXĝ\WNRZQLNZSURZDG]Lï ZDUWRĂÊLQQÈQLĝOLF]ERZD c10/js/console-assert.js var $form, width, height, area; $form = $(’#calculator’); 1 ĳIRUPLQSXW>W\SH ĵWH[Wĵ@ĳ RQ ĳEOXUĳIXQFWLRQ ^ 7HQNRPXQLNDW]RVWDQLHZ\ĂZLHWORQ\W\ONRZWHG\JG\ZDUWRĂÊZSURZDG]RQD SU]H]Xĝ\WNRZQLNDMHVWPQLHMV]DQLĝ FRQVROHDVVHUW WKLVYDOXH!ĳ8ĝ\WNRZQLNZSURZDG]LïZDUWRĂÊPQLHMV]ÈQLĝĳ }); $(’#calculator’).on(’submit’, function(e) { HSUHYHQW'HIDXOW FRQVROHORJ ĳ.OLNQÈïHĂSU]\FLVNĳ 2 width = $(’#width’).val(); height = $(’#height’).val(); area = width * height; 7HQNRPXQLNDW]RVWDQLHZ\ĂZLHWORQ\W\ONRZWHG\JG\ZDUWRĂÊZSURZDG]RQD SU]H]Xĝ\WNRZQLNDQLHMHVWOLF]ERZD FRQVROHDVVHUW LV1XPHULF DUHD ĳ8ĝ\WNRZQLNZSURZDG]LïZDUWRĂÊQLHOLF]ERZÈĳ IRUPDSSHQG ĳS!ĳDUHDĳS!ĳ }); 2%68*$%}':,'(%8*2:$1,( 481 PUNKTY KONTROLNE :\NRQ\ZDQLHVNU\SWXPRĝHV]]DWU]\PDÊZGRZROQ\PZLHUV]X]DSRPRFÈ SXQNWXNRQWUROQHJR1DVWÚSQLHPDV]PRĝOLZRĂÊVSUDZG]HQLDZDUWRĂFL SU]HFKRZ\ZDQ\FKSU]H]]PLHQQHZGDQHMFKZLOL 1 CHROME 4 2 3 1.:\ELHU]RSFMÚSources 2.:SDQHOXSROHZHMVWURQLH Z\ELHU]VNU\SW]NWöU\P SUDFXMHV].RGVNU\SWX]RVWDQLH Z\ĂZLHWORQ\ZSDQHOXSR SUDZHMVWURQLH 3.:\V]XNDMQXPHUZLHUV]D ZNWöU\PPD]RVWDÊ]DWU]\PDQ\ VNU\SW.OLNQLMWHQZLHUV] 4.3RXUXFKRPLHQLXVNU\SWX MHJRG]LDïDQLH]RVWDQLH]DWU]\ PDQHZHZVND]DQ\PZLHUV]X *G\XPLHĂFLV]NXUVRUP\V]\ QDGQD]ZÈGRZROQHM]PLHQQHM PRĝHV]VSUDZG]LÊMHMZDUWRĂÊ ZWUDNFLHZ\NRQ\ZDQLDVNU\SWX 1 FIREFOX 4 2 3 2%68*$%}':,'(%8*2:$1,( 1.:\ELHU]RSFMÚ'HEXJJHU 2.:SDQHOXSROHZHMVWURQLH Z\ELHU]VNU\SW]NWöU\P SUDFXMHV].RGVNU\SWX]RVWDQLH Z\ĂZLHWORQ\ZSDQHOXSR SUDZHMVWURQLH 3.:\V]XNDMQXPHUZLHUV]D ZNWöU\PPD]RVWDÊ]DWU]\PDQ\ VNU\SW.OLNQLMWHQZLHUV] 4.3RXUXFKRPLHQLXVNU\SWX MHJRG]LDïDQLH]RVWDQLH]DWU]\ PDQHZHZVND]DQ\PZLHUV]X *G\XPLHĂFLV]NXUVRUP\V]\ QDGQD]ZÈGRZROQHM]PLHQQHM EÚG]LHV]PöJïVSUDZG]LÊMHM ZDUWRĂÊZWUDNFLHZ\NRQ\ZDQLD VNU\SWX PRZEJŚCIE PRZEZ KOD -HĝHOLXVWDZLV]NLONDSXQNWöZNRQWUROQ\FKWRPRĝHV]VLÚPLÚG]\QLPL SRUXV]DÊDE\VSUDZG]LÊJG]LHZDUWRĂFLXOHJDMÈ]PLDQLHLJG]LHPRJÈ SRMDZLDÊVLÚSUREOHP\ 3RXVWDZLHQLXSXQNWöZNRQ WUROQ\FK]REDF]\V]ĝHGHEXJHU SR]ZDODQDSU]HMĂFLHSU]H]NRG ZLHUV]SRZLHUV]XLSRGJOÈGDQLH ZDUWRĂFL]PLHQQ\FKZWUDNFLH Z\NRQ\ZDQLDVNU\SWX -HĝHOLZWUDNFLHWHMRSHUDFML GHEXJHUGRWU]HGRIXQNFMLWR SU]HFKRG]LGRSLHUZV]HJRZLHU V]DSRWHMIXQNFML 1LHSU]HFKR G]LGRPLHMVFD]GHğQLRZDQLD IXQNFML 7DNLH]DFKRZDQLHMHVW F]DVHPRNUHĂODQHPLDQHP VWHSSLQJRYHU ,VWQLHMHWHĝPRĝOLZRĂÊQDND ]DQLDGHEXJHURZLZHMĂFLDGR IXQNFMLLVSUDZG]HQLDFRVLÚ G]LHMHZMHMZQÚWU]X 3U]HJOÈGDUNL&KURPHL)LUHIR[RIHUXMÈSRGREQHQDU]ÚG]LDSU]H]QDF]R QHGRSRUXV]DQLDVLÚPLÚG]\SXQNWDPLNRQWUROQ\PL 1 2 3 4 1 2 3 4 3DX]DMHVWZ\ĂZLHWODQDGRSöNLLQWHUSUHWHUQLHGRWU]HGRSXQNWX NRQWUROQHJR*G\LQWHUSUHWHU]DWU]\PDVLÚZSXQNFLHNRQWUROQ\P Z\ĂZLHWODQ\MHVWSU]\FLVNPlay.OLNDMÈFJRPRĝHV]QDND]DÊ LQWHUSUHWHURZLZ]QRZLHQLHZ\NRQ\ZDQLDNRGX 3U]\FLVNWHQSRZRGXMHSU]HMĂFLHGRNROHMQHJRZLHUV]DNRGX LSU]HMĂFLHSU]H]NRGZLHUV]SRZLHUV]X ]DPLDVWZ\NRQ\ZDÊNRG QDMV]\EFLHMMDNWRPRĝOLZH :HMĂFLHGRZQÚWU]DIXQNFML'HEXJHUSU]HMG]LHGRSLHUZV]HJR ZLHUV]DZWHMIXQNFML :\MĂFLH]ELHĝÈFHMIXQNFML3R]RVWDïDF]ÚĂÊIXQNFML]RVWDQLH Z\NRQDQDJG\GHEXJHUSU]HMG]LHGRNRPSRQHQWXQDGU]ÚGQHJRGDQHM IXQNFML 2%68*$%}':,'(%8*2:$1,( WARUNKOWE PUNKTY KONTROLNE 0RĝQDRNUHĂOLÊE\GDQ\SXQNWNRQWUROQ\E\ïZ\ZRï\ZDQ\W\ONRZWHG\ JG\VSHïQLRQ\]RVWDQLHSRGDQ\ZDUXQHN:HZVSRPQLDQ\PZDUXQNX PRĝQDXĝ\ZDÊLVWQLHMÈF\FK]PLHQQ\FK CHROME 3UDZ\PSU]\FLVNLHPP\V]\ NOLNQLMQXPHUZLHUV]D :\ELHU]RSFMÚ$GG&RQGLWLR nal Breakpoint… :Z\ĂZLHWORQ\PRNQLH ZSURZDGěZDUXQHN .LHG\XUXFKRPLV]VNU\SW ZW\PZLHUV]XMHJRZ\NRQ\ZD QLH]DWU]\PDVLÚW\ONRZWHG\ JG\ZDUXQHNSU]\MPLHZDUWRĂÊ true QDSU]\NïDGMHĂOLZDUWRĂÊ ]PLHQQHMareaEÚG]LHPQLHMV]D QLĝ20 FIREFOX 3UDZ\PSU]\FLVNLHPP\V]\ NOLNQLMQXPHUZLHUV]D :\ELHU]RSFMÚ$GG&RQGLWLR nal Breakpoint :Z\ĂZLHWORQ\PRNQLH ZSURZDGěZDUXQHN .LHG\XUXFKRPLV]VNU\SW ZW\PZLHUV]XMHJRZ\NRQ\ZD QLH]DWU]\PDVLÚW\ONRZWHG\ JG\ZDUXQHNSU]\MPLHZDUWRĂÊ true QDSU]\NïDGMHĂOLZDUWRĂÊ ]PLHQQHMareaEÚG]LHPQLHMV]D QLĝ20 484 2%68*$%}':,'(%8*2:$1,( SŁOWO KLUCZOWE DEBUGGER 3XQNWNRQWUROQ\ZNRG]LH PRĝQDXWZRU]\Ê]DSRPRFÈ VïRZDNOXF]RZHJRdebugger .LHG\QDU]ÚG]LDSURJUDPL VW\F]QHVÈXUXFKRPLRQHWR SXQNWNRQWUROQ\WZRU]RQ\MHVW DXWRPDW\F]QLH ,VWQLHMHUöZQLHĝPRĝOLZRĂÊ XPLHV]F]HQLDVïRZDNOXF]RZHJR debuggerZSROHFHQLXZDUXQ NRZ\PDE\SXQNWNRQWUROQ\E\ï WZRU]RQ\MHG\QLHSRVSHïQLHQLX ZVND]DQHJRZDUXQNX7DNLH UR]ZLÈ]DQLH]DVWRVRZDQR ZSU]HGVWDZLRQ\PSRQLĝHM NRG]LH JAVASCRIPT 6]F]HJöOQLHZDĝQHMHVWXVXQLÚ FLHW\FKSROHFHñSU]HGXPLHV] F]HQLHPNRGXZU]HF]\ZLVWHM ZLWU\QLHLQWHUQHWRZHMSRQLHZDĝ PRJÈRQH]DWU]\PDÊG]LDïDQLH VNU\SWXMHĂOLXĝ\WNRZQLNEÚG]LH PLDïXUXFKRPLRQHQDU]ÚG]LD SURJUDPLVW\F]QH FMVEUHDNSRLQWVMV var $form, width, height, area; $form = $(’#calculator’); $(’#calculator’).on(’submit’, function(e) { HSUHYHQW'HIDXOW FRQVROHORJ ĳ.OLNQÈïHĂSU]\FLVNĳ width = $(’#width’).val(); height = $(’#height’).val(); area = (width * height); if (area < 100) { debugger; 3XQNWNRQWUROQ\EÚG]LHXVWDZLRQ\MHĂOL XUXFKRPLRQHVÈQDU]ÚG]LDSURJUDPLVW\F]QH } IRUPDSSHQG ĳS!ĳDUHDĳS!ĳ }); -HĝHOLG\VSRQXMHV]VHUZHUHP URERF]\PNRGGHEXJXMÈF\ PRĝQDXPLHĂFLÊZSROHFHQLX ZDUXQNRZ\PNWöUHVSUDZG]D F]\VNU\SW]RVWDïXUXFKRPLRQ\ ]RNUHĂORQHJRVHUZHUD .RG GHEXJXMÈF\EÚG]LHZ\NRQDQ\ W\ONRSRXUXFKRPLHQLXVNU\SWX ]HZVND]DQHJRVHUZHUD 2%68*$%}':,'(%8*2:$1,( 485 OBSŁUGA WYJĄTKÓW -HĝHOLVSRG]LHZDV]VLÚDZDULLNRGXXĝ\MSROHFHñWU\catchLğQDOO\ .DĝGH]W\FKSROHFHñPDZïDVQ\EORNNRGX WU\^ 3UöEDZ\NRQDQLDWHJRNRGX `FDWFK H[FHSWLRQ ^ -HĝHOLQDVWÈSL]JïRV]HQLHZ\MÈWNXXUXFKRPWHQNRG `ğQDOO\^ 7HQNRG]DZV]HEÚG]LHZ\NRQDQ\ } TRY CATCH FINALLY :EORNXWU\QDOHĝ\XPLHĂFLÊ NRGNWöU\ZHGïXJ&LHELHPRĝH ]JïRVLÊZ\MÈWHN -HĝHOLEORNWU\]JïRVLZ\MÈWHN GRJU\ZFKRG]LEORNcatchZUD] ]DOWHUQDW\ZQ\PNRGHP =DZDUWRĂÊEORNXğQDOO\EÚG]LH Z\NRQDQDQLH]DOHĝQLHRGWHJR MDNLPZ\QLNLHP]DNRñF]\ïRVLÚ Z\NRQDQLHNRGXZEORNXWU\ -HĝHOLZ\MÈWHN]RVWDQLH ]JïRV]RQ\ZW\PEORNXNRGX NRQWUROD]RVWDQLHDXWRPDW\F]QLH SU]HND]DQDGRRGSRZLHGQLHJR EORNXcatch 7XWDMZ\VWÚSXMHW\ONRMHGHQ SDUDPHWURELHNWEïÚGX :SUDZG]LHMHVWRSFMRQDOQ\DOH QLHREVïXĝ\V]EïÚGXMHĂOLWHJR EïÚGXQLHSU]HFKZ\FLV] .ODX]XODWU\PXVLE\ÊXĝ\WD ZWHJRURG]DMXNRG]LHSU]H]QDF]RQ\PGRREVïXJLEïÚGöZ L]DZV]HSRZLQLHQWRZDU]\V]\Ê MHMEORNcatchDOERğQDOO\OXE REDMHGQRF]HĂQLH 0RĝOLZRĂÊSU]HFKZ\FHQLDEïÚGX PRĝHE\ÊEDUG]RXĝ\WHF]QD MHĂOLZ\VWÚSXMÈSUREOHP\ ZZLWU\QLHLQWHUQHWRZHMXGRVWÚSQLRQHMSXEOLF]QLH -HĝHOLZEORNXWU\]RVWDQLH]DVWRVRZDQHSROHFHQLHcontinue EUHDNOXEreturnWRQDVWÈSL SU]HMĂFLHGREORNXğQDOO\ :WHQVSRVöE]\VNXMHV] PRĝOLZRĂÊSRLQIRUPRZDQLD Xĝ\WNRZQLNöZRHZHQWXDOQ\FK SUREOHPDFK ]DPLDVW]XSHïQHJR EUDNXLQIRUPDFMLRW\PĝHZLWU\QDSU]HVWDïDIXQNFMRQRZDÊ 486 2%68*$%}':,'(%8*2:$1,( %ORNğQDOO\EÚG]LHZ\NRQDQ\ QDZHWMHĂOLZEORNXWU\OXE catchXĝ\WRSROHFHQLDreturn &]DVDPLEORNğQDOO\MHVW Z\NRU]\VW\ZDQ\GRSU]HSURZDG]DQLDRSHUDFMLF]\V]F]ÈF\FKSR NRG]LHZ\NRQ\ZDQ\PZGZöFK SRSU]HGQLFKEORNDFK 2PDZLDQHWXWDMEORNLVÈSRGREQHGRPHWRG.done().fail() LDOZD\V RIHURZDQ\FKSU]H] M4XHU\ :SUDZG]LHPRĝQD]DJQLHĝGĝDÊRSHUDFMHVSUDZG]DQLD ZSRV]F]HJöOQ\FKEORNDFK QD SU]\NïDGNROHMQHSROHFHQLHWU\ ZEORNXcatch DOHSDPLÚWDM ĝHWRPRĝHPLHÊQHJDW\ZQ\ ZSï\ZQDZ\GDMQRĂÊG]LDïDQLD VNU\SWX POLECENIA TRY, CATCH I FINALLY :W\PSU]\NïDG]LHXĝ\WNRZQLNRZLVÈZ\ĂZLHWODQHGDQH-621 3U]\MPXMHP\]DïRĝHQLHĝHGDQH SRFKRG]È]ğUP\WU]HFLHMLF]DVDPLZ\VWÚSXMÈSUREOHP\]MHM VHUZHUDPLFRXQLHPRĝOLZLD SUDZLGïRZHZF]\WDQLHVWURQ\ -HĝHOLSROHFHQLHWU\]JïRVLEïÈG ]SRZRGXEUDNXPRĝOLZRĂFL SU]HWZRU]HQLDGDQ\FK WR Z\NRQDQ\]RVWDQLHNRGZEORNX catchDEïÈGQLHSU]HV]NRG]L ZZ\NRQDQLXSR]RVWDïHMF]ÚĂFL VNU\SWX =DSRPRFÈEORNXWU\VNU\SW VSUDZG]DF]\LVWQLHMHPRĝOLZRĂÊSU]HWZRU]HQLDGDQ\FK -6212GE\ZDVLÚWRSU]HG Z\ĂZLHWOHQLHPLQIRUPDFML Xĝ\WNRZQLNRZL :EORNXcatchGODXĝ\WNRZQLNDWZRU]RQ\MHVWNRPXQLNDW RSDUW\QDZïDĂFLZRĂFLDFKname LmessageRELHNWXError JAVASCRIPT .RPXQLNDWWHQ]RVWDQLHZ\ĂZLHWORQ\ZNRQVROLQDWRPLDVW QDVWURQLHSRMDZLVLÚSU]\MD]Q\ NRPXQLNDWGODXĝ\WNRZQLND .RPXQLNDWREïÚG]LHPRĝQD UöZQLHĝ]DSRPRFÈWHFKQRORJLL $MD[Z\VïDÊGRVHUZHUDDE\ ]RVWDïWDP]DUHMHVWURZDQ\ :EORNXğQDOO\GRGDZDQHMHVW ïÈF]HSR]ZDODMÈFHXĝ\WNRZQLNRZLQDRGĂZLHĝHQLHZ\ĂZLHWODQ\FKGDQ\FK FMVWU\FDWFKğQDOO\MV UHVSRQVH ĳ^ĴGHDOVĵ>^ĴWLWOHĵĴ6NOHS)DUURZL%DOOĵĳ// Dane JSON. LI UHVSRQVH ^ WU\^ YDUGHDO'DWD -621SDUVH UHVSRQVH 3UöEDSU]HWZRU]HQLD-621 VKRZ&RQWHQW GHDO'DWD :\ĂZLHWOHQLHGDQ\FK-621 } catch(e) { var errorMessage = e.name + ’ ’ + e.message; // Utworzenie komunikatu REïÚG]LH console.log(errorMessage); :\ĂZLHWOHQLHNRPXQLNDWöZ ZNRQVROL IHHGLQQHU+70/ ĳHP!3U]HSUDV]DP\QLH]QDOH]LRQRSURPRFMLĳHP! .RPXQLNDWGODXĝ\WNRZQLNöZ `ğQDOO\^ YDUOLQN GRFXPHQWFUHDWH(OHPHQW ĳDĳ 'RGDQLHïÈF]D RGĂZLHĝDMÈFHJRGRNXPHQW OLQNLQQHU+70/ ĳDKUHI ĵWU\FDWFKğQDOO\KWPOĵ!RGĂZLHĝD!ĳ IHHGDSSHQG&KLOG OLQN } } 2%68*$%}':,'(%8*2:$1,( 487 ZGŁASZANIE BŁĘDÓW -HĝHOLZLHV]ĝHSHZLHQIUDJPHQWNRGXPRĝHVSRZRGRZDÊSUREOHP ZVNU\SFLHPRĝHV]Z\JHQHURZDÊZïDVQHEïÚG\]DQLP]URELWRLQWHUSUHWHU :FHOXXWZRU]HQLDZïDVQHJREïÚGXQDOHĝ\Xĝ\Ê SRQLĝV]HJRZLHUV]DNRGX throw new Error(’message’); 0RĝOLZRĂÊ]JïRV]HQLDEïÚGXZFKZLOLJG\ZLHV] ĝHPRĝHZ\VWÈSLÊSUREOHPMHVW]QDF]QLHOHSV]\P UR]ZLÈ]DQLHPQLĝ]JRGDQDWRDE\GDQHVSRZRGRZDï\Z\VWÈSLHQLHEïÚGXZGDOV]HMF]ÚĂFLVNU\SWX -HĝHOLSUDFXMHV]]GDQ\PLSRFKRG]ÈF\PL]]HZQÈWU]PRĝHV]QDWNQÈÊVLÚQDUöĝQHSUREOHP\ QDSU]\NïDG ľQLHSUDZLGïRZRVIRUPDWRZDQHGDQH-621 ľGDQHOLF]ERZHNWöUHF]DVDPL]DZLHUDMÈGDQH QLHOLF]ERZH EïÈGVSRZRGRZDQ\SU]H]]GDOQ\VHUZHU ]ELöULQIRUPDFMLZNWöU\PEUDNXMHMHGQHM ZDUWRĂFL ľ ľ %ïÚGQHGDQHPRJÈRGUD]XVSRZRGRZDÊZ\VWÈSLHQLHEïÚGXZVNU\SFLHOXEWHĝVWDQRZLÊSU]\F]\QÚSUREOHPöZZGDOV]HMF]ÚĂFLZ\NRQ\ZDQLD VNU\SWX'ODWHJRWHĝQDMOHSV]\PUR]ZLÈ]DQLHPMHVW QDW\FKPLDVWRZH]JïRV]HQLHSUREOHPX2GV]XNDQLH ěUöGïDSUREOHPXPRĝHE\Ê]QDF]QLHWUXGQLHMV]H MHĂOLGDQHVSRZRGRZDï\Z\VWÈSLHQLHEïÚGXZLQQHM F]ÚĂFLVNU\SWX 488 2%68*$%}':,'(%8*2:$1,( 3RZRGXMHRQXWZRU]HQLHQRZHJRRELHNWXError QDSRGVWDZLHGRP\ĂOQHJRRELHNWXError 3DUDPHWUHPMHVWNRPXQLNDWNWöU\PDE\ÊSRZLÈ]DQ\ ]EïÚGHP.RPXQLNDWWHQSRZLQLHQE\ÊMDVQ\GOD Xĝ\WNRZQLND -HĂOLXĝ\WNRZQLNZSURZDG]LQDSU]\NïDGFLÈJ WHNVWRZ\ZPLHMVFXZNWöU\PRF]HNLZDQHMHVW SRGDQLHOLF]E\QLHWU]HEDRGUD]X]JïDV]DÊEïÚGX -HGQDNMHĂOLZLHV]ĝHDSOLNDFMDEÚG]LHSUöERZDïD Z\NRU]\VWDÊWÚZDUWRĂÊZRSHUDFMLPDWHPDW\F]QHM QDSHZQ\PHWDSLHG]LDïDQLDVNU\SWXWRPXVLV] ]GDZDÊVRELHVSUDZÚ]SUREOHPöZMDNLHPRĝH VSRZRGRZDÊZDUWRĂÊQLHRF]HNLZDQHJRW\SX -HĝHOLGRGDMHV]OLF]EÚGRFLÈJXWHNVWRZHJRZ\QLNLHPEÚG]LHFLÈJWHNVWRZ\1DWRPLDVWXĝ\FLHFLÈJX WHNVWRZHJRZGRZROQHMRSHUDFMLPDWHPDW\F]QHM R]QDF]DĝHZ\QLNLHPEÚG]LHNaNWRQLHMHVWEïÈG OHF]ZDUWRĂÊVSHFMDOQDNWöUDQLHMHVWOLF]EÈ 'ODWHJRWHĝMHĝHOL]JïRVLV]EïÈGJG\Xĝ\WNRZQLN ZSURZDG]LZDUWRĂÊNWöUHMSöěQLHMQLHEÚG]LH PRĝQDXĝ\ÊWRRFKURQLV]VNU\SWSU]HGSUREOHPDPLZSU]\V]ïRĂFL0RĝHV]SU]\JRWRZDÊNRPXQLNDW REïÚG]LHZ\MDĂQLDMÈF\SUREOHP]DQLPXĝ\WNRZQLN SU]HMG]LHGRGDOV]HMF]ÚĂFLVNU\SWX ZGŁASZANIE BŁĘDU DLA NaN -HĝHOLZRSHUDFMLPDWHPDW\F]QHMVSUöEXMHV]Xĝ\ÊFLÈJX WHNVWRZHJR LQQHJRQLĝ]QDN GRGDZDQLD WRQLHRWU]\PDV] EïÚGXOHF]ZDUWRĂÊVSHFMDOQÈ NaN DQJQRWDQXPEHUĽķWR QLHMHVWOLF]EDĵ :SU]HGVWDZLRQ\PSU]\NïDG]LH ZEORNXWU\SRGHMPRZDQDMHVW SUöEDREOLF]HQLDSRODSURVWRNÈWD-HĝHOLSRGDQH]RVWDQÈOLF]E\ NRGG]LDïD]JRGQLH]RF]HNLZDQLDPL:SU]\SDGNXSRGDQLD ZDUWRĂFLLQQ\FKQLĝOLF]E\ QDVWÈSL]JïRV]HQLHZïDVQHJR EïÚGXDZEORNXcatch ]RVWDQLHZ\ĂZLHWORQ\NRPXQLNDW REïÚG]LH ']LÚNLVSUDZG]HQLXF]\ Z\QLNLHPREOLF]HñMHVWOLF]ED VNU\SWPRĝHZ\JHQHURZDÊEïÈG ZRNUHĂORQHMFKZLOLLZ\ĂZLHWOLÊ Xĝ\WNRZQLNRZLGRNïDGQH LQIRUPDFMHRSU]\F]\QLH SUREOHPX ]DPLDVWSR]ZROLÊ DE\VSRZRGRZDïRWRSUREOHP\ ZGDOV]HMF]ÚĂFLVNU\SWX c10/js/throw.js JAVASCRIPT var width = 12; var height = ’test’; =PLHQQDZLGWK =PLHQQDKHLJKW function calculateArea(width, height) { WU\^ var area = width * height; 3UöEDREOLF]HQLDSROD LI LV1D1 DUHD ^-HĝHOLZ\QLNMHVWOLF]EÈ return area; ]ZUDFDQHMHVWREOLF]RQHSROH } else { :SU]HFLZQ\PUD]LH]JïDV]DP\EïÈG WKURZQHZ(UURU ĳ)XQNFMDFDOFXODWH$UHD RWU]\PDïDQLHSUDZLGïRZHGDQHĳ } } catch(e) { -HĝHOLZ\VWÈSLïEïÈG console.log(e.name + ’ ’ + e.message); :\ĂZLHWOHQLHZNRQVROLNRPXQLNDWX REïÚG]LH UHWXUQĳ1LHPRĝQDREOLF]\ÊSRODĳ :\ĂZLHWOHQLHNRPXQLNDWXREïÚG]LH Xĝ\WNRZQLNRZL } } 3UöEDZ\ĂZLHWOHQLDQDVWURQLHREOLF]RQHJRSROD GRFXPHQWJHW(OHPHQW%\,G ĳDUHDĳ LQQHU+70/ FDOFXODWH$UHD ZLGWKKHLJKW :\ĂZLHWODQHVÈGZDRGPLHQQH NRPXQLNDW\REïÚGDFKĽSLHUZV]\ZNRQVROLSU]H]QDF]RQ\GOD SURJUDPLVWöZQDWRPLDVWGUXJL ZRNQLHSU]HJOÈGDUNLSU]H]QDF]RQ\GODXĝ\WNRZQLNöZ :WHQVSRVöEQLHW\ONR SU]HFKZ\WXMHP\EïÈGNWöU\ ZSU]HFLZQ\PUD]LHZRJöOH PöJïE\QLHE\Ê]JïRV]RQ\DOH UöZQLHĝ]DSHZQLDP\Z\ĂZLHWOHQLHGRNïDGQ\FKLQIRUPDFML RSU]\F]\QLHEïÚGX :LGHDOQHMV\WXDFMLWHJRURG]DMX SUREOHP\UR]ZLÈĝHZHU\ğNDFMD IRUPXODU]DRF]\PGRZLHV]VLÚ ZUR]G]LDOH3UDZGRSRGRELHñVWZRZ\VWÚSRZDQLDWDNLFK EïÚGöZMHVWZLÚNV]HJG\GDQH SRFKRG]È]]HZQÈWU] 2%68*$%}':,'(%8*2:$1,( 489 PODPOWIEDZI DOTYCZĄCE DEBUGOWANIA 2WR]ELöUSUDNW\F]Q\FKSRGSRZLHG]L]NWöU\FKPRĝHV]VNRU]\VWDÊSRGF]DV GHEXJRZDQLDVNU\SWöZ INNA PRZEGLĄDARKA INTERNETOWA 3HZQHSUREOHP\VÈĂFLĂOH ]ZLÈ]DQH]NRQNUHWQÈSU]HJOÈGDUNÈ:\SUöEXMNRGZLQQHM SU]HJOÈGDUFHDE\SU]HNRQDÊ VLÚF]\WDNĝHZQLHMVSUDZLD SUREOHP\ DODAWAJ LICZBY :\ĂZLHWODMOLF]E\ZNRQVROL DE\]REDF]\ÊNWöUHHOHPHQW\ ]RVWDï\]DUHMHVWURZDQH:WHQ VSRVöEPRĝHV]VSUDZG]LÊ GRNWöUHJRPLHMVFDVNU\SWE\ï Z\NRQ\ZDQ\]DQLPZ\VWÈSLï EïÈG SKRACAJ KOD 8VXZDMIUDJPHQW\NRGX LVNUDFDMJRGRQLH]EÚGQHJR PLQLPXP:W\PFHOXPRĝHV] IDNW\F]QLHXVXZDÊIUDJPHQW\ NRGXEÈGěXPLHV]F]DÊMHZNRPHQWDU]DFKZLHORZLHUV]RZ\FK :V]\VWNRPLÚG]\W\PL ]QDNDPLMHVWX]QDZDQH za komentarz. */ OBJAŚNIAJ KOD 3URJUDPLĂFLEDUG]RF]ÚVWR ]QDMGXMÈUR]ZLÈ]DQLHSUREOHPX SRGF]DVREMDĂQLDQLDNRGX LQQ\P NARZĘDZIA DO WERYFIKACJI ,VWQLHMHZLHOHUöĝQ\FKQDU]ÚG]L LQWHUQHWRZ\FKSU]H]QDF]RQ\FK GRZHU\ğNDFMLNRGXFRSRPDJD ZZ\V]XNDQLXEïÚGöZZNRG]LH SZUKAJ 6WDFN2YHUĠRZWRZLWU\QD ]DZLHUDMÈFDS\WDQLDLRGSRZLHG]LGODSURJUDPLVWöZ 0RĝHV]VNRU]\VWDÊWDNĝH ]WUDG\F\MQ\FKZ\V]XNLZDUHN LQWHUQHWRZ\FKWDNLFKMDN *RRJOH%LQJ'XFN'XFN*RLWG JAVASCRIPT http://www.jslint.com/ http://www.jshint.com/ JSON http://jsonlint.com/ JQUERY WYPRÓBUJ KOD -HĝHOLS\WDQLHGRW\F]ÈFHSUREOHPDW\F]QHJRNRGX]DGDMHV] QDIRUXP]DPLHĂÊWHQNRG QLHW\ONRZSRĂFLHOHF]WDNĝH ZZLWU\QLHW\SXSOD\JURXQG QDSU]\NïDGKWWSMVELQFRP KWWSMVğGGOHFRP OXEKWWSGDEEOHWFRP Ľ GRGDMïÈF]HGRSRVWXSXEOLNRZDQHJRQDIRUXP ,QQHSRSXODUQHZLWU\Q\W\SX SOD\JURXQGWRKWWSFVVGHFN com/LKWWSFRGHSHQFRP ĽZ\PLHQLRQHZLWU\Q\NïDGÈ ZLÚNV]\QDFLVNQDSRND]\ZDQLH LREMDĂQLDQLHNRGX 490 2%68*$%}':,'(%8*2:$1,( 'ODSU]HJOÈGDUNL&KURPH LVWQLHMHZW\F]NDGHEXJHUDGOD M4XHU\=QDMG]LHV]MÈZVNOHSLH &KURPH:HE6WRUH NAJCZĘŚCIEJ WYSTĘPUJĄCE BŁĘDY 7XWDMSU]HGVWDZLRQROLVWÚEïÚGöZQDMF]ÚĂFLHMZ\VWÚSXMÈF\FKZVNU\SWDFK POWRÓT DO PODSTAW :LHONRĂÊOLWHUZMÚ]\NX-DYD6FULSWPD]QDF]HQLHDZLÚF VSUDZGěZLHONRĂÊOLWHUZNRG]LH -HĝHOLGR]DGHNODURZDQLD ]PLHQQHMQLHXĝ\MHV]VïRZD NOXF]RZHJRvarSRZVWDQLH ]PLHQQDJOREDOQDNWöUHM ZDUWRĂÊEÚG]LHPRĝQDQDGSLVDÊ ZV]ÚG]LH ZGRZROQ\PPLHMVFX VNU\SWXOXEQDZHWSU]H]LQQ\ VNU\SWGRïÈF]RQ\QDVWURQLH BRAKUJĄCE LUB NADMIAROWE ZNAKI KWESTIE ZWIĄZANE Z TYPAMI DANYCH 1DNRñFXNDĝGHJRSROHFHQLD SRZLQLHQ]QDMGRZDÊVLÚ ĂUHGQLN 8ĝ\FLHRSHUDWRUD=]DPLDVW== VSRZRGXMHSU]\SLVDQLHZDUWRĂFL ]PLHQQHMDQLHVSUDZG]HQLH F]\ZDUWRĂÊ]RVWDïDGRSDVRZDQD 6SUDZGěF]\QLHEUDNXMH QDZLDVöZ]DP\NDMÈF\FK} OXE) 6SUDZGěF]\ZQDZLDVDFK} OXE)QLH]RVWDï\SU]\SDGNRZR XPLHV]F]RQHSU]HFLQNL -HĝHOLQLHPRĝQDX]\VNDÊ GRVWÚSXGRZDUWRĂFL]PLHQQHM VSUDZGěF]\QLHZ\NUDF]DRQD SR]D]DNUHV F]\QDSU]\NïDG QLH]RVWDïD]DGHNODURZDQD ZLQQHMIXQNFML 7HVWRZDQ\ZDUXQHN]DZV]H XPLHV]F]DMZQDZLDVLH :QD]ZDFK]PLHQQ\FKQLH Xĝ\ZDMVïöZ]DUH]HUZRZDQ\FK OXEP\ĂOQLNöZ :DUWRĂÊXQGHğQHGQLHRGSRZLDGDnullĽnullMHVWSU]H]QDF]RQDGODRELHNWöZSRGF]DV JG\XQGHğQHGGODZïDĂFLZRĂFL PHWRGL]PLHQQ\FK 6SUDZGěF]\SRSUDZQLH ]DVWRVRZDQHLGRSDVRZDQH ]RVWDï\DSRVWURI\LFXG]\VïöZ 6SUDZGěF]\ZZDUWRĂFLDFK ]PLHQQ\FK]QDNLF\WRZDQLD VÈSUDZLGïRZRSRSU]HG]RQH ]QDNDPL]PLHQLDMÈF\PLLFK ]QDF]HQLH 6SUDZGěF]\ZNRG]LH+70/ ZDUWRĂFLDWU\EXWöZidVÈ XQLNDOQH -HĝHOLVSUDZG]DV]F]\ZDUWRĂÊ ]RVWDïDGRSDVRZDQDXĝ\ZDM ĂFLVïHJRSRUöZQDQLDFRSRZRGXMHMHGQRF]HVQHVSUDZG]HQLH W\SXGDQ\FK 6WRVXMZLÚF=== ]DPLDVW== :HZQÈWU]NRQVWUXNFMLswitch ZDUWRĂFLQLHPDMÈOXěQRRNUHĂORQHJRW\SX DZLÚFLFKW\SQLH EÚG]LHXVWDODQ\ 6SUDZGěF]\ZWUDNFLH Z\ZRï\ZDQLDIXQNFMLQLH]RVWDï SRPLQLÚW\MHMSDUDPHWU *G\]RVWDQLH]QDOH]LRQHGRSDVRZDQLHZNRQVWUXNFMLswitch Z\NRQDQH]RVWDQÈZV]\VWNLH Z\UDĝHQLDDĝGRQDSRWNDQLD SROHFHQLDEUHDNOXEreturn 6SUDZGěF]\VNU\SW]RVWDï ZF]\WDQ\ GRW\F]\WR]ZïDV]F]D SOLNöZ]VHUZHUöZ&'1 6SUDZGěF]\PLÚG]\SOLNDPL UöĝQ\FKVNU\SWöZQLHZ\VWÚSXMÈ NRQĠLNW\ 0HWRGDUHSODFH SRZRGXMH ]DVWÈSLHQLHW\ONRSLHUZV]HJR GRSDVRZDQLD-HĝHOLFKFHV] ]DVWÈSLÊZV]\VWNLHZ\VWÈSLHQLD Xĝ\MRSFMLJOREDOQHM -HĝHOLZ\NRU]\VWXMHV]PHWRGÚ SDUVH,QW PRĝHZ\VWÈSLÊ SRWU]HEDSU]HND]DQLDSRGVWDZ\ LORĂÊXQLNDOQ\FKF\IUïÈF]QLH ]]HUHPXĝ\W\FKGRSU]HGVWDZLHQLDOLF]E\ 2%68*$%}':,'(%8*2:$1,( 491 PODSUMOWANIE OBSŁUGA BŁĘDÓW I DEBUGOWANIE f -HĝHOL]UR]XPLHV]NRQWHNVW\Z\NRQ\ZDQLD PDMÈGZDHWDS\ LVWRV\LVWQLHMHZLÚNV]HSUDZGRSRGRELHñVWZRĝHXGD&LVLÚ ]QDOHěÊEïÈGZNRG]LH f 'HEXJRZDQLHWRSURFHVZ\V]XNLZDQLDEïÚGöZSU]\SRPLQDMÈF\ SURFHVGHGXNFML f .RQVRODSRPDJDZ]DZÚĝHQLXREV]DUXZNWöU\P]QDMGXMHVLÚ EïÈG:WHQVSRVöEPRĝHV]VSUöERZDÊRGV]XNDÊWHQEïÈG f -DYD6FULSWPDVLHGHPUöĝQ\FKW\SöZEïÚGöZ.DĝG\]QLFK SRZRGXMHXWZRU]HQLHZïDVQHJRRELHNWXEïÚGXNWöU\SRGDMH QXPHUZLHUV]DJG]LHZ\VWÈSLïEïÈGRUD]MHJRRSLV f -HĝHOLVSRG]LHZDV]VLÚZ\VWÈSLHQLDEïÚGXPRĝHV]JRREVïXĝ\Ê ]DSRPRFÈSROHFHñWU\catchLğQDOO\:\NRU]\VWDMMHDE\ Z\ĂZLHWODÊXĝ\WNRZQLNRZLMDVQHNRPXQLNDW\RV\WXDFML 2%68*$%}':,'(%8*2:$1,( 11 PANELE ZAWARTOŚCI 3DQHOH]DZDUWRĂFLSR]ZDODMÈQDZ\ĂZLHWOHQLHGRGDWNRZ\FK LQIRUPDFMLQDVWURQLHRRJUDQLF]RQHMLORĂFLZROQHJR PLHMVFD:W\PUR]G]LDOHSR]QDV]ZLHOHSU]\NïDGöZSDQHOL ]DZDUWRĂFLSU]\NïDG\WHMHGQRF]HĂQLHVWDQRZLÈSUDNW\F]QH ZSURZDG]HQLHGRWZRU]HQLDZïDVQ\FKVNU\SWöZ]DSRPRFÈ M4XHU\ 'RZLHV]VLÚMDNWZRU]\ÊZLHOHUöĝQ\FKURG]DMöZSDQHOL]DZDUWRĂFLSDQHOW\SXDFFRUGLRQNDUW\ RNQDPRGDOQH OLJKWER[ SU]HJOÈGDUNÚ]GMÚÊDWDNĝHUHVSRQV\ZQHVODMG\.DĝG\SU]\NïDGSDQHOX ]DZDUWRĂFLSRND]XMHMDNZSUDNW\FH]DVWRVRZDÊNRGNWöU\SR]QDïHĂGRWÈGZNVLÈĝFH :UR]G]LDOHW\P]QDMGXMÈVLÚRGQLHVLHQLDGR]QDF]QLHEDUG]LHMVNRPSOLNRZDQ\FKZW\F]HNM4XHU\ UR]EXGRZXMÈF\FKIXQNFMRQDOQRĂÊSU]HGVWDZLRQ\FKSU]\NïDGöZ=DSUH]HQWRZDQHWXWDMIUDJPHQW\ NRGXSRND]XMÈUöZQLHĝĝHWHFKQLNLZ\NRU]\VW\ZDQHZZLHOXSRSXODUQ\FKZLWU\QDFKLQWHUQHWRZ\FKPRĝQDVWRVRZDÊ]Z\NRU]\VWDQLHPGRVïRZQLHNLONXZLHUV]\NRGX EH]NRQLHF]QRĂFL RSLHUDQLDVLÚQDZW\F]NDFKXWZRU]RQ\FKSU]H]LQQ\FK 494 3$1(/(=$:$572¥&, PANEL ACCORDION PANELE KART 3DQHODFFRUGLRQ]DZLHUDW\WXï\NOLNQLÚFLH GRZROQHJR]QLFKSRZRGXMHZ\ĂZLHWOHQLH ZLÚNV]HJRSDQHOX]DZDUWRĂFL :SU]\SDGNXNDUWDXWRPDW\F]QLHMHVWZ\ĂZLHWODQ\ MHGHQSDQHODOHNOLNQLÚFLHLQQHMNDUW\SRZRGXMH ]PLDQÚZ\ĂZLHWODQHJRSDQHOX OKNO MODALNE PRZEGLĄDARKA ZDJĘĆ .OLNQLÚFLHïÈF]DRNQDPRGDOQHJR OLJKWER[ SRZRGXMHZ\ĂZLHWOHQLHXNU\WHJRSDQHOX 3U]HJOÈGDUND]GMÚÊSR]ZDODQDZ\ĂZLHWODQLH UöĝQ\FKREUD]öZQDWHMVDPHMSU]HVWU]HQL JG\Xĝ\WNRZQLNNOLNQLHPLQLDWXUÚREUD]X SLAJDY RESPONSYWNE UTWORZENIE WTYCZKI JQUERY 6ODMG\SR]ZDODMÈQDZ\ĂZLHWODQLHSDQHOL ]DZDUWRĂFLNWöUHķZMHĝGĝDMÈĵGRZLGRNX JG\Xĝ\WNRZQLNSRUXV]DVLÚPLÚG]\QLPL :RVWDWQLPSU]\NïDG]LHSRZUöFLP\GRSDQHOX DFFRUGLRQ SLHUZV]\SU]\NïDG L]PLHQLP\JR QDZW\F]NÚM4XHU\ 3$1(/(=$:$572¥&, 495 PODZIAŁ ODPOWIEDZIALNOŚCI -DNMXĝPRJïHĂVLÚSU]HNRQDÊGREUÈSUDNW\NÈMHVWUR]G]LDïWUHĂFL Z]QDF]QLNDFK+70/ ZDUVWZ\SUH]HQWDF\MQHM ZUHJXïDFK&66 RUD]]DFKRZDQLD ZNRG]LH-DYD6FULSW 2JöOQLHU]HF]XMPXMÈFNRGSRZLQLHQRG]ZLHUFLHGODÊQDVWÚSXMÈFHIDNW\ • .RG]QDF]QLNöZ+70/MHVWRGSRZLHG]LDOQ\]D • • QDGDQLHVWUXNWXU\GODWUHĂFL 6W\OH&66VÈRGSRZLHG]LDOQH]DXWZRU]HQLH ZDUVWZ\SUH]HQWDF\MQHM .RG-DYD6FULSWMHVWRGSRZLHG]LDOQ\]D]GHğQLRZDQLH]DFKRZDQLDVWURQ\ :\PXV]HQLH]DVWRVRZDQLDWDNLHJRUR]G]LDïX SURZDG]LGRRSUDFRZDQLDNRGXNWöU\VWDMHVLÚ ïDWZLHMV]\ZNRQVHUZDFMLRUD]GRSRQRZQHJR Z\NRU]\VWDQLD:SUDZG]LHWÚNRQFHSFMÚE\ÊPRĝH MXĝ]QDV]DOHWU]HEDSDPLÚWDÊĝHZ-DYD6FULSW EDUG]RïDWZRPRĝQDïÈF]\ÊSRV]F]HJöOQHURG]DMH NRGX5HJXïÚPRĝQD]GHğQLRZDÊQDVWÚSXMÈFR HG\FMDV]DEORQöZ+70/OXEDUNXV]\VW\OöZ QLHSRZLQQDZ\PXV]DÊSRQRZQHMHG\FMLNRGX -DYD6FULSWLQDRGZUöW 496 3$1(/(=$:$572¥&, 2EVHUZDWRU\]GDU]HñLZ\ZRïDQLDGRIXQNFML PRĝQDXPLHV]F]DÊZSOLNDFK-DYD6FULSW]DPLDVW QDNRñFXGRNXPHQWX+70/ -HĝHOL]DFKRG]LSRWU]HED]PLDQ\VW\OXSRZLÈ]DQHJR]HOHPHQWHPWR]DPLDVW]DSLV\ZDÊVW\OH ZMÚ]\NX-DYD6FULSWPRĝQDXDNWXDOQLÊZDUWRĂÊ DWU\EXWöZclassW\FKHOHPHQWöZ7R]NROHLPRĝH VSRZRGRZDÊXĝ\FLHQRZ\FKUHJXï]SOLNX&66 NWöUH]PLHQLÈZ\JOÈGHOHPHQWöZ .LHG\VNU\SWX]\VNXMHGRVWÚSGRPRGHOX'20 PRĝQDRGG]LHOLÊJRRG+70/SU]H]]DVWRVRZDQLH VHOHNWRUöZclass]DPLDVW]QDF]QLNöZ KWESTIE DOSTĘPNOŚCI I BRAK OBSŁUGI JAVASCRIPT 3RGF]DVWZRU]HQLDNDĝGHJRVNU\SWXSRZLQLHQHĂP\ĂOHÊWDNĝH RXĝ\WNRZQLNDFKNWöU]\PRJÈNRU]\VWDÊ]HVWURQ\LQWHUQHWRZHM ZLQQ\VSRVöEQLĝURELV]WR7\ KWESTIE DOSTĘPNOŚCI BRAK OBSŁUGI JAVASCRIPT *G\Xĝ\WNRZQLNPDPLHÊPRĝOLZRĂÊSUDF\ ]HOHPHQWHP MHĂOLWRïÈF]H]DVWRVXMHOHPHQW<a> MHĂOLHOHPHQWG]LDïDZFKDUDNWHU]HSU]\FLVNX ]DVWRVXMSU]\FLVN 3U]HGVWDZLRQHZW\PUR]G]LDOHPHQXSDQHOX DFFRUGLRQSDQHOHNDUWRUD]VODMG\UHVSRQV\ZQH GRP\ĂOQLHXNU\ZDMÈFDïÈVZRMÈ]DZDUWRĂÊ :SU]\SDGNXEUDNXDOWHUQDW\ZQHJRVW\OX]DZDUWRĂÊWDEÚG]LHQLHGRVWÚSQDGODXĝ\WNRZQLNöZ NWöU]\ZSU]HJOÈGDUFHLQWHUQHWRZHMZ\ïÈF]\OL REVïXJÚMÚ]\ND-DYD6FULSW-HGQ\P]UR]ZLÈ]Dñ MHVWGRGDQLHGR]QDF]QLNDRWZLHUDMÈFHJR<html> DWU\EXWXclassRZDUWRĂFLno-js1DVWÚSQLHNODVD WDMHVWXVXZDQDSU]H]-DYD6FULSW ]DSRPRFÈ PHWRG\replace()RELHNWXString MHĝHOLMHJR REVïXJDEÚG]LHZïÈF]RQD.ODVÚno-jsPRĝQD Z\NRU]\VWDÊGR]DSHZQLHQLDDOWHUQDW\ZQ\FK VW\OöZXĝ\WNRZQLNRPNWöU]\Z\ïÈF]\OLREVïXJÚ MÚ]\ND-DYD6FULSWZVZRLFKSU]HJOÈGDUNDFK • • 2EDZ\PLHQLRQHHOHPHQW\PRJÈE\ÊDNW\ZQH DZLÚFXĝ\WNRZQLN]\VNXMHPRĝOLZRĂÊSRUXV]DQLD VLÚPLÚG]\QLPL]DSRPRFÈNODZLV]DTab OXE ]Z\NRU]\VWDQLHPLQQHJRUR]ZLÈ]DQLDNWöUHQLH MHVWRSDUWHQDP\V]\ :SUDZG]LHNDĝG\HOHPHQW PRĝHVWDÊVLÚDNW\ZQ\G]LÚNLXVWDZLHQLXMHJRDWU\EXWXtabindexDOHW\ONR<a>RUD]NLONDHOHPHQWöZ GDQ\FKZHMĂFLRZ\FKZ\ZRïXMH]GDU]HQLHclick SRQDFLĂQLÚFLXNODZLV]DEnterSU]H]Xĝ\WNRZQLND DWU\EXW$5,$role=”button”QLHV\PXOXMHWHJR ]GDU]HQLD HTML c11/no-js.html <!DOCTYPE html><html class=”no-js”> ... <body> <div class=”js-warning”>$E\GRNRQDÊ]DNXSöZPXVLV]ZïÈF]\ÊREVïXJÚMÚ]\ND JavaScript.</div> :\ïÈF]REVïXJÚMÚ]\ND-DYD6FULSWDE\]REDF]\ÊUöĝQLFÚ! <script src=”js/no-js.js”></script> </body> </html> JAVASCRIPT c11/js/no-js.js var elDocument = document.documentElement; elDocument.className = elDocument.className.replace(/(^|\s)no-js(\s|$)/, ’$1’); 3$1(/(=$:$572¥&, 497 PANEL ACCORDION *G\NOLNQLHV]W\WXïZSDQHOXDFFRUGLRQRGSRZLHGQLSDQHO Z\ĂZLHWOLVZRMÈ]DZDUWRĂÊ 3DQHODFFRUGLRQMHVWQDMF]ÚĂFLHM WZRU]RQ\ZUDPDFKQLHXSRU]ÈGNRZDQHMOLVW\ HOHPHQW<ul> .DĝG\HOHPHQW<li>R]QDF]D QRZ\HOHPHQWZSDQHOXDFFRUGLRQ3RV]F]HJöOQHHOHPHQW\ ]DZLHUDMÈ • ZLGRF]QÈHW\NLHWÚ ZRPDZLDQ\PSU]\NïDG]LH WRHOHPHQW<button> • XNU\W\SDQHOZUD]]]DZDUWRĂFLÈ HOHPHQW<div> .OLNQLÚFLHHW\NLHW\SRZRGXMH Z\ĂZLHWOHQLHRGSRZLHGQLHJR SDQHOX OXEMHJRXNU\FLHJG\ DNWXDOQLHMHVWZ\ĂZLHWODQ\ ZZLGRNX :FHOXXNU\FLDOXE Z\ĂZLHWOHQLDSDQHOXPRĝQD ]PLHQLÊZDUWRĂÊDWU\EXWX classZRGSRZLHGQLPSDQHOX Z\ZRïDQLHQRZHMUHJXï\&66 SRND]XMÈFHMOXEXNU\ZDMÈFHM SDQHO :RPDZLDQ\PSU]\NïDG]LHELEOLRWHNDM4XHU\]RVWDQLH Xĝ\WDGRDQLPDFMLSDQHOX SRMDZLDMÈFHJRVLÚZZLGRNXOXE ]QLNDMÈFHJR]QLHJR ,QQHVNU\SW\NDUW]DZLHUDMÈOLWH$FFRUGLRQL]$FFRUGLRQ =QDMG]LHV]MHUöZQLHĝZM4XHU\8,L%RRWVWUDS :VSHF\ğNDFML+70/ZSURZDG]RQRHOHPHQW\<details>L<summary> SU]H]QDF]RQHGRWZRU]HQLDSRGREQHJRHIHNWXDOHJG\SRZVWDZDïD WDNVLÈĝNDLFKREVïXJDZSU]HJOÈGDUNDFKQLHE\ïDMHV]F]H]E\W UR]SRZV]HFKQLRQD'ODWHJRWHĝVNU\SW\WDNLHMDNRPDZLDQ\QDGDOEÚGÈ VWRVRZDQHZSU]\SDGNXSU]HJOÈGDUHNQLHREVïXJXMÈF\FKZ\PLHQLRQ\FK ]QDF]QLNöZ 498 3$1(/(=$:$572¥&, PANEL ACCORDION, W KTÓRYM WSZYSTKIE PANELE ZAWARTOŚCI SĄ UKRYTE ETYKIETA 1 Ukryty ETYKIETA 2 Ukryty ETYKIETA 3 Ukryty PANEL ACCORDION, W KTÓRYM WYŚWIETLONY JEST DRUGI PANEL ZAWARTOŚCI ETYKIETA 1 3RGF]DVZF]\W\ZDQLDVWURQ\ UHJXï\&66VÈXĝ\ZDQH GRXNU\FLDSDQHOL .OLNQLÚFLHW\WXïXSRZRGXMH ĝHXNU\W\GRWÈGSDQHORGWZDU]D DQLPDFMÚSHïQHM]DZDUWRĂFL SDQHOX2GE\ZDVLÚWR]D SRPRFÈM4XHU\ Ukryty 3RQRZQHNOLNQLÚFLHHW\NLHW\ VSRZRGXMHXNU\FLHSDQHOX ETYKIETA 2 Wyświetlona zawartość panelu drugiego ZAWARTOŚĆ 2 ETYKIETA 3 Ukryty ANIMACJA ZAWARTOŚCI ZA POMOCĄ METOD .SHOW(), .HIDE() I .TOGGLE() 2IHURZDQHSU]H]M4XHU\PHWRG\ .show().hide()L.toggle() SR]ZDODMÈQDDQLPDFMÚ Z\ĂZLHWODQLDLXNU\ZDQLD ]DZDUWRĂFL M4XHU\REOLF]DZLHONRĂÊSXGHïND ZUD]]MHJR]DZDUWRĂFLÈRUD] ZV]\VWNLPLPDUJLQHVDPLLGRSHïQLHQLDPL7RMHVWQLH]Z\NOH SRPRFQH]ZïDV]F]DMHĂOLQLH ZLDGRPRMDND]DZDUWRĂÊ EÚG]LHXPLHV]F]RQDZSXGHïNX $E\Xĝ\ÊDQLPDFML&66WU]HED VDPRG]LHOQLHREOLF]\ÊZ\VRNRĂÊPDUJLQHVLGRSHïQLHQLH SXGHïND WYSOKOŚĆ PUDEŁKA Margines Krawędź Dopełnienie 0HWRGD.toggle()SR]ZDOD QDXQLNQLÚFLHNRQLHF]QRĂFL WZRU]HQLDNRGXZDUXQNRZHJR SU]H]QDF]RQHJRGRRNUHĂOHQLD ZLGRF]QRĂFLSXGHïND -HĝHOL SXGHïNRMHVWZ\ĂZLHWORQH ]RVWDQLHXNU\WHJG\MHVWXNU\WH ]RVWDQLHZ\ĂZLHWORQH :V]\VWNLHWU]\Z\PLHQLRQH PHWRG\VÈVNUöWDPLGODPHWRG\ .animate()1DSU]\NïDG PHWRGD.show()MHVWVNUöWHP GODQDVWÚSXMÈFHJRZ\ZRïDQLD $(’.accordion-panel’) .animate({ height: ’show’, paddingTop: ’show’, paddingBottom: ’show’, marginTop: ’show’, marginBottom: ’show’ }); 3$1(/(=$:$572¥&, 499 UTWORZENIE PANELU ACCORDION 3RQLĝHMSRND]DQRGLDJUDP]DPLDVWQDSU]\NïDG VHNZHQFML]GDU]Hñ'LDJUDPWHQPRĝH&LSRPöF ZGZöFKZ\PLHQLRQ\FKSRQLĝHMDVSHNWDFK i) 3U]HDQDOL]RZDQLHSU]HGVWDZLRQHJRIUDJPHQWX NRGX1XPHU\NURNöZQDGLDJUDPLHRGSRZLDGDMÈ NURNRPZVNU\SFLHSRND]DQ\PQDVWURQLHSR SUDZHM']LÚNLGLDJUDPRPNURNRPLNRPHQWDU]RP ZNRG]LH]UR]XPLHQLHG]LDïDQLDSRV]F]HJöOQ\FK IUDJPHQWöZNRGXSRZLQQRE\ÊGOD&LHELHMHV]F]H ïDWZLHMV]H ii) 3R]QDQLHWHFKQLNSODQRZDQLDVNU\SWXSU]HG SU]\VWÈSLHQLHPGRMHJRWZRU]HQLD 7RQLHMHVWķRğFMDOQ\ĵVW\OGLDJUDPXDOHSRND]XMH WRFRVLÚG]LHMHZVNU\SFLH'LDJUDP\XZLGRF]QLDMÈMDNNROHNFMDPDï\FKSRMHG\QF]\FKLQVWUXNFML SR]ZDODQDRVLÈJQLÚFLHZLÚNV]HJRFHOX-HĝHOL EÚG]LHV]SRGÈĝDÊ]DVWU]DïNDPLQDGLDJUDPLH ]REDF]\V]MDNGDQHSRUXV]DMÈVLÚSRSRV]F]HJöOQ\FKIUDJPHQWDFKVNU\SWX Zdarzenie: click w karcie 1 FUNKCJA ANONIMOWA: Wyświetla lub pokazuje odpowiedni panel 2 Uniemożliwienie domyślnej akcji przycisku 3 Ustalenie przycisku klikniętego przez użytkownika 4 Pobranie panelu accordion po klikniętym przycisku 5 N Czy panel jest animowany. N Czy panel jest widoczny? 66 Wyświetl panel 500 3$1(/(=$:$572¥&, T T Ukryj panel 3U]HNRQDMP\VLÚWHUD]MDNGLDJUDPSU]HNïDGD VLÚQDNRGěUöGïRZ\:\PLHQLRQHSRQLĝHMNURNL RGSRZLDGDMÈNRGRZL-DYD6FULSWSU]HGVWDZLRQHPX QDVWURQLHSRSUDZHMRUD]GLDJUDPRZLSRVWURQLH OHZHM 1. 8WZRU]HQLHNROHNFMLM4XHU\SU]H]QDF]RQHM GRSU]HFKRZ\ZDQLDHOHPHQWöZNWöU\FKDWU\EXW classPDZDUWRĂÊaccordion:NRG]LH+70/ PRĝHV]]REDF]\ÊĝHRGSRZLDGDWRHOHPHQWRZL QLHXSRU]ÈGNRZDQHMOLVW\ QDVWURQLHPRĝH]QDMGRZDÊVLÚZLHOHOLVWDNDĝGD]QLFKPRĝHWZRU]\Ê SDQHODFFRUGLRQ 2EVHUZDWRU]GDU]HñF]HNDDĝ Xĝ\WNRZQLNNOLNQLHMHGHQ]SU]\FLVNöZNWöU\FK DWU\EXWclassPDZDUWRĂÊaccordion-control 7RSRZRGXMHZ\ZRïDQLHIXQNFMLDQRQLPRZHM 2. 0HWRGDpreventDefault()XQLHPRĝOLZLD SU]HJOÈGDUFHSRWUDNWRZDQLHSU]\FLVNXMDN VWDQGDUGRZHJRSU]\FLVNXZ\VïDQLDIRUPXODU]D 'REU\PUR]ZLÈ]DQLHPMHVWXĝ\FLHPHWRG\ preventDefault()MDNQDMZF]HĂQLHMZIXQNFML DE\NDĝG\SU]HJOÈGDMÈF\NRGZLHG]LDïĝHHOHPHQW IRUPXODU]DOXEïÈF]HQLHURELWHJRF]HJRPRĝQD RGQLHJRRF]HNLZDÊ 3. ,QQHHOHPHQW\ZM4XHU\VÈZ\ELHUDQH]D SRPRFÈVïRZDNOXF]RZHJRthisNWöUHRGQRVL VLÚGRHOHPHQWXNOLNQLÚWHJRSU]H]Xĝ\WNRZQLND 7U]\PHWRG\M4XHU\PDMÈ]DVWRVRZDQLHGR GRSDVRZDQHJR]ELRUXVNïDGDMÈFHJRVLÚ]HOHPHQWX NOLNQLÚWHJRSU]H]Xĝ\WNRZQLND 4. :\ZRïDQLH.next(’.accordion-panel’) SRZRGXMHZ\EUDQLHNROHMQHJRHOHPHQWX]DZLHUDMÈFHJRNODVÚaccordion-panel 1LHNWöU]\SURJUDPLĂFLXĝ\ZDMÈ80/ DQJ 8QLğHG0RGHOLQJ/DQJXDJH OXENODVGLDJUDPöZ -HGQDNWDNLHSRGHMĂFLHMHVW]QDF]QLHWUXGQLHMV]H DSUH]HQWRZDQHWXWDMVHNZHQFMH]GDU]HñPDMÈ SRPöF&L]REDF]\ÊMDNLQWHUSUHWHUSRUXV]DVLÚSR VNU\SFLH 5. :\ZRïDQLH.not(’:animated’)VSUDZG]D F]\DNWXDOQLHMHVWRGWZDU]DQDDQLPDFMD -HĝHOL Xĝ\WNRZQLNNOLNQLHNLONDNURWQLHWÚVDPÈHW\NLHWÚ WRXQLHPRĝOLZLPHWRG]LH.slideToggle() NROHMNRZDQLHZLHOXDQLPDFML 6. :\ZRïDQLH.slideToggle()Z\ĂZLHWOLSDQHO MHĂOLDNWXDOQLHMHVWRQXNU\W\1DWRPLDVWMHĝHOL SDQHOMHVWDNWXDOQLHZ\ĂZLHWORQ\Z\ZRïDQLH .slideToggle()VSRZRGXMHMHJRXNU\FLH c11/accordion.html HTML <ul class=”accordion”> <li> <button class=”accordion-control”>Klasyka</button> <div class=”accordion-panel”>0LHMVFHQD]DZDUWRĂÊSDQHOX</div> </li> <li> <button class=”accordion-control”>Seria kwiaty</button> <div class=”accordion-panel”>0LHMVFHQD]DZDUWRĂÊSDQHOX</div> </li> <li> <button class=”accordion-control”>0RU]H</button> <div class=”accordion-panel”>0LHMVFHQD]DZDUWRĂÊSDQHOX</div> </li> </ul> CSS c11/css/accordion.css .accordion-panel { display: none;} JAVASCRIPT 1 2 3 4 5 6 c11/js/accordion.js $(’.accordion’).on(’click’, ’.accordion-control’, function(e){ 3RNOLNQLÚFLX e.preventDefault(); 8QLHPRĝOLZLHQLHGRP\ĂOQHMDNFMLSU]\FLVNX $(this) 8VWDOHQLHHOHPHQWXNOLNQLÚWHJRSU]H]Xĝ\WNRZQLND .next(’.accordion-panel’) :\EöURGSRZLHGQLHJRSDQHOX .not(’:animated’) -HĝHOLDQLPDFMDQLHMHVWDNWXDOQLHRGWZDU]DQD .slideToggle(); 8ĝ\FLHDQLPDFMLGRZ\ĂZLHWOHQLDOXEXNU\FLDSDQHOX }); =ZUöÊXZDJÚĝHNURNLLVÈZ\NRQ\ZDQHGODW\FKVDP\FKHOHPHQWöZZ\EUDQ\FKSU]H]M4XHU\ 3U]\NïDGSDQHOXDFFRUGLRQSRND]DQRZSRGUR]G]LDOHķ3DQHODFFRUGLRQĵ 3$1(/(=$:$572¥&, 501 PANEL KART 3RNOLNQLÚFLXGRZROQHMNDUW\QDVWÚSXMHZ\ĂZLHWOHQLHSRZLÈ]DQHJR]QLÈ SDQHOX3DQHOHNDUWSU]\SRPLQDMÈQLHFRLQGHNV\NDUW 0RĝHV]]REDF]\ÊOLVWÚZV]\VWNLFKNDUWDOH • W\ONRMHGQDNDUWDSRZLQQD Z\JOÈGDÊQDDNW\ZQÈ • W\ONRMHGHQSDQHORGSR- ZLDGDMÈF\DNW\ZQHMNDUFLH SRZLQLHQE\ÊZ\ĂZLHWORQ\ ZV]\VWNLHSR]RVWDïHPXV]È E\ÊXNU\WH .DUW\VÈQDMF]ÚĂFLHMWZRU]RQH ]DSRPRFÈQLHXSRU]ÈGNRZDQHM OLVW\3RV]F]HJöOQHHOHPHQW\ <li>QDOLĂFLHSU]HGVWDZLDMÈ NDUW\ZHZQÈWU]NDĝGHMNDUW\ ]QDMGXMHVLÚïÈF]H 3DQHOHZ\VWÚSXMÈSROLĂFLH SU]HFKRZXMÈFHMNDUW\]RVWDï\ RQHXPLHV]F]RQHZHOHPHQFLH <div> .DUWDMHVWSRZLÈ]DQD ]SDQHOHP • ïÈF]HZNDUFLHPDDWU\EXW • href SRGREQLHMDNNDĝGH LQQHïÈF]H SDQHOPDDWU\EXWid 2EDDWU\EXW\PDMÈWÚVDPÈ ZDUWRĂÊ 7RGRNïDGQLHWDND VDPDUHJXïDMDNSRGF]DV WZRU]HQLDïÈF]DGRLQQHJR IUDJPHQWXQDVWURQLH+70/ 502 3$1(/(=$:$572¥&, ,QQHVNU\SW\NDUW]DZLHUDMÈ7DEVOHWL7DEXORXV=QDMG]LHV]MHUöZQLHĝ ZM4XHU\8,L%RRWVWUDS KLIKNIĘTO PIERWSZĄ KARTĘ KARTA 1 KARTA 2 KARTA 3 ZAWARTOŚĆ PANELU 1 Karta 1 jest podświetlona Wyświetlona zawartość panelu 1 Panel 2 jest ukryty Panel 3 jest ukryty KLIKNIĘTO DRUGĄ KARTĘ KARTA 1 KARTA 2 KARTA 3 Karta 2 jest podświetlona Panel 1 jest ukryty ZAWARTOŚĆ PANELU 2 Wyświetlona zawartość panelu 2 Panel 3 jest ukryty Podczas wczytywania strony style ^^ƐČƵǏǇǁĂŶĞĚŽƉŽǌŝŽŵĞŐŽ ƵųŽǏĞŶŝĂŬĂƌƚŝǁƐŬĂǌĂŶŝĂƚĞũ͕ŬƚſƌĂ ďħĚǌŝĞƵǁĂǏĂŶĂǌĂĂŬƚǇǁŶČ͘ &66SRQDGWRXNU\ZDSDQHOH ]Z\MÈWNLHPWHJRNWöU\ RGSRZLDGDDNW\ZQHMNDUFLH .LHG\Xĝ\WNRZQLNNOLNQLH ïÈF]HZHZQÈWU]NDUW\VNU\SW Z\NRU]\VWDELEOLRWHNÚM4XHU\GR SREUDQLDZDUWRĂFLDWU\EXWXhref ïÈF]D2GSRZLDGDRQDZDUWRĂFL DWU\EXWXidSDQHOXNWöU\ SRZLQLHQE\ÊZ\ĂZLHWORQ\ 1DVWÚSQLHVNU\SWXDNWXDOQLD ZDUWRĂFLZDWU\EXFLHclass NDUW\LSDQHOXGRGDMÈFZDUWRĂÊ active3RQDGWRZ\PLHQLRQD ZDUWRĂÊMHVWXVXZDQD ]SRSU]HGQLRDNW\ZQHMNDUW\ LSDQHOX -HĝHOLXĝ\WNRZQLNQLHPDZïÈF]RQHMREVïXJLMÚ]\ND-DYD6FULSW ZSU]HJOÈGDUFHïÈF]HZNDUFLH SRZRGXMHSU]HQLHVLHQLH Xĝ\WNRZQLNDGRRGSRZLHGQLHJR IUDJPHQWXVWURQ\ 3$1(/(=$:$572¥&, 503 TWORZENIE PANELI KART 1 Wybór wszystkich zbiorów kart na stronie Iteracja przez poszczególne zbiory kart FUNKCJA ANONIMOWA: Konfiguracja tej grupy kart 2 3 Utworzenie zmiennych: $this: bieżąca lista $tab: aktualna karta $link: element łącza w aktualnej karcie $panel: wartość href atrybutu w łączu Zdarzenie: click w kontrolce karty FUNKCJA ANONIMOWA: Wyświetlenie tej karty i ukrycie pozostałych 4 Uniemożliwienie domyślnej akcji łącza 5 Utworzenie zmiennych: $link: obiekt jQuery zawierający łącze id: wartość atrybutu href karty klikniętej właśnie przez użytkownika 6 7 8 N Czy element jest aktywny? T Usunięcie wartości active z atrybutu class karty Usunięcie wartości active z atrybutu class panelu Ustawienie wartości active karty klikniętej przez użytkownika 9 Ustawienie wartości active odpowiedniemu panelowi Uaktualnienie zmiennych $panel i $tab PRZEJŚCIE DO KOLEJNEGO ZBIORU KART 504 3$1(/(=$:$572¥&, 'LDJUDPSROHZHMVWURQLHSRND]XMHNURNLMDNLH WU]HEDZ\NRQDÊZFHOXXWZRU]HQLDNDUW.URNL WHRGSRZLDGDMÈNRGRZL+70/SRND]DQHPXQD VWURQLHSRSUDZHM3RQLĝHMZ\MDĂQLRQRMDNPRĝQD SU]HïRĝ\ÊMHQDNRG 1. :M4XHU\Z\ELHUDQHVÈZV]\VWNLH]ELRU\NDUW QDVWURQLH0HWRGD.each()Z\ZRïXMHIXQNFMÚ DQRQLPRZÈGODNDĝGHJR]ELRUXNDUW WRSU]\SRPLQDG]LDïDQLHSÚWOL .RGZIXQNFMLDQRQLPRZHM MHGQRUD]RZRG]LDïDW\ONR]MHGQ\P]ELRUHPNDUW DOHSU]HGVWDZLRQHWXWDMNURNLVÈSRZWDU]DQHGOD ZV]\VWNLFK]ELRUöZNDUWQDVWURQLH 2. &]WHU\]PLHQQHSU]HFKRZXMÈLQIRUPDFMH V]F]HJöïRZHRDNW\ZQHMNDUFLH i) =PLHQQD$thisSU]HFKRZXMHDNWXDOQ\]ELöUNDUW ii) =PLHQQD$tabSU]HFKRZXMHDNWXDOQLHDNW\ZQÈ NDUWÚ $NWXDOQLHDNW\ZQDNDUWDMHVWSRELHUDQDSU]H] PHWRGÚğQG iii) =PLHQQD$linkSU]HFKRZXMHHOHPHQW<a> ]QDMGXMÈF\VLÚQDNDUFLH iv) =PLHQQD$panelSU]HFKRZXMHZDUWRĂÊDWU\EXWX hrefDNW\ZQHMNDUW\ ]PLHQQDWDEÚG]LHXĝ\WDGR XNU\FLDSDQHOXJG\Xĝ\WNRZQLNZ\ELHU]HLQQ\ SDQHO 3. 2EVHUZDWRU]GDU]HñMHVWVNRQğJXURZDQ\GR VSUDZG]HQLDF]\Xĝ\WNRZQLNNOLNQÈïNWöUÈNROZLHN NDUWÚQDOLĂFLH3RNOLNQLÚFLXNDUW\QDVWÚSXMH XUXFKRPLHQLHLQQHMIXQNFMLDQRQLPRZHM 4. 0HWRGDe.preventDefault()XQLHPRĝOLZLD SU]HQLHVLHQLHXĝ\WNRZQLNDQDQRZÈVWURQÚSR NOLNQLÚFLXïÈF]D 5. 8WZRU]HQLH]PLHQQHMRQD]ZLH$linkSU]H]QDF]RQHMGRSU]HFKRZ\ZDQLDELHĝÈFHJRïÈF]D ZHZQÈWU]RELHNWXM4XHU\ 6. 8WZRU]HQLH]PLHQQHMidSU]H]QDF]RQHMGR SU]HFKRZ\ZDQLDZDUWRĂFLDWU\EXWXhrefNOLNQLÚWHM NDUW\1D]ZD]PLHQQHMWRidSRQLHZDĝMHVWRQD Xĝ\ZDQDGRSREUDQLDGRSDVRZDQHJRSDQHOX ]DZDUWRĂFL ]DSRPRFÈMHJRDWU\EXWXid 7. .RQVWUXNFMDifVSUDZG]DF]\]PLHQQDid ]DZLHUDZDUWRĂÊDELHĝÈF\HOHPHQWMHVW nieaktywny-HĝHOLREDZDUXQNLVÈVSHïQLRQHWR 8. :DWU\EXFLHclassSRSU]HGQLRDNW\ZQHMNDUW\ LZSDQHOXXVXZDQHVÈZDUWRĂFLactive FRGH]DNW\ZXMHNDUWÚLXNU\ZDSDQHO 9. :DWU\EXFLHclassNOLNQLÚWHMNDUW\LZRGSRZLDGDMÈF\PMHMSDQHOXQDVWÚSXMHGRGDQLHZDUWRĂFLactive FRSRZRGXMHĝHNDUWDZ\JOÈGDQDDNW\ZQÈLZ\ĂZLHWORQ\MHVWRGSRZLDGDMÈF\MHMSDQHOZF]HĂQLHM XNU\W\ :W\PVDP\PF]DVLHRGQLHVLHQLDGRW\FKHOHPHQWöZVÈSU]HFKRZ\ZDQHZ]PLHQQ\FK$panel L$tab c11/tabs.html HTML <ul class=”tab-list”> <li class=”active”><a class=”tab-control” href=”#tab-1”>Opis</a></li> <li><a class=”tab-control” href=”#tab-2”>6NïDGQLNL</a></li> <li><a class=”tab-control” href=”#tab-3”>Dostawa</a></li> </ul> <div class=”tab-panel active” id=”tab-1”>=DZDUWRĂÊ</div> <div class=”tab-panel” id=”tab-2”>=DZDUWRĂÊ</div> <div class=”tab-panel” id=”tab-3”>=DZDUWRĂÊ</div> c11/css/tabs.css CSS .tab-panel { display: none;} .tab-panel.active { display: block;} JAVASCRIPT 1 2 3 4 5 6 7 8 c11/js/tabs.js $(’.tab-list’).each(function(){ :\V]XNDQLHOLVWNDUW var $this = $(this); 3U]HFKRZ\ZDQLHELHĝÈFHMOLVW\ YDUWDE WKLVğQG ĳOLDFWLYHĳ 3REUDQLHDNW\ZQHJRHOHPHQWXOLVW\ YDUOLQN WDEğQG ĳDĳ 3REUDQLHïÈF]D]DNW\ZQHMNDUW\ var $panel = $($link.attr(’href’)); 3REUDQLHDNW\ZQHJRSDQHOX $this.on(’click’, ’.tab-control’, function(e) { 3RNOLNQLÚFLXNDUW\ e.preventDefault(); 8QLHPRĝOLZLHQLHGRP\ĂOQHJR]DFKRZDQLDHOHPHQWX var $link = $(this); 3U]HFKRZ\ZDQLHELHĝÈFHJRïÈF]D var id = this.hash; 3REUDQLHDWU\EXWXKUHINOLNQLÚWHMNDUW\ if (id && !$link.is(’.active’)) { $panel.removeClass(’active’); $tab.removeClass(’active’); -HĝHOLQLHMHVWDNWXDOQLHDNW\ZQ\ 3DQHOVWDMHVLÚQLHDNW\ZQ\ .DUWDVWDMHVLÚQLHDNW\ZQD $panel = $(id).addClass(’active’); 3DQHOVWDMHVLÚDNW\ZQ\ $tab = $link.parent().addClass(’active’); .DUWDVWDMHVLÚDNW\ZQD 9 } }); }); 3$1(/(=$:$572¥&, 505 OKNO MODALNE 2NQRPRGDOQHWRGRZROQHJRURG]DMX]DZDUWRĂÊNWöUDSRMDZLDVLÚQDG SR]RVWDïÈ]DZDUWRĂFLÈVWURQ\7HJRURG]DMXRNQRPXVLE\Ê]DPNQLÚWH ]DQLPEÚG]LHPRĝQD]QöZNRU]\VWDÊ]SR]RVWDïHMF]ÚĂFLVWURQ\ :RPDZLDQ\PSU]\NïDG]LH RNQRPRGDOQHMHVWWZRU]RQH JG\Xĝ\WNRZQLNNOLNQLHLNRQÚ VHUFDZOHZ\PJöUQ\PURJX VWURQ\ 2NQRPRGDOQH]RVWDMHZ\ĂZLHWORQHQDĂURGNXVWURQ\LSR]ZDOD Xĝ\WNRZQLNRPQDSRG]LHOHQLH VLÚGDQÈVWURQÈZUöĝQ\FK VHUZLVDFKVSRïHF]QRĂFLRZ\FK =DZDUWRĂÊRNQDPRGDOQHJR ]Z\NOH]QDMGXMHVLÚQDVWURQLH DOHSRGF]DVMHMZF]\W\ZDQLD MHVWXNU\ZDQD]DSRPRFÈ&66 1DVWÚSQLH-DYD6FULSWSRELHUD WÚ]DZDUWRĂÊLZ\ĂZLHWODMÈ ZHZQÈWU]HOHPHQWöZ<div> WZRU]ÈF\FKRNQRPRGDOQHQDG LVWQLHMÈFÈVWURQÈ &]DVDPLRNQRPRGDOQHSU]\FLHPQLDSR]RVWDïÈF]ÚĂÊVWURQ\ Z\ĂZLHWODQÈSRGQLP,VWQLHMH PRĝOLZRĂÊDE\RNQRPRGDOQH E\ïRZ\ĂZLHWODQHDXWRPDW\F]QLH SR]DNRñF]HQLXZF]\W\ZDQLD VWURQ\OXEQDVNXWHNG]LDïDñ SRGHMPRZDQ\FKSU]H]Xĝ\WNRZQLNDSRGF]DVSUDF\]HVWURQÈ 506 3$1(/(=$:$572¥&, ,QQHSU]\NïDG\VNU\SWöZRNQDPRGDOQHJRREHMPXMÈ&RORUER[ RSUDFRZDQ\SU]H]-DFND/0RRUHĳD /LJKWER[ /RNHVK'KDNDU L)DQF\ER[ )DQF\$SSV =QDMG]LHV]MHUöZQLHĝZM4XHU\8, L%RRWVWUDS 7DN]ZDQ\ wzorzec projektowy WRWHUPLQVWRVRZDQ\SU]H] SURJUDPLVWöZZRGQLHVLHQLX GRQDMF]ÚĂFLHMVSRW\NDQHJR SRGHMĂFLDGRUR]ZLÈ]\ZDQLD RNUHĂORQ\FKSUREOHPöZ SURJUDPLVW\F]Q\FK :VNU\SFLHZ\NRU]\VWDQR Z]RU]HFPRGXïX7RSRSXODUQ\VSRVöEWZRU]HQLDNRGX REHMPXMÈF\ORJLNÚSXEOLF]QÈ LSU\ZDWQÈ *G\VNU\SW]RVWDQLHXPLHV]F]RQ\QDVWURQLHLQQHVNU\SW\ PRJÈNRU]\VWDÊ]MHJRPHWRG SXEOLF]Q\FKopen()close() Lcenter()8ĝ\WNRZQLF\QLH PXV]ÈX]\VNDÊGRVWÚSXGR ]PLHQQ\FKWZRU]ÈF\FKNRG +70/DZLÚFSR]RVWDMÈRQH SU\ZDWQH :SRGUR]G]LDOH ķ2ELHNWPRGDOĵZSXQNFLH ķ-DYD6FULSWĵNRGSU\ZDWQ\MHVW ZNRORU]H]LHORQ\P 8ĝ\FLHPRGXïöZSRGF]DV WZRU]HQLDDSOLNDFMLZLÈĝH VLÚ]ZLHORPD]DOHWDPLQD SU]\NïDG SRPDJDZRUJDQL]DFMLNRGX SR]ZDODQDWHVWRZDQLH LSRQRZQH]DVWRVRZDQLH SRV]F]HJöOQ\FKNRPSRQHQWöZDSOLNDFML WZRU]\]DNUHVLW\PVDP\P XQLHPRĝOLZLDSRZVWDZDQLH NRQĠLNWöZQD]Z]PLHQQ\FK LPHWRG]LVWQLHMÈF\PL ZLQQ\FKVNU\SWDFK • • • 7HQVNU\SWRNQDPRGDOQHJR WZRU]\RELHNW RQD]ZLH modal NWöU\]NROHLGRVWDUF]D WU]\QRZHPHWRG\JRWRZHGR Xĝ\FLDSRGF]DVWZRU]HQLDRNLHQ PRGDOQ\FK <div class="modal"> <div class="modal-content"> open()ĽRWZLHUDRNQR PRGDOQH close()Ľ]DP\NDRNQR center()ĽXPLHV]F]DRNQR QDĂURGNXVWURQ\ </div> </div> <button role=”button” class=”modal-close”>]DPNQLM</button> 8ĝ\WNRZQLF\WHJRVNU\SWXPXV]ÈMHG\QLHZLHG]LHÊMDNG]LDïD PHWRGDopen()SRQLHZDĝ PHWRGDclose()MHVW Z\ZRï\ZDQDSU]H]REVHUZDWRUD]GDU]HñJG\Xĝ\WNRZQLN NOLNQLHSU]\FLVN]DP\NDMÈF\ RNQR PHWRGDcenter()MHVW Z\ZRï\ZDQDSU]H]open() DWDNĝHSU]H]REVHUZDWRUD ]GDU]HñJG\Xĝ\WNRZQLN ]PLHQLZLHONRĂÊRNQD • • :WUDNFLHZ\ZRïDQLDPHWRG\ open()QDOHĝ\SRGDÊSDUDPHWU ZVND]XMÈF\]DZDUWRĂÊMDNDPD VLÚ]QDOHěÊZRNQLHPRGDOQ\P ,VWQLHMHUöZQLHĝPRĝOLZRĂÊ SRGDQLDZ\PLDUöZRNQD :GLDJUDPLHPRĝHV]]REDF]\Ê ĝHVNU\SWXPLHV]F]D]DZDUWRĂÊ ZHZQÈWU]HOHPHQWöZ<div> ,QQ\VNU\SWPRĝHZ\NRU]\VWDÊ Z\ZRïDQLHPHWRG\open() LZVND]DÊNWöUD]DZDUWRĂÊ SRZLQQDSRMDZLÊVLÚZRNQLH PRGDOQ\P <div.modal>ĽG]LDïD ZFKDUDNWHU]HUDPNLZRNöï RNQDPRGDOQHJR <div.modal-content>ĽG]LDïD ZFKDUDNWHU]HNRQWHQHUDQD ]DZDUWRĂÊXPLHV]F]DQÈQD VWURQLH <button.modal-close> — SR]ZDODXĝ\WNRZQLNRZLQD ]DPNQLÚFLHRNQDPRGDOQHJR 3$1(/(=$:$572¥&, 507 TWORZENIE OKNA MODALNEGO 6NU\SWPRGDOQ\Z\NRQXMHGZD]DGDQLD 1. 7ZRU]\NRG+70/GODRNQDPRGDOQHJR 2. =ZUDFDRELHNWmodal]DZLHUDMÈF\PHWRG\ open()close()Lcenter() 8PLHV]F]HQLHVNU\SWXQDVWURQLH+70/QLH SU]\QRVLĝDGQHJRZLGRF]QHJRHIHNWX SRGREQLH MDNGRïÈF]HQLHELEOLRWHNLM4XHU\QDVWURQLHQLHPD ZSï\ZXQDMHMZ\JOÈG 3R]ZDODMHGQDNLQQ\PVNU\SWRPQDXĝ\FLH IXQNFMRQDOQRĂFLRELHNWXmodalLZ\ZRï\ZDQLHMHJR PHWRG\open()ZFHOXXWZRU]HQLDRNQDPRGDOQHJR 3RGREQLHMDNGRïÈF]HQLHELEOLRWHNLM4XHU\ SR]ZDODQD]DVWRVRZDQLHQDVWURQLHRELHNWX jQueryLMHJRPHWRG 2]QDF]DWRĝHRVRE\NRU]\VWDMÈFH]HVNU\SWXPXV]ÈW\ONRZLHG]LHÊMDNZ\ZRïDÊPHWRGÚopen() L]DMHMSRPRFÈXWZRU]\ÊRNQRPRGDOQH 3OLNPRGDOLQLWMVSRZRGXMHXVXQLÚFLH]DZDUWRĂFL ]HVWURQ\+70/1DVWÚSQLHGRGDMHSURFHGXUÚREVïXJL]GDU]HñZ\ZRïXMÈFÈPHWRGÚopen()RELHNWX modalZFHOXZ\ĂZLHWOHQLDRNQDPRGDOQHJRZUD] ]]DZDUWRĂFLÈSU]HGFKZLOÈXVXQLÚWÈ]HVWURQ\ Nazwa initWRVNUöWRGLQLFMDFMLĽSRZV]HFKQLH 1 Utworzenie zmiennej: $content: fragment strony wyświetlany w oknie modalnym Ukrycie fragmentu strony przez jego oddzielenie 2 Zdarzenie: click w przycisku FUNKCJA ANONIMOWA: Wyświetlenie zawartości w oknie modalnym 3 Wywołanie metody open() obiektu modal, a następnie przekazanie zmiennej $content jako parametru, a także wymiarów okna modalnego 508 3$1(/(=$:$572¥&, :SU]\NïDG]LHSU]HGVWDZLRQ\PQDVWURQLHSR SUDZHMRNQRPRGDOQHMHVWWZRU]RQHSU]H]VNU\SW RQD]ZLHPRGDOLQLWMV6SRVöEWZRU]HQLDRELHNWX modalLZ\NRU]\VWDQLDMHJRPHWRG]REDF]\V] ZSRGUR]G]LDOHķ2ELHNWPRGDOĵ7HUD]SU]\MPLM ĝHXĝ\FLHZ\PLHQLRQHJRVNU\SWXMHVWRGSRZLHGQLNLHPGRGDQLDSRQLĝV]HJRNRGX3RZRGXMHRQ XWZRU]HQLHRELHNWXRQD]ZLHmodalLGRGDQLH WU]HFKPHWRGGRRELHNWX var modal = { center: function() { 0LHMVFHQDNRGPHWRG\FHQWHU }, open: function(settings) { 0LHMVFHQDNRGPHWRG\RSHQ }, close: function() { 0LHMVFHQDNRGPHWRG\FORVH } }; Xĝ\ZDQDQD]ZDSOLNöZLIXQNFMLRGSRZLHG]LDOQ\FK ]DSU]HSURZDG]HQLHNRQğJXUDFMLQDVWURQLHOXE LQQ\FKF]ÚĂFLVNU\SWX 1. :SLHUZV]HMNROHMQRĂFLVNU\SWSRELHUD]DZDUWRĂÊHOHPHQWXSRVLDGDMÈFHJRDWU\EXWidRZDUWRĂFL share-options=ZUöÊXZDJÚMDNPHWRGDM4XHU\ RQD]ZLH.detach()XVXZDWÚ]DZDUWRĂÊ]HVWURQ\ 2. .RQğJXUDFMDSURFHGXU\REVïXJL]GDU]Hñ Z\ZRï\ZDQHMSRNOLNQLÚFLXSU]\FLVNXSU]H] Xĝ\WNRZQLND:öZF]DVQDVWÚSXMHXUXFKRPLHQLH IXQNFMLDQRQLPRZHM 3. )XQNFMDDQRQLPRZDXĝ\ZDPHWRG\open() RELHNWXmodal3RELHUDSDUDPHWU\ZSRVWDFL OLWHUDïXRELHNWX contentĽ]DZDUWRĂÊSU]H]QDF]RQDGRZ\ĂZLHWOHQLDZRNQLHPRGDOQ\PZRPDZLDQ\P SU]\NïDG]LHWR]DZDUWRĂÊHOHPHQWXSRVLDGDMÈFHJRDWU\EXWidRZDUWRĂFLshare-options widthĽV]HURNRĂÊRNQDPRGDOQHJR heightĽZ\VRNRĂÊRNQDPRGDOQHJR • • • :NURNX]RVWDïDXĝ\WDPHWRGD.detach()SRQLHZDĝSRZRGXMH XPLHV]F]HQLHZSDPLÚFLHOHPHQWöZLSURFHGXUREVïXJL]GDU]Hñ FRSR]ZDODQDLFKSöěQLHMV]HZ\NRU]\VWDQLH%LEOLRWHNDM4XHU\RIHUXMH WDNĝHPHWRGÚ.remove()NWöUDMHGQDNFDïNRZLFLHXVXZDHOHPHQW\ UŻYCIE SKRYPTU OKNA MODALNEGO c11/modal-window.html HTML 1 2 3 <div id=”share-options”> 7RMHVWPLHMVFHQDNRPXQLNDWLSU]\FLVNLVHUZLVöZVSRïHF]QRĂFLRZ\FK! </div> <script src=”js/jquery.js”></script> <script src=”js/modal-window.js”></script> <script src=”js/modal-init.js”></script> </body> </html> =ZUöÊXZDJÚQDWU]\U]HF]\ZSRZ\ĝV]\PNRG]LH +70/ 1. =QDF]QLN<div>]DZLHUDMÈF\PLHMVFHQD SU]\FLVNLVHUZLVöZVSRïHF]QRĂFLRZ\FK 2. ÈF]HGRVNU\SWXWZRU]ÈFHJRRELHNWmodal PRGDOZLQGRZMV 3. ÈF]HGRVNU\SWXZ\ĂZLHWODMÈFHJRRNQR PRGDOQH]DSRPRFÈRELHNWXmodal PRGDOLQLWMV SU]H]QDF]RQHJRQDSU]\FLVNLVHUZLVöZVSRïHF]QRĂFLRZ\FK 3U]HGVWDZLRQ\SRQLĝHMSOLNPRGDOLQLWMVZ\ĂZLHWOD RNQRPRGDOQH=ZUöÊXZDJÚĝHPHWRGDopen() RWU]\PXMHZIRUPDFLH-621WU]\IUDJPHQW\ LQIRUPDFML i) ]DZDUWRĂÊ content Z\ĂZLHWODQÈZRNQLH PRGDOQ\P Z\PDJDQD ii) V]HURNRĂÊ width RNQDPRGDOQHJR RSFMRQDOQDQDGSLVXMHZDUWRĂÊGRP\ĂOQÈ iii) Z\VRNRĂÊ height RNQDPRGDOQHJR RSFMRQDOQDQDGSLVXMHZDUWRĂÊGRP\ĂOQÈ c11/js/modal-init.js JAVASCRIPT 1 2 3 (function(){ var $content = $(’#share-options’).detach(); 8VXQLÚFLH]HVWURQ\]DZDUWRĂFL RNQDPRGDOQHJR $(’#share’).on(’click’, function() { 3URFHGXUDREVïXJL]GDU]Hñ Z\ĂZLHWODMÈFDRNQRPRGDOQH PRGDORSHQ ^FRQWHQWFRQWHQWZLGWKKHLJKW` }); i ii iii }()); :DUWRĂÊZïDĂFLZRĂFL]LQGH[RNQDPRGDOQHJR PXVLE\ÊEDUG]RGXĝDDE\RNQRE\ïRZ\ĂZLHWORQH QDGSR]RVWDïÈ]DZDUWRĂFLÈ3U]HGVWDZLRQHWXWDM CSS VW\OHJZDUDQWXMÈZ\ĂZLHWOHQLHRNQDPRGDOQHJR QDGUHV]WÈVWURQ\ ZSHïQ\PSU]\NïDG]LH]QDMGXMH VLÚZLÚFHMVW\OöZ c11/css/modal-window.css .modal { position: absolute; ]LQGH[` 3$1(/(=$:$572¥&, 509 OBIEKT MODAL 2 Utworzenie kodu HTML dla okna modalnego: $window: obiekt window $modal: element okna modalnego $content: zawartość okna modalnego $close: przycisk zamknięcia okna modalnego Dodaj $content i $close do $modal 3 Zdarzenie: click w przycisku zamknięcia okna modalnego FUNKCJA ANONIMOWA: Przeznaczona do zamknięcia okna modalnego Uniemożliwienie domyślnego zachowania łącza Wywołanie funkcji close() 5 FUNKCJA: center() Wyśrodkowanie okna modalnego Pobranie wysokości viewportu i odjęcie połowy wysokości okna modalnego, następnie podzielenie przez 2 w celu obliczenia odległości, w jakiej okno modalne powinno znajdować się od początku okna. Tę samą operację trzeba przeprowadzić dla szerokości 6 Na podstawie przygotowanych wartości utworzenie stylów CSS dla okna modalnego 7 FUNKCJA: open(VHWWLQJV) Wyświetlenie lub ukrycie okna modalnego 8 Opróżnienie okna modalnego i dodanie nowej zawartości 9 Użycie stylów CSS do ustawienia szerokości i wysokości okna modalnego Dodanie okna modalnego do <body> 10 11 12 Wyśrodkowanie okna modalnego za pomocą center() Zdarzenie: UHVL]H w oknie przeglądarki internetowej Funkcja: close() Zamknięcie okna modalnego Usunięcie zawartości z okna modalnego Oddzielenie okna modalnego i jego procedur obsługi zdarzeń 510 3$1(/(=$:$572¥&, 3RQLĝHMZ\PLHQLRQRNURNLSURZDG]ÈFHGRXWZRU]HQLDRELHNWXmodal-HJRPHWRG\VÈSU]H]QDF]RQH GRWZRU]HQLDRNLHQPRGDOQ\FK 1. =DGHNODURZDQLHRELHNWXmodal0HWRG\RELHNWX VÈWZRU]RQHSU]H]IXQNFMÚW\SX,,)( DQJ,PPHGLDWHO\,QYROYHG)XQFWLRQ([SUHVVLRQ SDWU]UR]G]LDïSRGUR]G]LDïķ1DW\FKPLDVW Z\NRQ\ZDQDIXQNFMDZ\UDĝHQLDĵ 7HQNURNQLH ]RVWDïSRND]DQ\QDGLDJUDPLHSROHZHMVWURQLH 2.3U]HFKRZ\ZDQLHELHĝÈFHJRRELHNWXwindow ZGRSDVRZDQ\P]ELRU]HM4XHU\DQDVWÚSQLH XWZRU]HQLHWU]HFKHOHPHQWöZ+70/SRWU]HEQ\FK GODRNQDPRGDOQHJR3U]\JRWRZDQLHRNQDPRGDOQHJRLMHJRXPLHV]F]HQLHZ]PLHQQHM$modal 3.'RGDQLHGRSU]\FLVNX]DP\NDMÈFHJRSURFHGXU\ REVïXJL]GDU]HñNWöUDZ\ZRïXMHPHWRGÚclose() RELHNWXmodal 4.3RVïRZLHNOXF]RZ\PreturnPDP\EORNNRGX ZQDZLDVLHNODPURZ\P7HQEORNMHVWRGSRZLHG]LDOQ\]DWZRU]HQLHWU]HFKPHWRGSXEOLF]Q\FK RELHNWXmodal=ZUöÊXZDJÚĝHWHQNURNQLH ]RVWDïSRND]DQ\ZGLDJUDPLH 5.0HWRGDcenter()SRZRGXMHXWZRU]HQLHGZöFK ]PLHQQ\FK i) topĽSRELHUDZ\VRNRĂÊRNQDSU]HJOÈGDUNL LRGHMPXMHZ\VRNRĂÊRNQDPRGDOQHJRRWU]\PDQ\ Z\QLNMHVWG]LHORQ\SU]H]FRGDMHRGOHJïRĂÊ RNQDPRGDOQHJRRGSRF]ÈWNXRNQDSU]HJOÈGDUNL i) leftĽSRELHUDV]HURNRĂÊRNQDSU]HJOÈGDUNL LRGHMPXMHV]HURNRĂÊRNQDPRGDOQHJRRWU]\PDQ\ Z\QLNMHVWG]LHORQ\SU]H]FRGDMHRGOHJïRĂÊ RNQDPRGDOQHJRRGOHZHMNUDZÚG]LRNQDSU]HJOÈGDUNL 6.0HWRGDM4XHU\RQD]ZLH.css()Xĝ\ZD Z\PLHQLRQ\FK]PLHQQ\FKGRXPLHV]F]HQLDRNQD PRGDOQHJRQDĂURGNXVWURQ\ 7.0HWRGDopen()SRELHUDSDUDPHWUZSRVWDFL RELHNWX'RWHJRRELHNWXRGQRVLP\VLÚ]Z\NRU]\VWDQLHPVïRZDsettings 'DQHGODWHJRRELHNWX ]RVWDï\SRND]DQHQDSRSU]HGQLHMVWURQLH 8.:V]HONDLVWQLHMÈFD]DZDUWRĂÊ]RVWDMHXVXQLÚWD ]RNQDPRGDOQHJRDZïDĂFLZRĂÊcontentRELHNWX settingsEÚG]LHGRGDQDGRNRGX+70/XWZRU]RQHJRZNURNDFKL 9.6]HURNRĂÊLZ\VRNRĂÊRNQDPRGDOQHJRVÈXVWDZLDQHQDSRGVWDZLHZDUWRĂFLRELHNWXsettings -HĝHOLQLH]RVWDQÈSRGDQHWRXĝ\WDEÚG]LHZDUWRĂÊ auto1DVWÚSQLHRNQRPRGDOQHMHVWXPLHV]F]RQH QDVWURQLH]Z\NRU]\VWDQLHPPHWRG\appendTo() 10. 0HWRGDcenter()MHVWXĝ\WDGRZ\ĂURGNRZDQLDRNQDPRGDOQHJR 11.-HĝHOLZLHONRĂÊRNQDXOHJQLH ]PLDQLHWRSRQRZQLH]RVWDQLH Z\ZRïDQDPHWRGDcenter() 12. 0HWRGDclose()RSUöĝQLD RNQRPRGDOQHRGG]LHODNRG+70/ RGVWURQ\RUD]XVXZDZV]HONLH SURFHGXU\REVïXJL]GDU]Hñ :SRQLĝV]\PNRG]LHZLHUV]H XPLHV]F]RQHQD]LHORQ\PWOHVÈ X]QDZDQH]Dprywatne7HZLHU V]HNRGXVÈXĝ\ZDQHMHG\QLH ZRELHNFLH 'RWHJRNRGXQLH PRĝQDX]\VNDÊEH]SRĂUHGQLHJR GRVWÚSX]]HZQÈWU]RELHNWX JAVASCRIPT 1 2 var modal = (function() { var $window = $(window); var $modal = $(’<div class=”modal”/>’); 4 5 6 7 8 9 10 11 12 c11/js/modal-window.js =DGHNODURZDQLHRELHNWXPRGDO 3U]\JRWRZDQLHNRGX]QDF]QLNöZGODRNQD PRGDOQHJR var $content = $(’<div class=”modal-content”/>’); YDUFORVH ĳEXWWRQUROH ĵEXWWRQĵFODVV ĵPRGDOFORVHĵ!]DPNQLMEXWWRQ!ĳ $modal.append($content, $close); 3 *G\VNU\SW]RVWDQLHGRïÈF]RQ\ GRVWURQ\PHWRG\center() open()Lclose()ZNURNDFK RGGREÚGÈGRVWÚSQH ZRELHNFLHmodalGRXĝ\FLD SU]H]LQQHVNU\SW\:\PLHQLRQH PHWRG\QD]\ZDP\publicznymi 'RGDQLHSU]\FLVNX]DP\NDMÈFHJRGRRNQD PRGDOQHJR $close.on(’click’, function(e) { -HĝHOLXĝ\WNRZQLNNOLNQLHSU]\FLVN]DP\NDMÈF\RNQR e.preventDefault(); 8QLHPRĝOLZLHQLHVWDQGDUGRZHJRG]LDïDQLDïÈF]D modal.close(); =DPNQLÚFLHRNQDPRGDOQHJR }); return { 'RGDQLHNRGXGRRELHNWXPRGDO center: function() { =GHğQLRZDQLHPHWRG\FHQWHU 2EOLF]HQLHRGOHJïRĂFLRGJöUQHMLOHZHMNUDZÚG]LRNQDDE\Z\ĂURGNRZDÊRNQRPRGDOQH YDUWRS 0DWKPD[ ZLQGRZKHLJKW PRGDORXWHU+HLJKW YDUOHIW 0DWKPD[ ZLQGRZZLGWK PRGDORXWHU:LGWK $modal.css({ 6W\OH&66GODRNQDPRGDOQHJR top: top + $window.scrollTop(), :\ĂURGNRZDQLHZSLRQLH left: left + $window.scrollLeft() :\ĂURGNRZDQLHZSR]LRPLH }); }, open: function(settings) { =GHğQLRZDQLHPHWRG\RSHQ $content.empty().append(settings.content); =GHğQLRZDQLHQRZHM]DZDUWRĂFLGODRNQD PRGDOQHJR $modal.css({ width: settings.width || ’auto’, height: settings.height || ’auto’ }).appendTo(’body’); 2NUHĂOHQLHZ\PLDUöZRNQDPRGDOQHJR 6]HURNRĂÊ :\VRNRĂÊ 8PLHV]F]HQLHRNQDPRGDOQHJRQDVWURQLH modal.center(); :\ZRïDQLHPHWRG\FHQWHU ZLQGRZ RQ ĳUHVL]HĳPRGDOFHQWHU :\ZRïDQLHPHWRG\SR]PLDQLHZLHONRĂFL RNQDSU]HJOÈGDUNLLQWHUQHWRZHM }, close: function() { =GHğQLRZDQLHPHWRG\FORVH $content.empty(); 8VXQLÚFLH]DZDUWRĂFL]RNQDPRGDOQHJR $modal.detach(); 8VXQLÚFLHRNQDPRGDOQHJR]HVWURQ\ ZLQGRZ RII ĳUHVL]HĳPRGDOFHQWHU 8VXQLÚFLHSURFHGXU\REVïXJL]GDU]Hñ } }; }()); 3$1(/(=$:$572¥&, 511 PRZEGLĄDARKA ZDJĘĆ 3U]HJOÈGDUND]GMÚÊMHVWSU]\NïDGHPJDOHULLREUD]öZ 3RNOLNQLÚFLXPLQLDWXU\JïöZQ\REUD]MHVW]DVWÚSRZDQ\QRZ\P :RPDZLDQ\PSU]\NïDG]LH PRĝHV]]REDF]\ÊJïöZQ\REUD] RUD]]QDMGXMÈFHVLÚSRGQLPWU]\ PLQLDWXU\ .RG+70/GODSU]HJOÈGDUNL ]GMÚÊVNïDGDVLÚ] • -HGQHJRGXĝHJRHOHPHQWX <div>SU]H]QDF]RQHJRGOD REUD]XJïöZQHJR2EUD]\Z\ĂZLHWODQHZW\PHOHPHQFLH <div>]RVWDMÈZ\ĂURGNRZDQH LMHĂOL]DFKRG]LSRWU]HED SU]HVNDORZDQHDE\]PLHĂFLï\ VLÚZ]DUH]HUZRZDQ\PGOD QLFKPLHMVFX • 'UXJLHJRHOHPHQWX<div> SU]HFKRZXMÈFHJRPLQLDWXU\ REUD]öZNWöUHPRĝQD Z\ĂZLHWOLÊ7HPLQLDWXU\ ]QDMGXMÈVLÚZHZQÈWU]ïÈF]\ $WU\EXWhrefïÈF]DSURZDG]L GRZLÚNV]HMZHUVMLGDQHJR REUD]X 512 3$1(/(=$:$572¥&, ,QQHVNU\SW\JDOHULLREHMPXMÈ*DOOHULD*DOOHULğFL71*DOOHU\ ZAZNACZONE PIERWSZE ZDJĘCIE ZDJĘCIE 1 MINIATURA 1 MINIATURA 2 MINIATURA 3 Wyświetlone zdjęcie 1 Podświetlona miniatura 1 ZAZNACZONE DRUGIE ZDJĘCIE ZDJĘCIE 2 MINIATURA 1 MINIATURA 2 MINIATURA 3 Wyświetlone zdjęcie 2 .LHG\NOLNQLHV]PLQLDWXUÚ REVHUZDWRU]GDU]HñZ\ZRïD IXQNFMÚDQRQLPRZÈNWöUD 1. 6SUDZG]LZDUWRĂÊDWU\EXWX href SURZDG]LGRZLÚNV]HM ZHUVMLGDQHJRREUD]X 2. 8WZRU]\QRZ\HOHPHQW<img> GODWHJRREUD]X 3. 6SUDZLĝHWHQHOHPHQW EÚG]LHQLHZLGRF]Q\ 4. 'RïÈF]\JRGRZLÚNV]HJR HOHPHQWX<div> 3RZF]\WDQLXREUD]XIXQNFMD RQD]ZLHcrossfade()MHVW Xĝ\ZDQDGR]DVWRVRZDQLD SU]HMĂFLDPLÚG]\LVWQLHMÈF\P REUD]HPDQRZRĝÈGDQ\P Podświetlona miniatura 2 3$1(/(=$:$572¥&, 513 UŻYCIE PRZEGLĄDARKI ZDJĘĆ :FHOXXĝ\FLDSU]HJOÈGDUNL ]GMÚÊWZRU]\P\HOHPHQW<div> SU]H]QDF]RQ\GRZ\ĂZLHWODQLD REUD]XJïöZQHJR7HQHOHPHQW MHVWSXVW\DZDUWRĂÊMHJR DWU\EXWXid to photo-viewer 0LQLDWXU\]QDMGXMÈVLÚZLQQ\P HOHPHQFLH<div>.DĝGD PLQLDWXUDMHVWXPLHV]F]RQD ZHOHPHQFLH<a>ZUD]]WU]HPD DWU\EXWDPL hrefSURZDG]LGRZLÚNV]HM ZHUVMLREUD]X • • class]DZV]HPDZDUWRĂÊ • thumbDELHĝÈF\REUD] JïöZQ\PDZDUWRĂÊactive titleRSLVXMHREUD]WD ZDUWRĂÊEÚG]LHSöěQLHMXĝ\WD ZDWU\EXFLHalt c11/photo-viewer.html HTML <div id=”photo-viewer”></div> <div id=”thumbnails”> <a href=”img/photo-1.jpg” class=”thumb active” title=”Elderberry mallow”> <img src=”img/thumb-1.jpg” alt=”Elderberry Marshmallow” /></a> <a href=”img/photo-2.jpg” title=”Rose Marshmallow” class=”thumb”> <img src=”img/thumb-2.jpg” alt=”Rose Marshmallow” /></a> <a href=”img/photo-3.jpg” title=”Chrysanthemum Marshmallow” class=”thumb”> <img src=”img/thumb-3.jpg” alt=”Chrysanthemum Marshmallow” /></a> </div> 6NU\SWSRMDZLDVLÚSU]HG]QDF]QLNLHP]DP\NDMÈF\P</body>-DNPRĝHV]]REDF]\ÊV\PXOXMH NOLNQLÚFLHSLHUZV]HMPLQLDWXU\SU]H]Xĝ\WNRZQLND (OHPHQW<div>Z\ĂZLHWODMÈF\REUD]JïöZQ\PD ZDUWRĂÊrelativeGODZïDĂFLZRĂFLposition (OHPHQWMHVW]DWHPZ\MÚW\]HVWDQGDUGRZHJR VWUXPLHQLDHOHPHQWöZLNRQLHF]QHMHVWSRGDQLH ZDUWRĂFLZïDĂFLZRĂFLheight 3RGF]DVZF]\W\ZDQLDREUD]öZDWU\EXWclassPD ZDUWRĂÊis-loading Z\ĂZLHWODDQLPRZDQ\REUD] ZIRUPDFLH*,) 3RZF]\WDQLXREUD]XZDUWRĂÊ WD]RVWDMHXVXQLÚWD -HĝHOLREUD]MHVWZLÚNV]\QLĝREV]DUSU]H]QDF]RQ\ QDMHJRZ\ĂZLHWOHQLHZïDĂFLZRĂFLmax-width Lmax-heightVSRZRGXMÈMHJRSU]HVNDORZDQLH DE\VLÚ]PLHĂFLï'RZ\ĂURGNRZDQLDREUD]X ZHOHPHQFLHVWRVRZDQHMHVWSRïÈF]HQLHVW\OöZ &66LNRGX-DYD6FULSWV]F]HJöïRZHREMDĂQLHQLH ]QDMG]LHV]ZSRGUR]G]LDOHķ6NU\SWSU]HJOÈGDUNL ]GMÚÊ ĵZSXQNFLHķ-DYD6FULSWĵ 514 3$1(/(=$:$572¥&, c11/css/photo-viewer.css #photo-viewer { position: relative; KHLJKWS[ RYHUĠRZKLGGHQ` #photo-viewer.is-loading:after { content: url(images/load.gif); position: absolute; WRS ULJKW` #photo-viewer img { position: absolute; PD[ZLGWK PD[KHLJKW WRS OHIW` a.active { RSDFLW\` CSS ASYNCHRONICZNE WCZYTYWANIE I BUFOROWANIE OBRAZÓW :VNU\SFLH SRND]DQ\PQDNROHMQHMVWURQLH ]DVWRVRZDQR GZLHLQWHUHVXMÈFHWHFKQLNL 3UDFD]DV\QFKURQLF]Q\PZF]\W\ZDQLHP]DZDUWRĂFL 8WZRU]HQLHZïDVQHJRRELHNWXcache WYŚWIETLENIE ODPOWIEDNIEGO OBRAZU PODCZAS ASYNCHRONICZNEGO WCZYTYWANIA OBRAZÓW PROBLEM :LÚNV]HREUD]\VÈZF]\W\ZDQHQDVWURQLHMHG\QLH SRNOLNQLÚFLXPLQLDWXU\SU]H]Xĝ\WNRZQLNDDSU]HG Z\ĂZLHWOHQLHPZVND]DQHJRREUD]XVNU\SWF]HND QDMHJRSREUDQLHZFDïRĂFL :F]\WDQLHZLÚNV]\FKREUD]öZPRĝH]DMÈÊFKZLOÚ MHĝHOL]DWHPXĝ\WNRZQLNZNUöWNLPRGVWÚSLHF]DVX NOLNQLHGZDUöĝQHREUD]\WR 1. 'UXJLNOLNQLÚW\REUD]PRĝH]RVWDÊZF]\WDQ\ V]\EFLHMQLĝSLHUZV]\L]RVWDÊZ\ĂZLHWORQ\ ZSU]HJOÈGDUFH 2. =RVWDQLH]DVWÈSLRQ\SU]H]SLHUZV]\REUD]NOLNQLÚW\SU]H]Xĝ\WNRZQLNDJG\EÚG]LHMXĝZF]\WDQ\ 7RPRĝHXXĝ\WNRZQLNDZ\ZRïDÊZUDĝHQLHĝH ZF]\WDQ\MHVWQLHSUDZLGïRZ\REUD] 3RGF]DVZF]\W\ZDQLDREUD]XSURFHGXUDREVïXJL ]GDU]HñVSUDZG]DF]\ZDUWRĂÊ]PLHQQHMsrc SU]HFKRZXMÈFHMĂFLHĝNÚGRVWÚSXGRWHJRREUD]X RGSRZLDGDZDUWRĂFL]PLHQQHMrequest-HĝHOL Xĝ\WNRZQLNNOLNQÈïLQQ\REUD]RGFKZLOLZF]\W\ZDQLDSLHUZV]HJRWRZDUWRĂFL]PLHQQ\FKrequest LsrcVÈUöĝQHLREUD]QLH]RVWDQLHZ\ĂZLHWORQ\ BUFOROWANIE OBRAZÓW, KTÓRE SĄ JUŻ WCZYTANE W PRZEGLĄDARCE INTERNETOWEJ PROBLEM .LHG\Xĝ\WNRZQLNĝÈGDZF]\WDQLDGXĝHJRREUD]X NOLNDMÈFMHJRPLQLDWXUÚ QDVWÚSXMHXWZRU]HQLH QRZHJRHOHPHQWX<img>LMHJRGRGDQLHQDVWURQLH -HĝHOLXĝ\WNRZQLNSRZUöFLGRZF]HĂQLHMZ\EUDQHJRREUD]XWRQLHFKFHP\SRQRZQHJRWZRU]HQLD HOHPHQWXLZF]\W\ZDQLDWHJRREUD]X ROZWIĄZANIE ROZWIĄZANIE .LHG\Xĝ\WNRZQLNNOLNQLHPLQLDWXUÚ ¥FLHĝNDGRVWÚSXGRREUD]XMHVWSU]HFKRZ\ZDQD SU]H]]PLHQQÈQDSR]LRPLHIXQNFMLRQD]ZLH src =PLHQQDJOREDOQDRQD]ZLHrequestUöZQLHĝ MHVWXDNWXDOQLDQDĂFLHĝNÈGRVWÚSXGRREUD]X 3URFHGXUDREVïXJL]GDU]HñMHVWVNRQğJXURZDQD GRZ\ZRïDQLDIXQNFMLDQRQLPRZHMSRZF]\WDQLX WHJRREUD]X 7ZRU]\P\SURVW\RELHNWLQDGDMHP\PXQD]ZÚ cache=DNDĝG\PUD]HPJG\WZRU]RQ\EÚG]LH QRZ\HOHPHQW<img>EÚG]LHRQXPLHV]F]RQ\ ZRELHNFLHcache • • • :WHQVSRVöESRGF]DVĝÈGDQLDREUD]XNRGPRĝH VSUDZG]LÊF]\RGSRZLDGDMÈF\PXHOHPHQW<img> ]QDMGXMHVLÚZEXIRU]H ]DPLDVWSRQRZQLHWZRU]\Ê HOHPHQWLZF]\W\ZDÊREUD] 3$1(/(=$:$572¥&, 515 SKRYPT PRZEGLĄDARKI ZDJĘĆ (1) :W\PVNU\SFLHZSURZDG]RQRSHZQHQRZHNRQFHSFMHLGODWHJRMHJRRPöZLHQLH]DELHUDDĝF]WHU\ VWURQ\1DGZöFKSLHUZV]\FKVWURQDFK]REDF]\V] ]PLHQQHJOREDOQHLIXQNFMÚcrossfade() 1 Przechowywane w zmiennych: request: ostatnio żądany obraz $current: aktualnie wyświetlany obraz cache: obiekt przeznaczony do przechowywania wczytanych obrazów $frame: kontener dla obrazu $thumbs: kontener dla miniatur Funkcja: crossfade($img) Przejście do nowego obrazu (podawanego jako parametr) 2 3 N Czy aktualnie jest wyświetlany obraz? T Zatrzymanie animacji i wygaszenie starego obrazu 4 Wyśrodkowanie nowego obrazu za pomocą CSS 5 Pojawienie się nowego obrazu 6 Przechowywanie nowego obrazu w $current 1. 8WZRU]HQLH]HVWDZX]PLHQQ\FKJOREDOQ\FK 0RJÈE\ÊXĝ\ZDQHZFDï\PVNU\SFLH]DUöZQR ZRPöZLRQHMQDWHMVWURQLHIXQNFMLcrossfade() MDNLSURFHGXUDFKREVïXJL]GDU]Hñ ]RESRGUR]G]LDï ķ6NU\SWSU]HJOÈGDUNL]GMÚÊ ĵ 2. )XQNFMDcrossfade()EÚG]LHZ\ZRïDQDJG\ Xĝ\WNRZQLNNOLNQLHPLQLDWXUÚ=DGDQLHPIXQNFMLMHVW ]DSHZQLHQLHHOHJDQFNLHJRSU]HMĂFLDPLÚG]\VWDU\P LQRZ\PREUD]HP 3. .RQVWUXNFMDifVSUDZG]DF]\REUD]MHVWZF]\WDQ\ -HĝHOLWDNZ\NRQ\ZDQHVÈGZLHRSHUDFMH0HWRGD .stop()]DWU]\PXMHELHĝÈFÈDQLPDFMÚDQDVWÚSQLH PHWRGD.fadeOut()SRZRGXMHXNU\FLHREUD]X 4. :FHOXZ\ĂURGNRZDQLDREUD]XZHOHPHQFLH NRQLHF]QHMHVW]GHğQLRZDQLHGZöFKZïDĂFLZRĂFL &66:SRïÈF]HQLX]UHJXïDPL&66SRND]DQ\PL ZSRGUR]G]LDOHķ8ĝ\FLHSU]HJOÈGDUNL]GMÚÊĵWHZïDĂFLZRĂFL&66VSRZRGXMÈZ\ĂURGNRZDQLHREUD]XZMHJR NRQWHQHU]H 3DWU]GLDJUDP\ZSRGUR]G]LDOHķ6NU\SW SU]HJOÈGDUNL]GMÚÊ ĵZSXQNFLHķ:\ĂURGNRZDQLH REUD]Xĵ i) marginLeftĽSRELHUDV]HURNRĂÊREUD]X]DSRPRFÈ .width()G]LHOLMÈSU]H]GZDDQDVWÚSQLHREOLF]RQÈ ZDUWRĂÊZ\NRU]\VWXMHMDNRXMHPQ\PDUJLQHV ii) marginTopĽSRELHUDZ\VRNRĂÊREUD]X]DSRPRFÈ .height()G]LHOLMÈSU]H]GZDDQDVWÚSQLHREOLF]RQÈ ZDUWRĂÊZ\NRU]\VWXMHMDNRXMHPQ\PDUJLQHV OBIEKT CACHE ,GHDRELHNWXcachePRĝHZ\GDZDÊVLÚVNRPSOLNRZDQDDOHZV]\VWNLHRELHNW\WRSRSURVWX]ELöU SDUNOXF]ZDUWRĂÊ3RSUDZHMVWURQLHPRĝHV] ]REDF]\ÊSU]\NïDGRZ\Z\JOÈGRELHNWXcache .LHG\REUD]MHVWĝÈGDQ\QDVNXWHNNOLNQLÚFLDQRZHM PLQLDWXU\GRRELHNWXcache]RVWDMHGRGDQDQRZD ZïDĂFLZRĂÊ .OXF]GRGDQ\GRRELHNWXcacheWRĂFLHĝND GRVWÚSXGRREUD]X SRQLĝHMRGZRïXMHP\VLÚ GRQLHMMDNRVUF :DUWRĂFLÈMHVWNROHMQ\RELHNW RGZöFKZïDĂFLZRĂFLDFK VUF.$imgSU]HFKRZXMHRGQLHVLHQLHGRRELHNWX M4XHU\]DZLHUDMÈFHJRQRZRXWZRU]RQ\HOHPHQW <img> VUF.isLoadingWRZïDĂFLZRĂÊZVND]XMÈFD F]\REUD]MHVWDNWXDOQLHZF]\W\ZDQ\ ZDUWRĂÊ ERRORZVND • • • 516 3$1(/(=$:$572¥&, var cache = { “c11/img/photo-1.jpg”: { “$img”: M4XHU\REMHFW, “isLoading”: false }, “c11/img/photo-2.jpg”: { “$img”: M4XHU\REMHFW, “isLoading”: false }, “c11/img/photo-3.jpg”: { “$img”: M4XHU\REMHFW, “isLoading”: false } } 5. -HĝHOLQRZ\REUD]MHVWDNWXDOQLHDQLPRZDQ\ QDVWÚSXMH]DWU]\PDQLHDQLPDFMLLREUD]SRMDZLD VLÚQDVWURQLH 6. :UHV]FLHQRZ\REUD]VWDMHVLÚREUD]HPELHĝÈF\PLMHVWSU]HFKRZ\ZDQ\Z]PLHQQHM$current c11/js/photo-viewer.js JAVASCRIPT 1 var var var var var request; $current; cache = {}; $frame = $(’#photo-viewer’); $thumbs = $(’.thumb’); 2 function crossfade($img) { 2VWDWQLRĝÈGDQ\REUD] $NWXDOQLHZ\ĂZLHWODQ\REUD] 2ELHNWFDFKH .RQWHQHUGODREUD]X .RQWHQHUGODPLQLDWXU )XQNFMDUHDOL]XMÈFDSU]HMĂFLHPLÚG]\ REUD]DPL 1RZ\REUD]MHVWSRGDZDQ\MDNRSDUDPHWU if ($current) { -HĝHOLDNWXDOQLHMHVWZ\ĂZLHWODQ\REUD] $current.stop().fadeOut(’slow’); =DWU]\PDQLHDQLPDFMLLXNU\FLHREUD]X } 3 $img.css({ marginLeft: -$img.width() / 2, 4 marginTop: -$img.height() / 2 =GHğQLRZDQLHPDUJLQHVöZ&66GODREUD]X 0DUJLQHVXMHPQ\RZLHONRĂFLSRïRZ\ V]HURNRĂFLREUD]X 0DUJLQHVXMHPQ\RZLHONRĂFLSRïRZ\Z\VRNRĂFL REUD]X }); 5 6 $img.stop().fadeTo(’slow’, 1); =DWU]\PDQLHDQLPDFMLQRZHJRREUD]XLMHJR SRMDZLHQLHVLÚ $current = $img; 1RZ\REUD]VWDMHVLÚELHĝÈF\P } WYŚRODKOWANIE OBRAZU i) :\ĂURGNRZDQLHREUD]X Z\PDJDWU]HFKNURNöZ:DUNXV]XVW\OöZSR]\FMRQRZDQLH DEVROXWQHMHVWZ\NRU]\VW\ZDQH GRXPLHV]F]HQLDZOHZ\P JöUQ\PURJXHOHPHQWX]DZLHUDMÈFHJRREUD] ii) :DUNXV]XVW\OöZREUD]MHVW SU]HVXQLÚW\ZGöïRUD]ZSUDZR RV]HURNRĂFLLZ\VRNRĂFL kontenera V]HURNRĂÊS[2 S[ Z\VRNRĂÊS[2 S[ iii) :VNU\SFLHPDUJLQHV\ XMHPQHSRZRGXMÈSU]HVXQLÚFLH REUD]XZJöUÚRUD]ZOHZR RSRïRZÚV]HURNRĂFLLZ\VRNRĂFL obrazu V]HURNRĂÊS[2 S[ Z\VRNRĂÊS[2 S[ 3$1(/(=$:$572¥&, 517 SKRYPT PRZEGLĄDARKI ZDJĘĆ (2) 15 1 Zdarzenie: click w miniaturze Symulacja kliknięcia pierwszej miniatury przez użytkownika FUNKCJA ANONIMOWA 2 3 Utworzenie zmiennych: $img oznacza obraz do wczytania, src wskazuje ścieżkę dostępu do obrazu, request to ścieżka do ostatniego obrazu. Uniemożliwienie domyślnego działania łącza 4 Uaktualnienie aktywnej miniatury 5 N Czy ten obraz znajduje się w buforze? T Czy ten obraz nadal jest wczytywany? N T Wywołanie funkcji: crossfade() 6 Utworzenie elementu <img> i przechowywanie go w $img 7 Uaktualnienie obiektu cache i ustawienie wartości true właściwości isLoading 8 Zdarzenie: load w nowym obrazie 13 Dodanie klasy is-loading do elementu 14 Uaktualnienie atrybutów src i alt obrazu FUNKCJA ANONIMOWA 9 Ukrycie obrazu 10 Usunięcie klasy is-loading i dodanie obrazu 11 Uaktualnienie obiektu cache i ustawienie wartości false właściwości isLoading 12 N Czy obraz nadal jest obrazem ostatnio żądanym? Call function: crossfade() 518 3$1(/(=$:$572¥&, T 1. 0LQLDWXU\VÈRSDNRZDQHïÈF]DPL=DNDĝG\P UD]HPJG\Xĝ\WNRZQLNNOLNQLHPLQLDWXUÚQDVWÚSXMH Z\ZRïDQLHIXQNFMLDQRQLPRZHM 2. 8WZRU]RQH]RVWDMÈWU]\]PLHQQH i) $imgVïXĝ\GRXWZRU]HQLDQRZ\FKHOHPHQWöZ <img>NWöUHEÚGÈSU]HFKRZ\ZDï\ZLÚNV]HREUD]\ SRGF]DVLFKZF]\W\ZDQLD ii) src ]PLHQQDQDSR]LRPLHIXQNFML SU]HFKRZXMH ĂFLHĝNÚGRVWÚSXGRQRZHJRREUD]X WRZDUWRĂÊ DWU\EXWXhrefïÈF]D iii) request ]PLHQQDJOREDOQD SU]HFKRZXMHWÚ VDPÈĂFLHĝNÚGRVWÚSX 3. 8QLHPRĝOLZLHQLHïÈF]RPZF]\WDQLDREUD]X 4. 8VXQLÚFLHNODV\active]HwszystkichPLQLDWXU RUD]GRGDQLHWHMNODV\GRNOLNQLÚWHMPLQLDWXU\ 5. -HĝHOLREUD]]QDMGXMHVLÚZRELHNFLHcacheL]RVWDï ZF]\WDQ\VNU\SWZ\ZRïXMHIXQNFMÚcrossfade() 6. -HĝHOLREUD]QLH]RVWDïMHV]F]HZF]\WDQ\VNU\SW WZRU]\QRZ\HOHPHQW<img> 7. 'RGDQLHHOHPHQWXGREXIRUDLSU]\SLVDQLH ZDUWRĂFLtrueZïDĂFLZRĂFLisLoading 8. 1DW\PHWDSLHREUD]QLH]RVWDïMHV]F]HZF]\WDQ\ XWZRU]RQ\MHVWW\ONRSXVW\HOHPHQW<img> 3RZF]\WDQLXREUD]X]GDU]HQLHloadZ\ZRïXMH IXQNFMÚ NWöUÈWU]HED]DSLVDÊprzedZF]\WDQLHP REUD]X 9. )XQNFMDSU]HGHZV]\VWNLPXNU\ZDZF]\W\ZDQ\ REUD] 10. 1DVWÚSQLH]HOHPHQWXXVXZDQDMHVWNODVD is-loadingDQRZ\REUD]]RVWDMHGRGDQ\GRUDPNL 11. :RELHNFLHcacheZïDĂFLZRĂFLisLoadingSU]\SLV\ZDQDMHVWZDUWRĂÊfalse ZWUDNFLHG]LDïDQLD IXQNFMLREUD]MHVWMXĝZF]\WDQ\ 12. .RQVWUXNFMDifVSUDZG]DF]\ZïDĂQLHZF]\WDQ\ REUD]MHVWW\PNWöU\E\ïĝÈGDQ\MDNRRVWDWQL$E\ ]REDF]\ÊMDNWRVLÚRGE\ZDSRZUöÊSRQRZQLHGR NURNX =PLHQQDsrcSU]HFKRZXMHĂFLHĝNÚGRVWÚSX GRZïDĂQLHZF]\WDQHJRREUD]X0D]DNUHVQD SR]LRPLHIXQNFML =PLHQQDrequestMHVWXDNWXDOQLDQD]DNDĝG\P UD]HPJG\Xĝ\WNRZQLNNOLNQLHREUD]0D]DNUHV JOREDOQ\ 'ODWHJRWHĝMHĝHOLXĝ\WNRZQLNNOLNQLHLQQÈPLQLDWXUÚ SRUR]SRF]ÚFLXZF]\W\ZDQLDREUD]XZDUWRĂFL ]PLHQQ\FKsrc i requestEÚGÈUöĝQHLĝDGHQREUD] QLH]RVWDQLHZF]\WDQ\-HĝHOLZDUWRĂFLREX]PLHQQ\FKVÈWDNLHVDPHWRQDVWÚSXMHZ\ZRïDQLHIXQNFML crossfade() • • 13. 3R]DNRñF]HQLXSU]\JRWRZDñPRĝQDSU]\VWÈSLÊGRZF]\WDQLDREUD]X.ODVDis-loading ]RVWDMHGRGDQDGRUDPNL 14. 3U]H]GRGDQLHZDUWRĂFLGRDWU\EXWXsrc REUD]XQDVWÚSXMHUR]SRF]ÚFLHZF]\W\ZDQLD REUD]X:DUWRĂÊDWU\EXWXalt]RVWDQLHSREUDQD ]DWU\EXWXtitleïÈF]D 15. 2VWDWQLZLHUV]VNU\SWXV\PXOXMHNOLNQLÚFLH SLHUZV]HMPLQLDWXU\SU]H]Xĝ\WNRZQLND 7RVSRZRGXMHZF]\WDQLHSLHUZV]HJRREUD]X SRXUXFKRPLHQLXVNU\SWX c11/js/photo-viewer.js JAVASCRIPT 1 2 $(document).on(’click’, ’.thumb’, function(e){ 3RNOLNQLÚFLXPLQLDWXU\ var $img; 8WZRU]HQLH]PLHQQHMORNDOQHMRQD]ZLHLPJ var src = this.href; 3U]HFKRZ\ZDQLHĂFLHĝNLGRVWÚSXGRREUD]X request = src; 3RQRZQLHSU]HFKRZ\ZDQLHĂFLHĝNLGRVWÚSXGRREUD]X 3 e.preventDefault(); 8QLHPRĝOLZLHQLHGRP\ĂOQHMDNFMLïÈF]D 4 $thumbs.removeClass(’active’); $(this).addClass(’active’); 8VXQLÚFLHNODV\DFWLYH]HZV]\VWNLFKPLQLDWXU 'RGDQLHNODV\DFWLYHGRNOLNQLÚWHMPLQLDWXU\ 5 6 7 if (cache.hasOwnProperty(src)) { -HĝHOLRELHNWFDFKH]DZLHUDWHQREUD] if (cache[src].isLoading === false) { DZDUWRĂFLÈZïDĂFLZRĂFLLV/RDGLQJMHVWIDOVH crossfade(cache[src].$img); WRZ\ZRï\ZDQDMHVWIXQNFMDFURVVIDGH } } else { 1DWRPLDVWMHĝHOLREUD]QLH]QDMGXMHVLÚZEXIRU]H $img = $(’<img/>’); 3U]HFKRZ\ZDQLHSXVWHJRHOHPHQWXLPJ!Z]PLHQQHMLPJ cache[src] = { 8PLHV]F]HQLHWHJRREUD]XZEXIRU]H $img: $img, 'RGDQLHĂFLHĝNLGRVWÚSXGRREUD]X isLoading: true 3U]\SLVDQLHZïDĂFLZRĂFLLV/RDGLQJZDUWRĂFLWUXH }; 1DVWÚSQHNLONDZLHUV]\]RVWDQLHZ\NRQDQ\FKSRZF]\WDQLXREUD]XDOHQDMSLHUZWU]HED SRF]\QLÊSU]\JRWRZDQLD $img.on(’load’, function() { .LHG\REUD]]RVWDQLHZF]\WDQ\ $img.hide(); QDOHĝ\JRXNU\Ê 8VXQLÚFLHNODV\LVORDGLQJ]UDPNLLGRïÈF]HQLHGRQLHMQRZHJRREUD]X $frame.removeClass(’is-loading’).append($img); cache[src].isLoading = false; 8DNWXDOQLHQLHZïDĂFLZRĂFLLV/RDGLQJZRELHNFLHFDFKH -HĝHOLWRQDGDOMHVWRVWDWQLRĝÈGDQ\REUD] if (request === src) { crossfade($img); :\ZRïDQLHIXQNFMLFURVVIDGH } 5R]ZLÈ]DQLHSUREOHPöZ]DV\QFKURQLF]Q\PZF]\W\ZDQLHP }); 8 9 10 11 12 13 $frame.addClass(’is-loading’); 'RGDQLHNODV\LVORDGLQJGRUDPNL 14 $img.attr({ ’src’: src, ’alt’: this.title || ’’ }); 8VWDZLHQLHDWU\EXWöZZHOHPHQFLHLPJ! 'RGDQLHDWU\EXWXVUFZVND]XMÈFHJRZF]\W\ZDQ\REUD] 'RGDQLHW\WXïXRLOH]RVWDïSRGDQ\ZïÈF]X } }); 15 2VWDWQLZLHUV]MHVWZ\NRQ\ZDQ\UD] SRZF]\WDQLXSR]RVWDïHMF]ÚĂFLVNU\SWX LPDQDFHOX Z\ĂZLHWOHQLHSLHUZV]HJRREUD]X ĳWKXPEĳ HT FOLFN 6\PXODFMDNOLNQLÚFLDSLHUZV]HMPLQLDWXU\ 3$1(/(=$:$572¥&, 519 RESPONSYWNE SLAJDY 6ODMG\SR]ZDODMÈQDXïRĝHQLHVHULLHOHPHQWöZQDVRELHDOHZGDQHMFKZLOL Z\ĂZLHWODQ\MHVWW\ONRMHGHQ1DVWÚSQLHXNU\WHHOHPHQW\VÈZ\ĂZLHWODQH MHGHQSRGUXJLP 6ODMG\ZF]\WXMÈNLONDSDQHOL FKRÊMHGQRF]HĂQLHZ\ĂZLHWODQ\ MHVWW\ONRMHGHQ'RVWDUF]DQH VÈWDNĝHSU]\FLVNLSR]ZDODMÈFH Xĝ\WNRZQLNRPQDSRUXV]DQLH VLÚPLÚG]\VODMGDPL3RQDGWR LVWQLHMHPRĝOLZRĂÊRGPLHU]DQLD F]DVXFRSR]ZDODQDDXWRPDW\F]QHSU]HFKRG]HQLHPLÚG]\ SRV]F]HJöOQ\PLVODMGDPL ZXVWDORQ\FKRGVWÚSDFKF]DVX :NRG]LH+70/VODMG\]DZLHUDMÈVLÚZHOHPHQFLH<div> NWöUHJRDWU\EXWclassPD ZDUWRĂÊslider-viewer$E\ VODMG\PRJï\G]LDïDÊSRWU]HEQH VÈGZDNROHMQHHOHPHQW\<div> • .RQWHQHUQDVODMG\-HJR DWU\EXWclassPDZDUWRĂÊ slide-group:HZQÈWU]NRQWHQHUDSRV]F]HJöOQHVODMG\ ]QDMGXMÈVLÚZRGG]LHOQ\FK HOHPHQWDFK<div> • .RQWHQHUQDSU]\FLVNX-HJR DWU\EXWclassPDZDUWRĂÊ slide-buttons3U]\FLVNL ]RVWDQÈGRGDQHSU]H]VNU\SW -HĝHOLNRG+70/]DZLHUD]QDF]QLNLGODZLÚFHMQLĝW\ONRMHGQHJR VODMGXVNU\SWDXWRPDW\F]QLH SU]HNV]WDïFLMHQDRGG]LHOQH VODMG\ 520 3$1(/(=$:$572¥&, ,QQHVNU\SW\VODMGöZREHMPXMÈ8QVOLGHU$Q\WKLQJ6OLGHU1LYR6OLGHU L:2:6OLGHU2EVïXJDVODMGöZMHVWRIHURZDQDWDNĝHSU]H]M4XHU\8, L%RRWVWUDS 3RGF]DVSLHUZV]HJRZF]\WDQLDVWURQ\VW\OH &66XNU\ZDMÈZV]\VWNLHVODMG\FRSRZRGXMH Z\FLÈJQLÚFLHLFK]QRUPDOQHJRSU]HSï\ZX HOHPHQWöZ1DVWÚSQLHUHJXïD&66XVWDZLDZDUWRĂÊ blockZïDĂFLZRĂFLdisplaySLHUZV]HJRVODMGX FRR]QDF]DMHJRZ\ĂZLHWOHQLH 6NU\SWSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLH VODMG\L SU]\SLVXMHLPQXPHU\LQGHNVöZ GRGDMHSU]\FLVNLSRGJUXSÈVODMGöZ .LHG\SU]\FKRG]LGRSRUXV]DQLDVLÚPLÚG]\VODMGDPL LXWZRU]HQLDHIHNWXķZMHĝGĝDQLDĵ QXPHU LQGHNVXQRZHJRVODMGXMHVWZLÚNV]\QLĝQXPHU LQGHNVXELHĝÈFHJRVODMGXDQDVWÚSQLHQRZ\ VODMGMHVWXPLHV]F]DQ\SRSUDZHMVWURQLHJUXS\ .LHG\ZLGRF]Q\VODMGEÚG]LHDQLPRZDQ\ZOHZÈ VWURQÚQRZ\DXWRPDW\F]QLH]DF]QLHSRMDZLDÊVLÚ ZZLGRNX]DMPXMÈFPLHMVFHVWDUHJR • • -HĂOLSU]\JRWRZDQRQDSU]\NïDGF]WHU\VODMG\SR SLHUZV]\PZF]\WDQLXVWURQ\GRP\ĂOQLH]RVWDQLH Z\ĂZLHWORQ\SLHUZV]\VODMGDSRGQLP]QDMGÈVLÚ F]WHU\SU]\FLVNL -HĝHOLQXPHULQGHNVXQRZHJRVODMGXMHVWPQLHMV]\ QLĝQXPHULQGHNVXELHĝÈFHJRWRQRZ\VODMGEÚG]LH XPLHV]F]RQ\SROHZHMVWURQLHDNWXDOQLHZ\ĂZLHWODQHJR.LHG\ZLGRF]Q\VODMGEÚG]LHDQLPRZDQ\ ZSUDZÈVWURQÚQRZ\DXWRPDW\F]QLH]DF]QLH SRMDZLDÊVLÚZZLGRNX]DMPXMÈFPLHMVFHVWDUHJR 1XPHU\LQGHNVXSR]ZDODMÈVNU\SWRZLQDLGHQW\ğNDFMÚSRV]F]HJöOQ\FKVODMGöZ:FHOXXVWDOHQLD DNWXDOQLHZ\ĂZLHWODQHJRVODMGXVNU\SWXĝ\ZD ]PLHQQHMRQD]ZLHcurrentIndex SU]HFKRZXMH RQDQXPHULQGHNVXELHĝÈFHJRVODMGX 3RZF]\WDQLXVWURQ\EÚG]LHWRZDUWRĂÊF]\OLZ\ĂZLHWODQ\ MHVWSLHUZV]\VODMG6NU\SWPXVLWDNĝHZLHG]LHÊ NWöU\VODMGEÚG]LHZ\ĂZLHWORQ\MDNRQDVWÚSQ\VWÈG ]PLHQQDnewSlide 3R]DNRñF]HQLXDQLPDFMLXNU\WHVODMG\]RVWDQÈ XPLHV]F]RQHSRGDNWXDOQLHZ\ĂZLHWODQ\P 3$1(/(=$:$572¥&, 521 UŻYCIE SLAJDÓW *G\GRïÈF]\P\VNU\SWGRVWURQ\GRZROQ\NRG +70/RSDUW\QDSRQLĝV]HMVWUXNWXU]HEÚG]LHPöJï E\ÊVNRQZHUWRZDQ\QDVODMG\ 1DVWURQLHPRĝH]QDMGRZDÊVLÚZLHOHJUXSVODMGöZDNDĝGD]QLFKEÚG]LHREVïXJLZDQDSU]H]WHQ VDPVNU\SWNWöU\SU]HGVWDZLRQRZSRGUR]G]LDOH ķ6NU\SWVODMGöZĵZSXQNFLHķ-DYD6FULSWĵ c11/slider.html HTML <div class=”slide-viewer”> <div class=”slide-group”> <div class=”slide slide-1”>=DZDUWRĂÊVODMGX!</div> <div class=”slide slide-2”>=DZDUWRĂÊVODMGX!</div> <div class=”slide slide-3”>=DZDUWRĂÊVODMGX!</div> <div class=”slide slide-4”>=DZDUWRĂÊVODMGX!</div> </div> </div> <div class=”slide-buttons”></div> 6]HURNRĂÊHOHPHQWXslide-viewerQLHMHVWQD VWDïHXVWDORQDDZLÚFG]LDïDZUHVSRQV\ZQ\FK XNïDGDFKVWURQ-HGQDNZ\VRNRĂÊPXVLE\ÊRNUHĂORQDSRQLHZDĝGODVODMGXXVWDORQRSR]\FMRQRZDQLHDEVROXWQH SRZRGXMHWRXVXQLÚFLHHOHPHQWX ]HVWDQGDUGRZHJRSU]HSï\ZXHOHPHQWöZLEH] SRGDQLDZ\VRNRĂFLGRP\ĂOQLHE\ïDE\VWRVRZDQD Z\VRNRĂÊS[ .DĝG\VODMGPDWDNLHVDPHZ\PLDU\MDNHOHPHQW slide-viewer-HĝHOL]DZDUWRĂÊVODMGXMHVWZLÚNV]DZïDĂFLZRĂÊRYHUĠRZHOHPHQWXslide-viewer SRZRGXMHXNU\FLHQDGPLDURZ\FKIUDJPHQWöZ VODMGXZ\NUDF]DMÈF\FKSR]DUDPNÚ-HĝHOLVODMG MHVWPQLHMV]\WR]RVWDQLHXPLHV]F]RQ\ZOHZ\P JöUQ\PURJX c11/css/slider.css slide-viewer { position: relative; RYHUĠRZKLGGHQ KHLJKWS[` .slide-group { ZLGWK KHLJKW position: relative;} .slide { ZLGWK KHLJKW display: none; position: absolute;} VOLGHğUVWFKLOG^ display: block;} 522 3$1(/(=$:$572¥&, CSS OGÓLNY OPIS SKRYPTU SLAJDÓW M4XHU\Z\V]XNXMHJUXS\VODMGöZZNRG]LH]QDF]QLNöZ+70/ 1DVWÚSQLHGODNDĝGHJRMHVWZ\NRQ\ZDQDIXQNFMDDQRQLPRZDNWöUD WZRU]\JUXSÚVODMGöZ:IXQNFMLWHMLVWQLHMÈF]WHU\NOXF]RZHIUDJPHQW\ 1. KONFIGURACJA 2. ZMIANA SLAJDU — MOVE() .DĝGDJUXSDVODMGöZZ\PDJDSHZQ\FK]PLHQQ\FK]QDMGXMÈVLÚRQHQDSR]LRPLHIXQNFMLLW\P VDP\P PRJÈPLHÊUöĝQHZDUWRĂFLGODSRV]F]HJöOQ\FK VODMGöZ QLHSRZRGXMÈNRQĠLNWX]H]PLHQQ\PLVSR]D VNU\SWX )XQNFMDmove()MHVWZ\NRU]\VW\ZDQDGRSU]HMĂFLD PLÚG]\VODMGDPLRUD]XDNWXDOQLHQLDSU]\FLVNöZ ZVND]XMÈF\FKZ\ĂZLHWODQ\VODMG:\ZRïDQLH WHMIXQNFMLQDVWÚSXMHSRNOLNQLÚFLXSU]\FLVNX SU]H]Xĝ\WNRZQLNDDWDNĝH]SR]LRPXIXQNFML advance() 3. LICZNIK CZASU WYŚWIETLAJĄCY KOLEJNY SLAJD PO UPŁYWIE 4 SEKUND — ADVANCE() 4. PRZETWARZANIE KAŻDEGO SLAJDU W GRUPIE • • /LF]QLNF]DVXSRZRGXMHZ\ZRïDQLHIXQNFMLmove() SRXSï\ZLHVHNXQG2ELHNW-DYD6FULSWwindow SRVLDGDPHWRGÚsetTimeout()NWöUDXPRĝOLZLD XWZRU]HQLHOLF]QLNDF]DVX=DGDQLHPWHMPHWRG\ MHVWZ\NRQDQLHIXQNFMLSRXSï\ZLHSRGDQHMOLF]E\ PLOLVHNXQG/LF]QLNF]DVXEDUG]RF]ÚVWRMHVW SU]\SLV\ZDQ\]PLHQQHMLXĝ\ZDSRQLĝV]HMVNïDGQL .RGZ\NRQXMHLWHUDFMÚSU]H]ZV]\VWNLHVODMG\ ZFHOX XWZRU]HQLDJUXSVODMGöZ GRGDQLDSU]\FLVNXGODNDĝGHJRVODMGXZUD] ]SURFHGXUÈREVïXJL]GDU]HñZ\ZRïXMÈFÈ IXQNFMÚmove()SRNOLNQLÚFLXSU]\FLVNXSU]H] Xĝ\WNRZQLND • • var WLPHRXW = setTimeout(IXQFWLRQ, GHOD\); • WLPHRXWWRQD]ZD]PLHQQHM]Z\NRU]\VWDQHMGR LGHQW\ğNDFMLOLF]QLNDF]DVX • IXQFWLRQWRIXQNFMDQD]ZDQDOXEDQRQLPRZD • GHOD\WROLF]EDPLOLVHNXQGMDNLHPXV]È XSï\QÈÊ]DQLPQDVWÈSLZ\ZRïDQLHIXQNFML $E\]DWU]\PDÊOLF]QLNF]DVXQDOHĝ\Z\ZRïDÊ PHWRGÚclearTimeout()3RELHUDRQDMHGHQ SDUDPHWUMDNLPMHVW]PLHQQDXĝ\WDGRLGHQW\ğNDFMLOLF]QLNDF]DVX clearTimeout(timeout); 3$1(/(=$:$572¥&, 523 SKRYPT SLAJDÓW 1 ITERACJA PRZEZ WSZYSTKIE GRUPY SLAJDÓW FUNKCJA ANONIMOWA: Utworzenie grupy slajdów dla danego kodu znaczników 2 7 Przechowywane w zmiennych: $this: bieżąca grupa slajdów, $group: kontener slajdów, $slides: wszystkie slajdy, buttonArray: przyciski, currentIndex: bieżący slajd, timeout: przechowuje licznik czasu ITERACJA PRZEZ WSZYSTKIE SLAJDY FUNKCJA ANONIMOWA: Utworzenie przycisku dla każdego slajdu 8 9 Utworzenie przycisku dla tego elementu N T Czy to jest bieżący slajd? Dodaj klasę: active Zdarzenie: click danego przycisku opcji 10 11 Dodanie przycisku do kontenera i tablicy Wywołanie funkcji move() — patrz podrozdział „Funkcja move()” Przejście do następnego slajdu 12 Wywołanie funkcji advance() 4 FUNKCJA: advance() Wyczyszczenie i wyzerowanie licznika czasu 5 Wywołanie clearTimeout() i setTimeout() 6 N Czy to jest ostatni slajd? Wywołanie move() i przejście do kolejnego slajdu T Wywołanie move() i przejście do pierwszego slajdu Przejście do kolejnej grupy slajdów 524 3$1(/(=$:$572¥&, 1. 1DVWURQLHLQWHUQHWRZHMPRĝH]QDMGRZDÊVLÚZLHOH JUXSVODMGöZDZLÚFG]LDïDQLHVNU\SWXUR]SRF]\QD VLÚRGZ\V]XNDQLDZV]\VWNLFKHOHPHQWöZNWöU\FK DWU\EXWclassPDZDUWRĂÊslider'ODNDĝGHJRWHJR URG]DMXHOHPHQWXZ\ZRï\ZDQDMHVWIXQNFMDDQRQLPRZDRGSRZLHG]LDOQD]DSU]HWZRU]HQLHJUXS\VODMGöZ 2. 8WZRU]RQH]RVWDMÈ]PLHQQHSU]H]QDF]RQH GRSU]HFKRZ\ZDQLDUöĝQ\FKLQIRUPDFML i) ELHĝÈFHMJUXS\VODMGöZ ii) HOHPHQWXRSDNRZXMÈFHJRVODMG\ iii) ZV]\VWNLFKVODMGöZZGDQHMJUXSLH iv) WDEOLF\SU]\FLVNöZ SRMHGQ\PGODNDĝGHJR VODMGX v) ELHĝÈFHJRVODMGX vi) OLF]QLNDF]DVX 3. 1DVWÚSQLHPDP\IXQNFMÚmove()SDWU]SRGUR]G]LDïķ)XQNFMDPRYH ĵ =ZUöÊXZDJÚĝHZ\PLHQLRQDIXQNFMDQLH]RVWDïD XZ]JOÚGQLRQDZSU]HGVWDZLRQ\PGLDJUDPLH 4. )XQNFMDadvance()WZRU]\OLF]QLNF]DVX 5. ']LDïDQLHIXQNFMLUR]SRF]\QDVLÚRGZ\]HURZDQLD ELHĝÈFHJROLF]QLNDF]DVX1DVWÚSQLHXVWDZLDQ\MHVW QRZ\OLF]QLNF]DVXSRXSï\ZLHZVND]DQHJRRNUHVX QDVWÚSXMHZ\ZRïDQLHIXQNFMLDQRQLPRZHM 6. .RQVWUXNFMDifVSUDZG]DF]\ELHĝÈF\VODMGMHVW RVWDWQL-HĝHOLWRQLHMHVWRVWDWQLVODMGZ\ZRï\ZDQD MHVWIXQNFMDmove()ZUD]]SDUDPHWUHPZVND]XMÈF\PVODMGNROHMQ\:SU]HFLZQ\PUD]LHQDVWÚSXMH SU]HMĂFLHGRSLHUZV]HJRVODMGX 7. .DĝG\VODMGMHVWSU]HWZDU]DQ\SU]H]IXQNFMÚ DQRQLPRZÈ 8. 'ODNDĝGHJRVODMGXWZRU]RQ\MHVWHOHPHQW <button> 9. -HĝHOLQXPHULQGHNVXVODMGXMHVWGRNïDGQLH WDNLVDPMDNQXPHUSU]HFKRZ\ZDQ\Z]PLHQQHM currentIndexGRSU]\FLVNX]RVWDMHGRGDQDNODVD active 10. 'RNDĝGHJRSU]\FLVNX]RVWDMHGRGDQDSURFHGXUD REVïXJL]GDU]Hñ.OLNQLÚFLHSU]\FLVNXSRZRGXMH Z\ZRïDQLHIXQNFMLmove()1XPHULQGHNVXZVND]XMH VODMGGRNWöUHJRPDQDVWÈSLÊSU]HMĂFLH 11. 3U]\FLVNLVÈXPLHV]F]DQHZNRQWHQHU]HRUD] GRGDZDQHGRWDEOLF\SU]\FLVNöZ7DEOLFDWDMHVW Z\NRU]\VW\ZDQDSU]H]IXQNFMÚmove()ZFHOX ZVND]DQLDDNWXDOQLHZ\ĂZLHWODQHJRVODMGX 12. :\ZRïDQLHIXQNFMLadvance()LW\PVDP\P XUXFKRPLHQLHOLF]QLNDF]DVX c11/js/slider.js JAVASCRIPT $(’.slider’).each(function(){ 'ODNDĝGHMJUXS\VODMGöZ var $this = $(this), 3REUDQLHELHĝÈFHMJUXS\VODMGöZ YDUJURXS WKLVğQG ĳVOLGHJURXSĳ 3REUDQLHHOHPHQWXRNODVLH VOLGHJURXS NRQWHQHU YDUVOLGHV WKLVğQG ĳVOLGHĳ 2ELHNWM4XHU\SU]HFKRZXMÈF\ZV]\VWNLHVODMG\ var buttonArray = [], 8WZRU]HQLHWDEOLF\QDSU]\FLVNLQDZLJDF\MQH YDUFXUUHQW,QGH[ 1XPHULQGHNVXELHĝÈFHJRVODMGX var timeout; =PLHQQDGRSU]HFKRZ\ZDQLDOLF]QLNDF]DVX 1 2 PRYH IXQNFMDSU]H]QDF]RQDGRSU]HMĂFLDPLÚG]\VODMGDPL SDWU]QDNROHMQHMVWURQLH 3 function advance() { 8VWDZLHQLHF]DVXZ\ĂZLHWODQLDVODMGX clearTimeout(timeout); :\]HURZDQLHOLF]QLNDF]DVXZ]PLHQQHMWLPHRXW 8UXFKRPLHQLHOLF]QLNDF]DVXDE\IXQNFMDDQRQLPRZDE\ïDZ\ZRï\ZDQDFRVHNXQG\ timeout = setTimeout(function(){ if (currentIndex < ($slides.length - 1)) { -HĝHOLWRQLHMHVWRVWDWQLVODMG move(currentIndex + 1); 3U]HMĂFLHGRQDVWÚSQHJRVODMGX } else { :SU]HFLZQ\PUD]LH PRYH 3U]HMĂFLHGRSLHUZV]HJRVODMGX } ` &]DVRF]HNLZDQLDZ\UDĝRQ\ZPLOLVHNXQGDFK } 4 5 6 7 8 9 10 11 12 $.each($slides, function(index){ 8WZRU]HQLHHOHPHQWXEXWWRQ!GODSU]\FLVNX var $button = $(’<button type=”button” class=”slide-btn”>•</button>’); if (index === currentIndex) { -HĝHOLLQGHNVZVND]XMHQDHOHPHQWELHĝÈF\ $button.addClass(’active’); 'RGDQLHNODV\DFWLYH } $button.on(’click’, function(){ 8WZRU]HQLHSURFHGXU\REVïXJL]GDU]Hñ GODSU]\FLVNX move(index); :\ZRïDQLHIXQNFMLPRYH }).appendTo(’.slide-buttons’); 'RGDQLHGRHOHPHQWX]DZLHUDMÈFHJRSU]\FLVNL buttonArray.push($button); 'RGDQLHSU]\FLVNöZGRWDEOLF\ }); advance(); }); PROBLEM — USTALANIE WŁAŚCIWEJ PRZERWY MIĘDZY SLAJDAMI, GDY JEST WYKORZYSTYWANY LICZNIK CZASU ROZWIĄZANIE — WYZEROWANIE LICZNIKA CZASU PO KLIKNIĘCIU PRZYCISKU .DĝG\VODMGSRZLQLHQE\ÊZ\ĂZLHWODQ\SU]H]F]WHU\ VHNXQG\ SRXSï\ZLHNWöU\FKQDVWÈSLSU]HMĂFLHGR NROHMQHJRVODMGX -HGQDNMHĝHOLXĝ\WNRZQLNNOLNQLH SU]\FLVNSRGZöFKVHNXQGDFKWRQRZ\VODMG PRĝHQLHE\ÊZ\ĂZLHWODQ\SU]H]F]WHU\VHNXQG\ SRQLHZDĝOLF]QLNF]DVXMXĝRGOLF]DF]DV )XQNFMDadvance()]HUXMHOLF]QLNF]DVXSU]HGMHJR SRQRZQ\PXVWDZLHQLHP.DĝGHNOLNQLÚFLHSU]\FLVNXSU]H]Xĝ\WNRZQLNDSRZRGXMHĝHRPöZLRQD QDGZöFKNROHMQ\FKVWURQDFKIXQNFMDmove() Z\ZRïXMHIXQNFMÚadvance()DE\]DJZDUDQWRZDÊ Z\ĂZLHWODQLHQRZHJRVODMGXSU]H]F]WHU\VHNXQG\ 3$1(/(=$:$572¥&, 525 FUNKCJA MOVE() FUNKCJA: move(index) Przejście do wskazanego obrazu 1 2 Tworzy zmienne: animateLeft: animacja od lewej lub prawej strony slideLeft: umieszczenie nowego slajdu po lewej lub prawej stronie 3 Wywołanie funkcji advance() 4 Czy jest odtwarzana animacja LUB nowy slajd jest bieżącym obrazem? N T 5 Uaktualnienie przycisków w celu pokazania aktywnego 6 Czy numer indeksu nowego obrazu jest większy od bieżącego? 7 N T Ustawienie zmiennej slideLeft: położenie nowego slajdu do lewej Ustawienie zmiennej slideLeft: położenie nowego slajdu do prawej Ustawienie zmiennej animateLeft: animacja bieżącego slajdu do prawej Ustawienie zmiennej animateLeft: animacja bieżącego slajdu do lewej Uaktualnienie stylów CSS nowego slajdu, aby umieścić go po prawej lub lewej stronie bieżącego slajdu 8 Animacja bieżącego slajdu do położenia zdefiniowanego w ustawionej wcześniej zmiennej (to odkrywa nowy slajd) 9 Ukrycie slajdu, który właśnie „wyjechał” z widoku 10 Umieszczenie nowego elementu (wartość właściwości left wynosi ) 11 Ponowne umieszczenie nowego elementu (wartość właściwości left wynosi ) 12 Ustawienie $currentIndex numeru indeksu nowego slajdu 526 3$1(/(=$:$572¥&, 1. )XQNFMDmove()WZRU]\DQLPRZDQHSU]HMĂFLH PLÚG]\GZRPDVODMGDPL.LHG\]RVWDQLHZ\ZRïDQDWU]HEDMHMZVND]DÊVODMGGRNWöUHJRPD QDVWÈSLÊSU]HMĂFLH 2. 8WZRU]HQLHGZöFK]PLHQQ\FKSU]H]QDF]RQ\FK GRNRQWURORZDQLDNLHUXQNXSRUXV]DQLDVLÚVODMGX ZOHZROXEZSUDZR 3. :\ZRïDQLHIXQNFMLadvance()DE\Z\]HURZDÊ OLF]QLNF]DVX 4. 6NU\SWVSUDZG]DF]\DNWXDOQLHMHVWRGWZDU]DQD DQLPDFMDVODMGXOXEF]\Xĝ\WNRZQLNZ\EUDïELHĝÈF\VODMG:REXW\FKSU]\SDGNDFKQLH]RVWDQLH SRGMÚWHĝDGQHG]LDïDQLHDVïRZRNOXF]RZHreturn ]DWU]\PDZ\NRQ\ZDQLHSR]RVWDïHMF]ÚĂFLNRGX 5. 2GQLHVLHQLDGRSRV]F]HJöOQ\FKSU]\FLVNöZVÈ SU]HFKRZ\ZDQHZWDEOLF\XWZRU]RQHMZNURNX SU]HGVWDZLRQHJRZF]HĂQLHMVNU\SWX7DEOLFDWDMHVW Xĝ\ZDQDGRZVND]DQLDDNW\ZQHJRSU]\FLVNX 6. -HĝHOLQRZ\HOHPHQWPDZLÚNV]ÈOLF]EÚLQGHNVX QLĝVWDU\WRSU]HMĂFLHVODMGXRGE\ZDVLÚ]SUDZHM GROHZHMVWURQ\:SU]\SDGNXPQLHMV]HMOLF]E\ LQGHNVXSU]HMĂFLHVODMGXRGE\ZDVLÚRGVWURQ\ OHZHMGRSUDZHM:DUWRĂFLZ\PLHQLRQ\FKWXWDM ]PLHQQ\FKVÈQDMSLHUZXVWDZLDQHDQDVWÚSQLH Z\NRU]\VW\ZDQHZNURNX =PLHQQDslideLeftRNUHĂODSRïRĝHQLHQRZHJR VODMGXZ]JOÚGHPVODMGXELHĝÈFHJR :DUWRĂÊ R]QDF]DĝHQRZ\VODMGMHVWSRSUDZHMVWURQLHVODMGXELHĝÈFHJRQDWRPLDVWR]QDF]DSRïRĝHQLH QRZHJRVODMGXSROHZHMVWURQLHELHĝÈFHJR =PLHQQDanimateLeftRNUHĂODNLHUXQHNZNWöU\P SRZLQLHQSRUXV]DÊVLÚQRZ\VODMGSRGF]DV ]DVWÚSRZDQLDVODMGXELHĝÈFHJR :DUWRĂÊ R]QDF]DDQLPDFMÚZOHZÈVWURQÚQDWRPLDVW ĽZSUDZÈVWURQÚ 7. 1RZ\VODMG]RVWDMHXPLHV]F]RQ\SROHZHMOXE SUDZHMVWURQLHVODMGXELHĝÈFHJRZ]DOHĝQRĂFL RGZDUWRĂFL]PLHQQHMslideLeft:ïDĂFLZRĂFL display]RVWDMHSU]\SLVDQDZDUWRĂÊblockDE\ VODMGVWDïVLÚZLGRF]Q\1RZ\VODMGMHVWLGHQW\ğNRZDQ\]DSRPRFÈZDUWRĂFLnewIndexNWöUD]RVWDïD SU]HND]DQDIXQNFML 8. %LHĝÈF\VODMG]RVWDMHSU]HVXQLÚW\ZOHZÈOXE ZSUDZÈVWURQÚQDSRGVWDZLHZDUWRĂFLSU]HFKRZ\ZDQHMZ]PLHQQHManimateLeft7HQVODMG MHVWZ\ELHUDQ\QDSRGVWDZLHZDUWRĂFL]PLHQQHM currentIndexNWöUD]RVWDïD]GHğQLRZDQDQD SRF]ÈWNXVNU\SWX c11/js/slider.js JAVASCRIPT .RQğJXUDFMDVNU\SWXSU]HGVWDZLRQHJRQDSRSU]HGQLHMVWURQLH function move(newIndex) { 3U]HMĂFLH]HVWDUHJRGRQRZHJRVODMGX var animateLeft, slideLeft; =DGHNODURZDQLH]PLHQQ\FK 1 2 advance(); 3 3RGF]DVSU]HMĂFLDVODMGöZQDOHĝ\SRQRZQLH Z\ZRïDÊIXQNFMÚDGYDQFH -HĝHOLZ\ĂZLHWODQ\MHVWELHĝÈF\VODMGOXERGWZDU]DQDMHVWDQLPDFMDVODMGX WRQLHSRGHMPXMHP\ĝDGQ\FKG]LDïDñ */ if ($group.is(’:animated’) || currentIndex === newIndex) { return; } 4 buttonArray[currentIndex].removeClass(’active’); 8VXQLÚFLHNODV\]HOHPHQWX buttonArray[newIndex].addClass(’active’); 'RGDQLHNODV\GRQRZHJR HOHPHQWX 5 6 7 8 9 10 11 12 if (newIndex > currentIndex) { -HĝHOLQRZ\HOHPHQW!ELHĝÈF\ slideLeft = ’100%’; 8PLHV]F]HQLHQRZHJRVODMGXSRSUDZHMVWURQLH animateLeft = ’-100%’; $QLPDFMDELHĝÈFHMJUXS\ZOHZÈVWURQÚ } else { :SU]HFLZQ\PUD]LH slideLeft = ’-100%’; 8PLHV]F]HQLHQRZHJRVODMGXSROHZHMVWURQLH animateLeft = ’100%’; $QLPDFMDELHĝÈFHMJUXS\ZSUDZÈVWURQÚ } 8PLHV]F]HQLHQRZHJRVODMGXSROHZHM MHĂOLPDPQLHMV]ÈZDUWRĂÊLQGHNVX QLĝELHĝÈF\ OXESUDZHM MHĂOLPDWÚZDUWRĂÊZLÚNV]È $slides.eq(newIndex).css( {left: slideLeft, display: ’block’} ); $group.animate( {left: animateLeft} , function() { $QLPDFMDVODMGX $slides.eq(currentIndex).css( {display: ’none’} ); LXNU\FLHSRSU]HGQLHJR $slides.eq(newIndex).css( {left: 0} ); 8VWDZLHQLHSRïRĝHQLDGODQRZHJRVODMGX $group.css( {left: 0} ); 8VWDZLHQLHSRïRĝHQLDJUXS\VODMGöZ currentIndex = newIndex; 8VWDZLHQLH]PLHQQHMFXUUHQW,QGH[ ZDUWRĂFLQRZHJRREUD]X }); } 2EVïXJDVODMGöZ]RVWDïDSRND]DQDZSRSU]HGQLPIUDJPHQFLHNRGX-DYD6FULSW 3R]DNRñF]HQLXDQLPDFMLVODMGXIXQNFMDDQRQLPRZDSU]HSURZDG]DSHZQHRSHUDFMHķVSU]ÈWDMÈFHĵ 9. 6ODMGZVND]\ZDQ\SU]H]currentIndex]RVWDMH XNU\W\ 10. 3RïRĝHQLHOHZHMVWURQ\QRZHJRVODMGX]RVWDMH XVWDORQHMDNR0 Z\UöZQDQLHGROHZHM 11. 3RïRĝHQLHZV]\VWNLFKSR]RVWDï\FKVODMGöZ ]RVWDMHXVWDORQHWDNDE\Z\QRVLïR0 Z\UöZQDQLH GROHZHM 12. 1DW\PHWDSLHVODMGMHVWZLGRF]Q\DSU]HMĂFLH MHVW]DNRñF]RQH1DOHĝ\ZLÚFXDNWXDOQLÊ]PLHQQÈ currentIndexDE\SU]HFKRZ\ZDïDQXPHULQGHNVX ZïDĂQLHZ\ĂZLHWODQHJRVODMGX7R]DGDQLHPRĝQD ïDWZRZ\NRQDÊSU]H]SU]\SLVDQLH]PLHQQHM currentIndexZDUWRĂFL]PLHQQHMnewIndex =ZUöÊXZDJÚĝHRPDZLDQDWXWDMIXQNFMD]RVWDïD ]GHğQLRZDQDMDNSRND]DQRZSRGUR]G]LDOH ķ6NU\SWVODMGöZĵZSXQNFLHķ-DYD6FULSWĵ.RG WZRU]\OLF]QLNF]DVXLSU]HSURZDG]DLWHUDFMÚSU]H] ZV]\VWNLHVODMG\DWDNĝHGRGDMHSU]\FLVNLZUD] ]SURFHGXUDPLREVïXJL]GDU]Hñ NURNLRGGR ZSRGUR]G]LDOHķ6NU\SWVODMGöZĵZSXQNFLH ķ-DYD6FULSWĵ 3$1(/(=$:$572¥&, 527 UTWORZENIE WTYCZKI JQUERY :W\F]NLM4XHU\SR]ZDODMÈQDGRGDZDQLHQRZ\FKPHWRGGRELEOLRWHNLM4XHU\ EH]NRQLHF]QRĂFLPRG\ğNRZDQLDVDPHMELEOLRWHNL 'RZROQÈIXQNFMÚPRĝQD]PLHQLÊZHZW\F]NÚ MHĝHOL SU]HSURZDG]DRQDRSHUDFMHQDGRSDVRZDQ\P ]ELRU]H PRĝH]ZUöFLÊGRSDVRZDQ\]ELöUM4XHU\ :SRUöZQDQLX]H]Z\Nï\PLVNU\SWDPLZW\F]NL M4XHU\FKDUDNWHU\]XMÈVLÚSHZQ\PL]DOHWDPL 7RVDPR]DGDQLHPRĝQDZ\NRQ\ZDÊQDZV]\VWNLFKHOHPHQWDFKGRSDVRZDQ\FK]DSRPRFÈ HODVW\F]QHMVNïDGQLVHOHNWRUöZM4XHU\ *G\ZW\F]ND]DNRñF]\VZRMHG]LDïDQLHQD Z\EUDQ\FKHOHPHQWDFKPRĝQDZ\ZRïDÊNROHMQH PHWRG\ :W\F]NLSR]ZDODMÈQDSRQRZQHXĝ\FLHNRGX ZUDPDFKMHGQHJRSURMHNWXOXEZLHOXUöĝQ\FK :W\F]NLVÈEDUG]RF]ÚVWRXGRVWÚSQLDQHVSRïHF]QRĂFLRP-DYD6FULSWLM4XHU\ .ROL]MLSU]HVWU]HQLQD]Z F]\OLSUREOHPöZ SRMDZLDMÈF\FKVLÚJG\ZGZöFKVNU\SWDFKVÈ Z\NRU]\VW\ZDQHWHVDPHQD]Z\]PLHQQ\FK XQLNDVLÚSU]H]XPLHV]F]HQLHVNU\SWXZIXQNFML W\SX,,)( SDWU]UR]G]LDïSRGUR]G]LDïķ1DW\FKPLDVWZ\NRQ\ZDQDIXQNFMDZ\UDĝHQLDĵ • • • • 3RGVWDZRZDNRQFHSFMDSROHJDQDW\PĝHPRĝHV] SU]HND]DÊ]ELöUHOHPHQWöZPRGHOX'20 ZGRSDVRZDQ\P]ELRU]HM4XHU\ RSHURZDÊQDHOHPHQWDFKPRGHOX'20]D SRPRFÈNRGXZW\F]NLM4XHU\ ]ZUDFDÊRELHNWM4XHU\DE\LQQHIXQNFMHPRJï\ ]QLPSUDFRZDÊ • • • • • • 2VWDWQLSU]\NïDGZW\P UR]G]LDOHSRND]XMHXWZRU]HQLH ZW\F]NLM4XHU\:\NRU]\VWDP\ WXWDMSU]\NïDGSDQHOXDFFRUGLRQ ]DSUH]HQWRZDQ\QDSRF]ÈWNX UR]G]LDïXL]PLHQLP\JRZH ZW\F]NÚ :F]HĂQLHMV]DZHUVMDNRGX E\ïDVWRVRZDQDGODZV]\VWNLFK HOHPHQWöZGRSDVRZDQ\FKQD VWURQLH1DWRPLDVWZW\F]ND EÚG]LHZ\PDJDïDRGXĝ\WNRZQLNöZZ\ZRïDQLDPHWRG\ .accordion()GODHOHPHQWöZ Z\EUDQ\FKSU]H]M4XHU\ :RPDZLDQ\PSU]\NïDG]LH M4XHU\Z\ELHUDHOHPHQW\ SRVLDGDMÈFHNODVÚmenu 3R]DNRñF]HQLXG]LDïDQLD PHWRG\.accordion()QDVWÈSL Z\ZRïDQLHPHWRG\.fadeIn() ĳPHQXĳ DFFRUGLRQ IDGH,Q 1 1. :M4XHU\Z\ELHUDQHVÈ ZV]\VWNLHHOHPHQW\]DZLHUDMÈFH NODVÚmenu 528 3$1(/(=$:$572¥&, 2 2. 'ODZ\EUDQ\FKHOHPHQWöZ QDVWÚSXMHZ\ZRïDQLHPHWRG\ .accordion():\PLHQLRQD PHWRGDSRELHUDW\ONRMHGHQ SDUDPHWUZVND]XMÈF\V]\ENRĂÊ DQLPDFML Z\UDĝRQÈZPLOLVHNXQGDFK 3 3. 3R]DNRñF]HQLXG]LDïDQLD .accordion()PHWRGD .fadeIn()EÚG]LHZ\NRQDQDGOD W\FKVDP\FKHOHPHQWöZ PODSTAWOWA STRUKTURA WTYCZKI 1. DODANIE METODY DO JQUERY M4XHU\PDRELHNWRQD]ZLH.fn NWöU\SRPDJDZUR]V]HU]HQLX IXQNFMRQDOQRĂFLELEOLRWHNL :W\F]NLVÈWZRU]RQHMDNR PHWRG\GRGDZDQHQDVWÚSQLH GRRELHNWX.fn 3DUDPHWU\NWöUHPRJÈ E\ÊSU]HND]DQHIXQNFMLVÈ XPLHV]F]DQHZHZQÈWU]QDZLDVX ZSLHUZV]\PZLHUV]X $.fn.accordion = function(speed) { 7RMHVWPLHMVFHQDNRGZW\F]NL } 2. ZWROT ZBIORU JQUERY, CO POZWALA NA ŁĄCZENIE METOD %LEOLRWHNDM4XHU\G]LDïDSU]H] ]HEUDQLHHOHPHQWöZLSU]HFKRZ\ZDQLHLFKZRELHNFLH RQD]ZLHjQuery0HWRG\WHJR RELHNWXPRJÈE\ÊZ\NRU]\VW\ZDQHGRPRG\ğNDFMLZ\EUDQ\FK HOHPHQWöZ 3RQLHZDĝM4XHU\SR]ZDODQD ïÈF]HQLHZLHOXPHWRGLZ\NRQ\ZDQLHLFKGODZ\EUDQ\FK HOHPHQWöZWRJG\ZW\F]ND ]DNRñF]\G]LDïDQLHSRZLQQD SU]HND]DÊZ\EUDQHHOHPHQW\ NROHMQHMPHWRG]LH =ZURWHOHPHQWöZPRĝHQDVWÈSLÊ ]DSRPRFÈ 1. VïRZDNOXF]RZHJRreturn SU]HND]DQLHZDUWRĂFL]IXQNFML 2. VïRZDNOXF]RZHJRthis RGQLHVLHQLHGRSU]HND]DQ\FK HOHPHQWöZ $.fn.accordion = function(speed) { 7RMHVWPLHMVFHQDNRGZW\F]NL return this; } 3. OCHRONA PRZESTRZENI NAZW M4XHU\WRQLHMHG\QDELEOLRWHND -DYD6FULSWXĝ\ZDMÈFD]QDNX $MDNRVNUöWX'ODWHJRWHĝNRG ZW\F]NL]QDMGXMHVLÚZHZQÈWU] IXQNFMLW\SX,,)(NWöUD WZRU]\GODNRGXZW\F]NL]DNUHV R]DVLÚJXIXQNFML :SLHUZV]\PZLHUV]XSRQLĝV]HJRIUDJPHQWXNRGX,,)(PD W\ONRMHGHQQD]ZDQ\SDUDPHWU $:RVWDWQLPZLHUV]XPRĝQD ]REDF]\ÊĝHHOHPHQW\Z\EUDQH w jQueryVÈSU]HND]\ZDQHWHM IXQNFML :HZQÈWU]ZW\F]NL]QDN$G]LDïD ZFKDUDNWHU]HQD]Z\]PLHQQHM 2GQRVLVLÚGRRELHNWXjQuery ]DZLHUDMÈFHJR]ELöUHOHPHQWöZ ]NWöU\PLPDG]LDïDÊZW\F]ND (function($){ $.fn.accordion = function(speed) { 7RMHVWPLHMVFHQDNRGZW\F]NL } })(jQuery); -HĝHOLWU]HEDSU]HND]DÊZLÚFHM ZDUWRĂFL]UHJXï\RGE\ZDVLÚ WR]DSRPRFÈSRMHG\QF]HJR SDUDPHWUXRQD]ZLHoptions 3RGF]DVZ\ZRï\ZDQLDIXQNFML SDUDPHWUoptions]DZLHUD OLWHUDïRELHNWX 2ELHNWPRĝHVNïDGDÊVLÚ]SDU NOXF]ZDUWRĂÊGODUöĝQ\FKRSFML 3$1(/(=$:$572¥&, 529 WTYCZKA ACCORDION 1 10 IIFE: Przekazanie elementów wybranych w jQuery ($) FUNKCJA: accordion() Utworzona w obiekcie fn 2 Zdarzenie: click w karcie 3 FUNKCJA ANONIMOWA: Pokazuje lub ukrywa odpowiedni panel 4 Uniemożliwienie domyślnej akcji przycisku 5 Pobranie przycisku klikniętego przez użytkownika 6 Pobranie odpowiedniego panelu 7 N Czy panel jest animowany? T 8 N Czy panel jest widoczny? T Pokaż panel 9 Ukryj panel Zwrot obiektu jQuery :FHOX]DVWRVRZDQLDZW\F]NLQDOHĝ\Z\EUDÊHOHPHQW\ZM4XHU\]DZLHUDMÈFHHOHPHQW\<ul>NWöUH WZRU]ÈSDQHODFFRUGLRQ:SU]\NïDG]LHSU]HGVWDZLRQ\PQDVWURQLHSRSUDZHMSDQHODFFRUGLRQ WRHOHPHQW<ul>SRVLDGDMÈF\NODVÚmenu FKRÊ PRĝQDXĝ\ÊWXWDMGRZROQHMQD]Z\ 1DVWÚSQLHQD Z\EUDQ\FKHOHPHQWDFKWU]HEDZ\ZRïDÊPHWRGÚ .accordion()QDSU]\NïDGZQDVWÚSXMÈF\VSRVöE ĳPHQXĳ DFFRUGLRQ 7HQNRGPRĝHE\ÊXPLHV]F]RQ\ZGRNXPHQFLH +70/ MDNSRND]DQRQDVWURQLHSRSUDZHM DOH ]QDF]QLHOHSV]\PUR]ZLÈ]DQLHPEÚG]LHXĝ\FLH RGG]LHOQHJRSOLNX-DYD6FULSWSU]HWZDU]DQHJR SRGF]DVZF]\W\ZDQLDVWURQ\ FRSR]ZDODQD RGG]LHOHQLHNRGX-DYD6FULSWRG+70/ 530 3$1(/(=$:$572¥&, 3HïQ\NRGZW\F]NLSU]HGVWDZLRQRQDVWURQLHSR SUDZHM)UDJPHQW\ZNRORU]HSRPDUDñF]RZ\P VÈLGHQW\F]QH]HVNU\SWHPNWöU\]QDMG]LHV]QD SRF]ÈWNXUR]G]LDïX 1. :W\F]ND]RVWDïDRSDNRZDQDIXQNFMÈW\SX,,)( DE\W\PVDP\PXWZRU]\Ê]DNUHVQDSR]LRPLH IXQNFML:ZLHUV]XSLHUZV]\PIXQNFMDRWU]\PXMH W\ONRMHGHQQD]ZDQ\SDUDPHWU$ NWöU\R]QDF]D PRĝOLZRĂÊXĝ\FLDZIXQNFMLVNUöWX$GODM4XHU\ 10. :RVWDWQLPZLHUV]XNRGXRELHNWM4XHU\MHVW SU]HND]\ZDQ\IXQNFML ]DSRPRFÈSHïQHMQD]Z\ jQuery]DPLDVWMHMVNUöWX$ 2ELHNWWHQ]DZLHUD Z\EUDQHHOHPHQW\QDNWöU\FKEÚG]LHG]LDïDïD ZW\F]ND:RPDZLDQ\PSU]\NïDG]LHSXQNW\ LR]QDF]DMÈĝH$RGZRïXMHVLÚGRRELHNWX jQueryLQLHZ\VWÚSXMHWXWDMĝDGHQNRQĠLNWMHĂOL LQQHVNU\SW\UöZQLHĝXĝ\ZDMÈVNUöWX$ 2.:HZQÈWU]IXQNFMLW\SX,,)(QDVWÚSXMH XWZRU]HQLHQRZHMPHWRG\.accordion()SU]H] UR]V]HU]HQLHRELHNWXfn3RELHUDQ\MHVWW\ONRMHGHQ SDUDPHWUspeed 3.6ïRZRNOXF]RZHthisRGZRïXMHVLÚGRHOHPHQWöZZ\EUDQ\FKZM4XHU\LSU]HND]DQ\FKZW\F]FH %ÚG]LHZ\NRU]\VW\ZDQHGRXWZRU]HQLDSURFHGXU\ REVïXJL]GDU]HñQDVïXFKXMÈFHMF]\Xĝ\WNRZQLN NOLNQÈïHOHPHQWNWöUHJRDWU\EXWclassPDZDUWRĂÊ accordion-control.LHG\Xĝ\WNRZQLNNOLNQLH WDNLHOHPHQWIXQNFMDDQRQLPRZDUR]SRF]\QD DQLPDFMÚRGSRZLHGQLHJRSDQHOXSRMDZLDMÈFHJRVLÚ ZZLGRNXOXE]QLNDMÈFHJR]QLHJR 4.8QLHPRĝOLZLHQLHGRP\ĂOQHMDNFMLïÈF]D 5.:IXQNFMLDQRQLPRZHM$(this)RGZRïXMHVLÚGR RELHNWXM4XHU\NOLNQLÚWHJRSU]H]Xĝ\WNRZQLND 6., 7., 8. -HG\QDUöĝQLFDPLÚG]\WÈIXQNFMÈ DQRQLPRZÈLZ\NRU]\VWDQÈZSU]\NïDG]LHQD SRF]ÈWNXUR]G]LDïXSROHJDQDW\PĝHPHWRGD .slideToggle()SRELHUDSDUDPHWUspeedZVND]XMÈF\V]\ENRĂÊ]MDNÈPDVLÚSRMDZLDÊOXE]QLNDÊ SDQHO :\PLHQLRQ\SDUDPHWUMHVWSRGDZDQ\ ZWUDNFLHZ\ZRïDQLDPHWRG\.accordion() 9..LHG\IXQNFMDDQRQLPRZD]DNRñF]\G]LDïDQLH RELHNWjQuery]DZLHUDMÈF\Z\EUDQHHOHPHQW\ ]RVWDQLH]ZUöFRQ\SU]H]IXQNFMÚ7HQVDP]ELöU HOHPHQWöZPRĝQDZLÚFSU]HND]DÊLQQHMPHWRG]LH M4XHU\ c11/js/accordion-plugin.js JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 (function($){ $.fn.accordion = function(speed) { this.on(’click’, ’.accordion-control’, e.preventDefault(); $(this) .next(’.accordion-panel’) .not(’:animated’) .slideToggle(speed); }); return this; } })(jQuery); =ZUöÊXZDJÚĝHQD]ZDSOLNX ZW\F]NLM4XHU\UR]SRF]\QDVLÚ RGFLÈJXWHNVWRZHJRjquery. ZFHOXZVND]DQLDĝHVNU\SW RSLHUDVLÚQDELEOLRWHFHM4XHU\ HTML 8ĝ\FLHMDNRQD]Z\]PLHQQHM =ZURWHOHPHQWöZZ\EUDQ\FKZM4XHU\ function(e){ =ZURWHOHPHQWöZZ\EUDQ\FKZM4XHU\ 3U]HND]DQLHZRELHNFLHM4XHU\ 3RGRïÈF]HQLXVNU\SWXZW\F]NL DFFRUGLRQPHWRGDaccordion() PRĝHE\ÊZ\NRU]\VW\ZDQD ZGRZROQ\PGRSDVRZDQ\P ]ELRU]HM4XHU\ 3RQLĝHMSU]HGVWDZLRQRNRG +70/GODRPDZLDQHMZW\F]NL 7\PUD]HPNRG]DZLHUDVNU\SW M4XHU\LZW\F]NL c11/accordion-plugin.html <ul class=”menu”> <li> <a href=”#” class=”accordion-control”><h3>Klasyka</h3></a> <div class=”accordion-panel”>-HĝHOLOXELV]WUDG\F\MQHNZLDW\</div> </li> <li> <a href=”#” class=”accordion-control”><h3>Seria kwiaty</h3></a> <div class=”accordion-panel”>-HĝHOLPDV]QLHFRïDJRGQLHMV]HSRGQLHELHQLH</ div> </li> <li> <a href=”#” class=’accordion-control”><h3>0RU]H</h3></a> <div class=”accordion-panel”>$KRM-HĝHOLWÚVNQLV]]DVPDNLHP</div> </li> </ul> <script src=”js/jquery.js”></script> <script src=”js/jquery.accordion.js”></script> <script> ĳPHQXĳ DFFRUGLRQ </script> 3$1(/(=$:$572¥&, 531 PODSUMOWANIE PANELE ZAWARTOŚCI f 3DQHOH]DZDUWRĂFLRIHUXMÈPRĝOLZRĂÊZ\ĂZLHWOHQLDZLÚNV]HM LORĂFLWUHĂFLQDRJUDQLF]RQ\PREV]DU]H f 3RSXODUQHURG]DMHSDQHOL]DZDUWRĂFLWRSDQHODFFRUGLRQNDUW\ SU]HJOÈGDUNL]GMÚÊRNQDPRGDOQHLVODMG\ f 3RGREQLHMDNZSU]\SDGNXNDĝGHJRNRGXZLWU\Q\LQWHUQHWRZHM ]DOHFDVLÚXPLHV]F]DQLHZRGG]LHOQ\FKSOLNDFK]DZDUWRĂFL +70/ ZDUVWZ\SUH]HQWDF\MQHM &66 L]DFKRZDQLD -DYD6FULSW f 0RĝQDWZRU]\ÊRELHNW\SU]HGVWDZLDMÈFHGRZROQÈ IXQNFMRQDOQRĂÊ MDNZSU]\SDGNXRNQDPRGDOQHJR f ,VWQLHMHPRĝOLZRĂÊ]DPLDQ\IXQNFMLQDZW\F]NLM4XHU\ FRSR]ZDODQDSRQRZQHXĝ\FLHNRGXLG]LHOHQLHVLÚQLP ]LQQ\PL f )XQNFMHW\SX,,)(VÈZ\NRU]\VW\ZDQHZFHOXSRELHUDQLD ]DNUHVXLXQLNDQLDNRQĠLNWöZQD]Z 532 3$1(/(=$:$572¥&, 12 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 'RVWÚSQHVÈWU]\WHFKQLNLNWöUHPRJÈSRPöFXĝ\WNRZ QLNRPZZ\V]XNLZDQLXĝÈGDQHMSU]H]QLFK]DZDUWRĂFL JG\QDVWURQLH]QDMGXMHVLÚGXĝDLORĂÊGDQ\FK FILTROWANIE WYSZUKIWANIE SORTOWANIE )LOWURZDQLHSR]ZDODQD ]PQLHMV]HQLH]ELRUXGDQ\FK SU]H]Z\EöUW\FKZDUWRĂFL NWöUHVSHïQLDMÈ]GHğQLRZDQH NU\WHULD :\V]XNLZDQLHSR]ZDODQD Z\ĂZLHWOHQLHHOHPHQWöZGR SDVRZDQ\FKGRFRQDMPQLHM MHGQHJRVïRZDSRGDQHJR SU]H]Xĝ\WNRZQLND 6RUWRZDQLHSR]ZDODQD ]PLDQÚNROHMQRĂFLHOHPHQWöZ QDVWURQLHZRSDUFLXRSHZ QHNU\WHULD QDSU]\NïDG XïRĝHQLHLFKZNROHMQRĂFL DOIDEHW\F]QHM =DQLP]REDF]\V]MDNZ\NRU]\VW\ZDÊğOWURZDQLHZ\V]XNLZDQLHLVRUWRZDQLHSRZLQLHQHĂSR]QDÊ VSRVRE\SU]HFKRZ\ZDQLDGDQ\FK]NWöU\PLSUDFXMHV]QDVWURQLH:W\PUR]G]LDOHZZLHOX SU]\NïDGDFKEÚG]LHSRND]DQHXĝ\FLHWDEOLFGRSU]HFKRZ\ZDQLDGDQ\FKZRELHNWDFK]Z\NRU]\ VWDQLHPQRWDFMLOLWHUDïX 534 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 535 METODY JAVASCRIPT SŁUŻĄCE DO PRACY Z TABLICAMI 7DEOLFDMHVWURG]DMHPRELHNWX:V]\VWNLHWDEOLFHPDMÈZ\PLHQLRQHSRQLĝHM PHWRG\LFKQD]Z\ZïDĂFLZRĂFLVÈQXPHUDPLLQGHNVX=D]Z\F]DMEÚG]LHV]VLÚ VSRW\NDï]Xĝ\FLHPWDEOLFGRSU]HFKRZ\ZDQLDVNRPSOLNRZDQ\FKHOHPHQWöZ ZW\PWDNĝHLQQ\FKRELHNWöZ .DĝG\VNïDGQLNWDEOLF\MHVWF]ÚVWRQD]\ZDQ\elementem1LHPD]QDF]HQLDWRF]\WDEOLFDSU]HFKRZXMH HOHPHQW\+70/HOHPHQWWRSRSURVWXQD]ZDQDGDZDQDIUDJPHQWRZLLQIRUPDFMLZWDEOLF\*ZLD]GNÈ R]QDF]RQRPHWRG\NWöUHG]LDïDMÈMHG\QLHZ,( DODAWANIE ELEMENTÓW USUWANIE ELEMENTÓW push() :VWDZLDHOHPHQW HOHPHQW\ QDNRñFXWDEOLF\L]ZUDFDOLF]EÚ HOHPHQWöZZWDEOLF\ unshift() :VWDZLDHOHPHQW HOHPHQW\ QDSRF]ÈWNXWDEOLF\L]ZUDFDQRZÈ ZLHONRĂÊWDEOLF\ pop() 8VXZDRVWDWQLHOHPHQW]WDEOLF\ L]ZUDFDWHQHOHPHQW shift() 8VXZDSLHUZV]\HOHPHQW]WDEOLF\ L]ZUDFDWHQHOHPHQW forEach() -HGQRNURWQLHZ\NRQXMHIXQNFMÚGODNDĝGHJRHOHPHQWXZWDEOLF\ some() 6SUDZG]DF]\MDNLHNROZLHNHOHPHQW\WDEOLF\SU]HFKRG]ÈWHVW ZVND]DQ\SU]H]IXQNFMÚ every() 6SUDZG]DF]\ZV]\VWNLHHOHPHQW\WDEOLF\SU]HFKRG]ÈWHVW ZVND]DQ\SU]H]IXQNFMÚ concat() 7ZRU]\QRZÈWDEOLFÚZNWöUHM]RVWDQÈXPLHV]F]RQH]DZDUWRĂÊ WDEOLF\ELHĝÈFHMRUD]LQQHWDEOLFHOXEZDUWRĂFL ğOWHU 7ZRU]\QRZÈWDEOLFÚZUD]]HOHPHQWDPLNWöUHSU]HFKRG]ÈWHVW ZVND]DQ\SU]H]IXQNFMÚ sort() =PLHQLDNROHMQRĂÊHOHPHQWöZZWDEOLF\]DSRPRFÈIXQNFML QD]\ZDQHMIXQNFMÈSRUöZQDQLD reverse() 2GZUDFDNROHMQRĂÊHOHPHQWöZZWDEOLF\ map() :\ZRïXMHIXQNFMÚGODNDĝGHJRHOHPHQWXZWDEOLF\LWZRU]\QRZÈ WDEOLFÚZUD]]Z\QLNDPLWHMRSHUDFML ITERACJA ŁĄCZENIE FILTROWANIE ZMIANA KOLEJNOŚCI MODYFIKACJA 536 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE METODY JQUERY PRZEZNACZONE DO FILTROWANIA I SORTOWANIA .ROHNFMHM4XHU\WRRELHNW\SU]\SRPLQDMÈFHWDEOLFÚLSU]HGVWDZLDMÈFHHOHPHQW\ PRGHOX'20:]DNUHVLHPRG\ğNDFMLHOHPHQWöZRIHUXMÈPHWRG\SRGREQH GRGRVWÚSQ\FKGODWDEOLF1DZ\EUDQ\FKHOHPHQWDFKPRĝQDZ\NRQ\ZDÊ WDNĝHLQQHPHWRG\M4XHU\ 3R]DZ\PLHQLRQ\PLSRQLĝHMPHWRGDPLM4XHU\PRĝHV]VSRWNDÊVLÚ]HVWRVRZDQLHPPHWRGDQLPDFML SRPHWRGDFKğOWURZDQLDLVRUWRZDQLDFRSRZRGXMHXWZRU]HQLHDQLPRZDQ\FKSU]HMĂÊJG\Xĝ\WNRZQLN GRNRQXMHZ\ERUX DODAWANIE LUB ŁĄCZENIE ELEMENTÓW .add() 'RGDQLHHOHPHQWöZGR]ELRUXGRSDVRZDQ\FKHOHPHQWöZ USUWANIE ELEMENTÓW .not() 8VXQLÚFLHHOHPHQWöZ]H]ELRUXGRSDVRZDQ\FKHOHPHQWöZ .each() 8ĝ\FLHWHMVDPHMIXQNFMLGODNDĝGHJRHOHPHQWXZ]ELRU]H GRSDVRZDQ\FKHOHPHQWöZ ğOWHU =PQLHMV]HQLHOLF]E\HOHPHQWöZZGRSDVRZDQ\P]ELRU]HGRMHG\ QLHW\FKNWöUH]RVWDï\GRSDVRZDQHGRVHOHNWRUDOXESU]HFKRG]È WHVWZVND]DQ\ZIXQNFML .toArray() .RQZHUVMDNROHNFMLM4XHU\QDWDEOLFÚHOHPHQWöZPRGHOX'20 FRSR]ZDODQDXĝ\FLHPHWRGWDEOLF\Z\PLHQLRQ\FKQDVWURQLH SROHZHM ITERACJA FILTROWANIE KONWERSJA FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 537 OBSŁUGA STARSZYCH PRZEGLĄDAREK INTERNETOWYCH 6WDUV]HSU]HJOÈGDUNLQLHREVïXJXMÈQDMQRZV]\FKPHWRGRELHNWXArray -HGQDNVNU\SWRQD]ZLH(&0$6FULSW6KLPXPRĝOLZLDUHSURGXNRZDQLH W\FKPHWRG(&0$6FULSWWRVWDQGDUGQDSRGVWDZLHNWöUHJRRSDUW\ MHVWQRZRF]HVQ\-DYD6FULSW KRÓTKA HISTORIA JAVASCRIPT VW\F]Hñ luty marzec . . 1HWVFDSH1DYLJDWRU]DZLHUDSLHUZV]È (&0$6FULSWWRRğFMDOQDQD]ZDXVWDQGDU\]RZDQHM ZHUVMLMÚ]\ND-DYD6FULSWFKRÊ]D]Z\F]DMQDGDO Xĝ\ZDVLÚQD]Z\JavaScriptRLOHQLHSRUXV]DVLÚ NZHVWLLQRZ\FKIXQNFML ZHUVMÚMÚ]\ND-DYD6FULSWRSUDFRZDQÈ SU]H]%UHQGDQD(LFKD NZLHFLHñ maj czerwiec lipiec VLHUSLHñ 0LFURVRIWWZRU]\]JRGQ\]-DYD6FULSW MÚ]\NVNU\SWRZ\RQD]ZLH-6FULSW ZU]HVLHñ SDěG]LHUQLN OLVWRSDG 1HWVFDSHSU]HND]XMH-DYD6FULSW RUJDQL]DFML(&0$DE\MHJRGDOV]\UR]ZöM PöJï]RVWDÊXVWDQGDU\]RZDQ\ JUXG]LHñ VW\F]Hñ luty marzec NZLHFLHñ maj czerwiec ... :\GDQLH(&0$6FULSW lipiec VLHUSLHñ ZU]HVLHñ SDěG]LHUQLN OLVWRSDG JUXG]LHñ maj . .. (&0$,QWHUQDWLRQDOWRRUJDQL]DFMDRGSRZLHG]LDOQD ]DUR]ZöMMÚ]\ND-DYD6FULSWSRGREQLHMDN :&RGSRZLDGD]D+70/L&663URGXFHQFL SU]HJOÈGDUHNLQWHUQHWRZ\FKF]ÚVWRGRGDMÈIXQNFMH Z\NUDF]DMÈFHSR]DVSHF\ğNDFMÚ(&0$ SRGREQLH MDNPDWRPLHMVFH]+70/L&66 2EVïXJDQDMQRZV]\FKIXQNFML(&0$6FULSWĽ SRGREQLHMDNQDMQRZV]HIXQNFMHVSHF\ğNDFML +70/L&66ĽGRVWÚSQDMHVWW\ONRZQDMQRZV]\FK ZHUVMDFKSU]HJOÈGDUHN1LHPDWRMHGQDNĝDGQHJR ZSï\ZXQDZLHG]ÚNWöUÈF]HUSLHV]]WHMNVLÈĝNL M4XHU\SRPDJDZUR]ZLÈ]\ZDQLXSUREOHPöZ ]ZLÈ]DQ\FK]UöĝQLFDPLPLÚG]\SU]HJOÈGDUNDPL :DUWRRW\PZVSRPQLHÊSRGNÈWHPWHFKQLN ]DSUH]HQWRZDQ\FKZUR]G]LDOH :\PLHQLRQHPHWRG\RELHNWXArray]RVWDï\ ZSURZDG]RQHZ(&0$6FULSWLQLHVÈREVïX JLZDQHSU]H]SU]HJOÈGDUNÚ,QWHUQHW([SORUHU OXEZF]HĂQLHMV]HZHUVMH forEach(), some(), every(), ğOWHU Lmap() :FKZLOLSRZVWDZDQLDNVLÈĝNLSU]\JRWR ZDQLDGRZ\GDQLD(&0$6FULSW 538 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE $E\PHWRG\WHG]LDïDï\ZVWDUV]\FKSU]HJOÈGDU NDFKGRVWURQ\SRZLQLHQHĂGRïÈF]\Ê(&0$6FULSW 6KLPNWöU\ZW\FKSU]HJOÈGDUNDFKUHSURGXNXMH IXQNFMRQDOQRĂÊW\FKPHWRGhttps://github.com/ es-shims/es5-shim 3U]HGVWDZLHQLH VNRPSOLNRZDQHMVWUXNWXU\ GDQ\FKPRĝHZ\PDJDÊ Xĝ\FLDZLHOXRELHNWöZ *UXS\RELHNWöZPRĝQD SU]HFKRZ\ZDÊZWDEOLFDFK OXEMDNRZïDĂFLZRĂFLLQQ\FK RELHNWöZ3RGF]DVZ\ERUX SRGHMĂFLDQDOHĝ\Z]LÈÊSRG XZDJÚVSRVöEXĝ\FLDGDQ\FK TABLICE I OBIEKTY — WYBÓR NAJLEPSZEJ STRUKTURY DANYCH OBIEKTY W TABLICY OBIEKTY JAKO WŁAŚCIWOŚCI .LHG\NROHMQRĂÊRELHNWöZMHVWZDĝQDWRSRZLQQ\ E\ÊSU]HFKRZ\ZDQHZWDEOLF\SRQLHZDĝNDĝG\ HOHPHQWWDEOLF\PDSU]\SLVDQ\QXPHULQGHNVX 3DU\NOXF]ZDUWRĂÊZRELHNWDFKQLHVÈXïRĝRQH ZNROHMQRĂFL :DUWR]ZUöFLÊXZDJÚQDWRĝH QXPHULQGHNVXPRĝHVLÚ]PLHQLÊSRGRGDQLX OXEXVXQLÚFLXRELHNWöZ7DEOLFHRIHUXMÈWDNĝH ZïDĂFLZRĂFLLPHWRG\SRPDJDMÈFHZWUDNFLHSUDF\ ]VHNZHQFMÈHOHPHQWöZ PHWRGDsort()]PLHQLDNROHMQRĂÊHOHPHQWöZ ZWDEOLF\ ZïDĂFLZRĂÊOHQJWKSRGDMHOLF]EÚHOHPHQWöZ ZWDEOLF\ .LHG\FKFHV]X]\VNDÊGRVWÚSGRRELHNWöZ]D SRPRFÈLFKQD]ZQD]Z\VSUDZG]DMÈVLÚGRVNR QDOHMDNRZïDĂFLZRĂFLLQQHJRRELHNWX SRQLHZDĝ QLHWU]HEDEÚG]LHSU]HSURZDG]DÊLWHUDFMLSU]H] ZV]\VWNLHRELHNW\ZFHOX]QDOH]LHQLDZïDĂFLZHJR MDNPDWRPLHMVFHZSU]\SDGNXWDEOLF\ • • YDUSHRSOH > ^QDPHĳ&]HVïDZĳUDWHDFWLYHWUXH` ^QDPHĳ&HOLQDĳUDWHDFWLYHWUXH` ^QDPHĳ*U]HJRU]ĳUDWHDFWLYHIDOVH` ^QDPHĳ1LNRGHPĳUDWHDFWLYHWUXH` ] $E\SREUDÊGDQH]WDEOLF\RELHNWöZPRĝQDXĝ\Ê QXPHUXLQGHNVXGDQHJRRELHNWX 3REUDQLHLPLHQLDLVWDZNLXĝ\WNRZQLND // Celina. SHUVRQ>@QDPH SHUVRQ>@UDWH $E\GRGDÊOXEXVXQÈÊRELHNW\]WDEOLF\QDOHĝ\ Z\NRU]\VWDÊPHWRG\WDEOLF\ ,WHUDFMDSU]H]HOHPHQW\ZWDEOLF\MHVWPRĝOLZD ]]DVWRVRZDQLHPPHWRG\forEach() 1DOHĝ\SDPLÚWDÊR]DSHZQLHQLXXQLNDOQRĂFLQD]Z ZV]\VWNLFKZïDĂFLZRĂFL1DSU]\NïDGQLHPRJÈ LVWQLHÊGZLHZïDĂFLZRĂFLRQD]ZLH&]HVïDZOXE &HOLQDZW\PVDP\PRELHNFLHXWZRU]RQ\P]D SRPRFÈSRQLĝV]HJRIUDJPHQWXNRGX YDUSHRSOH ^ &]HVïDZ ÛDWHDFWLYHWUXH` &HOLQD ÛDWHDFWLYHWUXH` *U]HJRU] ÛDWHDFWLYHIDOVH` 1LNRGHP ÛDWHDFWLYHWUXH` ` $E\SREUDÊGDQH]RELHNWXSU]HFKRZ\ZDQHJRMDNR ZïDĂFLZRĂÊLQQHJRRELHNWXPRĝQDXĝ\ÊQD]Z\ RELHNWX 3REUDQLHVWDZNLXĝ\WNRZQLND&]HVïDZ SHRSOH&]HVïDZUDWH $E\GRGDÊOXEXVXQÈÊRELHNW\ZRELHNFLHPRĝQD Z\NRU]\VWDÊVïRZRNOXF]RZHGHOHWHOXESU]\SLVDÊ RELHNWRZLSXVW\FLÈJWHNVWRZ\ ,WHUDFMDSU]H]RELHNW\SRWRPQHMHVWPRĝOLZD ]]DVWRVRZDQLHPVNïDGQLRELHNWNOXF]H FILTROWANIE, WYSZUKIWANIE I SORTOWANIE FILTROWANIE )LOWURZDQLHSR]ZDODQD]PQLHMV]HQLH]ELRUXZDUWRĂFL0RĝHV]ZLÚFXWZRU]\Ê SRG]ELöUGDQ\FKVSHïQLDMÈF\FK]GHğQLRZDQHNU\WHULD $QDOL]ÚğOWURZDQLDUR]SRF]QLHP\RGGDQ\FK GRW\F]ÈF\FKIUHHODQFHUöZLLFKVWDZHN.DĝGD RVREDMHVWSU]HGVWDZLDQDSU]H]OLWHUDïRELHNWX ZQDZLDVLHNODPURZ\P *UXSDRELHNWöZMHVW SU]HFKRZ\ZDQDZWDEOLF\ YDUSHRSOH > { QDPHĳ&]HVïDZĳ UDWH ` { QDPHĳ&HOLQDĳ UDWH ` { QDPHĳ*U]HJRU]ĳ UDWH ` { QDPHĳ1LNRGHPĳ UDWH ` @ FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 3U]HGZ\ĂZLHWOHQLHPGDQHEÚGÈğOWURZDQH:W\P FHOXSU]HSURZDG]DP\LWHUDFMÚSU]H]RELHNW\ SU]HGVWDZLDMÈFHSRV]F]HJöOQHRVRE\-HĝHOLVWDZND MHVWZ\ĝV]DQLĝ]ïDOHMHGQRF]HĂQLHQLĝV]DQLĝ ]ïWRGDQDRVREDEÚG]LHXPLHV]F]RQDZQRZHM WDEOLF\RQD]ZLHUHVXOWV Iteracja przez wszystkie osoby Czy UDWH! ? N N Czy UDWH ? T T Dodaj person do tablicy UHVXOWV Przejdź do kolejnej osoby WYŚWIETLENIE TABLICY 1DNROHMQ\FKGZöFKVWURQDFK]REDF]\V]GZD RGPLHQQHSRGHMĂFLDZ]DNUHVLHğOWURZDQLDGDQ\FK ZWDEOLF\SHRSOH:REXZ\NRU]\VW\ZDQHVÈ PHWRG\RELHNWXArray.forEach()LğOWHU 2ELHPHWRG\]RVWDQÈXĝ\WHZFHOXSU]HSURZDG]H QLDLWHUDFMLSU]H]GDQHWDEOLF\SHRSOHLZ\V]XNDQLD W\FKRVöENWöU\FKVWDZNDZ\QRVLRG]ïGR ]ï]DJRG]LQÚSUDF\1DVWÚSQLHZ\V]XNDQH RVRE\EÚGÈXPLHV]F]RQHZQRZHMWDEOLF\RQD]ZLH UHVXOWV 3RXWZRU]HQLXQRZHMWDEOLF\UHVXOWVSÚWODfor SU]HSURZDG]DLWHUDFMÚSU]H]QLÈLXPLHV]F]DGDQH RVöEZWDEHOL+70/ Z\QLNSRND]DQRQDVWURQLH SROHZHM JAVASCRIPT 1 2 3 4 5 6 3RQLĝHM]QDMGXMHVLÚNRGRGSRZLHG]LDOQ\]D Z\ĂZLHWOHQLHGDQ\FKRVöENWöU\FKRELHNW\]RVWDï\ XPLHV]F]RQHZWDEOLF\UHVXOWV 1. 3U]\NïDG]RVWDQLHZ\NRQDQ\JG\PRGHO'20 EÚG]LHJRWRZ\GRSUDF\ 2. 'DQHGRW\F]ÈFHRVöELLFKVWDZHNVÈXPLHV] F]DQHQDVWURQLHLQWHUQHWRZHM GDQHSRND]DQRQD VWURQLHSROHZHM 3. )XQNFMDğOWUXMHGDQHZWDEOLF\SHRSOHRUD] WZRU]\QRZÈWDEOLFÚRQD]ZLHUHVXOWV QDVWÚSQD VWURQD 4. 8WZRU]HQLHHOHPHQWX<tbody> 5. 3ÚWODforSU]HSURZDG]DLWHUDFMÚSU]H]WDEOLFÚ LXĝ\ZDM4XHU\GRXWZRU]HQLDQRZHJRZLHUV]D WDEHOLGODNDĝGHMRVRE\LSRELHUDQHMSU]H]QLÈ VWDZNL]DJRG]LQÚSUDF\ 6. 1RZD]DZDUWRĂÊ]RVWDMHXPLHV]F]RQDQD VWURQLHSRQDJïöZNXWDEHOL FMVğOWHUIRUHDFKMVFMVğOWHUğOWHUMV $(function() { 0LHMVFHQDGDQHGRW\F]ÈFHRVöE SRND]DQHQDVWURQLHSROHZHM 0LHMVFHQDNRGSU]HSURZDG]DMÈF\ğOWURZDQLHWZRU]\QRZÈWDEOLFÚ RQD]ZLHUHVXOWV ,WHUDFMDSU]H]QRZÈWDEOLFÚGRSDVRZDQHRVRE\VÈXPLHV]F]DQHZWDEHOL Z\ĂZLHWODQHMQDVWURQLH YDUWDEOH%RG\ ĳWERG\!WERG\!ĳ 1RZD]DZDUWRĂÊM4XHU\ IRU YDUL LUHVXOWVOHQJWKL ^ ,WHUDFMDSU]H]GRSDVRZDQH HOHPHQW\ YDUSHUVRQ UHVXOWV>L@3U]HFKRZ\ZDQLHELHĝÈFHMRVRE\ YDUURZ ĳWU!WU!ĳ 8WZRU]HQLHZLHUV]DGODRVRE\ URZDSSHQG ĳWG!WG!ĳ WH[W SHUVRQQDPH :VWDZLHQLHLPLHQLDRVRE\ URZDSSHQG ĳWG!WG!ĳ WH[W SHUVRQUDWH :VWDZLHQLHVWDZNLRVRE\ WDEOH%RG\DSSHQG URZ 'RGDQLHZLHUV]DGRQRZHM ]DZDUWRĂFL ` 'RGDQLHQRZHM]DZDUWRĂFLGRGRW\FKF]DVRZHM]DZDUWRĂFLVWURQ\ ĳWKHDGĳ DIWHU WDEOH%RG\ 'RGDQLHHOHPHQWXWERG\!SRWKHDG! ` FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 541 UŻYCIE METOD TABLICY DO FILTROWANIA DANYCH 2ELHNWWDEOLF\PDGZLHPHWRG\QLH]Z\NOHSU]\GDWQHSRGF]DVğOWURZDQLD GDQ\FK7XWDM]REDF]\V]RELHZ\NRU]\VWDQHGRğOWURZDQLDWHJRVDPHJR ]ELRUXGDQ\FK3RQLHZDĝPHWRG\WHğOWUXMÈGDQHHOHPHQW\]DOLF]DMÈFH WHVWVÈGRGDZDQHGRQRZHMWDEOLF\ 'ZDSU]\NïDG\SRND]DQHQDVWURQLHSRSUDZHM UR]SRF]\QDMÈVLÚRGWDEOLF\RELHNWöZ SU]HGVWD ZLRQDZSRGUR]G]LDOHķ)LOWURZDQLHĵ LVÈZQLFK Z\NRU]\VW\ZDQHğOWU\GRXWZRU]HQLDQRZHMWDEOLF\ VNïDGDMÈFHMVLÚ]MHG\QLHSRG]ELRUXW\FKRELHNWöZ 1DVWÚSQLHNRGSU]HSURZDG]DLWHUDFMÚSU]H]QRZÈ WDEOLFÚZFHOXSRND]DQLDZ\QLNöZ MDNPRJïHĂ ]REDF]\ÊQDSRSU]HGQLHMVWURQLH • :SLHUZV]\PSU]\NïDG]LH]DVWRVRZDQRPHWRGÚ =ZUöÊXZDJÚQDXĝ\FLHpersonMDNRQD]Z\ SDUDPHWUXĽG]LDïDZFKDUDNWHU]H]PLHQQHM ZHZQÈWU]IXQNFML • :SU]\NïDG]LHZ\NRU]\VWXMÈF\PPHWRGÚ • forEach()EÚG]LHWRSDUDPHWUIXQNFMLDQRQL PRZHM :SU]\NïDG]LHZ\NRU]\VWXMÈF\PPHWRGÚ ğOWHU EÚG]LHWRSDUDPHWUIXQNFML SULFH5DQJH forEach() • :GUXJLPSU]\NïDG]LH]DVWRVRZDQRPHWRGÚ 3DUDPHWUpersonRGSRZLDGDELHĝÈFHPXRELHNWRZL WDEOLF\SHRSOHLMHVWXĝ\ZDQ\ZFHOXX]\VNDQLD GRVWÚSXGRZïDĂFLZRĂFLRELHNWX forEach() ğOWHU ğOWHU 0HWRGDforEach()SU]HSURZDG]DLWHUDFMÚSU]H] WDEOLFÚLZ\NRQXMHWÚVDPÈIXQNFMÚGODNDĝGHJR HOHPHQWXWDEOLF\0HWRGDWDFKDUDNWHU\]XMHVLÚ GXĝÈHODVW\F]QRĂFLÈSRQLHZDĝIXQNFMDPRĝH SU]HSURZDG]DÊSUDNW\F]QLHNDĝG\URG]DMSU]HWZD U]DQLDHOHPHQWöZWDEOLF\ DQLHMHG\QLHğOWURZDÊ MHMDNSU]HGVWDZLRQRZSU]\NïDG]LH )XQNFMD DQRQLPRZDG]LDïDZFKDUDNWHU]HğOWUXSRQLHZDĝ VSUDZG]DF]\VWDZNDGDQHMRVRE\]DZLHUDVLÚ ZHZVND]DQ\P]DNUHVLH-HĝHOLWDNRVRED]RVWDMH GRGDQDGRQRZHMWDEOLF\ 1. 8WZRU]HQLHQRZHMWDEOLF\ZFHOXSU]HFKRZ\ZD QLDGRSDVRZDQ\FKHOHPHQWöZ 2. 7DEOLFDSHRSOHZ\NRU]\VWXMHPHWRGÚforEach() GRZ\NRQDQLDWHMVDPHMIXQNFMLDQRQLPRZHM GODNDĝGHJRRELHNWX SU]HGVWDZLDMÈFHJRRVREÚ ZWDEOLF\SHRSOH 3. -HĝHOLRELHNWVSHïQLD]GHğQLRZDQHNU\WHULD ]RVWDMHGRGDQ\GRWDEOLF\UHVXOWV]DSRPRFÈ PHWRG\push() FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 0HWRGDğOWHU UöZQLHĝZ\ZRïXMHWÚVDPÈ IXQNFMÚGODNDĝGHJRHOHPHQWXWDEOLF\DOHZDUWRĂFLÈ ]ZURWQÈZVSRPQLDQHMIXQNFMLMHVWW\ONRtrueOXE IDOVH-HĝHOLIXQNFMD]ZUöFLtruePHWRGDğOWHU XPLHĂFLVSUDZG]DQ\HOHPHQWZQRZHMWDEOLF\ 6NïDGQLDMHVWQLHFRSURVWV]DQLĝZforEach(), DOHPHWRGDMHVWSU]H]QDF]RQDW\ONRGRğOWURZDQLD GDQ\FK 1. =DGHNODURZDQD]RVWDMHIXQNFMDRQD]ZLH SULFH5DQJH -HMZDUWRĂFLÈ]ZURWQÈEÚG]LHtrue, MHĂOL]DURENLGDQHMRVRE\EÚGÈ]QDMGRZDï\VLÚ Z]GHğQLRZDQ\P]DNUHVLH 2. 8WZRU]HQLHQRZHMWDEOLF\SU]H]QDF]RQHMGR SU]HFKRZ\ZDQLDGRSDVRZDQ\FKHOHPHQWöZ 3. 0HWRGDğOWHU Z\ZRïXMHIXQNFMÚ SULFH5DQJH GODNDĝGHJRHOHPHQWXWDEOLF\-HĝHOL ZDUWRĂFLÈ]ZURWQÈIXQNFMLSULFH5DQJH EÚG]LH trueWRGDQ\HOHPHQW]RVWDQLHXPLHV]F]RQ\ ZWDEOLF\UHVXOWV STATYCZNE FILTROWANIE DANYCH JAVASCRIPT FMVğOWHUIRUHDFKMV $(function() { 0LHMVFHQDGDQHGRW\F]ÈFHRVöE 1 2 3 6SUDZG]HQLHNDĝGHMRVRE\RUD]GRGDQLHGRWDEOLF\W\FKRVöENWöU\FKVWDZND PLHĂFLVLÚZSRGDQ\P]DNUHVLH YDUUHVXOWV >@7DEOLFDRVöEVSHïQLDMÈF\FKNU\WHULD SHRSOHIRU(DFK IXQFWLRQ SHUVRQ ^'ODNDĝGHMRVRE\ LI SHUVRQUDWH! SHUVRQUDWH ^ &]\VWDZNDPLHĂFLVLÚZSRGDQ\P]DNUHVLH" UHVXOWVSXVK SHUVRQ -HĝHOLWDNRVRED]RVWDMHGRGDQDGRWDEOLF\ ` ` ,WHUDFMDSU]H]WDEOLFÚUHVXOWVGRSDVRZDQHRVRE\VÈXPLHV]F]DQHZWDEHOL Z\ĂZLHWODQHMQDVWURQLH ` JAVASCRIPT FMVğOWHUğOWHUMV $(function() { 0LHMVFHQDGDQHGRW\F]ÈFHRVöE 1 2 3 )XQNFMDG]LDïDZFKDUDNWHU]HğOWUX IXQFWLRQSULFH5DQJH SHUVRQ ^ =DGHNODURZDQLHIXQNFMLSULFH5DQJH UHWXUQ SHUVRQUDWH! SHUVRQUDWH =ZUöÊZDUWRĂÊWUXHGODZVND]DQHJR]DNUHVX ` )LOWURZDQLHWDEOLF\SHRSOHGRSDVRZDQHRVRE\VÈXPLHV]F]RQHZWDEOLF\UHVXOWV YDUUHVXOWV >@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 <tr> 1 person people[1] $element <tr> 2 person people[2] $element <tr> 3 person people[3] $element <tr> • 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<tr> 5. ,PLÚRVRE\LXVWDORQDSU]H]QLÈVWDZND]RVWDMÈZVWDZLRQH GRHOHPHQWöZ<td> 6. 'RWDEOLF\URZVZVWDZLRQ\]RVWDMHQRZ\RELHNWZUD] ]GZRPDZïDĂFLZRĂFLDPLpersonSU]HFKRZXMHRGQLHVLHQLH GRRELHNWXGDQHMRVRE\QDWRPLDVWHOHPHQWSU]HFKRZXMH RGQLHVLHQLHGRHOHPHQWX<tr>SU]HGVWDZLDMÈFHJRRVREÚ ZWDEHOL 7. 0HWRGDDSSHQG5RZV WZRU]\QRZ\RELHNWM4XHU\ RQD]ZLH$tbody]DZLHUDMÈF\HOHPHQW<tbody> 8. 1DVWÚSQLHSU]HSURZDG]DQDMHVWLWHUDFMDSU]H]ZV]\VWNLH RELHNW\WDEOLF\URZVRUD]QDVWÚSXMHGRGDQLHRGSRZLDGDMÈ F\FKLPHOHPHQWöZ<tr>GR$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 <tr> Dodanie elementów <td> 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 <tbody> Utworzenie elementu <tbody> przeznaczonego na elementy <tr> 7 Iteracja przez obiekty w tablicy URZV Dodanie URZ do elementu $tbody 8 Przejście do kolejnego obiektu tablicy URZV 9 Dodanie elementu <tbody> 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 16 15 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 ĳYDOXHPLQĳ 3ROHWHNVWRZHGODZDUWRĂFLPLQLPDOQHMVWDZNL PD[ ĳYDOXHPD[ĳ 3ROHWHNVWRZHGODZDUWRĂFLPDNV\PDOQHMVWDZNL WDEOH ĳUDWHVĳ 7DEHODSU]H]QDF]RQDQDGRSDVRZDQHRVRE\ IXQFWLRQPDNH5RZV ^8WZRU]HQLHWDEOLF\LZLHUV]\WDEHOL SHRSOHIRU(DFK IXQFWLRQ SHUVRQ ^ ,WHUDFMDSU]H]ZV]\VWNLHRELHNW\SHUVRQ ZWDEOLF\SHRSOH YDUURZ ĳWU!WU!ĳ 8WZRU]HQLHZLHUV]DGODGDQHMRVRE\ URZDSSHQG ĳWG!WG!ĳ WH[W SHUVRQQDPH :VWDZLHQLHLPLHQLDRVRE\ URZDSSHQG ĳWG!WG!ĳ WH[W SHUVRQUDWH // Wstawienie stawki. URZVSXVK ^ 'RGDQLHRELHNWX]DSHZQLDMÈFHJRRGZRï\ZDQLHVLÚPLÚG]\WDEOLFDPL SHRSOHLURZV SHUVRQSHUVRQ2GZRïDQLHGRRELHNWXSHUVRQ HOHPHQWURZ2GZRïDQLHGRZLHUV]DMDNRRELHNWXM4XHU\ ` ` ` IXQFWLRQDSSHQG5RZV ^'RGDQLHZLHUV]\GRWDEHOL YDUWERG\ ĳWERG\!WERG\!ĳ 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 ĳVOLGHUĳ 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 <body> <header> 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<RUN6WUHHW0DSĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)LOPRZF\ĵDOW ĵ7UXPSHW3OD\HUĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFL$QLPDWRU]\ĵDOW ĵ/RJR,GHQWĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\ĵDOW ĵ%LF\FOH-DSDQĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFLĵDOW ĵ$TXD/RJRĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ$QLPDWRU]\,OXVWUDWRU]\ĵDOW ĵ*KRVWĵ! GLY! VFULSWVUF ĵMVMTXHU\MVĵ!VFULSW! VFULSWVUF ĵMVğOWHUWDJVMVĵ!VFULSW! ERG\! 3RSUDZHMVWURQLHPRĝHV]]REDF]\ÊRELHNW WDJJHGGODNRGX+70/Xĝ\WHJRZRPDZLDQ\P SU]\NïDG]LH'ODNDĝGHJRQRZHJRWDJXZDWU\ EXFLHGDWDWDJVREUD]öZQDVWÚSXMHXWZRU]HQLH ZïDĂFLZRĂFLZRELHNFLHWDJJHG7XWDMPDP\SLÚÊ ZïDĂFLZRĂFLanimators, GHVLJQHUV, ğOPPDNHUV, LOOXVWUDWRUVLSKRWRJUDSKHUV:DUWRĂFLÈMHVW WDEOLFDREUD]öZXĝ\ZDMÈF\FKGDQHJRWDJX WDJJHG ^ DQLPDWRUV>SMSJSMSJSMSJ@ GHVLJQHUV>SMSJSMSJSMSJ] ğOPPDNHUV>SMSJSMSJSMSJ] LOOXVWUDWRUV>SMSJSMSJ] SKRWRJUDSKHUV>SMSJSMSJSMSJ] ` FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 551 PRZETWARZANIE TAGÓW :W\PPLHMVFXPRĝHV]]REDF]\ÊMDNZ\JOÈGD 2 NRQğJXUDFMDVNU\SWX6NU\SWSU]HSURZDG]DLWHUDFMÚ 3 SU]H]REUD]\DRELHNWWDJJHGRWU]\PXMHQRZÈ ZïDĂFLZRĂÊGODNDĝGHJRWDJX:DUWRĂFLÈZïDĂ FLZRĂFLMHVWWDEOLFDSU]HFKRZXMÈFDREUD]\NWöUH 4 VWRVXMÈGDQ\WDJ 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. =PLHQQDLPJVSU]HFKRZXMHREUD]\Z\EUDQH ZM4XHU\ 3. =PLHQQD$buttonsSU]HFKRZXMHNRQWHQHUQD SU]\FLVNLZ\EUDQ\ZM4XHU\ 4. 8WZRU]HQLHRELHNWXWDJJHG 5. ,WHUDFMDSU]H]REUD]\SU]HFKRZ\ZDQHZLPJV ]Xĝ\FLHPPHWRG\M4XHU\RQD]ZLH.each()'OD NDĝGHJRREUD]XZ\ZRï\ZDQDMHVWWDVDPDIXQNFMD DQRQLPRZD 6. %LHĝÈF\REUD]MHVWSU]HFKRZ\ZDQ\Z]PLHQQHM RQD]ZLHLPJ 7. 7DJL]ELHĝÈFHJRREUD]XVÈSU]HFKRZ\ZDQH Z]PLHQQHMRQD]ZLHWDJV 7DJL]QDMGXMÈVLÚ ZDWU\EXFLHGDWDWDJVREUD]X 8. -HĝHOL]PLHQQDWDJVGODGDQHJRREUD]XPD ZDUWRĂÊ 9. 8ĝ\FLHPHWRG\VSOLW RELHNWX6WULQJZFHOX XWZRU]HQLDWDEOLF\WDJöZ ]RVWDMÈSRG]LHORQH ZPLHMVFXZ\VWÚSRZDQLDSU]HFLQNöZ :\ZRïDQLH PHWRG\.forEach()SRVSOLW SR]ZDODQD Z\NRQDQLHIXQNFMLDQRQLPRZHMGODNDĝGHJR HOHPHQWXZWDEOLF\ ZRPDZLDQ\PSU]\NïDG]LHVÈ WRZV]\VWNLHWDJLELHĝÈFHJRREUD]X 1DVWÚSQLHGOD NDĝGHJRWDJX 10. 6SUDZG]DP\F]\WDJMHVWMXĝZïDĂFLZRĂFLÈ RELHNWXWDJJHG 11. -HĝHOLQLHGRGDMHP\WDJMDNRQRZÈZïDĂFL ZRĂÊRZDUWRĂFLZSRVWDFLSXVWHMWDEOLF\ 12. 1DVWÚSQLHSRELHUDP\ZïDĂFLZRĂÊRELHNWX WDJJHGGRSDVRZDQÈGRGDQHJRWDJXLGRGDMHP\ REUD]GRWDEOLF\SU]HFKRZ\ZDQHMMDNRZDUWRĂÊWHM ZïDĂFLZRĂFL 7HUD]PRĝQDSU]HMĂÊGRNROHMQHJRWDJX ZUöÊGR NURNX10. *G\ZV]\VWNLHWDJLREUD]XVÈSU]HWZR U]RQHSU]HFKRG]LP\GRNROHMQHJR NURN5. FILTROWANIE, WYSZUKIWANIE I SORTOWANIE Utworzenie zmiennych: LPJV: wszystkie obrazy $buttons: element, którego atrybut id ma wartość buttons Utworzenie obiektu: WDJJHG: tablica tagów oraz obrazów z tagami 5 Iteracja przez wszystkie obrazy FUNKCJA ANONIMOWA: Przetwarzanie obrazu 6 7 8 Utworzenie zmiennych: LPJ: bieżący obraz WDJV: wartość atrybutu GDWDWDJV Czy zmienna WDJV ma wartość? N 9 T Iteracja przez wszystkie tagi FUNKCJA ANONIMOWA: Dodanie tagów i obrazów do obiektu WDJJHG 10 11 12 N Czy ten tag jest właściwością obiektu WDJJHG? Dodaj nazwę tagu jako właściwość obiektu WDJJHG Dodaj obraz do tablicy dla danego tagu Przejście do następnego tagu Przejście do następnego obrazu T OBIEKT TAGGED FMVğOWHUWDJVMV JAVASCRIPT 1 (function() { 2 YDULPJV ĳJDOOHU\LPJĳ =PLHQQDSU]HFKRZXMHZV]\VWNLHREUD]\ YDUEXWWRQV ĳEXWWRQVĳ =PLHQQDSU]HFKRZXMHSU]\FLVNL YDUWDJJHG ^`8WZRU]HQLHRELHNWXWDJJHG 3 4 5 6 7 8 9 10 11 12 LPJVHDFK IXQFWLRQ ^,WHUDFMDSU]H]REUD]\ YDULPJ WKLV3U]HFKRZ\ZDQLHLPJZ]PLHQQHM YDUWDJV WKLV GDWD ĳWDJVĳ 3REUDQLHWDJöZGDQHJRHOHPHQWX LI WDJV ^-HĝHOLHOHPHQWPDWDJL WDJVVSOLW ĳĳ IRU(DFK IXQFWLRQ WDJ1DPH ^ 3RG]LHOHQLHLFKZPLHMVFXZ\VWÚSRZDQLDSU]HFLQND LI WDJJHG>WDJ1DPH@ 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 <button> 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 <button> 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 ĳEXWWRQ!ĳ^8WZRU]HQLHSXVWHJRSU]\FLVNX WH[Wĳ:\ĂZLHWOZV]\VWNRĳ'RGDQLHWHNVWXķ:\ĂZLHWOZV]\VWNRĵ FODVVĳDFWLYHĳ3U]\FLVNVWDMHVLÚDNW\ZQ\ FOLFNIXQFWLRQ ^'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN $(this) 3REUDQLHNOLNQLÚWHJRSU]\FLVNX DGG&ODVV ĳDFWLYHĳ 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVV ĳDFWLYHĳ 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 ĳEXWWRQ!ĳ^8WZRU]HQLHSXVWHJRSU]\FLVNX WH[WWDJ1DPHĳ ĳWDJJHG>WDJ1DPH@OHQJWKĳ ĳ'RGDQLHQD]Z\WDJX FOLFNIXQFWLRQ ^'RGDQLHSURFHGXU\REVïXJL]GDU]HñFOLFN $(this) 3REUDQLHNOLNQLÚWHJRSU]\FLVNX DGG&ODVV ĳDFWLYHĳ 'RGDQLHNODV\DFWLYH VLEOLQJV 3REUDQLHSR]RVWDï\FKSU]\FLVNöZUöZQRU]ÚGQ\FK UHPRYH&ODVV ĳDFWLYHĳ 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 <body> <header> 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<RUN6WUHHW0DSĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)LOPRZF\ĵDOW ĵ7UXPSHW3OD\HUĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFL$QLPDWRU]\ĵDOW ĵ/RJR,GHQWĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ)RWRJUDğF\ĵDOW ĵ%LF\FOH-DSDQĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ3URMHNWDQFLĵDOW ĵ$TXD/RJRĵ! LPJVUF ĵLPJSMSJĵGDWDWDJV ĵ$QLPDWRU]\,OXVWUDWRU]\ĵDOW ĵ*KRVWĵ! GLY! VFULSWVUF ĵMVMTXHU\MVĵ!VFULSW! VFULSWVUF ĵMVğOWHUWDJVMVĵ!VFULSW! ERG\! 'ODNDĝGHJRREUD]XZWDEOLF\ cacheWZRU]RQ\MHVWQRZ\ RELHNW3RSUDZHMVWURQLH SRND]DQRWDEOLFÚGODNRGX +70/SU]HGVWDZLRQHJRSRZ\ĝHM LPJR]QDF]DRGQLHVLHQLH GRRGSRZLHGQLHJRHOHPHQWX LPJ! .LHG\Xĝ\WNRZQLNZSLV]HFRĂ ZSROXZ\V]XNLZDQLDNRG VSUDZG]LZïDĂFLZRĂÊWH[W ZV]\VWNLFKRELHNWöZLSR]QD OH]LHQLXGRSDVRZDQLDZ\ĂZLHWOL RGSRZLHGQLREUD] FDFKH > ^HOHPHQWLPJWH[WĳUDEELWĳ` ^HOHPHQWLPJWH[WĳVHDĳ` ^HOHPHQWLPJWH[WĳGHHUĳ` ^HOHPHQWLPJWH[WĳQHZ\RUNVWUHHWPDSĳ` ^HOHPHQWLPJWH[WĳWUXPSHWSOD\HUĳ` ^HOHPHQWLPJWH[WĳORJRLGHQWĳ` ^HOHPHQWLPJWH[WĳELF\FOHMDSDQĳ` ^HOHPHQWLPJWH[WĳDTXDORJRĳ` ^HOHPHQWLPJWH[WĳJKRVWĳ` ] FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 557 WYSZUKIWANIE TEKSTU 6NU\SWPRĝQDSRG]LHOLÊQDGZLHNOXF]RZHF]ÚĂFL KONFIGURACJA OBIEKTU CACHE 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLHSRND]DQRZRPDZLDQ\PGLDJUDPLH 2. =PLHQQD$imgSU]HFKRZXMHREUD]\Z\EUDQH ZM4XHU\ 3. =PLHQQD$searchSU]HFKRZXMHV]XNDQHZ\UDĝHQLH 4. 8WZRU]HQLHWDEOLF\cache 5. ,WHUDFMDSU]H]ZV]\VWNLHREUD]\Z$img]DSRPRFÈ PHWRG\.each()RUD]Z\NRQDQLHIXQNFMLDQRQLPRZHM GODNDĝGHJR]QLFK 6. 8ĝ\FLHPHWRG\push()ZFHOXGRGDQLDGRWDEOLF\ cacheRELHNWXSU]HGVWDZLDMÈFHJRGDQ\REUD] 7. :ïDĂFLZRĂÊelementRELHNWXSU]HFKRZXMHRGQLHVLHQLHGRHOHPHQWX<img> 8. :ïDĂFLZRĂÊtextHOHPHQWXSU]HFKRZXMHZDUWRĂÊ DWU\EXWXaltHOHPHQWX=ZUöÊXZDJÚQDSU]HWZDU]DQLH WHNVWXSU]H]GZLHPHWRG\ .trim()ĽXVXZDVSDFMH]SRF]ÈWNXLNRñFDWHNVWX .toLowerCase()ĽNRQZHUWXMHZV]\VWNLHOLWHU\QD PDïH FILTROWANIE OBRAZÓW, GDY UŻYTKOWNIK ZACZNIE WPISYWAĆ TEKST W POLU WYSZUKIWANIA 9. =DGHNODURZDQLHIXQNFMLRQD]ZLHğOWHU 10. 8PLHV]F]HQLHV]XNDQHJRZ\UDĝHQLDZ]PLHQQHM RQD]ZLHquery'RRF]\V]F]HQLDWHNVWXXĝ\ZDQHVÈ PHWRG\.trim()L.toLowerCase() 11. ,WHUDFMDSU]H]ZV]\VWNLHRELHNW\ZWDEOLF\cache LZ\ZRïDQLHGODNDĝGHJRWHMVDPHMIXQNFMLDQRQLPRZHM 12. 8WZRU]HQLH]PLHQQHMRQD]ZLHindexLSU]\SLVDQLH MHMZDUWRĂFL0 13. -HĝHOL]PLHQQDqueryPDZDUWRĂÊĮ 14.ĮWRXĝ\ZDP\PHWRG\indexOf()GRVSUDZG]HQLD F]\V]XNDQHZ\UDĝHQLH]QDMGXMHVLÚZHZïDĂFLZRĂFL textGDQHJRRELHNWX:\QLNEÚG]LHSU]HFKRZ\ZDQ\ Z]PLHQQHMindex-HĝHOL]RVWDQLH]QDOH]LRQ\ZDUWRĂÊ ]PLHQQHMEÚG]LHGRGDWQLD:SU]HFLZQ\PUD]LH ZDUWRĂFLÈ]PLHQQHMindexEÚG]LH-1 15. -HĝHOLZDUWRĂÊ]PLHQQHMindexZ\QRVL-1, ZDUWRĂFLÈZïDĂFLZRĂFLdisplayREUD]XEÚG]LHnone :SU]HFLZQ\PUD]LHZDUWRĂFLÈEÚG]LHSXVW\FLÈJ WHNVWRZ\ Z\ĂZLHWOHQLHREUD]X 3U]HMĂFLHGRQDVWÚSQHJRREUD]X NURN 558 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 2 4 Utworzenie zmiennych: $imgs: wszystkie obrazy $search: szukane wyrażenie 3 cache: tablica obiektów (tekst i obrazy) 5 6 7 8 Iteracja przez wszystkie obrazy Dodanie do tablicy cache obiektu z dwoma właściwościami: element: odniesienie do elementu <img> text: przetworzony tekst atrybutu alt (patrz podrozdział „Wyszukiwanie live”) Przejście do następnego obrazu 16 Czy przeglądarka internetowa obsługuje zdarzenie input? N T 17 Zdarzenie: input w polu wyszukiwania 18 Zdarzenie: keyup w polu wyszukiwania 9 Funkcja: ğOWHU Sprawdza tekst atrybutu alt i wyświetla dopasowane obrazy 10 Utworzenie zmiennej: query do przechowywania zapytania 11 Iteracja przez wszystkie obiekty obrazów w tablicy cache 12 Utworzenie zmiennej: index do przechowywania położenia tekstu Czy zmienna query ma wartość? 13 N 14 Wyszukanie wartości zmiennej search w tekście za pomocą .indexOf() i przechowywanie jego położenia w zmiennej index 15 N Czy wartość zmiennej index wynosi -1? T T Przypisanie właściwości display wartości ’’ w celu wyświetlenia obrazu Przypisanie właściwości display wartości none w celu ukrycia obrazu Przejście do następnego obrazu WYSZUKIWANIE LIVE 16. 6SUDZG]HQLHF]\SU]HJOÈGDUNDLQWHUQHWRZD REVïXJXMH]GDU]HQLHinput ']LDïDZQDMQRZV]\FK SU]HJOÈGDUNDFKQLHMHVWREVïXJLZDQHZ,( LZF]HĂQLHMV]\FKZHUVMDFK 17. -HĝHOLWDNSRMHJRZ\ZRïDQLXZSROXWHNVWR Z\PQDVWÚSXMHZ\ZRïDQLHIXQNFMLğOWHU 18. :SU]HFLZQ\PUD]LHXĝ\ZDP\]GDU]HQLD keyupGRZ\ZRïDQLDZ\PLHQLRQHMIXQNFML FMVğOWHUVHDUFKMV JAVASCRIPT (function() { 8PLHV]F]HQLHZIXQNFMLW\SX,,)( YDULPJV ĶJDOOHU\LPJĳ 3REUDQLHREUD]öZ YDUVHDUFK ĶğOWHUVHDUFKĳ 3REUDQLHHOHPHQWXLQSXW! YDUFDFKH >@8WZRU]HQLHWDEOLF\RQD]ZLHFDFKH 1 2 3 4 LPJVHDFK IXQFWLRQ ^'ODNDĝGHJRREUD]X cache.push({ 'RGDQLHRELHNWXGRWDEOLF\FDFKH HOHPHQWWKLV7HQREUD] WH[WWKLVDOWWULP WR/RZHU&DVH 7HNVWMHJRDWU\EXWXDOW PDïHOLWHU\XVXQLÚWH ]EÚGQH]QDNL ` ` 5 6 7 8 9 10 11 12 13 14 15 16 17 18 IXQFWLRQğOWHU ^=DGHNODURZDQLHIXQNFMLğOWHU YDUTXHU\ WKLVYDOXHWULP WR/RZHU&DVH 3REUDQLH]DS\WDQLD FDFKHIRU(DFK IXQFWLRQ LPJ ^'ODNDĝGHJRHOHPHQWXZWDEOLF\FDFKH SU]HND]XMHP\REUD] YDULQGH[ 3U]\SLVDQLH]PLHQQHMLQGH[ZDUWRĂFL LI TXHU\ ^-HĝHOL]PLHQQDTXHU\PDZDUWRĂÊ LQGH[ LPJWH[WLQGH[2I TXHU\ 6SUDZG]HQLHF]\WHNVW]PLHQQHMTXHU\]QDMGXMH VLÚWXWDM ` LPJHOHPHQWVW\OHGLVSOD\ LQGH[ ` ` "ĶQRQHĳĶĳ:\ĂZLHWOHQLHOXEXNU\FLH LI ĶRQLQSXWĳLQVHDUFK>@ ^-HĝHOLSU]HJOÈGDUNDLQWHUQHWRZDREVïXJXMH ]GDU]HQLHLQSXW VHDUFKRQ ĶLQSXWĳğOWHU 8ĝ\FLH]GDU]HQLDLQSXWGRZ\ZRïDQLDIXQNFMLğOWHU `HOVH^:SU]HFLZQ\PUD]LH VHDUFKRQ ĶNH\XSĳğOWHU 8ĝ\FLH]GDU]HQLDNH\XSGRZ\ZRïDQLDIXQNFMLğOWHU ` ` 7HNVWDWU\EXWXDOWNDĝGHJRREUD]XRUD]WHNVW ZSURZDG]DQ\SU]H]Xĝ\WNRZQLNDZSROXZ\V]XNL ZDQLDVÈRF]\V]F]DQH]DSRPRFÈGZöFKPHWRG M4XHU\2ELHPHWRG\G]LDïDMÈQDW\FKVDP\FK Z\EUDQ\FKHOHPHQWDFKLVÈSRïÈF]RQH]HVREÈ METODA UŻYCIE trim() 8VXZD]QDNLRGVWÚSXQDSRF]ÈWNXLQD NRñFXFLÈJXWHNVWRZHJR WR/RZHU&DVH .RQZHUWXMHFLÈJWHNVWRZ\QDPDïHOLWHU\ SRQLHZDĝPHWRGDLQGH[2I UR]UöĝQLD ZLHONRĂÊOLWHU FILTROWANIE, WYSZUKIWANIE I SORTOWANIE SORTOWANIE 6RUWRZDQLHR]QDF]DSREUDQLH]ELRUXZDUWRĂFLDQDVWÚSQLH ]PLDQÚLFKNROHMQRĂFL.RPSXWHU\F]ÚVWRZ\PDJDMÈGRNïDGQ\FK LQIRUPDFMLGRW\F]ÈF\FKNROHMQRĂFLVRUWRZDQLDGDQ\FK :WHMF]ÚĂFLUR]G]LDïXSR]QDV]PHWRGÚsort()RELHNWXArray .LHG\VRUWXMHV]WDEOLFÚ]D SRPRFÈPHWRG\sort(), ]PLHQLDV]NROHMQRĂÊZMDNLHM SU]HFKRZ\ZDQHVÈHOHPHQW\ WDEOLF\ 3DPLÚWDMĝHHOHPHQW\ZWDE OLF\PDMÈSU]\SLVDQ\QXPHU LQGHNVX'ODWHJRWHĝVRUWRZDQLH PRĝQDSRUöZQDÊGR]PLDQ\ QXPHUöZLQGHNVXHOHPHQWöZ WDEOLF\ 'RP\ĂOQLHPHWRGDsort() XPLHV]F]DHOHPHQW\ZNROHMQR ĂFLOHNV\NRJUDğF]QHM.ROHMQRĂÊ WDVWRVRZDQDMHVWZVïRZQLNDFK LPRĝHSURZDG]LÊGRRWU]\PDQLD LQWHUHVXMÈF\FKZ\QLNöZ SDWU] OLF]E\SRQLĝHM $E\SRVRUWRZDÊHOHPHQW\ ZLQQ\VSRVöEPRĝQDSU]\JRWR ZDÊIXQNFMÚSRUöZQXMÈFÈ SDWU] VWURQDSRSUDZHM .ROHMQRĂÊOHNV\NRJUDğF]QD SU]HGVWDZLDVLÚQDVWÚSXMÈFR 1. 6SUDZGěSLHUZV]ÈOLWHUÚ LXSRU]ÈGNXMVïRZDZHGïXJLFK SLHUZV]\FKOLWHU 2. -HĝHOLGZDVïRZDPDMÈWÚ VDPÈSLHUZV]ÈOLWHUÚXSRU]ÈG NXMMHZNROHMQRĂFLGUXJLHMOLWHU\ 3. -HĝHOLGZDVïRZDPDMÈWDNLH VDPHGZLHSLHUZV]HOLWHU\ XSRU]ÈGNXMMHZNROHMQRĂFL WU]HFLHMOLWHU\LWG SORTOWANIE CIĄGÓW TEKSTOWYCH YDUQDPHV >ĳ$OLFMDĳĳ$QQDĳĳ$QGUHDĳĳ$EHOĳ@ QDPHVVRUW 6SöMU]QDWDEOLFÚSRSUDZHM VWURQLHSU]HFKRZXMÈFHMLPLRQD 3RXĝ\FLXPHWRG\sort()ZWHM WDEOLF\]PLHQLDVLÚNROHMQRĂÊ XïRĝHQLDLPLRQ (OHPHQW\WDEOLF\VÈWHUD]XïRĝRQHZQDVWÚSXMÈFHMNROHMQRĂFL >ĳ$EHOĳĳ$OLFMDĳĳ$QGUHDĳĳ$QQDĳ@ SORTOWANIE LICZB YDUSULFHV >@ SULFHVVRUW 'RP\ĂOQLHOLF]E\VÈVRUWRZDQH OHNV\NRJUDğF]QLHFRPRĝH SURZDG]LÊGRRWU]\PDQLD QLHRF]HNLZDQ\FKZ\QLNöZ 5R]ZLÈ]DQLHPMHVWSU]\JRWRZD QLHIXQNFMLSRUöZQXMÈFHM SDWU] QDNROHMQHMVWURQLH (OHPHQW\WDEOLF\VÈWHUD]XïRĝRQHZQDVWÚSXMÈFHMNROHMQRĂFL >@ FILTROWANIE, WYSZUKIWANIE I SORTOWANIE ZMIANA KOLEJNOŚCI ZA POMOCĄ FUNKCJI PORÓWNUJĄCEJ -HĝHOLFKFHV]]PLHQLÊNROHMQRĂÊVRUWRZDQLDPXVLV]XWZRU]\ÊIXQNFMÚ SRUöZQXMÈFÈ=DGDQLHPWHMIXQNFMLMHVWSRUöZQDQLHGZöFKZDUWRĂFL DMHMZDUWRĂFLÈ]ZURWQÈMHVWOLF]ED/LF]EDWDEÚG]LHQDVWÚSQLHXĝ\WD GR]PLDQ\NROHMQRĂFLHOHPHQWöZZWDEOLF\ 0HWRGDsort()MHGQRF]HĂQLH SRUöZQXMHW\ONRGZLHZDUWRĂFL RGZRïXMHP\VLÚGRQLFKMDNR aLb LXVWDODF]\ZDUWRĂÊ aSRZLQQDSRMDZLÊVLÚSU]HG ZDUWRĂFLÈbF]\SRQLHM 3RQLHZDĝZGDQHMFKZLOL SRUöZQ\ZDQHVÈW\ONRGZLH ZDUWRĂFLPHWRGDsort()PRĝH E\Ê]PXV]RQDGRSRUöZQ\ZD QLDNDĝGHMZDUWRĂFLZWDEOLF\ ]ZLHORPDLQQ\PLZDUWRĂFLDPL WDEOLF\ SDWU]GLDJUDPQD QDVWÚSQHMVWURQLH 0HWRGDsort()PRĝHPLHÊ SDUDPHWUZSRVWDFLIXQNFML DQRQLPRZHMOXEQD]ZDQHM )XQNFMDWDMHVWQD]\ZDQD IXQNFMÈSRUöZQXMÈFÈLSR]ZDOD QDRSUDFRZDQLHUHJXïRNUHĂOD QLDF]\ZDUWRĂÊaSRZLQQD SRMDZLÊVLÚSU]HGZDUWRĂFLÈb, F]\SRQLHM FUNKCJA PORÓWNUJĄCA MUSI ZWRACAĆ LICZBY )XQNFMDSRUöZQXMÈFDSRZLQQD ]ZUöFLÊOLF]EÚ/LF]EDWDZVND ]XMHNWöU\]GZöFKHOHPHQWöZ SRZLQLHQE\ÊSLHUZV]\ :VND]XMHĝHZDUWRĂÊ aSRZLQQDSRMDZLÊVLÚSU]HG ZDUWRĂFLÈb 0HWRGDsort()EÚG]LHRNUHĂODïD ZDUWRĂFLNRQLHF]QHGRSRUöZQD QLDDE\]DSHZQLÊSUDZLGïRZH XïRĝHQLHHOHPHQWöZZWDEOLF\ :VND]XMHĝHHOHPHQW\ SRZLQQ\SR]RVWDÊZWHMVDPHM NROHMQRĂFL :\VWDUF]\SRSURVWXXWZRU]\Ê IXQNFMÚSRUöZQXMÈFÈĽ]ZUDFD RQDOLF]EÚRG]ZLHUFLHGODMÈFÈ NROHMQRĂÊZMDNLHMPDMÈ SRMDZLDÊVLÚHOHPHQW\ ! :VND]XMHĝHZDUWRĂÊb SRZLQQDSRMDZLÊVLÚSU]HG ZDUWRĂFLÈa $E\]REDF]\ÊZMDNLHMNROHMQRĂFLVÈSRUöZQ\ZDQHHOHPHQW\ZIXQNFMLSRUöZQXMÈFHMPRĝHV]XPLHĂFLÊ Z\ZRïDQLHPHWRG\FRQVROHORJ QDSU]\NïDGFRQVROHORJ DĳĳEĳ ĳ ED FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 561 JAK DZIAŁA SORTOWANIE? 3RQLĝHMPDP\WDEOLFÚSU]HFKRZXMÈFÈOLF]ENWöUHEÚGÈSRVRUWRZDQHZNR OHMQRĂFLURVQÈFHM0RĝHV]]REDF]\ÊMDNGZLHZDUWRĂFL aLE VÈSRUöZQ\ZD QH]HVREÈ)XQNFMDSRUöZQXMÈFDPD]GHğQLRZDQHUHJXï\NWöUHZVND]XMÈ NWöUD]ZDUWRĂFLPDE\ÊSLHUZV]D 1 3 5 4 2 przesuń aSRZLQQR]QDOHěÊVLÚSU]HG E Ř Ř aŘb 1 3 5 4 2 1 3 5 4 2 nie przesuwaj nie przesuwaj aSRZLQQR]QDOHěÊVLÚpo E aSRZLQQR]QDOHěÊVLÚpo E Ř aŘb ! Ř aŘb ! .ROHMQRĂÊVRUWRZDQLDHOHPHQWöZ]DOHĝ\RGSU]HJOÈGDUNLLQWHUQHWRZHM 3U]\NïDGWHQSRND]XMHNROHMQRĂÊVWRVRZDQÈSU]H]6DIDUL,QQHSU]HJOÈGDUNLVRUWXMÈHOHPHQW\ZLQQHM NROHMQRĂFL FILTROWANIE, WYSZUKIWANIE I SORTOWANIE YDUSULFHV >@/LF]E\SU]HFKRZ\ZDQHZWDEOLF\ prices.sort(function(ab) { 'ZLHZDUWRĂFLVÈSRUöZQ\ZDQH return ab8VWDOHQLHNWöUDZDUWRĂÊSRZLQQDE\ÊSLHUZV]D ` 1 3 5 4 2 przesuń aSRZLQQR]QDOHěÊVLÚSU]HG E Ř Ř aŘb 1 3 4 5 2 1 2 3 4 5 przesuń nie przesuwaj aSRZLQQR]QDOHěÊVLÚSU]HG E aSRZLQQR]QDOHěÊVLÚpo E Ř Ř aŘb Ř aŘb ! 3U]HJOÈGDUND&KURPHSRUöZQXMHWÚWDEOLFÚZQDVWÚSXMÈFHMNROHMQRĂFLļļļļļ 3U]HJOÈGDUND)LUHIR[SRUöZQXMHWÚWDEOLFÚZQDVWÚSXMÈFHMNROHMQRĂFLļļļļļ ļļļ FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 563 SORTOWANIE LICZB 3RQLĝHMSU]HGVWDZLRQRSU]\NïDG\IXQNFMLSRUöZQXMÈF\FKNWöUHPRJÈE\Ê Xĝ\ZDQHMDNRSDUDPHWUPHWRG\sort() ROSNĄCA KOLEJNOŚĆ LICZBOWA $E\SRVRUWRZDÊOLF]E\ ZNROHMQRĂFLURVQÈFHMQDOHĝ\ ZDUWRĂÊGUXJLHMOLF]E\bRGMÈÊ RGSLHUZV]HMOLF]E\a:WDEHOL SRSUDZHMVWURQLHZ\PLHQLRQR SU]\NïDG\SRUöZQ\ZDQLD ZDUWRĂFL]SRND]DQHMWDEOLF\ MALEJĄCA KOLEJNOŚĆ LICZBOWA $E\SRVRUWRZDÊOLF]E\ ZNROHMQRĂFLPDOHMÈFHMQDOHĝ\ ZDUWRĂÊSLHUZV]HMOLF]E\aRGMÈÊ RGGUXJLHMOLF]E\b KOLEJNOŚĆ LOSOWA 7HQIUDJPHQWNRGXORVRZR ]ZUDFDZDUWRĂÊ]]DNUHVXRG GRDW\PVDP\PXPLHV]F]D HOHPHQW\WDEOLF\ZNROHMQRĂFL ORVRZHM YDUSULFHV >@ SULFHVVRUW IXQFWLRQ DE ^ UHWXUQDE ` a OPERATOR b WYNIK .2/(-12¥m – ļ aZ\VWÚSXMHSU]HGb – NROHMQRĂÊSR]RVWDMHEH]]PLDQ – bZ\VWÚSXMHSU]HGa YDUSULFHV >@ SULFHVVRUW IXQFWLRQ DE ^ UHWXUQED ` b OPERATOR a – WYNIK .2/(-12¥m bZ\VWÚSXMHSU]HGa – NROHMQRĂÊSR]RVWDMHEH]]PLDQ – ļ aZ\VWÚSXMHSU]HGb YDUSULFHV >@ prices.sort(function() { UHWXUQ0DWKUDQGRP ` 564 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE SORTOWANIE DAT 'DW\PXV]ÈE\ÊVNRQZHUWRZDQHQDRELHNW\'DWHDE\PRJï\E\ÊQDVWÚSQLH SRUöZQ\ZDQH]DSRPRFÈRSHUDWRUöZ<L> YDUKROLGD\V > ĳĳ ĳĳ ĳĳ ĳĳ @ KROLGD\VVRUW IXQFWLRQ DE ^ YDUGDWH$ QHZ'DWH D YDUGDWH% QHZ'DWH E UHWXUQGDWH$GDWH% ` 7DEOLFDEÚG]LHWHUD]XïRĝRQDZQDVWÚSXMÈFHMNROHMQRĂFL KROLGD\V > ĳĳ ĳĳ ĳĳ ĳĳ ] DATY W KOLEJNOŚCI ROSNĄCEJ -HĝHOLGDW\VÈSU]HFKRZ\ZDQH MDNRFLÈJLWHNVWRZHQDSU]\NïDG MDNZWDEOLF\SRND]DQHMSR OHZHMVWURQLHWRIXQNFMD SRUöZQXMÈFDPXVLXWZRU]\Ê RELHNW'DWHQDSRGVWDZLHFLÈJX WHNVWRZHJRDE\PRĝOLZHE\ïR SRUöZQ\ZDQLHGDW 3RNRQZHUVMLFLÈJXWHNVWRZHJR QDRELHNW'DWH-DYD6FULSW SU]HFKRZXMHGDWÚMDNROLF]EÚ PLOLVHNXQGNWöUHXSï\QÚï\RG VW\F]QLDURNX .LHG\GDWDMHVWSU]HFKRZ\ ZDQDZSRVWDFLOLF]E\GZLH GDW\PRĝQDSRUöZQ\ZDÊ ZGRNïDGQLHWDNLVDPVSRVöE MDNSRUöZQ\ZDQHVÈOLF]E\ QDVWURQLHSROHZHM FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 565 SORTOWANIE TABELI :W\PSU]\NïDG]LH]PLHQLDQDMHVWNROHMQRĂÊWDEHOL.DĝG\ZLHUV]WDEHOLMHVW SU]HFKRZ\ZDQ\ZWDEOLF\1DVWÚSQLHWDEOLFDMHVWVRUWRZDQDSRNOLNQLÚFLX QDJïöZNDNROXPQ\WDEHOLSU]H]Xĝ\WNRZQLND SORTOWANIE WEDŁUG NAGŁÓWKA .LHG\Xĝ\WNRZQLNNOLNQLH QDJïöZHNNROXPQ\WDEHOL Z\ZRï\ZDQDMHVWIXQNFMD DQRQLPRZDRGSRZLHG]LDOQD]D VRUWRZDQLH]DZDUWRĂFLWDEOLF\ ZLHUV]\WDEHOL :LHUV]HVÈ VRUWRZDQHZNROHMQRĂFLURVQÈFHM QDSRGVWDZLHGDQ\FK]QDMGXMÈ F\FKVLÚZWHMNROXPQLH 3RQRZQHNOLNQLÚFLHQDJïöZND WHMVDPHMNROXPQ\SRZRGXMH VRUWRZDQLHZLHUV]\ZNROHMQRĂFL PDOHMÈFHM TYPY DANYCH FUNKCJE PORÓWNUJĄCE .DĝGDNROXPQDPRĝH]DZLHUDÊ MHGHQ]QDVWÚSXMÈF\FKW\SöZ GDQ\FK .DĝG\W\SGDQ\FKZ\PDJD Xĝ\FLDLQQHMIXQNFMLSRUöZQXMÈ FHM)XQNFMHSRUöZQXMÈFHEÚGÈ SU]HFKRZ\ZDQHMDNRWU]\PH WRG\RELHNWXRQD]ZLHcompare, NWöU\XWZRU]\P\ZSRGUR]G]LDOH ķ2ELHNWFRPSDUHĵ • FLÈJLWHNVWRZH • F]DV PLQXW\LVHNXQG\ • GDW\ -HĝHOLVSRMU]\V]QDHOHPHQW\ <th>WRGRVWU]HĝHV]ĝHW\SGD Q\FKMHVWZVND]DQ\ZDWU\EXFLH RQD]ZLHGDWDVRUW 566 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE • name()VRUWXMHFLÈJLWHNVWR ZH • duration()VRUWXMHZDUWRĂFL • F]DVX PLQXW\LVHNXQG\ date()VRUWXMHGDW\ STRUKTURA TABELI HTML 1. (OHPHQWWDEOH!PXVL ]DZLHUDÊDWU\EXWFODVVNWöUHJR ZDUWRĂÊWRVRUWDEOH 2. 1DJïöZNLNROXPQWDEHOLPDMÈ DWU\EXWRQD]ZLHGDWDVRUW 2G]ZLHUFLHGODRQW\SGDQ\FK ZWHMNROXPQLH FVRUWWDEOHKWPO HTML 1 2 :DUWRĂÊDWU\EXWXGDWDVRUW RGSRZLDGDPHWRGRPZRELHNFLH compare <body> WDEOHFODVV ĵVRUWDEOHĵ! <thead> <tr> WKGDWDVRUW ĵQDPHĵ!GatunekWK! WKGDWDVRUW ĵQDPHĵ!7\WXïWK! WKGDWDVRUW ĵGXUDWLRQĵ!&]DVWUZDQLDWK! WKGDWDVRUW ĵGDWHĵ!'DWDWK! WU! WKHDG! <tbody> <tr> <td>$QLPDFMDWG! <td>:LOGIRRGWG! <td>WG! <td>WG! WU! <tr> <td>)LOPWG! <td>7KH'HHUWG! <td>WG! <td>WG! WU! <tr> <td>$QLPDFMDWG! <td>7KH*KRVWWG! <td>WG! <td>WG! WU! WERG\! WDEOH! VFULSWVUF ĵMVMTXHU\MVĵ!VFULSW! VFULSWVUF ĵMVVRUWWDEOHMVĵ!VFULSW! ERG\! FILTROWANIE, WYSZUKIWANIE I SORTOWANIE 567 FUNKCJE PORÓWNUJĄCE 1. =DGHNODURZDQLHRELHNWXcompare=DZLHUDRQ WU]\PHWRG\SU]H]QDF]RQHGRVRUWRZDQLDQD]Z ZDUWRĂFLF]DVXLGDW 1 Utworzenie obiektu: compare 2 DEKLARACJA METODY: QDPH DE 3 Użycie wyrażenia regularnego do zastąpienia wszystkich wystąpień słowa the na początku ciągu tekstowego parametru pustym ciągiem tekstowym METODA NAME() 2. 'RGDQLHPHWRG\RQD]ZLHname()3RGREQLH MDNZV]\VWNLHIXQNFMHSRUöZQXMÈFHPHWRGDWD SRZLQQDSRELHUDÊGZDSDUDPHWU\aLb 3. 8ĝ\FLHZ\UDĝHQLDUHJXODUQHJRGRXVXQLÚFLD VïRZDthe]SRF]ÈWNXREXDUJXPHQWöZSU]HND]\ ZDQ\FKIXQNFML ZLÚFHMLQIRUPDFMLRWHMWHFKQLFH ]QDMG]LHV]QDVWURQLHSRSUDZHM 4. -HĝHOLZDUWRĂÊaMHVWPQLHMV]DQLĝbWRĮ 5.ĮZDUWRĂFLÈ]ZURWQÈEÚG]LH R]QDF]DĝH aSRZLQQR]QDOHěÊVLÚSU]HGb 6. :SU]HFLZQ\PUD]LHMHĝHOLaMHVWZLÚNV]HQLĝb, ZDUWRĂFLÈ]ZURWQÈMHVW1DWRPLDVWMHĂOLVÈWDNLH VDPHZDUWRĂFLÈ]ZURWQÈMHVW SDWU]QDGROH VWURQ\ 4 Czy a jest mniejsze niż b? N Wartość zwrotna Ř 5 N 6 T Czy a jest większe niż b? Wartość zwrotna T Wartość zwrotna METODA DURATION() 7 7. 'RGDQLHPHWRG\RQD]ZLHduration()3RGRE 8 QLHMDNZV]\VWNLHIXQNFMHSRUöZQXMÈFHPHWRGDWD SRZLQQDSRELHUDÊGZDSDUDPHWU\aLb 8. &]DVMHVWSU]HFKRZ\ZDQ\ZSRVWDFLPLQXW 9 LVHNXQGmm:ss0HWRGDVSOLW RELHNWX6WULQJ 10 G]LHOLFLÈJWHNVWRZ\ZPLHMVFDFKZ\VWÚSRZDQLD GZXNURSNDLWZRU]\WDEOLFÚZNWöUHMPLQXW\ LVHNXQG\WRRGG]LHOQHHOHPHQW\ 9. $E\RNUHĂOLÊF]DVFDïNRZLW\Z\UDĝRQ\ZVHNXQ 11 GDFKPHWRGDNumber()NRQZHUWXMHFLÈJLWHNVWRZH 12 ZWDEOLF\QDOLF]E\0LQXW\VÈPQRĝRQHSU]H] LGRGDZDQHGROLF]E\VHNXQG 13 10. =ZUDFDQDMHVWREOLF]RQDZDUWRĂÊZ\UDĝHQLD DE METODA DATE() 11. 'RGDQLHPHWRG\RQD]ZLHdate()3RGREQLH MDNZV]\VWNLHIXQNFMHSRUöZQXMÈFHPHWRGDWD SRZLQQDSRELHUDÊGZDSDUDPHWU\aLb 12. 8WZRU]HQLHQRZHJRRELHNWX'DWHGRSU]HGVWD ZLHQLDSRV]F]HJöOQ\FKDUJXPHQWöZSU]HND]\ZD Q\FKPHWRG]LH 13. =ZUDFDQDMHVWREOLF]RQDZDUWRĂÊZ\UDĝHQLD DE 568 FILTROWANIE, WYSZUKIWANIE I SORTOWANIE DEKLARACJA METODY: GXUDWLRQ DE Konwersja obu parametrów na tablice Konwersja obu parametrów na sekundy Wartość zwrotna to wynik wyrażenia DE DEKLARACJA METODY: GDWH DE Konwersja obu parametrów na obiekty 'DWH Wartość zwrotna to wynik wyrażenia DE UHWXUQD!E" 6NUöWHPGODRSHUDWRUDZDUXQNRZHJRMHVWoperator WUöMDUJXPHQWRZ\2EOLF]DZDUWRĂÊZDUXQNX L]ZUDFDMHGQÈ]GZöFKZDUWRĂFL:DUXQHN ]QDMGXMHVLÚSROHZHMVWURQLH]QDNX]DS\WDQLD =NROHLGZLHRSFMH]QDMGXMÈVLÚSRSUDZHMVWURQLH ]QDNX]DS\WDQLDLVÈUR]G]LHORQHGZXNURSNLHP -HĝHOLREOLF]RQHZ\UDĝHQLHEÚG]LHZDUWRĂFLÈ truthyWR]ZUöFRQD]RVWDQLHSLHUZV]DZDUWRĂÊ :SU]\SDGNXZDUWRĂFL IDOV\]ZUDFDQDMHVW ZDUWRĂÊSRGZXNURSNX OBIEKT COMPARE FMVVRUWWDEOHMV JAVASCRIPT YDUFRPSDUH ^=DGHNODURZDQLHRELHNWXFRPSDUH QDPHIXQFWLRQ DE ^'RGDQLHPHWRG\RQD]ZLHQDPH D DUHSODFH AWKHLĳĳ 8VXQLÚFLHVïRZD7KH]SRF]ÈWNXSDUDPHWUX E EUHSODFH AWKHLĳĳ 8VXQLÚFLHVïRZD7KH]SRF]ÈWNXSDUDPHWUX 1 2 3 if (a < b) { -HĝHOLZDUWRĂÊDMHVWPQLHMV]DRGE UHWXUQ:DUWRĂÊ]ZURWQDZ\QRVL `HOVH^:SU]HFLZQ\PUD]LH UHWXUQD!E"-HĝHOLDMHVWZLÚNV]HQLĝE]ZUöÊ/8% `MHĂOLVÈWDNLHVDPH]ZUöÊ ` GXUDWLRQIXQFWLRQ DE ^'RGDQLHPHWRG\RQD]ZLHGXUDWLRQ D DVSOLW ĳĳ 3RG]LDïF]DVXZPLHMVFXGZXNURSND E EVSOLW ĳĳ 3RG]LDïF]DVXZPLHMVFXGZXNURSND 4 5 6 7 8 D 1XPEHU D>@ 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 AWKHLĳĳ 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öZ<th>Z]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öZ<th>ZWHM 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 <tbody> FRQWUROV: elementy <th> URZV: tablica elementów <tr> Zdarzenie: FOLFN w elemencie <th> 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 <th> 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 <th> 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 <tbody> GO TO NEXT SORTABLE TABLE FILTROWANIE, WYSZUKIWANIE I SORTOWANIE T SKRYPT SORTUJĄCY TABELĘ FMVVRUWWDEOHMV JAVASCRIPT 5 $(’.VRUWDEOHĳ HDFK IXQFWLRQ ^ YDUWDEOH WKLV // Tabela do sortowania. YDUWERG\ WDEOHğQG ĳWERG\ĳ =DZDUWRĂÊWDEHOL YDUFRQWUROV WDEOHğQG ĳWKĳ 1DJïöZNLWDEHOL YDUURZV WERG\ğQG ĳWUĳ WR$UUD\ 7DEOLFDSU]HFKRZXMÈFDZLHUV]H 6 7 8 9 FRQWUROVRQ ĳFOLFNĳIXQFWLRQ ^.LHG\Xĝ\WNRZQLNNOLNQLHQDJïöZHN YDUKHDGHU WKLV 3REUDQLHQDJïöZND YDURUGHU KHDGHUGDWD ĳVRUWĳ 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 ĳDVFHQGLQJĳ __KHDGHULV ĳGHVFHQGLQJĳ ^ KHDGHUWRJJOH&ODVV ĳDVFHQGLQJGHVFHQGLQJĳ =PLDQDZDUWRĂFLDWU\EXWXFODVVQDSU]HFLZQÈ WERG\DSSHQG URZVUHYHUVH 2GZUöFHQLHNROHMQRĂFLHOHPHQWöZWDEOLF\ `HOVH^:SU]HFLZQ\PUD]LHWU]HEDSRVRUWRZDÊWDEOLFÚ KHDGHUDGG&ODVV ĳDVFHQGLQJĳ 'RGDQLHNODV\GRQDJïöZND 8VXQLÚFLHNODV\]ZV]\VWNLFKSR]RVWDï\FKQDJïöZNöZ KHDGHUVLEOLQJV UHPRYH&ODVV ĳDVFHQGLQJGHVFHQGLQJĳ LI FRPSDUHKDV2ZQ3URSHUW\ RUGHU ^-HĝHOLRELHNWFRPSDUHPDZVND]DQÈPHWRGÚ FROXPQ FRQWUROVLQGH[ WKLV :\V]XNDQLHQXPHUXLQGHNVXNROXPQ\ URZVVRUW IXQFWLRQ DE D D ğQG ĳWGĳ HT E E ğQG ĳWGĳ HT UHWXUQFRPSDUH>RUGHU@ ` ^:\ZRïDQLHPHWRG\VRUW ZWDEOLF\URZV FROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XD FROXPQ WH[W 3REUDQLHWHNVWXNROXPQ\ZZLHUV]XE DE :\ZRïDQLHPHWRG\SRUöZQXMÈFHM WERG\DSSHQG URZV ` ` ` ` 18. :DUWRĂFLaLbVÈSU]HFKRZ\ZDQHZ]PLHQ Q\FK0HWRGDğQG SRELHUDHOHPHQW\<td>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 <FORM> :Ú]ï\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<form> :$¥&,: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öZQRHOHPHQWX<form>MDNLNRQWUROHUD IRUPXODU]DZGRZROQ\PIRUPXODU]XVLHFLRZ\P -HGQDNRELHNWdocumentRIHUXMHWHĝWDN]ZDQÈ NROHNFMÚIRUPXODU]\.ROHNFMDWD]DZLHUDRGQLHVLHQLDGRZV]\VWNLFKHOHPHQWöZ<form>]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\HOHPHQW<form>QDVWURQLHPDUö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ÈHOHPHQWX<input>Zï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<form> 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\]PLDQLHXOHJQLHHOHPHQW<input>OXE<textarea> 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<form> %Ú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 <form> 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 <form id=”login” action=”/login” method=”post”>... <div class=”two-thirds column” id=”main”> ğHOGVHW! <legend>Logowanie</legend> <label for=”username”>1D]ZDXĝ\WNRZQLND</label> <input type=”text” id=”username” name=”username” /> <label for=”pwd”>+DVïR</label> <input type=”password” id=”pwd” name=”pwd” /> <input type=”submit” value=”Zaloguj” /> ğHOGVHW! </div> WZRWKLUGV! </form> ... <script src=”js/utilities.js”></script> <script src=”js/submit-event.js”></script> 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 <INPUT> :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<input> 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: <= IE8 nie umożliwia zmiany rodzaju elementu 10 -DN]REDF]\ïHĂZUR]G]LDOHEïÈGPRĝH VSRZRGRZDÊ]DWU]\PDQLHZ\NRQ\ZDQLDVNU\SWX -HĝHOLZLHV]ĝHFRĂPRĝHVSRZRGRZDÊEïÈG ZSHZQ\FKSU]HJOÈGDUNDFKWRXPLHV]F]HQLHNRGX ZNRQVWUXNFMLtry-catchSR]ZDODLQWHUSUHWHURZL QDNRQW\QXDFMÚG]LDïDQLDZUD]]DOWHUQDW\ZQ\P ]HVWDZHPNRGX USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH WYŚWIETLENIE HASŁA c13/input-type.html HTML ğHOGVHW! <legend>Logowanie</legend> <label for=”username”>1D]ZDXĝ\WNRZQLND</label> <input type=”text” id=”username” name=”username” /> <label for=”pwd”>+DVïR</label> <input type=”password” id=”pwd” name=”pwd” /> <input type=”checkbox” id=”showPwd”> <label for=”showPwd”>SRNDĝKDVïR</label> <input type=”submit” value=”Zaloguj” /> ğHOGVHW! <script src=”js/utilities.js”></script> <script src=”js/input-type.js”></script> JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 c13/js/input-type.js (function(){ var pwd = document.getElementById(’pwd’); 3REUDQLHSRODKDVïD var chk = document.getElementById(’showPwd’); 3REUDQLHSRODZ\ERUX addEvent(chk, ’change’, function(e) { *G\Xĝ\WNRZQLNNOLNQLHSROHZ\ERUX var target = e.target || e.srcElement; 3REUDQLHWHJRHOHPHQWX try { 3UöEDZ\NRQDQLDSRQLĝV]HJRIUDJPHQWXNRGX if (target.checked) { -HĝHOLSROHZ\ERUXMHVW]D]QDF]RQH pwd.type = ’text’; 3U]\SLVDQLHDWU\EXWRZLW\SHZDUWRĂFLWH[W } else { :SU]HFLZQ\PUD]LH pwd.type = ’password’; 3U]\SLVDQLHDWU\EXWRZLW\SHZDUWRĂFLSDVVZRUG } } catch(error) { -HĝHOL]PLDQDVSRZRGXMHZ\VWÈSLHQLHEïÚGX DOHUW ĳ3U]HJOÈGDUNDQLHPRĝH]PLHQLÊURG]DMXSRODĳ :\ĂZLHWOHQLHRGSRZLHGQLHJRNRPXQLNDWX } }); }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH PRZYCISKI WYSYŁAJĄCE FORMULARZ 3U]HGVWDZLRQ\WXWDMVNU\SWZ\ïÈF]\SU]\FLVN Z\V\ïDMÈF\IRUPXODU] 3RSLHUZV]\PZF]\WDQLXVNU\SWX=GDU]HQLH changeQDVWÚSQLHVSUDZG]DF]\SROHKDVïD XOHJïR]PLDQLHLZïÈF]DSU]\FLVNJG\Xĝ\WNRZQLN]DF]QLHZSLV\ZDÊKDVïR 3RZ\VïDQLXIRUPXODU]D DE\XQLHPRĝOLZLÊMHJR ZLHORNURWQHZ\VïDQLH • • 2 3 Utworzenie zmiennych: form: element <form> password: pole przeznaczone na hasło submit: przycisk wysyłający formularz submitted: przypisanie wartości false (formularz nie został wysłany) 4 Wyłączenie przycisku wysyłającego formularz oraz przypisanie atrybutowi class wartości disabled 5 Zdarzenie: input w polu hasła FUNKCJA ANONIMOWA: Sprawdzenie, czy przycisk wysyłający formularz powinien być włączony Pobranie elementu docelowego (pole hasła) 6 7 N Przypisanie właściwości disabled wartości false 3U]\FLVN]RVWDMHZ\ïÈF]RQ\]DSRPRFÈZïDĂFLZRĂFL disabled2GSRZLDGDRQDDWU\EXWRZL+70/ RQD]ZLHdisabledLPRĝHE\ÊVWRVRZDQDZGRZROQ\FKHOHPHQWDFKIRUPXODU]D]NWöU\PLSUDFXMH Xĝ\WNRZQLN:DUWRĂÊtrueWHMZïDĂFLZRĂFLSRZRGXMH 8 Z\ïÈF]HQLHSU]\FLVNXQDWRPLDVWfalseZïÈF]DJR 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. )RUPXODU]SROHWHNVWRZHGODKDVïDLSU]\FLVN Z\V\ïDMÈF\IRUPXODU]VÈSU]HFKRZ\ZDQH 9 Z]PLHQQ\FK 3. =PLHQQDsubmittedMHVWRNUHĂODQDPLDQHP opcjiSU]HFKRZXMHLQIRUPDFMHRW\PF]\IRUPXODU]]RVWDïMXĝZ\VïDQ\ 4. 3U]\FLVNZ\V\ïDMÈF\IRUPXODU]]RVWDMHZ\ïÈF]RQ\QDSRF]ÈWNXVNU\SWX ]DPLDVWZNRG]LH+70/ DZLÚFIRUPXODU]PRĝHE\ÊQDGDOIXQNFMRQDOQ\GOD 10 Xĝ\WNRZQLNöZNWöU]\Z\ïÈF]\OLREVïXJÚ-DYD6FULSW ZSU]HJOÈGDUNDFK 5. 2EVHUZDWRU]GDU]HñRF]HNXMHQD]GDU]HQLH inputZSROXSU]H]QDF]RQ\PQDSRGDQLHKDVïD LSRZRGXMHZ\ZRïDQLHIXQNFMLDQRQLPRZHM 6. (OHPHQWGRFHORZ\GOD]GDU]HQLDMHVWSU]HFKRZ\ZDQ\Z]PLHQQHMtarget 7. -HĝHOLZSROXSU]H]QDF]RQ\PQDKDVïR]RVWDïR FRNROZLHNZSLVDQHQDVWÚSXMHZïÈF]HQLHSU]\FLVNX Z\V\ïDMÈFHJRIRUPXODU] 8. 8DNWXDOQLHQLHVW\OX Czy formularz został wysłany? N T Przypisanie właściwości disabled wartości true Czy element docelowy ma wartość? Przypisanie atrybutowi class wartości disabled T Przypisanie atrybutowi class wartości enabled Zdarzenie: submit w elemencie <form> FUNKCJA ANONIMOWA: Sprawdzenie, czy formularz może być wysłany Czy przycisk wysyłający formularz jest wyłączony lub czy formularz został wysłany? N 12 Zezwolenie na wysłanie formularza, a następnie: • wyłączenie formularza • uaktualnienie zmiennej wskazującej, czy formularz został wysłany • przypisanie atrybutowi class wartości disabled USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH T 11 Uniemożliwienie wysłania formularza 9. 'UXJLREVHUZDWRU]GDU]HñVSUDZG]DF]\ Xĝ\WNRZQLNZ\VïDïIRUPXODU]:öZF]DVQDVWÚSXMH Z\NRQDQLHIXQNFMLDQRQLPRZHM 10. -HĝHOLSU]\FLVNZ\V\ïDMÈF\IRUPXODU]MHVW Z\ïÈF]RQ\OXEIRUPXODU]]RVWDïZ\VïDQ\QDVWÚSXMH Z\NRQDQLHGUXJLHJREORNXNRGX 11. 8QLHPRĝOLZLHQLHGRP\ĂOQHMDNFMLIRUPXODU]D Z\VïDQLH DVïRZRNOXF]RZHreturn powoduje RSXV]F]HQLHIXQNFML 12. -HĝHOLNURNQLH]RVWDïZ\NRQDQ\R]QDF]D WRĝHIRUPXODU]MHVWZ\VïDQ\ SU]\FLVNZ\V\ïDMÈF\IRUPXODU]MHVW c13/all-checkboxes.html HTML Z\ïÈF]RQ\]PLHQQDsubmitted <label for=”pwd”>1RZHKDVïR</label> MHVWXDNWXDOQLRQDZDUWRĂFLÈtrue <input type=”password” id=”pwd” /> DSRQDGWRXDNWXDOQLRQ\MHVWDWU\EXW LQSXWW\SH ĵVXEPLWĵLG ĵVXEPLWĵYDOXH ĵ:\ĂOLMĵ! classHOHPHQWX WYŁĄCZENIE PRZYCISKU WYSYŁAJĄCEGO FORMULARZ c13/js/disable-submit.js JAVASCRIPT 1 2 (function(){ var form var password var submit = document.getElementById(’newPwd’); = document.getElementById(’pwd’); = document.getElementById(’submit’); 3 var submitted = false; 4 submit.disabled = true; submit.className = ’disabled’; 5 6 7 8 9 10 11 12 )RUPXODU] 3ROHKDVïD 3U]\FLVNZ\V\ïDMÈF\IRUPXODU] &]\IRUPXODU]]RVWDïZ\VïDQ\" :\ïÈF]HQLHSU]\FLVNXZ\V\ïDMÈFHJRIRUPXODU] 1DGDQLHVW\OXSU]\FLVNRZLZ\V\ïDMÈFHPXIRUPXODU] =GDU]HQLHLQSXWVSUDZG]HQLHF]\QDOHĝ\ZïÈF]\ÊSU]\FLVNZ\V\ïDMÈF\IRUPXODU] addEvent(password, ’input’, function(e) { 3RZ\VWÈSLHQLX]GDU]HQLDLQSXWZSROXKDVïD var target = e.target || e.srcElement; (OHPHQWGRFHORZ\]GDU]HQLD submit.disabled = submitted || !target.value; 8VWDZLHQLHZïDĂFLZRĂFLGLVDEOHG -HĝHOLIRUPXODU]]RVWDïZ\VïDQ\OXESROHKDVïDMHVWSXVWHQDOHĝ\XVWDZLÊ ZDUWRĂÊ&66GLVDEOHG VXEPLWFODVV1DPH WDUJHWYDOXH__VXEPLWWHG "ĳGLVDEOHGĳĳHQDEOHGĳ }); =GDU]HQLHVXEPLWZ\ïÈF]HQLHIRUPXODU]DDE\QLHPöJïE\ÊSRQRZQLHZ\VïDQ\ addEvent(form, ’submit’, function(e) { 3RZ\VWÈSLHQLX]GDU]HQLDVXEPLW if (submit.disabled || submitted) { -HĝHOLSU]\FLVNMHVWZ\ïÈF]RQ\/8%IRUPXODU] ]RVWDïZ\VïDQ\ e.preventDefault(); =DWU]\PDQLHZ\V\ïDQLDIRUPXODU]D return; =DWU]\PDQLHSU]HWZDU]DQLDIXQNFML } :SU]HFLZQ\PUD]LHQDOHĝ\NRQW\QXRZDÊ submit.disabled = true; :\ïÈF]HQLHSU]\FLVNXZ\V\ïDMÈFHJRIRUPXODU] submitted = true; 8DNWXDOQLHQLH]PLHQQHMVXEPLWWHG submit.className = ’disabled’; 8DNWXDOQLHQLHVW\OX 7\ONRZFHODFKGHPRQVWUDF\MQ\FK]REDF]FR]RVWDïRZ\VïDQHLSU]HNRQDMVLÚ ĝHSU]\FLVNZ\V\ïDMÈF\IRUPXODU]MHVWZ\ïÈF]RQ\ e.preventDefault(); 8QLHPRĝOLZLHQLHZ\VïDQLDIRUPXODU]D DOHUW ĳ+DVïRWRĳSDVVZRUGYDOXH :\ĂZLHWOHQLHNRPXQLNDWX }); }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH POLA WYBORU 8. 3REUDQLHFHOXRSFMLNOLNQLÚWHMSU]H]Xĝ\WNRZQLND 9. 3RXVXQLÚFLX]D]QDF]HQLDRSFMLQDOHĝ\WDNĝH XVXQÈÊ]D]QDF]HQLHRSFMLWszystkie SRQLHZDĝ ZöZF]DVQLHVÈMXĝ]D]QDF]RQHZV]\VWNLHRSFMH 10. ,WHUDFMDSU]H]RSFMHLGRGDQLHREVHUZDWRUD ]GDU]Hñ*G\Z\VWÈSL]GDU]HQLHchange dla GRZROQHMRSFMLQDVWÚSXMHZ\ZRïDQLHIXQNFML clearAllOption() :W\PSU]\NïDG]LHSURVLP\Xĝ\WNRZQLNDDE\ ZVND]DïVZRMH]DLQWHUHVRZDQLD8ĝ\WNRZQLNPD PRĝOLZRĂÊ]D]QDF]HQLDOXEXVXQLÚFLD]D]QDF]HQLD ]HZV]\VWNLFKSöOZ\ERUX:NRG]LH]QDMGXMÈVLÚ GZLHSURFHGXU\REVïXJL]GDU]Hñ 3LHUZV]DMHVWZ\ZRï\ZDQDSR]D]QDF]HQLX wszystkichSöOZ\ERUX.RGSU]HSURZDG]D LWHUDFMHSU]H]RSFMHLXDNWXDOQLDMH 'UXJDMHVWZ\ZRï\ZDQDSR]PLDQLHopcji-HĝHOL ]MHGQHMRSFML]RVWDQLHXVXQLÚWH]D]QDF]HQLH QDOHĝ\WRVDPR]URELÊ]RSFMÈWszystkie • • 2 6 Utworzenie zmiennych: form: element <form> elements: element znajdujące się w <form> options: tablica pól wyboru all: pole wyboru pozwalające na włączenie lub wyłączenie wszystkich opcji Zdarzenie: change w elemencie, którego atrybut id ma wartość all 3 FUNKCJA: updateAll() Zaznacza lub usuwa zaznaczenie wszystkich pól wyboru 4 Iteracja przez wszystkie pola wyboru =GDU]HQLHchangePRĝQDZ\NRU]\VWDÊGRZ\NU\FLD ]PLDQ\ZDUWRĂFLSRODZ\ERUXSU]\FLVNXRSFMLOXE OLVW\UR]ZLMDQHM:RPDZLDQ\PSU]\NïDG]LHVïXĝ\ 5 RQRGRZVND]DQLDNLHG\Xĝ\WNRZQLN]D]QDF]\ïOXE XVXQÈï]D]QDF]HQLH]SRODZ\ERUX3ROHZ\ERUX PRĝHE\ÊXDNWXDOQLRQH]DSRPRFÈZïDĂFLZRĂFL checkedNWöUDRGSRZLDGDDWU\EXWRZL+70/ RQD]ZLHchecked 10 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. )RUPXODU]ZV]\VWNLHMHJRHOHPHQW\RSFMHRUD] 7 SROHZ\ERUXWszystkieSRODZ\ERUXVÈSU]HFKRZ\ZDQHZ]PLHQQ\FK 8 3. =DGHNODURZDQLHIXQNFMLupdateAll() 4. ,WHUDFMDSU]H]ZV]\VWNLHRSFMH 5. 'ODNDĝGHMRSFMLZïDĂFLZRĂÊcheckedRWU]\PXMH 9 WDNÈVDPÈZDUWRĂÊMDNZïDĂFLZRĂÊchecked w opcji Wszystkie 6. 2EVHUZDWRU]GDU]HñF]HNDDĝXĝ\WNRZQLN NOLNQLHSROHZ\ERUXWszystkieFRSRZRGXMH Z\ZRïDQLH]GDU]HQLDchangeLZ\ZRïDQLHIXQNFML updateAll() 7. =GHğQLRZDQLHIXQNFMLclearAllOption() USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH Przypisanie wszystkim polom wyboru tej samej wartości właściwości checked Przejście do kolejnego pola wyboru Iteracja przez wszystkie pola wyboru Zdarzenie: change w polu wyboru opcji FUNKCJA: clearAllOption() Usunięcie zaznaczenia opcji :V]\VWNLH Pobranie elementu klikniętego przez użytkownika N Czy nie jest zaznaczony? T Usunięcie zaznaczenia opcji :V]\VWNLH Przejście do kolejnego pola wyboru ZAZNACZENIE WSZYSTKICH PÓL WYBORU c13/all-checkboxes.html HTML <label><input <label><input <label><input <label><input type=”checkbox” type=”checkbox” type=”checkbox” type=”checkbox” c13/js/all-checkboxes.js JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 (function(){ var form var elements var options var all value=”all” id=”all”>Wszystkie</label> name=”genre” value=”animation”>Animowane</label> name=”genre” value=”docs”>Dokumentalne</label> name=”genre” value=”shorts”>.UöWNRPHWUDĝRZH</label> = = = = document.getElementById(’interests’); 3REUDQLHIRUPXODU]D form.elements; :V]\VWNLHHOHPHQW\ZIRUPXODU]X elements.genre; 7DEOLFDSRODZ\ERUX]DLQWHUHVRZDñ document.getElementById(’all’); 3ROHZ\ERUXĳ:V]\VWNLHĳ function updateAll() { for (var i = 0; i < options.length; i++) { ,WHUDFMDSU]H]SRODZ\ERUX options[i].checked = all.checked; 8DNWXDOQLHQLHZïDĂFLZRĂFLFKHFNHG } } addEvent(all, ’change’, updateAll); 'RGDQLHREVHUZDWRUD]GDU]Hñ function clearAllOption(e) { var target = e.target || e.srcElement; // Pobranie elementu docelowego GOD]GDU]HQLD if (!target.checked) { -HĝHOLHOHPHQWQLHMHVW]D]QDF]RQ\ all.checked = false; 8VXQLÚFLH]D]QDF]HQLDRSFMLĳ:V]\VWNLHĳ } } for (var i = 0; i < options.length; i++) { ,WHUDFMDSU]H]SRODZ\ERUX addEvent(options[i], ’change’, clearAllOption); 'RGDQLHREVHUZDWRUD]GDU]Hñ } }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH PRZYCISKI OPCJI 7HQSU]\NïDGSR]ZDODXĝ\WNRZQLNRZLQDZVND]DQLHěUöGïD]NWöUHJRGRZLHG]LDïVLÚRZLWU\QLH =DNDĝG\PUD]HPJG\Xĝ\WNRZQLNNOLNDSU]\FLVN RSFMLNRGVSUDZG]DRSFMÚZ\EUDQÈSU]H]Xĝ\WNRZQLNDLSRGHMPXMHMHGQR]GZöFKPRĝOLZ\FK G]LDïDñ -HĝHOLZ\EUDQRRSFMÚInne]RVWDQLHZ\ĂZLHWORQHSROHWHNVWRZHSR]ZDODMÈFHQDSRGDQLH GDOV]\FKLQIRUPDFMLV]F]HJöïRZ\FK -HĝHOLZ\EUDQRGRZROQÈ]SLHUZV]\FKGZöFK RSFMLSROHWHNVWRZH]RVWDQLHXNU\WHDMHJR ZDUWRĂÊEÚG]LHXVXQLÚWD • 8. -HĝHOLDWU\EXWhidePDZDUWRĂÊhide]DZDUWRĂÊSRODWHNVWRZHJR]RVWDMHXVXQLÚWD DE\SR Z\ĂZLHWOHQLXSROHWHNVWRZHE\ïRSXVWH 2 • 3 Utworzenie zmiennych: form: formularz options: wszystkie przyciski opcji other: tylko przycisk Inne otherText: tylko pole other-text hide: zawiera informacje o widoczności pola other-info Ustawienie atrybutowi class elementu other-text wartości, która ten element ukrywa Iteracja przez wszystkie przyciski opcji 4 Zdarzenie: click w tym elemencie przycisku opcji 5 FUNKCJA: radioChanged() Wyświetla lub ukrywa pole tekstowe 6 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRZRPDZLDQ\PGLDJUDPLH 2. ']LDïDQLHNRGXUR]SRF]\QDVLÚRGXVWDZLHQLD ]PLHQQ\FKSU]H]QDF]RQ\FKGRSU]HFKRZ\ZDQLD IRUPXODU]DZV]\VWNLFKSU]\FLVNöZRSFMLSU]\FLVNX GODRSFMLInneRUD]SRODWHNVWRZHJR 7 3. 3ROHWHNVWRZHMHVWXNU\WH.RG-DYD6FULSW XDNWXDOQLDZDUWRĂÊDWU\EXWXclassDE\IRUPXODU] QDGDOG]LDïDïQDZHWMHĂOLXĝ\WNRZQLNPDZSU]HJOÈGDUFHZ\ïÈF]RQÈREVïXJÚ-DYD6FULSW 8 4. =DSRPRFÈSÚWOLforREVHUZDWRU]GDU]Hñ ]RVWDMHGRGDQ\GRNDĝGHJRSU]\FLVNXRSFML3R NOLNQLÚFLXGRZROQHJRSU]\FLVNXRSFMLZ\ZRï\ZDQD MHVWIXQNFMDradioChanged() 5. =DGHNODURZDQLHIXQNFMLradioChanged() 6. 3RZ\EUDQLXSU]\FLVNXInneZDUWRĂFLÈ]PLHQQHM hideMHVWSXVW\FLÈJWHNVWRZ\:SU]HFLZQ\PUD]LH ZDUWRĂFLÈMHVWhide 7. =PLHQQDhideMHVWXĝ\ZDQDGRXVWDZLHQLD ZDUWRĂFLDWU\EXWXclassSRODWHNVWRZHJR%UDN ZDUWRĂFLR]QDF]DZ\EöULQQHMRSFML]NROHL ZDUWRĂÊhideSRZRGXMHXNU\FLHSRODWHNVWRZHJR 588 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH N Czy zaznaczony jest przycisk Inne? Przypisanie zmiennej hide wartości hide T Usunięcie wartości zmiennej hide Przypisanie atrybutowi class wartości zmiennej hide N Czy wartość zmiennej hidden jest truthy? T Usunięcie tekstu elementu Przejście do kolejnego przycisku opcji PRZYCISKI OPCJI c13/show-option.html HTML <form id=”how-heard” action=”/heard” method=”post”> ... <input type=”radio” name=”heard” value=”search” id=”search” /> <label for=”search”>Wyszukiwarka internetowa</label><br> <input type=”radio” name=”heard” value=”print” id=”print” /> <label for=”print”>Gazeta lub magazyn</label><br> <input type=”radio” name=”heard” value=”other” id=”other” /> <label for=”other”>Inne</label><br> <input type=”text” name=”other-input” id=”other-text” /> LQSXWLG ĵVXEPLWĵW\SH ĵVXEPLWĵYDOXH ĵ:\ĂOLMĵ! ... </form> c13/js/show-option.js JAVASCRIPT 1 2 (function(){ var form, options, other, otherText, hide; form = document.getElementById(’how-heard’); options = form.elements.heard; other = document.getElementById(’other’); otherText = document.getElementById(’other-text’); =DGHNODURZDQLH]PLHQQ\FK // Pobranie formularza 3REUDQLHSU]\FLVNöZRSFML 3U]\FLVN,QQH // Pole tekstowe pod SU]\FLVNLHP,QQH 8NU\FLHSRODWHNVWRZHJR 3 otherText.className = ’hide’; 4 for (var i = [0]; i < options.length; i++) { ,WHUDFMDSU]H]SU]\FLVNLRSFML addEvent(options[i], ’click’, radioChanged); 'RGDQLHREVHUZDWRUD]GDU]Hñ } 5 6 7 8 function radioChanged() { KLGH RWKHUFKHFNHG"ĳĳĳKLGHĳ&]\]D]QDF]RQ\MHVWSU]\FLVN,QQH" otherText.className = hide; :LGRF]QRĂÊSRODWHNVWRZHJR if (hide) { -HĝHOLSROHWHNVWRZHMHVWXNU\WH otherText.value = ’’; QDOHĝ\XVXQÈÊMHJR]DZDUWRĂÊ } } }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH LISTY ROZWIJANE (OHPHQW<select>MHVW]QDF]QLHEDUG]LHMVNRPSOLNRZDQ\QLĝLQQHNRQWURONL IRUPXODU]\:Ú]HïPRGHOX'20NRQWURONL<select>PDZLHOHGRGDWNRZ\FK ZïDĂFLZRĂFLLPHWRG(OHPHQW\<option>NRQWURONL]DZLHUDMÈZDUWRĂFL NWöUHPRJÈE\ÊZ\ELHUDQHSU]H]Xĝ\WNRZQLND :RPDZLDQ\PSU]\NïDG]LH]QDMGXMÈVLÚGZLH OLVW\UR]ZLMDQH.LHG\Xĝ\WNRZQLNZ\ELHU]HRSFMÚ ]SLHUZV]HMOLVW\GUXJD]RVWDQLHXDNWXDOQLRQD RGSRZLHGQLPLRSFMDPL :SLHUZV]HMOLĂFLHUR]ZLMDQHMXĝ\WNRZQLNPRĝH Z\EUDÊZ\SRĝ\F]HQLHDSDUDWXIRWRJUDğF]QHJROXE SURMHNWRUD3RGRNRQDQLXZ\ERUXRGSRZLHGQLHRSFMH]RVWDMÈXPLHV]F]RQHZGUXJLHMOLĂFLHUR]ZLMDQHM 3RQLHZDĝWHQSU]\NïDGMHVWQLHFREDUG]LHMVNRPSOLNRZDQ\QLĝSU]HGVWDZLRQHGRWÈGZUR]G]LDOHNRG +70/LU\VXQHNSRND]DQRQDVWURQLHSRSUDZHM QDWRPLDVWRPöZLHQLHSOLNX-DYD6FULSW]QDMG]LHV] ZSRGUR]G]LDOHķ/LVW\UR]ZLMDQHĵ .LHG\Xĝ\WNRZQLNZ\ELHU]HRSFMÚ]OLVW\UR]ZLMDQHMQDVWÚSXMHZ\ZRïDQLH]GDU]HQLDchange =GDU]HQLHWRMHVWF]ÚVWRZ\NRU]\VW\ZDQHGR XUXFKDPLDQLDVNU\SWöZJG\Xĝ\WNRZQLN]PLHQL ZDUWRĂÊQDOLĂFLHUR]ZLMDQHM (OHPHQW<select>PDUöZQLHĝSHZQHGRGDWNRZH ZïDĂFLZRĂFLLPHWRG\FKDUDNWHU\VW\F]QHGODWHM NRQWURONLZ\PLHQLRQRMHZSRQLĝV]\FKWDEHODFK -HĝHOLFKFHV]PLHÊPRĝOLZRĂÊSUDF\]SRV]F]HJöOQ\PLRSFMDPLNWöUHPRJÈE\ÊZ\ELHUDQHSU]H] Xĝ\WNRZQLNDVNRU]\VWDM]NROHNFMLHOHPHQWöZ <option> :$¥&,:2¥m 23,6 options .ROHNFMDZV]\VWNLFKHOHPHQWöZ<option> selectedIndex 1XPHULQGHNVXRSFMLNWöUDMHVWDNWXDOQLHZ\EUDQD length /LF]EDGRVWÚSQ\FKRSFML multiple 3R]ZDODXĝ\WNRZQLNRZLQDZ\EöUZLHOXRSFML]OLVW\ WDNDPRĝOLZRĂÊMHVWU]DGNR VWRVRZDQDSRQLHZDĝQLH]DSHZQLDQDMOHSV]\FKZUDĝHñXĝ\WNRZQLNRP selectedOptions .ROHNFMDZV]\VWNLFKZ\EUDQ\FKHOHPHQWöZ<option> 0(72'$ 23,6 add(option, before) 'RGDQLHHOHPHQWXGROLVW\ 3LHUZV]\PSDUDPHWUHPMHVWQRZDRSFMDQDWRPLDVWGUXJDWRHOHPHQWSU]HG NWöU\PPD]RVWDÊZVWDZLRQ\QRZ\:SU]\SDGNXEUDNXZDUWRĂFLGUXJLHJR SDUDPHWUXQRZDRSFMD]RVWDQLHGRGDQDQDNRñFXLVWQLHMÈF\FK remove(index) 8VXQLÚFLHHOHPHQWX]OLVW\ 0HWRGDPDW\ONRMHGHQSDUDPHWUĽQXPHULQGHNVXRSFMLSU]H]QDF]RQHMGR XVXQLÚFLD USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH LISTY ROZWIJANE c13/populate-selectbox.html HTML <label for=”equipmentType”>rodzaj</label> <select id=”equipmentType” name=”equipmentType”> <option value=”choose”>3URV]ÚZ\EUDÊURG]DM</option> <option value=”cameras”>DSDUDWIRWRJUDğF]Q\</option> <option value=”projectors”>projektor</option> </select><br> <label for=”model”>model</label> <select id=”model” name=”model”> <option>3URV]ÚQDMSLHUZZ\EUDÊURG]DMVSU]ÚWX</option> </select> LQSXWLG ĵVXEPLWĵW\SH ĵVXEPLWĵYDOXH ĵ:\ĂOLMĵ! WYNIK 1 2 3 4 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH LISTY ROZWIJANE 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. =PLHQQHSU]HFKRZXMÈGZLHOLVW\UR]ZLMDQH 3. 8WZRU]HQLHGZöFKRELHNWöZSU]H]QDF]RQ\FK GRSU]HFKRZ\ZDQLDRSFMLXPLHV]F]DQ\FKQD GUXJLHMOLĂFLHUR]ZLMDQHM SLHUZV]\RELHNW]DZLHUD PRGHOHDSDUDWöZIRWRJUDğF]Q\FKQDWRPLDVWGUXJL ĽSURMHNWRUöZ 4. .LHG\Xĝ\WNRZQLN]PLHQLZDUWRĂÊQDSLHUZV]HM OLĂFLHUR]ZLMDQHMREVHUZDWRU]GDU]HñZ\ZRïXMH IXQNFMÚDQRQLPRZÈ 5. )XQNFMDDQRQLPRZDVSUDZG]DF]\SLHUZV]D OLVWDUR]ZLMDQDPDZDUWRĂÊchoose 6. -HĝHOLWDNGUXJDOLVWDUR]ZLMDQDMHVWXDNWXDOQLDQDSRSURVWXMHGQÈRSFMÈNWöUDLQIRUPXMH Xĝ\WNRZQLNDRPRĝOLZRĂFLZ\ERUXW\SX 7. 1LHMHVWZ\PDJDQHGDOV]HSU]HWZDU]DQLHLVïRZR NOXF]RZHreturnSRZRGXMHRSXV]F]HQLHIXQNFML DQRQLPRZHM DĝGRFKZLOLJG\Xĝ\WNRZQLNSRQRZQLH]PLHQLZDUWRĂÊSLHUZV]HMOLVW\UR]ZLMDQHM 8. -HĝHOLZ\EUDQ\]RVWDQLHURG]DMVSU]ÚWXIXQNFMD DQRQLPRZDNRQW\QXXMHG]LDïDQLHLQDVWÚSXMH XWZRU]HQLH]PLHQQHMmodels3U]HFKRZ\ZDQ\ EÚG]LHMHGHQ]RELHNWöZ]GHğQLRZDQ\FK ZNURNX DSDUDW\IRWRJUDğF]QHOXESURMHNWRU\ 2GSRZLHGQLRELHNWMHVWSRELHUDQ\]DSRPRFÈ IXQNFMLgetModels()]DGHNODURZDQHMQDNRñFX VNU\SWX )XQNFMDSRELHUDMHGHQSDUDPHWUthis.valueRGSRZLDGDMÈF\ZDUWRĂFLRSFML Z\EUDQHMZSLHUZV]HMOLĂFLHUR]ZLMDQHM 9. :HZQÈWU]IXQNFMLgetModels()SROHFHQLHif VSUDZG]DF]\SU]HND]DQÈZDUWRĂFLÈMHVWcameras -HĝHOLWDNZDUWRĂFLÈ]ZURWQÈEÚG]LHRELHNW cameras 10. -HĝHOLQLHSROHFHQLHifNRQW\QXXMHG]LDïDQLH LVSUDZG]DF]\SU]HND]DQÈZDUWRĂFLÈMHVW projectors-HĝHOLWDNZDUWRĂFLÈ]ZURWQÈEÚG]LH RELHNWprojectors 11. 8WZRU]HQLH]PLHQQHMRQD]ZLHoptions 3U]HFKRZXMHRQDZV]\VWNLHHOHPHQW\<option> GODGUXJLHMOLVW\UR]ZLMDQHM.LHG\WD]PLHQQDMHVW WZRU]RQDQDVWÚSXMHGRGDQLHGRQLHMSLHUZV]HM opcji <option>,QIRUPXMHRQDXĝ\WNRZQLND RPRĝOLZRĂFLZ\ERUXURG]DMXVSU]ÚWX 12. 3ÚWODforSU]HSURZDG]DLWHUDFMÚSU]H]]DZDUWRĂÊRELHNWXXPLHV]F]RQHJRZ]PLHQQHMmodels NURNLRGGR :HZQÈWU]SÚWOLkeyRGQRVL VLÚGRSRV]F]HJöOQ\FKHOHPHQWöZZRELHNFLH 2 3 4 Utworzenie zmiennych: type i model przechowują listy rozwijane Utworzenie obiektów: cameras i projectors przechowują listy wyposażenia Zdarzenie: change na liście rozwijanej do wyboru rodzaju urządzenia FUNKCJA ANONIMOWA: Wypełnia listę rozwijaną 5 N Czy wartością jest choose? T 6 Wywołanie getModels() i przechowywanie w zmiennej models dopasowanego obiektu Dodanie elementu <option> o treści 3URV]Ú QDMSLHUZZ\EUDÊ URG]DMVSU]ÚWX 7 11 Utworzenie zmiennej: options Dodanie elementu <option> o treści 3URV]Ú Z\EUDÊPRGHO 12 Iteracja przez wszystkie klucze w obiekcie Dodanie elementu <option> 13 Przejście do następnego klucza w obiekcie Po pętli: uaktualnienie <select> 14 FUNKCJA: getModels() Pobranie modeli dla wybranego rodzaju sprzętu 9 N Czy użytkownik szukał aparatu fotograficznego? T Zwróć obiekt: cameras 10 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH N Czy użytkownik szukał projektora? T Zwróć obiekt: projectors LISTY ROZWIJANE 13. (OHPHQW<option>MHVWWZRU]RQ\GODNDĝGHJR HOHPHQWXZRELHNFLH$WU\EXWvalueXĝ\ZDQD]Z\ ZïDĂFLZRĂFL]RELHNWX=DZDUWRĂÊXPLHV]F]DQDPLÚG]\]QDF]QLNDPL<option>WRZDUWRĂÊZïDĂFLZRĂFL JAVASCRIPT 1 2 3 4 5 6 7 8 11 12 13 14 9 10 14. 2SFMH]RVWDMÈGRGDQHGRGUXJLHMOLVW\UR]ZLMDQHM]Z\NRU]\VWDQLHPZïDĂFLZRĂFLinnerHTML c13/js/populate-selectbox.js (function(){ var type = document.getElementById(’equipmentType’); // 5RG]DMOLVW\UR]ZLMDQHM var model = document.getElementById(’model’); /LVWDUR]ZLMDQDGRZ\ERUXPRGHOX var cameras = { 2ELHNWSU]HFKRZXMÈF\GRVWÚSQHDSDUDW\IRWRJUDğF]QH EROH[ĳ%ROH[3DLOODUG+ĳ \DVKLFDĳ<DVKLFDĳ SDWKHVFDSHĳ3DWKHVFDSH6XSHU5HOD[ĳ FDQRQĳ&DQRQĳ }; var projectors = { 2ELHNWSU]HFKRZXMÈF\GRVWÚSQHSURMHNWRU\ NRGDNĳ.RGDN,QVWDPDWLF0ĳ EROH[ĳ%ROH[6RXQGĳ HXPLJĳ(XPLJ0DUN6ĳ VDQN\Rĳ6DQN\R'XDOX[ĳ }; .LHG\Xĝ\WNRZQLN]PLHQLZDUWRĂÊSLHUZV]HMOLVW\UR]ZLMDQHM addEvent(type, ’change’, function() { if (this.value === ’choose’) { 1LHGRNRQDQRZ\ERUX PRGHOLQQHU+70/ ĳRSWLRQ!3URV]ÚQDMSLHUZZ\EUDÊURG]DMVSU]ÚWXRSWLRQ!ĳ return; 1LHPDSRWU]HE\GDOV]HJRSU]HWZDU]DQLD } var models = getModels(this.value); :\EöURGSRZLHGQLHJRRELHNWX ,WHUDFMDSU]H]RSFMHZRELHNFLHZFHOXXWZRU]HQLDRSFMLGODOLVW\ YDURSWLRQV ĳRSWLRQ!3URV]ÚZ\EUDÊPRGHORSWLRQ!ĳ for (var key in models) { ,WHUDFMDSU]H]PRGHOH options += ’<option value=”’ + key + ’”>’ + models[key] + ’</option>’; } -HĝHOLRSFMDPRĝH]DZLHUDÊ]QDNF\WRZDQLDNOXF]SRZLQLHQE\Ê XQLHV]NRGOLZLRQ\ model.innerHTML = options; 8DNWXDOQLHQLHGUXJLHMOLVW\UR]ZLMDQHM }); function getModels(equipmentType) { if (equipmentType === ’cameras’) { -HĝHOLZ\EUDQRDSDUDWIRWRJUDğF]Q\ return cameras; QDOHĝ\]ZUöFLÊRELHNWFDPHUDV } else if (equipmentType === ’projectors’) { -HĝHOLZ\EUDQRSURMHNWRU\ return projectors; QDOHĝ\]ZUöFLÊRELHNWSURMHFWRUV } } }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 593 WIELOWIERSZOWE POLE TEKSTOWE :W\PSU]\NïDG]LHXĝ\WNRZQLNPRĝHSRGDÊ LQIRUPDFMHRVRELHZ\NRU]\VWXMÈFGRWHJR PDNV\PDOQLH]QDNöZ.LHG\NXUVRU]QDMGXMH VLÚZZLHORZLHUV]RZ\PSROXWHNVWRZ\PHOHPHQW <span>EÚG]LHZ\ĂZLHWORQ\ZUD]]OLF]EÈ]QDNöZ SR]RVWDï\FKGRXĝ\FLD*G\ZLHORZLHUV]RZHSROH WHNVWRZHSU]HVWDQLHE\ÊDNW\ZQHNRPXQLNDW LQIRUPXMÈF\ROLF]ELHSR]RVWDï\FK]QDNöZ]RVWDQLH XNU\W\ 2 Utworzenie zmiennych: bio: element <textarea> na informacje o użytkowniku bioCount: element wyświetlający liczbę pozostałych znaków 3 Zdarzenia: focus i input w elemencie <textarea> 6 FUNKCJA: updateCounter() Uaktualnia licznik i (lub) komunikat 7 Pobranie elementu docelowego dla zdarzenia (<textarea>) 8 Utworzenie zmiennej: count: wynik przeprowadzonego obliczenia (140 minus liczba znaków w elemencie <textarea>) 9 Czy zmienna count ma wartość mniejszą niż 0? 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. 8WZRU]HQLHGZöFK]PLHQQ\FKSU]H]QDF]RQ\FK GRSU]HFKRZ\ZDQLDRGQLHVLHQLDGRHOHPHQWX <textarea>RUD]HOHPHQWX<span>]DZLHUDMÈFHJR NRPXQLNDW 3. 'ZDREVHUZDWRU\]GDU]HñPRQLWRUXMÈHOHPHQW <textarea>3LHUZV]\F]HNDDĝZLHORZLHUV]RZH SROHWHNVWRZHVWDQLHVLÚDNW\ZQHZöZF]DVGUXJL RF]HNXMHQD]GDU]HQLHinput2EDZ\ZRïXMÈ IXQNFMÚRQD]ZLHupdateCounter()RPöZLRQÈ ZNURNDFKRGGR=GDU]HQLHinputQLH G]LDïDZ,(DOHREVïXJÚVWDUV]\FKSU]HJOÈGDUHN 10 PRĝQD]DSHZQLÊSU]\Xĝ\FLX]GDU]HQLDkeyup 4. 7U]HFLREVHUZDWRU]GDU]HñZ\ZRïXMHIXQNFMÚ DQRQLPRZÈJG\Xĝ\WNRZQLNRSXĂFLHOHPHQW 11 <textarea> 5. -HĝHOLOLF]ED]QDNöZZ\QRVLOXEMHVW 4 PQLHMV]DLORĂÊLQIRUPDFMLZSURZDG]DQ\FKSU]H] Xĝ\WNRZQLNDMHVWDNFHSWRZDQDLQDVWÚSXMHXNU\FLH NRPXQLNDWX SRQLHZDĝQLHPDNRQLHF]QRĂFL MHJRZ\ĂZLHWODQLDJG\Xĝ\WNRZQLNQLHSUDFXMH ]HOHPHQWHP<textarea> 6. =DGHNODURZDQLHIXQNFMLupdateCounter() 5 7. 3REUDQLHRGQLHVLHQLDGRHOHPHQWXNWöU\ Z\ZRïDïIXQNFMÚ N T Dodaj klasę error N Czy zmienna count ma wartość mniejszą lub równą ? Dodaj klasę good T Dodaj klasę warn Utworzenie zmiennej: charMsg: komunikat zawierający informacje o pozostałej liczbie znaków Wyświetlenie komunikatu na ekranie Zdarzenie: blur w elemencie <textarea> FUNKCJA ANONIMOWA: Ukrycie licznika N Czy zmienna count ma wartość mniejszą lub równą 140? T Ukrycie licznika 594 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH LICZNIK ZNAKÓW 9. =PLHQQDRQD]ZLHcountSU]HFKRZXMHOLF]EÚ ]QDNöZSR]RVWDï\FKGRZ\NRU]\VWDQLD MHVWRQD REOLF]DQDSU]H]RGMÚFLHOLF]E\Xĝ\W\FKGRWÈG ]QDNöZRGZDUWRĂFL140 9. .RQVWUXNFMDif-elseMHVWXĝ\WDGRXVWDZLHQLD NODV\&66HOHPHQWX]DZLHUDMÈFHJRNRPXQLNDW PRĝHUöZQLHĝZ\ĂZLHWOLÊNRPXQLNDWMHĂOLMHVWRQ XNU\W\ 10. =PLHQQDRQD]ZLHcharMsg]RVWDMHXWZRU]RQD LMHVWSU]H]QDF]RQDGRSU]HFKRZ\ZDQLDNRPXQLNDWXZ\ĂZLHWODQHJRXĝ\WNRZQLNRZL 11. .RPXQLNDW]RVWDMHZ\ĂZLHWORQ\QDVWURQLH c13/textarea-counter.html HTML <label for=”bio”>Krótko o sobie (maksymalnie 140 znaków)</label> WH[WDUHDQDPH ĵELRĵLG ĵELRĵURZV ĵĵFROV ĵĵ!WH[WDUHD! <span id=”bio-count” class=”hide”></span> ... <script src=”js/utilities.js”></script> <script src=”js/textarea-counter.js”></script> c13/js/textarea-counter.js JAVASCRIPT 1 2 (function () { var bio = document.getElementById(’bio’); (OHPHQWWH[WDUHD! var bioCount = document.getElementById(’bio-count’);(OHPHQWOLF]QLND]QDNöZ addEvent(bio, ’focus’, updateCounter); 3 addEvent(bio, ’input’, updateCounter); 4 addEvent(bio, ’blur’, function () { if (bio.value.length <= 140) { bioCount.className = ’hide’; } }); 5 6 7 8 9 10 11 :\ZRïDQLHXSGDWH&RXQWHU SR SRZ\VWÈSLHQLX]GDU]HQLDIRFXV :\ZRïDQLHXSGDWH&RXQWHU SRZ\VWÈSLHQLX]GDU]HQLDLQSXW 3RRSXV]F]HQLXHOHPHQWX -HĝHOLZSURZDG]RQHLQIRUPDFMHQLHVÈ]DGïXJLH 8NU\FLHOLF]QLND function updateCounter(e) { var target = e.target || e.srcElement; 3REUDQLHFHOX]GDU]HQLD var count = 140 - target.value.length; /LF]ED]QDNöZSR]RVWDï\FKGRXĝ\FLD if (count < 0) { -HĝHOLSR]RVWDïRPQLHMQLĝ]QDNöZ bioCount.className = ’error’; ZWHG\QDOHĝ\GRGDÊNODVÚHUURU `HOVHLI FRXQW ^-HĝHOLSR]RVWDïRPQLHMQLĝ]QDNöZ bioCount.className = ’warn’; QDOHĝ\GRGDÊNODVÚZDUQ } else { :SU]HFLZQ\PUD]LH bioCount.className = ’good’; QDOHĝ\GRGDÊNODVÚJRRG } var charMsg = ’<b>’ + count + ’</b>’ + ’ znaków’; .RPXQLNDWGRZ\ĂZLHWOHQLD bioCount.innerHTML = charMsg; 8DNWXDOQLHQLHHOHPHQWXOLF]QLND } }()); USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 595 ELEMENTY I ATRYBUTY HTML5 :VSHF\ğNDFML+70/ZSURZDG]RQRHOHPHQW\IRUPXODU]DLDWU\EXW\ SU]H]QDF]RQHGRZ\NRQ\ZDQLD]DGDñNWöUHSRSU]HGQLRE\ï\UHDOL]RZDQH ]Z\NRU]\VWDQLHPMÚ]\ND-DYD6FULSW-HGQDNLFKZ\JOÈGPRĝHZGXĝHMPLHU]H ]DOHĝHÊRGSU]HJOÈGDUNLLQWHUQHWRZHM GRW\F]\WR]ZïDV]F]DNRPXQLNDWöZ REïÚGDFK WYSZUKIWANIE E-MAIL, ADRES URL, NUMER TELEFONU LICZBA <input type=”search” <input type=”email”> placeholder=”Wyszukiwanie...” <input type=”url”> autofocus> <input type=”telephone”> <input type=”number” min=”0” max=”10” VWHS ĵĵ value=”6”> SAFARI SAFARI SAFARI FIREFOX FIREFOX FIREFOX CHROME CHROME CHROME 6DIDUL]DRNUÈJODNUDZÚG]LH ZHZV]\VWNLFKSRODFKWHNVWR Z\FKZ\V]XNLZDQLDFRPD MHXSRGREQLÊGRLQWHUIHMVX Xĝ\WNRZQLNDZV\VWHPLH RSHUDF\MQ\P3RGF]DVZSURZD G]DQLDWHNVWX6DIDULZ\ĂZLHWOD LNRQÚNU]\ĝ\NDNWöUHMNOLNQLÚFLH SR]ZDODXĝ\WNRZQLNRZLQD XVXQLÚFLH]DZDUWRĂFLSROD ,QQHSU]HJOÈGDUNLZ\ĂZLHWODMÈ SROHZ\V]XNLZDQLDZWDNLVDP VSRVöEMDNZV]\VWNLHSR]RVWDïH SROD 3RODWHNVWRZHGODDGUHVX HPDLO85/LQXPHUX WHOHIRQXZ\JOÈGDMÈSRGREQLH MDNZV]\VWNLHSR]RVWDïHSROD DOHSU]HJOÈGDUNDVSUDZG]D ZSURZDG]DQHZQLFKGDQH0D WRQDFHOXXVWDOHQLHF]\GDQH VÈZSUDZLGïRZ\PIRUPDFLH -HĝHOLIRUPDWMHVWQLHSUDZLG ïRZ\QDVWÚSXMHZ\ĂZLHWOHQLH RGSRZLHGQLHJRNRPXQLNDWX :SRODFKWHNVWRZ\FKGOD OLF]EF]DVDPLVÈGRGDZDQH VWU]DïNL W]ZHOHPHQW\ spinbox SR]ZDODMÈFHQD ]ZLÚNV]HQLHOXE]PQLHMV]HQLH ZSURZDG]RQHMOLF]E\,VWQLHMH PRĝOLZRĂÊRNUHĂOHQLDZDUWRĂFL PLQLPDOQHMPDNV\PDOQHM ZDUWRĂFLLQNUHPHQWDFMLRUD] ZDUWRĂFLSRF]ÈWNRZHM3U]HJOÈ GDUNDVSUDZG]DF]\Xĝ\WNRZQLN IDNW\F]QLHZSURZDG]LïOLF]EÚ -HĝHOLQLHQDVWÚSXMHZ\ĂZLHWOH QLHRGSRZLHGQLHJRNRPXQLNDWX 596 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH ATRYBUT OPIS autofocus Aktywuje dany element po wczytaniu strony. placeholder =DZDUWRĂÊWHJRDWU\EXWXMHVWZ\ĂZLHWODQDZHOHPHQFLH<input>MDNRSRGSRZLHGě SDWU] SRGUR]G]LDïķ5R]ZLÈ]DQLHDZDU\MQHGODDWU\EXWXSODFHKROGHUĵ required 6SUDZG]DF]\SROHPDZDUWRĂÊĽPRĝHWRE\ÊZSURZDG]RQ\WHNVWOXEZ\EUDQDRSFMD SDWU]SRGUR]G]LDïķ:\PDJDQHHOHPHQW\IRUPXODU]Dĵ min 0LQLPDOQDGR]ZRORQDZDUWRĂÊ max 0DNV\PDOQDGR]ZRORQDZDUWRĂÊ step :DUWRĂÊRMDNÈPRJÈVLÚ]ZLÚNV]DÊOXE]PQLHMV]DÊOLF]E\ value :DUWRĂÊGRP\ĂOQDGODOLF]E\SRGF]DVSLHUZV]HJRZF]\WDQLDNRQWURONLQDVWURQLH autocomplete :ïÈF]RQDGRP\ĂOQLHZ\ĂZLHWODOLVWÚSRSU]HGQLRXĝ\W\FKZDUWRĂFL Z\ïÈF]RQDGOD QXPHUöZNDUWNUHG\WRZ\FKRUD]LQQ\FKGDQ\FKZUDĝOLZ\FK pattern 3R]ZDODQDRNUHĂOHQLHZ\UDĝHQLDUHJXODUQHJRSU]H]QDF]RQHJRGRZHU\ğNDFMLZDUWRĂFL SDWU]SRGUR]G]LDïķ:\UDĝHQLDUHJXODUQHĵ novalidate 8ĝ\ZDQDZHOHPHQFLH<form>GRZ\ïÈF]HQLDZHU\ğNDFMLRIHURZDQHMSU]H]+70/ SDWU] SRGUR]G]LDïķ2JöOQHRPöZLHQLHNRGXĵ ZAKRES KONTROLKA WYBORU KOLORU DATA <input type=”range” min=”0” max=”10” step=”2” value=”6”> <input type=”color”> <input <input <input <input <input SAFARI CHROME CHROME type=”date”> SRQLĝHM type=”month”> type=”week”> type=”time”> type=”datetime”> FIREFOX CHROME .RQWUROND]DNUHVXRIHUXMHLQQ\ VSRVöEZSURZDG]DQLDOLF]E\ W\PUD]HP]DSRPRFÈsuwaka. 3RGREQLHMDNZSU]\SDGNX HOHPHQWXVSLQER[LVWQLHMHWX PRĝOLZRĂÊRNUHĂOHQLDZDUWRĂFL minimalnej, maksymalnej, SRF]ÈWNRZHMRUD]LQNUHPHQWDFML RMDNLH]PLHQLDVLÚZDUWRĂÊ *G\SRZVWDZDïDWDNVLÈĝND &KURPHL2SHUDE\ï\MHG\Q\PL SU]HJOÈGDUNDPLZNWöU\FK ]DLPSOHPHQWRZDQRWÚNRQWURO NÚ3R]ZDODRQDQDZVND]DQLH NRORUX.LHG\Xĝ\WNRZQLNNOLNQLH WÚNRQWURONÚSU]HJOÈGDUND Z\ĂZLHWOLSUDZGRSRGREQLH GRP\ĂOQÈZV\VWHPLHNRQWURONÚ SU]H]QDF]RQÈGRZ\ERUX NRORUX ]Z\MÈWNLHPV\VWHPX /LQX[ZNWöU\PRIHURZDQD MHVW]QDF]QLHSURVWV]DSDOHWD :VWDZLDQDMHVWZDUWRĂÊ V]HVQDVWNRZDNRORUXZ\EUDQHJR SU]H]Xĝ\WNRZQLND ,VWQLHMHZLHOHUöĝQ\FKNRQWUROHN SU]H]QDF]RQ\FKGRZVWDZLDQLD GDW\*G\SRZVWDZDïDWD NVLÈĝND&KURPHE\ïMHG\QÈ SU]HJOÈGDUNÈZNWöUHM]DLPSOH PHQWRZDQRWÚNRQWURONÚ USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 597 OBSŁUGA I STYLE (OHPHQW\IRUPXODU]\+70/QLHVÈREVïXJLZDQHZHZV]\VWNLFK SU]HJOÈGDUNDFK1DZHWNLHG\VÈSRODWHNVWRZHLNRPXQLNDW\REïÚGDFK PRJÈZ\JOÈGDÊRGPLHQQLH PRZEGLĄDARKI W KOMPUTERACH BIUROWYCH PRZEGLĄDARKI W URZĄDZENIACH MOBILNYCH *G\SRZVWDZDïDWDNVLÈĝNDZLHOXSURJUDPLVWöZ Xĝ\ZDïRNRGX-DYD6FULSW]DPLDVWQRZ\FKIXQNFML ZSURZDG]RQ\FKZ+70/Ľ]Z\PLHQLRQ\FK SRQLĝHMSRZRGöZ :XU]ÈG]HQLDFKPRELOQ\FKV\WXDFMDMHVW]QDF]QLH LQQDSRQLHZDĝZLÚNV]RĂÊQRZRF]HVQ\FKSU]HJOÈGDUHN ]DSHZQLDREVïXJÚQDMZDĝQLHMV]\FKHOHPHQWöZ HTML5; Z\ĂZLHWODNODZLDWXUÚGRVWRVRZDQÈGRURG]DMX SRODQDSU]\NïDGW\SemailSRZRGXMHZ\ĂZLHWOHQLHNODZLDWXU\]H]QDNLHP@QDWRPLDVW numberZ\ĂZLHWODNODZLDWXUÚQXPHU\F]QÈ XGRVWÚSQLDXĝ\WHF]QHZHUVMHNRQWURONLZ\ERUX GDW\ 'ODWHJRWHĝZSU]HJOÈGDUNDFKZXU]ÈG]HQLDFK PRELOQ\FKQRZHHOHPHQW\+70/LW\S\NRQWUROHN GDQ\FKZHMĂFLRZ\FKSRZRGXMÈĝHIRUPXODU]H VLHFLRZHFKDUDNWHU\]XMÈVLÚZLÚNV]ÈGRVWÚSQRĂFLÈ LXĝ\WHF]QRĂFLÈGODRGZLHG]DMÈF\FKGDQÈVWURQÚ • 6WDUV]HSU]HJOÈGDUNLQLHREVïXJXMÈQRZ\FK URG]DMöZSöOGDQ\FKZHMĂFLRZ\FK ZLFK PLHMVFXZ\ĂZLHWODMÈSRSURVWXSROHWHNVWRZH • 3RV]F]HJöOQHSU]HJOÈGDUNLZ\ĂZLHWODMÈHOHPHQW\ LNRPXQLNDW\REïÚGDFKQDUöĝQHVSRVRE\ DSURMHNWDQFLEDUG]RF]ÚVWRFKFÈ]DSHZQLÊ Xĝ\WNRZQLNRPDSOLNDFMÚVSöMQLHZ\JOÈGDMÈFÈ LG]LDïDMÈFÈZUöĝQ\FKSU]HJOÈGDUNDFK 3RQLĝHMPRĝHV]]REDF]\ÊĝHNRPXQLNDW\ REïÚGDFKZ\JOÈGDMÈ]XSHïQLHRGPLHQQLHZGZöFK QDMZDĝQLHMV]\FKSU]HJOÈGDUNDFK KOMUNIKAT O BŁĘDZIE DOTYCZĄCY POLA TYPU • • • WYBÓR DATY W SYSTEMIE IOS E-MAIL W PRZEGLĄDARCE CHROME KOMUNIKAT O BŁĘDZIE DOTYCZĄCY POLA TYPU E-MAIL W PRZEGLĄDARCE FIREFOX 598 USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH AKTUALNE PODEJŚCIA 'RSöNLZLÚNV]RĂÊXĝ\WNRZQLNöZQLHEÚG]LHNRU]\VWDÊ]SU]HJOÈGDUHNLQWHUQHWRZ\FKREVïXJXMÈF\FKQRZHIXQNFMHDVDPHSU]HJOÈGDUNLQLHEÚGÈLFK REVïXJLZDÊZVSöMQ\VSRVöESURJUDPLĂFLPXV]ÈVWDUDQQLHSU]HP\ĂOHÊMDN VWRVRZDÊQRZHIXQNFMH POLYFILL WYKRYWANIE FUNKCJI SPÓJNOŚĆ SRO\ğOOWRVNU\SW]DSHZQLDMÈF\ SU]HJOÈGDUFHGRP\ĂOQÈREVïXJÚ IXQNFMRQDOQRĂFLNWöUHMPRĝHV] RF]HNLZDÊ3RQLHZDĝVWDUV]H SU]HJOÈGDUNLQLHREVïXJXMÈ QRZ\FKHOHPHQWöZ+70/ VNU\SWXSRO\ğOOPRĝQDXĝ\Ê QDSU]\NïDGGRLPSOHPHQWDFML ZQLFKSRGREQ\FKIXQNFMRQDOQRĂFL=UHJXï\RGE\ZDVLÚ WR]DSRĂUHGQLFWZHPMÚ]\ND -DYD6FULSWOXEZW\F]NLM4XHU\ Wykrywanie funkcjiR]QDF]D VSUDZG]HQLHF]\SU]HJOÈGDUND REVïXJXMHGDQÈIXQNFMÚ 1DVWÚSQLHPRĝQD]GHF\GRZDÊ FR]URELÊMHĝHOLGDQDIXQNFMD MHVWOXEQLHMHVWREVïXJLZDQD :UR]G]LDOHZSRGUR]G]LDOH ķ0RGHUQL]UĵSR]QDïHĂVNU\SW RQD]ZLHmodernizr.js prze]QDF]RQ\GRVSUDZG]DQLDF]\ GDQDIXQNFMDMHVWREVïXJLZDQD SU]H]SU]HJOÈGDUNÚ :LHOXSURMHNWDQWöZLSURJUDPLVWöZFKFHNRQWURORZDÊ Z\JOÈGNRQWUROHNIRUPXODU]D LNRPXQLNDWöZREïÚGDFKDE\ W\PVDP\P]DSHZQLÊVSöMQRĂÊ DSOLNDFMLZHZV]\VWNLFK SU]HJOÈGDUNDFK =DFKRZDQLH VSöMQRĂFL]ZïDV]F]DZSU]\SDGNXNRPXQLNDWöZREïÚGDFK MHVWXZDĝDQH]DEDUG]RZDĝQH SRQLHZDĝUöĝQHVW\OHEïÚGöZ PRJÈGH]RULHQWRZDÊXĝ\WNRZQLNöZ 6NU\SW\SRO\ğOOVÈF]ÚVWR GRVWDUF]DQHZUD]]SOLNDPL&66 Xĝ\ZDQ\PLGRQDGDQLDVW\OX IXQNFMRQDOQRĂFLRIHURZDQHM SU]H]VNU\SW -HĝHOLGDQDIXQNFMDQLHMHVW REVïXJLZDQDSU]H]SU]HJOÈGDUNÚZF]\W\ZDQ\MHVWVNU\SW SRO\ğOOSU]H]QDF]RQ\GRHPXODFMLWHMIXQNFML$E\XQLNQÈÊ ZF]\W\ZDQLDVNU\SWXSRO\ğOO ZSU]HJOÈGDUNDFKNWöUHJRQLH SRWU]HEXMÈ0RGHUQL]U]DZLHUD warunkowy program wczytuMÈF\6NU\SW]RVWDQLHZF]\WDQ\ W\ONRZWHG\JG\Z\QLNWHVWX ZVNDĝHQDNRQLHF]QRĂÊXĝ\FLD VNU\SWX /LVWÚVNU\SWöZSRO\ğOOGOD UöĝQ\FKIXQNFML]QDMG]LHV]QD ZLWU\QLHKWWSKWPOSOHDVH FRP :SRGUR]G]LDOHķ5R]ZLÈ]DQLH DZDU\MQHGODDWU\EXWXSODFHKROGHUĵ]QDMG]LHV]SU]\NïDG SRND]XMÈF\]DVWRVRZDQLH VNU\SWXSRO\ğOOZFHOX]DSHZQLHQLDREVïXJLDWU\EXWX+70/ placeholderZVWDUV]\FK SU]HJOÈGDUNDFKLQWHUQHWRZ\FK ,QQ\SRSXODUQ\SURJUDPZF]\WXMÈF\WRRequire.js GRVWÚSQ\ ZZLWU\QLHhttp://requirejs.org/ -HGQDNMHVWRQQLHFREDUG]LHM VNRPSOLNRZDQ\GODSRF]ÈWNXMÈF\FKSRQLHZDĝRIHUXMHMHV]F]H ZLHOHLQQ\FKIXQNFML 'ODWHJRWHĝZREV]HUQ\P SU]\NïDG]LH]DSUH]HQWRZDQ\P QDNRñFXUR]G]LDïXZ\ïÈF]\P\ ZHU\ğNDFMÚZEXGRZDQÈ Z+70/LZSLHUZV]HMNROHMQRĂFLVSUöEXMHP\Z\NRU]\VWDÊ -DYD6FULSWGRSU]HSURZDG]HQLD ZHU\ğNDFML :EXGRZDQD Z+70/ZHU\ğNDFMD]RVWDQLH ]DVWRVRZDQDW\ONRZWHG\JG\ Xĝ\WNRZQLNPDZ\ïÈF]RQÈ REVïXJÚ-DYD6FULSW:QRZRF]HVQ\FKSU]HJOÈGDUNDFK ZHU\ğNDFMÚ+70/WUDNWXMHP\ MDNRUR]ZLÈ]DQLHDZDU\MQH :RPDZLDQ\PSU]\NïDG]LH ]DVWRVXMHP\WDNĝHM4XHU\8, GR]DJZDUDQWRZDQLDVSöMQRĂFL NRQWURONLGDW\ZHZV]\VWNLFK XU]ÈG]HQLDFKSU]\Xĝ\FLX PLQLPDOQHMLORĂFLNRGX USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 599 ROZWIĄZANIE AWARYJNE DLA ATRYBUTU PLACEHOLDER $WU\EXW+70/placeholderSR]ZDODQD XPLHV]F]HQLHRSLVXZSROXWHNVWRZ\P DE\ 2 Z\HOLPLQRZDÊNRQLHF]QRĂÊXĝ\FLDHW\NLHWOXESR SURVWXGRVWDUF]\ÊSRGSRZLHG]L .LHG\SROHWHNVWRZHVWDMHVLÚDNW\ZQHLXĝ\WNRZQLNUR]SRF]\QD 3 ZSURZDG]DQLHGDQ\FKWHNVWSRGSRZLHG]L]QLND -HGQDNWDNLHUR]ZLÈ]DQLHG]LDïDMHG\QLHZQDMQRZV]\FKSU]HJOÈGDUNDFK'ODWHJRWHĝRPDZLDQ\ 4 WXWDMVNU\SW]DSHZQLDĝHXĝ\WNRZQLN]REDF]\ SRGSRZLHG]LWDNĝHZVWDUV]\FKSU]HJOÈGDUNDFK 7RMHVWSURVW\SU]\NïDGVNU\SWXW\SXSRO\ğOO 5 N Czy atrybut placeholder jest obsługiwany? T Utworzenie zmiennej: length: liczba formularzy Iteracja przez każdy element <form> na stronie Wywołanie funkcji: showPlaceholder() Przejście do kolejnego formularza FUNKCJA: showPlaceholder() umieszcza podpowiedź w elementach, które jej nie mają 6 Iteracja przez wszystkie elementy formularza Utworzenie zmiennej: el: bieżący element 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. 6SUDZG]HQLHF]\SU]HJOÈGDUNDREVïXJXMH DWU\EXW+70/placeholder-HĝHOLWDNQLHPD NRQLHF]QRĂFLVWRVRZDQLDUR]ZLÈ]DQLDDZDU\MQHJR =DSRPRFÈSROHFHQLDreturnQDVWÚSXMHRSXV]F]HQLHIXQNFML 3. 8VWDOHQLHOLF]E\IRUPXODU]\VLHFLRZ\FKQD VWURQLH'RWHJRFHOXXĝ\ZDQDMHVWZïDĂFLZRĂÊ lengthNROHNFMLforms 4. ,WHUDFMDSU]H]ZV]\VWNLHHOHPHQW\<form>QD VWURQLHLZ\ZRïDQLHIXQNFMLshowPlaceholder() GODNDĝGHJR]QLFK]SU]HND]DQLHPNROHNFML HOHPHQWöZZGDQ\PIRUPXODU]X 5. =DGHNODURZDQLHIXQNFMLshowPlaceholder() 6. 8ĝ\FLHSÚWOLforGRLWHUDFMLSU]H]HOHPHQW\ NROHNFML 7. 3ROHFHQLHifVSUDZG]DNDĝG\HOHPHQWZFHOX XVWDOHQLDF]\]DZLHUDRQDWU\EXWplaceholder ZUD]]ZDUWRĂFLÈ 8. -HĝHOLQLHPDDWU\EXWXplaceholderSROHFHQLH continueSRZRGXMHSU]HMĂFLHGRNROHMQHJR HOHPHQWX:SU]HFLZQ\PUD]LH 9. .RORUWHNVWX]RVWDMH]PLHQLRQ\QDV]DU\ DZDUWRĂFLÈHOHPHQWXVWDMHVLÚWHNVWSRGSRZLHG]L 7 N Czy używany jest atrybut placeholder? T 8 Ustawienie koloru tekstu na szary 9 Ustawienie tekstu podpowiedzi 10 11 Zdarzenie: focus w tym elemencie FUNKCJA ANONIMOWA: Jeżeli tekst podpowiedzi znajduje się w elemencie, należy go usunąć i przywrócić czarny kolor tekstu 12 Zdarzenie: blur w tym elemencie 13 FUNKCJA ANONIMOWA: Jeżeli pole tekstowe jest puste, należy wyświetlić podpowiedź w kolorze szarym USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH Przejście do kolejnego elementu 10. *G\HOHPHQWVWDQLHVLÚDNW\ZQ\REVHUZDWRU ]GDU]HñZ\ZRïXMHIXQNFMÚDQRQLPRZÈ 11. -HĝHOLZDUWRĂÊELHĝÈFDHOHPHQWXMHVWGRSDVRZDQDGRWHNVWXSRGSRZLHG]LZDUWRĂÊ]RVWDQLH XVXQLÚWD DNRORUWHNVWX]SRZURWHPEÚG]LH ]PLHQLRQ\QDGRP\ĂOQ\ 12. *G\HOHPHQWVWDQLHVLÚQLHDNW\ZQ\REVHUZDWRU]GDU]HñZ\ZRïXMHIXQNFMÚDQRQLPRZÈ 13. -HĝHOLSROHWHNVWRZHMHVWSXVWHQDVWÚSXMH GRGDQLHWHNVWXSRGSRZLHG]L DMHJRNRORUMHVW ]PLHQLDQ\QDV]DU\ FMVSODFHKROGHUSRO\ğOOMV JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 SKRYPT TYPU POLYFILL DLA ATRYBUTU PLACEHOLDER (function () { 8PLHV]F]HQLHNRGXZIXQNFMLW\SX,,)( 7HVWXWZRU]HQLHHOHPHQWXLQSXW!LVSUDZG]HQLHF]\DWU\EXWSODFHKROGHUMHVWREVïXJLZDQ\ if (’placeholder’ in document.createElement(’input’)) { return; } var length = document.forms.length; 2NUHĂOHQLHOLF]E\IRUPXODU]\QDVWURQLH for (var i = 0, l = length; i < l; i++ ) { ,WHUDFMDSU]H]ZV]\VWNLHIRUPXODU]H showPlaceholder(document.forms[i].elements); :\ZRïDQLHIXQNFMLVKRZ3ODFHKROGHU } function showPlaceholder(elements) { =DGHNODURZDQLHIXQNFML for (var i = 0, l = elements.length; i < l; i++) { 'ODNDĝGHJRHOHPHQWX var el = elements[i]; 3U]HFKRZ\ZDQLHWHJRHOHPHQWX if (!el.placeholder) { -HĝHOLQLH]RVWDï]GHğQLRZDQ\DWU\EXWSODFHKROGHU continue; 3U]HMĂFLHGRQDVWÚSQHJRHOHPHQWX } :SU]HFLZQ\PUD]LH el.style.color = ’#666666’; 8VWDZLHQLHNRORUXWHNVWXQDV]DU\ el.value = el.placeholder; 'RGDQLHWHNVWXSRGSRZLHG]L addEvent(el, ’focus’, function () { if (this.value === this.placeholder) { this.value = ’’; this.style.color = ’#000000’; 11 -HĝHOLHOHPHQWVWDQLHVLÚDNW\ZQ\ -HĝHOLZDUWRĂÊ ZDUWRĂÊDWU\EXWX SODFHKROGHU 8VXQLÚFLH]DZDUWRĂFLSRODWHNVWRZHJR 3U]\ZUöFHQLHGRP\ĂOQHJRNRORUXWHNVWX } }); 12 13 addEvent(el, ’blur’, function () { if (this.value === ’’) { this.value = this.placeholder; this.style.color = ’#666666’; } }); } .RQLHFSÚWOLIRU } .RQLHFIXQNFMLVKRZ3ODFHKROGHU }()); 3RZ\VWÈSLHQLX]GDU]HQLDEOXU -HĝHOLSROHWHNVWRZHMHVWSXVWH :DUWRĂÊVWDMHVLÚSRGSRZLHG]LÈ 8VWDZLHQLHNRORUXV]DUHJRGODWHNVWX ,VWQLHMHNLONDUöĝQLFZVWRVXQNXGRDWU\EXWX placeholderRIHURZDQHJRSU]H]+70/-HĝHOLXĝ\W NRZQLNXVXQLHWHNVWSRGSRZLHGě]RVWDQLHZ\ĂZLHWORQD JG\Xĝ\WNRZQLNRSXĂFLNRQWURONÚ QLHQDW\FKPLDVWMDN PDWRPLHMVFHZQLHNWöU\FKSU]HJOÈGDUNDFK 1LHEÚG]LH Z\VïDQ\WHNVWNWöU\PDWDNÈVDPÈZDUWRĂÊMDNSRGSRZLHGě:DUWRĂFLSRGSRZLHG]LPRJÈE\Ê]DSDPLÚWDQH SU]H]IXQNFMÚDXWRPDW\F]QHJRX]XSHïQLDQLD USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH SKRYPT TYPU POLYFILL WYKORZYSTANY Z ZASTOSOWANIEM SKRYPTÓW MODERNIZR I YEPNOPE 6NU\SW0RGHUQL]USR]QDïHĂZUR]G]LDOH7XWDMZ\NRU]\VWDP\JR ]ZDUXQNRZ\PSURJUDPHPZF]\WXMÈF\PDE\ZF]\WDQLHVNU\SWXQDVWÚSRZDïR W\ONRZWHG\JG\QLH]EÚGQHMHVWUR]ZLÈ]DQLHDZDU\MQH 0RGHUQL]USR]ZDODQDVSUDZG]HQLHF]\SU]HJOÈGDUNDLXU]ÈG]HQLHREVïXJXMÈSHZQHIXQNFMH1RVL WRQD]ZÚZ\NU\ZDQLDIXQNFML1DVWÚSQLHPRĝQD SRGMÈÊRGSRZLHGQLHG]LDïDQLDZ]DOHĝQRĂFLRG Z\QLNXVSUDZG]HQLD1DSU]\NïDGMHĂOLVWDUV]D SU]HJOÈGDUNDQLHREVïXJXMHGDQHMIXQNFMLPRĝQD Xĝ\ÊVNU\SWXW\SXSRO\ğOO 0RGHUQL]UMHVWF]DVDPLXPLHV]F]DQ\ZVHNFML <head>VWURQ\+70/JG\]DFKRG]LSRWU]HED SU]HSURZDG]HQLDRSHUDFMLVSUDZG]HQLDMHV]F]H SU]HGZF]\WDQLHPVWURQ\ QDSU]\NïDGSHZQH VNU\SW\W\SXSRO\ğOOGOD+70/L&66PXV]ÈE\Ê ZF]\WDQHSU]HGVWURQÈ =DPLDVWZF]\W\ZDÊVNU\SWW\SXSRO\ğOOSU]H] NDĝGHJRRGZLHG]DMÈFHJRVWURQÚ QDZHWMHĂOLQLH EÚG]LHPXVLDïJRXĝ\ZDÊ PRĝQDZ\NRU]\VWDÊWDN ]ZDQ\ZDUXQNRZ\SURJUDPZF]\WXMÈF\3R]ZDOD RQQDZF]\W\ZDQLHUöĝQ\FKSOLNöZZ]DOHĝQRĂFL RGZDUWRĂFL trueOXEfalse ]ZUDFDQHMSU]H] ZDUXQHN0RGHUQL]UMHVWEDUG]RF]ÚVWRXĝ\ZDQ\ ZUD]]ZDUXQNRZ\PSURJUDPHPZF]\WXMÈF\P RQD]ZLH<HS1RSHMVDE\VNU\SWW\SXSRO\ğOOE\ï ZF]\W\ZDQ\W\ONRZWHG\JG\MHVWQLH]EÚGQ\ *G\QDVWURQLH]RVWDQLHGRïÈF]RQ\VNU\SW<HS1RSHPRĝQDZ\ZRïDÊIXQNFMÚyepnope()8ĝ\ZD RQDVNïDGQLOLWHUDïXRELHNWXGRZVND]DQLDZDUXQNX SU]H]QDF]RQHJRGRSU]HWHVWRZDQLD1DVWÚSQLHSOLN MHVWZF]\W\ZDQ\Z]DOHĝQRĂFLRGZDUWRĂFL true OXEfalse ]ZUDFDQHMSU]H]ZDUXQHN TYLKO MODERNIZR MODERNIZR PLUS YEPNOPE .DĝGDIXQNFMDVSUDZG]DQD]DSRPRFÈVNU\SWX 0RGHUQL]UVWDMHVLÚZïDĂFLZRĂFLÈRELHNWX Modernizr-HĝHOLGDQDIXQNFMDMHVWREVïXJLZDQD ZïDĂFLZRĂÊ]DZLHUDZDUWRĂÊtrue1DWRPLDVWMHĂOL QLHMHVWREVïXJLZDQDZDUWRĂFLÈZïDĂFLZRĂFLMHVW false1DVWÚSQLHZïDĂFLZRĂFLRELHNWXModernizr PRĝQDVWRVRZDÊZSROHFHQLDFKZDUXQNRZ\FK WDNLHMDNSU]HGVWDZLRQHSRQLĝHM:RPDZLDQ\P SU]\NïDG]LHMHĝHOLZïDĂFLZRĂÊcssanimations RELHNWXModernizrQLH]ZUöFLZDUWRĂFLtrue ]RVWDQLHZ\NRQDQ\NRGZQDZLDVLHNODPURZ\P <HS1RSHRWU]\PXMHOLWHUDïRELHNWXNWöU\]Z\NOH VNïDGDVLÚ]PLQLPXPWU]HFKZïDĂFLZRĂFL testWRVSUDZG]DQ\ZDUXQHNWXWDM0RGHUQL]U MHVWXĝ\ZDQ\GRVSUDZG]HQLDF]\REVïXJLZDQD MHVWZïDĂFLZRĂÊcssanimations yepWRSOLNGRZF]\WDQLDMHĂOLZDUXQHN]ZUDFD ZDUWRĂÊtrue nopeWRSOLNGRZF]\WDQLDMHĂOLZDUXQHN]ZUDFD ZDUWRĂÊfalse WXWDMZF]\WDQHEÚGÈGZDSOLNL SRGDQHZSRVWDFLVNïDGQLWDEOLF\ if (!Modernizr.cssanimations) { $QLPDFMH&66VÈQLHREVïXJLZDQH =DPLDVWQLFKXĝ\MDQLPDFMLM4XHU\ } yepnope({ WHVW0RGHUQL]UFVVDQLPDWLRQV \HSĳFVVDQLPDWLRQVFVVĳ QRSH>ĳMVMTXHU\MVĳĳMVDQLPDWHMVĳ@ }); • • • USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH WARUNKOWE WCZYTANIE SKRYPTU TYPU POLYFILL HTML FQXPEHUSRO\ğOOKWPO <head> ... <script src=”js/modernizr.js”></script> <script src=”js/yepnope.js”></script> VFULSWVUF ĵMVQXPEHUSRO\ğOOHJMVĵ!VFULSW! </head> <body> <label for=”age”>3RGDMZLHN</label> <input type=”number” id=”age” /> </body> JAVASCRIPT FMVQXPEHUSRO\ğOOHJMV yepnope({ WHVW0RGHUQL]ULQSXWW\SHVQXPEHU QRSH>ĳMVQXP3RO\ğOOMVĳĳFVVQXPEHUFVVĳ@ FRPSOHWHIXQFWLRQ ^ FRQVROHORJ ĳ<HS1RSH0RGHUQL]U]DNRñF]\ï\ SUDFÚĳ } }); WYNIK .RGZRPDZLDQ\PSU]\NïDG]LH VSUDZG]DF]\SU]HJOÈGDUND REVïXJXMHHOHPHQW<input> NWöUHJRZDUWRĂFLÈDWU\EXWXtype MHVWnumber:QDJïöZNXVWURQ\ HOHPHQW<head> GRïÈF]RQHVÈ VNU\SW\0RGHUQL]UL<HS1RSH DE\UR]ZLÈ]DQLHDZDU\MQH G]LDïDïRSUDZLGïRZR )XQNFMDyepnope()SRELHUD SDUDPHWUZSRVWDFLOLWHUDïX RELHNWX2WRZïDĂFLZRĂFLWHJR RELHNWX testVSUDZG]DQDIXQNFMD :RPDZLDQ\PSU]\NïDG]LH 0RGHUQL]UVSUDZG]DF]\ REVïXJLZDQHMHVWSROH WHNVWRZHW\SXnumber yepQLHXĝ\ZDQ\ZW\P SU]\NïDG]LHSR]ZDODQD ZVND]DQLHSOLNöZZF]\W\ZDQ\FKJG\VSUDZG]DQD IXQNFMDjestREVïXJLZDQD nopeSR]ZDODQDZVND]DQLH G]LDïDQLDJG\VSUDZG]DQD IXQNFMDnie jestREVïXJLZDQD PRĝQDZF]\WDÊZLHOHSOLNöZ SRGDMÈFMH]Z\NRU]\VWDQLHP VNïDGQLWDEOLF\ completeSR]ZDODQD ZVND]DQLHIXQNFMLZ\NRQ\ZDQHMSR]DNRñF]HQLXRSHUDFML VSUDZG]HQLDLZF]\WDQLX ZV]\VWNLFKQLH]EÚGQ\FK SOLNöZ:RPDZLDQ\P SU]\NïDG]LHIXQNFMDZ\ĂZLHWOD NRPXQLNDWZNRQVROLLPD QDFHOX]DGHPRQVWURZDQLH G]LDïDQLDWHMZïDĂFLZRĂFL • • • • =ZUöÊXZDJÚĝHZDUWRĂÊDWU\EXWXtypeHOHPHQWX<input> 0RGHUQL]USU]HFKRZXMHZRELHNFLHSRWRPQ\PRQD]ZLHinputtypes 1DSU]\NïDGZFHOXVSUDZG]HQLDF]\REVïXJLZDQ\MHVWVHOHNWRU GDW\Z+70/PRĝQDXĝ\ÊModernizr.inputtypes.date QLH Modernizr.date USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH WERYFIKACJA FORMULARZA SIECIOWEGO :RVWDWQLHMF]ÚĂFLWHJRUR]G]LDïXSU]HGVWDZLRQ\EÚG]LHMHGHQGXĝ\VNU\SW QDSRGVWDZLHNWöUHJR]RVWDQÈRPöZLRQH]DJDGQLHQLD]ZLÈ]DQH]ZHU\ğNDFMÈ IRUPXODU]DVLHFLRZHJR7RSRPDJDXĝ\WNRZQLNRPGRVWDUF]DÊGDQH ZIRUPDFLHNWöUHJRRF]HNXMHV] :SU]\NïDG]LH]DVWRVRZDQRWDNĝHSHZQH XVSUDZQLHQLDIRUPXODU]\ tĞƌǇĮŬĂĐũĂƚŽƉƌŽĐĞƐƐƉƌĂǁĚǌĞŶŝĂ͕ĐǌǇǁĂƌƚŽƑđ ƐƉĞųŶŝĂŽŬƌĞƑůŽŶĞƌĞŐƵųǇ;ŶĂƉƌǌǇŬųĂĚĐǌǇŚĂƐųŽƐŬųĂĚĂ ƐŝħǌƵƐƚĂůŽŶĞũŵŝŶŝŵĂůŶĞũůŝĐǌďǇǌŶĂŬſǁͿ͘ǌŝħŬŝƚĞŵƵ͕ ũĞƑůŝǁǇƐƚČƉŝũĂŬŝŬŽůǁŝĞŬƉƌŽďůĞŵǌǁĂƌƚŽƑĐŝĂŵŝǁƉƌŽǁĂĚǌŽŶǇŵŝƉƌǌĞǌƵǏǇƚŬŽǁŶŝŬĂ͕ŵŽǏŶĂƉŽŝŶĨŽƌŵŽǁĂđ ŐŽ͕ĂďǇƉŽƉƌĂǁŝųĨŽƌŵƵůĂƌǌƉƌǌĞĚũĞŐŽƉŽŶŽǁŶǇŵ ǁǇƐųĂŶŝĞŵ͘dĂŬŝĞƌŽǌǁŝČǌĂŶŝĞŵĂƚƌǌǇŝƐƚŽƚŶĞǌĂůĞƚǇ͘ • ,VWQLHMH]QDF]QLHZLÚNV]HSUDZGRSRGRELHñVWZR • • ĝHRWU]\PDV]LQIRUPDFMHZIRUPDFLHNWöUHJR EÚG]LHV]PöJïXĝ\Ê 6SUDZG]HQLHGDQ\FKZSU]HJOÈGDUFHRGE\ZD VLÚV]\EFLHMQLĝZSU]\SDGNXLFKZ\VïDQLDGR VHUZHUDFHOHPVSUDZG]HQLD 3R]ZDODQDRV]F]ÚG]DQLH]DVREöZZVHUZHU]H :WHMF]ÚĂFLUR]G]LDïX]REDF]\V]MDNVSUDZG]DÊ ZDUWRĂFLZSURZDG]DQHSU]H]Xĝ\WNRZQLND ZIRUPXODU]XVLHFLRZ\P7HJRURG]DMXRSHUDFMH VSUDZG]HQLDVÈSU]HSURZDG]DQHSRZ\VïDQLX IRUPXODU]D8ĝ\WNRZQLNPRĝHNOLNQÈÊSU]\FLVN Z\VïDQLDIRUPXODU]DOXEQDFLVQÈÊNODZLV]Enter QDNODZLDWXU]HDSURFHVZHU\ğNDFML]RVWDQLH ]DLQLFMRZDQ\SU]H]]GDU]HQLHsubmit DQLHclick SU]\FLVNXZ\V\ïDMÈFHJRIRUPXODU] =DJDGQLHQLD]ZLÈ]DQH]ZHU\ğNDFMÈ]RVWDQÈ RPöZLRQHQDMHGQ\PGXĝ\PSU]\NïDG]LH)RUPXODU]SRND]DQRSRQLĝHMDWZRU]ÈF\JRNRG+70/ QDVWURQLHSRSUDZHM:SUDZG]LHZ\NRU]\VW\ZDQH VÈNRQWURONLIRUPXODU]D+70/DOHZHU\ğNDFMD RGE\ZDVLÚ]DSRPRFÈNRGX-DYD6FULSWDE\]DSHZQLÊVSöMQHG]LDïDQLHIRUPXODU]DZHZV]\VWNLFK SU]HJOÈGDUNDFK QDZHWMHĂOLQLHREVïXJXMÈ+70/ USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH FORMULARZ HTML 7HQSU]\NïDGXĝ\ZDNRGX]QDF]QLNöZVSHF\ğNDFML +70/DOHZHU\ğNDFMDMHVWSU]HSURZDG]DQD]D SRPRFÈ-DYD6FULSW DQLHZEXGRZDQ\FKPHFKDQL]PöZZHU\ğNDFMLZ+70/ HTML =HZ]JOÚGXQDRJUDQLF]RQÈLORĂÊPLHMVFDSRQLĝV]\ NRGSRND]XMHMHG\QLHHOHPHQW\GDQ\FKZHMĂFLRZ\FKIRUPXODU]DVLHFLRZHJR SRPLQLÚWR]QDF]QLNL GODNROXPQ c13/validation.html <form method=”post” action=”/register”> .ROXPQD! <div class=”name”> <label for=”name” class=”required”>,PLÚ</label> LQSXWW\SH ĵWH[WĵSODFHKROGHU ĵ3URV]ÚSRGDÊLPLÚĵQDPH ĵQDPHĵLG ĵQDPHĵ UHTXLUHGWLWOH ĵ3URV]ÚSRGDÊLPLÚĵ! </div> <div class=”email”> <label for=”email” class=”required”>(PDLO</label> LQSXWW\SH ĵHPDLOĵSODFHKROGHU ĵQD]ZDBXĝ\WNRZQLND#QD]ZDBGRPHQ\SOĵQDPH ĵHPDLOĵ id=”email” required> </div> <div class=”password”> <label for=”password” class=”required”>+DVïR</label> <input type=”password” name=”password” id=”password” required> </div> <div class=”password”> <label for=”conf-password” class=”required”>3RWZLHUGěKDVïR</label> <input type=”password” name=”conf-password” id=”conf-password” required> </div> .ROXPQD! <div class=”birthday”> <label for=”birthday” class=”required”>'DWDXURG]HQLD</label> <input type=”date” name=”birthday” id=”birthday” placeholder=”rrrr-mm-dd” required> <div id=”consent-container” class=”hide”> <label for=”parents-consent”>$E\VLÚ]DSLVDÊPXVLV]PLHÊ]JRGÚURG]LFöZ =D]QDF]WRSROHMHĂOL]JDG]DV]VLÚQD]DSLVDQLHG]LHFND</label> <input type=”checkbox” name=”parents-consent” id=”parents-consent”> </div> </div> <div class=”bio”> <label for=”bio”>.UöWNRRVRELH PDNV\PDOQLH]QDNöZ </label> WH[WDUHDQDPH ĵELRĵLG ĵELRĵURZV ĵĵFROV ĵĵ!WH[WDUHD! <span id=”bio-count” class=”hide”>140</span> </div> <div class=”submit”><input type=”Zarejestruj”></div> </form> USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH OGÓLNE OMÓWIENIE WERYFIKACJI 7HQSU]\NïDG]DZLHUDSRQDGZLHUV]\NRGXDMHJRRPöZLHQLHZ\PDJD VWURQ1DSRF]ÈWNXVNU\SWSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLHHOHPHQW\ QDVWURQLHDQDVWÚSQLHZ\NRQXMHGZLHSRGVWDZRZHRSHUDFMHVSUDZG]HQLD NDĝGHMNRQWURONLIRUPXODU]D SPRAWDZENIE PODSTAWOWE .RGSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLHHOHPHQW\QDVWURQLH LZ\NRQXMHGZDURG]DMHVSUDZG]DQLDpodstawowego6ÈWRSRGVWDZRZHRSHUDFMHVSUDZG]DQLDSU]HSURZDG]DQHZNDĝG\PHOHPHQFLH LNDĝG\PIRUPXODU]XVLHFLRZ\P 1. &]\HOHPHQW]DZLHUDDWU\EXWrequired"-HĝHOLWDNWRMDNDMHVW MHJRZDUWRĂÊ" 2. &]\ZDUWRĂÊMHVWGRSDVRZDQDGRDWU\EXWXtype"1DSU]\NïDGF]\ SROHWHNVWRZHW\SXemail zawiera adres e-mail? SPRAWDZENIE KAŻDEGO ELEMENTU $E\SU]HMĂÊSU]H]NDĝG\HOHPHQWIRUPXODU]DVLHFLRZHJRVNU\SWZ\NRU]\VWXMHNROHNFMÚelementsIRUPXODU]D ]DZLHUDRQDRGQLHVLHQLDGR ZV]\VWNLFKNRQWUROHNIRUPXODU]D .ROHNFMDWDMHVWSU]HFKRZ\ZDQD Z]PLHQQHMRQD]ZLHelements:RPDZLDQ\PSU]\NïDG]LHNROHNFMD elementsSU]HFKRZXMHZ\PLHQLRQHSRQLĝHMNRQWURONLIRUPXODU]D 2VWDWQLDNROXPQDZVND]XMHF]\HOHPHQWPXVLPLHÊSRGDQÈZDUWRĂÊ ,1'(.6 (/(0(17 :<0$*$1<" 0 elements.name 7DN 1 elements.email 7DN elements.password 7DN 3 elements.conf-password 7DN 4 elements.birthday 7DN elements.parents-consent -HĂOLSRQLĝHM 6 elements.bio Nie USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH 1LHNWöU]\SURJUDPLĂFLDNW\ZQLHEXIRUXMÈHOHPHQW\ IRUPXODU]DZ]PLHQQ\FKQDZ\SDGHNQLHSRZRG]HQLDRSHUDFMLZHU\ğNDFML7RGREUHUR]ZLÈ]DQLH DOHZFHOX]DFKRZDQLDSURVWRW\LWDNMXĝEDUG]R REV]HUQHJRSU]\NïDGXZÚ]ï\GODHOHPHQWöZ IRUPXODU]DQLHVÈEXIRURZDQH -HĝHOLMHV]F]HWHJRQLH]URELïHĂSRPRFQHEÚG]LH SREUDQLHNRGXSU]\NïDGX]ZLWU\Q\SRĂZLÚFRQHM NVLÈĝFH KWWSMDYDVFULSWERRNFRP DE\E\ïSRG UÚNÈSRGF]DVOHNWXU\NROHMQ\FKVWURQ 3RSU]HSURZDG]HQLXSRGVWDZRZ\FKRSHUDFMLVSUDZG]HQLDVNU\SW Z\NRQXMHNROHMQHVSUDZG]HQLDSRV]F]HJöOQ\FKHOHPHQWöZIRUPXODU]D 1LHNWöUH]QLFKPDMÈ]DVWRVRZDQLHW\ONRZZ\EUDQ\FKIRUPXODU]DFK WŁASNE ZADANIA WERYFIKACJI .ROHMQ\PNURNLHPZNRG]LHMHVWSU]HSURZDG]HQLHRSHUDFMLVSUDZG]HQLDRGSRZLDGDMÈF\FKRNUHĂORQ\PHOHPHQWRPIRUPXODU]D QLH wszystkim &]\KDVïRMHVWSUDZLGïRZH" &]\LQIRUPDFMHZSURZDG]RQHZZLHORZLHUV]RZ\PSROXWHNVWRZ\P PDMÈPQLHMQLĝ]QDNöZ" -HĝHOLXĝ\WNRZQLNPDPQLHMQLĝODWWRF]\]D]QDF]RQH]RVWDïR SROHZ\ERUXLQIRUPXMÈFHR]JRG]LHZ\UDĝRQHMSU]H]RVREÚ GRURVïÈ" 7HRSHUDFMHVSUDZG]HQLDVÈFKDUDNWHU\VW\F]QHGODWHJRIRUPXODU]D LPDMÈ]DVWRVRZDQLHMHG\QLHGODZ\EUDQ\FKHOHPHQWöZIRUPXODU]D QLHLFKZV]\VWNLFK • • • MONITOROWANIE ELEMENTÓW VALID $E\ĂOHG]LÊHZHQWXDOQHEïÚG\WZRU]RQ\MHVWRELHNWRQD]ZLH valid.LHG\NRGSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLHHOHPHQW\ LGRNRQXMHSRGVWDZRZHJRVSUDZG]HQLDGODNDĝGHJRHOHPHQWXGR RELHNWXvalidGRGDZDQDMHVWZïDĂFLZRĂÊ QD]ZÈZïDĂFLZRĂFLMHVWZDUWRĂÊDWU\EXWXidGDQHJRHOHPHQWX ZDUWRĂFLÈMHVWZDUWRĂÊERRORZVNDZSU]\SDGNXZ\VWÈSLHQLDEïÚGX ZHOHPHQFLHEÚG]LHWRZDUWRĂÊfalse • • :$¥&,:2¥&,2%,(.789$/,' valid.name valid.email valid.password valid.conf-password valid.birthday valid.parents-consent valid.bio USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH OBSŁUGA BŁĘDÓW -HĝHOLZ\VWÈSLÈMDNLHNROZLHNEïÚG\VNU\SWPXVLXQLHPRĝOLZLÊZ\VïDQLH IRUPXODU]DLSRLQIRUPRZDÊXĝ\WNRZQLNDFRSRZLQLHQ]URELÊ DE\SRSUDZLÊZSURZDG]RQHLQIRUPDFMH .LHG\VNU\SWVSUDZG]DSRV]F]HJöOQHHOHPHQW\ ZSU]\SDGNX]QDOH]LHQLDEïÚGXZ\VWÚSXMÈGZLH U]HF]\ 8DNWXDOQLRQD]RVWDQLHRGSRZLHGQLDZïDĂFLZRĂÊ RELHNWXvalidNWöUDZVND]XMHĝH]DZDUWRĂÊ MHVWQLHSUDZLGïRZD :\ZRï\ZDQDMHVWIXQNFMDRQD]ZLH setErrorMessage():\NRU]\VWXMHRQDPHWRGÚ M4XHU\.data()SR]ZDODMÈFÈQDSU]HFKRZ\ZDQLHGDQ\FKZUD]]HOHPHQWHP7DNZLÚF NRPXQLNDWREïÚG]LHMHVWSU]HFKRZ\ZDQ\ ZSDPLÚFLZUD]]HOHPHQWHPIRUPXODU]DNWöU\ VSRZRGRZDïSUREOHP • • 3RVSUDZG]HQLXZV]\VWNLFKHOHPHQWöZNRPXQLNDW\REïÚGDFKPRĝQDZ\ĂZLHWOLÊ]DSRPRFÈIXQNFML showErrorMessage()3RELHUDRQDNRPXQLNDW REïÚG]LHDQDVWÚSQLHXPLHV]F]DJRZHOHPHQFLH <span>NWöU\]QDMGXMHVLÚWXĝ]DIRUPXODU]HP =DNDĝG\PUD]HPJG\Xĝ\WNRZQLNSUöEXMHZ\VïDÊ IRUPXODU]LMHĝHOLZHOHPHQFLHnie]RVWDï]QDOH]LRQ\EïÈGEDUG]RZDĝQHMHVWXVXQLÚFLHZV]\VWNLFK NRPXQLNDWöZREïÚGDFK]WHJRHOHPHQWX5R]ZDĝ QDVWÚSXMÈFÈV\WXDFMÚ a) 8ĝ\WNRZQLNZ\SHïQLïIRUPXODU]VLHFLRZ\ SRSHïQLDMÈFSU]\W\PFRQDMPQLHMGZDEïÚG\ b) 6SRZRGRZDïRWRZ\ĂZLHWOHQLHZLHOXNRPXQLNDWöZREïÚGDFK c) 8ĝ\WNRZQLNSRSUDZLïMHGHQEïÈGFRR]QDF]D NRQLHF]QRĂÊXVXQLÚFLDRGSRZLDGDMÈFHJRPX NRPXQLNDWX1DWRPLDVWNRPXQLNDW\REïÚGDFK GRW\F]ÈFHQLHXVXQLÚW\FKMHV]F]HSUREOHPöZ PXV]ÈSR]RVWDÊZLGRF]QH 'ODWHJRWHĝSRGF]DVLWHUDFMLSU]H]ZV]\VWNLHHOHPHQW\QDVWÚSXMHXVWDZLHQLHNRPXQLNDWXREïÚG]LH OXEXVXQLÚFLHWHJRNRPXQLNDWX form elements name email password conf-password birthday parents-consent bio key/value 3RZ\ĝHMPRĝHV]]REDF]\ÊGLDJUDPSU]HGVWDZLDMÈF\IRUPXODU]LMHJRNROHNFMÚelements3RQLHZDĝ Z\VWÈSLïSUREOHP]SRGDQ\PKDVïHPZUD]]W\P HOHPHQWHPPHWRGD.data()SU]HFKRZXMHSDUÚ NOXF]ZDUWRĂÊ :WHQVSRVöEIXQNFMDsetErrorMessage()EÚG]LH SU]HFKRZ\ZDïDNRPXQLNDW\REïÚGDFKZ\ĂZLHWODQHXĝ\WNRZQLNRZL-HĝHOLEïÈG]RVWDQLHSRSUDZLRQ\ZDUWRĂÊEïÚGX]RVWDQLHXVXQLÚWD SRGREQLHMDN NRPXQLNDWREïÚG]LH]GDQHJRHOHPHQWX USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH WYSŁANIE FORMULARZA 3U]HGZ\VïDQLHPIRUPXODU]DVLHFLRZHJRVNU\SWVSUDZG]D F]\Z\VWÈSLï\MDNLHNROZLHNEïÚG\-HĝHOLWDNZ\VïDQLHSOLNX ]RVWDMHZVWU]\PDQHSU]H]VNU\SW :FHOXVSUDZG]HQLDF]\Z\VWÈSLï\MDNLHNRO ZLHNEïÚG\WZRU]RQDMHVW]PLHQQDRQD]ZLH isFormValidNWöUHMSU]\SLVXMHVLÚZDUWRĂÊtrue 1DVWÚSQLHVNU\SWSU]HSURZDG]DLWHUDFMÚSU]H] ZV]\VWNLHZïDĂFLZRĂFLRELHNWXvalidLMHĂOLRGNU\MH EïÈG F]\OLMHĂOLGRZROQDZïDĂFLZRĂÊRELHNWX EÚG]LHPLHÊZDUWRĂÊfalse R]QDF]DWREïÈG ZIRUPXODU]XVLHFLRZ\PL]PLHQQDisFormValid UöZQLHĝEÚG]LHPLDïDZDUWRĂÊfalse =PLHQQDisFormValidMHVW]DWHPXĝ\ZDQDMDNR ĠDJD PRĝQDMÈSRWUDNWRZDÊMDNRSU]HïÈF]QLN NWöUDSR]QDOH]LHQLXEïÚGXMHVWZ\ïÈF]DQD1D NRñFXVNU\SWXMHĂOL]PLHQQDisFormValid ma ZDUWRĂÊfalseIRUPXODU]]DZLHUDEïÈGLQLH SRZLQLHQE\ÊZ\VïDQ\FRMHVWPRĝOLZHG]LÚNL Xĝ\FLXPHWRG\preventDefault() %DUG]RZDĝQHMHVWVSUDZG]HQLHLSU]HWZRU]HQLH ZV]\VWNLFKHOHPHQWöZ]DQLP]RVWDQLHSRGMÚWD GHF\]MDRZ\VïDQLXIRUPXODU]D']LÚNLWHPXPRĝQD MHGQRF]HĂQLHZ\ĂZLHWOLÊZV]\VWNLHNRPXQLNDW\ REïÚGDFK 3RVSUDZG]HQLXZV]\VWNLFKZDUWRĂFLXĝ\WNRZQL NRZLPRĝQDZ\ĂZLHWOLÊMHG\QLHWHNWöUHPXV]È E\ÊSRSUDZLRQHDE\PRĝOLZHVWDïRVLÚSRQRZQH Z\VïDQLHIRUPXODU]D -HĝHOLG]LDïDQLHIRUPXODU]DMHVW]DWU]\P\ZDQHSR QDSRWNDQLXSLHUZV]HJREïÚGXXĝ\WNRZQLNEÚG]LH ZLG]LDïW\ONRMHGHQEïÈGZWUDNFLHNDĝGHMRSHUDFML Z\VïDQLDIRUPXODU]D7REDUG]RV]\ENRPRĝHVWDÊ VLÚGODQLHJRIUXVWUXMÈFHJG\EÚG]LHSUöERZDï SRQRZQLHZ\VïDÊIRUPXODU]LEÚG]LHRWU]\P\ZDÊ NRPXQLNDW\RNROHMQ\FKEïÚGDFK Utworzenie zmiennej: isFormValid :$¥&,:2¥&,2%,(.78valid Iteracja przez właściwości obiektu valid N Czy wartością jest false? T valid.name true valid.email true valid.password true valid.conf-password true valid.birthday false valid.parents-consent false Przejście do kolejnej właściwości Przypisanie zmiennej isFormValid wartości false Uniemożliwienie domyślnej akcji, jaką jest wysłanie formularza valid.bio true Działanie pętli jest zatrzymywane po pierwszym napotkanym błędzie. (Zwróć uwagę na fakt, że komunikaty o błędach są już wyświetlone). USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH OGÓLNE OMÓWIENIE KODU 1DVWURQLHSRSUDZHM]QDMGXMHVLÚRJöOQ\]DU\VNRGXZHU\ğNDFMLSRG]LHORQ\ QDF]WHU\F]ÚĂFL:ZLHUV]XPDP\Z\ZRïDQLHIXQNFMLDQRQLPRZHMSR Z\VïDQLXIRUPXODU]DVLHFLRZHJR3R]ZDODRQRQDUR]SODQRZDQLHRSHUDFML ZHU\ğNDFMLLZ\ZRï\ZDQLHLQQ\FKIXQNFML QLHZV]\VWNLH]RVWDï\SRND]DQH QDVWURQLHSRSUDZHM]QDMG]LHV]MHQDNROHMQ\FKVWURQDFK A. KONFIGURACJA SKRYPTU 1. .RG]QDMGXMHVLÚZIXQNFMLW\SX,,)( WZRU]\ ]DNUHVQDSR]LRPLHIXQNFML 2. 6NU\SWSU]HSURZDG]DZHU\ğNDFMÚ]DSRPRFÈ -DYD6FULSWDE\]DJZDUDQWRZDÊĝHNRPXQLNDW\ REïÚGDFKEÚGÈZ\JOÈGDï\WDNVDPRZHZV]\VWNLFKSU]HJOÈGDUNDFK:EXGRZDQHZ+70/ PHFKDQL]P\ZHU\ğNDFML]RVWDMÈZ\ïÈF]RQHSU]H] SU]\SLVDQLHZïDĂFLZRĂFLnoValidateZDUWRĂFL true 3. .LHG\Xĝ\WNRZQLNZ\ĂOHIRUPXODU]QDVWÚSXMH Z\ZRïDQLHIXQNFMLDQRQLPRZHM ]DZLHUDMÈFHMNRG SU]HSURZDG]DMÈF\ZHU\ğNDFMÚ 4. =PLHQQDelementsSU]HFKRZXMHNROHNFMÚ ZV]\VWNLFKHOHPHQWöZIRUPXODU]D 5. 2ELHNWvalidSU]HFKRZXMHLQIRUPDFMHRSRSUDZQRĂFLSRV]F]HJöOQ\FKNRQWUROHNIRUPXODU]D .DĝGD]QLFK]RVWDïDGRGDQDMDNRZïDĂFLZRĂÊ RELHNWXvalid 6. =PLHQQDisValidWRRSFMDNWöUDMHVWSRQRZQLH Xĝ\ZDQDGRVSUDZG]HQLDF]\SRV]F]HJöOQH HOHPHQW\VÈSUDZLGïRZH 7. =PLHQQDisFormValidWRRSFMDZ\NRU]\VW\ZDQDGRZVND]DQLDSRSUDZQRĂFLFDïHJRIRUPXODU]D B. PRZEPROWADZENIE PODSTAWOWEGO SPRAWDZENIA 8. .RGSU]HSURZDG]DLWHUDFMÚSU]H]ZV]\VWNLH NRQWURONLIRUPXODU]D 9. 'ODNDĝGHMNRQWURONLZ\NRQ\ZDQHVÈGZD VSUDZG]HQLDSRGVWDZRZH i) &]\HOHPHQWMHVWZ\PDJDQ\"-HĝHOLWDNWRF]\ PDZDUWRĂÊ"8ĝ\ZDQHMHVWZ\ZRïDQLHIXQNFML YDOLGDWH5HTXLUHG SDWU]SRGUR]G]LDïķ:\PDJDQHHOHPHQW\IRUPXODU]Dĵ ii) &]\ZDUWRĂÊRGSRZLDGDW\SRZLGDQ\FKNWöUH SRZLQQ\VLÚ]QDMGRZDÊZNRQWUROFH"8ĝ\ZDQH MHVWZ\ZRïDQLHIXQNFMLvalidateTypes()SDWU] SRGUR]G]LDïķ:HU\ğNDFMDUöĝQHJRURG]DMXHOHPHQWöZLQSXW!ĵ -HĝHOLNWöUDNROZLHN]Z\PLHQLRQ\FKSRZ\ĝHM GZöFKIXQNFMLQLH]ZUöFLZDUWRĂFLtrueZDUWRĂFLÈ ]PLHQQHMisValidMHVWfalse 10. .RQVWUXNFMDif-elseVSUDZG]DF]\HOHPHQW ]DOLF]\ïWHVW\ RGE\ZDVLÚWRSU]H]VSUDZG]HQLH F]\ZDUWRĂFLÈ]PLHQQHMisValidMHVWfalse 11. -HĝHOLNRQWURONDQLHMHVWSUDZLGïRZDIXQNFMD showErrorMessage()Z\ĂZLHWODXĝ\WNRZQLNRZL NRPXQLNDWREïÚG]LHSDWU]SRGUR]G]LDïķ:\ĂZLHWODQLHNRPXQLNDWXREïÚG]LHĵ 12. -HĝHOLNRQWURONDMHVWSUDZLGïRZDIXQNFMD removeErrorMessage()XVXZDZV]HONLHNRPXQLNDW\REïÚGDFKSU]\SLVDQHWHPXHOHPHQWRZL 13. :DUWRĂÊDWU\EXWXidHOHPHQWX]RVWDMHGRGDQD MDNRZïDĂFLZRĂÊRELHNWXvalidQDWRPLDVWZDUWRĂÊ ZïDĂFLZRĂFLZVND]XMHF]\GDQHHOHPHQWMHVW SRSUDZQ\ USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH JAVASCRIPT 1 2 3 4 5 6 7 8 9 10 11 12 13 c13/js/validation.js .RQğJXUDFMDVNU\SWX (function () { document.forms.register.noValidate = true; :\ïÈF]HQLHZHU\ğNDFMLZEXGRZDQHMZ+70/ $(’form’).on(’submit’, function(e) { .LHG\IRUPXODU]]RVWDQLHZ\VïDQ\ var elements = this.elements; .ROHNFMDNRQWUROHNIRUPXODU]D var valid = {}; :ïDVQ\RELHNWZHU\ğNDFML var isValid; LV9DOLGVSUDZG]DNRQWURONLIRUPXODU]D var isFormValid; LV)RUP9DOLGVSUDZG]DFDï\IRUPXODU] 3U]HSURZDG]HQLHVSUDZG]HQLDSRGVWDZRZHJR Z\ZRïDQLHIXQNFMLSR]DSURFHGXUÈ REVïXJL]GDU]Hñ for (var i = 0, l = (elements.length - 1); i < l; i++) { :NROHMQ\PZLHUV]XPDP\Z\ZRïDQLHIXQNFMLYDOLGDWH5HTXLUHG LYDOLGDWH7\SHV LV9DOLG YDOLGDWH5HTXLUHG HOHPHQWV>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 ĳERROHDQĳ 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 HOHPHQW<span>EH]SRĂUHGQLRSRSROXIRUPXODU]D ZNWöU\PZ\VWÈSLïEïÈG 1DVWÚSQLHNRPXQLNDWREïÚG]LH]RVWDQLHGRGDQ\ GRZ\PLHQLRQHJRHOHPHQWX<span>$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 <span>1DVWÚSQLHPHWRGD.insertAfter() XPLHV]F]DHOHPHQW<span>QDVWURQLHWXĝ]D HOHPHQWHPNWöU\VSRZRGRZDïEïÈG 5. =DZDUWRĂÊHOHPHQWX<span>MHVWZ\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 = $(’<span class=”error”></span>’).insertAfter($el); } $errorContainer.text($(el).data(’errorMessage’)); 'RGDQLHNRPXQLNDWXREïÚG]LH } 3 4 5 } USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH WERYFIKACJA RÓŻNEGO RODZAJU ELEMENTÓW <INPUT> 1RZHW\S\HOHPHQWöZ<input>Z+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 HOĳ3URV]ÚSRGDÊSRSUDZQ\DGUHVHPDLOĳ 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 ĵ ?ĳ # !>??@ABC^_à 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 <= 140; &]\WHLQIRUPDFMHPDMÈ]QDNöZOXEPQLHM" if (!valid) { -HĝHOLQLHQDOHĝ\SU]\JRWRZDÊNRPXQLNDWREïÚG]LH VHW(UURU0HVVDJH ELRĳ,QIRUPDFMHR7RELHPRJÈPLHÊPDNV\PDOQLH]QDNöZĳ } return valid; =ZURWZDUWRĂFLERRORZVNLHM } )XQNFMDvalidatePassword() UR]SRF]\QDG]LDïDQLHRG]DGDñ SU]HGVWDZLRQ\FKZSRQLĝV]\FK SXQNWDFK 1. :]PLHQQHMRQD]ZLH passwordSU]HFKRZXMHHOHPHQW IRUPXODU]D]DZLHUDMÈF\KDVïR JAVASCRIPT 1 2 3 4 5 4.ĮQDVWÚSXMHZ\ZRïDQLH IXQNFMLsetErrorMessage()Ľ SDWU]SRGUR]G]LDïķ7ZRU]HQLH NRPXQLNDWXREïÚG]LHĵ 5. $WU\EXWvalidMHVW]ZUDFDQ\ GRNRGXZ\ZRïXMÈFHJRIXQNFMÚ NWöU\Z\ĂZLHWOLOXEXNU\MH NRPXQLNDWREïÚG]LH 2. -HĝHOLZDUWRĂÊPDFR QDMPQLHM]QDNöZWRZDUWRĂFLÈ]PLHQQHMvalidMHVWtrue ZSU]HFLZQ\PUD]LHZDUWRĂFLÈ MHVWfalse 3. -HĝHOL]PLHQQDvalid ma ZDUWRĂÊLQQÈQLĝtrueWRĮ 4.ĮQDVWÚSXMHZ\ZRïDQLH IXQNFMLsetErrorMessage() 5. $WU\EXWvalidMHVW]ZUDFDQ\ GRNRGXZ\ZRïXMÈFHJRIXQNFMÚ NWöU\Z\ĂZLHWOLOXEXNU\MH NRPXQLNDWREïÚG]LH c13/js/validation.js function validatePassword() { var password = document.getElementById(’password’); 3U]HFKRZ\ZDQLHRGQLHVLHQLDGRHOHPHQWXKDVïD YDUYDOLG SDVVZRUGYDOXHOHQJWK! &]\ZDUWRĂÊPDFRQDMPQLHM]QDNöZ" if (!valid) { -HĝHOLQLHQDOHĝ\SU]\JRWRZDÊNRPXQLNDWREïÚG]LH VHW(UURU0HVVDJH SDVVZRUGĳ+DVïRPXVLVNïDGDÊVLÚ]SU]\QDMPQLHM]QDNöZĳ } return valid; =ZURWZDUWRĂFLWUXHOXEIDOVH } USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH ZALEŻNOŚCI KODU I JEGO PONOWNE UŻYCIE :NDĝG\PSURMHNFLHQDOHĝ\XQLNDÊWZRU]HQLDGZöFK]HVWDZöZNRGX Z\NRQXMÈF\FKWRVDPR]DGDQLH3RQDGWRPRĝQDVSUöERZDÊZLHORNURWQLH Z\NRU]\VW\ZDÊWHQVDPNRGZUöĝQ\FKSURMHNWDFK QDSU]\NïDG]DSRPRFÈ VNU\SWöZSRPRFQLF]\FKOXEZW\F]HNM4XHU\ -HĝHOL]GHF\GXMHV]VLÚQDWDNLH UR]ZLÈ]DQLH]ZUöÊXZDJÚQDZV]HONLH]DOHĝQRĂFLZNRG]LH ZALEŻNOŚCI &]DVDPLGRSUDZLGïRZHJR G]LDïDQLDVNU\SWXNRQLHF]QHMHVW GRïÈF]HQLHLQQHJRVNU\SWXQD VWURQLH.LHG\WZRU]\V]VNU\SW RSDUW\QDLQQ\PVNU\SFLHWHQ drugiMHVWRNUHĂODQ\PLDQHP ]DOHĝQRĂFL 1DSU]\NïDGMHĝHOLWZRU]\V] VNU\SWZ\NRU]\VWXMÈF\M4XHU\ WRG]LDïDQLHWDNLHJRVNU\SWX MHVWX]DOHĝQLRQHRGGRïÈF]HQLD ELEOLRWHNLM4XHU\QDVWURQLH :SU]HFLZQ\PUD]LHQLHEÚG]LH PRĝQDXĝ\ZDÊMHMVHOHNWRUöZ LPHWRG 'REU\PUR]ZLÈ]DQLHPMHVW ZVND]\ZDQLH]DOHĝQRĂFLZNRPHQWDU]XQDSRF]ÈWNXVNU\SWX DE\E\ï\MDVQHGODLQQ\FK SURJUDPLVWöZ2VWDWQLDIXQNFMD ZRPDZLDQ\PSU]\NïDG]LH VïXĝ\GRVSUDZG]HQLDZLHNX Xĝ\WNRZQLNDDMHMSUDZLGïRZH G]LDïDQLH]DOHĝ\RGREHFQRĂFL LQQHJRVNU\SWX WIELOKROTNE UŻYCIE KODU KONTRA JEGO POWIELANIE .LHG\PDV]GZD]HVWDZ\NRGX Z\NRQXMÈFHWRVDPR]DGDQLH PöZLP\RSRZLHODQLXNRGX 1DMF]ÚĂFLHMMHVWWRX]QDZDQH]D ]ïÈSUDNW\NÚZSURJUDPRZDQLX 3U]HFLZLHñVWZHPMHVWZLHORNURWQHZ\NRU]\VW\ZDQLHW\FK VDP\FKZLHUV]\NRGXZZLÚFHM QLĝW\ONRMHGQHMF]ÚĂFLVNU\SWX IXQNFMHWRGRVNRQDï\SU]\NïDG ZLHORNURWQHJRXĝ\FLDWHJR VDPHJRNRGX 3UDZGRSRGREQLHVï\V]DïHĂ ĝHSURJUDPLĂFLRNUHĂODMÈWR PLDQHP]DVDG\'5< DQJ GRQĳWUHSHDW\RXUVHOIĽķQLH SRZWDU]DMVLÚĵ ķ.DĝG\VNUDZHN GDQ\FKPXVLPLHÊSRMHG\QF]È MHGQR]QDF]QÈL]GHF\GRZDQÈ UHSUH]HQWDFMÚZV\VWHPLHĵ 5HJXïDWD]RVWDïDVIRUPXïRZDQDSU]H]$QGUHZ+XQWD L'DYHĳD7KRPDVDZNVLÈĝFH ]DW\WXïRZDQHM3UDJPDW\F]Q\ SURJUDPLVWD2GF]HODGQLNDGR PLVWU]D +HOLRQ USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH $E\E\ïRPRĝOLZHZLHORNURWQH Xĝ\FLHWHJRVDPHJRNRGXSURJUDPLĂFLEDUG]RF]ÚVWRWZRU]È ]ELRU\NUöWV]\FKVNU\SWöZ ]DPLDVWMHGQHJRGïXJLHJR 'ODWHJRWHĝZLHORNURWQHXĝ\FLH NRGXPRĝHGRSURZDG]LÊGR SRZVWDQLDMHV]F]HZLÚNV]\FK ]DOHĝQRĂFLZNRG]LH3U]\NïDG VSRWNDïHĂMXĝZF]HĂQLHMZSRVWDFLIXQNFMLSRPRFQLF]\FKGOD SURFHGXUREVïXJL]GDU]Hñ7HUD] SR]QDV]NROHMQ\SU]\NïDG WERYFIKACJA UDZIELENIA ZGODY PRZEZ RODZICÓW 3RGF]DVZSURZDG]DQLDVNU\SWX SU]H]QDF]RQHJRGRZHU\ğNDFML ZVSRPQLDQRĝHIRUPXODU] Z\NRU]\VWXMHNLONDVNU\SWöZ XVSUDZQLDMÈF\FKVWURQÚ 6NU\SW\WH]DF]QLHV]SR]QDZDÊ QDNROHMQHMVWURQLH2MHGQ\P ]QLFKWU]HEDWXWDMSRZLHG]LHÊ SRQLHZDĝSRGF]DVZF]\W\ZDQLD VWURQ\XNU\ZDSROHZ\ERUX R]QDF]DMÈFH]JRGÚURG]LFöZ 7RSROHZ\ERUXEÚG]LHZ\ĂZLHWORQHSRQRZQLHW\ONRZWHG\ JG\Xĝ\WNRZQLNSRGDMHĝHPD ODWOXEPQLHM )XQNFMD validateParentsConsent() MHVWZ\ZRï\ZDQDWDNVDPR MDNGZLHZF]HĂQLHMV]HIXQNFMH SU]HSURZDG]DMÈFHRSHUDFMH VSUDZG]HQLD SDWU]SRGUR]G]LDï ķ:HU\ğNDFMDQLHVWDQGDUGRZDĵ :HZQÈWU]WHMIXQNFMLPDP\ 1. =PLHQQHSU]H]QDF]RQHGR SU]HFKRZ\ZDQLDSRODZ\ERUX GOD]JRG\XG]LHODQHMSU]H] URG]LFöZRUD]NRQWHQHUGOD HOHPHQWXWHJRSROD 2. 3U]\SLVDQLH]PLHQQHMvalid ZDUWRĂFLtrue 3. 3ROHFHQLHifVSUDZG]DF]\ NRQWHQHUGODSRODZ\ERUXnie MHVWXNU\W\2GE\ZDVLÚWRSU]H] SREUDQLHZDUWRĂFLDWU\EXWX classLXĝ\FLHSU]HGVWDZLRQHM ZUR]G]LDOHZSRGUR]G]LDOH ķ2ELHNW\JOREDOQHĽRELHNW 6WULQJĵIXQNFMLindexOf() do VSUDZG]HQLDF]\DWU\EXWPD ZDUWRĂÊhide-HĝHOLZDUWRĂÊ nie]RVWDQLH]QDOH]LRQDWR ZDUWRĂFLÈ]ZURWQÈindexOf() EÚG]LH-1 JAVASCRIPT 1 2 3 4 5 6 .RGZHU\ğNDFMLRGSRZLHG]LDOQ\ ]DVSUDZG]HQLHF]\URG]LFH XG]LHOLOLWDNLHPXXĝ\WNRZQLNRZL ]JRG\EÚG]LHXUXFKRPLRQ\W\ONR ZWHG\JG\ZVSRPQLDQHSROH Z\ERUXMHVWZ\ĂZLHWODQH 'ODWHJRWHĝG]LDïDQLHNRGX VSUDZG]DMÈFHJRXG]LHOHQLH ]JRG\SU]H]URG]LFöZ]DOHĝ\ RG SRQRZQHJRXĝ\FLD WHJR VDPHJRNRGXNWöU\VSUDZG]D F]\SROHZ\ERUXSRZLQQRE\Ê Z\ĂZLHWORQH7DNLHUR]ZLÈ]DQLH EÚG]LHG]LDïDïRRLOHLQQ\VNU\SW Z\ĂZLHWODMÈF\OXEXNU\ZDMÈF\ SROHZ\ERUX ]RVWDQLHGRïÈF]RQ\ QDVWURQLHSU]HGVNU\SWHPRGSRZLHG]LDOQ\P]DZHU\ğNDFMÚ 4. -HĝHOLSROHZ\ERUXQLHMHVW XNU\WHXĝ\WNRZQLNPDODW OXEPQLHM:WDNLPSU]\SDGNX SROHZ\ERUXMHVW]D]QDF]RQH DZDUWRĂFLÈ]PLHQQHMvalidMHVW true-HĝHOLQLHE\ïR]D]QDF]RQHZDUWRĂFLÈEÚG]LHfalse 5. -HĝHOLHOHPHQWMHVWQLHSUDZLGïRZ\QDVWÈSLGRGDQLHGR QLHJRNRPXQLNDWXREïÚG]LH 6. )XQNFMD]ZUDFDZDUWRĂÊ ]PLHQQHMvalidZVND]XMÈF W\PVDP\PF]\Xĝ\WNRZQLN RWU]\PDï]JRGÚURG]LFöZ c13/js/validation.js function validateParentsConsent() { var parentsConsent = document.getElementById(‚parents-consent’); var consentContainer = document.getElementById(‚consent-container’); var valid = true; =PLHQQDYDOLGRWU]\PXMHZDUWRĂÊWUXH if (consentContainer.className.indexOf(‚hide’) === -1) { -HĝHOLSROHZ\ERUXMHVWZ\ĂZLHWORQH valid = parentsConsent.checked; 8DNWXDOQLHQLH]PLHQQHMYDOLGMHVW]D]QDF]RQDOXEQLH if (!valid) { -HĝHOLQLHQDOHĝ\Z\ĂZLHWOLÊNRPXQLNDWREïÚG]LH setErrorMessage(parentsConsent, ‚Wymagana jest zgoda rodziców’); } } return valid; =ZUöFHQLHLQIRUPDFMLRSUDZLGïRZRĂFLHOHPHQWX } USPRAWNIENIA I WERYFIKACJA FORMULARZY SIECIOWYCH UKRYCIE POLA WYBORU DOTYCZĄCEGO ZGODY RODZICÓW -DN]REDF]\ïHĂQDSRSU]HGQLHMVWURQLHIRUPXODU] VXEVNU\SFMLZ\NRU]\VWXMHGZDGRGDWNRZHVNU\SW\ ZFHOXXVSUDZQLHQLDG]LDïDQLD2WRSLHUZV]\ ]QLFKNWöU\PDGRZ\SHïQLHQLDGZD]DGDQLD 8ĝ\FLHNRQWURONLGDW\ZM4XHU\8,ZFHOXZ\ĂZLHWODQLDWDNVDPRZ\JOÈGDMÈFHMNRQWURONLGDW\ ZHZV]\VWNLFKSU]HJOÈGDUNDFKLQWHUQHWRZ\FK 6SUDZG]HQLHF]\SROHZ\ERUXR]QDF]DMÈFH ]JRGÚURG]LFöZSRZLQQRE\ÊZ\ĂZLHWORQH 6SUDZG]HQLHMHVWSU]HSURZDG]DQHSRGF]DV RSXV]F]DQLDNRQWURONLGDW\ =JRGDURG]LFöZ MHVWNRQLHF]QDMHĂOLXĝ\WNRZQLNPDSRQLĝHM ODW • • 1. 8PLHV]F]HQLHVNU\SWXZIXQNFMLW\SX,,)( QLH SRND]DQRWHJRZRPDZLDQ\PGLDJUDPLH 2. 7U]\]PLHQQHM4XHU\SU]HFKRZ

JavaScript i jQuery: Interaktywne strony WWW dla każdego

Related documents

Products

Support

JavaScript i jQuery: Interaktywne strony WWW dla każdego

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib