Sie sind hier � 29
Die erste richtige JavaScript-Applikation
Jetzt wollen wir Ihre neuen JavaScript-Kenntnisse und console.
log
endlich praktisch anwenden. Wir brauchen ein paar
Variablen, eine while-Schleife und eine if/else-Anweisung. Dazu
noch ein bisschen Kosmetik, und schon haben wir eine seriöse
Businessapplikation. Bevor Sie sich aber auf den Code stürzen,
sollten Sie kurz überlegen, wie Sie den Klassiker »99 Flaschen
Bier« (99 bottles of beer) programmieren würden.
var word = "Flaschen";
var count = 99;
while (count > 0) {
console.log(count + " " + word + " Bier im Regal,");
console.log(count + " " + word + " Bier.");
console.log("Nimm’ eine runter, reich’ sie herum");
count = count - 1;
if (count > 0) {
console.log(count + " " + word + " Bier im Regal.");
} else {
console.log("Keine " + word + " Bier im Regal.");
}
}
Unser Code enthält einen kleinen Fehler. Das Pro-
gramm läuft korrekt, aber die Ausgabe ist nicht zu
100 % perfekt. Versuchen Sie, das Problem zu finden
und zu lösen.
Kopf-
nuss
Ein Sprung ins kalte JavaScript-Wasser
30 Kapitel 1
Das script-Tag
Sollten wir diesen Code nicht in einer
richtigen Webseite testen, damit wir die
Ausgaben auch sehen? Oder schreiben wir
die Antworten immer nur von Hand auf?
Gutes Argument! Stimmt. Eigentlich
ist es an der Zeit. Wir wollten vorher nur
sichergehen, dass Ihre JavaScript-Kenntnisse
ausreichen, um das Ganze interessant genug
zu machen. Also: Am Anfang dieses Kapitels
haben Sie bereits gesehen, dass Sie JavaScript
genau wie CSS in Ihr HTML-Dokument
einbetten können. Sie müssen den Code nur
mit den nötigen <script>-Tags umgeben.
Wie CSS können Sie auch Ihren JavaScript-
Code in eine externe Datei auslagern. Vorher
wollen wir diese seriöse Businessanwendung
aber sorgfältig testen.
Sie sind hier � 31
Probefahrt
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein erstes JavaScript</title>
</head>
<body>
<script>
</script>
</body>
</html>
Geben Sie das
hier ein.
Hier sind die Ausgaben Ihres Codes. Er erzeugt
den kompletten Songtext für »99 Flaschen
Bier« und gibt ihn auf der Browserkonsole aus.
Hier sind die <script>-Tags. Damit wissen Sie
auch, wo Ihr Code hinkommt.
Den Code und die Beispieldateien für dieses Buch finden
Sie unter http://examples.oreilly.de/german_examples/
hfjavascriptprogger/Beispielcode.zip.
Okay, dann wollen wir den Code mal in den Browser laden … Folgen Sie den unten
stehenden Anweisungen und starten Sie Ihre Businessapplikation! Das Ergebnis sehen
Sie unten:
1
2
Werfen Sie einen Blick auf den unten stehenden HTML-Code: Hier kommt Ihr
JavaScript hin. Tippen Sie den HTML-Code ab und packen Sie das JavaScript-
Programm von den vorigen zwei Seiten zwischen die <script>-Tags. Hierfür reicht ein
Editor wie NotePad (Windows) oder TextEdit (Mac). Speichern Sie die Seite auf jeden
Fall als »reinen Text«. Wenn Sie lieber mit einem HTML-Editor wie Dreamweaver,
Coda oder WebStorm arbeiten, können Sie natürlich auch diese benutzen.
Speichern Sie die Datei als »index.html«.
3
Laden Sie die Datei in Ihren Browser. Hierfür können Sie die
Datei entweder direkt in das Browserfenster ziehen, oder Sie
benutzen die Menüoption Datei > Öffnen (bzw. Datei > Datei
öffnen) im Browser Ihrer Wahl.
Sie sind hier 4
29
Die erste richtige JavaScript-Applikation
Jetzt wollen wir Ihre neuen JavaScript-Kenntnisse und
console.
log
endlich praktisch anwenden. Wir brauchen ein paar
Variablen, eine while-Schleife und eine if/else-Anweisung. Dazu
noch ein bisschen Kosmetik, und schon haben wir eine seriöse
Businessapplikation. Bevor Sie sich aber auf den Code stürzen,
sollten Sie kurz überlegen, wie Sie den Klassiker »99 Flaschen
Bier« (99 bottles of beer) programmieren würden.
var word = "Flaschen";
var count = 99;
while (count > 0) {
console.log(count + " " + word + " Bier im Regal,");
console.log(count + " " + word + " Bier.");
console.log("Nimm’ eine runter, reich’ sie herum");
count = count - 1;
if (count > 0) {
console.log(count + " " + word + " Bier im Regal.");
} else {
console.log("Keine " + word + " Bier im Regal.");
}
}
Unser Code enthält einen kleinen Fehler. Das Pro-
gramm läuft korrekt, aber die Ausgabe ist nicht zu
100 % perfekt. Versuchen Sie, das Problem zu finden
und zu lösen.
Kopf-
nuss
Ein Sprung ins kalte JavaScript-Wasser
4
Auf der Webseite selbst wird nichts angezeigt, da wir alle
Ausgaben per console.log auf der Konsole protokollieren. Sie
müssen also die Konsole Ihres Browsers öffnen. Danach dürfen
Sie sich für diese seriöse Businessapplikation selbst auf die
Schulter klopfen.
Ein Sprung ins kalte JavaScript-Wasser
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
