From a1fd008a8e8bf14ab0702c148acc55ea6b801c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=20Mu=C3=B1oz?= <rafael.munoz77@gmail.com>
Date: Mon, 17 Mar 2025 16:29:45 +0100
Subject: [PATCH] feat(ch 5): JS second block solved & accesoGenders.html

---
 .../AccesoSimpleBackenAPI/accesoGenders.html  | 45 +++++++++++++++++++
 Unidad_05_Javascript/ejemplo01.html           |  7 ++-
 Unidad_05_Javascript/ejemplo02.html           |  6 +--
 .../ejercicios/bloque01/ejercicio06.html      |  6 +--
 .../ejercicios/bloque02/ejercicio01.html      | 31 +++++++++++++
 .../ejercicios/bloque02/ejercicio02.html      | 42 +++++++++++++++++
 .../ejercicios/bloque02/ejercicio03.html      | 32 +++++++++++++
 .../ejercicios/bloque02/ejercicio04.html      | 27 +++++++++++
 8 files changed, 188 insertions(+), 8 deletions(-)
 create mode 100644 Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoGenders.html
 create mode 100644 Unidad_05_Javascript/ejercicios/bloque02/ejercicio01.html
 create mode 100644 Unidad_05_Javascript/ejercicios/bloque02/ejercicio02.html
 create mode 100644 Unidad_05_Javascript/ejercicios/bloque02/ejercicio03.html
 create mode 100644 Unidad_05_Javascript/ejercicios/bloque02/ejercicio04.html
diff --git a/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoGenders.html b/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoGenders.html
new file mode 100644
index 0000000..72fdf34
--- /dev/null
+++ b/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoGenders.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Acceso lista de géneros literarios</title>
+    <script>
+        function loadGenders() {
+            let gendersTable = document.getElementById("gendersTable");
+
+            const xhttp = new XMLHttpRequest();
+            xhttp.onload = function () {
+                let strResponse = xhttp.responseText;
+                console.log("Datos recibidos: " + strResponse);
+                let jsonResponse = JSON.parse(strResponse);
+                console.log("Datos parseados: " + jsonResponse);
+                for (let i = 0; i < jsonResponse.length; i++) {
+                    let genero = jsonResponse[i];
+                    console.log("Género: " + genero.id + " - " 
+                        + genero.nombre);
+                    gendersTable.innerHTML += '<tr>' + 
+                        '<td>' + genero.id + '</td>' + 
+                        '<td>' + genero.nombre + '</td>' + 
+                        '</tr>'
+                }
+            }
+
+            // Send a request
+            xhttp.open("GET", "http://localhost:8081/v1/genders");
+            xhttp.send();
+        }
+    </script>
+</head>
+
+<body onload="loadGenders()">
+    <table id="gendersTable" border="1" width="100%">
+        <tr>
+            <th>Id</th>
+            <th>Nombre</th>
+        </tr>
+    </table>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Unidad_05_Javascript/ejemplo01.html b/Unidad_05_Javascript/ejemplo01.html
index a84bd92..b0bd19e 100644
--- a/Unidad_05_Javascript/ejemplo01.html
+++ b/Unidad_05_Javascript/ejemplo01.html
@@ -5,11 +5,14 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- el charset iso-8859-1 significa "español" -->
 
     <script>
-        // Crea un formulario con un input y un botón. Al hacer clic, muestra el nombre y edad ingresados en un div.
+        // Crea un formulario con un input y un botón. 
+        // Al hacer clic, muestra el nombre y edad ingresados 
+        // en un div.
         function mostrarMensaje() {
             let nombre = document.getElementById("nombre").value;
             let edad = document.getElementById("edad").value;
-            document.getElementById("resultado").innerHTML = 'Hola, ' + nombre + '. Tienes ' + edad + ' años.';
+            document.getElementById("resultado").innerHTML = 
+                'Hola, ' + nombre + '. Tienes ' + edad + ' años.';
         }
     </script>
 
diff --git a/Unidad_05_Javascript/ejemplo02.html b/Unidad_05_Javascript/ejemplo02.html
index abcd4cd..573e670 100644
--- a/Unidad_05_Javascript/ejemplo02.html
+++ b/Unidad_05_Javascript/ejemplo02.html
@@ -3,15 +3,15 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <!-- el charset iso-8859-1 significa "español" -->
 
     <script>
-        // Muestra en un p el área de un círculo con un radio ingresado por el usuario.
+        // Muestra en un p el área de un círculo con un radio 
+        // ingresado por el usuario.
         const PI = 3.1416;
         function calcularArea() {
             let radio = document.getElementById("radio").value;
             let area = PI * radio * radio;
-            document.getElementById("area").innerText = `Área: ${area}`;
+            document.getElementById("area").innerText = 'Área: ' + area ;
         }    </script>
 
 </head>
diff --git a/Unidad_05_Javascript/ejercicios/bloque01/ejercicio06.html b/Unidad_05_Javascript/ejercicios/bloque01/ejercicio06.html
index e128c4c..ea8ba23 100644
--- a/Unidad_05_Javascript/ejercicios/bloque01/ejercicio06.html
+++ b/Unidad_05_Javascript/ejercicios/bloque01/ejercicio06.html
@@ -5,9 +5,9 @@
     <script>
         function cambiarTamanio(factor) {
             let parrafo = document.getElementById("texto");
-            let tamañoActual = window.getComputedStyle(parrafo).fontSize;
-            let nuevoTamaño = parseFloat(tamañoActual) + factor;
-            parrafo.style.fontSize = nuevoTamaño + "px";
+            let tamanioActual = window.getComputedStyle(parrafo).fontSize;
+            let nuevoTamanio = parseFloat(tamanioActual) + factor;
+            parrafo.style.fontSize = nuevoTamanio + "px";
         }
     </script>
 </head>
diff --git a/Unidad_05_Javascript/ejercicios/bloque02/ejercicio01.html b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio01.html
new file mode 100644
index 0000000..93eef50
--- /dev/null
+++ b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio01.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script>
+        function leerObjeto() {
+            // Pedir datos al usuario con prompt()
+            let nombre = prompt("Introduce tu nombre:");
+            let edad = prompt("Introduce tu edad:");
+            let ciudad = prompt("Introduce tu ciudad:");
+
+            // Crear el objeto con los datos introducidos
+            let usuario = {
+                nombre: nombre,
+                edad: parseInt(edad), // Convertir a número
+                ciudad: ciudad
+            };
+
+            // Mostrar el objeto como JSON en una alerta
+            alert(JSON.stringify(usuario, null, 2));
+
+            // También mostrarlo en el div de la página
+            document.getElementById("resultado").innerText = JSON.stringify(usuario, null, 2);
+        }
+    </script>
+</head>
+<body>
+    <button onclick="leerObjeto()">Ingresar datos</button>
+    <pre id="resultado"></pre>
+</body>
+</html>
diff --git a/Unidad_05_Javascript/ejercicios/bloque02/ejercicio02.html b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio02.html
new file mode 100644
index 0000000..51a0a89
--- /dev/null
+++ b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio02.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script>
+        function guardarObjeto() {
+            // Crear un objeto con datos de usuario
+            let usuario = {
+                nombre: prompt("Introduce tu nombre:"),
+                edad: parseInt(prompt("Introduce tu edad:")), // Convertir a número
+                ciudad: prompt("Introduce tu ciudad:")
+            };
+
+            // Convertir el objeto a JSON y guardarlo en localStorage
+            localStorage.setItem("usuario", JSON.stringify(usuario));
+
+            alert("Datos guardados en localStorage.");
+        }
+
+        function recuperarObjeto() {
+            // Recuperar el objeto desde localStorage
+            let usuarioJSON = localStorage.getItem("usuario");
+
+            if (usuarioJSON) {
+                // Convertir de JSON a objeto
+                let usuario = JSON.parse(usuarioJSON);
+
+                // Mostrar el objeto en consola y en la página
+                console.log(usuario);
+                document.getElementById("resultado").innerText = JSON.stringify(usuario, null, 2);
+            } else {
+                alert("No hay datos guardados.");
+            }
+        }
+    </script>
+</head>
+<body>
+    <button onclick="guardarObjeto()">Guardar Usuario</button>
+    <button onclick="recuperarObjeto()">Recuperar Usuario</button>
+    <pre id="resultado"></pre>
+</body>
+</html>
diff --git a/Unidad_05_Javascript/ejercicios/bloque02/ejercicio03.html b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio03.html
new file mode 100644
index 0000000..998fbdc
--- /dev/null
+++ b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio03.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script>
+        function modificarObjeto() {
+            // Definir un objeto con propiedades vacías
+            let usuario = {
+                nombre: "",
+                edad: null,
+                ciudad: ""
+            };
+
+            // Pedir datos al usuario y asignarlos al objeto
+            usuario.nombre = prompt("Introduce tu nombre:");
+            usuario.edad = parseInt(prompt("Introduce tu edad:")); // Convertir a número
+            usuario.ciudad = prompt("Introduce tu ciudad:");
+
+            // Convertir el objeto a JSON
+            let usuarioJSON = JSON.stringify(usuario, null, 2);
+
+            // Mostrar el objeto en consola y en la página
+            console.log(usuarioJSON);
+            document.getElementById("resultado").innerText = usuarioJSON;
+        }
+    </script>
+</head>
+<body>
+    <button onclick="modificarObjeto()">Modificar Usuario</button>
+    <pre id="resultado"></pre>
+</body>
+</html>
diff --git a/Unidad_05_Javascript/ejercicios/bloque02/ejercicio04.html b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio04.html
new file mode 100644
index 0000000..01d00dc
--- /dev/null
+++ b/Unidad_05_Javascript/ejercicios/bloque02/ejercicio04.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script>
+        function convertirJSON() {
+            // Definir un JSON como string
+            let jsonString = '{ "producto": "Laptop", "precio": 800 }';
+
+            // Convertir el string JSON a objeto
+            let objeto = JSON.parse(jsonString);
+
+            // Mostrar las propiedades en la consola
+            console.log("Producto:", objeto.producto);
+            console.log("Precio:", objeto.precio);
+
+            // Mostrar el resultado en la página
+            document.getElementById("resultado").innerText =
+                "Producto: " + objeto.producto + "\nPrecio: " + objeto.precio + " €";
+        }
+    </script>
+</head>
+<body>
+    <button onclick="convertirJSON()">Convertir JSON</button>
+    <pre id="resultado"></pre>
+</body>
+</html>
