JavaScript für Einsteiger: die Sprache im Browser

Zieh in der Verwaltung deiner Galerie zwölf Fotos auf die Ablagefläche. Noch bevor ein einziges Byte unterwegs ist, steht darunter „12 Bilder ausgewählt (38 MB).“ und eine Liste mit Namen und Größe jeder Datei. Diese Rechnung hat nicht der Server gemacht, der weiß zu diesem Zeitpunkt noch nichts von deinen Bildern. Gerechnet hat dein Browser, und zwar mit JavaScript: der Programmiersprache, die auf dem Gerät des Besuchers läuft, nachdem die Seite angekommen ist, und auf das reagiert, was dort passiert. Diese Seite erklärt JavaScript für Einsteiger an solchen Stellen aus der eigenen Galerie.

Was dein Browser selbst erledigt

Der Server liefert eine Seite einmal aus und ist danach fertig. Alles, was ab dann ohne Neuladen geschieht, übernimmt JavaScript. Im Bildergalerie-Script sind das diese Stellen:

• Große Ansicht: Ein Klick auf ein Vorschaubild legt das Bild groß über die abgedunkelte Seite, passt es ins Fenster ein und zeigt „Bild 2 von 4“.
• Vorladen: Während du ein Bild betrachtest, holt das Skript schon das vorherige und das nächste.
• Tastatur: Pfeil rechts oder N blättert weiter, Pfeil links oder P zurück, Esc schließt die große Ansicht.
• Dateiliste beim Hochladen: Name, Größe und Summe der Fotos erscheinen sofort.
• Menü auf dem Handy: Bis 900 Pixel Fensterbreite klappt ein Knopf das Menü der Verwaltung auf und zu.

Allen Beispielen ist gemeinsam, dass sie warten. Ein PHP-Script läuft einmal von oben nach unten durch und ist dann fertig. Ein JavaScript-Programm meldet dagegen an, auf welche Ereignisse es reagieren will, etwa einen Klick oder Tastendruck, und tut dann nichts, bis eines eintritt.

JavaScript für Einsteiger: die ersten eigenen Zeilen

Am schnellsten probierst du die Sprache in der Konsole deines Browsers aus, ganz ohne eigene Website oder zusätzliches Programm:

1. Öffne irgendeine Seite und drücke F12. Es öffnen sich die Entwicklerwerkzeuge.
2. Wechsle in den Reiter „Konsole“. Was du dort eintippst, führt der Browser sofort aus.
3. Gib die folgenden Zeilen ein und drücke die Eingabetaste.

const anzahl = 12;
let megabyte = 38;
function jeBild(summe, stueck) { return summe / stueck;
}
console.log(jeBild(megabyte, anzahl).toFixed(1) + ' MB je Bild');

Die Konsole antwortet mit „3.2 MB je Bild“. Diese sechs Zeilen enthalten drei Bausteine, die in jedem Programm wiederkehren:

• Variable: const und let legen einen benannten Speicherplatz an. Einer let-Variablen darfst du später einen neuen Wert geben, etwa megabyte = 45;. Ein const-Wert bleibt fest: Auf anzahl = 15; antwortet die Konsole mit einem TypeError. Ältere Skripte, auch die der Galerie, nutzen noch var. Neuer Code nimmt const und nur dort let, wo sich der Wert ändert.
• Funktion: function jeBild(…) fasst Schritte unter einem Namen zusammen. Sie bekommt zwei Werte, rechnet und gibt mit return das Ergebnis zurück.
• Ausgabe: console.log() schreibt einen Wert in die Konsole. Besucher sehen ihn nicht, für die Fehlersuche ist er unverzichtbar.

Den Punkt in „3.2“ setzt toFixed(), das immer englisch formatiert. Die Upload-Seite der Galerie nutzt für die Anzeige toLocaleString('de-DE') und schreibt deshalb „1,3 MB“. Übrigens: Java ist eine ganz andere Sprache, die mit JavaScript außer dem Namen kaum etwas gemein hat.

Elemente der Seite finden und ändern

Spannend wird JavaScript, sobald es die Seite selbst verändert. Der Browser stellt dafür jedes HTML-Element als Objekt bereit. Probiere es in der Konsole auf dieser Seite aus:

const titel = document.querySelector('h1');
console.log(titel.textContent);
titel.textContent = 'Meine Testgalerie';

querySelector() sucht das erste Element, auf das ein CSS-Selektor passt, und versteht dieselbe Schreibweise wie ein Stylesheet: h1, .klasse oder #kennung. textContent liest den Text des Elements, eine Zuweisung ersetzt ihn. Die Überschrift ändert sich sofort, aber nur in deinem Browser. Nach dem Neuladen steht wieder der Text vom Server da.

Genau so entsteht der Satz vom Anfang. Wählst du Dateien aus, löst das Dateifeld das Ereignis change aus. Die Funktion dahinter zählt Anzahl und Größe zusammen und schreibt das Ergebnis per textContent in das Element #auswahl-zusammenfassung.

Ein Ereignis an einem echten Beispiel

Wie ein Skript auf ein Ereignis wartet, zeigt ein Ausschnitt aus js/script.js der Verwaltung, hier leicht gekürzt. Er sorgt dafür, dass die Escape-Taste das aufgeklappte Menü wieder schließt:

document.addEventListener('keydown', function (ereignis) { if (ereignis.key === 'Escape' && istOffen()) { setzeOffen(false); }
});

document ist die ganze Seite. addEventListener meldet einen Zuhörer für das Ereignis keydown an, also „eine Taste wurde gedrückt“. Die Funktion dahinter bekommt das Ereignis mitgeliefert und schließt das Menü nur, wenn die Taste Escape war und das Menü offen ist. && bedeutet „und“, === „ist genau gleich“. Wer PHP kennt, erkennt das if wieder: Die Sprachen ähneln sich im Aufbau, laufen aber an verschiedenen Orten.

Wie Skripte in die Seite kommen

JavaScript steckt meist in eigenen Dateien mit der Endung .js, die eine Seite über <script src="…"> einbindet. Der Browser lädt und startet sie in der Reihenfolge, in der sie im HTML stehen. Die Lightbox der Galerie, Version 2.04 von Lokesh Dhakar, baut auf den älteren Bibliotheken Prototype und script.aculo.us auf. Stünde lightbox.js vor ihnen, riefe sie Funktionen auf, die es noch nicht gibt, und bräche ab. Das Diagramm zeigt die Reihenfolge und was danach bei einem Klick passiert:

Für die Ladezeit zählt auch die Menge. In der Vorlage stehen nur drei Zeilen, doch scriptaculous.js?load=effects,builder holt effects.js und builder.js nach. Zusammen wiegen die fünf Dateien rund 190 KB, davon prototype.js allein 126 KB. Eine Kategorie mit 40 Vorschaubildern zu je 15 KB überträgt zum Vergleich rund 600 KB. Der Browser speichert Skripte zwischen, ein Besucher lädt sie also meist nur einmal.

Die Optionen der Lightbox, etwa overlayOpacity für den dunklen Hintergrund mit dem Standardwert 0.8, stehen am Anfang von js/lightbox.js. Wie du sie in der Vorlage änderst, ohne dass ein Update sie überschreibt, erklärt der Artikel Was ist eine Lightbox.

Fehler finden mit der Konsole

Ein defektes Skript erkennst du in der Galerie daran, dass ein Klick auf ein Vorschaubild das Bild allein im Browserfenster öffnet statt der großen Ansicht. Im Reiter „Konsole“ stehen Fehler in roter Schrift mit Dateiname und Zeilennummer, im Reiter „Netzwerk“ siehst du, ob eine Datei überhaupt geladen wurde. Typische Funde:

• Datei nicht gefunden: Der Pfad in src stimmt nicht, im Reiter „Netzwerk“ steht ein Fehler 404.
• Funktion nicht definiert: Eine Bibliothek fehlt oder wird zu spät geladen. Prüfe die Reihenfolge der script-Zeilen.
• Unerwartetes Zeichen: Ein Tippfehler oder eine fehlende Klammer. Die Zeilennummer in der Meldung führt dich zur Stelle.

Wo JavaScript im Bildergalerie-Script steckt

Galerie und Verwaltung erzeugt PHP auf dem Server. JavaScript kommt nur an vier abgegrenzten Stellen dazu, und an jeder lässt sich ablesen, was ohne Skript übrig bleibt:

Tippst du als Kategorienamen „Makro & Details“, zeigt verwalten.js sofort den Ordner makro-details an. Ohne JavaScript entsteht beim Speichern derselbe Name, weil der Server dieselbe Regel anwendet. Wischgesten oder eine automatische Diashow bringt die Galerie nicht mit. Um an echtem Code zu üben, kannst du das Bildergalerie-Script kostenlos herunterladen und in einer lokalen Testgalerie ausprobieren.

Warum eine Prüfung im Browser kein Schutz ist

Alles, was JavaScript tut, passiert auf dem Gerät des Besuchers, und der kann es abschalten oder verändern. Prüfungen im Browser sind deshalb ein Service für ehrliche Besucher, verlassen kannst du dich nur auf das, was der Server prüft.

Beim Hochladen sieht man beides. Erlaubt dein Webhoster 32 MB je Vorgang, meldet sie bei den zwölf Fotos vom Anfang schon vor dem Absenden: „Zusammen sind das 38 MB, Ihr Webhoster erlaubt höchstens 32 MB je Vorgang. Bitte wählen Sie weniger Bilder aus.“ Den Dateityp beurteilt das Skript aber nur nach der Angabe des Browsers oder nach der Endung, eine in .jpg umbenannte Textdatei käme also durch. Erst PHP schaut auf dem Server in die Datei hinein und lehnt sie ab, weil darin kein JPEG, PNG oder GIF steckt.

Lernplan: JavaScript für Einsteiger in fünf Schritten

Diese Reihenfolge führt von der Konsole zum ersten eigenen Skript:

1. Werte und Rechnungen: const, let, Zahlen, Texte, if und Funktionen in der Konsole.
2. Die Seite ansprechen: Elemente mit querySelector() finden, Text mit textContent ändern, Klassen mit classList setzen.
3. Ereignisse: mit addEventListener auf click, input oder keydown reagieren.
4. Eigene Datei: den Code in eine .js-Datei schreiben und per <script src="…"> in eine Testseite einbinden.
5. Fremden Code lesen: kurze, kommentierte Dateien wie js/script.js der Galerie nachvollziehen.

Zum Nachschlagen eignen sich die MDN Web Docs von Mozilla, teilweise auch auf Deutsch.

Häufige Fragen

Drei Fragen tauchen beim Einstieg immer wieder auf.

Verwandte Themen

Diese Artikel ergänzen JavaScript für Einsteiger um die übrigen Bausteine einer Galerie: HTML, CSS und PHP.

• Unterschied PHP und HTML
• Was ist PHP einfach erklärt
• Was ist ein Quelltext einfach erklärt
• Was ist CSS einfach erklärt
• Was ist eine Lightbox in einer Galerie
• Bildergalerie Ratgeber: Grundlagen der Webtechnik