HTML5-Tutorium: Canvas: Hello World 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 155: | Zeile 155: | ||
# Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes <code>HelloWorldCanvas02</code> → <code>Eigenschaften</code> → <code>Server</code> → Standardserver: <code>keine</code> → <code>OK</code> | # Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes <code>HelloWorldCanvas02</code> → <code>Eigenschaften</code> → <code>Server</code> → Standardserver: <code>keine</code> → <code>OK</code> | ||
# Im Projektverzeichnis: <code>hello.html</code> selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → <code>Neuen Server manuell definieren</code> selektieren → Severziel eingeben: <code>HTTP Server</code> selektieren → <code>Weiter</code> | # Im Projektverzeichnis: <code>hello.html</code> selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → <code>Run on Server</code> → <code>OK</code> | ||
#<code>Neuen Server manuell definieren</code> selektieren → Severziel eingeben: <code>HTTP Server</code> selektieren → <code>Weiter</code> | |||
# Hostname des Servers: <code>localhost</code>, Server name: HTTP Server (Apache) o.Ä, Serverlaufzeit: Klick auf <code>Hinzufügen</code> → Server name: HTTP Server (Apache) o.Ä., Publicshing Directory: <code>c:\web\apache\htdocs</code> (Webverzeichnis des Servers) → <code>Fertigstellen</code> → <code>Weiter</code> → evtl. Anpassungen vornehmen → <code>Fertigstellen</code> | # Hostname des Servers: <code>localhost</code>, Server name: HTTP Server (Apache) o.Ä, Serverlaufzeit: Klick auf <code>Hinzufügen</code> → Server name: HTTP Server (Apache) o.Ä., Publicshing Directory: <code>c:\web\apache\htdocs</code> (Webverzeichnis des Servers) → <code>Fertigstellen</code> → <code>Weiter</code> → evtl. Anpassungen vornehmen → <code>Fertigstellen</code> | ||
Version vom 21. September 2012, 12:09 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
Ergebnis: hello.html
(SVN-Repository)
HTML5: Hello-<name>-Anwendung mit 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.
Musterlösung herunterladen
(Dieser Punkt kann übersprungen werden.)
Laden Sie die Musterlösunglösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/
auf bekannte Weise in Eclipse.
Neues Projekt anlegen
Legen Sie ein neues Projekt an:
Datei→Neu→Statisches Web-Projekt- Project name:
HelloWorldCanvas02→Fertigstellen - Im Menü am oberen Rand: Klick auf
Projekt→Eigenschaften→ Codierung der Textdatei: Klick aufSonstige→UTF-8selektieren
Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
Projektexplorer: Rechtsklick aufHelloWorldCanvas02→Team→Projekt gemeinsam nutzenSVN→Weiter- Url:
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT(ACCOUNTdurch 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 det 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 v_canvas;
var v_context;
/** Inisialisiert die Zeichenbühnen (Canvas) */
function init()
{
v_canvas = document.getElementById("d_canvas");
v_context = v_canvas.getContext("2d");
v_canvas.width = 300;
v_canvas.height = 27;
}
/**
* Löscht den aktuellen Inhalt von der Zeichenbühne
* und schreibt dann eine Begrüßung in die Zeichenbühne.
* Der Name des Benutzers wird aus einem Eingabefeld von der HTML-Seite gelesen.
*/
function sayHello()
{
v_context.clearRect(0, 0, v_canvas.width, v_canvas.height); // clear canvas
v_context.font = "bold 20px 'Times New Roman', Times, serif";
v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 5, 20);
}
main.css
Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css:
Inhalt von main.css
/* Die Zeichnenbühne wird mit Hilfe eines Rands optisch hervorgehoben. */
canvas
{
border-color: #BBBBBB;
border-width: 2px;
border-style: solid;
}
hello.html
Erstellen Sie im Ordner WebContent des Projektes die Datei hello.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 hello.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Tutorium: Canvas: Hello World 02</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/main.js" ></script>
</head>
<body onload="init()">
<!-- Die Zeichenbühne -->
<canvas id="d_canvas">
Your browser does not support canvas!
</canvas>
<!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
<form name="d_form">
<label>Your name:</label>
<input name="d_name" type="text" value=""><br/>
<input type="button" value="OK" onmousedown="sayHello()">
</form>
</body>
</html>
Testen und Sichern des Projektes
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas01→Team→Commit - Enter a comment for the commit operation:
hello.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
Anwendunge 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!).
Optional: Apache oder Tomcat als Test-Server
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)
- Installation von Tomcat (Windows), Installation von Tomcat (Mac OS X), Installation von Tomcat (Unix)
Definieren eines neuen Test-Servers:
- Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes
HelloWorldCanvas02→Eigenschaften→Server→ Standardserver:keine→OK - Im Projektverzeichnis:
hello.htmlselektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ →Run on Server→OK Neuen Server manuell definierenselektieren → Severziel eingeben:HTTP Serverselektieren →Weiter- Hostname des Servers:
localhost, Server name: HTTP Server (Apache) o.Ä, Serverlaufzeit: Klick aufHinzufügen→ Server name: HTTP Server (Apache) o.Ä., Publicshing Directory:c:\web\apache\htdocs(Webverzeichnis des Servers) →Fertigstellen→Weiter→ evtl. Anpassungen vornehmen →Fertigstellen
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Canvas–Dive Into HTML5
- Musterlösung, Musterlösung (SVN)
