Aprender React puede ser teóricamente muy complicado si no dominas algunos conceptos básicos de JavaScript. En este artículo, le mostraré qué temas de JavaScript debe conocer para sentirse cómodo leyendo que este no es un curso básico de JavaScript, por lo que no explicaré qué son los tipos de datos condicionales, los bucles y el código básico. Si no conoces estos conceptos, te dejo con el curso básico de JavaScript en la descripción. Este es solo un tutorial de conceptos que se usan ampliamente en JavaScript.

$ads={1}

cuando se estudia o se trabaja con React empecemos configurando nuestro proyecto lo primero que voy a hacer es venir aquí en mi escritorio y voy a crear una carpeta nueva en mi caso el proyecto lo voy a llamar js for read vamos a arrastrarlo dentro de nuestro editor de código en mi caso voy a estar utilizando visual studio code y a partir de aquí voy a crear unos tres archivos el primero va a ser un index.html el segundo va a ser un index.hu ss y el tercero va a ser un index js entonces de esta forma voy a tener los tres típicos archivos para poder crear un sitio en el caso de html voy a colocar una estructura básica de html5 así que simplemente voy a ir a html 2.5 y aquí voy a colocarle un título que diga jsf riad vamos a colocarle un h1 en el bad y voy a decirle j s vamos a guardar y vamos a enlazar el css en mi caso por ejemplo voy a crear aquí una clase bastante sencilla que le diga aquí al bad y le vamos a colocar un background de color 20-20-20 este es un color oscuro y en el index punto js voy a colocar simplemente un mensaje por consola que diga hola mundo listo entonces a partir de aquí vamos a enlazar los tres archivos en el index e.html así que voy a venir aquí debajo del title le voy a decir voy a crear etiqueta link y éste va a llamar a punto es last index css vamos a guardar y debajo de él h1 voy a decirle que voy a crear una etiqueta script que va a llamar a puntos las index.hu tae-se ahora estoy yo de aquí estos tres archivos yo lo puedo abrir con mi navegador sin embargo nuestro caso vamos a estar utilizando una herramienta o extensión de visión estudio code que se va a encargar de vigilar nuestros archivos y si yo hago un cambio éste va a reflejar los cambios en el navegador entonces esa herramienta se llama live server pueden buscarla entre sus extensiones como live server y aquí va a llegar en esa extensión de aquí vamos a ver en instalar y lo único que va a hacer esta extensión es añadir una nueva opción dentro de visual studio code yo simplemente voy a cerrarlo ya está instalado y ahora si bien en esta parte inferior de visual studio code va a haber una opción que dice el cou live si doy un clic esto lo que va a hacer es abrir el navegador en el puerto 5500 y ahí está el html hecho aquí no se ve muy bien el js así que voy a colocarle también aparte del val ground un color que sea de color blanco por ejemplo white y si guardo y veo en el navegador pueden ver que inmediatamente se aplica los cambios y la ansiedad de que yo esté refrescando la página entonces a partir de aquí lo que voy a hacer es ordenar las ventanas para enfocarme en las siguientes secciones en poder explicarles que necesitan saber de javascript para poder utilizarlo en riad así que vamos a venir aquí en nuestro editor de código voy a sacar esas tres pestañas voy a dar un clic aquí en el explorador voy a presionar la tecla windows y la flecha izquierda de mi teclado y esto lo que va hacer es colocar el editor en la parte izquierda luego voy a hacer lo mismo con el navegador la tecla windows y la flecha hacia la derecha y finalmente en estos tres puntos vamos a venir en más herramientas herramientas para desarrolladores y eso abrirá la consola si venimos en estos tres puntos pueden ver que aquí me muestra cómo unos layouts para poder mover la consola en mi caso colocar ese tercero y pueden ver que la consola se va hacia la parte inferior entonces de esta forma voy a tener en la parte superior el navegador en la parte derecha inferior en la consola y en la parte izquierda el editor de código entonces vamos a continuar en la siguiente sección con los conceptos básicos de javascript una de las instancias que más va a estar utilizando de javascript cuando trabajes en riad son las funciones así que muy importante saber cómo crearlas y cómo llamarlas primero vamos a venir nuestro archivo de javascript y vamos a crear unas funciones básicas vamos a crear una función sencilla que se llame hello y esta función lo único que va a hacer es mostrarme por consola un mensaje que diga hola mundo si yo guardo esto de aquí pueden ver que esto no me devuelve nada hasta que yo llamé esta porción de código recién me va a devolver este mensaje entonces aquí nosotros para poder ejecutarlo simplemente llamo hello y le colocó paréntesis y esto es para poder llamar esta función entonces si yo guardo esto me da igual el texto le mundo una de las razones de por qué utilizar funciones es porque me permite reutilizar lógica por ejemplo si yo aquí luego creo otro mensaje que diga por ejemplo ir trabajando con javascript o con james y guardó él me puede mostrar ese otro mensaje entonces en lugar de estar repitiendo este mensaje varias veces yo puedo simplemente llamar la función varias veces y pueden ver que se va repitiendo estos dos mensajes en cada llamada de función entonces esto me permite reutilizar la lógica que escrito aquí eso es el trabajo de las funciones las funciones no tan sólo ejecutan lógicas sino que también me pueden retornar algún valor por ejemplo si yo quito estos valores de aquí y también quito este con solo aquí y en lugar de decirle que va a ejecutar un con solo le voy a decir que me va a retornar un valor pues voy a decirle quiero que retorne y aquí por ejemplo voy a decirle que va a retornar un string entonces aquí le digo vas a retornar un texto que diga hola mundo un string si yo guardo esto pueden ver que ahora ya no aparece nada y es justamente porque este hello al ejecutarse me está retornando un texto y nada más no le estoy diciendo que lo muestro por consola si yo quisiera decirle que me muestre el texto por consola al final este valor o lo que me está de gaulle en esta función lo tendría que guardar por ejemplo lo puedo guardar en una constante que se llame resuelto y luego podría mostrarlo por consola y allí sí recién podría verlo otra forma también sería evitar guardarlo y directamente recibir el valor es decir este hello me va a devolver un stream entonces yo directamente se lo pasa el consell off y me evito guardarle una constante ahora no necesariamente tienen que devolverme un stream también puede volverme cualquier otro tipo de dato de llevas que por ejemplo un número por ejemplo 20 o 20.3 o también me puedes devolver un pool ya no por ejemplo true guardo o falls también me puede devolver un arreglo como pueden ver con valores incluso 1 2 y 3 o también podría devolver un objeto es decir me puede haber unas llaves abiertas y cerradas que significan un objeto vacío o también podría decirle que me devuelve un objeto con algún valor por ejemplo name ryant y esto me devuelve un objeto o una de las cosas más interesantes que tienen las funciones de javascript es que una función también puede retornar otra función es decir en lugar de tan solo retornar un objeto yo le puedo decir que también me puede tomar otra función y esta función de aquí me a su vez como es una función de puerto otro valor por ejemplo me podría retornar un texto que diga hola mundo entonces si yo lo ejecutó pueden ver que lo único que hace es que esté hello al momento de ejecutarse llega en esta parte y dice ok te voy a doblar una función y esta función es la que estamos viendo aquí en consola entonces como hace una función yo le digo que lo que estoy recibiendo aquí es una función entonces nuevamente puedo volver a ejecutar esa función simplemente colocando otros paréntesis porque recuerden que primero me duele una función y esa función que me devuelve la estoy ejecutando entonces yo guardo recién voy a poder ver el hola mundo ahora estas instancias que tenemos aquí parece una sintaxis un poco extraña y que no se va a utilizar mucho de hecho es uno de los fundamentos de lo que se conoce como programación funcional y riad como utiliza mucho ese paradigma pues van a estar utilizando mucho esta idea de una función que ratón otra función en realidad no va a tener que escribir de esta forma esto es tan sólo una idea es mucho más fácil en la práctica pero si deberían tener al menos la noción de que una función en javascript puede retornar a su vez otra función esto en riad lo vamos a estar utilizando mucho cuando cree en algo que se llama componente este no es un curso de read así que tan sólo les estoy explicando la base de javascript ya luego cuando estudian rías van a ver que este tipo de ideas vienen muy unidas a la biblioteca otro concepto también bastante utilizado en javascript cuando trabajamos con las funciones es la posibilidad de recibir parámetros los parámetros son dos o los valores que nuestra función puede esperar para procesarlos por darles una idea aquí en lugar de retornar una función vamos a modificarlo y luego decir que este hello lo que va a retornar es un texto que diga hola concatenado con algún valor en este caso yo no sé qué valor voy a estar concatenando así que le voy a decir a esta función hello que voy a esperar un nombre en este caso puede llamarlo name el parámetro de una función podemos nombrarlo de cualquier manera podemos llamarlo x y z o en español nombre por ejemplo pero por lo general es bastante común también ver los nombrados en inglés así que en este caso voy a llamarlo name entonces lo único que va a hacer mi función es concatenar el texto hola con el valor name entonces al momento de llamar la función simplemente le digo que voy a ejecutar hello y espero un parámetro de hecho aquí en el suyo code pueden ver qué me dice ok al ejecutar tu función esto espera un parámetro name entonces en este caso como aquí está concatenado voy a decirle que voy a pasarle un string y voy a pasar un nombre por ejemplo ryan si yo guardo pueden ver que dice hola ryan si yo quiero volver a ejecutar esto le puedo pasar otro nombre le digo que también quiero pasar el nombre jesús pueden ver que dice hola jesús luego también si quiero colocar otro nombre nuevamente igual o ejecutar y cambio el parámetro le colocó maria y pueden ver que así es como voy ir ejecutando la misma función pero el valor que le voy pasando lo va procesando distinto ahora no necesariamente tiene que ser un parámetro yo le puedo pasar múltiples parámetros por darles una idea voy a quitar este ejemplo y voy a crear otra función que se va a llamar sumar o at y esta función va esperar dos parámetros equis y ya cuando le digo que voy a esperar dos parámetros lo tengo que separar por comas y de esta forma le digo ok esto espera dos parámetros aquí en el cuerpo de la función le voy a decir que va a tener que hacer alguna operación en este caso yo voy a decirle que va a retornar la suma de x + y entonces de esta forma tengo una función si yo quiero ejecutarlo le digo que por consola vas a devolver o me vas a mostrar lo que te devuelve a la función at y en este caso voy a decirle voy a pasar los parámetros 10 y 20 y si yo guardo esto me devuelve 30 entonces yo puedo reutilizar esta función varias veces y le digo que también quiero que sumes 4 y 5 o también quiero que sumes y 7 por ejemplo y pueden ver que aparecen estos múltiples valores un asunto bastante común que tenemos con las funciones en javascript es que algunas veces cuando estamos ejecutando funciones que reciben múltiples parámetros a veces no sabemos si debemos pasar más parámetros o a veces también simplemente nos olvidamos de pasar un parámetro por darles una idea supongamos que voy a estar ejecutando esta función con el parámetro 10 y 20 es igual 2 tomás devuelve 30 pero supongamos que yo no sé cómo funciona esta función o simplemente me olvidó de colocar otro parámetro y si yo guardo esto pueden ver que me devuelve nando la razón de que me devuelvan an es porque el momento de ejecutar la función el espera dos parámetros pero yo sólo estoy pasando uno pero de hecho esto me está devolviendo nan porque aquí x tiene el valor 10 pero ye como no existe es decir aquí al lado no hay ningún otro parámetro él lo coloca con el valor de undefined o no definido entonces es como si yo estuviera pasando este valor de hecho si yo le colocan defined y guardo obtengo el mismo resultado e incluso lo pueden ver aquí en consolas y tipean 10 + undefined pueden ver que en este caso les devuelven a entonces una forma de evitar este problema es simplemente diciéndole que ok la función también puede funcionar si en ese segundo valor entonces yo podría colocar aquí una condicional y validar lo podría decirle sí que es igual a undefined entonces yo le voy a decir que lleva valer 0 entonces si yo guardo esto pueden ver que ahora me sigue devolviendo días entonces yo puedo pasarle tanto 20 y me va a devolver el mismo valor o si yo le pasó 20 más 30 por ejemplo me devuelve la ejecución de esa función ahora es solucionado ese problema pero la función se queda con una condición al extra y con tres líneas de código más entonces por suerte en llevas que nosotros tenemos una forma de asignar valores por defecto de esta forma yo puedo quitar esto de aquí vamos a quitarlo y si yo quiero decirle que yo si no le pasa nada va a tener un valor por defecto le puedo colocar un igual 0 y si yo formateo esto quedaría esta forma y si yo guardo pueden ver que el valor es el mismo de hecho si yo le quito el valor 30 y tan solo me quedo con 20 pueden ver que me sigue dando ese mismo valor ahora los geniales que puedo hacer para todos los parámetros que quiera o requiera en este caso por ejemplo puede decir que x por defecto va a valer cero aunque también podría darle otro valor como 10 20 o 23.3 por ejemplo entonces si yo guardo pueden ver que aquí me da 20 porque tan solo estoy pasando un valor pero no le pasó nada si está solo ejecutó y guardó pueden ver que me that 23.3 porque es 23.30 que es justamente lo que es de la función pero si paso dos valores como 10 y 20 y guardo pueden ver que me dan la respuesta de 10 y 20 entonces esto es tan sólo un ejemplo para que puedan ver que también puede asignar valores por defecto a los parámetros otro concepto de jaws que se utiliza bastante en riad son los objetos de javascript para darles una idea primero vamos a eliminar este código de heap y voy a crear un objeto básico los objetos havas que nosotros representamos con llaves y aquí nosotros podemos guardarlo en variables jueguen constantes por ejemplo yo puedo crear una constante y usher que va almacenar un objeto este objeto puede tener algunos valores que por lo general están representados en pares de clave y valor es decir yo puedo colocar aquí un nombre x y un valor que sea 20 entonces éste vendría a ser la clave y este el valor o en inglés kyi value ahora yo puedo almacenar lo que quiera dentro de este objeto y usuario juego y usher y lo que voy a estar almacenando por lo general tiene el nombre de propiedad es decir todos los valores que guardamos dentro de un objeto o valores que describen el objeto se le conocen como propiedades por ejemplo en este caso si yo quiero que un usuario tenga un nombre le digo name y colocó un nombre supongamos le digo ryan luego también puedo colocar un apellido por ejemplo le digo pérez en este caso estoy colocando las claves en inglés pero podría también colocarlo en español como nombre y apellido ok pero bueno en este caso voy a dejarle en inglés porque me es más cómodo de esta forma luego me vamos a colocar a una edad que sea en 30 por ejemplo luego vamos a colocarle una dirección y en cuanto a la dirección vamos a colocar otro objeto como pueden ver es por eso que he colocado nuevamente las llaves es decir en un objeto nosotros podemos colocar más objetos y bueno aquí nosotros podemos colocar por ejemplo otras propiedades como podría ser un country en un país vamos a colocarle colombia por ejemplo vamos a colocar una ciudad vamos a colocarle bogotá vamos a colocarle una calle voy a colocarle una calle main street' 123 supongamos y también lo puedo colocar una propiedad que podría ser una lista de amigos por ejemplo le puedes ir puede colocar una propiedad friends que va a ser un arreglo o una lista y aquí le voy a decir que va a tener unos nombres de amigos por ejemplo lewis y brandon le voy a colocar también aquí elena por ejemplo y esta sería la lista de amigos de este usuario supongamos que es una aplicación de una red social luego también le podría colocar una propiedad de moulian o por ejemplo puede ser ok es tema tiene una propiedad llamada active y puede ser true o puede ser falsa en este caso le voy a colocar dentro y algo interesante que tienen los objetos es que así como yo estaba almacenando o le estoy asignando strings números objetos o también bull ya nos también le podría asignar a una propiedad una función estos aquí supongamos yo le digo que este va a tener una propiedad que se va a llamar enviar correos supongamos que es un dato que está perteneciendo una red social y aquí él puede enviar correos entonces decir ok el tiene tiene una propiedad llamada hacen mail y como valor voy a colocar una función entonces esta función lo único que va a hacer es retornar un stream que diga por ejemplo enviando emails sending email y tres puntos entonces si yo guardo esto y quiero mostrarlo aquí en consola simplemente le digo consola blog y adentro le pasó el objeto y usher si yo guardo esto pueden ver que aquí en la consola del navegador está el objeto que acabó de crear entonces de esta forma yo podría luego empezar a utilizar estas propiedades que he creado para mostrarlo en pantalla o poder empezar a alterar estos datos entonces de esta forma yo he creado un objeto básico de javascript pero lo importante también es entender cómo acceder estos valores tenemos dos formas de acceder la primera forma es utilizando la anotación de punto que sería colocar el nombre del objeto y luego por ejemplo si yo quiero acceder a neil le diría user punto name y si guardo pueden ver que acceder valor ryan o si coloco y user punto address y guardo pueden ver que me devuelve un objeto porque me devuelve un objeto porque address es justamente otro objeto entonces si yo quiero acceder así te podría decir lo que el usuario the address como es este objeto de aquí quiero acceder a city que sería address punto city sí guardo pueden ver que directamente me dice bogotá que vendría a ser esta propiedad de keep entonces de esta forma yo puedo acceder a otros valores por ejemplo digo también quiero hacer de user a sus amigos les digo friends guardo y ahí están sus amigos o también podría acceder a este valor active le digo que de usuario quiero acceder a active y si guardó también me dice true o si quiero acceder a esta función le puede decir ok de usuario quiero acceder su valor llamados en mail y si yo guardo pueden ver que en este caso me devuelve la función porque esto almacenaba una función pero no lo está ejecutando tan sólo me está devolviendo el código de la función si ya lo quiere ejecutar le digo de esta propiedad como es una función llamamos los paréntesis y sí guardo pueden ver que ahora en lugar de mostrarme la función me está devolviendo el texto que devuelve la función es decir ejecutado esta lógica ahora algo que debe saber es que hay una nueva forma de escribir esta sintaxis de aquí por ejemplo yo puedo escribir evitando el nombre de la función y simplemente aquí viendo estos paréntesis y estos como hicieron que tienes una propiedad que está almacenando una función y está retornando algo de hecho todos estos que son pares de clave y valor y tan solo son datos es decir no son funciones se le conocen con el valor de properties o propiedades y estos que ejecutan funciones se le conocen con el nombre de métodos en resumen esto es lo único que debería saber de forma básica acerca de los objetos pero si quieren ahondar en más detalles de cómo funcionan los objetos en javascript le dejo el curso de llaves que orienta a objetos en la descripción para que puedan ahondar en este tema muchas veces cuando trabajamos como objetos en jaws trip hay veces en las que necesitamos crearlos a partir de otros datos portal es un ejemplo vamos a quitar esta porción de código de kim y voy a crear dos constantes en este caso cada constante va a representar el dato relacionado a un producto entonces supongamos que aquí yo tengo una constante name que representa el nombre de un producto vamos a llamarle laptop y aquí voy a colocar también otra constante que se llama price o precio y vamos a colocarle un número por ejemplo voy a colocarle 3000 entonces yo podría utilizar estos dos datos para poder crear un objeto nuevo podría crear una constante que sea medio producto que va a ser un objeto y como kyiv al yo voy a colocar un nombre y como valor una de estas constantes por ejemplo supongamos que aquí yo digo que este nuevo producto va tener una propiedad name y en lugar de escribirlo le digo que va a tener el valor name que está aquí entonces le digo va a utilizar como valor esto parece algo confuso porque tiene name me name pero recuerda que este es el nombre del key y este no hace referencia esta constante que también podría ser una variable perfectamente pero si no va a estar alterando ese valor no hay ningún problema con que le coloque una constante luego también podría ser lo mismo con el precio le digo va a tener también un key y como valor va a ser lo que tenga almacenado está constante entonces le digo price entonces ahora si yo quiero mostrar este valor simplemente colocó aquí un mensaje por contable le digo muéstrame new product y si yo guardo pueden ver que parece un objeto con una propiedad name y una propiedad price ahora hay una forma mucho más sencilla de declarar una propiedad en javascript simplemente quitando este name y este price entonces puedo quitar esos dos puntos y esto es lo mismo que colocarme en dos puntos name y price 2 puntos price esto es justamente se puede hacer cuando tenemos un key con un nombre y el valor que le estamos asignando que viene a partir de una variable por ejemplo tienen lo mismo entonces esto se puede resumir de esta forma y es algo bastante común también en código de frontera entonces como pueden ver el resultado es el mismo pero me ha ahorrado al menos unos cuantos caracteres además que es mucho más fácil de leer otro concepto también de havas que vas a necesitar cuando trabajes con riad es entender para qué sirve javascript cuando trabajamos con él en el front end y la idea principal de javascript es poder manipular el navegador o mejor dicho manipular el don o el document objet model que es básicamente el documento que nosotros generamos como html entonces para darles una idea voy a quitar este código de aquí vamos a guardar queda limpio y ahora lo que voy a hacer es crear aquí una interfaz que me permita poder modificar este documento como este javascript en la primera sección o una de las primeras secciones vimos cómo enlazarlo con códigos de html entonces éste ya óscar y de aquí puede alterar el código de html por ahora voy a quitar este archivo no vamos a dejarlo limpio ok ya no está ok vamos a guardar y vamos a volver código de austin y ahora voy a generar la interfaz con javascript para poder hacer esto nosotros debemos saber que cuando trabajamos aquí dentro del navegador nosotros ya tenemos código que podemos acceder objetos que podemos utilizar por ejemplo si yo veo aquí en la consola y escribo document pueden ver que aquí se coloca todo esto este documento o esta parte seleccionada ok porque esto hace referencia justamente a este documento entonces por ejemplo si yo quiero ver el documento el título y doy un enter pueden ver qué me dice jsf riad porque es justamente el título del documento entonces así como yo puedo acceder desde la consola también puedo acceder desde ya austria voy a mover un poco hacia la derecha el editor simplemente para tener un poco más de espacio aquí en el editor y aquí lo que voy a hacer es que puede tratar de recrear una interfaz dentro este documento utilizando javascript si nosotros llevamos este documento yo puedo llamar a su función llamada create element este clic element permite crear elementos de html de hecho si yo el ejecutó es una función y escribo aquí un sprint y presionó contra el espacio esto me da una serie de autocompletado de todas las etiquetas que yo puedo crear y pueden ver que aquí de hecho están etiquetas como h1 h2 h3 o también las etiquetas head o header una etiqueta html con la etiqueta input etcétera es decir a partir de aquí yo puedo crear etiquetas de html utilizando javascript por darles una idea yo puedo crear un h 1 este hecho 1 yo lo puedo guardar una constante llamada title por ejemplo y ahora si yo quiero mostrarlo por contarles pues ir con soft title si yo guardo pueden ver que aquí ha creado un h1 de hecho esto no tan sólo es un texto h1 si no realmente es un elemento de tal forma que yo puedo añadir este documento por darles una idea aquí le digo que no quiero que lo muestre por consola sino utilizando este documento le voy a decir que en el cuerpo en el bad y voy a estar añadiendo puede ser leap en un título y este título es justamente un h1 que he creado yo mismo ahora si yo guardo esto no vamos a ver nada pero si yo vengo aquí en las opciones del navegador en elementos y vamos a ver que dentro del bad y hay un h1 ok sólo que como no tiene un texto no vemos nada pero vamos a volver la consola para poder verlo simplemente voy a decir lo que a este título voy a colocarle adentro un linier text steiner text es para decirle que voy a colocarle un texto a mostrar y aquí le voy a decir hola mundo desde js si yo guardo pueden ver que ahora se ha creado un elemento y de nuevo si vengo en la sección de elementos del navegador pueden ver que aquí está el h1 con el texto hola mundo si yo vuelvo la consola también puedo acceder desde aquí le digo que quiero desde el documento quiero entrar en el valle y del vad y quiero acceder a su elemento que en este caso sería este objeto h1 entonces lo importante es entender qué y tengo tan solamente un texto que he podido crear utilizando javascript ahora así como tengo esto también puedo crear otros elementos como un botón por ejemplo vamos a de nuevo llamada documento le digo que voy a crear otro elemento y en este caso voy a crear un botón vamos a crear un botón esto de aquí lo voy a guardar y vélez constante que se llame botón o button a este botón también le voy a colocar un linier text y voy a colocarle un texto que diga clic entonces yo quiero añadirlo le digo document voy a añadir entubada un elemento o como pen y le digo que va a añadir en este caso el elemento button si yo guardo esto pueden ver que aquí debajo se ha creado un botón y de nuevo esto de aquí es una interfaz de html que fácilmente lo podría crear con el documento pero aquí este código de jaws que me permite recrearlo tan solo con puro código ahora si yo quiero por ejemplo sé que este botón algo yo puedo venir aquí en el botón y puede añadir una escucha esto de añadir escucha se le conocen con el nombre the event handlers o manejadores de eventos ya que las interfaces nosotros cuando interactuamos con ellos podemos hacer cosas por ejemplo yo puedo seleccionar un elemento o puedo dar un clic o puedo arrastrar un elemento todos son interacciones o mejor dicho eventos que el navegador puede escuchar es decir todos los elementos de html al final pueden detectar todo lo que hacemos y de esta forma nosotros podríamos programarlos para que cuando hagan algo nosotros podríamos ejecutar otra lógica entonces por darles una idea cuando hago un clic y quiero que haga algo más entonces aquí ya lo podría decir en el botón quiero añadir un evento de escucha o una deben listener y si yo ejecuto esto que es una función y colocó un string y presiona contra el espacio aquí dentro de estos strings pueden ver que empiezo el estudio como me dice todos los eventos que este botón puede tener por ejemplo están los eventos focus es decir cuando ese elemento esté seleccionado o por ejemplo también hay eventos como los guías etcétera al final el que me importa en ese momento es el evento clic y esto es como decir cuando dé un clic en este elemento yo voy a querer ejecutar algo y eso se maneja con una función entonces aquí yo creo una función sencilla de javascript puede dejar un poco para que se vea mejor y bueno lo que único que estoy haciendo aquí es colocándole una función a este a deben listener entonces esto sale de esta forma al botón le añadí una escucha en su evento clic es lo mismo que decir cuándo en este botón quiero ejecutar esta función y aquí yo puedo llamar otras partes de la interfaz como podría decir por ejemplo quiero que me muestre por consola un texto que diga hola mundo si yo guardo esto no sé ningún cambio pero si me ven este botón clic y doy un clic puede ver que hizo el mundo de hecho si doy varias veces un clic pueden ver que va contando el mismo evento y los va agrupando con números esto significa que ejecutado ese mismo evento 17 veces y así ahora nosotros también podemos interactuar con otras partes es por eso que es muy importante conocer códigos de javascript para crear aplicaciones web porque en este caso en lugar de mostrar un texto por consola le puedes ir ok quiero que alteres el valor de title le puedo decir ok cuando dé un clic title en su inerte c's le vamos a colocar un valor que diga por ejemplo texto actualizado con js si yo guardo y vengo aquí en el navegador y doy un clic pueden ver qué me dice texto actualizado con js de hecho yo puedo hacer más le digo que luego que actualice también le vas a colocar una alerta y esta alerta va a decir por ejemplo y realizó un clic si yo guardo pueden ver que nuevamente vuelve al inicio gracias a la atención que instalamos inicialmente pero si doy un clic pueden ver que aparece la alerta leo detectar y luego me dice texto actualizado con js todo esto que tenemos aquí se le conoce como manipulación de tono porque estamos manipulando el documento el documento o bien móvil ahora eso es tan sólo un ejemplo muy sencillo realmente se puede extender mucho más ustedes a partir de aquí pueden crear sus propias bibliotecas o funcionalidades para reutilizar todo esto pero si llega a crear su propia funcionalidad para reutilizarlo estarían creando una biblioteca como rayado o como angular o como view de hecho es la razón de utilizar esos tipos de frameworks y bibliotecas porque no simplifica la forma de utilizar este código estándar de javascript entonces no es importante que nosotros conozcamos a detalle cómo funcionan todas estas funciones pero si necesitamos entender al menos para qué sirven y cómo utilizarlos con esto les da una idea de que ya vas que puede crear elementos puede guardarlos en constantes y también puede escuchar o puede añadir escuchas acerca de eventos que el usuario puede hacer con nuestra interfaz de esta manera nosotros podemos actualizar un valor como lo hicimos aquí con title o ejecutar una lógica el que viene a partir de la mediador como podría ser una alerta otro tema bastante común también cuando trabajamos con lleva script es que cuando creemos funciones vamos a recibir objetos y estos objetos pueden ser utilizados dentro del 'don't para darles un ejemplo basado de sencillo vamos a crear que un objeto que se llame y usar nuevamente esto que estoy yo ser por ahora vamos a colocarles tan solo un nombre que se llame joe por ejemplo y una edad vamos a colocarle 630 entonces si yo quiero utilizar esta información yo puedo crear también una función y esta función vamos a llamarle print info o imprimir información como un valor o como parámetro va a esperar esta función un usuario un yo ser que podríamos llamarlo también x llega lo que quiera pero en mi caso voy a colocarle y usar y aquí dentro de la función lo que voy a estar retornando en lugar de tan sólo mostrar un texto o un número y demás va a ser un elemento html que puede ser utilizado por el don estos en este caso podría retornar aquí entre un stream un elemento html decir puedes vivir de esta forma un stream con un texto 81 y éste h1 voy a decirle que aquí voy a colocar un texto que diga por ejemplo hola y voy a concatenar lo con el usuario sólo que la zona para concatenar dividir este entonces puedo colocar esta forma y aquí adentro le voy a decir que voy a estar concatenando con you ser punto name entonces aquí lo que voy a hacer es que cuando utiliza este print de informe vamos a llamar a la digo print info y le pasó el objeto y usher este objeto yo sé que tengo aquí entonces esto me va a devolver un string porque es justamente lo que estoy esperando entonces para ello mostrar este extremo por ahora voy a colocar un con sólo decirle un con sólo he adentro el principio y si yo guardo por con sólo vemos un h1 que dice hola joe que de hecho aquí me falta un espacio si yo guardo ahora si le deja un espacio ahora si yo quisiera mostrar esto en él donde simplemente voy a decirle documento punto body y aquí adentro del barrio voy a decirle que voy a colocarle este elemento entonces aquí algo es ir a penn por qué pen espera un elemento creado con javascript pero aquí yo puedo utilizar otro otra propiedad llamada inner html que es como decirle lo que voy a estar colocando a dentro de este bad y que él espera un string que sea un formato de html entonces aquí voy a colocarle lo que me devuelva print info y lo que le pase en giuseppe entonces al final si yo guardo pueden ver que dice hola joe porque le está insertado dentro del bad y este h1 de hecho si yo vengo aquí en elementos puedo ver que aquí en el bad y está este h1 con el texto que dice hola joe voy a volver a la consola entonces de esta forma nosotros podemos utilizar una función que recibe un objeto y este objeto también podemos utilizarlo para poder devolver un elemento que va a ser utilizado en el tom ahora es muy importante entender que aquí no es un elemento especial este sensual un string al final del día pero sí es importante entender que todo esto al final va a ser utilizado por el don y es por eso que le estoy colocando en formato de etiquetas esto no tiene nada de especial yo directamente aquí también podría haberlo escrito de esta forma podría haber escrito un stream y podría haber dicho que ya bache 2 y aquí que digamos por ejemplo en un texto de hecho 2 y aquí dentro de este hecho 2 podría haber colocado por ejemplo texto añadido guardo y pueden ver que esto también se actualiza ok solamente que en este caso les estoy mostrando un ejemplo que viene a partir de la ejecución de la función que recibe un objeto y es asignado al don hasta ese momento hemos creado una función que espera un objeto y estos objetos está siendo accedido a sus elementos a través de la notación de puntos ahora hay otra forma de acceder a sus elementos o propiedades utilizando un corchete y aquí el nombre de la propiedad por ejemplo digo quiero acceder a name pueden ver que me devuelve hola joe o también puedo acceder por ejemplo a ellos le digo quien el valor es y me dice hola 30 y bueno esta es una forma de acceder a los valores pero otra forma también es utilizando lo que se llaman de estructura o de estructurar un objeto es decir un objeto está compuesto por distintos elementos yo puedo tomar tan solo algunos de estos valores por ejemplo en lugar de decir de todo este objeto yo se pueda utilizar aquí unas llaves le digo ya sea que aquí voy a recibir un objeto quiero utilizar tan solo algunos valores de este objeto por ejemplo le digo tan sólo quiero el name entonces quiero acceder tan solo a name ahora lo único que estoy diciendo aquí es que yo espero un objeto que tenga esta propiedad name entonces aquí en lugar de ser giuseppe punto name hoy username simplemente escribo name y ya está si yo formateo esto es lo mismo como pueden ver porque aquí al momento de pasarme este valor él me está pasando dos valores name y james entonces aquí le puede ser también kate también puede esperar un mail y pueden ver que ya no tengo que estar limpiando y usar punto ni yo sé punto al final puedo estructurarlo ahora en este caso lo estoy estructurando directamente desde el parámetro pero otra forma también es decir ok voy a esperar un usuario completo un objeto completo y de este objeto completo voy a estar extrayendo sus valores entonces le digo que a partir de aquí voy a extraer el valor name y el valor y lo voy a guardar en otra constante o variable también podría ser pero voy a guardar en constante ya que no lo voy a modificar y antes de añadirlo a laxe o no también puede mostrarnos por consola les digo quiero ver por consola name y es si yo formateo quedaría de esta forma entonces lo único que estoy haciendo es guardar y pueden ver que cada vez que se ejecuta esto me muestra joe y el valor 30 pero sabes también está siendo utilizado al momento de retornar entonces le digo aunque quiero que coloques el name y eso sigue funcionando entonces con esto trato de decirles que para estructurar notas sólo funciona como parámetro una función sino en cualquier parte del código y lo pueden utilizar utilizado esta sintaxis algo bastante común que hacemos en javascript es también crear funciones que no tienen nombre o funciones anónimas voy a quitar todo esto y les voy a dar un ejemplo vamos a crear que una función que se llama es start esta función start lo que va a hacer es que va a retornar un stream que dio por ejemplo empezando o starting ok y tan solo retorna este texto ahora si yo quisiera ejecutarlo nosotros sabemos que tengo que llamar start y como este me devuelve un texto puedo colocarlo dentro del mensaje por consola si yo guardo esto me devuelve ese texto ahora en chabás que no es necesario que las funciones tengan un nombre es decir si yo necesito esta funcionalidad tan solamente yo fácilmente puedo hacer esto puedo copiar este de aquí y puedo pegarlo aquí adentro y directamente puedo guardarlo y esto sería lo mismo es decir estoy creando aquí la función directamente ahora si yo quisiera ejecutarlo puedo colocar aquí un paréntesis y esto es cómo ejecutar y crear la función al mismo tiempo si yo guardo pueden ver que mis starting ahora sí lo estoy utilizando directamente aquí porque necesito el nombre fácilmente lo puedo quitar y sí guardo pueden ver que es lo mismo entonces con esto le estoy diciendo que si yo guardo esto pueden ver que aquí lo que tengo es una función anónima sin nombre entonces esto fácilmente ya os que lo puede ejecutar como pueden ver esto no parece muy útil pero de hecho es algo que utilizamos bastante cuando trabajamos con eventos por ejemplo vamos a quitar esto yo voy a crear aquí un botón un botón aquí conlleva que le digo document puntos create element vamos a quedar aquí un botón y este botón voy a colocarle un texto le digo iner text y en este caso voy a colocarle un texto que diga por ejemplo clic me ahora como yo quiero que ese botón tenga una escucha le digo botón a dimensionar quiero que escuches el evento clic y cuando tengo un clic voy a ejecutar una función y que creen vamos a colocar aquí una función anónima entonces de esta forma le estoy asignando una función sin nombre al evento clic entonces aquí le puedo colocar un texto que diga o que ya colocó una alerta que diga el clicker entonces si se dan cuenta yo aquí estoy creando una función y esto lo hacemos a cada rato cuando estamos manipulando el don ahora si yo quiero añadir esto le digo document punto ebadí punto apple y puedo añadir este botón al done entonces puedo decirle añade este botón si guardo ahí está el botón y si lo den clic pueden ver que hice clic en le voy a dar aceptar y otra forma de poder empezar a crear esto forma de poder haber creado esto es simplemente separando la función por aparte y aquí podría colocarle un hombre por ejemplo puede decir el handle clic o maneja el clic y éste hander clic se lo puedo pasar aquí y es lo mismo pero con esto que espero que se haya dado cuenta que algunas veces directamente puedo pasar la función aquí y me evito colocarle el nombre entonces esto es lo mismo de antes para no significa que uno sea mejor que la otra al final esto depende del desarrollo es decir algunas veces es mucho más fácil entender una función anónima escrita directamente o otras veces es mucho mejor separarlo al final depende del desarrollador escoger cuál le conviene pero en la práctica son muy similares y no hay ninguna diferencia tan notable hasta ese momento venimos creando funciones que tienen esta palabra función pero de hecho ya va en las últimas versiones nosotros tenemos una forma mucho más sencilla de crear funciones si en realidad estar escribiendo la palabra función a cada momento estas funciones se le conocen como arrow function o funciones flecha y se escriben de esta forma supongamos que yo quiero aquí vamos a subir unos cuantos líneas de código entonces primero voy a crear una función sencilla que se llame sumar y esta función va a recibir dos parámetros xy ya y esto va a retornar x + 10 esto vendría a ser la forma típica en la que podemos crear funciones en javascript ahora si quiere utilizar la otra forma podría hacer esto puedo decirle voy a crear una constante sumar y aquí voy a asignar una función ahora para asignar una función voy a escribir simplemente los paréntesis y aquí voy a utilizar uno igual y un mayor que hacen como una especie de símbolo de flecha y luego voy a colocar las llaves esto sería lo mismo que asignar de esta forma función paréntesis sólo que en este caso vendría a ser su forma alternativa ahora aquí dentro de la función lo mismo le digo puede retornar x + jet ahora en este caso pueden ver que solamente el único que hace es ahorrarme la palabra función pero no parece tan distinto de funciones no tan solo está enfocada a la sintaxis también tiene otras consideraciones de cómo poder acceder variables o un contexto o lo que se le conoce como scope o alcance de las variables eso está fuera de este tutorial porque no quiero ahondar en tantos detalles pero lo único que necesitan para poder entender riad inicialmente es saber que hay estos dos tipos de funciones cuando trabajamos con javascript ahora si yo quisiera que esto es equivalente a la de arriba tan solo me falta los parámetros y ya está esto de aquí es exactamente igual lo que tengo aquí arriba ahora para darles un ejemplo voy a utilizarlo aquí en este botón que habíamos escrito y por ejemplo en lugar de utilizar esta función directamente para decirle quiero que utilices una función flecha y ya esto vendría a ser lo mismo si yo guardo y doy un clic pueden ver que igual sigue funcionando ok ya sabemos que son las funciones flechas y sabemos que podemos utilizar estas llaves para poder colocar contenido adentro ahora voy a mostrarles una forma mucho más sencilla de poder que estas funciones supongamos que nosotros vamos a crear una función simple por ejemplo que se llame de chat es puedo crear que joe tex y esta función lo que va a hacer es simplemente devolver un texto entonces te digo que quiero que retorne un texto que diga hola mundo si yo quisiera utilizar esto simplemente aquí debajo le puedo decir quiero que muestre por consola esta función show text y lo ejecutó si yo guardo ahí está el valor ahora no necesariamente tengo que escribir todo esto para retornar un valor algo que también hacen las funciones flechas es evitarme que escriba todas estas llaves y directamente si lo colocó de esta forma esto es como decir aquí return por así decirlo ok entonces directamente le digo que vas a retornar un texto que diga hola mundo y yo guardo es lo mismo como pueden ver entonces lo que trato de decirles es que si no colocamos llaves y directamente colocamos el valor eso es cómo colocar directamente un retorno es decir hay un retorno implícito entonces si yo quiero crear más funciones que devuelven otros valores lo mismo digo que yo también quiero crear otra función que se llama zone number y esta función ya unam ver lo que va a ser retornar un valor 22 por ejemplo también puedo crear una función que se llama william y esta función yo william lo que va a ser retornar un valor truco force por ejemplo y luego también puede decirle que crea una función howard rate lo mismo va a retornar un arreglo con valores 1 2 y 3 y si yo muestro x con solo estos valores por ejemplo aquí creo otro con son lo que le digo muéstrame number y lo ejecutó luego le digo muéstrame también el show william lo ejecutó y finalmente le digo muéstrame el show a ride en lo ejecutó y guardo pueden ver que ya están los valores que me mueve las funciones ahora algo interesante es que si yo quisiera devolver un objeto así como ha devuelto esos tipos de datos tengo un pequeño problema con la sintaxis miren si yo creo porque show obvia por ejemplo y les digo que esta función flecha va a retornar un objeto si yo lo escribo de esta forma es como si yo tratara de decirle que aquí irá el cuerpo de la función y realmente lo que pero retornar es un objeto es decir si yo lo escribo de esta forma utilizando estas llaves él espera que aquí yo coloque un retorno con algún valor por ejemplo 10 supongamos entonces yo quiero mostrarlo aquí le digo show object y ejecutó el me vamos a de valor pero yo no quiero eso yo quiero devolver un objeto entonces para devolver un objeto usted dirá ok simplemente escribe name dos puntos ryan y guardó y pueden ver que en este caso mediante find mediante find porque él no cree que es un objeto él cree que este es el cuerpo de la función entonces si yo le digo que esto no es un el cuerpo la función aquí no tiene que procesar nada sino lo que yo quiero que esto lo tomes como un objeto a devolver pues aquí lo puedo colocar entre paréntesis al colocarlo entre paréntesis de nuevo presten atención no es llave sino paréntesis le estoy diciendo que este objeto se que va a retornar como si fuera un valor y esto no sería el cuerpo de la función entonces y guardó pues mejores y me devuelve el objeto y puedo empezar a verlo por consola entonces esta es la forma resumida de devolver un objeto esto me evita que yo haga esto es decir que yo aquí escriba llaves return y este objeto ok entonces pueden ver que al final es lo mismo entonces si utilizo el paréntesis y las llaves esto me retoma tan sólo el objeto directamente algo que hacemos comúnmente cuando trabajamos con javascript y funciones flechas es poder colocar condicionales que retornen un valor u otro voy a darles un ejemplo voy a quitar esta parte de aquí que teníamos múltiples funciones y si vemos aquí estábamos mostrando una alerta pero lo que voy a hacer es que voy a mostrar una alerta con un texto dependiendo de algún valor por ejemplo aquí voy a crear una constante y supongamos que yo en este botón cuando dé un clic esto me tiene que mostrar un texto u otro dependiendo tiene un valor juliano entonces vamos a crear una constante que se llame está autorizado hoy autorize y por ahora voy a colocar dentro entonces si hice authorized estruch quiero que me muestre un texto que diga estás autorizado si está en fort te digo quiero que me muestre un texto que no está autorizado entonces aquí algo que ustedes harían código básico de jaws que sería una condicional que diga si es autorize esto pues yo quiero mostrar la alerta en caso contrario si es fault lo quiero mostrar otro texto aquí simplemente le digo entonces si está autorizado le voy a decir ese texto caso contrario le voy a decir ok no está autorizado ahora sí guardo esto y doy un clic pueden ver que mis está autorizado por qué valores true pero si lo cambio falls y guardo y nuevamente doy un clic pueden ver que me dicen no está autorizado esto quiere decir que me está mostrando un valor u otros simplemente dependiendo de este condicional ahora esta es una forma bastante típica de evitar que se ejecute a otra parte del código pero en funciones nosotros cuando hemos visto que podemos retornar valores podemos escribir un reto y se escribe un reto de un 20 por ejemplo lo que estamos haciendo aquí es acabar con la ejecución de la función entonces esto es como una forma de decir ok si cumple una condición acaba aquí entonces esta es una forma de reemplazar el leds por así decirlo en algunas funciones entonces por darles una idea aquí supongamos que yo le digo que quiero escribir esto de una mejor forma sin necesidad de que esté pasando por un mes pues yo puedo colocar la que sí estaba autorizado le digo el return está autorizado y si quiero ahorrar mlr pues yo puedo quitarlo y si lo mete me quedo con la alerta es el código de aquí es mucho más simple de leer y al final no necesita del else y pueden ver que me dice si es autorizado retorna una alerta y esto es como decir acaba con la función de hecho miren si yo ejecuto antes de todo esto otro ratón y le digo 20 pueden ver aquí visión estudio como me lo colocan en crisis esta parte del código esto es porque visual studio code sabe que como aquí hay un retorno y no hay ninguna condición que lo limite decir no hay nada que impida que se ejecute este botón sabe que la función va a acabar aquí entonces ya toda esta parte de código no se va a ejecutar entonces esto es una parte importante de trabajar con read javascript porque justamente en riad como vamos a estar utilizando muchas funciones y muchas de las funciones de citas que retornen un valor esta parte de return es bastante utilizada entonces aquí lo que voy a hacer es que voy a quitarlo por ahora era tan solo para que vean ese efecto gris que coloque emisor estudio code pero me decidió guardó y ejecutó pueden ver que me dice no está autorizado la razón de que me muestra no está autorizado es porque me dice ok y se autorice centro no nos entró stanford entonces esto de aquí no se cumple y continúa y llega a esta parte y directamente la ejecuta no tiene que comprobar caso contrario y nada de eso ahora sí le digo que esto es true y guardó y doy un clic pueden ver que me se está autorizado porque llega a esta parte y es autora esto sí es true entonces le digo retorno es decir acaba aquí mismo retorna el valor de la función le digo una alerta y esto va a ejecutar esta alerta y allí acabó ya no continúa entonces es otra forma también de utilizar el retorno de una función hasta este momento tenemos una interfaz muy sencilla con un botón ahora si nosotros queremos utilizar este botón podemos también hacerlo otra vez y javascript si vengo aquí debajo de steinert exit le digo a este button le voy a añadir por ejemplo una propiedad llamada style esto está me va a permitir puede añadir estilos de css en línea esto es como la propiedad de esta el de cualquier etiqueta html entonces aquí yo puedo colocarle un string y puedo decirle que va a tener un background y voy a decirle que va a tener el color por ejemplo vamos a buscar la red voy a guardar y pueden ver que allí cambio color entonces luego también puedo colocar un punto y coma y también voy se puede cambiar el color del texto y le voy a decir que va a ser blanco estas son las reglas de css si yo guardo pueden ver que se aplica ahora lo interesante no es esto lo interesante es que nosotros como tenemos acceso desde javascript al código de css aquí pues podemos utilizar variables condicionales para poder alterar estos valores entonces voy a venir aquí arriba voy a crear una constante que sea en verdad ground y esa constante ground va a tener el color rojo ok voy a colocarle simplemente el texto red y luego también voy a crear otra constante que se llama color y va a tener el valor white entonces aquí lo que tengo son justamente los valores que yo asignárselos ahora para asignárselos como son maestrías yo pudiera concatenar los pero para concatenar los tendría que acceder a esta parte específica del string entonces lo que podría ser de una forma bastante sencilla es partir el string a la mitad entonces éste es y concatenar los sin embargo la cinta que sería muy difícil de leer entonces es por eso que tenemos otra forma de crear concatenaciones senado script en realidad se le conoce como interpolación pero aquí entra el concepto de string literal los 23 literales básicamente nos permiten concatenar o unir strings pero a su vez nos permiten interpretar valores dentro de estos strings por darles una idea supongamos que yo quiero a partir de estos valores quiero concatenar los le digo ok voy a colocar aquí una constante que se llame result por ejemplo y simplemente puedo decirle background más color esto ya lo sabemos esto simplemente nos va a mostrar ambos textos unidos aquí salen ambos textos segundo aquí se ha roto el estilo porque hay que enviado aquí el valor no hay no hay problema vamos a dejarlo así pero lo que quiero es mostrarles esta otra forma primero voy a quitar este voy a colocar aquí tildes y éstos tildes representan otra forma de escribir strings en javascript entonces que yo puedo decir lo que quiero que interprete es el valor de y color entonces para concatenar aquí voy a utilizar un símbolo de dólar y llaves y esto es como decir ok voy voy a interpretar algo entonces aquí voy a decirle quiero que interprete ese valor de valdrán y luego otra vez colocó dólar y llaves y aquí le digo quiero que interpretes el valor de color si yo guardo puedes ver que me da lo mismo pero de hecho esto es mucho más fácil porque ahora aparte de estas llaves yo puedo colocar aquí otros valores por ejemplo le puedo decir estos son estilos dos puntos y sí guardo pueden ver que mis estos son estilos red white es decir al final tengo una forma mucho más sencilla de incluir valores dentro de este street entonces esto es una forma bastante útil en muchos frameworks y bibliotecas de javascript y en riad no va a ser la sección así que para darles una idea aquí de cómo lo utilizaríamos con estilos por ejemplo en lugar de escribir los estilos de esa forma puede escribirlos así puedes ir button punto style y aquí le colocó un igual un stream literal y le digo background dos puntos ya que colocó ese símbolo de dólar y llaves y aquí le colocó en la costa este más grande entonces esto es que yo lo puedo quitar de hecho hasta sorgo aquí está el resort y aquí le digo ok también para el color y como primero le digo para el color también voy a asignarle el color que tenga aquí entonces le digo voy a asignar el color entonces si yo guardo pueden ver que normalmente mueve los estilos yo voy a moverlo un poco más a la derecha y miren si yo por ejemplo digo que no quiero que sea rojo si no quiero que sea de un color que sea 30 30 30 vamos a colocar les guardo pueden ver cambia el color o aquí le digo quiero que sea de un color azul le digo lo guardo y se aplica los estilos de hecho aquí vamos a colocar el color más que se diferencia el background puede colocar hielo y pueden ver que estoy cambiando estos valores entonces de esta forma nosotros vamos a poder luego empezar a reutilizar estas propiedades en otros valores simplemente concatenando los o interpol 'no los de esta forma ahora estos valores de aquí a veces no tan sólo sirven para poder digamos colocar estilo sencillo sino también para poder interpretar código por ejemplo supongamos que yo aquí tengo otra variable que de hecho aquí ya tenía una que se llama voice autorales puede moverlo hacia arriba entonces suponemos que yo quiero que dependiendo de this autoral se muestre un valor o no entonces le digo ok si is autorize estruch falls entonces aquí yo puedo utilizar un psd condicional que me permite poder saber si este valor es triunfal entonces yo puedo decir es autora es y colocó un signo de interrogación y eso se le conoce como un operador ternario esto me permite a mí poder decirle ok si is autorize estruch esto es como decir si eso trae es igual igual a otro ok le digo si esto pues quiero que muestre un color que sea blue por ejemplo ok caso contrario quiero que utilice el valor patrón entonces le digo caso contrario voy a utilizar background o también lo puedo decir caso contrario colocarle el texto en red entonces de esta forma lo único que estoy haciendo es colocando una condicional adentro dentro de las llaves aquí es donde quizás se note un poco difícil pero tan sólo imagínense si no tuviéramos estos triplay literal sería un poco más complicado entonces guardó y pueden ver que como hice autorize esto me muestra valor blue pero si lo cambio falls y guardo pueden ver que lo cambia rojo hecho aquí el color del texto voy a volverlo a blanco para que contraste y el listado de esta forma nosotros ya sabemos que dependiendo del valor de isa otra vez éste va a colocar un color u otro hecho que nuevamente también podemos utilizar nuestras constantes y le digo si is autorize vas a utilizar el background el en la constante madera y si yo guardo pueden ver que en este caso continuo en rojo pero si yo lo colocó entre voy a utilizar el color amarillo ya que valdrá uno es el que está aplicando entonces esta parte de aquí de nuevo es tan solo como decir if autora es el valor else utilice este otro valor y ya estando utilizado también ok hasta ese momento ya conocemos algo relacionado con las funciones de javascript ahora vamos a entrar en detalle con otra parte muy importante del lenguaje que son los arreglos los arreglos nos permiten poder listar varios elementos y en este caso no voy a ahondar tanto en los arreglos simplemente les voy a dar lo necesario para que pueda empezar con riad y ver en si yo creo que un arreglo por ejemplo un eje o barra lo que se llame names y voy a colocarle tres valores como ryan joe y luego voy a colocar otro que se llamaría por ejemplo entonces para recorrer este arreglo que yo puedo utilizar es un bucle ford de esta forma este bucle for lo que puede hacer es colocar un índice le digo índice y luego le puedo decir el arreglo que va a recorrer names por ejemplo es la sintaxis de lo que nosotros hacemos típicamente cuando queremos recorrer un arreglo uno a uno y bueno luego le puedes ir quiero que me muestre por consola elementos que están recorriendo si yo guardo eso es vuestra ryan joe y mariah ahora el asunto es que esto de aquí me lleva muchas líneas de código y en riad nosotros no vamos a estar utilizando muchos los bucles form sino lo que vamos a estar utilizando en su lugar son métodos que están relacionados con estos arreglos es decir esto de aquí voy a comentarlo y una forma de tener el mismo resultado con names es utilizar un método llamado for each por lo que espera como parámetro es una función y esta función al ejecutarse lo que va a retornar son justamente los valores que esta función va estar recibiendo es decir el fort y lo que hace es que va a recorrer cada uno de estos elementos y a medida que los va recorriendo los va a ir recibiendo como un parámetro entonces le puede colocar un nombre puede ser no puede ser x llegó el nombre que ustedes gusten en mi caso voy a colocarle name es una buena idea por lo general colocarle un arreglo por ejemplo en plural o nombres en plural porque como contiene una lista de elementos al momento de recorrer los yo puedo utilizar el nombre en singular entonces yo puedo decir aquí quiero que me muestre por consola el nombre que está recorriendo y si yo guardo pueden ver que obtengo el mismo resultado esto esto es mucho más simple de utilizar que esto ahora de hecho el folies si bien puede ser utilizado por lo general riad en lugar de esto utilizamos algo que se llama una función map esta función map lo que hace es que al momento de recorrer si yo lo guardo me produce el mismo resultado pero no tan sólo lo recorre sino que me retorno a un nuevo arreglo bien si yo guardo esto en una constante llamada new names y luego lo muestro por consola digo muestra menú name y guardo pueden ver que en este caso me da otro arreglo que dicen de final de falla de find la razón de que me digan de fainé es porque esta función en cada iteración tiene que retornar un valor y aquí yo lo puedo decir ok quiero que retorne es name si yo guardo pueden ver que ahora sí me devuelve el mismo objeto ryan yo y mariah ahora esta función más lo utilizamos mucho porque en riad va procesando cada uno estos elementos para convertirlos en elementos html pero en nuestro caso para darles una idea nosotros podemos utilizarlo para poder cambiar los valores y devolver un arreglo nuevo con los valores cambiados es decir por ejemplo supongamos que yo quiero crear aquí un string le digo que hola y lo voy a concatenar con el valor del name entonces si yo guardo esto pueden ver que ahora me retornó a un arreglo con tres elementos y me dice o la radio o la maria ahora lo interesante de este mapa es que no están modificando este arreglo de aquí de hecho si yo veo por consola este arreglo names y guardo allí está el arreglo names y también está el arreglo new names eso quiere decir que tengo dos arreglos uno indicándome el valor original y otro indicando los datos que he modificado entonces de esta forma yo luego puede eliminar los datos que he modificado y no hay problema porque me quedo con el arreglo original esto de quedarme con una copia del arreglo por lo general es bastante utilizado en riad y es debido de nuevo a que está basado en el paradigma de programación funcional ahora esto de aquí no es el único método que utilizamos en riad también hay otro método como find por ejemplo este método fácil como su nombre tickets para buscar un elemento que vamos a modificar esto ok el método file lo que hace es que también recorre cada uno de los elementos solo que el momento de recorrer nosotros podemos colocar una condición dentro de las funciones pues decir if y les puedo decir si por cada nombre que está recorriendo uno de estos es igual y aquí le colocó lo que estoy buscando por ejemplo le digo supongamos que estoy buscando show si es igual a joe entonces retorna me es el nombre que has encontrado caso contrario pues no hagas nada entonces si yo muestro por consola aquí no voy a colocarle ni un ley vamos a cambiarle voy a colocarle name found nombre encontrado entonces que le digo muéstrame en default si yo guardo pueden ver que me devuelve yo la razón de que me devuelva yo es que aquí lo que hace es que al momento de recorrer por cada recorrido por cada uno de estos él va comparando con esta condición entonces empieza así primero empieza en el índice cero y dice ryan es igual a yo si es igual aquí el mejor retorno de valor pero no es igual entonces no se ejecuta esto luego continúa con joe y dice joe es igual a yo es verdad entonces me retorna ese nombre es decir en este caso el nombre que está recurriendo que sería el show es por eso que lo vemos por consola luego termina y luego dice ok ahora maría es igual a joe es falso entonces no se ejecuta esto de aquí y al final si yo veo por consola te muestra el valor que ha retornado ahora de hecho si nosotros buscamos un nombre que no existe por ejemplo busco en marcos guardo y pueden ver que me retornan defined porque ese valor no existe en el arreglo y luego otra función también que utilizamos bastante con los arreglos es el filter vamos a buscarlo filter el filtro lo que hace es que nos permite crear un nuevo arreglo con elementos que hayamos filtrado es decir con elementos que cumplan como una condición por ejemplo para darles una idea el filtro en una interfaz lo utilizamos para poder quitar el elemento de un arreglo es común del lead por así decirlo el filtrar de hecho nosotros lo utilizamos de esta forma si nosotros venimos aquí le digo que cada vez que recorras un elemento utilizando filter yo voy a hacer una condición entonces le digo si el nombre que está recorriendo es igual a igual a yo esto va a dar true entonces si esto quiero que retorne sea el nombre pérez y yo guardo tan solo vamos a ver un nuevo arreglo con el valor joe y es que tan sólo me está devolviendo en los elementos que cumple con esta condición entonces empieza así rayones igual hay o no no es igual entonces no lo retorno y no se añade este nuevo arreglo que en este caso serían names infiltrados vamos a colocarle un james nuevamente y bueno es luego donde nuevo vamos a empezar con radial le digo rayones igual yo ok no es igual tonces no sea esto lo arreglo yo es igual yo sí si es igual entonces se añade este arreglo maría es igual hay o no no es igual entonces no se añade este arreglo y al final teniendo sólo con los nombres que han pasado por esa condición y lo mismo también puedo hacer un proceso de contrario les digo que vamos a colocarle si es diferente entonces ahora sería lo contrario mire le digo ryan es diferente de yo sí sí es diferente entonces se añade este nuevo arreglo luego digo que yo es diferente de joe no no es no es diferente es lo mismo entonces no se añade este arreglo y maría es diferente de yo si es diferente dijo entonces se añade se arregló deseo guardo pueden ver que ahora me da lo contrario me datos sólo rail maría y no yo entonces y se dan cuenta esto forma de quitar un elemento de un arreglo ahora lo mismo si yo veo el arreglo original names tengo la regla original y el nuevo arreglo pero sin el elemento ahora otro método también que podemos hacer voy a quitar esto de aquí ya no lo necesito voy a crear otra constante que se llama new names y esten yúnes lo que va a contener son otros nombres por ejemplo voy a colocar aquí marcos mario y vamos a colocar aquí sound entonces ahora tengo dos arreglos con dos nombres supongamos que una aplicación yo necesito unirlos bueno para poder hacerlo le puede decir ok de names quiero concatenar con cat ponce más o método y quiero concatenar este otro arreglo que se llama new names entonces lo que va a producir esto es un nuevo arreglo combinando ambos pues y yo esto lo muestro por consola y guardo pueden ver que ahora aparece un arreglo con ambos valores y de no esto no altera los arreglos originales de hecho si yo muestro por consola game y también muestro por consola new life y guardo pueden ver que ahí están los dos arreglos y luego también está el arreglo que he creado a partir de estos dos ahora obviamente esto no son los únicos métodos relacionados con los arreglos de hecho hay muchos más pero estos son algunos que pueden llegar a utilizar en riad de hecho en los métodos como map como filter como retiros como find todos esos métodos pueden llegar a utilizarlo bastante a menudo en riad así que es bueno practicarlos de hecho si ustedes quiere dominarlo yo les recomiendo que vayan a este sitio que se llama podemos que lo como javascript a rice y va a llegar en esta documentación de mozilla que se llama developer mochila punto hereje y yo no voy a dejar la descripción pero básicamente aquí tiene una lista enorme de los métodos de arreglos que nosotros podemos utilizar aquí al final de todo tiene como una especie de lista cuando está por ejemplo método con cut que les he mostrado esto también otros como every como phil como filter fine demás de hecho que ustedes quieren conocer un poco más pueden ir a mi sitio que es fastweb puntocom y aquí pueden buscar a raíz y esto lo va a llevar a una especie de mini curso que tengo acerca de arreglos en javascript aquí ustedes pueden aprender los métodos más típicos que les he mostrado más a detalle en este caso no han dado tanto una explicación profunda y de hecho tan sólo ha utilizado strings pero en lugar de street también podríamos utilizar objetos números otros arreglos y demás así que al menos por ahora tienen una idea tan solamente y les aconsejo que entren en detalle en esto ok entonces hemos concatenado estos dos arreglos utilizando este método llamado con catch ahora no es la única forma de concatenar de hecho en las últimas versiones de javascript nosotros tenemos una forma un poco más práctica de hacerlo es utilizando un operador que se llama spread operator para darles un ejemplo vamos a quitar esto de aquí y supongo que yo de nuevo quiero concatenar esto pero no quiero utilizar el método concreto bueno puedo hacer esto puede venir aquí en la consola y puede decir ok crea un arreglo nuevo entonces crea un arreglo y voy a colocar tres puntos al inicio y le voy a decir lo que quiero copiar entonces le digo quiero copiar el arreglo names colocó una coma tres puntos nuevamente y colocó el otro arreglo que quiero copiar mío names ahora estoy colocando tres puntos porque yo sé que estos elementos que estoy mostrando aquí como name me name son múltiples elementos entonces él puede recorrer los entonces esto de aquí nosotros lo que estamos diciendo es ok trae todos los elementos de este arreglo trae todos los elementos de este otro y colócalo en este nuevo arreglo si yo guardo obtenemos el mismo resultado y de hecho es lo mismo que con acá está el final porque si yo veo aquí names y veo también new names y guardo pueden ver que también están los dos arreglos allí si se dan cuenta es mucho más sencillo utilizarlo de esta forma ahora esto no tan sólo funciona con arreglos también podemos utilizarlo con objetos convocamos que esté un objeto llamado usuario user y tiene una propiedad name y este tiene un valor que dice ryan por ejemplo luego también tiene un apellido que es las name y le voy a decir rate y luego tengo otro objeto que sería una dirección entonces este voy a colocarle address y tiene dos valores un street que sería una calle entonces aquí le voy a colocar main street' 1 2 3 y luego también una ciudad entonces voy a colocar aquí bogotá por ejemplo entonces como son los datos y estos dos datos al final yo quisiera unirlo en uno supongamos para guardarlo en una base de datos o algo similar pues yo puedo crear aquí otro objeto nuevo que se puede llamar por ejemplo yo ser info y supongamos que quiero unir estos dos objetos dentro de esa constante simplemente coloco igual crea un objeto nuevo y aquí adentro nuevamente utilizo el expreso pero le digo quiero copiar el valor de user coma y quiero copiar el valor the address esto lo que va a hacer es que va a generar un objeto nuevo con todas las propiedades juntas y de nuevo similar a como el arreglo no lo altera sino que él me devuelve un nuevo objeto esto quiere decir que sí usher y veo a tres y guardo pueden ver que ya están los dos objetos individuales y luego hay un objeto que une esos dos anteriores otro concepto de jobs que utiliza bastante en riad son la forma de dividir una aplicación en múltiples archivos esto se le conocen como módulos o como y es módulos o es más como dios y bueno funciona de esta forma puede quitar todo esto de hit y supongamos que yo quiero crear otro archivo aquí en mi proyecto que se llame por ejemplo adjunto js y esto lo que va a exportar es una función de sumar entonces voy a crear que una función sumar y esto va a retornar en la suma de dos parámetros que va a recibir que serían xy yo le digo x + y ahora si yo quiero utilizar esto en mi otro archivo lo que vamos a estar haciendo es utilizar una sintaxis que se conoce como export esto es como decir ok esta función de aquí va a ser utilizada por otros archivos si yo guardo esto y quiero utilizarlo en index simplemente puedo hacer esto de aquí le puedes ir voy a importar y aquí le digo voy a colocar un punto y un slice y voy a decirle que voy a llamar a punto js ahora colocó un punto y un enlace porque sé que el otro archivo está justo aquí y si se dan cuenta es justamente lo mismo que hacemos con el html es decir con el html y css cuando llevamos el punto es light para indicar que es una ruta relativa que está aquí entonces esto es lo mismo solo que de código de javascript y bueno como arte está exportando tan solo esta función yo le digo aquí un de estructura y le digo desde este módulo quiero extraer y aquí si presionó contra el espacio en visión estudio que me dice que hay una función que se llama sumar ahora si yo intento ejecutarla usarla por ejemplo digo quiero colocar sumar 10 y 20 y guardo pueden ver que me da un error y me dice no puede utilizar imports o declaraciones import fuera de un módulo y bueno esto es así porque en el navegador actualmente nosotros aún no tenemos por defecto estos módulos así que lo que tenemos que hacer es que al momento descargar código de javascript aquí por ejemplo yo tengo que añadirle una propiedad llamada tag y un valor que diga módulo esto es como decirle voy a estar activando la característica de import y export ennio scripts y yo guardo y vengo la aplicación en este caso ya no tengo errores pero tampoco está ejecutando y bueno ya está ejecutando porque el momento de llamarlo tampoco lo estoy mostrando por consola pero si yo mostrar por consola esto y guardo pueden ver qué me dice 30 ahora se dan cuenta que esta función sumar no está aquí de jiménez y yo doy encontró clic aquí en visual estudio con él me llevó a la función ahora también aquí puedo decirle voy a exportar otra función que se llame supongamos vamos a colocarle múltiples ok y aquí voy a decirle que voy a colocar xy ya lo mismo y vamos a colocar aquí return y vamos a colocar x porque si yo guardo y quiero extraerlo del otro lado pues también lo digo una coma y aquí le digo ya extraer y vamos a colocar el multi plate y lo mismo como me pegó y aquí les digo múltiple si yo guardo y ya está el otro valor esto es esta forma de exportar un valor individual es algo bastante típico y no tan sólo tienen que ser funciones también yo puedo exportar por ejemplo una constante que se llame por ejemplo title y diga por ejemplo y js for riad también puedo exportar un valor buljan o por ejemplo vamos a colocarle active y vamos a colocar letra o también podría exportar por ejemplo un arreglo vamos a colocarle points es igual a 10 20 y 30 si yo guardo y vengo index punto js una coma e incluso si presionó contra el espacio pueden ver que aquí están estos tres valores puede importar active puede importar points y puede importar title y yo lo muestro por consola les digo quiero ver active quiero ver point y quiero ver title si el formateo quedaría esta forma y si yo ejecuto pueden ver que ya están todos los valores ahora esta es una forma de exportar pero también otro foro bastante típica es exportar de todos estos valores algo por defecto es decir que si yo no llamo estos importe aquí si yo no extraigo algo que me dé algo por defecto entonces yo puedo escribir después de todo esto lo digo quiero exportar algo por defecto y puedo seleccionar cualquiera de estos que tengo aquí title active point múltiple o lo que quiera en este caso le puede ser que quiere exportar por defecto supongamos el título esta constante title que esté aquí ok entonces yo guardo y aquí le digo ok yo no quiero que traigas todo esto script tan sólo vamos a quitar todo esto y ya no quiero que traigas o que extraiga salgo simplemente voy si voy a nombrar lo con algo vamos a nombrarle motion por ejemplo lo que no es necesario que se llame así podemos colocar el nombre que queramos x si en mi caso a llamarle a móvil o módulo at entonces si yo muestro por consola este admob yo si se dan cuenta y han extraído un valor en específico entonces yo guardo lo primero que me muestra es el valor de tight el ok y bueno tenemos y le digo que no quiero que sea title quiero que sea points por ejemplo y guardo ahora me muestra es la regla luego lo mismo si quiero exportar una función le doy a guardo y me retorno la función solo que claro la función como lo tengo que ejecutar le digo de admob yo en lo ejecuta se guardó y en lo que me retorna ahora al móvil de hecho como esperan los dos valores me retornan porque se suman donde fainé imagen de find pero aquí yo lo puedo decir x es 0 si no te pasa nada y es cero si yo guardo me devuelve cero entonces lo importante es entender que nosotros podemos dividir un proyecto grande múltiples archivos esta sintaxis de import es por eso que van a estar utilizando bastante en riad ahora un asunto muy importante con esta extensión punto js esto de colocar puntos j es en los archivos esto viene del estándar de javascript es decir hay unas reglas de javascript que se aplica para todos los navegadores que se aplica para todo el lenguaje y la forma estándar o la regla principal de javascript es utilizar js al momento de importar archivos ok esto lo que nos dice el lenguaje ahora hay muchas herramientas sobre todo herramientas que funcionan con frameworks y bibliotecas como read angular view es bell y bibliotecas de back-end y front-end incluso que lo que hace es que te permiten importar sin utilizar el punto js eso no viene del estándar es decir funciona y lo vas a ver muy típico pero el estándar te dice que tienes que utilizar punto j s entonces lo que hacen muchas herramientas no sólo a modo de simplificar el desarrollo es evitar que utilice ese punto js pero de nuevo el estándar indica que es como punto j s ahora hay alguna diferencia una mejora no es tan solo asunto de sintaxis aunque entonces en riad por ejemplo nosotros no utilizamos punto j s sólo utilizamos el nombre del módulo de esta forma ahora de nuevo si yo hago esto en el navegador sin ningún framework sin nada si yo guardo me da un error porque esto no lo reconoce el navegador los navegadores siguen el estándar entonces en este caso no funciona es como si no encontrara nada ok y bueno si lo colocan en puntos o ts ya funcionan normalmente entonces en resumen el estándar me dice que es como punto j s muchos frames no siguen el estándar a modo de facilitar el desarrollo o facilitar la experiencia de desarrollo entonces fácilmente en riad van a ver esta sintaxis de aquí pero bueno es tan solo una consideración tampoco es un problema es tan solo algo que deben considerar cuando se está trabajando con frames y bibliotecas como real ahora vamos a ver una característica de javascript qué nos sirve bastante cuando estamos trabajando con datos que traemos de un back-end por ejemplo para darles una idea aquí voy a crear un objeto que se llame persona y esa persona va a tener algunos datos vamos a colocarle un nombre por ejemplo o ryan vamos a colocarle una dirección aquí voy a colocar una ciudad no solamente y vamos a colocarlo por ejemplo london entonces si yo muestro este valor por consola y guardo en este caso se llama persona guardo allí está el dato y está el objeto para si yo quiero hacer este valor de persona que seguía supongamos en su ciudad tendría que colocar de esta forma persona punto address punto city y si yo guardo esto me muestro valor ok hasta aquí no hay ningún problema el asunto viene cuando nosotros estamos accediendo a propiedades que no existe supongamos que yo quiero acceder de esta persona a su valor que se llame location y de aquí yo quiero acceder vamos a colocarle city si yo guardo esto esto me da un error obviamente y principalmente porque me dice que no puede leer propiedades de undefined la razón de que falle esto no está sólo que tengamos un error y sintaxis sino debemos entenderlo y es que por ejemplo cuando yo accedo city city trata primero de ver si el occasion existe y como pueden ver aquí location no existe entonces es por eso que esto es sun the finest entonces cuando yo trato de acceder a city hermes este accidente en la propiedad city de undefined y el por joachim y si no puedo leer las propiedades de undefined y tiene razón ahora esto que no aparece ningún problema de hecho si lo es cuando trabajamos con código de fronteras porque hay veces que el backend nos responde con datos que nosotros tenemos que leer entonces aquí por ejemplo supongo que esto me retorna los datos un back end y yo sé que existe en el valor city pero puede ser que lo tenga puede ser que no a veces pasos de esa forma entonces lo que me dice lleva escribe ok tú puedes colocar una condicional nosotros podemos decir ok si persona y tiene la propiedad vamos a colocarle location pues le digo ok quiero que me muestres por consola persona location punto city ok entonces de esa forma si yo ejecuto esto pues me que no me da ningún error pero si yo le añado location le digo que quiero location y le colocó aquí un valor un objeto vacío simplemente pueden ver que me dan de find entonces ya no me da error pero estas instancias que tengo que crear una condicional entonces en llamas que hay una forma mucho más sencilla para así lo mete de siero que ya accede un valor si existe y si no devuelve me undefined y es justamente utilizando una característica llamada opcional xining sería esta forma y aquí creo mensaje por consola le digo person puede que tenga un valor location si lo tiene accede a city ahora para decirle si es que lo tiene pues vamos a colocarle aquí un símbolo de interrogación y esto de aquí es el opcional changing es como decir si lo que yo existe acceda a su valor city y si yo guardo pueden ver que nuevamente me dan defined sólo que ya no me da un error y me decía yo quito esto y guardo tampoco me da un error ahora esto está bien para este tipo de casos porque nosotros queremos acceder este valor city si es que existe y si no está bien que median de find ahora para finalizar con los conceptos básicos que deben saber antes de aprender read vamos a aprender lo que vendría a ser la sincronía en este caso voy a mostrárselos con algo bastante común que hacemos en riad que es pedir datos a un paquete en este caso hemos hemos estado practicando con datos que hemos escrito a mano pero no vamos a estar utilizándolo de esa forma en riad en riad los datos vienen de un back-end que viene a partir de una petición de hechos primero lo que deben conocer es una biblioteca del navegador que se llama fets esta biblioteca viene con el navegador no está relacionado a riad ni nada de eso está relacionado con javascript y esta biblioteca fech lo que me permite es poder colocar una dirección internet por ejemplo en este caso vamos a entrar en un sitio que se llama jason place holder y ese sitio de aquí nos permite poder tener datos de ejemplo de hecho lo único que requiere de todo este sitio es esta parte de aquí donde dice resortes y si yo doy un clic aquí por ejemplo en post me da una página en donde tan sólo me está devolviendo datos son en formato jason es decir estos datos de aquí son justamente para que yo pueda leerlos y yo luego pueda colocarlos en alguna interfaz eso es algo bastante común cuando trabajamos con riad pero bueno lo único que necesitamos a ver es copiar esta dirección y si yo vengo aquí en mi aplicación y le digo que quiero que solicite datos desde esta dirección lo que va a hacer es extraer datos y les voy a poder guardar en una constante una variable entonces si yo vengo aquí le digo que voy a guardar esto en una variable que se llame dt y está por ejemplo y yo muestro esto por consola y guardo pueden ver que en este caso lo que me devuelve es una promesa eso de que me devuelve una promesa es algo bastante típico en javascript porque en chabás que nosotros cuando ejecutamos lógica del navegador no es que bloqueamos la ejecución del navegador el navegador hace la lógica y mientras el usuario puede ir haciendo otras cosas entonces eso de que mientras el usuario puede ir haciendo otras cosas se le conoce como a sincronía o mejor dicho código asíncrono es decir mientras ejecuta una lógica el navegador puede ir ejecutando otras tareas en este caso me duele una promesa porque justamente cuando pide datos el navegador el navegador puede ir pidiendo datos y mientras puede ir haciendo otras cosas entonces aquí lo que yo puedo decirle ok entonces como manejamos está esta forma de solicitar datos bueno lo que nos dice la límpida es que desde fecha yo puedo utilizar otra forma de escribir lógica es utilizando una función que se llama dent esta función de an es como decir ok entonces cuando acabe esto voy a ser determinada lógica y bueno ya sabemos que para ejecutar determinada porción de código podemos utilizar una función y esta función por ahora puedo mostrar un texto por consola que diga finalizó la carga y aquí en este con solo en lugar de data voy a colocarle un texto que diga por ejemplo línea 2 entonces si ustedes vienen del lenguaje que no obstante enfocados en código asíncrono ustedes pueden pensar que primero se va a ejecutar este código de aquí como el mensaje por consola y luego esta línea pero miren si yo guardo esto lo que vamos a ver por consola es primero la línea 2 ok y luego me dice finalizó la carga es decir no es que se estén ejecutando en orden inverso sino que se están ejecutando a medida que van finalizando entonces esto es como decir ejecuta esto y empieza a ejecutar el código y mientras se va ejecutando continúa con esta línea y como esto aún no ha terminado es por eso que esto lo primero que se muestra aunque entonces es por eso que vemos línea 2 pero una vez esto ya acabó es lo que se demuestra en esta otra línea y es por eso que me se finalizó la carga entonces de esta forma nosotros ya tenemos una idea de qué es código que se va ejecutando después ahora esto de qué sirve justamente porque muchas de las operaciones de javascript lo que se hace es que se va ejecutando y a medida que van terminando y esto nos permite aprovechar los procesos de nuestro cpu es decir no estamos bloqueando el cpu o cada vez por una tarea entonces para darles una idea aquí cuando yo le pido datos a un back-end externo oa una dirección externa que vendría a esta dirección de aquí él me va a responder con algo y cuando me responda yo lo puedo ver por esta función de aquí de hecho el puerto y con un parámetro como un responso y en lugar de esto le digo que quiero que me muestre es el response y si guardó pueden ver que ahora lo que me está devolviendo ya no son pro mes sino la que está devolviendo es un objeto response y es objeto response tiene datos tiene propiedades de hecho si yo vengo aquí en bad y pueden ver que me da un dato que hiciera de wall street es decir ya está la respuesta del servidor ya está esta respuesta sólo que aún yo no lo puede entender entonces para poder convertirlo lo que puedo decirle aquí es ok esta respuesta lo quiero convertir un dato que pueda leerlo por ejemplo lo quiero convertir a un jason entonces no puede seguir response puntos jason y esto es de nuevo código del navegador esto no es que venga con el lenguaje esto es una idea que tiene el navegador entonces lo que hace es convertir la respuesta a un jason para yo poder verlo por consola entonces este código de aquí de hecho también es asíncrono la conversión también es a sincronizar va a ejecutarse después de que termine algo entonces lo que voy a hacer aquí es decirle que ibas a retornar esta conversión y el retorno a esta conversión cómo se va a ir ejecutando yo puedo colocarlos dentro de otro orden esto es confuso para muchos porque no saben cuándo utilizarlos del ahora en este caso no voy a entrar en detalle en cuándo utilizar uno u otro pero tan sólo piensa en esta forma cuando tenemos un código que va a tomar tiempo y esto lo podemos investigar en la documentación de la biblioteca que utilicemos pues vamos a estar utilizando estos de él entonces yo le digo lo que cuando termines esto cuando termine de ejecutar esa conversión voy a recibir datos y lo voy a recibir de nuevo a través de una función como un parámetro de la función y yo lo puedo mostrar por consola digo muéstrame consell los datos y guardo pueden ver que por consola ahora ha cambiado y ahora tengo un arreglo con varios datos que vienen desde ese back-end que hemos visto de hecho si yo lo examinó todos estos datos que tengo aquí son justamente lo mismo que tengo aquí es decir he podido traer los datos ahora todo esto sirve para que nosotros podamos mostrar la interfaz es decir yo puedo empezar ahora recorrer estos datos y mostrarlos en esta parte de aquí entonces por ejemplo yo lo que puedo hacer es aquí arriba de todo puedo crear un elemento huele le digo voy a crear del documento un create element voy a crear un huele y adentro del 9 le voy a colocar múltiples leyes entonces también voy a crear un elemento de ley le digo document puntos create element y voy a crear un elemento de ley estos elementos de aquí yo los puedo crear inicio pero de hecho estos múltiples elementos de ley yo quiero que venga a partir de este data ahora este texto si nosotros vemos es un arreglo ok es un arreglo con múltiples objetos entonces yo le puedo decir de data como es un arreglo voy a utilizar su función o fortis en este caso voy a utilizar un forista y le voy a decir por cada dato que este es recorriendo que vendría acercado nuestros objetos que es un cada objeto representa una publicación yo le puedo decir vas a ejecutar una función y por cada publicación que está recorriendo quiero que empieces a llenar esta ley como un texto entonces lo que voy a hacer es que en cada recorrido voy a crear un elemento ley y adentro de la ley en un inerte que como texto voy a colocar lo que viene de post punto title ok y a medida que se va recorriendo los voy a añadir a este igual entonces le digo que huele punto up en él y entonces tan solo estoy llenando en la lista con estos múltiples elementos cuando termina de recorrerlo lo único que voy a hacer es que voy a decirle al documento que añada que en su bad y va a añadir con apple nuevamente va a añadir el vl con ya todo generado entonces si yo formateo esto quedaría así y si yo guardo y vengo a la aplicación pueden ver que ahora mi interfaz luce con todos estos datos que son justamente los 100 elementos bueno no sé cuántos elementos me da esto creo que me da 100 si me da 100 elementos lo puedo ver aquí miren si yo vengo bajo todo esto aquí me dice el el haití y va desde cero entonces para 99 100 y así entonces son 100 elementos pero bueno pueden ver que aquí están todos los datos en pantalla entonces cada vez que yo refresco en la página pueden ver que nuevamente se ejecuta esa lógica y traer los datos de ese paquete ahora todas la sintaxis que vemos aquí de hecho es una sintaxis que puede ser mejorada por darles una idea para poder escribir esto una sintaxis mucho más moderna seriedad de esta forma en las últimas versiones ya os tienen que analizar y utilizar tanto promesas podemos utilizar también a 5 white que es una forma más fácil de escribir las promesas bien supongamos que yo quiero aquí le digo que voy a solicitar fecha vamos a ejecutar nuevamente le digo cuando utiliza fecha voy a solicitar esta dirección la misma dirección y le digo que utilizando fechas como estos o ciento no en lugar de utilizar ondeen yo le puede ser ok estos cinco y le colocan weight entonces esto es como marcarlo como asíncrono esto cuando termine me va a dar una respuesta lo voy a abordar una respuesta le dio con un responso y esta responsable que voy a convertir en un james jones entonces le digo response puntos jason ahora éste ya sabes justamente código asíncrono así que nuevamente a un colocarle a white y finalmente me va a dar un dato entonces voy a colocar la idea y está esto de aquí es básicamente lo equivalente que tenemos aquí arriba entonces lo mismo luego puede mostrarlo por consola le digo teta entonces hasta aquí vendría a tener esta parte derechos y comentamos esto lo que tengo aquí es equivalente a lo que tengo aquí que es mucho más fácil de leer ahora tan sólo un asunto y es que los a white funcionan si están dentro de una función con una palabra clave especial es decir para que funcione esto tengo que colocarlo dentro de una función que se llama por ejemplo lo audita dentro colocó el código y para que funcione aquí la función tiene que tener una palabra clave llamada zinc entonces de esta forma ya tenemos la misma lógica de antes y hasta ese momento si yo comento este fecha y tan sólo dejó este código y guardó y vengo aquí en la consola tengo tan solo línea 2 porque no he llamado esta función pero le puede decir ok ejecuta el lo audita y sí guardo pueden ver que ya está el arreglo con los 100 elementos entonces de nuevo puedo cortar esta lógica de aquí es decir puedo reutilizar esta lógica de recorrer los elementos lo puedo seleccionar y se mantiene de hecho todo esto se mantiene tal cual porque aquí lo único que estaba haciendo recorrer los elementos no estaba haciendo nada sin crono entonces yo puedo guardarlo y si venimos esto es lo mismo de antes ok entonces si se dan cuenta lo único que estoy mostrándoles con esto es otra forma de poder pedir los datos al final esto viene a partir de lo que se conoce como sincronía en javascript de nuevo esto no es un curso de sincronía es tan solo darles una idea de lo que necesitan pero pueden ver que esta es la forma un poco más sencilla y moderno utilizarlo y bueno esto ha sido la introducción de algunos conceptos básicos de javascript antes de aprender riad yo sé que hay muchas cosas en que profundizar pero justamente la descripción le voy a dejar una lista de otros conceptos de javascript que les he explicado aquí y estaban mucho más detallados cada uno en sus propios cursos entonces si quieren montar muy bien el lenguaje antes de entrar en riad podrían ir en esos recursos pero yo creo que por ti de practicar estas ideas que les he mostrado creo que podría inmediatamente empezar con riad y luego a la par estudiar más a fondo el lenguaje entonces le dejo aquí al finalizar el vídeo el curso de riad que publicado hace algunos días y esto fueron a poder empezar a aprender cómo utilizar lo utilizado estos conceptos que les he mostrado el día de hoy y muy bien esto

Tags

Humberto Molina

Post a Comment

Publicar un comentario

Artículo Anterior Artículo Siguiente