Este es uno de los primeros talleres de Javascript que escribimos, con un efecto que antes era bastante típico en las páginas web, crear un enlace que te dirigirá aleatoriamente a cualquier página, dentro de diversas alternativas que podremos definir.

Para ello utilizaremos el lenguaje Javascript que se ejecutará en el navegador. Va a resultar extremadamente simple, por lo que es un buen taller para los principiantes y creemos que será instructivo para los lectores.

Crear el array de enlaces

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

let direcciones = ["http://example.com", "http://example.com/uno", "http://example.com/dos"];

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.

Crear un enlace que ejecuta código Javascript

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 Javascript. En seguida veremos cómo crear esa función, pero antes queremos ver una alternativa de código más actual.

Alternativa de código para el enlace trabajando con eventos

No hay problema por usar un enlace cuya ruta se expresa con javascript:, que se encarga de ejecutar código Javascript, sin embargo no es algo muy normal actualmente. El problema mayor es que estamos colocando código Javascript dentro del HTML y esto es algo que no resulta muy aconsejado, aparte que por accesibilidad, sería bueno expresar una alternativa para navegadores que no tengan activado Javascript.

El siguiente código que proponemos, en cambio, tiene un enlace normal y mediante un script se le aplicará un comportamiento a este enlace, mediante un manejador de evento.

<a href="http://example.com" id="enlacealeatorio">Enlace Aleatorio</a>
<script>
    document.getElementById("enlacealeatorio").addEventListener('click', function(e) {
        e.preventDefault();
        enlaceAleatorio()
    });
</script>

De esta manera hemos conseguido dos mejoras:

• El enlace es perfectamente válido. Si no funcionase Javascript al menos nos llevaría a algún sitio, que no será aleatorio, porque es lo que está marcado en el href pero al menos será algo.
• Hemos separado el código Javascript a un <script> independiente, por lo que no mezclamos los lenguajes.

Función Javascript para navegar a un enlace aleatorio

Ahora vamos a ver la función que se encargará de extraer una URL del array anterior, de manera aleatoria, y de trasladarnos a ese lugar. La función tendrá esta forma:

function enlaceAleatorio() {
    let direcciones = ["http://example.com", "http://example.com/uno", "http://example.com/dos"];
    let 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 del enlace aleatorio con Javascript

Para ver de manera global este ejercicio transcribimos aquí todo el código utilizado.

<html>
<head>
    <title>Enlace Aleatorio</title>
    <script>
        function enlaceAleatorio() {
            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");
            var 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>

En este código del ejemplo completo hemos dejado la alternativa original que se había escrito en la primera publicación de este artículo.

Una alternativa de código un poco más moderna y ordenada sería la que podemos ver a continuación.

<html>
<head>
    <title>Enlace Aleatorio</title>
</head>
<body>
  <a href="http://example.com" id="enlacealeatorio">Enlace Aleatorio</a>

  <script>
    document.getElementById("enlacealeatorio").addEventListener('click', function(e) {
        e.preventDefault();
        enlaceAleatorio()
    });
    function enlaceAleatorio() {
        var direcciones = new Array("http://www.example.com", "http://www.example.com/uno", "http://www.example.com/dos",);
        var aleat = Math.random() * direcciones.length;
        aleat = Math.floor(aleat);
        window.location = direcciones[aleat]
    }
  </script>
</body>
</html>