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 / Objektreferenz / all
    So sieht s aus html head title Test title head body p id meinAbsatz Text p script type text javascript document write br Name des Absatzes document all meinAbsatz id script body html Erläuterung Im Beispiel wird ein Absatz definiert der mit dem id Attribut den Namen meinAbsatz zugewiesen bekommt In einem Script wird der vergebene Name mit document write zur Kontrolle in die Datei geschrieben Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft id In Opera funktioniert das Beispiel ab Version 5 12 bei Zugriff mittels document getElementById innerHTML Speichert den Inhalt eines HTML Elements Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML Tags notieren werden diese bei der Aktualisierung des Elementinhalts interpretiert Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Neu neuer b fetter b Text function Aendern document all meinAbsatz innerHTML Neu script head body p id meinAbsatz Text p a href javascript Aendern Anderer Text a body html Erläuterung Das Beispiel enthält einen Textabsatz und einen Verweis Beim Anklicken des Verweises wird die Funktion Aendern aufgerufen Diese Funktion weist dem Absatz mit der id meinAbsatz für die Eigenschaft innerHTML den Wert der zuvor definierten Variablen Neu zu Der Inhalt des Absatzes ändert sich dann dynamisch und berücksichtigt dabei auch die HTML Formatierung b b beim neuen Inhalt des Elements Die Eigenschaft innerHTML sollten Sie nicht direkt beim Einlesen der HTML Datei anwenden sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button Klicks oder mit einem setTimeout von einigen Sekunden davor Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4 0 einen Laufzeitfehler Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft innerHTML Der Internet Explorer ist aus irgendeinem Grund nicht in der Lage innerHTML auf die HTML Elemente table thead tbody tfoot und tr schreibend anzuwenden Man kann Tabellen also nicht über innerHTML verändern sondern ist gezwungen entweder ein die Tabelle einschließendes Element mit einer kompletten Tabelle neu zu schreiben oder z B mit den DOM Methoden zu arbeiten innerText Speichert den Textinhalt eines HTML Elements Sie können den Inhalt dynamisch ändern Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Neu neuer Text function Aendern document all meinAbsatz innerText Neu script head body p id meinAbsatz Text p a href javascript Aendern Anderer Text a body html Erläuterung Das Beispiel enthält einen Textabsatz und einen Verweis Beim Anklicken des Verweises wird die Funktion Aendern aufgerufen Diese Funktion weist dem Absatz mit der id meinAbsatz für die Eigenschaft innerText den Wert der zuvor definierten Variablen Neu zu Der Inhalt des Absatzes ändert sich dann dynamisch Die Eigenschaft innerText sollten Sie nicht direkt beim Einlesen der HTML Datei anwenden sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button Klicks oder mit einem setTimeout von einigen Sekunden davor Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4 0 einen Laufzeitfehler Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft innerText isTextEdit Speichert ob ein Element editierbar ist oder nicht Wenn editierbar hat die Eigenschaft den Wert true wenn nicht editierbar hat sie den Wert false Derzeit sind nur bestimmte Formularelemente editierbar Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Ausgabe var Ausgabetext for var i 0 i document Testform length i Ausgabetext Ausgabetext br document all tags input i isTextEdit document all Ausgabe innerHTML Ausgabetext script head body form name Testform action input type text size 30 br input type radio br input type button value Test onclick Ausgabe form p id Ausgabe p body html Erläuterung Das Beispiel definiert ein Formular mit einigen verschiedenen Elementen Das letzte Element ist ein Button Beim Anklicken des Buttons wird die Funktion Ausgabe aufgerufen Diese Funktion ermittelt in einer Schleife für jedes Element des Formulars ob es editierbar ist oder nicht Die Werte werden in einer Variablen Ausgabetext gesammelt und HTML formatiert Am Ende wird dem Textabsatz der in der Datei am Ende definiert ist mit der Eigenschaft innerHTML der gespeicherte Wert von Ausgabetext zugewiesen Auf diese Weise steht hinterher in der Datei welche der Formularfelder als editierbar gelten und welche nicht lang Speichert die Sprache eines HTML Elements wie sie im lang Attribut definierbar ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p id Absatz lang it mi chiamo Stefan p script type text javascript alert document all Absatz lang script body html Erläuterung Im Beispiel wird ein Textabsatz definiert dem mit dem lang Attribut die Sprache Italienisch it zugewiesen wird Unterhalb davon steht ein kleines JavaScript das mit alert den vergebenen Wert für die Sprache ausgibt Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft lang In Opera funktioniert das Beispiel ab Version 5 12 bei Zugriff mittels document getElementById language Speichert welche Script Sprache in einem aktuellen Script verwendet wird Beispiel Anzeigebeispiel So sieht s aus html head title Test title script language JScript type text jscript alert document all tags script 0 language script head body body html Erläuterung Das Beispiel gibt mit alert aus welche Script Sprache die Ausgabe bewirkt hat Das ist derjenige Wert der im script Tag beim Attribut language vergeben wurde Da der Internet Explorer mehrere Script Sprachen beherrscht kann dieser Befehl in manchen Fällen für Gewissheit sorgen etwa wenn man ihn in eine if Abfrage einbettet Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft language length Speichert die Anzahl HTML Tags einer HTML Datei Tags die aus einem einleitenden und einem abschließenden Tag bestehen werden als ein Tag gezählt Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p Ein Absatz p p Noch ein Absatz p script type text javascript alert Diese Datei hat document all length HTML Tags script body html Erläuterung Das Beispiel zeigt eine vollständige HTML Datei mit Grundgerüst zwei Textabsätzen und einem Script Innerhalb des Script wird mit alert ausgegeben wie viele HTML Tags die Datei enthält offsetHeight Speichert die Höhe eines Elements Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body id DieseDatei script type text javascript alert document all DieseDatei offsetHeight script body html Erläuterung Das Beispiel gibt mit alert die reale Höhe des body Tags der Datei aus Das Ergebnis ist die tatsächliche Anzeigehöhe des Fensters in dem das Dokument angezeigt wird Die Eigenschaft lässt sich aber ebensogut auf HTML Elemente innerhalb der angezeigten Inhalte anwenden Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft offsetHeight offsetLeft Speichert den Abstand eines Elementes zum linken Rand des in der Eigenschaft offsetParent gespeicherten Offset Elternelementes Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body div id Bereich style padding 20px p id Absatz Hier etwas Text p div script type text javascript alert document all Bereich offsetLeft alert document all Absatz offsetLeft script body html Erläuterung Im Beispiel wird ein div Tag mit einem p Tag innerhalb davon definiert Damit ein wenig innerer Abstand in die Sache kommt wird beim div Tag mit Hilfe einer Stylesheet Angabe ein Innenabstand definiert Unterhalb dieser Befehle steht ein JavaScript das die Abstände der beiden Elemente zum jeweiligen linken Rand des Offset Elternelementes mit alert ausgibt Das Offset Elternelement des Elementes Bereich ist das Body Element Für dieses Element wird der Abstand zwischen Body und Bereich in der Eigenschaft offsetLeft gespeichert Das Offset Elternelement des Elementes Absatz ist das Element Bereich selbst In der Eigenschaft offsetLeft ist jetzt der Abstand vom linken Rand vom Element Bereich bis zum Element gespeichert Beachten Sie Besitzt ein Element einen Innenabstand padding so ist im Internet Explorer 5 0 die Eigenschaft offsetLeft fehlerhaft da der gesetzte Innenabstand in die Angabe mit einfließt Das gilt auch für Padding Angaben die in einem inneren Element definiert sind Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft offsetLeft In Opera funktioniert das Beispiel ab Version 5 12 bei Zugriff mittels document getElementById offsetParent Speichert dasjenige Elternelement eines Elements von dessen Positionierung die Positionierung des Elements abhängt offsetParent ist dabei eine Art Zeiger auf das übergeordnete Element Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all Objekts notieren Diese gelten dann für das Element auf das der Zeiger zeigt Existiert kein Offset Elternelement so hat die Eigenschaft offsetParent den Wert null Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body table tr td div a b id Fett Hier etwas Text b a div td tr table script type text javascript var Eltern document all Fett offsetParent while Eltern document write Eltern tagName br Eltern Eltern offsetParent script body html Erläuterung Im Beispiel ist eine Tabelle notiert in deren einziger Zelle weitere Elemente enthalten sind Das innerste Element ist das Element b b mit dem id Namen Fett Im nachfolgenden JavaScript Bereich wird der Variablen Eltern das Offset Elternelement des Elementes Fett mit Hilfe von offsetParent zugewiesen Die nachfolgende while Schleife gibt zu jedem Offset Elternelement den Namen des Tags aus Anschließend wird der Variablen Eltern das Offset Elternelement des gerade angesprochenen Elementes zugewiesen Die Schleife bricht ab wenn kein Offset Elternelement mehr existiert So wie im Beispiel die all Objekteigenschaft tagName auf offsetParent angewendet wird lassen sich auch alle anderen Eigenschaften und Methoden des all Objekts auf das Element anwenden Im Unterschied zur Eigenschaft parentElement wird in der Eigenschaft offsetParent immer dasjenige Element gespeichert das die Position des Elements im Fenster festlegt Beachten Sie Im Internet Explorer 4 0 ist das Offset Elternelement von einer Tabellenzelle immer die Tabellenzeile Ab dem Internet Explorer 5 0 wird als Offset Elternelement einer Zelle die Tabelle selbst angesehen Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft offsetParent In Opera funktioniert das Beispiel ab Version 5 12 bei Zugriff mittels document getElementById offsetTop Speichert den Abstand eines Elements zum oberen Rand des in der Eigenschaft offsetParent gespeicherten Offset Elternelements Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body div id Bereich style padding 20px p id Absatz Hier etwas Text p div script type text javascript alert document all Bereich offsetTop alert document all Absatz offsetTop script body html Erläuterung Im Beispiel wird ein div Tag mit einem p Tag innerhalb davon definiert Damit ein wenig innerer Abstand in die Sache kommt wird beim div Tag mit Hilfe einer Stylesheet Angabe ein Innenabstand definiert Unterhalb dieser Elemente ist ein JavaScript notiert das mit alert die Abstände der beiden Elemente zum oberen Rand des Offset Elternelementes ausgibt Beachten Sie Im Internet Explorer 5 0 wird in einem untergeordneten Element eine bestehende Padding Angabe des übergeordneten Elementes nicht berücksichtigt sofern sich kein Element vor dem abgefragten Element befindet Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft offsetTop In Opera funktioniert das Beispiel ab Version 5 12 bei Zugriff mittels document getElementById offsetWidth Speichert die Breite eines Elements Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body id DieseDatei script type text javascript alert document all DieseDatei offsetWidth script body html Erläuterung Das Beispiel gibt mit alert die reale Breite des body Tags der Datei aus Das Ergebnis ist die tatsächliche Anzeigebreite des Fensters in dem das Dokument angezeigt wird Die Eigenschaft lässt sich aber ebensogut auf HTML Elemente innerhalb der angezeigten Inhalte anwenden Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft offsetWidth outerHTML Speichert den Inhalt eines HTML Tags plus das Anfangs und End Tag mit allen Angaben Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body a id Verweis href javascript alert this Verweis outerHTML Verweis a body html Erläuterung Das Beispiel enthält einen Verweis der beim Anklicken seinen eigenen vollständigen HTML Konstrukt mit alert ausgibt Die Eigenschaft outerHTML sollten Sie nicht direkt beim Einlesen der HTML Datei anwenden sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button Klicks oder mit einem setTimeout von einigen Sekunden davor Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4 0 einen Laufzeitfehler outerText Speichert den gleichen Wert wie innerText kann jedoch beim Ändern umgebende HTML Tags entfernen und durch Text ersetzen Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Test document all fett outerText document all fett innerText script head body p Text mit b id fett onclick Test fetter Schrift b p body html Erläuterung Das Beispiel enthält einen Text mit einem als fett markierten Teil Beim Anklicken des fetten Teils wird die Funktion Test aufgerufen Diese Funktion ersetzt den Wert von outerText des fetten Elements durch den Wert von innerText des gleichen Elements Der Effekt ist dass die Formatierung mit b b verloren geht weil outerText intern die umgebende HTML Formatierung mit speichert innerText aber nicht Die Eigenschaft outerText sollten Sie nicht direkt beim Einlesen der HTML Datei anwenden sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button Klicks oder mit einem setTimeout von einigen Sekunden davor Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4 0 einen Laufzeitfehler Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft outerText parentElement Speichert das Elternelement eines Elements parentElement ist dabei eine Art Zeiger auf das übergeordnete Element Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all Objekts notieren Diese gelten dann für das Element auf das der Zeiger zeigt Existiert kein Elternelement so hat die Eigenschaft parentElement den Wert null Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body table tr td div a b id Fett Hier etwas Text b a div td tr table script type text javascript var Eltern document all Fett parentElement while Eltern document write Eltern tagName br Eltern Eltern parentElement script body html Erläuterung Im Beispiel ist eine Tabelle notiert in deren einziger Zelle weitere Elemente enthalten sind Das innerste Element ist das Element b b mit dem Namen Fett Im JavaScript Bereich wird der Variablen Eltern das Elternelement des Elementes Fett mit der Eigenschaft parentElement zugewiesen Die nachfolgende while Schleife gibt von jedem Elternelement den Namen des Tags aus Anschließend wird der Variablen Eltern das Elternelement des gerade angesprochenen Elementes zugewiesen Die Schleife bricht ab wenn kein Elternelement mehr existiert So wie im Beispiel die all Objekteigenschaft tagName auf parentElement angewendet wird lassen sich auch alle anderen Eigenschaften und Methoden des all Objekts auf das Element anwenden Im Unterschied zur Eigenschaft offsetParent wird in der Eigenschaft parentElement immer das unmittelbar übergeordnete Element gespeichert Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft parentElement parentTextEdit Speichert das nächsthöhere Element in der Elementhierarchie das Editieren von Text erlaubt Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Test alert document all Verweis parentTextEdit tagName script head body a id Verweis href javascript Test Editieren a body html Erläuterung Das Beispiel enthält einen Verweis Beim Anklicken des Verweises wird die Funktion Test aufgerufen Diese Funktion gibt mit alert den Namen desjenigen HTML Tags aus das aus Sicht des Verweises das nächsthöhere Element darstellt das Editieren von Text erlaubt Im Beispiel ist dies das body Tag Der Inhalt dieses Tags ist zwar nicht editierbar aber es ist dasjenige nächsthöhere Tag unterhalb dessen editierbare Elemente wie Formulareingabefelder notiert werden können Beachten Sie Internet Explorer 5 0 Macintosh Edition interpretiert dieses Beispiel nicht recordNumber Speichert der wie vielte Datensatz angezeigt wird Dies bezieht sich auf das Konzept der Datenanbindung Zur Einführung in das Thema lesen Sie den Abschnitt über Datenanbindung Microsoft Beispiel tr td b Vorname b td td span id Test datafld vorname span input type button value Test onclick alert document all Test recordNumber td tr Erläuterung Das Beispiel stellt eine Tabellenzeile dar in der ein Datenfeld ausgegeben wird Die übrigen Befehle zur Datenanbindung fehlen hier Zu Testzwecken ist ein Button eingefügt bei dessen Anklicken die Datensatznummer des aktuell angezeigten Datensatzes ausgegeben wird sourceIndex Speichert das wievielte HTML Element ein Element innerhalb einer HTML Datei ist Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p Etwas Text mit br Zeilenumbruch p p id Absatz HTML Element aber das wie vielte p a href javascript alert document all Absatz sourceIndex Test a body html Erläuterung Das Beispiel enthält verschiedene Elemente unter anderem einen Absatz mit dem id Namen Absatz Außerdem enthält das Beispiel einen Verweis Beim Anklicken des Verweises wird mit alert ausgegeben das wie vielte Element der Absatz mit besagtem Namen innerhalb der HTML Datei ist Im Beispiel ist es das 7 Element denn es werden alle einleitenden und alleinstehenden HTML Tags der gesamten HTML Datei gezählt tagName Speichert den HTML Tagnamen eines Elements Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body id DieseDatei a href javascript alert document all DieseDatei tagName Test a body html Erläuterung Das Beispiel enthält einen Verweis Beim Anklicken des Verweises wird mit alert der HTML Tagname desjenigen Elements ausgegeben das den id Namen DieseDatei hat Im Beispiel ist es das body Tag Beachten Sie Das Beispiel kann im Safari nicht nachvollzogen werden da dieser das Objekt document all nicht kennt Safari unterstützt jedoch die Eigenschaft tagName In Opera funktioniert das

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


  • SELFHTML: JavaScript / Objektreferenz / String
    in einem Meldungsfenster ausgegeben Wichtig ist vor der Methode fromCharCode immer das feste Schlüsselwort String großgeschrieben zu notieren indexOf Ermittelt das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer Zeichenkette und gibt zurück an wie vielter Stelle das Zeichen in der Zeichenkette steht Die Zählung beginnt bei 0 Wenn die Suche erfolglos ist wird 1 zurückgegeben Optional ist es möglich die Funktion in einem zweiten Parameter anzuweisen ab der wie vielten Stelle in der Zeichenkette sie mit der Suche beginnen soll Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Aussage Der Mensch ist dem Mensch sein Feind var Suche Aussage indexOf Mensch alert gefunden bei Position Suche script body html Erläuterung Im Beispiel belegt eine Variable Aussage mit einem Wert Anschließend wird der Wert dieser Variablen mit indexOf nach dem ersten Vorkommen von Mensch innerhalb der Zeichenkette gesucht In der Variablen Suche wird der Rückgabewert von indexOf gespeichert Im Beispiel wird 4 zurückgegeben da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum ersten Mal an 5 Stelle der Zeichenkette beginnt Vergleiche auch lastIndexOf italics Formatiert eine Zeichenkette kursiv genau wie die HTML Formatierung i i Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Zeit new Date var Uhrzeit Zeit getHours Zeit getMinutes document write Uhrzeit italics script body html Erläuterung Im Beispiel erzeugt mit Hilfe des Date Objekts die aktuelle Uhrzeit und speichert diese in der Variablen Uhrzeit Mit Hilfe von document write wird der Wert von Uhrzeit in die Datei geschrieben Die Formatierung dabei entspricht der HTML Formatierung i i lastIndexOf Ermittelt das letzte Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer Zeichenkette und gibt zurück an wie vielter Stelle das Zeichen in der Zeichenkette steht Die Zählung beginnt bei 0 Wenn die Suche erfolglos ist wird 1 zurückgegeben Optional ist es möglich die Funktion in einem zweiten Parameter anzuweisen ab der wie vielten Stelle in der Zeichenkette sie mit der Suche beginnen soll Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Aussage Der Mensch ist dem Mensch sein Feind var Suche Aussage lastIndexOf Mensch alert gefunden bei Position Suche script body html Erläuterung Im Beispiel belegt eine Variable Aussage mit einem Wert Anschließend wird der Wert dieser Variablen mit lastIndexOf nach dem letzten Vorkommen von Mensch innerhalb der Zeichenkette gesucht In der Variablen Suche wird der Rückgabewert von lastIndexOf gespeichert Im Beispiel wird 19 zurückgegeben da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum letzten Mal an 20 Stelle der Zeichenkette beginnt Vergleiche auch indexOf link Formatiert eine Zeichenkette als Verweis Hat den gleichen Effekt wie die HTML Formatierung a href a Erwartet als Parameter einen URI für das Verweisziel Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p script type text javascript var Homepage zu meiner Homepage document write Homepage link home htm script p p script type text javascript document write document referrer link document referrer script p body html Erläuterung Das Beispiel im ersten Script belegt zunächst eine Variable Homepage mit einem Wert Daran anschließend wird mit document write ein Verweis geschrieben Dazu wird die Methode link auf die Variable Homepage angewendet Der Wert von Homepage wird dabei der Verweistext Als Parameter wird das gewünschte Verweisziel übergeben im Beispiel die Datei home htm Das Beispiels im zweiten Script erzeugt dynamisch einen Verweis zu der Adresse von wo aus der Anwender die aktuelle Seite aufgerufen hat Dabei liefert die Eigenschaft document referrer die Adresse der Herkunftsseite Das Beispiel ist so konstruiert dass hinterher die Adresse von document referrer sowohl das Verweisziel als auch der Verweistext ist match Durchsucht eine Zeichenkette mit Hilfe eines regulären Ausdrucks Liefert Zeichenfolgen auf die der reguläre Ausdruck passt zurück Erwartet als Parameter den regulären Ausdruck Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Aussage Der Mensch ist des Menschen sein Feind var Ergebnis Aussage match Mensch S 2 alert Test 1 Ergebnis script script type text javascript Aussage Der Mensch ist des Menschen sein Feind Ergebnis Aussage match bMensch b bMenschen b g if Ergebnis for var i 0 i Ergebnis length i alert Test 2 Fund i Ergebnis i script script type text javascript Aussage Wir wollen weisse Waesche waschen Ergebnis Aussage match w gi if Ergebnis alert Test 3 Ergebnis length gefunden script body html Erläuterung Das erste Script Test 1 im Beispiel belegt eine Variable Aussage mit einem Wert Auf den gespeicherten Wert dieser Variablen wird mit match ein regulärer Ausdruck angewendet Dieser findet die Zeichenfolge Mensch wenn noch zwei weitere Zeichen folgen aber nicht wenn ein Leerzeichen dabei ist Auf diese Weise wird nur das hintere Wort Menschen gefunden Das Ergebnis wird in einem Meldungsfenster ausgegeben Das zweite Script Test 2 im Beispiel wendet auf den gespeicherten Wert der Variablen Aussage mit match ein anderen regulären Ausdruck an Dieser findet die Zeichenfolge Mensch oder die Zeichenfolge Menschen Hinter dem Ausdruck ist außerdem mit g markiert dass global gesucht werden soll Dadurch werden alle Fundstellen zurückgegeben Da es sich um mehrere Fundstellen handeln kann ist der zurückgegebene Wert kein einfacher Wert sondern ein Array aus Werten Die Variable Ergebnis in der der Rückgabewert im Beispiel gespeichert wird muss deshalb anschließend als Array behandelt werden Das Array Objekt wird jedoch nur erzeugt wenn es Suchtreffer gibt Deshalb ist es sicherer folgende Anweisungen von der Abfrage abhängig zu machen ob das Objekt existiert Mit if Ergebnis ist eine solche Abfrage möglich Im Beispiel werden dann in einer for Schleife alle Suchtreffer ausgegeben Das dritte Script Test 3 im Beispiel belegt die Variable Aussage mit einem neuen Wert in dem der Buchstabe w oft vorkommt mal klein und mal großgeschrieben Auf den gespeicherten Wert dieser Variablen wird mit match ein regulärer Ausdruck angewendet Dieser sucht nach dem Vorkommen von w und zwar wieder wie im zweiten Script global Es werden also alle Fundstellen als Array

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

  • SELFHTML: JavaScript / Objektreferenz / anchors
    Beispiel 3 Diese Art ist eine zu Schema 2 äquivalente Schreibweise denn in JavaScript ist das Ansprechen von Unterobjekten über objekt unterobjekt gleichwertig zu objekt unterobjekt Notieren Sie wie beim Ansprechen mit Indexnummer hinter document anchors eckige Klammern Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen den Sie bei der Definition des Verweisankers im einleitenden a Tag im name Attribut angegeben haben Diese Schreibweise ist vor allem zum Zugriff auf Anker nützlich deren Namen Sonderzeichen enthalten welche den Zugriff nach Schema 2 unmöglich machen Sie können zwischen den eckigen Klammern auch eine String Variable notieren die den Ankernamen enthält Beachten Sie Gemäß dem HTML spezifischen DOM greift z B document anchors Ankername auf das a Elementobjekt zu das den Anker bildet Neben den hier beschriebenen Eigenschaften können Sie auf diese Art weitere Eigenschaften und Methoden nutzen die in der Referenz zum a Elementobjekt aufgelistet sind Im Internet Explorer ist es nicht möglich mit dem Schema 2 und 3 auf einen Verweisanker zuzugreifen Sie können aber jeden Anker über das all Objekt und dessen Eigenschaften ansprechen z B document all Ankername und document all Ankername In neueren Internet Explorer Versionen steht zudem die Methode document getElementsByName aus dem HTML spezifischen DOM zur Verfügung name Speichert den Namen eines Verweisankers Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 a name goethe Meine Wahl a h1 pre Ich liebe mir den heiteren Mann Am meisten unter meinen Gästen Wer sich nicht selbst zum besten haben kann der ist gewiss nicht von den Besten pre p a href javascript alert document anchors 0 name Der Ankername a p body html Erläuterung Mit document anchors 0 name können Sie den Namen eines Verweisankers in einer HTML Datei ermitteln Das Beispiel enthält zunächst HTML Text mit einem Anker und einen Verweis Beim Anklicken wird mit alert der Name des Verweises ausgegeben Beachten Sie Gegenwärtig ist es nur im Netscape 6 1 möglich den Namen eines Ankers zu ändern length Speichert wie viele Verweisanker eine HTML Datei enthält Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 a name oben Anfang a h1 Am Anfang war naja seien wir ehrlich wir wissen es nicht h2 a name mitte Weisheit a h2 Wem das Wasser bis zum Halse steht der darf den Kopf nicht haengen lassen h2 a name unten Ende a h2 script type text javascript document write Gefunden wurden document anchors length Anker script body html Erläuterung Mit document anchors length können Sie die Anzahl der Verweisanker in einer HTML Datei ermitteln Das Beispiel enthält zunächst HTML Text mit einigen Ankern und schreibt am Ende mit document write dazu wie viele Anker in der Datei gefunden wurden text Speichert den Text eines Verweisankers Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 a name oben Steuer a h1 Der Mensch im gesellschaftlichen Leben kann sein Gut nicht genießen ohne es mit dem Staat zu teilen h2 a name

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

  • SELFHTML: JavaScript / Objektreferenz / navigator
    und Mozilla Firefox identifizieren sich als Netscape appVersion Speichert die Version des Browsers den der Anwender verwendet Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript if navigator appVersion substring 0 1 4 alert Oh ein Browser der 4 Generation script head body body html Erläuterung Das Beispiel fragt ab ob das erste Zeichen aus dem Wert der in navigator appVersion gespeichert ist eine 4 ist Wenn ja wird eine Meldung ausgegeben Der Wert von navigator appVersion umfasst mehr als nur die reine Produktversion Netscape 4 01 liefert z B folgenden Wert 4 01 en Win95 I der Internet Explorer 4 0 liefert z B 4 0 compatible MSIE 4 0 Windows 95 Um Teile aus einer solchen Zeichenkette zu extrahieren wie im Beispiel mit der Methode substring lesen Sie den Abschnitt über das string Objekt Beachten Sie Unter Opera kann der Anwender frei wählen wie sich der Browser identifiziert Auch im Mozilla Firefox Safari und im Konqueror ist es möglich diese Angabe zu manipulieren Damit können je nach Nutzereinstellung auch in dieser Eigenschaft beliebige und eventuell unrealistische Werte gespeichert sein cookieEnabled Speichert ob der Nutzer das Setzen von Cookies erlaubt Sind diese erlaubt so enthält die Eigenschaft true sonst false Nicht geprüft werden kann mit dieser Eigenschaft ob der Nutzer vor dem Speichern eine Warnmeldung erhält In diesem Fall ist in der Eigenschaft ebenfalls true gespeichert Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript if navigator cookieEnabled true document write Cookies erlaubt else if navigator cookieEnabled false document write Cookies verboten else document write Verrate ich nicht script body html Erläuterung Das Beispiel wird gefragt ob der Nutzer Cookies erlaubt Ist das der Fall wird mit der write Methode eine entsprechende Information ausgegeben Sind keine Cookies verfügbar wird gefragt ob Cookies verboten sind Browser die cookieEnabled kennen und keine Cookies erlauben folgen dem if Zweig der Anweisung Browser die diese Eigenschaft nicht kennen geben den Text Verrate ich nicht aus language Speichert die Sprache der Benutzerführung des Browsers den der Anwender verwendet Die Sprache wird dabei mit den international üblichen Abkürzungen gespeichert z B en für englisch oder de für deutsch Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript if navigator language indexOf en 1 document write dear visitor welcome on our pages else if navigator language indexOf de 1 document write Sehr geehrter Besucher willkommen auf unseren Seiten script body html Erläuterung Das Beispiel ermittelt welche Benutzersprache der Browser des Anwenders verwendet Wenn es englisch ist wird mit der write Methode ein englischer Begrüßungstext in die HTML Datei geschrieben wenn es deutsch ist ein deutscher Begrüßungstext Beachten Sie Im Internet Explorer heißt diese Eigenschaft navigator browserLanguage Safari 1 0 identifiziert sich trotz deutscher Benutzerführung als englisch in späteren Versionen ist dies korrekt platform Speichert auf welchem Betriebssystemtyp der Browser läuft den der Anwender verwendet Beispiel Anzeigebeispiel So sieht s aus html head title Test

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

  • SELFHTML: JavaScript / Objektreferenz / node
    b Knoten nodeName b script body html Erläuterung Das Beispiel enthält im sichtbaren Dokumentbereich nichts weiter als ein JavaScript das den Knotennamen des eigenen script Elements ausgibt also SCRIPT Dazu greift das Script mit document body firstChild auf das script Element zu Dessen Knoten wird in der Variablen Knoten gespeichert Mit Knoten nodeName wird dann der Name dieses Knotens ermittelt Elementknoten und Attributknoten haben Namen Textknoten jedoch nicht Beim Versuch den Namen eines Textknotens zu ermitteln wird der Wert text gespeichert Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten nodeType Speichert den Typ eines Knotens in Form einer Nummer Das W3 Konsortium hat dazu folgende Zuordnungen festgelegt einige davon sind XML spezifisch Nummer Knotentyp 1 Elementknoten 2 Attributknoten 3 Textknoten 4 Knoten für CDATA Bereich 5 Knoten für Entity Referenz 6 Knoten für Entity 7 Knoten für Verarbeitungsanweisung 8 Knoten für Kommentar 9 Dokument Knoten 10 Dokumenttyp Knoten 11 Dokumentfragment Knoten 12 Knoten für Notation Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p align center ein kleiner Text p script type text javascript var Element document getElementsByTagName p 0 var Ausrichtung Element getAttributeNode align alert Ausrichtung nodeType script body html Erläuterung Das Beispiel enthält einen Textabsatz mit einem align Attribut zur Ausrichtung Unterhalb des Textabsatzes ist ein JavaScript Bereich notiert Dort wird mit document getElementsByTagName p 0 auf das p Element zugegriffen Mit Element getAttributeNode align wird auf dessen Attributknoten zugegriffen In der Variablen Ausrichtung steht anschließend das Objekt des Attributknotens Ein Meldungsfenster gibt dann im Beispiel den Knotentyp dieses Knotens mit Ausrichtung nodeType aus Der Wert beträgt 2 da es sich um einen Attributknoten handelt Beachten Sie Der Internet Explorer 5 x interpretiert die Eigenschaft nodeType zwar in Version 5 5 aber nicht das obige Beispiel Der Grund ist dass er die Methode getAttributeNode nicht unterstützt Im Internet Explorer 6 0 und im Internet Explorer 5 0 Macintosh Edition ist das Beispiel dagegen nachvollziehbar nodeValue Speichert den Wert oder Inhalt eines Knotens Bei Textknoten ist dies der Text bei Attributknoten der zugewiesene Attributwert Bei Elementknoten hat diese Eigenschaft den Wert null Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function TextAendern document getElementById derText firstChild nodeValue document Formular neuerText value script head body p id derText Hier steht ein Text p form name Formular action onsubmit TextAendern return false input type text size 40 name neuerText input type submit value OK form body html Erläuterung In dem Beispiel ist ein Textabsatz notiert und unterhalb davon ein Formular mit einem Eingabefeld und einem Klick Button Beim Absenden des Formulars wird die Funktion TextAendern aufgerufen die im Dateikopf notiert ist Diese Funktion greift mit document getElementById derText auf das p Element zu weiterhin mit firstChild auf den ersten Kindknoten dieses Elements also den Textinhalt und weist dessen Eigenschaft nodeValue den Inhalt aus dem Eingabefeld des Formulars zu Beachten Sie Das Beispiel zeigt dass nodeValue eine ähnliche Funktionalität hat wie das die Eigenschaft innerText beim klassischen DHTML nach Microsoft Syntax Dennoch gibt es Unterschiede Wenn beispielsweise notiert wäre p Text mit b fettem Text b p Dann würde firstChild nodeValue aus Sicht des p Elements nur den Wert Text mit liefern und auch nur diesen Teil ändern können da dahinter durch das innere b Element ein neuer Knoten beginnt Eine direkte Entsprechung zu innerHTML gibt es erst recht nicht im DOM Inneres HTML muss im DOM mit Hilfe geeigneter Methoden wie document createElement document createAttribute und document createTextNode erzeugt werden parentNode Speichert den Elternknoten eines Knotens Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body ul li ein Punkt li li ein zweiter li ul script type text javascript alert document getElementsByTagName li 0 parentNode parentNode tagName script body html Erläuterung Das Beispiel enthält eine Aufzählungsliste Unterhalb davon ist ein JavaScript Bereich notiert Dort wird der Name des Großelternelements des ersten li Elements in einem Meldungsfenster ausgegeben Dazu wird mit document getElementsByTagName li 0 auf das erste li Element zugegriffen Das erste parentNode dahinter greift auf dessen Elternelement zu und das zweite parentNode auf das Elternelement des Elternelements Von diesem Element wird mit tagName der Name des Elementes ermittelt und ausgegeben Das Attribut tagName kennen alle Knoten der Art Element Ausgegeben wird im Beispiel BODY previousSibling Speichert aus Sicht eines Knotens den unmittelbar vorhergehenden Knoten im Strukturbaum Wenn kein Knoten vorausgeht wird null gespeichert Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body id Dokumentinhalt onload alert document getElementById Dokumentinhalt previousSibling nodeName body html Erläuterung Das Beispiel gibt nachdem das Dokument geladen ist onload in einem Meldungsfenster den Knotennamen des Vorgängerknotens vom body Element aus Dazu wird mit document getElementById Dokumentinhalt auf das body Element zugegriffen Ausgegeben wird dann HEAD da das head Element im Sinne des Strukturbaums das unmittelbare Vorgängerelement des body Elements ist Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten appendChild Hängt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein und zwar so dass er als letztes Kindelement eines anzugebenden Knotens eingefügt wird Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body ol id Liste li Element li ol script type text javascript document getElementById Liste removeChild document getElementById Liste firstChild for var i 0 i 10 i var newLI document createElement li var liNummer i 1 var newLIText document createTextNode Das ist Listeneintrag Nummer liNummer document getElementById Liste appendChild newLI document getElementsByTagName li i appendChild newLIText script body html Erläuterung Das Beispiel füllt eine nummerierte Liste automatisch mit Daten Unmittelbar nach dem Einlesen der nummerierten Liste folgt ein JavaScript Bereich Zuerst wird mit der Methode removeChild das vorhandene Listenelement entfernt Anschließend ist eine for Schleife notiert die 10 mal durchlaufen wird Bei jedem Schleifendurchgang wird zunächst mit document createElement ein neues Element vom Typ li erzeugt Dann wird eine Variable liNummer auf einen Wert gesetzt der um 1 höher ist als der des Schleifenzählers i Diese Variable wird in der nachfolgenden Anweisung benutzt bei der mit document createTextNode ein neuer Textknoten erzeugt wird Anschließend folgen immer noch innerhalb der for Schleife zwei appendChild Aufrufe Die erste der Anweisungen greift mit document getElementById Liste auf das ol Element zu und führt dazu dass diesem ein neues Kindelement am Ende hinzugefügt wird Angehängt wird der zuvor neu erzeugte Elementknoten newLI der ja ein neues li Element speichert Beim zweiten Aufruf wird der Schleifenzähler i benutzt um mit document getElementsByTagName li i auf das gerade neu erzeugte li Element zuzugreifen Ihm wird mit appendChild der zuvor erzeugte Textknoten als Kindelement hinzugefügt Auf diese Weise füllt sich die Liste bei jedem Schleifendurchlauf um ein neues li Element mitsamt Zeicheninhalt appendData Fügt einem Textknoten oder dem Wert eines Attributknotens am Ende Daten hinzu ohne die bestehenden Daten zu überschreiben Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function ergaenzen var Rest document createTextNode vollkommen document getElementById Absatz firstChild appendData Rest nodeValue script head body p id Absatz Ich bin ja so un p p a href javascript ergaenzen un was a p body html Erläuterung Das Beispiel enthält einen Absatz mit nicht ganz sinnigem Text und unterhalb davon einen Verweis Beim Anklicken des Verweises wird die Funktion ergaenzen aufgerufen die im Dateikopf notiert ist Diese Funktion erzeugt zunächst mit document createTextNode einen neuen Textknoten Anschließend greift sie mit document getElementById Absatz firstChild auf den Knoten zu der den Zeicheninhalt des Textabsatzes mit dem unfertigen Text darstellt und fügt dort mit appendData den Wert des neu erzeugten Textknotens Rest nodeValue hinzu Aus dem Text ich bin ja so un wird also ich bin ja so unvollkommen Beachten Sie Der Internet Explorer 5 x unterstützt diese Methode noch nicht Sie können sich damit behelfen auf den Inhalt eines Textknotens zuzugreifen und dann mit nodeValue Text Daten hinzuzufügen Im Internet Explorer 6 0 und im Internet Explorer 5 0 Macintosh Edition wird die Methode dagegen unterstützt cloneNode Erstellt eine identische Kopie eines Knotens je nach Wunsch mit oder ohne zugehörige Unterknotenstruktur Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body span id Dolly Dolly span script type text javascript Dolly2 document getElementById Dolly cloneNode true document getElementById Dolly firstChild nodeValue Dolly2 firstChild nodeValue script body html Erläuterung Das Beispiel enthält einen in einem span Element notierten Text Dolly Unterhalb davon ist ein JavaScript Bereich notiert Dort wird mit document getElementById Dolly auf das span Element zugegriffen Dieses wird mit cloneNode kopiert und der Rückgabewert wird in der Variablen Dolly2 gespeichert Der Rückgabewert ist eine identische Kopie des Elementknotens des span Elements Als Parameter wird der Methode im Beispiel true übergeben Das bedeutet dass auch der Textinhalt des Elements mitkopiert wird Um nur das Element ohne den Inhalt zu klonen müssen Sie false übergeben Im Beispiel wird anschließend mit document getElementById Dolly firstChild nodeValue der Inhalt des span Elements angesprochen und mittels Zeichenkettenoperation um den Wert des Kindelements des Klons erweitert auf den mit Dolly2 firstChild nodeValue zugegriffen wird Am Ende steht also Dolly Dolly als Inhalt in dem span Element deleteData Löscht Daten eines Textknotens oder den Wert eines Attributknotens Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function loeschen var AnzahlZeichen document getElementsByTagName p 0 firstChild nodeValue length document getElementsByTagName p 0 firstChild deleteData 0 AnzahlZeichen script head body p Die Beredtsamkeit an sich ist die Tugend des Redens und die Lust des Schweigens an seinem Gegenteil Die Beredtsamkeit ist also a href javascript loeschen och nee besser nicht a p body html Erläuterung Das Beispiel enthält einen Textabsatz mit Text und einem Verweis Beim Anklicken des Verweises wird die Funktion loeschen aufgerufen die im Dateikopf notiert ist Diese Funktion ermittelt zunächst durch Zugriff auf den Zeicheninhalt des Absatzes document getElementsByTagName p 0 firstChild nodeValue mit der Methode string length dessen Zeichenanzahl Der Wert wird für die folgende Anweisung benötigt Dort wird wieder mit document getElementsByTagName p 0 firstChild auf den Zeicheninhalt des Absatzes zugegriffen Mit deleteData wird der Inhalt gelöscht Die Methode deleteData erwartet zwei Parameter 1 das Zeichen ab dem gelöscht werden soll 0 steht für ab dem ersten Zeichen 2 wie viele Zeichen gelöscht werden sollen im Beispiel wird dazu die Variable AnzahlZeichen übergeben in der die zuvor ermittelte Anzahl der Zeichen im Textknoten gespeichert ist Der Verweis im Beispiel bleibt übrigens nach dem Löschen stehen weil das a Element des Verweises schon wieder einen neuen Kindknoten darstellt Beachten Sie Der Internet Explorer 5 x unterstützt diese Methode noch nicht Um die gesamten Zeichendaten eines Textknotens zu löschen können Sie sich damit behelfen auf den Knoten zuzugreifen und der Eigenschaft nodeValue den Wert leere Zeichenkette zuzuweisen Im Internet Explorer 6 0 und im Internet Explorer 5 0 Macintosh Edition wird die Methode dagegen unterstützt getAttribute Ermittelt den Wert eines bestimmten Attributs in einem Element Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Anzeigen attr alert document body getAttribute attr script head body bgcolor FFFFCC text E00000 link 0000E0 alink 000080 vlink 000000 a href javascript Anzeigen bgcolor Hintergrundfarbe a br a href javascript Anzeigen text Textfarbe a br a href javascript Anzeigen link Linkfarbe noch nicht besuchte Seiten a br a href javascript Anzeigen vlink Linkfarbe besuchte Seiten a br a href javascript Anzeigen alink Linkfarbe aktivierte Links a body html Erläuterung Das Beispiel enthält mehrere Verweise Alle Verweise rufen beim Anklicken die Funktion Anzeigen auf die im Dateikopf notiert ist Übergeben wird der Funktion der gewünschte Attributname Die Funktion greift mit document body auf das body Element zu Mit getAttribute lassen sich dann Attributwerte des einleitenden body Tags ermitteln Die Methode erwartet den Namen des gewünschten Attributs und liefert dessen Wert zurück Im Beispiel bekommt sie jeweils den der Funktion übergebenen Parameter attr weitergereicht getAttributeNode Holt einen Attributknoten Liefert das Knotenobjekt des gewünschten Attributs zurück Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function anpassen var CSSKnoten document getElementsByTagName h1 0 getAttributeNode style for var i 0 i document getElementsByTagName p length i var CSSKnotenNeu CSSKnoten cloneNode true document getElementsByTagName p i setAttributeNode CSSKnotenNeu script head body h1 style font family Tahoma font size 200 color red Rot und Groß h1 p ein Absatz p p und noch einer p p und einer mit einem a href javascript anpassen Link zum Anpassen a p body html Erläuterung Das Beispiel enthält eine Überschrift mit einem style Attribut sowie drei Textabsätze Der letzte davon enthält einen Verweis bei dessen Anklicken die Funktion anpassen aufgerufen wird die im Dateikopf notiert ist Diese Funktion holt sich mit document getElementsByTagName h1 0 getAttributeNode style den das Knotenobjekt des style Elements aus der Überschrift Der Rückgabewert also das Attributknoten Objekt wird in der Variablen CSSKnoten gespeichert Anschließend wird in einer for Schleife auf alle p Elemente des Dokuments zugegriffen Bei jedem Schleifendurchlauf wird mit cloneNode eine Kopie des Attributknotens erzeugt und mit setAttributeNode dem jeweils aktuellen p Element hinzugefügt Die p Elemente erben auf diese Weise die CSS Eigenschaften der Überschrift Beachten Sie Die Methode getAttributeNode werden Sie selten brauchen In den meisten Fällen können Sie getAttribute verwenden das sich einfacher handhaben lässt und auch vom Internet Explorer besser unterstützt wird Opera unterstützt die Methode getAttributeNode bereits in Version 7 Dieser Browser hat jedoch spezielle Probleme beim Auslesen von style Attributknoten Im Beispiel enthält CSSKnoten zwar einen style Attributknoten dieser hat aber keinen Attributwert sodass die Schleife leere Attribute setzt Erst Opera 8 interpretiert das Beispiel korrekt getElementsByTagName Diese Methode entspricht der gleichnamigen Methode beim document Objekt bezieht sich jedoch nicht auf das ganze Dokument sondern nur auf einen bestimmten Elementknoten Sie liefert einen Array mit allen Elementknoten eines bestimmten Namens zurück die sich innerhalb des Elements befinden Erwartet als Parameter den Namen der gesuchten Elemente als String z B h1 oder a Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h2 Erster Bereich h2 p erster Absatz p p zweiter Absatz p div id bereich h2 Zweiter Bereich h2 p dritter Absatz p p vierter Absatz p div h2 Dritter Bereich h2 p erster Absatz p p zweiter Absatz p script type text javascript var bereich document getElementById bereich var absaetze bereich getElementsByTagName p var ueberschriften bereich getElementsByTagName h2 for var i 0 i ueberschriften length i ueberschriften i style color blue for i 0 i absaetze length i absaetze i style color red script body html Erläuterung Im Beispiel sind verschiedene Überschriften und Absätze notiert von denen eine Überschrift und zwei Absätze in einem div Element mit der ID bereich liegen Im Folgenden sollen alle Überschriften und Absätze innerhalb dieses div Elements angesprochen und umformatiert werden Zunächst wird über document getElementById das div Element angesprochen und der zurückgegebene Elementknoten in der Variable bereich gespeichert Dadurch können wir später mehrmals darauf zuzugreifen ohne getElementById mehrmals ausführen zu muss In den nächsten beiden Zeilen wird die Methode getElementsByTagName des div Elementknotens aufgerufen einmal mit p und einmal mit h2 Diese Aufrufe geben jeweils Arrays mit allen p bzw h2 Elementen innerhalb des div Elements zurück Diese Arrays werden der Einfachheit halber in den Variablen absaetze und ueberschriften gespeichert da später mehrfach auf sie zugegriffen wird Zuletzt werden beide Arrays mit for Schleifen durchlaufen Über ueberschriften i bzw absaetze i werden die einzelnen Elementknoten im Array angesprochen Mithilfe des style Objekts wird die Textfarbe bei der Überschrift auf blau und bei den Absätzen auf rot gesetzt hasChildNodes Ermittelt ob ein Knoten Kindknoten unter sich hat Gibt den booleschen Wert true zurück wenn ja und false wenn nein Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p p p mit Inhalt p p p p mit Inhalt p script type text javascript for var i 0 i document getElementsByTagName p length i if document getElementsByTagName p i hasChildNodes document write i 1 p Element hat einen Inhalt br script body html Erläuterung Das Beispiel enthält vier Textabsätze Zwei davon haben einen Zeicheninhalt zwei andere sind leer Unterhalb der Textabsätze ist ein JavaScript notiert Dieses greift in einer for Schleife der Reihe nach mit document getElementsByTagName p auf alle p Elemente des Dokuments zu Dabei wird mit if document getElementsByTagName p i hasChildNodes abgefragt ob das jeweils aktuell in der Schleife behandelte p Element Kindknoten hat Wenn ja wird mit document write ins Dokument geschrieben beim wie vielten Element ein Kindknoten gefunden wurde Im Beispiel ist das beim zweiten und vierten Element der Fall da diese beiden Elemente Textknoten enthalten insertBefore Fügt innerhalb eines Knotens einen Kindknoten vor einem anderen Kindknoten ein Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body p id derText Text i id derKursiveText und mit kursivem Text i p script type text javascript var neuB document createElement b var neuBText document createTextNode mit fettem Text neuB appendChild neuBText document getElementById derText insertBefore neuB document getElementById derKursiveText script body html Erläuterung Das Beispiel enthält einen Textabsatz mit Text und einem Kindelement i i Unterhalb des Absatzes ist ein JavaScript Bereich notiert Darin wird zunächst mit document createElement ein neues Element des Typs b für fetten Text erzeugt Anschließend wird mit document createTextNode ein Textknoten erzeugt der dann mit appendChild als Inhalt des neu erzeugten b Elements eingefügt wird Der ganze Komplex aus b Element mit Inhalt ist dann in der Variablen neuB gespeichert Mit document getElementById derText greift das Script sodann auf das p Element zu und fügt mit insertBefore das neue Element vor dem anderen Kindelement ein das die Id derKursiveText hat Am Ende lautet der komplette Inhalt des p Elements dann Text b mit fettem Text b i und mit kursivem Text i Die Methode insertBefore erwartet also zwei Parameter 1 der neu einzufügende Kindknoten 2 ein Kindknoten vor dem der neue Kindknoten eingefügt werden soll Wenn Sie einen Knoten nach einem bestimmten Kindknoten einfügen wollen können Sie dazu ebenfalls insertBefore verwenden Geben Sie dazu als zweiten Parameter den Kindknoten an der

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

  • SELFHTML: JavaScript / Objektreferenz / applets
    mit Namen des Java Applets als Indexnamen wie in Schema 3 Diese Art ist eine zu Schema 2 äquivalente Schreibweise denn in JavaScript ist das Ansprechen von Unterobjekten über objekt unterobjekt gleichwertig zu objekt unterobjekt Notieren Sie wie beim Ansprechen mit Indexnummer hinter document applets eckige Klammern Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen den Sie bei der Definition des Java Applets im einleitenden applet Tag im Attribut name angegeben haben Diese Schreibweise ist vor allem zum Zugriff auf Java Applets nützlich deren Namen Sonderzeichen enthalten welche den Zugriff nach Schema 2 unmöglich machen Sie können zwischen den eckigen Klammern auch eine String Variable notieren die den Ankernamen enthält mit dem Namen des Java Applets direkt wie in Schema 4 Dabei geben Sie mit document AppletName den Namen an den Sie bei der Definition des Java Applets im einleitenden applet Tag im Attribut name angegeben haben Beachten Sie Gemäß dem HTML spezifischen DOM greift z B document applets Ankername auf das applet bzw object Elementobjekt zu mit dem das Applet eingebunden ist Auf diese Weise können Sie verschiedene Eigenschaften des Elementobjekts ansprechen und nutzen die in der Referenz zum applet Elementobjekt und object Elementobjekt aufgelistet sind Zugriff auf Code in Java Applets Sie können direkt auf den Code eines laufenden Java Applets zugreifen Dazu müssen Sie jedoch den Quellcode des Java Applets kennen Dateien java vor dem Compilieren mit dem Java Compiler Das folgende Beispiel zeigt das Prinzip Nähere Informationen zur Vorgehensweise und zum Konzept des lebendigen Drahts LiveWire zwischen JavaScript und Java finden Sie auf den Entwicklerseiten von Netscape archivierte Version Anmerkung AOL als Besitzer von Netscape hat den Originalserver im Oktober 2004 abgeschaltet Im Februar 2005 schloss die Mozilla Foundation mit AOL eine Vereinbarung um die Inhalte bald wieder verfügbar zu machen Bis dahin führt dieser Link zu einer Ende 2003 archivierten Version Beispiel Teil 1 Quellcode eines Java Applets Anzeigebeispiel So sieht s aus import java awt Graphics import java applet Applet public class HelloWorld extends Applet String myString Das ist mein Hallo Text public void paint Graphics g g drawString myString 25 20 public void setString String aString myString aString repaint Beispiel Teil 2 HTML Datei mit Java Applet und JavaScript Zugriff Anzeigebeispiel So sieht s aus html head title Test title head body applet code HelloWorld name Hallo width 200 height 25 applet br form name Eingabe action input type text name Text input type button value Test onclick document Hallo setString document Eingabe Text value form body html Erläuterung Im ersten Teil des Beispiels finden Sie den Quellcode eines Java Applets das einen Text am Bildschirm ausgibt Auf den Quellcode wird hier nicht näher eingegangen Achten Sie lediglich auf die letzte Methode die in dem Quelltext definiert wird public void setString String aString Damit wird der definierte Text letztendlich am Bildschirm ausgegeben Im zweiten Teil des Beispiels wird angenommen dass der Quellcode aus dem ersten Teil des Beispiels mit dem Java Compiler zu einem Java Applet mit dem Namen HelloWorld class

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

  • SELFHTML: JavaScript / Objektreferenz / Function
    document write Typ HTMLListe ol eins zwei drei script body html Das Beispiel schreibt dynamisch eine HTML Liste entweder als Aufzählungsliste oder als nummerierte Liste in die Datei Dies geschieht in einer Funktion namens HTMLListe Unterhalb der Funktion steht der Aufruf der Funktion Dabei werden vier Parameter übergeben Die Funktion HTMLListe erwartet jedoch nur einen Parameter nämlich den Parameter Typ Dabei sollte man ul oder ol übergeben Abhängig davon erzeugt die Funktion eine Aufzählungsliste oder eine nummerierte Liste Innerhalb der Funktion wird jedoch mit HTMLListe arguments length die tatsächliche Anzahl der übergebenen Elemente abgefragt Die Funktion nimmt an dass alle Parameter ab dem zweiten Elemente der gewünschten Liste sind Die Funktion schreibt mit document write Befehlen die entsprechenden Listenpunkte und setzt dabei reihenweise die übergebenen Parameter ein da diese Aktion innerhalb einer for Schleife erfolgt arguments Speichert die Argumente die einer Funktion übergeben wurden in einem Array also einer Kette von Elementen Jedes Element stellt ein Argument dar Die Eigenschaft ist nur innerhalb der Funktion verfügbar auf die sie sich bezieht Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript function Test Name Vorname document write Funktion bekam Test arguments length Argumente for var i 0 i Test arguments length i document write BR Test arguments i Test Muenz Stefan script body html Erläuterung Das Beispiel definiert eine Funktion Test die zwei Parameter übergeben bekommt Die Funktion schreibt dynamisch in die HTML Datei wie viele Parameter sie erwartet und danach in einer for Schleife welche Werte übergeben wurden Mit Funktionsname arguments length ermitteln Sie die Anzahl der tatsächlich übergebenen Parameter nicht die Anzahl der erwarteten Parameter Mit Funktionsname arguments 0 sprechen Sie den Wert des ersten übergebenen Parameters an mit Funktionsname arguments 1 den des zweiten Parameters usw Beachten Sie Seit dem

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

  • SELFHTML: JavaScript / Objektreferenz / Array
    neu erzeugten Array eine Art Zeiger auf dieses Objekt gespeichert Das bedeutet wird das Objekt geändert so ändert sich auch der von der Methode concat erzeugte Array Sind in den verknüpften Arrays jedoch Zahlen und Zeichenketten enthalten so wird von diesen Werten eine Kopie erzeugt Nachträgliche Änderungen haben dann keinen Einfluss auf den von der Methode concat erzeugten Array Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Zahlen new Array 1 2 var mehrZahlen new Array Zahlen 3 4 var AndereZahlen new Array 5 6 7 ZahlenGesamt mehrZahlen concat AndereZahlen alert ZahlenGesamt Zahlen 0 70 alert Zahlen Zahlen AndereZahlen 0 70 alert AndereZahlen AndereZahlen alert ZahlenGesamt ZahlenGesamt script head body body html Erläuterung Im Beispiel wurden drei Arrays angelegt Das erste Element im Array mehrZahlen ist dabei der Array Zahlen Damit ist im Array mehrZahlen ein Objekt vom Typ Array gespeichert Mit der Methode concat wird an den Array mehrZahlen der Array AndereZahlen angehängt In der Variablen ZahlenGesamt ist dann ein Array mit den Elementen 1 2 3 4 5 6 7 gespeichert Im nachfolgenden Scriptteil erhalten die ersten Elemente der Arrays Zahlen und AndereZahlen jeweils den Wert 70 Beide Arrays werden auch richtig geändert wie die Kontrollausgabe mittels eines Meldungsfensters zeigt Im von der Methode concat erzeugten Array ZahlenGesamt sind jetzt die Werte 70 2 3 4 5 6 7 gespeichert Das letzte Meldungsfenster zeigt dies an Die Änderung des Arrays Zahlen wurde also übernommen die Änderung im Array AndereZahlen dagegen nicht Der Grund ist dass der Array Zahlen als Objekt im Array mehrZahlen enthalten war und deshalb jede Änderung übernommen wird Die Werte des Arrays AndereZahlen waren dagegen vom Typ Zahl und es wurde lediglich eine Kopie angelegt Nachträgliche Änderungen bleiben damit wirkungslos join Verwandelt einen Array in eine Zeichenkette Erwartet als Parameter ein oder mehrere Trennzeichen durch das die die Array Einträge in der Zeichenkette voneinander getrennt sein sollen Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Zahlen new Array 1 2 4 8 16 32 64 128 256 var Zahlenkette Zahlen join alert Zahlenkette script head body body html Erläuterung Das Beispiel definiert einen Array mit 9 Zahlen Dann wird die Methode join auf die Variable Zahlen angewendet in der der Array gespeichert ist Dabei wird im Beispiel ein Leerzeichen als Parameter übergeben Der Rückgabewert der Prozedur wird in der Variablen Zahlenkette gespeichert Der Effekt ist dass in Zahlenkette alle definierten Zahlen stehen und zwar durch Leerzeichen voneinander getrennt Zur Kontrolle wird das Ergebnis als Meldungsfenster ausgegeben pop Entfernt das letzte Element aus einem Array und ändert dadurch die Anzahl der Elemente im Array Der Rückgabewert der Methode ist der Inhalt des gelöschten Elementes Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var Zahlen new Array 1 2 3 4 5 alert Zahlen length Zahlen im Array function Entfernen Zahlen pop alert Zahlen length Zahlen im Array script head body a href javascript Entfernen Zahl entfernen a body html Erläuterung Das Beispiel definiert beim Einlesen der Datei einen Array Zahlen mit 5 Elementen Zur Kontrolle wird in einem Meldungsfenster die Elementanzahl ausgegeben Im Dateikörper enthält das Beispiel einen Verweis Bei jedem Anklicken des Verweises wird die Funktion Entfernen aufgerufen die mit der pop Methode jeweils das letzte Element aus dem Zahlen Array entfernt Zur Kontrolle wird die neue Länge des Arrays ausgegeben Beachten Sie Bei Browsern die pop nicht kennen können Sie das letzte Element entfernen indem Sie dem Array eine neue Länge zuweisen z B mit Zahlen length Zahlen length 1 Der Internet Explorer kennt die Methode pop erst ab Version 5 5 push Hängt ein oder mehrere Elemente an das Ende eines Arrays an Erwartet als Parameter ein oder mehrere anzuhängende Elemente Gibt in der JavaScript Version 1 2 das letzte neueste Element zurück in neueren JavaScript Versionen dagegen die Länge des Arrays Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Orte new Array Augsburg document write p Orte join br var NeuestesElement Orte push Berlin document write Orte join br document write Neu dabei NeuestesElement p var NeuestesElement Orte push Chemnitz Dortmund Essen Frankfurt document write p Orte join br document write Neuestes Element NeuestesElement p script body html Erläuterung Das Beispiel erzeugt in einem JavaScript das im Dateikörper steht einen Array Orte in dem zunächst nur ein Wert nämlich Augsburg gespeichert wird Zur Kontrolle wird der Inhalt mit der write Methode in die Datei geschrieben Anschließend wird dem Array mit der push Methode ein Element angehängt nämlich Berlin Der Rückgabewert der Operation wird in der Variablen NeuestesElement gespeichert Zur Kontrolle wird dann der erweiterte Array und der Rückgabewert in die Datei geschrieben Der Array besteht jetzt aus den Elementen Augsburg und Berlin Das neueste Element ist Berlin Dann werden nach dem gleichen Schema gleich vier neue Elemente an den Array angehängt Der Array besteht hinterher aus den zwei bisherigen Städten plus den vier neuen In der Variablen NeuestesElement wird jedoch nur das letzte neueste Element gespeichert Im Beispiel ist das Frankfurt Zur Kontrolle werden auch diese Vorgänge in die Datei geschrieben Beachten Sie Der Internet Explorer kennt die Methode push erst ab Version 5 5 Bei Browsern welche die Methode push nicht kennen können Sie ein neues Element anhängen indem Sie z B mit Zahlen Zahlen length Wert den Array erweitern reverse Kehrt die Elementreihenfolge innerhalb eines Arrays um Das erste Element ist hinterher das letzte das letzte das erste Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body script type text javascript var Name new Array S T E F A N Name reverse document write Name join script body html Erläuterung Das Beispiel definiert einen Array Name dessen Elemente aus den einzelnen Buchstaben des Namens Stefan bestehen Anschließend wird auf diesen Array die Methode reverse angewendet Mit Hilfe der join Methode wird der Array mit seiner neuen Elementreihenfolge anschließend so in die Datei

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



  •