Hauptmenü

Untermenü

JavaScript - Praxistutorial 1 - Überblick

1. Die Abschnitte

2. Das Ziel

Da ich früher von Zeit zu Zeit immer mal wieder Mails von Anfängern bekommen habe, die sich beklagten, dass ein grundlegender Einstieg in JavaScript hier nicht vorhanden sei, gehe ich jetzt in diesem Tutorial auf die elementaren Dinge ein. Wir werden uns hier also mit einfachen Event-Handlern beschäftigen, etwas über den Geltungsbereich von Variablen erfahren und lernen, wie man bereits existierende Objekte nutzt.

3. Das Thema

Wir basteln uns mal eine einfache Bildergalerie. Und die nehmen wir uns aus meinem Rom-Urlaub von 2006. Da lernt ihr nicht nur JavaScript, sondern bekommt auch ein klein wenig Bildung mit auf den Weg. Dabei bauen wir uns eine dieser ach so beliebten Scrollnavigationen, wo man die Vorschau-Bilder nach links und rechts bewegen kann.

4. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien müssen dabei vorhanden sein:

Dateien

Die Bilder

... habe ich ganz einfach von 0 bis 15 durchnummeriert. Damit haben wir eine einfache Möglichkeit, um sie entsprechend anzusteuern. Gut, moderne Digitalkameras machen das anders. Die benennen die dann zum Beispiel SANY0001.jpg bis SANY0016.jpg. Allerdings müssen die dann eh bearbeitet und neu abgespeichert werden, so dass man dann meine Namensgebung verwenden kann. Außerdem, wen juckst es? Hier geht es um JavaScript.

5. Das Niveau

... ist wie zu Beginn eigentlich immer sehr niedrig. Wir werden auf die denkbar einfachste Weise an die Programmierung herangehen. Daher verwende ich auch hier einen Stil, der mittlerweile doch recht verpönt ist. Aber ich denke, für den ersten Einstieg sollten wir ihn trotzdem benutzen, da er dem grundsätzlichen Verständnis förderlich ist. Wenn euch das Prinzip in Fleisch und Blut übergegangen ist, könnt ihr euch dann mit dem "moderneren" DOM-Scripting auseinander setzen. Bis dahin werden wir also HTML- und JavaScript-Code teilweise miteinander vermischen.

6.Vorkenntnisse

Wen ihr euch mit diesem Tutorials auseinandersetzt, so solltet ihr zumindest über gute CSS-Kenntnisse verfügen, denn dazu werde ich hier nichts sagen. Schaut euch auf jeden Fall mal die styles.css an, damit ihr begreift, warum die Scrollnavigation funktioniert. Außerdem solltet ihr die Theorie zu JavaScript zumindest mal überflogen haben.

Trotzdem ein Tipp

Entfernt mal in der styles.css den Eintrag overflow: hidden; beim Selektor div.scroller. Danach wird euch einiges klarer sein, wenn ihr euch den Code aus der Lösung(!) im Browser anseht.

7. Die Schreibweise

Bei Event-Handler war es früher Usus, die so genannte Camel-Caps-Variante zu nehmen, also onMouseUp, onLoad oder onClick. Das kann man auch weiterhin tun, solange man als Doctype-Definition kein(!) XHTML nimmt. Denn da muss man sie entsprechend der Vorgaben komplett klein schreiben, also zum Beispiel onmousedown. Und genau das mache ich hier auch.

weiter zum nächsten Abschnitt