molily: Weblog-Artikel: Der sinnvolle Einsatz von JavaScript

Beitrag lesen

Hallo zusammen,

im jüngsten, etwas längeren Weblog-Beitrag »Der sinnvolle Einsatz von JavaScript« starten wir die öffentliche Diskussion über SELFHTML 9.

Anschließend an die darin vorgestellten Theorien möchten wir hier die Frage stellen, was ihr von den Konzepten haltet und wie wir sie SELFHTML 9 berücksichtigen können.

Im Beitrag werden folgende allgemeine Fragen gestellt:
Welche konkreten Anwendungsbereiche von Javascript gibt es?
Wie kann sich dies im Aufbau des JavaScript-Kapitels niederschlagen?
Welche Javascript-Anwendungen geben ein gutes Beispiel ab und sollten in SELFHTML 9 vorgestellt werden?
Ich bitte euch, zu diesen Fragen Stellung zu nehmen im Anschluss an die Lektüre des Weblog-Eintrags.

Auch ich habe mir Gedanken gemacht und zahlreiche JavaScript-Beispiele im Web durchforstet. Dabei bin ich auf folgende Anwendungsbereiche gestoßen, die mir sinnvoll erscheinen.

Kategorie: Unobtrusive, voll zugänglich und abwärtskompatibel

  • Formularvalidierung
    Formularvalidierung wird durchgängig als das Musterbeispiel von sinnvollem JavaScript-Einsatz genannt.

  • Interaktive, mehrstufige Formulare mit Fallunterscheidungen, Formular-Eingabehilfen, Formular-Assistenten
    Gewisse komplexe Formulare, bei denen der Benutzer irrelevante Teile überspringen müsste oder unzählige Checkboxen (de-)aktivieren müsste, lassen sich mit etwas JavaScript schneller bedienen und der Benutzer lässt sich besser leiten.

  • Darstellung von semantischen Informationen, die schon im Markup untergebracht sind, aber gängigerweise nicht dargestellt werden und mit CSS nicht so komfortabel umgesetzt werden können.
    Beispielsweise wird bei <blockquote cite="..."> ein Link zur Quelle eingefügt, aus meist unsichtbaren link-Elementen im head wird ein Navigationsmenü, beim Bewegen der Maus über Überschrift wird ein Link angezeigt, über den sich der Abschnitt adressieren lässt

  • Bildergalerien, Slideshows, Präsentationen

  • Aufklappnavigationen, Baumstrukturen einfacher durchstöbern
    (Wert zweifelhaft!)

  • Datum-Auswahlboxen in Formularen, Kalender mit Blätterfunktion
    Sieht man z.B. auf Seiten von Airlines, Reiseveranstaltern und anderen Ticket-Shops.

  • »Presentational JavaScript«: JavaScript als CSS-Unterstützung.
    Layout-Anpassungen und Layout-Effekte, die nur über JavaScript möglich sind, weil JavaScript besser auf die Umgebungsbedingungen reagieren kann. Effekte, die Änderungen im Markup nötig machten und damit die Trennung von Inhalt und Präsentation durchbrächen, werden dynamisch mit JavaScript eingefügt.

  • Stylesheet-Wechsler als Interface für <link rel="stylesheet alternative">
    Allgemeiner Wert zweifelhaft. Sinnvoll vielleicht für: Erhöhter Kontrast, für Mobilgeräte, spaltenlos und anpassungsfähiger, erhöhte Schriftgröße

  • Dynamisch eingefügte Navigations- und Lesehilfen.
    Zum Beispiel Hover-Lesemarkierung bei Datentabellen, Daten unterschiedlich anzeigen, sortieren und durchsuchen, Lesen erleichtern, Orientierung geben, Aufmerksamkeit lenken.

  • Kennt ihr weitere Bereiche oder lassen sich die Scripte, die ihr für besonders nützlich und beispielhaft erachtet, bereits in diese Bereiche einordnen?

Kategorie: nicht abwärtskompatible, sozusagen "obtrusive"

Eine solche JavaScript-Anwendung soll gemäß dem Unobtrusive-Konzept völlig verworfen werden. Tatsächlich gehören in diese Kategorie alle JavaScript-Anwendungen, die nicht nur "Zusätze" zu bestehenden klassischen HTML-Dokumenten darstellen, indem sie ihnen "Behavior" hinzufügen. Sie sind daher erst einmal nicht von selbst abwärtskompatibel.

Während alle Unobtrusive-Jünger diesen JavaScript-Einsatz verteufeln und für obsolet erklären, bin ich der Meinung, dass JavaScript erst hier sein nützliches Potenzial entfalten kann. Das heißt nicht, dass das Unobtrusive-Konzept irrt. Natürlich sollte man immer dann, wenn unobtrusive möglich ist, nach diesem Schema vorgehen.

Ich habe diejenigen Anwendungen im Kopf, die ihre Quintessenz verlieren, wenn man JavaScript wegnimmt. Zwar lässt sich dieselbe Funktionalität auch abwärtskompatibel bzw. rein serverseitig dynamisch umsetzen, aber die Anwendung bekommt gerade dadurch ihren Mehrwert, dass sie mit JavaScript gelöst ist. Ohne JavaScript würden sie ihren Charakter und ihre Nützlichkeit weitesgehend verlieren.

Ich denke an:

  • gewisse Spiele und Quizzes
  • Demonstrationen, Simulationen, Animationen
  • Kleine Helferlein wie Farbwähler, Konvertierung, Berechnung

Tatsächlich ist diese JavaScript-Anwendung im Web sehr verbreitet und für mich ist es ebenso eine Tatsache, dass diese Anwendungen das Web bereichert. Trotzdem wird in diesem Bereich natürlich der größte Missbrauch betrieben. Durch das Unobtrusive-Konzept lassen sich aber die meisten unangemessenen JavaScript-Anwendungen dieser Kategorie ausschließen.

Eine weitere Kategorie habe ich noch nich näher überdacht: Anwendungsbereiche von XMLHttpRequest bzw. Ajax. Ajax-Anwendungen teilen viel mit der eben beschriebenen Kategorie, sie gehen in ihren Möglichkeiten aber noch weiter. Konkrete Anwendungsbereiche lassen sich schwer benennen, schließlich fallen Ajax-Anwendungen aus dem bisher bekannten Web heraus. Ich möchte hier erst einmal nur auf 10 Places You Must Use Ajax hinweisen und bitte auch dazu um Kommentare und Ergänzungen.

Grüße,
Mathias