docJavaScript
download 
Denúncia Transcrição
JavaScript
Übungen Informatik I
JavaScript
http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/Tutorial
http://de.selfhtml.org
Helga Gabler, Christian Pape
Übungen Informatik 1
1
JavaScript
Einführung
JavaScript
-
-
wurde 1995 von der Firma Netscape eingeführt und lizensiert
ist kein direkter Bestandteil von HTML, sondern eine
eigene Programmiersprache.
-
wurde zu dem Zweck geschaffen, Web-Seiten zu optimieren.
-
wird client-seitig, zur Laufzeit vom Web-Browser interpretiert.
-
JavaScript-Programme werden wahlweise direkt in der HTML-Datei
oder in separaten Dateien notiert.
Für Web-Seiten, bei denen Information im Vordergrund steht, und die auch
von Suchmaschinen-Robots und Benutzerrandgruppen wie
Sehbehinderten erfasst werden sollen, müssen Sie darauf achten,
JavaScript nur so einzusetzen, dass die Web-Seiten auch ohne
eingeschaltetes JavaScript ordentlich angezeigt werden, und dass die
Navigation zwischen den Seiten auch ohne JavaScript funktioniert.
Helga Gabler, Christian Pape
Übungen Informatik 1
2
JavaScript
JavaScript-Bereiche in HTML definieren
<html>
<head> <title>Beispiel zum Funktionsaufruf aus einem Tag</title>
</head>
<script type="text/javascript">
<!-alert("Hallo Welt!");
//-->
</script>
<body>
</body>
</html>
//: JavaScript-Kommentar: um Fehlermeldungen in scriptfähigen
Browsern zu unterdrücken
JavaScript-Bereich kann auch im body stehen, üblich ist wie oben
Helga Gabler, Christian Pape
Übungen Informatik 1
3
JavaScript
Kommentare
Einzeiliger Kommentar
Mehrzeiliger Kommentar
beginnt mit
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, Christian Pape
Übungen Informatik 1
4
JavaScript
Funktionsaufruf über HTML-Tag
<html>
<head> <title>Beispiel zum Funktionsaufruf aus einem Tag</title>
</head>
<script type="text/javascript">
<!-function Meldedich(text) {
alert(text);
}
//-->
</script>
<body>
<h3>
<a href="javascript:Meldedich('Hallo');">Klicken Sie bitte hier!</a>
</h3>
<a href = "javascript:history.back ()"> Eine Seite zurück </a>
</body>
</html>
Helga Gabler, Christian Pape
Übungen Informatik 1
5
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
¾Notation: EventHandler=“JavaScript-Anweisung“
Bsp.: onClick=“Meldedich(‘Hallo‘)“
<html>
<body>
<form>
<input type=button value="Klick mich"
onClick="alert('er hat es getan!')">
</form>
<a href="funktionen.html"
onmouseover="history.back();"> zurück</a>
</body>
</html>
Helga Gabler, Christian Pape
Übungen Informatik 1
6
JavaScript
Vordefinierte Objekte
Dass JavaScript eine Erweiterung von HTML ist, liegt vor allem an
den vordefinierten Objekten. Über diese vordefinierten Objekte
können Sie beispielsweise einzelne Elemente eines HTML-Formulars
abfragen oder ändern.
Die JavaScript-Objekte sind in einer Hierarchie geordnet:
window(Browserfenster)
document (Dokument im Browserfenster)
forms, ... (Formular,… im Dokument )
elements
(Formularelemente, z.B. Auswahllisten, Buttons …)
parent
window
frames[]
document
forms[]
location
images[]
elements[]
links[]
anchors[]
Helga Gabler, Christian Pape
Übungen Informatik 1
7
JavaScript
Vordefinierte Objekte
<html>
<head> … </head>
<body>
<script type="text/javascript„>
var counter = 0;
function doIt() {
counter++;
document.forms[0].elements[0].value=
"Klick " + counter + "!";
}
</script>
<form>
<input type=button value="Klick!" onClick="doIt()">
</form>
</body>
</html>…)
Helga Gabler, Christian Pape
Übungen Informatik 1
8
JavaScript
Vordefinierte Objekte
Browserfähigkeit testen
<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>
Helga Gabler, Christian Pape
Übungen Informatik 1
9
JavaScript
JavaScript in separater Datei
JavaScript-Datei quadrat.js:
function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value;
alert("Das Quadrat von " +
document.Formular.Eingabe.value + " = " + Ergebnis);
}
HTML-Datei
<html>
<head> <title>Beispiel zum Funktionsaufruf aus einem Tag</title>
<script src="quadrat.js" type="text/javascript">
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onClick="Quadrat()">
</form>
</body>
</html>
Helga Gabler, Christian Pape
Übungen Informatik 1
10
6.
JavaScript
Event-Handler - Beispiele
onLoad (beim Laden einer Datei)
Tritt ein, wenn eine HTML-Datei geladen wird.
<body onLoad="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body>
onReset (beim Zurücksetzen des Formulars)
<script type="text/javascript">
function ResetCheck() {
var chk = window.confirm("Wollen Sie alle Eingaben
loeschen?");
return(chk);
}
</script>
<form name="Test" onReset="return ResetCheck()" action="">
onSubmit: (selfhtml)
<form action="onsubmit.htm" onSubmit="return CheckInput();">
Helga Gabler, Christian Pape
Übungen Informatik 1
11
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.uniheidelberg.de/Ausbildung/Unterlagen/JavaScript/einleit.html
http://www.stars.com/Authoring/JavaScript/Tutorial/ (englisch)
Selfhtml:
http://www.teamone.de/selfhtml/
Netscapes neueste JavaScript-Referenz:
http://developer.netscape.com/tech/javascript/index.html
Webbuilding:
http://www.cnet.com (englisch)
Helga Gabler, Christian Pape
Übungen Informatik 1
12
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, Christian Pape
Einsteiger Seminar JavaScript
Übungen Informatik 1
13
