HTML5-Tutorium: JavaScript: Hello World 04
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) |
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)
Anwendungsfälle (Use Cases)
Gegenüber dem dritten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.
In diesem Teil des Tutoriums geht es darum, die Anwendung zu verbessern, so dass sie schneller ausgeliefert werden kann.
Erstellen eines neuen Projektes
Erstellen Sie ein neues Projekt „HelloWorld04“ und legen Sie dieses in Ihrem Repository ab.
Kopieren Sie anschließend alle Dateien aus dem dritten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und committen Sie abermals.
Erstellen einer Ordnerstruktur
Grundsätzlich gilt auch bei der Programmierung: Ordnung ist das halbe Leben.
Web-Anwendungen werden sehr schnell sehr groß. Also sollte man sich eine geeignete Ordnerstruktur überlegen.
Üblicherweise legt man CSS-Dateien in einen Ordner namens „css“ und JavaScript-Dateien in einen Ordner namens
„js“. Sollten es viele CSS- und/oder JavaScript-Datein werden, leget man im entsprechenden Ordner geeignete Unterordner an
Öffnen Sie im Editorbereich die Datei „index.html“.
Erstellen Sie dann die beiden Ordner „css“ sowie „js“
und verschieben Sie anschließend die Dateien „main.css“ und „main.js“
in die passenden Ordner. Sie werden feststellen, dass die Verweise in den Link- und Script-Elementen der
Datei „index.html“ automatisch angepasst werden.
Laden der CSS- und der JavaScript-Dateien
Eine Web-Anwendung funktioniert nur – wie Sie bereits erfahren haben –, wenn nicht nur die HTML-Datei, sondern auch die zugehörigen CSS- und JavaScript-Dateien geladen werden. Allerdings gibt es dabei ein Problem: Die CSS- und JavaScript-Dateien werden im Laufe der Zeit immer zahlreicher und/oder größer. Diese Dateien zu laden, dauert seine Zeit.
In der aktuellen Version der Web-Anwendung stehen diese Verweise auf diese Dateien im head-Bereich des Dokuments.
Dieser wird vollständig geladen, bevor der body-Bereich eingelesen wird. Das heißt aber, dass der Browser keine Inhalte des HTML-Dokuments
darstellen kann, solange er die JavaScrip- und CSS-Dateien lädt. Wenn dies zu lange dauert, verliert der Besucher die Geduld und verläßt die Seite
vorzeitig.
Besser wäre es daher andersherum vorzugehen: Es wird zuerst der body-Bereich geladen und dan die JavaScript- und die CSS-Dateien.
Im Falle von JavaScript ist das durchaus sinnvoll, aber im Falle von CSS hat das den Effekt, dass der Browser keine LAyout-Vorgaben erhalten hat,
wenn er mit dem Rendern der Seite beginnt. Also verwendet er die browserspezifischen Defaultwerte. Das heißt, die Seite sieht zunächst
ganz anders aus, als vom Designer geplant. Wenn dann die CSS-Dateien geladen wurden, wird die Seite erneut reendert und verändert ihr Aussehen.
Auch das ist verwirrend und wirkt unprofessionell.
Was also machen?
TO BE DONE
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
