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()
.
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 :
<!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.
document.write()
À des fins de test, il est pratique d'utiliser document.write()
:
<!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 :
<!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.
window.alert()
Vous pouvez utiliser une boîte d'alerte pour afficher des données :
<!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 :
<!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>
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.
<!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>
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.
<!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>