034.1 Lektion 1

Zertifikat:

Web Development Essentials

Version:

1.0

Thema:

034 JavaScript-Programmierung

Lernziel:

034.1 JavaScript-Ausführung und -Syntax

Lektion:

1 von 1

Einführung

Webseiten werden mit drei Standardtechnologien entwickelt: HTML, CSS und JavaScript. JavaScript ist eine Programmiersprache, mit der der Browser den Inhalt der Website dynamisch aktualisiert. JavaScript wird in der Regel von demselben Browser ausgeführt, der auch die Webseite anzeigt. Das bedeutet, dass sich, ähnlich wie bei CSS und HTML, das genaue Verhalten des von Ihnen geschriebenen Codes von Browser zu Browser unterscheiden kann. Die meisten gängigen Browser halten sich jedoch an die ECMAScript-Spezifikation. Dies ist ein Standard, der die Verwendung von JavaScript im Web vereinheitlicht. Er wird zusammen mit der HTML5-Spezifikation Grundlage für diese Lektion sein, die wiederum angibt, wie JavaScript in eine Webseite einzufügen ist, damit es ein Browser ausführen kann.

JavaScript im Browser ausführen

Um JavaScript auszuführen, muss der Browser den Code entweder direkt erhalten — als Teil des HTML, aus dem die Webseite besteht — oder als URL, die einen Ort mit einem ausführbaren Skript angibt.

Das folgende Beispiel zeigt, wie Sie Code direkt in die HTML-Datei einfügen:

<html>
  <head>
  </head>
  <body>
    <h1>Website Headline</h1>
    <p>Content</p>

    <script>
      console.log('test');
    </script>

  </body>
</html>

Der Code ist zwischen den Tags <script> und </script> eingeschlossen. Alles, was in diesen Tags enthalten ist, wird vom Browser direkt beim Laden der Seite ausgeführt.

Die Position des <script>-Elements innerhalb der Seite bestimmt den Zeitpunkt der Ausführung. Ein HTML-Dokument wird von oben nach unten geparst, wobei der Browser entscheidet, wann die Elemente auf dem Bildschirm angezeigt werden. In dem soeben gezeigten Beispiel werden die Tags <h1> und <p> der Website geparst und wahrscheinlich angezeigt, bevor das Skript ausgeführt wird. Würde der JavaScript-Code innerhalb des <script>-Tags sehr lange zur Ausführung brauchen, würde die Seite trotzdem problemlos angezeigt. Wäre das Skript jedoch über den anderen Tags platziert, müssten Besucher der Webseite warten, bis das Skript vollständig ausgeführt wurde, bevor sie die Seite sehen. Aus diesem Grund werden <script>-Tags normalerweise an einer von zwei Stellen platziert:

Ganz am Ende des HTML-Body, so dass das Skript als letztes ausgeführt wird. Das empfiehlt sich, wenn der Code der Seite etwas hinzufügt, was ohne den Inhalt nicht sinnvoll wäre. Ein Beispiel wäre das Hinzufügen von Funktionen zu einer Schaltfläche, da die Schaltfläche vorhanden sein muss, damit die Funktionen sinnvoll sind.
Innerhalb des <head>-Elements des HTML. Das stellt sicher, dass das Skript ausgeführt wird, bevor der HTML-Body geparst wird. Wenn Sie das Ladeverhalten der Seite ändern wollen oder etwas haben, das ausgeführt werden muss, während die Seite noch nicht vollständig geladen ist, können Sie das Skript hier einfügen. Auch bei mehreren Skripten, die von einem bestimmten Skript abhängen, können Sie dieses gemeinsame Skript in den Kopfbereich setzen, um sicherzustellen, dass es vor den anderen ausgeführt wird.

Aus verschiedenen Gründen, einschließlich der Verwaltbarkeit, ist es sinnvoll, den JavaScript-Code in separaten Dateien außerhalb des HTML-Codes zu haben. Externe JavaScript-Dateien werden wie folgt mit einem <script>-Tag mit dem Attribut src eingebunden:

<html>
  <head>
    <script src="/button-interaction.js"></script>
  </head>
  <body>
  </body>
</html>

Das src-Tag teilt dem Browser den Ort der Quelle mit, d.h. die Datei, die den JavaScript-Code enthält. Dabei kann es sich um eine Datei auf demselben Server handeln, wie im obigen Beispiel, oder um eine beliebige im Web zugängliche URL wie https://www.lpi.org/example.js. Der Wert des Attributs src folgt der gleichen Konvention wie der Import von CSS- oder Bilddateien, d.h. er ist relativ oder absolut. Wenn der Browser auf ein Skript-Tag mit dem Attribut src stößt, versucht er, die Quelldatei über eine HTTP GET-Anfrage zu erhalten, weshalb externe Dateien zugänglich sein müssen.

Wenn Sie das src-Attribut verwenden, wird jeglicher Code oder Text, der zwischen den <script>…</script>-Tags steht, gemäß der HTML-Spezifikation ignoriert.

<html>
  <head>
    <script src="/button-interaction.js">
      console.log("test"); // <-- This is ignored
    </script>
  </head>
  <body>
  </body>
</html>

Es gibt noch weitere Attribute, die Sie dem script-Tag hinzufügen können, um näher zu spezifizieren, wie der Browser die Dateien erhalten und wie er sie anschließend behandeln soll. Die folgende Liste geht auf die wichtigsten Attribute ein:

async

Kann auf script-Tags angewendet werden und weist den Browser an, das Skript im Hintergrund zu holen, um den Ladevorgang der Seite nicht zu blockieren. Das Laden der Seite wird dennoch unterbrochen, nachdem der Browser das Skript abgerufen hat, weil der Browser es parsen muss, was sofort geschieht, sobald das Skript vollständig abgerufen wurde. Da es sich um ein Boolesches Attribut handelt, reicht es aus, das Tag wie <script async src="/script.js"></script> zu schreiben, also ohnen einen Wert anzugeben.

defer

Ähnlich wie async weist es den Browser an, den Ladevorgang der Seite nicht zu blockieren, während das Skript abgerufen wird. Darüber hinaus schiebt der Browser das Parsen des Skripts auf und wartet, bis das gesamte HTML-Dokument geparst wurde, parst dann aber das Skript, bevor er bekannt gibt, dass das Dokument vollständig geladen wurde. Wie async ist defer ein Boolesches Attribut und wird auf die gleiche Weise verwendet. Da defer async impliziert, ist es nicht sinnvoll, beide Tags zusammen anzugeben.

Note

Ist eine Seite vollständig geparst, zeigt der Browser an, dass sie zur Anzeige bereit ist, indem er ein Ereignis DOMContentLoaded auslöst. So hat das in einem <head>-Ereignis enthaltene JavaScript immer die Möglichkeit, auf die Seite einzuwirken, bevor sie angezeigt wird, selbst wenn Sie das Attribut defer einschließen.

type

Gibt an, welche Art von Skript der Browser innerhalb des Tags zu erwarten hat. Die Vorgabe ist JavaScript (type="application/javascript"), daher ist dieses Attribut nicht notwendig, wenn JavaScript-Code enthalten ist oder mit dem src-Tag auf eine JavaScript-Ressource verwiesen wird. Generell können alle MIME-Typen angegeben werden, aber nur Skripte, die als JavaScript gekennzeichnet sind, werden vom Browser ausgeführt. Es gibt zwei realistische Anwendungsfälle für dieses Attribut: dem Browser mitzuteilen, dass er das Skript nicht ausführen soll, indem er type auf einen beliebigen Wert wie template oder other setzt, oder dem Browser mitzuteilen, dass das Skript ein ES6-Modul ist. ES6-Module werden in dieser Lektion nicht behandelt.

Warning

Wenn mehrere Skripte das async-Attribut haben, werden sie in der Reihenfolge ausgeführt, in der sie heruntergeladen wurden, nicht in der Reihenfolge der script-Tags im Dokument. Das defer-Attribut hingegen behält die Reihenfolge der script-Tags bei.

Die Browserkonsole

Obwohl JavaScript normalerweise als Teil einer Website ausgeführt wird, gibt es noch eine andere Möglichkeit, es auszuführen: über die Browserkonsole. Alle modernen Desktop-Browser bieten ein Menü, über das Sie JavaScript-Code in der JavaScript-Engine des Browsers ausführen können. Dies dient in der Regel dem Testen von neuem Code oder der Fehlersuche in bestehenden Websites.

Je nach Browser gibt es mehrere Möglichkeiten, auf die Browserkonsole zuzugreifen. Der einfachste Weg führt über Tastaturkürzel. Hier die Tastaturkürzel für einige aktuelle Browser:

Chrome: Ctrl+Shift+J (Cmd+Option+J auf dem Mac)
Firefox: Ctrl+Shift+K (Cmd+Option+K auf dem Mac)
Safari: Ctrl+Shift+? (Cmd+Option+? auf dem Mac)

Sie können auch per Rechtsklick auf der Webseite und die Option “Untersuchen” oder “Element untersuchen” den Inspektor öffnen, ein weiteres Browser-Tool. Beim Öffnen des Inspektors erscheint ein neues Fenster, in dem Sie wiederum über die Registerkarte “Konsole” die Browserkonsole aufrufen.

Sobald Sie die Konsole aufgerufen haben, können Sie JavaScript auf der Seite ausführen, indem Sie das JavaScript direkt in das Eingabefeld eingeben. Das Ergebnis des ausgeführten Codes erscheint in einer separaten Zeile.

JavaScript-Statements

Nachdem wir nun wissen, wie man ein Skript ausführt, wollen wir uns mit den Grundlagen der eigentlichen Ausführung eines Skripts befassen. Ein JavaScript-Skript ist eine Sammlung von Anweisungen und Blöcken. Eine Beispielanweisung ist console.log('test') — sie weist den Browser an, das Wort test auf der Browserkonsole auszugeben.

Jede Anweisung in JavaScript schließt mit einem Semikolon (;). Es teilt dem Browser mit, dass die Anweisung beendet ist und eine neue begonnen werden kann. Betrachten Sie das folgende Skript:

var message = "test"; console.log(message);

Wir haben zwei Anweisungen geschrieben. Jede Anweisung wird entweder durch ein Semikolon oder durch das Ende des Skripts abgeschlossen. Aus Gründen der Lesbarkeit können wir die Anweisungen in getrennte Zeilen setzen:

var message = "test";
console.log(message);

Dies ist möglich, weil alle Leerzeichen zwischen Anweisungen (Leerzeichen, Zeilenumbrüche oder Tabulatoren) ignoriert werden. Leerzeichen können auch zwischen einzelnen Schlüsselwörtern innerhalb von Anweisungen eingefügt werden, was eine der nächsten Lektionen behandelt. Anweisungen können auch leer sein oder nur aus Leerzeichen bestehen.

Ist eine Anweisung ungültig, weil sie nicht mit Semikolon abschließt, versucht ECMAScript, automatisch die richtigen Semikola einzufügen, und zwar auf der Grundlage einer komplexen Reihe von Regeln. Die wichtigste Regel lautet: Wenn eine ungültige Anweisung aus zwei gültigen Anweisungen besteht, die durch einen Zeilenumbruch getrennt sind, wird ein Semikolon am Zeilenumbruch eingefügt. Der folgende Code ist zum Beispiel keine gültige Anweisung:

console.log("hello")
console.log("world")

Ein moderner Browser führt sie jedoch automatisch so aus, als wäre sie mit den richtigen Semikola geschrieben:

console.log("hello");
console.log("world");

So ist es möglich, in bestimmten Fällen Semikola wegzulassen. Da die Regeln für das automatische Einfügen von Semikola jedoch komplex sind, empfiehlt es sich dringend, Anweisungen stets ordnungsgemäß zu beenden, um unerwünschte Effekte zu vermeiden.

Kommentare in JavaScript

Umfangreiche Skripte können ziemlich kompliziert werden. Es ist ratsam, den Code zu kommentieren, um das Skript für andere oder für sich selbst in Zukunft leichter lesbar zu machen. Darüber hinaus können Sie auch Metainformationen in das Skript aufnehmen, z.B. Urheberrechtsinformationen oder Angaben, wann das Skript geschrieben wurde und warum.

Für solche Metainformationen unterstützt JavaScript Kommentare. Dafür fügen Sie spezielle Zeichen in ein Skript ein, die bestimmte Teile des Skripts als Kommentar kennzeichnen, der bei der Ausführung übersprungen wird. Hier eine ausführlich kommentierte Version unseres Beispielskripts:

/*
 This script was written by the author of this lesson in May, 2020.
 It has exactly the same effect as the previous script, but includes comments.
*/

// First, we define a message.
var message = "test";

console.log(message); // Then, we output the message to the console.

Kommentare sind keine Anweisungen und müssen nicht mit einem Semikolon schließen. Sie folgen eigenen Regeln zur Beendigung, abhängig von der Art des Kommentars. Es gibt zwei Möglichkeiten, Kommentare in JavaScript zu schreiben:

Mehrzeiliger Kommentar

Verwenden Sie /* und */, um den Beginn und das Ende eines mehrzeiligen Kommentars zu kennzeichnen. Alles nach /* bis zum ersten Auftreten von */ wird ignoriert. Diese Art von Kommentar wird im Allgemeinen verwendet, um mehrere Zeilen zu umspannen, kann aber auch für einzelne Zeilen oder sogar innerhalb einer Zeile verwendet werden, etwa so:

console.log(/* what we want to log: */ "hello world")

Da das Ziel von Kommentaren im Allgemeinen darin besteht, die Lesbarkeit eines Skripts zu erhöhen, sollten Sie diesen Kommentarstil innerhalb einer Zeile vermeiden.

Einzeiliger Kommentar

Verwenden Sie // (zwei Schrägstriche), um eine Zeile auszukommentieren. Alles nach dem doppelten Schrägstrich in derselben Zeile wird ignoriert. In dem oben gezeigten Beispiel wird dieses Muster zunächst verwendet, um eine ganze Zeile zu kommentieren. Nach der Anweisung console.log(message); wird es verwendet, um den Rest der Zeile zu kommentieren.

Nutzen Sie einzeilige Kommentare für einzelne Zeilen und mehrzeilige Kommentare für mehrere Zeilen, auch wenn andere Varianten möglich sind. Kommentare innerhalb einer Anweisung sind zu vermeiden.

Kommentare können auch dazu dienen, Zeilen des eigentlichen Codes vorübergehend zu entfernen:

// We temporarily want to use a different message
// var message = "test";
var message = "something else";

Geführte Übungen

Erstellen Sie eine Variable ColorName und weisen Sie ihr den Wert RED zu.

Welche der folgenden Skripte sind gültig?

console.log("hello") console.log("world");

console.log("hello"); console.log("world");

// console.log("hello") console.log("world");

console.log("hello"); console.log("world") //;

console.log("hello"); /* console.log("world") */

Offene Übungen

Wie viele JavaScript-Anweisungen können ohne Semikolon in einer einzigen Zeile stehen?
Erstellen Sie zwei Variablen x und y und geben Sie deren Summe auf der Konsole aus.

Zusammenfassung

In dieser Lektion haben wir verschiedene Arten der Ausführung von JavaScript kennengelernt und erfahren, wie man das Ladeverhalten von Skripten ändert. Darüber hinaus ging es um grundlegenden Konzepte zum Aufbau und zur Kommentierung sowie den Befehl console.log().

In dieser Lektion genutztes HTML:

<script>: Mit dem script-Tag binden Sie JavaScript direkt oder durch Angabe einer Datei mit dem Attribut src ein. Ändern Sie mit den Attributen async und defer, wie das Skript geladen wird.

In dieser Lektion genutztes JavaScript:

;: Ein Semikolon dient der Trennung von Anweisungen. Semikola können an manchen Positionen, sollten allerdings nicht weggelassen werden.
//, /*…*/: Mit Kommentaren fügen Sie Erläuterungen oder Metainformationen in eine Skriptdatei ein oder verhindern die Ausführung von Anweisungen.
console.log("text"): Der Befehl console.log() gibt Text auf der Browserkonsole aus.

Lösungen zu den geführten Übungen

Erstellen Sie eine Variable ColorName und weisen Sie ihr den Wert RED zu.
```
var ColorName = "RED";
```

Welche der folgenden Skripte sind gültig?

console.log("hello") console.log("world");

Ungültig: Der erste console.log()-Befehl ist nicht korrekt beendet, und die Zeile bildet insgesamt keine gültige Anweisung.

console.log("hello"); console.log("world");

Gültig: Jede Anweisung ist ordnungsgemäß beendet.

// console.log("hello") console.log("world");

Gültig: Der gesamte Code wird ignoriert, da es sich um einen Kommentar handelt.

console.log("hello"); console.log("world") //;

Ungültig: In der letzten Anweisung fehlt ein Semikolon. Das Semikolon ganz am Ende wird ignoriert, da es auskommentiert ist.

console.log("hello"); /* console.log("world") */

Gültig: Auf eine gültige Anweisung folgt ein kommentierter Code, der ignoriert wird.

Lösungen zu den offenen Übungen

Wie viele JavaScript-Anweisungen können ohne Semikolon in einer einzigen Zeile stehen?

Am Ende eines Skripts können wir eine Anweisung schreiben, die durch das Ende der Datei abgeschlossen wird. Mit der bisher besprochenen Syntax gibt es keine weitere Möglichkeit, eine Anweisung ohne Semikolon zu schreiben.
Erstellen Sie zwei Variablen x und y und geben Sie deren Summe auf der Konsole aus.
```
var x = 5;
var y = 10;
console.log(x+y);
```