Erweiterungen mit JavaScript

Einführung in die Erstellung von JavaScript-Code zur DOM-Manipulation

1. Selektoren – DOM-Knoten selektieren
2. Manipulation
   1. Klassen
   2. CSS-Eigenschaften
   3. Knoten-Attribute
3. Dynamische Funktionalitäten
   1. Events
   2. Zeitpunkt der Ausführung

Diese Einführung soll zeigen, dass es mittlerweile sehr leicht möglich ist JavaScript ohne ein Framework, wie zum Beispiel jQuery, zu verwenden. Diese Art der Verwendung, bietet nicht nur den Vorteil, dass die Ausführung schneller ist, sondern auch Unabhängigkeit von externen Ressourcen. Diese verlangsamen das Laden der Seite und stellen potenzielle Fehlerquellen dar, zum Beispiel bei unvollständigem Laden der Seite.

Wenn Sie gar kein Grundwissen über JavaScript verfügen, bieten die "Mozilla Developer Network (MDN) Web Docs" eine gute Einführung ^[en]. Weitere gute Tutorials bieten auch die Seiten von selfhtml.

Selektoren – DOM-Knoten selektieren

Prinzipiell können Elemente (bzw. DOM-Nodes) ebenso wie mit CSS selektiert werden. Aus Gründen der Performance sollte jedoch versucht werden sich auf Klassen oder IDs zu beschränken.

var elementWithId = document.getElementById('id');

Bei der Auswahl von Elementen anhand einer Klasse ist der Rückgabewert immer in Form eines Arrays, da – anders als bei IDs – Klassen mehrmals vergeben werden dürfen. Ist man sich sicher, dass nur ein Element mit der angegebenen Klasse existiert, kann man einfach das erste Element des Arrays speichern. Ebenso verhält es sich bei der Auswahl von Elementen anhand ihres HTML-Tags mit getElementsByTagName.
Die Reihenfolge der Elemente im Array ist immer die gleiche wie die Reihenfolge der entsprechenden DOM-Knoten im DOM.

// Auswahl mehrerer Elemente anhand ihrer Klasse
var elementsWithClass = document.getElementsByClass('klasse');
// Selektion der ersten Auswahl
var firstElementWithClass = document.getElementsByClass('klasse')[0];
// Auswahl anhand des HTML-Tag
var elementsWithTag = document.getElementsByTagName('p');

Wenn Elemente mit einem CSS ähnlichen Selektor ausgewählt werden sollen gibt es zwei Möglichkeiten. Zum einen querySelector, welcher den ersten Treffer zurück gibt, und zum anderen querySelectorAll, welcher alle Treffer zurück gibt.
Mehr zu möglichen Selektoren finden Sie im Kapitel CSS Selektoren der MDN Web Docs ^[en] .

// Auswahl eines Elementes mit Query-Selektor
var firstElementWithQuery = document.querySelector('#id.klasse');
// Auswahl mehrerer Elemente
var elementWithQuery = document.querySelectorAll('#id.klasse');

Um ein Element oder mehrere Elemente auf der ganzen Seite zu selektieren verwendet man – wie oben beschrieben – die jeweiligen Methoden des document. Hat man ein Element ausgewählt und zwischengespeichert, kann man in seinen Kindknoten eine weitere Selektion vornehmen und so die Auswahl verkleinern und somit erleichtern.

// Auswahl aller <p> Elemente in firstElementWithQuery
var allPTags = firstElementWithQuery.getElementsByTagName('p');

Manipulation

Klassen

Klassen bieten eine einfache Möglichkeit sowohl Elemente zu selektieren als auch über vorher definierte CSS Regeln das Aussehen von Elementen zu verändern.
Um mit den Klassen eines Elementes zu operieren bietet sich das classList Attribut an.

// Selektion des "exampleDiv"
var exampleDiv = document.getElementByID('example');
// Speichern aller Klassen des "exampleDiv"
var exampleDivClasses = exampleDiv.classList;

exampleDiv.classList.add('testKlasse');

exampleDiv.classList.remove('testKlasse');

if (exampleDiv.classList.contains('testKlasse')) {
    console.log('Besitzt Klasse!');
}

CSS-Eigenschaften

Generell sollten Styles zwar mittels CSS definiert werden, sollte es aber vorkommen, dass es nötig ist, diese direkt für ein Element zu definieren bieten sich die Methoden des style Attributes an. Damit kann man jede im Browser mögliche Style Information festlegen.

exampleDiv.style.setProperty('background-color', '#00FF00');
var exampleDivBackgroundColor = exampleDiv.style.getPropertyValue('background-color');
exampleDiv.style.removeProperty('background-color');

Knoten-Attribute

Beim Umgang mit Attributen gibt es die vier grundlegenden Funktionen getAttribute, setAttribute, removeAttribute und hasAttribute. Um eine komplette Liste der Attribute zu erhalten kann man das attributes Attribut eines selektierten Elementes verwenden.

if (exampleDiv.hasAttribute('hidden')) {
    exampleDiv.removeAttribute('hidden');
}

Werden eigene Attribute benötigt z. B. um Daten an ein Element zu binden bieten die data-* Attribute einen Weg dies mit validem HTML umzusetzen. Neben den Attributfunktionen kann dann das dataset Attribut eines selektierten Elementes verwendet werden um Inhalt anzufügen oder auszulesen.

exampleDiv.dataset['time'] = Date.now();
console.log('Im Element wurde folgende Zeit gespeichert:', new Date(exampleDiv.dataset['time']));

<div id="example" data-time="1581340000000"></div>

Dynamische Funktionalitäten

Events

Um Aktionen beim Anklicken oder anderen Nutzerinteraktionen auszuführen kann man Events an selektierte Elemente binden. Je nach selektiertem Element gibt es unterschiedliche Event-Typen, in den MDN Web Docs können Sie eine vollständige Übersichtsseite über alle Event-Typen finden. Übliche Events sind:

• click: Kann auf fast jedes Element angewandt werden und wird ausgelöst wenn der Nutzer auf das selektierte Element klickt.
• scroll: Kann auf jedes Element mit "overflow" angewandt werden und wird ausgelöst wenn der Nutzer scrollt.
• focus: Kann auf jedes fokussierbares Element angewandt werden und wird ausgelöst sobald der Nutzer das Element fokussiert.

exampleDiv.addEventListener('click', function(event) {
    // Aktionen wenn das Element geklickt wurde
});

exampleButton.addEventListener('click', function(event) {
    event.preventDefault();
    // Aktionen wenn das Element geklickt wurde
});

function buttonClickFunction(event) {
    event.preventDefault();
    // Aktionen wenn das Element geklickt wurde
}

exampleButton.addEventListener('click', buttonClickFunction);
exampleButton.removeEventListener('click', buttonClickFunction);

Zeitpunkt der Ausführung

Gerade bei der Manipulation von DOM-Knoten ist es erforderlich, dass der DOM vollständig vom Browser geladen und berechnet ist. Nur dann ist gewährleistet, dass alle benötigten Elemente per JavaScript selektiert und verändert werden können.
Um den richtigen Zeitpunkt der Ausführung des eigenen Codes zu finden kann man folgende Hilfsfunktion verwenden:

function executeWhenReady(callback) {
    if (
        document.readyState === 'complete' ||
        document.readyState === 'interactive'
    ) {
        // falls Dokument vollständig geladen & interpretiert rufe callback auf
        setTimeout(callback, 1);
    } else {
        // falls nicht, binde callback an das Ladeevent
        document.addEventListener('DOMContentLoaded', callback);
    }
}

Diese Funktion führt die übergebene Funktion direkt aus, wenn der DOM bereit ist und falls nicht, sobald das DOMContentLoaded Event ausgelöst wurde.

executeWhenReady(function() {

    exampleDiv.style.setProperty('background-color', '#00FF00');

    // weitere Operationen die auf den vollständig
    // interpretierten DOM angewiesen sind …
});

jQuery Erweiterung

1. Notation
2. Ausführung erst bei vollständig geladener Seite
3. jQuery konfliktfrei verwenden

Webautoren können mit Hilfe der JavaScript-Bibliothek jQuery ziemlich einfach und browserübergreifend dynamische Effekte auf Webseiten programmieren oder Webanwendungen komfortabler gestalten. Des Weiteren bietet jQuery eine einfache Möglichkeit der Selektion von HTML-Elementen und erweitert JavaScript für die Manipulation durch einige nützliche Hilfsfunktionen. Für die Verwendung von jQuery wird mit TUCAL eine stabile Version dieser Bibliothek eingebunden.

Da die Möglichkeiten von jQuery sehr sehr vielfältig sind, sollte für eine vollständige Beschreibung aller Funktionen ein Blick in die offizielle Dokumentation geworfen werden.

Notation

Um HTML-Elemente zu selektieren wird folgende Syntax verwendet:

// entweder
jQuery(selektor)
// oder
$(selektor)

An selektierten Elementen können dann Funktionen angewandt werden:

$('div.beispiel').removeClass('beispiel');

Ausführung erst bei vollständig geladener Seite

Ein grundsätzliches Problem beim Schreiben von JavaScript Code ergibt sich aus dem Zeitpunkt der Ausführung. Damit gewährleistet ist, dass das HTML-Dokument vollständig geladen und somit alle benötigten Elemente vorhanden sind und angezeigt werden, bevor die Scripte ausgeführt werden, stellt jQuery bereits eine Methode zur Verfügung. Deshalb muss dafür nicht noch eine eigene Funktion definiert werden:

$(function() {
    // restlicher Code …
});

jQuery konfliktfrei verwenden

Falls weitere Bibliotheken eingebunden werden, kann es zu Konflikten mit der von jQuery reservierten Variable $ kommen. Daher bietet jQuery die Funktion noConflict() an, mit der die Variable $ entbunden werden kann.

$.noConflict();
// jQuery kann dann weiter mit "jQuery" aufgerufen werden, z. B.:
jQuery(function() {
    var test = jQuery('div.beispiel');
});