HTML5-Tutorium: Canvas: Hello World 04: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(21 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}} | {{HTML5-Tutorium:Canvas:HelloWorld:Menü}} | ||
''' | '''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04/WebContent/hallo.html <code>hallo.html</code>] | ||
([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]) | ||
=Browser-Unhabhängigkeit | ==Voraussetzung== | ||
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 03]] kennen. | |||
==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- | Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist, | ||
diese Unterschiede auszugleichen. Daneben stellen sie im Allgemeinen auch noch viele sehr | diese Unterschiede auszugleichen. Daneben stellen sie im Allgemeinen auch noch viele sehr | ||
nützliche JavaScript-Erweiterungen zur Verfügung. | nützliche JavaScript-Erweiterungen zur Verfügung. | ||
Zeile 13: | 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>“== | ||
===Neues Projekt anlegen=== | |||
==Neues Projekt anlegen== | |||
Legen Sie ein neues | Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldCanvas04</code> an. | ||
Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | |||
===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 47: | 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 63: | 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> | |||
* Ordnername: <code>lib</code> → <code>Fertigstellen</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>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 <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> | |||
===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 82: | 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 | 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 102: | Zeile 91: | ||
"use strict"; /* Warne vor unsauberem JavaScript-Code! */ | "use strict"; /* Warne vor unsauberem JavaScript-Code! */ | ||
const CANVAS_WIDTH = 300, | |||
CANVAS_HEIGHT = 27, | |||
HELLO_POS_X = 5, | |||
HELLO_POS_Y = 20, | |||
HELLO_FONT_FAMILY = "'Times New Roman', Times, serif", | |||
HELLO_FONT_SIZE = 20, | |||
HELLO_FONT_WEIGHT = "bold"; | |||
</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: | ||
Zeile 131: | Zeile 118: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
g_canvas = document.getElementById("d_canvas"); | |||
g_canvas.width = 300; | |||
g_canvas.height = 27; | |||
g_context = g_canvas.getContext("2d"); | |||
</source> | </source> | ||
Zeile 141: | Zeile 128: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
g_canvas = $("#d_canvas") | |||
.attr("width", CANVAS_WIDTH) | .attr("width", CANVAS_WIDTH) | ||
.attr("height", CANVAS_HEIGHT) | .attr("height", CANVAS_HEIGHT) | ||
Zeile 147: | Zeile 134: | ||
// aus dem jQuery-Objekt zu extrahieren | // aus dem jQuery-Objekt zu extrahieren | ||
; | ; | ||
g_context = g_canvas.getContext("2d"); | |||
</source> | </source> | ||
Zeile 168: | Zeile 155: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // clear canvas | |||
g_context.font = HELLO_FONT_WEIGHT | |||
+ " " + HELLO_FONT_SIZE + "px" | + " " + HELLO_FONT_SIZE + "px" | ||
+ " " + HELLO_FONT_FAMILY; | + " " + HELLO_FONT_FAMILY; | ||
g_context.fillText("Hallo " + $("#d_name").val() + "!", | |||
HELLO_POS_X, HELLO_POS_Y | HELLO_POS_X, HELLO_POS_Y | ||
); | ); | ||
</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. | ||
'''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> | '''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== | ||
<references/> | <references/> | ||
<ol> | <ol> | ||
<li value=" | <li value="2"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | ||
</ol> | </ol> | ||
==Fortsetzung des Tutoriums== | |||
Sie sollten nun entweder das [[HTML-Tutorium: SVG: Hello World|Hello-World-SVG-Tutorium]] | |||
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> |
Version vom 23. September 2016, 13:43 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:
Korrektheit: 4 (großteils überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 4 (sehr gut) |
HTML-Tutorium Hello World: JavaScript | Canvas | SVG
Musterlösung: hallo.html
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte des Tutoriums HTML5-Tutorium: Canvas: Hello World 03 kennen.
Ziel: Browser-Unhabhängigkeit mittels jQuery
Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab. Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist, diese Unterschiede auszugleichen. Daneben stellen sie im Allgemeinen auch noch viele sehr nützliche JavaScript-Erweiterungen zur Verfügung.
In diesem Tutorium soll die JavaScript-Bibliothek jQuery
[1] eingesetzt werden.
Außerdem sollen alle Konstanten aus der JavaScript-Datei main.js
in eine eigene Datei CONSTANT.js
ausgelagert werden.
Dies hat den Vorteil, dass die Konfiguration des Projektes (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.
Anwendung „HelloWorldCanvas04
“
Neues Projekt anlegen
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen HelloWorldCanvas04
an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Daten übernehmen und modifizieren
Legen Sie die Ordner js
und css
an und kopieren Sie die Dateien main.js
, main.css
und
hello.html
aus HelloWorldCanvas03
in die entsprechenden Ordner WebContent
des neuen Projektes.
Passen Sie das title
-Element in der Datei hello.html
an.
Ändern Sie den Haeder der HTML-Datei hallo.html
so ba,
dass Sie die unkomprimierten CSS- und JavaScript-Dateien einbinden.
<!-- Laden aller CSS-Dateien -->
<!--<link rel="stylesheet" href="css/all.min.css" />-->
<link rel="stylesheet" href="css/main.css" />
<!-- Laden aller JavaScript-Dateien -->
<!--<script type="text/javascript" src="js/all.min.js"></script>-->
<script type="text/javascript" src="js/main.js" ></script>
Anderenfalls müssten Sie vor jedem Test zunächst das Komprimierungsskript build.xml
ausführen. Dies vergisst man recht schnell und testet dann eine alte Version, bei der
aktuelle Änderungen an den CSS- und JavaScript-Dateien nicht berücksichtigt werden.
Einbinden von jQuery
Laden Sie die komprimierte Version von jQuery
herunter
und speichern Sie diese unter dem Namen jquery.min.js
irgendwo auf Ihrer
Festplatte. Binden Sie nun jQuery
in Ihr Projekt ein:
Projektexplorer
: Rechtsklick aufWebContent
im OrdnerHelloWorldCanvas04
→ Klick aufNeu
→ Klick aufOrdner
- Ordnername:
lib
→Fertigstellen
- Rechtsklick auf den neu erstellen Ordner
lib
→ Klick aufImportieren
Allgemein
aufklappen → Klick aufDateisystem
→ Klick aufWeiter
→ Aus Verzeichnis:<Verzeichnis, in dem jQuery liegt>
→ Häckchen vorjquery.min.js
→Fertigstellen
(Beachten Sie, im Projektexplorer wird für ihr Projekt nun anagezeigt, dass es nicht frei von Syntaxfehlern sein soll.)Projektexplorer
: Rechtsklick aufHelloWorldCanvas04
→ Klick aufEigenschaften
→ Klick aufJavaScript
aufklappen → Klick aufIncludePath
- Klick auf Reiter
Quelle
→HelloWorldCanvas04/WebContent
aufklappen → Klick aufAusgeschlossen: (Kein)
→ Klick aufBearbeiten ...
- Klick auf
Hinzufügen
unter „Ausschlussmuster“ (= zweiter Buton mit diesem Label!) → Eingabe vonlib/**
ins Textfeld OK
→Fertigstellen
→OK
Anmerkungen
Externe, d.h. nicht von Ihnen geschrieben JavaScript-Bibliotheken, sollten nicht im Ordner js
liegen,
da diese im allgemeinen schon komprimiert wurden und vom build
nicht noch einmal komprimiert werden sollten.
Daher wurde der neue Ordner lib
angelegt.
Für diesen Ordner wurde außerdem das Syntax-Checking deaktiviert,
da bei komprimierten JavaScript-Bibliotheken von Eclipse häufig Syntaxfehler gemeldet werden, obwohl überhaupt keine
Fehler darinnen enthalten sind. Bei jquery.min.js
ist dies beispielsweise der Fall.
Nach dem Ausschluss des Ordners lib
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.
JavaScript-Code auf jQuery
umstellen
Bevor Sie jqeury.min.js
verwenden können, müssen Sie diese Datei in der HTML-Datei hallo.html
laden.
Erweitern Sie also den entsprechenden Abschnitt im HTML-Header:
<!-- Laden aller JavaScript-Dateien -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/all.min.js" ></script>-->
<script type="text/javascript" src="js/CONSTANT.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
Die JavaScript-Datei CONSTANT.js
enthält folgende Konstanten-Definitionen:
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
const CANVAS_WIDTH = 300,
CANVAS_HEIGHT = 27,
HELLO_POS_X = 5,
HELLO_POS_Y = 20,
HELLO_FONT_FAMILY = "'Times New Roman', Times, serif",
HELLO_FONT_SIZE = 20,
HELLO_FONT_WEIGHT = "bold";
Anschließend können Sie die JavaScript-Datei main.js
anpassen:
window.onload = init;
wird durch
$(document).ready(init);
ersetzt.
In der init
-Funktion werden folgende Anpassungen vorgenommen:
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;
g_context = g_canvas.getContext("2d");
wird durch
g_canvas = $("#d_canvas")
.attr("width", CANVAS_WIDTH)
.attr("height", CANVAS_HEIGHT)
[0] // Array-Zugriff um das Raw-Canvas-Objekt
// aus dem jQuery-Objekt zu extrahieren
;
g_context = g_canvas.getContext("2d");
und
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;
durch
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
$("#d_button_ok").click(sayHello);
Abschließend wird der vollständige Inhalt der sayHello
-Funktion durch
folgenden Code ersetzt:
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // clear canvas
g_context.font = HELLO_FONT_WEIGHT
+ " " + HELLO_FONT_SIZE + "px"
+ " " + HELLO_FONT_FAMILY;
g_context.fillText("Hallo " + $("#d_name").val() + "!",
HELLO_POS_X, HELLO_POS_Y
);
Testen und speichern
Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.
Wenn Sie den Ordner lib
nicht von der Syntaxcheck-Behandlung ausgenommen haben, poppt eine Warnung auf, dass Ihr Code Fehler enthält. Wenn nur jquery.js
oder
jquery.min.js
als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Fortsetzung des Tutoriums
Sie sollten nun entweder das Hello-World-SVG-Tutorium oder das Minipong-Canvas-Tutorium bearbeiten.