Javascript

JavaScript

JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.

JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert.

Möglichkeiten JavaScript in ein HTML-Dokument einzubinden

Direkt im Code:

<div onclick="tueEtwas();"></div>

In einem seperaten Bereich, dieser kann im <head> oder im <body> sein.

<script>

...

</script>

In einer externen Datei:

<script src="url/zur/datei.js"></script>

In der externen Datei dürfen keine <script> Tags vorkommen.

JavaScript direkt im HTML-Code zu notieren, gilt als schlechter Stil; damit wird der Inhalt (HTML) und die Interaktion (JavaScript) vermischt.

Beim Programmmieren mit JavaScript ist zu beachten, dass eine Website wenn möglich auch bei abgeschaltetem JavaScript noch erlebbar/lesbar ist.

JavaScript wird dann ausgeführt, wenn es vom Browser eingelesen wird. Deshalb ist zu beachten an welchem Ort in einer Datei JavaScript notiert wird. Direkt vor dem schliessenden <body> Tag ist eine bewährte Stelle, bis dahin ist die Website schon vollständig eingelesen und der JavaScript-Code kann ausgeführt werden. Ansonsten kann es vorkommen, dass der JavaScript-Code auf ein HTML-Element zugreifen will, dass noch gar nicht in das Dokument eingelesen wurde.
(Es gibt Möglichkeiten um Code im Head notieren oder einbinden zu können und erst auszuführen wenn die Website vollständig geladen ist.)

Basics

// Einzeilige Kommentare

/*
Mehrzeilige Kommentare
*/

Ausgabe in einem Popup:

alert("Hallo Welt");

Ausgabe in der Konsole (Code Inspector):

console.log("Text");

Ausgabe und einen Wert vom Benutzer abfragen:

var antwort = prompt("Frage?");

Variablen

Oft möchte man Zahlen/Texte/Werte arbeitet, zwischenspeichern um sie später im Code wiederzuverwenden. Dafür kann man Variablen definieren. Mit dem definieren einer Variable beanspruchen wir ein Stück Speicherplatz. Auf den darin gespeicherten Wert können wir danach immer wieder zugreifen, diesen auslesen oder ändern.

Um eine Variable zu definieren wird das Schlüsselwort var und der Variablenname geschrieben. Der Variablenname darf keine Leerzeichen enthalten, darf nicht mit einer Zahl beginnen, Gross-Klein-Schreibung wird unterschieden:

var variablenname;

Einer Variable einen Wert zuweisen (Variablenname, Gleichzeichen, auch Zuweisungsoperator genannt, Wert, optional ein Semikolon):

a = 5;
b = "Text";

Eine JavaScript-Variable kann verschiedene Sorten von Inhalten haben: Zahlen, Texte, ganze Objekte die wiederum aus mehreren Variablen bestehen.

Ausgabe

Wenn man den Wert einer Variable nutzen möchte und diesen danach ausgeben möchte, kann das folgendermassen aussehen:

var a = 3.1;
console.log(a); // Ausgabe auf der Konsole
alert(a);  // Ausgabe in einem Popup

Schlüsselwörter

In JavaScript sind (wie in jeder Programmiersprache) gewisse Wörter reserviert. Diese können nicht als Variablennamen verwendet werden, dazu gehören "var", "function" und andere.

Funktionen

Um Codestücke wiederverwendbar zu machen, können Funktionen definiert werden. Diese werden nicht beim einlesen ausgeführt, sondern erst wenn sie aufgerufen werden.

Eine Funktion wird mit dem Schlüsselwort function definiert, dann den Funktionsname, Klammern, darin 0-n Argumente (Variablen die an die Funktion zur Bearbeitung übergeben werden), die geschweiften Klammern öffnen und schliessen den Funktionsrumpf.

Eine gültige einfachste Funktion

function funktionsname(){
}

In einer Funktion definierte Variablen sind nur innerhalb der Funktion ansprechbar.

Im Funktionsrumpf kann mit den übergebenen Variablen gearbeitet werden, am Schluss kann ein Wert mit return zurückgegeben werden.

Eine Funktion die das Quadrat einer Zahl berechnet:

function quadrat(zahl){
    var q = zahl * zahl;
    return q;
}

Diese Funktion kann folgendermassen aufgerufen werden:

quadrat(5);

Der Wert der am Ende der Funktion mit dem Schlüsselwort return zurückgegeben wird, kann nach Aufruf der Funktion weiterverwendet werden.

var resultat = quadrat(5);
console.log(resultat); // gibt auf der Konsole den Wert '25' aus.

Variante mit besserer Lesbarkeit:

var a = 3;
console.log("Das Quadrat von " + a + " ist " + quadrat(a) );

 

Mathematik und Texte

Mathematik kann grundsätzlich wie gewohnt eingesetzt werden, +-*/ und Klammern funktionieren wie gewohnt.

Texte müssen in Anführungszeichen erfasst werden, seien das einfache oder  geschlossene, aber immer am Anfang und am Ende des Textes dieselben. Um Texte zu verknüpfen, kann das + verwendet werden.

Zähler

Häufig verwendet man Variablen um zu zählen wie oft etwas (z.B. eine Funktion) schon durchgeführt wurde.

Zum hochzählen kann man folgenden Code verwenden:

var i = 0; // Initialisierung der Variable, wird nur 1x ausgeführt
var i = i+1; // Wert der Variable um 1 erhöhen, wird nach jedem Durchgang eines Code-Blocks ausgeführt

Das Gleichheitszeichen bedeutet hier nicht, dass die linke Seite denselben Wert hat wie die rechte Seite, es bedeutet das in die Variable auf der linken Seite (in die entsprechende Speicherstelle im Computerspeicher) der Wert rechts des Gleichheitszeichens geschrieben wird. Der Browser berechnet also zuerst was der Wert auf der rechten Seite ist und schreibt diesen dann in die Variable auf der linken Seite.

Im obigen Beispiel wären das folgende Schritte:

var i = 0;
var i = i+1;
var i = 0+1;
var i <= 1;
alert(i);   // Es wird 1 ausgegeben.

Da die Verwendung von Zählern häufig nötig ist, gibt es dafür eine Kurzschreibweise:

i++    // das ist dasselbe wie i = i+1

Dasselbe gibt es auch mit Minus.

i-- // das ist dasselbe wie i = i-1

Kontrollstrukturen

Wird ein Programm mehrere Male durchlaufen, ist es wichtig je nach Ausgangslage andere Aktionen durchzuführen.

Dafür gibt es verschiedene Kontrollstrukturen, die einfachste ist WENN/DANN und schreibt sich wie folgt.

if(Bedingung)
{
// wird ausgeführt wenn die Bedingung wahr ist
}
else
{
// wird ausgeführt wenn die Bedingung falsch ist
}

Die Bedingung ist ein Ausdruck der darauf getest wird ob er wahr ist. Das kann so etwas einfaches sein wie

i > 5  // grösser als
i <= 10  // kleiner gleich
text == "hallo"  // das doppelte Gleichzeichen bedeutet nun "ist gleich"

oder auch komplizierteres.

Wichtig ist, dass die Auswertung der Bedingung einen Wert ergibt der WAHR oder FALSCH ist (TRUE oder FALSE).

Ist die Bedingung wahr wird der Code im Codeblock nach dem if ausgeführt, ist die Bedingung nicht wahr, wird der Codeblock nach dem Else ausgeführt.

Der else-Teil ist optional. Man also auch einfach if(...){ tueEtwas(); } schreiben.

Beispiel

var alter =  prompt("Ihr Alter?");
if( alter > 120){
  alert("Sie leben nicht mehr");
}
else{
  alert("Alles Gute");
}

Anwendungsbeispiel

Nimm ein HTML-Element und speichere es in einer Variable. Weisse diesem Element CSS-Eigenschaften zu.

var a = document.getElementById("idEinesElementes");
a.style.height = "200px";
a.style.opacity = "0.5";

Zum Verständnis: die Funktion getElementById() gibt ein Objekt zurück. Dies ist eine komplexe Datenstruktur die sowohl Funktionen als auch Variablen enthalten kann. Mit dem Punkt-Operator greifen wir auf eine Variable in der Datenstruktur des Objektes zu. Das Element hat eine Variable style, in dieser ist wieder ein Objekt mit mehreren Variablen gespeichert, eine davon ist "height", eine Text-Variable. Diese kann nun ausgelesen werden oder ihr kann (wie in obigem Beispiel) ein Wert zugewiesen werden.

Praktisches Snippet: Klick > Klasse ändern


<script type="text/javascript">
// Element auswählen (z.B. ein Button mit einer Klasse class="meinButton")
const button = document.querySelector('.meinButton');

// Bei Button-Klicks einhängen
button.addEventListener('click', function() {
    // Das Element bekommt eine neue Klasse
    button.classList.add('neueKlasse');
});
</script>