Posibilidades de mostrar Javascript
Javascript puede mostrar datos de diferentes maneras:
- Dentro de un elemento HMTL usando innerHTML.
- Dentro de una salida HTML usando document.write().
- Dentro de una caja de alerta (alert box), usando window.alert().
- Escribiendo en la consola del navegador, usando console.log().
Uso de innerHTML
Para acceder a un elemento HTML, Javacript puede usar el método document.getElementById(). El atributo id define el elemento HTML. La propiedad innerHTML define el contenido del elemento.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ejm 01</title>
</head>
<body>
<h1>Ejm 01</h1>
<h2>Mi primera página web</h2>
<p>Mi primer párrafo</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
document.write()
Para propósitos de testing, es conveniente utilizar document.write().
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document.write()</title>
</head>
<body>
<h1>document.write()</h1>
<h2>Mi primera cabecera</h2>
<p>Mi primer párrafo</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Nota: El uso de document.write() después de cargar un documento HTML eliminará todo el HTML existente. Debe ser usado solo para testings.
window.alert()
Puedes usar una caja de alerta (alert box) para mostrar datos.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>window.alert()</title>
</head>
<body>
<h1>window.alert()</h1>
<p>Mi primer párrafo</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
En JavaScript, el objeto window es el objeto de alcance global. Esto significa que las variables, propiedades y métodos por defecto pertenecen al objeto window. Esto también significa que especificar la palabra clave window es opcional.
console.log()
Con fines de depuración, puedes llamar al método console.log() en el navegador para mostrar datos.
Ejm
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
El método print()
JavaScript no tiene ningún objeto de impresión o métodos de impresión. No puedes 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.
Ejm
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Imprime esta página</button>
</body>
</html>