JS00.qxd
9/27/2006
1:34 PM
Page v
TARTALOMJEGYZÉK A szerzõrõl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Bevezetés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii I. rész A webes parancsnyelvek és a JavaScript 1. óra Ismerkedés a JavaScripttel A webes programozás alapjai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Hogyan illeszkedik a JavaScript a weboldalba? . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 A böngészõk és a JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 A JavaScript képességei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Parancsnyelvek a JavaScript mellett . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2. óra Egyszerû programok készítése Eszközök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Mennyi az idõ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 A program eleje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 JavaScript utasítások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 A kimenet elõállítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 A program elhelyezése egy weboldalon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 A program tesztelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Gyakorlat: külön JavaScript fájl használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 3. óra A JavaScript programok mûködése Alapfogalmak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 A JavaScript nyelvtani szabályai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 A megjegyzések használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Javasolt programozási eljárások a JavaScriptben . . . . . . . . . . . . . . . . . . . . . . . . . 40 Gyakorlat: eseménykezelõ használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 4. óra A dokumentumobjektum-modell (DOM) mûködése A DOM felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 A DOM szintjei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 A window objektumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Weboldalak kezelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 A már látott oldalak listájának elérése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 A location objektum használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Gyakorlat: Back és Forward gombok létrehozása . . . . . . . . . . . . . . . . . . . . . . . . 53 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
JS00.qxd
9/27/2006
1:34 PM
Page vi
vi Tanuljuk meg a JavaScript használatát 24 óra alatt Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 II. rész A JavaScript alapjai 5. óra Változók, karakterláncok és tömbök használata A változók használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Kifejezések és mûveletek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 A JavaScript adattípusai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Adattípusok közötti átalakítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 String objektumok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Munka szövegrészletekkel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Számokat tartalmazó tömbök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Karakterlánctömbök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Számtömbök rendezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Gyakorlat: nevek rendezése és megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 6. óra Függvények és objektumok használata Függvények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Az objektum fogalma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Programok egyszerûsítése objektumokkal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Beépített objektumok testreszabása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Gyakorlat: adatok tárolása objektumokban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 7. óra A vezérlés szabályozása feltételekkel és ciklusokkal Az if utasítás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Feltételek megfogalmazása röviden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Több feltétel ellenõrzése az if és else utasításokkal . . . . . . . . . . . . . . . . . . . . . . 102 Több feltétel kezelése a switch utasítással . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 A for ciklus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 A while ciklus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 A do...while ciklus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 A ciklusok felhasználási lehetõségei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Objektumtulajdonságok bejárása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Gyakorlat: tömb kezelése ciklussal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 8. óra Beépített függvények és programkönyvtárak használata A Math objektum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 A Math függvényeinek használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Dátumok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
JS00.qxd
9/27/2006
1:34 PM
Page vii
Tanuljuk meg a JavaScript használatát 24 óra alatt vii Harmadik féltõl származó programkönyvtárak . . . . . . . . . . . . . . . . . . . . . . . . . 125 Egyéb programkönyvtárak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Gyakorlat: Különleges hatások programkönyvtár segítségével . . . . . . . . . . . . . 127 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 III. rész A DOM részletesebben 9. óra Események kezelése Az eseménykezelõk mûködése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Az egér eseményei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 A billentyûzet eseményei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Az onLoad és onUnload események használata . . . . . . . . . . . . . . . . . . . . . . . . 147 Gyakorlat: leírások az oldalakon lévõ hivatkozásokhoz . . . . . . . . . . . . . . . . . . 148 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 10. óra Ablakok és keretek használata Ablakok kezelése objektumokon keresztül . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Ablakok mozgatása és átméretezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Idõzítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Párbeszédablakok megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Keretek használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Gyakorlat: keretek használata a JavaScripttel . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 11. óra Adatgyûjtés ûrlapok segítségével A HTML ûrlapok alapjai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 A form objektum használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Ûrlapok eseményeinek kezelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Ûrlapról származó adatok megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Ûrlapadatok elküldése elektronikus levélben . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Gyakorlat: ûrlap-érvényesítés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 12. óra Stíluslapok használata Stílus és tartalom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Stíluslapok meghatározása és használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 CSS tulajdonságok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Egy egyszerû stíluslap létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Külsõ stíluslapok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Stílusok vezérlése JavaScriptbõl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Gyakorlat: dinamikus stílusok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
JS00.qxd
9/27/2006
1:34 PM
Page viii
viii Tanuljuk meg a JavaScript használatát 24 óra alatt Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 13. óra A W3C DOM használata A DOM és a dinamikus HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 A DOM szerkezete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Elhelyezhetõ elemek létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Gyakorlat: mozgatható réteg készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 14. óra A DOM további lehetõségei A DOM csomópontok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Objektumok elrejtése és felfedése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Az oldalon lévõ szöveg módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Szöveg kiírása az oldalra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Gyakorlat: navigációs fa készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 IV. rész A JavaScript haladó lehetõségei 15. óra Nem tolakodó programok készítése A programírás alapelvei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Böngészõadatok lekérése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 A böngészõ adatainak megjelenítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Böngészõfüggetlen programok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 A JavaScriptet nem ismerõ böngészõk támogatása . . . . . . . . . . . . . . . . . . . . . . 250 Gyakorlat: nem tolakodó program készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 16. óra Hibakeresés A hibák elkerülése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Alapszintû hibakeresõ eszközök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Hibakezelõk készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Fejlett hibakeresõ eszközök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Gyakorlat: egy program hibáinak megkeresése . . . . . . . . . . . . . . . . . . . . . . . . . 271 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 17. óra AJAX: távoli parancsvégrehajtás Az AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Egyszerû AJAX könyvtár készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 AJAX teszt készítése a könyvtár segítségével . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
JS00.qxd
9/27/2006
1:34 PM
Page ix
Tanuljuk meg a JavaScript használatát 24 óra alatt ix Hibakeresés az AJAX alkalmazásokban . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Gyakorlat: élõ keresõûrlap készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Gyakorlat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 18. óra Greasemonkey: a böngészés élményének javítása a JavaScriptttel A Greasemonkey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 A felhasználói parancsfájlok használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Saját felhasználói parancsfájlok készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Egyszerû felhasználói parancsfájl készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Gyakorlat: felhasználói parancsfájl készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 Gyakorlat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 V. rész Multimédiás alkalmazások készítése a JavaScript segítségével 19. óra Képek és animáció Dinamikus képek használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Váltóképek készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Egy egyszerû JavaScript diabemutató . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 Gyakorlat: a diabemutató animálása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 20. óra Hangok és bõvítmények használata Mire jók a bõvítmények? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336 A JavaScript és a Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 Hangok lejátszása a JavaScripttel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Hangok kipróbálása a JavaScripttel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Gyakorlat: zene lejátszása az egér használatával . . . . . . . . . . . . . . . . . . . . . . . . 344 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 VI. rész Összetett programok készítése 21. óra Lenyíló menük készítése a JavaScripttel Lenyíló menük tervezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 A lenyíló menü viselkedésének programozása . . . . . . . . . . . . . . . . . . . . . . . . . 359 Gyakorlat: a menü csinosítása a CSS segítségével . . . . . . . . . . . . . . . . . . . . . . . 363 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Kérdések és válaszok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 22. óra Játék az élet A játék . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 A HTML dokumentum elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 A program megírása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
JS00.qxd
9/27/2006
1:34 PM
Page x
x Tanuljuk meg a JavaScript használatát 24 óra alatt A játék megjelenésének szabályozása a CSS segítségével . . . . . . . . . . . . . . . . . 376 Gyakorlat: a játék összerakása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 23. óra JavaScript alkalmazások készítése Gördülõ szöveget tartalmazó ablak létrehozása . . . . . . . . . . . . . . . . . . . . . . . . 385 Stíluslapváltás a JavaScript segítségével . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Gyakorlat: dinamikus ûrlap készítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 24. óra A JavaScript jövõje JavaScript-lehetõségek haladóknak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 A jövõ webes technológiái . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Gondoljunk a jövõre! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Áttérés más nyelvekre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Gyakorlat: „húzd és ejtsd” objektumok létrehozása . . . . . . . . . . . . . . . . . . . . . . 406 Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Kérdezz-felelek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 VII. rész Függelékek A függelék További JavaScript-források Más könyvek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 JavaScript-honlapok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Webhelyfejlesztés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 A könyv honlapja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 B függelék JavaScript-fejlesztõeszközök HTML-érvényesítõk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Hibakeresõ eszközök . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 C függelék Szószedet D függelék A JavaScript áttekintése Beépített objektumok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Objektumok létrehozása és testreszabása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 JavaScript-utasítások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 Beépített JavaScript-függvények . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 E függelék A DOM áttekintése DOM Level 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 DOM Level 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 Tárgymutató 443
