¡Les damos la bienvenida!

CLASE 9
Objetos Arrays Responsive
Estructura de datos
Estructura de datos
En algunas ocasiones no nos basta con guardar datos
simples en variables, sino que necesitamos trabajar con
grupos de datos, por suerte los lenguajes de programación
nos ofrecen la posibilidad de asignar un conjunto de
valores a una misma variable.

Además, a estos conjuntos de datos los vamos a poder

organizar de distintas formas.
  
Estructura de datos
Hasta ahora trabajamos con datos primitivos (strings,
booleans, numbers), podemos pensar a estos datos como
"ladrillos" con los cuales podremos
construir las estructuras de datos.

En esta clase conoceremos dos estructuras de datos que

tiene JavaScript: los arrays y los objetos.

  
Arrays
¿Qué es un array?
- Se trata de un conjunto de datos asignados a una variable
- Los datos se escriben entre corchetes y separados por comas
- Cada elemento tiene una posición numérica o índice
- La primera posición del array es 0

let frutas = ['manzana', 'pera', 'banana', 'naranja'];

Los datos dentro del array

pueden ser de cualquier
tipo
¿Cómo acceder a un elemento?
Si queremos usar un dato específico dentro del array, accedemos a él a través de ese
índice que tiene el array.

let frutas = ['manzana', 'pera', 'banana', 'naranja'];

console.log(frutas[0]); 'manzana'
console.log(frutas[1]); 'pera'
console.log(frutas[2]); 'banana'
console.log(frutas[3]); 'naranja'
Recorriendo arrays
Una de las grandes ventajas que tienen estas
estructuras de datos es que son "iterables", es
decir, que las podemos recorrer ítem por ítem.
En cada posición del array que vamos recorriendo,
podemos acceder a su valor y realizar operaciones,
como ejecutar una función que modifique a cada
elemento, hay muchísimas posibilidades.
JS tiene una herramienta perfecta para esto...
 LiveCoding
Recorriendo arrays 🚲
Contenido ampliatorio:
Arrays
Arrays
● Un array es un conjunto de datos ordenados por
posiciones y todos asociados a una misma variable.
Estos datos se ordenan secuencialmente, como una
lista, empezando en la posición cero.

● Retomando la analogía que hicimos con las variables

y las cajas, podríamos pensar a un array como una
caja con subdivisiones internas, las cuales están
numeradas iniciando en cero: 0, 1, 2, 3, 4, 5, etc... En
cada subdivisión podemos colocar un dato distinto.
Cuando queremos acceder a alguno de esos datos lo
hacemos usando ese número de posición, llamado
índice.

● Los datos dentro de un array pueden ser de

distintos tipos: números, strings, booleanos, otros
arrays, objetos...
Cómo escribir un
array en JS let  frutas = [ 
   'manzana',
- Declaramos una variable como ya sabemos    'pera',
- Abrimos corchetes    'banana'
- Escribimos los datos separados por comas (podemos    'naranja'
escribir todo en una misma línea o en varias líneas) ];
- Cerramos los corchetes

Usamos corchetes y
separamos los valores con
comas
 arrays.js

Ejemplos let frutas = ['manzana', 'pera', 'banana', 'naranja'];

let numerosPares = [8, 4, 22, 64, 16];

Como mencionamos, en los arrays podemos let arrayDeArrays = [ [9, 8, 7], [6, 5, 4], [3, 2, 1] ];
almacenar cualquier tipo de dato, veamos
algunos ejemplos. let arrayVariadito = [5, 'rojo', true, [1,4,5], '1988'];
Accediendo a los
valores arrays.js

let frutas = ['manzana', 'pera', 'banana', 'naranja'];

Para acceder al valor en una posición frutas[2]; // banana

específica del array, debemos escribir
nombreDelArray[posicion] let numerosPares = [8, 4, 22, 64, 16];
Es decir, la variable que contiene el array, y al
console.log(numerosPares[0]); // 8
lado (sin dejar espacio) entre corchetes el
número de la posición o índice.  let arrayVariadito = [5, 'rojo', true, [1,4,5], '1988'];
¡Recuerden que las posiciones se empiezan
console.log(arrayVariadito[3]); // ???
a contar desde cero!
¿Qué mostrará el último console.log()?
Datazos arrays.js

let frutas = ['manzana', 'pera', 'banana', 'naranja'];

Les comentamos 2 datazos:
let numerosPares = [8, 4, 22, 64, 16];
1) Podemos realizar operaciones con valores
almacenados en arrays. let arrayDeArrays = [ [9, 8, 7], [6, 5, 4], [3, 2, 1] ];

2) ¿Cómo hago si quiero acceder a un valor

dentro de unos de los arrays que estan dentro
del arrayDeArrays? 
¡Indicamos un índice después del otro!
Herramientas para
arrays

En el material del campus encontrarán un desafío que

les invitará a buscar y conocer algunas herramientas
que trae JavaScript para hacer tareas habituales con
arrays: sumarles o quitarles elementos, ordenar sus
elementos, entre otras cosas...
Desafíos con
arrays 💪
Trabajamos con arrays
JavaScript trae "herramientas de fábrica" para realizar ciertas tareas comunes
con arrays, por ejemplo, si quiero saber la cantidad de elementos que tiene un
array puedo escribir el nombre de la variable que contiene el array seguido de
.length

arrays.js

let colores = ['verde', 'azul', 'rojo', 'violeta'];

colores.length; //4
Juguemos!
Buscar respuestas en la web es algo diario en el
trabajo como programadores, todo el tiempo
estamos consultando documentación sobre los
lenguajes con los que trabajamos. 🔎

Vamos a resolver este desafío entre todes,

utilizando el navegador para buscar algunas de
estas herramientas que trae JavaScript.
¿Cómo podemos agregar un
elemento  a un array? (al final o al
comienzo)?
¡Rápido! Al buscador más cercano y escribamos algo como.. 
"como agregar un elemento a un array en javascript"

¡Tienen 1 minuto! Envíen sus respuestas al chat

 array.push(elemento)
array.unshift(elemento)
arrays.js
colores.push('gris');
push agrega el
elemento al final de
colores.unshift('amarillo');
array y unshift al
comienzo
//el array quedaría así:
//['amarillo', 'verde', 'azul', 'rojo', 'violeta', 'gris']
 ¿Cómo podemos quitar el
último elemento del array?
 array.pop()
arrays.js
colores.pop();

//el array quedaría así:

//['amarillo', 'verde', 'azul', 'rojo', 'violeta']
 ¿Cómo podemos ordenar
alfabéticamente un array?
 array.sort()
arrays.js
colores.sort();

//el array quedaría así:

//['amarillo', 'azul', 'rojo', 'verde', 'violeta']
 Así como estas herramientas,
existen muchas otras, les
dejamos aquí un enlace con más
info😉
Recorriendo
arrays
Dos opciones
En esta clase conoceremos dos formas de
recorrer arrays en JS: una es usando el bucle
for, la otra es con una herramienta llamada
forEach().
En ambos ejemplos a continuación estaremos
recorriendo un array llamado "colores" y que
contiene estos strings: ["amarillo", "azul", "rojo",
"verde", "violeta"].
Recorriendo arrays con bucle for
Una de las herramientas que conocimos hace poco y que nos sirve para realizar tareas
repetitivas es el bucle for. Con este bucle vamos contando cada repetición, por lo cual
es perfecto para recorrer arrays. 

En cada repetición
- La variable i arrays.js seleccionamos un
empieza en 0 elemento distinto
for (let i = 0; i < colores.length; i++) { del array usando la
- La condición es que variable i, ¡Así lo
i sea menor que la let colorEnMayuscula = colores[ i ].toUpperCase(); recorremos!
cantidad de
elementos del array console.log( colorEnMayuscula );
}
- En cada repetición,
la variable i aumenta
en 1
 Recorriendo arrays con forEach()
Resulta que JS también tiene otra herramienta para recorrer arrays. Esta herramienta
se llama forEach(), y se puede aplicar a cualquier array. Nos permite recorrerlo y
ejecutar una función con cada elemento del array.
- Escribimos
nombreDelArray.forEac En cada repetición
h()
arrays.js forEach() le pasa a
la función un
colores.forEach( function( e ) {
- Entre paréntesis elemento del
escribimos una función, array, así lo vamos
let colorEnMayuscula = e.toUpperCase();
¡forEach() es una recorriendo en
función que llama a orden. 
console.log( colorEnMayuscula );
otra! })

- El parámetro e que
recibe la función,
representa a cada
elemento del array
Distintos caminos, mismo
resultado
En ambos casos obtenemos el mismo resultado: mostrar en consola los strings del array
convertidos a mayúsculas. Es importante aclarar que en ningún caso el array "colores"
fue modificado.

En este link
encontrarán más
información sobre
recorrer arrays con
forEach()
Objetos
Objetos
Un objeto en programación es una estructura de
datos que nos permite asignar a una variable un
conjunto de datos relacionados entre sí.
La principal diferencia con los arrays, es que asi como
los arrays serían una "lista de datos", un objeto
representa o describe algo. Es decir, el conjunto de
datos que contiene un objeto, es representativo de las
características y comportamientos del mismo.
Esto suena algo complejo, asique comencemos
con un ejemplo sencillo...

.
Objetos
Este objeto representa un Pokemon.
Tiene cuatro propiedades, tres son let pokemon = {
cracterísticas: nombre, tipo, debilidad. nombre: 'Pikachu',
Son variables que contienen datos. tipo: 'Eléctrico',
También tiene un comportamiento: ataque. debilidad: 'Tierra',
En este caso se trata de una función que ataque: function() {
pertenece específicamente a este objeto, console.log('Pikachu ataca
y en programación a esto se lo llama con Impactrueno');
"método". }
¿Qué podemos hacer con todo esto? }

.
¿Qué podemos hacer
con los objetos?
- Crear objetos
- Acceder a los valores en sus propiedades pokemon.nombre;
y modificarlos pokemon.ataque();
- Utilizar sus métodos

pokemon.debilidad = 'Agua';
Nos detendremos mucho tiempo aquí ya que
no es lo que nos intersa en este momento...
Para acceder a valores en los
objetos escribimos
nombreDelObjeto.propiedad
¡Ese "." es la clave!
.
Lo importante
Los objetos son algo muy interesante pero sabemos que todo
esto es muuucha información 🤯

Lo que nos tenemos que llevar de esta clase sobre objetos es:
- Que existen y son una estructura de datos que describe algo
- Que podemos acceder a sus propiedades y métodos
- Que podemos crear objetos pero lo más importante ahora es
que en JavaScript hay muchos objetos que ya vienen definidos
en el lenguaje y ¡son herramientas muy poderosas!
El poder de JS
Los objetos en programación son una manera de representar algo y nos
permiten conocer e interactuar con las características y comportamientos
de eso que representan... ¡esto es algo muy poderoso!

La revelación del año: En el mundo de JavaScript,

el documento HTML, los elementos HTML, la ventana
del navegador, la consola... ¡Son representados como
objetos! De esta manera podemos interactuar con ellos.

Por supuesto, se trata de objetos que ya "vienen de fabrica" en el lenguaje, no los

vamos a tener que crear nosotros. Ya están a nuestra disposición para que
accedamos a sus propiedades y métodos que nos van a dar la posibilidad de
hacer todo lo que queramos en el Front End. 💪
El poder de JS
Cuando escribimos un console.log(), estamos
console.log( 'Hola JS' );
llamando al método log() del objeto console
(consola del navegador).
En el segundo caso, alert() es un método del window.alert( 'Hola JS' );
objeto window (ventana del navegador).
Luego vemos dos ejemplos con el objeto document.URL;
document, que representa al documento HTML
que se está visualizando en el navegador en document.write( 'Hola JS!!');
ese momento.

¡Probemos qué hace cada uno!

LiveCoding 😎
El poder de JS
Continuará la siguiente clase…
¡Agárrense de sus sillas porque ahora si llegamos a
modificar la web con JavaScript!
Pero antes... tenemos algo pendiente con CSS.
Contenido
ampliatorio:
Objetos
Propiedades
Tomemos el siguiente ejemplo: quiero escribir en JS un
conjunto de datos que representen una gota de agua.
Esta puede tener propiedades como color, olor, sabor,
temperatura, estado, si es potable... y cada una de estas
un valor determinado:

let gotaDeAgua = { Para escribir objetos

La sintaxis para escribir las
propiedades es
nombrePropiedad: valor,
color: 'incolora', usamos llaves { } 
olor: 'inodora',
sabor: 'insípida',
potable: true,
temperatura: 10,
estado: 'líquido'
}
Métodos
Como vimos al inicio de la clase, los objetos (del mundo
físico), además de características pueden tener acciones o
comportamientos. 
Cuando escribimos objetos en programación, en estos
conjuntos de datos también podemos describir
comportamientos. 
¿Qué herramienta de la programación nos ayudaba a llevar
a cabo tareas específicas?... ¡Las funciones! 
Dentro de las propiedades de un objeto también podemos
almacenar funciones. En este caso a las funciones las
llamamos métodos.
Métodos objetos.js

let gotaDeAgua = {
color: 'incolora',
En este objeto que representa a una gota olor: 'inodora',
de agua podríamos describir con una sabor: 'insípida',
potable: true,
función el comportamiento de cambiar temperatura: 10,
estado: 'líquido',
de estado según la temperatura que cambiarEstado: function() {
tenga. if (this.temperatura <= 0) {
this.estado = 'sólido';
Veremos que los métodos de un objeto } else if (this.temperatura >= 100) {
pueden usar y modificar valores en las this.estado = 'gaseoso';
} else {
propiedades del mismo, como en este this.estado = 'líquido';
caso las propiedades temperatura y }

estado. return 'El estado del agua es ' + this.estado;

La palabra this en este contexto, hace }
referencia al objeto mismo dentro del cual }

se encuentra este método, y con el .

(punto) accedemos a la propiedad.
Accediendo a 
propiedades y
métodos
Hemos aprendido la sintaxis de un objeto en JS, ahora
¿Cómo podemos acceder a estos valores en sus
propiedades y métodos?
Para obtener los datos dentro de un objeto
primero tenemos que indicarle a JS a qué objeto
nos referimos.
Por ello empezamos con el nombre que le pusimos al
objeto seguido de un . (punto), este punto nos abre las
puertas a las propiedades y métodos en su interior.
Así podremos saber el valor de las propiedades de
gotaDeAgua y modificarlas.
objetos.js
gotaDeAgua.estado; // 'líquido'
gotaDeAgua.temperatura; // 10
//modificamos el valor de una propiedad
gotaDeAgua.temperatura = -1;
//utilizamos este método del objeto
gotaDeAgua.cambiarEstado();
// 'El estado del agua es sólido'
/* si no menciono al objeto, JS
desconoce este método */
cambiarEstado()
CSS responsive
Parte 2
 Media Queries
Son una herramienta de CSS que nos
permite detectar el tamaño del área de
visualización del sitio y entonces aplicar
reglas CSS para distintos casos.

v
Sintaxis de Media Queries
@media establece que Con min-width o max-width establecemos el rango
es un media query de tamaño en el cual se aplicarán las reglas

@media (min-width: 1024px) {

section { Estilos que se aplicarán

flex-direction: row; en caso de que se
cumpla la condición
}
establecida. Debemos
p{
escribir los selectores
font-size: 18px; de los elementos a
} modificar.

} Cierre del Media Query

Ejemplo styles.css

Este fragmento de CSS indica que "a partir /* mobile */

section {
de los 1024px de ancho", se aplicaran la display: flex;
reglas CSS que están dentro del Media flex-direction: column;
}
Query.
/* desktop */
@media (min-width: 1024px) {
section {
flex-direction: row;
}

h2 {
font-size: 40px;
}
}
Breakpoints
Un breakpoint o punto de quiebre, representa el ancho de un dispositivo
en el cual queremos que la forma en la se muestra el contenido de una
web con CSS cambie. A continuación, una referencia de qué medidas
usar.

Desktop
Mobile Tablet @media (min-width: 1200px) {
@media (max-width: 767px) { @media (min-width: ...
... 768px) { }
} ... @media (min-width: 1500px) {
} ...
}
Mobile first /* mobile */
Actualmente, este es el enfoque que se da al section {
display: flex;
diseño y desarrollo web: primero mobile y luego
flex-direction: column;
desktop. }
/* tablet */
Una buena práctica es comenzar por el CSS para @media (min-width: 768px) {
p{
el tamaño mobile y luego con media queries y font-size: 18px; v
usando el parámetro "min-width" hacer los }
ajustes necesarios para tamaño tablet y/o }
desktop. /* desktop */
@media (min-width: 1024px) {
section {
flex-direction: row;
}
}