ITG-Wiki

Albert Einstein Gymnasium Reutlingen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seitenleiste

Hauptmenü

Start

BakuMebi 5
ITG Klasse 7
ITG Klasse 9
ITG Oberstufe

Impressum
Datenschutz

Links

Training
AEG IT
AEG Homepage
AEG Schulportfolio

Hilfe

for everybody

only for teachers

Druck/Export

Werkzeug

(oSP 19.10-ruffnut.4)
javascripting:lektion_03

    Sie befinden sich hier: start » javascripting » lektion_03
    Buch erstellen
     Diese Seite zum Buch hinzufügen
    Buch erstellen
     Diese Seite aus Buch entfernen  

     Buch anzeigen, ändern (0 Seite/n)
     Hilfe

    Inhaltsverzeichnis

    Lektion 3: HTML-Manipulation I

    Angelehnt an das W3C Tutorial: Einführung.

    Datei zur Lektion: 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: 

    <a href="index.html" id="important" style="color: #f00;">Hello World</a>
    • <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. The HTML DOM Element Object

    Begriffe eines HTML-Dokuments

    Ein HTML-Dokument hat folgenden Aufbau (nicht vollständig): 

    <html>
  <body>
    <div>
      <a href="index.html" id="important" style="color: #f00;">Hello World</a>
    </div>
    <p>
      Text
    </p>
  </body>
</html>
    • 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)

    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: 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: 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 <body>-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

    1. Ändere den Text des Links auf „Hallo Welt“
    2. Ändere das Linkziel des Hello World Link auf „http://www.spiegel.de“
    3. Füge dem Link die CSS-Eigenschaft fett hinzu
    4. Füge dem body ein neues <p>-Element mit der id „neu“ hinzu
    5. Lösche das neu erstellte <p>- Element wieder
    6. Ersetze das <tt>-Tag durch ein <span>-Tag mit gleichem Inhalt
    7. Zusatz: Ermittle die Breite und Höhe deines Browserfensters und gib sie in der Konsole aus.
      Tipp: Das window-Element kann helfen.

    << Lektion 2: JavaScript Grundlagen | Lektion 4: HTML-Manipulation II - jQuery >>

    Zuletzt angesehen: • lektion_03
    javascripting/lektion_03.txt · Zuletzt geändert: 12.06.2015 16:36 von pasler

    Seiten-Werkzeuge

    Openschulportfolio Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki