Auf einen Blick. 1 Grundlagen und Einführung Erste Schritte Sprachkern Mit Objekten und Referenztypen arbeiten...

Transkript

1 Auf einen Blick Auf einen Blick 1 Grundlagen und Einführung Erste Schritte Sprachkern Mit Objekten und Referenztypen arbeiten Webseiten dynamisch verändern Ereignisse verarbeiten und auslösen Mit Formularen arbeiten Browser steuern und Browserinformationen auslesen e einer Webseite dynamisch nachladen Aufgaben vereinfachen mit jquery Bilder und Grafiken dynamisch erstellen Moderne Web-APIs verwenden Objektorientierte Programmierung Funktionale Programmierung Den Quelltext richtig strukturieren Die neuen ES6-Features richtig nutzen Serverseitige Anwendungen mit Node.js erstellen Mobile Anwendungen mit JavaScript erstellen Mikrocontroller mit JavaScript steuern Einen professionellen Entwicklungsprozess aufsetzen A JavaScript-Referenz B DOM-Referenz und HTML-Erweiterungen C BOM und Ajax D HTML5-Web-APIs-Referenz

2 Vorwort Grundlagen und Einführung Grundlagen der Programmierung Mit dem Computer kommunizieren Programmiersprachen Hilfsmittel für den Programmentwurf Einführung JavaScript Historie Anwendungsgebiete Zusammenfassung Erste Schritte Einführung JavaScript und Webentwicklung Der Zusammenhang zwischen HTML, CSS und JavaScript Das richtige Werkzeug für die Entwicklung JavaScript in eine Webseite einbinden Eine geeignete Ordnerstruktur vorbereiten Eine JavaScript-Datei erstellen Eine JavaScript-Datei in eine HTML-Datei einbinden JavaScript direkt innerhalb des HTML definieren Platzierung und Ausführung der <script>-elemente Den Quelltext anzeigen Eine Ausgabe erzeugen Standarddialogfenster anzeigen Auf die Konsole schreiben Bestehende UI-Komponenten verwenden Zusammenfassung

3 3 Sprachkern Werte in Variablen speichern Variablen definieren Gültige Variablennamen verwenden Konstanten definieren Die verschiedenen Datentypen verwenden Zahlen Zeichenketten Boolesche Wahrheitswerte Arrays Objekte Besondere Datentypen Die verschiedenen Operatoren einsetzen Operatoren für das Arbeiten mit Zahlen Operatoren für das einfachere Zuweisen Operatoren für das Arbeiten mit Zeichenketten Operatoren für das Arbeiten mit booleschen Werten Operatoren für das Arbeiten mit Bits Operatoren für das Vergleichen von Werten Operatoren für spezielle Operationen Den Ablauf eines Programms steuern Bedingte Anweisungen definieren Verzweigungen definieren Den Auswahloperator verwenden Mehrfachverzweigungen definieren Zählschleifen definieren Kopfgesteuerte Schleifen definieren Fußgesteuerte Schleifen definieren Schleifen und Schleifeniterationen vorzeitig abbrechen Wiederverwendbare Codebausteine erstellen Funktionen definieren Funktionen aufrufen Funktionsparameter übergeben und auswerten Rückgabewerte definieren Standardwerte für Parameter definieren Elemente aus einem Array als Parameter verwenden Funktionen über Kurzschreibweise definieren Funktionen im Detail Funktionen aufrufen durch Nutzerinteraktion Auf Fehler reagieren und sie richtig behandeln Syntaxfehler Laufzeitfehler Logische Fehler Das Prinzip der Fehlerbehandlung Fehler fangen und behandeln Fehler auslösen Fehler und der Funktionsaufruf-Stack Bestimmte Anweisungen unabhängig von aufgetretenen Fehlern aufrufen Den Quelltext kommentieren Den Code debuggen Einführung Ein einfaches Codebeispiel Haltepunkte definieren Variablenbelegungen einsehen Ein Programm schrittweise ausführen Mehrere Haltepunkte definieren Bedingte Haltepunkte definieren Den Funktionsaufruf-Stack einsehen Zusammenfassung Mit Objekten und Referenztypen arbeiten Unterschied zwischen primitiven Datentypen und Referenztypen Das Prinzip von primitiven Datentypen Das Prinzip von Referenztypen Primitive Datentypen und Referenztypen als Funktionsargumente Den Typ einer Variablen ermitteln Ausblick Zustand und Verhalten in Objekten kapseln Einführung objektorientierte Programmierung Objekte erstellen über die Literal-Schreibweise Objekte erstellen über Konstruktorfunktionen Objekte erstellen unter Verwendung von Klassen Objekte erstellen über die Funktion»Object.create()« Auf Eigenschaften zugreifen und Methoden aufrufen Objekteigenschaften und Objektmethoden hinzufügen oder überschreiben

4 4.2.8 Objekteigenschaften und Objektmethoden löschen Objekteigenschaften und Objektmethoden ausgeben Änderungen an Objekten verhindern Mit Arrays arbeiten Arrays erzeugen und initialisieren Auf Elemente eines Arrays zugreifen Elemente einem Array hinzufügen Elemente aus einem Array entfernen Einen Teil der Elemente aus einem Array kopieren Arrays sortieren Arrays als Stack verwenden Arrays als Queue verwenden Elemente in Arrays finden Elemente innerhalb eines Arrays kopieren Arrays in Zeichenketten umwandeln Mit Zeichenketten arbeiten Der Aufbau einer Zeichenkette Die Länge einer Zeichenkette ermitteln Innerhalb einer Zeichenkette suchen Teile einer Zeichenkette extrahieren Sonstige globale Objekte Mit Datum und Zeit arbeiten Komplexe Berechnungen durchführen Wrapperobjekte für primitive Datentypen Mit regulären Ausdrücken arbeiten Reguläre Ausdrücke definieren Zeichen gegen einen regulären Ausdruck testen Zeichenklassen verwenden Anfang und Ende begrenzen Quantifizierer verwenden Nach Vorkommen suchen Alle Vorkommen innerhalb einer Zeichenkette suchen Auf einzelne Teile eines Vorkommens zugreifen Nach bestimmten Zeichenketten suchen Vorkommen innerhalb einer Zeichenkette suchen Nach Vorkommen suchen Zeichenketten zerteilen Funktionen als Referenztypen Funktionen als Argumente verwenden Funktionen als Rückgabewert verwenden Standardmethoden jeder Funktion Zusammenfassung Webseiten dynamisch verändern Aufbau einer Webseite Document Object Model Die verschiedenen Knotentypen Der Dokumentknoten Elemente selektieren Elemente per ID selektieren Elemente per Klasse selektieren Elemente nach Elementnamen selektieren Elemente nach Namen selektieren Elemente per Selektor selektieren Das Elternelement eines Elements selektieren Die Kindelemente eines Elements selektieren Die Geschwisterelemente eines Elements selektieren Selektionsmethoden auf Elementen aufrufen Elemente nach Typ selektieren Mit Textknoten arbeiten Auf den Textinhalt eines Elements zugreifen Den Textinhalt eines Elements verändern Das HTML unterhalb eines Elements verändern Textknoten erstellen und hinzufügen Mit Elementen arbeiten Elemente erstellen und hinzufügen Elemente und Knoten entfernen Die verschiedenen Typen von HTML-Elementen Mit Attributen arbeiten Den Wert eines Attributs auslesen Den Wert eines Attributs ändern Attributknoten erstellen und hinzufügen Attribute entfernen Auf CSS-Klassen zugreifen Zusammenfassung

5 6 Ereignisse verarbeiten und auslösen Das Konzept der ereignisgesteuerten Programmierung Auf Ereignisse reagieren Einen Event-Handler per HTML definieren Einen Event-Handler per JavaScript definieren Event-Listener definieren Mehrere Event-Listener definieren Argumente an Event-Listener übergeben Event-Listener entfernen Event-Handler und Event-Listener per Helferfunktion definieren Auf Informationen eines Ereignisses zugreifen Die verschiedenen Typen von Ereignissen Ereignisse bei Interaktion mit der Maus Ereignisse bei Interaktion mit Tastatur und Textfeldern Ereignisse beim Arbeiten mit Formularen Ereignisse bei Fokussieren von Elementen Allgemeine Ereignisse der Nutzerschnittstelle Ereignisse bei mobilen Endgeräten Den Ereignisfluss verstehen und beeinflussen Die Event-Phasen Den Ereignisfluss unterbrechen Standardaktionen von Events verhindern Ereignisse programmatisch auslösen Einfache Ereignisse auslösen Ereignisse mit übergebenen Argumenten auslösen Standardereignisse auslösen Zusammenfassung Mit Formularen arbeiten Auf Formulare und Formularfelder zugreifen Auf Formulare zugreifen Auf Formularelemente zugreifen Den Wert von Textfeldern und Passwortfeldern auslesen Den Wert von Checkboxen auslesen Den Wert von Radiobuttons auslesen Den Wert von Auswahllisten auslesen Die Werte von Mehrfachauswahllisten auslesen Auswahllisten per JavaScript mit Werten befüllen Formulare programmatisch abschicken und zurücksetzen Formulareingaben validieren Zusammenfassung Browser steuern und Browserinformationen auslesen Das Browser Object Model Auf Fensterinformationen zugreifen Die Größe und Position eines Browserfensters ermitteln Die Größe und Position eines Browserfensters ändern Auf Anzeigeinformationen der Browserleisten zugreifen Allgemeine Eigenschaften ermitteln Neue Browserfenster öffnen Browserfenster schließen Dialoge öffnen Funktionen zeitgesteuert ausführen Auf Navigationsinformationen der aktuellen Webseite zugreifen Auf die einzelnen Bestandteile der URL zugreifen Auf Querystring-Parameter zugreifen Eine neue Webseite laden Den Browserverlauf einsehen und verändern Im Browserverlauf navigieren Browserverlauf bei Single Page Applications Einträge in den Browserverlauf hinzufügen Auf Änderungen im Browserverlauf reagieren Den aktuellen Eintrag im Browserverlauf ersetzen Browser erkennen und Browserfeatures bestimmen Auf Informationen des Bildschirms zugreifen Zusammenfassung

6 9 e einer Webseite dynamisch nachladen Das Prinzip von Ajax Synchrone Kommunikation Asynchrone Kommunikation Typische Anwendungsfälle für die Verwendung von Ajax Verwendete Datenformate Das XML-Format Der Aufbau von XML XML und die DOM API Zeichenketten in XML-Objekte umwandeln XML-Objekte in Zeichenketten umwandeln Das JSON-Format Der Aufbau von JSON Unterschied zwischen JSON und JavaScript-Objekten Objekte in das JSON-Format umwandeln Objekte aus dem JSON-Format umwandeln Anfragen per Ajax stellen Das»XMLHttpRequest«-Objekt HTML-Daten per Ajax laden XML-Daten per Ajax laden JSON-Daten per Ajax laden Daten per Ajax an den Server schicken Formulare per Ajax abschicken Daten von anderen Domains laden Die neuere Alternative zu»xmlhttprequest«: die Fetch API Zusammenfassung Aufgaben vereinfachen mit jquery Einführung jquery einbinden jquery über ein CDN einbinden jquery verwenden Aufgaben mit jquery vereinfachen Mit dem DOM arbeiten Elemente selektieren Auf e zugreifen und diese verändern Ausgewählte Elemente filtern Auf Attribute zugreifen Auf CSS-Eigenschaften zugreifen Zwischen Elementen navigieren Effekte und Animationen verwenden Auf Ereignisse reagieren Event-Listener registrieren Auf allgemeine Ereignisse reagieren Auf Mausereignisse reagieren Auf Tastaturereignisse reagieren Auf Formularereignisse reagieren Auf Informationen von Ereignissen zugreifen Ajax-Anfragen erstellen Ajax-Anfragen erstellen Auf Ereignisse reagieren HTML-Daten per Ajax laden XML-Daten per Ajax laden JSON-Daten per Ajax laden Zusammenfassung Bilder und Grafiken dynamisch erstellen Bilder zeichnen Die Zeichenfläche Der Rendering-Kontext Rechtecke zeichnen Pfade verwenden Texte zeichnen Farbverläufe zeichnen Speichern und Wiederherstellen des Canvas-Zustands Transformationen anwenden Animationen erstellen Vektorgrafiken einbinden Das SVG-Format SVG in HTML einbinden Das Aussehen von SVG-Elementen mit CSS beeinflussen Das Verhalten von SVG-Elementen mit JavaScript beeinflussen Zusammenfassung

7 12 Moderne Web-APIs verwenden Über JavaScript kommunizieren Unidirektionale Kommunikation mit dem Server Bidirektionale Kommunikation mit einem Server Vom Server ausgehende Kommunikation Nutzer wiedererkennen Cookies verwenden Cookies anlegen Cookies auslesen Ein Beispiel: Einkaufswagen auf Basis von Cookies Nachteile von Cookies Den Browserspeicher nutzen Werte im Browserspeicher speichern Werte aus dem Browserspeicher lesen Werte im Browserspeicher aktualisieren Werte aus dem Browserspeicher löschen Auf Änderungen im Browserspeicher reagieren Die verschiedenen Typen von Browserspeichern Ein Beispiel: Einkaufswagen auf Basis des Browserspeichers Die Browserdatenbank nutzen Öffnen einer Datenbank Erstellen einer Datenbank Erstellen eines Objektspeichers Hinzufügen von Objekten zu einem Objektspeicher Lesen von Objekten aus einem Objektspeicher Löschen von Objekten aus einem Objektspeicher Aktualisieren von Objekten in einem Objektspeicher Verwendung eines Cursors Auf das Dateisystem zugreifen Auswählen von Dateien per Dateidialog Auswählen von Dateien per Drag & Drop Lesen von Dateien Den Lesefortschritt überwachen Komponenten einer Webseite verschieben Ereignisse einer Drag-and-Drop-Operation Verschiebbare Elemente definieren Verschieben von Elementen Aufgaben parallelisieren Das Prinzip von Web Workern Web Worker verwenden Den Standort von Nutzern ermitteln Auf Standortinformationen zugreifen Kontinuierlich auf Standortinformationen zugreifen Position auf Karte anzeigen Anfahrtsbeschreibung anzeigen Den Batteriestand eines Endgeräts auslesen Auf Batterieinformationen zugreifen Auf Ereignisse reagieren Übersicht über verschiedene Web-APIs Zusammenfassung Objektorientierte Programmierung Die Prinzipien der objektorientierten Programmierung Klassen, Objektinstanzen und Prototypen Prinzip 1: Abstraktes Verhalten definieren Prinzip 2: Zustand und Verhalten kapseln Prinzip 3: Zustand und Verhalten vererben Prinzip 4: Verschiedene Typen annehmen JavaScript und die Objektorientierung Prototypische Objektorientierung Das Konzept von Prototypen Von Objekten ableiten Methoden und Eigenschaften vererben Methoden und Eigenschaften im erbenden Objekt definieren Methoden überschreiben Die Prototypenkette Methoden des Prototyps aufrufen Prototypische Objektorientierung und die Prinzipien der Objektorientierung Pseudoklassische Objektorientierung Konstruktorfunktionen definieren Objektinstanzen erzeugen Methoden und Eigenschaften definieren Von Objekten ableiten Konstruktor der»oberklasse«aufrufen

8 Methoden überschreiben Methoden der»oberklasse«aufrufen Pseudoklassische Objektorientierung und die Prinzipien der Objektorientierung Objektorientierung mit Klassensyntax Klassen definieren Objektinstanzen erzeugen Getter und Setter definieren Von»Klassen«ableiten Methoden überschreiben Methoden der»oberklasse«aufrufen Statische Methoden definieren Statische Eigenschaften definieren Klassensyntax und die Prinzipien der Objektorientierung Zusammenfassung Funktionale Programmierung Prinzipien der funktionalen Programmierung Prinzip 1: Funktionen sind Objekte erster Klasse Prinzip 2: Funktionen arbeiten mit unveränderlichen Datenstrukturen Prinzip 3: Funktionen haben keine Nebeneffekte Prinzip 4: Funktionale Programme sind deklarativ Imperative Programmierung und funktionale Programmierung Iterieren mit der Methode»forEach()« Werte abbilden mit der Methode»map()« Werte filtern mit der Methode»filter()« Mehrere Werte zu einem Wert reduzieren mit der Methode»reduce()« Kombination der verschiedenen Methoden Zusammenfassung Den Quelltext richtig strukturieren Namenskonflikte vermeiden Module definieren und verwenden Das Module-Entwurfsmuster Das Revealing-Module-Entwurfsmuster AMD CommonJS Native Module Zusammenfassung Die neuen ES6-Features richtig nutzen Maps verwenden Maps erstellen Grundlegende Operationen Über Maps iterieren Weak Maps verwenden Sets verwenden Sets erstellen Grundlegende Operationen von Sets Über Sets iterieren WeakSets verwenden Das Iterieren über Datenstrukturen kapseln Das Prinzip von Iteratoren Iteratoren verwenden Einen eigenen Iterator erstellen Ein iterierbares Objekt erstellen Über iterierbare Objekte iterieren Funktionen anhalten und fortsetzen Eine Generatorfunktion erstellen Einen Generator erstellen Über Generatoren iterieren Unendliche Generatoren erstellen Generatoren mit Parametern steuern Den Zugriff auf Objekte abfangen Das Prinzip von Proxies Proxies erstellen Handler für Proxies definieren Asynchrone Programmierung vereinfachen Das Prinzip der asynchronen Programmierung Promises erstellen Verarbeiten eines Promises

9 Promise-Aufrufe verketten Die Zustände von Promises Vorlagen für Zeichenketten definieren Template-Strings erstellen Platzhalter innerhalb von Zeichenketten definieren Ausdrücke innerhalb von Zeichenketten auswerten Mehrzeilige Zeichenketten definieren Zeichenketten über Funktionen verändern Symbole verwenden Symbole erstellen Die Symbol-Registry verwenden Symbole zur Definition eindeutiger Objekteigenschaften verwenden Symbole zur Definition von Konstanten verwenden Werte aus Arrays und Objekten extrahieren Werte aus Arrays extrahieren Werte aus Objekten extrahieren Werte innerhalb einer Schleife extrahieren Argumente einer Funktion extrahieren Neue Methoden der Standardobjekte Neue Methoden in»object« Neue Methoden in»string« Neue Methoden in»array« Neue Methoden in»regexp« Neue Methoden in»number« Neue Methoden in»math« Zusammenfassung Ereignisse verarbeiten und auslösen Ein Event auslösen und abfangen Ein Event mehrfach auslösen Ein Event genau einmal abfangen Ein Event mehrfach abfangen Auf das Dateisystem zugreifen Dateien lesen Dateien schreiben Dateiinformationen auslesen Dateien löschen Mit Verzeichnissen arbeiten Einen Webserver erstellen Einen Webserver starten Dateien per Webserver zur Verfügung stellen Einen Client für einen Webserver erstellen Routen definieren Das Webframework Express verwenden Auf Datenbanken zugreifen Installation von MongoDB MongoDB-Treiber für Node.js installieren Verbindung zur Datenbank herstellen Eine Collection erstellen Objekte speichern Objekte lesen Objekte aktualisieren Objekte löschen Zusammenfassung Serverseitige Anwendungen mit Node.js erstellen Einführung Node.js Die Architektur von Node.js Installation von Node.js Eine einfache Anwendung Node.js Packages verwalten Den Node.js Package Manager installieren Packages installieren Eigene Packages erstellen Mobile Anwendungen mit JavaScript erstellen Die unterschiedlichen Arten mobiler Anwendungen Native Anwendungen Mobile Webanwendungen Hybridanwendungen Vergleich der verschiedenen Ansätze Mobile Anwendungen mit jquery Mobile erstellen Das Grundgerüst einer mobilen Anwendung definieren Einzelne Seiten innerhalb einer Anwendung definieren

10 Übergänge zwischen den Seiten definieren Themes verwenden UI-Komponenten verwenden Layout-Raster definieren Auf Ereignisse reagieren Hybride Anwendungen mit Cordova erstellen Das Prinzip von Cordova Eine Anwendung erstellen Eine Anwendung starten Plugins verwenden Auf Geräteinformationen zugreifen Dialoge anzeigen Auf die Kamera zugreifen Auf Bewegungsinformationen zugreifen Auf Orientierungsinformationen zugreifen Auf Geolokalisierungsinformationen zugreifen Bild-, Audio- und Videoaufnahmen durchführen Auf Verbindungsinformationen zugreifen Auf Kontakte zugreifen Dateien herunterladen und hochladen UI-Komponenten verwenden Auf Ereignisse reagieren Eine Anwendung bauen Zusammenfassung Mikrocontroller mit JavaScript steuern Espruino Technische Informationen Anschluss und Installation Erstes Beispiel LEDs ansteuern Weitere Module Sensoren auslesen Tessel Technische Informationen Anschluss und Installation LEDs ansteuern Die Drucktaster programmieren Den Tessel durch Module erweitern BeagleBone Black Technische Informationen Anschluss und Installation LEDs ansteuern Arduino Das Firmata-Protokoll Anschluss und Installation Das Node.js-Modul Johnny Five Cylon.js Steuern eines BeagleBone Black mit Cylon.js Steuern eines Tessel-Boards mit Cylon.js Steuern eines Arduinos mit Cylon.js Zusammenfassung Einen professionellen Entwicklungsprozess aufsetzen Aufgaben automatisieren Aufgaben automatisieren mit Grunt Aufgaben automatisieren mit Gulp Quelltext automatisiert testen Das Prinzip von automatisierten Tests Das Prinzip der testgetriebenen Entwicklung Den Quelltext automatisiert testen mit QUnit Den Quelltext automatisiert testen mit mocha Versionsverwaltung des Quelltextes Einführung in die Versionsverwaltung Das Versionsverwaltungssystem Git installieren und konfigurieren Ein neues lokales Repository anlegen Ein bestehendes Repository klonen Änderungen in den Staging-Bereich übertragen Änderungen in das lokale Repository übertragen Die verschiedenen Zustände in Git Änderungen in das Remote Repository übertragen Änderungen aus dem Remote Repository übertragen

11 In einem neuen Branch arbeiten Änderungen aus einem Branch übernehmen Übersicht über die wichtigsten Befehle und Begriffe Zusammenfassung Anhang 975 A JavaScript-Referenz B DOM-Referenz und HTML-Erweiterungen C BOM und Ajax D HTML5-Web-APIs-Referenz Index