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

Inhalt | Teil 1 | Teil 2

Ergebnis: hallo.html (SVN-Repository)

Browser-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 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.

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

1. Datei → Neu → Statisches Web-Projekt
2. 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:

1. Projektexplorer: Rechtsklick auf HelloWorldCanvas04 → Team → Projekt gemeinsam nutzen
2. SVN → Weiter
3. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
4. Use specified folder name: mmprog/tutorium/HelloWorldCanvas04 → Fertigstellen
5. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas04 → Team → Commit
6. Comment: Neues Projekt angelegt.
7. 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:

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

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! */
 
// Anstelle von "var" sollte "const" verwendet werden. 
// Dies wird aber vom Internet Explorer nicht unterstützt.

var CANVAS_WIDTH  = 300; 
var CANVAS_HEIGHT =  27; 

var HELLO_POS_X       =  5;
var HELLO_POS_Y       = 20;
var HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";
var HELLO_FONT_SIZE   = 20;
var 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 raphael.js als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.

Quellen

3. 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 entweder das Hello-Wolrd-SVG-Tutorium oder das Minipong-Canvas-Tutorium.