css mit Adi Prinz

JavaScript-Basic / Erste Schritte

JavaScript ist eine Programmiersprache, die in HTML-Dokumenten eingebunden wird. JavaScript wird auf dem Rechner des Users ausgeführt, deshalb spricht man auch von einer clientseitigen Programmiersprache (clientside Scripting). JavaScripte reagieren auf Benutzereingaben und manipulieren das aktuelle HTML-Dokument, ohne die Webseite neu zu laden. Damit kann ein Dokument interaktiv und dynamisch verändert werden.

Wenn eine Webseite geladen wird, erzeugt der Browser automatisch ein Document Object Model (DOM) des HTML-Dokuments. Das HTML-DOM beschreibt die Baumstruktur, die mit JavaSript bearbeitet und geändert werden kann.

Was muss ich wissen?

Wenn sie sich noch nie mit einer Programmiersprache beschäftigt haben, ist JavaSript eine gute Wahl für den Beginn. Sie sollten allerdings gute Kenntnisse in HTML und CSS haben.

Wohin schreibe ich JavaSript?

Im Prinzip gibt es zwei Möglichkeiten beim Einfügen von JavaSript.

  • Im HTML-Dokument direkt
  • In einer externen JavaSript-Datei

JavaScript im HTML-Dokument

JavaSript kann im head-Element und im body-Element vorkommen. HTML stellt dafür das script-Tag zur Verfügung. 

//in HTML 5
<script>
</script>

JavaScript in einer externen Datei

Eine JavaScript-Datei wird mit der Endung .js gespeichert. Im head- oder im body-Element wird die externe Datei in das HTML eingebunden. Das Attribut src des script-Elements beinhaltet den Pfad zur JavaScript-Datei. 

<script src="myScript.js"></script>

JavaScript Kommentare

Wie in HTML oder CSS kann auch JavaScript-Code kommentiert werden. Kommentare in JavaSript können einzeilig oder mehrzeilig sein. Die Syntax für JavaScript-Kommentare lautet: 

<script>
// einzeiliger Kommentar

/* mehrzeiliger
Kommentar*/
</script>

Strict Modus von JavaScript

In JavaScript gibt es viele potentielle Fehlerquellen. Das Deklarieren von Variablen ohne den Schlüsselwörtern let, var, const ist nur eine davon. Mit "use strict" am Anfang des JavaScript-Codes teilen sie dem Browser mit, einen strengeren Maßstab anzulegen. Allerdings reagieren nur moderne Browser darauf, ältere Browser ignorieren den Strict-Modus. Außerdem reagieren moderne Browser auf fehlerhaften JavaScript-Code mit einer Fehlermeldung. 

<script>
"use strict";
// Anweisungen
</script>

Browser-Konsole

Für JavaScript Debugging ist die Konsole des Browsers eine gute Wahl. Die meisten modernen Browser öffnen die Konsole mit einem Kilck auf die F12-Taste. Eine Eingabe wie die folgende liefert die Summe zurück (8): 

5 + 3

Die Methode console.log() kann im JavaScript Code, aber auch in der Konsole direkt geschrieben werden. Kopieren sie den folgenden Code einfach in den Editor der Browser-Konsole. 

var x = 5;
var y = 3;
var z = x + y;
console.log(x);  // liefert 5
console.log(y);  // liefert 3
console.log(z);  // liefert 8

Erst im Kapitel Output & Events lernen wir den Umgang von JavaSript in HTML. Die Beispielcodes der Kapitel davor funktionieren ausschließlich in der Browser-Konsole.

JavaScript Informationen

Javascript ist nicht nur für das Web einsetzbar, sondern auch für viele andere Anwendungen. Dieses Script hier beschäftigt sich ausschließlich mit JavaScript für HTML-Dokumente. Über die Geschichte von JavaSript, oder auch Versionen können sie sich hier informieren:

Wikipedia, ECMAScript language specification