JavaScript générer une sortie

Génération d'une sortie en JavaScript

Dans certaines situations, vous devrez peut-être générer une sortie à partir de votre code JavaScript. Par exemple, vous voudrez peut-être voir la valeur de la variable ou écrire un message à la console du navigateur pour vous aider à déboguer un problème dans votre code JavaScript en cours d'exécution, etc.

En JavaScript, il existe plusieurs manières différentes de générer une sortie, notamment l'écriture de la sortie dans la fenêtre du navigateur ou la console du navigateur, l'affichage de la sortie dans des boîtes de dialogue, l'écriture de la sortie dans un élément HTML, etc.

Écrire la sortie dans la console du navigateur

Vous pouvez facilement sortir un message ou écrire des données sur la console du navigateur en utilisant la méthode console.log(). Il s'agit d'une méthode simple mais très puissante pour générer une sortie détaillée. Voici un exemple :

/* afficher un message */
console.log("Hello World!"); // affiche : Hello World!




/* Afficher la valeur d'une variable */
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // affiche : 30

Conseil : Pour accéder à la console de votre navigateur Web, appuyez d'abord sur la touche F12 du clavier pour ouvrir les outils de développement, puis cliquez sur l'onglet de la console.

 

Affichage de la sortie dans les boîtes de dialogue d'alerte

Vous pouvez également utiliser des boîtes de dialogue d'alerte pour afficher le message ou les données de sortie à l'utilisateur. Une boîte de dialogue d'alerte est créée à l'aide de la méthode alert(). Voici un exemple :

 

/* afficher un message */
alert("Hello World!"); // affiche: Hello World!



/* afficher la valeur d'une variable */ 
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Affiche : 30

Écrire la sortie dans la fenêtre du navigateur

Vous pouvez utiliser la méthode document.write() pour écrire le contenu dans le document actuel uniquement pendant que ce document est en cours d'analyse. Voici un exemple :

/* afficher un message */
document.write("Hello World!"); // Affiche : Hello World!




/* afficher la valeur d'une variable */
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Affiche: 30

Si vous utilisez la méthode document.write() après le chargement de la page, elle écrasera tout le contenu existant dans ce document. Essayez l'exemple suivant :

<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>



<button type="button" onclick="document.write('Hello World!')">Click moi</button>

Insertion de la sortie dans un élément HTML

Vous pouvez également écrire ou insérer une sortie dans un élément HTML à l'aide de la propriété innerHTML de l'élément. Cependant, avant d'écrire la sortie, nous devons d'abord sélectionner l'élément à l' aide d'une méthode telle que getElementById(), comme illustré dans l'exemple suivant :

 

<p id="greet"></p>
<p id="result"></p>



<script>
// Ecrire une chaîne dans un élément
document.getElementById("greet").innerHTML = "Hello World!";



// Écrire la valeur d'une variable dans un élément
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>

Vous apprendrez à manipuler l'élément HTML en détail dans les chapitres sur la manipulation du DOM JavaScript.