Webprogrammierung — 8. Lektion

JavaScript

JavaScript ist eine Sprache zum Programmieren von Webseiten, so dass Inhalte abhängig von der Umgebung (IP-Adresse des Besuchers, Uhrzeit des Clientrechners) dargestellt werden oder sich dynamisch (z.B. durch Interaktion mit dem Besucher der Webseite) ändern. Es handelt sich um eine sogenannte Script-Sprache. Die Anweisungen werden einzeln nacheinander interpretiert und ausgeführt. Im Gegensatz dazu wird beispielsweise ein Java-Programm erst vollständig übersetzt und dann ausgeführt. Ein JavaScript-Programm ist eine Folge von Anweisungen. Sie werden in einer html-Datei oder separaten Datei vom Server an den Browser übermittelt und dort beim Aufbauen einer Seite ausgeführt.
Wir werden hier nur einen kleinen Ausschnitt der Möglichkeiten zeigen. Eine ausführlichere Einführung in JavaScript ist unter https://www.javascript-kurs.de/ zu finden.

Einbinden von JavaScript

Es gibt folgende Möglichkeiten für das Einbinden von JavaScript-Programmen (Folgen von Anweisungen in der Sprache JavaScript).

In einer html-Datei

Wie bei CSS werden JavaScript-Programme extra ausgewiesen. Alles, was in einem script-Block steht, wird als JavaScript interpretiert. Im Gegensatz zu HTML und CSS werden bei einem Fehler die fehlerhafte Anweisung und alle weiteren in dem betreffenden Block ignoriert. Mit Web-Entwickler-Werkzeugen (z.B. in Mozilla Firefox unter ExtrasWeb-EntwicklerWeb-Konsole) kann man sich Fehlermeldungen anzeigen lassen und damit Fehler leichter finden.
Solche script-Blöcke werden dort ausgeführt, wo sie stehen. Dadurch dürfen sie verteilt im gesamten Dokument auftreten. Allerdings muss das entstehende Dokument (zusammengesetzt aus den HTML-Elementen und jenen Bestandteilen, die mittes JavaScript erzeugt werden) ein zulässiges HTML-Dokument sein.

In einer separaten Datei

Längere oder mehrfach benötigte JavaScript-Programme sollte man in Unterprogramme (Funktionen) schreiben, die dort, wo sie benötigt werden, aufgerufen werden. Diese Funktionen können in eine Datei mit der Endung js ausgelagert werden (zum Aufbau von Funktionen siehe Abschnitt weiter unten). Eingebunden wird eine solche Datei im head-Block mit einem leeren script-Element in dessen Anfangstag das Attribut src den Namen der js-Datei angibt.
Falls ein Unterprogramm beim Aufbauen der Seite ausgeführt werden soll, muss es wie im Beispiel zuvor in einem script-Block an der fraglichen Stelle in der html-Datei aufgerufen werden.

Was tun, wenn JavaScript deaktiviert ist?

Falls im Browser JavaScript deaktiviert ist, sollte der Nutzer nach Möglichkeit nicht eingeschränkt werden. Wenn JavaScript für das Funktionieren der Webseite unbedingt nötig ist, sollte eine Meldung mit einem entsprechenden Hinweis erscheinen.
Mit dem Tag <noscript>kann ein Abschnitt markiert werden, der dann und nur dann abgearbeitet wird, wenn JavaScript im Browser abgeschaltet ist.
<!-- Falls eine spezielle css-Datei eingebunden werden soll, z.B. weil dynamisches Ein- und Ausblenden ohne JavaScript nicht funktioniert -->
<noscript><link rel=stylesheet href="noscript.css"></noscript>
<!-- Falls eine Meldung erscheinen soll -->
<noscript>
  <h1>JavaScript deaktiviert</h1>
  <p>
    In Ihrem Browser ist JavaScript deaktiviert. Somit werden einige Bestandteile der Webseite nicht funktionieren.
  </p>
</noscript>

Variablen und Funktionen

Variable: Platzhalter für einen Wert, Einführung durch var (sonst wird Variable als global angesehen, was zu unerwünschten Ergebnissen führen kann), keine explizite Typangabe (im Gegensatz zu anderen Programmiersprachen wie Java), Wertzuweisung durch = (Variable links, Wert rechts)
Funktion: Abbildung einer Menge von Eingabewerten (Parametern) in einen Ausgabewert (Rückgabewert), in JavaScript auch prozedural (ohne Ausgabewert) verwendet
Variablen können auch Funktionen speichern, ebenso können auch Funktionen als Parameter an Funktionen übergeben werden
Beispiel von oben etwas abgewandelt:
function headline(s,i) {
  document.write("<h"+i+">"+s+"</h"+i+">");
  return true;
}
function: leitet Funktion ein
headline: Funktionsname (kann auch weggelassen werden, wenn Funktion einer Variablen zugewiesen wird)
s und i: Argumente (lokale Variablen, über die auf die übergebenen Parameter zugegriffen wird)
document.write: Aufruf eines Unterprogramms (in diesem Falle zum Schreiben einer Zeichenkette in die Anzeige)
"<h"+i+">"+s+"</h"+i+">": Parameter wird aus einzelnen Zeichenketten und den Werten von s und i zusammengesetzt
return: Anweisung zum Zurückkehren zur aufrufenden Stelle
true: Rückgabewert (hier beispielsweise interpretiert als Erfolgsindikator)

Arithmetische Ausdrücke

Terme sind Verknüpfungen von Zahlen. Der Wert ergibt sich aus der Ausführung der beteiligten Operationen; wenn er definiert ist, ist er wieder eine Zahl.

Operationen mit Zuweisung

Wenn der Wert einer Variablen umgerechnet werden soll, wird aus dem Wert ein neuer berechnet und wieder dieser Variablen zugewiesen.
Dafür gibt es abkürzende Operationen: ao=b, wobei o für eine der Operationen +, -, *, /, % steht, a eine Variable und b ein Wert ist.
Speziell zum Inkrementieren und Dekrementieren gibt es noch die Möglichkeiten a++ und ++a bzw. a-- und --a. Steht die Variable vor dem Operator, dann wird erst der Wert verwendet und danach in- oder dekrementiert. Steht der Operator zuerst, so wird erst der Wert verändert und dann verwendet.

Logische Ausdrücke

Logische Audrücke sind Verknüpfungen von Wahrheitswerten. Die einfachsten sind relationale Ausdrücke (z.B. Vergleiche). Der Wert ist wieder ein Wahrheitswert.
Vergleichsoperatoren: == (Wertgleichheit), != (Ungleichheit), < (kleiner), <= (kleiner oder gleich), > (größer), >= (größer oder gleich); === (Identität, Wert und Typ stimmen überein)
Achtung! Auch Zuweisungen haben einen Wert, nämlich den, der der Variablen zugewiesen wird. Da der Wert 0 als false interpretiert wird, und alle Werte verschieden von 0 als true, kann ein Verwechseln von Vergleichsoperator == und Zuweisungsoperator = zu ungewolltem Verhalten führen – siehe Beispiel im Abschnitt zur Fallunterscheidung.

Fallunterscheidung

Abarbeitung von Teilen des Programmes abhängig von einer Bedingung (dem Wahrheitswert eines logischen Ausdruckes) oder dem Wert einer Variablen
Syntax:
Falls ein Zweig einer logischen Fallunterscheidung nur aus einer Anweisung besteht, dürfen die geschweiften Klammern weggelassen werden.
Im Gegensatz zu anderen Sprachen, z.B. Java, sind bei einer mehrwertigen Fallunterscheidung (switch-Anweisung) auch Zeichenketten als Sprungziele erlaubt.

Schleifen

Wiederholte Abarbeitung von Teilen des Programmes abhängig von einer Bedingung
Syntax:
Falls der Schleifenrumpf nur aus einer Anweisung besteht, dürfen die geschweiften Klammern weggelassen werden.
Mit der Anweisung break; wird der Block verlassen (die Schleife beendet), in dem er auftritt.
Mit der Anweisung continue; wird der aktuelle Schleifendurchlauf beendet und es wird untersucht, ob die Schleife erneut durchlaufen werden muss.