[MÚSICA].
Vamos a pasar un tiempo tratando de entender cómo Bootstrap y
jQuery trabajan juntos para apoyar los componentes de JavaScript de Bootstrap.
Como hemos entendido del módulo anterior, Bootstrap tiene
una serie de componentes interesantes basados en JavaScript.
Y también aprendimos que los componentes basados en JavaScript de Bootstrap
están habilitados usando jQuery como soporte.
Muchos de estos plugins están escritos en jQuery.
Sus propios plugins se pueden incluir individualmente o
puede incluir todos los plugins juntos como una sola unidad.
En los ejercicios, hemos estado incluyendo todos los
plugins de JavaScript de Bootstrap en nuestra página web.
También vimos este gráfico en el módulo anterior
para ayudarnos a entender la relación entre JavaScript, jQuery y
cómo se implementan los plugins basados en JS de Bootstrap.
Así que vimos que los componentes JS de Bootstrap buey en los componentes basados en jQuery y
nos facilitan el uso de ellos en nuestra página web.
También aprendimos que los componentes basados en JavaScript de Bootstrap se pueden usar
en su página web sin escribir una sola línea de código JavaScript.
Así que aquí es donde los atributos datos* vienen a nuestro rescate.
Por lo tanto, puede utilizar los diversos atributos que vimos en el
módulo anterior para habilitar muchos de nuestros componentes basados en JavaScript de Bootstrap.
En caso de que desee más flexibilidad con sus componentes JavaScript,
entonces la flexibilidad total de esa API basada en JavaScript
está disponible para todos los componentes de JavaScript de Bootstrap.
Puede escribir código usando la sintaxis jQuery y luego usarlo
juntos para controlar los componentes JS de su Bootstrap.
Vamos a explorar eso con un poco más de detalle en este módulo.
Antes de continuar, permítanme darles un recorrido rápido por jQuery y su sintaxis para
que entienda parte del código que escribiremos en este módulo.
jQuery es una
biblioteca basada en JavaScript muy potente y ligera que proporciona una serie de componentes diferentes.
Es una biblioteca rica en características que permite escribir código para
hacer manipulación HTML o DOM.
Le permite hacer la manipulación de CSS.
Entonces, por ejemplo,
puede aplicar clases CSS a varios elementos HTML a través del código jQuery.
Le permite manejar eventos HTML,
y cuando se producen esos eventos puede implementar métodos que se están ejecutando
en respuesta a la ocurrencia de estos eventos.
jQuery también admite varios efectos y
animaciones que se pueden aplicar a sus elementos HTML.
También jQuery le permite interactuar con un servidor back-end usando AJAX.
Aunque no vamos a explorar eso con demasiados detalles en este curso.
También aprendimos que los componentes JavaScript de Bootstrap
se basan en jQuery.
Estos componentes hacen uso de muchos de los métodos jQuery que están disponibles para
implementar las diversas características que este Bootstrap componentes JavaScript soportan.
Vamos a entender brevemente la sintaxis jQuery.
Ahora bien, si ha visto algo del código que incluimos
en el módulo anterior, específicamente para
la sugerencia de herramienta, recuerde que había algo que comenzó con un signo de dólar.
Por lo tanto, la sintaxis jQuery se implementa usando el signo de dólar.
El signo de dólar al comienzo de una oración implica que esto define y
accede a los complementos de biblioteca de jQuery que están disponibles.
Ahora, cada vez que usamos el signo de dólar, también suministras un selector.
El selector se utiliza para consultar y encontrar aquellos
elementos HTML dentro de su DOM a los que desea aplicar esta manipulación.
Hay varias formas de hacer selecciones.
Los veremos en la siguiente diapositiva.
Entonces, el tercer aspecto de una instrucción jQuery es la acción que especifica.
Ahora que selecciona un elemento HTML, qué tipo de acción desea realizar
en ese elemento, por lo que es la tercera parte que verá.
Entonces, como ejemplo, puede especificar una instrucción jQuery
como $ («p») dentro de los códigos, y luego .hide.
Entonces, en este caso, lo que implica es que, seleccione todos los elementos HTML
que son los elementos del párrafo,
comenzando con la etiqueta p, y luego esos elementos ocultan esos elementos.
Entonces, la acción que se realizará es la altura,
por lo que esto dará como resultado que todos los elementos p se oculten de su
DOM y, en consecuencia, de la página web que se representa.
Del mismo modo, verá más adelante usando
una declaración como decir dólar, y
luego entre comillas, #mycarousel,
lo que implica que está especificando el ID de un elemento HTML específico,
y luego especificando carrusel y pausa.
Vamos a ver más detalles de lo que esto realmente hace
en una de las diapositivas posteriores allí.
Pero tenga en cuenta la estructura de la sintaxis de la declaración jQuery allí.
Especifique el selector y, a continuación, especifique la acción correspondiente
que se realizará en el elemento seleccionado por estos selectores.
Echemos un vistazo al ejemplo de Bootstrap jQuery.
Volveremos al ejemplo anterior que hemos visto anteriormente,
donde presentamos la información sobre herramientas.
Por lo tanto, cuando presentamos la información sobre herramientas, especificamos el script y
luego dentro del script, dijimos $ (documento).
En este caso, el documento significa todo el documento.
Así que el seleccionado aquí es para todo el documento.
Así que para todo el documento, y luego especificaremos listo.
Listo está la acción a tomar.
Entonces, cuando el documento esté listo, ejecute esta función que se
especifica como parámetro para esta acción lista allí.
Entonces, la función que vimos que se usaba para la información sobre herramientas lo especificó como $, y
luego entre corchetes, dijo, data-toggle=» información sobre herramientas».
Ahora aquí estamos especificando que seleccione aquellos elementos para los
que hay un atributo con data-toggle="tooltip».
Y, a continuación, para aquellos elementos que coincidan con este criterio, realice esta acción
llamada habilitar información de herramientas para esos elementos.
Y cerramos la función allí.
Así que esto especifica que esta secuencia de comandos en particular
se activará para aquellos elementos para los que ha aplicado la información de herramientas de alternar datos.
Entonces, básicamente, para aquellos elementos HTML en los que ha definido información de herramientas,
desea que la información sobre herramientas esté habilitada allí.
Así es como interpretamos esta sintaxis de este ejemplo jQuery aquí.
Veamos las diversas formas de especificar selectores.
Entonces, como nos damos cuenta de la sintaxis de la declaración jQuery,
siempre seguimos el dólar y luego, entre corchetes, especificamos un selector.
¿ Cómo especificamos los selectores, cuáles son las diversas formas en que puede especificar selectores?
Aquí hay algunas posibilidades.
Puede especificar un selector especificando cualquier
elemento HTML específico especificando la etiqueta.
Así que puede decir p, botón, h4,
h3, o cualquiera de las etiquetas HTML directamente.
Y así, en ese caso, el nombre de la etiqueta HTML se especifica entre comillas y
eso formará su selector.
Cuando aplica un selector como este, está diciendo que se
seleccionarán todos los elementos que coincidan con este criterio.
A continuación, también puede especificar un
elemento HTML DOM específico especificando el ID de ese elemento mediante el #id.
Entonces, por ejemplo, usamos #myCarousel.
Entonces, en este caso, está diciendo que seleccione ese
elemento HTML particular para el que el ID es myCarousel.
Así que esa es la otra forma de seleccionar, especificando un ID para un elemento.
La tercera posibilidad es seleccionar
elementos por las clases que se han aplicado a eso.
Entonces, por ejemplo, puede ver entre corchetes si dice .btn,
lo que significa que se
seleccionarán todos los elementos DOM HTML para los que ha aplicado la clase de botón.
O incluso puede calificar aún más especificando un grupo de clases
diciendo .btn.btn-default, lo que significa que se
han aplicado los elementos para los que la clase de botón y la clase predeterminada del botón.
Así que esa es otra forma,
mediante el uso de las clases que se aplican al elemento HTML.
La otra posibilidad es especificar un atributo que se ha aplicado
al elemento HTML.
Entonces, por ejemplo, puede decir que los atributos se especifican entre corchetes aquí.
Así que se puede ver entre corchetes href, e incluirlo en la cita de modo
que significa que todos los elementos HTML para los que se ha aplicado el atributo href.
Del mismo modo, puede decir data-toggle="tooltip»,
que esencialmente guarda todos aquellos elementos para
los que se ha aplicado el atributo data-alternar tooltip.
Además, seleccione el elemento actual para el
que desea hacer algo diciendo $ (this).
Entonces, lo que significa, para el elemento actual que ya ha sido seleccionado, para
esto, haga algo.
Y muchas otras posibilidades.
Así que estos son algunos ejemplos, así que me verán usando algunos de estos
en los ejemplos y en el ejercicio que sigue.
No solo eso, también puede especificar eventos jQuery,
eventos basados en los que responde.
Entonces, por ejemplo, las interacciones del usuario
con varios elementos en su página web causarán eventos DOM.
Entonces, por ejemplo, con un mouse, el usuario puede hacer clic en una ubicación particular.
O haga doble clic, o cuando el ratón entre y salga de una ubicación específica.
Para el teclado puede responder a las pulsaciones de teclas, teclas y teclas hacia arriba.
Eventos para formularios, cuando se envía el formulario,
cuando hay un cambio en un
valor determinado de elemento de entrada, cuando se centra un elemento en particular, y así sucesivamente.
Incluso podemos hablar de todo el documento.
Por lo tanto, al cargar el documento, al cambiar el tamaño del documento,
al desplazarse o descargar el documento, puede responder a esos eventos.
Entonces, en ese caso, los Métodos de evento jQuery que son compatibles incluyen ready
, click, dblclick, mousedown, etc.
Entonces, estos son todos los métodos de evento que
se ejecutarán tras la ocurrencia de cualquiera de estos eventos allí.
Tomemos un ejemplo del Carrusel de Bootstrap para ver cómo
se puede escribir código JavaScript para controlar las acciones del carrusel.
Entonces, para un carrusel, ya viste desde el módulo anterior, el tamaño del índice.
Usamos todos estos atributos.
Así que usamos el atributo data-slide="prev|next», o
dijimos data-slide-to y luego especificamos el número de diapositiva específico,
donde dice data-ride+"carrusel».
Y luego hemos especificado el intervalo de datos, el intervalo para
que la acción de deslizamiento tenga lugar.
Entonces, para el carrusel, puede hacer cosas como, por
ejemplo, puede especificar controles basados en JavaScript.
Puede ver $, y entre corchetes especificar para seleccionar aquellos elementos,
los carruseles, que se incluyen en su página especificando .carousel.
Significa todos aquellos elementos para los que se ha aplicado la clase de carrusel,
y después de eso se utiliza el .carrusel para especificar algo.
Entonces, como ejemplo, me verás usando algo como esto
en el ejercicio que sigue.
Diremos .carrusel y carrusel, y
dentro de allí especificaría el intervalo: 2000,
lo que significa establecer el intervalo para el deslizamiento en 2000 milisegundos.
O dos segundos, en este caso.
Así que de esa manera controlas o modificas una propiedad particular
del elemento JavaScript del carrusel allí.
El carrusel también soporta muchos otros controles.
Entonces, por ejemplo, puedes decir carrusel ('ciclo'),
lo que significa comenzar el ciclo de los elementos de izquierda a derecha.
Se puede decir carrusel ('pausa'), para pausar la acción deslizante del carrusel.
Entonces puedes decir carrusel (número), por
lo que hace ciclos el carrusel a ese artículo particular del carrusel.
Y luego puedes decir carrusel ('anterior'),
carrusel ('siguiente') para ir al ítem anterior y el siguiente ítem en mi carrusel.
Por lo tanto, estos se pueden invocar directamente desde nuestro código JavaScript.
Del mismo modo, cuando el
elemento del carrusel de JavaScript está en su página web, provoca varios eventos.
Y en función de la ocurrencia de estos eventos, puede responder.
Entonces, por ejemplo, puedes decir slide.bs.carrusel.
Este evento en particular se activará cuando se invoca el método de instancia de diapositiva.
Del mismo modo, slid.bs.carousel significa que
este evento se activa cuando ha completado la transición de diapositiva al siguiente elemento.
Entonces, dentro de su código puede especificar algo
como $ (» #myCarousel «) .on ('slide.bs.carousel'.
Lo que significa que cuando se inicia esa acción de diapositiva, entonces invoque esta función
y luego haga algo dentro de esa función allí.
Por lo tanto, este tipo de código se puede devolver también para
responder a los eventos que son causados por el comportamiento de su carrusel.
Habiendo considerado algunos de estos ejemplos, pasaremos a un ejercicio en el que
escribiremos código basado en JavaScript para controlar nuestro carrusel.
Escribiremos código para incluir un par de botones dentro de nuestro carrusel,
que se usarán para controlar la acción deslizante del carrusel.
Entonces, lo que significa que podemos hacer una pausa y reanudar la acción deslizante de nuestro carrusel.
Y activaremos estos botones desde JavaScript.
[ MÚSICA]