HTML5-Tutorium: JavaScript: Hello World 04 - Versionsgeschichte

Kowa am 8. April 2025 um 06:36 Uhr

2025-04-08T06:36:07Z

← Nächstältere Version		Version vom 8. April 2025, 06:36 Uhr
Zeile 322:		Zeile 322:

	// Set the focus it the window is reentered.		// Set the focus it the window is reentered.
	window.addEventListener('~~focus~~', autofocus);		window.addEventListener('visibilitychange', autofocus);

	// If the reset button is clicked, not only the textares are reset but also the focus is replaced.		// If the reset button is clicked, not only the textares are reset but also the focus is replaced.

Kowa: /* Laden der CSS- und der JavaScript-Dateien */

2025-03-19T11:47:05Z

Laden der CSS- und der JavaScript-Dateien

← Nächstältere Version		Version vom 19. März 2025, 11:47 Uhr
Zeile 117:		Zeile 117:
	# [''Largest Contentful Paint-Element 1.350 ms'' https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint?hl=de]		# [''Largest Contentful Paint-Element 1.350 ms'' https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint?hl=de]
	# ''Dokument enthält keine Meta-Beschreibung''		# ''Dokument enthält keine Meta-Beschreibung''

			''Anmerkung'': Google Pagespped ist auch über die Chroeme-Entwickler-Konsole zugänglich. Damit können auch lokale Server (<ocde>localhost</code> {{oÄ}}) getestet werden. Echte Prformanzprobleme erkennt man aber eher, wenn man seinen Live-Server testet.

	Eine Meta-Beschreibung hinzuzufügen, ist kein Problem. Fügen Sie folgende Zeile in den Head-Bereich der HTML-Datei ein.		Eine Meta-Beschreibung hinzuzufügen, ist kein Problem. Fügen Sie folgende Zeile in den Head-Bereich der HTML-Datei ein.

Kowa: /* Konfigurierbarkeit */

2025-03-18T15:59:02Z

Konfigurierbarkeit

← Nächstältere Version		Version vom 18. März 2025, 15:59 Uhr
Zeile 357:		Zeile 357:
	v03: [https://glossar.hs-augsburg.de/beispiel/tutorium/2024/wk_hello_world/wk_hello_world_04/web/v04_5/index.html <code>index.html</code>], Git: [{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_5]		v03: [https://glossar.hs-augsburg.de/beispiel/tutorium/2024/wk_hello_world/wk_hello_world_04/web/v04_5/index.html <code>index.html</code>], Git: [{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_5]

	Ich verwende hier die Funktionen <code>getJson</code> und <code>controlerKey</code> (bzw. die allgemeinere Variante <code>ControllerKey</code> (eine ECMAScript-Klasse), die erst später eingeführt und erklärt werden.		Ich verwende hier die Funktionen <code>getJson</code> und <code>controlerKey</code> (bzw. die allgemeinere Variante <code>ControllerKey</code>, eine ECMAScript-Klasse), die erst später eingeführt und erklärt werden.

	Die Musterlösung müsste noch ausgebaut werden:		Die Musterlösung müsste noch ausgebaut werden:

Kowa: /* Konfigurierbarkeit */

2025-03-18T15:54:50Z

Konfigurierbarkeit

← Nächstältere Version		Version vom 18. März 2025, 15:54 Uhr
Zeile 356:		Zeile 356:
	Musterlösung:<br/>		Musterlösung:<br/>
	v03: [https://glossar.hs-augsburg.de/beispiel/tutorium/2024/wk_hello_world/wk_hello_world_04/web/v04_5/index.html <code>index.html</code>], Git: [{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_5]		v03: [https://glossar.hs-augsburg.de/beispiel/tutorium/2024/wk_hello_world/wk_hello_world_04/web/v04_5/index.html <code>index.html</code>], Git: [{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_5]

			Ich verwende hier die Funktionen <code>getJson</code> und <code>controlerKey</code> (bzw. die allgemeinere Variante <code>ControllerKey</code> (eine ECMAScript-Klasse), die erst später eingeführt und erklärt werden.

	Die Musterlösung müsste noch ausgebaut werden:		Die Musterlösung müsste noch ausgebaut werden:

Kowa: /* Konfigurierbarkeit */

2025-03-18T15:47:59Z

Konfigurierbarkeit

← Nächstältere Version		Version vom 18. März 2025, 15:47 Uhr
Zeile 350:		Zeile 350:
	[{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_4]		[{{Git-Server}}/kowa/wk_hello_world_04/-/tree/master/web/v04_5?ref_type=heads v04_4]

	===Konfigurierbarkeit===		== Konfigurierbarkeit ==

	Entfernen Sie programmspezifische Konstanten aus den JavaScript-Dateien und definieren Sie diese in einer Datei <code>config.js</code> oder (sehr viel besser) <code>config.json</code>, um dem Prinzip der [[Programmierprinzipien#Konfigurierbarkeit.2C_Customizability\|Konfigurierbarkeit]] zu genügen.		Entfernen Sie programmspezifische Konstanten aus den JavaScript-Dateien und definieren Sie diese in einer Datei <code>config.js</code> oder (sehr viel besser) <code>config.json</code>, um dem Prinzip der [[Programmierprinzipien#Konfigurierbarkeit.2C_Customizability\|Konfigurierbarkeit]] zu genügen.

Kowa: /* Weitere Modularisierung */

2025-03-18T15:47:46Z

Weitere Modularisierung

← Nächstältere Version		Version vom 18. März 2025, 15:47 Uhr
Zeile 338:		Zeile 338:
	Verison v04_2 [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_04/web/v04_2/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html Google PageSpeed])		Verison v04_2 [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_04/web/v04_2/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html Google PageSpeed])

	=== Weitere Modularisierung ===		== Weitere Modularisierung ==

	Teilen Sie die Datei <code>greet.js</code> in zwei Dateien <code>greet.js</code> und <code>greet_on_enter.js</code> mit jeweils eines Funktion auf, um dem		Teilen Sie die Datei <code>greet.js</code> in zwei Dateien <code>greet.js</code> und <code>greet_on_enter.js</code> mit jeweils eines Funktion auf, um dem

Kowa: /* Weitere Modularisierung */

2025-03-18T15:39:07Z

Weitere Modularisierung

← Nächstältere Version		Version vom 18. März 2025, 15:39 Uhr
Zeile 335:		Zeile 335:
	</source>		</source>

	===Weitere Modularisierung===		==== Musterlösung v04_2 ====
			Verison v04_2 [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_04/web/v04_2/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_2%2Findex.html Google PageSpeed])

			=== Weitere Modularisierung ===

	Teilen Sie die Datei <code>greet.js</code> in zwei Dateien <code>greet.js</code> und <code>greet_on_enter.js</code> mit jeweils eines Funktion auf, um dem		Teilen Sie die Datei <code>greet.js</code> in zwei Dateien <code>greet.js</code> und <code>greet_on_enter.js</code> mit jeweils eines Funktion auf, um dem

Kowa: /* Musterlösung */

2025-03-18T15:38:13Z

Musterlösung

← Nächstältere Version		Version vom 18. März 2025, 15:38 Uhr
Zeile 104:		Zeile 104:
	Vergessen Sie nicht, Ihr aktuelles Projekt zu committen und auf dem Git-Server zu speichern, sobald alles funktioniert.´		Vergessen Sie nicht, Ihr aktuelles Projekt zu committen und auf dem Git-Server zu speichern, sobald alles funktioniert.´

	==== Musterlösung ====		==== Musterlösung v04_1 ====
	Verison ~~v01~~ [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_04/web/v04_1/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html Google PageSpeed])~~<br/>~~		Verison v04_1 [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_04/web/v04_1/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html Google PageSpeed])

	===Laden der CSS- und der JavaScript-Dateien===		===Laden der CSS- und der JavaScript-Dateien===

Kowa: /* CSS-Dateien */

2025-03-18T14:19:10Z

CSS-Dateien

← Nächstältere Version		Version vom 18. März 2025, 14:19 Uhr
Zeile 153:		Zeile 153:
	[https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html PageSpeed Insights (für Musterlösung v04_1)]:		[https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html PageSpeed Insights (für Musterlösung v04_1)]:
	<blockquote cite="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html">		<blockquote cite="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_04%2Fweb%2Fv04_1%2Findex.html">
	Ressourcen blockieren den First Paint deiner Seite. Versuche, wichtiges JS und wichtige CSS inline anzugeben und alle nicht kritischen JS und Stile zurückzustellen.		[https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources?hl=de Ressourcen blockieren den First Paint deiner Seite. Versuche, wichtiges JS und wichtige CSS inline anzugeben und alle nicht kritischen JS und Stile zurückzustellen.]
	</blockquote>		</blockquote>

Kowa am 18. März 2025 um 14:17 Uhr

2025-03-18T14:17:16Z

@@ Zeile 334: / Zeile 334: @@
+}
 </source>
 ===Weitere Modularisierung===
@@ Zeile 379: / Zeile 360: @@
 ==Fortsetzung des Tutoriums==
 Wenn man die Vorschläge von Google beachtet,
 beschleunigt dies die Übertragung der Dateien vom Server zum Client, macht aber  den Code unlesbar.