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

Während das Mädchen mit dem grünen Pulli und der Löwe sich mit Javascript beschäftigten, wartete der Junge mit dem blauen Pulli geduldig im „Schrank“ im Flur. Er hatte unglücklicherweise vergessen, jemandem Bescheid zu sagen, dass er Verstecken spielen wollte. Langsam überkam ihn ein schlechtes Gewissen, weil er seine Mathe-Hausaufgaben noch nicht gemacht hatte. Trotzdem blieb er ausdauernd im Schrank sitzen, der aber eigentlich gar kein Schrank war. Es war ein Teleporter in eine andere Dimension, der einem in die Welt der vierarmigen Aliens von Xuquyla bringt. Leider war der Teleporter seit 30 Jahren außer Betrieb, weswegen er letztendlich doch eine Menge mit einem gewöhnlichen Schrank gemein hatte. Plötzlich ging unerwartet die Teleportereingangstür auf…

Es war ein vierarmiges Alien aus der Welt Xuquyla, das die Tür öffnete. Der Junge mit dem blauen Pulli sagte leise

– Bitte tu mir nichts!
– Hallo kleiner Mensch! Keine Angst, ich bin nur hier, um den Teleporter zu reparieren.
– Achso…Kannst Du meine Mathe-Hausaufgaben machen?
– Ach, rechnen kann ich selbst nicht gut. Vor allem in eurem komischen Zahlensystem!
– Was? Zahlensystem?
– Egal. Komm ich zeig dir einen Trick, den ich immer anwende, wenn ich rechnen muss. Ich heiße übrigens PG83.

Stolz präsentierte PG83 dem Jungen seine Methode, schnell etwas auszurechnen.

– Gib einfach in der Adresszeile von Firefox oder Internet Explorer javascript:alert(6+4); oder javascript:alert(5*4*3); ein und drück‘ Enter!
– Cool. Was kann man damit alles rechnen?
– +, –, * und / sind plus, minus, mal und geteilt. Und mit Klammern kannst Du die Reihenfolge der Auswertung steuern. 2+4/2 = 4, aber (2+4)/2 = 3. Ansonsten haben * und / immer eine höhere Priorität als + und –.
– Ah. Meine Mathe-Lehrerin sagt immer „Punktrechnung vor Strichrechnung“. Darum geht es also?
– Genau. Ich muss mich jetzt um den Teleporter kümmern. Bis später, kleiner Mensch.

Mit diesem Trick machte der Junge mit dem blauen Pulli seine Hausaufgaben in Windeseile. Dabei stellte er fest, dass er auch mehrere Befehle hintereinander schreiben konnte, so wie hier:

javascript: alert(5+5); alert(20*(5-2));

Offenbar konnte man ein Javascript-Programm auch auf diese Weise schreiben. Um nur mal kurz etwas auszurechnen war das sehr praktisch. Als der Junge mit den Hausaufgaben fertig war, trottete er zurück in das Arbeitszimmer von Igor, dem Löwen mit der Brille.

Warum trägt der Löwe eine Brille? Ich habe ihn mal gefragt, und er sagte: „Ich kann gut sehen. Aber mit meinerrr Brrrille sehe ich so viel klügerrr aus!“. Warum der Löwe das ‚R‘ so rollt, habe ich noch nicht ganz begriffen. Es wird gemunkelt, dass er früher ein Pirat war. Details werden aber vorerst sein Geheimnis bleiben, denn in dieser Geschichte soll es gar nicht so sehr um den Löwen gehen, sondern um den Jungen mit dem blauen Pulli und das Mädchen mit dem grünen Pulli.

In Kästen wie diesen hier findest Du Anmerkungen von mir, die mit der Geschichte nichts zu tun haben, die ich aber mal einwerfen wollte. Ein Tipp: Probiere die Beispiele selbst aus und ändere sie nach Herzenslust ab. Probieren geht über Studieren! Wenn Du ein Beispiel kopieren möchtest, setze den Mauszeiger in den Quelltext und klicke dann auf das zweite Icon.

Natürlich haben die beiden Kinder auch richtige Namen, aber die sind geheim. Streng geheim. Der Junge mit dem blauen Pulli jedenfalls suchte eines Tages nach einer Möglichkeit, der Welt mitzuteilen, wie unheimlich cool er doch sei. Er fragte den Löwen, der aufgrund seiner Brille eine Aura der Weisheit versprühte. Tatsächlich verbrachte Igor, so heißt der Löwe nämlich, fast den ganzen Tag vor dem Computer und war ein ausgezeichneter Programmierer. Also, für einen Löwen natürlich…

Igor klapperte mit seinen Tatzen ein wenig auf der Tastatur, und heraus kam Folgendes:

<script language="javascript">
alert("Der Junge mit dem blauen Pulli ist supercool!");
</script>

Der Junge mit dem blauen Pulli runzelte die Stirn.

– Was ist das?
– Das ist dein allerrrerrrstes JavaScrrript-Prrrogrrrramm! Ist das nicht toll?
– Ähhh, ja. Super!

Der Löwe war zwar nicht mehr der Jüngste, aber seine Zähne waren noch in Tipp-Topp-Zustand. Der Junge mit dem blauen Pulli tat also so, als wäre er beindruckt, um nicht gebissen zu werden. Doch der Reihe nach: Was hatte Igor gerade gemacht?

1. Er hat einen Texteditor geöffnet. Die einfachste Variante ist Notepad, das Du unter Windows über Start–>Programme->Zubehör–>Editor finden kannst. Wenn Du dich ernsthaft mit dem Thema beschäftigen möchtest, empfehle ich allerdings einen umfangreicheren Editor zu benutzen. Mein Favorit ist Notepad++, aber es gibt Dutzende weiterer guter Optionen.
2. Folgendes schrieb er im Editor:

   <script language="javascript">
   alert("Der Junge mit dem blauen Pulli ist supercool!");
   </script>
   

3. Nachdem er sein Programm geschrieben hatte, speicherte er es unter dem Namen „hallo.html“ ab.
4. Mit einem Browser wie Internet Explorer, Safari oder Firefox kann er die Datei dann öffnen. Was dann passiert siehst Du hier: Klick

Der Junge mit dem blauen Pulli schaute sich das kurze Programm etwas genauer an. Igor erklärte ihm, was es mit diesen drei Zeilen auf sich hatte.

– Du hast hierrr ein HTML-Dokument, in dem eine Zeile der Programmierrrsprrrache JavaScript eingebaut ist.
– Wo ist das Mädchen mit dem grünen Pulli?
– Das ist natürrrlich kein vollständiges HTML-Dokument, aber fürrr uns’rrre Zwecke sollte es errrstmal reichen!
– Vielleicht hat sie Lust, mit mir Verstecken zu spielen.
– Mit dem Befehl alert() wird ein Werrrt, in diesem Fall "Der Junge mit dem blauen Pulli ist supercool!" mit einerrr Meldung auf dem Bildschirrrm ausgegeben.

Du hast vielleicht schon gemerkt, der Löwe ist kein besonders guter Zuhörer. Er könnte statt einer Brille wohl besser ein Hörgerät gebrauchen. Vor allem ist er aber ein richtiger Hacker. Wenn er gerade am programmieren ist, hört er sowieso nicht zu, was man ihm sagt. So hört er auch gar nicht, wie das Mädchen mit dem grünen Pulli sich neben ihn setzt.

– Hey, ich bin doch viel cooler als der Junge mit dem blauen Pulli. Das weiß doch jeder!
– Sollen wirrr das Prrrogrrramm änderrrn?
– Mach, dass es sagt: „Das Mädchen mit dem grünen Pulli ist viel cooler!“
– Aberrr klarrr doch. Du kannst einfach mehrrrerre Befehle unterrreinanderrr schrrreiben, die dann einerrr nach dem anderrren ablaufen.

<script language="javascript">
alert("Der Junge mit dem blauen Pulli ist supercool!");
alert("Das Mädchen mit dem grünen Pulli ist viel cooler!");
</script>

Der Junge mit dem blauen Pulli bekommt das Alles nicht mit. Er hat sich weit weg versteckt…