Vierarmige Aliens, ein Löwe mit Brille und JavaScript #3 – Variablen und Bedingungen

Nach der Begegnung mit PG83 kam der Junge mit dem blauen Pulli zurück in das Zimmer des Löwen. Das Mädchen mit dem grünen Pulli und den Löwen fand er vor dem Bildschirm sitzend, auf dem stand:

<script language="javascript">
var text = "Alle lieben das Mädchen mit dem grünen Pulli"
var text2 = ", denn es ist so klug!";
var text_gesamt = text + text2;
text_gesamt = text_gesamt + "!";
alert(text_gesamt);
</script>

Der Löwe vor dem Bildschirm

Der Löwe erklärte dem Mädchen mit dem grünen Pulli das Programm.

text und text2 sind sogenannte Variablen und werrrden mit dem Schlüsselwort var erzeugt.
– Was sind denn Schlüsselwörter?
– Das sind Wörrrter, die eine feste Bedeutung haben und nurrr für diesen Zweck benutzt werrrden können. Du errrkennst sie darrran, dass sie hellblau darrrgestellt werrrden.
– Aber text2 könnte ich auch text3 oder x oder das_maedchen_mit_dem_gruenen_pulli oder =%&()!! heißen, richtig?
– Fast rrrichtig. =%&()!! darrrf eine Varrriable nicht heißen. Nurrr Buchstaben (ohne Umlaute), Unterrrstrich „_“ und Zahlen (aber nicht an der ersten Stelle des Namens) sind erlaubt.
– Aha. Was können noch gleich diese Variablen?
– Man kann mit ihnen Werte speichern und später wiederverwenden. Du kannst Variablen auch überschreiben, wie du in Zeile 4 und 5 siehst. Das Schlüsselwort var wird nur beim ersten Mal gebraucht, wenn die Variable erzeugt wird!
– Interessant. Igor, ich bin müde und geh jetzt schlafen. Bis morgen!

Der Junge mit dem blauen Pulli und der Löwe hingen noch etwas vor dem Fernseher herum und zappten sich wild durch die Sender. Längere Zeit blieben sie bei einer Quiz-Sendung hängen. Der Löwe wusste fast alle Antworten, was den Jungen mit dem blauen Pulli sehr beeindruckte. Als die Sendung vorbei war, wäre der Löwe um 500.000 Euro reicher geworden, wenn er doch offiziell mitgemacht hätte. Statt dessen hatte er eine andere Idee:

– Komm, wir machen unserrr eigenes Quiz-Spiel!
– Ach Igor, ich bin müde und muss morgen früh zur Schule…
– Nix da! Wir machen das jetzt, basta!

Den HTML-Tag <script language="javascript"> </script> lasse ich ab jetzt weg. Abgesehen von dieser Möglichkeit gibt es noch eine weitere, Javascript-Code einer HTML-Datei hinzuzufügen.
test.html:

<script type="text/javascript" src="schokokeks.js"></script>

Dein Javascript-Programm kannst Du dann vollständig in der Datei schokokeks.js schreiben. Ab einer bestimmten Programmgröße ist eine solche Trennung von HTML-Datei und Javascript sicherlich sinnvoll.

Der Löwe mit der Brille hackte mit beindruckender Geschwindigkeit in die Tasten, und heraus kam dabei der Folgende Text:

Igor hat an einigen Stellen sogenannte Kommentare in seinen Code geschrieben. Das ist Text, der den Quelltext für Menschen besser verständlich machen soll, vom Computer beim Ausführen deines Programms aber ignoriert wird. In Javascript gibt es zwei Möglichkeiten, Kommentare zu schreiben:

// Das ist ein Kommentar.

oder

/*Das ist auch ein Kommentar
Der Kommentar ist gleich zuende */

var anzahl_richtig = 0;
var antwort;
var richtige_antwort;

antwort = prompt("Wie heißt die Hauptstadt von Frankreich?");
richtige_antwort = "Paris";
// Vorsicht: "==" ist nicht das gleiche wie "=" 
// Das ist ein häufiger Fehler.
// x = 5 Ist eine Zuweisung: x sei jetzt 5!
// x == 5 Ist ein Vergleich: Ist x gleich 5?
if (antwort == richtige_antwort) {
  anzahl_richtig++; // '++' ist der sogenannten "Inkrement"-Operator. 
  //Das hat die gleiche Bedeutung wie:
  // anzahl_richtig = anzahl_richtig + 1;
  // kann aber viel schneller getippt werden
}

antwort = prompt("In welchem Jahr fiel die Berliner Mauer?");
richtige_antwort = 1989; 
/* 1989 ist eine Zahl, wird von Javascript aber automatisch 
in die Zeichenkette "1989" umgewandelt. Bei vielen anderen 
Programmiersprachen ginge das so nicht, also Vorsicht!*/
if (antwort == richtige_antwort) {
  anzahl_richtig++;
}
alert("Du hast "+ anzahl_richtig + " Frage(n) richtig beantwortet!");

Der Junge mit dem blauen Pulli schaute sich das Programm genau an und dachte dabei laut mit.

– Mit prompt("Bla Bla Bla") kann man offenbar diesen Dialog erzeugen.
– Korrrrrekt!
– Und die Variable antwort bekommt dann den Wert, den man da eingetippt hat.
– Rrrichtig!
if scheint ein weiteres Schlüsselwort zu sein, denn es ist hellblau. Was macht das?
if (antwort == richtige_antort) {anzahl_richtig++;} kann man überrrsetzen mit: Wenn antwort gleich richtige_antwort ist, dann erhöhe den Zähler der richtigen Antworrrten um eins.
– Warum schreibst Du dann „if“ und nicht „wenn“? Du weißt, dass ich außer ein paar Schimpfwörtern doch kaum englisch kann.
– Die Schlüsselwörrrterrr sind fest vorgegeben. Keine Angst: Die Liste der Schlüsselwörrrter ist recht überschaubarrr, du brauchst also nicht unbedingt Englisch zu lerrrnen, um zu programmieren. Wobei das aus mehreren Gründen sicherlich nützlich wäre, aberrr ich schweife ab.
– Okay, okay. Hmmm. Das mit den Zeichenketten und den Zahlen verstehe ich nicht ganz…
– Zu sogenannten Datentypen will ich dir errrst späterrr was erzählen. In Javascript kannst Du das Thema noch eine Zeit lang ignorierrren. Ich wollte es nurrr schon mal erwähnen.
– Okay….
– Alles klarrr?
– Ja, das hab‘ ich kapiert. Aber… wenn man richtig viele Fragen hat, wird das nicht etwas nervig, immer die gleichen Sachen da hinzuschreiben?
– Du hast Rrrecht. Aber wie du das geschickterrr programmieren kannst, zeige ich dir morrrgen.

Ein Kommentar

  1. Gerade genial! Eine Einführung in Java Script für Kinder. So der Löwe heißt Igor, nicht wahr? Warum können wir seinen Namen erfahren und nicht die Namen der Kinder? Ich warte auf die Aliens.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert