Navigation

Springe zum Hauptinhalt
Universitäts­rechen­zentrum
Erweiterungen mit JavaScript

Erweiterungen mit JavaScript

Überblick

Mit Hilfe von JavaScript können Webseiten durch interaktive und dynamische Effekte erweitert werden. Die Skriptsprache wird von allen üblichen Browsern ohne nötige Erweiterungen unterstützt.

Wichtiger Hinweis zur Barrierefreiheit

Bei der Erstellung von interaktiven und veränderlichen Komponenten sollten Hinweise zur Barrierefreiheit beachtet werden.

Um eigenen JavaScript Code in Ihre Seite einzubinden, können Sie die Rahmen-Variable $javascript nutzen, welche ihren Code im Kopf des Dokuments einfügt. Dabei können Sie sowohl Dateien als auch Code direkt der Variable übergeben.

$javascript[] = "beispiel/code.js"// Datei
$javascript[] = "var test = document.getElementById('beispiel');"// Code

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, welche sowohl auf Englisch als auch größtenteils auf Deutsch verfügbar ist. Weitere gute Tutorials bieten auch die Seiten von selfhtml.

Migration zu jQuery unabhängigen Skripten

Falls Scripte so umgeschrieben werden sollen, dass diese auch ohne die jQuery-Bibliothek funktionieren, kann die Seite You might not need jQuery Alternativen zu den jQuery-Funktionsaufrufen bieten.

Hinweis zur Kompatibilität

JavaScript ist eine Skriptsprache und muss daher – bei jedem Aufruf neu – vom Browser interpretiert werden. Die Kompatibilität des geschrieben Codes mit dem jeweils verwendeten Browser ist keine Selbstverständlichkeit. Daher sollten die verwendeten Funktionen immer mit einer Kompatibilitätsliste abgeglichen werden, um möglichst viele Browser zu unterstützen. "Can I Use…?"[en] und die "MDN Web Docs" sind dabei hilfreiche Ratgeber.

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.

Selektion eines Elementes anhand seiner ID (hier id):

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.

Selektion eines Elementes anhand seiner Klasse (hier klasse):

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

Selektion eines Elementes anhand seiner ID und Klasse (hier id und klasse):

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

Selektion in den Kindknoten eines bereits ausgewählten Elementes:

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

Falls zu den angegebenen Selektoren keine bzw. kein DOM-Knoten gefunden werden kann, gibt die jeweilige Funktion null zurück. Daher sollte bei der weiteren Verwendung überprüft werden, ob die Variable einen anderen Wert als null hat.

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.

Rückgabe aller Klassen die das Element exampleDiv besitzt (als Array):

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

Hinzufügen einer Klasse:

exampleDiv.classList.add('testKlasse');

Entfernen einer Klasse:

exampleDiv.classList.remove('testKlasse');

Überprüfen ob Element Klasse besitzt:

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.

Setzen, speichern und entfernen der Hintergrundfarbe:

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.

Überprüfen ob ein Element ein Attribut besitzt und anschließendes entfernen:

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.

Auslesen und setzen von data Attributen:

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

Das HTML Element mit data Attribut im DOM:

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

Setzen eines Klick-Events auf ein <div>:

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

Soll zum Beispiel die Standardaktion beim Klicken eines Buttons unterbunden werden, muss die preventDefault Funktion des Events ausgeführt werden.

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

Falls zu einem späteren Zeitpunkt das Event wieder entfernt werden soll, muss die Event-Funktion vorher gespeichert werden.

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(callback1);
    } 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.

Setzen der Hintergrundfarbe wenn der DOM vollständig geladen ist:

executeWhenReady(function() {

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

    // weitere Operationen die auf den vollstädnig
    // 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.

jQuery-Datepicker – Datumsauswahl

Im Zuge der Umstellung auf die jQuery-Version 3 wurde der in jQuery-UI enthaltene Datepicker ersetzt. Die dazugehörige Dokumentation befindet sich nun auf der Seite der Erweiterungsmodule.

Wichtiger Hinweis zur API-Version

Beim Erstellen von Scripten sollte darauf geachtet werden, dass die verwendeten Bibliotheksaufrufe zu jQuery 3.4 und späteren Versionen kompatibel sind!

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');
});

Presseartikel