Salida de Javascript

Posibilidades de visualización de Javascript

Javascript puede mostrar datos de diferentes maneras:

  • Escribiendo dentro de un elemento HTML, usando innerHTML.
  • Escribiendo dentro de la salida HTML usando document.write().
  • Escribiendo dentro de una caja de alerta, usando window.alert().
  • Escribiendo dentro de una consola de navegador, usando console.log().

Usando innerHTML

Para acceder a un elemento HTML, JavaScript puede usar el método document.getElementById(id). El atributo id define el elemento HTML al que apunta, y la propiedad innerHTML define el contenido de dicho elemento (el que se va a mostrar en dicho elemento).

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Mi primera página web</h1>	
	<p>Usando innerHTML</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 document.write()

Para fines de prueba, es conveniente usar document.write().

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Mi primera página web</h1>	
	<p>Utilizando document.write()</p>

	<script>
		document.write(5+6);
	</script>
</body>
</html>

El uso de document.write() después de cargar un documento HTML eliminará todo el contenido HTML existente con anterioridad.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Mi primera página web</h1>	
	<p>Usando document.write()</p>

	<button type="button" onClick="document.write(5+4);">Prueba</button>
</body>
</html>

Nota: El método document.write() solo debe usarse para pruebas.

Usando window.alert()

Puede usar un cuadro de alerta para mostrar datos.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h>Uso de window.alert()</h>	
	<p>Veamos un ejm de como usar window.alert()</p>

	<script>
		window.alert(5+6);
	</script>
</body>
</html>

Puedes omitir la palabra clave window.

En JavaScript, el objeto window es el objeto de alcance global, lo que significa que las variables, propiedades y métodos pertenecen por defecto al objeto window. Esto también significa que especificar la palabra clave window es opcional.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Usando sólo alert()</h1>	
	<p>Veamos como funciona tan sólo con alert()</p>

	<script>
		alert(5+6);
	</script>
</body>
</html>

Usando console.log()

Para fines de depuración, puedes llamar al método console.log() en el navegador para mostrar datos.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Usando console.log()</h1>	
	<p>Veamos el funcionamiento de console.log()</p>

	<script>
		console.log(5+6);
	</script>
</body>
</html>

Imprimiendo Javascript

JavaScript no tiene ningún objeto de impresión o métodos de impresión. No puedes acceder a dispositivos de salida desde JavaScript. La única excepción es que puede llamar al método window.print() en el navegador para imprimir el contenido de la ventana actual.

Ejm

<!DOCTYPE html>
<html lang="es">
<body>
	<h1>Uso de window.print()</h1>	
	<p>Veamos como usar window.print()</p>

	<button type="button" onClick="window.print()">Imprime esta página</button>
</body>
</html>