Heim >Web-Frontend >Front-End-Fragen und Antworten >So importieren Sie JavaScript in HTML

So importieren Sie JavaScript in HTML

青灯夜游Original: 2021-10-14 13:54:4813549Durchsuche

Es gibt zwei Möglichkeiten, JavaScript in HTML zu importieren: 1. Verwenden Sie die Anweisung „<script>js code</script>“, um JavaScript-Code in die HTML-Seite einzubetten. 2. Führen Sie in HTML externes JavaScript über das src-Attribut ein der Skript-Tag-Skriptdatei.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So importieren Sie JavaScript in HTML-Dokumente

1. Das Einbetten von JavaScript-Skripten in HTML-Seiten erfordert die Verwendung des <script>-Tags ; Schreiben Sie JavaScript-Code direkt in das Tag. Die spezifischen Schritte sind wie folgt. </script>

Schritt 1: Erstellen Sie ein neues HTML-Dokument und speichern Sie es als test.html.

Schritt 2: Fügen Sie ein <script>-Tag in das <head>-Tag ein. <p>Schritt 3: Legen Sie das Attribut type="text/javascript" für das Tag <script> fest. <p>Der Standardskripttyp des <script>-Tags in modernen Browsern ist JavaScript, daher kann das Typattribut weggelassen werden, wenn die Kompatibilität mit früheren Browserversionen berücksichtigt wird. <p>Schritt 4, geben Sie den JavaScript-Code in das <script>-Tag ein<p><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script type="text/javascript"> document.write("<h1>PHP中文网：https://www.php.cn/</h1>"); </script> </head> <body></body> </html></pre>Schritt 5, speichern Sie das Webdokument und zeigen Sie es in der Vorschau im Browser an. Der Anzeigeeffekt ist wie im Bild dargestellt. In JavaScript-Skripten stellt document ein Webseiten-Dokumentobjekt dar; document.write() stellt den Aufruf der write()-Methode des Document-Objekts dar, um die HTML-Zeichenfolge „<p>“ in den aktuellen Webseiten-Quellcode zu schreiben. <p><code><h1>PHP中文网：https://www.php.cn/<p><img src="https://img.php.cn/upload/image/130/704/652/1634190316525013.png" title="1634190316525013.png" alt="So importieren Sie JavaScript in HTML"/>2. Externe JavaScript-Code-Skriptdateien in HTML-Dokumente einbinden<p><strong>JavaScript-Programme können nicht nur direkt in HTML-Dokumenten, sondern auch in JavaScript-Skriptdateien platziert werden. JavaScript-Skriptdateien sind Textdateien mit der Erweiterung .js, die mit jedem Texteditor bearbeitet werden können. Zu den häufig verwendeten Texteditoren gehören Notepad in Windows-Systemen, Vim, Sublime Text, Notepad++ in Linux-Systemen usw. Für Anfänger wird empfohlen, zunächst einen Texteditor zu verwenden, um JavaScript-Code zu schreiben. Dies hilft uns, uns an die JavaScript-Syntax, Schlüsselwörter, Funktionen usw. zu erinnern. Wenn es um die eigentliche Entwicklungsphase geht, können Sie einige professionellere Code-Editoren auswählen, z. B. Visual Studio Code (als „VS Code“ bezeichnet), WebStorm (kostenpflichtig), Atom usw., die die Entwicklungseffizienz verbessern können. <p>Die Schritte zum Erstellen einer neuen JavaScript-Datei sind wie folgt. <p>Schritt 1: Erstellen Sie eine neue Textdatei und speichern Sie sie als test.js. Beachten Sie, dass die Erweiterung .js ist, was darauf hinweist, dass es sich bei der Textdatei um eine Datei vom Typ JavaScript handelt. <p>Schritt 2: Öffnen Sie die Datei test.js und schreiben Sie den folgenden JavaScript-Code hinein. <p><pre class="brush:js;toolbar:false;">alert("PHP中文网：https://www.php.cn/");</pre>Schritt 3: Speichern Sie die JavaScript-Datei. Es wird empfohlen, JavaScript-Dateien und Webseitendateien im selben Verzeichnis abzulegen. Im obigen Code stellt „alert()“ die Methode des Window-Objekts dar. Beim Aufruf dieser Methode wird ein Eingabeaufforderungsdialogfeld mit der Parameterzeichenfolge „Hallo, JavaScript!“ angezeigt. <p>JavaScript-Dateien können nicht unabhängig ausgeführt werden und müssen in die Webseite importiert und über den Browser ausgeführt werden. JavaScript-Dateien können mit dem <script>-Tag importiert werden. <p>Schritt 4: Erstellen Sie ein neues HTML-Dokument und speichern Sie es als test.html. <p>Schritt 5: Fügen Sie ein <script>-Tag in das <head>-Tag ein. Definieren Sie das src-Attribut und legen Sie den Attributwert auf eine URL-Zeichenfolge fest, die auf eine externe JavaScript-Datei verweist. Der Code lautet wie folgt: <p><pre class="brush:html;toolbar:false"><script type="text/javascript" src="test.js"></script></pre>Schritt 6: Speichern Sie das Webdokument und zeigen Sie es in der Vorschau im Browser an. Der Anzeigeeffekt ist wie in der Abbildung dargestellt. Hinweis: Wenn Sie das <script>-Tag verwenden, um externe JavaScript-Dateien einzuschließen, ist der Standarddateityp Javascript. Unabhängig davon, ob die geladene Datei die Erweiterung .js hat oder nicht, analysiert der Browser sie daher als JavaScript-Skript. <p><p><p>Das <script>-Tag, das das src-Attribut definiert, sollte keinen JavaScript-Code mehr enthalten. Wenn der Code eingebettet ist, wird nur die externe JavaScript-Datei heruntergeladen und ausgeführt und der eingebettete Code wird ignoriert. <img src="https://img.php.cn/upload/image/123/185/283/1634190484108956.png" title="1634190484108956.png" alt="So importieren Sie JavaScript in HTML"/>【Empfohlenes Lernen: <p>Javascript-Tutorial für Fortgeschrittene】<p></script>

Das obige ist der detaillierte Inhalt vonSo importieren Sie JavaScript in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript html 字符串 JS 对象 alert windows visual studio vim visual studio code sublime text webstorm https linux atom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So deaktivieren Sie Javascript in EdgeNächster Artikel：So deaktivieren Sie Javascript in Edge

In Verbindung stehende Artikel

Mehr sehen