1 HTML

31

Die Befehle: Tags

32

Der Schlüssel zum Erfolg

33

(K)ein feierlicher Rahmen

34

Bitte nicht beachten!

36

Bevor es losgeht – eine Übersicht

38

Deine erste Webseite

39

Wie gehst du vor, um deine erste Seite zu erstellen?

40

Was kann HTML – und was kann es nicht?

42

Tags tieferlegen und verchromen: Attribute

43

Heiße Schmuggelware CSS

44

Und nicht vergessen: ändern, speichern, neu laden

45

2 Hallo Welt

47

So kommen Programme in die Webseite

48

Ein kleines Meldungsfenster – der Einstieg

50

Und so kommt das JavaScript in die Webseite

51

Von Leerzeichen und Leerzeilen

52

Nur noch speichern und im Browser öffnen …

53

Da geht noch was – ändern, speichern, neu laden

54

Das Handy fällt nicht weit vom Stamm. Der gute alte Galileo und warum auch Formeln Spaß machen

55

Wie schreibe ich »?« in JavaScript?

56

Wohin mit dem Ergebnis?

57

Das alte Problem der Vergesslichkeit

60

Allheilmittel gegen Vergesslichkeit – die Variablen

61

Wie gut, dass es Variable gibt

61

So speicherst du einen Wert in einer Variablen

62

Ein paar Regeln für Variable

64

Falsch. FALSCH! FAAALSCH!!!

65

Richtige Variable

65

Von Handyweitwurf zum ersten Spiel

67

Mit der Formel kommt der Spaß

67

Jetzt schreiben wir das in JavaScript

68

Da stimmt etwas nicht: Wie aus Grad das Bogenmaß wird, und warum

68

Des Pudels Kern – die eigentliche Berechnung

70

Lasst die Spiele beginnen

72

Eine Idee? Eine Idee – ein Szenario!

72

Zufall kann auch schön sein

72

Drei Versuche sollt ihr sein!

72

Die erste Schleife geht auch ohne Schnürsenkel

73

Ein detaillierter Blick in unsere Schleife

74

Waren da hinten nicht gerade noch der Bernd und die Alfi? Dort, wo jetzt das Monster steht?

76

Wenn schon, denn schon – Vergleiche mit »if«

77

Was du sonst noch machen kannst

78

Falls es mal nicht klappt

79

3 Zufall, Spaß und Logik

81

Zahlenraten

82

Die erste Überlegung – ganz einfach ausgedrückt

82

Ein neuer Versuch – ein klein wenig genauer

82

Was haben wir hier gemacht? Ein Programm geschrieben!

82

Die Anleitung haben wir – bauen wir unser Programm

83

Von der Beschreibung zum Programm

84

Was macht der Programmcode denn da?

85

Jetzt soll uns der Computer nach einer Zahl fragen

86

Zu groß, zu klein – wie wäre es mit einem kleinen Tipp?

86

Ja, wurde denn richtig geraten?

88

»Hey, mach’s noch mal« – Schleifen mit »do-while«

88

Die »do-while«-Schleife

89

Über Bedingungen: Größer, kleiner – und über das ominöse !=

90

Das fertige Programm

90

Übrigens, es gibt auch immer einen ganz anderen Weg

92

Schere, Stein, Papier

94

Computer schummeln nicht

95

Die Variablen festlegen

95

Was können wir daraus in JavaScript machen?

96

Jetzt in aller Ruhe

98

»else« – keine schöne Maid, eher ein »ansonsten« für alle (anderen) Fälle

101

Das »if« und das »else«

101

Sag mal, stimmt die Formel so? Formeln, Bauchgefühle, Tests

103

4 CodeBreaker

107

Die geheime Zahl

108

Von der Beschreibung zum Programm

109

Zahlen spalten einfach gemacht

111

Einfache Lösung mit Hausmitteln

111

Wie erfolgreich war das Raten?

113

Nur der Teufel steckt so tief im Detail – und Programmierer: »else if«

114

»else if« – ein starkes »ansonsten« mit einer weiteren Bedingung

114

Was jetzt noch fehlt – die anderen Zahlen, eine Ausgabe und ’ne tolle Schleife

116

Dann wollen wir mal den Rest machen

118

Tunen, tieferlegen, lackieren und Locken eindrehen

120

Zähl die gespielten Runden, und begrenze das Spiel auf eine festgelegte Anzahl von Runden

121

Wenn’s dann doch mal reicht – das Spiel selbst beenden

123

Nicht vergessen – wie war denn jetzt der Code?

124

Ein paar Zeilen als Einleitung

124

JavaScript über Klicks auf HTML-Elemente aufrufen

125

Funktionen – besonders dick und saugfähig

127

Und jetzt alles

130

5 Bubbles, Blasen und Arrays

135

Erst einmal alles fürs Sortieren

136

Arrays – die Vereinsmeier unter den Variablen

136

Werte lesen, schreiben und auch wieder vergessen

138

Einen Wert ändern

138

The sort must go on ... oder so ähnlich

140

Bubblesort – der nicht so ganz heilige Gral der abstrakten Rechenvorgänge

140

Bubblesort ohne Computer

141

Bubblesort mit Computer

142

Ready to rumble

143

Jetzt gibt’s was in die Schleife

144

Die Sache mit »true« und »false«

145

Ein Durchgang macht noch keine fertige Liste

146

Eine Ausgabe muss her!

147

Alle Teile des Puzzles – unsortiert

147

Das fertige Puzzle

148

Feinschliff

149

Als Erstes: Wir machen eine Funktion aus unserem Bubblesort

149

Zwei Listen sollt ihr sein

150

Mehr als nur Feinheiten – du und deine Funktion

151

Schön und auch noch zeitgesteuert

154

Das Ende der weißen Seiten ist nahe

154

Wie sieht das für die Ausgabe von unserem Bubblesort aus?

155

HTML – das vernachlässigte Stiefkind der Aktualisierung

156

Erst einmal das Handwerkszeug – zeitgesteuerte Aufrufe

157

Richtiges temporales Zaubern für Anfänger

158

Etwas schicke Kosmetik

162

Die volle Funktion für Bubblesort

163

6 Quiz

167

Tieferlegen und verchromen – alles mit CSS

173

Dreimal darfst du raten

176

Passend zum Quiz: Rate die Variablen

177

Auch ganz passend: Rate die Funktionen

179

Fragen, Antworten und die richtige Lösung. Wohin damit?

181

Vom richtigen Mischen und von anonymen Funktionen

183

Nur leicht geschüttelt – nicht gerührt

185

Die Sache mit der Henne, dem Ei und dem besten Anfang

186

Also gut, zuerst die Funktion »tippeButton«

187

Schönheit löst keine Probleme – ist aber ganz schön!

189

Einmal Rot bitte – falsche Antwort

190

Das Quiz starten

191

Nicht vergessen – die gedrückten Buttons

193

7 Rechenkönig

199

Die Benutzeroberfläche

200

Zuerst die Funktionen und die Variablen

204

Was ist zu tun in der Funktion »stelleAufgabe«?

209

Zwei Zahlen sollt ihr sein …

210

Und zwar »switch«-»case«

211

»switch«-»case« für unser Programm

213

Keine negativen Ergebnisse

214

Der Spieler ist am Zug

216

Der Name wird Programm: »pruefeEingabe«

216

Stimmt das Ergebnis?

216

Das Programm als Ganzes

218

Nicht für die Ewigkeit – aber länger als nur für eine Sitzung

220

Auch das Laden will gelernt sein

223

Holen wir unsere Zahlen – als echte Zahlen

225

Und sogar das Löschen will gelernt sein

226

Was fehlt noch? Ist noch etwas zu tun?

229

8 Textadventure

231

Wie setzen wir das um?

233

JSON – ein kuscheliges Zuhause für Daten und Geschichten

236

Eine Passage macht noch keine Geschichte

237

Nicht nur Türen brauchen einen Schlüssel

238

Zeit für etwas HTML und CSS

240

Von JSON zu JavaScript

244

Die objektorientierte Notation

244

Zuerst die grundlegende Funktionalität – der Prototyp

248

Nach dem Prototyp

252

Aus den Nummern die wirklichen Texte holen

254

Was muss die neue Funktion tun?

255

Teile und herrsche – mehr als nur eine Datei

260

Die Datei »monitor.css«

261

Die Datei »abenteuerJson.js«

262

Die Datei »abenteuer.js«

263

Zu guter Letzt – unser HTML in der »abenteuer.html«

264

9 Hammurabi

267

Wie funktioniert das Spiel?

268

Ein wenig HTML

269

Und noch eine Portion CSS

270

Die Regeln – im Detail

273

Lass die Spiele beginnen

278

Ein Bericht für den Herrscher – die Ausgabe

279

Der grundlegende Text wird gebastelt

280

Unsere Zufallszahlen

284

Eine Spielrunde – ein ganzes Jahr

287

Die Eingabe – dem Volk Befehle erteilen

289

Mahlzeit und Prost – wir verteilen Nahrungsmittel

292

Die Aussaat

293

Zu guter Letzt noch etwas Handel

294

Das Ende ist näher, als du denkst

296

Das ganze Programm in einem Rutsch

297

10 Charts und Bibliotheken

303

Chartis.js

305

Woher nehmen und nicht stehlen?

306

Wie funktioniert es?

306

Gestatten? Daten, Daten im JSON-Format

310

Frei wählbar, die Optionen

311

Der eigentliche Star und Hauptdarsteller: Das Objekt

312

Zeit für eigene Daten

313

Mit »undefined« ist schlecht zählen

316

Noch schnell die Labels – die Beschriftung der X-Achse

317

Zeit für Änderungen

320

Eine zweite Zufallszahl soll es sein

322

11 Mondlandung

329

Was brauchen wir auf unserer Webseite?

330

Schöner abstürzen …

332

Ein paar Funktionen wären auch ganz hilfreich

332

Auch das schönste Programm ist nichts ohne eine Ausgabe

336

Etwas Kontrolle muss sein

339

Schöner fallen mit Canvas und JavaScript

342

Mehr Farbe im Leben und auf der Planetenoberfläche

342

Canvas im JavaScript

344

12 Im Tal der fallenden Steine

351

Die HTML-Datei

352

Der Code

353

Kein Programm ist so schwer wie das, das du nicht selbst geschrieben hast

363