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 4: HTML-Manipulation II - jQuery ======
Informatiker sind von Haus aus faul! Es wird versucht, einfache Lösungen für Probleme zu finden, Code-Zeilen zu sparen und Redundanzen (Wiederholungen) zu vermeiden. Auf Dauer ist reines JavaScript teilweise nervig und unnötig umständlich. Hier können Erweiterungs-Bibliotheken Abhilfe schaffen.

===== jQuery =====
[[https://jquery.com/|jQuery]] ist eine solche Erweiterungs-Bibliothek für JavaScript. Es vereinfacht Aufrufe und bietet neue Funktionalität. 

> JQuery is used by 63.8% of all the websites, that is a JavaScript library market share of 95.1%. [[http://w3techs.com/technologies/overview/javascript_library/all|w3techs.com]]

jQuery ist nicht standardmäßig im Browser verfügbar und muss eingebunden werden. Dazu gibt es, analog zu externen CSS-Dateien, die Möglichkeit, JavaScript-Dateien im ''head'' eines HTML-Dokuments einzubinden.

<code html>
<html>
  <head>
    <script src="pfad/zur/datei.js"></script>
  </head>
  <body>
    ... weitere HTML-Elemente ...
  </body>
</html>  
</code>

Nicht nur Bibliotheken lassen sich importieren, sondern auch eigene Scripte. Alles, was in der JavaScript-Konsole geschrieben werden kann, lässt sich auch in eine JavaScript-Datei (*.js) schreiben und wird nach dem Laden der Seite ausgeführt.

jQuery kapselt (überdeckt) JavaScript-Funktionalität und bietet eine einfachere und kürzere Schreibweise. Der Zugriff auf HTML-Elemente ähnelt den Selektoren von CSS. So kann auf id's (**#**), Klassen (**.**) und direkt auf HTML-Tags (**h1**) zugegriffen werden. Um auf ein Element per jQuery zuzugreifen, wird mit einem **$** begonnen und in Klammern der gewünschte Selektor eingegeben. Um also auf den Link mit der id "important" zuzugreifen, schreibt man folgende Zeile
<code javascript>
  // jQuery Schreibweise für: document.getElementById("important");
  var link =                 $("#important");
                             // deutlich kürzer :)
  console.log(link);
</code>

===== Inhalt eines HTML-Element verändern =====
<code javascript>
// Gibt "Hello World" in der Konsole aus
// console.log(document.getElementById("important").innerHTML) 
console.log($("#important").html());

// Ändert "Hello World" in "Goodbye World"
// document.getElementById("important").innerHTML = "Goodbye World"
$("#important").html("Goodbye World"); 
</code>

===== HTML-Attribut ändern =====
<code javascript> 
// Ändert das Ziel des Links auf "JS_AEG_L2.html" (Das Attribute wird verändert)
// document.getElementById("important").href = "JS_AEG_L2.html"; 
$("#important").attr("href", "JS_AEG_L2.html"); 

// Linkziel wird in neuem Fenster geöffnet (Das Attribut wird neu hinzugefügt)
// document.getElementById("important").target = "_blank"; 
$("#important").attr("target", "_blank");

$("#important").attr("foo", "bar");
</code>

 
===== Aussehen eines HTML-Elements verändern (CSS) =====
Besonders wichtig ist das Style-Attribute. 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 = $("#important");

// Setzt die Schriftgroesse auf 25px
// element.style.fontSize = "25px";
element.css("font-size", "25px");

// Versteckt das Element (Das Element ist aber noch da!)
// element.style.display = "none";
element.hide();

// Zeigt das Element wieder an
// element.style.display = "block";
element.show();

// Sogar mehrere CSS-Anweisungen in einem 
// Text wird gelb und bekommt einen schwarzen Rahmen
element.css({color: "yellow", border: "1px solid #000"});
</code>

===== HTML-Element hinzufügen =====
Jetzt wird es schön!

<code javascript>
// Speichere das HTML-Element in der Variable "newElement"
// var newElement = document.createElement("h2");
// newElement.innerHTML = "Hallo Neue Welt";
// document.body.appendChild(newElement);

// 2 Zeilen gespart
$("body").append("<h2>Hallo Neue Welt</h2>");

// Fügt das Element ganz am Anfang ein
$("body").prepend("<h2>Hallo Neue Welt von Oben</h2>");
</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>
// var element = document.getElementById("important");
// document.body.removeChild(element);

// Element holen und löschen (Elternelement ist egal)
$("#important").remove();
</code>

===== HTML-Element finden =====
Wie gesehen, kann jQuery Elemente anhand ihrer id finden. Aber auch Klassen und Elementtypen werden gefunden. 

<code html>
<body>
  <a href="index.html" id="link">Link</a>
  <h2 class="heading">Überschrift</h2>
  <div>
    <p>Text</p>
  </div>
</body>
</code>

<code javascript>
console.log($("#link").html());
// Link

console.log($(".heading").html());
// Überschrift

console.log($("div").html());
// <p>Text</p>
</code>

Jedoch sind Klassen und Elementtypen nicht eindeutig und der Selektor kann auf mehrere Elemente zutreffen. Was passiert also, wenn 2 ''div''-Tags vorhanden sind?

<code html>
<body>
  <div>
    <p>Text 1</p>
  </div>
  <div class="second">
    <p>Text 2</p>
  </div>
</body>
</code>

<code javascript>
console.log($("div").html());
// Text 1

console.log($("div"));
// [div, div.second] eine liste von Elementen

console.log($("div.second").html());
// Text 2
</code>

jQuery benutzt den ersten Eintrag aus einer Liste, wenn eine Funktion für ein einzelnes Element aufgerufen wird. Das ist einerseits sehr tolerant, kann aber auch die Fehlersuche erschweren. Darum immer so genau wie möglich selektieren (mit id's oder Klassen) - das gilt auch für CSS.


===== Zusammenfassung =====
jQuery vereinfacht die Zugriffe auf HTML-Elemente und bietet mächtige Erweiterungn für JavaScript. Alle Funktionen finden sich in der [[http://api.jquery.com/| jQuery API]]. API steht für **A**pplication **P**rogramming **I**nterface (Programmierschnittstelle) und liefert alle Informationen, die zur Benutzung der Funktionen wichtig sind.

In dieser Lektion haben wir gelernt, wie HTML-Elemente mit jQuery angesprochen und verändert werden können. Weiterhin haben wir gesehen, dass jQuery bei einem Aufruf mit einem zu allgemeinen Selektor unter Umständen eine List von Elementen zurück liefert.

==== Aufgabe ====
  - Führe die Aufgaben aus Lektion 2 mit jQuery aus \\ // Schreibe diesmal alle Befehle in eine JavaScript-Datei //
  - Lade dir das Zip-Archiv "{{:javascripting:lektion_4.zip|}}" herunter und entpacke es in deinen Projektordner
  - Ändere das Bild "aeg.jpg" in "buecher.jpg"
  - Füge der h1 Überschrift die CSS-Eigenschaft kursiv hinzu
  - Ändere im (einzigen) ''<span>''-Tag den Text in "JavaScript ist total einfach"

[[javascripting:lektion_03|<< Lektion 3: HTML-Manipulation I]] | [[javascripting:lektion_05|Lektion 5: Wünsch Dir was! >>]]