close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

Client Side Scripting JavaScript Übersicht Was ist JavaScript

EinbettenHerunterladen
Übersicht
• JavaScript
Datenstrukturen
JavaScript
Überblick
Überblick
und Klassen
Zugriffskontrolle
• Erste
Schritte mit JavaScript
•
Methoden
• Operationen:
JavaScript Sprachelemente
•
Elemente
• Klassenweite
Vordefinierte Objekte
Client Side Scripting
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
JavaScript
•
•
•
•
webt • javascript • burkert, marti, zeman • 03/2009 •
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
1
Was ist JavaScript?
webt • javascript • burkert, marti, zeman • 03/2009 •
2
Geschichte
« The World's Most Misunderstood Programming
Language »
• Entwickelt 1995 bei Netscape durch Brendan Eich
« [...] one of the world's most popular programming
languages. Virtually every personal computer in the
world has at least one JavaScript interpreter installed
on it and in active use. »
• Ursprünglich LiveScript genannt
• Erste Version in Netscape 2 (1996)
• Dann in JavaScript umbenannt, um von Javas steigender
Popularität zu profitieren (Marketing-Entscheidung)
« People don't feel a need to learn it before they start
using it. »
Brendan Eich später (2005):
« Don’t let Marketing name your language »
Douglas Crockford, Yahoo! Inc.
webt • javascript • burkert, marti, zeman • 03/2009 •
3
webt • javascript • burkert, marti, zeman • 03/2009 •
4
Versionen und Standard
JavaScript und andere Sprachen
• 1997 ECMAScript Standard
Java
– Ähnliche Syntax
Self
– Vererbung basierend auf Prototypen
• 1999 ECMAScript edition 3
• JavaScript 1.6: ab Firefox 1.5 (ECMA-Script 262 V.3)
– Dynamische Objekte
• JavaScript 1.7: ab Firefox 2
• JavaScript 1.8: ab Firefox 3
Lisp, Scheme
– Lambda
– Dynamisches Typenkonzept
• JavaScript ist eine Implementierung des ECMAScript Standards
• JScript ebenfalls: Microsofts ECMAScript-Dialekt mit eigener
Versionszählung, unterstützt in neueren Versionen ebenfalls
ECMA-262 3rd edition
webt • javascript • burkert, marti, zeman • 03/2009 •
«It is a language with enormous expressive power. [...] JavaScript is
the first lambda language to go mainstream. Deep down, JavaScript
has more common with Lisp an Scheme than with Java. It is Lisp in
C's clothing.» (D. Crockford)
5
Struktur und Darstellung
webt • javascript • burkert, marti, zeman • 03/2009 •
Struktur, Darstellung und Verhalten
User Agent
Inhalt und Struktur
User Agent
Darstellung
Web-Server
Script Interpreter
Zum Beispiel:
Grafischer Browser
Inhalt und Struktur
Darstellung
*.html
*.css
webt • javascript • burkert, marti, zeman • 03/2009 •
*.js
*.html
*.css
Viel Entwicklungsaufwand in
modernen Browsern für neue
JavaScript-Engines
Client
Server
7
Web-Server
Verhalten
JavaScript
Client
6
Server
webt • javascript • burkert, marti, zeman • 03/2009 •
8
Flash, Java Applets
Java != JavaScript
Java Applet
– Programm, das in der Programmiersprache Java
geschrieben ist
Inhalt und Struktur
Darstellung
Browser
Web-Server
– mit einem Java-Compiler übersetzt
Verhalten
– benötigt eine Java Runtime für die Ausführung
Java Runtime
*.html
*.class
*.jar
Java-Applets, Flash
Ausser dem ähnlichen Namen und einer teilweise ähnlichen
Syntax haben Java und JavaScripts nichts gemeinsam !
– Weitere client-seitigen Technologien
– Nicht durch Browser selbst unterstützt
Client
Server
webt • javascript • burkert, marti, zeman • 03/2009 •
Nicht verwechseln !
9
Wozu JavaScript?
webt • javascript • burkert, marti, zeman • 03/2009 •
10
Wozu JavaScript?
• Überprüfen von Formulareingaben
(Validierung)
• Grafisches User Interface (GUI) ähnlich DesktopApplikationen
– Nicht für sicherheitskritische
Checks! Warum?
• Steuern von Multimedia-Inhalten
– Heute meistens Flash, in Zukunft direkt: videound audio-Element
• Animationen/Effekte
– Dynamische Menüs
– Navigation in Bildergalerien
– Aktualisierung von Inhalten (Ticker, Uhr, ...)
<video id="v1"
src="ascannerdarkly480.ogg"
controls="true">
</video>
• Asynchrones Senden und Empfangen von Daten im
Hintergrund: Ajax
webt • javascript • burkert, marti, zeman • 03/2009 •
11
webt • javascript • burkert, marti, zeman • 03/2009 •
12
Drei Schichten
Unobtrusive JavaScript
"Unobtrusive JavaScript" is an emerging technique in the JavaScript
programming language, as used on the World Wide Web. Though the
term is not formally defined, its basic principles are generally
understood to include:
• Struktur und Inhalt
• Darstellung
• Verhalten
• Ziel: Diese drei Schichten
möglichst nicht vermischen
• Notwendig nur Struktur/Inhalt
• Die anderen verbessern nur
das Erscheinungsbild und die
Bedienung
http://www.hessendscher.de/workshop/slide3.html
webt • javascript • burkert, marti, zeman • 03/2009 •
13
Sicherheit
– Separation of functionality (the "behavior layer") from a Web
page's structure/content and presentation
– Best practices to avoid the problems of traditional JavaScript
programming (such as browser inconsistencies and lack of
scalability)
– Progressive enhancement to support user agents that may not
support advanced JavaScript functionality
(Wikipedia)
webt • javascript • burkert, marti, zeman • 03/2009 •
14
Ist JavaScript objektorientiert?
• JavaScript wird im Browser in einer so genannten Sandbox
ausgeführt
• Ob die Bezeichnung passt ist umstritten
• Jedenfalls gibt es
• Kein Zugriff auf das lokale System (zum Beispiel Dateien)
– Objekte
• Trotzdem gelegentlich Sicherheitsprobleme
– aber keine Klassen
– Objektvariablen und Methoden, sowohl öffentlich
als auch privat
Konsequenzen
– Vererbung, über die Prototypenkette
– Immer die neuesten Sicherheits-Updates installieren
– Damit rechnen, dass manche Benutzer JavaScript
ausgeschaltet haben
webt • javascript • burkert, marti, zeman • 03/2009 •
JavaScript ist anders !
15
webt • javascript • burkert, marti, zeman • 03/2009 •
16
Übersicht
JavaScript und HTML
• Zwei Varianten
• JavaScript
Datenstrukturen
Überblick
und Klassen
<script type="text/javascript">
Zugriffskontrolle
• Erste
Schritte mit JavaScript
<!--
•
Methoden
• Operationen:
JavaScript Sprachelemente
hier steht das JavaScript-Programm
//-->
</script>
•
Elemente
• Klassenweite
Vordefinierte Objekte
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
•
•
•
•
<script type="text/javascript" src="quadrat.js"></script>
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
• Inhalt des script-Elements in der zweiten Variante ignoriert
• Erweiterung sollte .js sein (damit Server korrekten Content-Type
liefert)
webt • javascript • burkert, marti, zeman • 03/2009 •
17
Lieber nicht: JavaScript im HTML
<script type="text/javascript">
<!-alert("Hello World");
-->
</script>
webt • javascript • burkert, marti, zeman • 03/2009 •
18
Besser: JavaScript separat
HTML
• Vermischt Inhalt/Struktur
mit Verhalten
<script type="text/javascript" src="scripts.js"></script>
• Daher nicht empfehlenswert
scripts.js
function alertmessage() {
alert("Hello World");
}
• Kommentarzeichen, damit Browser, die script-Element nicht
kennen, den Programmcode ignorieren
window.onload = alertmessage;
• Es gibt auch ein noscript-Element, dessen Inhalt bei
eingeschaltetem JavaScript ignoriert wird
webt • javascript • burkert, marti, zeman • 03/2009 •
• Probleme, wenn mehrere Scripts das onload-Event des windowObjekts modifizieren
19
webt • javascript • burkert, marti, zeman • 03/2009 •
20
Lieber nicht: JavaScript im HTML
Besser: JavaScript separat
<script type="text/javascript">
<!-function alertmessage() {
alert("Hello World");
return false;
}
-->
</script>
HTML
<script type="text/javascript" src="scripts.js"></script>
<a href="andereseite.html" id="alert">Alert</a>
scripts.js
function alertmessage() {
alert("Hello World");
return false;
<a href="andereseite.html" onclick="return alertmessage();">
Alert</a>
}
function init() {
• Link wird mit einem onclick-Event Handler verbunden
document.getElementById("alert").onclick=alertmessage;
}
• Mit "return false" wird erreicht, dass die normale Funktion
des Links nicht ausgeführt wird
webt • javascript • burkert, marti, zeman • 03/2009 •
window.onload=init;
21
Lieber nicht: JavaScript im HTML
webt • javascript • burkert, marti, zeman • 03/2009 •
22
Besser: JavaScript separat
HTML
HTML
<script type="text/javascript">
<!-document.write("Hello World");
-->
</script>
<script type="text/javascript" src="scripts.js"></script>
<div id="ausgabe"></div>
scripts.js
function init() {
var inhalt = document.createTextNode("Hello World");
document.getElementById("ausgabe").appendChild(inhalt);
• Mit "document.write" kann Inhalt direkt in die HTML-Seite
eingefügt werden
webt • javascript • burkert, marti, zeman • 03/2009 •
}
window.onload=init;
23
webt • javascript • burkert, marti, zeman • 03/2009 •
24
Kommentare in JavaScript
• //...
JavaScript Debugging
Kommentar bis zum Zeilenende
• Firefox Fehlerkonsole
• /*...*/ Auch über mehrere Zeilen
• Gibt Hinweise auf mögliche Fehler
• Besser // verwenden, da "*/" auch in regulären Ausdrücken
vorkommen kann
• Auch zum Testen von einfachen JavaScript-Ausdrücken
• Empfehlenswert: Firefox-Erweiterung Firebug
// Initialisierung
function init() {
var inhalt = document.createTextNode("Hello World");
document.getElementById("ausgabe").appendChild(inhalt);
}
// Event: Seite vollständig geladen
window.onload=init;
webt • javascript • burkert, marti, zeman • 03/2009 •
25
JavaScript Shell
webt • javascript • burkert, marti, zeman • 03/2009 •
26
JavaScript in Java
• Rhino Projekt
http://www.mozilla.org/rhino/
• JavaScript Shell
$ java -cp js.jar org.mozilla.javascript.tools.shell.Main
Rhino 1.7 release 1 2008 03 06
js> 10 + 7
17
js> "hello world".length
11
js> Math.floor(Math.random()*6+1)
3
js> (function (n) { return n*n*n; }) (3)
27
js>
http://www.squarefree.com/shell/
webt • javascript • burkert, marti, zeman • 03/2009 •
27
webt • javascript • burkert, marti, zeman • 03/2009 •
28
Übersicht
Zahlen
• Nur ein numerischer Typ: 64 Bit
Gleitpunktzahlen (IEEE 754)
• JavaScript
Datenstrukturen
Überblick
und Klassen
Zugriffskontrolle
• Erste
Schritte mit JavaScript
> 10 + 7
17
> 0.1 + 0.2
• Entspricht double in Java
•
Methoden
• Operationen:
JavaScript Sprachelemente
0.30000000000000004
•
Elemente
• Klassenweite
Vordefinierte Objekte
• Kein Ganzzahltyp
> 7 <= 5
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
• Die üblichen Operatoren werden
unterstützt (vgl. C, Java)
> Math.sin(3.5);
•
•
•
•
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
29
Zahlen
11
> parseInt("11", 2)
3
> parseInt("ff", 16)
255
> parseInt("11abc")
11
-0.35078322768961984
> Math.PI
• Funktionen und Konstanten über
das Math-Objekt zugänglich
webt • javascript • burkert, marti, zeman • 03/2009 •
> parseInt("11")
false
3.141592653589793
webt • javascript • burkert, marti, zeman • 03/2009 •
30
Spezielle Zahlen
• Vordefinierte Funktionen parseInt
und parseFloat
• NaN steht für "not a number"
• Lesen Zahlen von String
• Auch Zahlen anderer Zahlensysteme
(binär, oktal, hexadezimal) können
eingelesen werden
> parseInt("11.5")
11
> parseInt("abc")
• Mit der Funktion isNaN() kann
auf dieses Ergebnis geprüft
werden
• Zahlen ausserhalb des darstellbaren Zahlenbereichs gelten als
unendlich
NaN
> isNaN(parseInt("abc"))
true
> isNaN(25)
false
> 1/0
Infinity
> -1/0
-Infinity
> parseFloat("11.5")
11.5
webt • javascript • burkert, marti, zeman • 03/2009 •
31
webt • javascript • burkert, marti, zeman • 03/2009 •
32
Strings
Dynamisches Typenkonzept
• Folgen von 16-Bit Unicode Zeichen
• Datentypen in JavaScript
werden dynamisch zugewiesen
• In "..." oder '...' eingeschlossen
• Strings sind Objekte mit Eigenschaften und Methoden
> var a = 25;
> a * a
625
• Keine Typangabe bei einer
Variablendefinition
• Die length-Eigenschaft liefert die Anzahl Zeichen
• http://de.selfhtml.org/javascript/objekte/string.htm
> "hello".length
5
> "hello".charAt(0)
h
> "hello, world".replace("hello", "goodbye")
> a = "hello";
hello
• Eine Variable kann jederzeit an
einen Wert eines anderen Typs
gebunden werden
> a = 17 + 3
• Bei Bedarf werden Datentypen
automatisch passend zu den
Operatoren umgewandelt
> 5 * "7"
20
35
> "5" * "7"
35
goodbye, world
webt • javascript • burkert, marti, zeman • 03/2009 •
33
String-Verkettung
webt • javascript • burkert, marti, zeman • 03/2009 •
34
Wahrheitswerte
• Plus-Operator leider überladen: Addition und String-Verkettung
• Mögliche Werte:
true, false
• In Verbindung mit der automatischen Typumwandlung können
dadurch unerwartete Ergebnisse auftreten:
• Logische Operatoren:
&&, ||, !
• false, 0, "", NaN, null,
undefined werden bei
Bedarf als false aufgefasst
> "44" - 2
42
> "44" + 2
442
> var a;
> a
undefined
> Boolean("")
false
> Boolean("false")
true
> var other;
> var name = other || "default";
> name
"default"
webt • javascript • burkert, marti, zeman • 03/2009 •
35
webt • javascript • burkert, marti, zeman • 03/2009 •
36
Gleichheit
> var a = ""
> a == false
true
> a == 0
true
Kontrollstrukturen
• == und != vergleichen mit
automatischer Typumwandlung
• Abfragen mit if..else wie in C und Java
• Ternärer Operator:
bedingung ? true-ausdruck : false-ausdruck
• === und !== vergleichen ohne
automatische Typumwandlung
• Schleifen mit for und while wie in C und Java
> a === 0
• Es gibt auch switch und do..while (seltener benötigt)
false
> a === ""
true
• === und !== sind in der Regel
vorzuziehen
for (var i = 0; i < 5; i++) {
// Will execute 5 times
}
var volljaehrig = (alter >= 18) ? "ja" : "nein";
webt • javascript • burkert, marti, zeman • 03/2009 •
37
Objekte
webt • javascript • burkert, marti, zeman • 03/2009 •
38
Objekte
• Objekt: Menge von Name-Wert-Paaren
• Objekt kann beim Anlegen
auch gleich initialisiert
werden
(object literal syntax)
• Vergleichbar mit Dictionaries (Python), HashMaps (Java),
assoziativen Arrays (PHP)
var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
var obj = new Object();
// neues Objekt anlegen
var obj = {};
// kuerzere Schreibweise (object literal)
obj.name = "Simon";
// so nur möglich, wenn Attribut ein
var name = obj.name;
// erlaubter Name ist
}
// Zugriff auf Attribute:
obj["name"] = "Simon";
}
obj.details.color
// orange
obj["details"]["size"]
// 12
// Attribut kann beliebiger String sein
var name = obj["name"];
webt • javascript • burkert, marti, zeman • 03/2009 •
39
webt • javascript • burkert, marti, zeman • 03/2009 •
40
Objekte
for...in
• Im Gegensatz zu C++ und Java sind Objekte in JavaScript
dynamische Datenstrukturen
• Auflisten aller Objektvariablen (ohne Methoden) eines Objekts
• Mit typeof wird der Typ einer Variablen bestimmt
• Attribute und Methoden können zu einem Objekt jederzeit
hinzugefügt oder wieder entfernt werden
• Achtung: Auch geerbte Elemente werden ausgegeben
• Es gibt keine Klasse, die festlegt, wie die davon abgeleiteten
Objekte aussehen müssen
var name;
• Man kann zu einem Objekt aber ein Prototyp-Objekt angeben,
von dem das Objekt dann Attribute und Methoden erbt
for (name in obj) {
if (typeof obj[name] !== 'function') {
document.writeln(name + ': ' + obj[name] + '<br />');
}
}
webt • javascript • burkert, marti, zeman • 03/2009 •
41
Arrays
> var a = new Array();
> a[0] = "dog";
> a[1] = "cat";
> a[2] = "hen";
> a.length
3
> a[100] = "cow";
webt • javascript • burkert, marti, zeman • 03/2009 •
42
Arrays
• Arrays sind spezielle Objekte
• Kürzere Schreibweise
(array literal)
• Ganze Zahlen 0...n als Index
• Dimension wird nicht festgelegt
• Grösse (length) ist um 1 grösser
als der grösste Index
> a.length
101
webt • javascript • burkert, marti, zeman • 03/2009 •
43
• Diverse Methoden für
Array-Objekte
> var a = ["dog", "cat", "hen"];
> a
dog,cat,hen
> a.push('cow')
4
> a
dog,cat,hen,cow
> a.pop()
cow
> a
dog,cat,hen
> a.sort()
cat,dog,hen
> a
cat,dog,hen
webt • javascript • burkert, marti, zeman • 03/2009 •
44
Funktionen
function double (n) {
return 2 * n;
}
double(21)
// ergibt 42
(function(n) {
return 2 * n;
})(21)
// ergibt 42
Funktionen
• Funktionen sind in JavaScript
ebenfalls Objekte
• Keine Typangabe für Parameter und
Rückgabewert
• Sie können vielseitig eingesetzt
werden
• Variable mit var eingeführt ist lokal
in der Funktion (function scope)
• Sie sind nicht auf Anhieb mit
allen ihren Möglichkeiten zu
verstehen
• Es gibt in JavaScript keinen block
scope
45
}
webt • javascript • burkert, marti, zeman • 03/2009 •
46
Vordefinierte Funktionen
// Bestimmung des ggT
• In JavaScript sind einige Funktionen vordefiniert
// (Euklidischer Algorithmus)
function ggt(x, y) {
rest
= x %
var rest
= y;
x % y;
while (rest != 0) {
x = y;
y = rest;
rest = x % y;
}
return y;
// Problem?
return total;
• Ohne return-Anweisung ist der
Funktionswert undefined
Funktionen
}
var total = x + y;
• Am besten die Variablen am Anfang
der Funktion deklarieren
• Wir beschränken uns hier auf
die Grundlagen
webt • javascript • burkert, marti, zeman • 03/2009 •
function add(x, y) {
// Aufruf:
document.write(ggt(6,9));
webt • javascript • burkert, marti, zeman • 03/2009 •
47
parseFloat("3.14")
Number("3.14")
3.14
3.14
parseFloat("3,14")
3
Number("3,14")
NaN
parseInt("3.14")
escape("url: test.gif")
3
url%3A%20test.gif
parseInt("abc")
NaN
unescape("url%3A%20test.gif")
url: test.gif
isNaN(parseInt("abc"))
true
webt • javascript • burkert, marti, zeman • 03/2009 •
48
Funktions- und Variablennamen
Variable Parameterzahl
• Buchstaben, Ziffern und der Unterstrich "_" erlaubt
function avg() {
var sum = 0;
• Keine Leerzeichen oder andere Sonderzeichen, keine Umlaute
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
• Gross- und Kleinschreibung wird unterschieden
}
return sum / arguments.length;
• Dürfen nicht mit einem reservierten Wort identisch sein
Erlaubt
result
$result
übertrag
MyNotes
avg(2, 3, 4, 5)
// ergibt 3.5
Nicht erlaubt
result3
my_notes
}
return
• Syntax von Anweisungen (Zuweisung), Operatoren (+=), Blocks
(Block {...} im for) wie in C oder Java
alert
webt • javascript • burkert, marti, zeman • 03/2009 •
49
Anonyme Funktionen
}(5);
50
Funktionsobjekte
var a = function(n) {
return n*n;
webt • javascript • burkert, marti, zeman • 03/2009 •
Funktionen sind normale Objekte, die
// Funktion
– Variablen zugewiesen werden können
// Aufruf mit Argument
– in Arrays abgelegt werden können
– als Parameter oder Rückgabewert verwendet werden können
– selber Attribute und Methoden haben können
• Anonyme Funktionen können mit function(parameterliste){...}
definiert werden
• Eine Funktion muss also nicht unbedingt einen Namen haben
• Hier: Definition und Aufruf zusammen
var a = [ function(n){return n;}, function(n){return n*n;} ];
var b = a[1](5);
webt • javascript • burkert, marti, zeman • 03/2009 •
51
// liefert 25
webt • javascript • burkert, marti, zeman • 03/2009 •
52
Innere Funktion
function init() {
var name = "Mozilla";
function displayName() {
alert(name);
}
displayName();
}
Closure
• name ist lokal in der init()-Funktion
• displayName() ist eine innere
Funktion in init() und nur dort
verfügbar
• displayName() hat keine lokalen
Variablen, hat aber Zugriff auf
name
• Die innere Funktion hat Zugriff auf
die lokalen Variablen der Funktion,
in die sie eingebettet ist
webt • javascript • burkert, marti, zeman • 03/2009 •
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
• Sie hat auch später noch Zugriff
auf die Variable name
• Mit anderen Worten: Die zum
Definitionszeitpunkt bestehende
Umgebung bleibt erhalten
(Closure)
53
Closure – Beispiel
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
makeFunc()();
webt • javascript • burkert, marti, zeman • 03/2009 •
54
Objekt mit Funktion (Methode)
var fade = function (node) {
var level = 1;
var step = function () {
var hex = level.toString(16);
node.style.backgroundColor = '#FFFF' + hex + hex;
if (level < 15) {
level += 1;
setTimeout(step, 100);
level ist in step() noch
}
verfügbar, auch nachdem
};
fade() bereits beendet ist
setTimeout(step, 100);
}
• Methoden sind Funktionen, die über ein Objekt aufgerufen
werden
• Eine zuvor definierte Funktion kann wie ein Attribut an ein
Objekt gebunden werden:
function sayhi() { alert("hi"); }
obj.sayit = sayhi;
obj.sayit();
window.onload = function() {
fade(document.body);
}
D. Crockford: JavaScript The Good Parts
• Im Beispiel wird die innere
Funktion displayName()
zurückgegeben
webt • javascript • burkert, marti, zeman • 03/2009 •
55
webt • javascript • burkert, marti, zeman • 03/2009 •
56
Objekt mit Funktion (Methode)
Funktion als Konstruktor
var myObj = {
function Person(first, last) {
value: 0,
increment: function(inc) {
this.first = first;
this.last = last;
this.value += (typeof inc === 'number') ? inc : 1;
this.fullName = function() {
}
return this.first + ' ' + this.last;
}
myObj.increment();
}
document.writeln(myObj.value);
myObj.increment(2);
// 1
this.fullNameReversed = function() {
document.writeln(myObj.value);
// 3
}
return this.last + ', ' + this.first;
}
var s = new Person("Hans", "Muster");
• Mit this kann man auf das Objekt zugreifen, in das die Funktion
eingebettet ist
webt • javascript • burkert, marti, zeman • 03/2009 •
57
Funktion als Konstruktor
webt • javascript • burkert, marti, zeman • 03/2009 •
Prototyp
• Nachteil des letzten Beispiels: Jedes neu angelegte PersonObjekt enthält zwei Funktionsobjekte
• Über den Prototyp können auch Methoden zu bestehenden
Typen hinzugefügt werden
• Dies kann man vermeiden, indem die Methoden in einem
Prototyp-Objekt angelegt werden
• Im Beispiel erhalten alle Zahlen eine neue integer()-Methode,
die je nach Vorzeichen die nächst grössere (Math.ceil) oder
nächst kleinere ganze Zahl (Math.floor) zurückgibt
• Über Prototypen kann in JavaScript eine Art Vererbung
realisiert werden
Number.prototype.integer = function() {
• Durch Ändern des Prototyps eines Objekts "erben" alle
Objekte, die diesen Prototyp haben automatisch die neue
Eigenschaft oder Methode
webt • javascript • burkert, marti, zeman • 03/2009 •
58
return Math[this < 0 ? 'ceil' : 'floor'](this);
}
59
(-7/3).integer()
// ergibt -2
3.75.integer()
// ergibt 3
webt • javascript • burkert, marti, zeman • 03/2009 •
60
private und public
Objektmodell in JavaScript
var singleton = function () {
var privateVariable;
function privateFunction(x) {
• Globale Variablen und
Funktionen vermeiden
...privateVariable...
}
...privateVariable...
secondMethod: function (c) {
...privateFunction()...
}
};
• So weit so gut...
• Weiter soll es hier
nicht vertieft werden :)
}();
https://developer.mozilla.org/En/Core_JavaScript_1.5_Guide:Details_of_the_Object_Model
webt • javascript • burkert, marti, zeman • 03/2009 •
61
Übersicht
webt • javascript • burkert, marti, zeman • 03/2009 •
62
Vordefinierte Objekte
• In JavaScript gibt es einige vordefinierte Objekte
• JavaScript
Datenstrukturen
Überblick
und Klassen
• Diese haben zum grossen Teil mit dem Browser
oder dem gerade angezeigten Dokument zu tun:
Zugriffskontrolle
• Erste
Schritte mit JavaScript
•
Methoden
• Operationen:
JavaScript Sprachelemente
document, window, navigator, ...
•
Elemente
• Klassenweite
Vordefinierte
Objekte
• Andere Objekte sind allgemeinerer Natur:
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
•
•
•
•
• Aber auch zunächst schwer durchschaubar, wenn
man von Sprachen wie C++ oder Java kommt
• Man kann mit JavaScript auch das "herkömmliche"
Modell mit Klassen, Ableitung und Instanziierung
nachbauen (zum Beispiel in der Dojo-Library zu
finden)
return {
firstMethod: function (a, b) {
},
• Das Objektmodell in JavaScript ist extrem flexibel
Date, Math, RegExp, ...
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
• Die Attribute der Objekte sind teilweise änderbar,
teilweise aber auch nur lesbar (s. Doku)
webt • javascript • burkert, marti, zeman • 03/2009 •
63
webt • javascript • burkert, marti, zeman • 03/2009 •
64
Beispiel
document
if (eingabe != aktuellesPasswort) {
• Zugriff auf verschiedene Eigenschaften des angezeigten
HTML-Dokuments
alert("Falsches Passwort!");
// zurueck zur letzten Seite
history.back();
} else {
// Seite laden - kein wirklicher Passwortschutz!
document.location.href = "geheim.htm";
// Zugriff auf Cookies
document.lastModified;
// Zeit der letzten Änderung
• Die folgenden Methoden werden heute meistens durch
DOM-Zugriffe ersetzt:
}
• history enthält ein Array der URLs die bisher geladen wurden
• document liefert Informationen über das aktuell angezeigte
HTML-Dokument
webt • javascript • burkert, marti, zeman • 03/2009 •
document.cookie;
document.open();
// Dokument zum Schreiben öffnen
document.write("Hallo");
// Einfügen von Text
document.close();
// Dokument schliessen
65
document
webt • javascript • burkert, marti, zeman • 03/2009 •
66
document.forms
Formular im HTML
<form name="meinformular">
• Verschiedene "Unterobjekte" von document erlauben
den Zugriff auf Elemente der aktuellen Seite
<input name="eingabe1">
...
• Auch dafür werden heute meist die allgemeineren DOMZugriffe verwendet
Zugriffsmöglichkeiten:
</form>
document.forms[0].elements.length
document.links
// die Verweise der Seite
document.images
// die Bilder der Seite
document.forms
// die Formulare der Seite
document.meinformular.elements.length
// Elemente eines Formulars: elements
document.meinformular.eingabe1.value
document.forms[0].elements[0].value
// Wert eines Elements: value
Variante 1
Variante 2
document.forms["meinformular"].elements.length
document.forms["meinformular"].elements["eingabe1"].value
Variante 3
webt • javascript • burkert, marti, zeman • 03/2009 •
67
webt • javascript • burkert, marti, zeman • 03/2009 •
68
Beispiel: Eingabevalidierung
navigator
<form name="Formular" action="/cgi-bin/register.pl" method="post"><pre>
Name:
<input type="text" size="40" name="User">
E-Mail:
<input type="text" size="40" name="Mail">
Formular: <input type="submit" value="Absenden">
<input type="reset" value="Abbrechen">
</pre></form>
Eigenschaften des navigator Objekts:
function chkFormular() {
if (document.Formular.User.value == "") {
alert("Bitte Ihren Namen eingeben!");
document.Formular.User.focus();
return false;
}
if (document.Formular.Mail.value.indexOf('@') == -1) {
alert("Keine E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}
}
window.onload=function() {
document.getElementsByName("Formular")[0].onsubmit=chkFormular;
}
webt • javascript • burkert, marti, zeman • 03/2009 •
– appName
offizieller Name des Browsers
– appVersion
Browser-Version
– language
Browser-Sprache
– appCodeName
Spitzname des Browsers
– platform
Plattform, auf der der Browser läuft
– userAgent
HTTP-Identifikation des Browsers
69
window
webt • javascript • burkert, marti, zeman • 03/2009 •
70
window
• Repräsentiert Browserfenster
function neuesFenster() {
window.open("http://www.zhaw.ch","zhawwindow",
• Zahlreiche Attribute und Methoden
"menubar=1,width=200,height=300,scrollbar=1" );
• Beispiel: window.open() öffnet ein neues Browserfenster
}
• Objektname window kann auch weggelassen werden:
open() statt window.open()
• Wichtig: Das automatische Öffnen neuer Fenster ist für die
Benutzer in vielen Fällen vor allem lästig und wenig nützlich
• Das heisst: Nur benutzen wenn wirklich nötig
webt • javascript • burkert, marti, zeman • 03/2009 •
71
webt • javascript • burkert, marti, zeman • 03/2009 •
72
window
Math Konstanten
Öffnen eines Fensters und Einfügen von Inhalt
open: Fenster öffnen
fenster1=window.open("","fe","width=300,height=300");
with (fenster1.document) {
open: Dokument öffnen
open();
write("<p>Text im neuen Fenster.</p>");
write("<form>");
write("<input type='button' value='OK' "
+ "onClick='window.close()'>");
write("</form>");
close();
fe: Fenster-Name
}
E
Eulersche Konstante
LN2
natürlicher Logarithmus von 2
LN10
natürlicher Logarithmus von 10
LOG2E
konstanter Logarithmus von 2
LOG10E
konstanter Logarithmus von 10
PI
Konstante PI
SQRT1_2
Konstante für Quadratwurzel aus 0,5
SQRT2
Konstante für Quadratwurzel aus 2
(als z.B. Verweisziel)
fenster1: Referenz auf das Window-Objekt
webt • javascript • burkert, marti, zeman • 03/2009 •
73
Math Methoden
webt • javascript • burkert, marti, zeman • 03/2009 •
74
Date
abs()
positiver Wert
ceil()
nächsthöhere ganze Zahl
floor()
nächstkleinere ganze Zahl
log()
Anwendung des natürlichen Logarithmus
max()
größere von zwei Zahlen
min()
kleinere von zwei Zahlen
pow()
Zahl hoch Exponent
random()
Zufallszahl
round()
kaufmännische Rundung einer Zahl
um 0 Uhr (Geburtszeit von Unix) bis zum Zeitpunkt,
sin()
Sinus
den das Objekt repräsentiert
sqrt()
Quadratwurzel
var jetzt = new Date();
document.write(jetzt.getTime());
• new Date() liefert ein Date-Objekt mit der aktuellen
Zeit
• getTime(): Anzahl der Millisekunden vom 1.1.1970
...
webt • javascript • burkert, marti, zeman • 03/2009 •
75
webt • javascript • burkert, marti, zeman • 03/2009 •
76
Date
Date – Beispiel
// aktueller Zeitpunkt
• Der Zeitpunkt kann auch beliebig gesetzt werden:
var now = new Date();
// timestamp fuer Weihnachten
// (angenommen, thisyear bereits bestimmt)
temp = new Date(Jahr, Monat, Tag);
temp = new Date(Jahr, Monat, Tag, Std, Min, Sek);
var then = new Date(thisyear, 11, 24);
// Differenz
var d = (then.getTime() - now.getTime()) / 1000;
• Vorsicht: Januar ist 0, Dezember ist 11
// Sekunden bis Weihnachten
document.write("Noch " + d + "s bis Weihnachten.");
webt • javascript • burkert, marti, zeman • 03/2009 •
77
Date – weitere Methoden
getDate()
setDate()
Monatstag
getDay()
setDay()
Wochentag
getHours()
setHours()
Stunde
getMinutes()
setMinutes()
Minute
getMonth()
setMonth()
Monat
getFullYear()
setFullYear()
Jahr
webt • javascript • burkert, marti, zeman • 03/2009 •
webt • javascript • burkert, marti, zeman • 03/2009 •
78
Event Handling
• Event Handler: JavaScript Code, der ausgeführt wird,
wenn ein bestimmtes Ereignis (z.B. Mausklick) eintritt
• Kann als Attribut bei dem betreffenden Element
angegeben werden:
<form action="send.php">
<input type="button" value="Klick"
onClick="alert('Hallo');" />
</form>
79
webt • javascript • burkert, marti, zeman • 03/2009 •
80
Event Handling
Events: Auswahl
• Es hat aber Vorteile, den JavaScript-Code vom HTML
getrennt zu halten
<input type="button" id="btn" value="Klick" />
function initEvents() {
document.getElementById("btn").onclick = alert('Hallo');
}
window.onload = initEvents;
webt • javascript • burkert, marti, zeman • 03/2009 •
onabort
Klick auf STOP während dem Laden
onchange
Eintrag verändert
onclick
Klick auf Element
onfocus
Element erhält Focus
onload
Ladevorgang abgeschlossen
onmouseover
Maus über dem Element
onreset
Auslösen von Reset in einem Formular
onsubmit
Abschicken eines Formulars
onunload
Verlassen eines HTML Dokuments
...
81
Event Handling: Beispiel
webt • javascript • burkert, marti, zeman • 03/2009 •
82
Event Handling: Beispiel 2
var messung = {
<a href="http://www.zhaw.ch" id="rolink">
<img name="roimg" src="bild.jpg" alt="Demo Bild" />
</a>
beginn: function() {
this.zeitbeginn = new Date();
},
ende: function() {
function change_over() {
document.images["roimg"].src="bild_ov.jpg";
}
function change_out() {
document.images["roimg"].src="bild.jpg";
}
window.onload = function() {
var linkelem = document.getElementById("rolink");
linkelem.onmouseover = change_over;
linkelem.onmouseout = change_out;
}
var e = new Date();
var d = (e.getTime() - this.zeitbeginn.getTime())/1000;
alert("Sie waren " + d + " Sekunden hier!");
}
}
window.onload = messung.beginn;
window.onunload = messung.ende;
Keine besonders sinnvolle Anwendung ;-)
webt • javascript • burkert, marti, zeman • 03/2009 •
83
webt • javascript • burkert, marti, zeman • 03/2009 •
84
Übersicht
DOM Scripting
• Zugriff auf die Elemente einer Seite über das
Document Object Model (DOM)
• JavaScript
Datenstrukturen
Überblick
und Klassen
Zugriffskontrolle
• Erste
Schritte mit JavaScript
• Zum Beispiel zum dynamischen Verändern des
Seiteninhalts
•
Methoden
• Operationen:
JavaScript Sprachelemente
•
Elemente
• Klassenweite
Vordefinierte Objekte
• Normalerweise auf die Manipulation von X/HTML und
CSS mit Hilfe von JavaScript bezogen
•
und Destruktoren
• Konstruktoren
Document Object
Model und Ajax
•
•
•
•
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
• Die frühere Bezeichnung DHTML wird nicht mehr
verwendet
webt • javascript • burkert, marti, zeman • 03/2009 •
85
DOM Scripting - Beispiel
webt • javascript • burkert, marti, zeman • 03/2009 •
86
DOM Scripting
<html>
• Zunächst notwendig dafür:
<head><title>Test</title></head>
– Zugriff auf die Elemente der HTML-Struktur
<body>
– Möglichkeit zum Erzeugen neuer Knoten
<p id="Absatz"
onClick="document.getElementById('Absatz')
• Dies geht mit Hilfe einiger Methoden des
document-Objekts:
.firstChild.nodeValue='Sehen Sie!'" >
Ich bin dynamisch</p>
</body>
</html>
webt • javascript • burkert, marti, zeman • 03/2009 •
87
getElementById()
createAttribute()
getElementsByName()
createElement()
getElementsByTagName()
createTextNode()
webt • javascript • burkert, marti, zeman • 03/2009 •
88
DOM Scripting
•
HTML Elementobjekte
Auf die Elemente der X/HTML-Struktur kann dann auf
zwei Arten zugegriffen werden:
• Für jedes HTML-Element gibt es ein Objekt mit
passenden Attributen und Methoden
1. Über die Eigenschaften und Methoden der
HTML-Elementobjekte
• Dies ist das HTML-spezifische DOM
• Ein paar Attribute werden von allen Elementobjekten
unterstützt: title, id, className (nicht: class !), ...
2. Über die Eigenschaften und Methoden des
node-Objekts
webt • javascript • burkert, marti, zeman • 03/2009 •
• Weitere sind spezifisch für bestimmte Elementobjekte,
für das Element a zum Beispiel Attribute wie href, name
und Methoden wie blur(), focus()
89
node-Objekt
webt • javascript • burkert, marti, zeman • 03/2009 •
90
DOM Scripting - Beispiel
function all_elements_below(elem) {
• Das node-Objekt stellt von HTML unabhängige
Zugriffs-Attribute und Methoden zur Verfügung
if (elem.hasChildNodes() ) {
var nodesBelow = elem.childNodes;
• Auch für andere XML-Sprachen geeignet, das
allgemeinere DOM
for (var i = 0; i < nodesBelow.length; i++) {
if (nodesBelow[i].nodeType == 1) {
• Attribute: attributes, childNodes, data, firstChild, ...
all_elements_below(nodesBelow[i]);
} else if (nodesBelow[i].nodeType == 3) {
• Methoden: appendChild(), appendData(),
cloneNode(), ...
}
text_found(nodesBelow[i].nodeValue);
}
}
• Mehr in der JavaScript Dokumentation
webt • javascript • burkert, marti, zeman • 03/2009 •
}
91
Was könnte diese Funktion machen??
Hinweis:
nodeType 1: Elementknoten
nodeType 3: Textknoten
webt • javascript • burkert, marti, zeman • 03/2009 •
92
Remote Scripting
Remote Scripting
• Bei Web-Applikationen wird in Normalfall nach jeder
Interaktion eine neue Seite vom Server zum Client
geladen
Verschiedene Ansätze zum Remote Scripting
• Script welches in unsichtbarem I/Frame läuft (JSRS)
(kaum noch verwendet, da bessere Lösungen verfügbar)
! etwas "schwerfällige" User Interfaces
• Microsoft Variante mit ActiveX-Objekt (MSRS)
(plattformspezifisch, Sicherheitsprobleme)
• Abhilfe: Java Applets, Flash, oder: Remote Scripting
(alle mit verschiedenen Vor- und Nachteilen)
• Asynchrones XMLHttpRequest-Objekt (Ajax)
(heute hauptsächlich verwendet)
• Idee des Remote Scripting:
Asynchrone Kommunikation zwischen Server und Client,
um nur einzelne Teile der Webseite „nachzuladen“
webt • javascript • burkert, marti, zeman • 03/2009 •
93
Ajax
webt • javascript • burkert, marti, zeman • 03/2009 •
94
Ajax
• Asynchronous JavaScript and XML
• Abgeleitet von der Microsoft-Variante von Remote
Scripting, welche noch auf ActiveX basierte (Ab IE5)
• Neues JavaScript-Objekt XMLHttpRequest
(Unterstützt von allen aktuellen Browsern, mittlerweile
Working Draft des W3C, Oktober 2007)
• Leichte Unterschiede zwischen den Implementierungen
webt • javascript • burkert, marti, zeman • 03/2009 •
95
webt • javascript • burkert, marti, zeman • 03/2009 •
96
Ajax: XMLHttpRequest
Ajax: XMLHttpRequest
// Erzeugen des XMLHttpRequest-Objekts
var xmlHttp = null;
// Mozilla, Opera, Safari sowie Internet Explorer 7
if (typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) {
// Internet Explorer 6 und älter
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = null;
}}}
webt • javascript • burkert, marti, zeman • 03/2009 •
// Anwenden des XMLHttpRequest-Objekts
if (xmlHttp) {
// Konfiguration des Requests (Methode, Ziel, Asynchron?)
xmlHttp.open('GET', 'beispiel.xml', true);
// Event-Handler, der ausgeführt wird,
// wenn die Antwort geladen wurde (readyState == 4)
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
};
// Abschicken des Requests
xmlHttp.send(null);
}
97
Übersicht
98
JavaScript Libraries
• Wozu eine JavaScript-Library?
• JavaScript
Datenstrukturen
Überblick
und Klassen
– komfortablerer Zugriff auf das DOM
Zugriffskontrolle
• Erste
Schritte mit JavaScript
– Browser-Unterschiede ausgleichen
•
Methoden
• Operationen:
JavaScript Sprachelemente
– Animationen, Effekte
– mehr Komfort mit Ajax (statt direkt mit XMLHttpRequest)
•
Elemente
• Klassenweite
Vordefinierte Objekte
– GUI-Widgets
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
•
•
•
•
webt • javascript • burkert, marti, zeman • 03/2009 •
• Beispiele:
Prototype, Scriptaculous, jQuery, Dojo, MooTools, extJS, YUI
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
• Das Google Web Toolkit (GWT) verfolgt einen anderen Ansatz:
Java programmieren, JavaScript generieren
webt • javascript • burkert, marti, zeman • 03/2009 •
99
webt • javascript • burkert, marti, zeman • 03/2009 •
100
jQuery
jQuery: $-Symbol
• Open Source JavaScript Bibliothek
• Alle Aufrufe erfolgen über den jQuery Namensraum
(Objekt, Funktion)
• 2006 John Resig (Mozilla Corporation)
• Abkürzung: $
• Schwerpunkt: Interaktion zwischen JavaScript und
HTML verbessern
• Ergänzt durch jQuery UI (effects and UI library)
• Beispiel:
var str = "
• http://jquery.com/
webt • javascript • burkert, marti, zeman • 03/2009 •
foo
";
jQuery.trim(str);
// returns "foo"
$.trim(str);
// dito
101
jQuery: Elemente auswählen
webt • javascript • burkert, marti, zeman • 03/2009 •
102
jQuery: Chaining
• Auswahl von Elementen mit CSS-Selektoren
• Mehrere Anweisungen können mit einem Punkt
aneinandergehängt werden
• Ausser den in CSS 2 und CSS 3 möglichen Selektoren
auch jQuery-spezifische Erweiterungen
• Sie werden dann nacheinander ausgeführt
• Mit den ausgewählten Elementen können dann
bestimmte Manipulationen durchgeführt werden
• Beispiel: Beim Klick auf wird ein Untermenü ausgefahren
und beim nächsten Klick wieder entfernt
• Beispiel: Alle p mit Klasse "foo" erhalten auch noch die
Klasse "bar":
jQuery("a.menu").click(function(){
jQuery(this).next().slideToggle("slow");
return false;
$("p.foo").addClass("bar");
});
webt • javascript • burkert, marti, zeman • 03/2009 •
103
webt • javascript • burkert, marti, zeman • 03/2009 •
104
jQuery: Ajax
Übersicht
• Asynchrone Aufrufe sind sehr einfach realisierbar
• JavaScript
Datenstrukturen
Überblick
und Klassen
Zugriffskontrolle
• Erste
Schritte mit JavaScript
$.ajax({
type: "POST",
•
Methoden
• Operationen:
JavaScript Sprachelemente
url: "some.php",
•
Elemente
• Klassenweite
Vordefinierte Objekte
data: "name=John&location=Boston",
•
undModel
Destruktoren
• Konstruktoren
Document Object
und Ajax
success: function(msg){
•
•
•
•
alert( "Data Saved: " + msg );
}
});
webt • javascript • burkert, marti, zeman • 03/2009 •
105
Weitere Informationen
• SELFHTML
http://de.selfhtml.org/javascript/
• JavaScript Dokumentationen (Mozilla)
http://developer.mozilla.org/en/docs/JavaScript
• ECMAScript-262 Spezifikation
http://www.ecma-international.org/publications/standards/Ecma-262.htm
• jQuery
http://jquery.com/
webt • javascript • burkert, marti, zeman • 03/2009 •
107
Überladen von Operatoren
JavaScript Libraries
Mehr zu Klassen
Weitere Informationen
webt • javascript • burkert, marti, zeman • 03/2009 •
106
Document
Kategorie
Internet
Seitenansichten
5
Dateigröße
1 711 KB
Tags
1/--Seiten
melden