Einführung in Java Script (JS)

Definition von JavaScript

JavaScript (kurz JS) ist eine Skriptsprache und wurde 1995 von Netscape Communications Corp. vorgestellt. JavaScript wurde extra für HTML entwickelt. Ziel war es Dynamik in das bereits bestehende HTML zu bringen.


Funktionsweise von JavaScript

Die Idee von JavaScript ist es, HTML und CSS in verschiedenen Funktionen zu ergänzen. Jede Webseite wendet kleinere oder größere JavaScripte an. Beispielsweise reagiert JavaScript auf die Benutzereingaben im jeweiligen Dokument. Der Benutzer gibt beispielsweise einen Text in ein Formularfeld ein, oder klickt auf ein Element. Daraufhin werden mittels JavaScript Änderungen im aktuell angezeigten HTML-Dokument vorgenommen. Diese Änderungen finden nur im Browser bzw. im jeweiligen Arbeitsspeicher des Rechners statt, solange das Dokument auf dem Web-Server unberührt bleibt.

JavaScripte werden auf dem Rechner des Websurfers fertiggestellt. Man spricht von einer clientseitigen Programmiersprache.


Die grundlegende HTML-Datei

Das Grundgerüst von einer HTML-Datei ist aus dem 2. Kapitel bekannt. Für die Verwendung von JavaScript, wird das <script>-Tag benutzt. Das <script>-Tag wird in den Absatz eingebaut und wird folgendermaßen geschrieben:

<script type=“text/javascript“> Text </script>

Damit wird die Skriptsprache definiert, in der geschrieben werden soll. Zwischen dem Start-Tag und dem End-Tag können nun JavaScript Operationen rein geschrieben werden. Wichtig zu beachten ist, dass auch diese Datei als .html Datei abgespeichert werden muss, da es sich nach wie vor um eine HTML-Datei handelt.

Das erste Programm sieht folgendermaßen aus:

HTML-Code in TextWrangler

Öffnet man die Datei, nachdem man diese unter .html abgespeichert hat, wird eine leere Seite aufgerufen mit einem Fenster, welches die Aussage „Hallo Welt!“ ausgibt.

Der Befehl alert ( ) erzeugt die Ausgabe in einem Hinweisfenster auf dem Bildschirm im Browser. Ebenfalls kann ich neben dem Beispiel anstelle des Textes auch mathematische Formeln ausrechnen lassen und das Ergebnis wiederum mit alert( ) anzeigen lassen. In diesen beiden Beispielen wurde der JavaScript-Code beim Laden des HTML-Dokuments sofort ausgeführt. Häufig soll JavaScript jedoch erst als Reaktion auf eine Benutzereingabe ausgeführt werden (z.B. eine Schaltfläche).

Nun sieht der Code wie folgt aus:

HTML-Code in TextWrangler
Ausgabe im Browser

Im Browser öffnet sich zunächst erst ein Button mit dem Namen „Test“. Klicke ich nun auf diesen Button öffnet sich ein Hinweisfenster mit „Hallo!“. Somit reagiert mein HTML-Dokument erst auf meinen Mausklick.


js-Bibliotheksdatei

Den Code von JavaScript kann man nicht nur in einem HTML-Dokument unterbringen, sondern diesen auch in eine separate Bibliotheksdateien (.js) auszulagern. In der HTML-Datei gibt man im <script>-Tag nur noch an, wo die js-Datei zu finden ist. Vorteile sind vor allem, dass ich eine JavaScript-Datei in mehrere HTML-Dateien einbinden kann.

Test.js Datei in HTML-Dokument einbinden

Das <script>-Tag enthält nun das Attribut src (source) mit Verweis auf die js-Datei. Die js-Datei wird im gleichen Ordner gespeichert wie die HTML-Datei, deshalb reicht die Angabe des Dateinamens aus.

Hier gehts zum nächsten Kapitel.

Erstelle eine Website wie diese mit WordPress.com
Jetzt starten