Javascript

WEB-JAVASCRIPT

Grundlagen I
Eigenschaften von Objekten
Events (Ereignisse)
Formulare
Repetition und Aufgaben
Liste der geläufigsten Events und ihre Verwendung
Variablen
Funktionen
Datum und Zeit
Repetition und Aufgaben II
DOM und Hierarchien
ein einfaches if....else.....Beispiel
ein einfaches Rollover
Arrays I
Formulare II: eine Linkliste und eine email-Adresse validieren
Loops (Schlaufen) I - (for-Anweisungen)
Loops (Schlaufen) I - (while-Anweisungen)
Operatoren

Anhang A – (mögliche) Lösungen zu den Übungen
Reservierte Wörter - Wörter, die für Variablen etc... nicht benutzt werden dürfen, da sie für Javascript reserviert sind
Glossar - einige Begriffserklärungen

Für dieses Textbuch gelten folgende Regeln:

Text wird in dieser Schrift geschrieben

Code wird in dieser Schrift geschrieben

Html-Tags sind nicht ‚case-sensitive‘. Sie werden bisher normalerweise gross geschrieben (<HTML>). Wegen der Tendenz, speziell in XML, sie aber mehr und mehr klein zu schreiben, habe ich mich angewöhnt es auch zu tun. Sie können selber enstscheiden ob Sie sie gross oder klein schreiben wollen. Wichtig ist nur, dass Sie bei einer Schreibweise bleiben, wegen der Übersichtlichkeit IhresCodes.

Html ist eigentlich eine Vorbedingung zum Erlernen von Javascript. Die jeweils benötigten html-Tags werden zwar erklärt, es ersetzt aber nicht eine eingehende Beschäftigung mit der Sprache. Ein gutes online-Handbuch auf Deutsch ist unter http://www.teamone.de/selfhtml/ zu finden.

Grundlagen I

Javascript ist NICHT Java. Beide sind Programmiersprachen und beide sind Objektorientiert (bei Javascript mit Vorsicht zu geniessen). Javascript wurde in Anlehnung an Java und auch C++ entwickelt aber es sind andere Sprachen.

Java ist eine komplette Programmiersprache, die kompiliert werden muss, bevor sie vom Computer verstanden wird und ein Programm ausführbar wird. Man kann damit volle Programme erstellen. Sie wurde von Sun Microsystems entwickelt.

Javascript, von Netscape 1995 entwickelt, ist Text, der von einem Browser "gelesen" und verstanden werden muss . Es ist Plattformunabhängig und wird von den neueren Browsern (mehr oder weniger!!!, siehe unten) verstanden.

Javascript ist auch nicht html. Html erlaubt nur statische Webseiten (Animierte *.gif’s etc… sind auch statisch in dem Sinne, dass sie sich innerhalb eines bestimmten Zeitabstand wiederholen). Javascript ermöglicht es in ansonsten statischen html-Seiten eine gewisse Dynamik und Interaktivität einzubringen.

Dafür muss die Syntax von Javascript viel strenger beachtet werden als bei html und die Formatierung der Eingaben kann zum Teil zu Fehlermeldungen führen.

Javascript ermöglicht zum Beispiel die Erstellung oder die Vorbearbeitung (Validation) von:

pop-ups
image-flips (rollover)
Interaktivität (beschränkt) mit den BersucherInnen
cookies
image-maps
validation
kleinere Spiele
sogar kleine Datenbanken, die in der Website integriert werden, etc.....

Die meisten dieser Effekte mussten früher als server-side Skript mit Hilfe eines cgi-Skriptes in einer Sprache wie Perl z.B. erstellt werden, was erstens wegen der Schwierigkeit der Sprache von bedeutend weniger Leuten gemacht werden konnte und zweistens die Bandbreite sehr beanspruchte, da jede "Anfrage" zuerst zum Server geschickt, bearbeitet und dann zurückgeschickt werden musste . Und das, je nach dem, mehrmals pro Besuch. Javascript kann aber trotzdem längst nicht alle Funktionen übernehmen, die mit cgi/Perl machbar sind. (z.B. Datenbank-Integration und aufwendige Suchfunktionen etc…)

Javascript wird oft (aber nicht immer) als client-side Skript benutzt. Das bedeutet, dass der Skript mit der html-Seite mitgeschickt wird und die "Anfragen" dann auf dem Computer der BesucherInnen ausgeführt werden kann.

Netscape und Internet Explorer implementieren die Erneuerungen der Sprache recht unterschiedlich und mit verschiedener Geschwindigkeit. Darum kann man grosse Probleme haben, einen Skript zu schreiben, dass von beiden Browsern richtig wiedergegeben wird (von den restlichen Browsern ganz zu schweigen), vor allem wenn man versucht die allerletzte Version von Javascript konsequent zu benutzen. Darum beschränkt sich dieses Textbuch auf eine frühere Version, die von allen meistens gut verstanden wird. Im Falle eines Versionen-Konflikts wird es auch erwähnt.

Wichtiges zu beachten um Fehlermeldungen zu vermeiden:

Im Unterschied zu html ist Javascript "case-sensitive", unterscheidet also zwischen Gross-/Kleinschreibung. Eine Variable abc ist nicht dasselbe wie Abc, aBc oder ABC etc…

Ein einzelner Befehl sollte immer auf der selben Linie geschrieben sein:

document.write(„Guten Morgen"); ist richtig

document.write(„Guten
Morgen"); ist falsch

Da Textverarbeitungs-Programme ihre eigene versteckte Formatierungen dem Text mitgeben, ist es am besten Javascript in einem Texteditor zu schreiben (Notepad, Editpad etc…)

Aufbau einer html-Seite:

<html>
<body>
</body>
</html>

erweitert: (diese Darstellung ist längst nicht vollständig, genügt aber vorläufig für den Gebrauch dieses Textbuches):

<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

und ein erstes Javascript:

<html>
<head>
<title>Ein erstes Javascipt</title>
</head>
<body>
Das ist jetzt reines html<br>
<script language="javascript">

</script>
Das ist wieder html<br>
<script language="javascript">

</script>
</body>
</html>

Bemerkungen:

Skripte werden zwischen den folgenden tags geschrieben: <script language="javascript">…</script>

diese tags sprechen das hmtl-Dokument an und sind deshalb NICHT case-sensitive!

die folgenden Linien sind für Javascript NICHT notwendig

Sie sind trozdem wichtig. Sie werden von den Browsern, die Javascript nicht verstehen so interpretiert, dass sie (die Browser) alles was dazwischen geschrieben wird ausser Acht lassen sollen. Sonst würden sie den Code als Text auf die Seite schreiben.

// wird benutzt um einen (1-zeiligen) Kommentar dem Skript zuzufügen. Der Browser beachtet die Linie, die danach kommt nicht.

/* … */ wird benutzt um einen mehrzeiligen Kommentar dem Skript zuzufügen. Der Browser beachtet gar nichts davon, was zwischen diesen Zeichen ist.

Noch eine Bemerkung zu Kommentaren. Bei komplizierteren Skripten ist es oft der Fall, dass sogar der/die ProgrammiererIn ein Paar Wochen später nicht mehr genau weiss was damit gemeint ist und warum gewisse Sachen auf diese spezielle Art gelöst werden mussten. Darum ist es allgemein eine gute Stütze für das spätere Bearbeiten und allenfalls Anpassen der Skripte.

man kann mehrere Skripte (wie oben) auf der selben Seite einfügen. Dabei wird der Skript vom Browser zuerst gelesen (und ausgeführt), der zuoberst auf der Seite steht!!!

document.write()

document ist ein Objekt – write() ist eine Methode. Eine Methode kann man sich als eine Aktion vorstellen, die einem Objekt auferlegt wird. Wenn wir uns zum Beispiel einen Klavier vorstellen. Das Klavier sitzt hier und kann von sich aus nichts machen, es ist statisch. Kommt aber jemand und spielt es, dann wird sein Zustand verändert. Es klingt und bringt Töne heraus, die es sonst nicht von sich aus nicht hervorbringen könnte. In diesem Fall ist 'spielen' die Methode, die das Zustand des Klaviers beeinflusst. In Javascript würde es so ausgedrückt: klavier.spielen(), so auch velo.fahren(), buch.lesen(), lammGigot.essen(). Sie können sich unzählige Beispiele dazu ausdenken.

Befehle werden mit Hilfe eines Semicolons (;) voneinander getrennt. Oft kommt es am Ende einer Zeile aber nicht unbedingt. Die Trennung erfolgt Aufgrund der Logik und nicht der Formatierung.

Formatierungen, die das Aussehen des html-Dokuments beeinflussen sollen werden innerhalb des Codes verpackt. z.B.:

document.write("<font color='red'>Hallo");

Sollte man, wie im vorherigen Beispiel, Angaben ineinander verschachteln, die in Ausführungszeichen geschrieben werden müssen, MUSS man zwischen doppelten und einfachen Ausführungszeichen konsequent abwechseln. Beispiel:

document.write("<font color="red">Hallo");

Damit könnte der Browser gar nichts anfangen, da er

"<font color="

als eine Einheit lesen würde und es auf keinen Fall verstehen würde und könnte. Es würde überhaupt keinen Sinn machen.

<br> und <font> sind hmtl-tags

<br> bedeutet linebreak, und veranlasst den Browser einen Zeilenumbruch zu erzwingen.

<font> bedeutet ungefähr Schrift und gibt dem Browser Anweisungen über die Schrift, die benutzt werden soll. Es hat einige Eigenschaften, die damit mitgegeben werden können. "color" ist eine davon, wie auch "size", "weight" etc…

Die Syntax ist <font eigenschaft="...">

Objekte können Methoden haben, die sie beeinflussen (siehe oben). Sie können aber auch Eigenschaften (properties) haben. Die Syntax ist objekt.eigenschaft

Wir können den folgenden Skript lesen:

<html>
<head>
<title>Objekt Eigenschaften</title>
</head>
<body>
<script language="javascript">
document.write("Die Hintergrundfarbe dieser Seite ist: <b>" + document.bgColor+ "</b><br>");
document.write("Das URL dieser Seite ist: <b>" + document.location + "</b><br>");
document.write("Der Titel dieser Seite ist: <b>" + document.title + "</b><br>");
document.write("Der Browser ist: <b>" + navigator.appName + "</b><br>");
document.write("Die Browser-Version ist: <b>" + navigator.appVersion + "</b><br>");
document.write("Die Anzahl der schon vorher besuchten Seiten ist: <b>" + history.length + "</b><br>");
document.write("Die genaue Adresse dieser Seite ist: <b>" + location.host + "</b><br>");
</script>
</body>
</html>

Nicht vergessen, dass die Zeilen keinen Umbruch haben sollen!!!

document, navigator, history, location sind die Objekte.

document bezieht sich auf das momentan aktive Dokument im Browser und kann u.a. folgende Eigenschaften wiedergeben (return):

document.bgcolor (die Hintergrundfarbe des Dokuments)
document.fgcolor (die Vordergrundfarbe des Dokuments, also meistens die Farbe des Textes)
document.linkColor (die Farbe eines nicht-aktiven, nicht-besuchten Links)
document.alinkColor (die Farbe eines aktiven Links)
document.vlinkColor (die Farbe eines besuchten Links)
document.location (das URL des momentanen aktiven Dokuments)
document.referrer (das URL des vorher besuchten Dokuments)
document.title (der Titel des momentan aktiven Dokuments)

navigator bezieht sich auf den zur Dastellung des momentan aktiven Dokuments benutzte Browser.

navigator.appName (Der Name des Browsers)
navigator.appVersion (Die Version des Browsers)

history kann benutzt werden um die SurferInnen um eine bestimmte Anzahl URL's zurückzuschicken oder auch vorwärts (wobei das logischerweise nur dann funktioniert wenn sie von einer anderen Seite den Zurückknopf 1 oder mehrmals gedrückt haben)

history.length (Die Anzahl der Seiten, die schon besucht wurden)

location hat eine ähnliche Wirkung wie document.location, nur kann es selber Eigenschaften einnehmen und damit mehr Informationen abgeben

location.host (Das URL plus den Port den der Computer benutzt)
location.hostname (Nur das URL)
location.href (Hyperlink zu einem URL)

Übung 1:

2 Skripts schreiben, der erste schreibt auf die Seite welchen Browser benützt wird und wie das Dokument heisst. Am Schluss der Seite ist ein link zu einer anderen Seite, die selber den zweiten Skript beeinhaltet, der mitteilt, wieviele Seite vorher besucht wurden.

Die hmtl-Syntax für einen link zu einer anderen Seite ist:

<a href="../dokumentName.htm">TEXT DES LINKS</a>

wobei die Referenz auf das Verzeichnis (../) nur dann nötig ist wenn sich die beiden Skripts nicht im gleichen Ordner befinden.

Nicht vergessen, dass alles was auf die Seite geschrieben werden soll innerhalb des

document.write() Befehls sich befinden muss und auf die Ausführungszeichen achten!

Eine mögliche Lösung ist hier.

Als weitere Übungen, versuchen die gelernten Begriffe in eigene Skripts einzubauen.

Events / Event Handlers

Eine der bekanntesten Implementierung von Javascript ist das Reagieren von Text- oder Bildelementen etc... auf die Aktion der Maus oder auf eine bestimmte Aktion der BesucherInnen. Man nennst sie Events und nennt die 'Skripts' Event Handlers. Eigentlich sind es keine 'richtige' Skripts und benötigen keine <script...></script> Tags. Sie sind in html-Befehle (z.B. <a href...>eingebettet und werden durch die jeweilige Aktion aufgerufen.

Beispiel 1: Ein Event der die Farbe des Dokuments in einer im Code deffinierten Farbe ändert. Die Farbe soll dann ändern, wenn die Maus über den Link fährt. Der event handler ist : onMouseOver

<html>
<head>
<title>Ein onMouseOver Skript</title>
</head>
<body>
<a href="http://www.irgendeinlink.com" onMouseOver="document.bgColor='yellow'; return true"><b>COUCOU!!!</b></a>
</body>
</html>

Zur Syntax: die Event Handler, wie auch viele Begriffe der Javascript-Sprache werden in der in Programmierensprachen üblichen Art geschrieben. D.h. , zusammengesetzte Wörter, die eine einzelne Funktion, Variable etc... ausmachen werden nicht getrennt. Das erste Wort wird klein geschrieben und alle andere fangen mit einem grossen Buchstaben an (onMouseOver, onMouseOut, onBlur, onLoad, onUnload usw...).

Die Zeile onMouseOver="document.bgColor='yellow'; return true" besteht eigentlich aus 2 Befehlen:

onMouseOver="document.bgColor='yellow'; return true" und

onMouseOver="document.bgColor='yellow'; return true" die in dieser Zeile kombiniert sind.

Das erste gibt den Befehl, die Farbe zu ändern. Das zweite gibt den Befehl es eigentlich auszuführen. Wenn man diese zwei Wörter vergisst passiert gar nichts wenn man über den link fährt. Die 2 Befehle werden durch einen Semicolon getrennt.

return ist ein Begriff aus verschiedenen Programmiersprachen, der ungefähr mit 'zurückgeben' übersetzt werden kann. true ist ein 'Boolescher Wert' der ein Resultat wiedergibt, der nur 2 Möglichkeiten hat: ja/nein, true/false. Es hat in allen Sprachen eine grosse Bedeutung.

Jetzt haben wir eine Seite, die die Farbe geändert hat aber wenn man die Maus vom Link wegnimmt passiert nichts mehr. Mit dem onMouseOut Event kann man die Farbe wieder in die ursprüngliche ändern (oder irgendeine andere):

Beispiel 2:

<html>
<head>
<title>Ein onMouseOver / onMouseOut Skript</title>
</head>
<body> <a href="http://www.irgendeinlink.com" onMouseOver="document.bgColor='yellow'; return true" onMouseOut="document.bgColor='white'; return true"><b>COUCOU!!!</b></a>
</body>
</html>

Vielleicht möchtet man beim Einsetzen von einem Event Handler gleichzeitig mehrere Aktionen durchführen. Wir brauchen jetzt ein neues Objekt, window. window.status bezieht sich auf die Statusleiste des Fensters.

alert() ist eine Methode, die einen PopUp aufbringt. Die Syntax dafür ist: alert("texttexttext"). onClick reagiert auf ein Maus-Klick

Beispiel 3:

<html>
<head>
<title>2 verschiedene Aktionen für onClick</title>
</head>
<body>
<a href="http://www.irgendeinlink.com" onClick="alert('Oh, NEIN!!!!!'), window.status='Willst Du mich schon verlassen?' ; return true"><b>COUCOU!!!</b></a>
</body>
</html>

Achten Sie unbedingt auf die Verwendung von return true in den letzten beiden Beispiele!

Übung 2:

Was ist der Unterschied zwischen diesen Beispielen und warum ist die Syntax verschieden. Können Sie es erklären?

Schreiben Sie einen Skript der sich von dem User verabschiedet (alert()), der die Seite verlässt aber vorher muss die Farbe des Texts (also des Links!!!) geändert werden und gleichzeitig die Hintergrundfarbe. Eine mögliche Lösung ist hier. Benützen Sie den onClick Event Handler. Es reagiert auf den Mausclick.

Formulare

Weitere Event Handlers kann man mit Formulare gebrauchen. Ein Formular wird mit dem html-tag <form> erstellt und hat verschiedene Variationen: Link-Button, Text box, Text Area Box, Radio Button, Check Box, Drop Down Box. Falls Sie damit noch nicht vertraut sind können Sie unter http://www.teamone.de/selfhtml/tch.htm nachlesen. Mehr darauf einzugehen würde den Rahmen dieses Kurses sprengen.

Die Grundform eines Formulars kann so aussehen

<form method="..." action="...">
<input type="..." name="...">
</form>

wobei es je nach Formular-Art einige Varianten dieser Form gibt.

Wir nehmen den Beispiel einer einfachen Textbox:

<form>
<input type="text" size="20">
</form>

die 3 Event Handlers: onFocus, onBlur und onChange kann man dazu benutzen:

Beispiel 1 onFocus

<html>
<head>
<title>Der onFocus Event Handler</title>
<body>
<form>
<input type="text" size="20" onFocus="window.status='Hallo, schreibe Deinen Namen bitte in dieser Textbox';">
</form>
</body>
</html>

Beispiel 2 onBlur

<html>
<head>
<title>Der onBlur Event Handler</title>
<body>
<form>
<input type="text" size="20" onBlur="window.status='DANKE, DANKE, DANKE!!!!!';">
</form>
</body>
</html>

Beispiel 3 onChange

<html>
<head>
<title>Der onChange Event Handler</title>
<body>
<form>
<input type="text" size="20" onChange="document.bgColor='pink', alert('Ohhhh, wie schön'); return true">
</form>
</body>
</html>

Eine andere Variante der Formulare ist das Submit-Button

Beispiel mit onClick

<html>
<head>
<title>Submit Button mit onClick</title>
<body>
<form>
<input type="submit" value="Click Mich!" onClick="alert('Ouch!!!')";>
</form>
</body>
</html>

Man kann Event Handlers schon beim Laden des Dokuments einsetzen sowie auch beim Verlassen. Dann werden die Handlers: onLoad und onUnload im <body>-tag eingefügt und werden somit sofort gelesen.

Beispiel onLoad

<html>
<head>
<title>onLoad</title>
</head>
<body onLoad="alert('Wie nett, dass Du mich besuchst!')";>
</body>
</html>

Beispiel onUnload

<html>
<head>
<title>onUnload</title>
</head>
<body onUnload="alert('Gehst Du schon?')";>
Hallo, besuche doch noch <a href="http://www.irgendeineseite.com">diese Seite</a>
</body>
</html>

und kombinieren kann man sie auch

<html>
<head>
<title>onLoad / onUnload</title>
</head>
<body onLoad="alert('Hallo')" onUnload="alert('Und Tschüss!!!')";>
und <a href="http://www.irgendeineseit.ch">tschüss</a>
</body>
</html>

Repetition I

Objekte	Eigenschaften
document	bgColor
	fgColor
	linkColor
	alinkColor
	vlinkColor
	location
	referrer
	title
navigator	appName
	appVersion
history	length

location	host
	hostname

Event Handlers	Methoden
onMouseOver	alert()
onMouseOut	write()
onLoad
onUnload
onFocus
onBlur
onChange

Aufgaben I

Schreiben Sie mindestens 3 eigene Skripts in denen verschiedene Objekte, Eigenschaften, Event Handlers und jede Methode mind. 1x vorkommen. Testen Sie die Skripts auch unbedingt in einem Browser, um zu sehen, ob sie funktionieren.

Liste der geläufigsten Events und ihre Verwendung

Events	Verwendung
onClick, onDblClick, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp	in allen Tags ausser: applet, base, basefont, br, font, frame, frameset, head, html, iframe, meta, param, script, style, title
onBlur	in: a, area, button, input, label, select, textarea
onChange	in: input, select, textarea
onFocus	a, area, button, input, label, select, textarea
onKeyDown, onKeyUp, onKeyPress	input (type=name oder password), textarea
onLoad, onUnload	body, frameset

Variablen

Eine Variable ist ein Behälter für einen veränderlichen Wert. Einer Variable wird einen Wert zugewiesen, der damit mit dem Variablen-Name immer abrufbar ist.

var meinName = new String("Fabienne") - Jetzt kann ich meinen Name immer mit der Variable meinName aufrufen.

oder

var Berechnung = 275 * 54 - Auch hier kann ich das Resultat dieser Multiplikation immer mit der Variablen Berechnnung aufrufen

die Methode prompt()

Sie veranlasst einen pop-up zu erscheinen, in dem etwas geschrieben steht und indem auch Platz ist für die BenutzerInnen etwas zu schreiben. Dieser Wert kann dann in einer Variablen gespeichert werden. Die Syntax ist prompt("..","..")

var nameDerVariable = prompt("Hier kommt der Text der im grauen Teil erscheint", "das kann leer sein oder einen StandardText beinhalten")

z.Beispiel:

<html>
<head> <title>Die prompt() Methode und Variablen</title>
</head>
<body>
<script language="javascript">
var n = prompt("Wer bist DU?","Schreibe Deinen Namen hier");
document.write("Hallo " + n + "! Nett, dass Du mich besuchst.");
</script>
</body>
</html>

Das Wert, das von der Methode prompt() gewonnen wird, wird der Variablen n zugewiesen und ist jetzt generell abrufbar.

Wichtig zu beachten ist dass, wie in einigen Programmiersprachen das Zeichen = nicht die Funktion übernimmt, die wir von der normalen Mathematik kennen. Es ist NICHT ein Gleichheitsoperator, sondern ein Zuweisungsoperator.

a = 3 bedeutet, dass der Variable a momentan der Wert 3 zugewiesen wird. Es kann sich aber ändern und a kann einen anderen Wert zugewiesen werden.

Das Gleichheitsoperator in Javascript ist == (gibt die Werte true oder false zurück)

Übung 3:

Schreiben Sie einen Skript, der den Besucher oder die Besucherin nach dem Namen fragt und ihn/sie dann begrüsst und gleichzeitig ihm/ihr mitteilt, welchen Browser benutzt wurde und wieviele Seiten vorher besucht wurden. Diese beide letzten Angaben sollten aber durch Variablen aufgeruft werden! Eine mögliche Lösung (erst nach eigenem Versuch anzuschauen...) ist hier.

Nehmen Sie diesen ersten Skript und geben Sie html-Formatierungen dazu (Farbe, Schrift etc....)

Funktionen

Eine Funktion ist eine Anweisung oder eine Ansammlung von Anweisungen, die unter einem bestimmten Namen gespeichert sind und somit auch später abrufbar. Variablen spielen eine sehr wichtige Rolle in Funktionen.

Ein ganz einfaches Beispiel:

Sagen wir, Sie wollen in Ihrem Dokument 10 Mal den Text: "Heute ist ein schöner Tag und ich freue mich sehr, dass Du mich besuchst!!!" schreiben (macht keinen Sinn, ich weiss...)

Sie könnten es 10 Mal schreiben aber das wäre wirklich mühsam (und sagen wir, dass es copy/paste nicht geben würde...). Mit der Hilfe einer Funktion kann man die ganze Sache sehr vereinfachen.

<html>
<head>
<title>erste Funktion</title>
<script language="javascript">
function ichBinFaul() {
document.write("Heute ist ein schöner Tag und ich freue mich sehr, dass Du mich besuchst!!!")
}
</head>
<body>
</body>
</html>

Die Funktion ichBinFaul übernimmt jetzt das Schreiben des langen Textes. Beachten Sie auch, dass Funktionen oft im <head>-Teil eines Dokumentes geschrieben werden, damit sie als erste geladen und gelesen werden.

Die Syntax:

Zuerst teilt man dem Browser mit, dass es sich um eine Funktion handelt (function), dann wird ihr einen Namen zugewiesen (in diesem Falle ichBinFaul()) und schliesslich kommt das Anweisungsblock, zwischen geschwungenen Klammern({ }). Man kann Funktionen ineinander verschachteln, mehr dazu später.

function meineFunktion() {.........}

Wenn wir den oben geschriebenen Code in einem Dokument aufmachen gibt es zwar keine Fehlermeldungen aber passieren tut auch nichts. Die Funktion ist zwar definiert aber wir haben sie noch nicht aufgerufen. Wir müssen dem Browser mitteilen, das er die Funktion ausführen soll. In diesem Fall sähe das so aus:

<html>
<head>
<title>erste Funktion</title>
<script language="javascript">
function ichBinFaul() {
document.write("Heute ist ein schöner Tag und ich freue mich sehr, dass Du mich besuchst!!!");
}
</script>
</head>
<body>
<script language="javascript">
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
ichBinFaul();
</script>
</body>
</html>

Also nochmals: Die Funktion wird zuerst definiert und dann später aufgerufen! Es kann, aber muss nicht innerhalb von 2 verschiedenen <script>-tags sein.

Übung 4

Schreiben Sie die Übung 3 in eine Funktion um. Dazu gibt es jetzt diesmal keine Lösung, da es nur ein Paar kleine Veränderungen braucht.

Datum und Zeit

<html>
<head>
<title>Datumsberechnung</title>
<script language="javascript">

</script>
</head>
<body>
<script language="javascript">
aktDatum()
</script>
</body>
</html>

Was passiert in diesem Skript?

Zuerst wird eine Variable definiert, die ad heisst (für aktuelles Datum, man kann sie aber nennen wie man will, abgesehen von den reservierten Wörtern). Der Variable wird der Wert new Date() zugeordnet.

Date ist ein Objekt in Javascript, es 'nimmt' den Wert der Computer-Uhr und gibt es wieder.

Versuchen Sie diesen Code-Teil im <body> zu schreiben

<script language="javascript">
document.write(Date());
</script>

Achtung: Date ist ein Objekt und nicht eine Funktion!!!

Das nächste Konzept ist eines, das ein wenig Angewöhnung braucht und nicht immer sofort verständlich ist. Wir wollen das Objekt Date benutzen und es in unserer Funktion bearbeiten. Das Objekt Date ist aber per Definition ein Objekt, d.h. statisch. Um es unseren Bedürfnissen anpassen zu können müssen wir eine neue Instanz davon erstellen, new Date(). Das ist übrigens parallel zur oben-beschriebenen Art und Weise die Variable var meinName = new String("Fabienne") zu definieren. Auch hier wird ein new String (eine Zeichenfolge von Buchstaben (Text) oder eine Zahl, die keine mathematische Eigenschaften hat, z.B. eine Telefon-Nummer), als Instanz von String mit dem Wert Fabienne erstellt!!! new.... ist also die Art und Weise in Javascript eine Instanz (ungefähr, eine Kopie, zur eigenen Verwendung) eines Objekts zu erstellen.

Wenn Sie den selben Code wie vorher, einfach mit new Date(), anstelle von Date() in Ihrem Browser ausprobieren bekommen Sie einen leicht anderen Resultat, aber beide geben den Wert der Computer-Uhr wieder.

<script language="javascript">
document.write(new Date());
</script>

Da wir jetzt die Variable ad definiert haben, können wir Methoden gebrauchen, um sie zu beeinflussen. Die Mögliche Methoden sind:

getDate() - den Tag als Zahl von 1 bis 31
getDay()- den Tag als Zahl, von Montag (1) bis Sonntag (7)
getMonth()- den Monat
getFullYear()- das Jahr, 4-stellig. Seit dem 1.1.2000 sollte man es so verwenden, früher konnte man getYear() + 1900 schreiben
getHours()- die Stunde
getMinutes()- die Minuten
getSeconds()- die Sekunden

var m = ad.getMonth() +1;

da der Computer bei 0 zu zählen anfängt, muss man beim Monat 1 dazuzählen. Vor dem Jahr 2000 waren noch andere Sachen zu beachten aber seitdem habe ich noch keine anderen Fehler gefunden (ohne Gewähr:-)).

Zurück zum Skript: Jetzt wo die Variable ad definiert ist und wir die Methoden kennen, die dazu kommen können, können wir das Resultat der Variable ad, von der jeweiligen Methode beeinflusst, wieder einer Variable zuweisen. z.B.

var j = ad.getYear();

die Variable j hat jetzt den Wert vom Jahr des aktuellen Datums (resp. die anderen Variable die Werte, die man für sie bestimmt hat) und wir können sie für andere Zwecke gebrauchen. In diesem Fall wird bestimmt, dass sie in der von uns bestimmten Formatierung auf den Bildschirm erscheinen sollen. Dafür bilden wir schon wieder eine Variable z. Sie fügt die anderen Variablen zusammen und der Wert, der jetzt z zugewiesen wurde kann weiter verwendet werden.

var z = t + '.' + m + '.' + j;

Mit dem document.write() Befehl bestimmen wir, dass der Wert der Variablen z auf das Bildschirm wiedergegeben werden soll, und zwar genau dann, wenn wir die Funktion aktDatum() aufrufen!

Übrigens kann man auch den Tag der Woche als Wort eingeben, dazu muss man es aber vorher definieren, mehr dazu in Arrays.

Repetition II

Objekte	Methoden	Eigenschaften
document	write()	bgColor
		fgColor
		linkColor
		alinkColor
		vlinkColor
		location
		referrer
		title
navigator		appName
		appVersion
history		length

location		host
		hostname
window		status
	alert()
date	getDate()
	getDay()
	getMonth()
	getYear()
	getHours()
	getMinutes()
	getSeconds()

Event Handlers
onMouseOver
onMouseOut
onLoad
onUnload
onFocus
onBlur
onChange

Aufgaben II

1. den ganzen Text bisher nochmals durchzulesen, und nochmals, und falls nötig nochmals. Unklarheiten und Fragen unbedingt aufschreiben und im Kurs bringen (oder auch per email fragen).

2. eine eigene Funtkion erstellen anhand der bisher erlernten Begriffe. z.B. eine Seite, die den BesucherInnen einen pop-up beim Laden der Seite wiedergibt, worauf so etwas steht wie 'hallo name, du hast diesen und diesen browser und heute ist usw...".

3. eine Seite, die 5 links aufweist mit dem Namen einer Farbe. Wenn man mit der Maus über die Links fährt ändert sich die Hintergrundfarbe entsprechend

DOM und Hierarchie

Eine wichtige Hilfe beim Erlernen von Javascript ist das Wissen um die Existenz des DOM's (document object model) und der Hierarchien innerhalb eines html-Dokuments.

Es gibt festgesetzte Regel, wie Objekte angesprochen werden dürfen, aber es würde jetzt auch zuviel sein, alles zu erklären, darüber gibt es ganz dicke Bücher und es hat hier kein Platz.

Wichtig ist aber zu wissen, dass diese Beschränkungen in der Art, wie Objekte, Instanzen etc... miteinander kommunizieren können und dürfen, die Art beeinflusst, wie man sie im Code auch ansprechen soll. Die Hierarchie muss eingehalten werden und jedes Objekt wird entsprechend seiner Position angesprochen, z.B. window.document.img.src, wobei window ausgelassen wird, da es sowieso immer dabei sein muss.

Es gibt eine ganz bestimmte Rangordnung, die im folgenden Diagramm in sehr groben Zügen wiedergegeben ist:

Hierarchien

Will man also submit ansprechen, muss man es als (window.)document.form.submit ansprechen.

ein einfaches if...else... Beispiel

Die prompt() Methode bringt einen popup auf die Seite, den man mit JA/Nein, oder OK/Abbrechen anklicken kann. Man hat die Möglichkeit sich zwischen 2 Auswahlen zu entscheiden. Je nach Auswahl muss ja etwas anderes passieren. Das wird mit einem if...else... Statement definiert:

<html>
<head>
<title>confirm()</title>
</head>
<body>
<script language="javascript">
if (confirm("Willst Du diese Seite besuchen?")){
location.href="http://www.eineSeite.com"
}
else{
}
</script>
</body>
</html>

Im else-Statement kann entweder einen anderen URL stehen oder gar nichts, dann passiert auch nichts.

Die Anweisungen, die ausgeführt werden sollen werden in geschwungenen Klammern geschrieben. So:

if{
......
}
else{
.....
}

Eine weitere Möglichkeit, if...else... zu verwenden:

Wir haben gesehen, dass navigator.appName den Name des Browsers zurückgibt.. Wenn wir uns zuerst auf die beiden Browsern Netscape IE beschränken, dann ist der Wert, der zurückgegeben wird respektiv: Netscape und Microsoft Internet Explorer

also der Skript

würde im Browser-Fenster einfach den Namen des Browsers schreiben (bemerken Sie, dass navigator.appName nicht zwischen Ausführungszeichen geschrieben wird. Nur Text, der von html interpretiert werden muss wird zwischen " und " geschrieben!!!)

Wir könnten jetzt eine Variable erstellen, die diesen Wert speichert (den Namen des Browsers). Um es einfachen zu machen nehmen wir nur die ersten 3 Buchstaben des Namens, es genügt um die 2 Browser klar auseinander zu halten. (Mic und Net). Das wird so gemacht:

navigator.appName.substr(#,#)

substring(#,#) ist eine Eigenschaft von string() (bei den Variablen haben wir es schon angetroffen und wird benutzt um nur einen Teil eines strings zurückzugeben. Die beide Zahlen (#,#) geben resp. an mit welchem Zeichen substring anfangen soll die Zeichen zu speichern und wieviele Zeichen es soll speichern. Die Variable wird wie folgt gebildet:

b = (navigator.appName.substr(0,3)); 0,3 weil der Computer bei 0 zu zählen anfängt (also der erste Buchstabe) und 3 weil wir 3 Buchstaben wollen (Mic oder Net)

Der Skript sieht bisher so aus:

<html>
<head>
<title> if....else...</title>
</head>
<body>
<script language="javascript">
b = (navigator.appName.substr(0,3));
</script>
</body>
</html>

Die Variable ist zugewiesen und wartet nur noch bis wir damit etwas anfangen. Wir könnten zum Beispiel je nach Broser einen anderen Text im Browser-Fenster bringen. Da kommen die if...else...Anweisungen in Spiel. Die Überlegung ist die: Zuerst schauen wir ob es Browser a ist, wenn ja, werden Anweisungen ausgeführt, wenn nein, schauen wir ob es Browser b ist, wenn ja, werden diese Anweisungen ausgeführt und wenn nein, dann bleibt nur noch eine Wahl und diese Anweisungen werden ausgeführt. So:

if browser ist browser a
mach das
else if browser ist browser b
mach dies
else
mach halt jenes

Als Code sieht es so aus:

b = (navigator.appName.substr(0,3));
if (b == "Net")

{
document.write("du surfst mit netscape herum");
}

else if (b == "Mic")

{
document.write("ie ist dein browser");
}

else

{
document.write("weder ie noch netscape, mit was surfst du herum?");
}

Wir haben schon mal die 2 Operatoren = und == durchgenommen. Diesmal braucht es ein Gleichheitsoperator, da wir einen genauen Wert abfragen und das Programm nur Ja oder Nein antworten soll! Ja, es ist Mic oder Nein, es ist nicht Mic. Es gibt keinen 'aber, es könnte vielleicht doch etc...'

Der ganze Code sieht so aus:

<html>
<head>
<title> if....else...</title>
</head>
<body>
<script language="javascript">
b = (navigator.appName.substr(0,3));
if (b == "Net")

{
document.write("du surfst mit netscape herum");
}

else if (b == "Mic")

{
document.write("ie ist dein browser");
}

else

{
document.write("weder ie noch netscape, mit was surfst du herum?");
}

</script>
</body>
</html>

Das macht natürlich nicht wahnsinnig viel Sinn, es ist nett aber nicht viel mehr. Man kann sich überlegen, wie so etwas zu brauchen wäre. Eine Möglichkeit ist die, der Seite, je nach Browser verschiedene Formatierungen mitzugeben. Da document.write() eine Funktion ist, die html-auf der Seite schreibt, könnten wir je nach Browser gewisse Formatierungen auf die html-Seite 'einbinden'. Die Schriften werden von Netscape oft etwas kleiner dargestellt als von IE, also behandeln wir die beiden anders. (Achtung, <basefont> gehört zu den tags, die verschwinden werden aber es ist immer noch gültig!)

Schauen Sie sich diesen Code-Beispiel an:

<html>
<head>
<title>Verschiedene Fonts für verschiedene Browser</title>
</head>
<body>

<script language="javascript">
b = (navigator.appName.substr(0,3));
if (b == "Mic")

{
document.write("<basefont size='3'><font color='red'>");
}

else if (b == "Net")

{
document.write("<basefont size ='3.5'><font color='green'>");
}

else

{
document.write("<basefont size='3'>");
}

</script>

Das ist jetzt Text im Body, der von den Browsern in verschiedenen Grössen angezeigt wird. Eigentlich sollte die Grösse der Schrift erst jetzt einigermassen gleich aussehen. Damit wir sehen, ob der Skript funktioniert, sollte die Farbe in Netscape rot und in IE grün sein. Öffnen Sie den Skript in beiden Browsern
</body>
</html>

Übung 5:

navigator.platform gibt den Namen des Betriebssytem zurück, d.h. bs = (navigator.platform.substr(0,3)); speicher die Werte Mac oder Win in die Variable bs .

Schreiben Sie einen Skript, der verschiedene Formatierungen bestimmt für die verschiedenen Browsern auf den verschiedenen Betriebssysteme. Man kann if...else...Anweisungen ineindander verschachteln, dabei ist es sehr wichtig auf die geschwungenen Klammern zu achten. Sich kurz eine Skizze mit nur den if...else inkl. Klammern ist ein Hilfe. Man kann dann den Rest auffüllen.

Eine mögliche Lösung ist hier aber versuchen Sie es zuerst selber herauszufinden, das Prinzip ist dasselbe wie vorher. Nur ein Tip: schreiben Sie NICHT den <body>-tag im Dokument, sondern innerhalb des Javascript-Codes!

ein einfaches Rollover

Sie können 2 eigene Bilder oder die beiden von oben gebrauchen. Wenn Sie 2 eigene Bilder wollen, achten Sie bitte darauf, dass sie wie folgt heissen: ***On.ext und ***Off.ext. , wobei Sie die *** mit was Sie wollen ersetzen, es sollte aber dasselbe für beide Bilder sein. Der Grund dazu wird später erklärt.

Wir könnten jetzt ein simples Codeteil erstellen mit Event Handlers:

<a href="http://www.gehedorthin.org" onMouseOver="....... (die Syntax kennen Sie ja jetzt....)

zuerst zur Repetition: wenn Sie ein Bild in ein html-Dokument einfügen wollen, brauchen Sie diesen Tag:

Jetzt geben wir aber dem Bild einen Namen. Der wird dann für die Syntax in Javascript wichtig. Das Bild mit dem Namen 4EckOff.jpg ist das erste, das auf die Seite erscheinen sollte, also geben wir es zuerst dem <img src>-tag mit, so:

<img src="4EckOff.jpg" border=0 name="bild1"> (als Name kann man sich auch irgendwas ausdenken, wenn man aber mehrere Rollovers auf der selben Seiten hat, sollte es konsistent sein, damit man keinen Durcheinander bekommt)

Und hier kommen die Hierarchien von Javascript ins Spiel. Wenn man das Diagramm anschaut sieht man, dass scr von image hergeleitet wird, das von document und wiederum von window herkommt. Also will man src ansprechen, muss man es als

window.document.image.src

bezeichnen.

window ist sowieso immer dabei und braucht nicht speziell aufgeführt zu sein und für image braucht man den Namen, den man dem Bild gegeben hat. (das stimmt nicht ganz, mehr dazu in Arrays). In diesem Fall wäre es:

document.bild1.src="...", so:

<a href ="http://www.irgendeineseite.ch" onMouseOver="document.bild1.src='4EckOn.jpg'" onMouseOut="document.bild1.src='4EckOff.jpg'">

<img src="4EckOff.jpg" border=0 name="bild1"></a>

Mit dem Namen 'bild1' tut man eigentlich auf dem Dokument einen Platz bezeichnen und für die BEIDEN Bilder reservieren.

Wenn Sie die Bilder holen und diesen Skript ausprobieren haben Sie einen Rollover bewirkt. Die bilder müssen natürlich jetzt im selben Ordner sein, als das html-Dokument, der den Skript enthält.

Welches Bild man *On und welches man *Off nennen soll kann ziemlich verwirrend sein, es kommt natürlich auf das Effekt an, dass man erziehlen will und dann ausprobieren, wie es aussieht...

Das vorherige Skript funtkioniert zwar, ist aber nicht sehr elegant, da je nach Serververbindung, die BenutzerInnen lang warten müssten, bis das 2te Bild geladen wird und der Effekt geht verloren. Darum muss man eine Lösung finden, wie wir dem Browser mitteilen, dass es beide Bilder im Cache laden soll.

Das macht man mit ein bischen Code, das im Header des Dokuments geschrieben wird, wo es zuerst gelesen wird. Dafür muss man wissen, wie gross die Bilder sind (in pixels) und diesen Platz dafür reservieren:

<script language="javascript">
pic1 = new Image(100,100)
pic1.src = "4EckOn.jpg"
</script>

der Name pic1 ist irrelevant. Es geht ja nur darum, das Bild 4EckOn.jpg auch ins Cache zu laden. 4EckOff.jpg ist ja schon durch die html-Seite aufgerufen. Der Unterschied sieht man eigentlich nur online, da lokal die Dateien so oder so schnell laden.

Will man mehrere Rollovers auf der selben Seite haben könnte man die selbe Prozedur einfach wiederholen, mit anderen Namen und im header pic1 bis picx schreiben. Es gibt aber einen besseren Weg (weniger Code), dafür müssen wir zuerst etwas über Arrays wissen.

Arrays I

Es gibt 2 Arten Arrays zu schreiben

<html>
<head>
<title>Array 1</title>
</head>
<body>
<script language="javascript">
tagName = new Array ("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag")
d = new Date()
heute = d.getDay();
document.write("Heute ist " + tagName[heute] + ".");
</script>
</body>
</html>

<html>
<head>
<title>Array 1</title>
</head>
<body>
<script language="javascript">
tagName = new Array (7)
tagName[0]="Sonntag"
tagName[1]="Montag"
tagName[2]="Dienstag"
tagName[3]="Mittwoch"
tagName[4]="Donnerstag"
tagName[5]="Freitag"
tagName[6]="Samstag"
d = new Date()
heute = d.getDay();
document.write("Heute ist " + tagName[heute] + ".");
</script>
</body>
</html>

Bemerkung: Der Computer beginnt bei 0 zu zählen und nicht bei 1 und 0 wird als Sonntag interpretiert, sodass getDay() für die Zahl 0 den String "Sonntag" zurückgibt.

Der Effekt der beiden Skripte ist genau gleich und für welche Art man sich entscheidet ist oft eine Frage der eigenen Vorliebe. Wenn man allerdings mehrere Array definiert im gleichen Skript und man die Werte vergleichen will, macht es (rein optisch) ein wenig mehr Sinn, den ersten Format zu benutzen.

Übung 6

Schreiben Sie diesen Skript um, sodass erstens das Datumsformat so aussieht:

Samstag, den 22ten Januar 2000

Ausserdem sollte es eine Funktion sein und das Datum als Reaktion auf die Eingabe eines Formulars (Event Handler!) erscheinen.

ein mögliche Lösung ist hier

Formulare II

Eine Linkliste kann man in einem 'dropdown'-Menu einfügen. Dazu muss man die Hierarchien von Javascript berücksichtigen. Ein neues Konzept ist auch, dass Funktionen Argumente haben können! Auch eine neue Methode: window.open().

<html>
<head>
<title>Ein Linkliste in einem Dropdown-Menu</title>
<script language="javascript">

function Linkauswahl(Adresse){

Adresse=document.liste.unserLink[document.liste.unserLink.selectedIndex].value;

window.open(Adresse,"neuesFenster");

}

</script>

</head>
<body>
Wähle einen der folgenden Links aus!

<form name="liste">
<select size=1 name="unserLink" onChange="Linkauswahl()">
<option value="0" selected>Hier geht es zu den Links</option>
<option value="http://www.music.ch">die Schweizer Musik-Seite</option>
<option value="http://www.moock.org">Moock....</option>
<option value="http://www.yugop.com">Flash etc....</option>
</select>
</form>
</body>
</html>

Diese Funktion eröffnet ein neues Fenster mit der Methode window.open(). Die Syntax ist:
window.open("URL des Links","Name des neuen Fensters","config=height=xxx,width=xxx")
Die erste Angabe ist klar, den Namen gibt man mit falls man es später ansprechen möchte, config.... formatiert das neue Fenster. In diesem Fall wird anstelle des URL's des Links, das Argument Adresse der Funktion Linkauswahl aufgerufen, hier:

document.liste.unserLink[document.liste.unserLink.selectedIndex].value;

die Hierarchien von Javascript verlangen, dass man die value des Formulars 'select' so aufrufen:

document.NameDesFormulars.NameDerSelectAnweisung.value

da die Select-Anweisung aber 3 verschiedene Optionen hat, muss man definieren, welche der 3 die aktive sein soll:

document.NameDesFormulars.nameDerSelectAnweisung[document.nameDesFormulars.nameDerSelectAnweisung.aktiveOption].value;

Wenn man die Angaben von <select size=XXX....> vergrössert ändert sich die Höhe der Box!!! Die Länge des längsten Textes bestimmt die Breite der Box.

Übung 7

Überlegen Sie, wie man den Skript ändern kann, dass man zuerst einen Button anclicken muss bevor die neue Seite aufgeht.

Das ist sehr einfach und wird mit nur ein Paar wenigen Veränderungen erreicht. Eine mögliche Antwort ist hier (aber bitte zuerst selber versuchen!!!)

Eine andere Variante des Skripts, diesmal öffnet es keinen neuen Fenster und benutzt eine Variable um die richtige Option wiederzugeben:

<html>
<head>
<title>Ein Linkliste in einem Dropdown-Menu</title>
<script language="javascript">

function Linkauswahl(){

var num = document.liste.unserLink.selectedIndex;

location.href = document.liste.unserLink.options[num].value;

}

</script>

</head>
<body>
Wähle einen der folgenden Links aus!

<form name="liste">
<select size=1 name="unserLink" onChange="Linkauswahl()">
<option selected>Hier geht es zu den Links</option>
<option value="http://www.music.ch">die Schweizer Musik-Seite</option>
<option value="http://www.moock.org">Moock....</option>
<option value="http://www.yugop.com">Flash etc....</option>
</select>
</form>
</body>
</html>

Achten Sie bitte auf die verschiedene Syntax. Diesmal muss man die Optionen mit 'options[ ]' definieren!
location.href ist eine der Arten einen Verweis zu einer anderen Seite zu bilden.

eine email-Adresse validieren (die ungefähre Richtigkeit der Angaben prüfen)

Dazu brauchen wir ein Paar neue Operatoren: && und ||
&& ist das logische UND, d.h. dass beide Seiten links und rechts des Operators wahr sein müssen, damit das Wert wahr wiedergegeben wird.
|| ist das logische ODER und gibt den Wert falsch zurück wenn beide Operanden falsch sind, sonst immer wahr.
!= ist NICHT gleich

<html>
<head>
<title>Eingaben überprüfen</title>
<script language="javascript">

function valid(){

if (document.validieren.name.value=="" && document.validieren.email.value==""){

alert("Bitte schreibe doch Deinen Name und Deine email-Adresse ein");

document.validieren.email.focus();return false

}

if (document.validieren.email.value!=""){

if (document.validieren.email.value.indexOf("@")== -1 || document.validieren.email.value.indexOf(".")== -1 || document.validieren.email.value.indexOf(" ")!= -1 || document.validieren.email.value.length<6){

alert("UPPSSS, Diese email-Adresse ist nicht gültig!!!");

document.validieren.email.focus();return false

}

}

}

</script>
</head>
<body>
<form name="validieren" method=POST action="mailto:*****@***.**" onSubmit="return valid()">
<b>Name: </b><input type="text" name="name" size="30" maxlength=35><br>
<b>Email: </b><input type="text" name="email" size="30" maxlength=35><br>
<input type="submit" value="OK"> <input type="reset" value="NEIN"><br>
</form>
</body>
</html>

Im ersten Teil der Funktion wird kontrolliert ob überhaupt eine Eingabe stattgefunden hat. Falls nichts eingeschrieben kommt die alter-Box. Beide Bedingungen müssen nicht erfüllt sein, damit die alert-Box aufkommt, darum der &&-Operator erreicht. Im zweiten Teil der Funktion werden 4 verschiedene Bedingungen geprüft und wenn nur 1 nicht den Eingabebestimmung entspricht reagiert die alert-Box, darum der || Operator. Geprüft wird:

"@"==-1 (keinen @-Zeichen)

"." == -1 (keinen Punkt)

" " != -1 (es hat einen Leerschlag)

...length>6 (die email-Adresse ist kleiner als 6 Zeichen und sowas gibt es nicht)

Hier sehen Sie auch eine andere Verwendung von return, return false, und zwar wird es in der Funktion benutzt um den Focus von der email-Textbox wieder zu entfernen. Im Formular wird damit mit return valid() die Funktion aktiviert.

Übung 8

Schreiben Sie diesen Skript um, sodass es sowohl beim Fehlen eines Namens wie beim Fehlen einer email-Adresse reagiert. Ein mögliche Lösung ist hier.

Loops (Schlaufen) I - (for-Anweisungen)

Die if... else... Bedingungen sind schon bekannt. Vielleicht will man eine solche Bedingung aber repetitiv wiederholen bis ein bestimmtes Zustand erreicht ist. Dafür kann man Schlaufen bilden. Eine for-Schlaufe wird vor allem dann benützt , wenn man einen Anfangszustand haben und - bis das Endzustand erreicht wird - inkrementieren. Ein sehr einfaches Beispiel einer for-Schlaufe:

<html>
<head>
<title>Loop 1</title>
</head>
<body>
<script language="javascript">
for (a = 1; a <=10; a = a + 1){

document.write(a + " ");

}

</script>
</body>
</html>

Das gibt dem Computer die Anweisung für die Variable a den Wert 1 zuzuweisen und bis sie den Wert 10 erreicht hat, ihr immer 1 dazu zu zählen (nicht vergessen, der Operator = ist ein Zuweisungsoperator und kein Gleichheitszeichen!!! Darum kann in Programmiersprachen a=1 - und trozdem gleich 10 sein am Ende der Schlaufe!!!). Mit dem document.write Befehl schreibt man die ganze Schlaufe auf den Bildschirm. Das Resultat ist einfach "1 2 3 4 5 6 7 8 9 10"
a + 1 kann auch einfacher ausgedrückt werden: a++, dann würde die Zeile von oben:

for (a = 1; a <=10; a = a + 1)

so aussehen:

for (a = 1; a <=10; a++)

(Es gibt noch den Operator ++x, aber mehr dazu in Operatoren)

Beim Schlaufen generieren sollte man immer aufpassen, dass sie irgendwo ein Ende finden kann, sehen Sie diesen Beispiel an:

<html>
<head>
<title>Loop 1 / for-Schlaufe</title>
</head>
<body>
<script language="javascript">
for (a = 1; a <=10; a = a * a){

document.write(a + " ");

}

</script>
</body>
</html>

a=1; a<=10; a=a*a - Wenn a=1 ist und a immer mit sich selbst multipliziert wird kann die Zahl 10 ja niemals erreicht wird weil 1*1 immer 1 ergibt. Der Computer ist in diesen Berechnungen gefangen und würde jahrelang 1 mit 1 multiplizieren. Das ist jetzt ein sehr einfaches Beispiel aber die endlos-Schlaufen sind nicht ganz immer so einfach zu erkennen.

Übung 9

Schreiben Sie eine for-Schlaufe, die bis auf 5000 zählt, die Zahlen auf den Bildschirm schreibt und am Schluss mitteilt, dass es fertig ist. Das Ganze sollte von einer Funktion verursacht werden, die von einem Knopf ausgelöst wird. Eine mögliche Lösung ist hier.

Loops (Schlaufen) I - (while-Anweisungen)

Während for-Schlaufen vor allem dann benutzt werden wenn man weiss wieviel Mal sich die Schlaufe wiederholen soll, werden while-Schlaufen dann benützt wenn sich die Anweisung während einer unbestimmten Zeit wiederholen soll, bis ein bestimmtes Zustand erreicht wird. Z.B.:

<html>
<head>
<title>while-Schlaufe</title>
<script language="javascript">

num = prompt("Bitte wähle eine Zahl aus, zwischen 1 und 10","0");

while (num!= 7){

num = prompt("Nein, versuche es nochmals!!!!","0"); }

document.write("JAWOHL!!!");

</script>
</head>
<body>

</body>
</html>

Hier wird nicht einfach 'dazu gezählt' sondern ein bestimmter Zustand erwartet, der in der Anweisung while (num != 7) definiert wird, also solange der Variable nicht den Wert 7 zugeordnet wird muss das Programm die Schlaufe wiederholen. Wichtig ist auch hier zu beachten, dass man der Variable num nach dem ersten Rate-Versuch, sollte er misslingen, eine neue prompt() - Anweisung zuordnen kann, die es aber diesmal beibehalten muss, da es sich innerhalb der while-Anweisung befindet.

Operatoren

Rechenoperatoren:
Addition	+
Substraktion	-
Multiplikation	*
Division	/
Modulo	% (gibt den Rest einer Division zurück)
Inkrement und Dekrement:
	x++, oder ++x ist gleich x = x + 1
	x-- oder --x ist gleich x = x - 1
Zuweisungsoperatoren:
	= weist einer Variable einen Wert zu
	+=	x += 5 ist gleich x = x + 5
	-=	x -= 5 ist gleich x = x - 5
	*=	x= 5 ist gleich x = x 5
	/=	x /= 5 ist gleich x = x / 5
	%=	x %= 5 ist gleich x = x % 5
Vergleichsoperatoren:
gleich	==
ungleich	!=
kleiner, kleiner gleich	<, <=
grösser, grösser gleich	>, >=
Logische Operatoren
logisches UND	&&
logisches ODER	¦¦
Konditional	?: (Bedingung) ? Trifft zu : Trifft nicht zu

Anhang A – (mögliche) Lösungen zu den Übungen

Übung 1

diese Datei als skript1.html speichern

<html>
<head>
<title>Skript 1</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

und jetzt skript2.html erstellen und im selben Ordner speichern

<html>
<head>
<title>Skript 2</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

Übung 2

<html>
<head>
<title>3 verschiedene Aktionen</title>
</head>
<body> <a href="http://www.irgendeineseite.ch" onMouseOver="document.linkColor='white', onMouseOver=document.bgColor='black'; return true" onClick="alert('Adios hombre!!!'); return true">Hier geht's lang</a>
</body>
</html>

Übung 3

<html>
<head>
<title>Prompts und Variablen</title>
</head>
<body>
<script language="javascript">

</script>
</body>
</html>

Übung 5

<html>
<head>
<title>Betriebssystem und Browser</title>
<script language="javascript">
bsys = (navigator.platform.substr(0,3));
bro = (navigator.appName.substr(0,3));
if (bsys == "Win") {

if (bro == "Mic") {

document.write("<body bgcolor='#CCFF00'><basefont size='2'>");

}
else if (bro == "Net"){

document.write("<body bgcolor='#FFF00'><basefont size='2.5'>");

} else {

document.write("<body bgcolor='#CCFF00'><basefont size='2'>");

}

}

else if (bsys == "Mac"){

if (bro == "Mic") {

document.write("<body bgcolor='blue'><basefont size='4'>");

}
else if (bro == "Net"){

document.write("<body bgcolor='red'><basefont size='4.5'>");

} else {

document.write("<body bgcolor='blue'><basefont size='4'>");

}

}

else{

if (bro == "Mic") {

document.write("<body bgcolor='#FFFFFF'><basefont size='7'>");

}
else if (bro == "Net"){

document.write("<body bgcolor='#FFCC00'><basefont size='7.5'>");

}
else {

document.write("<body bgcolor='#FFFFFF'><basefont size='7'>");

}

}

</script>
</head>
und hier kommt der text
</body>
</html>

Übung 6

<html>
<head>
<title>ARRAYS</title>
<script language="javascript">
function datum(){

tagName = new Array ("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");

monatName = new Array ("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");

d = new Date()

heute = d.getDay();

tag = d.getDate();

monat = d.getMonth();

jahr = d.getFullYear();

document.write("Heute ist " + tagName[heute] + " den " + tag + "ten " + monatName[monat] +" " + jahr + ".");

}

</script>
</head>
<body>
<form>
<input type="button" value="Hier ist das heutige Datum!" onClick="datum()">
</form>
</body>
</html>

Übung 7

<html>
<head>
<title>Ein Linkliste in einem Dropdown-Menu</title>
<script language="javascript">

function Linkauswahl(Adresse){

Adresse=document.liste.unserLink[document.liste.unserLink.selectedIndex].value;

window.open(Adresse,"neuesFenster");

}

</script>

</head>
<body>
Wähle einen der folgenden Links aus!

<form name="liste">
<select size=1 name="unserLink">
<option value="0" selected>Hier geht es zu den Links</option>
<option value="http://www.music.ch">die Schweizer Musik-Seite</option>
<option value="http://www.moock.org">Moock....</option>
<option value="http://www.yugop.com">Flash etc....</option>
</select> 
<input type="button" value="OK!" onClick="Linkauswahl()">
</form>
</body>
</html>

Übung 8

<html>
<head>
<title>Eingaben überprüfen</title>
<script language="javascript">

function valid(){

if (document.validieren.name.value==""){

alert("Bitte schreibe doch Deinen Namen ein");

document.validieren.name.focus();return false

}

if (document.validieren.email.value==""){

alert("Bitte schreibe doch Deine email-Adresse ein");

document.validieren.email.focus();return false

}

if (document.validieren.email.value!=""){

if (document.validieren.email.value.indexOf("@")== -1 || document.validieren.email.value.indexOf(".")== -1 || document.validieren.email.value.indexOf(" ")!= -1 || document.validieren.email.value.length<6){

alert("UPPSSS, Diese email-Adresse ist nicht gültig!!!");

document.validieren.email.focus();return false

}

}

location.href="http://www.flashlite.net"

}

</script>
</head>
<body>
<form name="validieren" method=POST action="mailto:*******@***.**" onSubmit="return valid()">
<b>Name: </b><input type="text" name="name" size="30" maxlength=35><br>
<b>Email: </b><input type="text" name="email" size="30" maxlength=35><br>
<input type="submit" value="OK"> 
<input type="reset" value="NEIN"><br>
</form>
</body>
</html>

Übung 9

<html>
<title>for-Schlaufe II</title>
<head>
<script language="javascript">

function zaehlen(){

for (a=1; a<=5000 ; a++) {

document.writeln(a);

}

alert("Ich bin fertig \n Danke!!!");

}

</script>
<body>
<form >
<input type="button" value="Rechne!" onClick="zaehlen()">
</form>
</body>
</html>

Reservierte Wörter

abstract, boolean, byte, case, catch, char, const, default, do, double, extends, false, final, finally, float, function,

goto, implements, import, instanceof, int, interface, long, native, null, package, private, protected, public, return,

short, static, super, switch, synchronized, throw, throws, transient, true, try, var, void,

Glossar (diese Erklärungen sind auf keinen Fall vollständig, sondern beziehen sich auschliesslich auf den Gebrauch in diesem Textbuch)

alert() - eine Methode, die einen popup-menu aufruft auf den man nur mit OK reagieren kann

array

client-side / server-side - bezieht sich u.a. auf den Ort, wo Skripte ausgeführt werden. Server-side bedeutet, dass ein Skript auf dem Server ausgeführt wird, wo die Webseite liegt oder auf sonst einem Server, an dem sich die Webseite zur Ausfphrung des Skripts wendet. Client-side bedeutet, dass ein Skript auf dem Computer der BesucherInnen ausgeführt wird.

confirm() - eine Methode, die einen popup aufruft der eine Eingabe (OK/Abbrechen) erfordert

Eigenschaften

Events

Fehlermeldungen - Daran muss man sich gewöhnen, es ist – nicht nur – am Anfang üblich immer wieder etwas zu vergessen, einen Komma falsch zu setzen oder eine Klammer offen zu lassen etc… Es gibt 2 Arten Fehlermeldungen

Syntax Error: da hat man irgendetwas offen gelassen, Klammer etc… oder einen Tipfehler eingebaut oder der Aufbau des Skriptes ist unlogisch. (siehe Syntax)

Runtime Error: da hat man einen falschen Befehl benutzt und Javascript kann sich absolut keine Vorstellung davon machen, was wir eigentlich erziehlen möchten.

Die Fehlermeldungen beeinhalten oft die Nummer der Zeile, wo sich der Fehler befindet. Bei einem langen Skript kann es Fehler auf verschiedenen Zeilen geben. Sehr oft löst man alle Fehler indem man den ersten beseitigt.

Funktion (function)

html - Hyper Text Markup Language, im Moment die Hauptsprache im Internet, die von einem Browser gelesen und in einer Form wiedergegeben wird, die uns ermöglicht die Seiten zu sehen.

If...Else -

Kommentar

Loop

Methode - eine Aktion, die für sich selbst agieren kann oder einen Objekt in sich oder in seinen Eigenschaften beeinflussen und verändern kann

Objekt

onBlur

onLoad

onMouseOver

onMouseOut

onUnload

prompt() - eine Methode, die einen popup aufruft, der eine Eingabe (Texteingaben) erfordert

Syntax - die von der Sprache verlangte Art und Weise bestimmte Sachen auszudrücken, aufzuschreiben, damit sie verstanden werden können.

Variable - ein Behälter, der einen für den Zwecks der momentanen Prozedur zwischengespeicherten Wert enthält.