An die Tasten fertig los! Sei kreativ mit JavaScript
Kursthemen
-
Sag Hallo zu deinem neuen AI Freund!
Ein "AI-Freund" ist ein Freund, den man nicht im echten Leben treffen kann, aber der auf einem Computer oder einem anderen Gerät lebt. Man kann ihn programmieren, um mit ihm zu sprechen, ihm Fragen zu stellen und auch mit ihm zu spielen. Heute werden wir einen einfachen AI-Chatbot programmieren! Der Chatbot kann deinen Namen, dein Alter und deinen Lieblingsfilm speichern. Er kann auch auf bestimmte Sätze reagieren, die du ihm sagst. Bist du bereit? Lass uns anfangen!
-
Hallo!
Starte VS Code neu und dich erwartet dein letztes Programm-Projekt. Klicke auf das Symbol oben rechts, um einen neuen Ordner zu erstellen.
Gib dem Ordner einen Namen ein, z.B. AI_Freund:
Und erstell in diesem Ordner eine neue Datei
index.html. (zu Erinnerung – klicke auf das erste Symbol).
Um eine Webseite zu erstellen, auf der unser AI-Freund leben wird, benötigen wir den passenden HTML-Rahmen, den wir letzte Woche kennengelernt haben.
Um JavaScript in unsere Webseite einzubetten, müssen wir dem Computer mitteilen, dass wir dies tun möchten. Dazu verwenden wir das <script> ... </script> Tag.
Was möchten wir unserem AI-Bot beibringen? Es wäre nett, wenn er uns begrüßen könnte! Dazu nutzen wir die Alert-Funktion:
Gut zu wissen!"alert" ist eine JavaScript-Funktion, die eine kleine Meldung auf dem Bildschirm anzeigt, um den Benutzer auf etwas aufmerksam zu machen. Sie kann zum Beispiel genutzt werden, um eine Fehlermeldung anzuzeigen oder den Benutzer zu begrüßen.
Speichere dein Programm und probiere
es aus. VariablenDer AI-Bot ähnelt uns Menschen ein bisschen, da er über ein Gedächtnis verfügt und sich an Dinge erinnern kann, die ihm erzählt werden. Zum Beispiel ist es ihm möglich, sich deinen Namen zu merken. Dies wird mithilfe von Variablen realisiert.
Gut zu wissen!Variablen in JavaScript sind wie Behälter, in denen wir Informationen speichern können. Diese Informationen können wir später abrufen und verwenden, um verschiedene Dinge zu tun, wie zum Beispiel Berechnungen durchzuführen oder Texte auszugeben.
Wir haben den Namen des Benutzers in der Variablen "name" als Zeichenkette gespeichert und das Alter als Zahl in der Variablen "age" abgelegt.
Probiere das Programm aus. Okay, der Bot kann
dich jetzt persönlich begrüßen! Was können wir ihm noch beibringen?
Okay, der Bot fragt dich jetzt auch nach deinem Lieblings-Computerspiel und zeigt dir dann alle Informationen an, die er über dich gesammelt hat. Fehlt dir noch etwas? Probiere herum und füge weitere Fragen hinzu!
-
if-else
Wenn du dieses Programm mehrmals laufen lässt und jeweils verschiedene Antworten eingibst, fällt dir auf, wie eintönig ein solches Gespräch werden kann. Der Bot wiederholt also nur, was du gesagt hast. Vielleicht kann er auch auf unsere Antworten reagieren?
Ein Beispiel dafür wäre, dass der Bot dem Benutzer Fragen stellt und dann entsprechend auf die Antwort reagiert.
Nun stehen dem Benutzer zwei Antwortmöglichkeiten zur Verfügung, "Ja" oder "Nein". Dementsprechend müssen wir eine Fallunterscheidung im Programm implementieren
Gut zu wissen!Eine If-Else-Struktur in JavaScript ist wie eine Art Entscheidungsbaum, bei dem wir bestimmte Bedingungen überprüfen und basierend darauf verschiedene Aktionen ausführen können.
Ein einfaches Beispiel dafür wäre, wenn wir überprüfen wollen, ob eine Person alt genug ist, um eine bestimmte Attraktion in einem Freizeitpark zu nutzen:
Hier überprüfen wir zuerst, ob die Person mindestens 18 Jahre alt ist. Wenn ja, wird eine entsprechende Nachricht ausgegeben. Wenn nicht, überprüfen wir die nächste Bedingung (ob die Person mindestens 12 Jahre alt ist) und geben eine entsprechende Nachricht aus. Wenn auch diese Bedingung nicht erfüllt ist, wird die letzte Nachricht ausgegeben.
In unserem Programm können wir if-else-Abfragen so implementieren:
Gut zu wissen!Der "==" Operator in JavaScript ist wie ein Prüfwerkzeug, das überprüft, ob zwei Dinge gleich sind. Wenn sie gleich sind, gibt der Operator "true" (Wahr) zurück, ansonsten gibt er "false" (Falsch) zurück.
Ändere dein Quelltext, speichere das Projekt und starte das
Programm einige Male. Probiere mehrere Antworten durch, natürlich auch „Ja“ und
„Nein“. Klappt alles? -
Ein kleines Ratespiel
Wenn der Benutzer zustimmt zu spielen, sollte dann ein Spiel gestartet werden. Worum geht es? Der Computer denkt sich eine Zahl aus – sagen wir zwischen 1 und 1000. Und du hast die Aufgabe, diese für dich zufällige Zahl mit möglichst wenigen Versuchen zu erraten.
Legen wir also los. Im Block 'if(play == "Ja")'
erklärst du zuerst die Spielregeln und speicherst diese dann in der Variable
'rules'.
Gut zu wissen!Wenn wir eine Variable mit "var" deklarieren, ist sie im gesamten Code verfügbar, auch wenn sie innerhalb einer Funktion deklariert wird. Wenn wir jedoch "var" weglassen, wird die Variable nur innerhalb des Blocks verfügbar sein, in dem sie erstellt wurde. Dann erstellen wir noch eine Variable:
Bei der Variablen zufall geht es ziemlich „wild“ zu. Dass am Ende eine zufällig erzeugte Zahl herauskommen soll, vermutest du schon – wie der Variablennamen besagt. Math.random() erzeugt eine Zufallszahl zwischen 0 und 1. Wenn man diese Zahl mal 1000 nimmt, wird der Bereich auf 0 bis 1000 erweitert.
Das Ergebnis ist natürlich eine Dezimalzahl, weshalb wir die Hilfe der Methode Math.floor() brauchen: Die sorgt dafür, dass am Ende eine ganze Zahl herauskommt. Die liegt allerdings zwischen 0 und 999, deshalb addieren wir am Ende noch eine 1. Damit denkt sich der Computer wirklich eine Zahl zwischen 1 und 1000 aus.
Dann wird die Spielregel angezeigt, danach kommt die Aufforderung zu raten, also eine Zahl einzugeben. Die eingegebenen Ziffern werden dann in eine ganze Zahl umgewandelt, dafür verwenden wir die Funktion ‚Number‘.
Anschließend wird überprüft, ob die vom Spieler geratene Zahl größer oder kleiner oder gar genauso groß ist wie die Zufallszahl.
So hast du Orientierung, in welche Richtung du weiterraten musst, um zur richtigen Zahl zu kommen. (Wie du siehst, kann man die komplette if-Struktur auch in eine Zeile schreiben.)
Du willst das Programm ausprobieren? Nur zu! -
Am Ende jeder Woche werde ich den vollständigen Code der Vorlesung veröffentlichen, der alles enthalten sollte, was auch in deinem Dokument stehen sollte. Du kannst ihn einfach kopieren und einfügen, falls dein Code nicht richtig funktioniert und du den Fehler nicht finden kannst. Allerdings ermutige ich dich sehr dazu, es zuerst selbst zu versuchen und den Fehler selbst zu beheben!
-
