HTML5-Tutorium: JavaScript: Hello World 01

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6 Musterlösung: index.html (SVN-Repository)

Ziel

Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der IDE (integrated development environment, Integrierte Entwicklungsumgebung) WebStorm eine Web-Anwendung bestehend aus einem HTML-Dokument samt zugegörigem CSS-Dokument erstellt.

Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.

WebStorm vorbereiten

Zur Erstellung der Anwendung wird WebStorm eingesetzt. Zunächst müssen Sie diese IDE installieren und konfigurieren. Es handelt sich um eine kommerzielle Software, aber als Student erhalten Sie eine kostenlose Lizenz.

WebStorm starten

Nach dem Starten der IDE sehen Sie ein Menü mit drei Alternativen, ein Projekt zu bearbeiten: Sie können eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem Versionsverwaltungstool laden (check out) und öffnen.

Sie werden zunächst die dritte Möglichkeit nutzen, um die Musterlösung zu dieser Tutoriumsaufgabe herunterzuladen. Anschließend erstellen Sie ein neues Projekt, das dieselbe Aufgabe erfüllt, wie die Musterlösung.

Die Musterlösung herunterladen

Starten Sie WebStorm und klicken Sie auf Check out from Version Control. Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen (GitHub, CVS, Git, Mercurial und Subversion) . Sie wählen Subversion aus.

Anmerkung: Ich weiß, dass Git viel „cooler“ und „mächtiger“ ist als Subversion. Wenn Sie kein Teilnehmer der an der Lehrveranstaltung [[1]] sind, können Sie an Stelle von Subversion gerne GitHub oder ein anderes Versionsverwaltungssystemen, auf das Sie Zugriff haben, verwenden, um Ihre Projekte zu verwalten. (Sie können sogar ganz darauf verzichten und Ihre Tutoriumslösungen nicht in einem Versionsverwaltungssystem sichern. Davon rate ich aber ab.) Im Praktikum zur Lehrveranstaltung wird jedoch Subversion verwendet, da die Administration von Dutzenden von Subversion-Accounts für den Dozenten wesentlich einfacher ist.

TO BE DONE

Ein neues Projekt erstellen

Starten Sie WebStorm und klicken Sie auf Create New Project. Wählen Sie im linken Frame der Seite, die sich geöffnet hat, Empty Project, wählen Sie im Feld Location einen sinnvollen Pfad aus, wo auf Ihrem Rechner Sie das Projekt speichern wollen (z. B. .../mmprog/HelloWorld/HelloWorld01) und klicken Sie anschließend auf Create.

Links sehen Sie nun ein senkrechtes Menü mit zwei Menüpunkten Structure und Project. Klicken Sie auf Project. Es erscheint ein Dateibaum, der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen (HelloWorld01) sowie eine Systemdatei External Libraries, die uns derzeit nicht weiter interessiert.

Klicken Sie mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf New. Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.

Erstellen Sie eine HTML-Datei index.html vom Typ HTML 5 file. In die HTML-Datei wurde von WebStrom folgender Code automatisch eingefügt: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen dies Browser, damit sie den nach-volgenden HTML-Code richtig interpretieren und rendern können. Mit <!DOCTYPE html> wird festgelegt, dass es sich um eine HTML5-Datei handelt. Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (strict) würde eine wesentlich komplexere Doctype-Angabe erfordern: 

<!DOCTYPE HTML PUBLIC
          "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd"
>

Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.

Die zweite und die letzte Zeile des Dokuments ( und ) begrenzen den eigentlichen HTML-Code. Das Attribut lang zeigt dem Browser an, in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden soll, müssen Sie den Wert en (Englisch) in de (Deutsch) ändern. Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.

Innerhalb des öffnenden und des schließenden HTML-Tags müssen die beiden wesentlichen Bereiche eines HTML-Dokuments mit Inhalt gefüllt werden.

Im head-Bereich stehen Informationen, die für den Browser zwar interessat sind, die aber nicht gerendert und im Content-Bereich des Browsers dargestellt werden müssen. Typische Vertreter sind der Titel des Dokuments, der im Browsertab angezeigt wird, die Zeichencodierung (UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in UTF-8 codiert. In HTML 4 war noch ISO 8859-1 die Standardkodierung. Mit UTF-8 können theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen als korrekt angesehen.[1]. In ISO 8859-1 (ISO Latin 1) gibt es dagegen maximal 256 Zeichen. Davon sind 191 spezifiziert.[2]

Im body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich des Browsers angezeigt werden sollen. Da WebStrom keine Ahnung hat, was für Inhalte präsentiert werden sollen, iist dieser Bereich noch leer.

Die HTML-Datei mit Inhalten füllen

Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt. Es wird ein Titel in head-Bereich eingetragen sowie eine Hauptüberschrift (heading, <h1>...</h1>) sowie anschließend ein Absatz (paragraph, <p>...</p>) mit sinnvollem Text. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld01</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to Multimedia Programming!</p>
</body>
</html>

Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken. Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt. Tag-Blöcke, die innerhalb von anderen Tags plaziert werden, werden um zwei Leerzeichen weiter eingerückt, als ihre Elterntags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zuviel. (Eventuell ist aber auch die Datei zu groß und zu tief verschachtelt.) Eine Datei mit Programmcode sollte in der Regel nicht mehr als 80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.

Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen. Für wieviele Leerzeichen ein Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser (z. B. bei einem Web-Zugriff auf ein Repository eines Versionverwaltungssystems) fehlerhaft sein.

Fügen Sie nicht willkürlich Leerzeilen in den Code ein. Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung und können – geschickt eingesetzt – die Lesbarkeit des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.

Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich. Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, Prüfer etc.). Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.

Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt. 

<!DOCTYPE html>  <html lang
                         ="en">
<head

>
<meta

  charset=                               "UTF-8"><title
>HelloWorld01</title>
</head

           ><body>


<h1   >Hello,


  World!</h1>   <p>Welcome to Multimedia Programming!
</p>
  </body>
                                                  </html>

BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HelloWorld01</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to Multimedia Programming!</p>
  </body>
</html>

Allerdings ist es durchaus sinnvoll, nicht nur das html-Tag, sondern auch das head-Tag und das body-Tag am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und jedesmal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen. Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.

Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.

Start der Web-Anwendung

Um die zuvor erzeugte HTML-Datei in einem Browser ansehen zu können, muss sie in das Dokument-Verzeichnis eines Web-Servers gelegt werden. Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner, also auf Ihrem Laptop oder PC, einen Server wie Apache oder Tomcat zu installieren. Das ist aber für einfache HTML-Seiten, die keinen Python-, PHP-, Java- oder sonstigen Code enthalten, der ausgeführt werden muss, bevor die Seite an den Client (Browser) ausgeliefert wird, nicht notwendig.

In diesem werden Tutorium nur HTML-Seiten erstellt, die höchstens JavaScript-Code enthalten. Der JavaScript-Code soll nicht vom Server sondern vom Client ausgeführt werden, nachdem die HTML-Seite (samt JavaScript-Code) an den Client übermittel wurde. Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten auszuliefern. Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendunge ganz einfach.

Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auch index.html und klicken Sie dann auf Run 'index.html'.


TO BE DONE

Musterlösung herunterladen

Laden Sie die Musterlösung in Eclipse:

  • Klick auf Reiter Datei → Importieren
  • SVN aufklappen → Klick auf Checkout Projects from SVN → Weiter
  • Entweder
  • Weiter
  • Nachden der Dateibaum aufgegangen ist: html5_canvas aufklappen → hello_world aufklappen → html5_canvas_hello_world_01 selektieren
  • Fertigstellen

Anmerkung

Auf dieselbe Weise können Sie auch Ihre eigenen Projekte aus Ihrem eigenen Repository auf beliebige Rechner laden.

Wenn Sie mit der Bearbeitung Ihres Projektes auf einem Rechner aufhören, sollten Sie stets den aktuellen Stand in Ihrem Repository sichern:

  • Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf Team → Click auf Commit

Wenn Sie danach auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen, müssen sie beim ersten MAl das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden. Wenn Sie dies einmal gemacht haben, reicht es wen Sie künftig die lokale Version auf dem Rechner aktualisieren, bevor Sie mit der Arbeit beginnen:

  • Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf Team → Click auf Update to HEAD

Anwendung „HelloWorldCanvas01“

Neues Projekt anlegen

  • Datei → Neu → Statisches Web-Projekt
  • Project name: HelloWorldCanvas01 → Fertigstellen
  • Eventuell: Web-Perspektive wählen

Speichern Sie nun Ihr Projekt in Ihrem Repository:

  • Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Projekt gemeinsam nutzen
  • SVN → Weiter
  • Create a new repository location selektieren
  • URL: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
  • Use specified folder name: mmprog/tutorium/HelloWorldCanvas01 → Fertigstellen
  • Beim ersten Mal: Klick auf Accept permanently
  • Beim ersten Mal: Passwort eingeben → Häckchen bei Passwort merken (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → OK
  • Öffnen der Perspektive bestätigen: Häckchen bei Entscheidung merken → Nein (Nicht Ja!!!!)

Projekt im Repository sichern

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

  • Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
  • Enter a comment for the commit operation: Neues Projekt angelegt.
  • OK

Neue HTML-Datei anlegen

  • Im Projektexplorer (linkes Fenster): HelloWorldCanvas01 aufklappen
  • Rechtsklick auf Ordner WebContent → Neu → HTML file
  • Dateiname: hallo.html → Weiter → Templates: New HTML File (5) → Fertigstellen

HTML-Datei bearbeiten

Erfassen Sie nun folgenden Code in der HTML-Seite: 

<!DOCTYPE html>
<html>
  <head>

    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: Canvas: Hello World 01</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">
 
    <!-- Zeichnen von "Hallo Welt!" auf der Bühne
         (nachdem die Seite geladen wurde). -->
    <script type="text/javascript">
      function init()
      { var l_canvas = document.getElementById("d_canvas");
 
        l_canvas.width  = 300;
        l_canvas.height =  27;
 
        var l_context = l_canvas.getContext("2d");
        
        l_context.font = "bold 20px 'Times New Roman', Times, serif";
        l_context.fillText("Hallo Welt!", 5, 20);
      }
    </script>

  </head>

  <body onload="init()">

    <!-- Die Bühne (Canvas) -->
    <canvas id="d_canvas">
      Ihr Browser unterstützt HTML5 leider nicht!
    </canvas>

  </body>
</html>
Anmerkung 1

Auf das Canvas-Element wird ausschließlich von JavaScript aus zugegriffen. Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier könnte beispielsweise eine Flash-Anwendung ausgeführt werden.

Anmerkung 2

Die Meta-Anweisung 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

Anmerkung 3

Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:

  • Rechtklick in das Editor-Fenster oder auf den Dateinamen im Projektexplorer → Öffnen mit → Web Page Editor

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne Canvas nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

HTML-Seite testen

  • hallo.html speichern: Strg-s
  • Wichtig: Im Projektexplorer jeweils vor dem Server-Aufruf hallo.html selektieren, sonst erhalten Sie eine Fehlermeldung.
  • In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: JavaScript Web Application
  • OK

Anmerkungen zum Firefox auf den Rechnern des MM-Labors

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt. Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:

  • Firefox starten
  • Einstellungen → Erweitert → Netzwerk → Einstellungen
  • Haken von Proxy-Einstellungen des Systems verwenden auf Manuelle Proxy-Konfiguration setzen und als Ausnahme localhost und 127.0.0.1 einstellen.

Anmerkungen zum Test-Sever

Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel JavaScript Web Application die beste Wahl.

Sie können allerdings auch andere Web-Server verwenden:

  • Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
  • Tomcat (hier muss Tomcat installiert und mit Eclipse verknüpft werden)
  • Apache (hier muss Apache installiert und mit Eclipse verknüpft werden; siehe Teil 2 des Tutoriums)
  • etc.

In allen diesen Fällen müssten Sie Run on Server an Stelle von JavaScript Web Application auswählen:

  • In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: Run on Server
  • OK

Den HTTP-Preview-Server wählen Sie folgendermaßen:

  • HTTP Preview → Fertigstellen

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse bzw. im Firefox geöffnet wird. Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreisförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit PHP-Code, JSP-Code etc. muss man einen echten Server (wie Apache oder Tomcat) installieren und mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

  • Reiter Server im unteren Fenster selektieren
  • Klick auf Icon „rotes Recheck“ (Server stoppen)
  • Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

Projekt im Repository sichern

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

  • Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
  • Enter a comment for the commit operation: hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.
  • OK

JavaScript-Code auslagern

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen. Diese Verknüpfung von View und Control bringt nur Nachteile mit sich:

  • Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden (Impedance Mismatch).
  • Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
  • Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

  • Rechtsklick auf Ordner WebContent → Neu → Ordner → Ordnername: js → Fertigstellen
  • Rechtsklick auf Ordner js → Neu → Datei → Dateiname: main.js → Fertigstellen

Inhalt der Datei main.js

Wie bei HTML-Dateien können Sie auch für JavaScript eine alternativen Editor verwenden: JavaScript Source Editor 

"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{ // Erzeugung und Initialisierung der Bühne (Canvas)
  var l_canvas = document.getElementById("d_canvas"); 

  l_canvas.width  = 300;
  l_canvas.height =  27;

  // Textausgabe (auf der Bühne)
  var l_context = l_canvas.getContext("2d");

  l_context.font = "bold 20px 'Times New Roman', Times, serif";
  l_context.fillText("Hallo Welt!", 5, 20);
}

Geänderter Inhalt der Datei hallo.html

<!DOCTYPE html>
<html>
  <head>

    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: Canvas: Hello World 01</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 JavaScript-Dateien -->
    <script type="text/javascript" src="js/main.js"></script>

  </head>

  <body onload="init()">

    <!-- Die Bühne (Canvas) -->
    <canvas id="d_canvas">
      Ihr Browser unterstützt HTML5 leider nicht!
    </canvas>

  </body>
</html>
Tipp

Benutzen Sie am Besten die Code-Vervollständigung (Strg-Leerzeichen bzw. Ctrl-Space). Dazu müssen Sie aber zunächst einen geeigneten JavaScript-Editor wählen:

  • Klick mit der rechten Maustaste im Editor der Datei main.js oder im Projektexplorer auf den Dateinamen main.js → Öffnen mit → JavaScript Source Editor

Beispiel:

  • Klicken Sie testweise im Editor-Fenster der Datei main.js in die leere Zeile 7 der Funktion init.
  • Tippen Sie l_, drücken Sie gegebenenfalls gegebenenfalls Strg-Leertaste und wählen Sie z.B. l_canvas.
  • Geben Sie einen Punkt (.) ein und wählen Sie irgendeine Property aus dem erscheinenden Menü.
  • Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei main.js sollte ja schon fertiggestellt gewesen sein.)

Bevorzugten Editor als Standardeditor definieren:

  • Fenster → Benutzervorgaben → Allgemein aufklappen → Editoren aufklappen → Dateizuordnungen selektieren
  • Dateitypen: Gewünschte Dateiart wählen (z.B.: .js)
  • Zugeordnete Editoren: Gewünschten Editor wählen (z.B.: JavaScript Source Editor)
  • Standardwert
  • OK

Projekt testen

Testen Sie Ihr Projekt wieder, indem Sie im Firefox neu laden (Reload oder F5).

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem die JavaScript-Konsole, die z.B. über das Firefox-Plugin Firebug zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der init-Funktion ein: 

  console.log( "Canvas wurde erstellt: ", 
               l_canvas.width + "*" + l_canvas.height + " Pixel."
             );

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die Konsolenausgaben mittels // oder /* ... */ auszukommentieren.

Anmerkung: In älteren Internet-Explorer-Browsern laufen JavsScript-Programme mit Konsolen-Ausgaben nur ab, wenn die Konsole geöffnet ist. Daher sind Konsolen-Ausgaben für freigegebene HTML-Seiten ein absolutes No-Go.

Projekt im Repository sichern

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

  • Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
  • Enter a comment for the commit operation: main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.
  • OK

Repostitory begutachten

Nun können Sie den Inhalt in Ihrem Repository betrachten.

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes. Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

  • Rechtsklick auf HelloWorldCanvas01 aufklappen → Show History

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gleichzeitig benutzt werden) sowie die von Ihnen eingegebenen Kommentare.

Als Letztes sollten Sie sich die Entwicklung der Datei hallo.html einmal näher ansehen:

  • Im Dateibaum WebContent aufklappen → Rechtsklick auf hallo.html → Show Revision Graph

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

  • Im Dateibaum Rechtsklick auf hallo.html → Compare → OK

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei js/main.js ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

  • In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) Web klicken.

Neben den Icon Web finden Sie jetzt auch ein Icon für die Arbeitsumgebung SVN Repository Exploring, damit Sie künftig schneller in diese Perspektive wechseln können.

Quellen

Siehe auch

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

Quellen

  1. ↑ Request for Comments 3629, UTF-8, a transformation format of ISO 10646
  2. ↑ ISO/IEC 8859-1:1998
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_01&oldid=39918“