DHTML: dinamikus weblapok JavaScripttel és DOM-mal, lépésenként

A dinamikus HTML elnevezés sok kezdőt megtéveszt: azt hiszik, egy újabb nyelvet kell megtanulniuk. Valójában három dolog együttműködéséről van szó. A HTML adja a szerkezetet, a CSS a megjelenést, a JavaScript pedig a dokumentum-objektummodellen (DOM) keresztül menet közben módosítja mindkettőt. Ettől lesz az oldal „élő”: a menü lenyílik, a kép kicserélődik, az űrlap figyelmeztet a hiányzó mezőre.

Miért jó ezt videóból tanulni?

A dinamikus viselkedést nehéz leírni, mert időben történik. Egy képernyővideón látszik az egér mozgása, a reakció és az a pillanat, amikor a kódban egyetlen érték megváltoztatása más viselkedést eredményez. A szöveges tananyag ezt csak ábrák sorozatával tudja visszaadni.

A javasolt leckesor

Események. Kattintás, egér fölé vitel, betöltés, űrlap elküldése. Mindegyikhez egy apró, azonnal kipróbálható példa.

Elemek elérése. Hogyan találja meg a szkript azt az elemet, amelyet módosítani akar, és hogyan változtatja meg a stílusát, a szövegét vagy a láthatóságát.

Klasszikus feladatok. Lenyíló menü, képcsere egérmozgásra, egyszerű képgaléria, a beírt adatok ellenőrzése elküldés előtt. Ezek jól mutatják, hogyan áll össze a három réteg.

Böngészőfüggetlenség. Ugyanaz a szkript az egyik böngészőben működik, a másikban nem. A jó lecke megmutatja, hogyan kell ellenőrizni, hogy egy funkció elérhető-e, ahelyett hogy a böngésző nevéből találgatnánk.

Mértékkel

A korai weben sok oldal villogott, gördült és követte az egeret, pusztán azért, mert megtehette. Egy felelős tananyag az effektusok mellett a mértéket is tanítja: a dinamikus elem akkor jó, ha a látogató dolgát könnyíti meg, például rövidebb űrlapot vagy áttekinthetőbb menüt ad. Ha csak díszít, a figyelmet viszi el a tartalomról.

Gyakorlat

Jó gyakorló feladat egy meglévő, statikus oldal kiegészítése egy összecsukható GYIK-résszel és egy űrlap-ellenőrzéssel. A tanuló ilyenkor a saját oldalán látja a különbséget. Az előzmények a CSS és XHTML témájában találhatók.