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