Web uebungen

Im folgenden finden sich Übungen für das Thema Web. Weiters soll direkt ein Überblick über die Themen erfolgen.

Überblick

Ein grundlegendes Verständnis folgender Begriffe soll erlangt werden. Diese sind nicht chronologisch geordnet.

Tip:
* Für weitere Informationen bzgl. Webtechnologien: Webtechnologien
* Für weitere Informationen bzgl. Webservices und Client- Serverkonzepte: Webservices und Client Server Konzepte

• HTTP (Transportprotokoll)
• JSON (Datenübertragungsformat)
• Client- Serverarchitektur und Webservice
• HTML
  • Elemente verstehen und optimalerweise auch erstellen (html, head, body, img, table, grid, div, a, p, h[1-5], br, form, input (text, textarea, button, checkbox),...)
  • Die wichtigsten Attribute für oben genannte Elemente
• CSS
  • Erstellen von eigenen Klassen
  • Styling für HTML Elemente erstellen
  • CSS Selektoren erstellen
  • Inline CSS in HTML
  • CSS im HTML Head
  • CSS in eigener Datei (import in HTML)
  • Styling der wichtigsten Attribute (margin, padding, display, flexbox)
• Javascript
  • Eigene Methoden schreiben und aufrufen
  • Eventlistener erstellen (onClick,...)
  • Javascript im HTML Head
  • Javascript in eigener Datei (import in HTML)
  • HTML Elemente mittels Javascript erstellen/ändern und löschen
  • HTTP Requests mittels fetch erstellen und verarbeiten (Anbindung eines Webservices)

Übungen

Zum Bearbeiten der Übungen wird der Opensource Editor Visual Studio Code[1] empfohlen.

Für die Übungen wurde im Repository der Ordner web/[Teilnehmername] eingerichtet. Bitte verwende diesen Ordner für die Übungen.

Aufgabe: Eigene Webseite

Verwende dazu den Ordner web/[Name]/firstWebsite/ im git Repository.

Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.

• Die Navigation erfolgt mittels Links die die andere Seite aufrufen.

• Weiters soll ein Navigationsmenü erstellt werden, dass die Navigation in jeder Seite ermöglicht.

• Das Styling soll in einer oder mehrere eigener CSS Dateien erfolgen.

• Folgende Seiten sollen erstellt werden
  • Startseite
    • Willkommensnachricht
  • Über mich
    • Ein beispiel Profilfoto einbinden
    • Hobbies
    • Aufzählung von Lieblingsspeisen
    • Tabelle für Sprachen: English - Gut; Deutsch - Muttersprache
  • Was habe Ich bisher gelernt
    • Linkzusammenfassung von den verwendeten Tools (Intellij, Java, Mysql, Github)
    • Für 1-2 Tools ein Video auf Youtube suchen und das Video einbetten
    • Link zum eigenen GitHub-Account einbinden (mit GitHub Icon daneben)
  • Impressum
    • Standardimpressum oder Dummytext

Aufgabe: Hässlichste Website Ever

Verwende dazu den Ordner web/[Name]/ugly/ im git Repository.

Erstelle eine beliebige Website mit tollen Animationen, und super Farben. Gerne können auch spezielle Javascript Effekte wie 3d Rotation oder ähnliches verwendet werden.

!!!Je Bunter desto besser!!!

Aufgabe: Javascript Clicker

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.

Javascript Clicker Beispiel

Aufgabe: Javascript Clicker Persistant

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die Storage API[2] verwendet werden.

Aufgabe: Javascript Add Element

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.

Javascript Element hinzufügen

Aufgabe: Javascript Remove Element

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.

Javascript Element löschen

Aufgabe: Single Page Application

Verwende dazu den Ordner web/[Name]/chuckNorris/ im git Repository.

Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[3]. Es soll aber vom Umfang und den Funktionen dem unten beschriebenen Text entsprechen.

Es soll eine Webseite erstellt werden in der Chuck Norris Witze gesucht und gespeichert werden können. Hierfür gibt es eine API[4].

• Zufälligen Witz anzeigen
• Witze nach Text suchen
• Gefundene Witze speichern
• Gespeicherte Witze löschen
• Witze sollen im Localstorage des Browsers gespeichert werden