Entwicklung
JavaScript, das eine funktionierende Seite verbessert
Beginnen Sie mit funktionierendem HTML. Ergänzen Sie Bedienelemente und sanfte Übergänge, ohne den Zugang zum Beitrag vom Skript abhängig zu machen.
Ein Link zu einem Beitrag muss diesen Beitrag öffnen. Dafür genügt HTML. JavaScript kann einen Slider ergänzen, den Seitenkopf beim Scrollen ausblenden oder das Menü öffnen. Ein Fehler dieses Codes darf den Zugang zu den Inhalten aber nicht versperren.
Dieser Ansatz heißt Progressive Enhancement: Zuerst entsteht eine funktionierende Grundlage, danach kommen zusätzliche Bedienmöglichkeiten hinzu. Das hilft bei langsamen Verbindungen, deaktivierten Skripten und Fehlern einzelner Komponenten. Auch Suchmaschinen und andere automatisierte Systeme erhalten die Inhalte direkt mit der Serverantwort.
Zuerst verständliches HTML erstellen
Verwenden Sie für einen Seitenwechsel einen Link mit einer echten URL. Für eine Aktion auf der aktuellen Seite verwenden Sie eine Schaltfläche. Ersetzen Sie diese Elemente nicht durch div-Blöcke mit einem Klick-Handler.
<a href="/materials/?article=architecture/reliable-integrations">
Zuverlässige Integrationen
</a>
<button type="button" hidden data-next>
Nächster Beitrag
</button>Der Link funktioniert sofort. Die Schaltfläche können Sie anzeigen, nachdem der Slider erfolgreich eingerichtet wurde. So sehen Besucher keine Bedienelemente, die nichts bewirken. Die Beschriftung muss die Aktion erklären. Ein Pfeil allein, ohne zugänglichen Namen, ist nicht für alle Nutzer verständlich.
Geben Sie Überschriften, Kurzbeschreibungen und Linkziele der Karten aus, bevor das Skript startet. Werden weitere Slides ausgeblendet, müssen alle Inhalte auch über eine gewöhnliche Liste oder einen Katalog erreichbar sein. Laden Sie den Haupttext eines Beitrags nicht erst nach dem Start von JavaScript.
Moderne Syntax gezielt verwenden
Deklarieren Sie eine Variable mit const, wenn Sie ihr keinen anderen Wert zuweisen wollen. Verwenden Sie let für veränderliche Zustände, etwa die Nummer des aktuellen Slides. const macht den Inhalt eines Objekts nicht unveränderlich: Seine Eigenschaften können weiterhin geändert werden.
Binden Sie eine Datei mit defer ein, wenn sie nach dem Einlesen des HTML arbeiten soll. Für mehrere zusammengehörige Dateien können Sie Module verwenden. Sie machen Abhängigkeiten deutlich. Eine kleine Website braucht dafür nicht zwingend einen komplexen Build-Prozess.
<script src="/assets/ui.js" defer></script>Die Versionsnummer des Sprachstandards beweist noch keine Browserunterstützung. Wählen Sie Funktionen, die in den benötigten Browsern verfügbar sind, und prüfen Sie das Ergebnis. Für einfache Navigation reichen meist die seit Langem unterstützten Funktionen von JavaScript und DOM.
Prüfen, ob die Komponente vorhanden ist
Ein gemeinsames Skript wird auf verschiedenen Seiten eingebunden. Eine Seite enthält einen Slider, eine andere nur einen Beitrag. Initialisieren Sie jede Komponente getrennt:
function initSlider() {
const slider = document.querySelector('[data-slider]');
if (!slider) return;
const next = slider.querySelector('[data-next]');
if (!next) return;
// Erst den Handler einrichten, dann die Schaltfläche anzeigen.
next.addEventListener('click', showNextSlide);
next.hidden = false;
}showNextSlide ist hier die Wechselfunktion, die Sie in der Komponente definieren müssen. Der Ausschnitt ist kein fertiger Slider. Er zeigt die Reihenfolge: Elemente finden, Aktion verbinden, Schaltfläche anzeigen. Fehlt der Slider, darf das die Einrichtung des Menüs und anderer unabhängiger Elemente nicht beenden.
Lesen und Tastaturbedienung nicht behindern
Ein Slider kann auf Wunsch der Nutzer wechseln. Ein automatischer Wechsel ist aufwendiger: Er braucht eine Stoppfunktion, eine passende Fokusbehandlung und muss den Wunsch nach weniger Bewegung berücksichtigen. Bei einer Auswahl von Beiträgen reicht meist ein manueller Wechsel.
Ein ausgeblendeter Seitenkopf muss zurückkehren, wenn der Fokus zum Menü wechselt. Wird das mobile Menü mit Escape geschlossen, setzen Sie den Fokus auf die Schaltfläche zurück, die es geöffnet hat. Prüfen Sie den Weg mit Tab, Shift+Tab und Enter, nicht nur mit der Maus.
Berechnen Sie beim Scrollen das Layout nicht unnötig neu. Bündeln Sie Aktualisierungen mit requestAnimationFrame. Der Handler darf keine endlose Animation starten. Deaktivieren Sie dekorative Bewegung bei prefers-reduced-motion.
Verwenden Sie textContent, wenn Sie eine gewöhnliche Beschriftung ändern. Fügen Sie externe Zeichenfolgen nicht mit innerHTML ein: Der Browser interpretiert sie als Markup. Brauchen Sie ein neues Element, erstellen Sie es über DOM und setzen Sie geprüfte Attribute.
Prüfen, was die Nutzer tatsächlich sehen
Prüfen Sie die Dateisyntax mit node --check assets/ui.js. Der Befehl startet keinen Browser und prüft keine Schaltflächen. Öffnen Sie danach die Seite, drücken Sie F12 und wählen Sie den Tab Console. Nach der Bedienung dürfen keine Fehler der Website erscheinen.
Deaktivieren Sie JavaScript und öffnen Sie Startseite und Beitrag erneut. Prüfen Sie Links, Text und den Zugang zu allen Inhalten. Scrollen Sie auf einem schmalen Bildschirm, öffnen Sie das Menü und wechseln Sie einen Slide. Eine funktionierende Grundlage und verständliche Bedienelemente sind wichtiger als die Zahl verwendeter Sprachfunktionen.