Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

4. Estructuras básicas (II)

4.2 Arrays

Definición

Un array es una lista o colección de datos o variables, los cuales se guardan con un solo nombre. Luego podremos acceder a cada uno de los datos indicando el nombre del array y su posición.

Creación de Arrays

Hay varias formas de crear un array, la más simple es indicar el nombre del array y asignar valor a sus elementos. Ejemplo:

var direccion = ["norte","sur","este","oeste"];

Hemos creado aquí un array con sus elementos ya definidos. Para crear el array lo hemos hecho igual que una para una variable (palabra reservada var), pero para definir sus elementos los hemos puesto entre corchetes y separados por comas.

En el array anterior todos sus datos son cadenas de texto, pero un array puede contener varios tipos de datos distintos: de cadena, numéricos, booleanos, incluso otros arrays. Por supuesto también podemos incluir los datos mediante variables.

Pero también podemos crear un array sin necesidad de definir los elementos que va a contener, mediante la instrucción new Array. (observa que la palabra Array debe ir en mayúscula)

var semana = new Array(7);

En este caso hemos creado un array con siete elementos, aunque cada uno de estos elementos está vacío. observa que cuando ponemos la instrucción new Array ponemos el número de datos que pasamos al array dentro del paréntesis

También podemos crear un array con un número indefinido de elementos, o en principio sin elementos, los cuales podemos ir añadiendolos más tarde:

var clientes = new Array();

Por último también podemos pasar los datos al array mediante la instrucción new Array

var datos = new Array(5,7,"arriba","abajo",true,false);

Acceso a los datos de un array

Para acceder a un dato concreto de un array escribiremos el nombre del array y luego entre corchetes la posición que tiene ese dato en el array. Para saber la posición que tiene hay que tener en cuenta que esta se empieza a contar desde el numero cero ( 0 ) , así para acceder al primer elemento del array llamado datos escribiremos:

dato1 = datos[0];

para acceder al segundo elemento del array escribiremos:

dato2 = datos[1];

Y así sucesivamente; es necesario insistir en que al acceder a los elementos de un array estos se empiezan a contar por el cero, ya que esto puede ser causa de algunos errores.

También podemos cambiar o crear elementos de un array simplemente dándoles un valor. Ejemplo:

clientes[5] = "Juan Pérez";

Al dar un valor a un elemento de un array, tal como en el ejemplo anterior, pueden ocurrir varios casos:

• Que ese dato ya tuviera un valor asignado anteriormente: En este caso el valor antiguo es sustituido por el nuevo.
• Que el dato no tuviera un valor asignado, pero el array es más largo de lo que indica la posición de ese dato: En este caso el dato es guardado en la posición indicada.
• Que el array sea más corto de la posición que indica el dato: (por ejemplo un array con 3 datos le pasamos un dato en el lugar 6º) El array se alarga automáticamente hasta esa posición, insertando ahi el dato, y dejando los datos anteriores vacíos si fuera necesario.

Así por ejemplo si escribimos

var productos = new Array(3);
productos[7] = "tomates";

De manera automática el array pasa a tener 8 elementos (recuerda que el primero es el 0).

acceder al número de elementos de un array

A veces interesa saber el número de elementos que tiene un array, para ello utilizamos la instrucción length la cual es una propiedad, por lo que la pondremos despues del nombre del array y separada por un punto.

var longitud = datos.length;

En este caso el valor de longitud será un número que nos indica el número de elementos que tiene el array datos.

La propiedad length también puede aplicarse a cadenas de texto, en este caso nos indicará el número de carateres que tiene un texto. Un sencillo script que nos demuestra esto podría ser el siguiente:

var texto = prompt("Escribe un texto");
var longitud = texto.length;
alert("tu texto tiene " + longitud + " caracteres");

Para ver como funciona este script pulsa en el siguiente botón

pulsa para ver longitud del texto

Ejemplo de uso de array en un script

Para acabar la página daré un ejemplo en el que se usa un array para definir los distintos textos que deben aparecer en la página. Utilizaremos también los eventos onmouseover y onmouseout El primero activa el código cuando el ratón pasa por encima de un elemento, y el segundo lo activa cuando el ratón deja de estar encima del elemento.

El código de la página es el siguiente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Arrays.</title> 
<style type="text/css">
   h1 { font: bold 2em garamond; color: navy; text-align: center; }
   p { font: bold 1.1em arial; text-align: center; }
   #respuesta { font: bold 1.5em verdana; color: purple; text-align: center; }
   #rojo, #amarillo, #verde, #azul { width: 225px; height: 225px; border: 1px solid black; margin: 10px; float: left }
   #rojo  { background-color: red; }
   #amarillo  { background-color: yellow; }
   #verde  { background-color: green; }
   #azul  { background-color: blue; }
</style>
</head>
<body>
<h1>Te puedo decir dónde tienes el puntero del ratón:</h1>
<p>El ratón esta ahora encima del siguiente cuadrado:</p>
<h2 id="respuesta">ninguno</h2>
<div id="rojo" onmouseover="texto.innerHTML = colores[1]" onmouseout="texto.innerHTML = colores[0]"></div>
<div id="amarillo" onmouseover="texto.innerHTML = colores[2]" onmouseout="texto.innerHTML = colores[0]"></div>
<div id="verde" onmouseover="texto.innerHTML = colores[3]" onmouseout="texto.innerHTML = colores[0]"></div>
<div id="azul" onmouseover="texto.innerHTML = colores[4]" onmouseout="texto.innerHTML = colores[0]"></div>
<script type="text/javascript">
var colores = ["ninguno","rojo","amarillo","verde","azul"];
var texto = document.getElementById("respuesta")
</script>
</body>
</html>

Para ver la página de este ejemplo pulsa en el siguiente enlace:

Ejemplo con Array

Hemos usado un array para definir los diferentes valores que puede tener el texto que va cambiando.

Hemos visto aquí otros dos eventos (atributos en HTML que sirven para producir los cambios que indica el código javascript.). onmouseover activa el código javascript cuando el ratón pasa por encima del elemento, y onmouseout lo activa cuando el raton deja de estar encima del elemento.

Aunque ya hemos visto hasta ahora algunos eventos en los ejemplos que ponemos, onclick, onmouseover, onmouseout, dedicaremos más adelante un tema para verlos más detenidamente.

En la siguiente página veremos otro tipo de estructuras, las funciones.

Funciones

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com