[MÚSICA].
Vamos agora passar algum tempo tentando entender como Bootstrap e
jQuery trabalham juntos para suportar os componentes JavaScript do Bootstrap.
Como entendemos a partir do módulo anterior, Bootstrap tem
uma série de componentes baseados em JavaScript interessantes.
E também aprendemos que os componentes baseados em JavaScript do Bootstrap
são habilitados usando jQuery como suporte.
Muitos desses plugins são escritos em jQuery.
Seus próprios plugins podem ser incluídos individualmente ou
você pode incluir todos os plugins juntos como uma única unidade.
Nos exercícios, temos incluído todos os
plugins JavaScript do Bootstrap em nossa página web.
Também vimos este gráfico no módulo anterior
para nos ajudar a entender a relação entre JavaScript, jQuery e
como os plugins baseados em JS do Bootstrap são implementados.
Então vimos que os componentes JS do Bootstrap são bois nos componentes baseados em JQuery e
tornam mais fácil para nós fazer uso deles em nossa página web.
Também aprendemos que os componentes baseados em JavaScript do Bootstrap podem ser usados
em sua página da Web sem escrever uma única linha de código JavaScript.
Então é aqui que os dados - * atributos vêm para o nosso resgate.
Assim, você pode usar os vários atributos que vimos no
módulo anterior para habilitar muitos dos nossos componentes baseados em JavaScript do Bootstrap.
Caso você queira mais flexibilidade com seus componentes JavaScript
, a flexibilidade total dessa API baseada em JavaScript
está disponível para todos os componentes JavaScript do Bootstrap.
Você pode escrever código usando a sintaxe jQuery e, em seguida, usá-lo
juntos para controlar componentes JS do seu Bootstrap.
Vamos explorar isso com um pouco mais de detalhes neste módulo.
Antes de prosseguir, deixe-me dar-lhe um tour rápido do jQuery e sua sintaxe para
que entendamos alguns dos códigos que vamos escrever neste módulo.
jQuery é uma
biblioteca baseada em JavaScript muito poderoso, leve que fornece uma série de componentes diferentes.
É uma biblioteca rica em recursos que permite escrever código para
fazer manipulação HTML ou DOM.
Ele permite que você faça manipulação CSS.
Então, por exemplo,
você pode aplicar classes CSS a vários elementos HTML através do código jQuery.
Ele permite que você manipule eventos HTML,
e quando esses eventos ocorrem você pode implementar métodos que estão sendo executados
em resposta à ocorrência desses eventos.
jQuery também suporta vários efeitos e
animações que podem ser aplicadas aos seus elementos HTML.
Também jQuery permite que você interaja com um servidor back-end usando AJAX.
Embora não vamos explorar isso com muito detalhe neste curso.
Também aprendemos que os componentes JavaScript do Bootstrap
são construídos sobre jQuery.
Estes componentes fazem uso de muitos dos métodos jQuery que estão disponíveis para
implementar os vários recursos que estes componentes JavaScript Bootstrap suportam.
Vamos entender brevemente a sintaxe jQuery.
Agora, se você viu algum do código que incluímos
no módulo anterior, especificamente para
a dica de ferramenta, lembre-se que havia algo que começou com um cifrão.
Então, a sintaxe jQuery é tudo implementado usando o cifrão.
O cifrão no início de uma frase implica que isso define e
acessa plugins de biblioteca do jQuery que estão disponíveis.
Agora, sempre que usamos o cifrão, você também fornece um seletor.
O seletor é usado para consultar e encontrar esses
elementos HTML dentro do seu DOM para o qual você deseja aplicar essa manipulação.
Existem várias maneiras de fazer seleções.
Vamos olhar para eles no slide subsequente.
Em seguida, o terceiro aspecto de uma instrução jQuery é a ação que você especificar.
Agora que você seleciona um elemento HTML, que tipo de ação você quer ser executada
nesse elemento, de modo que essa é a terceira parte que você verá.
Então, como um exemplo, você pode especificar uma instrução jQuery
como $ (“p”) dentro de códigos e, em seguida, .hide.
Então, neste caso, o que implica é que, selecione todos os elementos HTML
que são os elementos de parágrafo,
começando com a tag p, e então esses elementos escondem esses elementos.
Portanto, a ação a ser executada é a altura,
então isso resultará em todos os elementos p sendo ocultos do seu
DOM, e conseqüentemente da página da Web que é renderizada.
Da mesma forma, você verá mais tarde em nós usando
uma declaração como dizer dólar, e, em
seguida, dentro de aspas, #mycarousel,
implicando que você está especificando o ID de um elemento HTML específico,
e, em seguida, especificando carrossel e pausa.
Vamos olhar para mais detalhes do que isso realmente faz
em um dos slides subseqüentes lá.
Mas observe a estrutura da sintaxe da instrução jQuery lá.
Especifique o seletor e, em seguida, especifique a ação correspondente a ser
executada no elemento selecionado por esses seletores.
Vamos dar uma olhada no exemplo Bootstrap jQuery.
Voltaremos ao exemplo anterior que vimos anteriormente,
onde apresentamos a dica de ferramenta.
Então, quando introduzimos a dica de ferramenta, nós especificamos script e,
em seguida, dentro do script, dissemos $ (documento).
Nesse caso, o documento significa o documento inteiro.
Portanto, o selecionado aqui é para todo o documento.
Então, para todo o documento, e então vamos especificar pronto.
Pronto é a ação a ser tomada.
Então, quando o documento estiver pronto, execute essa função que é
especificada como um parâmetro para essa ação pronta lá.
Então, a função que vimos sendo usada para a dica de ferramenta especificou como $, e,
em seguida, dentro de colchetes, ele disse, data-toggle=” tooltip”.
Agora aqui estamos especificando que selecione os elementos para os
quais há um atributo com data-toggle="tooltip”.
E, em seguida, para os elementos que correspondem a este critério, execute esta ação
chamada habilitar dicas de ferramentas para esses elementos.
E fechamos a função lá.
Então isso especifica que esse script específico
será ativado para os elementos para os quais você aplicou a dica de ferramenta de alternância de dados.
Então, basicamente, para os elementos HTML em que você definiu dicas de ferramentas,
você deseja que a dica de ferramenta seja habilitada lá.
Então é assim que interpretamos esta sintaxe deste exemplo jQuery aqui.
Vejamos as várias maneiras de especificar seletores.
Então, como percebemos a partir da sintaxe instrução jQuery,
sempre seguimos dólar e, em seguida, dentro de colchetes, especificamos um seletor.
Como especificamos seletores, quais são as várias maneiras que você pode especificar seletores?
Aqui estão algumas possibilidades.
Você pode especificar um seletor especificando qualquer
elemento HTML específico especificando a tag.
Então você pode dizer p, button, h4,
h3, ou qualquer uma das tags HTML diretamente.
E assim, nesse caso, o nome da tag HTML é especificado entre aspas e
que formará seu seletor.
Quando você aplica um seletor como este, você está dizendo que todos os elementos que correspondem a
este critério serão selecionados.
Em seguida, você também pode especificar um
elemento DOM HTML específico especificando o ID desse elemento usando o #id.
Então, por exemplo, usamos #myCarousel.
Então, neste caso, você está dizendo selecionar esse
elemento HTML específico para o qual o ID é myCarousel.
Então essa é a outra maneira de selecionar, especificando um ID para um elemento.
A terceira possibilidade é selecionar
elementos pelas classes que se aplicaram a isso.
Assim, por exemplo, você pode ver entre colchetes se você disser .btn, o que
significa que todos os elementos HTML DOM para os
quais você aplicou a classe de botão serão selecionados.
Ou você pode ainda mais qualificar especificando um grupo de classes
dizendo .btn.btn-default, o que significa que aqueles elementos para o
qual classe botão e a classe padrão botão foram ambos aplicados.
Então essa é outra maneira,
usando as classes que são aplicadas ao elemento HTML.
A outra possibilidade é especificar um atributo que foi aplicado
ao elemento HTML.
Assim, por exemplo, você pode dizer que os atributos são especificados dentro de colchetes aqui.
Assim, você pode ver dentro de colchetes href, e incluí-lo na cotação de modo
que significa que todos os elementos HTML para o qual href atributo foi aplicado.
Da mesma forma, você pode dizer data-toggle="tooltip”,
que essencialmente salva todos os elementos para
os quais o atributo data-toggle tooltip foi aplicado.
Além disso, selecionando o elemento atual para o
qual você deseja fazer algo dizendo $ (isto).
Então, significando, para o elemento atual que já foi selecionado, para
isso, faça alguma coisa.
E muitas outras possibilidades.
Então estes são alguns exemplos, então você vai me ver usando alguns destes
nos exemplos e no exercício que se segue.
Não só isso, você também pode especificar eventos jQuery,
eventos com base nos quais você responde.
Assim, por exemplo, as interações do usuário
com vários elementos em sua página da Web causarão eventos DOM.
Assim, por exemplo, com um mouse, o usuário pode clicar em um determinado local.
Ou clique duas vezes, ou quando o mouse entrar e sair de um local específico.
Para o teclado, você pode responder a teclas pressionadas, keydown e keyup.
Eventos para formulários, quando o formulário é enviado,
quando há uma alteração em um determinado
valor de elemento de entrada, e quando um determinado elemento é focado, e assim por diante.
Podemos até falar sobre todo o documento.
Assim, após o carregamento do documento, ao redimensionar o documento,
ao rolar ou descarregar o documento, você pode responder a esses eventos.
Então, nesse caso, os métodos de evento jQuery que são suportados incluem ready,
click, dblclick, mousedown, on, e assim por diante.
Então estes são todos os métodos de evento que
serão executados após a ocorrência de qualquer um desses eventos lá.
Vamos dar um exemplo do Carrossel do Bootstrap para ver como
o código JavaScript pode ser escrito para controlar as ações do carrossel.
Então, para um carrossel, você já viu do módulo anterior, tamanho do índice.
Usamos todos esses atributos.
Então usamos o atributo data-slide="prev|next”, ou
dissemos data-slide-to e, em seguida, especificou o número de slide específico,
onde ele diz data-ride+"carrossel”.
E, em seguida, nós especificamos intervalo de dados,
o intervalo para a ação deslizante para ocorrer.
Assim, para o carrossel, você pode fazer coisas como, por
exemplo, você pode especificar controles baseados em JavaScript.
Você pode ver $, e entre colchetes especificar para selecionar esses elementos,
os carrosséis, que estão incluídos em sua página especificando .carrossel.
Significando todos os elementos para os quais a classe carrossel foi aplicada
e, em seguida, você usa o.carrossel para especificar algo.
Então, como exemplo, você vai me ver usando algo assim
no exercício que se segue.
Vamos dizer .carrossel e carrossel, e
dentro de lá você especificaria interval:2000, o que
significa definir o intervalo para o deslizamento para ser 2000 milissegundos.
Ou dois segundos, neste caso.
Assim, você controla ou modifica uma determinada propriedade
do elemento JavaScript carrossel lá.
O carrossel também suporta muitos outros controles.
Assim, por exemplo, você pode dizer carrossel ('ciclo'), o que
significa começar a pedalar os itens da esquerda para a direita.
Você pode dizer carrossel ('pausa'), para pausar a ação deslizante do carrossel.
Então você pode dizer carrossel (número), para
que ele circule o carrossel para esse item de carrossel específico.
E então você pode dizer carrossel ('prev'),
carrossel ('próximo') para ir para o item anterior e o próximo item no meu carrossel.
Então, estes podem ser invocados diretamente do nosso código JavaScript.
Da mesma forma, quando o
item de carrossel JavaScript está em sua página da Web, ele causa vários eventos.
E com base na ocorrência desses eventos, você pode responder.
Então, por exemplo, você pode dizer slide.bs.carrossel.
Este evento específico será acionado quando o método de instância de slide for invocado.
Da mesma forma, slid.bs.carrossel significa que
este evento é acionado quando tiver concluído a transição do slide para o próximo item.
Então, dentro do seu código, você pode especificar algo
como $ (” #myCarousel “) .on ('slide.bs.carousel'.
Então, o que significa que quando essa ação de slide começa, em seguida, chamar esta função,
e, em seguida, fazer algo dentro dessa função lá.
Portanto, este tipo de código pode ser retornado também
para responder aos eventos que são causados pelo comportamento do seu carrossel.
Tendo considerado alguns desses exemplos, vamos para um exercício onde
vamos realmente escrever algum código baseado em JavaScript para controlar nosso carrossel.
Vamos escrever código para incluir alguns botões dentro do nosso carrossel,
que serão usados para controlar a ação deslizante do carrossel.
Então, o que significa que podemos pausar e retomar a ação deslizante do nosso carrossel.
E vamos ativar esses botões a partir do JavaScript.
[ MUSIC]