1
00:00:00,000 --> 00:00:04,563
[MÚSICA].

2
00:00:04,563 --> 00:00:09,231
Vamos agora passar algum tempo tentando entender como Bootstrap e

3
00:00:09,231 --> 00:00:14,770
jQuery trabalham juntos para suportar os componentes JavaScript do Bootstrap.

4
00:00:16,310 --> 00:00:21,110
Como entendemos a partir do módulo anterior, Bootstrap tem

5
00:00:21,110 --> 00:00:26,410
uma série de componentes baseados em JavaScript interessantes.

6
00:00:26,410 --> 00:00:30,871
E também aprendemos que os componentes baseados em JavaScript do Bootstrap

7
00:00:30,871 --> 00:00:34,440
são habilitados usando jQuery como suporte.

8
00:00:34,440 --> 00:00:38,160
Muitos desses plugins são escritos em jQuery.

9
00:00:38,160 --> 00:00:41,780
Seus próprios plugins podem ser incluídos individualmente ou

10
00:00:41,780 --> 00:00:45,950
você pode incluir todos os plugins juntos como uma única unidade.

11
00:00:45,950 --> 00:00:50,350
Nos exercícios, temos incluído todos os

12
00:00:50,350 --> 00:00:53,815
plugins JavaScript do Bootstrap em nossa página web.

13
00:00:55,040 --> 00:00:58,350
Também vimos este gráfico no módulo anterior

14
00:00:58,350 --> 00:01:03,160
para nos ajudar a entender a relação entre JavaScript, jQuery e

15
00:01:03,160 --> 00:01:07,740
como os plugins baseados em JS do Bootstrap são implementados.

16
00:01:07,740 --> 00:01:14,820
Então vimos que os componentes JS do Bootstrap são bois nos componentes baseados em JQuery e

17
00:01:14,820 --> 00:01:18,538
tornam mais fácil para nós fazer uso deles em nossa página web.

18
00:01:18,538 --> 00:01:25,200
Também aprendemos que os componentes baseados em JavaScript do Bootstrap podem ser usados

19
00:01:25,200 --> 00:01:31,010
em sua página da Web sem escrever uma única linha de código JavaScript.

20
00:01:31,010 --> 00:01:38,860
Então é aqui que os dados - * atributos vêm para o nosso resgate.

21
00:01:38,860 --> 00:01:44,133
Assim, você pode usar os vários atributos que vimos no

22
00:01:44,133 --> 00:01:50,910
módulo anterior para habilitar muitos dos nossos componentes baseados em JavaScript do Bootstrap.

23
00:01:50,910 --> 00:01:55,705
Caso você queira mais flexibilidade com seus componentes JavaScript

24
00:01:55,705 --> 00:02:00,405
, a flexibilidade total dessa API baseada em JavaScript

25
00:02:00,405 --> 00:02:05,565
está disponível para todos os componentes JavaScript do Bootstrap.

26
00:02:05,565 --> 00:02:10,875
Você pode escrever código usando a sintaxe jQuery e, em seguida, usá-lo

27
00:02:10,875 --> 00:02:16,025
juntos para controlar componentes JS do seu Bootstrap.

28
00:02:16,025 --> 00:02:20,350
Vamos explorar isso com um pouco mais de detalhes neste módulo.

29
00:02:20,350 --> 00:02:26,080
Antes de prosseguir, deixe-me dar-lhe um tour rápido do jQuery e sua sintaxe para

30
00:02:26,080 --> 00:02:32,030
que entendamos alguns dos códigos que vamos escrever neste módulo.

31
00:02:32,030 --> 00:02:33,830
jQuery é uma

32
00:02:33,830 --> 00:02:39,810
biblioteca baseada em JavaScript muito poderoso, leve que fornece uma série de componentes diferentes.

33
00:02:39,810 --> 00:02:45,100
É uma biblioteca rica em recursos que permite escrever código para

34
00:02:45,100 --> 00:02:47,880
fazer manipulação HTML ou DOM.

35
00:02:47,880 --> 00:02:50,170
Ele permite que você faça manipulação CSS.

36
00:02:50,170 --> 00:02:50,910
Então, por exemplo,

37
00:02:50,910 --> 00:02:56,840
você pode aplicar classes CSS a vários elementos HTML através do código jQuery.

38
00:02:56,840 --> 00:03:00,860
Ele permite que você manipule eventos HTML,

39
00:03:00,860 --> 00:03:05,920
e quando esses eventos ocorrem você pode implementar métodos que estão sendo executados

40
00:03:05,920 --> 00:03:08,565
em resposta à ocorrência desses eventos.

41
00:03:08,565 --> 00:03:11,160
jQuery também suporta vários efeitos e

42
00:03:11,160 --> 00:03:15,410
animações que podem ser aplicadas aos seus elementos HTML.

43
00:03:15,410 --> 00:03:22,650
Também jQuery permite que você interaja com um servidor back-end usando AJAX.

44
00:03:22,650 --> 00:03:27,390
Embora não vamos explorar isso com muito detalhe neste curso.

45
00:03:27,390 --> 00:03:31,937
Também aprendemos que os componentes JavaScript do Bootstrap

46
00:03:31,937 --> 00:03:34,310
são construídos sobre jQuery.

47
00:03:34,310 --> 00:03:39,480
Estes componentes fazem uso de muitos dos métodos jQuery que estão disponíveis para

48
00:03:39,480 --> 00:03:45,340
implementar os vários recursos que estes componentes JavaScript Bootstrap suportam.

49
00:03:45,340 --> 00:03:48,120
Vamos entender brevemente a sintaxe jQuery.

50
00:03:48,120 --> 00:03:53,150
Agora, se você viu algum do código que incluímos

51
00:03:53,150 --> 00:03:57,700
no módulo anterior, especificamente para

52
00:03:57,700 --> 00:04:03,210
a dica de ferramenta, lembre-se que havia algo que começou com um cifrão.

53
00:04:03,210 --> 00:04:09,780
Então, a sintaxe jQuery é tudo implementado usando o cifrão.

54
00:04:09,780 --> 00:04:19,113
O cifrão no início de uma frase implica que isso define e

55
00:04:19,113 --> 00:04:26,070
acessa plugins de biblioteca do jQuery que estão disponíveis.

56
00:04:26,070 --> 00:04:31,070
Agora, sempre que usamos o cifrão, você também fornece um seletor.

57
00:04:31,070 --> 00:04:34,920
O seletor é usado para consultar e encontrar esses

58
00:04:34,920 --> 00:04:40,270
elementos HTML dentro do seu DOM para o qual você deseja aplicar essa manipulação.

59
00:04:40,270 --> 00:04:42,795
Existem várias maneiras de fazer seleções.

60
00:04:42,795 --> 00:04:46,030
Vamos olhar para eles no slide subsequente.

61
00:04:47,550 --> 00:04:54,670
Em seguida, o terceiro aspecto de uma instrução jQuery é a ação que você especificar.

62
00:04:54,670 --> 00:04:59,390
Agora que você seleciona um elemento HTML, que tipo de ação você quer ser executada

63
00:04:59,390 --> 00:05:02,700
nesse elemento, de modo que essa é a terceira parte que você verá.

64
00:05:02,700 --> 00:05:09,032
Então, como um exemplo, você pode especificar uma instrução jQuery

65
00:05:09,032 --> 00:05:15,540
como $ (“p”) dentro de códigos e, em seguida, .hide.

66
00:05:15,540 --> 00:05:20,268
Então, neste caso, o que implica é que, selecione todos os elementos HTML

67
00:05:20,268 --> 00:05:24,690
que são os elementos de parágrafo,

68
00:05:24,690 --> 00:05:30,440
começando com a tag p, e então esses elementos escondem esses elementos.

69
00:05:30,440 --> 00:05:33,210
Portanto, a ação a ser executada é a altura,

70
00:05:33,210 --> 00:05:38,150
então isso resultará em todos os elementos p sendo ocultos do seu

71
00:05:39,400 --> 00:05:43,050
DOM, e conseqüentemente da página da Web que é renderizada.

72
00:05:44,510 --> 00:05:49,165
Da mesma forma, você verá mais tarde em nós usando

73
00:05:49,165 --> 00:05:53,288
uma declaração como dizer dólar, e, em

74
00:05:53,288 --> 00:05:58,608
seguida, dentro de aspas, #mycarousel,

75
00:05:58,608 --> 00:06:06,189
implicando que você está especificando o ID de um elemento HTML específico,

76
00:06:06,189 --> 00:06:10,970
e, em seguida, especificando carrossel e pausa.

77
00:06:10,970 --> 00:06:14,340
Vamos olhar para mais detalhes do que isso realmente faz

78
00:06:14,340 --> 00:06:16,930
em um dos slides subseqüentes lá.

79
00:06:16,930 --> 00:06:22,870
Mas observe a estrutura da sintaxe da instrução jQuery lá.

80
00:06:22,870 --> 00:06:27,040
Especifique o seletor e, em seguida, especifique a ação correspondente a ser

81
00:06:27,040 --> 00:06:32,360
executada no elemento selecionado por esses seletores.

82
00:06:32,360 --> 00:06:36,335
Vamos dar uma olhada no exemplo Bootstrap jQuery.

83
00:06:36,335 --> 00:06:41,490
Voltaremos ao exemplo anterior que vimos anteriormente,

84
00:06:41,490 --> 00:06:43,410
onde apresentamos a dica de ferramenta.

85
00:06:43,410 --> 00:06:47,480
Então, quando introduzimos a dica de ferramenta, nós especificamos script e,

86
00:06:47,480 --> 00:06:50,940
em seguida, dentro do script, dissemos $ (documento).

87
00:06:50,940 --> 00:06:53,800
Nesse caso, o documento significa o documento inteiro.

88
00:06:53,800 --> 00:06:56,510
Portanto, o selecionado aqui é para todo o documento.

89
00:06:56,510 --> 00:07:01,010
Então, para todo o documento, e então vamos especificar pronto.

90
00:07:01,010 --> 00:07:02,790
Pronto é a ação a ser tomada.

91
00:07:02,790 --> 00:07:07,760
Então, quando o documento estiver pronto, execute essa função que é

92
00:07:07,760 --> 00:07:11,500
especificada como um parâmetro para essa ação pronta lá.

93
00:07:11,500 --> 00:07:17,710
Então, a função que vimos sendo usada para a dica de ferramenta especificou como $, e,

94
00:07:17,710 --> 00:07:23,470
em seguida, dentro de colchetes, ele disse, data-toggle=” tooltip”.

95
00:07:23,470 --> 00:07:28,240
Agora aqui estamos especificando que selecione os elementos para os

96
00:07:28,240 --> 00:07:33,260
quais há um atributo com data-toggle="tooltip”.

97
00:07:33,260 --> 00:07:38,290
E, em seguida, para os elementos que correspondem a este critério, execute esta ação

98
00:07:38,290 --> 00:07:43,270
chamada habilitar dicas de ferramentas para esses elementos.

99
00:07:43,270 --> 00:07:47,580
E fechamos a função lá.

100
00:07:47,580 --> 00:07:52,890
Então isso especifica que esse script específico

101
00:07:52,890 --> 00:07:57,640
será ativado para os elementos para os quais você aplicou a dica de ferramenta de alternância de dados.

102
00:07:57,640 --> 00:08:02,840
Então, basicamente, para os elementos HTML em que você definiu dicas de ferramentas,

103
00:08:02,840 --> 00:08:05,770
você deseja que a dica de ferramenta seja habilitada lá.

104
00:08:05,770 --> 00:08:12,800
Então é assim que interpretamos esta sintaxe deste exemplo jQuery aqui.

105
00:08:12,800 --> 00:08:18,340
Vejamos as várias maneiras de especificar seletores.

106
00:08:18,340 --> 00:08:23,490
Então, como percebemos a partir da sintaxe instrução jQuery,

107
00:08:23,490 --> 00:08:28,240
sempre seguimos dólar e, em seguida, dentro de colchetes, especificamos um seletor.

108
00:08:28,240 --> 00:08:32,990
Como especificamos seletores, quais são as várias maneiras que você pode especificar seletores?

109
00:08:32,990 --> 00:08:35,450
Aqui estão algumas possibilidades.

110
00:08:35,450 --> 00:08:38,900
Você pode especificar um seletor especificando qualquer

111
00:08:38,900 --> 00:08:41,960
elemento HTML específico especificando a tag.

112
00:08:41,960 --> 00:08:46,050
Então você pode dizer p, button, h4,

113
00:08:46,050 --> 00:08:50,315
h3, ou qualquer uma das tags HTML diretamente.

114
00:08:50,315 --> 00:08:54,725
E assim, nesse caso, o nome da tag HTML é especificado entre aspas e

115
00:08:54,725 --> 00:08:56,475
que formará seu seletor.

116
00:08:56,475 --> 00:09:00,225
Quando você aplica um seletor como este, você está dizendo que todos os elementos que correspondem a

117
00:09:00,225 --> 00:09:05,673
este critério serão selecionados.

118
00:09:06,950 --> 00:09:11,920
Em seguida, você também pode especificar um

119
00:09:11,920 --> 00:09:16,640
elemento DOM HTML específico especificando o ID desse elemento usando o #id.

120
00:09:16,640 --> 00:09:20,990
Então, por exemplo, usamos #myCarousel.

121
00:09:20,990 --> 00:09:26,480
Então, neste caso, você está dizendo selecionar esse

122
00:09:26,480 --> 00:09:31,119
elemento HTML específico para o qual o ID é myCarousel.

123
00:09:31,119 --> 00:09:36,500
Então essa é a outra maneira de selecionar, especificando um ID para um elemento.

124
00:09:37,550 --> 00:09:40,620
A terceira possibilidade é selecionar

125
00:09:40,620 --> 00:09:44,440
elementos pelas classes que se aplicaram a isso.

126
00:09:44,440 --> 00:09:50,180
Assim, por exemplo, você pode ver entre colchetes se você disser .btn, o que

127
00:09:50,180 --> 00:09:53,477
significa que todos os elementos HTML DOM para os

128
00:09:53,477 --> 00:09:58,702
quais você aplicou a classe de botão serão selecionados.

129
00:09:58,702 --> 00:10:03,670
Ou você pode ainda mais qualificar especificando um grupo de classes

130
00:10:03,670 --> 00:10:08,550
dizendo .btn.btn-default, o que significa que aqueles elementos para o

131
00:10:08,550 --> 00:10:14,080
qual classe botão e a classe padrão botão foram ambos aplicados.

132
00:10:15,290 --> 00:10:16,620
Então essa é outra maneira,

133
00:10:16,620 --> 00:10:19,607
usando as classes que são aplicadas ao elemento HTML.

134
00:10:20,630 --> 00:10:25,070
A outra possibilidade é especificar um atributo que foi aplicado

135
00:10:25,070 --> 00:10:27,120
ao elemento HTML.

136
00:10:27,120 --> 00:10:33,150
Assim, por exemplo, você pode dizer que os atributos são especificados dentro de colchetes aqui.

137
00:10:33,150 --> 00:10:38,640
Assim, você pode ver dentro de colchetes href, e incluí-lo na cotação de modo

138
00:10:38,640 --> 00:10:44,370
que significa que todos os elementos HTML para o qual href atributo foi aplicado.

139
00:10:44,370 --> 00:10:47,920
Da mesma forma, você pode dizer data-toggle="tooltip”,

140
00:10:47,920 --> 00:10:50,630
que essencialmente salva todos os elementos para

141
00:10:50,630 --> 00:10:53,745
os quais o atributo data-toggle tooltip foi aplicado.

142
00:10:53,745 --> 00:10:59,270
Além disso, selecionando o elemento atual para o

143
00:10:59,270 --> 00:11:04,900
qual você deseja fazer algo dizendo $ (isto).

144
00:11:04,900 --> 00:11:08,360
Então, significando, para o elemento atual que já foi selecionado, para

145
00:11:08,360 --> 00:11:10,360
isso, faça alguma coisa.

146
00:11:11,520 --> 00:11:14,900
E muitas outras possibilidades.

147
00:11:14,900 --> 00:11:19,760
Então estes são alguns exemplos, então você vai me ver usando alguns destes

148
00:11:19,760 --> 00:11:23,610
nos exemplos e no exercício que se segue.

149
00:11:24,650 --> 00:11:29,950
Não só isso, você também pode especificar eventos jQuery,

150
00:11:29,950 --> 00:11:34,840
eventos com base nos quais você responde.

151
00:11:34,840 --> 00:11:37,720
Assim, por exemplo, as interações do usuário

152
00:11:37,720 --> 00:11:42,590
com vários elementos em sua página da Web causarão eventos DOM.

153
00:11:42,590 --> 00:11:47,220
Assim, por exemplo, com um mouse, o usuário pode clicar em um determinado local.

154
00:11:47,220 --> 00:11:52,790
Ou clique duas vezes, ou quando o mouse entrar e sair de um local específico.

155
00:11:52,790 --> 00:11:56,880
Para o teclado, você pode responder a teclas pressionadas, keydown e keyup.

156
00:11:57,980 --> 00:12:01,680
Eventos para formulários, quando o formulário é enviado,

157
00:12:01,680 --> 00:12:05,870
quando há uma alteração em um determinado

158
00:12:07,040 --> 00:12:13,230
valor de elemento de entrada, e quando um determinado elemento é focado, e assim por diante.

159
00:12:13,230 --> 00:12:16,140
Podemos até falar sobre todo o documento.

160
00:12:16,140 --> 00:12:20,080
Assim, após o carregamento do documento, ao redimensionar o documento,

161
00:12:20,080 --> 00:12:24,920
ao rolar ou descarregar o documento, você pode responder a esses eventos.

162
00:12:24,920 --> 00:12:31,253
Então, nesse caso, os métodos de evento jQuery que são suportados incluem ready,

163
00:12:31,253 --> 00:12:35,140
click, dblclick, mousedown, on, e assim por diante.

164
00:12:35,140 --> 00:12:38,430
Então estes são todos os métodos de evento que

165
00:12:38,430 --> 00:12:42,770
serão executados após a ocorrência de qualquer um desses eventos lá.

166
00:12:43,850 --> 00:12:48,480
Vamos dar um exemplo do Carrossel do Bootstrap para ver como

167
00:12:48,480 --> 00:12:53,640
o código JavaScript pode ser escrito para controlar as ações do carrossel.

168
00:12:54,980 --> 00:13:01,490
Então, para um carrossel, você já viu do módulo anterior, tamanho do índice.

169
00:13:01,490 --> 00:13:03,584
Usamos todos esses atributos.

170
00:13:03,584 --> 00:13:08,250
Então usamos o atributo data-slide="prev|next”, ou

171
00:13:08,250 --> 00:13:13,780
dissemos data-slide-to e, em seguida, especificou o número de slide específico,

172
00:13:13,780 --> 00:13:16,910
onde ele diz data-ride+"carrossel”.

173
00:13:16,910 --> 00:13:21,570
E, em seguida, nós especificamos intervalo de dados,

174
00:13:21,570 --> 00:13:25,800
o intervalo para a ação deslizante para ocorrer.

175
00:13:25,800 --> 00:13:29,590
Assim, para o carrossel, você pode fazer coisas como, por

176
00:13:29,590 --> 00:13:33,076
exemplo, você pode especificar controles baseados em JavaScript.

177
00:13:33,076 --> 00:13:38,674
Você pode ver $, e entre colchetes especificar para selecionar esses elementos,

178
00:13:38,674 --> 00:13:44,565
os carrosséis, que estão incluídos em sua página especificando .carrossel.

179
00:13:44,565 --> 00:13:50,577
Significando todos os elementos para os quais a classe carrossel foi aplicada

180
00:13:50,577 --> 00:13:56,700
e, em seguida, você usa o.carrossel para especificar algo.

181
00:13:56,700 --> 00:14:00,580
Então, como exemplo, você vai me ver usando algo assim

182
00:14:00,580 --> 00:14:02,090
no exercício que se segue.

183
00:14:02,090 --> 00:14:05,400
Vamos dizer .carrossel e carrossel, e

184
00:14:05,400 --> 00:14:09,409
dentro de lá você especificaria interval:2000, o que

185
00:14:09,409 --> 00:14:15,140
significa definir o intervalo para o deslizamento para ser 2000 milissegundos.

186
00:14:15,140 --> 00:14:17,620
Ou dois segundos, neste caso.

187
00:14:17,620 --> 00:14:22,850
Assim, você controla ou modifica uma determinada propriedade

188
00:14:22,850 --> 00:14:27,890
do elemento JavaScript carrossel lá.

189
00:14:27,890 --> 00:14:32,160
O carrossel também suporta muitos outros controles.

190
00:14:32,160 --> 00:14:35,020
Assim, por exemplo, você pode dizer carrossel ('ciclo'), o que

191
00:14:35,020 --> 00:14:38,730
significa começar a pedalar os itens da esquerda para a direita.

192
00:14:38,730 --> 00:14:44,410
Você pode dizer carrossel ('pausa'), para pausar a ação deslizante do carrossel.

193
00:14:44,410 --> 00:14:48,171
Então você pode dizer carrossel (número), para

194
00:14:48,171 --> 00:14:53,441
que ele circule o carrossel para esse item de carrossel específico.

195
00:14:53,441 --> 00:14:56,370
E então você pode dizer carrossel ('prev'),

196
00:14:56,370 --> 00:15:01,710
carrossel ('próximo') para ir para o item anterior e o próximo item no meu carrossel.

197
00:15:01,710 --> 00:15:07,420
Então, estes podem ser invocados diretamente do nosso código JavaScript.

198
00:15:07,420 --> 00:15:10,390
Da mesma forma, quando o

199
00:15:12,280 --> 00:15:17,550
item de carrossel JavaScript está em sua página da Web, ele causa vários eventos.

200
00:15:17,550 --> 00:15:20,870
E com base na ocorrência desses eventos, você pode responder.

201
00:15:20,870 --> 00:15:23,980
Então, por exemplo, você pode dizer slide.bs.carrossel.

202
00:15:23,980 --> 00:15:28,220
Este evento específico será acionado quando o método de instância de slide for invocado.

203
00:15:29,550 --> 00:15:32,990
Da mesma forma, slid.bs.carrossel significa que

204
00:15:32,990 --> 00:15:38,460
este evento é acionado quando tiver concluído a transição do slide para o próximo item.

205
00:15:38,460 --> 00:15:41,880
Então, dentro do seu código, você pode especificar algo

206
00:15:43,370 --> 00:15:48,780
como $ (” #myCarousel “) .on ('slide.bs.carousel'.

207
00:15:48,780 --> 00:15:54,110
Então, o que significa que quando essa ação de slide começa, em seguida, chamar esta função,

208
00:15:54,110 --> 00:15:57,870
e, em seguida, fazer algo dentro dessa função lá.

209
00:15:57,870 --> 00:16:00,958
Portanto, este tipo de código pode ser retornado também

210
00:16:00,958 --> 00:16:06,400
para responder aos eventos que são causados pelo comportamento do seu carrossel.

211
00:16:07,490 --> 00:16:12,300
Tendo considerado alguns desses exemplos, vamos para um exercício onde

212
00:16:12,300 --> 00:16:17,460
vamos realmente escrever algum código baseado em JavaScript para controlar nosso carrossel.

213
00:16:17,460 --> 00:16:23,190
Vamos escrever código para incluir alguns botões dentro do nosso carrossel,

214
00:16:23,190 --> 00:16:28,280
que serão usados para controlar a ação deslizante do carrossel.

215
00:16:28,280 --> 00:16:33,560
Então, o que significa que podemos pausar e retomar a ação deslizante do nosso carrossel.

216
00:16:33,560 --> 00:16:37,699
E vamos ativar esses botões a partir do JavaScript.

217
00:16:37,699 --> 00:16:43,799
[ MUSIC]