JavaScript moderno para principiantes: parte 2

1. Introducción: [ MÚSICA] Hola, bienvenidos a esta clase. Como todos sabemos, aprender cualquier nueva habilidad puede ser un reto y JavaScript no es una excepción. JavaScript tiene una gama tan amplia de características y cosas para las que se puede utilizar, y esto a menudo puede dejar a los principiantes en una situación difícil preguntándose por dónde empezar, así que por eso he creado esto clase. Esta es la Parte 2 del edificio de clase sobre la fundación que has aprendido en la Parte 1. Si no has tomado la Parte 1, asegúrate de pasar por esta clase primero a menos que ya tengas alguna experiencia en JavaScript y quieras cubrir los temas de esta sección. Si no has tomado una de mis clases antes, llamo Chris y llevo más de 20 años construyendo sitios web. También he estado enseñando estas habilidades por más de siete años, ambas clases de video junto a principales campamentos de arranque de desarrollo web también. Esta clase tiene muchos temas de JavaScript, incluyendo bucles y declaraciones condicionales, una mirada profunda de objetos, matemáticas, fecha y temporizadores junto con ella dibujando al lienzo. Todos estos temas que he cubierto de una manera clara y estructurada vez que construye proyectos prácticos a medida que avanzamos, incluyendo casos de uso de ejemplo del mundo real y también algunos mini desafíos también a lo largo con la construcción un juego de pizza chef para combinar muchas partes de lo que has aprendido. Este proyecto será razonablemente grande, pero lo vamos a descomponer, para que puedas ver cómo encajan todas las partes. Posteriormente descubriremos algunas de las partes más complicadas como JavaScript asíncrono, alcance, levantamiento y cierres. Antes de terminar con dos proyecto final más , s vamos a una pequeña aplicación llamada Saliendo tan pronto, que es un pop-up de intención de salida, que se utiliza para seducir a los visitantes con una oferta cuando intentan salir de tu sitio. Si todos completando la clase fielmente funcionando carrusel de imagen JavaScript. Incluye una carpeta de proyecto a la que agregaremos a medida que avanzamos a lo largo esta clase y también se desarrollará como referencia útil en el futuro también. Gracias por tu interés en esta clase y te veré en la primera lección. 2. Descargar carpetas de proyecto: Si ya has completado la primera parte de esta clase, puedes continuar con los mismos archivos de inicio exactos que usamos en la parte 1. Esta parte 2 de la clase comenzaremos en la Sección número 6, todo el camino hasta el final. Empezaré en la primera lección que es para bucles. Si tienes esto, eres completamente bueno para ir a la siguiente lección. Si estás saltando a la parte 2 sin tomar parte 1, que también está completamente bien, pero tendrás que ir a github.com y descargar los archivos de inicio que vamos a estar usando a lo largo de este clase. Sigue el enlace que puedes ver en la pantalla aquí. Una vez que aterrices en esta página, haga clic en el botón verde carbón, y luego descargue esto como un archivo zip. Abre esta carpeta de proyecto dentro de tu editor de texto favorito. Voy a estar usando Visual Studio Code, pero puedes usar cualquiera que prefieras. Esto es todo lo que necesitas para empezar , y te veré a continuación. Empezaremos echando un vistazo a for-loops. 3. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos, y esto te da la oportunidad hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña de proyecto y recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. Para bucles: Bienvenido de nuevo. Esta sección va a ser todo acerca de bucles. Vamos a arrancar las cosas con un for-loop. Cuando empezamos a trabajar con matrices antes, miramos algunas formas diferentes de repetir ciertas tareas usando estos bucles. El tipo de bucle que miramos fue map, y forEach, ambos fueron métodos de matriz. Los bucles significan que podemos repetir tareas mucho más fácil. A pesar de que existen diferentes tipos de bucles generalmente siguen repitiendo una tarea varias veces. A menudo, la principal diferencia es cómo le decimos al bucle que luego detenga estos mapas, y los bucles forEach eran métodos de matriz, pero los bucles no son exclusivamente para matrices. También hay diferentes tipos de bucles que podemos usar para poder recorrer prácticamente cualquier cosa que necesitemos. Este video va a estar enfocándose en un for-loop. Así es como se ve un básico for-loop. Se establece un poco como una función o una declaración if. Aviso en el interior de los corchetes que es de dos puntos y semicones. Éstas se utilizan para pasar en las expresiones libres que configuran cómo funcionará nuestro bucle. Un ejemplo realmente sencillo aquí es solo usarlo para aumentar el número y veremos algunos mejores ejemplos en tan solo un momento. Pero para la primera expresión, contiene el valor inicial o inicial para nuestro bucle. Si solo queremos empezar en un número cero o aumentar cada vez, configuramos una variable para que sea cero, así como esta. Segundo de todo, tenemos una condición y aquí veremos que tenemos el número es menor a 10. Esta condición determina si el bucle es seguir adelante. Si esto es cierto, el bucle continúa. Si es falso, el bucle entonces terminará. Por último, si no hacemos algo en cada bucle, la segunda condición siempre será cierta. Aquí aumentamos el valor del número en uno en cada bucle. Por lo tanto podemos revisar la condición después de cada uno de estos cambios. Para correr a través de este ejemplo después de que cada bucle se ejecute, el número se incrementará uno hasta que alcance el número 10, provocando que la segunda sentencia resulte entonces en false, causando que el bucle a luego terminar. Es decir, este ejemplo en particular registraremos 10 valores, que serán cero a través del número nueve. Si tienes la variable ya declarada fuera del for-loop, puedes dejar fuera e incluir solo las declaraciones segunda y tercera, y las cosas seguirán funcionando igual que antes. Además, vale la pena señalar verá muchos ejemplos con el nombre de la variable, la letra i, que es abreviatura de inicializador o valor inicial. Esto generalmente es si solo estamos utilizando esta variable para los fines del bucle y no necesitamos nombres de variables descriptivos en otro lugar. Nota, aún debemos mantener los puntos y coma en su lugar para que podamos separar claramente estos tres valores en algunos ejemplos. Vamos a saltar a nuestros archivos de inicio. Para esta sección salta a la Sección número 6, que es bucles y condicionales. La primera lección, que es para-loops, salta a la página de índice, que por ahora está prácticamente vacía. Después copiaremos el camino a esto y luego pegaremos esto dentro del navegador. No tenemos contenido en este momento, solo el título for-loops, y luego el guión vacío abajo en la parte inferior para que podamos trabajar en. Vamos a saltar dentro de la sección de guiones y podemos empezar a crear nuestro primer for-loop. Al mirar hacia arriba antes, usamos la palabra clave for, bracket iniciamos nuestras declaraciones libres, y luego las llaves rizadas. Para este ejemplo, vamos a simular a alguien comiendo una pizza con 10 rebanadas diferentes. Después deduciremos una rebanada de pizza después de cada uno de estos bucles. En primer lugar, nuestro inicializador o nuestra variable, que llamaremos rodajas. Estableceremos esto para que sea el valor inicial de 10 y al siguiente vamos a mantener el bucle funcionando siempre y cuando estas rodajas sean iguales o mayores que el valor de uno agregue un punto y coma. Entonces deduciremos el valor de los rebanados por el valor de uno cada vez. Ahora sólo para recapitular, vamos a empezar con 10 rebanadas o con el valor de 10. Después de terminar el bucle, esto deducirá una rebanada para luego ser igual a nueve, nueve es mayor o igual a uno por lo que el bucle por lo tanto seguirá funcionando. Entonces correrá por segunda vez. Entonces esto deducirá las rebanadas de pizza a ser ocho y luego siete, luego seis. Seguirá funcionando hasta que el valor sea mayor o igual a uno. Dentro de los tirantes rizados, agregamos el código que quieres ejecutar. Agarra un ejemplo sencillo, podemos hacer un registro de consola con el valor de las rodajas. Esto se va a deducir de 10 todo el camino hasta uno. Después de esto, un segundo registro de consola con el texto de cada sector. También podemos agregar cosas como declaraciones condicionales dentro de aquí también. Esta declaración condicional va a verificar si los rebanados son iguales al valor de uno. Si lo es, estaremos en su lugar en un registro de consola con el texto de no queda rodajas. Salvemos esto y saltemos a las Herramientas de Desarrollador. haga clic derecho y “Inspeccione” en la consola. Vemos que el valor de 10 en el primer bucle se deduce entonces por el valor de uno cada vez. Nos ponemos todo el camino hasta el valor de uno y luego toma una nota de rebanadas a la izquierda. Algo que puedas ver, pero probablemente no tanto falta un segundo valor, que es esta condición. Nosotros sí necesitamos dejar en el punto y coma en su lugar sin embargo y antes de probar esto, es posible que ya esté manchando un problema. Si no tienes ninguna condición. No tenemos forma de detener un bucle. Esto simplemente seguirá funcionando infinitamente. Esto es algo de lo que debemos tener cuidado a la hora de crear bucles. Debemos asegurarnos de que la condición de los bucles eventualmente se convierta en falsa. De lo contrario, terminaríamos en un bucle infinito, que por lo tanto provocaría que el navegador se bloqueara. No hagas esto y no sigas junto con este ejemplo. Pero te voy a mostrar lo que pasa dentro del navegador. Si guardamos esto, actualice. Vemos que el bucle se ejecuta miles de veces, lo que ocupa todos los recursos del navegador, provocando que eventualmente se bloquee. Para evitar esta trituración o este bucle infinito, necesitamos usar manualmente la palabra clave break dentro del bucle cuando queremos que luego se detenga. Por ejemplo, si vamos a esta sección inferior, sabemos dentro de la declaración if este es el último bucle. Lo que podemos hacer es que podamos agregar la palabra clave break. Esto luego sale del bucle y luego detiene que el código se ejecute. Podemos probar esto abriendo el navegador una vez más. Abre la Página de Índice, y luego salta a las Herramientas de Desarrollador y a la consola y nuestro bucle, ahora funciona como se esperaba. Otra cosa útil que podemos hacer con for-loops es crear múltiples elementos, como elementos de lista. Usando un bucle, podemos crear, digamos, 10 elementos con mucho menos código de lo que haríamos si escribiéramos esto 10 veces. Hagamos esto justo dentro del script, crearemos una constante llamada ul, donde crearemos una nueva lista desordenada. Hacemos esto con document.createElement. Pasando en los elementos ul que se desea crear. Justo antes de saltar a la creación de los elementos de la lista, anexaremos nuestra lista desordenada al cuerpo. Agarra el cuerpo con documento.Body.appendChild, pasando en nuestra variable ul. Apenas volviendo a lo que miramos antes, vamos a modificar nuestro ejemplo de pizza y reemplazar esto con el nombre variable de i. Recuerda que es una convención común de nomenclatura para una variable dentro de un bucle. Inicialmente estableceremos esto para que sea un valor de uno. Vamos a hacer esto a la inversa desde antes. Empezaremos con el valor inicial de uno, y luego mantendremos funcionando el bucle mientras i sea menor o igual al valor de 10. Por lo tanto, necesitamos aumentar esto por el valor de uno en cada bucle, lo que hará que el bucle se ejecute 10 veces. Podemos mover todos los contenidos desde dentro aquí y luego crear nuestros elementos de lista. Vamos a crear nuestro elemento de lista seleccionaremos el pase document.createElement en el elemento de lista. Almacenar esto dentro de una constante llamada li. Esto luego nos dará un elemento de lista vacío. Tenemos que luego colocar el contenido dentro de la etiqueta de apertura y cierre. Podemos hacer esto con documentos.createTextNode, y podemos colocar en cualquier texto de muestra que queramos dentro de aquí. En lugar de una cadena regular, voy a insertar una variable usando los backticks. Diremos elemento de lista colocado en nuestra variable con el símbolo $ y los tirantes rizados. Sabemos desde arriba tenemos una variable llamada i, que es igual al valor de una. Entonces si sigues aumentando por el valor de uno para cada bucle. Podemos comprobar esto colocando esto dentro de aquí. Esto debe comenzar con el valor del elemento de la lista uno, elemento de la lista dos, y así sucesivamente. Todo esto dentro de una constante, digamos texto. Entonces podemos fusionar estos dos juntos accediendo al padre, que es el elemento de lista usar AppendChild. Entonces coloca nuestro texto dentro del elemento de lista. Por último, cuando creamos cada uno de estos elementos de la lista, entonces queremos empujarnos a nuestra lista desordenada. De la misma manera que lo hicimos con nuestro ítem de lista. Seleccionamos nuestra lista desordenada AppendChild, donde pasamos en nuestro ítem de lista. Echemos un vistazo a esto, actualice el navegador. Esto solo tiene que ser i para que coincida con la variable refresh. Ahora vemos el valor del elemento de lista uno todo el camino hasta el punto 10 de la lista. Como se puede imaginar, si creamos estas 10 veces separadas, esto resultaría en mucho más código. El uso de este bucle lo convierte en un ejemplo mucho más corto. 5. Para el trabajo de la empresa...: Ahora vamos a cubrir dos tipos más de bucles, que se llama for-in y también for-of. Se ven bastante similares y ambos pasan por encima de algo como cabría esperar, pero la diferencia clave es lo que pueden recorrer. Abramos los archivos de inicio y veamos qué tenemos. la barra lateral, saltando a la lección Número 2 en esta sección, que está for-in y for-of, y luego abre esto dentro del navegador. En primer lugar, vemos una sección for-in la cual tiene un objeto de producto con diversas propiedades anidadas en su interior. Como es de esperar, así es como funciona un bucle for-in. Utilizamos este tipo de bucle para recorrer las propiedades dentro de un objeto, como el nombre y el tamaño. Ahora, esto tendrá la sección for-of, y esto se usa para recorrer objetos iterables. Un objeto iterable es básicamente algunos de ellos que el bucle sobre, como una matriz o una lista de nodos. Empecemos por la parte superior con nuestro bucle for-in, y vamos a usar esto para recorrer nuestros objetos de producto. Podemos hacer esto justo debajo. Esto se parece un poco a nuestro for-loop del video anterior, configuramos la palabra clave for, los corchetes y luego los tirantes rizados. Saltando al primer conjunto de corchetes, y así funciona un bucle for-in. Establecemos una variable, y llamaremos a esta propiedad ya que estamos haciendo un bucle sobre todas las propiedades dentro de este objeto, que está en nuestro objeto producto. De ahí viene el término for-in, tenemos la palabra clave for y luego la palabra clave in dentro de los corchetes. Estamos haciendo un bucle sobre este objeto de producto completo y luego estamos almacenando el valor de la propiedad dentro de esta constante. Veamos cómo se ve con un registro de consola del valor de nuestra variable, que es propiedad, actualización, y vemos el valor de SKU, el nombre, el tamaño y el color. Esto nos da el valor de la clave, pero ¿qué pasa con el valor real de la propiedad como camisa fresca, media, y también azul? Bueno, también podemos hacerlo accediendo a nuestro producto y luego usando los corchetes. Echemos un vistazo a cómo se ve esto dentro de un registro de consola. Podemos usar las garrapatas traseras para insertar una variable, y comenzaremos insertando el valor de la propiedad. Estas son solo las claves que veremos ya dentro de la consola, pero después agrega dos puntos para separar esto y luego insertar nuestra segunda variable. La segunda variable va a ser cada uno de estos productos. Vamos a agarrar el producto, y luego podemos usar los corchetes, para reducir esto a una propiedad en particular. Estamos pasando el valor de SKU, nombre, color o tamaño. Si guardamos esto y refrescamos, ahora hemos creado una nueva cadena para cada una de estas propiedades, que incluye tanto la clave el valor de la propiedad. Así es como funciona un bucle for-in para recorrer un objeto. Ahora echemos un vistazo a para-de. Quiero comentar esta sección y luego bajar al fondo debajo de nuestros permisos. De nuevo, esto comienza con la palabra clave for, los corchetes, y los tirantes rizados, y también toma una variable. Digamos valor const, que se va a establecer a cada uno de los valores dentro de la matriz. Esta vez en lugar de usar la palabra clave in que usamos, y luego pasar exactamente lo que queremos recorrer. En nuestro caso, es la matriz de permisos desde justo arriba. Esto es en permisos, y luego dentro de los tirantes rizados, podemos acceder a nuestro valor. En el primer bucle, el valor es usuario, el segundo bucle es editor, y luego admin, guardar y refrescar, y ahí están nuestros tres valores dentro de la consola. Como se puede ver dentro de sus comentarios en la parte superior, cosas como una lista de nodos también se pueden enredar también. Recuerda, cuando usamos algo así como selector de consultas todo para obtener múltiples elementos, una lista de nodos es lo que recuperamos. Para probar esto, también necesitamos algunos elementos para recorrer. Saltaré fuera de estos scripts, crearé una lista desordenada con algunos elementos de lista de ejemplo justo dentro. Vamos a duplicar esto dos veces más en lugar de giro Número 2 y 3, y luego podemos recorrer nuestros tres elementos de la lista, que luego devolverán una lista de nodos, por lo tanto, podemos usar el bucle for-of. paso 1 es acceder a los tres elementos de la lista. Voy justo encima de nuestro bucle for, crear una llamada constante enlaces, agarrar estos con document.QuerySelector, de hecho, necesitamos QuerySelectorAll ya que estamos accediendo a múltiples elementos y una vez que agarres nuestra lista artículos. Ahora, en lugar de acceder a nuestros permisos, lo que vamos a hacer es acceder a todos los enlaces, que son nuestros tres elementos de lista y luego cambiar el nombre de la variable al enlace. El valor del link en nuestro primer bucle es el primer elemento de la lista, y el segundo elemento de la lista, y luego el tercero. Podemos hacer lo que queramos con estos enlaces. Para este ejemplo, voy a acceder a nuestros enlaces y luego usar addeVentListener. Escucha un clic en cualquiera de estos. Esto entonces ejecutará una función, vamos a pasar en la información del evento , crear una alerta. Para acceder a los contenidos dentro de cada uno de estos elementos de lista como 1, 2, y 3, podemos hacerlo accediendo a la información de eventos, seleccione e. target, que es la información al respecto elemento de lista particular en el que se hizo clic, y luego mostrar el innerHTML de ese elemento. Vamos a probar esto. Ahora, si nos refrescamos, tenemos nuestros enlaces gratuitos en la parte superior, vamos a hacer click en Número 2, ahí está el innerHTML. El número 3, y también el Número 1 funciona correctamente también. Este es un par de varianza realmente útil en el for-loop, que podemos usar para recorrer cosas como matrices, y lista de nodos, y también objetos también. 6. Mientras y hacer... mientras: En mi opinión, mientras que los bucles se ven un poco más simples que los cuatro bucles que miramos antes. La configuración básica vuelve a lucir similar a muchas otras cosas en JavaScript, como una función básica y if declaraciones e incluso el bucle for también. Un bucle while seguirá funcionando siempre y cuando una condición se establezca en true. Para este ejemplo, tenemos una variable numérica simple y luego el bucle seguirá funcionando mientras que el número es menor a 30. Esta comprobación se realiza antes de que se ejecute el código en el bucle, por lo que si es falso el bucle se detendrá. Al igual que con el bucle for, también necesitamos una forma de detener realmente las cosas para que no se convierta en un bucle infinito. Hacemos esto dentro del bucle incrementando el valor del número en uno en cada bucle. Lo que significa que correrá 30 veces antes de que luego se detenga. Vamos a ir a nuestros archivos de inicio y darle una oportunidad a esto. La siguiente lección que necesitamos es el número 3. Es la sección de bucle while. Abre esto, y también dentro del navegador también. Como se puede ver, tenemos un archivo de arranque vacío con el guión en la parte inferior. Lo que haremos dentro de aquí es configurar un par de variables. En primer lugar, una constante llamada StadiumCapacity, y establecer esto igual a un valor de 100. Esta es la capacidad del estadio y a continuación vamos a montar una segunda variable, que va a ser por el número de aficionados a los que actualmente hemos entrado. Ya que esto se puede aumentar, necesitamos usar la palabra clave y establecer esto igual a un valor de CurrentlyEntried, que comenzará en el valor de cero. Lo que queremos hacer es seguir ejecutando un bucle mientras que el valor de CurrentlyEntried es menor que el StadiumCapacity. Un bucle while es ideal para esto. Configuramos nuestra palabra clave while, los corchetes, y luego las llaves rizadas justo después. Lo que vamos a hacer es mantener este bucle funcionando mientras que el valor de CurrentlyEntried, que es cero, es menor que el StadiumCapacity. Básicamente, si cero es menos de 100, entonces se ejecutará el código dentro de aquí. Colocando un log de consola con un texto de enter, y deberíamos poder pasar a la consola y echar un vistazo a esto. Pero justo antes de hacer esto, demos un paso atrás y echemos un vistazo a este bucle. Si pensamos en esto, queremos echar un vistazo a nuestra condición donde actualmenteEntrados es menor que el StadiumCapacity. Por el momento, no tenemos forma de cambiar estos dos valores variables. Básicamente esto siempre será el valor de verdadero. Esto resultará entonces en un bucle infinito y nuevamente causará un accidente dentro del navegador. Para ejecutar solo este bucle while una cierta cantidad de veces, necesitamos una forma de aumentar el valor de CurrentlyIntroducido en cada bucle. Esto es bastante simple. Simplemente accedemos a nuestro valor y luego usamos plus plus, lo que aumentará esto por el valor de uno en cada bucle hasta el valor de 100. Una vez que esto llegue al valor de 100 esta condición ya no será verdadera, lo que significa que esto hará que nuestro bucle se detenga. Vamos a revisar esto dentro del navegador, refrescar y saltar a la consola. Bien y vemos nuestro texto de enter se ha repetido 100 veces. La varianza de este bucle while es do-while. Esta es una versión cambiada de este bucle while. Antes dentro de las diapositivas, sí mencioné que el código dentro de este bucle siempre se ejecutará después de que se haya comprobado esta condición. Básicamente, si esto resulta en false, el código dentro de este bucle nunca se ejecutará ni una vez. Podemos voltear esto y asegurarnos que el código se ejecute al menos una vez y luego realizar la comprobación después. Esto es útil si queremos siempre asegurarnos de que el código se ejecute al menos una vez antes de que el bucle se haya detenido. Para ello, justo por encima nuestra sección while crearemos una sección do. Vamos a decir que sí, abre las llaves rizadas, y como siempre queremos que esto corra una vez, solo saltamos directamente a los tirantes rizados, no necesitamos agregar ninguna condición. Entonces podemos agarrar nuestro código del bucle while. Corta esto fuera de lugar. Agrega esto en la sección do. Voy a quitar los tirantes rizados del bucle while. Como se puede ver, el código ahora se encuentra dentro de la sección do, significa que esto siempre se ejecutará al menos una vez antes incluso de realizar nuestro cheque. Nuestro cheque sigue siendo cierto, esto seguirá funcionando la segunda vez, en nuestro caso, todo el camino hasta 100. Vamos a revisar esto. Podemos guardar esto y refrescar el navegador. Seguimos obteniendo exactamente los mismos resultados que antes. Podemos probar esto estableciendo el valor de CurrentlyEndured para ser 100, que luego establece que esto sea falso. Si ahora guardamos esto y refrescamos, vemos nuestro valor de registro de consola única de enter porque nuestro código se ejecuta primero y luego realizará la comprobación dentro del bucle while. Esta es solo una alternativa dependiendo de si siempre queremos que el código se ejecute primero o primero pruebe la condición antes de ejecutar cualquier código dentro de nuestro bucle. 7. Si / Otras Declaraciones & Anidación: Para este video salta a la sección de sentencias if-else y también abre esto dentro del navegador. Se puede ver en la parte superior tenemos un objeto de usuario ya configurado y también if declaración justo debajo. Por lo que hemos utilizado declaraciones if unas cuantas veces ya durante ejemplos anteriores. No hay mucho más que añadir a ellos de lo que ya hemos cubierto. Simplemente ejecutan algún código entre estas llaves rizadas. Si la condición dentro de aquí se establece para ser cierta. Usando este ejemplo, tenemos un objeto de usuario en la parte superior. Esto resultaría en true ya que tenemos un objeto presente, lo que significa que nuestro registro de consola funcionará. Si el usuario se desconectara, tal vez establecería nuestra variable como nula, así, para que el usuario sea igual a null, lo que resultaría en un valor falso y el código dentro del if sentencia no se ejecutaría. Por lo que aquí estamos manejando si la condición es cierta. Pero ¿qué pasa si también queremos manejar si la condición es falsa? Bueno, aquí es donde más las declaraciones entran en juego. Los colocamos inmediatamente después la declaración if y este bloque de código se ejecutará en todos los casos que no estén cubiertos por la sección if. Tenemos esta configuración de ejemplos similares dentro de los archivos de inicio y aquí solo manejamos la condición si el usuario está conectado. Puede que estés pensando, por qué no solo manejar la condición de cierre de sesión debajo de esto. O podríamos hacer algo como esto. Podríamos hacer un registro de consola o cualquier código que quieras, donde podemos decir que el usuario está desconectado. Bueno, probemos esto y veamos qué pasa si refrescamos y saltamos a la consola. Aquí podemos ver que el registro de la consola se ha corrido dos veces. Tenemos el usuario está conectado y también el usuario está desconectado. Así que obviamente para algo sensible a la seguridad, como un usuario que está conectado o desconectado, solo queremos que se ejecute una de estas condiciones. Esto, podemos configurar nuestras declaraciones if, que tenemos arriba, seguidas de la declaración else. Vamos a quitar el registro de la consola. Estoy colocando la sección else y agrego nuestro código dentro de aquí. Vamos a refrescar y vemos que el usuario está conectado ya que tenemos un objeto de usuario presente en la parte superior. Si también entonces cambiamos esto para que sea lo contrario y establecemos que el usuario sea igual a un valor falso de null. Esto debe entonces ser usuario está desconectado. Si quisiéramos, también podríamos agregar múltiples declaraciones if a y simplemente empujar nuestra declaración else hacia abajo. Entonces en el medio podemos sumar una segunda declaración if, al igual que lo hicimos anteriormente. Podemos revisar una segunda condición como un usuario o rol, que actualmente se establece en admin. Podemos comprobar si este es un valor particular y si está dentro de las llaves rizadas haremos un registro de consola, digamos, Hey admin, prueba esto, refrescar. Ahora vemos que el usuario está conectado y también el rol admin. Esto funciona, pero esto también presenta un problema, tenemos que ser realmente cuidadosos con este tipo de configuración. Porque esta otra declaración, que tendremos abajo en la parte inferior inmediatamente sigue la segunda declaración if. Esto significa que ahora la sección else solo se ejecutará si el rol del usuario no está configurado en admin, lo que no tiene sentido. Entonces teníamos un usuario como null, así que con el no estamos logueados. Refrescar. Esto ahora arrojará un error ya que estamos tratando de acceder al rol de punto de usuario, que ya no está disponible porque ya no tenemos nuestros objetos de usuario. Para este tipo de uso ese ejemplo para que sea un poco más sentido y para ser más factible, solo queremos comprobar si el rol del usuario es igual a admin, en realidad iniciaron sesión. Para ello, podemos anidar nuestras declaraciones if recortando la segunda declaración if. Podemos pegar esto dentro del primero. Esto nos lleva de vuelta al primer ejemplo. Tenemos dos cheques de nivel superior. Tenemos la declaración if, el usuario está conectado seguido de la sección else justo debajo. Entonces la declaración if que está anidada en el interior, solo arruinará si el usuario realmente ha iniciado sesión. Si el usuario ha iniciado sesión, se ejecutará este registro de consola. Entonces, si sucede que también se inician sesión como el rol de administrador, también se ejecutará el segundo registro de consola . Vamos a probar esto. Refresca, y el error ahora se borra. Vemos que el usuario está desconectado porque el usuario está configurado en null. Vamos a reinstaurar esto, el nombre para ser igual a cualquier cosa en el rol de vuelta a admin. Con esto ahora en su lugar, ahora tenemos un usuario. Por lo que debe ejecutarse el primer registro de consola. También tenemos un rol de usuario que es igual a admin. Ahora deberíamos ver dos registros de consola dentro de aquí. Así es como podemos usar declaraciones de nivel superior if else y también cómo podemos anidar una declaración if en el interior también. Si quisieras, también podrías ir aún más allá terminar justo después de la sección si anidados, también podríamos colocar en otra sección también para que pudiéramos hacer un registro de consola. Para esta sección, sabemos que el usuario realmente está conectado, pero también querremos comprobar si no son el administrador. Por lo que aquí esto se ejecutará si son el administrador. De lo contrario, solo diremos, Hey usuario, refrescar. Seguimos viendo hey admin ya que el rol está establecido a esto. Pero si cambiamos esto para que sea suscriptor, la sentencia anidada if ahora es falsa, lo que significa que ahora se ejecutará la sección de usuario hey. Si quieres. También podrías ir tan profundo como queríamos anidando múltiples si no secciones dentro de las anidadas también. Pero hay que tener cuidado de no ir por la borda y hacer que el código sea difícil de leer y también de entender para otros desarrolladores también. regla general, generalmente podemos cubrir la mayoría de los casos de uso sin necesidad de profundizar. Entonces si encuentras que tal vez tengas tres o cuatro niveles de profundidad con si declaraciones o cheques, generalmente hay una mejor manera de hacer las cosas. 8. Si no: Dentro de la carpeta de esta lección, que es la sección else if, encontrarás justo debajo dentro del script tenemos el mismo ejemplo del video anterior. Aquí estamos manejando dos condiciones de primer nivel que registramos. En primer lugar, si el usuario está conectado y luego otra sección captura lo que sucede si el usuario no está conectado. Dentro de la sección logueada, también tenemos una sección anidada si otra. Agrega un saludo diferente si el usuario es igual a admin. Tenemos dos opciones en el nivel superior y también dos opciones anidadas. Pero ¿qué pasa si quisiéramos una tercera opción también? Para ello, también tenemos else if. Echemos un vistazo a esto, vamos a simplificar este ejemplo eliminando las declaraciones anidadas. Dentro de aquí, eliminaremos el anidado si más nos deja con un simple conectado o cerrado sesión. Si recuerdas del video anterior, echamos un vistazo a cómo manejar brevemente una tercera condición agregando una segunda declaración if, así como esta. Pero el problema que esto nos da es que la sección otra ahora está conectada a nuestra segunda declaración si. Esencialmente, es decir, nuestra primera declaración si ahora está desconectada. Si aún queremos mantener los tres conectados sin relación entre sí, podemos convertir este segundo uno en otro si, algún lugar más. Justo antes de la sección if, entonces podemos agregar una segunda condición dentro de aquí. En primer lugar, queremos comprobar si el usuario está conectado, y luego usando el doble ampersand, también podemos proporcionar un segundo cheque. Podemos comprobar si el user.role es igual al suscriptor, y si lo es, entonces ejecutaremos el código dentro de aquí. Ahora solo colocaremos en un simple registro de consola diciendo lo else if sección se ha corrido, guarde esto, y luego sobre al navegador y veremos qué pasa dentro de aquí. Vemos el texto de usuario iniciado sesión. Puede que te estés preguntando por qué vemos el texto de solo usuario iniciado sesión y no también el resto si la sección ha corrido porque después de todo el usuario está presente y también el usuario.role es igual al suscriptor. Bueno, la razón es porque sólo se correrá una de estas secciones. Si se ha cumplido la condición, se ejecutará el código dentro y no irá más abajo el resto de estas secciones. Efectivamente, sólo se ejecutará el primer partido. Si queremos que sea más específico con la primera sección, también podríamos copiar este user.role soltar esto en la primera sección y también podemos comprobar si esto es igual a admin. Dado que nuestro rol de usuario es igual al suscriptor, ahora deben ser falsos. Porque en ningún otro lugar si sección para correr ahora. Vamos a guardar esto y probar esto en el navegador. El else if sección ahora se ejecutará. Dado que esta es nuestra primera sección que da como resultado a través, por lo que ahora podemos hacer lo que queramos en cada una de estas secciones, podemos mostrar y ocultar contenido dependiendo del rol del usuario. Podemos redirigirlos a un área de cuenta. Podemos deshabilitar funciones las que el usuario puede no tener acceso o cualquier otra cosa que posiblemente se le ocurra. También podemos usar varias otras secciones si también. Si quisiéramos revisar más de estas tres condiciones, también podríamos hacer lo mismo justo después de la sección else if, colocada en una segunda. Probablemente esté condicionado desde justo arriba. Esta vez, comprobaremos si el user.role es igual al autor. Si se coloca en un log de consola, dale a esto un guardado y como cabría esperar, deberíamos ver el mismo resultado que antes ya que tenemos el conjunto de suscriptor, que es un partido para esta sección. Pero si ahora cambiamos esto para ser la oferta, la sección if ahora es falsa y luego la primera más si sección también es falsa y nuestro nuevo registro de consola con el texto de autor, ahora se ejecutaría dentro de la consola. Por último, si ninguno de estos, si o bien si las secciones son ciertas, así que cambiamos para ser algo así como usuario, ahora deberíamos volver a usar la sección else abajo en la parte inferior. 9. La sentencia switch: La declaración Switch es una forma de proporcionar tantos resultados como necesitemos en base a una sola condición. También podemos proporcionar múltiples resultados con declaraciones if y si más declaraciones como lo vimos anteriormente. Pero como descubrimos, necesitamos agregar algo para comprobar contra cada una de estas condiciones como cuando revisamos cosas como el rol del usuario para cada una de estas condiciones. Con una sentencia switch, sin embargo, solo probamos contra la misma condición para cada uno. Justo aquí con nuestra variable de pizza favorita. La sentencia switch justo debajo, nuevamente, se ve similar en su configuración a cosas como las declaraciones vacías if y también for-loops. Después pasamos en lo que queremos comprobar, como nuestra variable de pizza favorita. Después en el interior, luego configuramos los diferentes estuches para manejar lo que es la pizza favorita. Aquí tendremos tres casos separados para manejar qué hacer por cada valor. Podemos tener tantos de estos casos como queramos. Echemos un vistazo al primero. Comprobamos si la pizza favorita es igual a pepperoni. Si lo es, entonces ejecutamos algún código dentro, como este registro de consola. Luego proporcionamos la palabra clave break para salir de la declaración switch una vez que tengamos un partido y esto evitará que se ejecuten todo el resto del código y todo el resto de los cheques a continuación. Esta es la misma palabra clave break que usamos anteriormente en esta sección para evitar que el navegador cree un bucle infinito. Esto seguirá funcionando hasta que se encuentre un partido, pero si no se puede encontrar uno, también podemos agregar una cláusula por defecto también. Esto siempre correrá si no hay otros partidos. al proyecto y vamos a darle una vuelta a esto. Esta vez estamos en la sección de sentencias switch y dentro del archivo de inicio, solo tendremos un objeto de usuario simple con la propiedad name y también el rol. Podemos configurar una sentencia switch para comprobar el rol del usuario y decidir si el usuario puede editar algo en nuestro sitio. Esto, podemos iniciarlo en una variable llamada CanEdit. Por lo que CanEdit se va a establecer inicialmente a un valor de false, por lo que al usuario no se le va a asignar ningún permisos de edición por defecto. Entonces podemos usar una sentencia switch para comprobar el rol particular del usuario. Si el rol particular del usuario es igual a un nivel superior como el admin o incluso un editor, entonces podemos establecer CanEdit para que sea igual a true. Al igual que hemos visto en las diapositivas, configura nuestras sentencias switch y luego pasaremos en la condición que es user.role. Abre los tirantes rizados, entonces podemos sumar nuestros casos dentro de aquí. El primer caso va a ser el usuario. Esto es solo un usuario habitual iniciado sesión. Agrega el colon. Después añadimos después lo que queremos hacer por este caso particular. Bueno, en nuestro caso queremos mantener CanEdit para que sea igual a false ya que no tienen los permisos admin ni el editor. Si este caso en particular pasa a ser cierto, no quiero usar la palabra clave break para salir del resto de las declaraciones de este switch. Esa es la primera sección. Después bajamos al segundo caso y éste va a ser suscriptor. Esto simplemente espejaría la misma condición que arriba. Podemos establecer CanEdit ser igual a false. Agrega las palabras clave break. Ese es nuestro segundo caso ahora completo. El siguiente, agregaremos un caso para el editor. Y como suena, el editor es un caso en el que queremos permitir que el usuario pueda editar. Para esto, estableceremos nuestra variable CanEdit para que sea igual a true, luego saldremos de la sentencia switch. Por último, el último caso va a ser para el admin. En el Admin sí queremos proporcionar todos los permisos que necesitan para luego editar nuestro sitio. Al igual que arriba, estableceremos CanEdit para que también sea igual a true y luego saldremos de la sentencia switch. Como habríamos visto en las diapositivas, también necesitamos agregar un caso predeterminado, que se va a ejecutar si ninguno de los casos anteriores es un partido. Ejemplo muy simple, solo coloca en un registro de consola y diremos que el rol de usuario no se puede encontrar. También estableceremos CanEdit para que sea igual a false. Ahora sólo tenemos que darle una prueba a esto. Cuando empezamos aquí por primera vez tenemos el rol de usuario para ser igual al usuario. Esto debería establecer CanEdit para que sea igual a false. Vamos a probar esto bajando al fondo, lo colocaremos en un registro de consola, colocamos en el valor de CanEdit. Veremos si esto cambia para cada uno de nuestros casos. Como sabemos ningún CanEdit será igual a false ya que actualmente tenemos el rol de usuario para ser igual a usuario. Vamos a saltar a las herramientas de desarrollador a la consola. Es falso como se esperaba. Vamos a revisar nuestra segunda condición cambiando el rol a suscriptor, refrescar y como cabría esperar, esto es falso. El tercero es el editor, esto ahora debería ser cierto. Por último, podemos probar el admin. Esto también es cierto. Sólo para coger la condición predeterminada abajo en la parte inferior, deberíamos ver el log de la consola y ellos puedeEditar ser igual a false si no tenemos un partido para cualquiera de estas cuatro condiciones. Volvamos esto a ser algo completamente aleatorio. Simplemente teclearemos cualquier papel aleatorio dentro de aquí. Refrescar. Esto es falso y el registro de la consola ahora se ejecuta como se esperaba. Sólo una cosa a tener cuidado si tenemos múltiples casos coincidentes. Si tengo dos o más casos que ambos coinciden, se usará el primer caso coincidente. También como atajo si tenemos múltiples casos, igual que tenemos aquí, que ejecutan el mismo código dentro. El usuario establecerá, CanEdit para ser igual a false y también al suscriptor. Se trata de una sección duplicada, la misma para los dos últimos casos. Ambos establecen CanEdit para ser igual a verdadero. Podemos acortar un poco este código para hacerlo un poco más sencillo. Para los dos primeros, que son exactamente iguales, lo que podemos hacer es eliminar el código del primero. Ambos casos se siguen de inmediato. Entonces este código justo después se ejecutará para cada uno de estos casos. Exactamente lo mismo para estos dos abajo en la parte inferior. Podemos mover el CanEdit y también el descanso. Estos dos están actualmente agrupados esencialmente. Podemos simplemente probar esto y si actualizamos, aún vemos que la cláusula predeterminada se ejecuta en la parte inferior. Probemos con el editor. Debe ser cierto. El admin true también. El usuario debe ser falso. Por último, el suscriptor. Esto es todo para las declaraciones switch. Sólo una cosa rápida antes de seguir adelante. Si olvidamos poner una palabra clave break en cualquiera de estos casos, todos los siguientes casos también correrían también hasta que finalmente se encuentre un descanso. Por ejemplo, si nos hubiéramos perdido una cláusula break dentro de esta sección, podemos eliminar esto. Si tenemos una coincidencia para el usuario o el suscriptor, CanEdit seguirá siendo igual a false pero luego ejecutaría el código justo debajo, y luego anularía el CanEdit para ser igual a true. Probemos esto. Tenemos el papel igual al suscriptor. Refrescar. Ahora el suscriptor CanEdit ha surtido efecto pero el programa ha seguido bajando al editor y también a la sección admin y causar una anulación por lo que CanEdit ahora es igual a true. 10. Operador condicional (ternario): Como alternativa a las declaraciones if-else que hemos mirado, Javascript también tiene un operador condicional, a menudo conocido como el operador ternario, ya que está compuesto por tres partes. Dado que funciona, al igual que if-else, las principales razones por las que se usa es ofrecer una alternativa simple de una sola línea. Al mirar este objeto de usuario, posible que deseemos revisar la edad del usuario antes de permitirles entrar. El operador condicional puede ayudar con esto. Se plantea como una pregunta. Aquí te preguntamos si la edad del usuario es mayor o igual a 18 usando el signo de interrogación. Antes, dije que el ternario está conformado por tres partes. La pregunta es solo esta primera parte. Las partes segunda y tercera son lo que queremos hacer si la pregunta es verdadera o falsa. Si es cierto, podemos hacer cualquier cosa pero este sencillo ejemplo solo tiene el texto de enter. Si es falso, que es correcto para este ejemplo, el código después de los dos puntos se ejecutará en su lugar. Ahora vayamos a los archivos de arranque y podemos echar un vistazo al ejemplo dentro de ahí. Aquí tenemos un ejemplo de cómo podemos usar una declaración if para comprobar si un usuario es admin que puede editar algo en nuestro sitio. El objeto de usuario tiene el rol de admin, y actualmente configuramos la funcionalidad CanEdit para que sea igual a false. El enunciado if está comprobando si el rol del usuario, que está justo aquí, es igual a admin. En nuestro caso, podemos establecer la variable CanEdit a true, permitiendo al usuario seguir adelante y publicar algo así como una entrada de blog. De no ser así, CanEdit será igual a false, eliminando cualquier permisos que puedan tener. Lo que vamos a hacer es convertir este ejemplo para hacer uso del operador ternario, que va a simplificar este ejemplo en una sola línea. Al igual que hemos visto en estas diapositivas, la primera parte es realmente hacer la pregunta. La pregunta que queremos hacer es si el user.role es igual a la cadena de admin. Usa un signo de interrogación, seguido de nuestros resultados verdaderos y falsos. Si el usuario es igual a admin, queremos establecer que este CanEdit sea igual a true, igual que lo hacemos en la sección true en la declaración if-else. Establece CanEdit para ser igual a true, luego separado por dos puntos, agregamos la sentencia false donde decimos CanEdit para ser igual a false. A veces dependiendo de la configuración o plugins de tu editor de texto, también puedes ver estas dos declaraciones envueltas dentro de los corchetes. Esto está completamente bien. Lo que quiero hacer ahora es comentar o eliminar las declaraciones if-else originales, y luego podemos guardar esto y pasar al navegador, actualizar, y vemos que este ejemplo se establece en true. Esto es cierto porque el user.role es igual a admin. Pero si cambiamos esto para que sea otra cosa, intentemos suscriptor, debes actualizar esto para que sea el valor de false. También podemos acortar este ejemplo aún más al asignar directamente el resultado de este operador ternario a esta variable. Lo que queremos decir con esto es más que asignar CanEdit para que sea igual a true o false, al cortar el operador condicional completo fuera de aquí, podemos entonces eliminar la asignación inicial de false, pegue esto en. Ahora en lugar de establecer nuestra variable, lo que hacemos es simplemente establecer el valor verdadero para que sea igual a verdadero y el valor falso para ser igual a falso. Ahora el resultado verdadero o falso a esto se asignará directamente a nuestra variable CanEdit. Vamos a probar esto una vez más. Actualmente tenemos este conjunto para ser falso, pero si cambiamos esto de nuevo para ser el admin, esto ahora es igual a ser cierto. Tanto el operador condicional la versión if-else son perfectamente válidos de usar. El operador condicional, como acabamos de ver, suele ser más corto y se coloca en una sola línea. Algunos argumentan que una declaración if-else es más clara y más legible, pero al final, es tu elección la que quieres usar, y cuál prefieres. 11. Tipo Coersión y Conversión: En los próximos videos vamos a cubrir algún tipo y también algunas cosas relacionadas verdaderas o falsas, que pueden darte algunos resultados extraños o inesperados. Estar al tanto de estos podría ayudarte a entender cosas como por qué y si declaración no se está ejecutando correctamente, y también te ahorrará mucho tiempo depurando. El primero es la coacción tipo. Ya sabemos sobre tipos como objetos, cadenas, y booleanos. Tipo coerción se relaciona con cómo se convierten los valores de los tipos de datos a otros tipos de datos. Mirando dentro de la carpeta de lecciones que es tipo coerción y comparación, salta al index.html donde tenemos un ejemplo sencillo. Tenemos dos variables en la parte superior con números y luego vamos a sumar ambas juntas y almacenarlas dentro del total. Una cosa a notar entre estos dos números es que el primero está envuelto dentro de estas cotizaciones por lo que técnicamente esta es una cadena. El segundo es un número, como cabría esperar. Pero, ¿qué crees que pasa cuando sumamos ambos juntos? Si estábamos agregando cadenas podemos saber qué esperar, porque esto puede combinarse para hacer una oración o una palabra. Si también estamos sumando dos números, estos dos números se sumarían juntos para hacer un nuevo total. Pero aquí, ya que estamos agregando una cadena y un número, ¿qué crees que va a pasar? Bueno, en lugar de causar un error, JavaScript está diseñado para elegir un tipo de datos al que convertir automáticamente. A esto se le llama coerción. Pero este ejemplo puede optar por convertir para que sean ambas cadenas o ambas son números. Bueno, no adivinemos. Vamos a guardar esto y entrar a la consola y ver exactamente qué va a pasar. Saltar a la pestaña de la consola y refrescar y vemos el valor de 72. El valor de 72 significa que esto se está convirtiendo a una cadena porque tenemos el valor de siete seguido del valor de dos, en lugar del valor de nueve, lo que sucedería si éstos fueran convertido para que ambos sean números. Esta conversión ha sucedido automáticamente para nosotros y esto puede ser referido como implícitamente y esta conversión implícita es lo que es la coerción. No debe confundirse, pero algo similar es la conversión de tipos. Esto funciona de manera similar a la coerción al convertir un valor de un tipo de datos a otro. Pero también podemos hacerlo nosotros mismos manualmente. Si queríamos que esto se convirtiera a un número manualmente, tenemos disponible una función numérica. La forma en que podemos usar esto es cortar nuestro número uno, que es una cuerda. Podemos acceder a una función numérica y luego colocar dentro de lo que queremos convertir a un número. Aquí convertimos una cadena a ser un número. Ahora si guardamos esto, deberíamos ver el valor de nueve en la consola, lo que significa que ambos atraen como números. Para recapitular, la coerción ocurre implícita o automáticamente. La conversión de tipos también puede suceder manualmente, igual que estamos viendo con esta función numérica. En ocasiones estas palabras se usan indistintamente, pero esta es la línea oficial de ambas. Si quisieras, también podríamos hacer lo contrario. En lugar de convertir este a un número, podríamos convertir el segundo en ser una cadena. Hacemos esto con la función string. Pase el número que desea convertir a una cadena y esto luego regresaría al valor de cadena de 72. Por esta razón, puede ser bueno convertir siempre los datos entrantes para que sean exactamente qué tipo de datos queremos que sea. Si, por ejemplo, estamos obteniendo datos de un tercero, como un servidor o una API, podemos eliminar errores y errores asegurándonos de que nuestro tipo de datos sea correcto. Por esta razón, es posible que haya oído hablar de herramientas como TypeScript, que nos obliga a declarar el tipo de datos que desea utilizar por primera vez, lo que puede eliminar cualquier error en nuestro código. Así es como funcionan las cosas con el operador plus, pero los otros operadores también nos pueden dar resultados esperados después de que se haya aplicado la coerción. También podemos ver esta coerción en acción con el mayor que o el menor que operador. Ver esto cambiará el registro de consola con el valor o los resultados del número uno es mayor que el número dos. Veamos qué pasa. Obtenemos el valor de true. Esto puede parecer un poco extraño porque aquí dentro del registro de la consola, todavía estamos comparando una cadena con un número. Pero en este caso, JavaScript los está comparando como si fueran ambos números. Este es un comportamiento loco para las personas que están acostumbradas a otros lenguajes de programación, el cual está fuertemente escrito. Significa que los datos se limitan a un determinado tipo y no se convierten. Si bien esta coerción ocurre detrás de escena, a veces los ejemplos que veremos tienen algún comportamiento bastante sensato o predecible. Pero muchas veces sí vemos algunos resultados extraños así. También podemos ver algunos resultados extraños a la hora de incrementarse también. Mira esto, en lugar de tener una constante para nuestra cuerda, lo que vamos a hacer es cambiar esto para que se deje. Por lo tanto, podemos actualizar este valor del número uno. Hagamos esto justo abajo. Accederemos a nuestra variable número uno luego usaremos plus plus para incrementar esto por el valor de una. Consola registra el valor de nuestra variable y veamos qué sucede dentro de la consola. Refresca y vemos el valor de ocho. Esto puede parecer extraño porque sabemos que número uno está inicialmente configurado para ser una cadena. Técnicamente no deberíamos poder aumentar esto por el valor de uno, como lo haríamos con un número. Lo que sucede detrás de escena con coerción es que el número uno se convierte a un número por lo tanto, podemos utilizar el incrementor. Creo que verías el valor de ocho en la consola. Como otro ejemplo, imagina que esto también fue una matriz. Si rodeamos esto dentro los corchetes que contienen nuestra cuerda dentro, ¿qué crees que pasaría ahora en la consola? Seguimos incrementando este valor. Digamos esto y veamos qué pasa dentro de aquí. Refrescar. De nuevo, esto no tiene sentido. Todavía obtenemos el valor de ocho, pero este es el mundo de JavaScript. ¿ Qué pasa si comentamos este plus, más y agregamos directamente un valor a esta matriz. Digamos más 2, guardar, refrescar, y vemos el valor de 72. De nuevo, esto puede parecer un comportamiento loco, pero lo que ha sucedido detrás de escena, como habrás adivinado, es que esto se ha convertido a una cadena. Si quisieras probar que esto era una cadena, o si queríamos volver a verificar, también podríamos usar typeof dentro del log de la consola. Voy a escribir de jugo antes de nuestro número uno, guarde esto y esto luego emitirá el tipo de datos que es una cadena. También aquí hay algo más realmente extraño también. Esta es una cuerda como acabamos de ver pero ¿qué crees que pasaría si volvemos a introducir los incrementos? Bueno, vamos a descomentar esto, guardar y refrescar, y ahora estamos de vuelta a un número. ¿ Qué pasa si también quitamos el tipoof y podemos ver qué pasa cuando sumamos juntos los siete y los dos y luego también usamos el incremento. Vamos a salvar esto. Esto ahora nos da el resultado del valor numérico de 73. Lo que significa que lo que sucede originalmente para el número uno es nuestro fue 7 y 2 se suman juntos para crear una cadena de 72, tal como hemos visto antes. Esto sigue siendo una cadena, pero cuando se baja a la siguiente línea, como también vimos anteriormente cuando usamos el plus plus, entonces agrega el valor de 1 dándonos el valor de 73 dentro de la consola. Además de toda esta locura, el operador de igualdad también introduce un nuevo mundo de cosas para tener cuidado con dos. Por ejemplo, en nuestro registro de consola, podemos comprobar si 1 es igual a true. Esto es cierto. Pero ¿qué pasa si convertimos esto a un número diferente como el 11? Esto ahora nos da el valor de false. Solo para recapitular, el valor de uno era igual a verdadero, pero el valor de 11 fue igual a false. Vamos a probar un número más como dos, actualizar y este es también el valor de false. Pero esta es otra peculiaridad de JavaScript, pero justo antes de explicar, solo quiero agregar algunos comentarios al fondo. Entonces true es el número 1 y 0 es igual a false. Para entender esto mejor, necesitamos entender que al usar los dobles iguales, así como esto, esta es la igualdad suelta lo que significa que no estamos comprobando ningún tipo de datos improbable triple igual, que hemos visto antes. Todo lo que estamos haciendo es verificar si dos valores son iguales independientemente del tipo de datos. Ya que estamos comparando aquí un número con un booleano a la derecha, no lo estamos revisando a través de tipos iguales. JavaScript se convertirá usando coerción y en este caso convierte al booleano a ser un número. Así como escribimos antes, el número uno es igual a verdadero y JavaScript usará el número cero para ser igual a false. Podemos probar esto en el registro de la consola. Podemos comprobar si el valor de uno es igual a falso, lo cual no es cierto. Debe darnos el valor un falso dentro de la consola. No obstante, si lo cambiamos para que sea el valor de cero, cero es igual a falso, igual que hemos visto a continuación y entonces debería resultar en true. Eso es un montón de peculiaridad para tomar y tampoco termina ahí. JavaScript tiene tantas de estas cosas que hay que tener en cuenta. No espero que los recuerdes a todos en esta etapa. Pero sabiendo que este comportamiento existe y te da una buena ventaja sabiendo dónde buscar si te encuentras errores dentro de tu código. 12. La verdad y la falsey: En muchos de estos ejemplos en esta sección y codificación JavaScript en general, verificamos si un valor es verdadero o falso. Si es cierto, entonces ejecutamos algún código, y si es falso, hacemos otra cosa. Pero no es sólo un valor booleano de verdadero y falso, que podemos usar, como hemos visto en el último video otros valores también pueden evaluar para ser verdaderos y falsos también. Como cero evalúa en falso, y el número quiere ser igual a verdadero. También hay muchos más ejemplos, como una cadena de texto es verdadera, y una cadena vacía es lo contrario de false. A esto se le conoce como verdad o falsey. Truthy es cuando se evalúa un valor para ser verdadero, como nuestra cadena de textos está presente, y la falsey es cuando un valor se evalúa como false, como nuestra cadena vacía o nuestro número cero. Salta a nuestro editor, y podemos echar un vistazo a algunos ejemplos dentro de nuestro script vacío. Si las declaraciones se ejecutarán no solo por un valor booleano de true sino también por cualquier otro valor verdadero también. Digamos esto primero configurando una declaración if-else vacía luego dentro de aquí, solo vamos a colocar en ella registros de consola demasiado simples. Para la primera sección, vamos a evaluar algo para ser cierto, pasaremos en el texto de la verdadera V. En la sección L, haremos lo contrario. Agregando el texto de falsey. Por supuesto, esto no se ejecutará por el momento porque no tenemos ninguna condición dentro de la declaración if. Pero comenzaremos con lo que ya sabemos. Anteriormente miramos los valores de cero y uno, donde el valor de cero es igual a false. Esto sería evaluado a falsey, sin embargo, lo contrario es cierto con el valor de uno. Además, podemos probar la cadena que mencionaste justo antes. Tenemos una cadena con algunos contenidos dentro, como el texto de hey. Esto también evaluará para ser verdad también ya que tenemos algún valor dentro de la cadena. Pero si tuviéramos que eliminar esto y tener una cadena vacía, esto evaluaría en JavaScript al valor de falsey. El coerción de la que hemos hablado está sucediendo detrás de escena, y valores como nuestros números cero y uno y también este valor de cadena aquí se está convirtiendo para tener un equivalente booleano. Podemos determinar si cosas como estas si declaraciones se van a ejecutar en no. Los valores falsamente, como cabría esperar, son generalmente valores vacíos como el cero, que acabamos de mirar, y también estas cadenas vacías también. Echemos un vistazo a algunos ejemplos más como no. Esto también es falsey. No definido esto también debería ser falsey. Generalmente, cualquier cosa que no tenga un valor presente, por lo que la palabra false. Como cabría esperar, esto también evaluaría a falsey. Por último, anote el número, que es NAn. Esto también es falsey. Podemos considerar casi todo lo demás para ser verdad, como las cadenas que acabamos de mirar, matrices, números distintos a cero, y de hecho, cualquier tipo de objeto como una función, array, o un objeto real resultará ser veraz. Esto también es cierto independientemente de si usamos el constructor o un tipo literal, así como esto. Podríamos usar el constructor. Hemos mirado cosas como nueva matriz, y nuevo objeto en el pasado. Esto será veraz. Probemos un constructor de funciones que también será veraz, y finalmente el objeto. De la misma manera si queremos usar un constructor como este y lo usamos literalmente como lo hemos hecho más comúnmente en estos videos, como crear una matriz con diferentes valores en su interior. Esto sería verdad al igual que el constructor, junto con colocar en un objeto en una fuente literal también. Esta coerción, combinada con entender cómo se convierten los valores para ser veraces o falsey, es algo bueno para entender dentro de JavaScript ya que realmente puede ayudarte a ambos evitar problemas el futuro y también ayudar con problemas de depuración también. 13. Cadena opcional: Este video se va a enfocar en algo llamado encadenamiento opcional, que se introdujo en JavaScript en ES2020. Como ya sabemos, necesitamos tener acceso a ciertos algunos dentro de un objeto, como nuestro nombre y también nuestro rol de admin. También como sabemos, podemos profundizar aún más accediendo a objetos anidados en el interior de un objeto también. ¿ Qué pasa cuando las propiedades dentro de esta cadena no están ahí? Mira algunos ejemplos de encadenamiento en la sección de eventos, donde accedemos al objeto del evento. Luego profundizamos en propiedades como el objetivo, el nodo padre, los hijos, y luego en el valor del texto interno. Si en algún momento de esta cadena no existe una propiedad, entonces obtendríamos un error. Esto no es algo malo sin embargo, ya que deberíamos recibir errores si hacemos algo mal. Pero ¿qué pasa si la propiedad sólo está a veces ahí y a veces no? Un ejemplo de esto es lo que hemos estado usando ya dentro del guión. Tendrá el usuario actual el cual se establece en un objeto de usuario conectado y tenemos toda la información que necesitamos, como el nombre y el rol. Por lo tanto, cuando bajamos a las declaraciones if y verificamos si el rol del usuario es igual a admin. Sabemos que esto debería funcionar sin ningún error, pero con los usuarios aunque no siempre los tenemos para iniciar sesión. El usuario actual no siempre está configurado para ser un objeto como este. Por ejemplo, si el usuario no está conectado, en lugar de este objeto de usuario podemos ver el valor de null. Ahora, si tratamos de ejecutar la declaración if, no tenemos acceso a esta propiedad .role. Por lo tanto, vamos a entrar a la consola y ver qué pasa. Dentro de la consola vemos este mensaje de error rojo, que nos dice que hay un problema con la lectura de nuestro rol. Esto sucede porque el usuario actual ya no es un objeto que contenga la propiedad role, por lo que provoca un error. Pero aún necesitamos una manera de mantener este rol activo dentro de la declaración if. Pero después de que el usuario haya iniciado sesión. Aquí es donde entra en juego el encadenamiento opcional. Lo que podemos hacer es insertar un signo de interrogación para declarar que el inmueble puede no estar siempre ahí. Añadimos esto justo antes.role. Ahora si guardamos esto y actualizamos en lugar del error dentro de la consola, ya que ahora se evalúa como false, la sección else ahora se ejecutará dentro de la consola. Lo que pasa dentro de aquí es que llegamos a las declaraciones if. JavaScript entonces leerá al usuario actual, que es el valor de null. Por lo tanto sabe no ir más allá con el resto de nuestra cadena. Ahora salta el error y en su lugar devuelve un valor de undefined, que podemos comprobar dentro del registro de consola. Actualmente sabemos que la sección else se está ejecutando porque hemos visto el valor de false. Pero en cambio lo que podemos hacer es que podamos acceder al usuario actual, un signo de interrogación ya que esto no siempre va a estar ahí en el encadenamiento opcional. Entonces podemos sumar el valor del rol. Si guardamos esto y actualizamos, ahora podemos confirmar que recuperamos el valor de undefined. Esto es realmente útil si sabemos por delante una determinada propiedad objeto puede o no siempre estar ahí. Es común que objetos como este crezcan con el tiempo y no siempre sabemos cómo puede desarrollarse nuestra app en el futuro. Es posible que necesitemos agregar funciones adicionales o recopilar más información. Este encadenamiento opcional puede evitar cualquier error. Por ejemplo, en el futuro es posible que necesitemos agregar más información sobre la fuente de registro del usuario. Podríamos agregar un objeto anidado en el interior, así como éste, volveremos al objeto usuario. Vamos a reinstaurar el nombre y el papel. Entonces un segundo objeto anidado dentro del cual voy a llamar a los datos de registro, este va a ser un objeto anidado por dentro. Colocaremos en la fecha. Pero ahora una cadena vacía está bien. Realmente no importa y confirmado que es igual a verdad. Entonces aún más abajo de la línea medida que nuestra aplicación se desarrolló aún más, es posible que necesitemos profundizar aún más en este objeto. Por ejemplo, es posible que deseemos recopilar más detalles sobre la fuente de registro del usuario dentro de este objeto. También podemos agregar la fuente, que es también un objeto donde vimos la URL de la fuente de registro. Nuevamente, este es solo un ejemplo para que podamos agregar cualquier cosa dentro de la cadena en el navegador del que vino el usuario. Ahora necesitamos cadenas más largas para acceder a esta información anidada. Si simplemente eliminamos estas sentencias if else, y lo simplificaremos con un registro de consola. Necesitamos primero acceder a los objetos de usuario, que era usuario actual. El objeto dentro del cual era datos de registro, so.signupdata, Por ejemplo, si quisiéramos acceder al navegador, también necesitaríamos saltar a la fuente justo antes de esto. El objeto fuente y luego el navegador, refrescar y esto ahora debería ser el valor de Chrome. Pero recuerda en este ejemplo arriba, todo esto se sumó al objeto en una etapa posterior. Algunos de los usuarios de registro anteriores no tendrán los datos de registro asociados a sus objetos. Lo que podemos hacer, podemos simular esto comentando esta sección, que luego causará un error, igual que hemos visto antes. Nuevamente, el encadenamiento opcional puede ayudarnos con esto al permitir que nuestro código falle silenciosamente en lugar de mostrar un error dentro de la consola. Dentro de los datos de registro ya no tendrían acceso a la fuente ni al navegador. Podemos sumar el encadenamiento opcional dentro aquí, refrescar y ahora vemos los resultados de undefined. Los errores generales son buenos para hacernos saber cuando hemos hecho algo mal. Pero en casos como éste, sabemos que tenemos una propiedad que puede o no estar ahí, encadenamiento opcional realmente puede ayudarnos al fallar en silencio y por lo tanto permitirnos manejar el errores nosotros mismos. 14. Creación y modificación de nuevos objetos: Prácticamente cualquier cosa que podamos pensar tiene ciertas propiedades puede ser un buen caso de uso para un objeto en JavaScript. Por ejemplo, una persona puede ser un objeto y las propiedades podrían ser el nombre, edad, la altura, y cualquier otra pieza de información que queramos darle a una persona. Una computadora podría ser un objeto también con propiedades como la marca, el modelo, la CPU, el año de fabricación, y también la memoria. Cuando pensamos en objetos como este, los casos de uso se vuelven enormes. Al igual que con las matrices, existen diferentes formas construir un objeto, y el estilo que hemos visto hasta ahora se llama el objeto literal. Esto se utiliza para crear y definir un nuevo objeto con las llaves rizadas, que incluye algunas propiedades, igual que tenemos aquí. A los archivos de inicio. Salta al archivo de esta lección, que es el constructor de objetos, y abre esto dentro del navegador. Como se mencionó anteriormente con las diapositivas, tenemos dos formas diferentes en que podemos crear un objeto. Tenemos el enfoque literal, igual que hemos utilizado anteriormente, y también tenemos un enfoque llamado el constructor. El constructor no es nada nuevo. Hemos mirado esto previamente con matrices. Por lo general, hemos creado matrices utilizando un enfoque literal, como una matriz de pizza, y hemos configurado nuestras propiedades dentro de estos corchetes. Además de este enfoque literal, también podemos crear una matriz utilizando el constructor. Por ejemplo, si queríamos una matriz de ingredientes, podemos configurar esto usando la nueva palabra clave seguida de array. Este es un enfoque literal y así es como podemos crear una matriz vacía con el constructor. Entonces podemos acceder a nuestra matriz vacía y agregar nuevos valores con métodos como push para agregar cualquier nuevo valor a esta matriz. De la misma manera que nuestras matrices justo aquí, también podemos hacer lo mismo por otros objetos. Lo que voy a hacer es comentar este enfoque literal y recrear esto usando el constructor de objetos. En primer lugar, crearemos una nueva variable llamada usuario para imitar los objetos anteriores y establecer esto igual a un nuevo objeto. Este nuevo objeto va a ser un contenedor de objetos que está vacío, y luego podemos seguir adelante y empujar nuevas propiedades a este objeto. Lo hacemos accediendo a nuestra variable. Entonces podemos establecer el nombre de la propiedad directamente a nuestro objeto. Primero, Va a ser la clave, igual que lo tenemos aquí. Entonces asignamos esto a un cierto valor. Esto es igual a una cadena de Chris. Entonces el segundo es para el apellido, también una cadena. El tercero fue la ocupación. A continuación, tenemos el booleano iniciado sesión de true para user.logged.in. Esto es un booleano por lo que no necesitamos las cotizaciones. Entonces finalmente, también podemos asignar una matriz a todos los alimentos propiedad. Solo voy a copiar esta matriz desde justo arriba. Podemos probar esto ahora está funcionando haciendo un registro de consola para el valor del usuario, y luego saltar a las herramientas de desarrollador a la consola. Ahí está nuestro objeto con todas nuestras propiedades anidadas en su interior. También podemos acceder a propiedades individuales usando una notación de puntos. Esto funciona exactamente como lo hicimos con el enfoque literal. Podemos usar user.first. Esto imprimirá nuestro nombre dentro de la consola. Además de esta notación de puntos, igual que hemos utilizado anteriormente, también podemos acceder a nuestras propiedades con la notación de corchete también. Lo que tenemos que hacer es rodear el nombre de nuestra propiedad en estos corchetes, quitar el punto. Esto también tiene que ser una cuerda. Ambos dan exactamente el mismo resultado. Si quisiéramos, también podríamos actualizar directamente una de nuestras propiedades también, por lo que user.first. Podemos entonces reasignar esto o actualizar esto para que sea un nuevo valor. Entonces podemos imprimir esto a la consola. Esto nos dará nuestro valor actualizado. Como nota al margen, si accidentalmente tenemos más de una propiedad que es un duplicado, igual que aquí donde tenemos el primer nombre dos veces en nuestro código, desde ES 2015, el último ocurrencia se utilizará en lugar de arrojar un error. de esto, también podemos eliminar cualquiera de estas propiedades usando el operador de eliminación de JavaScript. Lo que tenemos que hacer es agregar delete, que señala nuestro nombre, guardar esto, y actualizar, y simplemente imprimiremos el objeto de usuario completo. Abre esto, y esto ahora eliminará el nombre de nuestro objeto de uso. Se trata de dos formas diferentes de crear un objeto en JavaScript. Personalmente, prefiero el enfoque literal que teníamos en la parte superior ya que para mí me parece más limpio y sencillo de usar. Pero esto se reduce completamente a su preferencia personal. En los próximos videos, cubriremos cómo configurar una función similar a la de una plantillana para crear múltiples objetos. 15. Función constructora de objetos: Genial. Ahora estamos al tanto de dos formas diferentes de crear objetos dentro de JavaScript. Si saltas al archivo de esta lección, que es funciones de constructor de objetos, vemos que solo tenemos un script vacío dentro de aquí. Las dos formas diferentes en las que hemos creado objetos es crear una nueva variable así, y luego podemos agregar nuestras propiedades directamente dentro de las llaves rizadas. Alternativamente, también podemos usar nuevo objeto, que es el enfoque constructor y esto nos dará un objeto vacío en nuestras propiedades también. Ambos enfoques funcionan bien, pero también se limitan a crear solo un solo objeto. Sería más útil si pudiéramos tener una plantilla de objeto para poder crear múltiples objetos basados en esto, cada uno mostrando las mismas propiedades y métodos. También podemos hacer esto con la función constructor. Lo que haremos es eliminaremos esto y crearemos una nueva función constructor. También es una buena práctica nombrar estas funciones constructoras con letra mayúscula. Utilizamos en nuestro ejemplo de usuario, es una U mayúscula, y luego creamos el resto de nuestra función. El propósito de esta función constructor para nuestro usuario es crear múltiples usuarios basados en esta plantilla. Dentro de nuestra función, también vamos a pasar algunos valores que vamos a necesitar dentro de aquí. El primero, vamos a mantener esto bastante simple, solo decimos primero, apellido, y ocupación. Volveremos a esta función en un momento. Pero antes creamos un nuevo objeto, como este, por lo que usamos la nueva palabra clave y luego la función objeto. Pero ahora en lugar de crear un nuevo objeto vacío, queremos crear una nueva instancia de nuestro usuario. En lugar de nuevo objeto, diremos nuevo User capital U, donde vamos a pasar en los valores reales que desea utilizar para nuestra función. Tenemos que pasar en el nombre, el último, y la ocupación y estos van a ser los tres valores reales que necesitamos para nuestro usuario. Diremos Chris, el apellido, y finalmente la ocupación. También podemos duplicar esto tantas veces como quiera, porque como mencionamos, todo el propósito de crear esta función constructor es actuar como plantilla para crear tantos objetos como queramos. Creamos nuestro segundo, tiene un nombre diferente, y también ocho ocupación diferente. Con ambos de estos nuevos usuarios, también podemos almacenar esto dentro de constantes o variables para poder acceder a ellas más adelante. Así digamos const chris igual a nuestro, y luego el segundo es igual a homer. Genial. Ahora lo que vamos a hacer es que registre el valor de cualquiera de estos nuevos usuarios. Colocar un registro de consola, el valor de homer, y luego saltar a la consola. Como se puede ver, tenemos un objeto de usuario. Pero si abrimos esto , no tenemos ninguna propiedad dentro de aquí. Todo lo que tenemos es un objeto de usuario vacío. Esto se puede esperar porque nuestra función constructor que creamos anteriormente está vacía. No tenemos ningún código dentro de los tirantes rizados. Recibimos en los valores dentro de la función pero en realidad no estamos haciendo nada con estos por el momento. Para ello, necesitamos establecer algo que sea igual a estos tres valores. Tenemos que establecer algo que sea igual a nuestro primero, algunas cosas para ser iguales a nuestra última, y algo que sea igual a nuestra ocupación. Pero, ¿qué hacemos para convertir estos en nuestras propiedades objeto? Bueno, para establecer una propiedad, necesitamos hacer uso de la palabra clave esta. Para entender un poco mejor la palabra clave esta palabra clave, quiero llevarte rápidamente de vuelta a un archivo anterior en esta carpeta de proyecto. Si volvemos a saltar al número tres, que es funciones, y luego el número cinco, que es una función o un método, saltamos a esta página de índice justo aquí. Dentro de aquí, puede recordar que creamos un objeto llamado chequear recetas. Chequear recetas tenían algunas propiedades como el número actual de recetas, las recetas máximas, y también un método llamado recetas dejadas, que dedujo el número actual de recetas de el máximo. Recuerde que un método es solo una función que se encuentra en este objeto. Dentro de este método, hicimos uso de la, esta palabra clave para acceder a otras propiedades de este objeto. Accedemos a las recetas max, que está en este objeto y también a las recetas actuales también. El esta palabra clave puede ser algo complejo de entender en JavaScript, pero en estas circunstancias, simplemente apuntará al objeto que posee aquí. Lo que significa que podemos acceder a cualquiera de las otras propiedades dentro de este objeto. Con esto en mente, de vuelta a nuestro archivo actual, ahora podemos agregar todas las propiedades la misma manera mediante el uso de la, esta palabra clave seguida del nombre de la propiedad. Para el primero dirá esto.FirstName y también lo mismo para los demás también, esto.LastName, y finalmente, esto.ocupación. Esto ahora construirá nuestros dos objetos de usuario con las propiedades que pasamos por dentro. Guarde esto y con nuestro registro de consola todavía en su lugar, actualice. Nuestro usuario de Homer ahora está construido correctamente y también podemos duplicar esto para que nuestro primer usuario. Esto ahora nos da dos objetos únicos, que ambos están basados en la misma plantilla. Si necesitamos agregar propiedades y métodos adicionales, también tenemos algunas opciones. Podemos agregarlos directamente a uno de nuestros objetos como este. Al igual que miramos en el video anterior, podemos acceder a nuestra variable como homer. Podemos decir vidas, y poner esto igual a nuestro valor. También podemos agregar métodos a nuestros objetos. Podemos acceder a nuestro objeto, que es homer y luego podemos darle este un nombre de propiedad que va a ser nombre completo y establecer esto igual a una función. La responsabilidad de esta función va a ser devolver una nueva cadena, que es el primer nombre agregado al segundo nombre, así que devuelva nuestra cadena, que es homer.FirstName, agrega un espacio vacío entre y luego añadir al final homer.LastName. Vamos a darle una oportunidad a esto. En primer lugar, probaremos la propiedad lives. Agrega esto a la consola, refresca y obtenemos el valor de Springfield. Entonces a continuación podemos probar nuestro método que era nombre completo. Refresca el navegador. Whoops, tenemos un valor de undefined así que echemos un vistazo a esto. Tenemos casa. Nombre, está bien. Sólo un error ortográfico arriba en la parte superior del aire así que vamos a cambiar esto. Ahora vemos que este es Homer Simpson esto así que esto está funcionando completamente bien. Pero estos sólo se agregan a nuestros objetos individuales. Estos sólo se agregan variable Homero alto. Si intentamos acceder en nuestra variable Chris y probar esto en la consola, vemos un error dentro de aquí. Este enfoque solo es útil si quieres cambiar un objeto específico. Si queremos que estos se apliquen a todos los objetos creados, sí necesitamos colocarlos en la función constructor en la parte superior. Entonces, antes que nada, tenemos que pasar en la propiedad de vidas a nuestra función y luego podemos sumar estos a nuestros dos objetos a continuación. Chris, valor de Reino Unido y Homer, el valor de Springfield. También necesitamos modificar nuestro cuerpo de función. Vamos a duplicar esto y diremos que esto.lives es igual al valor de vidas en las que pasas. También tenemos que pasar el método también. El método siempre será el mismo, solo está usando el nombre existente y el apellido. Voy a cortar y pegar esto en nuestra función. Corta esto, pega esto en nuestra función. Esta vez vamos a quitar homer, reemplazar homer por la, esta palabra clave. También lo mismo dentro de nuestro cuerpo de función también. Recuerde, al igual que el ejemplo anterior en el video anterior, esta palabra clave apuntará a cualquier otra propiedad en esta función de usuario. Por último, también podemos quitar homer.lives. Ya no necesitamos esto, así que ahora podemos guardar esto y refrescarnos. Ahora el método de nombre completo funciona para ambos objetos. 16. Prototipos de objetos: Si no entendiste del todo el papel del prototipo en los primeros videos, ojalá que ahora verlo en acción con nuestros propios objetos pueda ayudar a hacer clic algunas cosas. En el proyecto de arranque, comenzamos con la sección prototipo de objeto con el mismo ejemplo del video anterior. Contamos con una función constructor para crear plantillas o blueprints. Esto significa que podemos crear múltiples objetos con las mismas propiedades y métodos disponibles. Luego miramos cómo agregar propiedades y métodos, tanto para un solo objeto como también a la función para que se apliquen a todos los nuevos objetos creados. Junto con agregar a la función constructor, también podemos agregar directamente al prototipo también. Pero antes de hacer esto, primero vamos a refrescar lo que sabemos del prototipo. Hasta abajo, estamos haciendo un registro de consola con el valor de homer, que ha creado un nuevo objeto de usuario desde nuestro constructor. Si abrimos esto dentro del navegador y saltamos a las Herramientas de Desarrollador a la Consola, y echemos un vistazo a lo que vemos dentro de aquí. Refresca, y vemos a nuestro usuario. Vamos a abrir esto. Contiene nuestras propiedades. Tenemos el nombre, el apellido, y todos los valores que ves abajo en la parte inferior. Entonces abajo en la parte inferior tenemos este prototipo, que es un eslabón a la cadena prototipo. Abre esto. En el interior, podemos ver nuestro propio constructor, que es nuestro usuario. También junto a esto, un segundo prototipo objetos. El primer protocolo, que es el que está arriba aquí arriba, esto apunta a nuestras propias adiciones prototipo, que veremos pronto. Entonces la segunda que acabamos de abrir, esto tiene ahora muchas cosas dentro de aquí, que no nos sumamos. Tenemos cosas como ValueOf, toString. Estas no son cosas que nosotros mismos creamos. Recuerde, de antes, los objetos JavaScript heredan propiedades y métodos de objetos padre. En la parte superior de esta cadena de herencia está el objeto. Ahora vamos a iniciar sesión esto en la consola para su referencia. Apenas con Homer haré un segundo registro de consola con el valor del objeto. Ahora vamos a guardar esto y refrescar el navegador, dejándonos con el tipo de objeto principal junto a nuestro propio objeto casero. Este primer valor de objeto es un objeto vacío, que se puede ver si abre esto. Está vacío en términos de no tener propiedades de valores dentro como tenemos aquí. Pero el propósito de este objeto de nivel superior, pesar de que está vacío, a pesar de que está vacío, es contener las propiedades mínimas y métodos desnudos que pasan a otros objetos a través de la cadena prototipo. Podemos ver esto si abrimos esto. Esto contiene todas estas propiedades y métodos a los que ahora podemos tener acceso a través de nuestros propios objetos creados. Si ahora abrimos nuestro propio objeto hogareño, baje al prototipo. Entonces el segundo prototipo dentro de aquí, se puede ver que esto ha heredado las mismas propiedades y métodos de nuestros objetos de nivel superior. Esto ahora significa que estos ahora están disponibles para usar en nuestros propios objetos personalizados. Como vimos anteriormente, es por eso que cosas como matrices personalizadas tienen métodos disponibles, como por ejemplo para cada push y pop. En realidad no creamos estos métodos nosotros mismos. Pero en cambio, se heredan de la cadena prototipo. Todos los rayos pueden hacer uso de ellos. No deberíamos agregar nuestras propias propiedades y métodos a objetos que no hemos creado nosotros mismos, pero podemos agregarlos a nuestro propio constructor personalizado, como este usuario. Podemos hacerlo accediendo a la propiedad prototipo en este usuario. Justo debajo de esto. Hagamos algo de espacio. Accede a nuestro constructor de usuarios. Entonces el prototipo. Podemos establecer una nueva propiedad aquí, por lo que cualquier valor. Esto puede ser otros tipos de datos como cadenas, números o incluso métodos. También podemos quitar el primer objeto, dejando nuestro segundo objeto homero en su lugar. Refresca, abre esto, salta al prototipo. Ahora, voy a abrir este objeto prototipo. También vemos la propiedad personalizada, que acabamos de establecer. Vemos cool no se coloca en el objeto original junto al nombre, por ejemplo. Pero si tratamos de acceder a ella, genial, entonces se mire hacia arriba en la cadena prototipo. Si no fuera en nuestra cadena prototipo, que se ve aquí, se vería aún más arriba la cadena de herencia. Podemos probar esto. Salta al registro de la consola. Ahora, homer.cool. Recuerda, .cool no está disponible en nuestro constructor original. Entonces va a mirar hacia abajo la cadena prototipo, refrescar. Obtenemos el valor de true. Lo mismo ocurre con los métodos también. También podemos agregar diferentes métodos al prototipo. En lugar de tener este método disponible en nuestro constructor, lo que voy a hacer es copiar esto y comentar esto. Pega esto fuera de nuestro usuario. Esta vez, en lugar de acceder al objeto a través de esto, vamos a acceder a nuestro user.prototype , igual que lo hicimos antes. Esta vez, el nombre completo va a ser igual a nuestra función. Vamos a probar esto abajo en nuestro registro de consola. El nombre esta vez era FullName. Con este siendo el método, también necesitamos acceder a esto con los corchetes. Esto ahora debería devolver nuestro FirstName, lo agregó a nuestro LastName. Bueno. Si también quieres comprobar esto está en el prototipo junto a cool. Podemos eliminar FullName. Iniciar sesión en la consola, el valor de Homero. Abre esto, salta al prototipo, y nuestras dos nuevas ediciones están dentro de aquí. Para comenzar el prototipo puede parecer complejo, pero es solo una forma de heredar propiedades y métodos de un objeto parent, incluso de un padre que se crearon como nuestro usuario, o desde el objeto de nivel superior que proporciona JavaScript. Para recapitular, el prototipo es una propiedad sobre un objeto. Pondrá a disposición para ser heredado por otros objetos. Un ejemplo de esto fue nuestro FullName y nuestras adiciones geniales. Ambos se añadieron a nuestro prototipo, lo que significa que estos ahora se han puesto a disposición para que otros objetos hereden, como nuestro usuario de Homer abajo en la parte inferior. 17. Propiedades de objetos heredables: Hemos hablado un poco hasta ahora sobre cómo tenemos este principal objeto JavaScript padre, que tiene un prototipo, y cómo uno crearía otros nuevos ellos heredan automáticamente ciertas cosas a través de la cadena prototipo. Pero, ¿y si quisiéramos también permitir que nuestros propios objetos fueran heredados también? En un inicio archivos tenemos un ejemplo de usuario similar del video anterior. Tenemos un objeto de usuario, y podemos empezar a darnos cuenta de que este objeto de usuario tiene algunas limitaciones para nuestro uso particular. Aquí estamos creando gente real como yo y también justo debajo de un personaje ficticio. Pero si pensamos en esto, personas reales y ficticias pueden necesitar propiedades diferentes. Podemos, por ejemplo, querer agregar el nombre del espectáculo del que era el personaje ficticio. Pero esto no se aplicaría a una persona real. Esto ahora dificulta expandir este objeto mucho más. Lo que podemos hacer sin embargo, es usar este objeto de usuario como base, incluyendo solo las propiedades mínimas desnudas que se aplican tanto al usuario real como al ficticio. Después creamos dos objetos más, que ambos heredarán de este usuario original. Todavía tenemos acceso a todas las cosas como los nombres y las ocupaciones. Pero entonces también tendrá propiedades específicas que necesitamos para cada caso de uso. Para ello, tenemos un método objeto llamado create. Justo antes de añadir esto a nuestro ejemplo actual, echemos un vistazo a cómo podemos hacerlo con un objeto independiente regular. Primero, agreguemos cualquier objeto regular abajo en la parte inferior. Quite nuestro registro de consola por ahora, cree un nuevo objeto llamado product1. Abre los tirantes rizados y agregaremos nuestras propiedades. El título, de nuevo, esto es bastante genérico, por lo que una increíble camisa azul. También la descripción. Simplemente toda camisa azul. Como objeto independiente es un objeto genérico que podría aplicarse a múltiples camisas azules. El título y también la descripción serán adecuados para otras camisas azules. También podríamos cambiar algunos detalles como la marca o el tamaño para otros productos. Podríamos entonces usar este método object.create que mencionamos antes para crear un segundo producto basado en esto, instalar esto dentro de una variable llamada product2 y establecer esto igual a object.create. Dentro de object.create, pasamos en nuestro producto1, lo que significa que creará un nuevo producto llamado product2 basado en nuestro producto original1. Vamos a registrar esto en esta consola, product2, y ver qué sucede dentro de aquí. Refrescar. Vamos a actualizar este enlace dentro del navegador. Inicialmente, vemos un objeto vacío. No tenemos propiedades ni métodos asociados a esto. Pero si seguimos adelante y abrimos el prototipo que se adjunta, tenemos acceso a nuestro título y también a nuestra descripción que se hereda de nuestro producto1. Así funciona el método create. Crea un nuevo objeto y utiliza el objeto existente que pasamos como prototipo. Nuevamente, observe cómo también tenemos un segundo prototipo. Tenemos primero la nuestra propia, que es la descripción y después el título. Entonces más arriba de la cadena tenemos todas las propiedades y métodos que hemos visto antes, que se hereda de la parte superior de la cadena del objeto. Como ya hemos aprendido, pesar de que nuestro propio objeto está vacío, todavía podemos acceder a estas propiedades heredadas desde product1 por su nombre. product2, recuerda que esto está completamente vacío como acabamos de ver en la consola. Podemos acceder a los valores heredados como el título. También podemos agregar nuestras propias propiedades y métodos también, como cabría esperar. Justo debajo de nuestro producto2, podemos acceder a esto por el nombre y luego establecer nuevas propiedades como el tamaño, como pequeño. Registra esto en la consola, que luego actualiza nuestro objeto. Ahora podemos quitar todo este ejemplo y podemos usar este conocimiento que acabamos de aprender. Ahora podemos intentar aplicar el mismo ejemplo a nuestro usuario. Pero la diferencia clave aquí es que tenemos una función constructor en lugar de un objeto real. Si tuviéramos que hacer lo mismo que antes, vamos a crear una variable llamada copy, que se establece en object.create. Entonces si tratamos de hacer una copia de nuestro usuario, veamos qué pasa dentro de la consola. Guardar y refrescar. El ejemplar es una copia de la función, que no es lo que queremos. Lo que estamos buscando es una forma de crear funciones más constructivas que todas hereden las propiedades de este usuario. Empecemos con el personaje. Justo debajo de nuestro usuario, crea nuestro nuevo constructor de objetos llamado carácter. Recuerde que el propósito de esta función es heredar todas las propiedades base de nuestros objetos de usuario. También vamos a añadir algunas propiedades adicionales que solo se aplican a nuestro personaje. Esta información extra que vamos a pasar es el espectáculo del que proviene el personaje. Entonces al igual que arriba, accederemos a this.show, estableciendo esto igual al valor que se pasa a este constructor. Ahora, lo que hacemos es crear un nuevo objeto de carácter con la propiedad show y además heredar todas estas propiedades también. Pero esto, tenemos que entrar en nuestro personaje y primero acceder a nuestra función constructor de usuario, que luego podemos acceder a una función de llamada en. Este método de llamada está disponible en el prototipo de una función y permite una función perteneciente a un objeto llamado dentro de un objeto diferente. Es decir, ahora podemos llamar a una función de usuario desde dentro de nuestra función de personaje. Este método de llamada no es exclusivo de este caso de uso. Se puede usar en cualquier momento que quiera acceder a una función o a un método ubicado en un objeto diferente. Esta función de usuario también toma en estos cuatro parámetros. Podemos copiar estos y además añadir esto a nuestro personaje. Ahora, recuerda que Homer es un personaje, así que en lugar de basar esto en el nuevo usuario, vamos a basar esto en el nuevo personaje. Como los cuartos argumentos que voy a mostrar, justo después de Springfield, podemos pasar en nuestro último valor, que son los Simpson. Estos cinco valores ahora coinciden con los cinco valores de caracteres pasados a nuestro constructor. Probemos esto. Podemos quitar nuestra copia de antes, y en su lugar registraremos el valor de Homero. Esto demuestra ahora que Homero es un objeto de carácter. Cuenta con la propiedad show con el valor de los Simpsons. Sabemos homer.show ahora debería funcionar también. Pero ¿qué pasa con las otras propiedades heredadas? Podríamos ver antes del objeto Homero solo tendría acceso a la propiedad show en el nivel superior. No teníamos nada más como el FirstName y LastName, la ocupación o las vidas. Bueno, probemos esto y veamos qué pasa. Primero, prueba la ocupación. Refresca, y recuperamos el valor de undefined. Probemos uno más. homer.lives y esto también es indefinido. Las propiedades heredadas no parecen funcionar aquí. Esto se debe a que nos faltan algunos detalles al llamar a nuestra función de usuario dentro de nuestro personaje. En primer lugar, necesitamos copiar sobre todos estos parámetros que se pasan y también agregar esto a nuestro método de llamada. Pero además de esto, también necesitamos pasar esta palabra clave. Mencionamos anteriormente que esta palabra clave puede ser cosa compleja de entender. Tendremos más sobre esto más adelante. Pero esto es básicamente decir que al ejecutar nuestra función, podemos acceder a los valores usando esto. Así como estábamos arriba. Desplazándose hacia abajo, todavía estamos tratando de registrar homer.lives. Vamos a refrescar esto y ahora obtenemos el valor de Springfield. Podemos probar uno más, el FirstName. Todo esto funciona correctamente. Así como resumen, porque esto puede ser bastante confuso, estamos creando un nuevo objeto Homer basado en nuestro personaje. Esta función constructor de caracteres solo tiene una propiedad propia, que es el espectáculo al que pertenece el personaje. Pero también es heredar todas las propiedades y métodos de nuestros objetos de usuario, que estamos pasando justo aquí. De hecho, tampoco necesitamos agregar estos shows ya que pertenece a esta función en particular. Con toda esta complejidad, si queremos comprobar cuál de nuestros constructores creó un objeto en particular, como Homero, podemos usar algo llamado instanceof. Podemos revisar esto dentro del registro de la consola. Podemos comprobar si el objeto homero es una instanciade carácter. Debe ser el valor de verdadero ya que somos base de nuestro nuevo personaje. Pero si pasáramos a nuestro usuario, éste será falso. Así es como JavaScript hace las cosas. Tiene objetos justo desde el principio de los que podemos heredarlo. Como recién llegado, ni siquiera sabemos que esto está sucediendo detrás de escena. Pero si tuviéramos que cavar un poco más profundo así, podemos empezar a entender que esto es así cada nuevo objeto, objetos que también se refieren a otros tipos como matrices y funciones y tienen un conjunto de propiedades y métodos útiles que podemos utilizar cada vez que creamos nuestros propios objetos. Como acabamos de discutir, también podemos aprovechar esta herencia prototipo por nuestros propios objetos si es necesario. 18. Copiando Propiedades del objeto: En los videos pasados, hemos profundizado bastante en objetos con cosas como constructores de objetos, y copia y prototipos. Pero a veces simplemente solo queremos copiar las propiedades de un objeto a otro. Hay un par de formas diferentes de hacer esto. En primer lugar, tenemos el carácter base con información que podría aplicarse a todos los nuevos personajes de los Simpsons que creamos. Información bastante genérica, y luego a continuación también tenemos un objeto homero con algunas propiedades que solo se aplican a este personaje. Para homer y también cualquier otro personaje que creamos, también necesitamos fusionarnos en todas las propiedades del personaje base también. Una forma sencilla de hacer esto es solo hacer referencia a este personaje base dentro del objeto homero. Nos dieron añadir esto como una propiedad, lo tiene en el personaje base, y probar esto más en la consola. Ya tenemos un registro de consola por el valor de homer. Si abrimos esto, tenemos las cuatro propiedades originales y también vemos nuestro carácter base. Esto funciona completamente bien, pero sí crea un objeto de carácter base que necesitamos abrir y sumergirnos. Nuestro personaje base está anidado un nivel más profundo que todas nuestras otras propiedades. Pero sería mejor si pudiéramos agarrar todas estas propiedades de carácter base y ponerlas efectivamente junto a lo que ya tenemos. Una forma de hacerlo es mediante el uso de objetos extendidos, que miramos antes, que fueron los tres puntos. Pasando los tres puntos ante nuestro objeto de carácter base. Ahora no vemos el objeto de carácter base que necesitamos sumergirnos. En cambio, vemos todas las propiedades de carácter base junto a nuestros homer. También podríamos usar esta técnica para difundir tantos objetos diferentes como queríamos. Por ejemplo, si tuviéramos un personaje homero de Simpson con superpoderes para un episodio en particular, podríamos hacer algo como esto. Podríamos crear un nuevo objeto llamado SuperHomer. SuperHomer también necesitaría heredar el carácter base y también toda la información existente de homer. También podemos eliminar esto. Podemos usar spreads pass en ambos objetos. El carácter base y también la información homer existente. Además de esto, también podemos pasar en nuestras propias propiedades, que es específica de este único objeto. Por ejemplo, podríamos establecer poderes para que sean iguales a verdaderos, y esto ahora debería mostrar un objeto grande dentro del navegador. Vamos a cambiar nuestro registro de consola para ser SuperHomer. Refresca y ahora tenemos nueve propiedades diferentes en este objeto. Tenemos la caída del personaje base, la vanguardia del objeto Homero, y también los poderes establecidos a verdadero. Podríamos eliminar o comentar este objeto, y ahora echaremos un vistazo a otra forma de copiar sobre las propiedades del objeto a un nuevo objeto. Esto se hace con un método de objeto llamado asignar. Accede a nuestro objeto principal, el método de asignación. Esto va a llevar en él dos cosas. En primer lugar, el objeto de destino al que desea copiar. Lo copiaremos a nuestro objeto homero, y el segundo es el objeto que quieres copiar. Usando nuestro ejemplo original para mover todas las propiedades de nuestro personaje base a homer. Pase esto como el segundo valor. En el registro de la consola para ser homer. Salta a la consola. Esto ahora fusiona todas las propiedades del carácter base en nuestro objeto homero. Efectivamente funciona igual el operador de spread que miramos antes. También si lo necesitábamos, podemos almacenar este nuevo objeto en una variable como MergedHomer. Esto también debería funcionar exactamente igual. Esta técnica asignada y también las anteriores, son realmente útiles y algo que a menudo se puede utilizar en JavaScript. Tiene muchos casos de uso como si tuviéramos un usuario y un pedido, posible que queramos adjuntar un objeto de usuario a nuestro pedido antes de guardar en la base de datos, por lo que sabemos quién realmente realizó el pedido. También es probable que también encuentres muchos casos de uso propios. 19. Objetos de estilo CSS: En la sección DOM, creamos nuestros propios elementos HTML. Entonces nos fijamos en cómo agregar estilo CSS a estos elementos usando JavaScript. En el archivo de Style tenemos un ejemplo de esto abajo en la parte inferior, una sencilla sección de cabecera con un título sin hamburguesas de carne. Entonces debajo de esto dentro de nuestro script tenemos múltiples propiedades de estilo aplicadas. Esto funciona bien como podemos ver dentro del navegador, pero puede ser una manera bastante larga de hacer las cosas. Tampoco es reutilizable en otros elementos. Una solución a esto es crear un objeto de estilo que contenga todas las propiedades y valores CSS que necesitamos. Bajemos al fondo y vamos a comentar todos estos estilos existentes y recrearemos estos dentro de un objeto de estilo. Almacenar esto dentro de una variable llamada estilos. Di esto igual a un objeto, y efectivamente los replicaremos dentro de aquí. En primer lugar, la pantalla es igual al valor de flex. Dado que este es un objeto, necesitamos separar esto con una coma y la siguiente es JustifyContent. Ya que esto es JavaScript, también necesitamos hacer este caso camello, JustifyContent y cada palabra después la primera necesita comenzar con una letra mayúscula. El valor, esto puede ser el mismo, esto puede ser espacio entre. A continuación, tenemos un valor de relleno. Nuevamente como una cadena, cero arriba e inferior, y 10 píxeles a la izquierda y a la derecha. Antecedentes. ¿ Qué tenemos aquí? Tenemos un valor RGB. Vamos a copiar esto. Por último, el color. Vamos a agarrar el valor que ya tenemos , pega esto en. Pasemos al navegador y actualicemos. No tenemos ningún estilo aplicado. Ahora necesitamos una forma de aplicar realmente el objeto de estilo a nuestro elemento header. Al igual que el último video podemos usar object.assigned. Esto copiará todas nuestras propiedades de objeto de estilo a este elemento de encabezado. Abajo en la parte inferior del objeto de guión.asignar. Queremos aplicarlos a la cabecera. Las propiedades del objeto que desea aplicar son nuestros estilos. Pero así como es así, no funciona si actualizamos el navegador. El motivo por el que es igual que lo hicimos originalmente, en lugar de aplicarlos al elemento header, necesitamos aplicarlos a header.style, así que at.style y refrescar y ahora todo debería surtir efecto en el navegador. Por el momento puede estar un poco confundido en cuanto a por qué un método de objeto como asignar está trabajando en un elemento como encabezado. Bueno esto se debe a que nuestros elementos, como muchas cosas en JavaScript también se clasifica como objetos. Podemos ver esto con un registro de consola. Podemos utilizar el operador typeof, y el valor de header. Entonces veamos qué pasa dentro de la consola. Refresca y se puede ver que el encabezado, pesar de que este es un elemento, es un tipo de objeto. Cuando creamos nuevos elementos, en realidad estamos creando objetos de elemento y así es como podemos tener acceso a propiedades, métodos y eventos. Ya hemos utilizado propiedades como acceder a los atributos, lista de clases y HTML interno para nombrar algunos. Los métodos que hemos utilizado incluyen queryselector y addeVentListener. Todos estos están disponibles en este objeto elemento. Pero ¿por qué crear un objeto de estilo en lugar de CSS regular? Bueno, CSS es probablemente fácil para muchos casos de uso, pero de esta manera también tiene sus propios usos. El principal para mí es el hecho de que se controla con JavaScript. Podemos cambiar valores dinámicamente. Si tuviéramos un juego, por ejemplo, podríamos cambiar el fondo para ser rojo si el juego acababa. Podemos hacer una descarga de cuenta regresiva más rápido ya que se está acercando al final y tantos más grandes casos de uso actualizando cualquiera de estos valores dinámicamente. 20. Bucle con objetos: objetos pueden tener muchos valores como sabemos y al igual que con matrices, bucle es una forma conveniente de repetir algo por cada propiedad. Hay un par de formas diferentes que podemos usar para recorrer objetos, y primero, echamos un vistazo al bucle for-in. Dentro del archivo de esta lección, tenemos una función constructor arriba en la parte superior, que hemos visto antes para crear un nuevo usuario. Observa que las adiciones prototipo están comentadas y veremos por qué pronto. For-in loop debe parecer bastante familiar. Ya hemos mirado esto en el bucle en sección, pero quiero mostrarte algo más relacionado con él. Como repaso, así es como se ve dentro de nuestro código. Comienza con la palabra clave for, y para este ejemplo, vamos a recorrer nuestro objeto homero. Necesitamos crear una variable para cada una de las propiedades dentro de aquí, por lo que el nombre, el apellido, la ocupación, y vive. Esto dentro de una variable o una constante llamada propiedad dentro de nuestro objeto homero. Ahora solo abriremos los tirantes rizados y luego dentro de aquí, podemos hacer lo que queramos con esta propiedad. Pero ahora haremos un registro de consola, abriremos las garrapatas traseras para que podamos insertar nuestra variable de propiedad, que es el nombre de nuestra propiedad, como el nombre, agregar dos puntos, y después podríamos también acceda al valor del inmueble. Nuevamente, insertaremos esto como una variable por lo que necesitamos acceder a nuestro objeto homero completo, y dentro de los corchetes, pasaremos en la propiedad del que queremos agarrar el valor de. Guarda esto, actualiza, y vemos cada una de estas cuatro propiedades dentro de la consola. Vemos los nombres reales de la propiedad como el nombre, y luego lo usamos para seleccionar el valor de la propiedad del objeto homer, como homer. Podemos entonces usar estos valores para construir elementos para agregarlo ahora al DOM. En primer lugar, se requiere una lista desordenada, cual podemos usar como envoltura para todos estos valores, así que salta a nuestra sección del cuerpo fuera del guión, tiene una lista desordenada, y el primer paso es agarrar una referencia a nuestros elementos. Const ul es igual a documento.QuerySelector, pase en nuestra lista desordenada. Esto ahora nos da dos cosas. Tenemos un bucle, así que estamos haciendo un bucle sobre todas las propiedades dentro de nuestro objeto, y ahora esto nos da un elemento al que adjuntar esto. Con esto siendo una lista desordenada, necesitamos crear un nuevo elemento de lista para cada uno de estos valores. Const li para nuestro elemento de lista, lo crearemos con document.createElement (). Un elemento está en li. Recuerde al crear nuevos elementos, este es generalmente un proceso de tres etapas. Creamos los elementos, creamos los contenidos, como el nodo de texto, y luego los fusionamos. La segunda parte de esto es para el texto que entra dentro de nuestro elemento de lista. Hacemos esto con document.createTextNode (), replicamos lo que hemos visto dentro de la consola. Todo lo que tenemos que hacer es copiar el contenido desde dentro de aquí, y pegar esto dentro de nuestro método. Quite el registro de la consola, fusione estos juntos accediendo primero a nuestros elementos y use el método llamado AppendChild. Pasaremos en nuestro texto. Esto ha creado un nuevo elemento independiente o un elemento de lista independiente, y luego para cada bucle necesitamos fusionar esto o insertar esto en nuestra lista desordenada. Al igual que hicimos arriba, tomaremos nuestra lista desordenada y usaremos el AppendChild. Pasándolo el elemento de lista que acabamos crear. Guardar y refrescar. Ahí vamos y esta es una muy buena manera de estructurar nuestros objetos para que se muestren dentro del navegador. Pero volvamos a este prototipo, que usted mencionó antes, que actualmente se comenta. Si descomentamos esto, guardemos esto y ahora de nuevo, actualice el navegador. También ahora vemos estos dos valores prototipo dentro de aquí. Esto es algo que tenemos que tener en cuenta y si no queremos recorrer estos prototipos, que a menudo es el caso, podemos eliminarlos usando un método objeto llamado hasOwnProperty (), que podemos usar dentro del bucle. Bajemos a nuestro bucle for-in, y en la parte superior, agregue una declaración if. Pasaremos en homer.hasownProperty (), pasando en nuestra variable de propiedad. Lo que estamos haciendo aquí es que estamos accediendo a nuestro objeto homero completo y luego revisando cada propiedad uno por uno. Estamos comprobando si la propiedad particular pertenece a este objeto homero, o si se hereda a través del prototipo. Si esto es cierto, queremos ejecutar nuestro código a continuación. De no ser así, será un valor prototipo y por lo tanto ignorado. Ahora podemos cortar esto fuera de lugar y añadir esto dentro de nuestras declaraciones if. Refresca, y esta es una forma de ignorar nuestros valores de prototipo heredados. Otra forma de bucle sobre los objetos es primero convertirlos en matrices. Object tiene algunos métodos disponibles que se pueden utilizar para hacer esto, y dependiendo de si desea acceder a la propiedad del objeto, el valor de ambos como un par. Comencemos con un método primero llamado entradas en la parte inferior, colocamos en un registro de consola para objects.entries (), y nuestro valor objeto de homer. prueba esto, salta a la consola, y aún vuelve de nuevo en array. Esto no solo está regresando de nuevo en matriz, cada una de las propiedades también es una matriz también. Contiene el nombre de la propiedad y también el valor como se puede ver aquí. Este método no incluye los valores prototipo como lo hace con for in. Si estuviéramos usando esto, podríamos ignorar las afirmaciones if que tenemos justo aquí. Para darle una oportunidad a esto, y mantener el mismo ejemplo, arriba el for en ejemplo, y luego comentar esto. Pega esto en justo debajo. Debo mencionar, no necesitamos esta declaración si ya que no necesitamos eliminar ninguno de los prototipos heredados. Retire el envoltorio, dejando estas cuatro líneas dentro. Esta vez en lugar de pasear por encima de nuestro objeto homero, ahora vamos a hacer uso de object.entries. Vamos a mover esto, y igual que lo hicimos dentro del registro de la consola reemplazando objetos, entradas de datos con el valor de homer. Guardar y refrescar. Dentro del navegador, vemos los valores de undefined. Esto puede no ser obvio al principio por qué es esto, pero esto se debe al tipo de bucle que estamos usando. Actualmente usamos un bucle for in, que se usa en objetos. Pero ahora estamos convirtiendo a homer a ser una matriz. Esto ahora significa que necesitamos hacer un pequeño cambio y en su lugar usar un bucle for, así que cambia para ser de, y recuerda ahora esta propiedad, en lugar de devolver una sola propiedad como era antes, ahora va a apuntar a una matriz que contiene dos valores tales que nuestro nombre y homero. Lo que podemos hacer en lugar de esto es estructurar D usando la matriz, que nos dará la clave y también el valor. La clave en este caso es igual al nombre, y el valor va a ser igual al homer para cada uno de nuestros ítems. Pasa esto adentro. En primer lugar, la clave, y luego también pasar en nuestro valor. Guarde esto. Recargar. Esto nuevamente funciona como se esperaba. Esta es una muy buena forma de bucle, que no involucra al prototipo. Si queremos, también podemos acceder a las claves, todos los valores individualmente también. La forma de hacer esto. Como ejemplo en nuestro log de consola, si solo queremos acceder a las claves como nombre y apellido, podemos utilizar un método de objeto llamado keys, donde pasamos en nuestro objeto homer, y ahí están nuestras cuatro claves sin los valores. Por otro lado, si solo queríamos acceder a los valores y no a las claves, podemos usar object.values, y esto devolverá esto de nuevo dentro de la consola. Esto también se usa comúnmente en declaraciones if al igual que esta. Podríamos decir si object.keys (), pasan en nuestro objeto, y acceder a la propiedad length es mayor que cero. Entonces podemos hacer algo dentro de aquí. Esto comprueba si un objeto no está vacío antes de ejecutar algún código, y solo depende si quieres acceder ya sea a la clave, al valor, o a ambos. 21. Objetos dinámicos: Este video va a convertir creando objetos más dinámicos. Con eso, quiero decir tanto la clave como el valor se pueden cambiar usando JavaScript. Cuando creamos nuevos objetos, igual que lo hicimos con este objeto home, estamos usando un valor primitivo simple como cadenas, pero nuestros programas no siempre van a ser tan rígidos. También es posible que necesitemos insertar datos que puedan cambiar, como una variable. También, incluso con los nombres clave como FirstName y LastName y ocupación. Todo esto podría ser dinámico también. Ahora te voy a mostrar algunas formas de hacer esto. En primer lugar, las formas más tradicionales, y luego una forma que se introdujo en el ES2015. Comenzamos insertando variables como valores, y esto es bastante simple de hacer. Primero creemos una variable llamada FirstName y establezcamos esto igual a homer. Podemos entonces hacer referencia a esta variable dentro de nuestro valor de propiedad cuando creamos nuestro nuevo usuario homer. Recuerda, ya que ahora nos estamos refiriendo a una variable en lugar de una cadena, necesitamos eliminar las cotizaciones circundantes. Guarde esto y actualice. Esto funciona igual que antes, pero esta vez ahora estamos apuntando a una variable. Ya sabemos que podemos agregar nuevas propiedades también como esta. Podemos acceder a nuestro objeto, acceder a la propiedad likes, y establecer esto igual a una cadena. Guardar y refrescar, y esto también se agrega a nuestro objeto. Actualmente, el valor de likes se establece para ser una cadena. También podemos querer que esto sea dinámico también. Vamos a tratar de establecer esto como una variable en lugar de una cadena. Quitar las cotizaciones. Voy a crear esto como una variable justo arriba, const likes, e insertar nuestra cadena dentro las garrapatas traseras para que podamos insertar nuestra variable todo pasando nuestro FirstName. En este caso, dirá homerlikes, seguido de un valor particular. Yo envío FirstName, un texto de likes, y ahora nuestros likes dentro de aquí apuntarán a nuestra variable, que ahora se muestra en el navegador. También toma en cuenta nuestra variable firstName también, y la coloca como parte de la cadena. Si tuviéramos múltiples me gusta, es posible que también queramos numerarlos. Podemos empezar creando un valor inicial. Diremos que el número sea igual a un valor inicial de uno. A continuación, añada este valor numérico a nuestra variable. Como esperaríamos, sólo tenemos el único número 1. Si pudiéramos duplicar esto y cambiar esto para ser un segundo valor como Donuts, podríamos incrementar este número en uno usando plus plus. Esto se incrementará para cada uno de nuestros valores. Recuerde que todo esto se construye usando nuestra función constructor de objetos arriba en la parte superior. También podemos hacer todo esto usando el enfoque literal objeto. En la parte inferior, vamos a crear un objeto literal, y lo llamaremos homer2, y establecemos esto igual a un objeto literal donde establecemos nuestras propiedades como FirstName o también podemos hacer uso de nuestros Variable firstName también. Registra esto en la consola. Como se puede ver, nuestra variable también se puede insertar utilizando este enfoque. Pero esto puede empezar a parecer un poco confuso porque aquí, apuntamos a toda la variable firstName, pero también el nombre de la propiedad todavía está apuntando a esta variable firstName también. Entonces, ¿por qué vemos esta salida como una cadena más que el valor de homer? Bueno, para la llave, no necesitamos envolver este nombre entre comillas. Esto siempre se mostrará como una cadena. Entonces, ¿cómo iríamos sobre hacer que esta propiedad nombrara dinámica si no podemos usar una variable así? Bueno, una opción sería simplemente crear un objeto vacío sin ninguna propiedad en el interior. Entonces podríamos agregar propiedades al igual que lo hacemos anteriormente usando los corchetes o alternativamente usando una característica ES2015 llamada nombres de propiedad computados. Podríamos usar los corchetes directamente dentro de nuestros objetos. Entonces rodear nuestra propiedad firstName con los corchetes, que ahora dice que el código dentro de estos corchetes no debe ser tratado como una cadena. En cambio, se evalúa como una expresión de JavaScript, lo que significa que si ahora mostramos esto dentro del navegador, en cambio, ahora vemos el valor de homer, que es nuestra variable. Incluso este control total sobre la clave de propiedades, y también el valor de propiedades usando JavaScript. También podríamos tirar de nuestras propiedades igual que lo hicimos desde arriba. Podríamos acceder a esto sin el prefijo homer , pega esto en. La única diferencia es más que los iguales, necesitamos cambiar esto vía colon. También podemos sumar nuestro segundo a de Donuts. Añade una coma, coloca un colon. Vamos a probar esto en el navegador. Abre esto. Entonces esto ahora se inserta, pero en lugar de los valores de uno y dos, vemos los valores de dos y tres ya que ya incrementamos esto justo por encima, podemos comentar este hacia fuera. Nos está llevando de vuelta a nuestro ejemplo original. Es así como podemos usar nombres de propiedad computados con nuestros objetos para hacer tanto la clave como el valor más dinámico usando JavaScript. 22. Tipos de referencia y primitivos: Utilizamos muchas variables en codificación y JavaScript para almacenar nuestros datos. Pero si vamos un poco más profundo, hay algunos conceptos importantes que entender y eso es lo que los valores que almacenamos caen en dos grupos. Para entender mejor esto, quiero primero refrescar lo que ya sabemos sobre los tipos de datos. Tenemos valores primitivos, que son valores simples, como una cadena o un número que no tiene métodos. También tenemos tipos de objetos también. Estos dos grupos se relacionan directamente con lo que vamos a mirar ahora y esto es almacenar tipos primitivos y de referencia. Una variable de cadena sería una primitiva, y un tipo de objeto, como una variable de matriz se clasificaría como un tipo de referencia. Ambos tipos impactan el comportamiento de los valores cuando los pasamos y los comparamos. Primero saltemos a nuestro proyecto de inicio y echemos un vistazo a las primitivas. En el script para el archivo de esta lección, crearemos una nueva variable llamada Dog y configuraremos esto igual a una cadena. A continuación, crea una segunda variable llamada NewDog, y vamos a establecer esto igual a nuestra variable perro original. Esta es efectivamente una copia de nuestra primera variable. Entonces vamos a reasignar a NewDog para que sea otra cosa. Recuerde, la forma de hacerlo es seleccionar nuestro nombre de variable, y establecer esto igual a cualquier nuevo valor. Lo siguiente que hay que hacer es hacer una prueba rápida con un registro de consola, comenzando con nuestra primera variable perro, y luego un segundo registro de consola para nuestro nuevo perro. Veamos. Bueno, esto se congeló dentro de la consola. Vemos el valor de caniche, que esperarías de nuestro primer registro de consola, y el segundo registro de consola de NewDog. A pesar de que esto se le asignó originalmente la variable de caniche, esta ha sido actualizada para ser el texto de Labrador. Nada inesperado aquí, a pesar que hemos copiado una variable originalmente, la nueva sigue siendo un valor separado, completamente independiente del original. Básicamente, podemos modificar el perro original, o el perro nuevo y no se afectarán unos a otros. Este es el comportamiento de las primitivas. La variable apunta al valor guardado real. Almacenar tipos de objetos se comportan de manera diferente Hagamos un ejemplo usando un objeto que podemos copiar igual que lo hemos hecho aquí. En primer lugar, crearemos nuestra variable llamada laptop 1 y estableceremos esto igual a un objeto, que por supuesto es un tipo de objeto. Las propiedades o marcas, y los datos en su interior no importan. El modelo estableció cualquier valor como una cadena, y luego justo debajo, haremos una copia de esto, igual que hicimos con nuestro NewDog. Esta se llamará laptop 2, que es igual a la computadora portátil 1. De la misma manera que lo hicimos en la parte superior con nuestras primitivas, actualizaremos o reasignaremos nuestra laptop 2 luego agregaremos una nueva propiedad, como el tamaño. Esta vez para los registros de la consola, el primero es el portátil 1. También veré cuál es el valor de la laptop 2 . Pon a prueba esto. Refrescar. Veremos que ambos valores son exactamente los mismos. Esto puede parecer realmente extraño porque tenemos la propiedad size tanto en el portátil 1 como en la computadora portátil 2 a pesar que solo hemos agregado esto a nuestra segunda variable. Significado que parece ser un vínculo entre el portátil uno y el portátil 2. Cuando creamos nuestras variables almacenadas en una primitiva justo arriba con una cadena, la variable apunta al valor único real almacenado en la memoria, y estos son todos valores únicos. No obstante, sin embargo, cuando creamos una variable que contiene un tipo de objeto, el objeto sigue almacenado en la memoria. Pero estas variables, como la laptop 2, contiene una referencia a la ubicación de ese objeto en lugar del valor real, ahí el tipo de referencia de nombre. Aquí estamos creando nuestro portátil original uno, y luego cada vez que creamos una copia como laptop 2, todo apunta al mismo objeto original. Dado que todas las copias apuntan al mismo valor, es por eso que al modificar alguna de ellas, como aquí, también se actualizará el original. Algunos otros idiomas nos permiten cambiar este comportamiento. Pero con JavaScript es fijo. Así como un resumen rápido y tal vez aclarar si no estás seguro. Cuando creamos una variable para almacenar en una primitiva, como una cadena, la variable apunta a un valor único real almacenado en la memoria, es decir, nuestro Perro y también nuestro NewDog, son completamente valores únicos e independientes. No obstante, sin embargo, cuando creamos un nuevo tipo de objeto basado en un objeto original, la versión copiada contendrá una referencia a la ubicación del objeto original en la memoria, ahí el tipo de referencia de nombre. Esto es algo que probablemente no te importa demasiado hasta que tal vez nos topemos con un tema donde cambias un objeto y todos cambian inesperadamente, y no sabes lo que está causando el tema. Con esto en mente, a continuación, cubriremos cómo podemos comparar dos objetos. 23. Comparación de objetos: Lo que aprendimos en el video anterior es que un valor primitivo es único y almacenado por un valor y un tipo de objeto se almacena como referencia. Esto ahora nos ayudará a comprender mejor el comportamiento que estamos a punto de ver al comparar dos objetos, es que dentro de nuestros archivos de inicio tenemos dos objetos similares con las mismas propiedades. Ambos tienen la marca y también el modelo y también los mismos valores. Vamos a utilizar estos para comparar calidad. De una suposición sensata, pensarías que si comparáramos ambos, que se considerarán un verdadero partido. Esto sería un supuesto justo ya que ambos tienen la misma marca y también modelo. Saltando a la consola, si hacemos una comparación con primitivos, esto es bastante simple. Si 1 es igual a 1, esto devolvería el valor de true. Esto es sencillo porque las primitivas tienen su propio valor único almacenado en la memoria. Comparar valores funciona como se puede esperar. Aunque los objetos son poco menos obvios. Como es de esperar, comparar el mismo objeto como este da como resultado verdadero. Laptop 1, si comparamos esto a sí mismo, que es laptop 1, esto también es cierto. Pero si cambiamos laptop 1 para que sea igual a la laptop 2, aunque ambos tengan la misma marca y modelo, recuperamos un valor de false. A pesar de que estos dos objetos tienen exactamente el mismo contenido, no se consideran iguales. El motivo es porque se trata de tipos de referencia. Recuerde, una variable de tipo de referencia apunta a una ubicación en la memoria, no al valor real. Aquí no estamos comparando realmente el contenido de ambos objetos. En cambio, estamos comparando dos ubicaciones de memoria diferentes. Es por ello que la comparación es falsa. Sé que esto puede parecer un poco confuso, pero así es como funciona JavaScript. Volviendo a lo que miramos en el video anterior, ¿qué crees que pasará si copiamos un objeto? Por ejemplo, si configuramos la constante con laptop 3 y configuramos esto igual a laptop 1. Bueno, probemos esto. Podemos comprobar si el portátil número 1 es igual al portátil 3. Recuerda, aquí estamos haciendo una copia y esto da como resultado un valor de verdadero. Ahora, éste vuelve verdad porque cuando creamos laptop 3, no copiamos el contenido de la laptop 1. En cambio, la computadora portátil 3 ahora apuntará a nuestra original laptop 1 ubicación en la memoria. Independientemente de cómo se almacenan todas estas variables detrás de escena, posible que aún necesitemos una manera de comparar las propiedades de dos objetos. Necesitamos una forma de comparar laptop 1 con laptop 2, que va a resultar en true. Una forma de hacerlo es usar un método JSON llamado stringify. Vamos a buscar más datos de JSON. Stringify es una forma de convertir un objeto en una cadena y se ve así. Analizando JSON, un método llamado stringify, vamos a analizar en el valor de la laptop 1. Si probamos esto dentro de la consola, podemos ver que nuestro objeto se está convirtiendo en una cadena. Comparar una versión de cadena de laptop 2 con una versión en cadena de laptop 2 hará que nuestra comparación mucho más fácil. Haremos lo mismo. Verificaremos si esto es igual a json.stringify. Esta vez analizaremos en el valor de la laptop 2. Salta a la consola. Esto es igual a cierto ya que ambos valores de cadena son exactamente los mismos. Uno de los problemas aunque con el uso de este método es las propiedades deben estar en el mismo orden exacto para que esto funcione. Si el portátil 1 y la marca es nuestra segunda propiedad, esto resultaría en falso. Para solucionar esto, tenemos un par de formas diferentes de revisar esto. El primero, que sólo es realmente bueno para comparar objetos simples como este es que podríamos crear una función llamada check equality, que va a revisar manualmente nuestros dos objetos. Cuando llamamos a esto, estamos analizando el objeto 1 y el objeto 2. Entonces devolveremos el valor de if object 1. La marca es igual al objeto 2. Esa es nuestra primera comparación. Después también queremos comprobar si el modelo también es el mismo. El doble ampersand, comprobar si object1.model es igual a object2.model. Este es un largo camino. Es una forma manual de hacer las cosas, pero funcionaría. Podemos comprobar esto llamando a nuestra función de igualdad de cheques. Nuestros dos objetos van a ser laptop 1 y también laptop 2, estos son los dos que quieres comparar. Para ver cuál es el valor de retorno, podemos analizar esto en nuestro registro de consola, refrescar. Objeto 1 uno no definido, solo necesitaría asegurarme de que estos tengan un j, refrescar, y este es el valor de true. Ahora no importa en qué sentido se encuentren nuestras propiedades en cada uno de los objetos. Todavía podemos hacer una comparación simple o manual de cada uno de estos. Otra opción es hacer uso de métodos de objeto para acceder a las claves y los valores. Ya hemos mirado estos en el looping con video objeto. Recuerda que accedemos al objeto, una O. capital Podemos entonces subir las claves como modelo y marca o laptop 1, así. Ahí está modelo y marca. Además, podemos hacer lo mismo por objeto.values también. Utilizando este enfoque, podemos modificar nuestra función de igualdad de cheques para todas las claves y valores y comprobar si tenemos un partido. De esta manera también significa que el orden de las propiedades no es importante como lo fue con el primer método de estringify. Como se puede ver, los tipos de objetos pueden ser algo complejo. Si no entiendes cómo funcionan en JavaScript, solo se necesita un poco de experiencia para acostumbrarse. Pero no espero que recuerdes todo esto por primera vez. Pero solo estar al tanto de cosas como esta realmente te ayudará en el futuro si te encuentras con algún tema relacionado con objetos. 24. Introducción de la sección: Próximamente, tendremos un gran proyecto para que trabajes y esto te va a dar mucha práctica con lo que hemos aprendido hasta ahora. Este va a ser nuestro proyecto que se llama Speedy Chef. Toda la idea es que vamos a cocinar pizzas que vienen a través de pedidos y tratar de conseguir tantas terminadas como podamos, así que con el chef y podemos empezar el juego, que va a iniciar el servicio para el cocina y luego podemos ver nuestras órdenes entrando por encima a la derecha. Cuando queremos empezar a trabajar en un pedido, simplemente hacemos clic en uno y luego lo tira a la sección de trabajo en, que nos dice qué pizzas necesitamos hacer. Para este ejemplo, necesitamos un jamón y piña, y dos pepperonis. Actualmente, comenzaremos con el jamón y la piña. Atravesar los pasos del método justo aquí y el primero es rodar la masa. Haga clic en esto. Después necesitamos agregar nuestra salsa, pimienta, queso, agregar 12 piezas de jamón. Por último, 12 piezas de piña y esto está todo actualizado en nuestra sección justo aquí. Una vez que hayamos terminado, podemos añadir esto al horno y si fueras a cometer un error, también podemos añadir esto a los desperdicios. Da click en esto y luego detrás de escena, también hace un cheque para asegurarnos de que tenemos todos los ingredientes correctos que necesitamos para nuestra pizza. Hay un jamón y piña, que entra al horno. Podemos pasar a los pepperoni, y luego una vez que terminemos con esto, podemos completar nuestro pedido y pasar al siguiente. También tenemos que mantenernos al tanto de las cosas porque estas órdenes seguirán llegando a medida que avanza el tiempo. Este es un proyecto razonablemente grande en comparación con lo que hemos construido hasta ahora. Pero la mayoría de las cuales ya sabrás. Es solo un caso de construir una pequeña característica a la vez y estarás perfectamente bien. En el camino, te daré una serie de tareas para probar las cosas por ti mismo, pero no te preocupes, no estás por tu cuenta. También correré por cada etapa para que podamos comparar y recordar, como siempre, hay múltiples formas en que podemos acercarnos a las cosas. Si ambos se nos presentan diferentes soluciones que ambas funcionan, esto está bien. Dentro de los archivos de inicio, tenemos un iniciador básico con nuestra página de índice, que suma todo el diseño inicial que necesitamos. También tenemos algún estilo en nuestras hojas de estilo y esto solo significa que podemos saltar directamente a nuestro JavaScript y enfocarnos en esto. A pesar de que se ve igual que el proyecto final, nada realmente funciona todavía y estaremos codificando todo esto durante la clase. Como iniciador, también he incluido el pizza.svg y también un archivo JavaScript cual está enlazado en nuestra página de índice, que contiene tres matrices. Estos tres rayos nos van a ahorrar mucho mecanografía. Primero es una matriz de pizza y dentro de aquí, tenemos varios objetos de pizza con el nombre de la pizza, un método para hacer esta pizza y también los pasos requeridos que utilizamos en el proyecto para comprobar si el chef tiene hizo la pizza correcta y también colocó los ingredientes en el orden correcto. Entonces justo debajo de esto, algunas órdenes de muestra para que el juego vaya y también estaremos generando estos dinámicamente también. Por último, una lista de ingredientes que necesitamos dentro de la cocina. Genial, así que todo esto ya está listo para irse. Abre esta carpeta de proyecto dentro del navegador y luego salta la siguiente lección donde nos pondremos a trabajar en la lista de estos pedidos dentro del navegador. 25. Listado de pedidos: Este video solo tendrá un objetivo principal y esto es recorrer todos los pedidos y mostrarlos en el navegador. Recuerda que justo arriba, provista de esta carpeta es la matriz más antigua que vamos a recorrer y mostrar dentro del navegador. El lugar para esto será sobre el lado derecho, en la sección lateral. En la página de índice, tenemos dos secciones principales. Tenemos este envoltorio principal y esto contiene todos los contenidos, que tiene el fondo blanco. Entonces el aparte con la idea de órdenes. Por ahora, esto solo tiene un rumbo de nivel 3. Pero lo que vamos a hacer es recorrer todos estos pedidos y colocarlos en esta sección. Para ello, crearemos una función llamada createOrdersList. Esta función va a recorrer la matriz de órdenes anterior. Para cada uno de estos elementos en la matriz, construiremos un div, que se parece a esta sección aquí. Ciertas partes de esto van a ser dinámicas. Por ejemplo, tendremos el número de pedido. Esto va a ser dinámico junto con el nombre de la pizza y también la cantidad para cada línea también. No hace falta que te preocupes por estos comentarios. Estas son sólo sólo una guía visual para darnos una idea de lo que vamos a hacer. Empezaremos abajo en la parte inferior creando nuestra función. La función se llama createOrdersList , la palabra clave function. Lo siguiente es recorrer cada uno de estos pedidos. Sabemos cómo hacer esto. Podemos usar un bucle como FOREach. Agarra nuestra matriz de órdenes paraEach. Recuerda que forEach va a ejecutar una función para cada elemento de nuestra matriz. Los lugares funcionan justo dentro. daremos a cada uno de estos artículos el valor del pedido. Ahora, tenemos que construir básicamente nuestros elementos al igual que hicimos anteriormente para cada uno de estos pedidos. Empezaremos creando este envoltorio principal, que es el div. Agregaremos una clase llamada wrapper de pedidos. Nos pondremos a trabajar en nuestro contenido por dentro. Sabemos cómo crear elementos. Utilizamos document.CreateElements. Al igual que en el nombre de la etiqueta de los elementos, que es un div dentro de una variable o constante llamada orderwrapper. Luego agrega nuestro nombre de clase seleccionando el nombre de la variable de OrderWrapper. El inmueble llamado ClassName. Así como vemos arriba, esto va a ser Order_Wrapper. Por lo que sólo vamos a añadir un comentario. Este es el envoltorio principal. Después de esto, agregaremos un comentario. Esto va a ser para sumar el número de pedido. Esta es nuestra primera sección dentro de nuestra envoltura de pedidos. Este será un nivel 4 nuestro rubro. Almacenar esto dentro de una constante. Recuerdo al crear elementos como thses, necesitamos crear el elemento real y luego el contenido dentro. Por lo que necesitamos dos variables. El primero es orderNumber L, que es elementos de estante. Así document.createElements. Necesitamos un nivel para encabezar. A continuación, el texto que va a entrar, y este es el número de orden. El nombre constante del número de pedido y lo creamos con document.createTextNode. Ya que esto va a ser dinámico porque cada pedido tiene un número diferente, que vamos a agarrar de esta identificación única. Colocaremos esto dentro de los backticks para que esto sea dinámico. En primer lugar, el texto de orden, que es esta parte justo aquí, seguido de un valor dinámico. El valor dinámico se puede insertar utilizando el símbolo del dólar y las llaves rizadas. En primer lugar, seleccionamos nuestro pedido individual, cual se almacena en esta variable, y luego la propiedad de ID. Como siempre, al crear un elemento, así como éste, tenemos dos piezas independientes de información y necesitamos fusionarlas ambas juntas. Lo hacemos accediendo al padre, que es el orderNumberElement.appendChild, donde pasaremos en nuestro contenido real, que es el número de orden. Esto ahora nos deja con nuestro div, que es el envoltorio. Entonces nuestro primer elemento, que es nuestro rumbo de nivel 4, pero aún necesitamos agregar este rubro a nuestro envoltorio. Agarra el Order_Wrapper y luego volveremos a usar ApendChild, que tomará en nuestro elemento número de orden. Entonces tenemos la primera sección justo aquí, y luego la siguiente parte es crear nuestra propia lista de pedidos. Un comentario rápido, así que sabemos lo que estamos haciendo aquí de gran pizza UL para cada pedido, y el envoltorio así document.CreateElements. El elementos era una lista desordenada. Coloca en una constante llamada lista de Pizza. Esto ahora nos da una lista desordenada, que es el envoltorio principal para todas las pizzas. Pero recuerda, podemos tener varios artículos de lista porque cada pedido puede tener más de una pizza. Entonces debido a que nuestros pedidos tienen múltiples pizzas dentro de una matriz, nuevamente necesitamos hacer un bucle como para cada uno. Para ello, volvemos a saltar a nuestro orden individual. Seleccionaremos la matriz, que se llama pizzas. Utilice el para cada bucle para ejecutar una función para cada elemento o cada pizza dentro de la matriz, almacene esto dentro de una variable llamada Pizza. Entonces podemos llegar a trabajar con construcción de cada uno de estos ítems. Cada uno de estos elementos será un elemento de lista. Pero primero, necesitamos crear este contenido en su interior. Tenemos la cantidad como uno, y luego un guión, luego un elemento span seguido del nombre de cada una de estas pizzas. Salta a nuestra función y para cada uno de estos artículos crearemos un elemento span para envolver nuestro título y almacenar esto dentro de una constante. Éste es la cantidad de pedido L, por lo que document.createElements. Elementos va a ser el lapso y luego siguiente la cantidad de cada uno de estos elementos, document.createTextNode. Esta sección necesita ser dinámica o colocarse en los backticks. Insertar una variable. acceder a la cantidad seleccionando primero nuestra pizza. En cada una de estas pizzas, si echamos un vistazo a la matriz, tiene una propiedad llamada cantidad. También usaremos pronto el nombre de la propiedad. Para éste, esto es pizza.quantity, seguido de un guion justo después. Pensando en esto, puede ser un poco más fácil si solo agregamos esta cantidad a nuestro lapso. En lugar de tenerlos uno afuera, tal vez coloquemos esto dentro de un elemento, en lugar de tener esto afuera por sí solo. Haremos esto accediendo a los elementos de cantidad de pedidos.appendChild que está en la variable quantity, seguido de nuestro PizzaName. Para nuestro PizzaName, esto necesita ser envuelto también en un elemento span y luego el contenido en su interior. Tenemos que hacer exactamente lo mismo que justo arriba, vamos a crear una constante llamada PizzaNamel document.createelement. Elemento es un lapso seguido por el PizzaName, que necesitamos crear con crear nodo de texto, agarrar nuestra pizza individual. Entonces tal y como hemos visto antes, tenemos la cantidad seguida de la propiedad name. Podemos acceder a esto con pizza.name. Fusiona estos dos juntos. Pizzanamel.appendChild no estaba en el contenido del texto, que es PizzaName. Genial, así que tenemos dos tramos separados aquí. Tenemos nuestro primer lapso, que es envolver nuestro número individual o la cantidad de pizzas. Entonces un segundo lapso que contiene nuestro PizzaName. Ambos elementos deben fusionarse en un elemento de lista. Entonces el elemento de la lista necesita ser agregado a nuestro padre. Así que vamos a trabajar. Como nuevo comentario sólo para mantener esto claro. Este es crear un elemento de lista. Mostrar la cantidad y PizzaName. Primeros elementos almacenados en una constante llamada PizzaItem, document.createElement. Este fue un elemento de lista. Tenemos nuestro elemento de lista circundante y luego necesitamos fusionar nuestros dos elementos desde arriba. La cantidad que es esta variable, y también el PizzaName. Vamos a agarrar nuestro PizzItem. Ya que estamos agregando múltiples elementos hijos, simplemente podemos usar append y ese es ahora nuestro primero, que era el elemento de cantidad de pedido. Entonces el PizzaNameElement. Ya casi terminamos, tenemos nuestro elemento de lista se creará sin dos piezas de contenido en su interior y ahora tenemos que agregarlas a nuestra lista desordenada. Tu lista de pedido está almacenada en la constante llamada PizzaList. Agrega esto justo debajo de su lista.AppendChild no estaba en nuestro artículo de pizza. Ya casi estamos ahí. Ahora tenemos nuestros elementos de lista agregados a nuestra lista desordenada. Pero ahora la lista desordenada también necesita ser agregada a nuestra envoltura. El envoltorio es solo esta variable de envoltura de orden aquí. Pero sí necesitamos agregar esto fuera de nuestro bucle. Asegúrate de localizar el final de nuestro bucle. Lo que hice justo debajo de esta línea aquí. Selecciona el OrderWrapper.appendChild, pasando en nuestra lista de pizzas. Este es ahora nuestro orden completo rápido constreñido. El siguiente paso, o el paso final para esto, es agregar ahora esto a nuestra página web. Necesitamos las secciones de estos dos. Esta sección es el aparte. Podemos agarrar esto con la idea de órdenes. Justo debajo de nuestra envoltura de pedidos, use document.QuerySelector para agarrar nuestros pedidos.AppendChild no estaba en nuestro envoltorio de pedidos. Probemos esto, ahora necesitamos llamar realmente a esta función para que funcione. Vamos a agarrar tres lista de pedidos, llámenos al fondo, refrescar el navegador. La buena noticia es que en realidad podemos ver los pedidos en la pantalla, pero no se ve del todo como esperamos. Echemos un vistazo dentro de nuestro código y veamos qué necesitamos cambiar. Actualmente nos falta la cantidad antes de que el PizzaName real, que es este elemento de la lista justo aquí. Estamos agregando el número de pedido. Creo que esto sólo tiene que ser la cantidad de pedido. Esto se ve mucho mejor ahora tenemos el número de pedido en la parte superior, cada uno de estos está en secuencia, seguido del nombre y la cantidad de cada una de las pizzas en el pedido. Como se puede ver, esta es una función bastante larga, e idealmente, queremos refactorial esto en piezas más pequeñas, más enfocadas y esto es lo que haremos a continuación. 26. Listar órdenes Refactor: A medida que escribimos nuestro código y sobre todo a medida que nuestro proyecto crece. Queremos refactorizar regularmente nuestro código siempre que sea posible. Por el momento, nuestro código funciona completamente bien. Esto es en lo que queremos enfocarnos al principio, pero también es importante mirar las cosas con regularidad y ver si podemos mejorar las cosas. Este video nos va a implicar refactorizar esta única función que tienes. Descúbralo en otros más pequeños cuando sea posible. Es una buena idea tener funciones más pequeñas que se enfoquen en tareas individuales y esto ayuda con la legibilidad y la depuración. La forma en que te acercas es, depende de ti y muchas veces preferencia personal. Pero cuanto más cerca podamos conseguir una función para hacerlo en una sola tarea, mejor. El primer paso que vamos a dar es eliminar todo el proceso de creación de pedidos de esta función y colocarlo en una función independiente. Sacaremos todos los contenidos que se utilizan para crear nuestro pedido, dejando nuestra función “CreateOrdersList” con una tarea sencilla. Esta tarea es hacer un bucle sobre toda la matriz de órdenes y luego agregarlas a la sección aparte. Para ello, crea una nueva función justo arriba. Este va a ser llamado a “CreatesingLeOrder”. Dado que esta función se va a repetir para cada orden dentro de la matriz, también tomaremos en el orden como una variable moviéndose hacia abajo y saltar a nuestra función. Comenzando con “OrderWrapper” dentro del bucle, suelta todo el contenido desde aquí, justo el camino hacia abajo a donde agregamos esto a nuestro “OrderWrapper”. Corta esto y sólo deberíamos quedarnos con nuestro bucle. Entonces el apartado donde añadimos esto al aparte. Ahora esto es recortado. Salta a nuestro “CreatesingLeOrder” y pega esto en. Ahora, si saltamos a nuestro bucle donde acabamos de cortar este código. Ahora podemos llamar a esta “ función independiente ” que se llamaba “CreateSingleOrder”. “ CreateSingleOrder” también necesita tomar en el orden ya que lo estamos pasando justo aquí, que luego se utiliza en el resto de nuestra función. Ahora si piensas en esto, esto es simplemente no llamar a ninguna función. En realidad no está haciendo nada con él. Todo lo que tenemos que hacer es que necesitamos devolver el pedido de esta función anterior, almacenar esto dentro de una variable y luego podemos agregar esto al DOM. Primero cogeremos nuestro OrderWrapper, que es la sección de pedidos completos, y devolveremos esto de nuestra función. Este valor de retorno puede entonces almacenarse dentro de una variable llamada “SingleOrder”. SingleOrder ahora se puede agregar a nuestra barra lateral. Vamos a probar esto, “Guardar” y “Refrescar”, y todo sigue funcionando igual que antes pero esta función sigue siendo bastante larga. También podemos reducir el tamaño de estos dos. Nuevamente, cómo se desglosa esto se reduce a la preferencia personal. Pero lo que voy a hacer es externalizar la creación “PizzaList” a una nueva función y esto también podría usarse en el futuro. El apartado Pizzalist es este bucle. También necesitamos agarrar la lista de un pedido, que guardamos esto dentro de así que copia esto y también el bucle. Entonces crea nuestra función y justo arriba llamada “CreateListofPizzas”. Sólo quería tomar en las pizzas. Entonces “Pegar” en nuestra nueva sección. Simplemente asegúrate de que la sección correcta esté pegada en el interior, que es nuestra lista desordenada, seguida de nuestros cuatro cada bucle. En tan solo un momento en que llegamos a llamar realmente a esta función. Recuerda que esto va a llevar en todas nuestras pizzas para que no necesitamos esta sección de pedidos. Podemos llamar a nuestras pizzas directamente y es variable. Ahora podemos llamar a esta función desde el lugar donde acabamos de cortar este código.El nombre de la función era “createListofPizzas”. Esto necesita ser pasado todas las pizzas para este pedido, que primero podemos agarrar de nuestro pedido y cada pedido tiene la propiedad de pizzas. Del mismo modo que lo hicimos a continuación, necesitamos almacenar esto dentro de una variable y también devolver algo para nuestra función. Lo que necesitamos para volver al final es nuestro “Pizzalista”. El valor devuelto puede entonces almacenarse dentro de una constante. Si llamamos a esta constante “Pizzalist”. También se une muy bien con nuestro nombre de variable que usamos antes, que luego se agrega a nuestro “OrderWrapper”. Dale a esto un “Guardar” y prueba esto, “Refresca” y todos los pedidos siguen funcionando como se esperaba. Funciones de refactorización como esta pueden no ser siempre para ti y puedes decidir hasta dónde quieres llegar. Nada está cambiando en cuanto a la forma en que funciona el proyecto. Todavía sólo vemos los pedidos en pantalla pero ahora tenemos tres funciones claras con una tarea específica. Tenemos en la parte superior, “CreateListofPizzas”, que se devuelve de vuelta de esta función. Esta lista de pizzas luego se agrega al DOM cuando creamos nuestro único pedido y un “SingleOrder” se bucle en nuestra última función y luego se agrega al DOM. 27. Función de ayuda de elemento: Otro refactor que podemos hacer para salvarnos mucho código es mirar lo que estamos repitiendo actualmente en nuestras funciones y ver si hay una manera de externalizarlo en una función reutilizable en su lugar. Si echamos un vistazo a nuestro código en esta etapa temprana, y subiremos a la función CreateListofPizzas. Ya tenemos algunas cosas que actualmente estamos repitiendo. Estamos repitiendo creando estos elementos en nuestros tres pasos. Forma parte de la cantidad. Estamos creando un elemento span. Estamos creando el TextNode, y luego estamos fusionando estos dos juntos. Estamos haciendo lo mismo por nuestro PizzaName. Estamos creando un elemento. Estamos creando un TextNode para los contenidos, fusionándolos, bajando un poco más a CreateSingleOrder. También estamos haciendo algo similar justo aquí estamos creando nuestro elemento de texto, que está en un envoltorio de nivel 4. Estamos creando los contenidos y luego estamos agregando juntos, y todo esto está completamente bien. Esto es algo que tenemos que hacer para crear nuestros elementos. Por cada vez que creamos un nuevo elemento en cualquiera de estas funciones, es un proceso de tres partes tomado tres líneas de código. Sería bueno crear una función auxiliar para reducir la cantidad de código, y esta va a ser la tarea de este video. Crearemos una función auxiliar que va a tomar en el nombre del elemento. Esta es la sección de crear elementos. Tomarás en los contenidos, que es el TextNode, los fusionará, que suele ser nuestra tercera línea, y luego devolveremos este nuevo elemento a lo que llame a nuestra función. Vamos a trabajar. Crear una nueva función que va a ayudar con esto llamado BuildElement. EdificioElemento también necesita tomar en él dos cosas. Se necesita tomar en nombre de los elementos como el h4 y también el contenido que va dentro. Pasará esto cuando llamemos a esta función, y la primera va a ser el elementName y el segundo es el ElementContent. Dentro de la función va a ser bastante familiar por lo que ya hemos hecho, y de hecho, podemos copiar cualquiera de estos ejemplos. Resolver CreatesingleOrder. Tener las tres líneas de código donde creamos el elemento, creamos los contenidos, y los fusionamos juntos. Si lo desea, podemos copiar las tres líneas, pegarlas dentro. Entonces tenemos que hacer esto un poco más genérico. Empezando con la primera constante. Esto es para el elemento. El segundo es para el contenido, y luego dentro de ambos de estos corchetes, podemos pasar en los datos que se pasan a toda la función. El primero es para el elementName y el segundo podemos quitar lo que tenemos actualmente , lugar en ElementContent. Cambiar los nombres de las variables. Éste será element.appendChild, pasando el contenido a este elemento. Lo final que tenemos que hacer, actualmente estamos creando un elemento. También necesitamos devolver esto de nuestra función, se puede acceder dentro de nuestro código. Devolverá los elementos completos después de que se haya fusionado, y esta función ahora puede reemplazar cualquiera de estas tres líneas de código que construya un elemento. Si agarramos el nombre de nuestra función y también los corchetes con el contenido, ahora podemos reemplazar cualquiera de estas secciones justo arriba. Comenzaremos con CreateSingleOrder, para todos los elementos de número de pedido, el número de pedido, y luego la tercera línea que fusiona ambos juntos. Voy a reemplazar esto con nuestra función ElementName. Esto es un h4. Para el contenido podemos reemplazar esto el mismo contenido exacto que usamos justo arriba. Agarra esto y pega esto dentro. Mantén nuestra nomenclatura consistente ya que actualmente estamos utilizando una constante llamada orderNumberel, y accedemos en esto justo debajo, también necesitamos almacenar esto dentro de una constante con el mismo nombre. lo que pasa aquí es que estamos construyendo nuestros elementos dentro de nuestra nueva función. Luego devolvemos esto de vuelta de la función, que luego se almacena dentro de esta constante, que luego podemos usar en el resto de nuestro código, justo debajo. Si lo desea, podemos eliminar las líneas de código existentes libres, y luego podemos pasar a nuestra primera función que es createListofPizzas. Tenemos las tres líneas justo aquí. Voy a comentar esto para que podamos usarlo como referencia. Tenemos que pasar en nuestra función BuildElement, pasando en nuestros dos valores. El primer valor es nuestro lapso. El segundo copiará nuestra plantilla literal. Ahora esto en. También para esto abajo en la parte inferior, utilizamos en el nombre constante original del elemento OrderQuantiTY. Podemos copiar esto y almacenarlo dentro del valor de retorno. Quita estas tres líneas si quieres. A continuación, el PizzaName. Estas tres líneas hacia fuera. Crearemos nuestra constante, que es el mismo nombre de PizzaNameel. La función de orden también se toma en un elemento span, y el contenido es pizza.name. Quitar estos. Ambos son los mismos, sólo tenemos que cambiar ha terminado. Éste debería ser el PizzaNameel. Traeremos éste. Bueno. Ahora vamos a guardar esto y más en el navegador y podemos probar. Todo sigue funcionando bien. Saltando a la consola, no vemos ningún error dentro de aquí. Nuestra barra lateral tiene nuestros pedidos generados a la derecha. Tenemos los números de orden, tenemos los nombres de pizza, y también las cantidades también. Todo esto parece ahora seguir funcionando bien, y ojalá puedas ver los beneficios de hacer cosas como esta. A pesar de que nuestra función ha tomado algunas líneas de código, cada nuevo elemento que creamos reducirá tres líneas de código en una sola. También podemos usar esto muchas más veces en el futuro durante nuestro proyecto para ahorrar aún más código. No se trata sólo de legibilidad y organización. Una sola línea como esta significa menos posibilidades de errores de escritura, y también un aumento en la velocidad a medida que nuestro programa crece. 28. Selección De La Orden Actual: Tenemos algunos pedidos a la derecha ponernos en marcha, y pronto crearemos otros nuevos al azar también. Justo antes de pasar a esto, quiero mostrarles cómo funcionarán las cosas para que puedan imaginarse lo que vamos a estar haciendo. Una vez que el juego haya comenzado, nuestras órdenes comenzarán a entrar y mostrarse a la derecha. El chef que es el jugador, entonces hará clic en una orden en la que comenzar a trabajar, que luego trasladará este orden a la sección de trabajo en. Esta sección es en lo que nos vamos a centrar ahora. Posteriormente, entonces iremos aún más allá haciendo clic en una pizza en particular en la sección de trabajo. Entonces esto mostrará el método y también lo configurará como el actualmente trabajando en pizza dentro de la cocina. Ahora sólo podemos enfocarnos en hacer click en un pedido y moverlo a la sección de trabajo en. Como habrás adivinado, para ello vamos a crear una nueva función justo por encima de nuestra lista de crear pedidos. Se trata de una nueva función llamada SelectCurrentOrder. Para llamar a esta función, necesitamos escuchar un clic en cualquiera de estos pedidos. Para ello, tenemos que pasar a nuestra función CreateSingleOrder. Si echamos un vistazo a esta sección, necesitamos agregar un oyente de eventos a cada uno de estos pedidos. Podemos hacer click en esto y luego mover ese orden en particular al apartado correcto. Justo debajo de donde agregamos esta clase. Agarra el envoltorio de pedidos, que es el div que rodea cada uno de estos pedidos. Añadir un oyente de eventos. Eso escuchará ahora por un click que activará nuestra nueva función llamada SelectCurrentOrder, nos da la prueba haciendo un registro de consola dentro de nuestra nueva función. Pasar en la información del evento para que podamos obtener los elementos correctos en los que se está haciendo clic. Entonces registramos esto con e.target. Echemos un vistazo a esto en la consola. Ahora lo que tenemos que hacer es dar click en cualquiera de nuestros pedidos. Ves la margherita. Vemos el jamón y la piña. Esto no es exactamente lo que queremos. Podemos hacer click en cualquiera de los números de pedido, cualquiera en el contenido. Pero lo que queremos hacer es que toda la sección de pedidos activa para que sea solo una sola área que se puede hacer clic. Entendemos mejor esto, saltemos a la pestaña Elementos y echemos un vistazo. Ahora saltaremos a la sección aparte que contiene nuestros pedidos y hacemos clic en cualquiera de estos divs con la envoltura de clase de pedido. Lo que queremos es solo poder hacer click en este div con la clase de wrapper de orden e ignorar todos los clics que están en los elementos anidados. Una forma de hacerlo es escuchar ahora un clic en cualquiera de estos elementos anidados, como los elementos de la lista o el encabezado Nivel cuatro. Entonces sube el árbol de elementos hasta que encuentre el primer div con la clase de envoltorio de orden. Para ello, podemos escuchar exactamente en qué elemento se hizo clic, como la lista desordenada. Entonces podemos seguir subiendo la cadena para comprobar si el elemento padre es esta envoltura de orden. Hay un par de formas diferentes en que podemos hacer esto. Podríamos almacenar una referencia a qué elemento hijo se hizo clic, como nuestra lista desordenada. Entonces podemos seguir revisando dentro de este bucle si el elemento padre es esta envoltura de orden. O una manera fácil es usar un método de elemento llamado más cercano. El método más cercano tomará un elemento como el que hacemos click. Entonces seguirá subiendo hacia la raíz del documento a través de todos los nodos padres hasta que alcance un partido de selector. El selector puede ser una clase, un ID, un nombre de elemento. Al igual que podemos hacer con el selector de consultas. Echemos un vistazo a cómo hacer esto dentro de nuestra función. En primer lugar, comenzaremos una referencia a nuestros elementos en el que se hace clic, que fue e.target. Después encontraremos los elementos padres más cercanos con esta clase de envoltorio de pedidos. Podemos hacerlo accediendo al elemento en el que se hace clic, llame al método llamado más cercano. Pues estamos pasando la consulta que estamos buscando. En nuestro caso, queremos buscar el order_wrapper. Con esto siendo una clase, agregamos en el punto como prefijo. Esto dentro de una constante llamada OrderWrapper. Entonces podemos comprobar esto registrando esto a la consola. Ahora si actualizamos y podemos intentar hacer click en cualquiera de estos pedidos. Asegúrese de que la pestaña Consola esté seleccionada. Si tratamos de hacer click en algo fuera, no vemos nada en la consola que se espera por el título de pizza. Esto vuelve de nuevo hacia la envoltura de orden de los padres. Podemos abrir esto y comprobar esto es Orden 1. Vamos a probar uno diferente. Esta es la Orden 3 y también Orden 2. Bueno por lo que ahora independientemente de qué parte del pedido en el que hacemos clic, siempre sube a los padres pedir envoltorio, para agarrar el contenido completo de este pedido. Usando este método, si no se encuentran coincidencias, recuperaremos un valor de null. También podemos comprobar en contra de esto antes de sumar nuestro pedido en la sección de trabajo. Justo debajo de donde seleccionamos nuestra envoltura de pedidos, agregamos una declaración if donde pasamos en nuestra envoltura de pedidos, podemos comprobar si esto no es igual a null. Si hemos hecho clic con éxito en un envoltorio de pedidos, ahora necesitamos agarrar esta envoltura de pedidos y moverla a nuestra sección de trabajo. paso 1 es agarrar un trabajo en sección y almacenar esto dentro de una constante llamada el orderDiv. Eso es igual a documento. QuerySelector, y el selector de consultas que necesitamos como idea de trabajar. Entonces usando append child, podemos agregar nuestro envoltorio de pedidos. El orderDiv. AppendChild pasando en nuestro envoltorio de pedidos en el que se hizo clic. Genial vamos a darle una oportunidad a esto. Podemos cerrar la consola y probar cualquiera de estos pedidos. Vamos a probar el Número 3 y esto ahora aparece en las secciones ya que hemos anexado esto como un elemento hijo Orden 2, Orden 1, y todo esto funciona muy bien. No obstante, sólo queremos poder trabajar en un solo pedido a la vez. Necesitamos una forma de verificar si solo hay un solo pedido seleccionado y colocado en este div. Una forma de hacer esto es acceder primero al trabajo en sección y podemos comprobar qué elementos child están anidados en su interior. Ver es mejor agarremos una referencia a nuestro div place esto dentro de un log de consola. Entonces podemos encadenar al final.niños. Salta a la consola. Haga click en uno de nuestros pedidos para agregarlo a la sección. Si miramos de cerca, lo primero que tenemos es una colección HTML con un encabezado Nivel 3. Después de esto, tenemos nuestro div con la clase de wrapper de orden, que acabamos de agregar. También podemos confirmar esto si vamos a nuestra página de índice que está trabajando en la sección solo tiene un solo encabezado de Nivel 3. Con esto en mente, ahora se puede usar el número de elementos hijos para detener la función. Si el número de elementos hijo es mayor que uno decir, tenemos nuestro rubro Nivel 3 seguido de cualquiera de nuestros pedidos, podemos hacerlo de nuevo en nuestra función de selección de orden actual. Quite el registro de la consola, reemplace esto por una sentencia if. Podemos comprobar si los niños. longitud es mayor que uno. Si lo es, simplemente volveremos alterar esta función. También podemos quitar los tirantes curvos y reemplaza con nuestra declaración de devolución. Vamos a probar esto. Guardar y refrescar. Doy clic en el primer orden esto funciona bien. Ahora no podemos agregar más pedidos. Lo final que hay que hacer, queremos pasar por encima de la orden a la sección de trabajo en es eliminar también al oyente de eventos. Ya no necesitamos que esta sección sea clicable, por lo que podemos eliminar esto de nuestra envoltura de pedidos. Podemos hacer esto justo antes de agregar esto a nuestra sección div. Al acceder a los elementos que se almacena en el wrapper de orden llamado removeEventListener. El oyente que queremos eliminar son los eventos click seguidos de SelectCurrentOrder que coincide con nuestro oyente de eventos. Cuando sea posible, los oyentes de eventos como este deben eliminarse cuando ya no sea necesario. Ayuda a mantener el rendimiento al día ya que el navegador ya no necesita hacer una tarea innecesaria, sino también eliminar comportamientos inesperados. A continuación, cubriremos la selección de la pizza, que vamos a estar trabajando dentro de la cocina. 29. Establecer la Pizza Actual: Mira el flujo de nuestro proyecto, ya hemos hecho el primer paso que fue trasladar el orden seleccionado en el que hacemos click a la sección Orden a la sección Working on. A continuación, necesitamos poder seleccionar la pizza en la que trabajar haciendo clic sobre ella. Esta pizza seleccionada debe entonces mostrar en el área de la cocina y también mostrar el método, todos los pasos para crear esto. Si echas un vistazo aquí he creado algunos pasos que vamos a utilizar para cumplir con este objetivo en la parte superior que es hacer clic los nombres de las pizzas y luego trasladarlos al área de cocina. Si quieres puedes seguir junto con estos cinco pasos e intentar recrear esto tú mismo o si prefieres puedes seguir conmigo. En primer lugar para poder hacer click en estas pizzas, Paso 1 incluye agregar una clase de nombre de pizza a cada uno de estos artículos. Saltemos a la función de CreateListsOfPizza , localizaremos esto. Y entonces es aquí donde creamos cada una de nuestras pizzas dentro de los elementos span. Justo antes de hacer cualquier adición, agregaremos nuestra clase seleccionando la variable de elemento de nombre de pizza. Selecciona el ClassList, el método llamado add, donde como cadena pasaremos en nombre de pizza_name. Eso es el Paso 1, cuidado . Vamos a desplazarse hacia atrás hacia abajo. El paso 2 es localizar la función SelectCurrentOrder. Ya que podemos tener múltiples pizzas, necesitamos seleccionar todos los elementos span. Y recuerda si tenemos múltiples elementos, necesitamos usar un QuerySelectorAll. Podemos agarrar todos estos elementos usando esta clase de nombre de pizza, que acabamos de agregar. Así que localicemos esta función SelectCurrentOrder, luego en la parte superior usaremos QuerySelectorAll para agarrar todos estos elementos de pizza, guardarlos dentro de una variable llamada pizzas document.QuerySelectorAll. Podemos agarrar estos con el nuevo nombre de clase que acabamos de crear, que era pizza_name. Recuerda que el objetivo es poder hacer click en uno de nuestros nombres de pizza, como nuestro jamón y piña o todos los pepperoni. Por lo que ahora podemos hacer clic gratis en cualquiera de estos nombres. Así que agarra nuestra variable, que es pizzas. Podemos usar forEach para ejecutar una función para cada uno de estos ítems. Cada una de las pizzas individuales almacenará en una variable de pizza y luego podremos añadir un EventListener a cada una de estas pizzas, así pizzas.addeVentListener. Evento será un clic, que luego ejecutará una función que aún no hemos creado llamada setCurrentPizza. ¿ De acuerdo? Así que vamos a crear esta función abajo en la parte inferior, función setCurrentPizza. Ya que activamos esto usando un evento click, también podemos pasar en la información del evento a nuestra variable y comprobar esto está trabajando con un registro de consola. Entonces para agarrar los elementos reales en los que has hecho clic, como el jamón y la piña o el pepperoni. Para agarrar el texto, podemos hacer esto con e.target en una propiedad llamada InnerText, comprueba si todo esto funciona correctamente. Probemos esto, saltemos a la consola, y actualicemos. Entonces lo primero que hay que hacer es hacer clic en uno de nuestros pedidos, uops se lanza un error en el EventListener. Echemos un vistazo a lo que podría estar causando esto. Tenemos variable sin usar, por lo que esto solo necesita un s, porque esto contiene múltiples pizzas. Probemos esto ahora. Podemos hacer click en nuestro pedido. Eso funciona muy bien. Ahora si hacemos click en el texto del jamón y la piña, vemos esto en la consola, Pepperoni. Bien, esto es exactamente lo que queremos. Ahora si volvemos a nuestro setCurrentPizza, obviamente, el objetivo es no registrar esto en la consola, lo que queremos hacer es guardar el nombre de la pizza en una variable y luego agregar esto solo después de nuestro texto de Actualmente haciendo. Si saltamos a la página de índice y localizamos esta sección, podemos ver justo después tenemos un lapso con el ID de current_pizza. Entonces vamos a almacenar este texto en una variable y luego colocarlo en este lapso. Hagamos esto dentro de nuestra función con un registro de consola y guardemos esto dentro de una constante llamada PizzaName. Agarra nuestra área de palmo con documento.QuerySelector. Use #, ya que esto fue con el ID de current_pizza. Establece el InnerText para este elemento igual a nuestra variable anterior. Probemos esto. Ya no necesitamos la consola. Trasladar cualquiera de estas órdenes a la sección de trabajo. Da click en “Pepperoni” y ahí está nuestro texto mostrado, “Jamón y piña” y también la “Margherita”. A continuación, usaremos este elemento seleccionado para mostrar los pasos requeridos dentro de la sección de método. 30. Dividir y unirse a los métodos: Anteriormente establecimos el nombre actual de la pizza dentro de la cocina cuando se hizo clic en esto. Ahora vamos a pasar a mostrar el método para hacer esta pizza dentro de la sección de métodos. El método son todos los pasos necesarios para crear cada pizza. Tenemos esto en la parte superior de nuestro archivo JavaScript. Dentro de nuestra página de índice, podemos entrar en toda la matriz de pizzas, y esto tiene el nombre de pizza que ya has utilizado, y también el método también. Si tomamos como ejemplo este método de Margherita, esto va a tener tres pasos. El primero es rodar la masa, la segunda es agregar la salsa, y la tercera es para rematar con chees. Validaremos que el chef haya completado los pasos posteriormente utilizando los pasos requeridos, pero por ahora, todo lo que queremos hacer es enfocarnos en mostrar este método dentro del navegador. Como se puede ver, este método es todo una sola cadena de texto, y lo que vamos a hacer en este video es dividir cada uno de estos pasos para mostrarlos en el navegador. Por lo que necesitamos el paso 1, necesitamos el paso 2, y también el paso 3 para mostrarlos de forma formateada. Para ello, podríamos entrar en nuestra función de pizza actual establecida, pero para mantener las cosas más limpias y más abstractas, voy a crear una nueva función abajo en la parte inferior. Salta hasta el fondo de nuestro proyecto. Es una nueva función llamada displayMethod. Esto también va a necesitar tomar nombre de la pizza para que sepamos qué método necesitamos conseguir, así que pasa esto a nuestra función, y necesitamos llamar a esta función cada vez que configuramos la pizza actual, es decir, esta función justo arriba cuando hacemos click en la pizza, y esto se muestra dentro de aquí. Cuando se hace clic en esto sabemos en qué pizza necesitará trabajar. Esto tiene sentido llamar a nuestra función desde dentro de ahí. Hagamos esto. Llamaremos a nuestra función, que es displayMethod, y recordamos que esto también necesita tomar el nombre actual de la pizza, que has almacenado dentro de esta variable. Más a nuestra página de índice, actualmente ya tiene una sección llamada método, que se puede ver aquí. Esto tiene el ID del método un nivel 3 dirigiéndose hacia arriba en la parte superior, y luego tenemos dos secciones. Tenemos el nombre de la pizza seguido del método que pronto vamos a insertar. Como se puede imaginar, esta es la sección con la que vamos a estar trabajando. Podemos empezar en la primera sección que es el nombre de la pizza. nuestra función, ya tenemos el nombre de la pizza para que podamos usar documentos.QuerySelector ('pizza_name') .innerHTML que habría visto el contenido interno del texto será igual a nuestra variable, que es PizzaName. Antes de ir más lejos, prueba esto en el navegador, necesito refrescar y pasar un pedido a la sección de trabajo en. Da click en “Pizza” y podemos ver nuestro nombre de pizza dentro por aquí. Esto también se actualiza ya que hacemos clic en diferentes. El siguiente paso en nuestra página de índice es agarrar nuestro método de pizza y colocar un método dentro de aquí. Recuerda, nuestro objeto pizza tiene esta propiedad método a la que podemos acceder, y para encontrarlo podemos utilizar el método Erase find es encontrar método que podemos usar para filtrar este particular soportado por el nombre de pizza que ya tenemos, y luego podemos seleccionar el método para cada uno. Volver a nuestra función bravo full pizzas array método, que es encontrar, y find va a ejecutar una función para cada valor dentro de nuestra matriz de pizzas, y puedes colocar una función irregular si quieres, pero debido a que esta va a ser una declaración simple, agregaré esto en su propia línea con una función de flecha. Esta función va a tomar en la pizza individual, luego acceder al nombre de cada pizza individual en el bucle, y podemos comprobar si esto es igual a nuestro nombre de pizza, que se pasa a esta función. El nombre actual de pizza clicked-on es igual a cualquiera de nuestros nombres de pizza en la matriz, almacenaremos esta pizza seleccionada dentro de una variable o constante llamada SelectedPizza. A continuación, haremos un registro de consola y comprobaremos que todo esto está funcionando bien, la constante de SelectedPizza, y vamos a refrescar esto dentro del navegador. Saltando a la consola. Primero, da clic en un “Oder”, selecciona una de las pizzas. Esto es jamón y piña, y podemos ver el completo entre objeto de piña ha sido devuelto. Probemos uno más. El pepperoni. Genial, así que todo esto funciona y ahora podemos filtrar esto hacia abajo para solo devolver el método. Inténtalo de nuevo. Los pasos que necesitamos dentro de ahí, y es diferente para cada uno de estos. Genial, así que esto ahora devuelve una cadena de texto, y necesitamos dividir esta cadena y mostrar cada paso como un elemento de lista. Para esto JavaScript tiene un método de cadena incorporado llamado split, que las cadenas heredan a través de la cadena prototipo. Este método tomará nuestra cadena única, que tenemos ahora, dividirá en un cierto punto que especificamos, y luego devolverá una nueva matriz que contiene todas estas subcadenas. Así es como se ve en nuestro código. Este es nuestro método, por lo que sólo podemos eliminar esto de la cadena de registro de la consola al final, el método de división JavaScript, y queremos pasar en qué sección de la cadena queremos dividir esta aparte, y entonces nuestro caso, una parada completa es ideal, y esto es porque si miramos nuestra cuerda, cada uno de estos pasos que tenemos termina en una parada completa. Esto es perfecto para romper nuestra cadena, y recuerda que esto devolverá una nueva matriz, que podemos almacenar dentro de una constante. Por último, antes de ir más allá, haremos un registro de consola pasando en nuestra constante, que es MethodSteps. Probemos esto. Selecciona un pedido, selecciona la pizza y esto ahora devuelve una nueva matriz con todos nuestros pasos en su lugar. También podemos hacer lo contrario si quisiéramos, y eso es tomar una matriz de valores igual que tenemos aquí y convertirlos en una sola cadena. Podemos hacer esto con el método llamado join. Recuerde, MethodSteps es una matriz. Podemos hacer lo inverso pasando en el método join. Unirse es en una sola cadena. Podemos probar esto haciendo clic en una Pizza. Tener una sola cadena de retorno hacia atrás y cada valor está separado por una coma. Si quisiéramos, podríamos cambiar este separador para que sea cualquier otro personaje, como un guión. Prueba esto. Ahora ten un guión entre cada uno de estos valores. Esto es útil si necesita unir una matriz de valores en una sola cadena. Sabemos ahora que podemos recorrer arrays y hacer algo con cada valor, y en el HTML, hemos establecido el nombre de pizza actualmente con esta sección aquí, y el siguiente paso es agarrar nuestro segundo div con el id de PizzaMethod. Estoy colocando nuestros valores de matriz. Agarra esto con documents.QuerySelector ('#pizza_method') .inner HTML y aquí solo voy a establecer esto para que sea igual a una cadena vacía. Si ya se ha establecido un método previamente, podemos borrarlo antes de agregar nuestro nuevo. Entonces, enumeraremos nuestros pasos agarrando nuestra matriz, que es MethodSteps. Dado que tiene múltiples valores, vamos a recorrer cada uno de estos con un para cada bucle, que ejecuta una función para cada valor. Podemos resolver cada uno de estos valores en la variable llamada método. Entonces construye nuestros elementos. Instale esto en el interior de una constante llamada elementos. Contamos con documentos.CreateElements más los elementos que desea crear. Voy a elegir un elemento p, y a continuación el contenido de texto, document.createTextNode, y el contenido que desea pasar es el texto de nuestro método. Colocar en el método dentro fusiona elementos. AppendChild pasando en nuestro texto. El paso final es volver a agarrar nuestra sección de método de pizza, por lo que vamos a copiar esto, pegar esto en, y luego podemos agregar esto usando el appendChild pasando en nuestros elementos. Guardaremos esto y actualizaremos, seleccionaremos un nuevo pedido. Pepperoni. Ahí vamos. Ahí está nuestro título de pizza y también los pasos requeridos para cada una de las pizzas. Bueno. Todo esto ahora funciona y se ve bien. Sólo hay un pequeño re-factor que podemos hacer. Recuerda, hemos creado un nuevo elemento de texto justo aquí, pero también tenemos una función auxiliar llamada BuildElements, que toma en nuestro elemento nombre, contenido, y devuelve es valor recién construido. Regresa a nuestro bucle. Podemos almacenar esto dentro de una constante llamada pasos. Esto es igual al valor de retorno de nuestra función BuildElement. Pasando los elementos p. Entonces el contenido, que es el método que vamos a mover estas siguientes tres líneas y pasar en nuestros pasos. Probemos esto, seleccione un nuevo pedido. Todo esto funciona exactamente igual, pero hemos guardado algunas líneas de código. Este es otro buen paso terminado para nuestro proyecto, y si eres principiante, sé que puede estar pasando mucho aquí, pero lo importante a recordar es que ya hemos cubierto la mayoría de lo que estamos haciendo aquí. Es solo el caso de dividirlo en tareas más pequeñas, asegurándose de que cada paso funcione en el camino. 31. Añadir Pizzas Al Horno: La etapa final de mover esta pizza es trasladarla desde el área de la cocina hasta nuestro horno. Todavía no hemos creado la pizza, pero veremos cómo hacerlo pronto junto con la comprobación hemos utilizado los ingredientes correctos. Pero por ahora, podemos usar este PizzaName que tenemos y trasladar esto hasta la sección de horno. Ahora nuestro horno va a ser una matriz para almacenar múltiples pizzas, también necesitaremos algunas otras variables. Vamos a crear estas ambas nuestras funciones bien arriba, y justo debajo de nuestros ingredientes, creamos nuestro horno con la palabra clave let, que inicialmente será una matriz vacía. Después de esto, necesitamos establecer el número máximo de pizzas que cabrán en nuestro horno, que es el hornoCapacidad. Voy a ir por un valor de seis. A continuación, necesitamos hacer un seguimiento de las pizzas que hemos hecho para un pedido en particular. Si tomas Pedido 3 por ejemplo, dice cuatro pizzas, Order 2 tiene tres pizzas y necesitamos hacer un seguimiento de cuántas hemos hecho actualmente. dejar PizzaCompletedForOrder, que inicialmente será cero. Ahora tenemos estos, podemos crear nuestra primera función la cual será utilizada para empujar la pizza a nuestra nueva matriz de horno. Abajo a la parte inferior, crea una función llamada addToOven. Por ahora este horno va a llevar en el actual PizzaName. Podemos agarrar esto de nuestra cocina si vamos a nuestra página de índice. Abajo hasta el área de cocina, recuerda que tenemos este lapso con el ID de current_pizza, y esto almacena nuestro nombre de pizza. Agarra esto con document.QuerySelector ID, que es current_pizza. Entonces el InnerText. Almacenar esto dentro de una constante llamada PizzaName. Recuerda que no siempre tenemos una pizza seleccionada. Actualmente tenemos el valor del jamón y la piña pero si refrescamos este elemento suele estar vacío. Para comprobar en contra de esto colocaremos en una declaración if. Podemos comprobar si el PizzaName está presente. Si lo es, entonces agregaremos esto al horno con el método array llamado push, pasaremos en el PizzaName y luego un registro de consola temporal para comprobar que todo esto está funcionando. Vamos a tener la Consola, saltar al navegador. Podemos revisar este inicio de sesión solo un segundo pero primero necesitamos llamar realmente a esta función. Llamaremos a esta función agregando un oyente de clics al botón que ya tenemos, que está dentro de nuestra sección de cocina y justo debajo de nuestra pizza actual. Tener este botón para agregar ToOven. Actualmente cuenta con clase, pero podemos agregar un ID. Selecciona este AddToOven y luego agarra este horno en nuestro guión. Documents.QuerySelector, el valor ID de addToOven, entonces podemos agregar un oyente de eventos. El oyente de eventos escuchará un clic en este botón, que ejecutará una función llamada AddToOven. Vamos a probar esto. Con la Consola Open, clic en uno de nuestros pedidos. Selecciona la pizza. Actualmente estamos en jamón y piña, y activan nuestro oyente click con horno y vemos que el jamón y la piña se empuja a la matriz. Vamos a probar pepperoni. Da click en esto, y de nuevo, esto sigue agregando pizzas a nuestro horno. Genial. Ahora sabemos que esto funciona, podemos extender esto un poco junto con agregar un PizzaName al horno. Actualmente sólo vemos dentro de la matriz, pero también necesitamos enumerar esto en la sección horno. Junto con enumerar el PizzaName, también podemos establecer la hora que se puso en el horno. Esto se debe a que después también agregaremos un tiempo de cocción. Entonces para esto, crea un nuevo objeto y lo hacemos dentro de nuestras declaraciones if. Justo encima de donde empuja al horno, crearemos un objeto llamado PizzaForOven. El primer inmueble es el PizzaName que se almacena en la variable PizzaName, que ya tienes y luego una propiedad llamada timeAdd. Por ahora un valor simple de marcador de posición está bien, volveremos a esto más adelante. El paso final por ahora es solo poner la constante de pizza para horno en nuestro método push. Justo antes de probar esto, recuerda que agregamos una variable llamada PizzasCompletedForOrder. Podemos aumentar esto por el valor de 1. Vamos a comprobar esto todo funciona dentro de la Consola. Tenemos una pizza, agrega esto al horno y ahí está nuestro nuevo objeto. El array del horno ahora está recibiendo las pizzas como podemos ver. A continuación una función para ejecutar a través esta matriz y mostrarlos en la sección horno. Justo después de empujar nuestra nueva pizza al horno, vamos a llamar a una nueva función llamada DisplayoVenItems. esto llamamos cada vez que creamos una pizza nueva y la agregamos al horno, que va a actualizar la interfaz de usuario. Todavía no hemos creado esto, así que vamos a añadir esto justo arriba. Para comenzar dentro de la página de índice, necesitamos agarrar nuestra sección de horno y si echamos un poco de mirada a través de nuestro código, tenemos la envoltura del horno que tiene el rumbo de nivel 3 y luego este div vacío con el ID del horno, y esta es la ubicación donde agregamos nuestras nuevas pizzas. Podemos agarrar este documento.QuerySelector, el ID del horno y luego primero lo configuraremos en una cadena vacía. Esto limpia nuestro horno antes de que lo actualicemos. Envuelva nuestra matriz de horno, y como esto no es una matriz podemos usar forEach. Ejecutamos una función forEach valor dentro de ahí, cada valor va a ser una pizza en particular la cual vamos a envolver en un div. const PizzaDiv es igual a document.createElement, crea nuestra sección div. Agregaremos una clase a esto para nuestro estilo, por lo que pizzadiv.className es igual a pizza_div. Recuerda, dentro de nuestros archivos de inicio también tenemos una imagen SVG para nuestra pizza. Esto se usará para exhibir dentro del horno cada vez que añadamos una pizza nueva al horno. Lo que podemos hacer es tratarlo como una imagen o crear un nuevo elemento de imagen. Contamos con document.createElement, los elementos de imagen con IMG. Entonces podemos establecer la propiedad fuente para que sea igual a nuestro SVG. Esta se llama pizza.svg, y también está en la misma carpeta pero podemos hacer referencia a esto por su nombre. Tenemos un envoltorio con una clase, tenemos una imagen, también necesitaremos el nombre de la pizza. Para ello, podemos hacer uso de nuestra función llamada BuildElement para crear estas fotos y almacenar el valor de retorno en una constante llamada PizzaName. Nuestra función ayudante, que es buildElement, esto puede ser un elemento p y como el PizzaName va a ser una variable, vamos a insertar esto dentro de las garrapatas traseras, con todo el símbolo y luego calibrar esto y luego recordar, cada uno de nuestros artículos de horno se almacena en esta variable de pizza para que podamos acceder a pizza o nombre. Estos son todos los elementos que necesitamos. Ahora solo es un caso de agregarlos a nuestra envoltura PizzaDiv. Seleccionaremos este PizzaDiv. Podemos usar append para agregar múltiples valores, agregar alguna nueva imagen en el PizzaName. El apartado final es ahora añadir esto a nuestro horno. Al igual que arriba, usaremos QuerySelector para agarrar nuestro horno, appendChild, colocando en nuestra PizzaDiv. Está pasando un poco ahí, pero vamos a refrescar y probar todo esto está funcionando. Coloca en un nuevo orden, selecciona la pizza, agrega el pepperoni al horno. Ahí está nuestra imagen que creamos justo aquí, y también nuestro nombre de pizza a continuación, jamón y piña. Genial, y todo esto está funcionando ahora. Como se mencionó, todavía tenemos que volver para crear realmente en las pizzas, pero ahora sabemos que este paso está listo cuando lo hacemos. 32. Inicio y finalización del juego: Esta lección, he resuelto algunos pasos para probar las cosas tú mismo. Lo que pretendemos cubrir es crear dos funciones. Se utilizará una función para iniciar el juego y otra para terminarlo. Estas funciones se van a llamar desde nuestros botones HTML, que podemos ver en nuestro índice. Esta es la sección de control de juegos donde tenemos nuestros dos botones. La idea detrás de estos dos botones es limpiar la interfaz de usuario, solo mostrar las cosas correctas, como solo mostrar el botón final del juego cuando el juego se está ejecutando realmente. Utilizamos el botón de inicio del juego para comenzar las órdenes que entran y así sucesivamente. Estas funciones también serán útiles posteriormente cuando añadamos a nuestro proyecto cosas como estadísticas y temporizadores. Lo que tenemos que hacer es crear primero nuestras dos funciones llamadas StartofGame y EndofGame. Entonces podemos llamarlos agregando un oyente de eventos de los dos botones que acabamos de mirar. Vamos a crear una nueva variable, que es juego iniciado, que será un booleano. Este booleano será cierto cuando iniciemos el juego y falso cuando terminemos el juego. Haremos un cheque condicional dentro de StartofGame para volver fuera de esta función si esta variable iniciada del juego es verdadera. Paso 5, recuerda que todos los pedidos tienen esta clase de order_wrapper. Voy a borrar todos estos pedidos en nuestra función StartofGame. Ya que aún no hemos iniciado el juego y CreateOrdersList es responsable de crear estos pedidos. También podemos mover esto dentro de nuestra función StartOfGame al CSS. Cuando comience el juego, mostraremos el botón final y ocultaremos el botón de parada y luego haremos el revés cuando el juego haya terminado. Sin olvidar nuestro botón final de juego también necesita ser eliminado u oculto cuando el juego se carga inicialmente. Como siempre, puedes probarlos por tu cuenta o seguirlo si lo prefieres. Abajo en la parte inferior, recuerda que el primer paso es crear nuestras funciones. La primera función fue StartofGame. Entonces nuestra función EndofGame también. Ambas funciones necesitan ser llamadas haciendo clic en los dos botones en nuestro HTML. Haremos esto agarrando nuestro botón de inicio y fin, y agregando un oyente de eventos para llamar a estas funciones. Estos botones, a la idea del botón de inicio y fin. Podemos agarrar estos ahora con selector document.query. Aquí está el hash. En primer lugar, el botón de inicio. Agregar oyente de eventos para un evento click, que va a activar una función llamada StartOfGame. Duplicar esto. El segundo es para el endBtn, que activará la función correspondiente. También baja nuestro oyente de eventos desde arriba para mantener estos agrupados. En realidad es solo quiere ser agregar oyente de eventos para asegurarse de que esto se complete. Entonces antes de ir más allá, podemos agregar un inicio de sesión de consola a cada una de estas funciones para comprobar que todas están funcionando correctamente. El primero es el inicio. El segundo para el final. Entonces salta a la consola. Simplemente separe los minutos, así que solo volveremos a adjuntar. Ahí vamos. De vuelta a la consola y nuestros dos botones en la parte superior. Start desencadena un registro de consola y también termina funciona también. Eso es el Paso 1 y también el Paso 2 atendidos. El siguiente es crear un GameStarted Boolean. Hagamos esto arriba en la parte superior y el resto de nuestras variables. Let GameStarted, que inicialmente será falso. Podemos actualizar esta variable desde nuestras dos funciones. Quita los registros de la consola y cuando iniciemos el juego, GameStarted será igual a true. Entonces dentro de la función EndofGame, GameStarted será igual a false. Ahora cuando, si este juego se inicia o no, va a ser realmente útil y en particular para la función StartOfGame, vamos a estar haciendo algún trabajo de limpieza como eliminar cualquier existente órdenes. No queremos usarlo para ejecutar accidentalmente este juego medio. Podemos volver fuera de esta función si esto es cierto. Si GameStarted es igual a true, devolveremos todo a esta función antes de ejecutar más código. Después de esto, podemos pasar a eliminar cualquier orden del juego anterior. Vamos a agarrar nuestros pedidos y almacenar esto dentro de una constante con document.getElementByClassName. Estamos usando el nombre de clase aquí porque recuerda, tenemos esta clase de order_wrapper. Pasa esto entre paréntesis. Entonces podemos recorrer y eliminar todos estos pedidos. Si accedemos al objeto array principal con un A mayúscula, entonces podremos tener acceso a un método llamado desde para crear una matriz a partir de todos estos elementos. Al usar getElementsByClassName, esto devolverá una colección HTML. Entonces podemos usar esto para crear una nueva matriz a partir de estos pedidos. El método from, pasando las órdenes. Ahora tenemos esto convertido a una matriz. Podemos hacer uso de métodos de matriz como forEach para ejecutar una función para cada uno de estos. Al pasar la función, cada orden almacenará en la variable de orden. Accede a este orden individual, y luego llame al método JavaScript remove. Esto se encarga de eliminar estos pedidos cuando iniciamos un juego por primera vez, pero también necesitamos crearlos en realidad en primer lugar. Actualmente tenemos una función llamada CreateOdersList. Si nos desplazamos hacia arriba para encontrar esto. Sólo para conseguir esta función es el responsable de crear todos nuestros pedidos. Tendría sentido llamar a esto cuando el juego haya comenzado. Actualmente si hacemos una búsqueda de esto, podemos ver que esto se acaba de llamar desde dentro de nuestro programa. En lugar de llamar a esto tan pronto como se carga, vamos a cortar esto fuera de lugar y luego mover esto hacia abajo a nuestra nueva función StartOfGame. Ahora todos los pedidos solo deben mostrar cuando el usuario hace clic en este botón de inicio. Salvemos esto y probemos esto. Ahora, ya que hemos movido nuestra llamada de función, no vemos las órdenes, como start. Ahora aparecen dentro de la barra lateral. Se muestran los pedidos y sabemos que esta llamada a función está funcionando correctamente. Pero no podemos saber si las órdenes anteriores fueron despejadas. Donde usamos order.remove. Esto no importa mucho en este momento ya que todas las órdenes de la misma. Pero después generaremos órdenes aleatorias las cuales serán diferentes. Como medida temporal para probar esto, comentar nuestra llamada de función. Entonces podemos agregar unos elementos temporales a nuestro HTML y comprobar que esto se está eliminando. En orden sección de elementos P. Recuerda que todos estos tienen la clase de order_wrapper colocada en cualquier texto dentro. Ahora, si guardamos esto, refrescar, podemos ver toda la carrera. Haga clic en Inicio. Este elemento ya ha sido eliminado. Genial, así que ahora sabemos que esto está funcionando. Podemos eliminar nuestros elementos temporales y también restablecer nuestra llamada de función. Entonces el siguiente paso es Número 7 y 8. Esto es utilizar la propiedad style para mostrar y ocultar estos dos botones. En el StartOfGame, en la parte superior de la función, usa document.QuerySelector. Primero agarra nuestro botón de inicio. Acceder a la propiedad de estilo de display. Podemos ocultar esto estableciendo esto para que sea un valor CSS de none. Duplicar y luego para el botón final, restableciremos esto estableciendo esto en un valor de inline. Copia ambos de estos. Salta a la función EndfGame y pega estos en. Entonces podríamos revertir los valores de ambos. El botón de parada se mostrará con un valor de inline y luego el botón final se puede quitar sin ninguno. Vamos a probar esto. Refrescar. Haga clic en Inicio, y esto elimina el botón final. Haga clic en el final y esto muestra el botón de inicio. También te darás cuenta en cuanto se cargue la página, sí vemos ambos botones. Dado que el juego aún no ha comenzado, solo queremos mostrar el botón de inicio. Vamos a mover esto estableciendo la propiedad style de display para que sea igual a ninguna. Para esto, ya tenemos el código como nuestro segundo valor dentro de aquí. Copia esto y luego podemos llamar a esto en la parte superior de nuestro código. En cualquier lugar alrededor de las variables está bien. Refrescar. Se ha quitado el botón final. Empezamos y sólo vemos el botón final. Ahora estoy en el juego. Sólo vemos el botón de parada. 33. Introducción A La Matemática De Javascript: En esta sección, continuaremos con nuestro proyecto Speedy Chef pero nos vamos a centrar en algunas matemáticas, fecha y hora de funcionalidad que ofrece JavaScript. A partir de pronto, veremos cómo podemos usar JavaScript math para generar pizzas y pedidos aleatorios. Actualmente, con esta matriz de órdenes que tenemos, solo generamos estos mismos tres órdenes cada vez que se inicia el juego, pero podemos generar otros nuevos con haber sido más aleatoriedad. Estas órdenes seguirán entrando a medida que el juego se esté ejecutando. Tendremos diferente cantidad de pizzas y también diferentes tipos de pizzas para cada pedido. Para ello necesitamos dos nuevas funciones en la parte inferior. El primero se va a llamar GeneratneWorder. Esto será responsable según suene, de crear un nuevo pedido con un número de pedido. Voy a analizar esto en, GenerateWorder. Entonces esta segunda función se va a llamar GenerateNewPizza, y GenerateNewPizza creará pizzas aleatorias, que serán llamadas desde nuestra función de pedido. Pruebe esto con un registro de consola, analizando el objeto matemático de JavaScript. Justo antes de que podamos ver esto, sí necesitamos llamar a nuestra función. Así que toma esto y luego llama a esta función en cualquier lugar de abajo. Refresca, abre esto, y esto devuelve mucho por dentro de aquí. Tenemos muchas propiedades y métodos diferentes, y yo no soy matemático, por lo que algo de esto está más allá de mi conocimiento. Pero no necesitas ser genial en matemáticas para poder usar algo de esto. Todo está aquí para ayudarnos. Hay algunas constantes que podemos usar como el valor de Pi, con el que puede estar familiarizado. Tenemos algo llamado Random si nos desplazamos hacia abajo, que es un método. Es lo que genera un nuevo número aleatorio entre cero y uno. Tenemos algo llamado ceil y piso para redondear o redondear y los veremos en tan solo unos momentos. Existe un método para redondear al número más cercano. Podemos encontrar el número más pequeño y más grande con min y max, y también muchos otros también. Volvamos a la función y veamos cómo podemos usarlas. Saltar a GenerateWorder, y justo debajo de nuestro registro de consola, vamos a cambiar esto para que sea Math.random, que es uno de los métodos que acabamos de ver dentro del navegador. Vamos a probar esto. Como se mencionó anteriormente, esto generará un nuevo número entre cero y uno. Entonces cero está incluido, pero el valor de uno no lo es. Sólo subiremos al valor de 0.999 recurrentes. A menudo sí necesitamos que este número sea un rango diferente, como el valor de 0-10, 1-50, 0-100 y así sucesivamente. Para ello, no podemos analizar en ningún rango a Math.Random. En cambio, debemos multiplicar esto por la cantidad por la que queremos multiplicarlo. Si multiplico esto por el valor de 100, esto nos dará un valor entre cero y 99. Recuerda que cero y uno es la matemática original.Aleatorio. Incluso multiplicar que 0 por 100 aún nos dará 0. Ya que 0.99 es el valor más alto, multiplicar esto por 100 nos dará el valor de hasta 99. Guardar. Dejándonos con algunos números más grandes dentro de la consola. Guardemos esto dentro de una constante. Puedo sacar esto de nuestro registro de consola, const aleatorio. Entonces podemos redondear este número aleatorio al número entero más cercano. Fue un ejemplo. En lugar de conseguir 53.4, podemos redondear esto hasta 54. Lo hacemos por, de nuevo, accediendo al objeto matemático JavaScript, un método que acabamos de ver dentro de la consola llamado ceil, donde analizamos en nuestras constantes de aleatorio. Ahora cada vez que actualizamos esto, redondeará esto hasta el número entero más cercano. En realidad tenemos bastante suerte ahí porque tenemos el valor de 100 en la consola. Esto se debe a que la constante aleatoria original nos dará un número como el 99.9. Entonces esto redondeará esto hasta 100. Con este redondeo hacia arriba, cualquier número que comience con cero se redondeará a uno. Esto debería darnos un número entre 1-100. Podemos redondear cambiando ceil a piso. Pero no notarás mucha diferencia dentro de la consola. Pero esto redondeará hacia abajo en lugar de redondear incluso como un número entero entre 0-99. También se mencionó cuando miramos el objeto matemático fueron los métodos min y max en la consola. Empecemos por encontrar el valor número más grande. Para ello, crearemos una nueva constante llamada más alta y establecida igual a Math.max. Math.max va a tomar en múltiples valores. Iremos por 1, 77 y 34. Basta con analizar en cualquier número aleatorio dentro de aquí, luego inicie sesión esto en la consola. En mi caso, el 77 es el valor más alto dentro de aquí. Esto se devuelve de nuevo en la consola. Como cabría esperar de una manera similar, también podemos almacenar el valor más bajo. Tenemos Math.min. Inicie sesión cualquier número dentro de aquí. Inicie este en la consola, y debe devolver el valor de uno. Esto no siempre es práctico para envolver nuestros números dentro de la función max o min. A menudo estos números se almacenan dentro de una matriz. Entonces necesitamos acceder a esta matriz y averiguar cuál es el valor más alto, y más bajo. Bueno, por decir esto, crea una nueva constante llamada números y almacene esto dentro de una matriz. Los números guardados están bien. Cuente estos fuera. En primer lugar, tal vez para reproducir lo que teníamos arriba con el más alto, y luego analizar en nuestros números a Math.max. Hagamos esto y veamos qué pasa. Consola registra el valor de más alto. Es posible que esté esperando obtener el valor de 77. Bueno, si guardamos esto y actualizamos, vemos el valor de no un número dentro de la consola. El motivo por el que obtenemos esto es porque dentro de aquí estamos analizando en una matriz, lugar de los valores reales que se contenían dentro. Para extraer los valores de esta matriz y comparar, necesitamos hacer uso del método de propagación JavaScript basado en los tres puntos. Refresca, dejándonos con el valor correcto. También si quisieras, esto también se puede usar con Math.min. Funciona exactamente igual y que son otros métodos y propiedades disponibles en este objeto matemático, como hemos visto anteriormente en la consola, dependiendo de tus necesidades particulares. Ahora vamos a poner esto en práctica generando pizzas aleatorias, y pedidos. 34. Generando nuevas pizzas con matemáticas: Podemos usar lo que ahora sabemos JavaScript Math para generar pizzas y pedidos aleatorios. En primer lugar, vamos a despejar nuestra función de generar nuevo orden del video anterior y saltar a generar nueva pizza. Utilizamos esta función para generar una pizza aleatoria a partir de la matriz de nuestras pizzas'. Para empezar, crearemos un número aleatorio entre uno y tres, para generar la cantidad para cada pizza. Recuerda crear un nuevo número aleatorio, usamos Math.random. Esto generará un número aleatorio entre cero y uno. Pero también queremos hacer esto entre uno y tres. El primer paso es usar Math.ceil para redondear este valor hacia arriba, cortar esto. Utilizamos Math.ceil y dentro los corchetes pasan en este número aleatorio. Con esto entre cero y uno, esto siempre va a redondear esto hasta el valor de uno. Pero queremos el valor de 1-3, lo que significa que necesitamos multiplicar este valor devuelto por 3, almacenar esto dentro de constante llamada cantidad. Entonces haz un registro de consola para comprobar que esto está funcionando. Digamos esto, y necesitamos registrar la consola de este valor llamando a generar nueva pizza. Cambios, actualización 1, 3 y 2. Parece ser todos los números que necesitamos en nuestro rango. Esta es nuestra cantidad aleatoria, pero también necesitaremos seleccionar una pizza al azar. Justo antes de hacer esto, en última instancia, lo que queremos estar apuntando es estar creando un nuevo objeto de pizza, const pizza. Esta pizza necesita tomar la cantidad que ya has creado justo arriba y también necesitaremos un nombre de pizza. Este es un paso que ahora necesitamos crear. Comenta esto para que no consigamos errores. Tomamos constante para almacenar esto en, para todos en pizza al azar. Esto va a seleccionar una pizza al azar de nuestra matriz de pizzas. Recuerde que las matrices siempre comienzan en el valor de cero y necesita pasar directamente hasta el final de nuestra matriz. Ahora vamos a agarrar esto con pizzas.length. Usando un ejemplo similar desde arriba, vamos a copiar esto sin el punto y coma, pasar esto adentro. Como sabemos, esto devolverá un valor de 1-3, pero necesitamos un valor de cero todo el camino hasta pizzas.length. Para obtener cero, utilizamos Math.floor, que actualmente nos dará el valor de 0-2. Pero en lugar de multiplicar esto por 3, multiplicaremos esto por el valor de pizzas.length. Esto también significa que si añadimos nuevas pizzas en el futuro, esto también se cuidará. Ahora de vuelta a esta propiedad de nombre, podemos establecer esto igual a nuestra pizza al azar. Pero recuerda, nuestra pizza aleatoria está seleccionando una de la matriz. Si miramos la matriz, esto contiene un objeto con el nombre, el método y los pasos requeridos. Sólo necesitamos acceder al nombre de la propiedad, por lo que podemos acceder al randompizza.name. Por último, ya que el trabajo de generar nueva pizza es generar nueva pizza. Esto es lo que hemos hecho con este objeto, para que podamos devolver esto de nuestra función. Bien, probemos esto. En lugar de llamar a esto directamente en la parte inferior coloque esto en un registro de consola, genere nueva pizza. Llame a esta función, actualice como nuestro primer objeto. Tenemos una cantidad aleatoria de tres y el nombre de jamón y piña. Nuevamente, un vegetariano, dos vegetarianos, y un pollo. Esto es efectivamente la mitad del trabajo hecho para generar nuestro nuevo orden. Tenemos todas las pizzas regresan. Pero en lugar de inicio de sesión de consola, este valor, necesitamos llamar a esto desde genera nuevo orden. Salta a esta función y comenzaremos creando una nueva variable pizzas y configuraremos esto igual a una matriz vacía. Esta matriz de pizzas vacías se utilizará para construir una cantidad aleatoria de artículos para nuestro pedido. Porque recuerda, a pesar de que genera nueva pizza, genera múltiples valores, sigue siendo solo un elemento de línea. Por esto, si actualizamos, vuelve a arrancar. Lo que quiero decir con esto, si hacemos click en uno de nuestros pedidos es, por ejemplo, solo generamos en una línea, como un jamón y piña o dos pepperonis. Pizzas va a almacenar una variedad de todos estos artículos de línea. En este juego, voy a restringir el número de líneas de artículos a ser hasta cinco, por lo que no tenemos demasiados pedidos enormes. Ya sabemos generar un nuevo número entre uno y tres. Copiemos esto, guardemos esto dentro de una constante llamada ítem de pedido, en lugar del valor de tres, los cambios a ser cinco, dados un número entre uno y cinco, que puedes cambiar si lo prefieres. Ahora sabemos que tenemos un número aleatorio entre uno y cinco. A continuación crearemos un bucle para empujar cada uno de nuestros pedidos, cual se genera a partir de esta función a nuestra matriz de pizzas. Repetiremos esto por el valor del artículo de pedido. Pasa en un bucle for, inicialmente me pondré a uno. El bucle seguirá funcionando donde i es menor o igual al valor anterior del artículo de pedido, por lo que esto es 1-5. Entonces después de cada bucle vamos a incrementar i con i plus plus. Para nuestra matriz de pizzas vacías, usa el método push para agregar un nuevo valor. El nuevo valor para empujar es este valor que se devuelve de nuevo de generar nueva pizza. Deberíamos dejarnos ahora con una matriz de pizzas, que se establece en una serie de líneas de artículos entre uno y cinco y luego los objetos de pizza al azar en el interior. Esto ahora nos deja con nuestra matriz de pizzas para el orden, pero ahora necesitamos construir nuestros objetos de orden. Esto crea una nueva constante para almacenar esto en, llamado nuevo orden, que este sea un objeto. Cada pedido necesita una identificación única. Podríamos seguir adelante y generar algún número aleatorio largo o cadena. De este caso, un simple número de pedido está bien. Lo que voy a hacer es justo fuera de esta función, crea una nueva variable llamada número de orden, y establecer esto igual a nuestra longitud de punto de matriz de órdenes. Si nuestra cantidad actual de pedidos es de tres, esto devolverá el valor de tres. Pero como estamos creando un nuevo orden al final de esta matriz, agregaremos más uno al final. Siempre debe haber uno más que el número de órdenes que tenemos. Por lo tanto, va a ser único. Podemos pasar esto en como el ID, colocar en en la matriz de pizzas desde arriba. ¿ Qué es lo que realmente queremos hacer con este nuevo pedido? Bueno, arriba en la parte superior, recuerda que tenemos nuestra matriz de órdenes que contiene los tres pedidos de muestra. Tenemos que empujar hasta el final de esta matriz. Esto es bastante simple. Vamos a agarrar nuestras ordenes.push place en nuestro nuevo pedido, y luego finalmente aumentaría nuestro número de pedido para la próxima vez, así que añada el número de pedido más más. Esto siempre debe ser único. Vamos a agarrar nuestra función de generar nueva orden, y llamaremos a esto en la parte inferior y probaremos esto. Guardar y refrescar. Haga clic en “Inicio”. Entonces tenemos nuestros tres pedidos originales de nuestra matriz de órdenes, y luego un orden aleatorio abajo en la parte inferior. Tenemos el siguiente número de índice del orden cuatro. Tenemos un número aleatorio de pizzas y también un nombre aleatorio. Vamos a refrescar y probar uno más. Pide cuatro, éste es un poco más largo y tiene cuatro líneas separadas. Recuerda, podríamos tener hasta cinco líneas de pedido. Este es un buen progreso con nuestro juego y vamos a construir sobre esto en la siguiente lección y generaremos nuevos pedidos después un cierto retraso de tiempo y también revisitaremos JavaScript Math, donde veremos dibujado con el Lienzo. 35. setInterval: Sabemos que nuestros pedidos están funcionando y además generando aleatoriamente tan pronto comience el juego. Pero también queremos que sigan viniendo a lo largo del juego también. Pero este JavaScript nos proporciona un método llamado setIntervalo, y setIntervalo ejecuta una función después de un cierto retraso de tiempo. Está disponible en el objeto ventana, por lo que simplemente podemos llamarlo por sí solos. Entonces llama a setIntervalo, y setIntervalo va a tomar en dos cosas. Primero, pasamos una función que quieres ejecutar, y podríamos pasar una nueva función directamente así, o podríamos hacer referencia a una función existente por su nombre. La función que queremos ejecutar es GenerateWorder, así que pasa esto sin los corchetes, y también podemos eliminar esto desde justo arriba. Separarlo por coma. Pasamos en un retardo de tiempo, y este es el retardo de tiempo entre cada llamada a función. También es en milisegundos, por lo que 3,000 milisegundos es igual a 3 segundos. Esta función se llamará cada tres segundos. Comprobamos que esto funciona, subimos a nuestra función GenerateWorder y podemos pasar en un registro de consola, colocar en la matriz de pedidos. Actualiza el navegador. Después de tres segundos, deberíamos ver un registro de consola con cuatro pedidos. Tres segundos después, vemos cinco órdenes, seis órdenes, y así sucesivamente. Bueno. Ahora sabemos que esto funciona. Anteriormente, creamos una función llamada createOrdersList. Echemos un vistazo a esto. Desplázate hacia arriba y aquí estamos. Esta es nuestra función justo aquí. Esta función tomó la matriz de órdenes. Luego volcamos sobre cada una de nuestras órdenes y lo colocamos en nuestra sección de pedidos. Todo lo que tenemos que hacer ahora es llamar a esta función cada vez que generemos un nuevo orden. En lugar de nuestro registro de consola, que los colocamos antes, dentro de generar nuevo orden, quita el registro de la consola y reemplaza esto por CreateOrdersList. Digamos esto y veamos a dónde nos lleva esto. Actualiza el navegador. Después de tres segundos, vemos venir nuestro conjunto de órdenes. Tenemos el número 1 todo el camino hasta cuatro, y luego los segundos después, obtenemos un nuevo lote de pedidos. El problema aquí es sin embargo, no solo agregamos los nuevos pedidos que se han generado, también añadimos en los pedidos existentes también. Esto ahora nos deja con dos problemas que tenemos que solucionar. El primero es que están llegando órdenes antes de que incluso presionemos el botón “Inicio” en la parte superior. El segundo, como acabamos de ver, sólo necesitamos sumar los nuevos pedidos en lugar de sumar también todos los existentes. Arreglar este problema, podemos borrar todos los pedidos antes de agregar nuestros nuevos a esta sección. Esto se puede hacer yendo a la función CreateOrdersList y borrando la sección de orden antes de agregar las nuevas. Volvamos a saltar a CreateOrdersList. Aquí vamos en la parte superior. Antes de sumar nuestros pedidos a esta sección, lo borraremos con documentos.QuerySelector. Agarra nuestra sección de pedidos, HTML interno y establece esto una cadena vacía. Probemos esto. Refresca, dale a esto tres segundos. Ahí están nuestros primeros cuatro órdenes. Orden 5, esto se ve bien. Orden 6, genial. Ya están llegando todos estos pero en lugar de sumar todos los pedidos existentes, lo estamos agregando al final de los que ya están ahí. Lo siguiente que queremos resolver es solo agregar estos pedidos a la barra lateral después de haber hecho clic en el botón “Inicio”. Para esto, en lugar llamar directamente a nuestro setIntervalo en la parte inferior, podemos eliminar esto, salir de este lugar, y envolver esto dentro de una función llamada OrderStimer. Coloca esto de nuevo dentro. Recuerda, cuando hacemos clic en el botón Inicio, esto desencadena nuestra función llamada StartOfGame. Si localizamos esto justo aquí, entonces podemos llamar a nuestra función, que fue la OrderStimer. Digamos esto y prueba esto. En primer lugar, refrescar y dar esto tres segundos y no deberíamos ver ningún pedido ahora en la barra lateral. Bueno. Esto ha detenido la carga inicial. Haga clic en el botón “Inicio”. Ahora nuestra orden está empezando a venir a través. SetIntervalo también es útil para crear un temporizador de cuenta regresiva para el juego, por lo que solo se ejecuta durante una cierta cantidad de tiempo. cuanto haga clic en “Inicio”, comenzaremos un temporizador de cuenta regresiva a partir de una cierta cantidad de segundos. Para ello, necesitamos algunas variables para hacer un seguimiento de esto. Saltar hasta la cima donde tenemos el resto de nuestras variables. El primero va a ser una constante llamada GameLong. Establece esto igual a cualquier número de segundos que quieras. El mío va a ser 300, y el segundo usando la palabra clave let, ya que vamos a actualizar esto, va a ser igual al CountDownTime. El tiempo de cuenta regresiva va a comenzar en la GameLong inicial. Entonces lo reduciremos en un segundo con setIntervalo. Inicialmente, vamos a establecer esto igual a GameLength, luego lo reduciremos a medida que avanza el juego. También necesitamos mostrar esto en la pantalla. Podemos hacer esto con document.QuerySelector. Necesitamos encontrar una sección que esté arriba en la parte superior así que al lado de nuestros botones. Esta es la sección de control de juegos donde tenemos el botón de inicio y final del juego, y también tenemos un span con el ID de GameLength. Pase esto en, establezca el InnerText. Ya que estamos insertando la variable GameLength, necesitamos que los backticks dirán la longitud del juego es insertar la variable, que es nuestro número GameLength, seguido del texto de segundos. Recarga y ahí está nuestro texto en la parte superior. Ahora tenemos que hacer dos cosas. El primero es crear una función para deducir esta variable en un segundo. Entonces podemos llamar a esta función una vez por segundo usando setIntervalo. Primero en la parte inferior, crea nuestra nueva función llamada CountDownTimer, que va a ser la encargada de agarrar nuestra variable, que es la cuenta atrás Tiempo y deducir esto por un segundo. Cada vez que hacemos esto, también necesitamos agarrar los mismos elementos en la parte superior y actualizarlo con este nuevo tiempo. Al igual que lo hicimos en la parte superior, usamos document.QuerySelector, pasarlo en la misma sección, que era GameLength, el InnerText , abrir los backticks. Esta vez diremos que el tiempo queda es igual a nuestra variable justo arriba. Esta función en realidad no hace nada por sí sola. Es simplemente responsable de seleccionar nuestra variable CountdownTime y luego deducir en un segundo. Para asignar también esto a la variable existente, también necesitamos colocar en un igual, y luego esto agrega esto al DOM. Esta función es responsable de deducir en un segundo, pero aún necesitamos llamar a esta función cada segundo. Para ello, saltaremos a nuestra función de inicio del juego. En la parte inferior, vamos a SetIntervalo una vez más, pasaremos en nuestra función, que es el CountDownTimer, que se ejecutará cada segundo. Probemos esto. Refresca y veremos nuestro texto en la parte superior. Puedes empezar. Entonces nuestro temporizador comienza a contar atrás. No obstante, sin embargo, si empezamos esto una vez más, notarás un pequeño tema. Si miramos de cerca, la cuenta regresiva no comienza para el primer segundo. Vamos a hacer clic. Tenemos que esperar un segundo antes de la cuenta atrás. Esto sucede porque setIntervalo no llamará a la función de inmediato. En cambio, espera primero el retraso de tiempo y luego llama a esto después. Esta es una solución bastante simple. Todo lo que tenemos que hacer es agarrar nuestro temporizador de cuenta atrás y llamar a esto una vez justo antes de que empiece nuestro temporizador. Ahora, si refrescamos, clic en “Inicio”, nuestro temporizador comienza de inmediato. Así es como podemos usar setIntervalo, que es un método realmente útil para aprender como es otra función de sincronización llamada setTimeout. Esto es lo que vamos a cubrir a continuación. 36. setTimeout: SetIntervalo que acabamos de mirar, llama repetidamente a una función o ejecuta algún código con un retardo de tiempo entre cada llamada. Otro método de sincronización que tenemos disponible se llama setTimeout. SetTimeout para ejecutar una función o algún código una vez después de un retraso de tiempo. Podemos usar esto para ejecutar la función EndfGame una vez que el temporizador esté activado. Se ve similar a setIntervalo. Echemos un vistazo a esto abajo en el fondo. Este es setTimeout, que al igual que setIntervalo, también toma en dos cosas. Primero es el código que queremos ejecutar y en nuestro caso, queremos ejecutar la función EndofGame. Separarlo con una coma, el retardo de tiempo antes de ejecutar esta función de nuevo en milisegundos. Entonces el 2000 es un retraso de dos segundos. Podemos probar esto funciona saltando a la función EndofGame e iniciar sesión en la consola. Cualquier texto, prueba esto. Así que vamos por terminado. Abre la consola. Nos da dos segundos y ahora se está llamando a nuestra función. Pero queremos que esta función se ejecute al final del juego. Por lo que podemos establecer el retardo de tiempo para que sea el mismo que la duración del juego. Tenemos esto almacenado dentro de una variable en la parte superior, que se llama longitud del juego, actualmente establecida para ser de 300 segundos. Así es como funciona esto en lugar de tener que esperar 300 segundos para nuestra llamada a función, solo dejo caer esto a un valor pequeño como tres. Abajo hasta el fondo, ahora podemos establecer esto como nuestro retraso de tiempo. Entonces como sabemos que la duración del juego es en tres segundos con un retardo de tiempo es en milisegundos, lo que significa que necesitamos convertir esto multiplicando esto por 1000. Vale, intentemos esto una vez más, refresque, y después de tres segundos, nuestra función ahora ha sido llamada. Por lo que un poco de trabajo de limpieza antes de seguir adelante, eliminaremos nuestro registro de consola y la función de fin de juego. Reinstaurar la duración del juego para estar en 300 segundos. Bueno. Entonces esto ahora funciona bien, pero para guardar este código de ejecutarse cuando el juego no se inicia, podemos envolver esto en una función. Así que crea una función llamada GameTimer, pon esto dentro y esta función ahora se puede llamar cuando comience el juego al principio. Así que salta a nuestra función de inicio de juego , llama a nuestro GameTimer. Aún dentro de esta función, podemos pasar un mensaje al usuario. Entonces lo que vamos a hacer es que si miramos el área de estos mensajes, colocaremos en un mensaje para decir: “Chef, nuestros primeros pedidos están llegando tan pronto como comience el juego”. Utilizamos setTimeout, luego despejamos esto después de una cierta cantidad de segundos. Entonces el mensaje no está ahí permanentemente. Para comenzar por la parte inferior, cogeremos la sección con selector de consultas. Echemos un vistazo lo que es el selector para esta parte en el área de mensajes y tenemos esta p con el ID del mensaje. Este es un ID, así que usa un hash, selecciona el contenido InnerText. Mi mensaje va a ser : “Chef, nuestros primeros pedidos están llegando”. Entonces, justo después ejecutaremos una función después de tres segundos para eliminar este mensaje de la pantalla. Una vez más, podemos usar SetTimeout. Como ya hemos aprendido, setTimeout y setIntervalo pueden llamar a una función por su nombre o pueden pasar una función directamente. Podemos copiar esta línea de código, pega esto en. De hecho, justo antes de hacer esto, vamos a quitar estos corchetes. Esto debe establecerse en un igual porque InnerText es una propiedad en lugar de un método. Lo mismo para nuestro segundo. Vamos a configurar esta para que sea una cuerda vacía y luego justo después de nuestros corchetes o los tirantes rizados, podemos agregar el retardo de tiempo de 3000 milisegundos. Refresca, da clic en “Inicio” y nuestro mensaje ahora se coloca en el área de mensajes, y tres segundos después ya ha sido eliminado. Bueno. Entonces esta es una introducción a los temporizadores de JavaScript usando setIntervalo y setTimeout. Se puede ver lo útil que puede ser en proyectos como este. También tenemos algunos temporizadores más para sumar muy pronto. Pero a continuación, echaremos un vistazo a cómo borrar estos temporizadores cuando ya no son necesarios. 37. Despejando temporizadores: Hemos cubierto ambos de estos temporizadores ahora que era setTimeout y también setIntervalo de estos métodos. También tienen un recuento claro parte 2 de ClearTimeOut y también ClearIntervalo. Estos métodos claros detendrán a los temporizadores cuando ya no los necesitemos, y esto es útil para cuando termine el juego. Podemos detener cosas como la cuenta atrás, para que podamos reiniciar cuando sea necesario. No utilizar ninguno de los recursos del navegador innecesariamente. Para poder borrar un temporizador, primero necesitamos almacenar el temporizador original en una variable. En primer lugar, tendremos nuestro orderSimer, que contiene nuestro setIntervalo. Nos referimos a esto dentro una variable llamada orderTimerRef, que es igual a una cadena vacía. Ahora a esta siguiente función tenemos el CountDownTimer, y dentro esto no contiene un tiempo de espera directamente. Pero si echamos un vistazo primero, éste se llama usando setIntervalo. Colocaremos disponible justo por encima de esto. Este es el CountdownTimerRef. También una cuerda vacía. El último es el gametimerRef. Observe aquí cómo hemos declarado estas variables dejadas fuera de cada función. Esto se debe a que si los declaramos dentro de la función, no podremos acceder a ellos más adelante en otras partes de nuestro código. Tendremos que acceder a estos para despejar los temporizadores. Cubriremos esto con más detalle en una sección posterior. Este primero va a ser igual a nuestro setIntervalo. El temporizador de referencia del juego es igual a nuestro setTimeout. También conoce este medio, el CountDownTimerRef, no contiene directamente nuestro tiempo de espera. Lo que podemos hacer es subir a nuestra función, que es este StartofGame, y configurar esto ahí. Entonces esta función StartofGame. Establezca el CountDownTimeRef para que sea igual a setIntervalo. Estos ahora están almacenados dentro de variables. Justo antes de aclarar esto, primero tenemos que probar que están corriendo. registro de consola puede ayudarnos con esto dentro de nuestra función GenerateWorder. Función GenerateWorder, colocar en un registro de consola. En realidad está bien dentro de aquí, como el orden. [ inaudible] el navegador y refrescar. Comienza el juego. Nuestro temporizador comienza a contar atrás. Vemos que nuestro mensaje ahora ha sido eliminado después de tres segundos. Nuestros pedidos siguen llegando, y también nuestro registro de consola aquí también. Pero notarás si hacemos clic en “Fin”, detenemos nuestro juego, nuestro temporizador aún cuenta atrás, nuestros pedidos siguen llegando. Para solucionar esto, podemos borrar todos estos temporizadores cuando llamamos a la función EndofGame. Echa un vistazo a esto y luego dentro, llamamos al método ClearIntervalo, analizando en nuestro orderTimerRef. El segundo también es un intervalo, por lo que usamos ClearIntervalo. Este es el CountdowntimerRef. Para el tercero, nuestro temporizador de juego fue un tiempo de espera. Entonces usamos ClearTimeOut para éste. Prueba esto una vez más. Refrescar. Inicia nuestro juego. Ver la cuenta atrás, vemos las órdenes. Haga clic en el botón “Finalizar”. Ahora todo ha sido detenido. Si volvemos a hacer clic en el botón “Inicio”, todo continúa desde donde lo dejamos. Vemos que el temporizador continúa desde donde se detuvo, y también siguen entrando las órdenes de donde también lo dejaron. Pero esto está bien, haremos algunos trabajos de limpieza muy pronto para solucionar estos problemas. Lo principal aquí es que nuestros temporizadores ahora se pueden detener, cuando ya no son necesarios. 38. Introducción A La Fecha De Javascript: Muchas aplicaciones y sitios web requieren estar al tanto de la fecha actual. Podemos rastrear la fecha de registro de un usuario, el tiempo entre dos eventos, y mucho más, pero este JavaScript tiene algunos objetos incorporados que pueden ayudarnos. Para empezar, podemos llamar a la fecha como una función, así como esta, con los corchetes. Entonces almacene esto dentro de una variable, esa fecha igual a nuestra función de fecha. Entonces probemos esto con un registro de consola. Colocar en la variable fecha y ver qué pasa. Refresca y dentro de la consola, que luego devolverá la fecha actual y también la hora como cadena, igual que la función constructor, que miramos antes al crear nuevo objetos que coloqué en la nueva palabra clave. Sin embargo, con la nueva fecha, también podemos pasar algunos valores para crear una fecha diferente también. Saltar a los corchetes para poder pasar en el año, el número índice del mes en curso, el día, las horas, minutos, segundos y milisegundos. Estamos colocando cualquier año que queramos, luego el índice del mes, que también comienza en cero. Enero es cero y diciembre es 11. A continuación, la fecha. Guarda y actualiza esto dentro de la consola. Esto ahora refleja una fecha en la que acabamos de colocar. Esto significa que esta función constructor, nos da la opción de obtener la fecha actual o establecer cualquier fecha que queramos, así como esta. Trabajar con valores de fecha como este puede ser difícil. Si queremos comparar dos fechas diferentes, lo que tal vez tengamos que hacer es tomar la cadena actual al igual que tenemos en la consola, dividir nuestra cadena y luego comparar cada pieza individual. Como se puede imaginar, esta no es una tarea fácil. Un formato de fecha alternativo es utilizar un método llamado ahora. Podemos mover los contenidos a partir de la fecha. Con la nueva palabra clave, llámalo ahora método. Vamos a probar esto y ver qué pasa en la consola. Esto nos devuelve un número de aspecto extraño. Puede parecer un poco extraño, pero es un número en milisegundos desde el 1 de enero de 1970 UTC. Si seguimos refrescando, cada vez que hagamos esto, este número seguirá aumentando. Aunque aún no es ideal, puede ser una forma más sencilla de comparar fechas u horas. Por ejemplo, cuando un usuario se registra en nuestro sitio web, podríamos usar Fecha.Now para almacenar la hora actual en milisegundos. Entonces en futuras visitas, podemos obtener la hora actual y comparar la diferencia entre estos dos números. Los milisegundos tendrían que ser convertidos a segundos, minutos, y días también, dependiendo de lo que necesitabas hacer con él. Veremos esto con un poco más de detalle en un próximo video. Disponible en las fechas prototipo es una gama de métodos que podemos utilizar para también fijar la fecha también. Echemos un vistazo a estos en la consola. Podríamos mover el método ahora. Accede al objeto prototipo, actualice y abra esto. Como acabamos de ver, tenemos la función de constructor de fecha y muchos más de los casos de uso también, como obtener las horas, obtener la fecha completa, obtener el día. También tenemos a los setters, por lo que podemos fijar la fecha actual, podemos fijar la hora. No voy a pasar por todos estos ya que son muy específicos de diferentes casos de uso, pero funciona igual que cualquier otro método. Utilízalos ya que los métodos están en objetos. Nuevamente necesitamos usar la nueva palabra clave para crear un nuevo objeto de fecha. Eliminemos esto, coloquemos entre corchetes, añada la nueva palabra clave. Uno de los métodos que acabamos de ver en la consola fue GetMonth. Tenemos esto en nuestra variable fecha. Veamos qué regresó de nuevo al interior de la consola. Esto devuelve la fecha del mes en curso. De nuevo, esto comienza con cero, por lo que enero siendo cero, y febrero es el número 1, y así sucesivamente. GetDay devolverá la fecha de la semana en curso. Vamos a probar esto. GetDay. Eso es lo que has visto con el prototipo antes. También tenemos acceso a algunos métodos que también fijaron la fecha. mejor tendremos un evento que ya habremos salvado y quizá queramos cambiar el mes o el año, cual podríamos hacer así. Aquí, tenemos la fecha básica actual. Vamos a quitar esto. Entonces por debajo de esto, vamos a cambiar el mes en curso a cualquier cosa que quieras. Almacenemos esto dentro de una constante llamada fecha actualizada. Agarra nuestra variable de fecha actual, accede a uno de nuestros métodos establecidos como setMonth, coloca un número de índice de 11, que será diciembre. Entonces un segundo registro de consola justo debajo, de nuevo con la fecha. Deberíamos poder ver la versión actualizada con nuestro segundo log. Refresca esto. Empezamos con marzo y luego fijamos nuestro mes para entonces ser diciembre. Esta es una introducción básica a la fecha de JavaScript. A continuación, haremos uso de esta fecha y hora dentro de nuestro proyecto, un seguimiento de cuánto tiempo han estado las pizzas en el horno. 39. Establecer el tiempo de cocción: Lo que aprendimos en el video anterior, la tarea ahora es establecer el tiempo de cocción para la pizza usando la fecha de JavaScript. Vamos a mover los ejemplos del video anterior. Ahora dentro de la función add to oven, creamos una fecha de marcador de posición temprano. Echemos un vistazo a esta función, al horno. Aquí configuramos el tiempo agregado para que sea una cadena. Esto ahora se puede actualizar para hacer uso de la fecha actual dinámicamente. Como hemos visto, accedemos al objeto date y al método llamado ahora. Recuerde fecha.now será en milisegundos, por lo que podemos retirar esto del horno después que haya pasado una cierta cantidad de milisegundos. Pero primero antes de hacer esto necesitamos establecer el tiempo de cocción que queremos aplicar. Esta variable es perfecta, así que salta al resto de variables. Configura una constante llamada tiempo de cocción, que es igual a 20 segundos. Ahora hasta el fondo de nuestro guión, aquí podemos colocar en una nueva función la cual bucle sobre todas las pizzas dentro del horno una vez cada segundo. Luego retiraremos cualquier pizza que hubiera estado en nuestro tiempo de cocción del set. Función, comprobar horno. Para revisar el horno una vez cada segundo podemos utilizar un intervalo establecido. Si lo quisieras, podrías crear una función independiente separada o podemos colocar en la función directamente. Esta función va a recorrer todos los elementos dentro de nuestra matriz de horno. Esta matriz de horno se almacena en la variable horno, bucle sobre el uso para cada uno. Nuevamente, para cada uno toma en una función que tiene acceso a cada una de nuestras pizzas individuales en el horno. Al final de nuestros corchetes de intervalo establecidos, podemos colocar en un retardo de tiempo entre cada una de nuestras llamadas de función, que será cada segundo. Por cada artículo o cada pizza dentro de nuestro bucle frente a una declaración if. Esto si declaración va a comprobar la diferencia horaria cada segundo. Podemos decir si fecha, pero ahora, que es la hora actual en milisegundos, luego deducir el tiempo de cocción. Recuerda que el tiempo de cocción es en milisegundos. Vamos a convertir esto, multiplicar esto por 1000. En su cálculo actual nos dará el tiempo hace 20 segundos. Podemos comprobar si este valor es mayor que la propiedad actual de pizza.time agregada. Si lo es, ha estado en más de 20 segundos y necesitaremos quitarlo del horno. Accede a nuestro horno. El método shift, que va a eliminar el 1er elemento de nuestra matriz. También necesitamos acceder al 1er ítem porque recuerda, el 1er ítem va a estar en el horno por más tiempo. Este siempre va a ser el siguiente en quitar. Después de haber eliminado este elemento de la matriz, entonces necesitaremos restablecer el contenido del horno con la función, que es la visualización de unos ítems, que efectivamente redibujarán el horno. También podemos hacer un seguimiento aquí del número de pizzas que hemos cocinado, Al aumentar una variable. La variable de pizzas completas, un aumento con plus plus. Todavía no hemos creado esto, así que saltamos hasta la cima con el resto de nuestras variables. Dejamos que las pizzas terminadas comiencen en el valor de cero, y esta sección será útil más adelante cuando agreguemos inicio a nuestro juego. Por último, en realidad hemos creado esta función, pero aún no la hemos llamado. Lo que tenemos que hacer es llamar a nuestra función de chequear horno cuando iniciamos el juego. Saltando al inicio de la función de juego, coloca abajo en la parte inferior. Vamos a probar esto. Actualiza la página. Inicio de juego. Da click en cualquier pedido, agrega esto al horno, agrega unos cuantos más. Dale estos 20 segundos, y entonces nuestra pizza debe comenzar a ser removida. El primero se fue, o 2º uno justo después. Seguido de nuestras últimas dos pizzas. 40. Introducción A La Canvas Y Co-Ordinates: Todavía podemos quedarnos dentro de nuestro proyecto para éste y echar un vistazo a algunos ejemplos abajo en la parte inferior. Este video cubrirá algunos de los conceptos básicos del lienzo. Entonces en el resto de esta sección, dibujaremos nuestras pizzas y mostraremos los diferentes coberturas a medida que las agregamos. En primer lugar, vamos a cubrir una parte esencial y esto es para entender usando coordinadas. Hay un elemento HTML llamado Canvas que nos permite dibujar a él usando JavaScript. Establecemos el ancho y la altura del lienzo, y luego podemos navegar por esta cuadrícula similar a píxel usando coordinadas. El eje x corre de izquierda a derecha, y el eje y va de arriba a abajo. Usando estas posiciones x e y, podemos movernos a cualquier ubicación en el lienzo y x,0, y,0 es la esquina superior izquierda. Entonces podemos movernos a través o hacia abajo cualquier cantidad que queramos al igual que vemos en este ejemplo, donde x es igual a 10 y y es el valor de 3. Pronto veremos cómo entender estas coordinadas son esenciales para dibujar en el lienzo. Volver a nuestro proyecto y a nuestro archivo HTML. Tenemos un lienzo elementos ya configurados. Si echamos un vistazo a nuestra área de cocina, tenemos este elementos de lienzo con el ID de área de pizza. Tiene el ancho de 250 y también la altura de 250 pixeles. Salta a nuestro guión y bajemos al fondo de nuestro guión. Crea una constante llamada lienzo para almacenar esto en el interior de. Al igual que cualquier otro elemento, podemos usar algo como document.queryselector. Como acabamos de ver, podemos pasar en una identificación. Este es igual a pizza_area. Entonces podemos llamar a un método llamado getContext. Agarra nuestra variable, llama al método getContext. Pasando en una cadena de 2D. En este contexto es un objeto que contiene propiedades y métodos que podemos utilizar para dibujar al lienzo. Sólo vamos a estar necesitando las características 2D para estos ejemplos. Instala esto dentro de una variable o una constante, que generalmente se llama CTX, pero esto se puede nombrar cualquier cosa que quieras. Al usar el lienzo, dos conceptos que son importantes para entender es trazo y relleno. El trazo es como una línea de lápiz o un contorno y relleno, igual que suena, llena una forma con un color sólido. Para dibujar un rectángulo, tenemos StrokeRect y también el método FillRect. Echemos un vistazo a StrokeRect para empezar. Si bien las características dibujadas están disponibles en el contexto. Para dibujar el contorno de un rectángulo, usaremos StrokeRect, y luego pasamos en cuatro valores. Los dos primeros al igual que hemos visto en las diapositivas, es la ubicación x y la y para la esquina superior izquierda de nuestro rectángulo. Si queremos que esto comience en la parte superior izquierda, fijamos esto como 0,0. Después tenemos el ancho y la altura del rectángulo que se quiere dibujar. Esto podría ser un rectángulo o también se usa para dibujar un cuadrado si estamos pasando valores iguales. Echemos un vistazo a esto. Diremos esto y saltaremos al navegador, dale a esto una actualización y vemos el contorno de nuestro 200 pixel por 200 pixel cuadrado. pasar también en valores codificados en duro igual que esto. También podemos acceder a nuestra variable lienzo desde arriba. Pase esto y acceda a la propiedad width. Ya hemos puesto estos dos dentro de nuestros elementos. Tenemos 250 pixeles para ambos valores. Podemos insertar estos como variables. Pruebe esto, actualice y debido a que esto es de 250 píxeles, esto ahora es un poco más grande de lo que originalmente teníamos. Usar estas variables es realmente útil y también podemos proporcionar cálculos basados en su tamaño. Por ejemplo, si sólo queremos que esto sea la mitad del ancho del lienzo, podríamos dividir esto por 2. Si quieres que esto sea un rectángulo sólido o un cuadrado sólido, podemos cambiar trazo para que sea FillRect. Esto llenará esto con el color negro predeterminado. El negro estándar generalmente no se ve muy bien, y también podemos cambiar este color a esto. Vamos a duplicar nuestros rectángulos y haremos el primero en ser un trazo, y el segundo solo haremos esto un poco diferente. Vamos por 100 por 100. Lugares, a 20 píxeles de la parte superior izquierda del lienzo. Ahora tenemos un trazo y un rectángulo lleno. Podemos aportar diferentes colores para cada uno de estos, empezando por el trazo. Nuevamente, acceda al contexto. Ya que estamos usando un trazo y pasamos en el StrokeStyle. Establezca esto igual a un valor similar a CSS, como el verde. Voy a ver que el color verde ha surtido efecto. Entonces justo encima de nuestro rectángulo lleno. También podemos acceder al contexto y proporcionar la propiedad llamada FillStyle para afectar a esta segunda plaza. Esto igual a cualquier otro color. Guarde esto y actualice. Así es como podemos establecer diferentes colores para cada una de nuestras formas. Esto viene API también tiene un método de arco para ayudar con el dibujo de arcos y círculos. Como siempre, accedemos a esto en el contexto ctx.arc. A diferencia de los cuadrados que acabamos de dibujar todos los rectángulos donde la ubicación inicial se basa en la parte superior izquierda, con un círculo, esto se basa en el centro. Podemos acceder al ancho del lienzo para el eje x. Divide esto por 2 a lugares en medio del lienzo y también lo mismo para la altura. Este es el lugar de partida para nuestro círculo, pero aún necesitamos proporcionar algo más de información. El siguiente es el radio de nuestro círculo. Si no estás familiarizado con los radios, esto es básicamente la mitad del ancho del círculo. El valor desde el punto central hasta el exterior. Vayamos por 100. Entonces los dos últimos valores en el ángulo de inicio y final. Estos valores están en radianes más que en grados. Para empezar, agregaremos un ángulo inicial de cero y luego el ángulo final, un valor de dos radianes. Demos a esto un ahorro y veamos qué pasa dentro del navegador. Si recargamos, no vemos ningún dibujo en el lienzo. Esto es porque tenemos que decir si queremos que esto sea una línea de trazo o un relleno sólido como lo hicimos anteriormente. Justo después accede al contexto. Sostén el método de relleno, refresca, dejándonos con una bonita curva parecida a la sonrisa. O simplemente podemos hacer la línea con un trazo con ctx.stroke. También se puede ver que ahora estamos haciendo la línea de trazo. Esto también heredará el estilo de trazo del verde. Para ir círculo completo en radianes, necesitamos multiplicar este valor de 2 por math.pie que es el grado equivalente a 360 grados. Ahí está nuestro círculo verde y como se puede ver ahora tenemos un círculo completo. Esto también se coloca en el centro del lienzo debido a nuestras ubicaciones x e y. Justo antes de que realmente dibujemos esto al lienzo usando trazo o relleno, también podemos establecer algunas propiedades adicionales como el ancho de línea y también el color también. Empecemos con la propiedad de ancho de línea, que estableceremos en un valor de píxel de cinco. Entonces también disponible en el contexto está el StrokeStyle. Este es el mismo valor que usamos anteriormente para establecer que esto sea verde. Pero ahora anularemos esto para que sea de un color diferente. Antes, mencioné que esta es una propiedad similar a CSS-así que además de solo usar las palabras como verde o rosa caliente, también podemos pasar en las cosas como el valor x y establecer que esto sea de un color diferente. Voy a ir por f5cf89. Prueba esto, dejándonos con una línea de 5 píxeles en un color diferente. Además de estos métodos para dibujar formas predefinidas, también podemos dibujar líneas a mano alzada también como una herramienta de lápiz si has usado una aplicación de dibujo en el pasado. Para demostrar esto, podemos replicar este rectángulo exterior verde o cuadrado y dibujar esta mano libre. Podemos comentar el primer rectángulo, que es estas dos líneas aquí. Entonces dibujamos esto nosotros mismos usando coordinadas. Todos estos están disponibles en el contexto. El primer método va a ser MoveTo. MoveTo es básicamente como recoger nuestro lápiz, mover esto a una cierta parte del papel de la que queremos comenzar. Esto moverá nuestras coordinadas sin realmente dibujar una línea. Al igual que nuestra plaza original, esto comenzará en la parte superior izquierda del lienzo. Para dibujar realmente, utilizamos el método llamado lineTo, que dibujará una línea de lápiz desde nuestra ubicación inicial hasta ubicación que establecemos dentro de aquí. Al igual que arriba, podemos colocar en valores codificados duros así o podemos acceder a las variables como lienzo.width y lona.height. Haz de esto un ancho completo del lienzo para ir a través de la derecha , accede al lienzo.width. Ya que no queremos bajar en el eje x, podemos dejar esto al valor de cero. Vamos a refrescar. Todavía no vemos la línea en la pantalla porque necesitamos llamar a ctx.stroke para dibujar esto sobre el lienzo. Esta es nuestra primera parte de nuestra plaza. La siguiente parte es ir hacia abajo y dibujar esta línea vertical desde nuestra ubicación actual, acceder ctx, el lineTo. Todavía queremos quedarnos por encima del lado derecho al que podamos acceder con el ancho de 250 o, nuevamente, utilizando el lienzo.widthproperty. Pasa esto en, lienzo.width. Después para bajar al fondo del lienzo, podemos acceder a esto con lienzo.altura. Duplicar esto. Nos quedaremos al mismo valor de altura de 250. Pero ahora tenemos que pasar al lado izquierdo, que es el valor x de cero. Guardar, refrescar. Sólo uno más para ir. Pero ahora tenemos que movernos hacia arriba a la esquina superior izquierda, que es la posición de 0,0. Bueno. Esto es r cuadrado ahora en el lienzo, también podemos agregar un método al principio, mantener start path, también disponible en el contexto. Colocaremos esto en el inicio justo antes de empezar a dibujar nuestra forma. Esto es útil porque borra cualquier camino existente desde arriba, por lo que no obtenemos ningún conflicto. También significa que se recuerda la posición inicial. Podemos usar camino cerrado para volver a esta ubicación en cualquier punto. Para ver esto, podemos quitar nuestra última línea, refrescar. En lugar de dibujar esto manualmente, ahora podemos volver a nuestra ubicación inicial con ctx.closepath. Debe funcionar exactamente igual que antes, volviendo de nuevo a la ubicación original. Además de crear cuadrados, rectángulos, círculos, y también dibujo a mano alzada, también podemos escribir texto en el lienzo. En primer lugar, podemos establecer la fuente que queremos usar, ctx.font, y establecer esto igual a una cadena. La cadena puede tomar el tamaño de las fuentes y también la familia de fuentes. El método para dibujar nuestro texto es CTX.FillText. Como probablemente hayas adivinado, también hay un método StrokeText correspondiente. El primer valor es una cadena de nuestro texto, acabo de decir Canvas API. Entonces una ubicación x e y, que es la línea de base de nuestro texto, por lo que 20 y 200, Guardar y Refrescar. Ahí está nuestro texto y también es rosa porque heredará la propiedad FillStyle anterior, que tendrá desde arriba. Canvas también se puede utilizar para muchas otras cosas también, y también otros métodos que podemos explorar y también podemos añadir imágenes al lienzo que podemos editar accediendo a los píxeles. En los próximos videos, vamos a utilizar un lienzo para crear las pizzas y también mostrar los coberturas que agregamos en la cocina. 41. Preparación de los ingredientes: En la parte superior de la sección de guiones, tenemos una matriz de ingredientes con algunos ingredientes que necesitamos para hacer pizzas. Estas cuerdas, todas coinciden con los ingredientes que se necesitan en los pasos requeridos desde arriba. Entonces si vamos a la matriz de pizzas, vemos la matriz de pasos requeridos. Esto contiene las cuerdas que coinciden con nuestros ingredientes. Si cambias alguna de estas pizzas para usar diferentes ingredientes, asegúrate de que la matriz de ingredientes también esté actualizada para que coincida también. Esto será realmente importante pronto. Lo que haremos en este video es recorrer todos estos ingredientes, y luego mostrarlos como botones en el área de la cocina. Una vez seleccionada una pizza, el chef puede entonces seguir este método, y hacer la pizza usando estos botones. Además haciendo uso del lienzo, cada botón dibujará los ingredientes sobre la pizza. Ahora desplácese hacia abajo hasta el fondo de nuestro proyecto, y limpiemos los ejemplos del video anterior. Entonces no necesitamos nada como el texto. No necesitamos la sección a mano alzada. No necesitamos el círculo. No necesita ninguno de estos cuadrados o rectángulos. Pero sí necesitamos mantener el acceso a nuestro lienzo, y también al contexto 2D. Después de esto crea una nueva función que se llama ListIngredientes, que bucle sobre toda la matriz de ingredientes desde arriba, y mostrará esto dentro del navegador. Para acceder a nuestra matriz de ingredientes. Dado que se trata de una matriz, podemos usar el método forEach, que ejecuta una función para cada uno de estos valores. Esta función también va a tomar en un ingrediente que es cada valor de matriz. Entonces necesitamos crear un elemento de botón para cada uno de estos ingredientes. Por lo que podríamos crear uno manualmente o recordar, también tenemos acceso a nuestra función auxiliar llamada BuildElement. Esto toma en dos cosas. El primero es el tipo de elementos que queremos crear, un botón. El segundo es el contenido de texto a mostrar. Estos son los ingredientes de nuestra matriz, almacene esto dentro de una constante llamada IngredientElement. Entonces para nuestro estilo, también podemos agregar una clase llamada ingrediente para acceder a nuestras constantes, y agregar el nombre de clase del ingrediente. El tramo final es sumar esto al DOM, documentos.QuerySelector. El selector de consultas que necesitamos. Echemos un vistazo a la página de índice. Necesitamos este div con el id de ingredientes. Dentro aquí colocaremos en todos los contenidos de nuestra matriz. Pasa esto como una cuerda. Utilizamos AppendChild pasando en nuestra constante desde arriba. Por lo que podríamos llamar a esta nueva función de inmediato. Pero probablemente tendría sentido agregar esto a la función GameSart, echar un vistazo al inicio del juego. Dentro de aquí, lo llamaremos desde abajo. Ahorra, y luego probemos esto. Refrescar. Haga clic en el botón Inicio, y todos nuestros ingredientes ahora se colocan en la cocina en la parte inferior. Para el siguiente paso, necesitamos poder hacer click en cualquiera de estos ingredientes, y luego hacer algo. Este algo va a ser una función para hacer un seguimiento de los pasos que hemos dado hasta el fondo. Crea una nueva función llamada StepComplete. Entonces una segunda función que va a dibujar los ingredientes sobre el lienzo. Función, hacer pizza. Esta función StepComplete necesita ser llamada cuando el usuario hace clic en cualquiera de nuestros ingredientes desde justo arriba. Entonces para esto, justo antes de agregar esto al DOM, podemos agregar un oyente de eventos accediendo a nuestro IngredienteElements.Add oyente de eventos. Esto ahora para un clic, que activará una función llamada StepComplete. Dado que se trata de un evento click, también va a tomar en la información del evento que podemos almacenar en la variable. Esta función StepComplete e también se puede usar ahora para desactivar el botón una vez que se hace clic en, y también realizar un seguimiento de estos pasos que hemos dado. Entonces el paso 1 va a desactivar el botón cuando el usuario haga clic en él. Por lo que no se nos puede hacer clic dos veces. Voy a hacer esto accediendo a nuestros elementos con e.target. Podemos establecer un atributo. Atributo está deshabilitado con un valor de true. Entonces paso 2, necesitamos acceder al contenido de texto real de nuestro botón. Entonces sabremos el nombre del ingrediente. Por ejemplo, necesitamos agarrar el texto de masa rollo, la salsa de pizza, o el queso, y así sucesivamente. Almacenar esto dentro de una constante llamada nombre de paso, accede a nuestros elementos con e.target. Entonces el contenido interior del texto. Antes de ir más allá, revisemos si esto está funcionando. Colocar en un registro de consola. Tenemos nombre de paso. En el navegador, y en la consola. Comienza el juego. Haga click en cualquiera de nuestros botones, como queso, salsa de pizza. Estos botones también están ahora desactivados también. Haz un seguimiento de los pasos que hemos dado, todos los botones en los que hemos hecho clic. Necesitamos almacenar esto dentro de una variable que contenga una matriz. Así que salta a nuestras variables. En la parte inferior dejar que los pasos completados sean iguales a una matriz vacía. Abajo al fondo. Ahora podemos quitar el registro de la consola, acceder a esta variable de pasos completados, acceder al método push, y luego podemos empujar un nuevo valor a esta matriz, que es nuestro nombre de paso. Lo último es llamar a nuestra función make pizza para dibujar un nuevo ingrediente al lienzo. Por supuesto, aún no hace nada, pero podemos colocar esto dentro de la función. Así que haz pizza. Pase en ingrediente de pizza del nombre del paso. Ahora ya que pasamos en un ingrediente, podemos establecer esto dentro de nuestra función, y probar si esto está trabajando con un log de consola. Simplemente eliminemos cualquier otro registro de consola que tengamos. Así que tenemos la envoltura de pedidos, tenemos el horno, texto de orden. Después actualice, inicie de nuevo, y haga clic en cualquiera de estos ingredientes. Ahí vamos. Ahí están nuestros nuevos ingredientes de make pizza console log. Esto ahora nos deja listos para dibujar realmente ciertos ingredientes al lienzo. Por ejemplo, si la función make pizza recibe salsa de pizza, dibujará algo de salsa roja en nuestra pizza. Esto es a lo que vamos a pasar a continuación. 42. Dibujo de ingredientes circulares: Abajo en la parte inferior de nuestro guión, actualmente tenemos esta función MakePizza y esto se llama cada vez que agrego unos nuevos ingredientes. También ha pasado estos ingredientes. Lo que me gustaría hacer ahora es crear una sentencia switch para manejar qué ingrediente se ha hecho clic. Entonces podemos dibujar este ingrediente en nuestra pizza por el lienzo. Dado que tenemos diferentes opciones de ingredientes, como acabamos de mencionar, reemplazaremos esto una sentencia switch para manejar cada uno de nuestros casos. Pasando el ingrediente en el que se está haciendo clic, y luego crearemos un caso para cada uno. El primer caso, esto va a ser una cuerda y si nos desplazamos hacia arriba cerca de la parte superior, tenemos nuestros ingredientes aquí mismo y cada uno de los casos va a coincidir con cada una de estas cuerdas. De vuelta hacia abajo, el primero en capitales fue para ROLL DAT. Nos encargaremos de qué hacer en tan solo un momento, pero por ahora solo saldremos de esto y simplemente copiaremos cada uno de nuestros ingredientes. El segundo caso, este fue SALSA PIZZA. El tercero para QUESO, y luego PEPPERONI. El siguiente fue para JAMÓN y PIÑA. Sólo voy a dejar esto como el conjunto de ingredientes por ahora y puedes agregar todo el resto si lo prefieres, pero voy a seguir adelante porque esto va a ser realmente largo de lo contrario. Ahora dentro de cada uno de estos casos, podemos configurar algunas funciones de dibujo de lienzo para representar los ingredientes particulares. Para la masa, para la salsa de pizza y también para el queso, estos pueden ser razonablemente simples, solo necesitamos dibujar algunos círculos. Empezaremos con la masa de rollo. Sabemos por videos anteriores que para dibujar un círculo sobre el lienzo usamos ctx.arc, después le proporcionamos la ubicación inicial que va a estar en el centro. lienzo.width dividido por dos y también el mismo para la altura. Esta es la posición inicial x e y. El siguiente va a ser el radio. Vamos por 100 pixeles. Al igual que antes, para crear un círculo completo en radianes, la posición inicial es cero y luego la posición final es dos multiplicada por el valor de Math.Pi. Recuerda que de videos anteriores cuando usamos ctx.arc, realidad no dibujaba nada inicialmente sobre el lienzo. Lo que tenemos que hacer es usar ctx.stroke o ctx.fill para dibujar esto, pero de hecho, realmente vamos a utilizar ambos. El motivo es que usaremos el método de relleno para dibujar la base completa de pizza sobre el lienzo. También haremos un método de trazo adicional, que también va a agregar un círculo exterior de 15 píxeles a esta masa. El motivo es, vamos a establecer que esto sea un color ligeramente diferente para darnos el efecto de la corteza exterior. En primer lugar, lo que vamos a hacer es concentrarnos en la corteza y lo haremos con CTX.LineWidch, establecer esto para que sea un valor de 15 pixeles, luego vamos a establecer el color con StrokeStyle pasando en una cadena que va a ser un valor hexadecimal de f5cf89 y para finalmente dibujar esto, usamos ctx.stroke. Esto debería darnos ahora un esquema basado en nuestro arco. Vamos a probar esto, refrescar, empezar de nuevo, seleccionar cualquiera de nuestras pizzas, la masa de rollo, y ahora vemos el círculo exterior de nuestra pizza. Como se mencionó, esta es la corteza, por lo que también necesitamos agregar el método de relleno para llenar también la parte interna del círculo, pero un color ligeramente más claro justo después del trazo. Pon el color para nuestro método de relleno y éste va a ser f5d69d, luego llenar el círculo con este color. Vamos a probar esto. Vuelve a saltar y empezar de nuevo, selecciona cualquiera de nuestras pizzas. Rollo de masa. No deberíamos tener este color negro así que echemos un vistazo. Este FillStyle en realidad solo necesita el hash justo antes. Inicio. Selecciona una de nuestras pizzas, rodar masa, y ahora se ve mucho mejor. Ahora, abajo a nuestra salsa de pizza, que también va a ser un círculo pero poco más pequeña que nuestra masa. No tenemos ningún conflicto desde arriba. Comenzaremos esta sección con CTX.BeginPath. Esto también necesita un círculo, por lo que podemos copiar el método ctx.arc desde arriba, que también va a necesitar estar en el centro del lienzo. Sí necesitamos cambiar el color. Esto se va a llenar, así que usaremos FillStyle, y éste será ed4434, finalmente, llame ctx.fill. A continuación, también pasaremos al queso, que sigue siendo una función de unión circular. Copiaremos toda la sección de salsa de pizza, pegaremos esto en nuestra zona de queso, haremos el círculo un poco más pequeño para que aún podamos ver la salsa alrededor del borde, pero sí también necesitamos cambiar la color. Este es f7bc4d. Salvamos esto y probemos esto antes de ir más allá. Nuevamente, podemos seleccionar cualquier pizza, piña, rollo de masa. Esto está bien como hemos visto. A continuación probaremos la salsa de pizza y esto está todo bien y esto cubre la misma sección de relleno que el área de masa anterior, pero aún podemos ver el contorno de trazo desde arriba. A continuación, tendremos el queso, que es un círculo ligeramente más pequeño, por lo que no cubre completamente toda la base de tomate. Bueno. Dejaremos éste aquí por ahora y en el próximo video, echaremos un vistazo a los siguientes ingredientes, que van a ser un poco más complejos que estos círculos. En lugar de crear círculos como lo estamos haciendo, vamos a involucrar múltiples piezas en diferentes ubicaciones. Nos vemos en la siguiente, donde vamos a echar un vistazo a cómo hacer esto. 43. Dibujo múltiples piezas: salir de mi versión de esta declaración de switch, todavía tengo el pepperoni, el jamón, y también las piezas de piña para crear. Dado que todas estas son piezas separadas, vamos a ser dibujados muchas formas diferentes sobre nuestro lienzo en forma de pizza. Para empezar, en el pepperoni, justo debajo del caso, ya que estamos usando múltiples piezas para estos ingredientes, necesitamos crear una variedad de localizaciones. Const, posiciones pepperoni, que va a ser una matriz. De hecho, esto va a ser una matriz de matrices porque esto va a ser una matriz de múltiples valores. Además, cada uno de estos valores necesita tener una ubicación x y una y para cada una de estas piezas. El primero, y por supuesto todos estos necesitan mantenerse dentro de las dimensiones de la pizza. Pero todos estos son números aleatorios. Podemos agregarlos y jugar con ellos si quieres después, o puedes copiar junto con los míos. El tercero va a ser 147 y 57. Recuerda que cada una de estas submatrices va a ser nueva pieza de pepperoni. El cuarto, puedes sumar tantos o tan pocos estos como quieras, 116, 134, 125, 190, 162, 165, 190, 85, 192, 142, 150, 115, 76, 95. Quiero empezar un par de piezas más. Vamos por 80, 190, y el final, 61 y 135. Asegúrate de que esto sea justo antes la cláusula break y antes de que hagamos algo más, pensemos exactamente en lo que tenemos que hacer aquí. Un trozo de pepperoni es sólo un pequeño círculo. Sabemos dibujar esto usando el arco. Pero la diferencia tendrá que repetir este arco para cada una de estas ubicaciones. Aquí es donde puede entrar un bucle. Lo que haremos es agarrar nuestras constantes de posiciones de pepperoni. Entonces llamaremos a a para cada bucle en esta matriz. Pasar en una función que toma en el nombre variable de la pieza. Pieza va a ser cada una de estas piezas individuales de pepperoni que dibujaremos. Para ello, comenzaremos con CTX.BeginPath sin ninguna ruta existente que pueda ser dibujada. ctx.arc, dibuja cada uno de los círculos para las piezas de pepperoni. Entonces recuerda, esto toma en la ubicación x y la y para el centro del círculo. Ya que lo que hay que basarse en las ubicaciones anteriores, lo que vamos a hacer es acceder a nuestra pieza. El primer índice de posición de cero, y para la ubicación y, será paz y luego el índice número de uno. Pasa esto adentro. Pieza, accede al número índice de cero, la ubicación y es esta paz y el índice número de uno, tamaño de 10. Vamos a crear un círculo como cero y luego Math.pi multiplicado por 2. Vamos a darle un color con CTX.FillStyle. Justo antes de dibujar esto, que es igual a una cadena, quiero ir por el valor hexadecimal de BD 3611. Entonces por último, dibujaremos esto con ctx.fill darle a este nuestro color de fondo sólido. Vamos a darle una oportunidad a esto. Salta al navegador. Necesitamos iniciar nuestro juego y seleccionar cualquiera de nuestros pedidos. También, pizza, rodaremos la masa, añadimos la fuente, el queso. Sabemos que esto está funcionando, a continuación el pepperoni. Están todos nuestros círculos los cuales están basados en nuestra matriz, que creamos dentro de aquí. Bueno. Ahora abajo al jamón y también puedes darnos una oportunidad si quieres a ti mismo, te sientes seguro haciéndolo. Esto se va a basar en un enfoque similar al anterior. En primer lugar, necesitamos crear nuestras posiciones jamoneras, que es una matriz que también contiene subbarras, contienen ahora ubicaciones x e y. Primero creemos estos y almacenemos dentro de una constante llamada HamPositions, nuestra matriz principal. Entonces crea nuestras ubicaciones aleatorias. El primero, el segundo de 108, 74, número 3, 147, 47, 130, 124. Nuevamente, puedes hacer estos completamente aleatorios y cambiarlos si quieres, 125, 160. Asegúrate de que todos estos permanezcan dentro del área de pizza Canvas, 159, 145 , 197, 82, 202 , 132, 158 y 90. Ya casi estamos ahí vamos a seguir adelante con los dos finales, vamos a hacer 90, 140 y el último de 105 y 135. Al igual que arriba, pasaremos por estos con un bucle forEach. Seleccionaremos nuestras posiciones jamoneras llamadas bucle forEach en la matriz, que toma en una función cada pieza. Pero esta vez, en lugar de crear círculos usando el método arc, voy a usar el método FillRect para dibujar estos como un rectángulo. Primero, estableceremos un color con CTX.FillStyle, y estableceremos esto igual a una cadena, que es f58c8c. A continuación, CTX.Fillrect. Dibuja un rectángulo sólido en el Lienzo. Al igual que arriba, esto va a tomar en las posiciones x e y, que podemos acceder así así con nuestras posiciones de matriz x Esta es la pieza y el número índice de cero, que corresponde a cada uno de estos primeros valores de matriz. Entonces el segundo valor de matriz de pieza lo que está en el índice número de uno. Recuerda con rectángulos, esta es la ubicación x e y para la esquina superior izquierda del rectángulo o del cuadrado, también necesitaremos establecer el tamaño, que queremos establecer en ocho píxeles ancho , 32 pixeles de altura. Probemos esto antes de ir más allá. Esto es para el jamón. Da click en esto y tenemos muchas piezas de jamón rosa ahora en pizza. Puedes jugar con las posiciones si quieres que se vea un poco mejor. Pero voy a pasar a la siguiente, que es piña. Para ahorrar poco tiempo, mucho de esto va a ser similar a nuestra posición de jamón así que vamos a copiar toda esta sección, incluyendo el for-loop. Pega esto justo debajo de nuestra caja de piña. Por supuesto, van a ser las posiciones de la piña. Cámbialo por el bucle. Haz jugar con estos valores después si quieres. Para el FillStyle, cambiaremos el color de estos para ser de color amarillo de ebe534, hacerlos un poco diferentes en cuanto tamaño, 12 y 18. Crea las celdas dentro del inicio del navegador. Nuestra pizza. La piña también funciona. Al igual que se mencionó, es posible que necesites cambiar su posición para que no tengamos solapamientos. Una última cosa antes de que encontremos este video es que también nos vamos a asegurar que los trozos de piña y el jamón a colocados en la pizza en diferentes ángulos. Actualmente, se ve un poco aburrido porque todo se enfrenta a la misma dirección. Mezclemos un poco este ángulo para cada una de estas piezas. Podemos hacer esto con rotar. Eso comienza en la sección de jamón. Justo antes de dibujar esto con FillRect. Podemos acceder a rotar, que también está disponible en el contexto. Este valor de rotación está en radianes, no grados. Una forma de convertir esto a un título es así. Podemos pasar en nuestro valor inicial. Si quisiéramos que esto fuera rotado por un valor pequeño como cinco grados, podemos convertir esto a radianes multiplicando esto por Math.pi dividido por 180. Esto hace que sea mucho más sencillo trabajar con grados si es mucho más fácil envolver alrededor de esto dentro de tu cabeza. Pero no queremos mantener este valor codificado de cinco. Todo el punto de añadir este giro para cada una de estas piezas es convertirlo un valor ligeramente diferente para cada una. Podemos hacer sumando en matemática.Random, que colocará en un valor ligeramente diferente para cada una de nuestras posiciones y para que sea un ángulo ligeramente mayor, porque recuerde matemática.El azar es solo entre 0 y 1. Podemos multiplicar esto por 2. Eso es también copiar este método de rotación, y podemos reutilizar esto dentro de la piña. Justo antes de usar FillRect, probemos esto, actualicemos y empiece de nuevo. La salsa de pizza, el queso, pepperoni, al lado del jamón. Si echas un vistazo de cerca, estas piezas están ligeramente fuera de alineación. También con la piña también, pero con una piña, como se puede ver, tenemos un pequeño tema. Esto es cuando usamos múltiples ingredientes con valores de rotación. Esto sucede debido a la rotación en la transformación. Cuando rotemos, el Lienzo girará desde el origen del lienzo, que es 0,0, todo el de arriba a la izquierda. Si agregamos múltiples rotaciones, cada una se suma a la anterior, que hemos establecido. Ponemos uno para el jamón, y luego sumamos a esto agregando la rotación para la piña. Podemos arreglar esto restableciendo el origen de cada nuevo ingrediente usando algo llamado set transform. Para ello, dentro de nuestra función, haré función de pizza. Justo antes de las declaraciones switch. Queremos llamar a esta transformada ctx.set, que va a tomar en seis valores. Los seis valores serán 1, 0, 0, 1, 0, 0. Estos seis valores diferentes pueden ser un poco confusos, sobre todo porque no están particularmente agrupados. Podemos ver el primer valor de uno y el cuarto valor también es uno. Ambos se relacionan con el escalado, que puede hacer que un elemento sea más grande o más pequeño. El primero es el escalado horizontal, y el cuarto es un escalado vertical. No queremos que ninguno de estos valores se incremente o disminuya por lo que mantenemos estos en uno, que es el tamaño original. El segundo de tercer valor ambos se relacionan con el sesgo. Tampoco queremos sesgar ninguna de nuestras piezas. Estamos manteniendo estos como cero, lo que significa nada que fijar. Las cosas que nos interesan son estas dos finales. Estos dos finales nos fijamos en la traducción horizontal y la vertical para volver a cero. Cada vez que seleccionamos un nuevo ingrediente, la transformación de rotación, que mirará antes del restablecimiento de nuevo a cero, lo que significa que no obtenemos una acumulación de estos valores de rotación. Probemos esto con la transformación ahora en su lugar. Selecciona un pedido. Ahora lo que estamos buscando es tanto el jamón como las piezas de piña para estar de vuelta en las localizaciones originales. Todo esto está funcionando bien ahora. como se mencionó, puedes crear más de estos casos para diferentes ingredientes si lo prefieres o si quieres alguna práctica extra. Al siguiente, cuando estés listo, te veré en el próximo video donde despejaremos este Lienzo una vez terminada la pizza. 44. Despejar El Lienzo: Cuando terminemos de hacer la pizza, agregando los ingredientes, y luego finalmente agregarla al horno, necesitamos limpiar el Lienzo existente listo para hacer el siguiente. Como habrás adivinado, creamos una función que va a cubrir esto, y lo haremos en la parte inferior de nuestro guión. Crea una nueva función dentro de aquí para cubrir esta llamada ClearCanvas. La primera tarea la voy a hacer dentro de esta función si entramos en el Start aquí y seleccionaremos uno de nuestros pedidos. Recuerda, cuando vamos a hacer cada una de estas pizzas y hacemos clic en los ingredientes, entonces desactiva el botón. Lo que vamos a hacer es seleccionar todos estos botones para comenzar. Vamos a recorrer estos botones y luego eliminaremos este atributo disabled. El primero es configurar una constante llamada pasos. Esto va a recorrer todos nuestros botones con el nombre de clase de ingredientes. Document.getElementsByClassName. El nombre de clase adjunto a cada uno de estos botones es ingredientes. Un poco más de espacio para esto y si recuerdas de los primeros videos cuando usamos getElementsByClassName, lugar de volver de nuevo en array, esto volverá a la colección HTML. Contamos con colecciones HTML. No podemos usar ninguno de los métodos de matriz como para cada uno. Lo que vamos a hacer es tomar nuestros pasos y luego convertiremos esto en una matriz, lo que significará que podemos usar nuestro forEach para recorrer cada uno de estos. Haremos esto con Array.from. Esto creará una nueva matriz a partir de nuestros pasos. Coloca esto en. Ahora tenemos una matriz, podemos usar métodos de matriz al igual que forEach, pasar en nuestra función. Tendremos acceso a cada uno de los elementos. A partir de estos, elementos, pueden eliminar el paso de atributo en la cadena de disabled. Esto ahora debería recorrer todos nuestros ingredientes y eliminar el atributo disabled para que estén disponibles para su selección en la próxima pizza. A continuación, como miramos en el video anterior, a veces tenemos un tema donde tenemos algún valor de rotación para el jamón y la piña. Lo que vamos a hacer es agarrar o establecer transformación en la parte superior de la declaración switch, que está justo aquí. Los valores actuales dentro de aquí restablecerán nuestra transformación si se están produciendo alguna rotación existente. El paso final es despejar cualquier cosa que se encuentre actualmente en el Canvas y lo hemos usado en el pasado con CTX.ClearRect. Comenzamos en la parte superior izquierda de nuestro Lienzo, que es cero, cero y para despejar el tamaño completo del Lienzo, podemos acceder a nuestras variables con lienzo.width y también lienzo.height. Eso es todo. Esa es nuestra función ahora completa. Lo último que debe hacer es llamar a esta función desde AddToOven. Seleccionaremos esto y echaremos un vistazo a la función llamada addToOven. Justo debajo de DisplayovenItems, pega esto en nuestras declaraciones if. Si bien aquí también hay un paso rápido que podemos introducir, que es agarrar nuestra variable que se completaPasos. Restablecer esto para que sea una matriz vacía. Vamos a darle una oportunidad a esto. Refresca el navegador y vuelve a arrancar. Selecciona un pedido. Actualmente en jamón y piña, por lo que rodamos la masa, agregamos la salsa, queso, el jamón, y la piña. Agrega esto al horno y ahora nuestro Lienzo se está limpiando y todos los ingredientes aún están disponibles para su selección en nuestra próxima pizza. Voy a probar uno más, el pepperoni, agregar los ingredientes, agregar esto al horno, y todo esto funciona como se esperaba. Esto es ahora por nuestro trabajo en el Lienzo y puedes jugar con cosas, puedes extender las cosas, e incluso puedes agregar los ingredientes extra si quieres. Ahora pasemos ahora a la siguiente sección donde terminaremos este proyecto. 45. Malgastar pizzas: Esta nueva sección va a implicar terminar nuestro proyecto. Una de las cosas que necesitamos cuidar es revisar que el chef haya completado todos los pasos requeridos antes agregar la pizza al horno. Entonces, es decir si la pizza está equivocada, se desperdiciará. Eso es lo que vamos a cubrir ahora. Posteriormente, también mostraremos algunas estadísticas al usuario, para que podamos hacer un seguimiento de estas pizzas desperdiciadas dentro de una variable. Saltemos hasta la cima de nuestro index.js. Desplázate hacia abajo hasta nuestras variables. Usando la palabra clave let, crea una nueva variable llamada WastedPizzas, y haremos un seguimiento de cuántos de estos nos hemos equivocado. Después vuelve a la parte inferior de nuestro script, y crearemos una nueva función para manejar esto. Establezca esto, llame al WastedPizza. Antes de olvidar, vamos a agarrar nuestra variable WastedPizzas desde la parte superior y vamos a aumentar esto y usaremos esto con las estadísticas más adelante. A continuación, despejaremos cualquier paso listo para la próxima pizza. CompletedSteps, restablece esto para que sea una matriz vacía. Entonces, finalmente, llamaremos a ClearCanvas. Esta fue la función que se configuró en el video anterior, que va a restablecer el lienzo y también eliminar el atributo disabled. A la página de índice. Dentro del área de cocina principal, también tenemos un botón con el que podemos vincular esto hasta. Agregaremos un EventListener a este elemento que ha ido a llamar a nuestra nueva función. Debajo de nuestra función documents.QuerySelector. Este botón. Si solo echamos un vistazo, esto tenía el DNI de los residuos. Agrega un EventListener, donde escucharemos el evento click, que va a llamar a nuestra función anterior. Probemos esto, salvamos y regresemos a nuestro juego y empecemos de nuevo. Selecciona un pedido. Haremos esto mal, sólo vamos a hacer clic en estos en el orden equivocado. Haga clic en residuos. Ahora se está restableciendo un lienzo y vemos que no tenemos este artículo dentro del horno. Esto ahora nos configura para el próximo video, donde comprobaremos si el chef ha dado los pasos correctos para hacer esta pizza. De no ser así, se volverá a llamar a esta función, pero esta vez de forma automática. 46. Comprobación de pasos: Esta función de pizza desperdiciada que acabamos crear también será útil una vez más, porque ahora vamos a comprobar que el chef ha dado los pasos correctos, o es decir, agregó los ingredientes correctos a la pizza antes de añadir esto al horno. Si se equivocaron esto, será entonces otra vez, una pizza desperdiciada. Sólo para decir esto, si entramos en nuestro juego, selecciona alguna de nuestras pizzas. Actualmente antes de añadir cualquiera de los ingredientes, podemos hacer click en el horno y añadir esto sin los ingredientes correctos. También podemos seguir adelante y sumar más de estos también. Para revisar los ingredientes, podemos crear una nueva función. Voy a hacer esto justo después de añadir esto al horno. Echa un vistazo a nuestra función llamada add to oven, que está un poco más arriba. Ha pasado un tiempo desde que hemos visto éste. Esto se agrega al horno. Justo después de esto, crearemos nuestra nueva función, que es los pasos completados. Dentro aquí, también tenemos que tomar el nombre de la pizza, que actualmente estamos comparando en contra. Podemos comprobar si tenemos los pasos correctos. Entonces pasando el nombre de la pizza, que agregaremos cuando llamemos a esta función. Esta función devolverá un booleano verdadero o falso dependiendo de si estos pasos son correctos o no. Es valor verdadero o falso determinará si podemos agregar la pizza al horno y lo llamaremos desde nuestra función add to oven. Salta dentro de la declaración if donde verificamos si tenemos un nombre de pizza, crea una constante para almacenar de nuevo el valor devuelto de nuestra función que veremos en tan solo un minuto. Llamaremos a esto se puede agregar al horno. Recuerde, este será o bien un valor verdadero o falso, y esto será igual a nuestra función llamada pasos completados. Recuerda que esto también necesita tomar en el nombre de la pizza, que hemos almacenado arriba en esta variable. Justo debajo de esto, luego creamos en nuestro objeto pizza para ir dentro del horno. Ahora estamos empujando esto a la matriz del horno. Pero justo antes de hacer esto, sólo queremos asegurarnos de que esto suceda si la variable puede agregar al horno es verdadera. Lo que haremos es cortar toda esta información de nuestro objeto hasta los pasos terminados. Pasar en una declaración if para comprobar si puede agregar el horno es igual a true. Si es así, pega esto de nuevo. Nuestra pizza ahora es capaz de ser agregada al horno. Hagamos una prueba rápida y verificemos que esto funciona. Entraremos en nuestra nueva función, y por ahora, simplemente devolveremos el valor si es cierto. Deberíamos poder agregar cualquiera de las pizzas actuales al horno. Probemos esto. Haga clic en el horno, y es obras. Pero ahora si detenemos el juego y volvemos falso, ojalá ahora deban bloquear todas las pizzas de ser empujadas al horno. Seleccionaré uno, y esto ahora bloquea toda la pizza de entrar en esta sección. Esto significa que ahora podemos sumar algunas condiciones reales para comprobar contra dentro de aquí. Para ello, necesitamos agarrar los pasos de toda la matriz de pizzas. Para empezar, tenemos que seleccionar realmente nuestros objetos de pizza. Aquí nos habíamos pasado al nombre de la pizza y si echamos un vistazo a nuestra matriz de pizzas en la parte superior. Vamos a usar este nombre para encontrar nuestra pizza en particular y luego devolver el objeto completo para poder acceder a estos pasos requeridos. Bajemos y hagamos esto ahora. Podemos mover las declaraciones de retorno, acceder a nuestra matriz completa de pizzas, y luego usar el método de búsqueda JavaScript para buscar a través de este nombre de pizza. Para ello, ejecutaremos una función para cada uno de los artículos dentro de nuestra matriz y guardaremos esto dentro de una variable llamada pizza. Este método find va a devolver un nuevo valor. Queremos comprobar si la pizza a la que estamos accediendo actualmente tiene una propiedad de nombre que es igual a nuestro nombre de pizza, y luego se almacenará este valor devuelto dentro de una constante llamada objetos de pizza. Lo siguiente que hay que hacer es agarrar los pasos de este objeto, y nuevamente almacenar esto dentro de una variable o constante. A éste se le llama los pasos requeridos, y vamos a establecer esto igual a nuestro objeto de pizza anterior. Filtra esto para solo guardar los pasos requeridos. Ahora si volvemos a subir a nuestro objeto pizza en la parte superior del guión, esta es la propiedad pasos requeridos que acabamos de acceder. Esta es una matriz de todos los valores. Ahora tenemos todos estos valores que se necesita para construir una pizza, y además si lo recuerdan de antes, desplácese hacia abajo a nuestras variables. También tenemos una variable llamada pasos terminados, a la que se suma como chef hace clic en cada uno de los ingredientes. Ahora necesitamos comparar estas dos matrices y comprobar que todos los pasos incluidos han sido atendidos. Además, si pensamos en esto para una pizza esté lista para entrar en el horno, no sólo los pasos terminados tenían que ser correctos, sino que también necesitan estar en el mismo orden. Por ejemplo, si tengo la masa, el queso, y la salsa en ese orden particular, técnicamente coincidiría con una margarita. Pero no queremos que la fuente esté encima del queso ni la masa que se añada en última instancia. Podemos comprobar esto usando un método de matriz JavaScript llamado cada. Volver a nuestra función, lo que voy a hacer es escribir esta función y luego podemos hablar de lo que está pasando justo después. Podemos acceder a nuestros pasos requeridos, que es la matriz de todos los pasos requeridos para crear una pizza y luego llamar este método que acabamos de mencionar, que fue todos. Esto ejecutará una función para cada uno de nuestros valores de matriz. Pasando como argumentos, el elemento, el índice, y luego devolver un valor, que es si el elemento es igual a los pasos completados como en el índice. Además, finalmente, solo almacenaremos este valor devuelto dentro de una constante llamada chequeos. Sólo para explicar lo que estaba pasando aquí, vamos a recorrer todos los pasos requeridos, y luego almacenaremos esto dentro del valor del elemento. Por ejemplo, en el primer paso requerido, que generalmente es masa de papel, este sería el valor de este elemento. El número de índice sería por supuesto cero. Entonces a continuación revisamos nuevamente el primero si este valor de masa de rollo es igual al primer valor en pasos terminados. Si se ha creado esta pizza, ambos de estos valores deben ser iguales a rodar masa. En el segundo bucle, esto generalmente sería igual a la salsa. Entonces verificamos si la fuente es el segundo valor y así sucesivamente. Cada método devolverá verdadero si todos ellos son un partido o falso si uno solo o más fallan. Esta es la prueba principal para comprobar si la pizza es correcta antes de entrar al horno. Si quisiéramos, simplemente podríamos usar esto como nuestro y solo comprobar pero si usamos esto, el chef no sabe exactamente qué ingredientes ha causado el problema. No sabrá si usó demasiados ingredientes, no suficientes ingredientes ni los equivocados. Para ayudar con esto, voy a configurar múltiples condiciones para que podamos dar diferentes mensajes de error. Esto pasará en algunas declaraciones if para realizar algunos cheques. Pero el primero, comprobaremos si se han agregado demasiados ingredientes. Queremos saber si la longitud de los pasos terminados es mayor que la longitud de los pasos requeridos. Si se completan los pasos, la longitud es mayor que los pasos requeridos. Si es por ahora solo colocaremos en un registro de consola y diremos demasiados. Copia esto, pega esto a continuación, y cambia esto al símbolo menor que. Podemos comprobar si no se han utilizado suficientes ingredientes. Si esto sucede dirá no lo suficiente dentro del registro de la consola. El tercero comprobaremos si ambos valores son iguales, así que solo asegúrate de que esto esté escrito correctamente. Verificaremos si los pasos cumplidos son iguales a los pasos requeridos. También comprobaremos si los ingredientes son incorrectos. Podemos hacer esto con nuestra variable checkSteps y comprobando si el valor es igual a false agregando un exclamación. Básicamente hemos dado la cantidad correcta de pasos pero los ingredientes son incorrectos, pero esto registrará en la consola el valor de ingredientes incorrectos. Echemos un vistazo a esto en la consola. Abre las herramientas de desarrollador. Vamos a empezar de nuevo. Selecciona una de nuestras pizzas y vamos por pepperoni que es simple. Tenemos que rodar la masa con salsa de pizza. Ojalá éste agregue demasiados ingredientes, haga clic en demasiadas opciones. Intenta agregar al horno, veo demasiados, refrescar. Hagamos esto una vez más, margarita. Sólo haremos clic en uno de estos ingredientes. En el horno esto no son suficientes ingredientes, y luego el tercero y final comprobaremos si hemos incluido los ingredientes equivocados con la cantidad correcta de pasos. Vamos a probar esto. Sabemos que el pepperoni tiene la masa de rollo, tiene la salsa, el queso, y pepperoni, por lo que necesitamos dar cuatro pasos pero asegurarnos de que estos sean incorrectos. Pepperoni, agregaré un poco de jamón a esto. Asegúrate de que estemos en cuatro pasos. Da click en el Horno y podemos ver que hemos usado los ingredientes equivocados. Bueno. Tenemos nuestros mensajes y estos también ahora necesitan ser mostrados al usuario, y podemos hacer esto si pasamos a nuestro index.html. Echemos un vistazo. Para nuestra área de Mensaje tenemos este div circundante y nuestros mensajes para el chef, y luego esta p con el id del mensaje. Podríamos escribir estos mensajes directamente en cada una de nuestras declaraciones IF y los pondré en la pantalla pero en su lugar vamos a crear una función independiente para manejar estos ya que estaremos repitiendo estas múltiples veces. Agreguemos nuestra función llamada showErrorMessage. Pasa el mensaje que queremos mostrar. si eso es todo seleccionaremos nuestra área de Mensaje que acabamos de ver dentro de la página de índice con document.QuerySelector. Pase el id del mensaje, establezca el contenido InnerText igual a la variable de mensaje. Ahora una vez que el chef ha cometido un error queremos que esto desaparezca después una cierta cantidad de tiempo y podemos hacerlo con un SetTimeout. Pasar esto en el que toma una función , separada por coma. El segundo valor va a ser el retardo de tiempo en milisegundos, así que digamos dos segundos. Abre el cuerpo de la función. Todo lo que haremos dentro de aquí es copiar este área de Mensaje, pega esto en. Vamos a establecer esto para que sea una cadena vacía. Ahora podemos llamar a esta función llamada showErrorMessage y colocar registros de consola justo arriba. Pega esto en, agrega en una cadena. También has usado demasiados ingredientes. Copia esto. El segundo no has usado suficientes ingredientes, y el tercero has usado los ingredientes equivocados. Vamos a probar esto. De nuevo, haremos la misma prueba que antes. Selecciona un pedido, por lo que haremos muy pocos. No has usado suficientes ingredientes , entonces usamos demasiados. Eso es bueno. Entonces el último cuando usamos los ingredientes equivocados, así que pepperoni. Agregaré cuatro pasos; rodar masa, salsa de pizza, y pimientos, y ahí vamos. Lo último que hay que hacer es asegurarse de que estas pizzas solo se suman al horno si los ingredientes y los pasos son correctos. Actualmente como miramos anteriormente este controlado con esta declaración IF, y esto sólo se sumará al horno si esto es cierto. Tenemos que cortar este valor verdadero o falso, devolverlo de nuevo de la función overblow llamada StepsCompleated. Actualmente esta función se está ejecutando y estamos haciendo todos nuestros cheques pero aún no estamos devolviendo un valor verdadero o falso, por lo que necesitamos agregar esto en la parte inferior. Sólo vamos a querer que esto vuelva true también si aún no se ha alcanzado la capacidad del horno. Anteriormente configuramos variables llamadas horno y también hornoCapacidad que podemos ver justo aquí. Tengo el horno que es una matriz vacía y también el hornoCapacidad también. Nos fijamos esto para que solo sostenga seis pizzas. También queremos hacer un cheque para asegurarnos de que no tengamos demasiadas pizzas en el horno antes de devolver el valor de true. Vamos a cortar esto. Agrega una declaración IF donde comprobaremos si el horno.length es menor que la capacidad del horno que actualmente es seis. Si es entonces volveremos true, si no volveremos falso. Ya casi estamos ahí pero también necesitaremos cuidar lo que pasa si hemos usado los ingredientes equivocados, porque si estropeamos una pizza también queremos ejecutar nuestra función WastedPizza la cual nosotros creado previamente. Podemos hacer esto dentro de nuestras declaraciones IF. Si hemos usado demasiados ingredientes esta es una pizza incorrecta, ejecute nuestra función WastedPizza, luego regrese de esto. El siguiente paso es el medio es comprobar si hemos usado no suficientes ingredientes. obstante, no queremos ejecutar la función WastedPizza porque aún pueden tener la oportunidad de agregar los ingredientes correctos después. Todo lo que hacemos es volver fuera de esto. Para el último donde he usado los ingredientes equivocados nuevamente queremos ejecutar la función WastedPizza, volver fuera de esto. Esto ahora debería dejarnos listos para darle una oportunidad a esto cuando creamos la función WastedPizza abajo en la parte inferior del video anterior. Echemos un vistazo a esto. Esto también borra el Lienzo. Sabemos si esta función se está ejecutando y también sabremos si ha disparado el valor de retorno de true porque deberíamos ver una pizza en el horno, por lo que refrescaremos y probaremos esto. En primer lugar vamos a seleccionar el pepperoni. Le daré a esto un go por los ingredientes correctos : la masa, la salsa, el queso, el pepperoni, y esto el horno. Esto es bueno. El está [inaudible] ahora siendo despejado así que vamos a probar uno más, el jamón y la piña. Para éste lo haremos incorrecto. Agregaremos el ingrediente equivocado, por lo que no demasiados. Todo esto parece funcionar porque esta pizza no se agrega al horno sin embargo el lienzo en la parte inferior todavía está despejado y listo para agregar una pizza nueva. 47. Completar pedidos: Cuando hayamos completado todas las pizzas en cualquier pedido dado, sería una buena idea completar el pedido para que podamos pasar a la siguiente. Esto es en lo que nos enfocaremos en este video. Justo antes de esto, quiero arreglar un pequeño problema. Este tema, si pasamos al navegador, e Inicia nuestro juego. Haga clic en cualquiera de estos pedidos. El tema es que podemos hacer click en estos ingredientes antes de que incluso hayamos seleccionado una de nuestras pizzas. Esto no sólo deja nuestro proyecto sintiéndose un poco extraño, también significa que no podemos agregar una pizza al horno porque revisamos estos ingredientes seleccionados contra el clicked on pizza. Para solucionar esto, todo lo que tenemos que hacer es comprobar si la sección actual de pizza está configurada cuando hacemos click en algún ingrediente. Para ello, echa un vistazo a la función StepComplete, así que voy a hacer una búsqueda. Este es el que necesitamos, justo aquí. En primer lugar, antes de comprobar si se completa un paso, podemos hacer una declaración if en la parte superior. Esto va a comprobar si tenemos una pizza seleccionada. Donde podemos hacer esto, si vamos a nuestro Index.html al área de cocina, justo aquí, podemos ver tenemos este lapso con el ID de la pizza actual. Cuando seleccionamos una de las pizzas u ordenamos, entonces se coloca en esta sección. Podemos comprobar si tiene algún contenido dentro de estos elementos. Lo hacemos seleccionando esto con document.QuerySelector. Esto es un ID, así que pasa en el hash. El ID fue current_pizza. Podríamos comprobar si hay algún texto interior dentro de aquí, o si es igual a una cadena vacía. Si esto está vacío, tenemos un tema, no hemos seleccionado una pizza. Lo que vamos a hacer es acceder a nuestra función llamada showErrorMessage, pasarla en una cadena de primero, seleccionar una pizza en la que te gustaría trabajar, y luego, volvemos fuera de esto, así que no código a continuación se ejecuta. Vamos a darle una prueba. Podemos ir al navegador, Iniciar nuestro juego, y seleccionar uno de nuestros pedidos. Ahora antes de seleccionar una de nuestras pizzas, intentaremos agregar ingredientes como masa de rollo, y vemos nuestro mensaje de error justo aquí. El paso ya no está marcado tan completo como podemos ver por el hecho de que este botón no está deshabilitado. Ahora a completar nuestro pedido. Para esto, por ejemplo, esto tiene tres pizzas. Entonces queremos hacer los tres de estos, y luego completar nuestro pedido. Ahora para esto, antes de dejar que el jugador lo complete, sería bueno primero comprobar que en realidad han creado suficientes pizzas para completar el pedido. El paso 1 será almacenar en algún lugar el número de pizzas en cada pedido. Hay muchas maneras en que podríamos acercarnos a esto, pero lo voy a almacenar como un atributo cuando creamos el pedido. Echa un vistazo a la función llamada CreateListofPizzas , que es ésta justo aquí. Dentro de aquí donde construimos nuestros elementos particulares, tenemos un palmo con la cantidad actual de pizza. Por ejemplo, esto podría ser dos margheritas o un pepperoni. Ahora, podemos agregar la cantidad de cada línea de pedido a una variable. Vamos a crear esta variable justo arriba, para que podamos hacer un seguimiento de esto. pizzas totales enteras, e inicialmente fijaremos esto para que sea un valor de cero. Luego restableceremos esto cada vez que creamos nuestra lista de pizzas estableciendo esto para que sea un valor de cero. Entonces, justo debajo de esto, podemos agregar la cantidad actual de pizza a la variable total de pizzas existente. Sólo para aclarar lo que estamos haciendo aquí, si tenemos un pedido, por ejemplo, esta primera tiene tres pizzas, ésta tiene tres, y ésta tiene cuatro. Lo que estamos haciendo es que estamos haciendo un looping sobre todas las pizzas, y luego agregando en esta cantidad a nuestra variable. Entonces tenemos este total para el orden, que podemos referirnos en el futuro. Como se mencionó anteriormente, vamos a utilizar esta cantidad total de pizzas, y añadir esto a nuestro pedido como atributo. Podemos hacer esto cuando creamos el pedido. Tenemos que echar un vistazo a la función llamada CreateSingleOrder, que está justo debajo. Justo debajo de nuestra lista de pizzas, lo que vamos a hacer es agarrar el envoltorio de pedidos, vamos a establecer atributo, que hemos usado en el pasado. El atributo, este va a ser un atributo personalizado, no es uno de los incorporados que ya tenemos. Generalmente, al agregar nuestros propios atributos personalizados, tenemos el prefijo de datos. Se trata de datos, pizzas totales, y luego el valor, que es nuestra variable anterior que creamos llamada pizzas totales. Lo que básicamente estamos haciendo aquí es cada vez que creamos un nuevo orden, estamos agregando un atributo de datos llamado data-total-pizzas, con el número total de pizzas en el pedido. Si guardamos esto, podemos saltar a las herramientas de desarrollador y comprobar que todo esto está funcionando. Refresca, y luego Inicia nuestro juego. Ahora si seleccionamos uno de nuestros pedidos, echa un vistazo a la clase de envoltura de pedido, y puedes ver que cada uno tiene este nuevo atributo llamado data-total-pizzas, y la cantidad para cada uno de estos órdenes. Esto significa que ahora tenemos el número total de pedidos que necesitamos crear. Anteriormente, si echamos un vistazo a las variables, también creamos una variable llamada pizzas completas para orden, que tenemos aquí. Esto se incrementa cada vez que agregamos una nueva pizza al horno, dándonos los dos valores que ahora tendrán que comparar. Para ello, también necesitamos crear un botón para completar el pedido, que el chef puede desencadenar dentro de la cocina. Este botón activará una función, y podemos configurarla en la función de selección de orden actual. Eche un vistazo a esto, seleccione el orden actual. Voy a crear un botón dentro de aquí, porque aquí es donde configuramos el orden actual en el que estamos trabajando. Abajo a la parte inferior, justo debajo de esta última línea de código, pero aún dentro de la sentencia if, y debajo de esto, y crearemos una constante llamada CompleteButton. Desde temprano, tenemos la función llamada BuildElement, que creará un nuevo HTML nuevo para nosotros. El primer botón es el tipo de elemento que queremos crear, que es un botón y el valor que es el texto de complete. Entonces, podemos acceder a este botón, añadir un nombre de clase de complete_btn. Este botón necesita activar una función para que podamos agregar un oyente de eventos, así completeButton.addeVentListener. Bueno, ahora es por un click, que va a desencadenar una función que vamos a crear en tan solo un momento llamada CompleteOrder. Por último, tendremos nuestro orderDiv, que es esta corriente trabajando en sección. Nosotros agarramos esto, y luego podemos agregar AppendChild. Pásalo en nuestro botón Completo. Probaremos todo esto agregando una alerta simple dentro de esta función. Cree la función llamada CompleteOrder. Ahora alerta con el texto de completa. Vamos a saltar al navegador y comprobar que esto funciona. Refresca y haz clic en el “Inicio”. Selecciona uno de nuestros pedidos. Ahí está nuestro nuevo botón Completar el cual activará una alerta al hacer clic en. Bueno. Ahora sabemos que esto funciona y se ha disparado, podemos eliminar esta alerta, y luego, podemos hacer nuestra comparación entre el número total de pizzas en el pedido y el número que hemos creado actualmente. En primer lugar, vamos a agarrar nuestro pedido actual, almacenamos esto dentro de una constante llamada CurrentOrder. Voy a agarrar esto con el documento.QuerySelector. Ahora bien, ¿ cómo vamos a seleccionar el orden actual en el que estamos trabajando? Bueno, si recuerdas de antes, cuando hicimos clic en el botón “Inicio”, todos los pedidos dentro de la barra lateral, si seleccionamos uno de esta clase de order_wrapper, y luego, cuando hacemos click en uno, se ha trasladado a la sección de trabajo. El trabajo en sección también tiene un ID. Si nos desplazamos hacia arriba, esta es la sección, justo aquí. Podemos agarrar la envoltura de orden que se contiene dentro de esta trabajando en sección. Podemos hacer esto pasándolo en un selector CSS. El trabajo en sección, agarrando nuestra sección justo aquí. Entonces podemos agarrar nuestra sección dentro, que tiene esta clase de envoltura de pedidos. Podemos hacer esto igual que con CSS, usar el símbolo mayor que, y con esto siendo una clase, usamos el.order_wrapper. Seleccione este pedido almacenado. Recuerda dentro de este pedido agregamos el número total de pizzas para este pedido, dentro de un atributo personalizado. Podemos usar get atributo, pasarlo en el nombre del atributo que le dimos esto, y esto fue data-total-pizzas. Almacenar esto dentro de una constante llamada TotalPizzaOnOrder. Entonces, finalmente podemos hacer nuestro cheque a continuación dentro de una declaración if. Tenemos el número total de pizzas que deberíamos tener, y también tenemos la variable almacenada de anteriormente llamada pizzas completas para orden. Podemos comprobar si pizzas terminadas para pedido es menor al valor anterior llamado pizzas totales en orden, si lo es, tenemos un error, por lo que podemos pasarlo en nuestra función llamada ShowErrorMensaje con el texto de “No has hecho suficientes pizzas para completar este pedido”. Entonces regresa fuera de esto. Vamos a darle una oportunidad a esto. Guarde esto y Refresca. Lo que tenemos que hacer ahora es Empezar nuestro juego. Para nuestro primer pedido, esta cuenta con tres pizzas, así que pincha sobre esto. Ahora si tratamos de agregar uno al otro, y vamos por el jamón y la piña. Crearemos el primero. Agrega esto al horno. Sólo tenemos uno, da click en “Completar”. Ahora recibimos el mensaje de error dentro de aquí. Esto ahora todo parece estar funcionando. Podemos pasar a retirar realmente el pedido una vez que esté completo. Justo debajo de la declaración if, queremos agarrar nuestro pedido actual que hemos almacenado desde arriba, y eliminarlo de la sección working on con el método remove. Esto en realidad eliminará el pedido de esta sección, pero esto en realidad sólo eliminará el pedido que incluye el título y las pizzas, aún tenemos que encargarnos de quitar el botón. La forma en que puede agarrar este botón es recordar que esta función de orden completa se está activando desde nuestro manejador de clics en el botón, por lo que podemos pasarlo en lo real, poner en información con el evento. Podemos acceder a esto con e.target. Almacenamos esto dentro de una variable llamada Botón Completo. Al igual que arriba, podemos acceder a esta variable, y llamar al método llamado remove para eliminar esto del DOM. También vamos a sumar algunas estadísticas a este juego más adelante, como el número de pedidos terminados. Nos vamos a preparar para esto creando una variable de en la parte superior. Con el resto de ellos, diremos dejar que los pedidos terminados sean un valor inicial de cero. Después vuelve a bajar a nuestra función de pedido completa donde podemos incrementar esto por el valor de uno, lo que los pedidos terminados, más, más. Ahora, tenemos este pedido terminado, también podemos restablecer esta variable llamada pizzas terminadas para su pedido. Podemos restablecer esto para que sea el valor de cero, por lo que estamos listos para el siguiente orden. Por fin salvaremos esto y pasemos a nuestro juego, y podemos probar esto. Haga clic en “Inicio”. Lo que buscamos es crear la cantidad correcta de pizzas para completar este pedido. Primero, el jamón y la piña completarán esto, por lo que tenemos uno, y también tenemos dos pepperonis para crear en esto. Vamos a probar uno más. Deberíamos ahora tener tres en el horno y tres que también asociados a este orden. Haga click en “Completar”, y esto ahora elimina nuestro pedido del área de trabajo en. 48. Eliminación de órdenes: Al probar este juego, hasta el momento es posible que haya notado un problema, al hacer clic en el botón “Inicio”, obtenemos los pedidos entrando, y luego cuando hacemos clic en una de las órdenes para trasladarlo a la trabajando en sección, cuando se regeneran los pedidos, el mismo orden se sigue colocando en la lista. Queremos quitar orden 1 ya que estamos trabajando en esto. Esto sucede por cada uno en el que hacemos click. Para solucionar esto, podríamos eliminar este orden de la matriz de pedidos. Para ayudar a identificar en qué orden hemos hecho clic, podemos agregar un atributo de número de pedido a cada uno. De manera similar, donde entramos en la función CreateSingleOrder, recuerda temprano agregamos este atributo personalizado llamado data total pizzas. Esto nos ayudó a identificar cuántas pizzas totales estaban en el pedido, por lo que pudimos comparar esto con la cantidad que creamos. De manera similar a esto, también vamos a agregar nuevos atributos personalizados con el número de pedido, para que podamos identificar en cuál hemos hecho clic. Si echamos un vistazo arriba, ya tenemos acceso a este ID de pedido. Va a ser bastante sencillo hacer esto. Lo que vamos a hacer es duplicar esta línea para crear un nuevo atributo. Copia y pega éste en. Crearemos un nuevo atributo. Nuevamente, con el prefijo de datos personalizado, éste es el número de orden de datos. Pasando este ID de pedido. Entonces antes de ir más allá vamos guardar esto y probar esto en el navegador, abriendo las Herramientas de Desarrollador. Ese es nuestro juego. Ahora si seleccionamos uno de nuestros pedidos, este es su OrderWrapper. Tenemos la orden de datosNúmero de uno, tenemos el pedidoNúmero de 2, 3, 4, 5, y así sucesivamente. Con esto ahora en su lugar, podemos pasar a nuestro código y eliminar este orden de la matriz de pedidos. Un buen lugar para hacer esto será en nuestra función llamada selectCurrentOrder. Echa un vistazo a esto. Esta es una función que se ejecuta cuando hacemos clic en cada pedido. Usando esta constante de OrderWrapper, ya tenemos acceso al pedido de clics. Dentro de la declaración if a continuación, podemos recuperar el atributo de número de pedido del OrderWrapper, y luego llegar a trabajar con la eliminación de esto. Abajo en la parte inferior, comenzaremos recuperando este número de pedido, instalaremos esto dentro de una constante llamada OrderNumber. Establece esto igual a nuestro OrderWrapper. Dot getAttribute. [ inaudible] datos del cliente OrderNumber. Ahora podemos acceder a nuestra matriz de pedidos. Podemos usar el método de matriz JavaScript llamado Filter, que puede tomar en una función, y para mantener esto corto, solo voy a colocar en una función de flecha. En cada orden, en la variable de orden. Entonces queremos comprobar si el ID de pedido en particular no es igual a nuestro número de pedido anterior. Esto va a filtrar todos nuestros pedidos y sólo dejar pasar los pedidos en los que no se han hecho clic. Esto nos dará una nueva matriz con todos los valores excepto éste. Lo que entonces podemos hacer, es establecer nuestras órdenes para que sean iguales a esto, que anulará la matriz original. Volvamos al navegador y probemos esto . Comienza el juego. Selecciona nuestro primer pedido. Ahora regeneremos. Ahora cuando ahora se regeneran nuestros pedidos, ya no vemos el orden 1 en esta barra lateral. 49. Actualización De La IU Y Las Estadísticas: Durante la creación de este juego hemos mantenido un seguimiento de algunos números, como las pizzas terminadas, las pizzas desperdiciadas, y también los pedidos terminados también. Estos ahora se van a utilizar para crear una sección stat al final del juego. Esta área aparecerá en lugar de la sección de método. Entonces ocultaremos esta sección y la reemplazaremos cuando ya no sea necesaria al final del juego. El apartado stat en realidad ya está dentro de nuestra página de índice. Si entramos aquí justo en la parte superior dentro de la sección principal, tenemos esta área donde vamos a actualizar todas estas tres áreas con nuestras variables. Esto también reflejará nuestras funciones de inicio y fin del juego y se moverá por todas las áreas que están mostrando y ocultando elementos en algunas funciones personalizadas. Actualmente, nuestro área de estadísticas no se está mostrando porque si entramos en nuestra hoja de estilo, configuramos esto para que sea el tipo de visualización de ninguno. Vamos a saltar a nuestra página de índice y si echamos un vistazo, comenzará la función de juego justo aquí. Esta área es la encargada de mostrar y ocultar nuestros botones de inicio y fin una vez que el juego haya comenzado o terminado y además si nos desplazamos hacia abajo, también agrega este mensaje en el inicio del juego, que es entonces retirado después de tres segundos. También la función final del juego luego restablecerá el botón Inicio y luego ocultará el botón End. Para re-factorizar estas dos funciones, justo debajo del juego de inicio, moveremos a una nueva función llamada IU del juego de inicio. Entonces desplázate hacia arriba. Recortaremos nuestras dos áreas que están mostrando y ocultando los botones en nuestra interfaz de usuario. Entonces también nuestro área de mensajes con el tiempo de espera establecido para este fuera. Cuando esto está adentro y luego podemos llamar a una función de interfaz de usuario de inicio justo arriba en lugar del código, que se recortará. De manera similar justo debajo del final del juego, crea una nueva función. Esta es la interfaz de usuario de fin del juego. Ahora lo que tenemos que hacer por éste es copiar un recorte ambas de estas líneas en la parte inferior, y éstas en la nueva función y luego llamar a esto en su lugar. Probemos esto, sobre el navegador y haga clic en el “Juego de inicio”. Esto ahora se retira y vemos el juego final. Ahora si hacemos clic en “Finalizar”, ahora se muestra el botón de inicio. Nada diferente, solo un re-factor para mantener nuestro código un poco más organizado. Ahora también podemos utilizar estas dos nuevas funciones para mostrar y ocultar el área de estadísticas. Comenzaremos con la interfaz de usuario del juego de inicio en la parte inferior document.QuerySelector. Agarra la sección de método original que podemos ocultar accediendo al style.display y establece esto igual a la cadena de bloque, duplica esto, y luego podemos hacer lo contrario con nuestras estadísticas . Queremos que el área de estadísticas se oculte, cambiará esto para que sea el valor de ninguno. Hacemos esto porque solo queremos que estas estadísticas aparezcan al final del juego pero lo haremos ahora revirtiendo ambos valores, en lugar de la interfaz de usuario final del juego, el área de método es va a estar oculto para que podamos revelar el área de estadísticas estableciendo esto para que sea el valor del bloque, guarde esto y pruebe esto. Ir al juego, vemos el área del método para que podamos ver exactamente lo que estamos haciendo con cada pizza y el juego y ahora vemos nuestras estadísticas. Como hemos visto antes, esta área de estadísticas es solo el HTML, por lo que necesitamos encargarnos de agregar nuestros valores variables a cada uno de estos tramos. Salta a nuestro index.js dentro del final del juego UI document.QuerySelector. El primero de nuestros abarca la idea de pedidos terminados, donde podemos establecer el contenido interno del texto para que sea igual a nuestra variable con el mismo nombre. Copia y pega esto dos veces más. El tramo medio se completó pizzas. Nuevamente con el nombre de la variable coincidente. El tercero fue desperdiciado pizzas y pizzas desperdiciadas variables. Estos valores de variables libres también deben restablecerse al inicio de cada juego. El inicio de la interfaz de usuario del juego se restablece todos estos valores. El primero fue los pedidos terminados cero, las pizzas terminadas cero, y también las pizzas desperdiciadas 2. Probemos esto. Necesitaremos crear algunos nuevos pedidos iniciar el juego. Jamón y piña en el horno, y pepperoni. También desperdiciamos algunas de estas pizzas por lo que tenemos algunas estadísticas, termina el juego. No veas ninguna actualización en las estadísticas vamos a pasar a nuestro código y echa un vistazo a esto. ¿ Dónde actualizamos esto? Actualizamos esto al final de la interfaz de usuario del juego. Estas tres líneas. Podemos ver aquí que el editor de texto ha destacado un tema con los tres puntos. Tenemos pedidos completos los cuales deben ser cumplimentados, revisa la variable. Completa todo esto. Esto parece el correcto, el resultado. Orden número 1, que es jamón y piña, agregue esto al horno y luego dos pepperonis , complete el pedido. A continuación trataremos de desperdiciar un pedido, agregaremos unos pepperoni y jamón, añadimos esto al horno, esto se está desperdiciando. Ahora, haga clic en el “Fin”, ver un pedido completado, que es correcto. En cuanto a pizzas terminadas recuerda que esta variable solo se actualiza cuando el horno real haya terminado de cocinar. Una vez que el temporizador, que está configurado para ser de 20 segundos, sólo después de que este tiempo de cocción haya terminado se agregará esto como una pizza terminada. También desperdiciamos una pizza, así que esto es bueno. Casi ahora hecho con este video, sí tenemos un par de cosas que arreglar también. Si hacemos clic en el botón “Inicio”, veremos exactamente qué es esto. Echamos un vistazo en el área de cocina, tenemos 11 a diferentes ingredientes y además el temporizador está en 271 segundos pero si hacemos click en “Start”, el tiempo vamos a seguir desde ahí más que reiniciando y los ingredientes también se duplican. Vamos a arreglar estos dos problemas más en nuestro inicio de la interfaz de usuario del juego. En primer lugar, restableceremos nuestros ingredientes seleccionando el área HTML con selector de consultas. Selecciona los ingredientes y restablece esto estableciendo el innerHTML para que sea igual a una cadena vacía. También se encargará del temporizador de cuenta atrás estableciendo la variable de tiempo de cuenta atrás para que sea igual a la longitud del juego. Prueba esto. También es el juego, jamón y la piña, añadir esto al horno. Ahora si terminamos, arrancamos el temporizador que se ha restablecido. Sólo vemos el único conjunto de ingredientes. Por último, sólo para terminar el área de estadísticas, he añadido en una animación de fundido a nuestro CSS. Si entramos en nuestra hoja de estilo, echemos un vistazo a la decoloración. Creando una animación sencilla para desvanecerse en el área de inicio al final del juego. Todo lo que tenemos que hacer es agregar esto como nombre de clase a nuestro elemento. Para mirar el final de la interfaz de usuario del juego, duplica cualquiera de estos, agarrar todos los arranques. Esta vez estableceremos el nombre de la clase para que sea igual a la decoloración. Bien, vamos a darnos una prueba final dentro del navegador. Inicia el juego, selecciona un pedido, completa el primero, pepperoni. Completa un par de estas pizzas para finalmente en nuestras estadísticas , terminar el juego. Bueno. Con eso en su lugar, ahora voy a llamar a este proyecto hecho. Pero probablemente sean algunas cosas que se pueden mejorar y algunos pequeños temas que también pueden necesitar ser resueltos. Pero este proyecto se trata de aprender JavaScript. Creo que nos ha dado mucho con qué practicar y una buena oportunidad de mostrar cómo todas estas pequeñas cosas que has estado aprendiendo durante esta clase, todas trabajan juntas para crear algo mucho más grande . 50. Introducción Al Alcance: Una parte importante pero a menudo confusa de JavaScript es el alcance. Alcance a lo sumo básico es una forma de colocar variables en grupos. Cada grupo permite una cierta cantidad de acceso. Esto significa que podemos mantener algún control sobre lo que tiene acceso a nuestras variables. Esto tiene sentido porque las variables contienen todas nuestras piezas de datos importantes. ¿ Por qué querríamos que se cambiaran a accedidos cuando no necesitan serlo. Aquí vemos un ejemplo sencillo. Declaramos una variable llamada score. Después tenemos una función para actualizar la partitura, registrarla en la consola. Todo está completamente bien aquí. Pero ¿qué pasa con esto sin embargo, decidimos sumar un bono de 10 puntos al marcador. Esta variable se crea dentro de la función y luego se inicia sesión en la consola. Nuevamente, aquí no hay problemas. En la consola se mostrará un valor de 11. Los problemas comienzan cuando tratamos de acceder a esta variable bonus fuera de la función. Esto causaría un error con un mensaje a lo largo de las líneas de bono no se define. Sabemos que está definido porque vemos que no es accesible por el alcance. Esto se remonta a estos grupos se colocan variables en. Dado que la variable bonus se crea dentro de la función a diferencia de la puntuación. acceso a esto está restringido a todas las funciones. Pero como sabemos con JavaScript, eso nunca es solo eso. También hay algunas otras cosas que necesitamos entender. Por primera vez en mucho tiempo, podemos saltar a una nueva sección, y esta es la número 9 y luego saltar a la primera lección, que es introducción al alcance, que tiene un index.html. Para controlar el nivel de acceso a una variable depende de un par de factores. Como acabamos de ver, la ubicación en nuestro programa donde declaramos la variable y también el tipo de variable que creamos también. Podemos crear variables con var, let, y const y estas también tienen un efecto en el alcance también. Este es el mismo ejemplo que acabamos de mirar, donde declaramos una puntuación usando la palabra clave var fuera de la función. Entonces dentro de la función actualizamos esta variable. Agregamos un bono y luego registramos esto en la consola. Vamos a saltar a la consola. Podemos confirmar lo que acabamos de ver. Ábrenos y esperamos el valor de 11. Esto funciona porque la variable score se declara en el nivel superior de nuestro programa y esto no significa que necesite colocarse físicamente en la parte superior, al igual que está aquí. Simplemente significa que no está anidado ni declarado dentro de otra cosa, como una función. Esto significa que está en el ámbito global y es accesible globalmente. Si tratamos de acceder a la variable bonus fuera de la función de donde fue declarada. No hemos declarado dentro de aquí. Veamos qué pasa abajo en el fondo. Registro de consola de colocación, una variable de bono, que luego devuelve un error de bono no está definido. Esta variable bonus está restringida a solo ser accedida dentro de esta función. Porque esta función también tiene su propio alcance. Esto puede ser útil para variables cuando no, no necesitamos usar en otro lugar. Nos da la seguridad de conocer otras secciones de nuestro código no pueden modificar estos valores. Este ámbito de función también significa que podríamos crear múltiples variables con los mismos nombres, pero dentro de función diferente y si lo necesitamos para hacer esto, serían completamente independientes. También podemos ver este nivel de acceso dentro de la consola del navegador también. Si primero eliminamos esta consola log refresh para borrar este navegador. Entonces si escribimos la palabra score dentro de aquí e ingresamos, esto devuelve el valor de uno. Esto es correcto porque tenemos el valor inicial de uno y luego nuestra función se ejecuta y aumenta esto para ser el valor de uno. Todo esto funciona porque esta variable es global. Pero a lo que tratamos de acceder a nuestro bono que está encaminado a esta función. Vamos a probar esto. Entra y vemos el mismo mensaje de error que teníamos desde el registro de la consola. Junto con estas funciones, estas variables globales también están disponibles en otras sentencias de bloques, como for loops y if sentencias. Vamos a probar una declaración if justo debajo de nuestra llamada de función. Si puntuación, coloque en un registro de consola con el valor de puntuación y esto debería funcionar como se esperaba. Esto también se aplica a otras declaraciones de bloque también. Las declaraciones de bloque son básicamente secciones envueltas en llaves rizadas por lo que tenemos la función que tenemos aquí. Tengo las afirmaciones if, que también tiene estos tirantes rizados, pero también cosas como para bucles y while loops también. Resumen. JavaScript tiene el concepto de alcance para permitirnos establecer cuánto acceso tenemos a una variable como este ejemplo, puntuación se declara en la sección más exterior de nuestro código, lo que significa que está en el ámbito global. puede acceder a variables globales como esta en cualquier lugar, incluyendo dentro de los bloques de código envueltos en llaves rizadas es decir funciones y if sentencias. Lo contrario es cierto aunque cuando declaramos una variable dentro de una función, esto tiene alcance de función, y no estará disponible fuera de este bloque. Por lo tanto, proteger la variable de ser actualizada o eliminada de otra parte. 51. Alcance de anidación: Hasta ahora vemos que el alcance sólo parece funcionar de una manera, de fuera a interior. Las variables declaradas en la parte superior, como esta variable de nivel global, están disponibles dentro de otras funciones o bloques como esta función aquí. Podemos continuar anidando otras declaraciones dentro de otras, y el alcance continúa de la misma manera. El acceso se pasa de arriba y abajo a cada nivel, sin embargo, las nuevas variables declaradas dentro de los nuevos bloques siguen siendo restringidas. Efectivamente no se te pasa nuevo a ningún nivel más alto. Al ver esto en el video anterior donde tratamos de acceder a esta variable bonus fuera de esta función y en el ámbito global. anidamiento de alcance se conoce como alcance léxico en JavaScript y muchos otros idiomas. Echemos un vistazo a cómo se ve esto en acción. Para empezar, tenemos la misma configuración que anteriormente. En primer lugar, vamos a cambiar este registro de consola, incluir el texto de la función interior. Hacemos esto así que quede un poco más claro porque ahora vamos a estar extendiendo este código, entonces todavía está dentro de esta función podemos anidar un bloque adicional, como una declaración if. Una declaración if, donde podemos comprobar si el bono es verdadero, y si lo es, basado en un nuevo registro de consola con el texto de las sentencias inside if. Entonces podemos anexar al final la variable de aguinaldo. Ahora estamos dentro de una declaración de bloque anidado. Tratamos de acceder a nuestra variable bonus desde el nivel anterior, entonces, ¿qué crees que va a pasar? Bueno, probemos esto. Asegúrate de estar dentro de la sección de ámbito de anidación y esto está abierto en el navegador. Refrescar. Podemos ver como se esperaba, el código de función interior se ejecutará porque no hay nada que detenga esto. Entonces un nivel abajo dentro de la instrucción if, no sólo se ejecuta el registro de la consola, sino que también tenemos acceso a esta variable bonus. Esto significa que los bloques de sentencias anidados pueden acceder a variables desde un nivel de alcance externo o superior. Pero ¿qué pasa al revés? Pero podemos probar esto agregando una nueva variable dentro de nuestras declaraciones más profundamente anidadas, así var bonus2, cualquier número está bien para esta prueba y podemos acceder a esto en el nivel superior, que es esta función interior, escribe sumar el valor de bonus2, guardar y refrescar, y ahora podemos ver obtenemos el valor de undefined. Lo que significa que podemos ver claramente que esto no funciona al revés. Nos quedamos indefinidos por lo que JavaScript es consciente de que esta variable existe, pero se le asigna un valor indefinido. Como nota al margen rápida, si bonus2 se declarara con palabras clave let o const, arrojaría un error en lugar de tener un valor indefinido. Pero más sobre éste pronto. El anidamiento también puede continuar tan profundo como quieras ir. Tratemos de agregar una nueva declaración de bloque, como un bucle while. Esto de nuevo, también tiene sus propios tirantes rizados para encerrar el código y crear un nuevo alcance interno. Primero, vamos a quitar el bonus2 que ya no necesitas. Podemos quitar esto del tronco, y luego dentro de nuestra sección más profundamente anidada, podemos ir uno más allá. Crea una nueva variable llamada números que vas a recorrer y establecer esto para que sea una matriz de cualquier valor dentro de aquí. Si bien loop también necesitamos un valor inicial que podamos almacenar en i. Establezca esto en cero. Podemos seguir ejecutando este loop while, mientras que i es menor que la longitud de nuestra matriz, que podemos acceder con números, la tierra dentro de nuestro bloque de código o nuestra sección de alcance. Colocar un nuevo registro de consola con números i, que imprimirá cada uno de estos números individualmente, así que no te quedes atascado en un bucle infinito. Podemos incrementar el valor de i cada vez. Vamos a probar esto. Refrescar. Ya que caerá registros de consola desde justo aquí. Nuevamente, desde esta sección más profundamente anidada, seguimos accediendo a nuestra variable desde un nivel superior, y podemos subir aún más y probar nuestra variable bonus y probar esto dentro de nuestro profundo sección anidada. Pega esto en, y ahí está nuestro valor de 10. También saliendo del ejemplo anterior, probablemente puedas decir qué va a pasar si tratamos de hacer las cosas al revés. Si creas una nueva variable dentro de este bucle while, así que salta dentro de aquí. Pero el log con la nueva variable de bonus3, que es igual a cualquier valor, y luego podemos intentar acceder a esto en el nivel superior de nuestra función, así que agrega esto dentro de nuestra consola log bonus3, refresh. Ahí vemos el valor de undefined. Así es como podemos usar scope en secciones de bloques anidados. También hemos visto algunos ejemplos sobre cómo alcance solo es accesible desde un solo sentido. Secciones anidadas, como nuestro bucle while, en acceder a cualquier variable desde un alcance alto, pero no funciona al revés. 52. Bloque y alcance de función: Saltar al siguiente archivo que es el ámbito de bloque y función. No nos confundimos demasiado sobre lo que ahora vamos a mirar. He mantenido el mismo ejemplo de función que anteriormente. Con este ejemplo aquí, tenemos múltiples variables anidadas dentro de esta función en diferentes niveles. Las funciones se comportan de manera diferente a otros bloques de sentencias. futuro cada vez que menciono bloques, En elfuturo cada vez que menciono bloques, me refiero al código rodeado de llaves rizadas, como estas afirmaciones if y también nuestros bucles. Con una función como esta, no podemos acceder a las variables anidadas en el interior desde fuera. Si tratamos de colocar un registro de consola justo después de nuestra función llame acceda a nuestro bonus3. Ves bonus3 no está definido y también lo mismo para cosas en otros niveles como el bono regular. También tenemos el mismo tema pero no importa si las variables en el nivel superior de una función están anidadas dentro de otros bloques. Incluso si declaramos estas variables usando let o const también será lo mismo. [ inaudible] var de dejar los mismos resultados y también lo mismo para const. Cambia de nuevo a var. Así es como se comporta una función. Tiene su propio alcance y sabemos exactamente dónde estamos con las variables declaradas en su interior. Pero no es sencillo con otros bloques. Si cambiamos esto de una función a cualquiera de los bloques, como una declaración if, veamos qué sucede. Mueve la palabra clave function y podemos decir si la puntuación es igual a 0, recuerda que la puntuación se declara en el ámbito global. Todavía tenemos el console.log por el bono en la parte inferior. Ahora si tratamos de refrescar, también necesitamos eliminar nuestra llamada a función. Esta variable de bonificación ya está disponible. Pero ¿qué pasa con una variable profundamente anidada como el bonus3? Vamos a probar esto. Refresca y éste también funciona. Podemos ver aquí los bloques se comportan de manera diferente a las funciones con respecto al alcance. Esto sucede porque las declaraciones de bloque no tienen su propio alcance. Bueno, eso no es estrictamente cierto porque es cierto para este ejemplo que aquí vemos. Pero como desarrollador de JavaScript, tenemos múltiples opciones dependiendo de cómo declaremos nuestras variables. Las variables declaradas con la palabra clave var, que hemos utilizado deliberadamente hasta ahora, siempre se comportarán así. Pero usar const o dejar dentro de estos bloques eliminará el acceso desde el exterior y esculpir estos a su bloque actual. Si queríamos asegurarnos de que esta variable bonus solo estuviera disponible dentro de este bloque y no desde fuera del cual tenemos aquí, necesitamos asegurarnos de declarar esta variable usando el const o el let palabra clave. Ahora probemos el bono. Ya no tenemos acceso y también, lo mismo para const. Así como resumen cuando declaramos variables dentro de funciones, no teníamos esta opción de si queríamos restringir el acceso al interior del bloque de función o asegurarnos de que sea accesible desde el exterior. Pero cuando usamos otros bloques, como una declaración if o un bucle, estos bloques nos dan la opción de si queremos usar scope en o no. 53. ¡Levantamiento!: Anteriormente en el curso, mencioné brevemente un término llamado levantamiento, y prometí volver a él. Esto es lo que vamos a cubrir ahora. Ya hemos visto algunos ejemplos de hospedaje. Vamos a tomar algunos ejemplos primero para ver lo que está sucediendo. Los archivos de título en esta sección de levantamiento contienen algunos ejemplos y el primero tal vez familiar. Este fue un ejemplo que usamos anteriormente en la sección de funciones, y arriba en la parte superior, tenemos dos matrices. Tenemos el pan y también los brownies. Entonces tenemos una configuración de función en dos estilos diferentes. Tenemos la declaración de función y también la expresión de función. Ambos hacen lo mismo que estás comprobando si un ingrediente está presente en la matriz seleccionada. ¿ Por qué te estoy mostrando este mismo ejemplo otra vez? Bueno, observa aquí cómo estamos llamando a la función en la consola iniciar sesión en la parte superior antes de que se haya creado la función . Nosotros lo llamamos cheque. Dado que nuestro código se lee de arriba a abajo, entramos en la llamada a la función CheckAlergias antes incluso de que se haya creado, ya sea en la declaración o en la versión de expresión. Pasemos al navegador y veamos qué pasa con este registro de consola. Veamos si recuperamos un valor devuelto de esto. Esto funciona con la declaración de función, pero ¿qué pasa con el revés? Comentamos declaración y restablecemos la expresión, actualizamos y esto devuelve un error diciendo que no podemos acceder a nuestra función antes de la inicialización. Debajo de esto, tenemos el Ejemplo 2, que es una versión realmente simplificada del tema. Estamos creando un registro de consola e iniciamos sesión el valor de la variable antes de que se haya creado. Hemos visto dentro de la consola antes de que esto funciona. Simplemente eliminamos esto con el error de actualización. Podemos ver que esto está funcionando perfectamente bien. Esto funciona a pesar de que accedemos a nuestra variable de nombre antes de que sea declarada y se vuelve aún más raro si tratamos de reasignar un valor de nombre antes de que se declare. Por encima, justo encima de nuestro registro de consola. Lo que vamos a hacer es reasignar o actualizar esta variable con un nuevo valor antes de que incluso se esté creando. Esto también funciona. Veremos el nuevo valor actualizado en la consola. Si bien estos ejemplos son variados, todos están mostrando algo fundamental. A menudo podemos acceder a variables antes de que incluso sean declaradas. Esto nos lleva a un término llamado levantamiento. Justo rápidamente antes de que saltemos a esto, quiero mostrarte algo más, que es una varianza del último ejemplo. ¿ Qué pasa en la parte inferior si tuvieras un registro de consola pasando en el valor del rol? Luego declaramos esta variable sin inicializarla con un valor y luego le daremos un valor al final. Vamos a probar esto. Guardar y refrescar. Se puede ver esta versión ligeramente modificada devolverá el valor de undefined. Al mirar estos dos ejemplos, puede parecer bastante extraño porque estamos viendo cómo podemos acceder a las variables antes de que se declaren y además ya que ambos ejemplos son bastante similares. alzamiento se suele describir como el proceso de JavaScript, tomando nuestras variables y declaraciones de funciones y moviéndolas a la parte superior del programa o a la parte superior de su alcance, lo que significa que son declarado y listo para acceder en cualquier momento durante nuestro código. Esto explicaría mucho de lo que acabamos de ver. Ninguno de los códigos físicamente se mueve o se mueve a la parte superior de nuestro programa. Es el proceso de nuestras variables y declaraciones de funciones que se colocan en la memoria en tiempo de compilar. El código legible por humanos que escribes, como JavaScript, puede ser leído por un ordenador. Primero necesita ser convertido o compilado detrás de escena en un conjunto de instrucciones que las computadoras pueden entender. Es durante esta fase de compilar, nuestro código se lee o pasa por primera vez. Nuestras variables y declaraciones de funciones se almacenan entonces en la memoria. Sólo para aclarar, durante esta fase de compilación cuando se pasa por primera vez este programa, variables como esta se almacenan primero en memoria, razón por la cual podemos acceder a ellas antes parezca tener incluso los creó. No hay magia oculta detrás de escena, no hay movimiento alrededor de nuestro código hasta la cima del programa. Simplemente nuestro código siendo leído y una referencia a todas las variables y funciones almacenadas en la memoria. Esto explica algunas cosas a partir de nuestros ejemplos. En primer lugar, si echamos un vistazo a este ejemplo de función en la parte superior. El primer ejemplo, la declaración de función. Se levantan las declaraciones de función. Es por eso que podemos llamar a esta función antes incluso de que sea declarada, que estamos viendo con nuestro registro de consola. No obstante, las expresiones de función no se levantan, y es por eso que hemos visto un error en la consola. Por el Ejemplo 2, el primero. Ya que esta variable nombre de Chris está izada, es por eso que podemos acceder a ella antes de que parezca que incluso se ha creado, aunque esto fue diferente para la segunda versión, que regresa de nuevo undefined. ¿ Por qué crees que hay una diferencia entre estas dos variables? Bueno, una parte importante a entender es qué exactamente se almacena. Para entender mejor esto, demos un paso rápido atrás a los conceptos básicos de variables. Anteriormente, miramos algunas de estas palabras clave relacionadas con variables y una declaración es cuando declaramos una variable, que quieres usar y luego darle un nombre. Una vez que entonces le pasamos un valor real, esto se conoce como inicialización. Tiene declaración e inicialización. Volver a este ejemplo para nuestra variable de rol. Aquí hemos declarado una variable vacía y luego después de esto, hemos inicializado con el valor de dev. En la fase inicial de compilar, sólo se levanta la declaración de variable vacía y se almacena en la memoria. No obstante, aunque la siguiente línea donde lo inicializamos, este valor de dev ignoró en esta etapa. En esta etapa, se le asigna el valor de undefined. Es por eso que vemos undefined en la consola. No obstante, con los ejemplos anteriores ya que sí inicializamos esto con un valor de Chris, en la fase de compilación, asignará a la variable este valor en lugar de undefined. También para hacer las cosas aún más confusas, necesitamos recordar aquí que estamos usando la palabra clave var para ambos ejemplos. Su comportamiento también es diferente con la palabra clave let or const. Si cambiamos nuestro papel hasta el fondo para que nos dejen, veamos qué pasa dentro de aquí. Iniciamos sesión el valor de rol, refrescamos y ahora en lugar de que el valor de undefined se asigne a esta variable, ahora vamos a obtener un error dentro de la consola. Este error dice que no podemos acceder a nuestro rol antes de la inicialización. Esto se debe a que cuando estamos usando la palabra clave const o let, primero necesita ser declarada con un valor antes de poder acceder a ella. Si no primero le asignamos un valor, aún se le dará un valor de undefined detrás de escena, pero aún debemos declararlo antes de intentar acceder a él en nuestro código. Este puede ser un tema complicado de entender especialmente al principio, porque el alzamiento se aplica a las tres de estas palabras clave, se aplica a let, var y const. No obstante, var hace las cosas un poco diferente como acabamos de ver. Pero incluso si no entiendes completamente lo que estaba pasando en esta etapa, tener un entendimiento básico que las variables se levantan puede ahorrarte muchos problemas en el futuro si corres en un error similar. 54. Zona Temporal Muerte: La zona muerta temporal es algo que suena más difícil de lo que realmente es. La mayoría de los conceptos que lo rodean se han cubierto en videos anteriores. Mirando el código en la sección de script hacia abajo en la parte inferior, tenemos un registro de consola y una variable. Sabemos que una variable creada así con la palabra clave var encontrará acceso antes de que sea declarada. Esto se debe a que la variable se alza hasta la cima de su alcance. Podemos ver esto accediendo primero a esto y lo pondré dentro de la consola para que todo funcione completamente bien. Pero como también descubrimos, si usamos las palabras clave let o const más nuevas, el comportamiento es diferente. Otra forma de mirar esto sería quizás inicializar una variable antes de usarla. Si eliminamos el valor y luego inicializamos esto sobre la parte superior, el nombre es igual a Chris. Veamos qué pasa dentro de aquí. Todavía tenemos un error ya que estamos tratando de acceder a nuestro nombre demasiado pronto antes de que incluso se haya inicializado. Pero ¿qué pasa si cambiamos alrededor de las líneas uno y tres? Bueno, si colocamos uno en la parte inferior y luego movemos la palabra clave let a la parte superior, esto en cambio devuelve el valor de undefined. Esto también se toca en el video anterior. Si no asignamos un valor a una variable usando la palabra clave let antes de usarlo, en su lugar, se inicializará con el valor de undefined. Const, let, y var todos obtienen un valor de undefined si no establecemos el valor inicial antes de intentar acceder a la variable. La diferencia es que se puede acceder a var antes de que incluso se haya declarado, igual que hemos visto en el video anterior. ¿ Cómo se relaciona todo esto con la zona muerta temporal? Bueno, es simplemente nombre dado a algo que ya hemos visto al usar el const y dejar palabras clave. Es el nombre por un periodo de tiempo desde cuando entramos en algún ámbito dado, hasta cuando una variable es inicializada o accesible. Puede existir una variable, pero aún no se ha inicializado. Si esto sucede, se dice que está en la zona muerta temporal y no podemos acceder a ella ni usarlo como queremos. Si todo esto suena un poco confuso, vamos a simplificar un ejemplo para intentar darle una mejor comprensión. Lo que vamos a hacer es eliminaremos nuestra línea superior dado el registro de la consola y diremos dejar nombre igual a ser un valor. Si probamos esto, sabemos que esto no funcionará como hemos visto en ejemplos anteriores. Esto se debe a que desde el inicio del ámbito actual , entramos en la zona muerta temporal. Agreguemos un comentario, comienza la zona muerta temporal. Todo esto está en el nivel superior de nuestro guión, por lo que está en el mismo ámbito. No está anidado en un ámbito interno como una función o una declaración if. Entonces cuando nuestra variable se inicializa en la línea 14, la zona muerta temporal actual termina la zona muerta temporal actualy la variable ahora es accesible. Su zona de inicio y final también le sucede a cualquier otro ámbito. Por ejemplo, si esto estuviera en un determinado bloque, como una función o una declaración if rodeada en las llaves rizadas, también se aplicaría lo mismo. Al mirar este ejemplo, puede parecer que el orden del código es el factor determinante, ya que la declaración de variable ocurre después intentar acceder a ella en el registro de la consola. No obstante, sin embargo, este no es el caso. Como se mencionó anteriormente, la zona muerta temporal es un periodo de tiempo desde que entramos en algún ámbito dado, hasta cuando se inicializa una variable. Es el tiempo que es importante y no el orden del código ya que la palabra temporal en realidad se relaciona con el tiempo. Podemos ver esto si envolvemos este registro en una función. Crea una función sobre la parte superior. Digamos que consiga el nombre. Con esta consola regístrese dentro una función y luego llame a nuestra función. Sin embargo, sin embargo, podemos esperar que esto cause un error, igual que hemos visto anteriormente. Al mirar el orden del código, el registro de la consola sigue sucediendo antes de declarar nuestra variable. Es comprensible que pueda estar esperando un error. No obstante, este no es el caso porque en realidad se llama a la función fuera de la zona muerta temporal. La zona muerta temporal no es el orden del código, es el tiempo que se tarda en hacer realmente accesible esta variable. Aquí hay algunas cosas complicadas que captar y también en el pasado algunos videos. No espero que consigas completamente todo en el primer intento, pero sí creo que es importante saber que estas cosas existen porque algún día puedes tropezar con un tema por ellas y solo puede desencadenarte a pensar en estos conceptos y cómo podrían estar afectando tu código. ¿ Cómo hacemos nuestra vida más fácil y minimizamos los errores? Bueno, una forma sencilla podría ser poner const y dejar variables al comienzo de su ámbito requerido, ya sea que esté en la parte superior de una declaración if, la parte superior de una función, o incluso en la parte superior de nuestra guiones. De esa manera, siempre estarán listos para usar cuando sea necesario. 55. Cierres: Cuando creamos funciones, no siempre necesitan ser funciones independientes. En cambio se pueden anidar a en el proyecto inicial. En esta sección de cierre, se puede ver en el interior de aquí tenemos un área de guión vacía. Ahora vamos a crear una función simple para demostrar el efecto de los cierres. Salta a la sección de script y crea una función regular dentro de aquí. Nombraré a éste el exterior por dentro con una variable. Diremos valor exterior. Le puse esto a una cadena de exterior. Ahora podemos anidar una función adicional dentro de aquí. Simplemente soplaré nuestra variable crea una nueva función. Esta vez con el nombre de interno. Haremos lo que hicimos justo arriba crearemos una nueva variable. Éste puede estar en un valor igual a la cadena de interior. Entonces dentro de esta función interna crearemos dos registros de consola. El primero va a ser por el valor del valor interno, que está contenido dentro de esta misma función. Duplicaremos esto y colocando nuestro valor exterior. Sabemos por videos anteriores que al trabajar con alcance y cuando anidamos alcance dentro de funciones o corchetes como este, todavía podemos acceder a variables creadas en niveles externos, como esta aquí. Básicamente, un alcance interno puede acceder a variables desde un ámbito externo. Para que esta función interna realmente se ejecute y coloque nuestros registros de consola dentro del navegador. Tenemos que llamar a esto dentro de aquí, así llamada nuestra función interna te hace esto se anida dentro de la función externa. Entonces finalmente llamaremos a nuestra función externa principal, también lo haremos dentro de un registro de consola. Asegúrate de colocar los corchetes. Entonces prueba esto saltando en ella la consola. Vemos interior, vemos exterior, que es nuestros dos registros de consola. Entonces el tercero abajo en la parte inferior es el valor de nuestra función que es indefinido. Podemos ignorar este valor indefinido en este momento porque no hemos devuelto nada de esta función. Pero ahora sabemos que esto está funcionando ya que tenemos nuestros dos registros de consola mientras tanto podemos acceder a ambas variables desde el interior de esta función interna. Primero podemos acceder al valor interno porque es local a esta función. También podemos acceder al valor exterior debido a la cadena de alcance. Alcance o alcance léxico, que usted mencionó, permite que esta función interna acceda a nuestras dos variables. ¿ Qué pasa con esta función interna se sacó de esta configuración actual. No estoy hablando de mover físicamente la función interna a otra parte. Pero en cambio, ¿qué pasa si la almacenamos en una variable y la hacemos uso de ella en otro lugar? Bueno, para poder hacer esto, en lugar de llamar a la función interna en la parte inferior, en cambio la devolvemos, así que vamos a quitar esto, devolveremos el valor de inner. La parte importante a entender aquí es que estamos devolviendo la función interna real. Cuando llamamos a esta función externa. Podemos ver esto dentro de la consola. Seguimos iniciando sesión en esto y también ejecutando esto. Si actualizamos esto, ahora veremos esta función interna dentro de la consola. Oso conmigo aquí en este. Lo que estamos haciendo aquí en esta etapa es que lo llamamos un externo, que devuelve la función interna. Esta función interna es efectivamente una pieza independiente de información. No tiene referencia a esta función externa ni a ningún contenido en su interior. Vamos a agarrar este valor interno, que podemos ver dentro del registro de la consola. Instala esto dentro de una constante llamada interactuar. Ahora en lugar de directamente, pondré en la función externa. Podemos colocar en nuestra constante actualización y aún podemos ver que tenemos acceso a esta función interna. Todo lo que estamos haciendo aquí es crear una variable que almacene una referencia a esta función devuelta. Esta variable ahora se puede usar en otro lugar. Ahora lo que tenemos es una función de referencia independencia de la función externa original. Esto ahora nos deja con una pregunta clave. Esta función interna que hemos almacenado en una constante, accede a esta variable desde el exterior. Bueno, podemos averiguarlo ejecutando realmente esta función colocando los corchetes justo después de esta constante. Di esto, recuerda que aún estamos tratando de acceder a su valor exterior. Refresca, y aún vemos nuestros dos registros de consola. Significa que sí, todavía podemos acceder a estas variables externas. Esto puede parecer bastante extraño. Estamos accediendo a variables que parecen no tener sentido con lo que ya hemos aprendido sobre el alcance. Todo esto se relaciona con algo llamado cierres. Una función, al igual que nuestra función interna aquí, también recordaremos a qué variables tiene acceso. En nuestro caso, es este valor exterior. Esto es lo que se llama cierre. Cierre es poner una barda alrededor de todo lo que tenemos acceso. Recuerde todas estas variables dondequiera que se pueda llamar a esta función en el futuro. Esto puede ser útil ahora porque en lugar de necesitar crear un valor externo como variable global, en cambio podemos restringir este acceso al interior esta función y seguir permitiendo cualquier interior anidado funciones para utilizarlo. Además, tenga en cuenta que este término de cierres solo puede suceder dentro de funciones. Esto aún no está claro. Echemos un vistazo a otro ejemplo usando el marcador de jugador, que necesita ser actualizado. Sólo vamos a comentar todo esto y al fondo. Crea una nueva variable. Vamos a desplazarse para ser iguales a 0. Luego crea una nueva función llamada puntuación de actualización. Entonces dentro de aquí, lo que haremos es volver a asignar nuestro puntaje con el valor del puntaje actual más 10. Registre esto en la consola. En la parte inferior llama a nuestra función. Vamos a probar esto. Este debe ser un valor de 10 ya que tenemos nuestro puntaje original de 0. Luego llamamos a nuestra función que suma 10 a la partitura original y luego imprime el nuevo valor. Además, si actualizamos esto varias veces llamando a nuestra función más de una vez, también deberían funcionar. Todo esto está bien, funciona como queríamos, pero la puntuación que tenemos fuera de una función está clasificada como una variable global. También se puede actualizar desde otras áreas también. En cambio, será mejor tener más control sobre esta variable y solo actualizarla dentro las funciones creadas para este fin. Se puede pensar, vamos a mover esta variable a la función. Podemos arrastrar esto hacia abajo. Esta técnica crea un alcance de función y no se puede acceder a su variable desde el exterior. Esto resuelve uno de nuestros problemas, pero también crea otro. Veamos esto dentro del navegador, actualice. Recuperamos el valor de 10 tiempos libres porque la variable se restablece de nuevo a cero al principio de cada llamada a función. También si se trataba de un juego real, posible que también deseemos acceder a la variable de puntuación fuera de esta función. Tal vez hacer algo como mostrar en la pantalla al usuario. Para ayudar con esto, podemos hacer uso de un cierre para anidar dentro de una función para actualizar la variable score. Tenemos el envoltorio externo de puntuación de actualización. Entonces podemos crear un nuevo anidado en una función llamada increase con nuestra variable score en el interior y también el log de consola que son la función interna, igual que antes. Además, almacene esta función en una nueva variable. El primero, diremos const, nuevo puntaje es igual a este valor devuelto. Aún podríamos llamar a esta función varias veces si quisieras. Pero esta vez necesitamos hacer referencia a esta nueva puntuación, por lo que cambia. También dejando entre los paréntesis justo después por lo que en realidad ejecutamos esta función. Entonces prueba esto refrescando. Ahora bien, esto se ha incrementado en el valor de 10 cada vez que llamamos a nuestra función. Esto ahora resuelve los problemas que teníamos antes con la función de puntuación de actualización original. Antes de realizar estos cambios, restablecemos la variable de puntuación de nuevo a cero. Esto significaba que como hemos visto antes, cada vez que llamamos a esta función, el resultado siempre fue el valor de 10 y no estaba agregando esto a cada una de las llamadas. Los cierres resolverán esto recordando la variable de puntuación en la memoria cada vez que se llame. Una variable de puntuación también ahora tiene alcance más estrecho por lo que no podemos actualizarnos accidentalmente en otro lugar como pudiéramos si fuera una variable global. Sin embargo, si aún no necesitábamos acceder a esta variable de puntuación desde fuera de esta función. Podemos devolver un valor y almacenar esto dentro de una nueva variable. Lo que significa que aún podíamos acceder a esta partitura desde el interior del cierre y mostrarla al usuario final. 56. Un Poco De Fondo: Esta nueva sección viene con bastantes palabras de moda como: devoluciones de llamada, asíncronas, síncronas, y también algunos conceptos que pueden ser difíciles de entender sin saber un poco de antecedentes en cuanto a por qué los usamos. Este video va a tratar de explicar estos en términos simples y qué hace exactamente cada uno. Empezando con código síncrono. Cada línea de código es un poco como una tarea, y cada una se completa en orden. Se leerá la línea 1, espere a que esto se procese, y luego pase a la línea 2. También esperaremos a que esto termine antes después pasar a la tercera línea. En un pequeño programa como este realmente no importa porque las operaciones son rápidas y fáciles de procesar, y no notarías ningún tiempo de espera entre cada una. Pero en casos extremos si una línea nunca terminó de procesar o tardó mucho tiempo, entonces estaremos atascados. En el navegador podemos ver algunos ejemplos simples de esto, así que salta a esta nueva sección que es el número 10, Asynch-JavaScript. En un poquito de sección de fondo tenemos dos ejemplos, pero ahora nos centraremos en el ejemplo 1 que está sin comentar y también el HTML arriba en la parte superior. Tenemos el botón y el rumbo de nivel 3. Ignorar la imagen por ahora, esto está relacionado con el segundo ejemplo. Todo lo que hacemos aquí es agarrar ambos de estos dos primeros elementos. Consultamos selector, seleccionamos nuestro botón. Agrega un EventListener que escuchará el click y esta función activará una alerta, y luego justo después tomaremos nuestro encabezado y estableceremos el contenido InnerText efectivamente nos dio dos etapas a esta función. Las alertas pueden ser buenas por ejemplo así porque bloquean la ejecución del código hasta que lo cerramos. Ahora si abrimos esto dentro del navegador; copie la ruta a esto, pegue esto en, y actualice, vemos nuestro botón que ahora escuchará el click. Voy a hacer clic en esto, entonces veremos el pop-up que es la primera línea de nuestra función, y luego si hacemos clic en este botón se cierra hacia abajo. continuación se llama a la siguiente línea de la función que establecerá el InnerText del encabezado, por lo que tenemos un orden claro de las cosas corriendo. Tenemos la alerta, y luego una vez que esto termina se desplaza hacia abajo para fijar el texto. Con este ejemplo, cada línea no se encontrará la anterior como terminada. Así funciona el código síncrono. Uno de los problemas aquí con el código síncrono es que una sola línea de código puede bloquear la ejecución del resto del programa, y esto se puede evitar mediante el uso de código asíncrono. El código aún se lee en orden línea por línea, sin embargo una operación no tiene que completarse antes de pasar a la siguiente línea. Efectivamente, todo el código se ejecuta y luego se activa uno por uno. Tenemos que manejar qué hacer cuando se completa cada tarea y esta es la parte clave aquí, y luego en qué hacer si el código vuelve un éxito o si hay un error. Mirando nuestro segundo ejemplo, vamos a descomentar esta sección. Aquí tenemos algo llamado fetch. Esta es la API de Fetch, y recuerda de antes tenemos ciertas API web como Canvas. Esta API de Fetch nos permite buscar cosas a través de una red que podría ser otro sitio web, una base de datos, un servidor, o una API externa que alguien más ha creado y lo importante aquí está la llamada fetch es asíncrona. Se ejecutará y luego permitirá que el resto del código a continuación se ejecute también antes de que se complete o recupere cualquier dato. La idea principal aquí es que obtengamos datos de algún otro lugar más que dentro de nuestra propia aplicación. Este ejemplo selecciona una imagen de Wikipedia y luego almacena el valor de retorno en una variable. Comencemos registrando el valor de retorno de esta variable a la consola. Simplemente descomentar este primer ejemplo, y luego colocarlo en un registro de consola con el valor de la variable que es ImageSurce del navegador. Salta a la consola y veremos algo llamado Promesa. Recuperamos una Promesa y tiene el resultado entre paréntesis de pendiente, así que ¿de qué crees que esto podría ser todo esto? Bueno, vamos a buscar Promesas con más detalle pronto, pero se remonta al punto importante que mencioné antes. Al usar código asíncrono o asíncrono para abreviar, necesitamos manejar lo que sucede si el código vuelve un éxito o si hubo un error, y una Promesa puede manejar esto por nosotros. Cuando preguntamos por primera vez esta imagen a Wikimedia, no sabemos en este momento si el sitio Wikimedia está caído, funcionando lento, o si hay un problema de conexión entre nosotros y su servidor. Este registro de consola a continuación fue llamado inmediatamente después de nuestro fetch, por lo que se ejecutó antes de que la imagen incluso regresara. Es por ello que obtenemos el resultado de pendiente porque nunca tuvimos una imagen para realmente iniciar sesión en la consola. Como otro ejemplo si esto está pendiente y no tenemos una imagen, ¿qué pasa si tratamos de retrasar tal vez el registro de la consola por tres segundos? Bueno, vamos a cortar esto. Podemos colocar en un tiempo de espera que activará una función, y digamos tres segundos. Dentro de la función coloque otro registro de consola desde antes, actualice, y se puede ver después de tres segundos, nuestra promesa ahora se cumple. Tenemos respuesta, así que esperar tres segundos esto nos da el tiempo para recuperar la información o la imagen que necesitamos. En cambio, si este fuera código síncrono, el resto del código necesitaría esperar en esta imagen para volver durante tres segundos aunque no necesitáramos usarlo. O alternativamente, si nunca lo manejamos así, la línea que inmediatamente sigue nuestra llamada fetch puede intentar acceder a nuestra imagen que no tiene de vuelta, y por lo tanto causar un error. Con esto en mente, veremos promesas y otras formas de manejar una respuesta en los próximos videos. 57. Funciones de devolución de llamada: Este video te va a presentar algo llamado función de devolución de llamada. Una devolución de llamada es solo el nombre que se le da a una función que se llama después de que algo ha sucedido. El anomalía utilizado como siguiente paso para dar una vez que algo haya terminado. Por lo que hemos cubierto anteriormente, sabemos que el código asíncrono puede tardar algún tiempo en completarse. Esto podría ser obtener datos de una base de datos, o incluso guardar en una base de datos como ejemplo. Veamos cómo esto puede afectar nuestro código. El código en este ejemplo comienza con una lista vacía y desordenada. Ahora, nuestro script tiene una matriz de usuarios vacía. Una aplicación típica que tiene usuarios probablemente tendría una función para hacer una llamada a nuestra base de datos y actualizar la matriz de este usuario con el resultado. Tenemos una función para simular esto y sumar dos nuevos usuarios. Todo lo que estamos haciendo dentro de esta función es acceder a nuestra matriz de usuarios y colocarla en objetos de usuario. Entonces, una vez que tengamos a nuestros usuarios de nuestra base de datos, que asimilamos aquí, lo que probablemente queramos hacer a continuación es crear una nueva función que agarra a todos nuestros usuarios bucles por encima cada uno y luego los muestra en el navegador. Echemos un vistazo a cómo hacer esto. Vamos a crear una función, digamos listUsers. Bajo ListUsers primero va a acceder a una matriz de usuarios, vamos a recorrer con forEach, que ejecutará una función para cada uno de nuestros valores de matriz o pasando el nombre de variable de usuario. Después ejecute eso antes de que tengamos esta lista vacía desordenada, podemos crear un nuevo elemento de lista para cada uno de nuestros usuarios. Const elements es igual a document.createElement, crea un nuevo elemento de lista, y luego agrega el contenido de texto dentro, que es el nombre de usuario. Documents.createTextNode donde podemos hacer uso de nuestra variable de usuario y acceder a la propiedad name. Como siempre, necesitamos crear nuestro proceso de tres partes, que es crear los elementos, crear los contenidos, y luego en la tercera parte es fusionar estos juntos. Para agarrar los elementos padre, llamamos appendChild, agregamos en el nombre, y luego finalmente, agregamos este elemento a nuestra lista desordenada. Primero toma nuestra lista desordenada con document.QuerySelector, agréguelo en nuestra lista desordenada y luego appendChild, que es nuestros elementos. Esto es todo para nuestra función de usuario lista. Podemos llamar a esto a continuación y comprobar esto todo funciona en el navegador incluso los nombres de nuestros dos valores de matriz. Esto funciona completamente bien. No tenemos ningún problema con los datos funcionales porque sabemos que está en este mismo archivo. Pero de manera realista, lo que probablemente haremos es recuperar a nuestros usuarios de una base de datos, y esta llamada a base de datos sería asíncrona y puede tomar algún tiempo. Si todo esto salió bien, el retraso de tiempo será pequeño, pero sigue siendo un retraso sin embargo. Para simular este retraso, también podríamos agregar un setTimeout a nuestra función ambas. Voy a agarrar a nuestros usuarios, vamos a cortar esto, colocaré en una llamada SetTimeout, y luego una función. Yo sólo añadiría un segundo retraso a esto. Abre el cuerpo de la función y pega en nuestra matriz de usuarios, y ahora veamos qué sucede dentro del navegador. Refresca, e incluso después de un segundo, no vemos a nuestros usuarios dentro del navegador. Ahora, el usuario ha estado en la lista ya que estamos inmediatamente Lupin de los usuarios abajo en la parte inferior porque nuestra función está siendo llamada de inmediato. Esto está sucediendo efectivamente antes del retraso de un segundo desde nuestro tiempo de espera, lo que significa que cuando tratamos de acceder a nuestros usuarios, no tiene ningún valor. Esto es algo común a tener que lidiar, al trabajar con datos almacenados externamente, básicamente pedimos los datos que necesitamos, pero también necesitamos asegurarnos de que los datos sean devueltos y disponibles antes de que podamos acceder a ella de forma segura. Tiene que estar en orden para que las cosas no se rompan. A pesar de que estamos llamando a las funciones en el orden correcto, por lo que estamos creando nuestros usuarios y luego estamos enumerando a nuestros usuarios, el retraso de tiempo está causando el problema. También podemos confirmar esto con algunos registros de consola. En primer lugar, si colocamos en uno justo después de donde creamos nuestros usuarios, colocamos en el primero y diremos que esta es la función getUsersFromDatabase, y luego también colocamos uno dentro de nuestra función de usuario lista con el texto de los usuarios de la lista. Si no tuviéramos este retraso de tiempo corriendo de arriba a abajo, esperarías ver el primer registro de consola, seguido de éste justo aquí. Pero si guardamos y actualizamos, sucede lo contrario, vemos la lista de usuarios frío antes de getUsersFromDatabase, y sabemos que este es el camino equivocado para lo que tenemos que hacer. Sería bueno si esta función de usuario de lista solo se llamara una vez que el código en un tiempo de espera se considerara un éxito, y podemos hacerlo introduciendo una función de devolución de llamada. Para ello moveríamos la lista usa llamada a función, sacarla y luego pasar la función de devolución de llamada a getUsersFromDatabase. Esta función de devolución de llamada se tomará entonces como un parámetro de crear nuestra función. Al igual que cualquier otro parámetro, este nombre está hacia arriba. No tiene que ser devolución de llamada, colocaremos esto en él solo para que quede claro lo que estamos haciendo. Ahora, podemos llamar a esta función de devolución de llamada al final de setTimeout. Justo después de nuestro registro de consola llamaremos a esto como una función y luego podremos volver a la consola y ver en qué orden aparecen estos. Refresca, y obtenemos un error dentro de aquí. Decimos que la devolución de llamada no es una función. llamada. Esto simplemente necesita no tener las llamadas a la función ya que solo estamos pasando una referencia a esta función. Ahora, refresco. Las cosas parecen estar funcionando en el orden correcto. Recuperamos a nuestros usuarios de la base de datos, luego enumeramos ahora los usuarios también pueden ver estos restablecidos de nuevo en el navegador. Esta solución es devolución de llamada asíncrona. Recuerde, del último video que síncrono se refiere al código que se ejecuta en orden y una operación necesita terminar antes de pasar a la siguiente. Usando este ejemplo que acabamos de hacer, una vez que los usuarios hayan regresado con éxito de la base de datos, que simulamos con nuestro setTimeout, podemos entonces utilizar nuestro carbón de nuevo la función de los usuarios de lista, y de esta manera si las cosas se mantienen en el orden correcto. También podemos pasar argumentos adicionales a esta función también. Digamos que sólo queríamos conseguir a los usuarios que tenían el rol de admin, podemos pasar esto en excepto el parámetro. Ahora, cuando llamamos a nuestra función como pasar el rol de admin, por lo que esto está completamente bien. Podemos pasar tantos argumentos como uno, dos a la función. Debemos asegurarnos de que la devolución de llamada sea siempre última. Este método de pasar funciones como parámetros de función no es nada nuevo. Podemos ver esto si volvemos a un expediente anterior. Vamos a abrir la barra lateral, saltar a la anterior, y dentro del primer ejemplo donde agregamos un oyente de eventos. Primero escuchamos hacer click, luego como el último parámetro que desencadenó una función. Aquí lo pasamos en una función de devolución de llamada que queremos ejecutar una vez que se ha hecho clic en algo, y también consideramos una matriz métodos también los cuales hemos mirado algo así como para cada uno, que tenemos en este ejemplo actual. Cada elemento dentro de nuestra matriz, luego ejecutamos una función dentro de la cual también es una devolución de llamada, lo que significa que esta técnica no es nada nueva. Cuando hablamos de devoluciones de llamada, estas son generalmente una forma tradicional más antigua de hacer las cosas. continuación veremos formas más modernas. Pero las devoluciones de llamada son realmente importantes a tener en cuenta, ya que todavía hay un montón de ellas alrededor y todavía en uso hoy en día. devoluciones de llamada también obtienen un poco de odio en el mundo de JavaScript y no porque no funcionen. Es más porque cómo las cosas pueden desordenarse fácilmente. Este ejemplo que solo usamos no es tan malo. Porque todo lo que tenemos es una sola función, que luego vuelve a llamar a una segunda función. Pero el problema radica cuando tenemos una devolución de llamada, que llama a otra función de devolución de llamada, que llama a otra función de devolución de llamada, y así sucesivamente. Incluso mirando este ejemplo, la función lista de usuarios también puede necesitar su propia devolución de llamada también. Entonces esa devolución de llamada también puede necesitar su propia devolución de llamada y luego estamos atascados en una cadena larga. Podemos comparar esta cosa con nuestras propias vidas también. Tenemos un orden de tareas que desea completar en un orden determinado. Digamos que queremos conducir el auto. Pero antes de que realmente podamos conducir el auto, tenemos que caminar hasta el auto, antes de caminar hasta el auto, tenemos que encontrar las llaves, antes de eso, tenemos que vestirnos y así sucesivamente. Se trata de una serie de tareas que se basan en la anterior para ser concluida primero. Esto es comparable a las funciones de devolución de llamada que se llaman una vez que el código anterior es exitoso. Es esta múltiple devolución de llamada que puede resultar en un gran lío. Para ver un ejemplo de esto, hemos creado algunas pequeñas funciones de demostración. Vamos a comentar todo desde arriba. Ahora, crea algunas nuevas funciones. El primero es GetOutOfBed, colocado en el console.log, dice fuera de la cama, y luego duplica esta tres veces más, dándonos cuatro funciones. El segundo es encontrar nuestras claves y solo console.log. El siguiente es caminar hasta auto, y el último es conducir el auto. Dirá yey, ya que nuestra tarea está completa. Usando lo que sabemos de nuestra demostración previa de devolución de llamada, cada una de estas funciones necesita pasarse a la siguiente función como devolución de llamada. Entonces llama a esto dentro de cada función. El primero GetOutOfBed. Esto va a tomar en una devolución de llamada, que se ejecutará en la parte inferior, pasa a la segunda también, llame a nuestra función. No necesitamos agregar esto a nuestra última función ya que no va a estar llamando a ninguna otra función, ya que este es nuestro resultado final. En realidad se ha desencadenado esta cadena de llamar a todas estas funciones, vamos a crear una función más para llamar a todas estas. Crea una nueva función llamada CompleteTasks. Podemos llamar a esta función, que es completePreguntar pasando en la primera función que desea volver a llamar. Nuestro primero en nuestro orden es GetOutOfBed. Lo que vamos a hacer ahora puede parecer bastante complejo, pero básicamente es la misma configuración que antes. Conseguiríamos usuarios de la base de datos. Sólo que esta vez hay más de una función en la cadena, que llamaremos, y luego dentro de la función CompleteTask, entonces podremos anidar cada una de nuestras funciones para llamar al interior. El primero es levantarse de la cama. Pasar en una función. Pasemos a la consola y veamos qué pasa. Si actualizamos, vemos el texto de fuera de la cama dentro de la consola y si echamos un vistazo hacia arriba, este es el registro de la consola en la parte superior. El próximo partido va a ser clave para entender todo esto. Lo que vamos a hacer aquí es que estamos creando nuestra primera función llamada CompleteTask. Esto es entonces llamado a nuestro primer paso, que es levantarse de la cama, luego pasamos una función por dentro. Esta función es aceptada como la devolución de llamada, y esta función se llama entonces al final de esta función. Básicamente una vez que esta función haya terminado, entonces llamará a nuestra segunda función, que está anidada en su interior. Esta siguiente sección, que vamos a llamar puede ser nuestra siguiente etapa, que es findkeys. Dejar llamar a esta función, findkeys también necesita tomar una función de devolución , así que pasa esto en. Esto ahora debería ejecutar nuestro segundo console.log. Tengo un error ortográfico, así que vamos a cambiar esto, findkeys. Ahora tenemos nuestro segundo console.log, así que se ejecutará en esta sección justo aquí y luego se va a ejecutar esta siguiente función es siguiente función está anidada dentro. Pasando nuestra siguiente etapa, que es caminar a coche. Caminar al coche también toma una función de devolución de llamada. Guardaremos y actualizaremos, enviaremos impresiones fuera del texto de caminar. Luego ejecutará nuestra siguiente función, que está dentro. La etapa final, es conducir el auto. Esta es la última etapa, por lo que no toma una función de devolución de llamada. Simplemente podemos llamar a esto como una función regular. Refrescar. Este código se ejecuta junto a todas nuestras otras funciones. Si lo desea, también podríamos pasar pasos adicionales o código adicional a cada una de estas funciones también. Solo para aclarar, todo lo que estamos haciendo aquí es crear una función principal que se ejecuta, y luego su función es entonces llamar funciones adicionales dentro. Cada una de estas funciones, esperaremos a que el código se complete dentro antes de devolver la llamada a la siguiente. Si esto está empezando a parecer un poco desordenado, bueno, probablemente lo sea, porque es un desastre, y por eso algunas formas alternativas de se están creando algunas formas alternativas de lidiar con esto. Pero solo porque haya nuevas formas, no necesariamente significa que esto aún no sea relevante. devoluciones de llamada sigue siendo una parte importante de JavaScript, tanto actualmente como también lo verás en el código heredado. Probablemente escucharás este tipo de cosas también llamadas Callback ****, la Pirámide de la Doom, devoluciones de llamada anidadas. También muchos más nombres también. Todos estos nombres apuntan a la misma complejidad de las devoluciones de llamada anidadas así. En los próximos videos, descubrirás algunas formas alternativas de manejar esto, incluyendo usar devoluciones de llamada de forma asíncrona con promesas. 58. Promesas: Sabemos ahora que hacer una solicitud asíncrona puede llevar algún tiempo, tal vez solo unos pocos milisegundos, o tal vez unos segundos, minutos, o nunca ni siquiera completarse en absoluto. A menudo cuando hablamos de esto, se refiere a buscar algo de otro lugar, como un servidor, algún como un servidor, tipo de datastore, una API o un sitio web externo. Una promesa es genial para manejar este resultado. Promise es un objeto y este objeto representa el resultado de una tarea asíncrona. El resultado podría ser una falla, puede que no regresemos del servidor lo que pedimos, o puede llevar un poco de tiempo. Las promesas se aferran a esta tarea y prometen decírtelo en el futuro cuando conozca el resultado. Ya hemos visto promesas y algunos de los resultados ya. Hace unos videos, miramos un simple ejemplo de buscar una imagen de Wikimedia. Voy a usar la API de Fetch. Fetch es una operación asíncrona, y estamos viendo una promesa devuelta a la consola. Cuando tratamos de acceder a la promesa demasiado pronto antes de que terminara de agarrar la imagen, los resultados fueron vistos como pendientes. Luego agregamos un pequeño retraso de tiempo con un tiempo de espera establecido, que fue alterado en la promesa que se cumple. Estos son dos de los tres estados disponibles con promesas. Pendiente está el estado inicial cuando aún no sabemos si la tarea se completará o no, luego se cumplió cuando la tarea se consideró un éxito, como cuando los datos han regresado y ahora está lista para usar. También tenemos un estado llamado rechazado cuando la tarea ha fracasado. No tenemos los datos que solicitamos, y necesitamos hacer algo al respecto. También puede escuchar la palabra resuelta con promesas. Se resuelve es cuando conocemos el destino de la tarea, lo que significa que ya sea cumplida o rechazada. No necesitamos saber nada del estado pendiente ya que no podemos decir en qué dirección irá con el resultado. Pero sí necesitamos manejar un éxito o un fracaso. A los archivos de inicio, que es la sección de promesas. Aquí, tenemos otro ejemplo usando esta API de Fetch. Esto es obtener datos de una API externa, y esto es solo una URL externa. Esta URL va a seleccionar una imagen de perro al azar. Podemos copiar esto, y pegar esto dentro del navegador. Podemos ver tenemos un resultado en un formato llamado JSON, que significa JavaScript Object Notación. Es una sintaxis para intercambiar datos a través de la web. Parece un objeto JavaScript, pero en realidad es independiente del lenguaje, lo que significa que también puede ser creado y pasado por otros idiomas. Podemos ver tenemos un mensaje, que contiene una URL para una imagen de perro en particular, y el código de éxito. Podemos copiar esta imagen y pegar este enlace en, que luego nos da acceso a la imagen en particular. He instalado la extensión del navegador para que esto se vea un poco más bonito. El tuyo puede parecer un poco más difícil de leer, pero los datos deben seguir siendo exactamente los mismos. De vuelta al editor. Como sabemos, la llamada fetch es asíncrona, por lo que podemos manejar el resultado de buscar esta imagen con la promesa. En primer lugar, podemos manejar el estado cumplido, que es un éxito, y lo hacemos encadenando al final de la llamada de fetch. Podemos quitar el punto y coma, la cadena al fin.then. Entonces es un método que podemos encadenar en una promesa. Recuerda, cuando usamos la API de Fetch, esto devolverá una promesa como respuesta, lo que significa que tenemos acceso al método then. Pasar en una función. Con esto siendo una devolución de llamada asíncrona, solo ejecutaremos el código dentro de aquí. Quiere saber que la tarea se completó con éxito. Por supuesto, probablemente queremos acceder a los datos que obtenemos de la llamada fetch. Esto se puede pasar a nuestra función, por lo que pasar cualquier nombre de variable como respuesta. Entonces podríamos registrar esto en la consola y comprobar si esto funciona. Guardaré en el navegador y abriré la consola. Hay una respuesta. Esta promesa exitosa devuelve un objeto de respuesta que contiene detalles de lo que obtenemos del servidor o de la API. Este objeto contiene cosas como el código de estado. En nuestro caso, son 200, lo que significa que todo está bien. Abajo a la URL baja, vemos la URL real que solicitamos en la llamada fetch en lugar la URL de la imagen que recuperamos. El motivo por el que no vemos esto es porque todos los datos que recuperamos se almacenan en esta sección del cuerpo. Si abrimos esto , aún no vemos la URL de la imagen real. En cambio, vemos una corriente legible. Esto se remonta al formato JSON mencionado anteriormente. Para leer este formato JSON el cual se almacena en la sección body, contamos con un método JSON el cual podemos utilizar. Dentro del registro de la consola, podemos agregar al final el método JSON. Entonces probemos esto. Guardar y refrescar. Volvemos a una promesa que tiene el estado actual de pendiente, lo que significa que la tarea aún no ha concluido. Esto se debe a que el método JSON también devuelve una promesa que nuevamente necesitamos manejar. Hay un par de formas en que podemos hacer esto. En primer lugar, podemos quitar el envoltorio de registro de consola y dejar response.json. Dado que este método JSON también devuelve una promesa, también podemos encadenar en el método then. Pase esto en, que de nuevo ejecuta una función. También esta función, toma en los datos de la respuesta, por lo que pasa a una variable de datos. Entonces podemos registrar estos datos en la consola. Vamos a probar esto, guardar y refrescar. Ahora, hemos pasado con éxito nuestro contenido JSON, cual se almacena en la sección del cuerpo. Esto devuelve la imagen real del perro, que se almacena en el mensaje, y también el éxito como código de estado. Esta es la misma respuesta que hemos visto cuando pegamos esto en el navegador antes. Todo aquí devuelve una promesa, la llamada fetch devuelve una promesa, y también el JSON devuelve una promesa. Pero otra forma de hacer esto, que personalmente prefiero, pero depende completamente de ti, es no anidar luego llama así. Si es posible, mi preferencia es mantenerlos a todos en el nivel superior para la legibilidad. Para ello, necesitamos cortar el método anidado entonces que acabamos de agregar. Lo dejaremos en respuesta.json dentro de aquí, y vamos a cortar el segundo a último conjunto de corchetes todo el camino hasta justo después de response.json. Corta esto. Ahora, la función debería simplemente salir con response.json. Asegúrate de que el punto y coma sea retirado del final, y podemos pegar esto al final, dándonos dos métodos entonces seguidos. No obstante, sin embargo, si pasamos al navegador y actualizamos, vemos el mensaje de undefined. Esto se debe a que estamos tratando de acceder a los datos de nuestro método anterior. Pero primero, para hacer esto, tenemos que devolver esto de vuelta. Todo esto funciona igual que antes. También podemos encadenar en tantos de estos métodos entonces como 1, 2, y cada uno esperará en el resultado anterior terminando antes de ejecutar el código dentro. Mantendremos el control total sobre nuestra tarea asíncrona y el orden en el que se ejecuta el código. También podemos filtrar esto hacia abajo igual que cualquier otro objeto. Podríamos acceder al mensaje, que es la URL de la imagen que necesitas. Podemos hacer click en esto y abrir esto dentro del navegador. También podemos hacer uso de esta URL de imagen y pasarla a un elemento de imagen. Primero, agrega un elemento de imagen vacío justo encima de nuestro script, y luego en el segundo método entonces cuando sepamos que tenemos acceso a esta URL, podemos eliminar este log de consola, seleccionar nuestra imagen elementos con selector document.query, y luego establecer el atributo source para que sea igual a data.message. Vamos a guardar esto y refrescar el navegador. Cada vez que actualicemos, recuperaremos imagen aleatoria diferente de nuestra API. Este es el estado cumplido manejado. Pero ¿qué pasa si hay un problema y recuperamos un estado rechazado? Esto sucederá si hay un error al buscar los datos o completar la tarea que pedimos. Esto encadenamos al final un método de captura. Aquí, estamos encadenando el método de evento , eliminamos el punto y coma, y luego encadenamos al final del método catch el cual ejecutaremos si hay un error, pasamos ese error a esta función de devolución de llamada. Mucha función con el error basado en un registro de consola. Empecemos con una cadena de hubo un error. También podemos añadir al final el mensaje de error también. Si probamos esto y actualizamos, no vamos a ver nada dentro la consola porque la imagen está siendo devuelta con éxito. Para realmente probar esto, necesitamos saltar a las herramientas de desarrollador y entrar en la pestaña de red. Voy a seleccionar esto, y para hacer esto, en realidad podemos apagar nuestra red. Hagamos esto un poco más grande. Chrome tiene este desplegable que puedes ver aquí. Actualmente no usamos ningún estrangular, pero también podemos cambiar esto a una conexión lenta o incluso fuera de línea. Si hacemos esto y saltamos a la consola y actualizamos, apagar esta red significa cuando ahora no obtenemos la imagen que queremos. Ahora la promesa debería arrojar un error. Con todo esto, lo final que vamos a ver es el método finalmente. El método finalmente se ejecutará independientemente de si se cumplió la promesa o si fue rechazada. Esto también se puede encadenar al final. Al igual que con todos los métodos anteriores, también necesitamos eliminar el punto y coma como en el método finally, que nuevamente ejecuta una función de devolución de llamada. Colocar en un registro de consola con el texto de, siempre correré. Con la red todavía apagada, podemos refrescar y ver este mensaje. Volvamos a encender la red, refrescarnos, saltar a la consola, y aún vemos este registro de consola incluso cuando la promesa fue un éxito. El método finalmente es útil para dar seguimiento con algún código que necesitamos ejecutar después de que la promesa se haya resuelto. Alternativa sería colocar este código tanto en el entonces también las secciones de captura. Pero esto resultaría en código duplicado. Esto son promesas y cómo puede ser realmente útil con JavaScript asíncrono. Todo esto es posible porque el método fetch inicialmente devuelve una promesa de dar inicio a toda esta cadena. Pero ¿qué pasa con las cosas que no devuelven una promesa? Bueno, a continuación, echaremos un vistazo a cómo podemos manejar esto. 59. El constructor de la promesa: En el ejemplo anterior, podríamos empezar a usar promesas porque la API de Fetch devuelve una promesa. Pero ¿qué pasa con las funciones que no devuelven una promesa? Para arrancar las cosas, vamos a escribir una función personalizada simple, y esto se va a ejecutar y establecer algunos datos después de un tiempo de espera. Saltaré al archivo constructor promise, que actualmente está vacío dentro del script para crear una variable en la parte superior llamada data. Establezca esto en un objeto vacío. Crear función llamada getData. Entonces pase por dentro en nuestro setTimeout, que va a tomar en una función. Como función Entonces justo después de esto, lo ejecutaremos después de 2,000 milisegundos de retraso de tiempo. Después de dos segundos, todo lo que queremos tratar con esta función es establecer nuestro objeto de datos para que tenga un valor. Reasignaremos esto para que sea un nuevo objeto donde pasaremos en una propiedad de nombre igual a una cadena. Esto llamará a getData para ejecutar realmente nuestra función. Entonces al final registraremos el valor de los datos, podemos ver lo que recuperamos. Analizando nuestros datos. También podemos ir por el nombre también. Al navegador, abre el archivo y salta a la consola. En la consola ver el valor de undefined. Esto probablemente no es sorprendente porque accedemos al objeto de datos dentro del registro de la consola antes de que incluso hayamos establecido la propiedad name, los datos tardan dos segundos en establecerse. Esta es un poco una solicitud simulada a una base de datos, libre de manejar lo que sucede entre solicitar los datos y recuperarlos. No hay promesas son buenas para esto, pero esta función no devuelve una promesa por defecto. Para ello, podemos crear el nuestro propio usando el constructor de promesas. Constructores es algo que ya hemos visto con el nuevo operador en el pasado. Hemos mirado cosas como nueva matriz. Hemos mirado nuevo objeto y también nueva función. Todos estos crean una nueva instancia de un objeto. Recuerda que las promesas también son objetos. También podemos usar este nuevo operador para crear una nueva promesa nosotros mismos. En primer lugar comentar nuestro ejemplo por ahora, que es todo excepto la variable de datos. Quitar esto. Entonces podemos empezar a construir nuestra nueva promesa a continuación. Apenas con los ejemplos que hemos visto antes, usaremos la nueva palabra clave para crear una nueva promesa y este constructor toma una nueva función que se va a ejecutar. Esta función toma dos parámetros opcionales, una función para ejecutar si la promesa se resuelve en uno, si la promesa ha sido rechazada. Estos son nombres de nuestra elección, pero resolver y rechazar son bastante descriptivos. Cuál ha sido nuestra propia promesa personalizada, establecemos exactamente cuándo y dónde queremos que ejecuten estas funciones de resolución y rechazo. El primer paso es almacenar nuestra promesa dentro de una variable. Simplemente llamaremos a esta promesa. Puedo llamar a esto en un momento. Pero simplemente llamaré resolución para resolver esta promesa. Entonces después podemos hacer uso de esta variable promesa que está por debajo de la fríamente, luego atrapar y finalmente los métodos que miramos previamente. Podemos acceder a promise.then, y este método es exactamente el mismo que miramos en el video anterior, que toma en una función que se va a ejecutar, el código fue un éxito. Con esto en mente, colocaremos en un registro de consola con el texto del éxito. Permita esto y asegúrese de que no hay punto y coma al final. También encadenaremos al final de la promesa. El método catch, que también tomará una función. Recuerda que el método catch también será pasar el error, que podemos colocar dentro de un registro de consola. Pasemos ahora a la consola y veamos cuál de estos ha sido registrado. Vemos el valor del éxito, que no es de extrañar porque hemos resuelto esta promesa, lo que significa que ha tenido éxito. Esta función de resultado también puede tomar en un valor de cumplimiento que desea transmitir. Digamos una serie de éxitos. Entonces este mensaje de éxito también se transmitirá por la cadena si esto ha sido exitoso. El apartado exitoso es la sección de entonces. Podemos pasar esto a nuestra función. Podemos almacenar esto dentro de una variable como respuesta y luego podemos registrar esto en la consola. Refresca, y ahí vamos. Esto es útil si necesitas pasar algunos datos o mensajes personalizados a la sección de resultados. Pero volviendo al ejemplo anterior de buscar algunos datos que teníamos arriba, este sería un mejor ejemplo que simplemente enviar un mensaje. Lo que vamos a hacer es copiar y pegar esta sección de tiempo de espera desde el interior de la función. Entonces podemos pegar esto justo por encima la sección de resultados y descomentar las tres líneas. Entonces podemos subir la sección de resultados para estar dentro del tiempo de espera. También establecerá los datos y luego resolverá esta promesa. Esto significa que la promesa ahora solo debe resolverse después de que se hayan establecido los datos. Podemos probar esto ingresando a la consola. Salta a la sección de entonces, si esto ha sido exitoso con una nueva consola registra el valor de nuestros datos. Refrescar. Dale a esto dos segundos. Ver el mensaje de éxito, y nuestro objeto se ha actualizado con nuestra cadena. Así es como podemos manejar un éxito con una promesa. Pero ¿qué hay de rechazar? Bueno, ya que esta es nuestra promesa, podemos hacer que haga lo que queramos. Este ejemplo, lo que pasa con resolver con éxito es el nombre de Chris se ha establecido. Estoy rechazando si el objeto de datos está vacío. Podemos saltar a nuestro tiempo de espera justo debajo de donde establecemos nuestros datos. Podemos colocar una declaración if. Podemos comprobar si Object.keys tiene en nuestro objeto de datos. Podemos comprobar si la longitud de esto es mayor que cero. El nombre siendo la propiedad clave aquí, estamos comprobando si la longitud de este objeto es mayor que cero. Si lo es, esto significa que esto se ha establecido donde podemos pasar en la función de resolución. Un mensaje de éxito. no ser así, justo después de la declaración if pasará en rechazo, que habrá pasado a nuestra función con el mensaje de rechazado. Probemos esto. Tendremos conjuntos de propiedades de datos, por lo que debemos esperar el valor del éxito. Da a esto dos segundos. Esto ha sido un éxito. Si queremos revisar el estado rechazado, podemos comprobar si object.keys es igual a longitud de cero, lo que resulta en una promesa rechazada. Aquí está pasando un poco, pero la idea es bastante simple. Si una función por defecto no devuelve una promesa, podemos crear la nuestra propia. Esto puede resolver o rechazar en cualquier momento que consideremos que debería, dándonos un control total del comportamiento de nuestra función. 60. Manejo de múltiples promesas: Una vez que entendemos cómo funcionan las promesas, manejar un AyncTask se vuelve mucho más fácil. Pero ¿qué pasa si tenemos más de un AyncTask corriendo al mismo tiempo, esto puede causar diversos problemas. ¿ Esperamos la primera tarea para completar antes de pasar a la siguiente? A modo de ejemplo, si tuviéramos 10 AyncTask corriendo al mismo tiempo, si esperábamos a cada uno terminando antes de pasar a la siguiente, el retraso de cada uno realmente podría sumar. También, como ejemplo, ¿qué pasa si la tarea número 10 se basaba en el valor de la tarea número 3, pero la tarea 10 terminó primero. Bueno, para ayudar con algunos de estos problemas, tenemos acceso a algunos métodos útiles de promesa. Hemos cubierto algunos métodos hasta ahora, incluyendo entonces, catch, y finalmente, y estos próximos métodos van a lidiar con múltiples promesas, comenzando con un método llamado ALL. El método ALL pasa por encima de múltiples promesas y devuelve sola promesa y una sola promesa resulta a una matriz del resultado. Es útil para recopilar múltiples piezas de datos y tal vez agregarlos en un solo resultado. Echemos un vistazo a cómo funciona esto en el arrancador. Tener dos promesas separadas almacenadas en variables. Promesa número 1. Esto de nuevo es un ejemplo simple que hemos visto antes donde recuperamos una imagen de nuestra API. Si esto ha sido exitoso, entonces ejecuta una función que devolverá el valor de la respuesta. Junto con esto, tendremos promesa número 2, que está usando el constructor de promesas que se vio en el video anterior. Esto se resolverá después de dos segundos. he mantenido deliberadamente simples para este ejemplo. Pero imagina que queríamos saber si ambas fueron un éxito. En lugar de tener que revisar cada uno individualmente, bueno, para ello podemos hacer uso de promise.all. En la parte inferior, promesa de acceso, capital P. El método ALL. Vamos a pasar en una matriz que contenga ambas variables, así que promete 1, promesa 2. Este método promise.all tomará cualquier valor iterable como una matriz. Hemos mirado mucho en bucear sobre matrices durante esta clase. Además, este método ALL devolverá una promesa también, lo que significa que podemos encadenar al final varios métodos como entonces y atrapar. Haremos exactamente lo mismo que hemos hecho anteriormente. Encadenaremos entonces, lo que toma en una función. Esta función también puede tomar en los resultados. Registraremos esto en la consola. Después, si hubo un error, también podemos encadenar in.catch al final como una función ALL que toma en el error, colocar en log. Entonces vamos a darle una vuelta a esto. Al navegador, asegúrate de que la página actual esté abierta. Refrescar. Después de dos segundos regresamos, regresamos, y una matriz con dos resultados. El primero es nuestra imagen aleatoria, que se almacena dentro de este objeto. Si abrimos esto, podemos ver que éste ha sido un éxito. El segundo sin embargo, después del tiempo de espera, se muestra como indefinido, ya que la promesa en realidad no devuelve nada. Si queremos, podríamos pasar un tercer parámetro a setTimeout. Vamos a saltar y hacer esto. Separado por coma. Pasaremos en una cadena simple como resultado, que es un parámetro opcional para pasar a la función que estamos llamando, que se resuelve. Ahora, después de una actualización, deberíamos ver este valor dentro de la consola. También podemos probar un fracaso y ver qué pasa si se rechaza una de estas promesas. Podemos hacer esto en lugar de resolvernos, podemos pasar adentro, rechazar, y éste fuera y luego cogeré sección, se ejecutará el log de la consola. Vemos este valor de resultados que pasaremos aquí. Pero una cosa que notarás es que no vemos la imagen aleatoria. A pesar de que estamos pasando en ambas promesas para promise.all, sólo vemos el resultado del rechazado. Esto se debe a que al usar el método ALL, solo resolverá si todas las promesas que toma en resultados con éxito o si una sola falla. O bien estamos obteniendo con éxito una matriz que contiene todas las promesas como hemos visto antes o la primera que es rechazada. No obstante, puede haber ocurrencias cuando este no es el comportamiento que queremos. Es posible que aún deseemos que se devuelvan todas las promesas independientemente de si hubo un fracaso o no. Para ello, podemos reemplazar todos por todo resuelto. Todo resuelto todavía va a tomar en una matriz que contiene todas las promesas. Pero ahora, si guardamos esto y refrescamos, dale estos dos segundos. En lugar de ver el único fracaso, vemos todas nuestras promesas dentro de la matriz. El primero se cumplió. Veremos todo el valor. Entonces veremos el segundo que ha sido rechazado. Podríamos usar estos resultados de cualquier manera que quisiéramos, como hacer un bucear sobre ellos para manejar qué hacer si hubo un fracaso o un éxito. Por ejemplo, quizá deseemos saber cuáles han sido rechazados para que podamos llamarlos de nuevo. O incluso tal vez sólo mostrar a un usuario una determinada sección si la solicitud del usuario fue un éxito. Algo más que tenemos son dos métodos llamados cualquiera y raza. Ambos de ellos solo devolverán un valor. En primer lugar, echemos un vistazo a cualquiera que podamos usar en lugar de todos asentados. Guardar y refrescar y veremos lo que recuperamos. Esta vez no vemos el rechazo. Todo lo que vemos es nuestra imagen exitosa. Esto se debe a que cualquier método, como suene, resolverá en cuanto se cumpla alguna de las promesas que se le hayan pasado. Lo que básicamente significa la primera promesa, que es un éxito. Esto no siempre significa que va a ser el primero que se pasa en la matriz. Simplemente significa el primero que ha terminado. El método de carrera sin embargo, si echamos un vistazo a esto, Guardar y Refrescar, esto también devuelve la misma imagen aleatoria, pero esto devolverá la primera promesa que se le pasó, que se ha liquidado. Asentada podría incluso cumplirse o rechazarse. En nuestro caso, es una imagen aleatoria porque ésta regresa más rápido porque no tiene dos segundos de retraso. Independientemente de si la promesa que se le pasó fue un éxito o un fracaso, la primera de vuelta será la que se ve en la consola. Para recapitular, el método de carrera devuelve la primera promesa que encuentra cual resuelve o rechaza. El cualquier método también devolverá una promesa, pero ésta tiene que cumplirse. Ambos son muy útiles para tener si surge alguna de estas situaciones. 61. Async / Await: Con la llegada de ES 2017, llegó una nueva forma de manejar código asíncrono. Muchas veces hemos mirado previamente es redundante, todo sigue siendo algo que necesitamos saber, particularmente por lo que vamos a ver ahora, que es algo llamado async/await. Async/await es en realidad promesas detrás de escena, pero fue creado para parecer más simple, y ser más fácil de leer para los desarrolladores. Se ve más simple porque volvemos a algo más familiar, que es una función. En los archivos de inicio tendremos una imagen de ejemplo donde devolveremos una promesa que hemos visto anteriormente. Si tuvieras que usar en su lugar una función regular para establecer esta imagen, haríamos algo como esto. Esto probablemente creará una función llamada set image, y luego dentro, podríamos volver a hacer uso de nuestra llamada fetch. Pega esto y guarda esto dentro de una constante llamada respuesta. Entonces, intentemos hacer un registro de consola para la respuesta, y como todos ustedes saben de videos anteriores, aquí estamos tratando de acceder a este código asíncrono inmediatamente justo debajo antes de que potencialmente haya tenido la oportunidad para volver. Para ejecutar esto, llame a nuestra función set image, actualice la consola, volvemos al estado pendiente. Podemos ver la respuesta, que es nuestra URL, que originalmente llamamos dentro de aquí, en lugar de nuestra imagen real, que recuperamos. Lo que puede estar pensando que podríamos hacer a continuación es usar response.json. Vamos a probar esto. Almacene esto en el interior de una constante llamada imagen, que es igual a respuesta.json. Podemos pasar esta respuesta. Ahora, mira esta imagen, la consola. Vamos a intentar esto de nuevo. Esta vez obtenemos un error, diciendo response.json no es una función, y esto sucede porque los datos de la imagen aún no están disponibles. Tenemos promesas sabemos que tenemos que encadenar al final de toda la llamada fetch, luego métodos, que luego espera la respuesta exitosa antes de ejecutar una función. No obstante, aunque no estamos usando promesas esta vez, vamos a usar async/await. Para ello, tenemos dos sencillos pasos. Para convertir nuestra función regular a una función asíncrona, todo lo que necesitamos hacer es pasar la palabra clave asíncrona delante de ella. Una vez que hagas esto con una marca, qué línea de código queremos esperar sobre los datos que regresen antes de pasar a la siguiente. Ahora en caso de que queramos esperar a que la imagen regrese, y esto efectivamente pausará nuestra función y esperará a que los datos regresen antes de moverla hacia abajo al resto del código. Salvemos esto y veamos qué pasa. Si ahora actualizamos el error ya se ha ido. La promesa sigue siendo estados independientes, pero si lo abrimos, podemos acceder a los datos que necesitamos dentro de este objeto. Ya podemos ver si copiamos esta imagen con cotizaciones, ahora recuperamos nuestra imagen de perro al azar y el mensaje de éxito. El motivo por el que necesitamos sumergirnos en esta promesa es porque estamos tratando de acceder a nuestra respuesta.json en la línea justo debajo. Todavía hemos esperado nuestra imagen para volver, pero luego hemos iniciado sesión en la consola response.json. Pero recuerda de ejemplos anteriores, el método json también devolverá una promesa. Para hacer frente a esto, todo lo que tenemos que hacer es esperar a nuestro método json para terminar finalmente antes de registrar esto en la consola. Ahora si guardamos esto, intente esto de nuevo en el navegador, lugar de tener que saltar dentro la promesa y al objeto. Ahora, ver directamente la información correcta que necesitamos dentro de la consola. Ahora hemos devuelto la URL dentro de esta propiedad message, cual podemos utilizar para establecer nuestros elementos de imagen. Vamos a agarrar esto. Podemos quitar el registro de consola de acceso document.queryselector. No estaba en la imagen donde podemos establecer la fuente de la imagen para que sea igual a la image.message. Ahí vamos. Así es como podemos usar async/await con este estilo de función regular. Pero también hay diferentes tipos de funciones disponibles que has mirado, incluyendo expresiones de función y funciones de flecha. Así como esto. Con una expresión de función. Di dejar func como el nombre de la variable y decir esto igual a nuestra función, que simplemente va a devolver una cadena de hey. El equivalente de la función de flecha se vería así. Aquí tenemos nuestra expresión de función y luego tenemos nuestra función de flecha. Aync/await se puede utilizar en cualquiera de estos. La forma de marcar nuestra expresión de función como asíncrona es al igual que arriba, pasando la palabra clave asíncrona justo antes de la palabra clave function, y también lo mismo para nuestra función de flecha también. Podemos colocar esto justo al principio, y luego podemos usar la palabra clave await cualquier parte dentro del cuerpo de la función. Asíncrono o await es una solución limpia y potente para manejar tareas asíncronas. Pero hay que tener cuidado de no dejarnos llevar demasiado. En este ejemplo, estamos configurando la imagen en la siguiente línea. Tiene todo sentido esperar a que los datos regresen antes de utilizarlos. Pero imagina si tuviéramos algo como esto. Si duplicamos esta respuesta, y pedimos nuestras dos imágenes separadas. Lo que estamos haciendo aquí es que estamos haciendo dos solicitudes dos imágenes independientes al mismo tiempo. Pero el problema que tenemos actualmente es que la segunda imagen no se va a llamar hasta que la primera haya regresado porque usamos la palabra clave await. Ahora esto causará un retraso de tiempo innecesario en el código a continuación. Aquí, estamos tratando de acceder a nuestra primera imagen, pero aún tenemos que esperar a que la segunda imagen sea devuelta antes de que esta línea incluso se ejecute. Usamos una ola, pero tenemos que esperar los datos, que necesitamos y después. Pero aún no queremos bloquear el resto del código para que se ejecute, si no es necesario. Manejar múltiples solicitudes como esta es algo que veremos a continuación con más detalle. Junto con pronto mirar el manejo de errores también. 62. Manejo de múltiples esperas: Al final del video anterior, discutimos los efectos de múltiples llamadas de espera. Aquí, tenemos tres, tenemos respuesta, responde 2, y respuesta 3, que todos hacen la misma llamada fetch. Sabemos, por ejemplo que si la segunda imagen necesitaba esperar a que volvieran los datos de la primera imagen antes de ser ejecutados, esto estaba completamente bien. No obstante, aunque si la imagen 2 no se basa en la primera imagen, no debería bloquear este código innecesariamente. Con múltiples solicitudes de datos asincrónicos como este, nos trae de vuelta a un video anterior, donde miramos cómo manejar múltiples promesas. ¿ Y si queremos saber si uno falla o si todos fallan, cómo entonces iremos manejando esto? Con promesas podríamos usar métodos como todos y todos resueltos. Pero con código asíncrono, estas promesas también bajo el capó. Todavía podemos hacer uso de estos métodos como todos. Por ejemplo, abajo en la parte inferior dentro de nuestra función, podemos acceder promesa a todos, que toma en una matriz. Podemos pasar en respuesta, respuesta 2, y también respuesta 3. Almacenemos esto dentro de una variable o una constante llamada resultado, y luego logremos esto en la consola. Un error, por lo que necesita respuesta. Esto aún devuelve una promesa, pero recuerda que el método all se resolverá en una sola promesa, si todas las promesas que toma en resuelven con éxito, o si una sola falla. Con esto en mente, también podemos usar la palabra clave await para asegurarnos que todos se resuelvan primero antes de pasar a la siguiente línea. Pase en espera, es antes de esto. Ahora estamos esperando que las tres de estas promesas se completen ahora. Esto significa que ahora podemos eliminar la palabra clave await antes cada una de estas llamadas independientes gratuitas. Vamos a probar esto, refrescar. Ahora obtenemos una matriz con las tres respuestas separadas. Podemos entrar en cada uno de estos. Pero uno de los problemas que aún tenemos es, si miramos la URL, esta es la URL de imagen que estamos solicitando dentro de un fetch, no la imagen JPEG real, que está regresando de la API. Si recuerdas, para acceder a esta imagen real que necesitamos, esta está contenida dentro del cuerpo, y para leer el contenido del cuerpo, nuevamente necesitamos hacer uso del método JSON. El método JSON leerá el contenido de esto y lo convertirá en un objeto JavaScript que podemos leer. Como podemos ver tenemos una matriz con tres valores separados. Lo que podemos hacer, es que podríamos eliminar nuestro registro de consola y bucle sobre los tres de estos valores con el método forEach, por lo que resultados. Para cada función, almacene esto dentro de valor. Ahora podemos registrar este valor en la consola y llamar al método JSON para cada uno de estos valores. Esto ahora nos devuelve nuestras tres promesas separadas. Pero si abrimos esto, vemos un objeto familiar en el que necesitamos sumergirnos para recuperar nuestra imagen real. Esto sucede porque como hemos visto anteriormente, el método JSON también devolverá una promesa. Para esperar que estos datos regresen antes de acceder a esto, podemos usar la palabra clave await, y debido a que la palabra clave await solo se puede usar dentro de una función, podemos marcar esto como asíncrono. Recargar. Lo cual luego nos devuelve nuestras tres imágenes, que necesitamos. Todo este método ahora significa que podemos hacer algo después todas las promesas hayan sido exitosas, o si una sola falla. Hablando de fracaso, el tema del siguiente video es mirar cómo podemos manejar errores usando async await. 63. Manejo de errores: Este video te va a mostrar algunas formas de manejar errores en tu código asíncrono. El código es genial cuando todas las cosas van bien, pero cuando las cosas no lo hacen, tenemos que manejar qué hacer. Algunos de los métodos de promesa que hemos mirado nos dan algún manejo de errores. Por ejemplo, el método all falla si falla una promesa, por lo que tenemos algunas opciones ahí, pero también necesitamos manejar todas las demás situaciones, ya sea un manejador de errores general, o manejando cada solicitud específica. En el proyecto de inicio, en el archivo de manejo de errores, tenemos un elemento de imagen vacío en la parte superior y también una sola función. Nada nuevo aquí para esta función, esto es simplemente agarrar una URL de imagen usando la API de Fetch. Esperamos que regresen los datos, que se almacenan en respuesta. Luego extraemos estos datos a través del método JSON, y luego devolvemos la propiedad image que contiene la URL. Justo antes, usamos esta función, echemos un vistazo a otro ejemplo simple. Justo debajo, vamos a crear una nueva función con cualquier nombre, y todo esto va a hacer es devolver cualquier cadena simple. Después de esto, vamos a registrar la consola el valor de retorno, llamamos a nuestra función, se abre en el navegador, y ahí está nuestro mensaje de retorno. Nada inesperado aquí, pero si marcamos esta función como asíncrona, así que justo antes de la palabra de función, marque esto como asíncrono, y esta vez recuperamos una promesa. Sólo vamos a dejar esta función ahí, pero solo tenlo en cuenta por un momento. Tan pronto como marquemos una función como asíncrona, entonces devolverá una promesa. Sabemos que tenemos una función para agarrar la URL de la imagen, así que vamos a crear una segunda función que en realidad va a establecer la URL de la imagen a través de este elemento de imagen. Esto también puede ser asíncrono, llame a este setImage. Entonces por dentro, todo lo que vamos a hacer es agarrar nuestros elementos de imagen con el selector document.query y establecer la fuente para que sea igual al valor de retorno de la función anterior. Empiezo con el elemento de imagen, y pongo la fuente igual a nuestra función anterior, que es getImageUrl. Tenemos que llamar a esto. La función GetImageUrl es asíncrona, por lo que necesitamos esperar a que esta promesa sea devuelta antes de que podamos realmente usarla. Vamos a esperar esta función devuelto valor. Todo esto está habilitado ya que hemos marcado su función como asíncrona. Llamemos a esto justo debajo, setImage. Antes cuando manejamos errores usando promesas, simplemente encadenamos en una sección de captura a la promesa. Esta función setImage también es asíncrona, que también devuelve una promesa igual que hemos visto antes con el ejemplo simple, lo que significa que podríamos encadenar al final, luego todo el bloque catch que es va a correr a continuación. Podemos encadenar esto al final, asegurándonos de que no haya punto y coma, agregue captura. Catch ejecutará una función que toma en el mensaje de error y lo colocará en un registro de consola el mensaje de “noooo” y también una segunda con este error. Ahora, veamos qué pasa si tratamos de llamar a esta función. ¿ Nos devolvemos el error que cogeríamos o hacemos configuramos la imagen. Esta llamada en particular fue un éxito, por lo que vemos que la imagen regresó de nuevo. Para probar el bloque catch, necesitamos apagar la red como lo hemos hecho anteriormente, así que salta a la pestaña Red. Debajo de aquí, vamos a configurar los presets para que estén fuera de línea, ahora podemos refrescar, no vemos la imagen. Salta a la consola. Nuestro primer registro de consola y nuestro segundo registro de consola no han podido obtenerse. Vemos que esto funciona bien y estamos mezclando la sintaxis de asíncrono esperan con promesas. Si quisiéramos simplemente pegarnos con la sintaxis de la promesa o mover el manejo de errores a la propia función, podríamos usar algo llamado try and catch. Intenta atrapar, como suena, intentará hacer algo, y si funciona, eso es todo genial, si no, cogemos el error y lo manejamos de cualquier manera que quieras. Eliminemos la sección catch de setImage, y luego dentro de nuestra función setImage, creamos un try-block y debajo de un bloque catch, que también va a tomar el mensaje de error. Esto es razonablemente simple, todo lo que tenemos que hacer es mover nuestro código que quieres correr dentro del bloque try, así que corta esto, pega esto en la sección try, y luego dentro del catch área, podemos colocar en los mismos registros de consola, por lo que una cadena y también un segundo registro de consola con el mensaje de error que se pasa a esta función. Salvemos esto y probemos esto. Ten en cuenta que mi red aún está desactivada, así que si lo intentamos de nuevo, no vemos la imagen, verás nuestros dos mensajes de error dentro de la consola. Tratemos de volver a encenderlo, devolver la red, ahora se devuelve la imagen, y no vemos ninguno de estos registros de consola corriendo dentro de aquí. Esta sección try and catch se está ejecutando sincrónicamente, por lo que vamos a ejecutar la primera sección que es try. Si todo esto funciona, eso está completamente bien, pero si falla, entonces se moverá hacia abajo al siguiente bloque catch y ejecutará el código contenido dentro de ahí. Además de esto, también tenemos una sección por fin 2. Esto funciona igual que cuando encadenamos finalmente al final de una promesa. Por último se ejecutará siempre sin importar si se cumplió o rechazó la promesa. En la parte inferior, pase por fin, y simplemente colocaremos en un sencillo registro de consola. Probemos esto, refrescamos y vemos el registro de la consola con el texto de siempre se ejecuta. Así como nota lateral rápida, la captura o el bloque finalmente necesitan estar presentes. Debe tener al menos uno de estos en su lugar, o justo como este ejemplo, podemos usar ambos. Esto está bien para la captura de errores generales, pero ¿qué pasa si quisiéramos saber qué parte del código try falló? Por el momento, esto es bastante simple porque solo tenemos una línea de código. Pero ¿qué pasa si esta sección try hizo más que esto? Para esto, podríamos encadenar un bloque catch directamente en la tarea asíncrona y para ver un ejemplo, solo voy a copiar esta función completa, comentar esto para referencia, luego pegarlo en abajo. Podemos eliminar todo el manejo de errores que acabamos de agregar, que incluye el catch, el finalmente, y también el try-block dejando nuestra sencilla función asíncrona. Con esto, entonces podemos quitar el punto y coma, entonces podemos encadenar catch al final, dentro de catch, podríamos pasar una función directamente dentro, o si queríamos reutilizar esta función, podríamos hacer un función separada dentro de nuestro código. Vamos a crear una función justo encima llamada error de mango. Apenas cogeremos nuestros dos mensajes de error, pegarlos en. El error también tomará en el mensaje de error, entonces podemos llamar a esto dentro de catch. Esto nos da una función reutilizable separada, que luego podemos encadenar al final de múltiples promesas. Vamos a probar esto. Ahora deberíamos ver nuestros dos mensajes de error. Si hay un fracaso. Si no, vemos la imagen, esto funciona bien. Tratemos de apagar la red una vez más, ir a la consola, ahí nuestros mensajes de error dentro de aquí. Por supuesto, un registro de consola no sería suficiente en una aplicación del mundo real, tal vez quisiéramos ocultar la imagen si hubiera un error o incluso agregar una imagen de titular de lugar en su lugar. Pero la clave aquí es hacer algo en lugar de simplemente ver el sitio web o el desglose de la aplicación. Manejar errores es una gran parte del JavaScript asíncrono, y aquí vemos algunos patrones comunes que puedes usar en tus proyectos, lo que realmente mejorará la funcionalidad y la experiencia del usuario. 64. Dejando así pronto: Este primer proyecto que encontramos en la última sección de esta clase, se llama Leaving So Soon, y contiene algún código de inicio por lo que vamos a enfocarnos en el JavaScript. Este proyecto es lo que se llama emergente de intención de salida. Un pop-up de intención de salida es básicamente una forma de captar la atención del usuario si intentan salir de tu sitio. Tenemos algo de HTML simple, tenemos nuestro título, y luego tenemos esta sección emergente dentro de un div. Si pasamos al proyecto y refrescamos, todo lo que vemos actualmente es este título. La idea es que tengamos un sitio web simple como este y es posible que hayas visto tipo de sitios web al navegar en línea. Si intenta mover el ratón hacia arriba, e intenta cerrar el navegador, o incluso para buscar o navegar lejos del sitio, posible que a menudo vea aparecer una ventana emergente. Este pop-up podría contener información. Puede contener un código de cupón, o simplemente en general cualquier cosa para mantener al usuario en su sitio. No vemos esta sección emergente porque si echamos un vistazo a este div, tiene el ID de exit pop-up. Dentro de nuestras hojas de estilo, si echamos un vistazo a esta sección, el tipo de visualización está actualmente configurado en ninguno. Si cambiamos esto para ser flex y refrescar, el fondo se desvanecerá debido a la animación CSS, que tenemos justo en la parte inferior. Nuestro pop-up ahora aparece con todo el texto dentro. El contenido dentro de estos sitios web o dentro de este pop-up es irrelevante. La idea es que queremos activar esta configuración de visualización una vez que el ratón de un usuario salga de la parte superior del navegador. Por ahora, volvamos a nuestra hoja de estilo, y lo ocultaré por defecto. Entonces, llegamos a trabajar dentro de nuestro guión, que ya está vinculado abajo en la parte inferior. Vamos a abrir esto. Si piensas en lo que queremos hacer aquí, no hay muchas tareas que necesitamos ejecutar. Comencemos creando una función que se va a ejecutar cuando el ratón haya salido del área de la ventana. Una vez que el pop-up se esté mostrando realmente dentro del navegador, también necesitamos una forma de hacer clic en una X en la esquina y cerrar esto hacia abajo a. Crea una segunda función llamada ClosePopup. Empezaremos con nuestra primera función, que es LeftWindow y para ello, necesitamos escuchar un evento de ratón. Vamos a seleccionar el documento que es nuestra página web completa, y luego escuchar cuando el ratón sale con el evento del mouse out. Vamos a agarrar nuestros documentos. Podemos agregar un oyente de eventos. Eventos. Queremos escuchar es el mouse out, que entonces va a desencadenar nuestra función anterior. Recuerda, con eventos esto también toma en la información del evento a la que podemos acceder dentro de una variable. Empecemos registrando esto en la consola. Registra la información del evento en la consola, refresca, y podemos ver si movemos el mouse fuera del área de documentos, este evento del mouse está ahora disparado. Esto también funcionará si vas por el otro lado, y también los dos primeros. Salta aquí. El ratón coordina que nos interesa es este ClientX y el CLienty. Este es un valor de píxel que nos dirá ubicación del mouse una vez que se disparó este evento. Al igual que cuando miramos el Lienzo temprano, X es la dirección izquierda o derecha, y la Y es de arriba a abajo. Ya que estamos tratando de tener cuidado con el ratón, dejando la parte superior del navegador para cerrar esta ventana, nos va a interesar la dirección CLienty. Podemos filtrar esto abajo, e.clienty. Vamos a recargar. Ahora, si vamos a la cima, podemos ver en cuanto pasamos la parte superior del área del navegador, entonces comenzamos a obtener un número negativo, lo que significa que el muy arriba aquí es el valor de cero. Tenemos que escuchar para tal vez un área de 20 píxeles, que mostrará todo el pop up tan pronto como el usuario mueva el mouse hacia arriba hasta el área superior del navegador. Podemos quitar el registro de la consola. Colocar en una declaración if. Podemos decir si e.Clienty es menor que cualquier valor de su elección, voy a ir por 20. como hemos visto dentro de estas hojas de estilo, podemos agarrar nuestros elementos con el ID de exit-popup y cambiar el tipo de display. Agarra esto con el documento.QuerySelector. Envío el DNI de exit-popup. Establezca la propiedad style de display para que sea igual a flex. Vamos a probar esto. Refresca y ahora muévete a la parte superior, y éste activará nuestro pop-up. Se puede pensar que todo esto está funcionando bien y esto es todo lo que tenemos que hacer. También tenemos que dar algunos pasos para que no irritemos al usuario. Necesita activar esta cruz para que active nuestra función ClosePopup. Pero probablemente solo queremos ejecutar este código para activar el pop-up después de una cierta cantidad de tiempo, y también queremos asegurarnos de que esto solo se active una vez en la visita del usuario. Para asegurarnos de que esto solo se active una vez, haremos lo contrario, y eliminaremos el oyente de eventos de los documentos. De los primeros videos, sabemos que necesitamos copiar la misma información de addeVentListener. no podemos probar esto Todavíano podemos probar estoporque también necesitamos poder cerrar la ventana hacia abajo antes de poder reactivarla. Haremos eso ahora iremos al área ClosePopup, y luego haremos lo contrario estableciendo el tipo de visualización para que sea igual a ninguno. Para activar esta función, necesitamos escuchar un click en nuestra cruz. Dentro de la página de índice, el lapso contiene el área transversal. Vamos a agarrar esto dentro de nuestro guión, debajo de la parte inferior, document.QuerySelector. Seleccionaremos nuestro palmo. Almacenar esto dentro de una constante llamada CloseBtn. Agarra los elementos, agrega un oyente de eventos. Queremos escuchar los eventos click, que ejecutarán nuestra función anterior. Vamos a probar esto. Muévete a la parte superior para activar el pop-up. Haga clic en la cruz. También podemos ver si nos movemos a la parte superior del navegador, nuestro pop-up no se reactiva porque eliminamos el oyente de eventos. Todo bien, esto está funcionando bastante bien. Pero una adición rápida que haremos, es asegurarnos de que el pop-up no se active tan pronto como el usuario visite el sitio. Si hay, por ejemplo, escrito en algo en la parte superior y luego se movió de inmediato, no quieres que el pop-up aparezca de inmediato. Lo que haremos es colocaremos un setTimeout para que solo active esta función después de un cierto retraso de tiempo. Llama a un setTimeout. Pase en una función donde podamos mover nuestro ratón hacia fuera evento, lo que desencadena nuestra función. Sólo llamará a esto después de un retraso de tres segundos. Prueba esto para que podamos mover nuestro ratón hacia arriba durante los primeros tres segundos. Entonces, después de tres segundos, nuestra función está activa. Proyecto bastante simple, y podemos hacer bastante con una pequeña cantidad de código JavaScript. Es algo que puede encontrar útil hora de construir sitios web en el futuro. Como será nuestro próximo proyecto, que será un carrusel de imágenes, que construiremos completamente desde cero. 65. Imagen Carousel- Establecer Las Imágenes: En nuestro próximo proyecto, vamos a construir en un carrusel de imagen. Este va a ser el resultado final, y está completamente construido con JavaScript. Lo que tendremos es una imagen principal grande en la parte superior. Podemos recorrer las imágenes inferiores para reemplazar esto usando las flechas izquierda y derecha. Además, podemos saltar a cualquiera de estas imágenes haciendo clic en ellas, y colocándolas hasta la sección superior. Esto va a armar muchas de las habilidades que has aprendido y también ver mejor cómo funcionan las cosas en práctica con una app del mundo real. Empecemos esto de nuevo en los archivos de inicio. Si saltamos a la siguiente sección, que es el carrusel de imagen, tenemos algún código de inicio. Tenemos una página de índice muy simple, estaremos inyectando todos los contenidos por JavaScript. Todo lo que tenemos es un div vacío con el id del carrusel. Colocaremos en todos los contenidos de la imagen, y luego enlazaremos a nuestro guión. El script se encuentra dentro de la carpeta carrusel, que contiene nuestras imágenes, nuestras hojas de estilo, y también el JavaScript para hacer que esto funcione. Proporcionado con este curso hay cinco imágenes diferentes que se pueden reemplazar y también algunos CSS básicos. Acabamos de tener un poco de estilo básico. Por ejemplo, establecemos el carrusel principal para que sea un cierto ancho y también lo colocamos en el centro con margen 0 auto. Tenemos algunos efectos de hover. Aparte de eso, algún estilo general junto con la clase pequeña y la grande que tenemos aquí. Estaremos agregando estas clases más pequeñas que grandes a cada una de estas imágenes para que quepan muy bien en la pantalla. Empecemos. Saltamos a nuestro carousel.js vacío. Empezaremos agarrando esta sección div carrusel y también crearemos una matriz con todas las imágenes. Salta en el carousel.js. Empezaremos creando una matriz de nuestras imágenes. Cada uno de estos va a ser una cadena que apunta a la URL dentro de la carpeta de imágenes. Si has usado tus propias imágenes, recuerda cambiar los nombres dentro de aquí para que coincidan con los que has colocado dentro. El primero, esto está en la carpeta carrusel, y la ruta del archivo es images/beach.jpg. Duplicemos esto para darnos cinco imágenes diferentes. El segundo fueron los elefantes. Tenemos pasto. Tenemos lago, y el último es pueblo. A continuación, tomaremos una referencia a nuestro carrusel. Almacenaremos esto dentro de una constante llamada wrapper es igual al selector document.query, más en el id del carrusel. El siguiente paso, vamos a crear una función que va a agarrar todas estas imágenes, bucle sobre estas y colocarlas en la pantalla. Así que crea una función a continuación llamada setImages. El primer paso dentro de esta función es agarrar nuestra envoltura, y borraremos cualquier contenido existente. Esto es para que podamos repetir el proceso de configuración de nuestras imágenes, pero a veces van a estar en un orden diferente. Eliminaremos cualquier imagen extra agarrando nuestra envoltura y configurando el HTML interno para que sea una cadena vacía. Antes de que me olvide, llamaremos a nuestra función desde abajo, y luego agarra nuestras imágenes y crea una para cada bucle para recorrer cada uno de estos, images.foreach, más función interna. Crearemos una referencia a cada una de estas y lo llamaremos fuente de imagen, ImagesRC. Abre el cuerpo de la función, y luego dentro aquí, vamos a crear un nuevo elemento de imagen, almacenar esto dentro de una variable llamada elements, documents.createElement. Escribe un elemento de imagen. Entonces tenemos que establecer la fuente del elemento de imagen para que sea igual a esta variable. Agarra nuestro elemento, establece el atributo fuente para que sea igual a nuestra fuente de imagen. Podemos entonces agarrar nuestra envoltura, que almacenamos dentro de esta constante, entonces podemos añadir a este nuevo elemento, wrapper.appenChild, más en nuestro elemento recién construido. Pasemos al navegador y veamos lo que tenemos. Tenemos nuestras cinco imágenes diferentes de este bucle, pero si echamos un vistazo a la versión final, no solo queremos cinco imágenes aleatorias colocadas dentro del contenedor. Lo que queremos hacer es hacer que la primera imagen sea grande y luego crear una sección separada hacia abajo en la parte inferior con las pequeñas imágenes restantes. Para ello, crearemos un envoltorio para todas las imágenes pequeñas por la parte inferior, y luego seccionará esto del lugar unas pequeñas imágenes dentro de aquí, y la imagen grande en la parte superior. Primero, volvamos a saltar a nuestra función y crear un nuevo envoltorio para las cuatro imágenes pequeñas en la parte inferior. Justo después de donde despejamos nuestra parte superior y creamos una nueva constante llamada el SmallimageWrapper. Esto es igual a document.createElement. Este puede ser cualquier elemento que desee, como un div o una sección, no importa. Entonces toma nuestra sección, y le daremos una identificación única de SmallimageWrapper. Ahora lo que queremos hacer es bucle sobre las cinco de nuestras imágenes en la matriz. El primero necesita colocarse en el envoltorio, y luego las cuatro imágenes restantes deben colocarse dentro de nuestra pequeña envoltura de imagen. La forma en que podemos hacer esto es seleccionando primero nuestro envoltorio completo y comprobando si tiene algún contenido actual. Si aún no tiene un elemento de imagen asignado a este envoltorio, esto significa que es una primera imagen en la matriz. Lo que podemos hacer dentro de nuestro bucle es que podemos colocar en una declaración if, y podemos comprobar si nuestro wrapper no tiene ningún nodo hijo. ¡ Podemos decir! Wrapper.hasChildNodes. El código dentro de aquí solo se ejecutará si este contenedor está vacío y no contiene ninguna imagen adicional dentro. Este siempre será el caso si estamos haciendo un bucle a través y en la primera imagen. Si este es el caso, queremos establecer la clase. Si miramos nuestras hojas de estilo, queremos establecer esta clase de grandes porque esto tiene un ancho del 100 por ciento. Si no, agregaremos la clase de pequeño, lo que te da este tamaño más pequeño. Es agregar una clase, podemos agarrar nuestros elementos.classlist.add, colocar en la clase de grandes, y también la clase de carrusel. Esta clase de carrusel, si volvemos a volver a la hoja de estilos, convertirá el cursor en un puntero cuando el usuario pase el puntero sobre la imagen. Este solo debería aplicarse al primer elemento dentro de nuestra envoltura, lo contrario debería aplicar para las cuatro imágenes restantes. Agregaremos una lista de clases de pequeños. Agregaremos todo pequeño y también carrusel. Seguimos obteniendo el efecto hover, pero esta vez ya que estamos tratando con las cuatro imágenes más pequeñas, no queremos agregarlas al envoltorio principal. En cambio, queremos agregarlos a nuestra pequeña envoltura de imágenes que acabamos de crear. Entonces agarremos esto, niño abierto, colocando en nuestros elementos. Salvemos esto y probemos esto. Ahí vamos. Ahí está nuestra imagen grande y las cuatro imágenes pequeñas en estos div separados. Así como resumen, lo que hemos hecho aquí es que hemos creado un envoltorio grande para toda nuestra sección. Hemos creado una función llamada set images. Tan pronto como esto se ejecute, borrará cualquier contenido existente del wrapper, lo que significa que cuando estamos bucle sobre nuestras imágenes, si este envoltorio está vacío, esto significa que es un primer elemento en la matriz, por lo tanto le damos la clase grande. De no ser así, son las cuatro imágenes restantes donde agregamos el clúster de pequeño y también colocamos esto en un div separado. Esta es una buena primera etapa para nuestro proyecto. En los próximos videos, echaremos un vistazo a diversas otras funciones como reordenar estas imágenes, cómo intercambiar las imágenes alrededor, y también cómo colocar en las flechas para ir a izquierda y derecha. 66. Imagen Carousel- Creando Las Flechas: Estamos en el escenario ahora dentro de nuestro proyecto donde tenemos las cinco imágenes mostradas en pantalla. Tenemos una imagen de característica grande en la parte superior, luego de cuatro miniaturas más pequeñas a continuación. Tenemos algunas mejoras que hacer, queremos poder hacer click en cualquiera de estas imágenes y lugares más pequeños en la sección destacada en la parte superior. También queremos poder rotar estos alrededor agregando una pequeña flecha a la izquierda y también a la derecha. Empecemos con esto agregando las flechas una vez que se cargan las imágenes. Para ello, podemos colocarlos en una función independiente y llamar a esto. Déjame llamar a nuestras imágenes. Justo en la parte inferior de esta función, llamaremos a nuestra función, que vamos a llamar SetArrows. Esta es la función que crearemos a continuación. Justo debajo esto configura nuestra función que era SetArrows. SetArrows no necesita tomar nada como parámetro, así que lo que tenemos que hacer aquí es que podemos crear algunos iconos usando entidades HTML y almacenarlos como el HTML interno de un elemento span. Lo que necesitamos son dos constantes, la primera es la flecha izquierda apenas igual a document.createElement como en un lapso. El motivo por el que estamos usando el span es porque por defecto se trata de un elemento en línea, por lo que podemos colocar estos en línea con nuestras cuatro imágenes. La flecha izquierda, vamos a acceder a estas constantes y establecer el HTML interno para que sea igual a nuestra entidad HTML y el código para la flecha izquierda es la ‹ Ambas de estas flechas, es necesario hacer click en estas y reordenar todas nuestras imágenes. Seleccionaremos nuestras constantes y agregaremos un oyente de eventos ahora es un clic libre, que va a activar una función. Todavía no hemos creado esta función, pero se llamará ReOrder y solo para que no arrojemos ningún error, crearemos esta función arriba. Esto no necesita tener ningún contenido, volveremos a esto. Justo debajo de nuestro oyente de eventos , haremos prácticamente lo mismo, pero esta vez por la flecha derecha, crearemos los elementos span con documento. CreateElement, establezca el HTML interno, rightRow.innerHTML. El código de entidad HTML para la flecha derecha es ›, que es solo uno arriba de la flecha izquierda. Añadir un oyente de eventos. también está escuchando un evento click, que activará la misma función. Esas son nuestras dos flechas creadas con los contenidos y el oyente del evento. Pero lo que ahora tenemos que hacer es sumar también ambos a una determinada sección. Si volvemos a nuestra primera función que fue setImages, tenemos este SmalLimageWrapper. Esta es una sección div que contiene más de cuatro miniaturas pequeñas, por lo que agregaremos ambas a esta sección. La forma en que podemos hacer esto al principio y al final, es usar un método JavaScript llamado AppendChild, que agregará esto al final del div colocado a la derecha. Entonces para la flecha izquierda, podemos usar el método de prepend, que agregará esto al inicio mismo de nuestro div. Hagamos esto en la parte inferior de nuestra función SetArrows. Primero agarremos la sección, así que en el interior de una constante llamada SmalLimageWrapper, el document.QuerySelector, esto tiene el ID de SmallimageWrapper. Agarra esta sección. Como acabo de mencionar, colocaremos la flecha derecha en este contenido con appendChild, como lo buscamos anteriormente. Esto agregará esto al final de nuestra sección div después de nuestras imágenes. Coloca en nuestra flecha derecha, luego agreguemos nuestra flecha izquierda al inicio, usaremos el método de prepend e insertaremos nuestra flecha izquierda. Probemos esto. Ahora después de actualización todavía no vemos nuestras flechas en la pantalla. Echemos un vistazo en la consola y veamos si esto nos da alguna pista. Dentro de aquí podemos ver no podemos leer propiedades de null, leyendo appendChild, así que cuando tratamos de anexar un nuevo elemento a nuestro envoltorio de imagen única, parece que estamos obteniendo un problema. El motivo por el que esto sucede es porque tenemos un SmallimageWrapper que estamos creando en la parte superior. Cuando configuramos nuestras imágenes, tenemos el envoltorio principal que contiene nuestro carrusel completo y luego, tenemos nuestro SmallimageWrapper, que estamos tratando de seleccionar por este ID dentro del bucle. Pero cada una de nuestras imágenes, estamos creando una nueva imagen elementos almacenados en esta variable, agregamos ya sea en la clase grande o la pequeña, y si se trata de una imagen pequeña, entonces añadimos en estos cuatro pequeñas imágenes a este smalliimageWWraper. Pero actualmente, en realidad no estamos agregando un SmallimageWrapper al DOM, todo lo que estamos haciendo es crearlo y estamos agregando nuestros cuatro elementos, pero en realidad no estamos colocando esto dentro del DOM. Al menos entonces, podemos seleccionar abajo en la parte inferior. El único momento que algo se está agregando al DOM es cuando agregamos a nuestro envoltorio este elemento. Agregar el elemento directamente a nuestro envoltorio está completamente bien si esta es la imagen grande porque va a ir directamente dentro del carrusel principal. No obstante, sin embargo, en cambio, cuando estamos tratando con una imagen pequeña, queremos asignar estos SmallimageWrapper a esta sección. La forma en que podemos hacerlo es seleccionando nuestro elemento y estableciendo esto igual a nuestro SmalLimageWrapper. Este SmalLimageWrapper contendrá todas nuestras cuatro imágenes pequeñas y luego agregaremos esto a nuestro envoltorio principal. Ahora si guardamos esto y refrescamos, ahora podemos abrir esto arriba, vemos nuestras dos flechas saltar a los elementos y si entramos en el cuerpo, vemos nuestro envoltorio principal con id de carrusel. Podemos abrir esto. Vemos nuestra primera imagen con la clase de grande. Sólo para aclarar, éste se asigna porque en cuanto empezamos a recorrer todas nuestras imágenes, verificamos si esta sección está vacía, si es más grande con la clase de grandes y añadir esto a nuestra envoltura. De no ser así, las cuatro imágenes restantes harán la clase sea pequeña y luego se sumará a nuestro SmallimageWrapper, que luego se pasará a nuestros elementos y luego podremos sumar estas al DOM, que podemos ver si mira este div justo aquí. Podemos abrir esto. nuestro elemento span que acabamos de agregar con prepend, tenemos nuestras cuatro imágenes y luego, el lapso final que agregamos con appendChild. 67. Image Carousel - Imágenes de Reordenar: Anteriormente configuramos nuestras flechas izquierda y derecha y también las vinculamos a una función llamada reorden. Lo hicimos creando nuestras flechas dentro de esta función, usando nuestra para un evento click, que en ella activó nuestra función. Lo que vamos a hacer ahora es básicamente crear una nueva matriz. Esta nueva matriz se va a construir reordenando el orden de todas estas imágenes. Haremos esto dentro de nuestra función tomando primero la información del evento desde el click, y la razón por la que estamos haciendo esto es porque necesitamos determinar en cuál de estos botones se ha hecho clic. Necesitamos saber si es el botón izquierdo o el botón derecho. Podemos hacer esto agregando un ID a cada uno de estos, lo que la izquierdaRow.id es simplemente igual a izquierda. Entonces baja a la derechaRow.ID derecha. Ahora podemos acceder a este ID por los elementos información del evento. Sabemos de previamente, al hacer un registro de consola, si registramos el valor de e.target, obtenemos los elementos reales dentro de la consola. Haga clic en cualquiera de estos obtener el botón derecho, y luego el botón izquierdo. También podemos filtrar este objeto hacia abajo, agarrar solo el ID. Esto ahora nos da un puntero único en cuanto a qué botón se ha pulsado. Ahora podemos quitar esto de un registro de consola, almacenar esto dentro de una constante llamada dirección. Ahora lo que vamos a hacer es que vamos a recorrer nuestra matriz de imágenes hacia arriba en la parte superior. Nos aseguraremos de cubrir las cinco de estas imágenes. Luego determinaremos si se ha hecho clic en el botón izquierdo o el botón derecho, y luego lo usamos para reordenar nuestras imágenes. Estas nuevas imágenes se almacenarán dentro de una nueva matriz llamada NewarRay, que tendrá el valor inicial de una matriz vacía, y luego podremos recorrer todas nuestras imágenes. Haz esto con un bucle forEach, pasa en nuestra función. Entonces dentro de esta función va a tomar en dos cosas. Primero, como siempre pasaremos un nombre de variable, que va a ser cada imagen en ese bucle en particular, y luego también podremos acceder al número de índice. Para el primer bucle, este será el primer ítem, que es nuestra playa con número índice de 0. Entonces esto se incrementará uno en cada bucle. Para reorganizar estas imágenes, primero tenemos que comprobar si la dirección comenzará con izquierda. Si no, agregaremos una sección else que correrá si la dirección es igual a la derecha. Pensemos en lo que queremos hacer si queda la dirección. Si se hace clic en este botón izquierdo, necesitamos recorrer la matriz original que estamos haciendo y para el primer elemento dentro de aquí, queremos empujar esto hasta el final de nuestra nueva matriz, y luego para las cuatro imágenes restantes hacia abajo en la parte inferior, queremos desplazar estas hacia atrás una posición. Podemos hacer esto dentro del botón izquierdo. Vamos a comprobar si el número de índice al que tendrá acceso justo aquí es igual a 0, así que es la imagen principal destacada en la parte superior. Si este es el caso, queremos empujarlo hasta el final de nuestra nueva matriz. Podemos hacerlo accediendo a esta variable. Podemos posicionar esto al final accediendo a nuestra propiedad images.length. Para este ejemplo, esta debería ser nuestra nueva matriz en el índice Posición 5. Vamos a configurar esta para que sea la primera imagen. Agarrando nuestra primera imagen desde la matriz original o empujándola hasta el final de nuestra nueva. También lo llamaremos newarray.Shift en caso de que haya algo al principio de esta matriz. Esta es la primera imagen cuidada, pero ¿qué pasa con los cuatro restantes? Bueno, para las cuatro imágenes restantes, todo lo que tenemos que hacer es agarrar el número de índice actual y retornar esto por una. Podemos hacer esto dentro de otra sección justo después si, colocando else. Este será el caso de las cuatro imágenes restantes. Todo lo que queremos hacer es agarrar nuestra nueva matriz, seleccionar el índice actual adoptar el valor de uno, y establecer esto igual a nuestra imagen actual. Por ejemplo, si nuestra imagen actual es el índice Número 3, esto se moverá de nuevo al Número 2, y esto será lo mismo para las cuatro imágenes restantes. Antes de ir más allá, probemos esto. Actualmente se está llamando a nuestra función y está reordenando la matriz, también necesitaremos anular la matriz de imágenes originales con nuestra nueva. Podemos hacer esto en la parte inferior de nuestra función, establecer nuestra matriz de imágenes para que sea igual a la nueva matriz. También una vez que restablecimos nuestra matriz de imágenes, necesitamos llamar a la función set images, que en realidad está haciendo un bucle sobre esta matriz y mostrándolas en la pantalla. Haremos esto en la parte inferior. Llama a esta función, y probemos esto. Refrescar. Si hacemos click en la “Flecha Derecha”, obtenemos un error porque aún no hemos manejado este caso. Vamos a intentar a la izquierda. Tenemos a los elefantes, que ahora se ha movido hasta la primera posición de índice. Volvamos a hacer clic en “Izquierda”. Esto se ha movido hasta el final. Todo esto parece estar funcionando bien. Solo para recapitular, estamos agarrando la primera imagen y luego empujando esto al final de nuestra nueva matriz. Actualmente es la playa, esto va hasta el final, y las cuatro imágenes restantes se trasladarán a la izquierda por un número de índice. A continuación nos encargaremos de la sección L, que es si se ha hecho clic en el botón derecho. Lo que vamos a hacer aquí es básicamente lo opuesto a esta línea justo aquí. Necesitamos, en lugar de eliminar un número de índice para moverlo a la izquierda, necesitamos agregar uno para mover cada uno hacia la derecha. Vamos a pegar esto en, todo en un índice número de uno. Esta vez más que comprobar si estamos accediendo a la primera imagen, necesitamos comprobar si estamos accediendo a la última imagen. Si es la última imagen, entonces necesita ser eliminada del final de la matriz y colocarla al principio. Podemos hacer esto dentro de una sección if. Si el índice más uno es igual a imágenes o longitud. El motivo por el que hemos hecho esto, porque recordar los números de índice comienzan en 0, pero cuando estamos accediendo a la longitud de la matriz, este será el número real. Actualmente se trata de 5, pero el número de índice solo sube a 4, lo que significa que necesitamos más 1. Compruebe si esto también es igual a 5. Entonces si esto es igual a 5, este es nuestro último valor en la matriz. Tenemos que establecer esto para que sea desde el principio. El comienzo mismo de nuestra nueva matriz va a ser índice Número 0, que podemos establecer para que sea la imagen actual. También igual que lo hicimos cuando eliminamos el primer elemento de la matriz, esta vez necesitamos eliminar el último, Newarray.pop. Salvemos esto y probemos esto. A la derecha, deberíamos ver las casas movidas a la cima y la playa se movió a la izquierda. Bueno. Ahora el lago, la hierba, los elefantes. Esto ahora funciona completamente bien en ambas direcciones. 68. Imagen Carousel- Imágenes de intercambio: Nuestra siguiente y última tarea para este proyecto es permitir al usuario hacer clic en cualquiera de estas pequeñas imágenes en miniatura, y luego esto se intercambiará con la imagen principal destacada en la parte superior. La imagen pequeña se colocará en la sección grande y la imagen grande luego caerá hacia abajo al área de la miniatura. Para éste creamos nuestras pequeñas imágenes de cualquier conjunto de la función de imágenes saltar a la sección else, donde agregamos la clase de pequeño. Lo que vamos a hacer aquí es agregaremos un oyente de eventos a cada uno. Justo después de sumar la clase. Antes de anexar esto a nuestro wrapper, seleccionaremos nuestros elementos, agregaremos un oyente de eventos, donde escuchemos el click, que va a desencadenar una función la cual creará en tan solo un momento llamado SwapImages. Abajo al fondo. Nuestra función intercambiará imágenes. Dentro de aquí hemos agregado el oyente de eventos, que va a activar esta función, cada vez que hacemos clic en una de las pequeñas imágenes, pero justo como paso de precaución extra, agregaremos una declaración if para volver fuera de esta función si se ha hecho clic en la imagen grande. Lo que haremos es ya que este es un evento, haga clic en “Evento”, analizaremos en la información del evento, accederemos a los elementos con e.target. Entonces podemos comprobar si el ClassList contiene, usando un método contains, la clase de grande. Si lo hace, volveremos fuera de esta función. Esto es sólo por nuestra precaución. A continuación, lo que haremos es agarrar usando la información event.target, la imagen real en la que se ha hecho clic. Todo lo que tenemos que hacer es agarrar el atributo fuente, averiguar cuál de estas imágenes necesita ser colocado en el área destacada. Podemos hacer esto, instalar esto dentro de una constante llamada fuente de imagen, establecer esto igual a e.target. Usamos getAttribute, donde tomaremos la fuente. Ahora tenemos esta fuente de imagen, que es la ruta del archivo. Podemos usarlo para agarrar el número de índice de nuestra matriz. Vamos a agarrar nuestra matriz de imágenes. Luego usaremos el método llamado indexOf, y luego analizaremos en nuestra fuente. Entonces las imágenes, indexOf, como en nuestro nombre variable, que es fuente de imagen. Esto va a devolver un número de índice que se puede almacenar dentro de una constante llamada SelectEdimageIndex. Lo que tenemos ahora es el número de índice del clicked on thumbnail. Ahora tenemos que intercambiar esto con la imagen que está en la posición del índice 0. Pero antes de que realmente hagamos este swap, necesitamos primero almacenar qué imagen se encuentra actualmente en la posición 0 del índice. Almacenaremos esto dentro de una constante llamada FirsImage. Establece estas dos imágenes en el índice número 0. Entonces podemos reasignar la primera imagen original, por lo que las imágenes 0 van a ser ahora iguales a las imágenes, y analizando este índice de imagen seleccionado. Esto reemplaza la primera imagen con la pulsada en miniatura, y luego tenemos que hacer lo inverso por, de nuevo, seleccionando nuestras imágenes en el SelecteDimageIndex. Intercambia esto con nuestra primera imagen. Esta es una razón por la que originalmente empezamos FirstImage porque en la siguiente línea, estamos reasignando la primera imagen. Por lo tanto, nos da el valor equivocado en la parte inferior. Al final llamaremos a nuestra función setImages, para volver a actualizar el navegador con el nuevo orden de la matriz. Vamos a probar esto por la hierba. La playa cae al fondo, vamos a probar esta. Bueno. Esto ahora completa nuestro proyecto de carrusel de imagen. Espero que lo hayas disfrutado y hayas aprendido algunos trucos nuevos en el camino. 69. Sígueme en Skillshare: Un enorme enhorabuena de mi parte por llegar al final de esta clase. Espero que realmente lo hayas disfrutado y hayas obtenido algunos conocimientos de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Gracias una vez más, buena suerte, y ojalá, te vuelva a ver en una clase futura.