Interaktive Medien II, Javascript

Javascript Übungen Interaktive Medien II, FS 2021

01 Variablen

• Übung 01: Alter berechnen
• Übung 02: Versorgung, Anzahl Tassen Tee bis zum Lebensende
• Übung 03: Umrechung Celsius zu Fahrenheit und umgekehrt
• Übung 04: Umrechung Celsius zu Fahrenheit mit Formular

02 Bedingungen

• Übung 01: Übersetzer, Text in Abhängigkeit der Sprache in Variable
• Übung 02: Notenrechner, Note in Abhängigkeit der Punktzahl
• Übung 03: Pluralisator, Ausgabe in abhängigkeit von Ein- und Mehrzahl
• Übung 04: Übersetzer, Text in Abhängigkeit der Sprache des HTML-Dokuments

03 DOM

• Übung 01: create Element, Versorgung, Anzahl Tassen Tee bis zum Lebensende
• Übung 02: create Element, Versorgung, Anzahl Tassen Tee bis zum Lebensende, mehrere innerHTML
• Übung 03: create Element, Versorgung, Anzahl Tassen Tee bis zum Lebensende, Style ändern
• Übung 04: create Element, Versorgung, Anzahl Tassen Tee bis zum Lebensende, Klasse hinzufügen

04 Events

• Übung 01: Koch, klicken auf Button
• Übung 02: Dimmer, mehr oder weniger Licht in Abhängigkeit Slider
• Übung 03: Audioplayer, Ereignis mit Start und Pause
• Übung 04: Layers, mehr über das Ereignis Click herausfinden

05 Arrays

Im Thema werden Arrays und assoziative Arrays beleuchtet. Es wird erlernt, wie diese erstellt, ausgelesen und manipuliert werden. Als Projekt, wird ein assoziatives Array über die eigene Persönlichkeit erstellt um die Tiefe der Thematik zu erfassen.

06 Schleifen

Im Thema Schleifen werden die verschiedenen Arten von Schleifen betrachtet:

• For
• ForEach
• While

Als Übung wird durch ein verschachteltes assoziatives Array iteriert um sämtliche Werte auslesen zu können.

07 Funktionen

Im Thema Funktionen wird beleuchtet, wie Funktionen eingesetzt werden können.

• Aufruf von Funktionen
• Aufbau von Funktionen
• Übergabe von Werten über Funktionen

Als Projekt wird eine Alert-Funktion realisiert, die sich bei drei verschiedenen Knöpfen auch unterschiedlich verhält.

08 Multimedia-Inhalte

Im Thema Multimedia-Inhalte werden die beiden Tags <video></video> und <audio></audio> im Detail angeschaut.

• Nutzen und Anwendungen
• Formate
• Optionen
• Autoplay-Knigge
• Funktionen und Events

Als Mini-Projekt wird ein Audio-Player gebaut, welcher in einer Statuszeile den aktuellen Zustand ausgibt.

09 localStorage

Im Thema localStorage werden die Funktionen schreiben, lesen und löschen aufgearbeitet. Das ganze wird in einer sehr simplen Notizen-Anwendung geübt.

Ziel der drei folgenden Themenblöcke:

Die drei folgenden Themenblöcke gehören zusammen. Ziel ist das dynamische Laden von JSON-Daten und ihre Darstellung im Webbrowser.

10 JavaScript-Objekte

Mit einem JS-Objekt kann man leicht Daten in HTML darstellen.

• Objekt erstellen und Eigenschaft in der Konsole aufrufen
• Objekt-Eigenschaften in vorhandene HTML-Struktur schreiben
• ungeordnete Liste aus dynamisch in JavaScript aus Untereigenschaften des Objekts erstellen und in HTML einfügen
• HTML-Struktur dynamisch aus Objekt erzeugen und in HTML ausgeben
• Code in einer Fuktion bündeln und Funktion aufrufen
• mehrere Objekte mittels der Funktion ausgeben

11 AJAX

AJAX ermöglich das dynamische Nachladen externer Inhalte, ohne die Webseite neu laden zu müssen.

• externen Text laden und in der Konsole ausgeben
• externen Text laden und in der Webseite anzeigen
• externes HTML laden und in der Webseite ausgeben
• externe Inhalte mit Hilfe von Buttons austauschen

12 JSON

JSON ist ein sehr weit verbreitetes Datenaustauschformat. In JavaScript lässt sich JSON sehr leicht in ein Objekt umwandeln.

• JSON Syntax
• JSON laden und in der Konsole ausgeben
• JSON laden und Eigenschaften in der Webseite ausgeben
• JSON-Inhalte mit Hilfe von Buttons austauschen

99_LiveBeispiele

Hier ist sämtlicher Code, welcher in einer Live-Veranstaltung entstanden ist, zur vollständigkeit. Evtl. können daraus Übungen entstehen.