Introduction détaillée à JavaScript : trois méthodes d'introduction-js tutoriel-php.cn

Introduction détaillée à JavaScript : trois méthodes d'introduction

WBOY

Libérer： 2022-08-03 16:39:23

original

3200 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur javascript. Il présente en détail les trois méthodes d'introduction de javaScript : le style en ligne, le style intégré, le style externe et comment l'utiliser. Examinons-le ensemble, j'espère que cela vous sera utile. à tout le monde.

Introduction détaillée à JavaScript : trois méthodes d'introduction

[Recommandations associées : Tutoriel vidéo Javascript, front-end Web]

1 Méthode d'introduction en ligne

Écrit en ligne, défini séparément dans chaque balise

Par le biais de l'événement dans la balise ouverte. L'attribut fait référence à la fonction de js

(1) écrite dans l'attribut event de la balise (attribut commençant par on), comme onclick [on+event type]

Recommandation : utilisez des guillemets doubles pour le html et des guillemets simples pour js

Exemple :

<input>

Copier après la connexion

Remarque : Introduction en ligne, il n'y a pas de concept d'augmentation de poids dans JS, il n'est donc pas couramment utilisé [Basiquement non utilisé]

L'exemple est le suivant :

<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="Introduction détaillée à JavaScript : trois méthodes d'introduction" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

Copier après la connexion

Résultat de sortie :

Introduction détaillée à JavaScript : trois méthodes dintroduction

2. Méthode d'introduction en ligne (introduction interne)

Écrit dans la balise de script

Référence interne : En écrivant du code js dans la balise de script en utilisant

la balise de script peut être écrit n'importe où sur la page
balise de script Généralement utilisée à la fin du corps, ou après le corps

(1) peut être écrite n'importe où. Les en-têtes peuvent affecter le rendu du navigateur.

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

Copier après la connexion

Remarque : Généralement utilisé lors de l'écriture d'exercices par vous-même, lorsque vous voulez être paresseux et que vous ne voulez pas configurer de fichiers js [

Utilisation pratique]Habituellement, lorsque vous réalisez des projets par vous-même, mettez-le en bottom, qui n'affecte pas l'ordre de chargement et peut être combiné avec des fichiers CSS. Pour distinguer, cela n'affectera pas le rendu du navigateur s'il est placé ailleurs, il est préférable d'utiliser onload pour le terminer. L'exemple est le suivant :

<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="Introduction détaillée à JavaScript : trois méthodes d'introduction" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

Copier après la connexion

Résultat de sortie :

3. Méthode d'introduction externeUtilisez src dans la balise de script pour introduire des fichiers externes

Étapes :

Écrivez un indépendant js fichier

(2) Utilisez la structure de code de la page HTML pour séparer plusieurs morceaux de code JS en dehors du Page HTML, belle et pratique pour la réutilisation de fichiers
```
<script src="main.js"></script>
```
Copier après la connexion

Fréquemment utilisé

]

Utilisez src au lieu de hrefL'exemple est le suivant :

Écrivez le code js dans le fichier .js et référencez-le en HTML Le contenu du fichier .html est le suivant :

<html>
  <title>js样式外联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <div class="img">
    外联写法--单击事件：
      <img  src="images/003.jpg" id=&#39;yuansu&#39; alt="Introduction détaillée à JavaScript : trois méthodes d'introduction" ></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

Copier après la connexion

Le contenu du fichier .js est le suivant :

//js代码

//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById(&#39;yuansu&#39;);    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

Copier après la connexion

Résultat de sortie :

[Recommandations associées :

tutoriel vidéo javascript

front-end web Introduction détaillée à JavaScript : trois méthodes dintroduction ]