Wir lernen wie man die JavaScript-Konsole des Browsers verwendet und ein paar grundlegende Dinge programmiert.
Die JavaScript-Konsole Deines Browsers verwenden.
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 Tools ▸ Entwicklertools 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.
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.
Etwas JavaScript eintippen und sehen was es tut.
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.
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.
Verstehen, was das Grundelement ist, aus dem Programme bestehen.
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".
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.
Verstehen wie man Werte speichert und sie beim Namen nennt. Verstehen was Anweisungen sind.
Gib die folgenden Zeilen in die Konsole ein:
var meinwert = 32 * 32; alert(meinwert); meinwert = 10; alert(meinwert);
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.
Sehen wie JavaScript-Programme sich im Kontext von Webseiten verhalten.
Ö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.
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.
Wir sind kurz davor alles viel interaktiver werden zu lassen.