Einführung in Javascript

13.12.2016 09:31 Uhr

Javascript ist eine andere Welt, und doch gehört es mit zu HMTL und CSS. Denn erst durch Javascript werden wir „echte“ Interaktivität auf unsere Internetseite bekommen. Anfangs allerdings werden wir Javascript als vollkommen isolierte Welt betrachten, wir nutzen HTML erst einmal nur als Container, um unser Javascript zum Laufen zu bekommen. Diese „Einführung Javascript“ macht uns mit den absoluten Grundlagen vertraut. 

Einführung Javascript – HTML nur Container

Bevor wir unser erstes Javascript ausführen, benötigen wir eine HTML-Seite. Denn Javascript wird in HTML eingebettet, auch wenn wir HTML nur als Container für Javascript nutzen. Daher erstellen wir eine sehr einfache HTML-Seite und fügen einen script-TAG dazu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Einführung Javascript</title>
</head>
<body>

    <p>Sehr einfache Seite</p>

    <script>

    </script>
</body>
</html>

Bitte beachten Sie besonders den zurzeit noch leeren Bereich zwischen den script-TAGs. Innerhalb dieses Bereichs werden wir unser Javascript positionieren. Für den weiteren Verlauf dieser Einführung Javascript wird auf den HTML-Teil verzichtet, das gezeigte Javascript findet sich innerhalb des script-TAGs.

Ein erstes Javascript

Das folgende Javascript gibt eine Message-Box aus, sobald unsere Seite angezeigt wird.

alert('Hallo Kurs');

Diese Message-Box ist das Ergebnis unseres ersten Javascript-Befehls. Wichtig zu verstehen ist, dass Befehle (in diesem Stadium unserer Javascript-Kenntnisse) nacheinander abgearbeitet werden. So können die Ergebnisse vorheriger Befehle einen aktuellen Befehl beeinflussen. Das folgende Code-Fragment gibt daher zwei Boxen aus, mit dem jeweiligen Text.

alert('Hallo Kurs');
alert('Hallo nochmals!');

Variablen als Werte-Container

Eine Variable enthält Werte und kann im Programm anstelle dieser Werte genutzt werden. So erzeugt diese Abfolge von Javascript-Befehlen mehrere Zahlen, die später zusammengerechnet werden. Das Schlüsselwort var dient der Definition einer Variablen

var wert1 = 4;
var wert2 = 3;
var wert3;
wert3 = wert1 + wert2;
alert(wert3);

wert1 und wert2 werden jeweils definiert und mit den Werten 4 bzw. 3 gefüllt. Die Variable wert3 wird definiert und mit dem Ergebnis der Addition aus wert1 und wert2 gefüllt. Danach wird wert3 ausgegeben. Es erscheint „7“ innerhalb der Box.

Dies gelingt, weil die Werte ausnahmslos Zahlen sind und die Variable anstelle ihres Wertes genutzt werden kann. Statt einer Zahl darf aber auch eine Zeichenkette in eine Variable gelegt werden. Die Zuweisung unterscheidet sich dadurch, dass Zahlen ohne und Zeichenketten mit Anführungszeichen zugewiesen werden.

var wert1 = "Hallo";
var wert2 = "Kurs";
var wert3;
wert3 = wert1 + wert2;
alert(wert3);

Werden Zeichenkette „addiert“, so hängt Javascript die hintereinander. Die Ausgabe wird also „HalloKurs“ sein. Interessant ist das folgende Beispiel.

var wert1 = "4";
var wert2 = 3;
var wert3;
wert3 = wert1 + wert2;
alert(wert3);

Die Ausgabe ist nicht 7, sondern 43. Javascript erkennt die Variable wert1 als Zeichenkette und soll diese mit einer Zahl addieren. Da dies nicht geht, sieht Javascript die Zahl ebenfalls als Zeichenkette, die jetzt zusammengehangen werden. Eine Zahl ist also nicht automatisch eine Zahl, sondern kann auch eine Zeichenkette sein. Man redet vom Typ des Werts.

Diese „Einführung Javascript“ zeigt, dass sich eine vollkommen neue Welt auftut, deren Verbindung zu HTML erst zu einem späteren Zeitpunkt stattfinden wird.