Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:ffprg1-2024:lektion0 [2024/02/07 12:50] – [Setup und Hello World] Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg1-2024:lektion0 [2024/02/07 12:54] (current) – [Hello world] Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== 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 [[https://bldsg-my.sharepoint.com/:v:/g/personal/ivo_bloechliger_ksbg_ch/EQLVjIbr_6JJnQwQijgsL5kBND-6zghAlfKRZP72cffqFA?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=7c6dcD|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:
+<code html>
+<h1>Hello world</h1>
+Greetings earthlings!
+</code>
+  * Speichern Sie die Datei. Der Browser sollte die Seite sofort neu anzeigen.
+  * Fügen Sie folgenden Code im head hinzu:
+<code html>
+<script src="hello.js"></script>
+</code>
+  * Ctrl-Klick auf hello.js, um die Datei gleich neu anzulegen.
+  * Tragen Sie folgenden Code in der neuen Datei ''hello.js'' ein:
+<code javascript>
+for (let i=0; i<10; i++) {
+  console.log(`Hello und ${i} mal ${i} ist ${i*i}`);
+}
+</code>
+  * 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.