Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
lehrkraefte:blc:informatik:ffprg1-2023:js-intro [2023/02/05 14:03] Ivo Blöchliger created |
lehrkraefte:blc:informatik:ffprg1-2023:js-intro [2023/02/21 13:35] (current) Ivo Blöchliger [Zahlenraten] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Erste Programme in JavaScript ====== | ====== Erste Programme in JavaScript ====== | ||
- | Laden Sie folgendes zip-Archiv herunter und entpacken Sie es an einen geeigneten Ort. | + | ===== Basics ===== |
<WRAP todo> | <WRAP todo> | ||
+ | * Laden Sie folgendes {{lehrkraefte: | ||
+ | <code bash> | ||
+ | freifach | ||
+ | unzip ~/ | ||
+ | cd 01-intro-basics | ||
+ | start basics.html | ||
+ | code . # Visual Studio Code starten. | ||
+ | </ | ||
+ | </ | ||
+ | <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 todo> | ||
+ | * Fügen Sie im HTML-Code einen zweiten Knopf mit dem Text «Löschen» ein, der die Funktion '' | ||
+ | * Im JavaScript-Code, | ||
+ | * Der Funktionsname wird zu '' | ||
+ | * Die Funktion bekommt kein Argument, dargestellt durch ein leeres Klammerpaar. | ||
+ | * Die Funktion löscht den gesamten Inhalt vom '' | ||
+ | * 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. | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Schere, Stein, Papier ===== | ||
+ | <WRAP todo> | ||
+ | * Laden Sie folgendes {{lehrkraefte: | ||
+ | <code bash> | ||
+ | freifach | ||
+ | unzip ~/ | ||
+ | cd 01-intro-basics | ||
+ | start ssp.html | ||
+ | code . # Visual Studio Code starten. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Lokale Webentwicklung: | ||
+ | |||
+ | <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, | ||
+ | * Ü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. | ||
+ | </ | ||
+ | |||
+ | ===== 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:// | ||
+ | * Zufallszahlen: | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | Lösungsvorschlag (minimal): {{lehrkraefte: | ||
+ | </ |