So trennen Sie das JavaScript auf Ihrer Webseite

Wenn Sie zum ersten Mal ein neues JavaScript schreiben, können Sie es am einfachsten einrichten, indem Sie den JavaScript-Code einbetten direkt in die Webseite, so dass sich alles an einem Ort befindet, während Sie es testen, damit es funktioniert richtig. Wenn Sie ein vorab geschriebenes Skript in Ihre Website einfügen, werden Sie in den Anweisungen möglicherweise aufgefordert, Teile oder das gesamte Skript in die Webseite selbst einzubetten.

Dies ist in Ordnung, um die Seite einzurichten und sie ordnungsgemäß zum Laufen zu bringen. Sobald Ihre Seite jedoch so funktioniert, wie Sie es möchten, können Sie dies tun Verbessern Sie die Seite, indem Sie das JavaScript in eine externe Datei extrahieren, damit Ihr Seiteninhalt im HTML-Code nicht so überfüllt ist mit nicht inhaltlichen Elementen wie z JavaScript.

Wenn Sie nur JavaScripts kopieren und verwenden, die von anderen Personen geschrieben wurden, haben die Anweisungen zum Hinzufügen des Skripts zu Ihrer Seite möglicherweise dazu geführt, dass Sie einen oder mehrere große Abschnitte von haben JavaScript ist tatsächlich in Ihre Webseite selbst eingebettet, und ihre Anweisungen sagen Ihnen nicht, wie Sie diesen Code aus Ihrer Seite in eine separate Datei verschieben können und trotzdem über JavaScript verfügen Arbeit. Machen Sie sich jedoch keine Sorgen, denn unabhängig davon, welchen Code das auf Ihrer Seite verwendete JavaScript verwendet, können Sie das JavaScript problemlos verschieben Verlassen Sie Ihre Seite und richten Sie sie als separate Datei ein (oder als Dateien, wenn mehr als ein JavaScript-Teil in die Seite eingebettet ist). Der Vorgang hierfür ist immer der gleiche und lässt sich am besten anhand eines Beispiels veranschaulichen.

Schauen wir uns an, wie ein Teil von JavaScript aussehen könnte, wenn es in Ihre Seite eingebettet ist. Ihr tatsächlicher JavaScript-Code unterscheidet sich von dem in den folgenden Beispielen gezeigten, aber der Vorgang ist in jedem Fall der gleiche.

Ihr eingebettetes JavaScript sollte ungefähr so ​​aussehen wie eines der drei oben genannten Beispiele. Natürlich unterscheidet sich Ihr tatsächlicher JavaScript-Code von dem gezeigten, aber das JavaScript wird wahrscheinlich mit einer der drei oben genannten Methoden in die Seite eingebettet. In einigen Fällen verwendet Ihr Code möglicherweise das veraltete language = "Javascript" Anstatt von type = "text / javascript" In diesem Fall möchten Sie Ihren Code möglicherweise zunächst auf den neuesten Stand bringen, indem Sie das Sprachattribut durch das Typattribut ersetzen.

Bevor Sie das JavaScript in eine eigene Datei extrahieren können, müssen Sie zunächst den zu extrahierenden Code identifizieren. In allen drei obigen Beispielen müssen zwei Zeilen des tatsächlichen JavaScript-Codes extrahiert werden. Ihr Skript wird wahrscheinlich viel mehr Zeilen enthalten, kann jedoch leicht identifiziert werden, da es auf Ihrer Seite dieselbe Stelle einnimmt wie die beiden JavaScript-Zeilen, die wir verwenden haben in den obigen drei Beispielen hervorgehoben (alle drei Beispiele enthalten die gleichen zwei Zeilen JavaScript, es ist nur der Container um sie herum, der leicht ist anders).

1. Das erste, was Sie tun müssen, um das JavaScript tatsächlich in eine separate Datei zu extrahieren, ist, einen Nur-Text-Editor zu öffnen und auf den Inhalt Ihrer Webseite zuzugreifen. Anschließend müssen Sie das eingebettete JavaScript suchen, das von einer der in den obigen Beispielen gezeigten Codevarianten umgeben ist.
2. Nachdem Sie den JavaScript-Code gefunden haben, müssen Sie ihn auswählen und in Ihre Zwischenablage kopieren. Im obigen Beispiel wird der auszuwählende Code hervorgehoben. Sie müssen weder die Skript-Tags noch die optionalen Kommentare auswählen, die möglicherweise um Ihren JavaScript-Code herum angezeigt werden.
3. Öffnen Sie eine weitere Kopie Ihres Nur-Text-Editors (oder eine andere Registerkarte, wenn Ihr Editor das Öffnen mehrerer Dateien gleichzeitig unterstützt) und fügen Sie den JavaScript-Inhalt dort ein.
4. Wählen Sie einen beschreibenden Dateinamen aus, der für Ihre neue Datei verwendet werden soll, und speichern Sie den neuen Inhalt unter diesem Dateinamen. Mit dem Beispielcode besteht der Zweck des Skripts darin, aus Frames auszubrechen, sodass ein geeigneter Name verwendet werden kann framebreak.js.
5. Jetzt haben wir das JavaScript in einer separaten Datei und kehren zum Editor zurück, wo wir den ursprünglichen Seiteninhalt haben, um die Änderungen dort vorzunehmen und auf die externe Kopie des Skripts zu verlinken.
6. Da wir das Skript jetzt in einer separaten Datei haben, können wir alles zwischen den Skript-Tags in unserem ursprünglichen Inhalt entfernen, so dass die Etikett.
7. Der letzte Schritt besteht darin, dem Skript-Tag ein zusätzliches Attribut hinzuzufügen, das angibt, wo sich das externe JavaScript befindet. Wir machen das mit a src = "Dateiname" Attribut. Mit unserem Beispielskript würden wir src = "framebreak.js" angeben.
8. Die einzige Komplikation besteht darin, dass wir uns entschieden haben, die externen JavaScripts in einem separaten Ordner von den Webseiten zu speichern, auf denen sie verwendet werden. Wenn Sie dies tun, müssen Sie den Pfad vom Webseitenordner zum JavaScript-Ordner vor dem Dateinamen hinzufügen. Zum Beispiel, wenn die JavaScripts in a gespeichert werden js Ordner innerhalb des Ordners, der unsere Webseiten enthält, die wir benötigen würden src = "js / framebreak.js"

Wie sieht unser Code aus, nachdem wir das JavaScript in eine separate Datei aufgeteilt haben? Im Fall unseres Beispiels JavaScript (vorausgesetzt, JavaScript und HTML befinden sich im selben Ordner) lautet unser HTML auf der Webseite jetzt:

Wir haben auch eine separate Datei namens framebreak.js, die enthält:

if (top.location! = self.location) top.location = self.location;

Ihr Dateiname und Ihr Dateiinhalt unterscheiden sich stark davon, da Sie extrahiert haben Was auch immer JavaScript in Ihre Webseite eingebettet war und der Datei einen beschreibenden Namen gab, basierend auf was es tut. Der eigentliche Prozess des Extrahierens ist jedoch der gleiche, unabhängig davon, welche Zeilen darin enthalten sind.

Was ist mit den beiden anderen Zeilen in den Beispielen zwei und drei? Der Zweck dieser Zeilen in Beispiel 2 besteht darin, das JavaScript vor Netscape 1 und dem Internet zu verbergen Explorer 2, von dem keiner mehr verwendet und daher werden diese Zeilen in der ersten nicht wirklich benötigt Platz. Durch das Platzieren des Codes in einer externen Datei wird der Code vor Browsern ausgeblendet, die das Skript-Tag ohnehin nicht besser verstehen als in einem HTML-Kommentar. Das dritte Beispiel wird für XHTML-Seiten verwendet, um Validatoren mitzuteilen, dass das JavaScript als Seiteninhalt behandelt werden soll und nicht, um es zu validieren als HTML (wenn Sie einen HTML-Doctype anstelle eines XHTML-Doctype verwenden, weiß der Validator dies bereits und diese Tags auch nicht erforderlich). Mit dem JavaScript in einer separaten Datei gibt es kein JavaScript mehr auf der Seite, das von Validatoren übersprungen werden kann, sodass diese Zeilen nicht mehr benötigt werden.

Eine der nützlichsten Möglichkeiten, mit JavaScript Funktionen zu einer Webseite hinzuzufügen, besteht darin, eine Verarbeitung als Reaktion auf eine Aktion Ihres Besuchers durchzuführen. Die häufigste Aktion, auf die Sie reagieren möchten, ist, wenn dieser Besucher auf etwas klickt. Der Ereignishandler, mit dem Sie auf Besucher reagieren können, die auf etwas klicken, wird aufgerufen onclick.

Wenn die meisten Leute zum ersten Mal darüber nachdenken, ihrer Webseite einen Onclick-Ereignishandler hinzuzufügen, denken sie sofort daran, ihn einem hinzuzufügen Etikett. Dies ergibt einen Code, der oft so aussieht:

Dies ist das falsch Möglichkeit, onclick zu verwenden, es sei denn, Sie haben eine tatsächlich aussagekräftige Adresse im href-Attribut, sodass diejenigen ohne JavaScript irgendwohin übertragen werden, wenn sie auf den Link klicken. Viele Leute lassen auch die "return false" aus diesem Code weg und fragen sich dann, warum der obere Rand der aktuellen Seite immer geladen wird Nachdem das Skript ausgeführt wurde (was href = "#" der Seite vorschreibt, es sei denn, false wird von allen Ereignishandlern zurückgegeben. Wenn Sie als Ziel des Links etwas Bedeutendes haben, möchten Sie möglicherweise nach dem Ausführen des Onclick-Codes dorthin gehen, und dann benötigen Sie nicht die "return false".

Was viele Menschen nicht merken, ist, dass der Onclick-Ereignishandler hinzugefügt werden kann irgendein HTML-Tag auf der Webseite, um zu interagieren, wenn Ihr Besucher auf diesen Inhalt klickt. Wenn Sie also möchten, dass etwas ausgeführt wird, wenn Benutzer auf ein Bild klicken, können Sie Folgendes verwenden:

Wenn Sie etwas ausführen möchten, wenn Benutzer auf einen Text klicken, können Sie Folgendes verwenden:

etwas Text

Diese geben natürlich nicht den automatischen visuellen Hinweis darauf, dass eine Antwort erfolgt, wenn Ihr Besucher auf sie klickt So wie ein Link, aber Sie können diesen visuellen Hinweis einfach genug selbst hinzufügen, indem Sie das Bild oder die Spanne stylen passend.

Das andere, was Sie über diese Möglichkeiten zum Anhängen des Onclick-Ereignishandlers beachten sollten, ist, dass sie das nicht benötigen "return false", da es keine Standardaktion gibt, die ausgeführt wird, wenn auf das Element geklickt wird, das sein muss deaktiviert.

Diese Art, den Onclick anzuhängen, ist eine große Verbesserung gegenüber der schlechten Methode, die viele Leute verwenden, aber es ist noch weit davon entfernt, die beste Art der Codierung zu sein. Ein Problem beim Hinzufügen von onclick mit einer der oben genannten Methoden besteht darin, dass Ihr JavaScript immer noch mit Ihrem HTML-Code gemischt wird. onclick ist nicht Als HTML-Attribut ist es ein JavaScript-Ereignishandler. Um unser JavaScript von unserem HTML zu trennen und die Wartung der Seite zu vereinfachen, müssen wir diese On-Click-Referenz aus der HTML-Datei in eine separate JavaScript-Datei übertragen, in die sie gehört.

Der einfachste Weg, dies zu tun, besteht darin, den Onclick im HTML durch einen zu ersetzen Ich würde Dadurch wird es einfach, den Ereignishandler an der entsprechenden Stelle im HTML-Code anzuhängen. Unser HTML-Code könnte nun eine der folgenden Anweisungen enthalten:

 etwas Text

Wir können dann das JavaScript in einer separaten JavaScript-Datei codieren, die entweder am unteren Rand des Seitenkörpers oder in verknüpft ist Dies befindet sich im Kopf der Seite und wo sich unser Code in einer Funktion befindet, die selbst aufgerufen wird, nachdem die Seite vollständig geladen wurde. Unser JavaScript zum Anhängen der Ereignishandler sieht nun folgendermaßen aus:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Eine Sache zu beachten. Sie werden feststellen, dass wir onclick immer vollständig in Kleinbuchstaben geschrieben haben. Wenn Sie die Anweisung in ihrem HTML-Code codieren, werden Sie feststellen, dass einige Benutzer sie als onClick schreiben. Dies ist falsch, da die Namen der JavaScript-Ereignishandler alle in Kleinbuchstaben geschrieben sind und es keinen solchen Handler wie onClick gibt. Sie können damit durchkommen, wenn Sie das JavaScript direkt in Ihr HTML-Tag aufnehmen, da bei HTML nicht zwischen Groß- und Kleinschreibung unterschieden wird und der Browser es dem richtigen Namen für Sie zuordnet. Sie können nicht mit der falschen Großschreibung in Ihrem JavaScript selbst davonkommen, da bei JavaScript zwischen Groß- und Kleinschreibung unterschieden wird und es in JavaScript kein onClick gibt.

Dieser Code ist eine enorme Verbesserung gegenüber früheren Versionen, da wir jetzt beide das Ereignis an das richtige Element in unserem HTML anhängen und das JavaScript vollständig vom HTML getrennt ist. Wir können dies jedoch noch weiter verbessern.

Das einzige verbleibende Problem besteht darin, dass wir nur einen Onclick-Ereignishandler an ein bestimmtes Element anhängen können. Sollten wir zu irgendeinem Zeitpunkt einen anderen Onclick-Ereignishandler an dasselbe Element anhängen müssen, wird die zuvor angehängte Verarbeitung nicht mehr an dieses Element angehängt. Wenn Sie Ihrer Webseite verschiedene Skripte für verschiedene Zwecke hinzufügen, gibt es mindestens eine Möglichkeit, dass zwei oder mehr von ihnen eine Verarbeitung bereitstellen möchten, die ausgeführt werden soll, wenn dasselbe Element vorhanden ist angeklickt. Die unübersichtliche Lösung für dieses Problem besteht darin, zu identifizieren, wo diese Situation auftritt, und die Verarbeitung, die aufgerufen werden muss, zu einer Funktion zu kombinieren, die die gesamte Verarbeitung ausführt.

Während solche Konflikte bei onclick weniger häufig sind als bei onload, ist es nicht die ideale Lösung, die Konflikte im Voraus zu identifizieren und miteinander zu kombinieren. Es ist überhaupt keine Lösung, wenn sich die tatsächliche Verarbeitung, die an das Element angehängt werden muss, im Laufe der Zeit ändert, sodass manchmal eine Sache zu tun ist, manchmal eine andere und manchmal beides.

Die beste Lösung besteht darin, die Verwendung eines Ereignishandlers vollständig einzustellen und stattdessen einen JavaScript-Ereignis-Listener (zusammen) zu verwenden mit dem entsprechenden attachEvent für Jscript - da dies eine der Situationen ist, in denen JavaScript und JScript verwendet werden abweichen). Wir können dies am einfachsten tun, indem wir zuerst eine addEvent-Funktion erstellen, die entweder einen Ereignis-Listener oder einen Anhang hinzufügt, je nachdem, welche der beiden von der ausgeführten Sprache unterstützt wird.

Funktion addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); return true; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Wir können jetzt die Verarbeitung anhängen, die stattfinden soll, wenn auf unser Element geklickt wird.

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

Wenn Sie diese Methode zum Anhängen des zu verarbeitenden Codes verwenden, wenn auf ein Element geklickt wird, bedeutet dies, dass Sie einen weiteren addEvent-Aufruf ausführen, um eine weitere Funktion hinzuzufügen Wenn Sie auf ein bestimmtes Element klicken, wird die vorherige Verarbeitung nicht durch die neue Verarbeitung ersetzt, sondern es können beide Funktionen ausgeführt werden Lauf. Wir müssen beim Aufrufen eines addEvent nicht wissen, ob dem bereits eine Funktion zugeordnet ist oder nicht Wenn das Element ausgeführt wird, wenn es angeklickt wird, wird die neue Funktion zusammen mit und Funktionen ausgeführt, die zuvor vorhanden waren befestigt.

Sollten wir die Fähigkeit benötigen, Funktionen aus dem zu entfernen, was ausgeführt wird, wenn auf ein Element geklickt wird, können wir eine erstellen entsprechende deleteEvent-Funktion, die die entsprechende Funktion zum Entfernen eines Ereignis-Listeners oder eines angehängten Ereignisses aufruft Veranstaltung?

Der einzige Nachteil dieser letzten Art des Anhängens der Verarbeitung besteht darin, dass diese wirklich alten Browser diese relativ neuen Arten des Anhängens der Ereignisverarbeitung an eine Webseite nicht unterstützen. Es sollte inzwischen nur wenige Leute geben, die solche veralteten Browser verwenden, um sie in J (ava) zu ignorieren. Skript, das wir schreiben, abgesehen davon, dass wir unseren Code so schreiben, dass er keine großen Fehler verursacht Mitteilungen. Die obige Funktion ist so geschrieben, dass nichts unternommen wird, wenn keine der verwendeten Methoden unterstützt wird. Die meisten dieser wirklich alten Browser unterstützen auch nicht die getElementById-Methode zum Verweisen auf HTML und sind daher einfach if (! document.getElementById) gibt false zurück; An der Spitze einer Ihrer Funktionen, die solche Aufrufe ausführen, wäre dies ebenfalls angemessen. Natürlich sind viele Leute, die JavaScript schreiben, nicht so rücksichtsvoll gegenüber denen, die noch antike Browser und verwenden Daher müssen sich diese Benutzer daran gewöhnen, auf fast jeder Webseite, die sie jetzt besuchen, JavaScript-Fehler zu sehen.

Welche dieser verschiedenen Methoden verwenden Sie, um die Verarbeitung an Ihre Seite anzuhängen, die ausgeführt werden soll, wenn Ihre Besucher auf etwas klicken? Wenn die Art und Weise, wie Sie dies tun, näher an den Beispielen oben auf der Seite liegt als an den Beispielen unten auf der Seite, ist dies möglicherweise der Fall Zeit, in der Sie darüber nachdachten, die Art und Weise, wie Sie Ihre Onclick-Verarbeitung schreiben, zu verbessern, um eine der besseren Methoden zu verwenden, die weiter unten im Internet vorgestellt werden Seite.

Wenn Sie sich den Code für den browserübergreifenden Ereignis-Listener ansehen, werden Sie feststellen, dass es einen vierten Parameter gibt, den wir aufgerufen haben uCderen Verwendung aus der vorherigen Beschreibung nicht ersichtlich ist.

Browser haben zwei verschiedene Reihenfolgen, in denen sie Ereignisse verarbeiten können, wenn das Ereignis ausgelöst wird. Sie können von außen nach innen arbeiten

• uC = true, um während der Erfassungsphase verarbeitet zu werden
• uC = false, um während der Blasenphase verarbeitet zu werden.

Wenn also mehrere andere Tags um das Tag gewickelt sind, das das Ereignis in der Erfassungsphase ausgelöst hat, wird zuerst mit dem äußersten Tag begonnen und eingezogen In Richtung desjenigen, der das Ereignis ausgelöst hat, und sobald das Tag, an das das Ereignis angehängt wurde, verarbeitet wurde, kehrt die Blasenphase den Prozess um und geht wieder aus nochmal.

Internet Explorer und herkömmliche Ereignishandler verarbeiten immer die Blasenphase und niemals die Erfassungsphase. Beginnen Sie daher immer mit dem spezifischsten Tag und arbeiten Sie nach außen.

Also mit Event-Handlern:

xx