Semana 3: Introducción a

JavaScript y jQuery
Created @February 1, 2025 10:45 AM

Tags

Sesión 5: Fundamentos de Javascript

Qué es JavaScript?
JavaScript es un lenguaje de programación interpretado, de alto nivel y orientado
a objetos basado en prototipos. Se utiliza principalmente para el desarrollo web
del lado del cliente, aunque también es empleado en el lado del servidor mediante
tecnologías como Node.js.
Es uno de los tres lenguajes fundamentales del desarrollo web:

HTML: Define la estructura del contenido de la página.

CSS: Se encarga del diseño y la presentación visual.

JavaScript: Agrega interactividad y dinamismo a la página.

Semana 3: Introducción a JavaScript y jQuery 1

 Historia y evolución de JavaScript
Creado en 1995 por Brendan Eich en Netscape.

En 1997, se estandarizó como ECMAScript (ES).

Con el tiempo, ha evolucionado con nuevas versiones como ES6 (2015),

introduciendo características modernas como let , const , funciones flecha y
clases.

Sintaxis y Conceptos Básicos

Variables y Tipos de Datos
JavaScript utiliza tres formas principales de declarar variables:

1. var (obsoleto, evita su uso) 🚫

2. let (para variables que pueden cambiar) ✅
3. const (para valores constantes) ✅
Semana 3: Introducción a JavaScript y jQuery 2
 let nombre = "Juan"; // String
const edad = 25; // Número
let esEstudiante = true; // Booleano
let precio = 199.99; // Número decimal
let lista = ["HTML", "CSS", "JavaScript"]; // Array
let persona = { nombre: "Carlos", edad: 30 }; // Objeto

Tipos de datos en JavaScript

JavaScript tiene dos tipos principales de datos:

Primitivos: string , number , boolean , undefined , null , bigint , symbol .

Estructurados: Object , Array , Function .

Operadores en JavaScript

Operadores Aritméticos
+ , - , * , / , % , ++ , --

let suma = 10 + 5; // 15
let residuo = 10 % 3; // 1
let residuoPar = 10 % 2; // 0

Operadores de Comparación
== , === , != , !== , < , > , <= , >=

Semana 3: Introducción a JavaScript y jQuery 3

 console.log(5 == "5"); // true (compara solo el valor)
console.log(5 === "5"); // false (compara valor y tipo)
console.log(5 >= 10); // false (compara valor)

Operadores Lógicos
&& (AND), || (OR), ! (NOT)

let esMayor = (edad > 18) && (edad < 65);

Estructuras de Control
1. Condicionales:

let edad = 20;

if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
}

2. Switch 🚫:
let dia = 3;
switch (dia) {
case 1: console.log("Lunes"); break;
case 2: console.log("Martes"); break;
case 3: console.log("Miércoles"); break;
default: console.log("Día no válido");
}

Semana 3: Introducción a JavaScript y jQuery 4

 Bucles

for

while

do-while

for (let i = 0; i < 5; i++) {

console.log("Número " + i);
}

foreach

// Ejemplo 1: Recorriendo un array de números

const numeros = [1, 2, 3, 4, 5];

numeros.forEach(function(numero) {
console.log(numero * 2); // Imprime el doble de cada número
});

// Ejemplo 2: Recorriendo un array de strings

const frutas = ['manzana', 'banana', 'naranja'];

frutas.forEach(function(fruta, indice) {
console.log(`La fruta en el índice ${indice} es: ${fruta}`);
});

Funciones y Eventos en JavaScript

Semana 3: Introducción a JavaScript y jQuery 5

 Las funciones son bloques de código reutilizables.

function saludar(nombre) {
return "Hola, " + nombre + "!";
}
console.log(saludar("Yeison"));

Funciones flecha ( arrow-functions )

const sumar = (a, b) => a + b;

console.log(sumar(5, 3)); // 8

Eventos en el DOM
Los eventos permiten la interacción del usuario con la página.

document.getElementById("btn").addEventListener("click", function() {
alert("¡Hiciste clic en el botón!");
});

Manipulación del DOM

El
DOM (Document Object Model) es una representación estructurada del
documento HTML que permite a JavaScript acceder y manipular los elementos de
la página. A través del DOM podemos modificar contenido, cambiar estilos,
agregar o eliminar elementos, y responder a eventos del usuario.

Técnicamente el DOM es una API Web que permite a los desarrolladores usar la
lógica de programación para realizar cambios en el código

Semana 3: Introducción a JavaScript y jQuery 6

 HTML . Es una manera confiable de realizar cambios que convierten los sitios web
estáticos en dinámicos.

Para tener acceso a los elementos de HTML que se quieren manipular, necesitas
hacer que JavaScript sea consciente de la existencia de dichos elementos. A esto
nos referimos generalmente como "selección" de elementos – básicamente es
enlazarlos.

Selección de elementos

let parrafo = document.getElementById("texto");

let botones = document.getElementsByTagName("button");
let elementosClase = document.getElementsByClassName("miClase");
let query = document.querySelector(".miClase");

Modificar contenido y/o estilos

document.getElementById("titulo").innerText = "Nuevo título";

document.getElementById("caja").style.backgroundColor = "blue";

Crear y eliminar elementos

let nuevoElemento = document.createElement("p");

nuevoElemento.innerText = "Este es un párrafo nuevo";
document.body.appendChild(nuevoElemento);

Agregar y eliminar clases dinámicamente

document.getElementById("miCaja").classList.add("nuevaClase"); // Agregar cla

document.getElementById("miCaja").classList.remove("nuevaClase"); // Eliminar
document.getElementById("miCaja").classList.toggle("resaltado"); // Alternar cla

Semana 3: Introducción a JavaScript y jQuery 7

 Eventos en el DOM
Un evento es cualquier interacción del usuario con la página, como hacer clic,
mover el ratón o presionar una tecla.

Agregar eventos con addEventListener

document.getElementById("miBoton").addEventListener("click", function() {
alert("¡Botón clickeado!");
});

Ejemplo de eventos en formularios

document.getElementById("miFormulario").addEventListener("submit", function(
event.preventDefault(); // Evita que el formulario se envíe
alert("Formulario enviado correctamente");
});

Evento Descripción Ejemplo

Se activa cuando un usuario elemento.addEventListener("click",

click
hace clic en un elemento. miFuncion);

Se activa cuando el cursor elemento.addEventListener("mouseover",

mouseover
entra en un elemento. miFuncion);

Se activa cuando el cursor sale elemento.addEventListener("mouseout",

mouseout
de un elemento. miFuncion);

Se activa cuando una tecla es document.addEventListener("keydown",

keydown
presionada. miFuncion);

Se activa cuando una tecla es document.addEventListener("keyup",

keyup
soltada. miFuncion);

Semana 3: Introducción a JavaScript y jQuery 8

 Se activa cuando el valor de elemento.addEventListener("change",
change
un input cambia. miFuncion);

Se activa cuando un formulario formulario.addEventListener("submit",

submit
es enviado. miFuncion);

Sesión 6: Introducción a jQuery

JQuery
jQuery es una biblioteca de JavaScript que simplifica la manipulación del DOM,
eventos y AJAX. Su principal ventaja es la facilidad para seleccionar elementos y
aplicarles cambios sin necesidad de código extenso.

Ventajas de jQuery
✅ Sintaxis simple y fácil de aprender.
✅ Reduce la cantidad de código JavaScript necesario.
✅ Compatible con múltiples navegadores.
✅ Facilita la manipulación del DOM y eventos.
✅ Integra efectos y animaciones avanzadas.

Selectores en jQuery:
Los selectores en jQuery se basan en la sintaxis de CSS y se invocan mediante
$() .

$("p") // Selecciona todos los párrafos

$("#id") // Selecciona un elemento por su ID
$(".clase") // Selecciona todos los elementos con una clase específica
$("div p") // Selecciona todos los párrafos dentro de un div

Semana 3: Introducción a JavaScript y jQuery 9

 Cómo incluir jQuery en un proyecto
Para usar jQuery, puedes incluirlo mediante un CDN o descargarlo localmente.

La opción recomendada es a través del CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Descarga Local

1. Descarga jQuery desde jquery.com

2. Incluye el archivo en tu proyecto: <script src="js/jquery-3.6.0.min.js"></script>

Sintaxis Básica de jQuery

La sintaxis principal de jQuery sigue esta estructura:

$(selector).acción();

$ : Indica que estamos usando jQuery.

selector : Selecciona elementos del DOM (como en CSS).

acción() : Define la acción que queremos realizar.

<p id="miParrafo"></p>
$(document).ready(function(){
$("#miParrafo").text("Nuevo texto con jQuery");
});

Semana 3: Introducción a JavaScript y jQuery 10

 1️⃣ Selección de Elementos
Método Descripción Ejemplo
$("#id") Selecciona un elemento por ID $("#titulo")

$(".clase") Selecciona elementos por clase $(".caja")

$(" * ") Selecciona todos los elementos $(" * ")

("[atributo]") Selecciona por atributo ("[type='text']")

$(document).ready(function(){
$("p").css("color", "blue");
});

2️⃣ Modificación del Contenido

Método Descripción Ejemplo
.html() Obtiene o establece contenido HTML $("#miDiv").html("<b>Hola</b>")

.text() Obtiene o cambia solo texto $("#miParrafo").text("Texto nuevo")

.val() Obtiene o cambia el valor de un input $("#nombre").val("Juan")

$("#miInput").val("Nuevo valor");
$("#miInput").val(); // recoge el valor que tiene #input

3️⃣ Manipulación de Atributos

Método Descripción Ejemplo
.attr() Obtiene o establece atributos $("img").attr("src", "nueva.jpg")

.removeAttr() Elimina un atributo $("input").removeAttr("disabled")

$("a").attr("href", "https://google.com");

Semana 3: Introducción a JavaScript y jQuery 11

 4️⃣ Manejo de Eventos
jQuery facilita la gestión de eventos como click , mouseover , keypress , etc.

Evento Descripción Ejemplo de Implementación

Se activa cuando el usuario hace $('#btn').click(function() {

click
clic en un elemento. alert('¡Clicado!'); });

Se activa cuando el usuario pasa el $('#box').hover(function() {

hover mouse sobre un elemento y cuando $(this).css('color', 'red'); }, function() {
lo retira. $(this).css('color', 'black'); });

Se activa cuando el usuario suelta $('#input').keyup(function() {

keyup
una tecla después de presionarla. console.log($(this).val()); });

Se activa cuando el usuario $('#input').keydown(function() {

keydown
presiona una tecla. console.log('Tecla presionada'); });

Se activa cuando el valor de un

$('#select').change(function() {
change campo de entrada cambia (por
alert($(this).val()); });
ejemplo, en un <select> o <input> ).

Se activa cuando un elemento

$('#input').focus(function() {
focus obtiene el foco (por ejemplo, al
$(this).css('border', '2px solid blue'); });
hacer clic en un campo de texto).

Se activa cuando un elemento $('#input').blur(function() {

blur
pierde el foco. $(this).css('border', '1px solid black'); });

$('form').submit(function(event) {
Se activa cuando se envía un
submit event.preventDefault(); alert('Formulario
formulario. enviado'); });

$('#box').mouseover(function() {
Se activa cuando el puntero del
mouseover $(this).css('background-color', 'yellow');
mouse entra en un elemento. });

$('#box').mouseout(function() {
Se activa cuando el puntero del
mouseout $(this).css('background-color', 'white');
mouse sale de un elemento. });

Se activa cuando el usuario hace $('#btn').dblclick(function() {

dblclick
doble clic en un elemento. alert('¡Doble clic!'); });

Semana 3: Introducción a JavaScript y jQuery 12

 $(window).resize(function() {
Se activa cuando se redimensiona
resize console.log('Ventana redimensionada');
la ventana del navegador. });

Se activa cuando el usuario

$(window).scroll(function() {
scroll desplaza el contenido de un
console.log('Scroll detectado'); });
elemento.

Efectos y AJAX
1️⃣ Efectos y Animaciones
Método Descripción Ejemplo
.hide() Oculta un elemento $("#caja").hide();

.show() Muestra un elemento $("#caja").show();

Aparece con efecto de

.fadeIn() $("#caja").fadeIn();
desvanecimiento
.fadeOut() Desvanece un elemento $("#caja").fadeOut();

.slideDown() Muestra deslizando hacia abajo $("#caja").slideDown();

.slideUp() Oculta deslizando hacia arriba $("#caja").slideUp();

.toggle() Alterna entre mostrar y ocultar $("#caja").toggle();

1. .hide :

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;

Semana 3: Introducción a JavaScript y jQuery 13

 background-color: lightblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="caja">Caja Visible</div>
<button id="btnHide">Ocultar</button>

<script>
$(document).ready(function() {
$('#btnHide').click(function() {
$('#caja').hide(); // Oculta la caja
});
});
</script>
</body>
</html>

2. .show()

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightgreen;
text-align: center;

Semana 3: Introducción a JavaScript y jQuery 14

 line-height: 100px;
display: none; /* Inicialmente oculto */
}
</style>
</head>
<body>
<div id="caja">Caja Oculta</div>
<button id="btnShow">Mostrar</button>

<script>
$(document).ready(function() {
$('#btnShow').click(function() {
$('#caja').show(); // Muestra la caja
});
});
</script>
</body>
</html>

3. .fadeIn() : Aparece un elemento con un efecto de desvanecimiento.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeIn Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightcoral;
text-align: center;
line-height: 100px;

Semana 3: Introducción a JavaScript y jQuery 15

 display: none; /* Inicialmente oculto */
}
</style>
</head>
<body>
<div id="caja">Caja Desvanecida</div>
<button id="btnFadeIn">Aparecer</button>

<script>
$(document).ready(function() {
$('#btnFadeIn').click(function() {
$('#caja').fadeIn(1000); // Aparece con un efecto de desvanecimien
});
});
</script>
</body>
</html>

4. .fadeOut() : Desvanece un elemento hasta que desaparece.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeOut Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightseagreen;
text-align: center;
line-height: 100px;
}

Semana 3: Introducción a JavaScript y jQuery 16

 </style>
</head>
<body>
<div id="caja">Caja Visible</div>
<button id="btnFadeOut">Desvanecer</button>

<script>
$(document).ready(function() {
$('#btnFadeOut').click(function() {
$('#caja').fadeOut(1000); // Desvanece la caja en 1 segundo
});
});
</script>
</body>
</html>

5. .slideDown() :Muestra un elemento deslizándolo hacia abajo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SlideDown Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightgoldenrodyellow;
text-align: center;
line-height: 100px;
display: none; /* Inicialmente oculto */
}
</style>

Semana 3: Introducción a JavaScript y jQuery 17

 </head>
<body>
<div id="caja">Caja Oculta</div>
<button id="btnSlideDown">Mostrar</button>

<script>
$(document).ready(function() {
$('#btnSlideDown').click(function() {
$('#caja').slideDown(1000); // Muestra la caja con un efecto de des
});
});
</script>
</body>
</html>

6. .slideUp() : Oculta un elemento deslizándolo hacia arriba.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SlideUp Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightpink;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>

Semana 3: Introducción a JavaScript y jQuery 18

 <div id="caja">Caja Visible</div>
<button id="btnSlideUp">Ocultar</button>

<script>
$(document).ready(function() {
$('#btnSlideUp').click(function() {
$('#caja').slideUp(1000); // Oculta la caja con un efecto de deslizam
});
});
</script>
</body>
</html>

7. .toggle() : Alterna entre mostrar y ocultar un elemento.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#caja {
width: 200px;
height: 100px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="caja">Caja Visible</div>
<button id="btnToggle">Alternar</button>

Semana 3: Introducción a JavaScript y jQuery 19

 <script>
$(document).ready(function() {
$('#btnToggle').click(function() {
$('#caja').toggle(1000); // Alterna entre mostrar y ocultar con una a
});
});
</script>
</body>
</html>

Ajax

AJAX permite cargar contenido sin recargar la página.

AJAX (Asincrónico JavaScript y XML) es una técnica de desarrollo web que

permite a las aplicaciones web enviar y recibir datos del servidor sin necesidad de
recargar la página completa. Esto mejora significativamente la experiencia del
usuario, ya que se pueden actualizar partes específicas de una página
dinámicamente.
Aunque el nombre incluye "XML", en la práctica, AJAX puede trabajar con varios
formatos de datos, como JSON , HTML , o incluso texto plano. Hoy en día, JSON
es el formato más común debido a su simplicidad y compatibilidad con
JavaScript.

¿Cómo funciona AJAX?

1. Solicitud al servidor : El navegador envía una solicitud HTTP asincrónica al

servidor usando JavaScript.

Semana 3: Introducción a JavaScript y jQuery 20

 2. Procesamiento en el servidor : El servidor procesa la solicitud y devuelve los
datos solicitados (generalmente en formato JSON).

3. Actualización del DOM : El navegador recibe los datos y actualiza solo la

parte relevante de la página sin recargarla completamente.

Ventajas de AJAX

1. Mejora la experiencia del usuario : Las páginas no necesitan recargarse

completamente, lo que hace que la interacción sea más rápida y fluida.

2. Reducción del tráfico de red : Solo se transfieren los datos necesarios, en

lugar de toda la página.

3. Interactividad : Permite crear aplicaciones web dinámicas y modernas.

Desventajas de AJAX
1. SEO limitado : Los motores de búsqueda pueden tener dificultades para
indexar contenido cargado dinámicamente.

2. Dependencia de JavaScript : Si el usuario tiene deshabilitado JavaScript, las

funcionalidades basadas en AJAX no funcionarán.

3. Complejidad adicional : Requiere un manejo cuidadoso de errores y estados

para garantizar una buena experiencia del usuario.

Método Descripción Ejemplo

Cargar
.load() contenido $("#div").load("archivo.html")
AJAX

Obtener datos
$.get() $.get("api.php", function(d){ console.log(d); });
AJAX

Ejemplo:

Semana 3: Introducción a JavaScript y jQuery 21

 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo AJAX con API</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Lista de Usuarios</h1>
<ul id="listaUsuarios"></ul>
<button id="btnCargarUsuarios">Cargar Usuarios</button>

<script>
$(document).ready(function() {
$('#btnCargarUsuarios').click(function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/users', // URL de la API
method: 'GET',
dataType: 'json',
success: function(data) {
let lista = '';
data.forEach(usuario => {
lista += `<li>${usuario.name} (${usuario.email})</li>`;
});
$('#listaUsuarios').html(lista); // Mostrar la lista en el DOM
},
error: function() {
alert('Error al cargar los usuarios.');
}
});
});
});
</script>

Semana 3: Introducción a JavaScript y jQuery 22

 </body>
</html>

Proyecto JQUERY
Ejercicios Integradores (HTML, CSS y JavaScript)
Ejercicio 1: Formulario Validado con jQuery
Crea un formulario de contacto con validación en tiempo real. Debe verificar que
los campos no estén vacíos y que el correo tenga un formato válido.

<!DOCTYPE html>
<html>
<head>
<title>Formulario Validado</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="formulario">
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#formulario").submit(function(event) {
let email = $("#email").val();

Semana 3: Introducción a JavaScript y jQuery 23

 let regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;

if(email === "" || !regex.test(email)) {

alert("Por favor, introduce un correo válido.");
event.preventDefault();
}
});
});
</script>
</body>
</html>

$(document).ready(function() {
$("#formulario").submit(function(event) {
let email = $("#email").val();
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if(email === "" || !regex.test(email)) {

alert("Por favor, introduce un correo válido.");
event.preventDefault();
}
});
});

Ejercicio 2: Menú Desplegable con jQuery

Implementa un menú de navegación que muestre y oculte sus opciones al hacer
clic en un botón.

<!DOCTYPE html>
<html>
<head>
<title>Menú Desplegable</title>
<style>
#menu {

Semana 3: Introducción a JavaScript y jQuery 24

 display: none;
}
</style>
</head>
<body>
<button id="boton-menu">Mostrar Menú</button>
<ul id="menu">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#boton-menu").click(function() {
$("#menu").slideToggle();
});
});
</script>
</body>
</html>

$(document).ready(function() {
$("#boton-menu").click(function() {
$("#menu").slideToggle();
});
});

Ejercicio 3: Carrusel de Imágenes con jQuery

Desarrolla un carrusel de imágenes donde los usuarios puedan navegar entre
ellas usando botones de siguiente y anterior.

$(document).ready(function() {
let actual = 0;

Semana 3: Introducción a JavaScript y jQuery 25

 let imagenes = $(".imagen");

$("#siguiente").click(function() {
$(imagenes[actual]).hide();
actual = (actual + 1) % imagenes.length;
$(imagenes[actual]).show();
});

$("#anterior").click(function() {
$(imagenes[actual]).hide();
actual = (actual - 1 + imagenes.length) % imagenes.length;
$(imagenes[actual]).show();
});
});

Ejercicio 4: Lista Dinámica de Tareas

Crea una aplicación de lista de tareas donde los usuarios puedan agregar y
eliminar elementos dinámicamente.

<!DOCTYPE html>
<html>
<head>
<title>Lista de Tareas</title>
</head>
<body>
<input type="text" id="tarea">
<button id="agregar">Agregar</button>
<ul id="lista"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#agregar").click(function() {
let tarea = $("#tarea").val();
if(tarea) {
$("#lista").append("<li>" + tarea + " <button class='eliminar'>X</but

Semana 3: Introducción a JavaScript y jQuery 26

 $("#tarea").val("");
}
});

$("#lista").on("click", ".eliminar", function() {

$(this).parent().remove();
});
});
</script>
</body>
</html>

$(document).ready(function() {
$("#agregar").click(function() {
let tarea = $("#tarea").val();
if(tarea) {
$("#lista").append("<li>" + tarea + " <button class='eliminar'>X</button>
$("#tarea").val("");
}
});

$("#lista").on("click", ".eliminar", function() {

$(this).parent().remove();
});
});

Ejercicio 5: Consumo de API y Renderizado de Datos

Utiliza jQuery para hacer una solicitud AJAX a una API pública y mostrar la
información en la interfaz.

Semana 3: Introducción a JavaScript y jQuery 27

 $(document).ready(function() {
$("#cargar").click(function() {
$.get("https://jsonplaceholder.typicode.com/users", function(data) {
let lista = "";
data.forEach(usuario => {
lista += "<li>" + usuario.name + " - " + usuario.email + "</li>";
});
$("#usuarios").html(lista);
});
});
});

Proyecto Semana 3:
Interfaz Dinámica con jQuery:
Agregar al ejercicio del portafolio dinamismo, como un formulario de contacto,
entre otras.

Semana 3: Introducción a JavaScript y jQuery 28