SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
Aufgaben von JavaScript Style-Sheets (JSSS)Wundern Sie sich nicht, wenn in den Anzeigebeispielen zu dieser Seite noch nichts "dynamisch" ist. Hier wird lediglich eine Variante zum Definieren von Style-Sheets vorgestellt, die Netscape-spezifisch ist. Es handelt sich um Style-Sheet-Definitionen mit Hilfe von JavaScript.
JSSS bedeutet "JavaScript Style Sheets". Die Idee dahinter klingt logisch. Wenn man mit JavaScript dynamisch auf Formatierungen zugreifen können soll, ist es sinnvoll, die Formatierungen gleich so zu definieren, daß sie Eigenschaften eines JavaScript-Objekts sind. Deshalb werden die JavaScript-basierten Style-Sheets gerne im Zusammenhang mit Dynamischem HTML bei Netscape behandelt. Auch in dieser Dokumentation ist das so. Erwarten Sie aber keine weiterführenden Zusammenhänge. Der JSSS-Ansatz von Netscape steht etwas im luftleeren Raum. Für 
Dynamisches Positionieren mit Netscape, wie es mit dem Netscape-Browser in der Version 4.x machbar ist, spielt JSSS keine besondere Rolle.
In der JSSS-Syntax gibt es beispielsweise Anweisungen wie tags.H1.color = "blue". Eine solche Notationsweise müssen Sie so lesen: es gibt ein JavaScript-Objekt tags. Unterhalb dieses Objekts liegen alle verfügbaren HTML-Tags. H1 ist beispielsweise so ein HTML-Tag. Deshalb darf es, durch einen Punkt getrennt, hinter tags notiert werden. Eine Angabe wie tags.H1.color ist also genau so zu lesen wie beispielsweise window.document.images.src. Beides ist JavaScript-Syntax zum Ansprechen von Objekteigenschaften. Näheres zu diesem Thema finden Sie im Abschnitt über Objekte, Eigenschaften und Methoden im JavaScript-Teil.
 
|
Sie können JSSS Style-Sheets auf zwei Arten in HTML einbinden: entweder in der HTML-Datei selbst im Dateikopf, oder als externe Datei, in der die Style-Sheet-Definitionen stehen.
<head> <style type="text/javascript"> ... Hier folgen die JSSS Style-Sheet-Definitionen ... </style> </head> |
Mit <style type="text/javascript"> definieren Sie innerhalb einer HTML-Datei einen Bereich, in dem Sie JSSS Style-Sheet-Angaben machen können (style = Stil, Format). Es handelt sich um den gleichen Befehl wie beim Einbinden von CSS Style-Sheets. Der einzige Unterschied ist, daß als Typ "text/javascript" angegeben wird. Dadurch wird dieser Bereich nur von Netscape ab 4.x ausgelesen, nicht vom MS Internet Explorer.
<head> <link rel=stylesheet type="text/javascript" href="formate.htm"> </head> |
Im Dateikopf einer HTML-Datei können Sie mit einem HTML-Befehl des Typs <link...> eine Datei referenzieren, die Style-Sheet-Angaben enthält (link = Verweis). Es handelt sich um den gleichen Befehl wie für CSS Style-Sheets in separater Datei. Der einzige Unterschied ist, daß als Typ "text/javascript" angegeben wird. Die Datei, in der die Formate definiert werden, wird im Beispiel als HTML-Datei eingebunden. Notieren Sie dazu die Angabe href= und dahinter, in Anführungszeichen, den Dateinamen. Dabei sind auch relative Pfadnamen oder absolute URL-Adressen erlaubt. Die Datei sollte nichts anderes enthalten als gültige Style-Sheet-Definitionen nach JSSS-Syntax.
|
|
HTML-Tags mit JSSS Style-Sheets formatieren
Anzeigebeispiel: So sieht's aus
Sie können mit Hilfe von JSSS Style-Sheet-Angaben HTML-Tags formatieren. Die Wirkungsweise ist die gleiche wie Definieren von Formaten für HTML-Tags nach CSS-Syntax.
<style type="text/javascript">
tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with(tags.H3)
color = "green";
with(tags.H2)
{
color = "red";
fontSize = "16pt";
marginTop = "2cm";
}
</style>
|
Um HTML-Tags mit Hilfe von JSSS-Syntax zu formatieren, stehen Ihnen zwei Möglichkeiten der Notation zur Verfügung:
Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort tags (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, das HTML-Tag, jedoch ohne die sonst üblichen spitzen Klammern. Bei dem Namen des HTML-Tags ist Groß-/Kleinschreibung egal, Sie können also beispielsweise h1 oder auch H1 notieren. Im obigen Beispiel bekommen die Tags <h1> und <p> auf diese Weise je eine Style-Sheet-Angabe zugewiesen.
Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort with (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort tags und dahinter, durch einen Punkt getrennt, wieder das HTML-Tag. Wenn Sie dem HTML-Tag nur eine Style-Sheet-Angabe zuweisen wollen, können Sie das einfach hinter oder unterhalb der Klammer tun, so wie im obigen Beispiel bei with(tags.H3). Gedacht ist diese Form der Notation jedoch für den Fall, daß Sie für ein HTML-Tag mehrere Style-Sheet-Angaben notieren wollen. In diesem Fall notieren Sie die Angaben in geschweiften Klammern, so wie im Beispiel bei with(tags.H2). Innerhalb der geschweiften Klammern brauchen Sie dann nur noch die reinen Style-Sheet-Angaben notieren (also ohne tags.H2. davor).
Um einer Style-Sheet-Angabe einen Wert zuzuordnen, notieren Sie hinter dem Bezeichner für die Style-Sheet-Angabe ein Istgleichzeichen und dahinter die Wertzuweisung. Die Wertzuweisung muß in Anführungszeichen stehen. Die Syntax bei der Wertzuweisung ist also eine andere als bei den CSS Style-Sheets.
Zur Formatierung stehen alle Style-Sheet-Angaben zur Verfügung, die Netscape auch bei CSS Style-Sheets interpretiert. Im Kapitel 
Style-Sheet-Angaben werden die einzelnen Style-Sheet-Angaben beschrieben.
Eine wichtige Konvention müssen Sie beachten: Viele Style-Sheet-Angaben enthalten normalerweise Bindestriche, wie etwa font-size (Schriftgröße) oder background-color (Hintergrundfarbe). Wenn Sie so eine Style-Sheet-Angabe in JSSS-Syntax notieren, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben. Statt font-size müssen Sie also fontSize notieren, und statt background-color müssen Sie backgroundColor notieren.
Alle Werte, die Sie JSSS Style-Sheet-Angaben zuordnen, müssen in Anführungszeichen stehen, da diese aus Sicht von JavaScript Zeichenketten darstellen.
|
|
Klassen mit JSSS Style-Sheets definieren Anzeigebeispiel: So sieht's aus
Sie können Unterklassen mit Formaten anlegen. So ist es möglich, einem HTML-Element, etwa einer Überschrift 2. Ordnung, verschiedene Formate zuzuordnen. Dazu vergeben Sie Namen für die entsprechenden Unterklassen. Die Wirkungsweise ist die gleiche wie Definieren von Format-Unterklassen nach CSS-Syntax.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/javascript">
classes.Wichtig.H1.color = "blue";
classes.Teletyper.all.fontFamily = "Courier";
with(classes.Zusatzinfo.H2)
marginLeft = "1cm";
with(classes.Thema.H2)
{
color = "red";
fontSize = "16pt";
marginTop = "2cm";
}
</style>
</head>
<body>
<h1 class="Wichtig">Überschrift 1. Ordnung in Blau</h1>
<p class="Teletyper">Textabsatz mit Courier-Schrift</p>
<div class="Teletyper">Bereich mit Courier-Schrift</div>
<h2 class="Thema">Rot, 16 Punkt und 2cm Abstand oben</h2>
<h2 class="Zusatzinfo">Normal, aber mit 1cm Abstand links</h2>
</body>
</html>
|
Um Formatklassen für HTML-Tags mit Hilfe von JSSS-Syntax zu definieren, stehen Ihnen wieder beide Möglichkeiten der Notation zur Verfügung:
Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort classes (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, ein Name für die Klasse, den Sie selbst vergeben dürfen. Der Name darf nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Groß-/Kleinschreibung wird unterschieden. Im obigen Beispiel wird auf diese Weise eine Klasse namens Wichtig definiert.
Hinter dem Klassennamen folgt der Name des HTML-Tags, von dem diese Unterklasse abgeleitet werden soll. Im Beispiel wird also eine Unterklasse für H1 definiert.
Hinter dem Namen des HTML-Tags notieren Sie die gewünschte Style-Sheet-Angabe zur Formatierung. Dabei gelten die speziellen Konventionen.
Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort with (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort classes, dahinter, durch einen Punkt getrennt, der selbst vergebene Klassenname, und schließlich das HTML-Tag, für das die Unterklasse definiert werden soll. Im obigen Beispiel wird so mit with(classes.Thema.H2) eine Reihe von Formatierungen für die Klasse Thema eingeleitet, wobei diese Klasse eine Unterklasse des HTML-Tags <H2> ist. Innerhalb der geschweiften Klammern stehen dann die reinen Style-Sheet-Angaben.
Genau wie bei CSS Style-Sheets können Sie auch bei JSSS Style-Sheets "abstrakte" Formatklassen definieren, die keinem bestimmten HTML-Tag zugeordnet sind. Dazu notieren Sie bei der Definition anstelle eines HTML-Tags einfach das Schlüsselwort all. Im obigen Beispiel wird auf diese Weise eine Klasse mit dem Namen Teletyper definiert.
Innerhalb von HTML-Tags wenden Sie solche Formatklassen an, indem Sie im einleitenden HTML-Tag das Attribut class= notieren und dahinter den Klassennamen. Klassen, die Sie nur für bestimmte HTML-Tags definiert haben, dürfen Sie nur innerhalb solcher Tags anwenden (im Beispiel etwa die Klasse Thema nur für <h2>-Überschriften). Klassen, die mit all definiert worden sind, dürfen Sie dagegen auf alle HTML-Tags anwenden.
|
|
Unabhängige Formate mit JSSS Style-Sheets definieren Anzeigebeispiel: So sieht's aus
Sie können mit JSSS Style-Sheets individuelle, unabhängige Formate definieren, die Sie dann innerhalb von HTML bei Bedarf anwenden können. Die Wirkungsweise ist die gleiche wie beim Definieren unabhängiger Formate nach CSS-Syntax.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/javascript">
ids.rot.color = "red";
with(ids.rotfett)
{
color = "red";
fontWeight = "bold";
}
</style>
</head>
<body>
<p id="rot">roter Textabsatz</p>
<p>Textabsatz mit <b id="rotfett">fettem roten Text</b>.</p>
</body>
</html>
|
Um unabhängige Formate mit Hilfe von JSSS-Syntax zu definieren, stehen Ihnen wieder beide Möglichkeiten der Notation zur Verfügung:
Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort ids (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, ein Name, den Sie selbst vergeben dürfen. Der Name darf nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Groß-/Kleinschreibung wird unterschieden. Im obigen Beispiel wird auf diese Weise eine Klasse namens rot definiert.
Hinter dem Namen notieren Sie die gewünschte Style-Sheet-Angabe zur Formatierung. Dabei gelten die speziellen Konventionen.
Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort with (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort ids, und dahinter der selbst vergebene Formatname. Im obigen Beispiel wird mit with(ids.rotfett) ein unabhängiges Format definiert. Innerhalb der geschweiften Klammern stehen dann die reinen Style-Sheet-Angaben.
Innerhalb von HTML-Tags wenden Sie unabhängige Formate an, indem Sie im einleitenden HTML-Tag das Attribut id= notieren und dahinter den Namen des Formats.
|
|
Formate für verschachtelte HTML-Tags mit JSSS Style-Sheets definieren Anzeigebeispiel: So sieht's aus
Sie können mit JSSS Style-Sheets Formate für HTML-Tags definieren, die nur dann gültig sind, wenn das HTML-Tag innerhalb eines bestimmten anderen HTML-Tags vorkommt. Die Wirkungsweise ist die gleiche wie beim Definieren von Formaten für verschachtelte HTML-Tags nach CSS-Syntax.
<html> <head> <title>Titel der Datei</title> <style type="text/javascript"> contextual(tag.P, tags.I).color = "red"; </style> </head> <body> <div>Normaler Textbereich mit <i>normalem kursivem Text</i>.</div> <p>Normaler Textabsatz mit <i>kursivem Text in rot</i>.</p> </body> </html> |
Um mit Hilfe von JSSS-Syntax ein Format für ein HTML-Tag zu definieren, das nur innerhalb eines bestimmten anderen HTML-Tags eine bestimmte Formatierung erhalten soll, müssen Sie zuerst das Schlüsselwort contextual notieren. Dahinter folgt ein Ausdruck, der in Klammern steht. Zuerst notieren Sie nach JSSS-Syntax das "übergeordnete, äußere" HTML-Tag, im obigen Beispiel tags.P. Dahinter folgt, durch ein Komma getrennt, das "untergeordnete, innere" HTML-Tag, im Beispiel tags.I. Hinter der abschließenden Klammer folgt noch mal ein Punkt, gefolgt von der gewünschten Style-Sheet-Angabe. Dabei gelten die speziellen Konventionen.
Innerhalb von HTML werden die definierten Formate angewendet. Im obigen Beispiel wird Text, der mit <i>...</i> als kursiv definiert wird, zusätzlich rot, wenn er innerhalb eines Textabsatzes (<p>...</p>) steht. In allen anderen Fällen erhält <i>...</i> die übliche Formatierung.
|
|
JSSS-Formate innerhalb von HTML-Tags definieren Anzeigebeispiel: So sieht's aus
Sie können JSSS-Definitionen auch innerhalb einzelner HTML-Tags zur Schnellformatierung benutzen. Das funktioniert genau so wie beim Formatieren einzelner HTML-Tags nach CSS-Syntax. Der einzige Unterschied ist die Notation der Style-Sheet-Angaben.
<p style="fontSize='14pt'; marginLeft='1cm'">Textabsatz</p> |
Sie können Formatangaben für ein HTML-Tag bestimmen, indem Sie innerhalb des einleitenden HTML-Tags die Angabe style= und dahinter, in Anführungszeichen, die gewünschte Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind Style-Sheet-Angaben erlaubt. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. color und einem Wert, z.B. red, getrennt durch ein Istgleichzeichen (anders als bei CSS!). Style-Sheet-Angaben, die normalerweise mit Bindestrich geschrieben werden, werden bei JSSS-Syntax zusammengeschrieben. Ab dem zweiten Angabenteil beginnt jeder Teil mit einem Großbuchstaben. Aus margin-left wird so beispielsweise marginLeft, aus background-color wird backgroundColor, und aus border-bottom-width wird borderBottomWidth. Notieren Sie die Wertzuweisungen in einfachen Anführungszeichen, so wie im Beispiel etwa '14pt'. Doppelte Anführungszeichen dürfen Sie deshalb nicht verwenden, weil ja der gesamte Ausdruck style= bereits in solchen Anführungszeichen steht.
Diese Art, JSSS-Style-Sheet-Angaben zu definieren, funktioniert noch nicht mit Netscape 4.0x.
Angaben, die Sie innerhalb eines HTML-Tags auf diese Weise definieren, werden vom MS Internet Explorer ignoriert.
|
|
JSSS Style-Sheets und CSS Style-Sheets kombinierenEs spricht nichts dagegen, CSS Style-Sheets und JSSS Style-Sheets innerhalb der gleichen HTML-Datei zu verwenden. Dabei gelten zwei einfache Prinzipien:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
p { fontSize:10pt; color:red; }
</style>
<style type="text/javascript">
with(tags.P)
{
fontSize = "12pt";
color = "blue";
}
</style>
</head>
<body>
<p>Text, der in Netscape und MS IE unterschiedlich aussieht</p>
</body>
</html>
|
Im obigen Beispiel wird das HTML-Tag <p>...</p> zuerst mit CSS-Syntax formatiert, anschließend mit JSSS-Syntax. Nach CSS-Syntax wird der Text 10 Punkt groß und rot, nach JSSS-Syntax 12 Punkt groß und blau.
Beim MS Internet Explorer greift nur die CSS-Definition, da dieser Browser den Bereich, der mit <style type="text/javascript"> definiert ist, erst gar nicht ausliest. Bei Netscape greift dagegen die JSSS-Definition. Aber nicht deshalb, weil sie von vorneherein Vorrang vor der CSS-Definition hat, sondern deshalb, weil sie "hinter" der CSS-Definition notiert ist. Würde zuerst der JSSS-Bereich notiert und dahinter der CSS-Bereich, würde auch Netscape die CSS-Angaben zur Formatierung verwenden.
|
| |
weiter: |
Dynamisches Positionieren (Netscape)
|
zurück: |
Dynamische Filter (Microsoft)
|
SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
