Heim > Web-Frontend > js-Tutorial > Beispiel für das Einfügen von JavaScript-Code in HTML_Basics

Beispiel für das Einfügen von JavaScript-Code in HTML_Basics

WBOY
Freigeben: 2016-05-16 15:56:56
Original
1109 Leute haben es durchsucht

JavaScript-Code kann überall in einem HTML-Dokument eingefügt werden. Es gibt jedoch die folgenden besten Möglichkeiten, JavaScript in HTML-Dateien einzubinden.

  • Im Abschnitt ...
  • Im Abschnitt ...
  • In den Abschnitten ... und ...
  • Skripte und externe Dateien werden dann im Abschnitt ... eingebunden.
  • In den folgenden Abschnitten werden wir sehen, wie JavaScript unterschiedlich eingebunden werden kann:
  • Im Abschnitt ... von JavaScript:

Wenn Sie ein Skript bei einem Ereignis ausführen möchten, wenn der Benutzer beispielsweise irgendwo klickt, sollte der Kopf des Skripts so aussehen:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Nach dem Login kopieren
Dies führt zu folgenden Ergebnissen:

JavaScript im Abschnitt ... :

Wenn zum Laden der Seite ein Skript erforderlich ist, damit das Skript Seiteninhalte zur Ausführung generiert, platzieren Sie das Skript im Abschnitt In diesem Fall ist es nicht notwendig, alle von JavaScript definierten Funktionen zu nutzen:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

Nach dem Login kopieren
JavaScript in den Abschnitten
Sie können JavaScript-Code genau wie folgt in die Abschnitte einfügen:


In der externen JavaScript-Datei:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Nach dem Login kopieren
Wenn Sie intensiver mit JavaScript arbeiten, werden Sie möglicherweise feststellen, dass es Situationen gibt, in denen Sie denselben JavaScript-Code auf mehreren Seiten Ihrer Website wiederverwenden.


Sie sind nicht darauf beschränkt, denselben Code in mehreren HTML-Dateien beizubehalten. Das Skript-Tag bietet einen Mechanismus, der es ermöglicht, JavaScript in einer externen Datei zu speichern und dann in eine HTML-Datei einzubinden.

Hier ist ein Beispiel, um zu veranschaulichen, wie Skript-Tags und das src-Attribut verwendet werden, um eine externe JavaScript-Datei in HTML-Code einzubinden:

Um JavaScript aus einer externen Dateiquelle zu verwenden, müssen Sie den gesamten JavaScript-Code mit einer Erweiterung in eine einfache Textdatei „.js“ schreiben und die Datei dann wie oben gezeigt einbinden.
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

Nach dem Login kopieren
Zum Beispiel können Sie den Inhalt von filename.js in der folgenden Datei behalten und dann die Funktion sayHello in der HTML-Datei verwenden, nachdem Sie die Datei filename.js eingefügt haben:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage