Vier Möglichkeiten zum Einbetten von JavaScript in HTML-Dokumente

In diesem Artikel werden hauptsächlich vier Methoden zum Einbetten von clientseitigem JavaScript-Code in HTML-Dokumente vorgestellt. Interessierte Freunde können wie folgt darauf verweisen:

JavaScript in HTML einbetten

Es gibt 4 Möglichkeiten, clientseitigen JavaScript-Code in HTML-Dokumente einzubetten:

1. Inline einbetten, zwischen 3f1c4e4b6b16bbbd69b2ee476dc4f83a platzieren (weniger );

2. Wird in einer externen Datei platziert, die durch das src-Attribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags angegeben wird Handler, der durch einen HTML-Attributwert wie onclick oder onmouseover (selten) angegeben wird;

4. Diese URL wird in einer URL platziert und verwendet das spezielle Protokoll „Javascript“ (selten); >

1 – angehängt: Skripttyp

JavaScript ist standardmäßig die ursprüngliche Skriptsprache des Webs. Unten enthält das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element JavaScript-Code oder verweist darauf . Wenn Sie eine nicht standardmäßige Skriptsprache wie VBScript verwenden möchten, müssen Sie das Typattribut verwenden, um den MIME-Typ des Skripts anzugeben, zum Beispiel:

<script type="text/vbscript"> 
 ... ... 
</script>

Der Standardwert des Typs Das Attribut ist „text/javascript“.

2 – Inline-3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element

Zum Beispiel:

 <script> 
 function displayTime(){ 
 ... ... 
 } 
 window.onload = displayTime; 
</script>

3 – Externes src-Attribut verwenden Das Skript

3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag in der Datei unterstützt das src-Attribut, das die URL der Datei angibt, die JavaScript-Code enthält. Es wird wie folgt verwendet:

<script src="../../scripts/util.js"></script>

Bei Verwendung des src-Attributs wird alles zwischen den Tags 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 ignoriert.

Wenn Sie ein Skript mithilfe des src-Attributs in eine Seite einbinden, geben Sie dem Skript die volle Kontrolle über die Webseite.

4 – Event-Handler in HTML

Wenn die HTML-Datei, in der sich das Skript befindet, in den Browser geladen wird, wird der JavaScript-Code in diesem Skript nur einmal ausgeführt . JavaScript-Code kann Ereignishandler registrieren, indem er Funktionen den Eigenschaften des Elementobjekts zuweist. Dieses Elementobjekt stellt ein HTML-Element im Dokument dar. Zum Beispiel:

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

Die in HTML definierten Attribute des Event-Handlers können beliebige, durch Kommas getrennte JavaScript-Anweisungen enthalten. Diese Anweisungen bilden den Hauptteil einer Funktion, der dann zum Wert der entsprechenden Event-Handler-Eigenschaft wird.

4 – JavaScript in der URL

gefolgt von einem Javascript:-Protokollqualifikationsmerkmal in der URL ist eine weitere Möglichkeit, JavaScript-Code in den Client einzubetten. Dieser spezielle Protokolltyp gibt an, dass der URL-Inhalt eine beliebige Zeichenfolge ist, bei der es sich um JavaScript-Code handelt, der vom JavaScript-Interpreter ausgeführt wird. Es wird als separate Codezeile behandelt, was bedeutet, dass Anweisungen durch Semikolons getrennt werden müssen und Kommentare durch /**/-Kommentare ersetzt werden müssen. Die von javascript:URL erkannte Ressource ist der in einen String umgewandelte Rückgabewert des ausgeführten Codes. Wenn der Code undefiniert zurückgibt, hat die Ressource keinen Inhalt.

Javascript: URL kann überall dort verwendet werden, wo eine reguläre URL verwendet werden kann: z. B. das href-Attribut des 3499910bf9dac5ae3c52d5ede7383485-Tags, das Aktionsattribut von ff9c23ada1bcecdd1a0fb5d5a0f18437 oder sogar die Parameter von die Methode window.open().

Die JavaScript-URL im Hyperlink kann wie folgt aussehen:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial

!

Das obige ist der detaillierte Inhalt vonVier Möglichkeiten zum Einbetten von JavaScript in HTML-Dokumente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!