HTML5-Tutorium: JavaScript: Hello World 03: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 13: | Zeile 13: | ||
==Erstellen eines neuen Projektes== | ==Erstellen eines neuen Projektes== | ||
Erstellen Sie ein neues Projekt „<code>HelloWorld03</code>“ | Erstellen Sie ein neues Projekt „<code>HelloWorld03</code>“ und legen Sie dieses in Ihrem Repository ab. | ||
Kopieren Sie anschließend die Dateien „<code>HelloWorld02</code>“ und „<code>HelloWorld02</code>“ | Kopieren Sie anschließend die Dateien „<code>HelloWorld02</code>“ und „<code>HelloWorld02</code>“ | ||
aus dem zweiten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und | 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 „<code>index.html</code>“ 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 „<code>index.html</code>“ | |||
einen HTML-Abschnitt „<code><section id="..."> ...</section></code>“ | |||
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] | |||
eine Überschrift enthalten, die das Thema des Abschnitts beschreibt. | |||
<source lang="html5"> | |||
<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> | |||
</source> | |||
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 <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>“. | |||
Jedes öffnende HTML-Element darf mit einem derartigen Attribut versehen werden. '''Allerdings darf es in einer HTML-Datei | |||
keine zwei <code>id</code>-Attribute mit demselben Namen geben.''' | |||
==Definition eines HTML5-Formulars== | ==Definition eines HTML5-Formulars== | ||
Version vom 21. September 2016, 11:28 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 |
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.
<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.
Definition eines HTML5-Formulars
TO BE DONE
Fortsetzung des Tutoriums
Sie sollten nun Teil 4 des Tutoriums bearbeiten.
