Cargando...

Salida en JavaScript

Ya sabes poner un script en la página. Lo siguiente es dónde se ve el resultado: en la página para quien visita, en un diálogo que hay que cerrar, o solo en la Console para ti. Un lenguaje, cuatro sitios muy distintos.

¿Cómo muestras resultados de JavaScript?

Para visitantes, actualiza un elemento que ya existe — textContent para texto plano, innerHTML solo si debes insertar marcado. Para un mensaje que bloquea, window.alert. Para depurar tú, console.log. document.write es un flujo antiguo: vale mientras se lee el archivo; después de cargar puede sustituir todo el documento.

¿Dónde se ve el resultado?

📊 Sitios habituales para ver el resultado

Método Quién lo ve Predeterminado para principiantes
textContent en un elemento Visitantes, en la página Sí — salida cotidiana
innerHTML en un elemento Visitantes, con etiquetas HTML Solo si el marcado lo escribes tú
window.alert Visitantes, en un diálogo Poco — la página espera el OK
console.log Tú, en la Console de DevTools Sí para depurar; visitantes no lo ven
document.write El flujo HTML Evítalo después de cargar

En la página (predeterminado para visitantes)

Deja un encabezado o un párrafo real en HTML. Cuando corre el script (final del body, como en la sesión anterior), cambia ese nodo. Quien visita ve el texto nuevo sin abrir DevTools.

Texto visible con 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>

Por qué textContent primero

  • Si el script falla, «Waiting…» sigue en el HTML
  • Comillas y < siguen siendo texto, no etiquetas
  • Ya usaste este patrón al poner el script al final del body
  • El módulo DOM llega después; aquí basta «pon el resultado aquí»

innerHTML — cuando el resultado es marcado

innerHTML interpreta una cadena como HTML. Úsalo cuando insertas a propósito etiquetas que escribiste. No vuelques entrada cruda de usuarios en innerHTML. Para un nombre o un precio, textContent.

Insertar marcado con 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 — conócelo y úsalo poco

document.write envía texto al flujo HTML mientras se analiza el archivo. Si lo llamas después de cargar (un clic tardío), muchos navegadores abren un flujo nuevo y borran la página. No lo uses para actualizaciones. Cambia un elemento.

document.write puede borrar una página ya cargada

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>

Abre la demo, pulsa el botón y mira: el primer párrafo desaparece. Por eso este curso no usará document.write en ejemplos posteriores.

alert — un diálogo que detiene la página

window.alert (casi siempre alert) abre un diálogo del sistema. La página espera el OK. Sirve una vez para probar que el script corrió. Como única interfaz es flojo: no se estiliza, molesta en serie y corta lectores de pantalla y teclado. Los mensajes de verdad, en la página.

Un alert de una sola vez

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 — para ti, no para quien visita

La Console es una herramienta de desarrollo. console.log imprime ahí. Quien compra en el móvil no lo ve. Úsalo para inspeccionar un número o una cadena mientras aprendes. Un log correcto no significa «la app mostró el resultado».

Registro solo para quien programa

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

Abre DevTools (a menudo F12), pestaña Console, recarga y lee las líneas. Si solo cambias console.log y el encabezado sigue en «Waiting…», quien visita sigue viendo «Waiting…».

Pruébalo tú

  1. Guarda la página de textContent, ábrela, cambia la cadena y recarga.
  2. Pasa esa línea a innerHTML con <strong> y comprueba que la palabra se ve en negrita.
  3. Abre la Console y ejecuta el ejemplo de console.log — en el cuerpo no debe aparecer nada nuevo.
  4. Ejecuta el alert una vez; luego sustitúyelo por un cambio de encabezado para que la página no se bloquee.
  5. Opcional: pulsa el botón de document.write para sentir el borrado — luego quita ese patrón de tus archivos.

Errores comunes

  • Mostrar resultados solo con console.log y extrañarse de una página vacía
  • Meter en innerHTML texto que no escribiste (formularios, URLs, chat) en vez de textContent
  • Llamar document.write después de cargar y perder todo el diseño
  • alert en cada tecla
  • Mezclar con Where To: allí dónde vive el script; aquí dónde aparece el resultado

Resumen

  • Predeterminado visible: actualiza un elemento con textContent
  • innerHTML inserta marcado que controlas — no cadenas no confiables
  • alert bloquea; úsalo poco
  • console.log es para quien programa, en DevTools
  • No uses document.write después de cargar; puede borrar el documento
  • Practica pasando el mismo mensaje de Console → alert → encabezado

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
6
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 3 de 4
Javascript Tutorial