Hola. Comenzamos ahora el primer tutorial del último módulo de este primer curso. Vamos, a lo largo de los siguientes tutoriales a usar, en este primero, JQUERY. Cuestiones básicas más que nada para ver cómo podemos hacer uso de los eventos, de los componentes de Bootstrap, y cómo definir opciones de cada uno de estos componentes. Y luego, a lo largo del resto de los de los tutoriales, veremos varias herramientas. Nos vamos a alejar un poquito de Bootstrap para manejar SASS, CSS, herramientas de automatización de tareas y, en general, preparar nuestro proyecto para la puesta en producción. Una tarea que, mejor dicho, varias tareas; es un proceso que se suele hacer con frecuencia. Por eso es importante que lo tengamos automatizado. Eso lo vamos a ver en breve. Ahora concretamente vamos a trabajar con los eventos de los componentes. Dejame mostrarte 2 componentes: Modal y Carousel. Te los voy a mostrar solamente porque vamos a trabajar sobre ellos y cómo podés encontrar esto que haremos en la documentación. Generalmente, en cada componente, hacia el final, vas a tener 2 secciones u opciones, que son las de configuración, después tenés métodos, que en este caso no las voy a usar, de todas formas tenemos uno similar, y eventos, estas tres cosas. Entonces, ¿cómo podemos pensar estas tres cosas? Bueno, por un lado las opciones, las solemos definir en formato de JSON. Es decir, entre llaves, atributo.valor, y, eso se lo aplicamos sobre el elemento en cuestión. Lo seleccionamos con la sintaxis de Jquery y luego ejecutamos el método del constructor, en el caso Modal se llama Modal, suele ser el mismo nombre del componente, y le pasamos el objetito JSON con los atributos que queramos. Los atributos que no pasemos, se va a usar el valor Default. Por eso, siempre tenemos una columna, de tipo Default en el momento de definir las opciones para saber si hace falta definir todas o no. Pese a que algunos componentes que tienen muchos atributos, serÃa bastante engorroso definirlos todos. Acá, por ejemplo, en el caso del Carousel, nosotros usamos el constructor del mismo con el atributo Interval en 2000. Siguiendo la parte de métodos, estos son, justamente su nombre lo indica: métodos. Si viste algo de Java Script, ya sabrás lo que es un método, es la ejecución de un mensaje y, en este caso, Bootstrap ya define varios métodos, con un comportamiento ya programado dentro del componente, que podemos utilizar en cualquier momento para programáticamente, realizar algún tipo de acción con el componente. En el caso de un modal podemos mostrarlo, ocultarlo, cambiarlo de estado. El "Toggle" que se está mostrando se oculta, si está oculto, se muestra. Esto es práctico muchas veces para, si uno tiene un botón que activa o desactiva el modal, para no manejar el estado del modal, uno hace el "Toggle" y, ya sabe que, si se está mostrando y si toca el botón, se oculta; y si está oculto y se toca el botón, se muestra. Pienso que es intuitivo. Y bueno, en el caso de los eventos, son justamente eventos, mensajes, por asà decirlo, que se disparan automáticamente. Es decir, no es que en el caso de un método, nosotros como programadores, vamos a hacer un script que los va a ejecutar, o sea, indicamos su ejecución. El evento, por otro lado, es, por asà decirlo, como un método que uno sabe que se lanza técnicamente se le dice Callback o evento directamente, a los cuales, nosotros nos podremos suscribir, podemos hacer un script que se suscriba al evento de, en este caso, de un modal o lo que tenga un Carousel y nosotros hacer alguna tarea en esas situaciones. No es algo que se haga siempre, ni todos los dÃas, ni se use con muchÃsima frecuencia. Generalmente, uno no trabaja sobre los eventos de los componentes pero, muchas veces es necesario, por eso vamos a ver algunos casos básicos, como para poder experimentar con Jquery y algunos eventos, algunos métodos, etcetera, para que veas, más que nada, cómo se usan y los tengas a mano para cuando te hagan falta. Sólo para mostrarte en el caso del Carousel, fÃjate que la estructura es la misma. Cerca del final tenemos la parte de opciones, intervalos, fÃjate que el default es de 5 segundos, nosotros le hemos bajado a dos, y acá tenes la descripción que te dice, de qué se trata, y tenemos los métodos, podemos decirle que empieza a ciclar, que se frene, que avance, que vaya para atrás, para adelante, que se destruya, etc, y los eventos. Bien, yo elegà en este caso hacer algunos ejercicios con el Modal porque me parece que es más intuitivo, más práctico, para ejercitarnos. Rápidamente podemos entrar en confianza con el uso de eventos. Asà que, si te parece, vamos a chequear que tengamos... Bien, tenemos el servidor corriendo. Lo que vamos a hacer es, un pequeño ejercicio muy simple. Acá tenemos el botón, este botón de contacto, que es este que está aquÃ. Lo que vamos a hacer es agregarle un "ID" primero, porque vamos a hacer algunas cosas. Contacto, agregamos el sufijo, "Btn" y aquà lo que vamos a hacer, es usar la sintaxis de Jquery. FÃjate, en algunos casos usamos comillas doble, y otras veces, comillas simple, es lo mismo. Lo importante es que cuando tengas que usar comillas dentro del aquery, como por ejemplo, acá en los "data atributes", para hacer la búsqueda, si usaste comillas doble afuera, adentro tenés que usar comillas simples, porque si no, el compilador de Java Script no va a ejecutar, va a tirar un error, porque toma como que se ha cerrado un string, en el caso que pongamos comillas doble por ejemplo, que en toda esta primer parte hubiéramos tenido un string sola y acá, intenta como concatenar una variable que no está definida y que no es tal. Entonces, siempre acordate de alternar, si usas comillas dobles afuera por dentro comilla simple o viceversa. Entonces, en este caso, vamos a seleccionar el elemento de contacto BTN, permÃtame chequear que las respuestas ID contacto BTN. Entonces, punto y vamos a ir a la documentación, ideamos supongamos que queremos registrar cuando el modal se abre, entonces tenemos dos Show y Shown ¿cuál es la diferencia? Puedes leer la descripción pero generalmente, usa este patrón Bootstrap, pone, si sabes un poco de inglés, lo que serÃa el verbo en infinitivo y el verbo en participio, para indicar cuándo es el comienzo de la ejecución de una acción y cuando terminó la ejecución de la acción. Entonces Show se dispara inmediatamente cuando se muestra el modal, es decir, que se ejecuta el método Show, es lo mismo, y Shown cuando terminó de ejecutarse ese método. ¿Qué diferencia hay? Una cuestión de tiempo, entonces apenas lo abro y el Shown es apenas se cierra. Con el Java es lo mismo apenas se muestra cuando termina de mostrarse, o cuando termina de ocultarse, perdòn. Depende del uso que vos quieras hacer, bueno, vas a saber que utilizar. No te preocupes ahora por teorizar, lo importante es que entiendas dónde es el momento en el que esto se ejecuta. Hay veces que va a dar exactamente lo mismo cuando lo hagas otras veces no. Por ejemplo, qué caso usar en el show o en el shown, un caso tÃpico puede ser autocompletar, no sé si recordás que, que alguna vez te habìa mencionado, algún algún caso en el tutorial anterior donde si uno abre un formulario con un modal, uno puede, por ejemplo, definir ciertos valores para los campos del formulario de acuerdo a diferentes cosas, circunstancias, este contexto, datos del usuario del hotel que uno seleccionó, etcétera, lo que fuere, entonces, ahà convengo usar el show, para que apenas se abra ya se carguen esos valores y no se perciba como que hubo un tiempo de carga, que sea inmediato para facilitar la experiencia del usuario. Vamos a hacer una selección del contacto BTN y aquà lo que vamos a hacer es suscribirnos al evento Shown.bs, quita como el acrónimo de Bootstrap modal, entonces, para hacer lo que queremos, acá tenés un ejemplo de la sintaxis, pon nombre del evento entre comillas, función, L es porque, cuando se dispara el evento, generalmente esa ejecución del evento viene con objeto, que engloba los datos relacionados con el evento, o sea el evento cuando se dispara puede traer un montón de información sobre qué lugar se hizo y en qué posición del cursor se ejecuta la acción o en el caso un error se trae el error en fin datos asociados al evento y si lo tenés que usar en ese objeto "e" viene dado. No lo vamos a usar ahora, simplemente lo que vamos a hacer usar el mensaje "console.log " esto para escribir en la consola y el modal, ponemos un mensaje en el modal se está mostrando. Bien, el ON esto es sintaxis de Jquery, siempre lo vamos a utilizar dentro de Jquery para suscribir evento, siempre. Entonces,¿ Cómo va a funcionar esto?, ya tuvimos la guÃa teórica pero, para repasar, selector de Jquery, esto cuando aplica genera un Aquery sobre el DOM, sobre todos los elementos que tenemos en nuestro que se están mostrando dentro de nuestra página, busca todo lo que aplica en el Aquery, en este caso con ID contacto Btn uno solo, a esa conexión que tenemos como resultado le aplica la suscripción al evento show.bs modal de la función que va a mostrar este mensaje, no el modal se está mostrando, bien, vamos a probarlo, pero vamos a hacer es abrir la consola para justamente ver el mensaje, tocamos contacto, vamos a definir en la Query la selección del modal que tenÃa como nombre contacto, dejame chequearlo contacto, bien, punto ON sintaxis de Jquery para decir que nos vamos a suscribir un evento. Luego vamos a poner nombre del evento, ahora lo completamos y la función, la letra e mejor dicho el parámetro e que le pasamos, es para que se Jquery vÃa, Jquery cuando lance el evento o el componente de Bootstrap lance el evento, esta función de Jquery, va a recibir vÃa parámetro "e", datos asociados al evento que se esté ejecutando. Bueno, ¿qué evento vamos a suscribirnos? En este caso va ser, vamos a elegir el "show.bs.modal", bien, entonces, podrà s ver, siempre la final, al final tenemos esta parte de eventos y Bootstrap sigue un patrón, por si sabes un poquito de inglés, usa el infinitivo y el participio del mismo verbo que indica una acción. El infinitivo se usa para el comienzo de la acción y el participio para cuando la acción acabó de finalizar. Depende del caso de uso, vos verás que cuál es el que corresponde que uses. Por ejemplo, si al momento de activar una acción, vos necesitas definir los datos de un formulario, los valores para llenar algunos campos del formulario, probablemente te convenga utilizar el show, que es cuando comienza a ejecutarse la acción de mostrar el Modal. Pero bueno, lo verás en cada caso, es que es lo que corresponda. Lo importante es que te acuerdes que tenés esos dos tiempos de ejecución de la acción, cuando comienza y cuando termina de ejecutarse. ¿Qué vamos a hacer? Vamos a hacer algo muy sencillo para el uso de eventos. En principio, vamos a logear. El "console.log" escribe en la consola de desarrollador. Vamos a ir a hoteles, acá en la consola del desarrollador, el mensaje nosotros querramos. Esto es muy útil para lo que se conoce como debugging, debagear algún script de Java Script que estemos implementando, entonces, vamos viendo los resultados y demás. Acá, como nos acabamos de suscribir queremos estar seguros de que esto está funcionando bien. Asà que, para asegurarnos, vamos a escribir el mensaje, "el modal contacto se está mostrando" y probemoslo. Entonces, abrimos el modal y ya tenemos el mensaje. Si querés, podemos agregar el otro evento, el shown, para que veas que se te lanza después. Shown, "el modal contacto se mostró", por ejemplo. Entonces, tocamos, se abre y fÃjate que primero se registra el "se está mostrando" y luego, "el se mostró". Y hay una pequeña diferencia de tiempo, prácticamente imperceptible, pero pequeña diferencia al fin. Y, por último, ya que estamos, vamos a ponerlos los otros dos, como para ver todos los eventos que lanzamos del modal, "hide", "hidden". "El modal contacto se oculta", "... se ocultó", entonces, tocamos el modal, "se está mostrando", "se mostró", "se oculta", "se ocultó". Vale, ¿qué más podemos hacer? Para ver un poquito más de Jquery, lo que podemos hacer es, al momento... Es una pavada, pero sirve para ver qué cosas podemos utilizar con Jquery. Y, como todavÃa no estamos viendo un poco más de programación intensiva, porque no es el caso de este tutorial de Java Script, si sabes un poco de programación en Java Script o... A lo largo de los siguientes cursos, vamos a ver algunos temas más profundos de programación en JavaScript y vas a ver que vamos a empezar a programar sobre estos eventos y sobre todo acciones asociadas a los botones de los clics y demás, que bueno, te va a permitir imaginar qué cosas podemos hacer, o por lo menos que te sirva como idea de qué potencialidades tiene una herramienta como Bootstrap, como los componentes de Bootstrap, para agregar comportamiento. Asà que, ahora vamos a hacer algo muy sencillo, pero, lo interesante es que veas o descubras el potencial que tiene. Bien, entonces vamos a hacer una pavada, cuando se abre el modal, lo que vamos a hacer es cambiar el color del botón. Esto muchas veces se usa en algunos sitios como para, se hacen dos cosas con los botones muchas veces, cuando se abre un modal, o cuando se activa una tarea con un botón. Algunos pueden cambiar el color o algo para indicar que ya fue "clickeado" o visitado, ese... Por ejemplo, suponte que fuera un hotel, muchos por ahà cambian el color del botón para indicarle al usuario que ya visitó ese hotel. No sé si te pasa a vos, pero muchas veces uno cuando está buscando reservar un hotel, ve un montón de hoteles, y a veces, no sabe ya cuáles vio. Entonces, algunas páginas indican como que, ese ya lo visitaste, este ya lo viste, en este ya te hospedaste, o éste ya lo acabaste de revisar. Y, a veces, se puede incluir un icono, poner un texto, o en este caso nosotros vamos a elegir cambiar el color. Y lo otro que se hace muchas veces es deshabilitar el botón hasta que se termine de ejecutar la acción. Esto es... Después vamos a ver lo que es el asincronismo en otro curso pero, muchas veces con una activa un botón o toca un botón, se ejecuta una tarea que tarda en terminar. Si el botón no se deshabilita, ¿qué pasa? El usuario puede, al no percibir que la tarea se está ejecutando, cliquear muchas veces, eso hace que se dispare la ejecución de una tarea gran cantidad de veces, tantas como los clics que haga el usuario. ¿Qué problema tiene eso? Que si la tarea es pesada, es decir, que tarda, suponete cinco segundos, cada clic va agregar cinco segundos más de procesamiento. Por lo tanto, van a pasar un montón de cosas que, no importa entrar en detalle, pero, probablemente, no den una buena experiencia del usuario. ¿Cómo podemos mejorar eso? Bueno, simplemente al hacer clic, deshabilitar el botón. Después, conveniente serÃa, mostrarle un mensaje o indicarle una barra de carga de que la tarea se está ejecutando, que todavÃa no terminó, etc. Pero eso quedará para otro momento. Por lo pronto, lo que podemos hacer es deshabilitar el botón. Aquà lo que vamos a hacer es cambiar el color del botón. Entonces, ¿qué vamos a hacer? Vamos a seleccionar el botón "contacto. Btn", vamos a quitarle la clase, podrÃamos preguntar si la clase ya la atina o no, pero en este caso, vamos a quitar la clase. Jquery tiene un método que es "removeclass". Y, ¿qué clase le vamos a remover? Bueno, le vamos a remover... A ver dónde lo tenemos "contacto.btn" le vamos a remover la de "outline-success", "btn-outline-success" y le vamos a agregar... Esa se la quitamos y le vamos a agregar, por ejemplo, la "default" o "primary", vamos a agregarle la primary. Entonces, cuando se muestra el modal, le vamos a sacar la clase de "outline-access", esto que hace que esté en verde los contornos, y le cambiamos por la clase "primary", se la agregamos. FÃjate, como va quedando ¿ves? ¿Qué pasa?¿ Por qué no cambia después? Bueno, no cambia porque, lo que está pasando es que le removemos una clase después le agregamos la de primary, es decir, se la estamos agregando un montón de veces, ya que la clase de "outline-access" ya no la tiene más. FÃjate, cómo nos queda el botón. La clase la tiene primary. A ver, Jquery ya sabe que la tiene definida. Por lo tanto, en el app de la clase no la vuelve a aplicar, por más que nosotros le digamos constantemente "agrégale la clase Btn-primary". Lo otro que podemos hacer es... Por ejemplo, esto que hemos dicho de deshabilitarlo. Entonces, ¿cómo podemos hacer? Bueno, "prop", esto es para acceder a las propiedades de los elementos seleccionados. "Disabled" "disable:true". Y fÃjate... No sé si notas que ya está deshabilitado. Entonces, supongamos que querramos deshabilitarlo cuando se muestre el Modal, y cuando se oculta lo volvamos a habilitar para evitar esto de los muchos clics. Bueno, esto es tan sencillo como, al momento de que se terminó de ocultar, pasarlo a false. Lo mostramos y lo volvemos a activar. El potencial que tiene los eventos, los métodos de Bootstrap, de los componentes de Bootstrap, y todo el uso de Jquery, es enorme. Lo que te propongo que investigues por tu cuenta, los diferentes componentes, que eventos tiene, practiques, juegues un poco, estudies un poquito más Jquery, vas a ver que la documentación es bastante amplia, lo importante siempre de todas esas herramientas sobre todo, de Squery, es que entiendas la lógica con la que está construida. Que básicamente es esto de tener un selector, luego indicar una acción que la suscripción en un evento, la ejecución de un método, luego este tema de los callsback, de poder pasarle una función que es la que se va a ejecutar, luego de que se ejecute el evento Show.bs.modal, por ejemplo, o el evento clic, si estamos en el clic de un botón y demás, y dentro de esa estructura, una vez que entiendas eso, puedo explorar qué potenciales tiene, qué me permite hacer, qué no. Y después, los proyectos te van a ir llevando a cubrir diferentes necesidades y vos mismo le vas a exigir después a la herramienta qué es lo que estás necesitando, y ahà vas a seguir explorando. No te preocupes ahora por saberte todo lo que te permite hacer una herramienta de memoria porque no tiene sentido. Es preferible que practiques, y asà es la mejor forma que vas a tener de aprender.
