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 / Anwendungsbeispiele / Taschenrechner
    1 onclick Hinzufuegen 1 td td input type button width 60 class button value 2 onclick Hinzufuegen 2 td td input type button width 60 class button value 3 onclick Hinzufuegen 3 td td input type button width 60 class button value onclick Hinzufuegen td tr tr td input type button width 60 class button value 0 onclick Hinzufuegen 0 td td input type button width 60 class button value onclick Hinzufuegen td td input type button width 60 class button value onclick Ergebnis td td input type button width 60 class button value onclick Hinzufuegen td tr tr td input type button width 60 class button value sqrt onclick Sonderfunktion sqrt td td input type button width 60 class button value pow onclick Sonderfunktion pow td td input type button width 60 class button value ln onclick Sonderfunktion ln td td input type reset width 60 class button value C td tr table td tr table form body html Erläuterung Funktion zur Berechnung des Inhalts des Rechenfelds Im Beispiel werden im Kopf der HTML Datei mehrere Funktionen notiert welche die Funktionalität des Taschenrechners ermöglichen Die Funktion Ergebnis errechnet den aktuellen Inhalt des Rechenfeldes Innerhalb der Funktion wird eine Variable x definiert in der das Ergebnis der Berechnung gespeichert wird Um das Ergebnis zu erhalten wird die Rechenoperation die in dem übergebenen Formularfeld dem Rechenfeld des Taschenrechners steht an die mächtige objektunabhängige JavaScript Funktion eval übergeben Diese Funktion übernimmt automatisch die gesamte Berechnung der Rechenoperation Voraussetzung ist natürlich dass die Rechenoperation keine ungültigen Zeichen enthält Ansonsten erzeugt JavaScript eine Fehlermeldung Aus diesem Grund wird vor jeder Verwendung von eval die Funktion check aufgerufen welche die Gültigkeit der Eingaben prüft Nur wenn diese Funktion true zurück gibt wird die Methode eval angewendet Ansonsten wird im Display der Wert 0 angezeigt Um das errechnete Ergebnis das in der Variablen x gespeichert wird im Rechenfeld des Taschenrechners anzuzeigen wird dem entsprechenden Formularfeld einfach der Wert von x zugewiesen Funktion zur Prüfung der Gültigkeit der Eingabe Die Funktion Check Eingabe überprüft ob die Werte von Eingabe nur die vorgegebenen Zeichen enthält Diese sind in der Variablen nur das abgelegt Mit einer for Schleife wird die übergebene Zeichenkette Zeichen für Zeichen daraufhin überprüft ob dieses Zeichen in dem Bereich von nur das vorkommt Mit der Methode charAt wird aus der Variablen Eingabe das Zeichen an der Position i extrahiert und an nur das indexOf als Parameter übergeben Die Methode indexOf prüft daraufhin ob das Zeichen in nur das enthalten ist Tritt ein ungültiges Zeichen auf so wird die Funktion abgebrochen und der Wert false zurückgegeben Andernfalls gibt die Funktion true zurück Funktion zum Hinzufügen eines Zeichens in das Rechenfeld Die Funktion Hinzufuegen im Beispiel wird aufgerufen wenn der Anwender auf einen der Buttons im Taschenrechner Formular klickt Das können Ziffern 0 bis 9 oder Rechenoperatoren oder ein Dezimalpunkt sein Um das Zeichen hinzuzufügen wird dem aktuellen Wert des Rechenfeldes einfach der bisherige Wert plus das neue Zeichen zugewiesen Dabei kommt der Operator zur Zeichenkettenverknüpfung zum

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


  • SELFHTML: JavaScript / Anwendungsbeispiele / Monatskalender
    TSchrArt else if Tageszahl Stop SchreibeZelle 160 Thgrund TSchrFarbe TSchrGroesse TSchrArt else if Jahr DiesesJahr Monat DieserMonat Tageszahl DieserTag SchreibeZelle Tageszahl Ahgrund TSchrFarbe TSchrGroesse TSchrArt else SchreibeZelle Tageszahl Thgrund TSchrFarbe TSchrGroesse TSchrArt Tageszahl if Tageszahl Stop SchreibeZelle 160 Thgrund SoFarbe TSchrGroesse TSchrArt else if Jahr DiesesJahr Monat DieserMonat Tageszahl DieserTag SchreibeZelle Tageszahl Ahgrund SoFarbe TSchrGroesse TSchrArt else SchreibeZelle Tageszahl Thgrund SoFarbe TSchrGroesse TSchrArt Tageszahl document write tr document write table function SchreibeKopf Monatstitel HgFarbe SchrFarbe SchrGroesse SchrArt document write tr document write td align center colspan 7 valign middle bgcolor HgFarbe document write font size SchrGroesse color SchrFarbe face SchrArt b document write Monatstitel document write b font td tr document write tr for var i 0 i 6 i SchreibeZelle Tag i HgFarbe SchrFarbe SchrGroesse SchrArt document write tr function SchreibeZelle Inhalt HgFarbe SchrFarbe SchrGroesse SchrArt document write td align center valign middle bgcolor HgFarbe document write font size SchrGroesse color SchrFarbe face SchrArt b document write Inhalt document write b font td script body html Erläuterung Aktuelles Datum ermitteln Im Script Bereich wird zunächst mit d new Date ein neues Datumsobjekt mit dem aktuellen Zeitpunkt erzeugt In den Variablen dm und dj werden anschließend aus dem neuen Datumsobjekt d der Monat und das Jahr ermittelt Mit diesen beiden Variablen wird die Funktion Kalender aufgerufen Die Anweisung if dj 999 dj 1900 ist dabei nötig um einigen älteren Browsern die bei dem Aufruf der getYear Methode nicht Jahr 2000 kompatibel reagieren zum Ermitteln des gewünschten Jahres zu verhelfen Funktion Kalender Die Funktion Kalender ist als in sich abgeschlossenes Unterprogramm realisiert das einen Monat und ein Jahr als Parameter erwartet das als Monatskalender angezeigt werden soll Auf diese Weise lässt sich die Funktion auch noch anderweitig nutzen als zur einmaligen Ausgabe des aktuellen Kalendermonats Zu Beginn der Funktion Kalender werden erst einmal verschiedene Variablen definiert Dazu gehören die gewünschten Monatsnamen und die Wochentage die jeweils als Array Objekte angelegt werden Wenn Sie andere zum Beispiel landesspezifische Namen wie Jänner wünschen ändern Sie den entsprechenden Namen einfach Zu den Variablen die am Beginn von Kalender definiert werden gehören auch die Angaben zu Farben Schriftarten und Schriftgrößen für Kalenderhintergrund und Anzeige der Tage Die Variablendefinitionen sind im Beispiel zum besseren Verständnis auskommentiert Ändern Sie diese Werte wenn Sie den Kalender verwenden möchten nach Ihren Wünschen Ermitteln ob aktiver Tag im anzuzeigenden Monat liegt Da die Funktion Kalender ja als Parameter übergeben bekommt welchen Monat in welchem Jahr sie ausgeben soll kann es sich durchaus um einen anderen als den aktuellen Monat handeln nur im obigen Beispiel wird die Funktion mit dem aktuellen Monat Jahr aufgerufen Die Funktion ermittelt deshalb noch einmal separat die Daten des aktuellen Tages DieserTag des aktuellen Monats DieserMonat und des aktuellen Jahres DiesesJahr Die entsprechenden Daten werden später benötigt um den aktuellen Tag farblich hervorzuheben sofern er in dem auszugebenden Monat vorkommt Auch dabei wird wieder die Anpassung für das Jahr 2000 durchgeführt Anzeige in Tabelle vorbereiten Der Monatskalender soll mit Hilfe von document write Anweisungen in eine

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

  • SELFHTML: JavaScript / Anwendungsbeispiele / Persönliche Seitenbesuche zählen mit Cookies
    document cookie indexOf 1 var Wertende document cookie indexOf if Wertende 1 Wertende document cookie length Wert document cookie substring Wertstart Wertende return Wert function WertSetzen Bezeichner Wert Verfall var jetzt new Date var Auszeit new Date jetzt getTime Verfall document cookie Bezeichner Wert expires Auszeit toGMTString function Zaehlerstand var Verfallszeit 1000 60 60 24 365 var Anzahl WertHolen var Zaehler 0 if Anzahl Zaehler parseInt Anzahl Zaehler Zaehler 1 WertSetzen Zaehler Zaehler Verfallszeit return Zaehler script head body h1 Eine Seite die etwas über Sie wei szlig h1 script type text javascript var x Zaehlerstand document write p Dies ist Ihr b x b Besuch auf dieser Seite p script p Benutzen Sie doch mal die Reload Funktion Ihres Browsers p body html Erläuterung Cookie lesen und gespeicherten Wert ermitteln Die Funktion WertHolen die im Beispiel definiert ist ist allgemein geschrieben Sie können diese Funktion nutzen um einen Cookie auszulesen Wenn die Datei schon einmal einen Cookie geschrieben hat wird dessen Wert ermittelt und zurückgegeben Wenn noch kein Cookie existiert wird eine leere Zeichenkette zurückgegeben Mit der Abfrage if document cookie ermittelt die Funktion ob bereits ein Cookie vorhanden ist Wenn ja wird dessen Wert ermittelt Ein Cookie besteht normalerweise aus einem Bezeichner und einem Wert zum Beispiel Zaehler 4 Dabei ist Zaehler der Bezeichner und 4 der Wert der diesem Bezeichner zugewiesen ist Die Funktion WertHolen holt sich den Wert indem sie mit indexOf Befehlen den Anfang und das Ende des Wertes innerhalb des gespeicherten Cookies ermittelt Diesen Wert weist sie der Variablen Wert zu Die Variable Wert wird am Ende der Funktion zurückgegeben Cookie schreiben und Wert setzen Die Funktion WertSetzen die im Beispiel definiert ist ist ebenfalls allgemein geschrieben Diese Funktion erwartet drei Parameter Bezeichner ist das Element vor dem Istgleichzeichen zum Beispiel Zaehler Wert ist der Wert der dem Bezeichner zugewiesen und mit gespeichert werden soll Verfall ist eine Zahl die als Anzahl Millisekunden interpretiert wird Jeder Cookie der über die aktuelle Browser Sitzung hinaus gespeichert bleiben soll muss eine Angabe dazu enthalten wann der Browser den Cookie löschen soll Das soll verhindern das Cookies ewig gespeichert bleiben Der Verfallszeitpunkt des Cookies muss in Form des GMT Zeitformats angegeben werden Darum brauchen Sie sich aber nicht zu kümmern da die Funktion WertSetzen dies automatisch erledigt Die Funktion ermittelt zu diesem Zweck die aktuelle Zeit var jetzt new Date In der Variablen Auszeit errechnet sie einen zukünftigen Zeitpunkt aus dem übergebenen Parameter Verfall und dem ermittelten aktuellen Zeitpunkt Mit der Anweisung die mit document cookie beginnt wird der Cookie geschrieben Übergeordnete Funktion zum Verwalten des Cookies Die beiden allgemeinen Funktionen WertHolen und WertSetzen benötigen nun noch ein paar allgemeine Anweisungen die den Cookie verwalten Dies geschieht im Beispiel in der Funktion Zaehlerstand Zunächst definiert diese Funktion einen Verfallswert der später beim Schreiben des Cookies an die Funktion WertSetzen übergeben wird Mit dem Rechenausdruck 1000 60 60 24 365 wird die Millisekundenzahl eines Jahres ermittelt Der Cookie soll also ein Jahr lang gespeichert werden Um die persönlichen

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

  • SELFHTML: JavaScript / Anwendungsbeispiele / Formulareingaben überprüfen
    document Formular Alter value charAt i 0 document Formular Alter value charAt i 9 chkZ 1 if chkZ 1 alert Altersangabe keine Zahl document Formular Alter focus return false script head body h1 Formular h1 form name Formular action http de selfhtml org cgi bin formview pl method post onsubmit return chkFormular pre Name input type text size 40 name User Wohnort input type text size 40 name Ort E Mail input type text size 40 name Mail Alter input type text size 40 name Alter Formular input type submit value Absenden input type reset value Abbrechen Zum Absenden muss eine Internet Verbindung bestehen pre form body html Erläuterung Formular definieren Im Beispiel wird ein gewöhnliches HTML Formular mit einigen Eingabefeldern einem Rest Button zum Zurücksetzen des Formulars und einem Submit Button zum Absenden des Formulars definiert Die einzige Besonderheit ist die Anweisung onsubmit return chkFormular im einleitenden form Tag Der Event Handler onsubmit wird aktiv wenn der Anwender auf den Submit Button klickt um das Formular abzusenden Dann wird die JavaScript Funktion chkFormular aufgerufen die im Dateikopf in einem JavaScript Bereich notiert ist Wenn die Funktion Fehler bei den Eingaben findet gibt sie den Wert false falsch zurück ansonsten den voreingestellten Wert true wahr Mit return wird dieser Wert im einleitenden form Tag an den Browser weitergegeben Der Browser kennt die beiden Werte true und false Im Zusammenhang mit onsubmit reagiert er so dass er das Formular nur dann abschickt wenn der Wert true ist Ist der Wert false wird das Absenden der Formulardaten verhindert Formular überprüfen Die eigentliche Formularüberprüfung findet im Beispiel in der Funktion chkFormular statt die in dem Script Bereich im Dateikopf notiert ist Im Beispiel soll jedes Eingabefeld daraufhin überprüft werden ob es einen Inhalt hat d h ob der Anwender es ausgefüllt hat Bei

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

  • SELFHTML: JavaScript / Sprachelemente / Aufenthaltsdauer auf Web-Seite anzeigen
    ZeitBerechnen var Immernoch new Date return Immernoch getTime Start 1000 script head body bgcolor EEEEEE onload window setTimeout ZeitAnzeigen 1000 form name Anzeige action input type text size 7 name Zeit value 00 00 form p viel Spa szlig im rechten Frame Fenster p body html Erläuterung Startzeit ermitteln Beim Einlesen der Datei wird zunächst der aktuelle Zeitpunkt ermittelt Dieser Zeitpunkt dient als Startzeit der Anzeige Mit Jetzt new Date wird ein neues Datumsobjekt mit dem aktuellen Zeitpunkt in der Variablen Jetzt gespeichert Mit Jetzt getTime wird eine absolute Zahl in Millisekunden ermittelt die in der Variablen Start gespeichert wird Funktion zur Zeitanzeige erstmals aufrufen Im einleitenden body Tag steht im Beispiel der erste Aufruf der Funktion ZeitAnzeigen die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert Der erste Aufruf erfolgt nach einer Sekunde Dazu wird der Funktionsaufruf in die setTimeout Methode mit einer Verzögerungszeit von 1000 Millisekunden 1 Sekunde eingebettet Im Dateikörper steht dann ein Formular das nur aus einem einzigen kleinen Eingabefeld besteht Dieses Eingabefeld wird als Ausgabefeld für die Zeitanzeige zweckentfremdet Es wird mit dem Wert 00 00 vorbelegt damit auch in der ersten Sekunde schon etwas in dem Feld steht Zeit anzeigen und Anzeige laufend aktualisieren Die Funktion ZeitAnzeigen die für die laufende Zeitanzeige verantwortlich ist ruft zunächst die Unterfunktion ZeitBerechnen auf Diese Funktion erzeugt bei jedem Aufruf ein neues Datumsobjekt mit dem aktuellen Zeitpunkt Das Ergebnis wird in der Variablen Immernoch gespeichert Zurückgegeben wird jedoch nicht der aktuelle Zeitpunkt sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt der beim Einlesen der Datei ermittelt wurde Der Rückgabewert erfolgt in Sekunden Da beim Datumsobjekt intern in Millisekunden gerechnet wird wird der Wert durch 1000 geteilt um Sekunden zu erhalten Dabei können jedoch Bruchzahlen zustande kommen Um eine glatte Sekundenzahl zu erhalten wendet die aufrufende

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

  • SELFHTML: JavaScript / Anwendungsbeispiele / Fehlerbehandlung mit dem Event-Handler onerror
    zur Laufzeit eines Scripts entstehen notieren Sie im Kopf der Datei window onerror Als Wert weisen Sie den Namen einer Funktion zu welche die Fehlerbehandlung ausführt Der Rückgabewert der Funktion muss true sein Damit haben Sie Ihre eigene Fehlerbehandlung Der Fehlerbehandlungs Funktion können Sie bis zu 3 optionale Parameter übergeben 1 Nachricht enthält die Fehlerbeschreibung des Fehlers 2 Datei enthält den URI der fehlerverursachenden Datei 3 Zeile enthält die Zeile in der der Fehler auftritt Diese Art der Fehlerkontrolle können Sie für Netscape 4 x und Internet Explorer ab Version 4 x verwenden Netscape 6 ist nicht in der Lage die Parameter vollständig zu interpretieren Er speichert jeweils im ersten Parameter das auslösende Eventobjekt Opera interpretiert den an das Fensterobjekt gebundenen Event Handler window onerror nicht Berücksichtigen Sie dass Sie nur logische Fehler überwachen und unterdrücken können die während der Laufzeit der Scripts entstehen Syntaxfehler wie z B fehlende Klammern usw sind damit nicht abfangbar Quelltext mit Erläuterungen Das Beispiel zeigt eine einfach Variante der Fehlerbehandlung Am Ende des Script Bereichs wird eine Funktion aufgerufen die nicht existiert Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript window onerror Fehlerbehandlung function Fehlerbehandlung Nachricht Datei Zeile Fehler Fehlermeldung n Nachricht n Datei n Zeile zeigeFehler return true function zeigeFehler alert Fehler nichtda script head body a href javascript zeigeFehler Fehler a br body html Erläuterung Beim Einlesen der Datei wird mit window onerror Fehlerbehandlung angewiesen im Fehlerfall die Funktion Fehlerbehandlung aufzurufen Dieses Ereignis tritt im Beispiel am Ende des Script Bereichs ein wo versucht wird die nichtvorhandene Funktion nichtda aufzurufen Die Funktion Fehlerbehandlung Die Funktion speichert mit Zeichenkettenverknüpfung die automatisch übergebenen Parameter in der Variablen Fehler Dann ruft sie im Beispiel die Funktion zeigeFehler auf Diese Funktion dient im Beispiel lediglich dazu den Fehler zu

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

  • SELFHTML: Dynamisches HTML / DHTML-Modelle / Das Document Object Model (DOM)
    href javascript TopLinksFenster blank in neues Fenster laden a oder a href javascript TopLinksFenster self ins aktuelle Fenster laden a p body html Erläuterung Das Beispiel enthält im sichtbaren Bereich einen Top Link der zunächst auf sich selbst verweist name Ziel href Ziel Unterhalb davon sind drei weitere Verweise notiert Der erste verspricht den jeweils nächsten Top Link zu präsentieren und die beiden darunter erlauben es dem Anwender festzulegen wie er die Links öffnen will ob im gleichen oder in einem neuen Fenster Alle diese drei Verweise rufen JavaScript Funktionen auf die im Dateikopf notiert sind Der Verweis der den nächsten Top Link verspricht ruft die Funktion TopLink auf Diese Funktion greift mit document getElementsByName Ziel 0 auf das erste Element im Dokument zu bei dem als Attribut name Ziel notiert ist Das ist im Beispiel bei dem Verweis der Fall der die TopLinks anzeigen soll und aber bislang auf sich selbst verweist Geändert werden sollen bei diesem Verweis sowohl sein href Attribut als auch sein sichtbarer Verweistext Der Zugriff auf das href Attribut ist ganz einfach weil nach der DOM Syntax der HTML Elementobjekte jedes denkbare Attribut eines HTML Elements einfach eine Eigenschaft des entsprechenden HTML Objekts darstellt Um auf HTML Attribute zuzugreifen brauchen Sie also nur auf das gewünschte Element zuzugreifen und dahinter durch Punkt getrennt den Attributnamen als Eigenschaft notieren Beachten Sie dabei aber die besondere Groß Kleinschreibung bei verschiedenen Attributen wie bgColor vSpace oder cellPadding Mit document getElementsByName Ziel 0 href wird im Beispiel also direkt auf den Wert des href Attributs des gewünschten Verweises zugegriffen Durch Zuweisung eines Wertes wird das Attribut dynamisch geändert Im Beispiel wird jeweils ein neuer Wert aus dem weiter oben im Script notierten Array namens TopLinks zugewiesen Als Indexzähler wird die ebenfalls zuvor schon definierte Variable aktuellerLink verwendet Diese wird anschließend um 1 erhöht damit beim nächsten Aufruf der Funktion der nächste Top Link aus dem Array gesetzt wird Wenn der Wert von aktuellerLink zu hoch wird um noch einen Eintrag in dem Array zu finden wird die Variable wieder auf 0 gesetzt und beim nächsten Klick wird wieder der erste Eintrag aus dem Array serviert Der Zugriff auf den Verweistext erfolgt wieder über firstChild value Die Verweise die regeln in welchem Fenster die Top Links geöffnet werden sollen rufen jeweils die Funktion TopLinksFenster auf und übergeben ihr als Parameter den gewünschten Zielfensternamen Übergeben werden die reservierten Fensternamen self Öffnen im eigenen Fenster bzw blank Öffnen in neuem Fenster Die Funktion TopLinksFenster benutzt wieder den bequemen Weg über die HTML Elementobjekte um direkt auf die target Eigenschaft des a Elements zuzugreifen und das entsprechende Attribut zu setzen Es ist also kein Problem Attribute zu setzen die im HTML Quelltext eines Elements nicht notiert sind Falls Sie mal ein Attribut löschen wollen haben Sie zwei Möglichkeiten entweder Sie setzen seinen Wert auf leere Zeichenkette oder und das ist sauberer Sie arbeiten mit der Methode removeAttribute des node Objekts CSS Eigenschaften dynamisch ändern Seit der DOM Version 2 0 wird auch geregelt wie auf Stylesheet Angaben zugegriffen wird Dabei hat man sich weitgehend an das seinerzeit von Microsoft eingeführte style Objekt angelehnt Das folgende Beispiel zeigt wie Sie mit Hilfe der DOM Technik typisches klassisches dynamisches HTML mit Bewegung positionierter Elemente schreiben Dazu dient die Möglichkeit Elemente mit Hilfe von CSS Eigenschaften absolut zu positionieren Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript var rp bp ich var rpGeschw 10 bpGeschw 20 var rpGrad 0 bpGrad 0 var rpX 170 rpY 170 bpX 170 bpY 170 var rpRadius 150 bpRadius 150 function Init rp document getElementById roterPunkt bp document getElementById blauerPunkt ich document getElementById ich rp style position absolute rp style top 20 px rp style left 320 px bp style position absolute bp style top 320 px bp style left 320 px ich style position absolute ich style top 110 px ich style left 90 px ich style fontFamily Courier New Courier ich style fontSize 96px ich style fontWeight bold ich style color 009900 rpKreis bpKreis function rpKreis rpGrad rpGeschw 1000 if rpGrad 360 rpGrad 0 rp style top Math round rpY rpRadius Math cos rpGrad px rp style left Math round rpX rpRadius Math sin rpGrad px window setTimeout rpKreis 100 rpGeschw function bpKreis bpGrad bpGeschw 1000 if bpGrad 360 bpGrad 0 bp style top Math round bpY bpRadius Math cos bpGrad px bp style left Math round bpX bpRadius Math sin bpGrad px window setTimeout bpKreis 100 bpGeschw script head body onload Init div id roterPunkt img src ichkreis1 gif width 20 height 20 border 0 alt roter Punkt div div id blauerPunkt img src ichkreis2 gif width 20 height 20 border 0 alt blauer Punkt div div id ich ICH div body html Erläuterung Innerhalb des body Bereichs werden im Beispiel einfach nur drei div Bereiche ohne weitere Formatierungen notiert Die ersten beiden enthalten jeweils eine kleine Grafik ichkreis1 gif ist ein roter Punkt ichkreis2 gif ein blauer Punkt Beide Grafiken haben einen transparenten Hintergrund was wichtig ist da sich die Punkte im späteren Verlauf des Geschehens öfter überlagern werden Im einleitenden body Tag ist der Event Handler onload notiert Dieser tritt in Aktion sobald die Datei vollständig im Browser geladen ist Dann wird die Funktion Init aufgerufen die im Dateikopf notiert ist Diese Funktion speichert zunächst einmal Referenzen auf die drei div Elemente in den drei Variablen rp bp und ich um die darauffolgenden Zugriffe auf diese Elemente zu verkürzen Da alle drei div Bereiche ein id Attribut haben ist der Zugriff auf den entsprechenden Elementknoten mit getElementById roterPunkt usw möglich Anschließend lässt sich mit rp usw genauso arbeiten als wenn man jedesmal wieder document getElementById roterPunkt notieren würde Über die Variablen rp bp und ich ist dann auch das style Objekt ansprechbar Die Funktion Init stattet die drei div Bereiche erst einmal mit anfänglichen CSS Eigenschaften aus Alle drei Bereiche werden mit style position absolute absolut positioniert Die linke obere Ecke jedes Bereichs wird mit style left und style

    Original URL path: http://html.ekiwi.de/dhtml/modelle/dom.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Microsoft
    in der Klasse definierten Stylesheet Angaben lesen Sie dazu auch den Abschnitt Formate für Klassen definieren Beachten Sie Mozilla Firefox unterstützt zwar document all in der Art wie sie im Beispiel verwendet wird Allerdings führt er das Script im Beispiel nicht aus da es mit script language JScript type text jscript eingebunden ist Eingebettet in einen gewöhnlichen JavaScript Bereich funktioniert das Beispiel auch im Firefox Stylesheets und Scripts Sie können mit Dynamischem HTML nach Microsoft Syntax dynamisch auf alle CSS Eigenschaften einzelner HTML Elemente zugreifen Dadurch können Sie angezeigte Elemente optisch stark verändern Wenn etwa eine Überschrift 2 Ordnung anfangs eine Schriftgröße von 18 Pixel hat können Sie diese dynamisch auf 64 Pixel ändern Dynamisch bedeutet dabei bei einem Anwenderereignis wie einem Mausklick auf die Überschrift oder automatisch zeitgesteuert etwa nach drei Sekunden Neben der Schriftgröße können Sie auch dynamisch eine Hintergrundfarbe unterlegen Rahmen um ein Element ziehen das Element über den Bildschirm wandern lassen und vieles mehr Die Voraussetzung für diese Effekte sind Stylesheets Die Syntax von CSS und die Möglichkeiten der Stylesheet Angaben sollten Sie kennen Die Style Definitionen eines HTML Elements ändern Sie dynamisch indem Sie mit Hilfe einer Script Sprache auf das Element zugreifen und mit neuen Stylesheet Angaben das Aussehen des Elements ändern Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 id Wechseltext style font size 100 Wichtigtuer h1 script language JScript type text jscript function MachKlein document all Wechseltext style fontSize 100 window setTimeout MachGross 1000 function MachGross document all Wechseltext style fontSize 350 window setTimeout MachKlein 1000 MachKlein script body html Erläuterung Das Beispiel zeigt zunächst eine Überschrift 1 Ordnung h1 h1 Mit Hilfe des Attributs style bekommt die Überschrift CSS Eigenschaften zugewiesen Im Beispiel wird die Schriftgröße auf 100 Prozent gesetzt font size 100 Das gesamte Beispiel bewirkt dass die Größe der Überschrift einmal pro Sekunde von 100 auf 350 Prozent wechselt und wieder umgekehrt Für dieses dynamische Verändern ist ein Script erforderlich Im obigen Beispiel wird deshalb ein Script Bereich mit script language JScript type text jscript script definiert Innerhalb des Script Bereichs werden zwei Funktionen definiert Die eine Funktion MachKlein ändert die Schriftgröße der Überschrift auf 100 Prozent die andere Funktion MachGross auf 350 Prozent Nach jeweils einer Sekunde 1000 Millisekunden ruft jede der beiden Funktionen die jeweils andere wieder auf Dadurch entsteht der Wechseleffekt Um das dynamische Verändern der Schriftgröße zu verstehen müssen Sie folgende Zusammenhänge beachten im Überschriften Tag h1 wird mit dem Attribut id ein Name nämlich Wechseltext zugewiesen Diesen Namen können Sie frei vergeben Er darf nur aus Buchstaben Ziffern und Unterstrichen bestehen und darf keine Leerzeichen oder deutschen Umlaute enthalten Das Script im Beispiel greift mit den Anweisungen in denen document all Wechseltext vorkommt auf genau dieses Element zu Mit dem all Objekt document all werden alle Elemente einer HTML Datei angesprochen Durch den Namen dahinter wird genau das Element angesprochen das diesen Namen hat im Beispiel Wechseltext Dahinter folgt das Style Objekt style das dem all Objekt untergeordnet ist Einzelheiten zu diesem Objekt erfahren Sie in der JavaScript Objektreferenz bei style Über das Style Objekt können Sie als Eigenschaft eine erlaubte Stylesheet Angabe notieren Dabei gelten besondere Schreibweisen in JavaScript JScript die im folgenden behandelt werden Beachten Sie Mozilla Firefox unterstützt zwar document all in der Art wie sie im Beispiel verwendet wird Allerdings führt er das Script im Beispiel nicht aus da es mit script language JScript type text jscript eingebunden ist Eingebettet in einen gewöhnlichen JavaScript Bereich funktioniert das Beispiel auch im Firefox Safari unterstützt nicht den hier dargestellten Zugriff auf Elemente über document all hat aber keinerlei Probleme mit der Verwendung des style Objekts im Beispiel Denn die Microsoft Methode zum Zugriff auf CSS Eigenschaften wurde später vom W3C in den DOM Style Standard aufgenommen den Safari unterstützt Schreibweise von CSS Eigenschaften in JavaScript JScript Wenn Sie Stylesheet Angaben innerhalb von Script Sprachen verwenden müssen Sie die Syntax der Script Sprache berücksichtigen Ein Problem beim Mischen von Stylesheets und JavaScript oder JScript ist es dass viele Stylesheet Angaben Bindestriche im Namen haben wie etwa font size margin top oder background color Wenn Sie aus solche Namen in JavaScript oder JScript einen Befehl wie document all MeinText style font size 200 erzeugen erhalten Sie eine Fehlermeldung Der Grund ist dass Bindestriche keine zulässigen Zeichen in Namen sind der Bindestrich ist in diesen Sprachen ja der Operator für Subtraktionen Um dieses Problem zu umgehen hat Microsoft eine einfache Regel aufgestellt Wenn in einem Script eine Stylesheet Angabe ausgelesen oder verändert werden soll entfällt der Bindestrich und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben Beispiel Anzeigebeispiel So sieht s aus html head title Test title script language JScript type text jscript var modus 1 function Textspiel if modus 1 document all MeinText style fontSize 200 modus 2 return if modus 2 document all MeinText style padding 0 6em document all MeinText style backgroundColor FFFF00 modus 3 return if modus 3 document all MeinText style border 10px groove FFCC33 document all MeinText style backgroundImage url back gif modus 0 return if modus 0 document all MeinText style fontSize 100 document all MeinText style padding 0 document all MeinText style backgroundColor FFFFFF document all MeinText style border none document all MeinText style backgroundImage none modus 1 return script head body p id MeinText style background color FFFFFF padding 0 border none background image none cursor hand onclick Textspiel Klicken Sie auf diesen Text p body html Erläuterung In dem Beispiel wird am Ende ein Textabsatz mit diversen Stylesheet Angaben definiert Einige dieser Stylesheet Angaben enthalten Bindestriche nämlich font size background color und background image Innerhalb des Scripts das über dem Textabsatz notiert ist werden diese und andere Stylesheet Angaben dynamisch verändert Sie können erkennen dass font size zu fontSize wird background color zu backgroundColor und background image zu backgroundImage getreu der Regel Wenn Sie innerhalb eines Scripts einer Stylesheet Eigenschaft einen neuen Wert zuweisen wollen müssen Sie zuerst das gewünschte HTML Objekt mit der style Eigenschaft notieren

    Original URL path: http://html.ekiwi.de/dhtml/modelle/microsoft.htm (2016-04-25)
    Open archived version from archive



  •