informatik 2 - einführung in javascriptvoho0001/i2/vorlesung/i25-javascript.pdf · holger...
TRANSCRIPT
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
Informatik 2 - Einführung in JavaScript 3
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
Informatik 2 - Einführung in JavaScript 5
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
Informatik 2 - Einführung in JavaScript 6
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.
Informatik 2 - Einführung in JavaScript 7
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.
Informatik 2 - Einführung in JavaScript 8
Browser Web Server
JavaScript-Funktionen
HTML-Seiten, Bilder,JavaScript-Dateien,
CSS-Dateien …(Dateisystem)
URL-AufrufAntwort
Aufruf
lesen
Holger Vogelsang
PrinzipienEigenschaften
Laufzeitumgebung auf dem Server: Als Server-Anwendung, Auslieferung von Web-Seiten und anderen Informationen.
Diese Anwendung wird in der Vorlesung nicht behandelt.
Informatik 2 - Einführung in JavaScript 9
Browser Web Server
Schnittstelle
JavaScript-Programme
HTML-Seiten, Bilder,JavaScript-Dateien,
CSS-Dateien …(Dateisystem)
URL-AufrufAntwort
URL-Aufruf (+ Parameter)Antwort
lesen
Aufruf
Holger Vogelsang
PrinzipienEigenschaften
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“.
Informatik 2 - Einführung in JavaScript 10
GUIJava-Objekte
K1
Ausführung
JavaScript
InterpreterEreignis
K2
K3 Zugriff
Holger Vogelsang
EinstiegÜbersicht
Informatik 2 - Einführung in JavaScript 11
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
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):
Informatik 2 - Einführung in JavaScript 12
Holger Vogelsang
EinstiegDas erste JavaScript-Programm
Ein- und Ausgabe (Firefox):
Es sind einfache und doppelte Anführungszeichen erlaubt. console ist ein im Browser vorhandenes JavaScript-Objekt.
Informatik 2 - Einführung in JavaScript 13
Holger Vogelsang
EinstiegDas erste JavaScript-Programm
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.
Informatik 2 - Einführung in JavaScript 14
Holger Vogelsang
EinstiegDas erste JavaScript-Programm
Ergebnis:
Informatik 2 - Einführung in JavaScript 15
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.
Informatik 2 - Einführung in JavaScript 16
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.
Informatik 2 - Einführung in JavaScript 17
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.
Informatik 2 - Einführung in JavaScript 18
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']);
Informatik 2 - Einführung in JavaScript 19
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
Informatik 2 - Einführung in JavaScript 20
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 ]
Informatik 2 - Einführung in JavaScript 21
Holger Vogelsang
EinstiegDatentypen: object (Array)
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 ]
Informatik 2 - Einführung in JavaScript 22
Holger Vogelsang
EinstiegDatentypen: object (Array)
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.
Informatik 2 - Einführung in JavaScript 23
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
Informatik 2 - Einführung in JavaScript 24
Holger Vogelsang
EinstiegDatentypen: object (string)
Die JavaScript-Referenz sowie die Code-Vervollständig in z.B. WebStorm zeigen viele weitere Methoden auf Strings.
Informatik 2 - Einführung in JavaScript 25
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
Informatik 2 - Einführung in JavaScript 26
Holger Vogelsang
EinstiegDatentypen: object (number)
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.
Informatik 2 - Einführung in JavaScript 27
Holger Vogelsang
EinstiegDatentypen: object (number)
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.
Informatik 2 - Einführung in JavaScript 28
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
Informatik 2 - Einführung in JavaScript 29
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!
Informatik 2 - Einführung in JavaScript 30
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.
Informatik 2 - Einführung in JavaScript 31
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:
Informatik 2 - Einführung in JavaScript 32
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
Informatik 2 - Einführung in JavaScript 33
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.
Informatik 2 - Einführung in JavaScript 34
Holger Vogelsang
EinstiegKontrollstrukturen
Vergleich mit Java
Informatik 2 - Einführung in JavaScript 35
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]);}
Informatik 2 - Einführung in JavaScript 36
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');
}
Informatik 2 - Einführung in JavaScript 37
Holger Vogelsang
FunktionenÜbersicht
Informatik 2 - Einführung in JavaScript 38
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
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
Informatik 2 - Einführung in JavaScript 39
Holger Vogelsang
FunktionenEinführung
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();
Informatik 2 - Einführung in JavaScript 40
Holger Vogelsang
FunktionenEinführung
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.
Informatik 2 - Einführung in JavaScript 41
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!
Informatik 2 - Einführung in JavaScript 42
Holger Vogelsang
FunktionenHöherer Ordnung
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.
Informatik 2 - Einführung in JavaScript 43
Holger Vogelsang
FunktionenHöherer Ordnung
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.
Informatik 2 - Einführung in JavaScript 44
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.
Informatik 2 - Einführung in JavaScript 45
function hoistingDemo() {var value;console.log(value);value = 10;console.log(value);
}
hoistingDemo();
entspricht
Holger Vogelsang
Objekte und VererbungÜbersicht
Informatik 2 - Einführung in JavaScript 46
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
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);
Informatik 2 - Einführung in JavaScript 47
Holger Vogelsang
Objekte und VererbungEinführung
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.
Informatik 2 - Einführung in JavaScript 48
Holger Vogelsang
Objekte und VererbungEinführung
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;
};
Informatik 2 - Einführung in JavaScript 49
c1
c2prototype
Holger Vogelsang
Objekte und VererbungEinführung
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.
Informatik 2 - Einführung in JavaScript 50
Holger Vogelsang
Objekte und VererbungEinführung
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*/
function Customer(name, age, no) {this.name = name;this.age = age;this.no = no;
}
/*** Gibt die Kundennummer zurück.* @returns {number} Kundennummer.*/
Customer.prototype.getNo = function() {return this.no;
};
Informatik 2 - Einführung in JavaScript 51
Zuweisung außerhalb der Funktion,da ansonsten bei jedem neuen Objekt erneut zugewiesen wird.
@constructor ist ein Hinweis an die IDE
Holger Vogelsang
Objekte und VererbungEinführung
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;
};
Informatik 2 - Einführung in JavaScript 52
Holger Vogelsang
Objekte und VererbungEinführung
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;}
};
Informatik 2 - Einführung in JavaScript 53
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.
Informatik 2 - Einführung in JavaScript 54
Holger Vogelsang
Objekte und VererbungVererbung
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
Informatik 2 - Einführung in JavaScript 55
c1
Customer.prototype
Object.getPrototypOf(c1)
Object.prototype
Object.getPrototypOf(Object.getPrototypOf(c1))
hat keinen Prototypen
Holger Vogelsang
Objekte und VererbungVererbung
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“).
Informatik 2 - Einführung in JavaScript 56
Derived_protoFunction
Base.prototypeprototype
Baseproto-type
proto-type
Holger Vogelsang
Objekte und VererbungVererbung
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.
Informatik 2 - Einführung in JavaScript 57
Holger Vogelsang
Objekte und VererbungVererbung
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);
};
Informatik 2 - Einführung in JavaScript 58
Base
+Base()+print()
+baseValue
Derived
+Derived()+print()
+value
erzeugt und weist zu
Holger Vogelsang
Objekte und VererbungVererbung
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);
Informatik 2 - Einführung in JavaScript 59
Base
+Base()+print()
+baseValue
Derived
+Derived()+print()
+value
ruft auf
erzeugt und weist zu
Holger Vogelsang
Objekte und VererbungVererbung
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);
};
Informatik 2 - Einführung in JavaScript 60
ruft auf
Base
+Base()+print()
+baseValue
Derived
+Derived()+print()
+value
Holger Vogelsang
Objekte und VererbungVererbung
WebStorm erkennt die Vererbung im Beispiel:
Informatik 2 - Einführung in JavaScript 61
Holger Vogelsang
Objekte und VererbungVererbung
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.
Informatik 2 - Einführung in JavaScript 62
Holger Vogelsang
ModuleÜbersicht
Informatik 2 - Einführung in JavaScript 63
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
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
})();
Informatik 2 - Einführung in JavaScript 64
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.
Informatik 2 - Einführung in JavaScript 65
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;
Informatik 2 - Einführung in JavaScript 66
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
Informatik 2 - Einführung in JavaScript 67
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.
Informatik 2 - Einführung in JavaScript 68
Holger Vogelsang
Private DatenÜbersicht
Informatik 2 - Einführung in JavaScript 69
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
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:
function Customer(name, age, no) {this.name = name;this.age = age;this.no = no;
// 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;
Informatik 2 - Einführung in JavaScript 70
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.
Informatik 2 - Einführung in JavaScript 71
Holger Vogelsang
DOM-ZugriffeÜbersicht
Informatik 2 - Einführung in JavaScript 72
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
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.
Informatik 2 - Einführung in JavaScript 73
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.
Informatik 2 - Einführung in JavaScript 74
Holger Vogelsang
DOM-ZugriffeAuslesen des DOMs
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.
Informatik 2 - Einführung in JavaScript 75
Holger Vogelsang
DOM-ZugriffeAuslesen des DOMs
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:
Informatik 2 - Einführung in JavaScript 76
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>
Informatik 2 - Einführung in JavaScript 77
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.
Informatik 2 - Einführung in JavaScript 78
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.
Informatik 2 - Einführung in JavaScript 79
Holger Vogelsang
DOM-ZugriffeEreignisbehandlung
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>
Informatik 2 - Einführung in JavaScript 80
Holger Vogelsang
DOM-ZugriffeEreignisbehandlung
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.
Informatik 2 - Einführung in JavaScript 81
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/
Informatik 2 - Einführung in JavaScript 82
Holger Vogelsang
Ende
Informatik 2 - Einführung in JavaScript 83