Skript intelligenter: Qualität JavaScript von Grund auf neu

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
ändern ist normalerweise kein Problem, aber wenn es sich um ein Dateieingangsfeld handelt (z. B. ), ist das Schreiben davon überhaupt nicht zulässig - eine Einschränkung, die böswillige Skripte davon abhält, Benutzer eine Datei hochzuladen, die sie nicht ausgewählt haben.

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:

• Dateien direkt öffnen und lesen (außer unter bestimmten Umständen, wie in Kapitel 18 beschrieben, erstellen Sie Webanwendungen mit JavaScript).
• Dateien auf dem Computer des Benutzers erstellen oder bearbeiten (außer Cookies, die in Kapitel 8 mit Cookies arbeiten).
• HTTP -Postdaten lesen.
• Systemeinstellungen oder andere Daten aus dem Computer des Benutzers, der nicht über Sprache oder Hostobjekte verfügbar ist
Ändern Sie den Wert eines Dateieingangsfeldes.
Ändern Sie die Anzeige eines Dokuments, das aus einer anderen Domäne geladen wurde.
Schließen oder ändern Sie die Symbolleisten und andere Elemente eines Fensters, das nicht durch Skript geöffnet wurde (d. H. Das Hauptbrowserfenster).

letztendlich wird JavaScript möglicherweise überhaupt nicht unterstützt.

Es lohnt sich auch, zu berücksichtigen, dass viele Browser Optionen enthalten, die eine größere Genauigkeit ermöglichen, als nur JavaScript zu aktivieren oder zu deaktivieren. Beispielsweise enthält Opera Optionen, um Skripte zu verhindern, um Windows zu schließen, Fenster zu bewegen, in die Statusleiste zu schreiben, mit der rechten Maustaste zu empfangen. Die Liste geht weiter. Es gibt wenig, was Sie tun können, um dies zu umgehen, aber meistens müssen Sie nicht müssen? Solche Optionen haben sich entwickelt, um "störende" Skripte (Status-Bar-Scroller, Nicht-Rechtsklick-Skripte usw.) zu unterdrücken). Wenn Sie sich also von solchen Skripten fernhalten, wird das Problem nur selten auftauchen.

JavaScript Best Practices

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:

Progressive Verbesserung - Bereitstellung von Benutzern, die nicht über JavaScript

verfügen

unauffälliges Scripting - Trennung von Inhalten von Verhalten
Konsistente Codierungspraxis - Verwenden von Zahnspangen und Semikolon -Terminatoren
• Das erste Prinzip stellt sicher, dass wir über das Gesamtbild nachdenken, wenn wir ein Skript auf unserer Website verwenden. Der zweite Punkt erleichtert die Wartung an unserem Ende und eine bessere Benutzerfreundlichkeit und
für den Benutzer

. (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

Es gibt mehrere Gründe, warum Benutzer möglicherweise kein JavaScript haben:

• Sie verwenden ein Gerät, das Skripte überhaupt nicht unterstützt oder es in begrenzter Weise unterstützt.
• Sie stehen hinter einem Proxy -Server oder einer Firewall, die JavaScript herausfiltert.
• Sie haben JavaScript absichtlich ausgeschaltet.

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

Der langjährige Ansatz für dieses Problem besteht darin, das HTML-NoScript-Element zu verwenden, dessen Inhalt von Browsern, die das Skriptelement überhaupt nicht unterstützen, und Browser, die es unterstützen, aber das Scripting ausgeschaltet haben

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:

Die Liste der Links ist einfach HTML, daher ist sie für alle Benutzer vorhanden, unabhängig davon, ob sie Scripting aktiviert haben oder nicht. Wenn das Skripten unterstützt wird, kann unser Menü.js -Skript dynamisches Verhalten anwenden. Wenn jedoch nicht das Skripten unterstützt wird, wird der Inhalt immer noch angezeigt. Wir haben uns nicht explizit zwischen Geräten unterschieden - wir haben nur Inhalte bereitgestellt, die dynamisch sind, wenn der Browser damit umgehen kann, und wenn nicht.

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Diskussion

Der „traditionelle“ Ansatz für dieses Szenario wäre, ein separates, dynamisches Menü in reinem JavaScript zu generieren und statische Fallinhalte in einem NoScript -Element zu haben:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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 Verhalten trennen (unauffällig Scripting)

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.

Eine gute Trennung sorgt für Websites, die leichter aufrechterhalten, zugänglicher sind und in älteren oder niedrigeren Browsern gut abbauen.

Lösung

Bei einem Extrem, das direkt gegen das Ideal der Trennung von Inhalten von Verhalten ist, können wir Inline -Code direkt in Attributereignis -Handler schreiben. Dies ist sehr chaotisch und sollte im Allgemeinen vermieden 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>

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>

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:

<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>

Hier ist das Scripting, das wir verwenden würden:

<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>

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.

Diskussion

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:

oder klarer, mit etwas mehr Eingabe:

<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>

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".

Verwenden von Zahnspangen und Semikolonen (konsistente Codierungspraxis)

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:

<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>

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:

<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>

Diese Version ist die ultimative Lesbarkeit der Code:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

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)
{
 ...
};

Hinzufügen eines Skripts zu einer Seite

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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 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:

<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 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

setzen

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.

Alle Beispiele in diesem Buch sind in HTML (im Gegensatz zu XHTML) bereitgestellt, daher ist diese Annahme vernünftig, aber wenn Sie mit XHTML arbeiten (korrekt mit einer MIME -Art der Anwendung/xhtml xml), können die Kommentare in Ihrem Code abgeworfen werden. Um sicherzustellen, dass die Kompatibilität für die Weiterleitung (und die damit verbundenen Vorteile Ihrer eigenen Codierungsgewohnheiten ebenso wie bei einzelnen Projekten zugeordnet sind), empfehle ich dringend, dass Sie es vermeiden, Kommentare auf diese Weise in Bezug auf Code einzulegen. Ihr JavaScript sollte immer in externen JavaScript -Dateien untergebracht sein.

Das Sprachattribut

Das Sprachattribut ist nicht mehr erforderlich. In den Tagen, in denen Netscape 4 und seine Zeitgenossen die dominanten Browser waren, hatte das Sprachattribut des <script> -Tags die Rolle des Schnüffelns für die Unterstützung auf Aufwärtsebene (z. B. durch Angabe von JavaScript1.3) und wirkte sich auf kleine Aspekte der Art und Weise aus, wie der Skript-Interpreter. <p><p>, aber eine Version von JavaScript anzugeben, ist jetzt ziemlich bedeutungslos, da JavaScript ECMAScript ist und das Sprachattribut zugunsten des Typattributs veraltet wurde. Dieses Attribut gibt den MIME -Typ der eingeschlossenen Dateien wie Skripte und Stilblätter an und ist die einzige, die Sie verwenden müssen: </script>

<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 Debuggers

Ich kann zwei Debugger empfehlen:

Venkman für Mozilla und Firefox
Microsoft -Skript -Debugger für Windows Internet Explorer

externe Debugger sind eine weitaus detailliertere Möglichkeit, Ihre Skripte zu analysieren, und verfügen über viel größere Fähigkeiten als ihre In-Browser-Gegenstücke. Externe Debugger können Dinge tun, wie das Stoppen der Ausführung des Skripts an bestimmten Stellen oder das Beobachten bestimmter Eigenschaften, damit Sie über eine Änderung der Veränderungen informiert sind, es kann jedoch verursacht werden. Sie enthalten auch Funktionen, mit denen Sie die Codezeile „Schritt" für die Zeile „durchführen“ können. Um Fehler zu finden, die nur kurz auftreten können oder ansonsten schwer zu isolieren sind.

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

sichtbar gemacht hat

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:

• node.childnodes-Eine Sammlung, die Verweise auf die einzelnen Kinder des angegebenen Knotens enthält, einschließlich Elemente und Textknoten
• node.Firstchild - Der erste untergeordnete Knoten des angegebenen Knotens
• node.lastchild - Der letzte untergeordnete Knoten des spezifischen Knotens
• node.parentnode - eine Referenz auf das übergeordnete Element des angegebenen Knotens
• node.nextsibling - Der nächste Knoten im Dokument, der das gleiche übergeordnete wie der angegebene Knoten
hat
• node

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.

Schauen Sie sich diese einfache Seite an:

<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>

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

nodetype von 1, während Textknoten einen Nodetyp von 3. haben. Sie können dieses Wissen beim Abrufen von Elementen verwenden:

Beispiel 5.9. Access_element4.js (Auszug)
 
var star2 = document.getElementById ("star1"). Nextsibling;  
 
while (star22.nodetype == "3")
{
 STAR2 = STAR2.NEXTSIBLING;  
}

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.

Erstellen von Elementen und Textknoten

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

<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>

Der Variable Newanchor ist ein neues Element, das in die Seite eingefügt werden kann.

Namenspaces in Dokumenten mit einem XML -MIME -Typ

angeben

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:

<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>

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:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

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:

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

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:

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

Wir können DOM -Methoden verwenden, um am Ende des Absatzes einen weiteren Link zu erstellen und einzufügen:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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 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.

.

Um ein Insert vor Ort zu verwenden, müssen Sie Verweise auf den Knoten haben, den Sie einfügen möchten, und auf den Knoten, vor dem Sie ihn einfügen möchten. Betrachten Sie diesen HTML -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 einen neuen Link vor dem vorhandenen einfügen, indem wir ein Insert vor seinem übergeordneten Element (den Absatz) aufrufen:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

Der Wert des Variablen NewChild wird ein Verweis auf das neu eingefügte Element sein.

Wenn wir uns nach dieser Operation in HTML übersetzen würden, würde es so aussehen:

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

Stattdessen könnten wir den vorhandenen Link vollständig anhand von Austernährung ersetzen:

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

Der Dom würde dann so aussehen:

<div >

Ändern des Typs eines Elements

fühlen sich Ihre bestellten Listen etwas ungeordnet an? Haben Ihre Überschriften einen Neid von Absatz? Mit ein wenig JavaScript -Wissen ist es möglich, die Art eines Elements vollständig zu ändern und gleichzeitig die Struktur seiner Kinder zu erhalten.

Lösung

Es gibt keine einfache und einfache Möglichkeit, die Art eines Elements zu ändern. Um diese Leistung zu erreichen

Nehmen wir an, wir wollen diesen Absatz in eine DIV ändern:

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>
};

Wir müssen eine neue DIV erstellen, jedes der Kinder des Absatzes einbeziehen und dann das neue Element gegen das Alte tauschen:

window.onload = function() <br>
{ <br>
  var contentDiv = document.getElementById('content'); <br>
 <br>
  ... <br>
};

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Achten Sie darauf, dass die Knotenstruktur des DOM

ändert

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

<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.

Lösung

Die Removechild -Methode entfernt jeden untergeordneten Knoten aus dem übergeordneten Knoten und gibt einen Verweis auf das entfernte Objekt zurück.

Beginnen wir mit diesem HTML:

<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>

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:

<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>

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:

<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 durch die Kindersammlung des Absatzes durchlaufen und jedes seiner Kinder individuell verlegt, bevor das Element selbst entfernt wird:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

Das DOM der Seite sieht jetzt so aus:

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

Lesen und Schreiben der Attribute eines Elements

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:

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

Wir könnten die Attribute des Elements wie SO lesen:

<div >

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:

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 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.

zugegriffen.

Diese Verknüpfungssyntax ist nicht nur sauberer und lesbarer: In einigen Situationen ist dies auch erforderlich. Internet Explorer 6 und Versionen unten werden nicht über SetAttribute zur visuellen Anzeige eines Elements vorgenommen. Alle Änderungen, die an der Klasse, der ID oder des Stils eines Elements unter Verwendung von SetAttribute vorgenommen werden, wirken sich nicht auf die Art und Weise aus, wie es angezeigt wird. Damit diese Änderungen wirksam werden müssen, müssen sie über die Attributeigenschaften des Elementknotens vorgenommen werden.

Um die Angelegenheit weiter zu verwirren, werden die Werte, die zurückgegeben werden, wenn eine Attributspezifische Eigenschaft gelesen wird, zwischen den Browsern variieren, die bemerkenswertesten Variationen, die in Konqueror auftreten. Wenn kein Attribut vorhanden ist, gibt Konqueror Null als Wert einer attributspezifischen Eigenschaft zurück, während alle anderen Browser eine leere Zeichenfolge zurückgeben. In einem genaueren Fall gibt einige Browser Link.getAttribute ("href") als absolute URL (z. B. "http://www.example.com/antares.html") zurück, während andere den tatsächlichen Attributwert (z. B. "Antares.html" zurückgeben). In diesem Fall ist es sicherer, die DOT -Eigenschaft zu verwenden, da sie die absolute URL über die Browser hinweg konsequent zurückgibt.

Also, was ist die allgemeine Lösung für diese Probleme?

Die grundlegende Regel lautet: Wenn Sie sicher sind, dass einem Attribut ein Wert zugewiesen wurde, kann die DOT -Eigenschaftsmethode sicher verwendet werden, um darauf zuzugreifen. Wenn Sie sich nicht sicher sind, ob ein Attribut festgelegt wurde oder nicht, sollten Sie zunächst eine der DOM -Methoden verwenden, um sicherzustellen, dass es einen Wert hat, und verwenden Sie die DOT -Eigenschaft, um ihren Wert zu erhalten.

für Lesen

Ein nicht überprüftes Attribut verwenden Sie Folgendes:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Dies stellt sicher, dass das Attribut existiert und nicht null ist, bevor er seinen Wert holt.

für auf

ein nicht überprüftes Attribut schreiben, verwenden Sie den folgenden Code:

<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>

Dieser Code stellt sicher, dass das Attribut zuerst korrekt erstellt wird und dann so festgelegt wird, dass der Internet -Explorer keine Probleme hat, wenn sich das Attribut auf die visuelle Anzeige des Elements auswirkt.

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).

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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").

Erhalten Sie alle Elemente mit einem bestimmten Attributwert

Die Fähigkeit, alle Elemente zu finden, die ein bestimmtes Attribut haben

Lösung

Um Elemente mit einem bestimmten Attributwert zu finden, müssen wir jedes Element auf der Seite für dieses Attribut überprüfen. Dies ist eine sehr berechnungsintensive Operation, daher sollte sie nicht leichtfertig durchgeführt werden. Wenn Sie alle Eingabelemente mit type = "Kontrollkästchen" finden möchten, sind Sie besser, um Ihre Suche zuerst einzuschränken:

<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.

Der einfachste Weg, jedes Element auf einer Seite zu überprüfen, besteht darin, die von GetElementsByTagName ("*") zurückgegebene Sammlung durchzuschleiten. Das einzige Problem mit dieser Methode ist, dass Internet Explorer 5.0 und 5.5 die Asterisk -Wildcard für die Tag -Auswahl nicht unterstützen. Glücklicherweise unterstützen diese Browser das Dokument. Alle Eigenschaften, ein Array mit allen Elementen auf der Seite. GetElementsByAttribute behandelt dieses Problem mit einer einfachen Code -Filiale und überprüft dann die Elemente auf einen bestimmten Attributwert und füge Übereinstimmungen zu einem Array hinzu:

<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

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

<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.

.

.

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.

Der Vorgang zum Entfernen einer Klasse verwendet ein reguläres Ausdrucksmuster, das mit dem mit dem, den wir hinzufügen, identisch sind, aber wir müssen nicht so viele Schecks durchführen:

<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

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.

Kapitel 7. Arbeiten Sie mit Windows and Frames

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,

Viele Menschen fühlen, dass die Fenstermanipulation der dunklen Seite ähnelt. Sie glauben, dass ein Fenster Teil der GUI des Benutzers ist, nicht des Dokuments, und da JavaScript eine Dokument -Scripting -Sprache ist, hat es keine Geschäftsfenster.

Ich bin im Allgemeinen geneigt zuzustimmen, aber ich weiß, dass die Meinung manchmal ein Luxus ist. Wenn Ihre Kunden etwas Bestimmtes fragen, können Sie nicht unbedingt ihre Meinung ändern oder die Freiheit haben, die Arbeit aufgrund eines solchen Prinzips abzulehnen. In diesem Kapitel werden wir eine Reihe von praktischen Fenster- und Rahmenmanipulationsaufgaben abdecken und gleichzeitig empfindlich auf die Benutzerfreundlichkeits- und Zugänglichkeitsprobleme bleiben, die sich aus ihrer Verwendung ergeben können.

Beachten Sie jedoch, dass es Grenzen gibt und einige Sorten von Fensterskripten besonders unfreundlich sind. Wir werden uns nicht mit aggressiven Taktiken auseinandersetzen, wie das Schließen oder Ändern des primären Fensters des Benutzers, das Verschieben von Fenstern auf dem Bildschirm oder das Öffnen von Vollbild- oder „chromeless“ Fenstern. Dies sind genau die Arten von Missbräuchen, die JavaScript einen schlechten Namen gegeben haben.

Während des größten Teils dieses Kapitels werden wir die Eigenschaften und Methoden des Fensterobjekts genau untersuchen. Diese werden von verschiedenen Browsern auf verschiedene Weise implementiert, von denen die meisten seit den Tagen vor dem standardisierten JavaScript verwendet wurden.

Wir haben einige Code -Zweige, mit denen wir uns befassen können, aber wir vermeiden das gefürchtete Browser, indem wir sorgfältig die Objekterkennung verwenden, und den Prozess des Erkennens eines Objekts oder einer Funktion zum Testen auf die Kompatibilität, anstatt bestimmte Browser zu erkennen.

.

Verwenden von Popup Windows

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.

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:

• Popups, die aus Links generiert werden, obwohl diese Links nichts tun, wenn das Skripting nicht verfügbar ist
• Popup -Fenster, die keine Statusleiste haben. Sie können daher nicht unbedingt feststellen, ob das Dokument geladen oder ins Stocken geraten ist, immer noch geladen usw.
• Popups, die den Benutzern nicht die Möglichkeit geben, das Fenster zu ändern, und Popups, die keine Scrollbars für Inhalte generieren, die außerhalb des Fensters
skalieren können
Windows, die "chromlos" sind oder für die volle Größe des Bildschirms des Benutzers

geöffnet sind

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. .

Wie minimiere ich die Probleme?

Was wir tun müssen, ist, einige goldene Regeln für den ethischen Einsatz von Popups festzulegen:

• Stellen Sie sicher
schließen Sie immer die Statusleiste an.
Fügen Sie immer einen Mechanismus hinzu, um den Inhalt zu überfließen: Entweder das Fensteränderung oder die Größe von Scrollbars oder beides zulassen.
Öffnen Sie keine Fenster, die größer als 640 × 480 Pixel sind. Durch die Einschränkung der Größe von Popups stellen Sie sicher, dass sie bei der überwiegenden Mehrheit der Monitore kleiner sind als die Hauptfenster der Benutzer. Dies erhöht die Wahrscheinlichkeit, dass der Benutzer erkennen wird, dass das Popup ein neues Fenster ist.

Lösung

Hier ist eine generische Popup -Funktion, die auf den obigen Richtlinien basiert:

<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.

.

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:

<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>

Dieser Code entspricht dem folgenden Markup:

<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>

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:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

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:

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

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:

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

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:

<div >

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:

verabschiedet.

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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.

Sie können diese Argumente ändern, wenn Sie benötigen, aber das Statusargument sollte immer auf Ja eingestellt werden, da es die gute Benutzerfreundlichkeit untergräbt. (Ich weiß - ich habe es schon erwähnt, aber ich sage es noch einmal, weil es wichtig ist!)

Das resizbare Argument hat möglicherweise keinen Effekt-in einigen Browsern, entweder durch Design oder durch die Benutzerpräferenzen, ist es nicht möglich, nicht-Residesible-Fenster zu erstellen, auch wenn Sie diesen Wert auf NO festlegen. In der Opera 8 für Mac OS X ist es nicht möglich, Windows für benutzerdefinierte Größe zu erstellen-ein erstelliges Fenster wird im aktuellen Fenster als neue Registerkarte angezeigt. Diese spezifische Ausnahme ist an sich möglicherweise nicht von Bedeutung, dient jedoch dazu, den allgemeinen Punkt zu veranschaulichen, der die Eigenschaften eines erstellten Fensters nicht absolut garantiert ist.

Sobald ein neues Fenster geöffnet ist, können Sie es mit der Fokusmethode des Objekts in den Fokus bringen. Dies ist normalerweise nicht erforderlich - im Allgemeinen geschieht dies standardmäßig -, aber die Technik kann nützlich sein, wenn Sie mit mehreren Fenstern skriptieren:

<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!)

Es gibt andere Interpretationen, und die Argumente sind lang (und manchmal mühsam), aber es genügt zu sagen, dass Sie möglicherweise eine Lösung für dieses Problem benötigen. Was auch immer Ihre persönlichen Ansichten sein mögen, es handelt sich um eine gemeinsame Anfrage von Webentwicklungskunden.

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

<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>

Diskussion

Die Verwendung eines einzelnen, dokumentweiten Ereignishandlers ist der effizienteste Ansatz-es ist viel besser als die Iterie durch alle Links und die Bindung eines Handlers an jeden einzeln. Wir können herausfinden, auf welchem ​​Element tatsächlich auf die Ereigniszieleigenschaft verwiesen wurde. Weitere Informationen zu Ereignissen und Ereigniseigenschaften finden Sie in Kapitel 13, grundlegender dynamischer HTML, aber hier finden Sie eine kurze Zusammenfassung der Situation.

Zwei völlig unterschiedliche Ereignismodelle werden von aktuellen Browsern verwendet. Das Skript legt fest, welche man verwendet werden soll, indem man nach E - dem Ereignisargument von Mozilla Browsern verwendet und von den meisten anderen Browsern übernommen wurde - im Gegensatz zum Fenster. Event -Objekt, das vom Internet Explorer verwendet wird. Anschließend speichert es die Objekteigenschaft, die dem verwendeten Modell angemessen ist: entweder für Mozilla und wie Browser oder SRCElement für dh

Das Zielobjekt (falls es nicht null ist) kann eines von drei Dingen sein: ein Link -Element -Knoten, ein Element- oder Textknoten in einem Link oder einen anderen Knoten. Wir möchten, dass die ersten beiden

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".

Der erste Test

Wir verwenden GetArttribute als erster Test für REL, da die Attributspezifischen Eigenschaften nur zuverlässig sind, wenn Sie sicher wissen, dass dem betreffenden Attribut einen Wert zugewiesen wurde. Wir können nicht direkt zum Testen von Target.rel gegen eine Zeichenfolge gehen, da es möglicherweise null oder undefiniert ist. Dies wurde im Abschnitt „Lesen und Schreiben der Attribute eines Elements“ ausführlicher erläutert.

Kommunikation zwischen Frames

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.

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Wir können vier Referenzen für Querrahmenscripting verwenden:

• Fenster oder Selbst bezieht sich auf die aktuelle gerahmte Seite.
• Elternteil bezieht sich auf die Seite, die den Rahmen enthält, der die aktuelle Seite enthält.
• oben bezieht
Die Rahmensammlung ist ein assoziatives Array aller Frames auf der aktuellen Seite.

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]
top.frames [0]
parent.frames ['navigationFrame']
top.frames ['navigationFrame']

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'].

Jetzt, da wir einen Verweis auf den Frame haben, können wir auf der anderen gerahmten Seite eine Funktion 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>

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>

Diskussion

Kommunikation zwischen Frames ist nur für Dokumente in derselben Domäne zulässig - aus Sicherheitsgründen ist es nicht möglich, mit einem Dokument zu arbeiten, das aus einer anderen Domäne als das Skript geladen wurde. Zum Beispiel würde es beispielsweise nicht für einen böswilligen Site -Eigentümer eine Website laden, die Sie regelmäßig in einen Rahmen besuchen und die dort eingebenen persönlichen Daten stehlen.

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.

.

.

Wenn Sie Benutzer haben, die sich über Probleme beschweren (und sie ihre Einstellungen nicht ändern können oder nicht, um das Cross-Frame-Scripting zu ermöglichen), ist das sicherste, was zu tun ist.

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.

Erhalten Sie die Bildlaufposition

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Die Funktion kann jetzt nach Bedarf aufgerufen werden. Hier ist eine einfache Demonstration, die ein Fenster 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>

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 () {
 var scrollpos = getCrollingPosition ();      
 document.title = 'links =' scrollpos [0] 'top ='
     Scrollpos [1];      
}, 250);

Diskussion

Die einzige wirkliche Komplikation hier ist, dass der IE 5 die Dokumentelement -Eigenschaft tatsächlich erkennt.

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:

• Fenster.pageyOffset wird von Firefox und anderen Mozilla -Browsern, Safari, Konqueror und Oper verwendet.
• document.documentElement.scrolltop wird von IE 6 im Standardmodus verwendet.
• document.body.scrolltop wird vom IE 5 und IE 6 im Modus „Macken“ verwendet.

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.

Die Seite scrollen Sie zu einer bestimmten Position

Alle aktuellen Browser implementieren dieselben (nicht standardmäßigen) Methoden zum Scrollen einer Seite. Zumindest ist hier etwas einfach!

Lösung

Es gibt zwei Methoden, mit denen die Seite (oder besser gesagt das Fenster oder Rahmen) nach einem bestimmten Betrag (Fenster.Scrollby) oder zu einem bestimmten Punkt (Fenster.Scrollto) scrollen kann:

<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)

Die Details der Ansichtsfenstergröße sind für viele Arten von Skripten benötigt, wo immer verfügbarer Platz ein Faktor in der Logik des Skripts ist. Diese Lösung bietet eine Versorgungsfunktion, um die Ansichtsfenstergröße zu erhalten. Wir werden die Funktion in diesem Buch noch einige Male wieder sehen!

Lösung

Die Eigenschaften, die wir benötigen, werden auf drei verschiedene Arten implementiert, z. Wie in diesem Beispiel können wir Objekttests verwenden, um festzustellen, welche Implementierung relevant ist, einschließlich des Tests für einen Nullwert, den wir in IE 5 benötigen (dieser Test ist aus dem gleichen Grund erforderlich: Weil die Eigenschaft existiert, ist es nicht das, was wir wollen): :

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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

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.

Kapitel 13. Basic Dynamic HTML

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.

.

DHTML verwendet HTML, DOM und CSS in Kombination mit einer clientseitigen Skriptsprache-JavaScript-, um ein Leben in ein traditionelles statisches Medium zu bringen. In früheren Kapiteln haben wir gelernt, dass wir JavaScript verwenden können, um Teile einer Seite zu manipulieren, um einige sehr praktische Ergebnisse zu erzielen. DHTML liefert Lösungen für viel komplexere Probleme, indem diese Teile zu einem kohärenten Ganzen zusammengestellt werden-eine, die reale Bedürfnisse erfüllt, anstatt Rätsel zu programmieren.

In diesem Kapitel werden einige der Tools untersucht, die wir benötigen, um effektive Benutzeroberflächen mit DHTML zu erstellen. Anschließend werden einige einfache Widgets besprochen, um sich auf die komplexeren Module vorzubereiten, die wir während des gesamten Restes dieses Buches berücksichtigen werden.

Handling Ereignisse

Jede Interaktion, die Benutzer mit einer Webseite - unabhängig davon, ob sie die Maus verschieben oder auf die Tastatur tippen -, führt dazu, dass der Browser ein Ereignis generiert. Manchmal möchten wir, dass unser Code auf diese Interaktion reagiert, also hören wir uns diese Ereignisse an, wodurch wir wissen, wann wir unseren Code ausführen sollten.

Lösung

Es gibt zwei Möglichkeiten, mit Ereignissen umzugehen: den kurzen Weg und den W3C -Weg. Jeder hat seine Vor- und Nachteile, aber beide ermöglichen es Ihnen, eine bestimmte Funktion auszuführen, wenn ein Ereignis in einem bestimmten Element auftritt.

Der kurze Weg: Verwenden von Ereignishandlern

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:

• Jeder Browser, der derzeit in Betrieb ist
Jede von einem DOM 0 -Ereignishandler ausgeführte Funktion hat Zugriff auf das genaue Element, dem der Ereignishandler zugewiesen wurde. (Wie Sie später sehen werden, ist dies bei W3C -Event -Hörern nicht immer verfügbar.)

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.

Wenn Sie sicher sein können, dass Ihr Code die Ereignisbehandlung eines anderen nicht beeinträchtigt (z. B. platzieren Sie Ereignisse für Elemente, die dynamisch in Ihrem eigenen Skript erstellt werden), ist es sicher, DOM 0 -Ereignishandler zu verwenden. Aber - alle Dinge sind gleich - es ist sicherer, die W3C -Event -Hörer zu verwenden, wo immer wir in diesem Buch tun.

Eine Anzahl von DOM 0 -Ereignishandlern ist über den Browser erhältlich. Tabelle 13.1, „DOM 0 Event -Handler“ listet die am häufigsten verwendeten Handler auf.

Tabelle 13.1. DOM 0 Ereignishandler

Bei der Verwendung von DOM 0 -Ereignishandlern, sobald Sie einen Verweis auf das Element haben, dessen Ereignisse Sie verarbeiten möchten, ist es einfach, der entsprechenden Eigenschaft eine Handhabungsfunktion zuzuweisen:

<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.

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");            
mylink.onclick = function ()
{
 Alarm ("Engage!");      
     
 false zurückgeben;      
}

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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>

Um den Internet Explorer zu unterstützen, benötigen Sie diesen Code:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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>

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:

<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>

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:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

Wir können diese Funktion aufrufen, wenn wir die Standardaktion abbrechen möchten:

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

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.

nach AttachEvent

Internet Explorer für Windows übergibt tatsächlich ein Ereignisobjekt an die Funktion zur Ereignishandhabung, wenn AttafEvent zum Anbringen eines Ereignishörers verwendet wird. Wir müssen jedoch noch nach der Existenz dieses Objekts für alle Browser, die das alte Ereignismodell verwenden, überprüfen.

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:

<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

Das W3C -Ereignismodell ermöglicht die Entfernung anonymer Funktionen nicht. Wenn Sie also einen Ereignishörer entfernen müssen, halten Sie sich an einen Verweis auf die betreffende Funktion.

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.

Diskussion

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:

Hier bezieht sich dies auf den Link mit ID MyLink. Wir können es verwenden, um das HREF -Attribut des Links 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>

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.

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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>

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:

<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>

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 solche Lösung besteht darin, die Ereignishörfunktion zu einer Methode des Zielobjekts im Internet Explorer zu machen. Wenn die Methode aufgerufen wird, zeigt dies natürlich auf das Objekt, für das die Methode aufgerufen wurde. Dies erfordert, dass sowohl der AttachEventListener als auch der Abschlusslistener geändert werden:

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

Diese Denkweise war in Einträgen für Peter Paul Kochs verbessertes AddEvent -Wettbewerb gut vertreten.

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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 wir nicht wollten, dass ein Ereignis weiter ausbreitet als unser Event -Handler, verwenden wir 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>

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.

.

Finden Sie die Größe eines Elements

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

Stellen wir uns vor, die Dimensionen eines Elements wurden in CSS wie folgt festgelegt:

<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:

überprüft 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>

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.

Finden Sie die Position eines Elements

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):

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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).

.

Es gibt so viele mögliche Kombinationen von verschachtelten Positionierungs- und Browserunterschieden, dass es fast unmöglich ist, ein Skript zu schreiben, das sie alle berücksichtigt. Wenn Sie mit einer Schnittstelle arbeiten, die eine Menge relativer oder absoluter Positionierung verwendet, ist es wahrscheinlich am einfachsten, mit bestimmten Fällen zu experimentieren und spezielle Funktionen zu schreiben, um mit ihnen umzugehen. Hier sind nur einige der Unterschiede, auf die Sie begegnen könnten:

• In Internet Explorer für Windows und Mozilla/Firefox wird jedes Element, dessen Eltern relativ positioniert ist, die Grenze des Elternteils nicht in seinen eigenen Versatz einbezieht. Der Offset des Elternteils misst jedoch nur am Rand seiner Grenze. Daher enthält die Summe dieser Werte nicht den Randabstand.
• In Opera und Safari, jedes absolut oder relativ positionierte Element, dessen OffsetParent der Körper den Rand des Körpers in seinen eigenen Versatz beinhaltet. Der Offset des Körpers umfasst auch seinen eigenen Rand.
• In Internet Explorer für Windows enthält jedes absolut positionierte Element in einem relativ positionierten Element den Rand des relativ positionierten Elements in seinen Offset. Das relativ positionierte Element umfasst auch seinen Rand.

Erkennen der Position des Maus -Cursors

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

Das Ereignisobjekt enthält alles, was Sie wissen müssen, um mit der Position des Cursors zu arbeiten, obwohl ein bisschen Objekterkennung erforderlich ist, um sicherzustellen, dass Sie über alle Browser äquivalente Werte erhalten.

Die Standardmethode, um die Position des Cursors relativ zur gesamten Seite zu erhalten, erfolgt über die Pagex- und Seiteneigenschaften des Ereignisobjekts. Internet Explorer unterstützt diese Eigenschaften nicht, enthält jedoch einige Eigenschaften, die fast die wollen, die wir wollen. Clientx und Clienty sind im Internet Explorer verfügbar, obwohl sie den Abstand vom Mauszeiger bis zu den Kanten des Browserfensters messen. Um die Position des Cursors relativ zur gesamten Seite zu finden, müssen wir diesen Abmessungen die aktuelle Scrollposition hinzufügen. Diese Technik wurde in Kapitel 7 behandelt und arbeitete mit Fenstern und Rahmen. Verwenden wir die GetCrollingPosition -Funktion von dieser Lösung, um die erforderlichen Abmessungen abzurufen:

<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

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:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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:

<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 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.

<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.

Um sicherzustellen, dass der Browser kein eigenes Tooltip auf unserem erweiterten Tooltip anzeigt, wird der Titel des Zielelements dann gelöscht. Jetzt gibt es nichts, was der Browser als Tooltip anzeigen kann, sodass er nicht die von uns erstellte, die wir gerade erstellt haben. Machen Sie sich keine Sorgen über die potenziellen Zugänglichkeitsprobleme, die durch Entfernen des Titels verursacht werden: Wir werden ihn später zurücksetzen.

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.

Um Hooks für das Styling unseres Tooltip bereitzustellen, weisen wir dem Tooltip -Element eine ID zu, die auf der ID des Zielelements (dargetIdtooltip) basiert, und setzen eine Klasse von Tooltip. Obwohl dieser Ansatz die Anwendung von Stilen über CSS ermöglicht, können wir die Position des Tooltip nicht im Voraus berechnen. Daher müssen wir die Koordinaten des Maus -Cursors verwenden, wie berechnet, wenn das Ereignis ausgelöst wird, um den Tooltip zu positionieren (mit ein paar zusätzlichen Pixeln, um ihm etwas Platz zu geben).

.

Alles, was übrig bleibt, ist, das Tooltip -Element dem Körper anzuhängen, sodass es auf magische Weise angezeigt wird, wenn wir über den Link maust! Mit ein wenig CSS könnte es wie Abbildung 13.1 aussehen, „eine dynamisch erzeugte Schicht, die auf Mausover erscheint“.

Abbildung 13.1. Eine dynamisch erzeugte Schicht, die auf Mausover

erscheint

Wenn die Maus aus dem Element verschoben wird, löschen wir den Tooltip aus dem Dokument und es wird verschwinden:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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

durch Überprüfen in jeder Dimension, ob die Maussposition geringer ist als die Größe der Browserfenster, abzüglich der Tooltip -Größe, können wir erkennen, wie weit man die Ebene bewegen kann, um sie auf den Bildschirm zu bringen:

<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.

Um festzustellen, ob die Ebene außerhalb des Ansichtsfensters angezeigt wird, verwenden wir die Position des Cursors relativ zum Ansichtsfenster. Dies könnte theoretisch durch Verwendung von Clientx/Clienty erhalten werden, aber denken Sie daran: Safari gibt einen falschen Wert für diese Eigenschaft. Stattdessen verwenden wir unsere Querbrowser-Werte in Cursorposition und subtrahieren Sie die Bildlaufposition (die das Äquivalent von Clientx/Clienty entspricht). Die Größe des Ansichtsfensters wird unter Verwendung der in Kapitel 7 erstellten GetViewPortSize -Funktion erhalten, die mit Fenstern und Frames gearbeitet haben. Für jede Dimension überprüfen wir, ob die Cursorposition plus die Größe der Schicht größer ist als die Größe des Ansichtsfenfers (minus eine Zulage für Scrollbars).

.

.

.

Wenn ein Teil der Ebene außerhalb des Ansichtsfensters erscheinen wird, positionieren wir es, indem wir ihre Abmessungen von der Ansichtsfenstergröße subtrahieren. Ansonsten ist es normal unter Verwendung der Cursorposition.

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.

Sortierungstabellen nach Spalte

sortieren

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

Zu Beginn verwenden wir eine semantisch aussagekräftige HTML -Tabelle. Dies liefert uns die Struktur, die wir benötigen, um Ereignishörer einzufügen, zusätzliche Elemente zu injizieren und unsere Daten zu 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.

nur Tabellen mit der Klassensortable werden in sortierbare Tabellen umgewandelt, sodass initsSandableAsable das DOM navigiert, um die Tabellenüberschriftenzellen in diesen Tabellen zu finden. Sobald sie gefunden wurden, ist der Inhalt jeder Überschriftenzelle in einen Hyperlink eingewickelt. Dadurch können Tastaturbenutzer eine Spalte auswählen, um die Tabelle nach zu sortieren - und ein Ereignishörer wird auf diesen Links festgelegt, um Klick -Ereignisse zu überwachen und SortColumn als Antwort auszuführen. Das Titelsattribut jedes Links ist ebenfalls festgelegt, das dem Benutzer Informationen darüber bereitstellt, was beim Klicken des Links passieren wird.

Die SortColumn -Funktion ist aufgrund der Tatsache, dass sie die gesamte Tabellenstruktur jedes Mal navigieren und neu ordnen muss, ziemlich langwierig, wenn eine Kopfzelle geklickt wird:

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

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

Um den Inhalt der Tabellenzelle zu finden, verwenden wir die Funktion GetInternaltext:

<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.

Bevor ein Vergleich durchgeführt wird, überprüfen wir jedoch, ob der Inhalt der sortierten Tabellenzelle als Ganzzahl oder Float interpretiert werden kann. In diesem Fall werden die Vergleichswerte konvertiert. Dies stellt sicher, dass Spalten, die Zahlen enthalten, ordnungsgemäß sortiert sind. String -Vergleiche erzeugen unterschiedliche Ergebnisse als Zahlenvergleiche.

Sobald alle unsere ursprünglichen Zeilen in den neuen Tbody kopiert wurden, wird dieses Element verwendet, um die alte zu ersetzen, und wir haben unsere sortierte Tabelle!

Verwenden der SortabledesScending- und SortableAscending -Klassen, die den aktuell sortierten Tabellenüberschriftenzellen zugeordnet sind, können CSS verwenden, um den Benutzer zu informieren, in welcher Spalte die Tabelle sortiert ist, und wie sie in Abbildung 13.2 gezeigt ist, „Eine sortierbare Tabelle in der vierten Spalte“ und Abbildung 13.3, „Eine Sortable -Tabelle sortiert in der Aufstiegsreihenfolge“.

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

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 .

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 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.

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!