Maison >interface Web >js tutoriel >Introduction détaillée à JavaScript : trois méthodes d'introduction

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

WBOYoriginal: 2022-08-03 16:39:233202parcourir

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.

[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>

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>

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>

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>

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></script>
```

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>

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);
}

Résultat de sortie :

[Recommandations associées :

tutoriel vidéo javascript

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS 事件 href

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre brièvement l'origine et le développement de JavaScriptArticle suivant：Comprendre brièvement l'origine et le développement de JavaScript

Articles Liés

Voir plus