h4ckx0r/LMSGI-2024-25
1
0
Fork 0
mirror of https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git synced 2025-11-09 18:03:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(ch 5): JS second block solved & accesoGenders.html

Browse Source
This commit is contained in:
Rafa Muñoz
2025-03-17 16:29:45 +01:00
parent 63fecbac6a
commit a1fd008a8e
8 changed files with 188 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoGenders.html Normal file
View File

@@ -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>

7
Unidad_05_Javascript/ejemplo01.html
View File

@@ -5,11 +5,14 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- el charset iso-8859-1 significa "español" --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- el charset iso-8859-1 significa "español" -->
<script> <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() { function mostrarMensaje() {
let nombre = document.getElementById("nombre").value; let nombre = document.getElementById("nombre").value;
let edad = document.getElementById("edad").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> </script>

6
Unidad_05_Javascript/ejemplo02.html
View File

@@ -3,15 +3,15 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- el charset iso-8859-1 significa "español" -->
<script> <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; const PI = 3.1416;
function calcularArea() { function calcularArea() {
let radio = document.getElementById("radio").value; let radio = document.getElementById("radio").value;
let area = PI * radio * radio; let area = PI * radio * radio;
document.getElementById("area").innerText = `Área: ${area}`; document.getElementById("area").innerText = 'Área: ' + area ;
} </script> } </script>
</head> </head>

6
Unidad_05_Javascript/ejercicios/bloque01/ejercicio06.html
View File

@@ -5,9 +5,9 @@
<script> <script>
function cambiarTamanio(factor) { function cambiarTamanio(factor) {
let parrafo = document.getElementById("texto"); let parrafo = document.getElementById("texto");
let tamañoActual = window.getComputedStyle(parrafo).fontSize; let tamanioActual = window.getComputedStyle(parrafo).fontSize;
let nuevoTamaño = parseFloat(tamañoActual) + factor; let nuevoTamanio = parseFloat(tamanioActual) + factor;
parrafo.style.fontSize = nuevoTamaño + "px"; parrafo.style.fontSize = nuevoTamanio + "px";
} }
</script> </script>
</head> </head>

31
Unidad_05_Javascript/ejercicios/bloque02/ejercicio01.html Normal file
View File

@@ -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>

42
Unidad_05_Javascript/ejercicios/bloque02/ejercicio02.html Normal file
View File

@@ -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>

32
Unidad_05_Javascript/ejercicios/bloque02/ejercicio03.html Normal file
View File

@@ -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>

27
Unidad_05_Javascript/ejercicios/bloque02/ejercicio04.html Normal file
View File

@@ -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>