recherche

Maison  >  Article  >  interface Web  >  Comment utiliser le code javascript en HTML

Comment utiliser le code javascript en HTML

PHPz
PHPzoriginal
2023-04-24 10:53:382304parcourir

HTML est le langage de base pour la conception Web. L'utilisation de JavaScript dans les pages Web peut améliorer son interactivité, sa dynamique et son côté pratique. Cet article fournira une introduction approfondie à la façon dont HTML utilise le code JavaScript.

1. Introduction du code JavaScript

L'utilisation du code JavaScript dans les pages HTML nécessite une balise de script moyenne. Généralement, les balises de script sont situées dans la partie en-tête ou corps du fichier HTML. Voici un exemple simple : 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript">
          //JavaScript代码在这里
      </script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

Dans le code ci-dessus, nous utilisons la balise script pour introduire du code JavaScript dans la balise head et y écrire du code JavaScript. Dans le développement réel, nous pouvons écrire du code JavaScript dans un fichier .js séparé, puis l'introduire via des balises de script. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript" src="myscript.js"></script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

Dans le code ci-dessus, nous avons introduit un fichier nommé myscript.js via l'attribut src, qui contient du code JavaScript.

2. L'emplacement du code JavaScript

Le code JavaScript peut être placé dans diverses parties du fichier HTML, telles que l'en-tête, le corps et diverses balises de la page HTML. Placer du code JavaScript à différents emplacements affectera le temps d'exécution et la portée d'exécution du code.

  1. Placé dans la balise head

Le code JavaScript placé dans la balise head est généralement utilisé pour initialiser des variables globales, définir des objets et des fonctions. Étant donné que le code dans la balise head sera exécuté immédiatement après le chargement de la page, certaines fonctions de prétraitement peuvent être fournies pour la page avant son rendu. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript">
         var myVar = "Hello, World!";
         
         function myFunction() {
            alert(myVar);
         }
      </script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

Dans le code ci-dessus, nous avons défini une variable nommée myVar et une fonction nommée myFunction. Ces codes seront exécutés immédiatement après le chargement de la page et peuvent fournir certaines fonctions de prétraitement de la page avant le rendu.

  1. Placé dans la balise body

Le code JavaScript placé dans la balise body est généralement utilisé pour gérer l'interaction avec la page et la gestion des événements. Étant donné que le code de la balise body sera exécuté après le chargement de la page, il peut fournir plus d'interactivité et de dynamique à la page une fois la page rendue. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <button onclick="myFunction()">点击这里</button>
      <script type="text/javascript">
          function myFunction() {
            alert("你点击了这个按钮！");
         }
      </script>
   </body>
</html>

Dans le code ci-dessus, nous définissons un bouton et une fonction JavaScript nommée myFunction dans la balise body. Lorsque l'utilisateur clique sur le bouton, la fonction myFunction sera déclenchée et une boîte de dialogue apparaîtra.

  1. Placé dans diverses balises

Le code JavaScript placé dans diverses balises HTML est généralement utilisé pour mettre à jour dynamiquement le contenu et les styles en fonction de l'interaction de l'utilisateur. Par exemple, nous pouvons écrire du code JavaScript directement dans l'attribut onclick ou onmouseover d'une certaine balise, de sorte que lorsque l'utilisateur interagit avec la balise, le contenu ou le style de la page soit modifié. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <style>
         .myDiv {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h1>我的网页</h1>
      <div class="myDiv" onmouseover="this.style.backgroundColor=&#39;red&#39;"
         onmouseout="this.style.backgroundColor=&#39;yellow&#39;">
         <p>这个div会改变颜色！</p>
      </div>
   </body>
</html>

Dans le code ci-dessus, nous définissons une balise div nommée myDiv et ajoutons du code JavaScript à ses attributs onmouseover et onmouseout. Lorsque l'utilisateur déplace la souris sur myDiv, la couleur d'arrière-plan du div passe au rouge ; lorsque l'utilisateur éloigne la souris, la couleur d'arrière-plan du div redevient jaune.

3. Utilisation du code JavaScript

Lorsque vous utilisez du code JavaScript dans des pages HTML, vous devez prendre en compte les aspects suivants :

  1. Variables et types de données

En JavaScript, les variables peuvent stocker des données et les noms de variables sont de taille. sensible Écrit. JavaScript prend en charge une variété de types de données, notamment des nombres, des chaînes, des valeurs booléennes, des tableaux, des objets, etc. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <script type="text/javascript">
         var myNum = 123;
         var myStr = "Hello, World!";
         var myBool = true;
         var myArr = [1,2,3,4,5];
         var myObj = {name:"John", age:30, city:"New York"};

         document.write(myNum); // 输出 123
         document.write("<br>");
         document.write(myStr); // 输出 Hello, World!
         document.write("<br>");
         document.write(myBool); // 输出 true
         document.write("<br>");
         document.write(myArr[0]); // 输出 1
         document.write("<br>");
         document.write(myObj.name); // 输出 John
         document.write("<br>");
      </script>
   </body>
</html>

Dans le code ci-dessus, nous définissons 5 variables différentes et utilisons la fonction document.write() pour afficher leurs valeurs sur la page. Nous avons également montré comment accéder aux éléments des tableaux et des objets.

  1. Fonctions et événements

Une fonction en JavaScript est un morceau de code réutilisable qui peut être appelé et exécuté via le nom de la fonction. Les fonctions peuvent recevoir des paramètres et avoir des valeurs de retour. Dans les pages HTML, les fonctions sont généralement utilisées pour gérer les événements utilisateur, valider les entrées, etc. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <button onclick="myFunction()">点击这里</button>
      <p id="demo"></p>
      <script type="text/javascript">
          function myFunction() {
            document.getElementById("demo").innerHTML = "你点击了这个按钮！";
         }
      </script>
   </body>
</html>

Dans le code ci-dessus, nous définissons une fonction nommée myFunction et la lions à l'événement onclick d'un bouton. Lorsque l'utilisateur clique sur le bouton, la fonction myFunction modifiera l'attribut innerHTML de la balise p et définira le contenu du texte sur "Vous avez cliqué sur ce bouton !"

  1. Opérations DOM

DOM (Document Object Model) est l'interface de programmation. pour les documents HTML, il permet au code JavaScript d'accéder à n'importe quel élément du document et de modifier son contenu, ses attributs, ses styles, etc. Dans les pages HTML, les opérations DOM sont généralement utilisées pour modifier dynamiquement le contenu et le style de la page. 

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <style>
         .myDiv {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h1>我的网页</h1>
      <div id="myDiv">
         <p>这里是一个div。</p>
      </div>
      <button onclick="myFunction()">点击这里</button>
      <script type="text/javascript">
          function myFunction() {
            var myDiv = document.getElementById("myDiv");
            myDiv.style.backgroundColor = "red";
         }
      </script>
   </body>
</html>

Dans le code ci-dessus, nous définissons une balise div nommée myDiv et une fonction nommée myFunction. Lorsque l'utilisateur clique sur le bouton, la fonction myFunction modifiera la couleur d'arrière-plan de l'étiquette myDiv via des opérations DOM.

4. Résumé

L'utilisation de code JavaScript dans les pages HTML peut améliorer l'interactivité, la dynamique et le côté pratique de la page. Cet article explique comment utiliser les balises de script pour introduire le code JavaScript, où placer le code JavaScript dans les pages HTML, les variables JavaScript, les types de données, les fonctions et les événements, ainsi que les opérations DOM. En apprenant en profondeur et en maîtrisant ces points de connaissances, nous pouvons mieux utiliser JavaScript pour ajouter plus de fonctions et de beauté à nos pages Web.

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!

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：Comment utiliser JavaScript pour enregistrer les données modifiées dans une base de données MySQLArticle suivant：Comment utiliser JavaScript pour enregistrer les données modifiées dans une base de données MySQL

Articles Liés

Voir plus