JavaScript kinderleicht!

JavaScript kinderleicht!

by Nick Morgan
Released July 2015
Publisher(s): dpunkt
ISBN: 97833864902406

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

• Eine spielerische Einführung in die Programmierung mit JavaScript.• Speziell gestaltete für Jugendliche ab 10 Jahren und andere Anfänger.• Mit witzigen und kinderfreundlichen Beispielen• komplett in Farbe

Table of contents

  1. Cover
  2. Titel
  3. Impressum
  4. Vorwort
  5. Einleitung
    1. Für wen ist dieses Buch gedacht?
    2. So solltest du das Buch lesen
    3. Was findest du in diesem Buch?
    4. Viel Spass!
  6. Teil I Grundlagen
    1. 1 Was ist JavaScript?
      1. 1.1 Eine Begegnung mit JavaScript
      2. 1.2 Warum solltest du gerade JavaScript lernen?
      3. 1.3 JavaScript-Code schreiben
      4. 1.4 Die Struktur eines JavaScript-Programms
        1. Syntax
        2. Kommentare
      5. 1.5 Das hast du gelernt
    2. 2 Datentypen und Variablen
      1. 2.1 Zahlen und Operatoren
      2. 2.2 Variablen
        1. Variablennamen
        2. Neue Variablen ausrechnen
        3. Hoch- und runterzählen
        4. += (plus-gleich) und –= (minus-gleich)
      3. 2.3 Strings
        1. Strings zusammenfügen
        2. Die Länge eines Strings herausfinden
        3. Ein einzelnes Zeichen aus einem String herausholen
        4. Strings zerschneiden
        5. Strings in Gross- oder Kleinbuchstaben umwandeln
      4. 2.4 Boolesche Werte
        1. Logische Operatoren
        2. Zahlen mit booleschen Werten vergleichen
      5. 2.5 undefined und null
      6. 2.6 Das hast du gelernt
    3. 3 Arrays
      1. 3.1 Warum solltest du dich mit Arrays beschäftigen?
      2. 3.2 Ein Array erzeugen
      3. 3.3 Auf die Elemente des Arrays zugreifen
      4. 3.4 Elemente im Array definieren oder ändern
      5. 3.5 Datentypen in einem Array mischen
      6. 3.6 Mit Arrays arbeiten
        1. Die Länge eines Arrays herausfinden
        2. Elemente zum Array hinzufügen
        3. Elemente aus einem Array entfernen
        4. Arrays zusammenfügen
        5. Den Index eines Elements in einem Array suchen
        6. Ein Array in einen String umwandeln
      7. 3.7 Wozu sind Arrays gut?
        1. Nach Hause finden
        2. Entscheidungen treffen
        3. Einen Generator für zufällige Beleidungen erzeugen
      8. 3.8 Das hast du gelernt
    4. 4 Objekte
      1. 4.1 Objekte erzeugen
        1. Schlüssel ohne Anführungszeichen
      2. 4.2 Auf Werte von Objekten zugreifen
      3. 4.3 Werte zu Objekten hinzufügen
        1. Schlüssel in Punktschreibweise hinzufügen
      4. 4.4 Arrays und Objekte kombinieren
        1. Ein Array voller Freunde
      5. 4.5 Objekte in der Konsole untersuchen
      6. 4.6 Sinnvolle Verwendungen für Objekte
        1. Verliehenes Geld verwalten
        2. Informationen über Filme abspeichern
      7. 4.7 Das hast du gelernt
    5. 5 HTML-Grundlagen
      1. 5.1 Texteditoren
      2. 5.2 Unser erstes HTML-Dokument
      3. 5.3 Tags und Elemente
        1. Überschriftelemente
        2. Das p-Element
        3. Leerraum in HTML und Blockelemente
        4. Inline-Elemente
      4. 5.4 Ein komplettes HTML-Dokument
      5. 5.5 HTML-Hierarchie
      6. 5.6 Links zur HTML-Seite hinzufügen
        1. Link-Attribute
        2. Title-Attribute
      7. 5.7 Das hast du gelernt
    6. 6 Bedingte Anweisungen und Schleifen
      1. 6.1 JavaScript in HTML einbetten
      2. 6.2 Bedingte Anweisungen
        1. if-Anweisungen
        2. if…else-Anweisungen
        3. if…else-Anweisungen verketten
      3. 6.3 Schleifen
        1. while-Schleifen
        2. for-Schleifen
      4. 6.4 Das hast du gelernt
    7. 7 Ein Galgenmännchen-Spiel programmieren
      1. 7.1 Mit einem Spieler kommunizieren
        1. Ein Prompt erzeugen
        2. Mit der Funktion confirm eine Ja- oder Nein-Frage stellen
        3. Den Spieler mit Alerts informieren
        4. Warum solltest du alert statt console.log verwenden?
      2. 7.2 Das Spiel entwickeln
        1. Das Spiel mit Pseudocode entwickeln
        2. Den Zustand des Worts speichern
        3. Die Schleife entwickeln
      3. 7.3 Das Spiel programmieren
        1. Ein Zufallswort auswählen
        2. Das Antwort-Array erzeugen
        3. Die Spielschleife programmieren
        4. Das Spiel beenden
      4. 7.4 Der Spielcode
      5. 7.5 Das hast du gelernt
    8. 8 Funktionen
      1. 8.1 Der Grundaufbau einer Funktion
      2. 8.2 Eine einfache Funktion erstellen
      3. 8.3 Eine Funktion aufrufen
      4. 8.4 Argumente an Funktionen übergeben
        1. Katzengesichter zeichnen!
        2. Mehrere Argumente an eine Funktion übergeben
      5. 8.5 Werte aus Funktionen zurückgeben
      6. 8.6 Funktionsaufrufe als Werte verwenden
      7. 8.7 Code vereinfachen mit Funktionen
        1. Eine Funktion zum Herauspicken eines zufälligen Worts
        2. Ein Generator für zufällige Beleidigungen
        3. Aus dem Beleidigungsgenerator eine Funktion machen
      8. 8.8 Eine Funktion vorzeitig verlassen mit return
      9. 8.9 Mehrmals return anstelle von if...else-Anweisungen verwenden
      10. 8.10 Das hast du gelernt
  7. Teil II Javascript für Fortgeschrittene
    1. 9 Das DOM und jQuery
      1. 9.1 DOM-Elemente auswählen
        1. Elemente mit id identifizieren
        2. Ein Element mit getElementById auswählen
        3. Den Überschrifttext mithilfe des DOM ersetzen
      2. 9.2 jQuery und die Arbeit mit dem DOM-Baum
        1. jQuery in deine HTML-Seite laden
        2. Den Überschrifttext mit jQuery ersetzen
      3. 9.3 Neue Elemente mit jQuery erzeugen
      4. 9.4 Elemente mit jQuery animieren
      5. 9.5 jQuery-Animationen verketten
      6. 9.6 Das hast du gelernt
    2. 10 Interaktive Programmierung
      1. 10.1 Codeausführung mit setTimeout verzögern
      2. 10.2 Ein Timeout abbrechen
      3. 10.3 Code mehrfach aufrufen mit setInterval
      4. 10.4 Elemente mit setInterval animieren
      5. 10.5 Auf Benutzereingaben reagieren
        1. Auf Klicks reagieren
        2. Das mousemove-Ereignis
      6. 10.6 Das hast du gelernt
    3. 11 Schatzsuche!
      1. 11.1 Das Spiel entwickeln
      2. 11.2 Die Webseite in HTML erzeugen
      3. 11.3 Eine zufällige Stelle für den Schatz auswählen
        1. Zufallszahlen auswählen
        2. Die Schatzkoordinaten festlegen
      4. 11.4 Der Klick-Handler
        1. Klicks zählen
        2. Die Entfernung zwischen Klick und Schatz berechnen
        3. Den Satz des Pythagoras verwenden
        4. Dem Spieler mitteilen, wie nahe er am Ziel ist
        5. Prüfen, ob der Spieler gewonnen hat
      5. 11.5 Alles zusammensetzen
      6. 11.6 Das hast du gelernt
    4. 12 Objektorientierte Programmierung
      1. 12.1 Ein einfaches Objekt
      2. 12.2 Methoden zu Objekten hinzufügen
        1. Das Schlüsselwort this verwenden
        2. Eine gemeinsame Methode in mehreren Objekten verwenden
      3. 12.3 Objekte erzeugen mit Konstruktoren
        1. Aufbau des Konstruktors
        2. Einen Auto-Konstruktor erzeugen
      4. 12.4 Die Autos zeichnen
      5. 12.5 Die Funktion zeichneAuto testen
      6. 12.6 Prototypen für massgeschneiderte Objekte
        1. Dem Auto-Prototyp eine zeichnen-Methode hinzufügen
        2. Eine schiebeNachRechts-Methode hinzufügen
        3. Die Methoden Links, Hoch und Runter hinzufügen
      7. 12.7 Das hast du gelernt
  8. Teil III Der Canvas
    1. 13 Das canvas-Element
      1. 13.1 Einen Canvas erzeugen
      2. 13.2 Auf dem Canvas zeichnen
        1. Das canvas-Element auswählen und speichern
        2. Den Zeichenbereich erstellen
        3. Ein Quadrat zeichnen
        4. Mehrere Quadrate zeichnen
      3. 13.3 Die Zeichenfarbe ändern
      4. 13.4 Rechteckige Umrisse zeichnen
      5. 13.5 Linien oder Pfade zeichnen
      6. 13.6 Gefüllte Pfade
      7. 13.7 Bögen und Kreise zeichnen
        1. Einen Viertelkreis oder einen Bogen zeichnen
        2. Einen Halbkreis zeichnen
        3. Einen vollen Kreis zeichnen
      8. 13.8 Viele Kreise mit einer Funktion zeichnen
      9. 13.9 Das hast du gelernt
    2. 14 Bewegte Objekte auf dem Canvas erzeugen
      1. 14.1 Ein Quadrat animieren
        1. Den Canvas leeren
        2. Das Quadrat zeichnen
        3. Die Position ändern
        4. Die Animation im Browser betrachten
      2. 14.2 Die Grösse eines Quadrats animieren
      3. 14.3 Eine Zufallsbiene
        1. Eine neue Kreisfunktion
        2. Die Biene zeichnen
        3. Die Koordinaten der Biene ändern
        4. Die Biene animieren
      4. 14.4 Einen Ball hüpfen lassen!
        1. Der Ball-Konstruktor
        2. Den Ball zeichnen
        3. Den Ball bewegen
        4. Den Ball springen lassen
        5. Den Ball animieren
      5. 14.5 Das hast du gelernt
    3. 15 Animationen mit der Tastatur steuern
      1. 15.1 Tastaturereignisse
        1. Die HTML-Datei einrichten
        2. Den keydown-Event-Handler hinzufügen
        3. Tastencodes mithilfe eines Objekts in Namen konvertieren
      2. 15.2 Einen Ball mit der Tastatur bewegen
        1. Den Canvas einrichten
        2. Die Kreisfunktion definieren
        3. Den Ball-Konstruktor erzeugen
        4. Die Methode move definieren
        5. Die Methode draw definieren
        6. Die Methode setDirection erzeugen
        7. Reaktion auf die Tastatur
        8. Den Ball animieren
      3. 15.3 Alles zusammenbauen
      4. 15.4 Den Code ausführen
      5. 15.5 Das hast du gelernt
    4. 16 Das Spiel »Snake« programmieren – Teil 1
      1. 16.1 Das Spiel
      2. 16.2 Die Spielstruktur
        1. Das Spiel mit setInterval animieren
        2. Die Spielobjekte erzeugen
        3. Die Tastatursteuerung einrichten
      3. 16.3 Das Spiel einrichten
        1. Den HTML-Code erzeugen
        2. Den Canvas und die Variablen canvas, ctx, breite und hoehe definieren
        3. Den Canvas in Blöcke unterteilen
        4. Die Variable für den Punktestand definieren
      4. 16.4 Den Rahmen zeichnen
      5. 16.5 Den Punktestand anzeigen
        1. Die Textgrundlinie einrichten
        2. Grösse und Schriftart festlegen
        3. Die Funktion punktstandZeichnen schreiben
      6. 16.6 Das Spiel beenden
      7. 16.7 Das hast du gelernt
    5. 17 Das Spiel »Snake« Programmieren – Teil 2
      1. 17.1 Den Block-Konstruktor erstellen
        1. Die Methode quadratZeichnen hinzufügen
        2. Die Methode kreisZeichnen hinzufügen
        3. Die Methode equal hinzufügen
      2. 17.2 Die Schlange erzeugen
        1. Den Schlangen-Konstruktor schreiben
        2. Die Schlange zeichnen
      3. 17.3 Die Schlange bewegen
        1. Die Methode move hinzufügen
        2. Die Methode kollisionCheck hinzufügen
      4. 17.4 Die Richtung der Schlange mit der Tastatur festlegen
        1. Den keydown-Event-Handler hinzufügen
        2. Die Methode setDirection hinzufügen
      5. 17.5 Den Apfel erzeugen
        1. Den Apfel-Konstruktor schreiben
        2. Den Apfel zeichnen
        3. Den Apfel verschieben
      6. 17.6 Alles zusammensetzen
      7. 17.7 Das hast du gelernt
  9. Anhang
    1. A Nachwort – So geht es weiter
      1. A.1 Mehr JavaScript
      2. A.2 Webprogrammierung
        1. HTML
        2. CSS
        3. Serverseitiger Code mit Node.js
      3. A.3 Grafische Programmierung
        1. Canvas
        2. SVG mit Raphaël
      4. A.4 3D-Programmierung
      5. A.5 Roboter programmieren
      6. A.6 Audioprogrammierung
      7. A.7 Spieleprogrammierung
      8. A.8 Deinen Code per JSFiddle teilen
    2. B Glossar
  10. Index

Product information

  • Title: JavaScript kinderleicht!
  • Author(s): Nick Morgan
  • Release date: July 2015
  • Publisher(s): dpunkt
  • ISBN: 97833864902406