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
  • Scope
    (Gültigkeitsbereich)
• 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 Spiele­programmierung

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

OOP in JS

• Objekte und ihre Eigenschaften
• Klassen und Vererbung
• Module und Kapselung

In diesem Tutorial lernen Sie den Umgang mit Objekten und einen Einstieg in die Objektorientierte Programmierung.

progressive Web-App

• Installierbarkeit
• Offline-Browsing

Für Fortgeschrittene:

Web Animations (WAAPI)

• Animieren in JavaScript
• Animationen steuern
• Animationen synchronisieren
• Komfort-Bildwechsler

Formulare

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

Node.js

Laufzeitumgebung, mit der in JS programmiert werden kann

• Webserver mit Node.js

Mouse and More

• Event-Modelle für Touch- und Maus-Aktionen
• Region of Interest
• SVG-Zoom

SVG und JavaScript

• DOM-Scripting
• Animation

JavaScript und CSS

• Stylesheets dynamisch wechseln
• Stylesheets dynamisch ändern

Infoboxen

• Tooltips mit Popover
• modale Dialogfenster
• Akkordeon mit details

Neu! Revolutionär!

Popups ohne Programmieren!

• Eigene modale Dialogfenster
• zugängliche Registerkarten
• Zusammenfassung längerer Artikel

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

Canvas

• JavaScript/Canvas
• Funktionsplotter

Drag & Drop

• Drag and Drop (ohne Drag & Drop API)

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

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