Der dritte und letzte Teil der Unterrichtsreihe befasst sich mit den clientseitigen Funktionen der Webanwendung. Diese Funktionen dienen dazu, Zustandsveränderungen des serverseitigen Modells auf die grafische Benutzeroberfläche abzubilden. Der dritte Teil der Unterrichtssequenz hat das Ziel, die clientseitigen Kommunikationskomponenten der Webanwendung (JavaScipt-Skripte) zu implementieren und zu einer funktionsfähigen AJAX-Webanwendung zu integrieren. Dabei handelt es sich um eine sehr anspruchsvolle Aufgabe, die die Lernenden mit vielen vermutlich neuen Aspekten der Sprache JavaScript konfrontiert. Architekturprinzip der Webanwendung Tic Tac Toe Jeder serverseitigen Komponente, die in Form eines PHP-Skripts vorliegt, wird genau ein clientseitiger Partner in Form eines JavaScript-Skripts gegenübergestellt. Diese beiden Teilkomponenten kommunizieren via XMLHttpRequest miteinander, wenn eine Benutzeraktion dies erfordert. Die Integration der Komponenten erfolgt clientseitig mithilfe globaler Variablen. Eine Möglichkeit dies zu tun zeigt die Demoanwendung. Funktionsweise Wenn die Lernenden schließlich die grundsätzliche Funktionsweise der Client-Server-Kommunikation via XMLHttpRequest sowie eine mögliche Form der Umsetzung verstehen, kann die konkrete Implementierung der Komponenten und deren Integration in Angriff genommen werden. Dies soll von den Schülerinnen und Schülern selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden. Didaktische Reduktion Der Code zur Erzeugung des XMLHttpRequest-Objekts sowie die Methoden für die programmatische Benutzung dieses Objekts innerhalb der clientseitigen Kommunikationskomponenten werden den Lernenden in Form des ContentLoader-Objekts (Datei: contentloader.js) bereitgestellt. Dieses Objekt muss von den clientseitigen Komponenten erzeugt und seine Methoden auf geeignete Art und Weise aufgerufen werden. Als konkretes Beispiel dafür wird die Register-Komponente zur Registrierung neuer Benutzer ebenfalls vorgegeben (Datei: register.js). Ablauf der Unterrichtseinheit Das AJAX-Kommunikationsmodell In dieser Unterrichtsstunde erarbeiten die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt. Implementierung der clientseitigen Komponenten In der letzten Stunde der dreiteiligen Unterrichtssequenz setzen die Schülerinnen und Schüler die AJAX-Webanwendung für das Spiel "Tic Tac Toe" komplett um. Fachkompetenz Die Schülerinnen und Schüler sollen JavaScript-Objekte mit geeigneten Event Handlern entwickeln, die mit den serverseitigen Komponenten via XMLHttpRequest kommunizieren. die Komponenten clientseitig zu einer funktionierenden Anwendung integrieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. englischsprachige Fachtexte übersetzen und verstehen. zur Verfügung gestellte JavaScript-Bibliotheken integrieren und benutzen. Thema AJAX III: Clientseitige Funktionen Autor Dr. Ralf Seliger Fach Web-Programmierung, Informationstechnik, Informatik Zielgruppe Informationstechnische Assistentinnen und Assistenten (Oberstufe) Zeitraum etwa 16 Unterrichtsstunden Medien Computer, Internet Technische Voraussetzungen Rechnerraum mit Internetzugang und Beamer Fachliche Lernvoraussetzungen Die Lernenden sollen über praktische Kenntnisse in der prozeduralen Programmierung verfügen. Planung Verlaufsplan AJAX III Begriffsdefinitionen und Unterschiede Anhand der Übersetzung des englischen Originaltextes, mit dem der Begriff AJAX von Jesse James Garrett im Jahr 2005 geprägt wurde, sollen sich die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt erarbeiten. Darüber hinaus erläutert der Autor sehr anschaulich die Unterschiede zur herkömmlichen Client-Server-Kommunikation. Registrierung neuer Benutzer Die Komponente Register registriert neue Benutzer in der Datenbank des Servers, wenn der gewünschte Benutzername noch nicht vergeben ist. Diese Komponente wird den Lernenden vorgegeben, damit sie sich anhand einer Codeanalyse die grundsätzliche Funktionsweise und das Zusammenwirken der client- und serverseitigen Kommunikationskomponenten erschließen können. Umsetzung Gegenstand der folgenden Aufgabenstellungen ist die schrittweise Implementierung der clientseitigen Kommunikationskomponenten und ihre Integration zu der vollständigen Webanwendung Tic Tac Toe. Auf den Aufgabenblättern bekommen die Lernenden jeweils Hinweise, mit welchen JavaScript-Sprachelementen das Problem auf jeden Fall lösbar ist. Zur konkreten Umsetzung werden jedoch noch Recherchen auf den einschlägigen Webseiten erforderlich sein. Am einfachsten dürfte die Implementierung der Spiellogik mithilfe einiger globaler Variablen sein (siehe Demoanwendung). Clientseitige Validierung der Formulardaten Es ist nur sinnvoll, Daten zum Server zu übertragen, nachdem diese plausibilisert worden sind. So ist zu überprüfen, ob tatsächlich ein Benutzername und ein Kennwort in das Loginformular eingetragen wurden. In Bezug auf das Registrierungsformular ist zusätzlich zu überprüfen, ob das Kennwort und seine Wiederholung identisch sind. Die clientseitigen Kommunikationskomponenten werden zweckmäßigerweise in der folgenden Reihenfolge implementiert. Die Polling-Komponente ist dabei laufend um zusätzliche Funktionalitäten zu ergänzen. Register (vorgegeben) Login Poller Offer (Poller ergänzen) Accept (Poller ergänzen) Move (Poller ergänzen) ResetGame