Programmieren im Web 2.0

Transkript

1 Programmieren im Web 2.0

2 Inhaltsverzeichnis JavaScript Einführung DHTML als eine Grundlage Do s and Dont s

3 Inhaltsverzeichnis / 2 Ajax Einführung Technische Grundlagen Das XMLHttpRequest Objekt Beispielanwendung Do s and Dont s

4 JavaScript - Einführung Auf vielen Internetseiten werden Eingaben von Nutzern erwartet welche geprüft werden sollten. Beispiel: Adressfeld

5

6 Simple und schnelle Lösung, aber: Was passiert wenn der Nutzer hab ich nicht einträgt? Lösung: Vorher nachschauen was denn der Nutzer reingeschrieben hat. Wie? JavaScript!

7

8 Die JavaScript Story Ursprünglich von Netscape entwickelt, zuerst unter den Namen Movat, dann um dem Java Trend zu folgen unter JavaScript Im Mai 1996 stellt Microsoft den ersten JScript fähigen Browser vor und fängt damit den Browserkrieg an.

9 Einer der Hauptgründe für die Anwendung von JavaScript in Browsern war der DHTML Boom. Heute findet sich JavaScript in fast jedem Graphischen Browser, allerdings mit einigen Inkompatibilitäten.

10 1998 wurde JavaScript unter dem Namen ECMAScript standardisiert und findet auch als Skriptsprache für diverse Anwendungen Verwendung... JavaScript wird sogar in Spielen eingesetzt da der Sprachkern klein ist.

11 Sprachbeschreibung JavaScript ist eine herkömmliche objektbasierte Sprache, da sie kein Klassenkonzept kennt, sondern Objekte als Prototypen nutzt. Die Syntax ist an Java angelehnt, weicht aber doch recht stark davon ab.

12 Datentypen/Standardobjekte: Object als allgemeiner Prototyp, von dem alle Objekte abgeleitet sind Function als Prototyp für Funktionen Array als Prototyp für Arrays String als Prototyp für Zeichenketten Boolean als Prototyp für Boolesche Variablen Number als Prototyp für Zahlen (64-Bit Gleitkommazahlen gemäß IEEE 754)

13 Math stellt Konstanten und Methoden für mathematische Operationen bereit. Math kann nicht als Konstruktor dienen. Date für Operationen mit Daten bzw. Zeitpunkten und Datumsformaten RegExp für reguläre Ausdrücke

14 Weitere Objekte können vorhanden sein, dies hängt aber vom Anwendungskontext ab, in einem Browser werden beispielsweise window und document vordefiniert, während es diese in Spielen nicht gibt.

15 Diese vordefinierten Prototypen entsprechen teilweise grundlegenden Datentypen. Zeichenketten haben den Typ String, numerische Werte den Typ Number und boolesche Werte den Typ Boolean. Des Weiteren gibt es die Typen null und undefined.

16 Alle anderen Werte sind Objekte und haben den Typ Object. Funktionen, Arrays, Datumsobjekte und reguläre Ausdrücke sind so gesehen spezielle Objekte. JavaScript ist nicht typisiert, d. h. der Datentyp einer Variablen kann sich während der Ausführung eines Scripts ändern!

17 Arbeiten mit Objekten Objekterstellung: MeinObjekt = new Object(); Beispiel: MeinArray = new Array( 23, 42 );

18 Methoden- und Eigenschaftszugriff: Objekt.Eigenschaft bzw. Objekt.Methode([Parameter]); Wertzuweisung bei Objekten: Objekt.Wert = 1; bzw. Objekt[ Wert ] = 1;

19 Kontrollstrukturen if( Bedingung ) { Anweisungen; } else { AndereAnweisungen; } while( Bedingung ) { Anweisungen; }

20 do { Anweisungen; } while( Bedingung ); for( [Start];[Bedingung];[Induktion]) { Anweisungen; }

21 switch (Variable) { case wert1 : Anweisungen; break; case wert2 : Anweisungen; break; default : Anweisungen; }

22 Funktionen function Foo( Param1, Param2 [...] ) { Anweisungen; [return Ausdruck;] } var Bar = function( Param1 [...] ) { Anweisungen; [return Ausdruck;] }

23 Funktionales Programmieren Da Funktionen in JavaScript vollwertige Objekte sind, sind sie Funktionen höherer Ordnung. Damit können sie auch als Parameter an andere Funktionen übergeben werden, sowie verzögert ausgewertet werden.

24 Vererbung über die Eigenschaft prototype Jede Funktion, d. h. jedes vom Function- Prototyp abgeleitete Objekt verfügt über eine Eigenschaft prototype. Diese übernimmt eine wichtige Aufgabe, wenn die Funktion als Konstruktor benutzt wird, um neue Objekte zu initialisieren.

25 Die Eigenschaft prototype definiert in diesem Falle gemeinsame Eigenschaften aller Objekte, die mit dem Konstruktor erstellt werden. (prototyp-basierte Vererbung) Auf diese Weise ermöglicht JavaScript mehrstufige Vererbung

26 Beispielcode für Vererbung

27 Einschub: DOM DOM: Document Object Model Das DOM beschreibt ein HTML oder XML Dokument als eine Struktur von Objekten. Damit kann man mit diesen Objekten arbeiten und das zugrunde liegende Dokument dynamisch verändern.

28 DHTML DHTML steht für Dynamic HTML und ist eine Sammlung diverser Techniken um Internetseiten interaktiver zu gestalten. (JavaScript, DOM, HTML...) Hauptmerkmal von DHTML ist die Manipulation der Objekte im DOM Baum um beispielsweise Elemente auszublenden oder ihren Inhalt zu verändern.

29 HTML vs. DHTML

30 Ajax Einführung Vorhandene Lösungen erfüllen ihren Zweck, haben aber Nachteile Mit DHTML konnten wir Vieles in den Client verlagern (Validierung, Seitenlogik) und Bandbreite sparen Für jede Änderung ist eine Interaktion des Benutzers notwendig

31 Was ist eigentlich Ajax? Asynchronous JavaScript and XML Einführung einer asynchronen Datenübertragung zwischen Client und Server. Mischung von Client- und Serverseitiger Logik um Anwendungen interaktiver zu gestalten. Umsetzung im Browser mit Hilfe von JavaScript.

32 Formate für die Übertragung XML, JSON Geeignete Formate für das Übertragen von Datensätzen. Plain Text, HTML Formate für Texte und Seiteninhalte.

33 XML XML ist eine weitverbreitete und standardisierte hierarchische Datensatzbeschreibungssprache XML-Daten sind selbstbeschreibend, leicht auswertbar.

34 JSON JavaScript Object Notation Ist eine objektbasierte Beschreibung der Datensätze und somit recht Programmiererfreundlich.

35 XML / JSON Schön zu lesen, aber etwas redselig Nicht ganz so schön zu lesen, aber kürzer

36 Technische Grundlagen Asynchrone Kommunikation (Auch ohne Benutzerinteraktion) JavaScript im Browser Meist ein Serverseitiges Gegenstück um Benutzeraktionen auszuführen.

37

38 Das XMLHttpRequest Objekt API für Datentransfer über HTTP Zentral für Ajax, sämtlicher asynchroner Datenverkehr wird über dieses Objekt getragen. Unterschiedlich implementiert (als ActiveX Objekt bei Microsoft...) aber weitgehend identische Funktionsweise.

39 Ursprünglich von Microsoft entwickelt (IE 5) als ActiveX Objekt Populär durch Google Maps und GMail In allen wichtigen Browsern implementiert, aber (noch) nicht durch das W3C standardisiert.

40 XMLHttpRequest als UML

41 Kleines AJAX Beispiel

42 AJAX Live Demo

43 Ein Framework: Prototype Prototype ist ein JavaScript Framework um den Umgang mit asynchronen Requests und der DOM Manipulation zu erleichtern. Zum Nutzen der Funktionalität ist nur eine zusätzliche JavaScript Datei nötig.

44 Anwendung von Prototype Um zum Beispiel Inhalt vom Server aus in ein DOM Objekt zu laden reicht folgende Zeile aus: new Ajax.Updater( object-id, URL ); Beispiel: new Ajax.Updater( mein-div, content.txt );

45 Anwendung von Prototype Auf DOM Objekte lässt sich mit Prototype auch sehr einfach zugreifen: $( object-id ).methode(); Beispiel: $( mein-div ).hide();

46 Prototype Live Demo

47 Ein Framework: Mochikit MochiKit makes JavaScript suck less MochiKit ist ein allgemeines JavaScript- Framework mit Ajax-Fähigkeiten, welches Konzepte der Programmiersprache Python umsetzt Modular aufgebaut, interessant ist MochiKit.Async

48 Datenübertragung per JSON sowie einfache DOM-Manipulation (MochiKit.DOM) Besonderheit: MochiKit gestattet verzögerte Ausführung von AJAX- Requests und implementiert Callbacks

49 Vor- und Nachteile Jetzt können wir alles hübsch dynamisch und interaktiv machen, ABER: Wie sieht es mit der Barrierefreiheit aus? Und wie mit der Usability?

50 Quellen Programmierung%29 Ajax: die nächste Generation der Web-Anwendungen Stefan Mintert, ix 11/2005 Seite 56,