O'Reilly logo

JavaScript - Schritt für Schritt by Steve Suehring

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

347
Kapitel 18
JavaScript-Anwendungen
In diesem Kapitel:
Komponenten von JavaScript-Anwendungen 348
JavaScript und Weboberflächen 349
348
Kapitel 18: JavaScript-Anwendungen
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
die Komponenten zu verstehen, die zu einer JavaScript-basierten Anwendung gehören
Komponenten von JavaScript-Anwendungen
Wenn es darum geht, eine browserbasierte Anwendung mit dem anspruchsvollen Erscheinungsbild einer
Desktopanwendung zu erstellen, ist häufig JavaScript im Spiel. Eine derartige Anwendung verfügt in be-
stimmtem Umfang über die gleichen Features und die Reaktionsfähigkeit einer Desktopanwendung, als
würde sie auf dem lokalen Computer und nicht über einen Webbrowser ausgeführt.
Dieses kurze Kapitel bietet einen Überblick über die Komponenten, die eine auf JavaScript basierende
Anwendung ausmachen. Es macht Sie mit der zugrunde liegenden Architektur bekannt und erläutert,
welche Komplexität erforderlich ist, um eine derartige Anwendung auf Unternehmensebene zu erstellen.
Die großen Drei: Anzeige, Verhalten, Daten
In einer Webanwendung gibt es hauptsächlich drei Komponenten:
Anzeige Bestimmt das Erscheinungsbild der Seite
Verhalten Legt fest, wie die Benutzeroberfläche reagiert, d. h. was passiert, wenn der Benutzer auf ein
Element auf der Seite klickt oder in anderer Form mit der Seite interagiert
Daten Die Serverkomponente, die die Daten enthält und die Aktionen durchführt, deren Ergebnisse
auf der Seite erscheinen
JavaScript-Code behandelt normalerweise die beiden ersten Komponenten in der obigen Liste – Anzeige und
Verhalten –, um die Benutzeroberfläche zu beeinflussen oder zu reagieren, wenn ein Benutzer eine Aktion auf
einer Seite durchführt. JavaScript verarbeitet zwar auch Daten, die der Server zurückgibt, aber normalerweise
nur insoweit, um die Anzeige in bestimmter Form anzupassen. Zum Beispiel ließe sich beim Aufruf eines
Webdienstes, der die aktuelle Temperatur oder Bewölkung zurückgibt, mithilfe von JavaScript ein Symbol für
die Wetterlage anzeigen. Die folgenden Abschnitte beschäftigen sich ausführlicher mit diesen drei Elementen.
Anzeige: Seitenlayout
Die Anzeige einer Webseite umfasst das Seitenlayout und alles, was mit dem Erscheinungsbild der Seite
zusammenhängt. Dazu gehören Farbschema, Bilder, Formatierung von Menüs (ob sie abgerundete Ecken
haben usw.), die Platzierung von Schaltflächen und Inhalten, Schriftfarben und Verwendung von Bildern.
JavaScript kann alle diese Elemente beeinflussen, wie Sie bereits in vorherigen Kapiteln zu CSS (Cascading
Style Sheets) und Formularvalidierung gesehen haben. Diese Elemente stehen im Mittelpunkt des Web-
designs und ziehen auch die meiste Aufmerksamkeit von Benutzern auf sich. Wenn Sie die Anforderungen
für Ihre Site ermitteln, sollten Sie diese Elemente unbedingt betrachten.
Verhalten: Steuern, was wann passiert
Einer der wichtigsten Faktoren im Hinblick auf Benutzerfreundlichkeit ist auch eines der Elemente, die
beim Design einer Webanwendung häufig übersehen werden: das Verhalten der Anwendungsoberfläche. Es
steuert, was passiert, wenn Benutzer mit einem bestimmten Element interagieren. Betrachten wir dazu zwei
einfache Szenarios:
JavaScript und Weboberflächen
349
Wenn ein Besucher die ###Submit-Schaltfläche auf einem Webformular anklickt, bleibt dann diese
Schaltfläche aktiv oder wird sie deaktiviert?
Wenn ein Eingabefeld den Fokus erhält, sollte es die Farbe wechseln oder hervorgehoben werden?
Selbst diese winzigen Verhaltensweisen können die Benutzerfreundlichkeit erheblich verbessern, wenn sie
richtig konzipiert sind. Wenn man jedoch das Design einer Site durcharbeitet, werden diese Verhaltenswei-
sen häufig vergessen, ignoriert oder zugunsten des Erscheinungsbilds der Site abgetan.
Daten: Konsumieren, anzeigen und validieren
JavaScript interagiert nicht direkt mit einer Datenbank oder einem Server (zumindest nicht in dem Rah-
men, mit dem sich dieses Buch beschäftigt). Vielmehr läuft die Interaktion über AJAX (Asynchronous
JavaScript and XML) und Webdienste, wobei aber diese Prozesse serverseitigen Code erfordern, um Daten
an das aufrufende JavaScript zurückzugeben.
Wie die Anzeigekomponente der Site sollten Sie auch die Backend-Komponenten für die serverseitigen Daten
angemessen berücksichtigen, wenn Sie eine Webanwendung entwerfen. Angefangen beim Datenbankdesign
bis hin zur Programmierung der Geschäftslogik verlangt die Backend-Kodierung sorgfältiges Arbeiten.
JavaScript und Weboberflächen
Programmierer setzen JavaScript ein, um Frontends mit hoher Benutzerfreundlichkeit zu realisieren. Microsoft
Bing Maps (ehemals Live Search Maps) ist ein Beispiel für eine Webanwendung, die sich ausgiebig auf Java-
Script stützt. Abbildung 18.1 zeigt ein Beispiel für Microsoft Bing Maps, das Sie unter http://www.bing.com/
maps/ finden.
Abbildung 18.1 Die Benutzeroberfläche für Bing Maps verwendet JavaScript, um eine gute Interaktivität zu realisieren

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required