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

2
00:00:04,563 --> 00:00:09,231
Vamos a pasar un tiempo tratando de entender cómo Bootstrap y

3
00:00:09,231 --> 00:00:14,770
jQuery trabajan juntos para apoyar los componentes de JavaScript de Bootstrap.

4
00:00:16,310 --> 00:00:21,110
Como hemos entendido del módulo anterior, Bootstrap tiene

5
00:00:21,110 --> 00:00:26,410
una serie de componentes interesantes basados en JavaScript.

6
00:00:26,410 --> 00:00:30,871
Y también aprendimos que los componentes basados en JavaScript de Bootstrap

7
00:00:30,871 --> 00:00:34,440
están habilitados usando jQuery como soporte.

8
00:00:34,440 --> 00:00:38,160
Muchos de estos plugins están escritos en jQuery.

9
00:00:38,160 --> 00:00:41,780
Sus propios plugins se pueden incluir individualmente o

10
00:00:41,780 --> 00:00:45,950
puede incluir todos los plugins juntos como una sola unidad.

11
00:00:45,950 --> 00:00:50,350
En los ejercicios, hemos estado incluyendo todos los

12
00:00:50,350 --> 00:00:53,815
plugins de JavaScript de Bootstrap en nuestra página web.

13
00:00:55,040 --> 00:00:58,350
También vimos este gráfico en el módulo anterior

14
00:00:58,350 --> 00:01:03,160
para ayudarnos a entender la relación entre JavaScript, jQuery y

15
00:01:03,160 --> 00:01:07,740
cómo se implementan los plugins basados en JS de Bootstrap.

16
00:01:07,740 --> 00:01:14,820
Así que vimos que los componentes JS de Bootstrap buey en los componentes basados en jQuery y

17
00:01:14,820 --> 00:01:18,538
nos facilitan el uso de ellos en nuestra página web.

18
00:01:18,538 --> 00:01:25,200
También aprendimos que los componentes basados en JavaScript de Bootstrap se pueden usar

19
00:01:25,200 --> 00:01:31,010
en su página web sin escribir una sola línea de código JavaScript.

20
00:01:31,010 --> 00:01:38,860
Así que aquí es donde los atributos datos* vienen a nuestro rescate.

21
00:01:38,860 --> 00:01:44,133
Por lo tanto, puede utilizar los diversos atributos que vimos en el

22
00:01:44,133 --> 00:01:50,910
módulo anterior para habilitar muchos de nuestros componentes basados en JavaScript de Bootstrap.

23
00:01:50,910 --> 00:01:55,705
En caso de que desee más flexibilidad con sus componentes JavaScript,

24
00:01:55,705 --> 00:02:00,405
entonces la flexibilidad total de esa API basada en JavaScript

25
00:02:00,405 --> 00:02:05,565
está disponible para todos los componentes de JavaScript de Bootstrap.

26
00:02:05,565 --> 00:02:10,875
Puede escribir código usando la sintaxis jQuery y luego usarlo

27
00:02:10,875 --> 00:02:16,025
juntos para controlar los componentes JS de su Bootstrap.

28
00:02:16,025 --> 00:02:20,350
Vamos a explorar eso con un poco más de detalle en este módulo.

29
00:02:20,350 --> 00:02:26,080
Antes de continuar, permítanme darles un recorrido rápido por jQuery y su sintaxis para

30
00:02:26,080 --> 00:02:32,030
que entienda parte del código que escribiremos en este módulo.

31
00:02:32,030 --> 00:02:33,830
jQuery es una

32
00:02:33,830 --> 00:02:39,810
biblioteca basada en JavaScript muy potente y ligera que proporciona una serie de componentes diferentes.

33
00:02:39,810 --> 00:02:45,100
Es una biblioteca rica en características que permite escribir código para

34
00:02:45,100 --> 00:02:47,880
hacer manipulación HTML o DOM.

35
00:02:47,880 --> 00:02:50,170
Le permite hacer la manipulación de CSS.

36
00:02:50,170 --> 00:02:50,910
Entonces, por ejemplo,

37
00:02:50,910 --> 00:02:56,840
puede aplicar clases CSS a varios elementos HTML a través del código jQuery.

38
00:02:56,840 --> 00:03:00,860
Le permite manejar eventos HTML,

39
00:03:00,860 --> 00:03:05,920
y cuando se producen esos eventos puede implementar métodos que se están ejecutando

40
00:03:05,920 --> 00:03:08,565
en respuesta a la ocurrencia de estos eventos.

41
00:03:08,565 --> 00:03:11,160
jQuery también admite varios efectos y

42
00:03:11,160 --> 00:03:15,410
animaciones que se pueden aplicar a sus elementos HTML.

43
00:03:15,410 --> 00:03:22,650
También jQuery le permite interactuar con un servidor back-end usando AJAX.

44
00:03:22,650 --> 00:03:27,390
Aunque no vamos a explorar eso con demasiados detalles en este curso.

45
00:03:27,390 --> 00:03:31,937
También aprendimos que los componentes JavaScript de Bootstrap

46
00:03:31,937 --> 00:03:34,310
se basan en jQuery.

47
00:03:34,310 --> 00:03:39,480
Estos componentes hacen uso de muchos de los métodos jQuery que están disponibles para

48
00:03:39,480 --> 00:03:45,340
implementar las diversas características que este Bootstrap componentes JavaScript soportan.

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

50
00:03:48,120 --> 00:03:53,150
Ahora bien, si ha visto algo del código que incluimos

51
00:03:53,150 --> 00:03:57,700
en el módulo anterior, específicamente para

52
00:03:57,700 --> 00:04:03,210
la sugerencia de herramienta, recuerde que había algo que comenzó con un signo de dólar.

53
00:04:03,210 --> 00:04:09,780
Por lo tanto, la sintaxis jQuery se implementa usando el signo de dólar.

54
00:04:09,780 --> 00:04:19,113
El signo de dólar al comienzo de una oración implica que esto define y

55
00:04:19,113 --> 00:04:26,070
accede a los complementos de biblioteca de jQuery que están disponibles.

56
00:04:26,070 --> 00:04:31,070
Ahora, cada vez que usamos el signo de dólar, también suministras un selector.

57
00:04:31,070 --> 00:04:34,920
El selector se utiliza para consultar y encontrar aquellos

58
00:04:34,920 --> 00:04:40,270
elementos HTML dentro de su DOM a los que desea aplicar esta manipulación.

59
00:04:40,270 --> 00:04:42,795
Hay varias formas de hacer selecciones.

60
00:04:42,795 --> 00:04:46,030
Los veremos en la siguiente diapositiva.

61
00:04:47,550 --> 00:04:54,670
Entonces, el tercer aspecto de una instrucción jQuery es la acción que especifica.

62
00:04:54,670 --> 00:04:59,390
Ahora que selecciona un elemento HTML, qué tipo de acción desea realizar

63
00:04:59,390 --> 00:05:02,700
en ese elemento, por lo que es la tercera parte que verá.

64
00:05:02,700 --> 00:05:09,032
Entonces, como ejemplo, puede especificar una instrucción jQuery

65
00:05:09,032 --> 00:05:15,540
como $ («p») dentro de los códigos, y luego .hide.

66
00:05:15,540 --> 00:05:20,268
Entonces, en este caso, lo que implica es que, seleccione todos los elementos HTML

67
00:05:20,268 --> 00:05:24,690
que son los elementos del párrafo,

68
00:05:24,690 --> 00:05:30,440
comenzando con la etiqueta p, y luego esos elementos ocultan esos elementos.

69
00:05:30,440 --> 00:05:33,210
Entonces, la acción que se realizará es la altura,

70
00:05:33,210 --> 00:05:38,150
por lo que esto dará como resultado que todos los elementos p se oculten de su

71
00:05:39,400 --> 00:05:43,050
DOM y, en consecuencia, de la página web que se representa.

72
00:05:44,510 --> 00:05:49,165
Del mismo modo, verá más adelante usando

73
00:05:49,165 --> 00:05:53,288
una declaración como decir dólar, y

74
00:05:53,288 --> 00:05:58,608
luego entre comillas, #mycarousel,

75
00:05:58,608 --> 00:06:06,189
lo que implica que está especificando el ID de un elemento HTML específico,

76
00:06:06,189 --> 00:06:10,970
y luego especificando carrusel y pausa.

77
00:06:10,970 --> 00:06:14,340
Vamos a ver más detalles de lo que esto realmente hace

78
00:06:14,340 --> 00:06:16,930
en una de las diapositivas posteriores allí.

79
00:06:16,930 --> 00:06:22,870
Pero tenga en cuenta la estructura de la sintaxis de la declaración jQuery allí.

80
00:06:22,870 --> 00:06:27,040
Especifique el selector y, a continuación, especifique la acción correspondiente

81
00:06:27,040 --> 00:06:32,360
que se realizará en el elemento seleccionado por estos selectores.

82
00:06:32,360 --> 00:06:36,335
Echemos un vistazo al ejemplo de Bootstrap jQuery.

83
00:06:36,335 --> 00:06:41,490
Volveremos al ejemplo anterior que hemos visto anteriormente,

84
00:06:41,490 --> 00:06:43,410
donde presentamos la información sobre herramientas.

85
00:06:43,410 --> 00:06:47,480
Por lo tanto, cuando presentamos la información sobre herramientas, especificamos el script y

86
00:06:47,480 --> 00:06:50,940
luego dentro del script, dijimos $ (documento).

87
00:06:50,940 --> 00:06:53,800
En este caso, el documento significa todo el documento.

88
00:06:53,800 --> 00:06:56,510
Así que el seleccionado aquí es para todo el documento.

89
00:06:56,510 --> 00:07:01,010
Así que para todo el documento, y luego especificaremos listo.

90
00:07:01,010 --> 00:07:02,790
Listo está la acción a tomar.

91
00:07:02,790 --> 00:07:07,760
Entonces, cuando el documento esté listo, ejecute esta función que se

92
00:07:07,760 --> 00:07:11,500
especifica como parámetro para esta acción lista allí.

93
00:07:11,500 --> 00:07:17,710
Entonces, la función que vimos que se usaba para la información sobre herramientas lo especificó como $, y

94
00:07:17,710 --> 00:07:23,470
luego entre corchetes, dijo, data-toggle=» información sobre herramientas».

95
00:07:23,470 --> 00:07:28,240
Ahora aquí estamos especificando que seleccione aquellos elementos para los

96
00:07:28,240 --> 00:07:33,260
que hay un atributo con data-toggle="tooltip».

97
00:07:33,260 --> 00:07:38,290
Y, a continuación, para aquellos elementos que coincidan con este criterio, realice esta acción

98
00:07:38,290 --> 00:07:43,270
llamada habilitar información de herramientas para esos elementos.

99
00:07:43,270 --> 00:07:47,580
Y cerramos la función allí.

100
00:07:47,580 --> 00:07:52,890
Así que esto especifica que esta secuencia de comandos en particular

101
00:07:52,890 --> 00:07:57,640
se activará para aquellos elementos para los que ha aplicado la información de herramientas de alternar datos.

102
00:07:57,640 --> 00:08:02,840
Entonces, básicamente, para aquellos elementos HTML en los que ha definido información de herramientas,

103
00:08:02,840 --> 00:08:05,770
desea que la información sobre herramientas esté habilitada allí.

104
00:08:05,770 --> 00:08:12,800
Así es como interpretamos esta sintaxis de este ejemplo jQuery aquí.

105
00:08:12,800 --> 00:08:18,340
Veamos las diversas formas de especificar selectores.

106
00:08:18,340 --> 00:08:23,490
Entonces, como nos damos cuenta de la sintaxis de la declaración jQuery,

107
00:08:23,490 --> 00:08:28,240
siempre seguimos el dólar y luego, entre corchetes, especificamos un selector.

108
00:08:28,240 --> 00:08:32,990
¿ Cómo especificamos los selectores, cuáles son las diversas formas en que puede especificar selectores?

109
00:08:32,990 --> 00:08:35,450
Aquí hay algunas posibilidades.

110
00:08:35,450 --> 00:08:38,900
Puede especificar un selector especificando cualquier

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

112
00:08:41,960 --> 00:08:46,050
Así que puede decir p, botón, h4,

113
00:08:46,050 --> 00:08:50,315
h3, o cualquiera de las etiquetas HTML directamente.

114
00:08:50,315 --> 00:08:54,725
Y así, en ese caso, el nombre de la etiqueta HTML se especifica entre comillas y

115
00:08:54,725 --> 00:08:56,475
eso formará su selector.

116
00:08:56,475 --> 00:09:00,225
Cuando aplica un selector como este, está diciendo que se

117
00:09:00,225 --> 00:09:05,673
seleccionarán todos los elementos que coincidan con este criterio.

118
00:09:06,950 --> 00:09:11,920
A continuación, también puede especificar un

119
00:09:11,920 --> 00:09:16,640
elemento HTML DOM específico especificando el ID de ese elemento mediante el #id.

120
00:09:16,640 --> 00:09:20,990
Entonces, por ejemplo, usamos #myCarousel.

121
00:09:20,990 --> 00:09:26,480
Entonces, en este caso, está diciendo que seleccione ese

122
00:09:26,480 --> 00:09:31,119
elemento HTML particular para el que el ID es myCarousel.

123
00:09:31,119 --> 00:09:36,500
Así que esa es la otra forma de seleccionar, especificando un ID para un elemento.

124
00:09:37,550 --> 00:09:40,620
La tercera posibilidad es seleccionar

125
00:09:40,620 --> 00:09:44,440
elementos por las clases que se han aplicado a eso.

126
00:09:44,440 --> 00:09:50,180
Entonces, por ejemplo, puede ver entre corchetes si dice .btn,

127
00:09:50,180 --> 00:09:53,477
lo que significa que se

128
00:09:53,477 --> 00:09:58,702
seleccionarán todos los elementos DOM HTML para los que ha aplicado la clase de botón.

129
00:09:58,702 --> 00:10:03,670
O incluso puede calificar aún más especificando un grupo de clases

130
00:10:03,670 --> 00:10:08,550
diciendo .btn.btn-default, lo que significa que se

131
00:10:08,550 --> 00:10:14,080
han aplicado los elementos para los que la clase de botón y la clase predeterminada del botón.

132
00:10:15,290 --> 00:10:16,620
Así que esa es otra forma,

133
00:10:16,620 --> 00:10:19,607
mediante el uso de las clases que se aplican al elemento HTML.

134
00:10:20,630 --> 00:10:25,070
La otra posibilidad es especificar un atributo que se ha aplicado

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

136
00:10:27,120 --> 00:10:33,150
Entonces, por ejemplo, puede decir que los atributos se especifican entre corchetes aquí.

137
00:10:33,150 --> 00:10:38,640
Así que se puede ver entre corchetes href, e incluirlo en la cita de modo

138
00:10:38,640 --> 00:10:44,370
que significa que todos los elementos HTML para los que se ha aplicado el atributo href.

139
00:10:44,370 --> 00:10:47,920
Del mismo modo, puede decir data-toggle="tooltip»,

140
00:10:47,920 --> 00:10:50,630
que esencialmente guarda todos aquellos elementos para

141
00:10:50,630 --> 00:10:53,745
los que se ha aplicado el atributo data-alternar tooltip.

142
00:10:53,745 --> 00:10:59,270
Además, seleccione el elemento actual para el

143
00:10:59,270 --> 00:11:04,900
que desea hacer algo diciendo $ (this).

144
00:11:04,900 --> 00:11:08,360
Entonces, lo que significa, para el elemento actual que ya ha sido seleccionado, para

145
00:11:08,360 --> 00:11:10,360
esto, haga algo.

146
00:11:11,520 --> 00:11:14,900
Y muchas otras posibilidades.

147
00:11:14,900 --> 00:11:19,760
Así que estos son algunos ejemplos, así que me verán usando algunos de estos

148
00:11:19,760 --> 00:11:23,610
en los ejemplos y en el ejercicio que sigue.

149
00:11:24,650 --> 00:11:29,950
No solo eso, también puede especificar eventos jQuery,

150
00:11:29,950 --> 00:11:34,840
eventos basados en los que responde.

151
00:11:34,840 --> 00:11:37,720
Entonces, por ejemplo, las interacciones del usuario

152
00:11:37,720 --> 00:11:42,590
con varios elementos en su página web causarán eventos DOM.

153
00:11:42,590 --> 00:11:47,220
Entonces, por ejemplo, con un mouse, el usuario puede hacer clic en una ubicación particular.

154
00:11:47,220 --> 00:11:52,790
O haga doble clic, o cuando el ratón entre y salga de una ubicación específica.

155
00:11:52,790 --> 00:11:56,880
Para el teclado puede responder a las pulsaciones de teclas, teclas y teclas hacia arriba.

156
00:11:57,980 --> 00:12:01,680
Eventos para formularios, cuando se envía el formulario,

157
00:12:01,680 --> 00:12:05,870
cuando hay un cambio en un

158
00:12:07,040 --> 00:12:13,230
valor determinado de elemento de entrada, cuando se centra un elemento en particular, y así sucesivamente.

159
00:12:13,230 --> 00:12:16,140
Incluso podemos hablar de todo el documento.

160
00:12:16,140 --> 00:12:20,080
Por lo tanto, al cargar el documento, al cambiar el tamaño del documento,

161
00:12:20,080 --> 00:12:24,920
al desplazarse o descargar el documento, puede responder a esos eventos.

162
00:12:24,920 --> 00:12:31,253
Entonces, en ese caso, los Métodos de evento jQuery que son compatibles incluyen ready

163
00:12:31,253 --> 00:12:35,140
, click, dblclick, mousedown, etc.

164
00:12:35,140 --> 00:12:38,430
Entonces, estos son todos los métodos de evento que

165
00:12:38,430 --> 00:12:42,770
se ejecutarán tras la ocurrencia de cualquiera de estos eventos allí.

166
00:12:43,850 --> 00:12:48,480
Tomemos un ejemplo del Carrusel de Bootstrap para ver cómo

167
00:12:48,480 --> 00:12:53,640
se puede escribir código JavaScript para controlar las acciones del carrusel.

168
00:12:54,980 --> 00:13:01,490
Entonces, para un carrusel, ya viste desde el módulo anterior, el tamaño del índice.

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

170
00:13:03,584 --> 00:13:08,250
Así que usamos el atributo data-slide="prev|next», o

171
00:13:08,250 --> 00:13:13,780
dijimos data-slide-to y luego especificamos el número de diapositiva específico,

172
00:13:13,780 --> 00:13:16,910
donde dice data-ride+"carrusel».

173
00:13:16,910 --> 00:13:21,570
Y luego hemos especificado el intervalo de datos, el intervalo para

174
00:13:21,570 --> 00:13:25,800
que la acción de deslizamiento tenga lugar.

175
00:13:25,800 --> 00:13:29,590
Entonces, para el carrusel, puede hacer cosas como, por

176
00:13:29,590 --> 00:13:33,076
ejemplo, puede especificar controles basados en JavaScript.

177
00:13:33,076 --> 00:13:38,674
Puede ver $, y entre corchetes especificar para seleccionar aquellos elementos,

178
00:13:38,674 --> 00:13:44,565
los carruseles, que se incluyen en su página especificando .carousel.

179
00:13:44,565 --> 00:13:50,577
Significa todos aquellos elementos para los que se ha aplicado la clase de carrusel,

180
00:13:50,577 --> 00:13:56,700
y después de eso se utiliza el .carrusel para especificar algo.

181
00:13:56,700 --> 00:14:00,580
Entonces, como ejemplo, me verás usando algo como esto

182
00:14:00,580 --> 00:14:02,090
en el ejercicio que sigue.

183
00:14:02,090 --> 00:14:05,400
Diremos .carrusel y carrusel, y

184
00:14:05,400 --> 00:14:09,409
dentro de allí especificaría el intervalo: 2000,

185
00:14:09,409 --> 00:14:15,140
lo que significa establecer el intervalo para el deslizamiento en 2000 milisegundos.

186
00:14:15,140 --> 00:14:17,620
O dos segundos, en este caso.

187
00:14:17,620 --> 00:14:22,850
Así que de esa manera controlas o modificas una propiedad particular

188
00:14:22,850 --> 00:14:27,890
del elemento JavaScript del carrusel allí.

189
00:14:27,890 --> 00:14:32,160
El carrusel también soporta muchos otros controles.

190
00:14:32,160 --> 00:14:35,020
Entonces, por ejemplo, puedes decir carrusel ('ciclo'),

191
00:14:35,020 --> 00:14:38,730
lo que significa comenzar el ciclo de los elementos de izquierda a derecha.

192
00:14:38,730 --> 00:14:44,410
Se puede decir carrusel ('pausa'), para pausar la acción deslizante del carrusel.

193
00:14:44,410 --> 00:14:48,171
Entonces puedes decir carrusel (número), por

194
00:14:48,171 --> 00:14:53,441
lo que hace ciclos el carrusel a ese artículo particular del carrusel.

195
00:14:53,441 --> 00:14:56,370
Y luego puedes decir carrusel ('anterior'),

196
00:14:56,370 --> 00:15:01,710
carrusel ('siguiente') para ir al ítem anterior y el siguiente ítem en mi carrusel.

197
00:15:01,710 --> 00:15:07,420
Por lo tanto, estos se pueden invocar directamente desde nuestro código JavaScript.

198
00:15:07,420 --> 00:15:10,390
Del mismo modo, cuando el

199
00:15:12,280 --> 00:15:17,550
elemento del carrusel de JavaScript está en su página web, provoca varios eventos.

200
00:15:17,550 --> 00:15:20,870
Y en función de la ocurrencia de estos eventos, puede responder.

201
00:15:20,870 --> 00:15:23,980
Entonces, por ejemplo, puedes decir slide.bs.carrusel.

202
00:15:23,980 --> 00:15:28,220
Este evento en particular se activará cuando se invoca el método de instancia de diapositiva.

203
00:15:29,550 --> 00:15:32,990
Del mismo modo, slid.bs.carousel significa que

204
00:15:32,990 --> 00:15:38,460
este evento se activa cuando ha completado la transición de diapositiva al siguiente elemento.

205
00:15:38,460 --> 00:15:41,880
Entonces, dentro de su código puede 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
Lo que significa que cuando se inicia esa acción de diapositiva, entonces invoque esta función

208
00:15:54,110 --> 00:15:57,870
y luego haga algo dentro de esa función allí.

209
00:15:57,870 --> 00:16:00,958
Por lo tanto, este tipo de código se puede devolver también para

210
00:16:00,958 --> 00:16:06,400
responder a los eventos que son causados por el comportamiento de su carrusel.

211
00:16:07,490 --> 00:16:12,300
Habiendo considerado algunos de estos ejemplos, pasaremos a un ejercicio en el que

212
00:16:12,300 --> 00:16:17,460
escribiremos código basado en JavaScript para controlar nuestro carrusel.

213
00:16:17,460 --> 00:16:23,190
Escribiremos código para incluir un par de botones dentro de nuestro carrusel,

214
00:16:23,190 --> 00:16:28,280
que se usarán para controlar la acción deslizante del carrusel.

215
00:16:28,280 --> 00:16:33,560
Entonces, lo que significa que podemos hacer una pausa y reanudar la acción deslizante de nuestro carrusel.

216
00:16:33,560 --> 00:16:37,699
Y activaremos estos botones desde JavaScript.

217
00:16:37,699 --> 00:16:43,799
[ MÚSICA]