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.