JavaScript

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

Allgemeines zu JavaScript

Sprachelemente

• Bezeichner
  • Reservierte Wörter
• Variablen
  • var - Vater der Variablen
  • const und let
• 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

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‏‎

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

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