nebil/index.html

## index.html
<!DOCTYPE html>
<html lang='es'>
    <head>
        <meta charset='utf-8'>
        <title>Ejemplo</title>
        <style media='screen'>
            body {
              margin: 0px auto;
              padding: 3ex 3em;
              max-width: 680px;

              background-color: #FAFAFA;
              color: #333;
              font-family: Liberation Sans, Helvetica, Arial, sans-serif;
            }
        </style>
    </head>

    <body>
        <p id='my-paragraph'>este párrafo no tendrá mucho sentido</p>
        <input id='my-button' type='button' value="¡Desordenar!">
        <!-- Ahora, traemos el archivo escrito en JavaScript. -->
        <script src='script.js' type='application/javascript'></script>
    </body>
</html>

## script.js
(() => {
// Traducido a ES2015 desde: https://stackoverflow.com/a/2724594

// Lo que estoy escribiendo acá permite extender
// las funcionalidades de un Array en JavaScript.
// NB: esto no es considerado una buena práctica.
Array.prototype.shuffle = function shuffle() {
    let i = this.length;
    if (i === 0) return this;

    while (--i) {
        const randint = Math.floor(Math.random() * (i + 1));
        [this[i], this[randint]] = [this[randint], this[i]];
    }

    return this;
};

// Ahora, le agregamos un 'event listener' al botón.
// El objetivo es que, cada vez que haga clic en él,
// se ejecute la función (i.e. callback) que entregaré como argumento.
document.getElementById('my-button').addEventListener('click', () => {
    console.log('Hice clic en el botón.'); // Sólo para ver que el clic está funcionando.

    const para = document.getElementById('my-paragraph'); // Primero, obtengo el párrafo.
    const text = para.innerHTML;                          // Luego, le extraigo su texto.
    para.innerHTML = text.split(' ').shuffle().join(' '); // Y le doy palabras mezcladas.
});
})();
	<!DOCTYPE html>
	<html lang='es'>
	<head>
	<meta charset='utf-8'>
	<title>Ejemplo</title>
	<style media='screen'>
	body {
	margin: 0px auto;
	padding: 3ex 3em;
	max-width: 680px;

	background-color: #FAFAFA;
	color: #333;
	font-family: Liberation Sans, Helvetica, Arial, sans-serif;
	}
	</style>
	</head>

	<body>
	<p id='my-paragraph'>este párrafo no tendrá mucho sentido</p>
	<input id='my-button' type='button' value="¡Desordenar!">
	<!-- Ahora, traemos el archivo escrito en JavaScript. -->
	<script src='script.js' type='application/javascript'></script>
	</body>
	</html>
	(() => {
	// Traducido a ES2015 desde: https://stackoverflow.com/a/2724594

	// Lo que estoy escribiendo acá permite extender
	// las funcionalidades de un Array en JavaScript.
	// NB: esto no es considerado una buena práctica.
	Array.prototype.shuffle = function shuffle() {
	let i = this.length;
	if (i === 0) return this;

	while (--i) {
	const randint = Math.floor(Math.random() * (i + 1));
	[this[i], this[randint]] = [this[randint], this[i]];
	}

	return this;
	};

	// Ahora, le agregamos un 'event listener' al botón.
	// El objetivo es que, cada vez que haga clic en él,
	// se ejecute la función (i.e. callback) que entregaré como argumento.
	document.getElementById('my-button').addEventListener('click', () => {
	console.log('Hice clic en el botón.'); // Sólo para ver que el clic está funcionando.

	const para = document.getElementById('my-paragraph'); // Primero, obtengo el párrafo.
	const text = para.innerHTML; // Luego, le extraigo su texto.
	para.innerHTML = text.split(' ').shuffle().join(' '); // Y le doy palabras mezcladas.
	});
	})();