HTML5-Tutorium: JavaScript: Hello World 03: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 111: | Zeile 111: | ||
mit Hilfe dieses Identifikators das Label-Element über das Attribut „<code>for</code>“ an das Textfeld gekoppelt werden. | mit Hilfe dieses Identifikators das Label-Element über das Attribut „<code>for</code>“ an das Textfeld gekoppelt werden. | ||
Damit weiß der Browser, auf welches Input-Element sich das Label-Element bezieht. Auch dies ist wieder besonders wichtig, wenn der | Damit weiß der Browser, auf welches Input-Element sich das Label-Element bezieht. Auch dies ist wieder besonders wichtig, wenn der | ||
Zusammenhang nicht optisch (per CSS) hergestellt werden kann bzw. hergestellt wird. | Zusammenhang nicht optisch (per CSS) hergestellt werden kann bzw. hergestellt wird. Damit lassen sich aber auch [[Checkbox]]es | ||
realisieren, die durch einen Klick auf den zugehörigen Label aktiviert und wieder deaktiviert werden können. | |||
Der Identifikator für den Submit-Button wird benötigt, um in JavaScript die Klick-Aktion des Benutzers abfangen zu können. | Der Identifikator für den Submit-Button wird benötigt, um in JavaScript die Klick-Aktion des Benutzers abfangen zu können. | ||
Version vom 21. September 2016, 17:38 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) |
Inhalt |
Teil 1 |
Teil 2 |
Teil 3 |
Teil 4 |
Teil 5 |
Teil 6
Musterlösung: index.html
(SVN-Repository)
Anwendungsfälle (Use Cases)
Gegenüber dem zweiten Teil des Tutoriums ändern sich die die Anwendungsfälle deutlich. Es soll nun nicht mehr die ganze Welt begrüßt werden, sondern der Benutzer, der die Web-Anwendung gestartet hat. Dazu muss er zunächst nach seinem Namen gefragt werden. Anschließend wird das HTML-Dokument mit Hilfe von JavaScript umgestaltet: Das Eingabeformular wird ausgeblendet und stattdessen wird die Begrüßungsformel angezeigt.
Erstellen eines neuen Projektes
Erstellen Sie ein neues Projekt „HelloWorld03“ und legen Sie dieses in Ihrem Repository ab.
Kopieren Sie anschließend die Dateien „HelloWorld02“ und „HelloWorld02“
aus dem zweiten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und committen Sie abermals.
Single-Page-Web-Anwendung
Die Anwendung wird als Single-Page-Web-Anwendung (Onepager) realisiert.
Das HTML-Dokument „index.html“ enthält zwei Abschnitte (sections),
eines mit einem Formular zur Eingabe des Namens und ein zweites zur Begrüßung des
Benutzers, nachdem er seinen Namen eingegeben hat.
Für jede Seite fügen wir in „index.html“
einen HTML-Abschnitt „<section id="..."> ...</section>“
ein. Das Section-Element gruppiert einen logischen Abschnitt oder ein Kapitel
eines HTML-Dokuments. Es soll laut Spezifikation
eine Überschrift enthalten, die das Thema des Abschnitts beschreibt. Man hätte auch ein Div-Element „<divn id="..."> ...</div>“
anstelle des Section-Elements verwenden können. Ein Div-Element hat keinerlei Semantik (Bedeutung), es dient lediglich der Strukturierung einer
HTML-Datei. Die (spezifikationsgemäße) Verwendung von Section- und Article-Elementen, die in HTML5 eingeführt wurden, hat den Vorteil,
dass Browser deren Bedeutung kennen und daher geeignete Defaultstyles verwenden können, falls der Entwickler keine entsprechenden Styles angibt.
Ein Beispiel sind Browser für Blinde. Derartige Browser lesen die Inhalte entweder vor oder geben sie textuell über eine sogenannte Braillezeile aus.
Für derartige Browser werden meist keine CSS-Layout-Vorgaben gemacht (obwohl dies problemlos möglich wäre) und daher ist es wichtig,
Strukturelementen eine Semantik zuzuordnen. Ein Blindenbrowser könnte beim Vorlesen eines Dokuments beispielsweise stets das Wort „Kapitel“
vor eine H1-Überschrift einfügen, die als erstes Element innerhalb eines Section-Elements steht.
<body>
<section id="section_form">
<h1>Hello, Stranger!</h1>
</section>
<section id="section_welcome">
<h1 id="text_hello">Hello, ...!</h1>
<p>Welcome to Multimedia Programming!</p>
</section>
</body>
Wenn Sie diese Datei ausführen, stellen Sie fest, dass sich nicht viel geändert hat. Anstelle einer Überschrift werden nun zwei angezeigt.
Allerdings wurden drei ID-Attribute in das Dokument eingefügt:
„id="section_form"“, „id="section_welcome"“ und „id="text_hello"“.
Jedes öffnende HTML-Element darf mit einem derartigen Attribut versehen werden. Allerdings darf es in einer HTML-Datei
keine zwei ID-Attribute mit demselben Namen geben.
Die Vergabe von ID-Attributen bringt zwei Vorteil mit sich: Zum einen können so bestimmte HTML-Element gezielt mittels CSS gestylt werden, und zum anderen können bestimmte HTML-Element gezielt mittels JavaScript modifiziert werden.
Im Browser soll zunächst nur der erste Abschnitt mit dem Formular angezeigt werden (id="section_form").
Um das zu erreichen, reicht es, folgenden Code in die CSS-Datei einzufügen.:
#section_welcome
{
display: none;
}
Machen Sie dies und testen Sie die Web-Anwendung erneut.
Definition eines HTML5-Formulars
Als nächstes muss das Formular erstellt werden, mittels dem der Name des Besuchers erfragt wird. Es soll folgende Elemente haben:
- ein Label, das besschreibt, welche Information vom Benutzer enigegeben werden soll
- ein Text-Feld, in das der Benutzer seinen Namen eingeben kann
- einen Reset-Button, um den Inhalt des Namenfeldes zu löschen
- einen Submit-Button, um dem Browser mitzuteilen, dass der Name vollständig eingegeben wurde
Der zugehörige HTML-Code sieht folgendermaßen aus:
<form>
<div>
<label for="input_name">What's your name?</label>
<input id="input_name" type="text" autofocus="autofocus"/>
</div>
<div>
<button type="reset">Reset</button>
<button id="button_submit" type="submit">Send</button>
</div>
</form>
Er wird in die erste Section hinter die zugehörige Überschrift eingefügt.
In diesem Formular („<form> ... </form>“) sind die vier zuvor genannten Elemente enthalten.
Je zwei davon sind mittels eines Div-Elements zu einer Gruppe zusammengefasst. Damit ist die Struktur des Formulars vorgegeben:
Jedes Div-Element steht in einer eigenen Zeile, die darin enthaltenen Elemente stehen jeweils hintereinander in einer Zeile.
Mittels CSS können die Elemente nun besser angeordnet werden: mehr Abstand von der Überschrift, mehr vertikaler Abstand
zwischen den Elementen, einheitliche Breite der Elemente etc. Wie sagt Captain Picard ganz richtig: „Machen Sie es so.“
Beachten Sie, dass zwei weitere ID-Attribute eingeführt wurden: „id="input_name"“ und „id="button_submit"“.
Diese werden für den Zugriff von JavaScript aus auf das Dokument benötigt. Über den Identifikator „input_name“ kann auf
den Inhalt des Textfeldes, d. h. auf den Namen, den der Benutzer eingegeben hat, zugegriffen werden. Außerdem kann
mit Hilfe dieses Identifikators das Label-Element über das Attribut „for“ an das Textfeld gekoppelt werden.
Damit weiß der Browser, auf welches Input-Element sich das Label-Element bezieht. Auch dies ist wieder besonders wichtig, wenn der
Zusammenhang nicht optisch (per CSS) hergestellt werden kann bzw. hergestellt wird. Damit lassen sich aber auch Checkboxes
realisieren, die durch einen Klick auf den zugehörigen Label aktiviert und wieder deaktiviert werden können.
Der Identifikator für den Submit-Button wird benötigt, um in JavaScript die Klick-Aktion des Benutzers abfangen zu können.
Normalerweise im Form-Element in einem Attribut namens „action“ ein URI angegeben. Dieser verweist auf eine
Serveradresse, an den die vom Benutzer erfassten Daten bei einem Klick auf den Submit-Button übermittelt werden.
In dieser Web-Anwendung werden keine Daten an einen Server übermittelt. Alle Benutzereingaben werden direkt
im Browser (per JavaScript) verarbeitet. Deshalb wird das Action-Attribut nicht benötigt.
Wenn alles zu Ihrer Zufriedenheit ausgefallen ist, sollten Sie den aktuellen Stand in Ihr Repository einspielen.
Interaktion mittels JavaScript
TO BE DONE
Fortsetzung des Tutoriums
Sie sollten nun Teil 4 des Tutoriums bearbeiten.
