Hello World
* **** \\ HTML-Element (-Tag)
* **href** \\ href-Attribut mit dem Wert "index.html"
* **id** \\ id-Attribut (Wichtig: Eindeutig auf einer Website)
* **style** \\ style-Attribut mit CSS-Anweisung
* **"Hello World"** \\ Inhalt des -Tags (Können auch weitere HTML-Tags sein)
Dies Begriffe sind wichtig, da JavaScript Funktionen auf bestimmte Teile eines HTML-Elements zugreifen. [[http://www.w3schools.com/jsref/dom_obj_all.asp|The HTML DOM Element Object]]
==== Begriffe eines HTML-Dokuments ====
Ein HTML-Dokument hat folgenden Aufbau (nicht vollständig):
Text
* Das ''body''-Tag ist in diesem Fall der "Elternknoten des" ''div''- und ''a''-Tags (Es umschließt diese) - anders herum sind diese beiden Kindknoten vom ''body''-Tag
* Das ''body''-Tag ist aber nur der **direkte** Elternknoten des ''div''
* Das ''div''-Tag ist wiederum der **direkte** Elternknoten des ''a''
* Das ''p''-Tag liegt auf der selben Ebene, wie das ''div''-Tag (Siehe Einrückung)
{{:javascripting:html.png|HTML Aufbau als Baum}}
Der Aufbau eines HTML-Dokuments kann auch als "Baum" dargestellt werden
Das ist wichtig, da beim Entfernen von Kindelementen, nur direkte Kindknoten gelöscht werden können.
===== Inhalt eines HTML-Element verändern =====
Um ein HTML Element anzusprechen, muss man es in irgendeiner Weise klassifizieren und finden können. Das geht zum Beispiel über das HTML-Attribut ''id'' (Diese sollte in einer Seite eindeutig sein).
Hat man das passende Element gefunden, kann man bspw. dessen Inhalt ändern.
Der Ausdruck ''document.getElementById("important").innerHTML'' bedeutet:
* Suche im gesamten HTML-Inhalt (''document'')
* nach einem HTML-Element mit der id "important" (''getElementById("important")'')
* und hole die Inhalts-Eigenschaft (''innerHTML'').
Die einzelnen Ausführungsschritte werden mit einem Punkt verbunden.
// Gibt "Hello World" in der Konsole aus
console.log(document.getElementById("important").innerHTML)
// Ändert "Hello World" in "Goodbye World"
document.getElementById("important").innerHTML = "Goodbye World"
''document'' ist ein spezielles JavaScript-Objekt und wird beim laden einer HTML-Seite im Browser erzeugt. Es bildet den Wurzelknoten und ist somit der Elternknoten aller anderer HTML-Elemente. Von ihm aus lassen sich alle HTML-Element per JavaScript erreichen! (Siehe dazu: [[http://www.w3schools.com/jsref/dom_obj_document.asp|The HTML DOM Document Object]])
Oberhalb von ''document'' befindet sich noch das ''window''-Objekt. Es enthält unter anderem Informationen über das aktuelle Browser-Fenster, wie die Höhe und Breite, sowie die Historie. (Siehe dazu: [[http://www.w3schools.com/jsref/obj_window.asp|The Window Object]])
Einzeilige Kommentare werden mit "%%// ...%%" ausgezeichnet, Mehrzeilige mit "/* ... */".
// Einzeiliger Kommentar
// Noch einer
/*
Mehr-
zeiliger
Kommentar
*/
===== HTML-Attribut ändern =====
Auch die Attribute (Eigenschaften) eines HTML-Elements können verändert werden. Attribute sind Schlüssel / Wert Paare innerhalb des öffnenden HTML Tags. Schlüssel sind bspw. ''src'', ''target'' oder ''href'' denen mit einem "=" in Anführungszeichen ein Wert zugewiesen wird (Sonderfälle sind ''id'', ''class'' und ''style'').
// Ändert das Ziel des Links auf "JS_AEG_L2.html" (Das Attribut wird verändert)
document.getElementById("important").href = "JS_AEG_L2.html";
// Linkziel wird in neuem Fenster geöffnet (Das Attribut wird neu hinzugefügt)
document.getElementById("important").target = "_blank";
===== Aussehen eines HTML-Elements verändern (CSS) =====
Besonders wichtig ist das Style-Attribut. Eine einfache Syntax ermöglicht es, das Aussehen des HTML-Elements sehr leicht zu ändern.
// Speichere in der Variablen "element" den Wert von document.getElementById("important")
var element = document.getElementById("important");
// Setzt die Schriftgroesse auf 25px
// Entspricht: document.getElementById("important").style.fontSize = "25px";
element.style.fontSize = "25px";
// Versteckt das Element (Das Element ist aber noch da!)
element.style.display = "none";
// Zeigt das Element wieder an
element.style.display = "block";
''**var**'' gefolgt von einem Namen, deklariert eine Variable. Mit einem "=" kann dieser ein Wert zugewiesen werden. Im normalfall wird die Variable mit einem sprechenden Namen versehen, so dass klar ist, was sie enthält.
var x = 1;
console.log(x);
// 1
x = 3;
console.log(x*2);
// 3 * 2 = 6
x = "hallo";
console.log(x);
// hallo
===== HTML-Element hinzufügen =====
Um ein Html-Element hinzuzufügen muss folgendes getan werden:
* Das neue Element muss erstellt werden \\ ''createElement("h2")''
* Das Element bekommt einen Inhalt \\ ''innerHTML''
* Das Element braucht einen übergeordneten Knoten und wird als Kindknoten eingefügt \\ ''appendChild()''
// Speichere das HTML-Element in der Variable "newElement"
var newElement = document.createElement("h2");
// Fülle den Inhalt von newElement mit "Hallo Neue Welt"
newElement.innerHTML = "Hallo Neue Welt";
// Weise newElement die id newElementId zu
newElement.id = "newElementId";
// Füge das neue Element unterhalb vom -Tag als letztes Element ein
document.body.appendChild(newElement);
===== HTML-Element löschen =====
Im unterschied zum Ausblenden eines HTML-Elements (via CSS), kann ein Element auch komplett entfernt werden. Dazu muss es von seinem "Elternknoten", also seinem umschließenden HTML-Element, gelöst werden.
// Speichere das Html-Element in einer Variablen "element" (Kindknoten)
var element = document.getElementById("important");
// Entferne Kind "element" aus dem Elter "body"
// Funktioniert in diesem fall nur,
// wenn das Element direkt eine Ebene unter dem body Tag liegt
document.body.removeChild(element);
===== Zusammenfassung =====
In dieser Lektion haben wir wichtige Begriffe eines HTML-Elements aufgefrischt und die Darstellungen eines HTML-Dokuments als Baum gesehen. Wir haben gelernt, wie man auf HTML-Elemente per JavaScript zugreift und diese Verändern kann.
==== Aufgabe ====
- Ändere den Text des Links auf "Hallo Welt"
- Ändere das Linkziel des Hello World Link auf "http://www.spiegel.de"
- Füge dem Link die CSS-Eigenschaft fett hinzu
- Füge dem body ein neues ''''-Element mit der id "neu" hinzu - Lösche das neu erstellte ''
''- Element wieder - Ersetze das -Tag durch ein -Tag mit gleichem Inhalt - Zusatz: //Ermittle die Breite und Höhe deines Browserfensters und gib sie in der Konsole aus. // \\ Tipp: Das ''window''-Element kann helfen. [[javascripting:lektion_02|<< Lektion 2: JavaScript Grundlagen]] | [[javascripting:lektion_04|Lektion 4: HTML-Manipulation II - jQuery >>]]