03 - La variable

Variables en JavaScript
Índice

 La variable
 Tipos de datos
 Operadores aritméticos
 Operadores relacionales
 Constantes
 Prácticas

ALBERT BASSONS 2
La variable
 En nuestros programas resultará
imprescindible recordar algunos valores o
datos que serán utilizados repetidamente.

 Una variable es un espacio reservado en la

memoria del ordenador que nos permite
almacenar un valor.

 Las variables en JavaScript deben ser

declaradas antes de ser utilizadas, ya que es
en el proceso de declaración cuando se
reserva el espacio.

ALBERT BASSONS 3
La variable
 Las variables disponen de tipo, identificador y valor. Por
ejemplo, en el lenguaje de programación C se declara e
inicializa una variable entera así:

int resultado = 0;

 Sin embargo, en JavaScript, no se indica el tipo ya que se

determina dinámicamente:

var resultado = 0;

ALBERT BASSONS 4
La variable
 El valor almacenado no es fijo, puede variar con el tiempo. Una
variable puede ser leída y escrita múltiples veces durante el
transcurso de nuestro programa.

ALBERT BASSONS 5
La variable
 En el siguiente ejemplo, guardamos un número en una
variable y lo mostramos en un cuadro de diálogo.

 En este otro, guardamos una cadena de texto y la

mostramos de la misma forma.

ALBERT BASSONS 6
Ámbito de variables
 El ámbito o alcance de una variable es la porción de
código en la que existe. Fuera de su ámbito, la variable no
podrá ser accedida para lectura ni escritura.

 Existen por lo general dos ámbitos diferentes en los

lenguajes de programación: local y global, aunque también
puede existir el ámbito de sentencia de bloque (C, Java…).

 En JavaScript solamente existían los dos primeros, pero

ECMAScript 6 define también el ámbito de bloque, por tanto,
las nuevas versiones de JS también lo implementan.

ALBERT BASSONS 7
Ámbito de variables
 Ámbito global: en JS la variable
tendrá vigencia mientras esté abierta
la ventana del navegador.

 Ámbito local: la variable se

encuentra disponible solamente
dentro de la función en la que es
declarada.

 Ámbito de sentencia de bloque: la

variable existe solamente dentro del
bloque en el que ha sido declarada.

ALBERT BASSONS 8
Declarar variables
1. Con la palabra clave var, por ejemplo var numero = 5;
Esto sirve para variables locales y globales. Si declaramos
la variable fuera de cualquier función será global, en
caso contrario será local a la función en la que se declare.

2. JS también permite declarar variables solamente

asignándoles un valor, cosa que declarará una variable
global.

3. En las últimas versiones de JS se puede usar la palabra

clave let para declarar variables locales de bloque (ES6,
podemos encontrar problemas de compatibilidad).

ALBERT BASSONS 9
Ejemplo

ALBERT BASSONS 10
Tipos de datos

 Las variables pueden guardar valores de diferentes tipos (números,

textos, valores booleanos…). Una variable solamente puede
guardar valores del tipo de datos con el que ha sido declarada.

 Sin embargo, JS dispone de determinación dinámica de tipos, lo

que significa que no tenemos que indicar el tipo de datos en la
declaración, puesto que se calculará dinámicamente en tiempo
de ejecución. Además en JS una variable podrá contener valores de
tipos diferentes a lo largo de la ejecución del programa.

 Esto puede parecer que simplifica el trabajo pero, la realidad es que

complica su depuración.

ALBERT BASSONS 11
Tipos de datos

 Sea como sea, debemos

tener bien claro los tipos
de datos disponibles y sus
características para poder
trabajar con cualquier
lenguaje de programación.

ALBERT BASSONS 12
Tipos de datos
 String: cadenas de texto.
 Number: números. En JS todos los números se encuentran
en coma flotante de 64 bits de precisión (double). Existen
también tres valores adicionales para representar NaN,
+Infinity y –Infinity.
 Boolean: true/false (verdadero/falso).

 Array: es una lista de elementos de otros tipos.

 Object: objeto.
 Null: nulo.
 Undefined: no definido.

ALBERT BASSONS 13
Ejemplo

Si no hubiéramos inicializado la
variable, su valor también sería
undefined.

ALBERT BASSONS 14
Tipos dinámicos
 Para el programador experto, no resulta
buena idea que JavaScript asigne los tipos
de datos a su antojo, puesto que provoca
errores de programación.

 Por ejemplo, programo operaciones con

una variable asumiendo que es de tipo
numérico, y resulta que JavaScript la
determinó como cadena de texto. Esto
seguramente provocará que los resultados
del programa sean incorrectos.

ALBERT BASSONS 15
Interactuando con el usuario
 Para recuperar información introducida por el usuario desde
JavaScript, podemos usar inputs de HTML. Los valores
leídos pueden ser guardados en variables.

 Recordemos que JavaScript y HTML son dos cosas

diferentes, pero desde JavaScript podremos acceder a
todos los elementos HTML del documento.

 La forma más simple para recuperar un elemento HTML del

documento, que podemos comenzar a usar ya, el método
document.getElementById(‘id’);

ALBERT BASSONS 16
Interactuando con el usuario
 También podemos mostrar información en el interior de los
elementos HTML.

ALBERT BASSONS 17
Ejemplo

ALBERT BASSONS 18
Interactuando con el usuario
 En el ejemplo anterior, hemos tenido que usar la función
parseInt() para que la operación se ejecutara
correctamente. Esta función convierte una cadena de texto
en número entero.

 Los valores que se toman de un input HTML son cadenas

de texto y JS los trata como tal.

 Deberíamos usar parseInt() y parseFloat() si

queremos asegurarnos que trabajaremos con números
enteros o con decimales respectivamente.

ALBERT BASSONS 19
Interactuando con el usuario
 Para controlar el tipo de las variables que llegan por un
input, podemos hacer lo siguiente:

ALBERT BASSONS 20
Ejemplo

ALBERT BASSONS 21
Consideraciones

 Se permite declarar varias variables en la misma sentencia.

 Si no inicializamos una variable, su valor es undefined.

undefined

ALBERT BASSONS 22
Operadores aritméticos

 Si podemos tener variables que almacenan valores

numéricos, es lógico pensar en que debemos poder
realizar operaciones con ellos.

 La suma, resta, multiplicación y división se pueden

realizar con los operadores +, -, * y / respectivamente.

 La operación módulo (resto de la división) se realiza con

el operador %.

ALBERT BASSONS 23
Operadores aritméticos

ALBERT BASSONS 24
Operadores aritméticos
 Los operadores compuestos son: +=, -=, *=, /= y %=.

Ejemplo: resultado+=2; suma 2 al valor de resultado y lo

guarda en la misma variable.

 Existen también los operadores ++ y - -, que sirven para

incrementar o decrementar en 1 el valor de la variable.

Varían de significado en función de si se colocan delante o

detrás de la misma.

Ejemplo:
resultado++; //postincremento
++resultado; //preincremento

ALBERT BASSONS 25
Ejemplos

ALBERT BASSONS 26
Operadores aritméticos
 ¡Ojo con las divisiones! (Se pueden producir divisiones por cero).

 ¡Ojo con la precedencia de los operadores!

 ¡Ojo con la inicialización de variables!

ALBERT BASSONS 27
Operadores relacionales
 Los operadores relacionales nos permiten conocer qué
relaciones existen entre dos cantidades. Devuelven
verdadero o falso.

Operador Significado
< Menor que
<= Menor o igual a
> Mayor que
>= Mayor o igual a
== Igual a
!= Diferente de
=== Igual a (valor y tipo)

ALBERT BASSONS 28
Operadores relacionales

ALBERT BASSONS 29
Operadores relacionales
 En algunos lenguajes verdadero se identifica mediante el
valor entero 1, mientras que el valor 0 se usa para indicar
que algo es falso (PHP, C…).

 Otros lenguajes de programación, como es el caso de Java

y JavaScript, no trabajan de esta manera y usan valores
true y false en estas relaciones.

 Esto servirá como fundamento para poder tomar

decisiones.

ALBERT BASSONS 30
Operadores relacionales

ALBERT BASSONS 31
Constantes
 A veces querremos guardar valores que no se modificarán en
el transcurso de todo el programa, serán valores constantes.

 Una variable será constante si no la modificamos en ningún

punto.

 Pero hay una solución mejor: podemos usar la palabra

reservada const para marcar la existencia de una variable.

ALBERT BASSONS 32
 Ejercicios
Variables en JavaScript
La variable
Prácticas

1. Crea una web que nos calcule el perímetro, el área y el

diámetro de una circunferencia a partir de su radio.

El radio debe ser introducido por el usuario mediante un

input de formulario HTML.

Perímetro = 2 * PI * r
Área = PI * r2
(PI vale 3,1416)

ALBERT BASSONS 34
La variable
Prácticas

2. Escribe un programa que calcule el área de un triángulo

rectángulo, dada la altura y la base.

3. Escribe un programa que convierta de grados Fahrenheit a

grados Celsius.

4. Escribe un programa que convierta de kilómetros a millas.

5. Escribe un programa que nos diga si un número es par o no,

escribiendo “true” o “false” en el documento (piensa en
utilizar el operador módulo %).

ALBERT BASSONS 35
La variable
Prácticas

6. En correos quieren un calculador de tarifas para los

paquetes certificados.

 El coste base es de 2.5 euros.

 Al coste base hay que sumar 0,25€ por cada cm3.
 También hay que sumar 0.50€ por cada 100 gramos de
peso.
 El funcionario solamente dispone de un metro para medir
el paquete y una báscula para comprobar el peso.

NOTA: el incremento del precio será por tramos, no lineal.

¿Cuánto cuesta un envío de 10x5x10 cms y 2 kg de peso?

ALBERT BASSONS 36
La variable
Prácticas

7. Tengo un coche que consume

5,5 litros de gasoil cada 100 kms
cuando voy por carretera pero
9,8 por ciudad y sé que el gasoil
está a 1,39 €/litro.

Quiero realizar un programa que

me calcule cuánto me costará
cada viaje que haga, en función
del número de kms por carretera
y por ciudad que hay hasta mi
destino.

ALBERT BASSONS 37