Tous les cours gratuit

Apprendre à programmer

Afficher une variable JavaScript dans une Page HTML

L’un des éléments fondamentaux de la programmation web consiste à afficher des informations dynamiques dans une page HTML. Vous pouvez accomplir cela en utilisant JavaScript pour manipuler le contenu de votre page. Dans cet article, nous allons vous montrer comment afficher une variable JavaScript dans une page HTML de différentes manières.

Méthode 1 : Utilisation de la fonction document.write()

La méthode la plus simple pour afficher une variable JavaScript dans une page HTML est d’utiliser la fonction document.write(). Cette fonction écrit du texte directement dans le document HTML à l’endroit où elle est appelée.

<!DOCTYPE html>
<html>
<head>
  <title>Affichage de Variable JavaScript</title>
</head>
<body>

<h1>Affichage de Variable JavaScript</h1>

<script>
  var maVariable = "Hello, monde !";
  document.write(maVariable);
</script>

</body>
</html>

Dans cet exemple, la variable maVariable contient la chaîne de caractères “Hello, monde !”, qui est ensuite affichée dans la page en utilisant document.write().

Méthode 2 : Utilisation de la fonction innerHTML

Une autre méthode courante pour afficher une variable JavaScript dans une page HTML est d’utiliser la propriété innerHTML d’un élément HTML. Cette méthode offre plus de flexibilité en ciblant un élément spécifique pour afficher le contenu.

<!DOCTYPE html>
<html>
<head>
  <title>Affichage de Variable JavaScript</title>
</head>
<body>

<h1>Affichage de Variable JavaScript</h1>

<p id="output"></p>

<script>
  var maVariable = "Hello, monde !";
  document.getElementById("output").innerHTML = maVariable;
</script>

</body>
</html>

Dans cet exemple, la variable maVariable est affichée dans l’élément HTML avec l’ID “output”. La propriété innerHTML de cet élément est utilisée pour définir le contenu de l’élément avec la valeur de la variable.

Méthode 3 : Utilisation de textContent

Si vous préférez manipuler uniquement le texte contenu dans un élément HTML sans interpréter le HTML, vous pouvez utiliser la propriété textContent.

<!DOCTYPE html>
<html>
<head>
  <title>Affichage de Variable JavaScript</title>
</head>
<body>

<h1>Affichage de Variable JavaScript</h1>

<p id="output"></p>

<script>
  var maVariable = "Hello, monde !";
  document.getElementById("output").textContent = maVariable;
</script>

</body>
</html>

Dans cet exemple, la variable maVariable est affichée dans l’élément HTML avec l’ID “output” en utilisant textContent.

Méthode 4 : Utilisation de console.log()

Parfois, vous pouvez avoir besoin d’afficher des variables à des fins de débogage. La fonction console.log() est utile dans ce cas. Elle affiche le contenu de la variable dans la console du navigateur.

<!DOCTYPE html>
<html>
<head>
  <title>Affichage de Variable JavaScript</title>
</head>
<body>

<h1>Affichage de Variable JavaScript</h1>

<script>
  var maVariable = "Hello, monde !";
  console.log(maVariable);
</script>

</body>
</html>

Dans cet exemple, la variable maVariable est affichée dans la console du navigateur, ce qui est utile pour le débogage.

Conclusion

Afficher une variable JavaScript dans une page HTML est une tâche courante en développement web. Les méthodes que nous avons explorées, telles que document.write(), innerHTML, textContent et console.log(), vous permettent d’accomplir cette tâche de différentes manières, en fonction de vos besoins. Utilisez ces techniques pour dynamiser vos pages web et offrir une expérience utilisateur plus riche.

Autres articles

Exercices de Programmation Corrigés sur le Microprocesseur...
Le microprocesseur Motorola 6809 est un processeur 8 bits très...
Read more
Programmation ISO (ou G-code) : Guide
La programmation ISO (ou G-code) est un langage standard utilisé...
Read more
Exercices Corrigés Programmation ISO en tournage CNC
Voici une série d'exercices corrigés sur la programmation ISO en...
Read more
AZ

Recent Posts

Audits, Suivi des Améliorations et Préparation pour la Recertification ISO 9001

Ce cours se concentre sur les audits et la phase après la mise en place…

27 minutes ago

Optimiser et Maintenir le Système de Management de la Qualité ISO 9001

Une fois que votre entreprise a obtenu la certification ISO 9001, il est crucial de…

1 heure ago

Créer une Carte de Positionnement Concurrentiel ➤ Modèle Excel

Une carte de positionnement concurrentiel est un outil visuel qui aide à évaluer la position…

2 heures ago

Compte rendu de lecture pour Le Père Goriot d’Honoré de Balzac

Titre : Le Père Goriot Auteur : Honoré de BalzacDate de publication : 1834-1835Genre :…

2 heures ago

Rédiger un projet en Python concernant la maintenance des machines

Pour rédiger un projet en Python concernant la maintenance des machines, voici un exemple de…

3 heures ago

Maîtriser l’utilisation de la méthode join en Python

La méthode join en Python est un outil puissant pour concaténer des éléments d'une séquence…

3 heures ago

This website uses cookies.