Web Engineering 1/Javascript 1

Wiki-Quelltext dieser Seite.

__NOTOC__
{{Ziele|
* Javascript als funktionsorientierte Sprache (ECMAScript)
* Gültigkeitsbereiche von Variablen
* Closure-Konzept
* Dynamische Typisierung von Variablen
* OOP mittels Prototypen
|
* Beherrschung der grundlegenden Javascript Syntax
* Kontrollierter Umgang mit globalen und lokalen Variablen
* Verwendung von Objekten (assoziativen Arrays)
* Intuitives Anwenden von Vergleichsoperatoren
* Erstellung und Manipulation von Prototypen
|
* Erstellung eines Sudoku-Spiel-Objekts zur Verwaltung
* Eigene "Klasse" für ein Sudoku-Feld, entsprechende Objekte im Sudoku-Spiel-Objekt
* Verknüpfung der Sudoku-Feld-Objekte mit dem entsprechenden Input-Feld
* Start-Knopf: Neues zufälliges Sudoku-Rätsel erzeugen (vorgegebene Zahlen dürfen nicht geändert werden)
}}

==Javascript Variablen==
{|
|style="width: 22em;vertical-align:top;"| <html>
<iframe width="400" height="340" src="//jsfiddle.net/pw_we1/wqxpeouy/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Erforschen Sie das Beispiel und erklären Sie:''
** ''Warum ändert der Aufruf von <tt>global</tt> den globalen Wert <tt>x</tt>?''
** ''Warum verändert <tt>a++</tt> in der Funktion <tt>local</tt> die globale Variable <tt>x</tt> nicht?''
** ''Warum verändert <tt>var x = 100;</tt> in der Funktion <tt>local</tt> die globale Variable <tt>x</tt> nicht?''
* ''Recherchieren Sie wie Arrays initialisiert und wie Elemente hinzugefügt werden''
* ''Initialisieren Sie <tt>x</tt> als Array und ersetzen Sie die Inkrementierung der Variablen durch das Hinzufügen von Elementen. Nehmen Sie die Länge der Arrays zur Berechnung der im Button-Text ausgegebenen Werte.''
* ''Erklären das unterschiedliche Verhalten (Hinweis: Value Type / Reference Type)''
|}

==Objects==
{|
|style="width: 22em;vertical-align:top;"| <html>
<iframe width="400" height="270" src="//jsfiddle.net/pw_we1/j014dw2r/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Nutzen Sie das Eingabefeld um die verschiedenen Möglichkeiten des Zugriffs auf Objekteigenschaften zu erproben''
* ''Erzeugen Sie auch neue Eigenschaften.''
* ''Die Zugriffsarten sind unterschiedlich mächtig. Finden Sie heraus was mit dem Punkt-Operator nicht möglich ist''
* ''Erzeugen Sie neue Objekte als Eigenschaften und greifen Sie auf diese zu''
* ''Erzeugen Sie eine Objekt-Rekursion (eine Eigenschaft verweist auf das Objekt welches diese enthält). Zeigen Sie, dass Eigenschaft und Objekt identisch sind.''
* ''Recherchieren Sie eine Möglichkeit die Eigenschaften eines Objekts zu iterieren. Vergleichen Sie die Geschwindigkeit der Iteration mit der eines Arrays und erklären Sie das Ergebnis.''
|}

==Vergleichsoperatoren==
{|
|style="width: 22em;vertical-align:top;"| <html>
<iframe width="370" height="300" src="//jsfiddle.net/pw_we1/yco7oez6/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Führen Sie verschiedene Vergleiche aus. Finden heraus worin sich die Vergleichsoperatoren unterscheiden''
* ''Vergleichen Sie auch die Array-Elemente und Objekt-Eigenschaften miteinander''
* ''Fügen Sie <tt>obj1</tt> sowohl <tt>arr1</tt> als auch <tt>arr2</tt> hinzu und vergleichen Sie die hinzugefügten Array-Elemente''
* ''Machen Sie sich den Unterschied zwischen Wert-Typen und Referenz-Typen klar''
* ''Jedes Objekt hat eine Funktion <tt>toString()</tt>. Vergleichen Sie deren Rückgabewerte von <tt>obj1</tt> und <tt>obj2</tt>''
* ''Vergleichen Sie auch die <tt>toString</tt> Funktionen von <tt>obj1</tt> und <tt>obj2</tt>. Entspricht das Ihren Erwartungen?''
|}

==OOP mit Javascript==
{|
|style="width: 23em;vertical-align:top;"|<html>
<iframe width="370" height="380" src="//jsfiddle.net/pw_we1/4y8rogoj/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Analysieren Sie das Beispiel. Erschließen Sie in welchem Rahmen die jeweiligen Variablen und Funktionen gelten und erproben Sie Ihre Annahmen.''
* ''Machen Sie sich bewusst, was der <tt>new</tt> Operator eigentlich tut''
* ''Modifizieren Sie das Beispiel und erzeugen Sie ein zweites <tt>Obj</tt> Objekt. Vergleichen Sie die Eigenschaften und Funktionen der Objekte.''
* ''Funktionen am <tt>prototype</tt> sind direkt am Objekt verfügbar. Was passiert wenn Sie eine gleichnamige Funktion in der Objektdefinition deklarieren?''
* ''Das Konzept der Vererbung basiert darauf, dass eine abgeleitete Klasse die Methoden und Eigenschaften ihrer Basisklasse erhält. Bewerten Sie in dieser Hinsicht die Möglichkeiten der Eigenschaft <tt>prototype</tt>.''
* ''Was passiert wenn dem <tt>prototype</tt> von Objekt A ein anderes Objekt B zugewiesen wird? Experimentieren Sie.''
* ''Recherchieren Sie die Eigenschaft <tt>constructor</tt> von <tt>prototype</tt> und dessen Bedeutung bei der Realisierung der Vererbung''
* ''Mit ECMAScript 2015 (ES6) wurden neue syntaktische Hilfsmittel zur objektorientierten Programmierung mit Javascript eingeführt. Recherchieren Sie die Verwendung von <tt>class</tt>, <tt>extends</tt>, <tt>super</tt> sowie die Syntax zur Definition von Gettern und Settern.''
* ''Setzen Sie Übungen zur OOP unter Verwendung der alternativen Syntax um.''
|}

{{Projekt|Die übliche Verfahrensweise bei der Generierung eines Sudoku besteht aus zwei Schritten:
# Erzeugung eines vollständig mit Zufallszahlen ausgefüllten Sudokus, wobei die Sudoku-Regeln nicht verletzt werden
# Entfernung von Werten an zufälligen Positionen, solange das Sudoku eindeutig lösbar bleibt
Für Punkt 1 ist ein Backtracking Algorithmus notwendig. Wenn für ein Feld keine der neun Zahlen in Frage kommt, dann muss ein vorher bereits festgelegtes Feld noch einmal verändert werden.
Ein Sudoku ist eindeutig lösbar, wenn es zu jedem Zeitpunkt immer mindestens ein Feld gibt, dem nur eine einzige Zahl zugeordnet werden kann.
Beispiellösung <document>WE1-P6.zip</document>
}}