Um gleich zu Beginn eine einfache Möglichkeit der Benutzerinteraktion zu haben, lernen wir hier zwei JavaScript-Funktionen für die Ausgabe und Eingabe von Texten kennen. Diese Funktionen öffnen jeweils ein kleines Fenster, welches erst vom Benutzer geschlossen werden muss, bevor die restliche Seite weiter ausgeführt wird. Deshalb sollten diese Funktionen in ernsthaften Projekten nur angewendet werden, wenn genau dieses Verhalten erwünscht ist. Wir benutzen sie hier einfach deshalb, damit wir schon früh die sonst etwas theoretischen Kenntnisse in den folgenden ersten Abschnitten des Kurses greifbarer machen können.
Anhand der ersten Codebeispiele können wir uns hier außerdem gleich an die JavaScript-Syntax gewöhnen. Einiges, was hier passiert, wird in späteren Abschnitten des Kurses systematischer behandelt (z.B. im Kapitel über Funktionen). In Beispielen, bei denen der Rest des HTML-Dokuments keine Rolle spielt, werden wir ausschließlich den JavaScript-Code angeben (z.B. innerhalb des <script>-Elements). Zum Testen der Beispiele muss der JavaScript-Code in ein HTML-Dokument eingebettet werden.
Textausgabe mit alert()
Um Text in einer Anzeigebox erscheinen zu lassen, kann er einfach in Anführungsstrichen zwischen die runden Klammern der Funktion alert() geschrieben werden. Damit erhalten wir unseren ersten JavaScript-Befehl in diesem Kurs:
<script>
alert("Bald kannst du JavaScript!");//motivierende Nachricht an Lernende anzeigen
</script>Die alert()-Funktion kann auch andere Inhalte als Text ausgeben (z.B. Zahlen). Über verschiedene Datentypen informiert die nächste Kursseite.
Das Ende eines Befehls wird in JavaScript mit einem Semikolon markiert. Man kann auch mehrere Befehle mit einem Semikolon getrennt hinter einander schreiben. Deutlich übersichtlicher ist es aber meistens, für jeden Befehl eine neue Zeile zu beginnen. Ebenfalls in dem Codebeispiel enthalten ist ein einzeiliger Kommentar. Dieser wird durch zwei direkt aufeinander folgende Schrägstriche eingeleitet und gilt bis zum Ende der Zeile. Alles, was dahinter steht, wird vom Browser ignoriert und dient ausschließlich für Leser des Quelltextes. Bei komplexeren Programmen kann dadurch der Code deutlich verständlicher gemacht werden. Möchte man einen Kommentar über mehrere Zeilen schreiben, so beginnt man ihn mit der Zeichenfolge /* und beendet ihn mit */. Alles dazwischen wird vom Browser ignoriert.
Texteingabeaufforderung mit prompt()
Möchte man den Benutzer zur Eingabe eines Texts auffordern, so gibt es dafür die prompt()-Funktion in JavaScript. Sie erzeugt wie alert() auch eine Anzeigebox, in der nun aber zusätzlich ein Texteingabefeld vorhanden ist. Der Text, den man in zwischen die runden Klammern schreibt, erscheint über dem Eingabefeld (und kann somit dazu verwendet werden, dem Benutzer mitzuteilen was eingegeben werden soll).
<script>
prompt("Welche ist deine Lieblingsprogrammiersprache?");
</script>Beim Testen dieses Codebeispiels fällt auf, dass nach der Eingabe in dem Textfeld und der Bestätigung nichts weiter passiert. In Anwendungsfällen möchten wir natürlich auf die eingegebene Information reagieren und sie in irgendeiner Weise weiter verwenden. Wie das funktioniert, lernen wir im Verlauf des Kurses.