suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Kombination von JavaScript- und HTML_Javascript-Kenntnissen

Ausführliche Erläuterung der Kombination von JavaScript- und HTML_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:30:291399Durchsuche

JavaScript-Skripte in HTML müssen je nach Tag zwischen den Tags 3f1c4e4b6b16bbbd69b2ee476dc4f83a platziert werden Situation. Es kommt darauf an, normalerweise im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag platziert.
1. 3f1c4e4b6b16bbbd69b2ee476dc4f83a Wenn Sie das JavaScript-Skript auf der HTML-Seite einfügen müssen, verwenden Sie das Label & lt; script & gt; 3f1c4e4b6b16bbbd69b2ee476dc4f83a und 2cacc6d41bbb37262a98f745aa00fbf0 teilen JavaScript mit, wo es anfangen soll und Ende. Die Zeile zwischen 3f1c4e4b6b16bbbd69b2ee476dc4f83a und 2cacc6d41bbb37262a98f745aa00fbf0 enthält JavaScript: 


<span style="font-size:18px;"><script type="text/javascript"> 
alert("欢迎来到JavaScript世界！！！"); 
</script></span>
Sie müssen den obigen Code nicht verstehen. Verstehen Sie einfach, dass Browser das JavaScript zwischen 3f1c4e4b6b16bbbd69b2ee476dc4f83a interpretieren und ausführen. Diese alten
Ältere Instanzen verwenden möglicherweise type="text/javascript" im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag. Dies ist nicht mehr notwendig. JavaScript ist in allen modernen Browsern vorhanden

Und die Standard-Skriptsprache in HTML5. Für diejenigen, die gerade die JavaScript-Sprache gelernt haben, können Sie sie verwenden!

2. JavaScript in 6c04bd5ca3fcae76e30b72ad730ca86d
In diesem Beispiel schreibt JavaScript Text in den HTML-Bereich 6c04bd5ca3fcae76e30b72ad730ca86d, wenn die Seite geladen wird: Beispielcode: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
> 
</head> 
 
<body> 
<p> 
JavaScript 能够直接写入 HTML 输出流中： 
</p> 
  
<script type="text/javascript"> 
document.write("<h1>This is a heading</h1>"); 
document.write("<p>This is a paragraph.</p>"); 
</script> 
  
<p> 
您只能在 HTML 输出流中使用 <strong>document.write</strong>。 
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 
</p> 
</body> 
</html>
Es ist uns egal, wie der JavaScript-Code geschrieben und ausgeführt wird. Schauen wir uns zunächst die Ergebnisse an:

3. JavaScript-Funktionen und Ereignisse

Die JavaScript-Anweisung im obigen Beispiel wird ausgeführt, wenn die Seite geladen wird. Normalerweise müssen wir Code ausführen, wenn ein Ereignis eintritt, beispielsweise wenn der Benutzer Wenn auf die Schaltfläche geklickt wird. Wenn wir den JavaScript-Code in eine Funktion einfügen, können wir diese Funktion aufrufen, wenn ein Ereignis eintritt.

4. JavaScript in 93f0f5c25f18dab9d176bd4f6de5d30e

Sie können eine unbegrenzte Anzahl von Skripten in Ihr HTML-Dokument einfügen. Skripte können in den Abschnitten 6c04bd5ca3fcae76e30b72ad730ca86d oder 93f0f5c25f18dab9d176bd4f6de5d30e enthalten sein in zwei Teilen. Eine gängige Vorgehensweise besteht darin, Funktionen im Abschnitt 53495576791aca4fd1a7d5b144a1d127 einzufügen. Auf diese Weise können sie am selben Ort platziert werden, Beeinträchtigt den Inhalt der Seite nicht.



5. JavaScript-Funktionen in 93f0f5c25f18dab9d176bd4f6de5d30e

In diesem Beispiel platzieren wir eine JavaScript-Funktion im Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e Diese Funktion wird aufgerufen, wenn auf die Schaltfläche geklickt wird: Beispielcode:


Das Ergebnis des Laufens ist: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
</body> 
</html>

Der Effekt nach dem Klicken auf die Schaltfläche ist:

6. JavaScript-Funktion in 6c04bd5ca3fcae76e30b72ad730ca86d

In diesem Beispiel platzieren wir eine JavaScript-Funktion im Abschnitt 6c04bd5ca3fcae76e30b72ad730ca86d Diese Funktion wird aufgerufen, wenn auf die Schaltfläche geklickt wird: Beispielcode:


Das Ergebnis des Laufens ist das gleiche wie das Ergebnis der oben genannten fünf! 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title>  
</head> 
 
<body> 
<h1>My First Web Page</h1> 
  
<p id="demo">A Paragraph.</p> 
  
<button type="button" onclick="myFunction()">点击这里</button> 
 
 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</body> 
</html>
​​  

Tipp:
Wir fügen das JavaScript am Ende des Seitencodes ein, damit wir sicherstellen können, dass das Skript ausgeführt wird, nachdem das e388a4556c0f65e1904146cc1a846bee-Element erstellt wurde. 7. Externes JavaScript
Wir können das Skript auch in einer externen Datei speichern. Externe Dateien enthalten häufig Code, der von mehreren Webseiten verwendet wird. Dateierweiterung für externe JavaScript-Dateien Der Ausstellungsname ist .js. Wenn Sie eine externe Datei verwenden müssen, legen Sie bitte die .js-Datei im „src“-Attribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a fest. Wenn viel JavaScript-Code vorhanden ist, Wir befürworten die Verwendung externer JavaScript-Methoden und verwenden im Allgemeinen auch eine separate Methode, um eine Verbindung zu HTML-Dokumenten herzustellen.
Beispiel
HTML-Code:



myScript.js-Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript" src="/js/myScript.js"></script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
 
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> 
</body> 
</html>


Das Laufergebnis stimmt mit dem oben Gesagten überein!
                                                                                                                                                                                                                                                                                          Der tatsächliche Ausführungseffekt ist genau derselbe wie beim Schreiben des Skripts im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag. Externe Skripte dürfen keine 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags enthalten. Das Obige ist die Methode zur Kombination von JavaScript und HTML. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.

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：Einfache Beispieldemonstration der JQuery-Implementierung des Formulars validation_jqueryNächster Artikel：Einfache Beispieldemonstration der JQuery-Implementierung des Formulars validation_jquery

In Verbindung stehende Artikel

Mehr sehen