====== JavaScript ====== Mit HTML werden die Struktur und der Inhalt von Webseiten beschrieben, mit CSS wird das Layout von Webseiten gestaltet und JavaScript verwendet man für Interaktivität von Webseiten. JavaScript ist eine objektorientierte Skriptsprache, die in Browsern eingesetzt wird. JavaScript ermöglicht es mittels Event-Handlern Nutzerinteraktionen auszuwerten und dementsprechend die Struktur, den Inhalt und das Layout einer Webseite zu verändern. Die Syntax von JavaScript ist ähnlich der von Java. Zur Entwicklung von Skripten setzt man im Firefox-Browser die Firebug-Erweiterung ein. Analog zu CSS kann man JavaScript direkt im HTML-Dokument speichern oder in eine separate js-Datei auslagern. Im nachfolgenden Beispiel wird dem Button Hinweis der Event-Handler onclick zugewiesen. Im zugehörigen Attributwert steht die JavaScript-Anweisung drin, die beim Anklicken ausgeführt werden soll, im Beispiel also der Aufruf der JavaScript-Funktion Hinweis(). JavaScript

Ein wichtiger

====== DOM – Document Object Model ====== Zur Realisierung der Interaktivität kann JavaScript auf das Document Object Model, also auf den Dokumentbaum zugreifen. Dieser steht als Objekt mit dem Namen document direkt zur Verfügung, muss also nicht erst mit einem Konstruktor erzeugt werden. Mit den Methoden getElementById, getElementsByName und getElementsByTagName kann man auf HTML-Elemente zugreifen (vgl. http://de.selfhtml.org/javascript/objekte/document.htm). Für jedes HTML-Element stehen spezifische Attribute und Methoden zur Bearbeitung zur Verfügung. Ein -Element hat natürlich andere Attribute als ein -Element. Wir betrachten dieses Beispiel: Tastaturereignisse

Tastaturereignisse

Dein Gezwitscher (max. 140 Zeichen):

0 Zeichen

{{:e1:1234.png?400|}} Dem textarea-Element wird über das onkeyup-Attribut die JavaScript-Methode zeigeAnzahlZeichen mit dem Parameter this.value zugewiesen. this bezieht sich auf das zugehörige textarea-Element, das ein Attribut value hat (http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#textarea) in dem der eingegebene Text „Hier wird getwittert!“ steht. In der JavaScript-Funktion zeigeAnzahlZeichen wird mit value.length die Länge (http://de.selfhtml.org/javascript/objekte/string.htm) des übergebenen String-Parameters value ermittelt und der Text " Zeichen" drangehängt. Mit document.getElement¬ById('AnzahlZeichen') wird im Dokument das HTML-Element gesucht, das im Attribut id den Wert AnzahlZeichen hat. Es handelt sich um das span-Element. Über innerHTML hat man lesenden und schreibenden Zugriff auf den Inhalt dieses Elements, also zu Beginn auf 0 Zeichen. Dieser Inhalt wird über die Zuweisung an innerHTML bei jedem Tastendruck aktualisiert. **Aufgaben** - Verwende getElementsByName anstelle von getElementById [[http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name|Siehe auch]] - Beschränke die Eingabe auf 140 Zeichen. ====== Variablen und Kontrollstrukturen ====== Eine ausführliche Zusammenstellung der JavaScript-Sprachbestandteile findet man unter http://webkompetenz.wikidot.com/html-handbuch:ecmascript-sprachbestandteile. Wir analysieren das RGB-Beispiel: Farben

Ändere die hässliche Hintergrundfarbe!

 Dem Button-Element wird über das Attribut onclick die JavaScript-Funktion setElementBackground zugewiesen. Als Parameter wird die ID der Farbfläche übergeben. Die JavaScript-Funktion berechnet zufällige red, green und und blue-Werte. In der String-Variablen rgb wird das Ergebnis zusammen¬gesetzt. Falls es ein HTML-Element mit dem Attribut id = 'Farbflaeche' gibt, so wird dessen Hinter¬grundfarbe auf die Zufallsfarbe gesetzt. **Aufgabe** Verwende document.getElementsByTagName, um im zweiten

-Element den rgb-Wert als String anzuzeigen. http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name ====== Verweise ändern ====== Im nächsten Beispiel werden dynamisch Verweise geändert. Coole Links

{{:e1:linkaendern.png?400|}} Über den Eventhandler onclick wird die JavaScript-Funktion CoolLink aufgerufen. Im JavaScript-Bereich ist eine Variable Links als Feld von fünf URL-Strings definiert. In der Variablen AktuellerLink wird der aktuelle Index in das Feld gespeichert. Beim Aufruf von CoolLink wird mit document.getElementById("CoolerLink") das -Element mit id="CoolerLink" bestimmt. Zuerst wird dessen href-Attribut und dann sein Inhalt auf den aktuellen Link gesetzt. Danach wird der Wert von AktuellerLink erhöht und bei Bedarf auf 0 gesetzt. CoolLink wird wegen des Eventhandlers onload auch nach dem Laden des Dokuments aufgerufen. **Aufgabe** Erweitere das Dokument so, dass zusätzlich AktuellerLink ausgegeben wird.