Funciones de JavaScript: funciones maestras, funciones de flecha con proyectos

1. Introducción al curso: Oye, ahí. Bienvenido a las partituras en funciones de JavaScript mediante la construcción de proyectos reales. Mi nombre es Wessel, y estoy encantado de guiarte a través este emocionante viaje al mundo de las funciones de JavaScript. Las funciones son la columna vertebral de JavaScript o cualquier lenguaje de programación que aprendas. Permite un código eficiente y modular que los desarrolladores pueden escribir. Y en este curso, profundizaremos en este concepto de funciones desde los fundamentos de definir y llamar a funciones hasta comprender parámetros, argumentos. También hablaremos sobre lo básico como llamar a funciones a los temas avanzados como expresiones, funciones de flecha e incluso métodos dentro de objetos y matrices. Ahora bien, esto es lo que vamos a cubrir. Hablaremos de funciones en JavaScript. También hablaremos de parámetros y argumentos. Qué son los parámetros y cómo estos dos términos se diferencian entre sí. Cómo se pueden devolver valores de una función aquí hablaremos sobre cómo función procesa los datos y devuelve los valores. Hablaremos expresiones de función y funciones de flecha. Este es uno de los temas cruciales donde los alumnos suelen enfrentar dificultades. También hablaremos de funciones dentro objetos y métodos de matriz. Entonces esto es todo acerca del curso, y este curso también tiene proyectos prácticos en los que estaremos aplicando todo lo que hemos aprendido en este curso en particular para construir algo significativo. Al final, tendrás una comprensión sólida de qué son las funciones, y este conocimiento te permitirá crear programas interactivos y sorprendentes de Guiones de mandíbula. Este curso es apto para desarrolladores de todos los niveles. Entonces, tanto si eres principiante, aprendiz intermedio o alguien que está avanzado y busca repasar sus habilidades Jascript, este curso te puede equipar con conocimientos increíbles y algunas prácticas que nunca antes habías escuchado Entonces con eso dicho, ¿estás listo para dominar el arte de las funciones de Ja Script y transformar la forma en que escribes vamos a sumergirnos y comenzar juntos Te veré del otro lado. 2. Desbloquear funciones de JavaScript: fundamentos: Oye, ahí, así que ahora es el momento de que comencemos a hablar de funciones en JavaScript. Ahora bien, ¿qué es una función ante todo? Ahora, una función es esencialmente un bloque de código. Entonces son múltiples líneas de código las que se agrupan, y está diseñado para realizar una tarea específica. La mejor parte de la función es que se puede reutilizar varias veces en todo el programa Ahora, déjame mostrarte cómo escribirías funciones y por qué escribirías, entonces. ¿Bien? Entonces digamos que tenemos una tarea muy sencilla de saludar a un usuario. ¿Bien? Entonces voy a saludar y digamos que estoy saludando a un usuario. Un nombre de usuario es Alice Awa. ¿Bien? Yo estoy haciendo esto. Ahora digamos que deseo hacer este saludo en tres ocasiones. ¿Bien? Entonces, claro, voy a Copiar P tres veces. Entonces lo estoy saludando tres veces, ¿verdad? Saludo al usuario tres veces. Ahora digamos que deseo cambiar un mensaje por aquí en el saludo, ¿verdad? Y debería reflejarse a través de todos los mensajes. Entonces digamos que el cambio que deseo hacer es agregar una exclamación más ¿Bien? Ahora tengo que asegurarme de actualizar esto en todos los lugares donde quiera que esté haciendo uso de esta rejilla. Y si guardo esto, voy a ver la salida aquí arriba. Todo bien. Pero ahora esto está bien si el grupo de declaración como por aquí, la tarea es sólo saludar, ¿verdad? Es solo una sola pieza de declaración, y cualquier cambio aquí es manejable porque la base de código no es tan grande Ahora bien, lo que me gustaría hacer es que me gustaría dirigirme hacia la conveniencia, ¿verdad? Y podemos aliviar esto con la ayuda de la función. Ahora, déjame mostrarte cómo las funciones pueden hacerte la vida más fácil. Entonces, antes que nada, necesito crear una función por aquí para que podamos usarla. Entonces puedo hacer uso de esta palabra clave de función. Se puede ver. Y tienes dos opciones, sentencia de función y función por aquí. Si selecciona función, traerá la función para usted, la palabra clave. Pero me gustaría tener la declaración de función. Para que pueda ver esto apareció. Ahora, se agrega automáticamente un marcador de posición para los params de nombre, y ha agregado estas llaves Así que voy a actualizar el nombre por aquí para saludar, ¿de acuerdo? Y en lugar de params, sólo voy a quitar esto por ahora y voy dentro del cuerpo Así que esta llave rizada, ¿de acuerdo? Dentro de estos tirantes rizados, puedes tener la función cuerpo, ¿verdad Yo uso este término función cuerpo. Ahora bien, ¿qué es el cuerpo de función? cuerpo de la función es el bloque de código que se puede ejecutar cuando se llama a esta función, ¿de acuerdo? Entonces digamos que muevo este código por aquí. Bien. Y ahora no necesito llamar al saludo de esta manera o saludar al usuario de esta manera. Bien. En cambio, lo que puedo hacer es que puedo llamar a esta función, ¿verdad? Así que ahora tengo esta función saludar, ¿de acuerdo? El nombre de la función es greet. Entonces, cada función que crees debe tener un nombre, ¿de acuerdo? Y le estás asignando un nombre porque necesitas llamar a esa función más adelante, ¿verdad Entonces ahora si quiero llamar a esta función, voy a decir saludar, y voy a tener corchetes redondos abriendo y cerrando. Ahora bien, si guardo esto, verás que Hello Alice ahora se está imprimiendo por aquí, ¿de acuerdo? Si quiero saludar al usuario tres veces, como mi requerimiento original, puedo tener esto llamado tres veces, y verás que aparece Ahora bien, si quiero cambiar el mensaje, así que digamos que si quiero deshacerme de esta exclamación extra que se agregó, tengo que hacer ese cambio en un solo lugar, Y se refleja en todas partes, y se refleja en todas partes, esencialmente, donde sea que se llame a esta función, o porque es el único bloque de código que se está reutilizando y se llama varias veces Aquí, en este enfoque, lo que estás haciendo es que estás duplicando el código Estás duplicando el registro de puntos de la consola tres veces para que esta tarea suceda tres veces, ¿verdad? Pero por aquí, no estás duplicando el código. Estás teniendo escrito una vez el registro de puntos de la consola. Pero si quieres hacer esta tarea tres veces, estás llamando a la función dos veces porque esta instrucción de registro de puntos de consola está dentro de una función ahora. ¿Todo bien? Entonces volvamos a la definición. Una función es un bloque de código. Se puede ver que esto es un bloque de código. Ahora puedes tener múltiples declaraciones por aquí. Digamos que también quiero saludar al usuario y decir que ya estás conectado. Bien, algo como esto. Estoy mostrando este tipo de mensajes. ¿Bien? Puedes ver Hola Alice, ahora estás logueado. Hola Alice, ya estás logueado. Hola Alice, ahora estás encerrado. Viene en tres veces cada mensaje. ¿Bien? Entonces es un bloque de código. Ahora, dentro de las llaves Curly, puedes tener múltiples líneas de declaración, múltiples líneas de código JavaScript, que es parte de esta función y se invoca o llama cada vez que se llama a esta función Y la siguiente parte dice que está diseñada para realizar una tarea específica. Básicamente, está agrupando múltiples declaraciones y lo está nombrando como función y esto está diseñado para realizar una tarea en particular Por ejemplo, por aquí, está diseñado para saludar al usuario, ¿verdad? Y estás haciendo uso de esta palabra clave de función por aquí. Esto es algo que no se puede perder si estás creando funciones de esta manera, ¿de acuerdo? Y se puede reutilizar varias veces. Así que ahora estás llamando a este bloque de código tres veces por aquí, ¿verdad? Ni una, dos veces. Y puedes llamarlo número de veces, como número de veces que quieras llamarlo o el requisito es. ¿Correcto? Entonces esa es una función para ti en JavaScript. Ahora bien, si vienes de cualquier otro lenguaje de programación como Python o Java, debes estar al tanto de este concepto de función o métodos, derecho. Entonces funciona de la misma manera en JavaScript, pero la sintaxis es un poco diferente. ¿Bien? Entonces espero que esto haya sido útil. 3. Flujo de datos dinámico: dominio de los parámetros y argumentos: este momento, tengo una función llamada GET, que se utiliza para saludar a los usuarios. Y aquí en este bloque de código, estoy teniendo toda la operación de saludar a los usuarios. Y la operación es que hay un par de declaraciones de impresión como sentencias de registro de consola que están imprimiendo dos mensajes, dos mensajes distintos en la consola. Estoy llamando a esta función tres veces. Y como resultado, está viendo que seis mensajes se imprimen en la consola, ¿verdad? Ahora, por aquí, el mensaje que estás viendo es bastante estático. ¿Y si en el futuro o en el futuro, deseo personalizar el mensaje para cada usuario, y qué pasa si quiero llamar a cada usuario por su nombre? Porque esta función en este momento solo se está utilizando para saludar a Alice y no a cualquier otro usuario. Entonces, en ese caso, JavaScript te permite pasar parámetros de función como cualquier otro lenguaje de programación. Entonces digamos que deseo tener el nombre como dinámico, ¿de acuerdo? Entonces puedo aceptar nombre por aquí. Todo bien. No estoy especificando el tipo de datos, por favor haga una nota aquí. Y luego por aquí en vez de Alice, lo que estoy haciendo es que estoy teniendo $1 uy, así que voy a tener que agregar $1 y voy a decir Alice Lo siento, Alice no, voy a tener nombre. Y entonces esta será una plantilla lateral, así. Todo bien. Y entonces si guardo esto, voy a obtener error diciendo undefined, porque este nombre aún no se está inicializando, ¿verdad Entonces vamos a estar haciendo eso en breve. Pero el punto que quiero mencionar aquí es esta cosa que estás pasando por aquí, name es un parámetro de función. ¿Bien? Ahora bien, para llamar a la función de la manera correcta con parámetros, hay que pasar algo llamado como argumentos, ¿verdad? Así que por aquí, ahora tendremos que pasar los argumentos de la función porque el nombre va como indefinido. Se puede ver indefinido. Está imprimiendo tres veces, y las tres veces, no está definido, ¿verdad? Así que voy a pasar el nombre por aquí, así puedo decir Alice una vez, luego puedo decir John, y luego puedo decir Lucy, ¿verdad? Y si guardo esto, verás Hola Alice, Hola John, y hola Lucy, ¿verdad? Así que esta cosa de aquí es un argumento, ¿de acuerdo? Estos son argumentos de función que estoy pasando a los parámetros de la función. Entonces, ¿por qué estamos pasando los argumentos? Porque la función está aceptando parámetros. Y aquí se puede ver nombre es el nombre del parámetro que queremos inicializar por aquí, ¿de acuerdo? Y entonces esto se está utilizando dentro de la función cualquier manera que la función desee hacer uso de ella Entonces quiero que todos recuerden la diferencia entre parámetro y argumentos. Ambos no son lo mismo, cierto. Entonces la mayoría de los programadores se confunden y no sé cuál es la diferencia entre un parámetro y el argumento Piensan que son iguales, ¿verdad? Entonces esta cosa de aquí es un parámetro. Si pasa el cursor sobre esto, dirá nombre del parámetro. Y esta cosa de aquí es un argumento porque este es un valor que estás pasando y usando este valor, el parámetro en realidad está inicializado Entonces este es un argumento. Todo bien. Entonces este argumento de función en uso, y esto es parámetros de función que se están declarando. ¿Todo bien? Ahora bien, esta es la función con un parámetro. Habrá escenarios en los que quieras pasar múltiples valores, múltiples argumentos a una función, ¿verdad? Entonces en ese caso, por supuesto puedes tener múltiples parámetros. Aquí, puedo agregar H por aquí, y puedo agregar un registro de consola más por aquí. Bien. Eres de o, voy a decir, imprimiremos el Ho. Bien, algo como esto, y voy a deshacerme de las comas invertidas por aquí y voy a agregar garrapatas Bac. Todo bien. Ahora puedo salvarlos. Bien. Una vez que guardes esto, verás que se está imprimiendo undefined. Ahora bien, esta función acepta dos parámetros, pero estamos pasando en solo uno, ¿verdad? Así que tenemos que pasar en el segundo parámetro también. Entonces puedo decir 22 por aquí. Esto podría ser como 21, y puedes pasar en cualquier edad por aquí. Esto podría ser 29, algo así. Guarda esto, ya verás, Hola Alice, tienes 22 años Ahora estás encerrado. Hola, John, tienes 21 años. Ahora estás encerrado. Hola, Lucy, tienes 29 años y ahora estás encerrado Entonces, ¿qué nos dice esto que la función puede tener múltiples parámetros que puede definir una función ¿Bien? Entonces puedes definir una función con múltiples parámetros, y si estás teniendo una función con múltiples parámetros, necesitas pasar múltiples argumentos también necesitas pasar múltiples argumentos para que pueda inicializarla muy bien Todo bien. Ahora una cosa por aquí quiero tomar nota, quiero que todos ustedes tomen nota es de esta parte del parámetro el primer parámetro de aquí, name es una cadena, y este es un número. ¿Bien? Ahora, al final, lo que puedo hacer es agregar un tipo por aquí, tipo de y simplemente puedo decir edad por aquí. Bien. Y puedo hacer lo mismo por nombre también. Todo bien. Así que vamos a hacer por nombre, escribir apagado, y voy a guardar nombre. Y una vez que lo guarde, ya verás, Hola Alice cadena, tienes 22 años de edad número. ¿Bien? Entonces, un parámetro de función de aquí es un número y el otro es una cadena. Bien. Ahora bien, ¿y si cambio esto a cadena? Déjame guardar esto. Uy. Entonces déjame guardar esto. Ahora ya lo verás por Pousy. Hola, Lucy. Entonces Lucy es una cuerda, y de 29 años también es una cuerda Bien. Pero por lo demás, el primer parámetro es una cadena, y el segundo parámetro es un número por aquí. ¿Bien? Entonces, lo que estoy haciendo es que estoy consiguiendo el tipo de cada uno cambiar el tipo de cada uno para cada llamada de función por aquí. Bien, puedes ver por aquí, y esto es posible porque Ja Script se escribe dinámicamente. Así que no necesitas tener un tipo de datos declarado o definido cuando estás creando variables. Y estos parámetros son esencialmente variables, ¿verdad? Estas son variables que solo existen dentro del bloque de función. Así que este es un bloque de funciones por aquí, ¿de acuerdo? Este rizo llaves que estás viendo dos llaves CRY, esto es lo que es un bloque de función, y este nombre y edad solo existen dentro Entonces, si intentas hacer uso del nombre por aquí, ¿de acuerdo? Lo siento, esto no. Entonces puedo decir consola dot log y déjame decir nombre por aquí. Si trato de hacer eso, no voy a ver ninguna salida. Incluso para H, no voy a ver ninguna salida. ¿Puedes ver bien? Entonces el nombre y la edad solo existen dentro del bloque de funciones y no fuera de eso, ¿verdad? Y estas dos son variables que son parámetros para esta función, ¿de acuerdo? Y puedes cambiar dinámicamente el tipo de los parámetros es lo que puedes ver por aquí, ¿verdad? Entonces sí, esto está completamente escrito dinámicamente. Ahora, otra cosa que quiero destacar por aquí es el orden. De los parámetros y los argumentos importan. ¿Bien? Entonces, por ejemplo, si cambio esta edad por aquí y si cambio de nombre por aquí. ¿Bien? Así que la edad hice primero. Si guardo esto, ya verás, hola número 22, tienes Alice años, lo cual es absolutamente incorrecto, ¿verdad? Porque intercambiamos intercambiamos el pedido por aquí, ¿verdad? Entonces si hago el lado de control por aquí, se puede ver, como, ahora todo es correcto. ¿Bien? Y también, esto tiene que pasarse en el orden. Bien, entonces se inicializa en orden. Por lo que este primer parámetro se inicializará con Ale, 22 se inicializarán con Entonces el orden importa mucho. ¿Bien? Entonces, si estás teniendo diez parámetros, puedes tener como número puedes tener múltiples parámetros. Aquí solo estoy dando ejemplo de uno y dos, pero puedes tener tres, cuatro, cinco, diez parámetros. Eso está absolutamente bien, ¿verdad? Pero si estás teniendo esos muchos parámetros, entonces asegúrate de que estás pasando los valores en orden, y no estás estropeando con el orden porque la salida que obtendrás se estropeará Entonces espero que esto sea hasta el momento tan bueno. Todo bien. Entonces ahora quiero hablar de los parámetros predeterminados, y para eso, lo que voy a hacer es simplemente duplicaré esta función. Voy a copiar y pegar, ¿de acuerdo? Y ya pueden ver, sólo voy a cambiar el nombre de esta función, ¿de acuerdo? Diré saludar a la persona por aquí, y voy a tener solo un parámetro por aquí solo por el bien de la demostración. Bien, me desharé de todas las demás declaraciones de aquí Mantendremos las cosas simples. ¿Bien? Entonces esta es mi función, que es la función saludar. Lo siento, saludar a la persona, se llama , bien, no es una gran función. Entonces otra cosa por aquí que puedes notar es un programa de script de mandíbula única puede tener múltiples funciones definidas para diferentes propósitos, claro, ¿verdad? Entonces aquí estoy creando otro tipo de saludo, bien. Ahora, déjenme llamar a esto por aquí. ¿Bien? Si guardo esto, no verás ningún error. ¿Bien? Ahora, déjenme llamar a esta persona de saludo, y he llamado a esta función. ¿Bien? Ahora, en el momento en que llamas a esta función sin ningún argumento estás viendo que estás viendo hola indefinido. ¿Por qué estás viendo hola indefinido? Porque este nombre aún no está definido, no tiene ningún valor porque no has pasado el argumento, ¿de acuerdo? Ahora, habrá escenarios en los que desee establecer algún tipo de valores o parámetros predeterminados porque el collar o quien esté llamando a la función podría no pasar los valores siempre. Y en ese caso, es posible que desee tener un conjunto de valores por defecto con el que se inicialice el parámetro Ahora bien, una forma es tener un valor predeterminado por aquí, ¿de acuerdo? Pero esto no es bueno. Todo bien. Puedo tener un valor predeterminado como invitado por aquí. Bien. Y puedo guardar este hola invitado. Pero esta no es una buena manera de hacer las cosas. Si realmente paso un valor, ese valor será anulado Y si no quiero que eso se anule, necesito agregar cheques innecesarios por ¿Bien? Pero Ja script proporciona una manera sencilla de hacerlo. Todo bien. Lo que puedes hacer es al declarar el parámetro por aquí, en realidad puedes inicializar el parámetro con un valor predeterminado, así Bien, algo como esto. Si lo guardas, verás que hola invitado está impreso por aquí. Todo bien. Ahora bien, si no estás pasando ningún parámetro, estás viendo esta salida. Si pasa algún tipo de parámetro. Entonces si digo hola ron, bien, si guardo esto, verás hola Ron siendo impreso. ¿Bien? Entonces, si estás pasando algún tipo de parámetro, verás que ese parámetro es, lo siento, si estás pasando algún tipo de argumento, no parámetro, si estás pasando algún tipo de argumento, verás que ese argumento se está usando. Pero si no estás pasando ningún tipo de argumento, entonces se utilizará el valor predeterminado, siempre que hayas definido un valor predeterminado aquí, ¿de acuerdo? Entonces este es un ejemplo de función con parámetro predeterminado. Valor, ¿verdad? Entonces así es como esto es gente muy servicial. Habrá escenarios. Como, por ejemplo, esta es una persona de saludo, ¿verdad? Entonces, si no tienes el nombre del usuario por aquí, ¿de acuerdo? Podemos tener nombre inicializado a invitado por aquí, ¿verdad? Y entonces lo que puede pasar es que se está utilizando invitado. Si el nombre no está disponible, invitado si no quieres usar invitado, entonces necesitas pasar el nombre, nombre real del usuario. ¿Bien? Entonces independientemente, el usuario verá una salida decente. No va a ver hola indefinido. Derecha. Entonces va a ser una salida decente, ¿verdad? Ahora bien, esta es una función con valor de parámetro predeterminado. Todo bien. Quiero hablar de función con parámetro de descanso. ¿Bien? Así funcionan con parámetro de descanso. Todo bien. Ahora, ¿qué significa una función con parámetro de descanso? Todo bien. Entonces digamos que tengo una función llamada calcular suma. Bien, digamos. Y aquí, en el lugar de parámetro, tengo A P dos parámetros, derecho. Y lo que hace esta función es que dirá consola dot log. Sólo va a hacer A más B por aquí. Todo bien. Ahora la cosa es, quiero llamar a esta función, ¿no? Entonces lo que voy a hacer es calcular la suma. Voy a pasar en 1020. Bastante simple. Entonces se imprimirá 30 como la salida como se esperaba, ¿no? Ahora bien, el escenario es o la declaración del problema es esto va a funcionar bien o esto hará el trabajo si sabes cuántos argumentos vas a pasar, ¿verdad? Ahora bien, si no estás seguro del número de argumentos que vas a pasar a la función, entonces en ese caso, puedes hacer uso de número variable de argumentos, ¿verdad? Entonces necesitas cambiar la sintaxis de aquí para eso, y necesitas agregar tres puntos como este, y puedes decir números, ¿verdad? Ahora bien, lo que esto dice es que los números es el nombre del parámetro. Bien. Pero es de número variable, ¿verdad? El conteo no es fijo. Todo bien. Ahora la pregunta es, ¿cómo vas a usar esto dentro de la función si no se fija el conteo? Todo bien. Entonces para eso, tendremos que hacer uso de cuatro bucles. Bien, entonces voy a decir let sum es igual a cero. Y voy a decir cuatro. Entonces, si vienes de algún otro lenguaje de programación, bien, como Java, C plus, o cualquier tipo de lenguaje de programación, entonces es probable que debas estar al tanto de qué son los bucles, ¿verdad? Si no estás al tanto, entonces eso está completamente bien. Sólo quédate conmigo. Cubriremos todo a medida que avanzamos. Todo bien. Pero por ahora, estoy agregando este bucle de cuatro, y voy a decir suma más igual a, y voy a decir por aquí. Bien. Y luego al final, puedo hacer registro de consola por aquí. Bien. Y puedo decir algo bien. Algo como esto, ¿verdad? Ahora aquí, he pasado en 1020, lo que me está dando 30 como resultado. Bien, puedo pasar en 1020 y luego 30. Daré 60 como resultado. Puedo copiar esto de nuevo, y puedo pasar en diez, 20, 30, y puedo pasar en 80. Se puede ver que está dando 140 como resultado, derecho. Entonces esto va a seguir adelante, bien, porque el número de parámetros que acepta esta función es variable por esta sintaxis, ¿verdad? Para que puedas pasar cualquier número de argumentos como quieras. Dependiendo de tu requerimiento, ¿verdad? Entonces esto es algo de lo que debes estar al tanto. Esto se conoce como el parámetro rest. Puedes ver por aquí, este es el parámetro de descanso. Todo bien. Entonces sí, esto está hecho. Además, un ejemplo que deseo mostrarles es de un booleano, Entonces incluso puedes pasar parámetros booleanos, y cómo puedes usar los parámetros booleanos, ¿de acuerdo? Ahora, digamos, si quiero Comprobar si un miembro es elegible para un descuento o no, ¿verdad? Y un usuario es elegible para un descuento si es miembro. ¿Bien? Entonces puedo decir función por aquí, verificar elegibilidad por aquí. Bien. El parámetro es, digamos, uh, puedo decir que puedo decir que es miembro por aquí. Bien. Lo voy a mantener simple, y voy a decir consola punto log por aquí. Y dentro de esto, voy a tener una verificación ternaria de operador. ¿Bien? Entonces voy a decir, es miembro. Si este es miembro, entonces en ese caso, elegible si no imprime lo que va a imprimir? No elegible. Algo así. Bien. Y si. Bien, entonces cometí un error en la sintaxis. Sería algo así, y por aquí, sería Colin Bien. Entonces sí, esto está hecho. Bien. Entonces lo que estás haciendo es aquí, déjame tomar estas dos nuevas líneas para que sea mucho más legible, ves, lo que he hecho. En realidad estoy comprobando la elegibilidad para descuento con la ayuda de esta variable booleana Entonces, si es miembro, es elegible, de lo contrario, no lo es. Bien. Y de manera muy sencilla, se le puede llamar a esto. Es una elegibilidad de cheque, se puede decir, cierto. Bien. Para que veas que es elegible, y si cambias esto a falso, no es elegible. Todo bien. Entonces eso es lo que ves como la salida. Todo bien. Ahora bien, estas eran funciones basadas en variables. Todo bien. Incluso puedes tener funciones con objeto. ¿Bien? Así funciona con objetos como parámetro. Todo bien. Entonces en ese caso, voy a crear una función por aquí. Y digamos que deseamos imprimir la dirección. Bien, entonces la dirección puede ser complicada, ¿verdad? Y en ese caso, digamos que estamos, digamos que deseamos tener calle por aquí, voy a tener ciudad, y voy a tener SEP. Bien, estas cosas voy a tener. Bien. Y voy a decir consola dot log por aquí. Y con los backticks, voy a decir dirección. Bien. Y luego voy a imprimir en dirección. Lo siento, esta será calle, entonces esta será esta será después de la calle. Hay ciudad y ZIP. Bien, entonces voy a decir ciudad. Y entonces este será ZIP. Todo bien. Entonces tengo esta función, bien, es tener que es tener tres parámetros o es tener un solo objeto con estas tres propiedades por aquí. Bien. Ahora bien, ¿cómo le va a enfriar esto por aquí? Bien. Entonces para coll esto, puedo llamar simplemente a imprimir dirección, ¿ok? Y puedo haber dejado la dirección por aquí. Y puedo decir calle calle como calle uno, bien, algo así. Puedes tener cualquier tipo de dirección ficticio. Puedo tener una ciudad ciudad uno. Bien, estoy agregando todas las direcciones ficticias. Se puede decir ZIP y se puede decir por aquí, algo así. Bien. Entonces sí, esto es lo que es por aquí. Y voy a cerrar voy a tener punto y coma, y después pasaré en dirección a. ahora si ve la salida, puede ver dirección Calle uno, ciudad uno, y puede ver esto siendo impreso por aquí Así que en realidad estoy obteniendo la salida en múltiples líneas porque he agregado separación de líneas. Así que sólo voy a volver y voy a mover todo a una sola línea, y ya pueden ver la salida, ¿verdad? Entonces así es como puedes hacer pasar los objetos. Todo bien. Incluso puedes tener una dirección impresa por aquí. Esta es también otra sintaxis, y puedes crear directamente el objeto por aquí. Entonces se puede decir calle Colin ABC. Bien. De esta manera también puedes pasar. Derecha. Ya se ve que la calle se está pasando y los dos restantes no están definidos, ¿verdad? Por lo que es importante que la clave sea correcta para todos los pares de valores clave. Todo bien. Entonces aquí se puede decir ciudad dos, dos, salvo. Se puede ver la salida, sí. Bien. Así que puedes pasar o crear objetos dinámicamente así también por aquí. Todo bien. Y además, una cosa más que quiero destacar por aquí son las matrices, ¿de acuerdo? Por lo tanto, las funciones también se pueden usar con arrays como parámetros. Todo bien. Ahora, en este caso, lo que vamos a hacer es que tendremos función. Diré números de impresión y voy a tener números como parámetro por aquí, y puedo decir registro de puntos de consola, y puedo decir números, algo así. Todo bien. Y puedo llamar a esta función. Entonces déjenme llamar a esto. Diré imprimir números y déjenme llamar a esto. Puedo decir uno, dos, tres, cuatro, cinco, seis. ¿Todo bien? Si guardo esto, verás que la matriz se pasa a la función. Entonces este es también un ejemplo de función con array. Todo bien. Entonces esto es todo lo que tenía para hablar de diferentes parámetros. Quiero decir, los parámetros de la función y los argumentos de la función. Todo bien. Espero que este concepto sea claro. la distinción entre parámetros También se borra la distinción entre parámetros y argumento, y espero que tengas algo de claridad en cuanto a cómo puedes crear funciones que acepten diferentes argumentos, y puedas hacer uso de ella en JavaScript. ¿Bien? Entonces espero que esto haya sido útil. 4. Salidas de funciones al descubierto: explicación de los valores para la devolución: Ahora digamos que tengo una función que me puede ayudar a obtener un cuadrado de valor, ¿de acuerdo? Ahora bien, SQUA. Y para esto, aceptaré un número por aquí. Todo bien. ¿Y qué es un cuadrado? Un cuadrado se multiplica en número por sí mismo. Entonces voy a decir let result, y voy a decir número en número. Bien. Ahora esto está hecho. Puedo hacer un registro de consola por aquí. Bien, consola dot log, puedo decir resultado. Todo bien. Ahora voy a llamar a esta función. Diré que se ponga cuadrado, y llamaré a cuatro. Ahora, ¿qué es un cuadrado de cuatro? Es 16. Entonces verás 16 como la salida. Todo bien. Ahora lo que está pasando aquí es que estamos pasando en este argumento cuatro a este parámetro a esta función, y este parámetro se inicializa con cuatro, y luego ocurre el cálculo donde el resultado se inicializa con cuatro en cuatro, que es 16, y luego se obtiene 16 como resultado, ¿ Ahora bien, este 16 o el resultado no es accesible fuera de esta función, ¿verdad? Ahora, habrá escenarios en los que quizás quieras hacer cierto tipo de procesamiento, bien, cierto tipo de operaciones, donde estés procesando algunos datos, alguna información, y luego quieres obtener ese valor procesado. Por aquí, no vamos a recuperar el valor procesado de donde llamamos, ¿verdad? Entonces aquí estamos pidiendo a la función para obtener el cuadrado de cuatro. Pero, ¿y si quiero hacer uso de plaza por aquí? No puedo. No puedo acceder al resultado por aquí. ¿Bien? Entonces, si simplemente muevo esta declaración de aquí a aquí, no va a funcionar, ¿verdad? Se puede ver que el resultado no está definido. Y la razón es que el resultado se crea dentro de este bloque de función, entonces existe ahí mismo, ¿verdad? No se puede acceder a él fuera del bloque de funciones. Entonces, ¿cómo obtengo los datos del proceso? De la función. Ahora bien, aquí es donde se pueden devolver los valores, ¿verdad? Entonces aquí, lo que estoy haciendo es en lugar de imprimirlo por aquí, simplemente puedo decir retorno. Puedo hacer uso de esta palabra clave return por aquí. Se puede ver este retorno, y puedo decir resultado. ¿Bien? Ahora bien, lo que va a pasar como resultado de esto se devolvería el resultado. ¿Bien? Y de dónde se devuelve desde donde se llame a la función. Entonces desde donde sea, sea cual sea la posición que esté llamando a la función, ahí se devuelve este resultado Pero la cosa es que no lo estás viendo por aquí, ¿verdad? Entonces, para obtener el resultado, necesitas atraparlo, ¿ y cómo lo atraparás? Se puede decir cuadrado entumecido por aquí. Puedes crear una variable y puedes atraparla de esta manera, o y puedes imprimir esta variable. Entonces ahora verás 16 como salida. Entonces, lo que estamos haciendo esencialmente por aquí es que estamos creando una función g cuadrado para procesar o para obtener el cuadrado de un número y puede ser cualquier número, y estamos obteniendo el resultado por aquí, y lo estamos registrando por aquí. ¿Correcto? Ahora bien, esta cosa esta forma de hacer las cosas se conoce como devolver el valor de una función. Y aquí, estamos obteniendo ese valor y estamos haciendo algún procesamiento adicional, ¿verdad? Entonces sí, así es como puedes devolver y usar los valores de una función en particular. Ahora bien, la cosa de aquí es que estamos simplemente devolviendo un solo valor. Por supuesto, también puedes tener funciones que devuelvan múltiples valores. ¿Cómo harías eso? Entonces puedo tener función Bien, por aquí y puedo decir obtener información de usuario. ¿Bien? Y puedo decir nombre, coma H. Bien. Puedo decir regreso. Puedo decir nombre de usuario, nombre Colden por aquí Bien. Y puedo decir usuario H y puedo decir g por aquí. Bien. Entonces esto está hecho, y bien. Entonces esto está hecho, y voy a tener en vez de agregar esto, lo que puedo hacer es deshacerme de esto y puedo tener esto inicializarlo de esta manera Bien. Entonces estoy teniendo prueba de nombre, y voy a tener H como prueba. Bien. Ahora bien, ¿cómo consigo este valor en el lugar donde quiera que llame a esto? ¿Bien? Entonces lo que puedo hacer es que puedo ver el registro de puntos de consola. Bien. Puedo enseguida por aquí, digamos que puedo decir G. Lo siento, Oh, sí, empieza con G en realidad, información de usuario de G, y puedo llamarlo así. Y verás la información del usuario que se está imprimiendo por aquí, ¿verdad? En lugar de imprimirlo en la consola, lo que también puedes hacer es desempacar esto, ¿verdad Entonces aquí, entran dos propiedades, nombre de usuario y usuario H. Así que puedes desempaquetar esto y asignarlo a variables separadas ¿Cómo se hace esto? Entonces puedes decir que vamos por aquí. Se puede decir usar un nombre. Y se puede decir usuario g por aquí. ¿Bien? Es esto, bien, estás creando por aquí y estás llamando a obtener información de usuario. Todo bien. Y ahora si haces consola punto log por aquí, nombre de usuario, coma, usuario H. Puedes ver nombre es esto y H es este. ¿Bien? Ahora bien, lo que estamos haciendo es cuando estamos obteniendo el valor. Entonces, cuando el valor se devuelve de get user info, se devuelve en forma de objeto. Entonces esto es en realidad objeto por aquí, pares de valores clave, ¿verdad? Y así es como puedes devolver múltiples valores desde una función. Y estamos obteniendo un objeto como un tipo de retorno. Entonces lo que estamos haciendo es que podemos imprimirlo en la consola, Bien, no queremos imprimirlo. Queremos manejarlo de manera personalizada. Entonces lo que puedes hacer es desempaquetar estos valores y asignarlos a variables separadas usando la sintaxis ¿Bien? Entonces tienes la lista de variables por aquí y asegúrate de que coincidan con el nombre de aquí porque si digo nombre de usuario uno, y si lo guardo, verás que nombre de usuario no está bien, por aquí. Me va a encantar username one, y voy a guardar esto. Verás que el nombre de usuario uno no está definido ahora. ¿Por qué? Porque el nombre de la propiedad es nombre de usuario, y aquí la estás desempacando en una variable con nombre diferente ¿Bien? Entonces el nombre está siendo emparejado, ya ves, ¿verdad? Entonces esto debería funcionar. Y esta sintaxis donde estamos creando variables de esta manera a partir del objeto se conoce como destructuración ¿Bien? Y a menudo leerás este término desestructuración de objetos Estamos desestructurando los objetos. ¿Qué es la desestructuración? En términos simples, estamos desempacando los objetos, ¿de acuerdo? El objeto viene en esta sintaxis, ¿verdad? Tiene atributo username y usuario H. Lo estás desempacando y creando una variable llamada username, le estás asignando este valor, ¿verdad Este valor, sí. Y entonces estás creando usuario He y le estás asignando este valor Bastante simple. Lo estamos desempacando, y eso es lo que es desestructurar objetos Y aquí, realmente en la retrospectiva, no en la retrospectiva, en realidad, está bastante claro que esta sintta en particular o este concepto en particular se está utilizando por aquí Todo bien. Entonces así es como se puede hacer que la función devuelva múltiples valores, como objetos, por supuesto. ¿Bien? Ahora bien, así es como se puede devolver un objeto, derecho. Y también te mostré cómo puedes hacer uso del objeto desde el lugar donde estás llamando a esto. Ahora, otra forma de hacer las cosas o devolver múltiples valores es que puedes tener una función, return array, ¿verdad? Entonces también puedes hacer eso. Ahora bien, ¿cómo harías eso? Entonces déjame mostrarte eso. Así se puede ver la función y se puede decir obtener dimensión por aquí. Bien. No aceptaré un parámetro. Entonces digamos que estamos creando una función para obtener la dimensión. Diré que regresen, y inmediato podemos tener una matriz Puedo decir 200 300, 500. Bien. Y simplemente puedo llamar a Console dot log get dimension por aquí. Bien. Y puedes ver la salida por aquí. Bien, así que esto también es factible, ¿de acuerdo? Ahora, incluso puedes desestructurar la matriz de aquí en variables individuales ¿Bien? ¿Cómo lo harías? ¿Bien? Ya estamos conscientes, por cierto, de cómo funciona la desestructuración Entonces voy a decir, aquí estoy regresando 200300500, ¿verdad? Entonces puedo decir ancho Bien. Puedo decir altura, puedo decir profundidad por aquí. Bien. Voy a deshacerme de esto y voy a conseguir esto. Diré que es igual para obtener dimensiones. Bien. Y puedo decir Consola, punto, inicia sesión por aquí. Diré ancho, alto y profundidad, algo así. Bien. Uy. Entonces esto no está definido. Déjame ver dónde está el tema. Entonces la sintaxis es un poco diferente por aquí. En lugar de llaves, habrá corchetes redondos ¿Bien? Oh, perdón, no redondo, corchetes. Lo siento por eso. Bien. Entonces si guardas esto, puedes ver 200300500 Esto funcionó, ¿verdad? Entonces se trata de levantar por aquí. ¿Bien? Una cosa de la que quiero que hables es por aquí en el en esta función. ¿Bien? Déjame copiar esto por aquí. Bien. Voy a comentar esto. No voy a quitar este código para que veas qué cambios estamos haciendo. Así que este es el código, ¿de acuerdo? Aquí, lo que estoy haciendo es que en realidad estoy creando una variable. No necesitamos crear esta variable por aquí. Simplemente puedo cortar esto y simplemente devolver el cálculo, algo así. Esto también está bien. Hay otra forma de hacer las cosas. Se puede ver 16. La manera taquigráfica es lo que se llama, ¿verdad Entonces sí, así es como puedes devolver la función. Lo siento. Así es como puedes devolver valores y diferentes tipos de valores en realidad desde la función. Ahora también puedes tener Función sin retorno por aquí. ¿Bien? Entonces puedo tener la función llamada decir hola. Esto es algo que ya estás consciente o debes estar ya consciente, y puedes decir, quiero mostrarte cómo funcionan las cosas si intentas aceptar valor de una función que no está devolviendo nada. ¿Bien? Así que he saludado. Esto no es devolver nada. ¿Bien? Puedo saludar por aquí. Bien. Verás hola impreso. ¿Bien? Ahora bien, si digo consola punto, Inicia sesión por aquí y si digo mensaje Bien. Y si trato de aceptar mensaje como el retorno de esta función en particular. Esta función no está devolviendo nada, pero aun así estoy creando mensaje y tratando de aceptar lo que sea que esté regresando, te quedarás indefinido. No es devolver nada, ¿verdad? Entonces, claro, te pondrás indefinido, ¿verdad? Entonces sí, se trata de eso, ¿verdad? También puedes tener así que quiero mostrarte un caso más por aquí. Así que aquí voy a devolver el número al número, ¿de acuerdo? Ahora, déjeme agregar un testimonio después de esto, ¿de acuerdo? Voy a saludar. Veamos qué pasa. Si guardo esto, verás que esta declaración nunca se ejecuta. También verás que es una calificación fuera. ¿Puedes ver esto? Esto no es grado fuera, y esto es grado outut Si pasas el cursor sobre esto, verás el código inalcanzable detectado ¿Qué significa código inalcanzable? ¿Bien? Entonces lo que sucede es en realidad, si estás teniendo algún tipo de declaración después de la declaración return, repito si estás teniendo algún tipo de declaración después de la declaración return, entonces esa declaración nunca se ejecutará, ¿verdad? ¿Cómo se ejecutará? Porque en realidad estás regresando de aquí. Usted dijo que regresara. Regreso significa que estás viniendo al lugar desde donde te llaman la función, ¿verdad? Vienes al lugar desde donde llamas a la función. Entonces esto nunca va a ser ejecutado. Entonces este es, por supuesto, un código inalcanzable, ¿verdad? Esto nunca será ejecutado, ¿verdad? Ahora, déjame hacer las cosas un poco interesantes, ¿verdad? Para que puedas tener función. Con múltiples valores de retorno o declaraciones de retorno. No valores. Debería decir declaraciones return porque los valores ya hemos visto cómo se pueden devolver múltiples valores en forma de objetos y arrays, ¿verdad? Entonces digamos que tengo una función en la que quiero verificar cada uno de los usuarios. Estoy comprobando la edad y estoy aceptando la edad por aquí. Bien. Ahora puedo decir edad si la edad es mayor de 18, ¿ok? Entonces estoy haciendo uso de operador ternario. Estoy diciendo bien, regresa adulto. Algo así. Entonces es adulto que regresa si la edad en realidad es superior a 18, ¿de acuerdo? Y oops esto no nos está permitiendo regresar por aquí, operador ternario. Voy a tener que hacer uso del tratamiento I por aquí. Bien, entonces voy a decir que la edad es mayor que 18, entonces en ese caso, ¿de acuerdo? Voy a querer regresar adulto, ¿ verdad? Estoy regresando adulto. ¿Bien? De lo contrario, lo que voy a devolver es menor. Digamos. Bien. Entonces sí, esto está hecho, y voy a tener punto y coma Bien. Entonces aquí lo que está pasando es observar esto cuidadosamente, gente, ¿de acuerdo? Estoy teniendo una función donde estoy teniendo dos declaraciones de devolución, regreso adulto, regreso menor, ¿de acuerdo? Entonces esto es absolutamente válido, bien, porque estas dos declaraciones return no se ejecutan a la vez. Cualquiera de estos se ejecutará dependiendo de la condición, ¿verdad? Entonces, si la condición es verdadera, ésta será ejecutada. Si la condición es falsa, ésta será ejecutada, ¿verdad? Y así es como funciona la declaración if. Entonces primero estamos comprobando esta condición, y luego estamos ejecutando esto, ¿verdad? Por lo que puede tener múltiples declaraciones de devolución. Esto está absolutamente bien por aquí. Todo bien. Y si trato de atropellar esto por aquí, puedo decir consola dot log por aquí. Bien, y puedo decir cheque, edad, déjame pasar 14 por aquí. Bien, voy a copiar esto y voy a guardar esto. Verás menor como la salida. Si vuelvo a ejecutar esto con los 24 años, verás adulto. Todo bien. Entonces aquí estamos haciendo uso de return con declaraciones if, y esto es absolutamente válido. No hay ningún tema como tal, ¿de acuerdo? Entonces espero que esto tenga sentido ahora en cuanto a cómo la función puede devolver valores en múltiples y diferentes escenarios. Todo bien. Entonces espero que esto sea útil. 5. Elabora código: explora expresiones funcionales en JavaScript: Entonces ahora es el momento de que hablemos de expresiones de función. Digamos que tengo una función muy sencilla, que se utiliza para saludar, ¿verdad? Y puedo llamarlo así. Nada mágico por aquí. Veremos la salida como hola. ¿Bien? Ahora, otra cosa que quiero destacar por aquí está en la parte superior, si agregas una llamada a función como esta, verás la salida incluso antes de que se declare la función. Entonces incluso antes de la declaración de la función, si intentas agregar say hello o llamar la función que vas a declarar, seguirá funcionando. No obtendrás ningún error. ¿Todo bien? Ahora llegando al tema de las expresiones de función, ¿qué son las expresiones de función? Entonces puedes tener una variable creada, así. Se puede decir vamos a crear por aquí. Y se le puede asignar una función, ¿verdad? Entonces eso es algo que puedes hacer. Todo bien. Entonces lo que voy a hacer es cortar esto. No voy a crear una nueva función. En cambio, voy a cortar esto y voy a añadir esa cosa por aquí, ¿de acuerdo? Y a, esto es absolutamente válido por aquí. ¿Bien? Esto es algo que puedes hacer en JavaScript. ¿Bien? Puedes llamar a Greet algo como esto, y puedes ver, Bien, C hola. Bien. Entonces esto tiene que desaparecer por aquí. El nombre C hola necesita irse, ¿no? Y una vez que va S hola, necesitas que te guste comentarlo. Bien. Y puedes ver, ahora puedes llamar a esta función en particular usando greet. ¿Bien? Entonces, lo que estamos haciendo aquí es que en realidad estamos teniendo una especie de variable que ahora está apuntando a esta definición de función. Y cuando te refieres a esta variable, puedes llamar a la función usando esta variable en sí misma. ¿Bien? Entonces este es un ejemplo de una expresión de función. Ahora como funciona todo esto es, lo que sucede es que primero se crea la función anónima. ¿Bien? Función anónima, es decir, se está creando una función sin nombre, porque no estamos agregando un nombre por aquí, ¿de acuerdo? Entonces se crea la función sin nombre, y se le asigna a esta variable llamada Grit, ¿bien? Y entonces puedes hacer uso de la codicia para llamar a la función. Ahora bien, si copio esta función llame, y si la agrego en la parte superior verás que la arenilla aún no está inicializada o la arenilla no Todo bien. Entonces, a diferencia de decir hola, donde pudimos llamar a la función con su nombre de función, no podemos llamar a function con greet porque grit es esencialmente una referencia que hemos creado que está apuntando a esta función ¿Bien? Entonces esto es algo que debes tener en cuenta, ¿de acuerdo? No se puede llamar a grit antes de su definición en el código. Debes definirlo antes de usarlo. ¿Todo bien? Entonces sí, se trata de la expresión de la función. Ahora bien, esta cosa de aquí, lo que estamos haciendo cuando estamos asignando la función de esta manera, en realidad estamos creando una expresión ¿Bien? Entonces este es un ejemplo de expresión de función. Incluso se puede agregar una función, derecha, que devuelve algo. ¿Bien? Entonces déjenme decir también vamos a multiplicar. Bien. Digamos que queremos tener una función para multiplicar algo. Voy a añadir función por aquí. El parámetro es E P por aquí, y voy a decir que devuelve A en B, porque esta función está multiplicando los dos números y regresando. ¿Bien? Ahora se puede decir multiplicar por aquí, diez, 20. Bien. Y si guardo esto. Bien, entonces es simplemente regresar. Necesitamos imprimir el valor si queremos usarlo, o mostrarlo a los usuarios. Todavía no dando la salida debido a esta línea en la parte superior, ahí estamos obteniendo un error. Entonces, si guardas esto después de comentar eso, así obtendrás multiplicador por aquí, puedes ver, y puedes ver el resultado de la multiplicación por ¿Bien? Entonces esto también es factible en donde estás teniendo una función que está devolviendo algo y estás asignando esa función a una variable Entonces esta es una función anónima o función sin nombre que estás asignando a una variable Todo bien. Ahora, una cosa más que quiero destacar por aquí es que las funciones en JavaScript son objetos. ¿Bien? Entonces son objetos, lo que significa, si tienes una función, Bien, entonces déjame crear una función por aquí. ¿Bien? Entonces aquí, voy a decir que las funciones son objs Todo bien. Y voy a tener una definición de función. Voy a llamar a esto como GET. Bien. Sin parámetros. Diré registro de puntos de consola, y rápidamente voy a saludar por aquí. ¿Bien? Entonces sí, esta es una función. Ahora lo que puedes hacer es que tengamos esta función. ¿Bien? Bien, GET ya ha sido definido, así que di hola, o di hola. Todo bien. Entonces si llamas a saludar, va a funcionar, claro, nada mágico, ¿ verdad? Ahora, hola otra vez. Voy a imprimir algo. Hola otra vez, camino. Para que sepamos que viene de esta función. Hola otra vez viene de esta función. Todo bien. Lo que puedes hacer es tener una variable. Puedes decir A por aquí, y puedes asignar decir hola por aquí. ¿Bien? Entonces lo que está pasando aquí es esta función o esta variable, debería decir. Todo bien. Esta variable también se refiere ahora a esta función, ¿verdad? Y simplemente puedes decir, A, y volverás a ver hola . Todo bien. Entonces puedes ver que estás asignando una función esencialmente a una variable Y esto es posible porque las funciones son objetos en JavaScript. Bien. Y puedes hacer uso de A para llamar a esta función en particular. Todo bien. Espero que esto tenga sentido, ¿verdad? Entonces estos son algunos conceptos que deseo tocar. Espero que esto haya sido útil. 6. Fundamentos modernos de JavaScript: dominio de las funciones de flecha: Entonces ahora es el momento de que hablemos de funciones de flecha. Ahora, ¿qué son las funciones de flecha? Ahora, las funciones de flecha son sintaxis, y la sintaxis proporciona una forma más concisa de crear y escribir funciones en JavaScript. ¿Todo bien? Ahora bien, si tienes que crear una función, qué harías dirías función, saludar, y yo solo diría hola por aquí. ¿Bien? Entonces yo diría Consola, registro, y yo diría hola. ¿Bien? Esta es una función. Y, claro, si tengo que llamarlo, simplemente lo llamaré así, di hola. Esta es una forma básica de crear funciones en JavaScript. Ahora, puedes hacer uso de la expresión de función, ¿verdad? Y se puede decir, et greet es igual a, y puedes deshacerte de este tipo de sintaxis por aquí. ¿Bien? O permítanme mantener esta sintaxis por aquí en la parte superior. Bien, para que veamos cómo estamos progresando y me voy a deshacer de esto por aquí Todo bien. Y esta es también otra forma de crear función. Pero aquí estamos haciendo uso de la expresión de función donde estamos asignando una función a una variable. ¿Bien? Entonces ahora esta variable está apuntando a esta función en particular. Ahora, en JavaScript, puedes mejorar o hacer esto aún más conciso. Todo bien. Entonces lo que puedes hacer es que puedes decir por aquí, cret voy a decir saludo flecha Veremos qué es la función de flecha. Por lo tanto, puede omitir esta palabra clave de función aquí antes que nada. Muy bien para que puedas deshacerte de esta palabra clave de función. Y como nuestra función es simplemente tener una sola declaración, simplemente puedo deshacerme de las frases y simplemente puedo decir, o simplemente puedo hacer algo como esto. Todo bien. Entonces estoy haciendo uso de flecha por aquí para definir el cuerpo de la función o la definición de función. Ahora puedo decir saludo flecha por aquí. Y puedo guardar esto y verás hola siendo impreso en la consola. Todo bien. Entonces esta sintaxis de aquí es una sintaxis de la función arrow. Y se puede ver que esta es una creación de funciones de una manera normal, bien, con solo la sintaxis normal. Esta es una expresión de función donde se está asignando una función a una variable Y aquí, ahora lo que estás haciendo es que estás haciendo esta sintaxis o expresión de función aún más concisa y estás haciendo uso de la flecha por aquí. Entonces esto es funciones de flecha, derecha, en donde puedes crear funciones de esta manera. Ahora, claro, esto es mucho más conciso, si solo estás creando una función hacer una línea de operación, por ejemplo, cualquier línea de operación como imprimir algo o registrar algo o procesar algo en una sola línea, entonces de esta manera, entonces de esta manera, la función flecha es mucho más concisa que hacer las cosas de esta manera o de esta manera, ¿ verdad? Es sólo una opción. Todo bien. Y verás mucho código por ahí que está haciendo uso de funciones de flecha. ¿Todo bien? Ahora bien, la pregunta está aquí, esta función es una línea, ¿verdad? Entonces, ¿es como la función de flecha solo se usa para una sola línea de declaración? Absolutamente no. Entonces, si el cuerpo de la función tiene múltiples declaraciones. Entonces aquí puedo decir crear flecha, múltiple, ¿de acuerdo? Y puedo decir por aquí, ¿de acuerdo? Entonces aquí, voy a añadir cuerpo, algo así, y puedo decir, por aquí, voy a copiar esto y voy a armar este hola. H dos. ¿Bien? Entonces este es hola uno, y así es como dos. Todo bien. Y solo necesito llamar a esto poder decir crear flecha múltiple y uh simplemente agregar para que puedas ver hola uno, hola dos. Así que también puedes tener múltiples líneas de código en las funciones de flecha. Todo bien. Ahora, vamos a crear y ver rápidamente diferentes funciones de flecha en diferentes escenarios, derecha. Entonces, ¿cómo se comportaría la función arrow si hay parámetros, verdad? Entonces vimos así es como se puede crear sin parámetros, ¿verdad? Entonces con los parámetros, simplemente agregarás un parámetro por aquí, Bien. Entonces, por ejemplo, por aquí mismo, puedo actualizar este ejemplo por aquí. Bien. Déjame duplicar esto por aquí. Bien. Ahora, aquí, puedo decir param uno Bien. Entonces es tener un parámetro, así puedo decir nombre por aquí, bien. Y simplemente voy a convertir esto a literal de plantilla. Bien, porque eso es más conveniente, y puedo decir más alto y nombrar por aquí, ¿verdad? Y ahora tengo que pasar de nombre aquí. Bien. Entonces voy a decir Creta flecha, y voy a decir param uno Bien. Y puedo decir John. Bien. Y si guardo esto, ya verás, hola, uno, John, ¿verdad? Entonces así es como puedes pasar en los parámetros, bien. Incluso puedes pasar múltiples parámetros si así lo deseas. Entonces puedo decir param dos. Entonces aquí estamos pasando en dos parámetros, así puedo decir H también por aquí, Bien Y aquí, simplemente puedo replicar esta sintaxis, ¿de acuerdo? Aquí. Voy a hacer uso de los literales de plantilla, y aquí, voy a decir H. Bien. Y aquí, sólo voy a copiar esto. Entonces vamos a decir param dos, y me estoy pasando John, así como 34 o 32 Voy a guardar esto y puedes ver hola uno, John, hola dos, 32, ¿verdad? Entonces estás pasando múltiples parámetros, y también estás teniendo un cuerpo de función, ¿verdad? También puedes conseguir este. ¿Bien? Entonces déjame entender esto con una sola declaración por aquí. Bien, consigue flecha, diré una, voy a pasar de nombre por aquí. Bien. Y puedo agregar nombre aquí. Algo así. ¿Bien? Ahora bien, si llamo a esta función, obtener R uno o saludar a R uno, bien. Tan genial R uno y puedo pasar en nada, ¿de acuerdo? Y si guardas esto, puedes ver hola Nadar, ¿verdad? Entonces aquí, esta es una función de una sola línea, en realidad. No está pasando como múltiples líneas. Esta función es solo tener una sola línea, e incluso puedes pasar un parámetro por aquí, ¿verdad? Para que puedas tener parámetros únicos, múltiples parámetros. Incluso puedes devolver valores, ¿verdad? Entonces déjame escribir en el ejemplo de aquí. ¿Bien? Entonces lo que puedo hacer es decir, digamos suma, y yo diría que es igual a, bien. Así que permítanme crear primero usando sintaxis normal, para que la deducimos luego a las funciones de flecha. Bien. Entonces aquí puedo decir s y Ups, puedo decir s, y aquí puedo decir E P, y esto simplemente regresa, E más P. Bien. Eso es. Bastante simple. Y ahora aquí puedo decir suma, ¿verdad? Puedo decir 1020, ¿verdad? Y voy a poner todo esto en el registro de la consola. ¿Bien? Entonces porque simplemente estamos regresando y no estamos imprimiendo nada, ¿verdad? Por lo que no se mostrará en la consola. Para que veas que estamos viendo 30 por aquí, ¿no? Ahora bien, si tengo que convertir esto en una expresión de función, puedo decir let y puedo decir algunos por aquí. ¿Bien? Yo mantendré el mismo nombre. Vamos a deshacernos de esto. Bien. Ahora bien, esta es una expresión de función. Se puede ver 30. Ahora bien, si tengo que convertir esto en función de flecha, ¿cómo lo haría? Así que aquí, puedo puedo deshacerme de la función antes que nada, Bien. Y entonces empezaré a ver marcas rojas por aquí, ¿verdad? Así se puede ver flecha esperada. Entonces aquí puedo ver flecha. Bien, y esto es todo. Se puede ver que esta es la función de flecha. Y ni siquiera necesito esto por aquí. Bien, porque es solo tener una sola línea de código, para que puedas ver cómo es esto. Y ni siquiera necesitas la palabra clave return, por cierto, si estás regresando y es solo tener una sola línea de código, puedes ver, es. Ya sabes, esto es todo. Yo solo agregaré espacio. Ya sabes, esto es todo. Entonces, ¿qué tan limpio es esto? Estás diciendo que vamos a resumir. Este es un parámetro, flecha, estás diciendo A más B. No hay palabra clave return, por lo que esta se devuelve automáticamente. Se entiende que se devolverá o este valor tiene que volver atrás, ¿verdad? Entonces, ¿qué tan conciso es esto en comparación con hacer las cosas a la antigua, verdad? Es bastante simple, bastante fácil, y hace que la sintaxis sea mucho más legible y concisa como puedes imaginar por aquí, ¿de acuerdo? Entonces devolver valores es lo que voy a escribir aquí. Entonces espero que hayas podido seguir adelante, y espero que la explicación de las funciones de flecha haya sido útil. 7. Cómo potenciar los objetos: aprovechar las funciones dentro de ellos: Entonces hablemos de cómo puedes hacer uso de funciones dentro de los objetos. Ahora, digamos que tengo este objeto por aquí llamado persona, ¿de acuerdo? Y voy a tener un par de propiedades por aquí. Bien. Entonces voy a decir Alice por aquí. Bien. Y puedo decir que vaya, g es 33. Bien, me perdí una coma. Bien, puedo decir consola dot log por aquí. Vaya, y puedo decir así que esta es la persona pensó H. Bien. Ahora, puedo agregar pactics por aquí Puedo convertir esto en literal de plantilla, y puedo decir, Hola, estoy. Bien. Y de hecho puedo agregar una expresión por aquí. Bien. Ahora, este será el nombre. Bien, porque el nombre es lo que tiene sentido. Y si guardo esto, ya verás, hola, soy Alice. Todo bien. Entonces, lo que estamos haciendo es que nos estamos refiriendo a las propiedades dentro de los objetos usando notación de puntos por aquí, ¿verdad? Ahora, puedes tener funciones dentro de los objetos. Ahora bien, si estás agregando funciones dentro de objetos, se les conoce como métodos, ¿verdad? Entonces aquí, simplemente puedo seguir agregando declaraciones por aquí, puedo decir mi edad por aquí, puedo imprimir en mi edad persona punto H por aquí. ¿Bien? Pero esto está fuera del objeto. Entonces puedo agregar esta cosa dentro del objeto con la ayuda de function, como dije, así que voy a cortar esto por aquí. ¿Bien? Y primero voy a añadir una coma porque los métodos que estás agregando, como dije, función dentro un objeto se conoce como método, ¿verdad Entonces, si ahora estás agregando un método por aquí, bien, esto debería estar separado por comas porque es un atributo, derecho o una propiedad, debería decir Entonces voy a decir Grit por aquí. Diré que funciona así, y lo voy a añadir por aquí. ¿Bien? Si guardo esto, no pasa nada porque necesito enfriarlo. Entonces voy a decir Oh, no voy a ser saludado. Diré persona punto Saludar lejos. ¿Bien? No necesito llamar a console dot log por aquí porque ya estoy haciendo el registro de puntos de consola dentro de este método de aquí, ¿verdad? Entonces voy a decir persona punto Greg, y voy a ver esto verás hola soy Alice, ¿verdad? Voy a deshacerme de esto de una manera. ¿Bien? Entonces esto es factible Ahora voy a llamar a este objeto como persona Alice. Voy a reemplazar a la persona Alice por aquí así como por aquí. Esto está funcionando bien. Ahora voy a añadir una persona más por aquí, o que es la réplica de este objeto de aquí, y voy a decir persona John por aquí. Bien. Voy a copiar su nombre, persona, John, persona, John, y voy a duplicar esto por aquí, y voy a decir persona John. ¿Puedes ver? Hola, soy Alice. Hola, soy John. Bien. Entonces esto está funcionando bien hasta ahora hasta ahora bien. Bien. Ahora bien, la forma en que hemos creado funciones aquí es con la ayuda de la expresión de funciones, ¿verdad? que pueda deshacerse de la función de aquí, la palabra clave function, y puede convertir esto en función de flecha. ¿Bien? Entonces, lo que puedo hacer aquí es que simplemente puedo deshacerme de esto y puedo agregar este tipo de sintaxis por aquí. Bien. Puedo deshacerme de esto y puedo hacer uso de este tipo de sintaxis por aquí. ¡Uy! Este tipo de sintaxis, ¿verdad? Entonces esto va a funcionar bien. Y si se guarda esto, va a funcionar bien. No hay cambios en la salida. Entonces se han creado estos métodos. Todo bien. Ahora puedo deshacerme de la prensa de rizos también, y puedo hacer que se vea aún más concisa porque estoy haciendo uso de funciones de flecha ahora, ¿verdad? Entonces voy a pasar a esta sintaxis. Bien. Y al final, voy a quitar el punto y coma. Bien. Si guardo esto, no hay cambio en la salida. ¿Todo bien? Ahora, también quiero hablar de una palabra clave que existe, que es esta palabra clave. Ahora aquí, estoy viendo personalis cual es este nombre de objeto en particular, ¿verdad? Pero en realidad lo que estoy haciendo es que en realidad refiero al atributo name o name property usando este nombre de objeto. Esto no es obligatorio. Lo que puedo hacer es simplemente hacer uso de esto de aquí. Esta es una palabra clave en JavaScript que se utiliza para hacer referencia al objeto actual, ¿verdad? Entonces, si pasas el cursor sobre esto, bien, verás este tipo de palabra clave de prueba global Si guardo esto, ¿de acuerdo? Bien, no funciona porque ambas se convierten en funciones de flecha. Todo bien. Entonces, una cosa que debes recordar es que si estás haciendo uso de esta palabra clave, no funcionará en las funciones de flecha, así que necesitas decir función por aquí, y necesitas guardarla. Bien, y necesito deshacerme de esto. Así que voy a tener que hacer un poco de inversión porque esta palabra clave no va a funcionar dentro de esta sintaxis en particular de aquí. Bien. Entonces volveré a cambiar a este tipo de sintaxis. Bien. Para que veas, hola soy Alice trabajando por aquí. Entonces ahora estás haciendo uso de esto. Si pasas el cursor sobre esto, verás que esto se refiere al nombre, g, y saluda Si cambias esto por aquí, claro, no funcionará porque acabas de verlo no funcionará dentro de las funciones de flecha. Y si pasas el cursor sobre esto, estás viendo como si se estuviera refiriendo a esto global ¿Bien? Pero éste se refiere a esto por aquí, o los otros atributos en el objeto. Todo bien. Para que puedas ver la salida. La salida no es adecuada. ¿Bien? Entonces me quedaré con la persona John por aquí. Entonces, una cosa que puedes llevarte aquí es si estás haciendo uso de esto o si tu método dentro del objeto implica hacer uso de esto, entonces no deberías hacer uso de la función de flecha dentro del objeto de aquí, ¿verdad? No se debe utilizar la sintaxis. Deberías hacer uso de este tipo de sintaxis. Todo bien. Entonces espero que esto sea útil. Ahora, se puede hacer mucho con los métodos dentro de los objetos, ¿de acuerdo? Entonces, si vienes por aquí, lo que voy a hacer es que voy a tener un contraejemplo por aquí. Bien. Ahora, ¿qué va a hacer el contador? va a enseñar cómo puedes pasar en los parámetros y cómo puedes devolverlo del objeto, ¿verdad? Entonces voy a decir const, o simplemente puedo decir let over here, counter Bien. Y voy a decir valor. Entonces este contador tiene valor inicial de cero. Bien. Y puedo decir incremento por aquí Entonces esta es una función que estoy creando función de incremento, y voy a decir valor de retorno Ahora se necesita incrementar el valor. Entonces puedes ver que este valor de punto se agregó y puedes incrementar el valor aquí Entonces puedo decir este valor de punto más igual, y puedo decir uno por aquí. ¿Bien? Y guardar esto hasta el momento tan bueno. Ahora bien, si me desplazo hacia abajo, necesito invocar esto por aquí para poder decir Consola, punto de registro por aquí, y necesito decir contador, punto, necesito decir incremento Se puede ver incrementado en uno, puedo copiar esto. Bien, puedo incrementarlo en dos, incrementado en tres, incrementado en cuatro, y así sucesivamente, Ahora bien, este es un ejemplo de cómo se pueden devolver valores a partir de un método que se define dentro del objeto debería decir, ¿verdad? Te voy a mostrar un ejemplo más donde puedes aceptar el parámetro y regresar también. Digamos que quiero incrementar el valor en cierta cantidad Entonces duplicaré esto. Voy a añadir una coma Aquí, puedo decir incremento B y voy a aceptar un valor como num por aquí, y voy a añadir ese valor num por aquí ¿Bien? Y voy a devolver el valor. Ahora, aquí, lo que debo hacer es aquí, si vengo, puedo decir incremento Pi, y puedo agregar diez por aquí Entonces idealmente la salida debería ser 14. Si guardo esto, se puede ver que la salida es 14. Entonces estás pasando en este parámetro y estás obteniendo esto como salida. Todo bien. Entonces así es como puedes pasar los parámetros y también puedes obtener los valores de retorno de los métodos, como las funciones dentro de los objetos se conocen como métodos. Entonces me refiero a ellos como métodos. Bien. Pero si estás creando métodos dentro del contador, así es como funcionarán. Todo bien. Ahora bien, un ejemplo más que quiero darles por aquí es de objetos dinámicos por aquí. Lo siento, no objetos dinámicos, pero yo llamaría a esto como una forma en la que se pueden definir métodos dinámicamente. ¿Bien? Así definiendo métodos dinámicamente. Todo bien. Entonces digamos que tengo un método. Bien, voy a llamar a este método dinámico. Bien. Es un ejemplo de cómo se pueden crear métodos dinámicos. Entonces tengo esto, y digamos que tiene un atributo, voy a agregar un atributo, así como así. Yo lo llamaré valor cero. Bien. Lo que puedes hacer es que puedes hacer Console Log y puedes ver el valor de punto del método dinámico. Ocho. Entonces esto te dará cero, claro. Ahora, no he añadido un método dentro. Puede agregar método dinámicamente después de que se haya creado el objeto. Eso se puede hacer. Sí. ¿Cómo harías eso? Entonces aquí, puedes venir. Se puede decir método dinámico, tot Bien. Déjame desplazarme hacia arriba para que sea visible. Entonces método dinámico, tot, puedo decir, digamos digamos alto por aquí y puedo decir función Bien. Y no necesito ningún tipo de parámetros. Voy a decir consola punto log por aquí, y voy a decir hola dinámico, ¿verdad? Y vaya, voy a bajar y voy a decir método dinámico punto. Diré Chi, algo así. Verás la salida hola dinámica por aquí. Entonces esta función o el método, debería decir, método se agregó al objeto dinámicamente después de que se creó el objeto. Entonces esto es absolutamente posible. Los métodos se pueden agregar a los objetos en cualquier momento del programa, no solo en el momento de la creación del objeto. Ten esto en mente, bien, posible que veas un código donde las cosas son así, así que no te confundas. Bien, esto es normal en JavaScript. Todo bien. Ahora bien, se trata de objetos normales. También quiero hablar un poco sobre los objetos anidados, bien entonces, ¿cómo funcionarían las funciones en los objetos anidados, verdad Para eso, tomaremos un ejemplo de auto. Bien. Así que voy a crear un objeto de coche rápidamente. Y digamos que el auto tiene un atributo llamado marca. Tiene marca como Toyota, ¿bien? Y entonces lo que voy a hacer es decir que tiene un objeto anidado por aquí llamado especificaciones Llamaré al atributo dentro de las especificaciones para que sea velocidad. Y voy a tener una función llamada especificaciones de pantalla. Y entonces este es un método, en realidad, no función. Lo siento. Bien. Entonces las terminologías, no se metan con las terminologías Tengo la costumbre de hacerlo, pero espero que lo llamen método, siempre, porque se llaman métodos dentro de los objetos, ¿verdad? Entonces puedes decir que la velocidad es o simplemente puedes mostrar la velocidad por aquí. Entonces puedo decir velocidad y voy a agregar puedes decir esta velocidad tot. Bien. Ahora esto está hecho. Ahora bien, ¿cómo llamarías a esto especificaciones desplazadas, verdad? Entonces es un objeto dentro del objeto, ¿verdad? Así que no necesito hacer registro de consola. Yo sólo me desharé de esto. Pero puedo decir cartt especificaciones, tot, especificaciones desplazadas . Se puede ver. Entonces verás que la velocidad es de 120. Entonces así es como puedes referirte a métodos que se crean dentro de objetos anidados, objetos dentro de objetos Entonces así es como puedes hacer las cosas. Todo bien. Entonces espero que esto sea útil y espero que hayas podido seguir adelante en cuanto a cómo funcionan las cosas con los métodos dentro de los objetos anidados Todo bien. También hay una versión taquigráfica Bien. Ahora, déjeme mostrarle eso. ¿A la derecha? Entonces lo que haría es hacer uso del objeto existente por aquí. Bien. Voy a hacer uso del objeto existente. Bien. Así que la versión taquigráfica por aquí Entonces esto es voy a decir taquigrafía de persona. Bien. Voy a llamar a esta persona como taquigrafía. Todo bien. Y ahora aquí, lo que podemos hacer es en lugar de tener este tipo de sintaxis por aquí, simplemente puedo tener una función así. Bien. Entonces no estoy haciendo uso de las funciones de flecha aquí. Ten esto en cuenta, bien. Pero voy a añadir un punto y coma y esto. Bien. Y si, esto es todo. Y puedes hacer uso de la taquigrafía de persona por aquí. Todo bien. Y esto debería funcionar absolutamente bien. Se puede ver. Bien, diciendo hola, soy John porque esto se refiere a la persona John. Se puede ver esto por aquí. Bien. Para que veas, hola, soy taquigrafía. Todo bien. Y esta es una versión taquigráfica, posible que también veas este tipo de sintaxis cuando se trabaja con objetos ¿Bien? Entonces los métodos crearon de esta manera. Todo bien. Entonces esta es una manera, bien. Otra forma es usar funciones de flecha, y luego también tienes expresión de función como este tipo de sintaxis, ¿verdad? Entonces todos estos son válidos, y funcionarían absolutamente bien. Todo bien. Entonces espero que sea claro para todos ustedes, y espero que esto haya sido útil. 8. Matrices de supercarga: métodos avanzados en JavaScript: Ahora, cuando estás trabajando con matrices, hay muchos métodos incorporados que Ja Script proporciona Y puedes hacer uso de estos métodos para trabajar de una mejor manera o para hacer muchas tareas al trabajar con matrices. Todo bien. Ahora, echaremos un vistazo a bastantes métodos que existen, y obtendrás una mejor comprensión de cuáles son estos métodos y cómo puedes hacer uso de ellos en tu programación diaria. Entonces aquí puedes ver esta lista, derecha. Uh, entonces ahí está este mapa, filtrar, reducir forraje. Pasaremos por cada una de ellas, ¿verdad, y te explicaré todo uno por uno, verdad? Entonces primero, hablaremos de mapa por aquí. Bien. Yo sólo voy a bajar esto, y voy a llevar esto a la nueva línea. Por aquí y sólo voy a acercar un poco. Todo bien. Ahora, ¿qué es el mapa? Ahora, el método map transforma cada elemento en una matriz y simplemente devolverá una nueva matriz. ¿Cómo funciona esto? Ahora, esta transformación puede ser cualquiera de operación o cualquier transformación que desee hacer en cada elemento de la matriz y desea recopilar todos los elementos transformados nuevamente en una matriz. Ahora déjame darte un ejemplo de cómo puedes hacer uso del mapa. Ahora digamos que tengo una matriz llamada números. Todo bien. Digamos que es una matriz simple, está teniendo elementos como uno, dos, tres, cuatro y cinco por aquí. Todo bien. Ahora, digamos que tengo un requisito en el que quiero hacer el doble de cada elemento en esta matriz. ¿Bien? Entonces están estos muchos elementos y quiero duplicar cada elemento que existe. Así que dos se convierten en cuatro, uno se queda uno o uno se convierte en dos, en realidad, ¿de acuerdo? Se convierte en cuatro, tres se convierte en seis, cuatro se convierte en ocho y cinco se convierte en diez. Todo bien. Entonces lo que puedo hacer es tener una función por aquí, ¿de acuerdo? Así que puedo tener una función llamada double por aquí. Bien. Y el parámetro puede ser num por aquí. Bien. Y puedo decir devolver num en dos. Ahora bien, esta es una función que me va a ayudar a duplicar cada elemento. Ahora bien, ¿cómo voy a aplicar esta función a cada elemento de la matriz? ¿Bien? Entonces para eso, lo que voy a hacer es voy a decir números, que es array por aquí. Voy a decir punto. En el momento en que digas punto, verás que estos son todos los métodos a los que tienes acceso, ¿verdad? Y tienes un método por aquí, que es el mapa. Entonces diremos mapa por aquí. ¿Bien? Si pasa el cursor sobre esto, verá que llama a la función de devolución de llamada definida en cada elemento de una matriz y devuelve una matriz que contiene el resultado ¿Bien? Así que voy a decir mapa, y voy a pasar la función por aquí, ¿de acuerdo? Simplemente voy a decir Bien. ¿Verdad? Ahora lo que esto va a hacer es que va a aplicar esta función a cada elemento de la matriz. ¿Todo bien? Ahora, el retorno por aquí es una matriz otra vez. Entonces, lo que necesito hacer es recopilar los elementos duplicados de nuevo en una matriz. Entonces necesito decir números duplicados o dobles, algo así. ¿Bien? Y entonces puedo decir consola punto Iniciar sesión por aquí. Bien. Vaya, así que necesito decir registro de puntos de consola, y necesito decir doble Números, algo así. Todo bien. Y deberían dar el resultado. Ahora, se puede ver por aquí, dos, cuatro, seis, ocho, diez, ¿verdad? Por lo que cada elemento se ha duplicado. ¿Cómo funcionó? Funcionó con la ayuda de la función de mapa, lo siento, método de mapa dentro de matrices. Así que aplicamos esta función particular llamada double que hemos creado aquí, derecho, a cada elemento de la matriz. ¿Bien? Así que incluso puedes tener un registro de consola por aquí. Di registro de puntos de consola, y puedes decir aquí, puedes imprimir num por aquí. Bien. Entonces sabrás contra qué número se está llamando este. Así se puede ver que se llamó en uno, dos, tres, cuatro y cinco. Si cambio esto a 14 por aquí. Y si guardo esto, verán este giro a 14. Entonces se está llamando por cada elemento que existe en la matriz. ¿Bien? No necesitamos este registro de consola. Bien, acabamos de empezar esto para obtener información adicional, pero así es como va a funcionar. Todo bien. Entonces espero que esto quede bastante claro en cuanto a cómo está funcionando esto y cómo el mapa puede ser útil. Ahora, aquí tenemos una función separada por aquí, ¿no? Esta es una función con nombre. De hecho, puede convertir esto en una función sin nombre o en una función anónima Bien, entonces no necesitas una declaración de función separada para esto. Ahora bien, ¿a qué me refiero en cómo harías eso? ¿Bien? Entonces no voy a borrar esto, pero en realidad copiaría esta cosa por aquí. ¿Bien? Ahora bien, este es un ejemplo de uso anónimo, ¿verdad? Función anónima, justo por aquí. Entonces así es como obtuvimos los números dobles en los que estábamos aplicando esta función a cada elemento de la matriz usando map, ¿verdad? Entonces voy a decir doble anónimo. Bien. Y aquí, en lugar de pasar esta función por aquí, lo que puedo hacer es que en realidad puedo obtener toda esta definición por aquí. Puedo copiar esto y puedo pegarlo por aquí. Y en lugar de doble, esto será función. Bien. Seré la palabra clave de función. Bien. Así que déjame desplazarme un poco hacia abajo y déjame alejarme un poco. Entonces puedes ver esta sintaxis por aquí. Estoy diciendo que hagamos doble anónimo. Entonces esta puede ser cualquier variable que tengas, que puede hacer el trabajo de recolectar arreglos, ¿de acuerdo? Arrays, como en esta cosa, toda esta operación devolverá una matriz, ¿verdad? Entonces necesitas algo para recogerlo, ¿verdad? Entonces estoy diciendo números mapa de puntos. Y en lugar de pasar el nombre de la función, estoy creando directamente la función por aquí. Entonces estoy diciendo función, num, devuelve num en dos. Eso es lo que estoy haciendo enseguida. Todo bien. Y entonces simplemente puedo obtener este registro de consola por aquí. Y simplemente puedo decir doble anónimo, y puedo salvar esto. La salida que obtengas será la misma. Se puede ver, esta es la salida de la pieza de código anterior, y esta es la salida de la pieza de código actual. ¿Bien? No hay ningún cambio en la salida, pero hay como la sintaxis que hemos escrito esta en esta. ¿Bien? Esto es muy conciso. Bien, conciso entonces el primero. ¿Bien? Entonces sí, este es un ejemplo de función anónima en la que estamos creando una función sin nombre solo por el bien de esta operación Entonces, ¿cuándo usarías este tipo de sintaxis y cuándo usarías este tipo de sintaxis? Entonces, si quieres que la función se reutilice en varios otros lugares aparte de esta matriz, entonces deberías tener una función separada y puedes hacer uso de este tipo de sintaxis Pero digamos, si estás creando una función solo con el propósito de la transformación de matriz, entonces puedes tener esa función así. Esto es mucho más conciso y mucho más legible. Puedes ir un paso más allá por aquí. Voy a duplicar todo esto por aquí. Bien. Puedes ir un paso más allá y en vez de como por aquí, función anónima, puedo ver la función de flecha. Entonces aquí, te voy a mostrar un ejemplo usando la función de flecha. ¿Bien? Entonces aquí, se puede decir flecha, bien, función de mapa, y por aquí, estamos viendo num, ¿verdad? Por lo que toda esta sintaxis se convertirá en función de flecha. Entonces esta palabra clave de función no es necesaria, ¿de acuerdo? Y entonces esto se convierte en el tipo de sintaxis de la función de flecha. ¿Bien? Y luego en lugar de imprimir doble anónimo, voy a imprimir doble flecha. ¿Bien? Se puede ver que la salida es la misma, ¿verdad? Ahora bien, esta sintaxis se puede reducir aún más. ¿Bien? No necesitamos llaves rizadas porque solo hay una declaración, ¿verdad Sólo hay una declaración. Entonces, ¿se necesitan llaves No, no es necesario, ¿verdad? Así que voy a venir aquí, me desharé de las llaves, y esto va en una sola línea, ¿verdad? El retorno tampoco es necesario ahora. Bien. Entonces me desharé del regreso. Se puede ver. Y este paréntesis, corchetes redondos tampoco son necesarios. Yo también me desharé de ellos. Se puede ver lo conciso que es esto, bien. Entonces puedes ver solo en esta expresión o solo en esta declaración, realidad estamos transformando toda la matriz por aquí. Si guarda esto, la salida no cambia. Estás obteniendo el mismo resultado, pero mira la sintaxis de la gente, ¿verdad? Esta es la primera sintaxis. Observe cuidadosamente. Función separada. pasando el nombre de la función por aquí, estás aplicando esta función para cada elemento de la matriz, ¿verdad? Obtienes el elemento transformado, lo estás imprimiendo. Estás haciendo uso de la función anónima donde en realidad estás pasando esta función por aquí. Esta es una función anónima sin nombre. Estás aplicando esta función para cada elemento en DRA. Y luego finalmente usando funciones de flecha, se puede ver que la sintaxis es mucho más simplificada, concisa y más fácil de leer. Bien. Entonces verás que este tipo de sintaxis se usa mucho. Bien, y mucha gente se confunde y no entiende lo que está pasando por aquí, especialmente las personas que son nuevas en JavaScript. ¿Todo bien? Si tienes buena experiencia en JavaScript, entonces podrías saber qué es esto. Pero gente que es nueva en JavaScript y que viene de diferentes lenguajes de programación como Java, C plus plus, Python, ¿bien? A menudo les resulta difícil porque, ya sabes, todo esto, ya sabes, todo esto se redujo a una expresión tan pequeña por aquí. Derecha. Entonces espero que esto quede bastante claro. A propósito fui paso a paso. Te mostré cómo se está haciendo esto primero, cómo puedes pasar una función nombrada por aquí. Puedes ver cómo puedes tener función anónima y cómo puedes tener directamente la función de flecha. La mayoría de los tutoriales de temas cubren directamente las funciones de flecha. Bien. Entonces, si por casualidad aprendes sobre el método map dentro de RAS, ellos cubrirán directamente usando esta sintaxis, ¿verdad? Pero quería que todos ustedes entendieran y fueran paso a paso, ¿verdad? Ahora, podemos aplicar este tipo de sintaxis a todos los demás métodos, bien, porque has entendido uno, así que te resultará muy fácil entender el resto, ¿verdad? Entonces esto se trata de mapa. Se puede hacer cualquier tipo de transformaciones, personas, cualquier tipo de transformación. Como si quieres hacer esto tres X, o hacer este diez X, por ejemplo, obtendrás diez, 20, 30, 40, 50, ¿bien? Algún tipo de transformación, ¿verdad? Entonces esto se trata de mapa. Ahora el siguiente en la línea o el siguiente en la cola es el filtro. ¿Bien? Ahora, ¿qué es el filtro? Yo sólo voy a bajar esto. ¿Bien? Así que filter volverá en nueva matriz con elementos que pasen una condición. Ahora, habrá escenarios en los que desea filtrar elementos en una matriz en función de una determinada condición, ¿verdad? Entonces, en ese caso, tal vez quieras filtrar, ¿verdad? Y ahí es donde entra en imagen el filtro. Ahora bien, el filtro es un método que ofrece una manera muy concisa de hacerlo. ¿Bien? Entonces digamos que tenemos esta matriz num bien con dos, cuatro, lo siento. Este no es el elemento. Es uno, dos, tres, cuatro, cinco. ¿Verdad? Esto es lo que es la matriz. Digamos que quiero obtener la lista de números pares. Entonces puedo decir números pares constantes por aquí, y puedo decir números punto. Puedo decir filtro, algo así. Y aquí, puedo decir num puedo decir num módulo dos es igual a cero por aquí. Bien. Y entonces simplemente puedes imprimir en el Oops Entonces, simplemente puedes imprimir en los números pares de aquí. Entonces es algo así. ¿Bien? Entonces me sale un error que N no está definido. Bien, no debería ser N, es num. Señorita impresión. Echo de menos escribir en Num. Bien. Para que puedan ver, esta es una lista de números pares. Entonces lo que está pasando es, esta es una prueba que hemos mencionado aquí, ¿verdad? Esta es una prueba. Entonces, cualquiera que sea el elemento que esté pasando esta prueba se devuelve y se agrega a esta nueva matriz o se filtra y se agrega a esta nueva matriz, ¿verdad? Y estás imprimiendo en esta nueva matriz, ¿verdad? Entonces se filtra toda la matriz y tienes una matriz filtrada que coincide con esta condición, ¿verdad? Ahora, digamos que si tienes tres por aquí, entonces solo obtendrás números que son divisibles por tres Se pueden ver tres por aquí. Bien. Entonces así es como funciona el filtro, bien. El siguiente método que tengo es sobre reducir. Ahora ¿qué es reducir? Reducir hará el trabajo de reducir la matriz a un solo valor, ¿verdad? Ahora bien, esto lo hace aplicando una función, ¿de acuerdo? Y puede haber muchos casos de uso si quieres agregar, digamos, la suma, si quieres obtener la suma de todos los elementos en una matriz, entonces puedes hacer uso de reducir por aquí. Así que me apegaré a nuestro ejemplo de array, y digamos que queremos obtener la suma de todos los miembros de la matriz, ¿verdad? Entonces puedo decir números por aquí. Esto es lo que nuestros arrays, puedo decir reducir por aquí. Entonces quiero reducir esta matriz. Bien. Ahora, voy a tener que pasar en el acumulador Bien. Entonces voy a decir acumulador. Puedes ver la sintaxis por aquí. Puedes obtener el valor anterior, Bien, y puedes obtener el número real. Entonces voy a llamar a acumulador por aquí y voy a ver el valor actual Bien. Así que esto es lo que voy a decir, ¿de acuerdo? Y puedes ver la documentación de la función que acepta hasta cuatro argumentos, la meta de suma reducida llama a la función callback una vez por cada elemento de la matriz, ¿verdad Entonces voy a decir acumulador ahora ¿qué es un acumulador? Por lo que acumulador acumulará retorno de las devoluciones de llamada ¿Bien? Así que con cada iteración, ¿de acuerdo? Con cada iteración, tendremos acceso al valor actual, ¿verdad? Entonces, cuando sea así, déjame desplazarme hacia arriba. Entonces cuando la iteración es con uno, bien, tomará uno en imagen Se lo agregará a la suma. Después con la siguiente iteración, agregará dos a la suma Y sea cual sea la suma con cada iteración, eso está siendo retenidas por acumulador, ¿verdad? Por aquí. Entonces estamos diciendo acumulador, valor actual, y por aquí, voy a decir acumulador más valor actual Bien, eso es todo. Y entonces voy a decir registro de consola por aquí. Voy a iniciar sesión en Console, y necesito recopilar esto en Necesito recolectar esto ¡Uy Entonces necesito recoger esto en una variable, digamos, vamos a sumar. Y voy a tener algunos por aquí. Ahora, si digo Guardar, verá 15 salida SD. Todo bien. Entonces espero que esto tenga sentido en cuanto a cómo está funcionando esto, ¿verdad? Y tienes algo de buena claridad por aquí. Bien, entonces llevé esto a una nueva línea y solo para que sea realmente visible para todos ustedes, pero no lo fue. Todo bien. Pero sí, esto es lo que es todo el método para reducir. Todo bien. Ahora, entonces tenemos para cada uno. Ahora es para cada uno. Así que para cada uno se ejecutará la función proporcionada una vez por cada elemento de la matriz. Bien. Entonces lo que puedo hacer aquí es que sólo voy a ir a la nueva línea. Bien. Algo así. Y ahora puedo decir número. Bien, los números enseñados para cada uno, puedo decir. Entonces para cada elemento de la matriz, lo que quiero hacer es que quiero imprimirlo, digamos. Voy a llevar la salida a la consola, y aquí, voy a imprimir esto. Vaya, echo de menos quitar esto, voy a guardar esto. Se puede ver uno, dos, tres, cuatro, cinco, entonces esto es array, ¿verdad? Entonces así es como funciona cuatro cada uno. Cualquier tipo de función, se puede aplicar a cada elemento de la matriz. ¿Todo bien? Tenemos algo llamado como encontrar por aquí. Fine devolverá el primer elemento que satisfará una condición particular por aquí. ¿Bien? Entonces eso es lo que es encontrar. ¿Bien? ¿Y cómo se puede hacer uso de ella? Entonces digamos que queremos obtener el primer número par de la matriz, ¿verdad? Digamos que eso es lo que es el requisito. Entonces puedo decir números punto encontrar por aquí, y puedo decir num por aquí, y será num porcentaje dos es igual a cero, algo así. Bien. Y necesito recopilar esto en así que necesito recopilar esto en realidad, directamente en una variable para poder decir let first even, voy a llamar a esto como primer número de Steven. Y voy a decir registro por aquí, registro de consola, y voy a decir por Steven. Guarda esto y verás que el primer par son dos por aquí, ¿verdad? Por lo que esto obtendrá el primer elemento que satisfaga una condición particular Todo bien. Espero que esto quede claro. Tenemos algunos por aquí. Entonces algunos comprobarán si al menos un elemento pasa una prueba en particular, ¿verdad? Entonces eso es lo que comprobará. Y por aquí, sólo voy a hacer uso de ella. Ahora, la definición de suma dice que comprobará si al menos un elemento pasa una prueba en particular. Ahora bien, estas son pruebas que hay que definir como la función por aquí. Y si la prueba es pasada por al menos un elemento en la matriz, entonces obtendrás un verdadero booleano, ¿verdad Entonces esto devuelve booleano. Entonces puedo decir números por aquí, punto, y podemos hacer uso de la suma por aquí. Bien. Y voy a decir num. Bien. Y la condición que quiero verificar es num menos que cero, digamos, por ejemplo. ¿Bien? Entonces esto va a devolver booleano, así puedo decir let y tiene negativo Bien, entonces si tiene negativo, me va a dar una fila booleana de caídas Puedo registrar esto y voy a decir que tiene negativo. Si guardo esto, verás caídas. Entonces esta matriz no tiene ningún tipo de números negativos. Bien. De hecho, puede reemplazar esto para obtener una matriz de números negativos. Entonces puedes decir menos uno, dos, tres, oops, tres, cuatro, y así sucesivamente, ¿verdad Entonces esto tiene números negativos, ¿verdad? Estoy saludando a una matriz sobre la marcha. Si guardo esto, obtendrá salida TruSC. Entonces esto tiene sentido en cuanto a cómo esto se puede usar para verificar que al menos un elemento pase una prueba. Ahora bien, esto es útil en escenarios, si quieres ejecutar una comprobación rápida en la matriz y obtener un booleano, sí o no, y basado en ese booleano, sí o no, es posible que quieras hacer algo ¿Bien? Entonces ahí es donde es útil por aquí. Bien. Cada. Ahora, cada es solo evosión de suma Entonces algunos comprobarán si al menos un elemento pasa una prueba, pero cada uno comprobará si todo el elemento pasa una prueba. Así que en realidad puedo duplicar esto por aquí, y puedo decir, tiene o simplemente voy a decir todos, bien. Y voy a imprimir esto tiene cada por aquí. Y en vez de suma, voy a tener cada. Entonces, ¿cada elemento es cada elemento menor que cero? ¿La salida es falsa? No, porque un elemento es cada elemento en realidad. Entonces la condición es ¿cada elemento es menor que cero? Entonces esto es falso. Lo siento, me confundí un poco. Entonces porque tenemos tres elementos que no son menores que cero, uno es menor que cero, ¿verdad? Entonces esto está absolutamente bien. Ahora bien, si quito negativo de esto, bien, ya verás que da da fals por aquí Y eso es porque no todos los elementos son menores que cero. Así que para ser verdad por aquí, voy a tener que hacerlos negativos a todos. Y si ahorro, te pondrás verdad porque ahora todos los elementos son negativos por aquí, ¿de acuerdo? Para que puedas ejecutar este tipo de chequeos con la ayuda de cada. Tienes concat. Todo bien. Así que esto es otra cosa interesante, ¿de acuerdo? Si quieres combinar dos arrays en uno, puedes hacer uso de esto. Entonces digamos que tengo más números por aquí. Bien. Más número es seis, siete y ocho por aquí, ¿verdad? Entonces lo que puedo hacer es decir números o dejarme decir bien, números, voy a decir números punto concat por aquí y puedo decir más números, ¿verdad Y puedo asignar esto a una nueva matriz, ¿verdad? Así que puedo decir vamos nueva matriz, algo como esto. Imprimiré en nueva matriz. Bien. Voy a decir Console log por aquí, y voy a decir nueva matriz. Voy a guardar esto y se puede ver, uno, dos, tres, cuatro, cinco, seis, 79. Todo bien. También puedo añadir ocho por aquí. No sé por qué me lo perdí. Así que sí, tienes esto, ¿verdad? Entonces sí, esto es concat. Se concat a matrices, rebanará. Así que slice devolverá una porción de una matriz, Bien. Déjame mostrarte esto. Así que puedo decir vamos a rebanadas entumecido por aquí Bien. Y puedo decir números por aquí. Uh, números, tot, slice, y puedo especificar por aquí que quiero el índice inicial del índice uno al índice tres parte de la matriz Bien. Ahora puedo registrarlos, registrarlo por aquí así puedo decir rebanada entumecida. Se pueden ver dos y tres. ¿Bien? Entonces dos y tres por aquí. Así que solo estás cortando la matriz. Bien. Empalmar ahora ¿qué es rebanar Esto te ayudará a eliminar o reemplazar los elementos. Bien. Ahora bien, ¿cómo funciona esto? Entonces déjame mostrarte esto. Entonces digamos que tengo SON de frutos. Bien, entonces déjame desplazarme hacia abajo. Entonces puedo decir que dejen frutas por aquí. Bien, puedo decir manzana. Yo puedo tener ¡Uy, puedo tomar plátano! Bien, y voy a tener digamos naranja. Bien. Bien. Esto está hecho. Y digamos que quiero, quiero quitarle el plátano y agregar el mango. Entonces voy a decir frutas, tot, empalme. Bien. Diré en un índice. ¿Bien? Entonces estoy especificando en un índice, elimine uno. Bien. Se puede ver el recuento de eliminación. Entonces, comenzando un índice, elimine un elemento y agregue mango. Algo como esto. ¿Bien? Y luego si imprimes en frutas, verás la salida como manzana, mango y naranja, ya puedes ver. Entonces sí, así es como funciona. Únete. Ahora, ¿qué significa join? Entonces, a veces habrá un requisito en el que desea unirse y obtener todos los elementos dentro de una matriz en una cadena. Así que absolutamente puedes hacer eso. Entonces puedo decir que dejemos que todos los frutos. Bien, puedo decir frutas tat join y ¿cómo quiero unirme? Entonces este es un separador que quiero agregar por aquí. Bien. Entonces voy a añadir una coma Quiero que se separen todos los nombres de las frutas, y puedo decir todas las frutas de aquí. Se puede ver manzana, mango, naranja. Ahora, lo que sea que agrego aquí, si agrego exclamación, verás que se agrega exclamación para todos los Entonces me quedaré en coma porque eso es lo que parece natural por aquí, ¿verdad? Reverso. Ahora el reverso es bastante simple, bastante directo. Se puede obtener un reverso de un número con la ayuda de este método. Entonces puedo decir números punto inverso. Algo así. Bien. Y por aquí, puedo decir consola dot log, y puedo decir número inverso. Obtendrás 54321. ¿Todo bien? En especie, por supuesto, como su nombre lo dice, bastante fácil de identificar y entender también. ¿Bien? Puedes ordenar los elementos en una matriz, ¿verdad? Entonces se puede decir ordenarlo. Y puedes decir números por aquí, T, tipo. Bien. Y en realidad puedes especificar por aquí. Así que acabaré con esto por aquí. Bien. No voy a agregar ninguna lógica, luego agregaremos la lógica, y veremos cuáles son los problemas que estamos resolviendo. ¿Bien? Entonces, si haces uso de especie de esta manera. ¿Bien? En realidad, la función que hemos creado en realidad ya está ordenada, ¿verdad? Así que permítanme actualizar los números por aquí. Bien. Entonces actualizaré los números. Diré tres, uno, y voy a añadir diez por aquí y dos, por ejemplo. Bien. Y voy a ver esto. Ahora verás que no está ordenado realmente en orden ascendente. ¿Bien? Ahora bien, esto se debe a que es por defecto como cadena. Entonces esta comparación porque lo que está sucediendo es que la comparación está sucediendo en forma de cadena. Entonces los números no se ordenan de la manera correcta. Ahora para que esto se ordene de la manera correcta, lo que podemos hacer aquí es agregar dos argumentos, usando las funciones de flecha, así puedo decir A y B por aquí, y voy a hacer uso de dos argumentos, y voy a decir A menos B por aquí. Bien, por aquí. Y si guardo esto, verán uno, dos, tres y diez. Por lo que está ordenado por aquí ahora. Pero, ¿qué magia le hizo esta lógica a esta cosa clasificadora de aquí? ¿Bien? ¿Y cómo funcionó? Todo bien. Entonces lo que pasó es A y B son los dos elementos de las matrices que se compararán en cualquier momento dado, ¿verdad? Y esta comparación se hará por método de ordenación por aquí. Bien. Por lo que estos dos argumentos se pasan primero. Bien, en estos parámetros se pasan dos argumentos. Y entonces lo que ha pasado es A menos B se calcula. Ahora bien, si A menos B, ahora digamos si esto está trabajando en tres y uno, ¿verdad? A es tres y uno es B. ¿Bien? Ahora, A menos B es dos. El número es positivo. ¿Verdad? Entonces B se ordenará antes de A porque si el número es positivo, significa que B es menor que A. Así que B vendrá primero. Si el número es negativo, entonces lo que va a pasar es que A se moverá antes que B, en ese caso, ¿verdad? Y si el retorno es cero aquí, entonces los dos serán considerados como iguales y serán tratados por igual. Bien, así que esto es atendido por SOT por aquí. Solo hay que pasar en esto porque con la ayuda de menos por aquí, son tratados como números y no como cadenas. Todo bien. Entonces así es como funcionará la clasificación cuando estés haciendo uso de SOT por aquí. Todo bien. Entonces eso es sobre las funciones o debería decir métodos en JavaScript con respecto a las matrices, ¿verdad? Y así es como se puede hacer uso de ella. Para que puedas ver cómo empezamos inicialmente. Comenzamos con los conceptos básicos como cómo puedes pasar una referencia de función aquí al método de mapa. Y luego convertimos esto en anónimo, y luego convertimos esto anónimo en mapa de aquí. Lo siento, no mapa, funciones de flecha, debería decir, ¿verdad? Y luego vimos todas las funciones, todos los métodos que existen con arrays, ¿verdad? Para que puedas ver sort, reverse. Todos estos son útiles en algún momento en el que estás programando y trabajando con matrices para ahorrarte mucho tiempo y mucho código también, haciendo que tu código sea mucho más legible, pero ayudándote a hacer las cosas de una manera mucho más concisa y legible. Todo bien. Entonces espero que hayas podido seguir esta guía paso a paso, y espero que esto haya sido súper útil. 9. Foco del proyecto: construye tu propio convertidor de unidades: Bien, entonces, ¿cómo están todos? Entonces es hora de que construyamos un convertidor de unidades que va a hacer cada trabajo de convertir un valor a diferentes unidades. Entonces se va a convertir de una unidad a otra. Si, por ejemplo, entro 100 por aquí o me dejo a 110. Y digamos que quiero convertir de metros a pies, puedo conseguir esto convertido, y se puede ver 110 metros es este muchos feeds. Ahora, puedo decir 150 por aquí. Puedo hacer que esto se convierta de kilogramos a libras. Se puede ver que esto ahora está en libras, e incluso puedo convertir esto de Selsius a fahrenheit Así se puede ver uno de 50 centígrados es 302 fahrenheit. Entonces este es un convertidor de unidad simple y una interfaz bastante simple también, nada demasiado elegante o chassi Todo bien. Así que vamos a construir esto. Así que aquí estoy rápidamente en el código VS, y tenemos este archivo HTML, el archivo CSS y el archivo JS índice dentro de una carpeta. Estos tres archivos existen en la misma carpeta. Tengo este código HTML por aquí y voy a empezar a modificar este código por aquí. El título de esta página en particular será convertidor de unidades aquí. Voy a deshacerme de esto, y voy a tener el mismo texto convertidor de unidades aquí arriba que la etiqueta H one. Todo bien. Ahora lo que necesito por aquí es lo primero, necesito un insumo. Todo bien. Entonces voy a decir input desde donde voy a introducir el valor que deseo convertir. Esta entrada va a ser un número por aquí. El tipo es número. ID es valor de entrada porque necesito referir esto desde JavaScript para que pueda obtener los valores de entrada que el usuario ha ingresado. Necesito tener una identificación por aquí. Voy a tener un marcador de posición llamado Enter value. Vaya, algo como esto, ¿verdad? Y yo sólo voy a cerrar esto. Entonces se hace la entrada. Ahora, lo que necesito hacer es que necesito tener ocho desplegable, y para eso, voy a hacer uso de select por aquí, y voy a ver ID como tipo de conversión por aquí. Entonces, qué tipo de conversión deseo hacer. Dentro de esto, voy a tener opción Bien. Ahora, opción son medidores para caber por aquí. El valor, así que voy a tener valor por aquí. El valor es de M a FT, ¿verdad? Entonces voy a tener valores individuales a esto, cuales puedo hacer uso. Entonces aquí voy a decir metros a pies. Esto va a ser kilogramos a libras kilo gramos a libras. Bien esto va a ser KG a LP. Todo bien. Y, uh, entonces esto va a ser C Celsius. Bien. Lo que quiero decir es de Celsius a fahren de altura Algo así. ¿Bien? Uy. Entonces, sí, he corregido la ortografía, y sí, esto es lo que es Entonces será de C a F por aquí. Bien. Esto está hecho. Tenemos este convertidor de unidades, el cuadro de texto, y este desplegable por aquí que puedes ver para la selección de valores, Ahora, una vez hecho esto, después selección y todo hecho, necesito un patrón por aquí, ¿verdad? Entonces puedo decir que el ID de patrón es convertir. ¿Bien? Esta será la identificación. Y puedo tener un texto llamado Convert por aquí. ¿Bien? Entonces este es un botón que se está visualizando. Y después de esto, necesito mostrar el valor convertido también. Entonces voy a tener una etiqueta P, lo que va a decir, vaya, voy a tener así que no necesito ID por aquí, pero simplemente puedo decir convertirlo El valor es o Voy a mostrar el valor dentro de un lapso por aquí. ¿Bien? Y voy a tener cero inicialmente, y puedo tener ID como convertido. Valor, algo así. Bien. Entonces esto se hace, se puede ver, el valor convertido es cero. Todo bien. Entonces eso es todo en el HTML. Bien. No hay mucho que vamos a estar haciendo en el HTML. Solo asegúrate de tener el archivo Ja Script vinculado así y también puedes tener el archivo CSS enlazado aquí. Entonces solo voy a tener el enlace para CSS, y lo haré en la parte superior. Bien. Entonces dentro de la cabeza, sólo voy a tener enlace por aquí. Bueno, voy a decir hoja de estilo. Bien. Y voy a decir href, estilos punto css Todo bien. Esto está hecho. Bien, sí, ya está. Entonces esto es desde la parte HTML. Ahora, pasemos a la parte de Jascript, y veamos cómo puedes construir un convertidor Junit usando JavaScript y agregar algo de vida a esta Esta página web es bastante estática en este momento. pasaría nada si terminas los valores NC convertir, ¿verdad? Porque no hay vida. Entonces, ¿quién va a agregar vida? JaSbit, por supuesto Ahora, lo primero que necesito por aquí son diferentes funciones, ¿verdad? Entonces estas conversiones que voy a hacer, necesito tener una manera de hacer estas conversiones. Y lo que puedo hacer es por cada conversión que quiera hacer, voy a tener una función creada, ¿verdad? Entonces la primera conversión que estoy teniendo por aquí es metros a pies, luego tengo kilogramos a libras, Celsius a Fahrenheit Tengo tres funciones, derecho, y necesito tener un oyente por aquí que escuche el clic de botón de Convertir Entonces eso es algo que tenemos que hacer. Todo bien. Entonces no sólo voy a tener funciones normales. Por supuesto, puedes hacer funciones normales, pero voy a tener un objeto, y voy a llamar a esto como convertidor de Unidad, y voy a tener los métodos creados dentro de este objeto, ¿verdad? Entonces voy a decir M a F T, o? Y voy a decir función por aquí. Bien. Y solo voy a deshacerme de esto aquí, el parámetro será así si es metros a pies, entonces el parámetro de parámetros estará en metros, ¿verdad? Y puedo decir regreso. Puedo decir metros en. Y ¿cómo convertirías un metro en pies? Entonces necesitas multiplicar un metro por 28084, ¿verdad? Entonces esta es la fórmula estándar. No hay nada elegante por aquí. ¿Bien? Entonces sí, esto está hecho. Estoy consiguiendo estoy recibiendo un error marcas correctas, es porque me he perdido un igual a por aquí. Bien. Entonces esto está hecho. Este es el primer método que tengo M, que es metros a pies. Voy a tener KG a B por aquí. ¿Bien? Esta va a ser otra función por aquí, y esto va a aceptar kilogramos porque estamos convirtiendo kilogramos a la de libras, ¿verdad? Entonces voy a decir regreso. Voy a decir kilogramos en. Y vamos a multiplicar este valor con 2.2 0462. Entonces este es multiplicador estándar si quieres convertir kilogramos a libras, solo puedes buscar en Google cómo convertir kilogramos a libras y encontrarás cualquier número de fórmulas, estoy haciendo uso de esta. ¿Bien? Entonces este es un multiplicador que tienes C F. Así que esto es para Celsius a Fahrenheit por aquí. Voy a agregar función. Voy a decir Celsius, algo así, y luego por aquí, voy a decir vuelta. Hay una fórmula para convertir Celsius a Fahrenit. Voy a forzarlo a multiplicarlo por nueve por cinco aquí y voy a decir más 32, algo así. Bien. Entonces estas son todas las funciones, debería decir. Así que hemos creado métodos dentro del objeto, y, por supuesto, puedes tener estos métodos creados fuera así como funciones. ¿Por qué he creado dentro del objeto es para propósito de agrupación lógica. Ahora, siempre que tengas un programa de script jaw, podrías crear objetos con fines de agrupación, ¿verdad? Entonces aquí estoy agrupando estos métodos juntos, ¿verdad? Entonces esto está hecho. Entonces voy a empezar a definir el oyente por aquí, así voy a decir documento por aquí Uy. Esto se convirtió en documento. Bien. Diré punto y obtendré elemento por ID por aquí. Bien, y voy a decir convertir. ¿Por qué convertir? Porque este es el ID que hemos definido aquí en el botón HTML para, ¿verdad? Entonces eso es a lo que tenemos referirnos si se está refiriendo a botón por aquí y voy a decir al hacer clic por aquí. ¿Bien? Entonces al hacer clic de esto, necesitamos hacer uso de funciones de flecha, y voy a tener la lógica en cuanto a lo que sucede al hacer clic. ¿Bien? Ahora, la lógica puede ser tan simple como mostrar una alerta. ¿Bien? Si guardo esto y si digo convertir, ¿ok? No se muestra ningún cuadro de alerta. Entonces no está funcionando porque aquí, la C para click no puede ser mayúsculas. Tiene que ser pequeña. Es una pequeña palabra pequeña. ¿Bien? Todo está en pequeño al hacer clic. Ahora bien, si cambio esto, va a funcionar. Se puede ver. Ahora, necesitamos tener la lógica por aquí. ¿Bien? Entonces esto se está activando con el clic del botón. Bien. Entonces, ¿cuál es la lógica? ¿Cómo vamos a definir la lógica? Entonces, lo primero es que necesitamos ver qué opción se selecciona de esta. Bien. Entonces, de este desplegable, qué opción se selecciona, ¿verdad? Entonces una vez que también tenemos esto, necesitamos obtener el valor del texto de entrada por aquí porque ese es un valor que vamos a convertir. Entonces el valor del texto de entrada y la opción del menú desplegable. Estas dos cosas necesitamos para llegar hasta aquí. Bien. Así que voy a decir vamos a introducir el valor por aquí, y puedo decir documento punto. Puedo decir obtener elemento por ID por aquí. Bien. Y voy a decir valor de entrada. Bien. ¿Qué es el valor de entrada? El valor de entrada es el ID que has asignado aquí. Eso es lo que estamos llegando hasta aquí. ¿Bien? Esto está hecho, y vamos a decir valor de punto por aquí. Bien. Tenemos esto por aquí. Ahora bien, esto estaría en cadena por defecto, ¿verdad? Necesitas hacer uso de esto para el cálculo, ¿verdad? Porque estarás pasando este valor a esta función. Entonces lo que podemos hacer es que podemos hacer una conversión explícita por aquí. Podemos decir pase flotar y vaya, puedes venir aquí y aquí, puedes esto, algo como esto, ¿verdad Entonces tenemos un valor flotante de cualquier usuario que haya ingresado en el TextFX Bien, esto está hecho. Ahora puedo decir que la conversión. Escriba por aquí. ¿Cuál es el tipo de conversión? ¿Qué tipo de conversión quieres hacer aquí? Entonces puedo decir documento punto obtener elemento por ID. Y me voy a referir al tipo de conversión. Bien. Ahora bien, lo que yo recomendaría es por aquí, deberías copiar. Entonces aquí puedes ver, esta es la identificación. Puedes copiar esta identificación y agregarla aquí. Bien, en lugar de escribir. Porque si hay un solo error, no obtendrás el valor correctamente. Y puedo decir valor por aquí, ¿verdad? Y luego por aquí una vez que tengamos esto, puedo mostrar esto en alerta. Puedo decir valor de entrada, coma, puedo decir tipo Cosion. Algo así. Se puede ver NN puedo ingresar 100. Estás viendo 100 por aquí, déjame congatenar Entonces puedo decir algo como esto. Bien. Entonces, si agregas 200, verás 200 y metros a pies, ¿verdad? Si cambio a kilogramos a libras, verás KG a LB, ¿verdad? Porque estás obteniendo el valor. Por aquí. ¿Cuál es el valor? El valor es algo que has definido aquí contra la opción. Cada opción tiene un valor y te estás refiriendo al valor de aquí en HTML. Puedes ver Celsis a fahrenit C F. Así que estás obteniendo todo a la perfección, aunque ingreses, digamos, si entro un valor de punto flotante, obtendrás ese valor completo ¿Bien? Hasta ahora tan bien, así somos capaces de recuperar lo que sea que el usuario esté entrando en lo que llamamos el formulario de aquí, ¿verdad? Ahora, lo que voy a hacer es que puedo agregar puedo agregar puedo agregar una variable por aquí. Entonces puedo decir convertirlo. Valor. Entonces, ¿por qué es el valor convertido? ¿Bien? Entonces puedo decir valor convertido. Bien, y el valor convertido es igual a, así que puedo hacer uso del tipo de conversión por aquí. Ahora, voy a tener una condición si el tipo de conversión es igual a M dos FT. ¿Bien? Si el tipo de conversión es igual a M a FT, diré convertidor de unidad a FT porque esta es una función o el nombre del método, debería decir, voy a pasar en valor de entrada. Bien. De lo contrario, lo que yo haría está aquí. Bien, si no, tendría otro cheque por aquí. Diré que el tipo de conversión es igual a. Diré KG a LP. Solo asegúrate de tener estas palabras clave correctamente. Si quieres, puedes copiarlo desde el archivo HTML. Pero cualquier tipo de error tipográfico obtendrá mal la condición. ¿Bien? Entonces puedes decir etiqueta de convertidor de unidad puedes decir KG a LB por aquí y puedes pasar en valor de entrada. Algo como esto. Esto está hecho. Voy a tener dos puntos por aquí. Ahora aquí, si ambos son falsos, si no hay coincidencia para ambos, voy a tener convertidor de Unidad enseñado C F porque esto es lo que queda, ¿verdad? Por lo que tiene que ser distinto seleccionado. Entonces esta fórmula está hecha. Esta condición está hecha. Lo que estamos haciendo aquí es que estamos teniendo un control por aquí si el tipo de conversión es metros para caber. Si eso es cierto, con la ayuda del operador ternario, estamos haciendo esta llamada por aquí, esta llamada al método Si esto no es cierto, entonces estamos teniendo otro operador ternario por aquí Que está anidado. Entonces vamos a tener otro cheque. Si esto es cierto, si esto es cierto, entonces esto se ejecuta, lo contrario, esto se ejecuta porque esto es lo que queda, ¿verdad? Entonces tiene que ser cualquiera de estos tres, ¿verdad? Ahora aquí, lo que voy a hacer es voy a decir documento, punto, obtener elemento por ID, y por aquí, voy a decir valor convertido. ¿Bien? ¿Por qué convertir el valor? Porque tenemos este ID para span. Entonces vamos a obtener este valor convertido. ¿Bien? Voy a decir contenido de texto de punto. Algo así. Voy a decir valor convertido por aquí. ¿Bien? Porque esa es una variable que está teniendo este valor creado, ¿ verdad? Entonces esto está hecho. Ahora lo que puedo hacer es guardar esto y ponernos a prueba esto. Entonces si digo 100 metros a pies, convertir, ya se puede ver. Ahí está la salida kilogramos a libras. Ahí está la salida. Si tienes grados Celsius a Fahrenheit, ahí está la salida. Se puede ver. Ahora, una mejora que puedes hacer es que hay tres decimales o habrá número de decimales porque no hay restricción Entonces puedes agregar tot a fijo por aquí y puedes decir por aquí, algo como esto Entonces ahora se fijará a dos decimales por aquí, 220.46 ¿Bien? Algo así, por aquí. Todo bien. Entonces sí, esto es sobre es como puedes construir una moneda o lo siento, no moneda. Este convertidor de unidad. Lo siento. Todo bien. tener alguna validación por aquí para que puedas decir si esto no es igual a no un número. Bien. Lo siento, es AN. Entonces necesito pasar el valor de entrada por aquí, y luego ejecutarías esto, o. Entonces ejecutarías esto, moverás esta frase de cierre al final por aquí, algo así. Bien. Y voy a añadir así por aquí. Bien, esto está hecho. Y si esta condición falla, entonces puedes mostrar una alerta. Bien, por favor ingrese un número válido. Entonces una pequeña validación por aquí, verificación de validación que asegurará que cualquier usuario que esté ingresando por aquí es un número válido. ¿Bien? Eso es lo que va a hacer esta comprobación. Bien. Entonces digamos que si entro 100 por aquí, va a funcionar bien. Pero si entré 100 o cualquier otra cosa por aquí, no soy capaz de escribir nada por aquí porque este tipo es el número. Pero aún así agregué este cheque por aquí. Si por casualidad, esto no es un número, I condición Nian, por lo que devuelve un valor booleano que indica si el valor es un valor reservado Nian, Si es un, eso no es igual a, así que si esta condición es verdadera, entonces solo esto se ejecutará, lo contrario obtendrá un error. Por aquí, que es una alerta. Todo bien. Entonces esto se hace hasta el momento. Ahora, cambiaremos a estilos por aquí. Vamos a añadir un poco de estilo básico y vamos a hacer que se vea decente por aquí. Bien. Así que voy a empezar con Body por aquí. Familia de fuentes Straightaway, I'll say. Yo seleccionaré a Sinef por aquí. Bien. Algo así. Y luego tengo texto alinear por aquí. Diré centro. Diré margen, margen será cero. Déjame ver si esto. Se puede ver que todo está centrado ahora. Margen también es relleno cero, voy a decir 20 píxeles por aquí. Diré que el color de fondo es que puedo tener esta Alice azul. Puedes seleccionar lo que quieras, ¿de acuerdo? Un poco de tema azulado que tengo. Si quieres blanco, puedes seleccionar humo blanco. Depende totalmente de tu elección, ¿verdad? Puedes seleccionar lo que quieras aquí. Bien. Esto está hecho. Voy a añadir un espacio. Ahora después del cuerpo, voy a llegar a H uno. H uno es donde estamos mostrando esa unidad convertir un rumbo por aquí. Entonces voy a decir color, y puedo tener negro. Debería tener negro por aquí. Yo sólo me apegaré al negro. personalizar esto si lo deseas, bien. Ahora para entrada, entrada donde el tipo de tipo es número, bien. Entonces bien para esto y voy a añadir una coma para seleccionar por aquí Bien. Para ambos estos , como, necesito agregar, digamos, relleno. Bien. Entonces no hay relleno. Entonces si ingresas 100 por aquí, no hay relleno, así que voy a decir padding, dos puntos diez píxeles. Bien. Puedes ver alguna cantidad decente de relleno, puedes agregar margen por aquí. Bien, margen de diez pixeles. Bien, ya puedes ver un poco de espaciamiento ahí. Bien. Y se puede decir frontera por aquí. Entonces el borde es de un píxel, sólido, y puedo decir HTD Entonces este código de un color que uso para el borde, puedes ver, está atenuado, algo así como Bien. Y puedo decir radio fronterizo. Así que le voy a dar una especie de sensación redonda. Bien, entonces solo voy a agregar cinco pixeles. Por lo que los bordes se redondearán ahora un poco, ligeramente redondeados por cinco píxeles. Lo siento, ligeramente redondeado por cinco píxeles por aquí. Lo siento. Bien, esto está hecho. Ancho, voy a añadir Los anchos pueden ser de 200 pixeles por aquí Bien. Así que está hecho para ambos, ¿ de acuerdo? Para botón. Bien, el botón se ve crudo ahora mismo. Entonces déjame hacer algo por botón por aquí. Uy. Para botón, voy a decir relleno primero, relleno de, voy a decir diez píxeles y 20 píxeles. Bien. Entonces puedo tener aros de color de fondo. Entonces esto tiene que ser punto y coma, color de fondo. Bien. El color de fondo puede ser, yo diría azul. Voy a ver si esto, ya ves, azul, pero las fronteras se ven mal. Bien, debería decir. Voy a tener frontera como monja tal vez. ver si Sí. Boda es monja Puedo decir que el color es blanco. Blanco donde es blanco por aquí, se puede ver convertir blanco. Se puede tener radio de borde, radio de borde, puedo decir fi pixel porque lo he dado para los otros elementos. Bien. Ahora, curso si pasas el cursor sobre esto, quiero que esto esté cambiando, así puedo decir puntero del cursor Entonces ahora si voy por aquí, se puede ver el cursor girando para puntero. Bien. Esto está hecho. También puedo agregar un efecto hover Entonces botón, dos puntos, puedo decir *** y puedo decir color de fondo. Y puedo tener azul oscuro. Entonces, si pasas el cursor sobre esto, verás azul oscuro. Algo así como un efecto, ¿verdad? Ahora esto está hecho, y podemos tener e tyling para la pantalla, que es para la etiqueta P. Ese puede ser el tamaño de fuente. Sólo voy a aumentar el tamaño de la fuente a 18. Sólo voy a cambiarlo a 18 y voy a tener margen de digamos diez pixeles. Si guardas esto, tienes esto. Bien. Ahora, me acerco un poco. ¿Bien? Entonces me acerco un poco. Puedes ver por aquí para que los alumnos puedan verlo correctamente, pero puedes ver el resultado por aquí. Bien, entonces ahora se ve bastante decente. También abrí la aplicación en el modo de pantalla completa, para que tengas una mejor vista. Bien, 2.200 y puedes ver las conversiones por aquí, ¿verdad? Entonces esto va a funcionar bien. ¿Bien? Se ve bastante decente. Puedes personalizar el CSS en función de tus requerimientos. Puedes cambiar el color dependiendo de tus preferencias de color. ¿Bien? Entonces eso es sobre la unidad Coto usando jaw Script Espero que esto haya sido súper divertido. 10. Exhibición de proyectos: crea una aplicación dinámica de lista de tareas pendientes con JavaScript: Bien, así que es hora de que hablemos de hacer aplicación de listas usando JAScript HTML, y CSS Entonces aquí puedes ver esta aplicación que vamos a construir, y puedes ver que hay una para hacer ya agregada aprender las funciones de Ja Script. Todo bien. Puedo agregar más todos desde este cuadro de entrada por aquí. Puedo decir, aprender bota de primavera, y puedo decir agregar tarea. Puedo traer abarrotes. Bien. Algo así. Y puedes agregar las tareas. Puedes hacer agujeros en estos, y puedes marcarlos como hechos también. Bien, entonces esta es una aplicación sencilla que vamos a construir. Vamos a hacer uso de JavaScript, HTML y CSS. ¿Todo bien? Emocionado, vamos a saltar de inmediato. Entonces aquí estoy en el código de Visual Studio, que es el editor que voy a usar. También tengo este navegador abierto en el lateral con Live Server. Tengo tres archivos abiertos index dot HTML style dot css y index dot Gs. Ahora, antes de seguir adelante, solo asegúrate de que estos tres archivos residan en la misma carpeta. Todo bien. Ahora voy a comenzar con el archivo HTML. Primero, voy a añadir una exclamación. ¡Uy! En realidad estoy en archivo JavaScript, así que voy a llegar al archivo HTML. Voy a añadir una exclamación, y voy a conseguir algo de código estándar por aquí. Bien. Entonces por aquí, puedo dar el título del documento en cuanto a hacer la aplicación de lista, ¿de acuerdo? Algo así. Todo bien. E incluso puedes tener E H una etiqueta por aquí como título. ¿Bien? Entonces puedo decir H uno. Y se puede decir para enumerar por aquí. Bien, algo como esto. Todo bien. Ahora, vamos a necesitar dos cosas por aquí. Uno es input y otro es ePaton, ¿de acuerdo? Entonces voy a crear un div primero, y voy a tener una entrada por aquí como esta. Voy a llamar a esto como vaya, perdón, escriba como texto por aquí. Bien. ID es el ID es entrada de tarea. Necesito asignarle ID porque me voy a referir a este elemento directamente desde el script Ja para que pueda obtener lo que el usuario realmente ha ingresado por aquí. Voy a decir entra a tu tarea, algo así. Todo bien. Ahora en la siguiente línea después de la entrada, voy a tener un botón por aquí, ¿verdad? Entonces botón dirá ID, y voy a llamar a esto como agregar tarea por aquí, algo así. Y entonces esto será agregar tarea, algo así como Bien. Esto está hecho, y entonces creo que todos estamos bien por aquí. Bien. Déjame ver. No estamos viendo ningún tipo de salida aquí. Entonces veo la salida ahora después de refrescar, bien. Y si, entonces esta es la entrada y el botón, vamos a mantener HTML muy simple. Bien, tengo botón de entrada, y voy a tener una lista desordenada creada por aquí, que se utilizará para renderizar la lista de tareas. Bien. Entonces voy a llamar a esto como lista de tareas, algo así. ¿Bien? Por aquí, guión bajo etiqueta script, voy a tener SRC, y voy a llamar a esto ya que voy a vincularlo al Índice Gs por aquí Y en la parte superior, puedo tener hoja de estilo por aquí así puedo decir link, RL, voy a decir hoja de estilo. Bien. Y voy a cerrar esto. También voy a mencionar la etiqueta F, y voy a decir estilos punto CSS. Hasta el momento tan bueno. Bien, entonces HTML está hecho. Lo hemos mantenido muy, muy simple. Se puede ver, este es el contenedor de aquí, que está sosteniendo el tipo de entrada y el botón. ¿Bien? Puedo asignarle a esto un ID por aquí para que luego podamos usarlo para el estilo. Puedo decir contenedor de tareas por aquí. Bien. Entonces este es el contin de la tarea por aquí donde estoy teniendo entrada y botón Aquí es donde ocurre toda la acción. Y luego tengo una lista desordenada donde estoy mostrando la lista de ítems o lista de tareas pendientes Esto está hecho. Ahora voy a pasar al Índice GS. ¿Bien? Este es un archivo JavaScript donde vamos a escribir algún código que nos ayudará a darle algo de vida a este HTML. Bien, entonces esto literalmente no hace nada a partir de ahora, ¿bien? Entonces, lo primero que vamos a necesitar es que necesitaremos una forma de almacenar y gestionar nuestra lista de tareas pendientes, ¿verdad? Y también necesitaremos una forma, esencialmente de escuchar este evento. Así que cada vez que el usuario hace clic en la tarea, tenemos que asegurarnos de que la tarea se agregue a la aplicación. Una vez que se agrega la tarea a la aplicación, también tendremos que renderizarla. Bien. Entonces cosas como renderizado, adición de tarea, bien, marcando la tarea como completa, todo esto se gestionará dentro de la propia aplicación. Entonces lo que vamos a hacer es que tendremos un objeto, ¿de acuerdo? Entonces comenzaré por crear un objeto. Diré que haga app por aquí. Bien. Y así es como lo voy a crear. Ahora por aquí, voy a tener una matriz, porque la aplicación puede tener múltiples tareas, ¿verdad? Así que voy a tener una matriz, que va a ser utilizada para almacenar tareas por aquí. Ahora, voy a tener algunos métodos por aquí. Uno está en la tarea, ¿de acuerdo? Entonces este es el primer método por aquí. Bien. Entonces voy a tener otro método, que es toggle task. Esto va a ser usado para alternar. Entonces, si dices que esta tarea está hecha, si haces clic en la tarea, se va a marcar como hecha. Si vuelves a hacer clic, da click sobre él, se va a marcar como no diez. ¿Bien? Así que básicamente está cambiando por aquí Y aquí, esta función o este método va a aceptar index por aquí. Esto está hecho. Voy a tener que quitar las tareas terminadas, ¿de acuerdo? Entonces esto también podemos tener así que puedo decir eliminar las tareas terminadas. Bien. Y, uh voy a tener esto. Bien. Entonces esto nos va a ayudar a eliminar las tareas completadas, ¿de acuerdo? Y voy a tener un método para renderizar tareas por aquí. ¿Bien? Entonces voy a decir tareas de render, algo como esto, y por aquí, así es como va a ser. Todo bien. Entonces esto está hecho. ¿Bien? Así será el objeto. Este objeto tendrá el atributo para tarea para almacenar tarea, y todos los métodos básicamente para administrar tareas, ¿verdad? Ahora, lo que voy a hacer es que voy a decir documento por aquí, pensamiento Vaya, documento tot Voy a decir que obtenga elemento por ID por aquí, y voy a decir en la tarea por aquí. ¿Qué está en la tarea? En la tarea está el botón de aquí. ¿Bien? Se puede ver que esto es un botón. Entonces estamos recibiendo el botón, y en el botón, voy a decir al click por aquí. Bien. Voy a hacer uso de las funciones de flecha, así. Y aquí, voy a tener la lógica de lo que se supone que va a suceder cuando un usuario hace clic en la tarea de aquí. Bien, en el botón, quiero decir, ¿de acuerdo? Entonces aquí, antes que nada, puedo mostrar una alerta. Sólo puedo probar si este oyente está funcionando bien. Debería. Entonces si digo agregar, Bien, no se está mostrando, es porque esto es capital. Lo siento por eso. Bien. Así que aquí se puede ver, hola. Bien, está funcionando bien. Entonces esto se está activando con el clic del botón. Hasta el momento tan bueno. Ahora bien, ¿cuáles son las tareas que tenemos que hacer dentro de este oyente En primer lugar, tenemos que obtener lo que se ingresa en esta tarea. ¿Cómo vamos a conseguir eso? Eso lo conseguiremos de esta entrada. Tenemos esta entrada de tarea de identificación, ¿verdad? Entonces una vez que tengamos el texto que se introduce por aquí, vamos a llamar a la tarea y conseguir que esa tarea se agregue a la matriz de tareas, ¿verdad? Y entonces vamos a restablecer este cuadro de entrada a una cadena vacía porque se borra porque se agrega la tarea, ¿verdad? Entonces lo que voy a hacer es, voy a decir dejar que la tarea entre aquí. Bien, voy a decir documento punto, obtener elemento por ID. Y déjame obtener el aporte de la tarea por aquí. ¿Bien? Entonces voy a decir entrada de tareas. Asegúrese de tener esta referencia de identificación. Esta referencia de ID debe ser la misma que la que has definido aquí en el HTML. Todo bien. Entonces esto está hecho. Esto es cuidar por aquí. Bien. Ahora bien, lo que tengo que hacer aquí es, bien, esto está hecho. Voy a venir aquí. Diré que hacer app dot at task, y voy a decir entrada de tarea, punto, valor. Bien. Entonces lo que estoy haciendo es que estoy diciendo entrada de tareas. Entonces este es el elemento que obtuve, y estoy diciendo valor de punto. Sí. Bien. Y entonces necesito reajustar esto por aquí, este campo por aquí, ¿verdad? Entonces voy a añadir una cadena vacía, algo así. Esto va a despejar el campo de entrada, ¿verdad? Entonces puedo decir prueba en la tarea. Se puede ver que se está limpiando, pero no se está agregando en este momento. ¿Por qué? Porque esta función o este método no tiene literalmente nada. Es un método vacío. ¿Bien? Tenemos que definir todo esto. Aún tenemos que definir todo esto. Todo bien. Entonces ahora lo que voy a hacer es comenzar con el ifstreatment Bien. Si hay una tarea, o puedo si quieres validar, puedes agregar un check por aquí donde compruebes si la tarea existe. O lo que puedes hacer es que de inmediato puedes decir esta tarea de punto, lo siento, este punto tareas dot push Entonces necesitamos empujar o agregar esta tarea en particular a esta tarea de aquí. ¿Bien? Y aquí, voy a decir texto, Colin Bien, entonces esta es la tarea, y voy a decir terminada ¿Está terminado? Diré que se cae. ¿Bien? Algo así. Bien. Y una vez hecho esto, necesito llamar render. Así que este punto render. Algo así. Sea la interfaz de usuario necesita refrescarse, la interfaz de usuario correcta una vez que se agrega la tarea, la lista de la tarea debe refrescarse, y es por eso que estoy llamando a este render de puntos por aquí. Bien, esto está hecho. Así que básicamente preguntar cada tarea individual en esta matriz tiene dos cosas. Una es la tarea misma y si la tarea se marca como completada o no. Hasta el momento tan bueno. Tenemos que alternar ahora las tareas. ¿Bien? Entonces lo que vamos a hacer es decir este punto tareas. Voy a sacar la tarea del índice aquí porque tenemos acceso al índice. Diré punto terminado. Bien. Entonces esto será contrario de si está terminado o no. Voy a decir esto tareas de punto, y voy a decir índice por aquí, punto valor completado. Yo sólo estoy invirtiendo este valor por aquí. Entonces, cualquiera que sea el valor almacenado en el atributo completado de esa tarea en particular, se invierte y se vuelve a asignar. Eso es lo que está pasando. Eso es. Ahora, después de hacer este cambio, necesito renderizar la interfaz, ¿verdad? Así que renderiza la interfaz de usuario por aquí. Voy a decir esto tareas de render de puntos. Algo así. Esto está hecho. Necesito quitar las tareas completadas. Bien. Entonces lo que yo haría es que diría, para que podamos hacer uso del filtro por aquí, ¿verdad? Entonces puedes decir esto tot tareas por aquí. ¿Bien? Y se puede decir esto tareas de punto, tot filtrar por aquí, y voy a decir tarea por aquí, usar la función de flecha, y voy a decir si tarea está terminada. Algo así. Bien. Entonces, cualquiera que sea la tarea que se complete, se eliminará y voy a decir este punto Render tareas, algo así Bien. Ahora bien, ¿cómo renderizarías la tarea, verdad? Entonces para eso, lo que vamos a hacer es que necesitamos renderizar la tarea de aquí en lista de tareas, ¿verdad? Entonces lo que haría es simplemente copiar esto para ahorrar algo de tiempo. Bien. Y por aquí, voy a decir lista de tareas. Bien. Y el ID de aquí es lista de tareas, ¿verdad? Entonces voy a agregar lista de tareas por aquí. Bien. Se agrega la lista de tareas. Ahora lo que tenemos que hacer es Bien. Entonces aquí, voy a tener voy a borrar realmente la lista actual. ¿Bien? Primero, primero, necesitamos borrar la lista actual. Te diré por qué estoy haciendo esto, ¿de acuerdo? Te quedará claro en poco tiempo. HTML es igual. Entonces primero estoy borrando la lista actual porque estamos renderizando la tarea nuevamente, ¿verdad? Entonces, si no borras el HTML interno, si no borras la lista de tareas actual, la lista se duplicará, ¿verdad? Espero que esto tenga sentido. Ahora lo que tenemos que hacer es decir este punto tareas que para cada uno de aquí. Bien. Y dentro de esto, voy a tener una función, y voy a decir índice de tareas. Entonces tarea e índice por aquí es algo que se va a pasar. Bien. Y voy a tener función de flecha. Bien. Y dentro de esto, voy a decir const Li Bien. Y voy a decir documento punto obtener elemento por ID. Lo siento, no voy a ser get element by ID porque no hemos creado LI. Entonces dentro de UL, tendrás elementos LI, ¿verdad? Entonces voy a decir crear elemento por aquí. Diré que crea a Li por aquí. Bien porque quieres renderizarlo como una lista. Y luego voy a decir Litt contenido de texto. Y luego voy a decir tarea punto texto por aquí. Bien. Y luego voy a decir que punto en clic por aquí. Bien, también necesitamos agregar al hacer clic a la lista de aquí porque al hacer clic de eso, la sesión de tareas toggle, así voy a decir esta tarea de alternar punto, y voy a pasar en el índice del click por aquí. Esto está hecho. Bien. Ahora, voy a decir si la tarea está terminada, ya estaremos aquí. Bien. Entonces puedes agregar la lista de clases I'll i dot. Entonces voy a agregar la clase por aquí. Bien, punto agregar. Diré terminado. Estoy agregando una clase a este elemento HTML si la tarea está marcada como completada. ¿Bien? Así que aquí estás agregando clase como ID class por aquí para CSS. Eso es lo que estoy agregando aquí desde el Javascript. Entonces se puede decir elemento punto lista de clases. Estás agregando esto a la lista de clases, terminada. Y entonces podemos tener CSS contra esto. Esto tiene sentido. Y luego por aquí, se puede decir lista de tareas por aquí, tot up y child Algo así. Voy a añadir esto a la interfaz de usuario. Bien. Pongamos a prueba esto. Diré prueba. Se puede ver que la prueba se está renderizando 100. Esto también se está renderizando. Bien. Entonces esto se está renderizando dos veces por aquí. Ahí está esto se rindió dos veces. Entonces hay un problema. ¿Bien? Entonces el problema es que el HTML no se está aclarando por aquí. ¿Bien? Entonces espero que entiendas la importancia de esta declaración de aquí ahora. Esto no está funcionando en realidad. Y se puede ver se vuelve a renderizar toda la lista. Entonces si agrego 200 por aquí, se puede ver prueba, 100, 200. Es re renderizar todo. Bien, siempre que estés agregando la tarea. Entonces no va a ser esto.en HTML. Será taskls dot HTML. Si guardo esto, puedo decir prueba. Se agrega prueba. Si veo 100, sumará 100. Ya puedes ver que está funcionando bien. Todo bien. Ahora, las tareas también se están marcando como completadas, pero lo de finalización tendrás que manejar en CSS porque hay una clase que se está agregando, o por aquí. Si le echas un vistazo a la clase, bien, déjame mostrarte. Entonces aquí estás viendo el Li por aquí. Son 100, ¿verdad? De hecho, da click en este 100. Bien. La clase aún no se está agregando aquí. ¿Bien? Debería agregarse. Así que en realidad al hacer clic de esto, completado debe ser agregado como un nombre de clase por aquí dinámicamente. Pero esto no está pasando. Veamos cuál es el tema. hacer clic, estamos viendo que alternar tareas, y por cada tarea completada, se debe agregar la lista de clases. Esto está bien. Bien, por aquí, veo que esto es mayúscula C. Esto no está bien. Esto debería ser pequeño. Bien. Ahora veamos qué pasa. Entonces aquí no hay tarea por aquí. Déjame agregar una tarea. Voy a añadir prueba. Bien. Tengo una tarea. Si hago clic en él, puedes ver que la clase está terminada para esto. Se puede ver. Ahora bien, si agregas cualquier CSS para la clase completada, puedes agregar el CSS de strike through. Entonces aparecerá como strike through, porque has aplicado ese CSS. Solo hay que decir clase para elementos, teniendo clase esta terminada. Bien, necesitas agregar ese tipo de efecto completado en el CSS. Muy bien, así será manejado. ¿Bien? Entonces la aplicación está casi terminada, ¿de acuerdo? Ya terminamos con la aplicación. Se puede ver que todo se está haciendo. Toda la funcionalidad está funcionando bien. Bien. Ahora nos dirigiremos a CSS, y agregaremos algunos estilos básicos a nuestra aplicación. Todo bien. Ahora comenzaremos con la etiqueta corporal por aquí. ¿Bien? Por supuesto, familia de fuentes, y veremos a Ariel Helveta, Albatica Si esto está bien, bien, texto o línea. Yo diré Cena por aquí. Voy a agregar Vaya, no resolución máxima, sino margen por aquí Diré cero. Bien. Y déjame agregar relleno. Diré 20 píxeles. Bien. Déjame ver y ver qué pasa. Bien, un poco de cambio. Oh, puedes agregar color de fondo o lo que quieras. Voy a añadir es azul. Bien. Se ve un poco azulado. Si quieres algo más, uh, como por aquí. Ver. Tan blanco antiguo. Puedes agregar esto también. Bien. Dependiendo de tu elección, lo que quieras. O pantalla, voy a mantener la pantalla para flexionar por aquí. Bien. Flex dirección es voy a decir columna. Bien. Y luego alinear los elementos, voy a decir centro. Voy a guardar esto. Bien. Esto está hecho. Cada uno. Bien. Entonces a cada uno, solo le asignaré explícitamente un color. Voy a llamar a este color como negro. Bien. Esto está hecho. Todo bien. Ahora, vengamos por aquí. Voy a ver esto. Si vienes por aquí, ahí está este contenedor de tareas. Voy a conseguir este ID de contenedor de tareas por aquí. Bien. Diré hash. Así es como te refieres a cualquier ID de elementos en CSS con la ayuda de hash. Bien. Diré display flex, y necesitamos agregar necesitamos justificar el contenido. Diré centro. Bien. Entonces esto ahora viene en una sola línea, como pueden ver aquí. Y voy a decir margen inferior. Bien. Y esto será de 15 píxeles. Bien. Entonces esta en realidad no es una vista de pantalla completa, pero si te dirigías a la vista de pantalla completa aquí, si me refresco, puedes ver que así es como está apareciendo en este momento, y solo puedo agregar una tarea. Se puede ver. ¿Bien? Entonces sí, así es como se ve ahora mismo, margen inferior. Bien, esto ya está hecho. Puedo agregar un poco de estilo para entrada por aquí. Bien. Voy a decir tipo tipo es igual a texto, algo así, y voy a decir por aquí, relleno de diez píxeles. A ver si esto, bien. Diré ancho por aquí, ancho es de 200 píxeles. Bien. Diré frontera. Bien, el borde puede ser de un píxel. Bien, ya no hay frontera, ya lo ves. Bien. Ahora, una cosa más es, creo que también debería optimizarlo para un tamaño de pantalla más pequeño. Bien. Lo que voy a hacer es agregar media query por aquí, media y decir por aquí. Por lo que será de ancho máximo. Bien, algo como esto, y será tan ancho máximo de 600 pixeles. Bien. Así que voy a añadir un poco de estilo por aquí para lo mismo, ¿verdad? Entonces puedo decir contenedor de tareas hashtag. Bien. Diré dirección flex. Diré columna por aquí para que quede alineada verticalmente cuando básicamente el tamaño de la pantalla sea más pequeño. Entonces la caja de entrada de botón está alineada verticalmente porque no se veía bien, o, horizontalmente, básicamente vista de lado a lado, ¿verdad? Entonces acabo de agregar esto. Entonces está alineado horizontalmente por aquí, lo siento, alineado verticalmente cuando el tamaño de la pantalla es pequeño, pero horizontalmente así si el tamaño de la pantalla es ancho. ¿Bien? Entonces cuando el tamaño de la pantalla es pequeño, este CSS es aplicable. ¿Bien? Incluso puedo agregar CSS para esto por aquí. Bien. Entonces voy a introducir el tipo de texto ancho es relleno no necesito. Me saltaré el relleno. El ancho es del 100% por aquí. Margen por aquí. Entonces voy a decir que el margen es de cinco píxeles y cero. Uh, así. Y puedo decir UL. Entonces la lista desordenada puede ser de ancho, 90%. Algo así. Bien. Entonces esto está hecho. ¿Bien? Esto es para tamaño de pantalla pequeña. Voy a volver por aquí. Bien. Entonces estaba diciendo pólvora de un pixel. Bien. Diré sólido por aquí, y tendré esta frontera por aquí. Esto se ve bien, ahora mismo, ya se puede ver. Se ve bien. ¿Bien? Tenemos que agregar algunas cosas más como radio. Bien, radio de cinco píxeles, por ejemplo. Bien, cinco píxeles se ven decentes en mi opinión si te ahorras esto, ¿verdad? Y voy a añadir margen así margen por aquí, margen de, digamos, diez píxeles. Bien. Esto está hecho, supongo. Todo bien. La entrada está hecha. Ahora vamos a darle estilo al botón por aquí. Entonces, ¿cómo nos estilo botón. Bien. Entonces botón podemos decir, uh, relleno, voy a decir diez píxeles y 15 píxeles por aquí y color de fondo de azul. Bien. Y luego color de blanco. Si guardas esto, puedes ver. Pero el cuerpo no se ve bien, así que border no desactivará ninguno. Bien, la frontera se ha ido. Puedo tener radio fronterizo por aquí. Bien, píxel F, así. Y entonces puedo tener puntero de cursor. Entonces ahora mismo, no se está convirtiendo en un puntero. Pero si pasa el cursor ahora para ver, este cursor se está convirtiendo en un puntero Bien. E incluso puedo agregar botón botón efecto colin hov Bien, entonces voy a decir color de fondo. Es azul oscuro. ¿Bien? Entonces, si se ciernen, va a venir como azul oscuro Straicionero. Ahora, voy a añadir un poco de estilo para la lista aguantada Voy a copiar esto. Bien. Y aquí, vamos a tener ancho como 50%, y voy a decir tipo de estilo de lista como ninguno por aquí. Bien, entonces no quiero que esos puntos vengan. Entonces voy a decir tipo de estilo de lista, ninguno. Eso no se ve bien. Diré relleno como cero. Bien. El ajuste es del 50% y el margen es cero. Auto. Bien, esto está hecho. Y si, creo que esto es todo. Solo necesitamos agregar un CSS para completar. Bien. Entonces voy a decir terminado. Artículo por aquí. Voy a añadir esta tarea, y voy a hacer clic en ella para que esté marcada como completada. Muy bien, entonces voy a decir terminado. Bien. Entonces me refiero a clase terminada como este punto terminado. Así es como te refieres. Diré decoración de texto, así que tengo que pasar por alto, ¿verdad? Así que voy a decir por aquí, línea a través. Eso es lo que es el nombre de la propiedad. Bien, así que ambos consiguen el strike through, supongo que ambos están marcados como completados. Entonces voy a decir prueba. Bien, esto no está terminado, y puedo decir completarlo. Tarea bien. Estas son algunas tareas ficticias que estoy agregando. Si hago clic en esto, verás que esto está terminado. ¿Bien? Si marco esto como completado, verás que esto está terminado. ¿Bien? Entonces esto está funcionando bien. Decoración de texto terminada. Diré color como gris. Bien, algo como esto, esto debería verse decente, sí. Bien. Supongo que esto se ve bien ahora, ¿verdad? Puedo añadir más. Bien, entonces se está sumando la tarea. Bien. Se puede ver. También podemos agregar estilo para cada tarea aquí. Bien. Entonces lo que puedo hacer aquí es después de UL por aquí, puedo agregar LI. Bien. Puedo ver que el estilo para cada tarea podría ser relleno de diez píxeles. Bien. Puedo agregar frontera por aquí, borde de un píxel, sólido, y podría llamarlo como humo blanco. Se puede ver. Bien, esto en realidad no se ve tan bien. Entonces tengo un código de color, TTT. Voy a añadir eso. ¿Bien? Pero esto no es entonces quedar bien en el fondo, si le echas un vistazo, ¿de acuerdo? Entonces lo que puedo hacer es desplazarme hacia arriba por aquí, y voy a cambiar este fondo a hash puedo decir un cuatro, un cuatro, cuatro, algo así. ¿Bien? Tipo de color blanco azulado Esto se ve decente ahora. Bien. Entonces por aquí, necesito agregar radio. No me parece demasiado cuadrado , demasiado cuadrado, ¿verdad? Entonces lo que puedo hacer es agregar un radio de probablemente cinco píxeles. A ver. Bien. Radio de cinco píxeles. Guarde esto. Bien. Y entonces puedo decir margen por aquí. Cinco píxeles y cero por aquí. Esto se ve decente ahora. Se puede ver. Además, si pongo el cursor sobre esto, idealmente, deseo tener el puntero del cursor Diré I Cursor. Puntero. Ya ves que viene un puntero, ¿verdad? Entonces se ve genial ahora. ¿Bien? Al menos decente, diría yo. Bien. Yo solo refrescaré esto y puedes tener tarea predeterminada también agregada por aquí si así lo deseas. Entonces aquí en JavaScript, lo que puedo hacer es puedo agregar puedo llamar al método. Bien, entonces puedo decir todo app dot at task por aquí. La tarea predeterminada es aprender JavaScript. Algo así. Bien. Se puede ver. Entonces se agrega ahora. Siempre que cargues la aplicación, esta sería la tarea predeterminada que se agrega. ¿Bien? Y puedes agregar tarea o aprender C shop, por ejemplo, aprender Java. Bien, puedes marcarlos como completos. Entonces espero que esto sea útil y espero que hayan disfrutado construyendo esta aplicación Studo conmigo usando, por supuesto, Ja Script, HTML y CSS 11. Conclusión del curso: Y eso nos lleva al final de este increíble curso en el que exploramos infinitas posibilidades con funciones de Jascript A lo largo de este curso, profundizamos en el corazón de las funciones de JavaScript, donde exploramos todas las funciones desde lo básico hasta temas más avanzados como parámetros, valores de retorno, expresiones de funciones y funciones de flecha también Incluso nos aventuramos en el mundo de las funciones dentro de los métodos de objetos y matrices, asegurando que tenga una comprensión integral de cómo escribir código modular y eficiente Pero nuestro viaje no se detuvo ahí. También hicimos un par de proyectos prácticos donde vimos en todos los conocimientos o todo lo que hemos aplicación todos los conocimientos o todo lo que hemos ganado en este curso . Y estos proyectos no sólo reforzaron tu aprendizaje sino que además te dotaron de conocimientos prácticos y comprensión. Y estos proyectos son proyectos de este tipo que incluso puedes utilizarlos en tu cartera. Recuerda, el dominio de cualquier habilidad de programación es solo un comienzo El verdadero poder de JavaScript radica en la experimentación y la práctica continuas. Te animo a seguir construyendo, seguir refinando tu código y a seguir haciendo uso de las cosas que has aprendido hoy en día en los proyectos que construyes. Gracias por ser un aprendiz comprometido y entusiasta lo largo de todo este curso Espero que hayas ganado suficiente confianza en tus habilidades de guión laboral y estés emocionado de abordar proyectos aún más desafiantes en el futuro. Con esta clase, tienes un proyecto de clase que encontrarás en la sección de proyectos, cual te animaría a completarlo y compartirlo con toda la clase de ahí. Así que ese es el final de nuestro viaje juntos, codificación feliz, y todo lo mejor.