Upload via hfc (batch)

Uploaded using hfc tool

.gitattributes

@@ -227,3 +227,16 @@ subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript
 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/06-Asincronía en JavaScript/04-Lecturas recomendadas.txt

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/04-Peticiones asíncronas con for await en JavaScript.vtt

@@ -0,0 +1,296 @@
+WEBVTT
+
+00:00.000 --> 00:05.120
+¿Qué pasaría si, por ejemplo, tuvieras que
+hacer más de una petición?
+
+00:05.120 --> 00:11.040
+¿Cuál sería la mejor forma de hacerlo
+utilizando una promesa como async and await?
+
+00:11.040 --> 00:14.360
+Esto es importante porque cuando estés
+trabajando en algún proyecto
+
+00:14.360 --> 00:18.800
+y de repente tengas una pantalla que va a
+requerir más de una petición,
+
+00:18.800 --> 00:22.600
+¿cómo lo estarás haciendo en una
+promesa?
+
+00:22.600 --> 00:27.400
+Entonces, la forma de hacerlo es algo que
+se llama un for await off,
+
+00:27.400 --> 00:33.560
+que es un bucle que va a utilizar un async
+and await para poder pasar esas peticiones.
+
+00:33.560 --> 00:39.480
+Las peticiones las puedes traer en algún
+array de forma asíncrona
+
+00:39.480 --> 00:42.880
+para que una vez que las peticiones se
+terminen de resolver,
+
+00:42.880 --> 00:47.400
+entonces regresen al call stack y tú
+tengas respuesta de esos datos.
+
+00:47.400 --> 00:51.720
+La forma de hacerlo sería, de primera
+instancia, vamos a construir
+
+00:51.720 --> 01:02.760
+nuestro array que van a ser como un
+arreglo de diferentes URLs.
+
+01:02.760 --> 01:06.800
+Y vamos a regresar aquí a nuestra API de
+Rick and Morty
+
+01:06.800 --> 01:13.680
+y vamos a tomar estas
+URLs.
+
+01:13.680 --> 01:16.920
+Vamos a utilizar las tres que tenemos aquí,
+
+01:16.920 --> 01:22.360
+solo como
+referencia,
+
+01:22.360 --> 01:27.160
+y vamos a hacer esas tres peticiones.
+
+01:27.160 --> 01:30.160
+Perfecto.
+
+01:30.160 --> 01:37.600
+Y vamos a poner la
+última.
+
+01:37.600 --> 01:39.440
+Muy
+bien.
+
+01:39.440 --> 01:42.800
+Ya tenemos aquí nuestro arreglo de tres
+URLs
+
+01:42.800 --> 01:46.960
+a las cuales tenemos que hacer la petición
+a cada una de estas tres.
+
+01:46.960 --> 01:54.040
+Aquí vamos a generar otra función que va a
+ser una función async,
+
+01:54.040 --> 02:01.960
+que se va a llamar fetch new
+data.
+
+02:01.960 --> 02:04.840
+No va a recibir ningún parámetro de momento.
+
+02:04.840 --> 02:07.960
+Y aquí vamos a empezar con nuestro try.
+
+02:07.960 --> 02:13.760
+Y en nuestro try, como nosotros queremos
+es iterar, hacer un loop sobre este arreglo
+
+02:13.760 --> 02:19.160
+para tener cada una de estas tres APIs y
+poder hacer un fetch de estas APIs,
+
+02:19.160 --> 02:28.200
+entonces lo que vamos a hacer es empezamos
+con el for await
+
+02:28.200 --> 02:32.040
+y la sintaxis es, generamos nuestra variable,
+
+02:32.040 --> 02:40.800
+let URL of
+URLs.
+
+02:40.800 --> 02:42.920
+La sintaxis creo que es muy straightforward,
+
+02:42.920 --> 02:50.280
+entonces por cada URL que exista en URLs,
+haz lo siguiente.
+
+02:50.280 --> 02:57.640
+Y de aquí lo siguiente, lo que vamos a
+estar haciendo es,
+
+02:57.640 --> 03:07.720
+let response igual a await fetch URL,
+
+03:07.720 --> 03:13.960
+porque esto nos va a traer entonces una
+URL de este arreglo.
+
+03:13.960 --> 03:18.360
+Perfecto.
+
+03:18.360 --> 03:30.600
+Después entonces on let data igual a await
+response.json
+
+03:30.600 --> 03:39.320
+y si lo tenemos, pues quiero que nada más
+de momento me imprima ese dato.
+
+03:39.320 --> 03:45.720
+Entonces ya que está aquí, tengo un problema,
+ya está.
+
+03:45.720 --> 03:52.600
+Es el for await, entonces tenemos un por
+cada URL en el arreglo de URLs,
+
+03:52.600 --> 03:57.480
+empezamos aquí nuestra sintaxis, entonces
+tenemos la respuesta
+
+03:57.480 --> 04:02.680
+que se guarda en cada uno de los fetch que
+se va a hacer a cada una de las URLs,
+
+04:02.680 --> 04:09.240
+esta respuesta la vamos a convertir en
+JSON y entonces lo vamos a guardar en datos
+
+04:09.240 --> 04:11.560
+y vamos a imprimir
+datos.
+
+04:11.560 --> 04:17.000
+Si eso sale bien, entonces vamos a tener
+que ver como tres impresiones
+
+04:17.000 --> 04:19.480
+de cada una de los llamados que se hicieron.
+
+04:19.480 --> 04:27.080
+Ahora, si esto falla, pues de momento
+quiero que me traigas el error
+
+04:27.080 --> 04:32.760
+y esto lo vamos a
+imprimir.
+
+04:32.760 --> 04:35.320
+Error.
+
+04:35.320 --> 04:36.440
+Perfecto.
+
+04:36.440 --> 04:40.040
+Entonces aquí
+guardamos.
+
+04:40.040 --> 04:45.960
+Aquí nada más recordemos que el catch
+tiene que ir afuera del try,
+
+04:45.960 --> 04:49.960
+aquí está, aquí termina nuestro try,
+entonces aquí empieza el catch,
+
+04:49.960 --> 04:53.320
+perfecto, termina aquí el catch y aquí
+termina nuestra función.
+
+04:53.320 --> 04:57.480
+Entonces podemos guardar, venimos a
+nuestro promise
+
+04:57.480 --> 05:01.000
+y ya que estamos aquí, vamos a mandar
+llamar nuestra función.
+
+05:01.000 --> 05:06.600
+Fetch new
+data.
+
+05:06.600 --> 05:09.720
+Y perfecto, podemos ver como es una promesa,
+
+05:09.720 --> 05:16.200
+está como lista, perfecto, y tenemos cada
+una de las tres llamadas.
+
+05:16.200 --> 05:19.800
+Abrimos, vemos los resultados, tenemos
+aquí los personajes,
+
+05:19.800 --> 05:24.200
+la primera llamada fue para personajes,
+cerramos, abrimos,
+
+05:24.200 --> 05:27.560
+nuevo resultado, la segunda llamada fue
+para locaciones
+
+05:27.560 --> 05:31.560
+y tenemos aquí tierra y tenemos como lo
+que suele ser como locaciones,
+
+05:31.560 --> 05:36.840
+perfecto, esta llamada fue de episodios,
+abrimos, vamos a resultados
+
+05:36.840 --> 05:41.480
+y entonces aquí tenemos cada uno de los
+episodios de Rig and Marine.
+
+05:41.480 --> 05:44.840
+Y listo, ya con esto, esta es la forma en
+la cual tú puedes
+
+05:44.840 --> 05:49.880
+de un arreglo de ciertas APIs, hacer de
+forma síncrona
+
+05:49.880 --> 05:52.120
+las peticiones a cada una de estas APIs,
+
+05:52.120 --> 05:55.160
+que van a estar pasando de manera síncrona,
+esa es la parte importante,
+
+05:55.160 --> 05:58.360
+no vas a tener que bloquear, es regresarle
+algo al usuario
+
+05:58.360 --> 06:01.640
+o que el usuario esté esperando a que se
+terminen de cumplir tus peticiones,
+
+06:01.640 --> 06:04.440
+esto lo dejas de manera síncrona en tu
+promesa,
+
+06:04.440 --> 06:07.720
+tú puedes continuar cargando cosas de HTML
+y JavaScript
+
+06:07.720 --> 06:11.640
+y una vez que esta respuesta ya esté y la
+promesa se haya cumplido,
+
+06:11.640 --> 06:15.080
+entonces te lo regresa y ya tienes la
+información para empezar a
+
+06:15.080 --> 06:35.080
+inyectar temas en el DOM y empezar a
+cargar otro tipo de información al usuario.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/04-app_e835cf0c-719c-47e7-a782-0ca063e8d59b.js

@@ -0,0 +1,34 @@
+// function fetchData() {
+//   fetch("https://rickandmortyapi.com/api/character")
+//     .then((response) => response.json())
+//     .then((data) => console.log(data))
+//     .catch((error) => console.log(error));
+// }
+
+async function fetchData() {
+  try {
+    let response = await fetch("https://rickandmortyapi.com/api/character");
+    let data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.log("Error:", error);
+  }
+}
+
+const urls = [
+  "https://rickandmortyapi.com/api/character",
+  "https://rickandmortyapi.com/api/location",
+  "https://rickandmortyapi.com/api/episode",
+];
+
+async function fetchNewData() {
+  try {
+    for await (let url of urls) {
+      let response = await fetch(url);
+      let data = await response.json();
+      console.log(data.results);
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/05-Fundamentos de HTTP ClienteServidor y Métodos de Petición.mp4

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/05-Fundamentos de HTTP ClienteServidor y Métodos de Petición.vtt

@@ -0,0 +1,141 @@
+WEBVTT
+
+00:00.000 --> 00:06.240
+HTTP. Posiblemente has escuchado esta palabra.
+Y esto es muy importante entenderlo. Cuando estamos
+
+00:06.240 --> 00:10.400
+trabajando en el mundo del desarrollo web,
+ya sea backend o front, tenemos que entender bien
+
+00:10.400 --> 00:16.680
+cómo funciona HTTP, ya que esta es la base
+de cuando hablamos de algo que es cliente-servidor.
+
+00:16.680 --> 00:21.960
+Entiendas el cliente como un navegador,
+como tu computadora, como posiblemente algún celular,
+
+00:21.960 --> 00:26.480
+y el servidor que es el lugar donde se
+está hospedando prácticamente todo el proyecto que
+
+00:26.480 --> 00:31.940
+nosotros queremos tener acceso. La base
+del cliente-servidor es la opción que tiene el
+
+00:31.940 --> 00:37.600
+cliente de solicitar o enviar información
+al servidor y recibir una respuesta del servidor
+
+00:37.600 --> 00:43.440
+para que podamos hacer algo más, ya sea
+renderizar una página o actualizar nuestros datos o enviar
+
+00:43.440 --> 00:49.600
+información nueva. Pero ¿cómo funciona
+HTTP? Esto, como te comento, la parte de cliente-servidor
+
+00:49.600 --> 00:53.720
+casi siempre va a ser conectado a través
+de una URL. Cuando nosotros llegamos a nuestro
+
+00:53.720 --> 01:00.680
+navegador y colocamos platzi.com y le
+damos Enter, empezamos una petición a través de HTTP que va a
+
+01:00.680 --> 01:06.360
+llegar directamente al servidor que está
+hospedando Platzi para decirle, oye, necesito que me envíes
+
+01:06.360 --> 01:12.800
+esta información para poder hacerla
+renderizar a él o la usuaria en su navegador para que pueda
+
+01:12.800 --> 01:18.120
+empezar una interacción. Entonces
+empezamos una petición y esperamos una respuesta de parte del
+
+01:18.120 --> 01:22.520
+servidor. La respuesta puede ser como, claro,
+aquí tienes el proyecto completo, renderízalo,
+
+01:22.520 --> 01:28.920
+o es un, oye, no encontré lo que estás
+buscando y nos va a regresar un 404. Esto funciona a través
+
+01:28.920 --> 01:34.960
+de ciertos verbos. HTTP tiene ciertos
+verbos que nos van a ayudar a generar qué es lo que estamos
+
+01:34.960 --> 01:39.640
+buscando, cuál es el tipo de petición que
+nosotros queremos hacer o acción que nosotros queremos
+
+01:39.640 --> 01:45.000
+realizar. Estas peticiones son, por ejemplo,
+GET, que es cuando nosotros queremos obtener información.
+
+01:45.000 --> 01:51.800
+Cuando ponemos platzi.com, Enter, eso
+genera un GET, que es un, se conecta con el servidor y le dice,
+
+01:51.800 --> 01:57.480
+me puedes mandar esta información. Tenemos
+otro verbo que se llama POST, que posiblemente lo ha
+
+01:57.480 --> 02:03.440
+utilizado muchísimo en Facebook. Cuando
+querías postear algo que tú a lo mejor estabas viviendo,
+
+02:03.440 --> 02:09.080
+que querías compartir con el resto, esa
+parte de postear algo, lo que hace es un, toma la información
+
+02:09.080 --> 02:14.720
+que tú acabas de generar, que es
+información nueva, y genera un POST directamente en el servidor para
+
+02:14.720 --> 02:20.720
+decirle, oye, el usuario tal está
+guardando o está enviando esta información que es nueva para que la
+
+02:20.720 --> 02:27.000
+puedas guardar en su perfil, en su base de
+datos. Y cuando alguien llegara al perfil de este usuario
+
+02:27.000 --> 02:32.560
+y se metiera a verlo, generaba un GET de
+toda la información nueva y esa información que se
+
+02:32.560 --> 02:38.520
+acababa de guardar ya se puede visualizar.
+También tenemos el PATCH y el PUT, que es como,
+
+02:38.520 --> 02:44.160
+cómo actualizamos la información que ya
+existe en el navegador. Si yo de repente mando algún POST y
+
+02:44.160 --> 02:49.680
+hay algo que quiero corregir, puedo
+regresar ese POST y poner Editar, genero la edición y vuelvo
+
+02:49.680 --> 02:54.960
+a enviar esa petición nueva. No estoy
+generando contenido nuevo, simplemente estoy actualizando
+
+02:54.960 --> 03:00.240
+el contenido que ya existe con cosas nuevas.
+Por eso utilizamos el PATCH y el PUT. Y por último,
+
+03:00.240 --> 03:04.760
+tenemos un verbo que se llama DELETE,
+que es un, si de repente la fotografía que subí hace 10 años
+
+03:04.760 --> 03:09.600
+ya no me convence, simplemente puedo
+borrarla y es la petición que le enviamos al servidor para
+
+03:09.600 --> 03:22.600
+decir, oye, este elemento puedes borrarlo.
+

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

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y Análisis en Network.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:66c9f613d22a1fd27c186e3efd7ce945aeab81c825392d1d6d9cacf9ec6a4981
+size 55370686

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y Análisis en Network.vtt

@@ -0,0 +1,811 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+Hablemos de
+HTTP.
+
+00:02.000 --> 00:04.000
+Nosotros en la parte del
+front,
+
+00:04.000 --> 00:06.000
+hacemos ciertas peticiones, utilizamos
+APIs
+
+00:06.000 --> 00:08.000
+para poder pedir información, para
+poder
+
+00:08.000 --> 00:10.000
+enviar información o poder borrar información.
+
+00:10.000 --> 00:12.000
+Y eso lo estamos haciendo gracias
+a
+
+00:12.000 --> 00:14.000
+ciertos métodos de
+HTTP.
+
+00:14.000 --> 00:16.000
+Cuando ocupamos Fetch, por
+ejemplo,
+
+00:16.000 --> 00:18.000
+nosotros le estamos
+pidiendo
+
+00:18.000 --> 00:20.000
+a través de HTTP a
+un
+
+00:20.000 --> 00:22.000
+servidor que nos envíe
+cierta
+
+00:22.000 --> 00:24.000
+información para poder entonces
+agarrarla
+
+00:24.000 --> 00:26.000
+y poderla inyectar en el
+DOM.
+
+00:26.000 --> 00:28.000
+Vamos a ir aprendiendo entonces de
+inicio
+
+00:28.000 --> 00:30.000
+en la consola del
+navegador
+
+00:30.000 --> 00:32.000
+cómo nosotros podemos
+entender
+
+00:32.000 --> 00:34.000
+qué tipo de método estamos utilizando,
+
+00:34.000 --> 00:36.000
+cómo podemos entender qué tipo de
+información
+
+00:36.000 --> 00:38.000
+nos trae, cómo podemos
+entender
+
+00:38.000 --> 00:40.000
+de forma mucho más
+deep,
+
+00:40.000 --> 00:42.000
+cómo estamos manejando
+HTTP
+
+00:42.000 --> 00:44.000
+a través del front para poder
+manipular
+
+00:44.000 --> 00:46.000
+las llamadas del
+API,
+
+00:46.000 --> 00:48.000
+por ejemplo, para pedir información o para
+poder
+
+00:48.000 --> 00:50.000
+enviar información, o cómo yo puedo
+saber
+
+00:50.000 --> 00:52.000
+que lo que estoy enviando realmente se
+fue
+
+00:52.000 --> 00:54.000
+o lo que yo estoy pidiendo que se borre
+realmente
+
+00:54.000 --> 00:56.000
+se está borrando. Así que lo que
+vamos
+
+00:56.000 --> 00:58.000
+a estar aprendiendo ahorita
+es
+
+00:58.000 --> 01:00.000
+cómo utilizamos HTTP desde la
+parte
+
+01:00.000 --> 01:02.000
+del frontend. Aquí tenemos ya
+nuestro
+
+01:02.000 --> 01:04.000
+proyecto abierto. Tenemos
+un
+
+01:04.000 --> 01:06.000
+HTML sencillo que está
+generando
+
+01:06.000 --> 01:08.000
+como un pequeño
+formulario
+
+01:08.000 --> 01:10.000
+con algunos
+botones.
+
+01:10.000 --> 01:12.000
+Tenemos el CSS, todo esto lo vas a
+encontrar
+
+01:12.000 --> 01:14.000
+en recursos, eso es un poco más dinámico.
+
+01:14.000 --> 01:16.000
+Y lo que vamos a hacer
+ahorita
+
+01:16.000 --> 01:18.000
+es vamos a estar
+trabajando
+
+01:18.000 --> 01:20.000
+en el
+JavaScript.
+
+01:20.000 --> 01:22.000
+Y en la parte del JavaScript vamos a hacer
+una
+
+01:22.000 --> 01:24.000
+petición. Vamos a
+ocupar
+
+01:24.000 --> 01:26.000
+Fetch.
+
+01:26.000 --> 01:28.000
+Y en Fetch vamos a
+utilizar
+
+01:28.000 --> 01:30.000
+una
+API
+
+01:30.000 --> 01:32.000
+que nos va a ayudar a
+generar
+
+01:32.000 --> 01:34.000
+información. Voy a ponerla
+acá.
+
+01:34.000 --> 01:36.000
+Es una API
+que
+
+01:36.000 --> 01:38.000
+nos va a ayudar a generar información fake.
+
+01:38.000 --> 01:40.000
+Tú puedes tomar
+esta
+
+01:40.000 --> 01:42.000
+API y puedes como
+jugar
+
+01:42.000 --> 01:44.000
+con esta API que es un
+PressHolder.
+
+01:44.000 --> 01:46.000
+Nos regresa información fake,
+por
+
+01:46.000 --> 01:48.000
+ejemplo, de
+usuarios,
+
+01:48.000 --> 01:50.000
+de títulos,
+de
+
+01:50.000 --> 01:52.000
+ciertos blog posts y
+demás,
+
+01:52.000 --> 01:54.000
+para que tú puedas
+utilizarla.
+
+01:54.000 --> 01:56.000
+Y es lo que vamos a estar utilizando
+ahorita para poder
+
+01:56.000 --> 01:58.000
+hacer una petición. Ahora, cuando
+estamos
+
+01:58.000 --> 02:00.000
+hablando de HTTP, es
+importante
+
+02:00.000 --> 02:02.000
+poder conocer estos números. Por ejemplo,
+
+02:02.000 --> 02:04.000
+en ocasiones, cuando tú estás
+haciendo
+
+02:04.000 --> 02:06.000
+alguna petición, a lo mejor
+has
+
+02:06.000 --> 02:08.000
+visto que te regresa un
+404.
+
+02:08.000 --> 02:10.000
+Existen números con
+significados
+
+02:10.000 --> 02:12.000
+desde un 200, desde un
+300,
+
+02:12.000 --> 02:14.000
+desde un 400 y
+500.
+
+02:14.000 --> 02:16.000
+No tienes que sabértelo
+todo,
+
+02:16.000 --> 02:18.000
+por eso es bueno tener una referencia.
+
+02:18.000 --> 02:20.000
+Y en esta página vas a poder tener una
+referencia
+
+02:20.000 --> 02:22.000
+con datos de
+qué
+
+02:22.000 --> 02:24.000
+significa cada uno de
+estos
+
+02:24.000 --> 02:26.000
+números. Por ejemplo, cuando
+hablamos
+
+02:26.000 --> 02:28.000
+de un 200, quiere decir
+que
+
+02:28.000 --> 02:30.000
+todo está OK, la petición
+funcionó.
+
+02:30.000 --> 02:32.000
+Si nos vamos a
+un
+
+02:32.000 --> 02:34.000
+404,
+
+02:34.000 --> 02:36.000
+significa que lo que estamos
+buscando
+
+02:36.000 --> 02:38.000
+nos encontró. Entonces, si
+quieres
+
+02:38.000 --> 02:40.000
+profundizar un poco más en estos
+números
+
+02:40.000 --> 02:42.000
+que estamos viendo directamente de
+HTTP
+
+02:42.000 --> 02:44.000
+o que pueden
+venir
+
+02:44.000 --> 02:46.000
+en los headers, te dejo esta referencia.
+
+02:46.000 --> 02:48.000
+Ya
+que
+
+02:48.000 --> 02:50.000
+estamos aquí, entonces, venimos a
+nuestro
+
+02:50.000 --> 02:52.000
+Fetch y colocamos
+el
+
+02:52.000 --> 02:54.000
+API que vamos a utilizar.
+Particularmente
+
+02:54.000 --> 02:56.000
+yo voy a ir a los Posts, quiero
+la
+
+02:56.000 --> 02:58.000
+información. Ya que estamos
+ahí,
+
+02:58.000 --> 03:00.000
+damos
+esto,
+
+03:00.000 --> 03:02.000
+generamos
+nuestro
+
+03:02.000 --> 03:04.000
+then, y con nuestro
+then
+
+03:04.000 --> 03:06.000
+quiero que
+entonces
+
+03:06.000 --> 03:08.000
+la
+respuesta
+
+03:10.000 --> 03:12.000
+la convierte
+en
+
+03:12.000 --> 03:18.000
+response.so.json
+
+03:18.000 --> 03:20.000
+Y si esto
+funciona,
+
+03:20.000 --> 03:22.000
+entonces then, quiero
+que
+
+03:22.000 --> 03:24.000
+esta
+data
+
+03:26.000 --> 03:28.000
+me la
+imprima
+
+03:28.000 --> 03:30.000
+console.log
+
+03:30.000 --> 03:32.000
+y quiero que me imprima
+la
+
+03:32.000 --> 03:34.000
+data que me va a
+traer.
+
+03:34.000 --> 03:36.000
+Perfecto. En este
+momento,
+
+03:36.000 --> 03:38.000
+al yo
+darle
+
+03:38.000 --> 03:40.000
+Enter,
+
+03:40.000 --> 03:42.000
+al estar
+guardando,
+
+03:42.000 --> 03:44.000
+se está haciendo
+una
+
+03:44.000 --> 03:46.000
+petición. Y
+podemos
+
+03:46.000 --> 03:48.000
+ver que esta petición funciona, porque
+aquí ya me
+
+03:48.000 --> 03:50.000
+trae
+
+03:50.000 --> 03:52.000
+la información, la información de la
+cual
+
+03:52.000 --> 03:54.000
+desde la consola yo puedo
+ver
+
+03:54.000 --> 03:56.000
+y ya podría empezar a utilizar desde
+la
+
+03:56.000 --> 03:58.000
+parte del front, para empezar
+a
+
+03:58.000 --> 04:00.000
+desglosar
+este
+
+04:00.000 --> 04:02.000
+arreglo de
+objetos
+
+04:02.000 --> 04:04.000
+para empezar a traer ya
+sea
+
+04:04.000 --> 04:06.000
+la información del usuario, ya sea el título,
+
+04:06.000 --> 04:08.000
+ya sea la información
+que
+
+04:08.000 --> 04:10.000
+yo requiera para poder inyectar acá,
+
+04:10.000 --> 04:12.000
+que lo vamos a ver después. Entonces, ahorita,
+
+04:12.000 --> 04:14.000
+si no se estuviera
+imprimiendo
+
+04:14.000 --> 04:16.000
+aquí, ¿cómo puedo yo saber
+que
+
+04:16.000 --> 04:18.000
+existe esta interacción con el servidor?
+¿Cómo
+
+04:18.000 --> 04:20.000
+puedo yo saber cuál es la
+respuesta
+
+04:20.000 --> 04:22.000
+que me está dando? Y vamos a
+ir
+
+04:22.000 --> 04:24.000
+a otra parte, a otro
+segmento
+
+04:24.000 --> 04:26.000
+de la consola de navegador que se
+llama
+
+04:26.000 --> 04:28.000
+Network.
+
+04:28.000 --> 04:30.000
+Abrimos el
+Network
+
+04:30.000 --> 04:32.000
+y aquí en Network es
+donde
+
+04:32.000 --> 04:34.000
+podemos ver cómo suceden
+los
+
+04:34.000 --> 04:36.000
+request, cómo sucede todo, cómo
+se
+
+04:36.000 --> 04:38.000
+está cargando cada uno
+de
+
+04:38.000 --> 04:40.000
+los insumos que tiene mi página,
+desde
+
+04:40.000 --> 04:42.000
+la parte de HTML, la parte de
+CSS,
+
+04:42.000 --> 04:44.000
+cada una de las cosas que
+requiere
+
+04:44.000 --> 04:46.000
+mi proyecto, podemos
+ir
+
+04:46.000 --> 04:48.000
+viendo cómo se empiezan a
+cargar.
+
+04:48.000 --> 04:50.000
+Si yo
+refresco,
+
+04:50.000 --> 04:52.000
+podemos ver cómo
+se
+
+04:52.000 --> 04:54.000
+cargan como ciertos screenshots de la página,
+
+04:54.000 --> 04:56.000
+me pone ciertos números que me habla de
+la
+
+04:56.000 --> 04:58.000
+velocidad, el tiempo que
+tarda
+
+04:58.000 --> 05:00.000
+o que se demora en que yo pueda empezar a
+ver
+
+05:00.000 --> 05:02.000
+ciertas cosas, pero
+nosotros
+
+05:02.000 --> 05:04.000
+vamos a basar
+ahorita
+
+05:04.000 --> 05:06.000
+en estos archivos. Voy
+a
+
+05:06.000 --> 05:08.000
+ponerle en todos, para
+no
+
+05:08.000 --> 05:10.000
+filtrar y te vas a dar cuenta que
+hay
+
+05:10.000 --> 05:12.000
+mucha información aquí.
+Tenemos
+
+05:12.000 --> 05:14.000
+aquí la petición de HTML, tenemos
+aquí
+
+05:14.000 --> 05:16.000
+la petición de nuestro
+JavaScript,
+
+05:16.000 --> 05:18.000
+pero aquí viene una petición que me
+importa que se llama
+
+05:18.000 --> 05:20.000
+POST. Vemos
+que
+
+05:20.000 --> 05:22.000
+se está generando un método
+GET
+
+05:22.000 --> 05:24.000
+de HTML, vemos
+a
+
+05:24.000 --> 05:26.000
+qué URL se está enviando
+eso
+
+05:26.000 --> 05:28.000
+y de la URL, pues
+prácticamente
+
+05:28.000 --> 05:30.000
+es el API que yo
+estoy
+
+05:30.000 --> 05:32.000
+utilizando. Podemos ver que el
+status
+
+05:32.000 --> 05:34.000
+fue 200,
+podemos
+
+05:34.000 --> 05:36.000
+ver aquí que el tipo
+fue
+
+05:36.000 --> 05:38.000
+PITCH, fue prácticamente lo que yo
+utilicé
+
+05:38.000 --> 05:40.000
+y que se está inicializando en
+nuestro
+
+05:40.000 --> 05:42.000
+JavaScript. Aquí incluso podemos
+ver
+
+05:42.000 --> 05:44.000
+el tiempo que
+demora
+
+05:44.000 --> 05:46.000
+en que tengamos la
+respuesta
+
+05:46.000 --> 05:48.000
+de esta
+petición.
+
+05:48.000 --> 05:50.000
+Ahora, si yo le doy click aquí en POST,
+
+05:50.000 --> 05:52.000
+puedo ver la parte
+de
+
+05:52.000 --> 05:54.000
+el PREVIEW, que es lo que me regresa,
+que esto
+
+05:54.000 --> 05:56.000
+también lo puedo ver en la consola
+de
+
+05:56.000 --> 05:58.000
+navegador, es lo que le estoy
+pidiendo
+
+05:58.000 --> 06:00.000
+a la petición que me
+regrese
+
+06:00.000 --> 06:02.000
+una vez que yo
+le
+
+06:02.000 --> 06:04.000
+pongo el
+console.log.data
+
+06:04.000 --> 06:06.000
+podemos ver la
+respuesta
+
+06:06.000 --> 06:08.000
+que entonces ya esto
+sería
+
+06:08.000 --> 06:10.000
+nuestro JSON, que es como
+viene
+
+06:10.000 --> 06:12.000
+la estructura de los datos en
+un
+
+06:12.000 --> 06:14.000
+JSON, pero me interesa el
+header.
+
+06:14.000 --> 06:16.000
+En el header puedo ver
+como
+
+06:16.000 --> 06:18.000
+a qué URL le hice esa
+petición.
+
+06:18.000 --> 06:20.000
+Le puedo ver, por
+ejemplo,
+
+06:20.000 --> 06:22.000
+qué tipo de método
+utilicé.
+
+06:22.000 --> 06:24.000
+FETCH, cuando
+nosotros
+
+06:24.000 --> 06:26.000
+utilizamos FETCH por
+defecto,
+
+06:26.000 --> 06:28.000
+FETCH utiliza siempre el
+GET.
+
+06:28.000 --> 06:30.000
+Lo que va a intentar hacer
+FETCH
+
+06:30.000 --> 06:32.000
+siempre por defecto,
+es
+
+06:32.000 --> 06:34.000
+lanzar una
+petición
+
+06:34.000 --> 06:36.000
+al servidor, va a intentar hacer
+siempre
+
+06:36.000 --> 06:38.000
+un GET. Y podemos ver que
+el
+
+06:38.000 --> 06:40.000
+status fue un 200,
+porque
+
+06:40.000 --> 06:42.000
+nosotros tuvimos la respuesta, que lo
+estamos
+
+06:42.000 --> 06:44.000
+viendo aquí. En
+este
+
+06:44.000 --> 06:46.000
+momento, nosotros ya
+estamos
+
+06:46.000 --> 06:48.000
+teniendo
+control
+
+06:48.000 --> 06:50.000
+de HTTP. Aquí
+podemos
+
+06:50.000 --> 06:52.000
+ver que ya estamos haciendo
+un
+
+06:52.000 --> 06:54.000
+GET, a qué tipo de
+URL
+
+06:54.000 --> 06:56.000
+estamos haciendo esa petición, y
+cuál
+
+06:56.000 --> 06:58.000
+fue el status
+de
+
+06:58.000 --> 07:00.000
+esa petición. Y podemos ver de
+igual
+
+07:00.000 --> 07:26.000
+forma qué es lo que nos
+regresa.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/06-app_954bf774-9dc6-4b66-b9bb-9935d30de91d.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/07-Lecturas recomendadas.txt

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.mp4

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.vtt

@@ -0,0 +1,631 @@
+WEBVTT
+
+00:00.000 --> 00:05.560
+Veamos entonces cómo podemos hacer una
+petición y empezar a interactuar con lo
+
+00:05.560 --> 00:09.100
+que nos trae esa petición. Vamos a venir aquí,
+vamos a hacer un poco
+
+00:09.100 --> 00:17.060
+más chico nuestro editor. Venimos a
+nuestro navegador. Ok. Aquí tienes el HTML.
+
+00:17.060 --> 00:23.620
+Vamos a cerrarlo y venimos aquí a nuestro
+JavaScript. Con nuestro JavaScript, lo
+
+00:23.620 --> 00:27.540
+primero que queremos hacer es, ya que
+tenemos una petición, acabamos de hacer
+
+00:27.540 --> 00:32.980
+un fetch, vamos a ver de qué forma podemos
+escalar más. Si vamos a estar
+
+00:32.980 --> 00:38.980
+haciendo diferentes peticiones como un GET,
+tipo un GET, tipo un POST, tipo un DELETE,
+
+00:38.980 --> 00:43.340
+de qué forma podemos ir escalando cada una
+de estas peticiones. Lo que yo haría
+
+00:43.340 --> 00:49.500
+sería empezaríamos con una función que se
+va a llamar,
+
+00:49.500 --> 01:01.460
+por ejemplo, sendHttpRequest. Y esta va a
+ser la función que mandaríamos llamar
+
+01:01.460 --> 01:06.540
+para poder hacer las peticiones. Esta
+función va a llevar
+
+01:06.540 --> 01:12.020
+tres parámetros. El primer parámetro va a
+ser el método, el método que se va a
+
+01:12.020 --> 01:17.500
+utilizar. El segundo parámetro va a ser la
+URL, con la cual le vamos a hacer como
+
+01:17.500 --> 01:24.660
+esa petición. Y el tercer parámetro va a
+ser el tipo de dato que vamos a enviar.
+
+01:24.900 --> 01:31.660
+Perfecto. Entonces, ahora con esto, lo que
+vamos a hacer es, vamos a poner
+
+01:31.660 --> 01:39.900
+return y vamos a generar un fetch. Y el
+fetch va a llevar de inicio
+
+01:39.900 --> 01:44.540
+la URL que le vamos a pasar, que va a ser
+el parámetro cuando mandemos llamar
+
+01:44.540 --> 01:49.980
+nuestra función, a qué URL le vamos a
+hacer el fetch.
+
+01:49.980 --> 01:54.300
+Y aquí vamos a estructurar de forma
+distinta
+
+01:54.300 --> 01:58.740
+qué es lo que vamos a utilizar para el fetch.
+Vamos a poner
+
+01:58.740 --> 02:04.260
+ahora el tipo de método que vamos a utilizar.
+Y esto va a ser
+
+02:04.260 --> 02:12.020
+igual a el método. Bien, ahora la
+estructura del request
+
+02:12.020 --> 02:17.780
+trae un body y trae un header. En el body,
+por ejemplo, cuando nosotros
+
+02:17.780 --> 02:21.740
+hacemos un post, tenemos que enviar la
+información que estamos enviando
+
+02:21.740 --> 02:28.980
+directamente al servidor. Esto iría en el
+body del request. Y la forma de enviar
+
+02:28.980 --> 02:33.020
+es un JSON
+punto
+
+02:33.900 --> 02:39.420
+stringify
+data.
+
+02:39.420 --> 02:45.740
+Que lo que hace el stringify es convierte
+el objeto de yes en JSON.
+
+02:45.740 --> 02:51.980
+Y ahora el tipo de header, que son los
+headers del request, que es lo que vamos
+
+02:51.980 --> 02:57.140
+a estar enviando. Y aquí en la parte de
+los headers, hay cierta información que
+
+02:57.140 --> 03:01.500
+se está guardando. Pero de inicio, la
+información que yo le voy a decir
+
+03:01.500 --> 03:08.500
+que vamos a enviar, es vamos a enviar un JSON,
+un tipo de contenido en
+
+03:08.500 --> 03:13.500
+JSON, para que se sepa cómo tratar el
+contenido o la data que vamos a enviar
+
+03:13.500 --> 03:18.060
+nosotros. Y eso se hace de esta forma.
+
+03:18.220 --> 03:22.220
+Content
+type.
+
+03:22.300 --> 03:30.540
+Y aquí le decimos que es un application
+slash JSON.
+
+03:30.540 --> 03:34.540
+Perfecto. Entonces aquí estamos enviando
+la
+
+03:34.540 --> 03:39.660
+url, que nos van a pasar como parámetro
+una vez que pongamos la función. Y aquí
+
+03:39.660 --> 03:44.540
+le estamos enviando todos los metadatos
+que requiere ser request. El tipo de
+
+03:44.540 --> 03:49.460
+método, lo que viene en el body, si aplica
+y cuáles van a ser los headers
+
+03:49.460 --> 03:54.020
+que vamos a estar enviando. Súper bien.
+Ya que tenemos eso,
+
+03:54.020 --> 03:57.380
+ahora vamos a enviar, como estamos
+utilizando un fetch, y esto es una
+
+03:57.380 --> 04:03.540
+promesa, vamos a utilizar el den, para que
+el den nos regrese la respuesta.
+
+04:03.540 --> 04:07.740
+Porque lo que estamos haciendo aquí es
+enviando el request y queremos que nos
+
+04:07.740 --> 04:11.820
+regrese una respuesta, para que cuando
+utilicemos esta función, tengamos los
+
+04:11.820 --> 04:20.420
+datos de esa respuesta. Entonces aquí sea
+response, y eso va a ser igual a,
+
+04:20.500 --> 04:27.620
+queremos que, return, que nos regrese la
+respuesta.
+
+04:28.300 --> 04:33.380
+Para que entonces ya con esto, nosotros
+podamos hacer algo. Ok, Zoom, ya que
+
+04:33.380 --> 04:37.100
+tenemos esta respuesta, podemos empezar a
+trabajarla en la parte de front, para
+
+04:37.100 --> 04:42.380
+inyectarla en nuestro HTML. Bien, vamos a
+guardar.
+
+04:42.380 --> 04:47.540
+Y ahora, ya que estamos aquí, ya que
+tenemos la estructura de cómo vamos a
+
+04:47.540 --> 04:52.700
+estar haciendo las las los request de HTTP,
+vamos a empezar entonces con el
+
+04:52.700 --> 04:58.740
+request, que va a darle interacción a este
+botón. Este botón lo que va a hacer
+
+04:58.740 --> 05:03.940
+es, al momento de dar un getContent,
+lo que yo esperaría es que se genere ese
+
+05:03.940 --> 05:08.220
+request en el servidor y me traiga la
+información, que es lo que estuvimos
+
+05:08.220 --> 05:12.420
+viendo. Al estar utilizando un fetch,
+podemos imprimir en la consola como una
+
+05:12.420 --> 05:18.060
+respuesta. Entonces vamos acá, y vamos a
+generar otra función,
+
+05:18.380 --> 05:26.700
+que se va a llamar fetchPost. Lo que
+queremos es que nos traiga, como los
+
+05:26.700 --> 05:32.500
+post que utilizamos en nuestra URL. Esta
+función no va a llevar ningún tipo de
+
+05:32.500 --> 05:36.460
+parámetro, porque toda la lógica va a
+estar acá adentro. Y vamos a utilizar una
+
+05:36.460 --> 05:44.460
+función async, para no estar bloqueando
+las cargas que tenemos en el navegador y
+
+05:44.460 --> 05:47.700
+dar una buena experiencia con relación al
+tiempo de carga que tenga nuestra
+
+05:47.700 --> 05:52.220
+aplicación. Entonces estamos aquí, lo que
+vamos a hacer ahora es generar una
+
+05:52.220 --> 06:03.780
+constante que se va a llamar responseData,
+que va a ser igual a await
+
+06:03.780 --> 06:08.100
+de esta función. Aquí es donde vamos a
+hacer nosotros como el fetch,
+
+06:08.100 --> 06:14.020
+prácticamente. Entonces para eso le
+ponemos sendHttpRequest, como si
+
+06:14.020 --> 06:20.260
+hiciéramos un fetch, pero este es como
+nuestro fetch. Y aquí vamos a ponerle el
+
+06:20.260 --> 06:26.900
+tipo de método. Queremos que hagas un get,
+
+06:26.900 --> 06:32.620
+que como te comento, fetch por default
+siempre va a ser un get, pero como aquí
+
+06:32.620 --> 06:37.820
+estamos haciendo una función que vamos a
+reutilizar, vamos a ser específicos en
+
+06:37.820 --> 06:41.420
+lo que estamos buscando. Entonces queremos
+que hagas un fetch, y queremos que el
+
+06:41.420 --> 06:47.100
+fetch lo hagas a la URL de que estábamos
+utilizando, para poder traer los
+
+06:47.100 --> 06:53.980
+diferentes posts. Le damos un coma y vamos
+a pegar esta URL.
+
+06:53.980 --> 06:58.220
+Y la URL tiene que ir con
+comillas.
+
+06:58.380 --> 07:02.380
+Perfecto. Entonces de esta función, como
+estamos haciendo nosotros un get, le
+
+07:02.380 --> 07:07.340
+estamos diciendo, queremos que hagas un
+get a esta URL, haz el fetch y me
+
+07:07.340 --> 07:12.740
+regresas la respuesta. Super bien.
+Entonces ya con eso, lo que yo esperaría
+
+07:12.740 --> 07:20.260
+que pasar aquí es un
+console.log
+
+07:20.260 --> 07:24.460
+y quiero que me imprima esta respuesta.
+Quiero que me imprima lo que nos va a
+
+07:24.460 --> 07:30.540
+regresar nuestra función de fetch.
+Entonces si guardamos, solucionamos
+
+07:30.540 --> 07:35.060
+teType o antes de que nos quede el problema,
+json,
+
+07:35.060 --> 07:40.020
+y venimos aquí a nuestro navegador, vamos
+a nuestra consola, y lo que
+
+07:40.020 --> 07:45.220
+tenemos que hacer ahora es nada más mandar
+llamar nuestra función, que se va
+
+07:45.220 --> 07:51.900
+a encargar de generar el request. Perfecto.
+Nos dice que es una promesa y
+
+07:51.900 --> 07:57.220
+nos dice aquí, más bien ya nos trae la
+respuesta. Por esta parte, ok, vamos
+
+07:57.220 --> 08:01.100
+directamente a nuestro network, que es
+donde me interesa, porque estamos
+
+08:01.100 --> 08:06.300
+haciendo uso
+de...
+
+08:06.300 --> 08:11.780
+Entonces aquí podemos ver que se hizo
+nuestro request de fetch. Estamos en un
+
+08:11.780 --> 08:18.140
+status 200 a la URL. Entonces abrimos el post.
+Este es el preview de lo que nos
+
+08:18.140 --> 08:23.900
+regresa. Cuando estemos trabajando con
+request en APIs, esta es la pantalla
+
+08:23.900 --> 08:27.260
+donde tenemos que pasar nuestro mayor tiempo.
+Por aquí es donde realmente
+
+08:27.260 --> 08:30.900
+podemos ver qué es lo que está pasando.
+Si las cosas no funcionan, si las cosas
+
+08:30.900 --> 08:34.580
+funcionan, si el request de ahora no está
+funcionando de la forma esperada, aquí vamos a saber
+
+08:34.580 --> 08:40.100
+qué es lo que está pasando. Entonces, listo,
+con esto ya tenemos la
+
+08:40.100 --> 08:47.140
+información. Bien, si venimos acá, ¿qué es
+el siguiente paso?
+
+08:47.140 --> 08:51.300
+El siguiente paso sería tomar esta respuesta.
+Como podemos ver, esta respuesta
+
+08:51.300 --> 08:56.060
+nos regresa un arreglo de diferentes
+objetos y de aquí tenemos que extraer
+
+08:56.060 --> 09:00.380
+la información para poder imprimir el título,
+para poder imprimir el contenido.
+
+09:00.380 --> 09:05.620
+Nos trae por ejemplo el título y el body
+del post y nos trae un ID. Esto es lo que
+
+09:05.620 --> 09:10.100
+nosotros queremos imprimir e inyectar
+directamente en nuestro HTML con
+
+09:10.100 --> 09:15.660
+JavaScript. Entonces lo que yo tendría que
+hacer ahorita sería, de inicio,
+
+09:15.660 --> 09:21.660
+podría generar una nueva constante para
+mantener limpia la respuesta que me trae
+
+09:21.660 --> 09:25.660
+el navegador o más bien el servidor.
+Podría generar una nueva constante que se llama
+
+09:25.660 --> 09:33.620
+list of posts, para ser mucho más claro,
+que sea igual a esta respuesta. Y así yo
+
+09:33.620 --> 09:40.060
+no modifico esta variable. Y ahora con eso,
+lo primero que yo tendría que hacer
+
+09:40.060 --> 09:47.300
+es, como me está llegando a mí un objeto,
+me está llegando... vamos acá...
+
+09:47.300 --> 09:51.300
+para poderlo ver... cierro un poquito aquí...
+
+09:51.300 --> 09:57.380
+ok, aquí me está llegando un arreglo.
+Si yo pongo console y mando a llamar otra
+
+09:57.380 --> 10:03.420
+vez mi función, me está llegando un
+arreglo de diferentes objetos y lo que
+
+10:03.420 --> 10:09.220
+yo quiero hacer es imprimir cada uno de
+estos objetos
+
+10:09.220 --> 10:15.460
+en mi HTTP. La forma de hacerlo es, tengo
+que iterar, tengo que
+
+10:15.460 --> 10:19.580
+iterar este arreglo, para que entonces por
+cada uno de los objetos de ese
+
+10:19.580 --> 10:24.780
+arreglo, yo pueda empezar a extraer la
+información e inyectarla en el HTML.
+
+10:24.780 --> 10:29.740
+Entonces, yo ya tengo como cierto código
+listo. Lo que voy a hacer es
+
+10:29.740 --> 10:33.900
+copiar y pegar y te lo voy a explicar en
+este momento.
+
+10:33.900 --> 10:38.380
+Entonces aquí yo voy a copiar este código.
+Este código lo estoy copiando
+
+10:38.380 --> 10:43.580
+porque esto es algo que tú ya sabes hacer.
+Si tienes dudas con parte de este
+
+10:43.580 --> 10:47.060
+código, te recomiendo que puedas reforzar
+tus conocimientos en el tema de
+
+10:47.060 --> 10:51.020
+manipulación del DOM, en la parte de crear
+y manipular elementos con
+
+10:51.020 --> 10:56.020
+JavaScript. Pero vamos a ver aquí entonces
+qué estamos haciendo. Estamos generando
+
+10:56.020 --> 11:03.980
+un for-off para poder iterar sobre el
+arreglo de objetos que nos trae.
+
+11:03.980 --> 11:08.540
+Entonces lo que le estamos pidiendo es que
+por cada post que venga en la lista de post,
+
+11:08.540 --> 11:14.980
+lo que tienes que hacer es lo siguiente.
+Ahora, post container, aquí estamos
+
+11:14.980 --> 11:19.940
+generando un nuevo elemento con
+createElement que se
+
+11:19.940 --> 11:26.780
+llama un article. A este nuevo elemento le
+estamos generando un ID y una clase
+
+11:26.780 --> 11:31.260
+para que pueda hacer match con el CSS que
+tenemos. De igual forma estamos
+
+11:31.260 --> 11:36.100
+generando un título y le estamos poniendo
+el título con el contenido de
+
+11:36.100 --> 11:43.020
+texto que viene en el post, en el title.
+Si venimos aquí a nuestro request
+
+11:43.020 --> 11:46.860
+y lo mandamos llamar con nuestra función,
+
+11:46.860 --> 11:52.940
+podemos ver un poco la estructura que nos
+trae. Dentro de la estructura si viene el
+
+11:52.940 --> 11:57.900
+título, viene el título y el cuerpo.
+Entonces también aquí estamos generando
+
+11:57.900 --> 12:03.060
+por ejemplo el body que va a ser
+referencia a esta parte y estamos aquí
+
+12:03.060 --> 12:08.020
+poniéndole el contenido de texto con el
+punto body que viene en este objeto.
+
+12:08.020 --> 12:13.580
+Estamos generando un botón y este botón va
+a tener el texto de borrar, borrar
+
+12:13.580 --> 12:18.020
+contenido y aquí nada más estamos haciendo
+un append y el append lo estamos
+
+12:18.020 --> 12:23.660
+haciendo a el listElement que eso hace
+referencia a un contenedor que viene en
+
+12:23.660 --> 12:30.900
+nuestro HTML. Ahora lo que tenemos que
+hacer es, tenemos que con JavaScript y
+
+12:30.900 --> 12:33.860
+eso lo voy a poner aquí
+arriba.
+
+12:33.860 --> 12:39.500
+Perfecto, entonces aquí estamos generando
+las variables de cada uno de
+
+12:39.500 --> 12:43.100
+nuestros elementos y con JavaScript los
+estamos seleccionando para poderlos
+
+12:43.100 --> 12:48.460
+guardar. Entonces aquí teníamos el
+listElement que le estamos haciendo
+
+12:48.460 --> 12:53.700
+referencia aquí y estamos pidiendo que
+esto que acabamos de generar lo pueda
+
+12:53.700 --> 13:00.620
+inyectar en un append a listElement.
+Todo esto es parte de, por ejemplo aquí el
+
+13:00.620 --> 13:05.380
+body y el title lo estamos poniendo
+prácticamente en el post container que
+
+13:05.380 --> 13:09.580
+es como el contenedor de una tarjeta y esa
+tarjeta completa la estamos
+
+13:09.580 --> 13:16.660
+agregando a nuestra como lista de
+elementos que si abrimos nuestro HTML
+
+13:16.660 --> 13:20.420
+va a ser el contenedor donde se van a guardar.
+Super bien, entonces vamos a
+
+13:20.420 --> 13:26.980
+guardar esto, ¿qué nos faltaría? Nos falta
+poder como imprimir, al momento de que yo
+
+13:26.980 --> 13:31.860
+haga clic en este botón, lo que yo quiero
+que haga es que este botón haga el
+
+13:31.860 --> 13:37.380
+request get y cuando me traiga esa
+información aparezca visualmente acá.
+
+13:37.380 --> 13:42.260
+Entonces lo que tenemos que hacer es
+tenemos que generar esa interacción con
+
+13:42.260 --> 13:48.340
+JavaScript, tenemos que ponerle ese evento
+a ese botón. Entonces ya tenemos aquí el
+
+13:48.340 --> 13:57.940
+botón se llama fetchButton, vamos a
+ponerlo acá, fetchButton.asksHeavenListener
+
+13:57.940 --> 14:03.300
+y queremos que esto suceda con un clic.
+
+14:04.060 --> 14:09.620
+Perfecto y una vez que suceda el clic que
+manda a llamar nuestra función de
+
+14:09.620 --> 14:13.580
+fetchPost.
+
+14:13.580 --> 14:20.580
+Con esto guardamos y si todo funciona al
+momento de darle getContent
+
+14:20.580 --> 14:24.580
+podemos ver cómo automáticamente se
+empiezan a cargar cada uno de nuestros
+
+14:24.580 --> 14:44.580
+posts.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/07-app_3019584a-adf8-4ac8-80e4-de2a4c7532bc.js

@@ -0,0 +1,49 @@
+const listElement = document.querySelector(".posts");
+const postTemplate = document.getElementById("single-post");
+const form = document.querySelector("#new-post form");
+const fetchButton = document.querySelector("#available-posts button");
+const postList = document.querySelector("#posts-container");
+
+function sendHTTPRequest(method, url, data) {
+  return fetch(url, {
+    method: method,
+    body: JSON.stringify(data),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+async function fecthPosts() {
+  const responseData = await sendHTTPRequest(
+    "GET",
+    "https://jsonplaceholder.typicode.com/posts"
+  );
+  console.log(responseData);
+  const listOfPosts = responseData;
+
+  for (const post of listOfPosts) {
+    const postContainer = document.createElement("article");
+    postContainer.id = post.id;
+    postContainer.classList.add("post-item");
+
+    const title = document.createElement("h2");
+    title.textContent = post.title;
+
+    const body = document.createElement("p");
+    body.textContent = post.body;
+
+    const button = document.createElement("button");
+    button.textContent = "DELETE Content";
+
+    postContainer.append(title);
+    postContainer.append(body);
+    postContainer.append(button);
+
+    listElement.append(postContainer);
+  }
+}
+
+fetchButton.addEventListener("click", fecthPosts);

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Envío de Datos al Servidor con JavaScript y Fetch API.mp4

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-Envío de Datos al Servidor con JavaScript y Fetch API.vtt

@@ -0,0 +1,696 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+Ya tenemos aquí nuestros
+posts.
+
+00:02.000 --> 00:04.000
+Ahora, lo que queremos hacer nosotros,
+
+00:04.000 --> 00:08.000
+es al momento de que yo pueda llenar aquí
+un título,
+
+00:08.000 --> 00:11.000
+y algo de
+contenido,
+
+00:11.000 --> 00:14.000
+y pongamos post
+content,
+
+00:14.000 --> 00:16.000
+esto tendría que enviar un
+post,
+
+00:16.000 --> 00:19.000
+que en HTTP, los verbos de
+HTTP,
+
+00:19.000 --> 00:22.000
+esto es poder enviar información
+directamente al servidor,
+
+00:22.000 --> 00:24.000
+y que esta información que yo estoy
+llenando aquí,
+
+00:24.000 --> 00:26.000
+realmente se
+envíe.
+
+00:26.000 --> 00:28.000
+De inicio tenemos que evitar que este
+comportamiento,
+
+00:28.000 --> 00:30.000
+de que se refresca la
+página,
+
+00:30.000 --> 00:32.000
+cada que le doy clic,
+suceda.
+
+00:32.000 --> 00:34.000
+Vamos a ir con
+JavaScript.
+
+00:34.000 --> 00:36.000
+Pero también tenemos que tomar la
+información de acá,
+
+00:36.000 --> 00:39.000
+guardarla, y enviarla en el request.
+
+00:39.000 --> 00:41.000
+Para que podamos ver
+aquí,
+
+00:41.000 --> 00:45.000
+una vez que apretemos este botón de post
+content,
+
+00:45.000 --> 00:48.000
+podamos ver como se hizo una petición más,
+
+00:48.000 --> 00:51.000
+podamos ver que esa petición está pasando
+en post,
+
+00:51.000 --> 00:53.000
+y que es lo que se está
+enviando.
+
+00:53.000 --> 00:55.000
+Así que, vamos para
+allá.
+
+00:55.000 --> 00:57.000
+Estamos aquí en nuestro
+JavaScript,
+
+00:57.000 --> 01:00.000
+y vamos a empezar con otra
+función,
+
+01:00.000 --> 01:04.000
+que se va a llamar
+createPost.
+
+01:04.000 --> 01:06.000
+Y va a tener dos
+parámetros,
+
+01:06.000 --> 01:08.000
+que es el
+título,
+
+01:08.000 --> 01:11.000
+y el
+content.
+
+01:11.000 --> 01:13.000
+Perfecto.
+
+01:13.000 --> 01:16.000
+Estando aquí, vamos a
+examinar,
+
+01:16.000 --> 01:20.000
+un poco la
+estructura,
+
+01:20.000 --> 01:23.000
+de los posts que se están
+enviando.
+
+01:23.000 --> 01:25.000
+Si vemos aquí el
+response,
+
+01:25.000 --> 01:27.000
+que tiene que enviar el
+título,
+
+01:27.000 --> 01:29.000
+vemos que tiene que enviar el cuerpo,
+
+01:29.000 --> 01:32.000
+que será el título, y el contenido va a
+ser el cuerpo.
+
+01:32.000 --> 01:35.000
+Pero vemos aquí que viene un ID, y un User ID.
+
+01:35.000 --> 01:38.000
+Nosotros tendríamos que enviar un User ID,
+
+01:38.000 --> 01:41.000
+para poder hacer match un poco con la
+estructura.
+
+01:41.000 --> 01:43.000
+Pudiéramos enviar el
+ID,
+
+01:43.000 --> 01:46.000
+pero de inicio, con que nosotros creemos
+un User ID,
+
+01:46.000 --> 01:49.000
+va a ser importante, para poderlo enviar,
+
+01:49.000 --> 01:51.000
+y que no rompa la
+estructura,
+
+01:51.000 --> 01:54.000
+de lo que estaría esperando el servidor de
+esta API.
+
+01:54.000 --> 01:56.000
+Para poder hacer
+eso,
+
+01:56.000 --> 01:59.000
+nosotros no vamos a poder generar un
+número distinto,
+
+01:59.000 --> 02:02.000
+por cada uno de los posts que se vaya
+generando.
+
+02:02.000 --> 02:06.000
+Así que, voy a, de manera
+rápida,
+
+02:06.000 --> 02:10.000
+generar una constante que se llame User ID,
+
+02:10.000 --> 02:14.000
+que va a ser igual a un match random,
+
+02:14.000 --> 02:18.000
+que me vaya a generar un número de manera
+aleatoria,
+
+02:18.000 --> 02:21.000
+que se va a convertir en este User ID.
+
+02:21.000 --> 02:23.000
+Ya lo tenemos acá.
+Perfecto.
+
+02:23.000 --> 02:26.000
+Entonces, aquí tenemos que hacer esa
+pequeña estructura,
+
+02:26.000 --> 02:28.000
+ese pequeño objeto que vamos a enviar,
+
+02:28.000 --> 02:30.000
+y se va a llamar
+post.
+
+02:30.000 --> 02:32.000
+Este es el post que vamos a estar enviando.
+
+02:32.000 --> 02:34.000
+El post va a tener un
+title,
+
+02:34.000 --> 02:36.000
+que va a ser igual al
+title,
+
+02:36.000 --> 02:41.000
+que va a venir prácticamente de lo que
+obtengamos
+
+02:41.000 --> 02:44.000
+de nuestro input, pero se va a inyectar aquí,
+
+02:44.000 --> 02:46.000
+en nuestra
+función.
+
+02:46.000 --> 02:48.000
+Vamos a tener un
+body,
+
+02:48.000 --> 02:52.000
+que va a ser referencia al
+content,
+
+02:52.000 --> 02:56.000
+que estamos nosotros utilizando aquí en
+nuestra función,
+
+02:56.000 --> 02:59.000
+como parámetro, y el User
+ID,
+
+02:59.000 --> 03:02.000
+que se está generando de manera aleatoria,
+
+03:02.000 --> 03:04.000
+con un match
+random.
+
+03:04.000 --> 03:06.000
+User ID.
+Perfecto.
+
+03:06.000 --> 03:08.000
+Entonces, teniendo
+eso,
+
+03:08.000 --> 03:10.000
+tenemos la pequeña
+estructura
+
+03:10.000 --> 03:13.000
+de lo que se va a enviar al servidor.
+
+03:13.000 --> 03:15.000
+¿Qué nos
+falta?
+
+03:15.000 --> 03:18.000
+Esta función vamos a hacerla
+async.
+
+03:18.000 --> 03:20.000
+Muy
+bien.
+
+03:20.000 --> 03:22.000
+Entonces, ahora,
+aquí,
+
+03:22.000 --> 03:24.000
+tenemos que hacer ese
+request.
+
+03:24.000 --> 03:26.000
+Y para poder hacer ese
+request,
+
+03:26.000 --> 03:29.000
+vamos a mandar llamar nuestra
+función
+
+03:31.000 --> 03:34.000
+para que se genere el
+fetch.
+
+03:35.000 --> 03:38.000
+Entonces, aquí, ponemos esta función.
+
+03:38.000 --> 03:43.000
+El método, aquí le vamos a pedir que ahora
+sea un post.
+
+03:43.000 --> 03:47.000
+Ese va a ser el método que vamos a estar
+utilizando.
+
+03:47.000 --> 03:50.000
+La URL va a ser la misma
+URL
+
+03:50.000 --> 03:53.000
+que estamos utilizando para ese ejercicio.
+
+03:53.000 --> 03:56.000
+Entonces, vamos a utilizar esta misma
+URL
+
+03:56.000 --> 03:59.000
+para que pueda enviar un
+post.
+
+03:59.000 --> 04:02.000
+Entonces, aquí ponemos, y tenemos la misma
+URL.
+
+04:02.000 --> 04:04.000
+Y los datos que vamos a
+enviar,
+
+04:04.000 --> 04:07.000
+porque en este caso, como estamos enviando
+un post,
+
+04:07.000 --> 04:09.000
+sí tiene que ir un
+body,
+
+04:09.000 --> 04:12.000
+porque el body habla de la información que
+estamos enviando.
+
+04:12.000 --> 04:14.000
+En este caso, va a ser
+post.
+
+04:14.000 --> 04:17.000
+Esta es la información que nosotros vamos
+a enviar.
+
+04:18.000 --> 04:19.000
+Perfecto.
+
+04:19.000 --> 04:21.000
+Entonces, con esto ya tenemos la
+estructura
+
+04:21.000 --> 04:24.000
+de la función que va a estar enviando el
+request
+
+04:24.000 --> 04:28.000
+con la información para poder generar un
+nuevo blog post.
+
+04:28.000 --> 04:29.000
+¿Qué nos
+faltaría?
+
+04:29.000 --> 04:34.000
+Nos falta ahora generar el evento en este
+botón.
+
+04:34.000 --> 04:38.000
+Entonces, este botón se llama, vamos a
+ponerlo aquí,
+
+04:38.000 --> 04:40.000
+lo tenemos por
+acá.
+
+04:41.000 --> 04:43.000
+Entonces, está aquí, es el
+form.
+
+04:43.000 --> 04:45.000
+Vamos a estar utilizando el
+form.
+
+04:45.000 --> 04:47.000
+Podemos ver que la estructura es un new post,
+
+04:47.000 --> 04:51.000
+que es el contenedor en donde existe el form.
+
+04:51.000 --> 04:54.000
+Y al form le vamos a agregar el evento de
+submit
+
+04:54.000 --> 04:56.000
+para que se pueda enviar la
+información
+
+04:56.000 --> 04:58.000
+que tienen estos dos
+inputs.
+
+04:58.000 --> 05:01.000
+Y aquí al momento de darle click en este
+botón,
+
+05:01.000 --> 05:03.000
+que tiene el tipo de
+submit,
+
+05:03.000 --> 05:05.000
+que es el que como genera este trigger,
+
+05:05.000 --> 05:08.000
+tenemos que quitar este comportamiento.
+
+05:08.000 --> 05:10.000
+Así que lo primero que vamos a hacer es,
+
+05:10.000 --> 05:19.000
+vamos a venir aquí y vamos a ocupar el form.
+addEventListener
+
+05:20.000 --> 05:24.000
+y vamos a decir que el evento que queremos
+nosotros escuchar
+
+05:24.000 --> 05:26.000
+es un
+submit.
+
+05:28.000 --> 05:31.000
+Y queremos que nos traiga el evento mismo.
+
+05:33.000 --> 05:34.000
+¿Para
+qué?
+
+05:34.000 --> 05:37.000
+Una, para poder prevenir este
+comportamiento que tiene.
+
+05:37.000 --> 05:45.000
+Entonces vamos
+event.preventDefault
+
+05:46.000 --> 05:51.000
+y dos, para poder tener acceso a los
+elementos
+
+05:51.000 --> 05:53.000
+que tiene el
+formulario,
+
+05:53.000 --> 05:56.000
+para poder tener estos dos
+valores.
+
+05:56.000 --> 05:59.000
+Entonces ahorita ya le estoy dando click
+al botón
+
+05:59.000 --> 06:01.000
+y podemos ver que ya no se reinicia la página,
+
+06:01.000 --> 06:04.000
+así que ya ese comportamiento se está
+erradicando.
+
+06:04.000 --> 06:07.000
+Ahora vamos a tomar el valor de estos dos
+inputs.
+
+06:07.000 --> 06:10.000
+Entonces la forma de hacerlo es genero una
+constante
+
+06:10.000 --> 06:26.000
+que se llame title igual a
+event.currentTarget.querySelector
+
+06:26.000 --> 06:33.000
+y quiero que busque si ese target actual,
+
+06:33.000 --> 06:35.000
+que tiene que venir en
+comillas,
+
+06:37.000 --> 06:40.000
+tenga el ID de
+title.
+
+06:42.000 --> 06:45.000
+Y si sí, quiero que me traiga el value.
+
+06:46.000 --> 06:47.000
+Perfecto.
+
+06:48.000 --> 06:50.000
+Entonces vamos a hacer lo mismo con el body.
+
+06:50.000 --> 07:04.000
+Const se va a llamar content igual a event.
+currentTarget.querySelector
+
+07:04.000 --> 07:05.000
+y lo
+mismo.
+
+07:05.000 --> 07:11.000
+Este tiene que tener un ID que se llame
+content.
+
+07:11.000 --> 07:19.000
+Muy bien, si venimos acá, aquí tenemos el
+document.
+
+07:21.000 --> 07:23.000
+Vamos a darle un poquito más de espacio.
+
+07:24.000 --> 07:27.000
+Venimos al body, venimos a este section
+new posts,
+
+07:27.000 --> 07:29.000
+el new posts trae el
+formulario.
+
+07:29.000 --> 07:36.000
+Entonces aquí tiene que venir un input con
+título
+
+07:36.000 --> 07:39.000
+y aquí un input con
+content.
+
+07:39.000 --> 07:44.000
+Y estamos haciendo como el target
+actual
+
+07:44.000 --> 07:51.000
+para hacerle selección a, aquí nos falta
+el punto value,
+
+07:51.000 --> 07:54.000
+para que nos pueda traer el valor del
+target actual
+
+07:54.000 --> 08:01.000
+que tenga un ID que haga match con los ID
+que estamos nosotros seleccionando en este momento.
+
+08:01.000 --> 08:04.000
+Entonces si guardamos, aquí ya tenemos dos
+constantes
+
+08:04.000 --> 08:09.000
+que van a ser las dos constantes de estos
+dos inputs
+
+08:09.000 --> 08:12.000
+que nos tiene que traer el texto que
+nosotros escribamos.
+
+08:13.000 --> 08:18.000
+Si en este momento pongo un console.
+log, por ejemplo,
+
+08:18.000 --> 08:26.000
+y hago title,
+contents,
+
+08:26.000 --> 08:36.000
+aquí pongo título y contenido y le doy enter.
+
+08:37.000 --> 08:44.000
+Aquí nos dice que hay un typo en la línea
+64 con el query selector.
+
+08:44.000 --> 08:51.000
+Si venimos en la línea 64, target, podemos
+guardar.
+
+08:51.000 --> 09:01.000
+Hacemos lo mismo, título, contenido,
+post y listo, nos trae título y contenido.
+
+09:01.000 --> 09:05.000
+Entonces a este momento ya tenemos el
+valor de nuestros inputs.
+
+09:05.000 --> 09:07.000
+¿Qué es lo que nos
+falta?
+
+09:07.000 --> 09:11.000
+Nos falta simplemente mandar llamar
+nuestra función.
+
+09:11.000 --> 09:14.000
+Al momento de que se genere el submits,
+
+09:14.000 --> 09:18.000
+lo que queremos es que en esta función
+pueda venir el título
+
+09:18.000 --> 09:22.000
+y pueda venir el contenido que hace
+relación o referencia
+
+09:22.000 --> 09:25.000
+a estas dos variables que tenemos aquí.
+
+09:25.000 --> 09:28.000
+Es perfecto, vamos a
+guardar.
+
+09:28.000 --> 09:34.000
+Y aquí si guardamos, podemos venir a
+networking, network.
+
+09:36.000 --> 09:38.000
+Bien, vamos a darle un poco más de espacio
+a esto
+
+09:38.000 --> 09:41.000
+para poder ver bien que es lo que va a pasar.
+
+09:42.000 --> 09:46.000
+Entonces aquí podemos ver que todavía no
+existe un post.
+
+09:46.000 --> 09:53.000
+Si ponemos aquí título, contenido y enviamos,
+
+09:54.000 --> 09:56.000
+podemos ver cómo aquí aparece este post.
+
+09:56.000 --> 10:00.000
+Y dice que el método que se ocupó fue un
+método de post,
+
+10:00.000 --> 10:07.000
+un 201, perfecto, que fue creado, y al
+dominio, y se utilizó un fetch.
+
+10:07.000 --> 10:11.000
+Si abrimos este post, podemos ver qué es
+lo que se envió.
+
+10:11.000 --> 10:15.000
+Se envió el título, se envió el body,
+que es el contenido,
+
+10:15.000 --> 10:18.000
+el user ID, que es un mat random generado,
+
+10:18.000 --> 10:23.000
+aquí podríamos cambiar un poco para
+redondearlo a números enteros,
+
+10:23.000 --> 10:26.000
+pero se está enviando un user
+ID.
+
+10:26.000 --> 10:29.000
+Y si vamos al header, podemos ver que se
+está utilizando
+
+10:29.000 --> 10:32.000
+el método post a la URL que nosotros
+estamos buscando,
+
+10:32.000 --> 10:36.000
+el status que se está generando, y con
+esto ya estamos viendo
+
+10:36.000 --> 10:46.000
+qué es lo que se envió al
+servidor.
+

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

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/08-app_6a7338a5-f4d8-42bf-8732-2ca120df4082.js

@@ -0,0 +1,68 @@
+const listElement = document.querySelector(".posts");
+const postTemplate = document.getElementById("single-post");
+const form = document.querySelector("#new-post form");
+const fetchButton = document.querySelector("#available-posts button");
+const postList = document.querySelector("#posts-container");
+
+function sendHTTPRequest(method, url, data) {
+  return fetch(url, {
+    method: method,
+    body: JSON.stringify(data),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+async function fecthPosts() {
+  const responseData = await sendHTTPRequest(
+    "GET",
+    "https://jsonplaceholder.typicode.com/posts"
+  );
+  console.log(responseData);
+  const listOfPosts = responseData;
+
+  for (const post of listOfPosts) {
+    const postContainer = document.createElement("article");
+    postContainer.id = post.id;
+    postContainer.classList.add("post-item");
+
+    const title = document.createElement("h2");
+    title.textContent = post.title;
+
+    const body = document.createElement("p");
+    body.textContent = post.body;
+
+    const button = document.createElement("button");
+    button.textContent = "DELETE Content";
+
+    postContainer.append(title);
+    postContainer.append(body);
+    postContainer.append(button);
+
+    listElement.append(postContainer);
+  }
+}
+
+fetchButton.addEventListener("click", fecthPosts);
+
+async function createPost(title, content) {
+  const userId = Math.random();
+  const post = {
+    title: title,
+    body: content,
+    userId: userId,
+  };
+
+  sendHTTPRequest("POST", "https://jsonplaceholder.typicode.com/posts", post);
+}
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const title = event.currentTarget.querySelector("#title").value;
+  const content = event.currentTarget.querySelector("#content").value;
+
+  createPost(title, content);
+});

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/09-Eliminar Posts con JavaScript y Delegación de Eventos.mp4

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/09-Eliminar Posts con JavaScript y Delegación de Eventos.vtt

@@ -0,0 +1,745 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+¿Qué pasaría entonces ahora si, por ejemplo,
+
+00:03.000 --> 00:07.800
+mandamos llamar nuestros posts y lo que
+queremos es borrarlos?
+
+00:07.800 --> 00:08.300
+¿No?
+
+00:08.300 --> 00:11.200
+O queremos enviar una petición para
+poderle decir al servidor,
+
+00:11.200 --> 00:15.400
+oye, este elemento quiero que lo borres de
+la base de datos y
+
+00:15.400 --> 00:18.360
+ya no quiero traerlo cuando quede una
+petición.
+
+00:18.360 --> 00:21.840
+Tenemos que darle interacción ahorita a
+este botón para poder
+
+00:21.840 --> 00:23.360
+borrar los
+elementos.
+
+00:23.360 --> 00:26.200
+Pero poder borrar los elementos es un poco
+más complejo que
+
+00:26.200 --> 00:29.840
+solo decirle a este botón, borra este
+elemento.
+
+00:29.840 --> 00:31.520
+No funciona tanto
+así.
+
+00:31.520 --> 00:35.160
+Aquí vamos a estar utilizando algunos
+elementos.
+
+00:35.160 --> 00:38.520
+Lo primero es que no le vamos a agregar el
+evento al botón.
+
+00:38.520 --> 00:41.640
+Vamos a utilizar un patrón que se llama
+delegation pattern,
+
+00:41.640 --> 00:46.080
+que es vamos a agregarle el evento al
+padre de las
+
+00:46.080 --> 00:49.600
+tarjetas para que el padre de las tarjetas
+sea el que nos
+
+00:49.600 --> 00:53.160
+diga a quién le estamos dando clic y quién
+se tiene que ir.
+
+00:53.160 --> 00:55.920
+Esto nos va a ayudar muchísimo en temas de
+performance.
+
+00:55.920 --> 00:59.960
+Pero también tenemos que entender cuál es
+el ID que
+
+00:59.960 --> 01:01.120
+tenemos que
+borrar.
+
+01:01.120 --> 01:05.520
+Porque no solo es saber qué tipo de o cuál
+de las etiquetas de
+
+01:05.520 --> 01:09.400
+HTML le estamos dando clic, es si venimos
+aquí, por ejemplo,
+
+01:09.400 --> 01:12.880
+hagamos esto un poco grande, demos espacio,
+
+01:12.880 --> 01:17.080
+venimos a nuestros posts, nosotros
+necesitamos entender
+
+01:17.080 --> 01:19.160
+cuál es el ID del
+elemento.
+
+01:19.160 --> 01:23.040
+Si te das cuenta, cada elemento tiene un
+ID distinto.
+
+01:23.040 --> 01:25.240
+Entonces, nosotros tenemos que encontrar
+una forma de al
+
+01:25.240 --> 01:28.480
+momento de darle clic con el delegation
+pattern,
+
+01:28.480 --> 01:33.520
+sepamos cuál es el ID del elemento al que
+le dimos clic
+
+01:33.520 --> 01:38.000
+para poderle decir al servidor en la
+petición de deletes que
+
+01:38.000 --> 01:40.080
+vamos a hacer con HTTP,
+oye,
+
+01:40.080 --> 01:44.520
+necesito que busques el elemento que tiene
+este ID y que lo
+
+01:44.520 --> 01:45.840
+borres.
+
+01:45.840 --> 01:48.080
+Así que vamos para
+allá.
+
+01:48.080 --> 01:50.920
+Con esto pequeño, venimos aquí a nuestro
+JavaScript.
+
+01:50.920 --> 01:53.160
+Y ya que estamos acá, pues, como comenté,
+
+01:53.160 --> 01:55.320
+hay que empezar con el
+evento.
+
+01:55.320 --> 02:01.480
+Y el evento va a estar pasando en el padre
+que tiene todas las
+
+02:01.480 --> 02:04.400
+tarjetas, que tiene todas estas tarjetas.
+
+02:04.400 --> 02:09.480
+Y ese padre, venimos aquí, lo tenemos acá.
+
+02:09.480 --> 02:14.000
+Este padre está en el section que tiene un
+ID que se llama
+
+02:14.000 --> 02:16.120
+post
+container.
+
+02:16.120 --> 02:17.800
+Eso ya lo tenemos acá
+guardado.
+
+02:17.800 --> 02:21.840
+Lo tenemos por aquí, post container,
+se llama post list.
+
+02:21.840 --> 02:24.120
+Entonces, a este elemento es el que le
+vamos a agregar ese
+
+02:24.120 --> 02:25.520
+evento.
+
+02:25.520 --> 02:32.360
+Si venimos acá, post list, entonces va a
+ser add even
+
+02:32.360 --> 02:34.480
+listener.
+
+02:34.480 --> 02:38.280
+Y el evento que queremos nosotros escuchar
+es clic,
+
+02:38.280 --> 02:40.520
+hacer un evento de
+clic.
+
+02:40.520 --> 02:43.400
+Y aquí vamos a traer al evento mismo,
+
+02:43.400 --> 02:46.720
+porque ahí nos va a ser de mucha ayuda.
+
+02:46.720 --> 02:50.400
+Vamos a ir parte por parte para que puedas
+entender bien qué es
+
+02:50.400 --> 02:52.360
+lo que vamos a estar haciendo
+acá.
+
+02:52.360 --> 03:02.760
+Lo primero es que vamos a imprimir un console.
+log event.
+
+03:02.760 --> 03:08.680
+Es el momento de traer todos mis posts y
+darle clic en el
+
+03:08.680 --> 03:09.880
+evento.
+
+03:09.880 --> 03:13.000
+Aquí podemos ver que me trae el evento.
+
+03:13.000 --> 03:17.320
+Me está trayendo el objeto del evento mismo.
+
+03:17.320 --> 03:22.600
+Y navegando podría yo encontrar cuál es el
+target, por ejemplo.
+
+03:22.600 --> 03:25.680
+Si venimos acá y encontramos target,
+
+03:25.680 --> 03:28.440
+vemos que le estoy dando clic a un botón.
+
+03:28.440 --> 03:30.800
+Y me está trayendo
+automáticamente,
+
+03:30.800 --> 03:34.200
+me está como haciendo un highlight del
+botón al cual yo
+
+03:34.200 --> 03:35.160
+le di
+clic.
+
+03:35.160 --> 03:39.480
+Que esto va a ser distinto si yo me pongo
+y veo otra tarjeta.
+
+03:39.480 --> 03:40.000
+¿Por
+qué?
+
+03:40.000 --> 03:41.800
+Porque les estoy dando
+clic.
+
+03:41.800 --> 03:43.960
+El target me dice a qué elemento le di
+clic en
+
+03:43.960 --> 03:45.080
+particular.
+
+03:45.080 --> 03:46.320
+No me trae el
+resto.
+
+03:46.320 --> 03:46.840
+Perfecto.
+
+03:46.840 --> 03:48.560
+Entonces, vamos a empezar por
+ahí.
+
+03:48.560 --> 03:53.000
+Ya tenemos que.target me trae este botón
+de forma muy
+
+03:53.000 --> 03:53.600
+particular.
+
+03:53.600 --> 03:57.240
+Y esto es lo que necesito, porque ya de
+forma específica,
+
+03:57.240 --> 03:59.200
+sé a quién le estoy dando
+clic.
+
+03:59.200 --> 04:00.720
+Bien.
+
+04:00.720 --> 04:03.440
+Entonces, aquí vamos a hacer una pequeña
+validación.
+
+04:03.440 --> 04:14.360
+Entonces, la validación va a ser event.target.
+tagname.
+
+04:14.360 --> 04:18.680
+Igual a
+botón.
+
+04:18.680 --> 04:20.040
+¿Por
+qué?
+
+04:20.040 --> 04:21.080
+Tiene que ser
+este.
+
+04:21.080 --> 04:24.960
+El tag name tiene que ser igual a botón.
+
+04:24.960 --> 04:25.460
+Perfecto.
+
+04:25.460 --> 04:29.800
+Entonces, la validación va de si el target
+al cual yo le di
+
+04:29.800 --> 04:33.320
+clic tiene un tag name igual a botón.
+
+04:33.320 --> 04:37.960
+Si eso sucede, entonces hagamos lo que viene.
+
+04:37.960 --> 04:40.880
+Generamos una nueva constante en minúsculas,
+
+04:40.880 --> 04:45.240
+constante que se llame post
+ID.
+
+04:45.240 --> 04:48.120
+Vamos a sacar el ID de ese
+post.
+
+04:48.120 --> 04:55.320
+Y la forma de obtener el ID de ese post va
+a ser event.target.
+
+04:55.320 --> 04:55.820
+closest.
+
+04:59.120 --> 05:03.080
+Y aquí vamos a buscar una
+etiqueta.
+
+05:03.080 --> 05:05.960
+Vamos a hacer aquí el
+post.
+
+05:05.960 --> 05:07.320
+Perfecto.
+
+05:07.320 --> 05:10.360
+Y
+document.
+
+05:10.360 --> 05:12.760
+Venimos aquí, vamos a abrir nuestro body.
+
+05:12.760 --> 05:15.200
+Venimos a el
+contenedor.
+
+05:15.200 --> 05:19.360
+Y si abrimos el section, podemos ir viendo
+que cada una de las
+
+05:19.360 --> 05:22.080
+tarjetas es un
+article.
+
+05:22.080 --> 05:25.640
+Y cada uno de estos articles trae un ID.
+
+05:25.640 --> 05:34.000
+Entonces, lo que yo quiero es tener acceso
+al article más
+
+05:34.000 --> 05:36.200
+cercano.
+
+05:36.200 --> 05:40.680
+Y entonces, puedo tener acceso a su ID.
+
+05:40.680 --> 05:42.400
+Guardamos
+esto.
+
+05:42.400 --> 05:47.520
+Una forma de saber si esto está
+funcionando o no, console.log.
+
+05:47.520 --> 05:51.440
+Aquí ponemos post
+ID.
+
+05:51.440 --> 05:52.080
+Perfecto.
+
+05:52.080 --> 05:53.120
+Guardamos.
+
+05:53.120 --> 05:55.480
+Andamos a traer nuestros
+posts.
+
+05:55.480 --> 05:59.200
+Vamos a darle clic a
+este.
+
+05:59.200 --> 06:00.480
+Hay un
+typo.
+
+06:00.480 --> 06:02.120
+Closest.
+
+06:02.120 --> 06:02.960
+Perfecto.
+
+06:02.960 --> 06:05.680
+Vamos a
+guardar.
+
+06:05.680 --> 06:06.200
+Lo
+mismo.
+
+06:06.200 --> 06:07.600
+Traemos nuestros
+posts.
+
+06:07.600 --> 06:08.680
+Bajamos de forma
+random.
+
+06:08.680 --> 06:10.000
+Le damos
+clic.
+
+06:10.000 --> 06:15.760
+Entonces, me dice que ahora el ID del post
+al que le di clic es
+
+06:15.760 --> 06:17.000
+el
+11.
+
+06:17.000 --> 06:22.120
+Y con esta información, yo ya puedo
+decirle al servidor,
+
+06:22.120 --> 06:27.560
+en un request HTTP, necesito que me borres
+el artículo cuyo ID
+
+06:27.560 --> 06:29.120
+es igual a
+11.
+
+06:29.120 --> 06:30.360
+¿Cómo lo estaremos
+haciendo?
+
+06:30.360 --> 06:31.560
+Muy
+bien.
+
+06:31.560 --> 06:34.720
+Ya que estamos aquí, en esta misma evaluación,
+
+06:34.720 --> 06:39.920
+tenemos que mandar traer ahora nuestra
+función que genera el
+
+06:39.920 --> 06:42.600
+fetch.
+
+06:42.600 --> 06:45.080
+Lo ponemos
+aquí.
+
+06:45.080 --> 06:51.280
+Y entonces, el método, pues, el método va
+a ser deletes.
+
+06:51.280 --> 06:51.780
+Bien.
+
+06:51.780 --> 06:57.000
+La URL, vamos a utilizar la misma URL de
+los posts,
+
+06:57.000 --> 06:59.400
+que es la que venimos utilizando para este
+ejercicio.
+
+06:59.400 --> 07:02.760
+Bien.
+
+07:02.760 --> 07:08.960
+Y la data, aquí, vamos a
+inyectar.
+
+07:08.960 --> 07:12.320
+Déjame pongo esto
+aquí.
+
+07:12.320 --> 07:16.960
+Para esta data, lo que vamos a hacer es,
+
+07:16.960 --> 07:23.360
+adentro de la URL, lo que yo quiero es que
+se entienda cuál
+
+07:23.360 --> 07:28.720
+es el ID de ese post que queremos borrar.
+
+07:28.720 --> 07:30.640
+Entonces, hacemos
+esto.
+
+07:30.640 --> 07:34.000
+Vamos a poner
+esto.
+
+07:34.000 --> 07:39.000
+Y vamos a poner el valor del ID, del post ID.
+
+07:39.000 --> 07:41.240
+Tiene que ser así, post
+ID.
+
+07:41.240 --> 07:44.880
+Pero como estamos agregando el valor de
+una variable,
+
+07:44.880 --> 07:50.400
+vamos a utilizar estas
+comillas.
+
+07:50.400 --> 07:54.640
+Para que, entonces, podamos utilizar la
+variable que hace
+
+07:54.640 --> 07:57.080
+referencia al ID del
+post.
+
+07:57.080 --> 08:02.160
+Entonces, en la URL, en post, le vamos a
+poner que quiero que
+
+08:02.160 --> 08:04.400
+este post, de forma muy
+particular,
+
+08:04.400 --> 08:06.800
+que tiene este ID, se vaya a borrar.
+
+08:06.800 --> 08:09.640
+Esto viene en la documentación de cómo
+enviar la información al
+
+08:09.640 --> 08:12.360
+momento de borrar un
+post.
+
+08:12.360 --> 08:14.640
+Ellos te piden que envíes esta estructura.
+
+08:14.640 --> 08:17.040
+Pero es importante poder leer la
+documentación de cada una de
+
+08:17.040 --> 08:18.640
+las
+APIs.
+
+08:18.640 --> 08:23.520
+Si estás utilizando, por ejemplo, un post,
+un GET,
+
+08:23.520 --> 08:27.680
+una API REST, te tiene que venir cómo
+utilizar los verbos y
+
+08:27.680 --> 08:29.440
+cuál es la estructura que ellos esperarían.
+
+08:29.440 --> 08:34.280
+Entonces, con esto, si nosotros guardamos,
+
+08:34.280 --> 08:39.120
+ya tendríamos que tener la facultad de
+poder enviar esa
+
+08:39.120 --> 08:39.640
+información.
+
+08:39.640 --> 08:40.160
+¿Por
+qué?
+
+08:40.160 --> 08:44.760
+Porque estamos agregándole el evento
+directamente a un
+
+08:44.760 --> 08:45.800
+elemento.
+
+08:45.800 --> 08:49.800
+Aquí estamos validando que le estemos
+dando clic a un botón.
+
+08:49.800 --> 08:53.320
+Estamos tomando el ID de ese
+post.
+
+08:53.320 --> 08:56.640
+Entonces, estamos haciendo aquí mismo el
+request,
+
+08:56.640 --> 08:59.560
+pidiendo que se borre ese
+post.
+
+08:59.560 --> 09:02.720
+Así que si todo sale bien, vamos a mandar
+a llamar nuestros
+
+09:02.720 --> 09:03.680
+posts.
+
+09:03.680 --> 09:05.080
+Perfecto.
+
+09:05.080 --> 09:06.520
+Forma
+random.
+
+09:06.520 --> 09:07.800
+Vamos a darle
+borrar.
+
+09:07.800 --> 09:09.560
+Se tiene que borrar el
+8.
+
+09:09.560 --> 09:12.960
+Aquí, visualmente, no está pasando porque,
+pues,
+
+09:12.960 --> 09:15.160
+este es un API
+fake.
+
+09:15.160 --> 09:23.120
+Pero si venimos aquí a nuestro request,
+a network, y bajamos,
+
+09:23.120 --> 09:25.760
+podemos ver que aquí hay un
+8.
+
+09:25.760 --> 09:29.760
+Podemos ver aquí que hubo un request de un
+método que era
+
+09:29.760 --> 09:32.120
+borrar.
+
+09:32.120 --> 09:33.440
+Está trayendo por un
+fetch.
+
+09:33.440 --> 09:38.000
+Pero si abrimos esto, en el API dice que
+no se va a enviar,
+
+09:38.000 --> 09:39.480
+que no vas a recibir
+información,
+
+09:39.480 --> 09:42.040
+más bien porque tú estás enviando que lo
+quieres borrar.
+
+09:42.040 --> 09:44.960
+Pero si venimos al header, podemos ver que
+el status fue
+
+09:44.960 --> 09:46.080
+200.
+
+09:46.080 --> 09:50.440
+Podemos ver que realmente se utilizó el
+método de deletes.
+
+09:50.440 --> 09:52.520
+¿Cuál fue la URL que se está
+enviando?
+
+09:52.520 --> 09:54.400
+Podemos ver que aquí automáticamente se
+está
+
+09:54.400 --> 09:58.320
+agregando el ID del post que queramos borrar,
+que era el 8.
+
+09:58.320 --> 10:02.360
+Y con esto, entonces, ya enviamos al
+servidor cuál es el
+
+10:02.360 --> 10:03.960
+post que queremos
+borrar.
+
+10:03.960 --> 10:06.440
+Lo que faltaría, si este API fuera real,
+
+10:06.440 --> 10:08.200
+es que el servidor lo
+borraría.
+
+10:08.200 --> 10:11.080
+Y nosotros tendríamos que hacer un nuevo
+request para poder
+
+10:11.080 --> 10:14.680
+traer todos los posts menos ese, porque ya
+no estaría en la base
+
+10:14.680 --> 10:23.240
+de
+datos.
+

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

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/09-app_cd059276-f2dc-4bdc-a54b-22bc7be4a576.js

@@ -0,0 +1,80 @@
+const listElement = document.querySelector(".posts");
+const postTemplate = document.getElementById("single-post");
+const form = document.querySelector("#new-post form");
+const fetchButton = document.querySelector("#available-posts button");
+const postList = document.querySelector("#posts-container");
+
+function sendHTTPRequest(method, url, data) {
+  return fetch(url, {
+    method: method,
+    body: JSON.stringify(data),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => {
+    return response.json();
+  });
+}
+
+async function fecthPosts() {
+  const responseData = await sendHTTPRequest(
+    "GET",
+    "https://jsonplaceholder.typicode.com/posts"
+  );
+  console.log(responseData);
+  const listOfPosts = responseData;
+
+  for (const post of listOfPosts) {
+    const postContainer = document.createElement("article");
+    postContainer.id = post.id;
+    postContainer.classList.add("post-item");
+
+    const title = document.createElement("h2");
+    title.textContent = post.title;
+
+    const body = document.createElement("p");
+    body.textContent = post.body;
+
+    const button = document.createElement("button");
+    button.textContent = "DELETE Content";
+
+    postContainer.append(title);
+    postContainer.append(body);
+    postContainer.append(button);
+
+    listElement.append(postContainer);
+  }
+}
+
+fetchButton.addEventListener("click", fecthPosts);
+
+async function createPost(title, content) {
+  const userId = Math.random();
+  const post = {
+    title: title,
+    body: content,
+    userId: userId,
+  };
+
+  sendHTTPRequest("POST", "https://jsonplaceholder.typicode.com/posts", post);
+}
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const title = event.currentTarget.querySelector("#title").value;
+  const content = event.currentTarget.querySelector("#content").value;
+
+  createPost(title, content);
+});
+
+postList.addEventListener("click", (event) => {
+  console.log(event);
+  if (event.target.tagName === "BUTTON") {
+    const postId = event.target.closest("article").id;
+    console.log(postId);
+    sendHTTPRequest(
+      "DELETE",
+      `https://jsonplaceholder.typicode.com/posts/${postId}`
+    );
+  }
+});

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

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/10-Manejo de IDs en JavaScript para eliminar artículos del DOM.mp4

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

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/10-Manejo de IDs en JavaScript para eliminar artículos del DOM.vtt

@@ -0,0 +1,194 @@
+WEBVTT
+
+00:00.000 --> 00:02.640
+Ya tenemos todo el proyecto
+listo.
+
+00:02.640 --> 00:05.680
+Ahora, puede que te salga una
+duda,
+
+00:05.680 --> 00:08.920
+que es, ¿de dónde vino este
+ID?
+
+00:08.920 --> 00:11.640
+¿De dónde vino el ID que estamos
+utilizando
+
+00:11.640 --> 00:12.840
+para poder
+borrar?
+
+00:12.840 --> 00:15.040
+O para poder mandar el
+request
+
+00:15.040 --> 00:17.440
+para que se borre este
+artículo.
+
+00:17.440 --> 00:21.960
+Este ID viene prácticamente en la
+respuesta
+
+00:21.960 --> 00:23.560
+de cuando nosotros hicimos un
+GET.
+
+00:23.560 --> 00:25.320
+Si voy a
+Network,
+
+00:25.320 --> 00:28.160
+y le doy un poco de espacio
+aquí,
+
+00:28.160 --> 00:31.880
+me veo aquí a
+Posts,
+
+00:31.880 --> 00:32.920
+me voy a
+Preview,
+
+00:32.920 --> 00:34.480
+o vamos aquí a
+Response,
+
+00:34.480 --> 00:36.240
+este ID viene en la
+respuesta.
+
+00:36.240 --> 00:39.960
+Y lo que yo estoy haciendo con la
+respuesta
+
+00:39.960 --> 00:44.280
+es empezar a generar los elementos en
+JavaScript
+
+00:44.280 --> 00:47.640
+que quiero agregar directamente en el DOM.
+
+00:47.640 --> 00:51.440
+Y cuando generé el elemento del artículo,
+
+00:51.440 --> 00:55.280
+que va a ser el contenedor de cada uno de
+los posts,
+
+00:55.280 --> 00:58.080
+con JavaScript estoy agregándole el
+ID
+
+00:58.080 --> 00:59.960
+que si ahorita vemos aquí en elementos,
+
+00:59.960 --> 01:02.120
+por ejemplo, abrimos aquí y abrimos acá,
+
+01:03.240 --> 01:05.720
+cuando estoy generando la etiqueta de
+artículo,
+
+01:05.720 --> 01:07.600
+le estoy generando el
+ID
+
+01:07.600 --> 01:10.640
+y le estoy pidiendo que el ID sea
+igual
+
+01:10.640 --> 01:14.360
+al ID que viene de la respuesta del servidor.
+
+01:14.360 --> 01:15.760
+Y eso lo estoy haciendo
+acá.
+
+01:16.840 --> 01:18.600
+Entonces, cuando estoy
+aquí,
+
+01:19.840 --> 01:23.400
+haciendo un loop en cada uno de los
+elementos
+
+01:23.400 --> 01:26.480
+de los posts que viene de mi
+lista,
+
+01:26.480 --> 01:31.240
+y estoy generando el elemento de
+PostContainer,
+
+01:31.240 --> 01:32.680
+que es el
+artículo,
+
+01:32.680 --> 01:35.120
+una vez que este PostContainer ya existe,
+
+01:35.120 --> 01:36.360
+aquí le estoy generando el
+ID,
+
+01:36.360 --> 01:40.760
+le estoy diciendo el
+PostContainer.ID
+
+01:40.760 --> 01:45.760
+que tiene que hacer relación al atributo
+de mi etiqueta
+
+01:46.760 --> 01:49.000
+que sea igual al
+PostID
+
+01:49.000 --> 01:52.880
+que viene de parte de la respuesta del
+servidor.
+
+01:52.880 --> 01:55.680
+Entonces, cuando se generan todos los
+elementos,
+
+01:55.680 --> 01:58.840
+evidentemente se va a generar cada uno de
+los articles
+
+01:58.840 --> 02:01.760
+con cada uno de los IDs de los posts.
+
+02:01.760 --> 02:03.120
+Y entonces en la parte de
+abajo,
+
+02:03.120 --> 02:05.360
+simplemente lo que yo estoy
+haciendo
+
+02:05.360 --> 02:09.960
+es estoy pidiendo que lleguemos a ese
+atributo de la etiqueta
+
+02:09.960 --> 02:14.040
+que es ID y que entonces ese ID me lo
+pueda guardar
+
+02:14.040 --> 02:17.280
+en PostID para que yo pueda utilizar
+eso
+
+02:17.280 --> 02:19.520
+y enviárselo de regreso al
+servidor
+
+02:19.520 --> 02:20.800
+para que el servidor
+sepa
+
+02:20.800 --> 02:25.800
+cuál es el elemento que yo tengo que borrar.
+

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:28a96653509563f3f4adcb8e69b7f0088c72fe9ab36b562dd49dafbb3b543817
+size 28457797

subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.vtt

@@ -0,0 +1,171 @@
+WEBVTT
+
+00:00.000 --> 00:03.280
+Como puede usted ver a lo largo de algunas
+clases en el curso,
+
+00:03.280 --> 00:05.680
+JavaScript es un lenguaje que sigue
+evolucionando.
+
+00:05.680 --> 00:08.440
+Van saliendo cosas nuevas, como fueron las
+clases,
+
+00:08.440 --> 00:10.960
+como fueron estas nuevas variables que
+serían const
+
+00:10.960 --> 00:13.280
+length, como pueden ser las arrow function,
+
+00:13.280 --> 00:16.120
+y muchos otros aditamentos que hacen que
+JavaScript empiece
+
+00:16.120 --> 00:18.960
+a evolucionar, siga creciendo, y lo haga
+un mejor lenguaje para
+
+00:18.960 --> 00:20.160
+poder
+programar.
+
+00:20.160 --> 00:22.720
+Esto quiere decir que JavaScript va a
+seguir evolucionando.
+
+00:22.720 --> 00:24.600
+Y lo que yo te recomiendo ahorita que
+tienes todos los
+
+00:24.600 --> 00:27.080
+fundamentos es que te sigas informando de
+qué es lo nuevo
+
+00:27.080 --> 00:28.120
+que va a
+venir.
+
+00:28.120 --> 00:30.440
+Cada una de las propuestas que van a
+seguir saliendo en
+
+00:30.440 --> 00:33.400
+JavaScript están hechas pensadas en
+solucionar problemas.
+
+00:33.400 --> 00:36.840
+Que si tú en tu carrera empiezas a tener
+más proyectos,
+
+00:36.840 --> 00:38.360
+vas a enfrentarte a estos problemas.
+
+00:38.360 --> 00:41.440
+Y las nuevas propuestas lo que proponen es
+que esos problemas
+
+00:41.440 --> 00:44.120
+dejen de ser problemas, dejes de buscar
+formas de cómo
+
+00:44.120 --> 00:46.520
+solucionarlos, y más bien el lenguaje te
+ayuda a
+
+00:46.520 --> 00:49.500
+solucionarlos para que tu trabajo como
+desarrollador sea
+
+00:49.500 --> 00:50.760
+mucho más
+fácil.
+
+00:50.760 --> 00:53.720
+En la documentación te voy a dejar la
+información de dónde
+
+00:53.720 --> 00:56.640
+puedes buscar estas nuevas actualizaciones
+del mismo
+
+00:56.640 --> 00:57.400
+lenguaje.
+
+00:57.400 --> 00:59.600
+Mi recomendación es que vayas leyendo,
+
+00:59.600 --> 01:02.560
+vayas viendo qué cosas están trabajando
+ahorita y qué cosas
+
+01:02.560 --> 01:05.040
+van a venir para que puedas estar
+preparado para cuando esto
+
+01:05.040 --> 01:06.040
+salga.
+
+01:06.040 --> 01:08.000
+Ahora, a lo largo de toda esta escuela,
+
+01:08.000 --> 01:10.680
+ya que tienes los fundamentos, vas a
+seguir viendo cómo
+
+01:10.680 --> 01:13.000
+implementas estos fundamentos en otras áreas.
+
+01:13.000 --> 01:15.760
+Por ejemplo, ¿cómo podrías empezar a hacer
+páginas
+
+01:15.760 --> 01:18.920
+dinámicas 100% con JavaScript
+vanilla?
+
+01:18.920 --> 01:20.600
+A esto se le llama manipulación del DOM.
+
+01:20.600 --> 01:23.520
+O, ¿cómo puedes empezar a generar
+fragmentos de código
+
+01:23.520 --> 01:26.960
+que puedas encapsular para construir tus
+componentes solo
+
+01:26.960 --> 01:29.600
+con JavaScript para poder construir ya tus
+páginas?
+
+01:29.600 --> 01:32.960
+O incluso, ¿cómo le puedes sacar mucha más
+ventaja a todas estas
+
+01:32.960 --> 01:36.240
+APIs que existen en el navegador
+directamente con JavaScript
+
+01:36.240 --> 01:38.760
+para que nuestros proyectos puedan ser
+mucho más robustos
+
+01:38.760 --> 01:41.680
+y saquen toda la ventaja que el mismo
+navegador tiene para
+
+01:41.680 --> 01:42.600
+darnos?
+
+01:42.600 --> 01:45.080
+Si te gustó el curso, dale cinco estrellas,
+
+01:45.080 --> 01:47.640
+presenta tu examen y nos estaremos viendo
+en siguientes
+
+01:47.640 --> 01:57.200
+clases.
+

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/01-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://platzi.com/cursos/c-plus-plus/

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/01-Manejo de Memoria y Punteros en C.mp4

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

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/01-Manejo de Memoria y Punteros en C.vtt

@@ -0,0 +1,385 @@
+WEBVTT
+
+00:00:03.040 --> 00:00:04.960
+Hola, mi nombre es Diana Martínez, y voy
+
+00:00:04.960 --> 00:00:06.879
+a ser tu profesora en el curso de
+
+00:00:06.879 --> 00:00:09.679
+programación orientada a objetos con C más más.
+
+00:00:09.679 --> 00:00:12.420
+Recuerda que para realizar este curso te sugerimos
+
+00:00:12.639 --> 00:00:15.700
+realizar el curso básico de C más más.
+
+00:00:16.535 --> 00:00:18.615
+Vamos a comenzar con el primer tema de
+
+00:00:18.615 --> 00:00:21.495
+este curso. Vamos a hablar sobre el manejo
+
+00:00:21.495 --> 00:00:24.855
+de memoria, es decir, sobre cómo CYC más
+
+00:00:24.855 --> 00:00:28.455
+más utilizan los punteros. Para esto es importante
+
+00:00:28.455 --> 00:00:31.240
+hablar sobre cómo funcionan las computadoras. Las computadoras,
+
+00:00:31.240 --> 00:00:34.860
+sobre todo, se dividen en dos partes principales,
+
+00:00:35.080 --> 00:00:38.120
+la CPU y la memoria. La CPU es
+
+00:00:38.120 --> 00:00:39.720
+la parte de la computadora que va a
+
+00:00:39.720 --> 00:00:43.239
+realizar todas las operaciones matemáticas, lógicas y de
+
+00:00:43.239 --> 00:00:46.265
+control de nuestro programa. Es la maquinaria central
+
+00:00:47.045 --> 00:00:49.305
+y es como el cerebro de nuestra computadora.
+
+00:00:49.845 --> 00:00:51.765
+La memoria es el lugar donde se van
+
+00:00:51.765 --> 00:00:54.485
+a almacenar todos los datos relacionados con nuestro
+
+00:00:54.485 --> 00:00:56.325
+programa, desde el código que se va a
+
+00:00:56.325 --> 00:00:58.885
+ejecutar hasta las variables que se van a
+
+00:00:58.885 --> 00:01:01.145
+ir utilizando a lo largo de la ejecución.
+
+00:01:01.980 --> 00:01:04.379
+Es importante que entiendas que estos dos se
+
+00:01:04.379 --> 00:01:06.540
+van a estar comunicando todo el tiempo de
+
+00:01:06.540 --> 00:01:09.259
+forma constante. La RAM almacena el código que
+
+00:01:09.259 --> 00:01:11.920
+se ejecuta, así que la CPU en realidad
+
+00:01:11.979 --> 00:01:14.625
+va a ir leyendo instrucciones de ahí y
+
+00:01:14.625 --> 00:01:17.265
+la CPU va a poder acceder a cada
+
+00:01:17.265 --> 00:01:19.825
+uno de los registros de la memoria donde
+
+00:01:19.825 --> 00:01:22.465
+se almacenan los datos de nuestro programa. Se
+
+00:01:22.465 --> 00:01:25.985
+van a estar comunicando todo el tiempo. Para
+
+00:01:25.985 --> 00:01:29.650
+hablar más específico, la RAM tiene cierta segmentación.
+
+00:01:30.030 --> 00:01:32.909
+Nuestro sistema operativo lo que realiza es una
+
+00:01:32.909 --> 00:01:35.950
+gestión de recursos en nuestra computadora y cuando
+
+00:01:35.950 --> 00:01:39.470
+nuestro programa comience a ejecutarse, en ese momento
+
+00:01:39.470 --> 00:01:41.710
+le aparta un espacio dentro de la memoria
+
+00:01:41.710 --> 00:01:43.884
+RAM donde lo va a cargar y donde
+
+00:01:43.884 --> 00:01:47.505
+va a poder almacenar todos los datos relacionados.
+
+00:01:48.685 --> 00:01:51.884
+Esta segmentación tiene una forma muy específica de
+
+00:01:51.884 --> 00:01:54.784
+ocurrir dentro de C más más. Los diferentes
+
+00:01:55.005 --> 00:01:58.369
+lenguajes de programación suelen realizarlo de forma similar,
+
+00:01:58.369 --> 00:02:00.689
+pero no siempre es de esta manera. Sin
+
+00:02:00.689 --> 00:02:02.930
+embargo, en lenguajes como seis C más más
+
+00:02:02.930 --> 00:02:05.409
+esta es la forma estándar en cómo se
+
+00:02:05.409 --> 00:02:09.065
+almacenan los diferentes datos de un programa. Se
+
+00:02:09.065 --> 00:02:12.424
+segmenta en estas partes que estás viendo en
+
+00:02:12.424 --> 00:02:14.525
+pantalla. La primera es la sección de instrucciones.
+
+00:02:14.985 --> 00:02:18.025
+Todas las instrucciones que después de realizar el
+
+00:02:18.025 --> 00:02:20.985
+proceso de compilación de nuestro código quedan almacenadas
+
+00:02:20.985 --> 00:02:23.485
+en alguna parte, en un archivo ejecutable. Esas
+
+00:02:23.720 --> 00:02:26.200
+van en la primera sección de memoria. Se
+
+00:02:26.200 --> 00:02:28.760
+carga nuestro programa en esa sección. La segunda
+
+00:02:28.760 --> 00:02:31.800
+sección es la sección de literales. Como vimos,
+
+00:02:31.800 --> 00:02:35.000
+a veces podemos definir constantes y otros valores
+
+00:02:35.000 --> 00:02:37.000
+que no cambian a lo largo del programa,
+
+00:02:37.000 --> 00:02:39.585
+como cuando hicimos nuestro ejemplo de hola mundo.
+
+00:02:39.585 --> 00:02:42.485
+No era una variable, era un valor literal.
+
+00:02:43.505 --> 00:02:45.905
+De ese modo, todos los datos que son
+
+00:02:45.905 --> 00:02:49.505
+de tipo literal no necesitan alojarse en ninguna
+
+00:02:49.505 --> 00:02:51.365
+otra parte de la memoria y son acomodados
+
+00:02:51.665 --> 00:02:54.730
+justo allí. La siguiente sección es la sección
+
+00:02:54.730 --> 00:02:58.010
+de datos estáticos. Aquí, las variables que tú
+
+00:02:58.010 --> 00:03:01.050
+hayas declarado van a reservar su espacio. Si
+
+00:03:01.050 --> 00:03:03.630
+tú creaste una variable tipo entero, tipo carácter
+
+00:03:04.090 --> 00:03:07.615
+o tipo cadena de texto de tamaño fijo,
+
+00:03:07.615 --> 00:03:09.295
+tú vas a tener todos estos datos en
+
+00:03:09.295 --> 00:03:11.535
+la sección de datos estáticos, y esto es
+
+00:03:11.535 --> 00:03:14.815
+porque nuestro compilador nos reserva una memoria, un
+
+00:03:14.815 --> 00:03:17.855
+espacio de memoria, donde podemos almacenar de forma
+
+00:03:17.855 --> 00:03:21.420
+definida, con un tamaño definido, estos datos. Recuerda
+
+00:03:21.420 --> 00:03:23.880
+que, por ejemplo, un entero va a almacenarse
+
+00:03:24.100 --> 00:03:26.420
+en cuatro bytes y esto nunca va a
+
+00:03:26.420 --> 00:03:29.700
+cambiar. Puede variar dependiendo de la computadora, pero
+
+00:03:29.700 --> 00:03:32.260
+dentro de la misma computadora siempre serán la
+
+00:03:32.260 --> 00:03:36.685
+misma cantidad de bytes. Así que el compilador
+
+00:03:36.745 --> 00:03:39.705
+nos hace el favor de reservar un espacio
+
+00:03:39.705 --> 00:03:43.864
+de tamaño estático para estos datos. Las siguientes
+
+00:03:43.864 --> 00:03:47.405
+dos secciones son las secciones de memoria dinámica.
+
+00:03:47.980 --> 00:03:50.780
+Fíjate cómo crecen la memoria HEP y la
+
+00:03:50.780 --> 00:03:54.460
+memoria Stack. La memoria HEP es controlada por
+
+00:03:54.460 --> 00:03:59.420
+el programador y esta crece de forma, conforme
+
+00:03:59.420 --> 00:04:02.560
+crecen los números de la dirección de memoria.
+
+00:04:02.985 --> 00:04:04.665
+Ahorita vamos a hablar sobre cómo crecen los
+
+00:04:04.665 --> 00:04:07.224
+números de la dirección de memoria, pero es
+
+00:04:07.224 --> 00:04:10.125
+importante que entiendas que crecen en sentidos contrarios
+
+00:04:10.185 --> 00:04:12.125
+la memoria hip y la memoria de stack.
+
+00:04:12.265 --> 00:04:15.385
+Esto sucede porque el espacio intermedio que puedes
+
+00:04:15.385 --> 00:04:18.810
+ver ahí es un espacio limpio que reserva
+
+00:04:18.950 --> 00:04:23.110
+nuestro sistema operativo y nuestro compilador solicita, de
+
+00:04:23.110 --> 00:04:25.110
+forma que podamos crecer en la cantidad de
+
+00:04:25.110 --> 00:04:27.690
+datos que estamos utilizando durante la ejecución del
+
+00:04:27.750 --> 00:04:31.310
+programa. Por ejemplo, si tú realizas un programa
+
+00:04:31.310 --> 00:04:34.785
+por como Excel, pues nunca sabes exactamente cuántos
+
+00:04:34.925 --> 00:04:37.085
+archivos o cuántas celdas va a tener una
+
+00:04:37.085 --> 00:04:39.885
+tabla, ¿no? Entonces, no se sabe con precisión
+
+00:04:39.885 --> 00:04:42.925
+o con exactitud cuántos bytes o qué tamaño
+
+00:04:42.925 --> 00:04:45.485
+de memoria reservar, por lo tanto, se reserva
+
+00:04:45.485 --> 00:04:48.650
+un tamaño bastante amplio y se van registrando,
+
+00:04:48.950 --> 00:04:52.310
+pues, los datos conforme van creciendo. Para evitar
+
+00:04:52.310 --> 00:04:56.070
+que colisionen, pues, se trata de que crezcan
+
+00:04:56.070 --> 00:04:58.950
+en direcciones opuestas. Así, se acercarán cada vez
+
+00:04:58.950 --> 00:05:01.695
+más al centro de ese espacio vacío, pero
+
+00:05:02.395 --> 00:05:04.555
+teóricamente nunca llegarán ahí. Y si eso llegara
+
+00:05:04.555 --> 00:05:07.615
+a pasar, pues ocurriría una situación de desbordamiento
+
+00:05:07.755 --> 00:05:10.235
+de memoria, que es un bug bastante conocido
+
+00:05:10.235 --> 00:05:12.975
+de lenguajes compilados como seis c más más.
+
+00:05:13.610 --> 00:05:16.490
+Lenguajes más modernos pueden ayudarte a resolver esto,
+
+00:05:16.490 --> 00:05:18.650
+pero en seis C más más este control
+
+00:05:18.650 --> 00:05:22.250
+se realiza manualmente. Como mencionamos, el HEP es
+
+00:05:22.250 --> 00:05:24.970
+controlado por el programador. Todas las funciones de
+
+00:05:24.970 --> 00:05:27.735
+almacenamiento de memoria dinámica que tu programes, si,
+
+00:05:27.735 --> 00:05:30.215
+por ejemplo, es recoger datos del usuario, van
+
+00:05:30.215 --> 00:05:33.415
+allí. Y el stack es gestionado principalmente por
+
+00:05:33.415 --> 00:05:36.155
+el compilador, y es que cuando el compilador
+
+00:05:36.775 --> 00:05:39.895
+está interpretando cómo hacemos, por ejemplo, diferentes bloques
+
+00:05:39.895 --> 00:05:42.120
+o funciones de código, lo que va a
+
+00:05:42.120 --> 00:05:45.480
+hacer es mantener como cierta memoria de desde
+
+00:05:45.480 --> 00:05:47.960
+dónde se llamó cierta función, qué datos contiene
+
+00:05:47.960 --> 00:05:51.240
+internamente y todo esto lo va almacenando durante
+
+00:05:51.240 --> 00:05:54.135
+la ejecución en el stack. Esta es la
+
+00:05:54.135 --> 00:05:56.315
+forma en que se segmenta la memoria dentro
+
+00:05:56.495 --> 00:06:00.535
+de tu computadora. Con esto, ahora puedes entender
+
+00:06:00.535 --> 00:06:04.794
+cómo funciona internamente la computadora, cómo almacena los
+
+00:06:04.935 --> 00:06:07.735
+datos y cómo organiza las diferentes secciones de
+
+00:06:07.735 --> 00:06:10.240
+memoria. Vamos a aprender en la siguiente clase
+
+00:06:10.539 --> 00:06:12.699
+el uso de punteros, que es la manera
+
+00:06:12.699 --> 00:06:14.860
+que nos dan los lenguajes de programación, como
+
+00:06:14.860 --> 00:06:17.099
+seis C más más, de acceder a los
+
+00:06:17.099 --> 00:06:20.479
+diferentes registros de memoria y controlarlos.

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/01-slides-del-curso-de-poo-con-c_f444e705-c951-4d68-b9c0-907667481c77.pdf

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

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/02-Punteros en C Manejo y Uso de Memoria Dinámica.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:196e9c43c94439e2a20db518fce74629eab80c0d8f08b4ecea5928d1df7aa23b
+size 53579406

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/02-Punteros en C Manejo y Uso de Memoria Dinámica.vtt

@@ -0,0 +1,292 @@
+WEBVTT
+
+00:00:03.120 --> 00:00:05.120
+Ahora que ya sabes cómo se almacenan los
+
+00:00:05.120 --> 00:00:07.440
+programas en memoria y cómo se segmenta la
+
+00:00:07.440 --> 00:00:09.519
+memoria de un programa, vamos a comenzar a
+
+00:00:09.519 --> 00:00:12.320
+hablar sobre los punteros. Los punteros son un
+
+00:00:12.320 --> 00:00:15.360
+tipo especial de variable que almacena direcciones de
+
+00:00:15.360 --> 00:00:18.505
+memoria. Estos nos van a servir muchísimo para
+
+00:00:18.505 --> 00:00:21.785
+el manejo de la memoria dinámica. La memoria
+
+00:00:21.785 --> 00:00:23.945
+dinámica es esta que puede cambiar de tamaño
+
+00:00:23.945 --> 00:00:25.805
+a lo largo de la ejecución del programa.
+
+00:00:26.425 --> 00:00:29.224
+Vamos a ver cómo funcionan internamente para la
+
+00:00:29.224 --> 00:00:33.510
+computadora. Como puedes ver en pantalla, la estructura
+
+00:00:33.510 --> 00:00:36.090
+básica de la RAM es como una tabla
+
+00:00:36.230 --> 00:00:38.970
+o como una fila o lista de cosas
+
+00:00:39.270 --> 00:00:42.629
+que vas a almacenar. Cada uno de los
+
+00:00:42.629 --> 00:00:44.965
+elementos, cada una de las celdas de esta
+
+00:00:44.965 --> 00:00:47.685
+pila de cosas que puedes almacenar, que son
+
+00:00:47.685 --> 00:00:51.045
+donde se almacenan tus valores, tiene asignada una
+
+00:00:51.045 --> 00:00:53.605
+dirección de memoria. Esa dirección es única a
+
+00:00:53.605 --> 00:00:56.850
+lo largo de toda tu computadora e irrepetible.
+
+00:00:57.710 --> 00:01:00.430
+Entonces, cada una de estas direcciones puede ser
+
+00:01:00.430 --> 00:01:04.989
+accedida por tu programa. Si quieres almacenar una
+
+00:01:04.989 --> 00:01:08.350
+variable tipo char, por ejemplo, la letra a
+
+00:01:08.350 --> 00:01:10.065
+dentro de tu memoria RAM, la forma en
+
+00:01:10.065 --> 00:01:12.545
+que funcionaría sería como lo estás viendo en
+
+00:01:12.545 --> 00:01:15.345
+pantalla. Estarías reservando un espacio en la memoria
+
+00:01:15.345 --> 00:01:18.145
+RAM, tu compilador puede saber que se trata
+
+00:01:18.145 --> 00:01:20.385
+de una letra gracias a que lo indicaste
+
+00:01:20.385 --> 00:01:23.230
+en el tipo char. El igual hace una
+
+00:01:23.230 --> 00:01:25.390
+asignación, así que sabe que ese valor es
+
+00:01:25.390 --> 00:01:27.250
+el que va a almacenar en ese espacio
+
+00:01:27.670 --> 00:01:31.310
+y, en este momento, por ejemplo, estarías almacenando
+
+00:01:31.310 --> 00:01:33.950
+la letra a en la dirección cero x
+
+00:01:33.950 --> 00:01:36.935
+cero cero cero uno, pero la forma en
+
+00:01:36.935 --> 00:01:39.335
+la que el lenguaje evita que tengas que
+
+00:01:39.335 --> 00:01:41.655
+aprenderte direcciones de memoria es usando, pues, el
+
+00:01:41.655 --> 00:01:44.295
+nombre de tu variable y, entonces, estaríamos hablando
+
+00:01:44.295 --> 00:01:47.195
+de la variable letra. Así es como se
+
+00:01:47.255 --> 00:01:50.375
+aparta la memoria en la computadora para cualquier
+
+00:01:50.375 --> 00:01:52.880
+variable, Puede ser un entero, una cadena de
+
+00:01:52.880 --> 00:01:56.000
+texto, etcétera. Vamos a crear una variable tipo
+
+00:01:56.000 --> 00:01:58.880
+puntero. ¿Eso cómo sería? Bueno, C más más
+
+00:01:58.880 --> 00:02:01.840
+nos permite utilizar estos dos símbolos, que son
+
+00:02:01.840 --> 00:02:05.345
+el asterisco y el ampersand, para realizar esta
+
+00:02:06.924 --> 00:02:10.525
+sintaxis. En este caso, si queremos almacenar un
+
+00:02:10.525 --> 00:02:13.345
+puntero a una variable que almacena un carácter,
+
+00:02:13.645 --> 00:02:16.525
+podemos utilizar el tipo char, pero tú podrías
+
+00:02:16.525 --> 00:02:19.360
+utilizar cualquier tipo de dato dependiendo de lo
+
+00:02:19.360 --> 00:02:23.680
+que quieras almacenar. Igualmente, para indicarle a C
+
+00:02:23.680 --> 00:02:25.860
+más más que estamos hablando de un puntero,
+
+00:02:26.000 --> 00:02:29.380
+utilizaremos el nombre de la variable, pero iniciando
+
+00:02:29.440 --> 00:02:32.365
+con un asterisco. De esta manera, podrá reconocer
+
+00:02:32.365 --> 00:02:36.365
+que tratamos punteros, que tratamos direcciones de memoria.
+
+00:02:36.365 --> 00:02:39.405
+Y durante la asignación, puedes notar que estamos
+
+00:02:39.405 --> 00:02:43.645
+utilizando el símbolo de ampersand para indicar que
+
+00:02:43.645 --> 00:02:45.965
+queremos obtener la dirección de memoria de la
+
+00:02:45.965 --> 00:02:48.670
+variable letra. Esto es lo que significa esta
+
+00:02:48.670 --> 00:02:50.530
+línea de código que estamos viendo en pantalla.
+
+00:02:50.670 --> 00:02:52.990
+Y en resumen, lo que estamos haciendo es
+
+00:02:52.990 --> 00:02:59.070
+lo siguiente. Estamos tomando la variable puntero, estamos
+
+00:02:59.070 --> 00:03:00.990
+reservando un espacio de memoria que en este
+
+00:03:00.990 --> 00:03:03.815
+caso es cero x cero cero tres y
+
+00:03:03.815 --> 00:03:06.614
+le estamos asignando un valor, y ese valor
+
+00:03:06.614 --> 00:03:09.095
+es la dirección de memoria de la variable
+
+00:03:09.095 --> 00:03:11.415
+letra, en este caso, cero x cero cero
+
+00:03:11.415 --> 00:03:14.235
+uno. Así es como funcionan los punteros internamente.
+
+00:03:14.570 --> 00:03:16.330
+Así como tú le asignaste un valor a
+
+00:03:16.330 --> 00:03:18.970
+la variable puntero, que en este momento contiene
+
+00:03:18.970 --> 00:03:21.850
+la dirección de memoria de la letra a,
+
+00:03:21.850 --> 00:03:24.650
+podrías reemplazar ese valor igual que con cualquier
+
+00:03:24.650 --> 00:03:27.770
+otra variable para que almacene otras direcciones de
+
+00:03:27.770 --> 00:03:32.105
+memoria. Algo interesante es que, si tú estás
+
+00:03:32.165 --> 00:03:34.805
+con la variable puntero apuntando a la dirección
+
+00:03:34.805 --> 00:03:38.245
+de la memoria cero cero uno y el
+
+00:03:38.245 --> 00:03:42.165
+valor cambia, entonces, por medio de ese puntero
+
+00:03:42.165 --> 00:03:44.960
+también notarás el cambio del valor. Es decir,
+
+00:03:45.180 --> 00:03:48.140
+podrás obtener un valor por medio de su
+
+00:03:48.140 --> 00:03:50.640
+referencia de dirección en lugar de leer directamente
+
+00:03:50.780 --> 00:03:54.480
+el valor. La forma en la que funciona,
+
+00:03:54.620 --> 00:03:57.584
+pues es la siguiente. Si yo tuviera un
+
+00:03:57.704 --> 00:04:02.145
+en mi código, por ejemplo, el ampersand letra,
+
+00:04:02.205 --> 00:04:04.845
+esto sería igual a la dirección cero cero
+
+00:04:04.845 --> 00:04:08.925
+uno. Si yo quisiera hacer una comparación con
+
+00:04:08.925 --> 00:04:11.005
+un if o una comparación lógica de cualquier
+
+00:04:11.005 --> 00:04:13.420
+tipo, yo podría darme cuenta que si yo
+
+00:04:13.420 --> 00:04:15.420
+veo el valor de la variable puntero sin
+
+00:04:15.420 --> 00:04:19.040
+asterisco igual a cero cero uno, eso sería
+
+00:04:19.100 --> 00:04:23.340
+verdadero. Otra forma de acceder a estas variables
+
+00:04:23.340 --> 00:04:26.655
+es utilizando el asterisco. Por ejemplo, yo notaría
+
+00:04:26.655 --> 00:04:29.375
+que si yo uso asterisco puntero, tengo el
+
+00:04:29.375 --> 00:04:32.915
+valor a como carácter, y si yo utilizo
+
+00:04:33.055 --> 00:04:36.035
+el carácter ampersant antes de la palabra puntero,
+
+00:04:36.415 --> 00:04:39.400
+estoy obteniendo la dirección de memoria, pero del
+
+00:04:39.400 --> 00:04:42.840
+puntero, es decir, cero cero tres. Sé que
+
+00:04:42.840 --> 00:04:45.639
+esto puede sonar un poco confuso, pero lo
+
+00:04:45.639 --> 00:04:47.720
+vamos a aclarar mucho más cuando lo veamos
+
+00:04:47.720 --> 00:04:50.040
+en código. Para eso, te invito a la
+
+00:04:50.040 --> 00:04:50.794
+próxima clase.

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/03-Uso de Punteros en C Variables y Memoria Dinámica.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:990f893d1b943e9280983c04f85735b1d0d82cccc4f3bd4a32dfc0202a76dfe5
+size 56911668

subir/Curso de Programación Orientada a Objetos con C/01-Memoria dinámica/03-Uso de Punteros en C Variables y Memoria Dinámica.vtt

@@ -0,0 +1,325 @@
+WEBVTT
+
+00:00:03.040 --> 00:00:05.440
+Ahora que ya sabes cómo funcionan teóricamente los
+
+00:00:05.440 --> 00:00:07.520
+punteros y lo que son, vamos a comenzar
+
+00:00:07.520 --> 00:00:10.559
+a utilizarlos en ejemplos de código con el
+
+00:00:10.559 --> 00:00:13.519
+ejemplo de la clase anterior. Vamos a realizar
+
+00:00:13.519 --> 00:00:16.255
+nuestro código con punteros. En primer lugar, quiero
+
+00:00:16.255 --> 00:00:19.695
+realizar el ejemplo de la clase anterior, por
+
+00:00:19.695 --> 00:00:22.335
+lo que vamos a crear nuestra variable tipo
+
+00:00:22.335 --> 00:00:25.855
+carácter que se llama letra y que va
+
+00:00:25.855 --> 00:00:30.759
+a contener precisamente la letra a. A continuación,
+
+00:00:30.980 --> 00:00:33.160
+vamos a crear una variable de tipo puntero
+
+00:00:33.940 --> 00:00:36.260
+para un carácter que se va a llamar
+
+00:00:36.260 --> 00:00:40.980
+puntero y va a almacenar el valor del
+
+00:00:40.980 --> 00:00:46.114
+puntero de la variable letra. Ahora, vamos a
+
+00:00:46.114 --> 00:00:49.315
+comenzar a inspeccionar cuáles son los valores de
+
+00:00:49.315 --> 00:00:52.135
+cada uno de estas variables y cómo obtenemos
+
+00:00:52.675 --> 00:00:55.954
+los diferentes datos dependiendo de lo que deseemos
+
+00:00:55.954 --> 00:00:58.114
+obtener, sobre cuál es su dirección, cuál es
+
+00:00:58.114 --> 00:01:01.410
+su valor, etcétera. Vamos a hacerlo mostrándolo en
+
+00:01:01.410 --> 00:01:03.670
+la pantalla de la terminal con c out.
+
+00:01:03.809 --> 00:01:05.970
+Veamos que contiene el valor de la variable
+
+00:01:05.970 --> 00:01:13.284
+letra. Vamos a ejecutarlo con f seis. Ahora
+
+00:01:13.424 --> 00:01:16.064
+se está ejecutando nuestro código y listo, ahí
+
+00:01:16.064 --> 00:01:18.865
+está. Tenemos nuestra letra a como salida de
+
+00:01:18.865 --> 00:01:22.465
+la terminal. Como puedes ver, vamos bien y
+
+00:01:22.465 --> 00:01:25.204
+esto es lo que esperaríamos de un inicio.
+
+00:01:25.970 --> 00:01:28.610
+Pero, ¿qué pasaría si yo quisiera mostrar la
+
+00:01:28.610 --> 00:01:31.330
+dirección de memoria de la variable letra? Bueno,
+
+00:01:31.330 --> 00:01:34.690
+tendría yo que utilizar ampersand. Vamos a ejecutarlo
+
+00:01:34.690 --> 00:01:37.330
+y vamos a ver qué nos devuelve. Aquí
+
+00:01:37.330 --> 00:01:40.795
+tienes. Esto es una serie de caracteres extraños
+
+00:01:41.015 --> 00:01:43.015
+y la lo que tú te preguntarás tal
+
+00:01:43.015 --> 00:01:44.534
+vez es como, ¿qué es lo que está
+
+00:01:44.534 --> 00:01:47.674
+pasando aquí? Bueno, es muy simple. Como nuestro
+
+00:01:47.975 --> 00:01:52.615
+lenguaje de programación interpreta el puntero a partir
+
+00:01:52.615 --> 00:01:54.455
+de que es un carácter, lo hace de
+
+00:01:54.455 --> 00:01:56.600
+forma un poquito rara. Lo que vamos a
+
+00:01:56.600 --> 00:01:58.560
+hacer es ayudarle a comprender qué nos lo
+
+00:01:58.560 --> 00:02:00.159
+quiere, qué nos lo tiene que mostrar como
+
+00:02:00.159 --> 00:02:03.700
+número, así que vamos a hacer una conversión.
+
+00:02:03.759 --> 00:02:06.720
+Para esto, podemos utilizar la siguiente sintaxis en
+
+00:02:06.720 --> 00:02:09.039
+C más más, que es utilizar, por ejemplo,
+
+00:02:09.039 --> 00:02:11.985
+un paréntesis antes de la variable que queremos
+
+00:02:12.685 --> 00:02:15.665
+convertir de tipo, y vamos a poder convertir
+
+00:02:15.725 --> 00:02:17.485
+esto de un carácter o de un puntero
+
+00:02:17.485 --> 00:02:19.965
+de carácter a uno de entero. Y lo
+
+00:02:19.965 --> 00:02:22.385
+que tenemos que poner entre paréntesis es justo
+
+00:02:22.490 --> 00:02:24.030
+cuál es el tipo en el que queremos
+
+00:02:24.250 --> 00:02:26.970
+convertirlo. Entonces, si queremos convertirlo en un puntero
+
+00:02:26.970 --> 00:02:30.830
+de entero, sería así, le decimos int asterisco.
+
+00:02:32.010 --> 00:02:33.930
+Con esto, una vez que ejecutemos de nuevo
+
+00:02:33.930 --> 00:02:37.745
+nuestro programa, obtenemos una dirección de memoria que
+
+00:02:37.745 --> 00:02:41.425
+está en hexadecimal. Es un sistema numérico donde
+
+00:02:41.425 --> 00:02:44.385
+podemos al, pues representar código binario de una
+
+00:02:44.385 --> 00:02:47.025
+forma más compacta y que, por lo general,
+
+00:02:47.025 --> 00:02:49.925
+empieza así, cero x y el valor numérico.
+
+00:02:50.920 --> 00:02:54.280
+Como puedes ver aquí, pues, mi letra a
+
+00:02:54.280 --> 00:02:57.400
+está almacenada en la dirección de memoria que
+
+00:02:57.400 --> 00:03:00.459
+comienza con siete FFY termina con d siete,
+
+00:03:00.840 --> 00:03:04.200
+¿ok? Esto puede cambiar dependiendo de tu computadora,
+
+00:03:04.200 --> 00:03:06.195
+por supuesto. La dirección de memoria va a
+
+00:03:06.195 --> 00:03:09.875
+depender de cuántos programas tengas abiertos y el
+
+00:03:09.875 --> 00:03:12.435
+momento de ejecución de tu código. Pero lo
+
+00:03:12.435 --> 00:03:14.515
+que es importante es que puedes observar que
+
+00:03:14.515 --> 00:03:16.755
+es una memoria, es una dirección de memoria
+
+00:03:16.755 --> 00:03:19.500
+que está en hexadecimal. Y como lo puedes
+
+00:03:19.500 --> 00:03:22.459
+estar pensando, ahora el valor de amperesant letra
+
+00:03:22.459 --> 00:03:24.959
+también está almacenado dentro de la variable puntero.
+
+00:03:25.180 --> 00:03:27.019
+Vamos a ver cómo es es que esto
+
+00:03:27.019 --> 00:03:29.180
+sucede. Voy a imprimir el valor de la
+
+00:03:29.180 --> 00:03:32.745
+variable puntero en la terminal, no sin antes
+
+00:03:32.745 --> 00:03:34.665
+terminar la línea anterior con un, pues, con
+
+00:03:34.665 --> 00:03:35.945
+un cambio de línea para que se vea
+
+00:03:35.945 --> 00:03:41.465
+en dos líneas diferentes la salida. Ahora voy
+
+00:03:41.465 --> 00:03:44.400
+a ejecutar este programa y, como puedes ver,
+
+00:03:44.480 --> 00:03:46.879
+pues tengo mi salida, pero tengo un error
+
+00:03:46.879 --> 00:03:50.560
+porque me faltó convertirlo a valor de entero.
+
+00:03:50.560 --> 00:03:52.640
+Entonces, voy a hacer la conversión y voy
+
+00:03:52.640 --> 00:03:56.079
+a volver a ejecutar mi programa. Listo, como
+
+00:03:56.079 --> 00:03:58.879
+puedes ver, tanto ampersand letra como la variable
+
+00:03:58.879 --> 00:04:02.085
+puntero están almacenando la misma dirección de memoria,
+
+00:04:02.085 --> 00:04:04.905
+o mejor dicho, la variable puntero está almacenando
+
+00:04:05.525 --> 00:04:09.685
+la dirección de memoria de la variable letra.
+
+00:04:09.685 --> 00:04:12.645
+Otra cosa que podemos hacer es acceder directamente
+
+00:04:12.645 --> 00:04:15.770
+al valor de la variable letra desde su
+
+00:04:15.770 --> 00:04:18.570
+puntero. La forma de hacerlo sería utilizar el
+
+00:04:18.570 --> 00:04:21.290
+asterisco seguido de el nombre de la variable,
+
+00:04:21.290 --> 00:04:23.530
+por ejemplo, que podría acceder al valor de
+
+00:04:23.530 --> 00:04:28.444
+la letra a directamente con asterisco puntero. Y
+
+00:04:28.444 --> 00:04:30.525
+voy a agregar un cambio de línea en
+
+00:04:30.525 --> 00:04:37.185
+el renglón anterior y ejecutamos. Y ahí está,
+
+00:04:37.245 --> 00:04:40.444
+ahora estás viendo que tanto el puntero como
+
+00:04:40.444 --> 00:04:42.685
+Ampers and puntero tienen el mismo valor, pero
+
+00:04:42.685 --> 00:04:46.190
+además el el valor que está accediendo indirectamente
+
+00:04:46.490 --> 00:04:49.530
+puntero es la letra a. Esto es gracias
+
+00:04:49.530 --> 00:04:52.490
+a la capacidad de memoria dinámica de seis
+
+00:04:52.490 --> 00:04:54.730
+e más más y lo que estamos haciendo
+
+00:04:54.730 --> 00:04:58.735
+es directamente apuntar el puntero hasta el registro
+
+00:04:58.735 --> 00:05:03.975
+de la variable letra. Con esto, podemos realizar
+
+00:05:03.975 --> 00:05:06.615
+muchísimas operaciones de memoria dinámica, lo que nos
+
+00:05:06.615 --> 00:05:10.630
+permitirá, utilizando una misma variable, acceder a diferentes
+
+00:05:10.630 --> 00:05:12.390
+lugares de la memoria del programa o de
+
+00:05:12.390 --> 00:05:16.150
+la memoria de nuestra computadora para poder realizar
+
+00:05:16.150 --> 00:05:19.670
+todas las operaciones que nos sean útiles. Y
+
+00:05:19.670 --> 00:05:22.950
+con esto podemos realizar bastantes operaciones que vamos
+
+00:05:22.950 --> 00:05:25.205
+a ver más adelante. Nos vemos en la
+
+00:05:25.205 --> 00:05:28.905
+próxima clase, donde utilizaremos nuestros conocimientos de variables,
+
+00:05:29.445 --> 00:05:32.585
+estructuras y punteros para poder generar nuestras propias
+
+00:05:32.645 --> 00:05:33.705
+estructuras de datos.

subir/Curso de Programación Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.mp4

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

subir/Curso de Programación Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.vtt

@@ -0,0 +1,331 @@
+WEBVTT
+
+00:00:03.120 --> 00:00:05.279
+Vamos a hablar sobre estructuras de datos y
+
+00:00:05.279 --> 00:00:08.820
+tipos personalizados. Hasta donde vimos en clases anteriores,
+
+00:00:08.960 --> 00:00:12.855
+hemos utilizado variables de tamaño fijo y, si
+
+00:00:12.855 --> 00:00:15.455
+queremos crear algo de tamaño variable, pues hemos
+
+00:00:15.455 --> 00:00:18.935
+creado listas. Pero estas tienen las limitantes de
+
+00:00:18.935 --> 00:00:21.814
+que solamente pueden ser elementos de un mismo
+
+00:00:21.814 --> 00:00:25.414
+tipo y que necesitamos, pues realizar algunos trucos
+
+00:00:25.414 --> 00:00:28.420
+con ellas. Para poder realizar, por ejemplo, listas
+
+00:00:28.420 --> 00:00:30.840
+de caracteres, tuvimos que recurrir a la librería
+
+00:00:30.900 --> 00:00:33.700
+string para realizarlo de una mejor manera. Sin
+
+00:00:33.700 --> 00:00:37.260
+embargo, existen formas de definir tus propias estructuras
+
+00:00:37.260 --> 00:00:40.500
+de datos y tipos personalizados para poder utilizarlos
+
+00:00:40.500 --> 00:00:43.434
+durante tu programa y que sea mucho más
+
+00:00:43.434 --> 00:00:46.635
+versátil. Esta característica es una de las principales
+
+00:00:46.635 --> 00:00:49.295
+características de lenguajes como seis C más más
+
+00:00:49.355 --> 00:00:51.515
+y es parte de lo que le da
+
+00:00:51.515 --> 00:00:53.594
+la mayor parte, pues, de su potencia y
+
+00:00:53.594 --> 00:00:56.790
+funciona gracias a los punteros. Vamos a ver
+
+00:00:56.790 --> 00:01:00.890
+este ejemplo que estás viendo en pantalla. Aquí
+
+00:01:00.950 --> 00:01:03.510
+creamos una lista de caracteres que se llama
+
+00:01:03.510 --> 00:01:06.150
+texto. ¿Cómo sabemos que es una lista? Bueno,
+
+00:01:06.150 --> 00:01:08.229
+el compilador lo sabe porque usamos corchetes y
+
+00:01:08.229 --> 00:01:10.545
+sabe que es tipo char. Así que cuando
+
+00:01:10.545 --> 00:01:12.625
+le pasamos una cadena de texto que dice
+
+00:01:12.625 --> 00:01:16.465
+hola, sabe interpretarlo e infiere que es una
+
+00:01:16.465 --> 00:01:19.265
+lista de caracteres. Pero una forma más correcta
+
+00:01:19.265 --> 00:01:21.844
+de escribirlo para C más más, sin abreviarlo
+
+00:01:21.985 --> 00:01:26.240
+de esta manera, sería la siguiente. Esta, utilizando
+
+00:01:26.300 --> 00:01:29.260
+comillas simples, separando los elementos por comas y
+
+00:01:29.260 --> 00:01:31.980
+siguiendo la sintaxis estándar de cómo deben ser
+
+00:01:31.980 --> 00:01:34.380
+las listas. Digamos que la anterior solamente es
+
+00:01:34.380 --> 00:01:37.825
+una forma fácil de escribir esto mismo, Pero
+
+00:01:37.884 --> 00:01:40.604
+todavía tenemos varias limitantes. Una de ellas es
+
+00:01:40.604 --> 00:01:43.485
+que no tenemos, pues, una forma fácil de
+
+00:01:43.485 --> 00:01:46.365
+acceder, pues, al tamaño de la lista más
+
+00:01:46.365 --> 00:01:49.970
+que realizando size off y otras cosas. Bueno,
+
+00:01:50.190 --> 00:01:52.910
+para poder hacer una estructura tan compleja como
+
+00:01:52.910 --> 00:01:54.830
+esta, la verdad es que C más más
+
+00:01:54.830 --> 00:01:57.790
+lo realiza por medio de almacenar cada una
+
+00:01:57.790 --> 00:01:59.470
+de las letras en un espacio de memoria
+
+00:01:59.470 --> 00:02:03.475
+distinto. Esto sería el equivalente utilizando punteros. Podemos
+
+00:02:03.475 --> 00:02:05.954
+ver cómo creamos una variable tipo puntero, que
+
+00:02:05.954 --> 00:02:08.595
+se llama texto, y luego tomamos todas las
+
+00:02:08.595 --> 00:02:12.355
+letras de la de la lista hola y
+
+00:02:12.355 --> 00:02:14.834
+le decimos que las interprete como punteros de
+
+00:02:14.834 --> 00:02:18.290
+carácter. Esto podría leerse más complicado, pero, como
+
+00:02:18.290 --> 00:02:21.650
+ya vimos en la clase teórica de cómo
+
+00:02:21.650 --> 00:02:24.930
+funcionan las direcciones de memoria, pues se es
+
+00:02:24.930 --> 00:02:27.810
+más claro entender que aquí cada letra se
+
+00:02:27.810 --> 00:02:30.535
+está almacenando en un registro de memoria. Lo
+
+00:02:30.535 --> 00:02:33.015
+que está pasando con este código es lo
+
+00:02:33.015 --> 00:02:36.455
+siguiente. Podemos ver que en la primera posición
+
+00:02:36.455 --> 00:02:38.935
+de memoria, en este caso, supongamos que comenzamos
+
+00:02:38.935 --> 00:02:41.895
+en la dirección cero, estaría la h, en
+
+00:02:41.895 --> 00:02:44.700
+la uno estaría la o, y así sucesivamente
+
+00:02:44.700 --> 00:02:46.780
+hasta llegar a la última letra que es
+
+00:02:46.780 --> 00:02:50.140
+estaría en la dirección tres. Otra cosa, pues,
+
+00:02:50.140 --> 00:02:52.299
+a forma de curiosidad sobre C más más
+
+00:02:52.299 --> 00:02:54.939
+es que utiliza un carácter de espacio vacío
+
+00:02:54.939 --> 00:02:57.200
+en la tabla ASCII, que es el diagonal
+
+00:02:57.260 --> 00:03:01.385
+invertida cero, para saber dónde termina de escribirse,
+
+00:03:01.385 --> 00:03:04.425
+pues, una lista de caracteres. De esta manera,
+
+00:03:04.425 --> 00:03:06.425
+cuando llega a la dirección de memoria cero
+
+00:03:06.425 --> 00:03:09.225
+cero cuatro, termina de ejecutar lo que esté
+
+00:03:09.225 --> 00:03:12.025
+haciendo con esta cadena de caracteres y da
+
+00:03:12.025 --> 00:03:17.630
+por concluido ese proceso. Pero no siempre vamos
+
+00:03:17.630 --> 00:03:19.970
+a utilizar cadenas de caracteres, a veces necesitamos
+
+00:03:20.430 --> 00:03:23.570
+realizar estructuras más complejas. Por ejemplo, si queremos
+
+00:03:23.870 --> 00:03:26.430
+pensar en una entidad como una persona, podemos
+
+00:03:26.430 --> 00:03:29.465
+pensar en sus diferentes propiedades o características dentro
+
+00:03:29.465 --> 00:03:31.465
+de nuestro programa, por ejemplo, el nombre y
+
+00:03:31.465 --> 00:03:34.105
+la edad. Son valores que nos pueden llegar
+
+00:03:34.105 --> 00:03:36.105
+a ser muy útiles si queremos hacer casi
+
+00:03:36.105 --> 00:03:39.225
+cualquier tipo de plataforma, ya que desde Facebook
+
+00:03:39.225 --> 00:03:42.209
+o cualquier red social hasta una pequeña aplicación
+
+00:03:42.209 --> 00:03:45.010
+móvil probablemente maneje este tipo de datos. Y
+
+00:03:45.010 --> 00:03:46.290
+la forma en la que se hacen es
+
+00:03:46.290 --> 00:03:50.129
+creando estructuras definidas con estos campos. Tenemos una
+
+00:03:50.129 --> 00:03:53.810
+estructura que se llama persona y contiene diferentes
+
+00:03:53.810 --> 00:03:56.230
+valores que son, pues el nombre, la edad
+
+00:03:56.505 --> 00:03:59.245
+dependiendo de tu aplicación, pueden ser otros valores.
+
+00:04:00.345 --> 00:04:01.785
+Pues, la forma en que se van a
+
+00:04:01.785 --> 00:04:04.665
+almacenar dentro de C más más es de
+
+00:04:04.665 --> 00:04:07.545
+esta manera. Si tú tienes una sección de
+
+00:04:07.545 --> 00:04:10.380
+memoria destinada para tu estructura tipo persona, va
+
+00:04:10.380 --> 00:04:13.980
+a tener dos dos segmentos de memoria, uno
+
+00:04:13.980 --> 00:04:15.900
+para la cadena de texto que representa el
+
+00:04:15.900 --> 00:04:18.880
+nombre y otro para el número que representa
+
+00:04:19.019 --> 00:04:23.040
+la edad. Y podrías agregarle la cantidad de
+
+00:04:24.300 --> 00:04:27.074
+elementos a la persona y que haría sería
+
+00:04:27.074 --> 00:04:30.995
+simplemente ocupar esos espacios de memoria en la
+
+00:04:30.995 --> 00:04:34.035
+RAM. Si te das cuenta, la palabra Diana
+
+00:04:34.035 --> 00:04:36.755
+está almacenada con cara a carácter en un
+
+00:04:36.755 --> 00:04:39.950
+espacio de memoria distinto, y el número veintiséis
+
+00:04:40.170 --> 00:04:42.490
+correspondiente a la edad está almacenado también en
+
+00:04:42.490 --> 00:04:45.530
+su propia dirección de memoria. Algo curioso para
+
+00:04:45.530 --> 00:04:48.250
+notar es que la si tuviéramos que obtener
+
+00:04:48.250 --> 00:04:50.570
+cuál es la dirección de memoria de la
+
+00:04:50.570 --> 00:04:53.854
+persona en general, coincidiría con la dirección de
+
+00:04:53.854 --> 00:04:56.574
+memoria inicial de el nombre. De manera que,
+
+00:04:56.574 --> 00:04:59.854
+para C más más es una forma de
+
+00:04:59.854 --> 00:05:02.574
+un poco ambigua de almacenar los datos, pero,
+
+00:05:02.574 --> 00:05:05.099
+sin embargo, resuelve la forma de hacerlo y
+
+00:05:05.099 --> 00:05:07.819
+aunque solo almacene los datos en sí, sí
+
+00:05:07.819 --> 00:05:12.379
+tiene una forma de reconocer cómo estos diferentes
+
+00:05:12.379 --> 00:05:15.986
+valores pertenecen a la persona, y todo ello
+
+00:05:15.986 --> 00:05:17.986
+nos lo permite gracias a el acceso con
+
+00:05:17.986 --> 00:05:20.406
+punteros. Vamos a ver en la próxima clase
+
+00:05:20.626 --> 00:05:23.426
+un ejemplo de código de cómo realizaríamos nuestras
+
+00:05:23.426 --> 00:05:25.141
+propias estructuras en C más más.

subir/Curso de Programación Orientada a Objetos con C/02-Estructuras de datos/02-Creación y uso de estructuras y punteros en C.mp4

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