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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
(47 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
 
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2021/hello_world/WK_HelloWorld01/index.html <code>index.html</code>]
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld01/index.html <code>index.html</code>]
([{{Git-Server}}/kowa/WK_HelloWorld01.git Git-Repository])
([https://glossar.hs-augsburg.de/beispiel/tutorium/es6/hello_world/WK_HelloWorld01/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment) [[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]] inklusive [[Node.js]] eingesetzt.
Zunächst müssen Sie diese IDE  [[HTML5-Tutorium:_JavaScript:_Entwicklungsumgebung|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle
Software, aber als Student erhalten Sie eine kostenlose Lizenz.
 
==WebStorm starten==
 
In WebStorm gibt es 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 (<code>check out</code>) 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 aus einem [[Git|Git-Repository]] herunterladen.


==Ein neues Projekt erstellen==
==Ein neues Projekt erstellen==


* WebStorm starten
* Visual Studio Code (VSC) starten
* <code>File</code>/<code>WebStorm</code> → <code>New</code> → <code>Project</code>
* <code>File</code> → <code>Open Folder</code>
* <code>Empty Project</code>, im Feld <code>Location</code> einen sinnvollen Pfad auswählen, wo auf Ihrem Rechner das Projekt gespechert werden soll ({{zB}} <code>.../mmprog/hello_world/HelloWorld01</code>)
* Erstellen Sie unter einem sinnvollen Pfad auf Ihrem Rechner einen neuen Ordner ({{zB}} <code>.../webprog/hello_world/HelloWorld01</code> und öffnen Sie diesen Ordner.
* <code>Create</code>.


Links sehen Sie nun ein senkrechtes Menü mit mehreren Menüpunkten, <code>Structure</code>, <code>Favorites</code>
Links sehen Sie ein Icon bestehend aus zwei übereinander liegenden Papierblättern. Wenn Sie darauf klicken, sehen einen Dateibaum mit dem soeben geöffneten Ordner. Er enthält noch noch keine Dateien.
und <code>Project</code>. (Wenn Sie dieses Menü nicht sehen, müssen Sie
auf das Icon unten links in der Leiste klicken. Damit wird es eingeblendet.)


Klicken Sie auf <code>Project</code>. Es erscheint ein Dateibaum,
Der Ordnernamen wird mit Großbuchstaben dargestellt. Wenn Sie die Maus über diesen Ordnernamen bewegen, erscheinen Icons zum Erzeugen von Dateien und Ordnern (sowie zwei weitere Icons). Erstellen Sie eine HTML-Datei <code>index.html</code>.
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen
<code>HelloWorld01</code> sowie zwei Systemdateien <code>External Libraries</code> und <code>Scratches and Consoles</code>, die uns  nicht weiter interessieren.


Aktivieren Sie zunächst die Toolbar, sofern Sie dies noch nicht gemacht haben:
==Die HTML-Datei mit Inhalten füllen==
* <code>View</code> → Häkchen bei <code>Toolbar</code>
Hier finden Sie insbesondere den Reload-Button, mit dem Sie den Dateibaum in WebStorm neu laden können,
wenn dieser außerhalb von WebStorm verändert wurde.


Klicken Sie nun mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>.
Im nächsten Schritt wird die HTML-Datei mit Inhalten gefüllt:
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>.
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt:


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


</body>
</html>
</html>
</source>
</source>
Speichern Sie die Datei (<code>STRG/CTRL/CMD-s</code>). Im Reiter <code>OPEN EDITORS</code> wird angezeigt, ob es nicht gespeicherte Dateien gibt. Dort befindet sich auch ein Icon, um alle nicht gespeicherten Dateien auf die Festplatte zu schreiben. Man vergisst leider häufig, eine Datei zu speichern, bevor man sie in einem Browser öffnet und wundert sich dann, warum man keine Änderungen sieht. (In dieser Hinsicht ist WebStorm besser. Hier werden Dateien automatisch gespeichert, wenn sie für eine Browser-Darstellung benötigt werden.)


Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit  
Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit  
Zeile 84: Zeile 57:
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 stehen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.
eines HTML-Dokuments, der Head- und der Body-Bereich.


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


Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die  
Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die  
Zeile 100: Zeile 72:
nur etwas mehr als eine Million Kodierungen als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,  
nur etwas mehr als eine Million Kodierungen als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,  
a transformation format of ISO 10646]</ref>.
a transformation format of ISO 10646]</ref>.
==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. Im Body-Bereich fügen Sie bitte
eine Hauptüberschrift (heading, <code>&lt;h1&gt;</code>...<code>&lt;/h1&gt;</code>)  sowie
anschließend einen Absatz (paragraph, <code>&lt;p&gt;</code>...<code>&lt;/p&gt;</code>)
mit sinnvollem Text ein.
<source lang="html5">
<!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>
</source>


'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
Zeile 174: Zeile 121:
</source>
</source>


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


Zeile 205: Zeile 152:
Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner,
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.
also auf Ihrem Laptop oder PC, einen Server wie [[Apache]] oder [[Tomcat]] zu installieren.
Das ist aber für einfache HTML-Seiten nicht notwendig, {{dh}} für HTML-Seiten, die keinen [[Python]]-, [[PHP]]-, [[Java]]-, [[JavaScript]]- oder sonstigen Code
Das ist aber für einfache HTML-Seiten nicht notwendig, {{dh}} für HTML-Seiten, die keinen [[Python]]-, [[PHP]]-, [[Java]]-, [[JavaScript]]- oder sonstigen Code enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)  
enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)  
ausgeliefert wird.  
ausgeliefert wird.  


Zeile 212: Zeile 158:
Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden,
Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden,
'''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde.
'''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde.
Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten auszuliefern.  
Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten und JavaScript-Dateien auszuliefern.  
Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach.
Ein derartiger Server ist in VSC enthalten (wenn Sie die Erweiterung <code>Life Server</code> installiert haben).
Daher ist das Testen der Web-Anwendung ganz einfach.


Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf <code>index.html</code>
Klicken Sie im Dateibaum von VSC mit der rechten Maustaste auf <code>index.html</code>
und klicken Sie dann auf <code>Run 'index.html'</code>. Wenn man diesen Befehl erstmals ausgeführt hat,
und klicken Sie dann auf <code>Open with Life Server</code>. Nach kurzer Zeit öffnet
erscheint in der Hauptmenü-Leiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
sich im Standardbrowser die HTML-Seite, die man gerade erstellt hat.
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann.


Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser
Ersetzen Sie in der Datei <code>index.html</code> den veralteten Titel <code>Multimedia Programming</code> durch den neuen Titel
geöffnet wird. Welcher Browser dies ist, kann in WebStorm folgendermaßen festgelegt werden.
der Veranstaltung <code>Web Programming</code>. Sobald Sie die Datei speichern, sollte sich im Browser der Inhalt automatisch aktualisieren.
Der Life Server von VSC fügt der HTML-Datei eine JavaScript-Code hinzu, der dafür sorgt, dass die Seite im Browser jedes Mal neu geladen wird, sobald sich der Inhalt in VSC ändert.  


# Im Dateibaum „<code>index.html</code>“ selektieren.
Diesen Code können Sie sehen, wenn Sie im Browser den HTML-Code untersuchen (Firefox uns Safari: Rechtsklick → <code>Element untersuchen</code>, Chrome: Rechtsklick → <code>Untersuchen</code>). Wenn Sie im Inspektor das <code>html</code>-
# <code>Run</code> → <code>Edit Configurations...</code> → Klick auf <code>...</code> hinter dem Label <code>Browser</code> → Defaultbrowser festlegen
und dann das <code>body</code>-Element öffnen, sehen Sie den zusätzlich JavaScript-Code den der VSC-Server ans Ende vom Body eingefügt hat.
#Menü mit Klick auf <code>OK</code> verlassen.


Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die
Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser
Datei neu starten. Es reicht, im Browser den Reload-Button zu drücken.
geöffnet wird. Welcher Browser dies ist, kann in VSC folgendermaßen festgelegt werden:


Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden.
* Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von <code>index.html</code>, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint.
Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste
* Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet..
des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsfrage:


<div class="formula"><code>Copy authorization URL to clipboard</code></div>
Sie können den Default-Browser in VSC jederzeit ändern, indem sie den gewünschten Browser in die <code>settings.json</code> eintragen: [https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md  vscode-live-server/docs/settings.md ]


Wenn man dies bestätigt enthält das Clipboard anschließend einen
==Vermeidung von Sonderzeichen in Dateinamen==
URI, die man mit <code>Strg-v</code> als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann.
Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen  
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden.
öffentlich zugänglichen Web-Server gelegt werden soll, sollten
Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten:


Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen.
* keine Leerzeichen in Datei- und Ordnernamen
Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen
* keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen
unterbunden.
* strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen


Schneller geht der Test mit einem anderen Browser, indem man die zu testende Datei im WebStorm-Editor-Fenster öffnet und mit der Maus in die
Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme
rechte obere Ecke dieses Fensters fährt. Irgendwann poppt in dieser Ecke in Menü mit fünf Browser-Icons auf. Durch einen Klick auf ein
bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer
Icon kann man die geöffnete Datei im gewünschten Browser testen.
ist die Groß- und Kleinschreibung. Wenn Sie eine Datei <code>main.js</code>
erzeugen und diese in einer Datei <code>index.html</code> unter dem Namen
<code>Main.js</code> einbinden, funktioniert Ihre Anwendung auf Ihrem
Windows-Rechner einwandfrei, da unter Windows bei Dateinamen zwischen
Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später
auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren,
funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen
Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden.
<!--
Es sollten also keine
Ordner mit Namen wie „<code>3. Semester</code>“, „<code>Praktikum 01</code>“, „<code>Müller</code>“ etc.
im Dateipfad enthalten sein.-->


==Speichern der Web-Anwendung in einem Subversion-Repository==
==Speichern der Web-Anwendung in einem Git-Repository==


Nun ist es an der Zeit, die erste Version unserer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
Nun ist es an der Zeit, die erste Version Ihrer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird  
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird  
[[Subversion]] verwendet.
[[Git]] verwendet.
 
'''Anmerkung''': <i>Ich weiß, dass [[Git]] viel „cooler“ und „mächtiger“ ist als [[Subversion]]. Wenn Sie nicht
an der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Programmierung]] (MMProg)
teilnehmen, können Sie an Stelle von Subversion selbstverständlich auch [https://github.com/ GitHub] oder ein anderes Versionsverwaltungssystem verwenden,
um Ihre Projekte zu verwalten. Sie können aber auch Ihren eigenen 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.)</i>
<i>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.
</i>


Leider treten anscheinend sowohl unter Mac OS  X, als auch unter Windows 10 unterschiedliche
Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in VSC und
Probleme mit Subversion auf, da anscheinend veraltete SVN-Verisonen zum Einsatz kommen
geben Sie dort <code>git --version</code> ein. Wenn sich Git mit einer Versionsnummer meldet,
und/oder gewisse Softwarepakete fehlen.
haben Sie das Tool korrekt installiert.  
(Mit Windows 7 hatte ich keine Probleme. :-) )


Ein großes Problem stellen (zumindest für ältere Subversion-Clients) häufig Dateipfade dar,  
Überprüfen Sie nun, ob Sie sich im Terminal im Wurzelverzeichnis Ihres Projektes befinden.  
die Leerzeichen oder Sonderzeichen enthalten. (Unter Windows 10 scheinen
Nun können sie im Terminal Git für Ihr Projekt aktivieren:
auch der Benutzerordner und der Desktop teilweise Probleme zu bereiten.)
Legen Sie Ihre WebStorm-Dateien daher in einen Ordner, bei dem weder der Ordner
selbst noch die Elternordner derartige Zeichen enthalten. Es sollten also keine
Ordner mit Namen wie „<code>3. Semester</code>“, „<code>Praktikum 01</code>“, „<code>Müller</code>“ etc.
im Dateipfad enthalten sein.


Eine Fehlermeldung der Art
<source lang="bash">
<source lang="bash">
Error:svn: E155007: '...' is not a working copy
git init
</source>
</source>
können Sie üblicherweise ignorieren. Subversion funktioniert {{iAllg}} trozdem wie gewünscht.
===Subversion unter Windows===
Installieren Sie (zumindest unter Windows 10) eine neuere Version von Subversion auf Ihren Rechner:
* Laden Sie die „Apache Subversion command line tools“ herunter: https://www.visualsvn.com/downloads/
* Entpacken Sie die heruntergeledenen Dateien in einen Ordner Ihrer Wahl.
* In WebStorm gehen Sie dann auf <code>File</code> → <code>Settings</code> → <code>Version Control</code> → <code>Subversion</code>.
* Wählen Sie unter <code>Use command line client</code>“ im heruntergeladenen Ordner die Datei  <code>bin/svn.exe</code> als neuen SVN-Client aus.
===Subversion unter Mac OS 10===


Mit einige Mac-OS-X-Versionen wird eine ältere Version von Apache Subversion ausgeliefert. Laut  http://www.apple.com/opensource/
Daraufhin wir im Wurzelordner des Projektes ein Ordner namens <code>.git</code> angelegt. Dieser wird im Dateibaum üblicherweise nicht angezeigt, da der Name mit einem Punkt beginnt. Sie können ihn aber trotzdem anzeigen:
ist dies die Version 1.6.16. Modernere Mac-OS-X-Versionen installieren die Version 1.9.x, was sehr gut ist. Überprüfen Sie die Version mittels
des Befehls


<source lang="bash">
<source lang="bash">
svn --version
ls -al
ls -al .git
</source>
</source>


Fall  im Terminal die Fehlermeldung <code>xcrun error: ...</code> kommt, muss Xcode mit Hilfe des folgenden
In diesem Ordner sind alle Versionen Ihres Projektes gespeichert. Diese werden jedes Mal gespeichert, wenn Sie <code>git commit</code> ausführen. Allerdings werden nur Dateien gesichert, die zuvor mit <code>git add</code> hinzugefügt wurden.
Terminal-Befehls installiert werden:
 
<source lang="bash">
xcode-select --install
</source>


Jetzt sollte der Befehl <code>svn --version</code> funktionieren.
VSC nimmt Ihnen diese Arbeit ab. Klicken Sie im linken Menü auf das Icon mit den drei Kreisen, die durch zwei Linien verbunden sind.
Damit öffnet sich der Git-Dateibrowser (<code>Source Control</code>). Eventuell müssen Sie das Reload-Icon hinter <code>SOURCE CONTROL</code>
anklicken, um die zuletzt geänderten DAateien zu sehen.


Es gibt allerdings auch aktuellere SVN-Versionen für Apple: https://subversion.apache.org/packages.html
Schreiben Sie in das Feld <code>Message</code> den Text <code>Initial Commit</code> (wenn Sie sich an die Konvention halten möchten, alle Kommentare in Englisch zu schreiben). Klicken Sie dann auf das Haken-Icon hinter dem Text <code>SOURCE CONTROL</code>. Daraufhin erscheint eine Alert-Box, dass keine „staged changes“ vorhanden seien. Man wird gefragt, ob mal alle Änderungen „stagen“ und dann direkt committen wolle. Auf gut Deutsch wird man gefragt, ob man alle Dateien, die in der Dateiliste mit einen <code>U</code> markiert sind, ins Git-Repository einfügen wolle. Da Sie das wollen, klicken Sie auf <code>Ja</code>. (Irgendwann werden Sie auf <code>Immer</code> klicken, sobald Sie die ständigen Nachfragen nerven.)


* In WebStorm gehen Sie dann auf <code>WebStorm</code> → <code>Preferences</code> → <code>Version Control</code> → <code>Subversion</code>.
<!--
* Geben Sie unter <code>Use command line client</code>“ den Dateinamen  <code>svn</code> als neuen SVN-Client an.
Als nächstes sollten Sie in Ihrem Projekt eine Datei namens <code>.gitignore</code> einfügen,
die beschreibt, welche Dateien '''nicht''' im Git-Repository gesichert werden sollen.
Das sind vor allem Dateien mit sensiblen Informationen (wie {{zB}} Passwörtern) sowie
Dateien, die automatisch generiert werden können.  


===Verwendung von Subversion===
Kopieren Sie die Datei <code>https://glossar.hs-augsburg.de/beispiel/tutorium/2021/.gitignore</code>
Siehe auch: https://www.jetbrains.com/help/webstorm/2016.2/using-subversion-integration.html
in das Wurzelverzeichnis Ihres Web-Projektes. Speichern Sie sie unbedingt unter dem Namen
<code>.gitignore</code> (mit einem Punkt als erstes Zeichen). Diese Datei enthält die Namen und
Endungen zahlreicher Dateien und Ordner, die üblicherweise nicht auf einem Git-Server gespeichert
werden sollten. Sie können sie in Ihrer Studienarbeit natürlich an Ihre Bedürfnisse anpassen.
-->


Um Ihr Projekt in einem Subversion-Repository zu speichern, müssen Sie folgende Schritte ausführen:
Wenn Sie jetzt eine Änderung an der Datei <code>index.html</code> vornehmen ({{zB}} indem Sie Sie den Titel in <code>Hello World 01</code> ändern), listet VSC die geänderte Datei im Git-Dateibaum auf und markiert sie mit einen <code>M</code>, sobald sie die Änderungen speichern. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels <code>Commit</code> gesichert wurde.
<!--# Klick auf <code>VCS</code> in der Hauptmenüleiste
Wenn Sie auf den Dateinamen klicken, sehen Sie, was sich geändert hat.
# Klick auf <code>Enable Version Control Integration</code>-->
# <code>Subversion</code> auswählen
# Klick auf <code>VCS</code> → <code>Import into Version Control</code> → <code>Share Project (Subversion)</code>
# Klick auf das Plus-Zeichen neben <code>Point to repository location</code>
# Tragen Sie den URI Ihres Subversion-Repositories ein. Für MMProg-Teilnehmer lautet der URI <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT/</code>, wobei die Zeichenkette <code>ACCOUNT</code> durch den eigenen RZ-Account ersetzt werden muss.
# Im darunterliegenden Fester erscheint ein neuer Eintrag mit dem URI des Repositories. Öffnen Sie diesen (Klick auf das Dreieckssymbol).
# Wenn Sie nach einer Kennung und einem Passwort gefragt werden, geben Sie die Daten Ihres Rechzentrumsaccounts an. Aktivieren Sie <code>Save credentials</code>, ansonsten werden Sei bei jedem Zugriff auf das Repository erneut nach den Zugangsdaten gefragt. → <code>OK</code>
#*Falls es bei MAC OS Probleme gibt, befolgen Sie folgende Schritte:
#**Klicken Sie links oben auf <code>WebStorm</code> → <code>Preferences</code> → <code>Version Control</code> → <code>Subversion</code>
#**Unter dem Reiter <code>Network</code> wählen Sie <code>TLSv1</code>.
#**Unter dem Reiter <code>General</code> klicken Sie auf Button <code>TLSv1</code>.
#**Danach starten Sie WebStorm neu.
#**
# Fügen Sie ins Repository einen neuen Ordner namens „<code>mmprog</code>“ ein:
## Rechtsklick auf den URI
## Klick auf <code>New</code> → <code>Remote Folder...</code>
## Geben Sie <code>mmprog</code> als Namen ein (<code>Remote folder name</code>)
## Klicken Sie auf <code>OK</code>.
# Fügen sie auf dieselbe Weise den Unterordner <code>praktikum</code> in den Ordner <code>mmprog</code> ein.
# Selektieren Sie im Dateibaum des Repositories den neu angelegten Ordner <code>praktikum</code> durch Linksklick.
# Wählen Sie unter <code>Define share target</code> den zweiten Eintrag ({{dh}} denjenigen URI, der auf <code>HelloWorld01</code> endet (sofern Sie Ihr Projekt wie vorgeschlagen benannt haben).
# Klicken Sie auf <code>Share</code>, um Ihr neu erstelltes Projekt im Repository anzulegen.
# Sie werden evtl.  gefragt, welches Subversion-Working-Copy-Format verwendet werden soll. Wählen Sie 1.8 (außer, Sie haben einen Uralt-Subversion-Server am Laufen).
# Klicken Sie auf <code>OK</code>.  


Wenn daraufhin die Frage aufpoppt, ob Sie die Datei <code>vcs.xml</code> ebenfalls unter Versionskontrolle stellen wollen,
Sichern Sie auch diese Version der Datei mittels eines Commits. Vergessen Sie nicht, eine neue <code>Commit Message</code> einzugeben.
markieren Sie <code>Remember, don't ask again</code> und beantworten die Frage mit <code>Yes</code>.


Das Projekt ist nun im gewählten Ordner des Subversion-Repositories angelegt worden, aber es wurden noch keine Daten auf den Server übertragen.
Selektieren Sie im linken Bereich das Git-Icon und öffnen Sie den Reiter <code>Commit</code>.
Die WebStorm-Ansicht hat sich ebenfalls geändert: Im Dateibaum des WebStorm-Projektes wurde die Datei <code>index.html</code> grün eingefärbt
Dort sehen Sie eine Liste mit allen Commits. Wenn Sie einen Commitbereich öffnen, sehen Sie, welche Dateien dabei verändert wurden. Die Veränderungen können Sie betrachten, wenn Sie auf die einzelnen Dateien klicken.
und in die Hauptmenü-Leiste von WebStorm sind zwei neue VCS-Icons eingetragen worden.  


Falls die Datei <code>index.html</code> nicht grün eingefärbt wurde, müssen Sie sie per Hand unter die Versionkontrolle stellen:
Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszweigen (Branches), Zusammenführen von Entwicklungszweigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation.
* Rechtsklick auf diese Datei → <code>Subversion</code> → <code>Add to VCS</code>


Die beiden neuen Icons ermöglichen eine schnellen Zugriff
==Speichern eines Git-Repositories auf einem Git-Server==
auf die beiden wichtigsten Subversion-Befehle:


* VCS, zwei schwarze Punkte und ein grüner Pfeil durch Linien verbunden: ''Update Project''
Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten:
* VCS, zwei schwarze Punkte und ein dicker grüner Punkt durch Linien verbunden: ''Commit Project''
*{{Git-Server}}


Mittels ''Commit Project'' werden Änderungen, die auf dem Entwicklungsrechner lokal vorgenommen wurden, ins Subversion-Repository übertragen.
Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie '''kein Mitglied der Hochschule Augsburg''' sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie {{zB}} https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.)
Mittels ''Update Project'' werden Änderungen, die im Repository ({{iAllg}} auf einem anderen Rechner und/oder von einem anderen Entwickler) vorgenommen wurden, ins lokale Verzeichnis des Entwicklungsrechners übernommen. Es gibt noch diverse weitere Subversion-Befehle. Diese sind über den Dateibaum zugänglich:


* Rechtsklick auf den Projektnamen im Dateibaum → Klick auf <code>Subversion</code>
Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen.


Alle Dateien, die noch nicht im Repository enthalten sind (zurzeit sind noch überhaupt keine Daten darin enthalten), werden aufgelistet.
Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein:
Neben der von Ihnen erstellten Datei <code>index.html</code> gibt es noch einen Ordner namens <code>.idea</code>, der WebStrom-spezifische Projekt-Dateien enthält.
* <code>git remote add origin {{Git-Server}}/ACCOUNT/HelloWorld01.git</code> ('''Ersetzen Sie <code>ACCOUNT</code> durch Ihren RZ-Account.''')
Sie könnten theoretisch bestimmte Dateien deselektieren, um sie nicht ins Repository zu übertragen. Das wäre hier aber kontraproduktiv.
*  <code>git remote -v</code>
Im Gegenteil, falls es Dateien gibt, die nicht unter Versionskontrolle stehen, fügen Sie sie durch einen Klick auf das Feld <code>Unversioned Files</code> hinzu.


Tragen Sie in das Feld <code>Commit Message</code> einen sinnvollen Änderungstext ein, wie
Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist.
{{zB}} „<code>HelloWorld01 created.</code>“ ein.
(Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist <code>origin</code>. Sie können aber theoretisch auch jeden anderen Namen wählen.
Klicken Sie dann auf <code>Commit</code> (dt.: ''übergeben'').


Üblicherweise werden in Projekten englische Dateinamen, Variablenbezeichner, Kommentare (einschließlich Subversion-Kommentaren)  
Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie {{zB}} vergessen haben <code>ACCOUNT</code> durch Ihren RZ-Account zu ersetzen),
verwendet, um internationale Programmierer um Rat fragen (Diskussionsforen) oder sogar als Teammitglieder einstellen zu können.
können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_


Die Farbe der Datei <code>index.html</code> ändert sich bei einem erfolgreichen Commit abermals. Sie wird wieder schwarz.
*  <code>git remote remove origin</code>
Das bedeutet: Der Inhalt dieser Datei stimmt mit dem Inhalt der im Repository gespeicherten Version überein.
*  <code>git remote -v</code>
Sobald der Inhalt der lokalen Version der Datei geändert wird, wird der Dateiname blau eingefärbt.
*  <code>git remote add origin {{Git-Server}}/ACCOUNT/HelloWorld01.git</code> ('''Ersetzen Sie auch diesmal <code>ACCOUNT</code> durch Ihren RZ-Account.''')</code>
Neue Dateien werden – wie bereits gesehen – grün eingefärbt.
* <code>git remote -v</code>
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 {{zB}} mittels


* Rechtsklick auf eine Datei im Dateibaum → Klick auf <code>Subversion</code> → Klick auf <code>Show History</code>
Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren:


zugreifen. Das heißt, es ist unnötig und sogar kontraproduktiv, lokale Versionen einer Datei anzulegen: <code>index.html</code>, <code>index.html.v01</code>, <code>index.html.v02</code>, ...
* <code>git push</code>


Um verschiedene Versionen im Versionskontrollsystem unterscheiden zu können, sind die Kommentare, die Sie beim
Beim ersten Mal müssen Sie allerdings <code>git push -u origin master</code> eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories <code>origin</code> eingefügt werden soll. Sie werden nach einem Benutzernamen und einem Passwort gefragt. Geben Sie Ihren RZ-Account an.
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ägnant zu beschreiben (mittels eines Einzeilers).
.
'''Anmerkung''': Falls der Commit einmal mit der Meldung <code>Performing VCS refresh</code> hängen bleibt, hilft Folgendes


* <code>File</code> → <code>Invalidate Caches / Restart...</code> → <code>Invalidate and Restart</code>
Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt <code>HelloWorld01</code> zu sehen sein.
Achtung: Dort ist nicht nur die aktuelle Version des Projektes gespeichert, sondern auch der Versionsbaum. Sie können die Geschichte einer Datei auch im Browser untersuchen.


==Projekte aus einem Subversion-Repository laden==
Anmerkung: Am linken unteren Rand des VSC-Fensters finden Sie wichtige Git-Informationen:
Den aktuellen Git-Zweig (<code>master</code>) und die Anzahl der Dateien, die von Gitlab herunter bzw. dorthin hochgeladen werden können. Wenn Sie die entsprechenden Icons klicken. wird <code>git pull</code> bzw. <code>git push</code> ausgeführt.


Projekte, die in einem Subversion-Repository gespeichert sind, können mit einem beliebigen [[Subversion/HowTo|Subversion-Client]] auf Ihren Rechner laden.
==Lizenz hinzufügen==
Sofern Sie Schreibrechte für das Repository haben, können Sie danach Ihre Änderungen auch wieder per Commit ins Repository einspielen.


Damit ist Subversion (wie die meisten anderen Versionsverwaltungssysteme auch) sehr gut für Teamprojekte geeignet:
In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein:
Zunächst muss ein Versionsverwaltungssysteme ({{dh}} Subversion-Repository) verfügbar sein,
auf das alle Teammitglieder lesend und schreibend zugreifen können.  Ein Teammitglied fügt ein neues Projekt in dieses System ein.
Alle anderen Teammitglieder laden dieses Projekt auf ihren jeweiligen Entwicklungsrechner. Jedes Mal, wenn ein Teammitglied eine
signifikante Änderung am Projekt vorgenommen hat, testet er diese ausgiebig, bereinigt evtl. noch vorhandene Fehler
und com­mit­tet diese Änderungen dann (nicht früher). Wenn sich jeder Entwickler mit seiner eigenen Kennung mit dem Versionsverwaltungssystem
verbindet, kann in der Änderungshistorie jederzeit nachgesehen werden, wer für welche Änderung verantwortlich ist.
Das ist insbesondere dann wichtig, wenn zwei Entwickler ohne Absprache denselben Code gleichzeitig ändern und committen
wollen. Dann kann es nämlich zu einem sogenannten Mergekonflikt kommen: Der Entwickler, der seine Änderungen
als Zweiter committen will, würde damit die Änderungen, die der erste Entwickler bereits committet hat, einfach überschreiben.
Das wird vom Versionsverwaltungssystem verhindert. Der zweite Entwickler muss den Mergekonflikt von Hand – aber mit Unterstützung des
Versionsverwaltungssystems – beheben.


Um Mergekonflikte nach Möglichkeit zu vermeiden, ist die Modularisierung von Softwareprojekten, die im Teamarbeit erstellt werden,
* Öffen Sie das Projekt im Browser.
von zentraler Bedeutung. Aber auch für Einzelentwickler ist der Einsatz eines Versionsverwaltungssystems vorteilhaft,
* Klicken Sie auf <code>Add license</code>
da er für alle wesentlichen Projektversionen stets einen Backup zur Verfügung hat. Da ein Versionsverwaltungstool
* Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: [https://de.wikipedia.org/wiki/MIT-Lizenz MIT-Lizenz])  
üblicherweise auf einem externen Server läuft, ist dieses Backup sogar räumlich vom Entwicklungsrechner getrennt.
* <code>Commit changes</code>
'''Allerdings nützt das beste Versionsverwaltungstool nichts, wenn Sie nicht regelmäßig (getestete) Zwischenstände committen und damit dauerhaft abspeichern.'''


<strong>In der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|MMProg]],  
Wenn Sie nun in VSC <code>git fetch</code> ins Terminal eingeben, wird die neue LIZENZ-Datei in ihre lokale Kopie des Projektes übertragen.
für die dieses Tutorium entwickelt wurde, müssen sowohl Einzel- als auch Teamprojekte auf die zuvor beschriebene Weise realisiert werden.</strong>
Daher soll das Laden eines bereits vorhandenen Projektes geübt werden.  


Für jedes Tutorium in diesem Wiki gibt es eine Musterlösung im Subversion-Repository <code>https://glossar.hs-augsburg.de/beispiel</code> des Wikis.
==Projekte aus einem Git-Repository laden==
Die Musterlösung für das aktuelle Tutorium kopieren Sie folgendermaßen auf Ihren Rechner.
(Beachten Sie, dass Sie nur lesend auf das GlossWiki-Subversion-Repository zugreifen können. Das heißt, Sie können die Musterlösungen
nur lokal, aber nicht im GlossarWiki-Repository ändern.)


Starten Sie WebStorm. Wenn der Startbildschirm mit den drei Möglichkeiten ein Projekt zu öffnen erschient, klicken Sie auf <code>Check out from Version Control</code>.
Unter {{Git-Server}}/kowa/WK_HelloWorld01.git finden Sie eine Musterlösung dieser Aufgabe.
Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen ([[GitHub]], [[CVS]], [[Git]], [[Mercurial]] und [[Subversion]]) .
Öffnen sie diese URL in einem Browser. Auf der Web-Seite sehen Sie
Sie wählen <code>Subversion</code> aus.
ein Drop-Down-Menü mit den beiden Labeln <code>SSH</code> und <code>HTTPS</code>.  
In den zugehörigen Textboxen steht jeweils ein Link, den Sie zum Kopieren des Projektes
auf Ihren Rechner verwenden können. Der SSH-Link wird {{iAllg}} verwendet, wenn
Sie die Git-Befehle von der Konsole absetzen. Dazu müssten Sie allerdings ein
Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen.


Anderenfalls klicken Sie auf <code>VCS</code> → <code>Check out from Version Control</code> → <code>Subversion</code>.
In VSC ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung:
<div class="formula"><code>{{Git-Server}}/kowa/WK_HelloWorld01.git</code></div>


In beiden Fällen öffnet sich das schon bekannte Fenster mit einer Liste von verfügbaren Repositories.
Wenn Sie diesen Link im Browser öffnen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeleitet.
Tragen Sie – sofern es nicht bereits vorhanden ist – mittels eines Klicks auf das Plus-Symbol
das Repository <code>https://glossar.hs-augsburg.de/beispiel/</code> in diese Liste ein.


Öffnen Sie durch Klicks auf die Dreiecke vor dem jeweiligen Verzeichnis den Dateipfad
Sie wollen aber den Inhalt des Repositories auf Ihrem Rechner speichern.
<div class="formula">
Wechseln Sie dazu im Terminal mittels <code>cd</code> in ein Verzeichnis Ihrer Wahl.
<code>https://glossar.hs-augsburg.de/beispiel</code> → <code>tutorium</code> → <code>es5</code> → <code>hello_world</code> → <code>WK_HelloWorld01</code>  
Wenn Sie beispielsweise <code>cd ..</code> eingeben, landen Sie in dem Ordner,
</div>
in dem sich ihr Hello-World-01-Projekt befindet. Hier können Sie mein Projekt einfügen:


Zum Schluss sollte der Ordner <code>WK_HelloWorld01</code> selektiert sein.
<source lang="bash">
Klicken Sie auf <code>Checkout</code>, wählen Sie in dem Dateibrowser, der sich daraufhin öffnet,
cd ..  # cd <beliebigen Ordner Ihrer Wahl>
einen geeignet Speicherort ({{zB}} neben aber nicht in(!) Ihrem eigenen Projekt <code>HelloWorld01</code>)
        # Der Ordner sollte aber nicht unter
und klicken Sie auf <code>OK</code>.
        # der Kontrolle von Git stehen!!
ls -al
git clone  {{Git-Server}}/kowa/WK_HelloWorld01.git
ls -al
</source>


Daraufhin öffnet sich ein Fenster, in dem Sie festlegen sollen, in welchem Unterverzeichnis des zuvor gewählten Verzeichnisses
Nun können Sie die lokale Kopie mittels <code>File</code> → <code>Open Folder</code> in VSC öffnen.<br/>
das Projekt lokal gespeichert soll (<code>Destination</code>). Wenn Sie zuvor das Elternverzeichnis gewählt haben, in dem auch Ihr Projekt
Oder Sie fügen den neuen Ordner mittels <code>File</code> → <code>Add Folder to Workspace</code> zu Ihrem aktuellen Workspace hinzu. Dann stehen Ihnen in VSC beide Projekte zur Bearbeitung zur Verfügung. Allerdings sollten Sie dann zwei Terminals mit den jeweiligen Wurzel-Verzeichnissen der beiden Projekte öffnen. Oder Sie wechseln im Terminal mittels <code>cd</code> zwischen den Wurzelverzeichnissen hin und her.  
<code>HelloWorld01</code> liegt, sollten Sie den zweiten der angebotenen Pfade selektieren.
Anschließend klicken Sie abermals auf <code>OK</code>, wählen das Format 1.8 und klicken zum dritten Mal  <code>OK</code>.  
Danach stellt Ihnen WebStorm noch zwei Fragen. Sie sollten das Projekt öffnen (erste Frage). Ob Sie im Gegenzug das zuvor geöffnete
Projekt schließen wollen oder nicht (zweite Frage), müssen Sie selbst entscheiden.  


Nun ist die Musterlösung lokal verfügbar. Sie können sie auf dieselbe Art wie ihr eigenes Projekt ansehen, ausführen und '''lokal''' ändern.  
Allerdings können Sie Ihre Änderungen nicht mittels <code>git push</code> in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt. Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern.
Ein Commit ist allerdings – wie bereits gesagt – nicht möglich. Versuchen Sie es ruhig.
Diesen Vorgang nennt man „forken“ oder „einen Fork erstellen“ (Fork = Gabel, Verzweigung).


==Fortsetzung des Tutoriums==
==Fortsetzung des Tutoriums==
Zeile 468: Zeile 349:
<references/>
<references/>
<ol>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li value="3"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

Version vom 26. März 2021, 15:00 Uhr

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 Musterlösung: index.html (Git-Repository)

Ein neues Projekt erstellen

  • Visual Studio Code (VSC) starten
  • File → Open Folder
  • Erstellen Sie unter einem sinnvollen Pfad auf Ihrem Rechner einen neuen Ordner (z. B. .../webprog/hello_world/HelloWorld01 und öffnen Sie diesen Ordner.

Links sehen Sie ein Icon bestehend aus zwei übereinander liegenden Papierblättern. Wenn Sie darauf klicken, sehen einen Dateibaum mit dem soeben geöffneten Ordner. Er enthält noch noch keine Dateien.

Der Ordnernamen wird mit Großbuchstaben dargestellt. Wenn Sie die Maus über diesen Ordnernamen bewegen, erscheinen Icons zum Erzeugen von Dateien und Ordnern (sowie zwei weitere Icons). Erstellen Sie eine HTML-Datei index.html.

Die HTML-Datei mit Inhalten füllen

Im nächsten Schritt wird die HTML-Datei mit Inhalten gefüllt: 

<!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>

Speichern Sie die Datei (STRG/CTRL/CMD-s). Im Reiter OPEN EDITORS wird angezeigt, ob es nicht gespeicherte Dateien gibt. Dort befindet sich auch ein Icon, um alle nicht gespeicherten Dateien auf die Festplatte zu schreiben. Man vergisst leider häufig, eine Datei zu speichern, bevor man sie in einem Browser öffnet und wundert sich dann, warum man keine Änderungen sieht. (In dieser Hinsicht ist WebStorm besser. Hier werden Dateien automatisch gespeichert, wenn sie für eine Browser-Darstellung benötigt werden.)

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit sie den nachfolgenden 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 (<html lang="en"> und </html>) 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 stehen die beiden wesentlichen Bereiche eines HTML-Dokuments, der Head- und der Body-Bereich.

Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Content-Bereich des Browsers angezeigt werden sollen.

Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische Vertreter sind der Titel des Dokuments, der im Browser-Tab 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].

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 platziert werden, werden um zwei Leerzeichen weiter eingerückt, als ihre Eltern-Tags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.) 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 wie viele 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 Versionsverwaltungssystems) 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 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-Element sondern auch das head-Element und das body-Element am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und jedes mal 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 nicht notwendig, d. h. für HTML-Seiten, die keinen Python-, PHP-, Java-, JavaScript- oder sonstigen Code enthalten, der ausgeführt werden muss, bevor die Seite an den Client (Browser) ausgeliefert wird.

In diesem Tutorium werden nur HTML-Seiten erstellt, die JavaScript-Code enthalten. Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden, nachdem die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde. Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten und JavaScript-Dateien auszuliefern. Ein derartiger Server ist in VSC enthalten (wenn Sie die Erweiterung Life Server installiert haben). Daher ist das Testen der Web-Anwendung ganz einfach.

Klicken Sie im Dateibaum von VSC mit der rechten Maustaste auf index.html und klicken Sie dann auf Open with Life Server. Nach kurzer Zeit öffnet sich im Standardbrowser die HTML-Seite, die man gerade erstellt hat.

Ersetzen Sie in der Datei index.html den veralteten Titel Multimedia Programming durch den neuen Titel der Veranstaltung Web Programming. Sobald Sie die Datei speichern, sollte sich im Browser der Inhalt automatisch aktualisieren. Der Life Server von VSC fügt der HTML-Datei eine JavaScript-Code hinzu, der dafür sorgt, dass die Seite im Browser jedes Mal neu geladen wird, sobald sich der Inhalt in VSC ändert.

Diesen Code können Sie sehen, wenn Sie im Browser den HTML-Code untersuchen (Firefox uns Safari: Rechtsklick → Element untersuchen, Chrome: Rechtsklick → Untersuchen). Wenn Sie im Inspektor das html- und dann das body-Element öffnen, sehen Sie den zusätzlich JavaScript-Code den der VSC-Server ans Ende vom Body eingefügt hat.

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 VSC folgendermaßen festgelegt werden:

  • Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von index.html, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint.
  • Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet..

Sie können den Default-Browser in VSC jederzeit ändern, indem sie den gewünschten Browser in die settings.json eintragen: vscode-live-server/docs/settings.md

Vermeidung von Sonderzeichen in Dateinamen

Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen öffentlich zugänglichen Web-Server gelegt werden soll, sollten Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten:

  • keine Leerzeichen in Datei- und Ordnernamen
  • keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen
  • strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen

Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer ist die Groß- und Kleinschreibung. Wenn Sie eine Datei main.js erzeugen und diese in einer Datei index.html unter dem Namen Main.js einbinden, funktioniert Ihre Anwendung auf Ihrem Windows-Rechner einwandfrei, da unter Windows bei Dateinamen zwischen Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren, funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden.

Speichern der Web-Anwendung in einem Git-Repository

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

Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in VSC und geben Sie dort git --version ein. Wenn sich Git mit einer Versionsnummer meldet, haben Sie das Tool korrekt installiert.

Überprüfen Sie nun, ob Sie sich im Terminal im Wurzelverzeichnis Ihres Projektes befinden. Nun können sie im Terminal Git für Ihr Projekt aktivieren: 

git init

Daraufhin wir im Wurzelordner des Projektes ein Ordner namens .git angelegt. Dieser wird im Dateibaum üblicherweise nicht angezeigt, da der Name mit einem Punkt beginnt. Sie können ihn aber trotzdem anzeigen: 

ls -al
ls -al .git

In diesem Ordner sind alle Versionen Ihres Projektes gespeichert. Diese werden jedes Mal gespeichert, wenn Sie git commit ausführen. Allerdings werden nur Dateien gesichert, die zuvor mit git add hinzugefügt wurden.

VSC nimmt Ihnen diese Arbeit ab. Klicken Sie im linken Menü auf das Icon mit den drei Kreisen, die durch zwei Linien verbunden sind. Damit öffnet sich der Git-Dateibrowser (Source Control). Eventuell müssen Sie das Reload-Icon hinter SOURCE CONTROL anklicken, um die zuletzt geänderten DAateien zu sehen.

Schreiben Sie in das Feld Message den Text Initial Commit (wenn Sie sich an die Konvention halten möchten, alle Kommentare in Englisch zu schreiben). Klicken Sie dann auf das Haken-Icon hinter dem Text SOURCE CONTROL. Daraufhin erscheint eine Alert-Box, dass keine „staged changes“ vorhanden seien. Man wird gefragt, ob mal alle Änderungen „stagen“ und dann direkt committen wolle. Auf gut Deutsch wird man gefragt, ob man alle Dateien, die in der Dateiliste mit einen U markiert sind, ins Git-Repository einfügen wolle. Da Sie das wollen, klicken Sie auf Ja. (Irgendwann werden Sie auf Immer klicken, sobald Sie die ständigen Nachfragen nerven.)


Wenn Sie jetzt eine Änderung an der Datei index.html vornehmen (z. B. indem Sie Sie den Titel in Hello World 01 ändern), listet VSC die geänderte Datei im Git-Dateibaum auf und markiert sie mit einen M, sobald sie die Änderungen speichern. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels Commit gesichert wurde. Wenn Sie auf den Dateinamen klicken, sehen Sie, was sich geändert hat.

Sichern Sie auch diese Version der Datei mittels eines Commits. Vergessen Sie nicht, eine neue Commit Message einzugeben.

Selektieren Sie im linken Bereich das Git-Icon und öffnen Sie den Reiter Commit. Dort sehen Sie eine Liste mit allen Commits. Wenn Sie einen Commitbereich öffnen, sehen Sie, welche Dateien dabei verändert wurden. Die Veränderungen können Sie betrachten, wenn Sie auf die einzelnen Dateien klicken.

Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszweigen (Branches), Zusammenführen von Entwicklungszweigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation.

Speichern eines Git-Repositories auf einem Git-Server

Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten:

Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie kein Mitglied der Hochschule Augsburg sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie z. B. https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.)

Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen.

Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein:

Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist. (Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist origin. Sie können aber theoretisch auch jeden anderen Namen wählen.

Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie z. B. vergessen haben ACCOUNT durch Ihren RZ-Account zu ersetzen), können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_

Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren:

  • git push

Beim ersten Mal müssen Sie allerdings git push -u origin master eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories origin eingefügt werden soll. Sie werden nach einem Benutzernamen und einem Passwort gefragt. Geben Sie Ihren RZ-Account an.

Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt HelloWorld01 zu sehen sein. Achtung: Dort ist nicht nur die aktuelle Version des Projektes gespeichert, sondern auch der Versionsbaum. Sie können die Geschichte einer Datei auch im Browser untersuchen.

Anmerkung: Am linken unteren Rand des VSC-Fensters finden Sie wichtige Git-Informationen: Den aktuellen Git-Zweig (master) und die Anzahl der Dateien, die von Gitlab herunter bzw. dorthin hochgeladen werden können. Wenn Sie die entsprechenden Icons klicken. wird git pull bzw. git push ausgeführt.

Lizenz hinzufügen

In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein:

  • Öffen Sie das Projekt im Browser.
  • Klicken Sie auf Add license
  • Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: MIT-Lizenz)
  • Commit changes

Wenn Sie nun in VSC git fetch ins Terminal eingeben, wird die neue LIZENZ-Datei in ihre lokale Kopie des Projektes übertragen.

Projekte aus einem Git-Repository laden

Unter https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld01.git finden Sie eine Musterlösung dieser Aufgabe. Öffnen sie diese URL in einem Browser. Auf der Web-Seite sehen Sie ein Drop-Down-Menü mit den beiden Labeln SSH und HTTPS. In den zugehörigen Textboxen steht jeweils ein Link, den Sie zum Kopieren des Projektes auf Ihren Rechner verwenden können. Der SSH-Link wird i. Allg. verwendet, wenn Sie die Git-Befehle von der Konsole absetzen. Dazu müssten Sie allerdings ein Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen.

In VSC ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung:

https://gitlab.multimedia.hs-augsburg.de/kowa/WK_HelloWorld01.git

Wenn Sie diesen Link im Browser öffnen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeleitet.

Sie wollen aber den Inhalt des Repositories auf Ihrem Rechner speichern. Wechseln Sie dazu im Terminal mittels cd in ein Verzeichnis Ihrer Wahl. Wenn Sie beispielsweise cd .. eingeben, landen Sie in dem Ordner, in dem sich ihr Hello-World-01-Projekt befindet. Hier können Sie mein Projekt einfügen: 

cd ..   # cd <beliebigen Ordner Ihrer Wahl>
        # Der Ordner sollte aber nicht unter 
        # der Kontrolle von Git stehen!!
ls -al
git clone  {{Git-Server}}/kowa/WK_HelloWorld01.git
ls -al

Nun können Sie die lokale Kopie mittels File → Open Folder in VSC öffnen.
Oder Sie fügen den neuen Ordner mittels File → Add Folder to Workspace zu Ihrem aktuellen Workspace hinzu. Dann stehen Ihnen in VSC beide Projekte zur Bearbeitung zur Verfügung. Allerdings sollten Sie dann zwei Terminals mit den jeweiligen Wurzel-Verzeichnissen der beiden Projekte öffnen. Oder Sie wechseln im Terminal mittels cd zwischen den Wurzelverzeichnissen hin und her.

Allerdings können Sie Ihre Änderungen nicht mittels git push in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt. Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern. Diesen Vorgang nennt man „forken“ oder „einen Fork erstellen“ (Fork = Gabel, Verzweigung).

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]
  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_01&oldid=50354“