 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Enlace aleatorio Javascript
Creamos un enlace que nos lleva a cualquier URL aleatoriamente, entre varias posibilidades.
17/4/02 - Vamos a crear un efecto típico en páginas web que consiste en un enlace que nos llevará a un sitio escogido de manera aleatoria. Para hacerse una idea exacta podemos ver el ejemplo en funcionamiento.
Para ello vamos a utilizar Javascript. Aunque por algunas razones no es el mejor lenguaje para hacer este ejercicio, si que va a resultar extremadamente simple y creemos que instructivo para los lectores.
Para empezar, vamos a crear un array con los distintos sitios hacia donde nos podría conducir nuestro enlace. Este array lo tenemos que definir, lógicamente, dentro de un bloque <script> en la propia página web. La razón por la que Javascript no es el mejor lenguaje para este ejercicio es justamente esta, que tenemos que escribir en la página todas las posibles direcciones y un usuario avanzado podría leer el código de la página y encontrar todas las opciones escritas en el array.
Esa declaración del array sería algo parecido a esto.
var direcciones = new Array("http://www.terra.es","http://www.ozu.es","http://www.hispavista.com")
Como se puede ver, en la misma línea en la que se declara el array se introducen los valores de cada una de sus casillas, utilizando el método rápido de declaración y llenado de arrays en Javascript. Cuantos más valores escribamos, más aleatorio será el ejercicio, pudiendo colocar más enlaces sin tener que editar el resto del código del programa. En nuestro ejemplo completo tenemos una lista mucho mayor de enlaces.
Continuamos colocando el enlace que se presentará como "Enlace Aleatorio", que nos llevará a un sitio aleatorio, dentro de las posibilidades.
<a href="javascript:enlaceAleatorio()">Enlace Aleatorio</a>
Como vemos, el enlace se encarga de llamar a una función que será la que extraiga una URL del array anterior y nos traslade a ese lugar. La función tendrá esta forma:
function enlaceAleatorio(){
aleat = Math.random() * direcciones.length
aleat = Math.floor(aleat)
window.location=direcciones[aleat]
}
Como se puede ver, lo primero que hace la función es obtener un valor aleatorio entre 0 y "direcciones.length", que es el número de URLs de nuestro array. Si cambiamos el número de URLs del array este script seguirá funcionando perfectamente, porque los límites se extraen directamente de la propiedad length del array que contiene las direcciones.
Para obtener ese número aleatorio se utiliza el método random de la clase Math, que develve un número entre 0 y 1. Al multiplicarlo por el número de posiciones del array obtenemos un número entre 0 y el número de posiciones del array. Pero este número está en coma flotante, es decir, es un número decimal, que no nos sirve como índice de un array. Por eso le aplicamos el método floor, también del objeto Math, para obtener la parte entera de ese número.
Por último se actualiza la propiedad location del objeto window con el valor del array en la posición aleatoria, lo que hace que el navegador se dirija a la página aleatoria, dentro de las distintas posibilidades.
Ejemplo completo
Para ver de manera global este ejercicio transcribimos aquí todo el código utilizado.
<html>
<head>
<title>Enlace Aleatorio</title>
<script>
var direcciones = new Array("http://www.terra.es", "http://www.ozu.es", "http://www.hispavista.com", "http://www.lycos.com", "http://www.yahoo.es", "http://www.altavista.com", "http://www.hotbot.com", "http://www.buscopio.com", "http://www.sol.es", "http://www.excite.com", "http://www.elbuscador.com", "http://www.ya.com", "http://www.wanadoo.es", "http://www.buscador.com.mx", "http://www.msn.com", "http://www.astrolabio.net")
function enlaceAleatorio(){
aleat = Math.random() * direcciones.length
aleat = Math.floor(aleat)
window.location=direcciones[aleat]
}
</script>
</head>
<body>
<a href="javascript:enlaceAleatorio()">Enlace Aleatorio</a>
</body>
</html>
Si se quiere ver el ejemplo en marcha se puede pulsar este enlace.
+ 1 categoria relacionada
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Comentarios de los visitantes |
|
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario. |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
