Erste Programme in JavaScript

• Laden Sie folgendes zip-Archiv herunter und entpacken Sie es an einen geeigneten Ort. Z.B. gleich mit der Kommandozeile:

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.

• 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.

• 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 ""

    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.

// Probieren Sie erst selbst, stellen Sie Fragen, wenn Sie nicht weiterkommen. Die Lösung folgt.

• Laden Sie folgendes Zip-Archiv herunter und entpacken Sie es an einen geeigneten Ort. Z.B. gleich mit der Kommandozeile:

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.

• 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.

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): 02a-zahlenraten.zip