JavaScript puede "mostrar" datos de diferentes maneras:
Escribir en un elemento HTML, usando innerHTML.
Escribir en la salida HTML usando document.write().
Escribiendo en un cuadro de alerta, usando window.alert().
Escribiendo en la consola del navegador, usando console.log().
Para acceder a un elemento HTML, JavaScript puede utilizar el método document.getElementById(id).
El atributo id define el elemento HTML. La propiedad innerHTML define el contenido 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>Pruébelo usted mismo →
<!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>
Cambiar la propiedad insideHTML de un elemento HTML es una forma común de mostrar datos en HTML.
document.write()Para fines de prueba, es conveniente utilizar 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>Pruébelo usted mismo →
<!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>
El uso de document.write() después de cargar un documento HTML eliminará todo el HTML existente:
<!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>Pruébelo usted mismo →
<!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>
El método document.write() solo debe usarse para pruebas.
window.alert()Puede utilizar un cuadro de alerta para mostrar datos:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Puede omitir la palabra clave ventana.
En JavaScript, el objeto de ventana es el objeto de alcance global. Esto significa que las variables, propiedades y métodos pertenecen por defecto al objeto de ventana. Esto también significa que especificar la palabra clave ventana es opcional:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log()Para fines de depuración, puede llamar al método console.log(). en el navegador para mostrar datos.
Aprenderá más sobre la depuración en un capítulo posterior.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>Pruébelo usted mismo →
<!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 no tiene ningún objeto de impresión ni métodos de impresión.
No puede acceder a los dispositivos de salida desde JavaScript.
La única excepción es que puedes llamar al método window.print() en el navegador para imprimir el contenido de la ventana actual.
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>Pruébelo usted mismo →
<!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>