Input y Output en JavaScript
Gracias a la programación podemos hacer muchísimas cosas maravillosas y útiles para el mundo. Es increíble toda la cantidad de ideas que puedes desarrollar, todos los problemas que puedes resolver y toda la gente a la que puedes ayudar sólo con tu laptop.
Imaginemos que seguimos ayudando a la Dirección de la escuela pública entregándole meriendas a las niñas. Desarrollamos nuestro programa con los condicionales if, else y else if, las niñas pasan a buscar sus meriendas según su edad, pero… ¿Cómo podemos darle su fruta si el sistema no sabe cuál es la edad de la chica?
Claro, podríamos declarar una variable llamada ‘edad’ y darle un valor fijo (ejemplo 9), pero nuestro programa nunca nos mostraría otro resultado que no fuese la fruta que le corresponde a una chica de nueve años. Para estos casos, necesitamos entender los conceptos de input y output.
Si buscamos su definición, input se encuentra como ‘Conjunto de datos que se introducen en un sistema o un programa informáticos’. Es decir, son los datos que entran a ser procesados por nuestro programa. Volviendo a nuestro ejemplo de la escuela, la edad de cada niña entraría gracias a un input.
Entonces, si el dato que queremos recuperar es la edad de las niñas, ¿cómo podemos preguntarla en JavaScript?
Input
prompt()
El método prompt() sirve para que el usuario ingrese todo tipo de datos: cadenas de texto (o strings), números enteros, números decimales, etc. Este método se puede usar de tres maneras distintas (y las tres maneras dependen de la cantidad de parámetros* que utilizaremos).
(*): Por si no manejas el concepto, los parámetros son los valores que una función necesita para ejecutarse, es decir, los que van dentro de los paréntesis que acompañan el nombre de la función. En este caso, prompt() es una función ‘predefinida’ de JavaScript (ésta hace parte de un objeto — algo que no nos debe importar mucho por ahora — , por eso le llamamos método y no solo ‘la función prompt()’).
Entonces, la primera forma de usar prompt() es sin parámetros.
Y su resultado en el navegador sería lo siguiente:
Entonces, lo que hace prompt() es mostrarnos una ventanita emergente que nos abre un espacio donde podemos ingresar información. Y como anteriormente habíamos guardado el prompt() dentro de la variable ‘edad’, lo que ingresemos dentro del prompt() quedará almacenado en esa variable. Lindo, ¿no? ❤.
Las otras dos formas son simplemente agregando parámetros dentro de los paréntesis del prompt().
La segunda es agregando un parámetro dentro de los paréntesis. Esta información que le pasaremos es el mensaje que queremos que se vea arriba del campo a rellenar, es decir, podemos poner una indicación o pregunta, para que el usuario complete esa información.
Habiendo ingresado el parámetro, la ventanita ahora se verá de la siguiente forma:
Por último, para terminar con el método prompt(), si le ingresamos dos parámetros, el primero lo toma como el contexto de la información a completar y el segundo como un valor por defecto. Esto se vería así:
Output
Bueno, si los Inputs nos ayudan a traer datos, los Output son la forma de exponer información. O sea, con esto podemos mostrar los resultados de nuestras operaciones y programas :).
Cabe destacar que JavaScript no tiene método imprimir ni display por defecto, pero tiene varias otras formas de mostrar la data.
alert()
El método alert() lo que hace es abrir una mini ventanita con un mensaje mostrándonos algo. Éste recibe un parámetro: el mensaje que queremos que muestre. Como mensaje le podemos pasar cualquier valor, incluso variables y elementos concatenados.
En este caso, si a alert() le pasamos la variable ‘edad’ donde habíamos guardado el prompt() anterior, nos mostrará lo que ingresamos en ese input.
document.write()
Lo que hace document.write() es escribir directamente en el documento HTML. Lo que le ingresemos como parámetro quedará plasmado en el cuerpo (o body) del documento.
innerHTML
Primero que todo, hay que aclarar que innerHTML no es una función, o sea, no hay que pasarle parámetros. innerHTML es una propiedad de las cadenas de texto que puedes guardar o crear :).
Ésta propiedad lo que hace es adentrarse en el espacio entre etiquetas de un elemento HTML. Para este ejemplo, nos trajimos el h1 presente en el documento (mediante el valor de su id) y creamos su contenido con innerHTML.
console.log()
console.log() es el mejor amigo que podríamos tener cuando comenzamos la aventura de aprender JS. Gracias a esta función podemos escribir contenido en la consola del navegador (lo que aparece cuando hacemos click derecho y le damos a inspeccionar/inspeccionar elemento). O sea, ahora en vez de mostrarnos el mensaje en una ventanita o en el documento mismo, se nos muestra en la consola del navegador. Esto se ocupa generalmente para debuggear (depurar el código cuando tenemos errores) . La consola muestra mensajes que el desarrollador (y bueno, quien se meta a ver la consola) puede ver.
Así que ya sabes :) ahora a practicar lo aprendido!
