8. Programmierung

Javascript als Basis für ein interaktives Quiz

Javascript ist eine Programmiersprache, die "clientseitig" ausgeführt wird. D.h. der Browser muss die Anweisungen interpretieren und die Ergebnisse anzeigen.

Die Anweisungen greifen auf das Objekt-System DOM zu. Damit können alle Objekte innerhalb des Browsers angesprochen und deren Attribute gelesen und geändert werden.

Ziel soll es sein, im Projekt einen interaktiven Anteil zu integrieren, der mit Javascript programmiert wurde. Typische Beispiele sind Multiple-Choice-Quizzes, Bildergalerien, interaktive Menüs oder kleine Spiele. Aber natürlich können auch eigene Ideen umgesetzt werden.

Im Folgenden werde ich die Grundlagen der Programmierung kurz anreißen und ein Beispiel zeigen.

Alles weitere haben andere schon viel ausführlicher als ich ausgearbeitet.

Zum Selberlernen empfehle ich euch folgende Links:

• Einsteiger-Tutorial ada7.de

• Javascript-Kurs in Deutsch

• Java-Script in SelfHTML

• Javascript Tutorial (sehr umfangreich) in deutsch

• Einsteiger-Anleitung in deutsch

• ein Java-Script-Wiki, sehr detailiert

Grundsätzliches zur Einbindung von JS

• Ein Script kann direkt im HTML-Dokument, aber auch in einer eigenen Datei, z. B. "meinscript.js", erstellt werden. Mehr dazu unter: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Einbindung_in_HTML

• Verlinkung zu einer externen Script-Datei im gleichen Ordner: <script src="meinscript.js"></script>

• Direkt im HTML-Dokument:
  Beispielquelltext Zeile 6 / Zeile 14:
  JS kann sowohl direkt im body des Dokuments als auch in einem separaten Block notiert werden. Voraussetzung in diesen Fällen ist ein tag der Form <script language="javascript" type="text/javascript">, der den JS-Teil ein- und mit </script> auch wieder ausleitet.

• Zeile 11 bis 13:
  In diesem Beispiel beinhaltet der JS-Block die Prozedur farbe(). Sowohl Prozeduren (das sind Programmblöcke) als auch Funktionen (sie verkörpern einen Wert) werden in JS als function notiert.

  • Der Kopf der enthält neben dem Schlüsselwort function eine Klammer, in der eventuell zu übergebende Argumente stehen können.

  • Der Anweisungsblock wird von {...} eingeschlossen und enthält die Anweisungen, die beim Aufruf dieser function ausgeführt werden sollen.

  • Im body unseres Beispiels sind zwei interaktive Objekte, ein Textfeld und ein Button, eingebaut. Diese Objekte werden durch eine id eindeutig identifizierbar, das ist für die Ansprache aus JS wichtig.

  • Zeile 22 bis 23: Die Textbox (id="tb1") vom Typ text hat den Inhalt "Name eingeben" und einige style-Eigenschaften.

  • Zeile 26 bis 28: Der Button (id="b1") ist vom Typ button und hat neben Inhalts- und Style-Eigenschaften einen sogenannten Event-Handler (Ereignis-Behandler), der bei einem bestimmten Ereignis aktiv wird. In diesem Fall ruft er onclick, also wenn er angeklickt wird, die function "farbe()" auf.

  • Zeile 12: Wenn der Button b1 geklickt wird, wird function farbe() ausgeführt, in der dann für das Objekt tb1 - die Textbox - die Hintergrundfarbe geändert wird.

  • Der Zugriff auf die Eigenschaften eines Objektes erfolgt in der Regel über die Punktschreibweise, d.h. ausgehend vom aktuellen Objekt, das ist in unserem Fall das HTML-Dokument, wird die das Objekt über seine id mit dem Attribut verbunden, dessen Wert man dann auslesen oder ändern kann. (tb1.style.backgroundColor = "#FF4B00";)

• • Die Hierarchie der Objekte und Attribute bzw. Methoden ist im DOM (Document Object Model) definiert.

Kontrollstrukturen

Kontrollstrukturen sind Befehle, mit denen der Programmablauf in Abhängigkeit von Ereignissen gesteuert werden kann. Dazu gehören Verzweigungen (Auswahl, Mehrfachauswahl, Alternative) und Wiederholungen (Schleifen, Zyklen).

Verzweigung

Bei der einfachen Auswahl wird eine Bedingung geprüft. Ist diese zutreffend (wahr), wird ein Anweisungsblock ausgeführt, ist sie nicht zutreffend (falsch), kann ein anderer Block ausgeführt werden. Der Else-Block kann auch weggelassen werden. Dann läuft das Programm einfach mit der nächsten Anweisung weiter.