Sprachgrundlagen und erste Anwendungen

In der ersten Woche des Workshops beschäftigen wir uns zunächst mit den wichtigsten JavaScript-Grundlagen. Sie erfahren, wie Sie JavaScript in HTML einbinden, wie Sie mit Variablen Ihr Programm flexibel gestalten oder mit Verzweigungen auf unterschiedliche Situationen reagieren.

Am Ende der ersten Woche

• kennen Sie die JavaScript-Syntax,

• haben wichtige Sprachelemente wie Arrays, Schleifen und Bedingungen kennen gelernt,

• wissen, wie Sie sich mit Funktionen die Arbeit erleichtern

• und wie Sie Fehler in Ihrem Code aufspüren.

Ganz praktisch arbeiten Sie dabei mit einer Beispiel-Website und sorgen dafür, dass

• je nach Uhrzeit eine andere Begrüßung ausgegeben wird,

• die Seite zufällig eines von mehreren Bildern anzeigt,

• das aktuelle Datum angezeigt wird.

• Außerdem erstellen Sie ein kleines Quiz.

Formularüberprüfung und Bildwechsel

In der zweiten Woche des Workshops erstellen Sie ganz typische JavaScript-Anwendungen. Sie überprüfen, ob ein Benutzer sinnvolle Angaben bei Formularen gemacht hat. Dabei greifen Sie auf die einzelnen unterschiedlichen Formularelemente zu und lesen den Zustand aus. Außerdem erfahren Sie, wie Sie die Bilder auf Webseiten per JavaScript verändern und einfache Animationen erstellen.

Am Ende der zweiten Woche

• sind Sie fit in der Formularüberprüfung,

• haben die Kenntnisse der ersten Woche vertieft und sind souveräner im Umgang mit Funktionen,

• wissen Sie, wie man auf die Bilder einer Webseite zugreift.

Dafür erweitern Sie Ihre Beispiel-Site um

• animierte Produktbilder und Bildergalerie,

• eine sich selbst aktualisierende Datumsangabe.

• Außerdem programmieren Sie die Überprüfung eines Kontaktforumlars.

Pop-up-Fenster, DOM und fortgeschrittene Techniken

In der dritten Woche des Workshops erstellen Sie weitere typische JavaScript-Anwendungen wie Pop-up-Fenster. Dabei erfahren Sie, wie Sie Pop-up-Fenster so gestalten, dass sie den Surfern Nutzen bringen und die Inhalte sich auch bei ausgeschaltetem JavaScript nutzen lassen. Außerdem sehen Sie, wie Sie auf die History zugreifen und Links erstellen, mit denen man eine Seite zurückgeht. Zusätzlich geht es um fortgeschrittene Möglichkeiten, auf Seitenelemente per DOM (Document Object Mode) zuzugreifen. Schließlich lernen Sie das heute wichtige Konzept von unobtrusive JavaScript kennen, das heißt, wie Sie Ihren JavaScript-Code ganz getrennt vom HTML-Code halten und JavaScript so einsetzen, dass die Webseite auch bei ausgeschaltetem JavaScript funktioniert.

Am Ende der dritten Woche

• kennen Sie alle Finessen von Pop-up-Fenstern,

• haben weitere typische Anwendungen programmiert,

• können Sie Inhalte per DOM auslesen und neue erzeugen.

In dieser Woche bekommt unsere Beispielsite

• benutzerfreundliche Pop-up-Fenster,

• Links, mit denen die Nutzer wieder auf die vorangegangene Seite kommen oder ein Dokument direkt ausdrucken können,

• ein sich automatisch erstellendes Inhaltsverzeichnis.

Animationen mit jQuery

In der vierten Woche des Workshops lernen Sie ein mächtiges Tool für fortgeschrittene Anwendungen kennen. Statt viele Zeilen selbst zu programmieren, können Sie die jQuery-Bibliothek für tolle Effekte und praktische Anwendungen in ein paar Zeilen Code einsetzen. Sie lernen, wie Sie Elemente dynamisch ein- und ausklappen und viele weitere Anwendungen über Plug-ins nutzen können.

Am Ende der vierten Woche

• kennen Sie die Basics von jQuery,

• kennen Sie die Objekt-Literalsyntax und anonyme Funktionen (das braucht man bei allen "modernen" JavaScript-Anwendungen),

• wissen Sie, wie Sie mit jQuery auf beliebige Elemente zugreifen,

• haben Animationen mit jQuery erstellen,

• können Plug-ins für fast beliebige Anwendungen mit ein paar Zeilen Code anpassen und in Ihre Webseite integrieren.

Dafür bekommt unsere Beispielsite zu guter Letzt noch

• eine FAQ-Liste, bei der man die Antworten durch Klick auf die Frage ein- und ausblenden kann,

• eine Navigation über Tabs,

• eine Lightbox-Bildervorschau sowie

• sortierbare Tabellen.