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.
AJAX III: Clientseitige Funktionen
- Informationstechnik
- Sekundarstufe II
- etwa 16 Unterrichtsstunden
- entdeckendes Lernen, Ablaufplan
- 3 Arbeitsmaterialien
Informatik,
Programmieren,
Programmiersprache,
PHP,
HTML,
Software,
Computer,
Computeranwendung,
Web-Entwicklung
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.
Beschreibung der Unterrichtseinheit
Unterrichtsablauf
Inhalt
-
Einstieg
Funktionsweise der vollständig integrierten Anwendung
-
Erarbeitung I
Das AJAX-Kommunikations-modell
-
Erarbeitung II
JavaScript-Sprachelemente:
Prototypen, ContentLoader-Objekt, XMLHttpRequest anhand der Register-Komponente
-
Implementierung
JavaScript-Komponenten
Didaktisch-methodischer Kommentar
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.
-
ajax-3-funktionen_material.zip
In der ZIP-Datei finden Sie alle Arbeitsmaterialien für diese Unterrichtseinheit.
Mappe Merkliste -
Demoanwendung.zip
Hier finden Sie die Demoversion des Spiels "Tic Tac Toe", die während der ganzen Unterrichtssequenz zur Orientierung dient.
Mappe Merkliste -
ajax_funktionen_infoblatt.pdf
Auf diesem Infoblatt finden Sie grafisch dargestellte Architekur der Ajax-Webanwendung "Tic Tac Toe".
Vorschau Mappe Merkliste
-
Links zum Thema
Diese ausgewählten Internetadressen dienen der Recherche im Unterricht oder bei der Unterrichtsvorbereitung.
Vermittelte Kompetenzen
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.
Kurzinformation zum Unterrichtsmaterial
| 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 |
Bitte melden Sie sich an, um einen Kommentar zu schreiben.
Anmelden