HTML5-Tutorium: Canvas: Hello World 04
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
Ergebnis: hallo.html
(SVN-Repository)
Brwoser-Unhabhängigkeit mit jQuery
Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab. Daher ist es fast immer sinnvoll, JavaScript-Biliotheken 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.
Musterlösung herunterladen
(Dieser Punkt kann übersprungen werden.)
Laden Sie die Musterlösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_03/
auf bekannte Weise in Eclipse.
Neues Projekt anlegen
Legen Sie ein neues Projekt an
Datei
→Neu
→Statisches Web-Projekt
- Project name:
HelloWorldCanvas03
→Fertigstellen
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.
Nachdem Sie diese Version getestet haben, sollten Sie sie zunächst in Ihrem Repository speichern:
Projektexplorer
: Rechtsklick aufHelloWorldCanvas04
→Team
→Projekt gemeinsam nutzen
SVN
→Weiter
- Url:
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT
(ACCOUNT
durch eigenen RZ-Account ersetzen) →Weiter
- Use specified folder name:
mmprog/tutorium/HelloWorldCanvas04
→Fertigstellen
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas04
→Team
→Commit
- Comment:
Neues Projekt angelegt.
OK
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 aufAussgeschlossen: (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, gebervt.
Build-Skript ausführen
Bei der Installation von Eclipse sollten Sie den „YUI Compressor“ installieren.
Aufgabe dieses Tools ist es, die beiden Dateien all.min.css
und
all.mim.js
zu erstellen. Sie enthalten
jeweils den Code aller CSS- bzw. JavaScript-Dateien, die sich im Ordner css
bzw. js
befinden.
Leerzeichen, Kommentare und andere überflüssige Informationen werden entfernt um Platz zu sparen und damit die Downloadzeiten zu reduzieren.
Man kann allerdings erzwingen, dass bestimmte Kommentare (z.B. Lizenzinformationen) erhalten bleiben.[2]
Zusammen mit dem YUI Compressor wurde die Datei build.xml
installiert. Diese Skript muss zunächst in Eclipse integriert und anschließend ausgeführt werden:
- Projektexplorer: Selektion des aktuellen Projektes
- Klick auf den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ →
Externe Tools Konfigurationen
Ant-Erstellung
selektieren- Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)
- Name:
Compress
- Erstellungsdatei:
D:\web\eclipse\dropins\yuicompressor\build.xml
(das ist das zuvor erstellte Build-Skript, passen Sie gegebenenfalls den Ordner an) - Basisverzeichnis:
${project_loc}
- Argumente:
-DPROJECT=${project_name}
- Name:
Ausführen
(Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)
Künftig kann irgendein Projekt selektiert werden. Mittels eines Klicks
auf das „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ werden für diese Projekt
die Dateien all.min.css
und all.min.js
erstellt und die
Projektdateien (sofern dies im Build-Skript konfiguriert wurde) zum externen Server kopiert.
Wenn man mehrere externe Tools verwendet, muss man den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“
klicken und dann das Tool Compress
klicken (nachdem man zuvor im Prjektexplorer ein Projekt selektiert hat).
Ergebnis des Build-Skripts
Nach Ausführen des Build-Skripts sollten die Dateien all.min.css
und all.min.js
existieren und damit die Datei
hello.html
ausgeführt werden können.
all.min.css
#d_name{width:185px}#d_canvas{margin-top:10px;border-color:#bbb;border-width:2px;border-style:solid}
all.min.js
"use strict";var v_canvas;var v_context;window.onload=init;function init(){v_canvas=document.getElementById("d_canvas");...
Testen und speichern
Nun sollt Ihre Web-Anwendung wieder funktionieren. Testen Sie Sie und speichern Sie sie in Imrem Repository.
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas03
→Team
→Commit
- Comment:
CSS- und JS-Dateien komprimiert.
OK
Konfiguration des Build-Skripts
Abhänging von Ihrer Test-Umgebung müssen Sie die Zeile
...
<property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
...
der Datei D:\web\eclipse\dropins\yuicompressor\build.xml
, die Sie zusammen mit dem YUI Compressor installiert haben,
eventuell anpassen.
Wenn Sie einen externen Server (wie beispielsweise einen Apache) installiert haben, dann können Sie auch die Zeile
<property name="DIST_DIR" value="D:/web/apache/htdocs/${PROJECT}" description="Output folder for build targets" />
verwenden. Diese bewirkt, dass der Web-Auftritt samt komprimierten Dateien all.min.css
und all.min.js
direkt in den Web-Ordner des externen Apache-Servers exportiert werden. Den Dokument-Root-Pfad müssen Sie wieder an Ihre Gegebenheiten anpassen.
Der Vorteil der zweiten Lösung ist, dass die Änderung nach Ausführung der Build-Datei sofort auf dem externen Server verfügbar sind.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)