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

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

View File

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

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>

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>

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>

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>