Sortie JavaScript
Possibilités d'affichage JavaScript
JavaScript peut afficher des données de différentes manières :
- Écriture dans un élément HTML, en utilisant
innerHTMLouinnerText. - Écriture dans la sortie HTML en utilisant
document.write(). - Écriture dans une boîte d'alerte, en utilisant
window.alert(). - Écriture dans la console du navigateur, en utilisant
console.log().
Utilisation de innerHTML
Pour accéder à un élément HTML, vous pouvez utiliser la méthode document.getElementById(id) .
Utilisez l'attribut id pour identifier l'élément HTML.
Ensuite, utilisez la propriété innerHTML pour changer le contenu HTML de l'élément :
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 = "<h2>Bonjour le Monde</h2>";
</script>
</body>
</html> Remarque
Changer la propriété innerHTML d'un élément HTML est le moyen le plus courant d'afficher des données en HTML.
Utilisation de innerText
Pour accéder à un élément HTML, utilisez la méthode document.getElementById(id) .
Ensuite, utilisez la propriété innerText pour changer le texte interne de l'élément :
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").innerText = "Bonjour le Monde";
</script>
</body>
</html> Remarque
Utilisez innerHTML lorsque vous souhaitez changer un élément HTML.
Utilisez innerText lorsque vous souhaitez uniquement changer le texte brut.
Utilisation de document.write()
Pour des raisons 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> Utiliser document.write() après le chargement d'un document HTML va supprimer 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)">Essayez-le</button>
</body>
</html> La méthode document.write() ne doit être utilisée que pour des tests.
Utilisation de window.alert()
Vous pouvez utiliser une boîte d'alerte pour afficher des 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> Vous pouvez omettre 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 spécifier le mot-clé window est optionnel :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Ma Première Page Web</h1>
<p>Mon premier paragraphe.</p>
<script>
alert(5 + 6);
</script>
</body>
</html> Utilisation de console.log()
Pour des raisons de débogage, vous pouvez appeler la méthode console.log() dans le navigateur pour afficher des 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> Impression 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 depuis 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()">Imprimer cette page</button>
</body>
</html>