Frases aleatorias para tu web usando JavaScript y un array

El siguiente ejercicio viene a cuento de que el otro día un conocido me ha preguntado como podría mostrar frases aleatorias en su página web. Este es un ejercicio que hice hace ya algunos años por aquello de probar cosas con este lenguaje. Así por el mismo precio vamos a continuar con los ejercicios JavaScript que empecé el otro día con la calculadora.

Este ejercicio se trata de una pequeña página web con un JavaScript que va a trabajar con un array, que contendrá las frases a mostrar. Para obtener la frase de manera aleatoria se utiliza random(). Como se puede ver en el siguiente código hay que restarle 1 al número de frases totales. No hay que olvidar que los arrays comienzan en cero.

El ejercicio funcionando se puede ver en el siguiente enlace. Para todos aquellos que ya saben de que va el tema este de los arrays v a a ser evidente que el ejercicio es ampliamente mejorable. A mi me parece un buen punto para empezar a moverse por los arrays y darle practicar un poco el JavaScript.

Frases aleatorias con JavaScript y un Array

<html>
<head>
<title></title>
<meta charset="utf-8">
    <script type="text/javascript">

    // declaramos el array con frases ,el número de posiciones es indiferente
    var Frases=new Array()
    //primera posición
    Frases[0] = "Si en los inicios no puedes alimentar a tu equipo con 2 pizzas, es que es demasiado grande – Jeff Bezos de Amazon.";
    //segunda posición
    Frases[1] = "El valor de una idea radica en el uso de la misma – Thomas Edison.";
    //tercer posición
    Frases[2] = "El trabajo va a ocupar gran parte de tu vida. La única forma de estar realmente satisfecho es hacer aquello que crees que es un buen trabajo, y la única forma de hacer un gran trabajo es amar aquello que haces – Steve Jobs de Apple.";
    //cuarta posición
    Frases[3] = "Tus clientes más insatisfechos deben ser tu mayor fuente de aprendizaje – Bill Gates";
    //quinta posición
    Frases[4] = "Una visión de una idea sin la capacidad de ejecución es únicamente una alucinación – Steve Case de AOL.";
<div style="clear:both; margin-top:1em; margin-bottom:1em;"><a href="https://entreunosyceros.net/anadir-paginacion-wordpress-sin-plugins/" target="_self" rel="nofollow" class="IRPP_button"><div class="centered-text-area"><div class="centered-text"><div class="IRPP_button-content"><div class="postTitle">Añadir paginación en Wordpress sin plugins</div><div class="ctaButton">LEER</div></div></div></div><div class="lazyload postImageUrl" data-bg="https://entreunosyceros.net/wp-content/uploads/2016/02/wp-300x225.png" style="background-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20500%20300%22%3E%3C/svg%3E);"></div></a></div>
    // Calculamos la longitud del array (el resultado será el número de frases)
    var Q = Frases.length;

    // Obtener un número aleatorio entre 1 y la cantidad de frases incluidas
    //Utilizando la clase Math y el método random().
    var numAleatorio=Math.round(Math.random()*(Q-1));

    // Creamos una función para mostrar la frase
    function mostrarFrases() {
    document.write(Frases[numAleatorio]);}
    </script>

</head>

<body>
<h1>Frases aleatorias con JavaScript</h1>
<h6>Pulsa F5 para cambiar de frase</h6>
<script type="text/javascript">mostrarFrases(); </script>
</body>
</html>

<html>

<head>

// declaramos el array con frases ,el número de posiciones es indiferente

var Frases=new Array()

//primera posición

Frases[] = "Si en los inicios no puedes alimentar a tu equipo con 2 pizzas, es que es demasiado grande – Jeff Bezos de Amazon.";

//segunda posición

Frases[1] = "El valor de una idea radica en el uso de la misma – Thomas Edison.";

//tercer posición

Frases[2] = "El trabajo va a ocupar gran parte de tu vida. La única forma de estar realmente satisfecho es hacer aquello que crees que es un buen trabajo, y la única forma de hacer un gran trabajo es amar aquello que haces – Steve Jobs de Apple.";

//cuarta posición

Frases[3] = "Tus clientes más insatisfechos deben ser tu mayor fuente de aprendizaje – Bill Gates";

//quinta posición

Frases[4] = "Una visión de una idea sin la capacidad de ejecución es únicamente una alucinación – Steve Case de AOL.";

// Calculamos la longitud del array (el resultado será el número de frases)

var Q = Frases.length;

// Obtener un número aleatorio entre 1 y la cantidad de frases incluidas

//Utilizando la clase Math y el método random().

var numAleatorio=Math.round(Math.random()*(Q-1));

// Creamos una función para mostrar la frase

function mostrarFrases() {

document.write(Frases[numAleatorio]);}

</script>

</head>

<body>

<h1>Frases aleatorias con JavaScript</h1>

<h6>Pulsa F5 para cambiar de frase</h6>

</body>

</html>

Esta es una forma sencilla de poder poner frases aleatorias en una página web haciendo una simple llamada a la función correspondiente en la que guardaremos las frases que nos interese dentro de un array. Estas frases se mostrarán de manera automática haciendo uso de la función Math.random. Es algo sencillo, pero que cumple con lo que se buscaba para este artículo.

Ejercicio básico 36 PHP: Formulario que permita añadir empleados a una base de datos con mysqli

LEER

Quizás también te interese ...