DHTML Utopia: Modernes Webdesign mit JavaScript & Dom

Der Charme der Entlockung dynamischer Webseiten: tief in die Welt von DHTML

Dieser Artikel wird aus dem neuen Buch "DHTML Utopia: Modern Web Design mit JavaScript & Dom" ausgestattet, das die DHTML-Technologie ausführlich untersucht und Ihnen beibringt, wie Sie eine reichhaltige Benutzererfahrung schaffen, ohne die Benutzerfreundlichkeit und Standardkompatibilität zu beeinträchtigen. Der Autor Stuart Langridge verwendet Webstandards und trennt Code und Tags, um ansprechende, praktische und interaktive DHTML -Anwendungen zu erstellen.

Dieses Buch deckt mehr als 300 Seiten DHTML-Fähigkeiten ab, einschließlich des DOMR-Model (DOMR), Remote Scripting, AJAX, XML-RPC und XPath Technologies, um Ihnen dabei zu helfen, Ihre eigenen Webprojektanwendungen zu erstellen. Erstellen Sie beispielsweise ein hierarchisches Navigationsmenü, das die Standards erstellt.

Mit den folgenden Auszügen werden Sie schnell die Kerntechnologien und Anwendungen von DHTML verstehen. Weitere Informationen finden Sie auf der Buchseite oder sehen Sie sich den vollständigen Katalog an. Sie können auch die PDF -Version herunterladen. Gehen wir nun zu Kapitel 1.

Kapitel 1: Überblick über die DHTML -Technologie

Dieses Kapitel bietet kurz einen kurzen Überblick über die Grundlagen, die zum Erstellen einer DHTML -Website erforderlich sind, einschließlich der Kombination von HTML, CSS und JavaScript. DHTML ist keine einzige Technologie, sondern eine clevere Verschmelzung dieser drei Technologien, wie die Kunst des Kochens kann das Endergebnis einfache hausgemachte Gerichte oder große Bankette sein.

HTML -Grundlagen

Die Website ist in HTML geschrieben. Um eine erfolgreiche DHTML -erweiterte Website zu erstellen, muss Ihr HTML zwei Bedingungen erfüllen: gültig und semantisch

.

• feffefficy HTML:

  Befolgen Sie die Regeln der HTML -Spezifikation und stellen Sie sicher, dass Ihr HTML -Code den Standards entspricht, was für den Aufbau von DHTML von entscheidender Bedeutung ist. Dies beinhaltet korrekte Verschachtel -Tags, Schließen von Container -Tags und Verwenden von Dokumenttyp -Deklarationen (docType). Verwenden Sie den W3C -Validator, um die Gültigkeit von HTML zu überprüfen.

• semantisiert HTML: <p></p> Verwenden Sie HTML -Tags, um die Eigenschaften von Dokumentelementen zu beschreiben, nicht ihres Erscheinungsbilds. Verwenden Sie beispielsweise das Tag <code><blockquote></blockquote> , um Absätze darzustellen, und verwenden Sie das Tag <br>, um Referenzen darzustellen, anstatt das <font></font> oder

  -Tag zu verwenden, um die Textformatierung zu steuern. Das semantische Tagging erleichtert die Anwendung der DHTML -Technologie.

CSS

hinzufügen

Cascading Style Sheets (CSS) werden verwendet, um zu beschreiben, wie HTML gerendert wird, dh, um das Erscheinungsbild jedes Elements auf der Seite zu definieren. Im CSS -Stil können DHTML -Seiten das Erscheinungsbild und den Inhalt der Seite unabhängig verarbeiten und eine saubere Trennung erreichen.

add JavaScript

JavaScript ist eine Programmiersprache, mit der dynamisches Verhalten zu einer Website hinzugefügt wird. HTML definiert die Seitenstruktur, das CSS definiert das Seitenauftritt und JavaScript definiert das Benutzer -Interaktionsverhalten, z. B. Klicken auf Schaltflächen, das Ziehen eines Bildes oder das Verschieben einer Maus. JavaScript funktioniert mit DOM und assoziiert Aktionen mit unterschiedlichen Ereignissen (Maus, ziehen und klicken).

Werkzeugempfehlungen

Ein guter JavaScript -Entwicklungsumfeld und Code -Editor kann die Entwicklungseffizienz erheblich verbessern. Es wird empfohlen, Mozilla Firefox zum Debuggen zu verwenden und einen Code -Editor zu verwenden, der die Syntax -Hervorhebung unterstützt.

Kapitel 2: Dokumentobjektmodell (DOM)

DOM beschreibt eine HTML -Seite als eine Reihe von Objekten, auf die von JavaScript -Programmen zugegriffen werden kann, die die Seitenelemente an eine Baumstruktur (DOM -Baum) abbilden. Jedes Element wird zum Elementknoten und jedes Textfragment wird zum Textknoten. Die Struktur des DOM -Baumes entspricht der Nistnestniveau von HTML -Tags. Effektiv und korrekt verschachteltes HTML ist für den Aufbau des richtigen Dom -Baumes unerlässlich.

durch den Dom Tree

reisen

document.getElementById() Reisen durch den DOM -Baum bezieht sich auf den Prozess des Zugriffs auf jeden Knoten im Baum. Dies wird normalerweise mit rekursivem Umfang implementiert. Die document.getElementsByTagName() -Methode wird verwendet, um das Element der angegebenen ID zu erhalten, und die

-Methode wird verwendet, um alle Elemente des angegebenen Typs zu erhalten.

Betrieb von DOM -Elementen

appendChild() Sie können JavaScript verwenden, um die Eigenschaften, den Textinhalt und die Stileigenschaften von DOM -Elementen zu ändern. Die insertBefore() -Methode wird zum Hinzufügen neuer untergeordneter Knoten verwendet, die removeChild() -Methode wird verwendet, um neue untergeordnete Knoten vor dem angegebenen Knoten einzufügen. Die cloneNode() -Methode wird zum Löschen untergeordneter Knoten verwendet, und die

-Methode wird zum Replikieren von Knoten verwendet.

Beispiel für

DOM -Betriebsbeispiel: Erweiterte Form und modulare Bildschaltung

Dieses Kapitel enthält zwei Beispiele: ein erweiterbares Formular, mit dem Benutzer Eingabefelder dynamisch hinzufügen können;

Kapitel 3: DOM -Ereignisse

bearbeiten

Ereignisse sind Aktionen, die auf Elementen wie Mausklicks, Formänderungen usw. auftreten. Der Kern der DHTML -Programmierung ist die Ereignisverarbeitung, das heißt, Code zu schreiben, um auf Ereignisse zu reagieren.

Ereignisbearbeitungsmethode addEventListener() attachEvent modernes DOM -Ereignishandling verwendet die

-Methode (und IEs

-Methode), um einen Ereignishörer an ein Element anzuhängen. Die Ereignishörerfunktion empfängt ein Ereignisobjekt als Parameter, das detaillierte Informationen zum Ereignis enthält, z. B. Zielelemente, Mauskoordinaten usw.

Ereignis sprudeln und blockieren Standardverhalten stopPropagation() preventDefault() Ereignisblase bezieht sich auf den Prozess, in dem ein Ereignis vom Zielelement bis zu seinem Vorfahrelement nach oben sprudelt. Die

-Methode kann verhindern, dass das Ereignis sprudelt. Die

-Methode kann das Standardverhalten von Ereignissen blockieren, z. B. die Verhinderung von Link -Sprüngen.

Cross-Browser-Ereignishandling addEvent() addEventListener() Um sicherzustellen, dass der Code in verschiedenen Browsern ordnungsgemäß funktioniert. attachEvent() Beispiel für Ereignisverarbeitung: Smart -Links und Tabelle Hervorhebung

Dieses Kapitel enthält zwei Beispiele: intelligente Links, sodass Benutzer auswählen können, ob ein Link in einem neuen Fenster geöffnet werden soll.

Kapitel 4: Erkennen von Browserfunktionen

Um sicherzustellen, dass DHTML -Verbesserungen bei Browsern keine Probleme verursachen, die diese Funktionen nicht unterstützen, ist die Erkennung von Browser -Funktionen erforderlich.

Eigenschaftserkennung

Die Merkmalserkennung bezieht sich auf eine Methode, die direkt überprüft, ob ein Browser eine bestimmte Funktion unterstützt, anstatt die Funktionalität zu schließen, die er unterstützt, indem der Browsertyp identifiziert wird. Dies beinhaltet die Überprüfung, ob die DOM -Methode und das Attribut vorhanden sind.

Beispiel für die Erkennung von Merkmalen: Scrollierbares Bild

Dieses Kapitel enthält ein Bild mit Bildlaufbild, mit dem die Funktionserkennung verwendet wird, um sicherzustellen, dass der Code in verschiedenen Browsern ordnungsgemäß funktioniert und Browserunterschiede bei der Mauskoordinatenerfassung behandelt.

Die verbleibenden Kapitel dieses Buches werden weiter fortgeschrittenere Techniken und Anwendungen von DHTML untersuchen.

(Das Bild bleibt das ursprüngliche Format und die Position unverändert)

Das Bild kann nicht angezeigt werden, da auf den Bildlink nicht zugegriffen werden kann. Bitte stellen Sie sicher, dass der Bildlink gültig ist.

Das obige ist der detaillierte Inhalt vonDHTML Utopia: Modernes Webdesign mit JavaScript & Dom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!