Es gibt hier ganz <span class="wichtig">besonders interessante Meldungen.

Tags:

Abbildung 15: Standard-Darstellung von Absätzen (

) im Browser

Farben, Hintergrundfarben, Hintergrundbilder Die Farbe des Textes wird mit color, die Hintergrundfarbe mit background-color gesetzt. Jeder Tag kann mittels CSS ein Hintergrundbild erhalten (background-image). Als „Hintergrundbild“ in einer Webseite kann jedes Bild in einem Web-geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild wird einfach dargestellt oder „gekachelt“ –horizontal und vertikal so oft wiederholt, bis es die ganze Fläche des Tags ausfüllt (background-repeat). Abbildung 16 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

MMT Webprogrammierung 1

32

Abbildung 16: Beispiel für ein Hintergrundbild in einer Webseite

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 16 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text „wurde schon besucht“ in der letzten Zeile ist kaum noch lesbar.

Links formatieren Der -Tag wird in HTML für zwei sehr unterschiedliche Dinge verwendet: zum Setzen von Links und zum Setzen von Textmarken (auch ‚Anker’ genannt):

Universitäten

Salzbuerger Nockerl

Salzburger Nockerln

• 
  
  href="home.html">home
href="news.html">news href="portfolio.html">portfolio href="contact.html">contact

Im nächsten Kapitel lernen Sie eine Methode kennen wie Sie aus dieser Liste ein Menü machen.

MMT Webprogrammierung 1

3.

35

CSS für Layout und Interaktion

Was Sie wissen sollten •

Wie relative und absolute URLs funktionieren, wie URLs und Pfadangaben im Dateisystem zusammen hängen

•

Welche Bildformate im Web verwendet werden können. Welches Bildformat für ein gegebenes Bild geeignet ist (auf Grund von Anforderungen wie: Anzahl der Farben, Transparenz, Alpha-Transparenz, Animation)

•

Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen.

•

Welchen Zusammenhang es zwischen den Begriffen ‚graceful degradability’, Barrierefreiheit und Suchmaschinen-Tauglichkeit von Webseiten gibt.

•

Welche Vor- und Nachteile fixe, fluide und elastische Layouts von Webseiten haben.

Was Sie können sollten •

Absolute und relative URLs verwenden. Fehler die durch falsche URLs verursacht werden finden und korrigieren.

•

Ein Bild das digital vorliegt in ein geeignetes Format für das Web konvertieren.

•

Ein Bild (auf verschiedene Arten) auf einer Webeite positionieren.

•

Mittels CSS zwei oder drei Spalten nebeneinander positionieren.

•

Mittels CSS aus einer Liste von Links ein Navigations-Menü machen.

•

An einem bestehen CSS-Layout Veränderungen vornehmen.

Weitere Informationsquellen •

CSS Zen Garden. http://csszengarden.com/

•

CEDERHOLM,Dan (2007): Bulletproof Webdesign. Addison-Wesley, München. ISBN 3827326230.

•

MEYER,Eric A. (2006): Eric Meyer's CSS. Addison-Wesley, München. ISBN 3827324793.

•

Web Standards Project. http://www. webstandards. org/

•

Plain Old Semantic HTML (POSH). http://microformats. org/wiki/POSH

MMT Webprogrammierung 1

36

3.1 URLs In Kapitel 1.3.2 wurden URLs und Ihre Bestandteile kurz vorgestellt. Nun geht es um die Handhabung von URLs innerhalb von HTML und CSS.

3.1.1 Absolute und relative URLs URLs werden in CSS und HTML an vielen Stellen verwendet: bei Links und Bilder, beim Verweis auf externe Stylesheets, externe Javascript-Dateien, etc. An all diesen Stellen können Sie URLs in den hier beschriebenen Schreibweisen verwenden. (die „absolute“ und „relative“ Schreibweise wurde von den Pfadangaben im UNIX-Dateisystem übernommen; auch die Pfadangaben von DOS/Windows und von CD-ROMs funktionieren ähnlich. ) Neben wir an in der Datei http://mediacube.at/pix/weg.html seien folgende drei URLs enthalten: http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

absolut beginnt mit Protokoll relativ zum beginnt mit / relativ zur Datei

Webserver

/pix/weg-zur-alten-schmiede.jpg

weg-zur-alten-schmiede.jpg

Bei den relativen URLs muss man die URL des enthaltenden dokuments und die relative URLs zusammen—addieren, um zu einer absoluten URL zu kommen. http://mediacube.at/pix/weg.html

+

/pix/weg-zur-alten-schmiede.jpg

=

http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

und http://mediacube.at/pix/weg.html

+

weg-zur-alten-schmiede.jpg

=

http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

Mit einer anderen Ausgangs-URL ist das Ergebnis natürlich anders: http://multimediatechnology.at/2008/09/22/weg.html +

/pix/weg-zur-alten-schmiede.jpg

=

http://multimediatechnology.at/pix/weg-zur-alten-schmiede.jpg

und: http://multimediatechnology.at/2008/09/22/weg.html +

/pix/weg-zur-alten-schmiede.jpg

http://multimediatechnology.at/2008/09/22/weg-zur-alten-schmiede.jpg

Relativen URLs können selbst wieder (mehrere) Ordnernamen enthalten: http://multimediatechnology.at/showcase-2008.html

+

2008/07/31/mmt-auf-facebook.html

http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html

=

=

MMT Webprogrammierung 1

37

Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“: http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html +

../../mmt-auf-facebook.html

=

http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html

Mit dieser Schreibweise kann man auch Unsinn machen: http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html +

../../05/../04/17/rattenscharfes-computergame.html

=

http://multimediatechnology.at/2008/04/17/rattenscharfs-computergame.html

All diese Berechnungen finden im Webbrowser statt, und sind völlig unabhängig davon, wie der Webserver die URL interpretiert. So könnte z.B die letzten URL „in Wirklichkeit“ gar nicht auf Ordner mit Namen 2008, 04, 17 verweisen, sondern eine Datenbanksuche nach „2008-04-17“ nach sich ziehen – das ist Sache des Servers.

3.1.2 Konfiguration des Webservers und URLs Die Konfiguration des Webservers wird hier am Beispiel von Apache gezeigt. Andere Webserver (z.B: Internet Information Server von Microsoft) verfügen auch über diese Fähigkeiten, werden aber anders konfiguriert. Die Apache-Konfiguration müssen Sie noch nicht anwenden können, sie ist hier nur zur Information angeführt. Eventuell können Sie im Fach „Operations & IT“ diese Information in diesem Semester anwenden, auf jeden Fall im nächsten Semester in „Webprogrammierung 2“.

Betriebssystem des Webservers Die Webserver der FH sind ausnahmslos UNIX-Server. Die UNIX-Dateisysteme unterscheiden bei Datei- und Ordnernamen zwischen Groß- und Kleinschreibung, sind also „case-sensitive“. Der Rechner auf dem Sie die Webseiten erstellen läuft wahrscheinlich unter Windows oder MacOS; dort sind die Dateisysteme „case-insensitive“. Ein Link auf die Datei bild.JPG funktioniert unter Windows oder MacOS auch, wenn er bild.jpg geschreiben wird. Liegt die Datei aber dann am (UNIX-)Webserver, so funktioniert der Link nicht mehr! bild.jpg und bild.JPG sind zwei unterschiedliche Dateien!

Webspace und Ordner Im einfachsten Fall wird im Webserver ein Ordner spezifiziert, der als Ausgangspunkt für den Webspace dient. Für den Webserver mediacube.at ist dies der Ordner /var/www/virthosts/mediacube.at/

URL

http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

MMT Webprogrammierung 1 Dateisystem

38

/var/www/virthosts/mediacube.at/pix/weg-zur-alten-schmiede.jpg

Die Apache-Konfiguration dazu sieht so aus: DocumentRoot /var/www/virthosts/mediacube.at/

Standard-Dokument Endet eine URL auf einen Schrägstrich, dann verweist sie eigentlich auf einen ganzen Ordner, nicht auf eine spezielle Datei. Für diesen Fall kann im Webserver ein Standard-Dokument definiert werden. Auf allen Webservern der FH ist dies die Datei index.html. d.h. wenn eine URL auf einen Ordner verweist, und in diesem Ordner eine Datei mit Namen index.html existiert, dann wird diese Datei geliefert. URL

http://mediacube.at/

Dateisystem

/var/www/virthosts/mediacube.at/index.html

URL

http://mediacube.at/pix/

Dateisystem

/var/www/virthosts/mediacube.at/pix/index.html

Die Apache-Konfigurationsanweisung dazu lautet DirectoryIndex index.html

Achtung: die Konfiguration ist am Internet Information Server normalerweise anders, dort wir die Datei default.htm verwendet! Was passiert wenn keine Datei mit dem richtigen Namen vorhanden ist? Die zwei Möglichkeiten sehen Sie in Abbildung 17: entweder eine Auflistung der Dateien im Ordner oder eine Fehlermeldung.

Abbildung 17: Zugriff auf einen Ordner ohne Standard-Dokument (index.html): Auflistung oder Fehlermeldung

Die entsprechenden Apache-Konfigurationsanweisung dazu sind: Options +Indexes

Options -Indexes

MMT Webprogrammierung 1

39

Automatischer Webspace für Alle Am Webserver www.users existiert für jeden Account automatisch ein Webspace. Dieser WEbspace befindet sich innerhalb des Home-Verzeichnisses des jeweiligen Accounts. Z.B. könnte eine Studentin den Username fhs303030 habe und das Home-Verzeichnis /home/urstein/stud/03/fhs303030/. Ihr Webspace ist im Unter-Ordner htdocs: URL

http://www.users.fh-salzburg.ac.at/~fhs303030/test.html

Dateisystem

/home/urstein/stud/03/fhs303030/htdocs/test.html

URL

http://www.users.fh-salzburg.ac.at/~fhs111111/test.html

Dateisystem

/home/urstein/stud/01/fhs111111/htdocs/test.html

Beachten Sie: für das formulieren von relativen URLs sind nur die URLs relevant, nicht die Position der Dokumente im Dateisystem! Der Ordnername htdocs wird also nie in einer URL vorkommen. Der Link von einem User-Webspace zum nächsten funktioniert also so: http://www.users.fh-salzburg.ac.at/~fhs303030/test.html

+

../~fhs111111/test

+

/~fhs111111/test

=

http://www.users.fh-salzburg.ac.at/~fhs111111/test

Oder relative zum Webserver: http://www.users.fh-salzburg.ac.at/~fhs303030/test.html

=

http://www.users.fh-salzburg.ac.at/~fhs111111/test

Die Apache Konfigurationsanweisung lautet: UserDir htdocs

3.1.3 Pragmatische Tipps zu Dateienamen und URLs Groß- und Kleinschreibung Hintergrund: Webserver läuft auf UNIX, dort sind Dateinamen case-sensitive. Tipp: ich schreibe alle Ordner- und Dateinamen sowie alle URLs immer durchgängig klein.

Leerzeichen Hintergrund: Leerzeichen in URLs müssen als %20 geschrieben werden. Tipp: ich verwende keine Leerzeichen in Ordner- und Dateinamen meiner Web-Projekte.

Umlaute Hintergrund: URLs sind global sichtbar. Eine URL, die ich erschaffe, muss vielleicht einmal auf einer Tastatur eingetippt werden, die keine deutschen Umlaute hat.

MMT Webprogrammierung 1

40

Tipp: ich vermeide Umlaute in Ordner- und Dateinamen meiner Web-Projekte und beschränke mich auf den englischen Zeichensatz.

Ordnerstruktur Hintergrund: Nicht nur der Code meiner Webseiten ist für das Funktionieren der Seiten wichtig, sondern auch die Dateinamen und Ordnernamen, bzw. die Ordnerstruktur. Liegt eine Datei im falschen Ordner wird sie nicht mehr gefunden. Tipp: ich überlege mir die Ordnerstruktur meines Webspace sorgfältig. Wenn ich auf meheren Rechnern entwickle, dann baue ich auf jedem dieser Rechner die Ordnerstruktur wieder auf. Ich nutze Dreamweaver für den Upload und Download, weil er die Ordnerstruktur „mitdenkt“.

MMT Webprogrammierung 1

3.2

41

Rahmenbedingungen für Layout

Wie in Kapitel 1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestaltung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. die Auflösung eine wichtige Rolle.

3.2.1

Auflösung

Zuerst stellt sich die Frage: woher weiß ich, wie hoch die Auflösung am Computer meiner LeserIn ist? Woher weiß ich, wie viel Platz im Browserfenster zur Verfügung steht? Die Antwort lautet: ich weiß es nicht, und es gibt keine zuverlässige Methode, mit der man diese Information in jedem Fall herausfinden kann. Es gibt eine Meßmethode mit Hilfe der Programmiersprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Messung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfallen. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten. Abbildung 18 zeigt einige derzeit (2008) mögliche Bildschirm-Auflösungen.

Abbildung 18: einige mögliche Bildschirmauflösungen und Seitenverhältnisse 2008, basierend auf http://en.wikipedia.org/wiki/Image:Vector_Video_Standards2.svg

MMT Webprogrammierung 1

42

Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite und Höhe (mehr als) verdoppelt sind, steht bei der höchsten Auflösung also (mehr als) die vierfache Fläche zur Verfügung! Abbildung 19 zeigt zwei Statistiken über die Bildschirmauflösung von thecounter.com von 2006 und 2008. In diesem Zeitraum ist der Anteil der geringsten hier dargestellte Auflösung (800x600) von 17% auf 7% gefallen. Die meistverwendete Auflösung bleibt 1024x768.

Abbildung 19: Statistik über die Bildschirmauflösung, Juni 2006 und April 2008, Quelle: thecounter.com

3.2.2 Brutto-Fläche vs. Netto-Fläche Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung stehenden Fläche sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete Favoritenleisten abzuziehen, um den „netto“ verbleibenden Raum für die Gestaltung der Webseite zu erhalten. Abbildung 20 zeigt diese Problematik an Hand einer Webseite.

Abbildung 20: Platzbedarf von Browser-Elementen: firefox ohne Sidebar, Internet Explorer mit Favoriten

MMT Webprogrammierung 1

43

Beide Browser zeigen dieselbe Webseite, beide Browser wurden auf einem Computer mit einer Bildschirm-Auflösung von 1024x768 Pixel verwendet. Links in der Abbildung sehen sie den Browser Firefox. Nach Abzug von Symbolleisten oben, Statusleiste unten, Scrollbalken rechts und dem (sehr dünnen) Fensterrahmen links bleiben 1003x615 Pixel für die Webseite. Rechts in der Abbildung sehen Sie dieselbe Seite in Internet Explorer. Zusätzlich zu den üblichen Symbolleisten ist hier auch die „Favoriten-Leiste“ am linken Rand des Browser sichtbar. Es bleiben 743x562 Pixel für die Darstellung der Webseite. Wie Sie sehen können ist die Seite so gestaltet, dass das Foto, das in Firefox in der rechten oberen Ecke der Webseite sichtbar ist, in Internet Explorer nicht mehr sichtbar ist. Abbildung 21 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollständig angezeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%.

Abbildung 21: „Netto“-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt.horus.at

3.2.3 Entwurf für mehrere Auflösungen Wie gehen WebdesignerInnen mit den verschiedenen Auflösungen um? Ein paar Varianten: 1) Ignorieren und für die eigene Bildschirmauflösung entwerfen. Manchmal in kombination mit der Beschriftung „best viewed at 1600x1200“ 2) Ignorieren dass es viele Bildschirmauflösungen gibt, und für das Minimum entwerfen. 3) Entwurf der für mehrere Auflösungen funktioniert Dazu ein strenges Urteil: 1) ist völlig inadequat für das Medium Web. „best viewed“ ist eine Zumutung für alle LeserInnen auf ‚unpassenden’ Ausgabegeräten. Stellen Sie sich vor, der Architekt der FH hätte eine Treppe zum Eingang zum Foyer eingeplant, und dann ein Schild daneben gestellt „FH nur benutzbar für Leute die Treppen steigen können“. Was würden sich wohl RollstuhlfahrerInnen oder Leute mit Kinderwagen dazu denken? 2) Zeigt schon ein Minimum an Wissen über das Web, ignoriert aber die gestalterische Herausforderung des Mediums. Weil soch ein Entwurf auf einem Bildschirm mit hoher auflösung

MMT Webprogrammierung 1

44

sehr klein auf einer großen leeren Fläche erscheint wird es spöttisch „Briefmarkenlayout“ genannt. 3) Nur das verdient wirklich die Bezeichnung „Webdesign“. Ein Beispiel für Variante 3 : Darstellung der Seite bei einer Auflösung von 800x600: Navigation (linke Spalte) und Content ist sichtbar. Eine Spalte rechts mit untergeordnetem Content ist nur durch Scrollen nach rechts erreichbar.

Darstellung der Seite bei einer Auflösung von 1024x768 Navigation, Content und ZusatzContent voll sichtbar.

MMT Webprogrammierung 1

45

Darstellung der Seite bei einer Auflösung von 1280 x 1024 Navigation, Content Content voll sichtbar.

und

Zusatz-

Der „leere“ Teil der Webseite wird durch das Hintergrundbild interessant gestaltet.

Darstellung der Seite bei einer Auflösung von 1600x1200. Navigation, Content Content voll sichtbar.

und

Zusatz-

Der „leere“ Teil der Webseite wird durch das Hintergrundbild interessant gestaltet. Das Hintergrundbild wiederholt sich zwar vertikal, aber horizontal zeigt es auch bei dieser Auflösung neue Details.

3.2.4 Bilder im Web Als Bildformate für Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt.

MMT Webprogrammierung 1

gif

46

Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält mehrere Bilder, die der Reihe nach angezeigt werden (Daumenkino). Besonders geeignet für Bilder mit klaren Kanten, einfärbigen Flächen, wenigen Farben, z. B. Comics, Logos.

jpg

Millionen von Farben, variable Kompression, keine Transparenz. Besonders geeignet für Bilder mit Farbverläufen, z. B. Photos.

png

Nachfolge-Format für gif, Alpha-Transparenz, diese wird aber von MSIE erst ab MSIE 7 unterstützt. Tabelle 2: Bildformate im Vergleich

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen, in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist.

3.2.5 Schriftgröße Die Schriftgröße im Browser unterliegt nur bedingte der Kontrolle durch HTML und CSS Code. Das „letzte Wort“ hat hier die LeserIn, die die Schrift größer oder kleiner stellen kann., z.B. in MSIE unter Ansicht
Schriftgrad, in Firefox mit der Tastenkombination STRG + oder STRG – Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen:

MMT Webprogrammierung 1

3.3

47

CSS Selektoren

In Kapitel 2.2.2 haben Sie CSS Selektoren für Klassen und IDs kennen gelernt. In der CSS 2.1 Spezifikation werden u.a. folgende Schreibweisen für Selektoren beschrieben4: Name

Muster

Beschreibung

Universal selec* tor

Stimmt mit jedem Element überein.

Type selectors

E

Stimmt mit jedem E-Element überein (d.h. ein Element des Typs E).

Grouping

E, F, G

Stimmt mit jedem E-, sowie jedem F-, sowie jedem G-Element überein. E, F und G könnten auch komplexere Selektoren sein!

Descendant selectors

E F

Stimmt mit jedem F-Element überein, das ein Nachfahre eines EElements ist.

Child selectors

E > F

Stimmt mit allen F-Elementen überein, die Kindelemente eines Elements E sind.

The :first-child pseudo-class

E:first-child

Stimmt mit Element E überein, wenn E das erste Kindelement des übergeordneten Elements ist.

The link pseudo- E:link E:visited classes

Stimmt mit dem Element E überein, wenn E der Quellanker eines Hyperlinks ist, dessen Ziel noch nicht besucht wurde (:link), oder dessen Ziel bereits besucht wurde (:visited).

The dynamic pseudo-classes

E:active E:hover E:focus

Stimmt während bestimmter Benutzeraktionen mit E überein.

Adjacent selectors

E + F

Stimmt mit jedem F-Element überein, dem unmittelbar ein Element E vorausgeht.

Class selectors

E.warning

Nur HTML. Stimmt mit jedem E-Element überein, dessen CLASS gleich „mwarning“ ist.

ID selectors

E#myid

Stimmt mit jedem E-Element überein, dessen ID gleich „myid“ ist.

4

Gekürzt! Originaltext siehe auch http://www.w3.org/TR/CSS2/selector.html#q1, Beschreibung

zitiert nach der Übersetzung http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html,

MMT Webprogrammierung 1

3.4

48

CSS für Layout

Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten, je nach Sprache von links nach rechts oder von rechts nach links. Dabei wird zwischen blockbildenden Tags und nicht-blockbildenden Tags unterschieden. Innerhalb eines Blocks wird Text vom Browser gesetzt und umgebrochen, jeder Block nimmt genau einen rechteckigen Bereich des Browserfensters in der vollen Breite ein. In Abbildung 22 wurden

und <em>-Tags verwendet und mit folgendem Stylesheet formatiert: p { background-color:#CCCCCC; } em { background-color:#FFFF66; }

Bei der Darstellung im Browser kann ein nicht-blockbildender Tag dabei auf mehrere Zeilen verteilt werden, und nimmt dann mehrere Rechteckige Bereiche ein:

Abbildung 22: Darstellung von blockbildenden und nicht-blockbildenden Tags

Ein Bild wird dabei wie ein Wort im Text behandelt, und nicht etwa frei auf der Webseite positioniert. Wenn Sie das Bild wie in Abbildung 23 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 23: Bild mitten im Absatz

Browser können keine Wörter trennen und umbrechen, ein langes „Wort“ kann die Breite eines Elemets überschreiten. Verschiedene Browser verhalten sich hier unterschiedlich. In Abbildung 24 können Sie sehen, dass Microsoft Internet Explorer 7.0 URLs nicht umbricht. Firefox 3.0 hingegen kann URLs umbrechen.

MMT Webprogrammierung 1

49

Abbildung 24: Darstellung eines Absatzes mit Rahmen und fixer Breite, der lange Wörter enthält, in MSIE 7.0

3.4.1 Width und Auto Normalerweise nimmt ein Block die maximal zur Verfügung stehende Breite ein. Mit width kann eine Andere Breite eines Blocks definiert werden: div#main {

width:500px; }

Die Werte von padding, border, margin müssen Sie dazu addieren um den Gesamt-Platzbedarf zu errechnen: { width: 200px; padding: 10px; border-width: 10px; margin: 32px 0px } Gesamtbreite = 0px + 10px + 10px + 200px + 10px + 10px + 0px = 240px Abbildung 25: width im Box-Model

Um einen Inhalt zu zentrieren kann margin mit Wert auto verwendet werden. div#main { width:500px; margin-left: auto; margin-right: auto; }

3.4.2

Float

Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Deklaration float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der

Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt. In Abbildung 2 sind drei Absätze zu sehen die jeweils als erstes ein Bild enthalten. Im ersten Absatz ist die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floated“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild nach links, der Text rutscht rechts davon nach oben.

MMT Webprogrammierung 1

50

Abbildung 26: Bilder mit float

Bei Bildern funktioniert float besonders einfach, weil das Bild schon eine fixe Breite hat. Wird ein anderer HTML-Tag mit float versehen muß man auch die Breite des Tags setzen um einen sichtbaren Effekt zu erzielen. In Abbildung 27 soll der zweite Absatz nach rechts gehen. Er hat die ID edvard.

p { margin: 0px; } #edvard { float:right; width:33%; } Abbildung 27: Ein Absatz mit float

Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein besonders flexibles Layout: in Abbildung 28 werden je nach zur Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

Abbildung 28: Zwei Darstellungen der Bildergalerie mit float

MMT Webprogrammierung 1

3.4.3

51

Absolute Positionierung

Mit der Deklaration position:absolute wird ein Tag aus der normalen Darstellung herausgenommen und über dem restlichen Inhalt der Seite platziert. Mit top und left kann die linke obere Ecke des Elements positioniert werden. #navi { position: absolute; width: 80px; top: 0px; left: 0px; }

In Kombination mit einem Inhalt mit margin-left ergibt das folgendes Layout:

margin-left

Abbildung 29: Kombination von absoluter Positionierung und margin-left

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browserfenster. Ein Tag mit position:absolute oder position:relative bildet für seine untergeordneten Tags ein neues Koordinationsystem. In folgendem Code definiert das main-div ein neues Koordinatensystem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke des Browser-Fensters positioniert.

MMT Webprogrammierung 1

Inhalt

Hier ist der Inhalt[. . . ]

[. . . ]


52 #main { border: 1px red solid; position:relative; width: 700px; margin: 0px auto; } #content { margin-left: 120px; background-color: #ddd; } #navi { position: absolute; width: 80px; top:0px; left:0px; }

3.5 Navigationsmenü mit CSS Wenn man mit CSS ein Navigationsmenü gestaltet dann sollte man von einem HTML-Code ausgehen der auch ohne CSS gut benutzbar bleibt. Dieser Ansatz ist auf englisch als „graceful degradablility“ bekannt. Der Ausgangspunkt für ein Navigationsmenü ist eine Liste mit Links:

Seitenauswahl

• home
• news
• portfolio
• contact


Ohne CSS wird die Liste ganz normal dargestellt. Mit CSS kann man daraus ein vertikales Menü machen, dazu wird mit list-style-type:none der Listenpunkt zu einem normalen Tag. .unsichtbar {display:none;} div#navi li { list-style-type:none; margin-bottom:1px; background:#6C6; width:6em; padding: 0.2em; } div#navi li a:link { text-decoration: none; font-weight: bold; color: black; }

Mit Hilfe von Float kann man das Menü auch horizontal darstellen, dazu muß nur ein float eingefügt und der margin anders gesetzt werden:

MMT Webprogrammierung 1

53

div#navi li { float:left; list-style-type:none; margin-right:1px; background:#6C6; width:6em; padding: 0.2em; } div#navi li a:link { text-decoration: none; font-weight: bold; color: black; }

3.5.1

:hover

Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist. div { background-color: #ddd; } div:hover { background-color: red; }

Mit Hilfe von Hintergrundbildern kann man so zum Beispiel einen kitschigen 3d-Button darstellen. div { background-image: url(button-up.png); } div:hover { background-image: url(button-down.png); }

Beim Laden des zweiten Hintergrundbildes kann es dabei zu einer Verzögerung kommen. Um das zu verhindern kann man die beiden Hintergrundbilder in einer Bilddatei speichern und nur den Bildausschnitt wechseln: /* css */ div { height:115px; width:240px; background-image: url(pix/rolloverButton.gif); overflow:hidden; } div:hover { background-position: 0 -120px; }

Eine extreme Anwendung dieses Prinzips nennt man CSS-Sprites: dabei werden möglichst viele Bilder in einer Bild-Datei zusammengefaßt. Falls viele kleine Icons verwendet werden kann das die Darstellung der Webseite erheblich beschleunigen.

MMT Webprogrammierung 1

54

Abbildung 30: CSS Sprites von Yahoo

MMT Webprogrammierung 1

4.

55

Formulare, URLs, erstes Javascript

Zum vierten Termin der Lehrveranstaltungen lernen Sie Formulare und Ihre Funktionsweise kennen.

Was Sie wissen sollten •

Wie Web-Formulare mit URLs zusammen hängen

•

Welche HTML-Tags ein Formular und seine Eingabeelemente definieren

Was Sie können sollten •

Ein Web-Formular erstellen

•

Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

Weitere Informationsquellen •

Formulare. In: Selfhtml. http://de.selfhtml.org/html/formulare/

•

HTML Forms and Input. In: W3 Schools. http://www.w3schools.com/html/html_forms.asp

•

Newhouse(2001): Practical CSS Layout Tips, Tricks, & Techniques. In: A List Apart. http://www.alistapart.com/stories/practicalcss/

Vertiefungsmöglichkeiten •

Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

4.2 Formulare Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen InteraktionsMöglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web. Formularen ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen. Abbildung 31 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabeformular der Suchmaschine Google und ein Bestellformular.

MMT Webprogrammierung 1

56

Abbildung 31 Formulare in Webseiten

Mit den HTML-Tags
, , , <option>, <select> werden Formulare gebaut. Hier ein einfaches Beispiel, (in der Code-Ansicht von Dreamweaver 4):<br /> <br /> Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im Action-Attribut des <form>-tag wird angegeben, an welche URL die Daten zur Verarbeitung geschickt werden. Im Browser sieht das oben gezeigte Formular so aus:<br /> <br /> Abbildung 32: Darstellung eines Web-Formulars im Browser<br /> <br /> 4.2.1 Eingabefelder Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den „normalen“ HTML-Tags auf. Tabelle 3 zeigt die verschiedenen Arten von Text-Eingabefeldern. Textfeld:<br /> <br /> MMT Webprogrammierung 1<br /> <br /> 57 <input type="text" name="meintextfeld" value="text eingeben" /><br /> <br /> Passwort-Feld: <input type="password" name="meinpasswort" /><br /> <br /> mehrzeiliges Textfeld = Textbereich <textarea name="zitat"> In a hole in the ground there lived a Hobbit. Tabelle 3: Text-Eingabefelder

Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element „checkbox“ verwendet, siehe Tabelle 4. Raucher Tabelle 4: Checkbox für Ja-/Nein-Fragen

Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es verschiedene Eingabeelemente, die in Tabelle 5 gezeigt werden. Radiobuttons
type="radio" type="radio" type="radio" type="radio"

name="size" value="XL" name="size" value="L" name="size" value="M" name="size" value="S" checked="checked"

/> XL /> L /> M /> S

Menü <select name="size2"> XL L M S

Menü mit „leer“- Auswahl <select name="size3"> ---Bitte Auswählen--- XL L M S

Liste <select name="html" size="4" multiple="multiple"> im Code Dreamweaver GoLive Frontpage

MMT Webprogrammierung 1

58

Tabelle 5: Eingabeelemente für Fragen mit mehreren Antworten

Radiobuttons, die zu einer Frage gehören, müssen den selben Namen tragen. der Wert ist unterschiedlich (im Code: Attribut name ist gleich, value unterschiedlich). Nur bei einer Liste besteht die Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen. Jedes Formular braucht einen Absende-Button wie in Tabelle 6 gezeigt. Absende-Button Tabelle 6: Eingabefelder Absenden und Zurücksetzen

Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.

Zurücksetzen? Nein Danke! Zurücksetzen-Button
value="Zurücksetzen" />

Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen. Warum? Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „super, alles gelöscht, genau das wollte ich“, und wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles noch mal tippen.“ Tabelle 7 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden. Unsichtbares = Verstecktes Feld

Button ohne Auftrag, für Javascript-Programme

Bildfeld, liefert angeklickte x+y Koordinaten.

Visuelle Zusammenfassung mehrer Felder: fieldset + legend
Kreditkarte

Master
MMT Webprogrammierung 1

59 value="Visa" /> Visa



Datei-Upload, funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype an den Webserver geschickt werden Wählen Sie ein Bild aus: Tabelle 7: selten verwendete Eingabefelder

Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten.

4.2.2 Interaktionsmöglichkeiten Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel. Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebenen Elementen. Mit diesem Formular kann man nur ein, nicht aber zwei oder mehr Zimmer reservieren. Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe der Anzahl der Zimmer. Es ist aber nicht möglich ein Einzel- plus ein Doppel-Zimmer zu reservieren. Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen.

Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden

Abbildung 33 Entwürfe für ein Zimmer-Reservierungs-Formular

Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen, kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine besonders häufige Auslassung zeigt Tabelle 8.

MMT Webprogrammierung 1

60

Tabelle 8: Entwürfe für ein Getränke-Bestell-Formular

Der linke Entwurf in Tabelle 8 läßt keine Bestellung nur einer Sorte Bier zu. Die „Mindestbestellmenge“ für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer „Leer“-Option in die Menüs wird diese Einschränkung aufgehoben.

4.3 Daten absenden Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Meist werden Sie an den Webserver zur weiteren Verarbeitung geschickt. Diese action wird direkt im -Tag angegeben.

4.3.1 Daten an E-Mail senden Wenn Sie kein Möglichkeit haben, am Webserver zu programmieren, bleibt als Alternative, die Daten direkt per E-Mail zu senden. So sieht der entsprechende HTML-Code des Formulars aus:

Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß nicht nur der Browser funktionieren, sondern auch das E-Mail Programm. Das E-Mail Programm muß richtig konfiguriert sein. Das ist auf vielen Computern am Internet nicht der Fall, oft werden die Daten also nicht erfolgreich versandt sondern gehen verloren.

MMT Webprogrammierung 1

61

Abbildung 34: Formular per E-Mail oder an den Webserver senden

4.3.2 Daten senden mit Methode GET Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die einfachere. In Abbildung 35 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode GET verwendet.

Abbildung 35: Formular mit Methode GET

Wenn die UserIn auf „Bestellung absenden“ drückt, baut der Browser aus der action und den Namen und Werten der einzelnen Eingabefelder eine URL zusammen, die dann aufgerufen wird wie in Abbildung 36 gezeigt.

Abbildung 36: URL einer GET-Anfrage

Die komplette URL lautet im Beispiel: http://localhost/php/test.php?anzahl=4&adresse=Jakob+Haringer+Str.1%0D%0A5020+Salzburg

MMT Webprogrammierung 1 action

62

1.Eingabe

2.Eingabe

Die URL wird zusammengestellt aus: 1. der Action (aus dem form-Tag) 2. ? (einem Fragezeichen ) 3. für alle Eingabefelder, getrennt durch & (kaufmännisches Und): a. Name des Eingabefeldes b. = (Gleich Zeichen) c. Eingegebener / angeklickter Wert Falls dabei Sonderzeichen vorkommen (z.B. Leerzeichen, Zeilenumbrüche, Umlaute, Fragezeichen, kaufmännisches Und) werden diese wie folgt encodiert: Statt Leerzeichen wird ein + oder %20 gesetzt, bei allen anderen Zeichen wird ein % gefolgt von der Hexadezimaldarstellung des ASCII-Code gesetzt (siehe rfc 2396). Diese Codierung nennt man URL-Encoding.

4.3.3 URL als Programm-Schnittstelle Das Webformular ist nicht notwendig, um eine GET-Anfrage zu erzeugen. Wenn Sie z.B. das EingabeFormular von Google analysieren werden Sie herausfinden, dass die Anfrage mit dem Suchwort „Schokolade“ so aussieht: http://www.google.com/search?q=Schokolade

Sie können diese URL einfach direkt in den Browser eintippen, ohne das Eingabeformular von Google zu verwenden. Sie können diese URL in den Lesezeichen/Favoriten Ihres Browsers speichern oder in einem Link verwenden: Suche nach Schokolade

Gerade bei Suchmaschinen wird diese Möglichkeit oft genutzt: z.B. durch die Suchfelder, die in den Browsern eingebaut sind:

Abbildung 37: Suchfeld von Firefox

Wenn Sie eine Web-Applikation erstellen müssen Sie auch darauf gefasst sein, dass die UserInnen nicht nur die Web-Formulare verwenden sondern auch URLs konstruieren und aufrufen. Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die den Preis der Waren als verstecktes Eingabefeld im Formular speicherten:

MMT Webprogrammierung 1

63

Airbus Bestell-Formular Anzahl:
Adresse:
Preis: 1.000.000 DM


Das gibt der KundIn die Chance ein „Gegenangebot“ zu senden (als „pricing attack“ bekannt): http://happyshop.com/order.php?anzahl=4&adresse=Urstein+Süd+.1&preis=10

Wenn nun das Programm order.php einfach den Preis aus der URL übernimmt und auf die Rechnung schreibt, wird der Airbus recht günstig (für die KundIn) verkauft. Merke: Alle Eingaben sind mit Skepsis zu betrachten!

4.4 Formular und Javascript Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. Die Details von Javascript werden an den restlichen Lehrveranstaltungs-Terminen behandelt, hier geht es nur um ein erstes Kennenlernen.

4.4.1 Javascript Einbetten Javascript kann innerhalb des <script>-Tags irgendwo in den HTML-Code eingefügt werden.

Hallo Welt

<script> var pi,r,a; pi = 3.141; r = 2; a = r * r * pi;

Ohne Output merkt man aber gar nichts davon, nur mit Firebug könnte man die Variablen auslesen wie in Abbildung 38 gezeigt.

Abbildung 38: Mit firebug den Wert einzelnen Javascript-Variablen auslesen

4.4.2 Popup-Fenster Mit den Befehlen alert, confirm und prompt können Sie kleine Popup-Fenster öffnen:

MMT Webprogrammierung 1

64

<script type="text/javascript"> window.alert("peng, du bist tot!"); var ja_nein = confirm("sollen die daten nicht gelöscht werden?"); var antwort = prompt("welche Daten sollen gelöscht werden. Keine Angabe löscht alles");

Achtung: So können Sie zwar bei gutgläubigen Menschen Herzinfarkte auslösen, aber Sie können mit Javascript nicht wirklich Daten löschen.

4.4.3 Formulare Mit der Konsole von Firebug können Sie auch Formulare genauer untersuchen:


Abbildung 39: Mit Firebug Formulare und Eingabefelder auslesen

Mit document.test kann man also das gesamte Formular (mit dem Namen „test“ ) ansprechen, wenn man noch den Namen eines Eingabefeldes anfügt kann man das Eingabefeld innerhalb des Formulares ansprechen (z.B. document.test.in). Jedes eingabefeld bietet mit .value den aktuell eingegeben Wert (als String) an, hier z.B. document.test.in.value.

Die letzten beiden Zeilen in der Konsole zeigen, dass es auch umgekehrt

funktioniert: man kann auch Werte ins Eingabefeld hineinschreiben, der neue Werte wird sofort im Browser angezeigt.

4.4.4 document.write Mit dem Befehl document.write() kann Text/Code in den HTML-Code eingefügt werden.

Hallo Welt

<script> document.write("

Hallo Javscript

");

Hallo HTML



Der Browser interpretiert das Javascript und fügt das Ergebnis zu einem HTML-Dokument zusammen. Achtung: Dieses resultierende HTML-Dokument existiert nur im Haupt-Speicher des einen Computers auf dem der Browser gerade läuft, es wird nie abgespeichert! Mit Firebug kann man es aber sehen:

MMT Webprogrammierung 1

65



Hallo Welt

Hallo Javscript

Hallo HTML



Ein sinnvolles Anwendungsbeispiel dieses Befehls: Ich will ein Dropdown-Menü mit vielen Einträen, bin aber zu faul um alle -Tags einzutippen.
<select name="Anzahl" id="Anzahl"> 1 2 3 4 5 6 7


Ich ersetze also die option-Tags durch eine Schleife in Javascript:
<select name="Anzahl" id="Anzahl"> <script language="javascript"> var i=0; while(i <= 50) { document.write("" + i + ""); i++; }


Mit Ansicht -> Quelltext sieht man den Javascript-Code, In Firefox sieht man das Ergebnis:

4.4.5 Ereignisse und Ereignisgesteuerte Programmierung Javascript ist eine Programmiersprache für die Gestaltung von Benutzerschnittstellen. Für grafische Benutzerschnittstellen hat sich ein besonderer Programmierstil entwickelt: die ereignisgesteuerte Programmierung. Dieser Stil kommt auch in Actionscript (in Flash), in Visual Basic, u.s.w. zum Einsatz. Dabei lösen Ereignis, die die BenutzerIn setzt bestimmte Programmteile aus.

MMT Webprogrammierung 1

66

Im Webbrowser sind solche Ereignisse z.B.: •

Klicken auf einen Link

•

Eintippen in ein Textfeld

•

Anklicken einer Checkbox

•

Absenden eines Formulares

Ein Beispiel für ereignisgesteuerte Programmierung mit einem Web-Formular: Das Bestellformular für Bücher in Abbildung 40 soll automatisch den Gesamtpreis berechnen.

Abbildung 40: Bestellformular für Bücher mit Berechnung

Wenn in ein Anzahl-Feld ein neuer Wert eingegeben wird soll dieser mit dem Preis multipliziert werden und in das entsprechende Feld geschrieben werden. Betrachten wir zuerst diesen Schritt alleine an einem vereinfachten Formular mit einem Eingabe- und einem Ausgabe-Feld:


Für die Formulierung „Wenn in das Feld in ein neuer Wert eingegeben wird, dann...“ gibt es ein passendes Event in HTML/Javascript: onchange. Die wird als Attribut in den HTML-Code des Eingabefeldes geschrieben:

MMT Webprogrammierung 1

67




Eine Liste von Events bzw. on-Attributen für HTML-Tags finden Sie z.B: in selfhtml5. In das Attribut kann nun Javascript-Code eingefügt werden der die richtige Berechnung vornimmt und das Ergebnis in das richtige Element schreibt:


Nun wäre es natürlich unpraktisch in das onchange-Attribut ein längeres Javascript-Programm zu schreiben. Dafür kann man in Javascript Funktionen definieren, die dann nur noch aufgerufen werden. Z.B. um die Gesamtsumme im Bestellformular zu berechnen ist eine Funktion praktisch: <script language="javascript"> function gesamt() // Addiert die Preise der einzelnen Bücher zur einer Gesamtout, // schreibt das Ergebnis ins Feld „gesamtout“ { document.test.gesamtout.value = document.test.out1.value + document.test.out2.value + document.test.out3.value + document.test.out4.value + document.test.out5.value + document.test.out6.value; }

Achtung: enthält noch einen Bug! weiterlesen!

Bei den einzelnen Berechnungen für die einzelnen Bücher wird jeweils zum Schluss gesamt() aufgerufen:

5

http://de.selfhtml.org/javascript/sprache/eventhandler.htm

MMT Webprogrammierung 1

68

Das Programm enthält noch einen – ganz typischen – Javascript-Bug. In Javascript werden die Datentypen int, float, char, zwar unterschieden, aber nicht deklariert. Es kann in einer Variable einmal ein String und einmal eine Zahl gespeichert sein: var a,b,c; a = 10; document.write("
wie viel ist 10 plus 20? "); document.write(a + 20); a = "zehn"; document.write("
wie viel ist 10 plus 20? "); document.write(a + 20); a = "10"; document.write("
wie viel ist 10 plus 20? "); document.write(a + 20);

Hier der Output des Programms: wie viel ist 10 plus 20? 30 wie viel ist 10 plus 20? zehn20 wie viel ist 10 plus 20? 1020 Der + Operator verhält sich also je nach Datentype des ersten Arguments verschieden: steht links des Plus-Zeichens eine Zahl, dann erfolgt eine Addition. Steht links des Plus-Zeichens ein String, dann erfolgt eine String-Konkatenation; ein Aneinanderfügen von Text. Eingabefelder in Web-Formularen liefern immer einen String. Deswegen berechnet die gesamtFunktion nie eine Summe, sondern führt nur eine Aneinanderfügung der Zahlen als Text durch wie in Abbildung 41 gezeigt: aus 100 + 200 + 0 + 0 + 0 + 0 wird 1002000000.

MMT Webprogrammierung 1

69

Abbildung 41: Falsche Berechnung in Javascript: Konkatenation statt Addition

Bei der Multiplikation mit * tritt dieses Problem nicht auf, da der Stern keine zweite Bedeutung hat. Mit der Funktion parseInt() können Sie einen String in eine Integer-Zahl verwandeln bevor Sie die Addition durchführen.

4.4.6 Formular prüfen Mit Javascript kann man schon vor dem Absenden des Formulares prüfen ob wichtige Daten eingegeben wurden, und das Einsenden des Formulares verhindern falls dem nicht so ist. Dafür gibt es das Event „onsubmit“ im form-Tag.


Die Besonderheit dieses Events: wenn am Ende des Events ein falscher-Wert zurückgegeben wird verhindert der Browser das Senden der Formulardaten. Entsprechend kann man eine Funktion schreiben:

MMT Webprogrammierung 1

70

<script> function formularok() { var ok, fehler; ok = true; fehler = ""; if ( document.pizzaformular.liefername.value == "" ) { fehler += "Sie müssen den Empfänger angeben\n"; ok = false; } if ( document.pizzaformular.adresse.value == "" ) { fehler += "Sie müssen eine Lieferadresse angeben\n"; ok = false; } // weitere Überprüfungen

if ( ok ) { return true; } else { alert("Das Formular ist nicht ok:\n" return false; }

+ fehler );

} Empfänger:
Adresse: in 5020 Salzburg
Telefon/Handy: in 5020 Salzburg



MMT Webprogrammierung 1

5.

71

Javascript und DOM

Javascript und das Document Object Model (DOM) wird vorgestellt.

Was Sie wissen sollten •

Wie man FireBug als Javascript-Console und für die Fehlersuche nutzen kann.

•

Was der Unterschied zwischen Javascript und Java ist. Welche Sprache für eine bestimmte Problemstellung passend ist.

•

Dass Javascript eine Programmiersprache im Web-Browser ist. Dass Javascript Kompatiblitätsprobleme hat, aber trotzdem die einzige Chance ist, Webseiten interaktiver zu machen.

Was Sie können sollten •

Mit den DOM-Befehlen alle Elemente in eine Webseite manipulieren.

Weitere Informationsquellen •

MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly. ISBN 0596527748.

•

FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN 3897214911.

•

CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.

•

STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi..

MMT Webprogrammierung 1

72

5.2 Hintergründe Javascript ist eine Programmiersprache die in HTML eingebettet und vom Browser interpretiert wird. Der Wirkungsbereich von Javascript ist auf das Browserfenster und das aktuelle Dokument beschränkt — Sie können mit Javascript nicht die Festplatte löschen oder Excel starten. Unter dem Namen Actionscript wird eine Variante von Javascript in Flash verwendet.

5.2.1

Javascript und Java

Es gibt noch eine zweite Programmiersprache mit sehr ähnlichem Namen: Java. Die beiden zu verwechseln ist recht peinlich. Die Verwechslung ist übrigens beabsichtigt: Im Jahr 1995 gab es einen großen Hype rund um Java, Netscape wollte davon profitieren und nannte die neue Sprache „Javascript“.

Wer hat’s erfunden?

Javascript

Java

Netscape

Sun

Interpretiert Sprache

Kompilierte Sprache

Typbindung

Wenige Datentypen, Probleme wer- Datentypen und Klassen werden streng unterschieden und zur Compiden erst zur Laufzeit erkannt lezeit geprüft

Verwendung

Im Webbrowser, in Flash, in Illustra- Überall (Chipkarten, am Server, im tor und Indesign Browser, im Handy)

Projekte

Meist kurzfristige Projekt mit weni- Alle, auch Großprojekte mit vielen gen Personen „Mannjahren“

ProgrammiererInnen Auch Web-DesignerInnen

Nur InformatikerInnen

Objektorientierung

Objekte und Klassen

5.2.2

Objekte und Prototypen

Geschichte von Javascript

Javascript wurde ursprünglich von Netscape erfunden, und dann von verschiedenen Herstellern weiterentwickelt. Es war eines der Schlachtfelder im Browser-War: Microsoft und Netscape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen Browsers zu verbessern und Webseiten im gegnerischen Browser unbrauchbar zu machen. Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:

MMT Webprogrammierung 1

73

funktioniert in Netscape und Mozilla

x = window. innerWidth;

funktioniert in Internet Explorer

x = document. body. clientWidth;

Erst nachträglich gab es (partielle) Einigung auf Standards. Mit dem „Document Object Model“ (DOM) und Libraries wie Prototype oder jQuery hat Javascript nun einen Zustand erreicht, der die Programmierung wieder erträglich macht. Lange Zeit waren kleine Javascript-Programme eine relative unabhängige Ergänzung für WebApplikationen. Ein Beispiel dafür wäre ein Javascript-Kalender der die Eingabe eines Datums in ein Eingabefeld erleichtert. Seit 2005 wir unter dem Schlagwort AJAX Javascript noch enger mit der serverseitigen Webapplikation verzahnt: AJAX steht für asynchrones Nachladen von Teilen der Webseite über Javascript.

5.2.3

Document Object Model

Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite oder auch ein XML- Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden kann. Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der Version 1. 0. Das DOM einer Webseite kann man sich als Baum vorstellen, ähnlich der Ordnerstruktur im Dateisystem. So ist in folgendem Beispiel der markierte
• -Tag innerhalb des
  -Tags, der
  1. -Tag enthält wiederum einen -Tag.

     Navigation

     Überschrift

     Dies und Das

     1. erster Link
     2. zweiter Link
     ...
     
     Wenn man mit Javascript irgendeinen Teil der Webseite verändern will verändert man diesen Baum. Mögliche Veränderungen wären: •
     
     Mache ein beliebiges Element des DOM unsichtbar (z. B. die ganze Liste)
     
     •
     
     Ändere den Style eines beliebigen Elements (z. B. die Schriftart der Überschrift)
     
     •
     
     Füge neue Elemente ein (z. B. drei zusätzliche Listenpunkte)
     
     MMT Webprogrammierung 1
     
     5.3
     
     74
     
     Basic Javascript
     
     Ein vollständiges Beispiel für eine Webseite mit Javascript-Programm: <script> function setcolor( c ) { b = document.getElementById('farbfeld'); b.style.backgroundColor = c }

     Farbwahl

     
     
     In dieser Webseite ist an den vier markierten Stellen Javascript zu finden. Wie Sie sehen ist Javascript sehr eng mit HTML und CSS verzahnt. Wenn Sie also eine bestehende Website warten oder verändern sollen, müssen Sie mindestens den bestehenden Javascript-Code erkennen können, um ihn nicht zu beschädigen — auch wenn Sie selbst nicht programmieren wollen. Deswegen klären wir erst einmal wie Javascript eingebunden wird.
     
     5.3.1
     
     Einbindung von Javascript
     
     Externe Javascript-Datei Man kann Javascript-Programme in eigenen Dateien speichern, diese haben traditionell die Endung .js. Wir werden eine Javascript-Library namens jQuery verwendet. Mit dem <script>-Tag im Head des Dokuments wird die externe Javascript-Datei eingebunden: <script src="jquery.js" type="text/javascript">
     
     Wird der <script>-Tag auf diese Weise (mit dem Attribut src) verwendet, dann darf er keinen Inhalt zwischen <script> und enthalten. Achtung: die Schreibweise ohne Ende-Tag: <script src=“jquery“ /> funktionert nicht!
     
     MMT Webprogrammierung 1
     
     75
     
     Der <script>-Tag Javascript-Programme können im HTML-Code mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:

     Selbstzerstörung

     <script> i=10; while (i>0) { document.write("
     in " + i + " Millisekunden"); i--; }

     <strong>Peng!
     
     Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm. Der Befehl document.write(), der hier für die Ausgabe verwendet wird, wurde durch das DOM größteteils er-
     
     setzt.
     
     Javascript in einer URL Als URL kann man auch ein kleines Javascript-Programm angeben, z. B. bei einem Link: js
     
     Die “Javascript-in-einer-URL”- Schreibweise ist in HTML-Seiten nicht sehr sinnvoll, da sie für Browser ohne Javascript-Fähigkeit die Links unbrauchbar macht. Aber Sie werden diese Methode vielleicht noch von Flash aus verwenden.
     
     Die onEvent - Attribute Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintreten. Die Begriffe Ereignis und Event sind Fachbegriffe in der Programmierung von Benutzerschnittstellen: Ein Event ist etwas was die UserIn tut, und was das Programm wahrnehmen kann. z. B. die UserIn klickt auf einen Button oder bewegt die Maus über einen bestimmten Bereich der Webseite. Wenn man eine grafische Oberfläche programmiert (egal ob in HTML+Javascript oder in Flash+Actionscript oder in Java) spricht man von ereignisgesteuerter Programmierung. In HTML+Javascript funktioniert das so: Bei manchen HTML-Tags gibt es Attribute die mit on beginnen (onclick, onsubmit, onload,. . . ), als Wert enthalten diese Attribute das Javascript-Programm das ausgeführt werden soll.
     
     MMT Webprogrammierung 1
     
     76
     
     

     Überraschung

     
     
     Ein Button wird angezeigt. Erst wenn der Button gedrückt wird, wird das Event onClick ausgelöst, und damit das Javascript-Programm gestartet. Es erzeugt ein Popup-Fenster mit dem Text „Ihre Festplatte wurde gelöscht“ (aber es löscht nicht wirklich die Festplatte!). Das Popup-Fenster muss erst mit einem Klick auf den OK-Button geschlossen werden, bevor weitere Arbeit mit dem Browser möglich ist.
     
     Abbildung 42: Button mit onClick-Event
     
     Ein paar typische Events mit ihren typischen HTML-Tags:
     
     Das Programm wird ausgeführt, nachdem die ganze Seite geladen + fertig dargestellt ist
     
     
     Das Programm wird ausgeführt wenn die Maus über den Link bewegt wird (auch: onmouseout)
     
     onmouseover=". . . " rel="nofollow">
     
     Das Programm wird ausgeführt wenn auf den Button geklickt wird. Das Programm muß true oder false zurückgeben um anzuzeigen ob der Link wirklich geöffnet werden soll.
     
     
     
     
     Das Programm wird ausgeführt wenn der Einsende-Knopf des Formulars betätigt wird, aber bevor die Daten wirklich gesendet werden. Das Programm muß true oder false zurückgeben um anzuzeigen ob das Formular wirklich abgesendet werden soll.
     
     
     
     Das Programm wird ausgeführt wenn der Inhalt des Eingabefeldes verändert wurde
     
     MMT Webprogrammierung 1
     
     77
     
     Eine ausführliche Liste der Events, und eine ausführliche Auflistung welcher HTML-Tag mit welchem Event kombiniert werden kann, finden Sie in selfhtml6.
     
     5.3.2
     
     Syntax von Javascript
     
     Javascript hat eine ähnliche Schreibweise wie die Sprachen aus der C-Familie (C, C++, Java, Perl, PHP): Anweisung wird mit einem Strichpunkt (Semikolon) getrennt, Blöcke werden mit geschwungenen Klammern gebildet. Im Beispiel sehen Sie eine Funktions-Definition mit zwei Anweisungen: function setcolor( c ) { b = document.getElementById('farbfeld'); b.style.backgroundColor = c }
     
     In diesem Beispiel sehen Sie auch die objektorientierte Schreibweise für Methoden und Eigenschaften: Eine Methode ist eine Funktion die zu einem Objekt gehört, wie z.B. die Funktion getElementById() , die zum document-Objekt gehört. Die Methode wird als objekt.methodenname() aufgerufen. Eine Eigenschaft ist eine Variable die zu einem Objekt gehört, wie z.B. die style (eine Eigenschaft von b) oder bachgroundColor (eine Eigenschaft von style).
     
     In andere Programmiersprachen müssen Variablen deklariert werden (ein Datentyp für die Variable wird festgelegt) und initialisiert werden (ein erster Wert wird in die Variable gespeichert). In Javascript ist das nicht nötig, wenn eine Variable zum ersten Mal im Programm erwähnt wird, wird sie vom Interpreter angelegt und mit dem Wert undefined belegt. Die folgenden Beispiele können Sie direkt in FireBug in der Console ausprobieren wie in Abbildung 43 gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet, mit dem Befehl console.log( … ) können Sie direkt auf die Console schreiben.
     
     Abbildung 43: Javascript Console in FireBug
     
     6
     
     http://de.selfhtml.org/javascript/sprache/eventhandler.htm
     
     MMT Webprogrammierung 1
     
     78
     
     Variablen in Javascript können Zahlen, Strings, Arrays, Objekte enthalten – der Interpreter trennt Variablen nicht nach verschiedenen Datentypen: a a a a
     
     = = = =
     
     10; 3.141; "ein text"; true;
     
     // Integer // Float // String // Boolean
     
     Arrays Arrays in Javascript können wie in C mit eckigen Klammern und Integer-Index ausgelesen werden: b[0], b[1], …
     
     Für das Erzeugen des Arrays gibt es zwei Schreibweisen var b; b = ["eins", 2, 3.141, true]; b = new Array("eins", 2, 3.141, true);
     
     // JSON-Schreibweise // Objekt-Schreibweise
     
     Die Werte im Array können verschiedene Daten haben (String, Integer, Float, Boolean). Die Größe des Arrays ist nicht beschränkt, die aktuelle Länge des Arrays kann mit .length ausgelesen werden. var i,t; i = 0; t = "Das Array:\n"; while( i < b.length ) { t += "Index = " + i + ", Wert = " + b[i] + "\n"; i++; } alert(t);
     
     Objekte Für das Erzeugen des Objekten gibt es zwei Schreibweisen: die JSON-Schreibweise mit geschwungenen Klammern eignet sich gut für einmalige Objekte. Will man mehrere Objekte mit denselben Eigenschaften erzeugen, dann ist eine Instanziierungs-Funktion besser geeignet. var c; c = {"farbe" : "rot", "beschriftung": "int pi == 3", "verkauft": true}; function Shirt( f, b, v ) { this.farbe = f; this.beschriftung = b; this.verkauft = v; } c = new Shirt("rot", "int pi == 3", true); alert("Das Shirt ist " + c.farbe ); // gibt “Das Shirt ist rot”
     
     Eine Besonderheit von Javascript: Eigenschaften eines Objekts können nicht nur über die PunktSchreibweise, sondern auch über eckige Klammern angesprochen werden: alert("Das Shirt ist " + c["farbe"] );
     
     In den eckigen Klammern steht nun ein String. Dieser könnte auch in einer Variable gespeichert sein:
     
     MMT Webprogrammierung 1
     
     79
     
     e = "beschriftung"; alert("Die Beschriftung lautet " + c[e] );
     
     Mit dieser Schreibweise und der for-Schleife kann man über alle Eigenschaften eines Objektes iterieren: var i,t; t = "Das Array:\n"; for( i in c ) { t += "Eigenschaft = " + i + ", Wert = " + c[i] + "\n"; i++; } alert(t);
     
     5.3.3 DOM Beispiel Die wichstigsten Befehle zur Manipulation des DOM finden Sie in selfhtml unter „document“ und „node“. Ein Node ist ein Knoten DOM-Baum, entspricht also einem HTML-Tag oder einem Stück Text. Die Attribute des HTML-Tags sind über getAttribute / setAttribute / … zugänglich und manipulierbar. document.getElementById() document.getElementsByTagName() document.createElement()
     
     (liefert 1 Node) node.parentNode (liefert Array von Nodes) node.childNodes node.firstChild node.lastChild node.previousSibling node.nextSibling node.data node.attributes
     
     node.getElementById() node.getElementsByTagName() node.appendChild() node.cloneNode() node.getAttribute() node.setAttribute() node.hasChildNodes() node.insertBefore() node.removeAttribute() node.removeChild() node.replaceChild()
     
     Ein simples Beispiel: ein bestimmter Tag wird über die ID ausgewählt und sein Style-Attribut gesetzt: d = document.getElementById("person_25“); d.setAttribute("style", "display:none");
     
     Diese beiden Zeilen könnten auch zu einer kombiniert werden: document.getElementById("person_25“).setAttribute("style", "display:none");
     
     Achtung: Falls der Tag schon ein Style-Attribute hatte wurde dieses überschrieben. Der Wert des Attributes ist ein einfacher String. Den eigentlichen Text der HTML-Seite kann man als data eines Text-Nodes auslesen. <span id="v_25" class="vorname">Benjamin
     
     Das erste und einzige Kind des Span ist ein Text-Node: vn = document.getElementById("v_25").firstChild.data;
     
     MMT Webprogrammierung 1
     
     80
     
     Ein Beispiel eines Spiels in Javascript: Die Webseite enthält 97 div’s mit den StudentInnen von MMA und MMT. Hier ein Beispiel für so ein div:

     <span class="vorname">Benjamin <span class="nachname">Hinteregger <span>mma2008

     
     
     Abbildung 44 zeigt das DOM dieses HTML-Dokuments:
     
     

     
     
     

     
     
     
     
     
     
     
     
     nextSibling
     
     <span>
     
     „Benjamin“
     
     
     
     <span>
     
     <span>
     
     „Hinteregger“
     
     Abbildung 44: Document Object Model des HTML-Dokuments des Spiels
     
     Den vollständigen Code des Spieles finden Sie im E-Learning-Kurs.
     
     
     
     MMT Webprogrammierung 1
     
     6.
     
     81
     
     jQuery
     
     Was Sie wissen sollten •
     
     Was „unobstrusive Javascript“ / „graceful degradability“ / „progressive enhancement“ bedeutet, warum man es anstrebt, wie man es erreicht
     
     •
     
     Dass Javascript-Funktionen in Variablen gespeichert werden können, was der Unterschied ist zwischen f = c(); f = c;
     
     •
     
     Dass Javascript-Funktionen ohne Namen definiert werden können, wie man so eine anonyme Funktion definiert und verwendet
     
     Was Sie können sollten •
     
     Mit jQuery Teile einer Webseite aus- und einblenden und damit dynamische Formulare gestalten
     
     Weitere Informationsquellen •
     
     http://jquery.com
     
     Vertiefungsmöglichkeiten Erforschen Sie die Dokumentation und die Tutorials von jquery. Alternativ: befassen Sie sich statt dessen mit einer der anderen Libraries: o
     
     Prototype http://www.prototypejs.org/
     
     o
     
     Scriptaculous http://script.aculo.us/
     
     o
     
     Mootools http://mootools.net/
     
     o
     
     Dojo http://dojotoolkit.org/
     
     o
     
     YUI (von Yahoo) http://developer.yahoo.com/yui/
     
     MMT Webprogrammierung 1
     
     82
     
     Die Library jQuery unterstützt das Prinzip der „graceful degradability“ – auch ohne Javascript sind Webseiten mit jQuery immer noch gut verwendbar. Dieses Prinzip wird auch „progressive enhancement“ oder „unobstrusive javascript“ genannt, die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript, und fügt dann Javascript hinzu ohne die Verwendbarkeit ohne Javscript zu zerstören. Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava testen. Wie in Abbildung 45 gezeigt kann Javascript mit einem Klick deaktiviert werden.
     
     Abbildung 45: Javascript deaktivieren mit QuickJava in Firefox
     
     Bei der Verwendung von jQuery bleibt der HTML-Code „javascript-frei“: jQuery wird nur an einer Stelle, im Head des Dokuments eingebaut: <script type="text/javscript" src="http://code.jquery.com/jquery-latest.js"> <script> $(document).ready(function(){ // Javascript code here });
     
     Die URL http://code.jquery.com/jquery-latest.js kann man für alle Webseiten die online sind verwenden: hinter code.jquery.com steht nicht nur ein Server, sondern der Amazon Simple Storage Services (s3). Nur wenn man offline Entwickeln will muss man die Library wirklich herunterladen.
     
     6.2 Besondere Javascript-Schreibwesen in jQuery 6.2.1 Mein Name ist Dollar In Javascript kann das Dollar-Zeichen in Bezeichnen (Variablennamen, Funktionsnamen) verwendet werden. jQuery nutzt diese Besondernheit von Javascript aus und definiert eine Funktion und ein Objekt mit dem Dollarzeichen als Namen. Der jQuery-Code ist dadurch anfangs schwer zu lesen: Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen, das Argument ist ein String: $("a")
     
     MMT Webprogrammierung 1
     
     83
     
     Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen, das Argument ist das document-Objekt: $(document) Das Objekt mit dem Namen $ hat eine Methode get. Diese wird mit zwei Argumenten aufgerufen: $.get("backend.php", callback)
     
     6.2.2 Funktionen als first-class citizens7 In Javascript können Funktionen zur Laufzeit erzeugt werden, in Variablen gespeichert werden, haben eine Identität auch wenn sie keinen Namen haben. Betrachten wir eine ganz normale Funktion: function create_gold() { // Details nicht so wichtig return gold; }
     
     Sie kenne schon die Schreibweise für den Aufruf der Funktion: auch wenn die Funktion keine Argumente hat werden auf jeden Fall die runden Klammern geschrieben: g = create_gold();
     
     In Javascript gibt es eine zweite, ähnliche Scheibweise ohne die runden Klammern. Dabei wird die Funktion nicht aufgerufen, sondern in der Variable gespeichert: f = create_gold;
     
     Nun kann die Funktion auch unter dem neuen Namen f aufgerufen werden: g2 = f();
     
     6.2.3 Anonyme Funktionen Da Funktionen in Variablen gespeichert werden können ist es nicht unbedingt nötig, dass Sie einen normalen Funktionsnamen haben. Die folgende Funktion hat den Funktionsnamen hase: function hase() { alert ("mein name ist hase") }
     
     7
     
     http://en.wikipedia.org/wiki/First-class_citizen
     
     MMT Webprogrammierung 1
     
     84
     
     Alternativ eine Schreibweise ohne Namen, die Funktion wird sofort in der Variable f gespeichert: f = function() { alert("ich habe keinen namen"); };
     
     Die beiden Funktionen können nur auf die gleiche Weise aufgerufen werden: hase(); f();
     
     Bei der Verwendung von jQuery werden oft Funktionen ganz ohne Namen verwendet. Ein Beispiel ist die ready-Funktion: Die Funktion ready() von jQuery verlangt ein Argument: eine Funktion, die aufgerufen werden soll wenn die Webseite vollständig geladen ist: function nach_dem_laden () { // Your code here } $(document).ready(nach_dem_laden);
     
     Da der Name „nach_dem_laden“ nur einmal verwendet wird ist er eigentlich nicht nötig. Statt dessen verwendet man eine anonyme Funktion: $(document).ready( function(){ // Your code here });
     
     Zur Beruhigung: auch wenn Sie die Schreibweise nicht ganz durchschauen können Sie jQuery erfolgreich verwenden. Sie können die drei Zeilen einfach mit copy-und-paste in eine Webseite übertragen und Ihren eigenen Code dann einfügen. (Wahrscheinlich arbeiten die meisten jQuery-User so ;-)
     
     6.3 Selektieren und Manipulieren mit jQuery jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen: $("a") $("h1") $("p.extra")
     
     /* alle A-Tags */ /* alle Überschriften h1 */ /* alle p-tags mit klasse extra */
     
     jQuery definiert noch ein paar zusätzliche Selektoren8, die es in CSS (noch) nicht gibt: $("tr:even") $("p:contains('Warnung')") $(":checkbox")
     
     8
     
     /* Alle geraden Zeilen der Tabelle */ /* alle Absätze die die Zeichenkette Warnung enthalten */ /* Alle input-Tags vom typ checkbox */
     
     http://docs.jquery.com/Selectors
     
     MMT Webprogrammierung 1
     
     85
     
     Die Selektion allein verändert die Webseite noch nicht. Dafür bietet jQuery eine Reiche von Manipulations-Funktionen an. Diese können direkt an die Selektions-Funktion geschreiben werden: die Selektions-Funktion gibt ein Objekt mit entsprechenden Methoden zurück: $("a").addClass("wichtig"); $("h1").append(":"); $("h1").prepend("Titel:"); $("p.extra").hide();
     
     /* alle A-Tags erhalten die Klasse wichtig */ /* in Überschriften h1 wird ein Doppelpunkt angefügt */ /* --||-- wird vorne ‚titel:’ eingefügt */ /* alle p-tags mit klasse extra werden versteckt */
     
     6.4 Interaktion mit jQuery jQuery bietet für die verschiedenen Events eigene Methoden an, das erste Argument ist dabei immer die Funktion, die aufgerufen werden soll. Hier kommen meist anonyme Funktionen zum Einsatz: $("h1").click(function() { alert("ein h1 wurde geklickt"); });
     
     Innerhalb der Funktion steht die Variable this zu Verfügung um den angeklickten Tag zu erhalten: $("h1").click(function() { $(this).hide(); /* versteckt den angeklickten h1 tag */ });
     
     Dazu ein vollständiges Beispiel: zu mehreren Überschriften gibt es Text, der bei Klick auf die Überschrift versteckt bzw. angezeigt werden soll:

     Vertiefendes Studium

     Das Schwerpunktstudium Vertiefung ermöglicht den Erwerb hoch spezialisierter Qualifikationen in einer gestalterischen Fachdisziplin.

     
     
     

     Steuerung

     Das Schwerpunktstudium Steuerung zielt auf die Ausbildung von Führungskräften der Kreativwirtschaft.

     
     
     Dazu das vollständige Javascript-Programm mit jQuery: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> <script> $(document).ready(function(){ $(".extra").hide(); $(".more").click(function(){ $(this).next(".extra").toggle(); }); }); this ist innerhalb der Funktion der angeklickte Tag. Mit dem jQuery-Befehl next() wird nach dem
     
     nächsten Tag im HTML-Code gesucht, hier nach dem nächsten Tag mit der Klasse extra. Auf den gefundenen Tag wird der befehl toggle() angewandt.
     
     MMT Webprogrammierung 1
     
     7.
     
     AJAX und Ausblick
     
     Was Sie wissen sollten •
     
     Was AJAX bedeutet (jenseits von Putzmittel und Fußball)
     
     •
     
     Was asynchron in der Netzwerk-Programmierung bedeutet
     
     Was Sie können sollten •
     
     Mit jQuery einen Teil der Webseite mit AJAX (nach-)laden
     
     Weitere Informationsquellen •
     
     http://de.wikibooks.org/wiki/AJAX
     
     86
     
     MMT Webprogrammierung 1
     
     7.2
     
     87
     
     Was ist AJAX?
     
     AJAX ist die englische Abkürzung für „Asynchrones Javascript und XML“. In diesem Kapitel lernen Sie was das genau bedeutet, und dass sich hinter dem X zum Schluss auch andere Format verbergen können Der Begriff AJAX wurde von Jesse James Garrett zuerst verwendet9. Es steht für eine besondere Verwendung von Javascript und einer serverseitigen Programmiersprache. Ein Beispiel für die Verwendung von AJAX ist das in Abbildung 46 gezeigte Eingabefeld: schon während des Eintippens eines Suchwortes wird eine Anfrage an den Webserver geschickt. Dieser antwortet mit einer Liste von vorgeschlagenen Namen. Diese Liste wird mit Javascript (unter Verwendung der DOM) in einer

     unterhalb des Eingabefelds angezeigt:
     
     Abbildung 46: Vorschläge für die Eingabe werden über AJAX geladen
     
     Mit AJAX wird hier eine HTTPAnfrage gesendet. Der Unterschied zu einer „normalen“ HTTP-Anfrage: Bei einer „normalen“ HTTP-Anfrage schaltet der Browser auf „Warten“, eine neue vollständige Webseite wird geladen und angezeigt. Asynchron heisst: der Request wird abgesetzt, aber die UserIn kann weiterhin mit der Webseite interagieren. Erst wenn die Antwort des Servers vorliegt wird die normale Darstellung der Seite kurz unterbrochen und ein JavascriptProgramm fügt die Daten in die Seite ein.
     
     9
     
     http://www.adaptivepath.com/publications/essays/archives/000385.php
     
     MMT Webprogrammierung 1
     
     88
     
     Auf der Ebende des Programm-Codes sieht der unterschied zwischen synchron und asynchron so aus: Befehl1(); Befehl2(); Antwort = asynchron_laden(url); Befehl3(); Befehl4();
     
     Bevor Befehl3 ausgeführt werden kann muss erst die Antwort des Servers vorliegen – hier kann also eine Wartezeit von mehreren Sekunden entstehen. function handle_data(Antwort) { ... } Befehl1(); Befehl2(); asynchron_laden(url, handle_data); Befehl3(); Befehl4();
     
     Befehl3 kann sofort ausgeführt werden, egal ob und wie schnell der Server antwortet. Wenn die Daten vom Server schließlich einlangen wird die Funktion handle_data aufgerufen und die Daten zu verarbeiten. Das kann z.B. gleichzeitig mit Befehl4 erfolgen. Das X am Ende von AJAX steht für XML – das stimmt aber nicht: die Daten vom Server können im XML-Format gesendet werden, aber genauso auch als HTML oder reiner Text oder JSON. Man könnte das X in AJAX auch als „X-beliebiges Format“ deuten. Das wichtigste Javascript-Konstrukt für AJAX ist das XMLHTTPRequestObject. Leider gibt es auch bei diesem Objekt Unterschiede zwischen den Browsern. Um diese Unannehmlichkeiten zu vermeiden, sollte man fertige Libraries verwenden, die die Browser-Unterschiede verbergen.
     
     7.2.1
     
     Simples AJAX Beispiel mit jQuery
     
     Im ersten AJAX Beispiel wird der Output eines PHP-Counters in eine HTML-Seite eingebunden. Das gibt noch keine besonderen Effekte für die LeserIn, sondern macht nur den Einbau des Counters in eine bestehende Webseite einfacher.
     
     MMT Webprogrammierung 1
     
     89
     
     <script src="jquery.js"> <script> $(document).ready(function(){ $("p#counter_zeile").show(); $("#counter_zahl").load("counter_ajax.php"); }); <style> p#counter_zeile { display: none; }

     Das ist eine statische Webseite

     hier ist total viel Inhalt

     Counter: <span id="counter_zahl">?

     
     
     Die ganze Arbeit macht hier jQuery in der Zeile $("#counter_zahl").load("counter_ajax.php");
     
     Das Element mit der Id counter_zahl wird ausgewählt. Mit dem Load-Befehl wird eine http-Anfrage an die angegebene URL abgesetzt. Wenn der Output des PHP-Programm beim Browser ankommt, wird er in das ausgewählte Element eingefügt. Der Output sollte also reiner Text oder HTML sein.
     
     7.3 jQuery Beispiel mit Callback-Funktion In diesem Beispiel warden die Daten des Yahoo-Wetterberichts auf mehrere Arten in einer Webseite angezeigt. Achtung: Dieses Beispiel benutzt zwar öffentlich zugänglich Daten von der YahooWebseite, diese können aber nicht direkt in Javascript geladen werden! Wenn man es doch versucht erhält man in Firebug die Fehlermeldung „Access to restricted URI denied“:
     
     Man braucht am eigenen Server ein PHP-Programm das die Daten lädt und wiedergibt:
     
     MMT Webprogrammierung 1
     
     90
     
     Could not read weather data from weather.yahooapis.com."; } else { echo "$xml"; } ?>
     
     Der Aufruf der lokalen url getweather.php liefert jetzt die gleichen Daten wie die Yahoo Wetterseite. Es handelt sich um Daten im XML-Format, hier ein Auszug: <description>Yahoo! Weather for San Francisco, CA 37.77 -122.42 Mon, 19 Jan 2009 12:56 pm PST
     
     Im Tag ist die Temperatur gespeichert und ein Code der die Wetterlage angibt. Unter diesem Code kann man bei Yahoo auch ein Bild zur Wetterlage erhalten, z.B: zu den Codes 27. 33, 32 (mostly cloudy at night, fair at night, sunny) die URLs http://l.yimg.com/a/i/us/we/52/27.gif http://l.yimg.com/a/i/us/we/52/33.gif http://l.yimg.com/a/i/us/we/52/34.gif und die Bilder
     
     In der Webseite werden die Daten per AJAX geladen, dabei wird eine callback-funktion angegeben: $.get("getweather.php", handle_the_weather); function handle_the_weather(data){ ... }
     
     Die Callback-Funktion erhält die geladenen Daten als Argument. Wenn die Daten im XML oder HTMLFormat sind kann man sie wieder mit jQuery behandeln: den Tag auswählen und aus dem Tag die Attribute temp und code auslesen:
     
     MMT Webprogrammierung 1 cond = $("yweather\\:condition", data); temp = cond.attr("temp"); code = cond.attr("code");
     
     Der Code wird zum Anzeigen des Bildes von Yahoo verwendet: $("#dasbild").attr("src", "http://l.yimg.com/a/i/us/we/52/" + code + ".gif");
     
     Die Temperatur wird doppelt verwendet: einmal wird sie einfach angezeigt: $("#temp").text( temp + "°" );
     
     Und zweitens wird je nach Temperatur die Hintergrundfarbe der Webseite passend gesetzt: if( temp < 0 ) { color="blue"; } else if ( temp < 10 ) { color="green"; } else if ( temp < 20 ) { color="yellow"; } else if ( temp < 30 ) { color="orange"; } else { color="red"; } $("body").css("background-color",color);
     
     Hier der vollständige Code: $.get("getweather.php", handle_the_weather); function handle_the_weather(data){ var cond, temp, code, color; var cond = $("yweather\\:condition", data); temp = cond.attr("temp"); code = cond.attr("code"); $("#dasbild").attr("src", "http://l.yimg.com/a/i/us/we/52/" + code + ".gif"); $("#temp").text( temp + "°" ); if( temp < 0 ) { color="blue"; } else if ( temp < 10 ) { color="green"; } else if ( temp < 20 ) { color="yellow"; } else if ( temp < 30 ) { color="orange"; } else { color="red"; } $("body").css("background-color",color); }
     
     91
     
     MMT Webprogrammierung 1
     
     92
     
     7.4 Ausblick Sie haben den Umgang mit HTML, CSS und Javascript erlernt. Wenn Sie die Übungsbeispiele selbstständig gelöst haben und hin und wieder eine eigene Variante programmiert haben, dann sollten Sie jetzt genug Übung haben um den client-seitigen Teil einer Web-Applikation selbstständig zu planen und umzusetzen. Wie kann es nun weiter gehen? Was können sie als nächstes lernen? 1. Übung, Übung, Übung. Je mehr sie programmieren, desto besser werden Sie. Sie werden schneller Lösungswege finden, Sie werden kürzere, übersichtlichere Programme schreiben, Sie werden Programme schreiben die sich leichter adaptieren und erweitern lassen. 2. Programmieren am Server. Wie Sie an den AJAX-Beispiele in diesem Kapitel gesehen haben stoßen Sie bald an die Grenzen der Webprogrammierung wenn Sie nicht auch eine Sprache am Webserver beherrschen. PHP bietet sich als einfachste und am weitesten verbreitete Sprache am Server an. 3. Andere Technologien beobachten. Verlieren Sie nicht die Alternativen zu HTML+Javascript aus den Augen! Flash / Actionscript / Flex von Adobe sind eine Alternative, Silverlight von Microsoft ist noch nicht sehr funktionstüchtig, könnte sich aber entwickeln. Diese Alternativen sollten Sie auf jeden Fall im Auge behalten!
     
     MMT Webprogrammierung 1
     
     93
     
     Quellenverzeichnis
     
     FREEMAN, Elisabeth(2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 3897214539. MÜNZ,Stefan / NEFZGER,Wolfgang (2005): HTML Handbuch. Studienausgabe. Franzis. ISBN 3772366546. ZELDMAN,Jeffrey (2008): Webdesign mit Webstandards: Grenzenlos kompatibel. Addison-Wesley, München. ISBN 3827327326. CEDERHOLM,Dan (2007): Bulletproof Webdesign (2. Ausgabe): Absolut flexibel und für alles gewappnet mit CSS und XHTML. Addison-Wesley, München. ISBN 382732629X.
     
     MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly Media, . ISBN 0596527748. FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN 3897214911. CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742. STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi. Markt+Technik. ISBN 3827265088.
     
     MMT Webprogrammierung 1
     
     94
     
     Stichwortverzeichnis Absende-Button
     
     58
     
     Passwort-Feld
     
     57
     
     Bildfeld
     
     58
     
     Radiobutton
     
     57
     
     Button
     
     58
     
     Radiobuttons
     
     58
     
     Checkbox
     
     57
     
     Textbereich
     
     57
     
     Datei-Upload
     
     59
     
     Textfeld
     
     56
     
     fieldset
     
     59
     
     Unsichtbares Feld
     
     58
     
     legend
     
     59
     
     URL
     
     Liste (Eingabefeld)
     
     57
     
     Verstecktes Feld
     
     58
     
     Menü
     
     57
     
     Zurücksetzen-Button
     
     58
     
     8

     ---

     Related Documents

     

     Mmt Webprogrammierung 1 Im Wintersemester 2008

     May 2020 0

     

     Mmt Webprogrammierung 2 Im Sommersemester 2009

     May 2020 0

     

     Mmt-1

     November 2019 4

     

     Ver.di Campus-zeitung Nr. 1 Im Wintersemester 2009/10

     June 2020 0

     

     Mmt Table.doc

     May 2020 17

     

     Im 1

     June 2020 2

     ---

     More Documents from ""

     

     Mmt Webprogrammierung 2 Im Sommersemester 2009

     May 2020 0

     

     Mmt Webprogrammierung 1 Im Wintersemester 2008

     May 2020 0

     

     Anexo02-ficha-de-postulacion.doc

     June 2020 17

     

     Informe 2 De Lab. Bioquimica

     May 2020 19

     

     May 2020 8

     

     May 2020 6