Chargement...

Afficher un résultat

Vous savez poser un script sur la page. Ensuite : où apparaît le résultat ? Sur la page pour les visiteurs, dans une boîte à fermer, ou seulement dans la Console pour vous. Un langage, quatre endroits très différents.

Comment montrer un résultat JavaScript ?

Pour les visiteurs, mettez à jour un élément déjà là — textContent pour le texte brut, innerHTML seulement si vous devez insérer du balisage. Pour un message bloquant, window.alert. Pour vous déboguer, console.log. document.write est un flux ancien : correct pendant la lecture du fichier ; après chargement, il peut remplacer tout le document.

Où voit-on le résultat ?

📊 Endroits courants pour voir le résultat

Méthode Qui le voit Défaut pour débuter
textContent sur un élément Visiteurs, dans la page Oui — sortie quotidienne
innerHTML sur un élément Visiteurs, avec des balises HTML Seulement si le balisage est le vôtre
window.alert Visiteurs, dans une boîte Rare — la page attend OK
console.log Vous, dans la Console DevTools Oui pour déboguer ; les visiteurs ne voient rien
document.write Le flux HTML À éviter après chargement

Sur la page (défaut visiteur)

Laissez un vrai titre ou paragraphe en HTML. Quand le script s’exécute (fin du body, comme à la séance précédente), changez ce nœud. Les visiteurs voient le nouveau texte sans ouvrir DevTools.

Texte visible avec textContent

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>

Pourquoi textContent d’abord

  • Si le script échoue, « Waiting… » reste dans le HTML
  • Guillemets et < restent du texte, pas des balises
  • Même habitude qu’avec le script en fin de body
  • Le module DOM viendra plus tard ; ici « mets le résultat ici » suffit

innerHTML — quand le résultat est du balisage

innerHTML lit une chaîne comme du HTML. Utilisez-le quand vous insérez volontairement des balises que vous avez écrites. Ne versez pas la saisie brute dans innerHTML. Pour un nom ou un prix, restez sur textContent.

Insérer du balisage avec innerHTML

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>

document.write — le connaître, peu l’utiliser

document.write envoie du texte dans le flux HTML pendant l’analyse du fichier. Si vous l’appelez après le chargement (clic tardif), beaucoup de navigateurs ouvrent un nouveau flux et effacent la page. Pas pour les mises à jour. Changez un élément.

document.write peut effacer une page déjà chargée

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>

Ouvrez la démo, cliquez, et voyez : le premier paragraphe disparaît. C’est pourquoi ce cours n’utilisera pas document.write dans les exemples suivants.

alert — une boîte qui bloque la page

window.alert (souvent alert) ouvre une boîte système. La page attend OK. Utile une fois pour prouver que le script a tourné. Faible comme seule interface : pas de style, agaçant en série, interrompt lecteurs d’écran et clavier. Les vrais messages, dans la page.

Un alert unique

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>

console.log — pour vous, pas pour les visiteurs

La Console est un outil de développement. console.log y imprime. Une cliente sur téléphone ne le voit pas. Utile pour inspecter un nombre ou une chaîne pendant l’apprentissage. Un log réussi ne veut pas dire « l’app a montré le résultat ».

Journal réservé à qui développe

javascript 
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);

Ouvrez DevTools (souvent F12), onglet Console, actualisez, lisez les lignes. Si vous ne changez que console.log et que le titre reste « Waiting… », les visiteurs voient encore « Waiting… ».

Essayez vous-même

  1. Enregistrez la page textContent, ouvrez-la, changez la chaîne, actualisez.
  2. Passez la ligne en innerHTML avec <strong> et vérifiez que le mot est en gras.
  3. Ouvrez la Console et lancez l’exemple console.log — rien de neuf dans le corps.
  4. Lancez l’alert une fois ; puis remplacez-le par une mise à jour de titre pour ne plus bloquer.
  5. Optionnel : cliquez le bouton document.write pour sentir l’effacement — puis retirez ce motif de vos fichiers.

Erreurs fréquentes

  • N’afficher qu’avec console.log puis s’étonner d’une page vide
  • Mettre dans innerHTML un texte que vous n’avez pas écrit (formulaires, URL, chat) au lieu de textContent
  • Appeler document.write après chargement et perdre toute la mise en page
  • alert à chaque touche
  • Confondre avec Where To : là où vit le script ; ici où apparaît le résultat

Résumé

  • Défaut visible : mettez à jour un élément avec textContent
  • innerHTML insère un balisage que vous contrôlez — pas des chaînes non fiables
  • alert bloque ; à utiliser peu
  • console.log est pour qui développe, dans DevTools
  • Pas de document.write après chargement ; le document peut disparaître
  • Entraînez-vous à déplacer le même message Console → alert → titre

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 3 de 4
Javascript Tutoriel