1
00:00:00,000 --> 00:00:04,563
[MUSICA].

2
00:00:04,563 --> 00:00:09,231
Passiamo ora un po 'di tempo cercando di capire come Bootstrap e

3
00:00:09,231 --> 00:00:14,770
jQuery lavorano insieme per supportare i componenti JavaScript di Bootstrap.

4
00:00:16,310 --> 00:00:21,110
Come abbiamo capito dal modulo precedente, Bootstrap ha

5
00:00:21,110 --> 00:00:26,410
una serie di interessanti componenti basati su JavaScript.

6
00:00:26,410 --> 00:00:30,871
E abbiamo anche imparato che i componenti basati su JavaScript di Bootstrap

7
00:00:30,871 --> 00:00:34,440
sono tutti abilitati usando jQuery come supporto.

8
00:00:34,440 --> 00:00:38,160
Così molti di questi plugin sono scritti in jQuery.

9
00:00:38,160 --> 00:00:41,780
I loro plugin stessi possono essere inclusi singolarmente o

10
00:00:41,780 --> 00:00:45,950
è possibile includere tutti i plugin insieme come una singola unità.

11
00:00:45,950 --> 00:00:50,350
Negli esercizi, abbiamo incluso tutti i

12
00:00:50,350 --> 00:00:53,815
plugin JavaScript di Bootstrap nella nostra pagina web.

13
00:00:55,040 --> 00:00:58,350
Abbiamo anche visto questo grafico nel modulo precedente

14
00:00:58,350 --> 00:01:03,160
per aiutarci a capire la relazione tra JavaScript, jQuery e

15
00:01:03,160 --> 00:01:07,740
come i plugin basati su JS di Bootstrap sono implementati.

16
00:01:07,740 --> 00:01:14,820
Così abbiamo visto che i componenti JS di Bootstrap bucano nei componenti basati su jQuery e

17
00:01:14,820 --> 00:01:18,538
ci rendono facile utilizzarli nella nostra pagina web.

18
00:01:18,538 --> 00:01:25,200
Abbiamo anche appreso che i componenti basati su JavaScript di Bootstrap possono essere utilizzati

19
00:01:25,200 --> 00:01:31,010
nella tua pagina web senza scrivere una singola riga di codice JavaScript.

20
00:01:31,010 --> 00:01:38,860
Quindi è qui che gli attributi data-* vengono in nostro soccorso.

21
00:01:38,860 --> 00:01:44,133
Quindi è possibile utilizzare i vari attributi che abbiamo visto nel

22
00:01:44,133 --> 00:01:50,910
modulo precedente per abilitare molti dei componenti basati su JavaScript del nostro Bootstrap.

23
00:01:50,910 --> 00:01:55,705
Nel caso in cui desideri una maggiore flessibilità con i tuoi componenti JavaScript,

24
00:01:55,705 --> 00:02:00,405
la piena flessibilità di quell'API basata su JavaScript

25
00:02:00,405 --> 00:02:05,565
è disponibile per tutti i componenti JavaScript Bootstrap.

26
00:02:05,565 --> 00:02:10,875
Puoi scrivere codice usando la sintassi jQuery e quindi usarlo

27
00:02:10,875 --> 00:02:16,025
insieme per controllare i componenti JS del tuo Bootstrap. Lo

28
00:02:16,025 --> 00:02:20,350
esploreremo in modo un po 'più dettagliato in questo modulo.

29
00:02:20,350 --> 00:02:26,080
Prima di procedere ulteriormente, lascia che ti dia un rapido tour di jQuery e la sua sintassi in modo da

30
00:02:26,080 --> 00:02:32,030
capire parte del codice che scriveremo in questo modulo.

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

32
00:02:33,830 --> 00:02:39,810
libreria basata su JavaScript molto potente e leggera che fornisce una serie di componenti diversi.

33
00:02:39,810 --> 00:02:45,100
Si tratta di una libreria ricca di funzionalità che consente la scrittura di codice per

34
00:02:45,100 --> 00:02:47,880
fare manipolazione HTML o DOM.

35
00:02:47,880 --> 00:02:50,170
Ti permette di fare manipolazioni CSS.

36
00:02:50,170 --> 00:02:50,910
Quindi, ad esempio,

37
00:02:50,910 --> 00:02:56,840
è possibile applicare classi CSS a vari elementi HTML attraverso il codice jQuery.

38
00:02:56,840 --> 00:03:00,860
Esso consente di gestire gli eventi HTML

39
00:03:00,860 --> 00:03:05,920
e quando si verificano tali eventi è possibile implementare metodi che vengono eseguiti

40
00:03:05,920 --> 00:03:08,565
in risposta al verificarsi di questi eventi.

41
00:03:08,565 --> 00:03:11,160
jQuery supporta anche vari effetti e

42
00:03:11,160 --> 00:03:15,410
animazioni che possono essere applicati ai tuoi elementi HTML.

43
00:03:15,410 --> 00:03:22,650
Anche jQuery consente di interagire con un server back-end utilizzando AJAX.

44
00:03:22,650 --> 00:03:27,390
Anche se non lo esploreremo troppo in dettaglio in questo corso.

45
00:03:27,390 --> 00:03:31,937
Abbiamo anche imparato che i componenti JavaScript di Bootstrap

46
00:03:31,937 --> 00:03:34,310
sono costruiti su jQuery.

47
00:03:34,310 --> 00:03:39,480
Questi componenti fanno uso di molti dei metodi jQuery che sono disponibili per

48
00:03:39,480 --> 00:03:45,340
implementare le varie funzionalità che questi componenti JavaScript Bootstrap supportano.

49
00:03:45,340 --> 00:03:48,120
Cerchiamo di capire brevemente la sintassi jQuery.

50
00:03:48,120 --> 00:03:53,150
Ora, se hai visto parte del codice che abbiamo incluso

51
00:03:53,150 --> 00:03:57,700
nel modulo precedente, specificamente per

52
00:03:57,700 --> 00:04:03,210
la descrizione strumento, ti ricordi che c'era qualcosa che iniziava con un simbolo del dollaro.

53
00:04:03,210 --> 00:04:09,780
Quindi, la sintassi jQuery è tutta implementata usando il simbolo del dollaro.

54
00:04:09,780 --> 00:04:19,113
Il simbolo del dollaro all'inizio di una frase implica che questo definisce e

55
00:04:19,113 --> 00:04:26,070
accede ai plugin della libreria di jQuery disponibili.

56
00:04:26,070 --> 00:04:31,070
Ora, ogni volta che usiamo il simbolo del dollaro, fornisci anche un selettore.

57
00:04:31,070 --> 00:04:34,920
Il selettore viene utilizzato per interrogare e trovare quegli

58
00:04:34,920 --> 00:04:40,270
elementi HTML all'interno del DOM a cui si desidera applicare questa manipolazione.

59
00:04:40,270 --> 00:04:42,795
Ci sono vari modi di fare selezioni.

60
00:04:42,795 --> 00:04:46,030
Li guarderemo nella diapositiva successiva.

61
00:04:47,550 --> 00:04:54,670
Quindi il terzo aspetto di un'istruzione jQuery è l'azione che si specifica.

62
00:04:54,670 --> 00:04:59,390
Ora che si seleziona un elemento HTML, che tipo di azione si desidera eseguire

63
00:04:59,390 --> 00:05:02,700
su quell'elemento, così che è la terza parte che si vedrà.

64
00:05:02,700 --> 00:05:09,032
Quindi, ad esempio, puoi specificare un'istruzione jQuery

65
00:05:09,032 --> 00:05:15,540
come $ («p») all'interno dei codici e quindi .hide.

66
00:05:15,540 --> 00:05:20,268
Quindi in questo caso ciò che implica è che, selezionare tutti quegli elementi HTML

67
00:05:20,268 --> 00:05:24,690
che sono gli elementi del paragrafo,

68
00:05:24,690 --> 00:05:30,440
iniziando con il tag p, e poi quegli elementi nascondono quegli elementi.

69
00:05:30,440 --> 00:05:33,210
Quindi l'azione da eseguire è l'altezza,

70
00:05:33,210 --> 00:05:38,150
quindi questo comporterà che tutti gli elementi p vengano nascosti dal tuo

71
00:05:39,400 --> 00:05:43,050
DOM e di conseguenza dalla pagina web che viene renderizzata.

72
00:05:44,510 --> 00:05:49,165
Allo stesso modo, si vedrà più avanti su di noi utilizzando

73
00:05:49,165 --> 00:05:53,288
una dichiarazione come dire dollaro, e

74
00:05:53,288 --> 00:05:58,608
poi tra virgolette, #mycarousel, il

75
00:05:58,608 --> 00:06:06,189
che implica che si sta specificando l'ID di un elemento HTML specifico,

76
00:06:06,189 --> 00:06:10,970
e quindi specificare carosello e pausa.

77
00:06:10,970 --> 00:06:14,340
Vedremo ulteriori dettagli su ciò che questo effettivamente fa

78
00:06:14,340 --> 00:06:16,930
in una delle diapositive successive lì.

79
00:06:16,930 --> 00:06:22,870
Ma nota la struttura della sintassi dell'istruzione jQuery lì.

80
00:06:22,870 --> 00:06:27,040
Si specifica il selettore e quindi si specifica l'azione corrispondente da

81
00:06:27,040 --> 00:06:32,360
eseguire sull'elemento selezionato da questi selettori.

82
00:06:32,360 --> 00:06:36,335
Diamo un'occhiata a Bootstrap esempio jQuery.

83
00:06:36,335 --> 00:06:41,490
Torneremo all'esempio precedente che abbiamo visto in precedenza,

84
00:06:41,490 --> 00:06:43,410
dove introduciamo il tooltip.

85
00:06:43,410 --> 00:06:47,480
Quindi, quando introduciamo il tooltip, abbiamo specificato lo script e

86
00:06:47,480 --> 00:06:50,940
poi all'interno dello script, abbiamo detto $ (documento).

87
00:06:50,940 --> 00:06:53,800
In questo caso il documento indica l'intero documento.

88
00:06:53,800 --> 00:06:56,510
Quindi il selezionato qui è per l'intero documento.

89
00:06:56,510 --> 00:07:01,010
Quindi per l'intero documento, e poi specificheremo pronto.

90
00:07:01,010 --> 00:07:02,790
Pronto è l'azione da intraprendere.

91
00:07:02,790 --> 00:07:07,760
Quindi, quando il documento è pronto, quindi eseguire questa funzione che è

92
00:07:07,760 --> 00:07:11,500
specificata come parametro per questa azione pronta lì.

93
00:07:11,500 --> 00:07:17,710
Quindi la funzione che abbiamo visto essere utilizzata per il tooltip lo ha specificato come $, e

94
00:07:17,710 --> 00:07:23,470
poi tra parentesi, ha detto, data-toggle=» tooltip».

95
00:07:23,470 --> 00:07:28,240
Ora qui stiamo specificando che selezionare quegli elementi per i

96
00:07:28,240 --> 00:07:33,260
quali c'è un attributo con data-toggle="tooltip».

97
00:07:33,260 --> 00:07:38,290
Quindi, per gli elementi che corrispondono a questo criterio, eseguire questa azione

98
00:07:38,290 --> 00:07:43,270
chiamata enable tooltip per quegli elementi.

99
00:07:43,270 --> 00:07:47,580
E chiudiamo la funzione lì.

100
00:07:47,580 --> 00:07:52,890
Quindi questo specifica che questo particolare script

101
00:07:52,890 --> 00:07:57,640
verrà attivato per quegli elementi per i quali è stato applicato il tooltip dati-toggle.

102
00:07:57,640 --> 00:08:02,840
Quindi, fondamentalmente per quegli elementi HTML su cui hai definito i tooltip,

103
00:08:02,840 --> 00:08:05,770
vuoi che il tooltip sia abilitato lì.

104
00:08:05,770 --> 00:08:12,800
Quindi questo è il modo in cui interpretiamo questa sintassi di questo esempio jQuery qui.

105
00:08:12,800 --> 00:08:18,340
Diamo un'occhiata ai vari modi di specificare i selettori.

106
00:08:18,340 --> 00:08:23,490
Quindi, come ci rendiamo conto dalla sintassi dell'istruzione jQuery,

107
00:08:23,490 --> 00:08:28,240
seguiamo sempre dollaro e poi, tra parentesi, specifichiamo un selettore.

108
00:08:28,240 --> 00:08:32,990
Come specifichiamo i selettori, quali sono i vari modi in cui è possibile specificare i selettori?

109
00:08:32,990 --> 00:08:35,450
Ecco alcune possibilità.

110
00:08:35,450 --> 00:08:38,900
È possibile specificare un selettore specificando qualsiasi

111
00:08:38,900 --> 00:08:41,960
elemento HTML specifico specificando il tag.

112
00:08:41,960 --> 00:08:46,050
Quindi puoi dire p, button, h4,

113
00:08:46,050 --> 00:08:50,315
h3, o uno qualsiasi dei tag HTML direttamente.

114
00:08:50,315 --> 00:08:54,725
E così in tal caso il nome del tag HTML è specificato tra virgolette e

115
00:08:54,725 --> 00:08:56,475
questo formerà il tuo selettore.

116
00:08:56,475 --> 00:09:00,225
Quando applichi un selettore come questo, stai dicendo che

117
00:09:00,225 --> 00:09:05,673
verranno selezionati tutti gli elementi che corrispondono a questo criterio.

118
00:09:06,950 --> 00:09:11,920
Quindi è anche possibile specificare un

119
00:09:11,920 --> 00:09:16,640
elemento DOM HTML specifico specificando l'ID di tale elemento utilizzando il #id.

120
00:09:16,640 --> 00:09:20,990
Quindi, ad esempio, usiamo #myCarousel.

121
00:09:20,990 --> 00:09:26,480
Quindi in questo caso stai dicendo che seleziona quel particolare

122
00:09:26,480 --> 00:09:31,119
elemento HTML per il quale l'ID è MyCarousel.

123
00:09:31,119 --> 00:09:36,500
Quindi questo è l'altro modo di selezionare, specificando un ID per un elemento.

124
00:09:37,550 --> 00:09:40,620
La terza possibilità è quella di selezionare

125
00:09:40,620 --> 00:09:44,440
gli elementi dalle classi che si sono applicate a questo.

126
00:09:44,440 --> 00:09:50,180
Quindi, ad esempio, puoi vedere tra parentesi se dici .btn,

127
00:09:50,180 --> 00:09:53,477
ovvero

128
00:09:53,477 --> 00:09:58,702
verranno selezionati tutti gli elementi HTML DOM per i quali hai applicato la classe button.

129
00:09:58,702 --> 00:10:03,670
Oppure puoi anche qualificarti ulteriormente specificando un gruppo di classi

130
00:10:03,670 --> 00:10:08,550
dicendo .btn.btn-default, il che significa che quegli elementi per

131
00:10:08,550 --> 00:10:14,080
cui la classe button e la classe predefinita button sono stati entrambi applicati.

132
00:10:15,290 --> 00:10:16,620
Quindi questo è un altro modo,

133
00:10:16,620 --> 00:10:19,607
utilizzando le classi che vengono applicate all'elemento HTML.

134
00:10:20,630 --> 00:10:25,070
L' altra possibilità è quella di specificare un attributo che è stato applicato

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

136
00:10:27,120 --> 00:10:33,150
Quindi, ad esempio, puoi dire che gli attributi sono specificati tra parentesi quadre qui.

137
00:10:33,150 --> 00:10:38,640
Quindi puoi vedere tra parentesi quadre href e includerlo nella citazione in modo

138
00:10:38,640 --> 00:10:44,370
che significa che tutti quegli elementi HTML per i quali è stato applicato l'attributo href.

139
00:10:44,370 --> 00:10:47,920
Allo stesso modo, puoi dire data-toggle="tooltip»,

140
00:10:47,920 --> 00:10:50,630
che essenzialmente salva tutti quegli elementi per

141
00:10:50,630 --> 00:10:53,745
i quali è stato applicato l'attributo tooltip data-toggle.

142
00:10:53,745 --> 00:10:59,270
Inoltre, selezionando l'elemento corrente per il

143
00:10:59,270 --> 00:11:04,900
quale vuoi fare qualcosa dicendo $ (questo).

144
00:11:04,900 --> 00:11:08,360
Quindi significa, per l'elemento corrente che è già stato selezionato, per

145
00:11:08,360 --> 00:11:10,360
questo, fai qualcosa.

146
00:11:11,520 --> 00:11:14,900
E molte altre possibilità.

147
00:11:14,900 --> 00:11:19,760
Quindi questi sono alcuni esempi, quindi mi vedrai usare alcuni di questi

148
00:11:19,760 --> 00:11:23,610
negli esempi e nell'esercizio che segue.

149
00:11:24,650 --> 00:11:29,950
Non solo, puoi anche specificare eventi jQuery,

150
00:11:29,950 --> 00:11:34,840
eventi in base ai quali rispondi.

151
00:11:34,840 --> 00:11:37,720
Quindi, ad esempio, le interazioni dell'utente

152
00:11:37,720 --> 00:11:42,590
con vari elementi sulla tua pagina web causeranno eventi DOM.

153
00:11:42,590 --> 00:11:47,220
Quindi, ad esempio, con un mouse, l'utente può fare clic in una posizione particolare. In alternativa

154
00:11:47,220 --> 00:11:52,790
, fare doppio clic o quando il mouse entra e esce da una posizione specifica.

155
00:11:52,790 --> 00:11:56,880
Per la tastiera è possibile rispondere alle pressioni dei tasti, ai tasti e ai tasti.

156
00:11:57,980 --> 00:12:01,680
Eventi per i moduli, quando il modulo viene inviato,

157
00:12:01,680 --> 00:12:05,870
quando c'è una modifica in un particolare

158
00:12:07,040 --> 00:12:13,230
valore dell'elemento di input e quando un particolare elemento è focalizzato su, e così via.

159
00:12:13,230 --> 00:12:16,140
Possiamo anche parlare dell'intero documento.

160
00:12:16,140 --> 00:12:20,080
Quindi, al momento del caricamento del documento, dopo il ridimensionamento del documento,

161
00:12:20,080 --> 00:12:24,920
dopo lo scorrimento o lo scarico del documento, è possibile rispondere a tali eventi.

162
00:12:24,920 --> 00:12:31,253
Quindi, in tal caso, i metodi di evento jQuery supportati includono ready,

163
00:12:31,253 --> 00:12:35,140
click, dblclick, mousedown, on e così via.

164
00:12:35,140 --> 00:12:38,430
Quindi questi sono tutti i metodi di evento che

165
00:12:38,430 --> 00:12:42,770
verranno eseguiti al verificarsi di uno di questi eventi lì.

166
00:12:43,850 --> 00:12:48,480
Prendiamo un esempio del carosello di Bootstrap per vedere come il

167
00:12:48,480 --> 00:12:53,640
codice JavaScript può essere scritto per controllare le azioni carosello.

168
00:12:54,980 --> 00:13:01,490
Quindi, per una giostra, hai visto già dal modulo precedente, la dimensione dell'indice.

169
00:13:01,490 --> 00:13:03,584
Abbiamo usato tutti questi attributi.

170
00:13:03,584 --> 00:13:08,250
Quindi abbiamo usato l'attributo data-slide = «prev|next», o

171
00:13:08,250 --> 00:13:13,780
abbiamo detto data-slide-to e quindi specificato il numero specifico della diapositiva,

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

173
00:13:16,910 --> 00:13:21,570
E poi abbiamo specificato l'intervallo di dati, l'intervallo per

174
00:13:21,570 --> 00:13:25,800
l'azione di scorrimento per avvenire.

175
00:13:25,800 --> 00:13:29,590
Quindi per il carosello puoi fare cose come,

176
00:13:29,590 --> 00:13:33,076
ad esempio, puoi specificare controlli basati su JavaScript.

177
00:13:33,076 --> 00:13:38,674
È possibile visualizzare $, e tra parentesi specificare di selezionare gli elementi,

178
00:13:38,674 --> 00:13:44,565
i caroselli, che sono inclusi nella pagina specificando .carosello.

179
00:13:44,565 --> 00:13:50,577
Significato tutti quegli elementi per i quali è stata applicata la classe carosello,

180
00:13:50,577 --> 00:13:56,700
e quindi in seguito che si utilizza il.carosello per specificare qualcosa.

181
00:13:56,700 --> 00:14:00,580
Quindi, ad esempio, mi vedrai usare qualcosa di simile

182
00:14:00,580 --> 00:14:02,090
nell'esercizio che segue.

183
00:14:02,090 --> 00:14:05,400
Diremo .carosello e giostra, e

184
00:14:05,400 --> 00:14:09,409
all'interno di lì si specificherà interval:2000, il

185
00:14:09,409 --> 00:14:15,140
che significa impostare l'intervallo per lo scorrimento su 2000 millisecondi.

186
00:14:15,140 --> 00:14:17,620
O due secondi, in questo caso.

187
00:14:17,620 --> 00:14:22,850
In questo modo puoi controllare o modificare una particolare proprietà

188
00:14:22,850 --> 00:14:27,890
dell'elemento JavaScript carosello lì.

189
00:14:27,890 --> 00:14:32,160
Il carosello supporta anche molti altri controlli.

190
00:14:32,160 --> 00:14:35,020
Quindi, ad esempio, puoi dire carosello ('ciclo'), che

191
00:14:35,020 --> 00:14:38,730
significa iniziare a pedalare gli oggetti da sinistra a destra.

192
00:14:38,730 --> 00:14:44,410
Si può dire carosello ('pausa'), per mettere in pausa l'azione scorrevole della giostra.

193
00:14:44,410 --> 00:14:48,171
Quindi si può dire carosello (numero), in modo

194
00:14:48,171 --> 00:14:53,441
che cicli la giostra a quel particolare elemento carosello.

195
00:14:53,441 --> 00:14:56,370
E poi puoi dire carosello ('prev'),

196
00:14:56,370 --> 00:15:01,710
carosello ('prossimo') per andare all'elemento precedente e all'elemento successivo nel mio carosello.

197
00:15:01,710 --> 00:15:07,420
Quindi, questi possono essere invocati direttamente dal nostro codice JavaScript.

198
00:15:07,420 --> 00:15:10,390
Allo stesso modo, quando l'

199
00:15:12,280 --> 00:15:17,550
elemento carosello JavaScript si trova nella tua pagina web, causa vari eventi.

200
00:15:17,550 --> 00:15:20,870
E in base al verificarsi di questi eventi, puoi rispondere.

201
00:15:20,870 --> 00:15:23,980
Quindi, ad esempio, puoi dire slide.bs.carosello.

202
00:15:23,980 --> 00:15:28,220
Questo particolare evento verrà attivato quando viene richiamato il metodo di istanza della diapositiva.

203
00:15:29,550 --> 00:15:32,990
Allo stesso modo, slid.bs.carosello significa che

204
00:15:32,990 --> 00:15:38,460
questo evento viene attivato quando ha completato la transizione della diapositiva all'elemento successivo.

205
00:15:38,460 --> 00:15:41,880
Quindi all'interno del tuo codice puoi specificare qualcosa

206
00:15:43,370 --> 00:15:48,780
come $ (» #myCarousel «) .on ('slide.bs.carosel' l'.

207
00:15:48,780 --> 00:15:54,110
Quindi significa che quando inizia l'azione della diapositiva, quindi richiama questa funzione

208
00:15:54,110 --> 00:15:57,870
e quindi fai qualcosa all'interno di quella funzione lì.

209
00:15:57,870 --> 00:16:00,958
Quindi questo tipo di codice può essere restituito anche per

210
00:16:00,958 --> 00:16:06,400
rispondere agli eventi causati dal comportamento del carosello.

211
00:16:07,490 --> 00:16:12,300
Dopo aver preso in considerazione alcuni di questi esempi, passeremo a un esercizio in cui

212
00:16:12,300 --> 00:16:17,460
scriveremo un codice basato su JavaScript per controllare il nostro carosello.

213
00:16:17,460 --> 00:16:23,190
Scriveremo codice per includere un paio di pulsanti all'interno del nostro carosello,

214
00:16:23,190 --> 00:16:28,280
che verranno utilizzati per controllare l'azione di scorrimento della giostra.

215
00:16:28,280 --> 00:16:33,560
Quindi, il che significa che possiamo mettere in pausa e riprendere l'azione scorrevole della nostra giostra.

216
00:16:33,560 --> 00:16:37,699
E attiveremo questi pulsanti da JavaScript.

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