Kursmaterial: Seite 1, Die Grundlagen

Wir lernen wie man die JavaScript-Konsole des Browsers verwendet und ein paar grundlegende Dinge programmiert.

Die Konsole öffnen

Ziel

Die JavaScript-Konsole Deines Browsers verwenden.

Anweisungen

Unter Windows und Linux: Drücke im geöffneten Chrome-Browser Strg+Shift+J. Unter MacOS: Command+Opt+J. (Halte die beiden ersten Tasten gedrückt und drücke dann J.)

Alternativ kannst Du auch das Menü in der rechten oberen Ecke des Browser-Fensters öffnen und Weitere ToolsEntwicklertools auswählen.

Die Konsole sollte nun im unteren Teil des Browser-Fensters erscheinen.

Verändere die Größe der Konsole indem Du den oberen Rand mit der Maus ziehst.

Klicke alle Icons der Reihe nach durch, um ganz wunderbar kompliziert aussehende Diagramme und technischen Schnick-Schnack zu bestaunen. Von nun an ist das Deine Steuerzentrale.

Erklärung

Die Konsole ist ein nützliches, praktisches Werkzeug, das Dir Zugang zum Innenleben von Webseiten gibt. Mit ihm kannst Du genau sehen, aus welchen Einzelteilen eine Seite zusammengesetzt ist (im 'Elements'-Tab) und aus welchen Dateien sie besteht. Du kannst Probleme diagnostizieren, und, was für uns am allerwichtigsten ist, Du kannst mit der JavaScript-Umgebung der jeweils aktuellen Seite spielen.

Erwarte nicht, dass Du jetzt schon verstehen musst, wozu die ganzen Funktionen der Konsole da sind. Das meiste davon werden wir in diesem Kurs nicht benötigen, und die Teile, die Du brauchst, wirst Du rechtzeitig erklärt bekommen.

Dein erstes Stück Code eingeben

Ziel

Etwas JavaScript eintippen und sehen was es tut.

Anweisungen

Gehe zum 'Console'-Tab, ganz rechts in der Browser-Konsole.

Tippe einfach wirres Zeug hinter dem >-Zeichen ein, und and drücke Enter.

Jetzt tippe 1 + 1 and drücke Enter.

Dann tippe alert("Dieser Computer tut was [Name] ihm sagt"). Achte auf die doppelten Anführungszeichen und Klammern. Ersetze [Name] mit Deinem Namen.

Erklärung

Das ist das Grundprinzip der JavaScript-Konsole: Du kannst ein einzeiliges Programm eintippen und der Browser fährt es für Dich ab und sagt Dir was das Ergebnis war. Wenn Du etwas schreibst, das nicht als gültiges Programm durchgeht, sagt er Dir was schiefgelaufen ist.

Das erste Programm (1 + 1) wird Dir nicht sehr fremd erscheinen. Es ist als eine Reihe von Anweisungen an den Computer zu lesen: nimm die Zahl eins, dann nimm nochmal die eins, und addiere die beiden zusammen. In JavaScript-Programmen kann man nicht direkt auf so abstrakte Konzepte wie "eins und eins addieren" Bezug nehmen, sondern man instruiert den Computer der Reihe nach, sozusagen zu Fuß.

Das zweite Programm (alert(…)) ist ein Funktionsaufruf. Funktionen sind Operationen, die ausgeführt werden können. Die Funktion, die unter dem Namen alert verfügbar ist, ist eine Operation, die ein kleines Dialog-Fenster auf dem Bildschirm anzeigt. Mit Hilfe der Klammern sagt man der Funktion, dass sie ausgeführt werden soll. Alles was zwischen den Klammern steht, sind zusätzliche Informationen, die man der Funktion mitgeben möchte. Im Beispiel haben wir der alert-Funktion gesagt, welchen Text sie anzeigen soll.

Ausdrücke verstehen

Ziel

Verstehen, was das Grundelement ist, aus dem Programme bestehen.

Anweisungen

Kombiniere die beiden Programme aus dem vorigen Schritt: alert(1 + 1).

Gib 1 + 1 * 10 in die Konsole ein und dann (1 + 1) * 10. Sieh Dir die unterschiedlichen Ergebnisse an.

Schreibe "hey" + "ho".

Erklärung

Die Art Programme, die wir bisher geschrieben haben, nennt man Ausdrücke (englisch: Expressions). Ausdrücke sind wie Legosteine: Du kannst mehrere davon nehmen und daraus größere, interessantere Ausdrücke bauen. Zum Beispiel: alert(1 + 1) kombiniert den Aufruf von alert mit dem Berechnen von 1 + 1, und tut genau was man erwarten würde: Es zeigt die Zahl zwei in einem Dialog-Fenster.

Wenn man so etwas wie + und * (Operatoren) zum Kombinieren von Ausdrücken verwendet, ist die Bedeutung manchmal nicht ganz offensichtlich. Der *-Operator, den man fürs Multiplizieren verwendet, wird vor dem +-Operator ausgewertet. Um explizit anzugeben wie Ausdrücke untereinander zusammengehören, verwendet man Klammern.

Jeder Ausdruck hat einen Wert. Die einfachsten Ausdrücke sind Zahlen (1) und Strings ("hey"), auch Zeichenketten genannt. Sie stehen unmittelbar für einen Wert: Strings repräsentieren Text und Zahlen repräsentieren Zahlenwerte. Damit hätten wir schon mal zwei verschiedene Typen von Werten. Später werden wir noch mehr Typen kennenlernen.

Wenn + auf Zahlenwerte angewendet wird, bedeutet es Addition. Wenn es auf Strings angewendet wird, klebt es deren Textinhalt aneinander und produziert damit einen neuen String.

Variablen

Ziel

Verstehen wie man Werte speichert und sie beim Namen nennt. Verstehen was Anweisungen sind.

Anweisungen

Gib die folgenden Zeilen in die Konsole ein:

var meinwert = 32 * 32;
alert(meinwert);
meinwert = 10;
alert(meinwert);

Erklärung

Das obige Programm führt zwei neue Konzepte ein: Semikolons und die Verwendung von var.

Das erste Konzept ist einfach zu erklären. Ein Programm ist eine Reihe von Anweisungen (englisch: Statements). Packt man ein Semikolon hinter einen Ausdruck, hat man eine Anweisung. Es gibt auch andere Arten von Anweisungen. Die Anweisungen in einem Programm werden, wie man erwarten würde, von oben nach unten ausgeführt.

Eine spezielle Form einer Anweisung ist die Deklaration einer Variablen. Sie führt einen Namen ein und assoziiert diesen mit einem Wert. Danach kann dieser Name (in unserem Fall meinwert) als Ausdruck verwendet werden, der für den aktuellen Wert der Variablen mit diesem Namen steht.

Während ein Programm ausgeführt wird, muss der Wert einer Variablen nicht immer gleich bleiben. Man kann zu jeder Zeit den Operator = verwenden um einen neuen Wert zuzuweisen, wie in Zeile drei im Beispiel.

Eine Webseite

Ziel

Sehen wie JavaScript-Programme sich im Kontext von Webseiten verhalten.

Anweisungen

Öffne die Sandkasten-Seite.

Du wirst im unteren Teil den Quelltext einer sehr einfachen HTML-Seite sehen, und darüber die Seite selbst. Lies den Quelltext.

Probiere etwas zu verändern und den 'Render'-Button (über dem Quelltext) zu klicken. Öffne in dem neuen Tab auch die JavaScript-Konsole.

Erklärung

Die Sandkasten-Seite (die selbst eine in JavaScript geschriebene Webseite ist) ermöglicht es uns, Webseiten zu schreiben und auszuprobieren.

JavaScript-Code kann in HTML-Dokumente mit dem <script>-Tag eingebunden werden. Im Beispiel ist ein winziges Programm eingebunden, das eine Variable mit dem Namen myMessage definiert und auf ihr die Funktion console.log ausführt.

Beim direkten Eingeben von Ausdrücken in die Konsole wird das Ergebnis immer automatisch angezeigt. Für Programme, die Teil einer Webseite sind, ist das nicht so. Wenn Du etwas in der Konsole angezeigt haben möchtest, musst Du die Funktion console.log verwenden.

Wenn Du das Innenleben einer Seite anschauen möchtest, die im Sandkasten angezeigt wird, ist ein zusätzlicher Schritt nötig. Wenn Du die Konsole in diesem Tab öffnest und myMessage eintippst, wird es die Variable nicht finden. Der Grund ist, dass die Konsole mit der Sandkasten-Seite selbst verbunden ist, nicht mit der Seite, die darin angezeigt wird. Oben links in der Konsole gibt es eine Schaltfäche auf der <top> steht. Klicke sie an und wähle die Option mit dem Namen der Domain in der Adressleiste im Browser um die Konsole mit der Seite zu verbinden, die wir geschrieben haben.

Der Button auf der Beispielseite ist über sein onclick-Attribut mit einem Stück JavaScript-Code verknüpft. Attribute sind Paare der Form name="wert", die in HTML-Tags definiert werden. Weil der Button und die Variable myMessage auf derselben Seite leben, ist es für das onclick-Programm (alert(myMessage);) möglich, sich auf diese Variable zu beziehen. Die Variable meinwert, die wir vorher (im diesem Tab hier) definiert haben, ist im neuen Tab nicht verfügbar. Jede Seite ist eine eigene kleine Welt, mit seinen eigenen Variablen.

Und jetzt

Wir sind kurz davor alles viel interaktiver werden zu lassen.

→ Weiter geht's mit der nächsten Seite.