HTML5-Tutorium: Canvas: Hello World 02

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

Musterlösung: index.html (SVN-Repository)

Use Cases

Wie im dritten und vierten Teil des Hello-World-Tutoriums soll die ganze der Name des Benutzers erfragt werden, bevor er persönlich begrüßt wird.

Die Ausgabe erfolgt wie im ersten Teil des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.

Die Anwendung soll wie „App5“ des vierten Teils des Hello-World-Tutoriums aufgebaut sein:

• Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.
• Die Anwendung wird mit Hilfe von RequireJS modularisiert.

Erstellen eines neuen Projektes

Erstellen Sie ein neues Projekt „HelloWorldCanvas02“. Kopieren Sie anschließend Datei „index5.html“ sowie die Ordner „web/css“, „web/init“, „web/js/app5“ , „web/js/lib/require“ und die Datei „web/js/main5.js“ aus dem vierten Teil des Tutoriums zusammen mit den darin enthaltenen Dateien in Ihr Projekt.

Nehmen Sie folgende Umbenennungen vor (smartes Refactoring):

• index5.html → index.html
• js/main5.js → js/main.js
• js/app5 → js/app

Vergessen Sie nicht, dass Sie in der Datei „index.html“ den Befehl

<script data-main="js/main5" src="js/lib/require/require.js"></script>

durch

<script data-main="js/main" src="js/lib/require/require.js"></script>

ersetzen müssen. Und in der Konfigurationsanweisung von RequireJS ( Datei „main.js“) müssen sie app: 'app5' entweder entfernen oder durch app: 'app' ersetzen. Den Eintrag wk: 'lib/wk_amd' benötigen Sie auch nicht mehr (außer wenn Sie meine JSON-Bibliothek an Stelle der des RequireJS-JSON-Plugins verwenden möchten).

Passen Sie zu guter Letzt den Titel in der HTML-Datei „index.html“ an.

Wenn Sie alles richtig gemacht haben, sollte jetzt der Code der ursprünglichen App5-Anwendung wieder laufen.

Jetzt müssen Sie nur noch wenige Veränderungen am Code vornehmen, um die Ausgabe auf eine Canvas-Ausgabe umzustellen.

index.html

Ersetzen Sie Hello-Section-Elemente Ihrer HTML-Datei durch folgende Section-Element:

<section id="section1_hello" class="hidden">
  <canvas id="canvas1">
    Unfortunately, your browser doesn't support HTML5!
  </canvas>
</section>

und

<section id="section2_hello" class="hidden">
  <canvas id="canvas2">
  </canvas>
</section>

Dieser Schritt war in ähnlicher Form schon im ersten Teil des Canvas-Tutoriums notwendig.

hello_de.json und hello_en.json

Die Initialisierungs-Dateien „hello_de.json“ und „hello_en.json“ müssen an die neuen Gegebenheiten angepasst werden. Elemente, die es nicht mehr gibt – "hello" und "welcome" –, müssen entfernt werden, neue Elemente – "canvas" – müssen eingefügt werden und Initialwerte für da Canvas-Element (Höhe, Breit, Fontangaben etc.) müssen ergänzt werden.

Beispielsweise sieht die Datei „hello_de.json“ nun folgendermaßen aus:

{
  "HTMLElements":
  {
    "sectionForm":    "section2_form",
    "headingForm":    "heading2_form",
    "inputNameLabel": "label2_name",
    "inputName":      "input2_name",
    "buttonReset":    "button2_reset",
    "buttonSubmit":   "button2_submit",
    "sectionHello":   "section2_hello",
    "canvas":         "canvas2"
  },

  "text":
  {
    "title":   "Hello, Stranger!",
    "query":   "What's your name?",
    "reset":   "Reset",
    "submit":  "Say hello",
    "hello":   "Hello, $1!"
  },

  "css":
  {
    "hidden": "hidden"
  },

  "canvas":
  {
    "width":  500,
    "height":  60,
    "font":   "bold 40px \"Times New Roman\", Times, serif",
    "hello_x": 35,
    "hello_y": 43
  }
}

greet.js

Zu guter Letzt muss noch die Methode „sayHello“ in der Datei „greet.js“ angepasst werden. Diese Methode soll nicht mehr den DOM-Baum manipulieren, sondern den Gruß in das Ihr übermittelte Canvas-Element schreiben. Alle übrigen Methoden werden nicht verändert.

Die Methode „sayHello funktioniert im Prinzip genauso wie die Initialisierungsfunktion im ersten Teil des Tutoriums. Nur werden jetzt keine konstanten Werte mehr zum Initialisieren des Canvas verwendet, sondern Werte, die im Parameter „p_init“ übermittelt wurden:

l_this.sayHello =
  function ()
  {
    var l_init_elements = p_init.HTMLElements,
        l_init_text     = p_init.text,
        l_init_hidden   = p_init.css.hidden,
        l_init_canvas   = p_init.canvas,
        l_name          = p_document.getElementById(l_init_elements.inputName).value,
        l_canvas        = p_document.getElementById(l_init_elements.canvas),
        l_context       = l_canvas.getContext('2d');

    l_canvas.width  = l_init_canvas.width;
    l_canvas.height = l_init_canvas.height;
    l_context.font  = l_init_canvas.font;

    l_context.fillText(l_init_text.hello.replace('$1', l_name), l_init_canvas.hello_x, l_init_canvas.hello_y);

    p_document.getElementById(l_init_elements.sectionHello).classList.remove(l_init_hidden);
    p_document.getElementById(l_init_elements.sectionForm).classList.add(l_init_hidden);
  };

Quellen

2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)