HTML5-Tutorium: JavaScript: Hello World 03

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:

h1 
{ font-family: sans-serif;
}

p
{ font-family: serif;
}

Beachten Sie, dass die schließenden Klammern wieder unter den öffnenden Klammern notiert werden. Sie könnten den Code aber auch folgendermaßen formatieren.

h1 
{ 
  font-family: sans-serif;
}

p 
{ 
  font-family: serif;
}

Der Nachteil dieser Konvention ist, dass der Programmcode länger wird. Daher werden Sie meist folgende Konvention in Programmbeispielen sehen (die allerdings auch nicht weniger Codezeilen umfasst als die von mir eingangs empfohlene Konvention):

/* *** DON'T DO IT THAT WAY!!!! *** */

h1 { 
  font-family: sans-serif;
}

p { 
  font-family: serif;
}

Im Falle von CSS-Code macht es keinen wirklichen Unterschied, welcher Konvention sie folgen. Im Falle von JavaScript rate ich jedoch davon ab. Glauben Sie einem erfahrenen LISP-Porgammierer (LISP ist die Sprache, bei der jeder nicht-atomare Programmcode durch Klammern umschlossen wird): Code ist wesentlich besser zu lesen, wenn öffnende und schließende Klammern übereinander stehen. Insbesondere Strukturfehler sind bei dieser Konvention wesentlich einfacher zu finden. Ob Sie die öffnende Klammer jeweils in einer eigenen Zeile schreiben oder nicht, ist dabei weniger wichtig. (Ich bevorzuge die kürzere Variante, weil man dann nicht so weit im Code zurückgehen muss, um die öffnede Klammer zu finden.)

Glücklicherweise highlighten die meisten Editoren (wie beispielsweise die WebStrom-Editoren) die zugehörige schließende oder öffnende Klammer, wenn man den Cursor auf (bzw. vor oder nach) eine öffnende oder schließende setzt.

Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwenung erneut testen (d. h. die Datei „index.html“ im Browser vom WebStorm-Server laden), werden Sie feststellen, dass sich nichts geändert hat (auch wenn Sie den Reload-Button des Browsers drücken).

Sie können die CSS-Datei direkt im Browser laden (ersetzen sie in dem Browser-URI einfach „index.html“ durch „main.css“ und drücken Sie den Reload-Button), aber das hilft auch nichts. Ihnen daraufhin einfach der Inhalt des CSS-Datei vom Brwoser angezeigt.

Der Grund ist, dass der Browser beim Laden der HTML-Datei nicht weiß, dass er den Inhalt mit Hilfe der CSS-Datei layouten soll. Damit er dies weiß, muss folgende Zeile in den „head“-Bereich der HTML-Datei eingefügt werden:

<link rel="stylesheet" type="text/css" href="main.css">

Wenn Sie jetzt noch einmal Ihre Web-Anwendung testen, wird ie Überschrift (evtl. nach einem Klick auf den Reaload-Button des Browsers) tatsächlich in einer serifenlosen Schriftart dargestellt.

Sie können jetzt noch weitere Verbesserungen vornehmen: Anpassung der Schriftgröße, Anpassung des Abstandes zwischen Überschrift und Absatz, Anpassung der Schriftfarbe, des Seitenhintergrundes etc. pp.

Zum Beispiel:

h1
{ font-family:    sans-serif;
  font-size:      140%;
  padding-bottom: 0;
  margin-bottom:  0;
}

p
{ font-family:    serif;
  font-size:      100%;
}

TO BE DONE

Fortsetzung des Tutoriums

Sie sollten nun Teil 4 des Tutoriums bearbeiten.