HTML5-Tutorium: JavaScript: Hello World

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6

Ziel

In diesem Tutorium wird beschrieben, wie man in HTML5 eine interaktive Hello-World-Anwendung mit Hilfe von JavaScript erstellt.

Voraussetzungen

Dieses Tutorium wendet sich an Studierende des dritten Semesters Interaktive Medien. Es wurde und wird im Rahmen der Lehrveranstaltung Multimedia-Anwendungen/Programmierung (MMProg) entwickelt.

In den ersten Semestern des Studiums wurden bereits Programmiererfahrung mit Processing und Java erworben: Softwareentwicklung und Programmierung. Daher werden einfache objektorientierte Programmierprinzipien (If-Anweisungen, Schleifen, Objekte, Methoden etc.) als bekannt vorausgesetzt. Wichtige Unterschiede zu anderen Programmiersprachen werden selbstverständlich behandelt.

Die Kenntnis von HTML und CSS wird ebenfalls vorausgesetzt. Diese Kenntnisse werden in der Veranstaltung Multimedia-Anwendungen/Gestaltung vermittelt, welche parallel zu MMProg angeboten wird. Im Rahmen dieses Tutoriums werden nur diejenigen HTML- und CSS-Kenntnisse besprochen, die für das Verständnis der Inhalte notwendig sind.

Web-Server, wie Web2py, Apache, Tomcat, Node.js liefern HTML-Seiten, CSS-Datein und JavaScript-Code nicht nur aus, sondern können auch dazu verwendet werden, derartige Dokumente dynamisch zu erstellen, das heißt im Moment der Anforderung durch den Benutzer. Dies ist Inhalt der Vorlesung Netzwerktechnologien I, die ebenfalls für Studierende des dritten Semesters angeboten wird.

Inhalt der Vorlesung MMProg ist die dynamische Veränderungen von HTML-Seiten auf dem Client (Browser). Damit lassen sich beispielsweise Browserspiele realisieren. Dies geschieht mit Hilfe von JavaScript.

Use Cases

Es wird eine personalisierte HTML-Seite erstellt: Der Benutzer wird nach seinem Namen gefragt und dieser wird anschließend in die aktuelle HTML-Seite (mittels JavaScript) eingefügt.

Tutorium

1. Teil 1: Erstellen einer Web-Anwendung (HTML) mittels WebStorm, die Hallo, Welt! ausgibt.
2. Teil 2: Layouten der Hello-World-Web-Anwendung mittels CSS.
3. Teil 3: Dynamisieren der Hello-World-Web-Anwendung mittels [[JavaScript] (Hallo, <Benutzername>!).
4. Teil 4: Verbesserung der Web-Anwendung: Komprimierung der JavaScript- und CSS-Dateien.

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
2. Musterlösungen