Desarrollo web full stack para principiantes, parte 3: Javascript y API

1. ¡Te damos la bienvenida al curso!: Bienvenido al desarrollo web full stack para principiantes. Este curso está diseñado para llevarte de principiante a desarrollador web, capaz no solo de construir interfaces de usuario front-end de un sitio web, sino también de diseñar y construir el backend con el que interactuar también. Entonces, ¿quién soy yo? Mi nombre es Chris y seré tu instructor para este curso. Soy desarrollador web y también productor de montones de tutoriales enseñando miles de estudiantes las habilidades que necesitan para construir sitios web y aplicaciones. Este curso es la tercera parte de la serie completa, donde seguiremos construyendo sobre todo desde las dos primeras partes de este curso. Este curso es todo sobre JavaScript, API, y trabajar con fuentes de datos externas. Empezamos por mirar los conceptos básicos de JavaScript y el control de flujo. Esto te dará una introducción a los conceptos básicos del lenguaje de programación JavaScript, incluido redondear las cosas con un proyecto Dragon Slayer. Después continuamos nuestro viaje de JavaScript mirando la manipulación de DOM, funciones y eventos, para luego terminar la sección con otro mini proyecto para darte algo más de práctica. Seguidamente pasamos a bucles, matrices, objetos, y expresiones regulares. No te preocupes si no estás seguro de lo que todo esto significa aún. Cubriremos todo lo que necesitas saber, para luego construir un divertido juego de emparejamiento de formas. Ve cómo encaja todo. Terminamos de este curso construyendo una canción encontrar aplicación. Aquí es donde las cosas realmente comenzaron a ponerse interesantes a medida que cubrimos API y recuperamos datos de fuentes externas. Aquí se conectará a la biblioteca de iTunes. Buscamos algunos datos que podemos seguir adelante y utilizar en nuestros proyectos. También nos fijamos en algunas características de JavaScript de próxima generación de ES6 y más allá. Todo mientras explicas las cosas de una manera sencilla, sencilla de entender, que incluso los principiantes entenderán. Junto con reforzar las cosas con algunos proyectos divertidos pero desafiantes en el camino. Espero que estén todos emocionados por aprender sobre JavaScript y API en la tercera parte de este curso. 2. Descarga los archivos de inicio: Bienvenidos de vuelta chicos. Entonces como ya saben, esta es la tercera parte de la serie. No es esencial que las dos primeras partes se completen antes de continuar con este curso, solo puedes acercar directamente si solo quieres aprender sobre JavaScript y API. No obstante, si no has completado las primeras secciones, algo que necesitarás para progresar con este curso son los archivos de inicio para la aplicación de búsqueda de canción. Si vas a la clase y das click en tu proyecto está aquí. Posteriormente en el curso cuando empecemos a trabajar con API, tendrá la canción finder.zip, HTML y CSS, o dictada desde las secciones anteriores del curso. Si aún no los has completado, solo tienes que descargar estos datos HTML y CSS. Entonces puedes continuar con esta causa como de forma normal. Pero si tomas alguna parte anterior o no, también necesitarás los archivos de inicio de JavaScript. Estos incluirán todo HTML, y CSS para que empecemos con el aprendizaje de JavaScript. Esto diremos fue crear las estructuras esqueleto de JavaScript o cada lección individual. Por lo que podemos sumergirnos directamente para aprender en nuestros Javascripts. Así que adelante y descarga los archivos que necesitas. Entonces pasemos a aprender todo sobre Javascripts. 3. Variables, cadenas y números: Vamos a dar inicio a esta sección viendo algunas de las más utilizadas y también algunas de las cosas más simples que JavaScript tiene para ofrecer. El primer concepto se llama tipos de datos. Los tipos de datos son bastante simples. Según suena, es un tipo de datos que estamos usando. Para empezar, he abierto los archivos de inicio de JavaScript en el número 1, que es variables, cadenas, y números. Después abre la página de índice, tanto en un editor de texto como también en el interior del navegador. En este video, vamos a ver dos de estos tipos de datos, y estos son cadenas y números. Una cadena es solo algún texto, como un nombre, y el número es, como has adivinado, un número que es positivo o negativo, como la edad de un usuario. Además, necesitamos una forma de almacenar estos valores también. Aquí es donde entran las variables. Vamos a ir a Chrome y abrir la consola, haría clic con el botón derecho y luego Inspeccionar. Entonces si vamos a esta pestaña de consola, que está justo aquí, esta es una consola donde podemos ejecutar algún JavaScript. Como siempre, si estás usando un navegador diferente, todos los principales navegadores tienen una herramienta de consola. Normalmente puedes encontrar esta consola desde el menú, a menudo bajo las herramientas de desarrollador. Ya hemos visto la pestaña Elementos y también echamos un breve vistazo a la pestaña Red también. Esta vez ahora vamos a estar usando esta consola. Para empezar, creamos una variable mediante el uso de la palabra clave var. Vamos a desplazarnos hacia adentro para que podamos ver esto un poco mejor. Escriba la palabra clave var. Una variable es simplemente un lugar para almacenar nuestros datos, como una cadena o un número. A continuación le damos un nombre a esta variable. Si quisiéramos almacenar el nombre de un usuario, simplemente podríamos almacenar el nombre así. Entonces nombre var es igual a “Chris”. Este símbolo igual asigna este valor a esta variable nombre de Chris. Entonces terminaremos esto con un punto y coma. Las cuerdas necesitan estar rodeadas entre comillas. Esto puede ser ya sea comillas simples, que es así, o comillas dobles como hemos usado aquí y luego pulsa “Enter”. Para llamar a esto en la consola solo escribiría el nombre de nuestra variable. Entonces si escribimos en nombre, entonces nos devuelven el valor de Chris. Vemos algunas flechas en el lado izquierdo. El flecha de los derechos son los insumos, que usted pone. Por lo que hemos agregado el nombre de Chris y luego regresamos hacia tenemos el valor de Chris. Si quisiéramos cambiar el valor de esta variable, podemos hacer lo que se llama reasignaciones, simplemente lo llamaremos un nombre de variable. Al igual que esto sin la palabra clave var y configurarlo en un nuevo valor con símbolo igual. Podemos agregar un nuevo nombre como Chris Dixon, y luego un punto y coma al final y golpear “Enter”. Ahora podemos volver hacia el valor de Chris Dixon. De nuevo, si solo llamas nombre, pulsa “Enter”, vamos a conseguir finalmente se devuelve una vez más. Podemos crear tantas variables como necesitemos, como nuestra edad también. Nuevamente, usando la palabra clave var, establecemos el nombre de la edad y establecemos esto en un valor de 34. Al trabajar con números, no rodeamos el valor entre comillas al igual que hicimos con la cadena. Simplemente escribimos el número así y luego pulsamos “Enter”. Si llamamos a nuestra variable de edad escribiendo en edad, entonces nos devuelven el valor de 34. A veces también se ve indefinido, igual que hemos visto aquí, como cuando establecemos una variable. Esto es sólo porque no se devuelve nada. En este caso, simplemente estamos configurando o asignando esta variable. Tendremos declarada nuestra variable nombre y edad. Pero, ¿cómo podemos ahora usar esto? Bueno, podríamos hacer algo como agregarlos a una frase. Si declaramos una nueva variable llamada unidas, podemos establecer esto igual a una cadena. Entonces “Mi nombre es” luego añadir un espacio. Entonces podemos agregar un símbolo más para agregar. Si es hasta el final de esto, voy a añadir nuestra variable de nombre. Entonces este será “mi nombre es” y luego Chris. A continuación, añade un símbolo más. Para agregar una segunda cadena, podemos agregar “y yo soy” luego un espacio, y luego agregar nuestra variable de edad al final. Entonces esto debería imprimirse, “Mi nombre es” Chris, “y yo soy” 34. Unir cadenas y variables como esta con el símbolo más también se llama concatenación o concat para abreviar. Pero este es solo un término de fantasía para unir estos juntos. Después pulsa “Enter” y podemos escribir en unidos, que son nombre variable. Ahora está nuestra cuerda, que esperábamos. JavaScript es también el lenguaje de scripting predeterminado para todos los principales navegadores. Por eso todo funciona bien dentro de la consola. Pero de manera más realista, queremos sumar al código más a nuestro proyecto. Si pasamos a nuestros archivos de inicio, nuevo, en nuestra primera, que es variables, cuerdas, y números, podemos llegar a trabajar en esto dentro de aquí. No necesitas usar los archivos de inicio si lo prefieres. Pero dirías que estaba escribiendo toda la estructura html que necesitamos cada vez. También será útil para futuras referencias también. JavaScript se puede agregar incluso la cabeza o la sección del cuerpo. A menudo se prefiere añadirlo a la parte inferior de la sección del cuerpo justo antes de la etiqueta de cierre. Esto significa que usted a continuación duró y no bloqueó que el resto del html se cargara. El JavaScript se coloca dentro de las etiquetas de script. Abramos la etiqueta de guión de apertura y cierre. Entonces podemos seguir adelante con la adición de nuestro código dentro, igual que hicimos dentro de la consola. Entonces al igual que lo hicimos antes, podemos agregar nuestra variable de nombre es igual a Chris. Para mostrar esto en la consola, podemos hacer un console.log. Entonces dentro del corchete podemos añadir nuestro nombre de variable. Así que guarde eso, despeje la consola y vuelva a cargar. Ahí está nuestro valor de Chris. Podemos entonces reasignar este nombre igual que lo hicimos dentro de la consola. Esta vez sin la variable y luego cambiar este para que sea mi nombre completo. Nuevamente, con la consola log la misma variable de nombre, recargar, y ahí está nuestro nombre de reasignación. Hagamos la edad siguiente. Por lo que var edad es igual a 34. También podemos hacer nuestra misma cadena que hicimos dentro de la consola de unidos. Podemos establecer esto igual a “Mi nombre es” añadir un espacio. Entonces podemos agregar nuestro nombre de variable, por lo que este será “Mi nombre es Chris”. Entonces la cadena de “y yo soy” espacio. Después agrega al final, la variable de edad con el punto y coma al final. Podemos console.log nuestra nueva cadena de unidos. Pasado a la consola, recargar, y ahora ahí vamos, ahí está nuestra cadena, que incluye nuestras variables de nuestro nombre y edad. Dijimos antes que podemos usar comillas dobles o simples cuando se trabaja con cadenas. Hay un caso en el que hay que tener cuidado. Si cambiamos nuestras cotizaciones para que sean simples, entonces es sencillo al inicio y luego al final de esta cadena, y luego también reemplazamos estas dos aquí. Entonces ahora todas las cadenas son simples, guardar y luego refrescar. Vemos que esto todavía funciona perfectamente bien. El problema surge cuando queremos utilizar una de las mismas comillas en nuestro texto. Si vas por, “yo soy”, en lugar de “yo soy”, así como así, podemos ver que aquí tenemos una letra azul para indicar un problema. Si guardamos y luego nos refrescamos, obtendremos un error de sintaxis. Esto debería porque nuestras cotizaciones ya no están en pares y las cosas están un poco mezcladas. Armonizar esto es bastante sencillo. Todo lo que necesitamos hacer es rodear la sección en el tipo opuesto de cotizaciones. Entonces aquí, en lugar de tener las comillas simples gratuitas, cambiemos estas alrededor de las que sean dobles. Igual que eso. Podríamos incluso simplemente cambiar esta sección aquí, o podemos cambiar todos estos sencillos para que sean dobles, excepto el que queremos aquí. De cualquier manera funcionará bien. Guarda y luego vuelve a cargar. Ahora nuestro trabajo de cuerdas está perfectamente bien con el apóstrofo aquí. Por lo que esto es sólo algo de lo que hay que tener en cuenta al usar cotizaciones. Ahora pasaremos al siguiente video donde echaremos un vistazo a la aritmética de JavaScript y a los operadores. 4. Aritmética y operadores en Javascript: En el último video, nos introdujeron números en JavaScript por tienda en nuestra era en una variable. Aunque hay mucho más que podemos hacer con estos números. Vayamos a la consola y veamos esto en acción. Si hacemos clic en este símbolo aquí y despejamos la consola, ahora podemos empezar a echar un vistazo a los números y la aritmética. Empecemos con alguna aritmética básica, como la resta, la multiplicación, la adición y la división. Entonces aquí dentro, simplemente podemos decirlo 10, quitarle cinco, y luego regresar, obtenemos el valor de cinco. Podemos seguir adelante y hacer 34. Una multiplicación es el símbolo de inicio. En primer lugar, multiplicar por 7, y ese es un valor de 238. adición es el símbolo más que ya has visto antes. Por lo que 12 add 6 es 18. Si queremos dividir en JavaScript, es la barra inclinada hacia adelante. Tres divididos por tres nos da un valor de uno. Probemos con otro. 12 dividido por 4, que es 3. También tenemos módulo, que es un símbolo por ciento. Hagamos 12 por ciento y luego tres. Modulus es el resto que queda después de dividirse. Tres entra en 12 por igual. No queda nada. Lo mismo si hacemos 12 y luego cuatro. Cuatro entra en 12, 3 veces sin nada más. El valor es 0. No obstante, si cambiamos a ser 13, y luego libres, libre albedrío entrará en 13, 4 veces haciendo 12. Con una sobra. Es por ello que obtenemos el valor de uno justo aquí. Todas estas adiciones, restas, multiplicaciones, divisiones, y también modulus, un papel, lo que llamamos operadores aritméticos. El AMA operadores dos en JavaScript. Cubriremos estos dos a medida que pasemos por este curso. Estos operadores también se pueden utilizar para valores almacenados en variables también. Pasemos a nuestro archivo de inicio en el número dos, que es aritmética y operadores. Vamos a cerrar esto. Abre nuestra segunda página de índice, y también abre esto en el navegador. Solo voy a copiar el camino desde aquí y luego pegar esto en el navegador. Primero veamos algunos operadores aritméticos dentro de nuestro editor de código. Entonces justo aquí se pueden ver todos los operadores que tendrán dentro de un comentario. Asignemos 0s esto a partir de variables. Variable, así que digamos que salió de la escuela a los 16 años. Entonces podríamos decir nuestra edad. Mi edad es de 34 años. Entonces podemos hacer algunos cálculos para averiguar cuántos años desde que salimos de la escuela. Vamos a crear una nueva variable llamada años desde la escuela. Entonces podemos establecer esto a nuestra edad. Mi edad es de 34 años. Quitarle el número de años desde que salimos de la escuela, que se almacena dentro de esta variable. Esto se traducirá a 34, comida para llevar 16. Echemos un vistazo a esto con un registro de consola. Al igual que lo hicimos antes a un console.log y luego podemos pasar en nuestra variable de años desde la escuela. Ahora la consola debe hacer estas fotos de cálculo. Por lo que refresca. Ahí tenemos un error ortográfico. Por lo que console.log refrescar. Por lo que su número 18. Otra cosa que puede hacer subir a la gente es lo que se llama precedencia de operador. Este es sólo un nombre elegante para el orden en que suceden las cosas. Si creamos una variable que almacene el valor de los números libres, así como esto. Vamos a desplazarnos hacia abajo, vamos a añadir un comentario. Entonces orden de operación. Dibujemos un número como 10 más 10 multiplicado por 2. Entonces es a un segundo registro de consola. Podemos iniciar sesión en la consola el valor del número. Guarda eso, recarga y obtienes el valor de 30. Si volvemos atrás y miramos nuestro número, posible que esperemos que el cálculo se ejecute de izquierda a derecha. Diez más 10 es 20 multiplicado por dos es 40. De hecho, lo que pasa es que una multiplicación ocurre primero. Diez multiplicado por 2 es 20, y luego se suma el 10, dándonos un valor de 30. Este es el valor que se ve en la consola justo aquí. Esto se debe a que la multiplicación y también la división tienen mayor precedencia que la resta o la suma. Si queríamos cambios. Entonces el 10 más 10 sucede primero. Podemos envolver estos dentro de corchetes, también llamados paréntesis. Al igual que esto. Estos corchetes, se asegurarán de que este cálculo se realice primero. Este será 20 multiplicado por dos dado un valor de 40. Echemos un vistazo a esto en una consola al refrescar. Hay un valor de 40. También vale la pena señalar, que si todos los operadores tienen igual precedencia, entonces el cálculo se realiza de izquierda a derecha. Este será el caso si todos los operadores fueran suma o resta. Dijimos antes estas adiciones, multiplicaciones y demás. ¿ Quién llamó a los operadores? También hay dos operadores más disponibles herramientas llamadas incremento y decremento. Vamos a darle una oportunidad a esto. Si ahora salarios comunes consola log con las dos barras inclinadas hacia adelante. También éste de aquí. Para darnos una consola clara. Debajo de esto, queremos crear una nueva sección, y esto es para incremento y decremento. Ahora sabemos que es número de variable es un valor de 40. Si vamos a seguir adelante y sumar número más, más, así como esto, esto incrementaría el valor en uno cada vez. Si guardamos esto y pasamos a la consola con un registro de consola del número. Esto debería ahora incrementar el valor de 40 para ser 41. Si fuéramos a seguir adelante e incrementar esto de nuevo, tenemos número plus, plus. Esto debería darnos ahora un valor de 42. Esto es algo que veremos con bastante frecuencia en JavaScript, particularmente cuando se usan bucles. Ahora echemos un vistazo a los decrementos, que como habrás adivinado, reducirán el valor en uno cada vez. Voy a hacer esto con los símbolos negativos, así como eso y recargar. Ahora nuestro valor inicial de 40 se reduce ahora a 39.Esto es algo común que hacer para aumentar en un lugar llamado, por ejemplo, o aumentar el número de artículos en la cesta de la compra. Esto es algo realmente útil saber cuando se usa JavaScript. 5. Alerta, aviso y confirmación: Ya hemos mirado el uso del registro de la consola en esta sección. Esto es útil para imprimir cosas y depurar. Durante el desarrollo, No se pretende como una forma de comunicarse con los usos de nuestros sitios web o aplicaciones. No obstante, existen algunas formas, múltiples, más precisas, algunos métodos más que podemos utilizar para comunicarnos con el usuario. El primero de éstos es una alerta. utiliza una alerta para abrir un cuadro de alerta al usuario. Las alertas son como un cuadro emergente con cierta información y un botón de OK para hacer click para cerrar esta ventana emergente. En su más básico, simplemente podemos enviar algo al usuario. Pasemos a nuestros scripts dentro de nuestro archivo de inicio. Vayamos al número tres, alertas, avisos y confirmamos. Ahora abre esto y luego ve a copiar la ruta y luego pegar está dentro del navegador o simplemente puedes hacer doble clic en el archivo de índice dentro de la carpeta. Abajo bajo el nivel común de alerta, que va a generar una alerta Popup y luego dentro aquí podemos hacer cualquier cosa que queramos como un cálculo. Diez módulo y luego tres da un guardar y abrir esta página de índice en el navegador. Refresh. y ahí está nuestro cuadro de Alerta en la pantalla con el valor de uno. Podemos usar esto para agregar algún impuesto también en lugar de un cálculo. Recuerda que las cadenas de texto tienen las citas. Entonces digamos hola, refresca. Como nuestro texto justo aquí, esta alerta puede incluso contener variables demasiado como nuestro ejemplo de nombre de antes. Teníamos una variable de nombre igual a Chris. Podríamos seguir adelante y agregar esto al final de nuestra cuerda. Hola más nuestro nombre de variable. Guarda eso y ahí iremos dice hola Chris, dentro de la alerta. Si seguimos adelante y agregamos aún más texto a nuestra alerta, agreguemos algo más de texto justo después de esto. Digamos que por favor inicie sesión para continuar, guarde eso y recargue. Por defecto. Todo esto se queda en una sola línea. Podemos romper esto en una nueva línea usando una barra inclinada y luego una N. Dentro de nuestra cadena aquí, vamos a agregar la barra contraria y la N. Esta barra inclinada seguida de una N, puede parecer un poco inusual, pero vamos a cubrir lo que es esto y también algunos similares más adelante cuando miramos las expresiones regulares. Por ahora vamos a dar ese guardar, recargar y ahora es un salto de línea justo después de este N. El siguiente que quiero mostrarles es pronta. Esto aparecerá al preguntar al usuario por alguna entrada. Vamos, comentemos a estos dos fuera con barras hacia adelante y luego bajemos a esta sección de baile. Empecemos con un simple prompts que es el nombre de los prompts y luego los corchetes justo después. Dentro de aquí podemos agregar una cadena de texto así que hola, ¿cuál es tu nombre? Con un signo de interrogación, página de índice y así es como se ve un prompt por defecto. Obtenemos un texto, que hicimos justo aquí y luego obtenemos una sección de entrada donde el usuario puede escribir alguna información. Esto incluso puede ser cancelado o dar click en ok. Si ingresamos nuestro nombre como Chris dentro de aquí, y luego presionamos 'ok', no parece pasar nada. Esto se debe a que necesitamos una forma de almacenar la entrada del usuario. Ya sabemos que podemos hacer esto usando una variable. Vamos a establecer estas indicaciones para que sean iguales a una variable. Digamos que var nombre es igual a indicaciones y luego para ver esto en acción, podemos hacer un registro de consola y luego registrar el valor de nuestro nombre solo para recapitular, estamos solicitando al usuario que introduzca su nombre, instalará todas estas entradas dentro de una variable llamada nombre, y luego mostrando esto dentro de la consola. Guardemos eso y probemos esto. Diga Chris, está bien, haga clic derecho e inspeccione. Abre la consola y ahí está nuestro valor de Chris. Probemos una más. Simplemente escribe cualquier cosa dentro de aquí y ahí está el valor almacenado dentro de esta variable de nombre. Este prompt si devuelve el valor ingresado por el usuario, como acabamos de ver o podemos seleccionar consola. Hacemos clic en botón de consola aquí, luego obtenemos el valor de null devuelto. A menudo te encontrarás tanto nulos como indefinidos. Ambos generalmente significan que falta algo. Tanto nulos como indefinidos también consideraron los tipos de datos, igual que el número y la cadena que ya has visto. Pasemos a nuestro editor de textos y creemos una alerta. Demos la bienvenida al nuevo usuario con el espacio de bienvenida textil como nuestro nombre de variable y luego añadamos una cuerda al final con un signo de exclamación. Si guardamos eso, recargar, podemos agregar nuestro nombre, golpear “Ok” y ahí está nuestra cadena de texto de bienvenida, Chris, con la exclamación al final. Si recargamos el navegador y en su lugar presionamos “Cancelar”, obtendremos la palabra welcome null. Nulo se refiere a una referencia de objeto en blanco. Puede que no tenga mucho sentido por el momento porque aún no hemos mirado cuáles son los objetos. Pero generalmente significa que falta algo. Básicamente, prompt devuelve incluso nada. Todo el valor que se escribe, indefinido es un poco más genérico. Un ejemplo de indefinido es cuando una variable está vacía. Si seguimos adelante y creamos una nueva variable, digamos nuevo nombre y entonces no ponemos un valor a esto. Si alertamos el valor de nuevo nombre y luego guardamos eso, refresca, dice nuestras alertas iniciales, cancelemos lista y luego obtenemos nuestra segunda alerta la cual dice es indefinida y este es el valor de nuestra variable indefinida aquí. A continuación queremos echar un vistazo a algunos bastante similares a prompt. Comentemos estas tres líneas aquí. Si se utiliza el comando Código de Visual Studio y barra inclinada hacia adelante comentarán todas las líneas juntas. Ahora bajemos a confirmar. Justo aquí abajo, podemos echar un vistazo a cómo se utiliza una confirmación. Al igual que los dos primeros, escribimos el nombre y luego los corchetes justo después. Empecemos agregando en una cadena de texto. Debes ser mayor de 16 entrar, digamos, por favor confirme y luego obviamente navegador cerrarlo desde antes, recargar. Ese es el texto que vemos aquí. También tenemos un botón de cancelación y un botón de OK. Vamos a dar click en el cancel y también bien. No parece pasar nada cuando hacemos clic en estos botones. Dado que confirmar no tiene campo de entrada , devolverá verdadero. Si el usuario hace clic bien, todas las caídas es que está seleccionado el botón de cancelar. Podemos volver a ver esto ajustando esto a una variable. Digamos que var edad igual a confirmar. Después un log de consola, que pasa en nuestra variable de edad. Entonces esto echa un vistazo a esto. Abre el cancel Haz clic en la consola. Vamos a recargar. Si hacemos click en ok, obtendremos el valor de true entonces si hacemos click en cancel, obtenemos el valor de false. Este valor verdadero o falso es también otro tipo de fechas JavaScript importante que se llama booleano. Booleano a simplemente un valor verdadero o falso. Una vez que obtenemos estos valores verdaderos o falsos, necesitamos una forma de hacer algo con ellos. Por ejemplo, si los usuarios mayores de 16 años, podemos dejarles ver la página o si el usuario está conectado, podemos dejarles ver la sección admin para ayudar a decidir qué hacer en estos casos, tenemos declaraciones condicionales, y esto es lo que empezaremos a mirar a continuación. 6. Sentencias if/else y comparación: En el último video, mencionamos valores booleanos que son verdaderos o falsos. También necesitamos una forma de realizar realmente una acción basada en si un valor es verdadero o falso. Para ello, tenemos declaraciones condicionales. Por ejemplo, si la salud de un jugador es cero o menos, el jugador perderá la vida. Si un jugador recoge 100 monedas, entonces podemos añadir una vida extra. O si la hora actual es la mañana, podríamos agregar un mensaje de buen día. Si fuera por la tarde, podríamos cambiar el mensaje para ser Buenas tardes. Básicamente, estas declaraciones condicionales nos permiten decidir qué queremos que haga nuestro código bajo diferentes circunstancias. Un tipo común de declaración condicional es If else. Empecemos con la sección If. Esto básicamente dice si algo es cierto, entonces ejecuta este código. Yo quiero iniciar un archivo. Abramos el número 4, que es si lo demás y la comparación. Entonces voy a abrir esto dentro del navegador. Después, hasta nuestra sección de guiones, podemos comenzar a crear una declaración if. Agregamos la palabra clave If seguida de los corchetes o paréntesis. Después agregamos un conjunto de llaves, donde podemos agregar nuestro código que queremos ejecutar. Digamos que queremos agregar una alerta para nuestro mensaje. Tenemos que añadir una condición donde uno esté alerta para correr. Dentro de estos corchetes aquí agregamos nuestra condición. Decimos que si 10 es mayor que 5, entonces ejecuta esta alerta. Añadamos algunos textos diciendo que 10 es mayor que 5. Si esto es cierto, se ejecutará esta alerta. Si esto no fuera cierto, entonces no conseguiríamos que nada pasara en absoluto. Guarda eso, recarga y ahí está nuestra alerta diciendo que 10 es mayor que 5. Este símbolo mayor que el es un operador de comparación. Hay mucho más que podemos usar, como el símbolo menos que. Ahora 10 no es menor a 5, por lo que esto será falso. Significa que si vamos al navegador y actualizamos, la sentencia ahora es falsa, por lo que no veremos la alerta. Esto se debe a que como mencionamos antes, el código sólo se ejecutará si la condición es verdadera. También podemos combinar estos símbolos mayores que y menores que con el operador igual también. Por ejemplo, si cambiamos esto a ser 10. Si dijéramos si 10 es mayor que 10, entonces haz esta alerta. Refrescar. No vemos la alerta porque 10 no es mayor a 10. No obstante, si queremos hacer un cheque para ver si 10 es igual o mayor que, podemos combinarlos así. Mayor que o igual a. Ahora nuestra condición debe ser ahora cierta. Entonces vemos la alerta. Esto también funciona con menos que demasiado, como cabría esperar. Si 10 es menor o igual a, entonces ejecute la alerta. Esto puede ser confuso al principio porque ya hemos usado este símbolo igual para asignar un valor a una variable. Antes estábamos haciendo cosas como var x es igual a 5. Aquí estamos asignando el valor de 5 a esta x con el símbolo igual. En cambio al comparar, usamos el doble igual. Podemos decir si x es igual a 10, entonces alertar el valor de true. Guarda eso y refresca. Por supuesto que no obtenemos la alerta apareciendo porque x no es igual a 10. También podemos añadir un signo de exclamación para hacer lo contrario. Una exclamación y luego igual. Si x no es igual a 10, ahora deberíamos hacer aparecer la alerta. Probemos otra cosa. Si agregamos un número, por lo que ya tenemos el valor de x igual 5. Si agrega una segunda variable de y, y esta vez si establecemos el número dentro de unas citas así como esta, esto ahora se considerará una cadena porque está dentro de unas citas. Podemos echar un vistazo a esto si hacemos un registro de consola para cada variable. Hagamos un registro de consola justo debajo. Podemos decir tipo de y luego x. Guardar eso. Si abrimos la consola, ahora deberíamos ver qué tipo de datos se contiene dentro de x Vemos que la x es un número que esperaríamos porque lo hemos declarado justo aquí. No obstante, si seguimos adelante y cambiamos esto para ser y, refresca. Ahora vemos que el tipo de datos es string porque esto se agrega dentro de las cotizaciones. Con este conocimiento, veamos cómo esto afecta nuestra comparación. Vamos a seguir adelante y comparar el valor de y, que es una cadena a 5. Voy a ahorrar. Esta es una cadena y este es número. En teoría, no deberían funcionar. Refrescar. Todavía vemos el pop-up. Esto se está evaluando a cierto a pesar de que está comparando un número con una cadena. Esto se debe a que el doble igual solo verificará el valor en lugar del tipo de datos si queremos que esta comparación sea aún más estricta y también verificará si el valor así como el tipo de fecha es igual. Podemos seguir adelante y cambiar esto para que sea triple igual. Guarda eso, recarga. Ahora no vemos el pop-up porque el tipo de datos no es igual. Probemos esto con x y x es un número. Estamos comparando si x es igual a 5, tanto en valor como también tipo de datos. Es por supuesto, debe ser cierto. Vemos el pop-up o verdadero. Esto funciona porque x es igual tipo y valor a 5. No obstante, también podríamos añadir un signo de exclamación y los dos iguales, y esto hará exactamente lo contrario. Esto sólo ejecutará la alerta si x no es igual a y valor a 5. Si guardamos y recargamos, ya no vemos la alerta. Es así como podemos usar los operadores de comparación, y son realmente útiles cuando se combinan con sentencias if. Como acabamos de ver, es si sentencia se ejecutará si algún código es cierto. Pero ¿y si queremos una alternativa para correr si algún código no es cierto? Para esto, necesitamos agregar una segunda condición llamada else. Eliminemos este ejemplo de antes y creemos una nueva variable llamada hambrienta, e inicialmente establecemos esto para que sea cierto. Entonces podemos decir si tiene hambre, entonces dentro de las cotizaciones podemos alertar, 'conseguir algo de comida! '. Igual que eso. Si solo agregamos el nombre de la variable así, esto comprobará si la variable es verdadera. Entonces si lo es, ejecutará algún código. Guardemos, refresquemos, y ahí está nuestro texto de conseguir algo de comida. No obstante, si queríamos una alternativa, también podemos agregar más. El segundo bloque de código ejecutará una alerta si la condición es falsa. Esta vez digamos, tal vez más tarde. Si cambiamos hambrientos para ser falsos, esta afirmación si ahora es falsa. Por lo tanto, este código no se ejecutará. Pero en cambio la declaración else se ejecutará alertando, tal vez más tarde. Probemos esto en un navegador. Refrescar. Ahí está nuestro texto de 'quizá tarde'. Probemos esto una vez más cambiando esto a cierto. Ahora conseguimos, traemos algo de comida. Estas declaraciones si else realmente son una parte fundamental de JavaScript y también la programación en general. Si aún estás un poco inseguro, te recomendaría volver a través de este video para entender mejor cómo funcionan. A pesar de que obtendrás mucha más práctica para esta sección. A continuación, vamos a llevar las cosas aún más allá anidando juntas estas declaraciones. 7. Anidación de sentencias if else: Pasemos a nuestros archivos de inicio y a nuestra sección de declaraciones condicionales de anidación. Aquí en nuestro último ejemplo fue un simple if-else para comprobar si la condición es verdadera. Por lo que comprobamos si la variable de “hambriento” se estableció en verdadera. De ser así, alertamos el texto sobre “Consigue algo de comida”. De lo contrario, conseguiremos el texto de “Tal vez más tarde”. En ocasiones puede que queramos comprobar si más de una condición es verdadera antes de ejecutar nuestro código. Para esto, podemos anidar nuestras declaraciones if-else. Para ver esto en acción, voy a añadir una segunda variable. Entonces agreguemos una segunda variable de “antojo”, y quiero poner esto en “Pizza”. Entonces dentro de esta primera sección “if”, voy a anidar en una segunda afirmaciones “if”. Hagamos algo de espacio para que esto quede más claro, así que diremos si “antojo” es igual a “Pizza”, entonces podemos agregar nuestro bloque de código para decir alerta, “Gimme pizza”, y también podemos quitar esta alerta de aquí también. Entonces primero nos registramos si el padecimiento es cierto comprobando si la persona tiene hambre. Si es cierto, entonces también hará una segunda comprobación para ver si el antojo es igual a la pizza, y luego dirá “Gimme pizza”. De lo contrario, conseguiremos el texto de “Tal vez más tarde”. Guardemos eso y abramos esto en el navegador y actualicemos y hay un texto de “Gimme pizza”. Pero ¿y si la primera condición fuera cierta, si hambriento pero no estás ansiando pizza? Entonces cambiemos esta variable por otra cosa, como, “chino”. Guarda eso y luego refresca. Por lo que no vemos ninguna alerta. Esto se debe a que aunque el hambre se establece en realidad, antojo ya no se establece en “pizza”. Por lo tanto, esta alerta no se ejecutará. Para este caso, también podemos proporcionar una declaración “else”, que también está anidada dentro de aquí. Entonces “otra cosa”, y luego dentro de este bloque, podemos poner una alerta con el texto de “Vamos a conseguir algo de comida”. Recuerda si quisieras agregar un apóstrofo en así, esta cita simple es la misma que las dos salidas, por lo que necesitábamos cambiar esto para que sean citas dobles para que esto funcione. Dale un ahorro a eso, y luego si pasamos al navegador y luego recargamos, obtenemos el texto de, “Vamos por algo de comida”. Esto se debe a que esta declaración “if” es originalmente cierta, lo que, por lo tanto, pasará a la segunda aquí. No estamos ansiando pizza, así que no tenemos esta alerta aquí. Cualquier sobrevalor hará que se ejecute la declaración “else” y luego imprimirá el texto de, “Vamos a conseguir algo de comida”, y como era de esperar, si cambiamos “hambriento” para ser falso, esta declaración “if” no se ejecutará en absoluto. En cambio, se ejecutará la declaración “else” y obtendremos un texto de “Tal vez más tarde”. Entonces así es como podemos anidar declaraciones if-else dentro de otros. Podemos ir aún más lejos y anidar dentro de esta declaración “if” también, pero generalmente no queremos profundizar demasiado porque esto hace que nuestro código sea más complejo e ilegible, y a menudo hay soluciones más elegantes para esto. Es así como podemos anidar nuestras declaraciones condicionales, y a continuación vamos a echar un vistazo a else-if. 8. Operadores else if y lógicos: Hemos aprendido que si las declaraciones comprueban si una condición es verdadera, entonces de lo contrario atrapa todos los casos. Hay un primer caso que podemos usar llamado else if. Utilizamos else if to check a new condition, si la primera condición es falsa. Podemos usarlo así. Entonces dentro de nuestra declaración anidada if else, voy a agregar una declaración else if. Entonces justo después de esta apertura, conjunto de bases rizadas, vamos a agregar else if, y luego abrir y cerrar un nuevo conjunto de llaves, empujando la última declaración else hasta el final. Dentro de aquí, podemos agregar algunos corchetes más para comprobar si una condición es verdadera. Entonces digamos si el antojo es igual al chino. Entonces de nuevo, estamos comprobando si la variable es igual a hambre. Entonces pongamos esto en verdad. Si lo es, entonces se mueve a este bloque anidado aquí. Entonces, en primer lugar, comprueba si el antojo es igual a la pizza, entonces ejecutará esta alerta aquí. De no ser así, la segunda condición de else if, se ejecutará entonces, y en esta ocasión podemos hacer una alerta. Entonces digamos que esta vez dame chino, así como eso. Si la pizza o el chino no es el valor del antojo, esta declaración else correrá al final, diciendo: “vamos por algo de comida”. Entonces guarde eso. Entonces ahora nuestro antojo es chino. Ahora deberíamos ver el texto de dame chino. Probemos algunas opciones más. Si cambiamos esto a pizza, obtenemos pizza, y si cambiamos esto para que sea algo diferente, digamos pollo, refresca. Tenemos un refrán que dice: “vamos a buscar algo de comida”. También sólo para que quede claro, tenemos este else if block, anidado dentro de estas declaraciones if. Pero funcionó perfectamente bien si no anidado. Antes de terminar este video, quiero mostrarles algunos operadores lógicos que les resultarán útiles. Los operadores lógicos pueden sonar complejos, pero son simplemente y o no. Entonces comentemos este ejemplo y echemos un vistazo a estos signo común todo el código de antes, dejando en las dos variables. Entonces digamos si tiene hambre, entonces y con los dos ampersands, el antojo es pizza. Entonces podemos agregar nuestra alerta desde antes de decir, “dame pizza”. Entonces ahora comprobaremos si dos afirmaciones son ciertas. Entonces estamos comprobando si el hambre es cierto y también si el antojo es igual a la pizza. Cambiemos esto a pizza y veamos qué pasa. Refrescar. Ahí está nuestra alerta. Si cerramos esto y cambiamos alguno de estos para que sea falso, no vemos la alerta que aparece. Probemos al revés. Cambiemos esto para que sea pollo. Nuevamente, ambas condiciones necesitan ser ciertas para que este código se ejecute. Si sólo queremos que una de estas condiciones sea cierta, entonces por ejemplo, si tenemos hambre o anhelo es de comida, entonces podemos ejecutar este código. Entonces, en lugar de que ambas condiciones necesiten ser ciertas, podemos ejecutar este código si sólo uno evalúa a los pocos. Podemos hacer esto con el u operador, que son las dos tuberías, así como eso. Ahora sólo tenemos una de estas condiciones evaluada a verdad, que es hambrienta. Así que guarda, refresca, y ahora funciona la alerta. Entonces si miras y todo, el último que quiero mostrarte es el no operador. Este es el signo de exclamación que miramos antes. Miramos esto usando la declaración if para comprobar si algo no es igual. Entonces vamos a quitarnos toda esta sección, allá y aquí, incluso hambrientos, entonces podemos añadir un signo de exclamación dentro de aquí. Entonces si no tiene hambre o si esto significa falso, entonces tendremos la alerta. Entonces, antes que nada, vamos a guardar y luego a refrescarnos. No vemos nada. No obstante, si cambiamos esto para que sea falso y luego ejecutamos el código, ahora vemos la alerta. Entonces esto básicamente hace lo contrario, así que aquí estamos diciendo si no tiene hambre, que es falsa, entonces ejecuta este código dentro de aquí. Entonces esto es todo ahora para si otra y también else si junto con los operadores lógicos. Espero que eso tenga sentido y no demasiado abrumador. Recuerda, mucho de esto solo requiere práctica, y obtendremos mucho más a medida que avanzas por este curso. 9. El operador ternario: Otro tipo de declaración condicional se llama el operador ternario, así que asegúrate de estar en el número siete, que es el archivo de inicio del operador ternario E. Entonces podemos llegar a trabajar en la sección de guiones a continuación. El operador ternario se utiliza a menudo como una alternativa más corta a las declaraciones if else. También es una declaración de una sola línea, por lo que puede parecer un poco más simple. Empezamos por agregar una condición que queremos comprobar, como un cálculo. Nosotros decimos que diez es mayor a cinco. la condición le sigue entonces el signo de interrogación, luego declaramos lo que queremos que suceda si el resultado es verdadero o falso. El primer enunciado es cierto, separado por dos puntos, y el segundo es falso. Lo que estamos diciendo aquí es que si diez es mayor que cinco, el primero es texto impreso de verdad, el segundo es simplemente texto impreso de falso. Si guardamos esto en y abrimos este archivo en el navegador, refresca, no vemos que suceda nada al principio. Esto se debe a que necesitamos generar la respuesta, como un registro de consola. Antes de esto vamos a agregar un console.log y luego dentro del corchete podemos añadir este operador ternario completo. Ahora si guardamos, actualizamos y luego abrimos la consola, pincha en la pestaña de la consola, y luego tenemos el texto de true, porque diez es mayor que cinco. Si cambiamos esto para ser diez es menos de cinco, entonces obtenemos la segunda opción de falso. Probemos esto y eso cae dentro del navegador. Posteriormente, también veremos algunas formas de mostrar las cosas en una página web en lugar de en la consola o usar alertas. También podemos estancar esto resulta en una variable también. Volvamos atrás y sumamos nuestra variable de hambre en pequeño y valor de búsqueda de verdad. Debería mover este log de consola y luego podemos decir, var, si como, entonces podemos ponerle esto a nuestro operador ternario. El padecimiento que queremos comprobar es si tiene hambre. Si este valor es cierto, donde el signo de interrogación, y luego agregar nuestras dos opciones. Si es cierto, diremos, sí, vamos a comer, separados por un colon. Si es falso, diremos que no solo aún, agrega un punto y coma al final de ahí y luego podremos hacer un registro de consola. Después registre los resultados de debería comer. Tan solo un recapitulación, comprobamos aquí esta variable, si es verdadera o falsa. Si es cierto, imprimiremos en el texto de Sí, vamos a comer. Si esto se configuró para ser falso, entonces obtendremos el segundo valor de no sólo todavía. Este resultado se instala dentro de una variable llamada debería comer y este es un valor el cual se mostrará en, dentro de la consola. Después de la consola ahora, esto se pone en verdad, así que llegamos, sí, vamos a comer. Si esto fuera falso, no sólo todavía. Hay muchos más usos para esta herramienta, como construir una cadena de texto con resultado. Si fuéramos a seguir adelante y decir variable está conectado, y estableceremos esto inicialmente para que sea un valor de falso. Entonces podemos seguir adelante y agregar una cadena de texto de hola con espacio y luego dentro de los corchetes podemos agregar nuestro operador ternario. En primer lugar, vamos a revisar nuestra condición de inicio de sesión, el signo de interrogación, y luego nuestras dos opciones. En primer lugar, si esto es cierto, entonces podemos decir bienvenido de nuevo. Separados por un colon, agregamos nuestra condición falsa. Podemos decir por favor inicie sesión en su cuenta y un punto y coma al final. Ahora necesitamos una forma de mostrar esto al usuario para que podamos rodear toda esta sección dentro de una alerta. Entonces los corchetes son el mismo inicio y luego cierra alerta justo al final con unos corchetes de cierre. Ahí vamos. Asegurémonos de que tengamos los dos corchetes al final, uno para la alerta y el segundo para esta sección ingresada. Dar ese guardar, recargar. En primer lugar, tenemos el texto que dice, “hola, por favor inicia sesión en tu cuenta” porque no estamos ingresados. No obstante, si establecemos que esto sea un valor de true, por lo tanto estamos logueados, recargar y obtendremos el mensaje de Hola bienvenido de nuevo. Este operador ternario es realmente simple de usar y también una buena alternativa a la declaración if-else. También es un poco más compacto en McCann agregar esto todo en una línea para no solo disparar en nuestro código, sino que también hacerlo más legible. 10. La sentencia switch: Bienvenido de nuevo. Para este video, dirígete a la sección 8 de nuestros archivos de inicio, que es para la declaración de cambio. Este es el tipo final de declaraciones condicionales que vamos a cubrir. En cierto modo, switch hace un trabajo similar al de las declaraciones IF/Else, ya hemos mirado. Pero la diferencia es lo que puede comprobar contra tantas condiciones como queramos. Después agregamos una declaración de descanso para estallar con el interruptor una vez que se encuentre una coincidencia. Probemos esto en nuestra sección de declaración de cambio del código de inicio. Abajo entre estos guiones. Empecemos de nuevo con la variable. Voy a poner este alimento para piensos. Esta puede ser cualquier comida que queramos. Empecemos con huevos. Después creamos una declaración de cambio. El sintaxis es similar a las sentencias if. Dentro de los corchetes, agregamos la condición contra la que queremos probar. Queremos revisar la variable alimenticia. Dentro de la declaración switch podemos agregar varios casos para comprobar si coinciden con esta variable alimenticia. En primer lugar, sumemos un caso. Diremos pizza. Esto comprueba si la pizza coincide con esta variable. Si lo hace, agregamos un colon y luego podríamos declarar en la siguiente línea lo que queremos hacer. Simplemente hagamos un console.log. Entonces diremos que la pizza es impresionante. Justo así. Entonces podemos agregar las palabras clave break. Agregamos break para estallar con las declaraciones de switch, si esto es una coincidencia. Si no lo es, entonces pasa al siguiente caso. Añadamos un nuevo caso aquí. Entonces podemos revisar una segunda condición. Digamos huevos. Si esto es una coincidencia, entonces queremos hacer un console.log para mostrar el mensaje de, “Los huevos son impresionantes”. Entonces estamos en la palabra clave break de nuevo justo después. Añadamos un caso más. Esta vez le agregaremos tocino, colon y luego un console.log. Digamos: “El tocino es impresionante”. Una vez más romper con las declaraciones. Esas son nuestras declaraciones de cambio por completo ahí. Sólo una recapitulación. Estamos creando una variable llamada huevos. Entonces estamos revisando los partidos dentro de un comunicado de cambio. Si el caso de la pizza es una coincidencia, entonces imprime el texto nuestra pizza es impresionante. Si es así, con entonces romper con un comunicado y no revisamos ninguno de los casos extra a continuación. Si no es una coincidencia, que no es en este caso, entonces se mueve hacia abajo a los huevos y luego muestra el texto de los huevos son impresionantes. Pero esta vez porque es un partido, saldremos de la declaración de cambio. Por lo tanto, ni siquiera revisará este próximo. Vamos a dar eso guardar y recargar el navegador, abrir la consola, y ahora nos vamos. Huevos es un partido, por lo tanto obtenemos el texto de los huevos son impresionantes. ¿ Qué hacemos si ninguno de estos casos coincide? Para ello, agregamos un valor predeterminado que actúa como un retroceso. Justo en la parte inferior, voy a agregar default. Entonces justo después de esto podemos agregar un console.log. Entonces para el texto, digamos “Me encanta”. Después agrega un espacio. Entonces podemos agregar al nombre de nuestra comida. Con punto y coma al final. Guarda eso y luego vuelve a cargar el navegador. Seguimos obteniendo un texto de huevos son impresionantes porque tenemos un partido. No obstante, si subimos y cambiamos este alimento para que sea cualquier otra cosa, como el queso. Lo cual no coincidirá con ninguno de estos tres casos. Por lo tanto, el default pateará. Recargar. Ahí vamos. Tenemos un texto de, me encanta. Después pasamos en la variable de los alimentos, que es el queso. Tenga en cuenta en este caso predeterminado hemos dejado fuera la palabra clave break, porque está al final de la sentencia switch. Podemos agregar este valor predeterminado en cualquier lugar que queramos, pero recuerda usar también un descanso si no es al final. También podemos cambiar las cosas alrededor un poco a. Si quisiéramos mismo resultado para un múltiples casos, sólo podemos combinarlos así. Digamos que después de la pizza, podemos agregar un segundo caso. Vamos por la pasta, nuevo con el colon después. Ahora si el caso de la comida coincide con pizza o pasta. Entonces podemos decir: “Me encanta el italiano”. Así que ahorra. Mantengamos esto como queso por ahora. Tendremos el retroceso y si cambiamos esto para que sea pasta. Recargar. Me encanta el italiano. Entonces pizza y aún nos queda, me encanta el italiano. Con declaraciones de cambio también podemos seguir con tantos casos como queramos. Ahora es el momento de pasar a construir un jueguito para poner en práctica las cosas que hemos aprendido en esta sección. 11. Hora de practicar: el juego del cazador de dragones: Ahora vamos a tomar un poco de tiempo para aprender sobre las declaraciones condicionales para ponerlas en práctica en un divertido juego llamado, el cazador de dragones. Serán bastante simples pero nos hará pensar en lo que queremos hacer a continuación, en base a la condición. Cuando por primera vez terminamos la página y estos son los proyectos terminados, primero preguntamos nuestro nombre. Podemos entonces ingresar nuestro nombre y luego dar click bien. Después pasaremos a nuestra siguiente pantalla donde nos preguntan si nos gustaría jugar con nuestro nombre dentro de la cuerda. Si cancelamos, obtenemos un textil, tal vez la próxima vez. No obstante, si recargamos el juego a nuestro nombre, pulsa bien, y luego decimos, ¿te gustaría jugar y dar click en ok. Pasamos entonces a que nos pregunten si a quién le gustaría inclinar al dragón. De nuevo si lo cancelamos, vamos a recibir un mensaje de volver cuando seas lo suficientemente valiente. No obstante, si pasamos y jugamos el juego a nuestro nombre, ¿te gustaría jugar? Sí. ¿Te gustaría batallar a un dragón? Haga clic en OK. Tenemos entonces una oportunidad aleatoria de donde estará el dragón. Esta vez hemos derrotado al dragón porque lo comparamos con un número aleatorio el cual determina si ganamos o soltamos. Hay una probabilidad 50-50, cuál será este mensaje. Démosle una vuelta más a este. Si nos refrescamos a nuestro nombre y luego hacemos click a través, esta vez dice que hemos perdido. Puedes darle una oportunidad a esto si te sientes cómodo haciéndolo, y realmente te animaría a hacer esto, si no solo para conseguir algo más de práctica. El único que aún no hemos cubierto es generar números aleatorios, pero puedes mirar fácilmente la pendiente si quieres. De lo contrario, voy a seguir adelante y construir esto ahora. Cerremos esto, y luego vayamos a los archivos de inicio para el juego de cazadores de dragones. Abajo en el guión, voy a empezar por crear una variable llamada aleatoria, y esta es sólo sección que aún no hemos cubierto. Para generar un número aleatorio, usamos el punto matemático aleatorio, y luego los corchetes así, y luego hagamos un registro de consola para la palabra random. Ahorra y luego vuelve a cargar, y de hecho es cuando vas a nuestro proyecto, abre la consola, y ahí está nuestro número aleatorio. Si seguimos refrescando, obtenemos diferentes valores cada vez. Un número aleatorio en script java por defecto está entre cero o uno. Se incluye cero, pero uno no se ha incluido, por lo que esto terminará con el valor más alto de 0.999. Si sigues refrescando, no vemos ningún valor superior a uno. Para facilitarnos esto, vamos a generar un número aleatorio entre cero y 99. Para ello, primero podemos multiplicar el número aleatorio por 100, y esto nos dará un número si nos refrescamos, que está entre cero y 99, pero con muchos decimales diferentes. Si queremos que este sea un número entero, podemos redondear este número hacia arriba o hacia abajo. Podemos bajar el número con piso de punto matemático, o si queremos redondear el número hacia arriba, podemos decir matemática dot ceil, que es abreviatura de techo, y luego rodea el resto de nuestro código dentro de los corchetes. Ahora si guardamos, y luego recargamos, obtenemos un número aleatorio que se redondea. Ahora nos hemos encargado de este número aleatorio, y la forma en que vamos a usar esto es que vamos a comprobar, si este número es menor a 50, si lo es, diremos que derrotaste al dragón, si el número aleatorio es mayor de 50, dirán que has perdido. Volvamos a trabajar con este juego. Podemos eliminar el console.log, y luego vamos a establecer una segunda variable de nombre, y este nombre va a ser el valor pasado por el usuario dentro de un prompt. ¿ Cuál es tu nombre? Esto agregará un prompt al usuario pidiendo el nombre que podemos escribir, y este valor se almacena dentro de esta variable. Siguiente muchas veces quieren crear una nueva variable llamada play, y esto es para nuestra segunda pantalla, que va a ser una confirmación. Dentro de la confirmación podemos decir hola, agregar un espacio y luego agregar el nombre del usuario. Esta es una pantalla que viste dentro de la versión final. En primer lugar, tenemos ¿cuál es tu nombre? Cuando escribes tu nombre, podemos decir, vale, y esta sección aquí es la que restaura dentro de una obra de teatro. Entonces hola nombre, y luego la cadena de texto de, ¿te gustaría jugar? Ahora necesitamos hacer algunas comprobaciones condicionales. En primer lugar, vamos a comprobar si el usuario ha seleccionado el juego. Si el juego es cierto, entonces queremos ejecutar algún código. Si el usuario ha optado por jugar el juego, entonces querría crear una nueva confirmación, y esta vez vamos a hacer la pregunta de, ¿te gustaría batallar a un dragón? Si vamos a la versión terminada, justo aquí, recarguemos, ¿cuál es tu nombre? Entonces tenemos la sección ¿te gustaría jugar? Si está bien, esta es una sección que acabas de crear diciendo, ¿te gustaría batallar a un dragón? Necesitamos almacenar esto dentro de una variable. Voy a llamar a mi batalla, y cambiarlos. Ahora tenemos un valor verdadero o falso dentro de esta variable llamada batalla. Si el usuario quiere seguir adelante y jugar, entonces podemos crear un nuevo if sentencias, y esta vez anidado dentro de una obra de teatro. Diremos si la batalla es cierta, entonces aquí adentro queremos una batalla, o si los usuarios hicieron clic en cancelar batalla será falsa, y entonces necesitamos proporcionar declaraciones de lo contrario, así que diremos que no batallar. En primer lugar, tratemos con la declaración else. Si el usuario ha optado por no batallar, simplemente hará una alerta, y así alerta puede decir 'remontarse cuando seas lo bastante valiente'. Primero vamos a darnos una prueba en el navegador o a nuestros proyectos. Vamos a refrescarnos. ¿Cuál es tu nombre? Escribe esto y diremos: 'hola Chris, ¿te gustaría jugar? ' Esta es esta sección de aquí, diciendo ¿te gustaría jugar? Si el juego es cierto, entonces preguntamos, 'te gustaría pelearle al dragón', que ven aquí? Recuerda que no hemos establecido ninguna condición, si esto es cierto todavía, solo hemos establecido condición si el usuario hace clic en cancelar. Si el usuario cancela, deberíamos recibir este mensaje aquí. Probemos esto, y ahí conseguimos 'volver cuando lo suficientemente valientes'. Ahora necesitamos manejar la condición, si el usuario hace clic en “ok”. Añadamos una condición es que el usuario decide batallar. Antes de configurar estos números aleatorios entre cero y 99, y lo almacenamos en una variable llamada aleatoria, cada vez que ejecutamos un aleatorio, podemos entonces usar el operador ternario para comprobar si esto es mayor a 50, si lo es, entonces podemos decir: '¡derrotaste al dragón! 'si este número es menor a 50'. Entonces podemos decir que perdiste. Guarda eso, y vamos a darle una oportunidad a esto. Escriba algo ahí dentro, ¿'le gustaría jugar'? Sí. '¿Te gustaría batallar?' De acuerdo, y no vemos ningún resultado en la pantalla. Esto se debe a que hemos creado nuestro operador ternario pero, no hemos mostrado los resultados en la pantalla. Establezcamos el resultado para que sea una variable llamada results, y pongamos esto a nuestro operador ternario. Entonces justo después de esto, podemos hacer un console.log con el valor de los resultados, y de hecho vamos a cambiar esto sea una alerta al igual que el resto. Guarda, y luego pasa al navegador, '¿cuál es tu nombre?'. ¿ Te gustaría jugar? ' Sí, '¿le gustaría batallar?' Está bien. Entonces perdimos ese tiempo, intentémoslo de nuevo. ' ¿Te gustaría jugar? ' Sí, y esta vez derrotamos al dragón, porque el número aleatorio debe estar en más de 50, bien. Aquellos que han manejado la mayoría de los casos usados aquí, son los usados para jugar, son los usados para batallar. El último caso a manejar, es si el usuario no quiere jugar en absoluto. Si refrescamos el navegador, esta vez si escribimos nuestro nombre en, y damos click en ok. Entonces queremos manejar el caso si el usuario no quiere jugar, actualmente dentro del aquí estamos revisando si el usuario quiere jugar, y si lo hace, entonces ejecutamos este código. En cambio, si el usuario hace clic en cancelar, entonces querría alertar mensaje diciendo 'tal vez la próxima vez'. Podemos hacer esto como una otra declaraciones en la parte inferior, así que de lo contrario, haremos una alerta de 'tal vez la próxima vez'. Guarda eso y danos una oportunidad. ' ¿Cuál es tu nombre? ' Haga clic en OK. ' ¿Te gustaría jugar? ' Esta vez haremos clic en cancelar, y el mensaje de tal vez la próxima vez. Grandioso ahora todo está funcionando, y espero que disfrutes jugando este juego. No te preocupes si era algo que no pudiste manejar del todo, hay bastante tomado ahí y cada paso solo toma un poco de pensar en decidir qué vamos a hacer a continuación. Esperando que todos estén ansiosos por la siguiente sección y los veré ahí. 12. Manipulación de DOM: Bienvenido de nuevo. Este video es donde JavaScript comienza a ponerse realmente interesante manipulando el DOM. El DOM significa el Modelo de Objetos de Documento y es una representación arbolada de nuestros documentos web. Se trata de una interfaz para permitir que los lenguajes de programación accedan y actualicen el contenido y la estructura. Aquí vemos la misma estructura que nuestras páginas web. Desde arriba, tenemos el documento. En su interior hay un elemento HTML raíz. Debajo de esto tenemos la cabeza y el cuerpo familiares. Después seguido de nuestros elementos, textos y atributos, por ejemplo. Lo bueno de ello es que puede conectar dos idiomas, como JavaScript, para que podamos cambiar las cosas. Esto abre muchas posibilidades, como la capacidad de acceder a elementos, para cambiar el contenido, agregar atributos y estilos, o incluso crear y eliminar elementos también. Puede sonar complejo, pero es bastante fácil empezar. Una de las formas más fáciles de manipular el DOM es agarrar un elemento de nuestra página y cambiarlo. Por ejemplo seleccionando los elementos p y luego cambiando el texto. Pasemos a nuestro iniciador de JavaScript y abrimos la sección de manipulación DOM. Pasemos a nuestros archivos de inicio de JavaScript y vayamos a nuestro número 10, que es la manipulación DOM. Dentro de aquí primero necesitamos algún HTML para seguir adelante y cambiar. Dentro del cuerpo vamos a abrir y cerrar los elementos p y luego añadir algún texto dentro de hola. Después abriremos los elementos span y luego agregaremos el texto de usuario. Esto mostrará en la pantalla el texto de hola usuario. Después necesitamos agregar un ID a este elemento span, que podamos agarrarlo usando JavaScript. Llamemos a este ID el nombre de usuario. Ahora si nos desplazamos hacia abajo a nuestra sección de guiones, que está justo debajo de aquí, podemos empezar con lo que se llama, obtener elemento por ID. Esto es pre autodescriptivo, esto agarra un elemento por el ID, como el nombre de usuario. En primer lugar agarramos el documento. Este es el objeto de documento, que básicamente es nuestra página web. Recuerda, el DOM significa Document Object Model. Nuestra estructura arbolada es un modelo de nuestra página web. Entonces, después de seleccionar estos documentos, podemos entonces estrechar esto hacia abajo. En este caso, vamos a seleccionar una identificación en el documento, obtendremos elementos por ID. Dentro de los corchetes podemos entonces agregar el nombre del ID que seleccionaríamos. En nuestro caso es nombre de usuario. Agrega un punto y coma al final. Aviso al escribir get elements by ID, tenemos una letra mayúscula para cada palabra después de get. A esto se le conoce como casing de camello y lo hace más legible porque podemos ver mejor el inicio de cada palabra. Si guardamos eso y pasamos al navegador, vemos que nada va a cambiar. Esto se debe a que hemos seleccionado el elemento que queremos, pero aún no hemos hecho nada con él. Podemos cambiar el contenido estableciendo el HTML interno. Justo antes del punto y coma, agregamos una.innerHTML. Ahora podemos establecer que esto sea un valor como una cadena. Digamos Chris, espera el navegador, recarga y ahora vemos el texto de, hola Chris. Además de usar una cadena de texto para nuestro innerHTML, también podemos usar una variable. Selecciona establecer una variable para nuestro nombre. Nombre Var es igual a una cadena de Chris. Entonces en lugar de nuestra cadena justo aquí, podemos pasar en nuestro nombre variable del navegador y recargar y todavía vemos que nuestro texto de, hola Chris, está ahora en la pantalla, pero esta vez usando una variable. También podemos cambiar el estilo cambiando cualquiera de los valores CSS. Justo debajo de esto, podemos acceder a los mismos elementos, con document.getElementById. Nuevamente, queremos seleccionar el nombre de usuario, el N mayúscula para nombre y luego en lugar de seleccionar el HTML interno, esta vez podemos establecer el estilo y digamos que el color oscuro sea igual a un valor de rojo. Esto cambiará el color del texto de nuestro texto dentro del lapso. Guarda, refresca y ahí está nuestro color rojo para la palabra Chris. Podemos utilizar cualquier propiedad CSS que queramos dentro de ella aquí. La única diferencia es que necesitamos camel case cualquier propiedad CSS que tenga múltiples palabras, como color de fondo y tamaño de fuente. En CSS, normalmente haríamos algo como esto. Diría tamaño de fuente usando un guión o un guión pero en su lugar, al usar JavaScript, necesitamos referirnos a esta carcasa de camello, que vemos justo aquí. En lugar de un guión, utilizamos una letra mayúscula, como ésta. Entonces vamos a configurar el texto para que sea un valor de 24 píxeles. Veamos esto en el navegador y ahí vamos. Ahora nuestro texto de Chris es una fuente más grande. También podemos usar una clase en lugar de este ID. Subiremos a nuestro elemento p y luego agreguemos una clase de, hola. Entonces podemos usar document.getElementByClassName. Añadamos una nueva sección de getElementByClassName. Esto funciona de manera similar a la anterior. Primero seleccionamos el documento y luego lo estrechamos usando el nombre de la clase. Obtener elementos por nombre de clase. Pase a nombre de nuestra clase, que fue hola, que coincide con esta sección justo aquí. Después un punto y coma al final. Observe aquí al usar el nombre de la clase, agregamos un s al final de los elementos. Esto se debe a que podemos tener múltiples clases en nuestra página. Por ejemplo, podríamos tener un segundo conjunto de elementos p. Si seguimos adelante y agregamos un segundo set justo aquí, y luego agregamos la misma clase de hola. Ahora añadiremos algún texto de bienvenida de vuelta. Ahora si tuviéramos más de una clase seleccionada, como lo hacemos justo aquí, ¿cómo sé cuál estamos cambiando? Bueno, vamos a asignar esto a una variable y luego mostrarlo a la consola. Digamos que variable de prueba es igual a nuestra primera clase. Después en un registro de consola dentro del navegador con el valor de prueba. Pasando al navegador, haga clic derecho e inspeccione. Dentro de la consola vemos una colección HTML con dos elementos dentro de los corchetes. Esto es como una matriz que vamos a cubrir pronto. Estos dos artículos, nuestros dos elementos con la clase de hola. Si hace clic en esta flecha aquí, también podemos abrir esto y conocer más sobre los contenidos. Vemos los primeros elementos p con la clase de hola tiene una posición índice de cero. Entonces nuestro segundo tiene una posición índice de uno. Podemos acceder a estos dos elementos por esta posición de índice. Dentro de la consola, si decimos test, que es el nombre de nuestra variable y luego dentro de los corchetes, podemos acceder a cada uno de estos elementos por el número de índice. Empezando por cero, pulsa Enter, y ahí están nuestros primeros elementos p, que contiene nuestros textos de hola Chris. Entonces podemos acceder a nuestro segundo valor con test1, pulsa Enter. Este es nuestro segundo elemento con el texto de bienvenida de vuelta. Este número de posición también se puede utilizar dentro de nuestro selector. Entérate en nuestro código, vamos a agarrar todos los elementos con el nombre de clase de hola. Entonces dentro de los corchetes, podemos reducir esto a nuestra primera, que es la posición cero. Podemos hacer cualquier cosa que hayamos visto anteriormente. Gráfico establecido en el estile.color para ser un valor de púrpura. Guardar y luego volver a cargar. Entonces primer elemento es ahora morado. Y por supuesto que podemos cambiar esto para que sea uno, y esto ahora hará que el texto buck de bienvenida sea morado en su lugar. A continuación tenemos getElementsByTagName. Como sugiere el nombre, podemos seleccionar todos los elementos de una página por la etiqueta, como nuestro elemento p para texto o IMG para la etiqueta de imagen. Abajo en la parte inferior, vamos a añadir un comentario de getElementsByTagName. Nuevamente, esto tiene un S2 porque se puede seleccionar más de un elemento. Después de aquí usamos el document.getElementsBytagName, que está justo aquí, los corchetes y luego dentro de las citas podemos agregar los elementos que queremos seleccionar, recortemos todos los elementos p, y una vez más, porque nosotros tienen más de un conjunto de elementos p, necesitamos agarrarlos por el número de índice. El primero es la posición cero, podemos establecer el HTML interno y vamos a establecer este valor de cadena de cambiado. Si guardamos eso y luego recargamos, ahora hemos cambiado nuestros elementos p en la posición de índice cero. La siguiente herramienta que vamos a ver en base al QuerySelector. Esto es igual al selector que usamos en CSS. Veamos esto con una imagen vacía, así que hasta el HTML después de nuestros dos elementos p, agreguemos los elementos IMG. Si damos ese guardar, ese era el navegador, ves que no vemos ninguna imagen en la pantalla porque aún no hemos establecido atributos de fuente. Añadamos los atributos de origen usando JavaScript. En primer lugar, podemos agarrar esta imagen usando QuerySelector, por lo que un comentario de QuerySelector. Después usamos document.QuerySelector y luego pasamos a nombre de IMG. Esta es la misma forma que seleccionaríamos nuestra imagen en CSS. También podemos seleccionarlo con el ID y el nombre de la clase a, y vamos a echar un vistazo a eso en tan solo un momento. Usando QuerySelector, todavía tenemos acceso al HTML interno y también agregando estilos también. Pero para este ejemplo, te voy a mostrar algo nuevo, y así es como agregar un atributo. El atributo que vamos a agregar es la fuente de la imagen y lo hacemos usando ing.setAttribute, dentro de los corchetes, seguimos adelante y agregamos dos valores. En primer lugar está el nombre del atributo que queremos agregar, que es fuente, y luego separado por una coma, y luego el nombre de la imagen dot.JPEG, puede utilizar cualquier imagen de su elección. Pero he agregado una imagen al archivo de inicio, que está justo aquí. Cerraré esto, le daré ese guardado, y luego recargaré el navegador. Hay una imagen que ahora está en la pantalla. Si abrimos las herramientas de desarrollador con el botón derecho e inspeccionamos y luego vamos a los elementos. Podemos ver dentro de las herramientas de desarrollador, tenemos nuestra sección de cuerpo, tenemos nuestra p con el texto de cambiado, nuestro segundo elemento p, damos la bienvenida de nuevo, y también nuestra imagen con la fuente de image.JPEG. El resultado final es exactamente el mismo que si escribiéramos esto en HTML, pero lo hemos agregado usando JavaScript. Mencionamos que al usar queryselector, podemos seleccionar cualquier elemento de la misma manera que normalmente lo haríamos en CSS. Además del nombre de la etiqueta como imagen, también podemos seleccionar esta imagen con una clase o ID. Si agregamos un ID a esta imagen de imagen y luego nos desplazamos hacia abajo, al igual que cuando usamos CSS, al igual que cuando usamos CSS,necesitamos usar el hash como selector y luego el nombre ID, ahora guardar y luego recargar. Podemos ver que esto aún funciona, pero esta vez usando el ID. Lo mismo para la clase, cambiará la pestaña de imagen, una clase de imagen. Esta vez al igual que al seleccionar esto en CSS, necesitamos usar un punto como prefijo, y esto aún debería funcionar dentro del navegador. Por último, algo similar a esto es querySelectorAll; querySelector que acabamos de ver, solo selecciona los primeros elementos coincidentes en la página, querySelectorAll por otro lado devolverá una lista de todos los coincidentes elementos. Podemos ver esto agregando una segunda imagen a nuestro HTML. Copia aquí esta sección y pegarlo abajo usando el mismo nombre de clase. Si guardamos eso y luego actualizamos, aún vemos esta única imagen en la pantalla esto es porque QuerySelector solo seleccionará los primeros elementos de la página. No obstante, si seguimos adelante y agregamos querySelectorAll que se ve así y luego hacemos document.QuerySelectorAll, esto seguirá adelante y devolverá una lista de ambas de nuestras imágenes. Primero etiquetemos la clase de imagen, y luego después de esto agregamos los corchetes, luego podemos pasar nuestro número de índice. Al igual que antes, el número de índice de cero es la primera imagen de nuestra página. Si tan sólo pudiera comentar este QuerySelector. Ahora hemos seleccionado nuestra primera imagen, después podemos usar SetAttributes como acabamos de ver, luego pasar ahora primer valor que es la fuente, y el segundo que es image.JPEG por lo que esto seleccionará el primer valor, incluso como con una imagen en la pantalla. No obstante, si queremos agregar la imagen en dos ocasiones, podríamos copiar esta línea de código aquí, y luego pegarla en una vez más. Pero esta vez, selecciona el valor de índice de uno y ahora tenemos dos imágenes en la pantalla. Seleccionar dos elementos como este se haría mejor con el bucle, pero pronto entraremos en bucles en este curso. Entender cómo manipular el DOM es algo realmente importante saber, y aquí es donde JavaScript realmente comienza a ponerse interesante. Ahora sabemos seleccionar elementos, ahora es el momento de seguir adelante. A continuación estaremos aprendiendo todo sobre cómo agregar y eliminar elementos usando JavaScript. 13. Agregado y eliminación de elementos con Javascript: Acabamos de ver cómo podemos usar JavaScript para manipular elementos en nuestro DOM, como cambiar el texto, agregar atributos y establecer estilos. Vamos a cubrir cómo crear realmente nuevos elementos, y también cómo eliminarlos también. Vayamos a nuestros archivos de inicio. Vamos a empezar en el número 11, que es agregar y quitar elementos con JavaScript y también tener esto abierto dentro del navegador. Podemos ver en nuestros archivos de inicio tenemos una lista desordenada, con los dos ListItems de manzanas y peras, que acabamos de tener aquí. Empecemos hacia abajo en la sección de guiones. Vamos a ver lo que se llama document.write. Document.Write es una forma de establecer una cadena de texto en una página. Documento.escribir, y luego dentro de los corchetes podemos agregar una cadena de texto, como documento escribir texto. Si guardamos eso y recargamos el navegador, ahora tenemos este texto apareciendo junto a nuestra lista desordenada. Document.Write es para agregar una cadena de texto simple a una página. Esto se usa comúnmente para fines de prueba, pero puede causar problemas si se usa incorrectamente. Por ejemplo, si vas a google.com y luego abres la Consola, haces clic con el botón derecho e Inspeccionar. Dentro de aquí si hacemos un document.write, y luego pasamos en una cadena de texto, como hola, pulsa Enter, y vemos que la página de inicio de Google ha sido reemplazada por nuestra escritura de documento. Una escritura de documento anulará todo el contenido existente, si la página ya está cargada. Tenemos que tener mucho cuidado al usar esto. Ya verás en la parte superior de la plantilla de inicio, tenemos nuestra lista desordenada, que está justo aquí. Esta es una lista con la que podemos trabajar agregando y eliminando algunos ListItems, usando JavaScript. Si queremos crear un nuevo elemento en la página usando JavaScript, podemos utilizar el método CreateElement. Quitemos este document.write, y luego dentro de aquí podemos hacer el document.CreateElement. Vamos a crear una variable para almacenar la escena llamada ListItem, y establecer esto en Document.CreateElement. Al igual que esto. Nuevamente, usando la carcasa de camello, igual que hemos visto antes. Dentro de los paréntesis, podemos pasar como una cadena, el nombre de los elementos que queremos crear, como un ListItem. Cualquier nombre de etiqueta de elemento se puede agregar a, como un elemento div o p. Crear esto no hará nada por sí mismo, porque aunque lo hemos creado, todavía no hay texto dentro de los elementos. Podemos agregar texto usando el método CreateText.. Solo agreguemos algunos comentarios, creemos elemento. Entonces después de aquí vamos a crear el TextNode. También podemos almacenar esto dentro de una variable llamada ItemText. Esta igual a document.CreateTextNode. Entonces dentro del corchete, puedes pasar la cadena de texto que queremos agregar. Pegándose con los frutos, voy a sumar el valor de los plátanos. Si guardamos eso y luego recargamos el navegador, voy a nuestra página de índice, todavía no vemos ningún ítem extra en la pantalla, porque aunque tenemos nuestros elementos que creamos aquí, y también nuestro texto que tenemos aquí, aún no hemos agregado este texto al contenido de estos elementos. Podemos hacer esto con el método AppendChild. Añadamos texto al elemento. En primer lugar, vamos a agarrar nuestro ListItem, que acaba de estar aquí. Nosotros decimos listItem.AppendChild. El niño que queremos anexar es este texto de ítem justo aquí. Agrega estos dentro del soporte y luego guarda, y luego vuelve a cargar. Todavía no vemos los elementos en la pantalla. Veamos qué está pasando con el registro de la consola. Eso es registro de consola, el valor de nuestro ListItem. Pasando a la consola, haga clic con el botón derecho Inspeccionar. Vemos que tenemos nuestro elemento creado. Tenemos nuestro listItem de apertura y cierre, y luego el texto de los plátanos como el niño. El paso final es volver a usar AppendChild, para agregar este nuevo elemento a esta lista existente, que está justo aquí. Esta lista existente tiene un ID de lista. Primero tomemos esto y lo almacenemos dentro de una variable. Abajo en la parte inferior, vamos a seleccionar la lista de padres. Instalar esto dentro de una variable llamada lista. Sabemos hacer esto, es document.getElementById. El Id que le dimos a esto es List. Entonces añadiremos un punto y coma al final, para almacenar esto dentro de esta variable. tenemos la lista de padres, y tenemos al hijo que queremos agregar. Podemos seguir adelante y sumar estos ahora. Agregar nuevo ListItem a la lista. Hacemos esto, listamos.AppendChild, que hemos visto antes, y el ítem que queremos agregar es el ListItem. Agrega un punto y coma al final. Cargamos el navegador y ahí vamos, ahí están nuestros plátanos como un nuevo ListItem. Tan solo para recapitular lo que estamos haciendo aquí, estamos agarrando la lista completa, y almacenándola dentro de una variable. A continuación añadimos a esta lista, el niño, que es este nuevo ListItem. Es posible que te estés preguntando por qué hacer todo esto, en lugar de simplemente escribir un nuevo look ListItem dentro del HTML. Bueno, hay muchos casos en los que queremos hacer esto con JavaScript. En una aplicación para hacer por ejemplo, cada vez que el usuario escribe en un elemento nuevo para hacer, esto podría agregarse a la lista, al igual que hemos hecho aquí. O por ejemplo, en otro curso que tengo, construimos una aplicación de reproductor de música, donde construimos una lista de canciones. Pasando, además de agregar artículos a nuestra lista, también podemos reemplazar cualquier artículo existente que ya tengamos. Por ejemplo, si quisiéramos reemplazar estas peras ListItem, otra cosa, también podríamos hacer esto. En primer lugar, vamos a crear un nuevo ListItem llamado uvas. Entonces vamos a crear uvas ListItem. Hacemos esto igual que antes, podemos crear una nueva variable llamada nueva ListItem, y luego establecer esto para que sea document.CreateElement, el elemento que queremos crear es un ListItem. Entonces al igual que hemos visto antes, también podemos crear nuestro TextNode. Digamos NewitemText. Esto es exactamente lo mismo que lo que hicimos antes, cuando creamos un ListItem. Entonces nuestro TextNode, plátanos. Pero esta vez vamos a estar creando uvas. Esto es igual a documento.CreateTextNode, texto de uvas, punto y coma al final. Entonces necesitamos agregar este texto a este ítem. Decimos newListItem y luego anexamos el hijo del texto de nuevo elemento. Igual que eso. Tengo un newListItem aquí, que accedemos aquí. Después añadiremos en el niño, que es un nuevo texto de elemento, que es el TextNode de uvas. tenemos este newListItem. Podemos usar esto para reemplazar cualquiera de los ListItems que ya tenemos. Como mencionamos antes, quiero estar seleccionando peras, que es la posición índice de una. Abajo en la parte inferior, vamos a crear una variable llamada item to replace, y luego document.QuerySelectorAll. Vamos a agarrar los ListItems. Entonces el ítem que queremos es nuestra posición de índice 1. tenemos nuestro ítem que queremos agregar y también el ítem que queremos reemplazar. Ahora podemos seguir adelante y usar reemplazar niño para completar esto. Justo después de aquí, vamos a seleccionar nuestra lista.ReemplazeChild. ReplaceChild toma dos valores, el primero va a ser nuestro nuevo ListItem, que es un nuevo ítem. Después separados por una coma, agregamos en el ítem que queremos reemplazar, que almacenamos aquí en esta variable. Agrega lo mismo que nuestro segundo valor, guarda eso, y luego vuelve a cargar. Es bueno saber nuestro segundo artículo ahora son las uvas, más que lo que teníamos originalmente, que son las peras. Por último, si queríamos eliminar por completo un elemento, en lugar de reemplazarlo por otra cosa, también podemos usar el método removeChild. Esto es bastante sencillo de hacer. Volvamos a nuestro guión. Digamos, quita un artículo. Agarramos nuestra lista. Entonces usamos. RemoveChild. Dentro de los paréntesis, todo lo que necesitamos hacer es agregar al niño que queremos quitar. Si quisiéramos quitar nuestras uvas, que se almacena en NewListItem, solo agregamos esto como valor, ahorramos, y luego recargamos. El valor de las uvas ha sido retirado de nuestra lista. Al retirar estos artículos, siempre necesitamos especificar primero el patrón, que es nuestra lista aquí. Después quita uno de los elementos hijo, así como éste, en lugar de acceder a los elementos para eliminarlos directamente. Ahora sabemos cómo agregar, quitar y actualizar elementos usando JavaScript. Ahora pasemos al siguiente video. 14. Hora de practicar: cómo añadir elementos con Javascript: Hemos cubierto algunas formas de agregar, actualizar y eliminar elementos del DOM. El mejor modo de que todo esto se pegue es conseguir algo de práctica por tu cuenta sin seguir conmigo. En este reto, me gustaría que siguieran adelante y crearan algunos elementos usando JavaScript. No hace falta que sea demasiado complejo. Simplemente algo como usted ve aquí está bien. Con algo de texto en la parte superior de la página seguido de una imagen. Estos se pueden colocar dentro de un contenedor y luego agregar a la imagen y al texto como elementos hijos. Además, deberá agregar la salsa de imagen y todos los atributos al uso de Java Scripts. Recuperado tiene que hacer esto en un video de manipulación DOM. Si vas al archivo de inicio en el Número 12, es hora de practicar. En el interior de aquí encontrarás algún código básico para empezar. Todo lo que necesitamos hacer es crear una versión JavaScript de este código HTML que vemos aquí. Buena suerte con esto. Una vez que hayas terminado, pasaremos a las funciones de JavaScript. 15. Funciones de Javascript: Ahora vamos a ver el uso de funciones de JavaScript. Las funciones son realmente importantes y asumen FIN, que se utiliza mucho cuando se trabaja con JavaScript o programación en general. Una función es un bloque o un fragmento de código, que podemos llamar cuando se requiera. puede pensar en ello como una tarea o un conjunto de tareas que están contenidas dentro de esta función. Entonces podemos llamar a esta función cada vez que queremos ejecutar el código dentro. Estas funciones también son reutilizables. Tenemos algún código que quieres repetir varias veces, podemos empaquetar un código en una función. Empecemos en nuestro archivo de inicio de funciones, que has abierto la barra lateral es el número 13. Después hasta nuestros guiones tenemos script vacío para empezar. Definimos una función con la palabra clave function, seguida del nombre que queremos darle, como hi. Este nombre depende completamente de nosotros, pero trata de elegir algo descriptivo. Después añadimos a los corchetes, que también se conocen como paréntesis. Después agregamos un conjunto de llaves después, y quiero golpear enter. Entonces dentro de estas llaves, podemos agregar el código que quieres ejecutar, uno que llamamos una función. Para un simple ejemplo, podemos simplemente agregar alerta. Entonces dentro de aquí, solo un poco de texto off hi de función. Podemos agregar tantas líneas de código como queramos dentro de esta función, aunque a menudo es bueno no sobrecargar la función y simplemente mantenerla para advertir tarea relacionada. Esta sección aquí no hará nada hasta el momento, ya que sólo hemos declarado esta función. Es por ello que a veces se le conoce como una declaración de función, o una definición de función. Para ejecutar realmente este código, queremos llamar a esto por el nombre de la función de hi, seguido de los paréntesis y el punto y coma. Esto a menudo se llama invocar una función. Ahora si guardamos y luego abrimos esto en el navegador, ahora obtenemos nuestro código correr desde dentro, que es nuestra alerta de hi desde la función. También podemos llamar a esta función tantas veces como queramos repitiendo el mismo código de función. Si copiamos esto y lo pegamos abajo, ahora deberíamos ver el problema de alerta dos veces. Dice nuestra primera, haga clic bien, y luego nuestra segunda alerta justo después. Esta función puede contener cualquier código que nos guste. Si subimos a la parte superior y agregamos un div vacío. Todo el hecho irá por los elementos p y lo mantendremos vacío, primero agregaremos un id de textos. Podríamos usar esta función para seguir adelante y cambiar el HTML interno de nuestros elementos de texto aquí. Abajo dentro del cuerpo de la función, sabemos cómo hacerlo con un documento dot get element by id El id es texto, el cual tenemos aquí. Entonces podemos establecer el HTML interno de todos los elementos p para que sea una cadena de texto de textos de función con un punto y coma al final. Ahora si eliminamos una de estas llamadas de función, guardamos, y luego otra vez en el navegador obtenemos nuestra alerta, y luego nuestro texto de la función. Este tipo de función se llama función de nombre, simplemente porque agregamos un nombre igual que hemos hecho aquí. También hay una función anónima. Aquí es donde no damos el nombre funcional, en cambio podemos asignar esta función a una variable. Podemos eliminar el nombre y simplemente mantener estos paréntesis justo después de la función, y luego podemos agregar una variable. Llamemos a esto la función anónima, y establecemos aquí el valor igual a esta función. Podemos entonces llamarlo por su nombre de función anónima, así que reemplaza hola con esto, seguido de los paréntesis, recargar y su es nuestra alerta y también los textos de función siguen funcionando. Ambas formas harán algo similar ejecutando el código dentro de estas llaves justo aquí. Sin embargo, hay una diferencia, y veremos qué se ve esto cuando nos fijemos en levantamiento pero por ahora pasemos al siguiente video, una mirada a los argumentos de función. 16. Argumentos de las funciones: Si nos dirigimos al archivo de inicio para este video, que es argumentos de función, dentro de aquí tenemos nuestros elementos p del último video, con la idea de texto. Entonces una simple función con nombre, que va a establecer el HTML interno, para ser función textual. Por lo que en el último video, hemos visto algunos usos básicos de funciones. Pero las funciones pueden llegar a ser aún más útiles, si pasamos algunos datos. Podemos pasar estos datos al llamar a la función, agregando algunos valores, dentro de estos corchetes aquí. Estos valores se pasan a la función se llaman argumentos, por lo que si queremos pasar en un nombre, podríamos hacerlo así. Ahora la función tiene acceso a estos argumentos, pasar el nombre por el que queremos referirlo, dentro de estos paréntesis de función. Entonces eso es agregar Nombre dentro de un aquí, y este nombre aquí, actúa como una variable. Podemos referencias dentro de la función, el nombre dar estos datos dentro es un aquí se llama un parámetro. Ahora podemos usar este nombre dentro de nuestra función, de cualquier manera que elijas. Entonces, por ejemplo, podemos usarlo para establecer el HTML interno en lugar de los textos de la función, debería decir hola, y luego otro nombre de variable al final. Si guardamos eso, ahora tenemos el valor de hola Chris, y Chris fueron los argumentos que se pasan. También podemos pasar múltiples argumentos, por ejemplo, si el trabajo de esta función era hacer un cálculo, como multiplicar dos números. Cambiemos esto para que se multiplique, y también la llamada de función. Digamos que queríamos pasar en dos números, en lugar de una cadena. Vámonos por 23, y 15. Entonces podemos nombrar aquí nuestros parámetros dentro. Vamos por el número uno, y el número dos. Entonces podemos actualizar aquí nuestros elementos p, con los valores del número 1 multiplicados por el número 2. Entonces dale a eso un guardado, y luego fuera al navegador. Ahora obtenemos el valor de 345. Si fuéramos a cometer un error, como sólo pasar uno de estos argumentos, digamos 23, recargar. Obtenemos el valor de no un número, porque la función sigue tratando de multiplicar juntos nuestros dos valores. No obstante, si sólo pasamos en un valor, y sólo necesitamos un valor dentro de aquí, recargar, todavía obtenemos el valor de 23. obstante aunque no tenemos nuestro segundo valor pasado, que es el número 2. Entonces en cambio si cuya salida, el valor del número 2, guarde esto, recargue, obtendremos el valor de indefinido. Por lo que no causará ningún problema mayor, como el aplastamiento de nuestro sitio web. Simplemente significa que una función no puede hacer su trabajo sin todos los datos en los que necesita. Alternativamente, también podemos usar la palabra clave return, para devolver el valor después del cálculo. Esto puede ser útil si desea almacenar un valor, por ejemplo, en una variable, para uso futuro. Entonces primero, volvamos a nuestra función, y sumamos nuestros segundos argumentos. Entonces en lugar de actualizar el DOM sin get element byId, no comentaría esto. En cambio podemos devolver el cálculo del número 1 multiplicado por el punto y coma número 2 al final. Ahora si le damos a eso un guardar y luego recargar el navegador, vemos que el DOM no se ha actualizado. En cambio ahora se está devolviendo este valor. Podemos almacenarlo dentro de una variable para uso futuro. Podemos hacer esto abajo en la parte inferior, por arte en una variable llamada suma, y ciertamente es a nuestra llamada de función. Entonces podemos comprobar que esto está funcionando, haciendo un registro de consola, e iniciar sesión en el valor de algunos, agregar variable de suma dentro aquí, abrir la consola y ahí está nuestro valor de retorno de 345. Ahora ten esto almacenado dentro disponible, y ahora depende de nosotros lo que queremos hacer, que es valor de retorno. Agregar argumentos es una gran manera de extender la capacidad de una función. A continuación, veremos dos conceptos importantes de JavaScript llamados Alcance and izing. 17. Alcance y elevación: Ahora vamos a ver dos cosas importantes a entender al usar JavaScript, y esto se llama alcance y levantamiento. Empezar con alcance y permitir que esto se relacione con nuestras variables. Ahora miramos estos términos porque tienen mucho que ver con las funciones's. Alcance determina básicamente dónde tenemos acceso a nuestras variables. En primer lugar, vamos a nuestro proyecto de arranque y a la sección de alcance y de levantamiento. Aquí abajo tenemos una función de multiplicación, que vimos antes. Multiplicando los valores en el número uno y el número dos. También al igual que el último video, tenemos nuestros elementos p vacíos para mostrar los resultados en el navegador. Por lo que esta vez en lugar de pasar el número uno y el número dos como argumento a la función, podemos seguir adelante y declarar estas variables. Digamos que var num uno es igual a cinco, y luego var num dos es igual a 10, si guardamos eso. Ahora se deben multiplicar estos dos valores, que tenemos aquí para luego exhibir en nuestros elementos p. Recargar. Ahí está nuestro valor de 50 en la pantalla. Esto está funcionando bien porque las variables que declaramos han sido declaradas fuera de un cuerpo de disfunción. Esto significa que estas variables son globales, todas tienen alcance global. Se puede acceder a las variables globales en cualquier parte de nuestro código. Por ejemplo, nuestra variable está siendo accedida aquí dentro de la función. Pero también podemos acceder a ella fuera de la función también que podríamos ver con un registro de consola. Eran consola log fuera del cuerpo de la función el valor de una de estas variables. Guarda eso y luego vuelve a cargar. Nosotros ca vemos que no sólo se tiene acceso a las variables dentro de la función, también podemos acceder a éstas fuera de la función también, que decimos aquí con el registro de consola. No obstante, si agarramos aquí estas dos variables y luego las cortamos, y luego en su lugar las pegamos dentro de nuestro cuerpo de función. Nos da ahorrar, recargar. Por lo que ahora vemos que se puede acceder a nuestras variables dentro de la función. Pero vemos que se lanza nuestro registro de consola y se produce un error. Esto se debe a que hemos movido estas dos variables de lado de este cuerpo de función. Esto significa que ahora tienen alcance local en lugar de global. Alcance local significa que estas variables sólo se pueden acceder localmente dentro de la función que allí fueron declaradas. Es por ello que voy a obtener elemento por ID se está actualizando. Tanto nuestro registro de consola, que está fuera de la función, ahora se lanza y error. Podemos demostrarlo moviendo este registro de consola para que esté dentro de la función. Vamos a mover esto dentro de las llaves de la función. Después, pasa al navegador. Ahora el registro de la consola también tiene acceso a estas variables locales también. Entonces así es como funciona el alcance, se trata de dónde declaramos todas las variables. Entonces recuerda, declararlos fuera de una función significará que son globales y se puede acceder en cualquier lugar. Las variables declaradas dentro de una función solo tienen alcance local y solo se puede acceder dentro de la función. A continuación tenemos otra de estas palabras de las que escucharás llamada izaje. El levantamiento básicamente significa que JavaScript moverá o elevará sus variables y funciones a la parte superior del alcance actual. No se mueven físicamente a la parte superior, aunque en realidad se almacena en la memoria, por lo que eso se puede usar en cualquier momento en el guión. Esto provoca algún comportamiento que tal vez no esperemos. Pasemos a nuestro ejemplo de antes y echemos un vistazo a esto con más detalle. Por lo que pasa a nuestra función. Entonces, en primer lugar, declaramos nuestra función justo aquí y luego debajo esto irá adelante y llamaremos a nuestra función para ejecutarla. Esperaríamos que esta función funcionara porque el navegador sabe que declaramos esta función primero y luego llamó a la siguiente. Nuestro código se lee de arriba a abajo. Pero y si llamáramos primero a la función antes de declararla. Entonces si un estado de ánimo se multiplica, debería abrir la parte superior, por lo tanto llamar a la función antes de que realmente la declaremos. Guardemos eso y veamos qué pasa. Todavía vemos las cosas funcionando porque como dijimos antes, las funciones son variables almacenadas en la memoria. Entonces cuando esta función se llama justo aquí, el navegador o el intérprete ya sabe que existe. Cuando miramos funciones hace algunos videos, miramos dos tipos diferentes. Estos tipos que se ven aquí, que es una función con nombre, y también una función anónima que no tiene nombre. Recuerda, se ve así. Entonces si eliminamos el nombre y luego lo instalamos dentro de una variable llamada función anónima y establecemos esto igual a toda la función justo aquí. Si llamamos a esta función abajo en la parte inferior. Por lo que el cambio se multiplicó para ser función anónima. Entonces mueve esto hacia abajo al fondo. Guarda y luego vuelve a cargar. Vemos que todo sigue funcionando perfectamente bien. También mencionamos al mirar funciones anónimas hace algunos videos, que hay una diferencia entre las funciones anónimas y las funciones nombradas. Si bien la diferencia rara funciones anónimas es cuando se llama en primer lugar, dará como resultado un error. Entonces si mueve esta función anónima llamada de nuevo a la parte superior del navegador y recarga. Ahora vemos un error en la consola y el nicho ya no funciona. Por lo que esta es una diferencia entre los dos tipos de funciones. Las funciones anónimas no se elevan, ni se almacenan en la memoria, sino que se denominan declaraciones de funciones, las cuales vimos primero izadas. El levantamiento también ocurre con las variables. Echemos un vistazo a esto, si comentamos esta función, recordando código de Visual Studio, esto es comando o control con una barra inclinada hacia adelante. Entonces si declaramos una variable de x para ser 10. Entonces la segunda variable de y para ser igual a cinco. Entonces vamos a alertar a estos dos valores de x e y. entonces vamos a agregar x e y y separarlos con una cadena. Vamos a eso añadir un símbolo de pipa aquí dentro. Si guardamos eso y luego recargamos el navegador, ahora recibimos nuestra alerta de 10 y luego cinco. Entonces este es el comportamiento que esperaríamos. Hemos declarado una variable de x e y, luego alertamos a estos a la pantalla. Por lo que todo esto es comportamiento esperado. Pero qué pasaría en su lugar si moviéramos la alerta por encima de nuestra variable de y, vamos a guardar esto y echar un vistazo a esto en el navegador. Recargar, y obtendremos el valor de 10, entonces y es indefinido. Por lo que dijimos antes de que se levanten las variables. Por lo que esperaríamos que los valores de x e y se almacenen en memoria y estén disponibles cuando llamemos a esta alerta. Pero esto no está pasando. Entonces hay una cosa de la que estar al tanto sin embargo. Si bien estas variables se almacenan en la memoria, sólo la decoración, como la variable de x y la variable y, se almacena en la memoria en lugar del valor real que le asignamos de cinco y también 10. Entonces para ver esto con más claridad, entremos en nuestro ejemplo. Esta primera variable es la inicialización, esto significa que declaramos una variable de x y asignamos el valor de 10 a esta variable. Una declaración, por otro lado, es cuando acabamos de declarar un nombre de variable sin asignar un valor, como este aquí por lo que esta es la declaración. Entonces ahora sabemos la diferencia entre la inicialización y la declaración. ¿ Por qué le importaría esto a nuestro código? Bueno, cuando se eleva alguna de estas variables, incluso aquellas en las que establecemos un valor inicial como este, sólo la declaración se almacena en la memoria. Es por ello que nuestra variable de y, que tendrá aquí, se muestra como indefinida. En realidad, la variable de y es izada o almacenada en la memoria. Entonces el navegador está consciente de que existen, pero no es consciente del valor inicial que fijamos en cinco. De ahí por qué obtenemos el valor de indefinido. Entonces todo esto puede parecer un poco complejo si esto es nuevo para ti, pero así es como se lee el código. Por lo que es realmente importante entender para evitar cualquier error o comportamiento esperado. Una de las cosas a quitarle esto es declarar siempre tus variables en la parte superior del alcance. Significa que si las variables son locales, que teníamos dentro de la función aquí, colocarlas en la parte superior del cuerpo de la función, o si queremos que nuestras variables sean globales, deberíamos ponerlas en la parte superior de nuestros guiones. Entonces movamos nuestro x e y hasta arriba de los guiones, sumémoslo arriba de nuestras alertas de antes. También podemos establecer que este sea nuestro valor de cinco, nos da guardar y refrescar. Ahora no tenemos ningún problema porque ahora nuestras variables están establecidas en la parte superior del alcance actual. Por lo que incluso debería poner estos en la parte superior o al menos por encima del código al que vas a acceder a ellos en nuestro caso, la alerta. Esto asegurará que nuestro código se escriba de manera similar en la que se lee y posiblemente evitando cualquier comportamiento inesperado. 18. Funciones de flecha: Al igual que la mayoría de los lenguajes de programación, JavaScript evoluciona con el tiempo, y esto puede cambiar o agregar nuevas características y sintaxis. JavaScript se basa en un lenguaje de scripting llamado ECMA Scripts, que tiene como objetivo estandarizar la implementación de JavaScript. Es por ello que a menudo escucharás versiones de JavaScript que se hacen referencia como cosas como ES5, ES6 o ES7, por ejemplo. ES5 o script ECMA versión cinco es una versión que actualmente está totalmente implementada en todos los navegadores sin necesidad de herramientas. Para confundir aún más las cosas, también las escucharás referidas como el año de cada lanzamiento. ES6 salió en 2015, por lo que también se puede escuchar esto llamado ES 2015. medida que pasemos por este curso, usaremos características modernas o sintaxis de la especificación ES6 y superior. Esto solo significa una forma más moderna de escribir JavaScript o una característica más reciente. A partir de este video veremos la función de flecha ES6. Una función de flecha es una forma de escribir una función, que ya has visto, pero con una sintaxis más corta y más limpia. Si vamos a los archivos de inicio a la sección de funciones de flecha, si nos desplazamos hacia abajo, veremos los valores del número uno y el número dos multiplicados dentro de una función anónima, que vemos justo aquí. Una función de flecha ES6 nos permite ejecutar el mismo código dentro de estas llaves, pero usando una sintaxis más corta. Por lo que todavía podemos mantener nuestra variable de función anónima, pero en lugar de tener la palabra función, podemos simplemente usar los paréntesis así, y luego los iguales y mayores que el símbolo, y todo el resto del código dentro de los tirantes rizados simplemente se mantiene igual. Si guardamos esto y luego recargamos, seguimos viendo el valor de 50 en el navegador. Es posible que a menudo escuches esto llamado función de flecha gorda también, por cómo se ve la sintaxis con este símbolo igual y los corchetes de ángulo recto. Estos corchetes o paréntesis que tenemos aquí, todavía pueden tomar en cualquier parámetro y argumento, como ya hemos visto. Entonces si eliminamos nuestras dos variables aquí arriba y en su lugar las pasamos como argumentos. Entonces vamos a añadir un num, uno, y luego num, dos. Entonces podemos pasar en estos valores como argumentos cuando llamamos a la función. Entonces 5 y 10, guardar, y luego pasar al navegador. Esto todavía funciona exactamente igual que antes. Si sólo tenemos un argumento para pasar, podemos mostrar aún más sobre esta sintaxis eliminando por completo los paréntesis. Entonces si sólo quisiéramos pasar en un número, como cinco, dos de nuestro segundo parámetro aquí. También podemos quitar los corchetes o los paréntesis y simplemente dejar nuestro nombre de parámetro dentro de aquí y luego para evitar cualquier error, solo eliminaremos este número dos de aquí, recargaremos el navegador, y ahora obtendremos el valor de cinco. Entonces esta es ahora una sintaxis más corta y más limpia, y así es como escribiremos funciones para mucho del resto del código durante este curso. Entonces todo esto es genial y funciona bien ahora, y así es como podemos usar una función de flecha ES6. 19. Eventos de Javascript: Ahora es el momento de mirar otra parte importante de la construcción de sitios web, y esto son eventos de JavaScript. Los eventos se activan de muchas maneras, cuando se hace clic en un botón, esto puede desencadenar un evento, cuando un mouse pasa por encima de un elemento, esto también puede desencadenar un evento, incluso cuando la página se carga por primera vez, esto puede desencadenar un evento onload. Podemos entonces decidir qué queremos hacer cuando ocurran estos eventos. Por ejemplo, podríamos ejecutar una función cuando se hace clic en un botón, o podríamos cambiar el color de un elemento cuando un mouse pasa sobre él. Aquí en el sitio web de Escuelas W3 bajo los eventos HTML DOM, hay una enorme lista de eventos que podemos escuchar, si nos desplazamos hacia abajo. En primer lugar, tenemos los eventos del mouse, así que tenemos onclick, tenemos onclick, onmouseleave, onmouseenter, onmouseover, out, y up. Más abajo también tenemos eventos de teclado los cuales se activan cuando se presionan varias teclas. Por ejemplo, podemos desencadenar un evento cuando el botón del teclado está presionado hacia arriba o hacia abajo y hay prácticamente todo tipo de evento para cubrirnos por casi cualquier cosa que pueda suceder en una página web, incluyendo formularios aquí, podemos decidir qué queremos hacer con cosas como onchange, onsearch, o onsubmit, que es qué hacer cuando se haya enviado el formulario. También hay eventos de arrastre, eventos de portapapeles, y tantos más. Vamos a estar usando algunos de estos durante este video y esto nos da tantas opciones a las que podemos responder dentro de nuestro código. Si nos dirigimos a los archivos de inicio, podemos seguir adelante y echar un vistazo a algunos ejemplos. Pasa al archivo de eventos de JavaScript, y luego empecemos dentro de nuestro ejemplo. Aquí tenemos un texto simple dentro de un elemento P y luego dentro del script, tenemos una función de flecha. Dentro de aquí, acabamos de cambiar el estilo del tamaño de fuente para ser de 34 píxeles y luego ejecutar esta función. Iremos al navegador y recargaremos. Este es el texto que tenemos después de que se haya aplicado el estilo. Actualmente estamos llamando a nuestra función dentro del guión, que está justo aquí. Si querías que esta función solo se ejecutara cuando algo sucede, como un usuario moviendo el mouse sobre el texto, podemos agregar esta función llamada a un evento. Dentro del elemento P justo aquí dentro del interior abierto vamos a añadir onmouseover, y este es el nombre de uno de los eventos que hemos visto antes y luego podemos establecer esto igual al nombre de nuestra función, que es ChangeFontSize y luego añadir las instalaciones justo después. Esto ejecutará entonces esta función cada vez que el mouse esté encima de este texto. Entonces vamos a comentar esta llamada de función derecha a la parte inferior, guardar y luego pasar al navegador, mira nuestro texto de tamaño estándar y ahora si pasas el cursor sobre con el ratón, ahora vemos que el texto se ha incrementado a 34 píxeles. Podemos elegir cualquier evento que queramos activar esta función como onclick. Cambiemos onmouseover para ser onclick, recargue el navegador, y luego si hace clic en el texto, ahora se llama a la función. Cosas como los eventos onclick y mouse son realmente comunes y los veremos mucho. También hay algunos poco comunes que se pueden ver en la lista anterior, como si el usuario intenta copiar algo de la página. Añadamos oncopy, y luego podemos comentar esto, y luego hagamos algo para mostrarnos una alerta, y un mensaje de dejar de copiar mis cosas, así como eso y luego guardar. Ahora si hacemos clic derecho y luego copiamos, ahora vemos el mensaje que aparece en la pantalla. Slash quita esta alerta de aquí y vuelve a instalarla. Incluso podemos ejecutar algún código cuando la página haya terminado de cargar con onload. Podemos hacer esto dentro del cuerpo. Vamos dentro de la etiqueta de apertura y luego añadamos onload. aquí en lugar de llamar a la función, solo voy a aplicar algo de JavaScript para ejecutarse. Vamos a copiar este document.getElementById, justo hasta ahí y luego podemos pegar en nuestro JavaScript dentro de las cotizaciones. Estamos agarrando este elemento de texto. Entonces vamos a cambiar el HTML interno para que sea nuestra cadena de texto de cambiado. Ahora guardamos eso. Ahora en cuanto se haya cargado la página, esto anulará el texto a cambiar. Este método de manejo de eventos dentro de un elemento HTML, como hemos hecho con estos dos ejemplos, se llama manejadores de eventos en línea, aunque este código funcionará, se considera mala práctica hacer cosas como esta. Es mejor mantener separados el HTML y JavaScript, incluso colocando el JavaScript en un archivo separado y esto es lo que veremos pronto en este curso. sigamos adelante y eliminemos los manejadores de eventos del HTML. En primer lugar, los de la sección de cuerpo, sobre todo todo todo desde aquí y también el oncopy desde aquí, después podemos llegar a trabajar moviendo todos estos a nuestra sección de guiones. Empecemos accediendo a todos los elementos P aquí y almacenarlo dentro de una variable. Digamos, var TextElement y set es a, document.QuerySelector. Voy a seleccionar nuestros elementos P con la etiqueta P. Después podemos adjuntar un oyente de eventos a este elemento de texto. Agregar, TexteElement y entonces.AddeventListener. Dentro de los corchetes, este oyente de eventos toma dos valores. En primer lugar es el tipo de eventos que queremos escuchar. Digamos click. Este nombre es generalmente como los que hemos mirado antes sin la palabra puesta antes, por lo que en lugar de onclick, que usamos antes, solo usamos click. También onmouseover solo sería mouseover. El segundo valor o el segundo parámetro separado por coma, es la función que queremos ejecutar. Añadamos aquí nuestra función anónima, los paréntesis y luego abrimos y cerramos las llaves. Poner un punto y coma al final. Dentro de este cuerpo de función, entonces podemos ejecutar algún código. Copiemos esta sección de antes y de hecho, podemos quitar esta función, ya no necesitamos esto. Quitemos todo esto. Entonces dentro de esta función anónima podemos luego pegar esto en, y recordar esta es la que cambia el tamaño de la fuente para ser de 34 píxeles. Dale a eso un guardar y luego recargar, ahí está nuestro texto. Una vez que hacemos clic en esto, ahora aumenta a 34 píxeles. recuerda que esta es una función anónima porque no podemos darle un nombre a esta función, simplemente se ejecuta cuando se activa el evento. Esto también se puede acortar usando la sintaxis de la función de flecha, que se busca hacia arriba. Si eliminamos la palabra clave de función y luego agregamos la flecha justo después, que es igual y luego el símbolo más grande. Comprueba esto está funcionando bien haciendo clic en el texto. Usar este oyente de eventos add también sería útil si quisieras escuchar todos los elementos P en una página en lugar de solo uno. Para ello necesitaríamos recorrer todos ellos y cubriremos el bucle en la siguiente sección, o si quisiéramos darle un nombre a esta función para poder reutilizarla en otro lugar, podemos cortar desde aquí y crear una función separada eso se debe a que es un poco más pequeño, por lo que todo encaja en una sola línea. Entonces voy a seguir adelante y copiar de esta llave de cierre aquí justo al inicio de esta función paréntesis. De hecho, vamos a cortar estos otro lugar entonces por encima de esto podemos crear nuestra función. Dale a esto un nombre de, var ChangeFontSize, al igual que esto. Entonces podemos establecer esto igual a la función que se copió y espaciar esto un poco. Ahora tenemos nuestra función separada que ahora es autónoma y se almacena en el valor del cambio de tamaño de fuente. Ahora en lugar de tener esto como segundo argumento, ahora podemos simplemente pegar en este nombre de variable y el código debería funcionar exactamente igual. Refrescar, dar clic en el texto y la función aún funciona. A pesar de que ahora lo hemos colocado en su propia variable, esto también significa que ahora diferentes partes de nuestro código todavía pueden ejecutar esta función accediendo a este nombre aquí. Aviso cuando llamamos a la función justo aquí, no agregamos las premisas justo después, así. Esto se debe a que nuestro [inaudible] ejecutará la función de inmediato. No esperará primero al manejador de eventos. Vamos a añadir estos en, guardar, y refrescar y podemos ver que el texto es de inmediato 34 píxeles incluso antes de que hayamos hecho clic en el texto más pequeño. Quitémoslos ahora de este ejemplo y digamos esto. Esto es todo, ahora para nuestro primer look de eventos, son realmente útiles y algo que usaremos mucho al trabajar con JavaScript. Seguiremos mirando los eventos en el siguiente video, donde veremos el eventobject. 20. El objeto evento: Ahora deberías tener un conocimiento de qué son los eventos, y qué podemos hacer con ellos. También hay alguna información adicional que se pasa al manejador de eventos, que se llama el objeto de evento. Esta información es todo sobre los eventos como: qué tipo de evento fue, qué elemento se activó, y mucha más información que ahora veremos. Si pasamos a nuestros archivos de inicio para los objetos de eventos, dentro de aquí tenemos nuestros textos y prácticamente el mismo ejemplo del último video. Tenemos un EventListener que una vez hecho clic, entonces cambiaremos el FontSize ejecutando esta función aquí. Por lo que dentro de los paréntesis para esta función, que es esta sección aquí, podemos agregar un parámetro así como este. Este puede ser cualquier nombre de tu elegido pero a menudo se llama evento o e para abreviar, porque contiene la información que se le pasa sobre nuestros eventos. Se puede pensar en esto como una variable que contiene esta información, pero ¿qué información se le pasa? Bueno, vayamos dentro de nuestra función y hagamos un registro de consola. Podemos echar un vistazo. Console.log el valor de e. Guarda esto y luego abre estos en el navegador. Haga clic con el botón derecho e Inspeccione, y luego vaya a nuestra Consola. Con esto ahora abierto si activamos esta función haciendo click en nuestro texto, ahora veríamos alguna información dentro de la Consola. Abramos esto y veamos qué contiene. si nos desplazamos hacia abajo, podemos ver que hay una enorme cantidad de información que se pasa al manejador de eventos. En su mayoría nunca lo usarás realmente, pero podemos ver alguna información sobre los eventos. Vemos que es un MouseEvents. Vemos en qué posición en la pantalla se activó el MouseEvent con las coordenadas x e y. Echaremos un vistazo a estas posiciones x e y en tan solo un momento. Por ahora si nos desplazamos aún más hacia abajo hasta el objetivo que está justo aquí, podemos ver que hay una referencia al objeto que despachó los eventos. En nuestro caso, son los elementos p con el id del texto. Podemos ver esto mejor si pasamos al navegador. En lugar de simplemente registrar e, podemos seleccionar “e.target” refrescar, desencadenar nuestros eventos. Ahí está nuestro objetivo de eventos, que son los elementos p con el id de los textos. Podemos utilizar cualquier pieza de esta información dentro de nuestro código. Por ejemplo, si volvemos a Consola, inicia sesión en los eventos completos y actualiza. Mencionamos antes que tenemos algunas posiciones del mouse, que es ClientX y ClientY. Esta es la posición x e y de donde hicimos clic en este texto. Ahora podemos seguir adelante y rastrear la posición del ratón sobre nuestros elementos mediante el uso de estos clientes: X e Y. Volver a nuestra función. Cambiemos este document.getElementById de cambiar el estilo. En cambio, podemos cambiar el innerHTML de los elementos p para sea igual al evento al que se accede con e.ClientX, que es el valor x del mouse. Entonces agreguemos un elemento break para agregar el valor y en una línea separada, y accederemos a y con e.clienty. Agregamos un punto y coma al final. Si bajamos por debajo de nuestra función al EventListener, lugar de escuchar eventos de un clic, podemos escuchar los eventos de mouseover. Esto provocará que los eventos se activen cada vez que el mouse se desplace sobre los elementos p, los cuales luego mostrarán los valores de x e yGuarde eso y luego vaya al navegador, hecho podemos cerrar la Consola hacia abajo. Entonces cada vez que movemos el ratón sobre los elementos p, podemos ver las coordenadas x e y se actualizan cada vez. Es así como podemos usar los objetos del evento para obtener alguna información adicional sobre el evento. Como pueden ver, se nos pasa mucha información a la que tenemos acceso. A continuación, veremos cómo podemos hacer que nuestro código sea más legible y organizado moviendo nuestro JavaScript a archivos separados. 21. Javascript externo: Todo ahí en los archivos de inicio de JavaScript, hay una carpeta, si vas dentro del menú llamado JavaScript externo. Si abres esta página HTML de punto índice, es el mismo código en el que terminamos el último video. Lo que estaremos haciendo en este video es sacar el JavaScript de este archivo HTML y colocarlo en su propio archivo separado. Al igual que lo que hicimos antes con CSS. En primer lugar necesitamos ir a nuestra carpeta de proyectos y crear un archivo para agregar esto con la extensión dot js. Dentro de este archivo JavaScript externo, haga clic en el icono de nuevo archivo, y podemos llamar a esto cualquier cosa que queramos. Quiero llamar a este guiones dot js. Entonces necesitamos cortar el contenido del script para índice de punto HTML y luego pegarlo en este nuevo archivo. Vuelve al índice y luego desplázate hacia abajo hasta nuestra sección de guiones. Hagamos esto un poco más pequeño por ahora y después si cortamos todo el contenido de nuestros guiones dejando en estas dos etiquetas en su lugar. Pega esto de nuevo en nuestros scripts dot js archivo y dale a eso un guardado. Bien. El JavaScript ahora está en su archivo separado, para que las cosas funcionen. Todavía necesitamos vincular este archivo en la página de índice utilizando el atributo fuente. Volver al índice. Vamos a mover las etiquetas de guión juntas. Entonces sigamos adelante y agregamos los atributos de origen. Esta va a ser una ruta relativa a nuestros scripts dot js archivo, el archivo de script, y también esta página de índice están en el mismo nivel de carpeta. Simplemente podemos añadir guiones dot js. Si guardamos esto y luego vamos al navegador, recargar, y ahora nuestro código aún funciona. Cada vez que nos movemos, los elementos dp ahora obtendrían un valor x e y actualizado para el ratón. Muchas de las ventajas de los archivos JavaScript externos es similar a los archivos CSS externos. En primer lugar, tenemos el HTML, CSS y JavaScript separados , haciendo que nuestro código sea más organizado, legible y mantenible. Además tener JavaScript separado en su propio archivo nos permitirá usarlo en múltiples archivos HTML. Si solo dejamos el JavaScript en los archivos de script como teníamos antes, solo se puede usar en este único archivo. También podemos agregar múltiples archivos JavaScript a la página HTML dos todo lo que necesitamos hacer es agregar más etiquetas de script con el atributo fuente para cada archivo. A continuación, vamos a poner en práctica lo que hemos aprendido en esta sección construyendo una calculadora para convertir valores de píxel en em. 22. Hora de practicar: convertidor de píxeles a em: Ahora es tu oportunidad de poner en práctica lo que hemos aprendido hasta ahora en este curso. Vamos a estar creando una calculadora que convierte los valores de píxel para ser em. Recuerde, em es un tamaño relativo, que se basa en el contenedor padre. Por ejemplo, en píxeles, si el contenedor padre era de 20 píxeles y queremos detectar dentro para ser de 18 píxeles, podemos hacer clic en convertir y luego cuando establezca el valor en 0.9 em. Todo lo que necesitas para construir esta calculadora, lo has aprendido hasta ahora en este curso. No debería vomitar ninguna sorpresa y si pasamos a los archivos de inicio, y si pasamos a 20, que es la calculadora pixel to em y si vas al script.js, tenemos el cálculo en la parte superior. Para obtener el tamaño em, dividimos el tamaño de píxel requerido por el tamaño de píxel padre y esta es la conversión que necesitarás para que esto funcione. Además, si pasamos a la página de índice, ya te proporcionan todos los estilos y el mark-up que necesitarás para empezar. Todo lo que necesitas hacer estará dentro del archivo JavaScript. Podemos seguir adelante y enfocarnos en agregar el JavaScript. Puede parecer un poco complejo, pero todo lo que necesitamos hacer, es conseguir este cálculo, agarrar los valores para todos los padres, y también el tamaño requerido, y realizar este cálculo cuando se haga clic en este botón. Buena suerte con esto, dale un buen partido a esto, y te veré en el siguiente video donde pasaremos por mi solución. 23. Solución: convertidor de píxeles a em: Bienvenido de nuevo. Espero que hayas logrado que tu calculadora funcione, o al menos dale un buen partido. Ahora voy a seguir adelante y mostrarles cómo hice mi versión. Tal vez un enfoque diferente de cómo hiciste el tuyo, pero mientras esté funcionando, está bien. Generalmente hay más de una forma de hacer las cosas. Todo el CSS y HTML, como puedes ver aquí, ha sido atendido por nosotros en los archivos de inicio. Todo lo que necesitamos hacer es ir al script.js y empezar a trabajar dentro de aquí. Vamos a seguir adelante y crear una función para realizar este cálculo. Voy a llamar a mi cálculo, y establecer esto en función ar. Dentro de aquí voy a empezar por agarrar los valores de los padres y requeridos. Esa es esta caja de aquí y esta de aquí, luego guardarlas luego a un lado de variables. El valor de la variable del padre. Distribuir documentos.GetElementsById y el Id que queremos agarrar. Si echamos un vistazo a la página del índice, hay esta entrada de padres aquí con el Id si los padres. Entonces la segunda entrada tiene han Id de requerido y lo usaremos en tan solo un momento. Añadamos padres aquí dentro. Podemos entonces agarrar el valor con valor de puntos, y luego podríamos hacer lo mismo por el valor requerido. El var requerido es igual a documents.getElementById. Recuerda que se requería el Id que miramos antes, y luego de nuevo podemos agarrar el valor con valor de punto. Ahora estamos agarrando los dos valores de los dos campos de entrada. La tercera variable que quiero crear es para la salida, y este es el resultado que se ve aquí. Este es el elemento p que va a obtener los resultados cada vez que realizamos el cálculo. Recortemos esto con el Id de resultados y luego almacenarlo dentro de una variable. Los resultados de Var son iguales a document.GetSelementById, y los elementos tendrán resultados, y solo podemos almacenar esto por ahora. Ahora queremos realizar este cálculo. Cada vez que el usuario hace clic en este botón de conversión, si volvemos al índice de html, este botón está justo aquí. Podemos agarrar este botón con un selector de consultas y luego agregar un oyente de eventos para cada clic, para luego seguir adelante y realizar este cálculo. El botón se instalará dentro de una variable llamada btn, y luego document.QuerySelector. Agarra nuestro botón y luego pulsa btn y podemos seguir adelante y añadir el EventListener. Dentro de los corchetes, podemos agregar dos valores. El primero es click y este es el tipo de evento que quieres escuchar. Una vez que se está haciendo clic en el botón, entonces queremos seguir adelante y ejecutar esta función aquí. Añadamos esto en como nuestro segundo valor para comprobar que esto está funcionando bien, entonces podemos hacer un registro de consola dentro de la función, y luego podemos registrar nuestros dos valores del valor principal y el valor requerido. Estatus. Compruebe estas fila, está bien, entonces parentValue y luego espacio vacío, y luego el valor requerido. Guarda eso en el navegador y luego abre la consola. Simplemente haremos clic en Convertir primero, y no deberíamos ver nada dentro la consola porque estamos dando salida a los valores de estas dos entradas. Añadamos algunos encajan por aquí, 20 y 16 convertidos, y así allá vamos. Ahí están nuestros dos valores dentro de ahí. La forma sencilla de seguir adelante y actualizar este resultado aquí es solo agarrar esta variable de resultado aquí y establecer el innerHTML para que sea los resultados de este cálculo aquí, que es un RequiredValue dividido por el parentValue. Vamos a darle una oportunidad a esto. Si decimos resultados punto innerHTML es igual al valor requeridvalor dividido por el valor parentValue del navegador, y eso es valores en aquí convierte y obtendremos el valor de 0.6 los establecerá en ambos 20, deberíamos obtener el valor de 1 M. Esta es una forma directa de hacer las cosas. No obstante, si actualizamos y solo agregamos un valor en el lugar click converts, vemos que obtenemos el mensaje de Infinity, o si solo hacemos click en Convertir sin ningún valor en su lugar, obtendremos no un número. Queremos protegernos contra cualquier campo vacío que resulte en estas áreas. Podemos hacer esto agregando un if else declaraciones dentro de este cálculo. Debajo de esto podemos decir si podemos agregar un signo de exclamación y luego parentValue. Si el valor parentValue está vacío, y recuerde que la tubería es para todos o el valor requerido está vacío. Por lo que cada uno de estos campos está vacío, entonces querría crear una alerta al usuario solo con un simple mensaje de 'por favor rellena todos los campos'. Al igual que eso, y entonces también podemos agregar una declaración else. Por lo que esta declaración else se ejecutará si todos los campos han sido respondidos. Si este es el caso, queremos agarrar estos resultados. HTML y seguir adelante y ejecutar este código y vamos a darnos un ir en el navegador. Ahora si da click en convertidos, verás el mensaje de 'por favor rellena todos los campos'. Sólo intentemos uno de estos. Seguirá obteniendo el mismo mensaje, y luego si probamos el cálculo, todo parece funcionar bien. De acuerdo, así es como completé este proyecto. Recuerda si el tuyo se ve un poco diferente, siempre y cuando esté funcionando, todo está bien. Este es ahora el final de la sección todo sobre manipulaciones, funciones, y eventos DOM (Document Object Model). Si algunas cosas te siguen confundiendo, no te preocupes demasiado. Todo el mundo aprende a diferentes pasos y hay mucho que tomar aquí si eres nuevo en esto. Recuerda aunque mucho de lo que hemos aprendido en esta sección se repetirá muchas más veces a medida que avanzas por este curso. Seguirás obteniendo mucha más práctica o usando estas técnicas. Te veré ahora en la siguiente sección donde cubriremos bucles, matrices, y objetos. 24. Matrices en Javascript: Vamos a dar inicio a esta nueva sección mirando matrices JavaScript. Ya hemos tenido muchas variables de escritura de práctica que como sabemos almacenan un solo valor. Las matrices también almacenan valores, igual que una variable, pero podemos agregar más de uno. Pasado al archivo de inicio de matrices, que está justo aquí. Podemos iniciar una matriz igual que una variable normal. Abajo al script, podemos usar la palabra clave var y luego establecer un nombre, que desea establecer para nuestra matriz. Al igual que una variable, también podemos establecer nuestros valores, pero podemos establecer más de uno separado por comas dentro de los corchetes. Digamos un corte, una coma, una cuerda de perro, una coma y vayamos por un tigre con punto y coma al final. Ahora vamos a dar salida a esto con una alerta. Digamos alerta. Dentro de esta alerta, podemos alertar a nuestro conjunto de animales. Digamos que nuestra alerta dentro de la recarga del navegador. Ahí están nuestros tres artículos los cuales están dentro de nuestra matriz. O podemos dar salida a esto a un elemento, igual que ya hemos visto. Si pasamos a nuestro HTML, vamos a crear un div con una ID igual a animales, que solo pueden dejar los contenidos vacíos por ahora y luego bajar a nuestro guión. Entonces podemos agarrar esto con get element by ID. El ID era animales y luego podemos establecer el HTML interno como lo vimos en muchas veces previamente y establecer esto a nuestra matriz de animales. Guarda, cierra esto y refresca y ahora veremos nuestra matriz en la pantalla. Solo hemos usado cadenas dentro de esta matriz, pero también podemos contener cualquier otro tipo de datos, como números o booleanos. Estos van exactamente igual, separados por una coma. Agregamos nuestros números, más bien citas, y también podemos establecer nuestros valores booleanos de verdadero o falso. Guarde eso, y también vemos estos resultados como se esperaba. Muestra en nuestra matriz de animales, así como esta, mostraremos todos los elementos dentro de nuestra matriz. Pero si solo quisiéramos seleccionar uno en particular, podríamos referirlo por su posición en la matriz. Al igual que hemos mirado anteriormente, podemos seleccionar un número de índice con los corchetes y luego agregar nuestro volumen de índice. Recuerden las matrices, al igual que hemos mirado antes, comienzan en la posición cero. Guarda eso y ahora deberíamos conseguir el primer fonema de corte, y por supuesto podemos cambiar esto para que sea cualquier número. Si quisiéramos Tiger iría cero, uno, y luego dos. Establece esto como dos, y hay tigre dentro del navegador. Esto es similar a lo que miramos antes cuando miramos consulta select all y agregamos estos corchetes después de ella. Junto con acceder a los valores de una matriz. También podemos usar la propiedad [inaudible] para ver cuántos valores contiene. Pasado a nuestro guión, deja los corchetes. Entonces podemos decir animals.length, y nuestra matriz tiene cinco valores diferentes. Deberíamos ver el valor de cinco dentro del navegador. Bien. Es así como podemos usar matrices JavaScript. Continuaremos con las matrices en el siguiente video, donde veremos algunos métodos de matriz incorporados. 25. Métodos de matriz: En nuestro archivo de inicio para este video, que es el número 22, métodos array, tenemos un conjunto de animales de aspecto similar al último video, que está justo aquí. Después los mostramos en un div con el id de animales que trajeron esto arriba para conseguir elementos por ID está abajo en el fondo esta vez, lo cual se puede ver aquí. Esto se debe a que antes de poder llegar a mostrar este Array, hay algunos métodos incorporados que podemos usar llamados Métodos de Array. Hay bastantes de estos métodos que podemos usar. Aquí vamos a ver algunas de las más comunes. Incluir cómo agregar y eliminar valores de una matriz usando JavaScript, comenzando por turno. Si nos desplazamos hasta el primer comentario que se acaba de escuchar, turno eliminará el primer elemento de nuestra matriz, que en nuestro caso es gato. Todo lo que necesitamos hacer es acceder al Array por su nombre y luego decir turno de puntos. Es simple así, ahora si abrimos este Array Methods dentro del navegador, ahora vemos nuestro primer valor de cat ahora se retira. Este es nuestro nuevo retorno de Array hacia atrás, ahora sólo tenemos nuestros cuatro valores. También podemos almacenar este artículo eliminado en una variable si quisiéramos. Todo lo que necesitamos hacer es asignar una variable como animal1 y establecer esto igual a nuestros valores de animals.shift. Entonces podemos echar un vistazo a esto dentro de la consola. Entonces consola log, y eso es salidas el valor del animal uno, guardar, inspeccionar dentro de la consola. Ahí como se esperaba, tenemos nuestro primer valor de gatos. En cambio, si quisiéramos agregar elementos al principio de la Array, podemos usar unshift para agregar tantos elementos como queramos. Desliza comentarios hacia fuera estas dos líneas aquí, y luego muévete hacia abajo para desdesplazar. Aquí podemos comenzar con la matriz de animales, igual que antes, y luego seleccionar el método de desdesplazamiento. De nuevo seguido de los corchetes y un punto y coma, y luego como una cuerda, voy a añadir algunos animales nuevos, como el leopardo, separados por una coma, un segundo valor de pájaro. Veamos si nuestro Leopardo y pájaro está ahora dentro del navegador. Eso va ahora consiguió leopardo y pájaro empujados al inicio de nuestra Array. Esta nueva matriz se nos devuelve con estas nuevas ediciones, el turno y desturno, un como un par. Ambos modifican el inicio de una matriz. La siguiente herramienta, que se llama Push and Pop, modifica el final de un Array. Empecemos con push, que agregará uno o más valores al final de esta matriz. Vamos a comentar esta línea aquí. Muévete hacia abajo para empujar. A partir de nuestros animales Array, podemos utilizar el método de empuje de puntos. Entonces dentro de aquí podemos sumar algunos valores más. Añadamos nuestro leopardo y luego nuestro pájaro. Esta vez hasta el final de una Array, refresca, así que están nuestros primeros cinco elementos de antes, y luego nuestros dos últimos empujados hasta el final de la Array. A continuación tenemos pop, que es bastante sencillo. Llamaremos al método pop para eliminar el último elemento del Array. Comenta esta línea aquí y hasta la sección pop aquí, esto es bastante simple, esto es igual que cuando usamos animals.shift, pero esta vez usamos animals.pop. No agregamos ningún valor dentro de los corchetes porque simplemente estamos eliminando el último elemento, guardamos esto, recargamos, y nuestro último valor se retira del Array original. Estos cuatro métodos son geniales pero se limitan a trabajar solo con el principio o el final de un Array. Para quitar o agregar elementos en diferentes posiciones, podemos utilizar el método de empalme. Asegúrate de que todos los métodos que acabamos de ver estén comentados, y regresamos al Array original con nuestros cinco elementos, entonces podemos llamar a animals.splice. Justo aquí, se ve el método de empalme vino con los corchetes y el punto y coma. Para comenzar a eliminar elementos, necesitamos agregar dos valores dentro de estos corchetes o paréntesis. Digamos que queríamos quitar a este tigre, que está justo aquí. Recuerda, Array comienzan en la posición cero, lo que significa que el tigre estaría en la posición de índice dos. Nuestro primer valor es dos, así que asegúrate de que esto esté escrito correctamente. Empalme así. Después sumamos nuestra primera posición, que es dos. Si solo tienes un valor como este, también se eliminarán todos los Ítems después del número dos. Justo así. Todo desde tigre en adelante se retira, o podemos agregar un segundo valor, que es una serie de artículos a quitar. Setting tiene que ser uno, sólo vamos a quitar nuestro volumen de tigre, dejando a nuestra jirafa y león al final. Es así como podemos quitar los artículos. Pero si en cambio quisiéramos reemplazar este ítem, así que si quisiéramos reemplazar al león, solo podemos sumar algunos valores después de esto. Separados por una coma, sustituyamos un león por un pez. Recargar, y ahí vamos. Todavía tenemos nuestro gato original, perro, jirafa, león, ambos peces ahora reemplaza nuestro valor de tigre. También podemos agregar múltiples elementos en dos, todo lo que necesitamos hacer es separar estos por una coma. Vamos por un mono esta vez, refresquemos, y ahí está nuestro acceso a los artículos en el medio. Envolvamos este video con uno más, que es cómo revertir el Array, que regresó en orden inverso. Todo lo que necesitamos hacer es bajar a una sección inversa y seleccionar los animales.corchetes inversos y punto y coma. Recuerda desde antes nuestro león está al final y el gato está al principio. Si nos refrescamos, esto ahora se canjea. También hay algunos más Métodos Array que pueden hacer varias cosas, y pronto cubriremos más de éstas. Si te interesa una lista completa, simplemente dirígete a Google y luego haz una búsqueda de Mozilla Array Methods. Es respuesta, y debe ser el primer resultado el que se apoye. Selecciona esto, y luego podemos desplazarnos hacia abajo hasta la sección de métodos, que está bastante abajo. Sigamos adelante, ahí están nuestras propiedades las cuales miramos Array.length. Aquí están nuestros métodos también, siéntete libre de echar un vistazo a todos estos diferentes métodos y averiguar cómo funcionan. Hemos mirado algunas de estas hasta el momento, así que justo, empalme, cambio, desenmueva, empuje y reversa. Ya es para este video, y te veré la próxima vez. 26. Bucle a través de matrices: forEach: En los próximos videos, nos vamos a centrar en bucles. Looping hace que la repetición de tareas sea realmente fácil. En este video, estaremos mirando el para cada bucle. El bucle ForEach ejecutará una función para cada elemento de la matriz. En primer lugar, pasemos a nuestros archivos de inicio, así que vayamos al número 23. El bucle a través de matrices se cierra. Aquí tenemos un iniciador básico con nuestro div vacío y luego la matriz de nuestros animales. En primer lugar, echemos un vistazo al problema, si quisiéramos hacer algo con estos elementos de matriz, tendríamos que seleccionar cada elemento individualmente. Hagamos un registro de consola, iniciemos sesión en la consola el valor de los animales. Yo estaba entre corchetes para seleccionar nuestro número índice de cero si queríamos los gatos. Entonces digamos ToupperCase, seguido de los corchetes y un punto y coma al final [inaudible] es un método JavaScript para transformar una cadena en mayúsculas o mayúsculas en minúsculas también está disponible para. Ahora si quisiéramos seleccionar nuestro segundo ítem dos, copiaremos esto y pegaremos satisfacer lo desgastado. Entonces tendremos que hacer este elemento ForEach dentro de la matriz. Esto llevaría mucho tiempo y mucho código repetitivo. Vamos al navegador y a la actualización de la consola. El Nasa va a mayúsculas gato y perro así que, por supuesto esto tomaría mucha repetición para hacer esto por nuestra gama completa. Imagínese si tuviéramos cientos de valores en la matriz que necesitamos ser mucho código repetitivo y esto no es genial. Aquí es donde entra el for each loop. ForEach, vamos a ejecutar una función ForEach elemento array, para decir que fue mucha repetición. Vamos a pasar a nuestro código quitar los registros de la consola, y ver cómo se ve esto. En primer lugar seleccionamos nuestra matriz de animales, y luego usamos punto ForEach. Esto también se comunica con un mayúscula E. Bracket punto y coma luego pasará en una función que desea ejecutar elemento de matriz ForEach dentro de estos corchetes o paréntesis. Vamos a crear una función estándar, los corchetes y luego un conjunto de llaves. Es enter y luego dentro de estas llaves podemos ejecutar nuestro código de función. Entonces pasaría en nombre de nuestra elección, que desea dar a cada elemento de matriz individual. Llamemos a cada elemento individual simplemente animal ahora si queremos hacer algo con cada valor de matriz, podemos usar esta variable animal. Digamos que alerta a nuestro animal, punto y coma refresca el navegador. Ahí hay gatos, perro, está bien otra vez, tigre y esto ahora está buceando a través de cada elemento de la matriz. Esta variable animal también se puede utilizar de cualquier manera. Podríamos agregar algo de texto extra. Digamos que una cadena de animal, tipo animal cuerda más cercana y luego añadir nuestra variable al final. Refresca el navegador y ahora ve tipo animal de gato, perro, tigre, jirafa y león. O incluso volviendo a nuestro ejemplo mayúscula, podríamos usar la variable animal y luego decir punto animal ToupperCase. Corchetes después se refrescan ahora ven nuestros valores en mayúsculas dentro de las alertas. Podemos empujar todos estos nuevos elementos como mayúsculas a una nueva matriz dos. En primer lugar, vamos a crear una nueva matriz vacía por lo que sólo los animales de peluche que dicen var UpperCaseNames. No necesitamos agregar ningún valor simplemente podemos agregar los corchetes para crear una matriz vacía. Sabemos cómo empujar elementos a una matriz, utilizamos el método de empuje de puntos, que miramos en el último video. Abajo dentro de nuestro bucle, en lugar de nuestra alerta, podemos decir UpperCaseNames, que es nuestra matriz vacía justo aquí. Van a empujar. Entonces dentro del soporte, el animal quiere push instalado dentro de esta variable animal. Animal, y pongamos estos en mayúsculas para que toquen los paréntesis. Esta vez en lugar de salidas un este la consola. Hagamos nuestro familiar getElementById, que es el div de este animal aquí. Entonces podemos empujar nuestra nueva matriz a este div. Digamos documento punto GetSelementsById. Todo el ID del animal, podemos establecer el punto HTML para que sea igual a nuestro nuevo array de UpperCaseNames. Desplácese por lo que un punto y coma al final del navegador. Hay una nueva matriz de valores en mayúsculas. Otra característica de ForEach es la capacidad de acceder a cada ítem por deposición o el número de índice. En primer lugar, agregamos un segundo nombre de variable de nuestra elección dentro de la función. Quiero llamar a mi índice tan separado por coma, el nombre de la variable de índice. Entonces podemos usar este índice de lado de nuestra función así que empecemos el índice antes nombre del animal y unámonos a guardar y luego refrescar. Ahora tenemos la posición de índice así como el valor así cero, uno, dos, tres, y cuatro. Podemos construir este nuevo elemento de matriz de cualquier manera que queramos. Por ejemplo, si quisieras agregar un espacio entre el índice y el nombre del animal, podemos hacerlo con una cadena, digamos índice plus y podrías tener espacio o incluso un guión. Después también se unió a nuestro animal en la actualización final y ahí vamos. Por último, los números de índice más grandes que cero así que si quisiéramos que esto iniciara uno, simplemente podríamos agregar más uno al final, digamos índice más uno. Ahí vamos así que ahora nuestro número de índice parte de uno, que probablemente es más realista al momento de dar salida al usuario. Ahora pasemos a ver una novedosa forma de bucles a través de matrices y esto se llama mapa. 27. Bucle a través de matrices: map: Empecemos por pasar a nuestro arrancador vacío, que esta vez es el número 24. Este fue un ejemplo bastante similar a lo que vimos en el último video. Tenemos nuestro div, que está vacío, entonces tenemos nuestra matriz de animales. También tenemos una segunda matriz, que es nuestros animales configurados en UpperCase, que se crea usando este bucle ForEach. Ahora vamos a ver otra forma de bucles a través de matrices, que se llama mapa. En primer lugar, quiero mostrarte rápidamente algo que te ayudará a ver la diferencia entre mapa y ForEach. Si seguimos adelante y eliminamos la matriz UpperCaseMe y colocamos, asignamos el resultado del ForEach a una variable. Digamos var UpperCaseNames y establecer esto para que sea nuestros animales.FOREACH. Ahora simplifiquemos este ejemplo eliminando el número de índice. Elimina el segundo valor del interior de aquí, elimina el contenido de esta función. Entonces podemos simplificar esta función simplemente devolviendo los animales Array.ToupperCase. Igual que eso. Ahora todo lo que estamos haciendo es bucear a través de nuestra matriz original, ejecutando una función que devolverá a nuestros animales en UpperCase, para luego almacenarlos dentro de esta variable. Esto devuelve diamante termina la ejecución de la función y luego devuelve el nuevo valor. Ahora nos desplazamos a través, podemos ver este UpperCaseNames aquí, que ha estado arriba a la pantalla. Ahora refiérase a esta variable justo aquí. Si guardamos esto y luego recargamos el navegador, obtenemos el valor de indefinido. Basta con aferrarse a esto por ahora y hablaremos más de esto en un momento. No obstante, si cambiamos el ForEach, esta vez para ser mapa, así que elimina la palabra clave ForEach de aquí, cambia esto a ser.map. Esta vez si actualizamos, ahora vemos los valores de nuestra matriz en UpperCase. Esta es una diferencia clave entre ForEach un mapa, solo usar mapa devolverá una nueva matriz. Básicamente, ForEach hará un bucle de todos los elementos y hará algo con ellos, como hacerlos UpperCase y empujarlos a una nueva matriz, o incluso a una base de datos. Map también recorrerá los elementos y hará algo con ellos, pero también devuelve una nueva matriz con los elementos transformados, que tendrá acceso al almacenarlos dentro de esta variable. Del mismo modo que un pensamiento final, también podríamos acortar esta función usando la función auto esc. Justo despus.map, podemos eliminar esta palabra clave de función aquí y mantener a nuestro animal y usar la flecha. Igual que eso. Refresca y nuestra matriz aún funciona. Recuerda también, si sólo tenemos un parámetro, que tenemos aquí, incluso podemos quitar los paréntesis y hacerlo aún más corto. Recarga el navegador y todo sigue funcionando bien. Espero que esto tenga sentido para ley de propósitos, mapa y forEach sean intercambiables. Tendrá que usar el mapa cuando desee que se devuelva una nueva matriz. 28. Hora de practicar: matrices: Antes de pasar a mirar más tipos de bucles, creo que deberíamos tomar un respiro y asegurarnos de entender lo que hemos cubierto hasta ahora con matrices y también bucles a través de ellas. Encima en los archivos de Stata, así que abre la barra lateral y ve al número así que abre la barra lateral y ve al número 25 que es momento de practicar y luego abramos esto. Copiemos el camino y luego abrimos esto dentro del navegador. Encima en el expediente Stata, he agregado algunas instrucciones para un pequeño reto para darte algo más de práctica. Tenemos un DIV vacío con el ID de caracteres y también he proporcionado una matriz de nombres de personajes de dibujos animados que me gustaría que ordenaras en orden alfabético y luego almacenaras dentro de una nueva matriz. También hay un pequeño indicio en la parte superior aquí dentro de los comentarios. Podemos usar el método de ordenación de puntos para ordenar la matriz, entonces la segunda parte es usar el mapa de puntos para recorrer esta nueva matriz y agregar el texto de nombre antes de cada carácter. Se verán igual que los comentarios aquí. El texto de nombre y luego la cadena de Bugs Bunny de la matriz, y luego nombre Duffy Duck, y así sucesivamente para cada elemento dentro de esta matriz. Entonces finalmente pondré estos valores dentro de este DIV vacío en la parte superior. Esta es una gran oportunidad para reforzar lo que hemos cubierto hasta ahora pero si estás luchando para que esto funcione no te preocupes, cubriremos la solución en el siguiente video. 29. Solución: matrices: Bienvenido de nuevo. Espero que este reto fuera algo que pudiste completar por tu cuenta. Si no, voy a pasar por una forma de hacer esto. Pasemos a nuestros entrantes y vayamos hacia abajo a nuestro guión. Vamos primero por el número 1, que es organizar los elementos en orden alfabético, y luego almacenar dentro de una nueva variable. Bajemos y usemos este método de ordenación de puntos aquí. Digamos caracteres, que es nuestro nombre original.sort. Entonces necesitamos almacenar esto dentro de una nueva variable, así que eso es asignar, el nombre de la variable de sort es caracteres. El nombre depende de ti. Probemos esto de nuevo en el navegador. Factores a un console.log para nuestra matriz de caracteres ordenados. Refrescar. Abre la consola. Abre la matriz, y ahí está nuestra matriz, Que regresaría ahora en orden alfabético. Podemos seguir adelante y eliminar este registro de consola y luego pasar al número 2. Necesitamos devolver una nueva matriz con cada elemento que tenga el prefijo de nombre. Necesitamos agregar esta cadena de nombre antes de las salidas de cada valor. Para ello, voy a utilizar la función de mapa, que miramos recientemente. Vamos a acceder a nuestros caracteres ordenados, que es nuestra matriz de nombres de caracteres en orden alfabético. Entonces podemos llamar.map. Entonces podemos pasar en una función. Voy a usar la función de flecha ES6 y crea una variable llamada carácter para cada elemento dentro de la matriz. Crea nuestra función de flecha, y dentro de nuestra función, y vamos a devolver, en primer lugar, la cadena. El texto de nombre, que tienes aquí, digamos nombre, un dos puntos, luego el nombre de nuestro personaje individual, que se almacena dentro de esta variable. Está bien. Ahora, porque estamos devolviendo la cadena, ahora necesitamos almacenar esto dentro de la variable. Entonces diremos var y dejaremos decir ordenar nombres y establecemos esto en nuestra función. Por lo que ahora tenemos estos almacenados dentro de una variable. Ahora todos podemos poner estos el navegador usando esta idea de personajes. Agarremos este div vacío con un document.getElementById, que tiene el ID de caracteres. Establezca el punto innerHTML, para que sea igual a esta variable aquí, de SortNames, punto y coma en los extremos. Cierra la consola, y ahí vamos. Ahora, ahí están todas nuestras cuerdas de Nombre: Bugs Bunny, Nombre: Daffy Duck, Jessica Rabbit y Roger Rabbit. Ahora tenemos el prefijo de nombre como una cadena, y estos también están en orden alfabético. Si logras hacer esto, genial. Si no, solo considérelo una experiencia de aprendizaje. A continuación, vamos a echar un vistazo a otro tipo de bucle, que es el bucle for. 30. Bucle for: En los próximos videos, vamos a ver algunos tipos diferentes de bucles. Los bucles que hemos mirado anteriormente están destinados a ser utilizados con matrices. No obstante, el bucle For y while, que vamos a ver es un poco más de propósito general y no exclusivo de las matrices. Digamos que queríamos agarrar uno de estos personajes y añadirlo a la lista desordenada. Vayamos a los datos. Ten aquí nuestra lista vacía o desordenada. Nuestro conjunto de personajes, al igual que antes. Si quisiéramos agregar estos caracteres a esta UL vacía. Para ello, necesitamos recorrer cada elemento dentro esta matriz en las etiquetas li y luego colocarlos dentro de la lista desordenada. En primer lugar, podemos crear una variable vacía para almacenar estos nombres de caracteres con las etiquetas li. Digamos que en los caracteres, cree una variable llamada elemento y establezca esto como una cadena vacía. Si hiciéramos esto manualmente sin usar un bucle, necesitamos hacer algo como esto. Tomaremos nuestro elemento vacío, que es esta variable aquí, y luego usaremos plus igual. Plus igual agregará el valor de la derecha a este ítem de la izquierda. Digamos caracteres, que es nuestra matriz aquí, y luego posicionar cero. Esto asignaría nuestro valor de Roger Rabbit, que está justo aquí, a nuestra variable de artículo. Podríamos entonces agregar esto a una nueva línea agregando una etiqueta de ruptura y luego un punto y coma al final. Si copiamos esto y sumamos las mismas tres veces más. Nuevamente, manualmente necesitamos hacer uno, dos y tres. Después añadiremos estos elementos a esta lista desordenada con un document.getElementById. Quieres carecer de la idea de caracteres y luego establecer el HTML interno para que sea igual a nuestro ítem. Si decimos esto y luego recargar el navegador, bueno. Nuestros elementos de matriz están ahora en la página pero de esta manera no es ideal porque puede tener cientos de elementos dentro de la matriz. Esto significaría mucha repetición. Tendría que repetir estas líneas varias veces para cada elemento de la matriz. Este es un problema en el que un bucle podría resolverse para nosotros. Creamos un bucle for al igual que este. Añadamos la palabra clave for, los paréntesis, y luego abrimos y cerramos las llaves dentro de estos paréntesis aquí. El bucle for toma en tres declaraciones. En primer lugar es lo que se llama el inicializador. Digamos que es nuestro valor inicial de i ser igual a cero con el punto y coma al final. Aquí podemos establecer una variable con nuestro valor inicial es común ver esta variable llamada i, que significa incremento. Esto se debe a que esto se incrementa con cada bucle después del punto y coma. En segundo lugar está la condición. El bucle continuará siempre y cuando esta condición sea verdadera. Queremos mantener el bucle para la longitud de los caracteres dentro de esta matriz. Podemos decir mientras i es menor que los caracteres longitud de punto, y coma al final. En tercer lugar, decimos cómo queremos aumentar el valor de i con cada bucle. Si decimos i++, esto aumentará el valor en uno cada vez. El primer bucle, i comienza en el valor de cero. Entonces después del segundo bucle seré uno el tercer bucle seré dos, y así sucesivamente. Entonces al igual que una función, podemos agregar el código que queremos correr entre las llaves. Este código se repite para cada bucle, o en nuestro caso, se repetirá para cada elemento dentro de la matriz. Si esto es confuso, vamos a la consola registrar el valor de i para ver qué está pasando. Consola log el valor de i, abierto al navegador. Abre nuestra consola. De acuerdo, tenemos cero, uno, dos y tres. Recuerda inicializamos i para ser cero. Este es el valor inicial. Después tenemos cuatro elementos dentro de la matriz. Aquí hay cuatro valores diferentes. Estos cuatro valores de cero a tres también deberían parecer familiares. Es lo mismo que lo que hicimos justo al inicio. Tenemos nuestros valores de cero a tres como nuestras posiciones de índice dentro de los corchetes. En lugar de tener estas cuatro líneas de código, simplemente podemos copiar una de estas líneas. En lugar del registro de la consola, ahora podemos añadirlo dentro de nuestro bucle for. Elimina estas cuatro líneas, no necesitamos esto. Vamos a estar usando esto con nuestro bucle ahora. Entonces el valor codificado duro de cero ahora puede ser reemplazado por el valor de i, que como sabemos, es cero, uno, dos y tres y así sucesivamente. Ahora si guardamos esto y luego recargamos, todavía tenemos los mismos cuatro nombres arriba en la pantalla aquí pero esta vez estamos usando el bucle for con mucho menos código. Esto es bueno porque esto se repetirá mientras tengamos elementos en la matriz. Por ejemplo, si fuéramos a ir y agregar algún valor nuevo aquí, así que eso debería decir, “Hola” dentro de ahí. Esto también se agregará al final de la matriz. Simplemente les quitaré estos por ahora. Dado que el contenedor de caracteres es una lista desordenada, que está justo aquí, podemos mejorar este bucle rodeando cada elemento dentro de las etiquetas de ítem de lista. Justo antes de los personajes. Vamos otra cadena de li el símbolo más. Entonces justo al final, cambia nuestra etiqueta de descanso para ser nuestro elemento de la lista de cierre. dar a eso un guardar, recargar, ahora vemos este es un ítem de lista porque tenemos las balas en el lado izquierdo. Si también hacemos clic derecho e inspeccionamos, Haga clic en el inspector y elija cualquiera de estos elementos de la lista. Ahora podemos ver en la pantalla tenemos nuestra lista desordenada y luego al lado dentro tenemos nuestros cuatro ítems de lista, igual que el HTML estándar. Si recuerdas de nuevo en el video de manipulación DOM, miramos el selector de consultas todo. Si volvemos a nuestros archivos de inicio. Si te desplazas hacia arriba hasta el número 10, que es manipulación DOM, abramos rápidamente la página de índice. Abajo en la parte inferior tuvimos consulta, seleccionar todo, donde seleccionamos nuestras dos imágenes por la posición de índice. Recuerda dijimos que podemos acceder a todas nuestras imágenes por este número de índice pero esto tampoco es ideal porque estamos repitiendo código. En lugar de duplicar código como este, estas son las cosas para las que sería útil un bucle for. Si cerramos esto y luego volvemos a nuestro archivo for loop starter, que está aquí abajo, he proporcionado dos imágenes diferentes dentro de esta carpeta. Podemos seguir adelante y sumar estos ahora. Cierra la barra lateral. Si vamos a nuestras listas desordenadas en la parte superior dentro del HTML, vamos a añadir una imagen. En primer lugar con la fuente de bugs bunny, que tiene la extensión dot PNG. Entonces nuestra segunda imagen, esta vez con la fuente de daffy duck.PNG. Cierra esto. Ahora tengo nuestras dos imágenes. Voy a seguir adelante y almacenar estas referencias dentro de una variable llamada imágenes. Abajo a nuestro guión. Bajemos a la derecha hasta el fondo y seleccionemos una variable llamada imágenes. Establece estos para que sean document.query, selecciona todos y luego toma todas las imágenes con la etiqueta IMG. Entonces podemos volver a usar el bucle, hacer lo que queramos con estas imágenes. Voy a agarrar el nombre de cada uno de estos archivos de imagen en la pantalla. Justo debajo de nuestra variable de imágenes. Vamos a crear un nuevo for-loop. Construye esto tal como lo hicimos antes. Entonces podemos sumar nuestros tres valores. En primer lugar, vamos a establecer nuestro inicializador, voy a ser igual a cero; vamos a ejecutar este bucle mientras yo es menor que las imágenes, que es nuestra variable aquí.length. Este será de dos elementos de largo porque tienes dos elementos de imagen diferentes en la pantalla. Esto correrá el doble del punto y coma al final. Entonces vamos a incrementar este en cada bucle. Ahora echemos un vistazo a las salidas con un registro de consola. El valor que queremos mostrar son las imágenes. Nuestras imágenes variables aquí, dentro de los corchetes, podemos agregar i. Esto accederá a la primera imagen en el primer bucle. Entonces en el segundo bucle accederemos a la segunda imagen porque seré igual a una. Primero echemos un vistazo a esto en el navegador. Dirígete a la consola. Ahí están nuestras dos imágenes por las que acabamos de vivir. Si quisieras agarrar el nombre de la fuente, podríamos usar el.getattribute. Entonces dentro de los corchetes, el atributo que queremos agarrar es la fuente. Ahora vuelve al navegador. Ahora obtenemos el nombre del atributo fuente para cada imagen. Nuevamente, si tuviera un montón de imágenes diferentes, loop sería realmente útil para algo como esto. Loops realmente nos pueden ahorrar mucho tiempo a la hora de realizar tareas repetitivas. Es así como funciona un bucle for. A continuación veremos el bucle while. 31. Bucle while: Dentro de nuestro bucle while inicia el archivo. Tenemos el mismo ejemplo que miramos en el último video con el for loop. Tenemos nuestras imágenes. Tenemos una lista desordenada, tenemos la matriz de un personaje y luego estamos empujando a nuestros personajes hacia este div vacío. Entonces tenemos nuestras dos imágenes justo debajo. Este for loop que miramos antes, seguirá funcionando siempre y cuando esta condición sea verdadera, que está justo aquí. Entonces mientras que los artículos de Larry dentro de la matriz, esto seguirá funcionando. A while loop, que vamos a ver ahora, hace un trabajo similar. Pero esta vez se ejecuta un bucle while, mientras que una condición se evalúa como verdadera. Podemos modificar esto para que sea un bucle salvaje cambiando la caída a ser mientras. También podemos quitar la primera y también la tercera declaración de los corchetes. Entonces quita estos datos y i plus, plus. Esto se debe a que un bucle salvaje solo recibe la condición dentro de aquí, y seguirá funcionando mientras esta condición es cierta. Todavía necesitamos inicializar el primer valor de i, y podemos hacer esto fuera del bucle. Entonces justo encima del bucle, digamos que var i es igual a cero. Por último, podemos incrementar i en cada bucle, justo en la parte inferior, seleccionar say i plus, plus, y darnos guardar. Entonces, para recapitular, este bucle comenzará en cero, lo que sugieres aquí. A continuación, agregará el primer elemento de matriz, que es esta primera línea aquí. Y luego después de que se haga, AC entonces incrementará i para ser uno. Esto también continuará ejecutándose hasta que el valor de i ya no sea menor que la longitud de la matriz. Entonces si hacemos eso, digamos que aún debemos tener nuestros cuatro nombres en la pantalla de nuestra matriz. Pero esta vez usando el bucle while. Tener el i plus, plus escribe al final es realmente importante. Si olvidamos aumentos en cada bucle, siempre seré menor que la longitud de la matriz, lo que significa que la condición siempre será verdadera y esto dará como resultado un bucle infinito. Esto hará que el navegador se aplaste. Entonces si tuviéramos que quitar esto y luego guardar, refrescar, podemos ver que el navegador está luchando para cargar. Todavía podemos ver el giro en la esquina y además tenemos la opción de dejar de cargar la página y el navegador se aplastará. No obstante, muchos navegadores modernos también detectarán que este es el caso y dejarán de funcionar después de un periodo de tiempo, que puedes ver aquí. Entonces ahora solo agreguemos este back end solos no más problemas, y luego recargar y nuestros artículos en bucle están de vuelta en la pantalla. Antes de terminar este video, echemos un vistazo a un ejemplo más. Entonces bajemos hasta el fondo y creemos más variables para algunos números. Digamos que x es igual a cinco e Y es igual a 10. Entonces crea nuestro bucle while, igual que lo hicimos antes y luego podemos crear nuestra condición. Entonces digamos si el valor de x es menor que y, entonces podemos ejecutar nuestro bucle. Entonces hagamos un console.log el valor de x, y luego creamos incremento x por uno cada vez. Entonces si bien el valor de x es menor que y, podemos enviarlo a la consola y luego incrementarlo en una cada vez. Entonces guarde esto en la consola. Refresca y ahí vamos. Eso son valores de cinco derecho a nueve. Si quisiéramos que esto llegara hasta 10, al igual que el valor de yPodríamos establecer que esto sea menor o igual a y esto ahora subirá a 10. Entonces así es como usamos un loop while en JavaScript, y en el siguiente video vamos a pasar a mirar objetos JavaScript. 32. Objetos: Bienvenidos de vuelta chicos. Ahora vamos a ver los objetos JavaScript. Los objetos son la colección de propiedades que tienen un nombre y un par de valor. Por ejemplo, al igual que en la vida real, una computadora es un objeto. Una computadora puede tener muchas propiedades por ejemplo, un nombre de propiedad del fabricante, y un valor de Apple, un nombre de propiedad del tamaño del monitor y un valor de 22 pulgadas, o pegarse con nuestros personajes de antes, un personaje podría ser también un objeto, con un nombre de propiedad de nombre, y un valor de Mickey, o un nombre de propiedad de color, y el valor de rojo. Todos estos son solo nombres y valores que están mucho juntos los cuales construyen un objeto. Vamos a crear un objeto sobre en el objeto inicia un archivo, que es sólo una etiqueta de script vacía. En primer lugar, definimos nuevos objetos con la nueva palabra clave, lo que los nuevos objetos, seguidos de los corchetes, y el punto y coma. Podemos entonces asignar este nuevo objeto a una variable y vamos a establecer esto en el nombre del carácter. Si ahora pasamos a la consola, así que haga clic derecho e inspeccione, abra esto, y luego podemos hacer un registro de consola con el valor de carácter, guarde eso y luego recargue. Vemos un conjunto de tirantes rizados. Este es solo un objeto vacío porque aún no hemos agregado ninguna propiedad. Si volvemos a nuestro proyecto, ahora podemos sumar estos en. Podemos hacer esto seleccionando a nuestro personaje y luego digamos dot primer nombre y pongamos esto igual a Bugs. Entonces podemos decir carácter punto apellido igual a Bunny, luego carácter, y digamos que teníamos una imagen, así que punto imagen igual a una cadena de bugs-bunny dot png. Haremos uno más, diremos El color del punto del personaje es igual a crecido, así que aquí hemos dado a los objetos del personaje , las propiedades de nombre, apellido, imagen y color y luego estamos asignando estos valores en el lado derecho. Si guardamos eso y luego volvemos a la consola, veamos qué efecto tiene esto. Ahora vemos algún contenido dentro de nuestras llaves rizadas, por lo que nuestro objeto ahora tiene algunas propiedades. Podemos decir nuestro nombre de pila de Bugs, nuestro apellido de Bunny y así sucesivamente. Estos son pares de valor de nombre, por lo que el nombre de Bugs es un par de valor de nombre, el apellido de Bunny es un par de valor de nombre también. Podemos acceder a cualquiera de estas propiedades directamente con el nombre, así como este. Pasemos a nuestro registro de consola y justo debajo de él podemos agregar un segundo registro de consola. Si quisiéramos acceder a nuestro color de caracteres, podríamos seleccionar el carácter completo y luego decir color de punto, refrescar esto y ahí está nuestro valor de, que es esta propiedad justo aquí. Acceder a nuestros valores al igual que esto con el punto se llama la notación de puntos. También hay una segunda forma de acceder a estas propiedades, esta es la notación entre corchetes. Esta vez en lugar de acceder a las propiedades con los puntos, podemos hacer un registro de consola y en su lugar usar estas llaves cuadradas. Seleccionemos los objetos de carácter, los corchetes y luego podremos acceder a nuestro color, punto y coma al final, refrescar y ahí están nuestros dos valores de gris. Primero con la notación de puntos y luego segundo con los corchetes. Otra forma de crear un objeto se llama objeto literal y en lugar de declarar un objeto vacío, que agregamos justo aquí y luego le agregamos propiedades con estas cuatro líneas, podemos hacerlo todo a la vez. Comentemos este primer método aquí y luego justo debajo de esto. Podemos crear nuestro objeto y almacenarlo dentro disponible. Digamos carácter var y establecer esto a todos los objetos, en lugar de tener un objeto vacío, ahora podemos asignar nuestros pares de valores de nombre, así que digamos nuestro nombre, los dos puntos. Nuestro nombre de pila es Bugs, separados por una coma, podemos agregar nuestro segundo de apellido, y este es Bunny. Nuevamente nuestra imagen, así Bugs-Bunny dot png y finalmente el color. Estos valores anteriores que hemos mirado, son sólo cadenas simples. Estos también pueden ser cualquier tipo de datos que ya hemos cubierto, como una matriz. Podemos agregar múltiples valores para el color, así que digamos que tenemos un valor de color de gris y luego separados por coma, también blanco. Si guardamos esto y de hecho eliminaremos estos registros de consola, solo dejando a nuestro personaje. Pasando a la consola, están nuestros pares nombre-valor, igual que antes, pero esta vez nuestro color es un Array con dos valores separados. Si hace clic en esta flecha aquí, entonces podemos abrir esto para arriba y luego expandir el color. El índice de posición de cero es gris y el índice de uno es blanco. Incluso podemos agregar funciones a nuestros objetos, así que justo después del color, podemos agregar una coma y luego establecer una función que creará una cadena que concatena nuestro nombre y apellido. Digamos que nuestro nombre completo es igual a una función y luego creamos una función igual que hemos visto anteriormente. Dentro del cuerpo de la función, podemos hacer una Alerta y dentro de la alerta, vamos a crear cadena diciendo que mi nombre completo es, un espacio y luego podemos agregar nuestras propiedades. Digamos este nombre de punto, luego agregue una cadena vacía para el espacio y luego al final diremos este apellido de punto, coma al final. Aquí hay un par de cosas a tener en cuenta, en primer lugar, cuando agregamos una función como propiedad de un objeto, esto se llama Método y también hemos usado esta palabra clave para acceder a nuestras propiedades. Cuando se llama a una función como método de un objeto, el valor de éste se establece en estos objetos actuales. Por lo tanto podemos acceder a cualquiera de estas propiedades en este objeto mediante el uso de este punto y luego el nombre de nuestra propiedad. Si le das a esto un guardado y pasas al navegador, puedes ver nuestro método de nombre completo está aquí más si realmente quieres ejecutar este método y mostrar la alerta, necesitamos ejecutarlo dentro de los paréntesis. Volver a nuestro registro de consola y decir carácter punto nombre completo, el paréntesis justo después y ahora si guardamos y luego llamamos a esto, ahora veremos nuestro método correr y la alerta está en el navegador y la cadena de Mi nombre completo es Bugs-Bunny, se cierra. Esto ahora es para nuestra primera mirada a los objetos, son realmente útiles para agrupar información sobre casi cualquier tipo de artículo. A continuación, nos quedaremos con el tema de Objetos y veremos cómo podemos recorrer por ellos. 33. Bucle a través de los objetos: Al igual que cuando estábamos trabajando con matrices, si tienes muchas propiedades en un objeto, posible que deseemos recorrerlas. Esto es más eficiente y menos código que seleccionar cada propiedad por separado. Dentro de nuestro archivo de inicio, que está buceando a través de objetos, tenemos un objeto de carácter justo aquí, que puedes recorrer. Voy a crear una variable vacía para empezar, la tienda los resultados. Digamos que Var resultados y satisfacerme una cadena vacía. Esto va a almacenar los resultados de cada propiedad de objeto que recorrerá como una cadena. El bucle que estamos acostumbrados a recorrer el objeto se llama el for in loop y se ve así. Empezamos con un estándar buscando bucle al igual que antes. Después nos vamos a las instalaciones y ponemos nuestra variable de i, pero esta vez decimos en carácter. Carácter es el nombre de nuestro objeto que está aquí. Ahora dentro del cuerpo de bucle podemos hacer algunos logs de consola. Empecemos con un console.log por el valor de i y veamos qué obtenemos. Abramos esto dentro de la consola. Haga clic derecho inspeccionar y ahora podemos ver obtenemos los valores de FirstName, LastName, imagen en color. Esto se debe a que el valor de i es la clave. Estos son básicamente los valores del lado izquierdo de nuestras propiedades. Si quisiéramos acceder a los valores del lado derecho de nuestras propiedades, podríamos entonces hacer un segundo registro de consola. Esta vez en lugar de i, hacemos el carácter (i); punto y coma al final, refrescar. Podemos ver que cada par está ahora en la pantalla. Nombre de los bugs, apellido de conejito. Si quisiéramos verlos mejor, podríamos hacer un tercer registro de consola y simplemente agregar algo para separar estos valores, como algunos guiones y ahí vamos. Ahí están nuestras propiedades. Está bien. Bien, por lo que ahora tenemos acceso a todas estas propiedades y también a los nombres y valores de forma individual. Ahora podemos seguir adelante y construir nuestros resultados y crea una cadena para mostrar en la pantalla. Bajemos a nuestro bucle for y debajo de estos registros de consola. Es construir nuestra cuerda. Podemos acceder a estas variable de resultado agregar esto con plus igual. En primer lugar, vamos a establecer el valor de i, que es nuestros nombres de propiedad como FirstName y LastName, agreguemos hoy una cadena con dos puntos en el medio y el espacio. Entonces justo después de esto, podemos agregar nuestro nombre de propiedad como bugs y bunny. Al igual que estamos viendo con este log de consola aquí. Añadamos el carácter i y luego añadamos estos a su propia línea separada con una etiqueta de ruptura. Hemos creado un resultado que es una cadena de todas nuestras propiedades de caracteres con los nombres y valores. Ahora podemos abrir esto el navegador dentro de un div vacío. Subamos a la sección de cuerpo, creamos un div y agregamos id de salidas va a ser la ubicación donde estemos salidas, nuestra cadena de resultados y luego bajamos a la parte inferior fuera del bucle for. Hagamos un document.getElementById, queremos agarrar las salidas, que es nuestro div vacío y luego establecer el innerHTML para que sea igual a nuestra variable de resultado. Si guardamos esto y luego pasamos a nuestro navegador, recargar, ahora vemos la cadena que hemos creado con el valor de nombre de propiedad seguido de una etiqueta de ruptura. Esta es una cadena que creamos justo aquí. Esto se repite para cada elemento dentro de nuestros objetos porque hemos agregado esto a un for in loop. Es así como podemos recorrer los objetos y es realmente conveniente, sobre todo cuando los objetos se vuelven realmente grandes. En el siguiente video, vamos a seguir mirando los objetos y cómo construirlos usando la función constructor. 34. Función constructora de objetos: Ya hemos mirado algunas formas de crear objetos. Estos están bien si solo queremos crear un solo objeto, como lo hemos hecho anteriormente. No obstante, si queremos crear múltiples objetos con las mismas propiedades, hay otra forma de usar un constructor, en lugar de construir un objeto y agregar nombres y valores, podemos usar la función constructor para básicamente crear un , o una plantilla para cada objeto. Esto nos permitirá entonces crear múltiples objetos utilizando la misma estructura. Por ejemplo, si tuviera múltiples caracteres que normalmente contendrían las mismas propiedades, como un nombre y un color. Vamos a darle a esto un repaso, e iniciaré un archivo para la función constructor de objetos. Abajo en nuestros scripts, la función constructor se crea igual que una función normal que miramos. Utilizamos la palabra clave function y luego establecemos un nombre, como carácter. Las funciones constructoras suelen tener una primera letra mayúscula, igual que vemos aquí. Por lo que podemos distinguirlos de las funciones regulares. Volveremos a esto en tan solo un momento. Pero primero podemos crear un nuevo objeto basado en esta función constructor mediante el uso de la nueva palabra clave. Justo debajo de esto, usemos la nueva palabra clave, decimos, nuevo personaje. Este personaje aquí, debe coincidir con el nombre de nuestra función justo arriba. Entonces dentro de los corchetes podemos agregar algunos valores que queremos usar en objetos. Entonces el primer nombre, digamos Mickey, separado por una coma, un segundo valor de Mouse, para el segundo nombre. Podemos entonces añadir una matriz de colores. Mickey Mouse, podemos usar rojo, también podemos decir amarillo, y también negro también. Haz esto un poco más pequeño. Justo después de la matriz, podemos agregar una coma, y luego podemos agregar un nombre para nuestra imagen. Digamos mickey-mouse.png, y luego agregue un punto y coma al final. Ahora hemos creado este nuevo personaje. Ahora podemos asignarlo a una variable llamada mickey. Genial. Hemos construido un nuevo personaje, hemos pasado en algunos valores dentro de los paréntesis, pero ¿cómo los pasan? La respuesta es la misma que una función regular. Podemos pasarlos como argumentos. Dentro del constructor, podemos decir primero, último, color, e imagen, que está en el mismo orden que usted creó aquí abajo. Aquí abajo tenemos nuestros valores para el nombre, apellido, color, e imagen. Pero estos aún no están vinculados a nuestros nombres anteriores. Podemos hacer esto dentro del cuerpo de la función. En primer lugar, digamos que este nombre de punto es igual primero. Esto puede parecer un poco extraño al principio, pero lo que estamos haciendo para el primer valor es que estamos pasando una cadena de Mickey, que se almacena en esta primera variable. Después se pondrá en el nombre de pila para ser Mickey. También en JavaScript, esta palabra clave puede ser un poco complicada de entender. Cuando se utiliza de esta manera, la palabra clave de esto se refiere a estos objetos. Podemos ver esto haciendo un console.log e ingresando el valor de esto, luego ir a nuestra consola. Podemos ver que esta palabra clave se refiere a nuestro personaje con el nombre de Mickey. Aquí también podemos ver nuestra propiedad con el nombre value pass, que ya hemos agregado. No obstante, si seguimos adelante y movemos nuestro console.log para estar fuera del objeto actual, así como esto. Ahora volvemos a nuestro navegador. Ahora vemos que no nos devuelven nuestro objeto, en cambio, que esta palabra clave ahora se refiere a los objetos de ventana. Este objeto de ventana representa la ventana del navegador. Cualquier función, objetos y variables globales que crearán, se convertirán entonces en partes de esta ventana. Si seguimos adelante y despejamos la consola y tecleamos en ventana, pulsamos “Enter”, ahora nos devuelven nuestra ventana, y si abrimos esto, también podemos ver las propiedades en esta ventana objetos. En el interior de aquí podemos ver nuestra función de carácter, que está justo aquí. Recuerda también, creamos una variable llamada Mickey. Esto también se paralizará en el objeto global. Si nos desplazamos hacia abajo, aquí está nuestra variable de Mickey. Dentro de la consola puede tener acceso a cualquiera de estos por su nombre. Digamos window.mickey. Golpea “Enter”, y ahí está nuestro personaje con el nombre de Mickey. También tenemos acceso a muchas más propiedades del navegador, como window.innerWidch. Golpea “Enter”. Podemos ver en píxeles el ancho interior del navegador. Ahora volvamos a nuestro constructor. En primer lugar podemos eliminar este console.log, y luego podemos agregar el resto de los nombres de nuestras propiedades. En segundo lugar, tenemos esto.Apellido, y esto es igual a durar. Este color oscuro es igual al color. Entonces finalmente tenemos esto.imagen es igual a imagen. Ahora veamos cómo luce Mickey dentro del navegador, con un console.log. Eso es con console.log con el valor de nuestra variable, que es Mickey, refrescar. Ahí están nuestros objetos de carácter, con nuestro nombre de Mickey, apellido de Mouse. Tenemos una matriz de colores con valores libres diferentes, y luego nuestra imagen al final, porque Mickey ahora tiene todos los nombres y valores agregados al objeto. Estas propiedades también se pueden acceder de forma individual. Por ejemplo, si quisiéramos seleccionar el primer color, podríamos decir mickey.color, y luego acceder a la posición de índice de 0. Refresca, y ahí está nuestro primer valor en el array de rojo. Ahora bien, estos planos o este constructor que tenemos aquí, ahora se configura. Podemos seguir adelante y crear múltiples objetos basados en estas plantillas, igual que hicimos con Mickey. Justo debajo de Mickey aquí, podemos crear una nueva variable, y esta vez podemos llamarla despreciada. Este también es un nuevo objeto de carácter. Entonces por dentro podemos pasar en nuestros valores, el nombre de Daffy, el segundo nombre de Duck, y luego nuestra gama de colores. Ahora pongamos aquí los colores dentro para que sean negros, y luego naranjas. Una coma justo después de nuestra matriz. Esto va a ser para nuestra imagen, que es daffy-duck.png, un punto y coma en los extremos. Entonces hagamos uno más, así que digamos que variable de bugs es igual a un nuevo personaje, a nuestros valores. El primero es cadena de Bugs, el apellido de Bunny. Nuestro array con nuestros colores de gris, y también blanco. Una coma de nuevo, justo después de la matriz, y la imagen final de bugs-bunny.png. Vamos a alejar el zoom y echar un vistazo a todo esto. Todo eso se ve bien. Ahora si nosotros console.log alguno de estos valores extra, por lo que console.log. Entonces podemos hacer algo como los bugs, que es nuestro tercer objeto justo aquí. Orientar el apellido, que debería dar salida a la consola el valor de Bunny, guardar y refrescar, y ahí vamos. Ahí está Bunny dentro de la consola. Bueno, todo esto parece que está funcionando bien, y esta es la función constructor de objetos, que es una forma realmente útil de crear múltiples objetos con la misma estructura. 35. Const y let: Bienvenido de nuevo a esta nueva sección. Estaremos reforzando lo que ya has aprendido junto con aprender algunas cosas nuevas como const y let, literales de plantilla, establecer intervalos, y expresiones regulares. Ahora vamos a poner en práctica nuestras habilidades construyendo un juego telefónico. Ya he agregado el HTML y CSS al archivo de inicio, por lo que podemos enfocarnos en conseguir que este juego funcione usando JavaScript. En este juego, todo lo que tenemos que hacer es hacer clic en el botón “Match” cuando dos formas aleatorias son del mismo tamaño y color. Esta es la versión terminada frente a nosotros aquí. Todo lo que necesitamos hacer es hacer clic en el botón “Jugar”, y esto activará una matriz de objetos que se seleccionan aleatoriamente. En este juego, todo lo que necesitamos hacer es hacer clic en el botón “Match” cuando las dos formas aleatorias son del mismo tamaño y color. A pesar de que parece simple, hay un gran pasando detrás de bambalinas, y vamos a conseguir mucha práctica con lo que ya has aprendido, junto con algunas cosas nuevas también. Daremos click en el botón “Match” cuando dos sean iguales, luego obtenemos una puntuación. Si la forma es diferente, entonces obtenemos un punto despegado y el resultado puede ir negativo. Pasemos a nuestros archivos de inicio JavaScript, y el código para esto está en el número 31, que es el juego de emparejador de formas. Aquí tengo el índice del archivo script.js ya abierto. Voy a copiar la página de índice, copiar la ruta del archivo, y luego pegar esto en el navegador para ponerlo en marcha. Ya tenemos todo el diseño y el estilo, por lo que todo lo que necesitamos hacer es trabajar en el archivo script.js. Pasemos a esto ahora, abran el script.js. Hagamos un poco más de espacio dentro del editor de texto. Dentro de aquí, voy a empezar por crear nuestras formas junto con algunas variables en las que almacenarlas. Sin embargo, esta vez nos vamos a centrar en dos cosas nuevas. No vamos a estar usando una variable usando la palabra clave var. De hecho, probablemente no los usaremos de nuevo para el resto de este curso. No porque haya algo malo con las variables. Siguen perfectamente válidos para usar. No obstante, en ES6, que ya hemos mencionado, también se conoce como ES 2015, también tenemos dos nuevas palabras clave que podríamos usar en lugar de var para iniciar todas las variables. Primero se deja, lo que nos permite declarar también una variable. Necesitamos algunas variables a este juego. Vamos a seguir adelante y crear un let marcador actual. Podemos establecer que esto sea un valor inicial de cero. Al igual que var, el valor almacenado usando let se puede actualizar, también llamado reasignado. Hay un diferente con let y var. Deje que los valores sean objeto de bloque. El alcance del bloque se aplica a cosas como funciones o declaraciones. Básicamente cualquier cosa entre un conjunto de llaves. Si recuerdas volver a cuando miramos el alcance, aprendimos que las variables declaradas dentro de una función están recogidas a esa función, lo que significa que no podemos acceder a ellas en otro lugar de nuestro código. También las variables declaradas fuera de una función se denominan globales. Tenemos acceso a ellos en cualquier lugar dentro de nuestro código. Deje que los valores por otro lado, se alcanzan no sólo al bloque donde se crearon, sino también en cualquier otro lugar se utilizan. Podemos ver esto mejor con un ejemplo simple usando nuestra variable de puntuación actual. Si agregamos esto a una sentencia if, entonces vamos a crear una sentencia if de la que ya hemos aprendido, y entonces podemos decir si la puntuación actual es menor a cinco, dentro de aquí podemos decir un console.log, y log es el valor del puntaje actual. Entonces una cuerda, y esto puede decir dentro. Una vez que estamos en la consola sabemos de dónde viene su mensaje. Entonces hagamos un segundo registro de consola fuera de esta sentencia if. Haremos lo mismo, agregaremos la puntuación actual a una cadena. Pero esta vez, diremos afuera. Ahora si pasamos al navegador, abrimos la consola, clic en la pestaña “Consola”, refrescamos, y ahora podemos ver cero y cero. Esto se aplica tanto al interior como al exterior. Este es un comportamiento esperado. Declaramos que nuestro valor let es cero, luego lo logramos dentro y fuera del bloque if. Vamos a seguir adelante y declarar la misma variable, pero esta vez dentro de las declaraciones if. Hagamos lo mismo. Diremos que el puntaje actual esta vez sea igual a un valor de 10. Ahora vayamos al navegador y actualicemos, ahora veremos el efecto del alcance de bloques. Puntuación actual dentro del bloque es un valor de 10. Pero el puntaje actual fuera del bloque está intacto. Si estas son ambas variables, cambiemos let al var en ambos casos. Ahora veríamos que ambos valores serían 10. Porque esta variable se declara fuera de estas llaves rizadas, lo que significa que tiene alcance global. Para la mayoría de los casos, podemos usar la palabra clave let más nueva, ahora para declarar variables y esto es lo que estaremos usando para el resto de este curso. Selecciona “Eliminar”, todo este ejemplo, y luego cambia esta var para que se deje. También necesitamos algunas variables más a este proyecto. Vamos a seguir adelante y añadirlos ahora usando nuestra palabra clave let. Vamos a crear una variable llamada let play. Esto se va a establecer inicialmente en falso. Esto se convertirá en verdadero cuando el usuario haga clic en el botón “Reproducir”. Entonces vamos a crear dos más, uno para la forma 1 y luego también uno para la forma 2, forma 1 y la forma 2 están actualmente sin asignar, porque necesitamos agregar un valor aleatorio a estos más adelante cuando el usuario comience a jugar. Junto con la palabra clave let ES6 también introdujo la palabra clave const, que es abreviatura de constante o variables que declaramos usando var y let se puede cambiar o reasignar. No obstante, si sabemos que nuestro valor siempre va a seguir siendo el mismo, podemos declarar una constante en su lugar. Esto también tendrá el beneficio de que el valor no se actualice accidentalmente en otro lugar de nuestro código. Si declaramos una const e intentamos actualizar un valor, obtendremos un error. Vamos a establecer un número para que sea igual a 10. Entonces digamos número más más. Ahora estamos aumentando el valor de 10, pesar de que está almacenado dentro de una constante. Veamos qué sucede dentro de la consola. Si intentamos registrar el valor del número, recargar y estamos obteniendo error porque estamos tratando de actualizar el valor de una constante. Quitémoslos por ahora. Una constante será útil para declarar las formas que queremos utilizar en este proyecto. Queremos seleccionar las formas, pero no necesitamos cambiarlas. Cada forma va a ser un objeto. Por lo que podemos agregar estos en como una matriz de objetos. Vamos a configurar nuestras constantes llamadas formas, y esto va a ser una matriz. Dentro de esta matriz, podemos crear nuestro objeto. Tenemos que seguir adelante y crear bastantes de estos, así que tenemos algunas formas aleatorias que seleccionar. Vamos a establecer la propiedad de color y estos pueden ser cualquier color de tu elección. Yo quiero ir por el valor para el primero de FF595E, luego el ancho de 250, y la altura. Vayamos por 160, luego agregamos una coma. Sigamos adelante y copiemos esto y peguemos esto en nueve veces más, dándonos 10 objetos diferentes. Vamos a mantener los dos primeros como el mismo color, pero cambiar el ancho y la altura para ser ligeramente diferentes, lo que 150 para este, este tercero, esto va a tener un valor de FFCA3A, ancho de 320, la altura cambiemos esto para ser 170. El cuarto puede tener el mismo color, ancho de, vamos por 310, la altura de 180. Número 5, esto va a tener un color de 8AC926. El ancho de 190, la altura de 160 está bien. Copiemos este color, y crearemos dos de cada color. El ancho esta vez, vamos por 200 y luego 175. De nuevo, todo esto es aleatorio, así que no te preocupes si el tuyo es ligeramente diferente. Al siguiente aquí el color puede ser 1982C4, el ancho de 380, altura deja ir para 185. Copia este color, por lo que estos dos son iguales, luego una altura de 400. El ancho para 400 y una altura de 120. Entonces el último par, vamos por 6A4C93, 370 y la altura de 145, copiar este color y hacer que el último sea igual para que sea un emparejado de nuevo. Un ancho para 440 y la altura de 160 está bien. Cuando el usuario haga clic en “Play”, vamos a mirar a través de estos objetos, seleccionar uno aleatorio. Si el equipo selecciona el mismo aleatorio para la forma 1 y la forma 2, estos se considerarían entonces una coincidencia. Por último, podemos hacer un registro de consola rápido de estos objetos seleccionándolos con el número de índice de la matriz. Justo debajo de nuestra matriz, haz un registro de consola y el valor de las formas. Vayamos por el número 2. Echa un vistazo a esto en la consola, y hay uno de nuestros objetos con el color, el ancho, y la altura. En este video, nos hemos concentrado en usar la const y dejar palabras clave palabras clave. Si no estás seguro de cuándo usar const y let, siempre debes usar const donde sea posible, y luego usar let si necesitas reasignar un valor. Si cometes un error y usas const cuando se debe dejar, está completamente bien. La consola te alertará para cambiarla. Con nuestras formas ya listas, en el siguiente video, veremos cómo seleccionar aleatoriamente de esta matriz de objetos. 36. Generación de una forma aleatoria: En el último video, agregamos una matriz de objetos de forma. Ahora necesitamos una forma de seleccionar aleatoriamente una de estas formas de nuestra matriz. Voy a agregar esto a una función llamada seleccionar forma aleatoria. De vuelta a nuestro script, ahora podemos quitar el registro de la consola del último video y luego el establecer una constante bahía para nuestra función llamada SelectrandomShape. Esta va a ser una función de matriz ES6. Configura esto así como esto. Bueno, ahora podemos seleccionar cualquiera de estos elementos de matriz justo arriba por el número de índice. Vamos a darle una oportunidad a esto. Vamos a configurar una constante llamada RandomShape y establecer esto igual a nuestra matriz de formas y seleccionar uno de los números de índice. Hacer un registro de consola. Compruebe si esto funciona bien con el valor de una forma aleatoria. De hecho, llamaremos a esto RandomSelection, solo para ser un poco más claro. Consola log esto. Entonces para que esto funcione, necesitamos llamarlo por su nombre. Entonces selectrandomShape, los paréntesis. Ahora esto debería correr dentro de la consola. Ábrelo, recarga. Tenemos un error ortográfico, así que esto debería ser formas. Refrescar. Ahora estamos seleccionando uno de nuestros objetos. En lugar de codificar duro en un número, queremos que se seleccionen al azar. Para ello, podemos generar un número aleatorio, como hemos visto anteriormente. Si pasamos a nuestro código, esta matriz tiene 10 objetos. Las matrices también comienzan en cero, por lo que necesitamos generar un número aleatorio entre cero y nueve. Empecemos esto de lado de nuestra función. Almacenemos esto en una constante. Llamaré a esto RandomNum. Ya sabemos hacer esto con Math.Random. Recuerda, esto creará un número aleatorio entre cero y uno. Se incluyó cero pero uno en realidad no lo es, por lo que sólo irá a 0.999. Verás locales después de esto. Para crear este número aleatorio entre cero y nueve, lo primero que tenemos que hacer es multiplicar este número aleatorio por la longitud de nuestra matriz de formas. Entonces forma.longitud. Entonces podemos redondear este número a la baja con Math.Floor. Justo en un inicio usa Math.Floor y luego abre los corchetes, y luego podemos cerrar esto justo al final de las formas.length, punto y coma al final. Solo sopla esto, hagamos un segundo registro de consola y luego podremos generar el valor de nuestro número aleatorio. Tan solo checa esto está funcionando bien, como al mismo. Refrescar. Dice 0, 7, 6, 2, y así 8, hay un 9. Todo esto parece funcionar bien, no obtenemos nada más alto que nueve y también tendremos cero. Esto parece estar funcionando completamente bien. Ahora lo tenemos, este número aleatorio entre cero y nueve. Podemos reemplazar el número codificado de antes para nuestra matriz. En lugar de seleccionar el número 1, vamos a seleccionar nuestro número aleatorio. Quita el registro de la consola de ambos dos, ya no necesitamos esto. Dale a eso un “Guardar” y luego a la consola. Ahora si seguimos refrescando, deberíamos ver un objeto diferente de nuestra matriz cada vez. Genial, así que solo para terminar este video apagado, voy a cambiar este registro de consola. No necesitamos iniciar sesión en la consola, y en su lugar, sólo tiene que devolver este RandomSelection. Esto devolverá el valor para que podamos usarlo más adelante. Bien. Esta es una parte importante de este proyecto, cuidando. A continuación, vamos a utilizar estos objetos aleatorios y asignarlo a nuestras variables de forma 1 y forma 2, y también repetimos este proceso cada segundo para seguir mostrando diferentes formas para comparar. 37. Repetición con setInterval: En el último video, creamos una función que seleccionó aleatoriamente una de las formas dentro de nuestra matriz, que está justo aquí. En este video, tenemos dos objetivos principales. Queremos asignar estas formas aleatorias a nuestras variables de forma 1 y forma 2. Además, necesitamos cambiar los valores de forma cada segundo para actualizarlos en la pantalla. Sabemos que esta función de forma aleatoria selecta hacia abajo en la parte inferior está resultando en una forma aleatoria. Para que podamos seguir adelante y asignar esto a nuestras variables. En primer lugar, digamos que la forma 1 es igual para seleccionar forma aleatoria. Lo mismo para la forma 2 esto también se puede seleccionar forma aleatoria 2. Ahora necesitamos ejecutar esta función de forma aleatoria selecta cada segundo y actualizar estas variables aquí. Para ello, podemos usar un método JavaScript llamado setIntervalo. Esto ejecutará esta función o repetirá el mismo código con un retardo de tiempo entre cada repetición. Entonces vamos a envolver a estos dos aquí dentro de nuestro método de intervalo establecido. Entonces primero recortemos estas dos líneas aquí. Entonces dentro de un intervalo establecido, creamos los paréntesis. Entonces dentro de aquí, podemos ejecutar una función de flecha ES6. Entonces vamos a crear esto dentro de aquí, las llaves, y luego podemos pegar en nuestras dos reasignaciones. El punto y coma al final aquí, y luego podemos sumar el retardo de tiempo fuera de estas llaves en milisegundos. Por lo que 1,000 es igual a un segundo. Por lo que ahora esta función se ejecutará cada segundo, dándonos diferentes valores para la forma 1 y en forma 2 cada vez que se ejecutará este intervalo. En primer lugar, vamos a comprobar que esto está funcionando registrando los valores de la forma 1 y la forma 2. Entonces registro de consola, forma 1, y luego un segundo registro de consola, esta vez para la forma 2 sobre el navegador. Recargar. Bien. Por lo que seguimos viendo dos nuevos objetos apareciendo en la consola y parecen tener valores diferentes. Entonces esto funciona muy bien, pero no queremos que este código se ejecute hasta que el jugador golpee es jugable en la parte superior. Por lo que primero podemos rodear este temporizador dentro de una función. Entonces justo debajo del intervalo establecido, vamos a crear nuestra constante, que va a ser una función de flecha, y llamemos a esta repetición forma aleatoria. De nuevo, va a ser una función de flecha. Entonces vamos a configurar esto así como esto. Por lo que dentro del cuerpo de esta función, vamos a sumar nuestro intervalo de set. Entonces recortemos la sección que creamos antes, y luego peguemos esto dentro de nuestra función. Por lo que ahora este intervalo establecido solo se ejecutará cada vez que una llamada repita forma aleatoria, y queremos hacerlo cuando un jugador haga clic en el botón Play. Por lo tanto, agreguemos un manejador de clics a nuestro botón de reproducción. Si pasamos a nuestra página de índice y luego nos desplazamos hacia abajo hasta la sección principal, aquí está nuestro botón de juego aquí, que tiene una identificación de juego. Por lo que podemos seleccionar esto con get element by id add a click handler para ejecutar nuestra función de forma aleatoria de repetición. Abajo de esto, vamos a añadir un comentario de inicio juego. Primero seleccionemos nuestro botón con get elements by id El id fue play.onclick. Esto va a ejecutar una función de flecha ES6. Entonces dentro de aquí podemos llamar a repetir forma aleatoria, con los paréntesis después. Por lo que esto va a seguir adelante y correr, guardar esto y luego pasar a la consola, recargar. No vemos nada corriendo todavía. Ahora si hacemos clic en el botón de reproducción, ahora vemos que nuestros objetos ahora lo están generando. Ahora las cosas buenas se están moviendo bien para nuestro juego. No obstante, queremos mover las formas hacia fuera a la consola y mostrarlas en la pantalla, y esto es lo que haremos en el siguiente video. 38. Literales de plantilla: Bienvenido de nuevo. Ahora hay alguna funcionalidad básica en nuestro juego. Generamos dos formas aleatorias cuando hacemos clic en este botón Play en la parte superior. Por el momento aunque estas formas están justo dentro de la consola. Pero en este video, en realidad estaremos mostrando estas formas en la pantalla para que el jugador lo compare. Vamos a hacer estar haciendo esta pila también aprendiendo sobre cómo usar literales de plantilla. Esto básicamente nos permitirá crear una cadena de texto que las variables pasaban dentro. Ya hemos mirado algunas formas de incluir variables con cadenas. Pasemos a nuestros guiones. Ya hemos mirado métodos como este. Si ha creado una variable como name y establece este para que sea el valor de Chris, entonces haga un registro de consola. Dentro de aquí, hemos añadido cadenas a variables, digamos “Hola”, un espacio, y después añadimos nuestro nombre. A la consola y ahora esperaremos el valor de Hola Chris. Usando literales de plantilla en lugar de unir estas cadenas y variables con el símbolo más, podemos construir una sola cadena mediante el uso de backticks. Quitemos todo esto de aquí, y luego si buscas el retrotick en tu teclado, que es este símbolo justo aquí, entonces podemos teclear el valor de Hola dentro. Entonces en lugar de unirnos en nuestro nombre de variable, podemos agregar esta variable dentro de los backticks. Puede pasar en nuestra expresión de variable primero usando un símbolo $, y luego dentro de las llaves, podemos agregar nuestro nombre de variable, que simplemente se ve así. Si guardamos esto y pasamos a la consola, vemos que el mismo valor ahora está funcionando en el navegador. Otra cosa que podemos hacer con los literales de plantilla es tener texto multilínea. Si queríamos una cuerda bastante larga así, y luego continuar esto hacia abajo en la segunda línea. Al instante vemos con estos dos colores diferentes aquí que nuestro editor de texto está destacando un error. Para hacer esto de la manera tradicional, necesitaríamos envolver cada línea dentro de las comillas, agregar un salto de línea y luego unirlo de nuevo junto con el símbolo más. No obstante al usar estos literales de plantilla más nuevos, podemos simplemente reemplazar las cotizaciones por backticks, como esta cita de aquí, agregar un retrotick, también en los inicios. Ahora todo esto es del mismo color, por lo que ahora parece estar funcionando, ya no tenemos el error. Encima a la consola y ahí está nuestra cadena multilínea que preserva los saltos de línea. Ahora podemos quitar este ejemplo de antes. Genial ahora sabemos usar estos literales de plantilla. Podemos ponerlos en práctica dentro de nuestros proyectos. A nuestra función, que es la forma aleatoria repetida, primero, podemos eliminar estos dos registros de consola porque queremos dar salida a estos a la pantalla. Entonces podemos crear una cadena para contener nuestros estilos. El estilo que queremos contener son estas secciones de los objetos. Queremos el color, queremos el ancho, y también las alturas, y los vamos a establecer como propiedades de estilo de nuestras formas. Volvamos a nuestra función, sigamos adelante y hagamos esto ahora. Dentro de nuestro intervalo de set, solo sopla nuestra forma 2 aquí. Voy a seguir adelante y crear una nueva constante. Empecemos con la forma puesta. Llamemos a esto shape1styles. Vamos a crear una plantilla literal, que básicamente va a ser una cadena con todos nuestros estilos contiene. Podemos entonces agregar los estilos a nuestras formas div, y luego esto se mostrará en la pantalla. Echemos un vistazo a esto con los backticks. En primer lugar vamos a establecer el ancho de nuestro div dentro de estos backticks, podemos agregar el símbolo $ y luego las llaves para agregar nuestra variable. La variable una vez establecida a este ancho, es el valor de un ancho de cada objeto. De vuelta hacia abajo, vamos a establecer esto sea shape1, que se almacena dentro de esta variable aquí. Shape1.width, y luego necesitamos agregar el valor de pixel al final. Agrega plus px, punto y coma después de esto, entonces queremos agregar esto en la siguiente línea para que quede más claro. El trasfondo esta vez. Añadamos esto a nuestro símbolo $, abrimos las llaves, y el fondo podría ser forma1.color, punto y coma al final. Entonces finalmente las alturas. Esto va a ser igual a nuestra variable dentro de aquí, y esto es shape1.height, y luego nuevamente necesitamos agregar también al final nuestro valor de píxel. Más px, punto y coma al final, y asegúrate de que estos backticks estén justo al final y justo al principio y no después de cada línea. Ahora tendremos estos estilos podemos aplicarlos a nuestras formas div. Si pasamos a nuestra página de índice, tenemos un div vacío con shape1 y también la shape2. Vamos a añadir estas propiedades de estilo a este div aquí. En primer lugar, vamos a seleccionar shape1 usando document.getElementById, sólo tienes que seleccionar esto. Justo después de aquí, volvamos al inicio y hagamos un document.GetElementById. Queremos agarrar forma1. Entonces lo que vamos a hacer es algo que hemos mirado antes. Vamos a establecer el atributo de estilo para este div. Vamos a establecer el CSsText para que sea igual a la cadena que se crea, cual se almacena en esta constante llamada Shape1Styles. Añadamos esto como nuestro CSsText. Shape1Styles con el punto y coma al final. Este CSsText que acabamos de utilizar aquí, no es algo que hayamos visto aún durante este curso. Esto nos permitirá pasar en una cadena de estilos, igual que creamos aquí, almacenada en una variable llamada Shape1Styles. Ahora vamos a comprobar que esto está funcionando en el navegador. Si guardamos esto y luego recargamos, podemos cerrar la consola abajo y hacer clic en play. Genial, ese es nuestro div shape1 del lado izquierdo aquí. Ahora podemos ver todas las propiedades de estilo, como el color, la altura y el ancho, y ahora aplicar como atributos de estilo, que hemos agregado justo aquí. Ahora lo que tenemos que hacer es repetir esto para nuestra forma2. Copiemos aquí nuestra forma1, y luego podríamos pegar esto justo debajo, y luego pasemos esto para mantenerlo todo alineado bien. Ahora lo que tenemos que hacer es simplemente cambiar shape1 para ser shape2. Lo mismo para todos estos dentro de aquí podemos cambiar esto para que sea shape2 excepto por el color y también por la altura también, y luego igual que antes podemos copiar esta línea de código aquí, también podemos seleccionar el document.getElementById. Esta vez queremos seleccionar el shape2 div, que está terminado en la página de índice, que es este div aquí. Exactamente lo mismo que hacemos Style.CSsText, y esto va a ser igual a Shape2styles. Agrega un punto y coma al final, y luego cierra el navegador, recarga y ojalá debamos conseguir dos formas aleatorias al hacer clic en “Play”. Genial, ahora estas dos formas están en la pantalla, ahora necesitamos una forma de compararlas. Y esto es lo que veremos en el próximo video. 39. Comparación de objetos y puntuación: Ahora tenemos dos formas aleatorias apareciendo en la pantalla. Necesitamos una forma de comparar estos dos objetos con forma. Cuando el jugador hace clic en el botón, Match, que está justo aquí. Para empezar, tenemos una variable en la parte superior, que se llama jugar, que pusimos temprano en esta sección, que también se establece en false. Dentro de la función de juego All-Star, podemos cambiar esta variable para que sea cierta una vez que el juego haya comenzado. Vamos a desplazarnos hacia abajo a nuestra sección de puntería de acciones, que está justo aquí. Entonces, una vez que el usuario haya hecho clic en el botón, Reproducir, podremos entonces seguir adelante y establecer que el juego sea igual a verdadero. Fuera de esta función, voy a crear un nuevo comentario, que es comparar. Ahora podemos agregar un manejador de eventos al botón de coincidencia, para activar una función cuando se hace clic. Repasemos tu página de índice y echemos un vistazo a nuestro botón de partido, que está justo aquí. Esto tiene un ID de partido, por lo que podemos agarrar esto dentro de nuestros guiones, por lo que document.getElementById, el Id de match. Entonces podemos usar un manejador de eventos onclick, desencadenar una función de flecha ES6. Entonces dentro de esta función podemos agregar una sentencia if para comprobar si se juega un conjunto a true. Digamos, si la variable de jugar, por lo que sólo podemos decir si se juega, y cuando esto es cierto, esto entonces ejecutará el código dentro de la sentencia if. Esto básicamente significa que el código dentro de esta sentencia if sólo se ejecutará si se hace clic en el jugador, Start. Ciertamente jugar cualquier variable para ser verdad. Anidados en el interior podemos realizar otras declaraciones if. Esto se utilizará para aumentar la puntuación del jugador, si los objetos son partidos. Anidemos una segunda declaración if, así como esta. Pero, ¿cómo comparamos primero los objetos para comprobar si son iguales? Para esto, tenemos algo llamado objetos.is. Esto nos permitirá entrar y salir, dar forma a variables para comparar. Objects.is otra nueva característica de JavaScript de ES6 o ES 2015, al igual que las funciones de flecha y los lets constantes, que miramos antes. Dentro de los corchetes aquí puedes decir objetos, así objet.is, y luego abrir los paréntesis justo después. Dentro de aquí, podemos pasar en nuestros valores que queremos comparar, cuales se han almacenado en las variables de forma 1 y también en forma 2. Si estos dos objetos dentro de aquí, son partido, entonces podemos aumentar la puntuación del jugador. Tenemos la puntuación del jugador arriba en la parte superior, podría ser puesta a cero y almacenada dentro de esta variable de puntuación actual. Aumentemos esto. Si el objeto es un partido, hemos puesto el marcador, plus, plus. Encima en el index.html, también tenemos un elemento span con el Id de score, que está justo aquí. Esto nos permitirá recortar estos elementos para luego incrementarlo con la puntuación de un jugador. Podemos ver este valor en la pantalla. Hagámoslo ahora de vuelta a nuestras declaraciones si. Si estos dos objetos, son coincidencias aumentaremos la puntuación en uno y luego seleccionaremos el document.getElementById, luego agarrar en el contenedor span, que tenía el ID de puntuación. Establezca el innerHTML para que sea igual a un valor de puntuación actual. Bueno solo sopla esto. Después de nuestra sección if que usted acaba de aquí, vamos a sumar nuestras declaraciones l. Estas declaraciones l se ejecutarán si los objetos no coinciden. Esto se usará hacer lo contrario y luego sacar un punto del marcador. Digamos que si no, puntaje actual, y vamos a disminuir esto en uno. Entonces también haz la misma línea aquí, así document.getElementById, el Id que queremos agarrar, de nuevo es marcador. Después obtener el HTML interno para ser igual a la puntuación actual. Entonces refresca, y vamos a darle una oportunidad a esto, haga clic en el botón Reproducir. Ahora, tenemos que hacer clic en este botón Matar, cuando estas dos formas sean iguales. Vamos a agitar estos para que sean lo mismo. Eso va al valor de 1, 2, 3. Esto también está funcionando bien. Si hacemos clic en esto cuando las formas no coinciden, vemos perderá un punto cada vez. Genial, todo parece funcionar bien. Pero antes de que llamemos a esto completo, hay algunos pequeños temas que debemos abordar. En primer lugar, después de que se inicie el juego, si seguimos haciendo clic en el botón de jugar, así que empecemos el juego apagado. Entonces si hacemos clic en esto varias veces, esto llamará a los meses del modelo de función de media, generando muchas formas aleatorias. Además, al jugar el juego, queremos restringir al usuario para que solo presione este botón de partido una vez por intervalo establecido. Actualmente si el usuario hace clic en él varias veces, la puntuación seguirá yendo hacia atrás o hacia adelante. Queremos restringir esto a un solo clic por selección. Empecemos deshabilitando el botón de parada, cuando el juego ya se está ejecutando. Podemos hacer esto de lado de la función de juego. Pasen a nuestros guiones, y vayamos a la sección Star Game aquí, que es el manejador de clics. En primer lugar, necesitamos agarrar nuestro botón de juego, que tiene una identificación de juego, que podemos ver aquí. Entonces de vuelta a nuestra función de juego Star, justo debajo del juego igual verdadero. Añadamos un comando para decir desactivar el botón de reproducción, al jugar. Document.getElementsById, selecciona nuestro botón Reproducir, y luego podemos set.disabled para que sea igual a verdadero. Vamos a probar esto, y luego haga clic en Reproducir. Vemos en cuanto se hace click en play que se vuelve gris, y podemos, t dar click en este botón más. Si nos refrescamos, ahora nuestro botón de juego vuelve a la normalidad, y podemos reiniciar un nuevo juego. Entonces ahora podemos pasar a detener al jugador haciendo clic en este botón de partido varias veces. En primer lugar, almacenemos este botón de coincidencia dentro de una variable. Lo ponemos en la parte superior de nuestro código. Vamos a configurar una constante llamada botón de coincidencia, y nuestro conocido document.getElementById. El botón que quieres seleccionar tiene el Id de mucho, agregamos un punto y coma al final. Empezaré esta referencia dentro de una constante porque vamos a estar seleccionando esto varias veces. Primero vamos a deshabilitar el botón una vez que se haya hecho clic, y luego reactivar el botón una vez que se esté generando el nuevo intervalo establecido. Abajo, podemos configurar este botón para que se desactive después de que se haya hecho clic. Abajo dentro de la sección de comparación, y lo haremos de lado de la sección de jugadas. Digamos que matchbtn.disabled va a ser igual a verdadero. Esto desactivará el botón después de que se haya hecho clic. Dentro de esta función onclick, este botón ahí necesita ser reactivado para cada ciclo. Entonces podemos volver a habilitarla cada vez que se genere una nueva forma. Hasta la sección de intervalo establecido. Justo después de aquí, justo en la parte superior, también podemos seleccionar matchbtn.disabled, pero esta vez para ser falso. Vamos a probar esto, refrescar el navegador, dar click en, Jugar. Ahora comienza nuestro juego, y si intentamos hacer clic en el botón de partido varias veces, solo funciona cuando se está generando una nueva forma, lo que solo podemos hacer clic en él una vez por selección. Genial, este es nuestro juego. Ahora completa. Siéntete libre de seguir adelante y hacer cualquier personalización, hacer cualquier cambio, o jugar con la velocidad de las formas usando nuestro valor de intervalo establecido justo aquí, o generalmente experimentar con cualquier característica nueva que te guste. Espero que hayan disfrutado construyendo este juego y adiós por ahora. 40. Introducción a las expresiones regulares: Bienvenidos de vuelta chicos. Ahora vamos a ver algo que es realmente útil en JavaScript. Se trata de expresiones regulares. Las expresiones regulares, a menudo acortadas a rechazos, son una forma de encontrar un patrón o combinación de caracteres dentro de una cadena de texto. Por ejemplo, si tuviéramos un párrafo de texto, podríamos decir que queríamos buscar espacios dobles y reducirlos para que fueran solo un espacio. Todo podíamos buscar cada palabra dentro de una oración y luego cambiar el primer carácter para ser una letra mayúscula. Dirígete a estos archivos de inicio. Entonces dentro de la barra lateral, bajemos al número 32, que es introducción a las expresiones regulares. Dentro de aquí tenemos un simple texto de inicio lorem ipsum, que acabas de almacenar dentro de los elementos P. Abre este ejemplo dentro del navegador. En primer lugar podemos agarrar estos elementos de texto justo aquí y almacenarlo dentro de una variable para empezar a trabajar. Abajo a nuestros guiones, empecemos con el let text iguala documento dot Query Selector. Queremos agarrar nuestros elementos P, que almacena nuestro texto. En esto se ve como una cuerda, y luego queremos agarrar el HTML interno. Podemos comenzar con lo básico y como el texto para encontrar la ubicación de una palabra en particular como una cadena. Justo debajo de esto, éste es bastante sencillo para buscar texto. Todo lo que necesitamos hacer es decir text dot search y luego dentro del corchete podemos añadir una cadena que quieras buscar. Busquemos cualquiera de estas palabras dentro de una cuerda. Vamos por, “amet” agrega esto entre las cotizaciones, A-M-E-T. Ahora pondré esto a la consola. Primero almacenemos estos resultados dentro de la variable. Dejar que el texto nuevo sea igual a nuestra búsqueda y luego podríamos hacer un registro de consola para el valor del nuevo texto. Dale a eso un guardado y luego a nuestro ejemplo, abre la consola y obtenemos el valor de 23. Esto se debe a que la palabra que buscamos en nuestra cadena de texto comienza en la posición 23, lo que básicamente significa que se trata de 23 posiciones desde el principio. Comentemos este ejemplo y echemos un vistazo a uno nuevo. Quitaremos este registro de consola lo recortará y en realidad sólo péguelo hacia abajo en la parte inferior. Podemos usarlo con todos los ejemplos, arriba. Ahora hemos mirado a encontrar una cuerda dentro de nuestro texto. Una vez que encontramos un partido, muchas veces queremos reemplazarlo por otra cosa. Para esto tenemos el método de reemplazo. Abajo en el texto de reemplazo, vamos a cadena. Vamos a crear el mismo ejemplo desde antes para que nuevo texto pero esta vez en lugar de hacerlo, búsqueda de punto de texto, podemos hacer texto dot replace. Reemplazar toma dos valores diferentes, el primero que vamos a agregar una cadena para buscar. Voy a buscar lorem que es la primera palabra dentro aquí y luego como un segundo valor separado por una coma, podemos agregar una palabra con la que quieres reemplazarla. Vamos por cualquier palabra de tu elección. ¿ Cuál es nuestro número de fichas? También tenemos nuestro log de consola de texto nuevo abajo en la parte inferior. Si recargamos el navegador y echamos un vistazo, ahora vemos que nuestra primera palabra de lorem ha sido reemplazada por chips. Esto funciona muy bien, pero esto es porque hemos agregado la palabra lorem. Justo aquí, tenemos una L. mayúscula Coincide con nuestra cuerda. Si pudiéramos cambiar esto a minúscula, no funcionaría. Cámbialo a L minúscula, refresca. Diré que la palabra lorem no ha sido reemplazada esta vez. Esto se debe a que este reemplazo es sensible a mayúsculas y minúsculas, en cambio si queremos realizar una búsqueda, que es insensible a mayúsculas y minúsculas, podemos agregar nuestro patrón para buscar el interior de las barra inclinada hacia adelante. Volver a nuestro código. Copiemos esta línea de antes. Podemos dejar este ejemplo en comentando esto. Podemos pegar esto de nuevo debajo de este texto reemplazar por una expresión regular. En lugar de tener una cadena de texto como esta, vamos a crear una expresión regular dentro de dos barra inclinada hacia adelante. Busquemos nuestra palabra de lorem entonces podremos sumar al modificador I justo después. Si guardamos esto y luego nos refrescamos, vemos ahora la palabra lorem ahora se reemplaza por chips, pesar de que la L es minúscula. La palabra lorem aparece sólo una vez dentro de esta cadena de texto, pero si querías buscar algo que aparezca varias veces, como un simple carácter E. adelante y echemos un vistazo a esto, si copiamos este ejemplo y luego comentamos esto, y luego pegamos esto dentro y debajo de la sección Yo modifico. Podemos ver aquí que el modificador I, haremos una búsqueda que es en mayúsculas y minúsculas, pero solo reemplazarás la primera coincidencia dentro de nuestra cadena. Cambiamos lorem para ser E, hay múltiples ocurrencias y luego reemplaza por una A. mayúscula Recargar el navegador. Ahora vemos que sólo se reemplaza la primera ocurrencia de una E. No hay más A mayúscula dentro de nuestra cuerda. No obstante, si queremos reemplazar todas las ocurrencias, esta vez podemos utilizar el modificador G. Copiemos esta línea de código aquí, comentemos esto, y luego peguemos esto debajo del modificador G. Todo lo que necesitamos hacer es cambiar el I para ser una G, recargar el navegador. Ahora vemos que todas las ocurrencias de E han sido reemplazadas por una A. G mayúscula significa Global y encontraremos reemplazar todas las coincidencias en nuestra cadena de texto en lugar de detenerse después de la primera. Al igual que cuando usamos el modificador I. Solo buscará una letra pero si queremos hacer coincidir con letras múltiples, podemos agregar estas dentro de corchetes. Echemos un vistazo a esto. Si copiamos esta línea aquí y comentamos esto. Dejemos esto en los archivos de inicio para referencia futura, peguemos esto en debajo de la sección de corchetes cuadrados y luego dentro de todas las barra inclinada hacia adelante, podemos agregar algunos corchetes. Dentro de estos corchetes, si buscamos H, G, o S. Hagamos estas minúsculas con el modificador G y luego añadamos algo que destaque. Añadamos algunas estrellas y en mayúsculas dirán “REPLAZADO”. Cuando busquemos a través de la cadena, la primera ocurrencia de H, G, o S entonces será reemplazada por la cadena aquí. Guarda esto, y luego vuelve a cargar y desplazarte hacia arriba, podemos ver que la primera ocurrencia ha sido reemplazada por nuestra cadena aquí. Esto también se detiene después del primer partido. Si queremos reemplazar todas las ocurrencias de H, G, o S. Podríamos volver a agregar el modificador G. Copiemos esta línea aquí, comentemos esto, y luego agreguemos esto bajo la sección G modificar. Después de nuestra expresión regular agreguemos él modificador G, guarde esto y podemos ver que ahora se han reemplazado todos los partidos. Estos corchetes también funcionan para los números. Copiemos esto, comentemos esto y añadamos esto justo encima de nuestro registro de consola dentro de los corchetes, en lugar de buscar nuestras letras, vayamos por los números del tres al seis. Esto encontrará todos los números de tres a seis, eliminará la G, y luego lo reemplazará por esta cadena de texto aquí. Para que esto funcione, necesitamos agregar un número a nuestro texto anterior. Vamos por el número cinco sumar esto en, recargar. Vamos a intentarlo y buscarlo, ahí vamos. Ahí están nuestros textos de sustituidos en una posición de nuestro número cinco. Este es un primer vistazo al uso de expresiones regulares para coincidir con un patrón. Si Google Mozilla expresiones regulares. Estás a punto, encuentra muchos más ejemplos en esta sección de expresiones regulares. Hacemos click en esto y luego vamos a la documentación de Mozilla. Podemos ver que hay muchas formas diferentes de crear juegos de palabras. Si nos desplazamos hacia abajo, algunas de estas expresiones regulares son herramienta bastante compleja. No voy a pasar por todos estos ya que la mayoría de los casos de uso específicos preguntados. Puedes encontrar casi cualquier forma en que coincida con un patrón usando expresiones regulares. En el siguiente video, vamos a construir un pequeño proyecto usando expresiones regulares para tomar las entradas del usuario y realizar un hallazgo y reemplazo. 41. Proyecto de búsqueda y reemplazo de RegEx: Bienvenidos de vuelta chicos. En este video, vamos a estar usando expresiones regulares, para construir una aplicación sencilla de encontrar y reemplazar. Dentro de los archivos de inicio, tenemos un formulario básico donde el usuario puede escribir una palabra dentro de la sección de hallazgo. Esto buscará y luego encontrará una palabra dentro su texto original y luego podremos elegir una palabra con la que reemplazarla. Una vez seleccionado este botón Reemplazar, este botón Reemplazar activará una función que hará que todo esto suceda. Empecemos agregando un oyente de eventos a este botón. Encima en los archivos de inicio, este es el Número 33 el cual se rechaza, encuentra, reemplaza. Aquí abajo tenemos nuestro formulario con las entradas de hallazgo, las entradas de reemplazo y luego nuestro botón, que tiene el ID de RepuesteBTN. Bajemos a nuestro guión que está abajo en la parte inferior. Vamos así con document.getElementById. El ID como acabamos de ver es ReplazeBTN. A continuación, agregue un oyente de eventos. Dentro de los corchetes, sabemos que necesitamos agregar dos valores. El primero es el nombre del evento. Vamos a estar escuchando los eventos de clics. Entonces vamos a activar una función de flecha así. Dentro de aquí estas cuatro cosas necesitamos agarrar y almacenar dentro de variables. Tenemos que agarrar las entradas de formulario para la sección de hallazgo. Tenemos que agarrar la entrada para la sección de reemplazo y luego necesitamos agarrar nuestro texto original, que es nuestro primer conjunto de elementos p. Entonces necesitamos agarrar nuestros segundos elementos p, que va a contener nuestro texto con las palabras reemplazadas. Añadamos estas cuatro variables dentro de nuestro oyente de eventos. Empecemos agarrando nuestro texto original y luego nuestro texto modificado dentro de los elementos p. Deja que los textos originales sean iguales a los documentos.QuerySelectorAll. El texto original es la primera ocurrencia de los elementos p. Agrega la etiqueta p dentro aquí en la posición de índice cero. Entonces vamos a copiar esta línea y pegarla en justo debajo. Este va a ser el texto modificado. La única diferencia es que el elemento p es esta vez en el índice número uno. Ahora también necesitamos almacenar las entradas de usuario que tiene un ID o encontrar y también reemplazar. Vamos a instalar estos dos dentro de una variables también. Deja que nuestro FindText sea igual a documents.getElementById, el primero fue encontrar. Queremos agarrar el valor del usuario. Tenemos valor, copia esta línea y pegarlo de nuevo justo debajo. Este va a ser el texto de reemplazo. Sustituyamos el texto. El ID esta vez es reemplazado. De acuerdo, bien así que asegúrate de que el tuyo se parezca a este ejemplo de aquí. Ahora tenemos toda la información que necesitamos almacenada en variables. A continuación necesitamos agarrar el HTML interno de nuestro texto original. Esto es texturizado justo aquí, así que en la parte inferior de nuestra función, digamos OriginalText.innerHTML describe todo el contenido de texto de nuestro texto original. Entonces vamos a usar el método de reemplazo de puntos, que miramos en el último video. Esto toma en nuestros dos valores. El primero es la palabra que queremos encontrar. Esto se almacena dentro de una variable llamada FindText luego separada por una coma, la palabra con la que queremos reemplazarla. Esto se almacena dentro de esta variable de texto de reemplazo. Reemplaza el texto como nuestro segundo valor, el punto y coma al final, luego podemos instalar esto dentro de una variable llamada NewText. Por último, queremos dar salida a este NewText a nuestros elementos p vacíos que está justo aquí. Ya tenemos una lista de referencia llamada texto modificado. Vamos a sumar esto abajo en la parte inferior, por lo que ModifiedText.innerHTML va a ser igual a este NewText justo aquí. Está bien, bien. Creo que estamos listos para ir al navegador y darle una prueba a esto. Busquemos una de nuestras palabras. Digamos que se sienta, encuentra la palabra de se sienta. A continuación, reemplácelo con soporte. Hit replace y no parece pasar nada. Si miramos un poco de cerca y agregamos esto una vez más. Si hacemos clic en este botón de reemplazo y observamos muy de cerca hacia abajo en la parte inferior. Podemos ver lo brevemente que el nuevo texto se desaparecerá y luego desaparecerá. Esto se debe a que, esta parte dentro de los elementos de forma. Al hacer clic en este botón, el comportamiento predeterminado es enviar el formulario. Esto hace que la página se vuelva a cargar. Es también por eso que las entradas ahora están claras en la parte superior porque la página ha hecho una actualización. Para solucionarlo, podemos evitar el comportamiento predeterminado de este evento. En primer lugar, podemos agregar la e, que es los detalles de nuestros eventos, dentro del paréntesis de función entonces podemos evitar el comportamiento por defecto dentro del cuerpo de la función con e.PreventDefault. Esto impedirá que nuestro formulario se envíe y por lo tanto no veremos una actualización de página. Probemos esto otra vez. Sustituimos sentarse con soporte, haga clic en “Reemplazar” y ahí vamos bajo nuestra nueva sección de tecnología. Vemos que la palabra sit ha sido reemplazada por stand y ya no vemos una recarga de página. También hay otra forma de arreglar esto. En lugar de tener e.PreventDefault podemos eliminar esto. Podemos quitar nuestra variable e de aquí y en su lugar, si subimos al botón, dentro de nuestro formulario también podemos agregar el tipo de botón. Ahora se trata de un tipo de botón en lugar de presentar. Esto detendrá la acción de envío predeterminada. Ahora vamos a darle una oportunidad a esto y esta vez reemplazaremos a Ipsum por cualquiera de las palabras. Golpea “Reemplazar”. Ahora tenemos también nuestro nuevo texto ahora tiene esta palabra reemplazada. El último aspecto a tener en cuenta es cómo hacer que esta búsqueda sea insensible a mayúsculas y minúsculas. Si buscamos la palabra lorom usando estos pequeños l y la reemplazamos por cualquier cosa. Golpea “Reemplazado”. Vemos que esto no funciona a continuación. Podrás pensar que podríamos simplemente agregar un modificador como este, así que hasta nuestro nuevo texto dentro del Find and Replace vamos a sumar nuestras dos varillas hacia adelante y luego los modificadores I al igual que esto. No obstante, si tuviéramos que decir esto, refrescar y darle una oportunidad a estos, teclea lorem. Nuestras palabras de reemplazo, vemos que esto aún no funciona. Para que esto funcione, necesitamos usar una función constructor, así que vuelve a nuestros scripts. Tan sólo un poco de texto nuevo vamos a decir, “Nueva expresión regular” al igual que esto. Entonces dentro de estos corchetes vamos a pasar en este texto hallazgo. Nuestro diseño como nuestro primer valor. Separados por una coma podemos añadir el modificador I. Esta función constructor compilará los resultados incluyendo este modificador y luego podríamos instalar esto dentro de una variable. Digamos que encuentra, con modificador y establece esto en nuestra función constructor. Entonces podemos usar este nombre de variable y pasa por nuestro reemplazo. En lugar de lo que tenemos aquí, sólo pasemos un nombre de variable. Tienes que ahorrar y luego vamos a probar esto, así lorem, con minúscula l. hit Reemplazar y ahora ves que esto está funcionando. Genial, por lo que esta función constructor compila nuestro tiempo de ejecución lo cual es ideal para patrones que pueden cambiar. A pesar de que conocemos el patrón que buscamos, puede cambiar dependiendo del caso de las letras. Genial, ahora tenemos un hallazgo de trabajo y reemplazamos lo cual es insensible a mayúsculas y minúsculas. Pasemos ahora al siguiente video. 42. HTTP, solicitud y respuesta: En lo que va de este curso, hemos mirado principalmente cómo funcionan las cosas en el front-end. Hemos construido interfaces de usuario, diferentes diseños, hemos mirado el diseño responsive, y también, cómo usar JavaScript. Todo esto es genial y realmente importante que entendamos todo esto. partir de esta sección, también vamos a estar buscando más en el back-end de los sitios web. Cómo interactuarán unos sitios web con servidores, diferentes fuentes de datos, y en general, cómo se comunican con fuentes externas. Cuando nuestra interfaz de usuario se está comunicando con servidores o generalmente solicitando alguna información, existen algunos conceptos que necesitamos conocer para entender plenamente lo que está sucediendo. No necesitamos ser un experto para adentrarnos demasiado en cada uno de estos conceptos. Como la mayoría viene como un tema por su cuenta, pero tener, al menos, un entendimiento general realmente nos ayudará a entender lo que está pasando. El primer concepto que vamos a ver es el modelo de servidor cliente. Como se puede ver aquí desde la diapositiva, sobre el lado izquierdo tenemos algunos ejemplos de clientes. Un cliente puede ser un navegador web, un teléfono, o incluso un terminal en nuestro equipo. Básicamente, el cliente es el que realiza las solicitudes, como una solicitando cualquier página web que desee ver. En el lado derecho, tenemos el servidor que proporciona estos recursos, todos los servicios que el cliente está solicitando, como nuestra página web, que enviará de vuelta al cliente si lo tiene. Cuando un cliente realiza una solicitud, como solicitar una página web, esto se denomina solicitud HTTP. HTTP significa Protocolo de transferencia de hipertexto. Este es el estándar o el procedimiento utilizado al transferir datos de hipertexto a través de la web. El cliente sigue adelante y hace la solicitud, y luego el servidor intentará responder a esa solicitud si es posible. Puede responder con cosas como el HTML requerido para la página web, cualquier imagen, o cualquier script que pueda ser necesario también. Si bien esto puede sonar un poco complejo, es algo que hacemos cada vez que visitamos un navegador web. En primer lugar, si vamos a la página de inicio de Wikipedia, en la parte superior, notarás que HTTPS está al principio. Esto es como el HTTP que mencionamos antes. Pero hoy en día, HTTP secure es más comúnmente utilizado ya que proporciona una versión encriptada, una mayor seguridad, y privacidad. Una vez que ingresamos una URL y pulsamos “Enter”, el navegador web, o en nuestro caso, el cliente ahora está haciendo una solicitud para esta página web. Si todo salió bien, el servidor responderá luego con la página solicitada y luego la mostrará en el navegador. Este ciclo de respuesta de solicitudes también funciona igual para otros clientes, como un terminal de computadora, que también es un cliente. Abramos la terminal. Haz esto un poco más grande. Usaremos una terminal más una vez que lleguemos a la sección de nodos de este curso y no es necesario que sigas junto con la sección si no quieres. Pero todo lo que voy a usar es un comando cURL, que también hace una solicitud HTTP desde la terminal. Hacemos esto escribiendo cURL, y luego podemos escribir nuestra URL, tal y como miramos antes dentro del navegador. HTTPS://y luego www.wikipedia.org. Después pulsa “Enter”. Entonces si nos desplazamos hacia arriba para ver se nos está devolviendo mucha información. Este es todo el HTML que se utiliza para el sitio web de Wikipedia. Mucho de esto se verá común, como los divs, nuestras etiquetas span, y todas las diversas clases a las que se agregan estas. No puede ser un poco difícil de leer. Esto se debe a que un terminal no sabe cómo lidiar con este HTML el cual se nos devuelve de nuevo, por lo que sólo se muestra como texto plano. Por otro lado, un navegador web sabe exactamente qué hacer con este HTML. Entonces si pasa al navegador, y haga clic derecho y luego vaya a Ver fuente de la página, esto también puede ser un poco difícil de leer, pero esta es la misma información que se está enviando de vuelta desde el servidor. La diferencia es el navegador web sabe cómo lidiar con esta información y cómo luego convertirla en una página web. Cuando hacemos una solicitud HTTP, hay varios métodos de solicitud que podemos utilizar. Aquí podemos ver cuatro ejemplos llamados GET, POST, PUT, y DELETE. Hay más de estos cuatro, pero estos son comunes para que empecemos. Cuando queremos obtener una página web, o queremos obtener algunos datos, podemos usar lo que se llama una solicitud GET. Esto es lo que se utiliza en el navegador para obtener nuestra página web del servidor. POST hará lo contrario y enviará algunos datos al servidor para su procesamiento, como agregar un nuevo registro a una base de datos. A continuación tenemos la solicitud PUT. Al igual que la POST, esto también enviará algunos datos al servidor para procesar. No obstante, la diferencia es que si estos datos o el recurso ya existe en el servidor, seguirá adelante y lo reemplazará. Esto se utiliza comúnmente para actualizar algunos datos. El final es el DELETE y esto es bastante autoexplicativo. Esto eliminará el recurso o los datos que especificamos. Utilizaremos algunos de estos métodos durante este curso, particularmente en el proyecto final al interactuar con una base de datos. Parte de esta respuesta del servidor es también un código de estado. Hay muchas respuestas diferentes, pero aquí hay algunos ejemplos. Un código de 200 significa que la solicitud fue exitosa y el recurso solicitado se envía de vuelta al interior del cliente del cuerpo de la respuesta. A continuación tenemos la respuesta 301, que es un mensaje de redirección. Esto significa que el recurso que estamos tratando de solicitar se ha movido permanentemente. Generalmente obtenemos el nuevo URI dado con la respuesta. Una respuesta 401 significa que el cliente no está autorizado, por lo general requiere autenticación antes de recibir la respuesta solicitada. El 404 es uno común que quizá ya hayas visto al navegar por la web. Esto es común cuando no se puede encontrar una página, como cuando un usuario escribe mal una URL. Mucho de esto puede parecer simplemente pasar en segundo plano por magia, pero podemos tener una mejor idea de lo que está pasando dentro de las herramientas de desarrollo. Si volvemos a alguna página web como Wikipedia, y luego hacemos clic con el botón derecho, y luego inspeccionamos, dentro de aquí, podemos ir a la pestaña Red, justo en la parte superior aquí, y luego presionar Refresh y luego podemos ver que tenemos un montón de diferentes nombres de archivo los cuales nos fueron devueltos. Tenemos la página principal. Tenemos algunas diversas imágenes JPEG. Tenemos algunos guiones, algunas imágenes PNG y desplazándose hacia abajo, vemos que todos estos se nos devuelven desde el servidor. También podemos ver el código de estado y la mayoría de estos son código de 200, que miramos antes. Esto significa que la solicitud fue exitosa. Si miramos la página principal en la parte superior, podemos ver un código de estado de 304 para esta página de inicio. Esto significa que la página no ha sido modificada desde la última solicitud, por lo tanto, el navegador puede utilizar lo que se denomina versión en caché. Un caché es un almacenamiento temporal y los navegadores usarán una caché para almacenar nuestras páginas web una vez que las visitemos, por lo que se puede acceder más rápido y también reducir la necesidad de seguir realizando solicitudes adicionales de servidor. Es por ello que si subimos a la parte superior y hacemos clic en Deshabilitar caché, se recarga. Ahora vemos que esta página principal tiene ahora un código de estado de 200. Esto significa que ahora estamos haciendo una nueva solicitud al servidor para esta página web, en lugar de almacenarla dentro del navegador para un acceso rápido. Ahora, si desmarcamos esto y luego actualizamos, ahora podemos ver el código de estado de 304, lo que significa que estamos usando la versión almacenada dentro del navegador en lugar de hacer una nueva solicitud. Esta es una visión general de cómo funcionan las cosas entre el cliente y el servidor. Incluso al tener sólo un conocimiento básico de estos conceptos realmente te ayudará a entender lo que está pasando entre bastidores y realmente te ayudará como desarrollador. A continuación, estaremos viendo las API y cómo podemos usarlas en nuestros sitios web o aplicaciones para obtener datos de fuentes externas. 43. ¿Qué es una API?: Esta parte API del curso va a ser sección realmente emocionante. Si no has trabajado con ninguna API antes, o generalmente cualquier dato de fuentes externas. Vamos a empezar por mirar las API, y esto significa Interfaz de Programación de Aplicaciones, que suena realmente complejo pero es solo una forma para que conectemos nuestros sitios web o aplicación a otra fuente de datos. Básicamente define cómo nuestra aplicación puede hablar con otras aplicaciones y servicios. Algunas de las empresas más grandes por ahí tienen una API para desarrolladores con la que podemos conectarnos. Por ejemplo, podríamos crear nuestra propia aplicación musical, exactamente como queríamos lucir. Después usa la API de Spotify para buscar canciones o álbumes, o incluso acceder a cualquier dato de usuario, como cualquier canción guardada, para luego mostrarlos ahí mismo en nuestra propia aplicación. También hay una API de YouTube, que podemos utilizar la búsqueda y visualización de videos dentro de nuestros propios proyectos. Esto también proporciona una forma para que estas empresas permitan a los desarrolladores acceder de forma segura a los datos, lo que permiten. Estos proveedores requerirán primero el registro y también una clave API, antes de otorgar el acceso. Al igual que antes en el curso, miramos el uso de Google Maps. Cuando tenemos que registrarnos y proporcionar una clave API, cosas para funcionar. ¿ Cómo accedemos a estos datos de API? Bueno, no todas las API son exactamente iguales, pero generalmente hacemos una solicitud a una URL, esta es una solicitud get, como nos enteramos en el último video. Porque queremos obtener algunos datos. Esta URL se denomina endpoints. Por ejemplo, este es el punto final de API de Spotify aquí en la parte superior. Este endpoint suele extenderse para ser más específico sobre los datos que queremos obtener. Por ejemplo, podemos agarrar alguna información del álbum. Podemos conseguir álbumes con una identificación específica. Podemos realizar búsquedas e incluso recuperar la información de la lista de reproducción de un usuario. Para darte una mejor idea de cómo funciona esto, existe una API sencilla que podemos utilizar con información todo sobre tipos de perros. Vamos al navegador y voy a ir al CEO del perro, que es www.dog.ceo. Entonces para agarrar la API haría hacia adelante slash dog dash API, golpea “Enter”. Podemos ver esta es la colección más grande de internet de imágenes de perros de código abierto. Parte de esto nos permitirá buscar a través de las razas de perros, buscar a través de las imágenes, y generalmente reunir información que queremos encontrar. Esto nos dará algunos ejemplos de los puntos finales que podemos utilizar para obtener diferentes datos de perros. Esto es útil para empezar porque no necesitamos registrarnos ni utilizar ninguna clave API para empezar. Desplazándose hacia abajo, aquí podemos ver nuestros puntos finales, que es la primera parte de la dirección web que acabamos de visitar. Dentro de la API, podemos luego filtrar por razas y luego seleccionar las imágenes, y luego seleccionar una imagen aleatoria, y luego regresamos con algunos datos JSON. Si vamos a la documentación, podemos ver algunos ejemplos más. El primer ejemplo que vemos es la lista de todas las razas. Por lo que este es el final de URL que necesitas visitar para agarrar todas estas razas de perros en formatos JSON. Si hacemos clic en esto, copiarlo, luego pegarlo en el navegador. Regresar hacia su información en formato JSON. Si el tuyo se ve un poco difícil de leer o no se ve así, es posible que necesites una extensión de navegador JSON para formatearla en una estructura más legible. Hay muchos formatos JSON diferentes que podemos usar, pero estoy usando uno llamado formateador JSON. Voy a ir a la extensión Chrome, y luego formateador JSON. Puedes seguir junto con este enlace y luego agregar esto como una extensión de Chrome con solo hacer clic en el botón “Agregar a Chrome” en la parte superior. Ya tengo esto instalado, así que solo voy a cerrar su pestaña por ahora. JSON significa JavaScript Object Notation y su sintaxis para el intercambio de datos a través de la web. Está formateado como objetos JavaScript, pero en realidad es independiente del lenguaje, lo que significa que también puede ser creado y leído por otros idiomas. Aquí podemos ver un objeto como la sintaxis usando estos redondos en llaves. También tenemos los pares de valor de nombre como el estado de éxito. Entonces dentro de este mensaje aquí tenemos un objeto que contiene todas las razas de perros que solicitaron. Podemos ver que algunos de ellos son solo objetos vacíos porque no hay datos para esta raza en particular. No obstante, por ejemplo, si nos desplazamos hacia abajo, uno como el bulldog es una matriz que contiene dos tipos diferentes. Si volvemos a la documentación de la API, y luego si bajamos a la lista de razas, aquí, podemos dar click en la información de JSON para cualquier tipo diferente de raza que quieras consultar. Podemos ver qué imágenes tenemos asociadas con estas. Vamos a un boxeador y pinchemos en el “Datos JSON”. Se puede ver por el endpoint URL en la parte superior con filtrar la raza, abajo por el boxeador. Después accederemos a las imágenes. También podemos hacer clic en cualquiera de estas imágenes, luego ver qué imágenes se proporcionan. Para cambiar la raza, todo lo que tenemos que hacer es cambiar la URL. En lugar de tener boxeador, cambiemos esto para que sea algo más como sabueso. Después obtenemos una lista de diferentes imágenes para el sabueso. Probemos una más. Vayamos por labrador. Aquí tienes una lista de todas las imágenes para los labradores. Este es el formato JSON y es probablemente el tipo más utilizado. Algunos de ellos que solían ser populares para la transferencia de datos también era un formato llamado XML. Aquí hay un ejemplo de los mismos datos usando tanto JSON a la izquierda como XML a la derecha. XML es muy descriptivo usando etiquetas semánticas, que se parece un poco a HTML, todavía verás a menudo algunos datos API suministrados en formato XML. No obstante, la mayoría ahora tienen una versión 2 de JSON, o incluso solo JSON por sí mismo, unas API más modernas. Esto se debe a que JSON es mucho más corto y ligero, como podemos ver a la izquierda con los mismos ejemplos. Ahora tengo algunos antecedentes de lo que es una API y cómo podemos usar los datos. Ahora volvamos a nuestra aplicación de búsqueda de canciones, que comenzó temprano en el curso. Temprano creamos la interfaz de usuario. Ahora vamos a pasar a agarrar nuestros datos API y mostrar una lista de canciones en la pantalla. 44. Obtención de datos y cadenas de consulta: A principios del curso, creamos una estructura HTML para nuestra canción, encuentra el layout. También te desafié a agregar un poco de estilo y diseño usando la cuadrícula CSS para que las cosas se vean aún mejor. En esta sección, vamos a estar completando este proyecto usando una API para sacar algunos datos reales de canciones que podemos usar de iTunes. También estaremos utilizando la API de JavaScript Fetch, que nos permitirá buscar un recurso o en nuestro caso, queremos buscar los datos de iTunes. Empecemos abriendo nuestra canción, encontraremos un proyecto de antes. Si aún no lo has hecho, abre el proyecto final de la canción en Visual Studio Code, y luego abre la página de índice en el navegador. En el archivo index.html, creamos algunos datos de muestra para nuestras canciones. Vamos a estar creando esta sección dinámicamente usando JavaScript y luego agarrando los datos de la canción de la API de iTunes. Podemos seguir adelante y eliminar el contenido de esta sección principal, pero solo dejaremos uno en como referencia. Vamos a la página de índice y luego desplázate hacia abajo hasta la sección principal con el ID de canciones. Voy a salir en uno de estos artículos y luego quitar los cinco extra una vez dentro de abajo, para cinco a la derecha hasta el fondo del cierre principal hundido, traigo esto para arriba. Nos queda una sola canción. Dale ese guardar, y refresca el navegador. El siguiente paso es crear nuestro archivo de script. Este va a ser un archivo JavaScript. Haga clic con el botón derecho en nuevo archivo y llame a esto script.js. Entonces necesitamos enlazar a esto en el index.html, así que desplázate hacia abajo hasta la parte inferior y justo antes de la etiqueta de cuerpo de cierre, agreguemos nuestro script, cierra esto, luego agregamos la fuente del script. Esto está en el mismo directorio, por lo que sólo podemos hacer referencia a esto por script.js. Si guardo. Ahora estamos listos para ponernos en marcha. Pasemos a la documentación de iTunes y echemos un vistazo a lo que vamos a estar usando. Dirígete a Google. Hagamos una búsqueda del iTunes, buscar API. Desplazémonos hacia abajo. Lo que necesitamos es la API de búsqueda de iTunes, que está en el sitio web de Apple Developer. Vamos a dar click en esto. Empecemos seleccionando la búsqueda desde el menú, el cíclico, y luego podemos hacer click en construir una búsqueda. Cuando discutimos las API en el último video, mencionamos que generalmente buscamos los datos conectándonos a una URL, que se denomina endpoints. Aquí también podemos ver los endpoints API proporcionados por iTunes, que está justo aquí. Se trata de itunes.apple.com, búsqueda de barra hacia delante. Después de este endpoint, podemos agregar algunos pares de valores clave para obtener la información que queremos. Aviso al final de esta URL es un signo de interrogación. Esto es sólo un separador para separar la URL de las consultas que desea preguntar. Echaremos un vistazo a estos en tan solo un momento. Esta URL con los parámetros al final se denomina cadena de consulta. Si nos desplazamos hacia abajo, podemos ver algunos pares de valores clave en esta tabla aquí. A partir del término de búsqueda, este es probablemente el más importante para nuestro uso. Su término que vamos a estar buscando para encontrar nuestras canciones de la base de datos. Desplazándose hacia abajo, también podemos buscar por medio 2 o podemos reducir esto para buscar en una música. O incluso podemos incluir cosas como películas, todos los podcasts. También podemos limitar nuestra búsqueda también para no obtener demasiados valores de retorno. Si nos desplazamos hacia abajo, también podemos ver este parámetro de límite aquí. También usaré límite, por lo que no nos devuelven demasiados resultados de búsqueda. Para ver estos funcionando en acción, simplemente podemos escribirlos en el navegador. Subiremos a la cima. Vamos a copiar esta URL y luego añadirla en una nueva pestaña. Antes de presionar enter, necesitamos agregar algunos pares de valor clave con la búsqueda para trabajar. Si vuelve a la documentación, podemos utilizar cualquiera de estos pares de valores clave que miraban antes, como un término de búsqueda. Después del signo de interrogación, podemos agregar un término y luego igual. Vamos por Beyoncé y me pego entrar. Entonces tengo un archivo de texto el cual se descarga. Podemos abrir esto y ver los contenidos. Podemos ser un poco difíciles de leer por el momento, pero podemos ver en la parte superior tenemos 50 resultados devueltos a nosotros, seguidos por una matriz de nuestros resultados con toda la información de cada canción. Si quisiéramos limitar esto, entonces podemos agregar algunos valores extra. Después pega en nuestra consulta nuevamente el término igual Beyoncé. Entonces podemos agregar más pares de valor clave. Esta cadena de consulta separada por el ampersand, así que agrega el ampersand aquí. Entonces podemos usar límites, que también miramos antes y poner esto a resultados libres, pulsa “Enter”. Tenemos un nuevo archivo de texto descargar en. Abramos esto. Ahora tener un recuento de resultados de datos gratuitos y mucho menos. Simplemente tenemos pistas individuales libres dentro de la matriz. Para ver esto más claramente, vamos a copiar toda la información de nuestro archivo de texto, entonces cierro esto. Acude a Google. Entonces busquemos código embellecer. Esto es lo que necesitamos, un codebeautifty.org. Abre esto. Vamos a utilizar el visor JSON para ver cómo se ve esto. A la izquierda tenemos las entradas JSON las cuales puedes pegar en nuestra información desde un archivo de texto y luego podemos dar click en embellecer en el medio y ver los resultados en el lado derecho. Haga clic en la cruz en la esquina superior para hacer esto aún más grande. Ahora, podemos ver más claramente la información que se devuelve de iTunes. Tenemos los conteos de resultados que hemos visto antes. Por lo que tenemos una matriz de resultados con valores libres. Este primero es un objeto el cual contiene toda la información sobre la canción. Contamos con algunas URL para la obra de arte y las utilizaremos en nuestra aplicación. Para obtener las imágenes de cada camión, también tenemos el ID de camión del nombre artista de Beyoncé. Tenemos nombre de camión y mucha más información sobre la canción. Se trata de todos los datos JSON que podemos utilizar en nuestra aplicación. Sabemos cómo obtener estos datos utilizando la URL. Ahora podemos usar Fetch para realmente traer estos datos a nuestro proyecto. Volvamos a Visual Studio Code y luego al script.js sobre un tema para acceder a la API de Fetch. Entonces dentro de aquí pasamos en la URL, que quiere acceso, así que pega. Whoops, de hecho, necesitamos volver a iTunes y luego copiar los endpoints de API y pegar esto entre causales. Si le damos a esto un guardado y luego pasamos a nuestra aplicación, recarga el navegador. Si nos refrescamos, no vemos nada diferente hasta ahora. Pero podemos seguir adelante y asignar este fetch a una variable y ver qué está pasando con un registro de consola. Establecer una constante llamada datos y establecer esto igual a una fetch. Debajo de esto podemos console.log. Entonces eso es pasar los datos, que son los datos devueltos por este fetch, luego pasar al navegador. Entonces si hacemos clic derecho en “Inspeccionar” y echamos un vistazo a esto en la consola, así que vamos a refrescarnos, para que veamos que tenemos así que vamos a refrescarnos, para que veamos que tenemos algo llamado promesa devuelto como respuesta, que parece estar pendiente. Antes de entrar en más detalle, intentemos una cosa más. Justo después de este registro de consola, hagamos un tiempo de espera establecido de JavaScript, que va a ejecutar el mismo registro de consola después de dos segundos. Dentro de aquí podemos pasar en una función ES_6 [inaudible]. Entonces podemos copiar este registro de consola, pegarlo, agregar una coma, y lo ejecutaremos después de 2,000 milisegundos. Danos guardar y luego volvamos a la consola y luego recargar. Si esperamos dos segundos, ahora vemos que hay una segunda promesa. Pero esta vez se resolvió con una respuesta. Estos resultados los cuales se ve dentro de la consola por dos cosas. En primer lugar, al usar fetch, devolverá lo que se llama promesa, y en segundo lugar, porque la solicitud es lo que se llama asíncrona. No te preocupes si no entiendes lo que significan ninguno de estos conceptos en este momento, vamos a cubrir lo que ambos significan en el siguiente video. 45. Código asíncrono y promesas: En el último video, conseguimos algunos datos usando la API de iTunes. Hemos sacado los mismos datos dos veces en una consola. Uno de inmediato, y luego un segundo después de dos segundos. Esto nos dio dos resultados diferentes, que son ambas Promesas. Echaremos un vistazo a cuáles son muy pronto. El primero que podemos ver tuvo resultado de pendiente y luego el posterior tiene una respuesta de resuelta. Para entender por qué esto está sucediendo en primer lugar, y por qué necesitamos promesas, primero necesitamos entender qué es el código asincrónico. Algunos lenguajes de programación, como PHP son lo contrario. PHP se clasifica como sincrónico Esto significa que cuando nuestro código está listo se lee de la parte superior del archivo a la parte inferior. código sincrónico como PHP comenzará en la primera línea. Posteriormente ejecutará este código en la primera línea y luego sólo pasará a la siguiente línea cuando la operación haya terminado. Básicamente, el programa se detendrá y esperará a que termine la operación antes de pasar a la siguiente línea de código. No obstante, mucho código JavaScript funciona de forma asíncrona. Toma nuestro fetch por ejemplo. Si la solicitud de los datos tarda mucho tiempo en volver a nosotros, estaremos bloqueando que el resto del código ejecute mientras esperamos a que vuelvan estos datos. En cambio, lo que sucederá es que esta línea de código seguirá ejecutándose, y antes de esperar la respuesta, pasará entonces a la siguiente línea del programa o script, por lo tanto no bloqueando el resto del código. Ahora hemos enviado la solicitud de este dato. Estamos esperando una respuesta en algún momento en el futuro. No sabemos cuándo nos serán devueltos estos datos, o si los datos de iTunes volverán en absoluto. Para este caso, tenemos lo que se llama Promesas, y esto es lo que nos volvió de antes. Cuando miramos fetch en el último video, enviamos la solicitud de nuestros datos. De inmediato ejecutamos un registro de consola y esto tuvo el resultado de pendiente, que se puede ver aquí. Esto se debe a que el programa ejecutó el registro de la consola antes de que se devolvieran los datos. Después de esperar dos segundos, nuestros datos deben haber sido devueltos porque este registro de consola se resolvió entonces. Pasado a nuestro código en Visual Studio. Cerremos esta barra lateral hacia abajo. Echemos un vistazo a cómo podemos manejar esta Promesa. En primer lugar, vamos a quitar estos registros de consola y limpiar nuestro código, dejando solo el fetch en la parte superior. También vamos a quitar esta constante aquí, añadir un punto y coma al final. Una promesa es sólo una forma de declarar lo que queremos hacer cuando eventualmente se devuelvan los datos. Cuando los datos han sido devueltos con éxito, ejecutamos el código dentro de.then. Dot entonces se puede encadenar al final, así como esto. O para hacerlo más legible, a menudo lo ves en su propia línea. Añadamos entrar y soltar esto a la línea de abajo. Entonces dentro de.entonces, podemos agregar una función que desea ejecutar. Voy a agregar una función de flecha ES6, así como esta. Esto funciona igual que funciones que ya hemos visto. Toma como argumento la respuesta dentro de estos paréntesis. Agrega respuesta dentro de aquí. El nombre depende de nosotros, pero la respuesta es bastante descriptiva. Voy a dejarlo así. La respuesta es solo una respuesta HTTP, por lo tanto, necesitamos extraer los datos de Json del cuerpo de respuesta usando el método.JSON. Dentro de aquí, di respuesta.Json. Entonces podemos seguir adelante y devolver estos datos de Json. O alternativamente, al usar funciones de flecha, si la función solo tiene una declaración como aquí, incluso podemos eliminar la palabra clave return y también las llaves. Agrega esto a una sola línea, así que vamos a quitar las llaves. Vamos a eliminar la palabra clave return y luego tirar de esta respuesta a la misma línea. Esto hará exactamente lo mismo pero mantener nuestro código un poco más limpio. También podemos encadenar como muchos.luego casos al final como nos guste. Entonces agreguemos uno más, que se ejecutará después de que el primero haya terminado, y luego tomemos los datos de Json para que podamos hacer algo con él. Agrega un segundo.entonces, que toma en una función. Nuevamente, esta va a ser una función de flecha ES6 la cual toma los datos. Este dato se le pasa desde la línea anterior, que es el Json extraído. Está bien. De vuelta a nuestra función, entonces podemos en la consola el registro de los datos de nuestra API, Console.log y luego pasar nuestros datos. Una última cosa antes de pasar a la consola, necesitamos añadir un término de búsqueda, así que arriba en la parte superior. Recuerda desde antes necesitamos añadir un término de búsqueda, igual que mirábamos dentro del navegador. Vayamos por Beyonce una vez más. Por supuesto puedes cambiarlo para que sea cualquier cosa que prefieras. Dale eso, “Guardar” y luego vuelve a cargar el navegador. Está bien. Ahora tenemos nuestra respuesta con los 50 resultados. Podríamos ver devuelto a nosotros tenemos una matriz de resultados con 50 valores dentro de ahí. Adelante y abramos esto y luego abrimos nuestros resultados. Podemos ver los datos individuales de cada canción. Nuevamente, al igual que antes cuando abramos esto, podemos ver toda la información de artistas y también algunas ilustraciones que llegaremos a usar en nuestra aplicación pronto. Si queremos estrechar esto y sólo mostrar los resultados dentro de la consola, podemos decir data.results. Dale ese “Guardar” y luego refresca. Ahora solo tenemos nuestros 50 resultados. Entonces también voy a eliminar esta cadena de consulta desde dentro del fetch. Corta esto y luego vamos a crear una constante llamada URL. Tener en tienda esta cadena de consulta dentro de aquí. Entonces todo lo que necesitamos hacer es pasar la URL como nuestra variable y luego refrescar y comprobar que todo sigue funcionando bien. Está bien. Genial. Ahí están nuestros 50 resultados, que son los mismos que antes. Todo sigue funcionando bien. sección el.then de la promesa maneja qué hacer cuando se resuelve una respuesta. Si tenemos un error y se rechaza la respuesta, podemos seguir adelante y encadenar una.catch al final para manejar este resultado. Justo en la parte inferior podemos decir.catch. Esta es una función que va a tomar en el error, y vamos a crear esto como una función de flecha ES6, que simplemente hace un registro de consola. Entonces aquí dentro podemos decir, vamos por petición falla, luego una coma. Entonces después de aquí podemos pasar nuestro mensaje de error así. Si le damos a eso un ahorro. Si recargamos el navegador, no vemos ninguna diferencia porque la solicitud está funcionando. No estamos consiguiendo que nos pasen ningún error. No obstante, si creamos un error de tipeo en la URL, así que eliminemos la e de ahí y luego recarguemos. Ahora vemos que nuestro mensaje de error ha sido captado con la declaración.catch. Esto está ejecutando nuestros textos de solicitud falla. Entonces tenemos nuestro error más allá de la función. Está bien. Volvamos a Visual Studio y reinstemos nuestra URL, comprobemos que todo está funcionando bien y estamos bien para ir. Genial. Ahora tenemos nuestros datos los cuales estamos sacando de iTunes y en el siguiente video, comenzaremos a utilizar estos datos para crear nuestros elementos, para mostrar nuestras canciones en el navegador. 46. Mapa a través de los resultados: Ahora tenemos los datos que necesitamos para crear nuestra canción escuchando dentro del contenedor principal del archivo índice. Vamos al index.html, dentro de esta sección principal hemos dejado en su lugar una canción escuchando y podemos usar esto como guía. Vamos a estar recorriendo todos los resultados que obtenemos de nuestra API para luego construir una nueva sección de artículos igual que esta para cada resultado de canción. Crearemos todos estos mismos elementos usando JavaScript dentro de la sección de depuración final de nuestra premisa. Por lo tanto, sabemos que tenemos los datos con los que necesitamos trabajar así que comencemos comentando este log de consola desde el script. Bajemos a aquí, comentemos esto y luego podremos almacenar datos.results, dentro de la constante. Vamos a copiar data.results de aquí y establecemos una constante llamada artistas y pongamos esto en data.results. Ahora podemos seguir adelante y usar mapa para recorrer cada uno de estos resultados. Sopla aquí. Otra vez todavía dentro de la sección final.end vamos a devolver artistas, que es nuestra constante justo aquí.map. Ahora por cada resultado que obtenemos queremos construir una nueva canción. Para ello necesitamos crear nuestros elementos. De vuelta en el HTML, que hemos visto antes. En primer lugar necesitamos crear un artículo que sea un rapero, necesitamos crear un elemento de imagen, necesitamos dos conjuntos de elementos P, uno para el nombre del artista y otro para el nombre de la canción. Entonces también necesitamos construir un reproductor de audio, que va a reproducir los primeros 30 segundos de cada canción. Sabemos cómo hacer ya es mediante el uso de crea elementos. Empecemos haciendo esto ahora en el guión. A un lado de nuestro mapa, podemos decir const. Empecemos primero con el artículo, respondamos esto para ser document.CreateElement y los elementos que queremos crear es el artículo. Vamos a duplicar esto y éste va a ser el artista y esta vez van a ser elementos P. Un pequeño truco cuando estamos creando múltiples variables es en lugar de agregar la palabra clave constante cada vez, en su lugar podemos eliminar esto y simplemente separarlas con una coma. Igual que eso. Entonces debajo de nuestros artistas podemos copiar esto, pegarlo de nuevo y éste va a ser para la canción. El nombre de la canción también es un elemento P también. Ahora esa es nuestra canción [inaudible], que se va a importar la imagen, y para esto causará una vez que los elementos de imagen solo hacen como img. Ahora después de la imagen, también necesitamos crear nuestros elementos de audio. Entonces, por último, también queremos crear un elemento fuente y esta va a ser la fuente de audio la cual se pasa al reproductor de audio con la ruta de archivo de la música que vamos a querer reproducir. Entonces para el final, llamemos a esta AudioSource, y esto puede ser fuente, y con la coma desde los extremos. Ahora tenemos nuestros seis elementos creados usando JavaScript y almacenados dentro de las constantes. Ahora podemos establecer el HTML interno para estos elementos de texto. Aquí tenemos dos elementos de texto diferentes. Queremos establecer el HTML interno. También queremos establecer la fuente para la imagen y los elementos de audio también. Hagámoslo justo debajo de nuestras constantes. Ahora por cada resultado que recuperamos, la información se almacena dentro de esta variable de resultado. En primer lugar, hagamos una consola rápida. log y echa un vistazo a la información que se nos devuelve y se almacena dentro de los resultados. Consigue eso guardado y luego pasa a la consola. Ahora podemos ver por cada canción podemos abrir esto y conocer toda la información que se asocia a cada canción. Empezando por el artista queremos agarrar el nombre del artista, si abrimos este objeto, podemos ver que el nombre del artista se almacena en una propiedad llamada nombre del artista. Si pudiera salir de esta consola. inicia sesión solo por un momento puede que necesites esto pronto. Empecemos por seleccionar al artista, así artistas. HTML interno. Dentro de estos elementos P vamos a añadir el nombre del artista. Sabemos que podemos acceder a esto con resultado y luego. nombre del artista, que has visto dentro de la consola desde aquí. A continuación también podemos agregar al HTML interno para el nombre de la canción, que de nuevo está entre los elementos P almacenados dentro de su constante llamada canción, por lo que canción. HTML interno esta vez es igual a resultado. Si volvemos al navegador queremos agarrar el nombre de la canción, así que si nos desplazamos hacia abajo podemos ver este nombre de la canción se almacena dentro del nombre de la pista. Ese nombre de pista dentro de aquí entonces la fuente de la imagen, por lo que img.source es igual a resultado. Voy a agarrar la obra de arte asociada a la canción, así que vamos por ArtworkUrl100, y esto se relaciona con el tamaño, así que este tiene un ancho de 100 píxeles. Yo sólo voy a copiar esto, y pegarlo en. Ya mencioné antes que vamos a tener un reproductor de audio y este reproductor de audio va a reproducir una vista previa, que son los primeros 30 segundos de la canción. Podemos encontrar esta vista previa de audio si nos desplazamos hacia abajo para previsualizar URL. Desplácese hacia abajo. Tenemos interés aquí. que este es el enlace que se pasa de Itunes a la vista previa que quieres jugar. Podemos agregar esta URL de vista previa a la AudioSource. Hagámoslo ahora, por lo que AudioSource y luego en.source va a ser igual a resultado como hemos visto antes. Esta es la URL de vista previa, también cuando se trabaja con elementos de audio HTML para que esto aparezca en la pantalla también necesitamos agregar el atributo controles también de lo contrario no veremos nada en lo que hacer clic en la pantalla. Para ello debajo de la AudioSource podemos seleccionar el reproductor de audio, y luego podemos usar.setAttribute. El nombre del atributo que queremos agregar es controles, y esto no tiene un valor, por lo que puede dejar una cadena vacía. Ahora podemos contestar estos elementos para ser un niño, elementos del artículo más bien igual que tenemos con el ejemplo justo aquí, así que vuelve a nuestro guión. Tenemos que anexar a nuestros artistas, nuestra imagen, nuestra canción y también el audio para ser un niño del artículo. Vamos a bajar. También puedo eliminar este console.log. Tenemos nuestro artículo almacenado en la parte superior aquí, que está en elementos del artículo. Todos estos elementos van a ser hijos de este artículo. Debajo aquí podemos decir artículo.AppendChild, y luego dentro de aquí podemos empezar a pasar nuestros elementos hijos en primer lugar está la imagen, y peguemos esto en tres veces más. También queremos sumar al artista, la canción y también los elementos de audio. Entonces finalmente también necesitamos anexar la AudioSource como hijo de los elementos de audio. Seleccionemos el audio.AppendChild, y este va a ser el AudioSource. Agrega esto en. Genial. Ahora tenemos un artículo con todos los elementos infantiles en su interior. Ahora tenemos que seguir adelante, y agregar este artículo al contenedor principal. El contenedor principal es esta sección principal aquí con las canciones ideales y esto va a contener todos nuestros artículos, los cuales tenemos en los resultados. Volver a nuestros guiones. Para ello necesitamos almacenar toda esta referencia a la sección principal dentro de una constante. Hagámoslo en la parte superior. Justo después de nuestro mapa podemos decir const, y podemos llamarlo contenedor de canciones, y poner esto en documents.geteementsbyId, el Id que queremos agarrar era canciones, así que emparejemos esto con esta sección aquí. Genial. Ahora tendremos el SongContainer solo queremos agregar todos estos artículos a este contenedor, por lo que hasta la sección AppendChild podemos seleccionar nuevamente el SongContainer. AppendChild, y luego pasar en cada artículo disponible. Ahora si todo ha ido bien, deberíamos ver nuestros artículos de canción para cada canción devuelta por la API, conseguir eso guardado y cerrar esto debajo del navegador y ahí vamos ahora vemos nuestros datos de canciones desde la API. También podemos quitar nuestra demo uno de antes que debería ser este artículo desde dentro de aquí traer esto arriba luego recargar. Genial. Veamos cómo se ve esto dentro del desarrollador Herramientas. Haga clic derecho e inspeccione. Aquí tenemos la sección principal de antes con el Id de canciones, si abrimos anidados por dentro aquí tenemos todos nuestros artículos para cada canción la cual había sido devuelta de nuestra API. Podemos abrir nuestro artículo y ver todos los elementos que se agregan usando un niño pluma. En primer lugar, tenemos la imagen, tenemos los elementos P con el nombre del artista, elementos P con el título de la canción y después tenemos nuestro reproductor de audio. Si estamos abriendo anidado por dentro es el AudioSource, que agregamos volver al guión agregamos este AudioSource como el niño a los elementos de audio y eso es lo que vemos justo aquí. También podemos ver los atributos de controles a los que se añadieron. Si eliminamos esto, volvamos a subir comentando el setAttributes, y luego recargar, podemos ver que no tenemos ningún reproductor de audio ahora en la pantalla. Debería mover esto y añadir esto de nuevo. Bien. Enhorabuena si todo esto está funcionando para ti. Has sacado con éxito los datos de API de una fuente externa esto es una gran parte de nuestros proyectos que ahora se realizan. En el siguiente video, haremos uso de esta barra de búsqueda, por lo que podríamos escribir nuestro término de búsqueda para permitirnos buscar diferentes canciones, en lugar de codificar duro en un término de búsqueda en la URL que va aquí. 47. Creación de nuestra consulta de búsqueda: Ahora tenemos una lista de canciones que se muestran en la pantalla, cual se está sacando todas de nuestros datos API. Por el momento aunque estamos usando una cadena de consulta estática, es decir, Escribimos el término de búsqueda en la URL justo en la parte superior aquí. Esto no es lo que queremos usar. Las cosas serán mucho mejores si pudiéramos escribir un término de búsqueda dentro de la barra de búsqueda, dentro de una página web. Para ello, vayamos a nuestros scripts.jsfFile y primero necesitamos establecer una variable para almacenar nuestro término de búsqueda en. Vayamos a la parte superior de la página aquí. Hacer poco espacio, y usamos un let, yo llamo a este término. Para empezar, vamos a configurar esto para que sea una cadena vacía. Entonces siguiente parada vamos a crear una función que va a ser responsable actualizar el término de búsqueda cada vez que un usuario escriba en el campo de entrada. Término de actualización constante y esto va a ser una función de flecha ES-6 y Dentro aquí podemos actualizar este término de búsqueda Vamos a actualizar un término para ser igual a document.getElementById. El ID quiere agarrar es esta entrada desde arriba. Bajemos a nuestros insumos de búsqueda y tiene un ID de entradas de búsqueda por lo que por supuesto podemos usar esto más en nuestro elemento get por ID. Añadamos entradas de búsqueda dentro de aquí. Al igual que eso y luego queremos agarrar el valor usando.value. Vamos a seguir adelante y figura esta función muy pronto cuando se haga clic en el botón de búsqueda que acaba de encenderse aquí. Pero por ahora podemos agregar una sentencia if para comprobar si el usuario realmente ha ingresado algo dentro de estas entradas. Para empezar con este término, podemos agregar una declaración if. Vamos a comprobar si no hay término. O el término es igual a una cadena vacía. El usuario no ha ingresado nada en las entradas. Podemos agregar una alerta con algún texto que diga: “Por favor, ingrese un término de búsqueda o-k.” En primer lugar estamos comprobando si el usuario realmente ha ingresado algo. Entonces podemos agregar una declaración else justo después de esto. Esta declaración else se va a ejecutar una vez que nuestro usuario haya escrito un término de búsqueda, sabrá que todo el código de abajo está funcionando y tirando de cualquier dato que necesitemos. Por lo tanto, podemos cortar todo el camino hacia abajo de nuestras constantes de URL. Cerremos todo esto, hasta el fondo. Bueno que con un Command o Control x dentro de las llaves para la declaración else, pegue esto en y solo endeudemos. Hagámoslo un poco más pequeño e intenso, toda la sección a partir de cuatro. Ahora todo esto está dentro, está en la sección “else”. Todo esto debería correr cuando escribimos algo en la barra de búsqueda. Ahora toda nuestra facción de los datos están construyendo nuestros artículos está ahora en la sección else. Ahora tenemos este término de búsqueda almacenado en la variable en la parte superior. Ahora podemos pasar esto a nuestra URL. Quitar el término o beyonce de aquí. Podemos agregar nuestras cadenas de consulta, que era un símbolo $, las llaves y m plus en nuestro término. Para que esto funcione, necesitamos eliminar estas cotizaciones desde el principio y el final y sustituirlas por back-ticks. Entonces, por último, para ejecutar esta función, necesitamos agregar un oyente de eventos al botón. En nuestro index.html, este es el botón que va a desencadenar nuestra búsqueda. Justo abajo en la parte inferior de nuestro scripts.js, podemos agregar una constante de botón de búsqueda o buscar Btn, igual a documentos. Nuestro selector de consultas. Queremos seleccionar el botón y luego podemos agregar un oyente de eventos al botón Buscar. Buscar BTN.AddeventListener. Queremos al oyente para un evento click y luego queremos ejecutar la función en la parte superior, que se llama término de actualización, que acaba de aquí. Pasemos en actualización Término como la devolución de llamada. Creo que esto ahora debería ser todo lo que necesitamos para que las cosas funcionen. Acude al navegador y podemos echar un vistazo a esto. Recarga y ahora ve que nuestras canciones se han eliminado porque ya no tenemos un término de búsqueda. Vamos a intentar agregar un término de búsqueda. Vayamos por Ed Sheeran. Busquemos. Parece que tenemos un problema en alguna parte. Volvamos al código. De hecho, vamos a revisar la consola y no hay flechas dentro de ahí echemos un vistazo así que vaya botón de búsqueda, que se activa y actualice alguna URL. De hecho, él sólo agregaría en el nombre del término de búsqueda, como lo hicimos antes de que tengamos que añadir un término es igual y paso esto, así como eso, nos dan guardar luego recargar y probar esto una vez más, it Buscar y allá vamos. Ahí están nuestros resultados para Ed Sheeran y sólo intentemos uno más la búsqueda y podemos ver que hay un problema. Todavía tenemos los resultados de Ed Sheeran como antes. Pero si nos desplazamos hacia abajo, hasta el final de las lunas de Ed Sheeran, ahora podemos ver que las ediciones Queen se han sumado hasta el final. Si buscas más de una cosa, los resultados se agregan al final de los últimos resultados en lugar reemplazar lo que ya hay y esto es algo que arreglará en el siguiente video. 48. Mejora de nuestra búsqueda: En el último video, hicimos grandes avances al cablear nuestro botón de búsqueda en la parte superior de nuestro sitio web. También incluimos un pequeño problema. Esto es cuando se realiza un segundo término de búsqueda, en lugar de reemplazar los resultados originales, agregaron al final. Esto es lo que estaremos arreglando en este video. Todas nuestras canciones, nuestros elementos infantiles del contenedor de canciones. Por lo que necesitamos comprobar si el contenedor primero, tiene canciones. Si lo hace entonces necesitamos eliminarlos antes de investigar. Entonces empecemos moviendo nuestra referencia de contenedor de canciones a la parte superior de nuestro guión. Entonces volvamos a nuestro script.js. y luego si te desplazas hacia abajo a nuestro contenedor de canciones, que está justo aquí, recortemos esto de nuestro mapa. Entonces podemos pegar esto en la parte superior de nuestros guiones. Ahora pasemos a lo más alto de nuestros guiones. Esto le dará a esta variable un alcance global. Medio puede acceder a él en múltiples ubicaciones. Entonces ahora si nos desplazamos hacia abajo a nuestra sección else, que es esta sección aquí, antes de ejecutar nuestra consulta de búsqueda. En primer lugar, vamos a ejecutar un bucle while que comprobará si el contenedor de canciones tiene un elemento hijo. Entonces en la parte superior de la sección else aquí, digamos mientras la canción contenedor pensamientos primer hijo. Por lo que comprobará si el contenedor de canciones tiene algún elemento hijo. Si lo hace, quieres seguir adelante y quitarlo. Entonces podemos decir contenedor de canciones, niño removido, así como eso. Entonces dentro niño removido, necesitamos pasar en el contenedor de canción.primerohijo. lo que como es un bucle recorrerá nuestro contenedor de canciones y cada uno hay un elemento hijo, irá adelante y lo retirará y así no quedará ningún elemento hijo en el contenedor. Una vez que el contenedor está vacío, el código puede pasar a hacer una nueva búsqueda. Entonces vamos a darle a esto una oportunidad en el navegador, darle a eso un guardado, y luego recargar. Haré la misma búsqueda que antes, Ed Sheeran. De acuerdo, así que ahora hagamos una segunda búsqueda de Queen. Se busca y ahora nuestros resultados de Queen reemplazarán a la búsqueda original. Genial, así que ahora terminemos esta cadena de consulta agregando algunos parámetros adicionales. Primero estableciendo los medios de comunicación para que sean música. Entonces vayamos a la URL, que está justo aquí. Entonces después del signo de interrogación, podemos decir medios de la música. No olvides agregar un ampersand después de esto para que también busque el término de búsqueda. Por lo que esto ahora restringirá los resultados de búsqueda para que sean solo música en lugar de cualquier otro tipo de medios, como libros electrónicos o películas. Recuerda, todas estas opciones están disponibles en la documentación de iTunes, que miramos antes. Además, esta es tu aplicación, así que siéntete libre de cambiarla para que sea una búsqueda de películas, una búsqueda de podcast, o cualquier otro tipo de medio que prefieras. Por último, voy a restringir el número de resultados de búsqueda a los 10. De vuelta al signo de interrogación, entonces diremos límite igual a 10 en los ampersands, dale a eso un ahorro. Recarga el navegador, agrega una búsqueda. Dale una oportunidad a eso, así que ahora tenemos 10 resultados. Hit search y allá vamos, ahora tenemos 10 resultados, todos restringidos al tipo mediático de música. Escribe nuestra canción, encuentra que la app ya está casi completa pero hay un toque final que necesitamos agregar. Pasamos en el audio al reproductor de audio para darnos esta vista previa de la canción. Entonces si hacemos click en esto, ahora vemos que la vista previa de audio está funcionando. Entonces todo esto funciona bien, pero si hacemos clic en una segunda vista previa de audio vemos que ahora se están reproduciendo las canciones de post al mismo tiempo. En cambio, lo que queremos es la capacidad de hacer clic en una vista previa de audio y luego es pausar cualquier otro reproductor de audio que esté reproduciendo actualmente. Esto es lo último que necesitamos cuidar. Cuarto es la aplicación y lo veremos en el siguiente video. 49. Previsualización de audio, captura y propagación: Bienvenido de nuevo. En el último video, mencionamos que queremos pausar cualquier reproductor de audio cuando hacemos clic en un “Nuevo”. Esto evitará múltiples previsualizaciones todas jugando al mismo tiempo. Para ello, abajo en la parte inferior de nuestro archivo script.js. Vayamos directo hasta el fondo. Vamos a escuchar los eventos de teatro en los documentos. En lugar de adDevENTListener a uno de los botones individuales de nuestro reproductor de audio. En cambio, vamos a añadir esto a los documentos. Es porque hay múltiples botones de juego todos al mismo tiempo. Tiene sentido agregar esto al documento en lugar de cada botón individual. Esto enumerará ahora si cuando la reproducción haya comenzado en elementos de audio y luego se ejecutará función. Empecemos seleccionando el “document.AddeventListener”. El oyente de eventos que queremos escuchar son los eventos de play, que se activarán cada vez que el audio comience a reproducirse. Entonces vamos a activar una función que va a tomar en los eventos. Esta será una función de flecha ES 6, que se ejecutará cada vez que se haya reproducido un audio. Dentro de esta función, primero queremos almacenar todos nuestros elementos de audio en una constante. También una constante llamada audio. Entonces set es en document.getElements BytagName. El nombre de tipo que queremos seleccionar es la etiqueta de audio. Esto seleccionará todos los reproductores de audio en la pantalla y los almacenará dentro de una constante llamada audio. Después queremos recorrer todas estas instancias de audio y comprobar si ya se está reproduciendo alguna. Para ello, podemos crear un bucle for. Por ir a establecer el valor inicial de i para ser igual a cero. Queremos la raíz cuadrada y mientras yo es menor que el audio.Longitud, y luego i plus. Ahora dentro de este bucle, vamos a querer hacer, queremos comprobar si el reproductor de audio, que actualmente se está reproduciendo es igual al event.target.. Ahora dentro de aquí voy a crear una declaración if. Simplemente escribiremos esto primero y luego te explicaremos para que se dé cada camino. Si el audio i no es igual a los eventos, por lo que los objetivos y abre las llaves. Cuando estamos dentro del navegador y hacemos clic en “Play” en cualquiera de las canciones. La referencia al reproductor de audio, que hemos hecho clic estará disponible como información dentro de los eventos. Podemos seleccionar esto con event.target, que miramos en el pasado. De vuelta en nuestro bucle, comprobamos si cada uno de los elementos de audio individuales no es igual al event.target. Por lo tanto tenemos filtrando hacia abajo los reproductores de audio que no tenían el que hemos clicado. Cualquier cosa que corremos dentro del bucle se aplicará a todos los reproductores de audio excepto el que queramos. Cualquier reproductor de audio que se esté reproduciendo actualmente con audio i, podemos set.pause. Supongamos que todos los reproductores de audio, que no son los que hemos hecho clic. Por lo tanto, sólo uno de estos reproductores de audio reproduciendo al mismo tiempo. Si damos el guardar y pasamos al navegador, se recargará y realizará una búsqueda. Haga clic en “Buscar”, y hago clic en cualquiera de estos. Ahora bien, si hacemos click en dos de las previsualizaciones de audio, podemos ver que esto no está funcionando todavía. Es para trabajar. Lo último que tenemos que hacer es agregar un tercer parámetro al oyente de eventos. Volvamos a nuestra función. Entonces a la derecha hacia abajo al final, es después del corsé rizado final, vamos a añadir un tercer parámetro de true. Para entender qué va a hacer esto. Personalmente para mirar algo llamado captura de eventos y burbujeo, verás una representación arbolada del camino desde la ventana hasta el reproductor de audio. Recuerda temprano miramos cómo recibimos mucha información sobre los eventos cuando se activa. Tal como el objetivo del evento, que se levanta la vista antes, e incluso cosas como la posición X e Y del ratón. Bueno, no sólo recibimos información sobre los elementos que cinco eventos, como un reproductor de audio? También recibimos información de todos los eventos en el árbol. También lo hará. Cuando el evento se activa, comienza en la parte superior del árbol, en los objetos de ventana y crea un camino todo el camino hacia abajo. A esto se le llama la fase de captura. Después va todo el camino de vuelta a la cima. Y a esto se le llama la fase burbujeante. Por el ejemplo que acabamos de ver en el proyecto, tocamos a nuestro oyente de eventos el documento por una buena razón. Si agregáramos esto al reproductor de audio individual, necesitaríamos un nuevo oyente de eventos para cada reproductor de audio en nuestro proyecto. Añadirlo al documento funciona mejor porque sólo necesitamos agregarlo una vez. Entonces todo el audio que se reproduce debajo de él en el árbol te avisará debido a que esta información de eventos se pasa arriba y abajo. En primer lugar, hay un pequeño problema. Ahora bien, algunos eventos en realidad no burbujean. Contra ella, el evento de juego es uno de estos que no. Para resolver este pequeño problema, hemos agregado el valor de true como tercer parámetro aquí. Esto ejecutará el manejador de eventos en la fase de captura. De forma predeterminada, esto se establece en false, que ejecuta el manejador de eventos en la fase de burbujeo. Como acabamos de mencionar, los eventos de juego no pueden burbujear. Ahora, tendremos el tercer valor de verdad. Vamos a darle a esto un guardado y luego ir al navegador y realizar una búsqueda. Ahora sigamos adelante y pinchemos en dos de las “Previsualizaciones de audio”. Genial. Ahora, hacemos click en una segunda “Vista previa de audio”. Todos los reproductores de audio existentes se detendrán. Tal vez podamos entenderlo mejor registrando eventos en la consola. Volver a nuestro guión. Justo debajo de la pausa, hagamos un registro de consola. Eso es log el valor de los eventos, que se pasa justo aquí. Después pasa al navegador. Entonces abramos la consola. Haga clic derecho en “Inspeccionar”, abra la pestaña de la consola. Entonces hagamos click en uno de los “reproductores de audio”. En cuanto archivamos uno de los reproductores de audio, podemos ver dentro de la consola tenemos nueve eventos oyentes archivados 1,2,3,4,5,6,7,8,9. Nos dan nueve porque sólo recuperamos los que, en los que no hemos hecho clic. Recuerda, restringió el número de canciones que nos regresaron a ser 10. Hemos hecho clic en “Uno” y luego obtenemos los nueve restantes en la consola. Porque comprobamos en tamaño del bucle. Si el reproductor de audio actual no es el evento u objetivo, i e, el en el que has hecho clic. Si abres uno de estos. Volver a la consola y luego dar click en el pequeño desplegable aquí abajo. Podemos ver, como mencioné antes, que los eventos de la burbuja se ponen en falso. Por lo tanto, el evento de juego no burbujeará. Excelente y Bien hecho para terminar estos proyectos, trabajar con fuentes de datos externas como API y bases de datos externas, que veremos pronto, realmente abre las posibilidades de lo que podemos hacer con nuestros proyectos. Adiós por ahora, y te veré en el siguiente apartado. 50. Gracias: Enhorabuena por llegar al final de este curso. Espero que ahora estés mucho más cómodo usando JavaScript y trabajando con datos API. Empezamos desde el principio, echamos un vistazo a los conceptos básicos de JavaScript, como declaraciones FL, operadores, cadenas , y variables, luego pasamos a cómo podemos manipular el DOM para agregar interactividad a nuestros proyectos, funciones, y cómo podríamos trabajar con eventos. Cubrimos matrices, diferentes formas de bucle sobre datos y objetos, todo mientras reforzamos lo que hemos aprendido con algunos proyectos divertidos. Por último, comenzamos las cosas trabajando con API, promesas y buscando datos, todo mientras construimos una aplicación fuerte, encuentra o todo lo que has aprendido en la práctica. Recuerda que esta es solo la tercera parte de este curso, así que asegúrate de revisar la siguiente parte para obtener un conocimiento más profundo y aprender todo lo que necesitas saber para construir aplicaciones Fullstack. Adiós por ahora, y te veo en la siguiente parte de este curso. 51. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúra