HTML5-Tutorium: JavaScript: Hello World 02

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)

Im zweite Teil dieses Tutoriums wird die Hello-World-Web-Anwendung (bestehend aus einer einzigen HTML-Datei namens „index.html“) erweitert. Aufgabe der neuen Anwendung ist es, den Benutzer nach seinem Namen zu fragen und ihn anschließend mit seinem Namen zu begrüßen. Das Begrüßung soll natürlich designerisch „vom Feinsten“ sein.

Anmerkung: In fast allen Web-Anwendungen werden Benutzereingaben zum Web-Server übertragen und dort verarbeitet. In diesem Fall muss der Web-Server immer davon ausgehen, dass ihm ein Hacker potentiell schädliche Daten schickt. Er muss die Daten also genau inspizieren, um die Übermittlung von Schadcode, Spam, illegalem Inhalt etc. möglichst zu verhindern.

In diesem Teil des Tutoriums werden die Daten nicht zum Server geschickt, sondern direkt vom Client (Browser) verarbeitet. Daher sind die Sicherheitsanforderungen an den Code deutlich geringer. Nichtsdestotrotz sollte der vom Benutzer übermittelte Name auf Plausiblität überprüft werden.

Erstellen eines neuen Projektes

Erstellen Sie im selben Ordner wie das Projekt „HellowWorld01“ ein neues Projekt „HelloWorld02“:

1. Öffen Sie das Projekt „HellowWorld01“ in WebStorm.
2. File → New → Project... → Empty Project
3. Tragen Sie den korrekten Projektpfad (mit dem Namen „HelloWorld02“ anstelle von „untitled“ am Pfadende) in dem Feld „Location“ ein.
4. Create → New Window

Fügen Sie nun das neue Projekt in Ihr Subversion-Repository ein (analog zu Teil 1 des Tutoriums) und committen Sie (vergessen Sie nicht die Commit Message „Project HelloWorld02 created.“).

Kopieren Sie die Datei „index.html“ aus dem WebStorm01-Projekt in das WebStorm02-Projekt. Das können Sie entweder mit dem Dateibrowser Ihrer Wahl machen oder Sie legen die WebStrom-Fester der Projekte „HelloWorld01“ und „HelloWorld02“, markieren und kopieren „index.html“ im ersten Projekt und fügen es in den Dateibaum des zweiten Projektes ein.

Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann (Test). Falls dies der Fall ist, comitten Sie die neue Anwendung (Commit Message: „Files of HelloWorld01 copied.“)

Festlegen des Designs der Anwendung

Nun wird das Design der Anwendung verbessert. Die Überschrift soll in einem serifenlosen Font dargestellt werden, der Text des nachfolgenden Absatzes in einem serifenhaltigen.

Die ist kein CSS-Tutorium, daher wird nicht darauf eingegangen, wie ein geeigneter Font gewählt werden sollte. Wir überlassen das einfach dem jeweiligen Browser-Hersteller, indem wir die Pseudefonts „sans-serif“ und „serif“ angeben. Für Mac-User wird die Überschrift vermutlich in Helvetica gesetzt und für Windows-Benutzer in Arial.

Erstellen Sie eine CSS-Datei:

1. Rechtsklick auf die Wurzel „HelloWorld02“ des Dateibaums → New → Stylesheet
2. Name: main.css → OK

Es wird eine neue (diesmal leere!) Datei namens „main.css“ angelegt.

Fügen Sie in diese Datei folgenden CSS-Code ein:

TO BE DONE

Fortsetzung des Tutoriums

Sie sollten nun Teil 3 des Tutoriums bearbeiten.