Javascript moderno para principiantes: parte 1

1. Te damos la bienvenida a la clase: Oye. 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 que pueden ser útiles, y esto a menudo puede dejar a los principiantes en una situación difícil preguntándose por dónde empezar. Es por eso que he creado esta clase. Trabajándolo desde el principio, te mostraré qué es JavaScript, qué puede hacer, y por qué incluso lo usamos en absoluto. Esta clase cubre todo lo que necesitas saber para convertirte en un desarrollador de JavaScript competente. Si antes no has tomado una de mis clases, llamo Chris, y llevo más de 20 años construyendo sitios web, y también llevo más de siete años enseñando estas habilidades, ambas clases de video junto a los principales bootcamps de desarrollo web también. Esta es la Parte 1 de 2, y te dará una gran base en JavaScript de todos los conceptos básicos que incluyen matrices, funciones, objetos, eventos y el DOM, API web, y todos los detalles que necesitas para saber en el medio. Todos estos temas se tratan de una manera clara y estructurada, todo mientras se construye un proyecto práctico a medida que avanzamos, incluyendo casos de uso de ejemplo del mundo real, y también algunos mini retos también. Al final, también juntamos todas estas habilidades construyendo un reproductor de video de trabajo, incluye controles totalmente personalizados, pero también un divertido juego de gota de forma, usando la API de arrastrar y soltar. Incluye una carpeta de proyectos a la que vamos sumando a medida que avancemos a lo largo de esta clase, y también se desarrollará como referencia útil en el futuro también. Gracias por su interés en esta clase, y nos vemos en la primera lección. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no acostumbrarse a seguirlo solo por el bien de quitarse 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 de 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 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. 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. 3. ¡Veamos lo que puede hacer JavaScript!: Entender el lado teórico de JavaScript es realmente importante, y llegaremos a esto muy pronto, pero no hay nada como ver exactamente lo que puede hacer justo frente a ti. Para ver algunas de las cosas que puede hacer JavaScript, vamos a abrir una página web. Aquí, estoy en la Red de Desarrolladores de Mozilla. Se trata de developer.mozilla.org. Esto también funcionará en cualquier otra página web, por lo que puedes elegir una diferente si quieres. No te voy a mostrar cómo se puede usar JavaScript para controlar o realizar cambios en cualquier sitio web. Ahora, sólo una palabra rápida antes de que lleguemos más lejos en este video. Puede haber una o dos cosas que parezcan complejas o desconocidas, por lo que si no estás acostumbrado a codificar o JavaScript, algunas de estas pueden parecer un poco intimidantes, pero solo ten en cuenta, esto es solo para te dan algunas guías sobre lo que JavaScript puede hacer. No esperamos que recuerdes nada de esto, y vamos a cubrir todo lo que hemos pasado a medida que avanzas por el curso. Piensa en esto como un poco de catador para emocionarte con lo que JavaScript puede hacer a una página web. Para ver qué puede hacer JavaScript, voy a abrir las herramientas de desarrollador dentro de Google Chrome, que es hacer clic derecho, y luego bajar a Inspect. Vamos a hacer esto un poco más grande para que sea más visible. Si estás usando un navegador diferente, como Safari o Firefox o Edge, mayoría de las herramientas de desarrollador son muy similares, por lo que deberías estar bien si quieres usar un navegador diferente también. Pero si quieres las cosas exactamente igual, seguiría junto con Google Chrome. Lo primero que vemos aquí es esta pestaña Elements, que tiene acceso a toda la estructura HTML que conforma esta página web. Podemos o pasar el cursor sobre cualquiera de estas líneas de código, y resaltará sobre la izquierda qué sección estamos trabajando actualmente, o también podríamos hacer clic en esta flecha, que es el inspector, y seleccione cualquiera de estas secciones o elementos de la página. Por ejemplo, vayamos por este encabezado de nivel 1 y pinchemos en esto. Esto resaltará instantáneamente este encabezado de nivel 1 dentro del código, y cuando esté seleccionado, notarás más a la derecha tienes esto equivale a $0, y luego vemos este pop-up justo debajo del cual dice usar $0 dentro de la consola para referirse a estos elementos. Podemos usar $0 dentro de esta pestaña de Consola para seleccionar cualquiera de nuestros elementos o secciones, y luego podemos aplicar algunos JavaScript también. Solo confirmemos que tenemos los elementos correctos seleccionados con $0, y luego recuperamos nuestro rumbo de nivel 1. Hemos seleccionado este elemento, pero ¿qué podemos hacer con él? Bueno, la lista es enorme, y aquí sólo vamos a rayar la superficie, y vamos a cubrir mucho más durante este curso. Si volvemos a seleccionar $0 para apuntar a nuestro encabezado de nivel 1, y luego un punto, podemos ver a continuación tenemos acceso a muchas opciones diferentes que podemos utilizar en este elemento. Uno común, que usaremos mucho en este curso, es algo llamado texto interno. El texto interno es una forma de simplemente cambiar el contenido entre la etiqueta de apertura y la etiqueta de cierre. Tendrá este texto de recursos para desarrolladores. Si queremos, podemos establecer esto igual a cualquier nueva cadena de texto. Abre las cotizaciones. Podemos usar citas simples o dobles, incluso una está bien, y luego podemos configurar este texto para que sea cualquier otra cosa que quieras. Vamos por, he cambiado, y luego inmediatamente recuperamos el texto recién devuelto en la consola, y también podemos ver la página web se ha actualizado también. Antes de ir más lejos, no te preocupes por hacer ninguno de estos cambios. Esto no está actualizando la página web en vivo. Esto es sólo dentro de nuestro propio navegador. Todo lo que tenemos que hacer es simplemente actualizar el navegador y esto se restablecerá de nuevo a la versión original. Además, estamos haciendo esto, ahora restablecemos nuestros $0, y esto ahora volverá indefinido. Miraremos a lo indefinido con más detalle a lo largo de este curso. Pero por ahora, podemos pensar en ello como simplemente no se ha asignado ningún elemento a este $0. Al igual que antes, necesitamos volver a la pestaña Elementos para seleccionar cualquiera de estas secciones o elementos con los que quieras trabajar. Vamos por uno de estos enlaces arriba en la parte superior. De nuevo, usa la flecha, y podemos pasar el cursor sobre cualquiera de estos botones. Haga clic en esto. Tenemos este botón con el botón ID de Feedback, que ahora debería asignarse a $0. Seleccionemos esto, y vemos que ahora se devuelve nuestro botón. Nuevamente, $0 y luego el punto nos dará acceso a una gama de características que podemos aplicar a este elemento. Una de esas es la propiedad de estilo, y desde aquí también podemos agregar una propiedad de estilo adicional que queremos aplicar a este botón en particular. Al igual que con CSS normal, si has usado CSS en el pasado, todas las mismas propiedades de estilo están disponibles para usar dentro de la consola. Un ejemplo para esto podría ser el color del texto, que podemos establecer a cualquier valor que sea un color CSS válido. Golpea “Enter”. No obstante, actualizar de inmediato dentro del navegador. Presione hacia arriba, y también podemos agregar una segunda propiedad. Vamos por la familia de fuentes. Nuevamente, podemos cambiar esto dentro las cotizaciones para ser una familia de fuentes diferente de cursiva. Como era de esperar, esto actualizará automáticamente el navegador. Solo una cosa a tener en cuenta al trabajar con estilos es, aquí vemos que tenemos la propiedad de color establecida en rosa caliente, y esto funciona igual que una hoja de estilo regular. No obstante, cuando tengamos dos palabras como fuente y familia, en CSS regular, mantendríamos todo esto en minúsculas y separaríamos esto con un guión, por lo que lo escribiremos así como dos palabras con el guión dentro. Pero en cambio, al usar JavaScript, si tenemos dos o más palabras, necesitamos cambiar esto por lo que se llama CamelCase, y cada palabra después de la primera comienza con una letra mayúscula. Eso es más o menos lo único que debes recordar en esta etapa. Tenemos acceso a todas las mismas propiedades CSS, pero necesitamos escribirlas como CamelCase al usar JavaScript. Otra cosa que vamos a ver ahora son los eventos. De nuevo, tenemos una sección dedicada de eventos más adelante en el curso. Pero por ahora, solo quiero emocionarte un poco sobre lo que JavaScript puede hacer al interactuar con el usuario. Para ver un ejemplo de esto, podemos pedirle al navegador que escuche un evento de mouse como cuando un mouse pasa sobre este elemento en particular. Podemos volver a hacer esto seleccionando nuestro botón con $0, y luego podemos usar un evento llamado onmouseover. Esto detectará cuándo el ratón pasa por encima de este elemento en particular. Entonces vamos a activar lo que se llama una función. Una función es como una tarea que se va a ejecutar cuando el ratón pasa por encima de este botón en particular. No te preocupes si esto parece desfamiliar, tenemos mucho más detalle sobre las funciones que vienen. Pero por ahora, todo lo que vamos a hacer es seleccionar este elemento en particular. De nuevo, accede a la propiedad de estilo, y esta vez vamos a ir a que el fondo sea igual a cualquier color, como el naranja. Pulsa “Enter”, y ahora se activará este evento mouseover . Si ahora ponemos el ratón sobre estos elementos en particular, ahora se cambia el fondo para que sea naranja. Esta es una forma de probar rápidamente las cosas en el navegador. Pero cuando se trata de escribir código JavaScript real dentro de nuestro editor de texto, $0 no funcionará, $0 solo funciona dentro de las herramientas de desarrollador del navegador. En cambio, necesitamos una forma de acceder a cualquiera de estos elementos desde la página desde el exterior. Por ejemplo, volver a la página del elemento, y lo que vamos a hacer es seleccionar una sección diferente. Vamos por el principal, que tiene el ID de contenido. Por supuesto, podríamos acceder a $0 ya que estamos en las herramientas de desarrollador, pero necesitamos acostumbrarnos a acceder a estos elementos desde un editor de texto. El modo en que lo hacemos es partiendo desde el nivel muy alto, y esto es accediendo a los documentos. Podemos ver de inmediato que se destacará la página completa. Esto se debe a que el documento es esta página web real. Entonces, una vez que hayamos seleccionado la página completa así, necesitamos una forma de filtrar esta página hasta el elemento en particular que queremos. JavaScript nos proporciona ciertos métodos que podemos utilizar para filtrar esta página. Como podemos ver aquí con este auto completo, podemos seleccionar un elemento por el ID, por el nombre de la clase, y también por el nombre del elemento también, pero más que éstos más adelante. Voy a ir por getElementById, y luego dentro de los corchetes podemos pasar en el ID del elemento que queremos seleccionar. Al mirar la pestaña Elementos, vemos que esta sección principal tiene el ID igual al contenido como una cadena. Pase esto en, y también tenga en cuenta aquí que esto también es CamelCase. Al igual que la familia de fuentes de arriba, todas y cada una de las palabras después de la primera comienza con una letra mayúscula. Golpea “Enter”. Esto luego devuelve nuestro principal con el ID de contenido. Estamos exactamente en la misma posición que cuando usamos $0. Si presionamos hacia arriba, obtenemos la misma línea de código. Después podemos usar el punto para acceder a cualquiera de las mismas características que usamos antes. Por ejemplo, establece el estilo, y luego vamos a ir por la opacidad CSS igual a 0.3. Esto no se aplica, todavía podemos hacer cualquier otra cosa que teníamos antes, como el fondo. Esto igual a cualquier cosa. Vayamos por el rojo. Ahí vamos. El fondo de la sección principal ahora se ha transformado en rojo. Simplemente refresquemos y reinstamos esto de nuevo a su estado original. JavaScript no se limita a sólo cambiar los elementos de nuestra página. También lo podemos usar para hacer mucho más. Tenemos acceso a características de fecha, podemos acceder a temporizadores, y también algunas funcionalidades matemáticas también. Vamos, por ejemplo, sumar dos números. Diremos que 5 más 11 es 16, 7 comida para llevar 2 es 5. Tenemos un montón de otras características matemáticas también, por lo que podemos seleccionar el objeto matemático y luego puntar, y luego desplazarse por. Podemos ver que tenemos muchas opciones diferentes, pero una popular es Math.Random. Agrega los corchetes justo después y pulsa “Enter”, y esto generará un número aleatorio entre cero y uno. Si seguimos probando esto, obtenemos un valor diferente cada vez. Esto es sólo una pequeña muestra de lo que JavaScript puede hacer y cómo podemos usarlo para interactuar con una página web. Hay mucho más por aprender, y conoceremos más de estas características a medida que avanzamos por este curso. 4. Descarga los archivos de inicio: A lo largo de este curso, estaremos escribiendo mucho código JavaScript. Para ayudarnos en el camino, te he proporcionado una carpeta llamada los modernos archivos de inicio javascript. Si te diriges a github.com/chrisdixon161, y luego al repositorio que es modern-javascript-starter-files. Desde aquí, puedes descargar este conjunto completo de archivos, que son los archivos de inicio que vas a necesitar para cada lección de este curso. Por ejemplo, cuando entras a la primera sección, y luego encontraremos una lista de todas las lecciones dentro de esta sección. Cada una de estas carpetas contiene el mínimo muy desnudo que necesitarás para empezar con cada una de estas lecciones. El propósito de estas carpetas es darnos un punto de partida, lo que podemos simplemente saltar directamente a aprender sobre JavaScript sin, por ejemplo, necesitar escribir todo el código HTML requerido. Otro beneficio de todos estos archivos es que también nos da una referencia para todas las lecciones que hemos hecho en el pasado. A medida que marcamos cada una de estas lecciones, tenemos una referencia que puedes mirar hacia atrás si alguna vez te quedas atascado en el futuro. Esto es todo lo que necesitamos hacer. Basta con seguir adelante y descargar la carpeta. Esto se puede hacer en los puntos de entrada de la carpeta principal. Haga clic en el botón “Código” justo aquí y podrá descargar el archivo ZIP completo, cual vamos a abrir dentro de nuestro Código Visual Studio. Una vez que esto haya sido descargado, debes tener un archivo ZIP el cual puedes extraer, generalmente haciendo doble clic en la carpeta y luego arrastrarlo hacia tu editor de texto. Estoy usando Visual Studio Code y deberías ver todas las secciones disponibles sobre la izquierda. Esto es todo, este es nuestros archivos de inicio todos completos. Ahora podemos saltar a aprender todo sobre JavaScript. 5. Dónde añadir JavaScript: Bienvenidos al inicio de esta sección. Ahora vamos a echar un vistazo JavaScript y vamos a pasar del navegador y en realidad a nuestros propios archivos JavaScript. De la sección anterior, descargamos los archivos de inicio que vienen con este curso. Si no has descargado estos, haz volver a ese video y descarga estos desde GitHub. Una vez hecho esto, necesitarás descomprimir el paquete y arrastrarlo al código de Visual Studio para abrirlo. A la derecha, he abierto Google Chrome como el navegador. Lo que vamos a hacer ahora es comenzar justo al principio y echar un vistazo exactamente dónde podemos agregar JavaScript a nuestros archivos. Antes, hemos escrito código directamente en la consola del navegador, pero de manera realista, casi siempre se escribe en nuestros propios archivos. ¿Por dónde empezamos? Bueno, dentro de Visual Studio Code en nuestros archivos de inicio, dirígete a nuestra primera sección, que son los conceptos básicos de JavaScript y notarás que los números lejanos comienzan a partir de 02. Esto se debe a que para esta lección en particular, vamos a empezar justo al inicio y a armar las cosas nosotros mismos, y luego para todo el resto de las lecciones, estas tendrán algún boilerplate disponible para que accedamos. Podemos simplemente saltar directamente a escribir nuestro código JavaScript. Para este con los conceptos básicos de JavaScript seleccionados, haga clic en este icono aquí, que es crear una nueva carpeta, y entonces ésta puede ser 01. Voy a llamar a esto donde agregar JavaScript. De nuevo, asegúrate de que esto esté dentro de la carpeta de conceptos básicos de JavaScript y luego con esta primera carpeta seleccionada, haz clic en este icono aquí, que es un archivo nuevo, y esto se abrirá dentro de aquí. Llamaremos a esto el índice de punto HTML. Hit Enter. Debería estar dentro de nuestra nueva carpeta. Dentro de ella, agrega alguna estructura HTML básica para abrir esto dentro del navegador y Visual Studio Code viene con un plug-in o reconstruido en llamado Emmet Esto nos dará algo de finalización de código y algunos accesos directos simples. Uno de los más útiles es HTML colon cinco. Hit Enter. Esto nos dará a todos el código básico de inicio HTML que necesitamos. Nuevamente, todo esto va a estar disponible en todas las demás carpetas por lo que esto es sólo para esta lección solamente. El título, dónde agregar JavaScript. Entonces necesitamos los elementos para trabajar realmente con tales como un encabezado de página. Colocando cualquier cosa como h1 y algún texto dentro de aquí. Tener estos elementos en su lugar aquí significa que podemos usar algún JavaScript para acceder a estos elementos, tal como lo vimos antes en la consola. Todo lo que necesitas para abrir esto dentro del navegador es guardar este archivo con Command or Control S. Entonces si hacemos clic derecho en este nombre de archivo justo aquí, bajamos a Copiar ruta, y luego podemos pegar esto dentro del navegador. Alternativamente, si lo deseas, puedes ir dentro de la carpeta principal justo aquí. A continuación, puede seguir a través de la carpeta actual y hacer doble clic en esta página de índice. Esto luego abrirá esto en tu navegador predeterminado. Para poder acceder a estos elementos utilizando JavaScript, una de las formas que podemos hacer esto es agregar AID. Voy a darnos una identificación de título. Recuerda que cada ID en particular debe ser único para esta página HTML. Asegúrate de que solo tenemos un ID de título dentro de este archivo HTML. Esto hace que sea agradable y fácil para nuestro JavaScript poder seleccionar los elementos particulares que desea. Entonces debajo de esto y justo encima de nuestra etiqueta de cuerpo de cierre, podemos insertar nuestras etiquetas de script. Tenemos una etiqueta de apertura y también una etiqueta de cierre también. Esta es la ubicación donde podemos colocar nuestro código JavaScript. Justo encima del cuerpo se encuentra una ubicación donde podemos agregar JavaScript y también está sobre ubicaciones que veremos pronto. Antes cuando estábamos dentro de la consola, recuerda que miramos seleccionar cada elemento en particular con símbolo de dólar cero. Recuerda también dijimos que esto es único para la consola. Necesitamos una forma diferente de seleccionar nuestros elementos dentro del editor de texto. Bueno, aquí adentro vamos a hacer exactamente lo mismo que miramos en la consola. Primero seleccionaremos el documento. El documento es este documento HTML completo en el que estamos trabajando actualmente. Se va a seleccionar esto y luego necesitamos filtrar estos documentos al elemento particular que queremos seleccionar. Recuerda que miramos un método llamado get elements by ID. De nuevo, se trata de CamelCase. Todas y cada palabra después de la primera comienza con una mayúscula dentro de los corchetes, y las cotizaciones pasarán luego en un ID único que desea seleccionar. En nuestro caso, vamos a agarrar el título. Mueve esto aquí. Miramos cambiar el contenido interno o el texto interno de este elemento con.innertext. Esta es una propiedad donde podemos agregar una nueva cadena de texto entre las comillas simples o dobles. Vamos a cambiar esto a JavaScript por ahora y guardar este archivo. Entonces si pasamos al navegador y recargamos, esto ahora ha seleccionado nuestro encabezado de nivel 1 y ha cambiado el HTML interno. Vamos a cerrar la barra lateral para conseguir un poco más de espacio. Todas las mismas propiedades a las que miramos en el video de la consola siguen aplicándose, como agregar diferentes estilos. Nuevamente, podemos acceder a los mismos elementos con get element by ID, y también podemos cambiar los estilos para este elemento en particular también. Cambiemos el color del texto para que sea igual al naranja. Refresca y esto aplicará todo. Otra forma de agregar JavaScript es agregar esto en línea. Agregar este en línea significa que lo agregamos directamente dentro de nuestros elementos y agregamos esto dentro de la etiqueta de apertura de elementos. Agregaremos esto igual que agregaríamos algún CSS en línea. En un video anterior, miramos los eventos muy brevemente, donde miramos el evento sobre el ratón. Aquí, echemos un vistazo al evento on-click, que se activará cuando el usuario clic en este elemento en particular. Todo lo que vamos a hacer dentro de este manejador de eventos al hacer clic es activar una alerta. Una alerta es un pop-up dentro del navegador. Vamos a añadir esto con el texto de clicked. Dale a esto un guardar y refrescar el navegador. Mueva el ratón sobre los elementos y haga clic. Ahora veré una alerta de página. Esto es probablemente algo que has visto al navegar por la web en el pasado. Todo lo que tenemos que hacer para quitar esto es dar click en el botón Ok y esto luego se cerrará . Solo eliminemos esto. También solo ten en cuenta que generalmente se desaconseja mantener nuestro JavaScript en línea así así porque mezcla nuestro HTML y nuestro JavaScript y hace que las cosas sean menos legibles y organizadas. Si es posible, manténgalo todo separado, igual que tenemos aquí, y también veremos cómo podemos agregar esto a un archivo separado en tan solo un momento. Esto está contenido dentro de una etiqueta de script y podemos agregar tantas etiquetas de script como quieras. También podría ubicarse en cualquier parte de esta página, incluso hasta dentro de la sección de cabeza. Esto funciona exactamente de la misma manera si agarramos toda esta sección de guión y luego Comando o Control X para cortar esto fuera de lugar. Coloca esto dentro de la sección de cabeza con comando o control V para pegar esto en y también el navegador. En el interior de aquí podemos ver el título original de la página se restablece. Ahora como hemos movido la etiqueta de guión hasta la sección de cabecera, nada de este JavaScript parece estar aplicando. Entonces echemos un vistazo dentro la consola y veamos si podemos detectar algún error. Haga clic derecho e inspeccione. Haga clic en la pestaña Consola en la parte superior. Vemos que no podemos establecer la propiedad innertext de null. Cuando sí obtenemos un error, a menudo es una buena idea dirigirnos a la consola y a menudo nos dará un puntero a cuál es exactamente el problema. El problema actual se debe a que página HTML se carga de arriba a abajo. Por lo que el guión dentro de la sección de cabecera se carga antes que incluso sepa que existe este elemento de título, lo que luego está causando un error. Si sí necesitamos agregar un script dentro de la sección de cabecera como esta, a menudo puede causar problemas si necesitamos acceder a alguno de nuestros elementos DOM. Es por ello que a menudo vemos JavaScript al final de la sección del cuerpo. Permite que los elementos se carguen rápidamente y no bloquea que el HTML se cargue en la página. Sin embargo, verá algunas bibliotecas JavaScript de terceros que necesitan que el script se cargue dentro de la sección de cabecera para que la biblioteca funcione correctamente. Además, estas bibliotecas de terceros, junto con nuestro propio código, suelen estar separadas en su propio archivo de script. Mover todo este JavaScript a su propio archivo hará que estos documentos HTML sean mucho más legibles y mantenibles. Para hacer esto primero, abre la barra lateral y luego dentro de la carpeta donde agregar JavaScript, haz clic en el icono del nuevo archivo, y luego podemos darle a esto un nombre de nuestra elección. Voy a ir por el guión 1. Entonces necesita tener la extensión dot js. Hit Enter. De vuelta a nuestra página de índice, podemos copiar los contenidos entre las etiquetas de guión. Agarra estas dos líneas de código, pon estos outs. Pega estos en nuestro nuevo archivo de script. Este archivo de script no necesita las etiquetas de script circundantes ya que ya sabemos que se trata de un archivo JavaScript de la extensión dot js. Pero lo que sí tenemos que hacer es vincular estos dos archivos juntos. Actualmente, se trata de dos archivos separados independientes entre sí. Encima en el archivo de índice, tenemos que apuntar a este nuevo archivo de script. Podemos hacer esto dentro de las etiquetas de script en lugar de tener el código ubicado dentro como lo hicimos antes. Lo que podemos hacer es agregar los atributos de origen. El atributo fuente es básicamente la ubicación de este archivo relación con donde estamos actualmente. Esto funciona exactamente igual que agregar una hoja de estilo. Dado que este archivo está al lado del otro, podemos apuntar a esto con la fuente del script 1 punto js. Si esto se ubicaba dentro de una carpeta JavaScript, por ejemplo, tendremos que ir a la carpeta JavaScript y luego reenviar barra en nuestro script. No tenemos esto, así que es simplemente script one dot js. Asegúrate de que ambos de nuestros archivos estén guardados y luego pasa al navegador, refresca. vemos el mismo problema dentro del navegador. No podemos establecer la propiedad innertext de null. Esto tiene sentido porque todavía estamos cargando la etiqueta de guión dentro de la sección de cabeza. Estamos tratando de aplicar esto a un elemento antes de que incluso se haya cargado. Podríamos escribir algún código personalizado para esperar a que el HTML se cargue primero o podemos ver algunas técnicas más modernas en el próximo video. 6. Asíncrono y diferido: Dentro de nuestros archivos de inicio, vamos a cerrar este archivo del último video para que no haya confusión. Después, dirígete a la lección 2, que es asíncrona y aplaza. Haga doble clic en la página del índice para abrir esto. Ya que ahora estamos en un archivo nuevo, necesitamos copiar esto o copiar la ruta a esto y luego pegar esto dentro del navegador. Vemos enseguida que todavía tenemos el mismo error que el video anterior. Esto se debe a que este es prácticamente el mismo archivo o el mismo código final que teníamos en el último video. Tenemos nuestro script y luego también tenemos nuestro encabezado de nivel 1 y los mismos contenidos dentro del archivo de script. Tendrás que hacer esto por cada video al que vayamos. Tenemos que abrir la página del índice y también asegurarnos de que este sea el título correcto de la página. En el último video, descubrimos un problema al cargar nuestros archivos JavaScript demasiado temprano. Esto puede causar dos problemas. En primer lugar, es posible que tengamos que acceder al elemento HTML antes de que incluso se esté creando, igual que vemos aquí, y en segundo lugar, posible que tengamos mucho código JavaScript ubicado dentro de este archivo. Esto realmente podría ralentizar la carga del resto de nuestra página. Si el script 1 fuera un archivo realmente enorme, el usuario no vería ninguno del HTML cargado en la página hasta que este script hubiera terminado de ejecutarse. Ahora vamos a ver dos formas que podemos usar para arreglar todo este asíncrono y diferir. Asíncrono y diferir son ambos atributos los cuales podemos agregar dentro de los elementos de script. En primer lugar, echemos un vistazo a asíncrono y cerremos la barra lateral para obtener un poco más de espacio. Asegúrese de que este archivo esté guardado y actualice el navegador. Enseguida, vemos que el error ha desaparecido. El JavaScript se ha aplicado a nuestro elemento y no vemos ningún error dentro de la consola. Intentemos diferir. Coloca esto y refresca el navegador y tenemos exactamente el mismo resultado. Todo está funcionando perfectamente bien. Con estos dos trabajando, ¿cuál es exactamente la diferencia? Bueno, primero tenemos asíncrono, y asíncrono es abreviado de asíncrono. Este es un término al que volveremos más adelante. Pero para este caso de uso en particular, async descargará este script junto al resto de nuestro contenido HTML. Pero para entender lo que asíncrono está haciendo en realidad, necesitamos mirar un poco más adelante. Ahora imagina, en lugar de tener nuestro guión en nuestra página de índice dentro del editor de texto como lo hacemos aquí, imagina que esto fue un sitio web en vivo. Si este fuera un sitio web en vivo, nuestros guiones y nuestra página de índice se almacenarán en un servidor web. Cuando el usuario visite nuestra página por primera vez, deberá descargarse el contenido de estos archivos. Cuando marcamos esto como un script asíncrono, este código JavaScript se descargará junto a nuestro contenido HTML. Esto significa que en lugar de bloquear nuestro código HTML, el HTML todavía se descarga y luego se renderiza dentro del navegador, por lo que no debería causar mucha desaceleración con nuestro contenido. Entonces se ejecutará el contenido de nuestro script cuanto se termine de descargar todo. Esto tiene sus ventajas. Es realmente útil ya que no está bloqueando la carga de nuestro contenido pero hay un inconveniente. Ves esto, voy a enlazar a tres guiones separados. Copiemos y peguemos esto dos veces más. Esto puede ser el script 2, y el script 3, y por supuesto necesitamos crear dos nuevos archivos dentro de nuestra carpeta Async y diferir. Segundo, scripts2.js. También guión 3 en nuestro guión 1. Para mayor claridad aquí, podemos cambiar esto para que sea el número 1, y luego guardar este archivo, y copiar esta línea de código en nuestro script 2. Pega esto dentro de aquí y podemos cambiar esto al número 2. Guarda esto en el mismo para el número 3. Ahora con nuestros tres guiones vinculados justo aquí, en teoría, ¿qué debemos esperar que suceda? Bueno, probablemente esperaríamos que este el número 3 dentro de aquí, porque cargamos el guión número 1, lo que cambiará el contenido para ser el número 1. Después el script 2 que cambiaremos esto para ser el número 2, y luego el número 3 anulará esto para ser número 3. Bueno, echemos un vistazo a esto. Podemos guardar este archivo y también el navegador, refrescar. Vemos el número 3 como se esperaba. Tratemos de refrescar un par de veces más. Si seguimos refrescando varias veces, eventualmente veremos un número diferente. Eventualmente vemos este valor de 2 porque estamos solicitando en orden los tres de estos guiones. Pero a pesar de que estamos solicitando estos tres scripts en orden, no significa que siempre vas a volver del servidor en este orden en particular. Pero tal vez estés pensando, ¿por qué debería siquiera importarme esto? De la misma manera que script1.js se basó en el contenido del HTML para estar presente, a veces un script puede depender también de otro script. Por ejemplo, nuestro tercer archivo JavaScript puede depender algún código de los dos primeros archivos para estar disponible primero, y si esto se descarga primero antes de los dos anteriores, esto provocará entonces un error. Ciertas bibliotecas JavaScript de frameworks también tendrán múltiples scripts que necesitamos descargar, y éstos deberán ser descargados en orden. Por ejemplo, en versiones anteriores del marco Bootstrap, solíamos confiar siempre en el marco jQuery también. Para el primer script, necesitaríamos descargar la biblioteca jQuery. Entonces sólo después de que esto haya terminado de cargarse, entonces descargaríamos la biblioteca Bootstrap, que entonces estaba haciendo uso de las características de jQuery. Cuando necesitamos que nuestros archivos de script se ejecuten en un orden particular, es posible que asíncrono no siempre sea la mejor opción a buscar. Aplazar, por otro lado, ejecutará los scripts en el orden en que aparecen y lo hará después de que todos los scripts de la página y también se haya cargado el contenido de la página. Cambiemos esto para que sea diferido en los tres de nuestros guiones. Si seguimos refrescando tantas veces como queramos, sólo deberíamos ver alguna vez el último valor de tres. Si eres nuevo en JavaScript, no espero que recuerdes todos estos, y puede que no las necesites todas con tanta frecuencia. Pero también tendrás este video y también el código del proyecto aquí si necesitas esto como referencia en el futuro. También recuerda más comúnmente también, también tenemos la opción de colocar este script justo al final de la sección del cuerpo, para que no bloquee la carga del resto del HTML. igual manera que un recapitulación antes de seguir adelante, tenemos las palabras clave asíncrona y diferir las cuales puedes agregar como atributos a nuestros scripts. Al usar asíncrona, esto descargará los scripts junto con el resto del contenido HTML y el navegador intentará renderizar la página mientras se descarga esto. Una de las ventajas es que no bloqueará que el resto del contenido se renderice, y en cuanto el archivo haya terminado de descargar, entonces ejecutará el script en su interior. También tenemos que recordar si estamos usando múltiples scripts asíncros, no hay garantía de que se ejecuten en el orden que esperamos que lo hagan. Async sigue siendo una buena opción si tenemos múltiples scripts que no dependen entre sí para cargar en un orden particular. Aplazar, por otro lado, cargará múltiples scripts, y sabemos que se va a conservar el orden. Si nuestros scripts se ejecutarán tan pronto como tanto el contenido de la página como el HTML como estos scripts hayan terminado de descargar, entonces todo esto significa que deberíamos preferir usar un script diferido cuando tengamos múltiples scripts que necesitarían ejecutarse en orden. Esta es la clave para llevar que async podría usarse cuando tenemos múltiples scripts que no necesitan ejecutarse en un orden particular. Deberíamos usar diferir cuando necesitemos que estos scripts se ejecuten en un orden particular. De nuevo, es posible que no necesites usar estas dos palabras clave muy a menudo, pero también es realmente importante estar al tanto de todas estas partes de JavaScript en caso de que te encuentres con éstas en el futuro. A continuación, vamos a alejarnos de la carga de JavaScript y echar un vistazo a cómo podemos trabajar con cadenas. 7. Trabajar con cadenas de caracteres: Ahora saltemos a la Lección 3 de esta sección que está Trabajando con Cuerdas. Ya deberíamos saber qué hacer. Podemos abrir la página Índice. Entonces si abrimos esto dentro del navegador, copie el camino a éste, y luego reemplace el actual dentro del navegador. Hasta ahora cuando hemos estado configurando el texto interno, y echaremos un vistazo a este ejemplo aquí, que es igual a los que hemos mirado en el pasado. Seleccionamos este título, justo arriba, establecemos el InnerText para que sea igual a otra cosa que originalmente no estaba allí. Aquí empezamos con trabajar con cuerdas y luego reemplazamos esto por otra cosa, que vemos dentro del navegador. Hasta el momento hemos estado agregando estos entre las citas simples y en JavaScript, esto es lo que se conoce como una cadena. Una cadena es básicamente algún texto, puede ser un solo carácter como una letra simple como una A, puede ser una sola palabra, puede ser una frase o incluso un párrafo. También podemos colocar esto dentro de las comillas simples o dobles, no importa, ambas funcionarán perfectamente bien para un ejemplo así. No obstante, aunque habrá un problema si una de las palabras dentro contiene el mismo carácter, como una comilla simple o doble. Si volvemos esto a comillas simples, así como así, y entonces podemos cambiar esto para que sea tal vez, vámonos. Esto también tiene un apóstrofo el cual es el mismo símbolo que las comillas circundantes, inmediatamente podemos ver el editor de texto ha resaltado esto y cambiado el color para hacernos saber que hay un problema. Lo que efectivamente está sucediendo aquí es que estamos haciendo coincidir una cadena de las dos primeras citas. Podemos ver este es el color original, y después vemos un error. Podemos ver esto si guardamos este archivo y refrescamos el navegador, podemos ver en la consola tendremos un identificador inesperado, ya que está esperando que toda nuestra cadena solo esté contenida entre estas cotizaciones. Hay un par de formas en las que podemos lidiar con esto. En primer lugar, podríamos cambiar las cotizaciones externas para que sean lo contrario y hacerlas dobles. Por lo tanto, agrega el doble al final y también al principio también. Ahora, esta cadena estará contenida entre las comillas dobles y el apóstrofo será completamente válido. Guarda y refresca, y ahora veremos el apóstrofe dentro la cadena y no vemos errores dentro de la consola. Alternativamente, podemos usar lo que se llama escapar. Si los cambiamos de nuevo a las comillas simples lo que estaba causando un error, podemos hacer uso de una barra invertida justo al frente y esto entonces escapará del carácter que desea luego mostrar. Esto le dirá al navegador que luego renderice esto como parte de la cadena. Probemos esto. Esto funciona exactamente igual también. Escapar así también funciona para otros personajes como las comillas dobles. Si nos escapamos así, no deberíamos ver ningún problema. Digamos esto, y eso está completamente bien. Pero y si realmente quisiéramos mostrar esta barra invertida también como parte de la cadena. Para esto, necesitamos agregar una doble barra invertida para escapar de esto. El primero se renderiza como parte del texto, pero la segunda barra invertida se utiliza para escapar de esta comilla doble. Si tenemos mucho texto en lugar de sólo un par de palabras como las que tenemos aquí, a veces queremos dividirlo en múltiples líneas. Para ver un ejemplo de esto, podemos salir de nuestro script y podemos generar algún texto de muestra dentro de nuestro Código de Visual Studio. Para ello, escribe la palabra Lorem, L-O-R-E-M, pulsa “Enter”, y luego esto nos dará algún texto de muestra con el que trabajar. Copiemos todo esto, de hecho, cortamos esto fuera de lugar y lo pegamos entre nuestras cotizaciones. Ahora si guardamos esto y comprobamos esto en el navegador, ya que tenemos mucho texto aquí, el navegador lo envolverá automáticamente nuevas líneas dependiendo del ancho del navegador. No obstante, aunque como desarrollador, si quisiéramos controlar exactamente cuándo esto rompió en una nueva línea como esta palabra justo aquí, quizá queramos que esto comience en una nueva línea. Para ello, podemos usar una barra invertida seguida de la letra n tantas veces como queramos dentro de aquí. Encontremos la palabra que estábamos buscando cuál es esta justo aquí y podemos usar la barra invertida seguida n. dale a esto un guardar y refrescar el navegador. Esto luego romperá esto en una nueva línea, y puedes usar esto dentro de esta cadena tantas veces como quieras. Algo que hay que tener cuidado es, no podemos tener una cuerda sobre múltiples líneas. A lo que me refiero con esto es en lugar usar esta barra invertida y n, si solo golpeara “Enter” y colocara esto en una nueva línea. Podemos hacerlo tantas veces como quisiéramos , así como aquí. Podemos ver que el editor de textos nos está advirtiendo de un tema. Para una cadena de textos como este, no podemos romper esto en múltiples líneas y podemos ver esto en el navegador si refrescamos esto, vemos un token inválido o inesperado. tenemos un par de maneras diferentes en las que podemos Sítenemos un par de maneras diferentes en las que podemosacercarnos para solucionar esto. Una de las formas más largas de hacerlo es convertir cada una de nuestras líneas de texto en su propia cadena. Podemos hacerlo así y se puede ver que este es un camino bastante largo haciendo esto. Entonces también necesitaríamos usar el símbolo más entre cada línea para unir esto a la siguiente. Por simplicidad, solo haremos que esto sea como líneas libres, refrescar y esto todo funcione igual que antes. O hay una forma más moderna que es usar lo que se llama una cadena de plantilla. Esto reemplaza las cotizaciones con backticks. Vamos a deshacer esto y reincorporarlo de nuevo al error original. De lo que podemos hacer en lugar de tener comillas simples al principio y al final, podríamos sustituirlas por lo que se llama backtick. El retrotick se encuentra en tu teclado y es un símbolo justo aquí. En mi teclado particular, se encuentra junto a la tecla Mayús izquierda. De inmediato el editor de texto ahora eliminará los errores y podemos guardarlo, y todo esto debería funcionar perfectamente bien dentro del navegador. Se puede ver que también se preserva los saltos de línea, así que justo después de Lorem ipsum, tenemos un descanso, entonces tenemos nuestra segunda línea que es ésta justo aquí, después tener cada línea preservada justo debajo de ésta. Estos literales de plantilla se introdujeron a JavaScript en ES6 o ES2015, y nos permiten escribir cadenas multilínea junto con algunos otros beneficios como insertar variables, que tomaremos un mira más tarde. Después de este curso, también profundizaremos en las cuerdas y descubriremos algunas de las propiedades y métodos disponibles que podemos utilizar. 8. Almacenar datos con variables: Eso se acabó para este video, se dirigió a la siguiente carpeta. Vamos a ver el número 4 que está almacenando datos con variables. Entonces vamos a abrir este archivo y también copiar la ruta para el navegador también, pegue esto en. Veremos el título de las variables puesto en la parte superior. Ups. Ahora en este curso hemos estado estableciendo o cambiando valores, como actualizar este título justo aquí. En JavaScript la mayoría de los demás idiomas también, regularmente tenemos la necesidad de almacenar nuestros datos. JavaScript nos proporciona tres formas principales de hacer esto. Empecemos por mirar la forma tradicional de almacenar datos en JavaScript, que es la variable. Podemos crear una variable usando la palabra clave var, así como ésta, seguida de un nombre para esta variable. Entonces llamemos al mío nuevo texto. Esta es una forma de hacer referencia a esta variable en el futuro. Agregar un nombre como este se llama declaración ya que estamos declarando una nueva variable. Se puede pensar en una variable como un contenedor de almacenamiento y este nombre que le damos, es algo así como la etiqueta del frente para que podamos encontrarla fácilmente en el futuro. También tiene sentido ser descriptivo al nombrar variables. Debe reflejar los datos que contiene. Además, este nombre no puede contener espacios como este. También debe comenzar con una letra, un guión bajo o un símbolo $. Si agregamos algo que no está permitido, como una barra inclinada hacia adelante, generalmente un editor de texto moderno como este recogerá en esto y nos avisará de este error. Entonces podemos usar este símbolo igual para agregar un valor que desea almacenar dentro de esta variable, como nuestra cadena de texto. Dado que esto es una cadena, agregamos esto en las citas, digamos nuevo texto de variable. Entonces lo que hemos hecho aquí es que hemos usado esto igual para asignar este valor a la derecha para este nombre de variable sobre a la izquierda. Agregar un valor a nuestra variable al igual que esta se conoce como inicialización. No necesitas recordar estas palabras clave, pero solo quiero hacerte consciente de que estas existen. Entonces esto está inicializando una variable y antes acabamos de tener la declaración variable. Entonces para hacer uso de este texto, todo lo que necesitamos hacer es pasar el nombre de la variable, así como esto, se podría decir guardar y refrescar. Ahí está nuestro nuevo texto el cual almacenamos dentro de la variable. Bueno, y si también quisiéramos cambiar este valor el cual se almacena dentro de esta variable. Nosotros también podemos hacer esto fácilmente. Ya que nuestra variable ya está creada. Lo que necesitamos hacer esta vez es acceder al nombre de la variable sin la palabra clave var. El programa ya sabe que esta es una variable ya que declaramos lo anterior, por lo que no se requiere la palabra clave var. Nuevamente, usando los iguales, podemos actualizar esto con un nuevo valor. Digamos texto actualizado. Dale a esto un guardado y echa un vistazo a esto en el navegador. Ahí está nuestro texto actualizado ahora mostrando. Por lo que el orden aquí también es importante, ya que el código se lee de arriba hacia abajo. Entonces la primera línea, creamos nuestra línea variable hasta que la actualizamos. Entonces el título se cambia a nuestro nuevo texto actualizado. Si tuviéramos que hacer algo como esto y mover la actualización para estar por encima donde declaramos nuestra variable. Veamos qué pasa cuando guardamos y actualizamos. Ya no vemos la versión actualizada dentro del navegador. Esta es a menudo la razón por la que veremos declaraciones variables sobre la parte superior del guión. Por lo que no causará ningún problema si empezamos a actualizar esto más adelante en nuestro archivo. Las variables también pueden contener otros tipos de datos, no solo cadenas, y descubriremos más tipos de datos muy pronto. Pero por ahora hay dos tipos más de variables junto a esta palabra clave var, que vamos a ver. Ambos se introdujeron con ES2015. El primero de éstos es la palabra clave let. En la superficie, deja trabajar igual que var. Puede contener un valor y también podemos actualizar este valor cuando se requiera. Entonces si cambiamos var para que se deje, guarde y actualice. Ahora vemos el texto actualizado, igual que hicimos con la palabra clave var. Todavía hay una diferencia entre la palabra clave let y var. Todo esto se reduce a algo llamado alcance. Alcance se relaciona con cómo podemos acceder a estas variables y se agregan algunas restricciones sobre cómo podemos acceder a los valores almacenados en su interior. Se tiene más información sobre alcances más adelante en el curso, donde aprenderás todo sobre esto con más detalle. Pero sí necesitamos aprender un poco más sobre JavaScript primero antes de que éstos se vuelvan realmente claros. A continuación, tenemos la palabra clave const, que es abreviatura de una constante. Se puede pensar en esto como mantener un valor constante que no cambiará. Si guardamos esto y actualizamos el navegador, vemos que esto arrojará un error dentro de la consola. Vemos el mensaje de asignación a variable constante. Obtenemos esto porque al igual que var y let, esto también puede almacenar un valor, pero es más un valor de sólo lectura. El contenido interior no está destinado a actualizarse, lo que estamos haciendo justo aquí. Entonces si tuviéramos que eliminar esta línea así como esta y luego actualizar el navegador, esto ahora se deshace del error y todavía vemos nuestros contenidos variables. Por lo que el mensaje de error de la consola antes era la asignación a una variable constante. Entonces justo antes de intentar actualizar esto, hemos visto que el mensaje era asignación a variable constante. Es palabra clave de asignación aquí, que es la clave. Asignación es solo una palabra de fantasía que llegamos a una variable sobre pasarlo un valor igual a este. Tendremos esta era porque estamos tratando de reasignarlo con este valor justo debajo y tener esta const ahora introducida en el lenguaje JavaScript es realmente bueno porque significa que nosotros pueden almacenar nuestros valores, que sabemos que nunca pretendemos cambiar. Esto puede detener cualquier error o error en nuestro código. Si alguien cambia accidentalmente un valor más adelante en el código. Pero hay algo que puede ser confuso para los principiantes y rodea crear algo llamado un objeto usando const. Si eliminamos estas dos líneas de código, podemos crear una nueva constante llamada Persona. Tendremos más detalle sobre los objetos muy pronto. Pero por ahora se puede pensar un objeto como una colección de piezas de datos. Por lo que una persona puede tener múltiples piezas de datos como una edad, un nombre, una altura. Todos estos pueden almacenarse dentro de estos tirantes rizados. Todas estas piezas de datos se almacenan dentro de múltiples propiedades llamadas pares de valores clave. Por lo que la clave es el nombre de los datos, como el nombre de una persona. El valor es nombre real. Separados por una coma podemos agregar una segunda clave llamada likes, y luego un valor de un alimento favorito. Podemos seguir adelante con tantos valores dentro de aquí como nos gustaría. Después podemos acceder a cualquiera de estas propiedades accediendo primero al nombre de la constante y luego usando el punto para seleccionar cualquiera de nuestras propiedades como el nombre o me gusta. Probemos esto, refrescamos vemos el nombre de Chris y luego persona al gusto es una forma de acceder a la segunda propiedad de la pizza. Entonces, aunque este objeto es una constante, no es estrictamente inmutable, lo que significa que nunca cambiará. En realidad podemos actualizar la propiedad así como esto. Podemos acceder a la persona constante y acceder a la clave llamada likes. Pongo esto a cualquier cosa como plátanos. Vamos a guardar esto y todavía tenemos a la persona en punto le gusta renderizar al navegador, refrescar. Ahora podemos ver hemos actualizado nuestras constantes con un valor de plátanos. También podríamos agregar propiedades adicionales. Entonces una vez que ya no existen, podemos decir persona puntar pelo y poner esto a un color, luego mostrar esto dentro del navegador. Entonces podemos ver aquí que podemos actualizar las propiedades dentro de un objeto. Pero qué pasa si tratamos de cambiar por completo a la persona para que sea un tipo de datos diferente, como una cadena. Vamos a cambiar esto para que sea un nombre como Chris. Refresca esto. Ahora vemos el mismo mensaje de error que teníamos antes, que es asignación a una constante. Entonces como puedes ver, una constante que sostiene un objeto como este todavía puede tener sus valores mutados en su interior. Simplemente no podemos reasignar su valor original a tal vez un número o una cadena. Por esta razón, a menudo es recomendable evitar la confusión utilizando sólo const para valores simples como una cadena o un número. Entonces sabemos con certeza que este valor nunca cambiará. Entonces solo para recapitular con todo lo que hemos aprendido en este video, tenemos tres palabras clave diferentes llamadas var, let, y const, que todos nos permiten declarar una nueva variable que es amable como una contenedor de almacenamiento para nuestros datos. Al usar la var y las palabras clave let, opcionalmente podemos asignar un valor a estos nombres. También se pueden actualizar o reasignar los valores dentro con un nuevo valor. También hay algunas consideraciones de alcance y hospedaje que cubriremos más adelante en el curso cuando tengamos un poco más de comprensión. Al usar la palabra clave const, esto también creará una nueva variable o contenedor de almacenamiento, pero el valor no se puede reasignar. Como principiante, también puede ser confuso al usar const y un objeto porque las propiedades del objeto se pueden actualizar, o también podemos agregar otras nuevas también. También hemos mencionado algunas palabras clave en este video también. No hay que recordar todos estos por el momento. En primer lugar, teníamos una declaración. Esto es cuando creamos o declaramos una nueva variable sin pasarle un valor. Entonces, por ejemplo, podríamos decir nombre var. Después inicializamos esta variable cuando le pasamos un valor como es igual a Chris. Asignaciones. Esto es cuando pasamos o asignamos un valor a una variable, como este ejemplo hacia abajo en la parte inferior, donde asignamos el valor de 37 a la variable edad. Entonces estas variables van a ser algo que usamos mucho. Por lo que conseguirás mucha práctica con estos a través de este curso. A continuación, vamos a seguir con las variables y echar un vistazo a cómo podemos mezclarlas con cuerdas. 9. Mezclar cadena de caracteres con variables: Ahora entendemos qué es una cadena en JavaScript y también sabemos cómo almacenarlas en contenedores llamados variables. Pero, ¿y si quisiéramos combinar estas dos cosas agregando una variable a una cadena? Esto es completamente posible usando JavaScript y hay diferentes formas de hacerlo. Pasemos a nuestros archivos, que es el número 5, mezclando cadenas con variables. Voy a abrir esto dentro del navegador. Dentro de esta página de índice, tenemos nuestro nivel 1 encabezamiento arriba en la parte superior con el ID de título. Después tenemos dos constantes abajo, tenemos este nombre y también una constante me gusta también. Por último, seleccionamos nuestro título y actualizamos el texto interno. ¿ Y si quisiéramos actualizar este título y también mezclar estas dos variables? El modo de hacerlo, quizá queramos que la cadena de texto diga mi nombre es. Entonces después de esto, digamos que también queríamos insertar esta variable de nombre. Si guardamos esto y actualizamos, vemos mi nombre es nombre, por lo que vemos el texto de nombre en lugar del contenido interno de esta variable. El motivo por el que esto sucede es porque como todo esto está dentro de las citas, todo se considera parte de la misma cadena de texto, no leído como variable. Necesitamos salir de esta cadena y agregar o anexar el nombre de la variable a la cadena. Hacemos esto igual que miramos en un video anterior con el símbolo más. Lo que tenemos que hacer es eliminar el nombre de la variable del final, usar el símbolo más y luego fuera de la cadena, podemos agregar este nombre de variable. También podríamos dejar un espacio al final de la cadena, por lo que tenemos un espacio entre la cadena y también la variable, luego pasar al navegador y refrescar. Podemos ver ahora nuestro nombre se ha actualizado con el valor de la variable. También podemos agregar la segunda variable a esta cadena también, al igual que hicimos aquí. Pero luego usa el símbolo más, abre la cadena en un espacio, y diremos y me gusta, entonces tengo un espacio al final, y luego el símbolo más para agregar la variable de likes. Echemos un vistazo a esto. Me llamo Chris y me gusta la pizza. Todo eso funciona perfectamente bien, tenemos nuestras variables mezcladas en una cadena. También hay otra forma de hacerlo, que se introdujo en ES 2015. Esto es para usar las cadenas de plantilla. Las cadenas de plantilla son igual a las que usamos en un video anterior cuando combinamos el texto sobre múltiples líneas. Lo que necesito hacer es reemplazar estas cotizaciones por las backticks. Quitemos todas estas citas y también podemos quitar los símbolos más, dejando sólo el texto en su interior. Entonces lo que tenemos que hacer es colocar todo esto dentro de los backticks. El segundo paso es marcar qué parte de la cadena es variable. Sabemos desde antes, si solo guardamos esto y actualizamos, no vemos el contenido de estas dos variables pero lo que tenemos que hacer es colocar frente a esto un símbolo $ y luego el nombre de la variable dentro del rizado llaves, lo mismo para nuestros gustos, $ symbol, y envuelve esto dentro de los tirantes rizados. Ahora esto debe leerse como el contenido de nuestras dos variables. Estas cadenas de plantilla entre las comillas también se pueden almacenar en su propia variable también. Si fuéramos a cortar esto fuera de lugar, crear una nueva variable, digamos que la cadena es igual a este valor que acabamos de cortar. Podríamos entonces pasar el nombre variable de cadena. Todo esto funciona igual que antes pero esta vez, todo combinado en una sola variable de cadena. 10. Tipos de datos: números: En cualquier lenguaje de programación, tenemos lo que se llama tipos de datos. Los tipos de datos, según suenan, se refieren al tipo de datos con los que estamos tratando. Hasta el momento, nos hemos centrado principalmente en el tipo de datos de cadena. Pero también hay otros, JavaScript es un lenguaje vagamente tipado o dinámico, que básicamente significa que a nuestras variables no les importa qué tipo de datos contienen, pueden contener una cadena o como vamos mirar durante este video, algo más, como un número, y también podemos cambiar el tipo de datos de una variable a cuando reasignamos un nuevo valor. Esto es a diferencia de algunos otros lenguajes de programación como Java, donde necesitamos especificar qué tipo de datos contendrá primero nuestra variable. Dentro de esta lección actual tenemos los tipos de datos, números, video, que es el Número 6. También asegúrate de abrir esto dentro del navegador también. Al tratar con un lenguaje como Java, es posible que tengamos que declarar una variable como esta. Podemos darle a nuestra variable un nombre llamado número, y establecer esto igual a una cadena de cinco. Cuando escribimos código así como este, se trata de código Java, esto es lo que se llama un lenguaje fuertemente tipado, ya que este tipo de datos debe declararse por primera vez. No obstante, aunque usamos en JavaScript, que no le importa qué tipo de datos contiene esta variable. A diferencia de Java, no declaramos qué tipo de datos vamos a contener, simplemente decimos qué tipo de variable va a ser. Decimos let number es igual a 5, y esto por supuesto es una cadena porque está rodeado dentro de las cotizaciones. Pero, ¿qué tal si hiciéramos esto? Digamos que en la siguiente línea, entonces reasignamos este valor de número para que sea igual a un número real como cinco. Es así como establecemos un número en JavaScript. No rodeamos ninguna de las cotizaciones. Ahora podemos usar este número dentro de aquí. Ahora podemos poner el número en la pantalla. Digamos esto y veamos qué pasa. Refresca, y ahora el valor de esto es cinco. Esta variable numérica ha cambiado a pesar de que usamos en un tipo de datos completamente diferente. Este tipo de datos de número puede ser un número entero al igual que este, y podemos escribir esto con o sin decimales. Podemos dar salida a esto. Si vienes de un lenguaje de programación diferente donde puede haber múltiples tipos de números como double float, o integer, este no es el caso aquí. Los números JavaScript siempre se almacenan como un formato de punto flotante de doble precisión. Si sí quieres saber más sobre los detalles técnicos detrás de esto, puedes encontrar el enlace aquí en la página. Al trabajar con números, JavaScript también puede calcular el valor y almacenar esto dentro de una variable también. Por ejemplo, si le asignáramos a este número el valor de 5 más 10, ahora debería generar el valor de 15. Haremos el cálculo primero y luego asignaremos esto a la variable. Pero, ¿qué crees que pasará si sumáramos un número y una cuerda? Bueno, vamos a averiguarlo. Diremos let Number 1 igual a ser una cadena, y luego dejamos Number 2, esto puede asignar el valor de 15. Ahora en lugar de emitir el valor de número, vamos a dar salida al valor de Número 1, agregarlo a la variable de Número 2, sobre al navegador. Vemos nuestras dos variables, tenemos la cadena de 5 y luego el número de 15. ¿ Es esto un número o es una cadena? Bueno, cuando descubro un número y una cadena, en JavaScript el resultado es una cadena. A pesar de que aquí tenemos un número, esto se clasifica como una cadena completa. Podemos probar esto mediante el uso de operador llamado typeof, poner estos fuera de lugar, y usamos typeof. Después dentro de los corchetes, pega estos de nuevo dentro. Veremos qué tipo de datos se devuelven desde dentro de estos corchetes. Podemos usar esto con cualquier otro tipo de datos 2 y nos hará saber con qué tipo de datos estamos tratando. Guarda y refresca y vemos que se trata de un tipo de datos de cadena. No obstante, sin embargo, si acabáramos de dar salida al Número 2, el resultado sigue siendo un número. Este tipo de datos es una herramienta realmente útil si no estamos seguros con qué tipo de datos estamos trabajando. También ten en cuenta aunque tengamos un número almacenado dentro de citas como esta, que tiene un Número 5, esto también se clasificará como una cadena 2. Entonces cualquier cosa entre comillas es una cadena, cualquier número que no esté entre comillas, se clasifica como un número. Tanto el tipo de datos de cadena como también el número se considera lo que se llama un tipo primitivo de JavaScript. primitivas son tipos de datos que no se clasifican como un objeto. Tampoco tienen ningún método que sean acciones que se puedan realizar en un objeto. Pero no te preocupes por los objetos y métodos todavía, tendremos mucho más detalle sobre estos a lo largo de este curso. Lo principal a entender por ahora es que las primitivas son los tipos de datos más simples en comparación, y estos incluyen cosas como la cadena y también números. igual manera que un resumen de lo que hemos visto en este video, tenemos tipos de datos que es el tipo de datos con el que estábamos trabajando, y actualmente hemos mirado el tipo de datos de cadena y también el número. También mencionamos fuertemente el tipo, que es un tipo de datos que necesitamos declarar por delante al crear una variable. En otros lenguajes como Java, tendríamos que declarar que una variable es un cierto tipo de datos como una cadena o un número cuando la creamos. JavaScript por otro lado está tipeado de manera suelta, por lo que a las variables no les importa qué tipo de datos contienen, y también podemos reasignar estos datos con un tipo de datos diferente. Por ejemplo, podríamos crear una variable que es una cadena, y luego cambiarla o reasignarla más adelante con un tipo de datos de número. Primitivas, esto es lo que acabamos de ver antes, que es un tipo de datos que no se clasifica como un objeto. primitivas son generalmente un tipo de datos más simple, y descubriremos el otro tipo de objeto en algunos videos posteriores. Esta es una introducción básica a los números JavaScript, son una parte real importante y fundamental de JavaScript. 11. Tipos de datos: booleanos, nulos e indefinidos: En el video anterior, cubrimos tipos de fechas JavaScript algo primitivas que incluyen el número y también la cadena. Ahora vamos a ver algunos tipos de datos más primitivos disponibles en JavaScript. Esto va a ser un booleano en valor nulo y también indefinido. Asegúrate de dirigirte a la carpeta de lecciones actual que es el número 7, y los tipos de datos booleanos, null e indefinido. Ya tengo esto abierto y también abierto en el navegador también. Al jugar con códigos como este, tenemos algo disponible para probar llamado registro de consola. Entre las etiquetas de script todo lo que necesitas hacer es escribir console.log y luego abrir los corchetes, así como esto. Trabajamos brevemente en la consola antes y este registro nos permitirá emitir un cierto valor a la consola dentro del navegador. Por ejemplo, podemos decir que es 10 mayor que cinco y si guardamos esto y luego hacemos clic derecho e inspeccionamos para abrir las Herramientas de Desarrollador, haga clic en la pestaña Consola, actualice. Esto devuelve el valor de true. El registro de la consola generará cualquier valor dentro de esta imagen de consola, grandes pruebas y rápidamente descubriendo el resultado o el valor. También tenemos un nuevo operador que es el menor que, guarde esto. Esto sería lo contrario, lo cual es falso. Estos valores verdaderos y falsos son el tipo de fechas de booleano. Con Booleano un verdadero y un falso son los únicos dos resultados, por lo que es realmente útil para revisar cosas así. Por ejemplo, en el proyecto Speedy Chef que tienes por venir, vamos a tener una variable llamada GameStarted. Antes de que se inicie el juego, este booleano se establecerá como falso y luego cuando iniciemos el juego, reasignamos esta variable para que sea verdad. Esto nos permite en cualquier momento del juego poder comprobar si el juego se inicia y tener ciertas características disponibles. Por ejemplo, tendríamos algo como esto, podríamos configurar una variable. Voy a darnos algún nombre como GameStore esto es igual iniciar para ser falso y luego dentro de nuestro log de consola, primer lugar, podemos comprobar el tipo de datos de esta variable usando el tipo de propiedad. Refresca y veremos Booleano justo dentro de aquí. ¿ Cómo podemos usar esto en una situación real? Bueno, los valores booleanos a menudo se usan junto con una declaración if. Una declaración if se ve así, tendremos la palabra clave if, abriremos los corchetes así y luego abriremos algunas llaves. Ahora verás este patrón seguido mucho dentro de JavaScript. Tenemos ciertas palabras clave, tenemos algunos corchetes redondos y luego tendremos unas llaves donde queremos ejecutar nuestro código, por lo que verás mucho estoa por lo que verás mucho esto medida que avanzamos por el curso. Pero en particular para esto si declaraciones lo que vamos a hacer, vamos a comprobar si algo es verdadero o falso. En nuestro caso, queremos comprobar si GameStarted es igual a verdadero o falso. Lo que hacemos, pasamos esto dentro de aquí y si esto resulta a cierto, entonces se ejecutará el código dentro de aquí. En mi caso, sólo voy a poner un simple registro de consola con el texto de GameStarted. Ahora si guardamos esto, entonces refrescamos el navegador, no vemos nada dentro la consola porque esto no es cierto. No obstante, volvamos esto para que sea cierto, actualicemos, y ahora se ha ejecutado nuestro registro de consola. Por supuesto, vamos a cubrir si las declaraciones con más detalle pronto pero así es como pueden funcionar con un simple valor booleano. Pero si tenemos también una segunda variable, bueno, PlayerName. Diga let PlayerName es igual a Chris y luego cambiamos nuestra declaración if para comprobar el nombre de este jugador. Tenemos un juego PlayerName, vamos a iniciar sesión en la consola. el mensaje de nombre de usuario. Demos un paso atrás y pensemos en lo que estamos haciendo aquí. Hacemos el check in. En primer lugar, la última vez comprobaremos si el GameStarted es igual a verdadero. Este era un valor booleano simple, sin embargo aunque para este PlayerName, esto es igual a una cadena. ¿ Crees que esto resultará verdadero o falso? Bueno, vamos a guardar esto y comprobarlo en el navegador y vemos que esto corre dentro de la consola. Bueno, la razón por la que vemos esto dentro la consola es porque generalmente una sentencia if o un booleano resultará a verdadero si existe un valor. Aquí tenemos un valor de Chris, así que esto definitivamente existe. Veamos qué sucede si eliminamos este nombre y dejamos esto como una cadena vacía, guardar y refrescar. Ahora bien, esto debe estar resultando en falso. Algo a tener en cuenta aquí que tener un valor vacío como nuestra cadena vacía, así como esta, no debe confundirse con no tener un valor en absoluto. Una variable sin valor es otro tipo de datos primitivo llamado indefinido. Si no tenemos ningún valor asignado a esta variable y si tuviéramos que eliminar esta cadena así como esta y entonces en su lugar, haremos un registro de consola para el PlayerName y también eliminaremos esta sentencias if, por lo que no pudimos ejecutar este registro de consola primera vez, guardar y más al navegador vemos este valor de indefinido. Como se mencionó anteriormente, este es otro tipo primitivo como string, number, y booleano y este indefinido se muestra porque tenemos una variable que no tiene un valor asignado a ella. Esto fue como antes cuando miramos $0 dentro del navegador. Si inicialmente escribimos $0, cuando no tenemos ningún elemento seleccionado en la página, recuperamos el valor de indefinido. El tipo de datos final que vamos a ver en este video también es primitivo y este es el valor de null. Null también indica que algo falta también. Si establecemos nuestra variable de PlayerName para que sea igual a null y luego actualizamos el navegador, como se esperaba recuperamos este valor de null. Tuvimos una breve mirada a los objetos en un video anterior, y null está relacionado con estos objetos. Indica que este objeto está vacío y a menudo cuando se trabaja con bases de datos o servicios back-end, un ejemplo común de esto es cuando se solicitan algunos datos de usuario. Si el usuario está conectado, recuperamos un objeto que contiene toda esa información de los usuarios. Si no están conectados sin embargo, a menudo veremos nulo ya que el objeto de usuario estará vacío. Miramos tres tipos de datos diferentes en este video, hemos mirado a Boolean para empezar lo cual es un simple valor verdadero o falso. Este tipo de datos primitivo es realmente útil y a menudo se ve combinado con una declaración if. Tenemos indefinido, nuevo un tipo de datos primitivo que indica que falta algo. En nuestro ejemplo, echamos un vistazo a una variable que tiene un valor nulo asignado a ella. Por último, también descubrimos null, que de nuevo es un tipo de datos primitivo y es más específico que indefinido y se refiere a un objeto que es la ausencia de cualquier valor. Se puede ver en la parte inferior aquí que indefinido es un resultado más genérico y null es más específico de un objeto. 12. Comentarios, puntos y comas y ASI: Si has trabajado en JavaScript antes, o si estás buscando ejemplos de código en línea, posible que notes que a veces se usan puntos y comas y a veces no. Los programas JavaScript se componen de múltiples sentencias, las cuales se leen de arriba a abajo del archivo. Sentencia es básicamente una instrucción, como crear una declaración variable del código para ejecutarse dentro de una sentencia if. bien se requieren puntos y comas en programas JavaScript, si optamos por no escribirlos manualmente, el analizador de JavaScript los agregará en fotos automáticamente, donde se requieran, los puntos y comas al final de cada sentencia, y el proceso se denomina inserción automática de punto y coma. Esto no significa que simplemente podamos olvidarnos de usarlos por completo. Hay casos en los que aún necesitamos agregarlos manualmente. Por ejemplo, agreguemos algunas variables y echemos un vistazo a los resultados. Te darás cuenta de que estoy en el video número 80, que es comentarios, punto y coma, y ASI, y además tener esto abierto dentro del navegador. Bajar a la sección de guiones. Lo que vamos a hacer es crear dos constantes. En realidad las constantes no importan en este momento. Sólo voy a agregar un nombre, luego una segunda constante, que se puede aprender en JavaScript. Este es un valor booleano de verdad. Entonces dentro del log de la consola hemos generado variables individuales en el pasado. Pero también podemos agregar una coma y generar el valor de ambas variables. Guarda el archivo y dirígete a la consola. Refresca y vemos nuestros dos valores variables. Nada inesperado aquí, obtenemos probablemente lo que esperábamos, que son nuestras dos variables. Los registraremos en la consola. Pero, ¿qué pasa si agregamos estas variables a la misma línea? Probemos esto. Coloque estos en la misma línea, y asegúrese se eliminen los puntos y coma del final de cada sentencia. En primer lugar, podemos ver que el editor de texto ha destacado aquí un tema tan pronto como lo haces. Si tuviéramos que guardar esto y actualizar el navegador, vemos un error de sintaxis dentro de la consola. Tenemos un token inesperado de const, porque el analizador de JavaScript no espera llegar a esta etapa aquí, luego ver una nueva declaración de const. Si tiene varias sentencias en la misma línea como esta, necesitamos declarar que se trata dos sentencias separadas, separándolas con punto y coma. Coloque el punto y coma en el medio. Ahora el editor de textos no está destacando ningún tema. Podemos probar esto. Guardar y actualizar. Ahora todo esto está funcionando bien. También puedes ver que mi editor de texto los ha colocado automáticamente en líneas separadas, ya que se trata de dos declaraciones separadas. par del punto y coma, algunos otros gotchas son cuando comenzamos una nueva línea con corchetes, o a menudo referida como paréntesis. Echemos un vistazo a un ejemplo justo después de estas dos constantes. Crear una nueva variable, vamos a llamar puntuación. Dirías números aleatorios como 97.34, una constante de daño, y de nuevo, un número aleatorio, 10.42. Justo como nota al margen, he creado esto como un let. Dado que una puntuación generalmente se puede actualizar, podemos emitir el resultado de la puntuación con el daño despegado. Ahora si guardamos esto y actualizamos, este es el valor correcto dentro de la consola. Sabemos que puede realizar un cálculo dentro de estos corchetes, como acabamos de ver dentro del registro de la consola. Pero, ¿qué pasa si nos llevamos este log de consola e hicimos algo más con este cálculo? Por ejemplo, en lugar de resultar en 86.92, ¿y si en cambio quisiéramos redondear esto para decir 86 o 87? Bueno, para hacer esto, JavaScript tiene un método incorporado que podemos usar llamado ToPrecision. Podemos cambiar esto al final con el punto, minúscula a, y esto es camel caso, por lo que la precisión comienza con una P. Para usar esto dentro analizar el valor de longitud dos para hacerlo dos dígitos de largo. Ahora veamos el efecto de lo que pasaría si nos olvidaramos de poner algún punto y coma. Ahora Visual Studio Code insertará automáticamente estos en las siguientes cuando sea necesario. Pero si dejáramos estos fuera así y golpeáramos “Guardar”, al instante veríamos qué pasaría cuando el motor JavaScript leyera este código. Podemos ver que esta línea se ha insertado directamente después de la declaración justo aquí, porque no tenemos punto y coma para separar. Guardemos esto y actualicemos. Vemos un error, no podemos acceder al daño antes de la inicialización, y esto se debe a que esta línea justo aquí comienza con estos corchetes. Ahora esto puede no significar mucho si eres completamente nuevo en JavaScript. Pero si has hecho un poco de JavaScript en el pasado, así es en realidad como declaramos cierto tipo de función. En lugar de interpretar esta sección de código y esta sección de código como dos líneas, en realidad está leyendo de izquierda a derecha y continuando esto como una línea completa de código. Para solucionar esto, como es de esperar, necesitamos separarlos con punto y coma. Entonces si nos refrescamos, esto entonces ahora eliminará el error, y todo está claro en la consola. También podemos ver directamente los resultados de este cálculo recortando esta línea de código. Crea un registro de consola y pega esto de nuevo dentro. Guarda esto y actualiza el navegador y nuestro valor ahora se ha redondeado a dos decimales. También hay de unas funciones matemáticas que veremos más adelante, que pueden redondear estos valores arriba y también redondearlos hacia abajo. Solo para recapitular, usar punto y coma en JavaScript es opcional. Depende completamente de ti si quieres usarlos, o confía en que se inserten automáticamente. Pero sí ten en cuenta hay algunos casos en los que iniciamos una nueva línea de código con los corchetes donde necesitamos asegurarnos de insertarlos manualmente, para que no cause ningún error. Para redondear este video, vamos a echar un vistazo rápido al uso de comentarios. Los comentarios son simplemente una forma para que hagamos notas dentro de nuestro código, que no se leerá como cualquier código JavaScript. También podemos usarlo para comentar nuestro código también. Esto significa que en nuestro programa sigue ahí una línea de código particular , pero no se lee cuando se ejecuta el script. Para insertar un comentario o una nota, comenzamos en JavaScript con las dos barras inclinadas hacia adelante. Entonces podríamos escribir una nota como, debe tener punto y coma en las declaraciones anteriores. Si guardamos esto y actualizamos el navegador, no vemos ninguna referencia al comentario dentro de aquí. Pero, ¿y si tuviéramos un comentario más largo que se extendiera en múltiples líneas? Por ejemplo, si tuvieras un comentario justo aquí y luego dicho controlar la longitud del número usando ToPrecision. Bueno, como la mayoría de las veces, el editor de textos nos dará una pista de donde sea que estemos haciendo algo bien o mal. De inmediato estos cambios de color y tenemos este subrayado rojo a continuación. Podemos ver que así no es como se espera que se escriba. Para esto incluso podemos comenzar cada nueva línea de código con las barras dobles hacia delante, o en su lugar, podríamos convertir esto para que sea un comentario multilínea, que es una diagonal hacia adelante, y luego una estrella. Podemos entonces quitar el comentario de segunda línea y luego ir al final de nuestro comentario justo aquí, y podemos terminar esto con lo contrario que es una estrella y una diagonal hacia adelante. Como se mencionó antes, también podemos comentar líneas de código también. Si queremos dejar un determinado código en su lugar como referencia, o si queremos reincorporarlo más adelante, o cuando es debido es exactamente lo mismo. Por ejemplo, si quisiéramos eliminar esta constante de Chris, solo agregamos las dos barras inclinadas hacia delante delante, esta línea de código se volverá gris, y ya no está disponible para acceder dentro de nuestro programa. 13. Operadores: proyecto y comparación: Los operadores son algo que usamos todo el tiempo en JavaScript. De hecho, ya hemos utilizado algunos de ellos ya durante este curso. Notarás para este video Ya estoy en el archivo correcto, que es la lección número 9, Operadores: Asignación y Comparación. También abre esto dentro del navegador. Desplazándose hacia abajo a nuestra sección de guiones, ya tenemos algunas variables simples ya configuradas. Notarás que lo común entre las cuatro de estas variables es que todas usan el operador igual. Este es el operador de asignación porque asignamos el valor de la derecha al nombre de la variable sobre a la izquierda. Pero también hay otros operadores de asignación, que puedes ver aquí arriba a partir de este comentario. Hemos mirado esto igual. Pasemos ahora a este símbolo más igual. Digamos que queríamos sumar el valor del número 1 y también el valor del número 2, luego almacenar el valor recién devuelto. Bueno, podríamos hacerlo así. Llamaremos a esto el nuevo número. Establezca esto igual al valor del número 1 más el número 2. Si me desplazo un poco más hacia abajo, tenemos este getElementById, que ya está configurado, que es solo este nivel 1 encabezando arriba en la parte superior. Lo que vamos a hacer aquí es poner el valor del nuevo número. Agrega esto aquí, dale a esto un “Guardar”, y ahora podemos “Actualizar” el navegador. Vemos este valor recién devuelto de 20, que es el 15 y los cinco sumados. No hay sorpresa con ésta. Pero JavaScript también nos proporciona algunas formas más cortas de hacer esto, lugar de agregar el número 1 en las variables número 2 juntas y luego asignarlo a una variable. En cambio podemos hacerlo así. Podemos eliminar nuestro comentario hacia fuera esta línea con las dos barras inclinadas hacia adelante. Además, si está utilizando Visual Studio Code en un Mac, puede usar comando y barra inclinada hacia delante. Esto activará esto automáticamente. Si estás usando Windows, esto será control con barras inclinadas hacia adelante. Esto hará exactamente lo mismo. En cambio una opción corta. Si querías modificar la variable número 1 o actualizarla, podemos usar el operador más igual y luego pasar en el número 2. De lo que esto hará, sumará ambos números juntos y asignará un nuevo valor a la variable sobre a la izquierda. Ambas líneas seguirán viniendo con el mismo resultado de 20. La diferencia siendo la de arriba se está almacenando dentro de una nueva variable, y la de abajo está actualizando esta existente. Podemos comprobar esto actualizando esto para que sea el número uno. “ Guardar” y “Refrescar”. Todavía vemos el mismo valor de 20. También arriba en la parte superior con nuestras variables, tenemos este nombre y el apellido. Si quisiéramos mostrar el nombre completo en la pantalla, podemos llegar a algo como esto. En primer lugar, podríamos establecer el nombre del forense y luego usar Comando o Control C para copiar y luego Comando o Control V para pegar. Entonces también podemos dar salida al valor del apellido. “ Guardar” esto, y más al navegador sólo vemos el valor de nuestro apellido. Este enfoque no funciona porque el apellido es último código conocido y por lo tanto anula el nombre forense. En cambio, lo que podemos hacer es hacer uso del operador plus igual para agregar esto a nuestros elementos en lugar de reemplazar el existente. Si “Guardamos” esto y “Refrescar”, vemos el valor de ambas de nuestras variables. También podríamos añadir un espacio vacío entre cada una de estas palabras usando algunas de las técnicas que hemos utilizado en el pasado, pasar en una cadena vacía con un espacio. Entonces el operador plus para agregar esto justo antes de nuestro apellido. “ Guardar” este archivo. Ahora tenemos un espacio entre nuestros dos nombres de variables. Esto es agregar valores y luego reasignar el nuevo valor. Pero también podemos hacer lo contrario con la resta. Podemos ver que es justo aquí arriba. Esto funciona exactamente igual, pero usamos el símbolo negativo en lugar del plus. Podemos usar esto con nuestro ejemplo numérico desde abajo haciendo lo contrario con una resta. Quitemos este segundo, getElementById. Sustitúyase el nombre por el valor del número 1. “ Guardar” y “Refrescar”, y ahora tenemos el nuevo valor de 10. Sólo para recapitular, lo que hemos hecho aquí es que hemos tomado el número 1, que es 15. Después hemos quitado el valor de cinco para darnos 10, y el nuevo valor de 10 ha sido reasignado al número 1. También tenemos multiplicar exactamente lo mismo. Podemos cambiar esto, “Refrescar”, y tenemos el valor de 75. También podemos usar divide, que es la slash hacia adelante. Se trata de 15 dividido por 5, que reasignará el número 1 a ser igual a 3. Una interesante es esta última que podemos ver aquí, que es el símbolo por ciento. Este símbolo por ciento es el resto de asignaciones después de la división. De qué está haciendo esto aquí, tenemos nuestro número 1 y nuestro número 2, que es resultado de 15 dividido por 5. Cinco entra en 15 tres veces y por lo tanto no hay remanente. Si fuéramos a guardar esto, debería haber un valor restante de cero. Pero, ¿qué pasa si cambiamos uno de estos números? Digamos cuatro. Cuatro entra en 15 tres veces con el resto de tres. Otro tipo de operador que tenemos es la comparación. Actualmente sabemos cuando estamos estableciendo variables al igual que estos bonos, cuando usamos un solo igual, asignamos el valor sobre la derecha al valor sobre a la izquierda. Aquí, el número 1 era originalmente 15, y ahora si establecemos esto igual al número 2, ahora debería ser el valor de cuatro. Pero a veces esto puede parecer un poco extraño para los principiantes. Porque si tuviéramos que leer esto como principiante, esto puede parecer que estamos revisando si el número 1 es igual al número 2. Como sabemos, este no es el caso. Esto asignará el número 2 para que sea igual al número 1. Pero si quisiéramos comparar si estos dos valores son los mismos, lo hacemos con los dobles iguales. Vamos a instalar esto dentro de nuestro valor, digamos resultados. Después envía esto al navegador, “Guardar” y “Actualizar”. Vemos que el valor es un booleano de falso. Sabemos que esto es falso porque el número 1 es igual a 15 y el número 2 es igual a 4. También podemos hacer exactamente lo contrario, que es agregar un signo de exclamación dentro de aquí. Esto comprobará si los valores no son iguales. Encontrarás esto muchas veces con JavaScript, si usamos el signo de exclamación, esto hará lo contrario al caso original. “ Guardar” esto, “Refrescar”. Lo contrario por supuesto, es cierto. Algo, sin embargo, a tener cuidado es si estamos comparando dos tipos de datos diferentes. Por ejemplo, si ambos fueran cinco, pero uno de estos cincos estaba rodeado dentro de las citas para convertir esto en una cuerda. Para este ejemplo, no importa si estamos usando las cotizaciones simples o dobles. Vuelve a cambiar a los iguales. Veamos cuál es el resultado dentro del navegador. Si “Refrescar” esto, vemos que este es un valor de verdad. A pesar de que tenemos una cadena de cinco y un número de cinco, el doble igual sólo verificará los valores y no los tipos de datos. El número 1 y el número 2 se considera igual a pesar de que uno es una cadena y uno es un número. No obstante, aunque si quisiéramos comprobar también el valor en el tipo de datos, hay una forma de que podamos hacerlo usando el triple igual. El triple igual significa igualdad estricta. “ Guardar” esto, “Refrescar”. Ahora como tienen diferentes tipos de datos, esto ahora devuelve un valor falso. Si estamos usando la estricta igualdad así como esto, también podemos usar el signo de exclamación igual que antes para devolver exactamente lo contrario. Cambia esto por un signo de exclamación. Ahora si “Refrescar” el navegador, este es el valor opuesto de true. Comparación como esta a menudo se combina con declaraciones if, que volveremos a cubrir más adelante. Pero algunos otros operadores de comparación incluyen los menos que y los mayores que los símbolos, que son las flechas izquierda y derecha. Nosotros sí miramos brevemente estos en un video anterior. Todo lo que tenemos que hacer es poder cambiar nuestros dos valores para ser diferentes. Primero comprobemos si el número 1 es mayor que el número 2. Sabemos que esto es cierto, por lo que esperamos ver esto dentro del navegador. Lo contrario es el menos que símbolo, que, por supuesto, devolverá el valor de falso. Por último, lo último que queremos echar un vistazo en este video es que también podemos combinar estos menos que y mayores que símbolos con los iguales. Podemos comprobar si el número 1 es menor o igual al número 2. Este será falso. Pero no podemos cambiar estas variables para que sean las mismas. Ambos son iguales. Esto debe ser un valor de verdad. También tenemos acceso a la mayor o igual a la versión también. Operadores como estos son útiles para cosas como juegos, donde podemos comprobar si la salud de un jugador es cero o menos, lo que luego terminará el juego. A continuación, nos quedaremos con el tema de los operadores, pero esta vez echaremos un vistazo a la lógica y la aritmética. 14. Operadores: lógicos y aritméticos: Bienvenido de nuevo. Junto con las asignaciones y los operadores de comparación, también hay operadores lógicos y aritméticos, que podemos aprovechar en JavaScript. Como siempre, nos hemos dirigido a carpeta de esta lección que es el número 10, y también abrimos esto dentro del navegador. Al igual que el video anterior, tenemos algunos comentarios, que tiene una lista de todos los operadores disponibles. El primer conjunto son los operadores aritméticos. Nos pondremos a las lógicas justo después. Con los operadores aritméticos, muchos de estos son sólo de sentido común, como la, suma y la, resta. Muchos de estos también son muy similares al video anterior con simplemente no combinado con el operador igual. Por ejemplo, éste es uno que miramos previamente. Este plus es igual, luego sumará ambos números y luego reasignará el nuevo valor para ser el número 1. Sabemos que son 15 y también cinco. Estos resultados del número 1 serían entonces iguales a 20. No obstante, si quisiéramos eliminar esto, es igual y solo tenemos el símbolo más por sí solo, como es de esperar esto simplemente agregará ambos valores juntos, lo que significa que podríamos generar esto directamente en el consola, o también podríamos almacenar esto dentro de una variable para hacer uso de en cualquier lugar dentro de nuestro código. Justo debajo [inaudible] esta línea de código donde agarramos este título de página. Entonces podemos establecer el texto interno para que sea igual a nuestro resultado. Probemos esto de nuevo en el navegador. Recarga esto. Obtendremos el valor de 20 porque hemos sumado tanto el, número 1 como el, número 2. Esto funciona para no solo agregarlo para obtener las variables como esta. Por ejemplo, hagamos un registro de consola. Podemos agregar números simples al igual que este, por lo que 5 más 3. Abre la consola y ahí está nuestro valor justo aquí. También podemos usarlo para sumar cuerdas también. Arriba tenemos una constante de nombre y también apellido. Podemos utilizar este operador para agregar el nombre al apellido. Como hemos mirado anteriormente, también podemos anexar tantas cadenas como queramos. Esto también sumará un espacio entre el nombre del apellido. “ Guardar” y “Refrescar”. Tiene el nombre completo ahora mostrado, solo tienes que quitar este registro de consola y vamos a cortar algunos más de estos operadores justo arriba. Como es de esperar. Podemos reemplazar esto por restar, esto nos dará los resultados de 10. Tenemos la estrella que es el símbolo de multiplicación. Esto ahora será 15 multiplicado por 5, dándonos los resultados de 75. También tenemos el operador restante, que es este símbolo por ciento justo aquí. Recuerda de videos anteriores esto hará una división y emitirá cualquier número restante después. Este cinco entra en 15 tres veces, dejando un buen número redondo y cero resto. Pero si lo cambiáramos para ser cuatro serían 4, 8,12, y entonces tendríamos un resto de 3 para conformar 15. Estos son muy similares a los operadores de asignación que buscamos previamente. Porque como puedes ver aquí al final hay otros dos operadores adicionales que se ven muy diferentes al video anterior. Este es el incremento y decremento. El primero, que es el doble más esto es incremento y esto aumentará el valor original en 1 o el decremento, que es la doble resta. Esto disminuirá el valor en 1 cada vez. Para ver esto como un ejemplo, necesitamos cambiar esto para que podamos actualizar estos resultados y cambiarlo para que sea un múltiplo por lo que el resultado va a ser 60. Por lo que ahora 60 se almacena dentro de este resultado. Si bajamos a la siguiente línea, entonces seleccionamos este resultado y sumamos el doble más después, que son los incrementos. Refrescar. Esto ahora se está incrementando para ser 61. También podríamos volver a hacer esto copiando y pegando, y esto ahora sería 62, por lo que aumenta en 1 por cada intento. Este operador es útil para muchas situaciones. Por ejemplo, en uno de nuestros próximos proyectos, lo usaremos varias veces, como cada vez que se hace un nuevo pedido, aumentamos el número de pedido por1 para cada pedido. También, tenemos la variable pizzas completadas, que aumentará en 1 cada vez el chef complete una de las piezas. Podemos instalar todos estos números y mostrarlos al final del juego. Lo contrario es utilizar dos símbolos de restar, lo que va a disminuir el número, que significa que lo disminuirá por el valor de 1 cada vez. Recuerda que el resultado original fue de 60, luego lo reduciremos en 2. Refresca, y esto deja 58 más bajo. Debajo de esto, también tenemos los operadores lógicos, y como puedes ver, solo hay tres de estos en la pantalla. Estos operadores lógicos a menudo se combinan con declaraciones if que cubriremos más adelante. Pero también son útiles por su cuenta. Si quisiéramos comprobar si las condiciones múltiples eran verdaderas, podríamos usar el operador lógico AND, que es este doble ampersand. Por ejemplo, si queríamos saber si el número 1 era igual a 15, y también si el número 2 era igual a 4 antes de realizar cualquier código. Podríamos hacer esto por, vamos a quitar este ejemplo. Yo sólo voy a mover esto a continuación también. Recrearemos nuestros resultados. Ahora podemos utilizar los operadores lógicos para realizar una comprobación. Queremos comprobar si nuestra variable número 1 va a ser igual a 15. El triple es igual, esto es igual tipo y valor. Ahora, esto almacenará un valor verdadero o falso dentro del resultado. Como mencioné antes, y si también quisiéramos comprobar si el número 2 era igual a 4. Bueno, la forma en que podríamos hacer esto es con este operador AND también podemos realizar una segunda comprobación. Esta vez comprobamos si el número 2 es igual a 4. Digamos esto y actualicemos el navegador. Esto es cierto. Ambos cheques, éste y también éste es cierto tanto. Es por ello que obtenemos el resultado de verdadero. Cambiaría cualquiera de estos para ser un valor diferente como el número 2. Dado que uno de estos ahora es diferente, esto resultaría entonces en falso. Eso es genial, pero esto por supuesto depende de ambas condiciones para ser verdad. Pero ¿y si quisiera saber si sólo uno de estos era cierto? Por ejemplo, si el número 1 era igual a 15 o si el número 2 era igual a 4, posible que deseemos obtener un valor de true back si alguno de estos es resultado de true. Bueno para esto tenemos al operador OR, que son estos tubos dobles. Cambiemos el doble ampersand para los tubos dobles. Ahora sabemos que sólo uno de estos valores es cierto. Ahora deberíamos ver verdadero dentro del navegador. Lo mismo si cambiamos esto de nuevo a antes. Ahora sabemos que ambos van a ser iguales a verdad. Esto también sería cierto ya que recuerden, sólo necesitamos una o más de estas condiciones para ser verdaderas para obtener los resultados de true devueltos. último, pero no menos importante, tenemos el signo de exclamación, que es el operador NOT. Esto básicamente hace lo contrario y devolverá un valor verdadero en falso o viceversa. Recuerda que actualmente dentro del navegador estamos viendo el valor de true. Si querías revisar lo contrario, todo lo que necesitas hacer es agregar este signo de exclamación antes del resultado y decir esto, esto nos dará el resultado contrario, que es falso. Revisar lo contrario así puede parecer un poco extraño, pero sí tiene muchos usos dentro de JavaScript. Por ejemplo, en uno de nuestros próximos proyectos, sí tenemos una variable llamada juego iniciado. Se trata de un booleano verdadero o falso. Podemos entonces comprobar si el juego ha comenzado o si el juego no ha comenzado usando el signo de exclamación antes de ejecutar algún código en particular. También es útil para un montón de situaciones como comprobar si no existe ningún usuario, y tantas más. Pero referencia a todos estos operadores cubiertos en este video y también al anterior también. Hay toboganes disponibles con este curso. Echa un vistazo si necesitas una referencia. 15. Introducción a las matrices y tipos de objetos: Para este video, salta a la lección número 11, que es la introducción a matrices y tipos de objetos. También abre esto dentro del navegador. En JavaScript, hay dos grupos en los que podemos colocar nuestros tipos. Se trata tanto de tipos primitivos como de objetos. Los tipos de datos anteriores que hemos mirado como una cadena, número, Boolean definirían el nulo, todos caen en un grupo llamado tipos primitivos. También hay gran int y símbolo también, que aún no hemos cubierto. Ahora vamos a descubrir los tipos de objetos. El primero es una matriz. Los valores primitivos anteriores que hemos visto almacenan un solo valor como una cadena, o texto, o un número. Pero una matriz puede contener múltiples valores. Si piensas en una lista de compras, una lista de tareas pendientes, o generalmente cualquier lista con múltiples valores, una matriz es ideal para este tipo de datos. Echemos un vistazo a nuestra primera matriz dentro de la carpeta del proyecto. Dirígete a la sección de guiones. Estamos creando una matriz con estos corchetes. Las matrices pueden contener cualquier tipo de datos como una cadena, así como esta, separadas por coma, agregamos múltiples valores dentro de aquí. Podemos colocar en números. Podemos colocar en objetos que vamos a ver a continuación, o también podrías anidar dentro de una matriz también. Para ello, solo creamos un nuevo conjunto de corchetes así. Después seguimos agregando nuestra información en el interior. Si quisiéramos colocar en dos cuerdas, lo haríamos así. O si quisiéramos usar una matriz para una lista, digamos, una lista de ingredientes de pizza, simplemente lo haríamos agregando múltiples cadenas separadas por una coma. Digamos masa, queso, salsa, y también algunos pepperoni también. Ahora bien, ¿cómo accedemos a alguno de estos valores? Bueno, al igual que hicimos con cualquier otro valor, también podemos almacenar esto dentro de una variable. Diremos que la pizza sea igual a esta nueva matriz. Entonces abajo en la parte inferior tenemos nuestros documentos. Seleccionamos un nuevo título y luego repente en un texto para ser igual a esta cadena. En cambio, podemos reemplazar esta cadena por el valor de nuestra matriz de pizza. Refresca el navegador, y luego vemos una lista de todos nuestros ingredientes. Leer valores individuales de esta matriz de pizza también es simple. Los valores de matriz se numeran desde la posición 0, y esto se denomina la posición de índice. El primero de masa es la posición índice 0. Esto es 1, 2, y 3. Podemos usar esto dentro de los corchetes para acceder a cualquiera de estos ingredientes. Posición 0, que es la masa. Podemos acceder a esto de manera individual y también a cualquiera de los otros valores también. Las matrices también tienen algo que se llama propiedad. A medida que entramos en mucho más detalle sobre estos tipos de objetos, descubrirás que los tipos de objetos como una matriz tendrán múltiples propiedades o métodos disponibles. Estos nos permiten realizar ciertas acciones, o también acceder a alguna información también. En primer lugar, echemos un vistazo a una propiedad llamada longitud. En lugar de acceder a ella, sólo toma el valor aquí. Podemos encadenar al final la longitud, refrescar. Vemos que hay cuatro valores contenidos dentro de aquí. Podríamos hacer esto de todos modos lo que tú quisieras. Por ejemplo, si quisiéramos colocar esta variable dentro de una cadena, podríamos abrir los backticks. Decimos que esta pizza ha usado una cadena de plantilla. Podemos pasar en una variable con el símbolo $, luego las llaves. Pase en la pizza.longitud. Entonces ingredientes. Digamos que esta pizza tiene cuatro ingredientes. Pasó al navegador, y ahí vamos. Las matrices también tienen disponibles algunos métodos incorporados que podemos usar para realizar algunas tareas comunes, como empujar un nuevo elemento a esta matriz. Podemos eliminar valores y también comprobar si la matriz contiene un cierto valor también. Por ejemplo, vamos a comprobar si nuestra pizza contiene el valor del pepperoni. Para ello, primero accedemos a nuestro array por el nombre. Después usamos dot includes; un interior de los corchetes, podemos pasar un valor que se desea comprobar. En nuestro caso, queremos comprobar si este contiene pepperoni. Esto luego devolverá ya sea un valor verdadero o falso si esto está contenido. También podemos almacenar esto dentro de una variable también. Llamemos a esto HasPepperoni. Entonces a continuación podemos reemplazar este texto interno. Quitemos esta cadena de plantilla y la reemplacemos por nuestra variable. Dale a esto un ahorro. Si sí ves un salto igual que tuvimos ahí, este es solo el editor de texto guardando y reformateando el documento. Asegúrese de que esto se guarda y pasa al navegador. Esto es cierto porque el valor del pepperoni está contenido dentro de esta matriz. Podemos cambiar esto para que sea una ortografía incorrecta y esto será un valor falso. O si tuviéramos la ortografía correcta, también podríamos usar el signo de exclamación justo delante de esto, como miramos en el video anterior. Esto devolverá entonces el valor opuesto, que también es falso. También hay muchos más de estos métodos disponibles. También se acerca una sección de array dedicada para entrar en estos con más detalle. 16. Introducción a los objetos: Otro tipo de objeto junto con array. Bueno, es un objeto real, matrices que acabamos de ver contienen múltiples valores. Haré referencia a un solo valor dentro de la matriz accediendo al número de índice, que es la posición que comienza desde cero. Miramos brevemente los objetos antes, y estos son también una colección de valores. No obstante, un valor de objeto es referenciado por una clave. [ inaudible] inicia archivos y en la introducción a los objetos. Queremos empezar por crear un objeto. Digamos que let user, y digamos que esto es igual a nuestras llaves. Recuerda desde antes que podemos agregar una serie de propiedades que es un par clave y valor. Tenemos una clave, y, por ejemplo, nuestro usuario puede tener un Nombre. Voy a establecer esto igual a una cadena, así que tenemos la clave y tendremos el valor y es esta clave la que usamos para acceder a cualquiera de estos valores dentro de aquí, separados por coma. Añadamos un poco más de detalle, el segundo nombre. Colocamos en tantos de estos como quisiéramos, como la ocupación, desarrollador web. Para este ejemplo, vamos a agregar un valor booleano de logueado, establezca esto para que sea cierto. Por último, también podemos agregar algunos campos dentro de aquí, y esto también puede contener matrices anidadas también, igual que una matriz regular abriremos los corchetes y podemos agregar dentro de aquí tantos valores como lo haríamos les gusta. Si guardamos esto, y te darás cuenta aquí tenemos el rumbo nivel 1. Accedemos a este encabezado, voy a establecer esto es igual a nuestro objeto de usuario, así que reemplaza esta cadena de texto por la variable de usuario. Guarda este archivo y refresca este dentro del navegador. En cuanto hacemos esto, vemos el valor del objeto Object. Esto es lo que sucede cuando tratamos de mostrar el objeto completo dentro del navegador en lugar de una propiedad individual. Convierte todo este objeto en una cadena. Un objeto, objeto es el valor por defecto que se muestra dentro del navegador. Con las matrices, utilizamos los corchetes para acceder al número de índice de valores, pero para los objetos, en su lugar usamos los corchetes para acceder a cada una de estas claves. En lugar de mostrar al usuario completo, abre los corchetes, y luego dentro, accedemos al nombre de la propiedad dentro de la cadena, así como esto. Esto va a hacer referencia al nombre de nuestro usuario, y si guardamos esto y nos refrescamos, esto ahora está siendo reemplazado por el valor. Podemos cambiar esto para que sea cualquier otra cosa como la ocupación, y esto también funciona perfectamente bien también. Otra forma en que podemos hacer esto para lograr exactamente lo mismo es usar también la notación de puntos. A esto se le llama notación porque estamos usando los corchetes, pero la notación de puntos también es una forma de acceder a cualquiera de estas propiedades. Podemos decir usuario dot primero, esto funciona perfectamente bien también. Durante el desarrollo, si también quisiéramos acceder al objeto completo y ver todas las propiedades disponibles dentro, podemos hacer uso de un registro de consola, pasando nuestro objeto de usuario y en lugar de mostrar objeto como hemos visto dentro del navegador, si fuéramos a ir al navegador y abrir las herramientas de desarrollador dentro de la consola, veremos el valor completo de este objeto. Una vez que hacemos clic en esta flecha justo aquí, también podemos expandir cualquier otro tipo de objeto dentro, como esta matriz, y ver todos los contenidos anidados dentro de eso también. Estos registros de consola pueden ser útiles para depurar y en general, registrar qué valores están contenidos para cualquier tipo de datos. Además de este registro de consola si quisiéramos ver el interior estructurado de un formato de tabla, podemos cambiar esto para que sea una tabla de puntos de consola. Ahora podemos guardar y refrescar, y esto luego mostrará nuestro objeto una manera similar a una tabla, que puede ser un poco más fácil de entender todos los datos que tienes dentro de un objeto. Estos registros de consola pueden ser útiles para depurar y en general, comprobar qué valores están contenidos para cualquier tipo de datos. Si tuviéramos múltiples objetos, también podemos colocarlos dentro de matrices también. Esto será útil para almacenar muchos usuarios o productos. En lugar de tener este objeto aquí, podríamos cambiar esto en una matriz y entonces esto nos permitiría almacenar múltiples objetos. Nuestra primera, y como esta es una matriz, separamos cada valor con una coma, y luego cada uno de estos objetos podemos agregar tantas propiedades dentro como nos gustaría. Pegándose con lo mismo podríamos añadir en el nombre de pila, y luego separados por una coma, el apellido. Solo copiemos los detalles de éste, coloquemos esto en nuestro segundo objeto. Voy a cambiar los nombres, y por supuesto, ahora tenemos múltiples usuarios. También podríamos cambiar esto para que sean usuarios. Si esta fuera una aplicación de la vida real y tuviéramos que hacer una llamada a la base de datos para una lista de todos nuestros usuarios, nuestros datos pueden volver así, pero ahora tendremos múltiples objetos dentro de esta matriz. ¿ Se puede averiguar cómo acceder a ambos nombres? O recuerda que como las matrices están indexadas, podemos acceder a cada objeto por la posición dentro de la matriz. Este primero es la posición de índice 0, y el segundo es el índice número uno, por lo que lo que tenemos que hacer es poder eliminar esto. Esto ahora se llama usuarios. Abre los corchetes y podemos acceder a nuestro primer usuario con posición cero. Recuerda desde antes cuando estábamos accediendo al objeto completo, así como esto. Se mostrará objeto objeto dentro del navegador. Lo que necesitamos hacer es acceder a cualquiera de estas propiedades individuales por el nombre de la clave. Tenemos las dos llaves de primera y última. Vamos por el primero, guardemos esto, y actualicemos. Esto nos ha dado un error ya que el usuario no está definido. Echemos un vistazo al problema. Elijo esta mesa de consola aquí. Estamos tratando de cerrar sesión al usuario, pero esto se ha cambiado a los usuarios, luego recargar el navegador y ahora accedemos a nuestro nombre de pila. Vamos por el segundo objeto, así que posiciona uno. Es así como accedemos a los valores contenidos cuando tenemos múltiples objetos almacenados dentro de una matriz. Junto con los usuarios también son muchos, muchos otros casos de uso para este tipo de configuración. Por ejemplo, si tuvieras una tienda de comercio electrónico con toda la colección de productos y también la cesta de la compra podría ser una matriz vacía, entonces cada vez que el usuario agrega un nuevo producto, el objeto luego empujará a este array. Como puedes ver, hay muchos casos de uso para esto y también mucho más por descubrir con objetos y matrices también. Vamos a profundizar mucho en estos en las próximas secciones. 17. Introducción a las funciones: Ahora echemos un vistazo a las funciones de JavaScript. Una función es como una tarea o un conjunto de tareas agrupadas entre sí. Por ejemplo, en nuestro próximo proyecto de eje rápido, tendremos muchas funciones que realizan una determinada tarea. Por ejemplo, generar una nueva pizza, tendremos una para crear un nuevo pedido, y también una para comprobar si el evento está lleno. Estas funciones pueden ejecutarse de forma inmediata o más frecuente cuando las llamamos en una etapa posterior. Al igual que las matrices y los objetos, que hemos mirado en los dos videos anteriores, tendremos una sección de funciones más detallada que viene en el curso. Pero por ahora tener un conocimiento básico de función realmente nos ayudará con algunos de los pasos. También al igual que estas matrices y objetos, que acabamos de ver, una función también cae en el mismo tipo de objeto Grupo 2. Para esta lección dirígete a la última carpeta dentro de nuestros conceptos básicos de JavaScript. Se trata del número 13, introducción a las funciones. Ábrenos y también en el navegador también. Lo que vamos a hacer es en primer lugar, tenemos dos matrices justo aquí que podemos ignorar y podemos ir justo debajo de estas. Volveremos a estos en tan solo un momento. A pesar de que vamos a echar un vistazo a cómo funciona una función y comenzamos por usar la palabra clave function. A continuación, la palabra clave function le sigue un nombre, que queremos darle a esta función. Al igual que una variable anterior, entonces asignamos un nombre y para este ejemplo, vamos por número aleatorio. Este es un nombre al que llamamos una función por cada vez que queremos ejecutar el código dentro. Inmediatamente después de este nombre pasamos entre paréntesis, que se llama paréntesis. Dentro de estos corchetes podemos pasar alguna información extra a la función, pero más sobre esto en un momento. La última parte de este tipo de funciones son las llaves y este es el cuerpo de la función. Estas llaves dentro de aquí contienen todo el código que se desea ejecutar cuando llamamos a esta función por su nombre. Estas llaves también se pueden considerar como un conjunto de portones que contienen todo el código de función en su interior. Esto es lo que se llama una declaración de función. En su interior podemos colocar en cualquier código que se desee ejecutar. Ahora coloquemos en una simple alerta de navegador. Guarda esto y de nuevo en el navegador. Si nos refrescamos, no vemos esta alerta corriendo dentro de aquí. En realidad ejecuta este código. Al igual que mencionamos, necesitamos llamar a la función por su nombre, seguido de estos corchetes justo aquí. Justo debajo de esto, llame a nuestro número aleatorio, agregue los corchetes o estos paréntesis. Esto ahora debería llamar a nuestro código de función y luego mostrar la alerta dentro del navegador. Otro buen ejemplo de una función sería una calculadora para convertir una edad de perro a una edad humana. Empecemos de nuevo. Volveremos a nuestra palabra clave de función original. Esta vez llamaremos a esto DogtoHuman, agregamos los corchetes o los paréntesis. Entonces el cuerpo de la función. Justo arriba crear una nueva variable, que va a ser nuestro DogAge. Pongamos esto a cualquier valor, como tres. Podemos entonces acceder a esta variable dentro de nuestra función y luego hacer una multiplicación para convertirla en años humanos. Para acceder a esta variable todo lo que debemos hacer es acceder a ella por su nombre., por lo que el DogAge. Entonces multiplica este valor a 7 para darnos los años humanos. También podemos almacenar esto dentro de una constante. Vayamos por HumaneEquiv. Por ahora, mirando esta función, todo lo que esto está haciendo es agarrar nuestra variable de edad del perro, multiplicando esto por 7. Pero también necesitamos decirle a una función que realmente envíe de vuelta este nuevo valor. El modo de hacerlo es usar la palabra clave return. Podemos devolver nuestra variable HumaneQuIV, al igual que antes. Entonces llamamos a esta función, que era el DogtoHuman. Si guardamos esto y pasamos al navegador, refresca, no vemos nada diferente dentro del navegador. No vemos nada diferente porque en la primera función que miramos, contenía una alerta. Esta fue una indicación visual de que la función se estaba ejecutando. Pero este, no tenemos una alerta, no tenemos un registro de consola, no nos pondríamos en un encabezado de Nivel 1 con él en el texto. Todo lo que estamos haciendo es devolver un valor. Para usar realmente este valor, si quisiéramos, podríamos envolver esto dentro de un registro de consola y verlo devolver valor dentro de la consola. O más comúnmente, podríamos almacenar esto dentro de una constante llamada resultado. Este resultado contendrá entonces este valor de retorno, que es el DogAge multiplicado por 7. Si quisiéramos, podríamos hacer un registro de consola simple con el valor del resultado. Pero vamos un paso más allá y convertir esto en una cuerda. Si usamos las garrapatas traseras, también podemos hacer uso de esta variable de resultado. Diremos, Mi perro está envejecido. Recuerda pasar en una variable, usamos un símbolo $, las llaves. Después inserta el nombre de la variable y luego continúa la cadena a decir en años humanos. Esto debería decir Mi perro está envejecido, y en nuestro caso, esto sería 21 en años humanos. Pasar al navegador y abrir la consola. Refresca la página y ahí vamos. Ahí está nuestra nueva cadena con la variable contenida en el interior. Tan solo para recapitular, hemos creado una función. Esta función va a acceder a nuestra variable DogAge de tres. Multiplicarlo por 7, luego almacenamos esto dentro de una variable y luego devolveremos estos resultados de la función. Entonces llamamos a esta función a continuación y almacenamos este valor devuelto dentro de nuestros resultados. Los resultados se pueden utilizar entonces en cualquier lugar dentro de nuestro código, como justo aquí cuando lo insertamos dentro de una cadena. También ten en cuenta que esta palabra clave return solo debe usarse una vez dentro de una función, ya que señala que la función debe dejar de ejecutarse. Sin embargo, hay algunas excepciones, como al usar esto dentro de una declaración if else, que aprenderemos más adelante. Pero generalmente el retorno es el final de la función y cualquier código que coloques después de ella será ignorado. Podríamos ver esto si agregamos una alerta. Después ejecuta esto en el navegador, refresca la página, y vemos nuestro registro de consola. Pero no vemos ninguna alerta en la página porque esto cae después de nuestra declaración de retorno. Esto termina efectivamente nuestra función. Quitemos esto. Al inicio de este video, mencionamos que estos corchetes justo después del nombre de la función, también podemos pasar en información extra a esta función. En el paréntesis, configuramos uno o más parámetros, que se pueden considerar como variables. En lugar de nuestro DogAge justo arriba, podemos comas esto fuera. Podemos pasar una variable o un parámetro llamado DogAge directamente a nuestra función. También podemos pasar en múltiples valores separados por una coma. Entonces podríamos acceder a esto dentro de nuestra función, al igual que antes. Pero este DogAge tenía un valor de tres asignados a ella. ¿ Cómo pasamos realmente este valor a este parámetro? Bueno, hacemos esto cuando en realidad llamamos a una función justo aquí. Vamos por un ejemplo diferente esta vez de cinco. Su valor real que pasa de una función de llamada se llama argumento. No es necesario recordar esto por el momento, pero esto es un argumento y este es un parámetro. Vamos a probar esto. Dale a esto un guardado y más al navegador. Ahora vemos el diferente valor de 35 dentro de nuestro registro. Conforme hemos pasado por este video, ha habido algunas palabras clave involucradas. No es necesario recordar todos estos en esta etapa. Las personas a menudo confunden parámetros y argumentos y también los usan indistintamente. No es un problema enorme. Pero solo para aclarar, un parámetro es la variable o el posicionador dentro de nuestra declaración de función. Entonces podemos acceder a ellos dentro de nuestro cuerpo de función, que está dentro de los tirantes rizados. Tenemos entonces argumentos, que son los valores reales que pasamos cuando llamamos a esta función, como nuestro número en este ejemplo. Llevemos esto un poco más lejos usando nuestras dos matrices en la parte superior. Limpiemos esto y movamos todo este código de función. Ahora vamos a hacer una función cual va a comprobar si hay alguna alergia dentro de estas recetas. la función se llevará en ella la receta, como pan y brownies. Entonces también podemos pasar un ingrediente en particular al que una persona es alérgica. A continuación, la función recorrerá todos estos valores y comprobará si esto está contenido dentro de la receta. Al igual que antes, crea nuestra función. Dale a esto un nombre de CheckAlergias, los paréntesis, y luego las llaves. Para que esta función funcione correctamente, necesita tomar en ella dos cosas. En primer lugar, la receta real para comprobar en contra. Llamaremos a esto el perímetro de la receta y lo separaremos por una coma. También necesita que se le pase un determinado ingrediente, compruebe si está contenido en su interior. Abre el cuerpo de la función. El primer paso es acceder a nuestra receta, que es ya sea el pan o el array de brownies. Dado que se trata de una matriz, entonces podemos hacer uso del método includes. Rápidamente echamos un vistazo al método includes antes y esto comprobará si un cierto valor está contenido dentro de esta matriz y luego devolveremos un valor verdadero o falso. Queremos comprobar si este ingrediente está contenido, el cual se pasa como parámetro. A pesar de que tenemos estas variables, tenemos la receta y los ingredientes, esto es exactamente lo mismo que si tuviéramos que acceder a nuestra matriz de pan justo arriba. Entonces llama al método includes, así como esto. Entonces podríamos comprobar si la harina está contenida en el interior. Si lo es, que es el caso aquí, esto devolvería entonces el valor de verdadero. Si no se encontró dentro de la matriz, recuperaremos el valor de false. Ambas líneas de código hacen exactamente lo mismo. La diferencia es que podemos pasar a diferentes valores a nuestra función. A continuación, guarde esto dentro de una constante llamada hasIngredientes. Ellos sólo deben ser verdaderos o falsos y entonces podemos devolver esto de vuelta de nuestra función. Para ver este valor de retorno, podemos crear un registro de consola. Entonces dentro de aquí función de llamada, que se llama CheckAlergias, agregue los corchetes o los paréntesis. Entonces necesitamos pasar dos argumentos. En primer lugar, la receta, que es o el pan o los brownies. Vayamos por pan. Después pasa nuestro ingrediente el cual quieres comprobar si está contenido dentro de esta receta. Vayamos por harina. Sabemos que esto está contenido dentro del pan, por lo que esto debería devolver un valor de verdad. Guardemos esto y actualicemos el navegador. Ahora vemos nuestro valor dentro de la consola. Probemos con un valor falso. Iremos por huevos. Esto es falso. Pero sabemos que los huevos están contenidos dentro de los brownies. Probemos este y debería volver a ser un valor de verdad. misma manera, si todo esto es un poco mucho por el momento, estamos creando una función llamada CheckAlergias, donde vamos a comprobar si un ingrediente está contenido dentro de una receta. Entonces accedemos a esta receta, que es o el pan o los brownies. Verificamos si incluye este ingrediente en particular. Si lo hace, esto devolverá un valor verdadero. De no ser así, devolverá false, que luego se mostrará dentro de los registros. Esperemos que debas empezar a ver el poder de las funciones. Pero hay mucho más a las funciones, que pronto descubriremos. Uno de los grandes beneficios de las funciones es que son reutilizables. Si tenemos códigos en nuestros programas los cuales repetimos varias veces, podríamos agarrar todo nuestro código y pasar a una función independiente y luego llamar a la función en lugar de este código. También se pueden pasar diferentes valores en forma de argumentos, que acabamos de descubrir aquí. También se puede pensar en una función como un bloque de construcción para todo el programa también. cada uno se le asigna una tarea particular, para que podamos hacer nuestro código más organizado. Las funciones también pueden estar en muchas de las formas también. Este ejemplo aquí es una forma más tradicional de una función JavaScript y también hay otros tipos disponibles, como la función de flecha, que cubriremos más adelante. A modo de guía general aunque, si es posible, es beneficioso tratar de mantener todas las funciones lo más pequeñas posible y sólo centrándose en una tarea. Esto hace que sea mucho más fácil saber qué está haciendo una función, hace más reutilizable. También ayuda con la depuración porque si hay un problema, podemos enfocar este problema en una función en particular, por lo que es mucho más fácil de encontrar. 18. El constructor de matrices: Dentro de esta carpeta JavaScript, ahora vamos a la Sección 2, que es esta sección de matriz justo aquí, y luego la lección Número 1, que es el constructor de matriz. Seleccionemos esto, y abrimos esto dentro del navegador. Aprendimos en el último video que las matrices caen en el grupo de tipos de objeto y que son un tipo especial de objeto, que es como una lista, y podemos acceder a cualquiera de estos valores por la posición de índice. Dentro de este script, previamente hemos creado matrices así como esta. Como se puede ver por el comentario, este es un literal de matriz. Declaramos que queremos una matriz mediante el uso de estos corchetes, y luego podemos establecer cualquier valor inicial que queremos colocar dentro, también podemos confirmar que esta matriz de pizza es un tipo de objeto haciendo un registro de consola. Dentro del log de la consola, podemos hacer uso del tipo de propiedad, que miramos antes, podemos comprobar el tipo de pizza, y luego dentro de la consola vemos esto es un tipo de objeto. También hay otra forma de crear una matriz, y esto es mediante el uso del constructor de matriz. El constructor de matriz se puede usar para crear una matriz vacía que desea agregar más adelante, una matriz con espacios vacíos, o también podemos agregarle algunos valores iniciales también. Para hacer esto, primero eliminemos nuestro registro de consola, solo coloquemos también en un comentario, este es el constructor de matriz. El modo en que podemos usar el constructor de array es mediante el uso de la nueva palabra clave, seguida de array, que tiene un A. mayúscula Podemos acceder y trabajar con esto más adelante. También podemos almacenar esta nueva matriz dentro de constante, luego hagamos un registro de consola, pasando el valor de nuestra nueva matriz que son ingredientes, luego veamos qué devuelve esto nuevo dentro de la consola. Lo que tenemos aquí es estos corchetes y no tenemos ningún valor dentro, también podemos ver que la propiedad length tiene un valor de cero. Alternativamente, si quisiéramos inicializar esto con algunos valores, también podríamos pasar los valores dentro de estos corchetes. Vamos por la masa, un segundo valor de queso, luego dentro de la consola ahora vemos estos dos valores dentro de la matriz, y la longitud ahora es de dos. De esta manera es exactamente igual que el método literal anterior, y el resultado es exactamente el mismo. Si quisiéramos también podríamos reemplazar estos dos valores, y configurar la longitud inicial de la matriz. Aquí, podríamos quitar estos y podríamos declarar que queremos una nueva matriz con cinco espacios vacíos. También podemos ver estos dentro de la consola, vemos los tiempos vacíos 5. Esto es sólo una matriz vacía, que se va a inicializar con cinco ranuras vacías. Para mí aunque personalmente, prefiero el primer acercamiento, que es la versión literal. Para mí, solo me parece un poco más limpio y descriptivo, pero depende completamente de ti cuál quieres usar. También vale la pena señalar aquí que a pesar de que hemos configurado una matriz con cinco ranuras vacías, este es solo el valor inicial, también podemos agregarle mediante el uso de un método push. El modo de hacerlo es acceder primero a nuestra matriz de ingredientes, y luego podemos encadenar al final un método push, que va a empujar un nuevo valor hasta el final de esta matriz. Vayamos por los pimientos, ahorren. Ahora vemos que tenemos seis valores almacenados dentro de la matriz. Los primeros valores son cinco ranuras vacías, seguidas del nuevo valor, que acabamos empujar hasta el final de esta matriz. No siempre queremos mantener esta ranura como vacía. ¿ Y si quisiéramos reemplazar una de estas ranuras vacías por un nuevo valor? Para ello, podemos hacer uso de un método llamado empalme. Digamos que queremos reemplazar las terceras ranuras vacías por un nuevo valor, lo que podemos hacer es llamar al método de empalme y empalme toma hasta tres valores llamados parámetros. El primero es el puesto al que quieres acudir. Recuerde, ya que las matrices comienzan en la posición de índice 0, el número 2 accederá a la tercera ranura, separada por coma. El segundo valor queremos declarar cuántos artículos queremos quitar, y en nuestro caso, es solo uno. Esto eliminará un ítem en el índice número 2, que es nuestro tercer ítem. Digamos esto y actualicemos el navegador. Ahora vemos que hemos quitado un solo valor, dejándonos con cuatro ranuras vacías. Pero si no quisiéramos simplemente eliminar este valor, si quisiéramos realmente reemplazarlo por un nuevo valor, agregamos un tercer parámetro, así que digamos cebollas. Refresca esto, y ahí vamos. Tenemos nuestras dos primeras ranuras, que aún está vacía; tenemos nuestra tercera ranura que ha sido reemplazada por el valor de las cebollas; y luego la ranura número 4 y 5, sigue vacía. En este video, hemos mirado el push y también el método de empalme. Ambos son realmente útiles cuando se trabaja con matrices, y vamos a cubrir mucho más durante esta sección. Tan solo por claridad para el resto de este curso, estaré creando matrices usando este enfoque literal justo arriba. Pero también es realmente importante entender que existen diferentes enfoques, sobre todo si te encuentras con ellos en código de otras personas u otras guías. 19. Introducción a las propiedades, los métodos y el prototipo: He mencionado hasta ahora varias palabras como tipo de objeto, propiedades y métodos. Es útil tener al menos una comprensión básica de dónde vienen todos estos. Saltando a nuestros archivos de inicio que es lección número 2 de esta sección que es propiedades, métodos, y el prototipo. Dentro de nuestro script, verá tres matrices separadas. Tengo la margherita, la vegetariana, y también la matriz de pizza de pepperoni. Hasta el momento, hemos analizado brevemente algunos ejemplos de lo que podemos hacer con las matrices. Es así como podemos acceder a propiedades y métodos. El inmueble o la única propiedad que realmente hemos mirado hasta ahora es la longitud. Propiedades, hemos mirado cosas como la longitud que accederá a la matriz, y luego encadenar al final sobre la longitud. Esto nos dará la longitud de la matriz, así que aquí tendremos tres artículos diferentes. También hemos mirado métodos. El método que hemos mirado hasta ahora es el método push y también empalme. Nuevamente, estos también están encadenados al final de una matriz, por lo que esto será margherita.push o margherita.splice, y luego pasamos ciertos valores a estos corchetes. Hemos mirado métodos y hemos mirado propiedades, pero ¿cuál es exactamente la diferencia y de dónde provienen ambos? En primer lugar, vamos a echar un vistazo a dónde realmente vienen estos. Si pensamos en esto, ya tenemos tres arrays dentro de nuestro script aquí, pero podríamos tener cientos o incluso miles en un programa más grande. Cada una de estas matrices también tiene acceso a todos nuestros métodos y también todos los demás métodos disponibles también. Esta matriz podría usar el push. Esta matriz también podría usar push, y también este también. ¿ Y si todas y cada una de las matrices que creamos también llevaran alrededor del peso de estos métodos, es mucho código o información extra para adjuntar a cada matriz. Tendría sentido poder crear múltiples matrices como acabamos de hacer aquí. Tendremos todas estas cosas extra como los métodos en una ubicación central para acceder siempre que necesitábamos en lugar de tenerlas adjuntas a cada una de estas matrices. Bueno, esto es en realidad lo que sucede con los tipos de objetos en JavaScript. JavaScript tiene un concepto llamado prototipos, y esta es una forma para que cada objeto herede las características de otro. Echemos un vistazo a algo en la consola haciendo un registro de consola, y luego pasemos el valor de matriz. Esta matriz con una A mayúscula es igual al constructor de array que miramos en el video anterior. Es como una plantilla para cualquier otra matriz que creamos como este pepperoni justo aquí. Esto heredará cualquiera de los métodos que viven de esto. ¿ Ves estos? Podemos iniciar sesión la consola, el prototipo, y vayamos a la consola para ver el valor de este prototipo, actualizar y abrir esto. Mucho de esto puede parecer desfamiliar en esta etapa, pero dos cosas a señalar aquí es que podemos ver empuje y también podemos ver empalme. Recuerda estas son dos cosas que ya has visto antes cuando miramos métodos anteriores. Es así como nuestras nuevas matrices tienen acceso a toda esta información, su prototipo que acabamos de ver la consola, es una propiedad que apunta a otro objeto, en nuestro caso, el objeto padre, y por lo tanto heredar todos sus métodos. También podemos ver esto con cosas como un objeto también. Objeto con mayúscula O si guardamos y actualizamos, abrimos esto, esta vez nos dirigimos al constructor y esto contiene una lista de todos los métodos que está disponible para este objeto. Echaremos un vistazo a estos en la sección de objetos más adelante. Tan solo para recapitular cuando creemos un nuevo objeto o una nueva matriz, lo que hemos hecho aquí, estas nuevas matrices obtendrán automáticamente la propiedad prototipo agregada lo que nos permitirá acceder a métodos desde otro objeto. En nuestro caso, todos estos son heredados del constructor de matriz padre y es por eso que no pudimos usar ciertos métodos en cada una de estas nuevas matrices como el push y splice, y además de estos heredados los cuales está disponible, también podemos crear nuestros propios deseos de cliente también. Ahora si logramos registrar una de nuestras propias copias de este constructor, en nuestro caso, pepperoni, pasar a la consola y refrescar. Abre esto. En la parte inferior vemos este proto, y si lo abrimos, esto no está vinculado a todos los métodos disponibles para esta matriz. Es así como esta copia de esta matriz nos da acceso a cosas como push y splice, que acabamos de ver. Si cerramos esta sección proto, hemos visto al lado tenemos esta propiedad de longitud. Esta longitud no está incluida dentro del prototipo. Aquí radica la diferencia entre un método y una propiedad. Dado que cualquiera de los métodos se puede utilizar en cualquiera de nuestras matrices, se pueden compartir a través de este prototipo. Esta propiedad de longitud, sin embargo, es específica de esta única matriz ya que cada matriz puede tener una longitud diferente. Tiene sentido no compartir esto en el prototipo y solo tener esto disponible en cada matriz individual. Vamos a profundizar en esto más adelante pero al menos por ahora, tienes una idea de dónde vienen estos métodos y descubriremos muchos más de estos métodos en los próximos videos. 20. Modificación de matrices: Si bien los métodos de matriz no están estrictamente agrupados en ninguna forma de categoría, algunos de ellos comparten algunas características. Por ejemplo, algún método de matriz que realizaremos, implica algo llamado iteración. Esto lo veremos en un video futuro, pero puedes pensar en esto como repetir el proceso, para cada elemento dentro de la matriz, igual que un bucle, si los has usado antes. Además, algunos métodos toman nuestra matriz original y la modifican, y algunos, dejarán intacta nuestra matriz original y devolverán una nueva matriz de valor basada en la original. Lo que ahora vamos a ver es modificar matrices. Ya hemos analizado algunos métodos de matriz, que modifican las matrices existentes, como push y pop. Hemos utilizado los métodos push como un nuevo elemento hasta el final de una matriz. También está el método pop que eliminará el último elemento de la matriz. No sólo necesitamos preocuparnos de modificar la matriz original, el valor que se devuelve también puede ser importante. Pasando a la carpeta del proyecto, dirígete a esta lección que está modificando matrices, y también abre esto dentro del navegador. Dentro del guión, tendremos tres líneas de código ya configuradas. Se utiliza una matriz de pizza con tres valores. Después seleccionamos esto, empujamos un nuevo valor hasta el final del pepperoni, y luego registraremos esto en la consola. Si pasamos al navegador a la consola. Aquí vemos, obtuvimos el nuevo valor array de pepperoni empujado hasta el final. Bueno, ¿qué pasa con el valor de retorno que recuperamos después de ejecutar este método? Vea esto, podemos almacenar esto dentro de una variable. Digamos, const, llame a esto devuelto, y establezca esto igual al valor que se devuelve después de que se haya realizado este método. Entonces si agarramos esto y lo colocamos dentro del registro de la consola, actualicemos, ahora obtenemos el valor de cuatro. El valor devuelto después de usar el método push es un número de elementos dentro de la matriz después de que este nuevo elemento haya sido empujado. En nuestro caso, ahora tenemos cuatro valores. Obtenemos este valor de cuatro devueltos. Como puede ver, no sólo los métodos de matriz son útiles en sí mismos, sino que a menudo el valor devuelto que recuperamos también puede ser útil. A continuación, también tenemos el método pop para eliminar el último valor de la matriz. Vamos a comentar esta línea justo aquí. Seleccionaremos nuestra pizza una vez más, accederemos al método pop, y luego haremos un registro de consola para la pizza original. Como cabría esperar cuando utilicemos el método pop, esto eliminará el valor del queso, dejando sólo la masa y la salsa. Nuevamente, ¿cuál sería el valor de retorno después de ejecutar el método pop? Bueno, vamos a revisar esto. Nuevamente, almacenaremos este valor de retorno y luego registraremos esto en la consola. Echemos un vistazo a esto, refresquemos, y obtendremos el valor del queso. En lugar de la longitud de la matriz que hemos visto antes, después de usar pop, recuperamos el valor que se ha eliminado del final de esta matriz. Ambos métodos que acabamos de ver, el push y el pop, afectarán el final de la matriz. Haga lo contrario y afecte el inicio de la matriz. También tenemos otros dos métodos. No voy a escribir esto ya que estos funcionan exactamente igual, pero unshift agrega un nuevo valor al principio de la matriz, y shift elimina el primer valor. Los valores de retorno también espejo push y pop. Cuando agreguemos un nuevo valor usando unshift, recuperaremos la tierra de la nueva matriz. Cuando retiramos un artículo con turnos, devuelve el valor que se ha retirado, que sería masa. A continuación, tenemos el método de empalme, y esto es algo que ya hemos mirado para eliminar y reemplazar elementos en cualquier posición de la matriz. Estos anteriores que miramos, vamos a trabajar con el principio o el final de una matriz. Empalme seleccionará cualquier artículo que desee. Puede tomar varios parámetros y es realmente flexible. Este ejemplo aquí tiene tres parámetros. En primer lugar, tenemos el número 1, y este es el número de índice de la matriz para empezar, que para nosotros es la salsa. A continuación, el número de artículos a eliminar. En nuestro caso, uno sólo eliminará este único valor de salsa. El tercer parámetro, inserte un nuevo valor en esta posición, resultando en la nueva matriz que vemos abajo en la parte inferior. Echemos un vistazo a algunos ejemplos más en Visual Studio Code. Podemos comentar esta línea justo aquí. Abajo, selecciona nuestra pizza. Entonces echaremos un vistazo más profundo al empalme. Si solo agregamos en el primer parámetro que es la posición inicial de uno, y luego registraremos la pizza después de que este método haya entrado en vigor. Veamos qué sucede dentro del navegador. Refresca y solo vemos el valor de la masa. Esto se debe a que hemos comenzado con la posición 1, luego eliminar todos los elementos que siguen justo hasta el final de la matriz. Un número positivo como este comenzará al principio de una matriz. También podemos usar valores negativos para comenzar al final de la matriz. Echemos un vistazo a uno negativo. Esto eliminará el último elemento de matriz de queso, incluso nuestra masa y nuestra fuente. Si cambiamos esto para que sea negativo dos, esto eliminará los dos últimos artículos, dejándonos sólo con la masa. Como sabemos, podemos agregar un segundo parámetro, solo empezaremos esto de nuevo en el número 1. Podemos agregar un segundo parámetro para solo eliminar un cierto número de valores. Digamos que queríamos reemplazar la salsa regular justo aquí por algo de salsa de barbacoa en su lugar, igual que hemos visto en el tobogán. Lo que tenemos que hacer es quitar este y único artículo que coloqué en uno, y luego reemplazar esto por un valor opcional. Dentro de las cotizaciones, podemos sustituir esto por salsa de barbacoa. Guardar. Refrescar. Ahora, nuestro segundo valor, nuestra posición índice 1, ha sido reemplazada por nuestra salsa de barbacoa. Si también quisieras insertar otro valor en la misma posición, tus cosas hacia, todo lo que tenemos que hacer es agregar esto al final, separado por una coma. Vamos por los pimientos. Deberían agregar justo después de nuestra salsa de barbacoa. Como puede ver, este método de empalme es realmente flexible para agregar y eliminar valores en cualquier posición de índice dentro de una matriz. A continuación, tenemos sort que ordenará los valores de la matriz alfanuméricamente. Básicamente, en orden alfabético. Estos también estarán en orden ascendente, y también, el método inverso que, según suena, invierte el orden de los valores de la matriz. También tenemos que tener cuidado al usar sort con números. Echaremos un vistazo al porqué en tan solo un segundo. En primer lugar, lo que vamos a hacer es comentar esto y acceder a nuestra pizza. Entonces solo llama al método sort por su cuenta. Registre la pizza, y veamos qué pasa. Tenemos masa, salsa, y queso. Veamos qué pasa en el navegador. Refrescar. Estos ahora están en orden alfabético. Todo esto funciona como se esperaba. No obstante, esto está bien porque estamos usando una cadena de texto para cada valor de matriz. Pero si esto fuera una matriz de números, causaría un problema. El motivo es porque incluso si nuestra matriz contiene números, todos los valores se convertirán en cadenas, y luego dispuestos alfanuméricamente, por lo que la serie. Volvamos al editor. En lugar de estas cadenas, vamos a bajar, y en su lugar, crea una matriz de números. Estos pueden ser cualquier valor dentro de aquí. Voy a ir por 12, mil, y luego tres. Ahora, necesitamos acceder a la matriz de números y también registrar esto en la consola. Al igual que antes, llamamos al método de salsa. Pero veamos qué pasa ahora, todos estos son como números. Di esto, y ahora, obtenemos el valor de 1,000, 12, y tres. Lo que debemos recuperar son tres, 12, y mil. Todo esto está completamente equivocado. Pero la razón por la que esto sucede es porque todos estos números se convierten en cadenas y luego se ordenan como estos valores de cadena. De la misma manera que si todos estos números fueran palabras, la clasificación comienza en el primer personaje. Aquí, vemos el valor de uno y también el valor de uno, razón por la cual estos dos números comienzan al inicio porque uno es menor a tres. Tres se coloca al final mismo. Pero entonces, ¿por qué es 1,000 menor a 12? Bueno, esto se debe a que de nuevo, igual que con el texto, si el primer carácter es exactamente el mismo, igual que estos dos, entonces comparará el segundo carácter. Con 1,000, este es el valor de cero y este es el valor de dos, lo que significa que dos fue un valor más alto colocado sobre esto después del 1,000. Obviamente, esta no es una buena manera de clasificar matrices de números. Para esto, el método de ordenación también puede tomar en una función de comparación. Recuerda, desde antes, echamos un vistazo a cómo funciona una función. Una función se ve así, tenemos la palabra clave function. Entonces le damos un nombre a esta función. Utilizamos los corchetes o los paréntesis, y luego las llaves para ejecutar algún código dentro. Opcionalmente, esto también puede tomar algunos valores, y yo voy a, por ahora, pasar los valores de a y b te preocupes por estos por ahora, vamos a echar un vistazo a lo que es esto en tan solo un segundo. Lo que podemos hacer es cortar esta función y en su lugar, colocarla dentro del método de ordenación. Coloque esto en. Si quisiéramos, también podríamos eliminar opcionalmente este nombre de función ya que automáticamente se va a llamar desde este método de ordenación. Entonces dentro de este cuerpo de función, lo que vamos a hacer es devolver un b para llevar Ahora, esto puede parecer un poco confuso pero lo que realmente está pasando aquí es que vamos a llamar a esta función para cada valor dentro de esta matriz de números, pasamos en a y b, y estos pueden ser cualquier nombre de nuestra elección. No importa esto se llama a y b, podría ser el número uno, número dos, podría ser cualquier cosa que quieras. Pero el factor clave aquí es que vamos a comparar dos números a la vez. Cuando ésta comience por primera vez, la función de ordenación reemplazará a y b por los dos primeros valores de 12 y 1,000. Esto será exactamente lo mismo que devolver 12, quitar 1,000. Entonces la segunda vez, será 1,000 de tres, y esto seguirá adelante hasta el final de la matriz. Para el primero que es de 12, quita mil. Esto obviamente va a resultar en un número negativo. Esto será empujado hacia atrás al inicio de la matriz. Posteriormente pasará y repetirá esto por cada par de números, ordenándolos en el orden correcto por comparación. Ahora, si eliminamos esta línea, seguimos en la consola iniciamos sesión en el nuevo valor de la matriz, guardamos y actualizamos. Estos están ahora en el orden correcto. Como se puede ver, esto es realmente útil si tenemos una matriz de números. No queremos depender de la conversión alfabética, que hemos visto en el ejemplo anterior. Por último, vamos a echar un vistazo al reverso. Invertir, en comparación, es bastante simple en comparación con esto. Todo lo que necesitamos hacer es comentar este ejemplo, acceder a nuestros números, y luego llamar al método de matriz inversa. Guarda esto. Ahora, en lugar de tener el valor de 12, 1,000, y tres, ahora tenemos el valor de tres, 1,000 y 12, que es el orden inverso. 21. Retorno de nuevos valores: En el video anterior, los métodos que miramos en todos tenían algo en común y eso fue que modificamos la matriz existente aunque sí devolvieran algunos de alguna manera, como un valor verdadero o falso, la matriz original todavía se modificó también. Este video va a continuar con algunos métodos más de array, pero la diferencia es que esta vez, la matriz original permanecerá intacta, y se creará o devolverá algo nuevo. Ejemplo de esto es algo que ya hemos usado, que es el método includes. Inclusiones devolverá un verdadero o falso si se incluye un valor particular en la matriz; por lo tanto, no modifica la matriz original. También tenemos el método join, también, que toma nuestros valores de matriz y los une como una cadena. Dentro de nuestro proyecto, en el archivo Returning New Values, hasta el script, tenemos este ejemplo justo aquí. Este es un ejemplo de incluye. Estamos comprobando si esta matriz de pizza incluye alguna masa. Si lo hace, se le devolverá valor de true; de no ser así, será falso. Entonces salimos dos valores. El primero es el array de pizza; y por lo tanto, podemos comprobar si esto ha sido modificado y luego esIncluido, que es el valor de retorno. Guarda esto, y abre esto dentro del navegador. Refresca, y podemos ver la matriz original sigue sin modificarse, y luego obtenemos el valor de true. Como cabría esperar, si cambiáramos esto para que fuera otra cosa, éste sería entonces el valor del falso. Podemos ver que este método incluye dejará intacta la matriz original al igual que el método de unión también. Unir también dejará la matriz original tal como estaba y devuelve una nueva cadena que contiene todos los valores de la matriz separados por una coma. Vamos a comentar esta línea justo aquí, configurar una segunda constante llamada string, y esto va a ser igual a pizza.join, que va a agarrar todos los valores dentro de nuestra matriz y unirlos como un cadena única. Cambia este valor para que sea string, refresh, y ahí está nuestra nueva cadena separada por comas. Si no quisiéramos usar comas, si queríamos un carácter diferente para separar estos valores, todo lo que necesitamos hacer es pasar un nuevo carácter como una cadena dentro de este método de unión. Por ejemplo, si quisiéramos un guión, podríamos usar esto y también al igual que con cualquier otra cadena, también podríamos agregar espacios dentro de aquí para agregar algo de espacio alrededor de cada una de estas palabras. A continuación, vamos a trabajar con la posición de índice de la matriz. Dado que los valores de matriz se almacenan numéricamente, a menudo necesitamos acceder a un valor en un determinado número de índice, pero si no conocemos el número de índice exacto para empezar, podemos usar un método llamado IndexOf para encuentra esto para nosotros. En este primer ejemplo, pasamos indexOf el valor de cadena de fuente, luego recuperamos el número de índice, y como las matrices comienzan en la posición 0, salsa es la posición 1. El segundo ejemplo muestra LastIndexOf, y puede sonar así es para seleccionar el último valor de matriz. No obstante, es para encontrar la última ocurrencia de un valor. Esta matriz tiene el valor de lugar de masa dentro de dos veces, por lo que busca la última ocurrencia de esta palabra, que es la posición de índice 3. De vuelta a nuestro editor, echemos un vistazo a algunos ejemplos. Podemos quitar esta cadena y esta vez, vamos a buscar el número de índice de un ítem en particular. Por ejemplo, si estuviéramos buscando la salsa si esta era una matriz realmente larga, queríamos encontrar exactamente en qué posición estaba esto. Para esto, podemos establecer nuestra constante igual a pizza.indexOf, y luego encontrar el número de índice por el nombre de la salsa, y esto luego se almacenaría dentro de esta constante, pasar esto a nuestro registro de consola y guardar, refrescar. Como sabemos, este es el número de índice de 1. Podemos ir por el queso, y esto también se actualizará, y luego una vez tengamos el número de índice de cualquier valor array, podremos entonces hacer lo que queramos con él, como seleccionarlo, podemos quitarlo, y también incluso reemplazarlo también. A continuación, tenemos LastIndexOf. Asegúrate de que el I y el O sean mayúsculas. Recuerde, como se mencionó con las diapositivas, esto no encuentra el último valor de índice de nuestra matriz, sino que encontrará la última ocurrencia de un valor en particular. Con esto, significaría si la palabra queso se colocara en dos veces, así que añadamos también queso al principio de nuestra matriz. Ahora tenemos dos ocurrencias del mismo valor. LastIndexOf devolverá la última ocurrencia de esta palabra, por lo que en lugar de que esta sea la posición 0, devolverá el índice número 3. Echemos un vistazo a esto. Refresca, y ahí está nuestro valor de tres. Si esto se trasladara a justo antes de nuestra salsa, la última ocurrencia ahora sería el índice número 2. También, para éste, el LastIndexOf y también el IndexOf, si no encuentra ningún valor coincidente, devolverá un valor de 1 negativo, por lo que si cambiamos esto para que sea un valor que no está en el array, el valor devuelto sería negativo 1. Los dos últimos métodos que vamos a ver van a ser rebanada y concat. Slice es una forma de rebanar algún valor de la matriz, y este ejemplo muestra pasar a valores que son 1 y 2. El primer valor de 1 es la posición inicial, y para este ejemplo, esta sería nuestra salsa. El segundo valor de 2 es la posición final opcional, por lo que rebanará todos los valores hasta pero sin incluir esta posición, por lo que esto da como resultado que solo se corten el valor de la salsa. Si el valor n fuera el número 3 en lugar de 2, cortaría tanto la salsa como el queso. El segundo ejemplo es concat, y esto une los valores de dos o más matrices. Tenemos el array de pizza y también algunos extras opcionales. Si quisiéramos combinar estos en una sola matriz, llamaremos a una de estas matrices como la pizza, agregamos el método concat, luego pasaremos la matriz extras para unir todos los valores en una sola matriz. Echemos un vistazo a estos en nuestra carpeta de proyectos. Podemos quitar el LastIndexOf, y echar un vistazo a cómo funciona la rebanada. Accederemos a nuestra pizza.rebanada y dentro de aquí, si solo agregamos un valor así, esta sería la posición inicial; por lo tanto, esto cortaría todos los valores de la matriz desde la posición 1 derecho hasta el final de la matriz. Podemos almacenar esto dentro de una variable, luego registrar esto en la consola, iniciar rebanada. Todos los valores desde el índice número 1 hasta el final de la matriz. Tenemos masa, queso, y salsa. Refresca, y ahí vamos. Al igual que con todos los métodos de este video, todavía vemos que la matriz original sigue intacta. En cambio, podemos devolver una nueva matriz con estos valores de corte. También, así como hemos visto dentro de estas diapositivas, podemos pasar en una posición final opcional. Esto iniciará nuestro índice número 1 y terminará nuestra posición en el número 3, pero recuerda, este tercer y último valor no se incluirá, por lo que esto sólo debe devolver la masa y el queso, y esto es lo que vemos en la consola. En estos últimos videos, hemos mirado el método de corte y también uno similar, que era empalme. En la superficie, ambos métodos sí se ven bastante similares, pero la diferencia es empalme elimina o agrega a la matriz original, y el método de empalme mantiene intacta la matriz original y en su lugar devuelve uno nuevo con los valores seleccionados. El caso de uso de ambos depende de si queremos conservar el array original o si queremos modificarlo. Por último, vamos a ver el método concat. Para ello, como hemos visto dentro de las diapositivas, necesitamos una segunda matriz para fusionarnos. Esto crearía una segunda matriz llamada extras, que contendrá algunos coberturas adicionales. Añadamos algunos pimientos y también algunas cebollas. Podemos entonces comentar el valor de antes. Crea nuestra NewPizza, y la NewPizza va a ser igual a ambas de estas matrices fusionadas entre sí. Para ello, primero accederemos a una de nuestras matrices, como la pizza, luego llamamos al método que era concat, luego fusionarnos en los extras. Guardar y pasar al navegador. Oops, solo necesitamos registrar la nueva pizza. Refresca, y en la consola, y al igual que con todos los métodos de este video, la matriz original permanece intacta. Estamos registrando la pizza justo aquí. Tenemos una matriz NewPizza recién devuelta, que es una combinación de la matriz de pizza y también de los extras también. 22. Métodos de iteración: El grupo final de métodos que les voy a mostrar en este video son los métodos que recorrerán cada uno de estos elementos de matriz y luego ejecutarán una función para cada uno. Encima en los archivos de inicio se dirigen a los métodos de iteración, que está en la Sección 2 y el número 5, estos métodos de iteración que ejecutan una función para cada uno es realmente útil cuando tenemos un montón de elementos de matriz y quiero repetir un proceso para cada uno. Dentro de la página de índice de archivos de inicio, se puede ver arriba en la parte superior tenemos tres roles de usuario dentro de los comentarios. Si utilizas algo como WordPress en el pasado, esto te parecerá muy familiar. Esta es una configuración común. Se puede ver aquí tenemos todos los roles y una matriz y esto será realmente común si tuviéramos múltiples usuarios en nuestro sitio y quisiéramos dar a los usuarios diferentes niveles de acceso. Por ejemplo, si tuviéramos un objeto de uso con el nombre y todo el resto de la información de uso. También podríamos agregar una matriz así como esta. Podríamos dentro colocar cualquier rol y permiso que tenga ese usuario. Entonces podríamos comprobar en contra de esto antes de que hagan alguna acción en nuestro sitio. Por ejemplo, si están a punto de publicar una entrada de blog, posible que queramos recorrer todos los roles dentro de la matriz y comprobar que tienen los permisos correctos antes de hacerlo. Al igual que con WordPress sobre la parte superior, tenemos el admin, que es el acceso de tamaño completo, y tiene todos los permisos, hacer prácticamente cualquier cosa en un solo sitio. Tenemos al autor y el autor no puede publicar cosas como sus propias publicaciones de blog. También pueden editarlos. Efectivamente se encargan de su propio contenido. Bueno, esto tendrá un suscriptor que generalmente es la configuración predeterminada con un sitio de WordPress. No pueden manejar nuestro lado, no pueden editar ningún contenido. Todo lo que pueden hacer es básicamente administrar su propio perfil. Lo que vamos a hacer aquí es simular un sitio de entrada de blog donde un usuario podría ser capaz de crear sus propias entradas de blog. Tan pronto como el usuario haya iniciado sesión y creado una entrada de blog, cuando luego siga adelante y haga clic en el botón Publicar, primero queremos recorrer los roles del usuario y comprobar que tengan el correcto permisos. En nuestro caso, queremos comprobar si son un administrador o un autor. Si lo son, entonces pueden seguir adelante y publicar. Si no, necesitarán permiso antes de que esto esté en vivo en nuestro sitio, y para ello, crearemos una función. Porque recuerde que estos métodos de iteración ejecutarán una función para cada valor dentro de nuestra matriz. Esta función llamará a esto CanPublish y esto va a devolver un valor verdadero o falso. Para esto, también revisa los roles que necesitamos pasar en un rol a la función y luego queremos comprobar si el rol es igual al administrador o igual al autor. Podemos usar rol, el triple es igual para comprobar si la fila que se está pasando es primero igual al admin. Todas las necesidades del usuario [inaudible], que es el u operador que hemos mirado previamente. También podemos probar si el rol es igual al autor. Si es así, vamos a devolver este valor, que será verdadero o falso, y para ver este valor de retorno, vamos a crear un registro de consola, solo golpe y este registro de consola va a llamar a esta función. Pasándolo CanPublicar y empezaremos primero por pasar en el admin. Esta cadena de administración se va a convertir a este rol y comprobamos que este rol es igual al admin o al autor. Pasado a la consola. Refresca esta página, y esto es por supuesto cierto. Probemos también al autor, que es la segunda condición justo aquí y esto también debería ser cierto. Por último, suscriptor y éste es falso. Nuestra función está funcionando correctamente. Pero por el momento, es muy manual. Tenemos que pasar manualmente en cada una de nuestras cuerdas y revisar dentro de aquí, cada una a la vez. Esto está bien cuando sólo tenemos tres roles separados. Pero imagina si tuvieras que repetir esto por digamos, 50 papeles diferentes en nuestro sitio, esto se convertirá en un proceso largo y tedioso. Bueno, para ayudar con esto, volvemos a todo el propósito de este video, que es mirar los métodos de iteración. Esto ahorrará mucho de todo el trabajo manual haciendo un bucle sobre cada uno de estos roles y comprobando si contiene un valor en particular. El primer método de iteración que voy a ver es algunos y al igual que otros métodos también, comenzaremos accediendo a la matriz por el nombre de la variable, y luego llamamos al método algunos después y esto va a comprobar si algunos de los valores de matriz son mucho, pero mucho para qué? Bueno, usando este mismo ejemplo, podemos mover esta función al método algunos. Agarra todo este código justo aquí, apaga esto, y coloca esto justo dentro de los paréntesis. No podemos eliminar estos nombres de función ya que no necesitamos, rol es manualmente. En su lugar se llamará una vez por cada valor dentro de esta matriz y esto a menudo se conoce como una función de devolución de llamada. Esta función se llamaría ahora tres veces. El rol por primera vez tomaría la cadena admin, entonces sería autor, y luego la tercera vez sería el suscriptor y para cada uno de estos roles, entonces ejecutaría el código dentro de la función. Al igual que con toda esta función sigue devolviendo un valor verdadero o falso y podemos capturar este valor de retorno dentro de una variable. Dentro del registro de la consola, seguimos llamando a CanPublish. Pero esta vez esta no es una función por lo que podemos quitar los paréntesis y simplemente se registra el valor de esta constante. Ahora nos da un guardar, refrescar y este valor ahora es igual a verdadero. Esto es cierto porque al menos uno de los roles dentro de aquí es un partido. Si ninguno de estos era una coincidencia para admin o author, acabo de cambiar esto, podemos ir por moderador y digamos invitado, guardar esto y refrescar, y este es ahora el valor de false. Al mirar esta diapositiva, este es el mismo método que vemos arriba en la parte superior. Solo para recapitular, devolverá verdadero si uno o más de los valores de la matriz son mucho para la función call-back. Pero, ¿qué pasa en cambio si quisiéramos obtener un valor verdadero solo si todos los elementos de la matriz son una coincidencia? Bueno, para este caso de uso para cómo el cada método, y podemos ver un ejemplo a continuación. Esta es una matriz de los puntajes de las pruebas de este año. Después ejecutamos una función de devolución para cada valor en la matriz. Por cada dos devueltos true, todos los elementos de la matriz deben ser mayores de 95. Si uno solo es menor de 95, provocará que falle y devolverá un valor falso. Utilizamos estos métodos si queremos si devuelven valores similares o cada valor. En lugar de simplemente tener una matriz independiente así como esta, es más común tener esto unido a un objeto de usuario. Imagina que teníamos un sitio con múltiples usuarios, y estos estaban todos almacenados dentro de una matriz. Entonces dentro de cada uno de nuestros usuarios tiene su propio objeto de usuario. Abre los tirantes rizados para un objeto. En primer lugar sólo tendremos un ID de usuario de uno, separado por una coma. El segundo inmueble de rol de admin. Lo que voy a hacer es agregar una coma al final de esto, y luego copiar. Pegaremos esto en un par de veces más. Usuario 2, esta vez un papel diferente de autor. Usuario 3, éste también puede ser autor dos, y luego finalmente, el número cuatro puede ser el suscriptor. Usar un método de iteración significa que podemos vivir a través de cada uno de estos objetos de usuario y filtrar por un rol particular. Imaginemos que queríamos agarrar a este usuario en particular, que es el papel del suscriptor. Dado que esta es una matriz para hacer esto, posible que también necesitemos encontrar el número de índice antes de poder agarrar esta información. Para esto, tenemos algo llamado find index. Este ejemplo también tiene una matriz de objetos de usuario. A continuación lo llamamos método de índice encontrar, y ejecutará una función para cada uno de estos valores. Cada uno de estos valores se almacena en el perímetro de usuario funciones. En las declaraciones de retorno, accedemos al usuario, seleccionamos el rol y comprobamos si es igual a admin. A continuación, devolverá la posición de índice de la matriz del primer partido. Para este ejemplo, es el primer valor que es la posición cero. Vamos a darle a éste una prueba nosotros mismos. De vuelta a nuestra página de índice, sólo voy a aclarar las cosas. Incluso sólo esta matriz de usuario. Entonces en la parte inferior vamos a acceder a nuestros usuarios, entonces llamaremos al método que acabamos ver llamado find index. Al igual que todo el resto de los métodos, esto también va a tomar en una función y también necesitamos pasar en el usuario. Al igual que antes de esta función se llamará una vez por cada elemento dentro de esta matriz. La primera vez que lo recorra será el usuario 1, el usuario 2, y así sucesivamente. Entonces lo que quiero hacer es acceder al usuario , solo voy a mover esto. Entonces queremos acceder al rol individual. Si quisiéramos encontrar este rol de suscriptor, podríamos comprobar si esto es igual a la cadena de suscriptor. Entonces el retorno es valor que va a ser verdadero o falso. Después guarde este valor devuelto dentro de una variable. Echemos un vistazo a esto haciendo un registro de consola. Medios para registrar esta variable de índice, refrescar el navegador y recuperamos el índice número tres. Se trata del número de índice 0, 1, 2 y 3. Ahora sabemos que todo esto funciona correctamente. Como podemos ver, esto devuelve la posición de índice. Pero ¿qué pasa si quisiéramos el valor real como este objeto completo? Bueno, para esto tenemos un método disponible para nosotros llamado find. Find seleccionará el primer partido dentro de nuestro array. Por ejemplo, si tuviéramos múltiples suscriptores, el método find sería útil para encontrar el primero, cual se encuentra. Este ejemplo también tiene una matriz de objetos de usuario. Entonces llamamos al método find, y se ejecutará una función para cada uno de los valores. Aquí comprobamos si el rol es igual al autor y luego encontraremos devolverá el primer objeto, que es una coincidencia. En nuestro caso, es el usuario número dos. En este caso, sólo cambiamos esto para ser hallazgo. Esta vez comprobaremos si el rol del usuario es igual al autor. Ambos tenemos dos roles de autor dentro de la matriz, y este método de hallazgo seleccionará el primero. Vamos a renombrar esto para que sea el autor y también registraremos esto en la consola. Guarda y refresca, abre esto. Esto ha seleccionado al usuario número dos, que es el primero de nuestros dos roles de autor. Esto es realmente útil para encontrar el primer partido dentro de nuestra matriz. Pero, ¿qué tal si quisiéramos seleccionar a ambos usuarios cuáles eran una coincidencia? Bueno, para esto también tenemos un método llamado filtro. Usando el mismo ejemplo que antes, todo lo que hemos hecho aquí es cambiar el método find para ser filter, y esto devolverá todas las coincidencias en lugar de la primera. Significa que recuperamos una nueva matriz que contiene el usuario 2 y también 3. Todo lo que hacemos es cambiar encontrar para ser filtro, y en su lugar nos metemos atrás múltiples autores por lo que agregaremos un s a cada uno de estos. Guardar y Refrescar. Ahora estamos viendo una matriz que contiene dos objetos separados. Si abrimos esto, dentro de aquí podemos ver tenemos usuario número dos y también número tres. Todo es métodos realmente útiles para seleccionar valores dentro de una matriz. También algunas cosas a tener en cuenta también es desde ES 2015, también tenemos un tipo diferente de sintaxis de función que podemos usar, y esto se llama función de flecha. Las funciones de flecha tienen algunas diferencias de comportamiento esta función tradicional, que veremos con más detalle en una sección posterior. Pero por ahora, también podemos usarlos para acortar nuestro código de función. El modo de hacer esto es eliminar esta palabra clave de función, y luego justo después de estos corchetes entonces colocamos en una flecha. Una flecha consiste en los iguales y el corchete de ángulo recto para crear estos efectos de función de flecha. En su forma actual, este código es completamente válido. Esto está bien de usar. Si fuéramos a guardar esto y refrescar, seguimos viendo los mismos dos resultados, pero también podemos acortar aún más esta función. Podemos colocar todo este código en una sola línea eliminando estos corchetes rizados. Moveremos ambos y colocaremos todo esto en una sola línea. Traiga esto así como esto. Entonces escribimos una función de flecha así como esta en su propia línea. También podemos eliminar la palabra clave return to, ya que esta será devuelta automáticamente para nosotros. Nuevamente, todo esto es perfectamente válido y si actualizamos el navegador, seguimos viendo los mismos dos resultados. Por último, si sólo tenemos un solo parámetro más allá de esta función, incluso podemos eliminar los corchetes circundantes así. Pero ten en cuenta, si tenemos múltiples parámetros, tuvimos que pasar un segundo valor dentro de aquí, todavía necesitaríamos agregar los corchetes circundantes. A menudo se usa una sintaxis para mantener cosas como esta, que son más simples y agregan todo nuestro código en una sola línea. Depende de ti, qué tipo prefieres usar en tu propio código. Pero es útil saber que ambos estilos existen porque verás muchos ejemplos en línea. Estos últimos videos Te he mostrado algunos de los métodos de matriz más populares, y todavía hay algunos más también, pero todos generalmente funcionan de una manera similar. También hay más de estos métodos de iteración. A continuación, echaremos un vistazo a estos con más detalle. 23. Reductores: Ahora vamos a cubrir una técnica para reducir una matriz a un solo valor. Voy a hacer esto usando el método reducido. El método reducido, al igual que los anteriores que hemos mirado, tomará una función y ejecutará esta función para cada valor de matriz. Es más sencillo. Podríamos sumar una matriz de números, luego devolver el total de todos ellos sumados. Por supuesto, podemos ir mucho más complejos si lo necesitamos también. Echemos un vistazo a algunos ejemplos sobre estos archivos de datos. Enfréntate a éste que son los reductores. Se puede ver, dentro de un script tenemos una simple matriz de números que contiene cinco valores diferentes. Si todo lo que queremos hacer es sumar todos estos valores y devolver el total, el método reducido es perfecto para esto. Al igual que con otros métodos, justo debajo podemos llamar al método reducido al nombre de la matriz. Que en nuestro caso son los números. Llama a reducir, agrega los corchetes, y luego vamos a ejecutar una función para cada valor dentro de esta matriz. Esta función podría pasarse directamente a los paréntesis tal como lo hemos hecho anteriormente, o tal como con todos los métodos, también podríamos mantenerlos separados si quisiéramos. Esto también tiene el beneficio agregado de, es más reutilizable, si queremos usarlo en otro lugar también. De cualquier manera está completamente bien. Pero para este ejemplo, queremos mostrarte el enfoque alternativo, que es crear la función por separado. Crea nuestra función justo debajo de esta. Ya que esto sumará todos los números y devolverá el total, le daremos un nombre de total, agregaremos los paréntesis, y luego las llaves. Para esto, esto va a tomar dos parámetros dentro de los corchetes de la función. Este va a ser el total separado por coma. El siguiente será el valor actual. Después dentro de los corchetes o dentro de las llaves, vamos a devolver el total, sumado al valor actual. Te explicaré lo que hace todo esto con más detalle en tan solo un momento. Pero por ahora, como esta función está separada del método reducido, también necesitamos llamar a esto dentro de los corchetes. Nuevamente, sólo para aclarar, esto es exactamente lo mismo. Coloquemos esto directamente dentro de aquí. Volver a esta función, y esto se llama una vez por cada uno de los valores de la matriz. Para este ejemplo, correrá cinco veces. Aquí es donde entrarán en juego estos dos parámetros. Para cada bucle, el número actual sobre a la derecha es bastante autoexplicativo. Este es el valor de matriz actual como 72 y 33. Pero primero, tenemos una fila total sobre a la izquierda. Este es el total del bucle anterior, a menudo llamado el acumulador, ya que acumula los resultados anteriores. Tan solo para aclarar lo que está pasando aquí, echaremos un vistazo. Agregaremos un comentario rápido aquí dentro. La primera vez que se ejecutará esta función, este será el bucle número 1, y el total, que es éste de aquí, será igual a cero, ya que todavía no hemos sumado ningún valor. El segundo valor del valor actual, éste será 72, ya que este es el primer valor dentro de la matriz. Después pasa al bucle número 2. En primer lugar, nuevamente, tenemos el total, que es estos dos valores sumados. Estos dos valores sumados serán iguales a 72. Entonces el valor actual para este es el número 33. Nuevamente, exactamente lo mismo para el bucle 3. Esta vez vamos a sumar estos dos valores juntos, lo que nos dará el resultado de un 105. Entonces el valor actual en esta ocasión es un 108. Aquí puedes ver un patrón para cada bucle vamos a sumar ambos de los valores. Esta vez en el bucle número 4. Estos dos sumados, para el bucle número 4, serán 213. El valor actual para el bucle número 4 es 222. Entonces, por último, bucle número 5. Estos dos valores sumados para el bucle 5 va a ser igual a 435, siendo el valor actual el número 6. Por supuesto, así que no tomes mi palabra para esto. Vamos a iniciar sesión en la consola, y comprobar cuáles son los valores. Recuerda, estamos devolviendo este valor final de la función. Podemos almacenar esto dentro de una variable. Digamos que el resultado const es igual a este valor de retorno, y luego un registro de consola. Solo para que lo sepas también, que Visual Studio Code ejecutará un registro de consola, o un atajo a esto, si solo escribimos la palabra log y luego pulsamos “Enter”, pasamos el resultado. Podemos echar un vistazo a esto dentro del navegador. Inspeccionar, en la Consola, y vemos el valor de 441, que son los dos valores finales sumados juntos. Esto se agrega para obtener los cinco de estos números, y luego devolver el valor final dentro de esta función. También podemos hacer cualquier otra cosa que queramos con estos dos valores, como restar. Cambiemos esto para que sea negativo. Dale una prueba a esto, y obtenemos el valor de retorno de 297 negativo. Esto hará exactamente lo mismo, correremos cinco veces, pero esta vez deduciremos el valor actual del total, razón por la cual obtenemos este valor negativo. Simplemente reinstalaré esto para ser plus. Esto suma nuestros valores de matriz de izquierda a derecha como acabamos de ver con este ejemplo. También tenemos un método similar el cual funcionará de derecha a izquierda. Esto es muy sencillo. Todo lo que tenemos que hacer es cambiar reducir para ser ReducerRight. Dale a esto un guardar y refrescar, y obtenemos el mismo valor de 441, porque estamos sumando los mismos números, pero esta vez es solo en un orden diferente. Para volver a comprobar, esto va de derecha a izquierda. Estamos completamente seguros a pesar de que tenemos el mismo valor justo aquí. También podemos agregar un número de índice opcional. Agrega esto en como tercer parámetro a nuestro reductor. Entonces justo antes de que regresemos esto, podemos hacer un registro de consola. Registrar el valor del índice. Deberíamos ver el número de índice yendo del número más alto al más bajo. Este es el último número que es el índice número 3, todo el camino hacia abajo a cero. Ambas funciones, la ReduceRight, y también la reduce son útiles por muchas razones. Es posible que desee realizar un seguimiento de una puntuación o puntos de un usuario de esta manera, y luego sumar todos estos valores juntos al final. Esta información puede entonces ser utilizada de otras maneras también, tal vez para encontrar la puntuación promedio. Para hacer esto para averiguar el número promedio dentro de esta matriz. Justo debajo de nuestro método ReduceRight aquí, crearé una nueva constante. Apenas todo esto en llamada el promedio, y establecer esto igual a un cálculo. El cálculo que queremos hacer es agarrar los resultados completos, que es el valor de todos estos sumados. Este es el paso 1, y luego necesitamos dividir esto por el número de elementos dentro de la matriz. De nuevo, podemos hacer esto bastante sencillo. Necesitamos acceder a nuestra matriz de números completos, y luego a la propiedad, que es la longitud, que hemos mirado en el pasado. Entonces podemos en consola regir el promedio, dirigirnos al navegador y refrescar. Ya podemos ver el promedio es de 88.2. 24. Mapa y forEach: Ahora quiero mostrarte dos métodos de matriz más. Como se puede ver por el título, este es Mapa y ForEach. Estos dos métodos también son métodos de iteración como lo hemos visto anteriormente. Pasarán por cada elemento de la matriz y luego ejecutarán una función de devolución de llamada. Muchos de los métodos de matriz que tenemos código hasta ahora, y mucho más específicos, como ordenar una matriz, podemos hacer filtrado, podemos comprobar si existe un valor, pero estos dos métodos, que son MAP& ForEach, son mucho más generales. El uso para su propósito sólo se limita al código, que escribimos dentro de la función. Abre el archivo Mapa y ForEach. Entonces dentro de este script tendrá dos matrices. Tendremos una simple matriz de números y tendremos una matriz de publicaciones de blog, que echaremos un vistazo en tan solo un momento. Pero ahora vamos a empezar accediendo a los números y luego como siempre, llamamos al método con punto o por el nombre de ForEach. Podríamos escribir una función que al igual que hemos mirado previamente dentro de aquí. Usando la sintaxis de la función más tradicional o también para la práctica, voy a convertir esto en una función de flecha. Una función de flecha, que hemos mirado previamente, comienza con los paréntesis así. Después escribimos una flecha con los iguales y el mayor que símbolo. Entonces tenemos un par de opciones diferentes. Si quisiéramos, podríamos agregar múltiples líneas de código dentro de las llaves. Podríamos escribir nuestro código dentro, y luego podríamos usar la palabra clave return para devolver un valor de esta función o alternativamente, como hemos mirado anteriormente, podríamos emitir la palabra clave return y coloca esto en una sola línea. Si colocamos en esto en una sola línea, también podemos quitar estas llaves, y esto devolverá directamente el código. Hagamos un registro de consola, como el valor de retorno. Recuerda que ya que estamos haciendo un bucle sobre cada valor en la matriz de números, esto también va a tomar el número como parámetro. Ahora, tendremos la libertad de hacer lo que queramos con este parámetro, como un simple registro de consola. Ahora podemos poner el número, multiplicar por dos. vistazo a esto en la actualización de la consola para que veamos 144, 66. Esto es sólo todos estos números multiplicados por dos. El número de índice también está disponible, si queremos insertar esto como parámetro. Recuerda una coma y el índice, entonces podemos usar este índice en cualquier lugar que queramos en nuestra función. Quitemos esto. Quiero agregar en la cadena de plantilla con los backticks, para que podamos insertar una variable. Tendremos disponible el texto del número, que es un símbolo $, y las llaves, pasan en el índice, luego un colon, lo que vamos a decir aquí es número uno y luego un colon. Entonces también inserte nuestro número. Si queremos, podemos hacer algo similar a los intentos anteriores, que se multiplica por dos. Guardemos esto y pasemos al navegador. Ahí vamos. Podemos acceder al número cero, número uno, número dos, y ver cada uno de los valores individuales. Nuevamente, si quisiéramos, también podemos manipular esto. Si queremos que esto comience en el índice número uno, podríamos agregar el valor de uno. Entonces esta vez, en lugar de comenzar en el número cero, esto comenzará en el número uno. Como se mencionó anteriormente, podemos escribir cualquier código dentro de esta función y tomando nuestro post array desde arriba. Echemos un vistazo a un ejemplo con una matriz de objetos. Lo que vamos a hacer esta vez es recorrer todos nuestros posts y luego ejecutar una función para cada uno de estos objetos. Seleccionaremos el título de la entrada del blog y luego transformará el texto para que sea mayúscula. Para la práctica, volveremos a empezar, accederemos a nuestros posts, llamaremos para cada uno, abriremos los corchetes y luego podremos insertar una función con cualquier sintaxis que desees. Este video, me quedaré con la función de flecha, que es así. Entonces nuevamente inserte un registro de consola. Esta vez estamos recorriendo todos los mensajes. Esta función tomará un parámetro para cada puesto. Además, si recuerdas, si solo tenemos un solo parámetro así, también podemos quitar los corchetes circundantes, hacer esto un poco más corto. A veces sin embargo, si sí guardas así, el editor de texto volverá a insertar estos back-in, pero eso está completamente bien. Lo que vamos a hacer ahora es acceder a estas publicaciones individuales dentro de nuestro registro de consola. Entonces como este es un objeto, necesitamos acceder a una de las claves, como el título o el cuerpo. Voy a ir por título. Entonces también voy a insertar un método llamado ToupperCase. En lo que va de esta sección, hemos estado usando muchos métodos que llamaremos a una matriz, pero ToupperCase también es un método. Pero éste se usa en una cadena de texto. Vamos a probar esto. Pasar al navegador y refrescar. Ahí están nuestros tres títulos por lo que llamamos a la función tres veces y para cada uno seleccionamos el título y transformamos el texto para que sea mayúscula. Este es el método ForEach, pero ¿qué pasa con Map? Pasemos a nuestro editor y todo lo que necesitamos hacer es cambiar ForEach, mapeamos, guardamos y actualizamos, y recuperamos exactamente los mismos valores dentro de la consola. Entre Map y ForEach, se ven muy similares. ¿ Cuál es exactamente la diferencia? Hay un par de razones por las que son diferentes y una es el valor de retorno. Para ver esto, necesitamos almacenar este valor devuelto dentro de una constante o una variable. Diremos nuevos posts y pondremos esto igual a nuestro valor de retorno, cambia de nuevo para ser forEach. Entonces en lugar del registro de la consola solo devolverá el valor de esta transformación. Recuerda que puede que tengamos una sola línea con una función de flecha como esta. Esto devolverá automáticamente este valor para nosotros. Para ver este lugar en un registro de consola con el valor de retorno el cual se almacena dentro de nuevas publicaciones, ahorra en las herramientas de desarrollador y vemos este nuevo valor de indefinido. Volvemos indefinido porque no se nos devuelve nada. ForEach, ejecutaremos una función para cada uno de estos valores de matriz y luego modificaremos directamente esta matriz original sin devolver nada. Mapa, por otro lado, si cambiamos esto, guardamos y actualizamos, ahora recuperamos una nueva matriz con libre de los valores de transformación. Esta es la diferencia clave entre Map y ForEach. ForEach, modificaremos la matriz original. Cuando utilice Map, esto dejará la matriz original en tacto y en su lugar devolverá una nueva matriz con los valores modificados, lo que esta es una diferencia clave. Otra diferencia clave entre estos dos métodos es cuando es un Mapa, también podemos encadenar en múltiples métodos. Para ver esto más claramente, voy a colocar esto en múltiples líneas y la sección Mapa en su propia línea, quitar el punto y coma, y luego podemos encadenar al extremo un método de filtro. Mantener con el mismo estilo agregará una función de flecha la cual toma el nuevo valor, configura nuestra flecha y luego podremos filtrar cualquiera de las entradas del blog donde el valor o título en particular es igual a ser” Cómo ser un ninja parte dos. Esto también tiene que ser mayúscula, ya que ya lo hemos transformado con el Mapa justo arriba. Ahora, como ya sabemos, se incluye este título, por lo que esto filtrará nuestra única publicación. Si vamos a la consola, podemos ver esto si actualizamos. Ahora, tendremos un nuevo array de vuelta a nosotros con este único valor filtrado. Alternativamente, si no solo quisiéramos una nueva matriz con este único valor, quizá queramos simplemente comprobar si este título está incluido dentro de nuestras publicaciones o podríamos hacer esto, cambiando el filtro con el método algunos. Esto devolverá un valor verdadero o falso, como ya sabemos, su título ya está incluido. Ahora bien, si refrescamos esto, recuperamos el valor de verdadero. Si cambiamos esto para que sea algo que no está incluido, esto devolverá el valor de falso. Esto es realmente útil para recuperar los datos exactos que necesitamos. También podemos querer agarrar la posición de índice de estos elementos de matriz. Podemos hacerlo cambiando esto de nuevo a uno de los títulos reconocidos o a la segunda parte. Entonces en lugar de seguir haciendo cambios para ser encontrar índice que hemos utilizado previamente, guardar. Este va a ser índice número dos y ahí vamos. Se puede ver con estos ejemplos que aunque todos estos métodos pueden parecer complejos para comenzar, muchos de ellos están estructurados exactamente igual, pero simplemente devuelven valores diferentes. Volver a este Mapa y este ForEach, nada de este encadenar o agregar un nuevo método al final está disponible al usar ForEach. Podemos ver esto si cambiamos esto de nuevo, actualizamos, y ahora vemos un error dentro de la consola. Este entrenamiento no es posible al usar ForEach porque como hemos visto antes en una de nuestras pruebas, antes de que cada método devolverá indefinido en lugar de un nuevo valor. Tan solo para un resumen, usamos ForEach si queremos modificar la matriz existente y no necesitamos que se devuelva una nueva. Utilizamos Map si queremos dejar intacta la matriz original, y devolver una nueva matriz con los valores. También es bueno para la cadena también. 25. Desestructuración de matrices: Sí, 2015 introdujo la destructuración, que es una forma sencilla de extraer matrices o valores de objetos y almacenarlos en variables. Para iniciar un proyecto, que es la destrucción de array contiene una matriz de publicaciones de blog, igual que tuvimos en el último video. Si quisiéramos almacenar cada valor de matriz en una nueva variable, podemos hacerlo agregando destructuración. Podemos hacer esto en el lado izquierdo de esto igual. En lugar de almacenar todo esto en una sola variable post, lo que podemos hacer es agregar los corchetes al igual que esto, y luego podemos crear un nuevo valor de variable para cada uno de estos elementos de matriz. Al primero podemos llamar post1, post2, luego post3. Estos valores de matriz separados ahora deben almacenarse en estas tres variables. Vamos a probar esto. Tu registro de consola con el valor de post1. Refresca, y ahí está nuestra única publicación de blog. Probemos con el número 3. Ahí vamos. Podemos ver que cada uno de estos tres valores es ahora único, es la desestructura, y también puede tener lugar por separado también. También podríamos configurar exactamente el mismo resultado así. Podríamos crear una nueva variable y luego almacenar nuestros valores dentro de estos corchetes. Al igual que antes, podemos almacenar post1, post2, y post 3, y establecerlos iguales a todas las publicaciones. Nuevamente, con uno de nuestros puestos individuales ya seleccionado, podemos echar un vistazo a esto. Post3 y también post2, así que esto es lo mismo que acabamos escribir de dos maneras diferentes. Hacerlo con este estilo también significa que tenemos acceso a estas tres variables destructivas, también mantenemos la referencia original a esta matriz completa, si quisiéramos también hacer algo de diversión con esto más adelante también. Se puede pensar en esta destrucción como un atajo. Hacer esto es exactamente lo mismo que algo así. Podríamos configurarlos individualmente mediante la creación post1 y establecer esto igual a nuestra matriz de publicaciones, seleccionando el valor del índice original. Duplicemos esto dos veces más. Post2 será igual a nuestra primera posición de índice, y luego post3 es igual al número de índice 2. Ahora con post2 ya seleccionado, pasando a la consola. Sigue funcionando igual que antes, pero tendremos una forma más larga de hacer las cosas. Quitemos esto. Algo más que también podemos hacer es hacer uso de la sintaxis de descanso JavaScript. El resto de la sintaxis es una forma de acceder a un solo valor o varios valores, y luego una forma de agarrar todo el resto de los valores hasta el final de la matriz. Por ejemplo, si solo quisiéramos configurar una variable, nuevo, necesitamos los corchetes. Si tan solo quisiéramos acceder a nuestro primer post y mantener esto con un nombre de variable separado al igual que este. Entonces podemos querer agarrar todo el resto de los valores restantes, podemos hacer esto separando esto con una coma usando los tres puntos, y luego almacenar el resto de los valores en una variable separada, establecer esto igual a todos los mensajes array. Confirmemos esto dentro de nuestro registro de consola. Post1 es éste justo aquí. Ahí vamos. Esa es nuestra primera publicación de blog justo aquí. Entonces dentro de esta variable otras, deberíamos tener el contenido de los valores restantes, que es el blog post2 y 3. Cambios a nuestra variable de los demás, refrescar. Esta es una nueva matriz con nuestros dos valores restantes. Esta destrucción es realmente útil para crear atajos, para almacenar diferentes variables. destrucción también se puede usar con objetos, y lo cubriremos más adelante en el curso. Algo de lo que hay que asegurarnos es cuando se usa el descanso, que también añadimos esto como el último valor de variable. No pudimos, por ejemplo, colocar esto desde el principio, porque como su nombre indica, esto agarrará todo el resto de los valores restantes. Si hacemos esto, y luego guardamos y actualizamos, vemos un error dentro de la consola. Esto sucede porque como su nombre indica, esto se utiliza para agarrar el resto de los valores restantes. Por lo tanto, no tiene sentido tener esto al principio. destrucción también se puede usar en objetos, y echaremos un vistazo a esto de cerca al descanso en el resto del curso. 26. Valores únicos con Set: Dirígete a la carpeta de esta lección, que es Valores únicos con set. Dentro de la sección de script, tenemos una matriz de categorías con múltiples valores dentro. Si miras de cerca, podemos ver este valor de las bolsas se ha duplicado al principio y al final. Las matrices como puedes ver aquí aceptarán cualquier valor que le agregues, aunque sean duplicados. Pero si quisiéramos evitar esto y solo tener valores únicos almacenados en su interior, podríamos usar algo llamado set. A pesar de que set se parece un poco a una matriz, en cambio es lo que se llama una colección. Al igual que las matrices, puedes almacenar tanto tipos primitivos como de objetos. Tenemos dos opciones, podríamos crear un nuevo conjunto desde cero, o si quisiéramos convertir esta matriz para ser un conjunto. Simplemente ve, crea una nueva variable y esta se va a llamar categorías únicas. Establezca esto igual a un nuevo conjunto. Hemos visto esta nueva palabra clave en el pasado al crear cosas como nuevas matrices y esto va a crear un nuevo conjunto vacío. Podemos pasar en nuestras categorías, que es la matriz justo arriba. Debajo de esto se crea un registro de consola. Cerrar sesión el valor de las categorías únicas y también el navegador verá qué es la salida dentro de la consola. Ahora tengo un conjunto con seis entradas y tras una inspección más cercana, podemos ver el valor de las bolsas sólo se incluye una vez. Eliminó cualquier duplicado ya que nuestra matriz original tenía valor de estas bolsas en dos veces y siete valores diferentes. Lo que hemos hecho aquí es que hemos creado un nuevo conjunto el cual se clona la matriz de categorías y se despoja de cualquier valor duplicado. Set también tiene algunos métodos incorporados que podemos utilizar para modificar esta colección. Después agrega nuevo valor. Contamos con el método add el cual podemos utilizar directamente en nuestra variable. Accede a las categorías únicas, solo agrega método y dentro podemos agregar un nuevo valor, vamos por jeans. Guardar y refrescar. Ahora, nuestro conjunto ahora tiene siete valores con los jeans empujados hasta el final de esta colección. No se aceptarán categorías duplicadas ni siquiera cuando se utilice este método. Si vamos por sombreros, que ya tienes, refresca esto, y estamos de vuelta ahora a seis valores diferentes porque los sombreros se han duplicado. Si también queremos eliminar un solo valor, tenemos acceso al método delete. Cambiamos esto y luego podemos quitar cualquiera de nuestros valores existentes. Vamos por encima de los sombreros, refresquemos. Esto ahora se reduce, nuestro conjunto abajo para ser cinco valores con los sombreros ahora han sido eliminados. Esto elimina un solo valor pero si queríamos eliminar todos los valores de nuestra colección, tenemos acceso al método clear. Ya que estamos quitando todos los valores, no necesitamos pasar nada por dentro. Refresca y esto borrará todo el contenido de nuestro set. También podemos comprobar si un valor particular está incluido en un conjunto utilizando el método has. Dado que esto devuelve verdadero o falso, también necesita almacenarse dentro de una variable. Cambiemos esto para ser tiene, podemos comprobar si esto tiene un valor de zapatos. Si solo tuviéramos que guardar esto y refrescarnos, aún así recuperamos el conjunto completo. Pero en cambio, si accedemos al valor de retorno, instalamos esto dentro de una constante, digamos hasShoes, esto igual al valor de retorno y luego podemos registrar esto en la consola. Esto es cierto, cambiemos esto para que sea otra cosa. Como era de esperar, esto ahora está regresando falso. Al igual que cuando usamos matrices, tenemos acceso a una propiedad de terreno. Averigua cuántos valores están contenidos dentro de la matriz. Al usar sets, tenemos acceso a algo muy similar, pero esta vez se llama tamaño. A medida que mueve esta línea y restaura las UniqueCategories, access.size, guardar y refrescar, y el valor devuelto es seis. Set es realmente útil si no queremos tener ningún valor duplicado dentro de una matriz. Si quisiéramos, también podríamos hacer esto con una matriz y también cadena en el método de filtro para eliminar cualquier duplicado. Pero por supuesto, es mucho más sencillo usar este conjunto que escribir todo el código adicional que debería requerirse si guardáramos esto dentro de una matriz. 27. Matrices de dos dimensiones: Las matrices regulares, como sabemos, almacenan valores en orden de izquierda a derecha, comenzando en la posición de índice 0. Pero también podemos usar matrices de forma bidimensional para crear una estructura como cuadrícula, igual que se puede ver aquí en la diapositiva. Parece complejo, ¿verdad? Bueno, esto no es tan complejo como puede parecer. O realmente necesitamos crear en una nueva matriz para cada una de estas filas. La primera fila es una matriz, la segunda fila es una matriz, y así sucesivamente. Entonces colocamos todos estos dentro de una matriz externa, que es como una envoltura que crea una matriz de matrices. Acceder a estos valores también es bastante sencillo. Sólo necesitamos dos números de índice. En primer lugar, seleccionamos la fila y luego seleccionamos el valor de esa fila en particular. Usando estos dos números, podemos seleccionar cualquiera de estos ítems que necesitemos. Echando un vistazo a este ejemplo justo aquí a la derecha, podemos ver esto está en la posición de índice 0 y luego 1. Comienza con 0 que accede la primera fila o a la primera matriz y luego de izquierda a derecha, posición de índice 1 es el segundo valor a través. Usando nuevamente el segundo ejemplo, hacemos exactamente lo mismo, pero esta vez bajaremos a nuestra cuarta fila, que es el índice número 3, y luego cruzando nuestro último ítem de esa fila, que es el índice número 4. Desafortunadamente, JavaScript no tiene una forma incorporada de crear matrices bidimensionales. En cambio, es por eso que necesitamos crearlos como matrices anidadas. Vamos a probar esto en nuestro editor, dirígete a este archivo que son las matrices bidimensionales o puedo conseguir que esto baje en el guión. Abre esto, y vamos a crear nuestra primera matriz llamada grid. Este va a ser nuestro envoltorio. Podemos colocarlos en dos líneas separadas para que esto quede más claro. Entonces dentro vamos a sumar tres filas. La primera fila, como acabamos de ver, es sólo una matriz simple. Añadamos algunos números, 11, 12, 13 y como con todos los valores de matriz, los separamos con una coma. fila 2 es una nueva matriz con 21, 22, 23 y finalmente nuestra tercera fila va a ser 31, 32, y 33. Loguemos esto en la consola y veamos qué recuperamos. Colocar en una variable de cuadrícula, refrescar y podemos ver que tenemos una matriz externa, que luego a su vez contiene tres matrices separadas y cada una contiene tres valores. Podemos ver esto más claramente si ampliamos nuestra primera fila, nuestra segunda fila, y nuestra tercera fila. También podríamos formatear esto en una mesa con la console.table. Esto lo hace un poco más claro. A ver qué está pasando. Podemos ver que tenemos el número de índice, primero seleccionamos la fila y luego seleccionamos la posición de índice de cada fila. Este sería índice 0 1, y al igual que estamos viendo en las diapositivas, podemos acceder a estos con dos corchetes. Para esto, volveremos a un registro de consola. Pondré la cuadrícula, abriré el primer juego de corchetes, que es la fila. Para este, vamos por nuestra tercera fila, que es el índice número 2 y luego justo después de nuestros segundos corchetes, vamos por el medio que es 32. Este es el índice número 1. Guardar y refrescar. siguiente nuestro valor de 32, que es éste justo aquí. Crear una matriz bidimensional no es realmente mucho más difícil que crear una sola matriz. En cambio, todo lo que necesitamos hacer es pensar la posición de coordenadas que acceden a cada uno de los valores en nuestra cuadrícula. 28. El objeto global y las funciones incorporadas: Dentro de estos archivos de inicio, ahora tenemos esta nueva sección de funciones, que es el número 3, para luego dirigirnos a la primera lección, que es el objeto global. Abre la página Índice. Asegúrate de que esto también se abra dentro del navegador. Entre la sección de guiones, tenemos un ejemplo similar al que hemos mirado en el pasado. Tenemos dos matrices diferentes, tenemos nuestros ingredientes de pan y los brownies, y luego esta función justo debajo. Esta función tomará en la receta y también los ingredientes, y esto comprobará si este ingrediente en particular está incluido en esa receta. Posteriormente devolverá un valor verdadero o falso, dependiendo de si se incluye el ingrediente. Como se mencionó anteriormente, esto se denomina declaración de función en un registro de consola. Justo debajo, podemos entonces llamar a esta función por su nombre, que es CheckAlergias, analizar en la receta, como el pan, y luego podemos revisar un ingrediente, como la sal, guardar y refrescar. Ahora obtenemos el valor de true ya que este ingrediente está incluido dentro de esta matriz. Sabemos que podemos llamar a esta función por su nombre porque, bueno, la hemos creado justo arriba en el mismo archivo. Bueno, ¿qué tal si llamamos a esta función desde una ubicación diferente, digamos un archivo JavaScript diferente? ¿ Crees que eso funcionaría? Bueno, echemos un vistazo. Ahora vamos a crear un nuevo archivo JavaScript dentro de esta carpeta de la lección 1. Entonces haga clic en esto y luego cree un nuevo archivo, y luego a esto se le va a llamar el script con extensión the.js para declarar que se trata de un archivo JavaScript. Asegúrate de que esto siga dentro de esta carpeta junto a nuestra página de Índice, y luego cierra la barra lateral para darnos algo más de espacio. Dentro de nuestro nuevo script.js, vamos, de nuevo, a hacer un registro de consola. Haremos exactamente lo mismo. Llamaremos a nuestra función, que era CheckAlergies, y luego analizaremos en dos argumentos cualquiera. Esta vez vamos por los brownies, y podemos comprobar si los brownies contienen azúcar. Como se discutió anteriormente, también necesitamos vincular este script a nuestra página de Índice ya que se trata de un archivo externo. Por lo tanto, estamos creando nuestro script dentro de la página Índice, por lo que se reconoce automáticamente. Pero como ahora tenemos un nuevo archivo de script, podemos crear una nueva etiqueta de script, y luego necesitamos colocarla en la fuente, que es la ubicación de nuestro nuevo archivo. Dado que este nuevo archivo está al lado de nuestra página de Índice, todo lo que necesitamos hacer es agregar su nombre, que era script.js. Por lo que efectivamente, esto es lo mismo que justo arriba. Todo lo que estamos haciendo aquí es tirar el código de un archivo externo, lugar de agregarlo entre estas etiquetas de script. Ahora tenemos nuestro registro de consola todavía en su lugar justo aquí, y luego también tenemos un registro de consola llamado desde este archivo separado. Pasemos al navegador y veamos cuál funcionará. Refrescar. Ahora vemos nuestros dos registros de consola. Vemos a la derecha que uno de ellos es de la página Índice y uno de ellos es de nuestro script.js, por lo que ambos están funcionando, y ambos son de dos ubicaciones de archivos separadas. Bueno, esto ahora nos lleva a la pregunta, si vamos a nuestro archivo de guión. Aquí estamos haciendo un registro de consola, y estamos accediendo a una función CheckAlergias, que no existe dentro de este archivo. ¿Por qué funciona esto? Bueno, cuando creamos una función, igual que hemos hecho aquí, se convierte en parte de lo que se llama el objeto global. Hemos hablado mucho de objetos y tipos de objetos, pero el objeto global es el grande. El objeto global es el objeto principal donde propiedades y funciones disponibles a nivel mundial todas laspropiedades y funciones disponibles a nivel mundialson accesibles desde. Esto puede sonar complejo, pero se puede pensar en él como el objeto principal que se crea, y luego podemos acceder a partes de él desde cualquier parte de nuestro código. JavaScript funciona dentro del navegador, y podemos acceder a este objeto global usando la ventana. Es posible que también haya oído hablar de algo llamado Node.js, que es una forma de ejecutar JavaScript en el servidor. Dado que Node.js se está ejecutando en el servidor, en lugar de en el navegador, no tiene acceso a esta ventana del navegador. En cambio, accedemos al objeto global usando la palabra clave global en su lugar. Pero no necesitas preocuparte por esto si no has oído hablar de Node.js. Entonces se ve esta ventana. Volvamos a la consola al navegador. Lo que vamos a hacer es escribir la ventana de palabras, pulsar “Enter”, y luego podemos ver toda esta información, que nos regresó a continuación. Dado que la ventana es un objeto global, contiene todas estas propiedades, las cuales podemos ver aquí. Algunas son funciones que podemos usar. También hay propiedades en los objetos en el interior. Esta es una lista de cosas a las que tenemos acceso global. Algunas de estas ya las hemos visto. Por ejemplo, voy a presionar “Comando” y “F” para encontrar algo en particular dentro de aquí. Si estás usando Windows, esto será más que probable que sea Control y F2. En primer lugar, si buscamos la consola, podemos ver esto resaltado dentro de aquí. Podemos abrir esto. Este es un objeto de consola, que ya hemos mirado. Si abrimos esto y echamos un vistazo justo debajo de esto, podemos ver que tenemos acceso a la función de registro y también a la función de tabla, que hemos utilizado en el pasado. Es por ello que tenemos acceso a ellos en nuestros múltiples archivos, porque estos se colocan en el objeto global. Si quisiéramos, también podemos referirnos al objeto ventana al llamar a estas propiedades. Por ejemplo, podríamos escribir el registro de window.console, y esto funciona exactamente igual también , por lo que window.console log. Guarda esto y refresca. Nuestros registros de consola seguirán funcionando exactamente igual. Quitémoslo y, una vez más, entraremos a nuestro objeto de ventana dentro de la consola. Si amplío esto, también podemos ver nuestra función personalizada aquí, que es CheckAlergies. Esto es aquí porque en cuanto creamos nuestra función CheckAlergias dentro de nuestro código, luego se agregó a este objeto global, y es por ello que podemos acceder a esto dentro de un archivo diferente. Además, cualquier variable que creemos usando la palabra clave var también se coloca en el objeto global, pero no ninguna variable que creemos con las palabras clave const o let. Pero más sobre éste después. Por supuesto, esta es una función que nosotros mismos creamos, pero JavaScript también tiene muchas funciones que primero no necesitamos crear. Estos se incorporan automáticamente en el idioma. Estas pueden denominarse funciones incorporadas o funciones globales ya que están disponibles para llamar a cualquier parte de nuestro programa desde este objeto global. Ejemplo de ello, si bajamos a la búsqueda, es una función llamada parseInt. Podemos ver esto incluido aquí, y podemos ver por este f, que esta es una función. Podemos usar esto, si pasamos al código. Apenas rápidamente antes de hacer esto, eliminaremos este script.js, eliminaremos el enlace del script, y también podremos eliminar este archivo de aquí también. Ahora de vuelta a nuestra página de Índice, echaremos un vistazo a esta función ParseInt. El modo en que funciona esta función es que tomará una cadena y luego convertirá esto en un entero, que es un número entero, así que para ver esto bajar a nuestro registro de consola, y podemos llamar a ParseInt. Este también es caso de camello, por lo que este tiene una letra mayúscula I. Abrir los soportes de función. Entonces como una cadena, vamos a sumar el número de 10. Guarda esto, y pasa al navegador, refresca y ahora vemos el número de 10. En lugar de tomar mi palabra para que este es un número, en lugar de seguir siendo una cadena, lo que podemos hacer es recortar esto con Command o Control-X, instalar esto dentro de una variable llamada Int, pega esto en. Entonces esta vez haremos un registro de consola para el tipode nuestro Int para ver qué tipo de datos estamos sosteniendo. Refresca, y ahora podemos ver que esto se ha convertido de una cadena a un número. Dado que ParseInt convierte una cadena en un entero, que es un número entero, no incluirá ningún número después de un lugar decimal. Entonces si esto fue, digamos, 10.09 y yo elimino el tipode, esto entonces se convertirá a un número redondeado o entero. También podemos voltear esto y hacer lo contrario con una función de cadena, por lo que esta vez llamaremos a esto un número, y en lugar de tener una cadena así, colocaremos en un número, y vamos a convertir el número esta vez para ser una cadena usando la función de cadena. Vamos, de nuevo, registraremos nuestra variable de número. Veremos el valor dentro de la consola o cinco. Pero una vez más, podemos hacer un tipo de comprobación para comprobar que esto se haya convertido en una cadena. Ahí vamos. Como puedes ver, JavaScript es realmente flexible. Podemos crear nuestras propias funciones o acceder a algunos montajes incorporados, que se proporciona con el lenguaje. Podemos entonces acceder a estos montajes incorporados en el objeto global. Como hemos visto, cuando accedimos al objeto de ventana antes, hay muchas más funciones disponibles también. No voy a pasar por todas ellas ya que hay bastante y también hay algunos bastante especialistas también. Pero usaremos muchas más de estas funciones, propiedades y objetos disponibles a nivel mundial a medida que nos movemos por el resto de las próximas secciones. 29. Expresiones de funciones: Hemos creado funciones hasta ahora usando una sintaxis llamada declaración de función. También hay una forma ligeramente modificada escribir funciones también, y estas se denominan expresiones de función. Salta a los archivos de inicio para esta lección, que está dentro de la sección de funciones, y luego a la lección en el número 2. Se puede ver dentro de aquí, si bajamos a la sección de guiones, tenemos un ejemplo de una declaración de función. Este es el tipo de función que hemos mirado anteriormente, y se ve así. Utilizamos la palabra clave function, creamos un nombre de función, pasamos cualquier parámetro opcional dentro de aquí, y luego escribiremos nuestro código dentro del cuerpo de la función. El alternativo, que es una expresión de función que ahora vamos a ver, también se ve bastante similar. La primera diferencia es la forma en que nombramos la función. Para transformar esto en una expresión de función, primero podemos eliminar el nombre de la función. Voy a escribir esto justo a continuación para que podamos ver una comparación. También usaremos la palabra clave function, pero esta vez saltaremos directamente los corchetes o a los paréntesis. Esto lo compararemos con el anterior, pasaremos en la receta y también los ingredientes. Entonces inmediatamente después de agregar nuestro cuerpo de función dentro de las llaves, solo copiemos estas dos líneas de código porque van a ser exactamente las mismas que este ejemplo. Entonces como no tenemos un nombre como el que tenemos justo arriba, lo que tenemos que hacer es asignar esto a una variable, crear una constante o una variable, y entonces podemos darle a esto un nombre como CheckAlergias y establecer esto igual a nuestra función. Vete ya. Nuestro nombre de función como este es nuevamente opcional, pero esta ahora es una función anónima por la falta de nombre. Lo que queremos hacer ahora solo para evitar cualquier confusión es comentar esta función original. También podemos comprobar si está funcionando haciendo un registro de consola. Al igual que antes, pasamos en el nombre de la función, pero esta vez, este es el nombre de la variable. Todavía podemos usar los corchetes justo después para pasar cualquier argumento opcional. La receta, podemos ir por cualquier cosa como el pan, pasar un cheque de ingredientes como la levadura, luego pasar al navegador, abrir las herramientas de desarrollador y dirigirnos a la consola. Vemos el valor de true, los cambios para ser incorrectos. Ahora esta función funciona completamente bien. Almacenar este nombre de función dentro de la variable es una diferencia obvia entre la declaración de función anterior y esta expresión de función. Otra diferencia es algo llamado levantamiento. El levantamiento es algo que cubriremos más adelante con más detalle. Pero por ahora, se puede pensar en esto como podemos llamar a una función antes de crearla realmente. Se comporta como nuestra función se declara en la parte superior del archivo y siempre está disponible para su uso. Lo que vamos a hacer es cortar ahora este registro de consola y mover esto hasta la parte superior del archivo, o simplemente en cualquier lugar por encima de la función está realmente bien. Lo que estamos haciendo aquí es que estamos llamando a nuestra función antes de crearla realmente. Los programas JavaScript se leen de arriba a abajo. Posiblemente llamemos a una función, antes incluso de que sepamos que la función existe. ¿Crees que esto funcionará? Bueno, digamos esto y probemos esto dentro de la consola. Refrescar. Ahora vemos un error dentro de aquí. No podemos acceder a CheckAlergias antes de su inicialización. Esto significa que para una expresión de función que es el nuevo tipo que hemos creado aquí, tenemos que llamarlas después de que hayan sido creadas dentro del programa. Efectivamente soplar. Pero, ¿qué pasa con esta declaración de función original? Bueno, probemos esto. Si descomentamos la original, comenta la expresión. Ahora este es el mismo nombre de función, así que ahora estamos llamando a esto antes de que se cree. Podemos ver qué sucede dentro del navegador. Refresca, no vemos ningún problema. Nuestra función ahora funcionará perfectamente bien. Esta es otra diferencia entre los dos estilos de función. Esta declaración de función se puede llamar en cualquier lugar dentro de nuestro programa incluso antes de que realmente la hayamos creado. El motivo es que la declaración de función original está disponible en cualquier lugar, es porque está en el ámbito global. Al igual que miramos en el video anterior, podemos acceder a esto a través de la ventana. ¿Ves esto? Lo que vamos a hacer es que queremos que ambas funciones estén ahora activas. No hay confusión. Cambiaremos esto para que sea CheckAlergias 2. Podemos comentar un registro de consola. Esto no se ejecuta dentro del navegador. Ahora tendremos ambas funciones ahora activas. Vayamos a la consola. De lo que vamos a hacer dentro de aquí, refrescaremos la limpieza y luego accederemos a los objetos de ventana. Recuerda, esto accederá a toda la ventana disponible. Pero si queremos, también podemos usar la notación de puntos. Reduzca esto a una propiedad en particular también. Iremos por nuestra primera función que es CheckAlergias. Golpea “Enter”, y aquí vemos una referencia a nuestra función CheckAlergias. No obstante, si lo hacemos de nuevo, accede a la ventana, y entonces esta vez vamos por CheckAlergias. Número 2, pulsa “Enter” y ahora recuperamos un resultado de indefinido. Esto respalda justo lo que buscamos antes en los ejemplos, la función original, que es check, ahora está disponible en el objeto global, lo que significa que podemos acceder a esto en cualquier parte de nuestro código. No obstante, sin embargo, CheckAlergias 2, que fue la segunda, que es la expresión de función. Esto no está disponible en el ámbito global. Es por ello que tenemos que llamarlo después de haber creado la función. Esto puede ser una consideración importante porque no siempre queremos producir un alcance global, a menos que sea necesario. Un ejemplo de esto puede ser una función de devolución de llamada. Una devolución de llamada es una función más dos, otra función, como miramos antes con nuestros métodos de matriz. Echemos un vistazo a otro ejemplo. Voy a comentar estas dos funciones aquí. Entonces voy a crear una nueva función. Esta función sólo se va a llamar a TouPper. Esto va a convertir cualquier cadena pasada para que sea mayúscula. Tenemos que pasar en una cadena, y llamaré a este valor. Entonces esto va a devolver la nueva cadena. Lo que necesitamos hacer dentro de aquí, es acceder al valor. Entonces podemos llamar a un método de cadena llamado ToupperCase. Esto transformará una cadena en minúscula para que sea mayúscula. Esto será enviado de vuelta desde esta función. Entonces, para comprobar si está funcionando vamos a hacer un registro de consola, llamar a nuestra función, entonces podemos pasar cualquier cadena dentro de aquí la cual queremos convertir. Probemos esto con la cuerda de harina. Actualiza el navegador y esto se está transformando para que sea mayúscula. Nada que no hayamos visto antes. Acabamos de crear una función para transformar el texto. También podemos ver dentro del objeto ventana, que podemos acceder a nuestra función dentro de aquí. Ya que esto es tener acceso a nuestra función, sabemos, igual que estamos viendo con esta de aquí, que este estilo de función está disponible en el objeto global. Este estilo puede estar perfectamente bien si quisiéramos usarlo en múltiples partes de nuestra aplicación. volveremos a referir a algo así como los métodos de matriz que mencionamos antes. No siempre necesitamos que esta función esté disponible a nivel mundial. Por ejemplo, si llamamos a una de las matrices que tenemos en la parte superior, como los panes, y entonces podemos llamar a mapa para recorrer cada uno de estos valores. Entonces en cada uno de estos valores podemos llamar a la función TouPper. Para ver esto, pasaremos esto a nuestro registro de consola. Guarda esto, y ahora si actualizamos el navegador, vemos que cada uno de estos valores se ha transformado para ser mayúscula. Para un ejemplo como este, no necesitamos que esta función sea global y simplemente queremos pasarla a un método como el mapa. Este podría ahora ser un buen caso de uso para transformar esta función para ser una expresión de función. Para recapitular, se construye una declaración de función usando la palabra clave function, un nombre de función con parámetros opcionales, y todo el código dentro de las llaves. La expresión de función que acabamos de ver se almacena en una variable. También podemos tener un nombre de función opcional también. Esta es la diferencia entre estos dos tipos de funciones. Si todo esto es nuevo para ti no te preocupes. No hace falta recordar por ahora todos estos nombres diferentes. Solo quiero hacerte consciente de que hay diferentes estilos de funciones disponibles, porque es diferentes estilos de funciones disponibles, posible que necesites usarlos algún día, o puede que también los veas en otros ejemplos. 30. Expresiones de funciones invocadas inmediatamente: El título del video anterior se denominó expresiones de función. Ahora vamos a ver algo llamado expresiones de función invocadas de inmediato. Puede sonar complejo, pero en realidad no es tan malo, solo toma nuestra expresión de función original del video anterior, y podemos ejecutar o invocar esta función de inmediato. Echemos un vistazo a cómo funciona esto dentro de estos archivos de datos. Si echamos un vistazo dentro de esta sección de script, ten una función sencilla la cual crea una alerta de navegador. Sé que esta es una declaración de función ya que aparece por sí misma, y no está almacenada dentro de una variable. Pero lo que podemos hacer es quitarle el nombre. Nuevamente, esto es opcional y lo veremos muy pronto. Eliminar el nombre de la función. Ahora como esta función no tiene nombres realmente llamarlo por, ahora podemos eliminar la llamada a función en la parte inferior. Esta falta de nombre significa que se le llama una función anónima. ¿ Cómo llamamos a una función sin nombre? Bueno, aquí es donde entran en juego nuestras expresiones de función invocadas de inmediato . Primero necesitamos comenzar por envolver nuestra función completa dentro de corchetes. Si cortamos esto, abrimos los corchetes y luego pegamos esto, esto contiene toda nuestra función entre estos corchetes y entonces realmente se ejecuta el código. Después colocamos en un nuevo conjunto de corchetes justo después, igual que haríamos con una llamada de función regular. Ahora si guardamos esto y actualizamos el navegador, ahora vemos nuestra alerta dentro de aquí. Esto significa que nuestra función se está ejecutando. Podemos ver el código contenido en su interior. Esto solo significa que hemos creado una función y ejecutamos el código de función tan pronto como se carga la página. Si no rodeáramos este código de función con estos corchetes originales justo aquí, causaría un error ya JavaScript pensaría que se trataba una función regular la cual requeriría un nombre. Pero el uso de estos corchetes circundantes también puede causar un problema. Si tenemos algún código arriba, por ejemplo, como una variable, esto puede causar un problema. Crea cualquier variable justo arriba, quiero ir por el lenguaje, y establecer esto igual a JavaScript. Observe aquí no estoy agregando un punto y coma al final, y si guardamos este archivo, el editor de texto ha formateado automáticamente estas fotos. Podemos ver de inmediato que no es así como se pretendía nuestro código. Vayamos al navegador y veamos qué efecto tiene esto si actualizamos. Ahí vamos, tendremos un error. JavaScript no es una función. Ahora si volvemos al editor de textos y examinamos más de cerca nuestro código, este error es comprensible. Donde hemos presentado es el código es bastante similar a la expresión de función que miraba en el video anterior, piensa. Tenemos un nombre de función de JavaScript. Entonces inmediatamente después tenemos el contenido dentro de estos corchetes, así como esto. Recuerda antes miramos cómo no siempre hay que usar punto y coma. Bueno, este es uno de esos casos usados cuando sí necesitamos agregarlos. Si ahora agregamos un punto y coma después de nuestro nombre de variable, esto ahora separará esto de nuestra función. Probamos esto en el navegador, actualizamos, y nuevamente, nuestra función está funcionando correctamente. Alternativamente, es posible que también veas que algunos desarrolladores agregan un punto y coma al comienzo de la expresión de función. Esto es para evitar cualquier problema si la línea anterior no termina en punto y coma. También es especialmente útil si estamos importando el contenido de otro archivo. No siempre sabemos si ese código va a terminar en punto y coma, o si va a causar un error. Es así como los usamos. Pero, ¿por qué necesitamos usar una expresión de función invocada inmediatamente? Bueno, aparte de lo obvio que puede que necesitemos ejecutar algún código inmediatamente sin llamar a la función. Dado que esta es una expresión de función, tampoco contamina el objeto global. Como miramos en el video anterior, cuando creamos una expresión de función, no siempre está disponible para su uso en cualquier parte de nuestro archivo. Primero debemos crear la función antes de poder utilizarla realmente. Además, esta es otra buena manera de mantener también variables del objeto global, si sólo pretendemos usarlas dentro de una función en particular. Por ejemplo, si esta variable solo se iba a usar dentro de esta función, no necesitamos agregar esto al objeto global, al igual que lo estamos haciendo ahora. Podemos ver esto si cambiamos nuestra alerta, y registraremos el valor del idioma. Entonces fuera de su función, también podemos registrar esto en la consola. Guardar y refrescar. Vemos nuestras alertas, y también en la consola vemos nuestro registro de consola. Esta variable es accesible tanto desde dentro como fuera de la función. Pero como se mencionó antes, si no quisiéramos que esta variable estuviera disponible globalmente, podríamos mover esto hacia abajo a nuestra función. Esto significa que este valioso ahora sólo es accesible desde el interior de esta función. Pasado al navegador, refresca, vemos que la alerta se ejecutará y esto tiene acceso a nuestra variable de idioma. No obstante, aunque dentro de la consola cuando intentamos registrar el valor del lenguaje, esto ahora no es accesible desde fuera de la función. Esto significa que cualquier variable que cree dentro de la función también está aislada. Esto es realmente útil si queremos restringir una pieza de datos para que solo sea accesible desde una función en particular. Pero a pesar de que esta variable sólo está disponible dentro de nuestra función, todavía podemos devolver un valor. En lugar de la alerta, podemos devolver el lenguaje, e instalar el valor devuelto de mal funcionamiento dentro de una variable. Inicie sesión en la consola, guarde y actualice en la consola. Ahora recuperamos el valor devuelto de nuestra variable. 31. ¿Anónimos o con nombre?: En el pasado par de videos, hemos hablado un poco de expresiones de función. Cuando hemos creado estos, hemos dejado fuera el nombre de la función y por lo tanto nos referimos a estas funciones como anónimas. Pero se proporciona ningún nombre de función el mejor enfoque para crear funciones. Bueno, crear función sin nombre es sin duda más corto, implica escribir menos código. También podemos ejecutar estas funciones cuando queramos. ¿ Por qué incluso agregamos un nombre? Bueno, echemos un vistazo a los archivos de inicio que es menor al número 4 para nombres anónimos o dentro de la sección de funciones. Si nos desplazamos hacia abajo hasta la sección de script, tenemos dos matrices diferentes. También tenemos un ejemplo de una función con nombre que es una declaración de función regular la cual hemos mirado. Esto implica crear una función, luego llamamos a esta función siempre que queramos por este nombre. Entonces soplar un ejemplo anónimo, y a este ejemplo se le conoce como anónimo. Ya que no pasamos la función y nombre directamente. En cambio, creamos sin nombre así, y luego lo almacenamos dentro de una variable. También tenemos algunos ejemplos, sopla esto volveremos a esto más adelante. Pero lo que vamos a hacer es abrir este archivo dentro de la consola, clic derecho, Inspeccionar y luego en la pestaña Consola. Cuando tenemos acceso a una función, las funciones tienen una propiedad que se llama nombre, y esta es una propiedad de sólo lectura. Podemos usar esto primero todo accediendo a nombre de función que es número de ingredientes. Entonces podemos acceder al nombre. Hit Enter es bastante simple y no es de esperar, pedimos el nombre y recuperamos el nombre de la función. Pero qué tal en cambio, si eliminamos todo esto y llamamos a nuestra segunda función la cual fue verificada apagones. Como sabemos, esto no es directamente un nombre de función porque no lo hemos pasado dentro de aquí. Pero todo lo que estamos haciendo aquí es almacenar esto dentro de una variable. ¿ Qué crees que recuperaremos? Bueno, probemos esto, traiga esto. Entonces también llamó a la propiedad nombre. También podemos ver para este ejemplo, nos devuelven el nombre de cheque Alergias. Esto puede ir en contra de lo que esperarías porque esto no tiene nombre de función. El motivo por el que esto sucede es por algo llamado nombre de función inferido. Dado que la función se almacena dentro de esta variable, JavaScript básicamente ha adivinado que este es un nombre que desea utilizar para nuestra función. A medida que empezamos a entender las funciones y la forma en que podemos referirnos a ellas puede tomar muchas formas. Este nombre inferido no siempre es confiable en algunas situaciones. Hay ciertos tiempos o casos de borde en los que no se infiere el nombre. Otras razones por las que puede querer agregar un nombre específico a la función es para depurar áreas dentro de la consola la serie. Pero vamos a crear un error dentro de esta función. Crea un error aquí con incluye y luego solo sopla esto, crea un registro de consola que ha ido a registrar el valor de las alergias de cheques. Entonces también necesitamos pasar en la receta y los ingredientes. Al igual que los ejemplos anteriores, esto va a referirse a nuestras dos matrices en la parte superior. Para que podamos acceder a cualquiera de estos. Si ahora decimos esto y vemos qué pasa en la consola, podemos ver directamente si las Herramientas para desarrolladores de Chrome ha detectado un error y tomar notas directamente en la pestaña Fuentes. Esto tiene mucha información y podemos abrir esto para expandirlo. Señala muchas partes diferentes de nuestro código. Pero una de las cosas a tener cuidado es algo llamado esta pila de llamadas. Esta pila de llamadas es una forma para el navegador que está ejecutando el JavaScript realice un seguimiento de las funciones que se habían llamado y también ordenan hacerlo. Está apuntando aquí a la función de cheques de alergias permite saber exactamente dónde radica el tema. Pero cuando lo pensamos de una manera ligeramente diferente, chequear las alergias que tenemos aquí, se pretendía almacenar el valor de retorno de estos mil millones. Check Alergias nunca fue pensado en ser un nombre de función. Sólo se pretendía alguna vez estar disponible el cual tiene un valor verdadero o falso. Esto puede empezar a confundir las cosas sobre todo en un proyecto más grande. De lo que podemos hacer en su lugar, podemos crear esta constante para ser un nombre más descriptivo. Diremos que incluye ingredientes malos. Entonces este siempre va a ser el valor verdadero o falso y en su lugar, podemos pasar un nombre de función igual de normal. Esto divide nuestras dos secciones. Ahora tenemos una referencia de función que siempre apuntará a todo este código justo aquí. Entonces tenemos un valor verdadero o falso el cual originalmente fue pensado como nuestra variable. Ahora hemos cambiado este nombre de variable. También necesitamos copiar esto y cambiar el nombre dentro de nuestra consola Log. Si guardamos esto, y luego actualizamos, de nuevo hemos llevado directamente a la pestaña Fuentes porque aún tenemos este error. Pero ahora, si echamos un vistazo a la pila de llamadas, comprueba Alergias ahora apunta al nombre de la función en lugar de a la variable. Esta no es ninguna regla dura y rápida. No tenemos que añadir un nombre de función como este. Si es posible que desee hacer esto si desea alguna separación clara entre la referencia de función y nuestro nombre de variable. Ahora vamos a desplazarnos hacia abajo a nuestro segundo ejemplo dentro de los comentarios. Si descomentamos toda esta sección, este es el mismo ejemplo que usamos en el video anterior para ver los métodos de array. Tenemos todos los blogposts, que es objetos re-contenidos. Entonces debajo de esto lo llamamos dos métodos separados. Tenemos la función de mapa, que va a recorrer todas las publicaciones, transformar el título para que sea mayúscula, y luego devolver el nuevo valor, cadena en la función de índice definida final, que es va a devolver un número de índice si se encuentra una coincidencia para este título en mayúsculas. Aquí está pasando un poco bastante. Esta sección contiene dos funciones anónimas. Si hubo un error dentro de aquí, la depuración puede comenzar, llegar a ser un poco difícil, sobre todo si esta sección era aún más larga. Justo antes de echar un vistazo a esto, voy a comentar el registro de la consola desde arriba y también eliminar el error. Esto, ahora tenemos nuestro registro de consola única, que es get index, refresh. Al igual que con todos fueron llevados directamente a la pestaña Fuentes porque tenemos un problema. Podemos ver hacia abajo en la pila de llamadas que el nombre de la función es anónimo. Aquí es donde radica el tema. Dado que ambos nombres de funciones son anónimos, no sabemos exactamente cuál de estas funciones estaría causando el problema. Por supuesto que si miramos alrededor de todo el resto de las secciones, podemos conseguir algunas pistas adicionales de dónde radica el error en los punteros y no siempre obvio. Sería bueno ver de inmediato qué función está causando el problema. El tema radica aquí en la primera función dentro del mapa. El problema es a mayúsculas necesita ser una U. mayúscula Si apuntas exactamente a esta función dentro de las herramientas de desarrollador. Podemos agregar un nombre a esta función. En primer lugar, llamamos a este transformado a superior. Entonces un nombre descriptivo para esta función anónima. Vayamos por obtener Índice del título. Ahora si volvemos a volver a las herramientas de desarrollador vemos un error. Pero ahora de inmediato podemos ver que tenemos una pista a qué función está causando el problema. Podemos reducir esto a este apartado aquí. Es como la etiqueta de ARN a nuestra función para ayudar a identificarlo. Vamos a arreglar esto, cambia ahí mayúscula U. Si no ves ningún error dentro de la consola y en su lugar vemos este valor devuelto de dos, que es el número de índice que coincide con esta sección justo aquí. Al igual que con muchas cosas, la elección de las funciones de nomenclatura las están dejando como anónimas es completamente tu elección. A menudo no es un problema dejar el nombre apagado y reducir ligeramente la cantidad de código que escribimos. Pero si prefieres ser más descriptivo y quieres algunos punteros extra cuando de nuevo profundo, puedes agregarlos a tus funciones para que sean más descriptivos. 32. ¿Una función o un método?: JavaScript tiene mucha terminología a la que puede tardar un tiempo en acostumbrarse, como las expresiones de función y las declaraciones de funciones, que hemos mirado durante esta sección. Algo más que usamos bastante son las palabras de función y también método. Pueden parecer iguales y prácticamente lo son, pero hay una diferencia clave. Sobre los archivos de inicio, que es una función o un método. Salta hacia abajo en la sección Script. Todo esto es familiar de las secciones anteriores, tenemos nuestras dos matrices. Ahora tenemos nuestra función de comprobar si ingrediente está incluido en alguno de estos. Bueno, vamos a crear también una nueva función y ésta sólo va a comprobar cuántos ingredientes tiene una receta en particular. También tendremos que pasar en una receta. Entonces dentro, todo lo que vamos a hacer es devolver un valor que es la longitud de la receta. Hemos mirado anteriormente esta propiedad de longitud, esto nos dirá cuántos elementos se almacenan dentro de una matriz. Podemos probar este golpe con un log de consola, pasando el número de ingredientes, y luego cualquiera de nuestras matrices. Guarda esto y abre una preconsola. Ahora podemos ver que la matriz de pan tiene cuatro valores diferentes. Pero digamos que estábamos creando aún más funciones relacionadas con la misma matriz. Es posible que tengas muchas más funciones para hacer montones de cheques diferentes en nuestras recetas. Si todas estas funciones estuvieran relacionadas, sería bueno agrupar todas estas funciones juntas. ¿ Cómo crees que agrupamos muchos valores relacionados? Bueno, para esto, usamos un objeto. Hemos mirado objetos hasta ahora. Un objeto que hemos mirado ha sido algo así, hemos tenido un usuario, mueve que esto igual a nuestras llaves. Pero estoy pasando las propiedades que son una combinación de claves y valores y cada una está separada por una coma. Objeto no solo se utilizan para almacenar valores primitivos simples como nuestras cadenas aquí. También pueden almacenar sobre tipos de objetos también. Podemos colocar en sobre objetos, podemos colocar en matrices y también nuestras funciones. Ya que todas estas están relacionadas con nuestras recetas, vamos a nombrar a este objeto, “checkrecetas”. Dado que actualmente tenemos dos funciones, vamos a colocar en ella dos propiedades. El primero va a ser chequear alergias, y el segundo va a ser número de ingredientes. También necesitamos pasar un valor a estas dos propiedades. De esto, podemos cortar y pegar nuestras funciones también, comprobar alergias como en el justo después de la primera línea. Al igual que con todas las demás propiedades, entonces necesitamos separar estas con una coma. Lo mismo para nuestra segunda función, que es la cantidad de ingredientes. Ponga esto en lugares justo después de nuestro nombre. Algo más que también podemos hacer, es transformar estos para que sean anónimos. Dado que tenemos un nombre de propiedad de “checkalergías” y “numberofingredients”, tenemos una forma de acceder a estas funciones, por lo que podemos eliminar los nombres de las funciones en ambas. Ahora como estas dos funciones se colocan en un objeto, ambas ahora se consideran métodos y ahora cualquiera de estos métodos se puede llamar desde el nombre del objeto, que es “checkrecetas”. De hecho, esto solo debería ser una R. mayúscula Así que ahora, si bajamos a nuestra base de registro de consola en el nombre del objeto, que es “CheckRecises”. Usando la notación de puntos, podemos entonces llamar a cualquiera de estas propiedades, así que solo revisa las alergias o la cantidad de ingredientes y también podemos ver esto con el autocompletar dentro del editor. Vamos por una serie de ingredientes y al igual que arriba, también necesitamos pasar en esta receta, por lo que los corchetes o los paréntesis. Vamos por el pan y luego desplázate hacia arriba también quitaremos este registro de consola. No hay problema es solo ahí. Guarda esto y recarga el navegador, y todavía nos devuelven el valor antes. Pero esta vez, se ha llamado como nuestro método desde el objeto en lugar de la función independiente original. De hecho, así funcionan todos los métodos en nuestros tipos de objetos. Si echamos un vistazo justo arriba, hemos creado nuestras dos matrices justo aquí, y como ya sabemos, matrices son un tipo de objeto especial. Dado que ambos son un objeto, por eso también tendremos acceso a estos métodos de matriz. Si entramos a la consola y tecleamos brownies y luego dot, igual que con cualquier otro objeto, podemos usar esta notación de puntos para acceder a cualquiera de las propiedades o los métodos que están disponibles en este objeto. Aquí es donde todos estos vienen de detrás de las escenas, es exactamente lo mismo, nuestra matriz es un objeto igual a este. Después accedemos a propiedades o métodos individuales que vemos dentro del navegador. Volver a este objeto, pesar de que hemos tenido dos funciones o métodos separados pasados dentro de aquí, también se puede mezclar con cualquiera de los tipos de datos también. También podemos mezclar en primitivas como el máximo número de recetas, y podemos almacenar esto como un simple valor primitivo, y esta técnica es una gran manera de agrupar mucha información relacionada y funcionalidad. Al igual que con los métodos, también podemos acceder a recetas max con esta notación de puntos. Dado que esta no se relaciona con una función, no necesitamos los corchetes, simplemente lo llamaremos por el nombre de la propiedad. Refresca y ahora vemos el valor de 1,000. Ahora sabemos que una función colocada como propiedad en un objeto se considera un método en JavaScript. A veces, sin embargo, necesitamos que estos métodos también se refieran a otras propiedades en los mismos objetos. Por ejemplo, también podemos tener una propiedad llamada “CurrEntreCipes” y este es el número total de recetas que actualmente se encuentra en nuestro sitio. Entonces puede que también deseemos un método que acceda tanto a estas propiedades como verifique que no hemos superado el número máximo de recetas antes de que se pueda subir una nueva. Para ello añadir cualquier propiedad, en la parte inferior de este objeto dirá “recetesLeft”, y como suena calcularemos el número de recetas que aún nos quedan a nuestro sitio. Esto es relativamente sencillo, todo lo que necesitamos hacer es devolver el valor de nuestras recetas máximas. Comida para llevar las recetas de columna. Ahora, podemos probar esto de nuevo en el navegador. Vamos a registrar esto pero esta vez registraremos el valor de retorno de las recetas que nos quedan. Guardar y refrescar. Hemos llevado directamente a la pestaña de fuentes porque esto luego activará un error. Vemos que las recetas máximas no están definidas y en la pila de llamadas, podemos ver que esto ha sido causado por “recetesLeft”. El motivo por el que esto sucede, puede que no sea inmediatamente obvio, pero esto se debe a que para acceder a otras propiedades en nuestro objeto, como estas dos de aquí, también necesitamos utilizar esta palabra clave por lo que en esto ante cada uno de nuestros nombres de propiedad. Ahora dentro del navegador, si nos dirigimos a la consola, esto ahora todo funciona completamente bien. Obviamente, quizá quieras saber a qué apunta el valor de esto. Bueno, pasemos a nuestro objeto y echemos un vistazo a esta función basada en un registro de consola y podemos generar el valor de esto, guardar y refrescar. Podemos ver estos puntos a nuestro objeto actual y tiene todas las propiedades disponibles que acabamos de crear dentro de aquí. Esta palabra clave puede ser algo realmente complejo de entender pero en este contexto actual, esta palabra clave apuntará a cualquiera de las propiedades disponibles en este objeto actual. Habrá más información al respecto medida que avancemos por el curso. A continuación, vamos a echar un vistazo a la función de flecha, que miramos brevemente con anterioridad, y cómo también actúa de manera diferente al interior de este objeto. 33. Funciones de flecha: En ES2015, se nos dio una nueva forma opcional de crear expresiones de función. Estas se denominan funciones de flecha. Estas fueron una forma más corta de escribir expresiones de función. Pero no es solo esta sintaxis más corta que es diferente, también se comportan de manera diferente a las funciones regulares también. En la parte superior de los archivos de inicio, dirígete al archivo de funciones de flecha y en la parte superior aquí, tenemos una expresión de función regular. Esta es una función que es anónima. Entonces almacenamos esto dentro de una variable. Lo que ahora vamos a hacer es transformar esto en una función de flecha. Los miramos brevemente antes y la forma en que tenemos que hacer esto es primero, eliminar la tecla de función. Entonces después de los corchetes agregamos en nuestra flecha, y está consistido los iguales y el mayor que símbolo. Llame a esto y ejecute la alerta cuando sea llamada por su nombre de variable, seguido de los corchetes de función, guardar y refrescar. Ahora la función ahora se ejecutará correctamente. Al principio de este video, empezamos diciendo cómo las funciones de flecha eran una sintaxis más corta, pero esto no se ve muy diferente por el momento. Esto todavía se clasifica como una función de flecha, pero también podemos hacerlo aún más corto. Si sólo tenemos una sola línea de código anidada en el interior, podemos quitar estas llaves y podemos llevarla a la misma línea. Actualiza el navegador y esto aún funciona exactamente igual que antes. Si solo tienes una sola línea como esta, tampoco necesitamos agregar en la palabra clave return ya que esto se hace automáticamente. Si tuviéramos múltiples líneas de código sin embargo, tendríamos que devolver algo de la función y también envolver las múltiples líneas dentro de las llaves. Las funciones de flecha también pueden tomar parámetros demasiado al igual que una función regular. Podemos pasar tantos de estos como queramos separar por una coma. Si solo tuviéramos un solo parámetro así, también podemos quitar los corchetes circundantes. Así es como se ve una función de flecha. Vamos a refactorizar uno de nuestros métodos del video anterior. Podemos eliminar estas dos líneas de código, y luego abajo esto tendrá el mismo ejemplo que hemos visto en el video anterior. Voy a comentar todo este código para hacerlo activo. Recuerda, anteriormente creamos nuestros objetos de cheque y contenía varias propiedades, igual que nuestras primitivas aquí. También ya que movimos las funciones independientes para ser parte de este objeto, estos ahora se conocen como métodos. Lo que vamos a hacer dentro de este objeto es transformar este método recetesLeft y voy a hacer uso de una función de flecha. Al igual que antes, podemos mover la palabra clave function ya que esta es solo una sola línea de código. También podemos quitar las llaves, llevar esto a la misma línea, llevar esto a la misma línea, y recordar que las líneas individuales se devuelven automáticamente de nuevo sigue. También necesitamos la flecha. Intentemos iniciar sesión en la consola y ver qué sucede. Todavía tenemos el registro de consola de recetesLeft. Actualiza el navegador y obtenemos un token inesperado, que es el punto y coma. Este es sólo éste de aquí. Si eliminamos esto y actualizamos, vemos el valor de no un número. Obviamente, este método no está funcionando como antes. Esto se debe a la forma en que las funciones de flecha manejan la palabra clave this. Más precisamente, las funciones de flecha no tienen su propio esto, y por eso no vemos el número dentro de la consola. Vea esto también podemos colocar en un registro de consola dentro de este método. Entonces mueva estos a unas líneas separadas, registre el valor de esto. Entonces como ahora estamos en múltiples líneas, también necesitamos envolverlas en las llaves, asegurándonos de que también se quite esta coma. Probemos esto. Refresca y ahora vemos esto apunta al objeto ventana, diferencia del último video, donde el valor de esto se refería al objeto padre que era CheckRecipes. Las funciones de flecha no tienen su propio esto. Esto significa que esto se refiere al objeto global, por lo que a menudo se aconseja no usar una función de flecha al crear métodos como este porque no puede acceder a través de propiedades en este objeto. Aunque al igual que cuando usamos las funciones de flecha en un video anterior, eso puede ser útil para combinar cosas raras como los métodos de matriz debido a la sintaxis más corta. Si echamos un vistazo a un ejemplo de esto, abajo en la parte inferior. Si accedemos a los brownies o mapa, y luego con la sintaxis de la función regular, se vería así. Pasamos en una función. Esta función entonces tomaría cada ingrediente y luego dentro podríamos devolver cualquier cosa que quieras. Vamos por nuestros ingredientes, que se ha transformado en mayúsculas. Esta es una forma de escribir esto con una función regular y de hecho, sigue siendo mi forma preferida de hacer las cosas. No obstante, aunque los equivalentes de la función de flecha irían así, brownies.map, y luego en lugar de escribir la palabra clave function, podemos pasar en una función de flecha, que son los corchetes, la sintaxis de flecha. No necesitamos la palabra clave return ya que todo esto está en su propia línea. Entonces podemos simplemente copiar esto, pegar esto en, y ambos son equivalentes. No podemos ver por qué la versión más corta se usa a menudo con cosas como métodos de matriz y también algunas personas simplemente funciones de flecha derecha por defecto. A veces porque es sólo una sintaxis más nueva. Esto puede estar bien si esta es la sintaxis que preferirías y sí tienen algunos beneficios como acabamos de ver con la forma más corta. Pero recuerda, sólo porque las funciones de flecha son una forma más nueva de hacer las cosas, no significa que siempre debamos usarlas exclusivamente. Notarás que también son anónimos. Lo que significa que no tienen un identificador único sobre ellos. Puede estar disponible el cual les asignamos. Esto puede hacer que la depuración sea un poco más complicada también. Recuerda también que tenemos la diferencia entre la forma en que maneja la palabra clave esta a partir de la declaración de función regular. 34. Valores por defecto de los parámetros y la utilización del resto: Este video va a estar enfocado en parámetros de función y algunos trucos útiles a la hora de usarlos, los cuales fueron puestos a disposición con la introducción de ES 2015. Recuerde que un parámetro es un placeholder para el valor que vamos a estar pasando a una función, y se puede pensar en esto como una variable. En primer lugar, queremos echar un vistazo a los valores de los parámetros por defecto, y para ver esto creará una nueva función que va a tomar en una cantidad de divisa, un símbolo de moneda, y luego devolver una nueva cadena para mostrar el precio de vuelta al usuario. la carpeta de esta lección, que son valores de parámetro por defecto, y usando Rest, tenemos una etiqueta de script vacía abajo en la parte inferior, donde podemos crear nuestra función, que voy a llamar a formato dinero. Esto va a llevar el final, de la cantidad que necesitamos formatear y también la moneda al cuerpo de la función. Esto simplemente va a devolver una nueva cadena. Ya que necesitamos acceder a ambas variables, podemos colocar esto dentro de los backticks y usar el símbolo $ y las llaves para insertar una variable. En primer lugar, la moneda y la cantidad. El string que será devuelto tendrá un aspecto igual a esto. Todo nombre de la función justo debajo del nombre entonces está pasando la cantidad y también la moneda. Vamos por 100 y el símbolo de moneda como una cadena y almacenemos esto dentro de una variable. Así a la consola. Guarda esto y esperaríamos de nuevo el valor de 100 con el símbolo $ justo al frente. También podríamos ir uno más allá cambiando el precio para ser dos decimales. Podemos hacer esto usando un método JavaScript Number llamado toFixed. Justo después de la cantidad podemos pasar en ella aFixed y luego establecer esto como dos decimales . Ahí vamos. ¿ Y si tuviéramos un sitio que solo tuviera una moneda única? Bueno, para esto, en lugar de pasar el segundo valor cada vez, podríamos pasar en su lugar un parámetro predeterminado por lo que hasta nuestros parámetros, podemos establecer esto igual a nuestra cadena predeterminada. Ahora bien podríamos dejar esto fuera o en su lugar, queremos anular esto. Podríamos cambiar esto para que sea un valor diferente, por lo que esto anularía el valor predeterminado así como eso. También si eliminamos esto, entonces volvería a nuestro símbolo $ predeterminado. Esto también funciona exactamente igual si quisieras almacenar nuestro valor predeterminado dentro de una variable. Crea una constante en la parte superior llamada símbolo de moneda y establece esto igual a nuestro valor predeterminado. Las variables también funcionan dentro de aquí podríamos establecer esto igual a nuestra variable nombre de símbolo de moneda. Guarda esto. Refrescar. Ahora vemos el valor predeterminado de nuestro símbolo $, pesar de que no hemos pasado esto como argumento. Por lo que este tipo de enfoque sería realmente útil si quisieras mantener un solo valor central que queríamos utilizar en diferentes áreas de nuestro sitio. A continuación, vamos a echar un vistazo a cómo podemos utilizar el operador Rest. El operador Rest nos da una manera fácil de lidiar con una función la cual va a tener muchos parámetros diferentes. Aquí, sólo tenemos dos, por lo que esto no es demasiado difícil de manejar. Pero imagina si tuviéramos muchos más parámetros que quisiéramos incluir, con esto podemos escribir una nueva función, así que comentemos todo este código existente y luego crearemos una nueva función abajo, que va a ser responsable calcular una edad promedio, lo que la palabra clave de función, el nombre de la edad promedio, y abajo lo llaman por el nombre de la función. También podríamos pasar en muchos números diferentes, que son las edades de todos nuestros diferentes usuarios. Pasando montones de argumentos diferentes. Con todos estos argumentos pasados a la función, no tendría sentido crear un nuevo nombre de parámetro para cada uno de estos valores. En cambio, será útil si solo pudiéramos pasar en un solo valor y para manejar esto, tenemos al operador de descanso. Entonces lo que podemos hacer es usar los tres puntos. Nombre del parámetro de personal y esto es básicamente como una variable con los tres puntos colocados antes de que ahora podamos acceder a nuestras edades dentro de la función. Probemos esto dentro de un registro de consola, actualicemos, y ahora tenemos seis valores almacenados dentro de una matriz. Esto es realmente útil si no queremos crear un nuevo nombre de variable para cada uno de los valores. O si no sabíamos exactamente cuántos valores se iban a pasar a esta función. Volviendo al propósito de nuestra función, que es la edad promedio, ahora podemos usar esta matriz de edades para calcular esto mediante el uso de un método que has mirado en el pasado llamado reducido. Entonces quita este registro de consola, accede a nuestra edad es variable, y luego llama al método reducido. Recuerda en el video anterior que miramos esto, esto toma dos cosas diferentes. Queremos crear esto como una función de flecha. Esto tomará en el total y también el valor actual que es nuestra flecha, que va a sumar ambos valores por lo que la corriente dirá total. Entonces podemos resolver esto dentro de una variable. Esto va a recorrer cada uno de los valores dentro de las edades que son estos justo aquí. Se va a seleccionar el valor actual y luego añadir esto al total anterior. Asegúrese de que todos estos valores se combinen en un solo número. Ahora lo que tenemos que hacer es tomar este total y dividirlo por el número de entradas dentro de la matriz, devolverá esto de vuelta de la función. El total de todos los números sumados divididos por la longitud de la matriz. ¿ Cómo obtenemos la longitud de la matriz? Bueno, lo hacemos con la propiedad de longitud, que en nuestro caso es el valor de seis. Dado que esta función está devolviendo un valor, también podemos almacenar esto dentro de una variable. Llamemos a esto el promedio. Establezca esto igual al valor devuelto y, a continuación, muestre esto dentro de los registros. Guarda esto, refresca, y el promedio de todos nuestros números es 43. Es así como funciona el parámetro Rest seleccionando todos los valores que se le pasan. Pero si no quisiéramos capturar todos estos valores, digamos por ejemplo si queríamos una variable separada para el primer valor, podríamos insertar el primer parámetro así y luego el valor de las edades serían todos los valores restantes desde 45 hasta el final de la matriz. Podrías ir aún más lejos y almacenar múltiples elementos, como el segundo valor, pero siempre recuerda que el parámetro rest debe ser el último, ya que según suena, recoge todo el resto de los valores restantes. Estos tres puntos también pueden parecer familiares desde antes cuando miramos la estructura en matrices. Este ejemplo es lo que miramos antes y este es un ejemplo de usar spread. El descanso y la propagación son muy similares y ambos tienen tres puntos. Spread significa que podemos tomar algo que podamos recorrer, como esta matriz de publicaciones, y podemos sacar valores y difundirlos en otra cosa. Por ejemplo, pueden estar extendiéndose un nuevo objeto o matriz para copiar sobre los valores, esto hace que sea útil para cosas como duplicar matrices o simplemente generalmente agarrar valores y copiarlos. Entonces tenemos el parámetro Rest que acabamos de ver y esto hace que agrupar todos los valores del argumento juntos en un solo valor de matriz sea realmente fácil. Entonces debajo esto tendrá los parámetros predeterminados y este valor predeterminado se crea estableciendo un valor como un número o una cadena. Recuérdalo todo, este es solo el valor predeterminado y si proporcionamos un valor cuando llamamos a una función, éste se usará entonces en su lugar. 35. ¿Qué es el DOM?: Justo antes de saltar a algún código, es realmente importante saber de algo que vamos a ver en esta sección llamada el DOM. El DOM significa, Document Object Model y es una interfaz de programación para nuestras páginas HTML. Esto puede sonar complejo pero no es demasiado confuso una vez saber lo básico. Tomando una versión muy básica y script buck de un documento web, este es el elemento básico que tenemos. Todos los documentos necesitan tener este envoltorio HTML y luego tenemos la sección de cabeza y cuerpo un nivel dentro. Para visualizar cómo se vería esto en el árbol DOM, este ejemplo sería algo así. Por encima de la derecha, el documento es la parte superior del árbol. Este es nuestro documento web o nuestra página web. Entonces debajo de ella, tenemos el envoltorio HTML raíz. Debajo de esto, tenemos la cabeza y las secciones del cuerpo que están ambas al lado de la otra. Así es en realidad como vemos cuando los vemos en nuestro editor de textos. Nuestro DOM está construido de todos estos objetos los cuales espejan nuestra página HTML. Un paso más allá, añadir un elemento de título a la sección de cabeza que siempre hacemos y también un elemento h1 al cuerpo. Estos todos anidados están estructurados exactamente igual que nuestra página web como vemos dentro de nuestro editor de texto. Todos estos objetos en el DOM son nodos de clústeres. El h1 por ejemplo, es un nodo de elemento, un sobre del encabezado, y también el título. Tenemos un nodo de texto, que es el contenido de texto de cada elemento. Básicamente, el texto que va entre las etiquetas de apertura y cierre. Los elementos también pueden tener atributos, como un gráfico h, una clase y un ID. Estos también son nodos. Estos se llaman nodos de atributo, igual que vemos aquí abajo en la parte inferior. Tenemos nodos de elemento, tenemos nodos de texto, y también tenemos nodos de atributo también. Hemos venido este expediente sin saber nada del DOM. Todo esto está sucediendo en segundo plano. ¿ Por qué siquiera debemos importarnos? Bueno, el DOM proporciona una forma para que JavaScript u otros lenguajes se conecten a nuestro HTML. Nos da acceso al árbol de documentos para que podamos hacer cambios en él si queremos. Esto significa que podemos usar JavaScript para crear nuevos elementos HTML. Podemos eliminarlos, podemos cambiar de estilo, podemos agregar o eliminar atributos y básicamente hacer cualquier cosa que queramos con nuestros elementos HTML. A pesar de que escribimos en código JavaScript, utiliza el DOM para acceder a estos elementos HTML. Trabajan juntos para permitirnos hacer esto. Ya hemos analizado brevemente el trabajo con el DOM en nuestros videos anteriores cuando miramos algunos ejemplos como cambiar el texto dentro del navegador. Tendremos mucho más que cubrir en este apartado también. Echemos un vistazo a algún código en el siguiente video. 36. Seleccionar los elementos: Hey, bienvenido de nuevo a esta nueva sección. Para esta sección dirígete a la Sección Número 4 que es eventos y el DOM. Este es el primer video que es Número 1, Seleccionando Elementos. Agarré el camino a este archivo y abriré esto dentro del navegador. Podemos ver dentro del navegador ya tenemos algún código HTML el cual está mostrando una tabla, y esto nos va a dar una referencia para algunas formas diferentes que podemos utilizar para seleccionar cualquiera de nuestros elementos HTML. Obviamente, cuando necesitamos manipular cualquiera de estos HTML usando JavaScript, tenemos múltiples formas que podemos usar para seleccionarlos. En primer lugar, como mirábamos en el pasado, podemos seleccionar un elemento por el Id particular. Este fue un atributo Id, y podemos seleccionarlo por un nombre en particular. Podemos seleccionar por una etiqueta que es el nombre del elemento como Id, un elemento p o la imagen, podemos seleccionar por un nombre de clase y también podemos seleccionar con un selector CSS también. Hay dos formas diferentes que podemos usar para esto. Podemos seleccionar el primer selector de coincidencia o podemos tener retorno de vuelta a nosotros todos los partidos disponibles. Por encima de la derecha, tenemos un conjunto de métodos que nos va a permitir seleccionar cualquiera de nuestros elementos con estos métodos. Hemos usado getElementById brevemente en el pasado. Podemos seleccionar nuestros elementos por nombre de etiqueta y también por el nombre de clase también. Observe que el s está resaltado en ambos métodos ya que devuelve varios elementos. Tenemos QuerySelector que va a seleccionar el primer partido, y QuerySelectorAll que devolverá todos los partidos. Ambos métodos, así como este, funcionan exactamente igual que con nuestro CSS. Por ejemplo, podríamos seleccionarlo por un nombre de elemento, podríamos usar el.select una clase, o también un # también si queremos seleccionar un elemento por un Id en particular con este grupo de métodos que vamos a en este video y en la próxima sección también. Recuerda que un método es igual que una función, pero vive de un objeto. También, el documento es un objetivo. Pasemos a nuestro index.html, desplázate hacia abajo hasta la sección de guiones. Crearemos un console.log y pondré el contenido del documento. Este es un objeto. Vamos a abrir las herramientas de desarrollador en la consola y actualizarnos. Simplemente haz esto un poco más grande. Si abrimos esto, y luego dentro de la consola podemos ver todo el contenido que tienes dentro de nuestra página de índice. Según lo cubierto en el último video, el documento es el nivel superior del árbol DOM. Cubre todo lo que hay dentro de esta página HTML. Estos documentos han sido un objeto también tiene muchas propiedades y métodos disponibles también. Podemos ver esto si tecleamos el documento y luego usamos punto para obtener el auto completo. Esto se remonta a antes cuando miramos tipos de objetos como matrices y notamos que tenían muchas propiedades y métodos incorporados a los que pudimos acceder. Podemos comprobar si este documento tiene alguna imagen. En nuestro caso, no tenemos un por lo que esto devuelve una Colección HTML vacía. También podríamos revisar algunas cosas diferentes como la URL. Hit enter. Esto volverá a la ruta del archivo para estos documentos en particular. Podemos ver el mío está en el escritorio y dentro los modernos archivos de inicio de JavaScript, así como la URL. Vamos a escribir en la cabeza y esto devuelve la sección de cabeza que es todos los datos dentro de esta sección de cabeza. También lo mismo para nuestro cuerpo y como nuestros elementos corporales con todos los contenidos en su interior. El motivo por el que podemos acceder a este documento y a todo el contenido es porque está disponible globalmente en el objeto de ventana. También podríamos acceder a esto a través del objeto ventana también. Abajo a nuestra consola tipo log en la ventana, refrescar, y dentro de la consola, si abrimos esto, este objeto de ventana tiene la propiedad de documento justo aquí donde podemos acceder a todas las mismas propiedades métodos que acabamos de ver. Bueno, lo que nos interesa en este momento son los métodos disponibles para seleccionar los elementos requeridos que son estos sobre la derecha. En primer lugar, para ello, crearemos un nuevo elemento que desea seleccionar. Podemos colocar esto en cualquier parte de nuestro código. Voy a agregar un elemento p justo encima la sección y luego agarrar esto por el Id del texto. Entonces dentro de la sección de guiones justo debajo, podemos agarrar esto seleccionando primero los documentos, y luego podemos acceder al método disponible en el documento que es getElementById. Sabemos hacer esto, pasamos como una cadena el Id que es texto, almacenamos esto dentro de una variable llamemos a este texto. Ahora podemos registrar esto en la consola. Refrescar. Ahí vamos y esto ahora se selecciona nuestro elemento p que acabamos de crear. Esto es bastante sencillo. Es justo así como seleccionamos un elemento en particular. Pero ¿y si tuviéramos dos elementos p? Bueno, para poder agarrar ambos elementos p, tenemos dos opciones. En la segunda fila, tenemos acceso al nombre de la etiqueta. Como se puede ver con el s esto es capaz de sostener múltiples elementos. Esto estará bien de usar. También lo mismo para la última fila, también podríamos usar querySelectorAll donde podríamos seleccionar múltiples coincidencias por el elemento p, y por supuesto, si tuviéramos una clase anexada a ambos elementos, también podríamos usar getElementsByClassName. Pero no tenemos una clase apegada a estos por el momento, así que vamos a hacer uso del nombre de la etiqueta. Bajemos y en lugar de getElementById, y solo para ser getElementsByTagName, y al igual que haríamos con CSS, podemos seleccionarlos por el nombre de etiqueta de p. Guardar y refrescar. Ahora volvemos a volver a como una colección HTML que contiene dos elementos diferentes. Una colección HTML es una colección genérica tipo matriz de elementos y así es como se almacenan nuestros elementos p de retorno. Al igual que con las matrices, también podemos acceder a valores específicos por la posición de índice. Si añadiéramos los corchetes y luego seleccionáramos el índice número 1, esto seleccionaría nuestro segundo elemento p, que es éste justo aquí. Podríamos cambiar esto para que sea índice cero, y esto seleccionaría nuestro primero. Pero tenga en cuenta que ya que se trata una colección HTMLCollection en lugar de una matriz, no tenemos acceso a ninguno de los métodos de matriz. A continuación, podemos seleccionar elementos por el nombre de la clase y para ello, también necesitamos agregar una clase a nuestros elementos. Vamos por nuestro segundo elemento, podemos agregar una clase. Yo quiero ir por text-small. Se quiere seguir una mesa que ya tiene. Éste debería ser bastante sencillo. Si quiero seleccionar un elemento por el nombre de la clase, tenemos getElementsByClassName. El cambio ha terminado, pasando el nombre de la clase que era text-small. Eliminar el número de índice y refrescar. Al igual que antes, también hemos regresado a era HTMLCollection porque esto también podría contener múltiples elementos los cuales todos tienen la misma clase. Lo último que vamos a ver funciona de manera similar. Todo esto hace uso de un selector CSS para seleccionar el primer elemento que se encontrará o una colección de todos los partidos. Empecemos con nuestro primer partido que es QuerySelector. Nuevamente, esto también está disponible directamente en los documentos. De lo que podríamos hacer, al igual que CSS, podríamos hacer uso del nombre de la clase con el punto. Esto devolverá los elementos p que acabamos de seleccionar. También podríamos agarrar un Id o también el nombre de la etiqueta así. Recuerda que QuerySelector seleccionará la primera ocurrencia o la primera coincidencia. Refresca y ahí está nuestro primer elemento justo ahí. Pero si queríamos agarrar todos estos partidos disponibles, necesitamos cambios para ser QuerySelectorAll. Guardar y refrescar. Ahora estamos recuperando una lista de nodos que contiene ahora dos elementos p. A diferencia de antes donde teníamos que volver a la Colección HTML, esta vez recuperamos una lista de nodos y hay algunas diferencias entre una lista de nodos y una Colección HTML. Voy a echar un vistazo a estos en un video posterior. Además, recuerda que aquí por sí mismo, al escribir nuestro JavaScript dentro de aquí, el JavaScript no sabe nada de nuestro modelo HTML. Es acceder al documento y luego a todos los elementos que necesitamos a través de la interfaz DOM. A modo de resumen, podemos seleccionar un elemento de muchas maneras, como este elemento p, que podemos acceder por el Id, el la etiqueta que es el nombre del elemento de p, o incluso el nombre de la clase que es texto verde y los dos últimos se seleccionan en un elemento de la misma manera que esperaríamos dentro de una hoja de estilo. La diferencia es si queremos agarrar el primer partido con QuerySelector o todos los partidos usando QuerySelectorAll. Ahora sabemos seleccionar cualquier elemento HTML que desee. Ahora vamos a pasar al siguiente video donde descubriremos cómo hacer algunos cambios a cualquier elemento existente. 37. Cambiar los valores y los atributos: Sabemos seleccionar un elemento. ¿ Cómo vamos realmente a cambiarlos? Bueno, eso es lo que vamos a echar un vistazo en este video. Te vamos a mostrar cómo podemos cambiar los valores de los elementos y también cómo podemos agregar y eliminar atributos usando JavaScript. Para esta lección, esto es cambiar valores y atributos, así que abre esto, y también dentro del navegador. Para empezar, tenemos este título en la parte superior, el título en los enlaces, y también la imagen colocada justo debajo. Lo que vamos a hacer para esto es en primer lugar, mira cómo podemos cambiar el contenido del texto, y ya lo hemos mirado temprano en el curso, por lo que no deberían vomitar sorpresas. Lo que vamos a hacer es cambiar el título de hamburguesas carnosas para que no sean hamburguesas de carne, y podríamos hacer esto abajo al fondo. En primer lugar, la palabra que quieres cambiar o reemplazar va a ser carnosa. Por lo tanto, recortaremos esto, y luego lo colocamos dentro de un elemento span, podríamos agregar un ID o cualquier forma de agarrar estos elementos que quieras. Para este ejemplo voy a ir por la clase llamada cambiar título, y luego podemos cambiar el contenido de texto dentro del lapso. Para ello, vamos a necesitar hacer uso de JavaScript. Crea una sección de script hacia abajo en la parte inferior, y podemos seleccionar solo esta sección, instalar esta dentro de una constante llamada el. Esto suele ser para elementos, y entonces lo que tenemos que hacer es agarrar el elemento por el nombre de la clase usando el QuerySelector. Ya que es clase fácil, usamos el punto y el nombre de la clase se cambió título. Como sabemos, esta es nuestra forma de agarrar este elemento. Para empezar a hacer cambios en estos elementos, como con la mayoría de las cosas en JavaScript, todo comienza con un objeto padre del que vamos a heredar ciertas cosas. Si hacemos un console.log, justo debajo y registrar el valor de nuestros elementos. Guardemos esto y abramos esto dentro de la consola. Refresca, ahora podemos ver tenemos acceso al lapso que acabas de seleccionar. Pero a pesar de que sabemos que esto es un elemento span, si hacemos el typeof y luego lo refrescó una vez más, podemos ver que esto es en realidad un objeto. Devuelve un objeto que es un objeto elemento, y como cualquier otro objeto que buscamos previamente, esto significa que también podemos acceder a ciertos métodos y propiedades disponibles en este objeto. Hay muchas formas de elegir, pero este video va a destapar algunas comunes. Para empezar, podemos obtener el contenido de texto de un elemento mediante el uso de un método llamado innerText. Si hacemos un console.log por el valor de nuestros elements.innerText. Asegúrate de que esto es CamelCase con la T. mayúscula Ahora en la consola, este es el valor de carnoso. Este es el contenido InnerText de entre las etiquetas span, y es este texto el que vemos aquí. InnerText no sólo agarra el contenido x actual, sino que también podemos reemplazarlo, y la forma de hacerlo es acceder a nuestros elementos usando el. Establece el texto interno, y podemos asignar esto para que sea un nuevo valor como no carne y cerrado en la consola y recargar la página. Nuestros cambios ahora surten efecto. Pero ¿qué tal si también quisiéramos agregar algún marcado a este texto? Por ejemplo, si quisiéramos agregar los elementos de marca alrededor de este texto, podríamos agregar la etiqueta de apertura y de cierre. Ahora si guardamos esto y actualizamos, probablemente no sea de extrañar que veamos estas salidas como una cadena. En lugar de otponer esto como una cadena, la forma en que podemos formatear correctamente es en lugar de insertar innertText, podemos cambiar esto para que sea innerHTML y ahora los elementos de marca surtirán efecto en lugar de generar esto como una cadena. Algo a tener en cuenta aunque al insertar HTML como este, siempre hay una pequeña posibilidad de que un usuario pueda introducir algún código peligroso en tu sitio. Es realmente importante no establecer el innerHTML para ningún contenido que el usuario pueda proporcionar, como en un formulario o entrada de texto. Hola HTML sí tiene algunas defensas contra esto. Para estar del lado seguro, se recomienda evitar HTML interno si solo estuvieras insertando un texto sin formato igual que antes. Lo volveremos a revertir para estar en un texto y junto con el TextContent real, también podemos obtener atributos como el ID, como la clase, la href, y también la fuente. También podríamos establecer otros nuevos. Para ver esto saltar a la consola, y luego podemos seleccionar nuestros elementos , que es minúscula. Sabemos para estos elementos tenemos la clase de cambio de título, y si queríamos seleccionar esto usando JavaScript, podemos usar getAttributes. Dentro de los corchetes. Podemos pasar en una cadena con el nombre de los atributos que desee seleccionar. Si vamos por la clase, podemos ver esto devuelto justo debajo, y también si buscamos algún fan, como el ID, actualmente no tenemos un ID en este elemento. Esto por lo tanto, devolvería el valor de null. También podríamos usar esto en nuestro editor de código, y podríamos almacenar los valores dentro de las variables. También podríamos establecer una nueva identificación si quisiéramos. Recortar los elementos y luego podemos establecer directamente el ID de esta propiedad y establecer esta para que sea una nueva cadena como la nueva, decir esto, y abrir la consola. Refresca, y ahora si entramos en la pestaña Elementos, en la sección de cuerpo, el encabezado, abre el título del sitio y podemos ver al lado de una clase, también tenemos esta nueva ID. Si ya tuviéramos un ID en su lugar para estos elementos en particular, anularía el valor original. También tenemos disponibles diversos métodos los cuales funcionarán con atributos también. Tenemos getAttributes, tenemos setAttributes y también removeAttribute. Dentro de la consola, echemos un vistazo a estos. Voy a la consola, también podemos usar el método getAttribute que miramos antes y podemos pasar en el ID para obtener el nuevo valor que acabamos de agregar. Este es el valor de retorno de nuevo, y también podemos almacenar esto dentro de variables en nuestro código, además de obtener estos valores como se acaba de mencionar, también podemos establecer nuevos atributos también. Abre el editor, vamos a añadir una nueva clase la cual va a cambiar el color de nuestro título. Si nos desplazamos hasta el CSS, podemos ver justo aquí ya tenemos en su lugar una clase verde, que va a establecer este color de texto justo aquí. Podemos agregar la clase verde a nuestros elementos. Hagámoslo justo debajo de nuestro DNI. Esto lo hacemos con el.setAttributes. Pero necesitamos pasarle dos valores separados. El primero es el nombre de los atributos. Vamos a añadir una clase, separada por una coma. El segundo valor es el ClassName que es verde. Ahora si guardamos esto y nos dirigimos al navegador, refrescar la clase verde ahora ha aplicado. También si entras en los elementos y luego en nuestra sección, entonces este es el cuerpo, el encabezado y el título. El elemento span ahora tiene esta clase de verde. Si miras de cerca, podemos ver que esta es la única clase que el span ahora tiene. A pesar de que temprano agregamos esta clase de change-title, esto sucede porque cuando usamos atributos set, no sólo agregamos una nueva clase sino que también reemplazamos la existente. Si quisiéramos incluir esto como una clase adicional en lugar de reemplazar, hay otra forma de hacerlo y echaremos un vistazo a esto en tan solo un momento. Pero primero, echemos un vistazo a cómo podemos eliminar un atributo con el método remove attribute. Todo lo que necesitamos hacer dentro de aquí es pasar el nombre del atributo que queremos eliminar. Vayamos por el DNI. Actualiza el navegador y este ID ahora ha sido eliminado de nuestro lapso. Trabajar con atributos dinámicos como este es realmente útil para actualizar cosas como nuestra imagen. Podríamos seleccionar este elemento de imagen justo aquí y si quisiéramos, podríamos cambiar dinámicamente la fuente de la imagen. En primer lugar, si eliminamos la fuente de imagen y luego podemos agregar dinámicamente esto de nuevo en nuestro script. Seleccione la imagen, instale esto dentro de una variable. Usaremos el QuerySelector, pasaremos los elementos de imagen luego en el elemento de imagen, podemos usar el método de atributo set. Esto va a establecer la fuente de la imagen. Al igual que aquí arriba, le estamos pasando dos valores. El primero es el nombre del atributo de la fuente y luego separado por una coma, pasaremos el valor que es nuestro nombre de imagen de burger.jpeg. Podemos duplicar esto y colocar en el texto antiguo que es imagen de hamburguesa al navegador y ahora nuestra imagen está de vuelta en su lugar pero esta vez hemos empezado a usar JavaScript. Personalmente, he usado cosas como esta en el pasado para crear juegos que luego se mostrarán con imágenes aleatorias y también para agregar o eliminar clases para cambiar el aspecto de ciertas cosas también, como el final de un juego, quizá queramos añadir una nueva clase para mostrar u ocultar algunos elementos, como una sección de partituras. También podríamos fijar el texto de verde para el triunfo o usar texto rojo para una derrota. Vuelve al problema de las clases múltiples que teníamos antes. En primer lugar, lo que vamos a hacer es agregar múltiples clases a nuestro título. Lo haremos dentro de la sección span, solo hay que cambiar de título en la clase de azul y también rojo. Entonces también podemos comentar esta línea justo aquí, para que no anule estas tres clases. Estas tres clases ahora se pueden recuperar de múltiples maneras. En primer lugar, tenemos algo llamado ClassName. Si entramos a la consola, podemos ver esto accediendo a nuestros elementos y luego seleccionando ClassName. Es enter, verás el valor de retorno del verde, por lo que esto solo necesita refrescarse. Intentaremos esto una vez más. Ahora recuperamos las tres clases de cambio-título, azul y rojo. Si miras más de cerca el valor de retorno aquí, esto está contenido dentro de las cotizaciones. Sabemos que el ClassName devolverá una cadena. Además de una cadena también tendrá algo llamado ClassList. El ClassList regresará si abrimos esto una colección de valores similar a una matriz. Tenemos índice Número 0, 1, y 2. También podemos seleccionar estos individualmente dentro de estos corchetes. Si queríamos seleccionar azul que es Número 1, podemos seleccionar Número 2 que es rojo y 0 para cambio-título. Es así como podemos recuperar nuestra ClassList pero qué pasa el problema que teníamos antes que era agregar múltiples clases. Bueno, la forma en que podemos hacer esto también es acceder al ClassList lo que nos dará acceso a un add y también a un método remove. Para hacer esto justo debajo de nuestros comentarios, así que en lugar de establecer el atributo así como este que solo anulará el valor existente en su lugar podemos acceder a nuestros elementos, use un ClassList que nos da acceso a un método llamado add. Podemos agregar múltiples clases separadas por una coma. Guarda esto y refresca. Ahora, ahora se ha aplicado la clase verde. Una vez más, si revisamos nuestra ClassList, podemos ver el valor de verde y cian se ha agregado al final de estas clases. El método remove también funciona igual. Accedemos al ClassList o eliminamos. Esta vez como cadena, podemos pasar en cualquiera de nuestras clases que queremos quitar. Vamos por el azul, Guardar y Refrescar. Ahora si accedemos a nuestro elemento o ClassList una vez más, ahora se ha eliminado el valor del azul de este elemento. Si quisiéramos ir aún más allá y en lugar de agregar valores individuales como este, también podríamos establecer una variable que contenga nuestros ClassNames. Eliminemos el valor de verde y cian y luego justo arriba, creamos una constante llamada clases y configuramos estas como una matriz. En primer lugar, verde. Mantendremos esto igual que antes agregando cian y luego podremos usar el operador spread que son los tres puntos para sacar todos los valores de la matriz de clases y colocarlo directamente dentro del método add. Guardar, Refrescar, acceder a nuestra ClassList. Esto aún funciona igual que antes. El resumen, podemos seleccionar cualquier elemento y establecer el valor interior del texto con el método de texto interno. También tenemos HTML interno para agregar el contenido HTML dentro de un elemento. También tenemos la propiedad id la cual se puede utilizar para actualizar o para establecer un nuevo ID. Además, tenemos el control total de nuestros atributos. Podemos obtener cualquier atributo existente como una clase o la fuente. Podemos establecer otros nuevos y también podemos eliminar cualquier atributo también. Por último, de todo, miramos las clases y las diferentes formas que podemos utilizar para añadirlas, actualizarlas y también para eliminarlas. Tenemos el ClassName el cual podemos usar para recuperar de nuevo los valores de nuestras clases como una cadena. También podemos usar esto para agregar una nueva clase también. También contamos con ClassList que es una colección tipo matriz de todos nuestros ClassNames. Esto también expone algunos métodos que podemos usar para agregar y también eliminar algunas clases. Por último, también miramos una forma diferente de incluir clases que era crear una matriz. Entonces podemos hacer uso de estas clases mediante el uso del operador spread. A continuación, también veremos cómo podemos modificar directamente las propiedades CSS usando JavaScript. 38. Cambiar un elemento CSS: Hemos cubierto cómo cambiar el contenido de un elemento como el texto interno, y también cómo agregar, modificar y eliminar atributos. Algo más que también podemos hacer es modificar el estilo de cualquiera de estos elementos. En el proyecto de inicio que es Changing An Elements CSS, vamos a abrir esto dentro del navegador y luego saltar a la consola. Un iniciador es el mismo ejemplo sencillo que miramos en el último video. Tenemos el encabezado y también la imagen con sin duda contenidos de texto del encabezado, la clase verde, y también ciertamente imagen dinámicamente. Para trabajar con los estilos, también podemos acceder a nuestros elementos que es esta la variable. En Consola, podemos acceder a el.style. Se utiliza esta propiedad de estilo para leer valores ya que se pone un poco confuso. Sabemos que tenemos este color verde aplicado desde aquí agregando la clase, y esta clase verde es sin duda color de texto. Podemos esperar esto de vuelta si seleccionamos la propiedad de color, pegamos “Enter”, y en su lugar recuperamos una cadena vacía. El motivo por el cual es porque si seleccionamos la propiedad de color así, sólo devuelve cualquier estilo que agregamos en línea en nuestro HTML. Si golpeo “en línea”, quiero decir si vamos a nuestros elementos, voy a establecer los estilos en línea de la misma manera. Por ejemplo, podemos establecer el color para que sea rojo. Ahora bien, si refrescamos esto, haremos lo mismo estableciendo el color. Este devuelve nuestro valor rojo. Esto sólo leerá estilos en línea e ignorará cualquier otra fuente como cualquiera de los estilos que se colocan en la sección de cabecera o cualquiera que se coloque en una hoja de estilos externa también. Si quería saber el valor real desde cualquier lugar, hay un método disponible en el objeto de ventana global llamado getComputedStyle. Primero seleccionaremos el objeto de ventana y luego getComputedStyle. Queremos conocer el estilo de un elemento en particular, por lo que podemos pasar esta variable en si golpeamos “Enter”. Esto nos devolverá un objeto devuelto con todos los estilos disponibles que se aplican a estos elementos, o si quisiéramos podríamos simplemente recuperar un solo valor como el color. Esto no es algo que yo personalmente uso mucho, pero está disponible si es necesario. Volver a nuestra propiedad de estilo que usamos antes que es éste justo aquí, también podemos usar esto para establecer cualquier estilo también. A modo de ejemplo vamos a convertir algunos de los estilos que ya tienes en la sección de cabecera hacia abajo dentro del guión. Justo debajo de setAttribute selecciona el elemento el.style propiedad, y podemos establecer el color para que sea igual a un nuevo valor. Esta será una cadena, y voy a colocar en un valor RGB de 40, 141, 40. Cierra esto. No tenemos ningún conflicto, también comentaremos esta clase verde, refrescar. Esto cambia para ser un color verde y solo para confirmar, podemos ver aquí no tenemos aplicada la clase verde. También podemos comentar esto solo para asegurarnos de que esto viene de la propiedad de estilo que acabamos de agregar. Vamos un poco más allá. Si volvemos a nuestros estilos en la parte superior, tenemos esta sección de encabezado con cuatro propiedades CSS diferentes. Establecemos en el tipo de pantalla y también algunas propiedades de flex junto al patrón. También podemos comentar esta sección fuera y reemplazarlo por JavaScript. Para ello, primero necesitamos almacenar una referencia a nuestros elementos de cabecera igual que hicimos con esta sección justo aquí. Vamos a sumar esto abajo en la parte inferior y almacenar esto dentro de una constante llamada cabecera, y podemos seleccionar esto de cualquier manera que queramos. Voy a usar el QuerySelector como cualquier nombre de elemento de cabecera, y luego la primera propiedad que necesitamos seleccionar es el tipo de visualización de flex. Simplemente básicamente reemplazamos en todos estos cuatro valores medianteel uso de estos cuatro valores mediante la propiedad estrella en la parte inferior. Accede al encabezado, al estilo. Establezca el tipo de visualización para que sea igual a una cadena de flex. Actualiza el navegador. Podemos ver que el flex box ha entrado en vigor pero aún tenemos algunos problemas de alineación, y esto se puede arreglar agregando el resto de las propiedades CSS. El segundo es header.style, y esta vez necesitamos establecer justify-content. Si echamos un vistazo a cómo lo hicimos en nuestro CSS usamos las minúsculas, y esto fue separado por una coma. No obstante aunque uno de los grandes Gotchas con JavaScript al configurar el CSS, también necesitamos convertir esto para ser CamelCase. No podemos usar justify-content. Vemos de inmediato que el editor de texto ha destacado un problema, y necesitamos convertir esto para ser CamelCase. Esto significa que el contenido comienza con una C, y luego podemos establecer esto en nuestra cadena que es espacio-intermedio. Siguiente ruta; align-items que al igual que justify-content, también necesita ser convertido para ser CamelCase. Esto también se estableció para ser centro, así que configura esto y el valor para esto es centro. Por último, tienes el relleno. El valor de relleno si echamos un vistazo este fue cero y algunos píxeles. Pasa esto en forma de cadena y echa un vistazo a esto en el navegador. Refrescar. Podemos ver nuestro relleno alrededor del exterior del texto, y también la alineación se ha arreglado con estas propiedades de flex. Esta forma de configurar el CSS tiene muchos buenos casos de uso. Como se mencionó en el último video puede ser útil para mostrar y ocultar contenido para el cambio en el diseño, y para cambiar también el tema de nuestra página web. Por ejemplo, podemos tener un fondo que agrega algunas propiedades CSS, un interruptor entre el modo claro y oscuro. Podríamos agregar animaciones CSS. Si el usuario hace clic en algunos de ellos, podríamos alternar diferentes esquemas de color y tantas posibilidades más. También vale la pena saber que agregar estilos como este con JavaScript conlleva la misma prioridad en la cascada que lo hace un estilo en línea. Esta técnica anulará cualquier hoja de estilo externa existente y también cualquier estilo que tengas arriba en la sección Head. Para ver esto podemos descomentar la sección verde. Entonces podemos volver a aplicar esto con nuestro JavaScript eliminando el comentario SetAttribute. También si cambiamos el color para que sea rojo; así tendré en el color RGB, coloque en el valor rojo. Ahora lo que tendremos es una clase de verde que se está aplicando usando SetAtributes que de hecho es rojo, y luego establecemos este color verde justo debajo. Guardar y refrescar. Todavía vemos el texto verde sobre la parte superior, y esto sucede porque esto se ha creado usando una propiedad de estilo JavaScript que conlleva un alto peso al agregar una clase. También podemos confirmar esto si movemos la propiedad estrella para ser justo con este ajuste de clase. Asegúrate de que no tenga nada que ver con el pedido. Guardar y refrescar, y aún podemos ver este color verde se ha aplicado. Si te preguntas cómo agregar múltiples propiedades CSS a la vez, también podemos establecer esto usando un objeto. Esto lo veremos con más detalle en la sección Objeto, pero por ahora así es como podemos recuperar y también establecer el estilo CSS en el uso de JavaScript. Establecemos nuestras propiedades de estilo igual que haríamos en una hoja de estilo regular, pero recuerda cuando una propiedad es múltiples palabras como color de fondo y justify-content también necesitamos convertir esto para ser CamelCase. 39. Crear nuevos elementos: A la par de todas las modificaciones que hemos estado haciendo a los elementos existentes, también podemos crear los nuestros propios también. De hecho, incluso podemos crear secciones o una página web completa con contenido HTML dentro de JavaScript. Como se pueden imaginar, esto abre muchas puertas. Un medio de un contenido podría ser más dinámico y también cambiar incluso después de que la página haya terminado de cargarse. Esto abre tantas posibilidades y algunos ejemplos podrían ser sólo mostrar el contenido al usuario si está conectado. Podríamos obtener a todos los usuarios pedidos previos y crear una lista HTML basada en esta información. El usuario también podría agregar un nuevo elemento de tareas pendientes y la lista es interminable. Sólo se limita a nuestra imaginación o a nuestro uso. Vuelve al editor y dirígete al archivo de creación de nuevos elementos. Abajo en la parte inferior, tenemos algunos comentarios dentro del guión para guiarnos a través de este video. Abre esto en el navegador y antes de que sigamos adelante y creemos un nuevo elemento, quiero mostrarte algo llamado documento escribir. Según suena, esto escribe directamente en el documento que es nuestra página web en el script, accede al documento y un método llamado escritura. Dado que este es un método, abrimos los corchetes así, y luego podemos pasar una cadena que se desea mostrar dentro del documento. Voy a dar a esto un guardar y volver a cargar el navegador. Abajo en la parte inferior podemos ver este texto se ha colocado en la parte inferior, además de insertar una cadena llana de textos como este. También podemos inyectar algún HTML. Podemos rodear esto dentro de algunas etiquetas de elemento, como H1, guardar, y más al navegador y el encabezado de nivel uno más grande ahora ha entrado en vigor. Este método es más útil, cosas como probar en lugar de agregar realmente cualquier contenido o página. Una de las razones de esto es porque si la página ha terminado de cargarse, anulará todo el contenido existente. Podemos ver esto mejor si retrasamos escritura del documento para esperar en la página para terminar primero la carga. Para ello, tenemos disponible un método llamado setTimeout. No te preocupes si no has visto esto antes, es una forma de ejecutar una función después de un cierto retraso de tiempo. Discutiremos esto más adelante en el Curso 2. Lo que vamos a hacer es comment-out la escritura del documento, y luego crear una función SetTimeout, que dentro va a tomar una función. Podemos escribir la función dentro de la cual se va a ejecutar en cualquier estilo que queramos. Podemos usar la sintaxis de la función tradicional o podemos pasar en una función de flecha. Estos eran los corchetes así. Gran flecha, y como solo estamos usando una sola línea, no necesitamos agregar las llaves ni una declaración de retorno. En cambio, podemos colocar dentro un documento escribir igual que arriba. Entonces dentro de aquí, podemos pasar en una cadena o algún contenido HTML. ¿ A dónde se fue mi contenido? Después justo después de escribir el documento, luego coma, y luego este es el segundo argumento para nuestra función SetTimeout. El primero es la función real que queremos ejecutar y luego separarla por esta coma, donde tendremos el retardo de tiempo en milisegundos. Si colocamos esto en como 3,000, esta función se ejecutará después de tres segundos. Probemos esto si ahora guardamos y actualizamos. Actualmente no vemos ningún documento justo en la parte inferior, pero después de tres segundos, nuestra función se ejecutará y reemplazará todo el contenido existente. El hecho de que esto pueda suceder significa que no suele ser una buena manera de agregar contenido a nuestra página web. Para esto, tendremos algunos métodos más dedicados. A menudo, cuando creamos elementos, esto sucede en múltiples partes. Si fuéramos a crear un elemento de texto, por ejemplo, necesitamos hacer esto en múltiples partes. En primer lugar, crearemos un elemento P y lo almacenaremos en una variable, para luego crear el nodo de contenido de texto. Entonces necesitamos fusionar estos dos juntos. En este archivo de inicio HTML, tendremos una nueva sección HTML justo arriba. Contamos con el envoltorio de sección. En el interior, tenemos un rumbo de nivel tres. Tenemos este div con la clase de contenidos, y luego anidados dentro tenemos dos divs anidados más. El primero contiene una imagen, y el segundo contiene un elemento P, y también un botón de compra. Para conseguir mucha práctica creando nuestros elementos, vamos a recrear esta sección completa, pero esta vez usando JavaScript. A modo de guía, utilizaremos los comentarios hacia abajo en la parte inferior y podremos eliminar estos ejemplos de escritura de documentos anteriores. Siguiendo estos comentarios, vamos a empezar por crear el encabezado de sección, que es este H3 sobre la parte superior. Ahora, seguiremos yendo a lo largo del resto del contenido. El modo en que podemos crear un nuevo elemento es accediendo a los documentos. Después usando un método llamado crear elementos. Para sus elementos es bastante simple, todo lo que necesitamos hacer es pasar una cadena con el nombre de la etiqueta de elementos. Por ejemplo, necesitamos crear un encabezado de nivel 3, por lo que hacemos esto y luego podemos almacenar esto dentro de una variable. El mío se va a llamar el encabezamiento de sección y ponerlo igual a nuestro nuevo elemento. Ya que ahora tenemos una referencia variable, podemos ver esto si vamos a la consola. Después acceda a esto por el nombre de la variable. Pasando este encabezamiento de sección, que devuelve un rumbo vacío de nivel 3. Como se mencionó antes, cuando creamos nuevos elementos, esto suele ser en dos partes. Tendremos este elemento que está vacío, y luego también necesitamos crear el contenido de texto dentro. Recuerda, antes cuando miramos el DOM, dijo que todos los objetos dentro de este árbol, actúan como nodos. Este ejemplo muestra un nodo de elemento en forma de nuestro H1, luego un nodo de texto con el texto de hey, tenemos la primera parte que es el nodo elemento, que es nuestro H3. Ahora necesitamos insertar algún contenido de texto. Para ello, tenemos disponible un método llamado CreateTextNode. Este método también está disponible en el objeto documento. Accedemos documento dot CreateTextNode. En su interior pasamos en una cadena de texto que desea insertar. Ya que estamos replicando esta sección, podemos copiar el contenido desde dentro. Coloque esto en. Almacene esto dentro de una variable, digamos el texto del encabezado. Refresca la consola y también deberíamos ver esto si escribimos el texto del encabezado. Tenemos nuestra cadena de texto justo aquí. Esto ahora significa que tenemos dos nodos separados. Tenemos nuestro nodo de elementos y también nuestro nodo de texto. Pero necesitamos una forma de fusionar estos juntos. El modo de hacerlo es acceder primero al nodo padre, que es el encabezado de sección, agarrar esta variable, y luego como este es un elemento, podemos acceder a un método llamado AppendChild. AppendChild aceptará entonces al niño que quiera fusionarse, que es nuestro texto de encabezamiento. Coloque esto en, guarde, y ahora vuelva a la consola, actualice. Vamos a probar el encabezamiento de sección. Ahora, en lugar de simplemente devolver un encabezado vacío de nivel 3, esto ahora también contiene nuestra cadena anidada por dentro. Esto ahora completa nuestro rumbo y el resto va a ser muy similar. Bajaremos a la imagen y al igual que antes, usamos documento dot CreateElements. Esta vez el nombre del tipo es IMG. Almacene esto dentro de una constante llamada ImageElement. Como cabría esperar, una imagen es ligeramente diferente porque no necesitamos insertar ninguno de los nodos de texto dentro. En cambio, lo que tenemos que hacer es establecer los atributos. Tenemos que establecer tanto la fuente como también el texto alt. Justo debajo de esto, accede a nuestros elementos de imagen. Podemos llamar a un método llamado setAttributes, que toma dos cosas. El primero es una cadena del nombre del atributo, que es fuente, y luego el contenido que archivarán ruta de burger.jpg. Duplica esto y el segundo es el texto viejo con la cadena, digamos imagen de hamburguesa. También podemos probar esto en el navegador accediendo a nuestros elementos de imagen. Refresca, accede a los elementos de imagen, y esto luce exactamente lo que necesitamos para nuestros elementos de imagen. Sigamos adelante. El texto info, este es un elemento P. Esta sección justo aquí y mientras estamos aquí arriba, vamos a copiar el texto de Lorem ipsum. Después crearemos el botón y luego trabajaremos afuera en nuestros contenedores. Deberíamos saber qué hacer aquí. Accedemos a los documentos, creamos elemento. El elemento es el elemento P, y luego podemos almacenar esto dentro de una constante llamada InfoSectionElement. El elemento de sección info también va a tomar en un nodo de texto al igual que el encabezado de arriba. Empieza esto dentro de una constante y mantén esto consistente. Diremos InfoSectionText equivale a documentos.CreateTextNode. Veo ahora una cadena que acabamos de copiar de antes, que es el texto de Lorem ipsum. Podemos ver de inmediato que tenemos un error igual a este porque necesitamos asegurarnos de que todo esto esté en la misma línea. Sólo podemos insertar texto multilínea si fuera para reemplazar estas citas simples por los backticks. Al igual que antes, tenemos nuestros dos elementos independientes, y luego necesitamos llamar a AppendChild en el padre para fusionar estos dos juntos. El InfoSectionElements.AppendChild. Dije que te escribiré, que es InfoSectionText. Vamos a probar esto. Copiaremos nuestro contenedor padre, pegaremos esto y actualizaremos el TextContent ahora está anidado dentro. A continuación, tenemos este botón. El botón seguirá un patrón muy similar a esta info, así que copiaremos toda esta sección, pegamos esto en, pero claro, necesitamos cambiar el elemento p para que sea un botón. El texto va a ser, comprar en línea. Todavía necesitamos agregar el elemento hijo al botón, pero sí necesitamos cambiar estos nombres de variables. Diremos el ButtonElement, luego el ButtonText. Abajo en la parte inferior, seleccionaremos nuestros elementos de botón, que son los padres, luego anexaremos el ButtonText. Vamos a probar esto. Refresca, refresca esto y pega esto, y hay un botón. Esto está bien, y si volvemos, ahora hasta nuestra sección HTML, hemos creado todos los elementos de texto. Tenemos el H3, tenemos nuestros elementos de imagen, tenemos nuestro P, y también el botón. Lo último que tenemos que hacer es crear nuestros envoltorios. Tenemos un div aquí, tenemos uno aquí, una envoltura para ambas secciones, y luego finalmente la envoltura de sección externa. Al igual que con todos los demás elementos, vamos a usar CreateElements. Voy a copiar esta línea uno, colocar esto debajo de los envoltorios. Este es el envoltorio de sección, que es el elemento principal rodea todo este contenido. Este fue un elemento de sección. Entonces voy a duplicar esto tres veces más. El resto de estos elementos todos div. Pero sí necesitan tener algunos nombres únicos, por lo que la sección uno va a ser el ContentWrapper. Este es el contenido justo aquí. Nuestros dos últimos es el que rodea la imagen y luego el que rodea el texto y el botón. Entonces llamaremos al número 3, al ImageDivWrapper. Entonces el último estaba rodeando el texto y el botón, así que llamaremos a esto el TextDivWrapper, que luego nos lleva a esta sección que está juntándolo todo. Lo que necesitamos hacer ahora es fusionar básicamente todos los elementos que creaste arriba dentro de todas las envolturas. El modo de hacerlo es también hacer uso del método AppendChild. Empezaremos desde adentro y trabajaremos nuestra salida. En primer lugar, trabajaremos con la sección info e insertaremos los elementos p y también el botón. Hasta el fondo, lo que vamos a hacer es seleccionar nuestro TextDivWrapper todo AppendChild. Entonces tenemos que hacer esto dos veces. El primero que necesitamos pasar en los elementos de la sección info. Elemento de sección info es el texto, que creamos justo aquí. Entonces también necesitamos hacer esto una segunda vez, pero éste va a ser para nuestro botón. El botón es un nombre de variable de ButtonElement. Podemos duplicar esto, insertar nuestros elementos de botón. Antes de ir más lejos, podemos ver esto dentro de la consola si crezcamos nuestro TextDivWrapper. Pega esto en. Como era de esperar, esto contiene un elemento div, para luego abrir esto, tenemos nuestro elemento p y también el botón. Siguiente hacia el ImageDivWrapper. Este acaba de llegar a ser un elemento anidado por dentro. Este es nuestro elemento de imagen. Bastante simple. Hacer algo de espacio. Llame al método AppendChild y luego podremos insertar nuestros elementos de imagen. Ahora vuelve a nuestro HTML. Tenemos esta sección creada aquí y también esta de aquí. Necesitamos subir un nivel más y acceder a nuestro envoltorio de contenido, y luego insertar ambos de estos DivWrappers. Seleccione nuestro envoltorio de contenido, vaya a AppendChild, y luego necesitamos insertar tanto nuestro TextDivWrapper como también la imagen en. Empecemos con el texto, y luego duplicemos esto. Nuevamente, dentro del envoltorio de contenido, vamos a colocar en nuestro ImageDivWrapper. Nuevamente, antes de ir más lejos, agarraremos nuestro ContentWrapper y nos aseguraremos de que ambos divs estén anidados dentro. Pegar. Abre esto. Ahí están nuestros dos divs dentro. El primero es el texto, y el segundo es el elemento de imagen. Bien. Ya casi estamos ahí, ahora si volvemos a subir, veamos qué tenemos que hacer a continuación. Tenemos el encabezado nivel 1 y también este contenido completo div anidado dentro de nuestra sección. Necesitamos agarrar una sección y hacer dos métodos más AppendChild. Esta sección fue la envoltura de sección llamada AppendChild, y el primer hijo que necesitamos insertar es el encabezado de sección. El encabezado de sección recordar era nuestro encabezado de nivel 3, y luego necesitamos duplicar esto, y el segundo elemento es nuestro envoltorio de contenido. Esto no debe ser todo nuestro contenido ahora en su lugar, y lo último que hay que hacer para terminar esta sección es sumar nuestras tres clases. Tenemos la clase de contenido, tenemos la sección de imágenes, y también la sección de información también. Todos estos se agregan a nuestros divs. Entonces bajemos al fondo, y justo debajo agregando clases, la primera es la envoltura de contenido. Podemos agregar la clase con atributos establecidos. Establecer atributo toma en él dos cosas. El primero es el nombre del atributo, que es clase, y luego el nombre de clase del contenido. Duplica esto dos veces más, y la segunda fue para nuestro ImageDivWrapper, esta imagen. Echemos un vistazo. El nombre de clase para nuestra imagen era éste justo aquí. Vuelve hacia abajo. Image_section. El tercero y último es para nuestro envoltorio div de texto. Este TextDivWrapper es la sección info. Agarremos esto y peguemos esto como nuestra cuerda. Bien. Demos a esta una prueba final dentro del navegador y necesitamos probar el envoltorio de sección, que es el envoltorio principal que rodea todo el contenido. Nosotros cargamos, agregamos esto en. Abre esto y lo que voy a hacer es desplazarme hasta nuestro HTML y asegurarme de que esto sea exactamente lo mismo. Para empezar, tenemos el envoltorio de sección, que contiene dos elementos, el encabezado de nivel 3, que está ahí, el div, la clase de contenido, y luego todo el contenido adicional está anidado en su interior. Abre esto. Esto contiene dos divs. El primero tiene la sección de clase de información, y el segundo es la sección de imagen. Tenemos la sección info y luego la imagen. Entonces solo necesitamos asegurarnos de que los nuestros sean al revés. Al que tenemos que hacer es cambiar la posición de estos dos elementos para asegurarnos de que nuestra imagen esté justo por encima de nuestro texto. Ahorra, y probaremos esto una vez más. Abre el envoltorio de sección en el contentdiv. Bien. Ahora estamos de nuevo en el camino. Tenemos la sección de imágenes en la parte superior. Dentro de esto contiene los elementos de la imagen. El apartado info hacia abajo en la parte inferior, esto contiene nuestros elementos p y también nuestro botón. Bien. Todo esto está ahora en su lugar, y lo último que hay que hacer en el siguiente video, es mirar algunas formas que podemos usar para agregar esto a nuestra página principal. 40. Añadir elementos a la página: Este video continúa desde el último video, que está agregando elementos a la página. Anteriormente, replicamos esta sección justo aquí, usando JavaScript creando todos los elementos uno por uno. Después agregamos estos elementos a los diversos contenedores, y cuando lo dejamos con esta referencia de sección completa, su lista de referencia era la envoltura de sección. Esto se almacena dentro de una variable, y podemos ver esto si escribimos esto dentro la consola. Abre esto. Ya tenemos esto agregado a la página que vemos, pero esto está dentro de nuestro HTML. Lo que vamos a hacer, para que no nos confundamos, es comentar esta sección, refrescar y ahora vamos a insertar dinámicamente esto usando JavaScript. Vamos a pensar en lo que realmente queremos hacer aquí, tenemos esta sección de cuerpo sobre la parte superior, y la sección justo aquí que creaste es un hijo directo de este cuerpo, como lo es el encabezado y los elementos de imagen. Lo que tenemos que hacer es empezar primero por seleccionar el cuerpo, rodarlo a nuestro guión, y podemos acceder a esto con document.body. Dos métodos comunes que tiene disponibles para usar es anexar y también anteponer. Antepend agregará el nuevo contenido al principio, y anexar lo agregará hasta el final. Empecemos echando un vistazo al antepend. Este es un método, por lo que abrimos los paréntesis, ahora queremos agregar nuestro envoltorio de sección. Digamos esto y actualicemos el navegador, y esto se agrega al comienzo mismo de la sección de cuerpo. También podemos cambiar esto para que se anexe y esta nueva sección se añadirá directamente al final del cuerpo. Algo más que también podemos hacer con append, en lugar de agregar un solo elemento como este, es agregar múltiples elementos a nuestra página, y también podemos agregar diferentes tipos de contenido también. Por ejemplo, podemos agregar un JavaScript como cadena de textos, que se llama DOMString. Digamos que cualquier texto dentro de aquí, y luego separarlo por una coma, podemos agregar múltiples piezas de información, como múltiples piezas de texto o múltiples elementos, así que también digamos que queríamos agregar un elemento, vamos por nuestro botón, también nuestro ImageElement. Podemos sumar tantos de estos como quisiéramos. Ahora, guarda y refresca esto. Podemos ver nuestro texto, podemos ver nuestro botón, nuestra imagen, y el DOMString final al final. Similar a esto, también tenemos un método llamado AppendChild. Vamos a darle una oportunidad a esto. Ahora, si guardamos y luego actualizamos esto, veremos un error de inmediato dentro de la consola. Vemos este error porque hay algunas diferencias entre cómo append y appendChild maneja inserción de elementos o nodos. AppendChild sólo se puede usar en un solo nodo o en un solo elemento de texto. Si tengo más de uno que agregar, el método append es el camino a seguir. Además, como ves aquí, AppendChild no se puede usar con DOMStrings, por lo que no podemos usarlo para insertar nodos de texto tal como lo hicimos antes. También sólo el método AppendChild nos devuelve un valor de retorno, y este valor de retorno es un nodo recién agregado. Con esto en mente, vuelta a nuestra zona en la que estábamos antes. El motivo por el que tenemos esta área es por dos razones, es porque estamos tratando de agregar algunos DOMStrings, y también el número de elementos que estamos tratando de agregar. Si reducimos esto a un solo elemento, vayamos por el ButtonElement, ahora no deberíamos ver un problema. El siguiente método para cubrir es insertar antes. Insertar antes nos da un poco más de flexibilidad en donde queremos colocar nuestro nuevo nodo, llenarlo y tomemos nuestro encabezado por ejemplo. Para esto, imagínense quisimos colocar una nueva pieza de contenido, que es un nuevo elemento entre el encabezado y el nav, por lo que en esta línea justo aquí, los métodos que hemos cubierto hasta ahora solo colocan elementos en el principio o al final. A medida que suena el método inserto antes, se puede utilizar para insertar nuestro nuevo elemento antes de este nav, eliminemos esto primero y luego bajemos a nuestro script. Primero necesitamos seleccionar al padre. En nuestro caso, el padre es el encabezado, por lo que document.QuerySelector, deja caer el encabezado, e instala esto dentro de una variable, y además ya que queremos insertar este elemento antes del nav, también necesitan una referencia a esto también, por lo que está dentro de una variable llamada nav. Establezca esto igual a document.querySelector, y en esta ocasión seleccionaremos nuestro nav. Ahora tenemos acceso a dos elementos, primer lugar, el encabezado es el elemento padre, y el nav es el elemento donde queremos insertar un nuevo nodo justo antes, y para ello, seleccionamos el padre que es el encabezado, el nombre del método, que se inserta antes, y luego dentro de los corchetes necesitamos pasar en él dos cosas. En primer lugar, es el elemento que se desea insertar, y vamos a reutilizar cualquiera de estos elementos desde arriba. Vamos por los elementos de botón, y como sugiere el nombre del método de inserción antes, entonces necesitamos agregar el nombre del elemento donde queremos insertar este botón antes, y en nuestro caso es la navegación elemento. Vamos a probar esto, refrescar el navegador. Ahora nuestro botón se ha insertado antes de esta navegación. Esto funciona seleccionando un padre que es el encabezado, y luego agregando un elemento dentro. Otro método que también funciona en el padre, es ReplazeChild. Según suena, reemplazará uno de los elementos dentro del padre por uno nuevo el cual especificamos. Ahora vamos a comentar esto, y también podemos usar el encabezado como nuestro padre una vez más. El nombre del método, que es ReplazeChild. ReplazeChild también toma dos valores, el primero es los nuevos elementos que queremos sumar. De nuevo, vamos por el botón como ejemplo. Entonces el segundo valor es el elemento antiguo, que queremos reemplazar. Usaré el nav para este ejemplo, refrescar. Ahora la navegación ha sido eliminada y reemplazada por este nuevo ButtonElement. Estas son algunas formas diferentes de agregar nuevos nodos o elementos a una página web usando JavaScript, y para evitar esto apagado, voy a eliminar las secciones aquí. Comenta este ejemplo, y vamos a volver a anexar el SectionWrapper a la página, que era una nueva sección que creamos en el último video. Bien. Esto ahora está en la página, y en el próximo video, vamos a descubrir cómo podemos clonar elementos y también cómo eliminarlos. 41. Clonación y eliminación de elementos: Empecemos este video viendo elementos de clonación, que ya tenemos. Los archivos de inicio en la clonación y eliminación elementos tendrán la misma configuración que el video anterior. Bajar al fondo y justo debajo de este comentario aquí, lo primero que tenemos que hacer para clonar un elemento es seleccionar realmente uno. Puedes elegir cualquier elemento que quieras. Pero por simplicidad, voy a usar uno de los elementos de botón que ya tienes . Seleccionemos esto. Ahora en este nodo de elemento de botón, podemos llamar a un método llamado nodo de clon, agregar los corchetes e instalar esto dentro de una variable llamada botón de clon. Ahora, si guardamos esto y pasamos al navegador a las herramientas de desarrollador con el botón derecho del ratón e inspeccionamos en la consola. Ahora usando este nombre de variable, escribe esto dentro del navegador, es incierto. Ahora nos devuelven de vuelta para visitar este elemento de botón. Si miramos de cerca entre este botón, no vemos ninguno de los contenidos como el texto dentro. Puedes mirar el botón, puedes ver aquí creamos el nodo de texto comprar online y luego anexamos esto a nuestro botón. Por defecto, utilizamos nodos clonados, solo clonará los nodos del elemento y no ninguno del contenido anidado en el interior. Si sí queríamos los contenidos dentro, necesitamos pasar en un valor booleano de verdad. Esto luego copiará todos los contenidos desde dentro. Podemos ver esto, si una vez más tecleamos nuestro botón de clon, pulsa Enter. Ahora tenemos el contenido de texto desde dentro. Algo que hay que tener en cuenta cuando la clonación es si estamos clonando un elemento el cual tiene un ID único, con ID siempre queremos que sean únicos. No queremos tener dos elementos con el mismo valor. Además, aquí sólo hemos creado este elemento de botón. Aún no hemos agregado esto al DOM. Ahora echemos un vistazo a cómo podemos eliminar elementos usando un método llamado remove child comments, solo clone. El método remove es bastante simple. Todo lo que tenemos que hacer es seleccionar nuestro nodo, desplazarse hacia arriba. Para este ejemplo, voy a quitar el encabezado de sección, el encabezado de sección es un encabezado de nivel 3 el cual se creó aquí, instalado dentro de esta variable. Seleccione esta. El primer método que vamos a echar un vistazo es quitar, tomar esto, y este es el rumbo justo aquí. Si actualizamos esto, ahora se ha eliminado el encabezamiento. Además de este método remove, también podemos hacer esto en el padre. Pero si nos desplazamos hasta nuestro HTML, si echamos un vistazo a nuestro encabezado de nivel 3, aquí, podemos ver que el padre es esta sección. Después desplazándose hacia abajo a nuestro JavaScript donde realmente creamos esto, tenemos una referencia a esta sección llamada envoltura de sección . Estos son los padres. Vamos a comentar esto. Agarra el envoltorio de sección, lo llamaremos el método remove child. Después colocamos dentro de una referencia, el elemento hijo que se desea quitar. El elemento hijo que está anidado dentro es este encabezado de sección. Ahora bien, si guardamos esto y actualizamos el navegador, podemos ver que aún se ha eliminado el encabezado de sección . Pero esta vez se acaba de hacer de una manera ligeramente diferente. A estas alturas deberías estar empezando a tener un buen conocimiento de cómo podemos usar JavaScript para interactuar con el DOM. Muchos de estos procesos siguen un patrón similar. Normalmente tenemos que seleccionar un elemento, podemos almacenarlos en una variable. Entonces llamamos a un método para realizar una determinada acción. Podemos hacer cosas como quitar elementos. Podemos agregar un elemento siempre que. Podemos crear y modificar elementos para construir nuestro HTML exactamente como queremos que sea. A continuación, tendrás la oportunidad de poner todo esto en práctica con un mini reto. 42. Mini desafío: Bienvenido a este mini reto. Lo que me gustaría que hicieras ahora es probar algunas cosas por tu cuenta lo que has aprendido hasta ahora. Entra en la carpeta de esta lección, que es el Mini Desafío, y luego abre esto dentro del navegador. Verás dentro del navegador que tenemos una nueva sección abajo en la parte inferior. La tarea que me gustaría que hicieran es recrear esta sección usando JavaScript, igual que lo hemos hecho anteriormente en los videos pasados. Para este reto, también he pasado por encima de todos los estilos existentes a su propia hoja de estilo dedicada. Dentro de la página de índice, si nos desplazamos hacia abajo, podemos ver una nueva sección que es ésta justo aquí. Esta tiene la clase de recetas, y la suya es una sección que me gustaría que recrear usando JavaScript. Una vez que haya terminado, puede eliminar esta sección del HTML, o bien puede comentar para futura referencia. que ya he agregado el estilo para este proyecto, todo lo que necesitas hacer para que esto se ponga en marcha es agregar estas clases cada uno de estos elementos. Este video no tiene ninguna orientación, es solo una oportunidad para que vayas y pongas en práctica todo lo que has aprendido, como crear nuevos elementos, crear raperos, agregarlos, agregar nombres de clase, y si los mantienes organizados en diferentes secciones como lo hicimos a continuación. Si no te metiste en ningún problema, como puedes ver, también he mantenido en su lugar el código anterior de la última sección, por lo que podemos usarlo como referencia si fuera necesario. Dale una oportunidad. Buena suerte y recuerda que no hay forma correcta o incorrecta de hacerlo. El objetivo es simplemente conseguir algo de práctica por su cuenta y replicar esta sección que ya tenemos. 43. Bucle con elementos del DOM: Bienvenido de nuevo. Espero que el último mini-reto te haya ido bien ti y a ti para crear una nueva sección usando JavaScript. Cuando incluso se crea una pequeña cantidad de elementos, las cosas pueden volverse bastante repetitivas. Imagina crear una lista con incluso cinco o 10 elementos, crear todos los elementos de elemento de lista, agregar el contenido, y luego agregar estos elementos a los padres serán muchas líneas de código. O si quisiéramos agregar los mismos nombres de clase y muchos elementos diferentes, de nuevo, esto es mucho trabajo y repetición. Para ayudar con esto, podemos usar un bucle, aunque sí tenemos mucho más en bucles en una sección posterior. Ya hemos mirado algunos ejemplos de bucle en la sección de matriz. Hemos utilizado los métodos de matriz que estaba mapeando para cada uno, y éstos ejecutarán una función para cada elemento de la matriz. Esta fue una forma de reducir nuestra repetición y esto también se puede aplicar a cualquier cosa como nuestros elementos DOM. En este video, saltaremos al archivo correcto y abriremos esto dentro del navegador, paraluego desplazarnos hacia abajo hasta luego desplazarnos hacia abajo hasta nuestra página de índice hasta la sección de encabezados, y aquí tenemos una lista desordenada. Dado que esto tiene múltiples elementos de elemento de lista, voy a usar esto y crearlos con un bucle. Los bucles se pueden utilizar para crear estos elementos. Podemos agarrar todos estos elementos, podemos hacer cambios, podemos agregar clases, y también eliminar algún contenido también. Bajemos a nuestra sección en la parte inferior. Justo debajo de la sección de bucles, podemos empezar agarrando todos los elementos de nuestra lista. Nada que no hayamos visto antes. Agarraremos el documento y luego podremos agarrar estos con selector de consultas todo. Recuerde, usamos selector de consultas todo ya que tenemos múltiples elementos de lista, deslizamos por el nombre de la etiqueta, y almacenamos esto dentro de una variable llamada elementos de lista. Consulta esto funciona. Dentro del navegador, podemos abrir la consola y acceder a esta variable. Escriba los ítems de lista y podemos ver devuelto a nosotros es una lista de nodos que contiene nuestros dos elementos de lista. Ya nuestros dos elementos de lista tienen la clase de otro ítem. Si tuvieras múltiples elementos de lista, agregar en este cluster, cada uno cuando los creemos, será un proceso realmente repetitivo. De añadirlas manualmente, lo que tendríamos que hacer es acceder a los ítems de nuestra lista. Dado que tenemos múltiples ítems, necesitamos seleccionarlos por el número de índice. Podemos entonces acceder a la propiedad de lista de clases , el método add. Entonces podemos tener una pantalla que es un nuevo nombre de clase. Ahora guarde esto y actualice y una vez más acceda a los elementos de la lista. Esto añadiría entonces la clase en línea a nuestro primer elemento. Como se mencionó, hacer esto por muchos elementos de lista diferentes haría las cosas realmente repetitivas, por lo que vamos a echar un vistazo a cómo podemos ayudar con esto agregando un bucle. JavaScript tiene muchos tipos diferentes de bucles disponibles. Para uno relativamente simple podemos usar para este caso es un bucle llamado de. Comentemos esta línea hacia fuera y justo debajo, empezamos esto con la palabra clave for. Entonces dentro de aquí, vamos a escribir en const elemento de elemento de lista. Lo que estamos haciendo aquí es que estamos seleccionando nuestros ítems de lista los cuales contienen múltiples elementos, y luego vamos a crear una nueva constante llamada ítem. Podemos acceder a esta variable de ítem en cada bucle. Para el primer bucle, la variable item será nuestro primer elemento. Para el segundo bucle, ítem sería equivalente a nuestro segundo elemento, y así sucesivamente. Abre las llaves y dentro de aquí, podemos añadir el código que quieres repetir para cada uno de nuestros elementos. Usando el mismo ejemplo que el anterior, en lugar de agregar esto a nuestro primer ítem así, en su lugar podemos acceder a nuestra variable de ítem y luego hacer exactamente lo mismo justo después. Copia esta sección y pega esto en. En el primer bucle, esto agregará la clase en línea al primer elemento y luego se repetirá para el segundo elemento, esto y más a la consola. Este ítem no está definido y esto sólo tiene que ser un ítems de lista. Esto debería hacer que desaparezcan los errores. Ahora una vez más, podemos acceder a nuestros ítems de lista. Podemos ver que ambos elementos ahora tienen la clase de inline. No hemos guardado mucho código por solo tener dos elementos, pero se puede ver lo útil que sería esto si tuviéramos quizás cinco, o 10, o incluso más elementos a los que aplicar esto. Un tipo alternativo de bucle, en lugar de usar este general for of loop es acceder a uno de los métodos incorporados de JavaScript. Recuerde antes cuando mencionamos que selector de consultas todo devuelve una lista de nodos. Con esta lista de nodos, también tenemos acceso a algunos métodos. Podemos ver estos si bajamos al prototipo y abrimos esto, tenemos acceso a diversos otros métodos como para cada uno. Este va a ser el bucle que ahora vamos a ver. Haces esto, vamos a comentar nuestro for of loop. Justo debajo podemos acceder a nuestros ítems de lista. El método incorporado que acabamos de mencionar fue para cada uno. Dentro de aquí, pasamos luego en una función que se quiere ejecutar para cada uno de nuestros valores. Cada uno de nuestros valores se almacenará dentro de una variable llamada ítem. Entonces abre los tirantes rizados, haremos exactamente lo mismo que arriba. Frota nuestro elemento y luego agrega este nombre de clase, guarda esto, y refresca el navegador, accede a los elementos de la lista. Nuestro nombre de clase de inline todavía se está aplicando a ambos elementos. Es así como podemos modificar, pero ¿qué pasa con la creación de nuevos elementos como un elemento de lista completa? Bueno, vamos a darle una oportunidad a esto. En primer lugar, antes de hacer esto, para evitar confusiones, si volvemos a subir a nuestros ítems de lista en la sección principal, comentar ambos de estos elementos. Entonces podemos seguir adelante y recrear estos usando JavaScript. De vuelta al fondo, comenta este ejemplo. Entonces justo debajo de esto, podemos empezar con un elemento de lista regular como de costumbre. Para ello, acceda al documento. Después creamos nuestro elemento de lista con el método create element. Pasando en la cuerda de LI. Ya que necesitamos modificar también esto, podemos entonces almacenar esto dentro de una constante llamada elementos de lista. Entonces necesitamos crear nuestro nodo de texto para nuestro primer elemento. Nuevamente, guarde esto dentro de una constante y diremos texto de lista. Esto igual a los documentos, entonces usamos el método llamado create text node. El texto para nuestro primer elemento de lista fueron nuestras hamburguesas. Entonces podemos fusionar estos accediendo primero a los padres, que es elementos de lista. Entonces podemos agregar nuestro texto usando el método de niño levantado. Como ya vemos, también necesitamos agregar una clase a cada uno de estos ítems de la lista. Agarra los elementos de la lista. Entonces ClassList.Add y el nombre de nav-item. Este es el primer elemento de lista completo creado. Ahora todo lo que tenemos que hacer es agregar esto a la lista desordenada. Vamos a agarrar esto con documentos.QuerySelector. Necesidad de seleccionar la lista desordenada. A continuación, utiliza AppendChild para luego agregar nuestro elemento de lista. Ahora dale a esto un guardar y refrescar el navegador, y reinstalado es nuestro primer enlace de nuestras hamburguesas. Como cabría esperar, sí necesitamos replicar todas estas líneas de código para cada uno de nuestros ítems de la lista. Sólo tenemos dos enlaces, pero esto aún repite mucho código. Vamos a aprovechar un bucle para ayudarnos con esto. Pero primero, en realidad necesitamos algo para recorrer. Para esto, vamos a crear una constante llamada enlaces. Enlaces va a ser una matriz que contiene los valores de texto de cada uno de nuestros ítems de la lista. El primero va a ser nuestras hamburguesas, separadas por una coma. El segundo eslabón fue para la historia. Usemos el for of loop para recorrer todos estos enlaces. Diremos const enlace de enlaces e incluye todas estas cinco líneas de códigos a continuación. Mueve estos arriba dentro de nuestro for of loop. Si inicialmente guardamos esto y pasamos al navegador, este mismo código se repetirá para cada uno de los valores en la matriz. También necesitamos cambiar el contenido del texto del segundo enlace. El modo de hacerlo es en lugar de tener un texto codificado dentro del nodo de texto, lo que vamos a hacer es eliminar esto y reemplazarlo por el valor de enlace. Valor del link van a ser nuestras hamburguesas en el primer bucle, y luego el texto de la historia en el segundo bucle. Reemplaza esto, pasa al navegador y refresca. Ya están nuestros dos enlaces en su lugar. Al igual que antes, cuando sólo tenemos dos enlaces, no hemos guardado una enorme cantidad de código. Pero los beneficios se harían mucho más grandes si tuviéramos más de dos artículos de lista para crear. Alternativamente, las matrices también tienen acceso para cada uno para cada método. También podríamos usar esto si quisiéramos. Todo lo que necesitamos hacer es eliminar esta sección justo aquí, agarrar nuestra matriz que se almacena en la variable links. Entonces podemos hacer uso de cada método. Recuerda para cada uno ejecutaremos una función para cada valor en la matriz y luego almacenaremos este valor dentro de una variable. Recuerda los tirantes rizados va dentro de aquí. Tenemos que modificar nuestro código existente, mover estas dos llaves desde el exterior. Agarra estas cinco líneas de código. Mueve estos arriba dentro de nuestro bucle. Refrescar, obtendrá exactamente el mismo resultado. Los bucles son una gran manera de realizar tareas repetitivas en la programación. También veremos algunos tipos más de bucles más adelante en el curso. 44. Introducción a los eventos: Los próximos videos van a estar enfocados en eventos. Estas son una parte realmente útil de JavaScript. Los eventos son como cosas que suceden en el navegador, como un clic de botón, un ratón que pasa por encima de una imagen, se presionó un botón de teclado. Cuando ocurre cualquiera de estos eventos , envía una señal para que hagamos algo. A menudo, bueno ahora es para que estos eventos sucedan y luego ejecutar algún código como una función. Por ejemplo, probablemente habrá rellenado un formulario en una página web, como un formulario de contacto, y luego presione Enviar. Bueno, cuando se presenta ese formulario, también encuentra un evento de envío. Podríamos adjuntar un evento click a un elemento como un botón y esto podría ejecutar una función cada vez que se haga clic en este botón. Además, si alguna vez has visitado una página web y después trataste de irte, moviendo el ratón hasta el botón Cerrar navegador en la parte superior, quiero entonces ver una promoción de un pop-up en la pantalla. Bueno, esto es todo JavaScript Eventos que suceden en segundo plano. Podríamos adjuntar un evento mouseover a una imagen que quizá revele más de la imagen a medida que el puntero se mueve sobre ella. Como se puede imaginar, las posibilidades son enormes. Recuerda, JavaScript interactúa con nuestro HTML a través del DOM. De nuevo, estamos mezclando un JavaScript aquí con nuestros elementos HTML. Con esto en mente, necesitamos hacer uso de la interfaz de eventos Doms. La mayoría de los elementos HTML pueden aceptar que se adjunte un oyente de eventos y hay múltiples maneras en que podemos hacerlo. Descubriremos algunos de estos en el próximo video. 45. Escuchar los eventos: Bienvenido de nuevo. Ahora tenemos una comprensión básica de los acontecimientos. Ahora vamos a echar un vistazo cómo podemos escucharlos, para luego reaccionar ante estos eventos. Saltamos a este archivo que está escuchando eventos, y abrimos esto en el navegador. Ya que continuamos con nuestro proyecto No Meat Hamburguesas, este archivo está empezando a hacerse un poco más grande de lo que queremos, así que vamos a seguir adelante y crear algunos nuevos archivos JavaScript, los cuales serán ayúdanos a organizar todo este JavaScript. En primer lugar, ya que hemos creado bastantes elementos dentro de nuestra sección de Script, lo que vamos a hacer es crear un nuevo archivo dentro de esta carpeta de lecciones. A éste se le va a llamar el elements.js. Para esto, todo lo que necesitamos hacer es agarrar todo el contenido de nuestros guiones. Todos los elementos que hemos creado en videos anteriores, sacan esto, dejando una sección de script vacía, pegan en nuestro nuevo archivo, y guárdelo. Después crearemos un nuevo archivo el cual se va a seguir la próxima sección, que es el events.js. Tener múltiples archivos como este está completamente bien. Todo lo que necesitamos hacer es asegurarnos de que estos estén enlazados dentro de nuestra página de índice, por lo que mantenemos el script, pero necesitamos agregar la fuente para apuntar a ambos archivos. El primero es el elements.js, duplicar esto, y el segundo fue para nuestros eventos. Podemos comprobar esto también funciona guardando y actualizando el navegador, y aún vemos todos los elementos que creamos en este archivo. Ahora vamos a pasar a cómo podemos trabajar con eventos hasta que ahora sea para un evento. Primero necesitamos una forma de adjuntarlo a uno de nuestros elementos, y hay diferentes formas en que podemos hacerlo. Si pasamos a la documentación de Mozilla. En la documentación de Mozilla, en una sección llamada GlobalEventHandlers, por lo que no necesitas salir de esta página si no quieres, pero esto nos va a dar una lista de lotes del evento común manejadores que podemos usar, y podemos colocarlos en nuestros elementos HTML. Por ejemplo, podemos escuchar muchos eventos como onfocus, onblur , onclick, que es uno realmente común. Podemos escuchar un elemento para ser drogado y tantos más que nos tiene cubrirlo para muchos eventos diferentes. Podemos esperar a que la página termine de cargarse antes de iniciar una función, podemos escuchar para que un mouse pase sobre un elemento, para dejar un elemento, y también cosas como en reproducción y en pausa que son relacionados con la reproducción de audio y también video. Como puede ver, estos manejadores de eventos tienen el prefijo on. Lo que vamos a hacer es ir a nuestro proyecto y comenzar escuchando un click con el manejador de eventos onclick. En la página Índice, vamos a buscar nuestra imagen, la imagen de hamburguesa justo dentro de aquí, y luego dentro como atributo, podemos agregar onclick. Onclick entonces va a ejecutar cualquier pieza de código JavaScript, por lo que podemos ejecutar una función o podemos ejecutar algo muy sencillo como una alerta con el texto de clics. Guarda esto, y ahora esto se adjunta a nuestros elementos de imagen. Actualiza la página, y luego desplázate hacia abajo hasta la imagen correcta que estaba justo al lado del título vegano definitivo. Da click en esto, y luego esta es nuestra alerta arriba en la parte superior. Si tratamos de hacer click en diferentes imágenes, esto no funciona porque esto sólo se aplica a un solo elemento. Si vamos un poco más allá de esto, también podemos ir a nuestro archivo events.js, y agregar una función que se va a ejecutar cuando se haya hecho clic en este elemento. Nosotros igual que antes creamos una función, y diremos, “ChangeImage”. Ahora y voy a revisar esto funciona con una alerta. Diremos “Clicked”. Guarda este archivo y vuelve a nuestra página de Índice en lugar de ejecutar esta alerta dentro de aquí. Podemos quitar esto y pasar en nuestro nombre de función que era “ChangeImage”. Vamos a guardar esto de nuevo en el navegador. Podemos probar todas estas imágenes y luego la final figura nuestra función dentro del archivo separado. Esta forma de agregar un manejador de eventos como atributo se conoce como un manejador de eventos en línea. Esto funciona completamente bien, pero puede considerarse una mala práctica. Esto se debe a que mezcla nuestro HTML y nuestro código JavaScript. Lo que podemos hacer en su lugar es eliminar esto, y dejar intacto nuestro HTML, para luego poder escuchar esto dentro de nuestro archivo de eventos. Lo que voy a hacer es crear una referencia a este elemento, donde document.QuerySelector, y luego podemos seleccionar cualquiera de nuestros elementos. Para esto, voy a agarrar nuestra imagen de cabecera, que está arriba en la parte superior. Dado que tenemos múltiples imágenes, también necesitamos un identificador único, por lo que colocaremos en un ID de HeaderImage, y luego podremos seleccionar esto dentro de nuestros eventos. Con esto siendo un ID, también necesitamos colocar en el silencio plus en nuestro headerImage, luego almacenar esto dentro de una variable. Estamos agarrando nuestras imágenes aquí, tenemos una función que ejecutar, así que ahora necesitamos una forma de vincularlas. Bueno, la forma en que podemos hacer esto es acceder a nuestro elemento, que es el headerImage, y luego podemos acceder directamente a onclick y establecer esto igual a nuestra función ambas. Se trata de ChangeImage. Vamos a conseguir un strike, recargar el navegador, dar click en nuestra imagen principal, y esto ejecuta nuestra función. No sólo queremos hacer una alerta, aunque en este caso, queremos poder hacerle algo a la imagen. Podemos utilizar cualquiera de las técnicas aprendidas hasta el momento, como agregar clases o incluso CSS. En lugar de la alerta, agarraremos nuestra HeaderImage, estableceremos el estilo y luego estableceremos la propiedad width que es igual a una cadena de 50 por ciento. Lo intentaremos de nuevo. Esta misma técnica exacta funciona exactamente igual con todos los diferentes manejadores de eventos que acabamos de mirar antes. Por ejemplo, si quisiéramos ejecutar esta función en particular cuando el mouse pasa por encima de esta imagen, todo lo que necesitamos hacer es cambiar onclicked para que sea cualquier valor diferente, como onmouseover, refrescar, y tan pronto como este ratón pase por encima de la imagen, ahora se ejecutará este código. Esta configuración es un poco mejor porque todo nuestro JavaScript ahora está contenido en su propio archivo separado fuera del HTML. Pero una de las desventajas de este enfoque es, si quisiéramos desencadenar múltiples funciones. Digamos que copiamos rápidamente esta función y pegamos una nueva llamada hola, podemos agregar una alerta rápida dentro de aquí. Entonces si también duplicamos esta línea de código aquí, también ejecutaremos nuestra segunda función que es hola. Vamos a darle un salvamento a esto y a ver qué pasa. Refresca, mueve el mouseover, vemos nuestra alerta, pero no vemos cambiar el tamaño de la imagen. Cuando configuramos múltiples funciones que responden al mismo evento, anulará la anterior, lo que significa que solo se ejecutará la última función. Estamos viendo esto en acción porque todo lo que estamos viendo dentro del navegador fue nuestra alerta. Otra forma de acercarse a esto es usar un método llamado add event listener. Este enfoque reemplazará ambas líneas de código justo aquí. Todavía necesitamos acceder a nuestros elementos, que es la imagen del encabezado, pero esta vez la pasamos en un método llamado AdDeventListener. Dentro de aquí, lo primero que pasamos es un nombre del evento que quieres escuchar. Vamos por un evento de click. Todos estos eventos son exactamente los mismos que antes, pero simplemente no usamos el prefijo on. Separados por coma, incluso podemos escribir en una función igual a esta, o en su lugar, podemos pasar una referencia a una de las funciones que ya tenemos. Vamos por un ChangeImage, y podríamos probar éste en el navegador. Haga clic en la imagen, y ésta ahora funciona. Una de las ventajas de utilizar este método AdDeventListener, es que también permite múltiples funciones también. Si tuviéramos que duplicar esta línea, diferencia de cuando agregamos el manejador de eventos onclick antes o el onmouseover, podemos pasar en una segunda función y ambas funciones ahora se ejecutarán en el navegador, así, ahí está nuestra alerta, y luego la imagen se encoge al 50 por ciento. Esto es realmente útil si tenemos múltiples funciones que queremos ejecutar, pero solo voy a eliminar este ejemplo hi y dejar una imagen de cambio ordenada. AdDeventListener también tiene algunos otros beneficios también. Otra es, también podemos eliminar el código de escucha de eventos cuando ya no es necesario. También tiene un ajuste, lo que significa que podemos ajustar cuando también se dispara el evento. Pero ambos se cubrirán con más detalle durante este apartado. Tenemos muchos eventos diferentes también en nuestro programa, las herramientas de desarrollador realmente nos pueden ayudar con esto también. Si hacemos clic con el botón derecho y “Inspeccionar” dentro de Chrome, podemos usar el Inspector para apuntar a cualquiera de estos elementos que queremos comprobar. En nuestro caso, si damos click en este headerImage y luego bajamos a la pestaña de Event Listeners, podemos ver que tenemos un click oyente en esto, y si abrimos esto, podemos ver, adjunto a este es un Haga clic en Listener, que luego ejecuta nuestra función llamada ChangeImage. Esto es realmente útil para averiguar qué oyentes de eventos se adjuntan a cuál de nuestros elementos. Tan solo para recapitular, hemos cubierto tres formas adjuntar un Listener de Eventos a un elemento. En primer lugar, agregamos un atributos HTML en línea. Si bien esto es probablemente algo que debes evitar para mantener nuestro HTML limpio y separado de nuestro JavaScript. Luego llamamos al Event Listener directamente sobre los elementos, y esto mantuvo todo nuestro código JavaScript juntos en un solo archivo. Una de las limitaciones fue que sólo pudimos ejecutar una sola función, una pieza de código de este ejemplo, y finalmente, miramos el método AdDeventListener, que no sólo resolvió este problema, pero también tiene más características disponibles, que descubriremos en los próximos videos. 46. Escuchar varios eventos y datos de eventos: Los ejemplos anteriores que hemos visto agregaron un oyente de eventos a un solo elemento. Pero puede haber un momento en el que queremos agregar el mismo oyente de eventos a múltiples elementos. Vamos a entrar en el archivo de esta lección, que está escuchando múltiples eventos y datos de eventos. Se puede echar un vistazo a cómo hacer esto. El ejemplo que vamos a utilizar para esto está abajo en la parte inferior de nuestra página de índice. Te darás cuenta con estas dos secciones de recetas en la parte inferior, he añadido una estrella a la parte superior de cada uno de estos artículos. Podemos ver estos si bajamos al fondo de nuestro HTML. En cada uno de estos artículos, tenemos un elemento span en la parte superior. Esto está en la parte superior de ambos artículos. Lo que podemos querer hacer es agregar un oyente de eventos a cada una de estas estrellas, que luego las agregará a una lista guardada de favoritos. También podríamos tener muchas más recetas listadas y tal vez desee agregar el mismo oyente de eventos a cada una de ellas. Seleccionar cada una de estas recetas forma individual y agregar un oyente de eventos requeriría mucho trabajo. En cambio, podemos usar un bucle para ayudar con esto. Encima en la barra lateral, vamos al archivo events.js. El primero que tenemos que hacer dentro del archivo de eventos es seleccionar todos estos elementos span con los que queremos trabajar. En la página Índice, podemos ver que estos elementos span tienen una clase de add. Vamos a seleccionar ambos con QuerySelectorAll. Hagámoslo. Almacenaremos esto dentro de una constante llamada AddButtons. Establezca esto igual a document.QuerySelectorAll. Entonces podemos pasar en nuestra consulta como una cadena. Es una clase así que usa el punto en el nombre de la clase de add. Recuerda de antes cuando usamos QuerySelectorAll, es que regresará una colección HTML cual podemos recorrer usando ForEach. En primer lugar, selecciona todos nuestros botones con AddButtons. El método que es ForEach, ForEach toma cualquier función para ejecutarse para cada uno de los elementos, que está en nuestra colección. Por lo tanto, cada elemento también necesita un nombre de variable. Llamaremos a este botón, para que sea sencillo. Entonces al igual que miramos arriba con nuestro único elemento, también podemos usar AdDeventListener. Podemos acceder a nuestro button.AddeventListener. Entonces dentro vamos a escuchar un evento de click separado por una coma. Después queremos ejecutar una función. Todavía no hemos creado una función, pero lo haremos en tan solo un segundo. Voy a llamar a esto AddToFavourites. Es así como agregamos nuestro oyente de eventos a cada uno de los botones dentro de nuestro bucle. Entonces podemos seguir adelante y crear esta función. Esto fue AddToFavourites. Ahora por ahora solo agregaremos una alerta de prueba para asegurarnos de que todo esto funcione. Voy a agregar. Diga esto, y más al navegador, abajo al fondo, haga clic en nuestra estrella. Esa es nuestra alerta, haz click en algunos otros elementos para asegurarte de que esto no esté funcionando. Entonces podemos probar nuestra segunda estrella. Esto ahora se suma a ambas de nuestras estrellas. Es así como agregamos un oyente de eventos a múltiples elementos pero a menudo quizá queramos también poder decir en cuál de los elementos se hizo clic en realidad si solo estuviéramos agregando algo de CSS o algo muy genérico. No importa en cuál pinchemos. Pero para nuestro caso de uso particular, posible que queramos saber exactamente en qué receta se hizo clic. Entonces podríamos redirigir esa página de recetas y también asegurarnos de que se añada la correcta a nuestros favoritos. El modo de hacerlo, junto con muchas otras cosas, es accediendo a los datos del evento. Para acceder a nuestros datos de eventos dentro de la función, lo pasamos como parámetro. Voy a nombrar esta variable e, pero su nombre depende completamente de nosotros, pero es común verlo llamado evento o e para abreviar. Contiene el objeto de evento. Este objeto de evento contiene una enorme cantidad de datos a los que podemos acceder. Ya verás esto. Coloca en un registro de consola con el valor de e y quita nuestro [inaudible] para este ejemplo, luego refresca el navegador y abre las herramientas de desarrollador en la consola y haz clic en cualquiera de esas estrellas. Esto luego nos dará acceso a toda la información de eventos. Ya que hemos usado un mouse, este es un evento puntero y esto nos dará mucha información diferente en forma de objeto. Podemos ver esto con las llaves y tenemos un montón de pares de valor clave. Por ejemplo, podemos ver la ubicación del click, que es el eje x y el eje y. Podemos ver algo llamado burbujas, lo que le echaremos un vistazo muy pronto y mucha más información respecto a este evento. Una de las piezas de información más utilizadas dentro de este evento es la sección de destino. Si abrimos esto, esto nos da acceso a nuestros elementos, en los que hemos hecho clic. En nuestro caso, acceder a e.targets dentro de JavaScript accedería a nuestros elementos span y toda la información contenida en el interior. Pero nuestro caso de uso es un poco más complejo. Si echamos un vistazo a la estructura de nuestro código en nuestra página de índice, lo que queremos hacer es agarrar los contenidos para nuestro encabezado nivel cuatro para agregar esto a nuestra lista de favoritos. Pero si estamos haciendo clic en este elemento span justo aquí, ¿cómo accedemos entonces a la información desde dos líneas justo debajo? Bueno, la respuesta también radica en este apartado objetivo. Todo es alfabético. Si te desplazas hacia abajo hasta la sección p, lo primero que tenemos que hacer es subir un nivel a nuestro artículo. Este artículo es el envoltorio de padres para toda esta información. Podemos acceder a todos estos contenidos dentro del nodo padre. Podemos ver el artículo justo aquí. Abre esto. Esto contiene, si nos desplazamos hacia abajo, una lista de niños en forma de colección HTML. Dentro de los niños, podemos ver que tenemos los elementos span con la clase de add en la parte superior. Entonces nuestra imagen, nuestro rumbo nivel 4 y luego el div abajo en la parte inferior. Podemos acceder a toda esta información de objetos exactamente igual que lo harías con cualquier otro objeto. Pasemos a nuestros eventos. Lo que debemos hacer es acceder al objetivo, que es la primera sección, y luego al nodo padre. Después del nodo padre llegaron los hijos. Entonces como la sección infantil es una colección HTML, accedemos a ésta por el número de índice. Al igual que con una matriz, pasamos estos corchetes, y el índice número de dos, que es un encabezamiento de nivel 4. Guardemos esto y comprobemos esto contiene nuestro encabezado nivel 4. Refrescar. Ahora si disparamos alguno de estos eventos con las estrellas, nos va a dar nuestra h4 Hamburguesa de frijol picante. Nuestro segundo, refrescar. Probaremos el Ultimate Vegan. Bien. Ahora tenemos los elementos que usted quiere. Ahora podemos perforar en esto y seleccionar el nombre con nuestro texto interior. Por lo que los niños.INNERTEXTO. Vuelve a intentarlo. Haga clic en las estrellas y esto luego revelará el texto para cada una de nuestras recetas. Este es un camino bastante largo para obtener el nombre de la receta que quieres, pero a veces para obtener la información correcta, solo tenemos que seguir cavando en el objeto para obtener la información que necesitamos. No voy a construir una lista de favoritos para este proyecto, pero así es como podríamos hacerlo. Podrías agarrar el nombre de cada una de estas hamburguesas y luego empujarlo a una matriz o incluso a una base de datos. Una de las piezas de información que también vemos dentro del objeto de evento fue algo llamado burbujas. Esto es lo que vamos a echar un vistazo en los próximos videos cuando descubramos todo sobre la propagación de eventos. 47. Propagación de eventos: Este video va a mirar algo importante que sucede detrás de bambalinas cuando se trata de eventos. Aún mejor, vamos a añadir otro oyente de eventos en nuestro proyecto de startup. Abre el proyecto de inicio, que es la propagación de eventos, y luego verás dentro del navegador que tenemos el mismo proyecto que llevamos desde el video anterior. Al mirar la sección de recetas hacia abajo en la parte inferior, tenemos nuestras dos recetas, y tal vez queremos ampliar la funcionalidad de las recetas. Por ejemplo, podríamos hacer click en uno y luego podríamos ampliar la receta. Podríamos abrir esto en un pop-up o incluso redirigir la página completa de recetas. Vamos a pasar a nuestro events.js dentro de esta carpeta y luego simularlo seleccionando primero nuestras recetas. Nuestras dos recetas, si recuerdas, almacenadas dentro de las secciones de Artículo. Empezaremos por agarrar ambos artículos y almacenarlos dentro de una constante. Vamos a armar esto. Nuestra constante y diremos títulos de recetas y pondremos esto igual a documento, luego deseleccionar múltiples elementos, usamos consulta seleccionar todo pasando en nuestro artículo. Ahora, ya que esto devuelve múltiples elementos, necesitamos recorrer en bucle nuestros títulos de recetas, y podemos hacerlo con un para cada bucle. Para cada uno, tomaremos una función que va a correr para cada uno de nuestros elementos. En nuestro caso, tenemos dos elementos separados. Almacenamos estos dentro de una variable llamada title. Ahora, estamos buceando sobre ambos artículos lo que queremos hacer es agregar un oyente de eventos a ambos. Miramos cómo hacer esto previamente, primero seleccionamos cada elemento individual, luego podemos usar add event listener. Esto escuchará un evento de clic y luego ejecutará una función llamada Redirect. Por supuesto, no hemos creado esta función de redirección que todavía, vamos a crear esto justo arriba. Ahora, todo esto que vas a hacer es crear una alerta. Háganos saber que esto está funcionando. Diremos receta pinchada. También, podemos pasar en los datos del evento. Vuelve al navegador y vuelve a cargar la página. Haga clic en cualquiera de estos artículos y esto luego llamará a nuestra función una vez hecha, podemos probar esto con el segundo artículo también. Todo esto funciona como se esperaba. Pero, ¿qué tal si tratamos de dar click en la Estrella? En primer lugar, vemos el título de Ultimate Vegan, y esto lo configuramos en los videos anteriores. Pero, ¿qué tal si hacemos clic en “Ok”? Bueno, entonces veremos nuestra segunda capa, que es receta clicada. Puede que no estemos esperando esto porque hicimos click en la Estrella y no en el artículo real. Pues bien, la razón de esto es por diversas fases que ocurrieron durante el evento. En los navegadores modernos, los manejadores de eventos harán algo llamado burbujeo por defecto. Si piensas en una burbuja en el agua, una burbuja siempre flotará hasta la cima y esto es lo que pasa con nuestros eventos. Podemos ver esto mejor si entramos en nuestro index.html y luego encontramos alguno de nuestros artículos. Cuando activamos un evento en el navegador, como hacer clic en un elemento, la fase burbujeante hará que no solo se establezca de este evento click, sino que también activará cualquier dentro de otros padres elementos también. Es por ello que cuando hacemos clic en este botón Agregar justo aquí, también burbujeará hasta los elementos de los padres que es el artículo y desencadenará cualquier evento asociado a este artículo también. No sólo este artículo de padres también seguirá burbujeando hasta los otros padres, como un div, esta sección y seguirá yendo todo el camino hasta la parte superior del cuerpo, el HTML, el documento y luego finalmente el objeto ventana. También desencadenará cualquier evento adscrito a estos elementos también. Estos eventos burbujeantes pueden ser útiles. Por ejemplo, en lugar de agregar un oyente de eventos a muchos elementos hijos diferentes, podríamos simplemente agregar un solo oyente de eventos a los elementos de un padre y podemos probar esto agregando un evento simple al cuerpo. Subiremos a la sección de cuerpo de apertura. Agregaremos un manejador de eventos en línea llamado On-click y estableceremos esto igual a una alerta, que va a dar salida a la cadena de cuerpo. Ahora refresca el navegador, click en cualquier elemento irá para nuestro artículo, así veremos la receta clicada y luego también nuestro elemento corporal ha sido disparado en el camino hacia arriba también. Para eliminar este ejemplo, no necesitamos esto dentro de nuestro proyecto, pero esto nos da una buena indicación de lo que está pasando dentro del navegador. También está disponible lo contrario y esto es lo que se llama la fase de captura. Esto comienza en la parte superior, que es el objeto de ventana, y luego corre todo el camino hacia abajo a través nuestros elementos hasta la parte inferior ejecutando cualquier evento que se adjunta a cualquiera de los elementos en el manera. Esto es burbujeante y captura que ambos se relacionan con eventos de incendio si en el camino arriba o hacia abajo y también hay un tercer término también, que se llama el Target. El objetivo son los elementos reales que desencadena eventos, como el evento de artículo, que acabamos de crear. Sabiendo que otros eventos anidados también se activan en el camino hacia arriba, todo el camino hacia abajo, esto nos deja con algunas formas diferentes de cómo queremos manejarlo. Quizás aún queramos que todos los eventos se disparen, pero tal vez hagamos lo contrario de lo que tenemos actualmente. Actualmente queremos hacer click en nuestro botón de agregar, esto se activará primero cuando se haga clic en, seguido del elemento de artículo externo. Estamos viendo esto por el orden de la alerta dentro del navegador. Pero quizá queramos dispararlos también en orden inverso, o tal vez no queremos que ninguno de los eventos sea disparado en absoluto, sólo los eventos para los elementos en los que hicimos clic, y es una forma de cubrir ambos situaciones. En primer lugar, echaremos un vistazo a cómo revertir el orden en el que se disparan estos eventos y la forma de hacerlo, si solo volvemos a verificar dentro del navegador, cuando hacemos clic en la estrella, vemos el título que es vegano último, seguido del evento del artículo en el que se hizo clic la receta. Esto está funcionando de interior a exterior y vamos a revertir esto cambiando esto a la fase de captura. Forma de hacerlo, es ir dentro de nuestros eventos y luego dentro de nuestro oyente de eventos add, agregar un tercer valor separado por una coma y estableceremos esto para que sea cierto. True habilitará la fase de captura en lugar del burbujeo predeterminado. Si quisiéramos, también podríamos configurar esto como un objeto de opciones, donde establecimos la captura para que sea igual a verdadera. Ambos enfoques son exactamente los mismos y bien de usar. Alerta para correr desde la fase de burbujeo hasta la de captura significará que ahora si hacemos clic en nuestro botón, que es la sección add justo aquí, en lugar de trabajar desde el interior hacia el exterior, el evento de artículo exterior será despedido primero, seguido de este arte. Podemos probar esto si refrescamos el navegador, dar click en la estrella. Primero vemos la receta clicada la cual se asoció con el artículo, seguida de nuestros elementos span justo después. El término general para este burbujeo y la fase de captura se llama propagación de eventos y también podemos detener esta propagación por completo. Esto significaría sólo el elemento exacto que desencadenará correrá en lugar de overs dentro del árbol. A modo de ejemplo, cuando hicimos clic en el inicio, si solo quisiéramos ejecutar la función add to favoritas en lugar de la que acabamos de crear antes, podemos saltar a esta función y podemos acceder a nuestro evento información, que nos da acceso a una función llamada Detener Propagación. También podemos eliminar el objeto opciones de abajo, que establece la fase de captura. Refresca el navegador y ahora si probamos esto haciendo clic en la estrella, podemos ver justo el título de último Vegan se ejecuta. Haga clic en “Ok”, no vemos ningún otro evento despedido. Esto puede ser bastante complejo si es la primera vez que te presentan esta cosa. Pero la forma fácil de recordar es que si tienes múltiples eventos, tenemos una opción donde queremos activar cualquiera de estos eventos en los elementos padre o en los elementos hijos, o como acabamos de descubierto también podemos revertir el orden y también detener cualquier propagación y completamente también. El motivo por el que tenemos tanto la captura como los escenarios burbujeantes es histórico. Hace mucho tiempo, cuando los navegadores estaban menos estandarizados, algunos navegadores usaban la fase de captura y algunos usaban burbujeo, lo que luego llevó al estándar actual donde ambos ahora se implementan en los navegadores modernos. 48. Ejecutar los eventos una vez: Bienvenido de nuevo. Ahora vamos a echar un vistazo a cómo podemos dirigir un evento sólo una vez. Saltaremos al archivo actual que es Running Events Once, y abriremos esto dentro del navegador. Esto también tiene un archivo events.js adjunto con el ejemplo similar al que miramos en los videos anteriores. Sabemos por los botones estrella en la parte superior, vamos a recorrer todos estos, el bucle ForeAach en el EventListener que enumerará ahora para un clic y luego ejecutar nuestra función AddToFavorito. Todo lo que hace es crear una alerta simple con el texto, que es o bien el vegano definitivo o la hamburguesa de frijol picante. Un poco antes cuando miramos diferentes formas de escuchar los eventos. Mencioné que hay un poco más AdDeventListener de lo que lo estamos usando actualmente. Acabamos de ver una de las características anteriormente, que era agregar un objeto de opciones y establecer la fase de captura para que sea igual a verdadera. A la par de esto, otra opción que tenemos es restringir el evento, la única que se llame una vez. Esto es bastante simple, todo lo que necesitamos hacer es cambiar esto para que sea una vez y ponerlo en realidad. Veamos qué efecto tiene esto dentro del navegador. Ahora, si recargamos y hacemos clic en una de las estrellas, vemos el título de vegano definitivo. Todo esto funciona completamente bien pero ¿qué pasa si intentas hacer clic en esto una segunda vez? En la segunda vuelta de tiempo no vemos el texto de último vegano, en cambio, vemos el texto de la receta clicado. Esto tiene sentido porque hemos configurado el oyente de eventos para que el título solo se ejecute una vez. Por lo tanto, se referirá de nuevo al artículo circundante ya que el evento de estrellas ya no está activo. Esta es una manera realmente genial de agregar un oyente de eventos de solo uso para que solo se llame una vez. 49. Evitar el comportamiento por defecto y la opción pasiva: Cuando activamos un evento, también tiene algún comportamiento predeterminado cual ocurre dentro del navegador. Esto tiene sentido porque queremos que el evento realmente haga algo. Un ejemplo sencillo es una casilla de verificación. Vamos a saltar a los archivos de inicio correctos que es Prevenir comportamiento predeterminado & La opción pasiva y abrir el index.html. Bajemos al fondo después de la última sección, y justo encima de nuestros scripts crearemos una entrada con el tipo de casilla de verificación y ID de la casilla de verificación también. Guardemos esto y abrimos dentro de la misma carpeta el events.js. Podemos empezar a agarrar este elemento. Cualquier lugar dentro de aquí está bien y agarraremos una referencia a esta casilla de verificación, guardemos esto dentro de una constante. Escribimos document.queryselector, y luego lo vamos a pasar en el ID usando hash. El ID que le dimos a la entrada fue la casilla de verificación, y luego podemos acceder a nuestra casilla de verificación usando un método que es adDevENTListener y luego vamos a escuchar un clic en este elemento. Esto también necesita activar una función que llamaremos HandleClick, y luego configurar esta función justo arriba. La función HandleClick y su función también necesita acceder a los datos del evento, así que pasa esto como parámetro y por ahora haremos un simple registro de consola con e.target. Dado que se trata de una casilla de verificación, también podemos acceder a la propiedad comprobada. Esto debe devolver un valor verdadero o falso si la entrada está marcada o no. Pasado al navegador, refresca, y también haremos esto un poco más grande. Salta a la consola. Simplemente podemos bien, ver esto en la parte inferior, así que da click en esto y vemos que esto está comprobado porque es cierto. Podemos desmarcar esto y esto será el resultado de falso. Podemos toggle list y esta acción de cambio es el comportamiento por defecto, pero si no quisiéramos este comportamiento por defecto podríamos evitar el predeterminado y manejar exactamente lo que queremos que suceda nosotros mismos. Volvemos a nuestro guión que son los eventos y nos desplazamos hasta la función que es addToFavourites. Anteriormente accedimos a los datos del evento y utilizamos un método llamado StopPropagation. Similar a esto, también podemos hacer uso de otro método llamado PreventDefault. Como cabría esperar, esto también está disponible en el objeto de evento. Podemos usar esto dentro de nuestra función HandleClick. En la parte superior accede a nuestros eventos, llamaremos al método que es PreventDefault el cual a su vez detendrá el comportamiento predeterminado dentro del navegador, que también cambiará el valor de casilla de verificación. Vamos a darle una oportunidad a esto. Si actualizamos, comprueba la casilla de salida en la parte inferior; esto es cierto. Si seguimos haciendo clic, esto sólo es resultado de verdadero. No vemos un valor falso, y además nunca vemos que esta casilla de verificación tenga una marca dentro. Viviéndonos ahora libres para hacer lo que queramos con este evento dentro de nuestra función. También abajo en el método AdDeventListener, también podemos agregar un tercer valor que es un objeto options donde podemos establecer la opción pasiva para que sea igual a true. Establecer esto igual a verdadero siempre evitará que se llame al PreventDefault. Guardo esto y veo qué sucede dentro del navegador. Refresca y si hacemos clic en nuestra casilla de verificación, podemos ver que no prevenirDefault dentro del EventListener. Esto se debe a que si establecemos pasivo para que sea igual a verdadero, esto evitará que se llame a PreventDefault. Podemos ver esto, restableceremos nuestro comportamiento original de cambiar entre verdadero y falso y también vemos la marca dentro de la casilla de verificación también. Puede que te estés preguntando por qué estamos previniendo el valor predeterminado dentro de la función, pero estamos anulando esto dentro del EventListener. Bueno, una razón podría ser, quizá queramos detener a otros desarrolladores de hacer algo en el futuro cuando estamos confiando en el comportamiento por defecto. El uso de la opción pasiva también puede conducir a un mejor rendimiento también. Un ejemplo de esto es en dispositivos móviles donde como a veces los desarrolladores evitan el comportamiento de desplazamiento predeterminado para implementar alguna forma de desplazamiento de fantasía personalizada. Pero si no estamos haciendo algo personalizado como esto es malo el navegador sepa agregando la opción pasiva, por lo tanto el navegador no tiene que descifrar cosas por sí mismo lo que puede tomar tiempo y también obstaculizar el desempeño. Vuelve a nuestra página de Índice y podemos eliminar esta entrada justo aquí, y ahora vamos a echar un vistazo un ejemplo más utilizado de prevenir el comportamiento predeterminado que usan cuando se usa con formularios. Ejemplo de ello es un formulario de registro, así que crea una nueva sección con la clase de registro. Dentro de aquí, un rumbo de nivel 3 con el título de Regístrate o podemos descansar esto a través de nuestra bandeja de entrada. Justo debajo de esto podemos empezar a construir nuestra forma, y luego dentro de los elementos de formulario crearemos un nuevo div para cada una de estas secciones. En primer lugar, la etiqueta va a ser para el nombre del usuario, por lo que diremos por nombre pasando la etiqueta de nombre con los dos puntos. Los insumos, este es el tipo de impuesto. Para igualar con nuestra etiqueta, también pasaremos el DNI. Este segundo div solo va a ser para el correo electrónico, lo que copiaremos y pegaremos y cambiaremos cada uno de estos para que sea el correo electrónico correspondiente. El tercero y el div final va a ser para el envío, lo que crea una entrada con el tipo de presentación y también el ID de enviar también. Ya que también hemos quitado nuestra casilla de verificación de antes, también podemos volver a los eventos y eliminar nuestra función y el EventListener. Digamos que esta prueba final, todo esto se ve bien dentro del navegador. Ahí está nuestro título, y el nombre, y las entradas de correo electrónico junto con nuestro envío. Cuando enviamos el formulario, el comportamiento predeterminado es enviar el formulario a un servidor web back-end y luego tal vez hacer algo como redirigir a una página de éxito. Obviamente, no tenemos una página adicional a la que redirigir, por lo que vamos a redirigir a la misma página lo que a su vez provocará una recarga de página. La recarga de página pierde todos los datos del formulario que se anidan en su interior. Si agregamos algo dentro de aquí; solo cualquier ejemplo está bien, pulsa “Submit”, podemos ver un ejemplo de esto. Vemos que la página se ha recargado y también perdemos los datos del formulario de estos campos también. Bueno, ahí tal vez ocurrencias donde primero queremos capturar estos datos y hacer uso de ellos antes de que todo se vaya. Un ejemplo de esto sería quizás validar los datos del formulario antes de que se envíen al servidor. Como acabamos de mirar hacia arriba antes si sí queremos capturar estos datos antes de la recarga, necesitamos evitar el comportamiento predeterminado de la forma. Para ello, vuelve a nuestros eventos y vamos a empezar por capturar la forma y los elementos de entrada. Diga const forma va a ser igual a document.QuerySelector donde seleccionamos elemento de formulario. Si copiamos y pegamos esto en dos veces más, la segunda es para el nombreUsuario y también le damos un ID que es igual a nombre. El tercero es para el UserEmail. A continuación, agarraremos nuestro formulario y agregaremos un EventListener, que va a esto ahora para el envío del formulario. El motivo por el que podemos hacer esto y escuchar el evento de envío es porque dentro de nuestra página de Índice, hemos agregado el tipo de envío. Sepárelo por coma, activaremos una función llamada HandleFormSubmit, y luego configuraremos esto justo arriba. Como cabría esperar ya que necesitamos evitar el comportamiento predeterminado accederemos a nuestro objeto de evento, luego crearemos un registro de consola que agarra nuestro nombre de usuario. Todo lo que hemos hecho aquí es agarrar nuestro elemento UserName, pero si queremos obtener el valor que es ingresado por el usuario necesitamos acceder al valor. En cuanto a los resultados, refrescar. Dentro de la consola, coloque cualquier nombre dentro de aquí. A cualquier correo electrónico, nombre y envío. Lo verás muy rápidamente ahí que el nombre de usuario de Chris se colocó dentro de la consola, y luego muy rápidamente todos los datos desaparecerán. Como cabría esperar la forma de prevenir esto es acceder a nuestro objeto de evento y al igual que antes podemos evitar el comportamiento predeterminado. Diremos esto y probaremos esto una vez más, agrega el nombre, y el correo electrónico está bien y luego pulsa “Enviar”. Ahora nuestros datos siguen en su lugar. Tenemos nuestro registro de consola, y también dentro de la entrada tenemos el nombre y las entradas de correo electrónico. Bien. Ahora tenemos acceso a toda esta información antes de que desaparezca. Ahora podemos validar el nombre y el correo electrónico, y comprobarlo en el formato correcto antes de enviarlo al servidor. Solo voy a hacer una comprobación de validación muy simple para este ejemplo para ver si el usuario ha ingresado un nombre usando una sentencia if. No hemos cubierto si las declaraciones todavía, pero simplemente son forma de comprobar si algo es cierto. El modo en que podemos hacer esto dentro de nuestra función es acceder a la palabra clave if y luego colocar una condición dentro de los corchetes. Queremos comprobar si el nombreUsuario que es la cadena de texto, es igual a una cadena vacía. Si es así abriremos algunas llaves al igual cuerpo de la función y colocarlas en algo que quieras correr. Solo coloquemos una alerta que diga Por favor, ingrese su nombre, y luego regrese de esta declaración. Ahora, vamos a guardar esto y recargar el navegador, pulsa el “Enviar”. Nuestra alerta se ha corrido en la parte superior, probemos esto con algunos datos colocados dentro. Ahí vamos. Ahora el nombre de usuario tiene un valor en lugar de una cadena vacía. Ya no vemos esta alerta corriendo dentro del navegador, por lo que esto nos da la oportunidad de hacer lo que queramos con los datos antes de enviarlos al servidor. Recuerda aunque como la página ya no se está recargando, también necesitamos manejar vacíos y estos formularios entramos nosotros mismos. Esto también es bastante simple, podemos hacer esto dentro de nuestra función justo debajo de la declaración if. Lo que tenemos que hacer es agarrar nuestro nombre de usuario, acceder al valor, y establecer esto igual a una cadena vacía. Lo mismo con el correo electrónico, también a una cadena vacía. Entonces debajo de esto podríamos seguir adelante y enviar esto a nuestro servidor con la forma que quisieras. Vamos a probar esto. Podemos revisar los insumos de formulario, despejaremos. Refresca, agrega nuestros datos, pulsa “Enviar” y todo ha funcionado con éxito. También elimina nuestro nombre y los datos de correo electrónico. Es común ver esto cuando se usan frameworks o bibliotecas. Si alguna vez has usado algo como React o Vue.js en el pasado, es posible que hayas usado esto en el pasado al trabajar con entradas de formularios. A continuación, vamos a terminar nuestra mirada a los eventos eliminando cualquier evento cuando ya no sean necesarios. 50. Eliminar escuchadores de eventos: He tenido toda una práctica hasta ahora de crear eventos, y también hemos echado un vistazo a cómo podemos agregar la opción de uno si eres oyente para solo ejecutar un solo evento una vez. Tan pronto como eso sucede, el oyente de eventos se retira de los elementos. Pero también podemos eliminar a los oyentes de eventos manualmente también podemos eliminarlos si ya no se necesitan o usaron, y esta eliminación no es esencial en proyectos más pequeños, pero una vez que lleguemos a un proyecto de mayor escala, limpiando cualquier viejos oyentes de eventos no utilizados realmente pueden mejorar la eficiencia. También significa que podemos usar el mismo elemento para hacer cosas diferentes todo agregando y eliminando estos oyentes de eventos. Salta al archivo Chrome, que está eliminando los oyentes de eventos, y si abres esto dentro del navegador, notarás que nos alejamos la configuración del proyecto de hamburguesa. Tenemos un ejemplo sencillo, así que tenemos un elemento span, y luego dentro de los elementos P tendrán una puntuación de inicio de cero. El objetivo aquí es hacer clic en este botón de agregar para aumentar la puntuación, y luego usaremos el botón de cancelar para eliminar al oyente de eventos. Esto también vincula a nuestro events.js dentro de la misma carpeta, y si saltamos a esto, tenemos una referencia a los tres de nuestros elementos. Tenemos el botón de agregar, tenemos el botón de cancelar, y luego la salida, que es nuestro número. Lo que empezaremos a hacer aquí dentro es crear un oyente de eventos, que vamos a eliminar en el futuro. Este oyente de eventos se adjuntará a nuestro botón add, así que agreguemos esto como lo hacemos normalmente. Esto ahora por un clic y luego activará una función llamada aumento. Todo esto debería ser familiar. Ahora crearemos nuestra función aumentada justo arriba. ¿ Qué queremos que haga esta función? Bueno, necesitamos seleccionar esta salida que es el valor actual de cero. Este es un elemento p. Queremos seleccionar el valor actual y luego aumentarlo en uno. En primer lugar, la forma de hacerlo es seleccionando nuestra salida. Podemos cambiar el contenido interior del texto y restablecer esto para que sea un nuevo valor. Actualmente, queremos agregar el valor de uno cada vez que hacemos clic en este botón, pero una cosa que debemos recordar es aquí tenemos el texto interior. Bueno, aquí agregamos un número, entonces lo que primero tenemos que hacer es convertir nuestro texto interno para ser un número. Donde puedes hacer esto es acceder a la función numérica, y luego lo que haremos es agarrar la salida actual.innerText. Esto luego transformará esto en un número, y luego agregaremos uno a esto. Probemos a esto y guardemos el archivo, y actualicemos. Haga clic en agregar, y cada vez que hago clic en esto, esto se incrementa por el valor de uno. A continuación, también necesitamos escuchar un clic en este botón de cancelar. Esto es más o menos una repetición del proceso anterior. Agarraremos una referencia a nuestro botón de cancelación. Agregaremos el oyente de eventos. Vamos ahora para el evento click, luego llame a una función llamada StopListener. Esta carga creará esta función. Por ahora, solo coloca en un registro de cancelaciones para que sepas que éste se está ejecutando. Probemos esto, actualicemos el navegador y dentro de las herramientas de desarrollador, saltemos al cancel. Botón Cancelar ahora tomará nuestros registros. Para obtener este botón de cancelación para eliminar realmente al oyente de eventos de nuestro botón de agregar. Lo que necesitamos hacer es acceder a un método llamado remove event listener. Esto es bastante sencillo de hacer en lugar de nuestro registro de cancelaciones; podemos eliminar esto. Podemos acceder al botón add, y llamar a remove event listener. Diga esto, y probaremos esto, refrescaremos el navegador, hará clic en el botón de agregar, y esto aumenta el valor. Haga clic en el botón Cancelar, vea un error dentro de la cancel, digamos en dos argumentos se requieren, y aún así, si intentamos hacer clic en el botón agregar, el oyente de eventos aún no se cancela. Esto se debe a que también necesitamos pasar en los mismos parámetros que usamos cuando agregamos el oyente de eventos, por lo que necesitamos eliminar el click y también la función call refresh, e intentaremos agregar, lo cual está bien. Eliminaremos el oyente de eventos cancelaría. Ahora no vemos ningún error, y si intentamos hacer clic en el botón agregar, no se realizarán más actualizaciones. Como acabamos de ver, necesitamos asegurarnos de que los parámetros sean exactamente los mismos también. Actualmente, tenemos el evento click, que ahora será cuatro, y esto se llama en la misma función. Pero si tratamos de eliminar a un oyente de eventos diferente, como cambiarte esto a ti en mouseover, podríamos decir esto y probar esto una vez más. El botón agregar funciona. Pero si cancelamos el oyente de eventos, el botón agregar seguirá funcionando ya que tenemos un tipo de evento diferente. Vamos a cambiarlo de nuevo para hacer clic. Además, si tuviéramos el objeto de opciones, como buscamos previamente, por ejemplo, podríamos establecer la fase de captura para que sea verdadera. Ahora, si recargamos intento, probaremos esto una vez más, intentaremos cancelar. El botón agregar aún funciona. Esto se debe a que no tenemos exactamente los mismos parámetros dentro de nuestro oyente de eventos remove, por lo que se considera un evento diferente. Si quisiéramos que esto funcionara, como cabría esperar, también necesitamos copiar esto de nuevo. agregar en el tercer parámetro, probar esto. Trataremos de cancelar, y ahora no podemos sumar más números a esto. Esto es lo que necesitamos hacer para eliminar a un oyente de eventos en cualquier etapa de nuestro programa. Como hemos visto, también necesitamos asegurarnos de que todos los parámetros sean exactamente los mismos. De lo contrario, este sería considerado un evento diferente. 51. ¿Colección HTML o nodeList?: A lo largo de esta sección, hemos recopilado diversos elementos DOM utilizando diferentes métodos. Hemos seleccionado elementos DOM por nombre de clase, por ID, y también usando el selector de consultas. Cuando seleccionamos múltiples elementos al mismo tiempo, también recuperamos ya sea una colección HTML o una NodeList. Como se prometió antes, ahora vamos a echar un vistazo a la diferencia entre ambos. En términos generales, muchas veces no importa cuál tengamos. Ambos contienen múltiples valores en un formato similar a una serie, cuales podemos usar como nos gustaría, como hacer un looping sobre ellos. Pero si te interesan las diferencias, ahora las vamos a cubrir en este video. Salta al archivo de esta lección y dentro de aquí tenemos una lista desordenada hacemos cuatro lista-ítems diferentes. Si miras de cerca, verás que los tres primeros list-ítems tienen la clase de list-ítem, y el final tiene la clase de activo. Esto pasará a ser importante pronto, dentro del script.js. Dentro del script, echaremos un vistazo a cómo podemos agarrar el contenido de todos estos elementos de la lista, consultamos selector todos, y obtenemos elementos por nombre de clase. Primero crearemos una constante llamada estática, y veremos por qué, en tan solo un momento. Establezca esto igual a document.queryselectorall, vamos a agarrar todos nuestros list-items y estas clases. Al igual que estamos viendo dentro del HTML, los agarraremos con la clase de elemento de lista. Después de esto, crea una segunda constante llamada live. Esto es igual a documento. Voy a agarrar la misma lista-items, pero esta vez usando getElementsByClassName. Agarra los ítems de la lista y no necesitamos el punto ya que ya sabemos que estamos agarrando el nombre de la clase. Al igual que un refresco rápido, si no recuerdas desde temprano, cuando utilicemos el selector de consultas, esto devolverá una lista de nodos. Asegúrate de que esto sea selector de consultas todo ya que estamos agarrando múltiples elementos. Esto devolverá una lista de nodos y cuando utilicemos getElementsByClassName, esto devolverá una colección HTML. Podemos probar esto, si hacemos un registro de consola para el valor de estática. Duplicar esto y el segundo va a estar en vivo. Refresca con la consola abierta. Aquí está nuestra NodeList y también nuestra colección HTML. Ambos sí tienen algunas similitudes y la primera es que ambos tienen una línea de propiedad. Podemos ver esto, accedemos a s.length en ambos de estos logs de consola. Refresca y podemos ver ambos tiene tres ítems separados. También otra similitud es si eliminamos la longitud, también podemos usar los corchetes para acceder a cualquier propiedad por el número de índice. Esto funciona para estática y también en vivo. Esto devolverá el valor único que fue seleccionado. Pero además de estas similitudes, también hay algunas diferencias clave. Antes hablamos de algo llamado nodos, y dijimos que podemos tener diferentes tipos dentro del DOM. Tenemos nodos de elemento, tenemos nodos de atributo, y también los nodos de texto también. Estos son todos los valores que se pueden devolver dentro de una NodeList. Sin embargo, con una colección HTML, estos sólo pueden contener elementos HTML. A menudo esto no va a causar ningún problema mayor, pero puede ser útil saberlo. También una pista de lo siguiente que vamos a echar un vistazo, es el nombre de estas constantes. Un NodeList el cual recuperamos con selector de consultas todo, devolverá una colección estática. considera una colección HTML en vivo. Lo que esto significa es que cuando actualizamos el DOM, sólo la colección en vivo está al tanto de cualquiera de los cambios. Para ver esta prueba lo que vamos a hacer si volvemos a saltar a nuestra página de índice, es que vamos a hacer que nuestro ítem 4 tenga la misma clase de ítem de lista. Después veremos cuál de estas dos referencias a los mismos elementos se va a actualizar dentro de la consola. Rápidamente, justo antes de hacer esto, también moveremos estos corchetes. En ocasiones cuando tenemos múltiples registros de consola como estos, es más fácil envolver ambos dentro de algunas llaves. El motivo por el cual, si miramos la consola en este momento, no vemos cuál de éstas es cuál. Si guardamos esto y actualizamos, estas llaves ahora convertirán a ambos en objetos, lo que nos dará un nombre de propiedad de estático y vivo. Podemos ver claramente la diferencia entre estos dos troncos. Ahora volvamos a la tarea de actualizar el cuarto elemento de elemento de lista, para tener la clase de elemento de lista. En primer lugar necesitamos agarrar una referencia a esto. Diremos const, y diremos activo, y pondremos esto igual a documents.queryselector. Agarraremos nuestro cuarto ítem de lista el cual tiene esta clase de activos. Entonces voy a configurar una función de set-timeout, que va a actualizar estos elementos después de un cierto periodo de tiempo. Set-timeout toma en una función que se va a ejecutar. También justo después de la función como segundo argumento, pasamos, el retardo de tiempo. Después de 3 mil milisegundos, que es de tres segundos, vamos a ejecutar el contenido de esta función. Todo lo que necesitamos hacer aquí es seleccionar nuestros elementos activos, soltar la lista de clases, donde podemos hacer uso del método add para agregar una nueva clase. La clase que desea agregar es list-item, haga esto igual que los tres ítems anteriores. Entonces también dentro de esta función, podemos subir los dos registros de consola y ver qué sucede después de realizar la actualización. Guarda, vuelve a cargar el navegador y dale estos tres segundos para ejecutar la función. El NodeList estático sólo tiene los tres elementos originales, bueno la colección en vivo ha sido actualizada. Esto también incluye el cuarto ítem que acabamos de agregar. 52. Mini desafío: crea un botón de modo oscuro: Bienvenido al final de esta sección. Por ser un pequeño mini-reto, me gustaría que siguieran adelante y replicaran lo que podemos ver en la pantalla justo aquí. Tenemos algunos HTML muy básico. El parte clave es abiertamente esquina superior. Lo que me gustaría que hicieras es usar JavaScript para responder al clic del usuario en este botón y luego se alterna entre el modo luz y el modo oscuro y para hacer esto, en realidad no es tan difícil como parece. Todo lo que tenemos si entramos en los archivos de inicio, es [inaudible] página de índice con todos los textos, igual que ven aquí, tenemos nuestras hojas de estilo y luego actualmente dentro de la hoja de estilo, tenemos el cuerpo sección que establece el color predeterminado para que sea el modo claro, tenemos el color de fondo claro y también el texto más oscuro. Entonces lo que me gustaría que hicieras es escuchar un evento click en el botón y luego agregar la clase de oscuro. Esto va a hacer lo contrario, vamos a establecer el color más claro para el texto y también el color de fondo más oscuro, darnos un go usando JavaScript, responder al click en la clase de modo oscuro. Entonces también si llenas la confianza, sería bueno que pudieras agregar una declaración IF como lo vimos en un video anterior. También comprueba si el modo oscuro está habilitado actualmente, si lo es, entramos a quitar esta clase la cual luego cambiará de nuevo al estado de luz. Como pequeña guía para ayudar con esto a través del sitio web de Mozilla, podemos hacer uso de un método llamado contains y podemos usarlo para comprobar si nuestros elementos contienen cierta clase. En nuestro caso, vamos a revisar todas las clases que se habían agregado al cuerpo y luego comprobaremos si contiene la clase oscura. Si lo hace entonces querremos quitarlo. Danos una oportunidad, no te preocupes si te quedas atascado en el camino, siempre puedes referirte de nuevo a este video para alguna orientación. De vuelta dentro de la página del índice, saltemos hasta la sección del encabezado. Se puede ver aquí tenemos el botón inicial que es la luna y luego justo debajo tenemos la entidad HTML que va a ser para el sol. Con eso en su lugar, sigamos ahora con mi solución y si la tuya se ve un poco diferente, está completamente bien. Salta al script, dentro de la sección de script, lo primero que tenemos que hacer es agarrar nuestro botón y almacenar esto dentro de la variable, con document.QuerySelector ver en nuestro botón. Esta es una referencia a nuestro botón el cual acabamos de ver dentro del HTML y solo tenemos este solo botón, esto está bien como lo hemos hecho muchas veces de todas, entonces accedemos a nuestro elemento de botón. Podemos entonces agregar un oyente de eventos y esto va a escuchar un evento de click, esto activará una función y llamemos a esta función ToggleDarkMode la cual luego podremos configurar justo arriba. De vuelta a nuestras hojas de estilo, solo abramos esto y echemos un vistazo por dentro. Como hemos visto antes, la sección de cuerpo tiene habilitado el modo de luz predeterminado, lo que podemos hacer entonces es agregar esta clase oscura al cuerpo que luego anula tanto el color el fondo pero solo antes de hacer esto, necesitamos realmente seleccionar el cuerpo y almacenar esto dentro de una constante, document.QuerySelector, eso está en el cuerpo. Ahora tenemos una referencia a este cuerpo, podemos seleccionar esto dentro de nuestra función y podemos usar esto para agregar nuestra nueva clase oscura, esta fue classlist, usamos el método add, donde nosotros añadir la clase de oscuro. Ahora, con esto en su lugar, abriremos nuestra página de índice dentro del navegador y este es nuestro primer paso cuidado. Tenemos el modo de luz habilitado por defecto y ahora si hacemos clic en el icono de la luna, esto terminará en la clase oscura y también los colores correspondientes. Esta es la parte más simple, todo lo que hemos hecho aquí es agregar una clase pero ahora necesitamos una manera descifrar lo contrario y eliminar esta clase oscura. Para ello, podemos agregar una sentencia IF dentro de nuestra función y esto va a comprobar si la clase oscura ya se ha aplicado antes de añadirla justo debajo. Podemos utilizar el método contains que acabamos de ver en el navegador. Lo que necesitamos hacer dentro de la declaración IF es comprobar si el cuerpo contiene esta clase oscura. Primero nos limitaremos a negrita checar esto dentro de un registro de consola, podemos acceder al cuerpo, la lista de clases y luego usar el método contains para comprobar si se ha aplicado esta clase oscura. Como se puede ver dentro de la documentación, esto devolverá un valor booleano de verdadero o falso, entonces podemos usar esto dentro de la sentencia IF. Este registro de consola está en la parte superior de la función, comprobaremos si esto es cierto al principio y luego justo después de agregar esto, comprobaremos si esto aplica al final, guardaremos esto y otra vez en el navegador, saltar a las herramientas del desarrollador, recargar y en la consola. No le gusta nuestra declaración IF vacía, solo eliminaremos esto y refrescaremos y ahora si activamos nuestro botón, inicialmente vemos el valor de false ya que el primer registro de consola está en la parte superior de nuestra función pero entonces nuestro segundo es cierto porque hemos agregado esta clase oscura a nuestro cuerpo. Genial, ahora sabemos que esto funciona, podemos quitar nuestros registros de consola y ahora podemos aplicar esto a nuestras declaraciones IF. Al igual que los registros, comprobaremos si el body.classlist contiene la clase de dark, si lo hace el código dentro se ejecutará y ¿qué código queremos ejecutar exactamente? Bueno, si pensamos en esto tratamos de activar y desactivar el modo oscuro, el modo oscuro ya está aplicado, queremos quitar esta clase del cuerpo, podemos hacerlo accediendo al cuerpo. classlist y luego use el método remove que eliminará nuestra clase oscura, guarde esto y pruebe esto dentro del navegador, el predeterminado es el modo light. Ahora tenemos el modo oscuro pero si intentamos volver a hacer clic en esto, aún no vuelve a nuestro modo de luz. El motivo por el cual, es por dentro de nuestra función, cualquier cosa que hagamos al inicio de esta función siempre se aplicará en la clase de modo oscuro y la forma evitar esto está dentro de nuestras declaraciones IF. Si agregamos la palabra clave return, si la sentencia IF es verdadera y el código dentro se ejecutará, esta declaración de retorno saldrá de nuestra función, el código justo debajo no se ejecutará. Efectivamente, si se activa la sentencia IF, sólo se ejecutará este bloque de código. Si no se activa, esta sección en la parte inferior se ejecutará en su lugar. Prueba esto una vez más, refresca el navegador. Nuestro botón de activación ahora funcionará correctamente. El resto de los pasos era cambiar este icono en la esquina superior, para cambiar entre el sol y la luna. Ya tenemos acceso a nuestro botón, por lo que podemos seleccionar esto dentro de nuestra función. En primer lugar, justo encima de las declaraciones de retorno, accederemos a nuestro botón y podemos cambiar el HTML interno para que sea igual a nuestra entidad HTML. En esta declaración IF, estamos quitando el modo oscuro, entonces queremos proporcionar una referencia de la luna luego volver a seleccionarla. Acude a nuestra página de índice, agarra la entidad que es la luna la cual es co-reactiva, así que selecciona esto, pega esto en forma de cadena y justo debajo, también podemos establecer el color de estos elementos con el , establezca el color igual a un valor RGB de 62, 62, 62. Fuera de la declaración IF, queremos hacer lo contrario, si copiamos ambas líneas, simplemente lo agregamos en la parte inferior de nuestra función. El HTML interno va a ser nuestro icono de la luna que es éste en el comentario luego lo guardas, agrega también el color, voy a ir por aqua. Vamos a probar esto, cambiar al modo oscuro. Estoy mirando entonces reactivado el modo de luz con el icono del sol, haga clic en esto y esto luego restablecerá la luna. Podemos entonces volver al modo oscuro. 53. Proyecto de reproductor de video: crear la interfaz de usuario: Oye. Bienvenido de nuevo a nuestra nueva sección. Esta sección se va a utilizar para crear algunos proyectos de práctica para reforzar lo que hemos aprendido hasta ahora. Vamos a dar inicio a las cosas con un proyecto de reproductor de vídeo. HTML tiene un reproductor de vídeo nativo con controles para reproducir y pausar el video. Pero también podemos quitar estos controles y crear un jugador totalmente personalizado. Hacemos esto usando algunas propiedades, métodos y eventos que tendremos disponibles. Al igual que una vista previa rápida, esto es lo que vamos a estar creando y esta es la versión final. En la parte superior, tenemos nuestra pantalla de video en la que se encuentra el ancho completo del navegador, abajo tenemos una barra de progreso y luego tenemos los controles en la parte inferior. Como cabría esperar, podemos hacer clic en el botón Reproducir y esto iniciará el video e iniciará las cosas con la barra de progreso. Podemos pausar, si el video tiene audio, también podemos controlar el nivel de volumen y también la velocidad de reproducción se puede controlar también. Podemos hacer esto más lento, podemos acelerar las cosas y también podemos saltar por el video yendo hacia atrás y hacia adelante también. Para empezar las cosas, salta a los archivos de las estrellas. Voy a necesitar entrar a la nueva sección que es Número 5, saltar al proyecto de videojugador. Si abres la página del índice, verás que tenemos un iniciador bastante básico. No tenemos ningún contenido, todo lo que estamos haciendo aquí es vincularlo a nuestras hojas de estilo y también a nuestro script.js. El script es un archivo vacío, así que vamos a crear todo esto nosotros mismos pero sí tenemos un headstart con la hoja de estilo. Esto simplemente nos da un poco de estilo y diseño básico para que podamos enfocarnos en el JavaScript. También se proporciona un video el cual es un archivo MP4 y este es el mismo que acabas de ver en la versión final. Pero también puedes reemplazar esto por un video de tu elección si lo prefieres, todo funcionará exactamente igual. Empecemos abriendo nuestra página de índice dentro del navegador, copie la ruta a este archivo, pegue esto y como cabría esperar, aún no hay contenido en la pantalla. Empezaremos dentro de la sección de cuerpo, utilizo los elementos de video HTML y este es un envoltorio para el contenido que vamos a colocar dentro. Si has utilizado los elementos de video nativos o incluso los elementos de audio, esto te resultará bastante familiar, si no, video es solo un envoltorio donde proporcionamos la fuente a nuestros archivos de video. El origen se proporciona en el interior con los elementos fuente. Esto no contiene ningún contenido en su interior, por lo que sólo tenemos la etiqueta única. No necesitamos cerrarlo así como así, en cambio, usamos esto para proporcionar la fuente a nuestros archivos que queremos reproducir y en nuestro caso, es el video.mp4. Un segundo atributo que podemos agregar es el tipo de video y en nuestro caso, este es el tipo de video y es un formato MP4. El elemento de video también soporta otros tipos también. Si bien esto también solo agregará algún texto en su lugar que es algún texto alternativo si el video no es compatible. Esto no es realmente un problema hoy en día ya que el reproductor de video está realmente bien soportado en todos los navegadores pero vale la pena ponerlo, por si acaso. Digamos que tu navegador no es compatible con video HTML5, así que inicialmente si abrimos esto dentro del navegador, refrescamos la página, efectivamente tenemos una imagen fija, podemos hacer click en esto, podemos jugar. El modo en que podemos hacerlo es haciendo uso de los controles de video nativos HTML5. Activa esto, es bastante simple, solo entramos en el envoltorio de video y agregamos los atributos de los controles. Esto habilitará los controles de video predeterminados que ahora podemos ver abajo en la parte inferior. Podemos jugar esto. Tenemos el tiempo transcurrido, el tiempo total del video, tenemos una barra de progreso y también podemos controlar cosas como el volumen, podemos cambiar esto a pantalla completa. Además, tenemos algunas opciones para la velocidad de reproducción y también para habilitar picture in-picture. Por supuesto, todo esto es realmente bueno y es genial tener un reproductor de video nativo, para nuestra situación, no nos aprende nada sobre Javascript.` Lo que me gustaría hacer es eliminar estos controles nativos por quitando el atributo controles y recrear estos botones para interactuar con el video, reproducirlo usando JavaScript. Donde podríamos hacer esto, si pasamos a la página web de Mozilla que es developer.mozilla.org, hacemos una búsqueda de video. Esto es de un minuto aquí. Dentro de aquí, veremos un ejemplo que no es nada ya no hayamos visto hasta ahora. Tenemos el envoltorio de video, tenemos el atributo controles, tenemos la fuente de nuestros archivos de video y luego los textos de respaldo si el reproductor de video no es compatible. Tenemos varios otros atributos como, si quieres que el video también se reproduzca y también si vamos un poco más allá, tenemos acceso a diversos eventos. Se configuran diversos eventos a lo largo de la reproducción de nuestro video, por ejemplo, mirando esto ahora para eventos cuando se está reproduciendo el video, para cuando está pausado y también el video progresa también a medida que se actualiza el tiempo. Además, este elemento de video hereda métodos de una API padre llamada elementos de medios HTML. Hagamos una búsqueda de esto, desplázate hacia arriba, HTML, elementos de medios y así como estos eventos que podemos enumerar ahora. Este elemento mediático tiene propiedades y métodos como la capacidad de reproducir impulso, podemos cambiar el volumen y podemos ver cuánto tiempo lleva reproduciéndose los medios. Podemos ver estos si nos desplazamos un poco más hacia abajo, tendríamos varias propiedades. También podemos activar los controles desde aquí si quisiéramos, podríamos comprobar la hora actual del video ya que se está reproduciendo, podemos comprobar la duración del video, cuánto tiempo es, podemos recorrer el video, también podemos silenciar el video, y desplazándonos hacia abajo también tendremos los diversos métodos que podemos usar también. Tenemos algunos métodos útiles como la capacidad de reproducir y pausar un video y vamos a hacer uso de estos en nuestros proyectos. Nuestros elementos de video que utilizamos dentro de aquí tiene acceso heredando todas estas propiedades y métodos. Por supuesto, los métodos regulares como un dif no necesitarían acceso a estos métodos extra por lo que estos necesitan ser heredados. Pero, ¿por qué no simplemente adjuntar estos métodos y propiedades adicionales directamente a estos elementos de video? ¿ Por qué necesitamos heredarlos en primer lugar? Tendremos cualquier medio separado, otros elementos también pueden hacer uso de ellos. Al mirar esto, otros elementos como los elementos de audio también pueden hacer uso de estos mismos métodos y propiedades como reproducir y pausar, lo que significa que no tenemos que duplicarlos, para añadirlos tanto al vídeo como a los elementos de audio. También este elemento multimedia HTML forma parte de una colección de montones de diferentes API web que nos dan acceso al poder de muchas cosas increíbles dentro del navegador. De hecho, una de estas API web listadas es la API DOM. Esta es la que hemos utilizado en la última sección para interactuar con nuestros elementos DOM. Por ejemplo, entre otros, es decir los elementos de lienzo HTML, que habilita diversas funciones de dibujo. Esto está justo arriba. Permite dibujar dentro del navegador y vamos a echar un vistazo a éste más tarde también. También tenemos cosas como la API de Geolocalización, para que los usuarios puedan compartir su ubicación. Tenemos arrastrar y soltar, lo que nos permite mover elementos de la página y dejarlos caer en ciertas ubicaciones. Vamos a usar estas propiedades y métodos de medios muy pronto, pero primero necesitamos crear algunos controles HTML, que vamos a usar para activarlos. Vamos a crear estos dentro de la sección del cuerpo, justo debajo del video. Esto creará una nueva sección con la clase de controles. Esto sólo va a activar nuestro CSS y vamos a abrir esta sección. En la parte superior, comenzaremos con una barra de progreso, igual que vemos en la versión final, y luego crearemos varias secciones nuevas de arriba a abajo. Desde arriba tenemos la barra de progreso, está en el atributo de valor, que va a ser inicialmente el valor de cero y vamos a actualizar este valor a medida que se actualiza un progreso de video. A continuación una sección div, que va a ser el envoltorio para los botones Reproducir y Pausa. El primer botón detecta el juego, y como esto se va a controlar usando JavaScript, esto necesitará un ID único. Esto puede ser Play, y así patea en nuestro CSS, le daremos una ronda a esta clase de aquí. Duplica este y cambia el ID para que sea Pausa y también el texto, dale a esto un “Guardar” y “Actualizar” el navegador. Bien. Por supuesto, estos no van a hacer nada todavía porque necesitamos agarrarlos usando JavaScript y activar todas las propiedades y métodos que miramos antes. El siguiente apartado es para el volumen, así que justo debajo de nuestro último div, crearemos uno nuevo. El tipo de alinear. De izquierda a derecha, crearemos un elemento span y esto va a ser para reducir el nivel de volumen, así que digamos volumen negativo en el centro y entrada que va a ser un deslizador de rango. El ID es igual al volumen. Entonces también podemos controlar los valores mínimo y máximo para esta entrada. El mínimo va a ser igual a cero y el máximo es igual a uno. Esto es lo que usamos dentro de JavaScript. Agarraremos el rango entre cero y uno. El volumen detectado es seleccionado por el usuario. También podemos saltar de cero a uno en diversas etapas y lo podemos hacer con este paso, que va a ser igual a 0.1. Esto significa que cada vez que movemos este círculo a través, esto saltará en incrementos de 0.1, básicamente dándonos 10 pasos. Después de esto, justo por debajo un segundo span elementos y éste es para aumentar volumen. Diremos volumen más. Ahí estamos. El siguiente apartado es para estas velocidades de reproducción, por lo que este va a ser varios botones los cuales van desde 0.5 hasta una doble velocidad. Para mantener este lugar consistente en un div, y el primer botón va a ser para la velocidad de reproducción de 0.5, la clase de velocidad, y luego copiar y pegar esto tres veces más. Esto va a ser para uno, que es la velocidad de reproducción regular, 1.5, y luego duplicar nuestra velocidad regular. El último tramo, de nuevo dentro de un div, esto va a ser para nuestros botones de espalda y adelante. Último botón, podemos usar algunas entidades HTML para obtener estas direcciones a la izquierda y la derecha. Entidad para el primero es agarrar esto dentro de JavaScript con un ID único que será igual a espalda y también la clase de salto. Duplicar esto, y esto es para adelante. Usaremos la misma clase, donde la entidad es la y esto nos dará el icono de Forward. Probemos esto. “Refresca” y nuestro control ya está completo dentro del navegador. Por supuesto, no van a hacer nada porque son solo elementos HTML regulares. Tenemos que controlar estos dentro de nuestro guión. Vamos a saltar a nuestro guión y podemos agarrar cada uno de estos elementos con su ID único. Abre nuestros guiones y además de acceder a cada uno de estos botones de controles, también necesitamos una referencia a nuestro video real. Necesita una referencia a todos los elementos de video o al envoltorio porque estos elementos pueden acceder a todas las propiedades, métodos, y eventos que nos van a permitir controlar al reproductor. El document.QuerySelector, pase en el video. Haremos lo mismo por cada uno de nuestros controles. Necesitamos acceder a nuestra barra de progreso porque necesitamos actualizar esto con JavaScript, necesitamos acceder a la reproducción y pausa. Queremos acceder a la entrada de volumen, todos los diferentes botones de velocidad, y finalmente a los botones de atrás y adelante. Haremos esto de arriba a abajo. El siguiente es para la barra de progreso y utilizamos el selector de consultas. A continuación tenemos los botones de reproducción y pausa. Este es un ID, usamos el hash, el ID de juego y vamos a duplicar esto. El segundo es la pausa. Al siguiente, necesitamos el volumen. Agarraremos el tipo de entrada con el ID de volumen, duplicamos éste, cambiamos éste a volumen. El siguiente, si volvemos a nuestra página de Índice, va a estar seleccionando los cuatro de nuestros botones. No tenemos un ID para cada uno de estos, será mucho más sencillo si los seleccionamos por la clase, por lo que podemos usar el selector de consultas todo para agarrar estos. Después en el siguiente video detectaremos qué botón ha sido seleccionado. La siguiente constante es la velocidad de avance y esta vez necesitamos usar selector de consultas todo, usar un punto ya que esto es una clase, y luego los dos finales son para nuestros botones de atrás y adelante. Esta vez estamos de vuelta a los ID, por lo que usamos un hash. Esto es para nuestro botón Atrás, duplicar esto y cambiar esto para estar adelante. Bien. Estamos haciendo buenos avances con este reproductor de video. Ahora hemos agregado los controles. Tenemos acceso a todos estos controles a través de nuestras variables, y en el siguiente video, podemos empezar a agregar eventos, propiedades, y métodos para luego controlar nuestro reproductor de video. 54. Proyecto de reproductor de video: eventos, propiedades y métodos del video: En el video anterior, miramos brevemente estos elementos de medios HTML. Discutimos que tenía algunas propiedades y métodos que podemos aprovechar. Esto es lo que ahora vamos a hacer en nuestro JavaScript. Propiedades sabias, si nos desplazamos hacia abajo, tenemos algo llamado la hora actual, y esto es algo que podemos usar para agarrar el tiempo de reproducción actual en segundos. Bajar un poco más allá. También tenemos algo llamado la duración. Esta es la longitud total del video. También lo necesitaremos más adelante en este video. Un poco más abajo hacia abajo, también deberíamos tener algunos métodos disponibles. Aquí podemos aprovechar métodos como jugar y pausar. Por supuesto, estos realmente van a ser útiles para nuestro proyecto. Pasemos a nuestro script.js e implementemos estos dentro de aquí. El juego y la pausa es bastante sencillo. Todo lo que necesitamos hacer es agarrar nuestros elementos particulares y luego agregar un oyente de eventos. Ahora haga clic libre, y luego podemos ejecutar estos métodos. Dentro de nuestro reproductor de video, dentro de nuestro HTML, ya tenemos estos botones configurados para reproducir y pausar, y en nuestro guión ya tenemos una referencia a ambos elementos. Podemos comenzar accediendo al botón Play y luego al oyente de eventos. Escucharemos el evento click. Podría agregar una función en línea dentro de aquí o podría agregar esto por separado. Simplemente voy a agregar esto en línea; nombre de función del juego. Entonces, ¿qué quieres hacer dentro de esta función? Bueno, lo que tenemos que hacer es acceder a nuestro video, que son nuestros elementos de video, y como esto hereda todas las propiedades y métodos de los elementos de medios HTML, podemos entonces usar estos métodos que acabamos de ver, y lo que necesitamos es jugar. Podemos probar esto. Probemos nuestro reproductor de video, actualicemos, haga clic en “Play” y se actualiza al instante el video. Por supuesto, el botón de pausa no funciona todavía, pero si volvemos a nuestro JavaScript, podemos acceder a esto y hacer exactamente lo mismo agregando un oyente de eventos. Para el evento click, ejecutaremos una función llamada pausa. La pausa se verá más o menos igual. Simplemente necesitamos acceder a nuestro video y al método de post. Entonces también podemos probar esto también está funcionando. Play, esto está bien. Entonces pausa, y esto luego pausará nuestro video. de estos dos botones también pueden ser agradables para reproducir y pausar el video cuando hacemos clic en el video real en la parte superior. También algunos jugadores te permiten hacer esto con la barra espaciadora. Esto creará una función que vas a alterar entre el estado de reproducción y el estado de pausa. Paso uno, vamos a encerrar nuestra función para cambiar el juego. En la primera parte de esta función se va a detectar si el video ya está en pausa. Si lo es, entonces ejecutaremos la función de juego. Si no, vamos a seguir adelante y hacer una pausa. Crearemos una declaración if dentro de aquí, que va a comprobar si el video está en pausa. Cómo saber esto funcionará. Bueno, si volvemos a la documentación y nos desplazamos hacia abajo a las propiedades, tenemos acceso a una propiedad de solo lectura llamada en pausa, que luego devolverá un valor verdadero o falso. En nuestro caso, si el video se pausa, entonces quisiéramos hacer lo contrario y ejecutar el método de reproducción. Si esto es cierto, también podemos volver fuera de esta declaración if. Entonces justo debajo, si esto no es cierto, lo que significa que el video no se pausa, no queremos pausar el video. Para que esto funcione, necesitamos acceder a nuestros elementos de video, los cuales se almacenan dentro de esta constante de video. El lugar está abajo en la parte inferior, video.addeventlistener. Vamos a listar ahora para un evento click en este video y luego ejecutar nuestra función que es toggle play. Guarda esto y de nuevo en el navegador, vuelve a cargar esto. Dado que esto se encuentra actualmente en estado de pausa, lo cual es cierto dentro de las declaraciones if, ahora deberíamos poder hacer clic en esto y luego reproducir el video. Haga clic en esto y esto debería funcionar. Después volveremos a hacer clic en esto. El segundo clic hará lo contrario y pausará. Bien. Todo esto ahora funciona. Lo siguiente, como se mencionó antes, es también alterar entre el estado de reproducción y pausa cuando el usuario golpea la barra espaciadora. Al presionar la barra espaciadora, esto no está unido a ningún elemento individual. Lo que podemos hacer para escuchar la barra espaciadora es agregar un oyente de eventos al documento real. Vamos a agarrar esto, seleccione agregar oyente de eventos. Queremos listar abajo para un evento key down. Esta tecla abajo es cuando se presiona cualquier botón del teclado. Esto luego ejecutará una función. Aquí, antes de ejecutar nuestra función toggle play, recuerda que estamos escuchando cualquier tecla que se presione en el tablero. Lo que sí tenemos que hacer es detectar primero si está presionando la barra espaciadora o cualquier otra tecla. Podemos hacerlo accediendo a la información del evento, pasa a la función. Después podremos echar un vistazo dentro de la información del evento. Guarda esto, actualiza, abre las herramientas de desarrollador, salta a la consola. Lo que tenemos que hacer ahora es presionar cualquier tecla dentro de aquí. Esto ha desdisparado nuestros eventos de teclado. Si abrimos esto, esta propiedad de código en este objeto nos dirá exactamente qué botón del teclado se ha presionado. Mi caso, presiono la barra espaciadora, que es el código del espacio. Ahora podemos acceder a esto dentro de nuestra función. En lugar del registro de la consola, comprobaremos si el event.code es igual a la cadena de espacio, que coincide con esta cadena justo aquí. Entonces lo que queremos hacer es ejecutar nuestra función toggle play. Ese es el resultado, abajo y refrescar. Ahora si presionamos la barra espaciadora, esto volverá a ejecutar nuestra función , y se hará una pausa. También encontrarás si presionas algún otro botón del teclado, no cambiará esta función. Bien. Bajando, lo siguiente que tenemos es este deslizador de volumen. Si entramos en la página de índice, podemos ver que esto está siendo controlado por la entrada con el tipo de rango. El rango que hemos establecido aquí es un mínimo de cero y un máximo de uno. Por lo que cero siendo silencioso y el número uno siendo el volumen máximo. A medida que utilice las diapositivas, subirá o bajará en incrementos de 0.1 del script referencia vertical a esto con esta constante de volumen. Seleccione esta. Después añadiremos un oyente de eventos. Queremos escuchar un evento de entrada. Esto significa que el usuario ha movido la entrada. De nuevo, esto activará una función llamada cambio de volumen. Volver a la documentación de Mozilla. Podemos ver aquí adentro. También tenemos acceso a una propiedad de volumen. Tenemos que asegurarnos de que el volumen sea exactamente el mismo que nuestro deslizador de rango. Podemos hacerlo accediendo a nuestro video.volume, que es esta propiedad justo aquí, y luego queremos que esto sea igual a un nuevo valor. Este nuevo valor es el valor de nuestro rango de volúmenes. Arriba en la parte superior, tenemos acceso a todo el volumen, que es esta entrada justo aquí. Esto es sólo una referencia al elemento real. Si el valor del deslizador cumple los accesos con la propiedad de valor de punto. Vamos a probar esto. Guardar y refrescar. Se puede jugar. Ahora si desliza el volumen hacia arriba y hacia abajo, si construiste aquí una diferencia en los niveles de volumen moviéndose hacia abajo lo siguiente que tenemos son nuestros cuatro botones, que va a ralentizar y acelerar el reproducción del video. En nuestro script utilizamos selector de consultas todo para seleccionar todos estos botones de encendido instalarlos en la variable de velocidad. Esto significa que tenemos acceso a los cuatro de estos botones. También necesitaremos una forma de agarrar los valores particulares. Esto podemos agregar un atributo personalizado llamado velocidad de datos. Esto va a ser igual al valor de 0.5 y luego solo vamos a copiar esto, pegarlo en nuestro siguiente botón. Este es el valor de uno. El tercero es 1.5 y el último es el doble de la velocidad de reproducción, que son dos. Esto es solo un atributo personalizado y generalmente comenzamos atributos personalizados con este prefijo de datos. Sabemos por videos anteriores que podemos acceder a los valores de cualquiera de estos atributos. Ahora vuelve al script y podemos empezar agregando un EventListener a cualquiera de estos botones. El guión hasta la parte inferior, accede a los cuatro botones que almacenaste en la constante de velocidad. Dado que tenemos múltiples valores, se bucle sobre ancho forEach. Función del cliente la cual se va a ejecutar para cada uno de nuestros botones, voy a almacenar una referencia a cada uno de nuestros botones dentro de una variable y luego acceder a todos los botones. Agregar un EventListener. Apenas ahora para un evento click, y luego ejecutar una función llamada SetSelected. Además aún no hemos creado esto, así que solo crearemos esto justo arriba, setSelected como en el cuerpo de la función. Esta función se encarga de hacer dos cosas. En primer lugar, si el video no se está reproduciendo actualmente, podemos hacer clic en alguno de estos botones, pero primero queremos comenzar la reproducción. Hacemos esto igual que arriba con video.play, pasa esto a nuestra función. Entonces lo segundo que queremos hacer es seleccionar la velocidad de reproducción particular. Es decir, necesitamos acceso a nuestra información de eventos. Entonces como siempre, usamos e.target para acceder a los elementos particulares. Después podemos usar getAttribute, que hemos mirado en el pasado para agarrar nuestro atributo de velocidad de datos del cliente. Esto ahora debería darnos acceso a nuestros valores que van entre 0.5 hasta 2. También necesitamos una forma de establecer este valor a nuestro video. En primer lugar, accede a nuestro video y luego dentro de la documentación, tenemos otra variable de propiedad llamada PlaybackRate. Entonces acceda a esto. Esto igual al volumen de nuestro atributo. Vamos a probar esto. Cargar la página. Entonces intentaremos 0.5, que es realmente lento. Velocidad simple, 1.5, y luego duplicar la velocidad. Bien. Conforme se está reproduciendo este video, también queremos actualizar la barra de progreso arriba en la parte superior. Para ello, podemos acceder a algunos eventos diversos. Podemos hacer esto aprovechando algunas propiedades denominadas la duración y CurrentTime. Bajo la sección de probabilidad, en la parte superior, tenemos el CurrentTime, que es el tiempo de reproducción equivalente en segundos, y también la duración del video. Podemos utilizar estas dos propiedades para calcular el valor de la barra de progreso en cualquier punto dado pero también necesitamos hacerlo de manera regular. Desafortunadamente, hay algunos eventos que podemos enumerar ahora para si nos desplazamos hacia abajo a la sección de eventos. Abajo cerca del fondo bajo eventos, tenemos un evento llamado timeupdate, que se activará cada vez se actualice el atributo CurrentTime. Significa que podemos escuchar ahora para que se actualice la hora actual y luego volver a calcular la barra de progreso cada vez. Paso 1, crearemos una nueva función cual en realidad va a actualizar la barra de progreso y luego llamaremos a esto en cada actualización. Gran función llamada UpdateProgress. Podríamos simplemente actualizar de inmediato la barra de progreso, pero primero vamos a añadir un rápido si las sentencias dentro, que va a comprobar si el video.CurrentTime es mayor que el valor de cero. Esto sólo se ejecutará si el video ha comenzado a reproducirse, y luego podremos acceder a nuestra barra de progreso. Esto se almacena en la constante de progreso. Establezca el valor. Este valor se puede calcular dividiendo el CurrentTime por la duración. Entonces video.CurrentTime fácilmente propiedades que acabamos de ver, dividen esto por el video.duración. Para ejecutar esta función, entonces tendremos que añadir un oyente de eventos a un reproductor de video. Accede al video, agrega EventListener y esta vez en realidad no estamos lista ahora por un clic, queremos listar ahora para uno de los métodos incorporados. El método incorporado es esta timeupdate, que luego llamará a nuestra función de progreso de actualización. Vamos a probar esto en el navegador. Haga clic en Reproducir. En cuanto esto comience nuestra reproducción, entonces causaremos la actualización a nuestra barra de progreso. Pausa, y esto se detendrá. Bien. También trataremos de establecer la velocidad lenta y la ralentiza. También la velocidad más rápida aumentará esto también. Ya casi estamos ahí con nuestro reproductor de video y lo último a cuidar son estos botones de retroceso y avance. El modo de configurarlos es también hacer uso del CurrentTime y luego deduciremos un número de segundos y también aumentaremos el número de segundos dependiendo de qué botón se haya hecho clic. Todos tenemos acceso a ambos botones con las constantes de atrás y adelante. Puede estar en con la variable back agregando un EventListener. Es ahora por un click, que luego va a ejecutar una función. Volveremos a llamar a esto y luego accederemos a nuestro reproductor de video contesta el CurrentTime usando el operador de asignación de resta. Pongo esto igual a un valor de cinco, y esto deducirá cinco segundos, y luego restablecerá el CurrentTime para que sea igual al nuevo valor. Esto es simplemente un atajo y sería exactamente lo mismo que hacer video.CurrentTime es igual a video.CurrentTime quita cinco. Por lo que ambos son exactamente iguales. Al contrario, podemos simplemente Copiar y Pegar esto. Esta vez necesitamos escuchar el botón de avance. Función se puede llamar hacia adelante también. Esta vez la única diferencia es que queremos aumentar el tiempo en cinco segundos. Vamos a probar esto. Refrescar, que reenvío, y esto actualizará la barra de progreso. Haga clic atrás. Esto terminará a cinco segundos de nuestro CurrentTime. 55. Juego de caída de figuras: crear la interfaz de usuario: Bienvenido de nuevo. Tenemos un divertido jueguito para terminar con esta sección, que va a ser un juego de gota de forma. Esto va a hacer uso de la API HTML arrastrar y soltar, lo que significa que podemos crear todas estas formas. Tenemos una sección en la parte superior con contornos vacíos y luego las formas hacia abajo en la parte inferior. A continuación, el usuario puede arrastrar sobre estos y soltarlos en la ubicación coincidente correcta. Cada una de estas formas en la parte inferior tiene una forma correspondiente arriba en la parte superior. Si tienes estas bien, aumentamos la puntuación. Te equivocas estos, este puntaje se deduce por uno. Va a empezar en este video creando todo el HTML, así que básicamente la interfaz de usuario. Entonces en los próximos videos, haremos que todo esto funcione usando JavaScript. Este proyecto va a hacer uso de otra API web, que es la API de arrastrar y soltar. El API drag and drop nos da acceso a diversos eventos drag los cuales podemos usar dentro de JavaScript. Podemos escuchar cuando un elemento ha comenzado a arrastrar. Podemos escuchar cuando termine el arrastre. Podemos escuchar cuando un elemento está siendo arrastrado por encima, cuando se deja un objetivo en particular y también, escuchar cuándo se ha dejado caer este elemento. Esto es lo que vamos a utilizar en los próximos videos. Pero por ahora, vayamos a los archivos del proyecto y empezaremos dentro de la página del índice. Dentro del juego de gota de forma, esta es una página de índice bastante simple. Otra mitad es nuestra estructura muy básica la cual enlaza a un script.js vacío. Empecemos este proyecto. Ya he agregado algunos estilos a esto. Todo lo que hemos hecho aquí es agregar algunas clases que enlazan a diversas formas. Por ejemplo, tenemos varios rectángulos, tenemos pastillas, tenemos, tenemos cuadrados. Cada uno de estos es generalmente el ancho y la altura. Tenemos un color de fondo, y algunos de ellos también tienen un radio de borde. Saltaremos a nuestro HTML, crearemos todos estos elementos, y los vincularemos a las clases correctas. El guión está vacío para los futuros videos, y vamos a empezar en el index.html. Saltemos aquí y dentro de la sección del cuerpo. El apartado del cuerpo va a ser relativamente sencillo. Si nos fijamos en el juego final, tenemos una sección de cabecera con la puntuación y algo de texto y luego tenemos dos secciones separadas a continuación. Cada una de estas secciones va a ser una div gran forma. Entonces solo vincularemos estos a los nombres de clase para proporcionar cada una de estas formas y colores. En la sección de cuerpo, en la cabecera, que será para una sección muy superior. Como pueden ver, lo primero que necesitamos es un rumbo. Es h3. Diremos score, que sólo será texto codificado. Pero entonces justo después necesitamos un valor dinámico. Podemos rodear esto en un lapso, colocar en el ID de puntuación y luego rellenaremos el contenido del lapso más adelante usando JavaScript. Algo que no podemos ver en esta versión final es un botón llamado Play Again. Esto se debe a que ha puesto algunos sólo aparecerán al final del juego. Pero por ahora, colocaremos esto en y luego lo esconderemos más adelante para detectar Play Again. Entonces abramos nuestra versión dentro del navegador. Copiar el camino a nuestro índice. Deberías ver todos los estilos predefinidos ahora han pateado. El último que necesitamos dentro de este encabezado es el texto. Justo debajo del botón agrega un elemento p. El texto de drag, las coloridas formas en los agujeros coincidentes. Bien, después de haber hecho esto, entonces bajamos a nuestras dos secciones. El apartado superior va a ser la sección de soltar porque dejamos caer las formas dentro de aquí, y la de abajo va a ser la sección de arrastre. Estos son más o menos lo mismo. Van a tener los mismos nombres de clase para crear las formas. También añadiremos una clase adicional a la sección superior. Simplemente tienen el contorno más que el color de fondo sólido. Echemos un vistazo a esto. Se ve bien. Ahora, justo debajo del encabezado, crea nuestra primera, que es la sección superior dentro de un div, y danos una clase de la sección drop. Duplica esto, y nuestra segunda sección va a ser para la sección de arrastre. Podemos usar cualquier elemento que quieras para cada una de estas formas, solo va a ser un elemento vacío. Voy a ir por un div. No necesitamos ningún texto ni ningún contenido dentro del div porque usamos la clase CSS para enlazar esto y crear la forma en la página. Por ejemplo, sobre la clase de plaza. Guarda esto. Ahora aparece Square en la pantalla. lo vemos porque esta clase de cuadrado dentro de nuestro styles.css, justo aquí como el color de fondo y además tiene un conjunto de ancho y una altura. Esto colocará automáticamente nuestra forma en la pantalla. Lo mismo para todo el resto de las clases, duplicar esta y la segunda. Este es para nuestro rectángulo, número 3 es para el círculo, número 4, el cuadrado número 2. A pesar de que aquí tenemos algunas de las mismas formas como dos cuadrados diferentes, notarás que son diferentes tamaños para hacer el juego un poco más difícil. Tenemos el cuadrado número 2. El siguiente es para el número ovalado 2 y el rectángulo 2, el rectángulo número 3. siguiente es para píldora, ovalada, luego finalmente píldora número 2. Guardemos esto y echemos un vistazo a nuestro proyecto. Refrescar. Ahora hay formas ovaladas en la pantalla. Lo siguiente que hay que hacer es copiar básicamente todas estas secciones, todas las formas, y pegarlas dentro de nuestra sección de arrastre. Incluso todas nuestras formas ahora en su lugar. Pero ahora necesitamos mezclar la segunda sección porque si no teníamos todos estos en el mismo orden que arriba, será realmente juego fácil. Simplemente mezcla algunos de estos. Voy a hacer lo mismo que una versión final. Al principio tenemos el rectángulo, está en la parte superior, el cuadrado, el tercero es la píldora, el cuadrado 2. No importa si el tuyo es diferente o igual. Puedes hacerlo exactamente como te gustaría. Oval 2, píldora número 2 siguiente, círculo, rectángulo, y luego rectángulo. Eso está completamente bien, siempre esté en un orden diferente al de arriba. Para mantener nuestras formas consistentes en ambas secciones, hemos usado este mismo nombre de clase en las secciones superior e inferior. Pero el problema que tenemos actualmente en nuestra versión es que las formas en la parte superior tienen este color de fondo. Lo que queremos es igual que la versión final donde tenemos un contorno vacío. Podemos arrastrar estas formas hacia adentro, que luego rellenarán el color de fondo para dar la ilusión de que la forma se está cayendo en un agujero. Podemos hacerlo agregando una clase adicional. Si echamos un vistazo al interior de nuestras hojas de estilo y luego bajamos al fondo, tenemos esta clase de gota. Este es sin duda un borde morado, que vemos en la versión final alrededor de cada una de nuestras formas. También hemos eliminado cualquier color de fondo. Ahora dentro de nuestra página de índice en la sección superior, podemos agregar esta clase, he dejado caer cada una de nuestras formas. Podemos copiar y pegar esto si quieres, o puedes teclear esto. Lugares para cada una de nuestras formas. Tenemos que ahorrar, y vamos a revisar nuestra propia versión. Refrescar. Ahora tengo una forma vacía la cual ahora podemos mover cualquiera de estos elementos dentro. Por supuesto, si tratamos de hacer clic y mover alguno de estos, no vemos los eventos de arrastre que todavía. Pero esto es algo que habilitará en los próximos videos cuando hagamos uso de JavaScript. 56. Juego de caída de figuras: eventos de arrastrar y soltar: Como cabría esperar, simplemente colocando en elementos HTML regulares como tenemos aquí. Cuando tratamos de hacer clic y arrastrar cualquiera de esas formas, no pasa nada. Hacer que estas formas sean arrastrables, el primer paso es agregar un atributo llamado arrastrable y establecer estas para que sean iguales a verdaderas. Porque todos sabemos que las secciones inferiores son arrastrables, agregan a la sección de arrastre, y luego saltan a nuestra primera forma. Establezca arrastrable para que sea igual a un valor true. Ahora si tratamos de refrescar y dar click en alguno de estos elementos, ahora podemos arrastrar estos alrededor de la página. Todavía necesitamos configurar cosas como la zona de caída para permitir que estos caigan en su lugar. Pero por ahora, este es nuestro primer paso que tenemos que dar. Copia esto y pega esto en cada una de nuestras formas adicionales. Voy a probar esto. Bien. Ahora podemos moverlos a todos, pero realmente no podemos hacer mucho con ellos todavía. Esto se debe a que necesitamos una configuración exactamente lo que queremos hacer en cada etapa. El API drag and drop cuenta diversos eventos que podemos escuchar. Esto es lo que miramos inicialmente en el primer video. Podemos hacer uso de estos dentro de nuestros scripts, para saltar a nuestro scripts.js, que debería ser un archivo vacío. Entonces en la parte superior, lo que vamos a hacer primero es recortar todos nuestros botones con la clase de gota. En la página de índice, todas las secciones superiores tienen esta caída de clase. Podemos usar query select all para recortar todos estos elementos, y luego podemos recorrer estos elementos, y escuchar para que cualquier elemento se deje caer en las secciones. document.querySelectorAll como en la clase de drop, y luego podemos almacenar esto dentro de una constante llamada dropzones. Bien, ahora tenemos acceso a todas estas dropzones. Necesitamos entonces recorrer estos y agregar un oyente de eventos, para escuchar una gota. Agarra, todas las dropzones constantes, bucle sobre espera para cada uno, se va a ejecutar la función. Entonces cada una de estas formas pasará a nuestra función. Llamemos a estos el elemento, suelten los elementos, para que cada individuo 1, podamos agregar un oyente de eventos, que se trata de esto ahora, para el evento drop. Este evento drop está habilitado debido a la API de arrastrar y soltar. Esto es lo que vemos aquí donde se deja caer un artículo sobre el objetivo de caída válido. Separado por un comunista, va a desencadenar una función llamada HandleDrop. Para cada función justo arriba, caerá. Entonces todo lo que hacemos por ahora se coloca en un simple registro de consola, al menos ahora esto está funcionando. El texto de drop, por lo que este es el evento drop ahora atendido. Lo siguiente que tenemos que hacer es escuchar de nuevo el evento drag. Podemos hacer esto con un evento llamado arrastrar arranques y volver a la sección de eventos de arrastre. Este es uno que necesitábamos justo aquí. Este evento se dispara tan pronto como el usuario comienza a arrastrar en cualquiera de nuestros artículos arrastrables. Lo que vamos a hacer es acceder a nuestro documento completo y agregar un oyente de eventos para escuchar el evento drag start en cualquiera de nuestros elementos. Colocar en arranques de arrastre, que luego va a ejecutar una función llamada HandleDragStart. Para crear esto justo arriba, HandleDragStarts. Por ahora solo colocaremos en un registro de consola una vez más, comprueba que todo esto está funcionando. Arrastra arranca, y luego copiaremos y pegaremos esta sección que acabamos de crear, y añadimos esto justo debajo. La única diferencia es que va a reemplazar drag start con drag end, lo mismo para el registro de la consola y también el nombre y la función del evento. Esto ahora en su lugar, ahora podemos probar esto, asegurarnos de que su archivo esté guardado y luego vuelva a cargar el navegador, caer en la consola, y ahora podemos probar esto. Si hacemos click en alguno de nuestros elementos arrastrables, podemos mover estos y vemos que el evento drag start se ha disparado. Deja esto sobre uno de nuestros elementos. Vemos que el final del arrastre también se ha disparado. Pero una cosa que nos falta es este registro de consola o se dejó caer. De qué esperaríamos estos cuando repasemos una de nuestras zonas de caída, que es una de estas formas superiores, y estamos dejando caer elementos en cualquier parte dentro de éstas. Esperaríamos que este registro de consola fuera disparado. El motivo por el que no podemos caer es porque el comportamiento predeterminado es no permitir que las cosas se caigan en ninguna página web por defecto. Tenemos que evitar este comportamiento por defecto en nuestras dropzones. Podemos hacer esto escuchando un evento llamado dragover, y esto significa que estamos arrastrando un elemento a una zona determinada, donde queremos que se suelte. En la parte inferior, volveremos a recorrer todas nuestras dropzones y luego hacer un para cada bucle para acceder a nuestras dropzones. Para cada uno, que es cada una de nuestras formas vacías. Ejecutar una función. Esta función tomará un valor para cada una de nuestras formas. Podemos acceder al valor y luego agregar un oyente de eventos. Este oyente de eventos va a listar ahora para un evento llamado dragover. Este es el evento justo aquí, y se llama cada vez que un elemento arrastrado se mueve sobre unos objetivos de caída válidos. Básicamente quiero eliminar todos los artículos sobre esta sección superior. Se va a disparar este evento llamado dragover, separado por coma Gran función llamada AllowDrop, que luego podemos crear justo arriba. Ahora cuando hacemos clic en cualquiera de estos elementos, en nuestra versión y los arrastramos sobre cualquiera de estas dropszones con cualquiera para acceder a la información del evento, y luego podemos llamar a prevenir default. Recuerda que el comportamiento predeterminado era no permitir que esto se dejara caer. Ahora estamos anulando es permitir que ahora se llame a toda función sobre la parte superior. Vamos a probar esto, guardar y refrescar. Arrastre cualquiera de estos y luego colóquelos sobre un objetivo. Ahora vemos el texto de caído, y nuestra función ahora está funcionando correctamente. Bien. Ahora sabemos que esta función está funcionando y todos los demás también están disparando. Ahora podemos empezar a hacer que las cosas sucedan dentro de nuestro juego. Lo que queremos hacer es sólo permitir que una determinada forma se caiga sobre una determinada dropzone. Por ejemplo, sólo queremos que el rectángulo se suelte sobre el rectángulo y que se suelte un círculo sobre el círculo, dentro de nuestro index.html. Una forma de hacerlo es coincidir con las clases particulares, por lo que si arrastramos la clase de rectángulo, solo queremos que esto se suelte sobre la clase rectángulo en la dropzone. Para hacer que esto suceda en nuestra función de gota de mango, lo que tenemos que hacer es tener acceso a ambos de nuestros elementos. Tenemos que tener acceso al elemento que ha sido arrastrado, y también a los elementos que estamos cayendo. Podemos entonces comparar las dos clases son las mismas. Antes de permitir esta gota, podemos hacer esto dentro de nuestra función accediendo a la información de eventos, y esto nos dará acceso a todos los elementos con e.target. Podemos entonces acceder a nuestra lista de clases. Vamos a echar un vistazo a esto en el navegador. Refresca, arrastra el rectángulo y suelta esto sobre cualquiera de nuestros elementos. Esto lo hemos dejado caer por encima de la plaza en la parte superior izquierda, y recuperaremos una lista de clases que incluye drop y también square. Esto es exactamente lo mismo que lo que vemos dentro de nuestro HTML. Probemos una más. Intentamos el rectángulo, y éste también funciona. Es así como podemos acceder a las clases para los elementos caídos. Bueno, ¿cómo vamos a acceder a las clases para los elementos arrastrados? Bueno, una buena forma de hacer esto es por tienda esto dentro de una variable en la parte superior de nuestra página. Justo por encima de nuestras dropzones, decimos let selected. Podemos actualizar este valor dentro de la función llamada handle drag start. Recuerda, esto se dispara en cuanto empezamos a dar click en cualquiera de nuestros elementos en la parte inferior para iniciar el proceso de arrastre, y para ello, necesitamos acceder a la información del evento. Podemos eliminar el registro de la consola, y luego actualizar nuestra variable selectiva para que sea igual a e.target. Esto ahora significa que si volvemos a una función de caída de mango cerca de la parte superior, ahora tenemos acceso a ambos elementos. Tenemos acceso a la lista de clases de los elementos drop, y también arriba en la parte superior tenemos acceso a los elementos arrastrados con esta variable llamada seleccionada. Ahora podemos crear una sentencia if para comprobar si ambos elementos contienen las mismas clases. Puedo hacer esto primero accediendo a nuestra lista de clases, f e.target.classList, luego tenemos acceso a un método llamado contains. Lo que queremos hacer aquí es que estamos comprobando si el elemento en particular que hemos seleccionado, que es éste justo aquí, contiene la misma clase que éste justo aquí. Podemos pasarlo en Selected.ClassName. Podemos usar el nombre de clase único para este, porque sabemos que cualquiera de estos elementos de arrastre sólo va a contener una sola clase. Si esto es cierto, abriremos las calibraciones, pasaremos el registro de la consola, y podemos cambiar este para que sea el texto de correcto. Podemos entonces volver fuera de esta afirmación if, si esto es cierto. Si esto no es cierto, entonces ejecutará el código, justo debajo, donde haremos un registro de consola con el texto de incorrecto. Vamos a probar esto, sólo refrescar. En primer lugar, probaremos el comportamiento correcto, por lo que un cuadrado, arrastraremos esto al cuadrado correcto, que es éste, y vemos correcto. Vamos a arrastrar esto a un elemento incorrecto, obtendremos el texto de incorrecto. Se puede ver si vamos al juego final justo aquí, cuanto tengamos alguno de estos correcto, arrastrando éstos hacia la derecha o justo arriba. Esta forma ahora se retira de la sección inferior. De la forma en que podemos hacerlo, dentro de nuestras declaraciones if, ahora podemos eliminar el registro de la consola. Podemos agarrar los elementos seleccionados y ellos llaman al método remove. Probemos esto, actualicemos de nuevo, y arrastremos un rectángulo a un rectángulo, y luego elimina el rectángulo de la sección inferior. Bien. El siguiente que hay que hacer cuando tenemos una de nuestras formas en el agujero correcto, es asegurarnos de que el color de fondo se cambie al mismo color que la forma que se ha dejado caer en su lugar. Si dejamos esto en, ahora está heredando el color de fondo rojo, da la ilusión de que esto se cae en una forma particular. Ahora la forma en que podemos hacerlo, si echamos un vistazo a nuestro styles.css, la única diferencia entre estas dos formas, como ésta y ésta, es este fondo de ninguna. Esto se proporciona con la clase de caída, que está en todas las secciones superiores. Todo lo que necesitamos hacer cuando el usuario caiga la forma correcta en el agujero correcto, es quitar esta clase de drop, y abrir nuestro script. Esta es la sección correcta dentro de la sentencia if. Lo que vamos a hacer es agarrar nuestros elementos con E.target.ClassList. Esta lista de clases tiene un método llamado remove, como en la clase de drop, que luego eliminaría esta clase incluyendo el color de fondo, dejando que el color de fondo se llenara. Vamos a probar esto. Arrastre una de estas formas hacia el agujero correcto. Ahora se retira la forma de la parte inferior, y ahora tenemos el color de fondo muestra dentro del navegador. Vamos a comprobar si esto está bien cuando probamos uno incorrecto. Bien. Ahora todo esto está funcionando bien, y si echamos un vistazo a la versión final, lo último que quiero hacer es cambiar la opacidad cuando se haya arrastrado la forma. Por ejemplo, si nos alejamos esto, podemos ver la forma en el lugar original justo aquí ahora ha cambiado para ser un color más claro. Lo mismo si nos movemos en rojo, podemos ver la forma roja más clara se ha dejado en su lugar, y esto permite al usuario saber qué forma están arrastrando actualmente. Podemos hacerlo estableciendo la opacidad dentro de nuestro script, y comenzaremos cuando empecemos a manejar el arranque de arrastre. En primer lugar, seleccione el elemento con e.targets.style.opacidad. Bueno, estableceremos la opacidad para que sea igual a 0.5. Entonces podemos copiar esto, y volveremos a ajustar esto a uno dentro de mango drag end. Ya no necesitamos un registro de consola, pega esto en donde podemos establecer el valor para que sea igual a uno. Ahora como estamos accediendo a la información del evento, también necesitamos pasar esto a nuestra función. Guardar. Probemos esto y dentro de nuestra versión. Tan pronto como empieza a mover una de nuestras formas, la forma que ahora se deja en su lugar ahora es mucho más ligera. Esta es la funcionalidad drag and drop que ahora está en su lugar, y en el siguiente mejorará este juego agregando a la puntuación del usuario, manejando el final del juego, y también reiniciando el juego 2 con nuestro Botón Play Again. 57. Juego de caída de figuras: manejo del marcador y fin del juego: El juego no es funcional en cuanto al arrastrar y soltar. Pero para hacerlo aún mejor, podríamos hacer un seguimiento del marcador y también reiniciar el juego al final también. En primer lugar, empecemos abordando el marcador. En la parte superior del script, necesitamos una variable para almacenar esto, así que saltaré a la cima y crearemos una variable usando eso e inicializaremos una partitura con un valor de cero. Dentro de nuestro índice, salta a esta página, ya tenemos una sección de partituras por encima de la parte superior. Tenemos el texto de partitura dentro del rumbo de nivel tres. Ahora tenemos un lapso con el ID de partitura, cual vamos a actualizar dentro de nuestro guión y un lugar para obtener la partitura va a estar dentro de una sección de tirada de mango. Salta aquí adentro. Aquí va a ser donde comprobamos si ha caído la forma correcta dentro de la sentencia if. Si esto es cierto, justo por encima de nuestra declaración de retorno accederá a nuestra variable de puntuación e incrementará esta por el valor de una. Entonces necesitamos actualizar nuestra sección span, así aparece dentro del navegador. Podemos hacerlo agarrando document.QuerySelector como ID de puntaje. Pero quiero que el texto interno sea igual a nuestra variable de puntuación. Podemos copiar estas dos líneas, bien funcionan y luego podríamos hacer lo contrario justo debajo. Si eliminamos el registro de consola de incorrectos y lugares fuera de la sentencia if, la única diferencia es que vamos a deducir uno de la puntuación. Probemos esto, actualicemos el navegador, y si intentas una de las formas correctas, esto aumenta la puntuación. Probemos un segundo número 2. Todo esto es bueno y si intentamos una forma incorrecta, dejar esto en la puntuación se deduce por el valor de uno cada vez. Además, si actualizamos el navegador cuanto iniciamos el juego, también queremos asegurarnos de que la puntuación actual esté fijada en cero. Ya que ya tenemos nuestra puntuación para ser inicializados como el valor de cero. También podemos copiar esta actualización y podemos establecer esto justo por encima de nuestra función, así que refresca. Esto comienza con el valor cero. Intenta arrastrar una forma en, y esto aún se actualiza correctamente. El siguiente es este Botón Play arriba en la parte superior. Sólo queremos asegurarnos de que esto sea visible una vez que el juego haya terminado. Actualmente, si actualizamos la página, no queremos ver el botón Play Again porque ya podemos iniciar el juego arrastrando cualquiera de estas formas. Lo haremos fuera de nuestras funciones en la parte superior de la página es que empezaremos agarrando nuestro botón. Document.QuerySelector pasando en un botón. Este es el elemento que usamos para la sección justo aquí y luego almacenaremos esto dentro de una constante. Llamemos a esto StartGameBTN. En un principio, necesitamos acceder a nuestro botón de inicio del juego y configurar el tipo de pantalla para que sea igual a ninguno. El estilo de la propiedad de visualización igual a ninguno. Esto ocultará todo botón en el mismo inicio del juego. Entonces vamos a crear dos nuevas funciones. Una función va a manejar qué hacer con el inicio del juego, y luego una función para manejar el final del juego. Función y juego como configuras estos por ahora. Entonces una segunda función justo debajo, que es para juego de inicio. Empieza con la función de juego final y abre las llaves y al final del juego, queremos volver a introducir botón para que el usuario pueda reiniciar el juego. Todo lo que necesitamos hacer es copiar esta línea aquí donde configuramos el tipo de visualización y lo reemplazaremos cambiando esto para que esté en línea. Entonces dentro de la función de inicio del juego, necesitamos restablecer todo a su estado original. Esto incluye la puntuación. Esto incluye quitar el botón Play Again y también mover estas formas de nuevo a su posición. Podríamos hacer todo esto manualmente si quisieras, o será mucho más sencillo si actualizamos la página para darle el mismo efecto. Para ello, necesitamos acceder al Objeto Ventana, luego seleccionar la ubicación actual, y luego un método llamado recargar. Ahora tenemos nuestras dos funciones, y en realidad lo que necesitamos hacer es llamarlas en los momentos correctos. El juego de inicio es bastante simple, sólo lo llamamos cuando se hace clic en el botón Play Again. Tengo referencia esto dentro de botón de inicio de juego para acceder a esto, y luego escucharemos un click por asistir a un oyente de eventos como en un click. Entonces ejecutaremos nuestra función, que es iniciar juego. El juego final es un poco más complicado. Si pasamos a la index.html y dentro de la drag-seccion. Cada vez que arrastramos con éxito uno de estos a la misma forma, como este que acaba de aquí. Después desaparecerá el div en la sección inferior. Una por una, estamos moviendo cada una de estas formas. El juego está básicamente terminado cuando el envoltorio, que es la sección de arrastre no tiene más elementos hijos a la izquierda. El arrastre que primero empezaremos accediendo a nuestra sección de arrastre del guión. Haremos esto dentro de una gota de mango. Tiene las cosas fuera. Empezaremos dentro de un registro de consola donde seleccionaremos nuestro envoltorio así documento.QuerySelector. Esto tiene la clase de drag-section y luego nuestros elementos tienen acceso a una propiedad por el número de elementos hijo que contiene, que se llama ChildElementCount. Al final.ChildelementCount. Simplemente haré esto un poco más grande para que sea más visible. Guardemos esto y probemos esto dentro del navegador. Abre las Herramientas de Desarrollador, salta a la consola. Vamos a probar esto, nuestro registro de consola se ejecuta al inicio de la función drop. Tan pronto como dejamos caer alguna de estas formas en su lugar, si entonces ejecutas la función y nos das el valor de 10. Nuestro segundo debe ser nueve y el valor siempre es uno superior a la cantidad que vemos en la pantalla. Actualmente, tenemos el valor de nueve, vemos ocho elementos en la pantalla. El motivo es porque estamos haciendo un registro de consola de la parte superior de la función antes de que realmente eliminemos este elemento. Efectivamente, el juego termina cuando el valor actual es uno. En lugar del registro de la consola, podemos eliminar esto y convertir esto en una sentencia if al final abrir las llaves y comprobaremos si este valor es igual a uno. Si lo es, entonces llamaremos a nuestra función de fin de juego. Probemos esto, lo que ahora queremos hacer es asegurarnos de que lleguemos al final del juego. Una vez que coloquemos la última forma en su lugar, ahora deberíamos ejecutar la función de juego final, que la vinculará con acceso al botón Play Again. Así que refresca, y voy a pasar cada una de estas una por una, asegurándome de que todas estas sean correctas. Esa es una, y si dejamos caer el último en su lugar, ahora vemos que el botón Play Again ha aparecido en la parte superior. También podríamos quitar esta frontera abajo en la parte inferior, pero esto está bien por ahora. Podemos simplemente tomar esto está funcionando, la obra de nuevo. La función Play Again ahora recargará nuestra página y restablecerá nuestra página y restablecerá todo de nuevo al estado original. Si quieres hacer si el borde abajo en la parte inferior, lo podemos hacer también está en la función de juego final, podemos agarrar la drag-seccion con document.QuerySelector. Dado que se trata de una clase, usamos punto y agarramos la drag-seccion. Pero el estilo, el borde para ser igual al valor de ninguno. Probemos esto una vez más, acceda al inicio del juego. Completa este juego arrastrando todas las formas hasta la cima. Más uno, ahí vamos. Nuestro juego ahora terminó en el tablero ahora ha sido eliminado de la parte inferior de la página.