Skip to content

Latest commit

 

History

History
76 lines (65 loc) · 3.61 KB

README.md

File metadata and controls

76 lines (65 loc) · 3.61 KB

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

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

  • Übung 01: Einkaufsliste als Array, hinzufügen, löschen, sortieren
  • Übung 02: Kühlschrank als assoziatives Array, hinzufügen, sortieren, ersetzen

06 Schleifen

  • Übung 01: Einkaufsliste, ein Array zu einem anderen Array hinzufügen
  • Übung 02: Kühlschrank als assoziatives Array, jedes zweite Element aus einem Array löschen

07 Funktionen

  • Übung 01: Einkaufsliste, mit Hilfe von Buttons und Eingabefeldern manipulieren
  • Übung 02: Kühlschrank mit Hilfe von Buttons, einzelne Elemente löschen
  • Übung 03: Bildgenerator, Bilder laden und anzeigen

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.