Sección 1: JavaScript

Lección 5: Variables

¡Bienvenidos! Hasta ahora hemos probado 3 de los 7 tipos de datos que posee JavaScript. No nos preocupes, porque veremos los restantes. Pero existe un problema: ¿cómo nuestro programa recordará cosas? Por ejemplo si escribimos “¡Lindo día para salir a pasear” + “!”.

Al presionar Enter vemos que nos retorna la misma frase que escribimos.

Si necesitamos usar nuevamente esta frase, tendremos que escribirla nuevamente.

Imaginémonos si tenemos que usar esta frase cientos de veces. Tendremos que repetir la frase por cada vez que queramos usarla.

Resulta molesto, ¿no? Se supone que las computadoras deberían ayudarnos. Para tomar y almacenar valores, JavaScript emplea algo llamado variable.

Una variable puede ser creada usando la palabra var, luego colocándole un nombre, para luego asignarle un valor por medio del símbolo = y el valor asignar, para finalizar con un ; (punto y coma) para indicar el fin de la sentencia.

Por ejemplo podemos crear una variable llamada saludo y asignarle como valor el string “Hola, ¿cómo estás?”. Para ello escribiremos en la consola:

var saludo = “Hola, ¿cómo estás?”;

Presionamos la tecla Enter.

Vemos que obtenemos como salida la palabra undefined. No nos preocupemos por eso por ahora.

Ahora vemos que si ingresamos en nuestra consola el nombre de la variable, en nuestro caso saludo, y presionamos la tecla Enter, veremos que la salida nos retornará el contenidos de la variable, el cual en nuestro ejemplo es “Hola, ¿cómo estás?”.

Que increible, ¿no? Como pudimos ver, las variables nos sirven para almacenar valores.

En la lección anterior vimos que para comparar si dos valores era igual usamos el triple símbolo de igualdad === en lugar de usar solo un símbolo de igualdad =

Esto se debe a que el símbolo = se utiliza para asignar un valor a una variable. Por ejemplo si escribimos 3 === 3 obtendremos el valor true (verdadero), el cual es el resultado de comparar si ambos valores son iguales.

En cambio si ingresamos 3 = 3, lo que estamos haciendo es asignarle el valor 3 a una variable llamada 3. si ingresamos 3 = 3 en la consola, vemos que obtendremos un error.

Existen reglas que debemos seguir a la hora de trabajar con variables. Los nombres de las variables no pueden iniciar con números. De esta manera, como pudimos ver, si ejecutamos var 3 = 3; obtendremos un error.

Pero si ejecutamos var tres = 3; veremos que la sentencia ingresada es válida. Si escribimos tres y presionamos la tecla Enter, veremos que nos retornará el valor 3.

Acabamos de ver la primer regla que debemos tener en cuenta para trabajar con variables: su nombre debe iniciar con una letra. Las nombres de las variables pueden finalizar con un número, pero necesitan iniciar con una letra.

Los nombres de las variables no pueden iniciar con un símbolo, por ejemplo si intentamos nombrar a una variable como &saludo obtendremos un error.

Los únicos símbolos con los que puede iniciar el nombre de una variable son el signo de moneda $ y el guión bajo _

El nombre de una variable, en el caso de que esté compuesto por más de una palabra, no puede contener espacios en blanco. Por ejemplo si queremos definir una variable que nos permite almacenar el primer nombre de una persona, podemos llamarla primernombre.

Existe una convención para definir nombres de variables, llamada camel case, a través del cual si el nombre de la variable está compuesto de muchas palabras, todas las letras se escriben con minúsculas, excepto la primera letra de todas las palabras a partir de la segunda palabra.

Por ejemplo una variable que haga referencia al primer nombre de una persona, usando camel case, podemos definirla como primerNombre.

Ahora veamos un pequeño truco e interesante truco llamado prompt. Escribamos prompt() en nuestra consola y presionemos la tecla Enter.

Vemos cómo se nos abre un ventana de diálogo modal que nos permitirá ingresar texto. Probemos ingresar el tema “Hola Mundo” y veremos cómo la salida de la sentencia nos devuelve el valor que ingresamos.

¿Qué tal si guardamos en una variable el valor ingresado a través de un prompt? Por ejemplo para pedir su nombre de usuario a una persona. Para eso podríamos escribir la siguiente sentencia: var nombreUsuario = prompt (“Ingrese su nombre de usuario”);

Si ahora revisamos el valor de la variable nombreUsuario vemos que contiene lo que ingresamos en el prompt.

Ahora intentemos hacer una calculadora. Para ello, comencemos primero definiendo dos variables, las cuales almacenarán los valores ingresados que van a ser operados. Llamaremos a estas variables primerNumero y segundoNumero.

La primer variable la definiremos con la sentencia: var primerNumero = prompt(“Ingrese el primer número”);
Luego de definir esto no presionaremos la tecla Enter, en su lugar mantendremos presionada la tecla Shift y recién presionaremos la tecla Enter.

Veremos que la sentencia no ha sido ingresada, pero ahora podremos escribir otro sentencia en la línea siguiente. De esta manera podremos ejecutar varias sentencias de una sola vez. En esta segunda línea definamos la segunda variable: var segundoNumero = prompt(“Ingrese el segundo número”);

Ahora presionemos Enter para ejecutar las sentencias.

En este caso, undefined nos indica que las sentencias que las sentencias han sido ingresadas.

Ahora vamos a chequear el valor de la variable primerNumero

Ahora chequemos el valor de la variable segundoNumero

Como podemos ver ambos valores, por más que sean números, se encuentran encerrados entre comillas dobles. Esto se debe a que prompt automáticamente define como String a todos los valores ingresados.

Si intentamos sumar ambos valores ingresados, veremos que al ser strings los va a concatenar uno al lado del otro, en lugar de sumarlos aritméticamente.

Por lo que antes de sumarlos, debemos convertir a estos dos valores String en Number (numéricos). JavaScript nos brinda una manera de hacer esto, lo único que debemos hacer es ingresar la siguiente sentencia: Number(nombreVariableString);

En nuestro caso, para convertir al primer número, ingresaremos la siguiente sentencia: Number(primerNumero);

Vemos que como resultado obtenemos el valor numérico, sin las comiilas dobles que antes nos indicaban que se trataba de un String.

Entonces ahora hagamos la suma aritmética y la guardemos en una nueva variable llamada resultadoSuma: var resultadoSuma = Number(primerNumero) + Number(segundoNumero);

Como podemos ver al ingresar esta sentencia no obtenemos el valor del resultado de la suma, en su lugar obtenemos undefined, ya que el resultado de la suma está almacenado en la variable resultadoSuma. Así que veamos el contenido de la variable resultadoSuma.

Veamos otra sentencia útil de JavaScript: alert.

alert lo que hace es imprimir un mostrar una ventana de diálogo con un mensaje ingresado por nosotros. Por ejemplo, ingresemos la siguiente sentencia: alert(“Hola Mundo”);

Vemos como se abre una ventana de diálogo que muestra el mensaje que escribimos dentro del alert.

Ahora, reuniendo todo lo aprendido hasta aquí, escribamos nuestro primer programa en JavaScript, compuesto por varias líneas de sentencias. Tengamos en cuenta que debemos mantener presionada la tecla Shift y presionar la tecla Enter para poder escribir una sentencia en la siguiente línea.

Nuestro programa solicitará dos veces el ingreso de un número, y luego mostrará el resultado de la suma en una ventana de diálogo:

var primerNumero =prompt(“Ingrese el primer número”);

var segundoNumero = prompt(“Ingrese el segundo número”);

var resultadoSuma = Number(primerNumero) + Number(segundoNumero);

alert(“El resultado de la suma es “ + resultadoSuma);

¡Felicitaciones! ¡Construimos nuestro primer programa en JavaScript!

Las variables pueden almacenar cualquier tipo de dato de JavaScript. Pensemos en las variables como pequeños cajones en nuestro escritorio, en los cuales podemos colocar lo que queramos dentro de ellos: lapiceras, papeles, carpetas, lápices, una calculadora.

Cada vez que guardamos algo en nuestro cajón, lo cerramos. Cuando necesitamos algo que se encuentra dentro del cajón, lo abrimos y tomamos lo que necesitamos.

Algo que hasta aquí hemos omitido de explicar son los puntos y coma que se encuentran al final de cada sentencia. ¿Por qué los necesitamos? En JavaScript los puntos y coma significan el final de una expresión o sentencia. ¿Qué significa eso? Un fragmento de código que produce algo, es considerado una expresión o sentencia.

Por ejemplo si escribimos un valor numérico como 4, es una expresión. Si escribimos 3+4 también es una expresión, la cual produce el valor 7. “Hola Mundo” también es una expresión. var palabra = “Hola” también es una expresión o sentencia.

Como pudimos ver cuando ingresamos de a una las sentencias, no es necesario colocar el punto y coma, pero sería bueno que nos acostumbremos a ello. En cambio cuando creamos un programa que posee varias sentencias, es obvia la necesidad de contar con los puntos y coma que nos permitan separar cada una de las sentencias.

Bueno, sigamos aprendiendo sobre las variables. ¿Qué sucede si definimos una variable y le asignamos el valor true? Probemos hacerlo: var a = true;

Como vemos el resultado undefined nos indica que la sentencia se ejecutó correctamente, creando la variable que queríamos. Si vemos el contenido de la variable a vemos que su contenido es true.

Por lo que podemos afirmar que esta variable es de tipo boolean ya que contiene un valor de ese tipo.

¿Qué sucede si ahora almacenamos “Hola” en la variable a? a = “Hola”;

No necesitamos añadir la palabra var al inicio, porque la variable a ya se encuentra definida.

Como vemos el contenido de la variable a ahora es “Hola”. Por lo que la variable a antes contenía un boolean y ahora contiene un string. Así es, una misma variable puede contener a lo largo de su existencia, distintos tipos de valores y de distintos tipos de datos.

Ahora, ¿qué sucede si solo definimos una nueva variable y no le asignamos ningún valor? var c;

Como vemos, la variable se define correctamente.

Ahora intentemos ver el contenido de la variable que acabamos de definir.

Como vemos el resultado es undefined. undefined es el cuarto tipo de dato que puede tomar una variable en JavaScript. Undefined implica que el valor de una variable no ha sido asignado.

Por ejemplo, si tenemos una variable que almacene la contraseña ingresada por una persona, y si esta persona no ingresa ningún valor, vamos a ver que la variable tendrá el undefined, y podremos indicarle al usuario que no ha ingresado una contraseña y que debe hacerlo.

Bueno, eso es todo por esta lección.

En las siguientes dos lecciones haremos ejercicios para poner en práctica todo los visto hasta ahora.

¡Adios!