ITG-Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
======  Lektion 3: HTML-Manipulation I ======
//Angelehnt an das [[http://www.w3schools.com/js/js_intro.asp|W3C Tutorial: Einführung]].//

//Datei zur Lektion: {{:javascripting:lektion_3.zip|}}//

Die wichtigste Funktion von JavaScript ist die Modifizierung einer HTML-Seite. Es können Elemente (bspw. <h1>-Tags) hinzugefügt, verändert oder gelöscht werden. In einem Element können der Inhalt, ein Attribut (Eigenschaft) oder das Aussehen (CSS) verändert werden.

===== HTML-Auffrischung =====
Um mit JavaScript richtig Arbeiten zu können, ist es notwendig ein wenig von HTML und CSS zu verstehen. Darum eine kleine Auffrischung und Begriffserklärung.

==== Begriffe eines HTML-Elements ====
Ein HTML-Element ist folgendermaßen aufgebaut:
<code html>
<a href="index.html" id="important" style="color: #f00;">Hello World</a>
</code>
  * **<a ... ></a>** \\ HTML-Element (<a>-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 <a>-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):
<code html>
<html>
  <body>
    <div>
      <a href="index.html" id="important" style="color: #f00;">Hello World</a>
    </div>
    <p>
      Text
    </p>
  </body>
</html>
</code>

  * 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.

<code javascript>
// 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" 
</code>

''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 "/* ... */".

<code javascript>
// Einzeiliger Kommentar
// Noch einer

/*
Mehr-
zeiliger
Kommentar
*/
</code>

===== 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''). 
 
<code javascript> 
// Ä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"; 
</code>


===== 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. 

<code javascript>
// 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";
</code>



''**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.
<code javascript>
var x = 1;
console.log(x);
// 1

x = 3;
console.log(x*2);
// 3 * 2 = 6

x = "hallo";
console.log(x);
// hallo
</code>

===== 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()''

<code javascript>
// 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 <body>-Tag als letztes Element ein
document.body.appendChild(newElement);
</code>

===== 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.

<code javascript>
// 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);
</code>

===== 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 ''<p>''-Element mit der id "neu" hinzu
  - Lösche das neu erstellte ''<p>''- Element wieder
  - Ersetze das <tt>-Tag durch ein <span>-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 >>]]