Variables
- 1. Variables Las variables son el elemento más básico e importante de un lenguaje de programación. Antes que nada, hay que conocer qué tipos de variables hay y como funcionan. Realmente, son muy similares en casi todos los lenguajes existentes. Dichas variables sirven para almacenar valores. Vamos a conocer las variables más utilizadas. En javascript tenemos la ventaja de que no hace falta indicarle qué tipo de variable estamos creando. Es decir, no hace falta indicar que la variable tenga que ser un número entero o una cadena de caracteres; simplemente se inicia con el valor que queramos directamente. Para crear variables utilizaremos el comando "var" <nombre_variable>. Pongamos ejemplos para entenderlo. var nombre = 'Pepe'; Así se declaran y asignan valores a las variables. En este caso, hemos asignado el nombre de "Pepe" que es una cadena de caracteres. Pero como javascript no distingue de tipos (esto es muy bueno), podemos asignar valores numéricos, decimales, booleanos (true o false), etc... Creando variables de distinto tipo... Hemos creado 4 variables, y si os fijáis cada una con un tipo de valor diferente. Si abrimos este ejemplo con el navegador, veremos que no ocurre nada. Porque las variables están creadas y asignadas, pero el sistema las tiene guardada en memoria sin más. Para saber qué valor contiene cada variable es necesario mostrarlas por pantalla, y lo vamos a aprender en la siguiente lección. Mostrar variables Ya hemos visto la creación de variables en javascript, y como podemos asignarle valores a esas variables. Pero claro, si no mostramos ese contenido y no sabemos acceder a él, los valores no nos servirían de nada. Ahora aprenderemos a mostrar el contenido de esas variables por pantalla. Siguiendo con las variables del ejemplo anterior, vamos a mostrarlas a través de la función write.
- 2. Se muestra el valor de cada variable. El "<br>" en HTML significa salto de línea, por eso lo ponemos así, para que se muestre de forma más visual, un valor por línea. Ahora, si abrimos este ejemplo en el navegador, obtendremos el siguiente resultado: Podéis trastear un poco con las variables, y modificar sus valores para ir comprendiendo su funcionamiento. Datos por teclado Hasta el momento el valor de las variables lo hemos introducido nosotros a mano, pero en ocasiones necesitamos que sea el propio usuario el que introduzca los valores de ciertas variables. Para ello utilizaremos la función prompt. Vamos a crear 2 variables, "nombre" y "altura" y hagamos que el usuario sea el que introduzca los valores. Se realiza de la siguiente forma: Creamos las variables como ya sabemos: Ahora, tenemos que hacer que el usuario les de valor a esas variables, con sus datos, utilizamos la función de la siguiente forma: Esta función funciona de la siguiente forma: prompt ('<Texto que se muestra al usuario>', '<valor por defecto>') => El valor por defecto se refiere al que aparece en la caja de texto donde escribe el usuario, por eso lo dejamos vacío ' '. Y escribiendo la variable "nombre" = , lo que hacemos es asignar el valor que escribe el usuario a esa variable. Ya solo nos queda mostrar por pantalla los datos de las variables: Lo mostramos por pantalla con document.write como hemos aprendido anteriormente.
- 3. Estructuras condicionales simples La sentencia IF no es más que una sentencia condicional, o sea, que si se cumple "x" condición, el programa hace una cosa, y si no se cumple, el programa hace otra. Las sentencias IF se construyen de la siguiente forma: if (condición) { instrucciones... } Dichas instrucciones solo se ejecutarán si se cumple la condición del IF. Lo vamos a entender mejor con el siguiente ejemplo : Pedimos al usuario que introduzca nombre y edad. Y comparamos con el IF, que si su edad es mayor o igual que 18, es mayor de edad. En el ejemplo que he puesto es edad >= 18. Bien, estos operados que he utilizado para la condición, son operadores de comparación. Los operadores de comparación son los siguientes: Operador Uso Devuelve verdadero si > op1 > op2 op1 es mayor que op2 >= op1 >= op2 op1 es mayor o igual que op2
- 4. < op1 < op2 op1 es menor que op2 <= op1 <= op2 op1 es menor o igual que op2 == op1 == op2 op1 y op2 son iguales != op1 != op2 op1 y op2 son distintos Esos son los distintos operadores que se pueden utilizar para comparar. Este programa solo muestra algo por pantalla si se cumple la condición, en caso de que el usuario no sea mayor de edad, no ocurriría nada. Esto se puede completar de alguna forma, y lo veremos en la siguiente lección. Las condiciones compuestas. Fijaos que a la hora de mostrar por pantalla que el usuario es mayor de edad, hemos utilizado el operador "+", que sirve para concatenar cadenas de caracteres. Estructuras condicionales compuestas Ahora vamos a hacer que, pase lo que pase, el programa muestre algo por pantalla. En el caso anterior, si no se cumplía la condición, no se mostraba nada. ¿Como hacemos esto? Añadiendo al IF la cláusula ELSE. . De esta forma:
- 5. Ahora, si el usuario introduce una edad menor a 18, el programa ejecuta las instrucciones que haya dentro del ELSE { ... }. Ejercicio nº 1 A lo largo del curso, voy a ir introduciendo ejercicios, para que vayáis poniendo en práctica todo lo aprendido anteriormente. Porque por más teoria y práctica que se explique, cuando realmente se aprende a programar es programando, no hay otra opción más fiable que esa. A continuación, os propongo el enunciado del ejercicio: Escribe un programa con 2 variables, las cuales deben introducir el usuario su valor. Una vez introducidos los valores, pueden ocurrir tres cosas: - Que el número 1 sea mayor que el número 2. - Que el número 2 sea mayor que el número 1. - Que los números sean iguales. El program debe mostrar por pantalla cual de las 3 opciones se ha cumplido. Así tiene que quedar el ejercicio: Solución ejercicio nº 1 ¿Has sido capaz de crear el programa por ti mismo? ¡Muy bien! Aquí tenemos la solución... Este programa lo vamos a dividir en dos secciones; primero la creación de variables y como pedir al usuario que introduzca los valores, y luego las comprobaciones. Creamos las variables y pedimos al usuario que introduzca los números:
- 6. Ahora, dependiendo de qué valores haya introducido, ocurrirá una cosa u otra. Como decía el enunciado del ejercicio, pueden ocurrir 3 cosas, es decir, que tendremos que hacer 3 sentencias IF. A continuación vemos como queda: Puedes investigar la forma de como hacerlo con IF...ELSE...IF. En cualquier caso, el programa funciona tal y como nos indicaba el enunciado del ejercicio. He puesto la solución más sencilla, pero hay más formas de hacerlo. Bien, ya has hecho tu primer ejercicio en Javascript sin ayuda.