Thomas Rose arbeitet als Senior Software Developer bei Europas größtem Internet-Hoster. Bei LinkedIn Learning hat er mehr als 100 Trainings aus den Bereichen Programmieren, JavaScript und WordPress veröffentlicht. Er lebt mit seiner Familie am Fuße der Schwäbischen Alb.

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