Setup und Hello World
- Installieren Sie «Visual Studio Code» (VSCode). Unter Windows kann das direkt mit dem AppStore gemacht werden.
- Tun Sie ihrem zukünftigen Selbst einen Gefallen und verwenden Sie ausschliesslich Kleinbuchstaben a-z, Ziffern 0-9 und den Bodenstrich (Underscore) _ für Datei- und Ordnernamen. Vermeiden Sie:
- Leerschläge, Umlaute und Akzente (äöüéê…), Grossbuchstaben.
- Legen Sie einen geeignetes neues Verzeichnis an, um alle Ihre Dateien für das Freifach zu speichern. Dieses Verzeichnis wird im Folgenden mit
freifachprogrammieren
benannt.
Hello world
Dazu gibt es einen Screencast
- Legen Sie im Verzeichnis
freifachprogrammieren
ein neues Verzeichnishelloworld
an. - Starten Sie VSCode
- Im Menü File→Open Folder öffnen Sie den Ordner
helloworld
. - Installieren Sie die Erweiterung «Live Server».
- Fügen Sie eine neue Datei
index.html
hinzu.- Geben Sie ! ein, um eine «leere» HTML-Seite zu erzeugen.
- Speichern Sie die Datei (am einfachsten mit Ctrl-S)
- Starten Sie den Live-Server, um die Seite zu betrachten.
- Schieben Sie das VSCode Fenster nach links (Windows + Pfeil nach links), das Browser-Fenster nach rechts (Windows + Pfeil nach rechts).
- Vervollständigen Sie den body wie folgt:
<h1>Hello world</h1> Greetings earthlings!
- Speichern Sie die Datei. Der Browser sollte die Seite sofort neu anzeigen.
- Fügen Sie folgenden Code im head hinzu:
<script src="hello.js"></script>
- Ctrl-Klick auf hello.js, um die Datei gleich neu anzulegen.
- Tragen Sie folgenden Code in der neuen Datei
hello.js
ein:
for (let i=0; i<10; i++) { console.log(`Hello und ${i} mal ${i} ist ${i*i}`); }
- Speichern Sie die Datei mit Ctrl-S
- Im Browser, öffnen Sie die Entwicklertools (F12) und zeigen Sie sich die Konsole an. Dort sollten Sie die Ausgabe von Ihrem Programm sehen.