Elter Programmieren lernen mit JavaScript

Spiele und Co. ganz easy – auch für Erwachsene
3. Auflage 2022
ISBN: 978-3-8362-8985-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 391 Seiten

Reihe: Rheinwerk Computing

Entdecke mit JavaScript die Sprache, die hinter fast jeder Webseite steckt, und programmiere Spiele und Anwendungen, die einfach Spaß machen. Steig direkt ein, du brauchst nur deinen Computer und dieses Buch. Es zeigt dir alles von den ersten Befehlen bis zu Grafik und Animation - Schritt für Schritt und an vielen Beispielen. Deine Programme kannst du direkt im Browser laufen lassen und leicht an Freunde weitergeben, ganz unabhängig vom Betriebssystem. Ran an die Tasten, fertig, los!

Aus dem Inhalt:

• Einfacher Einstieg mit Starterpack
• Erste Schritte mit JavaScript und HTML
• Quiz, Rechenkönig, Textadventure
• Tetris nachprogrammieren
• Cookies setzen
• Simulation einer Mondlandung
• Ein Grafik-Framework benutzen
• Fehler finden
• Farben und Animation
• Diagramme erstellen
• Auf Informationen aus dem Internet zugreifen

Die Fachpresse zur Vorauflage:
MagPi: »Falls Sie sich schon immer mal an JavaScript versuchen wollten - hier ist der perfekte Einstieg.«

Mac Life: »Ein leichtfüßiger und spaßiger Programmierkurs, der sich nicht nur an Kinder richtet.«

Stephan Elter ist Softwareentwickler und verwendet JavaScript seit vielen Jahren - neben PHP, Java und einer Menge anderer Sprachen. Programmieren macht ihm Spaß, er liebt witzige Beispiele und würde niemals ein Buch schreiben, in dem jeder Satz hundertprozentig ernst gemeint ist.

Autoren/Hrsg.

Elter, Stephan

Inhaltsverzeichnis

Vorwort ... 15  Materialien zum Buch ... 16  Über dieses Buch ... 17  1.  HTML ... 31  Die Befehle: Tags ... 32  Deine erste Webseite ... 39  Tags tieferlegen und verchromen: Attribute ... 43  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  Das Handy fällt nicht weit vom Stamm -- der gute alte Galileo und warum auch Formeln Spaß machen ... 55  Wie schreibe ich »Wurzel« in JavaScript? ... 56  Wohin mit dem Ergebnis? ... 57  Allheilmittel gegen Vergesslichkeit -- die Variablen ... 61  Von Handyweitwurf zum ersten Spiel ... 67  Lasst die Spiele beginnen ... 72  Die erste Schleife geht auch ohne Schnürsenkel ... 73  Waren da hinten nicht gerade noch der Bernd und die Alfi? Dort, wo jetzt das Monster steht? ... 76  Falls es mal nicht klappt ... 79  3.  Zufall, Spaß und Logik ... 81  Zahlenraten ... 82  Die Anleitung haben wir -- bauen wir unser Programm ... 83  Was macht der Programmcode denn da? ... 85  »Hey, mach's noch mal« -- Schleifen mit »do-while« ... 88  Das fertige Programm ... 90  Schere, Stein, Papier ... 94  Das »if« und das »else« ... 101  Sag mal, stimmt die Formel so? Formeln, Bauchgefühle, Tests ... 102  4.  CodeBreaker ... 105  Die geheime Zahl ... 106  Von der Beschreibung zum Programm ... 107  Nur der Teufel steckt so tief im Detail -- und Programmierer: »else if« ... 112  Tunen, tieferlegen, lackieren und Locken eindrehen ... 118  JavaScript über Klicks auf HTML-Elemente aufrufen ... 122  5.  Bubbles, Blasen und Arrays ... 133  Erst einmal alles fürs Sortieren ... 134  Arrays -- die Vereinsmeier unter den Variablen ... 134  Werte lesen, schreiben und auch wieder vergessen ... 136  The sort must go on ... oder so ähnlich ... 138  Bubblesort mit Computer ... 140  Feinschliff ... 147  Das Ende der weißen Seiten ist nahe ... 152  Etwas schicke Kosmetik ... 160  Die volle Funktion für Bubblesort ... 161  6.  Quiz ... 163  Tieferlegen und verchromen -- alles mit CSS ... 169  Dreimal darfst du raten ... 172  Vom richtigen Mischen und von anonymen Funktionen ... 179  Die Sache mit der Henne, dem Ei und dem besten Anfang ... 182  Das Quiz starten ... 187  7.  Rechenkönig ... 195  Die Benutzeroberfläche ... 196  Zuerst die Funktionen und die Variablen ... 200  Der Spieler ist am Zug ... 212  Das Programm als Ganzes ... 214  Nicht für die Ewigkeit -- aber länger als nur für eine Sitzung ... 216  8.  Textadventure ... 227  Wie setzen wir das um? ... 229  JSON -- ein kuscheliges Zuhause für Daten und Geschichten ... 232  Zeit für etwas HTML und CSS ... 236  Von JSON zu JavaScript ... 240  Zuerst die grundlegende Funktionalität -- der Prototyp ... 244  Nach dem Prototyp ... 248  Aus den Nummern die wirklichen Texte holen ... 250  Teile und herrsche -- mehr als nur eine Datei ... 256  9.  Hammurabi ... 263  Wie funktioniert das Spiel? ... 264  Die Regeln -- im Detail ... 269  Unsere Zufallszahlen ... 280  Eine Spielrunde -- ein ganzes Jahr ... 283  Das ganze Programm in einem Rutsch ... 293

10.  Charts und Bibliotheken ... 299  Chartist.js ... 301  Zeit für eigene Daten ... 310

11.  Mondlandung ... 325  Was brauchen wir auf unserer Webseite? ... 326  Schöner abstürzen ... 328  Ein paar Funktionen wären auch ganz hilfreich ... 328  Das schönste Programm ist nichts ohne eine Ausgabe ... 332  Etwas Kontrolle muss sein ... 335  Schöner fallen mit Canvas und JavaScript ... 338

12.  Im Tal der fallenden Steine ... 347  Die HTML-Datei ... 348  Der Code ... 349

13.  Objekte, Orakel, Schiffe und Seeungeheuer ... 361  Ein Orakel und die erste eigene Klasse ... 363  Noch eine Schippe OOP oben drauf ... 371  Einmal das volle Programm, bitte ... 372  Setzt die Segel! ... 373  So schreiben wir unser Programm ... 374  Eine Karte für die hohe See ... 376  Das Schiff ... 381  Eine Steuerung -- ganz klassisch ... 383  Die Klasse »Karte« ... 385  Die Klasse »Schiff« ... 386  Und noch die Steuerung ... 387  Index ... 389

Leseproben

Über dieses Buch

Programmieren lernen – das Richtige für dich?

Für wen ist dieses Buch geeignet – und für wen ist es ganz besonders geeignet? Natürlich geht es um das Programmieren. Echtes Programmieren mit Spielen und einer ganzen Menge Spaß. Ist dieses Buch also das Richtige für dich?

Beschäftigt man sich zum ersten Mal mit dem Thema »Programmieren«, scheint es sich eher um eine geheime Kunst zu handeln, die nur wenige Eingeweihte beherrschen. Mysteriöse Begriffe schwirren umher, das meiste scheint kaum verständlich. Vielleicht brummt der Kopf schon nach den ersten Versuchen? Dann ist es Zeit für dieses Buch.

Bin ich hier richtig?

Es geht in diesem Buch ums Programmieren. Und darum, wie du deine eigenen Ideen in Programme umsetzen kannst. Du lernst also nicht nur die Befehle und Anweisungen einer Programmiersprache. In diesem Buch zeige ich dir, wie du deine Ideen sinnvoll formulierst und dann als Computerprogramm schreibst.

In (fast) jedem Kapitel stelle ich ein kurzes, meist einfaches Spiel vor. Wie musst du vorgehen, um dieses Spiel in ein Programm umzusetzen? In jedem Kapitel lernst du außerdem ein paar neue Befehle und Möglichkeiten der Programmierung kennen. Büffeln musst du dabei eigentlich gar nichts – wichtiger ist der Spaß daran.

Wenn du also ein Buch für einen durchaus ernsthaften Einstieg in die Welt der Programmierung suchst, aber auch dem Spaß nicht vollends abgeneigt bist, dann bist du hier richtig. Du willst das Programmieren für dich selbst lernen? Du suchst Hilfe für den Informatikunterricht oder gar die letzte Rettung für begleitende Informatikkurse im Studium oder in der Ausbildung? Wenn es dabei ums Programmieren geht und es JavaScript sein darf, bist du hier richtig.

Komplexe UIs unter Verwendung komplexer Frameworks?

Du kannst bereits programmieren? Du willst ein komplexes User-Interface (UI) für das Frontend deiner Webseite bauen? Du suchst ein Buch über Oberflächen- und Webseitenprogrammierung mit JavaScript, jQuery und anderen Frameworks wie Angular oder React? Du willst per AJAX asynchrone Datenübertragung realisieren? Dann ist dieses Buch nicht die erste Wahl – es sei denn, du hast gerade erst angefangen zu programmieren und möchtest noch etwas üben, ohne viele Themen auf einmal zu beginnen. Denn die üblichen Themen klassischer JavaScript-Bücher – wie Web- und Oberflächenentwicklung –, die sich an erfahrene Entwickler richten, aber nicht zu einem Einstieg in die Programmierung taugen, werden hier nur am Rande behandelt. Hier geht es um deinen Einstieg in die Programmierung.

Programmieren ist doch Mathematik, viel Mathematik?

Es ist ein Irrglaube, dass gute (oder sogar sehr gute) Mathematikkenntnisse eine zwingende Voraussetzung seien, um programmieren zu können. Sicher: Ein gesundes Grundverständnis von Zahlen und allgemeinen Rechenoperationen schadet zumindest nicht. Aber das ist es eigentlich auch schon. Berechnungen führt der Computer durch. Notwendige Formeln findest du zumeist im Internet. Auch wenn du kein mathematisches Genie sein solltest, wirst du dennoch in der Lage sein, Programme zu schreiben. Viel wichtiger sind gute Ideen, etwas Ausdauer und Spaß an kniffligen Rätseln und Aufgaben.

Und wer erst einmal erlebt hat, wie der Computer mathematische Probleme und Schwierigkeiten löst und knackt, dem macht Mathematik gleich doppelt so viel Spaß.

Was du brauchst

Du benötigst nicht viel. Hast du einen Computer, der schnell genug ist, um damit im Internet zu surfen? Oder mit dem du Textverarbeitung machen kannst? Du hast einen Browser wie Chrome, Safari oder Firefox? Du weißt, wie du am Computer Texte schreibst und speicherst? Dann hast du eigentlich schon alles, was du brauchst. Es ist übrigens egal, ob du einen PC mit Windows oder Linux verwendest oder einen Mac. Was ich dir hier zeigen werde, kannst du tatsächlich überall einsetzen.

Warum JavaScript?

Natürlich ist es nicht egal, mit welcher Programmiersprache du beginnst. Wir nehmen deshalb eine Sprache, die Ähnlichkeiten mit den Großen der Szene hat: mit C/C++, Java, C# und PHP. Eine Programmiersprache, die selbst eine bekannte Größe ist und ursprünglich für das Internet entwickelt wurde.

Aber warum ist JavaScript denn so toll, um das Programmieren zu lernen?

Keine Installation – keine Konfiguration – keine Sorgen

JavaScript ist auf nahezu jedem Computer verfügbar. Denn ein Browser, der JavaScript ausführen kann, gehört heute zur Grundausstattung aller gängigen Betriebssysteme.

So toll andere Programmiersprachen auch sind: Du musst für sie erst eine Laufzeitumgebung oder einen Compiler installieren, einen leistungsfähigen Editor oder noch besser eine komplexe IDE. Eine Menge Wissen und Vorarbeit sind notwendig, um nur die kleinsten Dinge auf den Bildschirm zu zaubern. Und solange du beispielsweise nicht weißt, was public static void main(String[] args){} bedeutet, kannst du nur wenig machen. JavaScript ist da anders, ganz anders: Du schreibst deine JavaScript-Programme in einfache Webseiten (und die sind eigentlich auch nur einfache Textdateien) und schaust dir das Resultat direkt im Browser (also in Google Chrome, Edge, Firefox oder Safari) an. Die Browser haben einen eingebauten Übersetzer, einen Interpreter für JavaScript, der deine Programme wie von Zauberhand übersetzt und ausführt.

Das heißt für dich: keine Suche nach Software, keine Installation, keine Ärgernisse, weil irgendwelche Systemeinstellungen oder Berechtigungen gesetzt werden müssen.

JavaScript ist sicher

Du nutzt den teuren (oder treuen) Laptop der Familie oder das Arbeitsgerät von Onkel Oswald? Kein Problem: JavaScript kann nichts kaputtmachen. JavaScript kann keine Dateien löschen oder verändern, die sich auf dem Computer befinden. Alles läuft in einer sicheren (sogenannten) Sandbox ab. Damit kein schädliches Programm aus dem Internet Schaden am Computer anrichten kann, hat man bei der Entwicklung entschieden, dass JavaScript bestimmte Dinge eben nicht machen darf – dazu gehört das Löschen oder Verändern von Dateien. Der einfachste Weg, solche Aktionen zu verhindern, bestand darin, diese Fähigkeiten erst gar nicht einzubauen. JavaScript »lebt« quasi innerhalb der Browser – und nur und ausschließlich dort. Natürlich kannst du trotzdem Daten speichern, aber eben geschützt innerhalb des Browsers.

JavaScript ist eine dynamisch typisierte Sprache

JavaScript gehört zu den dynamisch typisierten Sprachen. Das klingt kompliziert, ist aber ganz einfach: Eine Variable (das ist ein kleiner Speicher) kann beliebige Werte aufnehmen – egal, ob es eine Zahl ist, ein Wort oder ein Wahrheitswert (0 oder 1 bzw. true oder false). Treffen solche unterschiedlichen Werte aufeinander, kümmert sich JavaScript darum, alles korrekt zusammenzubringen. Du brauchst dir über solche Dinge keine Gedanken zu machen – du kannst dich gleich ins Programmieren stürzen.

Andere Sprachen wie Java oder C# sind da wesentlich strenger: Eine Variable muss vor der Verwendung dauerhaft auf eine Art von Wert festgelegt werden, sonst gibt es einen Fehler. Willst du eine Zahl und einen Text in irgendeiner Form zusammenbringen, musst du die Werte erst konvertieren. Das ist statische Typisierung. Das bringt bei (sehr) großen Programmen mehr Sicherheit, die Entwicklung ist aber aufwendiger.

Entwickler führen immer wieder lange Diskussionen, ob die dynamische oder die strenge Typisierung der Weg zum Glück ist. Das braucht dich aber nicht zu kümmern.

Falls du es genauer wissen willst: interpretiert oder kompiliert?

Mit Programmen, wie du sie schreibst, kann ein Computer noch nicht viel anfangen – sie müssen erst in sogenannte Maschinensprache übersetzt werden. Manche Sprachen werden interpretiert, andere Sprachen werden kompiliert. Der Unterschied ist einfach: Mit Sprachen, die kompiliert werden, können direkt ausführbare Programme erzeugt werden. Unter Windows sind das die klassischen .exe-Dateien, die mit einem Doppelklick gestartet werden.

Interpreter-Sprachen werden jedes Mal aufs Neue aus dem Quellcode (also der Textdatei, in der du dein Programm geschrieben hast) übersetzt und dann ausgeführt. Man hat keine (echten) ausführbaren Dateien, sondern benötigt immer einen Interpreter bzw. eine sogenannte Laufzeitumgebung für die Umsetzung und Ausführung. Für JavaScript übernimmt der Browser diese Aufgabe: Er hat einen solchen JavaScript-Interpreter an Bord.

Eine klassische Compilersprache ist C/C++. Interpretersprachen sind PHP, Python, Ruby und natürlich JavaScript. Und es gibt Sprachen, die zwar kompiliert werden – in sogenannten Bytecode –, aber erst bei der Ausführung des Programms in Maschinensprache interpretiert werden. Dazu gehören Java, C# oder auch VB.NET.

Früher war es einfach: Kompilierte Programme waren viel schneller. Es war gar nicht sinnvoll, Programme nicht zu kompilieren. Heute hat sich das geändert. Die Prozessoren...

Über Autor(innen)

Elter, Stephan
Stephan Elter ist Softwareentwickler und verwendet JavaScript seit vielen Jahren – neben PHP, Java und einer Menge anderer Sprachen. Programmieren macht ihm Spaß, er liebt witzige Beispiele und würde niemals ein Buch schreiben, in dem jeder Satz hundertprozentig ernst gemeint ist.