HTML5-Tutorium: Canvas: Hello World 04 - Versionsgeschichte

Kowa am 1. März 2023 um 13:18 Uhr

2023-03-01T13:18:28Z

← Nächstältere Version		Version vom 1. März 2023, 13:18 Uhr
Zeile 26:		Zeile 26:
	===Daten übernehmen und modifizieren===		===Daten übernehmen und modifizieren===
	Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und		Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und
	<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen ~~Projektes~~.		<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen Projekts.
	Passen Sie das <code>title</code>-Element in der Datei <code>hello.html</code> an.		Passen Sie das <code>title</code>-Element in der Datei <code>hello.html</code> an.

Zeile 71:		Zeile 71:
	Fehler darinnen enthalten sind. Bei <code>jquery.min.js</code> ist dies beispielsweise der Fall.		Fehler darinnen enthalten sind. Bei <code>jquery.min.js</code> ist dies beispielsweise der Fall.
	Nach dem Ausschluss des Ordners <code>lib</code> vom Syntaxchecking, sind die Fehlermarkierungen im Projektexplorer wieder verschwunden.		Nach dem Ausschluss des Ordners <code>lib</code> vom Syntaxchecking, sind die Fehlermarkierungen im Projektexplorer wieder verschwunden.
	Außerdem wird der Benutzer beim Speichern des ~~Projektes~~ im Repositorys nicht dauern mit einer Warnmeldung, dass im Projekt noch Fehler enthalten seien, genervt.		Außerdem wird der Benutzer beim Speichern des Projekts im Repositorys nicht dauern mit einer Warnmeldung, dass im Projekt noch Fehler enthalten seien, genervt.

	===JavaScript-Code auf <code>jQuery</code> umstellen===		===JavaScript-Code auf <code>jQuery</code> umstellen===

Kowa am 1. März 2023 um 13:14 Uhr

2023-03-01T13:14:48Z

← Nächstältere Version		Version vom 1. März 2023, 13:14 Uhr
Zeile 15:		Zeile 15:
	In diesem Tutorium soll die JavaScript-Bibliothek <code>jQuery</code><ref>[http://jquery.com/ jQuery]</ref> eingesetzt werden.		In diesem Tutorium soll die JavaScript-Bibliothek <code>jQuery</code><ref>[http://jquery.com/ jQuery]</ref> eingesetzt werden.
	Außerdem sollen alle Konstanten aus der JavaScript-Datei <code>main.js</code> in eine eigene Datei <code>CONSTANT.js</code> ausgelagert werden.		Außerdem sollen alle Konstanten aus der JavaScript-Datei <code>main.js</code> in eine eigene Datei <code>CONSTANT.js</code> ausgelagert werden.
	Dies hat den Vorteil, dass die Konfiguration des ~~Projektes~~ (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.		Dies hat den Vorteil, dass die Konfiguration des Projekts (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.

	==Anwendung „<code>HelloWorldCanvas04</code>“==		==Anwendung „<code>HelloWorldCanvas04</code>“==

Kowa am 23. September 2016 um 12:43 Uhr

2016-09-23T12:43:49Z

← Nächstältere Version		Version vom 23. September 2016, 12:43 Uhr
Zeile 3:		Zeile 3:
	([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04 SVN-Repository])		([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04 SVN-Repository])

	=Voraussetzung=		==Voraussetzung==

	Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 03]] kennen.		Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 03]] kennen.

	=Ziel: Browser-Unhabhängigkeit mittels jQuery=		==Ziel: Browser-Unhabhängigkeit mittels jQuery==
	Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab.		Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab.
	Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist,		Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist,
Zeile 17:		Zeile 17:
	Dies hat den Vorteil, dass die Konfiguration des Projektes (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.		Dies hat den Vorteil, dass die Konfiguration des Projektes (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.

	=Anwendung „<code>HelloWorldCanvas04</code>“=		==Anwendung „<code>HelloWorldCanvas04</code>“==
	==Neues Projekt anlegen==		===Neues Projekt anlegen===

	Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas04</code> an.		Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas04</code> an.
Zeile 24:		Zeile 24:
	Speichern Sie dieses Projekt wie üblich in Ihrem Repository.		Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

	==Daten übernehmen und modifizieren==		===Daten übernehmen und modifizieren===
	Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und		Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und
	<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen Projektes.		<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen Projektes.
Zeile 46:		Zeile 46:
	aktuelle Änderungen an den CSS- und JavaScript-Dateien nicht berücksichtigt werden.		aktuelle Änderungen an den CSS- und JavaScript-Dateien nicht berücksichtigt werden.

	==Einbinden von jQuery==		===Einbinden von jQuery===

	Laden Sie die [http://jquery.com/ komprimierte Version von <code>jQuery</code>] herunter		Laden Sie die [http://jquery.com/ komprimierte Version von <code>jQuery</code>] herunter
Zeile 61:		Zeile 61:
	* <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>		* <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>

	===Anmerkungen===		====Anmerkungen====

	Externe, d.h. nicht von Ihnen geschrieben JavaScript-Bibliotheken, sollten nicht im Ordner <code>js</code> liegen,		Externe, d.h. nicht von Ihnen geschrieben JavaScript-Bibliotheken, sollten nicht im Ordner <code>js</code> liegen,
Zeile 73:		Zeile 73:
	Außerdem wird der Benutzer beim Speichern des Projektes im Repositorys nicht dauern mit einer Warnmeldung, dass im Projekt noch Fehler enthalten seien, genervt.		Außerdem wird der Benutzer beim Speichern des Projektes im Repositorys nicht dauern mit einer Warnmeldung, dass im Projekt noch Fehler enthalten seien, genervt.

	==JavaScript-Code auf <code>jQuery</code> umstellen==		===JavaScript-Code auf <code>jQuery</code> umstellen===

	Bevor Sie <code>jqeury.min.js</code> verwenden können, müssen Sie diese Datei in der HTML-Datei <code>hallo.html</code> laden.		Bevor Sie <code>jqeury.min.js</code> verwenden können, müssen Sie diese Datei in der HTML-Datei <code>hallo.html</code> laden.
Zeile 164:		Zeile 164:
	</source>		</source>

	==Testen und speichern==		===Testen und speichern===

	Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.		Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.
Zeile 171:		Zeile 171:
	<code>jquery.min.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''		<code>jquery.min.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''

	=Quellen=		==Quellen==
	<references/>		<references/>
	<ol>		<ol>
Zeile 177:		Zeile 177:
	</ol>		</ol>

	=Fortsetzung des Tutoriums=		==Fortsetzung des Tutoriums==
	Sie sollten nun entweder das [[HTML-Tutorium: SVG: Hello World\|Hello-World-SVG-Tutorium]]		Sie sollten nun entweder das [[HTML-Tutorium: SVG: Hello World\|Hello-World-SVG-Tutorium]]
	oder das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten.		oder das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten.

Kowa: /* Testen und speichern */

2013-10-23T13:28:05Z

Testen und speichern

← Nächstältere Version		Version vom 23. Oktober 2013, 13:28 Uhr
Zeile 168:		Zeile 168:
	Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.		Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.

	'''Wenn Sie den Ordner <code>lib</code> nicht von der Syntaxcheck-Behandlung ausgenommen haben, poppt eine Warnung auf, dass Ihr Code Fehler enthält. Wenn nur <code>~~raphael~~.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''		'''Wenn Sie den Ordner <code>lib</code> nicht von der Syntaxcheck-Behandlung ausgenommen haben, poppt eine Warnung auf, dass Ihr Code Fehler enthält. Wenn nur <code>jquery.js</code> oder
			<code>jquery.min.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''

	=Quellen=		=Quellen=

Kowa: /* JavaScript-Code auf jQuery umstellen */

2013-10-23T13:26:39Z

JavaScript-Code auf jQuery umstellen

← Nächstältere Version		Version vom 23. Oktober 2013, 13:26 Uhr
Zeile 91:		Zeile 91:
	"use strict"; /* Warne vor unsauberem JavaScript-Code! */		"use strict"; /* Warne vor unsauberem JavaScript-Code! */

	~~// Anstelle von "var" sollte "~~const~~" verwendet werden.~~		const CANVAS_WIDTH = 300,
	~~// Dies wird aber vom Internet Explorer nicht unterstützt.~~		CANVAS_HEIGHT = 27,

	~~var CANVAS_WIDTH = 300;~~		HELLO_POS_X = 5,
	~~var CANVAS_HEIGHT = 27;~~		HELLO_POS_Y = 20,
			HELLO_FONT_FAMILY = "'Times New Roman', Times, serif",
	~~var~~ HELLO_POS_X = 5;		HELLO_FONT_SIZE = 20,
	~~var~~ HELLO_POS_Y = 20;		HELLO_FONT_WEIGHT = "bold";
	~~var~~ HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";
	~~var~~ HELLO_FONT_SIZE = 20;
	~~var~~ HELLO_FONT_WEIGHT = "bold";
	~~var HELLO_FONT_ANCHOR = "start~~";
	</source>		</source>

Kowa: /* Einbinden von jQuery */

2013-10-04T11:18:26Z

Einbinden von jQuery

← Nächstältere Version		Version vom 4. Oktober 2013, 11:18 Uhr
Zeile 52:		Zeile 52:
	Festplatte. Binden Sie nun <code>jQuery</code> in Ihr Projekt ein:		Festplatte. Binden Sie nun <code>jQuery</code> in Ihr Projekt ein:

	# <code>Projektexplorer</code>: Rechtsklick auf <code>WebContent</code> im Ordner <code>HelloWorldCanvas04</code> → Klick auf <code>Neu</code> → Klick auf <code>Ordner</code>		* <code>Projektexplorer</code>: Rechtsklick auf <code>WebContent</code> im Ordner <code>HelloWorldCanvas04</code> → Klick auf <code>Neu</code> → Klick auf <code>Ordner</code>
	# Ordnername: <code>lib</code> → <code>Fertigstellen</code>		* Ordnername: <code>lib</code> → <code>Fertigstellen</code>
	# Rechtsklick auf den neu erstellen Ordner <code>lib</code> → Klick auf <code>Importieren</code>		* Rechtsklick auf den neu erstellen Ordner <code>lib</code> → Klick auf <code>Importieren</code>
	# <code>Allgemein</code> aufklappen → Klick auf <code>Dateisystem</code> → Klick auf <code>Weiter</code> → Aus Verzeichnis: <code><Verzeichnis, in dem jQuery liegt></code> → Häckchen vor <code>jquery.min.js</code> → <code>Fertigstellen</code> (Beachten Sie, im Projektexplorer wird für ihr Projekt nun anagezeigt, dass es nicht frei von Syntaxfehlern sein soll.)		* <code>Allgemein</code> aufklappen → Klick auf <code>Dateisystem</code> → Klick auf <code>Weiter</code> → Aus Verzeichnis: <code><Verzeichnis, in dem jQuery liegt></code> → Häckchen vor <code>jquery.min.js</code> → <code>Fertigstellen</code> (Beachten Sie, im Projektexplorer wird für ihr Projekt nun anagezeigt, dass es nicht frei von Syntaxfehlern sein soll.)
	# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas04</code> → Klick auf <code>Eigenschaften</code> → Klick auf <code>JavaScript</code> aufklappen → Klick auf <code>IncludePath</code>		* <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas04</code> → Klick auf <code>Eigenschaften</code> → Klick auf <code>JavaScript</code> aufklappen → Klick auf <code>IncludePath</code>
	# Klick auf Reiter <code>Quelle</code> → <code>HelloWorldCanvas04/WebContent</code> aufklappen → Klick auf <code>Ausgeschlossen: (Kein)</code> → Klick auf <code>Bearbeiten ...</code>		* Klick auf Reiter <code>Quelle</code> → <code>HelloWorldCanvas04/WebContent</code> aufklappen → Klick auf <code>Ausgeschlossen: (Kein)</code> → Klick auf <code>Bearbeiten ...</code>
	# Klick auf <code>Hinzufügen</code> '''unter „Ausschlussmuster“''' (= '''zweiter''' Buton mit diesem Label!) → Eingabe von <code>lib/**</code> ins Textfeld		* Klick auf <code>Hinzufügen</code> '''unter „Ausschlussmuster“''' (= '''zweiter''' Buton mit diesem Label!) → Eingabe von <code>lib/**</code> ins Textfeld
	# <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>		* <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>

	===Anmerkungen===		===Anmerkungen===

Kowa: /* Quellen */

2013-10-04T11:18:05Z

Quellen

← Nächstältere Version		Version vom 4. Oktober 2013, 11:18 Uhr
Zeile 177:		Zeile 177:
	<references/>		<references/>
	<ol>		<ol>
	<li value="3"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>		<li value="2"> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
	</ol>		</ol>

Kowa: /* JavaScript-Code auf jQuery umstellen */

2012-11-13T11:20:04Z

JavaScript-Code auf jQuery umstellen

← Nächstältere Version		Version vom 13. November 2012, 11:20 Uhr
Zeile 101:		Zeile 101:
	var HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";		var HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";
	var HELLO_FONT_SIZE = 20;		var HELLO_FONT_SIZE = 20;
	var HELLO_FONT_WEIGHT = "bold";</source>		var HELLO_FONT_WEIGHT = "bold";
			var HELLO_FONT_ANCHOR = "start";
			</source>

	Anschließend können Sie die JavaScript-Datei <code>main.js</code> anpassen:		Anschließend können Sie die JavaScript-Datei <code>main.js</code> anpassen:

Kowa: /* Neues Projekt anlegen */

2012-11-05T13:54:14Z

Neues Projekt anlegen

← Nächstältere Version		Version vom 5. November 2012, 13:54 Uhr
Zeile 20:		Zeile 20:
	==Neues Projekt anlegen==		==Neues Projekt anlegen==

	Legen Sie ein neues ~~Statisches~~ Web-~~Projekt~~ mit dem Namen <code>HelloWorldCanvas04</code> an.		Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas04</code> an.

	Speichern Sie dieses Projekt wie üblich in Ihrem Repository.		Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Kowa: /* Fortsetzung des Tutoriums */

2012-10-25T06:56:50Z

Fortsetzung des Tutoriums

← Nächstältere Version		Version vom 25. Oktober 2012, 06:56 Uhr
Zeile 179:		Zeile 179:

	=Fortsetzung des Tutoriums=		=Fortsetzung des Tutoriums=
	Sie ~~können~~ nun entweder das [[HTML-Tutorium: SVG: Hello World\|Hello-World-SVG-Tutorium]]		Sie sollten nun entweder das [[HTML-Tutorium: SVG: Hello World\|Hello-World-SVG-Tutorium]]
	oder das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten.		oder das [[HTML5-Tutorium: Canvas: MiniPong\|Minipong-Canvas-Tutorium]] bearbeiten.

	[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]		[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
	</noinclude>		</noinclude>