Manual de Javascript

 
 
 

Mapa Web

 
borde   borde
Portada Lista de Códigos JavaScript Enlace aleatorio con JavaScript

 

Enlace aleatorio con JavaScript Imprimir E-mail
Creamos un enlace que nos lleva a cualquier URL aleatoriamente, entre varias posibilidades.

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 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>

Miguel Angel Alvarez
http://www.desarrolloweb.com/articulos/751.php?manual=22

 

 
Portada
Capítulos del Manual de JavaScript
Introdución
Javascript para aplicaciones cliente
Javascript en documentos HTML
Archivos de código Javascript
Javascript para aplicaciones servidor
Valores Javascript
Literales Javascript
Objetos Javascript
Métodos Javascript
Operadores Javascript
Condicionales Javascript
Bucles Javascript
Funciones Javascript
Parámetros de las funciones
Funciones de ventanas y funciones matemáticas
Gestión de eventos
Ejemplos de eventos
Captura de eventos
Cookies
Configurar y borrar cookies
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos JavaScript
Lista de Códigos JavaScript
Foros
Foros JavaScript
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia