¡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

• ✅ Funciones, arrays y objetos en JavaScript (Desde 2:03:26 hasta 4:07:35 aproximadamente)

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.

---