Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ihre ersten JavaScript-Befehle in Visual Studio Code

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Ihre ersten JavaScript-Befehle in Visual Studio Code

“

Jetzt möchte ich mein erstes Programm in JavaScript mit Visual Studio Code schreiben. Ich habe Visual Studio Code, hab hier ein Verzeichnis aufgemacht mit "File" > "Open Folder", und zwar innerhalb der Übungsdateien für dieses Training, bin ich nach "code" gegangen, gehe auf "Ordner auswählen" und sehe hier diejenigen Dateien, die es schon gibt. Ich möchte aber ganz von vorne anfangen, also möchte ich eine neue Datei anlegen. Da gehe ich auf dieses Plus-Zeichen, "New File", und dem gebe ich jetzt einen Namen beispielsweise "hello.html". Dieses ".html" ist wichtig. Diese Dateinamenerweiterung brauchen wir, damit das Ganze später im Browser auch korrekt angezeigt wird. Also "hallo.html". Jetzt wird diese Datei hier links angezeigt und auch rechts kann ich anfangen zu tippen. Ich kann jetzt hier beliebigen Text eintragen. Visual Studio Code hilft mir, ein HTML-Grundgerüst zu bauen. Dieses HTML-Grundgerüst brauchen wir, damit unsere Programmierung im Browser später korrekt angezeigt wird. Also mache ich mal ein Ausrufezeichen, gefolgt von der Tab Stop-Taste, also diese doppelten Pfeile links oben auf der Tastatur, und dann sorgt Visual Studio Code dafür, dass dieses Grundgerüst hier automatisch für mich gebaut wird. Das heißt, die Sprache wird hier festgelegt auf Englisch. Ich kann hier einen ".de" eintragen, aber das ist völlig egal. Ich kann hier einen Titel angeben. Da schreibe ich, zum Beispiel, mal "Hallo Welt" rein. Und dieses Grundgerüst, das wird mir jetzt auch im Browser angezeigt. Also wenn ich jetzt hier im Body ein "Hallo" reinschreibe und dann hier unten auf "Go live" klicke, dann sehen Sie genau dieses "Hallo" hier. Und wenn ich jetzt mal meinen Editor und meinen Browserfenster hier nebeneinander laufen lasse, kann ich aus diesem "Hallo" ein "Guten Tag" machen, und dadurch, dass ich ja in meinem Falle hier "Auto save" eingeschaltet habe, wird diese Datei automatisch gespeichert, und dadurch, dass ich die Extension "Live Server" installiert habe und das Ganze hier aufgerufen habe hier über diesen Live Server-Link, wird es hier auch automatisch erneuert, immer dann, wenn ich hier eine Änderung vornehme. Also "Guten Tag" Punkt, dann sehen Sie, entsteht hier auch dieser Punkt. Das ist jetzt mal mein Grundgerüst. Das wird für alle weiteren Programmierungen im Rahmen dieses Trainings gleich sein, wir möchten jetzt aber tatsächlich JavaScript programmieren. Um JavaScript zu programmieren, muss ich zunächst einmal in den JavaScript-Modus gehen, und das mache ich, indem ich hier einfach eine spitze Klammer "script" schreibe, dies fängt also hier an meine Programmierung, und hier unten hört sie auch auf. Ich habe jetzt hier aus Versehen zwei spitze Klammern gemacht. Eine ist zu viel, die muss weg. In den Übungsdateien haben Sie das hier auch alles schon vorbereitet. Die eigentliche Programmierung und das, was wir im Rahmen dieses Trainings machen, das wird immer innerhalb dieser Script Tags passieren. Und jetzt möchte ich mal tatsächlich programmieren. Also Sie kennen ja schon ein JavaScript-Befehl aus dem Browser vorhin. Da schreiben wir einfach ein "alert("Hallo Welt")". Und hier haben wir es auch schon. "Hallo Welt". Das heißt, Visual Studio Code hat automatisch die Datei gespeichert und hat sie hier an den Browser geschickt, und jetzt habe ich hier ein "Hallo Welt". Wir können auch ein bisschen es komplizierter und etwas aufwendiger machen, also aus dieser einen Zeile, machen wir mal zwei Zeilen. Dazu öffne ich nochmal den Explorer von Visual Studio Code und gehe nach "hello_world.html". Das ist eine Datei, die es in den Übungsdateien schon gibt. Da gehe ich mal drauf, und Sie sehen, ich hab hier auch genau mein HTML-Grundgerüst. Das soll uns für die Programmierung nicht weiter interessieren. Alles was für uns wichtig ist, passiert innerhalb dieser Script Tags. Und hier habe ich jetzt ein "let name = prompt". Das heißt, ich möchte also den Nutzer oder die Nutzerin auffordern, etwas einzutippen. Das haben wir gerade ja schon mehrmals gemacht. "Wie heißen Sie?" Und das, was er oder sie eingetippt hat, das wird in einer Variable gespeichert. Was eine Variable ist, werden wir uns später genauer anschauen. Und dann sage ich einfach ein nettes "alert("Guten Tag")" und Name. Schauen wir uns das Ganze an. Bei Ihnen sieht es wahrscheinlich exakt gleich aus. Sie haben "127.0.0.1:5500" und dieses "hello.html" das mache ich mal weg, sodass genau das hier steht. "127.0.0.1:5500". Und jetzt habe ich hier eine Liste mit allen Dateien, die übrigens hier in den Übungsdateien auch enthalten sind. Und jetzt klicke ich hier auf "hello_world.html", und dann sehen Sie "Wie heißen Sie?". Jetzt gebe ich schon wieder meinen Namen ein. "Tom", klicke auf OK", "Guten Tag, Tom". Das heißt, mit Visual Studio Code und der Extension "Live Server" können sie bequem programmieren und ihre Programme auch dauerhaft speichern.

Inhalt