Drlue: /* Übungen */

2022-12-15T10:10:56Z

Übungen

Drlue: Die Seite wurde neu angelegt: „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_Konze…“

2022-12-15T07:44:30Z

Die Seite wurde neu angelegt: „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_Konze…“

Neue Seite

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|Webtechnologien]]
* Für weitere Informationen bzgl. Webservices und Client- Serverkonzepte: [[Webservices_und_Client_Server_Konzepte|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'''[https://code.visualstudio.com/] empfohlen.

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

==== Aufgabe: Eigene Webseite ====
{{DirectoryToUse|'''web/[Name]/firstWebsite/'''}}
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 ====
{{DirectoryToUse|'''web/[Name]/ugly/'''}}
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 ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.
[[Datei:Javascript clicker.gif|mini|ohne|Javascript Clicker Beispiel]]

==== Aufgabe: Javascript Clicker Persistant ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die '''Storage API'''[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API] verwendet werden.

==== Aufgabe: Javascript Add Element ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.
[[Datei:Javascript add element.gif|mini|ohne|Javascript Element hinzufügen]]

==== Aufgabe: Javascript Remove Element ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.
[[Datei:Javascript add and remove element.gif|mini|ohne|Javascript Element löschen]]

==== Aufgabe: '''S'''ingle '''P'''age '''A'''pplication ====
{{DirectoryToUse|'''web/[Name]/chuckNorris/'''}}

Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[https://medium.com/@vicbergquist/18-fun-apis-for-your-next-project-8008841c7be9]. 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'''[https://api.chucknorris.io/].
* Zufälligen Witz anzeigen
* Witze nach Text suchen
* Gefundene Witze speichern
* Gespeicherte Witze löschen
* Witze sollen im '''Localstorage''' des Browsers gespeichert werden

← Nächstältere Version		Version vom 15. Dezember 2022, 10:10 Uhr
Zeile 36:		Zeile 36:

	==== Aufgabe: Eigene Webseite ====		==== Aufgabe: Eigene Webseite ====
	{{DirectoryToUse\|'''~~web~~/[Name]/firstWebsite/'''}}		{{DirectoryToUse\|'''html/[Name]/firstWebsite/'''}}
	Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.		Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.

Zeile 61:		Zeile 61:

	==== Aufgabe: Hässlichste Website Ever ====		==== Aufgabe: Hässlichste Website Ever ====
	{{DirectoryToUse\|'''~~web~~/[Name]/ugly/'''}}		{{DirectoryToUse\|'''html/[Name]/ugly/'''}}
	Erstelle eine beliebige Website mit tollen Animationen, und super Farben. Gerne können auch spezielle Javascript Effekte wie 3d Rotation oder ähnliches verwendet werden.		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!!!'''		'''!!!Je Bunter desto besser!!!'''

	==== Aufgabe: Javascript Clicker ====		==== Aufgabe: Javascript Clicker ====
	{{DirectoryToUse\|'''~~web~~/[Name]/javascript/'''}}		{{DirectoryToUse\|'''html/[Name]/javascript/'''}}
	Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.		Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.
	[[Datei:Javascript clicker.gif\|mini\|ohne\|Javascript Clicker Beispiel]]		[[Datei:Javascript clicker.gif\|mini\|ohne\|Javascript Clicker Beispiel]]

	==== Aufgabe: Javascript Clicker Persistant ====		==== Aufgabe: Javascript Clicker Persistant ====
	{{DirectoryToUse\|'''~~web~~/[Name]/javascript/'''}}		{{DirectoryToUse\|'''html/[Name]/javascript/'''}}
	Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die '''Storage API'''[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API] verwendet werden.		Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die '''Storage API'''[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API] verwendet werden.

	==== Aufgabe: Javascript Add Element ====		==== Aufgabe: Javascript Add Element ====
	{{DirectoryToUse\|'''~~web~~/[Name]/javascript/'''}}		{{DirectoryToUse\|'''html/[Name]/javascript/'''}}
	Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.		Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.
	[[Datei:Javascript add element.gif\|mini\|ohne\|Javascript Element hinzufügen]]		[[Datei:Javascript add element.gif\|mini\|ohne\|Javascript Element hinzufügen]]

	==== Aufgabe: Javascript Remove Element ====		==== Aufgabe: Javascript Remove Element ====
	{{DirectoryToUse\|'''~~web~~/[Name]/javascript/'''}}		{{DirectoryToUse\|'''html/[Name]/javascript/'''}}
	Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.		Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.
	[[Datei:Javascript add and remove element.gif\|mini\|ohne\|Javascript Element löschen]]		[[Datei:Javascript add and remove element.gif\|mini\|ohne\|Javascript Element löschen]]

	==== Aufgabe: '''S'''ingle '''P'''age '''A'''pplication ====		==== Aufgabe: '''S'''ingle '''P'''age '''A'''pplication ====
	{{DirectoryToUse\|'''~~web~~/[Name]/chuckNorris/'''}}		{{DirectoryToUse\|'''html/[Name]/chuckNorris/'''}}

	Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[https://medium.com/@vicbergquist/18-fun-apis-for-your-next-project-8008841c7be9]. Es soll aber vom Umfang und den Funktionen dem unten beschriebenen Text entsprechen.		Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[https://medium.com/@vicbergquist/18-fun-apis-for-your-next-project-8008841c7be9]. Es soll aber vom Umfang und den Funktionen dem unten beschriebenen Text entsprechen.

DCV 2022 09/web - Versionsgeschichte

Drlue: /* Übungen */