Una tabla es un conjunto de datos del mismo tipo. Ya hemos visto anteriormente la forma de utilizar variables, por ejemplo NOMBRE. Esta variable nos serviría para guardar un solo dato (un único nombre en este caso). Si utilizamos la misma variable para introducir otro nombre, el primero desaparecerá machacado por el segundo:
var Nombre = "Juan"
Nombre="Ana"
Después de ejecutar este código, la variable Nombre será igual a "Ana", el valor "Juan" se ha perdido. Podríamos solucionarlo utilizando múltiples variables:
var Nombre1, Nombre2, ...
Pero supongamos que necesitas almacenar decenas, centenas o incluso miles de nombres ... ¡Tendríamos que definir miles de variables!
Si utilizamos una tabla, podremos introducir varios valores sin que se pierda ninguno:
nombres= new Object(50);
De esta forma estamos definiendo una tabla de 50 elementos nombres. Es como si hubiéramos definido 50 variables de una sola vez. El primer elemento ocupa la posición 0 y el último, en este caso, 49.
Para utilizar estas variables podríamos hacerlo de la siguiente forma:
El número que aparece entre corchetes es el índice de la tabla.
En realidad nos habría dado igual definir la tabla sin indicar el número de elementos:
Nombre=new Object();
Ya que JavaScript se adapta automáticamente al número de elementos que vayamos introduciendo, sean 10, 50 o 100
Gracias a este índice podemos crear un bucle para introducir los 50 nombres:
for (i=0; 1<=49; i=i+1) {
nombres[i] = prompt("Introduce el nombre " + i);
}
Este bucle nos iría pidiendo los 50 valores para la tabla nombres(), ya que i va tomando valores desde 0 hasta 49. (Si no sabes cómo se crean los bucles, quizás deberías consultar el apartado correspondiente).
Ten en cuenta que hemos creado una tabla con 50 valores, pero no necesariamente tenemos que rellenar los 50. Quizás nos interese introducir sólo 10 y dejar los demás para otra ocasión.
Existe una segunda opción para crear tablas muy parecida a la anterior: Array
Nombre= new Array()
¿Cuál es la diferencia entre new Array() y new Objetc()?. Array es más nuevo que Object, lo que significa que no funcionará en Navegadores antiguos (Netscape 2.0 o anterior o Internet Explorer 3.0 o anterior), versiones que, por otra parte, probablemente ya nadie tenga en uso.
Por otro lado, Array, al ser más nuevo, tiene una serie de ventajas que no tiene Object. Una de ellas es la propiedad length, que nos dice cuántos elementos tiene la tabla:
Creación de Arrays y asignación de valores.
Los Arrays se crean de modo similar a como hemos visto con las tablas:
El código anterior va a crear una tabla nueva llamada nombres, a continuación se introducen tres elementos en la tabla. Por último, nombres.length muestra el número de elementos que existen en la tabla (en este caso deben aparecer 3).
length no funcionará si utilizas Object en lugar de Array.
No obstante, si conocemos de antemano los elementos que va a tener y el valor de los mismos, podemos introducir estos valores en el momento de su creación separando por comas cada uno de sus componentes:
var dias_semana = new Array("lunes", "martes",
"miércoles", "jueves", "viernes",
"sábado", "domingo);
De cualquier modo, podemos modificar los valores existentes o introducir otros asignando un valor al elemento que ocupa una determinada posición.
Acceder a los elementos de la tabla.
Para hacer referencia a un elemento concreto, se pone el nombre de la variable donde hemos guardado el Array y, entre corchetes la posición del elemento, teniendo en cuenta que el primer elemento ocupa la posición cero (0). Gracias al índice de una tabla podemos acceder a cualquier elemento. Veamos el siguiente ejemplo:
var meses = new Array();
meses[11]= "Diciembre";
// asignar un valor
meses[11]="diciembre";
// obtener un valor
var mes = meses[12];
var dia = dias_semana[10];
Si, como en el ejemplo anterior, intentamos acceder a un elemento que no tiene valor (meses[5]), o intentamos acceder a un elemento que no existe en el Array el valor devuelto es undefined.
En el ejemplo anterior, sí que hemos introducido un elemento en la posición 11, luego el Array meses tiene 12 elementos, pero los anteriores no tienen valores, no están definidos. Del mismo modo al definir la variable dia estamos pidiendo que nos dé el valor de un elemento que no existe pues el último elemento de dicho Array es dias_semana[6]="domingo".
<SCRIPT LANGUAJE="JavaScript">
nombres= new Array();
telefono= new Array();
var i
for (i=0; i<=3; i=i+1) {
//Guardamos lo que escribe en el Array nombres
nombres[i]= prompt ("Introduce nombre " + (i+1));
//Guardamos lo que escribe en el Array telefono
telefono[i]=prompt ("Introduce teléfono " + (i+1));
}
document.write("<font color='white'>");
document.write("<table border=1 bgcolor=steelblue>" +
"<tr><th colspan=2>" +
"Lista de Nombres y Teléfonos" +
"</th></tr>");
for (i=0; i<=3; i=i+1) {
//Escribimos en una celda el nombre de la posición i
document.write("<tr><td>" + nombres[i] + "</td>");
//Escribimos en una celda el teléfono de la posición i
document.write("<td>"+telefono[i] + "</td></tr>");
}
document.write("</table></font><br />" + "Fin del listado");
</SCRIPT>
El anterior programa utiliza la variable i para pedirnos 5 nombres y 5 teléfonos. A continuación, se muestran los datos introducidos en la ventana del navegador utilizando otro bucle.
Métodos.
join(). Agrupa los elementos en una cadena separándolos por comas.
join(separador). Agrupa los elementos en una cadena separándolos por el carácter indicado como separador.
pop(). Borra y devuelve el último elemento del Array.
push(). Añade un elemento al Array y lo devuelve.
reverse(). Invierte el orden de los elementos(el último pasa a ser el primero y el primero el último).
shift(). Borra y devuelve el primer elmento de un array
slice(inicio, fin). Extrae una sección de un array y la devuelve como un nuevo array:
otro_array tendrá dos elementos: jueves (que es el que ocupa el lugar 3) y viernes, ya que sábado ocupa la posición 5 y éste es excluído.
splice(indice, nEltos, ). Añade y/o elimina elementos de un Array.
var numeros = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
var arrSplice = numeros.splice(2, 3, "uno", "dos",
"tres", "cuatro");
En la segunda línea hemos indicado que en la posición 2 (el número 2) sustituya tres elementos de los existentes (2, 3 y 4) por los elementos numerados a continuación ("uno", "dos", "tres", "cuatro") siendo conservados el resto de los elementos del Array, con lo que numeros ahora tiene los siguientes elementos: (0, 1, "uno", "dos", "tres", "cuatro", 5, 6, 7, 8, 9).
Al hacer el splice hemos definido la variable arrSplice que, pro lo tanto, contiene los elementos eliminados (2, 3, 4).
sort(). Devuelve de manera ordenada los elementos. En el caso de tratarse de cadenas el resultado será el que se obtenga de sumar la posición en el código ASCII de cada uno de los caracteres.
dias_semana = new Array("lunes", "martes", "miércoles",
"jueves", "viernes", "sábado", "domingo");
dias_semana.sort() = ("domingo,jueves,lunes,martes,
miércoles,sábado,viernes")
var numeros = new Array(0, 7, 5, 4, -20);
numeros.sort() = (-20,0,4,5,7)
toString(). Devuelve una cadena que representa al Array.
unshift(). Añade uno o más elementos al comienzo de un array y devuelve el número actualizado de elementos.
var numeros = new Array(0, 1, 2, 3, 4);
numeros.unshift(5, 6, 7);
numeros ahora contiene los siguientes elementos: (5, 6, 7, 0, 1, 2, 3, 4), pues ha añadido 5, 6 y 7 al inicio.
