Aáde un ejercicio a Javascript-DOM

Author: José Miguel Sánchez Alés

docs/99.ejercicios/80-js-basico.html

@@ -103,13 +103,18 @@ <h1>Javascript y <abbr title="Document Object Model">DOM</abbr><a class="headerl
 </div>
 <p>Podemos hacer una petición <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> para obtener datos <abbr title="JavaScript Object Notation">JSON</abbr> facilitados en
 una dirección web. Sabiendo esto, cree una página web que muestre en una
-tabla los ditintos tipos de carburante para automoción vendidos en España.</p>
+tabla los distintos tipos de carburante para automoción vendidos en España.</p>
 <div class="admonition note">
 <p class="admonition-title">Nota</p>
 <p>Échele un ojo a los ejemplos que introducen la unidad sobre <a class="reference internal" href="../05.almacenamiento/index.html#lm-ut5"><span class="std std-ref">Almacenamiento</span></a>
 para saber la <abbr title="Uniform Resource Locator">URL</abbr>.</p>
 </div>
 </li>
+<li><p>En el <a class="reference download internal" download="" href="../_downloads/79a13a37ff81e505eaae46c28c381c70/mostrar.html"><code class="xref download docutils literal notranslate"><span class="pre">siguiente</span> <span class="pre">documento</span> <span class="pre">HTML</span></code></a> manipule el
+comportamiento del botón para que muestre u oculte el resto del texto (el
+incluido dentro de <code class="docutils literal notranslate"><span class="pre">span</span></code>).</p>
+<p class="sol-oculta"><a class="reference download internal" download="" href="../_downloads/0b72028f521aa004f275c8cb18772e9c/DOM03-conmutar.js"><code class="xref download docutils literal notranslate"><span class="pre">Solución</span> <span class="pre">propuesta</span></code></a>.</p>
+</li>
 </ol>
 </section>
 

docs/99.ejercicios/81-js-dom.html

@@ -0,0 +1,14 @@
+const link = document.getElementById("conmutador");
+
+link.addEventListener("click", e => {
+    e.preventDefault(); //No sigue el enlace.
+
+    const span = e.target.parentElement.querySelector("span");
+    span.classList.toggle("extra");
+
+    // Cambiamos la leyenda.
+    <script src="js/conmutar.js"></script>
+    e.target.textContent = span.classList.contains("extra")
+      ? "Seguir leyendo..."
+      : "Ocultar texto...";
+});

docs/_downloads/0b72028f521aa004f275c8cb18772e9c/DOM03-conmutar.js

@@ -33,31 +33,55 @@ function generarAleatorio(min, max) {
 
 
 /**
- * Lanza n dados hasta que todas las puntuaciones de un misma tirada sean iguales.
+ * Lanza los dados hasta llegar a la tirada ganadora.
  * 
- * @param {number} n - Número de dados en la tirada
+ * @param {reglas} reglas - Reglas de la partida.
  * 
- * @yields {number} - La puntuación de cada dado.
+ * @yields {number[]} - La puntuación de cada dado.
  */
-function* generarPartida(n) {
-    let tirada;
+function* generarPartida({dados, caras, fin = _ => false}) {
+    let tirada, log = [];
 
-    if(!Number.isInteger(n) || n < 1) {
+    if(!Number.isInteger(dados) || dados < 1) {
         throw "Debe tirarse al menos un dado";
     }
 
-    // Las tiradas continúan mientras todas
-    // las puntuaciones de una misma tirada no sean iguales.
+    // Las tiradas continúan mientras no se cumpla
+    // la condición definida por "fin".
     do {
         // Una tirada son "n" puntuaciones de dados
-        tirada = Array(n).fill(null).map(e => generarAleatorio(1, numCaras));
+        tirada = Array(dados).fill(null).map(e => generarAleatorio(1, caras));
+        log.push(tirada);
         yield tirada;
-    } while(tirada.some((e, _, arr) => e !== arr[0]));
+    } while(!fin(log));
 }
 
+/**
+ * @typedef {Object} reglas
+ * 
+ * @property {number} dados - Cantidad de dados lanzados por tirada.
+ * @property {number} caras - Número de caras de cada dado.
+ * @property {finCallback} fin - Función que comprueba si la tirada es ganadora.
+ */
+
+/**
+ * @callback finCallback
+ * 
+ * @param {number[][]} tiradas - Resultados de todas las tiradas.
+ * 
+ * @returns {boolean} - true, si la tirada es ganadora.
+ */
+
 // Programa principal
 
-const partida = generarPartida(numDados);
+const reglas = {
+    dados: numDados,
+    caras: numCaras,
+    // La partida acaba cuando todos los dados de la última tirada son iguales.
+    fin: (tiradas) => tiradas?.at(-1)?.every((e, _, arr) => e === arr[0])
+}
+
+const partida = generarPartida(reglas);
 let tirada, intentos = 0;
 
 for(tirada of partida) {

docs/_downloads/4073071b21e0679ca8fe21155045184b/ejM02.js

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang=es>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejercicio 1</title>
+
+    <style>
+        .extra { display: none; }
+    </style>
+
+    <h1>Lorem ipsum</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        <span class="extra">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> <a href="#" id="conmutador">Seguir leyendo...</a>
+    </p>
+</html>