Dynamische Texte

• Grundidee:
  • bei Doppelklick auf eine Abkürzung wird der Text durch eine Langform ersetzt
  • ersetzter Text wird farbig markiert
  • erneuter Doppelklick → zurück zur Abkürzung
  • Voraussetzung: Texte zum Zugriff in neutrales <span> eingeschlossen
  • Beispiel (Quelle)
• Stilelemente für Klassen:
  • Klasse: beliebiger Name für Elemente mit gleicher Stilvorgabe
  • Definition eines Stils für Klasse bunt
    • .bunt { color:#cc2080; }
  • in eigener Style-Datei unterbringen oder im <style>-Element im Header
  • Zuweisung mit Universal-Attribut class
    • <span class="bunt">
• Elementbaum:
  • enthält alle HTML-Elemente
  • Texte sind Endknoten
  • Beispielbaum für einfache Seite
    • 
• node-Objekt:
  • beschreibt einen Knoten
  • Datenfeld childNodes mit Array der Kindknoten
  • wichtige Methoden
    • setAttribute(NAME, NEUERWERT)
    • replaceChild(NEUERKNOTEN, KINDKNOTEN)
    • appendChild(NEUERKNOTEN)
  • Methoden von document zum Erzeugen von Knoten:
    • createTextNode(TEXT)
    • createElement(TYP)
• Funktionsweise:
  • Lang- und Kurzform sowie aktueller Status in Arrays
  • span des Textelements verwendet id als Array-Index
  • Attribut id muss mit Buchstaben beginnen → index 3 wird zu id t3
  • Handler substituteText bekommt Index als Argument
  • erzeugt neues Textelement und ersetzt aktuelles Kindelement des span