| Wissen | Können | Projekt |
|---|
- Synchrone und asynchrone Verarbeitung
- Bedeutung von asynchronen Callback-Funktionen
- Unterschied zum Threading
| - Zeitgesteuertes Ausführen von Aktionen
- Auslagerung von Funktionen in Webworker
| - Sekundenanzeige, startet bei 0 wenn ein neues Sudoku erzeugt wird, stoppt wenn das Sudoku erfolgreich gelöst ist
- Wird 30 Sekunden lang kein Sudoku-Wert geändert, so wird ein falsch belegtes Feld oder ein eindeutig lösbares Feld hervorgehoben
- Erfolgt weitere 30 Sekunden keine Änderung, so wird ein hervorgehobenes Fehler-Feld geleert bzw. ein eindeutig lösbares Feld aufgelöst
- Auslagerung der Sekundenmessung in einen Webworker
|
Asynchrone Verarbeitung
| - Die Ausführung von Javascript-Code erfolgt immer im gleichen Thread und damit nacheinander. Führen Sie das Beispiel aus und machen Sie sich klar, welche Farbe für welchen Code steht.
- Warum wird der Balken in orange als erstes gezeichnet?
- Machen Sie sich bewusst, was setInterval und setTimeout eigentlich tun und erklären Sie so die Funktionsweise dieses Beispiels
- Erklären Sie warum die Funktionsausführung stoppt
- Modifizieren Sie den Code, sodass zwischen dem blauen und dem dunkelgrünen Balken ein hellblauer erscheint
- Modifizieren Sie den Code, sodass hinter jedem roten Balken sofort ein rosa Balken gezeichnet wird
|
| - Führen Sie das Codebeispiel aus. Versuchen Sie ggf. auch größere Primzahlen. Bemerken Sie den Unterschied? (Achten Sie auch auf die Reaktionsfähigkeit des Browsers)
- Erklären Sie die unterschiedlichen Verhaltensweisen mit Ihrem Wissen über die Funktionsweise von setTimeout
- Erklären Sie den Unterschied in der Laufzeit der Algorithmen
- Modifizieren Sie das Beispiel, sodass anstelle der Primzahlprüfung die entsprechende Fibonacci-Zahl berechnet wird und vergleichen Sie die Methoden
|
Webworker
| - Probieren Sie das Beispiel aus. Wählen Sie ggf. auch größere Primzahlen. Beobachten Sie die Systemauslastung Ihres Rechner und erklären Sie warum der Browser nicht blockiert.
- Kopieren Sie das Beispiel in ein lokales Projekt und führen Sie es mit Firefox aus. Debuggen Sie den Webworker um die Parameterübergabe nachzuverfolgen.
(Hinweis: Unter "about:config" muss der Eintrag "devtools.debugger.workers" auf "true" gesetzt werden, um das Debuggen paralleler Threads zu aktivieren) - In diesem Beispiel wird der Webworker direkt mit dem auszuführenden Code initialisiert. Recherchieren Sie wie Webworker mit eigenständigen Javascript-Dateien initialisiert werden und stellen Sie Ihren Code entsprechend um.
- Recherchieren Sie die Bedeutung von importScripts in diesem Zusammenhang
- Im Code eines Webworker verweist this nicht auf das window Objekt. Welches Objekt wird stattdessen angeboten und welche Möglichkeiten bringt es mit sich?
|
Projekt und weitere Übungen
Erweitern Sie das Sudoku um einen Sekundenzähler welcher beim Start eines neuen Sudokus bei 0 beginnt und stoppt wenn das Sudoku komplett und richtig ausgefüllt ist. Setzen Sie die o.g. Hilfsfunktionen um und lagern Sie den Sekundenzähler in einen Webworker aus.
Beispiellösung
WE1-P7.zip - Machen Sie sich mit loupe vertraut und experimentieren Sie mit dem vorgegebenen Code-Beispiel. Loupe is a little visualisation to help you understand how JavaScript's call stack/event loop/callback queue interact with each other.
- Entwickeln Sie eine Webanwendung wie in folgender Abbildung:
unter Berücksichtigung der folgenden Anleitung:
Nach dem Laden der Webseite wird das aktuelle Datum mit Uhrzeit angezeigt und permanent automatisch aktualisiert. Zur Umsetzung verwenden Sie reines Javascript (single thread, asynchron). Mit dem Knopf "Timer/Worker starten" wird ein (HTML5-)WebWorker eingerichtet, dessen Auftrag darin besteht, einen Timer (Zählergenerator) mit 0 zu starten. Dieser kann mit "Timer unterbrechen" temporär gestoppt und mit "Timer fortsetzen" mit dem aktuellen Zählerstand fortgesetzt werden. "Worker zerstören" stoppt den Zähler dauerhaft und beendet im Hintergund auch die Existenz des WebWorkers. Nur mit "Timer/Worker starten" kann die Kommunikation fortgesetzt werden.
Hinweis: Generator.html, workerLogic.js - Entwickeln Sie eine kleine Webanwendung, die Daten aus einer vorbereiteten MySQL-Datenbank abfragt und in die Webseite (DOM) einbaut. Verwenden Sie den DB-Server aus XAMPP. Orientieren Sie sich an folgendem Skript: http://www.thegeekstuff.com/2014/01/mysql-nodejs-intro/. Wählen Sie Ihr Beispiel so, dass die mit asynchronem DB-Zugriff verbundenen Aspekte (Vorteile, Probleme) deutlich werden.
