Añade algunos ejercicios de Javascript y DOM

José Miguel Sánchez Alés · José Miguel Sánchez Alés · commit 75e5dbf77fa6 · 2024-05-14T23:39:27.000+02:00
diff --git a/docs/06.html/08.form.html b/docs/06.html/08.form.html
@@ -1264,6 +1264,7 @@ <h2><span class="section-number">6.7.6. </span>Ejercicios propuestos<a class="he
 <p>El formulario debería enviarse por el método POST</p>
 </li>
 </ol>
+<p class="oculta"><a class="reference download internal" download="" href="../_downloads/4eb317c21e3c49a8ce2f76817d84b06d/formulario.html"><code class="xref download docutils literal notranslate"><span class="pre">Solución</span> <span class="pre">propuesta</span></code></a>.</p>
 <p class="rubric">Notas al pie</p>
 <aside class="footnote-list brackets">
 <aside class="footnote brackets" id="id7" role="note">
diff --git a/docs/99.ejercicios/64.html-form.html b/docs/99.ejercicios/64.html-form.html
@@ -125,6 +125,7 @@ <h3>Navegación</h3>
 <p>El formulario debería enviarse por el método POST</p>
 </li>
 </ol>
+<p class="oculta"><a class="reference download internal" download="" href="../_downloads/4eb317c21e3c49a8ce2f76817d84b06d/formulario.html"><code class="xref download docutils literal notranslate"><span class="pre">Solución</span> <span class="pre">propuesta</span></code></a>.</p>
 </section>
 
 
diff --git a/docs/99.ejercicios/81-js-dom.html b/docs/99.ejercicios/81-js-dom.html
@@ -117,9 +117,17 @@ <h1>Javascript y <abbr title="Document Object Model">DOM</abbr><a class="headerl
 </li>
 <li><p>Vuelva a resolver los ejercicios 3 y 6 de la <a class="reference internal" href="80-js-basico.html#ej-js-basicos"><span class="std std-ref">relación básica</span></a>, pero mediante una interfaz <abbr title="HyperText Markup Language">HTML</abbr> para tomar datos y
 mostrar resultados.</p></li>
+<li><p>Vuelva a resolver el ejercicio 9 de la <a class="reference internal" href="80-js-basico.html#ej-js-basicos"><span class="std std-ref">relación básica</span></a>, pero mediante una interfaz <abbr title="HyperText Markup Language">HTML</abbr> para tomar datos y
+mostrar resultados. Incluya en la web una tabla con las equivalencias.</p></li>
+<li><p>Vuelva a resolver el ejercicio 6 de la <a class="reference internal" href="80-js-basico.html#ej-js-medios"><span class="std std-ref">relación media</span></a>, pero mediante una interfaz <abbr title="HyperText Markup Language">HTML</abbr> para tomar datos y
+mostrar resultados.</p></li>
 <li><p>Tome el formulario creado para el <a class="reference internal" href="64.html-form.html#ej-html-form"><span class="std std-ref">ejercicio de HTML sobre formularios</span></a> y añada Javascript para:</p>
 <ol class="loweralpha simple">
 <li><p>Habilitar el cuadro de texto al marcar la opción de «otras aficiones».</p></li>
+<li><p>Evitar que el formulario sea enviado. En vez de eso, una aviso emergente
+dirá «Este formulario debería enviarse a algún servidor».</p></li>
+<li><p>Capturar el botón «Limpiar» para que pedir confirmación de que realmente
+se quiere limpiar.</p></li>
 <li><p>Impedir que se envíe el formulario con contraseñas contradictorias. Para
 este apartado han de resolverse tres alternativas diferentes.</p>
 <ol class="lowerroman simple">
@@ -133,6 +141,7 @@ <h1>Javascript y <abbr title="Document Object Model">DOM</abbr><a class="headerl
 </ol>
 </li>
 </ol>
+<p class="sol-oculta"><a class="reference download internal" download="" href="../_downloads/e07aa3b5ed9e9a3d96bb3b49ae520ad2/DOM07-formulario.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>
diff --git a/docs/_downloads/4eb317c21e3c49a8ce2f76817d84b06d/formulario.html b/docs/_downloads/4eb317c21e3c49a8ce2f76817d84b06d/formulario.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang=es>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Ejercicio 1</title>
+
+    <h1>Formulario de prueba</h1>
+    <form method="post" action="#">
+        <fieldset>
+            <legend>Información personal</legend>
+            <label>Nombre <input name="nombre"></label> <label>Apellidos <input name="apellidos"></label><br>
+            <label>Fecha de nacimiento <input type=date></label>
+            <fieldset name="sexog">
+                <legend>Sexo</legend>
+                <label><input name="sexo" type="radio" value="V"> Varón</label>
+                <label><input name="sexo" type="radio" value="H"> Hembra</label>
+            </fieldset>
+            <fieldset name="estadog">
+                <legend>Estado Civil</legend>
+		<label><input name="estado" type="radio" value="S"> Soltero</label><br>
+                <label><input name="estado" type="radio" value="C"> Casado</label><br>
+                <label><input name="estado" type="radio" value="C"> Viudo</label><br>
+                <label><input name="estado" type="radio" value="C"> Divorciado</label>
+            </fieldset>
+            <label>Teléfono <input type="tel" name="telefono" pattern="\+34-[89][0-9]\.[0-9]{3}\.[0-9]{3}"></label><br>
+            <label>Teléfono móvil <input type="tel" name="movil" pattern="\+34-[67][0-9]\.[0-9]{3}\.[0-9]{3}"></label><br>
+            <fieldset name="aficionesg">
+               <legend>Aficiones</legend>
+	       <label><input name="aficion" type="checkbox" value="lit"> Literatura</label><br>
+	       <label><input name="aficion" type="checkbox" value="cine"> Cine</label><br>
+	       <label><input name="aficion" type="checkbox" value="mus"> Música</label><br>
+	       <label><input name="aficion" type="checkbox" value="tic"> Informática y nuevas tecnologías</label><br>
+	       <label><input name="aficion" type="checkbox" value="sport"> Deporte</label><br>
+	       <label><input name="aficion" type="checkbox" value="mano"> Manualidades</label><br>
+	       <label><input name="aficion" type="checkbox" value="otr"> Otras: </label>
+	       <textarea name="aficionp" disabled placeholder="Especifique cuales..." rows=4 cols=40></textarea>
+            </fieldset>
+        </fieldset>
+	<fieldset>
+      <legend>Información de usuario</legend>	
+      <label>Nombre de usuario <input name="nick" pattern="[A-Z][a-z]\w*"><br>
+      <label>Contraseña <input name="password" type="password"> <i class="fas fa-eye" title="Mostrar contraseña"></i></label>
+      <fieldset>
+         <legend>¿Cómo ha llegado a esta web?</legend>
+         <label><input name="origen" type="radio" value="publi"> Publicidad</label><br>
+         <label><input name="origen" type="radio" value="amigo"> Por un amigo</label><br>
+         <label><input name="origen" type="radio" value="buscador"> A través de buscadores</label>
+      </fieldset>
+	</fieldset>
+    <button type="reset">Limpiar</button> <button>Enviar</button>
+    </form>
+    <script src="js/formulario.js"></script>
+</html>
diff --git a/docs/_downloads/e07aa3b5ed9e9a3d96bb3b49ae520ad2/DOM07-formulario.js b/docs/_downloads/e07aa3b5ed9e9a3d96bb3b49ae520ad2/DOM07-formulario.js
@@ -0,0 +1,35 @@
+window.onload = function(e) {
+    const otras = document.querySelector('[value=otr]'),
+          otrasd = document.querySelector('[name="aficionp"]'),
+          form = document.querySelector("form"),
+          eye = document.querySelector('.fa-eye'),
+          reset = document.querySelector('button[type=reset]');
+
+    
+    otras.addEventListener("change", e => {
+        // Habilitamos/deshabilitamos el cuadro de texto.
+        otrasd.disabled = !e.target.checked;
+    });
+
+    eye.addEventListener('click', e => {
+        const input = e.target.parentElement.querySelector('input');
+        if(input.type === "password") {
+            input.type = "text";
+            e.target.title = "Ocultar contraseña";
+        }
+        else {
+            input.type = "password";
+            e.target.title = "Ocultar contraseña";
+        }
+    });
+
+    reset.addEventListener("click", e=> {
+        e.preventDefault();
+        confirm("¿De veras quiere limpiar el formulario?") && form.reset();
+    });
+
+    form.onsubmit = function (e) {
+        alert("Esta información debe enviarse a algún sitio.")
+        return false;
+    }
+}
diff --git a/docs/_sources/99.ejercicios/64.html-form.rst.txt b/docs/_sources/99.ejercicios/64.html-form.rst.txt
@@ -46,3 +46,7 @@
          #. Puntúe la web (entre 0 y 10).
 
    El formulario debería enviarse por el método POST
+
+.. rst-class:: oculta
+
+   :download:`Solución propuesta </99.ejercicios/soluciones/formulario.html>`.
diff --git a/docs/_sources/99.ejercicios/81-js-dom.rst.txt b/docs/_sources/99.ejercicios/81-js-dom.rst.txt
@@ -47,10 +47,22 @@ Javascript y |DOM|
    <ej-js-basicos>`, pero mediante una interfaz |HTML| para tomar datos y
    mostrar resultados.
 
+#. Vuelva a resolver el ejercicio 9 de la :ref:`relación básica
+   <ej-js-basicos>`, pero mediante una interfaz |HTML| para tomar datos y
+   mostrar resultados. Incluya en la web una tabla con las equivalencias.
+
+#. Vuelva a resolver el ejercicio 6 de la :ref:`relación media
+   <ej-js-medios>`, pero mediante una interfaz |HTML| para tomar datos y
+   mostrar resultados.
+
 #. Tome el formulario creado para el :ref:`ejercicio de HTML sobre formularios
    <ej-html-form>` y añada Javascript para:
 
    a. Habilitar el cuadro de texto al marcar la opción de "otras aficiones".
+   #. Evitar que el formulario sea enviado. En vez de eso, una aviso emergente
+      dirá "Este formulario debería enviarse a algún servidor".
+   #. Capturar el botón "Limpiar" para que pedir confirmación de que realmente
+      se quiere limpiar.
    #. Impedir que se envíe el formulario con contraseñas contradictorias. Para
       este apartado han de resolverse tres alternativas diferentes.
 
@@ -62,5 +74,9 @@ Javascript y |DOM|
       #. Ponga sólo un campo para la contraseña y un icono que permita ver y
          ocultar a voluntad el texto.
    
+   .. rst-class:: sol-oculta
+
+      :download:`Solución propuesta <soluciones/JS/DOM07-formulario.js>`.
+
 .. |AJAX| replace:: :abbr:`AJAX (Asynchronous JavaScript and XML)`
 .. |DOM| replace:: :abbr:`DOM (Document Object Model)`
diff --git a/docs/searchindex.js b/docs/searchindex.js
diff --git a/source/99.ejercicios/64.html-form.rst b/source/99.ejercicios/64.html-form.rst
@@ -46,3 +46,7 @@
          #. Puntúe la web (entre 0 y 10).
 
    El formulario debería enviarse por el método POST
+
+.. rst-class:: oculta
+
+   :download:`Solución propuesta </99.ejercicios/soluciones/formulario.html>`.
diff --git a/source/99.ejercicios/81-js-dom.rst b/source/99.ejercicios/81-js-dom.rst
@@ -47,10 +47,22 @@ Javascript y |DOM|
    <ej-js-basicos>`, pero mediante una interfaz |HTML| para tomar datos y
    mostrar resultados.
 
+#. Vuelva a resolver el ejercicio 9 de la :ref:`relación básica
+   <ej-js-basicos>`, pero mediante una interfaz |HTML| para tomar datos y
+   mostrar resultados. Incluya en la web una tabla con las equivalencias.
+
+#. Vuelva a resolver el ejercicio 6 de la :ref:`relación media
+   <ej-js-medios>`, pero mediante una interfaz |HTML| para tomar datos y
+   mostrar resultados.
+
 #. Tome el formulario creado para el :ref:`ejercicio de HTML sobre formularios
    <ej-html-form>` y añada Javascript para:
 
    a. Habilitar el cuadro de texto al marcar la opción de "otras aficiones".
+   #. Evitar que el formulario sea enviado. En vez de eso, una aviso emergente
+      dirá "Este formulario debería enviarse a algún servidor".
+   #. Capturar el botón "Limpiar" para que pedir confirmación de que realmente
+      se quiere limpiar.
    #. Impedir que se envíe el formulario con contraseñas contradictorias. Para
       este apartado han de resolverse tres alternativas diferentes.
 
@@ -62,5 +74,9 @@ Javascript y |DOM|
       #. Ponga sólo un campo para la contraseña y un icono que permita ver y
          ocultar a voluntad el texto.
    
+   .. rst-class:: sol-oculta
+
+      :download:`Solución propuesta <soluciones/JS/DOM07-formulario.js>`.
+
 .. |AJAX| replace:: :abbr:`AJAX (Asynchronous JavaScript and XML)`
 .. |DOM| replace:: :abbr:`DOM (Document Object Model)`
diff --git a/source/99.ejercicios/soluciones/JS/DOM07-formulario.js b/source/99.ejercicios/soluciones/JS/DOM07-formulario.js
@@ -0,0 +1,35 @@
+window.onload = function(e) {
+    const otras = document.querySelector('[value=otr]'),
+          otrasd = document.querySelector('[name="aficionp"]'),
+          form = document.querySelector("form"),
+          eye = document.querySelector('.fa-eye'),
+          reset = document.querySelector('button[type=reset]');
+
+    
+    otras.addEventListener("change", e => {
+        // Habilitamos/deshabilitamos el cuadro de texto.
+        otrasd.disabled = !e.target.checked;
+    });
+
+    eye.addEventListener('click', e => {
+        const input = e.target.parentElement.querySelector('input');
+        if(input.type === "password") {
+            input.type = "text";
+            e.target.title = "Ocultar contraseña";
+        }
+        else {
+            input.type = "password";
+            e.target.title = "Ocultar contraseña";
+        }
+    });
+
+    reset.addEventListener("click", e=> {
+        e.preventDefault();
+        confirm("¿De veras quiere limpiar el formulario?") && form.reset();
+    });
+
+    form.onsubmit = function (e) {
+        alert("Esta información debe enviarse a algún sitio.")
+        return false;
+    }
+}
diff --git a/source/99.ejercicios/soluciones/formulario.html b/source/99.ejercicios/soluciones/formulario.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang=es>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Ejercicio 1</title>
+
+    <h1>Formulario de prueba</h1>
+    <form method="post" action="#">
+        <fieldset>
+            <legend>Información personal</legend>
+            <label>Nombre <input name="nombre"></label> <label>Apellidos <input name="apellidos"></label><br>
+            <label>Fecha de nacimiento <input type=date></label>
+            <fieldset name="sexog">
+                <legend>Sexo</legend>
+                <label><input name="sexo" type="radio" value="V"> Varón</label>
+                <label><input name="sexo" type="radio" value="H"> Hembra</label>
+            </fieldset>
+            <fieldset name="estadog">
+                <legend>Estado Civil</legend>
+		<label><input name="estado" type="radio" value="S"> Soltero</label><br>
+                <label><input name="estado" type="radio" value="C"> Casado</label><br>
+                <label><input name="estado" type="radio" value="C"> Viudo</label><br>
+                <label><input name="estado" type="radio" value="C"> Divorciado</label>
+            </fieldset>
+            <label>Teléfono <input type="tel" name="telefono" pattern="\+34-[89][0-9]\.[0-9]{3}\.[0-9]{3}"></label><br>
+            <label>Teléfono móvil <input type="tel" name="movil" pattern="\+34-[67][0-9]\.[0-9]{3}\.[0-9]{3}"></label><br>
+            <fieldset name="aficionesg">
+               <legend>Aficiones</legend>
+	       <label><input name="aficion" type="checkbox" value="lit"> Literatura</label><br>
+	       <label><input name="aficion" type="checkbox" value="cine"> Cine</label><br>
+	       <label><input name="aficion" type="checkbox" value="mus"> Música</label><br>
+	       <label><input name="aficion" type="checkbox" value="tic"> Informática y nuevas tecnologías</label><br>
+	       <label><input name="aficion" type="checkbox" value="sport"> Deporte</label><br>
+	       <label><input name="aficion" type="checkbox" value="mano"> Manualidades</label><br>
+	       <label><input name="aficion" type="checkbox" value="otr"> Otras: </label>
+	       <textarea name="aficionp" disabled placeholder="Especifique cuales..." rows=4 cols=40></textarea>
+            </fieldset>
+        </fieldset>
+	<fieldset>
+      <legend>Información de usuario</legend>	
+      <label>Nombre de usuario <input name="nick" pattern="[A-Z][a-z]\w*"><br>
+      <label>Contraseña <input name="password" type="password"> <i class="fas fa-eye" title="Mostrar contraseña"></i></label>
+      <fieldset>
+         <legend>¿Cómo ha llegado a esta web?</legend>
+         <label><input name="origen" type="radio" value="publi"> Publicidad</label><br>
+         <label><input name="origen" type="radio" value="amigo"> Por un amigo</label><br>
+         <label><input name="origen" type="radio" value="buscador"> A través de buscadores</label>
+      </fieldset>
+	</fieldset>
+    <button type="reset">Limpiar</button> <button>Enviar</button>
+    </form>
+    <script src="js/formulario.js"></script>
+</html>
