Einsendeaufgabe zu Studienheft JSI 2

- JavaScript 2 -

Frage 1

Auf Ihrer HTML-Seite wird ein Bild bild1.gif bisher folgendermaßen eingebunden:

<img src=“bild1.gif“>

Benutzen Sie nun den 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 dem Bild wieder bild1.gif angezeigt werden. Ersetzen Sie dazu die Fragezeichen in der folgenden Zeile:

<img src=“bild1.gif“ ?????=“this.src='bild2.gif'“ ?????='bild1.gif'“>

Mein Script

<img src="bild1.gif" onMouseOver="this.src='bild2.gif'" onMouse-Out="this.src='bild1.gif'">

Was ändert sich für einen Benutzer, bei dem JavaScript nicht unterstützt wird?

Ist bei einem Benutzer JavaScript deaktiviert, oder der genutze Browser unterstützt kein JavaScript, dann bleibt das Bild beim MouseOver unverändert.

Frage 2

a) Objekte haben Eigenschaften und Methoden. Ordnen Sie folgende Begriffe des window-Objekts der richtigen Kategorie zu:

window.xEigenschaftMethode
closed
close
forward
name
status
toolbar
focus
scrollbars
scrollTo

b) Sie können in einem JavaScript-Text allein von der Schreibweise her Methoden und Objekte unterscheiden. Welche Antwort ist richtig?

Auf die Eigenschaftfolgt immer ein Klammer-Text ()
Methoden erkenntman an folgenden ""
Methoden werden von Klammern begleitet; diese können jedoch leer sein, wenn keineParameter übergeben werden.

c) Ergänzen Sie im folgenden Text korrekt mit Eigenschaft(en)oder Methode(n):

Eigenschaften eines Objekts sind objektgebundene Funktionen. Mit Hilfe einer solchen Eigenschaft können z.B. der Print-Befehl aufgerufen werden, Fenster geöffnet werden, zu einer bestimmten Position gescrollt werden etc.
Methoden 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 durch ein JavaScript-Programm geändert werden können.

Frage 3

Laufschrift und Zeichenzählen in JavaScript:

In diesem kleinen Programm werden zwei Felder definiert. Das erste Feld dient zum Anzeigen der Laufzeile. Das zweite Feld ermöglicht das Aufzählen von einem eingegebenen Zeichen.

Das JavaScript-Programm ist in die Webseite eingebettet. Es wird gestartet, wenn die Webseite geladen wird.

a) Im folgenden Code sehen Sie den größten Teil des Beispiels. Es wurde an einigen Stellen beschädigt (siehe ?????). Sie sollen es wieder zum Laufe 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,neuZeile.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"></textarea> </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>

Beschädigung 1:         abstand
Beschädigung 2:         document
Beschädigung 3:         200(Wert bestimmt die Laufgeschwindigkeit
Beschädigung 4:         zahl
Beschädigung 5:         onLoad
Beschädigung 6:         haupttext

Das Onlinebeispielt könnt Ihr HIER einsehen.

b) Erklären Sie den Programmanlauf in Stichpunkten. Beachten Sie hierbei v.a. die Variablen (was für Inhalte tragen sie? Welche ändern sich durch die Schlefe? Welche Laufbedingungen gibt es?) sowie die angewendeten Funktionen und Methoden.

var timer;

Die Variable „timer“ gibt die Geschwindigkeit der Laufschrift an.

var zeile = "+++Hallo! Im folgenden Formular können Zeichen gezählt werden. +++";

Die Variable „zeile“ enthält den zu scrollenden Text

var counter = 0;

Die Variable „counter“ bekommt den Wert „0“ zugewiesen

if (timer != null)
clearTimeout (timer);

Bricht den Timer ab, wenn die Variable „time“ den Wert null hat.

function abstand ()

Die Funktion „abstand“ gibt an, die Länge des Textes an, der gescrollt wird.

function scroll ()

Die Funktion „scroll“ berechnet die Scroll-Funktion des Textes

function zahl (ergebnis)

Die Funktion „zahl“ berechnet die Länge des eingegeben Textes

<body onLoad="scroll()">

während des Ladens der Seite wird JavaScript-Funktion „scroll“ aufgerufen

<textarea rows="12" name="haupttext" cols="60">

erstellt ein 12 Zeilen und 60 Zeichen großes Textfeld mit dem Namen „haupttext“

<button type="text" onClick="zahl(this)">Ihr Text enthält <strong>insgesamt</strong></button>

Durch das Drücken des Buttons wird die Länge des eingegebenen Textes errechnet, und in das nächste Textfeld ausgegeben.

<input type="reset" value="Inhalt löschen">

erstellt einen RESET-Button, der die eingaben des Textfeldes und die Berechnung löscht

Frage 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. Bein 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!“ 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 Längenprüfung und die Warnfensterausgabe übernimmt.

Achten Sie darauf, dass bei abgeschaltetem JavaScript kein Scriptcode auf der Seite erscheint, sondern nur der Button ohne Funktion bleibt.
Sie benötigen dafür einen Parameter.

document.forms['feld'].Textfeld

Achten Sie dabei darauf, einfache Anführungszeichen zu verwenden.

Die Datei liegt hier: Checkpostleitzahl mit JavaScript