Erstes JavaScript-Programm erstellen

Wir benötigen den üblichen Aufbau einer HTML-Datei mit dem DOCTYPE, Head- und Body-Bereich (siehe Kapitel https://www.html-seminar.de/html-seitenaufbau.htm).

Für unser erstes JavaScript-Programm programmieren wir das typische „Hallo Welt“ Programm.

Wo steht das JavaScript-Programm

Der JavaScript-Code kann sowohl im Head-Bereich als auch im Body-Bereich (vor dem schließenden </body>) stehen.

Abgrenzung JavaScript zu HTML

Damit der Browser weiß, wo HTML aufhört und JavaScript anfängt, wird das JavaScript-Programm zwischen die HTML-Tags <script> geschrieben.

<script type="text/javascript">
</script>

Somit weiß der Browser, was er interpretieren muss.

Wird HTML5 als DOCTYPE verwendet, ist bei <script> das Attribut type="text/javascript" nicht mehr notwendig. Man wird es aber trotzdem oft bei JavaScript-Programmen sehen, die vor HTML5 erstellt worden sind. Das Attribut stört allerdings nicht, wenn es vorhanden ist. Aber kürzer ist schöner.

<script type="text/javascript">
</script>

Im folgenden Kurs wird i.d.R. nicht mehr das Attribut verwendet und zwecks Übersichtlichkeit auch später nicht mehr <script> bei jedem Beispiel mit angezeigt (wobei <script> notwendig ist).

<script>
</script>

Ausgabe-Funktion alert in JavaScript

Zur Ausgabe von unserem Text „Hallo Welt“ benutzen wir die JavaScript-Funktion alert. Diese Funktion bewirkt, dass auf dem Bildschirm ein Fenster mit dem Inhalt „Hallo Welt“ erscheint.

<script>
alert('Hallo Welt');
</script>

Achten Sie darauf, dass der auszugebende Text in Anführungszeichen steht! Hierbei ist es egal, ob doppelte oder einfache Anführungszeichen genutzt werden.

Jetzt wird unser erstes JavaScript-Programm gespeichert und im Browser Firefox geladen. Wir erhalten eine Ausgabe.

Ausgabe direkt auf Bildschirm

Wenn wir den Ausgabetext direkt auf die Seite schreiben wollen, gibt es dafür einen anderen Befehl. Dazu wird über das DOM-Modell entsprechend der Bereich angesteuert. In der einfachsten Form dann:

<script>
document.write('Hallo Welt');
</script>

Das bewirkt das Ausgeben des Textes direkt in das Browserfenster. Jetzt zurück in unseren Browser, die Seite aktualisieren (dadurch wird das JavaScript-Programm neu ausgeführt) – aktualisieren über F5 oder das entsprechende Symbol.

Wir erhalten nun auf dem Bildschirm die Ausgabe „Hallo Welt“.

Schauen wir in den Quellcode der HTML-Seite – einfach mit der rechten Maustaste auf das Fenster klicken und „Quellcode anzeigen“ auswählen. Man sieht im body-Bereich nichts. Hier sieht man sehr schön, dass JavaScript nicht auf dem Server, sondern auf dem Computer des Nutzers ausgeführt wird. Daher ist der Body-Bereich leer und die Ausgabe wird auf dem Rechner des Nutzers „produziert“.