Zusammenfassung der Methoden zum Einbetten von JS in HTML-Dokumente

Dieses Mal bringe ich Ihnen eine Zusammenfassung der Methoden zum Einbetten von JS in HTML-Dokumente und welche Vorsichtsmaßnahmen für das Einbetten von JS in HTML-Dokumente gelten. Hier sind praktische Fälle Schauen Sie mal rein.

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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt;   ... ...  &lt;/script&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <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"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;script&gt;   function displayTime(){   ... ...   }   window.onload = displayTime;  &lt;/script&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div></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:

Wie man Vue verwendet, um Baumansichtsdaten zu implementieren

So verwenden Sie die V-Distpicker-Komponente

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zum Einbetten von JS in HTML-Dokumente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!