JavaScript (Langversion)

Ü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 



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 

Einsteiger Seminar JavaScript 

Helga Gabler 



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 Interpreter- 

Software), 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 



JavaScript - Versionen 

JavaScript - Versionen 

Browser - Versionen 

• JavaScript 1.0 Netscape 2.0 / InternetExplorer 3.0 


• JavaScript 1.2 

Netscape 4.0 / InternetExplorer 4.0(teilweise) 


• JavaScript 1.4 Netscape 6.0 

• JavaScript 1.5 Netscape 6.0 

• hierzu Testprogramm: 

Helga Gabler 



JavaScript – Beispiel: was kann mein Browser? 

 

 

 

 

JavaScript: Browserfähigkeit testen 

 

 

 

 

document.write ("Browserinformationen: "); 

document.write ("", navigator.appCodeName); 

document.write ("", navigator.appName); 

document.write ("", navigator.appVersion); 

document.write ("", navigator.userAgent); 

 

 

Sie brauchen JavaScript 

 

 

 

Helga Gabler 



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: 

 

 

 

oder 

 

 

Helga Gabler 



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 



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 



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 



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 



Zeichenketten 

Zeichen 

Name 

Wirkung 

\b 

backspace 

links davon stehendes Zeichen wird gelöscht 

\n 

\r 

\f 

new line 

carriage 

return 

form feed 

je nach System wird eine neue Zeile an der 

aktuellen Position oder am linken Rand 

begonnen. 

je nach System wird an den linken Rand in der 

aktuellen Position oder einer neuen Zeile 

positioniert. 

ein Seitenvorschub für Drucker wird eingebaut 

\t 

tab 

es wird bis zum nächsten Tabulator eingerückt 

\“ 

quote 

steht für ein Anführungszeichen innerhalb von “...“ 

\‘ 

single quote 

steht für Apostroph innerhalb von “...“ 

\\ 

backslash 

erzeugt das Zeichen \ selbst 

Helga Gabler 



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 

Datentyp 

Zahlen, Strings (Zeichenketten) 

Zahlen 

Strings (Zeichenketten) 

boolesche Werte 

Zahlen, boolesche Werte 

alle 

Helga Gabler 



Vergleichs-Operatoren 

= = gleicher Wert 

!= ungleich 

< kleiner als 

> größer als 

= 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 gleich 42? 

x > 42; x größer 42? 

x >= 42; x größer gleich 42 

x != 42; x ungleich 42 

x = = = "42" ist x gleich 42 und vom Typ string? 

... 

Helga Gabler 



Berechnungsoperatoren 

Berechnungsoperatoren: Bsp Erg 

+ Addition 2 + 2 4 

- Subtraktion 5 – 1 4 

* Multiplikation 3 * 6 18 

/ Division 27 9 3 

% Modulo-Operator 7 % 4 3 

++ Inkrement x = 10 

++x 11 

-- Dekrement x = 10 

--x 9 

Helga Gabler 



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 

Beispiel 

Ergebniswert 

+ Aneinanderreihung „Georg“ + „Schmidt“ „Georg Schmidt“ 

var Zeichen = ‚1‘; ‚1‘ 

var Ergebnis = Zeichen + Zeichen ‚11‘ 

Helga Gabler 



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) NAND NICHT-UND-Verknüpfung 

nur falsch, wenn A und B wahr 

! (A || B) NOR NICHT-ODER -Verknüpfung „weder...noch“ 

nur wahr, wenn A und B falsch 

!A&&B || A&&!B XOR exklusives ODER 

„entweder ... oder ... “ (Antivalenz) 

wahr, wenn nur A oder nur B falsch 

A&&B || !A&&!B XNOR exklusives NICHT-ODER „aus... folgt ... 

wahr, wenn A und B übereinstimmen 

Helga Gabler 



Bit-Operatoren 

Die Bitoperatoren », «, &, | und ^ sind sehr kompliziert und 

kaum gebräuchlich, daher werden sie hier nicht erklärt. 

a = x & y Und-Bedingung in Bitmaske 

b = x | y Oder-Bedingung in Bitmaske 

c = x ^ y exkl. Oder-Bedingung in Bitmaske 

d = x >> y verschiebt die Bitmaske um 1 Bit nach rechts 

(füllt mit 0 auf) 

e = x


Zuweisungsoperatoren (Kurzschreibweise) 

Operator Wirkung 

= Einfache Wertzuweisung A = 5 A 5 

+= Addition und Zuweisung A += 5 A 10 

+= Addition und Zuweisung ‚Ei += ‚dotter‘ 

‘Eidotter‘ 

-= Subtraktion und Zuweisung A -= 2 A 8 

*= Multiplikation und Zuweisung A *=2 A 16 

/= Division und Zuweisung A /= 2 A 8 

%= Modulo-Operation und Zuweisung A %= 3 A 2 

&= Bitweises „UND“und Zuweisung A &= 3 A 2 

^= Bitweises „Exklusiv-Oder“und Zuw. A ^= 5 A 4 

| = Bitweises „ODER“ und Zuweisung A != 5 A 5 

>= 2 A 5 

>>> = Null-Fill-Rechtsverschiebung und Zuw. A >>>=2 A 1 

Helga Gabler 



andere Operatoren 

einfacher Bedingungsoperator 

Operator Wirkung Beispiel 

Ergebniswert 

?: Bedingung true ? „yes“ : „no“ 

„yes 

false ? „yes“ : „no“ 

„no“ 

Typenkonvertierung und typeof-Operator: 

Helga Gabler 



Rangfolge der Operatoren 

Rangstufe Oper.-Zeichen Oper.-Name Oper.-Typ 

(1 höchste Prior.) 

1 () [] Klammer Gruppierung 

2 ! Nicht Log. Oper. 

3 ++ -- Inkr. / Dekr Berechn.Oper. 

4 - Negation Berechn.Oper 

5 ~ Nicht Bit-Oper. 

6 * Multipl. Berechn.Oper. 

7 / Division Berechn.Oper. 

8 % Modula-Operator Berechn.Oper. 

9 + Aneinanderreihung Konkaten.Oper. 

10 + Addition Berechn.Oper. 

11 - Subtraktion Berechn.Oper. 

12 > Rechtsversch Bit-Oper. 

14 >> Null-fill-Rechtsversch Bit-Oper. 

mit Klammern können Sie die Rangfolge bei den Operatoren beeinflussen 

Helga Gabler 



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 

} 

Helga Gabler 

auch: verschachtelte Bedingungen, if { … if {… if {… }}} 

mehrstufige Bedingungen 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 



if Schleife – Beispiel 1 

 

 

Beispiel zur if-Schleife 

 

 

 

 

 

 

 

 

 

Helga Gabler 



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 ("Die größte Zahl lautet ", 

(x>y) ? ((z>x) ? z:x) : ((z>y) ? z:y) 

(x>y ) ? ( (z>x) ? z:x) : ( (z>y) ? z:y) ) 

(x>y) ja (z>x) ja z 

nein x 

nein (z>y) ja z 

nein y 

GrößteVon3Zahlen.html 

Helga Gabler 



Entscheidungen 

Sind die folgenden Aussagen wahr oder falsch? 

a) var a=5, b=18 

if (a>0 && b!=18) 

1 && 0 

b) var zahl=10, wert=100 

if (zahl != 0 || zahl > wert || wert-zahl == 90) 

0 || 0 || 1 

0 || 1 

c) var x=1.0, y=5.7 

if (x >= .9 && y 0 && n2 > 0 || n1 > n2 && n2 != 17) 

1 && 1 || 0 && 0 

1 || 0 

Helga Gabler 



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 



switch/case –Beispiel 2 

 

 

 

Helga Gabler 



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 



do / while Schleifen – Beispiel 3 

 

Beispiel zur do/while-Schleife 

 

 

 

 

 

 

 

 

 

Helga Gabler 



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 



for Schleife Beispiel 4 

 

 

Beispiel zur for-Schleife 

 

 

 


Break- und Continue-Anweisungen 

Möglichkeit um einen Schleigfendurchlauf abzubrechen 

Break: 

continue: 

Beispiel: 

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 

Helga Gabler 



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 



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 



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 



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 



Bsp.5a: Funktion mit Parameter in einem Script 

 

Beispiel zum Funktionsaufruf aus einem Skript 

 

 

 

 

 

 

 

 

 

Helga Gabler 



Bsp.5b: Fkt. mit Parameter und Rückgabewert in einem Script 

 

Funktionen 

 

 

 

 

 

 

 

 

Helga Gabler 



Helga Gabler 

Bsp.6: Funktionsaufruf in einer Funktion 

 

Beispiel zum Funktionsaufruf aus einer anderen Funktion 

 

 

 

 

 

 



Bsp.7: Funktionsaufruf über Event Handler 

 

Beispiel zum Funktionsaufruf durch einen Event-Handler 

 

 

 

 

 

 

 

Fahren Sie über den Link! 

 

 

Helga Gabler 



Bsp.8: Funktionsaufruf über HTML-Tag 

 

Beispiel zum Funktionsaufruf aus einem Tag 

 

 

 

 

 

 

Klicken Sie bitte hier! 

 

 

Helga Gabler 



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 



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 



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 



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 



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


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 



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 



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 



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: 

document.write(): 

document.write('Dieser Text ist ein String-Parameter'); 

Helga Gabler 



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 Browser- 

Fenster 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 



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) 

{ 

this.Name = NM; 

this.Farbe = FB; 

} 

Name Farbe 

Schlüsselwort this definiert die Eigenschaft Name und Farbe 

2. Initialisierung von Objekten: var annaII = new Schiff (‚Anna II‘, ‚rot‘); 

Helga Gabler 



Eigenschaften - Beispiel „Schiff“ 

Erweiterung des Beispiels: Schiff: „Schiff bekommt Kapitän“ 

Objektdefinition von Personen: 

Person 

function Person (NM, VN) { 


this.Vorname = VN; 

Name Vorname 

} 

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.Farbe = FB; 

enterprise 

this.Kapitaen = KP; 

} 

var enterprise = new Schiff (“Enterprise“, “weiss“, kirk); weiss 

Kapitaen 

Enterprise 

Helga Gabler 



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 



Methoden – Beispiel „Halloween“ 

Objekte 

 

 

 

 

 

Helga Gabler 

 

Übungen Informatik 1 55 


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 



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 ) 

Helga Gabler 

elements 

(Inhalte dieser HTML-Tags, z.B. Eingabefeldern, Auswahllisten 

oder Buttons zum Absenden bzw. Abbrechen) 



Helga Gabler 

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 



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 



Objekte string – Beispiel „zitat“ 

Beispiel: 

Variable zitat 

mit der Zeichenkette 

„Sein oder nicht sein ...“ 

Helga Gabler 



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 



Objekt number – Eigenschaften und Methoden 

Helga Gabler 



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 



Interpretierbare Metazeichen – Tabelle1 

Helga Gabler 



Interpretierbare Metazeichen – Tabelle2 

Helga Gabler 



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) 

Helga Gabler 

RegExp-MethodeTest.html 



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 



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 



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 



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: 

arrays1.html 

arrays2.html 

arrays3.html 

ObjektArray-MethodeSort.html 

Navigationsleiste.html 

Helga Gabler 



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 



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 



navigator-Objekt: Eigenschaften 

navigator-Objekt beschreibt Eigenschaften des Browsers 

Beispiel: Navigator.html 

Helga Gabler 



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 Referenz auf sich selbst Bsp.: open.html 

Helga Gabler 



Unterobjekte des window-Objekts 

document 

event 

history 

location 

Beim 

Helga Gabler 

Inhalt, der im Browser-Fenster angezeigt wird: 

z.B. Links,Anker,Bilder,Formulare) 

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. 

Zugriff auf die besuchten WWW-Seiten des Anwenders 

massgeblich History-Liste 

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. 

ändern führt der WWW-Browser einen Sprung zu einer neuen 

URL-Adresse aus, genau so wie bei einem Verweis. 



wichtige Methoden des window-Objekts 

alert(Text) 

blur () 

clearTimeout (TimeoutID) 

close () 

confirm(Text) 

focus() 

open(“URL”, “Name”, “Optionen”) 

prompt (“Text”,”Vordefinition”) 

ö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” 

holt Browserfenster in Vordergrund 

öffnet neues Browserfenster 

WindowOpen.html, 

EingangsScreen.html 

ö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 



wichtige Eigenschaften window-Objekts 

defaultStatus 

opener 

voreingestellter Text in der Statuszeile des Browsers 

Referenz auf das Fenster, das dieses Fenster geöffnet hat 

self Referenz auf sich selbst Bsp.: open.html 

status 

locationbar 

scrollbars 

toolbar 

derzeit dargestellter Text in der Statuszeile des Browsers 

URL-Adreßzeile 

Scroll-Leisten 

Werkzeugleiste 

Helga Gabler 



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 



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 

Referenz auf Frame, der in der Hierarchie eine Stufe höher steht 

Referenz auf sich selbst 

Referenz auf den hierarchisch höchsten Frame 

(Browser-Fenster, indem alle Frames dargestellt werden) 

Helga Gabler 



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 

“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 

Helga Gabler 



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 



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 

Anzahl der Einträge in der History des Browsers 

Helga Gabler 



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 

linkColorFarbe 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 



document –Objekt Eigenschaften/Methoden 

Eigenschaften von document-Objekt: 

Methoden von window.document 

Helga Gabler 



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 



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 



forms –Objekt : Beispiel 

 

 

 

JavaScript Formular entwerfen: 

 

/SCRIPT> 

 

 

 

 

Ihre Frage: 

 

 

Abo?: 

 

 

 

 

 

 

 

 

Zum mir 

 

Helga Gabler 



Helga Gabler } 

forms –Objekt : Funktion „Formular.js“ 

function info(obj) { 

var infoWnd = window.open("","docProps","status.resizable") 

infoWnd.document.open() 

infoWnd.document.write ("") 

infoWnd.document.write ("Dokumentobjekte") 


infoWnd.document.write ("document.bgColor,"") 

infoWnd.document.write ("document.linkColor,"") 

infoWnd.document.write ("document.title,"") 

infoWnd.document.write ("document.URL,"") 

infoWnd.document.write ("document.referrer,"") 

infoWnd.document.write ("document.forms[0].action,"") 

infoWnd.document.write ("document.Anfrage.method,"") 

infoWnd.document.write ("document.Anfrage.length,"") 

infoWnd.document.write ("document.Anfrage.frage.value,"") 

infoWnd.document.write ("document.Anfrage.frage.defaultValue,"") 

infoWnd.document.write ("document.Anfrage.abo.defaultChecked,"") 

infoWnd.document.write ("obj.name,"") 

infoWnd.document.write ("document.Anfrage.ok.name,"") 

infoWnd.document.write ("obj.value,"") 

infoWnd.document.write ("dokument.links[0].href,"") 

infoWnd.document.write ("dokument.links[0].protocol,"") 


infoWnd.document.close() 



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 



Auslesen und Setzen von Formulardaten 

Formular.html 

Helga Gabler 



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 JavaScript- 

Anweisung. z.B. 

onClick="Umrechnen()“ oder 

 

Fahren Sie über den Link! 

Helga Gabler 



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 



Event-Handler 

Weiteres oft genutzes Feature: Verweis auf javaScript-Funktion 

(kein Event-Handler im eigentlichen Sinne, aber Alternative für Buttons) 

Beispiel: 

Eine Seite zurück 

javascript:history.back()) HintergrundFarbeAendern.html 

javascript:void(opener.location.href) 

Fernbedienung/JS-Projekt.html (zweites Fenster 

Helga Gabler 



Event-Handler - Beispiele 

Beispieldateien für Event Handler: 

Beispiele.html 

Helga Gabler 



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 



Aufgabe „Steuerberechnung“ 

Gegeben sei ein Betrag in Euro ohne Mehrwertsteuer. 

a) Berechnen Sie den Bruttobetrag 

b) ziehen Sie davon 2% Skonto ab 

Helga Gabler 



Ü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

JavaScript (Langversion)

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?