Upload batch from C CLI

Uploaded via hf-downloader C client

.gitattributes

@@ -259,3 +259,26 @@ subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/06-Ciclo[[:space:]]For[[:space:]]Iteración[[:space:]]de[[:space:]]Listas[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Consolelog[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/07-Iteración[[:space:]]con[[:space:]]forof[[:space:]]en[[:space:]]JavaScript[[:space:]]para[[:space:]]arrays[[:space:]]y[[:space:]]strings.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/08-Iteración[[:space:]]sobre[[:space:]]Objetos[[:space:]]con[[:space:]]forIn[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]en[[:space:]]JavaScript[[:space:]]Clases[[:space:]]y[[:space:]]Prototipos.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/06-Prototipos[[:space:]]y[[:space:]]Herencia[[:space:]]en[[:space:]]JavaScript[[:space:]]Construcción[[:space:]]y[[:space:]]Uso[[:space:]]Práctico.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/07-Métodos[[:space:]]y[[:space:]]herencia[[:space:]]prototípica[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/08-Uso[[:space:]]de[[:space:]]this[[:space:]]en[[:space:]]Clases[[:space:]]y[[:space:]]Funciones[[:space:]]Constructoras.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/09-Validación[[:space:]]de[[:space:]]Usuarios[[:space:]]en[[:space:]]una[[:space:]]Red[[:space:]]Social[[:space:]]Algoritmo[[:space:]]Básico.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/10-Implementación[[:space:]]de[[:space:]]la[[:space:]]Función[[:space:]]SignIn[[:space:]]y[[:space:]]Validación[[:space:]]de[[:space:]]Usuario.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/01-Programación[[:space:]]Síncrona[[:space:]]y[[:space:]]Asíncrona[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/02-Promesas[[:space:]]en[[:space:]]JavaScript[[:space:]]Asincronía[[:space:]]y[[:space:]]Manejo[[:space:]]de[[:space:]]Estados.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/03-Uso[[:space:]]de[[:space:]]AsyncAwait[[:space:]]para[[:space:]]Promesas[[:space:]]Asíncronas[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/04-Peticiones[[:space:]]asíncronas[[:space:]]con[[:space:]]for[[:space:]]await[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/05-Fundamentos[[:space:]]de[[:space:]]HTTP[[:space:]]ClienteServidor[[:space:]]y[[:space:]]Métodos[[:space:]]de[[:space:]]Petición.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/06-Peticiones[[:space:]]HTTP[[:space:]]en[[:space:]]Frontend[[:space:]]Uso[[:space:]]de[[:space:]]Fetch[[:space:]]y[[:space:]]Análisis[[:space:]]en[[:space:]]Network.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/07-Peticiones[[:space:]]HTTP[[:space:]]en[[:space:]]JavaScript[[:space:]]Fetch[[:space:]]GET[[:space:]]POST[[:space:]]y[[:space:]]DELETE.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/08-Envío[[:space:]]de[[:space:]]Datos[[:space:]]al[[:space:]]Servidor[[:space:]]con[[:space:]]JavaScript[[:space:]]y[[:space:]]Fetch[[:space:]]API.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/09-Eliminar[[:space:]]Posts[[:space:]]con[[:space:]]JavaScript[[:space:]]y[[:space:]]Delegación[[:space:]]de[[:space:]]Eventos.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/10-Manejo[[:space:]]de[[:space:]]IDs[[:space:]]en[[:space:]]JavaScript[[:space:]]para[[:space:]]eliminar[[:space:]]artículos[[:space:]]del[[:space:]]DOM.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/06-Asincronía[[:space:]]en[[:space:]]JavaScript/11-Actualizaciones[[:space:]]y[[:space:]]Nuevas[[:space:]]Funciones[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/01-Memoria[[:space:]]dinámica/01-Manejo[[:space:]]de[[:space:]]Memoria[[:space:]]y[[:space:]]Punteros[[:space:]]en[[:space:]]C.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/01-Memoria[[:space:]]dinámica/01-slides-del-curso-de-poo-con-c_f444e705-c951-4d68-b9c0-907667481c77.pdf filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/01-Memoria[[:space:]]dinámica/02-Punteros[[:space:]]en[[:space:]]C[[:space:]]Manejo[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Memoria[[:space:]]Dinámica.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/01-Memoria[[:space:]]dinámica/03-Uso[[:space:]]de[[:space:]]Punteros[[:space:]]en[[:space:]]C[[:space:]]Variables[[:space:]]y[[:space:]]Memoria[[:space:]]Dinámica.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/02-Estructuras[[:space:]]de[[:space:]]datos/01-Estructuras[[:space:]]de[[:space:]]Datos[[:space:]]Personalizadas[[:space:]]en[[:space:]]C.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]con[[:space:]]C/02-Estructuras[[:space:]]de[[:space:]]datos/02-Creación[[:space:]]y[[:space:]]uso[[:space:]]de[[:space:]]estructuras[[:space:]]y[[:space:]]punteros[[:space:]]en[[:space:]]C.mp4 filter=lfs diff=lfs merge=lfs -text

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/05-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/05-Programación Orientada a Objetos en JavaScript Clases y Prototipos.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97d963e7c3603c2d6fd760a050a4ff963f6f63b93aee69cca37abd81bd678067
+size 36327283

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/05-Programación Orientada a Objetos en JavaScript Clases y Prototipos.vtt

@@ -0,0 +1,178 @@
+WEBVTT
+
+00:00.000 --> 00:02.540
+Vamos a hablar de un tema que es muy
+importante.
+
+00:02.540 --> 00:05.260
+Cuando estamos hablando de JavaScript y de
+programación
+
+00:05.260 --> 00:08.740
+orientada a objetos, hay dos temas que son
+importantes entender.
+
+00:08.740 --> 00:12.800
+En JavaScript, JavaScript funciona con
+objetos y prototipos.
+
+00:12.800 --> 00:16.540
+Y programación orientada a objetos
+funciona con herencia.
+
+00:16.540 --> 00:19.440
+Y debemos explicar qué es
+esto.
+
+00:19.440 --> 00:22.760
+Vamos a suponer que vamos a armar una
+clase constructora
+
+00:22.760 --> 00:25.660
+o una función constructora de una persona.
+
+00:25.660 --> 00:28.060
+Esta clase va a ser nuestro
+molde.
+
+00:28.060 --> 00:31.860
+En este molde, nosotros vamos a poner
+ciertas propiedades y métodos
+
+00:31.860 --> 00:34.400
+que después vamos a utilizar para rellenar
+con información
+
+00:34.400 --> 00:36.660
+cuando creamos nuestra
+instancia.
+
+00:36.660 --> 00:39.300
+Siempre que estamos trabajando con
+clases
+
+00:39.300 --> 00:41.460
+o con funciones
+constructoras,
+
+00:41.460 --> 00:44.500
+este tipo de funciones de objetos
+constructores
+
+00:44.500 --> 00:47.300
+automáticamente van a generar un prototipo.
+
+00:47.300 --> 00:48.500
+Allí se le
+llama.
+
+00:48.500 --> 00:52.400
+Este prototipo va a tener todas las
+propiedades y los métodos
+
+00:52.400 --> 00:55.860
+que se van a compartir después o que se
+van a heredar
+
+00:55.860 --> 01:01.060
+en las instancias que vamos a crear de
+esta clase principal.
+
+01:01.060 --> 01:05.060
+Entonces supongamos, tenemos nuestra clase
+de una persona
+
+01:05.060 --> 01:08.060
+que ahorita solo tiene ciertas propiedades
+y métodos.
+
+01:08.060 --> 01:11.960
+Ya que tengamos eso listo y creemos una
+instancia,
+
+01:11.960 --> 01:15.860
+vamos a crear una instancia de persona que
+ahora se va a llamar, por ejemplo, José.
+
+01:15.860 --> 01:18.100
+Tenemos a José, que tiene 30
+años,
+
+01:18.100 --> 01:22.360
+que tiene una altura de 1,70 y que es
+colombiano.
+
+01:22.360 --> 01:23.900
+Ya que tenemos
+esto,
+
+01:23.900 --> 01:27.060
+en nuestra clase nosotros también tenemos
+métodos
+
+01:27.060 --> 01:30.100
+que no tenemos que generar en la instancia
+de José.
+
+01:30.100 --> 01:34.160
+En nuestra clase principal tenemos un
+método que se llama saludar.
+
+01:34.160 --> 01:36.760
+Entonces vamos a hacer que José, con esta
+información,
+
+01:36.760 --> 01:41.400
+pueda saludar con el método que está
+heredando de la clase padre.
+
+01:41.400 --> 01:43.300
+En este caso, lo que haríamos
+es,
+
+01:43.300 --> 01:45.860
+ya que tenemos la información de la
+instancia de José,
+
+01:45.860 --> 01:49.620
+podemos hacer que José haga la acción de
+saludar
+
+01:49.620 --> 01:51.020
+y que entonces el saludo
+sea,
+
+01:51.020 --> 01:53.900
+hola, mi nombre es José, ¿cómo te llamas
+tú?
+
+01:53.900 --> 01:56.460
+Nosotros no tenemos que generar, como te
+comento,
+
+01:56.460 --> 01:58.460
+el método en la instancia de
+José.
+
+01:58.460 --> 02:02.820
+Si una vez que generamos el método que
+extiende de la clase padre,
+
+02:02.820 --> 02:05.700
+que es la clase principal que tenemos,
+este molde,
+
+02:05.700 --> 02:08.220
+en ese momento, gracias al
+prototipo
+
+02:08.220 --> 02:10.660
+que se generó de esta clase constructora,
+
+02:10.660 --> 02:13.120
+nosotros podemos heredar también los
+métodos
+
+02:13.120 --> 02:23.120
+que fueron creados de esta clase padre.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/05-index_23e34316-5be6-49e9-b2bf-a78e5c48b1f7.js

@@ -0,0 +1,40 @@
+class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+const perro1 = new Perro("Bobby", "Perro", "Pug");
+
+console.log(perro1);
+perro1.correr();
+perro1.emitirSonido();
+
+perro1.nuevoMetodo = function () {
+  console.log("Este es un metodo");
+};
+
+Perro.prototype.segundoMetodo = function () {
+  console.log("Es otro nuevo metodo");
+};
+
+Animal.prototype.tercerMetodo = function () {
+  console.log("Un metodo más");
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/06-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/06-Prototipos y Herencia en JavaScript Construcción y Uso Práctico.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2aaddf76e2938d2cfaf4a725d8846cda91fd4fd818e0ecf6083443e23a0cce04
+size 103885593

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/06-Prototipos y Herencia en JavaScript Construcción y Uso Práctico.vtt

@@ -0,0 +1,1256 @@
+WEBVTT
+
+00:00.000 --> 00:05.000
+Vamos a poner en práctica el concepto de
+prototipos y herencia.
+
+00:05.000 --> 00:08.000
+Cuando estamos hablando de prototipos y
+herencia,
+
+00:08.000 --> 00:12.000
+tenemos primero que identificar que en la
+propiedad prototipo
+
+00:12.000 --> 00:15.000
+solo existen funciones de
+objetos.
+
+00:15.000 --> 00:18.000
+Esto quiere decir que solo existe en clases,
+
+00:18.000 --> 00:21.000
+clases de JavaScript que nosotros construimos,
+
+00:21.000 --> 00:25.000
+o en lo que son funciones constructoras.
+
+00:25.000 --> 00:27.000
+Las funciones constructoras que nosotros
+hacemos
+
+00:27.000 --> 00:32.000
+para utilizar como moldes para empezar a
+construir ciertos objetos.
+
+00:32.000 --> 00:36.000
+Solo estas dos van a generar algo que se
+le llama la propiedad
+
+00:36.000 --> 00:38.000
+que es un
+prototipo.
+
+00:38.000 --> 00:40.000
+Que prácticamente el
+prototipo,
+
+00:40.000 --> 00:43.000
+nosotros cuando empezamos a generar aquí,
+
+00:43.000 --> 00:46.000
+por ejemplo, los métodos de nuestras clases,
+
+00:46.000 --> 00:50.000
+de nuestra función constructora, o las
+propiedades,
+
+00:50.000 --> 00:54.000
+el prototipo lo que va a
+hacer
+
+00:54.000 --> 00:59.000
+va a tener por dentro los mismos
+métodos
+
+00:59.000 --> 01:03.000
+y las mismas propiedades que nosotros
+empecemos a construir
+
+01:03.000 --> 01:07.000
+en lo que son las clases o las funciones
+constructoras.
+
+01:07.000 --> 01:08.000
+¿Para
+qué?
+
+01:08.000 --> 01:11.000
+Para que esto, cuando nosotros tengamos,
+por ejemplo,
+
+01:11.000 --> 01:14.000
+alguna instancia o alguna otra
+clase
+
+01:14.000 --> 01:17.000
+que extienda de nuestra clase principal,
+
+01:17.000 --> 01:20.000
+podamos asegurar de compartir los métodos
+y propiedades.
+
+01:20.000 --> 01:22.000
+Esto es importante que nosotros lo entendamos.
+
+01:22.000 --> 01:24.000
+No es algo que
+programamos,
+
+01:24.000 --> 01:26.000
+es algo que pasa automáticamente solo,
+
+01:26.000 --> 01:29.000
+pero es importante que nosotros lo podamos
+entender.
+
+01:29.000 --> 01:31.000
+Y algo también que es importante
+explicar
+
+01:31.000 --> 01:33.000
+es que, como te
+decía,
+
+01:33.000 --> 01:36.000
+la propiedad de prototipo que se genera
+sola
+
+01:36.000 --> 01:39.000
+cuando nosotros construimos una clase
+constructora
+
+01:39.000 --> 01:41.000
+o una función
+constructora,
+
+01:41.000 --> 01:45.000
+solo funciona con funciones y clases.
+
+01:45.000 --> 01:50.000
+Si construimos una
+instancia,
+
+01:50.000 --> 01:54.000
+las instancias no van a tener esta
+propiedad de prototipo.
+
+01:54.000 --> 01:56.000
+Entonces, ahora, para empezar a hablar de
+un ejemplo real
+
+01:56.000 --> 01:58.000
+que podamos ver en
+práctica,
+
+01:58.000 --> 02:01.000
+vamos a empezar a construir, por ejemplo,
+ciertas clases
+
+02:01.000 --> 02:03.000
+para ver cómo
+funciona.
+
+02:03.000 --> 02:05.000
+Entonces, empezamos con
+class.
+
+02:05.000 --> 02:08.000
+Vamos a construir una clase que se llama
+Animal.
+
+02:08.000 --> 02:10.000
+Abrimos los
+brackets.
+
+02:10.000 --> 02:14.000
+Y adentro de la clase Animal vamos a poner
+el constructor
+
+02:14.000 --> 02:17.000
+que vamos a utilizar para tener ciertas
+propiedades.
+
+02:17.000 --> 02:22.000
+En este caso va a ser algo básico que es
+el nombre y el tipo.
+
+02:22.000 --> 02:23.000
+Como hablamos de
+animal,
+
+02:23.000 --> 02:26.000
+puede ser que estemos hablando de un perro,
+un gato,
+
+02:26.000 --> 02:28.000
+cualquier otro tipo de
+animal.
+
+02:28.000 --> 02:30.000
+Entonces, el tipo va a ser
+importante
+
+02:30.000 --> 02:32.000
+para poder
+diferenciarlo.
+
+02:32.000 --> 02:37.000
+Ya que tenemos aquí como el nombre de las
+propiedades básicas,
+
+02:37.000 --> 02:42.000
+comenzamos a ligar o terminar de generar
+nuestro constructor.
+
+02:42.000 --> 02:47.000
+dis.nombre es igual al nombre que nos van
+a pasar
+
+02:47.000 --> 02:49.000
+al momento de generar la
+instancia.
+
+02:49.000 --> 02:55.000
+dis.tipo va a ser igual al tipo que...
+
+02:55.000 --> 03:00.000
+el tipo, acá, que está
+aquí,
+
+03:00.000 --> 03:01.000
+que es el tipo que nos van a
+poner
+
+03:01.000 --> 03:03.000
+al momento de que se genere la instancia.
+
+03:03.000 --> 03:06.000
+Ya tenemos aquí la estructura del constructor.
+
+03:06.000 --> 03:09.000
+Ahora, vamos a crear un
+método,
+
+03:09.000 --> 03:12.000
+emitir
+sonido.
+
+03:12.000 --> 03:14.000
+Como es un
+animal,
+
+03:14.000 --> 03:16.000
+los animales también tienen la
+diferencia
+
+03:16.000 --> 03:18.000
+de que uno de los sonidos son distintos.
+
+03:18.000 --> 03:20.000
+Entonces, con emitir
+sonido,
+
+03:20.000 --> 03:22.000
+lo que queremos es también algo básico,
+
+03:22.000 --> 03:26.000
+console.log, que prácticamente, de forma
+muy rápida,
+
+03:26.000 --> 03:33.000
+simplemente nos diga el animal emite un
+sonido.
+
+03:33.000 --> 03:35.000
+Perfecto con
+eso.
+
+03:35.000 --> 03:36.000
+Ya tenemos nuestra primer
+clase.
+
+03:36.000 --> 03:39.000
+Esta es una clase que es un
+molde
+
+03:39.000 --> 03:42.000
+para poder empezar a construir animales.
+
+03:42.000 --> 03:44.000
+Antes de esto, por
+ejemplo,
+
+03:44.000 --> 03:46.000
+si yo quiero
+construir,
+
+03:46.000 --> 03:49.000
+digamos, quiero generar
+perros,
+
+03:49.000 --> 03:52.000
+pues perros también tiene una subcategoría.
+
+03:52.000 --> 03:54.000
+Viene el tipo de raza de
+perro,
+
+03:54.000 --> 03:57.000
+entonces, si empiezo a generar instancias
+de animal
+
+03:57.000 --> 03:59.000
+que sean
+perro,
+
+03:59.000 --> 04:01.000
+creo que me queda un poco
+corto,
+
+04:01.000 --> 04:03.000
+tengo que generar otra
+clase,
+
+04:03.000 --> 04:06.000
+que en este caso va a ser otra clase
+constructora,
+
+04:06.000 --> 04:09.000
+que va a ser perro, por
+ejemplo.
+
+04:09.000 --> 04:12.000
+Entonces vamos a generar
+class,
+
+04:12.000 --> 04:15.000
+que sea perro,
+exacto,
+
+04:15.000 --> 04:19.000
+y empezamos con su
+constructor.
+
+04:19.000 --> 04:20.000
+Tenemos el
+constructor,
+
+04:20.000 --> 04:21.000
+y en perro, ¿qué me
+interesa?
+
+04:21.000 --> 04:24.000
+A ver, va a ser el nombre del perro,
+
+04:24.000 --> 04:27.000
+va a ser el tipo de
+perro,
+
+04:27.000 --> 04:29.000
+y va a ser, por ejemplo, la
+raza,
+
+04:29.000 --> 04:32.000
+que esto también es
+importante.
+
+04:32.000 --> 04:35.000
+Ahora, aquí, ¿por qué
+estamos?
+
+04:35.000 --> 04:39.000
+Una vez que nosotros tenemos una clase,
+
+04:39.000 --> 04:41.000
+que esta es una clase
+constructora,
+
+04:41.000 --> 04:43.000
+esta es una clase
+constructora,
+
+04:43.000 --> 04:45.000
+estas todavía no son
+instancias,
+
+04:45.000 --> 04:46.000
+en este
+momento,
+
+04:46.000 --> 04:48.000
+la clase constructora de
+perro,
+
+04:48.000 --> 04:50.000
+lo que a mí me interesa es que pueda
+extender
+
+04:50.000 --> 04:54.000
+ciertas cosas que tiene esta otra clase
+constructora.
+
+04:54.000 --> 04:55.000
+Entonces, con
+esto,
+
+04:55.000 --> 04:57.000
+nuestra clase todavía no está lista.
+
+04:57.000 --> 04:59.000
+Si vamos a utilizar ciertas
+cosas
+
+04:59.000 --> 05:01.000
+que tiene la clase
+constructora,
+
+05:01.000 --> 05:04.000
+aquí tenemos que empezar con extend,
+
+05:04.000 --> 05:09.000
+que
+extends.
+
+05:09.000 --> 05:11.000
+Lo que le estamos diciendo
+es,
+
+05:11.000 --> 05:15.000
+la clase de perro va a extender de la
+clase animal.
+
+05:15.000 --> 05:18.000
+Una vez que extiende de la clase animal,
+
+05:18.000 --> 05:20.000
+ya podemos utilizar ciertas
+cosas
+
+05:20.000 --> 05:22.000
+que vienen en esta
+clase,
+
+05:22.000 --> 05:23.000
+que es la clase
+padre.
+
+05:23.000 --> 05:25.000
+En este momento, yo estoy
+diciendo,
+
+05:25.000 --> 05:27.000
+perro, necesito que traiga el nombre,
+
+05:27.000 --> 05:29.000
+también necesito que traiga la raza,
+
+05:29.000 --> 05:31.000
+y el tipo, el tipo, pues
+bueno,
+
+05:31.000 --> 05:33.000
+el tipo y raza es lo mismo en perro,
+
+05:33.000 --> 05:35.000
+pero el tipo, por
+ejemplo,
+
+05:35.000 --> 05:37.000
+es algo que yo puedo utilizar
+prácticamente
+
+05:37.000 --> 05:38.000
+de la clase de
+animal.
+
+05:38.000 --> 05:40.000
+Entonces, si yo lo voy a
+utilizar,
+
+05:40.000 --> 05:43.000
+necesito que aquí venga el tipo en nuestro
+constructor,
+
+05:43.000 --> 05:45.000
+porque ya con
+esto,
+
+05:45.000 --> 05:47.000
+yo puedo empezar a utilizar el this.
+
+05:47.000 --> 05:49.000
+Pero para que yo pueda utilizar el
+this
+
+05:49.000 --> 05:53.000
+en ciertas propiedades que vienen de otra
+clase,
+
+05:53.000 --> 05:56.000
+necesito utilizar una palabra
+reservada
+
+05:56.000 --> 05:58.000
+que se llama
+sub.
+
+05:58.000 --> 06:00.000
+Y entonces en
+super,
+
+06:00.000 --> 06:03.000
+para que yo pueda utilizar el
+this
+
+06:03.000 --> 06:05.000
+de mi
+clase,
+
+06:05.000 --> 06:08.000
+que pueda extender de una clase constructora,
+
+06:08.000 --> 06:10.000
+necesito poner, por
+ejemplo,
+
+06:10.000 --> 06:12.000
+cuáles son ese tipo de
+propiedades,
+
+06:12.000 --> 06:14.000
+que en este caso será el
+nombre
+
+06:14.000 --> 06:16.000
+y el
+tipo.
+
+06:16.000 --> 06:20.000
+Entonces con esto, ya
+puedo,
+
+06:20.000 --> 06:24.000
+aquí yo utilizar el
+this.raza,
+
+06:24.000 --> 06:27.000
+que es lo único
+nuevo
+
+06:27.000 --> 06:31.000
+que trae mi clase constructora de perro,
+
+06:31.000 --> 06:33.000
+que va a ser igual a
+raza.
+
+06:33.000 --> 06:37.000
+Entonces aquí es importante comentar
+ciertas cosas
+
+06:37.000 --> 06:39.000
+con relación al
+this.
+
+06:39.000 --> 06:40.000
+Por
+ejemplo,
+
+06:40.000 --> 06:42.000
+el
+this,
+
+06:42.000 --> 06:44.000
+al momento de que nosotros utilizamos el this,
+
+06:44.000 --> 06:47.000
+llama al constructor de la
+base,
+
+06:47.000 --> 06:48.000
+de la clase
+base.
+
+06:48.000 --> 06:49.000
+¿Qué quiere decir
+entonces?
+
+06:49.000 --> 06:52.000
+Cuando entramos nosotros a la clase de perro,
+
+06:52.000 --> 06:55.000
+que extiende de
+animal,
+
+06:55.000 --> 06:57.000
+lo que va a hacer el
+super
+
+06:57.000 --> 06:59.000
+es que va a llamar al
+constructor
+
+06:59.000 --> 07:01.000
+de la clase
+animal
+
+07:01.000 --> 07:02.000
+y le va a
+decir,
+
+07:02.000 --> 07:04.000
+oye, voy a utilizar el nombre y el
+tipo
+
+07:04.000 --> 07:07.000
+en la clase que se está extendiendo que es
+perro.
+
+07:07.000 --> 07:09.000
+Si nosotros no ponemos el
+super,
+
+07:09.000 --> 07:12.000
+no podríamos hacer uso del nombre y el
+tipo
+
+07:12.000 --> 07:14.000
+en nuestra clase de
+perro,
+
+07:14.000 --> 07:18.000
+porque entonces tendríamos que quitar el
+extend animal
+
+07:18.000 --> 07:20.000
+y empezar a replicar el
+código.
+
+07:20.000 --> 07:23.000
+De aquí no estaríamos utilizando la herencia,
+
+07:23.000 --> 07:26.000
+que es importante en programación
+orientada a objetos.
+
+07:26.000 --> 07:29.000
+Aquí estaríamos simplemente haciendo una
+clase nueva
+
+07:29.000 --> 07:31.000
+y estaríamos replicando nombre y
+tipo
+
+07:31.000 --> 07:34.000
+que ya estábamos utilizando en otra clase
+más grande
+
+07:34.000 --> 07:36.000
+o en otra clase
+padre,
+
+07:36.000 --> 07:38.000
+que lo que puede hacer como
+beneficio
+
+07:38.000 --> 07:40.000
+es extendemos de lo que ya
+tenemos.
+
+07:40.000 --> 07:41.000
+Suena un poco
+complejo,
+
+07:41.000 --> 07:43.000
+pero ahorita en el ejemplo lo vas a
+entender bastante bien
+
+07:43.000 --> 07:46.000
+ya que empecemos a imprimir a qué me
+refiero con esto.
+
+07:46.000 --> 07:49.000
+Pues siempre que tú extiendas de una clase,
+
+07:49.000 --> 07:51.000
+quiere decir que vas a
+empezar
+
+07:51.000 --> 07:54.000
+o tienes el superpoder de
+utilizar
+
+07:54.000 --> 07:59.000
+los métodos y las propiedades de una clase
+que ya existe
+
+07:59.000 --> 08:01.000
+para que tú no tengas que replicarlo.
+
+08:01.000 --> 08:04.000
+Y para poder hacerlo, utilizas el extend
+animal,
+
+08:04.000 --> 08:06.000
+que es el extend de una clase
+más,
+
+08:06.000 --> 08:10.000
+y el super para poder entrar a lo que son
+las propiedades,
+
+08:10.000 --> 08:13.000
+en este caso, que tiene la otra clase.
+
+08:13.000 --> 08:14.000
+Perfecto.
+
+08:14.000 --> 08:17.000
+Aquí lo que quiero es para que puedas
+entender,
+
+08:17.000 --> 08:21.000
+this sigue siendo la clase
+misma.
+
+08:21.000 --> 08:24.000
+Entonces aquí estamos teniendo el this.
+raza,
+
+08:24.000 --> 08:27.000
+este this hace referencia a la clase de perro.
+
+08:27.000 --> 08:31.000
+Y si nosotros queremos hacer el uso de,
+por ejemplo,
+
+08:31.000 --> 08:32.000
+nombre, tipo o
+raza,
+
+08:32.000 --> 08:34.000
+el this es lo que nos va a
+ayudar,
+
+08:34.000 --> 08:36.000
+pero en este caso nombre y
+tipo
+
+08:36.000 --> 08:38.000
+no pertenecen a la clase de
+perro,
+
+08:38.000 --> 08:40.000
+pertenecen a una clase
+adicional.
+
+08:40.000 --> 08:43.000
+Con el super yo puedo utilizar
+this
+
+08:43.000 --> 08:45.000
+para poder utilizar nombre y
+tipo.
+
+08:45.000 --> 08:49.000
+Vamos a un ejemplo un poco más
+visual
+
+08:49.000 --> 08:51.000
+para que puedas
+entenderme.
+
+08:51.000 --> 08:53.000
+Ya que estamos aquí en la de
+perro,
+
+08:53.000 --> 08:55.000
+vamos a generar un
+método
+
+08:55.000 --> 08:58.000
+que se va a llamar emitir
+sonido.
+
+08:58.000 --> 08:59.000
+Y tú puedes
+decir,
+
+08:59.000 --> 09:02.000
+como Diego, ya generamos ese método en
+otra clase,
+
+09:02.000 --> 09:05.000
+tienes el super poder de
+reescribir
+
+09:05.000 --> 09:09.000
+lo que el método va a, en este caso, imprimir.
+
+09:09.000 --> 09:13.000
+Lo que quiero es que cuando yo utilice el
+método,
+
+09:13.000 --> 09:15.000
+este método en
+perro,
+
+09:15.000 --> 09:18.000
+quiero que me saque un texto completamente
+distinto.
+
+09:18.000 --> 09:21.000
+Entonces acá,
+console.log,
+
+09:22.000 --> 09:27.000
+lo que quiero que haga es que sea el perro
+ladra.
+
+09:27.000 --> 09:30.000
+En vez de que me diga el animal emite un
+sonido,
+
+09:30.000 --> 09:31.000
+que esto es muy
+genérico,
+
+09:31.000 --> 09:34.000
+porque hablamos nada más de una clase de
+animal,
+
+09:34.000 --> 09:37.000
+quiero que cuando utilice alguna instancia
+de perro,
+
+09:37.000 --> 09:40.000
+lo que me imprima al sacar el emitir el
+sonido
+
+09:40.000 --> 09:43.000
+sea el perro, sea muy
+explícito
+
+09:43.000 --> 09:45.000
+que estamos hablando de un perro, ladra.
+
+09:45.000 --> 09:49.000
+Perfecto, y ahora vamos a generar otro
+método
+
+09:49.000 --> 09:51.000
+que se llama
+correr.
+
+09:53.000 --> 09:56.000
+Y aquí lo que quiero es que se imprima,
+
+09:56.000 --> 09:59.000
+console.log, vamos a utilizar el nombre,
+
+09:59.000 --> 10:02.000
+que el nombre estamos extendiendo del
+animal
+
+10:02.000 --> 10:06.000
+y que es donde super nos va a permitir
+utilizar el this
+
+10:06.000 --> 10:09.000
+para poder extender de esa propiedad.
+
+10:09.000 --> 10:13.000
+Quiero que aquí en el nombre lo que me
+traiga es un,
+
+10:13.000 --> 10:16.000
+de hecho como he utilizado una variable,
+
+10:16.000 --> 10:18.000
+vamos a hacerlo así, y
+es
+
+10:21.000 --> 10:25.000
+this.nombre, el nombre del
+perro,
+
+10:26.000 --> 10:31.000
+corre
+alegremente.
+
+10:33.000 --> 10:34.000
+Perfecto.
+
+10:34.000 --> 10:36.000
+Entonces aquí vamos a
+guardar,
+
+10:36.000 --> 10:38.000
+no nos va a imprimir absolutamente
+nada
+
+10:38.000 --> 10:40.000
+porque todavía no estamos generando
+instancias.
+
+10:40.000 --> 10:43.000
+Recordemos que estas apenas son moldes,
+
+10:43.000 --> 10:45.000
+que todavía no tienen
+información,
+
+10:45.000 --> 10:47.000
+son simplemente nuestras clases constructoras.
+
+10:47.000 --> 10:51.000
+Entonces empezamos aquí a generar una
+primera instancia,
+
+10:51.000 --> 10:55.000
+vamos como const que sea
+perro1,
+
+10:55.000 --> 10:57.000
+cuando estés trabajando en
+programación
+
+10:57.000 --> 10:59.000
+tienes que ser mucho más explícitos,
+
+10:59.000 --> 11:02.000
+por ejemplo, en el nombre de tus variables,
+
+11:02.000 --> 11:04.000
+pero esto como ejemplo
+funciona
+
+11:04.000 --> 11:06.000
+para el uso práctico de esta
+clase.
+
+11:06.000 --> 11:09.000
+Pues será perro1, va a ser igual a new,
+
+11:09.000 --> 11:12.000
+para crear una nueva instancia, de perro.
+
+11:12.000 --> 11:14.000
+Quiero generar una instancia de perro.
+
+11:14.000 --> 11:18.000
+Y esta instancia va a
+tener,
+
+11:18.000 --> 11:21.000
+este perro se va a llamar, por ejemplo,
+
+11:22.000 --> 11:25.000
+yo creo que va a ser, sí,
+Bobby.
+
+11:27.000 --> 11:31.000
+Bobby es un perro, es el
+tipo,
+
+11:31.000 --> 11:34.000
+y
+aquí,
+
+11:34.000 --> 11:38.000
+y la raza de Bobby es un
+Pug.
+
+11:41.000 --> 11:43.000
+Tenemos, si
+guardamos,
+
+11:43.000 --> 11:46.000
+ahora me interesa
+console.log,
+
+11:46.000 --> 11:50.000
+vamos a imprimir
+perro1.
+
+11:51.000 --> 11:53.000
+Entonces aquí ya nos
+regresa,
+
+11:53.000 --> 11:55.000
+al momento de que
+guardemos,
+
+11:55.000 --> 11:57.000
+ya tenemos aquí
+impreso
+
+11:57.000 --> 12:01.000
+lo que sería nuestro primer objeto de la
+instancia perro,
+
+12:01.000 --> 12:03.000
+y podemos ver que es un tipo
+perro,
+
+12:03.000 --> 12:06.000
+es una raza Pug y es un nombre Bobby.
+
+12:06.000 --> 12:11.000
+Y esto está ligado directamente a la
+constructora perro,
+
+12:11.000 --> 12:15.000
+que a su igual forma está extendiendo
+cosas de animal.
+
+12:15.000 --> 12:17.000
+Pero bueno, es lo que me
+interesa.
+
+12:17.000 --> 12:20.000
+Aquí tenemos ya prácticamente nuestro
+primer perro
+
+12:20.000 --> 12:23.000
+que extiende de nuestra clase perro,
+
+12:23.000 --> 12:24.000
+que se llama
+Bobby.
+
+12:24.000 --> 12:26.000
+Ahora, vamos a ver lo que te
+decía.
+
+12:26.000 --> 12:29.000
+Si yo lo que quiero es, por ejemplo,
+
+12:29.000 --> 12:33.000
+emitir el método de
+correz,
+
+12:34.000 --> 12:39.000
+sería más bien un
+perro1.correz,
+
+12:40.000 --> 12:42.000
+para ver qué es lo que me
+regresa.
+
+12:46.000 --> 12:48.000
+Aquí viene Bobby, corre alegremente,
+
+12:48.000 --> 12:50.000
+y es lo que te
+comentaba.
+
+12:50.000 --> 12:52.000
+Otros estamos imprimiendo el nombre,
+
+12:52.000 --> 12:56.000
+pero nuestra clase de perro, per se,
+
+12:56.000 --> 12:59.000
+el nombre no le pertenece a la clase de perro,
+
+12:59.000 --> 13:03.000
+sino está heredando esa propiedad de la
+clase de animal.
+
+13:03.000 --> 13:06.000
+Y nosotros podemos hacer uso de propiedades,
+
+13:06.000 --> 13:07.000
+incluso
+métodos.
+
+13:07.000 --> 13:10.000
+Si nosotros mandamos llamar el método de
+emitir sonido,
+
+13:12.000 --> 13:15.000
+console.low, porque es
+una,
+
+13:15.000 --> 13:18.000
+bueno, de hecho, como es una propiedad,
+
+13:18.000 --> 13:26.000
+sería
+perro1.emitirsonido,
+
+13:26.000 --> 13:28.000
+tendría que regresar el perro ladra.
+
+13:28.000 --> 13:31.000
+Aquí nos está regresando prácticamente el
+método
+
+13:31.000 --> 13:33.000
+que está dentro de nuestra clase perro,
+
+13:33.000 --> 13:36.000
+no el método que está dentro de nuestra
+clase animal.
+
+13:36.000 --> 13:37.000
+¿Por
+qué?
+
+13:37.000 --> 13:40.000
+Porque estamos reescribiendo el método,
+
+13:40.000 --> 13:43.000
+porque estamos generando una instancia
+correcta
+
+13:43.000 --> 13:45.000
+de perro, no de
+animal.
+
+13:45.000 --> 13:47.000
+Si generamos una instancia de
+animal
+
+13:47.000 --> 13:51.000
+y mandamos llamar emitirsonido de la
+instancia de animal,
+
+13:51.000 --> 13:53.000
+nos regresaría este
+mensaje.
+
+13:53.000 --> 13:56.000
+Para nosotros, como estamos haciendo una
+instancia de perro,
+
+13:56.000 --> 13:58.000
+simplemente estamos reescribiendo el
+texto
+
+13:58.000 --> 14:00.000
+y nos regresa este
+mensaje.
+
+14:00.000 --> 14:03.000
+Ahora, si yo quisiera empezar con esta
+clase
+
+14:03.000 --> 14:05.000
+que yo ya tengo, por
+ejemplo,
+
+14:05.000 --> 14:09.000
+a crear nuevas propiedades o nuevos métodos,
+
+14:09.000 --> 14:12.000
+ahí es donde vamos a empezar a modificar
+el prototipo,
+
+14:12.000 --> 14:14.000
+que es lo que yo te
+decía.
+
+14:14.000 --> 14:17.000
+Tenemos una clase constructora de
+animal
+
+14:17.000 --> 14:19.000
+y una clase constructora de
+perro.
+
+14:19.000 --> 14:22.000
+Automáticamente estas dos
+clases
+
+14:22.000 --> 14:25.000
+generan algo que se le llama un
+prototipo
+
+14:25.000 --> 14:28.000
+que guarda los métodos y las
+propiedades
+
+14:28.000 --> 14:30.000
+de cada una de las
+clases.
+
+14:30.000 --> 14:32.000
+¿A qué me refiero con
+eso?
+
+14:32.000 --> 14:37.000
+Si ponemos animal.prototype e imprimimos,
+
+14:37.000 --> 14:41.000
+me regresa este pequeño
+objeto.
+
+14:41.000 --> 14:44.000
+Cuando yo lo abro, este pequeño objeto me
+dice
+
+14:44.000 --> 14:46.000
+perfecto, es el constructor
+animal.
+
+14:46.000 --> 14:51.000
+Al abrir animal, puedo tener
+información
+
+14:51.000 --> 14:54.000
+de lo que viene de la clase constructora
+animal,
+
+14:54.000 --> 14:56.000
+pero me regresa que tengo un método,
+
+14:56.000 --> 14:58.000
+que es emitir
+sonido,
+
+14:58.000 --> 15:01.000
+que ese es el método que se está
+compartiendo prácticamente,
+
+15:01.000 --> 15:04.000
+que yo puedo utilizar en otras instancias.
+
+15:04.000 --> 15:08.000
+Si hago lo mismo, por ejemplo, con perro.
+
+15:08.000 --> 15:12.000
+perro.prototype
+
+15:15.000 --> 15:19.000
+Aquí con perro, me regresa que tiene dos
+instancias,
+
+15:19.000 --> 15:22.000
+que es emitir sonido y tiene el de correr.
+
+15:22.000 --> 15:25.000
+Si abro el tema de perro, me regresa que
+tiene también
+
+15:25.000 --> 15:29.000
+cierta información como el nombre de la
+clase constructora
+
+15:29.000 --> 15:32.000
+y que tiene un prototipo que está
+heredando
+
+15:32.000 --> 15:34.000
+ciertas cosas de
+animal.
+
+15:34.000 --> 15:36.000
+Podemos ver acá, y cuando entro a animal,
+
+15:36.000 --> 15:38.000
+me da la
+información.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/06-index_384b7837-2cc2-4536-ac3b-b67f93155a03.js

@@ -0,0 +1,40 @@
+class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+const perro1 = new Perro("Bobby", "Perro", "Pug");
+
+console.log(perro1);
+perro1.correr();
+perro1.emitirSonido();
+
+perro1.nuevoMetodo = function () {
+  console.log("Este es un metodo");
+};
+
+Perro.prototype.segundoMetodo = function () {
+  console.log("Es otro nuevo metodo");
+};
+
+Animal.prototype.tercerMetodo = function () {
+  console.log("Un metodo más");
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/06-index_6a991b46-e782-4d78-a468-526db36453e2.js

@@ -0,0 +1,40 @@
+class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+const perro1 = new Perro("Bobby", "Perro", "Pug");
+
+console.log(perro1);
+perro1.correr();
+perro1.emitirSonido();
+
+perro1.nuevoMetodo = function () {
+  console.log("Este es un metodo");
+};
+
+Perro.prototype.segundoMetodo = function () {
+  console.log("Es otro nuevo metodo");
+};
+
+Animal.prototype.tercerMetodo = function () {
+  console.log("Un metodo más");
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/07-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/07-Métodos y herencia prototípica en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:380bf3c9ad65be3f2898c8479385f4d1293c932d91647aa5db1eb60502e254c3
+size 91902801

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/07-Métodos y herencia prototípica en JavaScript.vtt

@@ -0,0 +1,655 @@
+WEBVTT
+
+00:00.000 --> 00:05.200
+¿Qué pasa si yo ahorita quisiera generar,
+por ejemplo, de mi instancia de perro1 un nuevo método?
+
+00:05.200 --> 00:08.400
+Porque me doy cuenta que al estar
+trabajando ya con la instancia,
+
+00:08.400 --> 00:14.400
+hay ciertas cosas que necesito particulares,
+ya con las instancias que no vienen en mi clase constructora.
+
+00:14.400 --> 00:20.600
+Pues lo que voy a hacer es, hay ciertas
+formas, pero lo primero sería perro1,
+
+00:20.600 --> 00:26.600
+y mando crear lo que sería el nuevo método,
+nuevo método.
+
+00:26.600 --> 00:33.300
+Como el método es prácticamente una función,
+entonces es igual a una función.
+
+00:33.300 --> 00:39.400
+Y ya con la función, hacemos algo básico como,
+
+00:39.400 --> 00:46.400
+esta es, o más bien, este es un método.
+
+00:46.400 --> 01:00.800
+Súper bien, si guardamos, y aquí veo mi
+instancia de perro1, puedo ver que ya está ese nuevo método aquí.
+
+01:00.800 --> 01:07.500
+Perfecto, podría incluso generar perro1.
+nuevo método,
+
+01:07.500 --> 01:10.800
+y me traería el mensaje, justo como lo
+acabamos de hacer.
+
+01:10.800 --> 01:15.900
+Pero ahora, si yo tuviera más instancias,
+y si yo quisiera utilizar este nuevo método,
+
+01:15.900 --> 01:20.200
+de esta forma lo que estoy haciendo,
+por ejemplo,
+
+01:20.200 --> 01:23.600
+mando llamar mi clase
+constructora,
+
+01:23.600 --> 01:29.000
+puedo ver que aquí no está ese método,
+tengo nada más correr y tengo nada más emitir sonido,
+
+01:29.000 --> 01:33.200
+y se me preguntó, ¿por qué? ¿por qué no
+está si yo acabo de generar este nuevo método?
+
+01:33.200 --> 01:38.900
+Aquí es donde el tema de prototype y la
+herencia es muy importante que lo podamos entender.
+
+01:38.900 --> 01:46.200
+Lo que estoy haciendo con esta línea de
+código, o con esta línea de código, es, estoy agregando un nuevo método solo a la instancia.
+
+01:46.200 --> 01:54.200
+Y yo lo que necesitaría hacer es agregar
+ese método a mi clase constructora, o a la clase padre, que sería la clase de perro.
+
+01:54.200 --> 01:57.700
+Y la forma de hacer es un sí, claro,
+puedes venir a esta clase,
+
+01:57.700 --> 02:01.500
+y aquí tú podrías generar ese nuevo método,
+
+02:01.500 --> 02:05.200
+posiblemente si ya tienes muchas
+instancias y eso puede ser un poco peligroso,
+
+02:05.200 --> 02:11.400
+pero lo que tienes que hacer es inyectar
+ese nuevo método al prototipo que se genera automáticamente
+
+02:11.400 --> 02:14.700
+cuando yo estoy generando mi clase de perro.
+
+02:14.700 --> 02:18.200
+Y la forma de hacerlo
+es,
+
+02:18.200 --> 02:25.200
+perro1.prototype,
+
+02:25.200 --> 02:33.000
+estoy diciendo, perfecto, hay una cadena
+que está enlazando a perro1 con la clase de perro,
+
+02:33.000 --> 02:40.500
+entonces al prototype de la cadena que
+enlaza a mi clase padre, a esa clase,
+
+02:40.500 --> 02:47.700
+necesito que le inyectes lo que sería,
+por ejemplo, un segundo método.
+
+02:47.700 --> 02:51.300
+Y esto nada más como ejemplo, para que
+veas qué pasa en este momento.
+
+02:51.300 --> 02:53.300
+¿Cómo es una
+función?
+
+02:53.300 --> 02:56.700
+Método es una función, entonces lo
+trabajamos de igual forma.
+
+02:56.700 --> 03:00.800
+Vamos a crear un método muy sencillo, console.
+log,
+
+03:00.800 --> 03:07.800
+que me regrese simplemente es otro nuevo
+método.
+
+03:07.800 --> 03:17.100
+Podemos guardar y si aquí yo vengo y,
+por ejemplo, veo qué hay ahorita en perro1,
+
+03:17.100 --> 03:23.400
+tiene el método que nosotros estamos
+generando, tiene, por ejemplo, todo lo que ya teníamos,
+
+03:23.400 --> 03:29.200
+que viene en la parte de perro, pero si yo
+lo que hago es perro1.
+
+03:29.200 --> 03:34.800
+Y aquí como se llamó, segundo método,
+que de hecho tenemos aquí un typo,
+
+03:34.800 --> 03:42.500
+vamos a poner segundo método, lo guardamos,
+
+03:42.500 --> 03:52.600
+y entonces aquí sería.segundo método.
+
+03:52.600 --> 03:56.000
+Aquí hay un error muy importante y vamos a
+explicarlo,
+
+03:56.000 --> 03:59.500
+para poder entender y evitar que esto
+vuelva a pasar.
+
+03:59.500 --> 04:03.200
+Estoy en el código y lo que estoy haciendo
+aquí es, evidentemente,
+
+04:03.200 --> 04:08.100
+ya que tengo mi instancia de perro, puedo
+ver que no está ese nuevo método.
+
+04:08.100 --> 04:09.700
+¿Qué está
+pasando?
+
+04:09.700 --> 04:14.800
+Lo que estoy viendo es que estoy
+intentando agregarle un nuevo método
+
+04:14.800 --> 04:18.300
+al prototipo de una
+instancia.
+
+04:18.300 --> 04:22.300
+Y lo que yo te comenté es que los prototipos,
+
+04:22.300 --> 04:28.100
+este tipo de método de prototype, solo se
+crea con las clases
+
+04:28.100 --> 04:30.600
+o las funciones
+constructoras.
+
+04:30.600 --> 04:35.900
+Entonces esto no va a funcionar nunca
+porque la instancia no tiene un prototipo.
+
+04:35.900 --> 04:43.400
+Si venimos aquí, ponemos perro1.prototype,
+
+04:43.400 --> 04:48.400
+me sale undefined, es de, oye, esto no existe,
+no está definido.
+
+04:48.400 --> 04:54.200
+Si venimos aquí,
+perro.prototype,
+
+04:54.200 --> 04:57.500
+me está regresando un prototipo, me está
+regresando un prototipo
+
+04:57.500 --> 05:02.000
+con los métodos que trae perro que se
+pueden compartir.
+
+05:02.000 --> 05:05.000
+Entonces este error es
+común.
+
+05:05.000 --> 05:07.900
+Te va a pasar, me pasó a
+mí.
+
+05:07.900 --> 05:11.300
+La forma correcta de agregar una instancia,
+
+05:11.300 --> 05:15.600
+por ejemplo, de agregar un método nuevo a
+las instancias,
+
+05:15.600 --> 05:19.300
+es agregar el método al prototipo de una
+clase
+
+05:19.300 --> 05:21.200
+o una función
+constructora.
+
+05:21.200 --> 05:24.700
+Si hacemos esto y
+guardamos,
+
+05:24.700 --> 05:31.700
+bien, aquí vengo, digo perro.prototype,
+
+05:34.600 --> 05:40.000
+prototype, al momento de que me trae el
+prototipo de la clase,
+
+05:40.000 --> 05:43.800
+puedo ver que aquí ya está este nuevo método.
+
+05:43.800 --> 05:50.000
+Y entonces si yo agarro perro1.segundo,
+
+05:50.000 --> 05:52.900
+puedo ver que ya incluso
+está,
+
+05:52.900 --> 05:54.500
+y si lo mando
+llamar,
+
+05:54.500 --> 05:57.700
+entonces ahora sí ya me está trayendo ese
+console.log.
+
+05:57.700 --> 05:59.600
+Entonces lo que está pasando es
+un,
+
+05:59.600 --> 06:03.700
+si yo aquí traigo, por ejemplo, perro1,
+
+06:03.700 --> 06:07.100
+perro1, aquí no trae ese nuevo
+método
+
+06:07.100 --> 06:10.900
+porque ese método lo estamos heredando
+directamente
+
+06:10.900 --> 06:15.100
+gracias al prototipo de nuestra clase padre.
+
+06:15.100 --> 06:18.900
+Y lo está heredando gracias a algo que se
+le llama cadena.
+
+06:18.900 --> 06:20.900
+Es una cadena de
+prototipo.
+
+06:20.900 --> 06:23.500
+Y esa cadena de prototipo es
+un,
+
+06:23.500 --> 06:26.400
+cuando yo mando llamar
+perro1,
+
+06:26.400 --> 06:29.000
+la cadena de prototipo le pregunta a la
+instancia,
+
+06:29.000 --> 06:31.100
+oye, ¿tienes este
+método?
+
+06:31.100 --> 06:33.400
+La instancia contesta, yo no la tengo.
+
+06:33.400 --> 06:38.100
+Entonces sube a la cadena, a la clase padre,
+
+06:38.100 --> 06:40.400
+que en este caso la clase padre es perro,
+
+06:40.400 --> 06:43.600
+y le preguntaría, oye, ¿tú tienes ese
+método?
+
+06:43.600 --> 06:46.100
+La clase padre diría, yo adentro no,
+
+06:46.100 --> 06:48.600
+pero lo voy a checar con mi prototipo.
+
+06:48.600 --> 06:50.300
+Y el prototipo le va a decir, sí, aquí está.
+
+06:50.300 --> 06:51.700
+Y entonces lo
+regresa,
+
+06:51.700 --> 06:55.000
+y perro1 puede imprimir prácticamente el
+mensaje
+
+06:55.000 --> 06:57.200
+o la acción que tenga este
+método.
+
+06:57.200 --> 06:59.700
+A eso se le llama cadena de prototipo.
+
+06:59.700 --> 07:03.500
+Ahora, para poder explicar
+visualmente
+
+07:03.500 --> 07:06.000
+a lo que me refiero con cadena de prototipo,
+
+07:06.000 --> 07:09.000
+voy aquí a copiar un código
+rápido.
+
+07:09.000 --> 07:11.100
+Te lo voy a explicar, este código no
+importa mucho,
+
+07:11.100 --> 07:13.500
+es nada más para que pueda imprimir
+yo
+
+07:13.500 --> 07:16.700
+esta cadena de prototipado que tú puedas
+verlo de forma visual.
+
+07:16.700 --> 07:19.700
+Pero te lo explico, estoy generando una
+variable let,
+
+07:19.700 --> 07:22.400
+que se llama el prototipo
+actual.
+
+07:22.400 --> 07:25.300
+Y la forma de llegar al prototipo
+actual
+
+07:25.300 --> 07:28.500
+es
+object.getPrototypeOf.
+
+07:28.500 --> 07:32.100
+Y le estoy pidiendo, oye, al objeto global,
+
+07:32.100 --> 07:37.200
+dame el prototipo de
+perro1.
+
+07:37.200 --> 07:40.400
+Como perro es una instancia, perro1 es una
+instancia,
+
+07:40.400 --> 07:43.400
+no me va a regresar un prototipo porque no
+tiene,
+
+07:43.400 --> 07:47.200
+pero entonces va a buscar cuál es el
+prototipo del padre,
+
+07:47.200 --> 07:49.800
+que en este caso va a ser
+perro.
+
+07:49.800 --> 07:52.000
+Entonces voy a generar un
+for,
+
+07:52.000 --> 07:54.000
+y en ese for lo que voy a estar
+haciendo
+
+07:54.000 --> 07:56.400
+es voy a estar guardando en esta
+variable
+
+07:56.400 --> 07:59.800
+todos los prototipos que están encadenados.
+
+07:59.800 --> 08:01.500
+Esta cadena de
+prototipado,
+
+08:01.500 --> 08:04.200
+todos los prototipos hasta llegar a un nul.
+
+08:04.200 --> 08:06.900
+Entonces la primera me va a regresar perro1,
+
+08:06.900 --> 08:09.100
+la segunda me va a regresar el perro,
+
+08:09.100 --> 08:11.100
+la tercera me va a regresar el animal,
+
+08:11.100 --> 08:15.400
+que es como la clase de la que extiende el
+perro,
+
+08:15.400 --> 08:18.300
+la cuarta me va a regresar el object,
+
+08:18.300 --> 08:21.100
+que es el objeto global, el objeto
+padre
+
+08:21.100 --> 08:23.800
+del cual se generan todos los objetos,
+
+08:23.800 --> 08:26.900
+y object, como ya no extiende de nadie,
+
+08:26.900 --> 08:28.500
+nos regresa prácticamente un
+nul.
+
+08:28.500 --> 08:31.400
+Entonces hasta que llega un nul, deja de
+imprimir.
+
+08:31.400 --> 08:33.600
+Eso es todo lo que hace este código.
+
+08:33.600 --> 08:37.000
+Así que vamos a darle
+enter,
+
+08:37.000 --> 08:39.600
+y ahí nos damos cuenta que ya
+tenemos
+
+08:39.600 --> 08:41.500
+tres objetos que nos está regresando.
+
+08:41.500 --> 08:43.100
+Si abrimos el
+primero,
+
+08:43.100 --> 08:46.700
+el primero podemos ver que es prácticamente,
+
+08:46.700 --> 08:49.400
+podemos ver aquí que nos está
+regresando
+
+08:49.400 --> 08:51.500
+lo que sería la clase de
+perro.
+
+08:51.500 --> 08:54.100
+¿Por qué no me está regresando el
+perro1?
+
+08:54.100 --> 08:56.300
+Porque perro1, recordemos que es una
+instancia,
+
+08:56.300 --> 08:58.100
+no tiene un
+prototipo.
+
+08:58.100 --> 09:01.800
+El prototype solo viene con clases
+constructoras
+
+09:01.800 --> 09:03.700
+o funciones
+constructoras.
+
+09:03.700 --> 09:05.800
+Es la primera función
+constructora
+
+09:05.800 --> 09:09.200
+de la cual está ligado perro1, que tenemos
+acá.
+
+09:10.200 --> 09:12.400
+Perro1 está ligada a la función
+constructora
+
+09:12.400 --> 09:14.400
+o al prototype de
+perro.
+
+09:14.400 --> 09:17.300
+Perfecto, ahora le va a preguntar el código.
+
+09:17.300 --> 09:21.100
+Tu perro clase, ¿a qué clase estás
+ligada?
+
+09:21.100 --> 09:24.300
+¿Cuál es la cadena, la clase que tienes
+arriba?
+
+09:24.300 --> 09:26.400
+Si abrimos, nos vamos a dar
+cuenta
+
+09:26.400 --> 09:27.600
+que es la clase de
+animal.
+
+09:27.600 --> 09:30.900
+Y sí, si venimos aquí, nuestra clase de
+perro
+
+09:30.900 --> 09:32.700
+extiende de la clase de
+animal.
+
+09:32.700 --> 09:34.400
+Entonces nos las trae
+acá.
+
+09:34.400 --> 09:36.500
+Y ahora le va a preguntar a la clase de
+animal,
+
+09:36.500 --> 09:39.000
+oye, tu cadena de
+prototipo,
+
+09:39.000 --> 09:41.100
+¿cuál es la clase que tienes
+arriba?
+
+09:41.100 --> 09:45.700
+Si abrimos acá, podemos ver que es la
+clase
+
+09:45.700 --> 09:49.100
+o el objeto global que se llama object.
+
+09:49.100 --> 09:51.900
+Todos los objetos que
+construimos
+
+09:51.900 --> 09:53.900
+extienden de este
+objeto.
+
+09:53.900 --> 09:56.300
+Este es el objeto global, es el objeto
+principal
+
+09:56.300 --> 09:59.000
+que nos regresa en navegador con JavaScript.
+
+09:59.000 --> 10:01.000
+Y si aquí intentamos nosotros
+ver
+
+10:01.000 --> 10:05.500
+cómo qué es lo que está arriba de este objeto,
+
+10:05.500 --> 10:07.200
+podemos ver que prácticamente es null.
+
+10:07.200 --> 10:09.500
+Ya no hay nada más arriba de este objeto.
+
+10:09.500 --> 10:12.700
+Entonces a esto se le llama una cadena de
+prototipos.
+
+10:12.700 --> 10:16.400
+Que la cadena de prototipos es cómo los
+objetos
+
+10:16.400 --> 10:18.600
+están
+interconectados.
+
+10:18.600 --> 10:21.500
+Esa interconexión nos lleva a los
+prototipos
+
+10:21.500 --> 10:24.800
+que nos ayuda a llegar a los
+métodos
+
+10:24.800 --> 10:26.700
+de los cuales podemos
+extender.
+
+10:26.700 --> 10:30.400
+Y estos métodos son los métodos que se van
+a heredar
+
+10:30.400 --> 10:31.800
+para nuestras
+instancias,
+
+10:31.800 --> 10:34.200
+para que nosotros podamos hacer
+uso
+
+10:34.200 --> 10:37.000
+de instancias que no estamos creando,
+
+10:37.000 --> 10:39.300
+que nos van a ayudar a resolver ciertas cosas,
+
+10:39.300 --> 10:57.300
+pero que heredan de lo que son los objetos
+padres.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/07-index_58862723-5875-440e-973f-d6b69b7383c9.js

@@ -0,0 +1,40 @@
+class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+const perro1 = new Perro("Bobby", "Perro", "Pug");
+
+console.log(perro1);
+perro1.correr();
+perro1.emitirSonido();
+
+perro1.nuevoMetodo = function () {
+  console.log("Este es un metodo");
+};
+
+Perro.prototype.segundoMetodo = function () {
+  console.log("Es otro nuevo metodo");
+};
+
+Animal.prototype.tercerMetodo = function () {
+  console.log("Un metodo más");
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/07-index_f73e3a49-7ee5-4713-a9f9-2a9cc854b45c.js

@@ -0,0 +1,40 @@
+class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+const perro1 = new Perro("Bobby", "Perro", "Pug");
+
+console.log(perro1);
+perro1.correr();
+perro1.emitirSonido();
+
+perro1.nuevoMetodo = function () {
+  console.log("Este es un metodo");
+};
+
+Perro.prototype.segundoMetodo = function () {
+  console.log("Es otro nuevo metodo");
+};
+
+Animal.prototype.tercerMetodo = function () {
+  console.log("Un metodo más");
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/08-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:35338336de2d1b72740320e4f9faf40447a450470aaf9c2ea129aa76e84cf88e
+size 35158266

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.vtt

@@ -0,0 +1,420 @@
+WEBVTT
+
+00:00.000 --> 00:01.880
+Vamos a hablar ahora de una palabra
+reservada
+
+00:01.880 --> 00:04.240
+que se llama this, que es muy
+importante
+
+00:04.240 --> 00:06.640
+y que se utiliza mucho en la parte de
+clases
+
+00:06.640 --> 00:08.400
+y de funciones
+constructoras.
+
+00:10.240 --> 00:11.080
+Estando
+acá,
+
+00:15.960 --> 00:18.200
+this es una palabra
+reservada
+
+00:18.200 --> 00:22.760
+que vamos a utilizar al momento de estar
+trabajando con clases.
+
+00:22.760 --> 00:25.280
+This per se, esta
+palabra,
+
+00:25.280 --> 00:28.480
+hace referencia a el objeto
+mismo
+
+00:28.480 --> 00:31.760
+o a la clase que estamos construyendo.
+
+00:31.760 --> 00:35.320
+Que en este caso, recordemos, es la clase,
+
+00:35.320 --> 00:39.480
+un como molde que estamos
+haciendo
+
+00:39.480 --> 00:42.200
+para poder construir después de esta misma
+clase
+
+00:42.200 --> 00:45.560
+diferentes instancias que se conviertan en
+nuestros objetos.
+
+00:45.560 --> 00:48.440
+Pero cuando estamos trabajando con la
+clase
+
+00:48.440 --> 00:50.880
+o con nuestra función
+constructora,
+
+00:50.880 --> 00:54.240
+nosotros utilizamos la palabra reservada
+this
+
+00:54.240 --> 00:58.880
+para poder tener referencia a los
+parámetros del constructor,
+
+00:58.880 --> 01:01.480
+que es un método que está dentro de la clase,
+
+01:01.480 --> 01:03.920
+para que cuando creemos la instancia,
+
+01:03.920 --> 01:06.000
+la gente, los usuarios, las
+personas
+
+01:06.000 --> 01:08.680
+que empiezan a crear la instancia o
+nosotros mismos,
+
+01:08.680 --> 01:11.720
+el valor de las propiedades del
+constructor
+
+01:11.720 --> 01:14.400
+puedan existir directamente en nuestro objeto.
+
+01:14.400 --> 01:16.400
+Vamos a poner un ejemplo en
+código.
+
+01:16.400 --> 01:19.680
+Vamos a crear una clase que se llame Persona.
+
+01:19.680 --> 01:22.920
+Vamos a crear el método de constructor.
+
+01:24.280 --> 01:25.480
+Y en el método de
+constructor,
+
+01:25.480 --> 01:27.240
+vamos a poner los parámetros que necesitamos.
+
+01:27.240 --> 01:30.440
+Esta persona va a tener nombre y edad.
+
+01:33.240 --> 01:36.880
+Aquí, para poder entonces en el
+constructor
+
+01:36.880 --> 01:41.320
+hacer referencia a el valor que se va a
+inyectar aquí
+
+01:41.320 --> 01:44.360
+para poder generar las instancias de
+personas
+
+01:44.360 --> 01:45.920
+que vamos a
+construir,
+
+01:45.920 --> 01:47.960
+vamos a utilizar
+this.
+
+01:47.960 --> 01:52.960
+Va a ser this nombre igual a nombre.
+
+01:52.960 --> 01:54.440
+Diego, ¿qué es
+esto?
+
+01:54.440 --> 01:58.880
+This hace referencia a este objeto,
+prácticamente.
+
+01:58.880 --> 02:01.760
+Entonces, cuando nosotros vamos a crear
+una instancia,
+
+02:01.760 --> 02:03.320
+vamos a empezar aquí, por
+ejemplo,
+
+02:03.320 --> 02:06.560
+paso a paso con la creación de una
+instancia nueva,
+
+02:06.560 --> 02:09.560
+persona1 va a ser igual a
+new,
+
+02:09.560 --> 02:12.360
+palabra reservada, de
+persona.
+
+02:13.360 --> 02:16.280
+Entonces aquí vamos a poner
+que
+
+02:16.280 --> 02:21.280
+vamos a poner que
+Alice,
+
+02:21.280 --> 02:24.160
+y tiene 25
+años.
+
+02:24.160 --> 02:29.160
+Aquí vamos a terminar de construir nuestro
+constructor.edad
+
+02:29.440 --> 02:30.960
+igual a
+edad.
+
+02:32.320 --> 02:33.320
+Perfecto.
+
+02:33.320 --> 02:36.960
+Entonces, estas tenemos ya nuestra clase.
+
+02:36.960 --> 02:39.520
+Aquí tenemos nuestra primera instancia.
+
+02:39.520 --> 02:42.840
+Entonces, cuando nosotros utilizamos el
+new persona,
+
+02:42.840 --> 02:45.160
+lo que estamos haciendo es el
+new
+
+02:45.160 --> 02:49.480
+va prácticamente a tomar estos
+valores
+
+02:49.480 --> 02:51.440
+para poderlos inyectar
+aquí,
+
+02:51.440 --> 02:53.600
+que son los parámetros del constructor,
+
+02:53.600 --> 02:56.640
+para que entonces cuando generemos una
+persona
+
+02:56.640 --> 02:58.360
+con este
+constructor,
+
+02:58.360 --> 03:00.840
+podamos agregarle el
+nombre
+
+03:00.840 --> 03:04.600
+y podamos agregarle la edad a nuestro objeto,
+
+03:04.600 --> 03:06.440
+que en este caso es
+persona1.
+
+03:06.440 --> 03:08.960
+Entonces, esta
+referencia,
+
+03:08.960 --> 03:12.920
+el this hace referencia a todo el objeto,
+
+03:12.920 --> 03:15.600
+y prácticamente la traducción
+sería
+
+03:15.600 --> 03:17.840
+la persona es
+this,
+
+03:17.840 --> 03:20.960
+el nombre de nuestro objeto
+persona
+
+03:20.960 --> 03:24.280
+va a ser el valor que se coloque en la
+instancia.
+
+03:25.800 --> 03:28.760
+La edad de nuestro objeto
+persona
+
+03:28.760 --> 03:33.320
+va a ser la edad que se coloque en la
+instancia.
+
+03:33.320 --> 03:35.920
+Y cuando nosotros mandamos
+llamar,
+
+03:38.120 --> 03:39.800
+por
+ejemplo,
+
+03:39.800 --> 03:44.800
+o mandamos imprimir persona1 y guardamos,
+
+03:46.720 --> 03:48.640
+tenemos que nuestra
+instancia,
+
+03:48.640 --> 03:52.800
+nuestro primer objeto tiene un nombre y
+tiene una edad.
+
+03:52.800 --> 03:54.880
+Aquí no hace referencia a
+this,
+
+03:54.880 --> 03:57.840
+pero prácticamente si tuviéramos que
+manipular,
+
+03:57.840 --> 03:59.560
+por ejemplo, si tuviéramos que
+manipular
+
+03:59.560 --> 04:02.880
+con algún método específico para esta
+instancia,
+
+04:02.880 --> 04:04.840
+donde fuéramos a utilizar el nombre o la edad,
+
+04:04.840 --> 04:06.240
+haríamos lo
+mismo.
+
+04:06.240 --> 04:09.920
+Si tuviéramos que ponerle a persona un
+método muy particular
+
+04:09.920 --> 04:12.560
+que solo vaya a existir en
+persona,
+
+04:12.560 --> 04:17.560
+persona.nuevometodo como
+función,
+
+04:18.880 --> 04:20.520
+entonces agarramos como
+función,
+
+04:22.200 --> 04:26.560
+y vamos a imprimir de forma muy rápida.
+
+04:26.560 --> 04:31.360
+Como vamos a utilizar el valor de una
+propiedad del objeto,
+
+04:31.360 --> 04:32.240
+va a
+ser,
+
+04:32.240 --> 04:35.120
+mi nombre
+es,
+
+04:38.080 --> 04:39.200
+y aquí vamos a
+colocar,
+
+04:39.200 --> 04:42.520
+eso, los corchetes van acá
+atrás,
+
+04:42.520 --> 04:44.720
+this.nombre.
+
+04:45.760 --> 04:47.800
+Y estamos utilizando aquí el
+this
+
+04:47.800 --> 04:52.800
+porque hace referencia en este momento a
+nuestra instancia.
+
+04:53.200 --> 04:54.680
+Entonces va a
+ser,
+
+04:54.680 --> 04:55.880
+mi nombre
+es,
+
+04:55.880 --> 04:59.960
+mi nombre es el nombre de la instancia
+persona1
+
+04:59.960 --> 05:02.000
+que estamos colocando en este momento.
+
+05:02.000 --> 05:04.480
+Es el momento de darle
+salvar.
+
+05:04.480 --> 05:07.200
+Venimos aquí y ponemos
+persona1
+
+05:08.120 --> 05:11.480
+y damos nuevo
+método.
+
+05:13.200 --> 05:15.800
+Enter, y me regresa mi nombre es
+Alice
+
+05:15.800 --> 05:18.440
+porque el this de aquí está haciendo
+referencia
+
+05:18.440 --> 05:20.920
+a esta instancia que ya tiene un nombre,
+
+05:20.920 --> 05:22.400
+nosotros ya se lo
+colocamos.
+
+05:23.280 --> 05:26.240
+Entonces es la forma en la que vamos a
+utilizar this
+
+05:26.240 --> 05:28.760
+al momento de estar construyendo
+clases
+
+05:28.760 --> 05:30.240
+o funciones
+constructoras,
+
+05:30.240 --> 05:31.960
+y es la forma en la que lo vamos a
+utilizar
+
+05:31.960 --> 05:34.600
+al momento de estar trabajando con
+instancias
+
+05:34.600 --> 06:01.600
+que vengan VSS
+Classy.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/08-index_125edb51-afc3-47ce-8f9c-070dd742b2cd.js

@@ -0,0 +1,20 @@
+/* 
+this --- class 
+
+this --- objeto -- class 
+*/
+
+class Persona {
+  constructor(nombre, edad) {
+    this.nombre = nombre;
+    this.edad = edad;
+  }
+}
+
+const persona1 = new Persona("Alice", 25);
+
+console.log(persona1);
+
+persona1.nuevoMetodo = function () {
+  console.log(`Mi nombre es ${this.nombre}`);
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/08-index_17803c0e-d45f-47e5-8773-08ff8a4a998d.js

@@ -0,0 +1,20 @@
+/* 
+this --- class 
+
+this --- objeto -- class 
+*/
+
+class Persona {
+  constructor(nombre, edad) {
+    this.nombre = nombre;
+    this.edad = edad;
+  }
+}
+
+const persona1 = new Persona("Alice", 25);
+
+console.log(persona1);
+
+persona1.nuevoMetodo = function () {
+  console.log(`Mi nombre es ${this.nombre}`);
+};

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/09-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/09-Validación de Usuarios en una Red Social Algoritmo Básico.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60766476d83a880c658bf4287a7b911f9c07cb8437ba842dceeaa0b2ac5178ee
+size 91444195

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/09-Validación de Usuarios en una Red Social Algoritmo Básico.vtt

@@ -0,0 +1,1174 @@
+WEBVTT
+
+00:00.000 --> 00:01.500
+Vamos a hacer un
+reto.
+
+00:01.500 --> 00:03.500
+Vamos a pasar
+allá.
+
+00:03.500 --> 00:08.500
+El día de hoy, el reto es que logremos
+construir
+
+00:08.500 --> 00:13.500
+el algoritmo que nos va a ayudar a generar
+una red social.
+
+00:13.500 --> 00:16.500
+Y para eso, tengo cuatro pasos que son
+requerimientos.
+
+00:16.500 --> 00:21.500
+La intención es que puedas tú intentar
+construir este reto.
+
+00:21.500 --> 00:23.000
+Vamos a ver los
+requerimientos.
+
+00:23.000 --> 00:26.500
+El primero es, debe de haber una forma en
+la que el usuario
+
+00:26.500 --> 00:30.500
+deba poder ingresar su usuario y su
+contraseña.
+
+00:30.500 --> 00:33.500
+El sistema debe ser capaz de validar si el
+usuario
+
+00:33.500 --> 00:36.500
+y la contraseña ingresados por el
+usuario
+
+00:36.500 --> 00:39.000
+existen en la base de
+datos.
+
+00:39.000 --> 00:40.500
+Vamos, tengo una pequeña base de
+datos
+
+00:40.500 --> 00:43.500
+que yo te voy a dejar una base de datos de
+ejemplo que está aquí.
+
+00:43.500 --> 00:46.000
+Entonces, el sistema que vayamos a
+construir
+
+00:46.000 --> 00:48.500
+debe de venir a esta base de datos y
+validar
+
+00:48.500 --> 00:51.500
+si la contraseña que está agregando el
+usuario,
+
+00:51.500 --> 00:55.000
+su usuario y contraseña, existen aquí.
+
+00:55.000 --> 00:58.500
+Si existen aquí, entonces el usuario y
+contraseña,
+
+00:58.500 --> 01:01.500
+si son correctos, el sistema debe
+mostrar
+
+01:01.500 --> 01:04.000
+un mensaje de bienvenida como, hola,
+¿cómo estás?
+
+01:04.000 --> 01:06.000
+Bienvenido, bla, bla,
+bla.
+
+01:06.000 --> 01:08.500
+Y mostrar el timeline del
+usuario.
+
+01:08.500 --> 01:11.000
+Esto viene de otra base de
+datos.
+
+01:11.000 --> 01:13.000
+Es una base de datos bastante sencilla.
+
+01:13.000 --> 01:18.000
+Es como un array de objetos que trae un
+pequeño timeline.
+
+01:18.000 --> 01:19.000
+Muy
+sencillo.
+
+01:19.000 --> 01:22.000
+Que trae usernames con nombres de
+usuarios
+
+01:22.000 --> 01:23.500
+que a lo mejor estoy
+siguiendo
+
+01:23.500 --> 01:27.000
+y ciertos mensajes que se han colocado.
+
+01:27.000 --> 01:29.500
+Esto es una simplificación de una base de
+datos
+
+01:29.500 --> 01:31.500
+que se puede utilizar en una red
+social
+
+01:31.500 --> 01:33.000
+para tener un
+timeline.
+
+01:33.000 --> 01:34.500
+Pero esto puede ser tan
+complejo
+
+01:34.500 --> 01:36.500
+que se le puede poner, por
+ejemplo,
+
+01:36.500 --> 01:38.000
+la hora en la que se
+publicó.
+
+01:38.000 --> 01:42.000
+Se le pueden poner a lo mejor algunos
+submensajes.
+
+01:42.000 --> 01:43.000
+Esto puede
+crecer.
+
+01:43.000 --> 01:46.000
+Pero ahorita, en forma de simplificarlo,
+
+01:46.000 --> 01:49.500
+esta es la pequeña base de datos que vamos
+a utilizar.
+
+01:49.500 --> 01:51.500
+Bien, ahora, esto
+pasa
+
+01:51.500 --> 01:55.000
+si el usuario y la contraseña son correctos.
+
+01:55.000 --> 01:56.500
+En caso de que
+no,
+
+01:56.500 --> 01:59.000
+si el usuario y la contraseña son incorrectos,
+
+01:59.000 --> 02:01.000
+el sistema debe mostrar un mensaje de
+error
+
+02:01.000 --> 02:04.000
+de, oye, lo siento, pero a lo mejor,
+por ejemplo,
+
+02:04.000 --> 02:06.000
+tu usuario y contraseña no
+existen
+
+02:06.000 --> 02:09.000
+y no debería mostrar ningún tipo de timeline.
+
+02:09.000 --> 02:11.000
+Entonces, pausa
+aquí
+
+02:11.000 --> 02:13.500
+e intenta construir este
+sistema
+
+02:13.500 --> 02:16.500
+siguiendo estos
+requerimientos.
+
+02:16.500 --> 02:18.000
+¿Cómo harías para que el
+usuario
+
+02:18.000 --> 02:20.000
+pueda ingresar a un usuario y
+contraseña?
+
+02:20.000 --> 02:22.500
+¿Cómo harías para que el sistema que
+construyamos
+
+02:22.500 --> 02:24.500
+pueda validar ese usuario y
+contraseña
+
+02:24.500 --> 02:27.000
+en esta base de
+datos?
+
+02:27.000 --> 02:29.000
+Para que la puedas
+ver.
+
+02:29.000 --> 02:31.000
+Y después, una vez que se
+valide,
+
+02:31.000 --> 02:32.000
+si es
+correcto,
+
+02:32.000 --> 02:35.000
+¿cómo harías para mostrar en la
+consola
+
+02:35.000 --> 02:40.000
+el timeline que es esta otra base de
+datos?
+
+02:40.000 --> 02:41.000
+Si no es
+correcto,
+
+02:41.000 --> 02:43.000
+deberá demostrar entonces un
+mensaje
+
+02:43.000 --> 02:44.500
+que sea un lo
+siento,
+
+02:44.500 --> 02:46.000
+tu usuario no
+existe
+
+02:46.000 --> 02:47.500
+o tu contraseña es
+incorrecta
+
+02:47.500 --> 02:49.000
+y no deberá mostrar
+nada.
+
+02:49.000 --> 02:50.000
+Pausa.
+
+02:50.000 --> 02:51.000
+Y si logras
+hacerlo,
+
+02:51.000 --> 02:53.000
+compártelo en los
+comentarios.
+
+02:58.000 --> 02:59.000
+Listo, ¿qué
+tal?
+
+02:59.000 --> 03:00.000
+¿Te costó
+trabajo?
+
+03:00.000 --> 03:01.500
+En caso de que no lo hayas
+logrado,
+
+03:01.500 --> 03:02.500
+no te
+preocupes,
+
+03:02.500 --> 03:05.000
+vamos a trabajar con eso en este momento.
+
+03:05.000 --> 03:07.000
+Vamos a los
+requerimientos.
+
+03:07.000 --> 03:09.000
+El primer requerimiento es el
+usuario
+
+03:09.000 --> 03:11.500
+debe poder ingresar su usuario y contraseña.
+
+03:11.500 --> 03:13.500
+Y esto es nosotros darles una
+opción
+
+03:13.500 --> 03:16.500
+de cómo ingresar un usuario y contraseña.
+
+03:16.500 --> 03:20.500
+Voy ahorita a, por ejemplo, multar esta
+base de datos.
+
+03:20.500 --> 03:23.000
+Y esto lo voy a hacer con dos
+let,
+
+03:23.000 --> 03:25.000
+o más bien
+const,
+
+03:25.000 --> 03:32.000
+que va a ser username igual a prompt,
+
+03:32.000 --> 03:39.000
+que sea cuál es tu
+usuario.
+
+03:39.000 --> 03:40.500
+Y ya que es
+esta,
+
+03:40.500 --> 03:42.500
+voy a que viene
+const,
+
+03:42.500 --> 03:47.000
+que va a ser
+password,
+
+03:47.000 --> 03:51.500
+y esto va a ser igual a
+prompt,
+
+03:51.500 --> 03:59.000
+que sea cuál es tu
+contraseña.
+
+04:00.500 --> 04:01.500
+Perfecto.
+
+04:01.500 --> 04:04.500
+Aquí ya tenemos nosotros en el
+sistema
+
+04:04.500 --> 04:06.500
+la opción en que el
+usuario,
+
+04:06.500 --> 04:07.500
+a través del
+navegador,
+
+04:07.500 --> 04:09.000
+nos pueda poner dos
+strings
+
+04:09.000 --> 04:11.500
+que nosotros guardemos en estas dos
+variables
+
+04:11.500 --> 04:13.500
+y que podamos utilizar
+después.
+
+04:13.500 --> 04:15.500
+Si doy guardar
+aquí,
+
+04:15.500 --> 04:18.500
+entonces puedo poner como
+Diego
+
+04:18.500 --> 04:21.500
+y que sea
+abc.
+
+04:21.500 --> 04:23.000
+Y estando
+acá,
+
+04:23.000 --> 04:26.000
+puedo poner
+username,
+
+04:26.000 --> 04:28.000
+y sale Diego,
+perfecto.
+
+04:28.000 --> 04:31.500
+Y aquí puedo poner
+password,
+
+04:31.500 --> 04:33.000
+y ahí sale
+abc.
+
+04:33.000 --> 04:34.000
+Perfecto.
+
+04:34.000 --> 04:37.500
+La primera, el primer punto ya está
+completado.
+
+04:37.500 --> 04:39.500
+Ahora, el punto número
+dos,
+
+04:39.500 --> 04:41.500
+el sistema es ser capaz de
+validar
+
+04:41.500 --> 04:44.500
+si el usuario y la contraseña que ingresó
+el usuario
+
+04:44.500 --> 04:46.500
+existen en la base de
+datos.
+
+04:46.500 --> 04:48.500
+Tendremos que hacer algún
+sistema
+
+04:48.500 --> 04:49.500
+que nos ayude
+a,
+
+04:49.500 --> 04:52.500
+con estas dos variables que ya tenemos,
+
+04:52.500 --> 04:54.500
+tenemos que hacer como un loop aquí,
+
+04:54.500 --> 04:57.000
+una iteración en cada uno de estos objetos,
+
+04:57.000 --> 04:59.000
+para validar si el
+username
+
+04:59.000 --> 05:01.500
+es igual al valor del username del primer
+objeto,
+
+05:01.500 --> 05:03.500
+y el password es igual al valor del
+password
+
+05:03.500 --> 05:05.000
+del primer
+objeto.
+
+05:05.000 --> 05:06.500
+Si no, lo mismo en el
+segundo,
+
+05:06.500 --> 05:08.500
+lo mismo en el
+tercero.
+
+05:08.500 --> 05:10.000
+Entonces, esto me suena
+a,
+
+05:10.000 --> 05:12.000
+vamos a hacer una
+iteración
+
+05:12.000 --> 05:14.500
+de estos objetos que están en este array,
+
+05:14.500 --> 05:17.500
+y vamos a validar si algo es igual a algo.
+
+05:17.500 --> 05:19.000
+Y para
+eso,
+
+05:19.000 --> 05:21.000
+como ya tenemos aquí el
+valor,
+
+05:21.000 --> 05:22.500
+la forma de poder
+hacerlo
+
+05:22.500 --> 05:24.500
+es generar una
+función
+
+05:24.500 --> 05:27.500
+que le pasamos estos dos valores como
+parámetros,
+
+05:27.500 --> 05:30.500
+y que ya entonces generen un
+for
+
+05:30.500 --> 05:32.500
+que recorra este
+objeto,
+
+05:32.500 --> 05:34.500
+o que recorra este array de objetos,
+
+05:34.500 --> 05:37.500
+y después un if que nos ayude a
+validar
+
+05:37.500 --> 05:40.000
+si nuestro username y
+password
+
+05:40.000 --> 05:42.000
+es igual al valor del username y
+password
+
+05:42.000 --> 05:44.000
+de cada uno de estos
+objetos.
+
+05:44.000 --> 05:46.500
+En caso de que sí en alguno de ellos,
+
+05:46.500 --> 05:48.000
+se quedará un
+break,
+
+05:48.000 --> 05:50.500
+y de aquí entonces ya podemos avanzar.
+
+05:50.500 --> 05:52.000
+Así que vamos para
+allá.
+
+05:52.000 --> 05:54.500
+Empezamos con una
+función.
+
+05:54.500 --> 05:58.500
+Esta función va a requerir dos parámetros.
+
+05:58.500 --> 06:00.000
+De hecho, empezamos con la
+función,
+
+06:00.000 --> 06:04.000
+se va a llamar usuario
+existente,
+
+06:04.000 --> 06:05.500
+que va a tener dos
+parámetros,
+
+06:05.500 --> 06:10.500
+que va a ser username y
+password.
+
+06:11.500 --> 06:12.500
+¿Por
+qué?
+
+06:12.500 --> 06:15.500
+Porque es el valor de las dos
+variables
+
+06:15.500 --> 06:17.500
+que ya tenemos
+acá.
+
+06:17.500 --> 06:19.500
+Teniendo
+eso,
+
+06:19.500 --> 06:21.500
+entonces vamos a empezar
+con,
+
+06:21.500 --> 06:23.500
+tenemos que hacer que se
+recorra
+
+06:23.500 --> 06:26.500
+este array de
+objetos.
+
+06:26.500 --> 06:29.500
+Y para eso vamos a ocupar un
+for.
+
+06:29.500 --> 06:33.500
+Y en el for empezamos con nuestra let
+i
+
+06:33.500 --> 06:36.500
+igual a
+cero.
+
+06:36.500 --> 06:38.500
+Y aquí entonces va a
+ser
+
+06:38.500 --> 06:43.500
+mientras i sea menor
+a
+
+06:43.500 --> 06:47.500
+usuario existente punto
+length,
+
+06:47.500 --> 06:49.500
+que es la longitud
+de,
+
+06:49.500 --> 06:52.500
+no, no, no, no es usuario que se extiende.
+
+06:52.500 --> 06:54.500
+Esa tiene nuestra base de
+datos.
+
+06:54.500 --> 06:57.500
+User
+database.
+
+06:57.500 --> 06:58.500
+Entonces vamos
+acá.
+
+06:58.500 --> 07:01.500
+Mientras i sea menor a la
+longitud
+
+07:01.500 --> 07:03.500
+de nuestra base de
+datos,
+
+07:03.500 --> 07:04.500
+que es
+esta,
+
+07:04.500 --> 07:07.500
+en este momento tiene tres elementos,
+
+07:07.500 --> 07:11.500
+entonces i tiene que incrementarse
+uno
+
+07:11.500 --> 07:14.500
+para poder lograr
+como
+
+07:14.500 --> 07:17.500
+el loop que está buscado con
+for.
+
+07:17.500 --> 07:19.500
+Bien, ya
+aquí,
+
+07:19.500 --> 07:20.500
+entonces lo que tenemos que hacer es,
+
+07:20.500 --> 07:22.500
+tenemos que
+validar
+
+07:22.500 --> 07:25.500
+si cada uno de los username y
+password
+
+07:25.500 --> 07:27.500
+que viene en nuestra base de
+datos
+
+07:27.500 --> 07:29.500
+es igual al username y
+password
+
+07:29.500 --> 07:31.500
+que ya nos pasó nuestro
+usuario.
+
+07:31.500 --> 07:34.500
+Y para eso vamos a utilizar un
+if.
+
+07:34.500 --> 07:38.500
+Con el if quiero validar dos
+cosas.
+
+07:38.500 --> 07:40.500
+Entonces vamos a empezar
+con,
+
+07:40.500 --> 07:42.500
+antes de ir aquí, vamos a nuestra ploca.
+
+07:42.500 --> 07:49.500
+Tenemos nuestro user
+database.
+
+07:49.500 --> 07:52.500
+Vamos a
+imprimirlo.
+
+07:52.500 --> 07:53.500
+Tenemos un error, ¿por
+qué?
+
+07:53.500 --> 07:56.500
+Tenemos un if incompleto como syntaxes.
+
+07:56.500 --> 08:00.500
+Voy a, de momento, comentarlo, guardo.
+
+08:00.500 --> 08:03.500
+Entonces me sale, ok, vamos a poner Diego,
+
+08:03.500 --> 08:05.500
+que sea
+abs.
+
+08:05.500 --> 08:06.500
+Bien.
+
+08:06.500 --> 08:08.500
+Ya tenemos
+eso.
+
+08:08.500 --> 08:11.500
+Vamos a poner user
+database.
+
+08:11.500 --> 08:15.500
+Y me regresa ya un array de tres objetos.
+
+08:15.500 --> 08:17.500
+Lo que quiero hacer es
+validar
+
+08:17.500 --> 08:21.500
+que cada uno de los
+atributos
+
+08:21.500 --> 08:23.500
+que tiene mis
+objetos,
+
+08:23.500 --> 08:25.500
+el valor de los
+atributos,
+
+08:25.500 --> 08:27.500
+es el valor que me
+colocó
+
+08:27.500 --> 08:29.500
+en las variables del
+usuario.
+
+08:29.500 --> 08:31.500
+Entonces para poder hacer
+eso,
+
+08:31.500 --> 08:35.500
+sería user
+database,
+
+08:35.500 --> 08:38.500
+user
+database,
+
+08:38.500 --> 08:41.500
+y vamos a empezar con la posición cero,
+
+08:41.500 --> 08:46.500
+en donde vamos a pedir que nos regrese el
+username.
+
+08:46.500 --> 08:48.500
+Y con el
+username,
+
+08:48.500 --> 08:51.500
+vamos a hacer esto acá, por ejemplo,
+
+08:51.500 --> 08:54.500
+y ahora vamos a poner lo
+mismo,
+
+08:54.500 --> 08:55.500
+user
+data,
+
+08:55.500 --> 08:58.500
+en la posición
+cero,
+
+08:58.500 --> 09:01.500
+pero ahora con punto
+password.
+
+09:01.500 --> 09:04.500
+Entonces aquí yo ya tengo el valor del
+username
+
+09:04.500 --> 09:07.500
+que está en nuestra base de
+datos,
+
+09:07.500 --> 09:08.500
+que es el primer
+objeto,
+
+09:08.500 --> 09:09.500
+y tengo el valor del
+password,
+
+09:09.500 --> 09:11.500
+el primer objeto que está en nuestra base
+de datos.
+
+09:11.500 --> 09:14.500
+Lo que tengo que hacer es validar que
+estos dos
+
+09:14.500 --> 09:18.500
+sean igual a lo que nos acaba de ingresar
+el usuario
+
+09:18.500 --> 09:19.500
+por los
+prompts,
+
+09:19.500 --> 09:20.500
+el user y el
+password.
+
+09:20.500 --> 09:22.500
+Entonces para poder hacer
+eso,
+
+09:22.500 --> 09:24.500
+regresamos aquí a nuestro
+if,
+
+09:24.500 --> 09:25.500
+quitamos los
+comentarios,
+
+09:25.500 --> 09:27.500
+para poder hacer
+eso,
+
+09:27.500 --> 09:30.500
+voy a hacer user
+database,
+
+09:30.500 --> 09:31.500
+perfecto,
+
+09:31.500 --> 09:33.500
+en la posición
+i,
+
+09:33.500 --> 09:36.500
+porque i es el que se va a encargar de la
+iteración,
+
+09:36.500 --> 09:39.500
+punto
+username,
+
+09:39.500 --> 09:42.500
+que sea igual de forma
+estricta
+
+09:42.500 --> 09:45.500
+a el username que ya nos pasó nuestro
+usuario acá.
+
+09:45.500 --> 09:50.500
+Y voy a
+poner,
+
+09:50.500 --> 09:53.500
+vamos a validar user
+database,
+
+09:53.500 --> 09:57.500
+en la posición
+i,
+
+09:57.500 --> 09:59.500
+punto
+password,
+
+09:59.500 --> 10:02.500
+que sea igual de forma
+estricta
+
+10:02.500 --> 10:06.500
+a el password que ya nos compartió nuestro
+usuario.
+
+10:06.500 --> 10:09.500
+Entonces con esto ya estamos haciendo una
+pequeña validación
+
+10:09.500 --> 10:13.500
+en el cual la posición en la que esté
+i
+
+10:13.500 --> 10:16.500
+nos va a traer siempre el valor de los
+parámetros
+
+10:16.500 --> 10:18.500
+de los objetos en los que
+esté,
+
+10:18.500 --> 10:21.500
+y en este momento en el if nosotros vamos
+a validar
+
+10:21.500 --> 10:24.500
+si esos valores son iguales a los
+valores
+
+10:24.500 --> 10:26.500
+que nos está colocando nuestro usuario.
+
+10:26.500 --> 10:27.500
+Si es
+así,
+
+10:27.500 --> 10:28.500
+solo para
+probar,
+
+10:28.500 --> 10:32.500
+de momento quiero que nos regrese un console.
+log,
+
+10:35.500 --> 10:37.500
+que
+sea,
+
+10:38.500 --> 10:39.500
+es
+correcto.
+
+10:41.500 --> 10:42.500
+Si
+no,
+
+10:44.500 --> 10:45.500
+else,
+
+10:45.500 --> 10:46.500
+pues entonces no
+existe
+
+10:46.500 --> 10:49.500
+ninguno de los valores que nos regreso al
+usuario
+
+10:49.500 --> 10:51.500
+existen en la base de
+datos.
+
+10:51.500 --> 10:55.500
+Quiero que un
+console.log
+
+10:55.500 --> 10:57.500
+y que
+sea,
+
+10:57.500 --> 10:59.500
+no es
+correcto.
+
+11:01.500 --> 11:05.500
+Vamos de momento a guardar algo importante.
+
+11:05.500 --> 11:08.500
+Hay que mandar llamar nuestra
+función
+
+11:08.500 --> 11:10.500
+usuario
+existente,
+
+11:10.500 --> 11:11.500
+en donde, pues
+evidentemente,
+
+11:11.500 --> 11:13.500
+es el username y el
+password
+
+11:13.500 --> 11:16.500
+que estamos a punto de
+obtener.
+
+11:16.500 --> 11:17.500
+Con
+eso,
+
+11:17.500 --> 11:19.500
+vamos a poner aquí
+cancelar
+
+11:19.500 --> 11:21.500
+y vamos a guardar otra
+vez.
+
+11:22.500 --> 11:24.500
+Aquí, como
+error,
+
+11:24.500 --> 11:25.500
+Diego,
+
+11:25.500 --> 11:27.500
+ABC,
+
+11:27.500 --> 11:28.500
+y es no es
+correcto,
+
+11:28.500 --> 11:29.500
+hizo tres
+validaciones,
+
+11:29.500 --> 11:30.500
+lo podemos
+ver.
+
+11:30.500 --> 11:31.500
+Entonces en las
+tres,
+
+11:31.500 --> 11:32.500
+no es
+correcto.
+
+11:32.500 --> 11:34.500
+Aquí si volvemos
+a,
+
+11:34.500 --> 11:35.500
+como
+refrescar,
+
+11:35.500 --> 11:38.500
+ponemos
+Andrés
+
+11:38.500 --> 11:40.500
+y ponemos uno, dos,
+tres,
+
+11:40.500 --> 11:42.500
+y sale es
+correcto.
+
+11:42.500 --> 11:43.500
+Pero aquí, ¿qué está
+pasando?
+
+11:43.500 --> 11:44.500
+Nos
+dice,
+
+11:44.500 --> 11:45.500
+pues
+bueno,
+
+11:45.500 --> 11:47.500
+la primera validación es
+correcta,
+
+11:47.500 --> 11:50.500
+pero aquí nosotros tenemos que poner la
+forma
+
+11:50.500 --> 11:53.500
+de que cuando esta validación sea correcta,
+
+11:53.500 --> 11:55.500
+ya no necesitamos que siga
+siendo
+
+11:55.500 --> 11:57.500
+una validación de lo que
+falta.
+
+11:57.500 --> 11:58.500
+En este
+caso,
+
+11:58.500 --> 12:00.500
+pusimos la información del
+uno,
+
+12:00.500 --> 12:02.500
+por eso hace dos recorridos
+más.
+
+12:02.500 --> 12:04.500
+Lo que podemos hacer en este
+momento
+
+12:04.500 --> 12:06.500
+es una vez que sea
+correcto,
+
+12:06.500 --> 12:08.500
+que genere un
+break
+
+12:08.500 --> 12:10.500
+para que se rompa prácticamente de
+loop
+
+12:10.500 --> 12:11.500
+y ahí
+listo.
+
+12:11.500 --> 12:14.500
+Ya no genere otro tipo de validación.
+
+12:14.500 --> 12:16.500
+Entonces aquí si
+guardamos,
+
+12:16.500 --> 12:17.500
+nada más para
+probar,
+
+12:17.500 --> 12:19.500
+Andrés,
+
+12:19.500 --> 12:20.500
+uno, dos,
+tres,
+
+12:20.500 --> 12:21.500
+y
+listo.
+
+12:21.500 --> 12:23.500
+Solo dice es
+correcto
+
+12:23.500 --> 12:43.500
+y ya no hace las otras dos validaciones.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/09-index_f210d63d-0f86-4336-a938-c7bdb343c5d6.js

@@ -0,0 +1,69 @@
+/* 
+Requerimientos del reto:
+
+1. El usuario debe poder ingresar su usuario y contraseña
+2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
+3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
+4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
+
+*/
+
+const usersDatabase = [
+  {
+    username: "andres",
+    password: "123",
+  },
+  {
+    username: "caro",
+    password: "456",
+  },
+  {
+    username: "mariana",
+    password: "789",
+  },
+];
+
+const usersTimeline = [
+  {
+    username: "Estefany",
+    timeline: "Me encata Javascript!",
+  },
+  {
+    username: "Oscar",
+    timeline: "Bebeloper es lo mejor!",
+  },
+  {
+    username: "Mariana",
+    timeline: "A mi me gusta más el café que el té",
+  },
+  {
+    username: "Andres",
+    timeline: "Yo hoy no quiero trabajar",
+  },
+];
+
+const username = prompt("Cuál es tu usuario?");
+const password = prompt("Cuál es tu contraseña?");
+
+function usuarioExistente(username, password) {
+  for (let i = 0; i < usersDatabase.length; i++) {
+    if (
+      usersDatabase[i].username === username &&
+      usersDatabase[i].password === password
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function signIn(username, password) {
+  if (usuarioExistente(username, password)) {
+    alert(`Bienvenido a tu cuenta ${username}`);
+    console.log(usersTimeline);
+  } else {
+    alert("Uuups, usuario o contraseña incorrectos!");
+  }
+}
+
+signIn(username, password);

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/10-Implementación de la Función SignIn y Validación de Usuario.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:953e7a7a7f8adab6fdd573c623c7240d5655ea48b75e317b1482916345e97354
+size 74651481

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/10-Implementación de la Función SignIn y Validación de Usuario.vtt

@@ -0,0 +1,982 @@
+WEBVTT
+
+00:00.000 --> 00:04.000
+Ahora que sabemos que nuestra función
+funciona,
+
+00:04.000 --> 00:06.700
+que ya está valideando la información que
+nos da el usuario,
+
+00:06.700 --> 00:09.400
+nos dice si es correcto o no es correcto,
+
+00:09.400 --> 00:13.400
+ahora tenemos que iniciar lo que es el
+sign-in,
+
+00:13.400 --> 00:16.700
+que es la parte donde el usuario, cuando
+mete la información,
+
+00:16.700 --> 00:19.800
+haga esta validación, sin que nosotros
+tengamos que
+
+00:19.800 --> 00:24.100
+mandañavar como en ese momento esto, aquí,
+
+00:24.100 --> 00:27.700
+y pueda empezar a mostrar lo que es la
+parte de el
+
+00:27.700 --> 00:29.400
+timeline del
+usuario.
+
+00:29.400 --> 00:32.600
+En este caso, el usuario que se vaya a
+conectar,
+
+00:32.600 --> 00:35.400
+este es su timeline, no va a cambiar.
+
+00:35.400 --> 00:37.300
+Pero esto puede ser un poco más dinámico,
+
+00:37.300 --> 00:40.200
+pero eso ya es una estructura distinta.
+
+00:40.200 --> 00:42.500
+Y si te interesa, esto puede ser parte del
+reto,
+
+00:42.500 --> 00:43.700
+tú vayas creciendo esta
+parte.
+
+00:43.700 --> 00:46.500
+Entonces vamos a una siguiente función.
+
+00:46.500 --> 00:49.100
+Voy a borrar esto de
+acá.
+
+00:49.100 --> 00:50.500
+Aquí también voy a hacer un
+cambio,
+
+00:50.500 --> 00:51.900
+este console lo que voy a
+quitar,
+
+00:51.900 --> 00:56.000
+y le voy a poner a return
+true,
+
+00:56.000 --> 00:58.300
+que solo me interesa que me regrese un true,
+
+00:58.300 --> 01:01.200
+para una validación que voy a hacer acá,
+
+01:01.200 --> 01:03.700
+y return
+false.
+
+01:03.700 --> 01:05.900
+Perfecto.
+
+01:05.900 --> 01:07.100
+Entonces venimos
+aquí,
+
+01:07.100 --> 01:15.900
+y la siguiente función es la función de
+sign-in.
+
+01:15.900 --> 01:19.200
+Esta función va a recibir de igual forma
+dos parámetros,
+
+01:19.200 --> 01:21.900
+que son los parámetros que estamos utilizando,
+
+01:21.900 --> 01:25.100
+que es la información que ya nos agregó
+nuestro usuario.
+
+01:25.100 --> 01:28.500
+Así que iniciamos con un
+function,
+
+01:28.500 --> 01:30.300
+se llame
+sign-in,
+
+01:30.300 --> 01:33.300
+y en este function lo que quiero hacer es,
+
+01:33.300 --> 01:37.700
+voy a trabajar con un
+if,
+
+01:37.700 --> 01:44.900
+y este if va a mandar llamar esta primera
+función.
+
+01:44.900 --> 01:47.400
+Entonces al momento de que se inicie,
+
+01:47.400 --> 01:50.400
+por ejemplo, el proceso de
+sign-in,
+
+01:50.400 --> 01:52.900
+se tiene que mandar llamar la función,
+
+01:52.900 --> 01:55.400
+en donde se va a validar sin la
+información que nos va a dar
+
+01:55.400 --> 01:57.300
+nuestro usuario por estos
+prompts,
+
+01:57.300 --> 01:58.500
+es
+verdad,
+
+01:58.500 --> 02:02.200
+en caso de que esa sea
+verdad,
+
+02:02.200 --> 02:07.100
+lo que quiero es que me genere un alert.
+
+02:07.100 --> 02:10.000
+¿Y esto por
+qué?
+
+02:10.000 --> 02:13.200
+Porque si regresamos a las instrucciones,
+
+02:13.200 --> 02:15.700
+entonces si el
+usuario,
+
+02:15.700 --> 02:17.100
+debe ser capaz de
+validar,
+
+02:17.100 --> 02:20.600
+nuestro sistema debe validar si el usuario
+existe en la base de datos.
+
+02:20.600 --> 02:22.900
+Si el usuario
+existe,
+
+02:22.900 --> 02:26.500
+entonces el sistema debe mostrar un
+mensaje de bienvenida,
+
+02:26.500 --> 02:28.000
+y mostrar el
+timeline,
+
+02:28.000 --> 02:30.400
+que eso es lo que vamos a hacer en esta
+nueva función.
+
+02:30.400 --> 02:32.100
+Si el usuario no
+existe,
+
+02:32.100 --> 02:34.000
+entonces debe demostrar un mensaje de error,
+
+02:34.000 --> 02:36.300
+y no debe mostrar
+nada.
+
+02:36.300 --> 02:37.500
+Entonces
+aquí,
+
+02:37.500 --> 02:40.600
+si esta validación es
+true,
+
+02:40.600 --> 02:42.500
+si aquí me regresa
+true,
+
+02:42.500 --> 02:44.900
+lo que va a pasar es en el
+alert,
+
+02:44.900 --> 02:47.700
+evidentemente vamos a ponerle
+tipo,
+
+02:47.700 --> 02:49.400
+no, de hecho vamos a utilizar el nombre
+del usuario,
+
+02:49.400 --> 02:51.000
+para que sea más
+personalizado.
+
+02:51.000 --> 02:53.600
+Eso les
+gusta.
+
+02:53.600 --> 02:59.200
+Bienvenido a tu
+cuenta.
+
+02:59.200 --> 03:01.100
+Y vamos a
+ponerle,
+
+03:01.100 --> 03:03.600
+username.
+
+03:03.600 --> 03:05.200
+Haciendo
+referencia,
+
+03:05.200 --> 03:09.200
+a el username que nos va a poner en los
+prompts.
+
+03:09.200 --> 03:11.100
+Y acá, por
+ejemplo,
+
+03:11.100 --> 03:14.800
+vamos a poner un
+console.log,
+
+03:14.800 --> 03:16.900
+.log,
+
+03:16.900 --> 03:19.900
+que nos regrese todo
+el,
+
+03:19.900 --> 03:21.700
+user,
+
+03:21.700 --> 03:23.000
+timeline.
+
+03:23.000 --> 03:25.500
+Perfecto.
+
+03:25.500 --> 03:26.900
+Voy a,
+mientras,
+
+03:26.900 --> 03:29.200
+cancelar,
+cancelar.
+
+03:29.200 --> 03:31.700
+Porque le estoy pidiendo que me regrese el
+user timeline.
+
+03:31.700 --> 03:33.200
+User,
+
+03:33.200 --> 03:34.300
+timeline.
+
+03:34.300 --> 03:41.700
+Porque si es verdad, lo que quiero es que
+me regrese esto.
+
+03:41.700 --> 03:43.100
+Y ya esto se puede ir
+acomodando,
+
+03:43.100 --> 03:45.200
+pero quiero que me regrese el timeline,
+¿no?
+
+03:45.200 --> 03:47.100
+Para que después nosotros
+podamos,
+
+03:47.100 --> 03:49.900
+a lo mejor con un poco más de tiempo y
+estructura,
+
+03:49.900 --> 03:51.900
+imprimir
+como,
+
+03:51.900 --> 03:53.500
+Estefanía escribió
+esto,
+
+03:53.500 --> 03:55.100
+Oscar escribió
+esto,
+
+03:55.100 --> 03:56.300
+Mariana escribió
+esto,
+
+03:56.300 --> 03:57.900
+Andrés escribió
+esto.
+
+03:57.900 --> 03:59.600
+Por el momento quiero que me regrese esto,
+
+03:59.600 --> 04:01.000
+para poderlo
+ver.
+
+04:01.000 --> 04:02.900
+Si no es
+verdad,
+
+04:02.900 --> 04:05.900
+si aquí nos regresa entonces el false,
+
+04:05.900 --> 04:07.500
+lo que
+quiero,
+
+04:07.500 --> 04:10.000
+es que entonces nos regrese
+un,
+
+04:10.000 --> 04:13.100
+mensaje de
+error,
+
+04:13.100 --> 04:16.500
+que es con minúsculas,
+alerts.
+
+04:16.500 --> 04:17.800
+Y el mensaje error,
+pues,
+
+04:17.800 --> 04:19.500
+no tiene que estar ligado a ninguna variable,
+
+04:19.500 --> 04:21.100
+entonces va a
+ser,
+
+04:21.100 --> 04:22.500
+ups,
+
+04:22.500 --> 04:24.200
+y el ups
+es,
+
+04:24.200 --> 04:25.500
+usuario,
+
+04:25.500 --> 04:27.100
+o,
+
+04:27.100 --> 04:29.200
+contraseña,
+
+04:29.200 --> 04:34.900
+incorrectos.
+
+04:34.900 --> 04:35.700
+Perfecto.
+
+04:35.700 --> 04:37.500
+Entonces, va a aparecer esa función,
+
+04:37.500 --> 04:40.200
+de momento voy a poner como cancelar,
+cancelar.
+
+04:40.200 --> 04:41.500
+Ya tenemos todo, vamos a
+repasar.
+
+04:41.500 --> 04:43.100
+Tenemos la función de sign
+in,
+
+04:43.100 --> 04:45.100
+en donde le estamos pidiendo el usuario,
+
+04:45.100 --> 04:47.100
+y la contraseña que nos
+está,
+
+04:47.100 --> 04:49.200
+generando nuestro
+usuario.
+
+04:49.200 --> 04:50.300
+Con los
+prompts,
+
+04:50.300 --> 04:51.500
+aquí
+validamos,
+
+04:51.500 --> 04:53.700
+en donde si el usuario existe en la base
+de datos,
+
+04:53.700 --> 04:55.000
+nos va a regresar un
+true,
+
+04:55.000 --> 04:56.300
+si nos regresa un
+true,
+
+04:56.300 --> 04:57.400
+entonces sale
+un,
+
+04:57.400 --> 04:58.700
+alerta de
+bienvenido,
+
+04:58.700 --> 04:59.500
+tal
+usuario,
+
+04:59.500 --> 05:01.300
+este es tu
+timeline,
+
+05:01.300 --> 05:02.500
+si es un
+else,
+
+05:02.500 --> 05:04.000
+que en caso de que sea un
+false,
+
+05:04.000 --> 05:06.000
+entonces es un ups, lo
+siento,
+
+05:06.000 --> 05:08.100
+aquí
+es,
+
+05:08.100 --> 05:09.200
+usuario,
+
+05:09.200 --> 05:10.300
+y
+contraseña,
+
+05:10.300 --> 05:11.400
+son
+incorrectos.
+
+05:11.400 --> 05:14.300
+Entonces no tiene que regresar
+absolutamente nada.
+
+05:14.300 --> 05:15.600
+Y ahora lo que tenemos que
+hacer,
+
+05:15.600 --> 05:16.400
+es,
+
+05:16.400 --> 05:18.600
+mandar llamar nuestra
+función,
+
+05:18.600 --> 05:19.600
+y,
+
+05:19.600 --> 05:21.600
+pasar los parámetros de la
+misma,
+
+05:21.600 --> 05:23.400
+solo para
+corroborar.
+
+05:23.400 --> 05:24.600
+Y ya con
+esto,
+
+05:24.600 --> 05:26.300
+si
+guardamos,
+
+05:26.300 --> 05:27.100
+vamos
+a,
+
+05:27.100 --> 05:28.400
+es
+Diego,
+
+05:28.400 --> 05:31.700
+y mi contraseña es
+abc,
+
+05:31.700 --> 05:32.400
+y es
+ups,
+
+05:32.400 --> 05:35.000
+usuario o contraseña
+incorrectos.
+
+05:35.000 --> 05:37.100
+Soltar,
+
+05:37.100 --> 05:38.800
+y sería
+un,
+
+05:38.800 --> 05:41.200
+vamos a ver cuáles son los nombres que
+tenemos,
+
+05:41.200 --> 05:43.000
+eh,
+
+05:43.000 --> 05:44.600
+un
+caro,
+
+05:44.600 --> 05:46.500
+y su contraseña
+es,
+
+05:46.500 --> 05:48.800
+456.
+
+05:48.800 --> 05:49.500
+Entonces,
+
+05:49.500 --> 05:51.700
+ups, usuario o contraseña incorrectos.
+
+05:51.700 --> 05:52.700
+Y este
+código,
+
+05:52.700 --> 05:53.900
+no va a
+funcionar.
+
+05:53.900 --> 05:55.600
+Ahorita a pesar de que
+puse,
+
+05:55.600 --> 05:57.900
+un usuario y contraseña
+correctos,
+
+05:57.900 --> 05:59.100
+me está regresando
+un,
+
+05:59.100 --> 06:01.400
+el usuario o contraseña es incorrecto.
+
+06:01.400 --> 06:02.300
+¿Qué está
+pasando?
+
+06:02.300 --> 06:03.600
+Vamos a ver
+qué,
+
+06:03.600 --> 06:05.300
+en el
+código.
+
+06:05.300 --> 06:06.200
+El que estamos
+aquí,
+
+06:06.200 --> 06:07.900
+vamos a darle a
+aceptar,
+
+06:07.900 --> 06:09.100
+eh,
+evidentemente,
+
+06:09.100 --> 06:10.000
+si yo vengo
+acá,
+
+06:10.000 --> 06:10.900
+y
+pongo,
+
+06:10.900 --> 06:12.500
+username,
+
+06:12.500 --> 06:13.700
+tengo un
+caro,
+
+06:13.700 --> 06:14.800
+y si
+pongo,
+
+06:14.800 --> 06:16.100
+password,
+
+06:16.100 --> 06:18.600
+tengo
+456.
+
+06:18.600 --> 06:20.000
+Que esto es
+justamente,
+
+06:20.000 --> 06:21.500
+mi
+usuario,
+
+06:21.500 --> 06:23.100
+número
+dos,
+
+06:23.100 --> 06:24.400
+o número
+uno,
+
+06:24.400 --> 06:25.300
+en el
+array,
+
+06:25.300 --> 06:27.100
+¿no? Si lo vemos como un
+índice.
+
+06:27.100 --> 06:28.400
+Pues, ¿qué está pasando
+aquí?
+
+06:28.400 --> 06:32.600
+Aquí el problema viene en la validación
+que estamos haciendo en este for.
+
+06:32.600 --> 06:34.100
+El for lo que está
+haciendo,
+
+06:34.100 --> 06:37.900
+como estamos aquí regresando un true o un
+false,
+
+06:37.900 --> 06:38.700
+esto,
+
+06:38.700 --> 06:39.700
+prácticamente,
+
+06:39.700 --> 06:41.500
+lo que hace es
+un,
+
+06:41.500 --> 06:44.700
+el primer usuario se llama
+caro,
+
+06:44.700 --> 06:48.600
+y su contraseña es
+456,
+
+06:48.600 --> 06:50.000
+entra la
+validación,
+
+06:50.000 --> 06:52.000
+como es un
+false,
+
+06:52.000 --> 06:53.700
+automáticamente,
+
+06:53.700 --> 06:55.800
+el for se
+rompe,
+
+06:55.800 --> 06:58.700
+y va a regresar un false
+siempre.
+
+06:58.700 --> 07:00.400
+Entonces, a pesar de
+que,
+
+07:00.400 --> 07:01.700
+yo tenga un
+caro,
+
+07:01.700 --> 07:02.500
+y
+un,
+
+07:02.500 --> 07:04.000
+y una contraseña
+correcta,
+
+07:04.000 --> 07:07.400
+ya no va a pasar a validar el segundo
+elemento.
+
+07:07.400 --> 07:10.500
+Y tampoco va a pasar a validar el tercer
+elemento.
+
+07:10.500 --> 07:13.400
+Solo va a validar el primer elemento.
+
+07:13.400 --> 07:15.700
+Y si ese elemento es
+verdadero,
+
+07:15.700 --> 07:18.100
+me va a regresar el mensaje de bien.
+
+07:18.100 --> 07:20.100
+Y el timeline que he estado buscando,
+
+07:20.100 --> 07:22.800
+pero si este primer elemento no
+es,
+
+07:22.800 --> 07:25.300
+el usuario de
+contraseña,
+
+07:25.300 --> 07:27.000
+aquí se va a romper el
+bucle,
+
+07:27.000 --> 07:28.900
+y ya no va a pasar a validar el resto.
+
+07:28.900 --> 07:31.200
+Entonces, lo que tenemos que hacer es,
+
+07:31.200 --> 07:33.300
+vamos a
+sacar,
+
+07:33.300 --> 07:34.300
+el
+false,
+
+07:34.300 --> 07:35.300
+del
+for,
+
+07:35.300 --> 07:37.000
+de este
+bucle.
+
+07:37.000 --> 07:38.400
+Vamos a quitar el
+else.
+
+07:38.400 --> 07:39.700
+Entonces,
+aquí,
+
+07:39.700 --> 07:41.400
+lo que vamos a hacer es
+un,
+
+07:41.400 --> 07:43.200
+si el usuario de
+contraseña,
+
+07:43.200 --> 07:44.500
+hace un match con
+esto,
+
+07:44.500 --> 07:46.100
+me va a regresar un
+true,
+
+07:46.100 --> 07:47.900
+porque está
+acá.
+
+07:47.900 --> 07:49.300
+Si no hace un
+match,
+
+07:49.300 --> 07:50.700
+va a seguir el
+for,
+
+07:50.700 --> 07:52.300
+al siguiente
+elemento,
+
+07:52.300 --> 07:54.300
+y va a validar si el usuario de contraseña,
+
+07:54.300 --> 07:56.000
+se match con
+esto.
+
+07:56.000 --> 07:57.100
+Si hace un
+true,
+
+07:57.100 --> 07:59.300
+entonces aquí se rompe el
+for,
+
+07:59.300 --> 08:00.500
+y me regresa un
+true,
+
+08:00.500 --> 08:01.600
+y este
+true,
+
+08:01.600 --> 08:03.700
+lo voy a tener aquí como validación,
+
+08:03.700 --> 08:05.800
+y va a entrar
+este.
+
+08:05.800 --> 08:07.200
+Si no hace un
+true,
+
+08:07.200 --> 08:09.000
+se va con el
+tercero.
+
+08:09.000 --> 08:10.100
+Si esto no
+matcha,
+
+08:10.100 --> 08:12.100
+entonces se sale ya del
+for,
+
+08:12.100 --> 08:13.300
+porque ya
+está,
+
+08:13.300 --> 08:15.200
+esta validación ya
+termina,
+
+08:15.200 --> 08:17.200
+y sale del for a un
+false,
+
+08:17.200 --> 08:19.800
+y entonces la función va a regresar el false,
+
+08:19.800 --> 08:22.100
+que nos va a mandar a este
+else.
+
+08:22.100 --> 08:24.100
+Entonces ya con este
+cambio,
+
+08:24.100 --> 08:26.400
+al momento de
+guardar,
+
+08:26.400 --> 08:27.700
+vamos a poner
+aquí,
+
+08:27.700 --> 08:29.300
+Caro,
+
+08:29.300 --> 08:30.600
+vamos a poner
+aquí,
+
+08:30.600 --> 08:33.300
+cuatro, cinco y
+seis,
+
+08:33.300 --> 08:34.200
+y ahora
+sí,
+
+08:34.200 --> 08:36.000
+bienvenida a tu cuenta,
+Caro,
+
+08:36.000 --> 08:38.600
+y este es tu
+timeline.
+
+08:38.600 --> 08:40.600
+Ya tenemos aquí nuestro
+timeline.
+
+08:40.600 --> 08:42.000
+Listo, y con
+esto,
+
+08:42.000 --> 08:44.700
+ya tienes todas las bases que necesitas,
+
+08:44.700 --> 08:46.700
+para comenzar tu carrera como desarrolladora,
+
+08:46.700 --> 08:48.900
+o desarrollador de
+llaves.
+
+08:48.900 --> 08:49.900
+No olvides practicar
+mucho,
+
+08:49.900 --> 08:51.100
+eso es muy
+importante,
+
+08:51.100 --> 08:53.300
+y ahorita no olvides subir tu proyecto,
+
+08:53.300 --> 08:55.000
+o presentar el
+examen,
+
+08:55.000 --> 08:56.000
+y
+evidentemente,
+
+08:56.000 --> 08:57.300
+calificar este
+curso.
+
+08:57.300 --> 08:58.500
+Mi nombre es Diego de
+Granda,
+
+08:58.500 --> 09:04.500
+y estoy en redes sociales para lo que
+necesites.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/10-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/10-index_5665e02f-31fe-4c5f-a003-0f6fa407346f.js

@@ -0,0 +1,69 @@
+/* 
+Requerimientos del reto:
+
+1. El usuario debe poder ingresar su usuario y contraseña
+2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
+3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
+4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
+
+*/
+
+const usersDatabase = [
+  {
+    username: "andres",
+    password: "123",
+  },
+  {
+    username: "caro",
+    password: "456",
+  },
+  {
+    username: "mariana",
+    password: "789",
+  },
+];
+
+const usersTimeline = [
+  {
+    username: "Estefany",
+    timeline: "Me encata Javascript!",
+  },
+  {
+    username: "Oscar",
+    timeline: "Bebeloper es lo mejor!",
+  },
+  {
+    username: "Mariana",
+    timeline: "A mi me gusta más el café que el té",
+  },
+  {
+    username: "Andres",
+    timeline: "Yo hoy no quiero trabajar",
+  },
+];
+
+const username = prompt("Cuál es tu usuario?");
+const password = prompt("Cuál es tu contraseña?");
+
+function usuarioExistente(username, password) {
+  for (let i = 0; i < usersDatabase.length; i++) {
+    if (
+      usersDatabase[i].username === username &&
+      usersDatabase[i].password === password
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function signIn(username, password) {
+  if (usuarioExistente(username, password)) {
+    alert(`Bienvenido a tu cuenta ${username}`);
+    console.log(usersTimeline);
+  } else {
+    alert("Uuups, usuario o contraseña incorrectos!");
+  }
+}
+
+signIn(username, password);

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/10-index_b9edb5bd-74c5-4aa1-a1cf-31873cf62ed2.js

@@ -0,0 +1,69 @@
+/* 
+Requerimientos del reto:
+
+1. El usuario debe poder ingresar su usuario y contraseña
+2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos
+3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario.
+4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline.
+
+*/
+
+const usersDatabase = [
+  {
+    username: "andres",
+    password: "123",
+  },
+  {
+    username: "caro",
+    password: "456",
+  },
+  {
+    username: "mariana",
+    password: "789",
+  },
+];
+
+const usersTimeline = [
+  {
+    username: "Estefany",
+    timeline: "Me encata Javascript!",
+  },
+  {
+    username: "Oscar",
+    timeline: "Bebeloper es lo mejor!",
+  },
+  {
+    username: "Mariana",
+    timeline: "A mi me gusta más el café que el té",
+  },
+  {
+    username: "Andres",
+    timeline: "Yo hoy no quiero trabajar",
+  },
+];
+
+const username = prompt("Cuál es tu usuario?");
+const password = prompt("Cuál es tu contraseña?");
+
+function usuarioExistente(username, password) {
+  for (let i = 0; i < usersDatabase.length; i++) {
+    if (
+      usersDatabase[i].username === username &&
+      usersDatabase[i].password === password
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function signIn(username, password) {
+  if (usuarioExistente(username, password)) {
+    alert(`Bienvenido a tu cuenta ${username}`);
+    console.log(usersTimeline);
+  } else {
+    alert("Uuups, usuario o contraseña incorrectos!");
+  }
+}
+
+signIn(username, password);

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/01-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/01-Programación Síncrona y Asíncrona en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2836334854951714aa334fd43a3ae1e91a3779c831853878770b2b246dc7764e
+size 66942471

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/01-Programación Síncrona y Asíncrona en JavaScript.vtt

@@ -0,0 +1,409 @@
+WEBVTT
+
+00:00.000 --> 00:04.500
+Para poder entender lo que es programación
+síncrona y asíncrona en JavaScript,
+
+00:04.500 --> 00:09.000
+primero vamos a hablar de cómo funciona
+JavaScript Engine en el navegador.
+
+00:09.000 --> 00:12.400
+Y para este tema hay dos puntos
+fundamentales que hay que entender.
+
+00:12.400 --> 00:16.500
+El primero es algo que se llama el memory
+heap, y el segundo es el call stack.
+
+00:16.500 --> 00:21.600
+El memory heap es el espacio en donde se
+van a guardar todas las variables,
+
+00:21.600 --> 00:25.000
+todas las funciones y objetos que creamos
+o construimos en JavaScript,
+
+00:25.000 --> 00:28.200
+y se van a estar guardando en el memory
+heap de forma random.
+
+00:28.200 --> 00:31.400
+Y el segundo, el call stack, es
+prácticamente la pila
+
+00:31.400 --> 00:36.400
+donde se van a empezar a llamar cada una
+de las funciones que tenemos que ejecutar en nuestro programa.
+
+00:36.400 --> 00:39.700
+Por ejemplo, yo tengo una función que se
+llama hola mundo,
+
+00:39.700 --> 00:43.000
+y esa función manda a llamar otra función
+que se llama mi nombre es Diego.
+
+00:43.000 --> 00:46.200
+Este call stack lo que va a hacer es
+mandar a llamar la primera función,
+
+00:46.200 --> 00:51.900
+ejecuta hola mundo, y se manda a llamar la
+segunda función, ejecuta mi nombre es Diego.
+
+00:51.900 --> 00:55.400
+A esta función se le conoce como
+programación simple.
+
+00:55.400 --> 00:58.900
+Quiere decir que se está trabajando una
+tarea a la vez.
+
+00:58.900 --> 01:03.000
+JavaScript funciona trabajando una tarea a
+la vez,
+
+01:03.000 --> 01:06.600
+y eso va a estar funcionando prácticamente
+en el call stack.
+
+01:06.600 --> 01:09.800
+Y de aquí puede haber un nombre que
+posiblemente conoces,
+
+01:09.800 --> 01:11.800
+que se llama stack
+overflow.
+
+01:11.800 --> 01:14.000
+Hay una página muy famosa con este nombre.
+
+01:14.000 --> 01:17.500
+Pero esto es cuando llevamos nuestro stack
+de tareas
+
+01:17.500 --> 01:22.200
+a un punto en donde excede el número o la
+memoria que tiene permitida
+
+01:22.200 --> 01:23.900
+para poder ejecutar las
+tareas.
+
+01:23.900 --> 01:27.700
+Y lo que sucede es que prácticamente
+nuestro navegador deja de funcionar, crashea.
+
+01:27.700 --> 01:29.600
+Tenemos que cerrarlo,
+abrirlo,
+
+01:29.600 --> 01:32.200
+para que vuelva a liberar la memoria que
+tenía en este stack
+
+01:32.200 --> 01:34.800
+y pueda funcionar de la forma en la que
+nosotros esperamos.
+
+01:34.800 --> 01:38.600
+Y ahora, cuando nosotros hablamos de
+programación asíncrona,
+
+01:38.600 --> 01:41.300
+JavaScript por defecto, como lo comenté,
+
+01:41.300 --> 01:43.900
+solo funciona de forma
+síncrona.
+
+01:43.900 --> 01:47.100
+Pero sí tenemos forma de poder hacer que
+JavaScript
+
+01:47.100 --> 01:51.000
+pueda empezar a trabajar ciertas tareas de
+forma asíncrona,
+
+01:51.000 --> 01:52.400
+quiere decir en
+simultáneo.
+
+01:52.400 --> 01:54.000
+Tenemos este código
+ejemplo,
+
+01:54.000 --> 01:57.400
+y la forma de hacerlo es entendiendo
+bien
+
+01:57.400 --> 02:00.500
+cómo funciona un poco más el tema del
+navegador
+
+02:00.500 --> 02:03.000
+con ciertos factores muy, muy importantes.
+
+02:03.000 --> 02:05.700
+Lo primero es tenemos el call stack.
+
+02:05.700 --> 02:08.500
+Lo segundo tenemos la parte de las web APIs.
+
+02:08.500 --> 02:11.400
+Las web APIs es lo que va a hacer que
+JavaScript
+
+02:11.400 --> 02:15.500
+pueda funcionar o se comporte como forma
+asíncrona.
+
+02:15.500 --> 02:18.500
+Al momento de que nosotros tenemos una
+función
+
+02:18.500 --> 02:20.000
+que es una web
+API,
+
+02:20.000 --> 02:23.000
+lo que hace es que la va a mandar a la
+sección de web API
+
+02:23.000 --> 02:25.500
+y va a hacer que se ejecute en
+simultáneo
+
+02:25.500 --> 02:28.100
+mientras el call stack sigue
+sacando
+
+02:28.100 --> 02:29.700
+las funciones que tiene
+ahí.
+
+02:29.700 --> 02:31.400
+La web API lo que va a hacer es
+un,
+
+02:31.400 --> 02:33.600
+se va a resolver en ese
+momento,
+
+02:33.600 --> 02:35.300
+ya que termine de
+resolverse,
+
+02:35.300 --> 02:37.000
+lo que tenga que hacer en la función,
+
+02:37.000 --> 02:38.400
+lo va a bajar al
+queue,
+
+02:38.400 --> 02:40.600
+que es prácticamente una sala de espera,
+
+02:40.600 --> 02:42.300
+y el even loop lo que va a hacer
+es
+
+02:42.300 --> 02:44.600
+va a estar preguntando al call stack,
+
+02:44.600 --> 02:45.800
+oye, ¿ya estás
+vacío?
+
+02:45.800 --> 02:47.500
+Si el call stack ya está
+vacío,
+
+02:47.500 --> 02:49.100
+va a tomar lo que existe en el
+queue
+
+02:49.100 --> 02:50.600
+y lo va a regresar al call
+stack
+
+02:50.600 --> 02:52.600
+para que se pueda terminar de ejecutar.
+
+02:52.600 --> 02:53.600
+Si no está
+vacío,
+
+02:53.600 --> 02:56.600
+va a mantener lo que está en el queue en
+espera
+
+02:56.600 --> 02:58.700
+a que se logre liberar el call
+stack
+
+02:58.700 --> 03:00.600
+y en ese momento le va a dar
+paso
+
+03:00.600 --> 03:03.500
+para que la función que se tiene que
+terminar de ejecutar
+
+03:03.500 --> 03:04.700
+pueda pasar al call
+stack
+
+03:04.700 --> 03:07.100
+y en ese momento se termine de
+ejecutar
+
+03:07.100 --> 03:08.300
+todo nuestro
+programa.
+
+03:08.300 --> 03:09.800
+En este ejemplo podemos ver
+que
+
+03:09.800 --> 03:11.500
+se está mandando a llamar la función de var.
+
+03:11.500 --> 03:13.300
+La función de var manda a llamar una
+función
+
+03:13.300 --> 03:14.900
+que se llama
+setTimeout,
+
+03:14.900 --> 03:16.800
+que es una función que hace que
+JavaScript
+
+03:16.800 --> 03:18.500
+funcione de forma
+asíncrona.
+
+03:18.500 --> 03:21.900
+setTimeout lanza un consolo que se baja al
+queue
+
+03:21.900 --> 03:24.200
+y una vez que el call stack está vacío,
+
+03:24.200 --> 03:26.100
+ese queue llega al call
+stack
+
+03:26.100 --> 03:30.100
+y ejecuta entonces el consolo que sería dos.
+
+03:30.100 --> 03:32.500
+Y podemos ver que se empieza a imprimir
+primero
+
+03:32.500 --> 03:34.700
+el uno de la función de
+var,
+
+03:34.700 --> 03:37.400
+después la función de var manda a llamar
+la función de foo,
+
+03:37.400 --> 03:41.100
+que lo manda directamente de forma
+asíncrona a WebAPI.
+
+03:41.100 --> 03:42.900
+Mientras eso se
+resuelve,
+
+03:42.900 --> 03:44.900
+se manda a llamar la función de baz.
+
+03:44.900 --> 03:47.300
+La función de baz ejecuta el
+tres
+
+03:47.300 --> 03:49.100
+y una vez que está vacío el call stack,
+
+03:49.100 --> 03:51.800
+llega el resultado de la función de foo,
+
+03:51.800 --> 03:54.500
+se sube al call stack y se imprime dos.
+
+03:54.500 --> 03:56.700
+Entonces el número de impresiones
+tendríamos
+
+03:56.700 --> 03:58.700
+uno, tres y
+dos,
+
+03:58.700 --> 04:00.200
+porque en forma
+simultánea,
+
+04:00.200 --> 04:03.600
+el uno y el dos estuvieron trabajando en
+paralelo,
+
+04:03.600 --> 04:06.000
+pero solo hasta que el tres logra salir,
+
+04:06.000 --> 04:08.500
+el dos llega directamente al call
+stack
+
+04:08.500 --> 04:10.100
+y se lo va a
+imprimir.
+
+04:10.100 --> 04:12.000
+Esta es la forma en la cual nosotros
+trabajamos
+
+04:12.000 --> 04:14.100
+código en JavaScript de forma
+síncrona
+
+04:14.100 --> 04:16.000
+y de forma
+asíncrona,
+
+04:16.000 --> 04:18.100
+utilizando por ejemplo
+WebAPIs,
+
+04:18.100 --> 04:21.300
+que hace que nuestro código pueda
+comportarse
+
+04:21.300 --> 04:23.500
+como código
+asíncrono.
+
+04:23.500 --> 04:26.800
+Y para esto vamos a utilizar lo que se
+llaman promesas.
+
+04:26.800 --> 04:29.800
+Promesas, que también pueden ser sync and
+await,
+
+04:29.800 --> 04:31.600
+que van a hacer que nuestro
+código
+
+04:31.600 --> 04:34.900
+pueda tener este comportamiento de
+asíncrono
+
+04:34.900 --> 04:48.900
+para que se ejecute en
+paralelo.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/02-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/02-Promesas en JavaScript Asincronía y Manejo de Estados.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:45ac4de97c6af7b178c48a98987e8f69f4710b0139eea8db58704e479f0ba434
+size 59530331

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/02-Promesas en JavaScript Asincronía y Manejo de Estados.vtt

@@ -0,0 +1,894 @@
+WEBVTT
+
+00:00.000 --> 00:03.800
+Entendamos entonces qué son las promesas.
+
+00:03.800 --> 00:06.920
+Aquí tenemos un HTML muy
+sencillo,
+
+00:06.920 --> 00:08.840
+ya lo tenemos abierto en el navegador.
+
+00:08.840 --> 00:11.080
+Vamos a pasar al
+JavaScript.
+
+00:11.080 --> 00:14.640
+Entonces, las promesas es lo que nos va a
+ayudar a hacer
+
+00:14.640 --> 00:17.800
+que nuestro código pase de ser
+síncrono
+
+00:17.800 --> 00:20.360
+a que pueda ser un código asíncrono.
+
+00:20.360 --> 00:22.960
+Es la forma en la cual nosotros vamos a
+decir al navegador,
+
+00:22.960 --> 00:25.280
+oye, esta función en
+particular,
+
+00:25.280 --> 00:27.320
+tienes que trabajarla de forma
+separada
+
+00:27.320 --> 00:30.080
+y ya que esté resuelta, me la puede
+regresar
+
+00:30.080 --> 00:32.280
+para que yo la pueda agregar al call
+stack
+
+00:32.280 --> 00:34.040
+y me pueda dar un
+resultado.
+
+00:34.040 --> 00:36.600
+Y podemos tener ciertos ejemplos
+ahorita
+
+00:36.600 --> 00:39.880
+para poder entender cómo se van disparando
+ciertas funciones.
+
+00:39.880 --> 00:42.120
+Tendríamos dos funciones que se van a
+disparar
+
+00:42.120 --> 00:45.480
+de forma síncrona y en medio de estas dos
+funciones
+
+00:45.480 --> 00:49.080
+podemos generar una promesa que al momento
+de que se dispare,
+
+00:49.080 --> 00:50.840
+nosotros esperaríamos tener, por ejemplo,
+
+00:50.840 --> 00:53.400
+el resultado de cada una de las funciones,
+
+00:53.400 --> 00:55.320
+pero la promesa va a venir
+después
+
+00:55.320 --> 00:58.920
+porque va a ser lo último que se va a
+solucionar.
+
+00:58.920 --> 01:00.960
+Entonces, ¿qué son las
+promesas?
+
+01:00.960 --> 01:03.680
+Como te comentaba, las promesas es la
+forma
+
+01:03.680 --> 01:06.840
+en la cual nosotros vamos a generar que
+nuestro código
+
+01:06.840 --> 01:09.840
+pueda funcionar de forma
+asíncrona.
+
+01:09.840 --> 01:12.880
+Y las promesas tienen tres
+estados.
+
+01:12.880 --> 01:17.320
+El primer estado es pending, que es el
+estado de pendiente.
+
+01:18.560 --> 01:22.120
+Este estado es cuando la promesa se va a
+crear.
+
+01:22.120 --> 01:24.160
+Cuando nosotros creamos una promesa,
+
+01:24.160 --> 01:27.920
+que las promesas las vamos a trabajar de
+inicio,
+
+01:27.920 --> 01:31.840
+de esta forma, se va a generar un primer
+estado
+
+01:31.840 --> 01:36.040
+que es el estado de
+pending.
+
+01:38.760 --> 01:42.280
+Ese estado de pending está en
+pendiente
+
+01:42.280 --> 01:44.920
+porque se va a empezar a generar la promesa.
+
+01:44.920 --> 01:47.840
+El segundo estado es
+fulfill.
+
+01:47.840 --> 01:52.840
+Y este estado va a venir cuando la promesa
+se resuelva.
+
+01:54.320 --> 01:57.360
+Una vez que la promesa se resuelva para
+bien o para mal,
+
+01:57.360 --> 01:59.280
+se va a poner en
+fulfill.
+
+01:59.280 --> 02:03.280
+Y el tercer estado es
+reject,
+
+02:04.720 --> 02:07.000
+que es cuando la promesa no se resolvió.
+
+02:07.840 --> 02:10.320
+Por algún punto, la promesa no se
+resolvió
+
+02:10.320 --> 02:12.680
+y ese es el estado que nos va a regresar.
+
+02:12.680 --> 02:16.440
+Ahora, las promesas manejan dos tipos de
+callback.
+
+02:16.440 --> 02:18.640
+La primera es
+resolve,
+
+02:20.360 --> 02:25.000
+que evidentemente es cuando la promesa se
+resuelve
+
+02:25.000 --> 02:27.160
+de forma
+satisfactoria.
+
+02:27.160 --> 02:29.840
+Y la segunda es
+reject,
+
+02:29.840 --> 02:33.800
+que es cuando la promesa no se puede resolver.
+
+02:33.800 --> 02:35.240
+Es importante poder
+entender
+
+02:35.240 --> 02:37.720
+lo que son los estados de la promesa,
+
+02:39.920 --> 02:40.840
+que son
+estos.
+
+02:41.800 --> 02:45.080
+Y de igual forma, es importante poder
+entender
+
+02:45.080 --> 02:50.080
+cuáles son los callbacks que tienen las
+promesas.
+
+02:52.000 --> 02:55.440
+También vamos a poder tener dos métodos en
+las promesas
+
+02:55.440 --> 02:56.480
+que son
+importantes.
+
+02:56.480 --> 02:59.840
+Nosotros generamos una primer función como
+una promesa,
+
+02:59.840 --> 03:04.520
+pero podemos utilizar el then, que es un
+método.
+
+03:04.520 --> 03:08.000
+Este método se ejecuta cuando la promesa
+se resuelve.
+
+03:08.000 --> 03:12.320
+Una vez que la promesa está lista, ya está
+fulfill,
+
+03:12.320 --> 03:15.120
+y está como con un callback de se resuelve,
+
+03:15.120 --> 03:18.360
+entonces va a entrar a ejecutarse el then.
+
+03:18.360 --> 03:21.840
+Y tenemos otro método que se llama catch.
+
+03:21.840 --> 03:26.360
+Este es importante porque el catch es lo
+que va a suceder
+
+03:26.360 --> 03:28.480
+cuando la promesa no se
+resuelve,
+
+03:28.480 --> 03:33.000
+y en el catch vamos a poder nosotros
+obtener el error
+
+03:33.000 --> 03:35.560
+para poder imprimirlo y que nos pueda
+decir
+
+03:35.560 --> 03:36.920
+qué es lo que está
+pasando
+
+03:36.920 --> 03:39.520
+que hace que la promesa no se resuelva.
+
+03:39.520 --> 03:41.480
+Comencemos con el
+ejemplo.
+
+03:41.480 --> 03:46.160
+Empezamos con una constante, se va a
+llamar promesa,
+
+03:46.160 --> 03:51.160
+y aquí vamos a construir una instancia de
+promesa.
+
+03:54.880 --> 03:59.760
+Esta instancia va a tener dos
+parámetros
+
+03:59.760 --> 04:03.520
+que va a ser resolve y
+reject.
+
+04:04.960 --> 04:06.840
+Ya que lo tenemos
+ahí,
+
+04:06.840 --> 04:11.840
+terminamos con la sintaxis de nuestra promesa,
+
+04:12.960 --> 04:16.640
+y aquí vamos a mandar llamar un
+setTimeout
+
+04:16.640 --> 04:19.160
+para generar como una
+validación.
+
+04:19.160 --> 04:21.120
+Vamos a, por
+ejemplo,
+
+04:21.120 --> 04:25.240
+tener como si estuviéramos haciendo a lo
+mejor
+
+04:26.880 --> 04:28.280
+el llamado de un
+API,
+
+04:28.280 --> 04:29.760
+y estamos esperando que se
+resuelva
+
+04:29.760 --> 04:31.280
+y que nos regrese
+algo.
+
+04:31.280 --> 04:34.200
+Entonces, para que esto pueda funcionar,
+
+04:34.200 --> 04:37.880
+el setTimeout nos va a ayudar para darle
+un tiempo
+
+04:37.880 --> 04:40.840
+a que este llamado del API se pueda resolver,
+
+04:40.840 --> 04:43.760
+y una vez que esté resuelto, nos regrese
+el resultado.
+
+04:43.760 --> 04:45.040
+Aquí lo vamos a
+fakear,
+
+04:46.320 --> 04:47.600
+lo vamos a llamar un
+API,
+
+04:47.600 --> 04:50.040
+vamos a generar una
+variable
+
+04:50.040 --> 04:54.560
+que nos fakee el resultado de la respuesta,
+¿no?
+
+04:54.560 --> 04:56.640
+Entonces tenemos nuestro setTimeout.
+
+04:58.320 --> 04:59.400
+Ya estando
+acá,
+
+04:59.400 --> 05:01.720
+aquí es donde pondríamos nosotros como el
+código
+
+05:01.720 --> 05:04.240
+si estuviéramos haciendo la petición de un
+API,
+
+05:04.240 --> 05:06.280
+vamos a utilizar un fetch o algo similar,
+
+05:06.280 --> 05:09.720
+yo voy a generar una variable que se llama
+operation
+
+05:12.040 --> 05:12.880
+successFull,
+
+05:15.200 --> 05:17.240
+y va a ser igual a
+true,
+
+05:17.240 --> 05:19.320
+dando como
+referencia
+
+05:19.320 --> 05:24.320
+de que lo que pasó aquí en el código del
+setTimeout
+
+05:24.480 --> 05:26.080
+regresó a éxito,
+¿no?
+
+05:26.080 --> 05:28.040
+Entonces podemos
+continuar.
+
+05:28.040 --> 05:29.040
+Y en la parte de
+abajo,
+
+05:29.040 --> 05:31.440
+voy a hacer una pequeña
+validación.
+
+05:31.440 --> 05:33.240
+Si
+operation
+
+05:34.520 --> 05:35.360
+successFull,
+
+05:38.200 --> 05:39.080
+si
+operación,
+
+05:39.080 --> 05:42.720
+si esta operación fue
+exitosa,
+
+05:42.720 --> 05:43.680
+entonces
+
+05:44.800 --> 05:47.120
+regrésame el
+result.
+
+05:48.280 --> 05:50.080
+¿Quiere aquí en el
+result?
+
+05:50.080 --> 05:51.480
+Podemos poner
+como
+
+05:53.680 --> 05:54.600
+la
+operación
+
+05:54.600 --> 05:59.600
+fue
+exitosa.
+
+06:02.000 --> 06:04.280
+Y en caso de que no sea
+exitosa,
+
+06:05.880 --> 06:07.920
+me va a regresar el
+reject.
+
+06:16.560 --> 06:17.560
+Ahí va la
+operación.
+
+06:17.560 --> 06:22.560
+Aquí ponemos
+acentos.
+
+06:25.960 --> 06:29.000
+Y este if, esta
+validación,
+
+06:29.000 --> 06:33.240
+tiene que ir adentro de nuestro setTimeout.
+
+06:33.240 --> 06:34.800
+Y ya que estamos con
+esto,
+
+06:34.800 --> 06:37.360
+entonces le decimos que queremos que se
+resuelva
+
+06:37.360 --> 06:39.160
+en dos
+segundos.
+
+06:40.680 --> 06:43.640
+Entonces es el tiempo que le vamos a dar
+al setTimeout
+
+06:43.640 --> 06:45.600
+para que pueda resolver esta operación.
+
+06:45.600 --> 06:48.640
+Aquí, como nosotros le estamos
+poniendo
+
+06:48.640 --> 06:50.800
+que la operación sí fue
+exitosa,
+
+06:50.800 --> 06:53.480
+esto va a pasar y nos tendrá que
+resolver
+
+06:53.480 --> 06:56.280
+con, oye, la operación fue
+exitosa.
+
+06:56.280 --> 06:58.280
+En caso de que esto no
+pasara,
+
+06:58.280 --> 07:00.440
+digamos, alguna petición o un
+API,
+
+07:00.440 --> 07:03.000
+de repente nos regresara como un false,
+
+07:03.000 --> 07:06.160
+entonces aquí entraría el
+else
+
+07:06.160 --> 07:07.560
+y nos regresaría el
+reject.
+
+07:08.560 --> 07:10.440
+Entonces ahorita vamos a
+guardar.
+
+07:12.280 --> 07:13.680
+Si venimos aquí a
+navegador,
+
+07:13.680 --> 07:16.480
+y mandamos llamar nuestra
+función,
+
+07:16.480 --> 07:17.320
+le damos
+enter,
+
+07:18.600 --> 07:21.160
+vemos aquí que nos está regresando algo.
+
+07:21.160 --> 07:23.320
+Nos está regresando una
+promesa,
+
+07:23.320 --> 07:26.120
+nos está diciendo que la promesa ya fue
+resuelta,
+
+07:26.120 --> 07:28.000
+fulfill, ya está
+lista,
+
+07:28.000 --> 07:30.640
+y nos está regresando entonces el resultado.
+
+07:30.640 --> 07:33.520
+Quiere decir que la operación fue exitosa.
+
+07:33.520 --> 07:34.360
+¿Por
+qué?
+
+07:34.360 --> 07:38.240
+Porque aquí le estamos diciendo que lo
+esperado es verdad.
+
+07:38.240 --> 07:39.640
+Ahora, si cambiamos
+esto,
+
+07:39.640 --> 07:40.840
+y
+guardamos,
+
+07:40.840 --> 07:42.240
+vamos a ver que nos
+regresa.
+
+07:46.120 --> 07:47.440
+Nos regresa lo
+mismo,
+
+07:47.440 --> 07:50.880
+por aquí nos dice que nos está regresando
+el reject,
+
+07:50.880 --> 07:54.400
+y nos está regresando el mensaje de esto
+falló,
+
+07:54.400 --> 07:57.240
+y entonces es la operación
+falló.
+
+07:57.240 --> 07:58.960
+Este es un ejemplo
+básico.
+
+07:58.960 --> 08:01.440
+Ahora, ¿cómo nosotros podríamos
+obtener?
+
+08:01.440 --> 08:04.040
+Aquí nosotros tenemos que venir a la
+terminal
+
+08:04.040 --> 08:06.480
+a poder poner la
+operación,
+
+08:06.480 --> 08:11.400
+venir a la terminal a poder poner la
+función
+
+08:11.400 --> 08:13.640
+para poder ver en la terminal que es lo
+que está pasando,
+
+08:13.640 --> 08:16.600
+pero ¿cómo nos puede regresar
+automáticamente
+
+08:16.600 --> 08:19.200
+esta función, el
+resultado?
+
+08:19.200 --> 08:20.800
+Nos regresamos a nuestro
+código,
+
+08:21.640 --> 08:23.440
+utilizamos nuestra
+función,
+
+08:24.600 --> 08:26.760
+y aquí es donde vamos a estar
+utilizando
+
+08:26.760 --> 08:30.400
+los métodos que tienen las promesas.
+
+08:31.440 --> 08:33.200
+Podemos venir
+aquí,
+
+08:33.200 --> 08:36.840
+y utilizamos punto y el método
+uno.
+
+08:36.840 --> 08:38.680
+Entonces el método
+den,
+
+08:38.680 --> 08:42.560
+lo que hace es se ejecuta cuando la
+promesa se resuelve.
+
+08:42.560 --> 08:45.640
+Entonces lo que va a hacer es que va a
+ejecutar,
+
+08:45.640 --> 08:47.880
+una vez que la promesa se
+resuelve,
+
+08:47.880 --> 08:50.800
+lo que nosotros queremos traer es lo que
+sea
+
+08:50.800 --> 08:53.720
+que va a estar viniendo aquí en este código.
+
+08:53.720 --> 08:56.000
+Entonces aquí le estamos diciendo como den,
+
+08:57.240 --> 09:01.080
+y lo que queremos que nos traiga es un
+mensaje
+
+09:01.080 --> 09:04.360
+que el mensaje tiene que ser como el
+mensaje de éxito
+
+09:04.360 --> 09:06.560
+en este momento, entonces podemos ponerle,
+
+09:07.560 --> 09:10.520
+success
+message,
+
+09:14.160 --> 09:17.160
+y el código aquí va a ser nada más un console.
+log.
+
+09:21.160 --> 09:22.880
+Y en el
+console.log,
+
+09:22.880 --> 09:27.880
+queremos que nos imprima el mensaje de éxito,
+
+09:27.920 --> 09:29.880
+que tendría que ser este
+mensaje.
+
+09:29.880 --> 09:32.840
+Ahora, si esto no se resuelve a favor,
+
+09:32.840 --> 09:34.840
+estamos esperando entonces un catch.
+
+09:36.080 --> 09:37.840
+¿Qué es lo que
+pasó?
+
+09:37.840 --> 09:40.800
+Nos interesa de perfecto, si esto no fue
+un éxito,
+
+09:40.800 --> 09:43.240
+si no me está regresando el código que yo
+esperaba,
+
+09:43.240 --> 09:45.520
+entonces regresame el
+error.
+
+09:51.360 --> 09:53.640
+Y con el error hacemos lo
+mismo.
+
+09:53.640 --> 09:55.120
+¿Cuál es el
+código?
+
+09:55.120 --> 09:57.840
+O qué es lo que estamos esperando que se
+ejecute,
+
+09:57.840 --> 09:59.920
+si existe un
+error.
+
+10:01.600 --> 10:03.400
+Y en este caso, solo para el ejemplo,
+
+10:03.400 --> 10:05.640
+lo que yo estoy esperando que se
+ejecute
+
+10:05.640 --> 10:07.920
+es prácticamente el mensaje de
+error
+
+10:07.920 --> 10:10.160
+que yo tenía
+planificado.
+
+10:10.160 --> 10:11.120
+Entonces
+guardamos.
+
+10:13.160 --> 10:16.560
+Se tomó un tiempo y aquí nos dice que
+tenemos un error
+
+10:16.560 --> 10:18.840
+en la línea 17 y está
+acá.
+
+10:21.440 --> 10:23.240
+Entonces si ahora volvemos a guardar,
+
+10:24.440 --> 10:27.320
+bien, aquí está otro
+typo.
+
+10:27.320 --> 10:28.400
+Perfecto.
+
+10:28.400 --> 10:30.480
+Entonces al momento de que yo estoy guardando,
+
+10:30.480 --> 10:31.720
+se está
+demorando,
+
+10:31.720 --> 10:33.320
+pero está demorando los dos
+segundos
+
+10:33.320 --> 10:34.640
+que le estoy poniendo
+aquí.
+
+10:34.640 --> 10:36.200
+Entonces si yo vuelvo a
+cargar,
+
+10:37.560 --> 10:40.320
+dos segundos y ahora,
+perfecto,
+
+10:40.320 --> 10:42.280
+ya nos dice la operación
+falló.
+
+10:42.280 --> 10:43.680
+¿Por qué está
+fallando?
+
+10:43.680 --> 10:45.560
+Porque aquí en la
+promesa,
+
+10:45.560 --> 10:48.760
+yo le estoy poniendo que sea diferente a true.
+
+10:48.760 --> 10:52.440
+Si quitamos ese, que sea diferente a
+true
+
+10:52.440 --> 10:53.640
+y le damos
+guardar,
+
+10:54.560 --> 10:56.440
+se tarda dos
+segundos
+
+10:56.440 --> 10:57.480
+y entonces ya nos
+regresa,
+
+10:57.480 --> 10:59.720
+oye, la operación fue
+exitosa.
+
+10:59.720 --> 11:02.000
+Entonces el then y el
+catch
+
+11:02.000 --> 11:03.640
+es lo que nosotros vamos a
+utilizar
+
+11:03.640 --> 11:05.920
+para poder ejecutar el
+resultado
+
+11:05.920 --> 11:07.360
+que venga de nuestra
+promesa,
+
+11:07.360 --> 11:09.960
+que en este caso, nuestra promesa tiene un
+setTimeout,
+
+11:09.960 --> 11:12.440
+que también es prácticamente una promesa.
+
+11:13.400 --> 11:15.560
+Y una vez que eso se termina de ejecutar,
+
+11:15.560 --> 11:18.640
+mandamos llamar nuestra promesa con el
+then
+
+11:18.640 --> 11:20.160
+para que se ejecute el
+código
+
+11:20.160 --> 11:22.280
+que esperamos una vez que la
+promesa
+
+11:22.280 --> 11:26.080
+pues se haya resuelto de forma exitosa.
+
+11:26.080 --> 11:28.280
+Y en caso de que eso no
+funcione,
+
+11:28.280 --> 11:30.440
+entonces que nos regrese el
+catch
+
+11:30.440 --> 11:32.760
+para que nosotros podamos saber
+principalmente
+
+11:32.760 --> 11:33.720
+cuál fue el
+error
+
+11:33.720 --> 11:58.720
+y por qué no se resolvió la promesa como
+lo esperábamos.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/02-app_3fd37998-3a9c-486d-8eeb-3794a9ea8bd3.js

@@ -0,0 +1,3 @@
+fetch("https://jsonplaceholder.typicode.com/posts")
+  .then((response) => response.json())
+  .then((data) => console.log(data));

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/03-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/03-Uso de AsyncAwait para Promesas Asíncronas en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5d1fbc8fbceb5e18fc9e8460d795fb99c8ddc7016962d2048d83a2a1dd55f553
+size 52676906

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/03-Uso de AsyncAwait para Promesas Asíncronas en JavaScript.vtt

@@ -0,0 +1,674 @@
+WEBVTT
+
+00:00.000 --> 00:04.200
+Hay que otra forma de poder trabajar
+promesas asíncronas,
+
+00:04.200 --> 00:06.360
+que sería
+SYNC-N-AWAIT.
+
+00:06.360 --> 00:09.400
+Aquí tenemos ya nuestro proyecto, un HTML
+en blanco,
+
+00:09.400 --> 00:13.800
+lo que queremos es utilizar el JavaScript
+para poder ver aquí en consola el resultado.
+
+00:13.800 --> 00:20.900
+Pero vamos a estar hablando de algo que se
+llama SYNC-N-AWAIT.
+
+00:20.900 --> 00:25.320
+Que esto es otra forma de poder trabajar
+código de forma asíncrono.
+
+00:25.320 --> 00:28.640
+El SYNC-N-AWAIT devuelve una promesa,
+
+00:28.640 --> 00:33.240
+entonces el resultado es lo mismo, el
+código que esté en el SYNC-N-AWAIT
+
+00:33.240 --> 00:35.720
+se va a pasar a la sección de Web API,
+
+00:35.720 --> 00:40.960
+en esa sección va a trabajar para poder
+resolver
+
+00:40.960 --> 00:43.160
+lo que es esa función como una promesa,
+
+00:43.160 --> 00:46.720
+y ya que esté resuelta, no las va a poder
+regresar con el EVENLOOP
+
+00:46.720 --> 00:49.040
+directamente al call
+stack,
+
+00:49.040 --> 00:52.840
+para que se pueda ejecutar la respuesta de
+esa promesa, ese callback.
+
+00:52.840 --> 00:57.360
+Las promesas existieron después de los
+callbacks,
+
+00:57.360 --> 00:59.600
+así que ese es el beneficio que tenemos,
+
+00:59.600 --> 01:03.040
+que nos ayuda a que esto genera que
+nuestro código
+
+01:03.040 --> 01:06.440
+pase de ser código síncrono en nuestro
+call stack,
+
+01:06.440 --> 01:08.240
+a código
+asíncrono,
+
+01:08.240 --> 01:11.840
+y se puedan ir resolviendo diferentes
+tareas de forma síncrona.
+
+01:11.840 --> 01:15.840
+Ahora, el SYNC-N-AWAIT, la diferencia que
+tiene con las promesas
+
+01:15.840 --> 01:19.080
+es que es una forma un poco más
+legible
+
+01:19.080 --> 01:22.040
+de poder leer los pasos, qué es lo que
+está pasando.
+
+01:22.040 --> 01:25.200
+Lo que vamos a hacer ahorita, que es un
+pequeño ejercicio,
+
+01:25.200 --> 01:28.640
+vamos a consumir una API, una API pública,
+
+01:28.640 --> 01:30.880
+para poder utilizar el
+FETCH.
+
+01:30.880 --> 01:33.160
+Ese FETCH lo que nos va a ayudar es,
+
+01:33.160 --> 01:35.080
+FETCH en particular es otra web
+API
+
+01:35.080 --> 01:36.880
+que también nos regresa una promesa,
+
+01:36.880 --> 01:39.680
+trabaja por su cuenta, y una vez que esté
+resultado,
+
+01:39.680 --> 01:41.360
+simplemente lo regresa al call
+stack
+
+01:41.360 --> 01:44.280
+para que nosotros podamos tener el
+resultado
+
+01:44.280 --> 01:46.200
+de si la promesa se cumplió o
+no.
+
+01:46.200 --> 01:48.400
+Y vamos a hacer el mismo
+ejercicio,
+
+01:48.400 --> 01:50.880
+pero utilizando
+SYNC-N-AWAIT.
+
+01:50.880 --> 01:54.680
+Entonces aquí vamos a conseguir una
+pequeña función
+
+01:54.680 --> 01:59.680
+que se va a llamar
+FETCHDATA.
+
+02:03.320 --> 02:05.600
+Esta función no va a recibir ningún parámetro,
+
+02:05.600 --> 02:09.440
+entonces adentro de esta función
+utilizamos el web API
+
+02:09.440 --> 02:12.040
+que se llama
+FETCH.
+
+02:12.040 --> 02:14.440
+Y aquí vamos directamente al
+FETCH,
+
+02:14.440 --> 02:16.880
+tenemos que poner la URL del
+API
+
+02:16.880 --> 02:20.320
+a la que estamos intentando hacer como la
+petición.
+
+02:20.320 --> 02:22.240
+Yo tengo aquí algunas APIs abiertas,
+
+02:22.240 --> 02:24.280
+existen diferentes APIs
+públicas,
+
+02:24.280 --> 02:26.680
+tú puedes utilizar el API que tú quieras,
+
+02:26.680 --> 02:27.960
+te las pongo aquí de
+referencia
+
+02:27.960 --> 02:29.920
+para que tú puedas ver la documentación,
+
+02:29.920 --> 02:32.480
+está una de Pokémon, está una de Star Wars,
+
+02:32.480 --> 02:35.760
+o la que yo voy a utilizar es la de Rick
+and Morty.
+
+02:35.760 --> 02:38.920
+Entonces voy a utilizar
+particularmente
+
+02:38.920 --> 02:40.880
+esta parte del
+API
+
+02:40.880 --> 02:44.080
+que me regresa a los personajes de Rick
+and Morty.
+
+02:44.080 --> 02:49.080
+Entonces venimos aquí, colocamos aquí
+nuestra API,
+
+02:49.320 --> 02:50.480
+y ya que
+está,
+
+02:50.480 --> 02:53.080
+venimos y ponemos el
+THEN,
+
+02:53.080 --> 02:55.520
+que recordemos que el THEN es lo que se va
+a ejecutar
+
+02:55.520 --> 02:57.480
+una vez que nuestra
+promesa
+
+02:57.480 --> 02:59.680
+se resuelve de forma
+satisfactoria.
+
+03:00.520 --> 03:01.520
+Ya que venimos
+aquí,
+
+03:01.520 --> 03:03.840
+queremos que nos traiga la respuesta,
+
+03:06.520 --> 03:11.520
+y queremos que esa respuesta la pueda
+pasar a JSON.
+
+03:14.680 --> 03:18.680
+Y listo, ya que tengamos esa respuesta en
+JSON,
+
+03:18.680 --> 03:20.680
+necesitamos otro
+THEN
+
+03:20.680 --> 03:22.520
+para que entonces esa
+respuesta
+
+03:23.920 --> 03:27.920
+se convierte en nuestra data que vamos a
+utilizar,
+
+03:27.920 --> 03:30.880
+y lo que le vamos a pedir es que de
+inicio
+
+03:33.280 --> 03:36.120
+nos imprima qué nos
+devuelve,
+
+03:36.120 --> 03:38.040
+cuáles son los datos que nos devuelve.
+
+03:39.120 --> 03:42.520
+Si algo sale mal, queremos el catch,
+
+03:43.480 --> 03:45.520
+para que el catch
+sea
+
+03:45.520 --> 03:48.880
+que nos imprima el
+error.
+
+03:48.880 --> 03:51.880
+Aquí es un que pueda tomar el error,
+
+03:51.880 --> 03:53.880
+y aquí le vamos a pedir nada más
+que
+
+03:55.280 --> 03:58.680
+pues nos imprima cuál fue el
+error.
+
+04:00.680 --> 04:03.280
+Perfecto, y aquí tenemos nuestra primera
+promesa.
+
+04:03.280 --> 04:05.680
+Tenemos fetch que nos está regresando,
+
+04:05.680 --> 04:09.680
+más bien, fetch que va a hacer una
+petición a esta API.
+
+04:09.680 --> 04:11.680
+Si esa petición
+funciona,
+
+04:11.680 --> 04:14.680
+queremos que esa respuesta la pase en JSON,
+
+04:14.680 --> 04:17.680
+si esto se termina de resolver de forma
+exitosa,
+
+04:17.680 --> 04:20.680
+queremos que esta respuesta la convierta
+en datos,
+
+04:20.680 --> 04:24.680
+la pase directamente a datos, y nos
+imprima estos datos.
+
+04:24.680 --> 04:26.680
+Si esto no
+funciona,
+
+04:26.680 --> 04:30.680
+queremos ver cuál fue el error que nos
+está regresando,
+
+04:30.680 --> 04:32.680
+¿no? ¿Qué fue lo que no
+salió?
+
+04:34.680 --> 04:36.680
+Perfecto, entonces vamos a guardar aquí,
+
+04:37.680 --> 04:39.680
+y ahora venimos a nuestro
+navegador
+
+04:39.680 --> 04:44.680
+y mandamos llamar nuestra opción, fetch data.
+
+04:48.680 --> 04:51.680
+Y podemos ver que tenemos ya una respuesta.
+
+04:52.680 --> 04:55.680
+Si abrimos esta respuesta, tenemos aquí
+los resultados,
+
+04:55.680 --> 04:58.680
+y de los resultados ya nos está trayendo,
+
+04:58.680 --> 05:01.680
+de inicio, los primeros 20 personajes,
+
+05:01.680 --> 05:02.680
+que en la documentación del
+API,
+
+05:02.680 --> 05:04.680
+posiblemente es la forma en la que te va a
+decir,
+
+05:04.680 --> 05:06.680
+te va a regresar como grupos de
+20,
+
+05:06.680 --> 05:09.680
+y aquí podemos ver que son personajes de
+Rick and Morty.
+
+05:09.680 --> 05:13.680
+Bien, aquí es la forma en cómo utilizamos
+un fetch,
+
+05:13.680 --> 05:17.680
+que es una promesa, con sus den y sus catch.
+
+05:17.680 --> 05:21.680
+Ahora, ¿cómo podemos hacer que esta
+función
+
+05:21.680 --> 05:23.680
+la pasemos a sink and
+await?
+
+05:23.680 --> 05:25.680
+Vamos para
+allá.
+
+05:25.680 --> 05:28.680
+Entonces venimos aquí, esto lo voy a comentar,
+
+05:28.680 --> 05:30.680
+para que se quede como
+referencia,
+
+05:30.680 --> 05:32.680
+porque voy a construir una función nueva,
+
+05:32.680 --> 05:34.680
+que también se va a llamar fetch data,
+
+05:34.680 --> 05:36.680
+que esa función va a ser una
+sink.
+
+05:38.680 --> 05:44.680
+Entonces va a ser function fetch data,
+
+05:44.680 --> 05:47.680
+pero como es un sink and
+await,
+
+05:47.680 --> 05:51.680
+nuestras funciones que queremos que se
+conviertan en promesas,
+
+05:51.680 --> 05:55.680
+tendrían que empezar con un sink, al inicio.
+
+05:55.680 --> 05:57.680
+Entonces esto va a hacer que esta función,
+
+05:57.680 --> 06:01.680
+esta misma función, ya nos regrese una
+promesa,
+
+06:01.680 --> 06:04.680
+o que esté esperando que sea una promesa.
+
+06:04.680 --> 06:06.680
+Entonces aquí comenzamos nuestra función,
+
+06:06.680 --> 06:08.680
+no vamos a tener ningún
+parámetro,
+
+06:08.680 --> 06:11.680
+y vamos a empezar con un
+try.
+
+06:11.680 --> 06:15.680
+A sink and await tiene try y
+catch.
+
+06:15.680 --> 06:19.680
+El try y catch, que sería esto, y catch,
+
+06:19.680 --> 06:23.680
+que el catch es muy similar al catch que
+tenemos acá,
+
+06:23.680 --> 06:26.680
+el try y el catch es lo que nos va a permitir,
+
+06:26.680 --> 06:28.680
+entonces, hacer el manejo de los
+errores
+
+06:28.680 --> 06:31.680
+desde la sink y en el
+await.
+
+06:31.680 --> 06:37.680
+El try es prácticamente el código que
+tiene que pasar,
+
+06:37.680 --> 06:40.680
+y si eso no funciona, entonces el
+catch
+
+06:40.680 --> 06:44.680
+nos va a regresar el error de lo que no
+está funcionando.
+
+06:45.680 --> 06:47.680
+Así que empezamos con el
+try,
+
+06:47.680 --> 06:50.680
+esta es la sintaxis de poder utilizar un try,
+
+06:50.680 --> 06:56.680
+y después ocuparíamos el catch para poder
+manejar el error.
+
+06:56.680 --> 07:00.680
+Y el catch aquí se manejaría con error.
+
+07:01.680 --> 07:04.680
+Esta sería la sintaxis de poder utilizar
+un try-catch
+
+07:04.680 --> 07:07.680
+adentro de un async, una función que es async.
+
+07:07.680 --> 07:11.680
+Ahora, estando acá, vamos a generar una
+variable
+
+07:11.680 --> 07:14.680
+que se va a llamar
+response,
+
+07:14.680 --> 07:18.680
+y esa variable va a ser igual a un fetch,
+
+07:18.680 --> 07:22.680
+que el fetch es la misma web API que vamos
+a hacer
+
+07:22.680 --> 07:24.680
+para poder hacer una petición del API.
+
+07:24.680 --> 07:28.680
+Y vamos a utilizar la misma
+URL.
+
+07:30.680 --> 07:33.680
+Pero, como estamos utilizando sink and await,
+
+07:33.680 --> 07:36.680
+esta es una promesa, y entonces esperamos,
+
+07:36.680 --> 07:39.680
+y aquí es donde viene,
+await.
+
+07:42.680 --> 07:47.680
+Await indica que este código espera que se
+resuelva la promesa,
+
+07:47.680 --> 07:48.680
+que es
+esto.
+
+07:48.680 --> 07:51.680
+Nuestra función aquí es una
+async,
+
+07:51.680 --> 07:54.680
+y entonces en la wait esperamos que
+esto
+
+07:54.680 --> 07:58.680
+sea el código que espera que se resuelva
+la promesa,
+
+07:58.680 --> 08:01.680
+que es como aquí cuando estábamos iniciando,
+
+08:01.680 --> 08:03.680
+nosotros estábamos con el
+fetch.
+
+08:03.680 --> 08:05.680
+Entonces, el await va a esperar que este
+código
+
+08:05.680 --> 08:07.680
+resuelva el tema de la
+promesa.
+
+08:07.680 --> 08:11.680
+Si esto funciona, entonces aquí generamos
+otra variable
+
+08:11.680 --> 08:13.680
+que se va a llamar
+data,
+
+08:13.680 --> 08:21.680
+que va a ser igual a await response.json.
+
+08:23.680 --> 08:25.680
+Y si esto se termina de
+resolver,
+
+08:25.680 --> 08:31.680
+entonces queremos que simplemente nos
+devuelva
+
+08:31.680 --> 08:33.680
+cuál es la data que nos
+trae.
+
+08:33.680 --> 08:37.680
+Entonces, si esta promesa se resuelve,
+
+08:37.680 --> 08:40.680
+lo siguiente es que esta
+respuesta,
+
+08:40.680 --> 08:44.680
+como lo que traiga el fetch, se va a
+guardar en respuesta,
+
+08:44.680 --> 08:47.680
+entonces queremos que esta respuesta
+puesto json,
+
+08:47.680 --> 08:49.680
+que es que nos quede en un json, se guarde
+en data,
+
+08:49.680 --> 08:52.680
+y que nosotros podamos
+imprimir
+
+08:52.680 --> 08:54.680
+qué es lo que trae esta
+data.
+
+08:54.680 --> 08:58.680
+Si esto no sucede por algo, simplemente
+queremos
+
+08:58.680 --> 09:03.680
+que nos imprima de momento el error que
+nos trae.
+
+09:06.680 --> 09:07.680
+Y
+listo.
+
+09:07.680 --> 09:11.680
+Ya con eso, guardamos, venimos a nuestro
+navegador,
+
+09:11.680 --> 09:15.680
+y si ponemos fetch
+data,
+
+09:17.680 --> 09:19.680
+nos trae de igual forma la petición,
+
+09:19.680 --> 09:21.680
+vemos aquí que es una
+promesa,
+
+09:21.680 --> 09:25.680
+y si la abrimos, podemos ver que nos trae
+el resultado,
+
+09:25.680 --> 09:27.680
+igual con 20
+personajes,
+
+09:27.680 --> 09:32.680
+y es la misma respuesta que teníamos en la
+promesa arriba.
+
+09:32.680 --> 09:35.680
+Nos trae prácticamente los mismos personajes.
+
+09:35.680 --> 09:37.680
+Y estamos viendo que es una promesa.
+
+09:37.680 --> 09:39.680
+Prácticamente, a Sink and
+Away,
+
+09:39.680 --> 09:42.680
+nos está regresando una promesa que ya se
+terminó de hacer,
+
+09:42.680 --> 09:45.680
+es una promesa que se completó de forma
+exitosa,
+
+09:45.680 --> 09:47.680
+y es por eso que en la parte de
+abajo
+
+09:47.680 --> 10:05.680
+ya tenemos la respuesta exitosa de la promesa.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/03-app_5bc0e7ac-1f29-42b8-81f4-9ce6af240d4a.js

@@ -0,0 +1,3 @@
+fetch("https://jsonplaceholder.typicode.com/posts")
+  .then((response) => response.json())
+  .then((data) => console.log(data));