TECNOLOGÍAS PARA

DISEÑO Y DESARROLLO WEB

DIPLOMATURA FULLSTACK
DUDAS
00 | REPASO
 ARRAYS

LISTA DE ELEMENTOS: ACCEDO AL PRIMER ELEMENTO:

● Cantidad variable de elementos

● Se pueden agregar y quitar elementos
● En este caso contiene 3 strings

ACCEDO AL SEGUNDO ELEMENTO?

 OBJECT

CONTENEDORES CLAVE-VALOR: ACCEDO AL TIPO DE AUTO:

● Cantidad variable de elementos

● Se pueden agregar y quitar elementos
● Los elementos se acceden a través de
una clave
 JSON

JSON:
Formato estándar de comunicación de datos. Se pueden representar los tipos
básicos de datos de Javascript.

Clave: string que identifica una propiedad

Valor: valor asignado a una propiedad. Una de:
string, number, boolean, null, array o object

JSON.Parse: convertir string a objeto

JSON.Stringify: convertir objeto a string
 FOR

For es una estructura de control que se lo conoce como un iterador. Lo que nos permite es ejecutar
varias veces un mismo código siempre y cuando se cumpla la condición.

Condición Incremento contador

Inicio contador
FOR

Elemento del array Array

Acción que se ejecutará en cada iteración

01 | TAREA
EJERCICIO NIVEL HACKER

OBTENER EL NOMBRE DE LA PERSONA MÁS JOVEN

EJERCICIO NIVEL HACKER
EJERCICIO NIVEL HACKER
03 | ITERADOR WHILE
 LISTAR NÚMEROS

SE EJECUTARÁ EL BLOQUE DE CÓDIGO MIENTRAS LA CONDICIÓN SEA VERDADERA

LISTAR NÚMEROS

LISTAR LOS NÚMEROS DEL 1 AL 10

04 | BREAK
BREAK WHILE

La instrucción break; nos permite

salir del bloque de ejecución, sin
importar si la condición de salida
ya se cumplió.
BREAK FOR

La instrucción break; nos permite

salir del bloque de ejecución, sin
importar si la condición de salida
ya se cumplió.
EJERCICIO BREAK

ENCONTRAR LA EDAD DE JOSÉ

05 | FUNCIONES
CUÁNDO CREAR UNA FUNCIÓN?
 CUÁNDO CREAR UNA FUNCIÓN?

CUÁNDO CREAR UNA FUNCIÓN:

● Comportamiento reutilizable: Creo una función una vez y la reutilizo en muchos lugares.
● Encapsular comportamiento: Comportamiento definido adentro de una función es más fácil
de comprender ya que no necesito entender cómo trabaja la función para entender qué hace.
 EJERCICIO 1

CREO UNA FUNCIÓN QUE ELEVE UN NÚMERO AL CUADRADO

 EJERCICIO 1

CREO UNA FUNCIÓN QUE DEVUELVA EL AUTO MÁS VELOZ Y LO MUESTRO

 EJERCICIO 1 - RESULTADO

CREO UNA FUNCIÓN

QUE DEVUELVA EL
AUTO MÁS VELOZ Y LO
MUESTRO
06 | ONCLICK BUTTON
 ONCLICK

PROPIEDAD ONCLICK:

● Defino una función a ejecutar cuando se clickea el botón

 EJEMPLO ONCLICK

AL CLICKEAR EL BOTÓN, IMPRIMO EL NOMBRE DEL COLOR EN EL HTML

07 | document.getElementById()
 getElementById()

document.getElementById():
● La función me retornará el elemento con el ID que yo envíe como parámetro.
 CAMBIAR UN ESTILO

CON LA PROPIEDAD STYLE DE UN ELEMENTO, PUEDO ACCEDER Y MODIFICAR SUS ESTILOS

CAMBIAR UN ESTILO - 2
 EJERCICIO TAREA

● CREAR UN FORMULARIO (NOMBRE, APELLIDO, TELÉFONO)

● UN BOTÓN INFERIOR VALIDARÁ TODOS LOS CAMPOS
● SI ALGUNO DE LOS CAMPOS ESTÁ VACÍO LO MARCARÁ EN ROJO

TIP:
● Googlear cómo obtener el valor de un elemento input luego de seleccionarlo con
getElementById
¡GRACIAS!