Mejora tu HTML: una introducción divertida a Alpine.js

1. Introducción y descripción general: Hola, y bienvenidos a mi curso. Vamos a sumergirnos directamente con una visión general del curso y por qué incluso deberías molestarte con alpine dot js. ¿Por qué pin dot js? Esa es una pregunta rápida de responder. ¿Por qué usamos scripts en páginas web para dar vida a las páginas web estáticas Sin scripts, una página web generalmente no es muy interactiva, no es muy dinámica y no es muy fácil de usar. Entonces el objetivo es crear elementos interactivos, tener un estado dinámico, tener enlace de datos para que los cambios en los datos sean inmediatamente visibles en el HTML, mejorar la experiencia del usuario y simplemente poder programar en HTML, en este caso, con la ayuda de alpine Jaz porque en realidad es posible usar Alpine Jaz exclusivamente en Aunque no vamos a hacer eso aquí del todo en este curso, es posible y para hacer dinámicas pequeñas cosas en la página web, es una excelente manera de dar vida rápida y fácilmente a las páginas web. ¿Qué es la Gs alpina? Alpine Gs es un framework JavaScript ligero. Como dije, el código mínimo es el lema aquí, lo que significa que puedes lograr mucho con muy poco código y puedes extender la funcionalidad HML directamente en el código HML usando atributos alpinos Js y luego última instancia también mini scripts que luego puedes escribir directamente en ¿Qué puedes esperar de este curso? En este curso se cubrirán los conceptos básicos de alpine dot js. Dado que este es un curso corto, no se tratarán temas más avanzados, pero aprenderás a definir componentes en Alpine js habilitando el enlace de datos o la sincronización de estados de JavaScript a HTML. Entonces por supuesto, la dinámica de mostrar y ocultar elementos y, naturalmente, también el procesamiento de las entradas de los usuarios, lo cual es, por supuesto, esencial para asegurar una interactividad adecuada Eso es más o menos para qué esperar aquí. Como dije, un curso breve y conciso, pero aquí aprendes los conceptos básicos de Alpine JS y cómo puedes empezar a hacer que tus páginas web sean más interactivas, más dinámicas, y todo eso con relativamente poco esfuerzo. 2. ¿Por qué y cómo?: En este video, vamos a echar un vistazo más de cerca a Alpine JS, y lo haremos directamente en el sitio web de alpine dot js. Lo puedes encontrar en esta dirección alpinejs punto Dev. Aquí puedes ver el logo y una breve descripción, tu ligero framework de JavaScript y el botón G Started. Pero echemos un vistazo más de cerca a esto aquí. ¿De qué se trata Alpine GS? Bueno, para decirlo simplemente, es un nuevo framework ligero, JavaScript framework, pero lo especial de ello queda claro en esta breve sección HTML. Se incluye el guión. Es sólo un archivo JavaScript que puedes obtener de esta dirección o de otros lugares también. También puedes descargarla desde aquí y ponerla en tu propio servidor. Pero lo importante es que una vez que lo hayas hecho y lo hayas incluido aquí, puedes usar atributos como este aquí en HTML. Eso es genial porque esencialmente puedes operar solo dentro de HTML. No haremos esto exclusivamente en este curso porque hay razones prácticas por las que quizás no quieras escribir todo en estos atributos o al menos porque menudo es más agradable externalizar esto a un archivo de script real Son diversos los argumentos a favor de esto, incluyendo que es más fácil formatear y editar. La finalización automática también está disponible en los archivos de script correspondientes y no necesariamente aquí en el HTML. También puedes escribir todo en mecanografiado, transpilot e incluirlo aquí a través etiqueta Script sin dejar de usar Eso también lo veremos. Lo importante aquí son estos atributos. Esta es una taquigrafía para los manejadores de eventos, por ejemplo, y simplemente puede escribirlos como atributos en cualquier elemento en HML Entonces puedes escribir código JavaScript dentro de esos atributos. También puede hacerlo con el atributo onclick. Por ejemplo, existe en HTML normal. Se pueden escribir expresiones JavaScript o código también allí. Pero lo especial aquí es que puedes almacenar un estado o datos aquí a los que luego puedes acceder y puedes implementar fácilmente datos de dos vías vinculando esto. Mira cómo funciona eso en los próximos videos, pero aquí ya puedes ver cómo programar con alpine dot js. Tienes que establecer estos atributos. Ya te puedo decir que este dato X es lo que es crucial para marcar un componente o elemento como componente alpino de Jaz En el interior, puede especificar un objeto. Este objeto está entonces disponible como un estado dentro de este componente. Esto hace que todo sea un componente de Jazz alpino. No es tan versátil como Rx o view JS, pero para una interactividad y dinámica limitadas, puedes integrar Alpine JS muy fácilmente e incluso puedes implementar cosas más complejas con él Si te interesa la documentación o cómo empezar, puedes leerla en esta página web, pero de todas formas la revisaremos en nuestro proyecto. Estamos construyendo una pequeña aplicación de cuestionario que un usuario puede completar. Habrá una pequeña evaluación al final, y es básicamente una aplicación interactiva donde se evalúa la entrada del usuario y las cosas suceden en consecuencia, que luego se renderizan en el HTML. Empezamos eso en el siguiente video. 3. Primer proyecto: Va a comenzar creando un nuevo proyecto usando NPM crear TI. Ahora deberías ir a una terminal. Estoy en la terminal dentro un código de Visual Studio en el directorio padre, donde queremos crear nuestro proyecto. se creará un subdirectorio Aquí se creará un subdirectorio y el nuevo proyecto residirá dentro de ese Como requisito previo, naturalmente no necesitarás Jazz, claro, que ya he mencionado antes, y necesitas instalarlo de antemano, por supuesto. Anna, tengo código de estudio visual aquí y puedes usar ese o cualquier otro IDE que prefieras. Eso depende completamente de ti. Voy a estar usando código de estudio visual aquí en este curso, y voy a demostrar todo usando este IDE. Empecemos. Estoy en la terminal, como dije, en la parentactry, y ahora escribimos en NPM Si no tienes instalado Jazz, esto ya debería funcionar. Es posible que te pregunten si quieres instalar un determinado paquete. Ya lo hice, así que no es necesario para mí. Por lo tanto, me pedirán directamente el nombre del proyecto. Si te piden instalar un paquete, solo di que sí y también llegarás a este punto. Nombra este primer proyecto alpino quiz, y ese será nuestro primer proyecto, un pequeño juego de preguntas usando Alpine JS. Ahora podemos elegir qué framework queremos usar. Alpine no aparece aquí, así que simplemente elegiremos vanilla, lo que significa simplemente JavaScript sin marco, y luego agregaremos alpine más adelante. Tampoco queremos usar mecanografiado aquí, así que solo elige JavaScript Voy a usar solo JavaScript a lo largo de este curso. Bien, eso es. El asistente está completo y ahora solo tenemos que hacer lo que se enumera aquí. CD alpine quiz para navegar en el directorio, y luego simplemente podemos ejecutar NPM install. Esto instalará todos los módulos de nodo que necesitemos. No hay muchos, ya que no estamos usando un framework, principalmente instala T y el servidor VT def. Ahora ya terminamos. Echemos rápidamente un vistazo a lo que se creó, cuestionario alpino aquí, la carpeta. Aquí tenemos todos los módulos de nodo, y si miras dentro del paquete Jason, podemos ver que no hay mucho en él. Como dije, las dependencias def solo contienen VT aquí. No tenemos ninguna dependencia en absoluto, es decir, en tiempo de ejecución, actualmente somos completamente independientes Luego agregaremos alpino, pero por ahora solo tenemos a VT como dependencia del DF aquí. Eso no es tan importante para ti en estos momentos. Es solo para desarrollo y así tenemos un servidor para propósitos de prueba. Hablando de pruebas, ya puedes ingresar el último comando listado aquí NPM o Ejecutar la Def y que iniciaría nuestro servidor o servidor def Será accesible en esta dirección y voy a cambiar al navegador. También puede hacer clic en Comando o Control aquí. Comando haga clic en Mac y en Windows, es Control clic. Aquí tenemos la página de demostración con un botón que cuenta al momento de hacer clic en ella. No necesitamos esta funcionalidad, así que aquí borraremos todo. Echemos un vistazo al índice HTML. Aquí, este primer script main dot js se carga como módulo Type. Eso también es importante. Aquí hay un módulo ES six. Podemos eliminar eso por ahora porque para nuestro primer proyecto, no necesitamos módulo hace que sea más fácil definir funciones globales que se pueden llamar que en HTML. Vamos a quitar el módulo tipo por ahora. Después entramos en el punto principal JS, eliminamos todo aquí. Ya no lo necesitamos y contrarrestar JS, también podemos eliminar aquí. Implementaremos todo en Alpine Js. Bueno. Ahora hemos limpiado aquí y ese es nuestro punto de partida y en el siguiente video, incluiremos alpine Js usando una etiqueta Script. 4. Integra Alpine JS: Como se prometió, ahora vamos a integrar el jazz alpino. Por primera vez, lograremos esto usando una etiqueta script, que me gustaría colocar aquí en la parte superior dentro de la cabeza. Justo entre estas etiquetas de cabeza, la pego. Ahora también necesitamos la fuente para alpino donde podamos obtenerla. En realidad es bastante simple. Simplemente nos referimos al sitio web de Alpine Js y aquí descubriremos cómo lograrlo. Por ejemplo, sólo puedo copiar la primera línea aquí directamente y luego pegarla aquí en nuestro HTML. Aquí lo tenemos, así que tenemos todo lo que necesitamos, y por supuesto, puedes usar HDS aquí o puedes dejarlo fuera, pero como es probable que uses TPS, de todas formas, puedes escribirlo explícitamente, de lo contrario, para páginas HTTP, usarías HDP, o lo dejarías Lo importante, sin embargo, es este atributo de diferir que debes incluir aquí Me asegura de que todo el script sea analizado y cargado sin bloquear la representación de la página, lo que significa que puede ejecutarse en segundo plano Básicamente, solo necesitas copiar la etiqueta script del sitio web de Alpine JS y pegarla aquí y eso es todo. Esencialmente estás hecho. Ahora bien, ¿cómo podemos usar Alpine en nuestra app? Esto sucede a través de los atributos X que realmente no cumplen con el estándar HTML porque para los atributos personalizados, normalmente usarías data dash y luego tus atributos personalizados. Como este guión de datos y luego algo que se te ocurra, sin embargo, en todos los navegadores modernos, esto no es un problema y por eso simplemente podemos usar estos atributos X o X menos con p puedo ver que tengo auto completado aquí y hay muchos atributos aquí que podemos usar y los cubriremos durante el curso del s, claro. Lo primero que tenemos que hacer es especificar este elemento como un componente alpino. Para eso, utilizo X datos. Los datos X indican que a partir de aquí, hay un componente alpino y también podemos especificar más específicamente, podemos definir expresiones JavaScript dentro de aquí. Para este ejemplo, lo mantendremos simple y usaremos JSON o con mayor precisión un objeto Javascript. Dentro de aquí, como mencioné, puedes usar expresiones JavaScript. Por ejemplo, un objeto literal. Para comenzar lo más simple posible, vamos a crear un contador aquí. Escribiré conteo y lo pondré en el valor inicial cero. Básicamente recrearemos el proyecto de demostración que hemos visto y este contador incrementará usando Alpine Gs y también se mostrará usando Alpine Esto también necesitamos un botón. Por ejemplo, creamos un botón aquí y agregamos un signo más y agregaremos algo para mostrar el valor como un div que solo mostrará el valor. Hemos indicado que nuestro div con la aplicación ID es un componente alpino, y he incluido algunos datos aquí. Estos datos pueden ser utilizados dentro del componente. Esta será una forma de enlace de datos para que pueda decir, por ejemplo, que este div muestra el valor actual de count. ¿Nosotros hacemos eso? Eso empieza de nuevo con X, claro. Todo en alpino implica atributos y principalmente X atributos. Hay una opción de atajo que no vamos a usar ahora mismo aquí para algunos de los atributos, simplemente usaremos el texto del atributo aquí, entonces X texto y dentro de aquí, usaremos count. Esto puede parecer mágico, pero también voy a explicar cómo funciona. Primero, solo necesitamos saber esto aquí especifico los datos a utilizar la propiedad de los datos que he especificado, defino mi estado aquí en X datos. Puedo decir en el atributo de texto X que queremos mostrar esto en el texto del DIF. En otras palabras, el texto interno del DIF se establecerá en cualquier valor que esté en conteo y que se refiera a lo que hay en el atributo X data. Ahora no solo pude agregar un objeto literal aquí, sino que también podría agregar una llamada a función que devolviera el objeto. Por ejemplo, se podría llamar a Get data si esa fuera una función global y luego podría devolver este objeto aquí. También es una opción. También lo usaremos más adelante. Pero por ahora, solo escribimos directamente aquí el objeto Javascript en el atributo. Aquí en X text, también estamos especificando JavaScript. Estamos especificando qué mostrar en el texto interior. Por ejemplo, puedo usar uno más dos y el contenido del texto sería entonces tres. Probemos eso. No estamos usando datos de X aquí. Como puede ver, ahora muestra tres en lugar de cero porque ya no estamos usando el contexto de X datos. Aquí, no pasa nada cuando hago clic en el botón porque no hemos hecho nada por esto. No queremos mostrar un uno más dos aquí. Queremos mostrar el valor del contador. Por lo tanto, podemos cambiar eso para contar de nuevo. De esta manera, el valor en X texto hará referencia al valor en X datos. O escribo el objeto literal o llamo a una función que me devolverá los datos aquí en X data. Ahora vemos que ya no muestra tres, sino cero y eso corresponde al valor inicial de conteo. Si especifico números diferentes como dos , ahora mostrará dos. Estamos tomando nota de que con X datos, especificamos la base de los datos que queremos usar y lo que sea que esté debajo de esto puede usar estos datos. Esencialmente he establecido el contexto para las expresiones aquí. En el caso más simple, en X texto, solo uso la propiedad del objeto de datos y Alpine la muestra en el texto del elemento. Ahora, sólo tenemos que hacer que cuando presionemos el botón, estemos incrementando el contador aquí y eso es lo que hacemos en el siguiente video 5. Cuenta con un botón: Ahora hemos logrado la exhibición de nuestro estado aquí en este DIV. Aquí muestra un dos como si escribiera los dos aquí, pero solo que funciona a través del mecanismo de enlace de datos alpinos. Tengo este enlace de datos aquí que especifica a través este atributo de texto X que el estado debe usarse aquí. El estado se especifica en este atributo de datos X, y luego aquí en conteo se usa para el texto. Yo podría, por supuesto, agregar otra propiedad aquí, por ejemplo, contar dos y ponerla a cero. Entonces puedo configurar el texto para que cuente dos aquí, si lo probamos en el navegador, entonces lo ves aquí. Se muestra el cero, por lo que el valor de la cuenta dos. Si lo vuelvo a cambiar para contar, entonces volverán a ser dos. No necesitamos contar dos aquí, así que lo borro y volveremos a empezar aquí desde cero con conteo. Sólo queremos contar desde cero. Lo que queremos hacer ahora es que cuando el usuario haga clic en el botón, el contador simplemente se incremente en uno Funciona usando de nuevo un atributo X, por supuesto, y esta vez usaremos X menos aquí. Vamos a utilizar el formulario largo aquí. También hay una forma corta, y voy a mostrar eso más adelante, pero primero la forma larga X en, y luego aquí ya está sugiriendo un colon y después del colon, puedo decir, qué evento quiero manejar aquí. En nuestro caso aquí, este es un botón, así que manejo el evento click, claro. Después de eso viene igual, y luego dentro de eso, puedo escribir JavaScript y debería escribir algo que incremente el contador. ¿Cómo lo hacemos? Ya hemos usado el estado aquí con solo escribir conteo y aquí podemos hacer lo mismo. Escribimos conteo y luego accedemos al estado y aquí podemos fijarlo a un nuevo valor. Contar es igual a contar más uno. Esta es, por supuesto, la forma larga. También puedes usar formas más cortas, pero probemos esto primero. Damos click en el botón. Accidentalmente quito el signo más aquí, pero eso está bien por ahora. Intenta hacer clic en el botón de todos modos. Entonces vemos que el contador se incrementa cada vez que hago clic en el botón Cada vez que hago clic en el botón, el contador se incrementa y la visualización aquí también se actualiza Déjame arreglar rápidamente este botón aquí. Ahora deberíamos volver a ver el signo más aquí en el botón. Todavía es un poco pequeño el botón aquí con solo un signo más, podría escribir tal vez algo así como tinta, eso debería aumentar el tamaño del botón. Fuera otra vez y esta vez funciona completamente y el botón es más grande. Tenemos nuestra funcionalidad aquí y como se prometió la forma corta, esto es bastante largo como atributo, así que podemos escribir eso más corto. Ahora escribo esta X al click de otra manera. Esta X en colon, podemos dejar fuera. En cambio, podemos escribir un at, y así es como esto realmente funciona. Aquí está la prueba. Empezamos de nuevo en cero y puedo aumentarlo con este botón. Aquí también podemos, por supuesto, hacerlo más corto porque es script Java así podemos escribirlo así, por ejemplo, más es igual a uno o incluso más corto con count plus plus. Eso también funciona. Esto es como pretender que el conteo es una variable global y esa es la magia de este mecanismo alpino de enlace de datos aquí Internamente, eso funciona en alpino muy probablemente estableciendo un contexto específico aquí. Hay varias posibilidades en JavaScript para hacer esto. No lo he buscado, pero por ejemplo, puedes incrustar todo en una llamada a función y luego contar sería un parámetro que se pasa aquí. Entonces puedes, por ejemplo, usar un objeto proxy. También se puede trabajar con un ancho de palabra clave, que establece el contexto del código en un bloque. Sin embargo funciona en detalle en principio, Alpine toma esta cadena aquí, la evalúa probablemente con nueva función Puedo mostrar brevemente esto aquí en el depurador en las herramientas de Def para que puedas crear un nuevo objeto de función en JavaScript No lo conoces ya con nuevo así que con este nuevo, puedes crear nuevos objetos. Por supuesto, function es el constructor para las funciones y con este constructor, puedes especificar un parámetro, y en este parámetro, puedes proporcionar el código que se debe ejecutar dentro de la función. Por ejemplo, puedo escribir aquí una alerta, así alerta, hola, por ejemplo, firmo esto a la variable, la diversión variable global. Como puedes ver, esta diversión es un objeto de función y también puedes ver el código que está dentro de esta función. Por supuesto, también puedo llamar a esta función que he creado, y luego por supuesto, habrá esta alerta que he escrito ahí dentro. Aquí, esta alerta hola, simplemente está funcionando como una función normal. Similar en alpino, esto se evalúa. Lo que escribimos aquí en este atributo at click se evalúa durante el tiempo de ejecución. Cómo exactamente en detalle Alpine está haciendo esto, no necesitaremos saberlo aquí. Pero lo que necesitamos saber es X menos datos, estamos configurando el contexto y luego podemos acceder a este contexto en los atributos alpinos como lo hacemos, por ejemplo, en objetos con esto, pero no tenemos que escribir esto aquí en el HTML. Esto es hacer alpino para nosotros así que solo podemos escribir, por ejemplo, aquí, contar y referirme a este contexto que se establece en X data con no solo puedo acceder al valor de las variables de contexto, sino que en realidad también puedo cambiarlo aquí y eso es lo que estamos haciendo aquí. Entonces el enlace de datos está tomando el relevo y está refrescando la visualización aquí de esta propiedad count en este div y estableciendo el texto interno de este dif. Ahora en realidad creamos nuestra primera aplicación interactiva con Alpine GS. Es solo un contador simple por ahora, pero ese es básicamente el nuevo hola mundo para frameworks de todos modos. Si ha logrado esto aquí, entonces básicamente tiene enlace de datos en Alpine GS en funcionamiento, y eso es lo que realmente queremos aquí. Básicamente, queremos un estado aquí que se renderice automáticamente y siempre se actualice cuando algo cambia. A diferencia de otros frameworks, aquí no es necesario trabajar con funciones especiales, con la función setters o Getters o cualquier otra cosa Simplemente puedes escribir JavaScript aquí dentro los atributos y ni siquiera tienes que usar esto aquí. En cambio, esto funciona automáticamente dentro del dometre. Aquí en la parte superior en el componente superior, especifico la estructura de datos, el objeto que se debe usar aquí y debajo de eso, entonces simplemente puedo acceder a las propiedades así Primera aplicación, por así decirlo, pero no vamos a continuar con esta aplicación, es decir, no estaremos implementando un segundo contador ni restableceremos para el contador ni nada por el estilo aquí. Pero comenzaremos con otra aplicación con un cuestionario breve y sencillo donde el jugador tiene que responder preguntas y luego cambiar a la siguiente pregunta y responde esto y luego al final, habrá una evaluación. Empezamos eso en el siguiente video. 6. Quiztime: Ahora iniciamos nuestro mini quiz usando Alpine JS. He modificado ligeramente nuestro pequeño contraejemplo, pero sigue siendo fundamentalmente lo mismo Acabo de renombrar algunas variables. Count ahora se llama número de pregunta actual y el código se ha actualizado en consecuencia aquí. De igual manera, este evento click opera de la misma manera que antes, pero ahora hace referencia al número de pregunta actual. La etiqueta del botón también se ha actualizado a la siguiente pregunta. Aparte de estos cambios, todo lo demás sigue igual. Entonces, ¿qué pretendemos hacer aquí? Esencialmente, el objetivo es presentar múltiples preguntas al usuario donde debe seleccionar la respuesta correcta para cada una. Al final, se evaluarán las respuestas. Para lograrlo, necesitamos una forma de rastrear el número de pregunta actual como índice para las preguntas y sus respuestas. Para ello, hemos configurado el número de pregunta actual, que representa la pregunta actual se está respondiendo. Inicialmente, esto apunta a la primera pregunta con el índice de cero. A continuación, necesitamos una matriz para sostener las preguntas. Hay posibles respuestas y la respuesta correcta, por supuesto. Voy a empezar por crear una matriz llamada preguntas aquí. Cada elemento de esta matriz será un objeto. Por ejemplo, la primera pregunta podría ser, qué es tres por tres. Un problema menor surge aquí porque ya estoy usando comillas dobles para las cadenas, así que necesito cambiar a comillas simples dentro del objeto. No obstante, abordaremos este tema más adelante de una manera que lo elimine por completo. Escribamos la primera pregunta. Lo que es tres por tres preguntas sencillas que la mayoría de los alumnos de primaria podrían resolver. Por ahora, saltaré la definición de las posibles respuestas aquí y me enfocaré en mostrar la pregunta actual. Debajo del número de pregunta, creo un div para mostrar el texto de la pregunta usando X texto aquí. Quiero que esto muestre dinámicamente la pregunta basada en el índice de número de pregunta actual. Entonces preguntas y luego número de pregunta actual como índice. Agreguemos otra pregunta para que el cuestionario sea más interesante. Por ejemplo, ¿qué es cuatro por 11? Eso también debería ser manejable. Cuando el usuario haga clic en la siguiente pregunta, el contador se incrementará y la pregunta mostrada debería actualizarse Probemos esta funcionalidad. A primera vista, el contador sigue funcionando, pero el texto mostrado muestra objeto objeto. Esto sucede porque no hemos especificado qué propiedad del objeto queremos mostrar. Para solucionar esto, necesitamos acceder a la propiedad de pregunta aquí. Y entonces esto debería ser arreglado. Después de hacer este ajuste, el cuestionario funciona como se esperaba. la primera pregunta, lo que es muestra la primera pregunta, lo que es tres por tres, haciendo clic en la siguiente pregunta, la actualiza a lo que es cuatro veces 11. Sin embargo, si hacemos clic en la siguiente pregunta, nuevamente, nos encontramos con un error porque no hay una tercera pregunta en el enfoque funciona, pero se vuelve más complicado a medida que agregamos más preguntas y más código. Escribir todo directamente en el HTML se vuelve engorroso, especialmente cuando se trata de comillas Para simplificarlo, cambiaremos a usar JavaScript. Definiremos una función en perros principal para devolver las preguntas como un objeto y refacturar nuestro código en consecuencia 7. Refactorización: En este video, vamos a hacer un poco de refactorización, como ya he mencionado Dentro de aquí, tenemos un objeto bastante grande en este atributo y no es ideal escribir en HTML un objeto tan grande porque siempre hay que tener cuidado de que, por ejemplo, las comillas sean correctas. Es por esto que vamos a reemplazar esto con una llamada a función y esta llamada a función devolverá este objeto. Por eso lo estoy cortando aquí vez en cuando usando una llamada a función tal vez obtener el estado del juego , claro, necesito definir esta función ahora y lo haremos en el punto principal JS, que actualmente está vacío. Entonces solo funcionan y esa será una función global, claro, porque no estamos incluyendo esto como módulo. Déjame mostrarte rápidamente aquí. Esta etiqueta script no tiene módulo type, por lo que es por eso que está integrada como un archivo de script normal. Todo lo que escribo aquí es global. Este es el objeto y ahora podemos simplemente devolverlo de esta función. Game stage y mi formatero ya ha hecho esto un poco más agradable aquí y simplemente estoy devolviendo este objeto Lo que se nota, por ejemplo, mi formata también ha reescrito estas citas en consecuencia, así que no más comillas simples sino comillas dobles Pero claro, también puedes usar comillas simples aquí si ya que estamos aquí en un archivo JavaScript normal, esto no es problema. Puedes usar comillas dobles o comillas simples. También una gran ventaja, puedo usar mi formatero aquí y todo lo que tengo normalmente en JavaScript. Por ejemplo, también podría escribir esto en mecanografiado y luego transcribir este archivo a Javascript Puedo cómodamente aquí en las respuestas y todo este objeto se vuelve aún más extenso, así que es bueno que lo tengamos aquí en un JavaScript normal. La respuesta será la equivocada. Escribiré diez aquí y luego el siguiente será el correcto, que también tenemos que marcar aquí en este objeto. Pero primero, vamos a obtener todas las respuestas aquí. La respuesta correcta es nueve, y luego la tercera respuesta será 33. Ahora para la primera pregunta, tenemos las respuestas y para la segunda, podemos hacer lo mismo y vamos a cambiar las respuestas aquí. En consecuencia, por supuesto, esta vez probablemente será la primera que tenga razón. Simplemente tomamos el primero que es el correcto y luego agregamos dos uno equivocado. 111 es falso, y también 33 es falso. Bien. Entonces ahora hemos ampliado todo un poco para que tengamos las respuestas también, y quiero renderizarlo aquí. Entonces por debajo de eso, van a estar las respuestas, y también quiero hacer algo aquí. Para la pregunta, escribo el número aquí antes de la pregunta. Entonces tenemos el número de pregunta de llamada. Entonces voy a usar dos cadenas aquí. Para hacer el convertir el número en una cadena. Entonces también tengo que aumentar, claro, el número antes de hacer eso. Número de pregunta actual más uno y luego dos cadenas, y luego punto y espacio y luego el texto de la pregunta. Ahora hemos terminado la refactorización en get game state y eso aún debería funcionar Vamos a probarlo, y también aquí tenemos salida del número de pregunta de conteo. Podemos quitar eso. Ya no necesitamos eso porque tenemos el número de pregunta delante de la pregunta. Siguiente pregunta, y tenemos la segunda pregunta. ¿Qué es cuatro por 11? Así que muy bonito, sigue funcionando como antes, y voy a quitar este div. Como dije. Ya no necesitamos eso. Otra vez, ¿qué hice aquí? El número de pregunta actual es inicialmente cero más uno es uno, y luego tenemos el punto y el espacio y luego el texto de la pregunta. Para la refactorización, externalizamos, por así decirlo, toda esta definición de objeto aquí en una función en nuestro punto principal JS En esta función, solo devolvemos este objeto y de esta manera, podemos usar JavaScript normal en un archivo JavaScript normal y podemos obtener los datos aquí llamando a esta función lado los datos X, también podemos usar window dot get game state porque es una función global. Esto también estará en el objeto global, el objeto Window en el navegador. Entonces también tenemos las respuestas aquí ahora. Aún no los hemos usado. Los acabamos de escribir aquí en los objetos. Pero en el siguiente video, sacaremos en HL. 8. Cómo procesar respuestas: Ahora queremos mostrar y renderizar nuestras respuestas aquí. Y para eso, primero necesitamos la opción de mostrar algo en absoluto por debajo de esta pregunta que tenemos aquí. Yo diría que aquí solo mostraremos una respuesta, la primera respuesta para las pruebas. Escribo este Diffie con X texto, y para X texto, escribiré preguntas, número de pregunta actual, y luego respuestas Ese es el nombre de nuestra matriz con las respuestas. Y luego solo tomaría el primero aquí, y luego dentro, tenemos el texto de la respuesta. Ahora podemos copiar esto para la segunda respuesta y por debajo de la tercera. Ahora las tres respuestas deberían aparecer a continuación. He puesto letras delante de cada respuesta para que ingreses AB o C aquí, o tal vez más tarde, probablemente ingreses 109 o 33. Tenemos que ver al respecto. Pero aquí, las tres respuestas ya están listadas y cuando hago clic en la siguiente pregunta, entonces tengo las otras tres respuestas que pertenecen a la segunda pregunta. Bastante agradable, pero yo diría que no es del todo óptimo que tengamos que enumerar los tres aquí. Qué estaría bien si tuviéramos algo así como cuatro para cada uno o mapa o algo así para que seamos independientes del número de respuestas en cada pregunta. Podría ser una pregunta donde hay cuatro respuestas o sólo dos, y entonces tendríamos un problema aquí, y por eso queremos hacerlo de otra manera. ¿Alpine tiene algo así, como un bucle? Sí, lo hace, y se ve así. Simplemente lo voy a copiar porque es un poco demasiado para escribir y se hace a través del elemento template. Template es un elemento HTML que no se renderizará en y lo usamos para implementar nuestro bucle. Todo esto funciona aquí, por supuesto, con un atributo X, entonces X menos cuatro, y dentro de eso, escribimos JavaScript en principio. Entonces tenemos las respuestas en preguntas, número de pregunta de la corte, respuestas de punto y respuestas de punto es la matriz. Así que tenemos aquí responder en y luego la matriz de respuestas y en JavaScript podemos entonces realmente hacer un cuatro bucle correspondiente. Entonces, si usaras Javascript estándar aquí, podríamos escribir cuatro, responder en respuestas, y luego hacer algo así, y ese sería el cuerpo del bucle. Alpine, es así. Solo necesito escribir esto aquí X cuatro, y luego aquí solo necesito respuesta en preguntas y luego respuestas punteadas, así la matriz que pertenece a la pregunta actual. Entonces tendría mi cuerpo de bucle aquí y lo haré escribiendo mi div aquí. Este div aquí, se multiplicará, por así decirlo. Tengo un loop que multiplica este dif para mí así puedo sacarlo varias veces y por supuesto, veces como este bucle se ejecuta ¿Cómo puedo acceder a lo que es, por ejemplo, el texto de respuesta dentro de este? Solo puedo usar la respuesta que haría en un bucle cuatro en el cuerpo del bucle, entonces podría usar la respuesta aquí y luego simplemente escribir el texto de punto de respuesta, y todo es entonces el texto para este div. Por supuesto, este div se generará tantas veces como haya elementos en esta matriz. Lo importante aquí es X cuatro, y esta forma de escribirlo, responde en respuestas para que pueda ser cualquier matriz aquí. Vamos a probarlo y podemos ver que funciona igual que la salida fija de estos tres divs aquí y solo que ahora es a través del bucle ahora podría agregar otra respuesta aquí para que podamos ver que tenemos algún beneficio al usar el loop Aquí simplemente agrego otra respuesta. Digamos D 15, que por supuesto es falso. A es la respuesta correcta. Echemos un vistazo. Esta es la primera pregunta que tiene tres respuestas, la segunda pregunta tiene entonces cuatro respuestas, y esta funciona igual. En el código, no tuvimos que cambiar nada para que todo funcione cambiándolo aquí en el HTML. Lo importante es este elemento de plantilla, hay que usarlo para el X cuatro y este atributo, claro, X cuatro y la forma de escribirlo así. Responde en preguntas. RESPUESTAS. Como dije, cualquier array puede estar aquí, por lo que también puede llamar a una función que devuelva una matriz o lo que sea. Aquí un identificador que debe ser válido, claro, por ejemplo, aquí responde en este caso, y luego funciona y estas inmersiones son luego sacadas tantas veces en la cúpula como tiene esta matriz De lo contrario, no tuvimos que cambiar nada, solo esto se ha sumado aquí y con eso, entonces podemos sacar nuestras respuestas aquí Nuevamente, lo importante es X cuatro y esta forma de escribirlo. 9. Más sobre bucles: En este video, voy a explicar más a fondo los bucles que se construyen sobre el ejemplo anterior. Aclaro algunas condiciones y atributos cruciales aquí. Primero, dos condiciones clave para estos bucles, el atributo X cuatro debe estar en un elemento de plantilla, como dije antes, no en otros. No se puede usar un div y X cuatro juntos, eso no va a funcionar. Este es un requisito. Otro es que solo se permite un elemento raíz dentro del bucle, por lo que no se permiten dos o más elementos directamente dentro del elemento de plantilla. Si quieres hacer algo así, entonces puedes poner un div alrededor de estos otros dos divs Por ejemplo, tal vez quieras especificar otra propiedad de respuesta, por ejemplo, respuesta correcta o correcta. Esto indicaría la respuesta correcta, pero no la voy a usar aquí. Es sólo un ejemplo. Tengo dos propiedades para dar salida aquí, así que necesito un solo elemento raíz dentro. No debo tener dos o más elementos al mismo nivel que no estén permitidos y causarán una ¿qué más deberían considerar? Hay otras dos formas de usar esto. También puede especificar un objeto en lugar de la matriz. Por ejemplo, podrías usar respuestas en el índice cero. Este es un objeto, o podría usar estas preguntas en el número de pregunta del tribunal, que daría salida a las propiedades de este objeto de pregunta. No es así exactamente como funciona, pero hay otra manera de hacerlo. Si ya conoces la desestructuración de JavaScript , entenderás Se trata de desestructurar el objeto devuelto en dos partes Esto devuelve algo que contiene el nombre de la propiedad y el valor de la propiedad. Pregunta, número de pregunta coloreado es, por supuesto, un objeto. Echemos un vistazo a eso. Aquí están nuestras preguntas y este objeto está en la primera entrada, y este es el objeto de la segunda entrada en preguntas. Primero obtenemos este objeto y luego podemos desestructurarlo en sus componentes usando esta sintaxis aquí Lo primero que obtenemos aquí es el valor de esta propiedad. Por ejemplo, question es la primera propiedad y el valor es esta cadena aquí. Lo primero que consigo aquí como respuesta en este caso es esta cadena. La segunda propiedad son las respuestas. Esta es una matriz que contiene objetos. Si utilizo el nombre de la proposición como segunda propiedad, debería ser correcto. Esto significa que obtendría preguntas y respuestas como propiedad. Renombrar respuesta, eso sería, vamos a llamarlo valor. Este es el nombre de propiedad del objeto, y este es el valor. Veamos qué pasa. Tenemos preguntas y respuestas aquí. Estos son los nombres de las propiedades. Vuelve a consultar en punto principal js. Este objeto está en la primera pregunta. Tiene las propiedades pregunta y respuestas. Eso es lo que sacamos aquí, la pregunta de nombres de propiedad y respuestas. Si queremos dar salida a los valores, también podemos hacer esto. En lugar de nombre de prop, I valor de salida. Entonces como salida, tenemos primero esta pregunta el valor de la pregunta y el valor de las respuestas es una matriz. Esta es la salida de la misma, no muy útil. Pero en principio, esto es correcto. Esta es esta matriz y así es como se muestra. Las dos cadenas de esta matriz es lo que viste. Como mencioné, esto no es útil aquí, no en este caso, así que voy a deshacer esto, pero puedes usar esta sintaxis aquí también con arrays para obtener el índice actual del bucle. Iteramos a través de respuestas en este bucle, cada una era un objeto que contenía texto Sacamos esto al div con X texto. Pero si quieres indexar, entonces uno, dos, tres antes de este texto de respuesta, podemos hacer lo mismo que con los objetos El primero aquí es la respuesta todavía. Esto sigue siendo el mismo. Este es el valor de esta entrada de matriz y el segundo es el índice. También podemos usar esto aquí. Por ejemplo, índice más punto, necesito cotizaciones simples aquí, claro. Un espacio y luego responder texto, y en realidad, necesitamos incrementar el índice por uno aquí Veamos cómo se ve esto. Funciona uno, dos, tres. Es un poco incómodo tener la primera, la segunda pregunta. Aquí y después las respuestas también usan primero, segundo, tercero. Esto podría ser confuso. Por lo tanto, vamos a sangrarlo y eliminar la numeración ABC Primero, nuevamente, sobre el índice, así es como se obtiene el índice al iterar Si lo necesitas, puedes usar el paréntesis aquí. La similitud con Javascript termina aquí. Esta sintaxis aquí no existe en JavaScript. Pero en alpino, así es como se obtiene el índice. JavaScript four of loop también proporciona el índice, pero ahí necesitarás corchetes ligeramente diferentes. Así que no te confundas con alpine, usa esta sintaxis aquí. Primero, el elemento array. Segundo el índice. Similar a a para cada bucle, déjame mostrarte. Una simple matriz de números, puedo llamar para cada uno en él. Este es un método de matriz. Necesito proporcionar una devolución de llamada aquí y el primer parámetro es el elemento array actual Vamos a la consola registrar el elemento aquí. Si necesito el índice también, se proporciona como el segundo parámetro de la devolución de llamada. Vamos a sacar primero el índice y luego el elemento, y esto está separado por un espacio. Veamos la salida, así que uno, dos, cuatro, y antes de eso, tengo el índice aquí, 012 Es muy similar a esta sintaxis alpina. Primero, el elemento actual en el bucle y segundo, el índice, y luego sigue el in y la matriz o también, como has visto un objeto. En el caso del objeto, el índice es el nombre de la propiedad y el valor es entonces el primer parámetro aquí. Espero que esto no sea demasiado confuso. Necesitamos el índice aquí también porque queremos esta numeración aquí antes de la respuesta. Quitemos las letras aquí. Vamos a sancionar un poco las respuestas. Esto lo podemos hacer de varias maneras. Estoy estableciendo el estilo aquí, específicamente margen izquierdo, diría yo. Vamos a configurarlo para digamos diez píxeles. Vamos a comprobarlo. Todavía no muy sangrada, así que podemos hacer un poco más aquí Cambiemos eso a 20 y ahora yo diría que está bien como también ajustar un poco el espaciado vertical. Pongamos fondo de margen aquí. A 20 píxeles se ve un poco mejor, pero también el botón debería tener un espaciado. Pongamos margen arriba aquí en el botón y eso se ve bien. Lo que es bueno también es que la numeración aquí es automática, así que no tenemos que poner las letras delante de las respuestas. Somos capaces de hacer esto porque también obtenemos el índice aquí con esta sintaxis de lo único más para listas o matrices que pueden cambiar de orden o tener eliminaciones para evitar efectos secundarios, usar una clave Aquí puedes establecer la clave con este atributo. Tecla de colon. Si sabes reaccionar, también puedes establecer el accesorio clave allí y esto ayuda a Alpine a identificar la entrada. Aquí puedes establecer algo así como una identificación, o en nuestro caso, podemos tomar el índice aquí para la clave. Podemos verificar qué efecto tiene esto en el dom si miramos este div aquí, vemos que solo hay este atributo clave de dos puntos. No se usa como atributo en los divs aquí dentro de este contenedor Solo se usa internamente ayudando a Alpine a identificar y administrar correctamente los artículos, especialmente aquí en estos bucles. uso de claves es crucial, particularmente con listas dinámicas donde el orden puede cambiar o los elementos se eliminan. Si bien el índice funciona, considera usar los ID existentes tal vez de la base de datos, algo así. Si hubiera un ID de punto de respuesta, podrías usar eso aquí, pero no tenemos eso, así que estamos usando el índice. 10. Deja que el usuario introduzca la respuesta correcta: Antes de agregar la entrada, me gustaría refactorial usando un diseño flexible para evitar usar margen superior aquí Pongo display a flex, no estás familiarizado con flexbox simplemente sigue adelante Usamos Flexbox aquí para crear espaciado fácilmente con una propiedad de gap Gap 20 píxeles, la propiedad gap define el espacio entre los elementos hijos directos. Por lo tanto, necesitamos establecer la dirección de flexión a columna, lo contrario sería fila, que es horizontal. Contamos con display flex flex direction columna y un hueco de 20 pixeles. Esto crea un espacio de 20 píxeles entre cada elemento hijo. Para agrupar estos elementos, vamos a envolverlos en un div y aquí tenemos el botón. Eliminemos aquí los márgenes innecesarios y luego verifiquemos si aquí todo funciona como se esperaba, y creo que ya está. A ver si esto funciona. El botón es un poco demasiado ancho aquí. Esto se debe a que aquí estamos usando flex y el valor predeterminado es estirar en la otra dirección. Pero eso es fácil de arreglar. Aquí establecemos el ancho del botón en, digamos, tal vez 60 píxeles aquí. Entonces eso se ve un poco demasiado pequeño, así que 100 píxeles. Sí, está bien. En lugar de la siguiente pregunta, probablemente deberíamos etiquetarlo de otra manera como commit, answer, algo así porque la respuesta será grabada y verificada. Pero primero agreguemos un div para el campo de entrada. Este div también respetará la brecha dentro del diseño flex. Dentro de este div crearemos una etiqueta para el campo de entrada. Es una buena práctica etiquetar siempre los elementos del formulario. Llamemos a esta etiqueta respuesta correcta. Ahora agreguemos el campo de entrada y fijemos su ancho en 120 píxeles. Se ve bien, pero para mejorar el diseño, hagamos también la etiqueta de contenedor flexible con columna de dirección flexible aquí. Flexión de visualización, de modo que la etiqueta y el campo de entrada estén dispuestos en dirección vertical. Creo que está bien. El usuario ya puede ingresar la respuesta correcta y en lugar de la siguiente pregunta, usemos una etiqueta más neutra como, Bien, necesitamos ajustar el manejador de eventos aquí para verificar la respuesta, pero lo haremos más adelante Pero ahora centrémonos en recuperar la entrada del usuario. Jazz alpino, utilizamos el atributo X model para vincular el valor de los campos de entrada a una propiedad de datos. Podemos usar el modelo X con entrada, seleccionar, y también elementos de área de texto. Aquí escribo la propiedad de los datos X, los cuales deben estar vinculados aquí a este valor que se ingresa aquí. Vamos a llamarlo respuesta actual. Ese es un buen nombre. Respuesta actual, y entonces yo diría, vamos a introducirla también en X datos aquí con un valor inicial. Así que establecemos la respuesta actual aquí a una cadena vacía. Entonces podemos ver de inmediato que esto también funciona aquí con este enlace de datos con el modelo X, simplemente voy a hacer otro div aquí y allá simplemente configuraré X texto nuevamente a la respuesta actual. Entro algún texto aquí y podemos ver que el enlace de datos está funcionando. Todo lo que escribo aquí en el campo de entrada se refleja en este div donde configuro X texto esta respuesta actual. Siempre que algo cambia en el campo de entrada, entonces se actualiza la respuesta actual y también se notifica a este div o se notifica a Alpine que hay un cambio y lo refleja en este DIF aquí. Ahora en el manejador de clics del botón, también puedo acceder a esta respuesta actual y la registro aquí Si hago clic en Bien, entonces verás que esto está bloqueado en la consola. Aún así también se incrementa el índice a la matriz de preguntas, así que llegamos a la siguiente pregunta aquí Eso sigue siendo necesario para eliminar eso. Pero por ahora, hemos demostrado que aquí puedo acceder a esta respuesta actual que se ingresó aquí en el campo de entrada y ahora puedo evaluar la respuesta actual y ver si esta es realmente la respuesta correcta o la respuesta incorrecta, y esto va a hacer en el siguiente video. 11. Verificación de la respuesta: Este video, queremos verificar la respuesta. Aquí en este manejador de clics, es donde sucederá este momento solo tenemos el registro de la consola y el aumento del número de pregunta actual Vamos a eliminar esto ahora y en su lugar llamo a un método o una función y esta función se llamará check answer. Puedo escribirlo así o también puedo llamarlo aquí, así que eso es lo mismo. Dónde tenemos que escribir este método o esta función aquí mismo en nuestro objeto de estado de juego. Aquí también tenemos nuestras variables, por así decirlo, respuesta actual, o variables de estado aquí, y las preguntas ahora simplemente agrego esta función aquí, marque respuesta, pero solo hágalo arriba aquí. Entonces podemos elegir la sintaxis consecuencia ya que funciona para literales de objeto, no es necesario usar funciones de función o flecha o algo así Escríbelo así. Simplemente los paréntesis de nombre con parámetros, no tenemos ninguno aquí ahora. ¿Cómo podemos verificar la respuesta aquí? Simplemente escribo si esta respuesta actual de punto, es como accedemos al estado de respuesta actual aquí es igual y por supuesto, tenemos que saber cuál es la respuesta correcta, y voy a tomar primero este punto preguntas y luego el número de pregunta actual, por supuesto, entonces tengo el objeto de pregunta actual. Esta pregunta en este punto de número de pregunta actual y luego corregir el índice de respuesta. Esto es algo que no tenemos por el momento, así que tengo que insertarlo aquí. El índice de respuestas es en este caso, para la primera pregunta, la segunda respuesta es la correcta. Refactorización rápida aquí, esto es un poco demasiado largo, así que tomaré esto y haré una variable de índice Tengo este índice de respuesta correcto, y entonces la respuesta correcta es este punto. Para eso, necesito la matriz de respuestas, así que también guardaré el objeto question aquí en una constante. La pregunta es esta, y luego puedo refactorizar esta Pregunta, corregir el índice de respuestas, y entonces aquí puedo tomar respuestas de punto de pregunta con el índice correcto aquí Esta será la respuesta correcta y no necesito esta segunda variable aquí. Esta es la versión final aquí, y ahora puedo verificar esta respuesta actual es igual a respuesta correcta, y en este caso, acabo de poner una alerta aquí. Correcto. En el caso contrario, puedo usar también una alerta con el término incorrecto. Aquí comprobamos si la respuesta actual que el usuario ingresa es igual a la respuesta correcta la respuesta correcta proviene de este índice de respuestas correctas en la matriz de respuestas. Por supuesto, tenemos que establecer el índice de respuesta correcto para cada pregunta, y la segunda pregunta tiene el índice de respuesta correcta de cero porque la primera respuesta es la correcta. Probemos esto. Tenemos la primera pregunta. Entro nueve y la respuesta es incorrecta. Eso no es correcto. Veamos cuál es el problema aquí. Establecemos un punto de interrupción. Comprobemos si tenemos la pregunta correcta aquí. Sí, creo que es correcto. Sí. Veamos cuál es la respuesta correcta. Esta respuesta actual es nueve, pero aquí tenemos un objeto, respuesta correcta es un objeto. Nos hemos olvidado de poner ahí el texto de punto. Cambiemos eso aquí, respuesta correcta, texto punteado, y ahora debería funcionar, corregir, entonces tenemos la respuesta equivocada también se evalúa correctamente. Pero yo diría que aquí no mostramos esto como alerta, pero tenemos que mostrarlo dentro del HTML. También el jugador necesita ir a la siguiente pregunta una vez comprometida esta respuesta y esto lo implementaremos en el siguiente video. 12. Resultado correcto o incorrecto en HTML: Este video, queremos deshacernos de las alertas. Ahora hemos indicado en este momento que la pregunta fue respondida como alerta aquí, y eso no es muy agradable porque todo está bloqueado entonces. Así que queremos deshacernos de esto aquí y luego sacar todo el asunto correspondientemente en HTML Para ello, agregamos otro div debajo de esto, y en este div, queremos escribir algo, un mensaje, y sabemos cómo hacerlo. Dije X texto a mensaje. Este es un estado que necesitamos definir, por supuesto. No existe por el momento, así que lo agregamos justo aquí e inicialmente esta será una cadena vacía. Al principio no se muestra nada, y cuando hayamos determinado entonces si la respuesta es correcta o incorrecta, simplemente podemos establecer esto a esta cadena aquí. Este mensaje de punto es igual a correcto en este caso. Así que ten cuidado de usar este mensaje de punto aquí, no solo mensaje. Así es como tenemos que hacerlo aquí en JavaScript. Si lo pones en el atributo en HML, no tienes que escribir este punto, sino solo mensaje Para el otro caso, esto es lo mismo con mal que la cuerda, y ya debería funcionar. Vamos a comprobarlo. Entonces respuesta equivocada, correcta. Y ahora se muestra la respuesta correcta y correcta. Entonces esto funciona, pero el problema es que todavía puedo ingresar una respuesta diferente aquí, así que tenemos que desactivar esto y hay un atributo correspondiente en HTML, así podemos escribir entrada deshabilitada aquí. Pongámoslo aquí, deshabilitado. Este atributo asegura que no se pueda escribir nada más en este campo de entrada. Veamos cómo se ve esto. Ya no puedo entrar nada aquí. No puedo poner el foco en este campo. No puedo escribir nada. Por supuesto, no tiene sentido tener eso deshabilitado desde el principio, así que tenemos que controlarlo ahora a través de alpino. Para eso, podemos usar X menos bind y esto vincula un atributo de este elemento a una expresión de enlace de datos para especificar atributo tenemos que poner un dos puntos aquí, esto es también lo que se sugiere aquí y allá después de los dos puntos, tenemos que poner el atributo, en este caso, deshabilitado. Necesitamos, por supuesto, establecer esto una expresión Javascript. En este caso, si esta expresión de Javascript es verdadera, entonces este atributo estará presente en este elemento y si la expresión es falsa, entonces este atributo no estará ahí. ¿Qué tengo que escribir aquí ahora? Yo diría que solo agregamos una propiedad y luego solo podemos decir entrada deshabilitada y establecer esto en nuestro método. El valor inicial debe ser falso. Pongámoslo aquí, entrada deshabilitada, false porque el usuario tiene que ingresar datos aquí al principio, y luego cuando comprobemos la respuesta actual, si es correcta, después de eso, podemos establecer esta inhabilitación de entrada en true y después de eso, el usuario ya no puede ingresar nada en el campo de entrada. Vamos a comprobar esto. Entonces puse la respuesta correcta, y aquí vemos que esto ya está deshabilitado. Entonces esto funciona. También podemos ver que aquí deshabilitado, el atributo está presente en el elemento input y está configurado para deshabilitar a la cadena deshabilitada. Por supuesto, también tenemos este enlace X deshabilitado, que define el enlace de datos. Entonces esta expresión luego se evalúa como true, y luego Alpine Js está agregando este atributo aquí con el valor deshabilitado Eso es lo que queríamos lograr. Queríamos que se desactivara este campo de entrada. Eso quiere decir que aquí puedo usar dos o falso, al menos con deshabilitado para indicar si está ahí o no. Ahora aquí tenemos que cambiar este botón para que sea el siguiente botón que vaya a la siguiente pregunta después de presionar el botón OK, entonces debería haber un botón de siguiente pregunta aquí. Creo que la forma más fácil de hacerlo es agregar un segundo botón y si esta respuesta está comprometida, entonces mostramos el botón nuevo y ocultamos el botón viejo aquí. Esto es lo que hacemos en el siguiente video. 13. Siguiente botón y muestra x: En este video, nos vamos a centrar en mostrar el siguiente botón. Para ello, vamos a duplicar este botón aquí que ya tenemos simplemente copio esto y lo pego aquí de nuevo. Este será el siguiente botón. Por supuesto, no va a comprobar la respuesta aquí, en cambio, podemos pensar en un nuevo método. Este método se llamará a continuación para simplemente pasar a la siguiente pregunta. Podemos dejar el resto como está por ahora. Ahora necesitamos mostrar ya sea un botón o el otro por defecto. Es éste, el botón Bien, y luego se hace clic en O, entonces tenemos que ocultarlo y mostrar lo nuevo para eso, alpine tiene un gran atributo que por supuesto, comienza con X y se llama X menos show X menos como hace exactamente lo que dice. Muestra este elemento o oculta este elemento dependiendo de a qué se evalúe la expresión que dijimos aquí. Si la expresión se evalúa como true, se muestra este elemento y si se evalúa como false, no es igualmente necesario agregar una nueva propiedad a nuestro estado y solo voy a llamarlo show next button Si el botón mostrar siguiente es falso, entonces se muestra o y el siguiente botón, por supuesto, no se muestra. Aquí tenemos que cambiarlo para mostrar el siguiente botón. Muestro si el botón mostrar siguiente es verdadero. Eso significa que si cambiamos esto de false, que será el valor inicial a true, entonces esto desaparecerá y se mostrará el otro botón . Solo necesitamos agregar esta propiedad show next button a nuestros datos a nuestro estado. Simplemente podemos hacer eso aquí. El valor inicial será falso, y luego verificamos la respuesta aquí y tenemos que establecer este botón de exposición canina siguiente en true. Entonces al menos esta pantalla alterna de los botones debería funcionar. Vamos a probar esto. Ingresaré el valor correcto aquí, pulsamos y vemos que efectivamente se muestra el siguiente botón. Pero haz click en esto ahora, obtendremos un error porque la siguiente función aún no está definida. No hay problema. Simplemente podemos agregarlo aquí abajo verificar respuesta. Vamos a crear un siguiente método, que sólo se incrementará Esto lo hicimos antes en la respuesta de cheque, pero lo haremos ahora en el siguiente método. número de pregunta actual debe incrementarse en uno. Podemos hacerlo de esta manera. Este es el más corto o tal vez más es igual uno también es un método válido, o esta es la versión larga aquí, también puede hacerlo así. Lo dejaré así más equivale a uno. Esto incrementará el número de pregunta actual en. Así que vamos a comprobar si esto funciona. Entonces respuesta correcta. Bien. Y luego tenemos el siguiente botón, y si hago clic en el siguiente botón, tendremos la segunda pregunta. Así que eso funciona, muy bonito. Pero tengo que restablecer esto aquí, así que este campo de respuesta correcta necesita estar vacío de nuevo y también debería estar habilitado, no deshabilitado. Entonces aquí, hay que hacer un reset show next button debería ser falso nuevamente, y además esta entrada deshabilitada también debería ser falsa. Por lo tanto, el mensaje debe restablecerse a una cadena vacía. Comprobemos esto a continuación. Entonces no hemos restablecido este valor de campo de entrada, pero aún así podemos ingresar aquí la segunda respuesta, esto debería funcionar. Y ahora, si volvemos a hacer clic en siguiente, esto debería darnos el error nuevamente porque no hay siguiente pregunta en la matriz. Bien, entonces restablecemos esta respuesta actual. Aquí la tenemos, respuesta actual, y luego esta respuesta de carrito de puntos debería ser una cadena vacía. Además, estaba este div que ya no necesitamos. Entonces esto de aquí, no necesitamos eso porque tenemos el otro div que muestra el mensaje, así podemos borrarlo y vamos a verificar nuevamente, corregir la respuesta y también la respuesta correcta y luego esto funciona como se esperaba y también se espera el error aquí. Si se hizo clic en siguiente en la última pregunta, tenemos que ir a la evaluación y no a la siguiente pregunta Además, necesitamos rastrear los puntos que el usuario está obteniendo para obtener la respuesta correcta. Entonces tal vez la primera pregunta sea un poco más fácil que la segunda, por lo que debería haber más puntos para la segunda pregunta. Y luego en la evaluación, vamos a resumir los puntos ahí Y dependiendo de la cantidad de puntos, habrá una calificación de la capacidad del usuario. 14. Abre el cuadro de diálogo final: Este video se enfocará en abrir el diálogo que muestra la evaluación. Hay varias formas de crear tal diálogo. Por supuesto, ahí está el elemento de diálogo HTML, pero no vamos a usar eso aquí porque es un poco más complicado usarlo con el Jaz alpino El motivo es que hay que abrir y cerrar este elemento de diálogo con un método call y es posible con alpine hacer eso, pero es más fácil hacerlo sin eso. Usamos un div aquí o más bien dos divs. Se trata de dos divs anidadas, esta externa es básicamente toda la pantalla Lo llenará y a la vez también es el telón de fondo, por lo que será un color de fondo gris ligeramente transparente. Dentro de aquí hay otro div que contiene el diálogo real. Veremos cómo se ve eso pronto. Por ahora, pondré una etiqueta H one aquí y escribiré resultado por ahora. El div exterior, necesitamos mostrarlo de alguna manera y para eso, ya tenemos X show, que conocemos. Yo diría que simplemente llamamos a este diálogo abierto. Una nueva propiedad que necesitamos agregar a nuestros datos. Entonces aquí, abrir diálogo será, por supuesto, falso inicialmente porque el diálogo no debería estar ahí cuando inicies el juego. Queremos mostrar el diálogo si el usuario hace clic en el botón siguiente y no hay más preguntas. Entonces aquí he insertado una nueva condición. Así que vamos a comprobar si esto es correcto. Este número de pregunta actual mayor o igual a esta pregunta longitud de punto menos uno, el menos uno faltaba aquí antes. Creo que esto debería ser correcto. Con la última pregunta, el número de pregunta actual es uno, y entonces tenemos mayor o igual a preguntas longitud es dos menos uno es uno, entonces esto volverá aquí. Eso es correcto. Podemos hacer este diálogo abierto igual a true y esto debería abrirse entonces o mostrar el diálogo intentemos esto. Aquí estoy dando las respuestas equivocadas. No importa. Ahora tenemos el siguiente y luego se muestra el diálogo. Aquí solo es H uno, no está centrado y no es visible como diálogo, sino el mecanismo detrás de eso, la lógica es correcta. Tenemos que posicionar esto por encima de cada otro elemento aquí, así que tenemos que poner esa posición fija, algo así. También ese índice debería ser un valor muy alto, algo así como un 1,000. Esa será la diferencia externa y también obtiene un fondo transparente porque funciona como telón de fondo. El div interno aquí es el contenido de diálogo real que contiene nuestro texto y la evaluación de resultados. Estilos, aquí hay bastantes y por eso no los voy a escribir aquí, pero los copio aquí. A lo mejor aquí al final del cuerpo, realmente no importa donde lo pongas. Las reglas aquí se encontrarán en todas partes. Tengo la clase o la regla para el diálogo de clase aquí y para el contenido del diálogo de clase. Ahora tenemos que asignarlo aquí, claro, en consecuencia al DIFS El primero será de diálogo de clase y el interno es de diálogo de clase. Diez. Así que vamos a echar otro vistazo a los estilos aquí. Así que la posición fija, como dije, arriba e izquierda a cero ancho y alto al 100%, así llena la pantalla. El fondo es entonces este negro transparente, por lo que parece un poco grisáceo y translúcido Luego, muestre flex y justifique los elementos de alineación de contenido. centro asegura que el niño dentro se muestre centrado, por supuesto. También es importante que los diálogos se muestren centrados en la pantalla Ese índice, como dije, también se fijó algo muy alto 1,000 aquí, eso debería ser suficiente. El contenido del diálogo no es nada especial en sí mismo, así que hemos establecido el radio fronterizo ocho aquí y Max con 2500, así que qué ganancia más grande que eso. De lo contrario, es el 90% del ancho. ¿Por qué 90%? Porque quieres ver un poco del fondo a la izquierda y a la derecha. Vamos a probarlo. Responde mal y ahora tenemos el diálogo y esto se ve bien. Aquí, el contenido es justamente este H uno. Claro que vamos a cambiar eso ahora, pero el resto se ve bastante bien, diría yo. Por supuesto, necesitamos algo para cerrar el diálogo un botón, algo así, pero creo que el resto parece un diálogo. Para cerrar el diálogo, podemos, por ejemplo, establecer un controlador de clic aquí en segundo plano. No hay problema. Ya hemos configurado un manejador de clics antes, y aquí podemos simplemente establecer diálogo abierto a caídas, que luego cerrará el diálogo, por supuesto Yo también pondría un botón aquí. Un manejador de clics, y voy a hacer lo mismo aquí. Como diálogo abierto es igual a falso. Entonces probemos esto. Si hago clic aquí en el botón. Oh, no hay texto dentro del botón, pero de todas formas, pero da click afuera, funciona. Si hago clic en el botón, también se cierra. Entonces eso está funcionando, pero el problema es, si hago clic aquí en los resultados H uno, también se cerrará, y eso es, por supuesto, no lo que queremos. Podemos hacer lo siguiente. También podemos agregar un manejador de click aquí. Aquí al click y tenemos este evento del dólar, que por cierto también existe sin el dólar, que es una variable global. evento T Windowt es el objeto de evento actual, pero también tenemos este evento dólar que viene de Alpine Usa evento dólar aquí porque Alpine lo está proporcionando, evento dólar, puedo hacer varias cosas aquí en evento, por ejemplo, podría hacer prevenir default aquí, pero también puedo hacer detener la propagación. Esto es lo que voy a hacer aquí. Yo llamo al método stop propagation on event on dollar event, y veamos si esto funciona. Así que ahora puedo hacer clic en el botón y se cierra, y puedo dar click en el fondo y se cierra. Pero si hago clic en resultado aquí en el contenido, no se cierra y eso es lo que queríamos. La propagación de parada impide efectivamente que este evento vaya a la Diff automática y luego provoque el cierre del diálogo. Esto es detener el evento de pro si lo escribes así, no tenemos la posibilidad de obtener parámetros aquí. Si usa add event listener, entonces obtendrá este evento con su callback como parámetro Pero aquí usamos este evento del dólar que Alpine nos está proporcionando. También puedes dejar el dólar y usar el evento global, pero estamos programando aquí en Alpine, usamos dólar. Sabio, este es el mismo objeto. También podemos llamar aquí a esta propagación de parada, que efectivamente está deteniendo el evento a otros manejadores de clic aquí que cerrarán el diálogo para que el diálogo no se cierre porque el evento no está llegando a los otros manejadores de eventos Bueno, como dije, esto es Javascript normal, manejo normal de eventos Dom aquí, no hay diferencia con el objeto de evento normal. Entonces el diálogo está cerrando y abriendo estos trabajos, y ahora podemos poner aquí nuestra evaluación. Entonces, qué porcentaje de los puntos máximos, por ejemplo, el usuario o el jugador ha logrado que podamos poner aquí y dependiendo qué porcentaje habrá una calificación, tal vez un genio de las matemáticas o volver a clases, algo así. Para eso, necesitamos contar los puntos, claro, para las respuestas, y esto lo haremos en el siguiente video. 15. Cuenta puntos: Ahora hablemos de contar puntos. Queremos tener una evaluación al final, claro, necesitamos puntos para eso cuando el jugador haya respondido a una pregunta, se les deben obtener los puntos acreditados. También queremos poder asignar diferentes valores de punto a cada pregunta. Entonces primero tenemos que asignar puntos a nuestro objeto de estado de juego. Aquí están las preguntas y para cada pregunta, también hay puntos. Voy a empezar aquí con la primera pregunta, hay, digamos, cinco puntos. La segunda pregunta es un poco más difícil, así que obtenemos diez puntos por responderla correctamente. Ahora tenemos que ir a la ubicación donde se determina si la pregunta ha sido respondida correctamente, y eso está en nuestro método de check answer en este punto aquí. Aquí hemos determinado que la respuesta es correcta y tenemos que aumentar nuestros puntos aquí. Necesitamos una puntuación total, así que creamos otra propiedad aquí llamada puntos totales. Comienza, por supuesto, con cero y luego se incrementa en consecuencia, así que podemos simplemente incrementar este punto total de puntos en qué? Bueno, necesitamos la pregunta, que ya tenemos aquí. Lo conseguimos de ahí arriba. Por lo que se agregarán puntos de pregunta aquí. Entonces necesitamos mostrar el número de puntos totales al final y por supuesto, la evaluación, pero primero el número abre nuestro diálogo aquí en el siguiente y vemos que hemos llegado a la última pregunta. Después hacemos a continuación, abrimos el cuadro de diálogo y ahí se muestra algo en consecuencia. El resultado y aquí en este div, podemos poner un span aquí, puntos totales y luego después de eso, podemos poner otro span ahí y luego X menos texto. Nuestro atributo alpino aquí para vincular el texto a una propiedad en nuestro objeto en nuestro objeto de datos y aquí simplemente podemos tomar puntos totales y para estar seguros también podemos llamar a dos cadenas aquí para que esto sea realmente una cadena, no un número, pero también funcionaría sin ahora veamos si eso funciona. Ingresemos aquí la respuesta correcta para que podamos obtener puntos, corregir a continuación y luego ingresaremos la equivocada y eso está mal. El total de puntos es de cinco. Y aquí podemos ver que el botón aún no tiene el texto correcto, pero la puntuación es correcta. Este caso está bien y ahora podemos responder ambas preguntas correctamente, primero una y la segunda 144, y luego tenemos 15 como los puntos totales. Eso también está funcionando. Así que vamos arreglar rápidamente el botón aquí. Simplemente podemos escribir cerca aquí. Entonces ahora tenemos que dos puntos totales tenemos también, y ahora también podemos hacer una evaluación. Entonces, por ejemplo, podemos agregar un mensaje de evaluación aquí como una propiedad, por ejemplo, y luego mostrarlo en el cuadro de diálogo mediante enlace de datos. Entonces aquí está el mensaje de resultado, e inicialmente esto está vacío, claro, y aquí vamos a hacer nuestra evaluación ¿qué escribimos aquí? Yo diría que el mensaje de resultado es igual a perfecto y solo sacamos eso, por supuesto, si realmente alcanzamos la puntuación completa. I puntos totales equivale a 15 en este caso. Si está por debajo de eso, podríamos escribir algo como volver a clase de matemáticas, tal vez no muy educado, pero creo que está bien y lo vamos a refinar un poco en el siguiente video Por ahora, esta es nuestra evaluación. O es perfecto o tienes que volver a clase de matemáticas. Vamos a probarlo. Nueve y 44 es la puntuación perfecta entonces y tenemos puntos totales pero no mensaje. Tenemos que, por supuesto, hacer los datos vinculantes aquí sobre este BIF aquí Agregamos otro BIF dentro de esto y esto estará ligado a nuestro mensaje de resultado para que podamos ver la evaluación intentemos de nuevo nueve y 44 Ahora esta vez tenemos perfecto como mensaje y ahora lo hacemos mal, dos veces mal, y luego volvemos a clase de matemáticas. Después de los puntos totales, podemos insertar un espacio en blanco en este punto, y ahora lo intentamos de nuevo y el resultado se ve bien. No es muy detallado aquí por el momento, pero ya funciona. Se cuentan los puntos y luego por supuesto, todavía tenemos que asegurarnos de que la evaluación también sea un poco más inteligente en este momento, estamos haciendo esto con 15 puntos fijos, y en realidad tenemos que calcular el total, el total máximo de puntos porque si agregamos otra pregunta aquí, ya no coincide con los 15 y en realidad tenemos que calcular todo primero. Entonces, cuántos puntos hay en total, y entonces tal vez podamos asumir un porcentaje de eso. Entonces si tienes el 100%, entonces este caso es perfecto, y si tienes menos de diez o algo así, entonces vuelve a la clase de matemáticas. Y entonces algo en el medio y esto va a hacer en el siguiente video. 16. Mejora de la evaluación: Bien, vamos a mejorar un poco la evaluación. Primero, queremos deshacernos de este número mágico aquí, 15. No es bonito, sobre todo si agregas más preguntas. Necesitamos el número total de puntos posibles aquí, no los jugadores, los puntos totales, por supuesto, sino el puntaje máximo alcanzable Así que simplemente podemos escribir la partitura perfecta aquí. Tenemos que calcular eso y podemos hacer esto usando reducir en este punto preguntas, vamos a obtener una pregunta, llamémosla Q y luego devolveremos puntos Q punto. Por supuesto, también necesitamos el valor anterior en reducir la coma anterior Q, y luego simplemente tomamos Q puntos punto más anterior, hemos calculado la suma aquí Hay otras formas de hacer esto. Lo he hecho con reducir aquí, así que simplemente obtenemos la suma de todos los puntos. Esa es la puntuación perfecta y luego simplemente podemos decir que puntuación perfecta es igual a puntos totales, y luego realmente sacamos perfectos aquí. Entonces también podemos decir digamos 50% o más, entonces diremos algo así como no está mal. Necesitamos dividir este punto total de puntos por puntaje perfecto, y será mejor extraerlo en una constante. Vamos a calcular eso aquí y esto se llamará porcentaje. Si el porcentaje es igual a uno, entonces es una puntuación perfecta. Si el porcentaje está por debajo, no está por encima de 0.5, entonces no está mal y de lo contrario volver a la clase de matemáticas. Antes de probarlo, aquí veo un error. No podemos hacer eso así. Aquí necesitamos un valor inicial porque de lo contrario anterior sería una pregunta. Eso significa un objeto de pregunta y no podemos agregar eso, por supuesto, aquí usamos el valor inicial de cero. Entonces es Q puntos punto más cero, y a partir de entonces anterior siempre será un número. Ahora debería funcionar. Vamos a probarlo. Respondamos la primera pregunta correctamente, la segunda pregunta correctamente, y debería conseguir un no mal aquí. Exactamente esto es lo que se muestra. Lo haré al revés. El primero es correcto, nueve y el segundo es demasiado duro para mí, lo contesto incorrectamente y vuelvo a clase de matemáticas. Eso es porque tengo menos del 50% de puntos y eso obviamente es una lástima. Probemos también la puntuación perfecta. Aquí lo tenemos también funcionando. La ventaja de hacerlo de esta manera es que simplemente podemos agregar preguntas aquí. Si agrego aquí una tercera pregunta, si apunta, entonces automáticamente tengo aquí la evaluación correcta. Porcentaje también sería significativo y entonces simplemente puedo dejar esta evaluación ya que es no importa cuántas preguntas más de la mitad de los puntos máximos alcanzables, entonces no está mal Contesto todo correctamente, siempre es perfecto y de otra manera, aquí me sale este mensaje. Eso es básicamente todo para nuestro mini juego aquí, claro, podemos hacer algunas mejoras. Por ejemplo, podemos agregar un reinicio aquí porque al final del juego, tenemos el problema de que no podemos reiniciar a menos que recarguemos la página, lo cual no es muy agradable Podemos agregar un botón aquí que aparece cuando se cierra el diálogo o simplemente podemos reiniciar el juego directamente en el diálogo cuando está cerrado. Creo que eso tiene más sentido tal vez. En lugar de cerrar, podemos decir reiniciar y cuando haces clic en él, vuelves a ver esto y lo hacemos en el siguiente video. Entonces yo diría que eso es todo para nuestro primer mini juego aquí. Entonces se han introducido conceptos alpinos no son de ninguna manera todos ellos, y tampoco he entrado en todos los detalles, pero lo haremos en los próximos videos del curso completo. partir de la siguiente sección, cubriremos las diferentes características del alpino individualmente entonces, y entraré en más detalles sobre las muchas cosas que puedes considerar. Pero aquí, ya has visto cómo funciona aproximadamente y cómo puedes renderizar el enlace de datos y el estado de tu app aquí y también cómo procesar entradas, lo que funciona muy bien en nuestra miniga 17. Reiniciar el juego: Entonces, la última característica que queremos agregar a nuestro juego es reiniciarlo y eso simplemente implicará restablecer todas nuestras propiedades a sus Esto significa que puedo crear un método aquí llamado reset y luego simplemente copiar estas propiedades aquí que necesitan ser restablecidas. Por supuesto, siempre tengo que escribir esto delante de ellos y la sintaxis aún no está del todo bien, pero lo haré ahora y básicamente solo un poco de trabajo manual. Voy a adelantar esto un poco. Ahora deberíamos tenerlo y ese es básicamente el reset completo de todas nuestras propiedades, nuestros estados aquí. De lo contrario, todavía tenemos las preguntas, pero eso es esencialmente algo que no cambia. Son solo datos que simplemente tienen que estar ahí al principio y no van a cambiar. Esto de aquí es esencialmente que nuestro estado puede cambiar y el resto son métodos que simplemente dejamos como están. Ahora necesitamos llamar a Reset, claro, podemos hacer eso en HTML básicamente donde cerramos el diálogo en este momento. En realidad, realmente no necesitamos cerrar el diálogo explícitamente aquí, pero es suficiente simplemente llamar a este restablecimiento de puntos. Yo no escribiría cerca, claro, pero nuevo juego y luego probemos esto. No importa lo que entre aquí, resultado, y luego nuevo juego, y no pasa nada. Comprobamos las herramientas sordas a la consola, y aquí hemos cometido el error de llamar a este punto reset y solo debería ser reset. Una vez más, vamos a probarlo a continuación, nuevo juego y esta vez funciona. Ahora tenemos de nuevo la primera pregunta. Eso es correcto. Lo hemos desbloqueado todo aquí y luego simplemente podemos ingresar la respuesta correcta y aquí también, y luego vemos 15 puntos, puntaje perfecto y esto funciona y puedo reiniciar el juego nuevamente. Por supuesto, es un poco aburrido solo estas dos preguntas de aquí. Por supuesto también podríamos proceder a hacer otras preguntas y luego hacer rondas así, esa sería la primera vuelta. Después viene la segunda vuelta con otras preguntas. Si estuvieras muy mal, tendrías que repetir la ronda otra vez tal vez hacerla un poco más comprensiva así, pero aquí no queremos hacerlo. En cambio, acabamos de terminar después de la primera ronda y simplemente puedes intentarlo nuevamente reiniciando También podríamos agregar una puntuación alta aquí que luego se guarda con dos preguntas, claro, es un poco tonto, pero si tuvieras 100 preguntas o algo así en diferentes rondas, entonces tendría sentido. Tener una puntuación alta aquí. Podrías guardar la puntuación más alta en el almacenamiento local, por ejemplo, que seguirá ahí después de recargar la página entonces Vamos a repasarlo otra vez. Lo podemos ver muy bien en el índice HTML. Lo que usamos, usamos X menos texto para hacer el enlace de datos a las propiedades y por supuesto, más importante aquí es cómo definir componentes. Eso significa cómo activar realmente alpine en un componente en un sub árbol y lo hicimos aquí con el atributo X data. Eso es lo más importante. Con eso, se activa alpino, por así decirlo, para este div aquí, en este caso, para este elemento y todos los elementos a continuación. Esta aquí es la activación y ahí puedes usar estos otros atributos como X texto o X cuatro, este bucle que está casi avanzado, yo diría aquí. Por supuesto, entrada con modelo X. Eso también es muy importante para activar el enlace de datos de dos vías para los elementos de entrada como en la entrada aquí y también en el área de selección y texto. Entonces también tenemos X bind, que une cualquier atributo a las propiedades que tenemos almacenadas en el estado y también tenemos X show, que muestra un elemento u oculta un elemento dependiendo si true o false se devuelve en esta expresión Javascript. Por supuesto, importante aquí en todos estos atributos X, entonces puedes acceder al contexto aquí que se estableció con datos X sin tener que escribir un prefijo como este o algo delante de él, pero simplemente puedes pretender que estas son variables locales o globales como lo hacemos aquí con el botón Mostrar siguiente. También miramos a estos manejadores de eventos, lo cual es, por supuesto, muy importante para las interacciones Al hacer clic en el botón, cuando el usuario hace clic en el botón, entonces se ejecuta este código que está aquí. Aquí, simplemente tienes JavaScript, pero puedes, por supuesto, también llamar a métodos y eso lo hicimos aquí. Este es nuestro estado de juego y todo es básicamente normal Javascript. No hay alpino en él, así que es simplemente un objeto que volvemos aquí en esta función. Este objeto, simplemente podemos acceder a las propiedades que definimos aquí con este punto y luego la propiedad y Alpine JS luego usa este objeto aquí para el enlace de datos y para todos estos se conectan aquí. Creo que es muy notable que podamos simplemente devolver un objeto completamente normal aquí en contraste con otros frameworks que también ofrecen algo así como enlace de datos y administrar nuestro estado aquí así. Realmente no hay ingredientes especiales aquí. Es simplemente Javascript muy normal y por supuesto también puedes usar funciones normales de JavaScript como reducir, por ejemplo, y puedes acceder a todas las propiedades de la manera normal con esto. Eso significa que, por supuesto, también podrías usar la clase aquí y crear un objeto con nuevo. Eso es posible. Yo no lo hice aquí, pero también es necesario desde mi punto de vista aquí, por supuesto, puedes hacerlo. Eso depende de ti porque esta parte de aquí realmente es completamente normal Javascript. Hay algunas funciones Alpine GS, pero para la funcionalidad básica, todo funciona con Javascript simple normal.