HTML5-Tutorium: Canvas: Hello World 03
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 02 kennen.
Ziel: Kompression der Hello-World-Anwendung
Die in Teil 2 erstellten CSS- und JavaScript-Dateien der Hello-World-Anwendung
sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools
YUI Compressor
[1].
Zuvor soll der JavaScript-Code aber noch etwas verbessert werden.
Anwendung HelloWorld03
Neues Projekt anlegen
Legen Sie ein wieder neues statisches Web-Projekt an,
geben Sie ihm den Namen HelloWorldCanvas03
und speichern Sie es auf gewohnte Weise in Ihrem Repository.
Verbesserung der Implementierung von Teil 2
Bevor Sie den CSS- und JavaScript-Code komprimieren, sollten Sie die Implementierung aus Teil 2 des Tutoriums etwas verbessern.
Die HTML-Datei hallo.html
soll JavaScript-frei werden, d.h. HTML-Code und JavaScript-Code sollen noch besser
getrennt werden.
Gehen Sie folgendermaßen vor. Löschen Sie zunächst in der HTML-Datei hallo.html
onload="init()"
aus dembody
-Element sowieonmousedown="sayHello()"
input
-Element vom Typbutton
.
Fügen Sie anschließend in der JavaScript-Datei main.js
folgenden Code vor der Definition der init
-Funktion
ein:
// Führe die init-Funktion aus, nachdem die HTML-Seite vollständig
// vom Browser geladen wurde.
window.onload = init;
Die Funktion window.onload
wird vom Browser, sofern sie definiert wurde, automatisch ausgeführt,
sobald die zugehörige HTML-Seite vollständig geladen wurde.
Zu guter Letzt müssen Sie noch den OK
-Button mit der sayHello
-Methode
verknüpfen, indem Sie folgenden Code in den Rumpf der init
-Funktion einfügen:
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;
Dieser Code kann erst ausgeführt werden, nachdem die HTML-Seite vollständig geladen wurde,
da das HTML-Button-Objekt vorher nicht existiert. Daher muss die init
-Funktion
die Verknüpfung zwischen Button und Code herstellen.
Hätte man den obigen Code vor die init
-Methode
eingefügt, hätte der Browser gleich beim Laden der JavaScript-Datei versucht,
diese Verknüpfung herzustellen. Das wäre aber schief gegangen, das das Button-Objekt
zu diesem Zeitpunk noch nicht existiert.
Wie gewohnt müssen Sie Ihren Code nun testen und – sobald er fehlerfrei läuft – im Repository sichern.
Kompression der JavaScript- und CSS-Dateien
Die komprimierten JavaScript- und CSS-Dateien werden vom
build
-Skript (siehe nächsten Abschnitt) in den Dateien
css/main.css
undjs/main.js
abgelegt. Um diese Dateien in der HTML-Datei hallo.html
zu verwenden, müssen die Zeilen
<!-- Laden aller CSS-Dateien -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Laden aller JavaScript-Dateien -->
<script type="text/javascript" src="js/main.js"></script>
in
<!-- 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>-->
abgeändert werden.
Wenn man nun das Projekt testet, passiert nicht mehr viel, da es die Dateien all.min.css
und
all.mim.js
noch nicht gibt.
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.
Achtung: Das Skript wurde am 16. Oktober 2012 modifiziert. Wenn Sie Eclipse vor diesem Tag installiert haben, müssen Sie
build.xml
hochmals herunterladen und in den Ordner C:\web\eclipse\dropins\yuicompressor
einfügen.
Dieses 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:
-DECLIPSE_HOME=${eclipse_home}
-DSRC_DIR=WebContent
-DDIST_DIR=WebContent
-DYUICOMPRESSOR=yuicompressor-2.4.7
- Name:
Ausführen
(Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)
Anmerkung: Passen Sie die Argumente gegebenenfalls an Ihre Eclipse-Installation an:
- Beim Argument
-DYUICOMPRESSOR
müssen Sie die Versionsnummer der von Ihnen eingesetzen Version des YUI Complressors angeben. - Wenn Sie Apache als Test-Server verwenden, müssen Sie das Apache-Projektverzeichnis als Zielverzeichnis (
DIST_DIR
) wählen:-DDIST_DIR=C:\web\apache\htdocs\${project_name}
(Passen Sie den Apache-Ordner an Ihre Gegebenheit an.)
Künftig kann irgendein Web-Projekt mittels eines Klicks auf den Projektnamen im Projektexplorer selektiert werden.
Mittels eines zweiten Klicks auf das „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ werden für dieses Projekt
die Dateien all.min.css
und all.min.js
erstellt und entweder in die Verzeichnisse
WebContent/css
und WebContent/js
oder
– sofern dies im Build-Skript konfiguriert wurde – ins Projekt-Verzeichnis des Apache-Servers 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 Projektexplorer 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 g_canvas;var g_context;window.onload=init;function init(){g_canvas=document.getElementById("d_canvas");...
Testen und speichern
Nun sollt Ihre Web-Anwendung wieder funktionieren. Testen Sie sie und speichern Sie sie in Ihrem Repository.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Fortsetzung des Tutoriums
Bearbeiten Sie nun Teil 4 des Tutoriums.