Workshop HTML, CSS Javascript
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Workshop HTML, CSS Javascript Wien, April 2002 Bettina Kann
Inhalt:
1. Frames 3
2. BEREICHE 7
3. CSS - Eine Einführung 9
4. Javascript-Einführung 16
21. Frames
1.1. Framesets
Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene,
frei definierbare Segmente aufteilen. Jedes Segment kann eigene Inhalte enthalten.
Die einzelnen Anzeigesegmente (also die Frames) können wahlweise einen
statischen Inhalt (= "non scrolling regions") oder einen wechselnden Inhalt haben.
Verweise in einem Frame können Dateien aufrufen, die dann in einem anderen
Frame angezeigt werden.
Frames werden ab Netscape 2.0 und ab MS Internet Explorer 3.0 unterstützt. Seit
HTML 4.0 gehören die Frames auch zum offiziellen HTML-Standard.
Die nebenstehende Abbildung zeigt ein typisches Beispiel
für Frames Sie stellt den Inhalt des gesamten
Anzeigefensters des Browsers schematisch dar. Das
Anzeigefenster ist in drei unabhängige Bereiche aufgeteilt.
Die Verweise links und unten können beispielsweise
immer eingeblendet bleiben, während sich der Inhalt des
Hauptfensters je nach ausgewähltem Verweis ändern
kann. Dabei werden im Beispiel der Abbildung immer drei
verschiedene HTML-Dateien gleichzeitig angezeigt: links
und unten immer die gleiche Datei, im Hauptfenster
jeweils eine wechselnde Datei, je nach ausgewähltem
Verweis.
Wenn Sie in einer HTML-Datei ein Frame-Set definieren, sieht das Grundgerüst der
HTML-Datei folgendermaßen aus:
Frame-Test
... Frame-Definitionen ...
Dieser Text wird angezeigt, wenn der Browser keine Frames kennt
Beim Definieren von Frame-Sets bestimmen Sie, wie das Anzeigefenster aufgeteilt
werden soll.
Bsp.1:
... Dadurch ergeben sich zwei Frames, deren
Inhalt hier bestimmt wird...
3Bsp. 2:
... Dadurch ergeben sich zwei Frames, deren Inhalt hier bestimmt wird...
Bsp.3:
... Zwei Frames, wobei der Inhalt des ersten Frames hier bestimmt wird...
... Noch mal zwei Frames, deren Inhalt hier bestimmt wird...
Nachdem Sie durch die Definition von Frame-Sets geeignete Bereiche des
Anzeigefensters bestimmt haben, geben Sie mit der Definition der Frames an,
welche HTML-Dateien in den einzelnen Bereichen zunächst angezeigt werden
sollen.
Bsp.:
Ferner sollten Sie für jeden definierten Frame mit name= einen Namen vergeben.
Diese Namen brauchen Sie, um Verweise zu anderen Frames zu definieren. Namen
für Frames müssen in Anführungszeichen stehen, dürfen nicht zu lang sein und nur
aus Buchstaben, Ziffern und Unterstrichen bestehen. Folgende Namen haben eine
spezielle Bedeutung und dürfen nicht als normale Fensternamen verwendet werden:
_self, _blank, _parent und _top.
Scrollbars (Bildlaufleisten) erzwingen/verhindern:
Bsp.:
Durch die Angabe scrolling=yes im Definitions-Tag eines Frames erzwingen Sie, daß
das Anzeigefenster des Frames in jedem Fall Scrollbars besitzt. Durch scrolling=no
verhindern Sie dies.
Mindestabstände zwischen Fensterrand und Fensterinhalt
Bsp.:
4Durch das Attribut marginwidth= [Pixel] im Definitions-Tag eines Frames bestimmen
Sie den Abstand zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt
(margin = Rand, width = Breite). Durch das Attribut marginheight= [Pixel] bestimmen
Sie den Abstand
zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt (height = Höhe).
Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere.
Sie können zu beiden Werten Angaben machen, aber auch nur zu einem der beiden.
Mit den Angaben marginwidth=0 marginheight=0 sollte der Fensterinhalt exakt in der
linken oberen Ecke beginnen. Leider fügt Netscape bei der Anzeige doch immer
noch ein Pixel "Seitenrand" ein.
Unveränderbare Fenstergröße
Bsp:
Durch das Attribut noresize im Definitions-Tag eines Frames verhindern Sie, daß der
Anwender die Größe des Frame-Fensters verändern kann
Rahmendicke bzw. unsichtbare Fensterrahmen
Um die Rahmen beim Internet Explorer und bei Netscape zu unterdrücken, müssen
Sie alle drei Angaben frameborder=0 framespacing=0 border=0 notieren.
Farbige Fensterrahmen
Bsp.:
Mit der Angabe bordercolor= im obersten -Tag können Sie eine
Rahmenfarbe für alle Fensterrahmen bestimmen.
Verweise zu anderen Frames
Wenn Sie mit Frame-Sets arbeiten, werden Sie häufig in einem Frame-Fenster
Verweise anbieten wollen, bei derem Anklicken das Verweisziel in einem anderen
Frame-Fenster angezeigt werden soll.
Bsp. Teil 1 - Datei mit Frame-Definitionen: Bsp. Teil 2 - Datei verweise.htm:
Verweise Verweise
Neuigkeiten
Voraussetzung für Verweise zu anderen Frames ist, daß die Frame-Fenster eines
Frame-Sets Namen erhalten. Im obigen Beispiel wird ein Frame-Set mit zwei Frame-
5Fenstern definiert, die mit dem Attribut name= im -Tag die Namen links und
rechts erhalten.
Für das Setzen eines Verweises zu einem anderen Frame-Fenster gilt das Schema
für Verweise in HTML. Damit das Verweisziel in einem anderen Frame-Fenster
angezeigt wird, notieren Sie im einleitenden Verweis-Tag zusätzlich das Atrribut
target= (target = Ziel).
Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt
werden soll. Der Name muß in Anführungszeichen stehen.
Der Name, den Sie bei target= angeben, muß exakt mit dem Namen
übereinstimmen, der bei der Frame-Definition mit name= vergeben wurde.
Verweise, die ein Frame-Set beenden
Wenn Sie mit Frame-Sets arbeiten, werden Sie in einem Frame-Fenster manchmal
auch Verweise anbieten wollen, bei derem Anklicken das Verweisziel nicht mehr in
Ihrem Frame-Set angezeigt werden soll. Besonders bei Verweisen zu fremden
WWW-Projekten ist es angebracht, das eigene Frame-Set zu beenden. Dazu gibt es
mehrere Möglichkeiten.
target="_blank" bewirkt, daß das Verweisziel in einem neuen Instanzfenster des
WWW-Browsers angezeigt wird. Das Anzeigefenster mit Ihrem Frame-Set bleibt im
Hintergrund erhalten. Der Anwender kann wieder zu diesem Fenster wechseln, wenn
er möchte.
target="_parent" bewirkt, daß das Verweisziel in dem Zustand des Anzeigefensters
angezeigt wird, der vor dem Start Ihres Frame-Sets aktuell war.
target="_top" bewirkt, daß das Verweisziel in jedem Fall im gesamten
Anzeigefenster angezeigt wird.
62. BEREICHE
Bereiche mit mehreren Elementen
Bereiche mit mehreren Elementen definieren
Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie
Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Diesen
Bereich können Sie dann gemeinsam ausrichten.
Beispiel:
Der Mond - eine Überschrift
Ein Bild vom Mond
Ein erklärender Text zum Mond, und alles wird zentriert
© 1997 by Josua Piesepampel
Erläuterung:
Mit leiten Sie einen Bereich ein, in den Sie mehrere Elemente einschließen
können (div = division = Bereich). Alles, was zwischen diesem Tag und dem
abschließenden steht, wird als Teil des Bereichs interpretiert.
Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem
Atrribut align= im einleitenden -Tag ausrichten. Mit align=center richten Sie den
Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center =
zentriert), mit align=right rechtsbündig (right = rechts). Mit align=justify werden innere
Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz
ausgerichtet. Mit align=left erzwingen Sie die linksbündige Ausrichtung von
Elementen (Voreinstellung).
Weitere Möglichkeiten
Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die
Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Denn gerade das sehr
allgemeine
-Tag ist geradezu prädestiniert dafür, um mit Hilfe von Style-Sheets zum Leben
erweckt zu werden. Dazu müssen Sie zunächst wissen, wie man Style-Sheets
definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben
anzuwenden. Auf das -Tag können Sie beispielsweise folgende Style-Sheet-
Angaben
anwenden:
Schriftformatierung
7Abstände, Ränder, Ausrichtung
Rahmen und Innenabstände
Hintergrundfarben und -bilder
Elemente positionieren
Mehrspaltiger Textfluß
83. CSS - Eine Einführung
Style Sheets
CSS (Cascading Style Sheets) ist ein W3 Standard, der es erlaubt, HTML-Elemente
exakt zu formatieren. Die CSS-Sprache klinkt sich nahtlos in HTML ein und
ermöglicht es, das Aussehen von Absätzen, Tabellen oder Ähnlichem nach Belieben
zu gestalten. Egal, ob man nur einmal einen auffälligen Schriftzug ohne Grafik
gestalten will oder ein einheitliches Layout für hunderte von Webseiten braucht, dafür
ist CSS eine ideale Ergänzung zu HTML.
Möglichkeit 1:
Style-Definitionen im Head der Html-Datei:
Sie können innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben
definieren.
Bsp.:
Titel der Datei
Die Style-Definitionen werden durch das -Tag eingeleitet. wichtig ist das
Attribut type="text/css". Das ist der Mime-Typ für CSS; der Browser weiß dadurch,
daß die folgenden Style-Definitionen zur CSS-Sprache gehören.
Zwischen dem einleitenden Tag und dem abschließenden können Sie dann
die eigentlichen Style-Sheet-Angaben definieren. Es ist sinnvoll die Angaben in einen
mehrzeiligen HTML-Kommentar mit einzubinden.
Möglichkeit 2:
Style-Definitionen in einer separaten Datei:
In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts
haben wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei zu
wiederholen. Stattdessen können Sie die Style-Sheet-Angaben in einer separaten
Textdatei notieren und diese Datei einfach in jeder gewünschten HTML-Datei
9einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die
Änderungen einheitlich auf alle Dateien aus, in denen diese separate Datei
eingebunden ist.
Bsp.:
Titel der Datei
Mit dem HTML-Tag wird eine Datei referenziert, die Style-Sheet-Angaben
enthält. Innerhalb dieses Befehls sollten immer die Angaben rel=stylesheet
type="text/css" stehen (rel = relation= Bezug, type = Typ). Mit href= können Sie die
gewünschte Datei angeben.Wenn sich die CSS-Datei in einem anderen Verzeichnis
oder auf einem anderen Server befindet, müssen Sie mit relativen Pfadangaben oder
absoluten URL-Adressen arbeiten. Bei der referenzierten Datei muß es sich um eine
reine Textdatei handeln, die die Endung .css haben sollte. Die Datei sollte nichts
anderes als Formatdefinitionen enthalten, also auch keine HTML-Befehle.
Möglichkeit 3:
Style-Definitionen "on the fly" = Einzelne HTML-Tags formatieren
Bsp.:
Titel der Datei
Überschrift 1. Ordnung
Ein Textabsatz
10Formate für HTML-Tags definieren
Titel der Datei
Überschrift 1. Ordnung
ein normaler Textabsatz
Ein Listenpunkt
Ein anderer Listenpunkt
Im obigen Beispiel werden die HTML-Tags h1(Überschrift 1. Ordnung), p
(Textabsatz) und li (Listeneintrag) formatiert. Wenn Sie gleichartige Formate für
mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten Tags an und
trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.
Es bedeutet also das gleiche:
h1 { font-family:Helvetica }
h2 { font-family:Helvetica }
oder:
h1, h2 { font-family: Helvetica }
Dahinter folgen die dazugehörigen, gewünschten Formatdefinitionen, und zwar in
geschweiften Klammern. Innerhalb solcher geschweifter Klammern können Sie eine
oder mehrere Formateigenschaften definieren. Jede Eigenschaftszuweisung besteht
aus einem
Namen, z.B. color und einem Wert, z.B. #FF0000, getrennt durch einen Doppelpunkt.
Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der
letzten Formatdefinition vor der abschließenden geschweiften Klammer darf der
Strichpunkt entfallen.
Maßeinheiten, Farbangaben, feste Angaben für Style-Sheets
Numerische Angaben
Bei allen numerischen Angaben innerhalb von CSS-Style-Sheets, also etwa bei
Schriftgrößen, Absatzabständen oder Rändern, stehen alle weit verbreiteten
Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und
relative Angaben (z.B. Prozent gegenüber "normal") möglich.
11Absolute Angaben:
pt für Punkt (= 1/72 inches)
pc für Pica (= 12 Punkt)
in für Inch (= 2,54 cm)
mm für Millimeter
cm für Zentimeter
Relative Angaben:
em für "bezogen auf elementeigene Schrifthöhe"
ex für "bezogen auf elementeigene Höhe des Buchstabens x"
px für Pixel (relative Angabe im Hinblick auf die unterschiedlichen
Bildschirmauflösungen bei den Anwendern)
% für Prozent gegenüber Elementnorm
Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als
Dezimalzeichen!!!!!
Farbangaben
Sie können Farbwerte hexadezimal nach dem Schema #XXXXXX angeben, aber
auch die verbreiteten Farbnamen verwenden bzw. die Angaben nach dem rgb-
Schema machen. rgb(rrr,ggg,bbb).
Hintergrundfarbe: background-color:#XXXXXX
Hintergrundgrafik: background-image:url([Dateiname])
Mit background-position: können Sie festlegen, wo die linke obere Ecke der
Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, für das die
Hintergrundgrafik definiert wird.
Pseudo-Formate für Verweise (:link, :visited, :active)
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }
12Klassen
In obigem Bsp. ist p die Klasse, dann folgt ein Punkt und dahinter der Name für die
Unterklasse, der frei wählbar ist. Diese Klassen/Unterklassen werden dann im HTML-
Dokument wie folgt angesprochen:
Da kommt der Standardabsatz
Hier steht der Hilfetext
Hervorgehobener Textabsatz
Definition einer leeren Klasse:
Eine leere Klasse wird mit all. und dem frei wählbaren Klassennamen definiert. In der
geschweiften Klammer notieren Sie die Formatierung. Das Schlüsselwort "all" kann
man auch weglassen, also statt all.gruen reicht auch .gruen. Diese Formatierung,
die einer leeren Klasse übergeben wird, kann man dann auf jedes beliebige HTML-
Tag anwenden.
Gelbe Überschrift
Grüne Überschrift
13Abhängige Formate:
Man kann mit Style-Sheets bestimmen, daß ein HTML-Tag bestimmte Eigenschaften
nur dann annimmt, wenn es innerhalb eines anderen Tags vorkommt. Im folg. Bsp.
wird definiert, daß innerhalb von Überschriften nicht kursiv sondern blau
dargestellt wird, während der gleiche Befehl innerhalb anderer Tags weiterhin kursiv
dargestellt wird.
Rekurs: Das -Tag:
Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie
Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Diesen
Bereich können Sie dann gemeinsam ausrichten. Mit leiten Sie einen Bereich
ein, in den Sie mehrere Elemente einschließen können (div = division = Bereich).
Alles, was zwischen diesem Tag und dem abschließenden steht, wird als Teil
des Bereichs interpretiert.
Bereiche mit formatieren
Bsp.:
Titel der Datei
Überschrift 1. Ordnung mit blauem Text
Normaler Textabsatz mit
rotem kursiven Text
Mit ... können Sie Textabschnitte innerhalb anderer HTML-
Tags nach Belieben formatieren.
Positionieren von Elementen
Ab der CSS-Version 2.0 gibt es verschiedene Style-Sheet-Angaben, um Elemente
einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und
die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören
Angaben zum absoluten
14und relativen Positionieren von Elementen, Angaben zur Ausdehnung von
Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen
und Anzeigen von Elementen.
Absolutes und relatives Positionieren von Elementen bietet die Möglichkeit, das
Erscheinungsbild von WWW-Seiten stärker bildschirmorientiert zu gestalten. So
können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen
sollen. Bereiche können sich überlappen usw.
Bsp.:
Inhalt
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
absolute = absolute Positionierung, gemessen am Fensterrand, aber scrollbar.
relative = relative Positionierung, gemessen am Vorgänger-Element.
static = keine spezielle Positionierung, normaler Elementfluß (Normaleinstellung).
Schichtposition bei Überlappung (z-index)
Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zur Positionierung
(position). Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche
sich überlappen, werden die Elemente normalerweise in der Reihenfolge
übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge
ändern, indem Sie für die einzelnen Elemente Nummern vergeben. Elemente mit
höherer Nummer überdecken Elemente mit niedrigerer Nummer.
Bsp.:
Dieser Text kommt als dritter
Dieser Text kommt als erster
Dieser Text kommt als zweiter
Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen.
154. Javascript-Einführung
JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Sprache.
Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein
Werkzeug in die Hand zu geben, mit dessen Hilfe sich WWW-Seiten optimieren
lassen.
JavaScript-Programme werden wahlweise direkt in der HTML-Datei oder in
separaten Dateien notiert. Sie werden nicht - wie etwa Java-Programme - compiliert,
sondern als Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw.
Shellscripts. Dazu besitzen moderne WWW-Browser wie Netscape oder Microsoft
Internet Explorer entsprechende Interpreter-Software. Bevor Sie daran gehen,
neuen, eigenen JavaScript-Code zu programmieren, müssen Sie sich exakt darüber
im klaren sein, welches Problem Sie damit lösen wollen. Dazu müssen Sie erst
einmal wissen, was man mit HTML selbst alles machen kann, und wo die Grenzen
von HTML liegen. Von JavaScript müssen Sie dann so viel wissen, daß Sie
entscheiden können, ob das Problem mit JavaScript überhaupt lösbar ist. Mit
JavaScript können Sie z.B. nicht die typischen Aufgaben von CGI-Scripts lösen!
Ferner sollten Sie sich im WWW umsehen, ob es nicht schon frei verfügbare
JavaScript-Beispiele gibt, die genau Ihr Problem lösen. Denn es ist immer besser,
auf Code zurückzugreifen, der sich in der Praxis bereits bewährt hat, als neuen Code
zu erstellen, dessen "heimliche Tücken" einem noch nicht bekannt sind. In vielen
Fällen genügt es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen.
JavaScript-Bereiche in HTML definieren
Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren.
Bsp.:
Test
Mit leiten Sie einen Bereich für JavaScript innerhalb
einer HTML-Datei ein (script = Quelltext, language = Sprache). Dahinter - am besten
in der nächsten Zeile - sollten Sie mit den Kommentar und mit
den Bereich für den Programmcode.
Unser erstes Javascript:
Test
16Im obigen Beispiel wird mit Hilfe von JavaScript ein Meldungsfenster mit dem Text
"Hallo Welt!" am Bildschirm ausgegeben.
Anweisungen notieren:
Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem
Strichpunkt ; abgeschlossen wird.
Objekte, Eigenschaften und Methoden
Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit
objektgebundenen Funktionen (Methoden). Daß JavaScript eine Erweiterung von
HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in
JavaScript zur Verfügungstehen. Ein Objekt kann eine Teilmenge eines
übergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer
Hierarchie geordnet. Das hierarchiehöchste Objekt ist in JavaScript das Fenster-
Objekt (window). Fenster haben Eigenschaften wie einen Titel, eine Größe usw. Der
Inhalt eines Fensters ist das nächstniedrigere Objekt, nämlich das im Fenster
angezeigte Dokument (in JavaScript das Objekt document). In der Regel ist der
Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte, durch HTML-
Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise,
Grafikreferenzen usw. Für solche untergeordneten Elemente gibt es wieder eigene
JavaScript-Objekte, zum Beispiel das Objekt forms für Formulare. Ein Formular
besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern,
Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es
dafür ein Objekt elements, mit dem Sie einzelne Felder und andere Elemente
innerhalb eines Formulars ansprechen können.
Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts
notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind
keine Leerzeichen erlaubt!
Objekten können Methoden haben. Das sind Funktionen, die Aktionen ausführen,
aber im Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt
gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. In unserem
Beispiel ist alert die Methode zum window-Objekt.
Funktion definieren
Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-
Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen
können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn
der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode
ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim
Einlesen der Datei vom WWW-Browser sofort ausgeführt!
Eine Funktion ist ein Anweisungsblock. Ein Anweisungsblock wird durch eine
öffnende geschweifte Klammer { begonnen und durch eine schließende geschweifte
Klammer }
beendet. Jede Anweisung muß durch ; abgeschlossen werden.
17Bsp.: Unser erstes Script wird erweitert:
Test
Unser erstes Script wird erweitert
Event-Handler:
Event-Handler erkennen Sie daran, daß solche HTML-Attribute immer mit on
beginnen, zum Beispiel onClick=. Hinter dem Istgleichzeichen notieren Sie - in
Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen
ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-
Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also
z.B.onClick="Ergebnis()".
Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onClick= etwa für
das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-
Elements, in dem der Event-Handler notiert ist, ist das auslösende Element dabei.
Wenn der Event-Handler onClick= beispielsweise in einem Formularbutton notiert
wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der
Mausklick im Anzeigebereich dieses Elements erfolgt.
Die Formularüberprüfung:
Beispiel:
Test
Unser erstes Script wird erweitert
18Die if/else Bedingung:
Mit if leiten Sie eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in
Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu
formulieren, brauchen Sie Vergleichsoperatoren und in den meisten Fällen auch
Variablen. Für Fälle, in denen die
Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-Zweig definieren. Dies
geschieht durch else (else = sonst). Der Else-Zweig ist nicht zwingend erforderlich.
Wenn Sie mehr als eine Anweisung unterhalb und abhängig von if oder else notieren
wollen, müssen Sie die Anweisungen in geschweifte Klammern einschließen.
Variablen:
Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer
Programmprozeduren benötigen, speichern können. Der Inhalt, der in einer
Variablen gespeichert ist, wird als "Wert" bezeichnet. Sie können den Wert einer
Variablen jederzeit ändern. Um mit Variablen arbeiten zu können, müssen Sie die
benötigten Variablen zuerst definieren.
Bsp.:
Test
Unser erstes Script wird erweitert
19Sie können auch lesen
