HTML5-Tutorium: JavaScript: Hello World Vue 02 - Versionsgeschichte

Kowa: /* JSDoc */

2025-04-29T09:17:44Z

JSDoc

← Nächstältere Version		Version vom 29. April 2025, 09:17 Uhr
Zeile 249:		Zeile 249:
	<source lang="bash">		<source lang="bash">
	npm i -D jsdoc		npm i -D jsdoc
	npm i -D docdash // oder ein anderes Stylepaket Ihrer Wahl		npm i -D docdash # oder ein anderes Stylepaket Ihrer Wahl
	</source>		</source>

Kowa am 11. April 2025 um 13:11 Uhr

2025-04-11T13:11:27Z

← Nächstältere Version		Version vom 11. April 2025, 13:11 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	v02:~~  ~~ [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed])<br/><br/>		v02: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)

Kowa am 11. April 2025 um 13:08 Uhr

2025-04-11T13:08:08Z

← Nächstältere Version		Version vom 11. April 2025, 13:08 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	~~v01~~:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed])<br/><br/>		v02:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)


	== Anwendungsfälle (Use Cases) ==		== Anwendungsfälle (Use Cases) ==

Kowa am 11. April 2025 um 13:07 Uhr

2025-04-11T13:07:46Z

← Nächstältere Version		Version vom 11. April 2025, 13:07 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed~~]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/doc/index.html API-Doc~~])<br/><br/>		v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)

Kowa am 11. April 2025 um 13:05 Uhr

2025-04-11T13:05:03Z

← Nächstältere Version		Version vom 11. April 2025, 13:05 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/~~web_02~~/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_vue%~~2Fweb_02~~%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_vue%~~2Fweb_02~~%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_vue%~~2Fweb_02~~%2Findex.html Google PageSpeed]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/~~web_02~~/doc/index.html API-Doc])<br/><br/>		v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/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_vue%2Fweb_v02%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_vue%2Fweb_v02%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_vue%2Fweb_v02%2Findex.html Google PageSpeed]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v02/doc/index.html API-Doc])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)

Kowa am 11. April 2025 um 13:04 Uhr

2025-04-11T13:04:18Z

← Nächstältere Version		Version vom 11. April 2025, 13:04 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_02~~/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_vue_02~~%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_vue_02~~%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_vue_02~~%2Findex.html Google PageSpeed]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_02~~/doc/index.html API-Doc])<br/><br/>		v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_02/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_vue%2Fweb_02%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_vue%2Fweb_02%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_vue%2Fweb_02%2Findex.html Google PageSpeed]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_02/doc/index.html API-Doc])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)

Kowa am 7. April 2025 um 15:31 Uhr

2025-04-07T15:31:25Z

← Nächstältere Version		Version vom 7. April 2025, 15:31 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	[~~{{Git~~-~~Server}}~~/~~kowa~~/~~wk_hello_world_vue Git-Repository],~~ <code>~~git checkout v02~~</code> (~~JavaScript~~)<br>		v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue_02/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_vue_02%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_vue_02%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_vue_02%2Findex.html Google PageSpeed]. [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue_02/doc/index.html API-Doc])<br/><br/>
	[{{Git-Server}}/kowa/~~wk_hello_world_vue_ts~~ Git-Repository ~~(TypeScript)~~], <code>git checkout v02</code>		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v02</code> (JavaScript)


	== Anwendungsfälle (Use Cases) ==		== Anwendungsfälle (Use Cases) ==

Kowa: /* JSDoc */

2025-04-07T15:24:49Z

JSDoc

← Nächstältere Version		Version vom 7. April 2025, 15:24 Uhr
Zeile 270:		Zeile 270:
	</source>		</source>

	Wenn Sie nun <code>npm run jsdoc</code> ins Terminal tippen, wird die zugehörige Dokumentation im Ordner <code>doc</code> erzeugt. Diese enthält nur eine Dokumentation für die ~~Datei~~ <code>~~ControllerKey~~.js</code>, da dies die ~~einzige Datei~~ ist, die JSDoc-Kommentare ~~enthält~~.		Wenn Sie nun <code>npm run jsdoc</code> ins Terminal tippen, wird die zugehörige Dokumentation im Ordner <code>doc</code> erzeugt. Diese enthält nur eine Dokumentation für die Dateien <code>controllerKey.js</code> und <code>ControllerKeys.js</code>, da dies die einzigen Dateien ist, die JSDoc-Kommentare enthalten.

	==Fortsetzung des Tutoriums==		==Fortsetzung des Tutoriums==

Kowa: /* Key-Controller einbinden */

2025-04-07T15:23:49Z

Key-Controller einbinden

← Nächstältere Version		Version vom 7. April 2025, 15:23 Uhr
Zeile 219:		Zeile 219:
	<script setup>		<script setup>
	...		...
	import ControllerKey from '@/controller/~~ControllerKey~~'		import ControllerKey from '@/controller/ControllerKeys'

	const		const
	...,		...,
	sayHelloOnEnter = new ControllerKey('Enter', ~~'input_name'~~, sayHello)		sayHelloOnEnter = new ControllerKey('Enter', inputId, sayHello)

	onMounted		onMounted

Kowa: /* ControllerKey: Klasse zum Agieren mit Keyboardevents */

2025-04-07T15:22:47Z

ControllerKey: Klasse zum Agieren mit Keyboardevents

← Nächstältere Version		Version vom 7. April 2025, 15:22 Uhr
Zeile 144:		Zeile 144:

	Hier ist die Frage, ob die zusätzlich Funktionalität wirklich benötigt wird. Falls nein, wäre evtl. eine einfachere Klasse sinnvoll, die nicht mehr Funktionalität als die obige Funktion biete, dafür aber kleiner ist und daher weniger Bandbreite beim Laden durch den Browser verbraucht.		Hier ist die Frage, ob die zusätzlich Funktionalität wirklich benötigt wird. Falls nein, wäre evtl. eine einfachere Klasse sinnvoll, die nicht mehr Funktionalität als die obige Funktion biete, dafür aber kleiner ist und daher weniger Bandbreite beim Laden durch den Browser verbraucht.

			Beachten Sie, dass die Funktion <code>ControllerKey</code> und die Klasse <code>ControllerKeys</code> heißt.
			Eigentlich würde ich die Namens-Konvention bevorzugen, sie gleich zu benennen, und nur durch den Anfangsbuchstaben Funktion und Klasse zu unterscheiden. Ein kleines „c“ steht für ein Funktion, ein großes „C“ für eine Klasse. Aber leider unterscheidet Windows diese beiden Dateinamen nicht. Daher habe ich an
			<code>ControllerKey</code> hinten ein <code>s</code> angefügt: <code>ControllerKeys</code>. Da symbolisiert, dass ein Objekt dieser Klasse mehrere Tasten (Keys) auf einmal überwachen kann.

	<source lang="ecmascript">		<source lang="ecmascript">