JavaScript Producción
"Si quieres emprender un nuevo camino, tienes que pavimentarlo tú mismo"
Steve Jobs
JavaScript Posibilidades de visualización
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().
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>
Inténtalo tú mismo »
Cambiar la propiedad internalHTML de 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>
Inténtalo tú mismo »
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>
Inténtalo tú mismo »
El método document.write() solo debe usarse para pruebas.
Usando window.alert()
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>
Inténtalo tú mismo »
Puede omitir la palabra clave window.
En JavaScript, el objeto de ventana es el objeto de alcance global, eso significa que las variables, propiedades y métodos pertenecen de forma predeterminada al objeto de ventana. 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>
Inténtalo tú mismo »
Usando 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.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Inténtalo tú mismo »
JavaScript Imprimir
JavaScript no tiene objetos 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 puedes 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>
Inténtalo tú mismo »
