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.

Dazu gibt es einen Screencast

• Legen Sie im Verzeichnis freifachprogrammieren ein neues Verzeichnis helloworld 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.