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

Resumen

¿Cómo han evolucionado las clases en JavaScript desde 2015?

+

Las clases en JavaScript han experimentado una transformación significativa desde la introducción de la sintaxis actual en 2015. Anteriormente, JavaScript utilizaba funciones constructoras para crear objetos, un método eficaz pero complejo para algunos desarrolladores, especialmente aquellos familiarizados con lenguajes de programación orientados a objetos como Java. La nueva sintaxis de clases no solo simplifica este proceso, sino que también ofrece un "sugar syntax", o sintaxis dulce, que resulta más intuitiva y familiar para los programadores.

+

¿Qué son las clases en JavaScript?

+

Una clase en JavaScript actúa como un blueprint o plano para crear objetos. Imagínalo como un molde, a partir del cual se pueden construir múltiples instancias o copias de un objeto. La definición de clase facilita la estructuración y organización de codificaciones, ya que permite separar claramente las propiedades y los métodos que lo caracterizan.

+

¿Cómo se define una clase con la nueva sintaxis en JavaScript?

+

La creación de una clase comienza con la palabra reservada class, seguida del nombre de la clase, que por convención, empieza con mayúscula. Después de definir el cuerpo de la clase con llaves {}, se introduce el método constructor. Un ejemplo simple sería una clase Persona con propiedades nombre y edad.

+
class Persona {
+  constructor(nombre, edad) {
+    this.nombre = nombre;
+    this.edad = edad;
+  }
+  saludar() {
+    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
+  }
+}
+
+

¿Cómo se crean instancias de una clase en JavaScript?

+

Una instancia es una manifestación concreta de la clase. Utilizar la palabra new junto con el nombre de la clase permite crear estas instancias. Este proceso activa el constructor, asignando valores a las propiedades definidas.

+
const persona1 = new Persona('Mariana', 25);
+persona1.saludar(); // Hola, mi nombre es Mariana y tengo 25 años.
+
+

¿Qué beneficios ofrecen las clases en la programación orientada a objetos?

+
    +
  • Simplicidad y claridad: La sintaxis de las clases resulta más natural y sencilla para quienes provienen de otros lenguajes de programación orientados a objetos.
    • +
  • Reutilización de código: Los blueprints permiten crear múltiples objetos similares sin necesidad de redefinir sus características cada vez.
    • +
  • Organización del código: Al separar claramente métodos y propiedades, las clases facilitan el mantenimiento y la comprensión del código.
    • +
  • Encapsulamiento: Aunque JavaScript no implementa encapsulamiento de manera robusta como otros lenguajes, las clases permiten una mejor centralización de propiedades y métodos.
    • +
+

¿Cómo se compara esta nueva sintaxis con los métodos previos?

+

Antes de 2015, las funciones constructoras eran la alternativa principal para emular estructuras de clases. Sin embargo, estas podían resultar menos intuitivas, especialmente para aquellos no acostumbrados al uso detallado de prototipos y this en su implementación. La sintaxis moderna de las clases es más limpia y alineada con otros lenguajes, reduciendo barreras para quienes migran de plataformas más antiguas.

+

JavaScript se sigue reinventando constantemente, y la habilidad para adaptarse a estas evoluciones permite a los desarrolladores crear aplicaciones más robustas y eficientes. Aprender sobre clases no solo abre la puerta a un código más estructurado, sino que también refuerza la base de conocimientos en programación orientada a objetos. ¡Sigue explorando y fortaleciendo tus habilidades en JavaScript y más allá!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..d307be0a47734a98e142ef1f479b4205d36c18af --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:97d963e7c3603c2d6fd760a050a4ff963f6f63b93aee69cca37abd81bd678067 +size 36327283 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..ee897b624ad11f72592b725628aa83af8eff05b2 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Programaci\303\263n Orientada a Objetos en JavaScript Clases y Prototipos.vtt" @@ -0,0 +1,178 @@ +WEBVTT + +00:00.000 --> 00:02.540 +Vamos a hablar de un tema que es muy +importante. + +00:02.540 --> 00:05.260 +Cuando estamos hablando de JavaScript y de +programación + +00:05.260 --> 00:08.740 +orientada a objetos, hay dos temas que son +importantes entender. + +00:08.740 --> 00:12.800 +En JavaScript, JavaScript funciona con +objetos y prototipos. + +00:12.800 --> 00:16.540 +Y programación orientada a objetos +funciona con herencia. + +00:16.540 --> 00:19.440 +Y debemos explicar qué es +esto. + +00:19.440 --> 00:22.760 +Vamos a suponer que vamos a armar una +clase constructora + +00:22.760 --> 00:25.660 +o una función constructora de una persona. + +00:25.660 --> 00:28.060 +Esta clase va a ser nuestro +molde. + +00:28.060 --> 00:31.860 +En este molde, nosotros vamos a poner +ciertas propiedades y métodos + +00:31.860 --> 00:34.400 +que después vamos a utilizar para rellenar +con información + +00:34.400 --> 00:36.660 +cuando creamos nuestra +instancia. + +00:36.660 --> 00:39.300 +Siempre que estamos trabajando con +clases + +00:39.300 --> 00:41.460 +o con funciones +constructoras, + +00:41.460 --> 00:44.500 +este tipo de funciones de objetos +constructores + +00:44.500 --> 00:47.300 +automáticamente van a generar un prototipo. + +00:47.300 --> 00:48.500 +Allí se le +llama. + +00:48.500 --> 00:52.400 +Este prototipo va a tener todas las +propiedades y los métodos + +00:52.400 --> 00:55.860 +que se van a compartir después o que se +van a heredar + +00:55.860 --> 01:01.060 +en las instancias que vamos a crear de +esta clase principal. + +01:01.060 --> 01:05.060 +Entonces supongamos, tenemos nuestra clase +de una persona + +01:05.060 --> 01:08.060 +que ahorita solo tiene ciertas propiedades +y métodos. + +01:08.060 --> 01:11.960 +Ya que tengamos eso listo y creemos una +instancia, + +01:11.960 --> 01:15.860 +vamos a crear una instancia de persona que +ahora se va a llamar, por ejemplo, José. + +01:15.860 --> 01:18.100 +Tenemos a José, que tiene 30 +años, + +01:18.100 --> 01:22.360 +que tiene una altura de 1,70 y que es +colombiano. + +01:22.360 --> 01:23.900 +Ya que tenemos +esto, + +01:23.900 --> 01:27.060 +en nuestra clase nosotros también tenemos +métodos + +01:27.060 --> 01:30.100 +que no tenemos que generar en la instancia +de José. + +01:30.100 --> 01:34.160 +En nuestra clase principal tenemos un +método que se llama saludar. + +01:34.160 --> 01:36.760 +Entonces vamos a hacer que José, con esta +información, + +01:36.760 --> 01:41.400 +pueda saludar con el método que está +heredando de la clase padre. + +01:41.400 --> 01:43.300 +En este caso, lo que haríamos +es, + +01:43.300 --> 01:45.860 +ya que tenemos la información de la +instancia de José, + +01:45.860 --> 01:49.620 +podemos hacer que José haga la acción de +saludar + +01:49.620 --> 01:51.020 +y que entonces el saludo +sea, + +01:51.020 --> 01:53.900 +hola, mi nombre es José, ¿cómo te llamas +tú? + +01:53.900 --> 01:56.460 +Nosotros no tenemos que generar, como te +comento, + +01:56.460 --> 01:58.460 +el método en la instancia de +José. + +01:58.460 --> 02:02.820 +Si una vez que generamos el método que +extiende de la clase padre, + +02:02.820 --> 02:05.700 +que es la clase principal que tenemos, +este molde, + +02:05.700 --> 02:08.220 +en ese momento, gracias al +prototipo + +02:08.220 --> 02:10.660 +que se generó de esta clase constructora, + +02:10.660 --> 02:13.120 +nosotros podemos heredar también los +métodos + +02:13.120 --> 02:23.120 +que fueron creados de esta clase padre. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..bf75d864f8807006ac375b36b29902b5658bbd91 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/05-Resumen.html" @@ -0,0 +1,130 @@ + + + + + + + Programación Orientada a Objetos en JavaScript: Clases y Prototipos + + + +
+
+

Resumen

¿Cómo funciona la programación orientada a objetos en JavaScript?

+

La programación orientada a objetos es crucial para entender cómo JavaScript maneja objetos y prototipos. A diferencia de otros lenguajes que utilizan clases basadas en herencia, JavaScript emplea prototipos para gestionar las propiedades y métodos que se comparten entre objetos. Aquí es donde entra en juego la función constructora o clase constructora. Pero, ¿cómo ocurre esto realmente bajo el capó?

+

¿Qué es un prototipo en JavaScript?

+

Un prototipo en JavaScript es un objeto del cual otros objetos heredan propiedades y métodos. Al crear una función constructora (o clase constructora), JavaScript automáticamente genera un prototipo asociado a esa función, que se usa como un "molde" para crear instancias de objetos.

+

En el siguiente ejemplo, creamos una clase constructora para un objeto Persona:

+
function Persona(nombre, edad, altura, nacionalidad) {
+    this.nombre = nombre;
+    this.edad = edad;
+    this.altura = altura;
+    this.nacionalidad = nacionalidad;
+}
+
+Persona.prototype.saludar = function() {
+    return `Hola, mi nombre es ${this.nombre}, ¿cómo te llamas tú?`;
+};
+
+

¿Cómo se crean las instancias de una clase?

+

Cuando necesitas crear una instancia de un objeto a partir de una clase constructora, llenas este "molde" con los datos específicos. Por ejemplo, al crear una instancia de Persona, como es el caso de José:

+
var jose = new Persona('José', 30, 1.70, 'colombiano');
+
+

¿Qué es la herencia en JavaScript?

+

La herencia en JavaScript se refiere a la capacidad de un objeto para acceder a propiedades y métodos de otro objeto. Este mecanismo se realiza mediante el uso de prototipos. En el caso anterior, la instancia jose hereda el método saludar del prototipo de Persona.

+

Al usar el método heredado, el saludo de José se vería así:

+
console.log(jose.saludar());
+// Salida: Hola, mi nombre es José, ¿cómo te llamas tú?
+
+

¿Cuál es la ventaja de usar prototipos?

+

El uso de prototipos en JavaScript permite crear funciones que se comparten entre todas las instancias de una misma clase constructora, evitando así la duplicación y optimizando el uso de memoria. Además, facilita la extensión de objetos sin la necesidad de redefinir métodos para cada instancia nueva.

+

¿Cómo mejorar la eficiencia en la programación orientada a objetos?

+
    +
  • Reutiliza métodos: Aprovechar la herencia de métodos mediante prototipos permite que las instancias compartan métodos sin replicarlos.
    • +
  • Modulariza el código: Dividir el código en funciones y clases separadas hace que sea más fácil de mantener y depurar.
    • +
  • Documenta y comenta: Explicar la lógica de tu código es crucial, especialmente al trabajar con estructuras complejas como la herencia de prototipos.
    • +
  • Experimenta con patrones de diseño: Patrones como el patrón módulo o el patrón fábrica pueden ser útiles para estructurar y gestionar mejor tu código orientado a objetos.
    • +
+

La programación orientada a objetos en JavaScript puede cambiar la forma en que gestionas y utilizas objetos, haciéndola una herramienta poderosa y flexible para cualquier desarrollador que busque optimizar su código y mejorar su flujo de trabajo.

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

Resumen

¿Qué son los prototipos y la herencia en JavaScript?

+

Cuando hablamos de programación orientada a objetos en JavaScript, es crucial entender cómo funcionan los prototipos y la herencia. En este lenguaje, las funciones y las clases constructoras son las que generan la propiedad denominada prototipo. Este prototipo es esencial porque contiene los métodos y propiedades que construimos en las clases o funciones constructoras. De este modo, garantizamos que las instancias u otras clases que se extiendan de nuestra clase principal puedan acceder a esos métodos y propiedades.

+

¿Cómo se crean clases y funciones constructoras?

+

Las clases y funciones constructoras en JavaScript actúan como plantillas para construir objetos. Solo estas dos estructuras pueden generar un prototipo, lo cual no es posible en instancias. Para ejemplificar, vamos a ver cómo crear una clase constructora en JavaScript:

+
class Animal {
+  constructor(nombre, tipo) {
+    this.nombre = nombre;
+    this.tipo = tipo;
+  }
+
+  emitirSonido() {
+    console.log("El animal emite un sonido");
+  }
+}
+
+

En este ejemplo, nuestra clase Animal tiene un constructor que establece propiedades básicas como el nombre y el tipo del animal, así como un método para emitir un sonido.

+

¿Cómo se implementa la herencia en JavaScript?

+

JavaScript permite que una clase extienda otra, permitiendo heredar propiedades y métodos. Para ilustrarlo, crearemos una clase Perro que extiende de Animal:

+
class Perro extends Animal {
+  constructor(nombre, tipo, raza) {
+    super(nombre, tipo);
+    this.raza = raza;
+  }
+
+  emitirSonido() {
+    console.log("El perro ladra");
+  }
+
+  correr() {
+    console.log(`${this.nombre} corre alegremente`);
+  }
+}
+
+

Aquí, Perro hereda de Animal. Gracias al uso de extends y super, Perro puede usar el constructor de Animal para inicializar las propiedades de nombre y tipo. Además, Perro tiene su propio método emitirSonido, que sobreescribe el de Animal, mostrando flexibilidad y personalización en la herencia.

+

¿Qué papel juega el this y el super?

+

El uso de this y super es crucial cuando trabajamos con herencia en JavaScript. this se refiere al contexto de la clase actual. Por otro lado, super permite acceder y llamar a funciones del objeto padre de una clase. Esto es especialmente importante para inicializar propiedades del padre cuando se usa herencia:

+
    +
  • super(nombre, tipo);: Llama al constructor de Animal permitiendo que Perro inicialice nombre y tipo.
    • +
  • this.raza = raza;: Completa la inicialización de Perro con una propiedad adicional.
    • +
+
const perro1 = new Perro("Bobby", "perro", "Pug");
+perro1.emitirSonido(); // Imprime: El perro ladra
+perro1.correr(); // Imprime: Bobby corre alegremente
+
+

Con la instancia perro1, demostramos cómo Perro utiliza métodos heredados y propios, resaltando la eficiencia de la herencia.

+

¿Cómo funcionan los prototipos en la práctica?

+

Los prototipos en JavaScript funcionan de manera automática y son fundamentales para compartir métodos y propiedades entre instancias o en clase heredada. Lo podemos observar de la siguiente forma:

+
console.log(Animal.prototype); // Muestra métodos de la clase Animal
+console.log(Perro.prototype);  // Incluye métodos de Perro y hereda los de Animal
+
+

Estos prototipos permiten modificar o agregar métodos de forma dinámica, compartiendo funciones entre objetos y asegurando una mayor eficiencia en el manejo de memoria.

+

Este entendimiento de prototipos y herencia nos permite crear código más eficiente y fácil de mantener, desarrollando estructuras de programación que maximizan la reusabilidad. ¡Sumérgete en la práctica y lleva estas ideas al siguiente nivel!

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

Resumen

¿Cómo crear métodos especiales en una instancia existente?

+

Al trabajar con instancias específicas de una clase en JavaScript, a veces necesitamos métodos únicos que no fueron definidos en la clase constructora original. Para abordar esta necesidad, es posible agregar nuevos métodos directamente a una instancia. Para llevar a cabo esto, simplemente declaramos el método como una función asociada a la instancia.

+
perro1.nuevoMetodo = function() {
+  console.log("Este es un nuevo método.");
+};
+
+

Este enfoque añade el método solo a perro1, haciendo que otras instancias no lo tengan. Aunque funcional para escenarios específicos, este método no es elegante ni eficiente si queremos que todas las instancias compartan el mismo comportamiento.

+

¿Qué es el prototype y cómo se utiliza para agregar métodos?

+

El prototype en JavaScript es una herramienta fundamental para compartir métodos y propiedades a través de múltiples instancias de una clase constructora. Si buscamos que un método esté disponible para cada instancia de una clase, se debe añadir directamente al prototipo de esa clase.

+
Perro.prototype.segundoMetodo = function() {
+  console.log("Este es otro nuevo método.");
+};
+
+

Con este enfoque, cualquier instancia de Perro, ya existente o creada en el futuro, podrá acceder a segundoMetodo. Esta técnica es esencial para la economía de memoria y eficiencia, ya que las funciones compartidas se almacenan en un solo lugar en la memoria.

+

¿Qué es una cadena de prototipos en JavaScript?

+

La cadena de prototipos es un concepto clave que explica cómo se heredan métodos y propiedades en JavaScript. Cuando se intenta acceder a una propiedad o método de un objeto, JavaScript primero busca en el propio objeto. Si no lo encuentra, sube por la cadena de prototipos hasta encontrarlo o llegar a null.

+
    +
  1. Perro1 (instancia): No almacena métodos en el prototipo directamente.
    2. +
  2. Perro (prototipo de clase): Aquí se encuentran los métodos compartidos por todas las instancias de Perro.
    3. +
  3. Animal (clase base): Es la clase de la que Perro podría extenderse.
    4. +
  4. Object (objeto global): La raíz de todos los objetos en JavaScript.
    5. +
+

Este sistema de próxeda permite una distribución eficaz de métodos, optimizando recursos sin replicar funciones en cada instancia.

+

¿Cómo visualizar la cadena de prototipos?

+

Para entender visualmente cómo funciona una cadena de prototipos, podemos inspeccionar el prototipo de una instancia. Utilizamos Object.getPrototypeOf() para seguir la cadena.

+
let prototipoActual = Object.getPrototypeOf(perro1);
+while (prototipoActual) {
+  console.log(prototipoActual);
+  prototipoActual = Object.getPrototypeOf(prototipoActual);
+}
+
+

Este código recorre la cadena de prototipos, mostrando cómo perro1 está ligado al prototipo de Perro, luego a Animal y finalmente a Object.

+

Este sistema es esencial para aprovechar al máximo las capacidades de JavaScript, permitiendo herencia y métodos compartidos sin la duplicación innecesaria de datos. Aprender a usar prototipos eficientemente es un paso importante en el camino de todo desarrollador de JavaScript. ¡Sigue practicando y explorando para convertirte en un mejor programador!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_58862723-5875-440e-973f-d6b69b7383c9.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_58862723-5875-440e-973f-d6b69b7383c9.js" new file mode 100644 index 0000000000000000000000000000000000000000..dafe2de0fc5e0a4cf7bb9d132ad1cbf31ac6e706 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_58862723-5875-440e-973f-d6b69b7383c9.js" @@ -0,0 +1,40 @@ +class Animal { + constructor(nombre, tipo) { + this.nombre = nombre; + this.tipo = tipo; + } + emitirSonido() { + console.log("El animal emite un sonido"); + } +} + +class Perro extends Animal { + constructor(nombre, tipo, raza) { + super(nombre, tipo); + this.raza = raza; + } + emitirSonido() { + console.log("El perro ladra"); + } + correr() { + console.log(`${this.nombre} corre alegremente`); + } +} + +const perro1 = new Perro("Bobby", "Perro", "Pug"); + +console.log(perro1); +perro1.correr(); +perro1.emitirSonido(); + +perro1.nuevoMetodo = function () { + console.log("Este es un metodo"); +}; + +Perro.prototype.segundoMetodo = function () { + console.log("Es otro nuevo metodo"); +}; + +Animal.prototype.tercerMetodo = function () { + console.log("Un metodo más"); +}; diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_f73e3a49-7ee5-4713-a9f9-2a9cc854b45c.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_f73e3a49-7ee5-4713-a9f9-2a9cc854b45c.js" new file mode 100644 index 0000000000000000000000000000000000000000..dafe2de0fc5e0a4cf7bb9d132ad1cbf31ac6e706 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/07-index_f73e3a49-7ee5-4713-a9f9-2a9cc854b45c.js" @@ -0,0 +1,40 @@ +class Animal { + constructor(nombre, tipo) { + this.nombre = nombre; + this.tipo = tipo; + } + emitirSonido() { + console.log("El animal emite un sonido"); + } +} + +class Perro extends Animal { + constructor(nombre, tipo, raza) { + super(nombre, tipo); + this.raza = raza; + } + emitirSonido() { + console.log("El perro ladra"); + } + correr() { + console.log(`${this.nombre} corre alegremente`); + } +} + +const perro1 = new Perro("Bobby", "Perro", "Pug"); + +console.log(perro1); +perro1.correr(); +perro1.emitirSonido(); + +perro1.nuevoMetodo = function () { + console.log("Este es un metodo"); +}; + +Perro.prototype.segundoMetodo = function () { + console.log("Es otro nuevo metodo"); +}; + +Animal.prototype.tercerMetodo = function () { + console.log("Un metodo más"); +}; diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..3f86e0a2354af19cfe09666bae9441389a052322 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Resumen.html" @@ -0,0 +1,128 @@ + + + + + + + Uso de "this" en Clases y Funciones Constructoras + + + +
+
+

Resumen

¿Qué es la palabra reservada "this" en JavaScript?

+

La palabra reservada "this" es una de las herramientas más importantes y útiles al trabajar con clases y funciones constructoras en JavaScript. "This" hace referencia directamente al objeto o clase que se está construyendo. En programación orientada a objetos, las clases actúan como plantillas para crear múltiples instancias de objetos, y "this" permite acceder a los parámetros definidos dentro del constructor de una clase para definir propiedades de las instancias.

+

¿Cómo utilizar "this" dentro de una clase?

+

Para comprender cómo "this" opera dentro de una clase, vamos a explorar su uso mediante la creación de una clase llamada Persona. Aquí se explica cómo "this" permite interactuar con los valores inyectados en el constructor:

+
class Persona {
+  constructor(nombre, edad) {
+    this.nombre = nombre;
+    this.edad = edad;
+  }
+}
+
+

En este ejemplo, this.nombre y this.edad indican que cada instancia de Persona tendrá propiedades nombre y edad, cuyas valores serán los que se pasen al crear las instancias.

+

¿Cómo crear instancias y utilizar "this"?

+

Para crear una instancia de la clase Persona, utilizamos la palabra reservada new, que construye una nueva instancia de la clase con los valores proporcionados:

+
let persona1 = new Persona("Alice", 25);
+
+

Aquí, al emplear new Persona("Alice", 25), se inyectan "Alice" y 25 como nombre y edad respectivamente, a los parámetros del constructor, asignándolos a las propiedades nombre y edad del objeto persona1.

+

¿Cómo añadir métodos que utilicen "this"?

+

Además de establecer propiedades, "this" se utiliza frecuentemente en métodos de una clase para trabajar con las propiedades de instancia. Observe cómo se añade un método a la clase Persona:

+
Persona.prototype.nuevoMetodo = function() {
+  console.log(`Mi nombre es ${this.nombre}`);
+};
+
+

Este método, al ser llamado, accederá a la propiedad nombre de la instancia a través de this y permitirá imprimir el nombre almacenado:

+
persona1.nuevoMetodo(); // Salida: Mi nombre es Alice
+
+

El uso de this.nombre en el método nuevoMetodo asegura que siempre haga referencia a la propiedad nombre de la instancia actual, encapsulando así correctamente la funcionalidad dentro de la clase.

+

Recomendaciones al utilizar "this"

+
    +
  • Claridad y contexto: Asegúrese de comprender en qué contexto se utiliza "this", ya que su valor puede cambiar dependiendo de cómo se llame a una función o método.
    • +
  • Constructores y métodos encadenados: Use "this" para retornar el objeto de la instancia misma, lo que permite encadenar métodos y operaciones que siempre refieren al objeto actual.
    • +
  • Arrow functions: Tenga cuidado al utilizar funciones flecha (arrow functions) con "this", ya que en este caso "this" no hace referencia al objeto de instancia, sino al "this" del contexto léxico más cercano.
    • +
+

Como conclusión de las instrucciones, hemos visto cómo "this" proporciona una referencia central a las propiedades de las clases y sus instancias, lo que es esencial para la programación orientada a objetos en JavaScript. ¡Sigue practicando y explorando nuevas formas de aplicar "this" en tus proyectos para mejorar tus habilidades de programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..e5eeb03ae3cf27cc71adda5103ac338f31413e63 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:35338336de2d1b72740320e4f9faf40447a450470aaf9c2ea129aa76e84cf88e +size 35158266 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..b00f5359ef022732881386e7cefd5ec51b2b3f81 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-Uso de this en Clases y Funciones Constructoras.vtt" @@ -0,0 +1,420 @@ +WEBVTT + +00:00.000 --> 00:01.880 +Vamos a hablar ahora de una palabra +reservada + +00:01.880 --> 00:04.240 +que se llama this, que es muy +importante + +00:04.240 --> 00:06.640 +y que se utiliza mucho en la parte de +clases + +00:06.640 --> 00:08.400 +y de funciones +constructoras. + +00:10.240 --> 00:11.080 +Estando +acá, + +00:15.960 --> 00:18.200 +this es una palabra +reservada + +00:18.200 --> 00:22.760 +que vamos a utilizar al momento de estar +trabajando con clases. + +00:22.760 --> 00:25.280 +This per se, esta +palabra, + +00:25.280 --> 00:28.480 +hace referencia a el objeto +mismo + +00:28.480 --> 00:31.760 +o a la clase que estamos construyendo. + +00:31.760 --> 00:35.320 +Que en este caso, recordemos, es la clase, + +00:35.320 --> 00:39.480 +un como molde que estamos +haciendo + +00:39.480 --> 00:42.200 +para poder construir después de esta misma +clase + +00:42.200 --> 00:45.560 +diferentes instancias que se conviertan en +nuestros objetos. + +00:45.560 --> 00:48.440 +Pero cuando estamos trabajando con la +clase + +00:48.440 --> 00:50.880 +o con nuestra función +constructora, + +00:50.880 --> 00:54.240 +nosotros utilizamos la palabra reservada +this + +00:54.240 --> 00:58.880 +para poder tener referencia a los +parámetros del constructor, + +00:58.880 --> 01:01.480 +que es un método que está dentro de la clase, + +01:01.480 --> 01:03.920 +para que cuando creemos la instancia, + +01:03.920 --> 01:06.000 +la gente, los usuarios, las +personas + +01:06.000 --> 01:08.680 +que empiezan a crear la instancia o +nosotros mismos, + +01:08.680 --> 01:11.720 +el valor de las propiedades del +constructor + +01:11.720 --> 01:14.400 +puedan existir directamente en nuestro objeto. + +01:14.400 --> 01:16.400 +Vamos a poner un ejemplo en +código. + +01:16.400 --> 01:19.680 +Vamos a crear una clase que se llame Persona. + +01:19.680 --> 01:22.920 +Vamos a crear el método de constructor. + +01:24.280 --> 01:25.480 +Y en el método de +constructor, + +01:25.480 --> 01:27.240 +vamos a poner los parámetros que necesitamos. + +01:27.240 --> 01:30.440 +Esta persona va a tener nombre y edad. + +01:33.240 --> 01:36.880 +Aquí, para poder entonces en el +constructor + +01:36.880 --> 01:41.320 +hacer referencia a el valor que se va a +inyectar aquí + +01:41.320 --> 01:44.360 +para poder generar las instancias de +personas + +01:44.360 --> 01:45.920 +que vamos a +construir, + +01:45.920 --> 01:47.960 +vamos a utilizar +this. + +01:47.960 --> 01:52.960 +Va a ser this nombre igual a nombre. + +01:52.960 --> 01:54.440 +Diego, ¿qué es +esto? + +01:54.440 --> 01:58.880 +This hace referencia a este objeto, +prácticamente. + +01:58.880 --> 02:01.760 +Entonces, cuando nosotros vamos a crear +una instancia, + +02:01.760 --> 02:03.320 +vamos a empezar aquí, por +ejemplo, + +02:03.320 --> 02:06.560 +paso a paso con la creación de una +instancia nueva, + +02:06.560 --> 02:09.560 +persona1 va a ser igual a +new, + +02:09.560 --> 02:12.360 +palabra reservada, de +persona. + +02:13.360 --> 02:16.280 +Entonces aquí vamos a poner +que + +02:16.280 --> 02:21.280 +vamos a poner que +Alice, + +02:21.280 --> 02:24.160 +y tiene 25 +años. + +02:24.160 --> 02:29.160 +Aquí vamos a terminar de construir nuestro +constructor.edad + +02:29.440 --> 02:30.960 +igual a +edad. + +02:32.320 --> 02:33.320 +Perfecto. + +02:33.320 --> 02:36.960 +Entonces, estas tenemos ya nuestra clase. + +02:36.960 --> 02:39.520 +Aquí tenemos nuestra primera instancia. + +02:39.520 --> 02:42.840 +Entonces, cuando nosotros utilizamos el +new persona, + +02:42.840 --> 02:45.160 +lo que estamos haciendo es el +new + +02:45.160 --> 02:49.480 +va prácticamente a tomar estos +valores + +02:49.480 --> 02:51.440 +para poderlos inyectar +aquí, + +02:51.440 --> 02:53.600 +que son los parámetros del constructor, + +02:53.600 --> 02:56.640 +para que entonces cuando generemos una +persona + +02:56.640 --> 02:58.360 +con este +constructor, + +02:58.360 --> 03:00.840 +podamos agregarle el +nombre + +03:00.840 --> 03:04.600 +y podamos agregarle la edad a nuestro objeto, + +03:04.600 --> 03:06.440 +que en este caso es +persona1. + +03:06.440 --> 03:08.960 +Entonces, esta +referencia, + +03:08.960 --> 03:12.920 +el this hace referencia a todo el objeto, + +03:12.920 --> 03:15.600 +y prácticamente la traducción +sería + +03:15.600 --> 03:17.840 +la persona es +this, + +03:17.840 --> 03:20.960 +el nombre de nuestro objeto +persona + +03:20.960 --> 03:24.280 +va a ser el valor que se coloque en la +instancia. + +03:25.800 --> 03:28.760 +La edad de nuestro objeto +persona + +03:28.760 --> 03:33.320 +va a ser la edad que se coloque en la +instancia. + +03:33.320 --> 03:35.920 +Y cuando nosotros mandamos +llamar, + +03:38.120 --> 03:39.800 +por +ejemplo, + +03:39.800 --> 03:44.800 +o mandamos imprimir persona1 y guardamos, + +03:46.720 --> 03:48.640 +tenemos que nuestra +instancia, + +03:48.640 --> 03:52.800 +nuestro primer objeto tiene un nombre y +tiene una edad. + +03:52.800 --> 03:54.880 +Aquí no hace referencia a +this, + +03:54.880 --> 03:57.840 +pero prácticamente si tuviéramos que +manipular, + +03:57.840 --> 03:59.560 +por ejemplo, si tuviéramos que +manipular + +03:59.560 --> 04:02.880 +con algún método específico para esta +instancia, + +04:02.880 --> 04:04.840 +donde fuéramos a utilizar el nombre o la edad, + +04:04.840 --> 04:06.240 +haríamos lo +mismo. + +04:06.240 --> 04:09.920 +Si tuviéramos que ponerle a persona un +método muy particular + +04:09.920 --> 04:12.560 +que solo vaya a existir en +persona, + +04:12.560 --> 04:17.560 +persona.nuevometodo como +función, + +04:18.880 --> 04:20.520 +entonces agarramos como +función, + +04:22.200 --> 04:26.560 +y vamos a imprimir de forma muy rápida. + +04:26.560 --> 04:31.360 +Como vamos a utilizar el valor de una +propiedad del objeto, + +04:31.360 --> 04:32.240 +va a +ser, + +04:32.240 --> 04:35.120 +mi nombre +es, + +04:38.080 --> 04:39.200 +y aquí vamos a +colocar, + +04:39.200 --> 04:42.520 +eso, los corchetes van acá +atrás, + +04:42.520 --> 04:44.720 +this.nombre. + +04:45.760 --> 04:47.800 +Y estamos utilizando aquí el +this + +04:47.800 --> 04:52.800 +porque hace referencia en este momento a +nuestra instancia. + +04:53.200 --> 04:54.680 +Entonces va a +ser, + +04:54.680 --> 04:55.880 +mi nombre +es, + +04:55.880 --> 04:59.960 +mi nombre es el nombre de la instancia +persona1 + +04:59.960 --> 05:02.000 +que estamos colocando en este momento. + +05:02.000 --> 05:04.480 +Es el momento de darle +salvar. + +05:04.480 --> 05:07.200 +Venimos aquí y ponemos +persona1 + +05:08.120 --> 05:11.480 +y damos nuevo +método. + +05:13.200 --> 05:15.800 +Enter, y me regresa mi nombre es +Alice + +05:15.800 --> 05:18.440 +porque el this de aquí está haciendo +referencia + +05:18.440 --> 05:20.920 +a esta instancia que ya tiene un nombre, + +05:20.920 --> 05:22.400 +nosotros ya se lo +colocamos. + +05:23.280 --> 05:26.240 +Entonces es la forma en la que vamos a +utilizar this + +05:26.240 --> 05:28.760 +al momento de estar construyendo +clases + +05:28.760 --> 05:30.240 +o funciones +constructoras, + +05:30.240 --> 05:31.960 +y es la forma en la que lo vamos a +utilizar + +05:31.960 --> 05:34.600 +al momento de estar trabajando con +instancias + +05:34.600 --> 06:01.600 +que vengan VSS +Classy. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_125edb51-afc3-47ce-8f9c-070dd742b2cd.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_125edb51-afc3-47ce-8f9c-070dd742b2cd.js" new file mode 100644 index 0000000000000000000000000000000000000000..463f7cc87cf3d0a942575b4d0a94474e86fb19df --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_125edb51-afc3-47ce-8f9c-070dd742b2cd.js" @@ -0,0 +1,20 @@ +/* +this --- class + +this --- objeto -- class +*/ + +class Persona { + constructor(nombre, edad) { + this.nombre = nombre; + this.edad = edad; + } +} + +const persona1 = new Persona("Alice", 25); + +console.log(persona1); + +persona1.nuevoMetodo = function () { + console.log(`Mi nombre es ${this.nombre}`); +}; diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_17803c0e-d45f-47e5-8773-08ff8a4a998d.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_17803c0e-d45f-47e5-8773-08ff8a4a998d.js" new file mode 100644 index 0000000000000000000000000000000000000000..463f7cc87cf3d0a942575b4d0a94474e86fb19df --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/08-index_17803c0e-d45f-47e5-8773-08ff8a4a998d.js" @@ -0,0 +1,20 @@ +/* +this --- class + +this --- objeto -- class +*/ + +class Persona { + constructor(nombre, edad) { + this.nombre = nombre; + this.edad = edad; + } +} + +const persona1 = new Persona("Alice", 25); + +console.log(persona1); + +persona1.nuevoMetodo = function () { + console.log(`Mi nombre es ${this.nombre}`); +}; diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..8483d35ea1e0b695eb7d36d11a876750fe2efe1e --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Resumen.html" @@ -0,0 +1,128 @@ + + + + + + + Validación de Usuarios en una Red Social: Algoritmo Básico + + + +
+
+

Resumen

¿Cómo construimos una red social sencilla?

+

Construir una red social desde cero puede parecer una tarea complicada, pero con la guía correcta, puedes lograr grandes avances. Hoy, nos centraremos en un reto propuesto: crear un algoritmo que permita desarrollar una red social básica. Aquí exploraremos los pasos necesarios para lograr este objetivo, desde la autenticación de usuario hasta la validación de contraseñas y el manejo de datos para presentar un "timeline".

+

¿Cómo autenticar a un usuario mediante usuario y contraseña?

+

Primero, debemos permitir que el usuario ingrese sus credenciales. Lo haremos capturando el nombre de usuario y la contraseña a través de la consola utilizando prompt. Luego, guardaremos estos valores en variables que posteriormente usaremos para comprobar la autenticidad del usuario en nuestra base de datos.

+
const username = prompt("¿Cuál es tu usuario?");
+const password = prompt("¿Cuál es tu contraseña?");
+
+

¿Cómo validar las credenciales del usuario ingresado con la base de datos?

+

Seguidamente, el sistema debe verificar si el usuario y contraseña ingresados existen en una base de datos. Para ello, simulamos nuestra base de datos como un array de objetos. Crear una función que recorra este array y compare las credenciales ingresadas por el usuario.

+
function usuarioExistente(username, password) {
+    for (let i = 0; i < userDatabase.length; i++) {
+        if (userDatabase[i].username === username && userDatabase[i].password === password) {
+            console.log("Es correcto");
+            break;
+        }
+    }
+    console.log("No es correcto");
+}
+
+

La función usuarioExistente utiliza un bucle que itera sobre cada objeto de nuestro userDatabase, y verifica si la información se corresponde con el input del usuario.

+

¿Qué hacer tras la validación de credenciales?

+

Si el usuario y la contraseña coinciden con los registros de la base de datos, el sistema debe mostrar un mensaje de bienvenida y el "timeline" del usuario, similar al concepto de redes sociales como Twitter o Facebook. Si no coinciden, se muestra un mensaje de error y se gestiona el acceso denegado.

+
usuarioExistente(username, password);
+
+

Por lo tanto, el acceso seguro a los datos es crítico y es importante tener en cuenta que este ejemplo es una simplificación, ideal para entender los conceptos básicos de autenticación. Pero en un desarrollo en producción, sería necesario implementar protocolos de seguridad más avanzados.

+

Recomendaciones para continuar aprendiendo

+

A medida que avances en la construcción de tu propia red social, considera aprender más sobre:

+
    +
  • Cifrado de contraseñas: proteger los datos sensibles del usuario.
    • +
  • Manipulación de DOM: para mejorar la interfaz de usuario.
    • +
  • Programación orientada a objetos: estructura de código escalable y eficiente.
    • +
  • Bases de datos NoSQL vs SQL: distinguir entre diferentes tipos de bases de datos para adaptarse a las necesidades de almacenamiento.
    • +
+

Este reto es solo el comienzo. La práctica y la curiosidad te ayudarán a continuar desarrollando tus habilidades de programación. ¡Ánimo! Cada línea de código que escribes es un paso hacia el dominio del arte de la programación.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..700eb239e61d3f8499e5b21416f3cdd561c7a371 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:60766476d83a880c658bf4287a7b911f9c07cb8437ba842dceeaa0b2ac5178ee +size 91444195 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..0f5471d5b9f2a2d19fd1158db90434b9ae0c7206 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-Validaci\303\263n de Usuarios en una Red Social Algoritmo B\303\241sico.vtt" @@ -0,0 +1,1174 @@ +WEBVTT + +00:00.000 --> 00:01.500 +Vamos a hacer un +reto. + +00:01.500 --> 00:03.500 +Vamos a pasar +allá. + +00:03.500 --> 00:08.500 +El día de hoy, el reto es que logremos +construir + +00:08.500 --> 00:13.500 +el algoritmo que nos va a ayudar a generar +una red social. + +00:13.500 --> 00:16.500 +Y para eso, tengo cuatro pasos que son +requerimientos. + +00:16.500 --> 00:21.500 +La intención es que puedas tú intentar +construir este reto. + +00:21.500 --> 00:23.000 +Vamos a ver los +requerimientos. + +00:23.000 --> 00:26.500 +El primero es, debe de haber una forma en +la que el usuario + +00:26.500 --> 00:30.500 +deba poder ingresar su usuario y su +contraseña. + +00:30.500 --> 00:33.500 +El sistema debe ser capaz de validar si el +usuario + +00:33.500 --> 00:36.500 +y la contraseña ingresados por el +usuario + +00:36.500 --> 00:39.000 +existen en la base de +datos. + +00:39.000 --> 00:40.500 +Vamos, tengo una pequeña base de +datos + +00:40.500 --> 00:43.500 +que yo te voy a dejar una base de datos de +ejemplo que está aquí. + +00:43.500 --> 00:46.000 +Entonces, el sistema que vayamos a +construir + +00:46.000 --> 00:48.500 +debe de venir a esta base de datos y +validar + +00:48.500 --> 00:51.500 +si la contraseña que está agregando el +usuario, + +00:51.500 --> 00:55.000 +su usuario y contraseña, existen aquí. + +00:55.000 --> 00:58.500 +Si existen aquí, entonces el usuario y +contraseña, + +00:58.500 --> 01:01.500 +si son correctos, el sistema debe +mostrar + +01:01.500 --> 01:04.000 +un mensaje de bienvenida como, hola, +¿cómo estás? + +01:04.000 --> 01:06.000 +Bienvenido, bla, bla, +bla. + +01:06.000 --> 01:08.500 +Y mostrar el timeline del +usuario. + +01:08.500 --> 01:11.000 +Esto viene de otra base de +datos. + +01:11.000 --> 01:13.000 +Es una base de datos bastante sencilla. + +01:13.000 --> 01:18.000 +Es como un array de objetos que trae un +pequeño timeline. + +01:18.000 --> 01:19.000 +Muy +sencillo. + +01:19.000 --> 01:22.000 +Que trae usernames con nombres de +usuarios + +01:22.000 --> 01:23.500 +que a lo mejor estoy +siguiendo + +01:23.500 --> 01:27.000 +y ciertos mensajes que se han colocado. + +01:27.000 --> 01:29.500 +Esto es una simplificación de una base de +datos + +01:29.500 --> 01:31.500 +que se puede utilizar en una red +social + +01:31.500 --> 01:33.000 +para tener un +timeline. + +01:33.000 --> 01:34.500 +Pero esto puede ser tan +complejo + +01:34.500 --> 01:36.500 +que se le puede poner, por +ejemplo, + +01:36.500 --> 01:38.000 +la hora en la que se +publicó. + +01:38.000 --> 01:42.000 +Se le pueden poner a lo mejor algunos +submensajes. + +01:42.000 --> 01:43.000 +Esto puede +crecer. + +01:43.000 --> 01:46.000 +Pero ahorita, en forma de simplificarlo, + +01:46.000 --> 01:49.500 +esta es la pequeña base de datos que vamos +a utilizar. + +01:49.500 --> 01:51.500 +Bien, ahora, esto +pasa + +01:51.500 --> 01:55.000 +si el usuario y la contraseña son correctos. + +01:55.000 --> 01:56.500 +En caso de que +no, + +01:56.500 --> 01:59.000 +si el usuario y la contraseña son incorrectos, + +01:59.000 --> 02:01.000 +el sistema debe mostrar un mensaje de +error + +02:01.000 --> 02:04.000 +de, oye, lo siento, pero a lo mejor, +por ejemplo, + +02:04.000 --> 02:06.000 +tu usuario y contraseña no +existen + +02:06.000 --> 02:09.000 +y no debería mostrar ningún tipo de timeline. + +02:09.000 --> 02:11.000 +Entonces, pausa +aquí + +02:11.000 --> 02:13.500 +e intenta construir este +sistema + +02:13.500 --> 02:16.500 +siguiendo estos +requerimientos. + +02:16.500 --> 02:18.000 +¿Cómo harías para que el +usuario + +02:18.000 --> 02:20.000 +pueda ingresar a un usuario y +contraseña? + +02:20.000 --> 02:22.500 +¿Cómo harías para que el sistema que +construyamos + +02:22.500 --> 02:24.500 +pueda validar ese usuario y +contraseña + +02:24.500 --> 02:27.000 +en esta base de +datos? + +02:27.000 --> 02:29.000 +Para que la puedas +ver. + +02:29.000 --> 02:31.000 +Y después, una vez que se +valide, + +02:31.000 --> 02:32.000 +si es +correcto, + +02:32.000 --> 02:35.000 +¿cómo harías para mostrar en la +consola + +02:35.000 --> 02:40.000 +el timeline que es esta otra base de +datos? + +02:40.000 --> 02:41.000 +Si no es +correcto, + +02:41.000 --> 02:43.000 +deberá demostrar entonces un +mensaje + +02:43.000 --> 02:44.500 +que sea un lo +siento, + +02:44.500 --> 02:46.000 +tu usuario no +existe + +02:46.000 --> 02:47.500 +o tu contraseña es +incorrecta + +02:47.500 --> 02:49.000 +y no deberá mostrar +nada. + +02:49.000 --> 02:50.000 +Pausa. + +02:50.000 --> 02:51.000 +Y si logras +hacerlo, + +02:51.000 --> 02:53.000 +compártelo en los +comentarios. + +02:58.000 --> 02:59.000 +Listo, ¿qué +tal? + +02:59.000 --> 03:00.000 +¿Te costó +trabajo? + +03:00.000 --> 03:01.500 +En caso de que no lo hayas +logrado, + +03:01.500 --> 03:02.500 +no te +preocupes, + +03:02.500 --> 03:05.000 +vamos a trabajar con eso en este momento. + +03:05.000 --> 03:07.000 +Vamos a los +requerimientos. + +03:07.000 --> 03:09.000 +El primer requerimiento es el +usuario + +03:09.000 --> 03:11.500 +debe poder ingresar su usuario y contraseña. + +03:11.500 --> 03:13.500 +Y esto es nosotros darles una +opción + +03:13.500 --> 03:16.500 +de cómo ingresar un usuario y contraseña. + +03:16.500 --> 03:20.500 +Voy ahorita a, por ejemplo, multar esta +base de datos. + +03:20.500 --> 03:23.000 +Y esto lo voy a hacer con dos +let, + +03:23.000 --> 03:25.000 +o más bien +const, + +03:25.000 --> 03:32.000 +que va a ser username igual a prompt, + +03:32.000 --> 03:39.000 +que sea cuál es tu +usuario. + +03:39.000 --> 03:40.500 +Y ya que es +esta, + +03:40.500 --> 03:42.500 +voy a que viene +const, + +03:42.500 --> 03:47.000 +que va a ser +password, + +03:47.000 --> 03:51.500 +y esto va a ser igual a +prompt, + +03:51.500 --> 03:59.000 +que sea cuál es tu +contraseña. + +04:00.500 --> 04:01.500 +Perfecto. + +04:01.500 --> 04:04.500 +Aquí ya tenemos nosotros en el +sistema + +04:04.500 --> 04:06.500 +la opción en que el +usuario, + +04:06.500 --> 04:07.500 +a través del +navegador, + +04:07.500 --> 04:09.000 +nos pueda poner dos +strings + +04:09.000 --> 04:11.500 +que nosotros guardemos en estas dos +variables + +04:11.500 --> 04:13.500 +y que podamos utilizar +después. + +04:13.500 --> 04:15.500 +Si doy guardar +aquí, + +04:15.500 --> 04:18.500 +entonces puedo poner como +Diego + +04:18.500 --> 04:21.500 +y que sea +abc. + +04:21.500 --> 04:23.000 +Y estando +acá, + +04:23.000 --> 04:26.000 +puedo poner +username, + +04:26.000 --> 04:28.000 +y sale Diego, +perfecto. + +04:28.000 --> 04:31.500 +Y aquí puedo poner +password, + +04:31.500 --> 04:33.000 +y ahí sale +abc. + +04:33.000 --> 04:34.000 +Perfecto. + +04:34.000 --> 04:37.500 +La primera, el primer punto ya está +completado. + +04:37.500 --> 04:39.500 +Ahora, el punto número +dos, + +04:39.500 --> 04:41.500 +el sistema es ser capaz de +validar + +04:41.500 --> 04:44.500 +si el usuario y la contraseña que ingresó +el usuario + +04:44.500 --> 04:46.500 +existen en la base de +datos. + +04:46.500 --> 04:48.500 +Tendremos que hacer algún +sistema + +04:48.500 --> 04:49.500 +que nos ayude +a, + +04:49.500 --> 04:52.500 +con estas dos variables que ya tenemos, + +04:52.500 --> 04:54.500 +tenemos que hacer como un loop aquí, + +04:54.500 --> 04:57.000 +una iteración en cada uno de estos objetos, + +04:57.000 --> 04:59.000 +para validar si el +username + +04:59.000 --> 05:01.500 +es igual al valor del username del primer +objeto, + +05:01.500 --> 05:03.500 +y el password es igual al valor del +password + +05:03.500 --> 05:05.000 +del primer +objeto. + +05:05.000 --> 05:06.500 +Si no, lo mismo en el +segundo, + +05:06.500 --> 05:08.500 +lo mismo en el +tercero. + +05:08.500 --> 05:10.000 +Entonces, esto me suena +a, + +05:10.000 --> 05:12.000 +vamos a hacer una +iteración + +05:12.000 --> 05:14.500 +de estos objetos que están en este array, + +05:14.500 --> 05:17.500 +y vamos a validar si algo es igual a algo. + +05:17.500 --> 05:19.000 +Y para +eso, + +05:19.000 --> 05:21.000 +como ya tenemos aquí el +valor, + +05:21.000 --> 05:22.500 +la forma de poder +hacerlo + +05:22.500 --> 05:24.500 +es generar una +función + +05:24.500 --> 05:27.500 +que le pasamos estos dos valores como +parámetros, + +05:27.500 --> 05:30.500 +y que ya entonces generen un +for + +05:30.500 --> 05:32.500 +que recorra este +objeto, + +05:32.500 --> 05:34.500 +o que recorra este array de objetos, + +05:34.500 --> 05:37.500 +y después un if que nos ayude a +validar + +05:37.500 --> 05:40.000 +si nuestro username y +password + +05:40.000 --> 05:42.000 +es igual al valor del username y +password + +05:42.000 --> 05:44.000 +de cada uno de estos +objetos. + +05:44.000 --> 05:46.500 +En caso de que sí en alguno de ellos, + +05:46.500 --> 05:48.000 +se quedará un +break, + +05:48.000 --> 05:50.500 +y de aquí entonces ya podemos avanzar. + +05:50.500 --> 05:52.000 +Así que vamos para +allá. + +05:52.000 --> 05:54.500 +Empezamos con una +función. + +05:54.500 --> 05:58.500 +Esta función va a requerir dos parámetros. + +05:58.500 --> 06:00.000 +De hecho, empezamos con la +función, + +06:00.000 --> 06:04.000 +se va a llamar usuario +existente, + +06:04.000 --> 06:05.500 +que va a tener dos +parámetros, + +06:05.500 --> 06:10.500 +que va a ser username y +password. + +06:11.500 --> 06:12.500 +¿Por +qué? + +06:12.500 --> 06:15.500 +Porque es el valor de las dos +variables + +06:15.500 --> 06:17.500 +que ya tenemos +acá. + +06:17.500 --> 06:19.500 +Teniendo +eso, + +06:19.500 --> 06:21.500 +entonces vamos a empezar +con, + +06:21.500 --> 06:23.500 +tenemos que hacer que se +recorra + +06:23.500 --> 06:26.500 +este array de +objetos. + +06:26.500 --> 06:29.500 +Y para eso vamos a ocupar un +for. + +06:29.500 --> 06:33.500 +Y en el for empezamos con nuestra let +i + +06:33.500 --> 06:36.500 +igual a +cero. + +06:36.500 --> 06:38.500 +Y aquí entonces va a +ser + +06:38.500 --> 06:43.500 +mientras i sea menor +a + +06:43.500 --> 06:47.500 +usuario existente punto +length, + +06:47.500 --> 06:49.500 +que es la longitud +de, + +06:49.500 --> 06:52.500 +no, no, no, no es usuario que se extiende. + +06:52.500 --> 06:54.500 +Esa tiene nuestra base de +datos. + +06:54.500 --> 06:57.500 +User +database. + +06:57.500 --> 06:58.500 +Entonces vamos +acá. + +06:58.500 --> 07:01.500 +Mientras i sea menor a la +longitud + +07:01.500 --> 07:03.500 +de nuestra base de +datos, + +07:03.500 --> 07:04.500 +que es +esta, + +07:04.500 --> 07:07.500 +en este momento tiene tres elementos, + +07:07.500 --> 07:11.500 +entonces i tiene que incrementarse +uno + +07:11.500 --> 07:14.500 +para poder lograr +como + +07:14.500 --> 07:17.500 +el loop que está buscado con +for. + +07:17.500 --> 07:19.500 +Bien, ya +aquí, + +07:19.500 --> 07:20.500 +entonces lo que tenemos que hacer es, + +07:20.500 --> 07:22.500 +tenemos que +validar + +07:22.500 --> 07:25.500 +si cada uno de los username y +password + +07:25.500 --> 07:27.500 +que viene en nuestra base de +datos + +07:27.500 --> 07:29.500 +es igual al username y +password + +07:29.500 --> 07:31.500 +que ya nos pasó nuestro +usuario. + +07:31.500 --> 07:34.500 +Y para eso vamos a utilizar un +if. + +07:34.500 --> 07:38.500 +Con el if quiero validar dos +cosas. + +07:38.500 --> 07:40.500 +Entonces vamos a empezar +con, + +07:40.500 --> 07:42.500 +antes de ir aquí, vamos a nuestra ploca. + +07:42.500 --> 07:49.500 +Tenemos nuestro user +database. + +07:49.500 --> 07:52.500 +Vamos a +imprimirlo. + +07:52.500 --> 07:53.500 +Tenemos un error, ¿por +qué? + +07:53.500 --> 07:56.500 +Tenemos un if incompleto como syntaxes. + +07:56.500 --> 08:00.500 +Voy a, de momento, comentarlo, guardo. + +08:00.500 --> 08:03.500 +Entonces me sale, ok, vamos a poner Diego, + +08:03.500 --> 08:05.500 +que sea +abs. + +08:05.500 --> 08:06.500 +Bien. + +08:06.500 --> 08:08.500 +Ya tenemos +eso. + +08:08.500 --> 08:11.500 +Vamos a poner user +database. + +08:11.500 --> 08:15.500 +Y me regresa ya un array de tres objetos. + +08:15.500 --> 08:17.500 +Lo que quiero hacer es +validar + +08:17.500 --> 08:21.500 +que cada uno de los +atributos + +08:21.500 --> 08:23.500 +que tiene mis +objetos, + +08:23.500 --> 08:25.500 +el valor de los +atributos, + +08:25.500 --> 08:27.500 +es el valor que me +colocó + +08:27.500 --> 08:29.500 +en las variables del +usuario. + +08:29.500 --> 08:31.500 +Entonces para poder hacer +eso, + +08:31.500 --> 08:35.500 +sería user +database, + +08:35.500 --> 08:38.500 +user +database, + +08:38.500 --> 08:41.500 +y vamos a empezar con la posición cero, + +08:41.500 --> 08:46.500 +en donde vamos a pedir que nos regrese el +username. + +08:46.500 --> 08:48.500 +Y con el +username, + +08:48.500 --> 08:51.500 +vamos a hacer esto acá, por ejemplo, + +08:51.500 --> 08:54.500 +y ahora vamos a poner lo +mismo, + +08:54.500 --> 08:55.500 +user +data, + +08:55.500 --> 08:58.500 +en la posición +cero, + +08:58.500 --> 09:01.500 +pero ahora con punto +password. + +09:01.500 --> 09:04.500 +Entonces aquí yo ya tengo el valor del +username + +09:04.500 --> 09:07.500 +que está en nuestra base de +datos, + +09:07.500 --> 09:08.500 +que es el primer +objeto, + +09:08.500 --> 09:09.500 +y tengo el valor del +password, + +09:09.500 --> 09:11.500 +el primer objeto que está en nuestra base +de datos. + +09:11.500 --> 09:14.500 +Lo que tengo que hacer es validar que +estos dos + +09:14.500 --> 09:18.500 +sean igual a lo que nos acaba de ingresar +el usuario + +09:18.500 --> 09:19.500 +por los +prompts, + +09:19.500 --> 09:20.500 +el user y el +password. + +09:20.500 --> 09:22.500 +Entonces para poder hacer +eso, + +09:22.500 --> 09:24.500 +regresamos aquí a nuestro +if, + +09:24.500 --> 09:25.500 +quitamos los +comentarios, + +09:25.500 --> 09:27.500 +para poder hacer +eso, + +09:27.500 --> 09:30.500 +voy a hacer user +database, + +09:30.500 --> 09:31.500 +perfecto, + +09:31.500 --> 09:33.500 +en la posición +i, + +09:33.500 --> 09:36.500 +porque i es el que se va a encargar de la +iteración, + +09:36.500 --> 09:39.500 +punto +username, + +09:39.500 --> 09:42.500 +que sea igual de forma +estricta + +09:42.500 --> 09:45.500 +a el username que ya nos pasó nuestro +usuario acá. + +09:45.500 --> 09:50.500 +Y voy a +poner, + +09:50.500 --> 09:53.500 +vamos a validar user +database, + +09:53.500 --> 09:57.500 +en la posición +i, + +09:57.500 --> 09:59.500 +punto +password, + +09:59.500 --> 10:02.500 +que sea igual de forma +estricta + +10:02.500 --> 10:06.500 +a el password que ya nos compartió nuestro +usuario. + +10:06.500 --> 10:09.500 +Entonces con esto ya estamos haciendo una +pequeña validación + +10:09.500 --> 10:13.500 +en el cual la posición en la que esté +i + +10:13.500 --> 10:16.500 +nos va a traer siempre el valor de los +parámetros + +10:16.500 --> 10:18.500 +de los objetos en los que +esté, + +10:18.500 --> 10:21.500 +y en este momento en el if nosotros vamos +a validar + +10:21.500 --> 10:24.500 +si esos valores son iguales a los +valores + +10:24.500 --> 10:26.500 +que nos está colocando nuestro usuario. + +10:26.500 --> 10:27.500 +Si es +así, + +10:27.500 --> 10:28.500 +solo para +probar, + +10:28.500 --> 10:32.500 +de momento quiero que nos regrese un console. +log, + +10:35.500 --> 10:37.500 +que +sea, + +10:38.500 --> 10:39.500 +es +correcto. + +10:41.500 --> 10:42.500 +Si +no, + +10:44.500 --> 10:45.500 +else, + +10:45.500 --> 10:46.500 +pues entonces no +existe + +10:46.500 --> 10:49.500 +ninguno de los valores que nos regreso al +usuario + +10:49.500 --> 10:51.500 +existen en la base de +datos. + +10:51.500 --> 10:55.500 +Quiero que un +console.log + +10:55.500 --> 10:57.500 +y que +sea, + +10:57.500 --> 10:59.500 +no es +correcto. + +11:01.500 --> 11:05.500 +Vamos de momento a guardar algo importante. + +11:05.500 --> 11:08.500 +Hay que mandar llamar nuestra +función + +11:08.500 --> 11:10.500 +usuario +existente, + +11:10.500 --> 11:11.500 +en donde, pues +evidentemente, + +11:11.500 --> 11:13.500 +es el username y el +password + +11:13.500 --> 11:16.500 +que estamos a punto de +obtener. + +11:16.500 --> 11:17.500 +Con +eso, + +11:17.500 --> 11:19.500 +vamos a poner aquí +cancelar + +11:19.500 --> 11:21.500 +y vamos a guardar otra +vez. + +11:22.500 --> 11:24.500 +Aquí, como +error, + +11:24.500 --> 11:25.500 +Diego, + +11:25.500 --> 11:27.500 +ABC, + +11:27.500 --> 11:28.500 +y es no es +correcto, + +11:28.500 --> 11:29.500 +hizo tres +validaciones, + +11:29.500 --> 11:30.500 +lo podemos +ver. + +11:30.500 --> 11:31.500 +Entonces en las +tres, + +11:31.500 --> 11:32.500 +no es +correcto. + +11:32.500 --> 11:34.500 +Aquí si volvemos +a, + +11:34.500 --> 11:35.500 +como +refrescar, + +11:35.500 --> 11:38.500 +ponemos +Andrés + +11:38.500 --> 11:40.500 +y ponemos uno, dos, +tres, + +11:40.500 --> 11:42.500 +y sale es +correcto. + +11:42.500 --> 11:43.500 +Pero aquí, ¿qué está +pasando? + +11:43.500 --> 11:44.500 +Nos +dice, + +11:44.500 --> 11:45.500 +pues +bueno, + +11:45.500 --> 11:47.500 +la primera validación es +correcta, + +11:47.500 --> 11:50.500 +pero aquí nosotros tenemos que poner la +forma + +11:50.500 --> 11:53.500 +de que cuando esta validación sea correcta, + +11:53.500 --> 11:55.500 +ya no necesitamos que siga +siendo + +11:55.500 --> 11:57.500 +una validación de lo que +falta. + +11:57.500 --> 11:58.500 +En este +caso, + +11:58.500 --> 12:00.500 +pusimos la información del +uno, + +12:00.500 --> 12:02.500 +por eso hace dos recorridos +más. + +12:02.500 --> 12:04.500 +Lo que podemos hacer en este +momento + +12:04.500 --> 12:06.500 +es una vez que sea +correcto, + +12:06.500 --> 12:08.500 +que genere un +break + +12:08.500 --> 12:10.500 +para que se rompa prácticamente de +loop + +12:10.500 --> 12:11.500 +y ahí +listo. + +12:11.500 --> 12:14.500 +Ya no genere otro tipo de validación. + +12:14.500 --> 12:16.500 +Entonces aquí si +guardamos, + +12:16.500 --> 12:17.500 +nada más para +probar, + +12:17.500 --> 12:19.500 +Andrés, + +12:19.500 --> 12:20.500 +uno, dos, +tres, + +12:20.500 --> 12:21.500 +y +listo. + +12:21.500 --> 12:23.500 +Solo dice es +correcto + +12:23.500 --> 12:43.500 +y ya no hace las otras dos validaciones. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-index_f210d63d-0f86-4336-a938-c7bdb343c5d6.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-index_f210d63d-0f86-4336-a938-c7bdb343c5d6.js" new file mode 100644 index 0000000000000000000000000000000000000000..bf4ea3973d373232c95006ea650c41b476e22a9d --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/09-index_f210d63d-0f86-4336-a938-c7bdb343c5d6.js" @@ -0,0 +1,69 @@ +/* +Requerimientos del reto: + +1. El usuario debe poder ingresar su usuario y contraseña +2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos +3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario. +4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline. + +*/ + +const usersDatabase = [ + { + username: "andres", + password: "123", + }, + { + username: "caro", + password: "456", + }, + { + username: "mariana", + password: "789", + }, +]; + +const usersTimeline = [ + { + username: "Estefany", + timeline: "Me encata Javascript!", + }, + { + username: "Oscar", + timeline: "Bebeloper es lo mejor!", + }, + { + username: "Mariana", + timeline: "A mi me gusta más el café que el té", + }, + { + username: "Andres", + timeline: "Yo hoy no quiero trabajar", + }, +]; + +const username = prompt("Cuál es tu usuario?"); +const password = prompt("Cuál es tu contraseña?"); + +function usuarioExistente(username, password) { + for (let i = 0; i < usersDatabase.length; i++) { + if ( + usersDatabase[i].username === username && + usersDatabase[i].password === password + ) { + return true; + } + } + return false; +} + +function signIn(username, password) { + if (usuarioExistente(username, password)) { + alert(`Bienvenido a tu cuenta ${username}`); + console.log(usersTimeline); + } else { + alert("Uuups, usuario o contraseña incorrectos!"); + } +} + +signIn(username, password); diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..89b835221c6474cd16c10bf4d1953b7dc611a86a --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:953e7a7a7f8adab6fdd573c623c7240d5655ea48b75e317b1482916345e97354 +size 74651481 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..92857804b89993f274da0f9771ba7e9d53cf3b8e --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Implementaci\303\263n de la Funci\303\263n SignIn y Validaci\303\263n de Usuario.vtt" @@ -0,0 +1,982 @@ +WEBVTT + +00:00.000 --> 00:04.000 +Ahora que sabemos que nuestra función +funciona, + +00:04.000 --> 00:06.700 +que ya está valideando la información que +nos da el usuario, + +00:06.700 --> 00:09.400 +nos dice si es correcto o no es correcto, + +00:09.400 --> 00:13.400 +ahora tenemos que iniciar lo que es el +sign-in, + +00:13.400 --> 00:16.700 +que es la parte donde el usuario, cuando +mete la información, + +00:16.700 --> 00:19.800 +haga esta validación, sin que nosotros +tengamos que + +00:19.800 --> 00:24.100 +mandañavar como en ese momento esto, aquí, + +00:24.100 --> 00:27.700 +y pueda empezar a mostrar lo que es la +parte de el + +00:27.700 --> 00:29.400 +timeline del +usuario. + +00:29.400 --> 00:32.600 +En este caso, el usuario que se vaya a +conectar, + +00:32.600 --> 00:35.400 +este es su timeline, no va a cambiar. + +00:35.400 --> 00:37.300 +Pero esto puede ser un poco más dinámico, + +00:37.300 --> 00:40.200 +pero eso ya es una estructura distinta. + +00:40.200 --> 00:42.500 +Y si te interesa, esto puede ser parte del +reto, + +00:42.500 --> 00:43.700 +tú vayas creciendo esta +parte. + +00:43.700 --> 00:46.500 +Entonces vamos a una siguiente función. + +00:46.500 --> 00:49.100 +Voy a borrar esto de +acá. + +00:49.100 --> 00:50.500 +Aquí también voy a hacer un +cambio, + +00:50.500 --> 00:51.900 +este console lo que voy a +quitar, + +00:51.900 --> 00:56.000 +y le voy a poner a return +true, + +00:56.000 --> 00:58.300 +que solo me interesa que me regrese un true, + +00:58.300 --> 01:01.200 +para una validación que voy a hacer acá, + +01:01.200 --> 01:03.700 +y return +false. + +01:03.700 --> 01:05.900 +Perfecto. + +01:05.900 --> 01:07.100 +Entonces venimos +aquí, + +01:07.100 --> 01:15.900 +y la siguiente función es la función de +sign-in. + +01:15.900 --> 01:19.200 +Esta función va a recibir de igual forma +dos parámetros, + +01:19.200 --> 01:21.900 +que son los parámetros que estamos utilizando, + +01:21.900 --> 01:25.100 +que es la información que ya nos agregó +nuestro usuario. + +01:25.100 --> 01:28.500 +Así que iniciamos con un +function, + +01:28.500 --> 01:30.300 +se llame +sign-in, + +01:30.300 --> 01:33.300 +y en este function lo que quiero hacer es, + +01:33.300 --> 01:37.700 +voy a trabajar con un +if, + +01:37.700 --> 01:44.900 +y este if va a mandar llamar esta primera +función. + +01:44.900 --> 01:47.400 +Entonces al momento de que se inicie, + +01:47.400 --> 01:50.400 +por ejemplo, el proceso de +sign-in, + +01:50.400 --> 01:52.900 +se tiene que mandar llamar la función, + +01:52.900 --> 01:55.400 +en donde se va a validar sin la +información que nos va a dar + +01:55.400 --> 01:57.300 +nuestro usuario por estos +prompts, + +01:57.300 --> 01:58.500 +es +verdad, + +01:58.500 --> 02:02.200 +en caso de que esa sea +verdad, + +02:02.200 --> 02:07.100 +lo que quiero es que me genere un alert. + +02:07.100 --> 02:10.000 +¿Y esto por +qué? + +02:10.000 --> 02:13.200 +Porque si regresamos a las instrucciones, + +02:13.200 --> 02:15.700 +entonces si el +usuario, + +02:15.700 --> 02:17.100 +debe ser capaz de +validar, + +02:17.100 --> 02:20.600 +nuestro sistema debe validar si el usuario +existe en la base de datos. + +02:20.600 --> 02:22.900 +Si el usuario +existe, + +02:22.900 --> 02:26.500 +entonces el sistema debe mostrar un +mensaje de bienvenida, + +02:26.500 --> 02:28.000 +y mostrar el +timeline, + +02:28.000 --> 02:30.400 +que eso es lo que vamos a hacer en esta +nueva función. + +02:30.400 --> 02:32.100 +Si el usuario no +existe, + +02:32.100 --> 02:34.000 +entonces debe demostrar un mensaje de error, + +02:34.000 --> 02:36.300 +y no debe mostrar +nada. + +02:36.300 --> 02:37.500 +Entonces +aquí, + +02:37.500 --> 02:40.600 +si esta validación es +true, + +02:40.600 --> 02:42.500 +si aquí me regresa +true, + +02:42.500 --> 02:44.900 +lo que va a pasar es en el +alert, + +02:44.900 --> 02:47.700 +evidentemente vamos a ponerle +tipo, + +02:47.700 --> 02:49.400 +no, de hecho vamos a utilizar el nombre +del usuario, + +02:49.400 --> 02:51.000 +para que sea más +personalizado. + +02:51.000 --> 02:53.600 +Eso les +gusta. + +02:53.600 --> 02:59.200 +Bienvenido a tu +cuenta. + +02:59.200 --> 03:01.100 +Y vamos a +ponerle, + +03:01.100 --> 03:03.600 +username. + +03:03.600 --> 03:05.200 +Haciendo +referencia, + +03:05.200 --> 03:09.200 +a el username que nos va a poner en los +prompts. + +03:09.200 --> 03:11.100 +Y acá, por +ejemplo, + +03:11.100 --> 03:14.800 +vamos a poner un +console.log, + +03:14.800 --> 03:16.900 +.log, + +03:16.900 --> 03:19.900 +que nos regrese todo +el, + +03:19.900 --> 03:21.700 +user, + +03:21.700 --> 03:23.000 +timeline. + +03:23.000 --> 03:25.500 +Perfecto. + +03:25.500 --> 03:26.900 +Voy a, +mientras, + +03:26.900 --> 03:29.200 +cancelar, +cancelar. + +03:29.200 --> 03:31.700 +Porque le estoy pidiendo que me regrese el +user timeline. + +03:31.700 --> 03:33.200 +User, + +03:33.200 --> 03:34.300 +timeline. + +03:34.300 --> 03:41.700 +Porque si es verdad, lo que quiero es que +me regrese esto. + +03:41.700 --> 03:43.100 +Y ya esto se puede ir +acomodando, + +03:43.100 --> 03:45.200 +pero quiero que me regrese el timeline, +¿no? + +03:45.200 --> 03:47.100 +Para que después nosotros +podamos, + +03:47.100 --> 03:49.900 +a lo mejor con un poco más de tiempo y +estructura, + +03:49.900 --> 03:51.900 +imprimir +como, + +03:51.900 --> 03:53.500 +Estefanía escribió +esto, + +03:53.500 --> 03:55.100 +Oscar escribió +esto, + +03:55.100 --> 03:56.300 +Mariana escribió +esto, + +03:56.300 --> 03:57.900 +Andrés escribió +esto. + +03:57.900 --> 03:59.600 +Por el momento quiero que me regrese esto, + +03:59.600 --> 04:01.000 +para poderlo +ver. + +04:01.000 --> 04:02.900 +Si no es +verdad, + +04:02.900 --> 04:05.900 +si aquí nos regresa entonces el false, + +04:05.900 --> 04:07.500 +lo que +quiero, + +04:07.500 --> 04:10.000 +es que entonces nos regrese +un, + +04:10.000 --> 04:13.100 +mensaje de +error, + +04:13.100 --> 04:16.500 +que es con minúsculas, +alerts. + +04:16.500 --> 04:17.800 +Y el mensaje error, +pues, + +04:17.800 --> 04:19.500 +no tiene que estar ligado a ninguna variable, + +04:19.500 --> 04:21.100 +entonces va a +ser, + +04:21.100 --> 04:22.500 +ups, + +04:22.500 --> 04:24.200 +y el ups +es, + +04:24.200 --> 04:25.500 +usuario, + +04:25.500 --> 04:27.100 +o, + +04:27.100 --> 04:29.200 +contraseña, + +04:29.200 --> 04:34.900 +incorrectos. + +04:34.900 --> 04:35.700 +Perfecto. + +04:35.700 --> 04:37.500 +Entonces, va a aparecer esa función, + +04:37.500 --> 04:40.200 +de momento voy a poner como cancelar, +cancelar. + +04:40.200 --> 04:41.500 +Ya tenemos todo, vamos a +repasar. + +04:41.500 --> 04:43.100 +Tenemos la función de sign +in, + +04:43.100 --> 04:45.100 +en donde le estamos pidiendo el usuario, + +04:45.100 --> 04:47.100 +y la contraseña que nos +está, + +04:47.100 --> 04:49.200 +generando nuestro +usuario. + +04:49.200 --> 04:50.300 +Con los +prompts, + +04:50.300 --> 04:51.500 +aquí +validamos, + +04:51.500 --> 04:53.700 +en donde si el usuario existe en la base +de datos, + +04:53.700 --> 04:55.000 +nos va a regresar un +true, + +04:55.000 --> 04:56.300 +si nos regresa un +true, + +04:56.300 --> 04:57.400 +entonces sale +un, + +04:57.400 --> 04:58.700 +alerta de +bienvenido, + +04:58.700 --> 04:59.500 +tal +usuario, + +04:59.500 --> 05:01.300 +este es tu +timeline, + +05:01.300 --> 05:02.500 +si es un +else, + +05:02.500 --> 05:04.000 +que en caso de que sea un +false, + +05:04.000 --> 05:06.000 +entonces es un ups, lo +siento, + +05:06.000 --> 05:08.100 +aquí +es, + +05:08.100 --> 05:09.200 +usuario, + +05:09.200 --> 05:10.300 +y +contraseña, + +05:10.300 --> 05:11.400 +son +incorrectos. + +05:11.400 --> 05:14.300 +Entonces no tiene que regresar +absolutamente nada. + +05:14.300 --> 05:15.600 +Y ahora lo que tenemos que +hacer, + +05:15.600 --> 05:16.400 +es, + +05:16.400 --> 05:18.600 +mandar llamar nuestra +función, + +05:18.600 --> 05:19.600 +y, + +05:19.600 --> 05:21.600 +pasar los parámetros de la +misma, + +05:21.600 --> 05:23.400 +solo para +corroborar. + +05:23.400 --> 05:24.600 +Y ya con +esto, + +05:24.600 --> 05:26.300 +si +guardamos, + +05:26.300 --> 05:27.100 +vamos +a, + +05:27.100 --> 05:28.400 +es +Diego, + +05:28.400 --> 05:31.700 +y mi contraseña es +abc, + +05:31.700 --> 05:32.400 +y es +ups, + +05:32.400 --> 05:35.000 +usuario o contraseña +incorrectos. + +05:35.000 --> 05:37.100 +Soltar, + +05:37.100 --> 05:38.800 +y sería +un, + +05:38.800 --> 05:41.200 +vamos a ver cuáles son los nombres que +tenemos, + +05:41.200 --> 05:43.000 +eh, + +05:43.000 --> 05:44.600 +un +caro, + +05:44.600 --> 05:46.500 +y su contraseña +es, + +05:46.500 --> 05:48.800 +456. + +05:48.800 --> 05:49.500 +Entonces, + +05:49.500 --> 05:51.700 +ups, usuario o contraseña incorrectos. + +05:51.700 --> 05:52.700 +Y este +código, + +05:52.700 --> 05:53.900 +no va a +funcionar. + +05:53.900 --> 05:55.600 +Ahorita a pesar de que +puse, + +05:55.600 --> 05:57.900 +un usuario y contraseña +correctos, + +05:57.900 --> 05:59.100 +me está regresando +un, + +05:59.100 --> 06:01.400 +el usuario o contraseña es incorrecto. + +06:01.400 --> 06:02.300 +¿Qué está +pasando? + +06:02.300 --> 06:03.600 +Vamos a ver +qué, + +06:03.600 --> 06:05.300 +en el +código. + +06:05.300 --> 06:06.200 +El que estamos +aquí, + +06:06.200 --> 06:07.900 +vamos a darle a +aceptar, + +06:07.900 --> 06:09.100 +eh, +evidentemente, + +06:09.100 --> 06:10.000 +si yo vengo +acá, + +06:10.000 --> 06:10.900 +y +pongo, + +06:10.900 --> 06:12.500 +username, + +06:12.500 --> 06:13.700 +tengo un +caro, + +06:13.700 --> 06:14.800 +y si +pongo, + +06:14.800 --> 06:16.100 +password, + +06:16.100 --> 06:18.600 +tengo +456. + +06:18.600 --> 06:20.000 +Que esto es +justamente, + +06:20.000 --> 06:21.500 +mi +usuario, + +06:21.500 --> 06:23.100 +número +dos, + +06:23.100 --> 06:24.400 +o número +uno, + +06:24.400 --> 06:25.300 +en el +array, + +06:25.300 --> 06:27.100 +¿no? Si lo vemos como un +índice. + +06:27.100 --> 06:28.400 +Pues, ¿qué está pasando +aquí? + +06:28.400 --> 06:32.600 +Aquí el problema viene en la validación +que estamos haciendo en este for. + +06:32.600 --> 06:34.100 +El for lo que está +haciendo, + +06:34.100 --> 06:37.900 +como estamos aquí regresando un true o un +false, + +06:37.900 --> 06:38.700 +esto, + +06:38.700 --> 06:39.700 +prácticamente, + +06:39.700 --> 06:41.500 +lo que hace es +un, + +06:41.500 --> 06:44.700 +el primer usuario se llama +caro, + +06:44.700 --> 06:48.600 +y su contraseña es +456, + +06:48.600 --> 06:50.000 +entra la +validación, + +06:50.000 --> 06:52.000 +como es un +false, + +06:52.000 --> 06:53.700 +automáticamente, + +06:53.700 --> 06:55.800 +el for se +rompe, + +06:55.800 --> 06:58.700 +y va a regresar un false +siempre. + +06:58.700 --> 07:00.400 +Entonces, a pesar de +que, + +07:00.400 --> 07:01.700 +yo tenga un +caro, + +07:01.700 --> 07:02.500 +y +un, + +07:02.500 --> 07:04.000 +y una contraseña +correcta, + +07:04.000 --> 07:07.400 +ya no va a pasar a validar el segundo +elemento. + +07:07.400 --> 07:10.500 +Y tampoco va a pasar a validar el tercer +elemento. + +07:10.500 --> 07:13.400 +Solo va a validar el primer elemento. + +07:13.400 --> 07:15.700 +Y si ese elemento es +verdadero, + +07:15.700 --> 07:18.100 +me va a regresar el mensaje de bien. + +07:18.100 --> 07:20.100 +Y el timeline que he estado buscando, + +07:20.100 --> 07:22.800 +pero si este primer elemento no +es, + +07:22.800 --> 07:25.300 +el usuario de +contraseña, + +07:25.300 --> 07:27.000 +aquí se va a romper el +bucle, + +07:27.000 --> 07:28.900 +y ya no va a pasar a validar el resto. + +07:28.900 --> 07:31.200 +Entonces, lo que tenemos que hacer es, + +07:31.200 --> 07:33.300 +vamos a +sacar, + +07:33.300 --> 07:34.300 +el +false, + +07:34.300 --> 07:35.300 +del +for, + +07:35.300 --> 07:37.000 +de este +bucle. + +07:37.000 --> 07:38.400 +Vamos a quitar el +else. + +07:38.400 --> 07:39.700 +Entonces, +aquí, + +07:39.700 --> 07:41.400 +lo que vamos a hacer es +un, + +07:41.400 --> 07:43.200 +si el usuario de +contraseña, + +07:43.200 --> 07:44.500 +hace un match con +esto, + +07:44.500 --> 07:46.100 +me va a regresar un +true, + +07:46.100 --> 07:47.900 +porque está +acá. + +07:47.900 --> 07:49.300 +Si no hace un +match, + +07:49.300 --> 07:50.700 +va a seguir el +for, + +07:50.700 --> 07:52.300 +al siguiente +elemento, + +07:52.300 --> 07:54.300 +y va a validar si el usuario de contraseña, + +07:54.300 --> 07:56.000 +se match con +esto. + +07:56.000 --> 07:57.100 +Si hace un +true, + +07:57.100 --> 07:59.300 +entonces aquí se rompe el +for, + +07:59.300 --> 08:00.500 +y me regresa un +true, + +08:00.500 --> 08:01.600 +y este +true, + +08:01.600 --> 08:03.700 +lo voy a tener aquí como validación, + +08:03.700 --> 08:05.800 +y va a entrar +este. + +08:05.800 --> 08:07.200 +Si no hace un +true, + +08:07.200 --> 08:09.000 +se va con el +tercero. + +08:09.000 --> 08:10.100 +Si esto no +matcha, + +08:10.100 --> 08:12.100 +entonces se sale ya del +for, + +08:12.100 --> 08:13.300 +porque ya +está, + +08:13.300 --> 08:15.200 +esta validación ya +termina, + +08:15.200 --> 08:17.200 +y sale del for a un +false, + +08:17.200 --> 08:19.800 +y entonces la función va a regresar el false, + +08:19.800 --> 08:22.100 +que nos va a mandar a este +else. + +08:22.100 --> 08:24.100 +Entonces ya con este +cambio, + +08:24.100 --> 08:26.400 +al momento de +guardar, + +08:26.400 --> 08:27.700 +vamos a poner +aquí, + +08:27.700 --> 08:29.300 +Caro, + +08:29.300 --> 08:30.600 +vamos a poner +aquí, + +08:30.600 --> 08:33.300 +cuatro, cinco y +seis, + +08:33.300 --> 08:34.200 +y ahora +sí, + +08:34.200 --> 08:36.000 +bienvenida a tu cuenta, +Caro, + +08:36.000 --> 08:38.600 +y este es tu +timeline. + +08:38.600 --> 08:40.600 +Ya tenemos aquí nuestro +timeline. + +08:40.600 --> 08:42.000 +Listo, y con +esto, + +08:42.000 --> 08:44.700 +ya tienes todas las bases que necesitas, + +08:44.700 --> 08:46.700 +para comenzar tu carrera como desarrolladora, + +08:46.700 --> 08:48.900 +o desarrollador de +llaves. + +08:48.900 --> 08:49.900 +No olvides practicar +mucho, + +08:49.900 --> 08:51.100 +eso es muy +importante, + +08:51.100 --> 08:53.300 +y ahorita no olvides subir tu proyecto, + +08:53.300 --> 08:55.000 +o presentar el +examen, + +08:55.000 --> 08:56.000 +y +evidentemente, + +08:56.000 --> 08:57.300 +calificar este +curso. + +08:57.300 --> 08:58.500 +Mi nombre es Diego de +Granda, + +08:58.500 --> 09:04.500 +y estoy en redes sociales para lo que +necesites. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..782330a015f334e83bb09d7fcb44815fd99fbea4 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-Resumen.html" @@ -0,0 +1,139 @@ + + + + + + + Implementación de la Función Sign-In y Validación de Usuario + + + +
+
+

Resumen

¿Cómo implementar un sistema de autenticación efectivo en JavaScript?

+

Crear un sistema de autenticación seguro y confiable es crucial en cualquier aplicación. La autenticación asegura que solo los usuarios autorizados puedan acceder a ciertos recursos o datos. En este contexto, vamos a explorar cómo implementar una función de autenticación de "sign-in" en JavaScript que valide las credenciales del usuario, mostrando un mensaje de bienvenida si son correctas, o un mensaje de error si no lo son.

+

¿Cómo asegurarse de que las credenciales del usuario sean válidas?

+

Primero, necesitamos implementar una función que verifique si las credenciales proporcionadas por el usuario coinciden con alguna cuenta válida. Esta función debe devolver true si encuentra coincidencias y false si no lo hace. A continuación, se muestra cómo podría estructurarse este proceso en JavaScript:

+
function validateUser(username, password) {
+    const users = [
+        { username: "user1", password: "123" },
+        { username: "caro", password: "456" },
+        { username: "andres", password: "789" }
+    ];
+
+    for (let user of users) {
+        if (user.username === username && user.password === password) {
+            return true;
+        }
+    }
+    return false;
+}
+
+

¿Cómo crear la función de "sign-in"?

+

Con una función de validación en su lugar, podemos avanzar hacia la función signIn que maneja el proceso de autenticación completo. Esta función llamará a validateUser y dependiendo del resultado, mostrará un mensaje de bienvenida o de error.

+
function signIn(username, password) {
+    if (validateUser(username, password)) {
+        alert(`Bienvenido a tu cuenta, ${username}`);
+        console.log("Este es tu timeline");
+    } else {
+        alert("Ups, usuario o contraseña incorrectos");
+    }
+}
+
+

¿Cómo mejorar la experiencia del usuario en el proceso de autenticación?

+

Una buena experiencia de usuario es vital en cualquier flujo de autenticación. Aquí hay algunas recomendaciones para mejorar este proceso:

+
    +
  • Mensajes Personalizados: Personalizar los mensajes de bienvenida con el nombre del usuario mejora la experiencia haciéndola más amigable.
    • +
  • Manejo de Errores: Informar claramente cuando las credenciales son incorrectas, sin dejar al usuario adivinando, es esencial.
    • +
  • Validación Eficiente: Asegurarse de que el ciclo de validación (for loop) verifique todas las credenciales antes de decidir si son incorrectas.
    • +
+

¿Qué estrategias se pueden aplicar para evitar errores comunes?

+

A veces, los errores en la implementación de un sistema de autenticación pueden causar que las credenciales correctas no sean reconocidas. Algunos pasos a seguir para evitar estos errores incluyen:

+
    +
  1. Revisar la lógica de control de flujo: Asegúrate de que el bucle de validación no se interrumpa prematuramente.
    2. +
  2. Probar diferentes escenarios: Siempre prueba el código con diferentes usuarios y contraseñas antes de implementarlo en un entorno real.
    3. +
  3. Separar la lógica de alertas y validaciones: Mantener claramente separada la lógica de validación y las notificaciones de usuario hace el código más limpio y más fácil de mantener.
    4. +
+

Con estos conceptos bien claros, estarás bien encaminado para implementar sistemas de autenticación efectivos y seguros. ¡Recuerda practicar mucho para mejorar constantemente tus habilidades como desarrollador!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_5665e02f-31fe-4c5f-a003-0f6fa407346f.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_5665e02f-31fe-4c5f-a003-0f6fa407346f.js" new file mode 100644 index 0000000000000000000000000000000000000000..bf4ea3973d373232c95006ea650c41b476e22a9d --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_5665e02f-31fe-4c5f-a003-0f6fa407346f.js" @@ -0,0 +1,69 @@ +/* +Requerimientos del reto: + +1. El usuario debe poder ingresar su usuario y contraseña +2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos +3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario. +4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline. + +*/ + +const usersDatabase = [ + { + username: "andres", + password: "123", + }, + { + username: "caro", + password: "456", + }, + { + username: "mariana", + password: "789", + }, +]; + +const usersTimeline = [ + { + username: "Estefany", + timeline: "Me encata Javascript!", + }, + { + username: "Oscar", + timeline: "Bebeloper es lo mejor!", + }, + { + username: "Mariana", + timeline: "A mi me gusta más el café que el té", + }, + { + username: "Andres", + timeline: "Yo hoy no quiero trabajar", + }, +]; + +const username = prompt("Cuál es tu usuario?"); +const password = prompt("Cuál es tu contraseña?"); + +function usuarioExistente(username, password) { + for (let i = 0; i < usersDatabase.length; i++) { + if ( + usersDatabase[i].username === username && + usersDatabase[i].password === password + ) { + return true; + } + } + return false; +} + +function signIn(username, password) { + if (usuarioExistente(username, password)) { + alert(`Bienvenido a tu cuenta ${username}`); + console.log(usersTimeline); + } else { + alert("Uuups, usuario o contraseña incorrectos!"); + } +} + +signIn(username, password); diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_b9edb5bd-74c5-4aa1-a1cf-31873cf62ed2.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_b9edb5bd-74c5-4aa1-a1cf-31873cf62ed2.js" new file mode 100644 index 0000000000000000000000000000000000000000..bf4ea3973d373232c95006ea650c41b476e22a9d --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/10-index_b9edb5bd-74c5-4aa1-a1cf-31873cf62ed2.js" @@ -0,0 +1,69 @@ +/* +Requerimientos del reto: + +1. El usuario debe poder ingresar su usuario y contraseña +2. El sistema debe ser capaz de validar si el usuario y contraseña ingresados por el usuario existen en la base de datos +3. Si el usuario y contraseña son correctos, el sistema debe mostrar un mensaje de bienvenida y mostrar el timeline del usuario. +4. Si el usuario y contraseña son incorrectos, el sistema debe mostrar un mensaje de error y no mostrar ningun timeline. + +*/ + +const usersDatabase = [ + { + username: "andres", + password: "123", + }, + { + username: "caro", + password: "456", + }, + { + username: "mariana", + password: "789", + }, +]; + +const usersTimeline = [ + { + username: "Estefany", + timeline: "Me encata Javascript!", + }, + { + username: "Oscar", + timeline: "Bebeloper es lo mejor!", + }, + { + username: "Mariana", + timeline: "A mi me gusta más el café que el té", + }, + { + username: "Andres", + timeline: "Yo hoy no quiero trabajar", + }, +]; + +const username = prompt("Cuál es tu usuario?"); +const password = prompt("Cuál es tu contraseña?"); + +function usuarioExistente(username, password) { + for (let i = 0; i < usersDatabase.length; i++) { + if ( + usersDatabase[i].username === username && + usersDatabase[i].password === password + ) { + return true; + } + } + return false; +} + +function signIn(username, password) { + if (usuarioExistente(username, password)) { + alert(`Bienvenido a tu cuenta ${username}`); + console.log(usersTimeline); + } else { + alert("Uuups, usuario o contraseña incorrectos!"); + } +} + +signIn(username, password); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-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/01-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/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..327c5489d4c5ca98bc97738c7f5e34df442de8e7 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2836334854951714aa334fd43a3ae1e91a3779c831853878770b2b246dc7764e +size 66942471 diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..8ed8023f0eeca27e177fe17f9b076acac4401b40 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Programaci\303\263n S\303\255ncrona y As\303\255ncrona en JavaScript.vtt" @@ -0,0 +1,409 @@ +WEBVTT + +00:00.000 --> 00:04.500 +Para poder entender lo que es programación +síncrona y asíncrona en JavaScript, + +00:04.500 --> 00:09.000 +primero vamos a hablar de cómo funciona +JavaScript Engine en el navegador. + +00:09.000 --> 00:12.400 +Y para este tema hay dos puntos +fundamentales que hay que entender. + +00:12.400 --> 00:16.500 +El primero es algo que se llama el memory +heap, y el segundo es el call stack. + +00:16.500 --> 00:21.600 +El memory heap es el espacio en donde se +van a guardar todas las variables, + +00:21.600 --> 00:25.000 +todas las funciones y objetos que creamos +o construimos en JavaScript, + +00:25.000 --> 00:28.200 +y se van a estar guardando en el memory +heap de forma random. + +00:28.200 --> 00:31.400 +Y el segundo, el call stack, es +prácticamente la pila + +00:31.400 --> 00:36.400 +donde se van a empezar a llamar cada una +de las funciones que tenemos que ejecutar en nuestro programa. + +00:36.400 --> 00:39.700 +Por ejemplo, yo tengo una función que se +llama hola mundo, + +00:39.700 --> 00:43.000 +y esa función manda a llamar otra función +que se llama mi nombre es Diego. + +00:43.000 --> 00:46.200 +Este call stack lo que va a hacer es +mandar a llamar la primera función, + +00:46.200 --> 00:51.900 +ejecuta hola mundo, y se manda a llamar la +segunda función, ejecuta mi nombre es Diego. + +00:51.900 --> 00:55.400 +A esta función se le conoce como +programación simple. + +00:55.400 --> 00:58.900 +Quiere decir que se está trabajando una +tarea a la vez. + +00:58.900 --> 01:03.000 +JavaScript funciona trabajando una tarea a +la vez, + +01:03.000 --> 01:06.600 +y eso va a estar funcionando prácticamente +en el call stack. + +01:06.600 --> 01:09.800 +Y de aquí puede haber un nombre que +posiblemente conoces, + +01:09.800 --> 01:11.800 +que se llama stack +overflow. + +01:11.800 --> 01:14.000 +Hay una página muy famosa con este nombre. + +01:14.000 --> 01:17.500 +Pero esto es cuando llevamos nuestro stack +de tareas + +01:17.500 --> 01:22.200 +a un punto en donde excede el número o la +memoria que tiene permitida + +01:22.200 --> 01:23.900 +para poder ejecutar las +tareas. + +01:23.900 --> 01:27.700 +Y lo que sucede es que prácticamente +nuestro navegador deja de funcionar, crashea. + +01:27.700 --> 01:29.600 +Tenemos que cerrarlo, +abrirlo, + +01:29.600 --> 01:32.200 +para que vuelva a liberar la memoria que +tenía en este stack + +01:32.200 --> 01:34.800 +y pueda funcionar de la forma en la que +nosotros esperamos. + +01:34.800 --> 01:38.600 +Y ahora, cuando nosotros hablamos de +programación asíncrona, + +01:38.600 --> 01:41.300 +JavaScript por defecto, como lo comenté, + +01:41.300 --> 01:43.900 +solo funciona de forma +síncrona. + +01:43.900 --> 01:47.100 +Pero sí tenemos forma de poder hacer que +JavaScript + +01:47.100 --> 01:51.000 +pueda empezar a trabajar ciertas tareas de +forma asíncrona, + +01:51.000 --> 01:52.400 +quiere decir en +simultáneo. + +01:52.400 --> 01:54.000 +Tenemos este código +ejemplo, + +01:54.000 --> 01:57.400 +y la forma de hacerlo es entendiendo +bien + +01:57.400 --> 02:00.500 +cómo funciona un poco más el tema del +navegador + +02:00.500 --> 02:03.000 +con ciertos factores muy, muy importantes. + +02:03.000 --> 02:05.700 +Lo primero es tenemos el call stack. + +02:05.700 --> 02:08.500 +Lo segundo tenemos la parte de las web APIs. + +02:08.500 --> 02:11.400 +Las web APIs es lo que va a hacer que +JavaScript + +02:11.400 --> 02:15.500 +pueda funcionar o se comporte como forma +asíncrona. + +02:15.500 --> 02:18.500 +Al momento de que nosotros tenemos una +función + +02:18.500 --> 02:20.000 +que es una web +API, + +02:20.000 --> 02:23.000 +lo que hace es que la va a mandar a la +sección de web API + +02:23.000 --> 02:25.500 +y va a hacer que se ejecute en +simultáneo + +02:25.500 --> 02:28.100 +mientras el call stack sigue +sacando + +02:28.100 --> 02:29.700 +las funciones que tiene +ahí. + +02:29.700 --> 02:31.400 +La web API lo que va a hacer es +un, + +02:31.400 --> 02:33.600 +se va a resolver en ese +momento, + +02:33.600 --> 02:35.300 +ya que termine de +resolverse, + +02:35.300 --> 02:37.000 +lo que tenga que hacer en la función, + +02:37.000 --> 02:38.400 +lo va a bajar al +queue, + +02:38.400 --> 02:40.600 +que es prácticamente una sala de espera, + +02:40.600 --> 02:42.300 +y el even loop lo que va a hacer +es + +02:42.300 --> 02:44.600 +va a estar preguntando al call stack, + +02:44.600 --> 02:45.800 +oye, ¿ya estás +vacío? + +02:45.800 --> 02:47.500 +Si el call stack ya está +vacío, + +02:47.500 --> 02:49.100 +va a tomar lo que existe en el +queue + +02:49.100 --> 02:50.600 +y lo va a regresar al call +stack + +02:50.600 --> 02:52.600 +para que se pueda terminar de ejecutar. + +02:52.600 --> 02:53.600 +Si no está +vacío, + +02:53.600 --> 02:56.600 +va a mantener lo que está en el queue en +espera + +02:56.600 --> 02:58.700 +a que se logre liberar el call +stack + +02:58.700 --> 03:00.600 +y en ese momento le va a dar +paso + +03:00.600 --> 03:03.500 +para que la función que se tiene que +terminar de ejecutar + +03:03.500 --> 03:04.700 +pueda pasar al call +stack + +03:04.700 --> 03:07.100 +y en ese momento se termine de +ejecutar + +03:07.100 --> 03:08.300 +todo nuestro +programa. + +03:08.300 --> 03:09.800 +En este ejemplo podemos ver +que + +03:09.800 --> 03:11.500 +se está mandando a llamar la función de var. + +03:11.500 --> 03:13.300 +La función de var manda a llamar una +función + +03:13.300 --> 03:14.900 +que se llama +setTimeout, + +03:14.900 --> 03:16.800 +que es una función que hace que +JavaScript + +03:16.800 --> 03:18.500 +funcione de forma +asíncrona. + +03:18.500 --> 03:21.900 +setTimeout lanza un consolo que se baja al +queue + +03:21.900 --> 03:24.200 +y una vez que el call stack está vacío, + +03:24.200 --> 03:26.100 +ese queue llega al call +stack + +03:26.100 --> 03:30.100 +y ejecuta entonces el consolo que sería dos. + +03:30.100 --> 03:32.500 +Y podemos ver que se empieza a imprimir +primero + +03:32.500 --> 03:34.700 +el uno de la función de +var, + +03:34.700 --> 03:37.400 +después la función de var manda a llamar +la función de foo, + +03:37.400 --> 03:41.100 +que lo manda directamente de forma +asíncrona a WebAPI. + +03:41.100 --> 03:42.900 +Mientras eso se +resuelve, + +03:42.900 --> 03:44.900 +se manda a llamar la función de baz. + +03:44.900 --> 03:47.300 +La función de baz ejecuta el +tres + +03:47.300 --> 03:49.100 +y una vez que está vacío el call stack, + +03:49.100 --> 03:51.800 +llega el resultado de la función de foo, + +03:51.800 --> 03:54.500 +se sube al call stack y se imprime dos. + +03:54.500 --> 03:56.700 +Entonces el número de impresiones +tendríamos + +03:56.700 --> 03:58.700 +uno, tres y +dos, + +03:58.700 --> 04:00.200 +porque en forma +simultánea, + +04:00.200 --> 04:03.600 +el uno y el dos estuvieron trabajando en +paralelo, + +04:03.600 --> 04:06.000 +pero solo hasta que el tres logra salir, + +04:06.000 --> 04:08.500 +el dos llega directamente al call +stack + +04:08.500 --> 04:10.100 +y se lo va a +imprimir. + +04:10.100 --> 04:12.000 +Esta es la forma en la cual nosotros +trabajamos + +04:12.000 --> 04:14.100 +código en JavaScript de forma +síncrona + +04:14.100 --> 04:16.000 +y de forma +asíncrona, + +04:16.000 --> 04:18.100 +utilizando por ejemplo +WebAPIs, + +04:18.100 --> 04:21.300 +que hace que nuestro código pueda +comportarse + +04:21.300 --> 04:23.500 +como código +asíncrono. + +04:23.500 --> 04:26.800 +Y para esto vamos a utilizar lo que se +llaman promesas. + +04:26.800 --> 04:29.800 +Promesas, que también pueden ser sync and +await, + +04:29.800 --> 04:31.600 +que van a hacer que nuestro +código + +04:31.600 --> 04:34.900 +pueda tener este comportamiento de +asíncrono + +04:34.900 --> 04:48.900 +para que se ejecute en +paralelo. + diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..c4e23e7559dab0483704b5cb769cd2bc08632095 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/01-Resumen.html" @@ -0,0 +1,129 @@ + + + + + + + Programación Síncrona y Asíncrona en JavaScript + + + +
+
+

Resumen

¿Cómo funciona JavaScript engine en el navegador?

+

Para entender cómo se maneja la ejecución del código JavaScript, es crucial comprender los componentes clave de su motor de ejecución en los navegadores: el Memory Heap y el Call Stack.

+

¿Qué es el Memory Heap?

+

El Memory Heap es el espacio donde se almacenan variables, funciones y objetos creados en JavaScript de forma aleatoria. Actúa como un almacén desorganizado donde el navegador gestiona la memoria de manera eficiente, permitiendo que las aplicaciones JavaScript funcionen sin problemas.

+

¿Cómo opera el Call Stack?

+

El Call Stack es una pila de tareas donde se registran las funciones que deben ejecutarse. Cuando se llama a una función, esta se agrega al Call Stack, ejecutándose de manera secuencial. Por ejemplo, si tienes una función holaMundo que llama a otra función miNombreEsDiego, el Call Stack ejecutará primero holaMundo y luego miNombreEsDiego, de forma simple y secuencial.

+

¿Qué es la programación síncrona en JavaScript?

+

En un entorno síncrono, JavaScript ejecuta una tarea a la vez en el Call Stack. Este enfoque puede llegar al temido Stack Overflow, una situación en la que el Call Stack se llena más allá de su capacidad y el navegador puede bloquearse. Para solventar este problema, el navegador debe cerrarse y abrirse nuevamente.

+

JavaScript, por naturaleza, funciona de forma síncrona, ejecutando cada línea de código en orden. Sin embargo, ciertos mecanismos permiten que JavaScript también pueda manejar tareas asincrónicamente.

+

¿Cómo se realiza la programación asíncrona?

+

¿Qué son las Web APIs?

+

Las Web APIs son herramientas que permiten que JavaScript ejecute tareas de manera asíncrona, proporcionando simultaneidad. Cuando una función de Web API se llama, se transfiere a la sección de las Web APIs y se ejecuta en paralelo al Call Stack. Una vez completada, la tarea se mueve al Queue.

+

¿Qué es el Event Loop?

+

El Event Loop interroga constantemente al Call Stack para verificar si está vacío. Cuando lo está, extrae una tarea del Queue y la transfiere al Call Stack para ejecutar. De este modo, tareas asincrónicas se integran ordenadamente en el flujo de ejecución.

+

Ejemplo de setTimeout en programación asíncrona

+

Considera un caso donde se utiliza setTimeout, una función que actúa asincrónicamente:

+
function varFunc() {
+  console.log(1);
+  setTimeout(() => console.log(2), 0);
+  console.log(3);
+}
+
+

La secuencia de ejecución sería:

+
    +
  1. console.log(1) se ejecuta primero.
    2. +
  2. setTimeout() transfiere el console de 2 al Queue.
    3. +
  3. console.log(3) se ejecuta.
    4. +
  4. Una vez que el Call Stack está vacío, el event loop mueve el console de 2 del Queue al Call Stack.
    5. +
+

El resultado en consola sería: 1, 3 y 2. Aunque setTimeout parece ser instantáneo, su resultado aparece solo cuando el Stack está vacío.

+

¿Qué son las promesas en JavaScript?

+

Las promesas en JavaScript, al igual que las funciones de Web API, facilitan la programación asíncrona. Permiten que funciones específicas se ejecuten en paralelo al flujo principal, mejorando la eficiencia y evitando cuellos de botella en aplicaciones de alto rendimiento.

+

¿Cuál es el uso de async/await?

+

async y await son sintaxis modernas para manejar promesas, haciendo que el código asíncrono se vea y se lea como si fuera síncrono. Proporcionan una forma más clara y manejable de estructurar código asincrónico, especialmente en operaciones complejas o jerárquicas.

+

Con esta comprensión, puedes mejorar la forma en que escribes y gestionas tu código JavaScript, maximizando sus capacidades síncronas y asíncronas. ¡Adelante, sigue explorando y dominando el mundo del desarrollo con JavaScript!

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

Resumen

¿Qué son las promesas en JavaScript?

+

Las promesas son una herramienta poderosa para transformar nuestro código de JavaScript de un modelo síncrono a uno asíncrono. Funcionan al indicar al navegador que ciertas funciones deben ejecutarse de manera independiente. Una vez resueltas, las promesas se integran en el call stack para proporcionar un resultado. Mediante su uso, podemos manejar tareas asíncronas de manera más fluida y organizada.

+

¿Cuáles son los estados de las promesas?

+

Las promesas presentan tres estados fundamentales durante su ciclo de vida:

+
    +
  1. Pending (pendiente): Este es el estado inicial. La promesa está creada pero aún no se ha resuelto ni ha fallado.
    2. +
  2. Fulfilled (resuelta): Indica que la promesa se ha completado con éxito.
    3. +
  3. Rejected (rechazada): Ocurre cuando la promesa no se puede cumplir, produciendo un error.
    4. +
+

¿Qué funciones de callback usan las promesas?

+

Las promesas trabajan con dos tipos de funciones de callback:

+
    +
  • Resolve: Se ejecuta cuando la promesa se resuelve exitosamente.
    • +
  • Reject: Se activa cuando la promesa no se puede completar, indicando un fallo.
    • +
+

¿Cómo utilizar métodos como then y catch con promesas?

+

Las promesas vienen con dos métodos esenciales para gestionar su resultado:

+
    +
  • Then: Se ejecuta cuando la promesa se resuelve. A través de este método, podemos llevar a cabo acciones basadas en el resultado exitoso de una promesa.
    • +
  • Catch: Se utiliza para manejar errores. Si la promesa falla, el catch nos proporciona la información necesaria para entender por qué no se resolvió.
    • +
+

Aquí tienes un ejemplo de código ilustrando cómo manejar una promesa asíncrona aprovechando un setTimeout:

+
const promesa = new Promise((resolve, reject) => {
+  const operationSuccessFull = true;
+
+  setTimeout(() => {
+    if (operationSuccessFull) {
+      resolve('La operación fue exitosa');
+    } else {
+      reject('La operación falló');
+    }
+  }, 2000);
+});
+
+promesa
+  .then(successMessage => {
+    console.log(successMessage);
+  })
+  .catch(errorMessage => {
+    console.error(errorMessage);
+  });
+
+

¿Cómo crear y manejar promesas en JavaScript?

+

Crear una promesa implica declarar una constante e instanciar una nueva promesa, donde especificamos las funciones resolve y reject que manejarán el resultado. Dentro, podemos simular, por ejemplo, una petición a un API usando un setTimeout. Este temporizador nos permite retrasar la ejecución, indicando un manejo asíncrono:

+
const myPromise = new Promise((resolve, reject) => {
+  let mockApiResponse = true; // Simulación de una respuesta de API
+
+  setTimeout(() => {
+    if (mockApiResponse) {
+      resolve('Operación completada con éxito');
+    } else {
+      reject('Error en la operación');
+    }
+  }, 3000);
+});
+
+// Uso de then y catch para manejar el resultado
+myPromise
+  .then(result => console.log(result))
+  .catch(error => console.error(error));
+
+

Este ejemplo demuestra el uso básico de promesas para ejecutar un código asíncrono que resuelve una operación tras un retraso. Mediante las funciones then y catch, capturamos y gestionamos los resultados de una acción, ya sea exitosa o fallida. Con esta base, podrás implementar flujos más complejos en tus proyectos de JavaScript, mejorando el rendimiento y la experiencia de usuario.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/02-app_3fd37998-3a9c-486d-8eeb-3794a9ea8bd3.js" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/02-app_3fd37998-3a9c-486d-8eeb-3794a9ea8bd3.js" new file mode 100644 index 0000000000000000000000000000000000000000..61b62ad59f7f0d6a203cb7a1ba6305d394c19070 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/02-app_3fd37998-3a9c-486d-8eeb-3794a9ea8bd3.js" @@ -0,0 +1,3 @@ +fetch("https://jsonplaceholder.typicode.com/posts") + .then((response) => response.json()) + .then((data) => console.log(data)); diff --git "a/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/03-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/03-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/03-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/03-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/03-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..2e03779507dac3568d8162edc2c795eb084794fe --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/06-Asincron\303\255a en JavaScript/03-Resumen.html" @@ -0,0 +1,134 @@ + + + + + + + Uso de Async/Await para Promesas Asíncronas en JavaScript + + + +
+
+

Resumen

¿Cómo manejar promesas asíncronas en JavaScript utilizando async/await?

+

El mundo del desarrollo de software está en constante evolución y aprender nuevas formas de escribir código más limpio y eficiente es una habilidad invaluable. ¿Quieres mejorar tu forma de manejar promesas asíncronas? Vamos a explorar dos potentes técnicas de JavaScript: async/await y fetch para hacer peticiones a APIs con ejemplo concreto.

+

¿Qué son async y await en JavaScript?

+

Async/await es un paradigma que nos permite escribir código asíncrono de forma más legible y estructurada. En JavaScript, el uso de async/await nos permite manejar promesas de una manera más clara, comparada con los métodos tradicionales que usan .then() y .catch(). Al usar async/await, tu código se ve y se comporta más como el código síncrono, aunque sigue siendo asíncrono. Cuando declaras una función con async, esta automáticamente devuelve una promesa. Por otro lado, await hace que JavaScript espere a que una promesa se resuelva antes de continuar con el siguiente bloque de código.

+

¿Cómo utilizar fetch para obtener datos de una API?

+

Para poner en práctica estos conceptos, vamos a hacer una petición a una API pública usando fetch. Este método proporciona una forma fácil de obtener recursos de manera asíncrona a través de la red.

+

Implementación con .then() y .catch()

+
function fetchData() {
+  fetch('https://rickandmortyapi.com/api/character')
+    .then(response => response.json())
+    .then(data => console.log(data))
+    .catch(error => console.error('Error:', error));
+}
+
+fetchData();
+
+

En este script, fetch realiza una solicitud a la API de Rick and Morty. Una vez recibida la respuesta, la convierte a JSON y luego imprime los datos. Si ocurre un error durante la solicitud, el bloque catch lo capturará y lo mostrará en la consola.

+

Conversión a async/await

+
async function fetchData() {
+  try {
+    const response = await fetch('https://rickandmortyapi.com/api/character');
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+fetchData();
+
+

Aquí, al usar async/await, el código se transforma significativamente en términos de legibilidad. La función fetchData es ahora una función async, y las llamadas a fetch y response.json() están precedidas por await, lo que indica que deben completarse antes de pasar a la siguiente línea. Esto hace que el código sea más fácil de leer y entender, especialmente para los desarrolladores que están acostumbrados al flujo lógico de código síncrono.

+

¿Por qué utilizar async/await?

+
    +
  • Legibilidad: Al cambiar a async/await, el flujo de código se vuelve más natural y fácil de seguir.
    • +
  • Error Handling: La gestión de errores se centraliza a través de try/catch, lo que simplifica la depuración.
    • +
  • Simplicidad: Reduce la complejidad asociada con las cadenas de promesas mediante .then().
    • +
+

Nota importante: Async/await es ideal para manejar situaciones donde los pasos deben realizarse secuencialmente, pero sigue siendo necesario recordar que el código es asíncrono y no bloqueante.

+

Conclusión

+

El uso de async/await en JavaScript es una práctica moderna que le permite a los desarrolladores manejar la asincronía con mayor elegancia y claridad. Esto, combinado con métodos como fetch, crea un poderoso conjunto de herramientas para hacer solicitudes en la red mucho más manejables. ¿Te gustaría explorar más sobre la gestión de promesas en JavaScript? ¡Sigue practicando y experimentando! El camino al dominio de tecnologías modernas comienza con pequeños y sencillos pasos.

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