Hinweis: Ein paar JavaScript Themen sind offen geblieben daher werden wir diese in der Vorlesung am 28.10. nachholen und dann das Thema abschließen.
Folien und Beispiel JavaScript Code:
hier
oder via GIT über GitHUB
http://github.com/tux2323/software-technik-javascript/
Lernziele (Fragen zur Vorlesung)
- Wie und wo definiert man einen JavaScript-Dokument?
- Wie ruft man eine Funktion auf? Beispielsweise dadurch, dass man auf etwas klickt...
- Wie kann man JavaScript / HTML Code strukturieren und Prinzip Separation of Concerns (SoC) einhalten?
- Wie definiert man ein Objekte? Wie arbeitet man damit?
- Wie definiert man ein JSON Objekt?
- Wie greift man auf HTML-Elemente zu?
- Wie ändert man den Wert dieser HTML Elemente? Wie fügt man neue hinzu?
- Wie serialisiert man JavaScript Objekt in JSON?
- Wie kann man mit JavaScript Daten zwischen HTML Seiten übertragen?
Funktionen und funktionale Programmierung in JavaScript
Wie wir in der Vorlesung gesehen haben sind in JavaScript Funktionen "first class Elemente" der Sprache. Dies bedeutet man kann Funktionen an allen Stellen im Quelltext deklarieren und man kann Funktionen wie Objekte als Parameter an Methoden übergeben. Man spricht von einer funktionalen Programmiersprache (bzw. Programmierstil), Java ist hingegen wie auch C++ ist eine imperative Sprache bzw. erlaubt einen imperativen Programmierstil. Am Beispiel der Event Registrierung wollen wir uns hier ein paar JavaScript Quelltext Beispiele ansehen wie und wo man Funktionen deklarieren und nutzen kann.
Als erste ein einfaches Quelltext Beispiel für eine Funktion Deklaration und Aufruf.
Soll der Text in einem DIV ausgeben werden muss man warten bis die Seite geladen ist und kann dann den Inhalt ausgeben. Dazu kann man auf dem window Objekt des Browsers der Property (Attribut) onload eine Funktion zuweisen, die dann aufgerufen wird wenn die Webseite fertig geladen wurde. Die erste Variante hierfür ist eine Funktion windowLoadListener zu definieren und dem Attribut zuzuweisen, hier der Quelltext.
HTML Code für das Beispiel:
JavaScript Code für das Beispiel:
Eine schönere und etwas schlankere Variante ist die Deklaration der Funktion direkt dem Attribut window.onload zuzuweisen (inline), hier der Quelltext:
Funktionen lassen sich in JavaScript beliebig Schachteln und natürlich kann man wie dem window.onload Attribut jeder Variablen eine Funktion zuweisen, hier ein kleines Beispiel:
Funktionen sind in JavaScript das einzige Sprachelement das einen Scope hat. D.h. Variablen gelten (man hat nur Zugriff) nur innerhalb der Begin und Ende Klammern der Funktion. Daher sind Funktionen auch der einzige Weg in JavaScript Daten zu kapseln, hier ein Beispiel.
Objekte in JavaScript
In JavaScript kann man Objekte definieren. Ein Objekt entspricht im wesentlich einer Map, d.h. in einem Objekt können Key-Value Paare abgelegt werden, hier ein Beispiel:
Document Object Model - DOM
Über den DOM bietet der Browser via JavaScript einen Weg auf die HTML Seite zuzugreifen, dynamisch Elemente hinzuzufügen und Listener für Events auf Elementen zuregistrieren, hier ein Beispiel.
JSON - JavaScript Object Notation
Die JavaScript Object Notation, kurz JSON ist ein kompaktes Datenformat. JSON wurde von Douglas Crockford spezifiziert. JavaScript Objekte und JSON sind sehr ähnlich daher lassen sich JavaScript Objekte einfach in JSON speichern uns laden. JSON ist sogar gültiges JavaScript daher kann jedes gültige JSON-Dokument per eval() interpretiert werden. JSON wird i.d.R. in AJAX Requests als Datenformat genutzt in diesem Rahmen werden wir es auch noch mal genauer in der Vorlesung betrachten. Hier ein JSON Beispiel für das Kunden Objekt von oben.
Im Firefox und auch in anderen Browser können JavaScript Objekte über das JSON Objekt gespeichert und geladen werden, hier ein Beispiel.
Literatur
- JavaScript: The Good Parts - Douglas Crockford 2008
- Pro JavaScript Design Patterns - Ross Harmes 2007
Links
