HTML5-Tutorium: JavaScript: Hello World 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Zeile 42: Zeile 42:
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.  
Es öffnet sich ein Drop-Down-Menü mit einer Auswahl an Dateien, die Sie erstellen können.  


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


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


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


Die zweite und die letzte Zeile des Dokuments (<code><html lang="en"></code> und <code></html></code>)
Die zweite und die letzte Zeile des Dokuments („<code><html lang="en"></code>“ und „<code></html></code>“)
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] <code>lang</code> zeigt dem Browser an,
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] „<code>lang</code>“ zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
soll, müssen Sie den Wert <code>en</code> (Englisch) in <code>de</code> (Deutsch) ändern.
soll, müssen Sie den Wert „<code>en</code>“ (Englisch) in „<code>de</code>“ (Deutsch) ändern.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.
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-[[Tag]]s müssen die beiden wesentlichen Bereiche
Innerhalb des öffnenden und des schließenden HTML-[[Tag]]s müssen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.
eines HTML-Dokuments mit Inhalt gefüllt werden.


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


Im <code>head</code>-Bereich stehen dagegen Informationen, die für den Browser zwar interessat sind, die  
Im „<code>head</code>“-Bereich stehen dagegen Informationen, die für den Browser zwar interessat sind, die  
aber nicht gerendert und im Content-Bereich des Browsers dargestellt werden müssen. Typische
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, sowie die Zeichenkodierung
Vertreter sind der Titel des Dokuments, der im Browsertab angezeigt wird, sowie die Zeichenkodierung

Version vom 12. September 2016, 13:44 Uhr

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 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 erste Möglichkeit nutzen und ein neues Projekt erstellen. Anschließend werden Sie die Musterlösung für dieses Projekt herunterladen.

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</code“ 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 „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, ist dieser Bereich noch leer.

Im „head“-Bereich stehen dagegen 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, sowie die Zeichenkodierung (UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in UTF-8 kodiert. In HTML 4 war noch ISO 8859-1 Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen. Davon sind 191 spezifiziert.[1] Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen als korrekt angesehen.[2].

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'. Wenn man diesen Befehl erstmals ausgeführt hat, erscheint in der Hauptmenüleiste von Web-Storm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei dierekt gestartet werden kann.

Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden.

  1. Im Dateibaum index.html selektieren.
  2. Run → Edit Configurations... → Klick auf „...“ hinter dem Label „Browser“ → Defaultbrowser festlegen
  3. Menü mit Klick auf „OK“ verlassen.

Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedesmal die Datei neu starten. Es reicht, im Browser den Reloadbutton zu drücken.

Der von WebStorm gestartete Web-Server bedient diverse Brwoser, die sich auf dem Entwicklungsrechner befinden. Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, muss man dazu den URI im ersten Browser kopieren und in die URI-Leiste des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsanfrage:

Copy authorization URL to clipboard

Wenn man dies bestätigt enthält das Clipboard anschließend einen URI, die man mit Strg-v als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann. Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden.

Man könnte die Seite sogar von einem anderen Device, wie z. B. einen Smartphone aus aufrufen. Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen unterbunden.

Speichern der Web-Anwendung in einem Subversion-Repository

Nun ist es an der Zeit, die erste Version unserer Web-Anwendung in einem Repository (= digitales Archiv) eines Versionsverwaltungssystems (version control system, VCS) zu speichern. Hier wird Subversion verwendet.

Anmerkung: Ich weiß, dass Git viel „cooler“ und „mächtiger“ ist als Subversion. Wenn Sie kein Teilnehmer der an der Lehrveranstaltung Multimedia-Programmierung (MMProg) sind, können Sie an Stelle von Subversion gerne GitHub oder ein anderes Versionsverwaltungssystem verwenden, um Ihre Projekte zu verwalten. Sie können aber auch Ihren eingenen Subversion-Server installieren, um die Tutorien „in voller Schönheit“ bearbeiten zu können: https://subversion.apache.org/packages.html. (Sie könnten 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 als die Verwaltung von entsprechenden Git-Accounts.

Um Ihr Projekt in einem Subversion-Repository zu speichern, müssen Sie folgende Schriette ausführen:

  1. Klick auf VCS in der Hauptmenüleiste
  2. Klick auf Import into Version Control/Share Project (Subversion)
  3. Klick auf das Plus-Zeichen neben Point to repository location
  4. Tragen Sie den URI Ihres Subversion-Repositories ein. Für MMProg-Teilnehmer lautet der URI https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT/, wobei die Zeichenkette ACCOUNT durch den eigenen RZ-Account ersetzt werden musss.
  5. Im darunterliegenden Fester erscheint ein neuer Eintrag mit dem URI des Repositories. Öffnen Sie diese (Klick auf das Dreieckssysmbol).
  6. Fügen Sie ins Repository einen neuen Ordner namens mmprog ein:
    1. Rechtsklick auf den URI
    2. Klick auf New → Remote Folder...
    3. Geben Sie mmprog als Namen ein (Remote folder name)
    4. Klicken Sie auf OK.
  7. Fügen sie auf dieselbe Weise den Unterordner praktikum in den Ordner mmprog ein.
  8. Selektieren Sie im Dateibaum des Repositories den neu angelegten Ordner praktikum durch Linksklick.
  9. Wählen Sie unter Define share target den zweiten Eintrag (d. h. denjenigen URI, der auf HelloWorld01 endet)
  10. Klicken Sie auf Share, um Ihr neu erstelltes Projekt im Repository anzulegen.
  11. Sie werden gefragt, welches Subversion-Working-Copy-Format verwendet werden soll. Wählen Sie 1.8 (außer, Sie haben einen Uralt-Server am Laufen).
  12. Klicken Sie auf OK. Daraufhin erscheint noch eine Frage.

Wenn die Frage aufpoppt, ob Sie die Datei vcs.xml ebenfalls unter Versionskontrolle stellen wollen, markieren Sie “Remember, don't ask again” und beantworten die Frage mit Yes.

Das Projekt ist nun im gewählten Ordner des Subversion-Repositories angelegt worden, aber es wurden noch noch keine Daten auf den Server übertragen. Die Web-Storm-Ansicht hat sich ebenfalls geändert: Im Dateibaum des Web-Storm-Projektes wurde die Datei index.html grün eingefärbt und in die Hauptmenü-Leiste von Web-Storm sind zwei neue VCS-Icons eingetragen worden. Die beiden Icons ermöglichen eine schnellen Zugriff auf die beiden wichtigsten Subversion-Befehle:

  • VCS, grüner Pfeil nach unten: Update Project
  • VCS, grüner Pfeil nach oben: Commit Project

Mittels Commit Project werden Änderungen, die auf dem Entwicklungsrechner lokal vorgenommen wurden, ins Subversion-Repository übertragen. Mittels Update Project werden Änderungen, die im Repository (i. Allg. auf einem anderen Rechner und/oder von einem anderen Entwickler) vorgenommen wurden, ins lokale Verzeichnis des Entwicklungrechners übernommen. Es gibt noch diverse weitere Subversion-Befehle. Diese sind über den Dateibaum zugänglich:

  • Rechtsklick auf den Projektnamen im Dateibaum → Klick auf Subversion

Alle Dateien, die noch nicht im Repository enthalten sind (zurzeit sind noch überhaupt keine Daten darin enthalten), werden aufgelsitet. Neben der von Ihnen erstellten Datei index.html gibt es noch einen Ordner namens .idea, der WebStrom-spezifische Projekt-Dateien enthält. Sie könnten theoretisch bestimmte Dateien deselktieren, um sie nicht ins Repository zu übertragen. Das wäre hier aber kontraproduktiv.

Tragen Sie in das Feld Commit Message einen sinnvollen Änderungstext, wie z. B. Project created ein. Klicken Sie dann auf Commit (dt.: übergeben).

Üblicherweise werden in Projekten englische Dateinamen, Variablenbezeichner, Kommentare (einschließlich Subversion-Kommentaren) verwendet, um internationale Programmierer um Rat fragen (Diskussionsforen) und als Teammitglieder einstellen zu können.

Die Farbe der Datei index.html ändert sich bei einem erfolgreichen Commit abermals. Sie wird wieder schwarz. Das bedeutet: Der Inhalt dieser Datei stimmt mit dem Inhalt der im Repository gespeicherten Version überein. Sobald der Inhalt der lokalen Version der Datei geändert wird, wird der Dateiname blau eingefärbt. Neue Dateien werden – wie bereits gesehen – grün eingefärbt. Bei einem erneuten Commit werden alle geänderten Dateien abermals ins Subversion-Repository eingetragen. Allerdings werden die Vorgängerversionen nicht gelöscht. Das heißt, im Repository sind alle Versionen einer jeden Datei dauerhaft zugänglich. Auf diese können Sie z. B. mittels

  • Rechtsklick auf eine Datei im Dateibaum → Klick auf Subversion → Klick auf Show History

zugreifen. Das heißt, es ist unnötig und sogar kontraproduktiv, lokale Versionen einer Datei anzulegen: index.html, index.html.v01, index.html.v02, ...

Um verschiedene Versionen im Versionkontrollsystem unterscheiden zu können, sind die Kommentare, die Sie beim Commit angeben von fundamentaler Bedeutung. Vergessen Sie diese daher nicht und versuchen Sie jeweils die wesentlichen Änderungen, die Sie an einer Datei vorgenommen haben, möglichst kurz und prägnat zu beschreiben (ein Einzeiler).

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.

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

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

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

Quellen

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