JavaScript
Werbung
Slide 1
PPS-Design einer eigenen WWW-Homepage
SS 2003
JavaScript
Slide 2
Überblick
•
•
•
•
Eigenschaften und Anwendungen
Überblick Sprache
Einbettung in HTML
Beispiele
Slide 3
JavaScript
• Was
– Eine Skriptsprache (von Netscape entwickelt), direkte
Erweiterung zu HTML
– Unterscheidung in Client-JavaScript und ServerJavaScript
• Gemeinsamkeiten mit Java
– Ähnliche Syntax
– Ähnliche Kontrollstrukturen
– Automatische Speicherverwaltung
• Unterschiede zu Java
– Interpretiert (auf Server-Seite vorkompiliert)
– Textuell in Webseiten eingebettet
– Keine (statische) Typenprüfung
– Schwächere Kapselung von Daten/Funktionen
– Kein Multi-Threading
Slide 4
Anwendungen (Client-JavaScript)
• Einfache Animationen
– z.B. Lauftext
• Navigationshilfsmittel
– z.B. gleichzeitiges Aktualisieren mehrerer Rahmen
• Formularüberprüfung
• Dynamische Webseiten
– z.B. Farben durch Dialog zu ändern
• Einfache Anwendungen
– z.B. Taschenrechner, einfache Spiele
Slide 5
Syntax
• Groß- / Kleinschreibung wird unterschieden
• Jede einzelne Anweisung wird durch ein Semikolon
abgeschlossen
• Anweisungsblöcke werden in geschweiften
Klammern eingeschlossen
• Kommentare:
//
/* */
Slide 6
Variable
• Es wird zwischen globalen und lokalen Variablen
unterschieden.
• Globale Variablen werden innerhalb der SCRIPT-Tags im
Header der HTML-Seite deklariert.
• Lokale Variablen werden innerhalb eines Funktionsrumpfes
deklariert.
• Variablendeklaration
[var] Variable1 [, Variable2 [, ...]];
• Variablendeklaration mit Vorbelegung
[var] Variable1 =Wert [, Variable2 =Wert [, ...]];
• Globale Variablen dürfen ohne 'var' deklariert werden.
• Variablennamen dürfen kein Leerzeichen enthalten und
maximal 32 Zeichen lang sein. Das erste Zeichen muss ein
Buchstabe sein.
• Nur zwei Arten von elementaren Variablen: Zahlen und
Zeichenketten.
Slide 7
Arrays (Felder)
• Deklaration
[var] Variablenname = new Array();
• Deklaration mit Vorbelegung
[var] Variablenname = new Array( Werte );
Bsp.
A = new Array (“Mo“, “Di“, “Mi“, “Do“, “Fr“);
Slide 8
Bedingte Anweisungen
• Bedingung
if (Bedingung)
Anweisung1
[ else Anweisung2 ]
• Fallunterscheidung
switch (Bedingung)
{
case Konstante1 : Anweisung1
[ case Konstante2 : Anweisung2 ]
[ default : Anweisung ]
}
Slide 9
Wiederholungsanweisungen
• Iterationsschleife
for( [ Anfangsausdruck ]; [ Bedingung ];
[ Schrittweite ] )
Anweisung
• Objekteigenschaftsschleife
for ( Variable in Objekt ) Anweisung
• Abweisende Wiederholung
while( Bedingung ) Anweisung
• Nichtabweisende Wiederholung
do Anweisung while ( Bedingung )
• Iterationssprung
continue
• Schleifenabbruch
break
Slide 10
Typische Objektstruktur
browser
math
history
anchors[]
date
location
images[]
submit button
window
navigator
document
frames[]
forms[]
links[]
checkbox
select
radio
string
applets[]
text
textarea
Objekteigenschaften
Slide 11
Funktionen
• Deklaration
function Funktionsname ( [Parameter] ) {
Anweisung
}
• Abbruch
return;
• Abbruch mit Rückgabewert
return (Wert);
Slide 12
Event Handler
Event
Beschreibung
Objekt
onAbort
STOP gedrückt, bevor alle Bilder
geladen wurden
img
onBlur
Element verliert den Fokus
body, input, select, …
onFocus
Element erhält Focus
body, input, select,…
onChange
Eintrag verändert
input, select, textarea
onClick
Element geklickt
button, checkbox,
radio, submit,…
onLoad
HTML-Datei ist vollständig geladen
body, frameset
onUnload
HTML-Datei wird verlassen
body, frameset
onMouseOver
Maus wird über das Element bewegt
Sehr viele Elemente
onReset
Reset-Befehl im Formular ausgelöst
form
onSelect
Text selektiert
input, textarea
onSubmit
Formular abgeschickt
form
Slide 13
Einbettung in HTML
• Einbettung mit script-Tag
<script language=“JavaScript”> ...
• Einbettung in HTML-Tags
– Event-Aufrufe
“if (top.alreadyRegistered(‘doAlert’)) {
top.callFunction(‘string 1’, ‘string 2’);
}”>
– javascript:-URLs
Close window.
• Einbettung mit dem src-Attribut
<script language=“JavaScript” src=“MyCode.js”>
Slide 14
Beispiele
Aus Einführung in JavaScript
• Diashow
• Kalenderblatt
• Uhr
• Einfacher Rechner
• Einfacher Taschenrechner
• Laufschrift
Slide 15
Weiterführende Literatur
•
•
•
•
•
JavaScript Central
JavaScript Developer Central
Selfhtml
Kakao & Kekse
Einführung in JavaScript
Slide 16
Danke für Ihre Aufmerksamkeit!
Fragen?
PPS-Design einer eigenen WWW-Homepage
SS 2003
JavaScript
Slide 2
Überblick
•
•
•
•
Eigenschaften und Anwendungen
Überblick Sprache
Einbettung in HTML
Beispiele
Slide 3
JavaScript
• Was
– Eine Skriptsprache (von Netscape entwickelt), direkte
Erweiterung zu HTML
– Unterscheidung in Client-JavaScript und ServerJavaScript
• Gemeinsamkeiten mit Java
– Ähnliche Syntax
– Ähnliche Kontrollstrukturen
– Automatische Speicherverwaltung
• Unterschiede zu Java
– Interpretiert (auf Server-Seite vorkompiliert)
– Textuell in Webseiten eingebettet
– Keine (statische) Typenprüfung
– Schwächere Kapselung von Daten/Funktionen
– Kein Multi-Threading
Slide 4
Anwendungen (Client-JavaScript)
• Einfache Animationen
– z.B. Lauftext
• Navigationshilfsmittel
– z.B. gleichzeitiges Aktualisieren mehrerer Rahmen
• Formularüberprüfung
• Dynamische Webseiten
– z.B. Farben durch Dialog zu ändern
• Einfache Anwendungen
– z.B. Taschenrechner, einfache Spiele
Slide 5
Syntax
• Groß- / Kleinschreibung wird unterschieden
• Jede einzelne Anweisung wird durch ein Semikolon
abgeschlossen
• Anweisungsblöcke werden in geschweiften
Klammern eingeschlossen
• Kommentare:
//
/*
Slide 6
Variable
• Es wird zwischen globalen und lokalen Variablen
unterschieden.
• Globale Variablen werden innerhalb der SCRIPT-Tags im
Header der HTML-Seite deklariert.
• Lokale Variablen werden innerhalb eines Funktionsrumpfes
deklariert.
• Variablendeklaration
[var] Variable1 [, Variable2 [, ...]];
• Variablendeklaration mit Vorbelegung
[var] Variable1 =Wert [, Variable2 =Wert [, ...]];
• Globale Variablen dürfen ohne 'var' deklariert werden.
• Variablennamen dürfen kein Leerzeichen enthalten und
maximal 32 Zeichen lang sein. Das erste Zeichen muss ein
Buchstabe sein.
• Nur zwei Arten von elementaren Variablen: Zahlen und
Zeichenketten.
Slide 7
Arrays (Felder)
• Deklaration
[var] Variablenname = new Array();
• Deklaration mit Vorbelegung
[var] Variablenname = new Array( Werte );
Bsp.
A = new Array (“Mo“, “Di“, “Mi“, “Do“, “Fr“);
Slide 8
Bedingte Anweisungen
• Bedingung
if (Bedingung)
Anweisung1
[ else Anweisung2 ]
• Fallunterscheidung
switch (Bedingung)
{
case Konstante1 : Anweisung1
[ case Konstante2 : Anweisung2 ]
[ default : Anweisung ]
}
Slide 9
Wiederholungsanweisungen
• Iterationsschleife
for( [ Anfangsausdruck ]; [ Bedingung ];
[ Schrittweite ] )
Anweisung
• Objekteigenschaftsschleife
for ( Variable in Objekt ) Anweisung
• Abweisende Wiederholung
while( Bedingung ) Anweisung
• Nichtabweisende Wiederholung
do Anweisung while ( Bedingung )
• Iterationssprung
continue
• Schleifenabbruch
break
Slide 10
Typische Objektstruktur
browser
math
history
anchors[]
date
location
images[]
submit button
window
navigator
document
frames[]
forms[]
links[]
checkbox
select
radio
string
applets[]
text
textarea
Objekteigenschaften
Slide 11
Funktionen
• Deklaration
function Funktionsname ( [Parameter] ) {
Anweisung
}
• Abbruch
return;
• Abbruch mit Rückgabewert
return (Wert);
Slide 12
Event Handler
Event
Beschreibung
Objekt
onAbort
STOP gedrückt, bevor alle Bilder
geladen wurden
img
onBlur
Element verliert den Fokus
body, input, select, …
onFocus
Element erhält Focus
body, input, select,…
onChange
Eintrag verändert
input, select, textarea
onClick
Element geklickt
button, checkbox,
radio, submit,…
onLoad
HTML-Datei ist vollständig geladen
body, frameset
onUnload
HTML-Datei wird verlassen
body, frameset
onMouseOver
Maus wird über das Element bewegt
Sehr viele Elemente
onReset
Reset-Befehl im Formular ausgelöst
form
onSelect
Text selektiert
input, textarea
onSubmit
Formular abgeschickt
form
Slide 13
Einbettung in HTML
• Einbettung mit script-Tag
<script language=“JavaScript”> ...
• Einbettung in HTML-Tags
– Event-Aufrufe
“if (top.alreadyRegistered(‘doAlert’)) {
top.callFunction(‘string 1’, ‘string 2’);
}”>
– javascript:-URLs
Close window.
• Einbettung mit dem src-Attribut
<script language=“JavaScript” src=“MyCode.js”>
Slide 14
Beispiele
Aus Einführung in JavaScript
• Diashow
• Kalenderblatt
• Uhr
• Einfacher Rechner
• Einfacher Taschenrechner
• Laufschrift
Slide 15
Weiterführende Literatur
•
•
•
•
•
JavaScript Central
JavaScript Developer Central
Selfhtml
Kakao & Kekse
Einführung in JavaScript
Slide 16
Danke für Ihre Aufmerksamkeit!
Fragen?
