JavaScript - Schritt für Schritt

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