Informatik 2 - Einführung in JavaScriptvoho0001/I2/Vorlesung/I25-JavaScript.pdf · Holger...

Prof. Dr.-Ing. Holger Vogelsang [email protected]

Informatik 2Einführung in JavaScript

Holger Vogelsang

Inhaltsverzeichnis

Prinzipien (3) Einstieg (11) Funktionen (38) Objekte und Vererbung (46) Module (63) Private Daten (69) DOM-Zugriffe (72) Ende (83)

Informatik 2 - Einführung in JavaScript 2

Holger Vogelsang

PrinzipienÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe

JavaScript Prinzipien

GrafischeOberflä-

chenÜbersicht Layouts Widgets Grafik-

operationenGrafik-widgets

Effekte,Animationen

OffenePunkteEreignisse

Daten-strukturen ADTs Elementare

DatenstrukturenHash-

tabellen Bäume GraphenIteratorenDatenstrukturenin Java

Einstieg Funktionen PrivateDaten

Objekte undVererbung Module DOM-

Zugriffe

Holger Vogelsang Informatik 2 - Einführung in JavaScript 4

PrinzipienMotivation

Eigenschaften von JavaScript Laufzeitumgebungen

Holger Vogelsang

PrinzipienSkriptsprachen

Was sind die Merkmale einer Skriptsprache (nicht genau definiert)? Häufig über einen Interpreter ausgeführt, keine Compilierung erforderlich Implizit deklarierte Variablen, schwache Typisierung: Variablentypen werden zur Laufzeit

erkannt Ducktyping Dynamische Programmänderung: Hinzufügen von Klassen, Methoden und Attributen zur

Laufzeit Automatische Speicherverwaltung wie in Java und C# Oft weniger „geschwätzig“ höherer Abstraktionsgrad, domänenspezifische Sprachen


Holger Vogelsang

PrinzipienSkriptsprachen

Vorteile von Skript-Sprachen: schnelle Entwicklungen (Rapid Prototyping) kein Compiler-Schritt erforderlich Austausch von Code zur Laufzeit Domain-spezifische SprachenNachteile von Skript-Sprachen:− Typfehler erst zur Laufzeit sichtbar viel mehr testen− schlechte IDE-Unterstützung (Typen fehlen), Vorschläge wie hier bei Java sind nicht so genau

möglich:

− geringere Ausführungs-Geschwindigkeit− weniger „Best Practices“ vorhanden


Holger Vogelsang

PrinzipienGeschichte der Sprache

1995: LiveScript im Browser Netscape Navigator 2.0 1996: Nach Umbenennung JavaScript 1.1 im Netscape Navigator 3 und im Internet Explorer

3.0. 1998: JavaScript 1.3 wird im Standard ECMA-262 festgehalten. … 2008: JavaScript 1.8.5 wird im Standard ECMAScript 5 Compliance festgehalten darauf

basiert die Einführung in der Vorlesung

Die Syntax von Java ähnelt der von JavaScript, die Semantik ist teilweise aber deutlich anders.


Holger Vogelsang

PrinzipienEigenschaften

Laufzeitumgebung auf dem Client: Z.B. im Browser zur Manipulation von Web-Seiten.

JavaScript läuft in einer „Sandbox“ und kann nicht auf das Betriebssystem des Anwenders zugreifen.

Auf diese Anwendung beschränkt sich die Vorlesung im Wesentlichen.


Browser Web Server

JavaScript-Funktionen

HTML-Seiten, Bilder,JavaScript-Dateien,

CSS-Dateien …(Dateisystem)

URL-AufrufAntwort

Aufruf

lesen

Holger Vogelsang


Laufzeitumgebung auf dem Server: Als Server-Anwendung, Auslieferung von Web-Seiten und anderen Informationen.

Diese Anwendung wird in der Vorlesung nicht behandelt.


Browser Web Server

Schnittstelle

JavaScript-Programme

HTML-Seiten, Bilder,JavaScript-Dateien,

CSS-Dateien …(Dateisystem)

URL-AufrufAntwort

URL-Aufruf (+ Parameter)Antwort

lesen

Aufruf

Holger Vogelsang


Laufzeitumgebung ist eine JVM zur Erweiterung oder Konfigurierung von Java-Programmen.

Diese Anwendung wird in der Vorlesung nicht behandelt kleines Beispiel in der Vorlesung „Benutzungsoberflächen“.


GUIJava-Objekte

K1

Ausführung

JavaScript

InterpreterEreignis

K2

K3 Zugriff

Holger Vogelsang

EinstiegÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

EinstiegDas erste JavaScript-Programm

Als Laufzeitumgebung für die folgenden kleinen Beispiele eignet sich die Konsole des Chrome- oder des Firefox-Browsers ganz gut: Chrome: Tools JavaScript-Konsole Firefox: Entwickler-Werkzeuge JavaScript-Umgebung zur Eingabe und Entwickler

Browser-Konsole zur Ausgabe (vorher eventuell noch Firebug installieren) Eingabe in die Konsole (entspricht ungefähr System.out.println in Java):

console.log('Hello World');

Ein- und Ausgabe (Chrome):


Holger Vogelsang


Ein- und Ausgabe (Firefox):

Es sind einfache und doppelte Anführungszeichen erlaubt. console ist ein im Browser vorhandenes JavaScript-Objekt.


Holger Vogelsang


Ab jetzt: Beispiele in der WebStorm-IDE: Node.js von http://nodejs.org/#download herunterladen und installieren WebStorm von http://www.jetbrains.com/webstorm/download/ herunterladen (Lizenz

im Ilias), installieren WebStorm starten und in File Settings JavaScript Browser den Pfad auf

node.exe eintragen (falls nicht automatisch gefunden, je nach Betriebssystem hat die Datei natürlich eine andere oder keine Endung).

Neues, leeres Projekt anlegen Zum Projekt eine JavaScript-Datei Console.js (Name ist nicht wichtig) hinzufügen und

console.log('Hello World');

eintragen.


http://nodejs.org/%23download

http://www.jetbrains.com/webstorm/download/

Holger Vogelsang


Ergebnis:


Holger Vogelsang

EinstiegDas erste JavaScipt-Programm

Einbettung von JavaScript in eine HTML-Datei (EmbeddedJavaScript.html):<!DOCTYPE html><html><head lang="de"><meta charset="UTF-8"><title>Hello World</title><script>

alert('Hello World');</script>

</head><body><h1>Titelzeile</h1></body></html>

alert() ist eine vordefinierte Funktion in Browsern, die einen kleinen Dialog öffnet. Der Dialog wird hier beim Laden der Seite und vor dem Anzeigen des Inhalts eingeblendet.


Holger Vogelsang

EinstiegDas erste JavaScipt-Programm

Laden einer externen JavaScript-Datei (ExternalJavaScript.html):<!DOCTYPE html><html><head lang="de"><meta charset="UTF-8"><title>Hello World</title><script type="text/javascript"

src="./js/External.js"></script></head><body><h1>Hello World</h1><script>showMessage('Hello World')</script>

</body></html>

Das erste script-Tag erhält mit dem src-Attribut den Namen einer JavaScript-Datei. Das zweite script-Tag enthält den Aufruf der geladenen Funktion. Die Funktion wird

aufgerufen, wenn der Teil der HTML-Seite geladen ist.


function showMessage(message) {alert(message);

}

Ladender Datei

Aufrufder Funktion

Holger Vogelsang

EinstiegDatentypen

Es gibt in JavaScript nur sehr wenigen Datentypen: object: Objekte, entsprechen ungefähr Maps in Java, zu denen Methoden und beliebige

Attribute hinzugefügt werden können. Auch Arrays sind Objekte. string: Zeichenketten, entsprechen ungefähr der String-Klasse in Java. number: Zahlen boolean: Wahrheitswerte

Eine Variable wird ohne Typangabe angelegt: var year = 2000; Typ einer Variablen zur Laufzeit auslesen, Operator typeof:

var year = 2000;console.log(typeof year); // Ausgabe: numberyear = 'Vogelsang';console.log(typeof year); // Ausgabe: string

Das Schlüsselwort var kann weggelassen werden, sollte aber nicht: Ohne die Angabe wird eine globale Variable erzeugt.

Tipp: Jede JavaScript-Datei mit 'use strict'; einleiten gewisse alte Eigenschaften der Sprache (z.B. Verzicht auf var) erzeugt Laufzeitfehler.


Holger Vogelsang

EinstiegDatentypen: object

Objekte sind eigentlich nur Maps: Attribute bestehen aus Schlüssel (Attributnamen) und Wert (Wert des Attributs) Attributwerte können von einem beliebigen Typ sein auch Funktionen! Attribute lassen sich zur Laufzeit hinzufügen und mit delete entfernen. Sie würden in Java einer Map<String, Object> entsprechen.

Erzeugen eines leeren Objektes (Konstruktoren usw. kommen später):var obj1 = {};

obj1 ist eine Variable mit einer Referenz auf das Objekt. Erzeugen eines Objektes mit Attributen:

var obj2 = {lastname: 'Vogelsang',firstname: 'Holger'

};

Zugriff auf die Attribute mit „.“ oder „[]“ (Angabe des Schlüssels = Attributname, Rückgabe der Wert):console.log(obj2.lastname);console.log(obj2['lastname']);


Holger Vogelsang

EinstiegDatentypen: object

Attribute können jederzeit überschrieben werden:obj2.lastname = 'Gmeiner';

Es dürfen neue Attribute hinzugefügt werden:obj2.age = 42;obj2.role = function() { return 'Dozent'; };

Da Funktionen Objekte sind, dürfen sie einem Attribut als Wert zugewiesen werden. Auf solche Funktionen wird später genauer eingegangen (und wie man das besser machen kann).

Entfernen eines Attributs aus einem Objekt:delete obj2.age;console.log(obj2.age); // Ausgabe: undefined

Typ eines Objekts:console.log(typeof obj2); // Ausgabe: object


Holger Vogelsang

EinstiegDatentypen: object (Array)

Erzeugen eines Arrays:var values = [1, 2, 3, 4];

Typ eines Arrays:console.log(typeof values); // Ausgabe: object

Zugriff auf Array-Elemente:console.log(values[0]); // Ausgabe: 1console.log(values); // Ausgabe: [ 1, 2, 3, 4 ]

Ändern der Array-Elemente, es müssen nicht alle Daten im Array denselben Typ haben:values[ 2 ] = 'Name';console.log(values); // Ausgabe: [ 1, 2, 'Name', 4 ]

Arrays sind im Gegensatz zu Java in ihrer Größe veränderlich. Anhängen neuer Werte an das Ende des Arrays mit push:

values.push(42, 66);console.log(values); // Ausgabe [ 1, 2, 'Name', 4, 42, 66 ]


Holger Vogelsang


Entfernen von Werten aus dem Array mit splice:values.splice(1, 2); // an Position 1 werden 2 Elemente entferntconsole.log(values); // Ausgabe [ 1, 4, 42, 66 ]

Mit splice lassen sich auch Werte einfügen (siehe JavaScript-Referenz). Länge eines Arrays:

var values = [1, 2, 3, 4];console.log(values.length); // Ausgabe: 4

Die Länge kann vergrößert oder verkleinert werden:values.length = 6;console.log(values); // Ausgabe: [ 1, 2, 3, 4, , ]console.log(values[ 5 ]); // Ausgabe: undefinedvalues.length = 3;console.log(values); // Ausgabe: [ 1, 2, 3 ]

Es darf auch über die Array-Grenzen hinaus geschrieben werden. Dabei wird das Array automatisch vergrößert:values = [1, 2, 3, 4];values[ 8 ] = 8;console.log(values); // Ausgabe: [ 1, 2, 3, 4, , , , , 8 ]


Holger Vogelsang


Es gibt weitere Methoden, z.B. shift (verschiebt alle Elemente um eines nach links):values = [1, 2, 3, 4];values.shift();console.log(values); // Ausgabe (die 1 ist jetzt weg): [ 2, 3, 4 ]

Die JavaScript-Referenz sowie die Code-Vervollständig in z.B. WebStorm zeigen viele weitere Methoden auf Arrays.


Holger Vogelsang

EinstiegDatentypen: object (string)

Strings sind denen aus Java ähnlich. Einfache Anführungszeichen (oft bevorzugte Variante): var name = 'Vogelsang'; Doppelte Anführungszeichen: var name = "Vogelsang"; Der Typ eines Strings ist string:

console.log(typeof name); // Ausgabe: string

Jedes Zeichen eines Strings ist wiederum ein String:var first = name[ 0 ];console.log(typeof first); // Ausgabe: string

Es gibt also kein einzelnes char wie in Java. Strings lassen sich mit += und + verbinden kann langsam sein, weil viele

Zwischenobjekte erzeugt werden. Besser, wenn die Strings im Array vorliegen:var strings = ['a', 'b', 'c', 'd' ];var result = strings.join('-'); // Alle verbinden, Trennzeichen ist '-'console.log(result); // Ausgabe: a-b-c-d


Holger Vogelsang

EinstiegDatentypen: object (string)

Die JavaScript-Referenz sowie die Code-Vervollständig in z.B. WebStorm zeigen viele weitere Methoden auf Strings.


Holger Vogelsang

EinstiegDatentypen: object (number)

Es gibt in JavaScript mit number nur einen Zahlentyp. Er entspricht im Wesentlichen double in Java. Beispiele:

var age = 22;console.log(age); // Ausgabe: 22console.log(typeof age); // Ausgabe: number

var price = 42.33;console.log(price); // Ausgabe: 42.33console.log(typeof price); // Ausgabe: number

console.log(age * price); // Ausgabe: 931.26

Zwischen string und number kann manuell umgewandelt werden:age = parseInt("42.33");console.log(age); // Ausgabe: 42console.log(typeof age); // Ausgabe: number

price = parseFloat("42.33");console.log(price); // Ausgabe: 42.33console.log(typeof price); // Ausgabe: number


Holger Vogelsang


Eine Fließkommazahl kann gerundet werden, dabei darf die Anzahl der Nachkommastellen angegeben werden:price = 22.66;price = price.toFixed(); // Rundung in ganze Zahlconsole.log(price); // Ausgabe: 23

price = 22.66;price = price.toFixed(1); // Rundung auf eine Nachkommastelleconsole.log(price); // Ausgabe: 22.7

Zahlen sind also immer Objekte! Was passiert beim Rechnen, wenn Fehler auftreten?

Es gab bei der Einführung von JavaScript noch keine Exceptions. Es werden Fehlerinformationen in der Variablen gespeichert.


Holger Vogelsang


Beispiele:var result = price / 0;console.log(result); // Ausgabe: Infinityconsole.log(typeof result); // Ausgabe: numberresult *= 10;console.log(result); // Ausgabe: Infinity

result = 0 / 0;console.log(result); // Ausgabe: NaN (steht für Not a Number)console.log(typeof result); // Ausgabe: numberresult /= (0 / 0);console.log(result); // Ausgabe: NaN

Weitere Mathe-Operationen sind über das Math-Objekt verfügbar.


Holger Vogelsang

EinstiegDatentypen: object (boolean)

Für Wahrheitswerte gibt es den Datentyp boolean:var dead = false;console.log(dead); // Ausgabe: falseconsole.log(typeof dead); // Ausgabe: boolean


Holger Vogelsang

EinstiegVariable: Typen

Erinnerung: Variablen werden keine festen Datentypen zugewiesen. Variablen haben zur Laufzeit Typen, die sich ändern können.

Wie kann trotzdem mit Werkzeugunterstützung halbwegs sicher programmiert werden? Lösung: Typhinweis im Kommentar, der von der IDE wie WebStorm, ausgewertet wird. Beispiel in WebStorm:

Einblendung unter dem Mauszeiger:

Aber das ist erlaubt und funktioniert!


Warnung

Holger Vogelsang

EinstiegVariable: Blöcke

In Java lebt eine Variable nur innerhalb des zugehörigen Blocks („zwischen den geschweiften Klammern“).

In JavaScript begrenzen nur Funktionen die Lebensdauern von Variablen. Beispiel:

for (var x = 0; x < 10; x++) {console.log(x);

}console.log("Nach der Schleife: " + x);

x ist nach Beendigung der Schleife noch sichtbar und hat den Wert 10. Beispiel zu Funktionen:

function calc() {var x = 0;console.log(x);

}

x ist außerhalb der Funktion nicht mehr sichtbar.


Holger Vogelsang

EinstiegVariable: Vergleiche

Es gibt zwei Vergleichsoperatoren: ==, !=: Test auf Gleichheit bzw. Ungleichheit, notfalls mit Hilfe von Konvertierungen

(„equals operator“) ===, !==: Gleichheit bzw. Ungleichheit ohne Konvertierung („strict equals operator“),

entspricht eher dem == bzw. != in Java, ist in JavaScript bevorzugt zu verwenden. Objekte und Arrays werden über ihre Referenzen, nicht den Inhalt, vergleichen.

Beispiele:


1 == true true 1 === true false

1 == "1" true 1 === "1" false

var obj1 = {};var obj2 = {};obj1 == obj2

false var obj1 = {};var obj2 = {};obj1 === obj2;

false

Holger Vogelsang

EinstiegVariable: Undefinierter Inhalt

In Java stellt der Compiler sicher, dass es keine Zugriffe auf nicht initialisierte Variable gibt und dass alle Variablen, auf die zugegriffen wird, auch existieren.

In JavaScript gibt es keinen Compiler: Variable können beim Zugriff uninitialisiert sein. Beispiel:

var name;console.log(name); // Ausgabe: undefinedconsole.log(typeof name); // Ausgabe: undefined

Beispiel für den Test auf Initialisierung:var name1;console.log(typeof name1 === 'undefined'); // Ausgabe: true

Wie in Java dient null der gezielten Initialisierung mit „nichts“. Beispiel:var name2 = null;console.log(typeof name2 === 'undefined'); // Ausgabe: falseconsole.log(typeof name2); // Ausgabe: object (null ist vom Typ object)

Zugriff auf eine nicht vorhandene Variable:console.log(name3); // Programmabbruch


Holger Vogelsang

EinstiegVariable: Undefinierter Inhalt

Beispiel zum Zugriff auf eine nicht initialisierte bzw. nicht vorhandene Eigenschaft eines Objektes:var object = {attr1: undefined

};

console.log(object.attr1); // Ausgabe: undefinedconsole.log(object.attr2); // Ausgabe: undefined

Tipp: Initialisieren Sie alle Variablen und Attribute während ihrer Deklaration. Es gibt keinen Compiler, der die Initialisierung sicherstellt.


Holger Vogelsang

EinstiegKontrollstrukturen

Vergleich mit Java


Anweisung Java JavaScript

if Bedingung muss ein Boole‘scher Wert sein

Bedingung ist true für alles außer false, undefined, null, 0, NaN, ""

switch erlaubte Typen: ganzzahlige Werte, String, Aufzählungen

wie in Java, Wert wird mit === vergleichen

? : wie in Java

while,do … while,break, continue

wie in Java

for ähnlich zu Java, Laufvariable vom „Typ“ var ist auch außerhalb der Schleife sichtbar

Holger Vogelsang

EinstiegKontrollstrukturen

Es gibt noch eine besondere Form der for-Schleife: for … in Die Schleife iteriert über alle Properties eines Arrays oder Objektes. Beispiel:

// Objekt mit zwei Attributenvar object = {attr1: 1,attr2: 2

};

// Array mit vier Wertenvar values = [1, 2, 3, 4];

// Durchlaufen aller Properties (Attribute) des Objektesfor (var p1 in object) {

console.log('Attribut ' + p1 + ' = ' + object[p1]);}

// Durchlaufen aller Properties (Indizes) des Arraysfor (var p2 in values) {

console.log('Index ' + p2 + ' = ' + values[p2]);}


Holger Vogelsang

EinstiegAusnahmen

Ausnahmen sehen denen in Java recht ähnlich. Ausnahme: Es gibt keine Klassen! Eine Ausnahme ist ein Objekt. Beispiel:

try {throw 'Eingabefehler';// Oder besser: throw new Error('Eingabefehler');

}catch (error) {

console.log('Fehler: ' + error);}finally {console.log('Wie in Java immer aufgerufen');

}


Holger Vogelsang

FunktionenÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

FunktionenEinführung

Auch Funktionen sind Objekte, die Variablen zugewiesen werden können. Sie „können“ wesentlich mehr als Methoden in Java oder Funktionen in C/C++. Eine Funktion kann einen eigenen Namen und Übergabeparameternamen besitzen. Beispiele ohne Parameter:

// Definition der Funktion print.function print() {

console.log('Aufgerufen 1');}// Aufruf der Funktion print:print(); // Ausgabe: Aufgerufen 1

// Definition der Variablen printer, die eine anonyme Funktion aufnimmt.var printer = function() {

console.log('Aufgerufen 2');};// Aufruf der anonymen Funktion mit Hilfe der Variablenprinter(); // Ausgabe: Aufgerufen 2


Holger Vogelsang


Da eine Funktion ein Objekt ist, lassen sich auf Funktions-Objekten Methoden aufrufen. Beispiel:// Definition der Funktion print.var printer = function() {console.log('Aufgerufen 2');

}// Direkter Aufruf der Funktion:printer();// Aufruf über die call-Methode des Funktions-Objektes:printer.call();


Holger Vogelsang


Parameter und Rückgabewerte einer Funktion sind im Quellcode „typlos“:function minSqr(x, y) {

return x < y ? x * x : y * y;}console.log(minSqr(2,3));

Da ein Aufrufer die Typen nicht erkennen kann, sollten sie immer im JsDoc-Kommentar in geschweiften Klammern angegeben werden. So können IDEs wie WebStorm sie erkennen und Prüfungen vornehmen./**

* Berechnet den Quadratwert des Minimums zweier Zahlen.* @param {number} x Erste zu vergleichende Zahl.* @param {number} y Zweite zu vergleichende Zahl.* @returns {number} Das Minimum beider Argumente.*/

function minSqr(x, y) {return x < y ? x * x : y * y;

}console.log(minSqr(2,3));console.log(minSqr('aa', 'bb'));

Optionale Parameter und variable Parameteranzahlen werden hier nicht betrachtet.


Warnung von WebStorm

Holger Vogelsang

FunktionenHöherer Ordnung

Da Funktionen Objekte sind, können sie als Parameter an andere Funktionen übergeben werden.

Beispiel: Durchlaufen eines Arrays mit einer forEach-Schleife:var values = [1, 2, 3, 4, 5];

values.forEach(function (value) {console.log(value);

});

forEach erwartet eine Funktion als Parameter, vielleicht so besser erkennbar:var logger = function(value) {console.log(value);

};

values.forEach(logger);

Bereits von der Stream-API in Java bekannt!


Holger Vogelsang


Wozu das Ganze? Es geht doch auch prozedural mit Index-Zugriff. Vorteil: Längere „Verkettung“ von Aufrufen wie bei der Stream-API in Java. Beispiel zur Verkettung, Ausgabe nur der geraden Werte des Arrays values:

values.filter(function(value) {return value % 2 == 0;

}).forEach(function(value) {console.log(value);

});

Funktionen: Die Funktion im filter-Argument liefert true, wenn der Wert im Ergebnis vorhanden

sein soll. Die Funktion im forEach-Argument wird für jeden Wert, den der Filter durchgelassen

hat, aufgerufen.


Holger Vogelsang


Mächtiges Konzept der map- und reduce-Aufrufe bei Arrays: map bildet jeden Wert auf einen neuen ab. reduce erzeugt aus allen Werten des Arrays ein Ergebnis.

Beispiel zur Summierung der Quadratzahlen aller Arraywerte aus values:var result = values.map(function(value) {return value * value;

}).reduce(function(tempReducedValue, value) {return tempReducedValue + value;

});console.log('Summe der Quadratzahlen: ' + result);

Funktionen: Die Funktion im map-Argument erhält als Argument in jedem Aufruf einen Wert des

Arrays und liefert als Ergebnis den neuen Wert zurück. Die Funktion im reduce-Argument erhält als Werte das bisherige Zwischenergebnis

(tempReducedValue) sowie das von map berechnete neue Argument (value). reduceliefert das neue Zwischenergebnis zurück.


Holger Vogelsang

FunktionenHoisting

JavaScript sortiert die Deklarationen der Variablen in einer Funktion um, so dass immer alle Deklarationen am Anfang stehen („Hoisting“: an den Anfang der Funktion gehoben).

Die Initialisierungen erfolgen aber erst dort, wo sie auch im Quelltext stehen. Beispiel:

function hoistingDemo() {console.log(value); // Ausgabe: undefinedvar value = 10;console.log(value); // Ausgabe: 10

}

hoistingDemo();

Der erste console.log-Aufruf links im Beispiel erzeugt keinen Fehler, da value schon bekannt, aber nicht initialisiert ist.

Tipp: Alle Variablen immer am Anfang einer Funktion deklarieren.


function hoistingDemo() {var value;console.log(value);value = 10;console.log(value);

}

hoistingDemo();

entspricht

Holger Vogelsang

Objekte und VererbungÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

Objekte und VererbungEinführung

Bisher wurden in der Vorlesung eigene Objekte direkt als Hash-Tabelle angelegt. Nachteile: Es fehlte der Konstruktoraufruf. Es können nicht mehrere Objekte eines Typs erzeugt werden. Methoden werden (wie Attribute) einzelnen Objekten zugeordnet.

Besseres Vorgehen: Erzeugen von Objekten mit Hilfe von Konstruktorfunktionen. Beispiel:

/*** Erzeugt einen Kunden.* @param {string} name* @param {number} age* @param {number} no* @constructor*/

function Customer(name, age, no) {this.name = name;this.age = age;this.no = no;

}

var c1 = new Customer('Test', 42, -1);


Holger Vogelsang


Was passiert in dem Beispiel? Es wird eine „normale“ Funktion definiert. Es wird mit new ein Objekt erzeugt und dabei die Funktion aufgerufen. Die Funktion initialisiert das Objekt. Jetzt können beliebig viele Objekte mit den in der Konstruktorfunktion angegebenen

Attributen angelegt werden. Wo sind die Methoden? Sie sollten nicht direkt in Attributen des Objekts gespeichert

werden: Sie wären als Attribut in jedem erzeugten Objekt vorhanden. Vererbung (kommt gleich) würde nicht gut funktionieren.

Jedes Objekt besitzt ein Attribut prototype. Es kann mit Hilfe der statischen Methoden getPrototypeOf des Typs Object ausgelesen werden. Beispiel:console.log(Object.getPrototypeOf(c1));

An diesem Attribut werden die Methoden gespeichert.


Holger Vogelsang


Gemeinsamer Prototyp aller durch eine Konstruktorfunktion erzeugten Objekte. Beispiel:var c1 = new Customer('Test1', 42, -1);var c2 = new Customer('Test2', 44, -1);

Zuordnung von „Methoden“ zu dem Customer-Typ, hier drei Getter:Customer.prototype.getNo = function() {

return this.no;};

Customer.prototype.getAge = function() {return this.age;

};

Customer.prototype.getName = function() {return this.name;

};


c1

c2prototype

Holger Vogelsang


Aufruf der „Methoden“:console.log(c1.getAge());console.log(c1.getName());console.log(c1.getNo());

Zusammenfassung: Alle Attribute in der Konstruktorfunktion initialisieren. Nicht vorhandene Attribute werden automatisch angelegt. „Methoden“ außerhalb der Konstruktorfunktion dem Prototypen des Typs zuweisen.


Holger Vogelsang


Vollständiges Beispiel mit den Getter-Methoden (Getter sind hier eigentlich sinnlos, weil die Attribute ohnehin öffentlich les- und schreibbar sind):/*** Erzeugt einen Kunden.* @param {string} name* @param {number} age* @param {number} no* @constructor*/


}

/*** Gibt die Kundennummer zurück.* @returns {number} Kundennummer.*/

Customer.prototype.getNo = function() {return this.no;

};


Zuweisung außerhalb der Funktion,da ansonsten bei jedem neuen Objekt erneut zugewiesen wird.

@constructor ist ein Hinweis an die IDE

Holger Vogelsang


Die beiden weiteren Methoden:/*** Gibt das Alter des Kunden zurück.* @returns {number} Alter des Kunden.*/

Customer.prototype.getAge = function() {return this.age;

};

/*** Gibt den Namen des Kunden zurück.* @returns {string} Name des Kunden.*/

Customer.prototype.getName = function() {return this.name;

};


Holger Vogelsang


Da das Attribut prototype ein Objekt ist, können die Funktionen auch direkt in einem neuen Objekt als Schlüssel-/ Wertepaare zugewiesen werden (Kommentare weggelassen):Customer.prototype = {

getNo: function() {return this.no;

},getAge: function() {

return this.age;},getName: function() {

return this.name;}

};


Schlüssel: MethodennameWert: Funktion

Holger Vogelsang

Objekte und VererbungVererbung

Zur Vererbung wird eine Besonderheit der Prototypen verwendet: Einem Prototypen kann ein Vaterprototyp zugewiesen werden. Wird eine Methode nicht im Prototypen des aufgerufenen Objektes gefunden, dann wird

sie im Vaterprototypen gesucht. Ist die Methode auch nicht im Vaterprototypen vorhanden, dann wird dessen

Vaterprototyp durchsucht. Das Ganze läuft bis zum Typ Object durch. Hier: Vaterprototyp ist der Prototyp der Basisklasse.

Beispiel: Jeder Typ ist ein Object. Deswegen können direkt Methoden des Typs Objectaufgerufen werden.var c1 = new Customer('Test', 42, -1);console.log(c1.toString()); // Methode von Object

Die Methode toString wird nicht im Prototypen von Customer gefunden. Daher wird der Vaterprototyp (hier der von Object) herangezogen.


Holger Vogelsang


Prototypenverkettung:

var c1Proto = Object.getPrototypeOf(c1);var c1ParentProto = Object.getPrototypeOf(c1Proto);var c1ParentParentProto = Object.getPrototypeOf(c1ParentProto);console.log((typeof c1Proto) + ', '

+ (c1Proto === Customer.prototype)); // Ausgabe: object, trueconsole.log((typeof c1ParentProto) + ', '+ (c1ParentProto === Object.prototype)); // Ausgabe: object, true

console.log((typeof c1ParentParentProto) + ', '+ c1ParentParentProto); // Ausgabe: object, null


c1

Customer.prototype

Object.getPrototypOf(c1)

Object.prototype

Object.getPrototypOf(Object.getPrototypOf(c1))

hat keinen Prototypen

Holger Vogelsang


Wie soll Vererbung umgesetzt werden, ohne dass es Vererbung gibt? Eine Funktion verbindet die Prototypen von Basistyp und abgeleitetem Typ! Vereinfachte Implementierung der Funktion:

function _extends(Derived, Base) {var _protoFunction = function() {};_protoFunction.prototype = Base.prototype;Derived.prototype = new _protoFunction();

}

Erklärungen: Derived ist der Name der Konstruktorfunktion für den abgeleiteten Typ. Base ist der Name der Konstruktorfunktion für den Basistyp. Der Prototyp des abgeleiteten Typs ist das neue Funktions-Objekt _protoFunction,

das seinerseits den Prototypen von Base als eigenen Prototypen besitzt (einem Prototypen kann nicht direkt ein Prototyp zugewiesen werden).

Der Name der Funktion _extends startet hier mit einem Unterstrich, um zu zeigen, dass sie nicht direkt zum eigentlichen Programm gehört („Bestandteil der Infrastruktur“).


Derived_protoFunction

Base.prototypeprototype

Baseproto-type

proto-type

Holger Vogelsang


Mit halbwegs aktuellen Browsern (ab ECMAScript 5) kann Object.create verwendet werden:function _extends(Derived, Base) {

Derived.prototype = Object.create(Base.prototype);}

Erklärung: Object.create erzeugt ein neues Objekt und weist ihm den Prototypen zu, der als Parameter übergeben wurde.


Holger Vogelsang


Beispielverwendung (Klassendarstellung in UML ist nicht ganz zutreffend es gibt keine Klassen), Basistyp:/*** Konstruktorfunktion des Basistyps* @param val Im Objekt zu speichernder Wert.* @constructor*/

function Base(val) {console.log('Base-Konstruktor: ' + val);this.baseValue = val;

}

/*** Methode im Basistyp, gibt den intern* gespeicherten Wert auf der Konsole aus.*/

Base.prototype.print = function() {console.log('Print in Base: ' + this.baseValue);

};


Base

+Base()+print()

+baseValue

Derived

+Derived()+print()

+value

erzeugt und weist zu

Holger Vogelsang


Beispielverwendung, abgeleiteter Typ:/*** Konstruktorfunktion des abgeleiteten Typs.* @param val Im Objekt zu speichernder Wert.* @constructor*/

function Derived(val) {// Aufruf des BasiskonstruktorsBase.call(this, val + 1);console.log('Derived-Konstruktor: ' + val);this.value = val;

}

// Vererbungsbeziehung abbilden_extends(Derived, Base);


Base

+Base()+print()

+baseValue

Derived

+Derived()+print()

+value

ruft auf

erzeugt und weist zu

Holger Vogelsang


Beispielverwendung, abgeleiteter Typ:/*** Methode im abgeleiteten Typ, gibt den intern* gespeicherten Wert auf der Konsole aus.* Wichtig: Die Methode darf erst nach Herstellen der* Vererbungsbeziehung hinzugefügt werden, weil durch* das Erstellen eines neuen Prototypen in der* Vererbungsfunktion ansonsten diese Methode nicht* mehr Derived zugeordnet wäre.*/

Derived.prototype.print = function() {console.log('Print in Derived: ' + this.value);// Aufruf der print-Methode des Basis-Typs.Base.prototype.print.call(this);

};


ruft auf

Base

+Base()+print()

+baseValue

Derived

+Derived()+print()

+value

Holger Vogelsang


WebStorm erkennt die Vererbung im Beispiel:


Holger Vogelsang


Vergleich mit Java: Das Überschreiben von Methoden ist problemlos möglich. Das Überladen wird nicht unterstützt, da der Methodenname der eindeutige Schlüssel

im Objekt ist. Überladen kann recht unelegant nachgebaut werden soll hier nicht besprochen werden.

Schnittstellen, Aufzähltypen und statische Methoden sowie statische Attribute können nachgebaut werden soll hier nicht betrachtet werden.

Bisher sind alle Daten und Methoden öffentlich, private werden gleich behandelt ist etwas komplizierter.

Standard-Methoden ähnlich zu equals und hashCode existieren nicht.


Holger Vogelsang

ModuleÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

ModuleEinführung

In Java existieren Pakete zur sauberen Modularisierung. JavaScript kennt so ein Konzept nicht, allerdings kann es mit Funktionen und Objekten

nachgebaut werden. Grundidee Closure:

Funktionen werden ineinander geschachtelt. Innere Funktionen können auch dann auf die Daten der äußeren zugreifen, wenn diese

bereits beendet wurden. Grundidee Namensraum:

Ein Namensraum ist ein Objekt, in das Funktionen und Objekte eingefügt werden. Namensräume haben denselben Aufbau wie Pakete in Java.

Die Erzeugung der Daten erfolgt in einer anonymen, sofort ausgeführten Funktion. Syntax:(function() {// Mache etwas, der Inhalt ist privat

})();


Holger Vogelsang

ModuleDefinition

Beispiel für den Namensraum de.hska.iwii:/*** Definition der Namensräume mit Hilfe von Objekten.*/

var de = {};de.hska = {};de.hska.iwii = {};

Es werden drei Objekte erzeugt: de im globalen Namensraum. hska innerhalb des Objekts de. iwii innerhalb des Objekts de.hska.


Holger Vogelsang

ModuleDefinition

Die Zuweisung von Objekten und Funktionen erfolgt an die Namensraumobjekte. Die Erzeugung und Zuweisung erfolgt innerhalb einer Funktion, damit deren Inhalt nicht

außerhalb der Funktion sichtbar ist. Die Funktion ist anonym und wird sofort ausgeführt. Sie erhält als Parameter das

Namensraum-Objekt, zu dem die Daten hinzugefügt werden sollen. Beispiel für Konfigurationsdaten:

/*** Hinzufügen von Objekten zu einem Namensraum.* Alle Daten innerhalb dieser sofort ausgeführten* Funktion sind privat.* @param modul Referenz auf das Namensraum-Objekt*/

(function(modul) {var server = {

name: 'www.hs-karlsruhe.de', port: 80};

// Zuweisung an den Namensraum.modul.HSServer = server;


Holger Vogelsang

ModuleDefinition

Und noch ein Funktionsobjekt mit Zugriffsmethoden zum Namensraum hinzufügen:// Konstruktorfunktion sowie weitere Methoden.var cust = function(name, age, no) {

this.name = name;this.age = age;this.no = no;

};

cust.prototype.getNo = function() {return this.no;

};

cust.prototype.getAge = function() {return this.age;

};

// Zuweisung an den Namensraum.modul.Customer = cust;

})(de.hska.iwii); // Referenz auf den Namensraum


Holger Vogelsang

ModuleVerwendung

Verwendung des Namensraums:var server = de.hska.iwii.HSServer;console.log(server.name);

var cust1 = new de.hska.iwii.Customer('Vogelsang', -1, 42);console.log(cust1.getNo());

Auf die innerhalb der anonymen Funktion erzeugten Daten kann nicht direkt zugegriffen werden, weil eine Funktion einen eigenen Namensraum bildet.

Eine direkte import-Anweisung wie in Java für Pakete gibt es nicht. Ausweg: Es kann ein Namensraum-Objekt als Parameter an eine Funktion übergeben werden

(siehe Beispiel oben für die anonyme Funktion). Dann kann über diesen Parameter direkt auf den Inhalt des Namensraums zugegriffen

werden.


Holger Vogelsang

Private DatenÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

Private DatenKapselung

Bisher waren alle Daten öffentlich zugreifbar. JavaScript kennt kein Schlüsselwort „private“. Aber die Kapselung kann mit Hilfe von

Funktionen erreicht werden. Die privaten Daten sind lokale Variablen im Konstruktor. Die privaten Funktionen werden im Konstruktor definiert. Sie dürfen auf die lokalen

Variablen des Konstruktors zugreifen („Closure“), auch wenn dieser beendet ist. Beispiel:


// Lokale Variablen im Konstruktor, werden eigentlich// bei Beendigung des Konstruktors gelöscht.var secret = this.no * 2;

// Die Definition ist sinnvoll, da this in privaten Methoden nicht// sichtbar ist.var that = this;


Holger Vogelsang

Private DatenKapselung

// Private Methode (Funktion innerhalb des Konstruktors).// Sie darf auf die lokalen Daten des Konstruktors zugreifen.// Die lokalen Daten bleiben auch nach Beendigung des // Konstruktoraufrufs erhalten (Closure).function getSecretPrivate() {

return secret;}

// Damit die private Methode auch außerhalb des// Konstruktors verwendet werden kann, wird sie// am Objekt registriert.this.getSecret = function() {

return getSecretPrivate();};

}

Auf die private Methode sowie die privaten Daten kann nicht von außerhalb des Objektes zugegriffen werden.

Noch besserer Ansatz: Modulidee verwenden soll hier nicht besprochen werden.


Holger Vogelsang

DOM-ZugriffeÜbersicht


Typinfo.,I/O

Annota-tionen

Laufzeit-typinfo.

Ein-,Ausgabe


GrafischeOberflä-



Effekte,Animationen







Zugriffe

Holger Vogelsang

DOM-ZugriffeÜbersicht

Web-Seiten werden intern im Browser durch ein Modell, das Document Object Model (DOM), repräsentiert.

Der Baum kann zur Laufzeit durch JavaScript-Funktionen verändert werden.


Holger Vogelsang

DOM-ZugriffeAuslesen des DOMs

Wie erfolgt der Zugriff auf das DOM? document ist eine globale Referenz auf das komplette Dokument. document besitzt Methoden zum Auslesen, Traversieren und Ändern des DOMs.

Beispiele:- getElementById(): Sucht nach einem Tag, das eine bestimmte ID besitzt. Das

Ergebnis ist das gefundene Element oder null.- getElementsByTagName(): Sucht nach allen Tags eines Typs (z.B. h1). Das

Ergebnis ist ein Array aller gefundenen Elemente.- getElementsByClassName(): Sucht alle Elemente, die eine bestimmte CSS-Klasse

besitzen. Das Ergebnis ist ein Array aller gefundenen Elemente.


Holger Vogelsang


Beispiel, HTML-Seite:<!DOCTYPE html><html><head lang="de"><meta charset="UTF-8"><title>DOM-Zugriffe (Auslesen)</title><script type="text/javascript" src="./js/Dom1.js"></script>

</head><body onload="find('title', 'contents')"><h1 id="title">Titelzeile</h1><div id="div1" class="contents">DIV1</div><div id="div2" class="contents">DIV2</div>

</body></html>

onload: Sobald die Seite komplett geladen ist, wird dieses Ereignis vom Browser ausgelöst und die angegebene Funktion aufgerufen.


Holger Vogelsang


Zugehörige JavaScript-Datei:function find(id, className) {var el = document.getElementById(id);console.log(el);

el = document.getElementsByClassName(className);for (var index = 0; index < el.length; index++) {

console.log(el.item(index));}

}

Konsolenausgabe im Firefox:


Holger Vogelsang

DOM-ZugriffeÄndern des DOMs

Auch Schreibzugriffe auf das DOM sind möglich: Es gibt Attribute und Methoden, die auf allen Knoten des DOM definiert sind (z.B. id,

className, title). Es gibt für die unterschiedlichen Knoten-Typen (HTML-Tags) weitere, individuelle

Attribute und Methoden (z.B. href für a-Tags <a>). Das Attribut innerHTML enthält beispielsweise den HTML-Code des Inhalts eines Tags.

Beispiel zu innerHTML:<!DOCTYPE html><html><head lang="de"><meta charset="UTF-8"><title>DOM-Zugriffe (Modifikation)</title><script type="text/javascript" src="./js/Dom2.js"></script>

</head><body onload="modify('contents')">

<h1>Titelzeile</h1><div id="contents"></div>

</body></html>


Holger Vogelsang

DOM-ZugriffeÄndern des DOMs

Zugehörige JavaScript-Datei (fügt eine Tabelle in das div-Tag mit der ID contents ein):function modify(elementId) {var el = document.getElementById(elementId);var innerHTML = '<table><tbody>';var cnt = 0;

for (var row = 0; row < 4; row++) {innerHTML += '<tr style=\'background-color: #0000C0; color: white;\'>';

for (var col = 0; col < 3; col++) {innerHTML += '<td style=\'padding: 4px; text-align: right;\'>' + ++cnt + '</td>';

}innerHTML += '</tr>';

}innerHTML += '</tbody></table>';el.innerHTML = innerHTML;

}

Die Tabellenzeilen werden noch blau eingefärbt.


eingefügt

Holger Vogelsang

DOM-ZugriffeEreignisbehandlung

Eine DOM-Dokumentation befindet sich z.B. unter https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model, http://www.w3schools.com/jsref/ und http://wiki.selfhtml.org/wiki/JavaScript/Objekte.

Ein wichtiges Konzept bei der Arbeit im Browser sind Ereignisse, durch die JavaScript-Funktionen aufgerufen werden, kleine Auswahl: onload am body-Tag: Wenn das Dokument fertig geladen wurde. onclick: Wenn der Anwender auf ein Element im Baum geklickt hat. onresize: Wenn sich die Größe (Breite oder Höhe) des Dokument z.B. durch Verändern

der Fenstergröße geändert hat. Werden Daten vom Server nachgeladen, dann geschieht das auch asynchron:

Es wird eine Anfrage (Request) an den Server abgesetzt und eine Funktion angegeben, die bei Ereignissen aufgerufen werden soll.

Tritt ein Ereignis ein (Antwort vom Server erhalten, Fehler, …), dann wird die registrierte Funktion aufgerufen.

Bei synchronem (also wartendem Zugriff) wäre der Browser ansonsten solange blockiert.


https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

http://www.w3schools.com/jsref/

http://wiki.selfhtml.org/wiki/JavaScript/Objekte

Holger Vogelsang


Beispiel zur zeitgesteuerten Durchführung von Aktionen (setInterval ruft alle x Sekunden eine parameterlose Funktion auf):<!DOCTYPE html><html><head lang="de"><meta charset="UTF-8"><title>DOM-Zugriffe (Zeitgesteuert)</title><script type="text/javascript" src="./js/Dom3.js"></script>

</head><body onload="setInterval(function(){modify('contents');}, 1000)">

<h1>Titelzeile</h1><div id="contents">

Huhu</div>

</body></html>


Holger Vogelsang


Beispiel (JavaScript-Datei, setzt die Hintergrundfarbe des angegebenen Elements zyklisch neu):var colors = ['lightblue', 'silver', 'lightgreen'];var colorIndex = 0;

function modify(elementId) {var el = document.getElementById(elementId);

if (colorIndex == colors.length) {colorIndex = 0;

}el.setAttribute('style', 'background-color: ' + colors[ colorIndex++ ] + ';');console.log(el.getAttribute('style'));

}

Es kann noch mehr mit dem DOM „angestellt“ werden nicht Bestandteil der Vorlesung.


Holger Vogelsang

DOM-ZugriffeAusblick

Ist das nicht sehr mühsam? Wie sieht es mit Browserabhängigkeiten aus? Bibliotheken vereinfachen die Arbeit, Auswahl: jQuery: http://jquery.com/ Bootstrap: http://getbootstrap.com/ AngularJS: https://angularjs.org/


http://jquery.com/

http://getbootstrap.com/

https://angularjs.org/

Holger Vogelsang

Ende


Informatik 2 - Einführung in JavaScriptvoho0001/I2/Vorlesung/I25-JavaScript.pdf · Holger...

Documents

Transcript of Informatik 2 - Einführung in JavaScriptvoho0001/I2/Vorlesung/I25-JavaScript.pdf · Holger...