Web Engineering 1/Javascript 2

Wiki-Quelltext dieser Seite.

{{Ziele|
* 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 Fehler-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==
{|
|style="width: 22em;vertical-align:top;"| 
<html><iframe width="400" height="320" src="//jsfiddle.net/pw_we1/zj4sLLvm/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''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 <tt>setInterval</tt> und <tt>setTimeout</tt> 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''
|}
{|
|style="width: 22em;vertical-align:top;"| 
<html><iframe width="400" height="320" src="//jsfiddle.net/pw_we1/uqdcLyp8/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''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 <tt>setTimeout</tt>''
* ''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==
{|
|style="width: 22em;vertical-align:top;"| 
<html><iframe width="400" height="320" src="//jsfiddle.net/pw_we1/11zLxozt/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''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.<br>(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 <tt>importScripts</tt> in diesem Zusammenhang''
* ''Im Code eines Webworker verweist <tt>this</tt> nicht auf das <tt>window</tt> Objekt. Welches Objekt wird stattdessen angeboten und welche Möglichkeiten bringt es mit sich?''
|}
{{Projekt|Beispiellösung <document>WE1-P7.zip</document>}}