Detaillierte Einführung in JavaScript: drei Einführungsmethoden-js-Tutorial-php.cn

Detaillierte Einführung in JavaScript: drei Einführungsmethoden

WBOY

Freigeben： 2022-08-03 16:39:23

Original

3143 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript. Er stellt die drei Einführungsmethoden von JavaScript im Detail vor: Inline, eingebetteter Stil, externer Stil und wie man es verwendet. Ich hoffe, es wird hilfreich sein an alle.

Detaillierte Einführung in JavaScript: drei Einführungsmethoden

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

1. Inline-Einführungsmethode

Inline schreiben, in jedem Tag separat festlegen

Durch die Veranstaltung im offenen Tag Das Attribut bezieht sich auf die Funktion von js

(1), die im Ereignisattribut des Tags geschrieben ist (Attribut beginnt mit on), z. B. onclick [on+event type]

Empfehlung: Verwenden Sie doppelte Anführungszeichen für HTML und einfache Anführungszeichen für js

<input>

Nach dem Login kopieren

Ausgabeergebnis:

2. Inline-Einführungsmethode (interne Einführung)

Im Skript-Tag geschriebenInterne Referenz: Durch Schreiben von js-Code in das Skript-Tag mit

Skript-Tag kann kann an einer beliebigen Stelle auf der Seite geschrieben werden.

Detaillierte Einführung in JavaScript: drei Einführungsmethoden

script-Tag Wird normalerweise am Ende des Textkörpers oder nach dem Textkörper verwendet.

(1) kann an beliebiger Stelle geschrieben werden.

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法01开始-->
    <!--当鼠标点击图片时跳出弹窗显示1223-->
    <div class="img">
    单击事件：
      <img  src="images/001.jpg" onclick="alert(1223)" alt="Detaillierte Einführung in JavaScript: drei Einführungsmethoden" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

Nach dem Login kopieren

Hinweis: Wird im Allgemeinen verwendet, wenn Sie Übungen selbst schreiben, wenn Sie faul sein und keine JS-Dateien einrichten möchten unten, was keinen Einfluss auf die Ladereihenfolge hat und mit CSS-Dateien kombiniert werden kann. Zur Unterscheidung hat es keinen Einfluss auf das Browser-Rendering. Wenn es an anderer Stelle platziert wird, ist es am besten, es mit onload abzuschließen. Das Beispiel lautet wie folgt:

<script>
    alert(&#39;Hello World!&#39;);
</script>

Nach dem Login kopieren

Ausgabeergebnis:

3. Externe Einführungsmethode

Verwenden Sie src im Skript-Tag, um externe Dateien einzuführen eine unabhängige js-Datei

Referenzieren Sie es über das Skript-Tag auf der Seite HTML-Seite, die schön und praktisch für die Wiederverwendung von Dateien ist Verwenden Sie src anstelle von href

Das Beispiel sieht wie folgt aus:

Schreiben Sie den js-Code in die .js-Datei und referenzieren Sie ihn in HTML. Der Inhalt der .html-Datei lautet wie folgt:

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法02开始-->
  <div class="img">
    单击事件：
      <img  src="images/002.jpg" id=&#39;yuansu&#39; alt="Detaillierte Einführung in JavaScript: drei Einführungsmethoden" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

Nach dem Login kopieren

Der Inhalt der .js-Datei lautet wie folgt:

<script src="main.js"></script>

Nach dem Login kopieren

Ausgabeergebnis:
[Verwandte Empfehlungen:
Javascript-Video-Tutorial
,
Web-Frontend
]
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in JavaScript: drei Einführungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!