Websiteentwicklung: JavaScript: Das erste Programm (Hallo Welt)
Aus Wikibooks
<< Der script Tag | Inhaltsverzeichnis | Index | Werte und Variablen >>
Inhaltsverzeichnis |
[Bearbeiten] Warum Hallo Welt! / Hello World
Als erstes ein Programm zu schreiben, was nichts anderes tut, als in irgendeiner Form den berühmten Satz „Hello World!“ oder „Hallo Welt!“ auszugeben ist eine alte Programmier(er)-Tradition. In JavaScript gibt es (wie auch in allen neueren Programmiersprachen) mehrere Möglichkeiten, diese Nachricht auszugeben.
[Bearbeiten] Beispiele
[Bearbeiten] Ausgabe in einer Alert-Box
<html> <head> <title>Hallo Welt in JavaScript</title> <script type="text/javascript">
//Ausgabe von Hallo Welt! mit einer Alert-Box
alert("Hallo Welt!");
</script>
</head>
<body>
<noscript>
Diese Seite wird nur mit JavaScript
korrekt dargestellt. Bitte schalten
Sie JavaScript in Ihrem Browser ein!
</noscript>
</body>
</html>
Wenn Sie diese Zeilen in einem Text-Editor eingeben (oder mit Kopieren - Einfügen übernehmen) und z.B. unter „Hallo.html“ abspeichern können Sie diese Datei entweder durch Doppelklick starten oder durch „Datei öffnen“ in Ihren Browser laden. Die Ausgabe sollte folgendermaßen aussehen:
Erläuterung des Programms:
Die einzelnen Elemente der HTML-Seite und das Gerüst des JavaScript-Programmes wurden bereits bei der Erklärung des script-Tags vorgestellt. Wirklich neu ist hier nur 1 Element:
- Zwischen den script-Tags finden wir die Anweisung „alert("Hallo Welt!");“. „alert“ öffnet ein kleines Fenster und gibt die Meldung, die innerhalb der Klammer steht, in diesem Fenster - einer sogenannten Dialogbox - aus. Weil die Meldung aus Text besteht, muss sie in "..." eingeschlossen werden. Alle Anweisungen innerhalb eines JavaScripts sollten (müssen aber nicht!) mit dem Semikolon („;“) abgeschlossen werden.
[Bearbeiten] Ausgabe in einer Alert-Box mit Hilfe eines Event-Handlers und einer Funktion
<html> <head> <title> Hallo Welt in JavaScript </title> <script type="text/javascript">
function fHallo()
{
//Ausgabe von Hallo Welt! mit einer Alert-Box
alert("Hallo Welt!");
}
</script>
</head>
<body onload="fHallo()">
<noscript>Diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie
JavaScript in Ihrem Browser ein!</noscript>
<h1>
Hallo Welt in Java-Script
</h1>
</body>
</html>
Wenn Sie diese Zeilen in einem Text-Editor eingeben und z.B. unter „HalloWelt.html“ abspeichern können Sie diese Datei entweder durch Doppelklick starten oder durch „Datei öffnen“ in Ihren Browser laden. Die Ausgabe sollte folgendermaßen aussehen:
Erläuterung des Programms:
Neu gegenüber dem ersten Programm sind hier nur 2 Elemente:
- Zwischen den script-Tags finden wir die Definition einer Funktion. Das Schlüsselwort heißt „function“ - gefolgt vom Funktionsnamen hier „fHallo“ und zwei Klammern, zwischen denen der Funktion ein oder mehrere Werte übergeben werden können. In diesem Fall wird keine Werteübergabe vorgenommen. Das Innenleben einer Funktion spielt sich zwischen zwei geschweiften Klammern ab - {.....}. Zwischen der „function“-Zeile und dem öffnenden „{“ dürfen keine Anweisungen stehen - auch keine Kommentare. Der Kommentar, der die Wirkung dieser Funktion beschreibt steht also folgerichtig nach der öffnenden Klammer. Innerhalb der Funktion „fHallo“ finden wir die bereits bekannte „alert“-Anweisung.
- Damit die Funktion beim Laden der Seite ausgeführt wird, muss ein sogenannter „Eventhandler“ her, der auf Ereignisse der Seite oder des Users reagiert - in diesem Falle „onload“, (<body onload="fHallo()">) der beim Laden der Seite ausgeführt wird. Der Eventhandler steht außerhalb des eigentlichen Scripts (in diesem Falle innerhalb des body-Tags) und stellt im Grunde die Verbindung zwischen der HTML-Seite und dem JavaScript-Code her.
[Bearbeiten] Ausgabe in ein neues HTML-Dokument
Übrigens: Wenn du den Quelltext in einen einfachen Texteditor schreibst, erscheint er schwarz-weiß. Einige Texteditoren bieten jedoch die Möglichkeit den Quelltext farblich zu markieren, was die Übersichtlichkeit wesentlich verbessert (sogenannte Syntaxhervorhebung; auch „Syntax-Highlightning“ genannt).
<html> <head> <title> Hallo Welt in JavaScript </title> <script type="text/javascript">
function fHallo()
{
//Ausgabe von Hallo Welt! in ein neues Dokument
with(document)
{
open();
write("<h1>Hallo Welt!<\/h1>"); // <ref>Das ETAGO Zeichen muss maskiert werden http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.2</ref>
close();
}
}
</script>
</head>
<body onload="fHallo()">
<noscript>Diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie
JavaScript in Ihrem Browser ein!</noscript>
</body>
</html>
Wenn Sie diese Zeilen in einem Text-Editor eingeben und z.B. unter „HalloWelt.html“ abspeichern können Sie diese Datei entweder durch Doppelklick starten oder durch „Datei öffnen“ in Ihren Browser laden. Die Ausgabe sollte folgendermaßen aussehen:
Neu gegenüber dem zweiten Programm sind hier 5 Elemente:
- In der Funktion „fHallo“ wird das Objekt „document“ angesprochen. „document“ ist ein Unterobjekt von „window“ und müsste daher eigentlich „window.document“ heißen. JavaScript findet „document“ aber auch ohne „window.“.
- Um nicht immer wieder „document.xxx“ schreiben zu müssen, gibt es die Anweisung „with“ in diesem Falle „with(document)“, gefolgt von „{...}“ die alle Methoden und Eigenschaften zwischen den beiden geschweiften Klammern auf das Objekt „document“ bezieht.
- Mit „open()“ wird das Objekt geöffnet bzw. in diesem Falle neu erzeugt.
- Mit „write(Meldung);“ wird in das geöffnete Dokument geschrieben. In diesem Fall wird nur die reine Meldung in das Dokument geschrieben. Es trägt keinen Titel. Wenn man einen Titel darstellen möchte, muss man den gesamten HTML-Kopf mit Hilfe der Funktion „write“ ausgeben.
- Mit „close()“ wird das Dokument wieder geschlossen. Die Ausgabe funktioniert auch ohne open()“ und „close()“. Dass der JavaScript-Interpreter aber dann Probleme hat, sehen Sie daran, dass das Skript ohne Ende weiterläuft. Die Sanduhr geht vorerst nicht mehr aus. Irgendwann fragt der Browser dann, ob er das Skript beenden soll. Also - im Sinne einer strukturierten, sauberen Programmierung „open()“ und „close()“ verwenden.
[Bearbeiten] Ausgabe in ein Textfeld
<html> <head> <title> Hallo Welt in JavaScript </title> <script type="text/javascript">
function fHallo()
{
//Ausgabe von Hallo Welt! in ein Textfeld
document.form1.text1.value="Hallo Welt!";
}
</script>
</head>
<body onload="fHallo()">
<form name="form1" method="get" id="form1">
<input type="text" name="text1">
</form><noscript>Diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie
JavaScript in Ihrem Browser ein!</noscript>
</body>
</html>
Wenn Sie diese Zeilen in einem Text-Editor eingeben und z.B. unter „HalloWelt.html“ abspeichern, können Sie diese Datei entweder durch Doppelklick starten oder durch „Datei öffnen“ in Ihren Browser laden. Die Ausgabe sollte folgendermaßen aussehen:
Neu gegenüber dem dritten Programm sind hier 4 Elemente:
- Im HTML-Teil wird ein Form-Objekt (Unterobjekt von „document“) mit dem Namen „form1“ erzeugt.
- Innerhalb des Form-Objektes wird ein Textfeld mit dem Namen „text1“ erzeugt.
- Die Ausgabe wird dadurch erzeugt, dass eine Eigenschaft des Textfeldes „text1“, nämlich die Eigenschaft „value“ mit dem Text „Hallo Welt!“ beschrieben wird.
[Bearbeiten] Allgemeines zu den Beispielen
Die vier vorgestellten Lösungen sollten nur einen Ausschnitt aus der Vielfalt der Möglichkeiten von JavaScript aufzeigen. Einzelheiten zu Eventhandlern, Funktionen, Variablen, Objekten, Dialogboxen, Dokumenten ... sind hier unter den Beispielen nur kurz angerissen, um die Programme nicht völlig als Black-Box erscheinen zu lassen. Eine detailliertere Beschreibung dieser Elemente bleibt späteren Kapiteln vorbehalten. Übernehmen Sie die Programmierbeispiele in Ihren Editor (entweder durch Kopieren des Textes - besser aber durch abtippen!!!) und experimentieren mit den Programmen, indem Sie diese verändern und erneut ablaufen lassen. Kombinieren Sie zwei Elemente (geben sie ein neues Dokument und(!) eine Alert-Box aus ... oder was auch immer - zerstören können Sie damit nichts - schlimmstenfalls hängt Ihr Browser in einer Endlosschleife und muss beendet werden. Ein alter Spruch der Leichtathleten gilt in abgewandelter Form auch für Programmierer:
- Laufen lernt man nur durch Laufen
- Programmieren lernt man nur durch Programmieren
Und lassen Sie sich nicht entmutigen, wenn nicht gleich alles klappt! Strategien zur Fehlersuche sind nicht ohne Grund später ein eigenes Kapitel.
[Bearbeiten] Aufgaben + Lösungen
[Bearbeiten] Weblinks
<< Der script Tag | Inhaltsverzeichnis | Index | Werte und Variablen >>
- Fußnoten
