HTML5-Tutorium: JavaScript: Hello World 05a - Versionsgeschichte

Kowa am 11. Mai 2024 um 14:18 Uhr

2024-05-11T14:18:39Z

← Nächstältere Version		Version vom 11. Mai 2024, 14:18 Uhr
Zeile 161:		Zeile 161:

	Erstellen Sie die JavaScript-Datei <code>src/js/greet.js</code> und verschieben Sie die		Erstellen Sie die JavaScript-Datei <code>src/js/greet.js</code> und verschieben Sie die
	beiden Funktionen <code>~~goToHello~~</code> und <code>~~goToHelloOnEnter~~</code>		beiden Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code>
	(jeweils samt Funktionsrumpf :-) ) in diese Datei.		(jeweils samt Funktionsrumpf :-) ) in diese Datei.

Zeile 180:		Zeile 180:
	exportiert werden, unter ihrem jeweiligen Namen im Objekt <code>greet</code> gespeichert werden.		exportiert werden, unter ihrem jeweiligen Namen im Objekt <code>greet</code> gespeichert werden.
	(Man könnte auch nur bestimmte Elemente von <code>greet.js</code> importieren, sofern man nicht alle benötigt.) Das heißt, innerhalb der Datei <code>main.js</code> gibt es nun die beiden Funktionen		(Man könnte auch nur bestimmte Elemente von <code>greet.js</code> importieren, sofern man nicht alle benötigt.) Das heißt, innerhalb der Datei <code>main.js</code> gibt es nun die beiden Funktionen
	<code>greet.~~goToHello~~</code> und <code>greet.~~goToHelloOnEnter~~</code>.		<code>greet.sayHello</code> und <code>greet.sayHelloOnEnter</code>.

	Damit die Web-Anwendung wieder funktioniert. müssen Sie also in der Datei <code>main.js</code> vor jede Verwendung dieser beiden Funktionen die Zeichfolge <code>greet.</code> einfügen. (WebStorm zeigt ihnen durch Unterringeln an, dass die Funktionen <code>~~goToHello~~</code> und <code>~~goToHelloOnEnter~~</code> nicht existieren. Wenn Sie jeweils <code>greet.</code> davor einfügen, verschwinden die Fehlermarkierungen.)		Damit die Web-Anwendung wieder funktioniert. müssen Sie also in der Datei <code>main.js</code> vor jede Verwendung dieser beiden Funktionen die Zeichfolge <code>greet.</code> einfügen. (WebStorm zeigt ihnen durch Unterringeln an, dass die Funktionen <code>sayHello</code> und <code>sayHelloOnEnter</code> nicht existieren. Wenn Sie jeweils <code>greet.</code> davor einfügen, verschwinden die Fehlermarkierungen.)

	Fügen Sie jetzt noch das Attribut <code>type="module"</code> in das Script-Element in der		Fügen Sie jetzt noch das Attribut <code>type="module"</code> in das Script-Element in der

Kowa am 10. Mai 2024 um 14:01 Uhr

2024-05-10T14:01:09Z

← Nächstältere Version		Version vom 10. Mai 2024, 14:01 Uhr
Zeile 161:		Zeile 161:

	Erstellen Sie die JavaScript-Datei <code>src/js/greet.js</code> und verschieben Sie die		Erstellen Sie die JavaScript-Datei <code>src/js/greet.js</code> und verschieben Sie die
	beiden Funktionen <code>~~sayHello~~</code> und <code>~~sayHelloOnEnter~~</code>		beiden Funktionen <code>goToHello</code> und <code>goToHelloOnEnter</code>
	(jeweils samt Funktionsrumpf :-) ) in diese Datei.		(jeweils samt Funktionsrumpf :-) ) in diese Datei.

Zeile 180:		Zeile 180:
	exportiert werden, unter ihrem jeweiligen Namen im Objekt <code>greet</code> gespeichert werden.		exportiert werden, unter ihrem jeweiligen Namen im Objekt <code>greet</code> gespeichert werden.
	(Man könnte auch nur bestimmte Elemente von <code>greet.js</code> importieren, sofern man nicht alle benötigt.) Das heißt, innerhalb der Datei <code>main.js</code> gibt es nun die beiden Funktionen		(Man könnte auch nur bestimmte Elemente von <code>greet.js</code> importieren, sofern man nicht alle benötigt.) Das heißt, innerhalb der Datei <code>main.js</code> gibt es nun die beiden Funktionen
	<code>greet.~~sayHello~~</code> und <code>greet.~~sayHelloOnEnter~~</code>.		<code>greet.goToHello</code> und <code>greet.goToHelloOnEnter</code>.

	Damit die Web-Anwendung wieder funktioniert. müssen Sie also in der Datei <code>main.js</code> vor jede Verwendung dieser beiden Funktionen die Zeichfolge <code>greet.</code> einfügen. (WebStorm zeigt ihnen durch Unterringeln an, dass die Funktionen <code>~~sayHello~~</code> und <code>~~sayHelloOnEnter~~</code> nicht existieren. Wenn Sie jeweils <code>greet.</code> davor einfügen, verschwinden die Fehlermarkierungen.)		Damit die Web-Anwendung wieder funktioniert. müssen Sie also in der Datei <code>main.js</code> vor jede Verwendung dieser beiden Funktionen die Zeichfolge <code>greet.</code> einfügen. (WebStorm zeigt ihnen durch Unterringeln an, dass die Funktionen <code>goToHello</code> und <code>goToHelloOnEnter</code> nicht existieren. Wenn Sie jeweils <code>greet.</code> davor einfügen, verschwinden die Fehlermarkierungen.)

	Fügen Sie jetzt noch das Attribut <code>type="module"</code> in das Script-Element in der		Fügen Sie jetzt noch das Attribut <code>type="module"</code> in das Script-Element in der

Kowa am 1. März 2023 um 12:52 Uhr

2023-03-01T12:52:31Z

← Nächstältere Version		Version vom 1. März 2023, 12:52 Uhr
Zeile 31:		Zeile 31:
	Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung\|Grundsatz]]: Verwende so wenig globale Größen wie möglich.		Daher gilt der [[Multimedia-Programmierung: Best Practices#Modularisierung\|Grundsatz]]: Verwende so wenig globale Größen wie möglich.

	==Erstellen eines neuen ~~Projektes~~==		==Erstellen eines neuen Projekts==

	Erstellen Sie ein neues Projekt <code>HelloWorld04</code> als Fork von <code>HelloWorld03</code> (siehe [[HTML5-Tutorium: JavaScript: Hello World 02\|Hello-World-02-Tutorium]]).		Erstellen Sie ein neues Projekt <code>HelloWorld04</code> als Fork von <code>HelloWorld03</code> (siehe [[HTML5-Tutorium: JavaScript: Hello World 02\|Hello-World-02-Tutorium]]).
Zeile 44:		Zeile 44:
	legt man im entsprechenden Ordner geeignete Unterordner an.		legt man im entsprechenden Ordner geeignete Unterordner an.

	Legen Sie im Root-Verzeichnis Ihres ~~Projektes~~ folgende Ordner an (und beantworten Sie die Fragen, ob ein Ordner im Repository gespeichert werden soll, gegebenenfalls mit <code>Yes</code>):		Legen Sie im Root-Verzeichnis Ihres Projekts folgende Ordner an (und beantworten Sie die Fragen, ob ein Ordner im Repository gespeichert werden soll, gegebenenfalls mit <code>Yes</code>):
	* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden. '''Verschieben Sie die Datei <code>web/index.html</code> in diesen Ordner.'''		* <code>src</code>: Der Inhalt dieses Ordners enthält die Ausgangsdateien, die mit Hilfe von Node.js noch transformiert und dann in den Web-Ordner kopiert werden. '''Verschieben Sie die Datei <code>web/index.html</code> in diesen Ordner.'''
	* <code>src/css</code>: Hier werden die eigentlichen CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird nur die Dateien „<code>head.css</code>“ und „<code>main.css</code>“ geben. '''Verschieben Sie die Datei <code>web/main.css</code> in diesen Ordner.'''		* <code>src/css</code>: Hier werden die eigentlichen CSS-Dateien der Web-Anwendung gespeichert, die von der App dynamisch nachgeladen werden sollen. In diesem Ordner könnten zur weiteren Strukturierung Unterordner angelegt werden. Allerdings wird das in dieser Veranstaltung nicht notwendig sein. Es wird nur die Dateien „<code>head.css</code>“ und „<code>main.css</code>“ geben. '''Verschieben Sie die Datei <code>web/main.css</code> in diesen Ordner.'''
Zeile 257:		Zeile 257:
	und <code>web/js/mains.js</code> automatisch generiert werden können.		und <code>web/js/mains.js</code> automatisch generiert werden können.

	Erstellen Sie im Wurzelverzeichnis des ~~Projektes~~ die Datei <code>webpack.config.js</code>		Erstellen Sie im Wurzelverzeichnis des Projekts die Datei <code>webpack.config.js</code>
	(die Sie unbedingt auch in Git speichern sollten). Fügen Sie folgenden Code in diese Datei ein.		(die Sie unbedingt auch in Git speichern sollten). Fügen Sie folgenden Code in diese Datei ein.

Kowa: Die Seite wurde neu angelegt: „{{In Bearbeitung}} {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/helloworld/WK_He…“

2021-03-29T08:38:15Z

Die Seite wurde neu angelegt: „{{In Bearbeitung}} {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/helloworld/WK_He…“

Änderungen zeigen