[MUSICA].
Passiamo ora un po 'di tempo cercando di capire come Bootstrap e
jQuery lavorano insieme per supportare i componenti JavaScript di Bootstrap.
Come abbiamo capito dal modulo precedente, Bootstrap ha
una serie di interessanti componenti basati su JavaScript.
E abbiamo anche imparato che i componenti basati su JavaScript di Bootstrap
sono tutti abilitati usando jQuery come supporto.
Così molti di questi plugin sono scritti in jQuery.
I loro plugin stessi possono essere inclusi singolarmente o
è possibile includere tutti i plugin insieme come una singola unità.
Negli esercizi, abbiamo incluso tutti i
plugin JavaScript di Bootstrap nella nostra pagina web.
Abbiamo anche visto questo grafico nel modulo precedente
per aiutarci a capire la relazione tra JavaScript, jQuery e
come i plugin basati su JS di Bootstrap sono implementati.
Così abbiamo visto che i componenti JS di Bootstrap bucano nei componenti basati su jQuery e
ci rendono facile utilizzarli nella nostra pagina web.
Abbiamo anche appreso che i componenti basati su JavaScript di Bootstrap possono essere utilizzati
nella tua pagina web senza scrivere una singola riga di codice JavaScript.
Quindi è qui che gli attributi data-* vengono in nostro soccorso.
Quindi è possibile utilizzare i vari attributi che abbiamo visto nel
modulo precedente per abilitare molti dei componenti basati su JavaScript del nostro Bootstrap.
Nel caso in cui desideri una maggiore flessibilità con i tuoi componenti JavaScript,
la piena flessibilità di quell'API basata su JavaScript
è disponibile per tutti i componenti JavaScript Bootstrap.
Puoi scrivere codice usando la sintassi jQuery e quindi usarlo
insieme per controllare i componenti JS del tuo Bootstrap. Lo
esploreremo in modo un po 'più dettagliato in questo modulo.
Prima di procedere ulteriormente, lascia che ti dia un rapido tour di jQuery e la sua sintassi in modo da
capire parte del codice che scriveremo in questo modulo.
jQuery è una
libreria basata su JavaScript molto potente e leggera che fornisce una serie di componenti diversi.
Si tratta di una libreria ricca di funzionalità che consente la scrittura di codice per
fare manipolazione HTML o DOM.
Ti permette di fare manipolazioni CSS.
Quindi, ad esempio,
è possibile applicare classi CSS a vari elementi HTML attraverso il codice jQuery.
Esso consente di gestire gli eventi HTML
e quando si verificano tali eventi è possibile implementare metodi che vengono eseguiti
in risposta al verificarsi di questi eventi.
jQuery supporta anche vari effetti e
animazioni che possono essere applicati ai tuoi elementi HTML.
Anche jQuery consente di interagire con un server back-end utilizzando AJAX.
Anche se non lo esploreremo troppo in dettaglio in questo corso.
Abbiamo anche imparato che i componenti JavaScript di Bootstrap
sono costruiti su jQuery.
Questi componenti fanno uso di molti dei metodi jQuery che sono disponibili per
implementare le varie funzionalità che questi componenti JavaScript Bootstrap supportano.
Cerchiamo di capire brevemente la sintassi jQuery.
Ora, se hai visto parte del codice che abbiamo incluso
nel modulo precedente, specificamente per
la descrizione strumento, ti ricordi che c'era qualcosa che iniziava con un simbolo del dollaro.
Quindi, la sintassi jQuery è tutta implementata usando il simbolo del dollaro.
Il simbolo del dollaro all'inizio di una frase implica che questo definisce e
accede ai plugin della libreria di jQuery disponibili.
Ora, ogni volta che usiamo il simbolo del dollaro, fornisci anche un selettore.
Il selettore viene utilizzato per interrogare e trovare quegli
elementi HTML all'interno del DOM a cui si desidera applicare questa manipolazione.
Ci sono vari modi di fare selezioni.
Li guarderemo nella diapositiva successiva.
Quindi il terzo aspetto di un'istruzione jQuery è l'azione che si specifica.
Ora che si seleziona un elemento HTML, che tipo di azione si desidera eseguire
su quell'elemento, così che è la terza parte che si vedrà.
Quindi, ad esempio, puoi specificare un'istruzione jQuery
come $ («p») all'interno dei codici e quindi .hide.
Quindi in questo caso ciò che implica è che, selezionare tutti quegli elementi HTML
che sono gli elementi del paragrafo,
iniziando con il tag p, e poi quegli elementi nascondono quegli elementi.
Quindi l'azione da eseguire è l'altezza,
quindi questo comporterà che tutti gli elementi p vengano nascosti dal tuo
DOM e di conseguenza dalla pagina web che viene renderizzata.
Allo stesso modo, si vedrà più avanti su di noi utilizzando
una dichiarazione come dire dollaro, e
poi tra virgolette, #mycarousel, il
che implica che si sta specificando l'ID di un elemento HTML specifico,
e quindi specificare carosello e pausa.
Vedremo ulteriori dettagli su ciò che questo effettivamente fa
in una delle diapositive successive lì.
Ma nota la struttura della sintassi dell'istruzione jQuery lì.
Si specifica il selettore e quindi si specifica l'azione corrispondente da
eseguire sull'elemento selezionato da questi selettori.
Diamo un'occhiata a Bootstrap esempio jQuery.
Torneremo all'esempio precedente che abbiamo visto in precedenza,
dove introduciamo il tooltip.
Quindi, quando introduciamo il tooltip, abbiamo specificato lo script e
poi all'interno dello script, abbiamo detto $ (documento).
In questo caso il documento indica l'intero documento.
Quindi il selezionato qui è per l'intero documento.
Quindi per l'intero documento, e poi specificheremo pronto.
Pronto è l'azione da intraprendere.
Quindi, quando il documento è pronto, quindi eseguire questa funzione che è
specificata come parametro per questa azione pronta lì.
Quindi la funzione che abbiamo visto essere utilizzata per il tooltip lo ha specificato come $, e
poi tra parentesi, ha detto, data-toggle=» tooltip».
Ora qui stiamo specificando che selezionare quegli elementi per i
quali c'è un attributo con data-toggle="tooltip».
Quindi, per gli elementi che corrispondono a questo criterio, eseguire questa azione
chiamata enable tooltip per quegli elementi.
E chiudiamo la funzione lì.
Quindi questo specifica che questo particolare script
verrà attivato per quegli elementi per i quali è stato applicato il tooltip dati-toggle.
Quindi, fondamentalmente per quegli elementi HTML su cui hai definito i tooltip,
vuoi che il tooltip sia abilitato lì.
Quindi questo è il modo in cui interpretiamo questa sintassi di questo esempio jQuery qui.
Diamo un'occhiata ai vari modi di specificare i selettori.
Quindi, come ci rendiamo conto dalla sintassi dell'istruzione jQuery,
seguiamo sempre dollaro e poi, tra parentesi, specifichiamo un selettore.
Come specifichiamo i selettori, quali sono i vari modi in cui è possibile specificare i selettori?
Ecco alcune possibilità.
È possibile specificare un selettore specificando qualsiasi
elemento HTML specifico specificando il tag.
Quindi puoi dire p, button, h4,
h3, o uno qualsiasi dei tag HTML direttamente.
E così in tal caso il nome del tag HTML è specificato tra virgolette e
questo formerà il tuo selettore.
Quando applichi un selettore come questo, stai dicendo che
verranno selezionati tutti gli elementi che corrispondono a questo criterio.
Quindi è anche possibile specificare un
elemento DOM HTML specifico specificando l'ID di tale elemento utilizzando il #id.
Quindi, ad esempio, usiamo #myCarousel.
Quindi in questo caso stai dicendo che seleziona quel particolare
elemento HTML per il quale l'ID è MyCarousel.
Quindi questo è l'altro modo di selezionare, specificando un ID per un elemento.
La terza possibilità è quella di selezionare
gli elementi dalle classi che si sono applicate a questo.
Quindi, ad esempio, puoi vedere tra parentesi se dici .btn,
ovvero
verranno selezionati tutti gli elementi HTML DOM per i quali hai applicato la classe button.
Oppure puoi anche qualificarti ulteriormente specificando un gruppo di classi
dicendo .btn.btn-default, il che significa che quegli elementi per
cui la classe button e la classe predefinita button sono stati entrambi applicati.
Quindi questo è un altro modo,
utilizzando le classi che vengono applicate all'elemento HTML.
L' altra possibilità è quella di specificare un attributo che è stato applicato
all'elemento HTML.
Quindi, ad esempio, puoi dire che gli attributi sono specificati tra parentesi quadre qui.
Quindi puoi vedere tra parentesi quadre href e includerlo nella citazione in modo
che significa che tutti quegli elementi HTML per i quali è stato applicato l'attributo href.
Allo stesso modo, puoi dire data-toggle="tooltip»,
che essenzialmente salva tutti quegli elementi per
i quali è stato applicato l'attributo tooltip data-toggle.
Inoltre, selezionando l'elemento corrente per il
quale vuoi fare qualcosa dicendo $ (questo).
Quindi significa, per l'elemento corrente che è già stato selezionato, per
questo, fai qualcosa.
E molte altre possibilità.
Quindi questi sono alcuni esempi, quindi mi vedrai usare alcuni di questi
negli esempi e nell'esercizio che segue.
Non solo, puoi anche specificare eventi jQuery,
eventi in base ai quali rispondi.
Quindi, ad esempio, le interazioni dell'utente
con vari elementi sulla tua pagina web causeranno eventi DOM.
Quindi, ad esempio, con un mouse, l'utente può fare clic in una posizione particolare. In alternativa
, fare doppio clic o quando il mouse entra e esce da una posizione specifica.
Per la tastiera è possibile rispondere alle pressioni dei tasti, ai tasti e ai tasti.
Eventi per i moduli, quando il modulo viene inviato,
quando c'è una modifica in un particolare
valore dell'elemento di input e quando un particolare elemento è focalizzato su, e così via.
Possiamo anche parlare dell'intero documento.
Quindi, al momento del caricamento del documento, dopo il ridimensionamento del documento,
dopo lo scorrimento o lo scarico del documento, è possibile rispondere a tali eventi.
Quindi, in tal caso, i metodi di evento jQuery supportati includono ready,
click, dblclick, mousedown, on e così via.
Quindi questi sono tutti i metodi di evento che
verranno eseguiti al verificarsi di uno di questi eventi lì.
Prendiamo un esempio del carosello di Bootstrap per vedere come il
codice JavaScript può essere scritto per controllare le azioni carosello.
Quindi, per una giostra, hai visto già dal modulo precedente, la dimensione dell'indice.
Abbiamo usato tutti questi attributi.
Quindi abbiamo usato l'attributo data-slide = «prev|next», o
abbiamo detto data-slide-to e quindi specificato il numero specifico della diapositiva,
dove dice data-ride+"carosello».
E poi abbiamo specificato l'intervallo di dati, l'intervallo per
l'azione di scorrimento per avvenire.
Quindi per il carosello puoi fare cose come,
ad esempio, puoi specificare controlli basati su JavaScript.
È possibile visualizzare $, e tra parentesi specificare di selezionare gli elementi,
i caroselli, che sono inclusi nella pagina specificando .carosello.
Significato tutti quegli elementi per i quali è stata applicata la classe carosello,
e quindi in seguito che si utilizza il.carosello per specificare qualcosa.
Quindi, ad esempio, mi vedrai usare qualcosa di simile
nell'esercizio che segue.
Diremo .carosello e giostra, e
all'interno di lì si specificherà interval:2000, il
che significa impostare l'intervallo per lo scorrimento su 2000 millisecondi.
O due secondi, in questo caso.
In questo modo puoi controllare o modificare una particolare proprietà
dell'elemento JavaScript carosello lì.
Il carosello supporta anche molti altri controlli.
Quindi, ad esempio, puoi dire carosello ('ciclo'), che
significa iniziare a pedalare gli oggetti da sinistra a destra.
Si può dire carosello ('pausa'), per mettere in pausa l'azione scorrevole della giostra.
Quindi si può dire carosello (numero), in modo
che cicli la giostra a quel particolare elemento carosello.
E poi puoi dire carosello ('prev'),
carosello ('prossimo') per andare all'elemento precedente e all'elemento successivo nel mio carosello.
Quindi, questi possono essere invocati direttamente dal nostro codice JavaScript.
Allo stesso modo, quando l'
elemento carosello JavaScript si trova nella tua pagina web, causa vari eventi.
E in base al verificarsi di questi eventi, puoi rispondere.
Quindi, ad esempio, puoi dire slide.bs.carosello.
Questo particolare evento verrà attivato quando viene richiamato il metodo di istanza della diapositiva.
Allo stesso modo, slid.bs.carosello significa che
questo evento viene attivato quando ha completato la transizione della diapositiva all'elemento successivo.
Quindi all'interno del tuo codice puoi specificare qualcosa
come $ (» #myCarousel «) .on ('slide.bs.carosel' l'.
Quindi significa che quando inizia l'azione della diapositiva, quindi richiama questa funzione
e quindi fai qualcosa all'interno di quella funzione lì.
Quindi questo tipo di codice può essere restituito anche per
rispondere agli eventi causati dal comportamento del carosello.
Dopo aver preso in considerazione alcuni di questi esempi, passeremo a un esercizio in cui
scriveremo un codice basato su JavaScript per controllare il nostro carosello.
Scriveremo codice per includere un paio di pulsanti all'interno del nostro carosello,
che verranno utilizzati per controllare l'azione di scorrimento della giostra.
Quindi, il che significa che possiamo mettere in pausa e riprendere l'azione scorrevole della nostra giostra.
E attiveremo questi pulsanti da JavaScript.
[ MUSIC]