🔒 Día 20 — Funciones, objetos y manipulación básica del DOM

¡Vamos allá! Aquí tienes el DÍA 20 de la potentísima certificación de desarrollo seguro full stack en WordPress!

Objetivo:
Hoy profundizaremos en el uso de funciones en JavaScript, aprenderemos a trabajar con objetos y arrays de manera más eficiente, y haremos una primera aproximación a la manipulación básica del DOM (Document Object Model).

📚 Formación Teórica

1. Funciones en JavaScript

Una función es un bloque de código reutilizable que puede ejecutarse cuando se necesite.
Permiten organizar, reutilizar y estructurar mejor el código.

2. Objetos y Arrays

  • Un objeto agrupa datos relacionados en pares clave: valor.
  • Un array es una lista ordenada de elementos.

3. Introducción a la manipulación del DOM

El DOM representa toda la estructura de una página web como un árbol de objetos que JavaScript puede manipular.
Aprenderemos a seleccionar elementos y modificar su contenido de forma básica.

🎥 Vídeos de hoy

Instrucciones para el vídeo:
Presta atención a:

  • Cómo crear funciones tradicionales y funciones flecha (=>).
  • Cómo usar arrays y objetos para almacenar datos de forma ordenada.
  • Cómo recorrer arrays y objetos.
  • Cómo seleccionar y modificar elementos del DOM (primer contacto).

🧠 Apuntes Técnicos del Día

📌 Funciones en JavaScript

// Función tradicional
function saludar(nombre) {
  return `Hola, ${nombre}`;
}

// Función flecha (Arrow Function)
const despedir = (nombre) => `Adiós, ${nombre}`;

console.log(saludar("Jesús"));
console.log(despedir("Jesús"));
  • Las funciones permiten pasar parámetros y devolver valores.
  • Las arrow functions son más breves pero tienen diferencias sutiles con las funciones normales (contexto de this).

📌 Objetos y Arrays

// Array
let frutas = ["Manzana", "Banana", "Naranja"];

// Objeto
let persona = {
  nombre: "Jesús",
  edad: 34,
  profesion: "Desarrollador"
};

console.log(persona.nombre); // "Jesús"
console.log(frutas[1]); // "Banana"
  • Objetos: Datos estructurados en forma de clave-valor.
  • Arrays: Listas ordenadas accesibles por índices.

📌 Introducción al DOM

// Seleccionar elemento por ID
let titulo = document.getElementById("titulo");

// Modificar el contenido de un elemento
titulo.innerText = "Nuevo Título";
  • Usamos getElementById, querySelector, querySelectorAll para seleccionar elementos.
  • El contenido de los elementos se puede cambiar usando innerText o innerHTML.

🛠️ Tareas prácticas del Día 20

Tarea 1 — Crear funciones:

  • Escribe una función que reciba un nombre y una edad, y devuelva un mensaje personalizado si es mayor o menor de edad.

Tarea 2 — Crear y recorrer objetos y arrays:

  • Crea un array de 5 objetos donde cada objeto represente una persona con nombre y edad.
  • Recorre el array y muestra en consola los datos de cada persona.

Tarea 3 — Manipulación básica del DOM:

  • Crea un pequeño HTML con un h1 de título y un botón.
  • Al hacer clic en el botón, cambia el texto del h1 usando JavaScript.

Entrega:

  • Crea un documento PDF donde adjuntes:
    • Código utilizado.
    • Capturas de pantalla del funcionamiento del programa y la manipulación del DOM.

🚀 Resultado esperado al finalizar el día

  • Saber crear funciones tradicionales y flecha.
  • Manejar objetos y arrays en JavaScript de forma fluida.
  • Entender cómo seleccionar y modificar elementos del DOM de manera básica.