Über den Autor 19
Einleitung 21
Teil I Erster Monat 25
Kapitel 1: Erste Woche: Erste Schritte27
Kapitel 2: Zweite Woche: Vorbereitungen zum eigenen Programmieren45
Kapitel 3: Dritte Woche: HTML 61
Kapitel 4: Vierte Woche: CSS75
Teil II Zweiter Monat95
Kapitel 5: Fünfte Woche: Raumschiffe bewegen 97
Kapitel 6: Sechste Woche: Sterne Erzeugen 111
Kapitel 7: Siebte Woche: Sterne bewegen123
Kapitel 8: Achte Woche: Punkte zählen 135
Teil III Dritter Monat147
Kapitel 9: Neunte Woche: Auf die Plätze Zeit messen 149
Kapitel 10: Zehnte Woche: Der Laserstrahl163
Kapitel 11: Elfte Woche: Wer hat die meisten Punkte?175
Kapitel 12: Zwölfte Woche: Der let zte Schliff 187
Teil IV Top-Ten-Listen 201
Kapitel 13: Zehn Ideen, wie Sie das Spiel interessanter machen können203
Kapitel 14: Zehn häufige genut zte Programmiersprachen 207
Kapitel 15: Zehn Ressourcen, die Ihnen beim Programmieren helfen können217
Kapitel 16: Zehn Begriffe rund ums Programmieren 221
Anhang A: Direkt im Browser programmieren mit
Codespaces 239
Anhang B: Die Lösungen zu den Übungen 241
Stichwortverzeichnis 261
Inhaltsverzeichnis
Über den Autor 19
Einleitung 21
Über dieses Buch 21
Törichte Annahmen über die Leserinnen und Leser 21
Was Sie nicht lesen müssen22
Wie dieses Buch aufgebaut ist 22
Teil I: Erster Monat22
Teil II: Zweiter Monat 22
Teil III: Dritter Monat 22
Teil IV: Top-Ten-Listen 23
Symbole, die in diesem Buch verwendet werden23
Umgang mit den Übungsdateien23
Wie es weitergeht 24
TEIL I
Erster Monat 25
Kapitel 1
Erste Woche: Erste Schritte27
Tag 1: Worauf Sie sich freuen können: Ihr eigenes Spiel programmieren28
Was ist Programmieren? 29
Pseudocode 29
JavaScript 31
Tag 2: Erste JavaScript-Befehle direkt im Browser32
Hallo Welt! 33
So ist ein Befehl aufgebaut 34
Tag 3: Mehr JavaScript-Befehle im Browser 36
Berechnungen durchführen37
Code verbessern37
Tag 4: Fremde Webseiten anpassen und verändern 39
HTML: Quelltext einer Webseite39
Eine Webseite verändern 39
Tag 5: Welche Programmiersprachen gibt es?41
Tag 6: Quiz - testen Sie Ihr Wissen 43
Kapitel 2
Zweite Woche: Vorbereitungen zum eigenen
Programmieren 45
Tag 7: Vom Ausprobieren zum echten Programmieren46
Ein einfacher Texteditor 46
Spezielle Programme 47
10 Inhaltsverzeichnis
Tag 8: Was ist eine IDE? - Ihr Werkzeugkasten beim Programmieren48
Installation von Visual Studio Code 48
Erste Schritte mit Visual Studio Code49
Einfügen eines Bildes 50
Tag 9: VS Code einrichten - Mit Extensions zum Profi-Tool 51
Auto Save 51
Extension: Live Server 51
Das Aussehen von VS Code ändern 53
Tag 10: GitHub: Die Beispieldateien zum Buch herunterladen 54
Übungsdateien herunterladen 54
Das Spiel starten55
Tag 11: Projekt-Organisation - Ordner und Dateien strukturieren 56
Warum ist Struktur wichtig?56
Typische Ordnerstruktur 56
Pfade richtig angeben 57
Übung: Eigene Struktur anlegen 57
Best Practices für Dateinamen 58
Tag 12: Quiz - testen Sie Ihr Wissen der zweiten Woche 59
Kapitel 3
Dritte Woche: HTML61
Tag 13: HTML verstehen - Das Grundgerüst jeder Webseite 62
HTML-Grundgerüst62
HTML-Tags: Namen und Attribute 62
Öffnende und schließende Tags63
Beispiele63
Gute Praxis 64
Tag 14: Das Grundgerüst jeder Webseite: HTML 65
Tag 15: Weitere HTML-Elemente - Links, Bilder und Listen 67
Links erstellen67
Bilder einfügen 67
Ungeordnete und geordnete Listen 68
Semantische Bedeutung vs Optik 68
Kombination: Bild als Link69
Kleine Anwendung69
Typische Fehlerquellen69
Tag 16: Aktionen auslösen mit Buttons 70
HTML-Attribute 70
Änderungsvorschläge 71
Tag 17: Ihr erstes Mini-Projekt mit HTML 72
Tag 18: Quiz - wie gut kennen Sie HTML? 73
Kapitel 4
Vierte Woche: CSS75
Tag 19: Was ist CSS - und wofür braucht man es? 76
Ein erstes Beispiel 76
Aufbau einer CSS-Regel 76
Selektoren 76
Inhaltsverzeichnis 11
CSS im style-Tag 77
CSS in externer Datei 77
Inline-Style im HTML-Tag 78
Tag 20: Elemente gezielt gestalten - CSS-Selektoren verstehen79
Selektor-Typen (Grundlagen) 79
Element-Selektor79
Klassen-Selektor 80
ID-Selektor 80
Typische Fehler 80
Häufige Style-Eigenschaften80
Das passende CSS für unser Spiel 81
Übung81
Zum Nachdenken 81
Tag 21: Elemente positionieren und skalieren82
Größe von Elementen 82
Positionierungs-Modi 82
Relative Positionierung 82
Absolute Positionierung 83
Offsets verstehen 83
Für unser Spiel 84
Typische Fehler 84
Übung84
Zum Nachdenken 84
Tag 22: Farben in CSS - Webseiten lebendiger gestalten 85
Farben in CSS85
Farben mit Namen85
Was können Sie alles einfärben? 85
Farben mit Farbcodes angeben86
Hexadezimalwerte86
Für unser Spiel 87
Tag 23: Selektoren für Fortgeschrittene 88
Kombinationen von Selektoren88
Nachfahrenselektoren88
Attributselektoren 89
Pseudoklassen 89
Die CSS-Datei stylescss 89
Exkurs: Hover90
Tag 24: Quiz - wie fit sind Sie in CSS?91
TEIL II
Zweiter Monat 95
Kapitel 5
Fünfte Woche: Raumschiffe bewegen 97
Tag 25: Raumschiffsteuerung per Tastatur98
Was müssen Sie ändern, damit sich das Raumschiff schneller bewegt?99
Was müssen Sie ändern, damit sich das Raumschiff nach links bewegt?99
Warum springt das Raumschiff beim ersten Tastendruck nach links? 99
12 Inhaltsverzeichnis
Tag 26: Die Position des Raumschiffs im Code abrufen100
Tag 27: Links und rechts im Code unterscheiden102
Tag 28: Den Code in eine Funktion auslagern 104
Tag 29: Wie Sie das Raumschiff im Rahmen halten106
Tag 30: Quiz - Raumschiffsteuerung und Funktionen 108
Kapitel 6
Sechste Woche: Sterne Erzeugen 111
Tag 31: Der erste Stern112
Tag 32: Zufällige Positionen - Sterne dynamisch platzieren114
Tag 33: Mehrere Sterne gleichzeitig erzeugen115
Tag 34: Zahlen auf- und abrunden 117
Tag 35: Entscheidungen im Code per If-Anweisung119
If-Bedingungen 119
Verknüpfung von Bedingungen120
Tag 36: Quiz: Sterne und Logik im Spiel 121
Kapitel 7
Siebte Woche: Sterne bewegen 123
Tag 37: Sterne fallen lassen 124
Tag 38: Sterne animieren 126
Tag 39: Auferstehung der Sterne128
Tag 40: Die Geschwindigkeit der Sterne steuern 130
Tag 41: Sterne beschleunigen 133
Tag 42: Quiz - Bewegung und Animation 134
Kapitel 8
Achte Woche: Punkte zählen 135
Tag 43: Kollisionen erkennen - wo Stern auf Raumschiff trifft 136
Tag 44: Kollisionserkennung verbessern138
Tag 45: Game Over 140
Tag 46: Das bessere Ende des Spieles 141
Tag 47: Variablen, Konstanten und wo sie gelten142
Variablen und Konstanten 142
Gültigkeitsbereiche142
Tag 48: Quiz - Spielmechanik und Variablen 144
TEIL III
Dritter Monat 147
Kapitel 9
Neunte Woche: Auf die Plätze Zeit messen 149
Tag 49: Zeit messen mit JavaScript 150
Tag 50: Die Spielzeit beim Spielen anzeigen 152
Tag 51: Das Spiel neu starten 153
Tag 52: Pause! Das Spiel anhalten und fortsetzen 155
Tag 53: Von Zahlen und Texten - Variablentypen verstehen157
Boolesche Werte157
Zahlen157
Inhaltsverzeichnis 13
Zeichenketten158
Arrays158
Zahlen und Zeichenketten 159
Tag 54: Quiz: Zeit, Pause und boolesche Werte 161
Kapitel 10
Zehnte Woche: Der Laserstrahl 163
Tag 55: Sterne abschießen 164
Taste zum Schießen 164
Laserstrahl zeichnen 165
Den Laserstrahl zeichnen165
Tag 56: Den Laserstrahl in Position bringen 167
Tag 57: Der Laserblitz 169
Tag 58: Wie der Laserstrahl Sterne zerstört 170
Treffer erkennen170
Tag 59: Sterne zählen und Punktestand anzeigen 172
Tag 60: Quiz - Highscore und Laserlogik174
Kapitel 11
Elfte Woche: Wer hat die meisten Punkte? 175
Tag 61: Highscores erfassen176
Tag 62: Die Liste sortieren - wer liegt vorne? 177
Tag 63: Spielergebnisse sortieren mit JavaScript 179
Tag 64: Die Bestenliste speichern und anzeigen 181
Tag 65: Bestenliste zurücksetzen183
Tag 66: Quiz - Highscore und Datenverwaltung 185
Kapitel 12
Zwölfte Woche: Der let zte Schliff187
Tag 67: Ordnung schaffen - strukturierter Code 188
Dateien anlegen 188
Tag 68: So benennen Sie Ihre Variablen richtig 191
Variablen mit einem Standardwert initialisieren 192
Schreibweise von Variablennamen192
Tag 69: Das Raumschiff aufhübschen193
Tag 70: Feinschliff fürs Spiel195
Tag 71: So hilft Künstliche Intelligenz beim Programmieren196
Tag 72: Sag zum Abschied leise Quiz - Abschied und Ausblick 198
TEIL IV
Top-Ten-Listen 201
Kapitel 13
Zehn Ideen, wie Sie das Spiel interessanter machen
können203
Schnellere Sterne 203
Unterschiedliche Sterngrößen 203
Verschiedene Sternarten 204
Hindernisse204
14 Inhaltsverzeichnis
Power-Ups für breiteren Laser 204
Verbesserter Highscore 205
Soundeffekte205
Hindernisse, die Sterne zerstören 205
Zeitlimit 206
Levels durchlaufen 206
Kapitel 14
Zehn häufige genut zte Programmiersprachen 207
Python 207
JavaScript 208
Java 209
C++210
C# 210
PHP 211
Go 212
Kotlin 213
Swift213
Ruby214
Kapitel 15
Zehn Ressourcen, die Ihnen beim Programmieren helfen
können217
Stack Overflow 218
GitHub 218
LinkedIn Learning 218
MDN Web Docs 218
CodeWars 219
freeCodeCamp 219
Codecademy 219
W3Schools 219
LeetCode220
Coursera220
ChatGPT, Claudeai und andere KI-Tools220
Kapitel 16
Zehn Begriffe rund ums Programmieren 221
Objektorientierte Programmierung (OOP)221
Grundprinzipien der OOP222
Vorteile der OOP222
Beispiel 222
Algorithmus223
Eigenschaften eines Algorithmus 223
Beispiel 224
Berühmte Algorithmen224
API - Application Programming Interface 224
Arten von APIs225
Inhaltsverzeichnis 15
Vorteile von APIs225
Beispiel 225
Bekannte APIs226
Framework 226
Arten von Frameworks226
Vorteile von Frameworks 226
Beispiel 227
Bekannte Frameworks227
Versionierung228
Arten von Versionierungssystemen 228
Vorteile der Versionierung 228
Bekannte Versionierungssysteme 229
Debugging 229
Schritte im Debugging-Prozess 229
Debugging-Tools230
Best Practices im Debugging 230
Beispiel 230
Compiler231
Funktionsweise eines Compilers 231
Beispiel 232
Bekannte Compiler232
Alternative: Interpretersprachen 232
Refactoring233
Warum Refactoring wichtig ist 233
Häufige Refactoring-Techniken 233
Beispiel 233
Werkzeuge für Refactoring 234
Tests234
Unit-Tests 235
Integrationstests235
Systemtests 235
Akzeptanztests 235
Automatisierte Tests 235
Test-driven Development (TDD)235
Fazit 236
Build-Tools und CI/CD-Pipelines 236
Continuous Integration und Continuous Deployment (CI/CD) 236
Vorteile von Build-Tools und CI/CD236
Beispiel einer CI/CD-Pipeline 237
Beliebte CI/CD-Tools 237
Anhang A
Direkt im Browser programmieren mit Codespaces239
GitHub-Konto erstellen239
Codespace erstellen und nutzen 239
Wann Codespaces?240
Wann lokal entwickeln? 240
16 Inhaltsverzeichnis
Anhang B
Die Lösungen zu den Übungen 241
Die Lösungen zum Quiz von Tag 6 241
Frage 1: Anführungszeichen241
Frage 2: Auszeichnungssprache241
Frage 3: Lokale Kopie 241
Frage 4: consolelog(x) 241
Frage 5: prompt()242
Die Lösungen zum Quiz von Tag 12 243
Frage 1: Keine Formatierungen243
Frage 2: Vorteile einer IDE243
Frage 3: Eine Plattform (und was für eine) 243
Frage 4: Extensions243
Frage 5: Ordnung halten 243
Die Lösungen zum Quiz von Tag 18 244
Frage 1: Auszeichnungssprache244
Frage 2: Name und spitze Klammern244
Frage 3: ID 244
Frage 4: Attribute in Anführungszeichen244
Frage 5: Nicht auf der Webseite, gegebenenfalls im Titel 245
Die Lösungen zum Quiz von Tag 24 246
Frage 1: Selektor mit #246
Frage 2: 'wie oft' geht nicht246
Frage 3: Punkt vs Raute 246
Frage 4: color246
Frage 5: padding geht nicht246
Frage 6: px und %246
Frage 7: Sterne im Game 247
Frage 8: #game star 247
Frage 9: none und block 247
Frage 10: Relativ zur normalen Position 247
Die Lösungen zum Quiz von Tag 30 248
Frage 1: Wiederverwendbarer Codeblock mit Aufgaben 248
Frage 2: Stopp mit Rückgabewert 248
Frage 3: Veränderte Spielfeldbreite 248
Frage 4: Mit 'px' ist nicht zu rechnen 248
Frage 5: Für jedes Zeichen eine Zahl249
Die Lösungen zum Quiz von Tag 36 250
Frage 1: Antwort 1, 2 und 3 250
Frage 2: Ganzzahlige Pixelpositionen250
Frage 3: Zeile 4 250
Frage 4: Mathrandom() * 50 + 50 250
Frage 5: if und while 250
Die Lösungen zum Quiz von Tag 42 251
Frage 1: getElementsByClassName(className")251
Frage 2: styletop251
Frage 3: setInterval(function, interval)251
Inhaltsverzeichnis 17
Frage 4: remove 251
Frage 5: clientHeight252
Die Lösungen zum Quiz von Tag 48 253
Frage 1: Horizontale Bewegung253
Frage 2: clearInterval() 253
Frage 3: Fehler 253
Frage 4: Global im Code, lokal in der Funktion 253
Frage 5: Sicher und verständlich 253
Die Lösungen zum Quiz von Tag 54 254
Frage 1: true oder false 254
Frage 2: Start bei 0254
Frage 3: Zahlen, Zeichenketten und boolesche Werte 254
Frage 4: (Milli-)Sekunden der Unix-Epoche 254
Frage 5: Verzögerte einmalige Ausführung 254
Die Lösungen zum Quiz von Tag 60 255
Die Lösungen zum Quiz von Tag 66 257
Die Lösungen zum Quiz von Tag 72 258
Frage 1: Geänderter Text 258
Frage 2: Alles gut258
Frage 3: Mathfloor(Mathrandom() * 10) + 1258
Frage 4: Wert und Typ 258
Frage 5: elementclassListadd('classname'); 258
Frage 6: documentcreateElement('tagname');259
Frage 7: function myFunction() 259
Frage 8: Verhinderte Standardaktion259
Frage 9: Dokumentation und Verständnis 259
Frage 10: consolelog259
Stichwortverzeichnis 261
