archive-de.com » DE » E » EKIWI.DE

Total: 422

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • SELFHTML: JavaScript / Sprachelemente / Bedingte Anweisungen (if-else/switch)
    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 siehe auch den Abschnitt über Anweisungsblöcke Beachten Sie Eine Passwortabfrage wie im Beispiel stellt keine zuverlässige Möglichkeit dar um Zugriffe auf eine Webseite zu kontrollieren Denn das Passwort steht für jeden lesbar im Quelltext und die geschützte Seite kann unter Umgehung der Passwortabfrage aufgerufen werden Verwenden Sie deshalb in der Praxis richtige Schutzmechanismen wie beispielsweise eine Zugriffskontrolle mit htaccess Einfache Entweder Oder Abfrage Für einfache Entweder Oder Bedingungen gibt es eine spezielle Syntax die Sie alternativ zur if else Anweisung verwenden können Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Antwort var Ergebnis document Formular Eingabe value 42 RICHTIG FALSCH document Formular Eingabe value Die Antwort ist Ergebnis script head body h1 Der Sinn des Lebens h1 form name Formular p Was ist der Sinn des Lebens p input type text name Eingabe size 40 input type button value OK onclick Antwort form body html Erläuterung Das Beispiel enthält eine JavaScript Funktion namens Antwort Aufgerufen wird diese Funktion wenn der Anwender in dem weiter unten notierten HTML Formular auf den Klick Button mit der Aufschrift OK klickt und zwar mit dem Event Handler onclick Die Funktion prüft ob der Wert des Eingabefeldes im Formular document Formular Eingabe value den Wert 42 hat Abhängig davon wird der Variablen Ergebnis entweder der Wert RICHTIG oder FALSCH zugewiesen Anschließend wird in dem Textfeld des Formulars das zur Eingabe diente ein entsprechender Satz zusammengesetzt siehe dazu auch Operator für Zeichenkettenverknüpfung Eine einfache Entweder Oder Abfrage wird mit einer Bedingung eingeleitet Die Bedingung muss in Klammern stehen im Beispiel document Formular Eingabe value 42 Dahinter wird ein Fragezeichen notiert Hinter dem Fragezeichen wird ein Wert angegeben der aktuell ist wenn die Bedingung erfüllt ist Dahinter folgt ein Doppelpunkt und dahinter ein Wert für den Fall dass die Bedingung nicht erfüllt ist Da es sich um Werte handelt die für die Weiterverarbeitung nur sinnvoll sind wenn sie in einer Variablen gespeichert werden wird einer solchen Entweder Oder Abfrage in der Regel eine Variable vorangestellt im Beispiel die Variable Ergebnis Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder Oder Abfrage zugewiesen Um Bedingungen zu formulieren brauchen Sie Vergleichsoperatoren Fallunterscheidung mit switch Mit if und else können Sie genau zwei Fälle unterscheiden Wenn Sie feiner differenzieren also zwischen mehreren Fällen unterscheiden wollen können Sie zwar mehrere if Abfragen hintereinander notieren aber es gibt noch eine elegantere Möglichkeit die Fallunterscheidung mit switch Diese Syntax die der Programmiersprache C entlehnt ist gibt es in JavaScript aber erst seit der Sprachversion 1 2 ältere Browser quittieren solche Anweisungen mit einer Fehlermeldung Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Eingabe window prompt Geben Sie

    Original URL path: http://html.ekiwi.de/javascript/sprache/bedingt.htm (2016-04-25)
    Open archived version from archive


  • SELFHTML: JavaScript / Sprachelemente / Steuerzeichen und besondere Notationen
    Anführungszeichen verwenden möchten Die Zeichenfolge müssen Sie notieren um einen einzelnen Backslash zu erhalten Die Zeichenfolge n ist z B in alert Meldungen sinnvoll um innerhalb des auszugebenden Textes einen Zeilenumbruch einzufügen Die Zeichenfolge r ist in Kombination mit n als Zeilenvorschub in DOS Systemen vorgesehen Ihre Verwendung in JavaScript ist auch unter Windows im Allgemeinen nicht notwendig Die Zeichenfolge t ist als Tabulatorzeichen z B sinnvoll um etwa innerhalb einer alert Meldung tabellarische Information auszugeben Die Zeichenfolge b entspricht der Backspace Taste der Tastatur und löscht das vorhergehende Zeichen in der Ausgabe Die Zeichenfolge f dient bei Druckern dazu die aktuell bedruckte Seite auszuwerfen und auf einer frischen Seite weiterzudrucken Sie dürfte in der Praxis keinerlei Relevanz für JavaScriptanwendungen haben Notation numerischer Werte Sie können Zahlen ganz normal notieren Beachten Sie dabei nur dass bei Kommazahlen anstelle eines Kommas ein Punkt verwendet werden muss So wird die Zahl Pi beispielsweise als 3 1415 notiert Für sehr hohe und sehr niedrige Zahlen und für komplexe Kommazahlen gibt es daneben aber noch andere Notationsmöglichkeiten Beispiel script type text javascript var a 1E1 var b 1 2345E4 var c 2e 3 script Erläuterung Mit e oder E bestimmen Sie die Zehnerpotenz bzw

    Original URL path: http://html.ekiwi.de/javascript/sprache/notationen.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Objektreferenz / HTML-Elementobjekte
    der Maus wird der Text im Element dynamisch stark hervorgehoben fieldset HTML Elementobjekt HTML Referenz siehe Element fieldset Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente fieldset haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft Eigenschaft Status Bedeutung form zugehöriges Formularelement Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Hinweis if document getElementById Absender form null alert Geben Sie Vornamen und Zunamen in jedem Fall an script head body bgcolor EEEEEE form name Formular action fieldset id Absender onmouseover Hinweis legend Absender legend table tr td align right Vorname td td input type text size 40 maxlength 40 td tr tr td align right Zuname td td input type text size 40 maxlength 40 td tr table fieldset form body html Erläuterung Das Beispiel enthält ein Formular mit einem fieldset Bereich Im einleitenden fieldset Tag ist der Event Handler onmouseover notiert der die JavaScript Funktion Hinweis aufruft die im Dateikopf definiert ist Mit if document getElementById Absender form null fragt die Funktion ab ob die Eigenschaft form einen Wert hat Wenn der Wert ungleich null ist bedeutet dies dass das fieldset Element wie vorgeschrieben innerhalb eines Formulars vorkommt In diesem Fall wird eine Meldung ausgegeben font HTML Elementobjekt HTML Referenz siehe Element font Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente font haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung color Schriftfarbe face Schriftart size Schriftgröße Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var sizes new Array 1 2 3 4 5 6 7 var colors new Array FF0000 0000FF 009900 CC00CC var faces new Array Arial Tahoma Wide Latin function Spielen var s parseInt Math random 100 7 var c parseInt Math random 100 4 var f parseInt Math random 100 3 var i parseInt Math random 100 7 document getElementsByTagName font i size sizes s document getElementsByTagName font i color colors c document getElementsByTagName font i face faces f window setTimeout Spielen 1000 script head body onload Spielen p font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br font So viel verspielter Text o Sophie font br p body html Erläuterung Das Beispiel enthält insgesamt sieben Texte die mit font Elementen ausgezeichnet sind Keines der font Elemente enthält allerdings in HTML irgendwelche Attribute Nachdem das Dokument geladen ist Event Handler onload im einleitenden body Tag wird die JavaScript Funktion Spielen aufgerufen Zuvor wurden bereits diverse Arrays angelegt Die Funktion Spielen ermittelt mittels Math random Zufallszahlen und trimmt diese mit Hilfe von Multiplikation mit 100 Modulo Division und Anwendung der Funktion parseInt so dass ganzzahlige Zufallszahlen erzeugt werden Diese werden als Index für die zuvor definierten Arrays verwendet Solchermaßen ausgerüstet greift die Funktion mit document getElementsByTagName font i zufällig auf eines der font Elemente zu und weist ihm die ebenfalls zufällig ermittelten Werte aus den Arrays für die Eigenschaften size color und face zu Am Ende wartet die Funktion eine Sekunde window setTimeout und ruft sich dann selber wieder auf Dadurch ergibt sich ein endloses Spiel an zufälligen Textänderungen form HTML Elementobjekt HTML Referenz siehe Element form Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente form haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden Eigenschaft Status Bedeutung acceptCharset unterstützte Zeichensätze action URI für die Verarbeitung der Formulardaten elements Array für die zugehörigen Formularelemente enctype MIME Typ für Formulardatenübertragung length Anzahl Formularelemente name Name des Formulars method Übertragungsmethode für Formulardaten target Fensternamen für Antwortausgaben Methode Bedeutung reset Formular zurücksetzen submit Formular absenden Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Formular action datei htm method get p input name Text type text br a href javascript document getElementsByName Formular 0 submit b Absenden b a a href javascript document getElementsByName Formular 0 reset b Abbrechen b a p form body html Erläuterung Das Beispiel enthält ein Formular mit zwei Verweisen anstelle der sonst üblichen Submit und Reset Buttons Der eine Verweis führt die submit Methode aus der andere die reset Methode Beide Verweise greifen dazu mit document getElementsByName Formular 0 auf das erste Element mit dem Namen Formular zu Beachten Sie Dieses Beispiel funktioniert auch in Opera 5 12 In lokaler Umgebung außerhalb des HTTP Protokolls file wird jedoch nach dem Absenden der Quellcode der Zieldatei angezeigt frame HTML Elementobjekt HTML Referenz siehe Element frame Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente frame haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung frameBorder Rahmen sichtbar oder nicht sichtbar longDesc URI für längere Beschreibung zum Inhalt des Frame Fensters marginHeight Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand marginWidth Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand name Name für das Frame Fenster noResize Größe veränderbar oder nicht veränderbar scrolling Scroll Leisten oder keine Scroll Leisten src URI für den Inhalt des Frame Fensters Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function nullRand document getElementById F1 marginHeight 0 document getElementById F1 marginWidth 0 script head frameset cols 50 50 onload nullRand frame id F1 src frame1 htm marginheight 20 marginwidth 20 frame id F2 src frame2 htm marginheight 20 marginwidth 20 frameset html Erläuterung Das Beispiel definiert ein Frameset mit zwei Frames Das frameset Element besitzt den Event Handler onload Nach dem Laden des Framesets wird die JavaScript Funktion nullRand aufgerufen die im Dateikopf notiert ist Die Funktion greift mit document getElementById F1 auf das erste frame Element zu und setzt dessen Eigenschaften für marginHeight und marginWidth auf 0 Beachten Sie Internet Explorer Mozilla Firefox und Opera bis Version 7 2 ermöglichen nur den Lesezugriff auf diese Eigenschaften Das Ändern der Eigenschaft ist zwar möglich die Abstände ändern sich jedoch nicht frameset HTML Elementobjekt HTML Referenz siehe Element frameset Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente frameset haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung cols Breitenverhältnisse für spaltenartig angeordnete Frame Fenster rows Höhenverhältnisse für reihenartig angeordnete Frame Fenster Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function dreiFenster document getElementById Fenster cols 33 34 33 var F3 document createElement frame F3 setAttribute src frame3 htm document getElementById Fenster appendChild F3 script head frameset id Fenster cols 50 50 onload dreiFenster frame src frame1 htm frame src frame2 htm frameset head html Erläuterung Das Beispiel definiert ein Frameset mit zwei Frames Nachdem das Frameset geladen ist Event Handler onload im einleitenden frameset Tag wird die Funktion dreiFenster aufgerufen Diese Funktion greift mit document getElementById Fenster auf das frameset Element zu und setzt dessen Eigenschaft cols neu und zwar so dass nun drei Spalten definiert werden Dann wird mit document createElement ein neues Element erzeugt dem mit setAttribute eine anzuzeigende Datei zugewiesen wird Anschließend wird der neue Elementknoten mit appendChild als letztes neues Kindelement in das frameset Element eingefügt Beachten Sie Opera und Firefox akzeptieren die Änderung der Breitenverhältnisse zeigen aber den dritten eingefügten Frame nicht an Lediglich der Internet Explorer Konqueror und Safari zeigen den dritten Frame h1 h6 HTML Elementobjekt HTML Referenz siehe Element h1 h6 Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente h1 usw haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft Eigenschaft Status Bedeutung align Ausrichtung Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function rechtslinks for var i 0 i document getElementsByTagName h1 length i if document getElementsByTagName h1 i align left document getElementsByTagName h1 i align right else document getElementsByTagName h1 i align left script head body h1 align left Kapitel 1 h1 p viel Text p h1 align left Kapitel 2 h1 p viel Text p h1 align left Kapitel 3 h1 p und ein a href javascript rechtslinks Ausrichtungsverweis a p body html Erläuterung Das Beispiel enthält insgesamt drei Überschriften erster Ordnung Ganz unten ist ein Verweis notiert bei dessen Anklicken die JavaScript Funktion rechtslinks aufgerufen wird die im Dateikopf steht Diese greift in einer for Schleife der Reihe nach mit document getElementsByTagName h1 i auf alle h1 Elemente des Dokuments zu Für jedes dieser Elemente wird abgefragt ob seine Eigenschaft align den Wert left hat Wenn ja wird er auf right gesetzt wenn nein wird er wieder auf left gesetzt Bei jedem Anklicken des Verweises ändern also alle drei Überschriften ihre Ausrichtung Beachten Sie Das Beispiel ist mit Netscape 6 nicht nachvollziehbar head HTML Elementobjekt HTML Referenz siehe Element head Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung Das HTML Element head head hat als DOM Objekt für den Script Sprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft Eigenschaft Status Bedeutung profile URI für Metadaten Profil Beispiel Anzeigebeispiel So sieht s aus html head profile http dublincore org documents dcq html link rel schema DC href http purl org dc elements 1 1 link rel schema DCTERMS href http purl org dc terms meta name DC language scheme DCTERMS RFC3066 content de head body script type text javascript document write Verwendetes Profil document getElementsByTagName head 0 profile script body html Erläuterung Das Beispiel enthält im einleitenden head Tag eine profile Angabe Innerhalb des Dokuments wird diese Angabe mit document write ins Dokument geschrieben Dabei wird mit document getElementsByTagName head 0 auf das head Element zugegriffen Beachten Sie Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML 4 0 Standard für das head Element nicht vorgesehen Deshalb sollten Sie bei diesem Element die Methode document getElementById vermeiden hr HTML Elementobjekt HTML Referenz siehe Element hr Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente hr haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung align Ausrichtung der Trennlinie noShade Trennlinie wird flach und ohne 3D Effekt dargestellt size Dicke der Trennlinie width Länge der Trennlinie Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Dicke 3 function dicker Dicke Dicke document getElementById Linie size Dicke script head body hr id Linie noshade noshade size 3 onclick dicker body html Erläuterung Das Beispiel enthält eine Trennlinie der Dicke 3 size 3 Das hr Element enthält einen Event Handler onclick Beim Anklicken der Trennlinie wird die JavaScript Funktion dicker aufgerufen die im Dateikopf notiert ist Diese Funktion erhöht den Wert der Variablen Dicke um sich selbst und greift dann mit document getElementById Linie auf das hr Element zu um dessen Eigenschaft size mit dem neuen Wert von Dicke zu belegen Die Linie wird also bei jedem Anklicken deutlich dicker Beachten Sie Safari 1 2 interpretiert nur die Eigenschaften align und size ab Version 2 0 auch width Konqueror interpretiert die Eigenschaft size nicht aber beispielsweise width und zeigt daher das Beispiel nicht an html HTML Elementobjekt HTML Referenz siehe Element html Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung Das HTML Element html html hat als DOM Objekt für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden Eigenschaft Status Bedeutung version HTML Sprachversion Beispiel Anzeigebeispiel So sieht s aus html version W3C DTD HTML 4 01 Transitional EN head title Test title head body script type text javascript document write Dies ist in HTML document getElementsByTagName html 0 version geschrieben script body html Erläuterung Das Beispiel enthält im einleitenden html Tag eine version Angabe Innerhalb des Dokuments wird diese Angabe mit document write ins Dokument geschrieben Dabei wird mit document getElementsByTagName html 0 auf das html Element zugegriffen Beachten Sie Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML 4 0 Standard für das html Element nicht vorgesehen Deshalb sollten Sie bei diesem Element die Methode document getElementById vermeiden i HTML Elementobjekt HTML Referenz siehe Element i Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente i haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css normal font style normal style script type text javascript function set normal document getElementById schief className normal script head body i id schief schiefe Aussage i br a href javascript set normal gerade machen a body html Erläuterung Das Beispiel enthält einen mit i i formatierten Text und darunter einen Verweis Beim Anklicken des Verweises wird die JavaScript Funktion set normal aufgerufen die im Dateikopf notiert ist Diese Funktion greift mit document getElementById schief auf das i Element zu und setzt dessen Universaleigenschaft className neu Die entsprechende Klasse normal ist im Dateikopf in einem Style Bereich definiert iframe HTML Elementobjekt HTML Referenz siehe Element iframe Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente iframe haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung align Ausrichtung frameBorder Rahmen sichtbar oder nicht sichtbar height Anzeigehöhe longDesc URI für längere Beschreibung zum Inhalt des Frame Fensters marginHeight Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand marginWidth Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand name Name für das Frame Fenster scrolling Scroll Leisten oder keine Scroll Leisten src URI für den Inhalt des Frame Fensters width Anzeigebreite Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function groesser document getElementById Frame width 600 document getElementById Frame height 400 script head body iframe id Frame src frame1 htm width 400 height 300 iframe p a href javascript groesser Anzeigefenster erweitern a p body html Erläuterung Das Beispiel definiert einen eingebetteten Frame Unterhalb davon ist ein Verweis notiert Beim Anklicken des Verweises wird die JavaScript Funktion groesser aufgerufen die im Dateikopf notiert ist Diese greift mit document getElementById Frame auf das iframe Element zu und ändert dessen Eigenschaften width und height Das eingebettete Frame Fenster wird dadurch dynamisch vergrößert img HTML Elementobjekt HTML Referenz siehe Element img Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente img haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung align Ausrichtung der Grafik alt Alternativtext border Rahmendicke um Grafik height Anzeigehöhe hspace horizontaler Abstand zwischen Grafik und umfließendem Text isMap Grafik benutzt ein serverseitiges Handling für verweis sensitive Flächen longDesc URI für Langbeschreibung zur Grafik lowSrc URI einer Vorabgrafik name Name der Grafik src URI der Grafik useMap Verweis zu einem map Bereich vspace vertikaler Abstand zwischen Grafik und umfließendem Text width Anzeigebreite Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function neuesBild if document getElementById Bild src indexOf iso8859 1 gif 1 document getElementById Bild src inter iso8859 2 gif document getElementById Bild title Bild 2 return if document getElementById Bild src indexOf iso8859 2 gif 1 document getElementById Bild src inter iso8859 3 gif document getElementById Bild title Bild 3 return if document getElementById Bild src indexOf iso8859 3 gif 1 document getElementById Bild src inter iso8859 1 gif document getElementById Bild title Bild 1 return script head body img id Bild src inter iso8859 1 gif width 289 height 302 alt Bild 1 title Bild 1 br a href javascript neuesBild neues Bild a body html Erläuterung Das Beispiel enthält eine Grafikreferenz für eine Ressource namens 8859 1 gif Unterhalb davon ist ein Verweis notiert Bei Anklicken des Verweises wird die JavaScript Funktion neuesBild aufgerufen die im Dateikopf notiert ist Diese Funktion fragt mit document getElementById Bild src indexOf ab welches Bild gerade angezeigt wird siehe auch indexOf Abhängig davon werden die beiden Eigenschaften src und title mit neuen Werten belegt Das Beispiel bewirkt dass bei jedem Anklicken des Verweises ein neues Bild angezeigt wird Beachten Sie In der Eigenschaft src ist der vollständige URI des Bildes gespeichert und nicht die eventuell relative Angabe der bei img src zugewiesen wurde Deshalb muss der Inhalt von src auch mit einer Zeichenkettenmethode wie indexOf durchsucht werden um nach einem Dateinamen zu suchen In Netscape 6 sind die Eigenschaften hspace vspace und border fehlerhaft implementiert input HTML Elementobjekt HTML Referenz siehe Element input Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente input haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden Eigenschaft Status Bedeutung accept bei type file erlaubte MIME Typen für File Upload accessKey Hotkey für das Element align Ausrichtung alt Alternativtext bei type image checked Auswählen bei bei type radio oder type checkbox defaultValue vorbelegter Wert defaultChecked per Vorbelegung ausgewählt oder nicht disabled Element kann nicht geändert werden form zugehöriges Formular maxLength maximale Anzahl eingebbarer Zeichen name Name des Elements readOnly Wert des Elements kann nicht verändert werden size Anzeigebreite bei type text src URI der Grafik bei type image tabIndex Tabulator Reihenfolge type Typ des Formularelements useMap Verweis zu einem map Bereich bei type image value Wert des Elements Methode Bedeutung blur Fokus vom Element entfernen focus Fokus auf Element setzen select Wert selektieren click Element anklicken Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Breite 3 function erweitern Breite 1 document getElementsByName Eingabe 0 size Breite script head body form name Formular Geben Sie Text ein br input type text size 3 name Eingabe onkeypress erweitern form body html Erläuterung In der Beispieldatei ist ein Formular mit einem zunächst ziemlich kleinen Eingabefeld size 3 notiert Das Eingabefeld enthält den Event Handler onkeypress Bei jedem Tastendruck der erfolgt während das Eingabefeld den Fokus hat wird darum die JavaScript Funktion erweitern aufgerufen die im Dateikopf notiert ist Diese greift mit document getElementsByName Eingabe 0 auf das erste Element mit dem Namen Eingabe zu also das Eingabefeld und ändert dessen Eigenschaft size mit dem aktuellen Wert der Variablen Breite Diese wird bei jedem Aufruf der Funktion um 1 erhöht Das Beispiel bewirkt dass das Eingabefeld um so größer wird je mehr Text eingegeben wird Beachten Sie Safari 1 2 und Konqueror akzeptieren zwar Angaben zur Eigenschaft size verändern aber das Eingabefeld nicht ins HTML Elementobjekt HTML Referenz siehe Element ins Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente ins haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung cite URI für Gründe des Einfügens dateTime Datum und Uhrzeit des Einfügens Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p Text ins id hinzugekommen onmouseover document getElementById hinzugekommen title das ist hinzugekommener Text mit weiterem Text ins p body html Erläuterung Das Beispiel enthält einen Absatz von dessen Text ein Teil mit ins ins ausgezeichnet ist Beim Überfahren dieses Textes mit der Maus onmouseover wird dynamisch die Universaleigenschaft title mit einem Wert belegt Dazu wird mit document getElementById hinzugekommen auf das ins Element zugegriffen isindex HTML Elementobjekt HTML Referenz siehe Element isindex Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente isindex haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung form zugehöriges Formular prompt Labeltext Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body isindex title selten angewendetes HTML Element id Eingabe onmouseover alert document getElementById Eingabe title body html Erläuterung Das Beispiel enthält ein isindex Element Beim Überfahren des Elements mit der Maus wird ein Meldungsfenster ausgegeben das den Wert des title Attributs ausgibt das im Element notiert ist Dazu wird mit document getElementById Eingabe auf das Element zugegriffen Beachten Sie Der Event Handler onmouseover kann zwar auf dieses Element angewendet werden ist jedoch kein Bestandteil der Standards Das vorliegende Beispiel wird vom Internet Explorer 5 0 Macintosh Edition nicht interpretiert kbd HTML Elementobjekt HTML Referenz siehe Element kbd Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente kbd haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Hinweis document getElementById Keyboard title Sie haben es geschafft alert document getElementById Keyboard title script head body onkeypress Hinweis kbd id Keyboard Taste drücken kbd body html Erläuterung Das Beispiel enthält eine Aufforderung eine Taste zu drücken die sinnigerweise kbd kbd eingeschlossen ist Das einleitende body Tag der Datei enthält den Event Handler onkeypress Wenn das Dokument den Fokus hat und der Anwender irgendeine Taste drückt wird die JavaScript Funktion Hinweis aufgerufen die im Dateikopf definiert ist Diese Funktion greift mit document getElementById Keyboard auf das kbd Element zu und weist dessen Universaleigenschaft title einen Wert zu Anschließend wird zur Kontrolle genau diese Universaleigenschaft in einem Meldungsfenster ausgegeben label HTML Elementobjekt HTML Referenz siehe Element label Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente label haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung accessKey Hotkey für das zugehörige Element form zugehöriges Formular htmlFor Id des Elements zu dem das Label gehört Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Formular action table tr td label id VN for Vorname Ihr Vorname label td td input type text id Vorname td tr tr td label id ZN for Zuname Ihr Zuname label td td input type text id Zuname td tr table form script type text javascript document getElementById Vorname value document getElementById VN htmlFor document getElementById Zuname value document getElementById ZN htmlFor script body html Erläuterung Das Beispiel enthält ein Formular mit zwei Eingabefeldern Die Beschriftungen der Eingabefelder sind jeweils mit einem label Element ausgezeichnet Unterhalb des Formulars ist ein Script Bereich notiert Dort werden die beiden Eingabefelder mit Werten vorbelegt und zwar mit den Werten die den id Attributen der zugehörigen label Element zugewiesen sind Dazu wird mit document getElementById VN und document getElementById ZN auf die label Elemente zugegriffen Ihre Eigenschaft htmlFor wird den Formularfeldern zugewiesen auf die ebenfalls mit getElementById zugegriffen wird legend HTML Elementobjekt HTML Referenz siehe Element legend Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente legend haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung accessKey Hotkey für das Element align Ausrichtung form zugehöriges Formular Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Formular action fieldset legend id L1 Absender legend input type text size 50 name Absendername onfocus document getElementById L1 align right onblur document getElementById L1 align left fieldset fieldset legend id L2 Mitteilung legend input type text size 50 name Mitteilungstext onfocus document getElementById L2 align right onblur document getElementById L2 align left fieldset form body html Erläuterung Das Beispiel enthält ein Formular bei dem für jedes der beiden Eingabefelder ein fieldset Bereich mitsamt legend Element definiert ist Sobald eines der Eingabefelder den Fokus erhält onfocus wird der zugehörige Legendentext rechtsbündig ausgerichtet Sobald das Eingabefeld den Fokus wieder verliert onblur wird der Legendentext wieder linksbündig ausgerichtet Dazu wird mit document getElementById L1 bzw document getElementById L2 auf die legend Elemente zugegriffen Neu gesetzt wird jeweils ihre Eigenschaft align Beachten Sie Im Netscape 6 erfolgt die Ausrichtung ausgehend vom rechten Rand des Eingabefeldes Internet Explorer 5 0 und Opera interpretieren dieses Beispiel nicht Safari 1 2 interpretiert von den eigenen Eigenschaften nur form Konqueror 3 1 interpretiert das Beispiel vollständig Konqueror 3 3 und 3 4 tun dies nicht mehr li HTML Elementobjekt HTML Referenz siehe Element li Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente li haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung type Aufzählungszeichen oder der Nummerierungstyp value Wert der laufenden Nummerierung neu setzen Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css hinterlegt background color yellow style script type text javascript function Aendern for var i 0 i document getElementsByTagName li length i if i 2 0 document getElementsByTagName li i className hinterlegt document getElementsByTagName li i type I script head body ol li Ein ungerader Listenpunkt li li Ein gerader Listenpunkt li li Ein ungerader Listenpunkt li li Ein gerader Listenpunkt li li Ein ungerader Listenpunkt li li Ein gerader Listenpunkt li li Ein ungerader Listenpunkt li li Ein gerader Listenpunkt li ol a href javascript Aendern gerade Listenpunkte hinterlegen a body html Erläuterung Das Beispiel enthält eine nummerierte Liste mit einigen Listenpunkten Unterhalb davon ist ein Verweis notiert Bei Anklicken des Verweises wird die JavaScript Funktion Aendern aufgerufen die im Dateikopf notiert ist Diese Funktion geht in einer for Schleife der Reihe nach alle li Elemente durch wobei sie mit document getElementsByTagName li darauf zugreift Bei geraden Listenpunkten werden zwei Änderungen durchgeführt erstens erhalten diese Listenpunkte eine oben im Style Bereich definierte CSS Klasse zugewiesen die dem Element eine andere Hintergrundfarbe zuweist und zweitens wird der Nummerierungstyp dieser Listenpunkte auf römisch großgeschrieben gesetzt link HTML Elementobjekt HTML Referenz siehe Element link Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente link haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung charset Zeichenkodierung des Verweisziels disabled als Button anklickbar oder nicht href Verweisziel hreflang Landessprache des Verweisziels media Ausgabemedium rel Verweisziel als Vorwärtsverknüpfung rev Verweisziel als Rückwärtsverknüpfung target Fensternamen des Verweisziels type MIME Typ des Verweisziels Beispiel Anzeigebeispiel So sieht s aus html head title Test title link id CSS rel stylesheet href styles 1 css script type text javascript function CSS Wechsel document getElementById CSS href styles 2 css script head body h1 Dies und das h1 a href javascript CSS Wechsel anderes Stylesheet a body html Erläuterung Das Beispiel enthält im Dateikopf ein HTML Tag zum Einbinden eines Stylesheets Innerhalb des sichtbaren Dokumentbereichs ist ein Verweis notiert bei dessen Anklicken die JavaScript Funktion CSS Wechsel aufgerufen wird die im Dateikopf notiert ist Diese Funktion greift mit document getElementById CSS auf das link Element zu das die CSS Datei einbindet und weist der Eigenschaft href einen neuen Wert zu nämlich die neue CSS Datei Dadurch wird die neue CSS Datei relevant für alle Formatierungen innerhalb der HTML Datei Beachten Sie Mit Netscape vor Version 6 2 und dem Internet Explorer 5 0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar map HTML Elementobjekt HTML Referenz siehe Element map Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente map haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung areas Array der area Definitionen name Ankername des Definitionsbereichs Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function zeigCoords alert document getElementsByName Testbild 0 areas 0 coords script head body map name Testbild area id Verweis shape rect coords 1 1 249 49 href javascript zeigCoords alt Verweis map img src hypgraf gif width 400 height 400 usemap Testbild alt verweis sensitive Grafik body html Erläuterung Das Beispiel enthält eine Grafik die auf einen ebenfalls enthaltenen verweis sensitiven Bereich verweist Dort wird ein verweis sensitives Rechteck für die Grafik definiert Beim Anklicken dieses Bereichs wird die JavaScript Funktion zeigCoords aufgerufen die im Dateikopf notiert ist Die Funktion gibt die Koordinaten des verweis sensitiven Bereichs aus indem sie mit document getElementsByName Testbild 0 areas 0 coords auf den areas Array des map Elements zugreift und die Eigenschaft coords von dessem ersten Element anspricht menu HTML Elementobjekt HTML Referenz siehe Element menu Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente menu haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgende eigene Eigenschaft Eigenschaft Status Bedeutung compact Darstellung in enger Schrift Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function zeigKompakt document getElementsByTagName menu 0 compact true script head body menu onmouseover zeigKompakt li Datei li li Bearbeiten li li Ansicht li li Format li menu body html Erläuterung Das Beispiel enthält eine Menüliste Beim Überfahren der Liste mit der Maus onmouseover wird die JavaScript Funktion zeigKompakt aufgerufen die im Dateikopf notiert ist Die Funktion greift mit document getElementsByTagName menu 0 auf das erste menu Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true wahr Dadurch wird die gesamte Liste in kompakter Schrift dargestellt Beachten Sie Weder Netscape Internet Explorer Mozilla Firefox Opera Konqueror noch Safari interpretieren das HTML Attribut compact meta HTML Elementobjekt HTML Referenz siehe Element meta Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente meta haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung content Wert Inhalt der Meta Angabe httpEquiv Eigenschaft für Meta Informationen für HTTP Kopfdaten name Eigenschaft für Meta Informationen scheme Schema für den Wert der Eigenschaft Beispiel Anzeigebeispiel So sieht s aus html head meta http equiv content type content text html charset ISO 8859 1 meta name keywords content Metaliste JavaScript Anzeige meta name irgendein Name content Irgendein Inhalt title Test title script type text javascript function Metaliste var metas document getElementsByTagName meta var liste i liste Diese Datei hat metas length Meta Tags n for i 0 i metas length i liste liste Name metas i name httpEquiv metas i httpEquiv Inhalt metas i content Schema metas i scheme n alert liste script head body p a href javascript Metaliste Liste der Meta Tags anzeigen a p body html Erläuterung Das Beispiel enthält drei Meta Elemente Die JavaScript Funktion Metaliste fragt mittels document getElementsByTagName meta alle Meta Elemente ab und speichert für den leichteren und schnelleren Zugriff das Array aller Elemente in der Variablen metas In der Variablen liste wird dann der auszugebende Text zusammengesetzt noframes HTML Elementobjekt HTML Referenz siehe Element noframes Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente noframes haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften Beispiel Anzeigebeispiel So sieht s aus html head title Test title head frameset cols 50 50 frame id F1 src frame1 htm frame id F2 src frame2 htm noframes title Das ist aber ein doofer Browser body p Alternativ Inhalt Zusammenfassung Sitemap p a href javascript alert document getElementsByTagName noframes 0 title weitere Infos a body noframes frameset html Erläuterung Das Beispiel enthält eine Frameset Definition und einen alternativen noframes Bereich Innerhalb davon ist ein Verweis notiert bei dessen Anklicken der Wert der Universaleigenschaft title des einleitenden noframes Tags in einem Meldungsfenster ausgegeben wird Beachten Sie Leider ist dieses Beispiel mit den gängigen Browsern nicht nachvollziehbar da diese Frames unterstützen und auch kein Abschalten von Frames ermöglichen Eine Ausnahme bildet hier Opera der ein Abschalten von Frames zulässt und das Beispiel auch interpretiert noscript HTML Elementobjekt HTML Referenz siehe Element noscript Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente noscript haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften Beispiel Anzeigebeispiel So sieht s aus html head title Test title meta http equiv content type content text html charset iso 8859 1 head body script type text tcl proc square i document write The call passed i to the function BR return expr i i document write The function returned square 5 script noscript id tcl title Ich verstehe kein tcl p onmouseover alert document getElementById tcl title Ein Browser der kein tcl kann p noscript body html Erläuterung Im Beispiel wurde ein Script Bereich in der Sprache tcl dargestellt Browser die diese Sprache nicht interpretieren interpretieren den zugehörigen noscript Bereich und zeigen den alternativen Text an Da es sich um eine andere Sprache als JavaScript handelt können Sie auf das Script Element mit JavaScript zugreifen Wenn die Maus über den Absatz bewegt wird wird der Titel des noscript Elementes angezeigt Beachten Sie Der Internet Explorer Netscape und Konqueror zeigen das noscript Element im Beispiel nur bei ausgeschaltetem JavaScript an object HTML Elementobjekt HTML Referenz siehe Element object Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente object haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung align Ausrichtung des Objekts archive kommaseparierte Liste mit Archivdateien für das Objekt border Rahmendicke um Objekt code Klassendatei bei Java Applets codeBase Basis URI für Angaben zu data und archive codeType MIME Typ der Datenquelle data URI der Datenquelle declare Objekt wird geladen aber nicht initialisiert form zugehöriges Formularelement height Anzeigehöhe hspace horizontaler Abstand zwischen Objekt und umfließendem Text name Name der Grafik standBy Meldungstext der angezeigt wird während das Objekt geladen wird tabIndex Tabulator Reihenfolge für Objekte type MIME Typ der Datenquelle useMap Verweis zu einem map Bereich vspace vertikaler Abstand zwischen Objekt und umfließendem Text width Anzeigebreite Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function groesser document getElementById TXT width 640 document getElementById TXT height 480 script head body p object id TXT data html txt type text plain width 320 height 240 object p p a href javascript groesser mehr sehen a p body html Erläuterung Das Beispiel enthält die Objektdefinition einer TXT Datei Unterhalb davon ist ein Verweis notiert Beim Anklicken des Verweises wird die JavaScript Funktion groesser aufgerufen die im Dateikopf notiert ist Die Funktion greift mit document getElementById TXT auf das object Element zu und ändert dessen Eigenschaften für width und height Das Objekt wird dadurch dynamisch vergrößert Beachten Sie In Netscape bis Version 6 1 ist dieses Beispiel nicht nachvollziehbar Opera beherrscht es ab Version 7 60 ol HTML Elementobjekt HTML Referenz siehe Element ol Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente ol haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung compact Darstellung in enger Schrift start Startwert für die Nummerierung type Art der Nummerierung Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function roemisch document getElementById Liste type I function normal document getElementById Liste type 1 script head body ol id Liste li eins li li zwei li li drei li li vier li li fünf li ol a href javascript roemisch römisch a br a href javascript normal normal a body html Erläuterung Das Beispiel enthält eine nummerierte Liste Unterhalb davon sind zwei Verweise notiert Der eine ruft eine JavaScript Funktion roemisch auf der andere eine Funktion normal Beide Funktionen greifen jeweils mit document getElementById Liste auf das Start Tag der nummerierten Liste zu und ändern dessen Eigenschaft type Im einen Fall wird die Nummerierung dynamisch durch römische Ziffern ersetzt im andern Fall werden wieder arabische Ziffern benutzt optgroup HTML Elementobjekt HTML Referenz siehe Element optgroup Auf HTML Elementobjekte zugreifen siehe HTML Elementobjekte Allgemeines zur Verwendung HTML Elemente optgroup haben als DOM Objekte für den Script Sprachenzugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften Eigenschaft Status Bedeutung disabled Gruppe von Einträgen kann nicht ausgewählt werden label Text des Gruppeneintrags Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Auswahl action select name Namen size 1 onchange alert document getElementById A label optgroup label Namen mit A id A option label Anna Anna option option label Anke Anke option optgroup select form body html Erläuterung Das Beispiel definiert eine Menüstrutkur Sobald ein Eintrag ausgewählt ist onchange wird in einem Meldungsfenster der Wert der Eigenschaft label des optgroup Elements mit dem id Wert A ausgegeben Beachten Sie Weder Netscape noch Internet Explorer interpretieren Menüstrukturen bis auf den heutigen Tag korrekt Netscape 6 zwar ansatzweise aber noch nicht so wie es gedacht ist Dennoch interpretieren beide Browser das obige JavaScript Safari 1 0 verhält sich ebenso Safari 1 2 interpretiert die Eigenschaft disabled nicht option HTML

    Original URL path: http://html.ekiwi.de/javascript/objekte/htmlelemente.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Objektreferenz / layers
    über den Layer zu erfahren Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name GelberLayer top 100 left 50 height 200 bgcolor FFFFE0 Inhalt des gelben Layers layer layer top 150 name LilaLayer left 100 height 200 bgcolor FFE0FF Inhalt des lila Layers layer a href javascript alert document LilaLayer below name Wer liegt unter dem lila Layer a br a href javascript alert document LilaLayer below left Und wo beginnt er a br body html Erläuterung Im Beispiel werden zwei Layer mit den Namen GelberLayer und LilaLayer definiert Außerdem sind zwei Verweise notiert Der eine Verweis meldet beim Anklicken den Namen des Layers der unter dem lila Layer liegt document LilaLayer below name der andere Verweis dessen Position von links document GelberLayer below left Unter dem lila Layer liegt der gelbe Layer da in der Datei zuerst der gelbe und danach der lila Layer definiert wird clip Speichert welcher Ausschnitt eines Layers angezeigt wird Dabei gibt es folgende Untereigenschaften clip top speichert den Pixelwert oben der linken oberen Ecke des sichtbaren Layer Bereichs clip left speichert den Pixelwert links der linken oberen Ecke des sichtbaren Layer Bereichs clip bottom speichert den Pixelwert unten der rechten unteren Ecke des sichtbaren Layer Bereichs clip right speichert den Pixelwert rechts der rechten unteren Ecke des sichtbaren Layer Bereichs clip width speichert die Breite des sichtbaren Layer Bereichs alternative Angabe zur Angabe einer rechten unteren Ecke clip height speichert die Höhe des sichtbaren Layer Bereichs alternative Angabe zur Angabe einer rechten unteren Ecke Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function MachKleiner with document MeinLayer if clip height 0 clip width 0 clip height 10 clip width 10 function MachGroesser with document MeinLayer if clip height 200 clip width 200 clip height 10 clip width 10 script head body layer name MeinLayer top 80 left 80 height 200 width 200 bgcolor FFFFE0 Inhalt des Layers layer a href javascript MachKleiner Kleiner a br a href javascript MachGroesser Groesser a body html Erläuterung Im Beispiel ist ein Layer definiert Da innerhalb der HTML Definition keine Angaben zum clip Bereich des Layers gemacht werden wird der gesamte Layer angezeigt Seine clip Werte ergeben sich aus der Größe des Layers Intern sind also clip top und clip left gleich 0 und clip width clip height clip bottom und clip right haben alle den Wert 200 weil sich dies aus den Angaben height 200 width 200 in der HTML Definition des Layers ergibt Mit Hilfe von zwei Verweisen lässt sich im Beispiel der sichtbare Anzeigebereich des Layers verkleinern und wieder vergrößern Die Verweise rufen die Funktionen MachKleiner bzw MachGroesser auf die in einem Script Bereich im Dateikopf notiert sind Die Funktion MachKleiner fragt ab ob clip width und clip height größer 0 sind Wenn ja werden beide Werte um 10 verringert wodurch der Anzeigebereich des Layers von rechts unten um 10 Pixel beschnitten wird Die Funktion MachGroesser tut einfach das Umgekehrte document Jeder Layer wird von Netscape wie ein eigenes kleines Dokument behandelt Deshalb gibt es für Layer auch ein document Objekt das genauso funktioniert wie das globale document Objekt Dadurch haben Sie Zugriff auf Dokument Unterobjekte wie Grafiken Formulare usw Um solche Elemente innerhalb eines Layers anzusprechen müssen Sie die Elemente über das Layer eigene document Objekt ansprechen Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function AndererInhalt document MeinLayer document open document MeinLayer document write Jetzt ist der Verweis weg document MeinLayer document close script head body layer name MeinLayer bgcolor FFFFE0 a href javascript AndererInhalt Diesen Verweis ueberschreiben a layer body html Erläuterung Im Beispiel wird ein Layer definiert der einen Verweis enthält Beim Anklicken wird die Funktion AndererInhalt aufgerufen die in einem Script Bereich im Dateikopf notiert ist Diese Funktion benutzt typische Methoden des document Objekts wie open write und close Das Besondere ist dass es sich nicht um das globale Dokument handelt sondern um das Dokument das der Layer darstellt Dies wird durch eine Adressierung wie document MeinLayer document erreicht Beachten Sie Das Dokumentenmodell der Layer im Netscape hat auch Auswirkungen auf im HTML Dokument definierte Formulare Grafiken oder Verweise Berücksichtigen Sie hier dass alle Elemente die sich in einem Layer befinden zum Dokument des Layers gehören und nicht zum HTML Dokument Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name MeinLayer bgcolor FFFFE0 left 300 img src blau gif width 104 height 102 border 0 alt layer script type text javascript document write Anzahl der Bilder im HTML Dokument document images length document write br Anzahl der Bilder im Layer document MeinLayer document images length script body html Erläuterung Im Beispiel wurde ein Layer definiert der eine Grafik enthält Weitere Bilder enthält die Datei nicht Danach folgt ein JavaScript Bereich der mit der Methode document write die Anzahl der Bilder im Dokument und im Layer ausgibt Anhand des Beispieles sehen Sie dass nur das Dokument des Layers eine Grafik enthält Mit einer Adressierung wie document MeinLayer document können Sie diese Grafik ansprechen und z B deren Eigenschaft src ändern left Speichert den Pixelwert für links der linken oberen Ecke eines Layers Bezug ist dabei das übergeordnete Dokument Das kann entweder das globale Dokument sein oder ein Layer innerhalb dessen der aktuelle Layer definiert ist Für absoluten Bezug siehe pageX Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name SuperLayer left 100 layer name Layerchen left 200 width 300 bgcolor FFFFE0 a href javascript alert document SuperLayer document Layerchen left Links Wert a layer layer body html Erläuterung Das Beispiel enthält einen Layer innerhalb eines anderen Layers beginnend bei Pixelposition 200 von links mit einem Verweis Beim Anklicken des Verweises wird der Links Wert des inneren Layers ausgegeben Der beträgt 200 obwohl der Layer optisch gesehen bei Position 300 beginnt weil der übergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu addiert wird length Speichert die Anzahl der Layer in einer Datei Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer layer layer layer layer layer layer layer script type text javascript document write Auf dieser Seite gibt es document layers length Layer script body html Erläuterung Das Beispiel enthält ein paar Layer zu Testzwecken und schreibt dann mit document write die Anzahl der definierten Layer in die Datei name Speichert den Namen eines Layers Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name Layerchen bgcolor FFFFE0 a href javascript alert document Layerchen name Wie heisse ich denn a layer body html Erläuterung Das Beispiel enthält einen Layer mit einem Verweis Beim Anklicken des Verweises wird der Name des Layers in einem Meldungsfenster ausgegeben Es ist derjenige Name der in HTML bei dem Attribut name angegeben ist pageX Speichert den Pixelwert für links der linken oberen Ecke eines Layers Bezug ist dabei das globale Dokument auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function NachLinks document Layerchen pageX 0 script head body layer name Layerchen left 300 width 300 bgcolor FFFFE0 a href javascript NachLinks Nach links mit diesem Layer a layer body html Erläuterung Das Beispiel enthält einen Layer beginnend bei Pixelposition 300 von links mit einem Verweis Beim Anklicken des Verweises wird die Funktion NachLinks aufgerufen die im Dateikopf in einem Script Bereich notiert ist Diese Funktion ändert den Links Wert des Layers auf 0 sodass der Layer anschließend ganz links beginnt pageY Speichert den Pixelwert für oben der linken oberen Ecke eines Layers Bezug ist dabei das globale Dokument auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function NachOben document Layerchen pageY 0 script head body layer name Layerchen top 300 width 300 bgcolor FFFFE0 a href javascript NachOben Nach oben mit diesem Layer a layer body html Erläuterung Das Beispiel enthält einen Layer beginnend bei Pixelposition 300 von oben mit einem Verweis Beim Anklicken des Verweises wird die Funktion NachOben aufgerufen die im Dateikopf in einem Script Bereich notiert ist Diese Funktion ändert den Links Wert des Layers auf 0 sodass der Layer anschließend ganz links beginnt parentLayer Speichert das Eltern Objekt eines Layers Das kann entweder das window Objekt sein oder falls der Layer innerhalb eines anderen Layers definiert ist dieser übergeordnete Layer Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name SuperLayer layer name Layerchen bgcolor FFFFE0 a href javascript alert document SuperLayer document Layerchen parentLayer name Super Name a layer layer body html Erläuterung Das Beispiel enthält einen Layer innerhalb eines anderen Layers Beim Anklicken des Verweises im inneren Layer wird der Name des Eltern Objekts ausgegeben Da das Elternobjekt in diesem Fall der übergeordnete Layer ist wird dessen Name also SuperLayer ausgegeben siblingAbove Speichert denjenigen Layer der aufgrund der Schichtposition die z B mit dem Attribut z index in HTML festgelegt wird über dem angesprochenen Layer liegt Es handelt sich dabei um ein Layer Objekt für das seinerseits alle verfügbaren Eigenschaften und Methoden gelten Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name L1 left 100 top 100 z index 3 bgcolor FFFFE0 Layer Inhalt L1 layer layer name L2 left 120 top 120 z index 1 bgcolor FFFFD0 Layer Inhalt L2 layer layer name L3 left 140 top 140 z index 4 bgcolor FFFFC0 Layer Inhalt L3 layer layer name L4 left 140 top 140 z index 2 bgcolor FFFFB0 Layer Inhalt L4 layer layer name L5 left 100 top 180 a href javascript alert document L1 siblingAbove name L1 siblingAbove a br a href javascript alert document L2 siblingAbove name L2 siblingAbove a br a href javascript alert document L3 siblingAbove name L3 siblingAbove a br a href javascript alert document L4 siblingAbove name L4 siblingAbove a br layer body html Erläuterung Das Beispiel definiert insgesamt fünf Layer Der zuletzt definierte Layer enthält vier Verweise Jeder Verweis gibt für einen der ersten vier Layer den Namen desjenigen Layers aus der aufgrund der z index Ordnung über dem angesprochenen Layer liegt Klickt man beispielsweise auf den ersten Verweis wird für den Layer mit dem Namen L1 der Name des Layers ausgegeben der darüber liegt Das ist in dem Fall der Layer mit dem Namen L3 da der Layer L1 den z index Wert 3 hat und der Layer L3 den nächsthöheren z index Wert nämlich 4 siblingBelow Speichert denjenigen Layer der aufgrund der Schichtposition die z B mit dem Attribut z index in HTML festgelegt wird unter dem angesprochenen Layer liegt Es handelt sich dabei um ein Layer Objekt für das seinerseits alle verfügbaren Eigenschaften und Methoden gelten Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name L1 left 100 top 180 a href javascript alert document L2 siblingBelow name L2 siblingBelow a br a href javascript alert document L3 siblingBelow name L3 siblingBelow a br a href javascript alert document L4 siblingBelow name L4 siblingBelow a br a href javascript alert document L5 siblingBelow name L5 siblingBelow a br layer layer name L2 left 100 top 100 z index 3 bgcolor FFFFE0 Layer Inhalt L2 layer layer name L3 left 120 top 120 z index 1 bgcolor FFFFD0 Layer Inhalt L3 layer layer name L4 left 140 top 140 z index 4 bgcolor FFFFC0 Layer Inhalt L4 layer layer name L5 left 140 top 140 z index 2 bgcolor FFFFB0 Layer Inhalt L5 layer body html Erläuterung Das Beispiel definiert insgesamt fünf Layer Der erste Layer enthält vier Verweise Jeder Verweis gibt für einen der folgenden vier Layer den Namen desjenigen Layers aus der aufgrund der z index Ordnung unter dem angesprochenen Layer liegt Klickt man beispielsweise auf den ersten Verweis wird für den Layer mit dem Namen L2 der Name des Layers ausgegeben der darunter liegt Das ist in dem Fall der Layer mit dem Namen L5 da der Layer L1 den z index Wert 3 hat und der Layer L2 den nächstniedrigeren z index Wert nämlich 2 src Speichert die externe Datei die in einen Layer eingebunden ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name extern left 50 top 30 width 600 height 200 src news htm layer layer left 50 top 250 script type text javascript document write hr b Eingebunden wurde die Datei b window document extern src script layer body html Erläuterung Das Beispiel enthält zwei positionierte Layer Der Inhalt des ersten Layers ist eine externe Datei namens news htm Im zweiten Layer wird mit Hilfe von document write die genaue Adresse der externen Datei in den Layer Bereich geschrieben Beachten Sie dass in diesem Fall window document extern src zur Adressierung des anderen Layers verwendet werden muss da document extern src sich sonst nur auf den aktuellen Layer beziehen würde und dieser kein Element namens extern enthält top Speichert den Pixelwert für oben der linken oberen Ecke eines Layers Bezug ist dabei das übergeordnete Dokument Das kann entweder das globale Dokument sein oder ein Layer innerhalb dessen der aktuelle Layer definiert ist Für absoluten Bezug siehe pageY Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name SuperLayer top 100 layer name Layerchen top 200 width 300 bgcolor FFFFE0 a href javascript alert document SuperLayer document Layerchen top Oben Wert a layer layer body html Erläuterung Das Beispiel enthält einen Layer innerhalb eines anderen Layers beginnend bei Pixelposition 200 von oben mit einem Verweis Beim Anklicken des Verweises wird der Oben Wert des inneren Layers ausgegeben Der beträgt 200 obwohl der Layer optisch gesehen bei Position 300 beginnt weil der übergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu addiert wird visibility Speichert ob bzw dass ein Layer sichtbar ist oder nicht Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function EinAus Nummer if window document layers Nummer visibility show window document layers Nummer visibility hide return if window document layers Nummer visibility hide window document layers Nummer visibility show return script head body layer name GelberLayer left 50 top 30 width 200 height 200 visibility show bgcolor FFFFE0 a href javascript EinAus 1 anderer Layer ein aus a layer layer name LilaLayer left 250 top 30 width 200 height 200 visibility show bgcolor FFE0FF a href javascript EinAus 0 anderer Layer ein aus a layer body html Erläuterung Im Beispiel werden zwei positionierte Layer definiert Jeder der beiden Layer enthält einen Verweis bei dessen Anklicken der jeweils andere Layer aus und wieder eingeblendet wird Dazu wird jeweils die Funktion EinAus aufgerufen die im Dateikopf notiert ist Als Parameter wird die Indexnummer des jeweils anderen Layers übergeben Die Eigenschaft visibility kann die drei Werte hide verstecken show anzeigen und inherit wie vom Eltern Layer vererbt haben zIndex Speichert die Schichtposition eines Layers Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer z index 527 name EinLayer a href javascript alert window document EinLayer zIndex z index a layer body html Erläuterung Im Beispiel wird ein Layer definiert der per HTML Attribut einen z index Wert von 527 erhält Innerhalb des Layers ist ein Verweis notiert Beim Anklicken des Verweises wird der z Index Wert des Layers in einem Meldungsfenster ausgegeben captureEvents Überwacht Anwenderereignisse in einem Layer Funktioniert genau so wie captureEvents beim window Objekt nähere Informationen siehe dort Der einzige Unterschied ist dass Sie mit window document Layer Name caputeEvents nur Ereignisse innerhalb des Layer Bereichs überwachen können keine Ereignisse im gesamten Fensterbereich zu dem beispielsweise auch Titelleiste Menüleisten usw gehören handleEvent Übergibt ein Ereignis an ein Element das in der Lage ist auf das Ereignis zu reagieren Funktioniert genau so wie handleEvent beim window Objekt nähere Informationen siehe dort Der einzige Unterschied ist dass window document Layer Name handleEvent nur Ereignisse übergeben kann die mit window document Layer Name captureEvents überwacht werden load Lädt eine externe Datei in einen Layer Erwartet zwei Parameter 1 Quelle Eine HTML Datei die geladen werden soll 2 Breite Anzeigebreite des Layers Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Laden document EinLayer load news htm 600 script head body a href javascript Laden News laden a layer name EinLayer top 50 left 20 layer body html Erläuterung Das Beispiel enthält einen leeren Layer und einen Verweis Beim Anklicken des Verweises wird die Funktion Laden aufgerufen die im Dateikopf notiert ist Die Anweisung innerhalb der Funktion wendet die Methode load auf den bis dahin leeren Layer an Die angegebene Datei news htm wird in den Layer geladen und der Layer erhält eine Anzeigebreite von 600 Pixeln moveAbove Legt einen Layer über einen anderen Layer Erwartet als Parameter den Layer der überdeckt werden soll Die Schichtposition des veränderten Layers ändert sich dabei abhängig von der des Layers der überdeckt werden soll Diese Methode hat nichts mit dem Bewegen von Layern zu tun Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body layer name GelberLayer top 150 left 100 width 200 height 200 bgColor FFFFE0 Gelber Layer br a href javascript window document GelberLayer moveAbove window document LilaLayer nach vorne a layer layer name LilaLayer top 50 left 250 width 200 height 200 bgColor FFE0FF Lila Layer br a href javascript window document LilaLayer moveAbove window document GelberLayer nach vorne a layer body html Erläuterung Im Beispiel werden zwei positionierte Layer definiert die sich zum Teil überlappen Beide enthalten jeweils einen Verweis um den eigenen Layer über den anderen zu legen moveBelow Legt einen Layer unter einen anderen Layer Erwartet als Parameter den Layer der den aktuellen überdecken soll Die Schichtposition des veränderten Layers ändert sich dabei abhängig von der des Layers der den aktuellen Layer überdecken

    Original URL path: http://html.ekiwi.de/javascript/objekte/layers.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Objektreferenz / Math
    type text name Aus input type button value onclick Test Aus value Math atan Test Ein value form body html Erläuterung Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben Das Ergebnis ist die Anwendung von atan auf den Wert aus dem ersten Eingabefeld ceil Erwartet als Parameter eine Zahl Liefert die nächsthöhere Ganzzahl dieser Zahl zurück Aufrundung Wenn die übergebene Zahl eine Ganzzahl ist bleibt sie unverändert Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text name Ein input type text name Aus input type button value onclick Test Aus value Math ceil Test Ein value form body html Erläuterung Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben Das Ergebnis ist die Anwendung von ceil auf den Wert aus dem ersten Eingabefeld Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschließend die nächsthöhere Ganzzahl cos Erwartet als Parameter eine Zahl Liefert den Cosinus dieser Zahl zurück Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text name Ein input type text name Aus input type button value onclick Test Aus value Math cos Test Ein value form body html Erläuterung Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben Das Ergebnis ist die Anwendung von cos auf den Wert aus dem ersten Eingabefeld Beachten Sie Diese Methode erwartet Zahlen in der Einheit Radiant rad als Parameter exp Erwartet als Parameter eine Zahl Liefert den Exponentialwert dieser Zahl auf Basis der Eulerschen Konstanten zurück Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text name Ein input type text name Aus input type button value onclick Test Aus value Math exp Test Ein value form body html Erläuterung Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben Das Ergebnis ist die Anwendung von exp auf den Wert aus dem ersten Eingabefeld Beachten Sie Sobald Sie eine Zahl verwenden die größer als 709 ist liefert diese Methode infinity Zahl ist zu groß zurück Ist die Zahl kleiner als 744 liefert die Methode 0 zurück floor Erwartet als Parameter eine Zahl Liefert die nächstniedrigere Ganzzahl dieser Zahl zurück Abrundung Wenn die übergebene Zahl eine Ganzzahl ist bleibt sie unverändert Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text name Ein input type text name Aus input type button value onclick Test Aus

    Original URL path: http://html.ekiwi.de/javascript/objekte/math.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Sprachelemente / Reservierte Wörter
    try catch char Noch nicht verwendet class Noch nicht verwendet const Dient zur Deklaration von Konstanten ab JavaScript Version 1 5 continue Als Anweisung Fortsetzung in Schleifen default Für Fallunterscheidungen delete Operator Objekte und Objekteigenschaften löschen do Für Schleifen mit do while double Noch nicht verwendet else Sonst Fall in bedingten Anweisungen mit if export Als Anweisung Objekte oder Funktionen für fremde Scripts ausführbar machen extends Noch nicht verwendet false Boolescher Wert falsch final Noch nicht verwendet finally Für Fehlerbehandlung mit try catch float Noch nicht verwendet for Für Schleifen mit for function Für Funktionen goto Noch nicht verwendet if Für bedingte Anweisungen mit if implements Noch nicht verwendet in Für spezielle Schleifen mit for instanceof Prüft ob ein Objekt eine Instanz eines Prototyp Objektes ist ab JavaScript Version 1 4 int Noch nicht verwendet long Noch nicht verwendet native Noch nicht verwendet new Dient zum Definieren von Objekten null Spezieller Null Wert z B für Eigenschaften die keinen Wert haben oder als Rückgabewert einer Funktion package Noch nicht verwendet private Noch nicht verwendet protected Noch nicht verwendet public Noch nicht verwendet return Für Rückgabewerte in Funktionen short Noch nicht verwendet static Noch nicht verwendet super Noch nicht verwendet switch

    Original URL path: http://html.ekiwi.de/javascript/sprache/reserviert.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Objektreferenz / forms
    als E Mail Sie können als Zieladresse eines Formulares auch eine HTML Datei angeben und Formulardaten mittels JavaScript verarbeiten Berücksichtigen Sie dabei dass JavaScript nur dann Zugriff auf Daten hat wenn die Methode get verwendet wurde Opera 5 12 zeigt im Protokoll file den Quelltext der Zieldatei an encoding Speichert den Wert der bei der Definition des Formulars im Attribut enctype steht also zum Beispiel text plain Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function CodeTyp if document Testform action indexOf 0 document Testform encoding text plain else document Testform encoding application x www form urlencoded return true script head body form name Testform action mailto beispiel example org onsubmit return CodeTyp input type text size 40 name Eingabe input type submit value Absenden form body html Erläuterung Das Beispiel enthält ein Formular Wenn der Anwender das Formular durch Anklicken das Submit Buttons abschickt wird die Funktion CodeTyp aufgerufen Innerhalb der Funktion CodeTyp wird ermittelt ob in der action Angabe des Formulars das Zeichen vorkommt das eine E Mail Adresse verrät Wenn ja wird der Kodierungstyp auf text plain gesetzt ansonsten auf den für CGI Programme üblichen Kodiertyp application x www form urlencoded Die Funktion CodeTyp gibt true zurück denn der aufrufende Event Handler onsubmit im einleitenden form Tag erwartet einen solchen Rückgabewert Das Formular wird nur abgeschickt wenn der Rückgabewert true ist Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf lesen Sie den Abschnitt über das string Objekt Beachten Sie Die Verwendung von mailto als Zieladresse eines Formulares verursacht häufig Probleme Mehr dazu im Abschnitt Formulare als E Mail Im HTML spezifischen DOM ist der Zugriff auf das enctype Attribut über die gleichnamige enctype Eigenschaft definiert nicht über eine Eigenschaft namens encoding length Speichert die Anzahl der Formulare die in einer Datei definiert sind Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Testform action mailto beispiel example org input type hidden value Guildo input type submit value Guildo form form name Testform action mailto beispiel example org input type hidden value Heino input type submit value Heino form script type text javascript document write document forms length Formulare script body html Erläuterung Im Beispiel werden zwei kleine Formulare definiert Am Ende wird mit Hilfe von document write zum Testen in die Datei geschrieben wie viele Formulare darin definiert sind method Speichert den Wert der bei der Definition des Formulars im Attribut method steht normalerweise get oder post Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Methode if document Testform action indexOf 0 document Testform method post else document Testform method get return true script head body form name Testform action mailto beispiel example org onsubmit return Methode input type text size 40 name Eingabe input type submit value Absenden form body html Erläuterung Das Beispiel enthält ein Formular Wenn der Anwender das Formular durch Anklicken das

    Original URL path: http://html.ekiwi.de/javascript/objekte/forms.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Objektreferenz / document
    Beispiel eine Multiplikationskette übergeben 1000 Millisekunden sind eine Sekunde mal 60 macht eine Minute mal 60 macht eine Stunde mal 24 ein Tag und mal 5 macht fünf Tage Um eine gültige Datumszeichenkette zu erhalten wird mit der Methode setTime dem Datum ein neuer Wert zugewiesen In der Variablen ablauf ist dann das korrekte Ablaufdatum gespeichert Dem Cookie wird schließlich das mit der Methode toGMTString formatierte Datum übergeben Beachten Sie Jede HTML Datei hat Kenntnis von allen Cookies die von Dateien aus dem gleichen oder einem höheren Verzeichnis gesetzt wurden Angenommen bei einer Domain http www test de mit dem Unterverzeichnis A gibt es in diesem Unterverzeichnis sowie im Wurzelverzeichnis jeweils eine Datei namens x htm Beide Dateien enthalten jeweils ein JavaScript mit der Anweisung document cookie location href Damit wird der URI der Datei in einem Cookie gespeichert Ferner gibt es in beiden Verzeichnissen eine Datei y htm die jeweils folgende JavaScript Anweisung enthält document write document cookie Damit wird ein vorhandener Cookie dynamisch ins Dokumentfenster geschrieben Bei der angenommenen Anordnung liefern folgende Dateien folgende Ausgaben http www test de y htm liefert http www test de x htm kann also den Cookie lesen den x htm im gleichen Verzeichnis gesetzt hat http www test de A y htm liefert http www test de A x htm http www test de x htm kann also den Cookie lesen den x htm im gleichen Verzeichnis gesetzt hat sowie den Cookie den die x htm im Verzeichnis oberhalb gesetzt hat Mittels der Eigenschaft navigator cookieEnabled können Sie abfragen ob der Anwender Cookies aktiviert hat Opera bis Version 6 erlaubt kein Setzen von Cookies im Protokoll file also beim Aufrufen von HTML Dateien mit JavaScript direkt von der Festplatte Dies gilt ebenfalls für den Webbrowser Safari defaultCharset Speichert die Kodierung die der Anwender als Standard im Browser eingestellt hat Wenn die HTML Datei keine Meta Angabe zur verwendeten Kodierung enthält benutzt der Browser diese Kodierung Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript alert Sie haben als Zeichenkodierung eingestellt document defaultCharset script head body body html Erläuterung Das Beispiel gibt beim Einlesen der Datei mit alert aus welche Kodierung der Anwender als Standard eingestellt hat fgColor Speichert die Farbe für Text wie beim Attribut text im body Tag oder vom Anwender in seinen Browser Einstellungen festlegbar siehe auch Farben für Hintergrund Text und Verweise Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function FarbeAendern document fgColor FF0000 script head body p Ein kleiner Text p p a href javascript FarbeAendern Textfarbe auml ndern a p body html Erläuterung Im Beispiel wird eine Funktion namens FarbeAendern definiert und ein Verweis der beim Aktivieren diese Funktion ausführt Die Funktion ändert die Textfarbe auf rot FF0000 Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen siehe auch Farben definieren in HTML Der Wert muss in jedem Fall in Anführungszeichen stehen Beachten Sie Farbänderungen für die Textfarbe können je nach Browser erst dann möglich sein nachdem die HTML Seite komplett eingelesen wurde Deshalb wurde das Beispiel so konzipiert dass die Farbänderung erst nach dem Laden durchgeführt wird Diese klassische im herkömmlichen JavaScript gültige Implementierung von fgColor als direkte Eigenschaft des document Objekts wird vom HTML spezifischen DOM missbilligt Laut DOM besitzt das HTML Elementobjekt body eine Eigenschaft namens text in Entsprechung zum Attribut text lastModified Speichert Datum und Uhrzeit der letzten Änderung der Datei Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript document write letzter Update document lastModified script body html Erläuterung Das Beispiel schreibt mit der Methode write den Zeitpunkt der letzten Änderung dynamisch in die HTML Datei Beachten Sie Die Formatierung der Zeichenkette ist stark abhängig vom Browser und dem verwendeten Betriebssystem So kann bei der Weiterverarbeitung dieser Eigenschaft mit dem Date Objekt eine zweistellige Jahreszahl übergeben und dadurch ein falscher Wochentag und ein falsches Jahr zurückgegeben werden linkColor Speichert die Farbe für unbesuchte Verweise wie beim Attribut link im body Tag oder vom Anwender in seinen Browser Einstellungen festlegbar siehe auch Farben für Hintergrund Text und Verweise Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function FarbeAendern document linkColor FF0000 script head body p a href http news bbc co uk Verweis a p p a href javascript FarbeAendern Verweisfarbe auml ndern a p body html Erläuterung Im Beispiel werden zwei Verweise notiert Der erste verweist auf eine Seite von der angenommen wird dass sie der Browsre nicht als besucht ansieht Der zweite Verweise führt beim Aktivieren eine Funktion namens FarbeAendern die im Seitenkopf definiert ist Diese Funktion ändert die Farbe für unbesuchte Links auf rot FF0000 Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen siehe auch Farben definieren in HTML Der Wert muss in jedem Fall in Anführungszeichen stehen Beachten Sie Konqueror 3 1 ermöglicht das Auslesen der Eigenschaft linkColor wenn ein link Attribut beim Element body vorhanden ist Das Setzen ist zwar möglich die Farbe der Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3 3 Diese klassische im herkömmlichen JavaScript gültige Implementierung von linkColor als direkte Eigenschaft des document Objekts wird vom HTML spezifischen DOM missbilligt Laut DOM besitzt das HTML Elementobjekt body eine Eigenschaft namens link in Entsprechung zum Attribut link referrer Speichert den URI von dem aus die aktuelle Datei aufgerufen wurde Voraussetzung ist dass er die aktuellen Datei über einen Verweis aufgerufen hat Wenn er die Adresse der Datei stattdessen etwa als Lesezeichen ausgewählt oder direkt in die Adresszeile des Browsers eingegeben hat ist in document referrer nichts gespeichert Beim Internet Explorer und in Netscape 6 wird in document referrer nur dann etwas gespeichert wenn der Aufruf der aktuellen Datei über das HTTP Protokoll erfolgte also mit einem Verweis vom Typ http Einige Browser ermöglichen es dem Anwender zudem den Zugriff auf diese Eigenschaft zu unterbinden Sie können sich daher nicht darauf verlassen dass document referrer gefüllt ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript document write h1 Lieber Besucher h1 document write Du hast also von document referrer hierher gefunden script body html Erläuterung Das Beispiel gibt im HTML Text mit der Methode write aus von woher der Anwender die aktuelle Datei aufgerufen hat title Speichert den Titel einer HTML Datei wie er bei title title vergeben wurde Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 script type text javascript document write document title script h1 body html Erläuterung Das Beispiel schreibt mit der Methode write den Titel der HTML Datei dynamisch als Inhalt in eine Überschrift 1 Ordnung h1 h1 Beachten Sie In Netscape JavaScript ist die Eigenschaft document title als nur lesbar definiert gemäß dem HTML spezifischen DOM und Microsofts JScript allerdings können Sie diese Eigenschaft auch ändern Unter anderem der Internet Explorer Opera Firefox Safari und Konqueror unterstützen dies URL Speichert den vollständigen URI des aktuellen Dokuments Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript window alert Diese Datei document URL script body html Erläuterung Das Beispiel gibt mit alert die vollständige Adresse des gegenwärtigen HTML Dokuments aus Beachten Sie Vermeiden Sie es die Adresse des Dokuments mit der Methode write direkt und ungefiltert auszugeben Ein Angreifer kann die Adresse so manipulieren dass auf diese Weise fremder HTML und JavaScript Code in die Seite eingeschleust wird Gelingt es dem Angreifer dass jemand Ihre Site über die manipulierte Adresse besucht stellt dies möglicherweise ein Sicherheitsrisiko dar Diese Angriffsmethode wird Cross Site Scripting genannt Viele dynamische Webseiten zum Beispiel Online Banking E Mail Dienste Online Shops sowie Foren und Communities arbeiten mit Cookie basierter Authentifizierung Gelingt es dem Angreifer fremden JavaScript Code einzuschleusen kann er eine solche Sitzung übernehmen und missbrauchen sogenanntes Session Hijacking vlinkColor Speichert die Farbe für Verweise zu bereits besuchten Seiten wie beim Attribut vlink im body Tag oder vom Anwender in seinen Browser Einstellungen festlegbar siehe auch Farben für Hintergrund Text und Verweise Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function FarbeAendern document vlinkColor A0A0A0 script head body p a href document htm besuchter Verweis a p p a href javascript FarbeAendern Farbe ändern a p body html Erläuterung Im Beispiel wird ein Verweis zu einer bereits besuchten Seite notiert Der Kopf der Datei enthält eine JavaScript Funktion FarbeAendern welche durch das Aktivieren eines weiteren Verweises im Dateikörper aufgerufen wird Die Funktion ändert die Farbe für besuchte Links zu einem Grauton A0A0A0 Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen siehe auch Farben definieren in HTML Der Wert muss in jedem Fall in Anführungszeichen stehen Beachten Sie Konqueror 3 1 ermöglicht das Auslesen der Eigenschaft vlinkColor wenn ein vlink Attribut beim Element body vorhanden ist Das Setzen ist zwar möglich die Farbe der besuchten Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3 3 Diese klassische im herkömmlichen JavaScript gültige Implementierung von vlinkColor als direkte Eigenschaft des document Objekts wird vom HTML spezifischen DOM missbilligt Laut DOM besitzt das HTML Elementobjekt body eine Eigenschaft namens vLink in Entsprechung zum Attribut vlink captureEvents Überwacht Anwenderereignisse im aktuellen Dokument Funktioniert genau so wie captureEvents beim window Objekt nähere Informationen siehe dort Der einzige Unterschied ist dass Sie mit document captureEvents nur Ereignisse innerhalb des Dokumentfensters überwachen können jedoch keine Ereignisse im gesamten Fensterbereich zu dem beispielsweise auch Titelleiste Menüleisten usw gehören Beachten Sie Netscape 6 interpretiert diese Methode nicht mehr close Schließt einen Dokumentinhalt der mit der open Methode geöffnet und mit den Methoden write oder writeln beschrieben wurde Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript document open document write document URL document close script body html Erläuterung Das Beispiel öffnet den Dokumentinhalt zum Schreiben dann schreibt es etwas den aktuellen URI mit der Methode write und zuletzt schließt es den Vorgang mit document close ab Mit dem Schließen des Dokumentes wird dem Browser signalisiert dass der Aufbau der Seite abgeschlossen ist Dies ist besonders beim dynamischen Schreiben von Frames und zum Beschreiben von Layern erforderlich createAttribute Erzeugt ein neues Attribut für den Elementenbaum Lässt sich auf HTML aber auch auf XML Dokumente anwenden Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 Eine sehr dynamische Seite h1 script type text javascript var Ausrichtung document createAttribute align Ausrichtung nodeValue right var Element document getElementsByTagName h1 0 Element setAttributeNode Ausrichtung script body html Erläuterung Das Beispiel enthält eine Überschrift erster Ordnung ohne weitere Attribute Unterhalb davon ist ein JavaScript Bereich notiert Dort wird mit document createAttribute align ein neues Attribut mit Namen align erzeugt das in diversen HTML Elementen zum Ausrichten des Inhalts verwendet werden kann Das Attribut hat damit aber noch keine Wirkung es hängt weder im Elementenbaum des Dokuments noch hat es einen Wert Das Attribut ist lediglich als Objekt erzeugt Die Methode createAttribute gibt das erzeugte Objekt also in dem Fall das align Attribut zurück Der Rückgabewert wird in der Variablen Ausrichtung gespeichert Über diese Variable ist das neu erzeugte Attribut von da ab ansprechbar Damit das Attribut einen Inhalt erhält wird der dem Attributknoten über die Objekteigenschaft nodeValue der gewünschte Wert right zugewiesen Anschließend müssen das Attribut und sein Wert noch in den vorhandenen Elementenbaum eingehängt werden Dies geschieht in der Anweisung Element setAttributeNode Ausrichtung siehe auch setAttributeNode Dabei wurde zuvor in der Variablen Element das h1 Element gespeichert auf das mit getElementsByTagName zugegriffen wurde Somit wird die Überschrift dynamisch rechtsbündig ausgerichtet Beachten Sie Mit dem Internet Explorer 5 5 war dieses Beispiel nicht nachvollziehbar wenngleich Microsoft behauptet diese Methode in den Internet Explorer implementiert zu haben Im Internet Explorer 6 ist das Beispiel dagegen nachvollziehbar createElement Erzeugt ein neues Element für den Elementenbaum lässt sich auf HTML aber auch auf XML Dokumente anwenden Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body div id Bereich style border 1px black solid padding 10px div script type text javascript var myH1 document createElement h1 var myText document createTextNode Eine sehr dynamische Seite myH1 appendChild myText var Ausgabebereich document getElementById Bereich Ausgabebereich appendChild myH1 script body html Erläuterung Das Beispiel enthält einen div Bereich der zunächst leer ist Unterhalb davon ist ein JavaScript Bereich notiert Dort wird mit document createElement h1 ein neues Element vom Typ h1 erzeugt also eine HTML Überschrift erster Ordnung Die Überschrift wird damit aber noch nicht angezeigt sie hängt noch nicht einmal im Elementenbaum des Dokuments Das Element ist lediglich als Objekt erzeugt Die Methode createElement gibt das erzeugte Objekt also in dem Fall das h1 Element zurück Der Rückgabewert wird in der Variablen myH1 gespeichert Über diese Variable ist das neu erzeugte Element von da ab ansprechbar Damit die Überschrift einen Inhalt erhält wird mit createTextNode ein Textknoten erzeugt Mit appendChild wird dann der Textknoten als Kindelement der Überschrift erster Ordnung definiert Anschließend muss noch die ganze Überschrift in den vorhandenen Elementenbaum eingehängt werden Dies geschieht in der Anweisung Ausgabebereich appendChild myH1 Dabei wurde zuvor in der Variablen Ausgabebereich das leere div Element gespeichert auf das mit getElementById zugegriffen wurde Somit wird die Überschrift mit ihrem Text als Kindelement dynamisch in den div Bereich eingefügt createTextNode Erzeugt einen neuen Textknoten für den Elementenbaum lässt sich auf HTML aber auch auf XML Dokumente anwenden Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p id Absatz p script type text javascript var Zeitstempeltext document createTextNode document lastModified var TextZuvor document createTextNode Datum des letzten Updates document getElementById Absatz appendChild TextZuvor document getElementById Absatz appendChild Zeitstempeltext script body html Erläuterung Das Beispiel enthält einen p Absatz der zunächst leer ist Unterhalb davon ist ein JavaScript Bereich notiert Dort wird mit document createTextNode zwei neue Zeichenketten erzeugt einmal der gespeicherte Wert von lastModified und einmal ein statischer Text Die Texte werden damit aber noch nicht angezeigt sie sind auch noch nicht in den Elementenbaum des Dokuments eingehängt Die Textknoten sind lediglich als Objekt erzeugt Die Methode createTextNode gibt das erzeugte Objekt zurück Der Rückgabewert wird in den beiden Beispielaufrufen in den Variablen Zeitstempeltext und TextZuvor gespeichert Über diese Variablen sind die neu erzeugten Textknoten von da ab ansprechbar Mit appendChild werden dann die Textknoten als Kindelemente des über dem JavaScript notierten Textabsatzes definiert Dazu wird mit getElementById auf das p Element zugegriffen Der leere Absatz erhält somit dynamisch einen Inhalt Beachten Sie Konqueror vor Version 3 4 und Safari vor 1 3 interpretieren createTextNode bereits Das oben angeführte Beispiel zeigt dies jedoch nicht da diese älteren Browserversionen lastModified noch nicht interpretieren getElementById Greift entsprechend der HTML Variante des DOM auf ein HTML Element zu das ein id Attribut besitzt Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css normal font style normal style script type text javascript function Ausrichten wie document getElementById unentschlossen align wie script head body h1 id unentschlossen Wo gehöre ich eigentlich hin h1 a href javascript Ausrichten left links a br a href javascript Ausrichten center zentriert a br a href javascript Ausrichten right rechts a br body html Erläuterung Das Beispiel enthält eine Überschrift erster Ordnung mit dem Attribut id unentschlossen Unterhalb davon sind drei Verweise notiert Jeder der Verweise ruft die Funktion Ausrichten auf die im Dateikopf notiert ist und übergibt ihr jeweils einen anderen Wert Innerhalb der Funktion Ausrichten wird mit document getElementById unentschlossen auf die Überschrift erster Ordnung zugegriffen Die Funktion weist der Eigenschaft align den jeweils übergebenen Wert zu Dadurch wird die Ausrichtung der Überschrift dynamisch geändert Beachten Sie Die Methode getElementById regelt lediglich den Zugriff auf HTML Elemente Um zu wissen was Sie mit welchen HTML Elementen überhaupt tun können können Sie sich im Abschnitt über die HTML Elementobjekte einen Überblick verschaffen Weitere Möglichkeiten um HTML Elemente dynamisch zu beeinflussen bietet das node Objekt an Sie können an diese Methode auch Variablen übergeben Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z B getElementById Variablenname Voraussetzung ist jedoch dass die Variable auch existiert Opera 5 und 6 kennen die Methode getElementById zum Ansprechen von Elementen ebenfalls Das obige Beispiel funktioniert jedoch in diesen Browsern nicht getElementsByName Greift entsprechend der HTML Variante des DOM auf ein HTML Element zu das ein name Attribut besitzt Beispiel Anzeigebeispiel So sieht s aus html head title Test title style type text css normal font style normal style script type text javascript function Ankreuzen document getElementsByName Zutat 0 checked true script head body form name Formular action input type checkbox name Zutat value Salami Salami br input type checkbox name Zutat value Pilze Pilze br input type checkbox name Zutat value Oliven Oliven br input type button value Test onclick Ankreuzen form body html Erläuterung Im Beispiel wird eine Gruppe von Checkboxen definiert die alle den gleichen Namen nämlich Zutat haben Darunter ist ein Klick Button notiert bei dessen Anklicken die Funktion Ankreuzen aufgerufen wird die im Dateikopf notiert ist Diese Funktion kreuzt die erste der drei Checkboxen an Durch getElementsByName Zutat 0 greift sie auf das erste Element mit name Zutat zu Auch wenn ein solcher Elementname nur einmal im Dokument vorkommt muss stets mit Array Syntax auf die Elemente zugegriffen werden So wäre im Beispiel das Formularelement etwa über getElementsByName Formular 0 ansprechbar Die zweite Checkbox mit dem Namen Zutat wäre über getElementsByName Zutat 1 ansprechbar usw Beachten Sie Die Methode getElementsByName regelt lediglich den Zugriff auf HTML Elemente Um zu wissen was Sie mit welchen HTML Elementen überhaupt tun können können Sie sich im Abschnitt über die HTML Elementobjekte einen Überblick verschaffen Weitere Möglichkeiten um HTML Elemente dynamisch zu beeinflussen bietet das node Objekt an Sie können an diese Methode auch Variablen übergeben Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z B getElementsByName Variablenname Voraussetzung ist jedoch dass die Variable auch existiert getElementsByTagName Greift entsprechend dem DOM auf ein beliebiges Element im Elementenbaum des Dokuments zu Maßgeblich ist

    Original URL path: http://html.ekiwi.de/javascript/objekte/document.htm (2016-04-25)
    Open archived version from archive



  •