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.

Vierarmige Aliens, ein Löwe mit Brille und JavaScript #2 – Mathehausaufgaben

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…

PB83

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.

Vierarmige Aliens, ein Löwe mit Brille und JavaScript #1

Banner

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

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…

Hello World in Javascript

Du! Leser dieses Artikels. Gib doch einfach mal javascript:alert("Hello World"); in die Adresszeile deines Browsers ein.

Glückwunsch, Du hast soeben ein Javascript-Programm geschrieben und ausgeführt.

Man kann sogar halbwegs nützliche Dinge damit anfangen. Wenn gerade kein Taschenrechner zur Hand ist:

javascript:alert(19152/456);

Oder sogar solche Sachen:

javascript: var kg = 78; var m = 1.77; function sq(x) {return x*x;} alert("BMI: "+(kg / sq(m)));

Jetzt kommt man schnell an die Grenzen von dem, was man in den Browser eintippen möchte, aber interessant finde ich es trotzdem. Ich glaube sowieso, dass Javascript hervorragend als allererste Programmiersprache für Anfänger geeignet ist, weil

  • Man überhaupt keine „Installation“ braucht, um loslegen zu können. Jeder hat täglich mit einem Browser und fast jeder mit Notepad oder Ähnlichem zu tun.
  • Die geschriebenen Programme lassen sich trivial leicht weitergeben und von anderen ausprobieren
  • Mit relativ wenig Aufwand kann man schon richtig coole Sachen machen, um etwa eine statische Webseite aufzupeppen, wenn Frameworks wie JQuery oder Dojo benutzt werden.
  • Im Gegensatz zu z.B. Pascal kann man Javascript-Kenntnisse in der realen Welt wirklich brauchen. Es ist wahrscheinlich, dass diese Sprache in den nächsten Jahren noch an Bedeutung gewinnen wird.
  • Die Sprache unterstützt verschiedene Programmierparadigmen: Man kann streng prozedural, objektorientiert oder auch funktional programmieren.

Ich plane eine Artikelserie, um Programmierung mit Javascript für absolute Programmier-Anfänger zugänglich zu machen. Ich bin der Meinung, dass ein Mensch heutzutage einfach wissen sollte, was ein Algorithmus, eine Variable und eine Funktion ist, auch wenn er niemals sein Geld mit Programmieren verdienen wird.

Podcasts

Seit über zwei Jahren bin ich jetzt schon ein intensiver Konsument von Podcasts. Ehrlich gesagt, es wundert mich, dass sie sich als Medium im Mainstream scheinbar immer noch nicht durchgesetzt haben. Das könnte daran liegen, dass es gar nicht so leicht ist, in der Masse der Angebote die für einen interessanten Sendungen zu finden. Die Geschmäcker sind verschieden, und vielleicht gibt es keine zwei Menschen, die genau die gleichen Podcasts abonniert haben. Ich kann also eigentlich nur von mir sprechen, und das tue ich jetzt auch:

Bei mir persönlich fallen im Durchschnitt knapp zwei Stunden potentielle Podcasts-Hörzeit täglich an (Auf dem Weg zur Arbeit, beim Joggen, bei Radfahrten, bei Hausarbeit). Einen Teil dieser Zeit fülle ich auch gerne mit Musik oder gelegentlichen Hörbüchern1, Stille geht hingegen gar nicht;-). Ich kann also nicht alles hören, was mich entfernt interessieren könnte, sondern muss Prioritäten setzen. Dabei interessiere ich mich grundsätzlich nur für Audio-Podcasts, da ich auch so schon genug auf Bildschirme starre, und auf Video deswegen verzichten kann. Meine Lieblings-Podcasts sind:

    twit300

  • TWIT(Englisch): Leo Laporte und Friends lassen sich über Aktuelles aus der Tech-Welt aus. Klasse finde ich, wie der optimistische Leo und der Berufs-Skeptiker John C. Dvorak „Good Cop/Bad Cop“ gegenüber neuen Produkten und Technologien spielen.
  • FLOSS Weekly (Englisch): Randal Schwartz, Jono Bacon und Leo Laporte interviewen einmal wöchtentlich Open-Source-Entwickler, Projektleiter oder Schriftsteller. Hier geht es in erster Linie nicht um Zahnpflege, sondern um „Free Libre Open Source Software“
  • The Basketball Jones (Englisch): Zwei junge Kanadier, die fünf Mal täglich über das aktuelle Geschehen in der NBA quatschen.
  • Stackoverflow (Englisch): Der Podcast zur gleichnamigen Seite. Joel Spolsky und Jeff Atwood sind beide als Blogger mehr oder weniger von der Bildfläche verschwunden, doch ihre Diskussionen über Stackoverflow und Software-Entwicklung im Allgemeinen sind interessant und doch niemals so technisch, dass das Zuhören übermäßig anstrengend würde.
  • You look nice today (Englisch): Ich geb’s zu: Die Hälfte von den Anspielungen und Witzen von lonelysandwich, scottsimpson, und hotdogsladies verstehe ich nicht. Über die andere Hälfte kann ich immer noch genug schmunzeln, damit es sich für mich lohnt. In letzter Zeit erscheinen nur noch sporadisch neue Episoden.
  • Chaosradio Express (Deutsch): Mit „Express“ haben die oft über zweieinhalb Stunden langen Beiträge in diesem Podcast nicht viel zu tun, dafür ist der Moderator Tim Pritlove einfach zu neugierig und löchert seine sehr kompetenten Gäste mit kniffligen Fragen. Die Bandbreite der Themen geht von diversen Programmiersprachen über politische Themen und Netzkultur bis zu Piraten. Alles was der echte Nerd also braucht;-) Hier wähle ich mir nur die Episoden aus zu Themen, die mich interessieren, lerne dann aber dabei eine Menge.

Wie gesagt, genau diese Kombination wird wohl für keinen zweiten Menschen das Optimum darstellen. Sich mal mit Podcasts zu beschäftigen kann ich allerdings ganz allgemein weiterempfehlen.

1 Ich bin seit neuestem Audible.de-Kunde. Ein Fazit gibt es aber erst in ein paar Monaten dazu