Unidad 10. Avanzado: JavaScript. Variables


Valores

En informática, una variable es una estructura de datos, cuyo valor puede cambiar durante la ejecución de un programa.

Es decir, en una variable es un nombre simbólico que podemos utilizar para guardar un dato.

JavaScript tiene tres tipos de valores: numéricos, texto y valores lógicos (true o false). En los valores numéricos se emplea el punto como separador decimal. Los valores de texto o cadenas van siempre entre comillas, dobles o simples. Los valores lógicos se expresan con las palabras reservadas TRUE o FALSE, o con 1 y 0.

Podemos emplear las variables directamente, por ejemplo:

nombre = 'Juan';
edad = 25;

Esto es lo que se llama declaración implícita. También podemos declararlas primero, precediendo la variable de la palabra reservada var. Esto es lo que se denomina declaración explícita.

var nombre;
nombre = 'Juan';
var edad = 25;

La declaración explícita de las variables no es obligatorio.. Principalmente se hace porque si operamos con una variable declarada, pero sin valor, se obtiene un resultado indefinido, y se sigue ejecutando el script. En cambio, si la variable no ha sido declarada ni se le ha asignado un valor, al operar produciría un error, y no se seguiría ejecutando el resto de código JavaScript.

Operamos con las variables como lo haríamos directamente con los valores. Por ejemplo:

alto = 10;
ancho = 20;
area = alto * ancho;

Objetos

JavaScript es un lenguaje orientado a objetos. Un objeto, es un elemento que tiene una serie de propiedades y métodos.

No vamos a entrar en detalle de qué es un objeto, ya que no es el objetivo del curso. Solo diremos que a una variable le podemos asignar un objeto. Por ejemplo, si queremos cambiar varias propiedades de un elemento de la página, utilizando si ID, podríamos emplear una variable:

var elemento = document.getElementById('id_elemento');
elemento.style.color = blue;
elemento.style.width = '100px';
elemento.style.height = '90px';

Esto muchas veces nos simplificará el trabajo.

Array

Un array o vector, es una variable que tiene varias posiciones, y cada una puede tener un valor distinto.

Por ejemplo, tenemos nombre, edad y nota de un alumno. Vamos a guardarlo todo en una array llamado alumno.

Primero hay que crear el Array, con la siguiente sentencia:

alumno = new Array();

Una vez creado, podemos acceder a sus posiciones con índices numéricos. Los índices los indicaremos con corchetes [ ]. Por ejemplo:

alumno[1] = 'Juan';
alumno[2] = 25;
alumno[3] = 8.5;

En este caso hemos utilizado las posiciones 1, 2 y 3, pero podríamos haber empleado cualquiera, comenzando por la 0.

Se pueden asignar los valores directamente al crearlo, si escribimos los valores como parámetros de Array().

alumno = new Array('Juan', 25, 8.5);

Al hacerlo así, el primer índice empleado es el 0, por lo que 'Juan' estará en alumno[0] y 25 en alumno[1].

En vez de índices numéricos, podemos utilizar palabras (array asociativo):

  alumno['nombre'] = 'Juan';
alumno['edad'] = 25;
alumno['nota'] = 8.5;

Ámbito de la variable

El ámbito es el límite en el que podemos utilizar una variable.

Podríamos decir que tenemos dos tipos de variables, locales y globales.

Una variable local, es la que declaramos dentro de una función, y sólo existe dentro de ella. Es decir, si le asignamos un valor, y en otra función empleamos una variable con el mismo nombre, no tendrá el valor asignado, porque son dos variables totalmente distintas, cada una local a su función.

Una variable global, se declara fuera de las funciones, normalmente en el head de la página. Podemos utilizarla en cualquier función.

var nombre;


function asignarNombreEdad(){
   nombre = 'Juan';
   edad = 25;
}

function devolverNombre(){
   return nombre;  // Devolverá 'Juan'
}
function devolverEdad(){
   return edad;  // Produce un error, porque edad no está definido
}

En el ejemplo anterior, como nombre está declarado fuera de las funciones, cualquiera puede cambiar su valor o mostrarlo. Es global.

En cambio edad es local a la primera función, por lo que la última "no sabe" qué es edad.

   Inicio    





.