Aufgabe 1: Ein neues Webprojekt erstellen
Im Rahmen dieses Übungsblatts werden wir zunächst unterschiedliche Möglichkeiten ausprobieren, JavaScript in eine Webseite zu integrieren.
Die Bearbeitung des Codes von JavaScript- und HTML-Dateien kann durch einen einfachen Editor erfolgen. Vorteilhaft ist es, wenn sich dieser mit Hilfe von Erweiterungen zu einer kompletten Entwicklungsumgebung erweitert lässt, wie man dies z. B. von Processing gewohnt ist.
Die Editoren der "Atom-Familie" bieten diese Möglichkeit. Das Installieren der Erweiterungen geschieht bei diesen Editoren über das Internet. Die Erweiterungen werden im jeweiligen Benutzerprofil gespeichert. Dies hat den Vorteil, das für die Installation von Erweiterungen keine Administratorrechte erforderlich sind.
Zu den Editoren der "Atom-Familie" gehört der Atom-Editor selbst, sowie die auf seiner Grundlage entwickelten Editoren Brackets und Visual Studio Code (VSCode), welches wir hier im Labor einsetzen werden.
Visual Studio Code ist schon in der Basisausstattung recht
umfangreich ausgestattet, sodass für die Webentwicklung zunächst
nur die Extension LiveServer installiert werden sollte. Diese
Extension ermöglicht die dynamische
Bearbeitung einer Webseite, während diese im Browser angezeigt
wird. Jede an der Webseite vorgenommene Änderung wird sofort im
Webbrowser angezeigt (ggf. ist vorher noch das Speichern der
Seite erforderlich). Um die Extension zu installieren, starten
Sie zunächst VSCode und rufen dann im Programm mit CTRL+Shift+x
zunächst die Extension-Anzeige auf. Tippen Sie dort im
Suchdialog "Live Server" ein. Wählen Sie diesen dann aus der
angezeigten Liste aus und drücken Sie in der angezeigten
Extensionseite Install.
Für die Arbeit unter VSCode erzeugen Sie zunächst ein
Verzeichnis mit einem Namen Ihrer Wahl, z. B. Webentwicklung,
an einem Ort Ihrer Wahl. Öffnen Sie dann das soeben erzeugte
Verzeichnis in VSCode mit Datei > Ordner
öffnen.... Erzeugen Sie dort eine neue Datei mit Datei
> Neue Datei. Speichern Sie die Datei mit Steuerung-s. Z. B. als Übungsblatt1.html.
Vermeiden Sie Dateinamen mit Sonderzeichen, wie z. B. "-". Dies
führt zu Problemen beim LiveServer.
Ein wichtiges Werkzeug für die Webentwicklung ist Emmet. Dieses Hilfsprogramm bietet die Möglichkeit, HTML-Code mit Hilfe von Abkürzungen zu erstellen. Sie können Emmet gleich nutzen, um ein HTML5-Grundgerüst in Ihrer Datei anzulegen. Tippen Sie hierfür in Ihrer Datei in der ersten Zeile ein Ausrufezeichen gefolgt von einem Tabulator. Dies erzeugt das folgende HTML-Grundgerüst:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Viele Beispiele für Abkürzungen bietet der Cheat Sheet von Emmet. Dort finden Sie auch den oben genutzten Befehl für das Anlegen eines HTML-Grundgerüstes.
Wenn Sie noch keine Erfahrungen mit HTML und CSS haben, sollten Sie zunächst die drei Übungsblätter "Einführung in HTML", "HTML-Tabellen" und "CSS" bearbeiten, bevor Sie mit den Übungen dieses Übungsblatts fortfahren.
Nun zurück zu VSCode. Hier fügen Sie mit p und
danach gedrücktem Tab in den Körper- bzw. Body-Bereich Ihrer
HTML-Datei ein einfaches Paragraph-Element ein und in dieses den
Inhalt Hello World! Speichern Sie dann die Datei.
Bevor Sie die Datei anzeigen können, müssen Sie noch für Ihren
Account das Zusammenspiel zwischen VSCode und den vorhandenen
Webbrowsern regeln. Am besten funktioniert zur Zeit das
Zusammenspiel von VSCode mit einem Chromium-Browser, also z. B.
Chrome selbst oder Edge. Machen Sie deshalb entweder den
Chrome-Browser zu Ihrem Standardbrowser (unter Windows mit Start
> Einstellungen > Apps > Standard-Apps
> Webbrowser) oder verfahren sie wie folgt: Legen Sie
im Projektverzeichnis das Unterverzeichnis .vscode
an und in diesem die Datei settings.json.
Schreiben Sie dann folgenden Inhalt in die Datei:
{
"liveServer.settings.CustomBrowser" : "chrome",
}
Drücken Sie nach dem Speichern dieser Datei die am unteren Rand
von VSCode befindliche Go Live-Taste. Daraufhin wird
Chrome gestartet und die Webseite angezeigt. Arrangieren Sie die
Programme nun so auf dem Bildschirm, dass der Editor und der
Browser mit der angezeigten Webseite nebeneinander angezeigt
werden. Ändern Sie den Text des Paragraph-Elements im Editor und
speichern Sie wieder die Seite. Wie Sie sehen, werden die
Änderungen automatisch im Browser übernommen. In der Regel ist
es nicht einmal nötig, zu speichern, damit Änderungen an der
angezeigten HTML-Datei in die Browseransicht übernommen werden.
