Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 35
Visitas el mes pasado: 93
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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);
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:
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).
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
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:
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.
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