Javascript 2

Aus ProgrammingWiki

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

Bereits in den vorangegangenen Kapiteln wurde asynchron programmiert. Javascript im Allgemeinen und jQuery im Speziellen nutzen diese Technik intensivst. Das Ziel ist die Ausführung von Code auf den Moment zu verschieben wo sie erforderlich ist und trotzdem den Code an den Stellen zu schreiben wo er inhaltlich hingehört.

Die Codezeile $("#id").click(function(){alert("Klick");}); umfasst zwei Funktionsaufrufe (click und alert). Wenn die Ausführung der Funktion click abgeschlossen ist, wurde die Funktion alert noch nicht ausgeführt. Syntaktisch ähnlich ist die Zeile [1,2].forEach(function(){alert("iterate");}); mit den Funktionsaufrufen forEach und alert. Hier wird alert vor dem Ende der Funktion forEach aufgerufen (synchron). Der Unterschied liegt also in der verwendeten Funktion und ob diese die übergebene Funktion asynchron ausführt oder nicht.

Basis der asynchronen Programmierung in Javascript ist die Funktion setTimeout. Bei Ausführung der Funktion wird die übergebene Callback-Funktion nur in einer Warteschlange platziert. Dahinter folgende Funktionen werden direkt im Anschluss ausgeführt bis die programmierte Funktion vollständig abgearbeitet wurde. Erst nach Ablauf der eingestellten Wartezeit (ab dem Zeitpunkt des Aufrufs von setTimeout) wird die Callback-Funktion vom Browser aufgerufen.

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 Schreiben Sie eine eigene Funktion mySetInterval die nur unter Verwendung von setTimeout die Funktionsweise von setInterval nachempfindet

Unter Verwendung von setTimeout können in Javascript eigene Funktionen geschrieben werden die Callback-Funktionen asynchron ausführen. Das erlaubt z.B. Animationen zu erzeugen indem die Bewegungen stückweise in kurzen Zeitabständen ausgelöst werden. Aber auch bei länger dauernden Funktionen ist es notwendig dem Browser die Möglichkeit zu geben zwischenzeitlich zu reagieren. Durch das Single-Threading blockiert prinzipiell jede aktive Ausführung von Code den Browser. Länger andauernde Blockaden enden mit einem Timeout der unbedingt zu verhindern ist.

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

Die bessere Alternative zur Ausführung langer Operationen sind Webworker. Diese sind die einzige Möglichkeit Funktionalitäten in eigenständige Threads auszulagern. Der Haupthread steht damit über die gesamte Ausführungszeit für Browserreaktionen zur Verfügung. Die Webworker-Verarbeitung erfolgt nebenläufig. Die Kommunikation zwischen Worker und Haupthread erfolgt über Messages. Mit postMessage werden Daten gesendet und durch Definition der Callback-Funktion onMessage können Daten emfangen werden.

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

1. 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.
2. 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
3. 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.