JavaScript

Für die Entwicklung dynamischer Webseiten ist JavaScript unerlässlich. Mit ihr lassen sich kleine Hilfsroutinen bis hin zu komplexen Frameworks schreiben.

Sprachelemente

• Kommentare
• Bezeichner
• Reservierte Wörter
• Steuerzeichen und besondere Notationen
• Variablen
• Datentypen
• Operatoren
• Funktionen
• Arrays

Kontrollstrukturen

• Anweisungen
• Bedingte Anweisungen
• Schleifen

Umgang mit Objekten

• Eigenschaften und Methoden
• Module und Kapselung
• Vererbung
• Objektverfügbarkeit und this-Kontext
• Destrukturierung

Standardobjekte

• Array
• Boolean
• Date
• Function
• Map
• Math
• Number
• Object
• RegExp
• String
• Symbol

Schnittstellen

• Window
• History
• Location
• Navigator
• Screen

• DOM
  • Document
  • DocumentFragment
  • Element
  • Event
    • Übersicht aller Events
  • EventTarget
  • Node
  • ParentNode

• Animation
• Canvas 2D
• CSS Funktionen
• Drag and Drop
• File Upload
• Geolocation
• IndexedDB
• Shared Worker
• Web Components
• WebGL
• Web Speech
• Web Storage
• Web Worker
• XMLHttpRequest

Für Anfänger

• Einstieg in JavaScript
  • Erste Schritte
  • Kontrollstrukturen
  • Debuggen mit der Konsole
  • Funktionen
  • Fehlervermeidung
  • Performance-Optimierung

• Das DOM und Einbindung in HTML
  • Einbindung in HTML
  • Was ist das DOM?
  • Ereignisverarbeitung
  • DOM-Manipulation

• Praxis Schreinerei
  • EVA-Prinzip

• Grundlagen von Strings und Arrays

• OOP in JS
  • Objekte
  • Klassen oder Konstruktoren
  • Speichern mit JSON
  • Das fertige Beispiel

• Praxis Spieleprogrammierung
  • Zahlenspiele
  • Sum-up
  • Tic-Tac-Toe
  • Adventure

Für Fortgeschrittene:

• Fehlerbehandlung
• Taschenrechner
• Wertübergabe zwischen verschiedenen HTML-Dokumenten
• gleichverteilte Zufallszahlen
• Mouse and More
• Namensräume in JavaScript
• Umgang mit Callback-Funktionen

Animation

• Bildwechsler
  (Einführung in Web Animations API)
  • Animieren in JavaScript
  • Animationen synchronisieren
  • Animationen steuern
  • Extras (CSS-Dateien nachladen)

App-Entwicklung

• hybride App
• Mobile Web-App mit HTML5
• interaktive Webanwendung

Canvas

• Color Picker
• Funktionsplotter

CSS

• JavaScript und CSS
• Stylesheets dynamisch wechseln
• Stylesheets dynamisch ändern

Drag & Drop

• Drag and Drop-Quiz (HTML5)
• Drag and Drop (ohne Drag & Drop API)

Fenster und Frames

• Fenster- und Frameszugriff
• Popup-Boxen
• Eigene modale Dialogfenster

Formulare

• Formulareingaben validieren‏‎
• Formular-Templates nachladen
• Text an Cursorposition einfügen

Inhalte präsentieren:

• zugängliches Akkordeon
• zugängliche Dialog-Boxen‏‎
• zugängliche Registerkarten
• Zusammenfassung längerer Artikel

Menüs und Navigationen

• Kontextmenü
• zugängliche Dropdown-Navigation
• Verkettete Auswahllisten
• Navigation bei Bedarf fixieren

Sicherheit

• Sicherheitskonzepte
• Cross Site Scripting
• Local Machine Zone Lockdown

Speicher

• Cookies setzen und auslesen
• ToDo-Liste mit LocalStorage
• Zusammenfassung längerer Artikel

SVG

• SVG und JavaScript
• Datenvisualisierung
• interaktive Infografiken
• Funktionsplotter

Tabellen

• Tabellen dynamisch sortieren
• Datensatzauswahl aus Tabelle

Text

• Auto-Footnoter
• Text automatisch markieren

Zeit & Datum

• Validierung von Zeitangaben
• Zeitberechnung
• komfortable Timer-Funktion
• Monatskalender
• Ausführungszeiten messen

weiterführende Informationen

• Ajax
• Deprecated (obsolete Eigenschaften und Methoden)

• Entstehung und Standardisierung (Geschichte von JavaScript)
• JavaScript Object Notation (JSON)

Weblinks

Recommendations (Empfehlungen) des W3-Konsortiums zum DOM

• W3C: DOM: Aktuelle offizielle Empfehlung des W3-Konsortiums zum DOM-Sprachstandard 3.0.
  • DOM 3.0 Views (Recommendation): Aktuelle offizielle Empfehlung des W3-Konsortiums zum DOM-Sprachstandard 3.0 (hier: die Views-Komponente, die verschiedene "Sichten" eines Dokuments unterscheidet - z.B. mit oder ohne Stylesheets, mit oder ohne Frames usw.).
  • DOM 3.0 Events (Recommendation): Aktuelle offizielle Empfehlung des W3-Konsortiums zum DOM-Sprachstandard 3.0 (hier: die Event-Komponente, die ein Modell für Ereignisbehandlung beschreibt).
  • DOM 3.0 Load and Save (Recommendation): Aktuelle offizielle Empfehlung des W3-Konsortiums zum DOM-Sprachstandard 3.0 (hier: die Load and Save-Komponente, die das Umwandeln von XML-Dokumenten in DOM-Strukturen und umgekehrt beschreibt).
  • Document Object Model (DOM) Activity Statement: DOM-Aktivitäten-Seite des W3-Konsortiums.
    Auf dieser Seite können Sie sich über die aktuellen Entwicklungen rund um das DOM informieren.
  • Document Object Model FAQ: Häufig gestellte Fragen zum DOM - eine ausführliche Frage-Antwortseite des W3-Konsortiums zum Thema.

ECMAScript 6

• ecmascript.org: ECMAScript 6 specification drafts

Deutschsprachige Hilfen und Quellen zu JavaScript/DOM

• Mozilla Developer Network - JavaScript. Sehr umfangreiche Dokumentation und Tutorials zu JavaScript und anderen Webtechniken. In verschiedenen Sprachen verfügbar, auch in Deutsch.
• jswelt.de: Forum JavaScript: Etliche, von Anwendern kommentierbare Scripts für Animationen, Bildwechsel, Cookies, Kalender, Uhrzeit-Countdowns, Tooltipps, Popup-Fenster, Frames, Formular-Handling, Menüs usw.

Internationale Hilfen und Quellen zu JavaScript/DOM

• oopweb.com: Koch: Voodoo's Introduction to JavaScript: Große JavaScript-Einfühung mit vielen Beispielen.
  Autor: Stefan Koch
• wsabstract.com: Website Abstraction: Advanced JavaScript Tutorials: Umfangreiche Artikelsammlung zu ausgewählten JavaScript-Themen.
• htmlgoodies:JavaScript Primers

jQuery

• jQuery.com