Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2023:js-intro [2023/02/05 13:03] – created Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg1-2023:js-intro [2023/02/21 12:35] (current) – [Zahlenraten] Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== Erste Programme in JavaScript ======
+===== Basics =====
+<WRAP todo>
+  * Laden Sie folgendes {{lehrkraefte:blc:informatik:ffprg1-2023:01-intro-basics.zip|zip-Archiv}} herunter und entpacken Sie es an einen geeigneten Ort. Z.B. gleich mit der Kommandozeile:
+<code bash>
+freifach                                     # Ins geeignete Verzeichnis wechseln
+unzip ~/Downloads/01-intro-basics.zip        # Nicht ausschreiben, Tabulator-Taste verwenden!
+cd 01-intro-basics
+start basics.html                            # Seite im Browser zum Testen öffnen
+code .                                       # Visual Studio Code starten.
+</code>
+</WRAP>
+<WRAP todo>
+  * Gehen Sie den HTML-Code durch und versuchen Sie, jede Zeile zu verstehen. Wenn Sie eine Zeile nicht verstehen, fragen Sie.
+  * Gehen Sie den CSS-Code durch.
+  * Gehen Sie den JavaScript-Code Zeile für Zeile durch. Stellen Sie Fragen, wenn etwas nicht klar ist.
+</WRAP>
+<WRAP todo>
+  * Fügen Sie im HTML-Code einen zweiten Knopf mit dem Text «Löschen» ein, der die Funktion ''loeschen();'' aufrufen soll.
+  * Im JavaScript-Code, kopieren Sie die Funktion ''ausgabe'' und ändern Sie diese wie folgt ab:
+    * Der Funktionsname wird zu ''loeschen'' umbenannt.
+    * Die Funktion bekommt kein Argument, dargestellt durch ein leeres Klammerpaar.
+    * Die Funktion löscht den gesamten Inhalt vom ''div'' mit id ''meinOutput''. Dazu wird ''innerText'' vom Element auf die leere Zeichenkette <HTML>&quot;&quot;</HTML> gesetzt.
+    * Testen Sie Ihr Programm. Öffnen Sie dabei die Entwicklertools mit F12 und öffnen Sie die Console, damit eventuelle Fehlermeldungen angezeigt werden.
+    * Korrigieren Sie allfällige Fehler.
+<hidden Lösungsvorschlag>
+<code js>
+// Probieren Sie erst selbst, stellen Sie Fragen, wenn Sie nicht weiterkommen. Die Lösung folgt.
+</code>
+</hidden>
+</WRAP>
+===== Schere, Stein, Papier =====
+<WRAP todo>
+  * Laden Sie folgendes {{lehrkraefte:blc:informatik:ffprg1-2023:02-schere-stein-papier.zip|Zip-Archiv}} herunter und entpacken Sie es an einen geeigneten Ort. Z.B. gleich mit der Kommandozeile:
+<code bash>
+freifach                                       # Ins geeignete Verzeichnis wechseln
+unzip ~/Downloads/02-schere-stein-papier.zip   # Nicht ausschreiben, Tabulator-Taste verwenden!
+cd 01-intro-basics
+start ssp.html                                 # Seite im Browser zum Testen öffnen
+code .                                         # Visual Studio Code starten.
+</code>
+</WRAP>
+Lokale Webentwicklung: Sie können in VSCode die «Live Server»-Extension installieren. Durch Rechtsklick auf die HTML-Datei kann diese direkt auf einem lokalen Webserver in einem Browser geöffnet werden. Dazu wird zursätzlicher Code in der Seite eingefügt, der die Seite automatisch neu lädt, wenn man eine der beteiligten Dateien neu speichert.
+<WRAP todo>
+  * Gehen Sie die drei Dateien ssp.html, ssp.css und spp.js durch und kommentieren Sie alle Zeilen, die nicht sofort offensichtlich sind. Wenn Sie nicht weiterkommen, fragen Sie Google, Ihren Banknachbarn oder Ihren Programmier-Lehrer.
+  * Überlegen Sie sich Strategien, wie man gegen einen menschlichen Spieler eher gewinnen könnte. Besprechen Sie diese Strategien mit Ihrem Programmier-Lehrer und wie man diese programmieren könnte.
+</WRAP>
+===== Zahlenraten =====
+<WRAP todo>
+Mit den beiden Vorlagen versuchen Sie folgendes Spiel zu programmieren:
+  * Der Computer merkt sich eine zufällige Zahl zwischen 1 und 100.
+  * Der Spieler ratet eine Zahl, bis er die richtige findet.
+  * Der Computer sagt jedesmal ob die geratene Zahl zu gross oder zu klein ist.
+  * Der Computer zählt die Anzahl Versuche
+  * Das Spiel kann mit einem Knopf neu gestartet werden.
+Technische Hinweise:
+  * Eingabe-Feld für Zahl erstellen: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+  * Zufallszahlen:
+    * ''Math.random()'' liefert eine Dezimalzahl in $[0,1[$.
+    * ''Math.random()*100'' liefert eine Dezimalzahl in $[0,100[$.
+    * ''Math.floor(Math.random()*100)'' rundet ab und liefert also natürliche Zahlen von 0 bis und mit 99.
+Lösungsvorschlag (minimal): {{lehrkraefte:blc:informatik:ffprg1-2023:02a-zahlenraten.zip}}
+</WRAP>