Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
e1:javascript [2017/12/09 08:01] – angelegt admin03 | e1:javascript [2017/12/09 08:09] (aktuell) – admin03 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | **JavaScript** | + | ====== |
Mit HTML werden die Struktur und der Inhalt von Webseiten beschrieben, | Mit HTML werden die Struktur und der Inhalt von Webseiten beschrieben, | ||
Zeile 24: | Zeile 25: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | ====== 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, | ||
+ | |||
+ | <code html> | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | function zeigeAnzahlZeichen(value) { | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <p> | ||
+ | Dein Gezwitscher (max. 140 Zeichen):< | ||
+ | < | ||
+ | onkeyup=" | ||
+ | </ | ||
+ | <span id=" | ||
+ | </p> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | {{: | ||
+ | |||
+ | 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, | ||
+ | |||
+ | **Aufgaben** | ||
+ | |||
+ | - Verwende getElementsByName anstelle von getElementById [[http:// | ||
+ | - Beschränke die Eingabe auf 140 Zeichen. | ||
+ | |||
+ | ====== Variablen und Kontrollstrukturen ====== | ||
+ | Eine ausführliche Zusammenstellung der JavaScript-Sprachbestandteile findet man unter http:// | ||
+ | Wir analysieren das RGB-Beispiel: | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <script language=" | ||
+ | function setElementBackground( elementID ) { | ||
+ | var red = Math.floor(Math.random() * 256); | ||
+ | var green = Math.floor(Math.random() * 256); | ||
+ | var blue = Math.floor(Math.random() * 256); | ||
+ | var rgb = ' | ||
+ | var obj = document.getElementById(elementID); | ||
+ | if (obj != null) { | ||
+ | obj.style.background = rgb; | ||
+ | document.getElementsByTagName(" | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | <style type=" | ||
+ | # | ||
+ | width: | ||
+ | padding: | ||
+ | border: | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | <button onclick=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | 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 = ' | ||
+ | |||
+ | **Aufgabe** | ||
+ | Verwende document.getElementsByTagName, | ||
+ | |||
+ | ====== Verweise ändern ====== | ||
+ | Im nächsten Beispiel werden dynamisch Verweise geändert. | ||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | var Links = [ | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | var AktuellerLink = 0; | ||
+ | |||
+ | function CoolLink() { | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | AktuellerLink += 1; | ||
+ | if (AktuellerLink >= Links.length) | ||
+ | AktuellerLink = 0; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | <body onload=" | ||
+ | <div style=" | ||
+ | <a id=" | ||
+ | </ | ||
+ | <button type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | {{: | ||
+ | Ü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(" | ||
+ | CoolLink wird wegen des Eventhandlers onload auch nach dem Laden des Dokuments aufgerufen. | ||
+ | |||
+ | **Aufgabe** | ||
+ | Erweitere das Dokument so, dass zusätzlich AktuellerLink ausgegeben wird. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||