Hilfreiche Ratschläge

Javascript-Ausgabe

Clientseitiger JavaScript-Code kann auf vier Arten in HTML-Dokumente eingebettet werden:

Inline-Skripte zwischen zwei Tags,

aus der externen Datei, die durch das src-Attribut des Tags angegeben wird:

In der XHTML-Auszeichnungssprache der Inhalt des Tags

Das folgende Beispiel zeigt den Inhalt einer HTML-Datei, die ein einfaches JavaScript-Programm enthält. Die Aktionen des Programms werden in den Kommentaren beschrieben. Ich stelle jedoch fest, dass der Hauptzweck dieses Beispiels darin besteht, zu demonstrieren, wie JavaScript-Code in HTML-Dateien eingebettet ist, zusammen mit allem anderen, in diesem Fall mit CSS-Stilen:

JavaScript-Anzeigeoptionen

JavaScript-Daten können auf verschiedene Arten angezeigt werden:

  • innerHTML - Schreiben Sie mithilfe von in ein HTML-Element.
  • document.write () - Mit diesem Befehl können Sie in ein HTML-Element schreiben.
  • window.alert () - mit, im Benachrichtigungsfenster aufzeichnen.
  • console.log () - Verwenden Sie, um in der Browserkonsole aufzuzeichnen.

Skripte in externen Dateien

Die JavaScript-Codedatei hat normalerweise die Erweiterung .js und enthält JavaScript-Code in einer „reinen Form“ ohne Tags. Beachten Sie, dass das schließende Tag auch dann erforderlich ist, wenn das Attribut src angegeben ist und sich zwischen den Tags kein JavaScript-Code befindet. In solchen Fällen können Sie das einzige Tag im XHTML-Markup verwenden, da es in JavaScript Text ohne Leerzeichen oder Kommentare gibt.

Die Verwendung eines Tags mit dem Attribut src bietet mehrere Vorteile:

HTML-Dateien sind da einfacher Sie können große Blöcke von JavaScript-Code entfernen, um Inhalte vom Verhalten zu trennen.

Eine JavaScript-Funktion oder ein anderer JavaScript-Code, der von mehreren HTML-Dateien verwendet wird, kann in einer Datei gespeichert und bei Bedarf gelesen werden. Dies reduziert den verwendeten Speicherplatz und erleichtert die Unterstützung von Programmcode erheblich Es ist nicht erforderlich, jede HTML-Datei zu bearbeiten, wenn Sie den Code ändern.

Wenn ein JavaScript-Skript von mehreren Seiten gleichzeitig verwendet wird, wird es vom Browser nur einmal geladen. Wenn es zum ersten Mal verwendet wird, rufen nachfolgende Seiten es aus dem Browser-Cache ab.

Das Attribut src nimmt eine beliebige URL als Wert an, sodass ein JavaScript-Programm oder eine Webseite von einem Webserver den Code (z. B. aus einer Subroutinenbibliothek) verwenden kann, der von anderen Webservern bereitgestellt wird. Viele Online-Werbetreibende nutzen diese Tatsache.

Durch das Herunterladen von Skripten von anderen Websites werden die Vorteile des Zwischenspeicherns weiter verbessert: Google empfiehlt die Verwendung von bekannten Standard-URLs für häufig verwendete Client-Bibliotheken, sodass Browser die einzige Kopie zwischenspeichern können, die von vielen Websites im Web gemeinsam genutzt wird. Das Verknüpfen von JavaScript-Skripten mit den Servern von Google kann die Startzeit von Webseiten erheblich verkürzen, da die Bibliothek möglicherweise bereits im Browser-Cache des Benutzers gespeichert ist. Sie müssen jedoch Programmcode von Drittanbietern vertrauen, der für Ihre Website kritisch sein kann. Weitere Informationen erhalten Sie unter code.google.com/apis/ajaxlibs/.

Das Herunterladen von Skripten von Servern anderer Anbieter als denjenigen, auf denen sich Dokumente befinden, die diese Skripten verwenden, hat wichtige Auswirkungen auf die Sicherheit. Generische Richtlinien verhindern, dass JavaScript in einem Dokument einer Domäne mit Inhalten einer anderen Domäne interagiert. Es ist jedoch zu beachten, dass es nicht auf die Quelle des Skripts an sich ankommt, sondern auf die Quelle des Dokuments, in das das Skript eingebettet ist.

Daher ist in diesem Fall eine Richtlinie gemeinsamen Ursprungs nicht anwendbar: JavaScript-Code kann mit Dokumenten interagieren, in die er eingebettet ist, auch wenn dieser Code aus einer anderen Quelle stammt als das Dokument selbst. Durch das Einfügen eines Skripts in Ihre Webseite mithilfe des src-Attributs geben Sie dem Skriptautor (oder dem Webmaster der Domäne, von der das Skript heruntergeladen wird) die volle Kontrolle über Ihre Webseite.

HTML-Ereignishandler

Javascript befindet sich in Tag

Mit JavaScript-Code können Ereignishandler registriert werden, indem Eigenschaften von Elementobjekten (z. B. onclick oder onmouseover), die HTML-Elemente in einem Dokument darstellen, Funktionen zugewiesen werden.

Event-Handler-Eigenschaften wie onclick spiegeln gleichnamige HTML-Attribute wider, sodass Sie Event-Handler definieren können, indem Sie JavaScript-Code in HTML-Attribute einfügen. Zum Beispiel:

Achten Sie auf das Attribut onClick. Der JavaScript-Code, der den Wert dieses Attributs darstellt, wird ausgeführt, wenn der Benutzer auf die Schaltfläche klickt.

In HTML-Markups enthaltene Attribute für Ereignishandler können eine oder mehrere durch Semikolons getrennte JavaScript-Anweisungen enthalten. Diese Anweisungen werden vom Interpreter in den Funktionskörper umgewandelt, der wiederum zum Wert der entsprechenden Eigenschaft des Ereignishandlers wird.

In der Regel enthalten die HTML-Attribute von Ereignishandlern jedoch einfache Zuweisungsanweisungen oder einfache Aufrufe von Funktionen, die an anderer Stelle deklariert wurden. Auf diese Weise können Sie den größten Teil des JavaScript-Codes in Skripten belassen und den Grad der gegenseitigen Durchdringung von JavaScript- und HTML-Code begrenzen. In der Praxis betrachten viele Webentwickler die Verwendung der HTML-Attribute von Ereignishandlern als einen schlechten Stil und ziehen es vor, Inhalte vom Verhalten zu trennen.

Javascript in der URL

Eine andere Möglichkeit zur Ausführung von clientseitigem JavaScript besteht darin, diesen Code in die URL einzufügen, die dem JavaScript-Pseudoprotokollspezifizierer folgt:. Dieser spezielle Protokolltyp bedeutet, dass der Hauptteil der URL ein beliebiger JavaScript-Code ist, der vom JavaScript-Interpreter ausgeführt werden muss. Es wird als einzelne Zeile interpretiert, daher sollten die Anweisungen durch Semikolon voneinander getrennt werden. Für Kommentare sollten Sie die Zeichenkombinationen / * * / und nicht // verwenden.

Die "Ressource", die durch die Javascript: URL identifiziert wird, ist der Wert, der von diesem in eine Zeichenfolge konvertierten Programmcode zurückgegeben wird. Wenn der Programmcode undefiniert zurückgibt, wird davon ausgegangen, dass die Ressource keinen Inhalt hat.

Einige Browser (z. B. Firefox) führen Programmcode in der URL aus und verwenden den Rückgabewert als Inhalt des neu angezeigten Dokuments. Genau wie beim Klicken auf den http: -Link löscht der Browser das aktuelle Dokument und zeigt den neuen Inhalt an. Der im obigen Beispiel zurückgegebene Wert enthält keine HTML-Tags. Wenn dies jedoch der Fall wäre, könnte der Browser diese wie jedes andere in den Browser geladene HTML-Dokument anzeigen.

In anderen Browsern (z. B. Chrome und Safari) können URLs wie im obigen Beispiel den Inhalt des Dokuments nicht überschreiben. Sie ignorieren lediglich den Rückgabewert. Sie unterstützen jedoch URLs des Formulars:

Wenn eine solche URL geladen wird, führt der Browser den JavaScript-Code aus, jedoch seitdem Es gibt keinen Rückgabewert (die alert () -Methode gibt undefiniert zurück). Browser wie Firefox überschreiben das aktuell angezeigte Dokument nicht. (In diesem Fall dient die javascript: URL demselben Zweck wie die Ereignisbehandlungsroutine für Onclicks. Der obige Link lässt sich besser als die Ereignisbehandlungsroutine für Onclicks des Elements ausdrücken. Das gesamte Element sollte nur für Hyperlinks verwendet werden, die neue Dokumente laden.)

Wenn Sie sicherstellen müssen, dass die JavaScript: -URL das Dokument nicht überschreibt, können Sie den Operator void verwenden, um die Rückgabe von undefined zu erzwingen:

Ohne den Operator void in dieser URL würde der von der Window.open () -Methode zurückgegebene Wert in eine Zeichenfolge konvertiert und (in einigen Browsern) das aktuelle Dokument mit einem neuen Dokument überschrieben.

Wie die HTML-Attribute von Ereignishandlern sind Javascript: URLs ein Relikt der frühen Webentwicklung und sollten nicht in modernen HTML-Seiten verwendet werden. Javascript-URLs: können einen nützlichen Service bieten, wenn sie außerhalb des Kontexts von HTML-Dokumenten verwendet werden. Wenn Sie die Funktion eines kleinen Teils des JavaScript-Codes testen müssen, können Sie die JavaScript-URL direkt in die Adressleiste des Browsers eingeben. Eine andere legale Verwendung von JavaScript-URLs besteht darin, Browser mit Lesezeichen zu versehen.

Sehen Sie sich das Video an: Tag3 - 1. Basiselemente von Programmiersprachen: Ein-Ausgabe (Januar 2020).