JS – Teil 2: Variablen und die Entwicklungsumgebung

Nachdem wir uns im vorherigen Artikel mit dem Einstieg in die Welt von JavaScript beschäftigt haben geht es nun etwas tiefer in die Materie. Wir beschäftigen uns nochmal kurz mit der Entwicklungsumgebung für JavaScript, sehen uns an wie wir damit im Browser arbeiten und werfen schlussendlich auch noch einen ersten Blick auf Variablen – einer der Grundbausteine der Programmierung.

Außerdem sehen wir uns das Hallo Welt Beispiel aus Teil 1 natürlich auch noch einmal an um zu verstehen, was da eigentlich passiert ist.

JavaScript im Browser

Wenn wir mit JavaScript entwickeln haben wir oft – aber nicht immer – zwei Bereiche: den Browser (der unseren Code interpretiert und ausführt) und den Editor in dem wir den Code schreiben. Dabei tut es ein beliebiger Texteditor, es gibt viele kostenlose und kostenpflichtige Tools zur Programmierung von JavaScript. Einige weit verbreitete Beispiele wären Brackets, Atom, Sublime oder Notepad++.
Ich selbst verwende zum Schreiben von JavaScript normalerweise entweder PHPStorm (weil die meisten meiner Projekte nicht nur JavaScript sondern auch einen Großteil PHP enthalten) oder für kleinere frontendlastige Projekte dann Notepad++.

Der Browser nimmt diesen geschriebenen Code und weißt ihm dann seine Bedeutung zu. Dabei kommt es einerseits auf die Version an (ältere Browserversionen haben möglicherweise einige neue Features noch nicht), andererseits aber auch auf den verwendeten Browser.
Bei mir kommt während der Entwicklung meist Google Chrome zum Einsatz, aber auch hier bieten inzwischen alle der Big 4 (Chrome, Firefox, Safari und Internet Explorer) Tools an, die uns beim Entwickeln helfen. Genau auf diese Tools beziehen wir uns auch im nächsten Abschnitt.

Bevor der Browser unseren JavaScript Code allerdings interpretieren kann müssen wir ihm zwei Dinge mitteilen:

  1. Welcher Teil unserer Website ist denn genau JavaScript Code? Diesen muss er schließlich vom HTML (oder anderen Sprachen) unterscheiden können.
  2. Wo findet er den Code? Am Anfang bettet man JavaScript Code häufig mitten ins HTML ein, da es einfach und zeitsparend ist. Sobald ein Projekt allerdings etwas komplexer ist macht es Sinn, den Code in mehrere Dateien aufzuteilen und dann müssen wir dem Browser mitteilen, wo diese Dateien liegen und in welcher Reihenfolge er sie laden soll.

Sowohl im Beispiel von Teil 1 als auch in näherer Zukunft werden wir noch die eingebettete Version verwenden. Um JavaScript in eine HTML Seite einzubetten können wir folgendes Tag verwenden:

Damit teilen wir dem Browser mit Alles, was zwischen Anfang und Ende des Tags ist, darfst du als JavaScript interpretieren. Im Hallo Welt Beispiel des letzten Teils haben wir dies ja schon gesehen.

 

 

Entwicklertools

Wie bereits erwähnt bieten die meisten Browser uns tolle Tools an, um uns in der Entwicklung zu unterstützen. Diese geben uns einen kleinen (oder manchmal auch größeren) Einblick hinter die Kulissen, was da eigentlich gerade abläuft und – richtig bedient – halten wertvolle Hinweise zur Fehlerbehebung oder Performanceoptimierung bereit.
In Google Chrome öffnen wir die Entwicklertools einfach mit der Taste F12 (für den Mac ist es Cmd + Opt + I). Vermutlich öffnet sich am unteren Rand des Browsers nun ein Fenster mit vielen verwirrenden Optionen – aber keine Angst, nach und nach sprechen wir einige davon durch. Dieses Fenster können wir auch vom Browser entkoppeln (zum Beispiel um es auf einen zweiten Bildschirm zu legen) oder auf die rechte Seite des Browsers legen. Dafür klicken wir einfach rechts oben neben dem X auf die drei Punkte und sehen die entsprechenden Optionen.

Gehen wir kurz einige der Tabs durch – die wichtigsten für jetzt:

  1. Elements – Hier sehen wir den DOM Baum der Seite, und zwar so wie er gerade ist. Verändern wir also das HTML der Seite im Nachhinein per JavaScript (fügen zum Beispiel Elemente hinzu, löschen Sie oder verändern die CSS Klassen) dann können wir dies hier live mitverfolgen.
  2. Console – Die Konsole wird ein zentrales Element dieser Beitragsreihe werden. Hier teilt uns der Browser einerseits mögliche aufgetretene Fehler in unserem Code mit, andererseits haben wir aber auch die Möglichkeit, selbst Dinge in der Konsole auszugeben – die einfachste Art um beispielsweise ein Ergebnis zu überprüfen. Wie das funktioniert sehen wir im nächsten Teil dieses Beitrags.
  3. Sources – Dieses Tab zeigt uns alle geladenen JavaScripts, die es auf der Seite gibt und woher sie kommen. Öffnen wir dieses Tab auf manchen bekannten Websites werden wir uns vielleicht wundern, wie viele verschiedene JavaScripts hier zum Einsatz kommen. Oft werden auch mehrere verschiedene JavaScripts für Werbung und andere zusätzliche Elemente geladen.
  4. Network – Im Netzwerktab können wir ganz genau nachverfolgen, welche Elemente über das Netzwerk geladen werden, wie lange das dauert und was die Antwort von der anderen Seite war. Ein unglaublich wichtiges Tool, gerade wenn es später noch um das Thema AJAX geht.

Das sind für jetzt mal die wichtigsten Tabs. Auf die anderen gehen wir zu einem späteren Zeitpunkt noch näher ein, wenn wir mehr Erfahrung mit der Programmierung gesammelt haben.

 

 

Variablen in JavaScript

Genug des Drumrum, es wird Zeit, dass wir in die Programmierung einsteigen. Fangen wir mit einem wichtigen Fundament an: die Variable.

Beim Programmieren geht es oft um Dynamik. Genau wie früher im Matheunterricht konnte man mit festen Zahlen nur bis zu einem bestimmten Punkt kommen, irgendwann kamen auch hier x, y und z ins Spiel. Doch was ist nun eine Variable in der Programmierung?

Der Interpreter legt Werte im Speicher ab um darauf zugreifen zu können. Stellen wir uns das einfach wie ein großes Regal vor. Um sich zu merken, wo Dinge abgelegt sind, ist dieses Regal durchnummeriert. Und eine Variable ist nichts anderes als ein menschlich lesbarer Name hinter dem so eine Regalnummer steckt – etwa so als würden wir die Regalnummer auf einen Zettel schreiben und ihn unserem Kollegen geben. Er weiß dadurch sofort, wo er nachschauen muss.

Wir könnten natürlich auch direkt mit der Regalnummer programmieren aber mal ehrlich – wer weiß denn nach fünf Minuten noch, was sich hinter etwas wie 0x01ABC43 versteckt?! Eben. Und weil die Lesbarkeit von Code wichtig ist können wir stattdessen einen sinnvollen Namen wie beispielsweise age vergeben. Doch wie erstellen wir nun eine Variable? Dafür gibt es in JavaScript das Schlüsselwort var.

Die script Tags lasse ich ab sofort in Beispielen weg. Um dem Browser mitzuteilen, dass wir den Code als JavaScript interpretiert haben wollen, benötigen wir diese immer. In den Beispielen beschränke ich mich ab nun auf den JavaScript Code selbst.

In diesem Beispiel teilen wir dem Browser mit Ich hätte gerne eine Variable mit dem Namen age. Bitte reserviere einen Platz in meinem Speicherregal dafür. Dieses Regal ist nun allerdings noch leer, der Platz ist allerdings schonmal reserviert und der Browser weiß ab jetzt: Immer wenn ich den Namen age benutze meine ich eigentlich genau diesen Ort im Speicher. Diesen Vorgang nennt man Deklaration – das Bekanntmachen einer Variable für den Interpreter.

 

 

Nun möchte ich ich aber auch etwas in mein Regal reinlegen – zum Beispiel eine Zahl.

Das geschieht ganz einfach mit einem = Zeichen. Ein einfaches = bedeutet in JavaScript immer eine Zuweisung. Der Wert auf der rechten Seite wird dem Wert auf der linken Seite zugewiesen, ich lege also die Zahl 28 im Regal, das für age reserviert wurde ab. Sobald ich nun age wieder verwende wird im Hintergrund die Zahl 28 benutzt, so lange bis ich der Variablen age einen neuen Wert zuweise (oder sie lösche).
Die Deklaration und Zuweisung kann ich auch in einem Schritt erledigen.

 

Erinnern wir uns nochmal an die Entwicklertools von oben. Wie kann ich nun den aktuellen Wert einer Variable ausgeben lassen? Ganz einfach mit dem Befehl console.log();.

In die Klammer kommt einfach der Wert, den ich ausgeben möchte. Das kann einerseits eine Variable sein, genauso gut könnte ich aber auch direkt eine Zahl in die Klammer schreiben (wir erinnern uns: Wenn ich eine Variable im Code schreibe wird der Interpreter den ihr zugewiesenen Wert verwenden).

Legen wir einfach eine Datei index.htm an und fügen den Code oben ein (script Tags nicht vergessen!). Dann öffnen wir die Datei in unserem Browser und schauen in die Konsole der Entwicklertools – wir sollten den Wert 28 sehen.

 

Soviel zu einem ersten Einstieg in die Variablen. Auch im nächsten Beitrag werden diese uns noch ein wenig verfolgen – wie gesagt, es handelt sich hier um eins der Fundamente der Programmierung und es ist wichtig, ein gutes Fundament zu legen, bevor man ein Haus darauf baut. Wenn dich die JavaScript Programmierung weiter interessiert kann ich dir auch diesen Videokurs empfehlen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*