Javascript Talento Tech Completo Para tarea final

Front-End JS
Clase 09 - “Introducción a JavaScript”

¡Les damos la bienvenida!
Vamos a comenzar a grabar la clase

Clase 08.
1. ¿Qué es un framework?
2. Componentes básicos de
Bootstrap
3. Cómo Grid agregar un
componente a nuestro proyecto
4. Git: Descarga de Git
5. Crear un repositorio externo
(GitHub)
6. Comandos básicos (Init, commit,
push)
Bootstrap y Git
Clase 09.
1. ¿Qué es y para qué se usa
JavaScript?
2. Conceptos generales. Sintaxis
básica
3. Variable: ¿qué es y cómo
declararla? Tipos
4. Asignación y cambio del valor
5. Operadores aritméticos
6. Conversión a entero y flotante
JS 1 - Introducción a
JavaScript
Clase 10.
1. Diagrama de flujo
2. Condicional: ¿Qué es?
3. Operadores lógicos y de
comparación: ¿Qué son y cuál es
su uso en los condicionales?
4. Bucles: ¿Qué son? Tipos y
diferencias entre sí
5. Cómo combinar operadores
lógicos y ciclos
JS 2 - Condicionales y
ciclos

JavaScript
JavaScript (JS) es un lenguaje de programación, un mecanismo con el que podemos indicarle al navegador qué tareas
debe realizar, en qué orden y cuántas veces, entre otras. Con JS agregamos comportamiento a nuestro sitio,
permitiendo al usuario interactuar con él, rompiendo con la idea de una web estática.
Junto con HTML y CSS es la tercera pieza fundamental del desarrollo web.
ECMAScript es el estándar que a partir del año 2015 a la actualidad se encarga de regir como debe ser interpretado y
funcionar el lenguaje JavaScript. En la actualidad, JS puede ser interpretado y procesado por una multitud de
plataformas, entre las que se encuentran los navegadores web.

JavaScript: Versiones
Javascript ha sufrido modificaciones que los navegadores han debido implementar para proporcionar soporte a cada
versión de ECMAScript cuanto antes. La lista de versiones de ECMAScript es la siguiente:

JavaScript: Características
● Lenguaje del lado del cliente: el código se ejecuta en el cliente (navegador); no se necesita acceso al servidor.
● Orientado a objetos: utiliza clases y objetos como estructuras reutilizables.
● De tipado débil o no tipado: no es necesario especificar el tipo de dato al declarar una variable.
● De alto nivel: su sintaxis se encuentra alejada del nivel máquina, más cercano a un lenguaje de las personas.
● Lenguaje interpretado: el navegador convierte las líneas de código en el lenguaje de la máquina sin necesidad de
realizar un proceso de compilado.
● Muy utilizado por desarrolladores: es uno de los lenguajes más demandados de los últimos años por su versatilidad y
su infinita capacidad para crear plataformas cada vez más atractivas.
● Interactividad con el usuario: podemos validar el formato de los datos de un formulario (una dirección de email
directamente desde el navegador del cliente), ahorrando tiempo y recursos del servidor.

JavaScript: Primeros pasos
El código de nuestro script debe ser incorporado al código HTML, de forma similar a lo que ocurre con las hojas de
estilo CSS. Existen tres formas de agregar código JavaScript a una página web. Una de ellas es utilizar la etiqueta
<script> en el <head> de nuestro documento (referencia interna):
<html>
<head>
<title>Título de la página</title>
<script>
console.log("Hola!!!")
</script>
</head>
<body>
<p>Ejemplo de texto.</p>
</body>
</html>
Desde el inspector del navegador podremos ver que se escribe
el texto “Hola!!!” en la consola. Esto se logra a través de la
instrucción console.log()

JavaScript: Configuración
La ubicación de la etiqueta <script>
Según cómo esté ubicada la etiqueta <script> el navegador descarga ejecuta el archivo JavaScript en momentos
diferentes:
1. En <head>: antes de empezar a dibujar la página, cuando está en blanco.
2. En <body>: cuando la página se haya dibujado hasta el <script>.
3. Antes de </body>: cuando la página se haya dibujado en su totalidad.
<script>
1. 2. 3.

JavaScript: Consola
Para acceder a la consola Javascript del navegador pulsamos CTRL+SHIFT+J.
Un clásico ejemplo utilizado cuando se comienza a programar es crear un programa que muestre por pantalla
un texto, generalmente el texto «Hola Mundo». O mostrar el resultado de alguna operación matemática. A
continuación, el código JS para realizar ambas tareas, y la salida que podemos ver en la consola del
navegador:
console.log("Hola Mundo");
console.log(2 + 2);

JavaScript: Consola
Podemos mostrar texto, valores numéricos, etc. separados por comas:
console.log("¡Hola a todos! Observen este número: ", 5 + 18);
En esta consola podemos escribir funciones o sentencias de JavaScript que se ejecutan en la página que se
encuentra en la pestaña actual del navegador. De esta forma podemos observar los resultados que nos devuelve en
la consola al realizar diferentes acciones.

JavaScript: Consola
JS posee, además de console.log, varias instrucciones similares para interactuar con el desarrollador:

JS: Incorporar archivo externo
Podemos vincular al documento HTML un archivo con extensión .js usando la etiqueta <script>, haciendo referencia al
nombre del archivo JavaScript con el atributo src (source):
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<p>Ejemplo de texto.</p>
</body>
</html>
Los archivos .js se suelen incorporar en una carpeta llamada “js”.

JS: Comentarios
Los comentarios son utilizados por los programadores para anotaciones. No son tenidos en cuenta por el navegador.
Son un buen recurso cuando queremos omitir la ejecución de ciertas instrucciones.
// esto es un comentario de línea
/*
esto es un comentario de bloque (multilínea)
*/
Comentario de línea
Comentario de bloque

JS: Variables
Es un pequeño espacio en la memoria, donde se guarda un dato. Podemos imaginarlas como “cajitas” dentro de
nuestro programa. Tienen tres características:
● Nombre: debe ser representativo de la información que contiene. Se utiliza para diferenciar unas de otras y
hacer referencia a ellas.
● Tipo de dato: puede ser número, texto, valores booleanos, etc.
● Contenido: el valor concreto que posee el dato almacenado.
Se llaman variables porque pueden cambiar su valor a lo largo del programa. Un programa puede tener muchas
variables, y cada una de ellas tendrá un nombre que la identifique, un valor y un tipo de dato.
¿Qué son?

JS: Variables
¿Como se declaran?
Una variable que se ha declarado con var pero a la que no se le asignó un valor se dice que está indefinida (no
conocemos el tipo de dato):
En este caso la variable está “vacía”, no está definido el valor que colocará en memoria. No se ha asociado ningún
contenido a esa variable.
Las sentencias en JS finalizan con “;”. La imagen anterior corresponde a la declaración de la variable “num4” con un
valor numérico entero de “5”.
var num4 = 5;
var num3;

JS: Variables
¿Como se nombran?
Los nombres de las variables (o identificadores) permiten distinguir una de otras. Para asignar los nombres de las
variables debemos seguir ciertas reglas:
Un identificador de JavaScript debe comenzar con una letra, un guión bajo ( _ ) o un signo de dólar ( $ ). Los
siguientes caracteres también pueden ser dígitos ( 0 - 9 ). JavaScript distingue entre mayúsculas y minúsculas (es
case-sensitive).
Se recomienda usar la escritura camelCase en el nombre de variables que tienen más de una palabra.

JS: Variables
Podemos cambiar el valor de una variable durante el flujo del programa:
El = es el operador de asignación, y permite asignar un valor a una variable. Ese valor puede ser el resultado de una
operación aritmética, que se evalúa y luego se asigna su resultado a la variable:
Luego de ejecutar esa línea, la variable “resultado” contiene el valor “8”.
var IVA= 21;
IVA= 10.5;
console.log(IVA);
var resultado= (1 + 3) * 2;

JS: Constantes
El concepto de constante es similar al de variable, con la salvedad de que la información que contiene es siempre la
misma (no puede variar durante el flujo del programa). Declaramos las constantes utilizando const. Su sintaxis es:
Si intentamos modificar el valor de una constante, obtenemos un error:
const PI= 3.141592;
const IVA= 21;
const IVA= 21;
IVA= 10.5;
console.log(IVA);

JS: Tipos de datos
Las variables de JavaScript pueden contener distintos tipos de datos: numérico, cadena de caracteres, lógicos, indefinido,
null, objetos y más. El tipo de dato es la naturaleza del contenido de la variable o constante. JavaScript tiene tipado
dinámico, es decir que la misma variable se puede utilizar para contener diferentes tipos de datos:
JavaScript deduce cuál es el tipo de dato de la variable. El tipo de dato asociado a esa variable lo determina el dato que se
almacena en ella. Y si luego se le asigna un valor de otro tipo, el tipo de la variable cambia.
var x; // ahora x es indefinido (no tiene un valor definido)
x = 5; // ahora es numérico (5)
x = "Juan"; // ahora es una cadena de caracteres o string ("Juan")

JS: Tipos de datos
Los tipos de datos en JavaScript son los siguientes:
Tipos de datos
primitivos

El último estándar ECMAScript define nueve tipos de datos:
Seis tipos de datos primitivos +info
● Undefined +info
● Boolean +info
● Number +info
● String +info
● BigInt +info
● Symbol +info
● Null (tipo primitivo especial) +info
● Object +info
● Function +info
JS: Tipos de datos

JS: Tipos de datos
Identificar el tipo de dato de una variable
Para determinar qué tipo de dato tiene una variable utilizamos typeOf(), que devuelve el tipo de dato primitivo asociado a
una variable:
var s = "Hola, me llamo Juan"; // s, de string
var n = 28; // n, de número
var b = true; // b, de booleano
var u; // u, de undefined
console.log(typeof s);
console.log(typeof n);
console.log(typeof b);
console.log(typeof u);

JS: Tipos de datos
Las variables numéricas
En JavaScript, los números constituyen un tipo de datos básico (primitivo). Para crear una variable numérica
basta con escribirlas. No obstante, dado que en Javascript “todo es un objeto”, también podemos declararlas
como si fuesen un objeto:
// Declarados como literales
const n1 = 4;
var n2 = 15.8;
// Declarados como objetos
const n1 = new Number(4);
var n2 = new Number(15.8);

JS: Tipos de datos
Objeto Number
Number es el objeto primitivo que permite representar y manipular valores numéricos. El constructor Number contiene
constantes y métodos para trabajar con números. Valores de otro tipo pueden ser convertidos a números usando la
función Number(). Su sintaxis es:
var a = new Number('123'); // a es igual a 123
var b = Number('123'); // b es igual a 123
console.log("a: ", a);
console.log("b: ", b);
Creamos el objeto a mediante el constructor y guardamos en b el valor de la cadena ‘123’ en forma de número.
Mostramos en consola ambos elementos.

JS: Tipos de datos
Comprobaciones numéricas
Varias funciones de JS permiten conocer la naturaleza de una variable numérica (número finito, número entero,
número seguro o si no es representable como un número). Devuelven true o false (un valor booleano). Las
podemos ver en la siguiente tabla:

JS: Comprobaciones numéricas
Veamos dos ejemplos para cada una de estas funciones:
// ¿Número finito?
Number.isFinite(42); // true
Number.isFinite(Infinity); // false, es infinito
// ¿Número entero?
Number.isInteger(5); // true
Number.isInteger(4.6); // false, es decimal
// ¿Número seguro?
Number.isSafeInteger(1e15); // true
Number.isSafeInteger(1e16); // false, es un valor
no seguro
// ¿No es un número?
Number.isNaN(NaN); // true
Number.isNaN(5); // false, es un número

JS: Conversión numérica
Es posible convertir cadenas de texto en números, para posteriormente realizar operaciones con ellos. Las funciones de
parseo numérico, parseInt() y parseFloat(), permiten realizar esto:

Veamos un ejemplo con parseInt(). Recibe como parámetro un texto que queremos convertir a número:
Number.parseInt("42"); // 42
Number.parseInt("42€"); // 42
Number.parseInt("Núm. 42"); // NaN
Number.parseInt("A"); // NaN
parseInt() funciona con variables de texto que contienen números o que comienzan por números. Sin embargo, si la
variable de texto comienza por un valor que no es numérico, parseInt() devuelve un NaN (Not a Number).

Si utilizamos parseInt() con dos parámetros, donde el primero es el texto con el número y el segundo es la base
numérica del número, se realiza la conversión de tipo respetando la base elegida:
Number.parseInt("11101", 2); // 29 en binario
Number.parseInt("31", 8); // 25 en octal
Number.parseInt("FF", 16); // 255 en hexadecimal
Esta modalidad de parseInt() se utiliza para pasar a base decimal un número que se encuentra en otra base (binario,
octal, hexadecimal, etc.) parseFloat() funciona exactamente igual, pero en lugar de operar con números enteros opera
con números en coma flotante.

JS: Operadores aritméticos y de asignación
El operador de asignación (=) le otorga un valor a una
variable y se coloca entre la variable y el valor a
asignar.
Los operadores aritméticos que vemos a la derecha
se utilizan para realizar operaciones aritméticas en
números:
Operador Descripción
+ Suma
- Resta
* Multiplicación
** Exponenciación
/ División
% Módulo: resto de dividir
++ Incremento
-- Decremento
var x = 10;

JS: Concatenación
Los operadores + y += también se pueden utilizar para agregar (concatenar) cadenas. En este contexto, el operador + se
denomina operador de concatenación.
var txt1 = "Juan";
var txt2 = "Pablo";
var txt3 = txt1 + " " + txt2;
console.log(txt3);
var txt4 = "Bienvenidos ";
txt4 += "a Javascript";
console.log(txt4);
Agregar dos números devolverá la suma, pero agregar un número y una cadena devolverá una cadena.

JS: Prompt()
La función prompt es un método del objeto Window. Se utiliza para solicitarle al usuario que ingrese datos por medio del
teclado. Recibe dos parámetros: el mensaje que se muestra en la ventana y el valor inicial del área de texto. Su sintaxis es:
variable = prompt(mensaje, valor inicial)
<script>
var nombre = prompt ("Ingrese su nombre", "")
document.write( "Hola " + nombre)
</script>

JS: Document.write()
document.write() nos permite escribir directamente dentro del propio documento HTML.
<html>
<head>
<script>
document.write("Hola mundo (HTML)");
</script>
</head>
<body>
</body>
</html>

JS: Artículos de interés
Documentación extra:
● ¿Qué es JavaScript?
● ¿Qué es EcmaScript?
● ¿Debo usar “;” en Javascript?
● Tipos de datos en JavaScript
● Variables en JavaScript
● El objeto Number en JavaScript
● Métodos del objeto Math en Developer Mozilla, W3Schools y en LenguajeJS

Ejercicios Prácticos
Crear un programa que reciba dos números como entrada, realice varias operaciones aritméticas con ellos y muestre los resultados en la consola
del navegador. Además, se deberá verificar si el resultado de la suma de ambos números es mayor o menor que un valor dado.
Tips:
1. Validación de entradas: asegurate de que los usuarios ingresen números válidos. Utilizá isNaN() para verificar que las entradas no sean texto u
otros valores no numéricos.
2. Uso de parseFloat() y parseInt(): dependiendo del ejercicio, recomendá que utilicen parseFloat() si los números pueden tener decimales, o
parseInt() si solo aceptan números enteros.
3. Descomposición del problema: recordá que podés dividir el problema en partes más pequeñas. Primero capturá los números, luego realizá las
operaciones, y por último verificá los resultados.
4. Consola del navegador: mostrá los resultados usando console.log() para que los estudiantes puedan ver los cálculos en la consola del
navegador. Es una excelente herramienta para debuggear.
Operaciones con Variables y Tipos de Datos
Optativos | No entregables

Crear un programa que reciba el nombre y la edad de una persona, los concatene en una frase y luego convierta la edad de string a número para verificar si la
persona es mayor de edad.
Tips:
1. Validación de edad: asegurate de que la edad ingresada sea un número válido antes de realizar cualquier operación. Usá isNaN() para evitar errores cuando el
usuario ingresa texto o un valor vacío en lugar de un número.
2. Concatenación de cadenas: recordá que podés concatenar textos fácilmente con el operador +. Experimentá con diferentes formas de concatenar los valores
para personalizar el mensaje de salida.
3. Conversión de tipos: usá parseInt() o Number() para convertir la edad de un string a un número, lo que es clave para realizar comparaciones o cálculos
matemáticos.
4. Mensajes claros: asegurate de mostrar mensajes claros en la consola. Esto ayuda tanto al usuario como a vos mismo a entender si el programa está
funcionando como esperabas.
5. Pruebas con datos diferentes: probá el programa con diferentes nombres y edades (incluyendo casos límite como menores de edad o números cercanos a 18)
para verificar que la lógica del programa sea robusta.
Concatenación y Conversión de Tipos de Datos

Fron-End JS
Clase 10 - “Condicionales y ciclos”

Clase 09.
1. ¿Qué es y para qué se usa
JavaScript?
2. Conceptos generales. Sintaxis básica
3. Variable: ¿qué es y cómo declararla?
Tipos
4. Asignación y cambio del valor
5. Operadores aritméticos
6. Conversión a entero y flotante
JS 1 - Introducción a
JavaScript
Clase 10.
comparación: ¿Qué son y cuál es su
uso en los condicionales?
5. Cómo combinar operadores lógicos y
ciclos
ciclos
Clase 11.
1. Funciones: ¿Que son?
Parámetros de entrada y de
salida
2. Scope global y local
3. Programación modular vs.
Funciones
4. Ejercitación de funciones
5. Parámetros.
6. Funciones nativas.
comparación: ¿Qué son y cuál
es su uso en los condicionales?
JS 3 - Programación
modular con funciones

Diagramas de flujo
¿Qué es un diagrama
de flujo?
Un diagrama de flujo es una
representación visual de los pasos
secuenciales que se siguen para
resolver un problema o realizar una
tarea. Se utiliza mucho en
programación y en otros procesos
para ilustrar cómo se avanza de un
paso al siguiente.

Diagrama de flujo para preparar un café

Diagrama de flujo
Elementos claves:
● Inicio/Fin: Representan el comienzo o la conclusión
del proceso. Se muestra en forma de óvalo.
● Acción/Proceso: Indican una operación o tarea que
se debe realizar, representada por un rectángulo.
● Decisión: Usado para mostrar una bifurcación o
decisión en el proceso (sí o no). Se representa con un
rombo.
● Flechas: Indican la dirección en la que fluye el
proceso.
¿Para qué sirve?
● Ayuda a visualizar claramente el proceso.
● Facilita la identificación de posibles errores o
puntos de mejora.
● Es una herramienta útil para planificar y
organizar la lógica antes de escribir código.

Condicional ¿Qué es?
¿Qué es un
Condicional?
Un condicional es una estructura de
control en programación que permite
ejecutar diferentes bloques de código
dependiendo de si una condición es
verdadera o falsa. Es como tomar
decisiones: “si pasa esto, entonces
hacé esto, si no, hacé otra cosa.”
¿Para qué sirve?
● Permite a los programas tomar decisiones
según diferentes escenarios.
● Hace que el código sea flexible y capaz de
reaccionar a distintos valores de entrada.

Tipos de condicionales
● if: Se usa para ejecutar código sólo si una
condición es verdadera.
if (edad >= 18) {
console.log("Sos mayor de edad.");
}
● if...else: Permite ejecutar un bloque de
código si la condición es verdadera, y otro
bloque si es falsa.
if (edad >= 18) {
} else {
console.log("Sos menor de edad.");
}

Tipos de condicionales
● else if: Se usa para manejar múltiples condiciones.
if (edad >= 18) {
} else if (edad >= 13) {
console.log("Sos un adolescente.");
} else {
console.log("Sos un niño.");
}

Operadores lógicos y
relacionales

Operadores de
comparación Operador Descripción
== igual a
=== igual valor y tipo
!= no igual a
!== igual valor no tipo
> mayor que
< menor que
>= mayor o igual que
<= menor o igual que
? operador ternario
Un operador de comparación (o relacional) compara sus
operandos y devuelve un valor lógico en función de si la
comparación es verdadera (true) o falsa (false). Los
operandos pueden ser valores numéricos, de cadena,
lógicos u objetos. Las cadenas se comparan según el
orden lexicográfico estándar. En la mayoría de los casos,
si los dos operadores no son del mismo tipo, JavaScript
intenta convertirlos a un tipo apropiado para la
comparación. Este comportamiento generalmente resulta
en comparar los operadores numéricamente.

Operadores lógicos
Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos).
Operador Descripción
&& Y lógico (Conjunción)
|| O lógico (Disyunción)
! NO lógico (Negación)
Prop A Prop B Resultado
True True True
True False False
False True False
False False False
Prop A Prop B Resultado
True True True
True False True
False True True
False False False
Prop A Resultado
!True False
!False True
! (Negación)
&& (Conjunción)
|| (Disyunción)

Operadores prefijo y posfijo
Los afijos se anteponen o se posponen en un nombre de una variable. Cuando hablamos de prefijo nos referimos a que se
antepone a la variable y el posfijo se pospone. Se utilizan para realizar operaciones aritméticas, tanto para incrementar
como para decrementar el valor de una variable.
Operador Descripción Ejemplo
i++ incremento posfijo a=i++ primero a=i y después i=i +1
++ i incremento prefijo a=++i primero i=i +1 y después a=i
i - - decremento posfijo a=i - - primero a=i y después i=i – 1
- - i decremento prefijo a=- - i primero i=i - 1 y después a=i

Operadores de asignación
No solamente el = (igual) es un operador de asignación. Existen otras variantes:
Operador Descripción Equivale a
= x = 3 x = 3
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

Jerarquía de los operadores
Al igual que ocurre en las matemáticas, los operadores en
programación tienen un orden de prioridad.
Este orden es el siguiente (de menos prioritario a más
prioritario): operadores booleanos; operadores de
comparación, y finalmente los aritméticos (con el mismo
orden de prioridad que en las matemáticas).
Este orden de prioridad se puede alterar con el uso de los
paréntesis ().

Estructuras de control
Las estructuras de control de flujo, son instrucciones que nos permiten evaluar si se puede cumplir una condición o no,
o si debe ser evaluada n veces.
Los condicionales nos permiten evaluar si una condición cumple o no. Su sintaxis es muy sencilla: podemos evaluar si
la condición es verdadera o falsa. Incluso podemos añadir opciones en el caso de que no se cumpla la primera
condición y se deban evaluar más.
Además, existen otras estructuras de control, a las que se les suele denominar ciclos, bucles o loops. En ellos se evalúa
una condición n veces hasta que ésta se cumpla. Son estructuras existentes en casi todos los lenguajes de
programación, como los bucles for y while, entre otros.

Para controlar el flujo de la ejecución estableciendo alternativas, es decir, que una serie de enunciados se ejecuten en
algunas ocasiones y en otras no, existen las estructuras condicionales. En JS disponemos de las siguientes:

Condicionales
Existe un orden para el desarrollo de un programa, y se lo conoce como “flujo del programa”.
Por defecto, el navegador leerá el script de forma secuencial, una línea luego de otra, desde arriba hacia abajo.
Normalmente, la ejecución de la línea 5 nunca ocurrirá antes de la línea 3.
Al escribir un programa necesitamos establecer condiciones o decisiones, a partir de las cuales el navegador realiza una
acción “A” si se cumple una condición o una acción “B” si no se cumple. Este es el primer tipo de estructura de control que
analizaremos.

El más conocido de estos mecanismos de estructura de control es el if (si condicional). Podemos indicar que se tome un
camino sólo si se cumple la condición que establezcamos. Si no se cumple no se ejecuta nada y el programa sigue su
curso:
var nota = 7;
console.log("Nota: ", nota);
// Condición (si nota es mayor o igual a 5)
if (nota >= 5) {
console.log("¡Estoy aprobado!");
}
Cómo el valor de nota es superior a 5,
nos aparece en la consola el mensaje
«¡Estoy aprobado!». Sin embargo, si
modificamos en la primera línea el valor
de nota a un valor inferior a 5, no
aparecerá el mensaje.
if

Si utilizamos if seguido de un else podemos establecer una acción “A” si se cumple la condición, y una acción “B”.
Modificamos el ejemplo anterior para
mostrar también un mensaje cuando
estamos suspendidos, pero en este caso,
en lugar de mostrar el mensaje
directamente con console.log guardamos
el texto en una nueva variable llamada
calificación:
var nota = 7;
console.log("El examen ha resultado:");
// Condición
if (nota < 5) {
// Acción A (nota es menor que 5)
calificacion = "suspendido";
} else {
// Acción B: (nota es mayor o igual que 5)
calificacion = "aprobado";
}
console.log("Estoy", calificacion);
if else

El operador ternario es una alternativa de condicional if/else con una sintaxis más corta y, en muchos casos, más legible.
Los dos scripts siguientes hacen lo mismo. El primero usa if/else, el segundo el operador ternario:
// Operador ternario: (condición ? verdadero : falso)
var calificacion = nota < 5 ? "suspendido" : "aprobado";
console.log("Estoy", calificacion);
if (nota < 5) {
calificacion = "suspendido";
} else {
calificacion = "aprobado";
}
console.log("Estoy", calificacion)
;
Operador ternario

Para analizar más de 2 condiciones podemos anidar varios if/else uno dentro de otro, de la siguiente forma:
var nota = 7;
console.log("He realizado mi examen.");
// Condición
if (nota < 5) {
calificacion = "Insuficiente";
} else if (nota < 6) {
calificación = "Suficiente";
} else if (nota < 8) {
calificacion = "Bien";
} else {
calificacion = "Sobresaliente";
}
console.log("He obtenido un", calificacion);
if múltiple

If con and
Podemos combinar el If con los operadores lógicos && (AND) y || (OR) para describir condiciones más complejas.
Utilizando && (AND) deben cumplirse todas las condiciones para que la proposición sea verdadera. Caso contrario, será
falsa.
var altura = 0;
var edad = 0;
altura = parseFloat(prompt("Ingrese la altura"));
edad = parseInt(prompt("Ingrese la edad"));
if (altura > 1.30 && edad > 14) {
console.log("Cumple con los requisitos");
} else{
console.log("No cumple con los requisitos");

If con or
Utilizando || (OR) basta con que se cumpla una de las condiciones para que la proposición sea verdadera. En caso de que
todas las condiciones sean falsas, la proposición será falsa.
var color;
color = prompt("Ingrese el color del auto");
if (color == "Rojo" || color == "Verde") {
console.log("El auto pertenece a la categoría A");
} else{
console.log("El auto pertenece a la categoría B");
}

Switch
La estructura de control switch permite definir casos
específicos a realizar en el caso de que la variable
expuesta como condición sea igual a los valores que se
especifican a continuación mediante los case.
Con los if múltiples podemos controlar valores
comprendidos en un rango. Con switch esto no es
posible, ya que solo permite valores concretos y
específicos.
Al final de cada caso es necesario indicar un break para
salir del switch. Si no se hace esto, el programa pasa
automáticamente al siguiente case, aunque no se cumpla
la condición específica.

Bucles e iteraciones
Una de las principales ventajas de la programación es la posibilidad de crear bucles y repeticiones para tareas específicas,
evitando realizarlas varias veces de forma manual. Existen muchas formas de realizar bucles, y analizaremos los más
básicos, similares en otros lenguajes de programación:

Incremento: Cada vez que un bucle finaliza,
se suele realizar el incremento (o
decremento) de una variable, generalmente
de la denominada variable contador.
Bucles e iteraciones
Bucle infinito: Se trata de la situación que tiene lugar
cuando en un bucle no se modifica (incrementando o
decrementando) la variable contador, o cuando
escribimos una condición que nunca tiene lugar. En esos
casos, el bucle se repite eternamente, sin que el flujo del
programa pueda continuar. Cuando esto ocurre, se suele
decir que “el programa se queda colgado”.

El bucle while se usa cuando el fin de la repetición de ciclos depende de una condición (*). Analicemos el siguiente ejemplo
y todas sus partes, para comprender qué ocurre en cada iteración del bucle:
(*) Es muy importante que esa condición en un momento deje de ser verdadera, para evitar que ocurra un loop infinito.
i = 0; // Inicialización de la variable contador
// Condición: Mientras la variable contador sea menor de 5
while (i < 5) {
console.log("Valor de i:", i);
i = i + 1; // Incrementamos el valor de i
}
While

● Antes de entrar en el bucle while, se inicializa la variable i a 0.
● Antes de realizar la primera iteración del bucle, comprobamos la condición.
● Si la condición es verdadera, hacemos lo que está dentro del bucle.
● Mostramos por pantalla el valor de i y luego incrementamos el valor actual de i en 1.
● Volvemos al inicio del bucle para hacer una nueva iteración. Comprobamos de nuevo la condición del bucle.
● Cuando la condición sea falsa, salimos del bucle y continuamos el programa.
En el ejemplo anterior:

Detalle paso a paso de las iteraciones del ejemplo:
While

La sintaxis de un bucle for , uno de los más usados, es más compacta y rápida de escribir que la de un bucle while.
Requiere inicializar la variable, determinar la condición y definir el incremento al comienzo del bucle. Se suele usar cuando
se conoce de antemano cuantas repeticiones se tienen que hacer.
for (var i=1; i<=10; i++) {
console.log(i);
}
for (var i=2; i<=100; i+=2) {
console.log(i);
}
Ejemplo: Mostrar por pantalla los números enteros
del 1 a 10.
Ejemplo: Mostrar por pantalla los múltiplos de 2
hasta 100.
For

El bucle for es uno de los más utilizados en la programación. Veamos el ejemplo anterior utilizando este bucle:
En programación es muy habitual empezar a contar desde cero. Mientras que habitualmente contamos de 1 a 10, en
programación de 10 elementos se cuentan de 0 a 9.
// for (inicialización; condición; incremento)
for (i = 0; i < 5; i++) {
console.log("Valor de i:", i);
}
For

Artículos de interés
● Expresiones y operadores en JavaScript, incluyendo los de asignación, comparación, aritméticos, bit a
bit, lógicos, ternarios, de cadena y otros.
● Tomando decisiones en tu código - condicionales, en developer.mozilla.org
● ¿Cómo utilizar bucles en JavaScript?
● Bucle For en W3Schools.com
● Bucle While en W3Schools.com

Ejercicios prácticos
Crear un programa que reciba la edad de una persona y si es miembro
VIP. El programa deberá verificar lo siguiente:
1. Si la persona tiene 18 años o más, permitirle el acceso al evento.
2. Si además de tener 18 años o más, es miembro VIP, darle
acceso al área exclusiva.
3. Si la persona tiene menos de 18 años, denegar el acceso.
Evaluación de condicionales y operadores lógicos
Tips:
● Validación de entradas: Asegurate de que el usuario ingrese
una edad válida. Podés usar isNaN() para verificar que el valor
ingresado sea un número.
● Uso de operadores lógicos: Combiná el operador && para
verificar que se cumplan ambas condiciones (edad >= 18 y ser
miembro VIP).
● Operador ternario: Considerá usar un operador ternario si la
lógica es sencilla.
● Consola del navegador: Mostrá los resultados usando
console.log() para verificar si se cumplen las condiciones
correctamente.

Crear un programa que reciba una lista de productos, cada uno con un precio y
un indicador de descuento (true o false).
El programa debe iterar sobre la lista y:
1. Mostrar todos los productos con descuento.
2. Mostrar el total de productos sin descuento.
3. Al final, mostrar cuántos productos tienen descuento y cuántos no.
Iterar sobre una lista de productos con bucles y condicionales
Tips:
● Uso de bucles: Utilizá un for para recorrer la lista de productos.
● Condicionales: Dentro del bucle, utilizá if para verificar si el producto
tiene descuento (producto.descuento === true).
● Validación: Podés agregar validaciones para asegurarte de que los datos
de los productos sean correctos (nombres no vacíos, precios válidos).
● Consola del navegador: Mostrá los resultados de los productos con
descuento y el total de productos en la consola usando console.log().

La resolución del cuestionario es de carácter obligatorio para poder
avanzar en la cursada.
¡NUEVO CUESTIONARIO EN
CAMPUS!

Front-End JS
Clase 11 - “Programación modular con funciones”

¡Les damos la bienvenida!
Vamos a comenzar a grabar la
clase

Clase 10.
comparación: ¿Qué son y cuál es
su uso en los condicionales?
5. Cómo combinar operadores
lógicos y ciclos
ciclos
Clase 11.
1. Funciones: ¿Que son?
Parámetros de entrada y de
salida
3. Programación modular vs.
Funciones
4. Parámetros.
5. Funciones nativas.
comparación: ¿Qué son y cuál
es su uso en los
condicionales?
Clase 12.
1. Manipulación del DOM
2. Definición, alcance y su
importancia para operar sobre
elementos HTML
3. Eventos en JS
4. Eventos: ¿Que son, para qué
sirven y cuáles son los más
comunes?
5. Escuchar un evento sobre el
DOM
JS 3 - DOM y eventos

Funciones
Las funciones son estructuras esenciales dentro del código.
Una función es un grupo de instrucciones que constituyen una unidad lógica del programa y resuelven un problema muy
concreto.
Presentan varias ventajas, entre ellas las de permitir dividir un problema complejo en partes menores y más simples,
reutilizar código en el mismo o en otro programa, simplificar
la depuración, etcétera.
JavaScript proporciona al usuario una serie de funciones implementadas y
listas para utilizar. Sin embargo, no es difícil encontrar situaciones en las que necesitamos realizar alguna tarea para la
cual no existe una función disponible, y debemos utilizar los mecanismos que nos proporciona JS para construir nuestras
propias funciones.

La metodología de división por módulos se conoce habitualmente como “divide y vencerás” y en
programación se llama Desarrollo Top Down.
¿Cuál será la estrategia para resolver problemas? Pensar en el problema general e ir
descomponiéndolo en sub-problemas (sub-algoritmos). A su vez, estos subproblemas se podrán seguir
dividiendo hasta llegar a un subproblema lo bastante simple como para poder resolverse de forma
sencilla.
Programación Modular

Podemos definir la abstracción como el aislamiento de un elemento de su contexto o del resto de los elementos que lo
acompañan. En programación la abstracción está relacionada con “qué hace”.
Concretamente, la abstracción se produce cuando creamos módulos.
Lo importante, para entender el concepto de abstracción, es comprender que cada módulo es independiente de los
demás módulos (bajo acoplamiento) y que es ideal que realice una sola tarea (alta cohesión).
Los módulos son independientes entre sí, aunque algunos pueden necesitar colaborar con otros, o trabajar de forma
conjunta.
Abstracción

Las funciones nos permiten agrupar líneas de código en tareas con un nombre (subprograma), para que posteriormente
podamos referenciar ese nombre para realizar dicha tarea. Algunas razones para declarar funciones:
● Simplificación: Cuando un conjunto de instrucciones se va a usar muchas veces, se crea una función con esas
instrucciones y se llama la cantidad de veces que sea necesario, reduciendo un programa complejo en unidades
más simples.
● División: Una función me permite modularizar, es decir, armar módulos. De esta manera un equipo puede dividir
el trabajo en partes. Cada integrante realiza una función, para luego integrarlas en un programa principal más
grande.
● Claridad: Usando funciones un programa gana claridad, aunque esa función solo se llame una vez.
● Reusabilidad: Una función es reutilizable, sólo es necesario cambiar los valores de entrada.
Funciones

Para usar funciones es necesario hacer dos cosas:
● Declarar la función: crear la función es darle un nombre, definir los datos de entrada (opcional) e indicar las tareas
(instrucciones) que realizará y qué valor retornará (opcional).
● Ejecutar la función: «Llamar» (invocar) a la función para que realice las tareas del código que aloja. Se puede invocar una
misma función la cantidad de veces que se necesita desde el programa principal.
// Declaración de la función "saludar"
function saludar() {
// Contenido de la función
console.log("Hola, soy una función")
}
// Ejecución de la función
saludar()
Primer paso:
Declarar la función
Segundo paso:
Ejecutarla
Funciones

El nombre de la función tiene que ser significativo y describir lo que hace. Los nombres de las funciones tienen las
mismas características que los de las variables. Idealmente deben ser:
● Nombres simples, claros.
● Representativos de la tarea que realiza la función.
● Verbos en infinitivo (-ar, -er, -ir).
● Si es más de una palabra, utilizar la nomenclatura camelCase.
Es necesario definir los datos de entrada (si existen) e incluir las instrucciones necesarias para que realice su tarea.
Opcionalmente se puede definir qué valor retornará.
Funciones

for (i = 1; i <= 10; i++) {
console.log("1 x", i, "=", 5 * i)
}
Este código muestra la tabla de multiplicar
por 5.
// Primera vez
for (i = 1; i <= 10; i++) {console.log("5 x", i, "=", 5 * i)}
// Segunda vez
// Tercera vez
Este código muestra la tabla de multiplicar
por 5 tres veces. Funciona, pero usa
demasiado código, repetido.
//Declaración de la función tablaDelCinco()
function tablaDelCinco(){
for (i = 1; i <= 10; i++){console.log("5 x", i, "=", 5 * i)}
}
//Bucle que ejecuta 3 veces la función tablaDelCinco()
for (let i = 1; i <= 3; i++) {tablaDelCinco()}
Solución con bucle y función. La función
tablaDelCinco() usa un for de 10 iteraciones.
El otro for ejecuta la función 3 veces.
Funciones | Ejemplo

Según reciban o no datos, y devuelvan o no valores, las funciones se pueden clasificar en:
Funciones sin parámetros:
● Que no devuelven valores
● Que devuelven valores
Funciones con parámetros:
● Que no devuelven valores
● Que devuelven valores
Funciones | Clasificación

Los parámetros son las variables que ponemos cuando se define una función. En la siguiente función tenemos dos parámetros
“a” y “b”:
function sumar(a, b){
console.log(a + b)
}
var suma = sumar(7, 4) //Pedimos valores
Los argumentos son los valores que se pasan a la función cuando ésta es invocada, “7” y “4” en el ejemplo:
Dentro de la función, los argumentos se copian en los parámetros y son usados por ésta para realizar la tarea.
Funciones | Parámetros y Argumentos

Esta función tiene un sólo parámetro que indica hasta qué valor calculará:
En este ejemplo la función muestra un texto concatenado a un argumento pasado por parámetro:
// Declaración
function tablaMultiplicar(hasta) {
for (var i = 1; i <= hasta; i++)
console.log("1 x", i, "=", 1 * i)
}
//Ejecución
tablaMultiplicar(4)
// Declaración
function saludarDos(miNombre){
console.log("Hola " + miNombre)
}
//Ejecución
saludarDos("Codo a Codo") //Argumento fijo
var nombre= prompt("Ingrese su nombre")
saludarDos(nombre) //Argumento variable
Funciones | Parámetros y Argumentos

Cuando se utilizan parámetros múltiples hay que respetar el orden en que los declaramos y el de los argumentos
usados al llamarla. Esta función tiene dos parámetros: el valor de la tabla a generar y hasta qué valor calculará.
// Declaración
function tablaMultiplicar(tabla, hasta) {
for (var i = 1; i <= hasta; i++)
console.log(tabla + " x " + i + " = ", tabla * i)
}
// Ejecución
tablaMultiplicar(1, 10) // Tabla del 1, calcula desde el 1 hasta el 10
tablaMultiplicar(5, 8) // Tabla del 5, calcula desde el 1 hasta el 8
Funciones | Parámetros múltiples

Ejemplo con tres parámetros. Se evalúa la mayoría de edad de una persona:
// Declaración
function mayoriaEdad(miApellido, miNombre, miEdad){
console.log("Apellido y nombre: " + miApellido + ", " + miNombre)
if (miEdad >= 18) {
console.log("Es mayor de edad " + "(" + miEdad + ")")}
else{
console.log("No es mayor de edad " + "(" + miEdad + ")")}
}
//Ejecución
var ape= prompt("Ingrese su apellido")
var nom= prompt("Ingrese su nombre")
var edad= prompt("Ingrese su edad")
mayoriaEdad(ape, nom, edad)
Esta función recibe tres parámetros y en función
del valor de uno de ellos (miEdad) determina si la
persona es mayor de edad (>=18)
Funciones | Parámetros múltiples

Los parámetros predeterminados de función permiten que
los parámetros con nombre se inicien con valores
predeterminados si no se pasa ningún valor o undefined.
En JavaScript, los parámetros de función están
predeterminados en undefined. Sin embargo, a menudo
es útil establecer un valor predeterminado diferente.
function multiplicar(a, b = 1) {
return a * b;
}
console.log(multiplicar(5, 2)); // salida: 10
console.log(multiplicar(5)); // salida: 5
Parámetros predeterminados

Una función puede devolver información, para ser utilizada o almacenada en una variable. Se utiliza la palabra clave return, que
regresa un valor y finaliza la ejecución de la función. Si existe código después del return, nunca será ejecutado. Puede haber más de
un return por función.
// Declaración
function sumar(a, b) {
return a + b // Devolvemos la suma de a y b al exterior de la función
}
// Ejecución
var a = 5, b = 5
var resultado = sumar(a, b) // Se guarda 10 en la variable resultado
console.log("La suma entre "+ a +" y "+ b +" es: "+ resultado)
Funciones | retorno de valores

Veamos dos funciones que hacen lo mismo, una retorna valores y otra no:
function sumar(num1, num2){
var suma = num1 + num2
console.log("La suma es " + suma)
}
sumar(2,5)
function sumarDos(num1, num2){
var suma = num1 + num2
return suma
}
n1 = 2
n2 = 3
var resultado = sumarDos(n1, n2)
console.log("El resultado es: " + resultado)
En este caso la función devuelve un valor, y se almacena en una
variable llamada resultado que contiene la suma de dos valores
realizada por la función sumarDos.
Esta función muestra “La suma es …” en la consola, pero no
retorna ningún valor al programa.

Otra alternativa es hacer que la función guarde directamente el resultado que devuelve en una variable:
En este caso se piden dos valores y si la
condición no se cumple se asume que el valor2
es el máximo (no es necesario un else)
Al retornar un valor, éste se guarda en la variable
suma.
var suma = function sumarTres(numero1, numero2) {
return numero1 + numero2
}
console.log(suma(40, 15))
var numeroMaximo = function (valor1, valor2) {
if (valor1 > valor2) { return valor1 }
return valor2
}
var v1 = parseInt(prompt("Ingrese un número entero"))
var v2 = parseInt(prompt("Ingrese otro número entero"))
console.log("El número máximo es:", numeroMaximo(v1,v2)
)

El scope (alcance) determina la accesibilidad (visibilidad) de las variables. Define ¿en qué contexto las variables son visibles y
cuándo no lo son?. Una variable que no está “al alcance actual” no está disponible para su uso.
En JavaScript hay dos tipos de alcance:
● Alcance local (por ejemplo, una función)
● Alcance global (entorno completo de JavaScript)
Las variables definidas dentro de una función no son accesibles (visibles) desde fuera. La función “crea un ámbito cerrado” que
impide el acceso a una variable de su interior desde fuera de ella o desde otras funciones.
Scope (Alcance)

Variables Locales
En el siguiente ejemplo creamos una variable llamada carName a la cual le asignamos un valor:
// aca no puedo usar la variable carName
function myFunction() {
var carName = "Volvo"
// aca si puedo usar la variable carName
}
// aca no puedo usar la variable carName
Podremos acceder al contenido de la variable carName
solamente dentro de la función.
Este tipo de variables son de alcance local, porque solamente valen en el ámbito de la función, y no en el ámbito a nivel de
programa. Los parámetros de la función funcionan como variables locales dentro de las mismas.
Scope (Alcance)

Una variable declarada fuera de una función se convierte en global. Esto quiere decir que tiene alcance global: todos los scripts y
funciones de una página web pueden acceder a ella.
En este caso podremos acceder al
contenido la variable carName tanto
desde fuera como desde adentro de
la función
El alcance determina la accesibilidad de variables, objetos y funciones de diferentes partes del código.
var carName2 = "Fiat"
// aqui si puedo usar carName2
// aqui tambien puedo usar la variable carName2
}
Scope (Alcance)

Variable automáticamente global
Si asignamos un valor a una variable que no ha sido declarada, se convertirá en una variable global. Este ejemplo declara la variable
global carName, aún cuando su valor se asigna dentro de una función.
En este caso podremos acceder al contenido la variable
carName tanto desde fuera como desde adentro de la
función por ser automáticamente global.
La vida útil de una variable comienza cuando se declara. Las variables locales se eliminan cuando se completa la función.
myFunction();
// aquí puede se puede usar carName
carName = "Volvo" // variable no declarada
}
Scope (Alcance)

let: declara una variable de alcance local, limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
var: define una variable global o local en una función sin importar el ámbito del bloque.
var a = 5
var b = 10
if (a === 5) {
let a = 4 // El alcance es dentro del bloque if
var b = 15 // El alcance es global, sobreescribe a 10
console.log(a) // 4, por alcance a nivel de bloque
console.log(b) // 15, por alcance global
}
console.log(a) // 5, por alcance global
console.log(b) // 15, por alcance global
Let y Var

¿Qué son las Funciones Nativas?
Las funciones nativas en JavaScript son
aquellas que ya vienen predefinidas en el
lenguaje. Nos permiten realizar operaciones
comunes sin necesidad de escribir código
adicional. Son herramientas listas para usar y
optimizan el desarrollo, porque evitan que
tengamos que "reinventar la rueda".
alert("¡Hola, Mundo!");
parseInt(): Convierte una cadena de texto en
un número entero.
let numero = parseInt("10");
Math.random(): Genera un número aleatorio
entre 0 y 1.
let aleatorio = Math.random();
Date(): Devuelve la fecha y hora actual.
let hoy = new Date();
console.log(hoy);
Funciones nativas

console.log(): Imprime un mensaje en la consola del
navegador. Ideal para depuración.
console.log("Mensaje de depuración");
toUpperCase() y toLowerCase(): Convierte una cadena de
texto a mayúsculas o minúsculas.
let texto = "Hola";
console.log(texto.toUpperCase()); // Imprime "HOLA"
console.log(texto.toLowerCase()); // Imprime "hola"
slice(): Extrae una parte de un string o array.
let palabra = "JavaScript";
console.log(palabra.slice(0, 4)); // Imprime "Java"
¿Por qué usar Funciones Nativas?
● Ahorrás tiempo y código.
● Son más eficientes porque
están optimizadas.
● Facilitan la legibilidad y
mantenimiento del código.
Más funciones nativas

Crear una función que reciba como parámetros el nombre y la edad de una persona. La función debe realizar lo siguiente:
1. Verificar si la persona es mayor de edad (18 años o más).
2. Mostrar un mensaje en la consola que diga si la persona es mayor o menor de edad.
3. Si es menor de edad, mostrar también cuántos años le faltan para cumplir 18.
Tips:
● Uso de parámetros: Pasar el nombre y la edad como argumentos a la función.
● Condicionales: Usar un if...else para determinar si es mayor o menor de edad.
● Consola del navegador: Utilizá console.log() para mostrar los resultados en la consola.
Función para Validar la Edad de una Persona

Crear una función que reciba el precio de un producto y el porcentaje de IVA (Impuesto al Valor Agregado). La función debe:
1. Calcular el precio total del producto, sumando el IVA.
2. Mostrar el precio total en la consola.
3. Hacer que el IVA sea un parámetro opcional, con un valor predeterminado del 21% (típico en Argentina).
Tips:
● Parámetros opcionales: Definir un valor por defecto para el IVA si no se proporciona uno.
● Operaciones matemáticas: Calcular el IVA y sumarlo al precio del producto.
● Consola del navegador: Mostrar el precio final con console.log().
Función para Calcular el Precio Total de un Producto con IVA

Front-End Js
Clase 12 - JS 3: “DOM y eventos”

Clase 11.
1. Funciones: ¿Que son? Parámetros
de entrada y de salida
3. Programación modularvs.
comparación
6. Bucles:
Clase 12.
1. Manipulacióndel DOM
2. Definición, alcance y su importancia
para operar sobre elementos HTML
3. Eventos en JS
4. Eventos: ¿Que son, para qué sirven
y cuáles son los más comunes?
5. Escuchar un evento sobre el DOM
JS 3 - Dom y eventos
Clase 13.
1. Manipulacióndel DOM
2. Definición, alcance y su importancia
para operar sobre elementos HTML
3. Eventos en JS
4. Eventos: ¿Que son, para qué sirven
y cuáles son los más comunes?
5. Escuchar un evento sobre el DOM

¿Qué es el DOM?
El DOM (Document Object Model) es una interfaz de programación para los documentos HTML. Proporciona una
representación estructurada del documento y define de qué manera los programas pueden acceder y modificar su
estructura, estilo y contenido. El DOM representa al documento como un grupo de nodos y objetos con sus propiedades
y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación, como JavaScript.
Todo esto permite al desarrollador modificar esta estructura de forma dinámica, añadiendo o modificando elementos,
cambiando sus atributos, etc. Estas tareas pueden automatizarse y responder a eventos como pulsar un botón, mover el
ratón, hacer clic en un elemento, etc.

La estructura del DOM es jerárquica, con elementos que dependen unos de otros, en forma de árbol.
Seguí este link para ver +info
DOM | Estructura jerárquica

El objeto document contiene los atributos y métodos, de la estructura que representa al documento. JavaScript posee una
API que permite su manipulación.
El DOM posee elementos (element) y nodos (node).
Un elemento representa una etiqueta HTML y un
nodo es una clase (no un objeto) en la que se basan
muchos otros objetos del DOM.
Más información en el siguiente link: info
DOM | Manipulando la estructura

JavaScript accede al DOM usando el objeto document mediante sus atributos y métodos.
Todos los elementos (element) HTML tendrán un tipo de dato específico. Algunos de ellos son:
DOM | Accediendo al objeto

Método tradicional
Document permite identificar elementos por sus atributos, por ejemplo, su id o class. La forma tradicional de hacerlo es
mediante el método getElementById() o algunos de los que vemos en la tabla. Devuelven o bien un elemento, un arreglo
con todos los que son de esa clase, o null en caso de que no exista el elemento buscado.
DOM | Modificar documento

Los métodos que comienzan con get devuelven un valor. Los que comienzan con set modifican o establecen un valor.
El argumento del método getElementById() es el id del elemento, y retorna el objeto referenciado. El método innerHTML()
escribe código HTML en un elemento. El argumento es una cadena de texto, y si usamos comillas invertidas (` ) para definir
el string, se respetan los saltos de línea.
getElementsByClassName retorna un array de objetos, ya que pueden existir múltiples elementos de una clase CSS.

El código del ejemplo guarda en el array x todos los
elementos (objetos) de la página HTML que sean de la clase
“ejemplo”.
Luego, al elemento x[0] se le modifica su contenido
utilizando el método innertHTML. El segundo <div>
permanece inalterado, porque es el elemento [1] del arreglo.
<!DOCTYPE html>
<html>
<body>
<h1>DOM</h1>
<p>Solo cambia el primer elemento:</p>
<div class="ejemplo">Elemento 1</div>
<script>
var x =
document.getElementsByClassName("ejemplo")
x[0].innerHTML = "Hola Codo a Codo!"
</script>
</body>
</html>

El código del ejemplo espera a que se dispare el evento
“onclick” del botón, que invoca a la función “cambiarTexto”.
La función guarda en el array x todos los elementos
(objetos) de la página HTML que sean de la clase “ejemplo”,
los recorre usando un bucle for, y usando su método
innerHTML les cambia su contenido.
<!DOCTYPE html>
<html>
<body>
<h1>DOM</h1>
<p>Cambiar todos los elementos:</p>
<script>
function cambiarTexto() {
var x=document.getElementsByClassName("ejemplo")
for (i = 0; i < x.length; i++) {
x[i].innerHTML="Codo a Codo! " +(i+1)
}
}
</script>
<button onclick="cambiarTexto()">
Cambiar todos los párrafos</button>
</body>
</html>

De forma similar funcionan los métodos getElementsByName(name) y getElementsByTagName(tag), que se
encargan de buscar elementos HTML por su atributo name o por su tag (etiqueta) de elemento HTML,
respectivamente. En el siguiente ejemplo las constantes nicknames y divs contendrán una lista de objetos:
// Obtiene todos los elementos con atributo name="nickname"
const nicknames = document.getElementsByName("nickname")
// Obtiene todos los elementos <div> de la página
const divs = document.getElementsByTagName("div")

Métodos más recientes
En los últimos años JS ha añadido dos nuevos métodos de búsqueda de elementos que son simples de usar, sobre todo si
conocemos los selectores CSS. Son los métodos .querySelector() y .querySelectorAll():
Con estos métodos podemos reemplazar los “métodos tradicionales” e incluso realizar nuevas intervenciones en el DOM
gracias a su flexibilidad.

.querySelector(selector) devuelve el primer elemento que encaja con el selector CSS suministrado en selector. Al igual que
.getElementById(), en caso de no coincidir con ninguno devuelve null.
En la primera línea incluimos en el argumento un # porque se trata de un id. En la segunda estamos recuperando el primer
elemento con clase info que esté dentro de un elemento de la clase main. Eso podría realizarse con los métodos
tradicionales, pero sería necesario un código más extenso y complejo. querySelector() simplifica el proceso.
const page = document.querySelector("#page") // <div id="page"></div>
const info = document.querySelector(".main .info") // <div class="info"></div>

El método .querySelectorAll(selector) es similar a .querySelector(), pero en caso de que haya más de un elemento que
se ajuste a lo indicado por selector, devuelve un array con todos los elementos que coinciden con él:
// Obtiene todos los elementos con clase "info"
const infos = document.querySelectorAll(".info")
// Obtiene todos los elementos con atributo name="nickname"
const nicknames = document.querySelectorAll('[name="nickname"]')
// Obtiene todos los elementos <div> de la página HTML
const divs = document.querySelectorAll("div")
.querySelectorAll() siempre nos devolverá un array con uno o más objetos, o vacío si no encuentra elementos de ese tipo en
el documento.

Existen métodos para crear diferentes elementos HTML o nodos, que nos permiten agregar al documento estructuras
dinámicas, mediante bucles o estructuras definidas:
Métodos Descripción
Element .createElement(tag,
options)
Crea y devuelve el elemento HTML definido por tag. Ejemplo
Node .createComment(text) Crea y devuelve un nodo de comentarios HTML .
Node .createTextNode(text) Crea y devuelve un nodo HTML con el texto text. Ejemplo
Node .cloneNode(deep) Clona el nodo HTML y devuelve una copia. deep es false por
defecto. Ejemplo
Boolean .isConnected Indica si el nodo HTML está insertado en el documento.
Ejemplo
DOM | Crear elementos HTML

.createElement() podemos crear un elemento HTML en memoria. Este elemento puede insertarse en el documento HTML
con .appendChild(), en una posición determinada. El ejemplo crea un botón y lo coloca en el body:
<!DOCTYPE html>
<html>
<body>
<p>Creamos un elemento 'button':</p>
<script>
const btn = document.createElement("button") //Creamos el boton y lo guardamos en btn
btn.innerHTML = "Soy un botón!" // Le ponemos el texto
document.body.appendChild(btn) // Lo agregamos al <body>
</script>
</body>
</html>

.createTextNode() es un método que crea nodos de texto. Esos elementos luego pueden ser asignados a un objeto. En el
ejemplo se crea un nodo de texto y se lo asigna a un <h1>, que luego se coloca en el <body>:
<!DOCTYPE html>
<html>
<body>
<p>Creamos un h1 con texto:</p>
<script>
const h1 = document.createElement("h1") //Creamos el <h1>
const textNode = document.createTextNode("¡Hola!") //Creamos el texto
h1.appendChild(textNode) //Colocamos el texto como hijo del <h1>
document.body.appendChild(h1) //Y ponemos el <h1> dentro del <body>
</script>
</body>
</html>
DOM | Crear elementos
HTML

.cloneNode() toma un nodo, y devuelve una copia. Mirá el siguiente link: +info
<!DOCTYPE html>
<html><body>
<button onclick="clonar()">Copiar</button>
<p>Presionando el botón se copia un elemento de una lista a otra.</p>
<ul id="lista1"><li>Café</li><li>Té</li></ul>
<ul id="lista2"><li>Agua</li><li>Leche</li></ul>
<p>Cambiando <b>deep</b> a false sólo se clonan elementos vacíos.</p>
<script>
function clonar() {
const nodo = document.getElementById("lista2").lastChild //Leemos el nodo a clonar, lo
const clon = nodo.cloneNode(true); //clonamos y guardamos en “clon”
document.getElementById("lista1").appendChild(clon) //Y lo agregamos en la lista2
}
</script>
</body></html>

Los objetos que obtenemos a partir de métodos como .createElement() o .getElementById(), entre otros, poseen atributos
que pueden ser modificados:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Este texto se va a borrar.</p>
<script>
const p = document.getElementById("p1")
p.innerHTML = "Codo a Codo" // <p id="p1">Codo a Codo</p>
p.className = "dato" // <p id="p1" class="data">Codo a Codo</p>
p.style.color = "red" // <p id="p1" class="data" style="color:red">Codo a Codo</p>
</script>
</body>
</html>
DOM | Modificar elemento

.textContent e .innerHTML permiten recuperar o modificar el contenido de texto de un elemento, pero no son equivalentes:
Propiedades Descripción
.textContent Devuelve o asigna el texto del elemento. No atiende la sintaxis HTML. Ejemplo
.innerHTML Devuelve o asigna el contenido HTML del elemento. Ejemplo
const div1 = document.querySelector("div") // <div></div>
div1.textContent = "Hola a todos" // <div>Hola a todos</div>
div1.textContent // "Hola a todos"
const div2 = document.querySelector(".info") // <div class="info"></div>
div2.innerHTML = "<strong>Importante</strong>" // Interpreta el HTML
div2.innerHTML // "<strong>Importante</strong>"
div2.textContent // "Importante”
DOM | Reemplazar elemento

Las propiedades y métodos vistos permiten, por ejemplo, insertar una imágen en el documento HTML:
const img = document.createElement("img")
img.src = "https://lenguajejs.com/assets/logo.svg"
img.alt = "Logo Javascript"
document.body.appendChild(img)
.appendChild() es el método que permite agregar un elemento al DOM. En este caso, se agrega en el <body>.
También es posible eliminar elementos, para ello debemos utilizar el método .remove()
DOM | Insertar imagen

Entre las herramientas que provee la API de JS se encuentran:
Capítulo del DOM Descripción
Buscar etiquetas Métodos como .getElementById(), .querySelector() o .querySelectorAll(), entre otras.
Crear etiquetas Métodos para crear elementos en la página y trabajar con ellos de forma dinámica.
Insertar etiquetas Métodos para añadir elementos al DOM, como .appendChild(), .insertAdjacentHTML(), entre otros.
Gestión de clases CSS .classList permite manipular clases CSS desde JS, para añadir, modificar o, eliminar clases SS de un
elemento.
Navegar entre elementos Métodos y propiedades para «navegar» a través de la jerarquía del DOM, por la estructura del
documento y la posición de los elementos en la misma.
DOM | API nativa de JS

Los eventos son acciones que realizan las personas que navegan nuestros sitios web, a las que podemos “escuchar” o
“recibir” desde JavaScript e indicar qué función o bloque de código se debe ejecutar como respuesta acorde a la interacción.
Estos eventos permiten un diálogo entre el sitio web y quienes lo utilizan, por ejemplo cuando hace clic en un botón. Existen
tres formas de definir eventos en nuestro código:
Estrategia Ejemplo
A través de un atributo HTML, asociando al mismo una función. <tag onclick="...">
A través de una propiedad de JavaScript, a la que asociamos la función. tag.onclick = ...
A través del método addEventListener() , que permite crear un “atendedor”
de eventos.
tag.addEventListener("click", ...)
DOM | Eventos en JS

Lanzar eventos desde atributos HTML
Probablemente sea la forma más sencilla de atender un evento. Definimos un evento a través de un atributo HTML, por
ejemplo onClick. En el ejemplo, al hacer click sobre el botón se ejecuta la función flecha enviarMensaje. Esta función genera
un mensaje “Hola!” mediante la función de javaScript alert.
<button onClick="enviaMensaje()">Haz clic!</button>
<script>
const enviarMensaje = () => alert("Hola!")
</script>
DOM | Eventos en JS

Lanzar eventos desde propiedades
Otra forma de utilizar eventos es utilizar las propiedades de Javascript. Por cada evento, existe una propiedad disponible en
el elemento en cuestión:
<button>Haz clic!</button>
<script>
const button = document.querySelector("button")
button.onclick = () => alert("Hola!")
</script>
DOM | Eventos en JS

.addEventListener() es la forma más elaborada de utilizar eventos: +Link Con más info
<!DOCTYPE html>
<html><head>
<script>
function modifyText() { // Función que modifica el contenido de #t2
var t2 = document.getElementById("t2")
t2.firstChild.nodeValue = "Tocado!"
}
function load() { // Función que establece el EventListener()
var el = document.getElementById("t2")
el.addEventListener("click", modifyText, false)
}
// Al cargar el documento, agregamos el EventListener()
document.addEventListener("DOMContentLoaded", load, false)
</script>
</head>
<body>
<p id="t2">¡Haz click aquí!</p>
</body></html>
DOM | Eventos en JS

Crear un programa que, al hacer clic en un botón, cambie el
contenido de un párrafo en la página utilizando los métodos para
acceder al DOM. Los pasos específicos son:
1. Al cargar la página, se debe mostrar un párrafo con el texto:
"Texto inicial".
2. Al hacer clic en un botón, se debe cambiar ese texto por: "El texto
ha sido modificado con JavaScript".
3. Usar getElementById() para seleccionar el párrafo y modificar su
contenido con textContent.
Modificación del DOM con Métodos de selección
Tips:
● Selección por id: Utilizar getElementById() para
acceder al elemento del DOM que queremos
modificar.
● Modificación de contenido: Utilizá textContent
para cambiar el texto del párrafo.
● Eventos: Usar addEventListener para ejecutar la
modificación cuando se hace clic en el botón.

Desarrollar un programa que permita a la persona agregar nuevos
elementos a una lista mediante un botón. Los pasos son:
1. Al hacer clic en un botón, se debe crear un nuevo elemento
<li> en una lista ya existente.
2. El contenido del nuevo elemento debe ser el texto: "Nuevo
Elemento".
3. Usar createElement() para crear el nuevo elemento y
appendChild() para añadirlo a la lista.
4. Cada vez que se agrega un nuevo elemento, se debe mostrar
una alerta indicando: "Se ha añadido un nuevo elemento".
Creación dinámica de elementos y eventos
Tips:
● Creación de elementos: Usar createElement()
para generar el nuevo nodo <li>.
● Agregar al DOM: Usar appendChild() para
añadir el nuevo elemento a la lista.
● Eventos: Utilizá addEventListener() para
asociar la acción de agregar el elemento al
evento click del botón.

Artículos de interés
Material de lectura:
● Eventos en JS: https://developer.mozilla.org/es/docs/Web/Events
● Lista de los tipos de eventos más habituales en Javascript: https://desarrolloweb.com/articulos/1236.php
● addEventListener: https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
Videos:
● 10 Fundamentos modernos que debes conocer en JS:
https://www.youtube.com/watch?v=Z4TuS0HEJP8&list=PLPl81lqbj-4I2ZOzryjPKxfhK3BzTlaJ7
● DOM fundamentos: https://www.youtube.com/watch?v=bYdUoqi6JXE
● DOM delegación de eventos: https://www.youtube.com/watch?v=OspjzGQa86g&t=8017s
● Formularios: https://www.youtube.com/watch?v=L5Yin6K4ARs
● Callback, Promesas y Async Await: https://www.youtube.com/watch?v=V0tiKDHk7t0
● Fetch: https://www.youtube.com/watch?v=cBuTxGdGjM8

Front-End JS
Clase 13 - “ LocalStorage, SessionStorage y
Carrito de Compras”

Clase 12.
1. Manipulación del DOM
2. Definición, alcance y su
importancia para operar sobre
elementos HTML
3. Eventos en JS
4. Eventos: ¿Que son, para qué
sirven y cuáles son los más
comunes?
5. Escuchar un evento sobre el
DOM
JS 4 - Dom y eventos
Clase 13.
1. Introducción a LocalStorage y
SessionStorage
2. Diferencias entre LocalStorage y
SessionStorage
3. Implementación de un carrito de
compras utilizando LocalStorage
o SessionStorage
JS 5 - LocalStorage,
SessionStorage y Carrito de
Compras
Clase 14.
1. Asincronía
2. Consumo de API REST a través
de fetch
3. Procesamiento de los datos
4. Incluir los datos consumidos y
procesados por medio de fetch en
nuestro proyecto
JS 6 - Asincronía

LocalStorage y SessionStorage
¡Les damos la bienvenida a la clase de LocalStorage y SessionStorage! Hoy vamos a ver cómo podés guardar datos en
el navegador de una manera súper simple, y lo mejor de todo: ¡permanentes o temporales, según lo que necesites!
Breve introducción al tema: ¿Te imaginás que un usuario pueda guardar sus preferencias en tu aplicación y que,
aunque cierre el navegador, esas preferencias sigan ahí? De eso se trata LocalStorage, y de su primo, el
SessionStorage, que hace lo mismo pero con una duración más corta.

¿Qué son LocalStorage y SessionStorage?
LocalStorage y SessionStorage son como pequeñas
cajas que tiene el navegador, donde podés guardar
datos clave-valor. La diferencia entre ellos es cuánto
duran: LocalStorage es eterno, o al menos hasta que
el usuario lo borre, y SessionStorage desaparece
cuando cerrás la pestaña.
● Fijate, con solo dos líneas de código ya podés
empezar a guardar datos.

Diferencias entre LocalStorage y
SessionStorage
Vamos a ver las diferencias clave de una manera sencilla. Imaginá que LocalStorage es como una libreta donde
anotás cosas importantes y la guardás en un cajón. Aunque cierres la computadora, esos datos siguen ahí.
SessionStorage, en cambio, es como escribir en un papelito que tirás a la basura cuando cerrás la pestaña del
navegador.

Javascript Talento Tech Completo Para tarea final

¿Cómo guardar y obtener datos con LocalStorage?
● Ahora vamos a lo interesante, ¿cómo guardo algo? Supongamos que querés guardar el tema que eligió el
usuario para tu página:
localStorage.setItem('tema', 'oscuro');
¿Y cómo lo recupero para que al volver a la página siga con su tema preferido?
let tema = localStorage.getItem('tema');
console.log(tema); // 'oscuro'
● ¡Facilísimo! Ahora el usuario no tiene que volver a cambiar el tema cada vez que entra.

Eliminar Datos en LocalStorage
Capaz que querés borrar datos, porque el usuario cambió de opinión o simplemente no los necesitás más. Podés
hacerlo de dos maneras:
Eliminar un dato específico:
localStorage.removeItem('tema');
Eliminar todo de una vez:
localStorage.clear();
● Con estas funciones, limpiás todo lo que guardaste. ¡Adiós datos!

Guardar y Obtener Datos en SessionStorage
¿Cómo usar SessionStorage?
● Ahora, si en vez de guardar algo para siempre lo necesitás por un ratito, podés usar SessionStorage. Por
ejemplo, si querés guardar el paso actual de un formulario de compra, esto sería perfecto:
Guardar datos:
sessionStorage.setItem('pasoActual', '2');
Recuperar datos:
let paso = sessionStorage.getItem('pasoActual');
console.log(paso); // '2'

Carrito de compras usando LocalStorage
● Llegó el momento de hacer algo que todos conocemos y usamos: un carrito de compras. Vamos a usar
LocalStorage para que cuando el usuario agregue productos, queden guardados incluso si cierra la página
● El código que vas a usar va a ser algo como esto:
// Guardar carrito en LocalStorage
localStorage.setItem('carrito', JSON.stringify(listaDeProductos));
// Obtener carrito de LocalStorage
let carrito = JSON.parse(localStorage.getItem('carrito'));

Crear el Carrito de Compras (HTML)
Estructura básica para crear el Carrito de Compras
Empecemos con lo más básico: el HTML que va a mostrar nuestro carrito de compras. Vamos a crear una lista para los
productos y un botón para vaciar el carrito.
<div id="carrito">
<h2>Carrito de Compras</h2>
<ul id="lista-carrito"></ul>
<button id="vaciar-carrito">Vaciar Carrito</button>
</div>
Este bloque HTML será la estructura visual de nuestro carrito. Todo lo que agreguemos o quitemos lo vamos a manejar
con JavaScript

Agregar Productos al Carrito
¿Cómo agregar productos al Carrito?
● Ahora, vamos a darle vida al carrito.
● Cada vez que el usuario haga clic en un botón de 'Agregar al carrito', vamos a guardar ese producto en
LocalStorage y actualizar la lista del carrito en el HTML.
● Cada vez que un producto se agregue,
lo guardamos en LocalStorage y
actualizamos la lista del carrito que se
muestra en la página

Eliminar un Producto del Carrito
¿Cómo eliminar un producto del Carrito de Compras?
A veces, el usuario se arrepiente y quiere sacar un producto. No hay problema, también lo podemos hacer. Vamos a
crear un botón que permita eliminar un producto específico del carrito.
Acá lo que hacemos es filtrar el carrito para eliminar el producto que tiene el id correspondiente. Luego, actualizamos el
LocalStorage y la visualización.

Vaciar el Carrito de Compras
¿Cómo vaciar completamente el Carrito de Compras?
Por último, si el usuario decide que quiere empezar de cero, puede vaciar todo el carrito con un solo click.
Con localStorage.removeItem(), eliminamos todo lo que estaba guardado en el carrito, dejando la página vacía. ¡Listo
para empezar de nuevo!

Actualización del Carrito en Tiempo Real
Cada vez que agreguemos, eliminemos o vaciemos el carrito, tenemos que actualizar lo que se ve en la página. Acá te
dejo cómo lo hacemos de manera sencilla:
Esta función toma el carrito
de LocalStorage, lo recorre,
y vuelve a construir la lista
de productos en el HTML.

Crear una función que guarde y recupere las preferencias de un usuario,
como su nombre y el color de fondo preferido, utilizando LocalStorage.
1. La función debe permitir al usuario ingresar su nombre y seleccionar
su color de fondo preferido desde una lista de opciones.
2. Los datos ingresados deben almacenarse en LocalStorage.
3. Cada vez que la página se recargue, las preferencias deben
recuperarse de LocalStorage y aplicarse automáticamente (mostrar el
nombre del usuario y cambiar el color de fondo).
Guardar preferencias de usuario
Tips:
● Uso de LocalStorage para almacenar el
nombre y el color.
● Manipulación del DOM para aplicar los
cambios de color de fondo.
● Uso de eventos como submit para
guardar las preferencias.

Crear un carrito de compras utilizando LocalStorage, que permita a
los usuarios agregar productos y muestre la cantidad total de
productos en el carrito.
1. Los productos deben tener un botón para agregar al carrito.
2. Al agregar un producto, se debe mostrar el número total de
productos en el carrito, almacenándolo en LocalStorage.
3. Al recargar la página, el número total de productos debe
recuperarse de LocalStorage y mostrarse correctamente
Carrito de compras con conteo de productos
Tips:
● Uso de LocalStorage para guardar el
número total de productos en el carrito.
● Manipulación del DOM para actualizar el
contador de productos en tiempo real.
● Utilización de eventos click para agregar
productos.

Front-End JS
Clase 14 - “Asincronía”

Clase 13.
1. Introducción a LocalStorage y
SessionStorage
2. Diferencias entre LocalStorage y
SessionStorage
3. Implementación de un carrito de
compras utilizando LocalStorage
o SessionStorage
JS 5 - LocalStorage,
SessionStorage y Carrito de
Compras
Clase 14.
1. Asincronía
de fetch
procesados por medio de fetch en
nuestro proyecto
JS 6 - Asincronía
Clase 15.
1. Asincronía Desarrollo de un proyecto
integrador que combine HTML, CSS, y
JavaScript
2. Consumo de API REST
3. Incorporación y procesamiento de los
datos en nuestro HTML
4. Incorporación de buenas prácticas de
accesibilidad y SEO
5. Presentación del proyecto final
API y Procesamiento de
Datos

Mensajes HTTP
Hypertext Transfer Protocol (HTTP) (o Protocolo de Transferencia de Hipertexto) es un protocolo para la transmisión
de documentos hipermedia como HTML. Fue diseñado para la comunicación entre los navegadores y servidores
web, entre otros propósitos. Sigue el modelo cliente-servidor, en el que la persona establece una conexión,
realizando una petición a un servidor y espera una respuesta del mismo.
Los mensajes HTTP son los medios por los cuales se intercambian datos entre servidores y clientes. Hay dos tipos
de mensajes: peticiones, enviadas al servidor para pedir el inicio de una acción; y respuestas, que son la respuesta
del servidor.

¿Qué es una petición http?
Un navegador, durante la carga de una página, suele realizar múltiples peticiones HTTP a un servidor para solicitar
los archivos que necesita renderizar en la página. Es el caso de, por ejemplo, el documento .html de la página
(donde se hace referencia a múltiples archivos) y luego todos esos archivos relacionados: los ficheros de estilos
.css, las imágenes .jpg, .png, .webp u otras, los scripts .js, las tipografías .ttf, .woff o .woff2, etc.
Una petición HTTP es como suele denominarse a la acción por parte del navegador de solicitar a un servidor web
un documento o archivo, ya sea un fichero .html, una imagen, una tipografía, un archivo .js, etc. Gracias a dicha
petición, el navegador puede descargar este archivo, almacenarlo en un caché temporal de archivos del navegador
y, finalmente, mostrarlo en la página actual que lo ha solicitado.

Métodos HTTP
HTTP define una gran cantidad de métodos:
● GET: utilizado únicamente para consultar información al servidor (símil SELECT).
● POST: utilizado para solicitar la creación de un nuevo registro, es decir, algo que no existía previamente (símil
INSERT).
● PUT: utilizado para actualizar por completo un registro existente (símil UPDATE).
● PATCH: similar al método PUT, pues permite actualizar un registro existente, sin embargo, este se utiliza
cuando es necesario actualizar solo un fragmento del registro y no en su totalidad (símil UPDATE).
● DELETE: utilizado para eliminar un registro existente (símil DELETE).
● HEAD: utilizado para obtener información sobre un determinado recurso sin retornar el registro. Este método se
utiliza a menudo para probar la validez de los enlaces de hipertexto, la accesibilidad y las modificaciones
recientes.

Respuestas de la petición HTTP
Como mencionamos anteriormente, una petición HTTP es un mensaje que una computadora envía a otra utilizando el
protocolo HTTP. La petición HTTP la hacen los clientes de nuestro API. Cuando nuestro API recibe esta petición, la
procesa, y luego retorna una respuesta, llamada respuesta HTTP.
Los códigos de estado de respuesta HTTP indican si se ha completado satisfactoriamente una solicitud HTTP
específica. Las respuestas se agrupan en cinco clases:
1. Respuestas informativas (100–199),
2. Respuestas satisfactorias (200–299),
3. Redirecciones (300–399),
4. Errores de los clientes (400–499),
5. y errores de los servidores (500–599).

Asincronía
La asincronía es uno de los conceptos principales que rige el mundo de JavaScript. Cuando comenzamos a programar,
normalmente realizamos tareas de forma síncrona (o al mismo tiempo), llevando a cabo tareas secuenciales que se
ejecutan una detrás de otra.
Sin embargo, en el mundo de la programación, tarde o temprano necesitaremos realizar operaciones asíncronas,
especialmente en ciertos lenguajes como JavaScript, donde tenemos que realizar tareas que tienen que esperar a que
ocurra un determinado suceso que no depende de nosotros, para luego reaccionar realizando otra tarea sólo cuando
dicho suceso ocurra.

Cómo gestionar la asincronía
Teniendo en cuenta lo anterior, debemos aprender a buscar mecanismos para dejar claro en nuestro
código JavaScript, que ciertas tareas tienen que procesarse de forma asíncrona para quedarse a la
espera, y otras deben ejecutarse de forma síncrona.
En JavaScript existen varias formas de gestionar la asincronía, a continuación veremos algunas:

Fetch
La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como
peticiones y respuestas. Además provee un método global fetch() que proporciona una forma asíncrona de obtener
recursos desde la red. +info
El uso de fetch() más simple toma un argumento (la ruta del recurso a obtener) y devuelve un objeto promise pendiente,
que más tarde puede proporcionar la respuesta en un objeto response. En otras palabras, fetch() promete una
respuesta, que puede eventualmente cumplir, y coloca el recurso solicitado en response, o en caso de falla provee un
mecanismo para manejar el error.

¿Qué es una promesa?
Una promesa (promise)en JS es similar a una promesa en la vida real. Tiene 2 resultados posibles: se mantendrá
cuando llegue el momento o no. Cuando definimos una promesa en JavaScript, se resolverá cuando llegue el momento,
o será rechazada.
Hay 3 estados para un objeto promise:
● Pendiente (pending): estado inicial, antes de que la promesa tenga éxito o falle.
● Resuelto (resolved): promesa completada.
● Rechazado (rejected): promesa fallida.

Se llama al método then( ) después de que se resuelva la promesa. O, caso contrario, se realiza una llamada al método
catch() cuando es rechazada.
¿Qué es una promesa?

Fetch
Veamos cómo utilizar todo esto. El siguiente código recupera un archivo JSON a través
de red y muestra su contenido en la consola.
response es la respuesta HTTP. Posee un encabezado y otros datos propios del protocolo, por eso usamos el método
json() para extraer el contenido JSON desde la respuesta. Y luego (then), lo mostramos en la consola. Los dos métodos
.then() se ejecutan en el momento que la “promesa” anterior se cumple, de manera asincrónica.

Fetch
<div class="container my-5 text-center">
<h1>Ejemplo Fetch</h1>
<button class="btn-danger"
onclick="traer()">Obtener</button>
</div>
<div class="mt-5" id="contenido">

</div>
<script>
var contenido = document.querySelector('#conteni
do');
function traer() {
fetch('texto.txt')
.then(data => data.text())
.then(data => {
contenido.innerHTML= `${data}`})
}
</script>
En el siguiente ejemplo utilizamos Bootstrap y para obtener y mostrar en el documento HTML el contenido del archivo de
texto texto.txt, obtenido con fetch(), que se encuentra en la misma carpeta que el index.html:

Consumo de API externa
El método fetch() permite recuperar contenido que no se encuentra en el cliente. Para ello, el origen de los datos debe
contar con un mecanismo denominado API (application programming interface). Las API permiten a dos componentes
de software comunicarse entre sí mediante un conjunto de definiciones y protocolos.
RandomUser es un sitio que implementa una API que, ante una solicitud, regresa datos de usuarios (ficticios) en
formato JSON. Podemos usar fetch() para recuperar esos datos y procesarlos en nuestra aplicación. El proceso es muy
similar al utilizado para leer un archivo local, pero difiere en la ruta que proporcionamos para obtener el recurso.

Consumo de API con Fetch
La función traer() obtiene datos desde una API externa.
Con fetch(‘https:..’) proporcionamos la ruta a la API.
En .then guardamos en la variable res los datos
formateados con el método .json()
Y el siguiente .then muestra por consola todos los
resultados y agrega al documento HTML los valores en la
posición 0 correspondientes a la imagen, el nombre y el
email.
function traer() {
fetch('https://randomuser.me/api')
.then(res => res.json())
.then(res => {
console.log(res)
console.log(res.results[0].email)
contenido.innerHTML= `
<img src="${res.results[0].picture.large}
" width="100px"
class="img-fluid rounded-circle">
<p>Nombre: ${res.results[0].name.first}</p>
<p>Mail: ${res.results[0].email}</p>`
})
}

Este ejemplo es más completo, ya que consulta una API más de una vez. Se envía un requerimiento y en base a la
respuesta se realiza una nueva solicitud.
APP API
1
2
3
4
Con este esquema podríamos pedir información de un post en una red social, y luego solicitar datos sobre el usuario que
hizo ese posteo, utilizando el id contenido en el post para identificar al usuario.

Utilizaremos datos que devuelve
jsonplaceholder.typicode.com/post desde su API, con la
siguiente estructura:
Las APIs públicas contienen la documentación necesaria
para poder utilizarla.
En el caso de este sitio en particular, se proporciona un
archivo JSON con el contenido de los posteos realizados.
Entre los datos vemos un userId y un id, que identifican
de forma unívoca a los posteos y a los usuarios.
Para acceder a un posteo determinado podemos apuntar
fetch() ha la misma dirección, pero agregando el número
de posteo al final:
https://jsonplaceholder.typicode.com/posts/2 regresa
un objeto que contiene los datos del post con id = 2.

La función getNombre(post) obtiene datos del posteo con el id = post y muestra en la consola el userId del mismo:
const getNombre= (idPost) => {
// hacemos la solicitud a la API...
fetch(`https://jsonplaceholder.typicode.com/posts/${idPost }`)
// la API responde, y convertimos los datos al ormato JSON
.then(res=> {
return res.json()
})
// Mostramos el userID de ese posteo
.then(post => {
console.log(post.userId)
})
}
getNombre(99); // llamada a la función

El método fetch() proporciona un mecanismo para gestionar el error que ocurre cuando los datos solicitados a la API no
pueden ser recuperados. Dado que se trata de una comunicación asincrónica, utilizamos la palabra reservada async
para indicar que la solicitud no es sincrónica.
Con palabra reservada await indicamos que alguna acción debe esperar a que se produzca una respuesta para ser
ejecutada.
Y por último, mediante la estructura try…catch podemos ejecutar un bloque de código en caso de que la promesa se
cumpla, u otro en caso de que la comunicación falle por algún motivo y la promesa sea rechazada.
Fetch | Async, await y manejo de errores

Fetch | Async, await y manejo de errores
// async indica que la función es asincrónica
const getNombre = async (idPost) => {
// El bloque try se intenta ejecutar. En caso de error, se pasa a la sección catch(error)
try {
// await hace que el fetch NO SE PRODUZCA hasta que no esté disponible la respuesta
const resPost = await fetch(`https://jsonplaceholder.typicode.com/posts/${idPost}`)
const post = await resPost.json()
console.log(post.userId)
const resUser = await fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`)
const user = await resUser.json()
console.log(user.name)
// Este bloque solo se ejecuta si no se pudo ejecutar el bloque try. Error contiene el
// código del error que se ha producido, para que podamos procesarlo.
} catch (error) { console.log('Ocurrió un error grave', error) }
}
getNombre(99) // El llamado a la función se hace de la forma habitual.
Código con fetch(), async, await y manejo de errores:

En este ejercicio, vas a integrar el consumo de una API REST utilizando fetch() en tu proyecto personal de e-commerce o
cualquier otro proyecto que estés desarrollando. Los pasos a seguir son:
1. Elegí una API pública (como Fake Store API) que te proporcione datos de productos, usuarios, o cualquier otro recurso
que quieras mostrar en tu proyecto.
2. Usá fetch() para hacer una solicitud a la API y obtener los datos.
3. Mostrá los datos obtenidos en tu proyecto, ya sea en forma de lista de productos, usuarios, o lo que elijas.
4. Asegurate de manejar los posibles errores utilizando .catch() y mpstrá un mensaje si algo falla.
Tips:
● Selección de API: Buscá una API pública que tenga los datos que querés incluir en tu proyecto. Algunas opciones son APIs
de productos, películas, usuarios, etc.
● Integración con el proyecto: Pensá cómo podés integrar los datos obtenidos con otras funcionalidades de tu proyecto.
Aplicar el consumo de API Fetch en tu proyecto personal

Vas a crear un carrito de compras dinámico que permita a los usuarios agregar productos a su carrito utilizando datos obtenidos de
una API externa. Los pasos específicos son:
1. Utilizá fetch() para obtener una lista de productos desde una API (puede ser la misma API de productos del Ejercicio 1).
2. Mostrá los productos en la página en forma de tarjetas o lista.
3. Agregá un botón "Añadir al carrito" para cada producto. Al hacer clic en el botón, el producto debe añadirse al carrito.
4. Usá LocalStorage para almacenar los productos que el usuario agregue al carrito, de manera que si recarga la página, los productos sigan allí.
5. Mostrá la cantidad de productos que hay en el carrito en todo momento, actualizándola cada vez que se añada un nuevo producto.
Tips:
● Manipulación del DOM: Usá métodos como createElement() y appendChild() para crear dinámicamente las tarjetas de productos y los botones.
● LocalStorage: Almacená los productos agregados en LocalStorage utilizando JSON.stringify() y JSON.parse() para convertir los objetos a formato
JSON y viceversa.
Crear un carrito de compras dinámico con productos de una API

Front-End JS
Clase 15 - “API y procesamiento de datos”

Clase 14.
1. Asincronía
de fetch
procesados por medio de fetch
en nuestro proyecto
JS 6 - Asincronía
Clase 15.
1. Asincronía Desarrollo de un proyecto
integrador que combine HTML, CSS,
y JavaScript
2. Consumo de API REST
3. Incorporación y procesamiento de
los datos en nuestro HTML
4. Incorporación de buenas prácticas
de accesibilidad y SEO
5. Presentación del proyecto final
API y Procesamiento de
Datos
Clase 16.
1. Presentación y revisión de los
proyectos finales
2. Feedback personalizado a cada
proyecto
3. Comparación con proyectos
profesionales
4. Despedida y recomendaciones para
el futuro
Revisión final y despedida

¿Qué es una API REST?
Comunicación entre aplicaciones
○ Definición de API: una API es una interfaz que permite la comunicación entre diferentes aplicaciones.
○ API REST: es un tipo de API que usa HTTP para acceder y manipular datos en un servidor.
○ Aplicación en E-commerce: en un sitio de E-commerce, una API REST permite acceder a catálogos de
productos, realizar operaciones de carrito de compras y más.

Ejemplos de Uso en Empresas de Tecnología
● Redes Sociales: Facebook, Twitter e Instagram ofrecen APIs que permiten acceder a perfiles,
publicaciones y seguidores.
● E-commerce: Plataformas como Amazon y eBay usan APIs para facilitar la integración de
productos, precios y disponibilidad en tiendas online externas.
● Mapas y Geolocalización: Google Maps y OpenStreetMap tienen APIs que permiten a las
aplicaciones obtener información geográfica, rutas y mapas en tiempo real.
● Pago y Autenticación: PayPal, Stripe, y MercadoPago ofrecen APIs para gestionar pagos seguros
y verificar identidades.
● Noticias y Entretenimiento: APIs como las de Spotify y YouTube permiten que las aplicaciones
integren contenido musical o audiovisual.

Json vs Xml
La Evolución de APIs
En los inicios del desarrollo web, XML era el formato
estándar para compartir datos en APIs. Sin embargo,
JSON se volvió preferido por su simplicidad, menor
tamaño y compatibilidad directa con JavaScript,
facilitando la velocidad y eficiencia en aplicaciones
modernas. Hoy, JSON es el formato más usado en
APIs REST.

Consumo de API en JavaScript
Función fetch()
● Uso de fetch(): Realiza solicitudes HTTP de
manera asíncrona.
● fetch('https://fakestoreapi.com/products')
● .then(response => response.json()) // Convertir respuesta a JSON
● .then(data => { console.log(data); }) // Manipular los datos
● .catch(error => { console.error('Error:', error); }); // Manejo de errores

Procesamiento de Datos en HTML
Renderizado dinámico de productos
● Renderizado en HTML: usar JavaScript para insertar datos dinámicamente en HTML.
● Ejemplo para mostrar productos:
fetch('https://fakestoreapi.com/products')
.then((response) => response.json())
.then((data) => {
const productosContainer = document.getElementById("productos-container");
data.forEach((producto) => {
productosContainer.innerHTML += `
<div class="card">
<img src="${producto.image}" alt="${producto.title}">
<h3>${producto.title}</h3>
<p>Precio: $${producto.price}</p>
<button onclick="addToCart(${producto.id})">Añadir al carrito</button>
</div>
`;
});
})
.catch((error) => console.error("Error al obtener productos:", error));

Buenas Prácticas de Accesibilidad y SEO
Mejorando la experiencia y visibilidad del sitio
● Accesibilidad:
○ Añadir etiquetas alt a las imágenes.
○ Navegación accesible con teclado.
○ Uso de etiquetas semánticas (<header>, <main>, <footer>) para organizar el contenido.
● SEO:
○ Uso de metaetiquetas (<meta name="description" content="...">).
○ Encabezados (<h1>, <h2>) para resaltar la jerarquía del contenido.

Manejo de errores
Cuando una solicitud a la API falla, es esencial manejar el error para que el usuario reciba un mensaje
claro.
● Errores Comunes:
○ Errores 400: Problemas con la solicitud, como parámetros incorrectos o falta de permisos.
Ejemplo: 404 (No Encontrado), 401 (No Autorizado).
○ Errores 500: Problemas en el servidor. Estos errores son más difíciles de predecir, ya que
ocurren en el lado del servidor.

Guia para el proyecto final
Estructura y Requisitos del Proyecto
● HTML: Uso de etiquetas semánticas para organizar la página.
● CSS: Implementación de un diseño responsivo y atractivo usando Bootstrap y Flexbox.
● JavaScript: Integración de una API REST para obtener datos y renderizar productos en el DOM,
además de la funcionalidad de un carrito de compras usando localStorage.
● Accesibilidad y SEO: Implementar prácticas que mejoren la experiencia del usuario y optimicen la
página para los motores de búsqueda.

Guia para el proyecto final
Puntos Clave para Revisión y Entrega
● Subida del Proyecto: Debe estar disponible en GitHub Pages o Netlify para facilitar su acceso.
● Control de versiones: Mantener un historial de commits detallado para documentar cada avance.
● Presentación: El archivo README.md debe incluir una descripción del proyecto, las tecnologías
usadas, instrucciones de instalación y cualquier detalle relevante.

Realiza una revisión completa de tu proyecto para asegurarte de que cumple con todos los requisitos. Documenta los pasos
importantes, decisiones de diseño, y cualquier información relevante en el archivo README.md
Pasos:
● Verifica que cada parte del proyecto funcione correctamente (carrito, consumo de API, formulario de contacto).
● Revisa el diseño responsivo y la accesibilidad, asegurándote de que el sitio sea navegable en diferentes dispositivos.
● Actualiza el README.md:
○ Incluye una descripción detallada del proyecto, sus objetivos y funcionalidades.
○ Añade instrucciones claras sobre cómo clonar el repositorio y ejecutar el proyecto.
○ Explica cualquier tecnología o recurso externo utilizado (como la API o Bootstrap).
○ Adjunta una captura de pantalla de la interfaz y el enlace del despliegue en GitHub Pages.
● Tip: Un README.md bien documentado puede ser muy útil para otros usuarios y desarrolladores que exploren tu proyecto.
Revisión Final y Documentación en GitHub

Prepara una breve presentación de tu proyecto para la clase siguiente. La presentación debe incluir una introducción al proyecto,
una demostración en vivo, y una explicación de los principales desafíos y aprendizajes.
Pasos:
● Introducción (1-2 minutos): Explica el objetivo de tu proyecto de E-commerce y describe brevemente sus funcionalidades
principales.
● Demostración en Vivo (2-3 minutos): Muestra el sitio en funcionamiento, destacando la visualización de productos, el carrito de
compras, y el formulario de contacto.
● Desafíos y Aprendizajes (1-2 minutos): Menciona los principales retos que enfrentaste durante el desarrollo (por ejemplo, el uso de
fetch() o el almacenamiento en localStorage), y lo que aprendiste de la experiencia.
● Tip: Practica la presentación para ajustarte al tiempo y asegúrate de que el proyecto esté accesible y funcional durante la
demostración.
Preparación de la Presentación del Proyecto

Proyecto Final Integrador
Clase 15 - “API y procesamiento de datos”

Entrega de Proyecto
1. Estructura Básica de HTML.
● Estructura semántica: El HTML debe estar
dividido en las etiquetas semánticas principales:
header, nav, main, section, footer.
● README.md: Incluir un archivo que explique
brevemente el propósito de la página.
2. Formulario de Contacto.
● Formulario funcional: Crear un formulario
de contacto con campos para nombre,
correo electrónico y mensaje, utilizando
Formspree para manejar el envío de datos.
Obligatorio | Entregable
Requisitos para la entrega:
Formato de entrega: Compartir un link al drive (público) que contenga los archivos y carpetas que conforman tu proyecto o
compartí el link de tu repositorio de Github. Los links deberán ser entregados en el apartado de “Pre-Entrega de Proyecto” en
el Campus Virtual.

Entrega de Proyecto
3. Estilos básicos aplicados con CSS
● Archivo styles.css: El proyecto debe contar con un
archivo CSS externo que incluya:
○ Estilos básicos aplicados a las secciones de
header, footer y lista de navegación.
○ Fuentes de Google Fonts correctamente
implementadas.
○ Propiedades de background aplicadas en alguna
sección de la página (color, imagen, degradado,
etc.).
4. Diseño responsivo con Flexbox y Grid
● Sección "Productos": Organizada en cards de forma
responsiva utilizando Flexbox.
● Sección "Reseñas": Organizada utilizando Grid, con una
distribución lógica y estética.
● Sección "Contacto": Debe ser responsiva mediante el uso
de Media Queries para adaptarse a diferentes tamaños de
pantalla.
Requisitos para la entrega

Entrega de Proyecto
5. Contenido Multimedia y Navegación
● Multimedia: deberá incluir archivos multimedia
(imágenes, video o iframe) correctamente integrado
en la página.
● Lista de navegación: Implementar una lista
desordenada con enlaces que simulen una
navegación interna (Inicio, Productos, Contacto, etc.).
6. Subida del Proyecto.
● El proyecto debe estar subido a un hosting gratuito
(Netlify o GitHub Pages), con una URL funcional para
visualizar el sitio.

Entrega de Proyecto
7. JavaScript
● Script.js: deberá incluir un archivo Debes crear un
archivo script.js para manejar toda la
interactividad de la página.
Asegúrate de enlazarlo correctamente en tu archivo
HTML.
● DOM: Implementa funciones para validar formularios (ej.,
campos requeridos y formato de correo).
Usa JavaScript para manipular elementos del DOM, por
ejemplo, actualizar el carrito y mostrar mensajes al
usuario
● Fetch Api
Consume datos desde una API REST usando fetch.
Muestra los productos obtenidos de la API en la página
en forma de tarjetas (cards).
● Visualización de Productos:
Cada producto debe tener su imagen, título y precio,
mostrando una lista atractiva para el usuario.

Entrega de Proyecto
8. Carrito de compras dinámico
● Agregar Productos al Carrito: Implementa un carrito
de compras donde los usuarios puedan añadir
productos desde las tarjetas.
● Uso de localStorage o sessionStorage: Guarda el
estado del carrito en localStorage o
sessionStorage para que no se pierda al actualizar o
cerrar la página.
● Contador Dinámico: Muestra el número total de
productos en el carrito y asegúrate de actualizarlo en
tiempo real.
9. Edición y visualización del carrito
● Visualización de Productos en el Carrito: Muestra
una lista de productos añadidos al carrito, incluyendo
cantidad, precio y total.
● Edición de Cantidades y Eliminación de Productos:
Implementa funciones para que el usuario pueda editar
la cantidad de cada producto o eliminarlo del carrito.
● Total Dinámico:Actualiza el total de la compra cada
vez que se modifiquen los productos en el carrito.

Entrega de Proyecto
10. SEO & Accesibilidad
Buenas Prácticas de Accesibilidad:
● Usa alt en las imágenes para mejorar la accesibilidad.
● Asegúrate de que se pueda navegar fácilmente con el
teclado.
SEO Básico:
● Usa metaetiquetas en el head del HTML para optimizar
el SEO.
● Organiza los encabezados lógicamente usando <h1>,
<h2>, etc.
11. Git & Github
Historial de Cambios en GitHub:
● Realiza commits regulares que documenten el
progreso del proyecto.
● Crea un repositorio en GitHub y sube el proyecto.
README.md:
● Documenta el propósito del proyecto, instrucciones de
configuración, y cómo utilizarlo.
● Incluye una breve guía de usuario y cualquier
dependencia necesaria.

Entrega de Proyecto
12. Funcionalidad esperada del proyecto
Interactividad Completa:
● La página debe permitir al usuario ver
productos, añadirlos al carrito, editar el carrito, y
simular la compra.
Formulario de Contacto:
● Implementa un formulario funcional que envíe
datos a través de Formspree.
Diseño Responsivo:
● Asegúrate de que el diseño sea
adaptable a diferentes tamaños de
pantalla.
Persistencia del Carrito:
● El carrito debe mantenerse activo
incluso si el usuario cierra o actualiza
la página, usando localStorage o
sessionStorage.

Javascript Talento Tech Completo Para tarea final

Más contenido relacionado

Similar a Javascript Talento Tech Completo Para tarea final (20)

Último (20)

Javascript Talento Tech Completo Para tarea final