close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

1 Was ist Javascript? 2 Javascript in HTML - RobertKrah.de

EinbettenHerunterladen
Einführung in Javascript
1 Was ist Javascript?
•
Javascript ist eine Erweiterung zu HTML. Mit Javascript sollte es ermöglicht werden, den
HTML-Code durch Zusatzfunktionen zu ergänzen, damit HTML-Dokumente flexibel auf
Benutzereingaben reagieren können. Mit anderen Worten: Durch Javascript werden Internetseiten interaktiv. Mit Java, einer vom Computerhersteller SUN entwickelten, plattformunabhängigen Programmiersprache, hat Javascript nichts zu tun.
Javascript ist dazu in der Lage, so genannte „dynamische Websites“ (DHTML) darzustellen. Dazu zählen:
⇒
graphische Effekte (der Benutzer fährt mit der Maus über eine Stelle auf dem
Bildschirm, und eine Grafik wird mit einer anderen ausgetauscht).
⇒
Animationen (wie zum Beispiel zur Weihnachtszeit Schneeflocken über den Bildschirm schneien zu lassen)
⇒
Menüsysteme zur Navigation durch die Website: Wenn man mit der Maus über
einen Link fährt, werden Untermenüs sichtbar (wie bei den Menüleisten in Programmen), und der Benutzer kann bequem durch die Website navigieren. Hierzu
muss Javascript, HTML und CSS (=Cascading style sheets) in richtig koordinierter
Weise eingesetzt werden.
2 Javascript in HTML-Dokumenten
Der Javascript-Code wird in der Regel in den Kopf der HTML-Seite (zwischen dem öffnenden <head> und dem schließenden </head> geschrieben.
Hier muss vor allem deklariert werden, dass überhaupt Javascript verwendet wird.
Zur Erinnerung hier noch einmal das
Grundgerüst einer HTML-Datei:
unter das title-Tag wird Javascript eingesetzt!
<html>
<head>
<title>
</head>
<body >
</body>
</html>
</title>
So wird Javascript verwendet:
<html>
<head>
<title>
</title>
hier wird dem Browser mitgeteilt, dass
er es mit Javascript zu tun hat
Javascript kommt zwischen Kommentar-Zeichen, damit Browser, die kein
Javascript verstehen, es nicht als Text
interpretieren!
<script language="JavaScript">
<!-[hier kommt Javascript-Code hinein]
//-->
</head>
<body >
</body>
</html>
3 Beispiele: Meldungen, Funktionen und Event-Handler
In diesem Kapitel sollen zunächst einige Beispiele getestet werden, an denen man die Wirkungsweise von Javascript sehen kann. Später werden wir auf systematischere Weise an die
Programmierlogik mit Javascript gehen.
-1-
Einführung in Javascript
3.1 Ausgabe von Meldungen mit alert()
Alert heißt „Warnung“ und dient dazu, Meldungen an den Benutzer zu erfassen, die dieser
zur Kenntnis nehmen muss, bevor es weitergeht.
Mit dem „Hallo-Welt-Skript testet man üblicherweise in jeder Programmiersprache zunächst
einmal, wie man „Hallo Welt“ auf den Bildschirm bringt.
Aufgabe: Erstelle die folgende Datei. Speichere sie mit dem Namen hallo.html.
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body></body> </html>
Wenn die Datei mit dem Browser ausgeführt wird, geschieht
folgendes:
Die Meldung Hallo Welt! wird angezeigt, und erst wenn man
auf OK klickt, verschwindet die Meldung.
Mit Alert erzeugte Ausgaben sollten sparsam eingesetzt werden. Der Benutzer will nicht zu
stark gegängelt werden, wo er hinzuklicken hat, und nach Alert geht es erst weiter, wenn der
Klick auf die Schaltfläche OK erfolgt ist.
3.2 Funktionen und Rechenanweisungen
Generell gelten für Berechnungen die Rechenzeichen, die auch in Anwendungsprogrammen
wie z. B. Excel verwendet werden:
Verwende folgende Rechenzeichen:
addieren
+
subtrahieren
multiplizieren
*
dividieren
/
Aufgabe: Erstelle die folgende Datei. Gib ihr den Namen rechne.html
<html><head>
<title>JavaScript-Test</title>
<script language="JavaScript">
<!-function doppel(zahl)
{
Ergebnis = zahl + zahl;
alert("Die Zahl verdoppelt ergibt " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form><input type=button value="Die Zahl 8 verdoppeln
ergibt" onClick="doppel(8)">
</form> </body> </html>
Wenn du die Datei im Browser aufrufst, siehst du:
-2-
Einführung in Javascript
Wenn die Schaltfläche mit der Maus angeklickt wird, dann
ist das Ergebnis:
Erläuterung:Zunächst siehst du im Kopf der Datei (nachdem Javascript deklariert wurde)
function doppel(zahl)
{
Ergebnis = zahl + zahl;
alert("Die Zahl verdoppelt ergibt " + Ergebnis);
}
Hier wird eine Funktion mit dem Namen doppel( ) definiert. Einer Variable mit dem Namen
Ergebnis wird das doppelte einer Zahl zugewiesen (Ergebnis = zahl + zahl). Dann folgt
die Zeile mit der Ausgabe (Alert ...).
Ausgeführt wird das Ganze aber erst im <body>-Teil der Datei: in der Zeile
<form><input type=button value="Die Zahl 8 verdoppeln ergibt"
wird der Button definiert, der vom Benutzer anzuklicken ist.
Dann folgt der so genannte Event-Handler:
onClick="doppel(8)">
Onclick bedeutet: Wenn man es mit der Maus angeklickt hat, führe aus...(in diesem Fall die
oben definierte Funktion). Den Ausdruck „Event-Handler“ könnte man mit „EreignisBehandler“ übersetzen. Javascript verfügt über eine Reihe verschiedener Event-Handler, die
alle mit der Silbe on beginnen (siehe weiter unten).
Aufgabe: Ändere die Datei so um, dass nicht das Doppelte von 8, sondern von 12 ausgerechnet wird. An welcher Stelle muss etwas geändert werden?
3.3 Beispiel: Funktionen definieren1
Die Art und Weise, wie im vorigen Beispiel eine Funktion definiert wurde, soll hier noch einmal zusammengefasst werden. Dabei gilt folgendes:
Die Syntax, mit der eine Funktion definiert wird, ist:
function name()
{
Befehle
}
Zunächst wird das Schlüsselwort function benötigt. Dann folgt ein Funktionsname, der frei
gewählt werden kann (bis auf reservierte Wörter wie function, alert usw.) Nach dem Namen
der Funktion folgen ein Paar runde Klammern. Anschließend werden die Befehle, die beim
Aufrufen der Funktion gebraucht werden, in eine öffnende und eine schließende geschweifte
Klammer { } geschrieben. Die Funktion ist also nur eine Art Behältnis für die Befehle, die
dort hineingehören.
Siehe dazu bitte folgendes Beispiel an:
function grau_farbe()
{
document.bgcolor="silver";
}
1
Das Beispiel ist von Johann-Christian Hanke, Homepage für Fortgeschrittene – sehr empfehlenswert!
-3-
Einführung in Javascript
Die Funktion mit dem Namen grau_Farbe enthält nur einen Befehl, nämlich den Befehl, mit
welchem dem aktuellen Dokument der Farbwert "silver" (also grau) zugewiesen wird.
Von sich aus macht die Funktion noch nichts, man braucht einen Event-Handler (EreignisBehandler), um die Funktion zu starten. Es ist beispielsweise möglich, die Funktion durch
Klicken auf eine Schaltfläche (button) zu starten. Ein Button wird immer als Teil eines Formulars angesprochen, deshalb lautet hier wieder die allgemeine Syntax:
<form>
input type="button" value="" on click="">
</form>
In die Anführungszeichen bei value="" wird hineingeschrieben, wie der Button beschriftet
sein soll. – In die Anführungszeichen bei onclick="" schreibt man den Namen der Funktion.
Aufgabe: Erstelle eine neue HTML-Datei. Gib ihr den Namen hellgrau.html.
Die Datei enthält die Definition der Funktion aus der Beschreibung:
<html>
<head>
<title>Funktion</title>
<script language="JavaScript" type="text/javascript">
<!-function grau_farbe()
{
document.bgColor="silver";
}
//-->
</script>
</head>
<body bgcolor="white">
<h1>Dokument mit Funktion</h1>
<form>
<input type="button" value="Hellgrau" onClick=" grau_farbe()" />
</form></body></html>
Wenn das Dokument im Explorer aufgerufen
wird, dann siehst du zunächst nur:
Wenn man die Schaltfläche anklickt, dann
ergibt sich, dass der Hintergrund grau gefärbt wird.
Aufgabe: Ergänze das Dokument um eine weitere Funktion, mit der du die Hintergrundfarbe rot einstellen kannst. Durch eine zusätzliche Schaltfläche soll es möglich sein,
auf rote Hintergrundfarbe umzustellen.
-4-
Einführung in Javascript
Lösung. (bitte erst selbst probieren!
<html>
<head>
<title>Funktion</title>
<script language="JavaScript" type="text/javascript">
<!-function grau_farbe ()
{
document.bgColor="silver";
}
function rot_farbe ()
{
document.bgColor="red";
}
//-->
</script>
</head>
<body bgcolor="white">
<h1>Dokument mit zwei Funktionen</h1>
<form>
<table >
<tr>
<td width="200"> <input type="button" value="Hellgrau"
onClick=" grau_farbe ()" />
</td>
<td width="200"><input type="button" value="Rot" onClick=" rot_farbe " />
</td>
</tr>
</table>
</form></body></html>
-5-
Document
Kategorie
Internet
Seitenansichten
8
Dateigröße
76 KB
Tags
1/--Seiten
melden