studyklar
IProg · Skript 3 · Abschnitt 1

Unobtrusive JavaScript: Verhalten, Struktur und Aussehen trennen

JavaScript kann man an jede Stelle einer HTML-Seite schreiben. Gut ist das nicht. Hier steht, welche Probleme das macht und wie „unobtrusive“ (unaufdringliches) JavaScript sie löst. Rechts steht der Code des Beispiels. Mit Weiter geht es Schritt für Schritt voran. Ein Klick auf einen Schritt springt direkt dorthin.

Worum es geht

Skript 03, Folien 2 und 3: „unobtrusive“ JavaScript und seine grundlegende Idee.

In Skript 02 stand JavaScript oft direkt im HTML-Tag, etwa in onclick="…". Das funktioniert. Die Frage ist: Was spricht dagegen, und wie macht man es besser?

So gehen wir vor:

  1. Ein Absatz, in dem alles gemischt ist, und die drei Probleme daran.
  2. Die Idee: Struktur, Aussehen und Verhalten trennen.
  3. JavaScript nur an Events hängen.
  4. Die Seite muss auch ohne JavaScript funktionieren.
  5. Eine Klausurfrage zum Thema.

Die Folien haben zu diesem Abschnitt keinen Code. Die Beispiele hier sind darum eigene, kleine Beispiele.

Code mitten im HTML

<p style="color: red" onclick="alert('Hallo!')">Klick mich</p>

Der Absatz rechts macht drei Dinge auf einmal. Sein Text ist „Klick mich“. Das Attribut style macht ihn rot; das ist CSS (Cascading Style Sheets, die Sprache für das Aussehen). Das Attribut onclick enthält JavaScript: Bei einem Klick zeigt alert ein kleines Fenster mit „Hallo!“.

So eingestreuten Code nennt das Skript „beliebiges Einstreuen von JavaScript“. Im Browser läuft er einwandfrei.

Aus Skript 02, Folie 6: Eine JavaScript-Funktion wird häufig als Reaktion auf ein Maus-Event aufgerufen, etwa über das onclick-Attribut.

Drei Probleme

Skript · Probleme des beliebigen Einstreuens
  • Vermischung Funktionalität und Layout
  • Lesbarkeit/Verständlichkeit der Seite wird stark reduziert
  • Erhöhte Fehleranfälligkeit

Eine echte Seite hat nicht einen solchen Absatz, sondern Hunderte. Soll der Text statt „Hallo!“ künftig „Willkommen!“ lauten, muss man jeden Tag einzeln ändern. Übersieht man einen, verhält sich die Seite an dieser Stelle anders.

Daraus folgen die drei Probleme der Folie. Vermischung: Funktion (JavaScript) und Layout (HTML und CSS) stehen im selben Tag. Lesbarkeit: Wer den Text der Seite lesen will, muss sich durch Code kämpfen. Fehleranfälligkeit: Jede Änderung trifft viele Stellen.

Noch 7 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Das Problem

alles in einem Tag

<p style="color: red" onclick="alert('Hallo!')">Klick mich</p>
LegendeZeilen des SchrittsEin Absatz, in dem Aussehen und Verhalten direkt im HTML-Tag stehen.