Programming the World Wide Web |
Fejezet6 |
Dinamikus dokumentumok készítése Javascript-tel
- 6.1 Bevezető
- 6.2 Elemek elhelyezése
- 6.3 Elemek mozgatása
- 6.4 Elemek láthatósága
- 6.5 A szín illetve betűtípus módosítása
- 6.6 Dinamikus tartalom
- 6.7 Elemek egymásra helyezése
- 6.8 Az egérkurzor pozíciójának meghatározása
- 6.9 Egérkattintás által kiváltott reakció
- 6.10 Elemek lassú mozgatása
- 6.11 Elemek átrendezése „fogd és dobd” (drag and drop) módszerrel
- 6.12 Összegzés
Kevésbé hivatalos megfogalmazás szerint, egy dinamikus XHTML dokumentum egy olyan böngészőben megjelenített XHTML dokumentumot jelent, amely a megjelenítés közben/után valamiképpen módosítható. A leggyakrabban használt, dinamikus dokumentumot eredményező, kliens-oldali megközelítés a Javascript használata, melynek segítségével a megjelenített dokumentumnak megfelelő objektum modell - angolul Document Object Model (DOM)- különböző elemeit módosíthatjuk. Ezek a változások felléphetnek a felhasználók kifejezett kérésére, szabályos időközönként vagy kiválthatják őket a böngésző eseményei.
Az XHTML elemek eredetileg bárhová helyezhetők a böngésző kijelzőjén. Amennyiben már el vannak helyezve egy bizonyos módon, az elemek pozíciója dinamikusan változtatható. Az egyes elemeket eltűntethetjük majd újból láthatóvá tehetjük. A dokumentum háttérszíne, illetve az egyes elemek színe szintén változtatható. Módosítható egy megjelenített szövegrész betűtípusa, betűmérete és betűstílusa, sőt, egy elem tartalma is módosítható. Egy dokumentumban meghatározható az egymást átfedő elemek elhelyezkedési sorrendje (fentről lefele, egy jól meghatározott sorrendben helyezkednek el egymás alatt), és ez a sorrend is dinamikusan változtatható. Az egérkurzor pozíciója a böngészőoldalon meghatározható valamely egérgombra való kattintáskor. Megoldható, hogy az elemek lassan erre-arra mozogjanak a böngészőablakban. Az elemeket megfelelőképpen definiálva lehetővé tehetjük, továbbá, hogy a felhasználó a húz-és-dobd (drag-and-drop) technikát használva ezeket a böngészőoldal tetszőleges pozíciójába vigye. Ezen fejezet a Javascript technológiát tárgyalja, melynek segítségével mindez megvalósítható.