Javascript

Transcription

Javascript

Übungen Informatik I
Javascript
http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/Tutorial
Helga Gabler
Übungen Informatik 1
1
6.
JavaScript
Linkliste
¾
http://www.heise.de/ct/browsercheck/js.shtml
¾
http://java.rrzn.uni-hannover.de/javascript/index.html
¾
„Voodoo JavaScript Tutorial“ und andere Einführungen:
http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm (deutsch)
http://web.urz.uni-heidelberg.de/Ausbildung/Unterlagen/JavaScript/einleit.html (dt)
http://www.stars.com/Authoring/JavaScript/Tutorial/ (englisch)
¾
Selfhtml:
http://www.teamone.de/selfhtml/ (deutsch)
¾
Netscapes neueste JavaScript-Referenz:
http://developer.netscape.com/tech/javascript/index.html (englisch)
¾
Webbuilding:
http://www.cnet.com (englisch)
Helga Gabler
2
6.
JavaScript
Literatur
Frentzen, J. und H. Sobotka:
JavaScript Annotated Archives
Berkley, CA, USA: Osborne/McGraw-Hill. 1998
Goodman, Danny:
Dynamic HTML: The Definitive Reference
Sebastopol, CA, USA: O‘Reilly & Associates, Inc.
Holzner, Steven:
McGraw-Hill 1998
JavaScript Complete
Koch, Stefan
JavaScript – Einführung, Programmierung und Referenz
2., aktualisierte und erweiterte Auflage. dpunkt-Verlag, 1999
Münz, Stefan und Wolfgang Nefzger:
HTML Referenz: Grundlagen, Alternativen und Erweiterungen
Feldkirchen: Franzis Verlag 1997
Seeboerger-Weichselbaum, Michael:
Kaarst: bhv Verlag 1999
Helga Gabler
Einsteiger Seminar JavaScript
3
6.
JavaScript
Anwendung in Browsern
JavaScript wird client-seitig (zur Laufzeit vom Web-Browser ) interpretiert.
ÍÎ über CGI-nutzbare Sprachen (Perl, Java-Servlets, PHP) werden
serverseitig ausgeführt.
Dazu besitzen moderne Web-Browser entsprechende InterpreterSoftware), d.h. der Client muss nur das Ausgabeformat der Skripte
(HTML) oder Bildformate (gif / jpg) verstehen.
JavaScript:
-
-
-
-
hat ähnliche Syntax wie Java Î das hier erlernte fast direkt übernehmen.
ist ansatzweise objektorientiert
(Methodenaufrufe von Objekten; Vererbung fehlt)
ist ursprünglich von Netscape
JavaScripts-Programme werden wahlweise direkt in der HTML-Datei oder
in separaten Dateien notiert.
Helga Gabler
4
6.
JavaScript
JavaScript - Versionen
JavaScript - Versionen Í Î
JavaScript 1.0
JavaScript 1.1
JavaScript 1.2
JavaScript 1.3
JavaScript 1.4
JavaScript 1.5
Browser - Versionen
Netscape 2.0 / InternetExplorer 3.0
Netscape 4.0 / InternetExplorer 4.0(teilweise)
Netscape 6.0
Netscape 6.0
hierzu Testprogramm:
Helga Gabler
5
6.
JavaScript
JavaScript – Beispiel: was kann mein Browser?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
JavaScript: Browserfähigkeit testen
</title>
</head>
<BODY>
<SCRIPT TYPE="text/javascript">
document.write ("<BR><b>Browserinformationen: </b>");
document.write ("<BR>", navigator.appCodeName);
document.write ("<BR>", navigator.appName);
document.write ("<BR>", navigator.appVersion);
document.write ("<BR>", navigator.userAgent);
</SCRIPT>
<NOSCRIPT>
Sie brauchen JavaScript
</NOSCRIPT>
</body>
</html>
Helga Gabler
6
6.
JavaScript
Layout von Quellcode
Richtlinien der Java Code Convention:
Einrücken von Absätzen
Setzen von Klammern
Æ geschweifte Klammern am Ende der gleichen Zeile, die die
Klammer notwendig macht
Ablegen von Quellcode:
</script language=“javascript“>
<!- alert (“Hallo Welt!“);
// - ->
</script>
oder
<script src=“quadrat.js“ type=“text/javascript“>
</script>
Helga Gabler
7
6.
JavaScript
Sprachelemente: Variablen
Durch eine Variablen wird Speicherplatz für einen innerhalb des Programms
veränderbaren Wert reserviert. Um die Variable später referenzieren zu können,
haben sie einen Namen.
Für die Vergabe von Namen gelten folgende Regeln:
Namen müssen mit einem Buchstaben (Groß oder Klein) oder
Unterstrichzeichen (_) beginnen.
für weitere Zeichen sind erlaubt:Buchstaben, Ziffern, Unterstrich_);
(keine: Leerzeichen, deutsche Umlaute od. ß,...)
JS ist casesensitve, d.h. zwischen Groß-/Kleinschreibung wird
unterschieden (Bsp.: halloWelt, hallo_welt, hallo123 )
dürfen keine reservierten Wörtern (Bsp.: if, function, while) sein
Namen sollten maximal 32 Zeichen lang sein.
Jede Variablendeklaration wird mit einem Semikolon abgeschlossen
Helga Gabler
8
6.
JavaScript
Variablen: Wertzuweisung
Variablen brauchen in JS nicht definiert werden, um damit arbeiten zu können
Î nicht ratsam, weil:
1. kein sauberer Programmierstil
2. unterschiedl. Resultate mit unterschiedl. Browsern sind möglich
(in Zukunft evtl. Abbruch)
Es gibt numerische Variablen (Zahlen Î Rechenoperationen) und Variablen
für Zeichen bzw. Zeichenketten (Texte, Extrahieren einer Zeichenkette).
Mögliche Zuweisungen sind:
x = 42;
Zuweisung eines festen Werts (Zahl) (num. Variable)
x = “42“;
Zuweisung eines festen Werts (Text) (Zeichenketten)
x = 6*7;
Zuweisung der Lösung einer Berechnung
x = y;
Zuweisung der Lösung aus anderen Variablen
x = summe (6,7);
Zuweisung der Lösung aus einer Funktion
Helga Gabler
9
6.
JavaScript
Anweisungen
- steuern
den Programmfluss
- werden mit Semikolon “;“ beendet
(in JavaScript nicht zwingend, aber unbed. einhalten, da so einige
Fehlinterpretationen vermieden werden können, Æ Java)
Bsp.: x = 42;
Zuweisung eines Werts an eine Variable
if (x == 42) y = 1;
Überprüfung einer Bedingung
alert (“Hallo Welt“);
Aufruf einer Funktion
Anweisungsblöcke
- beginnen mit einer geschweifter Klammer-auf {
enden mit geschweifter Klammer-zu }
(ohne {} nur 1 Anweisúng)
Bsp.:
if (Zahl > 1000)
{
Zahl = 0;
alert (“Variable wurde zurückgesetzt“);
}
Helga Gabler
10
6.
JavaScript
Datentypen
Zahlen:
Ganzzahlen:
dezimal var a = 4.2e1;
Î 42
oktal
var b = 052;
Î 42
hexadeziaml
var c = 0x2A;
Î 42
Gleitkommazahlen
var a = 1000.4e0 Î 1000.4
Strings:
Stringkonstante = Kette von Zeichen in „“ oder ‚‘
var Zeichen = ‘1‘;
Î‘1‘
var Ergebnis = Zeichen + Zeichen
Î ‘11‘
Boolesche Werte
true / false
Objekte
kapseln Variablen und Funktionen in eine Struktur zusammen
Steuerzeichen und Zeichenketten
Helga Gabler
11
6.
JavaScript
Zeichenketten
Helga Gabler
Zeichen
Name
Wirkung
\b
backspace
\n
new line
je nach System wird eine neue Zeile an der
aktuellen Position oder am linken Rand
begonnen.
\r
carriage
return
je nach System wird an den linken Rand in der
aktuellen Position oder einer neuen Zeile
positioniert.
\f
form feed
ein Seitenvorschub für Drucker wird eingebaut
\t
tab
es wird bis zum nächsten Tabulator eingerückt
\“
quote
\‘
single quote
\\
backslash
links davon stehendes Zeichen wird gelöscht
steht für ein Anführungszeichen innerhalb von “...“
steht für Apostroph innerhalb von “...“
erzeugt das Zeichen \ selbst
12
6.
JavaScript
Operatoren
Operatoren sind Zeichen, die verwendet werden, um Verknüpfungen oder
Vergleiche zw. Variablen herzustellen.
eine Operation erzeugt immer einen Ergebniswert
eine Operation arbeitet mit einem oder mit zwei Î unäre / binäre Operatoren
Man unterscheidet;:
Vergleichsoperatoren
Berechnungsoperatoren
Konkatenationsoperatoren
logische Operatoren
Bitoperatoren
Zuweisungsoperator
Helga Gabler
Datentyp
Zahlen, Strings (Zeichenketten)
Zahlen
Strings (Zeichenketten)
boolesche Werte
Zahlen, boolesche Werte
alle
13
6.
JavaScript
Vergleichs-Operatoren
Helga Gabler
==
!=
<
>
<=
>=
===
!= =
gleicher Wert
ungleich
kleiner als
größer als
kleiner oder gleich
größer oder gleich
exakt gleicher Wert und Typ(ab JavaScript 1.2)
Wert oder Typ sind nicht gleich (ab JavaScript 1.2)
x = = 42;
x > 42;
x >= 42;
x != 42;
x = = = "42"
...
x gleich 42?
x größer 42?
x größer gleich 42
x ungleich 42
ist x gleich 42 und vom Typ string?
14
6.
JavaScript
Berechnungsoperatoren
Berechnungsoperatoren:
+
Addition
Subtraktion
*
Multiplikation
/
Division
%
Modulo-Operator
++
Inkrement
--
Helga Gabler
Dekrement
Bsp
2+2
5–1
3*6
27 9
7%4
x = 10
++x
x = 10
--x
Erg
4
4
18
3
3
11
9
15
6.
JavaScript
Anfüge- / Konkatenationsoperator +
Der Operator + zwischen zwei Strings bewirkt die Verkettung zu
einem einzigen String.
Er kann jedoch auch eine Typenumwandlung bewirken, wenn einer der beiden
Operanden eine Zahl ist. Mangels explizierter Typkonvertierung (JavaScript
verlangt keine Typzuweisung bei der Deklarierung) versucht JavaScript stets zu
erst eine Konvertierung in einen String durchzuführen und dann zu berechnen.
Die implizite Typumwandlung führt beim Programmieren oft zu Fehlern!
Anfügeoperator Wirkung
Ergebniswert
+
Aneinanderreihung
„Georg“ + „Schmidt“
var Zeichen = ‚1‘;
var Ergebnis = Zeichen + Zeichen
Î ‚1‘
Î ‚11‘
Helga Gabler
Beispiel
„Georg Schmidt“
16
6.
JavaScript
Logische Operatoren
Für komplexere Bedingungen bietet JavaScript die Operatoren && als
logisches "und", ! als logisches "nicht“ und || als logisches "oder".
Leider gibt es kein exklusives "oder".
&&
und
( beide Bed. müssen erfüllt sein)
||
inkl. oder
(nur eine Bed. muss erfüllt sein)
!
nicht
Beispiel:
x = = 3 || y = = 4
ist x gleich 3 oder y gleich 4?
x != 2 && y != 10
ist x ungleich 2 und y ungleich 10?
Sonderverknüpfungen:
! (A&&B)
! (A || B)
NAND
NOR
!A&&B || A&&!B
XOR
A&&B || !A&&!B
XNOR
Helga Gabler
NICHT-UND-Verknüpfung
nur falsch, wenn A und B wahr
NICHT-ODER -Verknüpfung „weder...noch“
nur wahr, wenn A und B falsch
exklusives ODER
„entweder ... oder ... “ (Antivalenz)
wahr, wenn nur A oder nur B falsch
exklusives NICHT-ODER „aus... folgt ...
wahr, wenn A und B übereinstimmen
17
6.
JavaScript
Bit-Operatoren
Die Bitoperatoren », «, &, | und ^ sind sehr kompliziert und
kaum gebräuchlich, daher werden sie hier nicht erklärt.
a=x&y
b=x|y
c=x^y
d = x >> y
e = x << y
Und-Bedingung in Bitmaske
Oder-Bedingung in Bitmaske
exkl. Oder-Bedingung in Bitmaske
verschiebt die Bitmaske um 1 Bit nach rechts
(füllt mit 0 auf)
verschiebt die Bitmaske um 1 Bit nach links
(füllt mit 0 auf)
Beispiel:
Dezimal: x = 25; y = 26
binär:
x = 0001 1001
y = 0001 1010
a=x &yÎ
a = 0001 1000
b=x|y Î
b = 0001 1011
c=x^y Î
c = 0000 0011
Helga Gabler
18
6.
JavaScript
Zuweisungsoperatoren (Kurzschreibweise)
Operator
=
+=
+=
‘Eidotter‘
-=
*=
/=
%=
&=
^=
|=
<< =
>> =
>>> =
Helga Gabler
Wirkung
Einfache Wertzuweisung
Addition und Zuweisung
Addition und Zuweisung
A=5
AÆ 5
A += 5 A Æ 10
‚Ei += ‚dotter‘
Subtraktion und Zuweisung
Multiplikation und Zuweisung
Division und Zuweisung
Modulo-Operation und Zuweisung
Bitweises „UND“und Zuweisung
Bitweises „Exklusiv-Oder“und Zuw.
Bitweises „ODER“ und Zuweisung
Bitweises „Linksverschieben“ und Zuw.
Bitweises „Rechtsverschieben“ und Zuw.
Null-Fill-Rechtsverschiebung und Zuw.
A -= 2
A *=2
A /= 2
A %= 3
A &= 3
A ^= 5
A != 5
A <<= 2
A >>= 2
A >>>=2
AÆ8
A Æ 16
AÆ8
AÆ2
AÆ2
AÆ4
AÆ5
A Æ 20
AÆ5
AÆ1
19
6.
JavaScript
andere Operatoren
einfacher Bedingungsoperator
Operator Wirkung
Beispiel
Ergebniswert
?:
Bedingung
true ? „yes“ : „no“
„yes
false ? „yes“ : „no“
„no“
Typenkonvertierung und typeof-Operator:
Helga Gabler
20
6.
JavaScript
Rangfolge der Operatoren
Rangstufe
Oper.-Zeichen
(1 höchste Prior.)
1
() []
2
!
3
++ -4
5
~
6
*
7
/
8
%
9
+
10
+
11
12
<<
13
>>
14
>>
Oper.-Name
Oper.-Typ
Klammer
Gruppierung
Nicht
Log. Oper.
Inkr. / Dekr
Berechn.Oper.
Negation
Berechn.Oper
Nicht
Bit-Oper.
Multipl.
Berechn.Oper.
Division
Berechn.Oper.
Modula-Operator
Berechn.Oper.
Aneinanderreihung Konkaten.Oper.
Addition
Berechn.Oper.
Subtraktion
Berechn.Oper.
Linksversch.
Bit-Oper.
Rechtsversch
Bit-Oper.
Null-fill-Rechtsversch Bit-Oper.
mit Klammern können Sie die Rangfolge bei den Operatoren beeinflussen
Helga Gabler
21
6.
JavaScript
Bedingte Anweisung IF
Die if-Schleife ist die einfachste Form der Bedingung. JavaScript kennt kein
then, jedoch ist else möglich. Ihre Syntax lautet
if (Bedingung)
{
Anweisung1 oder Anweisungsblock1
}
else
{
Anweisung2 oder Anweisungsblock2
}
auch:
verschachtelte Bedingungen,
mehrstufige Bedingungen
if { … if {… if {… }}}
if { … else if { … else { …}}}
möglich
Beispiel:
if (x > y) alert (“x ist groesser als y.“); else alert (“x ist nicht groesser als
y.“); PasswortEingabe.html
Helga Gabler
22
6.
JavaScript
if Schleife – Beispiel 1
<html>
<head>
<title>Beispiel zur if-Schleife</title>
</head>
<body >
<p>
<script language="javascript">
<!-var a = 2;
if (a == 2)
{
alert(a);
}
//-->
</script>
</p>
</body>
</html>
Helga Gabler
23
6.
JavaScript
Entweder-Oder-Abfrage
Beispiel 1:
„Zeitausgabe mit P.M. oder A.M.“
Time = ‚2‘ + (Stunden > 12) ? ‚P.M.‘ : ‚A.M.‘;
Beispiel2: ges: „größte Zahl von x,y,z“
(ternärer /dreifach Operator)
var x,y,z;
document.write ("<BR>Die größte Zahl lautet ",
(x>y) ? ((z>x) ? z:x) : ((z>y) ? z:y)
(x>y ) ?
(x>y)
( (z>x) ? z:x) :
ja
nein
(z>x)
( (z>y) ? z:y) )
ja
z
nein
x
(z>y)
ja
z
nein
y
Î GrößteVon3Zahlen.html
Helga Gabler
24
6.
JavaScript
Entscheidungen
Sind die folgenden Aussagen wahr oder falsch?
a)
var a=5, b=18
if (a>0 && b!=18)
1
b)
&&
0
var zahl=10, wert=100
if (zahl != 0 || zahl > wert || wert-zahl == 90)
0
c)
||
0
||
||
1
1
var x=1.0, y=5.7
if (x >= .9 && y <= 5.8)
1
d)
0
&&
1
var n1 = 1, n2 = 17
if (n1 > 0 && n2 > 0 ||
1
Helga Gabler
&&
1
1
||
||
n1 > n2 &&
0
&&
0
n2 != 17)
0
25
6.
JavaScript
switch/case
Auch neu in der Version 1.2 ist die switch/case-Anweisung. Mit ihr lassen sich
komplizierte Konstrukte wie
if
else
if
else
deutlich verkürzen. Ihre Syntax lautet:
switch(variable)
{
case Möglichkeit1: Anweisung1;break;
case Möglichkeit2: Anweisung2;break;
.
.
default: default-Anweisung;break;
}
Helga Gabler
26
6.
JavaScript
switch/case –Beispiel 2
<!-var i = 2;
switch (i)
{
case 1: alert('erste Möglichkeit');break;
case 2: alert('zweite Möglichkeit');break;
case 3: alert('dritte Möglichkeit');break;
default:alert('Nicht passend');break;
}
//-->
</script>
Helga Gabler
27
6.
JavaScript
while und do-while Schleifen
Die while-Schleife sieht beispielhaft so aus:
while (x < 10) { x++; a = b*x; }
Bedingung steht wieder in ( ).
Wenn sie erfüllt ist wird die Schleife durchlaufen
Seit der Version 1.2 unterstützt JavaScript nun auch die do/while-Schleife
(vorher nur die while-Schleife). Auch mit ihr lassen sich Aktionen wiederholen
bis ein bestimmter Ausdruck wahr wird. Ihre Syntax lautet:
do
{
Anweisung oder Anweisungsblock
}
while (Bedingung)
Helga Gabler
28
6.
JavaScript
do / while Schleifen – Beispiel 3
<html>
<head> <title>Beispiel zur do/while-Schleife</title>
</head>
<body>
<p>
<!-var i = 0;
do
{
document.write(i);
document.write('<br>');
}
while (++i <= 2);
//-->
</script>
</p>
</body>
</html>
Helga Gabler
29
6.
JavaScript
for Schleife
Mit der for-Schleife lassen sich Anweisungen wiederholen bis ein bestimmter
Ausdruck wahr wird. Sie eignet sich auch sehr gut, um Arrays zu durchlaufen.
Die Syntax lautet:
for (Initialisierung; Test; Aktualisierung)
{
Anweisung oder Anweisungsblock
}
Helga Gabler
30
6.
JavaScript
for Schleife Beispiel 4
<html>
<head>
<title>Beispiel zur for-Schleife</title>
</head>
<body >
<p>
<script language=“JavaScript">
<!-for (var i = 0; i <= 2; i++)
{
document.write('<p>');
document.write(i);
document.write('<br>');
}
//-->
</script>
</p>
</body>
Helga Gabler
31
6.
JavaScript
Break- und Continue-Anweisungen
Möglichkeit um einen Schleigfendurchlauf abzubrechen
Break:
continue:
Beispiel:
Helga Gabler
stoppt den Schleifendurchlauf;
beginnt mit der Anweisung, die der abgebrochenen
Schleife unmittelbar folgt
beendet den aktuellen Schleifendurchlauf,
beendet aber die Schleife nicht, sondern fährt mit
dem nächsten Schleifendurchlauf fort.
Vorsicht: Gefahr von Endlosschleife
JavaScript/JS-BreakContinue.html
32
6.
JavaScript
Funktionen
Funktionen entsprechen Prozeduren aus anderen Sprachen
zeigen am deutlichsten den Unterschied zwischen Java und JavaScript.
Sind Anweisungsblöcke, die separat aufgerufen werden können.
Funktionen werden durch
Funktionsname ( ) { Anweisungsblock }
definiert und durch Funktionsname (Parameter) aufgerufen.
Dieser Aufruf kann
aus einem Skript, ( Î Beispiel)
aus einer anderen Funktion (Î Beispiel)
aus einem Event-Handler ( ÎBeispiel)
aus einem HTML-Tag (ÎBeispiel)
heraus erfolgen.
Helga Gabler
33
6.
JavaScript
Funktionen Definition
Bsp.:
function summieren ( )
{
...
}
• Funktion muss einen Namen haben (s.o.)
• Namen schreibt man vor Anweisungsblock, der die Funktion
implementiert
• reserviertes Wort ”function” wird vor den Namen gestellt (für
Interpreter)
• nach dem Namen muss (!) ein rundes Klammerpaar gesetzt werden
• evtl. Parameterkennungen werden in dem Klammerpaar eingebaut
• nach den runden Klammern kommt der Anweisungsblock:
beginnt mit geschweifter Klammer-auf {
endet mit geschweifter Klammer-zu }
Helga Gabler
34
6.
JavaScript
Funktionen mit Parameter
• Werte mit denen ein Funktion rechnen soll werden über
Parameterliste übergeben
• Definition der Parameter:
in den runden Klammern bei der Funktions Deklaration
• Variablen, die innerhalb einer Funktion deklariert werden
sind lokale Variable
Î existieren nur innerhalb dieser Funktion (s.o.)
Helga Gabler
35
6.
JavaScript
Funktionen - Aufruf mit Rückgabewerte
eine Funktion kann einen Rückgabewert liefern (=Zahl oder Text):
return rueckgabewert;
Bsp.:
function summieren (summand1, summand2;) {
rueckgabewert = summand1 + summand2;
return rueckgabewert;
}
Aufruf der Funktion: meineZahl = summieren (6,7)
(der Variablen meineZahl wird der Wert von rueckgabewert zugewiesen)
Helga Gabler
36
6.
JavaScript
Bsp.5a: Funktion mit Parameter in einem Script
<html> <head>
<title>Beispiel zum Funktionsaufruf aus einem Skript
</title>
</head>
<body> <p>
<!-function Quadrat(zahl)
{
alert(zahl*zahl);
}
Quadrat(3);
//-->
</script>
</p>
</body>
</html>
Helga Gabler
37
6.
JavaScript
Bsp.5b: Fkt. mit Parameter und Rückgabewert in einem Script
<html>
<head> <title>Funktionen</title>
</head>
<body> <p>
<!-function Produkt (x,y)
{
var Ergebnis = x*y;
return Ergebnis;
}
var MeinProdukt = Produkt (3,4);
document.write (MeinProdukt);
//-->
</script>
</p>
</body>
</html>
Helga Gabler
38
6.
JavaScript
Bsp.6: Funktionsaufruf in einer Funktion
<html> <head>
<title>Beispiel zum Funktionsaufruf aus einer anderen Funktion
</title> </head>
<body>
<!-function Schreibe(irgendwas)
{
document.write('<p>');
document.write(irgendwas);
}
function Quadrat(zahl)
{
var quad = (zahl*zahl);
Schreibe(quad);
}
Quadrat(4);
//-->
</script>
</body> </html>
Helga Gabler
39
6.
JavaScript
Bsp.7: Funktionsaufruf über Event Handler
<html>
<head> <title>Beispiel zum Funktionsaufruf durch einen Event-Handler</title>
<script language="JavaScript">
<!-function gehauf (inhalt)
{
alert(inhalt);
}
//-->
</script>
<noscript></noscript>
</head>
<body>
<h3> <a href="funktionen3.html" onmouseover="gehauf('beliebiger Text');">
Fahren Sie über den Link!</a> </h3>
</body>
</html>
Helga Gabler
40
6.
JavaScript
Bsp.8: Funktionsaufruf über HTML-Tag
<html>
<head> <title>Beispiel zum Funktionsaufruf aus einem Tag</title>
</head>
<body>
<script language="JavaScript">
<!-function Meldedich(text)
{
alert(text);
}
//-->
</script>
<h3>
<a href="javascript:Meldedich('Hallo');">Klicken Sie bitte hier!</a> </h3>
</body>
</html>
Helga Gabler
41
6.
JavaScript
Regeln für selbstvergebenen Namen - Konventionen
Variablennamen sollten klein geschrieben werden
sollten ausdrücken, welche Bedeutung eine Variable / Funktion hat,
wozu sie verwendet wird
Name aus mehren Worten = ein Wort ohne Unterstrich z.B.:
summeJahreswerte, nameKunde,...
Namen aus einem Buchstaben haben immer die gleiche Bedeutung:
i,j,k,l, usw. z.B. für Zählvariablen
x,y,z, usw. für Koordinaten
r, g, b für Rot- Grün und Blauanteil von Farben
Helga Gabler
42
6.
JavaScript
Kommentare
Einzeiliger Kommentar beginnt mit
Mehrzeiliger Kommentar beginnt mit
endet mit
//
/*
*/
Wichtig um Informationen für Entwickler abzulegen
•
welche Aufgabe hat die Funktion oder
•
Bedingung unter der die Funktion arbeitet
Beachte:
Keine sensitive Informationen (Passwörter), da im Quelltext für jeden
sichtbar
Helga Gabler
43
6.
JavaScript
lokale / globale Variablen
Es gibt globale Variablen und lokale Variablen.
• Globale Variablen sind im gesamten Dokument gültig und stehen
jederzeit zur Verfügung. Auf sie kann auch in einer Funktion
zugegriffen werden.
• Lokale Variable werden innerhalb einer Funktion deklariert.
Î Ihr Gültigkeitsbereich ist auf die Funktion beschränkt
Î außerhalb der Funktion kann nicht auf sie zugegriffen werden.
Parameter, die einer Funktion übergegeben werden, werden ebenfalls als
lokale Variablen behandelt
Helga Gabler
44
6.
JavaScript
Variablen: Definitionen, Initialisierung, Zuweisung
Variablen können gleich bei der Definition einen Wert zugewiesen
bekommen = Initialisierung
Es können mehrere Variablen auf einmal (durch Kommata getrennt) definiert
werden
var y;
var y wird deklariert (vereinbart)
x = 25;
var x wird deklariert und initialisiert
var y=234; var y bekommt einen Wert zugewiesen
(Zuweisung kann zu jeder Zeit erfolgen, egal ob die Variable
bereits initialisiert ist, oder nicht)
var y=“Jetzt kommt Text“;
Einer numerischen Variablen kann auch später eine Zeichenkette
zugewiesen
werden
Inhalt einer Variable ist immer von einem best. Typ, aber die Variable
kann bel. oft den Typ wechseln
Î Typenwechsel sind kein guter Programmierstil!
Helga Gabler
45
6.
JavaScript
lokale / globale Variablen - Beispiel
var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);
function SchreibeQuadrate() {
var SinnDesLebens = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
for(i=1; i <= SinnDesLebens; ++i) {
x = i * i;
document.write(Satzteil + i + " ist " + x +
"<br>");
}
// Ende for
}
// Ende function SchreibeQuadrat
lokale Variablen hier: SinnDesLebens, i, x und Satzteil
globale Variablen hier: Hinweis
Helga Gabler
46
6.
JavaScript
eingebaute Funktionen
folgende Funktionen sind in JS bereits vorhanden. Die Funktionsnamen
sind reserviert.
eval (Zeichenkette)
alert (x = eval („3 + 4 * 6“));
Î27
escape (Zeichenkette)
liefert den hex. Wert der Steuerzeichen
(mit ASCII-Wert von 0 bis 31
unescape (Zeichenkette)
führt das Gegenteil aus
IsNaN (Wert)
is not a number = ist keine Zahl (zum testen)
Î true /false
IsFinite (Wert)
testet, ob der übergebene Wert innerhalb des
Zahlenbereichs liegt, den JS verarbeiten kann
Î true / false
parseFloat (Zeichenkette)
wandelt Zeichenkette in eine Zahl um
(NaN, wenn nicht möglich)
parseInt (Zeichenkette)
wandelt Zeichenkette in eine ganze Zahl um
(Bsp: c = parseInt(A) + parseFloat(b);
Helga Gabler
47
6.
JavaScript
Objekte
Objekte bilden die grundlegende Datenstruktur in der OOP.
Es sind Programmmodule, die aus Methoden und Daten bestehen
können. Die Daten dürfen nie direkt manipuliert werden, sondern
müssen immer über Methoden angesprochen werden.
Daten, z.B. Variablen, von JavaScript können auch direkt
angesprochen werden und verletzen so das Prinzip der
"Datenkapselung".
Zusätzlich benutzt JavaScript sog. Unterobjekte, die in einer
baumähnlichen Stuktur aufrufbar sind.
Helga Gabler
48
6.
JavaScript
Objekte
Was ist ein Objekt?
Objekt ist ein Verbund aus Informationen über Daten und
Informationen – oder :
Objekt besitzt
- Eigenschaften, die durch Variablen gekennzeichnet sind
- Funktionen (also Methoden), mit denen das Objekt
(oder seine Eigenschaften) manipuliert werden kann
Helga Gabler
49
6.
JavaScript
Methoden
Methoden:
erlauben den Zugriff/ Manipulation auf die Daten eines Objektes
( "Datenkapselung“)
-
werden durch den Punktoperator aufgerufen
-
enden immer mit Klammern.
-
In den Klammern können Parameter übergeben werden
Beispiel:
Helga Gabler
document.write():
document.write('Dieser Text ist ein String-Parameter');
50
6.
JavaScript
Eigenschaften
Eigenschaften
sind Daten bzw. Variablen, die einem bestimmten Objekt anhängen.
speichern z.B. Namen / Größe / Farbe eines Objekts.
können boolesche Werte, Strings (URLs), enthalten.
können innerhalb jederzeit ausgelesen, und in vielen Fällen auch
geändert werden
(Î Zuweisung eines neuen, gültigen URL-Adresse an ein im BrowserFenster angezeigtes Dokument. Î der WWW-Browser springt
dadurch zu der zugewiesenen URL-Adresse ausführt, entspr. Klick auf
, einen entsprechenden Verweis)
selbstdefiniertes Objekt „Mensch“
Î mögliche Eigenschaften
„ Name, Alter, Geschlecht und Muttersprache
(Î selfhtml: JavaScript ÆObjekte, Eigenschaften und Methoden)
vordefinierte Objekt:
„Math„ :
Î Eigenschaft "PI„
Î Math.PI
window
Î Eigenschaft „innerHeight“ Îwindow.innerHeight
Helga Gabler
51
6.
JavaScript
Eigenschaften – Beispiel „Schiff“
Eigenschaften können in jeder Instanz unterschiedliche Werte haben. Instanzen sind
„Vertreter“ einer Objektart.
Beispiel: SCHIFF
Schiff „Anna II“ = Vertreter der Schiffe allgemein.
1. Objektdefinition für Schiffe:
Eigenschaften für alle Instanzen sind: „Name“ und „Farbe“:
Konstruktor-Funktion legt diese 2 Eigenschaften für alle
Schiff
Instanzen fest.
function Schiff (NM, FB)
{
Name
Farbe
this.Name = NM;
this.Farbe = FB;
}
Schlüsselwort this definiert die Eigenschaft Name und Farbe
2. Initialisierung von Objekten: var annaII = new Schiff (‚Anna II‘, ‚rot‘);
Helga Gabler
52
6.
JavaScript
Eigenschaften - Beispiel „Schiff“
Erweiterung des Beispiels: Schiff: „Schiff bekommt Kapitän“
Person
Î Objektdefinition von Personen:
function Person (NM, VN) {
this.Name = NM;
Name Vorname
this.Vorname = VN;
}
Instanziierung von Kapitän über Konstruktor:
var kirk = new Person (“Kirk“, “James“);
Schiffobjekt wird um Kapitän erweitert + Schiff wird instanziiert:
function Schiff (NM, FB, KP) {
this.Name = NM;
enterprise
this.Farbe = FB;
this.Kapitaen = KP;
}
Kapitaen
weiss
var enterprise = new Schiff (“Enterprise“, “weiss“, kirk);
Enterprise
Helga Gabler
53
6.
JavaScript
Methoden – Beispiel „Schiff“
Methoden werden den Objekten als Eigenschaften zugewiesen.
function untergehen (Meter) {
document.write (“Das Schiff soll „ + Meter + “ sinken!“);
}
document.write (untergehen);
Zugriff auf Eigenschaft des Objekts: mit this
(Referenz auf das aktuelle Objekt, wenn Funktion als Methode in
Objektdefinition deklariert wird!)
function untergehen (Meter)
{
this.Tiefe -= Meter;
document.write (this.Name + “ ist “ + Meter + “ Meter auf “ +
this.Tiefe + “ Meter gesunken!“);
}
Beispiel 9: Titanic.html
Beispiel 10: Halloween.html
Helga Gabler
54
6.
JavaScript
Methoden – Beispiel „Halloween“
<HTML>
<HEAD>
<TITLE> Objekte </title>
<SCRIPT TYPE="text/javascript"
<!—
function Halloweengast (Name, Haarfarbe, Augenfarbe)
{
this.Name = Name;
this.Haarfarbe = Haarfarbe;
this.Augenfarbe = Augenfarbe;
this.KleidetSich = KleidetSich;
}
function KleidetSich (Tag)
{
document.write ("Am " + Tag + " hatte " + this.Name + " " +
this.Haarfarbe + "es Haar und " +
this.Augenfarbe + "e Augen.");
}
function Halloween()
{
Tag = "31_Okt_2000";
Hans = new Halloweengast ("Hans", "gruen","rot");
// Hans.Haarfarbe = "blau";
Hans.KleidetSich (Tag);
}
// -->
</SCRIPT>
</head>
<BODY>
<SCRIPT TYPE="text/javascript">
<!-Halloween ();
//-->
</SCRIPT>
Helga Gabler
</body> </html>
55
6.
JavaScript
Vordefinierte Objekte
in JS eingebaute Objekte, die häufig benötigte Funktionen als Methoden
beinhalten:

mathem. Funktionen
Methoden zur Berechnung/Verwendung von Uhrzeiten/Kalendertagen
Abspeicherung von Variablenlisten
Satz von Funktionen zur Zeichenkettenverarbeitung
seit Version 1.2: Objekte Screen (Kapselung von Eigenschaften des
Bildschirms des Benutzers)
seit Version 1.2: Objekt RegExp. Konzept der regulären Ausdrücke
Helga Gabler
56
6.
JavaScript
Vordefinierte Objekte
Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit
objektgebundenen Funktionen (Methoden).
JavaScript = Erweiterung von HTML , wegen den vordefinierten Objekten
Die JavaScript-Objekte sind in einer Hierarchie geordnet:
Beispiel:
window
(Fenster haben Eigenschaften wie einen Titel, eine Größe usw. )
document
(Das im Fenster angezeigte Dokument, i.d.R. HTML-Datei)
forms, ...
(Inhalt einer HTML-Datei in diesem Fenster, i.d.R. HTML-Tags
z.B. Formulare, Verweise, Grafikreferenzen )
elements
Helga Gabler
(Inhalte dieser HTML-Tags, z.B. Eingabefeldern, Auswahllisten
oder Buttons zum Absenden bzw. Abbrechen)
57
6.
JavaScript
hierarchisches Objekt-Modell
Neben den hierarchisch geordneten JavaScript-Objekten
gibt es auch solche, die nicht in die Hierarchie passen.
Das sind zum Beispiel Objekte für
Datums- und Zeitrechnung
Date
mathematische Aufgaben
math
Zeichenkettenverarbeitung
string
Ketten von Variablen
Array
Ja/nein-Werte
Boolean
JavaScript-Funktionen
Function
Browser-Informationen
navigator
MimeType-Informationen
mimeTypes
vorhandene Plugins
plugins
numerische Werte
Number
reguläre Ausdrücke
RegExp
Bildschirm-Informationen
Screen
ÎJavaScript Objekt-Referenz von Selfhtml:
ÎHierarchie.pdf
Helga Gabler
58
6.
JavaScript
Zeichenkettenverarbeitung: Vordefiniertes Objekt „string“
Bsp:
Eigenschaft length
(selfhtml:)
Eingabe = window.prompt ("Irgendetwas eingeben", "");
alert ("Eingegebene Zeichen: " + Eingabe.length);
Die Eigenschaften und Methoden des Objektes string können auf alle
Zeichenketten angewendet werden. So können in einer Zeichenkette z.B.
alle darin enthaltenen Kleinbuchstaben in Großbuchstaben umgewandelt,
oder HTML-Formatierungen auf die Zeichenkette anwenden.
Helga Gabler
59
6.
JavaScript
Objekte string – Beispiel „zitat“
Beispiel:
Variable zitat
mit der Zeichenkette
„Sein oder nicht sein ...“
Helga Gabler
60
6.
JavaScript
numerische Werte: Vordefiniertes Objekt „number“
Zugriff auf Eigenschaften numerischer Werte. So können Sie ermitteln, ob
ein Wert eine gültige Zahl ist, oder welches die maximale positive oder
negative Zahl ist, die in einer numerischen Variablen gespeichert werden
kann.
Beispiel:
groessteZahl = Number.MAX_VALUE;
Helga Gabler
61
6.
JavaScript
Objekt number – Eigenschaften und Methoden
Helga Gabler
62
6.
JavaScript
Reguläre Ausdrücke - Objekt RegExp
Reguläre Ausdrücke dienen dazu, Suchausdrücke zu formulieren, um in
Zeichenketten danach zu suchen und um gefundene Stellen durch andere
zu ersetzen. (Î selfhtml)
Reg. Expr. = Werkzeug um Strings zu verarbeiten
Verendung, Sie können überprüfen ob:
Eingabe einer E-Mail-Adresse in einem Formular gültig sein kann
eine Telefonnummer die korrekte Formatierung hat
...
Instanzen aus regulären Ausdrücken erzeugen:
var re = /pipapo/;
Var re wird reg. Ausdruck pipapo zugewiesen
var re = /pipapo/gi;
g : global (nach dem ersten Treffer weitersuchen)
i : Suche ohne Rücksicht auf Groß-/Kleinschreibung
var re = /\bpipapo\b/; \b: Wortgrenze (Metazeichen)
Suche nach den Zeichen . [ ] * ? { } ( ) ^ $ mit \
var re = /\D:\\Daten\\Grafiken\\Apfel\.GIF/i;
Æ findet den Pfad:
G:\DATEN\Grafiken\apfel.gif
Helga Gabler
63
6.
JavaScript
Interpretierbare Metazeichen – Tabelle1
Helga Gabler
64
6.
JavaScript
Interpretierbare Metazeichen – Tabelle2
Helga Gabler
65
6.
JavaScript
Objekt RegExp - Methoden
Methoden
compile („\bpipapo\b“, „gi“);
exec („pipapo“);
anwenden
test („pipapo“);
Suchmuster in das Objekt kompilieren
reg. Ausdruck auf Zeichenkette (hier:pipapo)
Î „null“, wenn Suchmuster nicht gefunden
sonst: gefundene Stelle in Eigenschaft „index“
OriginalString in Eigenschaft „input“
Î true, wenn Treffer gefunden (=>e-mailtest)
Eigenschaften eine Instanz des reg.Ausdrucks
global
true / false
ignoreCase
true / false
lastIndex
ab welcher Stelle soll die Suche beginnen (Beginn =
0)
source
Suchmuster als string (ohne beide Schrägstriche)
RegExp-MethodeTest.html
Helga Gabler
66
6.
JavaScript
Vordefiniertes Objekt Array
Das Objekt Array ist als "Container" für Ketten gleichartiger Variablen
gedacht. In der Programmierersprache spricht man auch von einem
"Vektor". Wenn Sie beispielsweise die 16 Grundfarben speichern wollen,
brauchen Sie keine 16 Variablen, sondern ein Array-Objekt, in dem Sie 16
gleichartige Werte (im Beispiel: Farbwerte) speichern können.
Objektname = new Array();
Î Objektinstanz von Array mit dem (selbst vergebener Namen)
Objektnamen
Instanz von Objekt Array wird gebildet mit
= new Array
new =reserviertes Wort
Array = Objektfunktion
Helga Gabler
67
6.
JavaScript
Objekt Array – Instanzen bilden
Anzahl der Elemente im Variablenvektor unklar:Î
Objektname = new Array();
MeineFrauen = new Array();
Anzahl der Elemente im Variablenvektor bekannt:
Objektname = new Array(Zahl);
MeineFrauen = new Array(100);
Definition und Initialisierung des Vektors
Objektname = new Array(Element0, Element1, ..., element_n);
MeineFrauen = new Array("Anita","Bettina","Christa","Doris");
Helga Gabler
68
6.
JavaScript
Objekt Array – Beispiel „obstNamen“
var meineVarliste = new Array();
var obstNamen = new Array(95);
Definition
Länge des Arrays wird definiert
Beispiel: Abspeichern von 5 Obstsorten:
obstNamen[0] = “Apfel”;
obstNamen[1] = “Birne”;
obstNamen[2] = “Kirsche”;
obstNamen[3] = “Pflaume”;
obstNamen[4] = “Orange”;
oder:
var obsNamen = new Array
(“Apfel”,”Birne”,”Kirsche”,”Pflaume”,”Orange”);
Helga Gabler
69
6.
JavaScript
Objekt Array - Programmbeispiele
Array:
Der Index beginnt in JavaScript bei 0
Initialisierung erfolgt über Index (in eckiger Klammer)
Eigenschaft length enthält die Größe des Feldes
ein neues Array wird mit dem Operator new erzeugt
Beispiele hierzu:
Helga Gabler
arrays1.html
arrays2.html
arrays3.html
ObjektArray-MethodeSort.html
Navigationsleiste.html
70
6.
JavaScript
Objekt Date
Systemzeit über Date-Objekt:
Instanzen von Date:
Î aktuelles Datum
Î können für Kalendertage und Uhrzeiten erzeugt werden
JavaScript intern:
nur Uhrzeiten und Kalendertage
nach dem 1.1.1970 um 0:00 Uhr
Î alle Methoden beziehen sich auf den Zeitpunkt,
der seitdem vergangen ist.
Helga Gabler
71
6.
JavaScript
Objekt Date: Zeitangaben abfragen und setzen
var Jetzt = new Date();
Î setzt Zeit auf Systemzeit
zur Zeit der Ausführung
var MeineErsteUhrzeit = new Date (“Monat Tag Jahr
Stunde:Minute:Sekunden”);
( Datum als String in engl. Zeitnotation, Format genau einhalten!)
var MeineZweiteUhrzeit = new Date (Jahr, Monat Tag);
Zahlenwerte für Jahr,Monat und Tag, hier =0, da Werte fehlen
var MeineDritteUhrzeit = new Date (Jahr, Monat,Tag,Stunde,
Minute,Sekunden”);
aktuelle Systemuhrzeit wird gesetzt (zusätzlich)
Helga Gabler
72
6.
JavaScript
navigator-Objekt: Eigenschaften
navigator-Objekt beschreibt Eigenschaften des Browsers
Beispiel: Navigator.html
Helga Gabler
73
6.
JavaScript
window-Objekt
window-Objekt steht an der Spitze der Objekthierarchie
(~ "Container" für alles, was im Anzeigefenster des WWW-Browsers
angezeigt werden kann)
ÎDokumentfenster abfragen und kontrollieren.
Î neue Fenster definieren. (dabei sind Fenstereigenschaften frei bestimmbar)
reservierten Fensternamen window oder self :
Î ansprechen des nicht selbst erzeugten, vorhandenen Hauptanzeigefensters
des WWW-Browsers.
Î alle Eigenschaften und Methoden des window-Objekts lassen sich auf
window und self anwenden.
Î window / self können weggelassen werden
self
Helga Gabler
Referenz auf sich selbst
Bsp.: open.html
74
6.
JavaScript
Unterobjekte des window-Objekts
document
Inhalt, der im Browser-Fenster angezeigt wird:
z.B. Links,Anker,Bilder,Formulare)
event
Einzelinformationen zu Anwenderereignissen wie Mausklicks
oder Tasteneingaben ermitteln und weiterverarbeiten
z.B genaue Position ermitteln, wo ein Mausklick erfolgte,
oder bei einem Tastendruck die gedrückte Taste abfragen.
history
Zugriff auf die besuchten WWW-Seiten des Anwenders
massgeblich History-Liste
location
Zugriff auf die vollständige URL-Adresse der aktuell
angezeigten WWW-Seite. URL-Adresse oder Teile davon
können zur Weiterverarbeitung abgefragt und geändert werden.
Beim
ändern führt der WWW-Browser einen Sprung zu einer neuen
URL-Adresse aus, genau so wie bei einem Verweis.
Helga Gabler
75
6.
JavaScript
wichtige Methoden des window-Objekts
alert(Text)
blur ()
clearTimeout (TimeoutID)
close ()
confirm(Text)
öffnet ein Dialogfenster
Browserfenster in Hintergrund
hält laufende Stoppuhr an
schließt das Browserfenster
öffnet ein Dialogfenster mit Text als
Meldung, und Buttons “OK” und
“Abbrechen”
focus()
holt Browserfenster in Vordergrund
open(“URL”, “Name”, “Optionen”)
öffnet neues Browserfenster
WindowOpen.html,
EingangsScreen.html
prompt (“Text”,”Vordefinition”)
öffnet Dialogfenster mit Text und
Aufforderung zur Eingabe
setTimeout(“JavaScript-Ausdruck”,Millisekunden)
setzt einen Countdown, führt nach den an=
angebenen Millisekunden den Ausdruck aus
Helga Gabler
76
6.
JavaScript
wichtige Eigenschaften window-Objekts
defaultStatus
voreingestellter Text in der Statuszeile des Browsers
opener
Referenz auf das Fenster, das dieses Fenster geöffnet hat
self
status
derzeit dargestellter Text in der Statuszeile des Browsers
locationbar
URL-Adreßzeile
scrollbars
Scroll-Leisten
toolbar
Werkzeugleiste
Helga Gabler
Bsp.: open.html
77
6.
JavaScript
Frames -Objekt
Zugriff auf Frames, also auf ein Frame-Set und seine Frame-Fenster,
die in einer HTML-Datei definiert sind (Jedes Frame-Fenster stellt aus Sicht
des Browsers ein eigenes Fenster dar)
Î Variante des window-Objekts
Rahmen eines Framesets finden sich im frames-Array wieder.
frames-Array = Eigenschaft des windows-Objekts
enthält alle frames-Objekte, in der Reihenfolge, wie sie
im Frameste angelegt wurden
Beispiel:
Framesets.html
Unterobjekte
document
event
history
location
Helga Gabler
78
6.
JavaScript
Frames -Objekt
Ansprechen von Frames:
durch Namen (name=) oder frames-Array
Îwindow.frames[“anzeige”] = window.frames[2]
(aus Beispiel)
Eigenschaften von Objekt frames:
parent
self
top
Helga Gabler
Referenz auf Frame, der in der Hierarchie eine Stufe höher steht
Referenz auf den hierarchisch höchsten Frame
(Browser-Fenster, indem alle Frames dargestellt werden)
79
6.
JavaScript
location -Objekt
über die Eigenschaft des location-Objekts lassen sich Informationen über den
URL des geladenen Dokuments abrufen:
window.location.protocol
window.location.hostname
window.location.port
window.location.pathname
window.location.search
window.location.hash
window.location.href
window.location.host
Helga Gabler
“http:”
“www.beispiel-site.de”
“80” (TCP/IP-Portnr. des Servers
Pfadangabe (alles was zw. Port und “#” steht
String, der Parameter für CGI-Programme
enthält “?suche=test”
enthält Anker, falls im URL vorhanden
“#Anker”
enthält kompletten URL
entspricht hostname:port
80
6.
JavaScript
location –Objekt - Beispiele
if (top.frames.length > 0) top.location.href = self.location;
Îverhindert, daß eine Frame in fremde Frames eingesperrt wird.
Beispiel: Suchmaschinen findet einen Link auf eine HTML-Seite, die nur in einem
Frameset Sinn macht (z.B. Navigationsleiste).
if ( (top.frames.length == 0) || parent.name != “Hauptfenster”))
top.location.href = “frame.html”;
Lösung: beim Aufruf der Seite wird das komplette Frameset geladen.
Helga Gabler
81
6.
JavaScript
history -Objekt
history-Objekt verwaltet eine Liste der zuletzt besuchten URLs wie einen
Stapel. (Vor, zurück.Taste)
Methoden:
window.history.back()
window.history.forward()
Î Browser soll vorheriges Dokument laden
Î lenkt den Browser wieder vorwärts
(nach einem back()
window.history.go(Schritte) Î lädt den URL, der in der History
Schritte (- / +) weit entfernt liegt
Eigenschaft
length
Helga Gabler
Anzahl der Einträge in der History des Browsers
82
6.
JavaScript
document –Objekt: Eigenschaften
document-Objekt beschreibt mit seinen Eigenschaften:
- die Attribute des body-Tags
- den Titel des Dokuments
- die Elemente des geladenen HTML-Dokuments
Eigenschaften von document-Objekt:
bgColor
Hintergrundfarbe (kann nach dem Laden der
Webseite verändert werden)
fgColor
Textfarbe, kann nicht mehr verändert werden
linkColor Farbe eines noch nicht besuchten Links im Text
alinkColor
Farbe eines “aktiven Links” (bereits geklickt, aber
dessen URL noch nicht geladen ist)
vlinkColor
Farbe eines zuvor schon besuchten Links im Text
lastModified
Datum, an dem das Dokument zuletzt verändert wurde
(kann nicht verändert werden.)
Helga Gabler
83
6.
JavaScript
document –Objekt Eigenschaften/Methoden
Eigenschaften von document-Objekt:
Methoden von window.document
Helga Gabler
84
6.
JavaScript
image –Objekt
Zugriff auf alle Grafiken, die in einer HTML-Datei definiert sind.
Dabei können Sie auch vorhandene Grafiken dynamisch durch andere
ersetzen.
Es stehen folgende Arten zur Verfügung, mit JavaScript eine bestimmte
Grafik anzusprechen:
document.images[#].Eigenschaft
document.images[#].Methode()
Hoehe = document.images[0].height;
oder
document.BildName.Eigenschaft
document.BildName.Methode()
Hoehe = document.Portrait.height;
Lichter.html
Lauflichter.html
Navigationsleiste.html
Helga Gabler
85
6.
JavaScript
forms –Objekt
Zugriff auf Formulare, die in einer HTML-Datei definiert sind.
ÎSelfhtml
Formulare werden durch forms-Objekte und zusätzlich durch f
orms-Arrays repräsentiert
einzelne Formularelemente sind elements-Arrays
Objekte in den element-Arrays besitzen Eigenschaften wie:
name oder
wieder ein options-Array
Helga Gabler
86
6.
JavaScript
forms –Objekt : Beispiel
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
JavaScript Formular entwerfen:
</title>
<SCRIPT TYPE="text/javascript" SRC="./Formular.js">
/SCRIPT>
</head>
<BODY>
<P>
<FORM NAME="Anfrage" action="mailto:helga.gabler@fh-karlsruhe.de"
method="post">
Ihre Frage: 
<INPUT TYPE="text" NAME="frage" VALUE="News" SIZE="25">
<BR>
Abo?:       
<INPUT TYPE="checkbox" NAME="abo" CHECKED ONCLICK="info(this)">
<BR>
<INPUT TYPE="button" NAME="ok" VALUE="Fertig" ONCLICK="info(this)">
<BR>
<INPUT type=submit value="Bewertung abschicken">
<INPUT type=reset value="Eingaben löschen"> </TD>
</FORM>
</P>
<A HREF="http://www.home.fh-karlsruhe.de/~gahe0001"> Zum mir</A>
</body>
Helga Gabler
</html>
87
6.
JavaScript
forms –Objekt : Funktion „Formular.js“
function info(obj) {
var infoWnd = window.open("","docProps","status.resizable")
infoWnd.document.open()
infoWnd.document.write ("<HTML><HEAD>")
infoWnd.document.write ("<TITLE>Dokumentobjekte</TITLE>")
infoWnd.document.write ("<\/HEAD><BODY>")
infoWnd.document.write ("document.bgColor,"<BR>")
infoWnd.document.write ("document.linkColor,"<BR>")
infoWnd.document.write ("document.title,"<BR>")
infoWnd.document.write ("document.URL,"<BR>")
infoWnd.document.write ("document.referrer,"<BR>")
infoWnd.document.write ("document.forms[0].action,"<BR>")
infoWnd.document.write ("document.Anfrage.method,"<BR>")
infoWnd.document.write ("document.Anfrage.length,"<BR>")
infoWnd.document.write ("document.Anfrage.frage.value,"<BR>")
infoWnd.document.write ("document.Anfrage.frage.defaultValue,"<BR>")
infoWnd.document.write ("document.Anfrage.abo.defaultChecked,"<BR>")
infoWnd.document.write ("obj.name,"<BR>")
infoWnd.document.write ("document.Anfrage.ok.name,"<BR>")
infoWnd.document.write ("obj.value,"<BR>")
infoWnd.document.write ("dokument.links[0].href,"<BR>")
infoWnd.document.write ("dokument.links[0].protocol,"<BR>")
infoWnd.document.write ("<\/BODY><\/HTML>")
infoWnd.document.close()
Helga Gabler}
88
6.
JavaScript
Auslesen und Setzen von Formulardaten
Um an Formulardaten zu kommen, um z.B. diese auf Richtigkeit zu
prüfen, ruft man das entsprechende Element der HTML-Seite auf:
Lesend:
x = document.Testformular.Eingabe.value;
Schreibend:
document.Testformular.Eingabe.value = “Das was rein soll.“;
Î Formular.html
Helga Gabler
89
6.
JavaScript
Auslesen und Setzen von Formulardaten
Î Formular.html
Helga Gabler
90
6.
JavaScript
Event-Handler
¾ stellen das Bindeglied zwischen HTML und JavaScript dar
¾ reagieren auf bestimmte Tastur- und Mausereignisse
¾ werden als Attribute in HTML-Tags geschrieben
¾ beziehen sich auf das entsprechende HTML-Element.
¾ sind HTML 4.0 Standard
¾ beginnen immer mit on, zum Beispiel onClick=
Hinter dem =-Zeichen notieren Sie in Anführungszeichen, eine JavaScriptAnweisung. z.B.
onClick="Umrechnen()“ oder
<a href="funktionen3.html" onmouseover="gehauf('beliebiger Text');">
Fahren Sie über den Link!</a>
Helga Gabler
91
6.
JavaScript
Event-Handler: Einige Beispiele zur Anwendung
onBlur
onMouseover
onLoad
onUnload
onDblClick
onmouseclick
Der Mauszeiger wurde über einen Bereich bewegt
Die linke Maustaste wurde gedrückt
onLoad
ÎPasswort-Eingabe.html
onMoseOver, onMouseOut)
ÎBildFarbeAendern.html
(OnLoad,OnMouseOver, OnMouseOut ÎHintergrundFarbeAendern.html
Helga Gabler
92
6.
JavaScript
Event-Handler
Weiteres oft genutzes Feature: Verweis auf javaScript-Funktion
(kein Event-Handler im eigentlichen Sinne, aber Alternative für Buttons)
Beispiel:
<a href = “javascript:history.back ()“> Eine Seite zurück </a>
javascript:history.back())
Î HintergrundFarbeAendern.html
javascript:void(opener.location.href)
ÎFernbedienung/JS-Projekt.html (zweites Fenster
Helga Gabler
93
6.
JavaScript
Event-Handler - Beispiele
Beispieldateien für Event Handler:
Beispiele.html
Helga Gabler
94
6.
JavaScript
Beispiel : Guthaben.java
public class Guthaben {
public static void main(String[] args) {
int guthaben = 1000;
System.out.println("Guthaben = " + guthaben);
int einzahlung = 500;
System.out.println("Einzahlung = " + einzahlung);
guthaben = guthaben + einzahlung;
System.out.println("Guthaben = " + guthaben);
}
}
Helga Gabler
95
6.
JavaScript
Aufgabe „Steuerberechnung“
Gegeben sei ein Betrag in Euro ohne Mehrwertsteuer.
a) Berechnen Sie den Bruttobetrag
b) ziehen Sie davon 2% Skonto ab
Helga Gabler
96
6.
JavaScript
Übung 10
Erstellen Sie ein HTML-Formular, in welches Vorname, Nachname,
Geburtsdatum und E-Mail-Adresse eingetragen werden kann.
Testen Sie browserseitig die Vollständigkeit der Eingaben soweit dies
möglich ist.
(z.B. kommt das Zeichen @ in der E-Mail-Adresse vor).
Das Formular soll nur bei vollständigen Eingaben abgeschickt werden.
Helga Gabler
97

Javascript

Transcription

Similar documents

Cross Site Scripting

Algebra

Schulinterner Lehrplan

HTML Formulare / CGI / JavaScript / Perl

Startvorlage für Nutzer mit RUKAS (TEST)

S - DeepSec

JavaScript-Kurzeinführung

Dr. Maria Felberbauer

HTML - Fachhochschule Kiel

Anleitung - KJA Bonn

Bärenstark hören und sprechen

Neue Version meines Prolog-Tuts

On-Board-Diagnose von Schwerlastfahrzeugen

1 Begrüßung und Kennenlernen

JavaScript für Fortgeschrittene - Website zum Buch

Carl-Zeiss-Gymnasium - Regionalzentrum Ostthüringen

Stundenbilderplanung

Telecaster Schaltungen