HTML5-Tutorium: Canvas: Hello World 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(35 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}} | {{HTML5-Tutorium:Canvas:HelloWorld:Menü}} | ||
''' | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/web/index.html <code>index.html</code>] | ||
([ | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository]) | ||
= | ==Use Cases== | ||
Wie im [[HTML5-Tutorium: JavaScript: Hello World 03|dritten]] und | |||
[[HTML5-Tutorium: JavaScript: Hello World 04|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 [[HTML5-Tutorium: Canvas: Hello World 01|ersten Teil des '''Canvas'''-Tutoriums]] mit Hilfe eines Canvas-Elements. | |||
Die Anwendung soll wie „App5“ des [[HTML5-Tutorium: JavaScript: Hello World 04|vierten Teil]]s 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 „<code>HelloWorldCanvas02</code>“. | |||
Kopieren Sie anschließend Datei „<code>index5.html</code>“ sowie die Ordner | |||
„<code>web/css</code>“, „<code>web/init</code>“, „<code>web/js/app5</code>“ , „<code>web/js/lib/require</code>“ | |||
und die Datei „<code>web/js/main5.js</code>“ | |||
aus dem [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld04/ vierten Teil des Tutoriums] | |||
zusammen mit den darin enthaltenen Dateien in Ihr Projekt. | |||
Nehmen Sie folgende Umbenennungen vor (smartes [[Refactoring]]): | |||
* <code>index5.html</code> → <code>index.html</code> | |||
* <code>js/main5.js</code> → <code>js/main.js</code> | |||
* <code>js/app5</code> → <code>js/app</code> | |||
Vergessen Sie nicht, dass Sie in der Datei „<code>index.html</code>“ den Befehl | |||
<source lang="html5"> | |||
<script data-main="js/main5" src="js/lib/require/require.js"></script> | |||
</source> | |||
durch | |||
<source lang="html5"> | |||
<script data-main="js/main" src="js/lib/require/require.js"></script> | |||
</source> | |||
ersetzen müssen. Und in der Konfigurationsanweisung von RequireJS ( Datei „<code>main.js</code>“) | |||
müssen sie <code>app: 'app5'</code> entweder entfernen oder durch <code>app: 'app'</code> ersetzen. | |||
Den Eintrag <code>wk: 'lib/wk_amd'</code> 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 „<code>index.html</code>“ 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. | |||
== | ==<code>index.html</code>== | ||
Ersetzen Sie Hello-Section-Elemente Ihrer HTML-Datei durch folgende Section-Element: | |||
<source lang="html5"> | |||
<section id="section1_hello" class="hidden"> | |||
<canvas id="canvas1"> | |||
Unfortunately, your browser doesn't support HTML5! | |||
</canvas> | |||
</section> | |||
</source> | |||
und | |||
<source lang="html5"> | |||
<section id="section2_hello" class="hidden"> | |||
<canvas id="canvas2"> | |||
</canvas> | |||
</section> | |||
</source> | </source> | ||
Dieser Schritt war in ähnlicher Form schon im [[HTML5-Tutorium:_Canvas:_Hello_World_01|ersten Teil des Canvas-Tutoriums]] notwendig. | |||
==<code>hello_de.json</code> und <code>hello_en.json</code>== | |||
Die Initialisierungs-Dateien „<code>hello_de.json</code>“ und „<code>hello_en.json</code>“ müssen an die neuen Gegebenheiten angepasst werden. | |||
Elemente, die es nicht mehr gibt – <code>"hello"</code> und <code>"welcome"</code> –, müssen entfernt werden, | |||
neue Elemente – <code>"canvas"</code> – müssen eingefügt werden und Initialwerte für da Canvas-Element | |||
(Höhe, Breit, Fontangaben etc.) müssen ergänzt werden. | |||
<source lang=" | Beispielsweise sieht die Datei „<code>hello_de.json</code>“ nun folgendermaßen aus: | ||
<source lang="javascript"> | |||
{ | { | ||
"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 | |||
} | |||
} | } | ||
</source> | </source> | ||
==<code>greet.js</code>== | |||
Zu guter Letzt muss noch die Methode „<code>sayHello</code>“ in der Datei „<code>greet.js</code>“ 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 „<code>sayHello</code> 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 „<code>p_init</code>“ übermittelt wurden: | |||
<source lang="javascript"> | |||
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); | |||
}; | |||
</source> | </source> | ||
==Quellen== | |||
== | <references/> | ||
<ol start ="2"> | |||
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | |||
</ol> | |||
</ |
Version vom 31. Oktober 2016, 19:02 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: 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
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)