Métodos para mostrar información en JavaScript
Existen cuatro métodos comunes para mostrar información en JavaScript, existe algún método adicional que permite por ejemplo mostrar información y confirmar si el usuario de la web está conforme, no obstante, ya entraríamos en como crear condiciones,… y no tocaremos aún esa parte del lenguaje más avanzada. Los métodos que estudiaremos son los siguientes:
- Escribir texto en un elemento HTML usando innerHTML.
- Escribir un texto de salida en HTML usando document.write().
- Mostrar texto en un mensaje emergente o alerta usando window.alert().
- Escribir el texto en la consola del explorador (solo visible en modo desarrollador) usando console.log().
1. Uso de innerHTML
El uso de innerHTML requerirá del uso previo de document.getElementById(id) y de la existencia de un elemento con id único sobre el que reemplazar el contenido. Os mostramos un ejemplo con comentarios para que podáis distinguir un poco donde está cada argumento, recordad que todo aquello que sea escrito después de // es considerado un comentario y no código.
<!DOCTYPE html>
<html>
<body>
<p id=»EjemploInner»></p> //Aquí hemos definido un simple párrafo de texto que tendrá como id único «EjemploInner» para que document.getElementById pueda localizarlo.
<script>
document.getElementById(«EjemploInner»).innerHTML = 3 + 2; //Aquí innerHTML insertará el valor 5 (resultado de 3 + 2) sobre el elemento con identificador «EjemploInner».
</script>
</body>
</html>
2. Uso de document.write()
Este método document.write() escribirá directamente un texto o resultado de una operación por pantalla, normalmente se utiliza únicamente cuando se está desarrollando un portal para que el programador pueda comprobar que los resultados de operaciones intermedias se están realizando correctamente. Tras su uso suelen ser comentados o borrados directamente del código.
<!DOCTYPE html>
<html>
<body>
<script>
var x = 1;
var y = 14;
var resultado = x + y;
document.write(«El resultado de mi cuenta interna x + y es: » + resultado);
</script>
</body>
</html>
Nota: Borraremos todo el contenido HTML dejando solo el resultado de document.write() si lo usamos lo último tras cargar toda la página, es decir, si cargamos la página y lo usamos a posteriori con un botón solo se mostrará el contenido introducido en document.write() reemplazando todo el texto que ya tuviéramos.
<!DOCTYPE html>
<html>
<body>
<h1>Pongo una cabecera por aquí</h1>
<p>Pongo otra chorradeja por acá</p>
<script>
var TextoFinal = «Al carajo Todo!»
</script>
<button type=»button» onclick=»document.write(TextoFinal)»>Pulsa si tienes valor!</button>
<p>Esta línea de regalo al final</p>
</body>
</html>
3. Mostrar alertas o mensajes emergentes con window.alert()
Este método de mensajes emergentes es el que nos encontraremos en el dichoso spam de webs, aplicaciones,… que sirve sobre todo para darnos la brasa como usuarios :). Su función es mostrar un cuadro o mensaje emergente con un texto fijo. A continuación os mostramos un ejemplo educativo a la vez que ético:
<!DOCTYPE html>
<html>
<body>
<h1>Por la salud mental del mundo no abuses del SPAM</h1>
<script>
var sSPAM = «TOMA SPAM! TOMA SPAM! CHOCOSEXY! TOMA SPAM! TOMA SPAM!»;
window.alert(sSPAM);
</script>
</body>
</html>
4. Almacenar información de log con console.log()
Por último pero no menos importante! hablaremos del método console.log(). Este método almacenará un texto o resultado de cualquier operación que deseemos en la propia consola para desarrolladores de nuestro explorador. En nuestro ejemplo para ver el resultado usaremos Chrome para abrir nuestro HTML. Un ejemplo sencillo sería el siguiente:
<!DOCTYPE html>
<html>
<body>
<script>
var sLOG = «Este es mi texto de log y solo lo veo como desarrollador»;
console.log(sLOG);
</script>
</body>
</html>
Pero si no se ve nada! la pantalla está en blanco!…. nooo es que ya hemos dicho que solo se ve en la consola de explorador!, en Chrome tendréis que pulsar F12 y se abrirá una ventana lateral donde podréis seleccionar «Console» y ahí encontraréis vuestro texto.
Esto es todo amigos! continuaremos nuestros tutoriales con operadores aritméticos y lógicos!
