HTML5-Tutorium: JavaScript: Hello World 03: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 28: | Zeile 28: | ||
ein. Das Section-Element gruppiert einen logischen Abschnitt oder ein Kapitel | ein. Das Section-Element gruppiert einen logischen Abschnitt oder ein Kapitel | ||
eines HTML-Dokuments. Es soll laut [https://www.w3.org/TR/html5/sections.html#the-section-element Spezifikation] | eines HTML-Dokuments. Es soll laut [https://www.w3.org/TR/html5/sections.html#the-section-element Spezifikation] | ||
eine Überschrift enthalten, die das Thema des Abschnitts beschreibt. | eine Überschrift enthalten, die das Thema des Abschnitts beschreibt. (man hätte auch ein ) | ||
<source lang="html5"> | <source lang="html5"> | ||
| Zeile 45: | Zeile 45: | ||
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 | Allerdings wurden drei ID-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 <code>id</code>- | 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 ders erste Abschnitt mit dem Formular angezeigt werden (<code>id="section_form"</code>). | |||
Um das zu erreichen, reicht es, | |||
<source lang="css"> | |||
#section_welcome | |||
{ | |||
display: none; | |||
} | |||
</source> | |||
in die CSS-Datei einzufügen. Machen Sie dies und führen testen Sie die Web-Anwendung erneut. | |||
==Definition eines HTML5-Formulars== | ==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 sein Name eingegeben werden kann | |||
* | |||
* | |||
{{TBD }} | {{TBD }} | ||
<!-- | <!-- | ||
Version vom 21. September 2016, 14:05 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 )
<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 ders erste Abschnitt mit dem Formular angezeigt werden (id="section_form").
Um das zu erreichen, reicht es,
#section_welcome
{
display: none;
}
in die CSS-Datei einzufügen. Machen Sie dies und führen 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 sein Name eingegeben werden kann
TO BE DONE
Fortsetzung des Tutoriums
Sie sollten nun Teil 4 des Tutoriums bearbeiten.
