Possibilités d’affichage JavaScript
JavaScript peut « afficher » les données de différentes manières:
- Écriture dans un élément HTML, à l’aide de
innerHTML. - Écriture 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, à l’aide de
console.log().
Utilisation de 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>Ma première page Web.</h1>
<p>Mon premier paragraphe.</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 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>Ma première page Web.</h1>
<p>Mon premier paragraphe.</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 HTML existant :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Ma première page Web.</h1>
<p>Mon premier paragraphe.</p>
<button type= »button » onclick= »document.write(5 + 6) »>Try it</button>
</body>
</html>
La méthode document.write () ne doit être utilisée que pour les tests.
Utilisation de window.alert ()
Vous pouvez utiliser une boîte d’alerte pour afficher les données:
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Ma première page Web.</h1>
<p>Mon premier paragraphe.</p>
<script>
window.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>Essayez-le vous-même
Impression JavaScript
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 actuelle.
Exemple
<!DOCTYPE html>
<html>
<body>
<button onclick= »window.print() »>Imprimer cette page.</button>
</body>
</html>>