Kleiner JavaScript Kurs
Verzweigungen (Zahlenraten)
Wir verwenden unser Ein-, Ausgabe - Beispiel für die Programmierung des "Zahlenraten"-Spiels erneut.
Der Rechner soll eine Zahl zwischen 1 und 100 ermitteln, die wir dann erraten müssen.
Ein Eingabefeld benötigen wir nicht mehr (bitte im HTML- und im JavaScript Quelltext löschen).
Dafür kommt eine weitere Schaltfläche hinzu ("Neustart"). Damit wird die Zufallszahl erzeugt. Bitte beachten:
Die Zufallszahl-Variable und die Meldung-Variable werden global definiert, damit sie in beiden Programmen gültig sind.
Programm 1 (function Z_Start() {} )
Wie im Beispiel "Würfel" erzeugen wir eine Zufallszahl (diesmal zwischen 1 und 100)
var Zufallszahl;
var Meldung;
function Z_Start(){
Zufallszahl=Math.random();
Zufallszahl=Math.ceil(Zufallszahl*100);
var Ausgabe=document.getElementById('meinAusgabefeld');
Meldung="Bitte Zahl raten <br> ";
Ausgabe.innerHTML =Meldung;
}Programm 2 (function Zahlenraten(){} )
Jetzt dürfen wir unseren Tipp eingeben (mit "OK?" quittieren)
und bekommen über die If Verzweigungen einen Hinweis, ob unser Tipp zu gross, zu klein, oder richtig ist
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript Kurs; Ein- und Ausgaben</title>
<script type="text/javascript">
var Zufallszahl;
var Meldung;
function Z_Start(){
Zufallszahl=Math.random();
Zufallszahl=Math.ceil(Zufallszahl*100);
var Ausgabe=document.getElementById('meinAusgabefeld');
Meldung="Bitte Zahl raten <br> ";
Ausgabe.innerHTML =Meldung;
}
function Zahlenraten(){
var Meldung;
var Meldung1="zu gross";
var Meldung2="zu klein";
var Meldung3="stimmt genau ! Herzlichen Glückwunsch";
var a=document.getElementById('meinEingabefeld_a').value;
var Ausgabe=document.getElementById('meinAusgabefeld');
if (a > Zufallszahl){Meldung=a + " ist " + Meldung1 + "<br>";}
if (a < Zufallszahl){Meldung=a + " ist " + Meldung2 + "<br>";}
if (a == Zufallszahl){Meldung=Meldung3;}
Ausgabe.innerHTML = Meldung;
}
</script>
</head>
<body>
<h1>JavaScript Kurs; Ein- und Ausgaben</h1>
<h2>Der Rechner "überlegt" sich eine Zahl zwischen 1 und 100, die wir erraten müssen</h2>
<input type="button" value="Neustart" onclick="Z_Start();" /><br>
<!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a und ID=meinEingabefeld_b -->
Mein Tipp: <input type="text" id="meinEingabefeld_a" />
<!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript -->
<input type="button" value="OK?" onclick="Zahlenraten();" /> <br>
<!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld-->
<h4 id="meinAusgabefeld"></h4>
</body>
</html>Sollte das Programm nicht funktionieren, sollte man zum Test die vom Rechner ermittelte Zufallszahl mit ausgeben (mit alert, oder am Ende vom Programm 1:
Ausgabe.innerHTML ="Bitte Zahl raten" + Zufallszahl ;