Welche Methoden können zum Einbetten von js in HTML-Dokumente verwendet werden?

Dieses Mal werde ich Ihnen einige Methoden zum Einbetten von JS in HTML-Dokumente vorstellen und welche Vorsichtsmaßnahmen für das Einbetten von JS in HTML-Dokumente gelten einmal schauen.

JavaScript in HTML einbetten

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

1 .Inline, platziert zwischen den Tags <script> (weniger); Platziert in einer externen Datei, die durch das src-Tag (more) angegeben wird; </p> <p style="text-align: left;">3. Platzieren Sie es im </p>HTML-Ereignishandler<p style="text-align: left;">, der durch einen HTML-Attributwert wie onclick oder <a href="http://www.php.cn/code/8922.html" target="_blank">onmouseover</a> (selten) angegeben wird;<a href="http://www.php.cn/wiki/1457.html" target="_blank"></a>4. Platzieren Sie es in einer URL. Diese URL verwendet das spezielle Protokoll „Javascript“ (selten); Ursprüngliche Skriptsprache des Webs. Standardmäßig enthält das Element <script> 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: </p> <pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt;   ... ...  &lt;/script&gt;</pre> <p style="text-align: left;"></p>Der Standardwert des Typs Das Attribut ist „text/javascript“. <p style="text-align: left;"><span style="color: #0000ff"></span></p>1 – Inline-<script>-Element <p style="text-align: left;"></p> <p style="text-align: left;"> Zum Beispiel: <span style="color: #ff0000"><pre class="brush:php;toolbar:false"> &lt;script&gt;   function displayTime(){   ... ...   }   window.onload = displayTime;  &lt;/script&gt;</pre></span></p>2 – Externes src-Attribut verwenden Das Skript <p style="text-align: left;"><span style="color: #0000ff"></span><script>-Tag in der Datei unterstützt das src-Attribut, das die URL der Datei angibt, die JavaScript-Code enthält. Seine Verwendung ist wie folgt: </p> <p style="text-align: left;"></p>Code kopieren<p style="text-align: left;"> Der Code lautet wie folgt:<span style="color: #0000ff"></span><script src="../../scripts/util.js" >< /script></p> <p style="text-align: left;">Bei Verwendung des src-Attributs wird alles zwischen den <script></script>-Tags ignoriert.

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

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

Code kopieren Der Code lautet wie folgt:

Die in HTML definierten Attribute des Event-Handlers können beliebige JavaScript-Anweisungen, durch Kommas getrennt, 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 durch javascript:URL identifizierbare 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 stehen, wo eine reguläre URL verwendet werden kann: etwa das href-Attribut des -Tags, das action-Attribut von

oder sogar

window .open ()-Methodenparameter.

Die JavaScript-URL im Hyperlink kann wie folgt aussehen:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von Promise in ES6

So verwenden Sie React Form, um die Komponentenverpackung abzuschließen

Das obige ist der detaillierte Inhalt vonWelche Methoden können zum Einbetten von js in HTML-Dokumente verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!