Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ihre ersten JavaScript-Befehle in GitHub Codespaces

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ihre ersten JavaScript-Befehle in GitHub Codespaces

“

Um dauerhaft programmieren zu können, brauchen wir nun eine eigene Entwicklungsumgebung. Dafür gibt es zwei Möglichkeiten. Entweder Sie laden sich die Dateien herunter auf Ihre lokale Maschine, installieren sich dort eine lokale Entwicklungsumgebung und richten die ein, oder aber Sie nutzen ganz bequem GitHub Codespaces. Dann passiert alles im Browser und Sie müssen keine eigene Software installieren. Für GitHub Codespaces brauchen Sie einen kostenlosen GitHub Account und schon get es los. Wenn Sie Codespaces nicht nutzen möchten, dann gehen Sie bitte einfach auf das nächste Video. Da zeige ich Ihnen dann, wie Sie die Dateien selber herunterladen. Jetzt geht es darum, wie wir ohne zusätzlich installierte Software direkt mit dem Coden anfangen. Ich klicke hier in der Webansicht unterhalb des Trainings auf GitHub Codespaces und dann auf Öffnen. Und dann lande ich hier in so einer Ansicht. Gegebenenfalls müssen Sie noch einen Account anlegen oder sich einloggen, aber dann landen Sie eben hier in solch einer Ansicht und da haben Sie diesen auffälligen Button rechts oben, "Create codespace on main", und genau das machen wir jetzt mal. Sie können sich jetzt einen Kaffee holen gehen. Das dauert vielleicht zwei, drei Minuten beim allerersten Mal. Wenn dieser Codespace mal eingerichtet ist, zukünftig geht es dann deutlich schneller. Sie sehen, auch hier im Hintergrund wird jetzt Visual Studio Code eingerichtet. Es werden auch die erforderlichen Extensions, also die Erweiterungen, die ich vorgesehen habe, automatisch installiert, so dass Sie direkt mir dem Coden anfangen können. Und das machen wir jetzt mal. Dieses Fenster ist dreigeteilt. Ich habe hier links eine Übersicht mit allen Dateien, die in den Übungsdateien enthalten sind. Wenn ich jetzt auf Kapitel 1 bis 9 darauf klicke, dann sehe ich hier verschiedene HTML-Dateien. Klicke ich darauf, dann geht hier im großen Bereich die Datei auf. Ich kann sie editieren. Das Terminal hier unten brauchen wir momentan nicht, also gehe ich hier mal auf das Kreuzzeichen und habe hier ein bisschen mehr Platz. Jetzt möchte ich eine neue Datei anlegen. Also dieses "game.html" schließe ich hier oben und gehe hier darauf und tippe jetzt mit der rechten Maustaste und sage "Neue Datei". Wie nennen wir die? "hello.html". Das "html" ist wichtig, weil JavaScript wird in HTML eingebettet. Die Datei wird hier auch gleich geöffnet und angelegt. Sie ist natürlich noch leer. Visual Studio Code hilft mir jetzt, ein einfaches HTML-Grundgerüst zu bauen, und zwar tippe ich dazu einfach Ausrufezeichen und tippe dann auf Tabstop, also links oben auf diese Taste mit diesen zwei Pfeilen, und schon sorgt Visual Studio Code dafür, dass mir hier ein HTML-Grundgerüst gebaut wird. Das soll uns momentan nicht weiter interessieren. Für uns geht es jetzt erst mal um die Programmierung. Bei "title" schreibe ich mal "Hallo Welt" rein. Und hier zwischen diesen beiden body-Tags, also das, was in spitzer Klammer steht, das nennt sich "tag", da schrieben wir mal einen "Guten Tag" rein. Das ist jetzt der Quelltext einer HTML-Seite. Die möchten wir uns jetzt mal anschauen. Weil wir hier in GitHub Codespaces schon die Extension "Go live" installiert haben, finden Sie hier unten diesen kleinen Button "Go live". Da steht "Click to run live server". Genau das mache ich jetzt mal. Und jetzt ein neues Tab aufgegangen und da steht einfach nur ein freundliches "Guten Tag" und hier oben steht "Hallo Welt". Wenn ich jetzt den Tab hier wieder wechsle, dann sehen Sie -- dass hier kann ich mal wegklicken --, dann sehen Sie, hier steht das "Hallo Welt", das ist genau das, was ich hier oben sehe, und das "Guten Tag" ist das, was ich hier gesehen habe. Jetzt mache ich es mir mal ein bisschen gemütlicher. Ich nehme diesen Tab hier raus, den hier mache ich etwas kleiner, so, und jetzt kann ich nämlich beide schön nebeneinander setzen, damit ich das hier etwas übersichtlicher habe. So. Und schon sieht es hier etwas gemütlicher aus. Ich kann auch hier diese Leiste hier entfernen, indem ich hier noch mal draufklicke, und wenn ich jetzt aus dem "Guten Tag" ein bayerisches "Servus" mache, dann kann ich das Ganze noch speichern mit Strg.+S. Es wird gespeichert. Und wenn ich jetzt hier auf "Neu laden" gehe, dann sehen Sie, steht hier "Servus". Das heißt, alles, was ich hier ändere im Quelltext, kann ich mir dann hier direkt anschauen. Aber wir sind ja nicht da, um HTML zu programmieren, sondern wir möchten JavaScript programmieren. JavaScript ist in HTML eingebettet, und zwar in sogenannte Script Tags. Das heißt, wir müssen einmalig spitze Klammer "script" schreiben und dann noch mal spitze Klammer "https://accionvegana.org/accio/QjMt92Yu4WakV2aulGbuUGZ6MHc0/script" und das bedeutet, wir gehen aus dem HTML-Modus raus direkt in den JavaScript-Modus. Und ein JavaScript-Befehl, den kennen Sie schon. Den habe ich Ihnen vorhin gezeigt. Der heißt "alert("Hallo")". Hinten machen wir noch einen Strichpunkt. Muss nicht unbedingt sein, aber wenn jetzt hier die Seite entweder automatisch neu geladen wird oder Sie sie von Hand neu laden, dann steht hier einfach ein freundliches "Hallo" und ich kann auf "OK" klicken. Das heißt, wir haben jetzt eine Entwicklungsumgebung und können direkt programmieren und unsere Dateien auch dauerhaft speichern. Werfen wir mal einen kurzen Blick in die Übungsdateien. Da haben wir die Datei "hello_world". Wenn ich das hier etwas größer mache, dann sehen Sie, dann wird hier genau dieses Grundgerüst verwendet, das ich Ihnen gerade gezeigt habe, das ist in allen Übungsdateien gleich, und wir haben hier nur zwei Zeilen Code. Streng genommen sind es vielleicht drei, aber das ist eine leere Zeile. Zunächst einmal werde ich hier gefragt: "Wie heißen Sie?", und das, was man hier eingibt, wird in eine Variable gespeichert. Was eine Variable ist, zeige ich Ihnen später. Und dann wird einfach ein "Guten Tag" und dieser Name ausgegeben. Jetzt kann ich hier unten, z.B., hier auf dieses "Port: 5500" klicken, "Click to close server", dann wird genau dieser Server geschlossen, den ich Ihnen gerade gezeigt habe und jetzt kann ich ihn wieder neu aufmachen mit genau dieser Datei. Ich klicke auf "Go live" und ich werde hier begrüßt mit einem "Wie heißen Sie?". Na, ich heiße Thomas. Ich klicke auf OK, und es steht hier ein "Guten Tag, Thomas". Das heißt, mit GitHub Codespaces können Sie, ohne dass Sie selber Software installieren, direkt mit dem Programmieren anfangen. Was ich Ihnen jetzt allerdings in den nächsten paar kleinen Filmen zeige, ist, wie Sie ohne GitHub Codespaces weiter arbeiten. Wenn Sie allerdings GitHub Codespaces nutzen möchten, können Sie direkt zum nächsten Kapitel gehen und mit dem Programmieren anfangen.

Inhalt