Sortie JavaScript


Table des matières

    Afficher la table des matières


Possibilités d'affichage JavaScript

JavaScript peut « afficher » les données de différentes manières :

  • Écrire dans un élément HTML, en utilisant innerHTML.

  • Écrire dans la sortie HTML à l'aide de document.write().

  • Écrire dans une boîte d'alerte, en utilisant window.alert().

  • Écriture dans la console du navigateur, en utilisant console.log().


Utiliser innerHTML

Pour accéder à un élément HTML, JavaScript peut utiliser la méthode document.getElementById(id).

L'attribut id définit l'élément HTML. La propriété innerHTML définit le contenu HTML :

Exemple

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
 <p>My First Paragraph</p>
    
<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
    </script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html> 

Modification de la propriété innerHTML d'un élément HTML est un moyen courant d'afficher des données en HTML.


Utilisation de document.write()

À des fins de test, il est pratique d'utiliser document.write() :

Exemple

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 
<script>
document.write(5 + 6);
</script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 

L'utilisation de document.write() après le chargement d'un document HTML supprimera tout le code HTML existant :

Exemple

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
 <p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html> 

La méthode document.write() ne doit être utilisée qu'à des fins de test.



Utilisation de window.alert()

Vous pouvez utiliser une boîte d'alerte pour afficher des données :

Exemple

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
window.alert(5 + 6);
</script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 

Vous pouvez ignorer le mot-clé window.

En JavaScript, l'objet window est l'objet de portée globale. Cela signifie que les variables, propriétés et méthodes appartiennent par défaut à l’objet window. Cela signifie également que la spécification du mot clé window est facultative :

Exemple

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
alert(5 + 6);
</script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html> 

Utilisation de console.log()

À des fins de débogage, vous pouvez appeler la méthode console.log() dans le navigateur pour afficher les données.

Vous en apprendrez davantage sur le débogage dans un chapitre ultérieur.

Exemple

<!DOCTYPE html>
<html>
<body>
 
<script>
console.log(5 + 6);
</script>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html> 

Imprimer JavaScript

JavaScript n'a pas d'objet d'impression ni de méthodes d'impression.

Vous ne pouvez pas accéder aux périphériques de sortie à partir de JavaScript.

La seule exception est que vous pouvez appeler la méthode window.print() dans le navigateur pour imprimer le contenu de la fenêtre actuelle.

Exemple

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>