HTML5-Tutorium: Canvas: Hello World 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) (→Ziel) |
||
Zeile 7: | Zeile 7: | ||
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen. | Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen. | ||
=Ziel= | =Ziel: Ausgabe von „Hallo <Benutzername>!“ auf einem HTML5-Canvas= | ||
Die in [[HTML5-Tutorium: Canvas: Hello World 01|Teil 1]] erstellte Hello-World-Anwendung wird so erweitert, | Die in [[HTML5-Tutorium: Canvas: Hello World 01|Teil 1]] erstellte Hello-World-Anwendung wird so erweitert, | ||
dass der Benutzer seinen Namen eingeben kann und mit diesem | dass der Benutzer seinen Namen eingeben kann und mit diesem |
Version vom 24. Oktober 2012, 18:26 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: hallo.html
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte des Tutoriums HTML5-Tutorium: Canvas: Hello World 01 kennen.
Ziel: Ausgabe von „Hallo <Benutzername>!“ auf einem HTML5-Canvas
Die in Teil 1 erstellte Hello-World-Anwendung wird so erweitert, dass der Benutzer seinen Namen eingeben kann und mit diesem anschließend begrüßt wird. Außerdem wird das Canvas-Layout mit Hilfe von CSS modifiziert.
Anwendung HelloWorld02
Neues Projekt anlegen
Legen Sie ein neues Projekt an:
Datei
→Neu
→Statisches Web-Projekt
- Project name:
HelloWorldCanvas02
→Fertigstellen
Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
Projektexplorer
: Rechtsklick aufHelloWorldCanvas02
→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/HelloWorldCanvas02
→Fertigstellen
Projekt im Repository sichern
Das neu angelegte Projekt wird als erstes im Repositotry gesichert:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas02
→Team
→Commit
- Comment:
Neues Projekt angelegt.
OK
Dateien erstellen
main.js
Erstellen Sie im Ordner WebContent/js
des Projektes die Datei main.js
.
Diese Datei enthält nun zwei Funktionen:
init
: Diese wird nach dem Laden der HTML-Seiten in einen Browser aufgerufen, um die Zeichenbühne (canvas
) zu initialisieren.sayHello
: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.
Inhalt von main.js
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
var g_canvas;
var g_context;
/** Initialisiert die Bühne (Canvas). */
function init()
{
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;
g_context = g_canvas.getContext("2d");
}
/**
* Löscht den aktuellen Inhalt von der Bühne und schreibt dann einen Meldung
* auf die Bühne, bei der der Benutzer mit seinem Namen begrüßt wird.
* Der Name des Benutzers wird aus einem Eingabefeld der HTML-Seite gelesen.
*/
function sayHello()
{
// Textausgabe (auf der Bühne)
g_context
.clearRect(0, 0, g_canvas.width, g_canvas.height); // clear canvas
g_context
.font = "bold 20px 'Times New Roman', Times, serif";
g_context
.fillText("Hallo " + document.getElementById("d_name").value + "!", 5, 20);
}
main.css
Erstellen Sie im Ordner WebContent/css
des Projektes die Datei main.css
:
Inhalt von main.css
/* Das Text-Eingabefeld wird obtisch an die Bühne angepasst. */
#d_name
{
width: 185px;
}
/* Die Bühne wird mit Hilfe eines Rands optisch hervorgehoben. */
#d_canvas
{
margin-top: 10px;
border-color: #BBBBBB;
border-width: 2px;
border-style: solid;
}
hallo.html
Erstellen Sie im Ordner WebContent
des Projektes die Datei hallo.html
,
die den Benutzer nach seinem Namen fragt und diesen, nachdem der Benutzer einen OK-Button
gedrückt hat, zur Begrüßung des Benutzers verwendet.
Inhalt von hallo.html
<!DOCTYPE html>
<html>
<head>
<!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
<title>HTML5-Tutorium: Canvas: Hello World 02</title>
<!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
<meta charset="UTF-8">
<!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Laden aller CSS-Dateien -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Laden aller JavaScript-Dateien -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="init()">
<!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
<form >
<label>Ihr Name:</label>
<input id="d_name" type="text" value="" />
<input type="button" value="OK" onmousedown="sayHello()"/>
</form>
<!-- Die Bühne -->
<canvas id="d_canvas">
Ihr Browser unterstützt HTML5 leider nicht!
</canvas>
</body>
</html>
Testen und Sichern des Projektes
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas02
→Team
→Commit
- Enter a comment for the commit operation:
hallo.html mit main.js und main.css wurden erstellt.
OK
Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie
sinnvolle und fehlerhafte Änderungen vornehmen. Löschen Sie z.B. die Zeilen mit dem Aufruf
der Funktion clearRect
aus der Datei main.js
und testen Sie Ihre
Anwendung erneut. (Tipp: Geben Sie mehrmals hintereinander jeweils einen anderen Namen ein.)
Speichern Sie zu guter Letzt Ihre sinnvollen Änderungen auch im Repository (mit kurzem, aber sinnvollem Kommentar!).
Apache als Test-Server (optional)
Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen anderen Server (wie z.B. Apache oder Tomcat) zum Testen einer Web-Anwendung verwenden. Der Vorteil dieser Variante ist, dass man den Zielserver gemäß seinen Bedürfnissen wählen und konfigurieren kann und dass die Anwendung von Anfang an auf dem richtigen Server getestet wird.
Voraussetzung ist, dass ein entsprechender Server lokal installiert wurde:
- Installation von Apache (Windows), Installation von Apache (Mac OS X), Installation von Apache (Unix)
Der Apache-Server muss laufen, sonst funktioniert der nachfolgende Test nicht!
Definieren eines neuen Apache-Test-Servers in Eclipse (nachdem der Apache installiert und gestartet wurde):
- Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes
HelloWorldCanvas02
→Eigenschaften
→Server
→ Standardserver:keine
→OK
- Im Projektverzeichnis:
hallo.html
selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ →Run on Server
→OK
Neuen Server manuell definieren
selektieren → Severziel eingeben:HTTP Server
selektieren- Hostname des Servers:
localhost
, Server name:Apache
→Weiter
- Publishing Directory:
C:\web\apache\htdocs
(Webverzeichnis des Servers, abhängig davon, wohin Sie den Apache installiert haben) →Weiter
- evtl. Anpassungen vornehmen →
Fertigstellen
Beim nächsten Aufruf von Run on Server
wird der Server Apache
unter der Liste der vorhandenen Server aufgeführt.
Man sollte diesen Server wählen und dann das Häckchen vor Server als Projektstandardeinstellung festlegen
setzen,
damit man die Serverwahl nicht bei jedem Test erneu ausführen muss.
Als Browser wird der in Eclipse integrierte Browser verwendet. Besser ist es den Firefox als Standardbrowser zu verwenden:
- Klick auf
Fenster
→ Klick aufWeb
→ Klick aufWeb
→ Klick aufFirefox
Ein Problem bleibt bestehen: Bei jedem Aufruf von Run on Server
wird in Eclipse oder Firefox ein neues
Browserfester geöffnet. Um dies zu verhindern, kann man folgenden Trick anwenden, nachdem Run on Server
zum ersten Mal ausgeführt worden ist:
- Im mittleren unteren Fenster den Reiter
Server
selektieren Apache
aufklappen und selektieren- Wenn dort nicht
synchronisiert
, sondernErneut publizieren
steht: Im unteren mittleren Fenster: Klick auf das vierte Icon von rechts (Auf dem Server bereitstellen
) - Sobald beim
Apache
wiedersynchronisiert
steht, kann im Browserfester der Reload-Button gedrückt werden, um die neuen Daten abzufrufen. (Eventuell muss der Browser-Cache geleert werden.)
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- w3schools.com: HTML5 Tutorial
Fortsetzung des Tutoriums
Bearbeiten Sie nun Teil 3 des Tutoriums.