Javascript Grundlagen

Javascript erlaubt jedem WWW-Designer, einfache Programme für seine Homepage zu schreiben. Wir zeigen, wie Sie bereits mit einigen wenigen Befehlen interessante Ergebnisse erzielen.

(erschienen 1997 in PC-Online – einige Standards werden hier nicht korrekt eingehalten. Ich bitte um Nachsicht 😉 )

Um Javascript-Programme zu schreiben brauchen Sie nichts weiter als einen Text-Editor und einen WWW-Browser. Am besten testen Sie Ihre Programme mit dem Internet Explorer von Microsoft und Netscapes Navigator – beide sollten in den aktuellen 3er-Versionen vorliegen.

Grundkenntnisse in der Seitenbeschreibungssprache HTML sind notwenig, um mit Javascript zurechtzukommen. Denn Javascripts sind eingebettet in HTML-Dokumente. Sobald ein WWW-Browser auf die Anweisung

<script language=“Javascript“>

stößt, tritt er in Aktion und interpretiert die folgenden Zeilen bis als Programm. Danach arbeitet er wie gewohnt die weiteren HTML-Zeilen ab:

<html>

<head>

<title>Javascript-Sample</title>

<body>

<h1>Javascript-Beispiel 1</h1>

<script language=“Javascript“>

document.write(„Javascript im ersten Test.“)

</script>

<p><b>Das war Javascript – und nun zurück zu HTML</b>

</body>

</html>

Im Browserfenster erscheinen dann folgende Zeilen:

Javascript-Beispiel 1

Javascript im ersten Test

Das war Javascript – und nun zurück zu HTML

Versteckspiel

Dieses erste Javascript arbeitet ausgezeichnet, sofern es auf einen Javascript-fähigen Client trifft. Eine Menge WWW-Surfer sind aber immer noch mit älteren Browsern wie Mosaic oder dem zeichenorientierten Lynx unterwegs. Diese erkennen das

<script>

-Tag nicht und behandeln die nachfolgenden Programmbefehle wie normalen Text. Um die Darstellung nicht durcheinanderzubringen, sollten Sie Javascript-Programme verstecken.

Hierbei hilft die Kommentar-Anweisung aus HTML:

<script language=“Javascript“>

<!– Das HTML-Kommentar-Tag versteckt die folgendne Programmzeilen

// –>

</script>

Das Ende des HTML-Kommentars müssen Sie wiederum als Javascript-Kommentar markieren, damit er die Ausführung des Programms nicht durcheinanderbringt. Auf den ersten Blick mag das verwirren, doch diese Methode birgt den einzigen Weg, um Darstellungsunfälle zu vermeiden.

Kommentare innerhalb von Javascripts kennzeichnet der Programmierer also mit einem vorangehenden

//

. Den Rest der Zeile ignoriert der Javascript-Interpreter dann. Sollen sich Kommentare über mehrere Zeilen erstrecken, verwenden Sie

/* … */

:

/* Das ist ein längerer,

mehrzeiliger Kommentar

in Javascript */

Ausgabeschalter

Genug Theorie. Kümmern wir uns um die praktische Seite von Javascript. Die typische Einsteigeranweisung in allen Programmiersprachen dient der Ausgabe von Zeichenketten. In Javascript heißt der entsprechende Befehl

document.write(„Text“)

. Statt

„Text“

dürfen beliebig andere Zeichenketten verwenden — sie müssen nur in Anführungszeichen stehen.

Im Prinzip können Sie per

document.write(„Text“)

ein ganzes HTML-Dokument nur als Javascript verfassen, denn der Browser erkennt und interpretiert auch HTML-Tags innerhalb der per Javascript ausgegebenen Texte:

document.write(„<h1>Eine Headline mit Javascript</h1>“)

Weitere Mittel zur Ausgabe von Daten sind die Statuszeile des Browsers oder eine Meldungsbox.

window.status(„Eine spezielle Statusmeldung“)

alert(„Achtung! Hier liegt etwas vor.“)

Die Statusmeldung verschwindet normalerweise sofort wieder. In diesem Beispiel bleibt sie nur sichtbar, weil

alert()

den weiteren Programmverlauf anhält. Wie man eine Statusmeldung länger zeigt, erfahren Sie im zweiten Teil dieses Kurses.

Mit der Anweisung

alert()

sollten Sie vorsichtig umgehen. Denn die Meldungsbox erwartet eine Eingabe des Benutzers — und das hält eigentlich nur unnötig auf. Verwenden Sie Alert also wirklich nur, wenn Sie auf ein ernstes Problem aufmerksam machen wollen.

Variablen in Javascript

Variablen sind Platzhalter für ständig wechselnde Inhalte. Statt also immer wieder eine Zeile wie

document.write(„Ich bin ein Berliner“)

zu schreiben, übernimmt man den Text in eine Variable:

textvar=“Ich bin ein Berliner“

Diese Variable läßt sich dann beliebig wiederverwenden:

document.write(textvar)

window.status=textvar

Wichtig: Wenn Sie in

document.write

eine Variable ausgeben wollen, müssen Sie diese Variable ohne Anführungszeichen eintippen. Ansonsten erscheint nur der Name der Variablen, aber nicht ihr Inhalt.

Variablen lassen sich miteinander verknüpfen:

herkunft1=“Berlin“

herkunft2=“Hamburg“

ichbin=“Ich komme aus „

document.write (ichbin+herkunft1)

document.write („<br>“)

document.write (ichbin + herkunft2)

Die

Anweisung document.write („<br>“)

hat nichts weiter zu tun, als einen Zeilenumbruch zwischen die beiden Herkunftsanweisungen zu schreiben.

Variablen dürfen auch Zahlen enthalten. Das Ergebnis von Rechenoperationen bringt man wiederum in einer neuen Variablen unter:

 

zahl1=10

zahl2=20

addit=zahl1+zahl2

subtrak=zahl1-zahl2

multi=zahl1*zahl2

div=zahl1/zahl2

document.write(„Addition: “ + addit + „<br>“)

document.write(„Subtraktion: “ + subtrak + „<br>“)

document.write(„Multiplikation: “ + multi + „<br>“)

document.write(„Division: “ + div + „<br>“)

Dieses Beispiel zeigt in drei Zeilen die Ergebnisse der vier Grundrechenoperationen mit den beiden Zahlen

zahl1

und

zahl2

.

Die Ausgaberoutine verbindet mehrere Bestandteile mit einem Plus-Zeichen. Wenn das „+“ bei Zeichenketten eingesetzt wird, knüpft es diese beiden Strings aneinander. Ebenso wirkt das Pluszeichen, wenn man eine Zeichenkette mit einer Zahl verbindet: Die Zahl wird hinten an den Text angehängt. Nur wenn zwei oder mehr Zahlenvariablen mit „+“ hintereinandergestellt sind, addiert Javascript die Zahlen.

Sonderfall Pluszeichen

Javascript behandelt mit Pluszeichen verknüpfte Elemente unterschiedlich:

– zwei Zeichenketten:

„Textstring “ + „zweiter Textstring“

ergibt

„Textstring zweiter Textstring“

– eine Zeichenkette und eine Zahl

„Textstring “ + 10

ergibt

„Textstring 10“

– zwei Zahlen

10 + 10

ergibt

20

Das Ergebnis von Stringoperationen läßt sich ebenfalls Variablen zuweisen:

neutext=ichbin + herkunft2

document.write(neutext)

Wie im Beispiel oben gibt der Browser nun die Zeichenkette „Ich komme aus Hamburg“ aus. Eine beliebte Fehlerquelle bei solchen Operationen sind übrigens vergessene Leerzeichen. Wenn die ursprünglichen Zeichenketten keine Leerzeichen am Anfang oder Ende enthalten, dann bilden Sie neutext so:

neutext=ichbin + “ “ + herkunft2

Einer Variablen können Sie jederzeit neue Werte zuweisen:

variable=“Wert“

document.write(variable)

variable=“Neuer Wert“

document.write(variable)

Im Browser erscheint nun zuerst das Wörtchen

„Wert“

und gleich darauf

„Neuer Wert“

.

Eine Besonderheit von Javascript ist, daß man Variablen gemischt verwenden kann — sie dienen wahlweise als Behälter für Zahlen oder Zeichenketten:

wert=10

wert=“Das ist eine zehn: „+ wert

Aus der Ziffernvariablen wert wird so eine Textvariable, die

„Das ist eine zehn: 10“

enthält. Dieses freie Mischen von Variablentypen vereinfacht zwar viele Aufgaben, birgt jedoch Gefahren.

Denn wenn man nicht vorsichtig ist, weist man versehentlich einer Zahlenvariable einen Text zu und versucht später noch einmal, mit dieser Variable zu rechnen. Das geht schief. Professionelle Programmiersprachen wie C oder Java verlangen daher auch mehr Disziplin: Eine Ziffernvariable lassen sich keine Zeichen zuordnen — basta.

Noch eine Spezialität der Variablen zeigt dieses Beispiel: Beim Zuweisen eines neuen Werts dürfen Sie auch den eigenen Wert einer Variablen verwenden. Operationen wie

wert=wert*wert

quadrieren den ursprünglichen Wert — Mathematiker bekommen bei sochen Nicht-Gleichungen allerdings Gänsehaut.

Was wäre wenn

IF-Anweisungen entscheiden anhand eines Wertes, ob bestimmte Anweisungen ausgeführt werden. Diese Anweisungen steht zwischen zwei geschleiften Klammern:

if (zahl < 10)

{  document.write („Diese Zahl ist kleiner als 10“)

}

Derartige Anweisungen lassen sich auch ineinander verschachteln:

if (zahl < 10)

{  document.write („Diese Zahl ist kleiner als 10“)

  if (zahl > 5)

  {    document.write („…aber immerhin größer als fünf“)

  }

}

Zu if gehört else — zu deutsch „anderenfalls“. Else umfaßt Anweisungen, die in Aktion treten, wenn die IF-Bedingung nicht zutrifft:

if (zahl > 5)

{  document.write („…aber immerhin größer als fünf“)

}

else

{  document.write („… und auch noch kleiner oder gleich fünf“)

}

Funktionen in Javascript

Funktionen bilden das Rückgrat sauberer, strukturierter Programmierung. Sie fassen mehrere Programmanweisungen in einem Modul zusammen und geben dieser Zusammenfassung einen Namen:

function test()

{  document.write(„Test“)

  document.write(„Test, Zeile2“)

}

Jedesmal, wenn in Javascript die Funktion

test()

aufgerufen wird, arbeitet der Browser die beiden document.write-Zeilen ab. Hier zeigt sich ein weiterer sinnvoller Einsatz. Statt bestimmte Programmelemente immer wieder aufs Neue zu schreiben, baut man sie einmal in eine Funktion ein und kann sie beliebig oft benutzen.

Damit nicht genug, lassen sich einer Funktion Variablen mit auf den Weg geben:

function add(zahl1, zahl2)

{  ergebnis=zahl1 + zahl2

  return ergebnis

}

document.write(„Das Ergebnis einer einfachen Addition: “ + add(100,20))

In der letzten Zeile ruft Javascript die vorher definierte Funktion

add()

mit den Parametern 100 und 20 auf. add() zählt die zwei Werte zusammen und speichert das Resultat in der Variablen

ergebnis

. Diese Variable verrichtet ihren Dienst nur innerhalb der Funktion — außerhalb kann man nicht auf sie zugreifen. Die beiden Zeilen

add(10,20)

document.write(ergebnis)

brächten als Ergebnis — nichts. Denn „ergebnis“ bleibt lokal in der Funktion. Außerhalb davon ist sie leer.

Also muß die ermittelte Summe einen anderen Weg aus der Funktion finden. Dafür sorgt die Anweisung

return ergebnis

. Sie gibt den Wert der Variablen „ergebnis“ an den aufrufenden Programmbefehl zurück — in diesem Beispiel erscheint das Ergebnis innerhalb des

document.write

-Befehls.

Ein anderer üblicher Weg ist, das Ergebnis einer Funktion an eine neue Variable zu übergeben:

zwischenwert=add(10,20)

Die Variable

zwischenwert

hat dann den Wert 30.

add()




läßt sich mit beliebigen Zahlenwerten beliebig oft aufrufen. Natürlich darf man bei komplexeren Funktionen auch mit mehreren Parametern arbeiten — ideal, wenn man auf komplexe Berechnungen immer wieder zurückgreifen muß.

Funktionen eines Javascript-Programms packt man in den Header einer HTML-Datei, also zwischen

<head>

und

</head>

. Nur dann bleibt garantiert, daß die Funktionen bereits komplett geladen sind, bevor sie zur Ausführung kommen. Denn der WWW-Browser arbeitet die ankommende HTML-Datei Zeile für Zeile ab. Wenn er an einen Funktionsaufruf gerät, in dem ein Befehl sich auf eine noch nicht im Speicher befindliche Funktion bezieht, kommt es zu einem Fehler.

Schleifen lassen

Bleiben als letzes grundlegendes Element von Javascript die Schleifen. Sie wiederholen Programmelemente so oft, wie es der Programmierer will. Einer Schleife muß man mitteilen, wo sie anfangen soll zu zählen, bis wohin sie zählt und in welchen Schritten sie zählt.

for (i=0; i <= 255; i=i+1)

heißt: Nimm zum Zählen die Variable i, fange an, bei 0 zu zählen, zähle solange der Wert i kleiner oder gleich 255 ist und addiere bei jedem Schleifendurchlauf eine 1 zu i. Die Anweisung

i=i+1

läßt sich übrigens abkürzen zu

i++

. Und mit

i

läßt sich innerhalb der Schleife prima arbeiten:

for (i=0; i <= 255; i++)

{ document.write(„Schleifendurchlauf Nummer “ + i + „“)

}

Setzen Sie statt

i++

die Schrittweite

i=i+2

ein und sehen Sie sich diese Schleife nochmals an. Ebenso dürfen Sie den Anfangswert und die Bedingung für das Schleifenende frei modifizieren. Schleifen lassen sich ineinander verschachteln.

Doch Vorsicht: Schleifendurchläufe potenzieren sich mit jeder Ebene. Fügen wir in das Beispiel eine weitere Schleife mit 255 Durchläufen ein, so drehen die beiden Schleifen insgesamt 255 mal 255 Runden — das kostet Rechenzeit.

Beispiel-Listing in Javascript

Das Listing verwendet ausgiebig Variablen und IF-Anweisungen. Diese werten nacheinander die aktuelle Tageszeit aus. Abhängig davon setzen sie eine Hintergrundfarbe. Sollte in der Nacht die Background-Farbe auf Schwarz umschalten, färbt das Script zusätzlich die Schriftfarbe weiß ein.

Die aktuelle Uhrzeit ermittelt das Script mit der Funktion

newDate()

. Ihr Ergebnis weist das Programm der Variablen

jetzt

zu. Aus dieser Variablen operiert jetzt.getHours() die aktuelle Stunde heraus. Diese Stunde durchläuft die

IF

-Anweisungen, bis sie den richtigen Zeitraum findet. Danach beendet

return

die Funktion und gibt den Wert der jeweils zutreffenden Farbvariablen zurück.

Die Funktion sitzt im Header des HTML-Dokuments. Ein weiteres kleines Script ruft diese Funktion zweimal auf: einmal, um die Hintergrundfarbe zu ermitteln, ein weiteres Mal, um gegebenenfalls die Schriftfarbe zu ändern.

<html>

<head>

<title>Der Tag</title>

<script language=“Javascript“>

<!–

function bgfarbe()

{

  //Variablen für die Farben definieren

  morgen_bgfarbe=“red“

  mittag_bgfarbe=“yellow“

  abend_bgfarbe=“lightblue“

  nacht_bgfarbe=“black“

  //Die aktuelle Zeit ermitteln

  jetzt=new Date()

  //Aus der Zeit die Stunde herausfiltern

  stunde=jetzt.getHours()

 

  //Anhand der Stunde ermitteln, welche Tageszeit wir haben

  if (stunde >= 6 && stunde < 11)

  {

    return morgen_bgfarbe

  }

  if(stunde >= 11 && stunde <17)

  {

    return mittag_bgfarbe

  }

  if(stunde >= 17 && stunde < 21)

  {

    return abend_bgfarbe

  }

  if(stunde > 21 || stunde < 6)

  {  

    return nacht_bgfarbe

  }

}

//–>

</script>

 

</head>

<body>

<script language=“Javascript“>

<!–

document.bgColor=bgfarbe()

/* Schnell nochmal die Farbe checken, damit bei schwarzem

Hintergrund weiße Schrift erscheint */

if (bgfarbe() == „black“)

{

  document.fgColor=“white“

}

// –>

</script>

<hr>

<h2>Hallo!</h2>

<p>Dies ist eine Beispielseite, die je nach Tageszeit ihre Hintergrundfarbe wechselt:</p>

<table border=1 cellpadding=5>

<tr><th>Tageszeit</th><th>Hintergrundfarbe</th></tr>

<tr><td>zwischen 6h und 11h</td><td>Rot</td></tr>

<tr><td>zwischen 11h und 17h</td><td>Gelb</td></tr>

<tr><td>zwischen 17h und 21h</td><td>Hellblau</td></tr>

<tr><td>zwischen 21h und 6h</td><td>Schwarz</td></tr>

</table>

</body>

</html>

Goldene Regeln für Javascript-Einsteiger

Sie haben Ihr erstes Programm geschrieben und nichts geht? Keine Angst, das passiert anfangs immer. Beachten Sie bei der Fehlersuche folgende fünf Tips:

1. Sind alle Variablen richtig geschrieben?

90 Prozent aller Fehler gehen auf Buchstabendreher oder andere Fehler in Variablennamen zurück. Und Javascript meldet bei falsch geschriebenen Variablen keinen Error, sondern gibt nur falsche Ergebnisse aus.

2. Ist das Script korrekt eingebunden?

Das schönsta Javascript bringt nichts, wenn es nicht sauber in die HTML-Datei eingebaut ist. Deshalb: Sehen Sie nach, ob

an ihrem Platz stehen und wirklich den gesamten Code umschließen.

3. Sind die Schleifen richtig verschachtelt?

Wenn Sie Schleifen verwenden, müssen Sie diese korrekt ineinander verschachteln. Ansonsten kommt es zu kaum vorhersehbaren Fehlern. Also:

for schleife1

  for schleife2

  …

  schleife2 ende

schleife1 ende

und nicht:

for schleife1

  for schleife2

  …

schleife1 ende

schleife2 ende

Beim Arbeiten mit Schleifen lohnt es sich, die Inhalte immer einzurücken. So behalten Sie auch bei komplexen Schleifenkonstrukten den Überblick.

4. Funktioniert das Script mit beiden Browsern?

Überprüfen Sie Ihr Programm auf jeden Fall mit dem Internet Explorer und dem Netscape Navigator auf einwandfreie Funktion. Denn die beiden Browser verhalten sich durchaus unterschiedlich: Dem Internet Explorer ist die Groß- und Kleinschreibung von Programmanweisungen weitgehend egal. Der Netscape-Navigator dagegen hält in kleinbürgerlicher Manier an der korrekten Schreibweise von Befehlen fest. Statt aber falsche Anweisungen zu monieren, ignoriert er sie. Beispiel: den Befehl document.bgcolor arbeitet der Explorer einwandfrei ab, während der Navigator nur auf document.bgColor reagiert.

5. Sind alle Funktionen, Schleifen und IF-Konstruktionen korrekt abgeschlossen?

Wo eine geschweifte Klammer geöffnet wird, muß sie auch geschlossen werden. Das klingt einfach. Doch wenn man ineinander verschachtelte Anweisungen mit mehreren Klammerebenen programmiert, vergißt man nur allzu schnell, die eine oder andere Klammer wieder zu schließen.

 

Javascript FAQ

Was ist Javascript?

Javascript ist eine Programmiersprache für einfache Steuerungsaufgaben und kleine Anwendungen im World Wide Web. In HTML-Dokumente eingebettet kommen Javascript-Programme als Klartext zum WWW-Browser. Dieser interpretiert die Anweisungen und führt sie aus.

Die Javascript-Sprache enthält objektorientierte Elemente – doch das muß keinen Einsteiger abschrecken. Um einfache Steuerungsaufgaben zu übernehmen, etwa die Navigation zwischen mehreren Seiten oder einfache Eingabeüberprüfungen, reichen einige wenige Kommandos aus. In vielen einfacheren Elementen erinnert Javascript an Basic, Pascal oder C. Wer schon einmal mit diesen Sprachen gearbeitet hat, wird sich in Javascript schnell zurechtfinden.

Javascript basiert auf Livescript, einer Netscape-Entwicklung. Wohl um die Nähe zur Sun-Entwicklung Java zu demonstrieren, benannte man das Produkt in Javascript um. Microsoft brachte inzwischen ein eigenes Javascript-Derivat Jscript auf das Netz.

Was hat Javascript mit Java zu tun?

In erster Linie haben Javascript und Java einen Teil des Namens gemeinsam. Zudem entdeckt man einige Ähnlichkeiten in der Sprachsyntax, also dem Aufbau von Befehlen und Anweisungen. Doch damit haben sich die Gemeinsamkeiten weitgehend erledigt.

Java ist eine vollwertige objektorientierte Programmiersprache. Java-Programme, Applets genannt, kommen als Bytecode zum WWW-Browser. Diesen für Normalmenschen nicht entzifferbaren Code liest der Browser und führt ihn aus. Durch den vorgekauten Zwischencode laufen die Programme schneller ab, als es mit den Javascript-Klartextanweisungen möglich wäre.

Die objektorientierten Eigenschaften mit Vererbung und Klassenhierarchien erfordern viel Einarbeitungszeit. Java ist schwerer zu erlernen als Javascript. Dafür aber ist Java flexibler und schneller.

Wofür kann ich Javascript einsetzen, wofür nicht?

Klassische Javascript-Programme der ersten Generationen sind der Lauftext in der Statuszeile des Browsers, einfache Taschenrechner oder Seitensteuerungsmodule. Und genau hier liegen auch die Vorteile der Sprache. Einfache Aufgaben lassen sich in nur wenigen Zeilen umsetzen. Gerade, wer mit Frames auf seiner Homepage arbeitet, setzt gerne Javascript ein, um etwa mit einem Mausklick die Inhalte gleich mehrerer Frames zu manipulieren. Ebenso eignet sich die Script-Sprache, um Eingaben in Formularen zu überprüfen oder kurze Hilfetexte sowie Meldungen auszugeben.

Überfordert ist Javascript, wenn es um umfangreichere Anwendungen via Internet geht. Textverarbeitungen, spezielle Telnet-Clients oder Chat-Anwendungen sind eindeutig eine Domäne von Java oder ActiveX-Controls.

 

Kann jeder meine Programme lesen und weiterverwenden?

Ja, denn Javascript-Programme kommen als Source-Code zum Browser. Jeder kann Ihr Programm lesen, Elemente daraus entnehmen und weiterverwenden. Doch Sie selbst haben denselben Vorteil. Gerade als Einsteiger lernen Sie viel, wenn Sie einen Blick auf Javascript-Sourcen werfen. Dazu wechseln Sie in die HTML-Ansicht per „Ansicht/Dokumentquelltext“ im Netscape Navigator oder „Ansicht/Quelltext“ im Microsoft Internet Explorer. Häufig sind Javascript-Programme ausführlich kommentiert und erklären, wie sie funktionieren.

Ähnliche BeitrĂ€ge