Heim >Web-Frontend >js-Tutorial >Skript intelligenter: Qualität JavaScript von Grund auf neu
Skript intelligenter: Qualität JavaScript von Grund auf neu
- 尊渡假赌尊渡假赌尊渡假赌Original
- 2025-03-08 00:04:10981Durchsuche
Oder es hat möglicherweise Code direkt darin gehabt:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Mach dir noch keine Sorgen um die Unterschiede zwischen diesen Ausschnitten. Es gibt einige Möglichkeiten - sowohl gut als auch schlecht -, in denen wir JavaScript zu einer Webseite hinzufügen können. Wir werden diese Ansätze später in diesem Kapitel ausführlich betrachten.
JavaScript wurde von Netscape entwickelt und in Netscape 2 implementiert, obwohl es ursprünglich als LiveScript bezeichnet wurde. Die wachsende Popularität einer anderen Sprache, Java, veranlasste Netscape, den Namen zu ändern, um die Verbindung einzuzahlen, da JavaScript die Möglichkeit hatte, zwischen dem Browser und einem Java -Applet zu kommunizieren.
, aber da die Sprache sowohl durch Netscape als auch in ihrer ursprünglichen Form und von Microsoft in der ähnlichen, aber differenzierten Jscript-Implementierung klar wurde, wurde klar, dass Web-Scripting zu wichtig war, um den Wölfen des Lieferantenwettbewerbs überlassen zu werden. So wurde die Entwicklung 1996 an eine internationale Standardgremium namens ECMA übergeben, und JavaScript wurde ECMAScript oder ECMA-262.
Die meisten Menschen bezeichnen es immer noch als JavaScript, und dies kann eine Ursache für Verwirrung sein: Abgesehen von den Namen und den Ähnlichkeiten in der Syntax sind Java und JavaScript nichts gleich.
JavaScripts Einschränkungen
JavaScript wird am häufigsten als clientseitige Sprache verwendet, und in diesem Fall bezieht sich der „Client“ auf den Webbrowser des Endbenutzers, in dem JavaScript interpretiert und ausgeführt wird. Dies unterscheidet es von serverseitigen Sprachen wie PHP und ASP, die auf dem Server ausgeführt werden und statische Daten an den Client senden.
Da JavaScript keinen Zugriff auf die Serverumgebung hat, gibt es viele Aufgaben, die zwar trivial, wenn sie in PHP ausgeführt werden, aber nicht mit JavaScript erreicht werden können: Lesen und Schreiben in eine Datenbank, z. B. oder Textdateien. Da JavaScript jedoch Zugriff auf die Client-Umgebung hat, können Entscheidungen auf der Grundlage von Daten getroffen werden, die die serverseitigen Sprachen einfach nicht haben, wie z. B. die Position der Maus oder die gerenderte Größe eines Elements.
Was ist mit ActiveX?
Wenn Sie mit Microsofts JScript bereits vertraut sind, denken Sie vielleicht: "Aber JavaScript kann einige dieser Dinge mit ActiveX erledigen", und das ist wahr - aber ActiveX ist nicht Teil von ECMascript. ActiveX ist ein Windows-spezifischer Mechanismus, mit dem Internet Explorer auf COM zugreifen kann (das Komponentenobjektmodell im Herzen der Windows-Skripttechnologie) und im Allgemeinen nur in vertrauenswürdigen Umgebungen wie einem Intranet ausgeführt wird. Es gibt einige spezifische Ausnahmen, auf die wir stoßen werden - Beispiele für ActiveX -Steuerelemente, die ohne besondere Sicherheit im IE (z. Normalerweise ist der Computer, auf dem ein Client ausgeführt wird, nicht so leistungsfähig wie ein Server, sodass JavaScript nicht das beste Tool für große Mengen an Datenverarbeitung ist. Die Unmittelbarkeit der Datenverarbeitung des Kunden macht diese Option jedoch attraktiv für kleine Mengen an Verarbeitung, da eine Antwort sofort empfangen werden kann. Formularvalidierung zum Beispiel macht einen guten Kandidaten für die kundenseitige Verarbeitung. , aber es ist fehlgeleitet, um die serverseitigen und clientseitigen Sprachen mit einer Ansicht zu vergleichen. Sie sind auch nicht besser - sie sind Werkzeuge für verschiedene Jobs, und die funktionale Überkreuzung zwischen ihnen ist gering. Eine erhöhte Interaktionen zwischen clientseitigem und serverseitigem Scripting führen jedoch zu einer neuen Generation von Web-Scripting, bei denen Technologien wie XMLHTTPrequest verwendet werden, um Anforderungen für Serverdaten zu erstellen, serverseitige Skripte auszuführen und dann die Ergebnisse auf der Client-Seite zu verwalten. Wir werden diese Technologien in Kapitel 18 eingehend untersuchen und Webanwendungen mit JavaScript erstellen. Sicherheitsbeschränkungen Da JavaScript im Bereich hochempfindlicher Daten und Programme arbeitet, wurden seine Fähigkeiten beschränkt, um sicherzustellen, dass sie nicht böswillig verwendet werden können. Daher gibt es viele Dinge, die JavaScript einfach nicht tun darf. Beispielsweise können die meisten Systemeinstellungen nicht von Ihrem Computer aus gelesen, direkt mit Ihrer Hardware interagieren oder die Programme ausführen. Außerdem sind einige spezifische Wechselwirkungen, die normalerweise für ein bestimmtes Element zulässig sind, aufgrund der Eigenschaften dieses Elements nicht in JavaScript zulässig. Zum Beispiel den Wert eines Formulars Es gibt einige Beispiele für ähnliche Sicherheitsbeschränkungen, die wir in den Anwendungen, die wir in diesem Buch behandeln, erweitern. Zusammenfassend finden Sie hier eine Liste der Hauptbeschränkungen und Sicherheitsbeschränkungen von JavaScript, einschließlich derer, die wir bereits gesehen haben. JavaScript kann nicht:
JavaScript Best Practices
Progressive Verbesserung - Bereitstellung von Benutzern, die nicht über JavaScript . (Anmutiger Abbau bedeutet, dass der Browser, wenn JavaScript nicht unterstützt wird, auf natürliche Weise auf nicht geskriptete Funktionalität zurückgreifen oder sich „abbauen“.) Das dritte Prinzip erleichtert das Lesen und Verwalten von Code leichter.
Bereitstellung von Benutzern, die kein JavaScript (progressive Verbesserung) haben Der erste Punkt deckt eine überraschend große und ständig wachsende Reihe von Geräten ab, darunter kleine Bildschirme wie PDAs, Mittelbildungsgeräte, einschließlich WebTV und der Sony PSP sowie Legacy JavaScript-Browser wie Opera 5 und Netscape 4. Der letzte Punkt in der obigen Liste ist wohl die am wenigsten wahrscheinlich (abgesehen von anderen Entwicklern, die den Anwalt des Teufels spielen!), Aber die Gründe sind nicht so wichtig: Einige Benutzer haben einfach kein JavaScript, und wir sollten sie aufnehmen. Es gibt keine Möglichkeit, die Anzahl der Benutzer, die in diese Kategorie geraten
Lösung
Obwohl es sich um eine fundierte Idee handelt, ist diese Lösung in der Praxis im Laufe der Zeit weniger nützlich geworden, da NoScript nicht durch Fähigkeiten unterscheiden kann. Ein Browser, der begrenzte JavaScript-Unterstützung bietet, kann kein kompliziertes Skript ausführen, aber solche Geräte sind Skript-fähige Browser, sodass sie auch das NoScript-Element nicht analysieren. Diese Browser würden nichts haben. Ein besserer Ansatz für dieses Problem besteht darin, mit statischer HTML zu beginnen und dann mit Scripting dynamische Verhaltensweisen in diesem statischen Inhalt zu ändern oder hinzuzufügen. Schauen wir uns ein einfaches Beispiel an. Die bevorzugte Technik zur Herstellung von DHTML -Menüs verwendet eine ungeordnete Liste als Hauptmenüstruktur. Wir werden das gesamte Kapitel 15, DHTML -Menüs und die Navigation an dieses Thema widmen, aber dieses kurze Beispiel zeigt den Punkt:
Aber wie wir bereits gesehen haben, wird eine breite Palette von Geräten durch dieses Netz fallen, da die Unterstützung von JavaScript nicht mehr ein All-Ore-oder-nichts-Vorschlag ist. Der obige Ansatz liefert Standardinhalte für alle Geräte und wendet Skriptfunktionen nur an, wenn er funktioniert. Dieser Skriptansatz wird im Volksmund als progressive Verbesserung bezeichnet und es ist eine Methodik, die wir in diesem Buch verwenden. Fragen Sie nicht! Weder diese Technik noch das NoScript -Element sollten verwendet werden, um eine Nachricht hinzuzufügen, die lautet: "Bitte schalten Sie JavaScript ein, um fortzufahren." Im besten Fall ist eine solche Nachricht anmaßend („Warum sollte ich?“); Im schlimmsten Fall kann es nicht hilfreich sein ("Ich kann nicht!") Oder bedeutungslos ("Was ist JavaScript?"). Genau wie diese Spritzpages mit "Bitte aktualisieren Sie Ihren Browser", sind diese Nachrichten für den durchschnittlichen Webbenutzer genauso nützlich wie ein Straßenschild mit der Aufschrift "Bitte verwenden Sie ein anderes Auto". Gelegentlich stehen Sie möglicherweise mit einer Situation konfrontiert, in der äquivalente Funktionen ohne JavaScript einfach nicht bereitgestellt werden können. In solchen Fällen denke ich, dass es in Ordnung ist, eine statische Nachricht zu haben, die den Benutzer über diese Inkompatibilität informiert (natürlich nicht technisch). Versuchen Sie jedoch zum größten Teil, diese Art von Botschaft zu vermeiden, es sei denn, dies ist buchstäblich der einzige Weg. Inhalt von Verhaltensweisen trennen bedeutet, unterschiedliche Aspekte der Konstruktion einer Webseite auseinander zu halten. Jeffrey Zeldman bezeichnet dies als den „dreibeinigen Stuhl“ der Webentwicklung (Zeldman, J. Designing mit Webstandards. New Riders, 2003)-bestehend aus Inhalten (HTML), Präsentation (CSS) und Verhalten (JavaScript)-was nicht nur den Unterschied in der Funktionsweise des Aspekts betont.
Lösung
Aber ein viel besserer Ansatz ist es, die Inline -Ereignishandler vollständig zu vermeiden. Stattdessen können wir das DOMR -Model (DOMR -Objektmodell) verwenden, um die Ereignishandler an Elemente im HTML -Dokument zu binden. Das DOM ist eine Standard -Programmierschnittstelle, mit der Sprachen wie JavaScript auf den Inhalt von HTML -Dokumenten zugreifen können und die Notwendigkeit eines JavaScript -Codes im HTML -Dokument selbst beseitigt. In diesem Beispiel würde unser HTML -Code wie Folgendes aussehen: Hier ist das Scripting, das wir verwenden würden: Dieser Ansatz ermöglicht es uns, Ereignishandler hinzuzufügen, zu entfernen oder zu ändern, ohne die HTML bearbeiten zu müssen, und da das Dokument selbst nicht auf das Skripten angewiesen ist, oder auf das Skripting beziehen, werden Browser, die JavaScript nicht verstehen, nicht davon beeinflusst. Diese Lösung bietet auch die Vorteile der Wiederverwendbarkeit, da wir die gleichen Funktionen nach Bedarf an andere Elemente binden können, ohne die HTML bearbeiten zu müssen. Diese Lösung hängt von unserer Fähigkeit ab, über das DOM auf Elemente zuzugreifen, die wir in Kapitel 5 ausführlich behandeln und das Modell des Dokumentobjekts navigieren. Die Vorteile der Trennung Wenn wir eine gute Trennung von Inhalten und Verhalten praktizieren, erhalten wir nicht nur einen praktischen Nutzen in Bezug auf einen reibungsloseren Abbau, sondern auch den Vorteil des Denkens in Bezug auf die Trennung. Da wir die HTML und JavaScript getrennt haben, anstatt sie zu kombinieren, vergessen wir, wenn wir uns die HTML ansehen, weniger wahrscheinlich, dass seine Kernfunktion darin besteht
Andy Clarke bezieht sich auf die Web -Standards, die eine nützliche Analogie darstellt. Eine Kleinigkeit sieht so aus, wie eine gute Website sollte: Wenn Sie sich die Schüssel ansehen, können Sie alle separaten Schichten sehen, aus denen das Dessert besteht. Das Gegenteil davon könnte ein Obstkuchen sein: Wenn Sie sich den Kuchen ansehen, können Sie nicht erkennen, was jeder unterschiedliche Zutat ist. Alles, was Sie sehen können, ist eine Masse von Kuchen.
Es ist wichtig zu beachten, dass Sie es nicht tun können, wenn Sie einen Ereignishandler an ein Element wie dieses binden, wenn das Element tatsächlich existiert. Wenn Sie das vorhergehende Skript so in den Kopfabschnitt einer Seite einstellen, würde es Fehler melden und nicht funktionieren, da das Inhaltsdiv nicht an dem Punkt gerendert wurde, an dem das Skript verarbeitet wird. Die direkteste Lösung besteht darin, den Code in einen Last -Ereignis -Handler zu setzen. Dort wird es immer sicher sein, da das Lastereignis erst nach dem vollständigen Dokument ausgelöst wurde:
Das Problem mit dem Ladeereignishandler ist, dass nur ein Skript auf einer Seite es verwenden kann. Wenn zwei oder mehr Skripte versuchen, Ereignishandler zu laden, überschreibt jedes Skript den Handler des, der vor ihm kam. Die Lösung für dieses Problem besteht darin, moderner auf das Lastereignis zu reagieren. Wir werden uns das in Kürze im Abschnitt ansehen, in dem "mehrere Skripte zum Arbeiten auf derselben Seite abgerufen werden". In vielen JavaScript -Operationen sind Zahnspangen und Semikolons optional. Gibt es einen Wert, wenn sie nicht wesentlich sind? Lösung Obwohl Zahnspangen und Semikolons oft optional sind, sollten Sie sie immer einbeziehen. Dies erleichtert das Lesen von Code - von anderen und selbst in Zukunft - und hilft Ihnen, Probleme zu vermeiden, wenn Sie den Code in Ihren Skripten wiederverwenden und neu organisieren (was häufig ein optionales Semikolon wesentlich macht). zum Beispiel ist dieser Code perfekt gültig: Dieser Code ist dank eines Prozesses im JavaScript -Interpreter namens Semikolon -Insertion gültig. Immer wenn der Dolmetscher zwei Codefragmente findet, die durch eine oder mehrere Zeilenunterbrechungen getrennt sind, und diese Fragmente würden nicht sinnvoll sein, wenn sie auf einer einzigen Linie wären, behandelt der Dolmetscher sie, als ob ein Semikolon zwischen ihnen existiert. Durch einen ähnlichen Mechanismus können die Zahnspangen, die normalerweise den Code in IF-ELSE-Anweisungen umgeben, aus der Syntax abgeleitet werden, obwohl sie nicht vorhanden sind. Stellen Sie sich diesen Prozess als den Interpreter vor, der die fehlenden Codeelemente für Sie hinzufügt. Obwohl diese Codeelemente nicht immer erforderlich sind, ist es einfacher, sie zu verwenden, wenn sie erforderlich sind, und das Lesen des resultierenden Codes leichter, wenn Sie sie konsistent verwenden. Unser obiger Beispiel wäre besser so wie folgt: Diese Version ist die ultimative Lesbarkeit der Code: Verwenden von Funktionsliteralen Wenn Sie mit den Feinheiten der JavaScript -Sprache erfahren, wird es für Sie üblich, Funktionsliterale zu verwenden, um nach Bedarf anonyme Funktionen zu erstellen und sie JavaScript -Variablen und Objekteigenschaften zuzuweisen. In diesem Zusammenhang sollte die Funktionsdefinition von einem Semikolon folgen, das die variable Zuordnung beendet: var sayomethething = function (message) Bevor ein Skript aufregende Dinge tun kann, müssen Sie es in eine Webseite laden. Es gibt zwei Techniken dafür, von denen eine deutlich besser ist als die andere. Lösung Die erste und direkteste Technik besteht darin, Code direkt in ein Skriptelement zu schreiben, wie wir bereits gesehen haben: Das Problem mit dieser Methode ist, dass der Inhalt als wörtlicher Text in Legacy- und Nur-Text-Browsern-diejenigen, die das Skriptelement überhaupt nicht unterstützen-als wörtlicher Text gerendert werden können. Eine bessere Alternative, die dieses Problem vermeidet, besteht immer darin, das Skript in eine externe JavaScript -Datei zu füllen. So sieht das aus: Dies lädt eine externe JavaScript-Datei namens What-is-javascript.js. Die Datei sollte den Code enthalten, den Sie sonst in das Skriptelement wie folgt einfügen würden: Wenn Sie diese Methode verwenden, ignorieren Browser, die das Skriptelement nicht verstehen, und macht keinen Inhalt (da das Element leer ist), aber Browser, die verstehen, dass es das Skript lädt und verarbeitet. Dies hilft, Skript- und Inhalte getrennt zu halten, und ist weitaus einfacher aufrechterhalten. Sie können dasselbe Skript auf mehreren Seiten verwenden, ohne Kopien des Codes in mehreren Dokumenten verwalten zu müssen. Diskussion Sie können die Empfehlung in Frage stellen, Code nicht direkt im Skriptelement zu verwenden. "Kein Problem", könnten Sie sagen. "Ich werde nur HTML -Kommentare darum setzen." Nun, ich müsste dem nicht zustimmen: Verwenden von HTML -Kommentaren, um Code zu "verbergen", ist eine sehr schlechte Angewohnheit, die wir vermeiden sollten. HTML -Kommentare in Bezug auf Code Ein validierender Parser ist nicht erforderlich, um Kommentare zu lesen, geschweige denn zu verarbeiten. Die Tatsache, dass JavaScript überhaupt kommentierte, ist ein Anachronismus-ein Rückfall in eine alte, veraltete Praxis, die eine Annahme über das Dokument macht, das möglicherweise nicht zutrifft: Es wird davon ausgegangen, dass die Seite einem nicht validierenden Parser serviert wird.
ändern
ist normalerweise kein Problem, aber wenn es sich um ein Dateieingangsfeld handelt (z. B.
letztendlich wird JavaScript möglicherweise überhaupt nicht unterstützt. JavaScript Best Practices legen einen starken Schwerpunkt auf die Frage, was Sie für Personen tun sollten, deren Browser nicht unterstützen, Scripting, die Scripting ausgeschaltet haben, oder die aus einem anderen Grund nicht mit dem Skript interagieren können (z. B. nutzt der Benutzer eine assistive Technologie, die Skripts nicht unterstützt).
Dieses endgültige Problem ist am schwierigsten, und wir werden uns auf Lösungen für dieses Problem in Kapitel 16, JavaScript und Barrierefreiheit konzentrieren. In diesem Abschnitt möchte ich drei Kernprinzipien eines guten JavaScripts ansehen: unauffälliges Scripting - Trennung von Inhalten von Verhalten
Es gibt mehrere Gründe, warum Benutzer möglicherweise kein JavaScript haben:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Diskussion
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Inhalt von Verhalten trennen (unauffällig Scripting)
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Wir können die Situation verbessern, indem wir den Code übernehmen, der die Arbeit erledigt und sie in eine Funktion abstrahiert: <script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Definieren einer Funktion, um die Arbeit für uns zu erledigen<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Verwenden von Zahnspangen und Semikolonen (konsistente Codierungspraxis)
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
{
...
}; Hinzufügen eines Skripts zu einer Seite
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
technisch gesehen sollte der Wert Text/ECMascript sein, aber Internet Explorer versteht das nicht. Persönlich wäre ich glücklicher, wenn dies der Fall wäre, einfach weil JavaScript (ironischerweise) ein Wort ist, das ich große Schwierigkeiten habe - ich habe die Zählung der Häufigkeit verloren, wenn ein Skriptfehler aufgetreten ist, weil ich type = "text/javsacript" geschrieben habe.
.
Erhalten Sie mehrere Skripte, um auf derselben Seite zu funktionieren
Wenn mehrere Skripte nicht zusammenarbeiten, liegt es fast immer daran, dass die Skripte Event -Handler für dasselbe Ereignis für ein bestimmtes Element zuweisen möchten. Da jedes Element für jedes Ereignis nur einen Handler haben kann, überschreiben sich die Skripte gegenseitig.
Lösung
Der übliche Verdächtige ist der Lade -Ereignis -Handler des Fensterobjekts, da nur ein Skript auf einer Seite dieses Ereignis verwenden kann. Wenn zwei oder mehr Skripte es verwenden, überschreibt der letzte diejenigen, die davor gekommen sind.
wir konnten mehrere Funktionen in einem einzigen Lasthandler wie folgt aufrufen:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
, aber wenn wir diesen Code verwendet haben, wären wir an einen einzelnen Code gebunden, aus dem wir zum Ladezeit alles tun müssten, was wir brauchten. Eine bessere Lösung würde ein Mittel zum Hinzufügen von Last -Ereignis -Handlern bieten, die nicht mit anderen Handlern in Konflikt stehen.
Wenn die folgende einzelne Funktion aufgerufen wird, können wir eine beliebige Anzahl von Lastereignishandlern zuweisen, ohne dass eine von ihnen widersprüchlich ist:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>
Sobald diese Funktion vorhanden ist, können wir sie jederzeit verwenden:
<div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'">
Sie bekommen die Idee!
Diskussion
JavaScript enthält Methoden zum Hinzufügen (und Entfernen) von Ereignishörern, die ähnlich wie Event -Handler funktionieren, es jedoch mehreren Hörern ermöglichen, ein einzelnes Ereignis für ein Element zu abonnieren. Leider unterscheidet sich die Syntax für Event -Hörer im Internet -Explorer völlig als in anderen Browsern: Wo der IE eine proprietäre Methode verwendet, implementieren andere den W3C -Standard. Wir werden diese Dichotomie häufig auf diese Dichotomie stoßen, und wir werden sie in Kapitel 13, Basic Dynamic HTML.
Die W3C -Standardmethode heißt AddEventListener:
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Die IE -Methode heißt AttafEvent:
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
Wie Sie sehen können, nimmt das Standardkonstrukt den Namen des Ereignisses (ohne das Präfix "On"), gefolgt von der Funktion, die beim Auftreten des Ereignisses aufgerufen werden soll, und ein Argument, das das Ereignisblasen steuert (siehe Kapitel 13, grundlegende dynamische HTML, um weitere Einzelheiten dazu zu erhalten). Die IE -Methode nimmt den Ereignis Handler Namen (einschließlich des Präfix " auf "), gefolgt vom Namen der Funktion.
Um diese zusammenzustellen, müssen wir einige Tests hinzufügen, um die Existenz jeder Methode zu überprüfen, bevor wir versuchen, sie zu verwenden. Wir können dies mit dem JavaScript -Operator -Typeof tun, der verschiedene Datenarten identifiziert (als "String", "Nummer", "boolean", "Objekt", "Array", "Funktion" oder "nicht definiert"). Eine Methode, die nicht existiert, wird "undefiniert" zurückgegeben.
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Es gibt eine zusätzliche Komplikation: In der Opera stammt das Lastereignis, das mehrere Ereignishörer auslösen kann, aus dem Dokumentobjekt, nicht aus dem Fenster. Wir können jedoch nicht nur ein Dokument verwenden, da dies in älteren Mozilla -Browsern (wie Netscape 6) nicht funktioniert. Um eine Route durch diese Macken zu planen
Schließlich besteht die Fallback-Lösung für Browser, die keine dieser Methoden unterstützen (MAC, dh 5, in der Praxis), mehrere Event-Handler mit mehreren alten Art zusammenzuhalten, damit sie wiederum aufgerufen werden, wenn das Ereignis auftritt. Wir tun dies, indem wir einen neuen Ereignishandler dynamisch erstellen, der einen vorhandenen Handler aufruft, bevor er den neu zugewiesenen Handler aufruft, wenn das Ereignis auftritt. (Diese Technik wurde von Simon Willison Pionierarbeit.)
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>Machen Sie sich keine Sorgen, wenn Sie die Einzelheiten dafür nicht verstehen, wie dies funktioniert. Wir werden die Techniken untersuchen, die in Kapitel 13, grundlegend dynamischer HTML, viel detaillierter sind. Dort erfahren wir, dass Ereignishörer nicht nur für das Load-Ereignis, sondern für jede Art von ereignisgesteuerter Skript nützlich sind.
JavaScript -Quellcode
verstecken
Wenn Sie jemals etwas geschaffen haben, auf das Sie stolz sind, werden Sie den Wunsch verstehen, Ihr geistiges Eigentum zu schützen. JavaScript im Web ist jedoch von Natur aus eine Open-Source-Sprache; Es kommt zum Browser in seiner Quellform. Wenn der Browser ihn ausführen kann, kann eine Person ihn lesen.
Es gibt einige Anwendungen im Web, die behaupten, die Verschlüsselung der Quellcode anzubieten. In Wirklichkeit können Sie jedoch nichts tun, um den Quellcode zu verschlüsseln, den ein anderer Codierer in Sekunden nicht entschlüsseln konnte. Tatsächlich verursachen einige dieser Programme tatsächlich Probleme: Sie formatieren häufig den Code so neu, dass es langsamer, weniger effizient oder einfach nur kaputt ist. Mein Rat? Halten Sie sich wie die Pest von ihnen fern.
Aber trotzdem bleibt der Wunsch, Code zu verbergen, bleibt. Es gibt etwas, das Sie tun können, um den Code, den Ihre Benutzer sehen können, zu verschleiern, wenn nicht.
Lösung
Code, der von allen Kommentaren und unnötigem Whitespace ausgestattet wurde, ist sehr schwer zu lesen. Wie Sie vielleicht erwarten, ist es äußerst schwierig, einzelne Funktionsbits aus einem solchen Code zu extrahieren. Die einfache Technik, Ihre Skripte auf diese Weise zu komprimieren, kann alle außer dem entschlossensten Hacker abgeben. Nehmen Sie beispielsweise diesen Code:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>Wir können diesen Code in die folgenden zwei Zeilen komprimieren, indem wir einfach unnötiges Whitespace entfernen:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Denken Sie jedoch an dieses wichtige Wort - unnötig. Einige Whitespace sind unerlässlich, z. B. die einzelnen Räume nach var und typeof.
Diskussion
Diese Praxis hat abgesehen von den Vorteilen der Verschleierung. Skripte, die von Kommentaren und unnötigem Whitespace gestreift werden, sind kleiner; Daher werden sie schneller geladen und können schneller verarbeiten.Aber bitte denken Sie daran, dass der Code mithilfe von Semikolon -Zeilen -Terminatoren und -Ekwaren streng formatiert bleiben muss (wie wir in dem Abschnitt mit dem Titel „Verwenden von Zahnspangen und Semikolonen (konsistente Codierungspraxis)“); Andernfalls wird die Entfernung von Linienbrüchen zusammenlaufen und letztendlich Fehler verursacht.
Bevor Sie mit der Komprimierung beginnen, denken Sie daran, eine Kopie des Skripts zu erstellen. Ich weiß, dass es offensichtlich erscheint, aber ich habe diesen Fehler oft gemacht, und es ist umso ärgerlicher, so elementar zu sein! Was ich heutzutage mache, ist, Skripte in ihrem voll beabstandeten und kommentierten Formular zu schreiben und zu verwalten, und führen Sie sie dann durch eine Reihe von Such-/Ersatzausdrücken aus, kurz bevor sie veröffentlicht werden. Normalerweise behalte ich zwei Kopien eines Skripts namens MyScript.js und MyScript-comented.js oder ähnliches.
Wir werden in Kapitel 20 auf dieses Thema zurückkehren und das Tempo aufrechterhalten, wo wir dies unter einer Reihe von Techniken zur Verbesserung der Geschwindigkeit und Effizienz von Skripten diskutieren und die Menge an physischen Raum verringern, die sie benötigen.
Debuggen eines Skripts
Debugging ist der Prozess des Findens und (hoffentlich) Behebung von Fehler. Die meisten Browser haben eine Art Fehlerberichterstattung integriert, und ein paar externe Debugger sind auch untersucht.
Verständnis der integrierten Fehlerberichterstattung eines Browsers
Opera, Mozilla -Browser (wie Firefox) und Internet Explorer haben alle anständige Funktionen für Fehlerberichterstattung integriert, aber Opera und Mozillas Debugging -Tools sind die nützlichsten.
Opera
Öffnen Sie die JavaScript -Konsole aus Tools> Advanced> JavaScript -Konsole. Sie können es auch so einstellen, dass es automatisch geöffnet wird, wenn ein Fehler auftritt, indem Sie zu Tools> Einstellungen> Erweiterung> Inhalt gehen, und dann auf die Schaltfläche JavaScript -Optionen klicken, um das Dialogfeld zu öffnen, und das Öffnen der geöffneten JavaScript -Konsole auf Fehler.
Firefox und andere Mozilla -Browser
Öffnen Sie die JavaScript -Konsole aus Tools> JavaScript -Konsole.
Internet Explorer für Windows
Gehen Sie zu Tools> Internetoptionen> Erweitert und deaktivieren Sie die Option Deaktivieren Sie das Skript -Debugging und überprüfen Sie die Option an. Zeigen Sie eine Benachrichtigung über jeden Skriptfehler an, um ein Dialog zu erstellen, wenn ein Fehler auftritt.
Internet Explorer für Mac Gehen Sie zu Explorer> Einstellungen> Webbrowser> Webinhalt und überprüfen
Safari enthält standardmäßig keine Fehlerberichterstattung, aber die jüngsten Versionen haben ein "geheime" Debug -Menü, einschließlich einer JavaScript -Konsole, die Sie durch die Eingabe des folgenden Terminalbefehls aktivieren können. (Die $ repräsentiert die Eingabeaufforderung und darf nicht tippt werden.)
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Sie können auch eine Erweiterung namens Safari Enhancer verwenden, die eine Option enthält, um JavaScript -Nachrichten in die Mac OS -Konsole abzugeben. Diese Nachrichten sind jedoch nicht sehr hilfreich.
Verständnis der verschiedenen Browser -Konsolennachrichten kann ein wenig üben, da jeder Browser so unterschiedliche Informationen liefert. Hier ist ein Beispiel für einen Fehler - ein verwickelter Funktionsaufruf:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
Firefox gibt einen kurzen, aber sehr genauen Bericht, der die Zeilennummer enthält, bei der der Fehler aufgetreten ist, und eine Beschreibung, wie in Abbildung 1.1 gezeigt, „die JavaScript -Fehlerkonsole in Firefox“.
Abbildung 1.1. Die JavaScript -Fehlerkonsole in Firefox
AS Abbildung 1.2, „Die JavaScript -Konsole in Opera“ zeigt, dass Opera einen extrem ausführlichen Bericht enthält, einschließlich einer Backtrace zu dem Ereignis, aus dem der Fehler entstanden ist, eine Benachrichtigung der Linie, in der sie auftrat, und eine Beschreibung.
Eine Backtrace hilft, wenn ein Fehler in Code auftritt, der ursprünglich von einem anderen Code genannt wurde. Wenn ein Ereignishandler beispielsweise eine Funktion aufruft, die eine zweite Funktion aufruft, und an diesem Punkt der Fehler auftritt. Die Konsole von Opera verfolgt diesen Prozess in jeder Phase wieder auf das Ursprungereignis oder auf Anruf.
Internet Explorer gibt den in Abbildung 1.3, „die JavaScript -Konsole in Windows IE“ gezeigte ziemlich grundlegende Art von Bericht. Es liefert die Anzahl der Zeile, an der der Interpreter auf den Fehler gestoßen ist (dies kann möglicherweise nicht in der Nähe des tatsächlichen Ortes des tatsächlichen Problems liegen) sowie eine Zusammenfassung des Fehlertyps, obwohl die Besonderheiten des Fehlers selbst nicht erläutert werden. (Internet Explorer ist besonders schlecht darin, Fehler in externen JavaScript -Dateien zu finden. Oft wird die Zeilennummer gemeldet, da der Fehlerspeicherort tatsächlich die Anzahl der Zeile ist, in der das Skript in der HTML -Datei geladen wird.)
Abbildung 1.2. Die JavaScript -Konsole in Opera
Abbildung 1.3. Die JavaScript -Konsole in Windows dh
Wie Sie wahrscheinlich gesammelt haben, bin ich nicht übermäßig beeindruckt von der Fehlerberichterstattung von Internet Explorer, aber es ist weitaus besser als nichts: Zumindest wissen Sie, dass ein Fehler aufgetreten ist.
Verwenden von Alarm
Die Warnungsfunktion ist ein sehr nützliches Mittel zur Analyse von Fehlern. Sie können sie zu jedem Zeitpunkt in einem Skript verwenden, um Objekte und Variablen zu untersuchen, um festzustellen, ob sie die erwarteten Daten enthalten. Wenn Sie beispielsweise eine Funktion mit mehreren bedingten Zweigen haben, können Sie innerhalb jeder Bedingung eine Warnung hinzufügen, um herauszufinden, welche ausgeführt wird:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Vielleicht kommt der Wert seit Jahren nicht als Zahl zurück, so wie es sollte. Sie können zum Beginn Ihres Skripts eine Warnung hinzufügen, die die Variable testet, um zu sehen, welcher Typ es ist:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
theoretisch können Sie eine beliebige Menge an Informationen in einen Alarmdialog einfügen, obwohl eine sehr lange Datenzeichenfolge ein so breites Dialogfeld erstellen kann, dass einige der Informationen abgeschnitten oder außerhalb des Fensters abgeschnitten würden. Sie können dies vermeiden, indem Sie die Ausgabe mit Escape -Zeichen wie N für einen Zeilenumbruch formatieren.
Verwenden von Try-Catch
Das Try-Catch-Konstrukt ist eine unglaublich nützliche Möglichkeit, ein Skript zu erhalten, um „etwas auszuprobieren“, und damit Sie alle Fehler behandeln können. Das grundlegende Konstrukt sieht so aus:
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>
Wenn Sie sich nicht sicher sind, woher ein Fehler kommt, können Sie einen Versuchscargen um einen sehr großen Codeblock einbinden, um den allgemeinen Fehler zu fangen, und ihn dann zunehmend kleinere Codebrocken innerhalb dieses Blocks herum verschärfen. Sie können beispielsweise die erste Hälfte einer Funktion (an einem bequemen Punkt im Code) und dann um die zweite Hälfte um einfügen, um zu sehen, wo der Fehler auftritt. Sie könnten dann die Verdächtige die Hälfte an einem bequemen Punkt erneut teilen und weitermachen, bis Sie die problematische Linie isoliert haben.
<div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'">
oft benutze ich einen Iterator, um das gesamte Objekt zu durchlaufen und herauszufinden, was es sagt:
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Schreiben auf die Seite oder das Fenster
Wenn Sie beim Debuggen eine Menge Daten untersuchen oder mit Daten zu tun haben, die kompliziert formatiert sind, ist es oft besser, diese Daten direkt auf eine Seite oder ein Popup -Fenster zu schreiben, als mit vielen Warndialogen zu versuchen. Wenn Sie Daten in einer Schleife untersuchen, können Sie am Ende Hunderte von Dialogen generieren, von denen Sie jede manuell entlassen müssen? Ein sehr langwieriger Prozess.
In solchen Situationen können wir die innerhtml -Eigenschaft eines Elements verwenden, um die Daten auf die Seite zu schreiben. Hier ist ein Beispiel, in dem wir eine Liste unter Verwendung des Inhalts eines Arrays (Daten) erstellen und sie dann in einen Testdiv schreiben:
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
Wir können die Daten auch in ein Popup schreiben, was nützlich ist, wenn es keinen bequemen Ort gibt, um sie auf die Seite zu setzen:
<div >
Sie können die Ausgabe formatieren, wie Sie möchten, und sie verwenden, um Daten auf eine Weise zu strukturieren, die es Ihnen erleichtert, den Fehler zu finden.
Wenn Sie mit kleineren Datenmengen arbeiten, können Sie einen ähnlichen Vorteil erzielen, indem Sie die Daten an das Haupttitelelement schreiben:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Dieser endgültige Ansatz ist am nützlichsten bei der Verfolgung von Daten, die sich kontinuierlich oder schnell ändern, z.
Verwenden eines externen DebuggersIch kann zwei Debugger empfehlen:
- Venkman für Mozilla und Firefox
- Microsoft -Skript -Debugger für Windows Internet Explorer
externe Debugger sind komplexe Software -Teile, und es kann sich Zeit dauern, bis Entwickler lernen, wie man sie ordnungsgemäß benutzt. Sie können sehr nützlich sein, um logische Fehler hervorzuheben und als eigenständige Lernwerkzeuge wertvoll zu sein. Sie sind jedoch eingeschränkt in ihrer Fähigkeit, bei Browser -Inkompatibilitäten zu helfen: Sie sind dort nur nützlich, wenn der Fehler, den Sie suchen, im Browser, den der Debugger unterstützt!
strenge Warnungen
Wenn Sie die JavaScript -Konsole in Firefox öffnen, werden Sie feststellen, dass sie Optionen enthält, um Fehler und Warnungen anzuzeigen. Warnungen benachrichtigen Sie über den Code, dass er zwar nicht per se fehlerhaft ist, aber auf automatische Fehlerbehebung beruht, eine veraltete Syntax verwendet oder in irgendeiner Weise für die ECMascript -Spezifikation nicht wahr ist. (Um diese Warnungen zu sehen, kann es erforderlich sein, strenge Berichterstattung durch Eingabe der Adresse zu ermöglichen: Konfiguration und Einstellung von JavaScript.options.Strict to true.)
zum Beispiel wird die variable Frucht im folgenden Code zweimal definiert:
Wir hätten den zweiten VAR weglassen sollen, da Var zum ersten Mal eine Variable deklariert wird, die wir bereits gemacht haben. Abbildung 1.4, „Die JavaScript -Warnungenkonsole in Firefox“ zeigt, wie die JavaScript -Konsole unseren Fehler als Warnung hervorhebt.
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
Abbildung 1.4. Die JavaScript -Warnungenkonsole in Firefox
Es gibt mehrere codierende Fehltritte, die solche Warnungen verursachen können. Zum Beispiel:
- Eine Variable neu deklarieren-dies erzeugt die Warnung „Neuausrichtung des VAR-Namens“, wie wir gerade gesehen haben.
- In erster Linie keine Variable deklariert - diese Aufsicht erzeugt die Warnung „Zuweisung zum nicht deklarierten Variablennamen“. Dies kann zum Beispiel entstehen, wenn die erste Zeile unseres Code einfach fruit = 'mango'; gelesen wird
- unter der Annahme der Existenz eines Objekts - diese Annahme erzeugt die Warnung „Referenz auf undefinierte Eigenschaftsname“.
Eine Testbedingung wie if (document.getElementById) wird beispielsweise die Existenz der GetElementByID-Methode und die Banken über die Tatsache übernommen, dass die automatischen Fehlerbehandlungen von JavaScript eine nicht vorhandene Methode in den Browser, in dem diese Methode nicht vorhanden ist, nicht vorhanden ist. Um das gleiche Ende zu erreichen, ohne eine Warnung zu sehen, wären wir genauer und verwenden mit if (typeof document.getElementById! = 'Undefined').
Es gibt auch einige funktionsbezogene Warnungen und eine Reihe anderer verschiedener Warnungen, die meinen persönlichen Favoriten, „nutzlosen Ausdruck“, enthält, der durch eine Aussage in einer Funktion erzeugt wird, die nichts bewirkt:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Für einen gründlichen Überblick über das Thema empfehle ich Alex Vincents Artikel, der JavaScript strenge Warnungen angeht.
Warnungen spielt keine Rolle in dem Sinne, dass sie nicht verhindern, dass unsere Skripte funktionieren, sondern dass wir uns mit Warnungen einsetzen, um eine bessere Codierungspraxis zu übernehmen, was letztendlich Effizienzvorteile schafft. Beispielsweise laufen Skripte in Mozilla schneller, wenn es keine strengen Warnungen gibt, ein Thema, das wir uns in Kapitel 20 erneut ansehen werden, um das Tempo aufrechtzuerhalten.
Typ -Konvertierungstest
Obwohl wir uns nicht auf die Typumwandlung verlassen sollten, um einen Wert zu testen, der möglicherweise undefiniert ist, ist es vollkommen in Ordnung, dies für einen Wert zu tun, der null ist, da die ECMascript -Spezifikation erfordert, dass Null auf False bewertet wird. Nachdem beispielsweise die Existenz von GetElementById unter Verwendung des Typs von Operator wie oben gezeigt bereits festgestellt hat, ist es von da an von da an bis zum Testen einzelner Elemente wie unten gezeigt, da GetElementById Null für nicht existierende Elemente im DOM:
zurückgibt<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>
Zusammenfassung
In diesem Kapitel haben wir über Best-Practice-Ansätze für Skripts gesprochen, mit denen unser Code leichter zu lesen und verwaltet wird, und ermöglicht es ihm, in nicht unterstützten Geräten anmutig zu degradieren. Wir haben auch begonnen, einige der Techniken vorzustellen, die wir benötigen, um nützliche Skripte zu erstellen, einschließlich des allgegenwärtigen Last -Ereignis -Listeners, den wir für fast jede Lösung in diesem Buch verwenden!
Wir haben bereits einige ziemlich fortgeschrittene Sachen behandelt. Machen Sie sich also keine Sorgen, wenn einige davon schwierig waren.
Kapitel 5. Navigieren im Dokumentobjektmodell
Browser geben JavaScript -Programme zu Zugriff auf die Elemente auf einer Webseite über das Dokumentobjektmodell (DOM) - eine interne Darstellung der Überschriften, Absätze, Listen, Stile, IDs, Klassen und aller anderen Daten, die in der HTML auf Ihrer Seite zu finden sind.
Der DOM kann als ein Baum angesehen werden, der aus miteinander verbundenen Knoten besteht. Jedes Tag in einem HTML -Dokument wird durch einen Knoten dargestellt. Alle Tags, die in diesem Tag verschachtelt sind, sind Knoten, die als Kinder oder Zweige im Baum mit ihm verbunden sind. Jeder dieser Knoten wird als Elementknoten bezeichnet. (Streng genommen repräsentiert jeder Elementknoten ein Tag von Tags-die Start- und End-Tags eines Elements (z. B.
und
)-oder ein einzelnes selbstklammiges Tag (z. B.oder
in xhtml).) Es gibt mehrere andere Arten von Knoten; Am nützlichsten sind der Dokumentknoten, den Textknoten und den Attributknoten. Der Dokumentknoten repräsentiert das Dokument selbst und ist die Wurzel des DOM -Baums. Textknoten repräsentieren den Text zwischen den Tags eines Elements. Attributknoten repräsentieren die in dem Eröffnungs -Tag eines Elements angegebenen Attribute. Betrachten Sie diese grundlegende HTML -Seitenstruktur:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Das DOM für diese Seite könnte als Abbildung 5.1 visualisiert werden, „Die Dom -Struktur einer einfachen HTML -Seite, die als Baumhierarchie visualisiert ist“.
Jede Seite hat einen Dokumentknoten, aber ihre Nachkommen stammen aus dem Inhalt des Dokuments selbst. Durch die Verwendung von Elementknoten, Textknoten und Attributknoten ist jede Informationen auf einer Seite über JavaScript zugänglich.
Das DOM ist jedoch nicht nur auf HTML und JavaScript beschränkt. So erklärt die W3C -DOM -Spezifikationsstelle die Angelegenheit:
Das Dokumentobjektmodell ist eine Plattform- und Sprachneutralschnittstelle, mit der Programme und Skripte dynamisch auf den Inhalt, die Struktur und den Stil von Dokumenten zugreifen und aktualisieren können.
Obwohl die Mischung aus JavaScript und HTML die häufigste Kombination von Technologien ist, in denen das DOM verwendet wird, kann das Wissen, das Sie aus diesem Kapitel erhalten, auf eine Reihe verschiedener Programmiersprachen und Dokumenttypen angewendet werden.
Um Sie zu einem "Meister Ihrer Domain" zu machen, erklärt dieses Kapitel, wie Sie jedes Element finden, das Sie auf einer Webseite suchen, es dann ändern, neu ordnen oder vollständig löschen.
Abbildung 5.1. Die Dom -Struktur einer einfachen HTML -Seite, die als Baumhierarchie
Zugriff auf Elemente
Zugriff bietet Steuerung, Steuerung ist Strom und Sie sind ein Stromerprogrammierer, oder? Sie benötigen also Zugriff auf alles, was sich auf einer Webseite befindet. Glücklicherweise gibt JavaScript mit nur wenigen Methoden und Eigenschaften Zugriff auf jedes Element auf einer Seite.
Lösung
Obwohl es möglich ist, ein HTML -Dokument wie eine Roadmap zu navigieren? Angefangen von zu Hause aus und sich gleich einen Knoten in Richtung Ihres Ziels einarbeiten? Dies ist normalerweise eine ineffiziente Methode, um ein Element zu finden, da es viel Code erfordert, und alle Änderungen in der Struktur des Dokuments werden normalerweise Ihre Skripts neu geschrieben. Wenn Sie schnell und einfach etwas finden möchten, ist die Methode, die Sie auf der Hand tätowieren sollten.
Unter der Annahme, dass Sie über das richtige Markup verfügen, können Sie mit dem Wert von GetElementByID sofort auf ein beliebiges Element zugreifen. Stellen Sie sich beispielsweise vor, Ihre Webseite enthält diesen Code:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Sie können das ID -Attribut eines Elements verwenden, um direkten Zugriff auf das Element selbst zu erhalten:
<ul > <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> <br> <script type="text/javascript" src="menu.js"></script>Der Wert des variablen ElementRef wird nun auf das A -Element verwiesen - alle Operationen, die Sie auf ElementRef ausführen, wirken sich auf diesen genauen Hyperlink aus.
<script type="text/javascript" src="menu.js"></script> <br> <br> <noscript> <br> <ul> <br> <li><a href="/">Home</a></li> <br> <li><a href="/about/">About</a></li> <br> <li><a href="/contact/">Contact</a></li> <br> </ul> <br> </noscript>Wie aus seinem Namen ersichtlich ist, nimmt GetElementsByTagName einen Tag -Namen und gibt alle Elemente dieses Typs zurück. Angenommen, wir haben diesen HTML -Code:
<div <br> onmouseover="this.style.borderColor='red'" <br> onmouseout="this.style.borderColor='black'">Wir können eine Sammlung abrufen, die jedes der Hyperlinks wie SO enthält:
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')"> Der Wert der variablen Verankerungen wird nun eine Sammlung von Elementen sein. Die Sammlungen ähneln Arrays, da jede der Elemente in einer Sammlung mithilfe von Quadratklassennotation verwiesen wird und die Elemente numerisch mit Null indexiert sind. Die von GetElementsByTagName zurückgegebene Sammlung sortiert die Elemente nach ihrer Quellenreihenfolge, sodass wir auf jeden der Links verweisen können:
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
} Verwenden dieser Sammlung können Sie die Elemente durch die Elemente iterieren und eine Operation ausführen, z.
Im Gegensatz zu GetElementById, das nur auf den Dokumentknoten aufgerufen werden kann, ist die GetElementsByTagName -Methode von jedem einzelnen Elementknoten verfügbar. Sie können den Umfang der GetElementsByTagName -Methode einschränken, indem Sie sie auf einem bestimmten Element ausführen. GetElementsByTagName wird nur Elemente zurückgeben, die Nachkommen des Elements sind, auf dem die Methode genannt wurde.
<div >
Wenn wir zwei Listen haben, aber den Links in einer Liste nur eine neue Klasse zuweisen möchten, können wir auf die Elemente ausschließlich abzielen, indem wir GetElementsByTagName auf ihrer übergeordneten Liste anrufen:
Um die Liste der Sterne abzuzielen, müssen wir einen Verweis auf das übergeordnete UL -Element erhalten und dann GetElementsByTagName direkt aufrufen:
Example 1.2. separate-content-behaviors.js <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
} <br>
<br>
var contentDiv = document.getElementById('content'); <br>
<br>
contentDiv.onmouseover = function() <br>
{ <br>
changeBorder('red'); <br>
}; <br>
<br>
contentDiv.onmouseout = function() <br>
{ <br>
changeBorder('black'); <br>
};
Der Wert der variablen Starchors wird eine Sammlung der A -Elemente in der ungeordneten Liste der Sterne sein, anstelle einer Sammlung aller Elemente auf der Seite.
window.onload = function() <br>
{ <br>
var contentDiv = document.getElementById('content'); <br>
<br>
... <br>
};
DOM 0 -Sammlungen
Auf viele „spezielle“ Elemente in einem HTML -Dokument kann mit noch direkteren Mitteln zugegriffen werden. Auf das Körperelement des Dokuments kann als Dokument zugegriffen werden. Eine Sammlung aller Formulare in einem Dokument finden Sie in document.Forms. Alle Bilder in einem Dokument finden Sie in Dokument.images. In der Tat gibt es die meisten dieser Sammlungen, seit das DOM vom W3C standardisiert wurde und üblicherweise als DOM 0 -Eigenschaften bezeichnet wird. Da die ersten Implementierungen dieser Merkmale nicht standardisiert waren, haben sich diese Sammlungen in Browsern, die sich in Richtung Standards zur Einhaltung von Standards bewegen, gelegentlich als unzuverlässig erwiesen. Frühe Versionen einiger Mozilla -Browser (z. B. Firefox) haben diese Sammlungen bei XHTML -Dokumenten beispielsweise nicht unterstützt. Die heutigen Browser leisten im Allgemeinen gute Arbeit, um diese Sammlungen zu unterstützen. Wenn Sie jedoch auf Probleme stoßen, lohnt es sich, die ausführlicheren GetElements -Bytagname -Methoden zum Zugriff auf die relevanten Elemente zu probieren. Anstelle von Dokument.body zum Beispiel können Sie verwenden: var body = document.getElementsByTagName ("Body") [0]; Diskussion Wenn Sie wirklich das DOM -Hierarchie -Element durch Element durchlaufen müssen, verfügt jeder Knoten über mehrere Eigenschaften, mit denen Sie verwandte Knoten zugreifen können:
Whitespace -Knoten
Einige Browser erstellen Whitespace -Knoten zwischen den Elementknoten in jeder Dom -Struktur, die aus einer Textzeichenfolge interpretiert wurde (z. B. einer HTML -Datei). Whitespace -Knoten sind Textknoten, die nur Whitespace (Registerkarten, Leerzeichen, neue Zeilen) enthalten, um den Code so zu formatieren, wie er in der Quelldatei geschrieben wurde.
Wenn Sie den DOM -Knoten mithilfe der obigen Eigenschaften über den Knoten durchqueren, sollten Sie diese Whitespace -Knoten immer zulassen. Normalerweise bedeutet dies, dass der von Ihnen abgerufene Knoten ein Elementknoten ist, nicht nur ein Whitespace -Knoten, der Elemente trennt. Es gibt zwei einfache Möglichkeiten, zu überprüfen, ob ein Knoten ein Elementknoten oder ein Textknoten ist. Die Knotenname eines Textknotens lautet immer "#Text", während der Knoten eines Elementknotens den Elementtyp identifiziert. Bei der Unterscheidung von Textknoten von Elementknoten ist es jedoch einfacher, die Nodetype -Eigenschaft zu überprüfen. Elementknoten haben einen Beispiel 5.9. Access_element4.js (Auszug) Mit diesen DOM-Eigenschaften können Sie Ihre Reise am HTML-Element root beginnen und in der Legende einiger zutiefst benachteiligter Fieldset begraben? Es geht nur darum, den Knoten zu folgen. JavaScript kann nicht nur vorhandene Elemente im DOM ändern. Es kann auch neue Elemente erstellen und überall in der Struktur einer Seite platzieren. Lösung Der Variable Newanchor ist ein neues Element, das in die Seite eingefügt werden kann. Namenspaces in Dokumenten mit einem XML -MIME -Typ Wenn Sie JavaScript für die Verwendung in Dokumenten mit einem MIME -Typ der Anwendung/XHTML XML (oder einem anderen XML -MIME -Typ) codieren, sollten Sie die Methode CreateLementns verwenden, um den Namespace anzugeben, für den Sie das Element erstellen: Diese Unterscheidung gilt für eine Reihe von DOM -Methoden, z. Wir werden jedoch nicht die Namespace-verstärkten Versionen dieser Methoden in diesem Buch verwenden. Simon Willison liefert eine kurze Erklärung für die Arbeit mit JavaScript und verschiedenen MIME -Typen auf seiner Website. Der Text, der in ein Element geht, ist eigentlich ein untergeordneter Textknoten des Elements, daher muss er separat erstellt werden. Textknoten unterscheiden sich von Elementknoten, sodass sie ihre eigene Erstellungsmethode haben, CreateTeXtnode: Wenn Sie einen vorhandenen Textknoten ändern, können Sie auf den Text zugreifen, den er über die NodeValue -Eigenschaft enthält. Auf diese Weise können Sie den Text in einen Textknoten abrufen und festlegen: Der Wert des Variablen -OldText ist jetzt "monoceros", und der Text in TextNode ist jetzt "pyxis". Sie können entweder einen Elementknoten oder einen Textknoten als das letzte Kind eines vorhandenen Elements mit seiner Appendchild -Methode einfügen. Diese Methode wird den neuen Knoten nach allen vorhandenen Kindern des Elements platzieren. Betrachten Sie dieses Fragment von HTML: Wir können DOM -Methoden verwenden, um am Ende des Absatzes einen weiteren Link zu erstellen und einzufügen: Der Wert des Variablen NewChild wird ein Verweis auf das neu eingefügte Element sein. Wenn wir den Status des DOM übersetzen würden, nachdem dieser Code in HTML -Code ausgeführt hatte, würde er so aussehen: Wir haben keine Attribute für das neue Element angegeben, sodass es momentan nirgendwo verknüpft ist. Der Prozess zur Angabe von Attributen wird in Kürze im Abschnitt „Lesen und Schreiben der Attribute eines Elements“ erläutert. Diskussion Es gibt drei grundlegende Möglichkeiten, wie ein neues Element oder ein Textknoten in eine Webseite eingefügt werden können. Der von Ihnen verwendete Ansatz hängt von dem Punkt ab, an dem der neue Knoten eingefügt wird: als das letzte Kind eines Elements, vor einem anderen Knoten oder als Ersatz für einen Knoten. Der Prozess der Anhänge eines Elements als letzte Kind wurde oben erklärt. Sie können den Knoten vor einem vorhandenen Knoten mit der Methode des übergeordneten Elements einfügen und unter Verwendung der Austausch -Child -Methode seines übergeordneten Elements ersetzen.
Lösung
Nehmen wir an, wir wollen diesen Absatz in eine DIV ändern: Wir müssen eine neue DIV erstellen, jedes der Kinder des Absatzes einbeziehen und dann das neue Element gegen das Alte tauschen: Die einzige unbekannte Linie hier sollte der Punkt sein, an dem ein Klon für die Kinder des Absatzes erstellt wird. Die Clonenode -Methode erzeugt eine identische Kopie des Knotens, von denen er aufgerufen wird. Indem wir diese Methode übergeben, geben wir an, dass alle Kinder dieses Elements zusammen mit dem Element selbst kopiert werden. Mit Clonenode können wir die Kinder des ursprünglichen Elements unter dem neuen Div widerspiegeln und dann den Absatz entfernen, sobald wir das Kopieren beendet haben. Während das Klonen von Knoten unter bestimmten Umständen nützlich ist, stellt sich heraus, dass es eine sauberere Möglichkeit gibt, sich diesem spezifischen Problem zu nähern. Wir können einfach die Kinderknoten des vorhandenen Absatzes in die neue DIV bewegen. DOM -Knoten können jeweils nur zu einem übergeordneten Element gehören. Das Hinzufügen der Knoten zum Div entzieht sie auch aus dem Absatz: Achten Sie darauf, dass die Knotenstruktur des DOM Die Elemente in einer Sammlung werden automatisch aktualisiert, wenn eine Änderung in der DOM auftritt - auch wenn Sie diese Sammlung in eine Variable kopieren, bevor die Änderung auftritt. Wenn Sie also aus dem DOM ein Element entfernen, das in einer Sammlung enthalten war, mit der Sie gearbeitet hatten, wird auch die Elementreferenz aus der Sammlung entfernt. Dies ändert die Länge der Sammlung sowie die Indizes aller Elemente, die nach dem entfernten Element erscheinen. Wenn Sie Operationen ausführen, die die Knotenstruktur des DOM beeinflussen - wie z. Der obige Code verwendet eine Weile -Schleife, die nur auf das erste Kind des Absatzes zugreift, da jedes Mal, wenn ein Kind umgesiedelt wird, die Länge der Kindersammlung um eins abnimmt und alle Elemente in der Sammlung sich verändern. A für die Schleife mit einer Gegenvariablen würde nicht alle Kinder korrekt behandeln, da sie davon ausgehen würde, dass der Inhalt der Sammlung während der gesamten Schleife gleich bleiben würde. Diskussion Es gibt keine einfache Möglichkeit, die Attribute eines Elements in seinen Ersatz zu kopieren. (Wenn Sie sich die DOM -Spezifikation ansehen, sieht es so aus
Lösung
Natürlich müssen Sie den Rückgabewert von removechild nicht einer Variablen zuweisen. Sie können es einfach ausführen und das Element insgesamt vergessen: Diskussion Wenn das Element, das Sie löschen, Kinder enthält, die Sie bewahren möchten (d. H. Sie möchten sie nur „auspacken“, indem Sie ihre Eltern entfernen), müssen Sie diese Kinder retten, um sicherzustellen, dass sie im Dokument bleiben, wenn ihr Elternteil entfernt wird. Sie können dies unter Verwendung der bereits erwähnten Insert-vorbe-Methode erreichen, die, wenn sie für Elemente verwendet werden, die bereits im DOM enthalten sind, sie zuerst am entsprechenden Punkt einfügt. Der Absatz in der folgenden HTML enthält mehrere Kinder: Wir können durch die Kindersammlung des Absatzes durchlaufen und jedes seiner Kinder individuell verlegt, bevor das Element selbst entfernt wird: Das DOM der Seite sieht jetzt so aus: Die am häufigsten verwendeten Teile eines HTML -Elements sind seine Attribute? Seine ID, Klasse, HREF, Titel oder eine der hundert anderen Informationen, die in ein HTML -Tag aufgenommen werden können. JavaScript ist nicht nur in der Lage, diese Werte zu lesen, sondern auch zu schreiben. Lösung Es gibt zwei Methoden zum Lesen und Schreiben der Attribute eines Elements. Mit GetAttribute können Sie den Wert eines Attributs lesen, während SetAttribute Sie schreiben können. Betrachten Sie dieses HTML: Wir könnten die Attribute des Elements wie SO lesen: Der Wert des variablen Anchorids ist "antares", und der Wert des variablen Anchortitels ist "ein weit weg". Um die Attribute des Hyperlinks zu ändern, verwenden wir setAttribute und übergeben ihm den Namen des zu ändernden Attributs und den Wert, den wir ändern möchten: Der Wert des Variablen -Newtitle wird jetzt "nicht so weit weg" sein. Diskussion Auf seiner Reise von der freien Netscape Wilderness bis zur enger definierten, standardbasierten Terrain der Moderne hat der DOM-Standard eine angemessene Menge zusätzlicher Syntax für den Umgang mit HTML aufgenommen. Eine der am weitesten verbreiteten dieser Extras ist die Zuordnung zwischen DOM -Eigenschaften und HTML -Attributen. Wenn ein Dokument in seine DOM -Form analysiert wird, werden spezielle Attributknoten für die Attribute eines Elements erstellt. Diese Knoten sind nicht als „Kinder“ dieses Elements zugänglich: Sie sind nur über die beiden oben genannten Methoden zugänglich. Als Rückfall in die ursprünglichen DOM -Implementierungen (DOM 0 bezeichnet, wobei die Null vor den Standards vorschlägt) enthalten aktuelle DOM -Spezifikationen zusätzliche Funktionen, die für HTML spezifisch sind. Insbesondere sind Attribute direkt als Eigenschaften eines Elements zugänglich. Das HREF -Attribut eines Hyperlinks ist also über link.getAttribute ("href") sowie über link.reif.
für Lesen
für auf
Diese Regel hat einige Ausnahmen für Attribute, deren Existenz Sie garantieren können. Die bemerkenswertesten dieser „Must-Have“ -attribute sind Stil und Klasse, die für ein bestimmtes Element immer gültig sind. Somit können Sie sie sofort als Punkteigenschaften verweisen (Element.Style und Element.ClassName). Das andere Attribut, auf das wir achten müssen, ist das für das Attribut eines Etiketts. Es folgt den gleichen Regeln wie der Klasse, aber seine Eigenschaftsform ist htmlfor. Mit GetAtTribute/setAttribute schreiben wir element.getAttribute ("für"), aber im Internet Explorer ist es element.getAttribute ("htmlfor"). Die Fähigkeit, alle Elemente zu finden, die ein bestimmtes Attribut haben
Lösung
Das Kombinieren mehrerer Klassen ist eine sehr nützliche CSS -Technik. Es bietet ein sehr primitives Vererbungsmittel, indem eine Reihe verschiedener Stile auf dem einen Element kombiniert werden können, sodass Sie verschiedene Effekte auf einem Standort mischen und anpassen können. Sie sind besonders nützlich in Situationen wie Hervorhebung von Elementen: Eine Klasse kann hinzugefügt werden, die ein Element hervorhebt, ohne die anderen visuellen Eigenschaften zu stören, die möglicherweise von anderen Klassen auf das Element angewendet wurden. Wenn Sie jedoch Klassen in JavaScript zuweisen, müssen Sie darauf achten, dass Sie nicht versehentlich zuvor zugewiesene Klassen überschreiben. Lösung Die Klasse für jedes Element ist über seine Klasse für Klassenname zugänglich. Mit dieser Eigenschaft können Sie beide Klassen lesen und schreiben, die derzeit auf dieses Element angewendet werden. Da es sich nur um eine Zeichenfolge handelt, besteht der schwierigste Teil der Arbeit mit ClassName darin, dass Sie sich mit der Syntax befassen müssen, mit der mehrere Klassen dargestellt werden. Die Klassennamen in der Klassenname -Eigenschaft eines Elements werden durch Leerzeichen getrennt. Dem Namen der ersten Klasse geht nichts voraus, und der letzte Klassenname folgt nichts. Dies erleichtert einfach, die Klassenliste naiv zu einer Klasse hinzuzufügen: Verketten Sie einfach einen Raum und den neuen Klassennamen zum Ende des Klassennamens. Sie möchten jedoch vermeiden, einen Klassennamen hinzuzufügen, der bereits in der Liste vorhanden ist, da dies die Beseitigung der Klasse schwieriger macht. Sie möchten auch nicht vermeiden
.
Trennende Klassen
Einige reguläre Expressionsbeispiele zum Auffinden von Klassen verwenden das Wort Grenze spezielles Zeichen (b), um Klassen zu trennen. Dies funktioniert jedoch nicht mit allen gültigen Klassennamen, wie z.
. In diesem Kapitel wurden die grundlegenden, aber leistungsstarken Tools eingeführt, die Sie benötigen, um das Dokumentobjektmodell zu manipulieren. Es ist wichtig, dass Sie das DOM verstehen - das Skelett unter allem, was Sie in einem Browser sehen -, während Sie jede Webseite manipulieren. Das Wissen, wie man Teile des DOM erstellt, bearbeitet und löscht, ist entscheidend, um den Rest dieses Buches zu verstehen. Sobald Sie diese Techniken gemeistert haben, sind Sie auf dem besten Weg, ein kompetenter JavaScript -Programmierer zu werden. In diesem Kapitel handelt es sich um einfache Fenster- und Rahmenmanipulation, einschließlich Aufgaben wie dem Öffnen von Popups, der Kommunikation zwischen Frames (die Techniken,
.
Ich werde nicht sagen, dass Popups nie angemessen sind, aber ich werde sagen, dass sie selten so sind. Dennoch gibt es Situationen, in denen das Öffnen eines neuen Fensters wohl die am besten geeignete Lösung ist: Eine Online -Umfrage könnte ein Beispiel sein, da das Format den Inhalt möglicherweise zugänglicher macht. DHTML -Spiele sind ein weiteres, da das Ansichtsfenster möglicherweise von einer bekannten Größe sein muss. Ich werde meine Meinung qualifizieren, indem ich die Probleme diskutiere, die Popups erzeugen, und dann eine pragmatische Methode zur Verwendung dieser Probleme so weit wie möglich mindert. Was ist los mit Popups? Das Hauptproblem bei den meisten Popup -Fensterskripten besteht darin, dass sie die Anforderungen des Benutzers nicht berücksichtigen. Sie befassen sich nur mit den Anforderungen des Designers. Die Ergebnisse? Wir haben sie alle gesehen:
Diese Probleme sind nicht nur Fragen der Benutzerfreundlichkeit, sondern auch der Zugänglichkeit. Beispielsweise werden Bildschirmleser-Benutzer möglicherweise nicht durch ihre Geräte benachrichtigt, über die ein neues Fenster geöffnet ist. Dies könnte offensichtlich Verwirrung verursachen, wenn sie dann versuchten, in die Browser -Geschichte zurückzukehren (sie können nicht). Das Gleiche kann für einen sehenden Benutzer passieren, wenn sich ein Fenster in voller Größe öffnet: Sie und ich sind möglicherweise mit der Taskleiste vertraut, um offene Fenster zu überwachen, aber nicht alle Computerbenutzer-sie erkennen möglicherweise nicht einmal, dass ein neues Fenster aufgetaucht ist. Wenn Sie Popups verwenden, auf solche Probleme suchen und im Allgemeinen empfindlich auf ihre Auswirkungen sind, wird Ihre Popups für die Benutzer freundlicher und weniger belastet Ihr Gewissen. Beachten Sie auch, dass Popup -Fenster aus der Sicht eines Entwicklers nicht garantiert funktionieren: Die meisten Browser enthalten jetzt Optionen zur Unterdrückung von Popup -Fenstern, und in einigen Fällen tritt die Unterdrückung auf, auch wenn das Popup als Reaktion auf ein Benutzerereignis generiert wird. Möglicherweise können Sie dies so zulassen, wie Sie es für Situationen, in denen das Skripting nicht unterstützt wurde, nicht unterstützt werden: indem Sie sicherstellen, dass der zugrunde liegende Auslöser für das Popup immer noch etwas Nützliches tut, wenn das Popup fehlschlägt. Oder Sie haben Ihren Code möglicherweise ein Fenster öffnen und dann seine eigene geschlossene Eigenschaft überprüfen, um festzustellen, ob er tatsächlich angezeigt wird (wir werden diese Technik in der nächsten Lösung betrachten). Aber keiner dieser Ansätze funktioniert garantiert mit jedem Browser- und Popup -Blocker da draußen. Aus diesem Grund ist es einfacher und besser, Popups zu vermeiden, wann immer Sie können. .
Was wir tun müssen, ist, einige goldene Regeln für den ethischen Einsatz von Popups festzulegen: Lösung
. Der ternäre Operator Dieses Skript verwendet einen Verknüpfungsausdruck, der als ternärer Operator bezeichnet wird, um jede der Überlaufoptionen zu bewerten. Der ternäre Operator verwendet? und: Charaktere, um die beiden möglichen Ergebnisse einer Bewertung zu teilen, und entspricht einem einzigen Paar von if..else -Bedingungen. Betrachten Sie diesen Code: Dieser Code entspricht dem folgenden Markup: Die Klammern sind nicht erforderlich, aber Sie können feststellen, dass sie den Ausdruck leichter zu lesen. Weitere Informationen zu diesem und anderen nützlichen Verknüpfungen finden Sie in Kapitel 20, das Tempo aufrechterhalten. Sobald Sie die Popup -Funktion haben, können Sie sie auf verschiedene Weise aufrufen. Zum Beispiel können Sie einen regulären Link verwenden: Wenn keine Skriptbildung verfügbar ist, funktioniert dies genau wie bei jedem anderen Link. Wenn das Skripten jedoch verfügbar ist, kann das Skript zusammen mit den anderen Einstellungen einen Klick -Ereignis -Handler auslösen, der seine HREF an die MakePopup -Funktion übergibt. Der Rückgabewert des Handlers hängt davon ab, ob das Fenster tatsächlich geöffnet ist oder nicht. Browser, die das Popup blockieren, folgt dem Link wie gewohnt: Wenn Sie im Allgemeinen ein Skript haben, für das ein Fenster generiert wird, können Sie die MakePopup -Funktion direkt mit einer URL aufrufen: Wenn Sie dieses Fenster später in Ihrem Skript schließen müssen, können Sie dies mit der Verschlussmethode in der gespeicherten Fensterreferenz verwenden: Diskussion. Die Methode für Fenster.open kann eine Reihe von Argumenten - zusätzlich zum URL- und Fensternamen - angeben, ob das Fenster bestimmte Dekorationen wie die Menüleiste, die Werkzeugleiste oder die Adresse (Ort) haben soll. Diese Argumente werden als mit Kommas-Lenkern an das dritte Argument von Window.open: In unserer MakePopup -Funktion sind die Menuubar-, Symbolleisten- und Standortargumente voreingestellt zu Nein, da diese Elemente für Popup -Fenster selten nützlich sind - sie sind schließlich Navigationswerkzeuge. Popups werden hauptsächlich für einseitige Schnittstellen oder solche verwendet, in denen die Geschichte der Verlaufsnavigation abgehalten wird, z. B. unser Umfrage-Beispiel oder das Anmeldeverfahren für die Website einer Bank.
Lösung Dieses Skript identifiziert Links nach dem Rel -Attributwert extern. Das REL-Attribut ist eine Möglichkeit, die Beziehung zwischen einem Link und seinem Ziel zu beschreiben. Die Verwendung zur Identifizierung von Links, die auf eine andere Website hinweisen
Diskussion
Fälle von unserem Skript behandelt werden, aber Klicks, die sich aus der letzten Situation ergeben, können sicher ignoriert werden. Wir folgen der Spur von übergeordneten Knoten aus dem Ereignisziel, bis wir entweder einen Link finden oder zum Körperelement gelangen.
Sobald wir einen einheitlichen Ziel -Link haben, müssen wir einfach nach einem REL -Attribut mit dem richtigen Wert prüfen. Wenn es existiert, können wir ein Fenster mit dem HREF des Links öffnen, und wenn all dies erfolgreich ist (wie an der geschlossenen Eigenschaft des neuen Fensterobjekts beurteilt), wird der Handler falsch zurückgegeben und verhindern, dass der ursprüngliche Link befolgt wird. Übergeben eines Links zu Fenster.open ohne Argumente erzeugt ein Fenster mit Standarddekorationen - ebenso wie ein Link mit Target = "_ leer".
Kommunikation zwischen Frames Wenn Sie die Wahl haben, ob Sie Frames verwenden oder nicht, würde ich dringend davon abhalten, dies zu tun, da sie viele schwerwiegende Benutzerfreundlichkeit und Zugänglichkeitsprobleme haben, abgesehen von der Tatsache, dass sie konzeptionell kaputt sind (sie erstellen innerhalb der Browser -Staaten, die nicht angesprochen werden können). Aber wie bei der Verwendung von Popups haben Sie in einigen Fällen möglicherweise keine Wahl für Ihre Verwendung von Frames. Wenn Sie sie also wirklich verwenden müssen, müssen Sie Folgendes tun. Lösung Beginnen wir mit einem einfachen Frameset -Dokument: Wir können vier Referenzen für Querrahmenscripting verwenden:
Diskussion
In der Tat können einige Browser alle Skripte nicht zwischen den Rahmen kommunizieren, nur um jede Möglichkeit einer Quadrentations-Skriptkriptramente auszurotten, und es gibt keine Möglichkeit, diese Präferenz zu bearbeiten, wenn Ihr Skript in einem so konfigurierten Browser ausgeführt wird. .
Alternative Methoden zur Übergabe von Daten zwischen den Seiten werden in Kapitel 6 erörtert, Verarbeitung und Validierung von Formularen und Kapitel 8, die mit Cookies arbeiten. Seite Scrollen ist eine der am wenigsten standardisierten Eigenschaften in JavaScript: Drei Variationen werden jetzt durch verschiedene Versionen verschiedener Browser verwendet. Mit ein paar sorgfältigen Objekttests können wir jedoch zuverlässig einen konsistenten Wert erhalten. Lösung Es gibt drei Möglichkeiten, diese Informationen zu erhalten. Wir werden Objekttests für jeden Ansatz verwenden, um die verfügbare Unterstützung zu bestimmen: Die Funktion kann jetzt nach Bedarf aufgerufen werden. Hier ist eine einfache Demonstration, die ein Fenster verwendet.
Das Problem mit Scroll
scroll ist nicht die zuverlässigste Ereignisse: Es kann möglicherweise überhaupt nicht in Konqueror oder Safari 1.0 ausfeuern oder wenn der Benutzer mit einem Mausrad in Firefox navigiert. Und wenn es feuert, kann dies kontinuierlich und schnell (wie im Internet Explorer) tun, was langsam und ineffizient sein kann, wenn das Skript, das Sie auf das Ereignis reagieren, sehr komplex ist.
Wenn Sie Schwierigkeiten dieser Art haben, können Sie die SetInterval -Funktion anstelle eines ONSCROLL -Event -Handlers besser verwenden. Mit SetInterval können Sie die Funktion in einem vorhersehbaren Intervall und nicht als Reaktion auf ein Ereignis aufrufen. Sie können mehr über diese Art von Skript in Kapitel 14 erfahren, Zeit und Bewegung, aber hier ist ein vergleichbares Beispiel:
Fenster.SetInterval (function ()
{ Diskussion
sonst ist es für uns nicht wirklich von Bedeutung, welcher Browser welche Eigenschaft verwendet. Alles was zählt ist, dass unser Skript einen der Kompatibilitätstests durchläuft und einen nützlichen Wert zurückgibt. Die von jedem Browser verwendeten Eigenschaften werden hier jedoch als Referenz angezeigt: Diese Liste erzählt nicht die vollständige Geschichte, aber es soll in erster Linie die Reihenfolge der Tests beschreiben. Neuere Mozilla -Browser (wie Firefox) unterstützen auch documentElement.scrolltop und body.scrolltop, nach denselben Rendering -Modus -Regeln wie dh 6. Safari und Konqueror unterstützen Body.Scrolltop in beiden Modellen. Opera unterstützt alle drei Eigenschaften in jedem Modus! , aber nichts davon ist für Sie wichtig zu wissen - Browseranbieter fügen diese mehreren Eigenschaften hinzu, um Skripte zu ermöglichen, die sich der einen oder anderen Eigenschaft nicht bewusst sind, und keine willkürlichen Auswahlmöglichkeiten für sie willen. Aus unserer Sicht besteht der wichtige Punkt darin, sich mit einer Reihe von Kompatibilitätstests zu begleichen, die sicherstellen, dass unser Skript so weit wie möglich funktioniert. Rendering -Modi "Standards" -Modus und "Quirks" -Modus sind die beiden wichtigsten Rendering -Modi, die von aktuellen Browsern verwendet werden. Diese Modi wirken sich auf verschiedene Aspekte des Ausgangsdokuments aus, einschließlich welchem Element die Leinwand ( oder ) und die Berechnung der CSS -Boxgrößen. Weitere Informationen zu Rendering -Modi finden Sie in Kapitel 11, um Browserunterschiede zu erkennen.
Lösung
Lösung
Die Funktion gibt ein Array von Breite und Höhe zurück, sodass wir sie dann aufrufen können, wenn wir diese Daten benötigen: Wir haben die Grundlagen der Fenster- und Rahmenmanipulation aus der Sicht eines Pragmatikers in diesem Kapitel behandelt. Wir haben auch über Prinzipien und Techniken gesprochen, mit denen wir sicherstellen können, dass solche Skripte so benutzerfreundlich und zugänglich sind, wie wir sie machen können. Zweifellos wird diese Art von Arbeit kontrovers bleiben, und wir brauchen eindeutig eine Art Zielmechanismus, denn obwohl die Verwendung von Rahmen langsam aussterbt, hält das Aufkommen immer anspruchsvollerer Schnittstellen diese Probleme am Leben. Ich mag das Show -Attribut des XLink -Standards, das Werte wie neu und Ersatz hat. Diese deuten auf einen Zielvorgang hin (öffnen Sie ein neues Fenster und ersetzen Sie den Inhalt des aktuellen Fensters), definieren jedoch nicht spezifische Verhaltensweisen. Sie überlassen es dem Benutzeragenten, zu steuern, was tatsächlich passiert. So kann beispielsweise neue Registerkarten anstelle von Windows geöffnet werden. Dynamisches HTML ist kein einziges Stück Technologie, auf das Sie hinweisen und sagen können: "Dies ist DHTML." Der Begriff ist ein Deskriptor, der alle Technologien umfasst, die eine Webseite dynamisch machen: die Technologien, mit denen Sie neue Elemente erstellen können, ohne die Seite zu aktualisieren, die Farbe dieser Elemente zu ändern und sie zu erweitern, zusammenzuziehen und um den Bildschirm zu zoomen.
Lösung
Die kürzere Art, ein Ereignis zu behandeln, besteht darin, die DOM 0 -Ereignishandler zu verwenden, die als Abkürzungseigenschaften jedes Elements zugewiesen werden. So wie wir in Kapitel 5 gesehen haben, als wir durch das Dokumentobjektmodell navigieren, als wir DOM 0-Attributverknüpfungen diskutierten, sind diese Event-Handler nicht zukunftssicher. Sie bieten jedoch einige Vorteile gegenüber Standard -W3C -Event -Hörern:
anonyme Funktionen
Anstatt einen Verweis auf eine benannte Funktion anzugeben, können Sie eine anonyme Funktion für einen Ereignishandler liefern:
var mylink = document.getElementById ("mylink");
Abhängig davon, ob Sie die Handhabungsfunktion (und Ihre eigenen Codierungseinstellungen) wiederverwenden müssen, kann dies eine einfachere Möglichkeit sein, Ereignisbearbeitungscode zu schreiben. Der Rückgabewert der Handhabungsfunktion bestimmt, ob die Standardaktion für dieses Ereignis erfolgt. Wenn MyButton im vorhergehenden Code ein Hyperlink wäre, wäre die Standardaktion beim Klicken, zu seinem HREF -Standort zu navigieren. Durch die Rückgabe von FALSE erlaubt die Eingabefunktion nicht, dass die Standardaktion stattfindet, und die Hyperlink -Navigation erfolgt nicht. Wenn der Rückgabewert wahr wäre, würde die Standardaktion auftreten, nachdem der Code der Ereignisbearbeitungsfunktion ausgeführt hatte. Wenn ein Ereignis auftritt, werden detaillierte Informationen über das Wie, warum und wo dieses Ereignisses in ein Ereignisobjekt geschrieben wird. Im Internet Explorer ist dies in Form eines globalen Fensters. Event-Objekt, aber in anderen Browsern wird das Objekt als Argument an die Funktion zur Ereignishandhabung übergeben. Dieser Unterschied ist in der Handhabungsfunktion ziemlich einfach zu adressieren: Mit dem Ereignisobjekt können Sie eine Reihe von Details ermitteln, z. Nicht wenige der Event -Immobiliennamen sind in allen Browsern konsistent, einige unterscheiden sich jedoch. Die Mozilla -Ereigniseigenschaften können in der Gecko Dom -Referenz angesehen werden, während die Ereigniseigenschaften des Internet Explorer bei MSDN angezeigt werden können. Für Eigenschaften, deren Namen zwischen den Browsern variieren, kann das Potenzial für zugehörige Probleme normalerweise mit ein wenig Objekterkennung behoben werden. Wir werden dies später in diesem Kapitel ausführlich besprechen. Der W3C -Weg (Ereignishörer) Obwohl die DOM 0 -Event -Handler schnell und einfach sind, haben sie Einschränkungen (abgesehen von der Tatsache, dass sie schließlich veraltet werden). Der Hauptvorteil der W3C -Event -Hörer besteht darin, dass sie die Zugabe und Entfernung mehrerer Handhabungsfunktionen für dasselbe Ereignis in einem einzelnen Element nativ unterstützen. Event -Hörer haben auch die Möglichkeit, auf Ereignisse in mehreren Phasen zu reagieren (obwohl die meisten Browser diese Funktion noch nicht unterstützen). In der W3C -Spezifikation kann ein Ereignis mit der AddEventListener -Methode des Elements zu einem Element hinzugefügt werden. Der Internet -Explorer für Windows wählt jedoch eine Methode namens CattelEvent, die eine etwas andere Syntax aufweist. (Internet Explorer für Mac unterstützt keines dieser Ereignismodelle, daher müssen wir uns auf die DOM 0 -Handler verlassen, um mit Ereignissen in diesem Browser zu arbeiten.) Um einen Ereignishörer in jedem Browser außer dem Internet Explorer hinzuzufügen, schreiben Sie Code ähnlich wie folgt: Um den Internet Explorer zu unterstützen, benötigen Sie diesen Code: sowie die unterschiedlichen Funktionsnamen ist wichtig zu beachten, dass Internet Explorer den DOM 0 -Handler -Namen für das Ereignis - "Onclick" - und nicht den wahren Ereignisnamen verwendet: "Klicken". Das zusätzliche Argument, das an AddEventListener geliefert wird, gibt an, ob der Hörer während der Ereignisausbreitung der Erfassung (TRUE) oder Bubble (False) angewendet wird. Die Ereignisverbreitung wird in der folgenden Diskussion ausführlicher erläutert, aber Bubble ist wirklich die nützlichste Wahl und sorgt für das gleiche Verhalten in Standards-konformen Browsern wie im Internet Explorer. Die Unterschiede zwischen diesen beiden Ansätzen sind ziemlich einfach, wenn sie mit einer Abstracting -Funktion herumarbeiten. Wir können auch einen Fallback für Browser bereitstellen, die die W3C -Event -Hörer gleichzeitig nicht unterstützen: Die ersten beiden, wenn Aussagen mit den standardbasierten und Internet Explorer-Methoden zu tun haben, aber der Catch-andere befasst sich mit älteren Browsern, die keine dieser Methoden unterstützen, insbesondere im Internet Explorer 5 für Mac. In diesem letzten Fall wird ein DOM 0 -Ereignishandler verwendet. Um sicherzustellen, dass mehrere Funktionen verwendet werden können, um ein einzelnes Ereignis für ein bestimmtes Element zu verarbeiten, wird ein Verschluss verwendet, um vorhandene Funktionen auszuführen, die dem Ereignis beigefügt sind. Schließungen sind ein erweitertes Merkmal von JavaScript, das sich auf Scoping bezieht (die Sie in Kapitel 19, Objektorientierung in JavaScript), lesen können). Verschlüsse ermöglichen es einer inneren Funktion, die Variablen der enthaltenden Funktion zu verweisen, auch nachdem die enthaltende Funktion abgeschlossen ist. Simon Willison hat ihre Verwendung in Bezug auf Ereignishandler ausführlich erklärt. Es genügt zu sagen, dass Schließungen es uns ermöglichen, mehrere Ereignishandler in Browsern zu stapeln, die W3C -Event -Hörer nicht unterstützen. Der Cross-Browser-Code für die Zuweisung eines Ereignishörers lautet wie folgt: Nicht (ganz) den echten Artikel Obwohl der DOM 0 -Event -Handler Fallback die Möglichkeit imitiert, mehrere Ereignishörer für einen Ereignistyp für ein Element hinzuzufügen, liefert er keine genaue Replikation des W3C -Ereignismodells, da bestimmte Handler nicht aus einem Element entfernt werden können. Während DOM 0 -Handler die Stornierung der Standardaktion eines Elements durch Rückgabe von Falsch erlaubten, erreichen die W3C -Ereignishörer dieses Ziel geringfügig unterschiedlich. Um eine Standardaktion in diesem Modell abzubrechen, müssen wir das Ereignisobjekt ändern. Im Internet Explorer müssen Sie seine Rückgabe -Eigenschaft auf false festlegen. Standards-basierte Implementierungen bieten die PRUVENTDEFAULT-Methode, um dasselbe zu tun. Wir können eine kleine Funktion erstellen, die den Unterschied für uns ermittelt: Wir können diese Funktion aufrufen, wenn wir die Standardaktion abbrechen möchten: Sie müssen nach der Ausführung von StopDefaultAction weiterhin false zurückgeben, um sicherzustellen, dass Browser, die das W3C -Ereignismodell nicht unterstützen, auch die Standardaktion verhindern. Safari und W3C Event Hörer Aufgrund eines Fehlers in Safari ist es unmöglich, die Standardaktion des Klickens auf einen Hyperlink in diesem Browser bei der Verwendung von W3C -Ereignishörern zu stornieren. Um die Stornierung zu erreichen, müssen Sie DOM 0 -Ereignishandler mit einem Rückgabewert von False verwenden.
Einer der Vorteile der Verwendung von W3C -Event -Hörern ist, dass Sie einen einzelnen Hörer aus einem Element entfernen können, ohne andere Zuhörer auf demselben Ereignis zu stören. Dies ist mit den DOM 0 -Handlern nicht möglich. Internet Explorer verwendet die Ablösungsmethode, während die Standards-konformen Browser stattdessen eine Methode namens REMEVENTLITELENER angeben. Jede dieser Methoden arbeitet ziemlich ähnlich wie bei ihrem Gegenstück zur Listener-Adding: Ein Ereignisart muss zusammen mit der Funktion geliefert werden, die zur Verarbeitung dieses Ereignisarts zugewiesen wurde. Die Standardmethode muss auch wissen, ob der Ereignishandler registriert wurde, um während der Erfassungs- oder Blasenphase zu antworten. Hier ist eine Funktion, die diesen Ansatz über Browser hinweg unterstützt:
In Browsern, die W3C -Event -Hörer nicht unterstützen, entfernt diese Funktion alle Ereignishandler auf dem gegebenen Ereignis: Es ist nicht möglich, nur eine davon zu entfernen und die anderen zu verlassen.
Verweisen auf das Zielelement Ziemlich oft möchten Sie das Objekt verwenden, das das Ziel eines Ereignisses im Ereignishandler selbst war. Bei DOM 0 -Ereignishandler bezieht sich die Verwendung der speziellen Variablen in einer Handhabungsfunktion auf das Ereigniszielobjekt. Betrachten Sie diesen Code:
Wenn Sie jedoch W3C -Ereignishörer verwenden, wird das Ziel des Ereignisses unter verschiedenen Eigenschaften in verschiedenen Browsern als Teil des Ereignisobjekts gespeichert. Internet Explorer speichert das Ziel als SRCElement, während das Standards -Modell als Ziel speichert. Aber das Element, dem diese Eigenschaftenpunkte Punkte haben, ist nicht unbedingt das Element, dem der Ereignishörer zugewiesen wurde. Es ist in der Tat das tiefste Element in der von dem Ereignis betroffenen Hierarchie. Schauen Sie sich die folgenden HTML an. Wenn ein Klick-Ereignis-Listener in den Absatz platziert würde und ein Benutzer auf den Link klickte, würde der Klick-Ereignishandler des Absatzes ausgeführt, aber das Ereignisziel, das über die oben genannten Eigenschaften zugänglich war, wäre der Hyperlink. Einige Browser (vor allem Safari) gehen sogar so weit, den Textknoten in der Link als Zielknoten zu zählen. Wir können eine Funktion schreiben, die das Ereignisziel unabhängig davon zurückgibt, welche Eigenschaft implementiert wurde. Dies löst jedoch nicht das Problem, das Element zu finden, auf das wir ursprünglich den Ereignishörer angewendet haben. (Der W3C-Standard gibt eine andere Eigenschaft namens CurrentTarget an, mit der Sie das Element erhalten können, dem der Hörer zugewiesen wurde, aber es gibt kein Internet-Explorer-Äquivalent. Browser, die CurrentTarget unterstützen, errichtet auch den Ereignis-Handler-Stil. Finden Sie ein Element, das wahrscheinlich das Element ist, an das wir einen Ereignishörer angehängt haben. Dazu können wir Schecks gegen den Tag -Namen, die Klasse und andere Attribute des Elements durchführen. Die abstrahierende Ereigniszielfunktion würde so aussehen: Die IF-ELSE ruft das Ereignisziel über Browser hinweg ab. Die while-Schleife findet dann den ersten Nicht-Text-Knoten-Elternteil, wenn das vom Browser gemeldete Ziel ein Textknoten ist. Wenn wir das Element abrufen möchten, auf das geklickt wurde, rufen wir einen Anruf, um GetEventTarget zu erhalten: Weil wir in diesem Fall wissen, dass die Ereignishandling-Funktion nur an Links ( Tags) beigefügt ist, können wir vom Ereignisziel nach oben itererieren und nach einem Knotennamen "A" überprüfen. Der erste, den wir finden, ist der Link, dem dem Hundeführer zugewiesen wurde. Dies stellt sicher, dass wir nicht mit einem Element im Link arbeiten (z. B. eine starke oder eine Spanne). Offensichtlich ist diese Methode zur Erkenntnis des Ziels nicht ideal und kann nicht zu 100% genau sein, es sei denn, Sie haben Kenntnisse über die genauen HTML, mit denen Sie arbeiten. In jüngster Zeit hat sich viel Mühe zur Lösung dieses Problems bemüht, und einige der vorgeschlagenen Lösungen bieten dasselbe diese Variable wie unter DOM 0 -Event -Handlern und in Browsern, die den W3C -Standard für Event -Hörer (nicht Internet -Explorer) unterstützen.
Eine andere Lösung von Dean Edwards meidet das W3C -Ereignismodell vollständig, um DOM 0 -Ereignishandler mit unabhängigen Fach- und Entfernen zu implementieren. Obwohl sich diese beiden Lösungen als gut geschrieben und robust erweisen können, sind sie zum Zeitpunkt dieses Schreibens weitgehend ungetestet. Außerdem ist in der Praxis der Prozess der Iteration, das Ziel eines Ereignisses zu finden, nicht so unzuverlässig, wie es scheint. Was ist Ereignis sprudelt und wie steuere ich es? Sie haben möglicherweise festgestellt, dass wir der W3C -Standard -AddEventListener -Methode ein drittes Argument liefern mussten, und dass ein Erfassungsargument in unsere Funktion "AttenEventListener" aufgenommen wurde, um dies zu befriedigen. Dieses Argument bestimmt die Phase des Ereigniszyklus, in dem der Hörer arbeitet. Angenommen, Sie haben zwei Elemente, eines in der anderen verschachtelt: Wenn ein Benutzer auf den Link klickt, werden auf Ereignisse sowohl im Absatz als auch im Hyperlink registriert. Die Frage ist, welches das Ereignis zuerst erhält? Der Ereigniszyklus enthält zwei Phasen, und jede beantwortet diese Frage auf andere Weise. In der Erfassungsphase funktionieren Ereignisse von außen nach innen, sodass der Absatz zuerst den Klick und dann den Hyperlink empfangen würde. In der Blasenphase funktionieren die Ereignisse von innen nach außen, sodass der Anker den Klick vor dem Absatz erhält. Internet Explorer und Opera unterstützen nur Bubbling, weshalb AttachEvent kein drittes Argument erfordert. Für Browser, die AddEventListener unterstützen, wird das Ereignis während der Erfassungsphase gefangen, wenn das dritte Argument wahr ist. Wenn es falsch ist, wird das Ereignis während der Blasenphase gefangen. In Browsern, die beide Phasen unterstützen, tritt die Einfangphase zuerst auf und folgt immer von der Blasenphase. Es ist möglich, dass ein Ereignis sowohl in den Erfassungs- als auch in den sprudelnden Phasen auf demselben Element behandelt wird, vorausgesetzt, Sie haben die Hörer für jede Phase eingerichtet. Diese Phasen unterstreichen auch die Tatsache, dass verschachtelte Elemente von demselben Ereignis betroffen sind. Wenn Sie nicht mehr möchten, dass ein Ereignis die Hierarchie (abhängig von der Phase) weiter nach oben oder unten ausbreitet, nachdem ein Ereignishörer ausgelöst wurde, können Sie es stoppen. Im Internet Explorer beinhaltet dies die Festlegung der CancelBubble -Eigenschaft des Ereignisobjekts auf true. Im W3C -Modell müssen Sie stattdessen seine StopPropagation -Methode aufrufen: Wenn wir nicht wollten, dass ein Ereignis weiter ausbreitet als unser Event -Handler, verwenden wir diesen Code: Obwohl wir die Auftragsfunktion zugewiesen haben, um das Klickereignis sowohl auf dem Link als auch auf dem Absatz anzuhören, wird die Funktion nur einmal per Klick aufgerufen, da die Ausbreitung des Ereignisses vom Hörer das erste Mal gestoppt wird, wenn er genannt wird. Es gibt so viele Variablen, die die Größe eines Elements beeinflussen - Inhaltslänge, CSS -Regeln, Schriftfamilie, Schriftgröße, Linienhöhe, Textzoomen… die Liste geht weiter. Hinzu kommt, dass Browser die CSS -Dimensionen und die Schriftgrößen inkonsistent interpretieren, und Sie können niemals die Dimensionen vorhersagen, in denen ein Element gerendert wird. Die einzige konsistente Möglichkeit, die Größe eines Elements zu bestimmen, besteht darin, ihn zu messen, sobald er vom Browser gerendert wurde. Lösung Sie können sofort erkennen, dass es nützlich sein wird, genau zu wissen, wie groß ein Element ist. Nun, der W3C kann nicht helfen: Es gibt keine standardisierte Möglichkeit, die Größe eines Elements zu bestimmen. Zum Glück haben sich die Browserhersteller mehr oder weniger für einige DOM-Eigenschaften festgelegt, die uns herausfinden können. Obwohl Boxmodellunterschiede im Internet -Explorer Polsterung und Grenzen inkonsistent als Teil der CSS -Abmessungen eines Elements umfassen
überprüft werden: In Internet Explorer 6, Opera, Mozilla und Safari wird die variable Pixelwidth nun auf 450 eingestellt, und die variable PixelHeight wird auf 250 eingestellt. In Internet Explorer 5/5.5 wird Pixelwidth 350 und PixelHeight 150 sein. Die Werte unterscheiden sich über Browser, jedoch nur, weil sich auch die tatsächliche gerenderte Größe unterscheidet. Die Offset -Abmessungen berechnen die genauen Pixelabmessungen des Elements konsistent. Wenn wir die Dimensionen des Elements nicht angegeben hätten und stattdessen seine Anzeige bis zum Standard -Block -Rendering gelassen haben (somit die Boxmodellfehler vermeiden), wären die Werte zwischen Browsern vergleichbar (so die Unterschiede für die Breite von Scrollbar, Schriftarten usw.). Erreichen Sie die richtigen Abmessungen Um die Abmessungen eines Elements korrekt zu bestimmen, müssen Sie warten, bis der Browser dieses Element beendet hat. Andernfalls können sich die Abmessungen von denen unterscheiden, die der Benutzer am Ende sehen. Es gibt keinen garantierten Weg, um sicherzustellen, dass ein Browser ein Element gemacht hat, aber es ist normalerweise sicher anzunehmen, dass alle Elemente, sobald das Ladungsereignis eines Fensters abgefeuert wurde, alle Elemente gerendert wurden. Diskussion Es ist möglich, die Abmessungen eines Elements abzüglich seiner Grenzen abzurufen, aber auch seine Polsterung. Diese Werte werden mithilfe der Clientwidth- und ClientHeight -Eigenschaften zugegriffen, und für das Beispielelement, das über ihren Werten verwendet wird, beträgt 300 und 100 in Internet Explorer 5/5.5 und 400 und 200 in allen anderen Browsern. Es gibt keine Eigenschaft, mit der Sie die Breite eines Elements ohne Grenzen oder Polsterung abrufen können.
Die genaue Position eines Elements kennt, ist sehr hilfreich, wenn Sie andere Elemente relativ dazu positionieren möchten. Aufgrund verschiedener Browsergrößen, Schriftgrößen und Inhaltslängen ist es jedoch oft unmöglich, die Position eines Elements vor dem Laden einer Seite fest zu beschaffen. JavaScript bietet eine Methode, um die Position eines Elements nach der Seite der Seite zu ermitteln, sodass Sie genau wissen, wo sich Ihre Elemente befinden. Lösung Die Offsettop- und OffsetLeft -Eigenschaften geben Ihnen den Abstand zwischen der Oberseite eines Elements und der Oberseite des Offsetparenten an. Aber was ist Offsetparent? Nun, es variiert sehr für verschiedene Elemente und verschiedene Browser. Manchmal ist es das unmittelbare Element. In anderen Fällen ist es das HTML -Element. Zu anderen Zeiten ist es nicht vorhanden. Zum Glück besteht die Lösung darin, der Spur von Offsetparenten zu folgen und ihre Offset -Positionen hinzuzufügen - eine Methode, die Ihnen die genaue absolute Position des Elements auf der Seite in jedem Browser bietet. Wenn das fragliche Element keinen OffsetParent hat, ist die Offset -Position des Elements selbst ausreichend; Andernfalls fügen wir die Offsets des Elements zu denen seines OffsetParent hinzu und wiederholen den Vorgang für seinen OffsetParent (falls vorhanden): IE 5 für Mac -Fehler Internet Explorer 5 für Mac berücksichtigt bei der Berechnung der Offset -Abmessungen nicht die Rand oder Polsterung des Körpers. Wenn Sie also genaue Messungen in diesem Browser wünschen, sollten Sie keine Margen und Polsterung am Körper haben. Diskussion Die obige Methode funktioniert für einfache und komplexe Layouts. Sie können jedoch auf Probleme stoßen, wenn einer oder mehrere Vorfahren eines Elements seine CSS -Position auf etwas anderes als statisch einstellen (der Standard).
Wenn Sie mit Mausereignissen wie Mausover oder Mousemove arbeiten, möchten Sie häufig die Koordinaten des Mauszeigers als Teil Ihrer Operation verwenden (z. B. ein Element in der Nähe der Maus). Die nachstehend erläuterte Lösung ist tatsächlich eine zuverlässigere Methode zur Standorterkennung als die Methode zur Erkennung von Elementpositionen, die wir in dem Abschnitt mit dem Titel "Die Position eines Elements finden" diskutiert wurden.
Lösung
Tooltips sind in den meisten Browsern eine hilfreiche Funktion, können jedoch etwas restriktiv sein, wenn Sie sie als Teile Ihrer Schnittstelle verwenden möchten. Wenn Sie Schichten verwenden möchten, die angezeigt werden, wenn Sie sie möchten, sind Sie nicht verkürzt und können mehr als nur einen einfachen Text enthalten. Erstellen Sie nicht Ihre eigenen erweiterten Tooltips? Lösung Für dieses Beispiel werden wir eine Klasse, Hastooltip, auf alle Elemente anwenden, für die Tooltips angezeigt werden sollen. Wir erhalten die Informationen, die im Titelsattribut jedes Elements im Tooltip angezeigt werden: Aus unserer Erkundung von Browser -Ereignissen früher in diesem Kapitel werden Sie wahrscheinlich bereits erkannt haben, dass wir einige Ereignishörer einrichten müssen, um uns mitzuteilen, wann die Ebene erscheinen und verschwinden sollte. Tooltips werden klassisch an einem festgelegten Ort angezeigt, wenn Sie über ein Element maust, und verschwinden beim Ausbau. Einige Implementierungen von JavaScript -Tooltips verschieben auch den Tooltip, wenn sich die Maus über das Element bewegt, aber ich persönlich finde dies ärgerlich. In dieser Lösung konzentrieren wir uns auf die Mausover- und Mausout -Ereignisse: Wir haben bereits einige der Funktionen in diesem Skript codiert, einschließlich AddLoadListener aus Kapitel 1, erstefen Sie sich mit JavaScript, GetElementsByAttribute aus Kapitel 5, navigiert durch das Dokumentobjektmodell, und die AnhangEventListener -Funktion, die wir früher in diesem Kapitel erstellt haben, so der Code.
steuern die Tooltip -Anzeige in Opera
Opera zeigt den Originaltitel auch nach dem Einstellen eines leeren Zeichens an. Wenn Sie nicht in diesem Browser erscheinen möchten, dass Tooltips angezeigt werden, müssen Sie die Standardaktion des Mausovers mit der StopDefaultAction -Funktion aus dem Abschnitt "Bearbeitung von Ereignissen", dem ersten Abschnitt dieses Kapitels, stoppen. Beachten Sie, dass dies auch andere Mausover -Verhaltensweisen wie die Statusleistenadresse für Hyperlinks beeinflusst.
.
Wenn die Maus aus dem Element verschoben wird, löschen wir den Tooltip aus dem Dokument und es wird verschwinden: Früher haben wir in Showtip einen Verweis auf das Tooltip -Element als Eigenschaft des Zielelements erstellt. Nachdem wir das getan haben, können wir es hier entfernen, ohne die gesamte DOM durchsuchen zu müssen. Bevor wir den Tooltip entfernen, rufen wir seinen Inhalt ab und setzen ihn in den Titel des Zielelements ein, damit wir ihn später erneut verwenden können. existieren diese Objekte? Sie sollten überprüfen, ob Objekte, die in anderen Ereignishörern erstellt wurden, tatsächlich existieren, bevor sie versuchen, sie zu manipulieren, da Ereignisse häufig falsch fördern können, und Sie können nicht garantieren, dass sie in einer festgelegten Reihenfolge auftreten. Diskussion Ein Problem mit dem obigen Code ist, dass, wenn sich das Zielelement in der Nähe der rechten oder unteren Kante des Browserfensters befindet, der Tooltip abgeschnitten wird. Um dies zu vermeiden, müssen wir sicherstellen
. .
Die einzige andere Ausnahme ist, dass, wenn die Ebene normalerweise außerhalb des Ansichtsfensters in beiden Dimensionen angezeigt wird, wenn wir sie vertikal positionieren, automatisch über dem Cursor positioniert wird. Dies verhindert, dass die Ebene direkt auf dem Cursor erscheinen und ein Mausout -Ereignis auslösen. Es verhindert auch, dass das Zielelement vom Tooltip vollständig verdeckt wird, was den Benutzer daran hindert, darauf zu klicken. Messen Sie sichtbare Tooltip -Abmessungen Um die Abmessungen des Tooltip zu messen, muss es zunächst an das Dokument angehängt werden. Dies wird automatisch auf der Seite angezeigt. Um zu verhindern, dass der Benutzer sieht, dass er in der falschen Position angezeigt wird, müssen wir ihn ausblenden. Wir tun dies, indem wir seine Sichtbarkeit auf "versteckt" stellen, bis wir die Position des Tooltip abgeschlossen haben. Wir können hier nicht die bekanntere Anzeigeeigenschaft verwenden, da Objekte mit Anzeige auf "Keine" überhaupt nicht gerendert werden, daher haben sie keine Abmessungen zu messen. Tabellen können eine Mine von Informationen sein, jedoch nur, wenn Sie sie richtig verstehen können. Die Möglichkeit, eine Tabelle nach ihren verschiedenen Spalten zu sortieren
Lösung
Die erste für die Schleife, die nach dem Definition aller strukturellen Variablen auftritt, legt die jeweiligen Zustände für jede der Tabellenüberschriftenzellen fest, wenn einer von ihnen geklickt wird. Die Klassen werden nicht nur beibehalten, um die Überschriftenzelle zu identifizieren, in der die Tabelle derzeit sortiert ist, sondern in jeder Zelle eine spezielle Sordereigenschaft beibehalten, um die Reihenfolge zu bestimmen, in der diese Säule sortiert ist. Zunächst wird eine Spalte in absteigender Reihenfolge sortiert. Wenn jedoch zweimal nacheinander eine Überschriftenzelle geklickt wird, wird die Sortierreihenfolge geändert, um eine aufsteigende Sequenz widerzuspiegeln. Jede Zelle erinnert sich an den zuletzt ausgestellten Sortierstatus, und die Säule wird in diesen Zustand zurückgegeben, wenn seine Überschriftenzelle erneut ausgewählt wird. Der Titel des Hyperlinks für eine geklickte Überschriftzelle wird abhängig von der aktuellen Sortierreihenfolge ebenfalls umgeschrieben, und wie die Sortierreihenfolge wäre, wenn der Benutzer erneut darauf klicken würde. Die zweite für Schleife sortiert jede der Zeilen, die im Körper des Tisches enthalten sind. Eine Kopie des Original -TBODY wird erstellt, um die nachbestellten Tabellenzeilen zu speichern, und anfangs ist diese Kopie leer. Da jede Zeile im ursprünglichen TBODY gescannt wird, wird der Inhalt der Tabellenzelle in der Spalte, nach der wir sortieren
Die beiden Hauptsäulen von DHTML sind die Erfassung von Ereignissen und die Umstrukturierung und Erstellung von Seitenelementen über die DOM. Mit diesen Prinzipien ist es möglich, viele der verschiedenen Arten zu erfassen, wie Benutzer mit einer Seite interagieren und die Schnittstelle entsprechend reagieren lassen. Wie die Anzahl und Qualität der jetzt verfügbaren JavaScript-verstärkten Webanwendungen zu sehen ist, können die Funktionen DHTML an neue Schnittstellen einen der größten Wachstumsbereiche für innovatives JavaScript darstellen. Die in diesem Kapitel gezeigten Grundlagen und grundlegenden Beispiele geben Ihnen ein Gefühl für die Kraft, die es im Browser eines Benutzers liefern kann. Wir werden dies in den folgenden Kapiteln weiter erweitern, wenn wir einige wirklich interessante Schnittstellen aufbauen. Das ist es für unser Beispiel von der JavaScript -Anthologie: 101 Wesentliche Tipps, Tricks & Hacks . Was kommt als nächstes? Laden Sie dieses Beispiel als PDF herunter, um offline zu lesen. Schauen Sie sich das Inhaltsverzeichnis des Buches an, um zu sehen, was es sonst noch abdeckt. Und sehen, was andere über das Buch denken - Lesen Sie Live -Kundenbewertungen von der JavaScript -Anthologie: 101 Wesentliche Tipps, Tricks & Hacks . Wie wird JavaScript in der Front-End-Entwicklung verwendet? Es kann verwendet werden, um Funktionen wie Slider, Formularvalidierungen, Pop-ups und mehr zu erstellen. Sie können auch das DOMR-Modell (Dokumentobjektmodell) manipulieren, sodass Sie den Inhalt und das Layout einer Webseite in Echtzeit ändern können. Node.js ist eine JavaScript -Laufzeit, mit der Sie JavaScript auf Ihrem Server ausführen können. Mit node.js können Sie ganze Webanwendungen mit Just JavaScript erstellen. Sie bieten eine Struktur für JavaScript-Code und erleichtern das Erstellen von groß angelegten, wartbaren und skalierbaren Webanwendungen. Beispiele sind React.js, Angular.js und Vue.js.
Wenn eine dieser Eigenschaften für einen bestimmten Knoten nicht existiert (z. B. der letzte Knoten eines Elternteils hat kein nächstes Geschwister), haben sie einen Wert von Null. <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Das Listenelement mit ID STAR2 könnte mit einem dieser Ausdrücke verwiesen werden: <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
var star2 = document.getElementById ("star1"). Nextsibling;
while (star22.nodetype == "3")
{
STAR2 = STAR2.NEXTSIBLING;
} Erstellen von Elementen und Textknoten
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
<div >
Ändern des Typs eines Elements Example 1.2. separate-content-behaviors.js <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
} <br>
<br>
var contentDiv = document.getElementById('content'); <br>
<br>
contentDiv.onmouseover = function() <br>
{ <br>
changeBorder('red'); <br>
}; <br>
<br>
contentDiv.onmouseout = function() <br>
{ <br>
changeBorder('black'); <br>
};
window.onload = function() <br>
{ <br>
var contentDiv = document.getElementById('content'); <br>
<br>
... <br>
};
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Entfernen eines Element- oder Textknotens
Sobald ein Element seine Nützlichkeit überlebt hat, ist es Zeit, ihm den Chop zu geben. Sie können JavaScript verwenden, um jedes Element sauber aus dem Dom zu entfernen. <script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Wir könnten Removechild verwenden, um den Hyperlink aus dem übergeordneten Absatz wie SO zu entfernen: <div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
Die Variable RemedChild wird ein Verweis auf das A -Element sein, aber dieses Element wird nirgendwo in der DOM gefunden: Es wird einfach im Speicher verfügbar sein, so wie wir sie gerade mit CreateLement erstellt hätten. Dies ermöglicht es uns, es in eine andere Position auf der Seite zu verlagern, die wir wünschen, oder wir können einfach die Variable am Ende des Skripts verschwinden lassen, und die Referenz geht insgesamt verloren und löscht es effektiv. Nach dem obigen Code endet das DOM wie folgt:
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Lesen und Schreiben der Attribute eines Elements
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
<div >
Example 1.2. separate-content-behaviors.js <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
} <br>
<br>
var contentDiv = document.getElementById('content'); <br>
<br>
contentDiv.onmouseover = function() <br>
{ <br>
changeBorder('red'); <br>
}; <br>
<br>
contentDiv.onmouseout = function() <br>
{ <br>
changeBorder('black'); <br>
};
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Erhalten Sie alle Elemente mit einem bestimmten Attributwert
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Dies erfordert weniger Berechnung als das Iterieren jedes Elements auf der Seite und die Überprüfung des Typs. Die in dieser Lösung vorgestellte Funktion - GetElementsByAttribute - ist jedoch ideal, wenn Sie eine Reihe von Elementen verschiedener Typen finden müssen, die denselben Attributwert haben. <script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Ein Großteil des Code in GetElementsByAttribute befasst sich mit den Browserunterschieden in der Attributbehandlung, die früher in diesem Kapitel in dem Abschnitt „Lesen und Schreiben der Attribute eines Elements“ erwähnt wurden. Die erforderlichen Techniken werden verwendet, wenn das erforderliche Attribut Klasse oder für ist. Als zusätzlichen Bonus bei Überprüfung nach einer Übereinstimmung mit dem Klassenattribut prüft die Funktion der Funktion, wenn einem Element ein Element zugewiesen wurde Hinzufügen und Entfernen mehrerer Klassen zu/von einem Element
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Zunächst erstellt AddClass ein reguläres Ausdrucksmuster, das die zugegebene Klasse enthält. Anschließend wird dieses Muster verwendet, um den aktuellen Klassennamenwert zu testen. Wenn der Klassenname noch nicht vorhanden ist, suchen wir nach einem leeren Klassenname -Wert (in diesem Fall wird der Klassenname der Eigenschaft wörtlich zugeordnet), oder wir fügen dem vorhandenen Wert A Space und dem neuen Klassennamen an. <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Nachdem RemoveClass den regelmäßigen Ausdruck des Ersatzes auf eine Kopie des Wertes der KlasseName -Eigenschaft ausgeführt hat, wird der resultierende Wert durch Entfernen des nachverfolgenden Raums (der beim Entfernen der letzten Klasse in einem Klassennamen mit mehreren Klassen erstellt wird) beseitigt, und weist ihn dann dem Klassennamen des Ziels zurück. Zusammenfassung
Kapitel 7. Arbeiten Sie mit Windows and Frames
Sollten Sie Popup -Fenster verwenden? Die am meisten betrachtete Antwort, die ich habe, ist Folgendes: Nicht, wenn Sie ihm helfen können. Popup -Fenster haben einen schlechten Ruf durch die aggressive Verwendung von Vermarktern erlangt, aber selbst angeforderte Popups können Hindernisse für eine gute Benutzerfreundlichkeit sein.
geöffnet sind
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> sowie die Einschränkung der Fenstergröße weigert sich dieses Skript, ein Popup mit einem Überlauf zu erstellen. Wenn Sie also nicht "Scroll", "Größe" oder "beide" für das Überlaufargument angeben, wird die Standardeinstellung von "beide" verwendet. <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
Example 1.1. separate-content-behaviors.js (excerpt) <br>
<br>
function changeBorder(element, to) <br>
{ <br>
element.style.borderColor = to; <br>
}
<div >
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Alternativ möchten Sie vielleicht ein Popup öffnen, aber den Fokus im primären Fenster halten (damit ein sogenannter „Popunder“ erstellt). Sie können den Fokus von einem Fenster mit seiner Blur -Methode wegnehmen: <script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
In diesem Fall können Sie jedoch nicht vorhersagen, wo der Fokus als nächstes gehen wird. Daher ist es zuverlässiger, das primäre Fenster neu auszurichten: <div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
Öffnen von Links außerhalb des Standorts in einem neuen Fenster
In den strengen Versionen von HTML 4 und XHTML 1 existiert das Zielattribut für Links nicht mehr. Eine Interpretation davon ist, dass Webseiten einfach keine Links in neuen Fenstern öffnen sollten. Eine andere ist, dass Targeting keine universelle Semantik hat und daher in HTML nicht definiert werden sollte. (Der CSS 3 -Arbeitsentwurf enthält eine Reihe von Zieleigenschaften für die Linkpräsentation, die diesen Mechanismus, der an CSS überreicht wird, schließlich sehen. Ich hoffe, dass dies nie über die Entwurfsbühne hinausgeht, da er nichts mit CSS zu tun hat: Schnittstellenkontrolle ist in einer Designsprache nicht mehr angemessener als in einer semantischen Markup -Sprache!) <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Wenn jeder externe Link so identifiziert wird, kann ein einzelnes Dokument.onclick -Event -Handler Klicks auf alle diese Links verarbeiten: <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Wenn Sie in einer gerahmten Umgebung arbeiten, kann es erforderlich sein, dass Skripte zwischen Frames kommunizieren, entweder Lesen oder Schreiben von Eigenschaften oder Aufrufen von Funktionen in verschiedenen Dokumenten.
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Nehmen wir an, wir haben ein Skript im ContentFrame, das die Seite im Navigationsrahmen kommunizieren möchte. Beide Seiten sind in einem einzelnen Frameset enthalten - der einzige in der Hierarchie -, sodass wir die folgenden Referenzen im Inhaltsframe erfolgreich erstellen konnten: parent.frames [0]
Die Frames -Sammlung ist ein assoziatives Array (wie die Formularesammlung, die wir in Kapitel 6, Verarbeitung und Validating -Formulare gesehen haben), sodass auf jedes Element entweder mit Index oder Namen zugegriffen werden kann. Es ist im Allgemeinen am besten, den Namen zu verwenden (es sei denn, Sie haben einen guten Grund, dies nicht zu tun), damit Sie Ihren Code später nicht bearbeiten müssen, wenn sich die Rahmenauftrag ändert. Aus dem gleichen Grund können sich übergeordnete Referenzen in einem komplexen verschachtelten Frameset ändern, wenn sich die Hierarchie ändert. Daher empfehle ich im Allgemeinen, dass Entwickler immer von oben verweisen. Von den oben genannten Optionen ist die Referenz, die ich bevorzuge, top.Frames ['NavigationFrame']. <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Alternativ können wir einen Hinweis auf das andere gerahmte Dokument erhalten und mit dem DOM von dort zusammenarbeiten: <script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Erhalten Sie die Bildlaufposition
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
var scrollpos = getCrollingPosition ();
document.title = 'links =' scrollpos [0] 'top ='
Scrollpos [1];
}, 250);
Die Seite scrollen Sie zu einer bestimmten Position
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>: Diese Beispiele sagen: scrollen
Erhalten Sie die Ansichtsfenstergröße (den verfügbaren Speicherplatz im Fenster) <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Zusammenfassung
Kapitel 13. Basic Dynamic HTML
Handling Ereignisse
Das Hauptproblem bei der Verwendung von DOM 0 -Event -Handlern besteht darin, dass sie nicht für die Arbeit mit mehreren Skripten konzipiert sind. Jedes Mal, wenn Sie einen DOM 0 -Event -Handler zuweisen, überschreiben Sie jeden zuvor zugewiesenen Handler für dieses Ereignis. Dies kann den Betrieb mehrerer Skripte beeinträchtigen, die eine Ereignisbehandlung im selben Element erfordern. Mit W3C -Event -Hörern können Sie eine beliebige Anzahl von Ereignishörern auf dasselbe Element anwenden und die Möglichkeit genießen, eine davon jederzeit zu entfernen.
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Sie werden feststellen, dass in der Funktionszuweisung (Taste.onclick = Engage;) Klammern nicht dem Funktionsnamen folgen. Ihre Aufnahme würde die Funktion sofort ausführen und den Rückgabewert als Ereignishandler zuweisen. Indem Sie die Klammern weglassen, können Sie die Funktion selbst dem Handler zuweisen. Dies bedeutet auch, dass Sie keine Argumente direkt an die Handhabungsfunktion liefern können: Die Funktion muss ihre Informationen auf andere Weise erhalten.
mylink.onclick = function ()
{
Alarm ("Engage!");
false zurückgeben;
}
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<div <br>
onmouseover="changeBorder('red')" <br>
onmouseout="changeBorder('black')">
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Das W3C -Ereignismodell und anonyme Funktionen <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'">
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Finden Sie die Größe eines Elements
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Wir können feststellen, dass die genaue Pixelbreite dieses Elements in JavaScript durch Überprüfung der entsprechenden Offsetwidth- und Offseteight -Eigenschaften: <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Finden Sie die Position eines Elements
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
Erkennen der Position des Maus -Cursors
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Anzeigen eines Tooltips, wenn Sie über ein Element maust
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Nach dem Erhalten eines Cross-Browser-Ereignisobjekts und der Iterie vom Basis-Event-Zielelement mit einer Klasse von Hastooltip erstellt Showtip das Erstellen des Tooltip (A Div). Der Inhalt für den Tooltip stammt aus dem Titelattribut des Zielelements und wird in einen Textknoten im Tooltip gestellt. 
Abbildung 13.1. Eine dynamisch erzeugte Schicht, die auf Mausover <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Diese Funktion ist identisch mit der vorherigen Version, bis wir zum Einfügen des Tooltip -Elements gelangen. Kurz vor dem Einsetzen des Elements setzen wir seine Sichtbarkeit auf "versteckt". Dies bedeutet, dass die Ebene, wenn sie auf der Seite platziert ist, denselben Platz einnimmt, den sie sichtbar machen würde, wenn sie sichtbar wäre, der Benutzer sie jedoch nicht auf der Seite sieht. Auf diese Weise können wir die Dimensionen des Tooltip messen und sie dann neu positionieren, ohne dass der Benutzer sieht, wie sie in seiner ursprünglichen Position aufblitzt. Sortierungstabellen nach Spalte
sortieren
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> Zunächst müssen wir Ereignishörer auf jeder unserer Tabellenüberschriftenzellen einrichten. Diese hören auf Klicks auf unsere Spalten zu und lösen eine Sortierung in der Spalte, auf die geklickt wurde: <ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
Internet Explorer 5 für Mac hat Probleme, sich mit dynamisch generierten Tabelleninhalten zu befassen. Daher müssen wir sie ausdrücklich ausschließen, indem wir einen der Tabellen sortierbar machen. <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
<ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
Wenn SortColumn eine Zeile in der Kopie findet, deren sortierter Tabellenzellenwert "weniger" ist als die, die wir scannen, fügen wir eine Kopie der gescannten Zeile in den kopierten TBODY ein. Für eine Spalte in aufsteigender Reihenfolge können wir diesen Vergleich einfach umkehren: Der Wert der Zeile in der Kopie muss „größer“ sein als der der gescannten Zeile. 
Abbildung 13.2. Eine sortierbare Tabelle sortiert in absteigender Reihenfolge in der vierten Spalte
Abbildung 13.3. Eine sortierbare Tabelle sortiert in der zweiten Spalte
in aufsteigender Reihenfolge sortiert Zusammenfassung
häufig gestellte Fragen (FAQs) zu JavaScript von Grund auf
Was ist die Bedeutung von JavaScript für die Webentwicklung? Es handelt sich um eine Programmiersprache, mit der Sie komplexe Funktionen auf Webseiten implementieren können. Wenn eine Webseite nicht nur statische Informationen angezeigt wird, z. B. zeitnahe Inhaltsaktualisierungen, interaktive Karten, animierte Grafiken oder Scrollen von Video -Jukeboxen, ist JavaScript beteiligt. Es ist die dritte Ebene des Ebenenkuchens von Standard -Web -Technologien, von denen zwei (HTML und CSS) wir in unseren vorherigen Artikeln ausgiebig verwendet haben. Beginnen Sie damit, die Grundlagen von HTML und CSS zu verstehen, wenn sie die Grundlage der Webentwicklung bilden. Anschließend können Sie nach und nach zu JavaScript -Grundlagen wie Variablen, Datentypen, Funktionen, Schleifen und Bedingungen übergehen. Praxis ist der Schlüssel zum Lernen von JavaScript. Stellen Sie daher sicher, dass Sie regelmäßig codieren. JavaScript ist eine einzigartige Sprache mit eigenen Konzepten und Strukturen, und es ist wichtig, diese zu verstehen, bevor sie zu komplexeren Themen übergehen. Regelmäßige Praxis und Anwendung von gelernten Konzepten sind entscheidend für das Mastering von JavaScript.
Kann ich JavaScript ohne vorherige Programmiererfahrung lernen? Während ein Hintergrund in der Programmierung den Lernprozess erleichtert kann, ist dies keine Voraussetzung. JavaScript wird oft als gute erste Sprache für Anfänger empfohlen, da sie in der Webentwicklung vergeben und weit verbreitet sind. Wenn Sie im Durchschnitt von vorne anfangen und jeden Tag ein paar Stunden widmen, können Sie in wenigen Wochen bis einige Monate die Grundlagen lernen. Online -Plattformen wie Codecademy, Udemy und Freecodecamp bieten umfassende Kurse an. Bücher wie "eloquent JavaScript" und "Du weißt nicht, dass JS nicht weiß" werden ebenfalls sehr empfohlen. Darüber hinaus verfügt das Mozilla Developer Network (MDN) über umfangreiche Dokumentation zu JavaScript.
Wie ist die Zukunft von JavaScript? Mit dem Aufstieg von Frameworks wie React, Angular und Vue wird JavaScript stärker und vielseitig. Darüber hinaus hat die Entwicklung von node.js die Reichweite von JavaScript auf die Serverseite erweitert, wodurch es zu einer vollständigen Sprache ist. Da Webanwendungen in der Komplexität weiter wachsen, bleibt die Nachfrage nach qualifizierten JavaScript -Entwicklern wahrscheinlich hoch.
Das obige ist der detaillierte Inhalt vonSkript intelligenter: Qualität JavaScript von Grund auf neu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse