Pourquoi utilisons-nous JavaScript en HTML ?-js tutoriel-php.cn

Pourquoi utilisons-nous JavaScript en HTML ?

王林

Libérer： 2023-08-29 10:33:02

avant

1254 Les gens l'ont consulté

为什么我们在 HTML 中使用 JavaScript？

Tout d'abord, nous comprendrons ce qu'est JavaScript. Lorsqu'un site Web fait plus que simplement rester là et vous fournir des informations statiques, telles que l'affichage de mises à jour de contenu en temps opportun, de cartes interactives, de visuels animés 2D/3D, de juke-box vidéo défilant, etc., JavaScript est presque certainement utilisé. De plus, vous pouvez ajouter des fonctionnalités avancées à votre site Web à l'aide de scripts ou du langage de programmation JavaScript. Les deux premières couches du gâteau constituées de technologies Web standards sont HTML et CSS. Cet étage est le troisième étage.

Niveaux de pages Web

Le langage de balisage que nous utilisons pour structurer et définir la signification du contenu Web s'appelle HTML. En utilisant HTML, nous pouvons définir des paragraphes, des titres et des tableaux de données, et intégrer des images et des vidéos dans des pages Web.
CSS signifie Cascading Style Sheets et est un langage de règles de style que nous utilisons pour appliquer des styles au contenu HTML, par exemple en établissant des couleurs et des polices d'arrière-plan et en les organisant en colonnes.
JavaScript est un langage de script qui vous permet de tout faire, de la création de matériaux mis à jour dynamiquement à la gestion de graphiques multimédias et animés. Des choses étonnantes peuvent être réalisées avec seulement quelques lignes de code JavaScript.

L'utilisation de JavaScript dans le développement web

JavaScript est un langage informatique utilisé sur le web. JavaScript peut être utilisé pour mettre à jour et modifier HTML et CSS. Il peut être utilisé pour calculer, modifier et valider des données. Les utilisateurs peuvent interagir avec les pages Web à l'aide de JavaScript. Il n'y a vraiment aucune limite à ce que vous pouvez accomplir avec JavaScript ; voici quelques exemples d'utilisation sur des pages Web -

Vous pouvez exposer ou masquer plus d'informations en appuyant sur le bouton.
La couleur du bouton change lorsque la souris passe dessus.
Le site Web propose un carrousel d’images que vous pouvez parcourir.
Zoomez avant ou arrière sur les photos à l'aide du minuteur ou du compte à rebours sur le site Web,
Lisez du contenu audio et vidéo dans la page,
Animez et affichez avec des listes déroulantes de hamburgers et plus encore.

Le but de JavaScript sur les pages Web

Lorsque vous chargez une page Web dans votre navigateur (onglet navigateur), vous exécutez du code (HTML, CSS et JavaScript) dans l'environnement d'exécution. Ceci est similaire à une usine qui introduit des matières premières (code) et produit des produits finis (pages Web).

Grâce à l'API Document Object Model, JavaScript est souvent utilisé pour modifier le HTML et le CSS afin de mettre à jour dynamiquement l'expérience utilisateur. N'oubliez pas que le code d'un document Web se charge et s'exécute généralement dans l'ordre dans lequel il apparaît sur la page. Si JavaScript se charge et s'exécute avant HTML et CSS, ce qui signifie que des modifications sont en cours, des erreurs peuvent survenir.

Comment ajouter du JavaScript à une page ?

Semblable à la façon dont CSS est appliqué aux pages HTML, il en va de même pour JavaScript. Cependant, JavaScript nécessite une balise HTML, qui est <script>. </script>

Dans l'exemple ci-dessous, nous verrons comment les utilisateurs peuvent intégrer du code JavaScript dans la balise head à l'aide de l'élément script dans un fichier HTML.

Exemple

Comme le montre l'exemple ci-dessous, nous intégrons JavaScript dans le fichier HTML pour modifier le HTML. A l'intérieur de la balise script, nous utilisons une fonction appelée "ParaChange". Nous créons un bouton "Cliquez ici" à l'intérieur de la balise body. La fonction ParaChange sera appelée par l'événement click du bouton. Cette fonction utilise le document.getElementById() du DOM pour manipuler la balise p et modifier l'instruction.

<html>
<head>
   <script>
  
      // inside the head tag is a script tag.
      // The onclick event calls the parachange function
      function ParaChange() {
         document.getElementById("para").innerHTML = "The line has changed.";
      }
   </script>
</head>
<body>
   <h2>Including JavaScript in HTML document in <i>Head tag</i></h2>
   <p id="para">The is a line</p>
   <button type="button" onclick="ParaChange()">Click Here</button>
</body>
</html>

Copier après la connexion

L'utilisateur peut remarquer que la ligne de paragraphe à l'intérieur de la balise p de l'événement de clic a changé en raison du clic sur le bouton. En effet, la fonction "ParaChange" écrite dans la balise script de la balise head est appelée lors de cet événement de clic.

De cette façon, nous pouvons utiliser JavaScript en HTML pour créer nos pages flexibles et dynamiques en écrivant des codes complexes.

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!