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>
  <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="button">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 einen echten Submit-Button (type="submit") ü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 und als Submit-Button wird ein einfacher Button (type="button") eingesetzt.

Wenn alles zu Ihrer Zufriedenheit ausgefallen ist, sollten Sie den aktuellen Stand in Ihr Repository einspielen.

Interaktion mittels JavaScript

Erzeugen Sie eine leere JavaScript-Datei:

  • Rechtklick auf die Projektwurzel „HelloWorld03“ im Dateibrowser → New → JavaScript file
  • Name: „main.js“ → OK

Fügen Sie folgenden JavaScript-Code in diese Datei ein 

/**
 * Welcomes the user of the web app by displaying a welcome message
 * that includes his name. The name is fetched from a text input field.
 */
function greet()
{
  document.getElementById('text_hello'  ).innerHTML
    = 'Hello, ' + document.getElementById("input_name").value + '!';

  document.getElementById('section_form')   .style.display = 'none';
  document.getElementById('section_welcome').style.display = 'block';
}

/**
 * Initializes the web app.
 * Is to be called when the web app has been loaded completely.
 */
function init()
{
  document.getElementById('button_submit')
          .addEventListener('click', greet);
}

// So call init, when you are ready with loading.
window.onload = init;

Wenn Sie jetzt Ihre Anwendung test hat sich nichts geändert. Der Grund ist wie bei der Datei „main.css“ auch, dass die Datei „index.html“ nichts davon weiß, das ihr dieser JavaScript-Code zugeordnet ist. Das muss ihr erst bekannt gegeben werden. Fügen Sie folgende Zeile in der Head-Bereich der index.html ein: 

<script type="text/javascript" src="main.js"></script>

Nun wird nicht nur die CSS-Datei, sondern auch die JavaScript-Datei geladen, bevor der Body-Bereich der index.html eingelesen wird. Beachten Sie, dass folgender Code nicht erlaubt ist: 

<script type="text/javascript" src="main.js"/>

Die tieferen Gründe dafür werden sehr schö auf Stack Overflow beschrieben.

Testen Sie Ihre Anwendung nochmals. Sie sollten jetzt Ihren Namen in das Textfeld eingeben und dann „Say hello“ klicken können. Das Ergebnis sollte sein, dass Sie von Ihrer Anwendung persönlich begrüßt werden.

Im obigen Stückchen JavaScript-Code sind mehrere interesante Dinge zu entdecken.

  1. Alle Befehle innerhalb einer JavaScript-Datei werden der Reihe nach abgearbeitet, wenn sie geladen wird. In der Datei „main.js“ gibt es insgesamt drei Befehle: Zwei Funktionsdefinitionen und eine Wertzuweisung.
  2. Bei den Funktionen „greet“ und „init“ handelt es sich um sogenannte Observer-Funktionen. Derartige Funktionen werden immer dann aktiviert, wenn ein bestimmtes Ereignis eintritt.

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=40839“