Aufgabe 1: In Ihrer HTML-Seite wird ein Bild bild1.gif bisher
folgendermaßen eingebunden:
<img src="bild1.gif">
Benutzen Sie nun ein Event- Handler, damit jedes Mal, wenn die Maus über der
Grafik liegt, stattdessen das Bild bild2.gif angezeigt wird. Außerdem
soll beim Verlassen des Mauszeigers über das Bild wieder bild1.gif
angezeigt werden. Was ändert sich für einen Benutzer, bei dem JavaScript
nicht unterstützt wird?
Lösung
Der vollständige HTML- Tag sieht folgendermaßen aus:
<img src="bild1.gif" onmouseover="this.scr='bild2.gif'"
onmouseout='bild1.gif'>
In einem Browser, bei dem JavaScript nicht unterstützt oder abgeschaltet wird, wird
immer nur das erste Bild angezeigt.
[Lösung schließen]
Aufgabe 2:
-
Objekte haben Eigenschaften und Methoden. Ordnen Sie folgende Begriffe des
window- Objekts der richtigen Kategorie zu:
Lösung
| window.x |
Eigenschaft |
Methode |
closed |
Speichert, ob ein Fenster mittlerweile geschlossen wurde. Kann eingesetzt werden, um die
Existenz eines Fensters abzufragen, bevor Anweisungen zum Verändern des Fensters folgen. |
|
close |
|
Schließt ein Fenster. Erwartet keine Parameter. |
forward |
|
Entspricht bei normalen Webseiten einen Klick auf den Vorwärts- Button. |
name |
Speichert den Namen eines Fensters. |
|
status |
Speichert oder setzt den aktuellen Inhalt der Statusleiste. |
|
toolbar |
Abfrage, ob ein Fenster eine eigene Button- Leiste hat.
Werte true | false |
|
focus |
|
Macht ein Fenster zum aktiven Fenster. Sinnvoll bei Verwendung von zwei Fenstern oder Frames. |
scrollbars |
Abfrage, ob in einem Fenster gescrollt werden kann. Hat selbst die Eigenschaft visible mit Werten true | false. |
|
open |
|
Öffnet ein neues Fenster. Erwartet mindestens die Zieladresse der zu öffnenden Datei
und den Fensternamen als Parameter. Kann zusätzlich Angaben zum Aussehen des neuen Fensters
enthalten. |
[Lösung schließen]
-
Sie können in einem JavaScript- Text allein von der Schreibweise her
Methoden und Objekte unterscheiden. Welche Antwort ist richtig?
Lösung
Auf die Eigenschaft folgt immer ein Klammer- Text ().
Methoden erkennt man an folgenden " ".
Methoden werden von Klammern begleitet; diese können jedoch leer sein,
wenn keine Parameter übergeben werden.
[Lösung schließen]
-
Ergänzen Sie im folgendem Text korrekt mit Eigenschaft(en) oder Methode(n).
Lösung
Methoden eines Objekts sind objektgebundene Funktionen. Mithilfe einer solchen
Methode können z.B. Fenster geöffnet werden, zu einer bestimmten Position gescrollt
werden etc. Eigenschaften dagegen stellen eine Art Variable dar, die bestimmte Statusmeldungen
beinhaltet, z.B. Fensternamen, ob momentan die Menüleiste des Browsers eingeblendet ist, die
Breite des gesamten Fensters etc. Interessant ist hierbei, dass die Werte in vielen Fällen auch
durch ein JavaScript- Programm geändert werden können.
[Lösung schließen]
Aufgabe 3: Laufschrift und Zeichenzählen in JavaScript:
In diesem Programm werden zwei Felder definiert. Das erste Feld dient zum Anzeigen der
Laufzeile. Das zweite Feld ermöglicht das Aufzählen von eingegebenen Zeichen.
Das JavaScript- Programm ist in die Webseite eingebettet. Es wird gestartet, wenn die Webseite geladen wird.
-
Im folgenden Code sehen Sie den größten Teil dieses Beispiels. Es
wurde an einigen Stellen beschädigt (siehe ????). Sie sollen es wieder zum
Laufen bringen. Schreiben Sie Ihre Lösung nach dem Listing auf.
(Ein Hinweis: die Anzahl von Fragezeichen entspricht nicht der Zeichenfolge!)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Banner und Statistik</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var timer;
var zeile = "+++ Hallo! Im folgenden Formular können
Zeichen gezählt werden. +++";
var counter = 0;
if (timer != null)
clearTimeout (timer);
function abstand ()
{
var padding = "";
for (var n = 0; n < = (100+zeile.length); n++) padding + = "";
return (padding);
}
function scroll ()
{
newZeile=?????() + Zeile + "";
?????.forms[0].elements[0].value=
newZeile.substring(counter,newZeile.length);
if (counter==newZeile.length)
{
counter=0;
}
counter ++;
timer = setTimeout("scroll()", ??????);
return (true);
}
function ??????? (ergebnis)
{
forminhalt=ergebnis.form.haupttext.value
ergebnis.form.anzeige.value=forminhalt.length;
}
// -->
</script
</head>
<body ?????Load="scroll()">
<form method="post">
<p><input type="text" name="text" size="60"></p>
<p><textarea rows="12 name="????" cols="60"></p>
<p><button type="text" onClick="zahl(this)">
Ihr Text enthält <strong>insgesamt</strong></button>
<input type="text" name="anzeige" size="10">
<button type="text"><strong>Zeichen</strong></button></p>
<p><input type="reset" value="Inhalt löschen"></p>
</form>
</body>
</html>
Lösung
Beschädigung 1: newZeile = abstand() + zeile + "";
Beschädigung 2: document.forms[0].elements[0].value = ...
Beschädigung 3: timer = setTimeout("scroll()", 1000);
Beschädigung 4: function zahl(ergebnis)
Beschädigung 5: <body onLoad="scroll()">
Beschädigung 6: <textarea rows="12" name="haupttext" cols="60">
Sie können sich die korrigierte HTML- Seite "Banner und Statistik" anschauen.
[Lösung schließen]
-
Erklären Sie den Programmablauf in Stichworten. Beachten Sie hierbei v.a. die
Variablen (was für Inhalte tragen sie? Welche ändern sich durch die Schleife?
Welche Laufbedingungen gibt es?) sowie die angewendeten Funktionen und Methoden.
Lösung
Im HTML- Body in ein Formular notiert, der aus zwei Hauptteilen besteht. Im ersten Teil
wird ein Lauftext ausgeführt, im zweiten Teil kann vom Benutzer ein Text eingegeben werden,
dessen Länge berechnet und ausgegeben wird. Beide Bestandteile sind an den Script- Bereich
im Header gebunden.
Lauftext:
var timer; |
Die Variable timer wird definiert und gibt im späteren Programmablauf die Geschwindigkeit der Laufschrift an. |
var zeile="+++Hallo!...+++"; |
Die Variable zeile wird als eine Zeichenkette deklariert und stellt späer den Lauftext dar. |
var counter = 0; |
Die Variable counter wird als Zahl deklariert und erhält den Anfangswert 0 |
if (timer != null)
clearTimeout(timer); |
ist timer ungleich null, wird Timeout (Verzögerungszeit) abgebrochen |
function abstand() |
Die Funktion ermittelt die Länge des Textes (gespeichert in Variable zeile) und speichert diesen Wert in der Variablen padding |
function scroll() |
Die Funktion erstellt einen Lauftext, der im ersten Formularelement im Dokument ausgeführt wird. Einzelne Bestandteile der Funktion: |
document.forms[0].elements[0]
.value = newZeile.substring
(counter,newZeile.length);
|
Eine neue Hilfsvariable newZeile wird definiert, die auf Funktion abstand() und den Lauftext zugreift. |
if (counter == newZeile.length)
{counter = 0;} |
Wenn counter dem Wert der Zeilenlänge entspricht, wird er wieder auf 0 gesetzt |
counter ++; |
der counter wird jeweils um 1 erhöht |
timer = setTimeout("scroll()", 1000); |
Die Funktion scroll() wird ausgeführt, mit einer Verzögerungszeit von 1 Sekunde. Wird in der Variablen timer gespeichert. |
return true; |
die Funktion scroll() wird endlos wiederholt |
Textlänge vom eingegebenen Text:
function zahl(ergebnis) |
Die Funktion gibt als Ergebnis die Länge des eingegebenen Textes zurück. Einzelne Bestandteile der Funktion: |
forminhalt = ergebnis.form.haupttext.value; |
auf Formular- Inhalt (Textfeld name="haupttext") wird zugegriffen |
ergebnis.form.anzeige.value = forminhalt.length; |
die Textlänge im Textfeld wird gespeichert und im Feld mit dem Namen "anzeige" ausgegeben |
Formularbestandteile:
<input type="text" name="text" size="60"> |
erstes Formularelement im Dokument, darin wird die Funktion scroll() ausgeführt - startet automatisch, bedingt durch <body onLoad> |
<textarea rows=12" cols="60" name="haupttext"></textarea> |
Mehrzeiliger Textfeld, sein Inhalt wird in der Variablen forminhalt gespeichert. |
<button type="text" onClick="zahl(this)">... </button> |
Button mit der Aufschrift greift auf die Funktion zahl() zurück |
<input type="text" size="10" name="anzeige"> |
im Textfeld wird das Ergebnis aus der Funktion zahl() angezeigt - Textlänge des eingegebenen Textes |
<input type="reset" value="Inhalt löschen"> |
löscht den Inhalt im Textfeld und das Ergebnis der Funktion zahl(), Laufschrift bleibt unberührt |
[Lösung schließen]
Aufgabe 4: Schreiben Sie eine HTML- Seite mit JavaScript, die ein Textfeld für die Eingabe
einer Postleitzahl und einen Absende- Button mit der Aufschrift "Eingabeprüfung" enthält. Beim Anklicken
des Buttons soll geprüft werden, ob die eingegebene Postleitzahl aus 5 Zeichen besteht. Wenn dies
nicht der Fall ist, soll ein Warnfenster mit dem Text "Bitte 5-stellige PLZ eingeben eingeben!"
aufgerufen werden.
Benutzen Sie dazu:
ein gemeinsames HTML- Formular mit dem Namen Feld für das Textfeld (Name Textfeld) und den Button,
eine Funktion checkPLZ im HTML- Header, die vom Button aufgerufen wird und die Längenüberprügung und die Warnfensterausgabe übernimmt.
Achten Sie dabei darauf, dass bei abgeschalteten JavaScript kein Skriptcode auf der Seite erscheint,
sondern nur der Button ohne Funktion bleibt.
Sie benötigen einen Parameter document.forms['feld'].Textfeld
Achten Sie dabei darauf, einfache Anführungszeichen zu verwenden.
Lösung
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Postleitzahl - Check</title>
<meta name="author" content="Margarita Miagkova">
<script type="text/javascript">
function CheckPLZ()
{
var zahl = document.getElementsByName("textfeld")[0].value;
var laenge = zahl.length;
if (laenge != 5)
{
alert('Bitte eine 5-stellige PLZ eingeben!');
}
else
{
alert('Ihre Eingabe war richtig!');
}
}
</script>
</head>
<body>
<h1>Ihre Postleitzahl wird geprüft<h1>
<form name="feld" action="">
<p>Geben Sie eine Postleitzahl ein:</p>
<p><input type="text" size="5" maxlength="5" name="textfeld"></p>
<p><input type="button" value="Eingabeprüfung" onclick="CheckPLZ()"></p>
</form>
</body>
</html>
Sie können sich die HTML-Seite "Postleitzahl - Check" anschauen.
[Lösung schließen]
