Programmierung 1: Skript

Javascript
und
Effekte
Studiengang MMA, 1. Semester, Wintersemester 2006/07

DI Brigitte Jellinek

Version 0.8

ACHTUNG: Kapitel 3 (Javascript für Fortgeschrittene) fehlt noch!

 Inhaltsverzeichnis

1 WAS IST JAVASCRIPT 2 2.6 Javascript-Programme Beispiele 8

1.1 Was kann ein Javascript-Programm 2 2.7 Verhaltensweisen 11
1.2 Probleme mit Javascript 3 3 JAVASCRIPT FÜR FORTGESCHRITTENE 13
1.3 Die Zukunft von Javascript: DOM 3 (fehlt noch!)
2 EINSTIEG IN JAVASCRIPT 4
2.1 Externe Javascript-Datei 4
2.2 Der <script>-Tag im Body 5
2.3 Javascript in einer URL 5
2.4 die onEvent - Attribute 6
2.5 Der <script>-Tag im Head 7

1 Was ist Javascript

JavaScript ist eine Sprache, die 1995 bei Netscape erfunden und in den Brow-
ser Netcape 2.0 eingebaut wurde. Andere Browserhersteller haben sich ange-
schlossen, heute (2004/05) funktioniert Javascript u.a. in Mozilla, Netscape,
Firefox, Internet Explorer, Opera,…

Mit Javascript kann man einer HTML-Seite interaktive Elemente hinzufügen, und
den Browser auf verschiedene Art steuern.

Java ist Es gibt noch eine zweite Programmiersprache mit sehr ähnlichem Namen: Java.
nicht Javascript Die beiden zu verwechseln ist recht peinlich. Java wird an der FH Salzburg bei
ITS und DTV gelehrt, und an den meisten Universitäten im Informatik-Studium.

Javascript wird Ihnen unter dem Namen Actionscript in Flash wieder begegnen.

1.1 Was kann ein Javascript-Programm

Ein Javascript-Programm kann nur Elemente der Webseite und des Web-
browser kontrollieren, sowie neu HTTP-Anfragen an den Webserver schicken.
Sonst nichts. Typische Anwendungen sind:

• Rollover-Bilder – Wenn die Maus über ein Bild bewegt wird, wird dieses
Bild durch ein Neues ersetzt.

• Anzeige (und scrollen) von Text in der Statusleiste des Browsers

• Öffnen von neuen Browserfenstern mit definierter Größe und Position am

Bildschirm
Probleme mit Javascript Seite 3

• Automatisches Ausfüllen von Web-Formularen, z.B. bei Eingabe der

Stückzahl wird der Gesamtpreis (=Preis*Stückzahl) automatisch berech-
net und angezeigt.

• Ein- und Ausblenden von <div>s.

• Prüfen auf Plugin, falls das Plugin vorhanden ist wird auf eine neue Web-
seite weitergeleitet.

• Bei Frame-Seiten: Austausch der Dokumente in mehreren Frames (z.B.

Inhalt und Navigation mit nur einem Click austauschen)

Nicht in Javascript programmieren kann man z.B.:

• Eine Datei am Computer lesen oder verändern.

• Ein anderes Programm als den Browser am Computer starten.

• E-Mail-Adressen aus dem E-Mail Programm lesen.

1.2 Probleme mit Javascript

Das Programmieren von Javascript ist sehr schwierig. Nicht weil die Program-
miersprache schwierig wäre, sondern weil die verschiedenen Browserhersteller
absichtlich unterschiedliche Javascript-Varianten in Ihre Browser einbauen.
Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere
Varianten:

funktioniert in Netscape und Mozilla x = window.innerWidth;

funktioniert in Internet Explorer x = document.body.clientWidth;

In diversen Foren und auf verschiedenen Webseiten werden fertige Javascript-

Programme angeboten. Dabei findet man immer wieder veraltete Javascript-
Programme, die in den neuesten Browser-Versionen nicht mehr funktionieren.
Deswegen ist es wichtig auf das Erstellungsdatum zu achten.

1.3 Die Zukunft von Javascript: DOM

Nachdem die verschiedenen Versionen von Javascript so viel Probleme, und so

viel Mehrarbeit beim Webdesign verursacht hatten befasste sich schließlich das
World Wide Web Konsortium mit dem Problem. Die Lösung des Konsortiums ist
das Document Object Model (DOM), ein allgemeines Modell wie die Webseite
(das Dokument) von einer objektorientierten Skriptsprache aus manipuliert wer-
den kann. Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung
(recommendation) in der Version 1.0.

Das DOM einer Webseite kann man sich als Baum vorstellen, so ähnlich wie die
Ordnerstruktur im Dateisystem. So sind in folgendem Beispiel der markierte
<li>-Tag innerhalb des <ol>-Tags, der <li>-Tag enthält wiederum einen <a>-
Tag.
Seite 4 Externe Javascript-Datei

<html>
<body>
<p>Navigation</p>
<h1>Überschrift</h1>
<div class="intro">
<h2>Dies und Das</h2>
<ol>
<li><a href="#bla">erster Link</a></li>
<li><a href="#bla">zweiter Link</a></li>
</ol>
</div> . . .

Wenn man mit Javascript irgendeinen Teil der Webseite verändern will dann
muss man sich diesen Baum vorstellen. Mögliche Veränderungen wären:

• Mache ein beliebiges Element des DOM unsichtbar (z.B. die ganze Liste)

• Ändere den Style eines beliebigen Elements (z.B. die Schriftart der Über-
schrift)

• Füge neue Elemente ein (z.B. drei zusätzliche Listenpunkte nach dem ersten
Listenpunkte einfügen)

Den Code dazu erlernen Sie in Kapitel 3.

Noch mal die Warnung vor veralteten Javascript-Programmen: mit Hilfe der DOM
lassen sich viele Probleme mit kleinen einfachen Programmen lösen, wo man
früher (ohne DOM) lange komplizierte Programme gebraucht hätte. Deswegen
sollten Sie versuchen aktuelle Javascript-Lösungen für Ihre Probleme zu finden.

2 Einstieg in Javascript
Javascript ist sehr eng mit HTML und CSS verzahnt. Wenn Sie also eine beste-
hende Website warten oder verändern sollen müssen Sie mindestens den beste-
henden Javascript-Code erkennen können, um ihn nicht kaputt zu machen –
auch wenn Sie selbst nicht programmieren wollen.

2.1 Externe Javascript-Datei

Man kann Javascript-Programme in eigenen Dateien speichern, diese haben tra-

ditionell die Endung .js. Wir werden eine Javascript-Library namens Prototype
verwendet. Mit dem <script>-Tag im Head des Dokuments wird die externe
Javascript-Datei eingebunden:

<script src="prototype.js" type="text/javascript"></script>

Wird der <script>-Tag auf dieses Weise (mit dem Attribut src) verwendet,
dann darf er keinen Inhalt zwischen <script> und </script> enthalten.
Der <script>-Tag im Body Seite 5

2.2 Der <script>-Tag im Body

Javascript-Programme können direkt in den body der Webseite mit dem

<script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der
Seite ausgeführt:

<h1>Selbstzerstörung</h1>
<script>
i=10;
while (i>0) {
document.write("<br>in " + i + " Millisekunden");
i--;
}
</script>
<p><strong>Peng!</strong>

Sie müssen das Programm jetzt noch nicht durchschauen. Wichtig ist an dieser
Stelle nur: zwischen <script> und </script> finden Sie den Javascript-Code.
Javascript hat eine komplett andere Syntax als HTML oder CSS, es ähnelt Pro-
grammiersprachen wie C, C++, PHP, Perl, Java (Strichpunkt/Semikolon am Ende
der Zeile, viele geschwungene Klammern).

Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript- Achtung:
Programm. Der Befehl document.write(), der hier für die Ausgabe verwendet document.write()
wird, wurde durch die DOM unnötig. Also: nicht nachahmen. ist veraltet!

2.3 Javascript in einer URL

Als URL kann man auch ein kleines Javascript-Programm angeben, z.B. bei ei-
nem Link:

<a href="javascript:alert('linkt nicht sondern poppt');">js</a> RICHTIG

An diesem Beispiel kann man sehr gut ein klassisches Programmier-Problem

zeigen: Anführungszeichen innerhalb von Anführungszeichen. Wenn man den
Javascript-Link schreibt, macht man vielleicht versehentlich so:

<a href="javascript:alert("linkt nicht sondern poppt");">js</a> FALSCH!

Warum funktioniert das nicht? Hier geht es und die Begrenzungen: Das Attribut
href des HTML-Tags begrenzt seinen Wert mit dem doppelten Anführungszei-
chen. Der Javascript-Befehl alert begrenzt den Text den er anzeigen soll auch
mit mit dem doppelten Anführungszeichen. Das führt zur verwirrung

<a href="javascript:alert("linkt nicht sondern poppt");">js</a> FALSCH!

Wenn der Browser diesen Code verarbeitet, sucht er vom ersten Anführungszei-
chen nach dem href= zum nächsten, und findet nur 17 Zeichen, wie im Code
grau hinterlegt.

Um dieses Problem zu vermeiden verwendet man “innerhalb von doppelten An-

führungszeichen” die einfachen (geraden!) Anführungszeichen als alternative
Begrenzungs-Methode:
 Seite 6 die onEvent - Attribute

<a href="javascript:alert('linkt nicht sondern poppt');">js</a>

RICHTIG

Die “Javascript-in-einer-URL”- Methode ist in HTML-Seiten nicht sehr gebräuch-

lich. Aber Sie werden diese Methode vielleicht noch von Flash aus verwenden.

2.4 die onEvent - Attribute

Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim

Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintre-
ten.

Ereignis Die Begriffe Ereignis und Event sind Fachbegriffe in der Programmierung: Ein
Event ist etwas was die UserIn tut, und was das Programm wahrnehmen kann.
z.B. die UserIn klickt auf einen Button oder bewegt die Maus über einen be-
stimmten Bereich der Webseite. Wenn man eine grafische Oberfläche pro-
grammiert (egal ob in HTML+Javascript oder in Flash+Actionscript oder in Java)
spricht man von ereignisgesteuerter Programmierung.

In HTML+Javascript funktioniert das so: Bei manchen HTML-Tags gibt es Attribu-

te die mit on beginnen (onClick, onSubmit, onLoad,...), als Wert enthalten die-
se Attribute das Javascript-Programm das ausgeführt werden soll.

<h1>Überraschung</h1>
<form>
<input type="button"
value="Start"
onClick="alert('Ihre Festplatte wurde gelöscht')">
</form>

Ein Button wird angezeigt. Erst wenn der Button gedrückt wird, wird das Event
onClick ausgelöst, und damit das Javascript-Programm gestartet. Es erzeugt
ein Popup-Fenster mit dem Text „Ihre Festplatte wurde gelöscht“ (aber es löscht
nicht wirklich die Festplatte!). Das Popup-Fenster muss erst mit einem Klick auf
den OK-Button geschlossen werden, bevor weitere Arbeit mit dem Browser mög-
lich ist.

Ein paar typische Events mit Ihren typischen HTML-Tags:

<body onLoad="..."> Das Programm wird ausgeführt, nachdem die

Der <script>-Tag im Head Seite 7

ganze Seite geladen + fertig dargestellt ist

<a href="..."
onMouseOver="...">
<input type="button"
onClick="..">
<form onSubmit="...">
<input onChange="..">
Das Programm wird ausgeführt wenn die Maus
über den Link bewegt wird (auch: onMouseOut)
Das Programm wird ausgeführt wenn auf den
Button geklickt wird
Das Programm wird ausgeführt wenn der Ein-
sende-Knopf des Formulars betätigt wird, aber
bevor die Daten wirklich gesendet werden
Das Programm wird ausgeführt wenn der Inhalt
des Eingabefeldes verändert wurde

Eine vollständige Liste der Events, und eine vollständige Auflistung welcher
HTML-Tag mit welchem Event kombiniert werden kann, finden Sie in selfhtml1.

2.5 Der <script>-Tag im Head

Es ist üblich, im Head-Bereich des Dokuments Funktionen zu definieren, die Funktionen

später verwendet werden. Eine Funktion ist ein Stück Programm-Code, das
unter einem Namen gespeichert wird (hier lautet der Name setcolor). Später
kann die Funktion dann aufgerufen werden, d.h. der Programm-Code wird aus-
geführt. (hier in den onClick-Events der Buttons).

<head>
<script>
function setcolor( c ) {
b = document.getElementById('farbfeld');
b.style.backgroundColor = c
}
</script>
<body id="farbfeld">
<h1>Farbwahl</h1>
<form>
<input type="button" value="Rot" onClick="setcolor('red')">
<input type="button" value="Grün" onClick="setcolor('#0F0')">
<input type="button" value="Blau" onClick="setcolor('blue')">
</form>
</body>

Funktionen sind nicht unbedingt nötig um ein funktionierendes Javascript-

Programm zu schreiben – es geht hier nur um weniger Tipp-Arbeit und über-
sichtlicheren Code.

1
http://de.selfhtml.org/javascript/sprache/eventhandler.htm
 Seite 8 Javascript-Programme Beispiele

Man hätte den selben Effekt auch mit folgendem Code erzielen können:

<head>
</head>
<body id="farbfeld">
<h1>Farbwahl ohne Funktion</h1>
<form>
<input type="button" value="Rot"
onClick="b=document.getElementById('farbfeld');
b.style.backgroundColor='red';">
<input type="button" value="Grün"
onClick="b=document.getElementById('farbfeld');
b.style.backgroundColor='#0F0';">
<input type="button" value="Blau"
onClick="b=document.getElementById('farbfeld');
b.style.backgroundColor='blue';">
</form>

2.6 Javascript-Programme Beispiele

Ein Browser-Fenster Das Öffnen eines neuen Browser-Fesnters war das klassische Beispiel für ein
öffnen erstes Javascript-Programm. Seitdem Firefox und Internet Explorer aber „Popup
Blocker“ eingebaut haben ist das Öffnen eines neuen Browser-Fensters oft nicht
möglich.

Das wäre der Code (aber er funktioniert nicht mehr zuverlässig:)

<a href="javascript:window.open(
'effekte.html','newwindow','width=800,height=400');">pop</a>

Für alle weiteren Beispiele verwenden wir die Javascript-Library Scriptaculous2.

Dazu müssen Sie die aktuelle Version herunterladen, die ZIP-Datei auspacken,
und alle Dateien aus dem lib- und dem src-Ordner in Ihren Webspace kopieren,
z.B. in einen eigenen Ordner scripts.

1 2 3
Abbildung 1: scriptaculous runterladen(1), auspacken(2),
alle js-Dateien aus dem lib und src-Ordner in den Webspace kopieren(3)

2
http://script.aculo.us/
Javascript-Programme Beispiele Seite 9

In Ihrer Webseite müssen Sie nur drei dieser Dateien als js einbinden:

<script src="scripts/prototype.js" type="text/javascript"></script>

<script src="scripts/scriptaculous.js" type="text/javascript"></script>
<script src="scripts/effects.js" type="text/javascript"></script>

Danach stehen Ihnen viele Effekte zur Verfügung, die Sie auf div, aber auch auf Nicht mit Tabellen!
andere HTML-Tags anwenden können. Sie funktionieren aber nicht mit Tabellen
oder Tabellen-Zeilen oder Tabellen-Zellen!

Die Effekte Highlight, Pulsate und Shake sind besonders einfach zu verwen- Einfache Effekte
den, hier der Shake als Beispiel:

<div onClick="new Effect.Shake(this);">Der Shake Effekt</div>

In der Runden Klammer kann man entweder this schreiben, dann wird der Ef-
fekt direkt auf den HTML-Tag angewandt, dem das Event (hier: onClick) zuge-
hörig ist.

Oder man kann die ID eines HTML-Tags angeben, dieser Tag kann dann auch
„weit weg“ in einem anderen Teil des HTML-Dokuments sein. In folgendem Bei-
spiel werden zwei Bilder in die Webseite eingebunden, wenn man eines anklickt
schüttelt sich das andere:

<img id="bild_eins" src="eins.gif" alt="eins"

onclick="new Effect.Shake('bild_anders')" />
<img id="bild_anders" src="anders.gif" alt="anders"
onclick="new Effect.Shake('bild_eins')" />

Achtung: bei der Verwendung von this braucht man keine Anführungszeichen,
bei der Verwendung einer ID schon, und zwar einfache, gerade Anführungszei-
chen. In folgendem Beispiel werden zwei Effekte mit einem Klick ausgelöst, da-
bei werden die beiden verschiedenen Schreibweisen verwendet:

<div onClick="new Effect.Shake(this); new Effect.Shake('zweites');">

und los!</div>

Weitere Effekte aus dieser Gruppe sind: Fold, Puff, Squish, SwitchOff, Grow.

Bei manchen dieser Effekt kann man noch zusätzliche Einstellungen vornehmen. Parameter
Das können Sie im Dokumentations-Wiki von Scriptaculous nachlesen. Z.B. beim
Effekt Pulsate steht dort:

Wie kann man diese Parameter im Code setzen? Hier ein Beispiel:

new Effect.Pulsate(this, {duration:3, from:0.5, to:1, pulses:3})

 Seite 10 Javascript-Programme Beispiele

Dieser Effekt dauert insgesamt 3 Sekunden, pulsiert dabei von 50% Alpha bis
100%, und zwar drei Mal. Achtung: die Kommazahlen für den Alpha-Wert muss
man in der englischen Schreibweise mit Punkt statt Komma angeben!

Effekt-Paare Es gibt drei Effekt-Paare: Appear und Fade, SlideUp und SlideDown, BlindUp und
BlindDown. Mit dem Befehl Effect.toggle kann jeweils man zwischen den
beiden Effekten hin und her schalten.

<div onclick="new Effect.toggle('fenster', 'blind')">

Der Blind Effekt
<div id="fenster">In diesem sogenannten Fenster steht ein Blumen-
topf: <img src="blume.png" alt="b" width="82" height="84" /></div>
</div>

Was bewirkt dieser Code? Beim ersten Klick wird das ‚fenster’ mit BlindUp ver-
schwinden, beim zweiten Klick mit BlindDown wieder erscheinen, beim dritten
Klick wieder verschwinden, beim nächsten wieder erscheinen, und so weiter.

Drag and Drop Sie können aus jedem HTML-Tag ein „ziehbares“ Element machen. Dabei ver-
wenden Sie nicht das onClick-Event, sondern das onLoad-Event des body:

<body onLoad="new Draggable('kastl');">

<div id="kastl">hier der Text der verschoben wird.</div>

Auch für den Befehl Draggable gibt es verschiedene Parameter. Im folgenden

Beispiel wird das gezogene Element an seine Ausgangsposition zurückkehren.
Nicht das ganze ‚kastl’ ist mit der Maus greifbar, sondern nur der ‚griff’:

<body onLoad="new Draggable('kastl',{revert:true,handle:'griff'});">

<div id="kastl"><div id="griff">zieh nur mich!</div>
hier der Text der mit verschoben wird. Ich kehre an meinen Aus-
gangsort zurück - das nennt man auf englisch revert</div>

Der ‚griff’ beim Ziehen ist praktisch falls im gezogenen Element Text steht, da
das Selektieren des Text und das Ziehen mit der Maus zueinander in Konflikt
stehen.

Mit diesem Effekt können Sie ganz einfach ein Puzzle bauen.

Einfache Animation Mit dem Befehl Move können Sie ein Element an eine neue Position auf der Seite
bewegen:

new Effect.Move('blume1',{ x: -200, y: -170, duration:2});

Der Tag mit der ID ‚blume1’ wird um 200 Pixel nach links und um 170 Pixel nach
unten verschoben. Diese Bewegung wird insgesamt 2 Sekunden dauern. Er
zurückgelegte Weg ist 262 Pixel lang, Das gibt eine Geschwindigkeit von 131
Pixel pro Sekunde. Den Zielpunkt weiß man erst, wenn man die Ausgangspositi-
on des Elements mit einberechnet:

#blume1 {
position:absolute;
left:850px;
top:259px;
width:146px;
height:142px;
Verhalten in DW Seite 11

z-index:1;
}

Von (850/259) eine Verschiebung um den Vektor (-200/-170) ergibt (650/89)

als Zielposition.

Um so eine Animation zu gestalten ist es sinnvoll zuerst eine Skizze anzuferti-

gen, um einen Überblick über die Ausgangspositionen und die Bewegungsvekto-
ren zu bekommen.

Abbildung 2: Planung für eine Animation

In Abbildung 2 sieht man die im oben gezeigten Code definierte Blume rechts
unten: Sie bewegt sich von (850/259) nach (650/89). (Das Koordinatensystem
des Browsers hat seinen Ursprung links oben, die X-Achse weist nach rechts, die
Y-Achse nach unten.)

2.7 Verhalten in DW

In Dreamweaver gibt es das Konzept der Verhaltensweisen – es handelt sich

dabei um eine vereinfachte Darstellung von Javascript für Leute die den Pro-
gramm-Code nicht sehen wollen.

Verhaltensweisen bestehen immer aus zwei Teilen: einem Ereignis, das eine
Aktion auslöst. Die Aktion ist in Wirklichkeit ein kleines Javascript-Programm.
Was kann eine Aktion bewirken?

• Bilder die schon in der Seite sind austauschen

• Ebenen die schon in der Seite sind ein- oder ausblenden und bewe-
gen

• Inhalt von Formularfeldern kann ich ändern

• Meldungen in Popup Fenster anzeigen

• Neue Browser-Fenster öffnen

• Text in der Statusleiste (unten am Browserfenster) anzeigen

Seite 12 Verhalten in DW

Das Ereignis ist in Wirklichkeit ein Javascript-Event an einem HTML-Tag. Wo-

durch können also Aktionen ausgelöst werden?

• OnClick = Klick auf einen Link oder eine Schaltfläche

• OnMouseOver = Maus wird über einen Link bewegt (ohne Klick)

• OnMouseOut = Maus wird von einem Link weg bewegt (ohne Klick)

Soviel zur Theorie. Wie sieht das jetzt praktisch im Dreamweaver aus? In
Abbildung 3 ist ein Link im Dokumentenfenster markiert, es werden also die
Verhaltensweisen dieses einen Links angezeigt. (siehe Titelleiste des Fensters:
„Tag <a>“)

neue Aktion Aktion be-

einfügen arbeiten

Abbildung 3: Verhalten-Fenster in Dreamweaver

An diesem Bild sind Aktionen auf zwei Ereignissen „befestigt“: bei onMouseOver
wir die Aktion „Bild austauschen“ ausgelöst, bei onMouseOut die Aktion „Bil-
daustasch wiederherstellen“.

Wenn Sie eine schon vorhandene Aktion verändern, oder auch nur Ihre Details
einsehen wollen, führen Sie einen Doppelklick auf die entsprechende Zeile im
Verhalten-Fenster aus. So sieht z.B. das Fenster der Aktion „Fenster öffnen“ aus:

Abbildung 4: Fenster zum Bearbeiten der Aktion „Browserfenster öffnen“

Nur wenn Sie ein neues Ereignis und eine neue Aktion einfügen wollen betätigen
Sie den Button mit dem Plus in der linken oberen Ecke des Verhalten-Fensters.
Stichwortverzeichnis Seite 13

3 Javascript für Fortgeschrittene

Kommt noch

4 Anhang

4.1 Stichwortverzeichnis

A M
Appear 10 Move 10

B P
Bewegungsvektor 11 Parameter
BlindDown 10 für Effekte 9
BlindUp 10 Puff 9
Pulsate 9
D pulses 10

document.write 5
R
Draggable 10
duration 10 revert 10

E S
Ereignis 6 Shake 9
ereignisgesteuerte Programmierung 6 SlideDown 10
Event 6 SlideUp 10
Squish 9
F SwitchOff 9

Fade 10
T
Fold 9
from 10 to 10
toggle 10
G
V
Grow 9
Vektor 11
H Verhalten 11

handle 10
W
Highlight 9
write 5