JavaScript
Die Programmiersprache JavaScript wurde geschaffen, um den Inhalt von Webseiten anzupassen, nachdem diese vom Client beim Server abgerufen wurden. Dazu können unter anderem Eigenschaften einer Webseite abgefragt werden, bestehende Inhalte geändert oder gelöscht sowie gänzlich neue Inhalte hinzugefügt werden. Auf diese Weise können dynamische und interaktive Webseiten erstellt werden, die Server-unabhängig sind, da JavaScript-Code von der entsprechenden Engine des Client-seitigen Browsers ausgeführt wird, wodurch solche Dokumente sogar portabel sein können.
Ein äußerst hilfreiches Werkzeug bei der Entwicklung mit JavaScript sind die Entwicklerwerkzeuge des verwendeten Browsers, die über die Taste F12 geöffnet werden können. Über das Tab ›Konsole‹ werden sämtliche Fehler ausgegeben, die evtl. bei der Interpretation des Dokumentenquelltextes aufgetreten sind. Außerdem können hier auch Ausgaben von JavaScript-Aufrufen angezeigt werden, falls diese nicht im Dokument erscheinen sollen.
Da die Interpretation von JavaScript in den verschiedenen Browsern unterschiedlich ausfallen kann, sollte jedes Skript mit möglichst vielen Browsern getestet werden.
Einbinden in HTML
Ähnlich wie CSS kann JavaScript-Code auf unterschiedliche Weise in ein HTML-Dokument eingebunden werden.
• Über Referenzierung einer separaten JavaScript-Datei
• Im <head>-Bereich des HTML-Dokuments
• Im <body>-Bereich des HTML-Dokuments
• In Eventhandler-Attributen (hier: onload)
• In href-Attributen von Links (<a href="">)
Das Einbinden über einen Link sollte aber vermieden werden, da ein Link eigentlich auf eine andere Ressource verweist, die beim Anklicken geladen wird. Ist JavaScript im verwendeten Client deaktiviert oder wird nicht unterstützt, dann ist damit auch der Link wirkungslos.
<!DOCTYPE html>
<html lang='de'>
<head>
<title>JavaScript</title>
<meta charset='UTF-8'>
<meta name='description' content='JavaScript-Beispiel'>
<script src='javascript.js?v2'></script>
<script>
/* Beispiel für JavaScript
innerhalb des head-Blocks */
/* <![CDATA[ */
function myFunction() {
...
...
}
/* ]]> */
</script>
</head>
<body onload="myFunction();"> <!-- Aufruf per Eventhandler -->
<!-- Seiteninhalte -->
<a href="javascript:myFunction();">JavaScript aufrufen</a> <!-- Aufruf in Link -->
<script>
/* <![CDATA[ */
// Beispiel für JavaScript innerhalb des body-Blocks
myFunction();
/* ]]> */
</script>
<noscript><p>Bitte aktivieren Sie JavaScript!</p></noscript>
</body>
</html>
Im obigen Script sind die fünf Möglichkeiten dargestellt. In Zeile 8 sieht man die Referenzierung der Datei javascript.js, die den JavaScript-Code beinhaltet. Die Zeilen 9–18 enthalten Code innerhalb des <head>-Blocks, und in den Zeilen 23–28 befindet sich die JavaScript-Anweisung innerhalb des <body>-Blocks.
Bei der Referenzierung einer eigenen JavaScript-Datei sollte dem Dateipfad eine Versionsnummer angehängt werden (hier: ?v2), damit der Browser erkennt, wenn es sich nicht um eine bereits im Cache vorhandene Datei handelt, da sonst diese ältere Datei aus dem Cache geladen wird und nicht die aktuelle vom Server.
Entscheident für die richtige Position im Quelltext ist die Tatsache, dass JavaScript-Code vom Browser sofort ausgeführt wird, sobald der Parser auf ihn trifft. Variablen oder Funktionen, die für die Ausführung des Codes benötigt werden, sowie die HTML-Elemente, auf die sich der Code bezieht, müssen daher bereits geladen sein, sich im Quelltext also oberhalb des entsprechenden JavaScript-Codes befinden.
Hierbei ist zu beachten, dass sämtliche Funktionen und globalen Variablen aller Code-Abschnitte als ein Skript betrachtet werden, unabhängig davon, ob sie in einem oder verschiedenen <script>-Blöcken notiert wurden.
In den Beispielen sind außerdem die Möglichkeiten dargestellt, einen mehrzeiligen (/* Kommentar */, in den Zeilen 10–11) bzw. einen einzeiligen (// Kommentar, in Zeile 25) Kommentar in JavaScript zu schreiben. Die Syntax dafür ist mit der von CSS identisch. Das Hash-Zeichen # (wie bei anderen Programmiersprachen) ist für JavaScript-Kommentare nicht vorgesehen.
Diese Beispiele enthalten außerdem zwei auskommentierte CDATA-Tags (Zeilen 12 und 17 bzw. 24 und 27), die notwendig sind, um bei älteren Browsern, die JavaScript nicht unterstützen, fehlerhafte Ausgaben zu vermeiden. Ich persönlich mache davon keinen Gebrauch, da Rückwärtskompatibilität für mich keine Priorität hat und ich davon ausgehe, dass es ohnehin kaum noch konkrete Anwendungsfälle dieser Art gibt.
Schließlich wurde noch ein <noscript>-Tag eingefügt (Zeile 29), das nur dann ausgeführt wird, wenn JavaScript im Browser abgeschaltet wurde. Grundsätzlich sollte man immer bedenken, dass eine Website funktionstüchtig sein muss, auch wenn JavaScript abgeschaltet ist. Daher entweder keine wichtigen Funktionen verwenden, eine Alternative einbinden, die ohne JavaScript auskommt oder zumindest den Besucher darauf hinweisen, dass JavaScript aktiviert sein muss.
JavaScript vorübergehend deaktivieren
Um bei einem Dokument zu prüfen, wie dieses bei einem Benutzer dargestellt wird, der keinen JavaScript-fähigen Browser verwendet oder JavaScript deaktiviert hat, kann man über die Entwicklerwerkzeuge JavaScript selbst vorübergehend deaktivieren:
Chrome / Chromium / Vivaldi: F12 ► (Entwicklerwerkzeuge fokussieren) ► F1 ► Preferences ► Debugger ► Disable JavaScript
Firefox: F12 ► F1 ► Erweiterte Einstellungen ► JavaScript deaktivieren