Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- javascripting:lektion_03 [10.06.2015 09:05] – pasler
+++ javascripting:lektion_03 [12.06.2015 14:36] (aktuell) – pasler
@@ Zeile 1: / Zeile 1: @@
+======  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 >>]]