HTML5-Tutorium: JavaScript: Hello World 03: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 52: Zeile 52:
Wenn Sie diese Datei ausführen, stellen Sie fest, dass sich nicht viel geändert hat. Anstelle einer Überschrift werden nun zwei angezeigt.
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:  
Allerdings wurden drei <code>id</code>-Attribute in das Dokument eingefügt:  
„<code>id="section_form"</code>“, „<code>id="section_welcome"</code>“ und „<code>id="text_hello"</code>“.
„<code>id="section_form"</code>“, „<code>id="section_welcome"</code>“ und „<code>id="text_hello"</code>“.
Jedes öffnende HTML-Element darf mit einem derartigen Attribut versehen werden. '''Allerdings darf es in einer HTML-Datei
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.'''
keine zwei <code>id</code>-Attribute mit demselben Namen geben.'''


Die Vergabe von ID-Attributen bringt zwei Vorteil mit sich: Zum einen können  
Die Vergabe von <code>id</code>-Attributen bringt zwei Vorteil mit sich: Zum einen können  
so bestimmte HTML-Element gezielt mittels CSS gestylt werden, und zum anderen können
so bestimmte HTML-Element gezielt mittels CSS gestylt werden, und zum anderen können
bestimmte HTML-Element gezielt mittels JavaScript modifiziert werden.
bestimmte HTML-Element gezielt mittels JavaScript modifiziert werden.
Zeile 106: Zeile 106:
zwischen den Elementen, einheitliche Breite der Elemente etc. Wie sagt [[Captain Picard]] ganz richtig: „Machen Sie es so.“  
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: „<code>id="input_name"</code>“ und „<code>id="button_submit"</code>“.
Beachten Sie, dass zwei weitere <code>id</code>-Attribute eingeführt wurden: „<code>id="input_name"</code>“ und „<code>id="button_submit"</code>“.
Diese werden für den Zugriff von JavaScript aus auf das Dokument benötigt. Über den Identifikator „<code>input_name</code>“ kann auf
Diese werden für den Zugriff von JavaScript aus auf das Dokument benötigt. Über den Identifikator „<code>input_name</code>“ kann auf
den Inhalt des Textfeldes, {{dh}} auf den Namen, den der Benutzer eingegeben hat, zugegriffen werden. Außerdem kann  
den Inhalt des Textfeldes, {{dh}} auf den Namen, den der Benutzer eingegeben hat, zugegriffen werden. Außerdem kann  

Version vom 23. September 2016, 10:47 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)

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.addEventListener('load', init);

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

  1. Alle Befehle innerhalb einer JavaScript-Datei werden der Reihe nach abgearbeitet, sobaldsie 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. Die Funktion „greet“ wird aufgerufen, sobald der Submit-Button gedrückt wird, die Init-Funktion wird aufgerufen, sobald die Web-Anwendung vollständig geladen ist.
  3. Beide Funktionen machen regen Gebrauch vom JavaScript-System-Objekt „document“, das das Document Object Model, d. h. die interne Darstellung des HTML-Dokuments als sogenannten DOM-Baum beinhaltet (siehe MDN-API-Dokumentation). Mit Hilfe der Methode „getElementById“ kann man besonders elegant auf bestimmte Elemente des DOM-Baus zugreifen, sofern man zuvor im HTML-Dokument für die entsprechenden Elemente id-Attribute definert hat (was wir gemacht haben).
  4. Für jedes Element des DOM-Baums gibt es diverse elementspezifische Attribute. So kann man „innerHTML“ auf den HTML-Code eines Elements wie „p“ (Paragraph), „h1“ (Hauptüberschrift), „h2“ (Überschrft der 2. Stufe) etc. lesend und schreibend zugreifen. Das Attribut „value“ ermöglicht einen lesenden und schreibenden Zugriff auf den Inhalt von Formularfeldern. Über das Attribut „style“ hat man Zugriff auf den CSS-Style eines jeden HTML-Elements, das vom Browser gerendert wird. Man kann damit nicht nur jeden CSS-Wert eines Elements lesen, sondern auch verändern. Wir nutzen das aus, indem wir die Formularabschnitt „section_form“ unsichtbar und dafür den Begrüßungsabschnitt „section_welcome“ sichtbar machen, sobald die Funktion „greet“ ausgeführt wird. Es werden also die Werte, die aus in der CSS-Datei gelsen wurden, nachträglich dynamisch geändert.
  5. Der dritte Befehl „window.addEventListener('load', init);“ übergibt die Funktion „init“ (und nicht etwa den Funktionsaufruf init()) dem JavaScript-System-Objekt „window“ mit der Bitte, dies Methode auszuführen, sobald das load-Ereignis eintritt. Das hat zur Folge, dass die Funktion init nicht sofort aufgerufen wird, sondern erst – durch den Observer – sobald das Ereignis „der Inhalt des aktuelle Browserfensters wurde vollständig geladen“ eintritt (siehe MDN-API-Dokumentation).
  6. Auch für den Submitbutton wird ein Eventlistener registriert. Die Funktion „greet“ soll ausgeführt werden, sobald für diesen Button das click-Ereignis eintritt. Diese Zuordnung kann allerdings erst passieren, wenn der Submit-Button sich auch im DOM-Baum befindet. Das ist jedoch sicher erst der Fall, wenn das gesamte Dokument geladen wird. Daher diese Zuordnung nicht sofort, sondern in der Init-Funktion durchgeführt. (Das window-Objekt existiert dagegen von Anfang an, d. h. auch wenn der DOM-Baum noch nicht geladen wurde.)

Wenn Sie jetzt Ihre Anwendung testen, 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. Wenn alles funktioniert, sollten Sie wieder comitten.

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