Sortie JavaScript
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(). - Écrire dans la console du navigateur, en utilisant
console.log().
Utiliser innerHTML
Pour accéder à un élément HTML, JavaScript peut utiliser la document.getElementById(id)méthode.
L' idattribut définit l'élément HTML. La innerHTML propriété 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>
La modification de la propriété innerHTML d'un élément HTML est une manière courante d'afficher des données en HTML.
Utilisation de document.write()
A 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>
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>
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 les 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>
Vous pouvez ignorer le mot- windowclé.
En JavaScript, l'objet window est l'objet de portée globale, ce qui signifie que les variables, les propriétés et les méthodes appartiennent par défaut à l'objet window. Cela signifie également que la spécification du windowmot clé 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>
Utilisation de console.log()
À des fins de débogage, vous pouvez appeler la console.log()méthode dans le navigateur pour afficher les données.
Vous en apprendrez plus sur le débogage dans un chapitre ultérieur.
Exemple
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Imprimer
JavaScript n'a pas d'objet d'impression ni de méthode 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 window.print()méthode dans le navigateur pour imprimer le contenu de la fenêtre en cours.
Exemple
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>