HTML5-Tutorium: JavaScript: Hello World 03

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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)

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>
  <label for="input_name">
    <span  id="label_name">What's your name?</span>
    <input id="input_name" type="text" name="input_name" autofocus="autofocus"/>
  </label>
  <div id="buttons">
    <button id="reset"  type="reset">Reset</button>
    <button id="submit" type="submit">Send</button>
  </div>
</form>

Er wird in die erste Section hinter die Überschrift eingefügt.

TO BE DONE

Fortsetzung des Tutoriums

Sie sollten nun Teil 4 des Tutoriums bearbeiten.

Quellen

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_03&oldid=40802“