JavaScript

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

Allgemeines zu JavaScript

Sprachelemente

• Bezeichner
  • Reservierte Wörter
• Variablen
  • var, const und let
  • Gültigkeitsbereche
• Datentypen
• Operatoren
• Funktionen
• Arrays

Kontrollstrukturen

• Anweisungen
• Bedingte Anweisungen
• Schleifen

Umgang mit Objekten

• Einstieg in die OOP

Standardobjekte

• Array
• Boolean
• Date
• Math
• Number
• Object
• Promise
• String
• … mehr

JavaScript im Browser

Schnittstellen

• Window
• History
• Location
• Navigator
• Screen

Mixins

• WindowOrWorkerGlobalScope

Das Document Object Model

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

Programmierschnittstellen

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

Tutorials

Für Anfänger

• Einstieg in JavaScript
  • Erste Schritte
  • Programmieren und Debuggen
  • Funktionen

• Das DOM und Einbindung in HTML (interaktive Webseiten)
  • Einbindung in HTML
  • Was ist das DOM?
  • Ereignisverarbeitung
  • DOM-Manipulation

• Praxis Schreinerei
  • EVA-Prinzip
  • Online-Einkauf
  • Bankgeschäfte

• Praxis Spieleprogrammierung
  • Zahlenspiele
  • Mathe-Quiz
  • Tic-Tac-Toe
  • Multiple-Choice-Quiz
  • Adventure

• OOP in JS
  • Objekte und ihre Eigenschaften
  • Klassen und Vererbung
  • Module und Kapselung

• progressive Web-App (in Arbeit)
  • Installierbarkeit
  • Offline-Browsing

Für Fortgeschrittene:

• Fehlerbehandlung
• Taschenrechner
• Wertübergabe zwischen verschiedenen HTML-Dokumenten
• gleichverteilte Zufallszahlen
• Mouse and More
• Namensräume in JavaScript
• Umgang mit Callback-Funktionen
• Funktionen nicht zu oft aufrufen (Debouncing und Throttling)

Animation

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

Canvas

• JavaScript/Canvas
• Funktionsplotter

CSS

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

Drag & Drop

• Drag and Drop (ohne Drag & Drop API)

Fenster und Frames

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

Formulare

• Formulareingaben auswerten‏‎
• Gestaltung mit JavaScript
• Verkettete Auswahllisten
• Formulareingaben validieren‏‎
• Suchen und Filtern

Inhalte präsentieren:

• zugängliches Akkordeon
• zugängliche Registerkarten
• Zusammenfassung längerer Artikel

Menüs und Navigationen

• Kontextmenü
• Dropdown-Menü
• Flyout-Menü

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

• wsabstract.com: Website Abstraction: Advanced JavaScript Tutorials: Umfangreiche Artikelsammlung zu ausgewählten JavaScript-Themen.
• htmlgoodies:JavaScript Primers

jQuery

• jQuery.com