diff --git a/.gitattributes b/.gitattributes index 767ee4a70cf4dddc3097e31b8e65abf59bf9b9e8..27221a1c25d8cd8befffe776e02b0020cccb3fd6 100644 --- a/.gitattributes +++ b/.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 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Peticiones as\303\255ncronas con for await en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Peticiones as\303\255ncronas con for await en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..125cd9fe8bd9828107884a85a47813975699e4b8 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Peticiones as\303\255ncronas 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..f5afaae05933bcd8fbbee83450e739f4f7926f94 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-Resumen.html" @@ -0,0 +1,129 @@ + + + + + + + Peticiones asíncronas con for await en JavaScript + + + +
+
+

Resumen

¿Cómo realizar múltiples peticiones HTTP de forma eficiente en JavaScript?

+

¿Alguna vez te has enfrentado a la necesidad de realizar múltiples peticiones HTTP en un proyecto de desarrollo web? Este es un desafío común, especialmente cuando interactuamos con varias APIs al mismo tiempo. La solución más eficiente es usar el ciclo for await...of, combinando async y await para ejecutar promesas de manera asíncrona. Esto no solo hace que el código sea más limpio, sino que también mejora el rendimiento y la experiencia del usuario al no bloquear la carga de otros elementos en la aplicación.

+

¿Qué es y cómo funciona for await...of?

+

El for await...of es una herramienta poderosa en JavaScript. Es un bucle que permite iterar sobre objetos asíncronos, como promesas, de manera que podemos esperar a que cada una se resuelva antes de continuar con la siguiente. La sintaxis es intuitiva y se adapta bien cuando necesitas trabajar con múltiples solicitudes HTTP.

+

Por ejemplo, digamos que tienes un array de URLs de una API, como la de Rick and Morty. Puedes iterar sobre cada URL y realizar una petición fetch asíncrona de la siguiente manera:

+
async function fetchNewData() {
+  const URLs = [
+    'url1',  // Reemplazar con URLs reales
+    'url2',
+    'url3'
+  ];
+
+  try {
+    for await (let URL of URLs) {
+      let response = await fetch(URL);
+      let data = await response.json();
+      console.log(data);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+fetchNewData();
+
+

¿Cómo estructurar el código para manejar errores?

+

Manejar errores es fundamental cuando trabajas con peticiones asíncronas. Utilizar bloques try...catch es la manera recomendada para capturar y manejar errores, como fallas en las solicitudes de red. Esto asegura que tu aplicación no falle por completo si una de las peticiones falla y puedes reaccionar adecuadamente, por ejemplo, mostrando un mensaje de error al usuario.

+

Dentro del ciclo for await, el bloque try se encarga de realizar la fetch y convertir la respuesta a formato JSON. Si alguna de estas operaciones falla, el control pasa al bloque catch, donde podemos manejar el error de manera elegante.

+

¿Cuáles son los beneficios de usar for await...of en proyectos reales?

+
    +
  • Rendimiento sin bloqueo: La ejecución de peticiones de manera asíncrona permite al navegador seguir procesando otros elementos de la interfaz de usuario, mejorando la experiencia.
    • +
  • Código más limpio y manejable: Al usar async/await, tu código se vuelve más legible y fácil de mantener comparado con las promesas tradicionales o los callbacks.
    • +
  • Escalabilidad: Puedes fácilmente adaptar este enfoque para manejar más URLs o añadir lógica adicional al proceso de cada respuesta.
    • +
+

Implementar estas técnicas en tus proyectos no solo optimiza su rendimiento, sino que también proporciona una base robusta para manejar escenarios complejos donde múltiples elementos de datos deben ser cargados y procesados simultáneamente. Así que, ¡anímate a aplicar for await...of en tus futuros desarrollos y experimenta la eficiencia y fluidez mejorada de tus aplicaciones!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-app_e835cf0c-719c-47e7-a782-0ca063e8d59b.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/04-app_e835cf0c-719c-47e7-a782-0ca063e8d59b.js" new file mode 100644 index 0000000000000000000000000000000000000000..3ac68e689d47a15c5122b020ad6a9cb886bc550a --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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); + } +} diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..61a60919f36f4852982af737a906132a8cc85ef5 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a98c5e5cd344803d714ac9076a951f1ecd526c242e83520869b2c653b681d023 +size 44725453 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..da0946c5d07d18ecc61c50bc5fb94de77b3f1234 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Fundamentos de HTTP ClienteServidor y M\303\251todos de Petici\303\263n.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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..6b1020e88dba7f17703e8a67f7c06ac2e7407472 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/05-Resumen.html" @@ -0,0 +1,119 @@ + + + + + + + Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición + + + +
+
+

Resumen

¿Qué es HTTP y cómo funciona en el desarrollo web?

+

En el mundo del desarrollo web, HTTP es un concepto que ningún desarrollador puede ignorar. Este protocolo es la base de las interacciones entre cliente y servidor, lo que permite a nuestras aplicaciones web funcionar de manera efectiva. Entendamos cómo esta tecnología fundamental opera y cómo podemos aprovecharla al máximo para crear experiencias de usuario excepcionales.

+

¿Cómo se establece la comunicación cliente-servidor?

+

La relación entre un cliente y un servidor es crucial para el funcionamiento de cualquier aplicación web. El cliente, que puede ser un navegador, una computadora o un dispositivo móvil, envía solicitudes al servidor, que está hospedando el contenido o servicio deseado. En respuesta, el servidor provee la información o realiza acciones solicitadas, lo que permite al cliente renderizar páginas, actualizar datos o recibir contenido nuevo.

+

¿Qué papel juega la URL en las solicitudes HTTP?

+

Cada vez que ingresamos una URL en un navegador, como "platzi.com", se inicia un proceso en el que se envía una solicitud HTTP al servidor correspondiente. Este mecanismo es el que permite al cliente obtener la información necesaria para mostrar al usuario la página solicitada. Si todo va bien, el servidor proporciona el contenido; si hay un problema, como un recurso que no se encuentra, devuelve un error 404.

+

¿Cuáles son los verbos HTTP y qué acciones permiten?

+

Los verbos HTTP son esenciales para definir la acción que se desea realizar durante una interacción cliente-servidor. A continuación, exploramos los verbos más comunes:

+
    +
  • +

    GET: Se utiliza para obtener información que ya existe en el servidor sin realizar ningún cambio. Por ejemplo, al acceder a "platzi.com", se envía un GET para recibir y mostrar la página en el navegador.

    +
    • +
  • +

    POST: Este verbo es empleado para enviar datos nuevos al servidor. Cuando publicamos una actualización en redes sociales, como en Facebook, se usa un POST para almacenar esa nueva información en la base de datos del usuario.

    +
    • +
  • +

    PATCH y PUT: Ambos verbos se utilizan para actualizar información existente. Si se requiere corregir un error en un post o actualizar un perfil, PATCH y PUT envían las modificaciones al servidor para ser guardadas.

    +
    • +
  • +

    DELETE: Se emplea cuando deseamos eliminar un recurso del servidor. Puede ser la foto que subimos hace años y que ya no queremos conservar.

    +
    • +
+

¿Por qué es importante comprender estos conceptos?

+

Conocer el funcionamiento de HTTP y los verbos asociados es fundamental para cualquier desarrollador web. Este entendimiento no solo nos permite crear aplicaciones más robustas y eficientes, sino que también nos da el poder de optimizar la comunicación cliente-servidor. La habilidad de manejar HTTP adecuadamente te prepara para cualquier desafío en el desarrollo web moderno.

+

¡Sigue aprendiendo y explorando! Cada concepto nuevo que domines es un paso adelante hacia convertirte en un desarrollador excepcional.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis en Network.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis en Network.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..2b12344901036a50634a46f4fddbf8ad7a4120db --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis en Network.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:66c9f613d22a1fd27c186e3efd7ce945aeab81c825392d1d6d9cacf9ec6a4981 +size 55370686 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis en Network.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis en Network.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..d41f2a3c93d3c626d1bd4c60935e348efea22fd9 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Peticiones HTTP en Frontend Uso de Fetch y An\303\241lisis 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..c8d938d89705d691d763b7cad9d5a15c9405be83 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-Resumen.html" @@ -0,0 +1,134 @@ + + + + + + + Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network + + + +
+
+

Resumen

¿Qué es HTTP y cómo lo utilizamos en el front-end?

+

Al desarrollar aplicaciones web, entender cómo manejar peticiones HTTP es fundamental para la comunicación entre el front-end y los servidores. HTTP (Hypertext Transfer Protocol) es el protocolo que permite realizar solicitudes de datos y enviar información entre clientes y servidores. En la práctica, se emplean métodos HTTP mediante la función fetch en JavaScript para interactuar con APIs.

+

¿Cómo funcionan las peticiones con fetch?

+

Cuando utilizamos fetch, estamos solicitando a un servidor que nos proporcione información que luego podemos manejar y mostrar en el DOM. Mediante fetch, hacemos un pedido a una API, que a menudo nos devuelve datos en formato JSON. Usar fetch es una manera de realizar peticiones HTTP de forma asíncrona, lo que nos permite mejorar la experiencia del usuario al cargar datos sin interrumpir el flujo de la aplicación.

+
fetch('https://jsonplaceholder.typicode.com/posts')
+  .then(response => response.json())
+  .then(data => console.log(data));
+
+

Este código realiza una solicitud GET a una API de ejemplo que devuelve información ficticia.

+

¿Qué significan los códigos de estado HTTP?

+

Al realizar peticiones HTTP, es crucial interpretar los códigos de estado que las acompañan, ya que nos indican el resultado de la operación solicitada:

+
    +
  • 200 OK: La solicitud se ha realizado con éxito.
    • +
  • 404 Not Found: El recurso solicitado no ha sido encontrado.
    • +
  • 500 Internal Server Error: Ha ocurrido un error en el servidor.
    • +
+

Conocer estos códigos nos ayuda a diagnosticar problemas y comprender la comunicación entre el cliente y el servidor.

+

¿Cómo verificar solicitudes y respuestas en el navegador?

+

El navegador ofrece herramientas de desarrollo que facilitan el monitoreo de las solicitudes HTTP. La pestaña "Network" nos permite observar:

+
    +
  • Las solicitudes a HTML, JavaScript y CSS.
    • +
  • La URL a la que se realiza la petición.
    • +
  • El estado de la respuesta obtenida, como un 200 OK.
    • +
  • La velocidad de carga de los recursos.
    • +
+

Accediendo a la pestaña "Network", podemos determinar el éxito de nuestras solicitudes y entender qué ocurre con cada petición que se realiza, fortaleciendo nuestros conocimientos sobre el manejo de datos en aplicaciones web.

+

Ejemplo práctico de interacción con una API

+

Imaginemos que estamos generando información a partir de una API utilizando fetch. Podemos desglosar y trabajar con la información regresada para, por ejemplo, obtener detalles de usuarios y mostrarlos en nuestra aplicación.

+

Al ejecutar fetch, se consulta a la API y, mediante promesas (then), manejamos la respuesta. Si la petición es exitosa, se obtiene un objeto JSON con los datos:

+
fetch('https://jsonplaceholder.typicode.com/posts')
+  .then(response => response.json())
+  .then(data => {
+    // Se procesa la data para mostrar títulos, usuarios, etc.
+    data.forEach(post => {
+      console.log(post.title);
+    });
+  });
+
+

Esta estructura básica demuestra cómo podemos extender las funcionalidades de fetch para adecuarlas a las necesidades de nuestra aplicación.

+

La comprensión de HTTP y fetch nos proporciona el control sobre las interacciones del front-end con el servidor, permitiéndonos optimizar el proceso de desarrollo y brindando una experiencia de usuario más eficiente y dinámica. ¡Sigue explorando y experimentando con diferentes escenarios para ampliar tus habilidades!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-app_954bf774-9dc6-4b66-b9bb-9935d30de91d.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/06-app_954bf774-9dc6-4b66-b9bb-9935d30de91d.js" new file mode 100644 index 0000000000000000000000000000000000000000..61b62ad59f7f0d6a203cb7a1ba6305d394c19070 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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)); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..be98a1e51a2bffc32ec4e4d1f1d38a2c9b7c6f76 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Peticiones HTTP en JavaScript Fetch GET POST y DELETE.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..b2e31e8c368b4bd3a452d0935f5fc685d3752fda --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..86afc512a28e1087095952dc4b8fd03e82da4494 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-Resumen.html" @@ -0,0 +1,148 @@ + + + + + + + Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE + + + +
+
+

Resumen

¿Cómo hacer peticiones HTTP escalables en JavaScript?

+

Las peticiones HTTP son fundamentales para la interacción con servidores y APIs, un proceso esencial en la creación de aplicaciones web. Implementar estas peticiones de manera eficiente puede marcar una gran diferencia en el rendimiento general de una aplicación. Aquí aprenderás a estructurar un código de JavaScript que permita realizar peticiones como GET, POST y DELETE de forma escalable.

+

¿Qué estructura necesita una función para realizar peticiones HTTP?

+

Para gestionar las peticiones HTTP de manera centralizada, utilizaremos la función sendHttpRequest. Esta función se encargará de recibir el método HTTP, la URL y el tipo de datos que se enviarán en la petición.

+
function sendHttpRequest(method, url, data) {
+    return fetch(url, {
+        method: method,
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    })
+    .then(response => response.json());
+}
+
+

¿Cómo utilizar fetchPost para obtener datos?

+

La función fetchPost es la encargada de hacer uso de sendHttpRequest para realizar una petición GET que recuperará posts de una URL específica.

+
async function fetchPost() {
+    const responseData = await sendHttpRequest('GET', 'https://jsonplaceholder.typicode.com/posts');
+    console.log(responseData);
+}
+
+

¿Cómo imprimir y manipular datos en el DOM?

+

Una vez que se obtiene la respuesta del servidor, es crucial mostrar esos datos en la interfaz. Para ello, se utiliza la manipulación del DOM en JavaScript.

+
const listElement = document.getElementById('post-list');
+
+function renderPosts(posts) {
+    for (const post of posts) {
+        const postElement = document.createElement('article');
+        postElement.className = 'post';
+
+        const postTitle = document.createElement('h2');
+        postTitle.textContent = post.title;
+
+        const postBody = document.createElement('p');
+        postBody.textContent = post.body;
+
+        postElement.appendChild(postTitle);
+        postElement.appendChild(postBody);
+        listElement.appendChild(postElement);
+    }
+}
+
+// Llamar a fetchPost y renderizar los posts en el DOM.
+fetchPost().then(responseData => {
+    renderPosts(responseData);
+});
+
+

¿Cómo interactuar con botones para cargar contenido?

+

Para completar la interacción, necesitamos garantizar que la función fetchPost se ejecute al hacer clic en un botón específico.

+
const fetchButton = document.getElementById('fetch-button');
+fetchButton.addEventListener('click', fetchPost);
+
+

Por medio de este proceso, puedes cargar datos desde un servidor y mostrarlos directamente en tu aplicación, manteniendo tus peticiones HTTP organizadas y escalables. A través de la práctica continua, dominarás la manipulación del DOM, el uso del API Fetch y el manejo de promesas, habilidades esenciales para cualquier desarrollador web moderno. ¡Sigue avanzando y mejorando tus habilidades!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-app_3019584a-adf8-4ac8-80e4-de2a4c7532bc.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/07-app_3019584a-adf8-4ac8-80e4-de2a4c7532bc.js" new file mode 100644 index 0000000000000000000000000000000000000000..7e0eb4bda45798555d7f8fef5a8e42b1cb0f60c2 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o de Datos al Servidor con JavaScript y Fetch API.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o de Datos al Servidor con JavaScript y Fetch API.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..a50a2a2b02d40aea0b0f81db5ffb30d96a3b2888 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o 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 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o de Datos al Servidor con JavaScript y Fetch API.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o de Datos al Servidor con JavaScript y Fetch API.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..8bb174e07ca149607bce46c1fb41ed83f929fb08 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Env\303\255o 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..9ace12044428c27faa0a8864bf95e6ed87d95e7d --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-Resumen.html" @@ -0,0 +1,166 @@ + + + + + + + Envío de Datos al Servidor con JavaScript y Fetch API + + + +
+
+

Resumen

¿Cómo enviar información desde un formulario web sin refrescar la página?

+

Enviar datos de un formulario web sin que la página se recargue es un desafío común en el desarrollo front-end. Aquí exploramos cómo lograrlo utilizando JavaScript para manejar eventos del formulario, estructurar datos y enviarlos al servidor. ¡Acompáñame y lo descubriremos juntos!

+

¿Cómo prevenir el refresco de página en un formulario?

+

Un problema común al enviar formularios es que la página se actualiza, perdiendo datos temporales o interrumpiendo experiencia del usuario. Para evitarlo:

+
    +
  1. Escuchar el evento submit: Utilizamos addEventListener en el formulario para capturar cuando el usuario intenta enviar datos.
    2. +
  2. Prevenir comportamiento predeterminado: Usamos event.preventDefault() para evitar que la página se recargue al enviar el formulario.
    3. +
+
form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    // Código para manejar el formulario
+});
+
+

¿Cómo capturamos los datos del formulario?

+

Una vez que el refresco está prevenido, necesitamos acceder a los valores del formulario:

+
    +
  1. Obtener los elementos del formulario: Usamos querySelector para encontrar elementos por su ID.
    2. +
  2. Capturar datos ingresados: Accedemos a value del elemento para conseguir el texto ingresado por el usuario.
    3. +
+
const title = event.currentTarget.querySelector('#title').value;
+const content = event.currentTarget.querySelector('#content').value;
+
+

¿Cómo estructurar y enviar un objeto de datos al servidor?

+

Antes de enviar los datos, debemos estructurarlos en un objeto que el servidor espera recibir:

+
    +
  1. Crear un User ID aleatorio: Generamos un número para simular un identificador de usuario.
    2. +
  2. Estructurar los datos: Creamos un objeto con el título, contenido y userID.
    3. +
  3. Hacer la función async: Facilitamos la ejecución del fetch.
    4. +
+
async function createPost(title, content) {
+   const userID = Math.floor(Math.random() * 1000);
+   const post = {
+      title,
+      body: content,
+      userId: userID
+   };
+
+   // Hacer un request al servidor
+}
+
+

¿Cómo enviamos un request POST con fetch?

+

La clave es usar fetch para enviar un request POST con el objeto de datos:

+
    +
  1. Especificar método y URL: Definimos el método POST y apuntamos a la URL correcta.
    2. +
  2. Incluir el cuerpo de la petición: Añadimos nuestro objeto de datos estructurado en JSON.
    3. +
+
async function createPostRequest(post) {
+    const response = await fetch('URL_DEL_SERVIDOR', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(post)
+    });
+    
+    if (response.ok) {
+        console.log('Post creado exitosamente');
+    } else {
+        console.error('Error al crear el post');
+    }
+}
+
+

¿Cómo vinculamos el envío del formulario con nuestra función?

+

Finalmente, debemos ejecutar nuestra función de envío dentro del controlador de eventos del formulario.

+
form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    const title = event.currentTarget.querySelector('#title').value;
+    const content = event.currentTarget.querySelector('#content').value;
+    createPostRequest({ title, content });
+});
+
+

Y así, ¡tu formulario ahora envía datos al servidor sin recargar la página, utilizando JavaScript! Siguiendo estos pasos, mejoramos la experiencia del usuario y la eficiencia de nuestras aplicaciones web. No olvides persistir, experimentar y explorar nuevas posibilidades tecnológicas. ¡El futuro del desarrollo web está en tus manos!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-app_6a7338a5-f4d8-42bf-8732-2ca120df4082.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/08-app_6a7338a5-f4d8-42bf-8732-2ca120df4082.js" new file mode 100644 index 0000000000000000000000000000000000000000..0428046031047b35297ca08109479c4f7793e612 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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); +}); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n de Eventos.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n de Eventos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..0f791b2baa8fcfd95818805f4a6e7545df367db2 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n de Eventos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cc966d0b38dc865d552be69fa404107192a7b027a312a921cf4041243156c968 +size 76987898 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n de Eventos.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n de Eventos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..c2dd44a629ddea554ff095304fec3eb06338ff02 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Eliminar Posts con JavaScript y Delegaci\303\263n 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..d5e0f02fec6a127ad4f240d8c44113eaf9b5e052 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-Resumen.html" @@ -0,0 +1,135 @@ + + + + + + + Eliminar Posts con JavaScript y Delegación de Eventos + + + +
+
+

Resumen

¿Cómo borrar elementos usando eventos en JavaScript?

+

¿Alguna vez te has preguntado cómo interactuar dinámicamente con los elementos de una página web, específicamente para eliminarlos de un servidor? Este artículo explora la implementación de una función de borrar usando JavaScript, que expande nuestras habilidades de desarrollo web al permitirnos eliminar elementos de manera eficiente.

+

¿Qué es el delegation pattern?

+

Antes de proceder a implementar la funcionalidad de borrado, es esencial comprender el delegation pattern. Este patrón nos permite escuchar eventos de los elementos hijos mediante la asignación de un único evento al elemento padre. En lugar de agregar un evento a cada botón individualmente, este enfoque mejora el rendimiento asignándole el evento al contenedor principal de los elementos.

+

¿Cómo identificar el elemento a borrar?

+

Para eliminar un elemento del servidor mediante una petición HTTP, primero necesitamos identificarlo de manera única. En nuestro HTML, cada elemento generalmente tiene un ID único. Al hacer clic en el botón de eliminar, debemos:

+
    +
  1. Detectar el evento en el contenedor.
    2. +
  2. Verificar si el elemento objetivo (target) del evento es un botón.
    3. +
  3. Obtener el ID del elemento padre (article) más cercano al botón que fue clicado.
    4. +
+

Aquí es donde el método closest de JavaScript juega un papel crucial al encontrar el ancestro más cercano que coincide con el selector especificado:

+
document.addEventListener('click', function(event) {
+  if (event.target.tagName === 'BUTTON') { // Verifica si el click fue en un botón
+    let postID = event.target.closest('article').id;
+    console.log(postID);  // Imprime el ID del artículo
+  }
+});
+
+

¿Cómo enviar una solicitud DELETE al servidor?

+

Una vez tenemos el ID del elemento, podemos enviar una solicitud DELETE al servidor. Las solicitudes DELETE con frecuencia requieren que especifiquemos el recurso que deseamos borrar adjuntando su ID en la URL:

+
fetch(`http://tuservidor.com/posts/${postID}`, {
+  method: 'DELETE'
+})
+.then(response => { 
+  if (response.ok) {
+    console.log('El post fue borrado');
+  }
+})
+.catch(error => console.error('Error:', error));
+
+

¿Qué se debe considerar al trabajar con APIs?

+

Cuando trabajamos con cualquier API, es fundamental revisar su documentación. Cada API tiene requerimientos específicos sobre cómo se deben estructurar las solicitudes y qué tipo de datos esperan recibir. En nuestro caso, nos aseguramos de que la URL y el método de solicitud sean correctos para que el servidor procese la eliminación del recurso correctamente.

+

¿Funciona realmente?

+

Para verificar si nuestra implementación está funcionando, debemos revisar las herramientas de desarrollo del navegador. Observa las pestañas de Network para asegurar que el método DELETE fue enviado correctamente y recibe un status 200 en respuesta, lo cual indica éxito:

+
    +
  • Evalúa el método que muestra DELETE.
    • +
  • Revisa el endpoint de la URL utilizada.
    • +
  • Confirma que el servidor recibió correctamente la operación.
    • +
+

Al aplicar estos conocimientos, no solo mejoramos la experiencia del usuario en la web, sino que también potenciamos nuestras habilidades en desarrollos complejos. A medida que internalices estos conceptos, estarás cada vez más cerca de dominar el desarrollo web interactivo y eficiente. ¡Sigue explorando y perfeccionando tus habilidades!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-app_cd059276-f2dc-4bdc-a54b-22bc7be4a576.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/09-app_cd059276-f2dc-4bdc-a54b-22bc7be4a576.js" new file mode 100644 index 0000000000000000000000000000000000000000..051892f4da3148287dc0d4b28e2e9c241362f2b1 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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}` + ); + } +}); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos del DOM.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos del DOM.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..5feb001436c87d0014a9db239f8765493962741f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos del DOM.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e7e42dffc545a81ef86f13a48542ed12c5bead0ae33df50440691c4e414a82cf +size 23060581 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos del DOM.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos del DOM.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..5d5bbc519b045d68e42cadefb6fa995683321e1a --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Manejo de IDs en JavaScript para eliminar art\303\255culos 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..aaf4a39f83773cf236331d315985a8aad0b0bc54 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/10-Resumen.html" @@ -0,0 +1,132 @@ + + + + + + + Manejo de IDs en JavaScript para eliminar artículos del DOM + + + +
+
+

Resumen

¿De dónde proviene el ID utilizado para las solicitudes?

+

Si alguna vez te has preguntado cómo tu aplicación gestiona la eliminación de artículos, el misterio del ID es crucial para entender el proceso. En aplicaciones web, el ID que se utiliza para enviar solicitudes de eliminación de artículos se obtiene típicamente del servidor cuando se realiza una solicitud GET. Este ID se incluye en la respuesta del servidor y se integra en el DOM mediante JavaScript. Vamos a desglosar este proceso y clarificar cómo se maneja.

+

¿Cómo se integra el ID en el DOM?

+

Cuando el servidor responde a una solicitud GET, proporciona un conjunto de datos que incluye, entre otros, los IDs únicos de cada artículo. Al recibir esta respuesta, se genera dinámicamente un elemento en el DOM, normalmente una etiqueta de artículo (<article>) para cada post. Este proceso se realiza mediante un bucle en JavaScript que recorre los datos de respuesta y crea un contenedor de post (PostContainer). El ID recibido de la respuesta del servidor se asigna a este contenedor como atributo ID.

+

Esencialmente, el código ejecuta algo como esto:

+
posts.forEach(post => {
+  const postContainer = document.createElement('article');
+  postContainer.id = post.id; // Asignar el ID del post
+  // ... código adicional para manejar el contenido
+});
+
+

Aquí, post.id es el ID proporcionado por el servidor, mientras que postContainer.id asegura que el atributo ID del elemento HTML coincida con este ID del servidor.

+

¿Cómo se utiliza el ID para eliminar un artículo?

+

La magia de eliminar un artículo reside en la identificación correcta de cuál debe ser eliminado. Una vez que los elementos del DOM contienen los IDs como atributos, estos se pueden utilizar para enviar solicitudes de eliminación precisas al servidor.

+

Cuando un usuario decide borrar un artículo, el ID almacenado en el contenedor del post se recupera y se utiliza para informar al servidor cuál es el artículo deseado para eliminar. Esto se hace a menudo utilizando una función de solicitud DELETE en JavaScript que envía una petición al servidor junto con el ID del artículo.

+

Por ejemplo, podrías usar:

+
function deletePost(postID) {
+  fetch(`https://api.example.com/posts/${postID}`, {
+    method: 'DELETE'
+  })
+  .then(response => response.json())
+  .then(data => {
+    console.log('Post eliminado:', data);
+    // Actualizar el DOM o manejar respuestas de éxito
+  })
+  .catch(error => {
+    console.error('Error al eliminar el post:', error);
+  });
+}
+
+

¿Por qué es importante gestionar correctamente los IDs en una aplicación?

+

La correcta gestión de los IDs es crucial no solo para mantener la integridad de la aplicación sino también para evitar la eliminación o modificación accidental de datos incorrectos. Al adherirse a prácticas rigurosas en el manejo de IDs:

+
    +
  • Precisión: Se asegura que solo el contenido deseado sea modificado o eliminado.
    • +
  • Seguridad: Minimiza el riesgo de alteraciones no autorizadas o pérdidas de datos.
    • +
  • Eficiencia: Al automatizar y optimizar las operaciones, se mejora la experiencia del usuario y se reduce la carga en el servidor.
    • +
+

Esperamos que este desglose sobre el proceso de gestión de IDs en aplicaciones web te haya ayudado a entender mejor cómo se integran los IDs y su importancia en la funcionalidad del sistema. Estos principios no solo son fundamentales para el desarrollo actual, sino que también preparan el camino para soluciones más robustas en el futuro. ¡Continúa explorando y perfeccionando tus habilidades en este ámbito!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..ffb281880ae9d37fdedeeaf553a5e8d51c657456 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Actualizaciones y Nuevas Funciones en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..355b21d97ac1bd4dcb9059d02dcca592b37cd3c2 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..d3ec7502f678c8839d5f951a0c7073b8e4afc249 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/11-Resumen.html" @@ -0,0 +1,165 @@ + + + + + + + Actualizaciones y Nuevas Funciones en JavaScript + + + +
+
+

Resumen

¿Cómo está evolucionando JavaScript?

+

JavaScript, un lenguaje que ha sido fundamental en el desarrollo web, continúa evolucionando para enfrentarse a nuevos desafíos y mejorar la experiencia de los desarrolladores. La historia reciente del lenguaje nos muestra cómo se han incorporado características innovadoras que facilitan la programación y resuelven problemas comunes. Entender estas transformaciones te permitirá mantenerte actualizado y preparado para las tendencias actuales y futuras en desarrollo web.

+

¿Cuáles son los cambios recientes más relevantes?

+
    +
  • +

    Clases y Constantes: Con la introducción de las clases, JavaScript ha adoptado un enfoque más orientado a objetos, asemejándose a otros lenguajes que utilizan esta estructura. Las constantes (const) permiten definir variables cuyos valores no cambian, haciéndolas ideales para valores fijos en el tiempo de ejecución.

    +
    • +
  • +

    Funciones Flecha (Arrow Functions): Estas funciones proporcionan una sintaxis más corta para definir funciones anónimas, facilitando la escritura de código más limpio y conciso.

    +
    • +
+

¿Por qué es importante estar al tanto de las actualizaciones?

+

Estar informado sobre las nuevas características y propuestas de JavaScript es crucial porque:

+
    +
  1. +

    Solución de problemas: Las nuevas funciones y mejoras están diseñadas específicamente para abordar y simplificar problemas comunes que probablemente enfrentarás en tus proyectos.

    +
    2. +
  2. +

    Optimización del desarrollo: Al adoptar las últimas actualizaciones, puedes escribir código más eficiente, claro y mantenible, lo cual es esencial para trabajar en entornos con demandas de rapidez y precisión.

    +
    3. +
  3. +

    Adaptación a las tendencias del mercado: Los desarrolladores que dominan las tecnologías más recientes tienen una ventaja competitiva en el mercado laboral, ya que pueden ofrecer soluciones modernas y eficientes.

    +
    4. +
+

¿Dónde encontrar información sobre futuras actualizaciones?

+

Para mantenerte actualizado sobre las evoluciones de JavaScript, considera las siguientes fuentes:

+
    +
  • +

    Documentación oficial de JavaScript: Aquí es donde suelen anunciarse las nuevas características y cambios propuestos para el lenguaje.

    +
    • +
  • +

    Comunidad de desarrolladores: Grupos en línea, foros y plataformas como Stack Overflow son lugares donde puedes discutir con otros desarrolladores y obtener información práctica sobre nuevas características.

    +
    • +
  • +

    Cursos y talleres: Participar en cursos especializados y talleres puede ofrecerte una comprensión más profunda y práctica sobre cómo implementar estas características en tus proyectos.

    +
    • +
+

¿Cómo implementar los fundamentos de JavaScript en diferentes áreas?

+

Una vez que domines los fundamentos de JavaScript, es esencial expandir tus habilidades aplicándolas en diversas áreas del desarrollo web. Explora cómo puedes usar JavaScript para crear páginas web dinámicas, componentes reutilizables y aprovechar las APIs del navegador.

+

¿Cómo crear páginas dinámicas con JavaScript?

+

Manipular el DOM (Document Object Model) con JavaScript te permite crear páginas completamente interactivas y dinámicas sin necesidad de herramientas adicionales. Así, puedes:

+
    +
  • +

    Actualizar contenido en tiempo real: Cambiar texto, imágenes y elementos de forma dinámica según las acciones del usuario o eventos específicos.

    +
    • +
  • +

    Animaciones interactivas: Agregar animaciones y transiciones que mejoren la experiencia del usuario y hagan que la navegación sea más intuitiva.

    +
    • +
+

¿Cómo encapsular código para construir componentes?

+

Crear fragmentos de código encapsulados en JavaScript te permite desarrollar componentes reutilizables que simplifican la construcción y mantenimiento de páginas web complejas. Estos componentes:

+
    +
  • +

    Facilitan el mantenimiento: Al encapsular lógica y diseño, los cambios se pueden realizar de manera centralizada sin afectar al resto del sistema.

    +
    • +
  • +

    Promueven la reutilización: Los componentes se pueden reutilizar en diferentes partes de una aplicación o incluso en diferentes proyectos.

    +
    • +
+

¿Cómo sacar provecho de las APIs del navegador?

+

Las APIs del navegador ofrecen una gama de funcionalidades que pueden hacer que tus proyectos sean más robustos y mejor integrados con el entorno del cliente. Por ejemplo:

+
    +
  • +

    API de geolocalización: Permite obtener la ubicación geográfica del usuario para ofrecer una experiencia más personalizada.

    +
    • +
  • +

    API de almacenamiento local: Facilita el almacenamiento de datos en el navegador del usuario, permitiendo que las aplicaciones funcionen sin conexión.

    +
    • +
+

Explorar estas capacidades te permitirá desarrollar aplicaciones más eficientes a la vez que aprovechas al máximo el poder del navegador web.

+

Al estar siempre al tanto de los cambios y comprender cómo se aplican en distintos contextos, podrás convertirte en un desarrollador más competente y preparado para cualquier desafío que te presente la evolución del lenguaje JavaScript. ¡Sigue explorando y actualizándote continuamente!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Lecturas recomendadas.txt" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..b646469ba0a1d5a1dd1a0454fc7ccb084cccb838 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://platzi.com/cursos/c-plus-plus/ diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Manejo de Memoria y Punteros en C.mp4" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Manejo de Memoria y Punteros en C.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..579ff25dfc10dcda521a930c8b9bfa521b3caa8d --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/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 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Manejo de Memoria y Punteros en C.vtt" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Manejo de Memoria y Punteros en C.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..663b573f0d70bcc021fc46e6fdf6541a21ffe31c --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/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. diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Resumen.html" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..7b29b9067419ec27ebf70b38502f471543c175ca --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-Resumen.html" @@ -0,0 +1,84 @@ + + + + + + + Manejo de Memoria y Punteros en C++ + + + +
+
+

Resumen

¿Cómo funcionan la CPU y la memoria en las computadoras?

+

En la programación orientada a objetos con C++, es crucial entender cómo interactúan la CPU y la memoria en una computadora. La CPU, conocida como el cerebro de la computadora, ejecuta operaciones matemáticas, lógicas y de control. En paralelo, la memoria almacena el programa, incluidos el código y las variables. La CPU y la memoria se comunican continuamente, permitiendo que el programa funcione correctamente.

+

¿Cómo se segmenta la memoria RAM?

+

Cuando un programa se ejecuta, el sistema operativo le asigna un espacio en la memoria RAM. Este proceso implica una segmentación específica de la memoria para gestionar los datos eficientemente. Aunque los lenguajes de programación pueden diferir en cómo realizan esta segmentación, en C++ se utiliza un enfoque estándar.

+
    +
  1. +

    Sección de instrucciones: Alberga las instrucciones de un programa tras el proceso de compilación. Estas se cargan en esta sección de memoria para su ejecución.

    +
    2. +
  2. +

    Sección de literales: Contiene constantes y valores inmutables como cadenas de texto fijas. Estos no cambian durante la ejecución del programa, como es el caso de las cadenas mostradas en un "Hola Mundo".

    +
    3. +
  3. +

    Sección de datos estáticos: Aquí se reservan espacios para variables cuyos tamaños se conocen con anticipación, como enteros o caracteres. El compilador se encarga de asignar un espacio estático, garantizando que las variables ocupen la misma cantidad de bytes en una misma computadora, aunque pueda variar entre diferentes máquinas.

    +
    4. +
+

¿Qué es la memoria dinámica y cómo se gestiona?

+

La memoria dinámica se segmenta en dos partes clave: la memoria Heap y la memoria Stack. Ambas son fundamentales para programas que requieren modificar la cantidad de datos manejados durante la ejecución.

+
    +
  • +

    Memoria Heap: Crece en dirección de los números de la dirección de memoria y es controlada por el programador. El programador decide cómo y cuándo liberar espacio, gestionando entradas dinámicas de datos, como las provenientes del usuario.

    +
    • +
  • +

    Memoria Stack: También crece dinámicamente pero en sentido opuesto al Heap. Esta parte está principalmente gestionada por el compilador, que conserva el rastro de las llamadas a funciones y los datos asociados a ellas.

    +
    • +
+

¿Por qué es crucial evitar el desbordamiento de memoria?

+

En programas de gran envergadura, como una hoja de cálculo compleja donde el número de celdas y archivos es indeterminado, se necesita una gestión de memoria eficiente. El sistema operativo reserva un espacio en blanco intermedio que permite desarrollar las memoria Heap y Stack en direcciones opuestas, minimizando conflictos. Sin embargo, un crecimiento descontrolado puede llevar a un desbordamiento de memoria, un error común en C++ que requiere manejo manual por parte del programador. Los lenguajes modernos ofrecen soluciones automáticas para este problema, pero el C++ reta a sus usuarios a llevar un control más directo.

+

El siguiente paso en el camino de la programación orientada a objetos con C++ será dominar los punteros, que permiten acceder y controlar directamente registros de memoria, efectuando un manejo más profundo de los programas. Con esta base sobre memoria, te acercas a convertirte en un experto en C++. ¡No te detenagas y sigue fortaleciéndote en este apasionante aprendizaje!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-slides-del-curso-de-poo-con-c_f444e705-c951-4d68-b9c0-907667481c77.pdf" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/01-slides-del-curso-de-poo-con-c_f444e705-c951-4d68-b9c0-907667481c77.pdf" new file mode 100644 index 0000000000000000000000000000000000000000..16a48f43b668c5f4ea552d603c1918e508df08ef --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/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 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.mp4" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..d9bb2b1dfd6f99cdbfe086ff7e6fd935a46652fe --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:196e9c43c94439e2a20db518fce74629eab80c0d8f08b4ecea5928d1df7aa23b +size 53579406 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.vtt" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..7394d812ee92eca422c1808d6122b526cd12ce16 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Punteros en C Manejo y Uso de Memoria Din\303\241mica.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. diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Resumen.html" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..a8baad078277a89898d78fdf12cbb0accb380b6b --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/02-Resumen.html" @@ -0,0 +1,130 @@ + + + + + + + Punteros en C++: Manejo y Uso de Memoria Dinámica + + + +
+
+

Resumen

¿Qué son los punteros en programación?

+

Los punteros son herramientas poderosas en el mundo de la programación, especialmente cuando se trata del manejo de la memoria dinámica. Almacenan direcciones de memoria, permitiendo acceder y modificar el contenido almacenado en esas ubicaciones. Esto es fundamental para el desarrollo de programas eficientes y flexibles.

+

¿Cómo se estructura la memoria RAM?

+

La memoria RAM se organiza como una tabla de celdas. Cada celda tiene una dirección de memoria única e irrepetible que nuestro programa puede utilizar para almacenar variables de varios tipos, como enteros o caracteres. Por ejemplo, al almacenar un carácter como la letra 'a', este se sitúa en una dirección específica, como 0x0001, sin necesidad de aprender estas direcciones gracias al uso de nombres de variables.

+

¿Cómo funcionan los punteros en C++?

+

En C++, los punteros se manejan mediante el uso de dos símbolos clave: el asterisco (*) y el ampersand (&). Estos permiten la definición y manipulación de punteros dentro del código:

+
    +
  • +

    Definición de un puntero: Para indicar que una variable es un puntero, se precede con un asterisco durante su declaración.

    +
    char* puntero;
+
    +
    • +
  • +

    Asignación de dirección de memoria: Se utiliza el símbolo de ampersand para obtener la dirección de una variable existente.

    +
    puntero = &letra;
+
    +
    • +
+

Aquí, &letra obtiene la dirección de memoria de la variable letra y la almacena en puntero.

+

¿Cómo se accede a los valores mediante punteros?

+

El acceso y la manipulación de valores a través de punteros son elementos esenciales de su funcionalidad. Aquí se cubren las formas convincentes y eficientes de utilizarlos:

+
    +
  • +

    Desreferenciación: Usando el asterisco antes del nombre del puntero, puedes acceder al valor almacenado en la dirección apuntada.

    +
    char valor = *puntero; // Accede al valor 'a'
+
    +
    • +
  • +

    Obtención de dirección de un puntero: Colocando el ampersand antes del nombre del puntero, puedes encontrar su propia dirección de memoria.

    +
    char** direccionDePuntero = &puntero; // Dirección del puntero
+
    +
    • +
+

¿Por qué son importantes los punteros?

+

Los punteros permiten eficiencia y control más allá de lo posible con las variables regulares. Al permitir manipular la memoria directamente, se optimiza el uso de recursos, y se permite el crecimiento o reducción dinámico de estructuras de datos, esenciales en aplicaciones que deben gestionar grandes volúmenes de información o manipular estructuras de datos complejas.

+

A medida que avanzas en tu aprendizaje sobre punteros, es esencial practicar con ejemplos prácticos y experimentar con distintas operaciones para fortalecer tus habilidades. ¡Continúa explorando y expandiendo tus conocimientos en programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Resumen.html" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..5ebb6fd8b9c1089fb50ccfd7ee0e8c316e6b59ae --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Resumen.html" @@ -0,0 +1,131 @@ + + + + + + + Uso de Punteros en C++: Variables y Memoria Dinámica + + + +
+
+

Resumen

¿Cómo implementar punteros en C++ para manipular variables de carácter?

+

Los punteros son una herramienta poderosa en C++ que te permiten trabajar directamente con la memoria, facilitando las operaciones dinámicas. Si alguna vez te has preguntado cómo empezar a utilizar punteros de manera eficaz, y en particular en el contexto de variables de carácter, este es el lugar indicado para ti. A continuación, exploraremos cómo crear y manipular punteros para variables de tipo carácter en C++ paso a paso.

+

¿Cómo se crea y utiliza un puntero para una variable de tipo carácter?

+

Para iniciar, supongamos que queremos trabajar con una variable char llamada letra, que almacena el carácter 'a'.

+

Para esto, primero declaramos nuestra variable de tipo carácter:

+
char letra = 'a';
+
+

Ahora, procederemos a crear un puntero que apunte a letra:

+
char* puntero = &letra;
+
+

Aquí, puntero es una variable de tipo puntero que almacena la dirección de memoria de letra. El símbolo & es fundamental para obtener la dirección de una variable.

+

¿Cómo imprimimos el valor y la dirección de memoria de una variable?

+

Para mostrar el valor almacenado en la variable letra, simplemente utilizamos la salida estándar cout:

+
std::cout << letra << std::endl;
+
+

Para la dirección de memoria de letra, empleamos:

+
std::cout << &letra << std::endl;
+
+

Es importante destacar que la dirección de memoria a veces se representa con una serie de caracteres que pueden parecer extraños si se tratan como caracteres debido a cómo los punteros son interpretados.

+

¿Cómo convertir la dirección de memoria a una representación más comprensible?

+

Podemos convertir la dirección de memoria a formato entero para una visualización más clara, usando una conversión estática:

+
std::cout << static_cast<void*>(static_cast<int*>(reinterpret_cast<void*>(&letra))) << std::endl;
+
+

La conversión a un entero te permite visualizar la dirección de memoria en un formato hexadecimal, comúnmente comenzando con 0x, seguido de un valor numérico.

+

¿Cómo acceder al valor de la variable a través de un puntero?

+

Una de las capacidades más fascinantes de los punteros es su habilidad para acceder al valor original de la variable a la que apuntan. Para hacerlo, usamos el operador *, que se conoce como el operador de desreferenciación:

+
std::cout << *puntero << std::endl;
+
+

Al ejecutar esto, el sistema imprime el valor almacenado en la dirección a la cual apunta nuestro puntero. En este caso, sería el carácter 'a'.

+

¿Qué ventajas ofrece el uso de punteros en operaciones de memoria dinámica?

+

El uso de punteros abre las puertas a la memoria dinámica, permitiendo gestionar de manera eficiente recursos en tu programa. Mediante punteros, puedes:

+
    +
  • Manipular estructuras de datos con mayor flexibilidad.
    • +
  • Gestionar la memoria directamente para optimizar el rendimiento de la aplicación.
    • +
  • Realizar operaciones de asignación dinámica de memoria, muy útiles en aplicaciones complejas como las que requieren estructuras de datos personalizadas.
    • +
+

Mantén un enfoque curioso y experimental. Los punteros no solo te permiten manipular variables básicas, sino que también te habilitan para crear e implementar estructuras de datos eficientes y poderosas. Sigue practicando y, con el tiempo, descubrirás cómo explotar al máximo el potencial de los punteros en C++.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.mp4" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..16ed6374f52a997c45d72305c95ee204ad4e5e5f --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:990f893d1b943e9280983c04f85735b1d0d82cccc4f3bd4a32dfc0202a76dfe5 +size 56911668 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.vtt" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..e8b3836e2ed55fa22bc7a8b665a80ddb4a60c9a6 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/01-Memoria din\303\241mica/03-Uso de Punteros en C Variables y Memoria Din\303\241mica.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. diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.mp4" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..08d2ad05b6f651cc53466303d39722bfd526b7e2 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n 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 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.vtt" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Estructuras de Datos Personalizadas en C.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..007af68d4759ada3852b4ac0b0430a3d40d75731 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n 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. diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Resumen.html" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..15691979df74f7d3eb6ced9460ddd5006b9b880d --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/01-Resumen.html" @@ -0,0 +1,141 @@ + + + + + + + Estructuras de Datos Personalizadas en C++ + + + +
+
+

Resumen

¿Cómo crear estructuras de datos y tipos personalizados en C++?

+

En el mundo de la programación, la capacidad de definir nuestras propias estructuras de datos y tipos personalizados enriquece la funcionalidad y versatilidad de nuestras aplicaciones. ¿Alguna vez te has preguntado cómo manejar datos de manera más eficiente en C++? Hoy exploraremos cómo aprovechar los punteros y la flexibilidad de C++ para trabajar con estructuras de datos complejas y personalizadas.

+

¿Qué limitaciones tienen las listas en C++?

+

Hasta ahora, hemos utilizado listas para manejar elementos de un mismo tipo. Sin embargo, estas listas presentan ciertas limitaciones:

+
    +
  • Uniformidad de tipos: Solo pueden contener elementos del mismo tipo.
    • +
  • Acceso al tamaño: No es intuitivo obtener su tamaño sin usar funciones como sizeof.
    • +
+

Al trabajar con listas de caracteres, por ejemplo, tuvimos que utilizar la librería string para una mejor manipulación. Sin embargo, C++ nos ofrece formas más sofisticadas para definir estructuras de datos versátiles.

+

¿Cómo definir una lista de caracteres correctamente en C++?

+

Veamos un ejemplo clásico de cómo definimos una lista de caracteres en C++:

+
char texto[] = {'h', 'o', 'l', 'a'};
+
+

Aquí hemos creado una lista de caracteres llamada texto. El compilador identifica que es una lista gracias a los corchetes y reconoce que es del tipo char. Sin embargo, podríamos simplificar esta escritura:

+
char texto[] = "hola";
+
+

Ambas formas son válidas, pero la última es más directa. El compilador reconoce las comillas dobles como una indicación de cadena de caracteres.

+

¿Cómo utiliza C++ la memoria con punteros?

+

En C++, los punteros son fundamentales para entender cómo los datos son almacenados y accedidos en memoria. Cuando definimos una lista de caracteres, el compilador asigna cada carácter a una dirección de memoria única. Por ejemplo, para la cadena "hola":

+
    +
  1. h se almacena en la dirección 0.
    2. +
  2. o en la 1.
    3. +
  3. l en la 2.
    4. +
  4. a en la 3.
    5. +
+

Además, C++ utiliza un carácter especial en la tabla ASCII, el diagonal invertida cero (\0), para indicar el final de una cadena de caracteres. Esto ocurre cuando se alcanza una nueva dirección de memoria después de los caracteres.

+

¿Cómo definir una estructura personalizada en C++?

+

Supongamos que queremos manejar una entidad más compleja, como una persona. En este caso, necesitamos almacenar diversos datos, como el nombre y la edad. Podemos lograrlo definiendo una estructura:

+
struct Persona {
+    char nombre[50];
+    int edad;
+};
+
+

Con esta estructura, hemos definido campos para el nombre y la edad. Estos datos se almacenan en secciones específicas de memoria, lo que permite un acceso eficiente:

+
    +
  • El nombre se almacena carácter por carácter en su propia sección.
    • +
  • La edad se almacena en una dirección distinta.
    • +
+

Es interesante notar que la dirección de memoria de la estructura Persona coincide con la dirección del primer campo, que en este caso es el nombre.

+

¿Qué ventajas ofrece el uso de punteros?

+

Los punteros proporcionan una forma flexible de manejar datos en C++. Permiten:

+
    +
  • Manipulación directa de la memoria: Acceder y modificar datos directamente a través de su dirección.
    • +
  • Estructuras complejas: Definir estructuras que pueden contener diferentes tipos de datos y acceder a ellos eficientemente.
    • +
+

Al sumar estas características, los punteros son cruciales para trabajar con datos complejos de manera eficaz.

+

En resumen, la habilidad de definir nuestras propias estructuras de datos y comprender la gestión de la memoria en C++ nos permite crear aplicaciones más potentes y flexibles. ¡Te animamos a seguir explorando estas herramientas y mejorar tu dominio de C++!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/02-Creaci\303\263n y uso de estructuras y punteros en C.mp4" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/02-Creaci\303\263n y uso de estructuras y punteros en C.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..960272e1a745d2ce151f964c11e710cc94bf1094 --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/02-Estructuras de datos/02-Creaci\303\263n 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 diff --git "a/subir/Curso de Programaci\303\263n Orientada a Objetos con C/presentation.mhtml" "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/presentation.mhtml" new file mode 100644 index 0000000000000000000000000000000000000000..a2fecd06982de2272124902667ed45baed6533cf --- /dev/null +++ "b/subir/Curso de Programaci\303\263n Orientada a Objetos con C/presentation.mhtml" @@ -0,0 +1,36358 @@ +From: +Snapshot-Content-Location: https://platzi.com/cursos/c-plus-plus-poo/ +Subject: =?utf-8?Q?Curso=20de=20Programaci=C3=B3n=20Orientada=20a=20Objetos=20con?= + =?utf-8?Q?=20C++?= +Date: Sun, 9 Nov 2025 20:22:13 -0500 +MIME-Version: 1.0 +Content-Type: multipart/related; + type="text/html"; + boundary="----MultipartBoundary--nYuBhoQ4N4emy36UCkRGL98zD95Gn9JrH6H57rr7GX----" + + +------MultipartBoundary--nYuBhoQ4N4emy36UCkRGL98zD95Gn9JrH6H57rr7GX---- +Content-Type: text/html +Content-ID: +Content-Transfer-Encoding: quoted-printable +Content-Location: https://platzi.com/cursos/c-plus-plus-poo/ + + = +Curso de Programaci=C3=B3n Orientada a Objetos con C++= +<= +body>
= +
Planes
3D"gradient"
3D"Curso

C= +urso de Programaci=C3=B3n Orientada a Objetos con C++

= +
4.6
181 opiniones

Publicado el 14 de julio de 2021

<= +/div>
Nivel B=C3=A1sico
16 clases
2 horas de contenido
10 horas de pr=C3=A1ctica

Compr= +ende c=C3=B3mo gestionar memoria, punteros, y clases para aplicar la progra= +maci=C3=B3n orientada a objetos con C++. Crea estructuras y hereda clases, = +utilizando polimorfismo y atributos est=C3=A1ticos, mientras profundizas en= + t=C3=A9cnicas avanzadas.

Suscr=C3=ADbete

Clases de= +l curso

  • 3

    Uso de Punteros en C++: Variables y Memoria Din= +=C3=A1mica

    05:= +33 minutos

    • Principios de la Programaci=C3=B3n Orientada a Objeto= +s

    <= +article>

    Despedida

    = +
    Certificado digital

    =C2=A1Comparte tus logros con un certificado!

    = +

    Cuando= + termines el curso tendr=C3=A1s acceso al certificado digital para comparti= +rlo con tu familia, amigos, empleadores y la comunidad.

    3D"Ce=
    <= +path fill=3D"#fff" fill-rule=3D"evenodd" d=3D"M13.233 15.79c0-.898.728-1.62= +7 1.627-1.627h2.792c.898 0 1.627.729 1.627 1.627v.931c0 .9-.729 1.628-1.627= + 1.628H14.86a1.627 1.627 0 0 1-1.627-1.628zm1.627-.232a.233.233 0 0 0-.232.= +232v.931c0 .129.104.233.232.233h2.792a.233.233 0 0 0 .232-.233v-.93a.233.23= +3 0 0 0-.232-.233zm-9.217 1.396h3.085a2.65 2.65 0 0 1 2.644 2.643v.38c0 .64= +2-.52 1.163-1.163 1.163H4.163A1.163 1.163 0 0 1 3 19.977v-.38a2.65 2.65 0 0= + 1 2.643-2.643m.003 1.395A1.255 1.255 0 0 0 4.395 19.6v.145h5.582V19.6a1.25= +6 1.256 0 0 0-1.252-1.251zM7.19 12.3a1.164 1.164 0 0 0-.003 2.328h.005A1.16= +4 1.164 0 0 0 7.19 12.3m-2.56 1.162a2.559 2.559 0 1 1 2.565 2.561h-.01a2.56= + 2.56 0 0 1-2.554-2.561" clip-rule=3D"evenodd">Profes del curso

    Conoce qui=C3=A9n ense=C3=B1a el cu= +rso

    3D"Diana
    = +

    Diana Mart=C3=ADnez

    =F0= +=9F=91=A9=E2=80=8D=F0=9F=92=BB Desarrolladora de software +

    =F0=9F=94=A7 Ingeniera en mecatr=C3=B3nica. +

    =F0=9F=A4=96 Fundadora de Robots LatAm

    Ver cursos de Diana<= +/svg>

    software y recursos necesarios

    • Computadora con sistema operativo Windows, macOS o Lin= +ux
    = +Opiniones del curso

    4.6 =C2=B7 181 opiniones

    3D""3D"https://static.platzi.com/media/flags/MX.pn=

    @diananerd=C2=B7
    <= +/path>= += +

    Es mi propio curso, solo estaba probando el examen, pued= +en ignorar este review. :D

    3D"Luis3D"https://sta=

    Luis Antonio M=C3=A1rq= +uez Castro

    @MarquezLuis=C2=B7
    <= +/svg>

    Me gust=C3=B3 mucho este curso. Es una excelente opci=C3=B3n= + si quieres de forma clara el paradigma orientado a objetos en C++. Nunca p= +ares de aprender!

    3D"Enrique3D"https://static.platzi.=

    Enrique Alberto Ciganda Ch=C3=A1
    <= +span class=3D"CourseReviewItem_CourseReviewItem__Comment__Score__Username__= +k3Z3M">@Encig1950=C2=B7

    Muy= + buena profesora, comunica los detalles junto con los conceptos y los ejem= +plos. Mantiene el inter=C3=A9s a lo largo del curso

    3D"Daniel+=3D"https://static.platzi.com/media/flags/CO.png"
    2

    Daniel Sa= +ntiago Rinc=C3=B3n Santofimio

    @5xf=C2=B7

    la te= +oria expuesta antes de cada ejemplo en codigo para entender mejor la implem= +entacion del codigo

    3D"Miguel3D"https://static.platzi.com/media/flags/VE.png=

    Miguel Diaz

    @mdiazd=C2=B7

    Excelente curso, muy practica, muy buena prof= +esora. +Me permitio aprender de POO, en C++ que es muy importante en el desarrollo = +de codigo.

    = +3D"Erik3D"https://static.platzi.com/media/flags/US.png"

    Erik gonzalez

    @Elgf24=C2=B7

    Excelente curso, se dan buenas definiciones pa= +ra que puedan entender de manera facil como es que funciona el lenguaje

    = +
    3D"Lu=3D"https://static.platzi.com/media/flags/CO.png"

    Luis Pinilla

    @luis-fernando-pinilla=C2=B7= += +

    Me siguen faltando c=C3=B3mo se crean= + clases en diferentes archivos

    3D"Dender3D"https://st=

    Dender Adrian Pernia = +Valero

    @denderpernia=C2=B7
    <= +/svg>

    Excelente contenido

    3D"Rub=C3=A9n3D=
    0

    Rub=C3=A9n T= +=C3=A9llez Gerardo

    @rubentellezgerardo=C2=B7

    Es una pena que no siguieran con m=C3=A1s curs= +os de C++.

    = +3D"Pedro3D"https://static.platzi.com/media/flags/US.png"=

    Pedro Junior Jimenez Iba=C3=B1ez

    @pjujimenez=C2=B7

    todo

    3D"euripides3D"https://static.platzi.com/media/flags/MX.png"

    euripides enrique zamora uribe

    @euripideszu74=C2= +=B7

    Excelente curso

    3D""3D"https://s=

    @RewelME=C2=B7

    muy enriquecedor, la p= +arte de la memoria solo es prestar bastante atenci=C3=B3n pero bien chido c= +omo se introducen los conceptos

    3D"Ricardo3D"h=
    = +
    0

    Ricardo Alfons= +o Camayo Erazo

    @ricardo-alfonso-camayo-erazo=C2=B7

    excelente curso, excelente instructora

    3D"C=3D"https://static.platzi.com/media/flags/CO.png"

    Cesar Augusto Mora Castilo

    @cesarmora2703=C2=B7

    Ojal=C3=A1 lo complementen con un c= +urso m=C3=A1s avanzado.

    3D"Antonio3D"https://static.platzi.com/media/flags/MX.png"

    Antonio Aguilar

    @berkut=C2=B7
    = +

    Rapido, fluido, sencillo y entendible.

    3D"Alvaro=3D"https://static.platzi.com/media/flags/MX.png"
    3D"Adrian3D"https://static.platzi.com/medi=

    Adrian Flores Tomas

    @adrianrake= +s360=C2=B7

    Diana es una e= +xcelente profesora, sus cursos tienen un excelente nivel.

    3D"Emanuel+=3D"https://static.platzi.com/media/flags/AR.png"
    0

    Emanuel A= +lejandro Montero

    @Ema.M=C2=B7
    <= +/svg>

    Mas cursos de C++!! es muy buen lenguaje

    = +
    3D"Omar3D"https://static.platz=

    Omar Riveras

    @newtonclot= +hes18=C2=B7

    muy buen c= +urso y muy buena profesora, clara y concisa

    3D"Aguilera3D"https://stati=

    Aguilera Gomez Haiver Nico= +las

    @haguilera245=C2=B7
    <= +svg width=3D"1em" height=3D"1em" fill=3D"none" viewBox=3D"0 0 16 16" xmlns= +=3D"http://www.w3.org/2000/svg" class=3D"Stars_Stars__Icon___RDb4 Stars_Sta= +rs__Icon--active__EkY8j">

    La Docente explica muy bien

    3D"Jacson+=3D"https://static.platzi.com/media/flags/PE.png"
    0

    Jacson En= +rriquez Alvarez

    @jacson-enrriquez-alvarez=C2=B7

    Son muy claros, me gusto mucho el curso.<= +/p>

    3D=3D"https://static.platzi.com/media/flags/=

    Omar Camilo Sarmiento Valero

    @omarsarmient= +ov=C2=B7
    = += +

    Super buen curso, = +ojal=C3=A1 sigan haciendo cursos de c++.

    3D"Hector3D"https://static.platzi.com/medi=

    Hector Gutierrez

    @alan.gtz51=C2=B7

    Poder tener panorama m= +as claro de como funcion los punteros en C++

    3D""3D"https://static.platzi.com/media/flags/GT.pn=

    @lewatoto=C2=B7
    = += +

    Excelente complemento para el curso previo, al fin pude = +entender los punteros!!!

    3D"Luz3D"https://static.platzi.com/medi=

    Luz Mary Jimenez

    @luzjimenez=C2=B7

    Excelente curso de POO= + de c++ claro que aun tengo que practicar mas

    3D"Alexis3D"https://static.platz=

    Alexis Molina

    @alexgi251= +0=C2=B7
    = += +

    Me gust=C3=B3 bast= +ante, ojala que esta profesora siga dando cursos de programacion

    <= +/article>
    3D"John3D"https://static.platzi.com/media/flags/CO.png"

    John Robert Gomez Pachon

    @robertgomez.datascience=C2=B7

    Excelente, hacen falta= + m=C3=A1s cursos de c++

    3D"Helmut3D"https://static=

    Helmut Iv=C3=A1n Dub=C3=B3n= + Gonz=C3=A1lez

    @hdubon=C2=B7
    <= +/svg>

    Exelente curso

    3D"Carlos3D"https://static.platzi.com/=

    Carlos Ram=C3=ADrez

    @cramirezo= +l=C2=B7
    = += +

    Me encant=C3=B3 es= +te curso. Las explicaciones de la profesora son muy buenas para comprender = +el uso de C++ en POO. A=C3=BAn debo pulir mi conocimiento, as=C3=AD que vol= +vere a tomar el curso una vez m=C3=A1s. Espero contar con m=C3=A1s cursos d= +e C++ (para videojuegos con Unreal Engine) en el futuro.

    3D"Rafael3D"https://static.platzi.com/media/flags/GT.png"<= +/figure>

    Rafael Aguirre Rafael Aguirre

    @rafaelaguirre=C2=B7

    muy buen curso, y practico tambi=C3= +=A9n

    Ver las 181 o= +piniones = +
    Eleva tu = +aprendizaje

    Este= + curso es parte de estas rutas de aprendizaje

    Ruta
    = +
    3D"Curso
    +=3D"Curso
    3D"Curso
    3D"Curso
    6 Cursos

    Programaci=C3=B3n con C= + y C++

    14 horas
    <= +div class=3D"Tag-module__Tag___g-ItX Tag-module__Tag__md___sjkZs Tag-module= +__Tag__neutral___UMtKe LPathTitle_LPTitle__Tag__3xJcH">3 Profes

    Sum=C3=A9rgete en C y C++, lenguajes fundamentales para entender el funcio= +namiento interno de los computadores, la gesti=C3=B3n de memoria y la progr= +amaci=C3=B3n orientada a objetos de alto rendimiento.

    Ver ruta<= +path fill=3D"#fff" fill-rule=3D"evenodd" d=3D"M15.148 8.602c.22.22.22.576 0= + .796l-3.75 3.75a.562.562 0 1 1-.796-.796l3.75-3.75c.22-.22.576-.22.796 0" = +clip-rule=3D"evenodd">
    Comun= +idad

    La comunida= +d es nuestro super poder

    Contenido adicional creado por la comunidad que nunca para = +de aprender

    Tutoriales de es= +tudiantes

    Comparte tu = +aprendizaje y ayuda a otros a crecer.

    Escribe un = +tutorial

    Elige el plan ideal para t= +i

    Contenido p= +rofesional y actualizado con certificados digitales.

    <= +table class=3D"BenefitsTable-module_BenefitsTable__S9m-B">BeneficiosBa= +sicExpertCertificados = +f=C3=ADsicos para las rutas de aprendizaje profesionalAcceso a las escuelas de Startups, Ingl=C3= +=A9s y liderazgo<= +/path>Event= +os exclusivos como Platzi ConfDescarga contenido en la app m=C3=B3vil

    Plan Basic<= +/h3>

    Mensual

    Para 1 es= +tudiante

    3D"country

    $49/mes

    Cobro mensual recurrente

    • Contenido profesional y actualizado con cert= +ificados digitales

    • <= +/path>

      Certificados f=C3=ADsicos para las rutas de aprendiza= +je profesional

    • Acceso a las escuelas de Startups, Ingl=C3=A9s y liderazg= +o

    • Eventos exclusivos como Platzi Conf

    • Descarga contenido en la app = +m=C3=B3vil

    Precio Especial

    Plan Expert

    Anual

    Para= + 1 estudiante

    3D"country$209/a=C3=B1o

    Antes $249

    Ahorras$40

    = +

    • Contenido profesional y actualizado con certificados d= +igitales

    • Certificados f=C3=ADsicos para las rutas de aprendizaje profesional

    • Acceso a= + las escuelas de Startups, Ingl=C3=A9s y liderazgo

    • Eventos exclusivos como Platzi= + Conf

    • = +Descarga contenido en la app m=C3=B3vil

    S= +uscr=C3=ADbete a Plan Expert

    Paga a 4 cuotas sin intereses de $53

    Precio Especial

    Plan Expert Duo

    Anual= +

    Para 2 estudiantes

    = +
    +=3D"country

    $299/a=C3= +=B1o

    Antes $329

    Ahorras$30<= +/span>

    = +

    • Contenido profesional y ac= +tualizado con certificados digitales

    • Certificados f=C3=ADsicos para las rutas de = +aprendizaje profesional

    • Acceso a las escuelas de Startups, Ingl=C3=A9s y lideraz= +go

    • = +

      Eve= +ntos exclusivos como Platzi Conf

    • Descarga contenido en la app m=C3=B3vil

    Paga a 4 cuotas sin intereses de $75

    Preci= +o Especial

    Plan Expert Groups

    Anual

    Para 4-50 es= +tudiantes

    3D"country

    $419/a=C3=B1o

    <= +/svg>

    Antes $499

    Ahorras$80

    • Contenido profesional y actualizado con certificados digitales

    • Certifi= +cados f=C3=ADsicos para las rutas de aprendizaje profesional

    • = +

      Acceso a las escuela= +s de Startups, Ingl=C3=A9s y liderazgo

    • Eventos exclusivos como Platzi Conf

    • Descarga con= +tenido en la app m=C3=B3vil

    Cantidad de estudiantes

    <= +/button>

    Paga a 4 cu= +otas sin intereses de $104.75

    Precio Especial

    Plan Expert

    Anual<= +/p>

    Para 1 estudiante

    3D"=

    $209/a=C3=B1o

    Ant= +es $249

    Ahorras$40

    • <= +/svg>

      Contenido profesional y actualizado con certificados digital= +es

    • = +

      Cer= +tificados f=C3=ADsicos para las rutas de aprendizaje profesional

      • Acceso a las esc= +uelas de Startups, Ingl=C3=A9s y liderazgo

    • Eventos exclusivos como Platzi Conf

    • Descarga= + contenido en la app m=C3=B3vil

    = +

    Paga a 4 cuotas sin intereses de $53

    Precio Especial

    Plan Expert Duo

    Anual

    <= +/div>

    Para 2 estudiantes

    3D"c=

    $299/a=C3=B1o

    Antes= + $329

    Ahorras$30

    • Contenido profesional y actualizado con certificados digitale= +s

    • <= +path fill=3D"#fff" fill-rule=3D"evenodd" d=3D"M19.03 7.47a.75.75 0 0 1 0 1.= +06l-8 8a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.97 3.97 7.47-= +7.47a.75.75 0 0 1 1.06 0" clip-rule=3D"evenodd">

      Cert= +ificados f=C3=ADsicos para las rutas de aprendizaje profesional

      • Acceso a las escu= +elas de Startups, Ingl=C3=A9s y liderazgo

    • Eventos exclusivos como Platzi Conf

      = +

    • Descarga = +contenido en la app m=C3=B3vil

    Paga a 4 cuotas sin intereses de $75

    Precio Especial

    Plan Expert Groups

    Anu= +al

    Para 4-50 estudiantes

    $419/a=C3=B1o

    Antes $499

    Ahorras$80

    = +

    • Contenido profesional y actualizado con certificados d= +igitales

    • Certificados f=C3=ADsicos para las rutas de aprendizaje profesional

    • Acceso a= + las escuelas de Startups, Ingl=C3=A9s y liderazgo

    • Eventos exclusivos como Platzi= + Conf

    • = +Descarga contenido en la app m=C3=B3vil

    Cantidad de estudiantes

    Paga a 4 cuotas sin intereses de $10= +4.75