Für unser erstes JavaScript brauchen wir zunächst einmal eine minimale HTML-Struktur, denn diese Sprache läuft nunmal im Browser und wurde als Ergänzung zu HTML und CSS erdacht. Eine schnelle Möglichkeit dorthin kann z.B. eine Vorlage von Komodo Edit sein. Hier kann man unter "File -> New -> New from Template" eine HTML5-Vorlage auswählen. Wir speichern die Datei in unserem Arbeitsverzeichnis unter "hallowelt.html". Wir sollten noch beachten, den Zeichensatz unten in der Komodo-Statusleiste auf "UTF-8" zu stellen, außerdem müssen wir im <head> noch einen entsprechenden Meta-Tag für diesen Zeichensatz einfügen: <meta charset="UTF-8">
Damit ergibt sich folgender Markup, mit dem wir beginnen können:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
</body>
</html>
Nun ist die Frage, wie wir nun dieser HTML-Seite ein Skript hinzufügen können. Der zunächst schnellste Weg ist (ähnlich wie beim CSS-Stylesheet) der, dass wir das Skript direkt in die HTML-Seite integrieren. Wie es bei CSS einen <style>-Tag gibt, gibt es bei JavaScript den <script>-Tag. Um sicherzustellen, dass die ganze Seite geladen wurde, bevor wir eigene Skripte ausführen, platzieren wir unser <script> vor dem schließenden <body>-Tag.
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//JavaScript kommt hier rein
</script>
</body>
</html>
Innerhalb des <script>-Tags kann endlich das erste Schnipsel JavaScript kommen. Ein Kommentar steht hier schon, dieser wird in JavaScript pro Zeile mit zwei "/" (Slashes) markiert. Für unser "Hallo Welt" verwenden wir die alert-Funktion, die uns in JavaScript zur Verfügung steht.
alert("Hallo Welt!");
Jede Anweisung wird in JavaScript (wie bei einer Deklaration in CSS) mit einem Semikolon abgeschlossen. Das komplette "Setup" für unser erstes Script sieht nun so aus:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//JavaScript kommt hier rein
alert("Hallo Welt!");
</script>
</body>
</html>
Wenn wir diesen Markup nun im Browser ausführen, erscheint "Hallo Welt!" in einem je nach Browser etwas unterschiedlichen Nachrichtenfenster. Was ist dabei nun genau vor sich gegangen? Genauso wie HTML-Tags und die darin befindlichen Inhalte beim Laden der Seite durch den Browser interpretiert und dargestellt werden, wird JavaScript-Code, der innerhalb der <script>-Tags steht, ausgeführt, sobald das "Programm" geladen wurde. Wir haben für die Ausgabe des berühmten "Hallo Welt!" eine Funktion (engl. function) verwendet. Diese Funktion hat den Namen "alert" und man kann ihr in Klammern einen sogenannten Parameter (engl. argument) übergeben. In diesem Fall erwartet die Funktion alert einen Text (engl. String), der dann in dem durch die Funktion geöffneten Nachrichtenfenster angezeigt wird. In JavaScript gibt es viele solcher "eingebauter" Funktionen, die man sofort aufrufen und verwenden kann. Man kann aber auch selbst eigene Funktionen erstellen (definieren), die man dann in eigenen Programmen aufrufen kann. (Wie das geht, erfahren wir etwas später.)
Unsere HTML-Seite wurde also geladen, das HTML interpretiert und dann das Skript ausgeführt. Innerhalb des Skripts wurde die Funktion alert mit dem Parameter "Hallo Welt!" aufgerufen. Dies hat das Nachrichtenfenster mit dem Text "Hallo Welt!" geöffnet. Die Funktionalität ist natürlich nicht spektakulär und der Inhalt ist irgendwie langweilig. Daher wollen wir den Inhalt des Nachrichtenfensters im nächsten Schritt dynamisch machen.
> weiter