Posibilidades Display JavaScript
JavaScript puede "mostrar" datos de diferentes maneras:
Escribir en un elemento HTML, usando
innerHTML.Escribir en un HTML output usando
document.write().Escribir en un cuadro de alerta, usando
window.alert().Escribiendo en la consola del navegador, usando
console.log().
Usando innerHTML
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:
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
innerHTMLde un elemento HTML es una forma común de mostrar datos en HTML.
Usando document.write()
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 window.alert()
Puedes 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 palabra clave window.
En JavaScript, el objeto window es el objeto de alcance global. Esto 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:
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</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.
Aprenderás más sobre depuración en un capítulo posterior.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
JavaScript no tiene ningún objeto de impresión ni métodos de impresión.
No puedes acceder a los 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.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Traducido con 💚 desde W3Schools.com