[MUSIQUE].
Passons maintenant un peu de temps à essayer de comprendre comment Bootstrap et
jQuery fonctionnent ensemble pour soutenir les composants JavaScript de Bootstrap.
Comme nous l'avons compris dans le module précédent, Bootstrap a
un certain nombre de composants Java intéressants.
Et nous avons également appris que les composants basés sur Java de Bootstrap
sont tous activés en utilisant jQuery comme support.
Beaucoup de ces plugins sont écrits en jQuery.
Leurs plugins eux-mêmes peuvent être inclus individuellement ou
vous pouvez inclure tous les plugins ensemble comme une seule unité.
Dans les exercices, nous avons inclus tous les
plugins JavaScript de Bootstrap dans notre page Web.
Nous avons également vu ce graphique dans le module précédent pour
nous aider à comprendre la relation entre JavaScript, jQuery, et
comment les plugins basés sur JS de Bootstrap sont implémentés.
Nous avons donc vu que les composants JS de Bootstrap boivent dans les composants basés sur JQuery et
nous permettent de les utiliser facilement dans notre page Web.
Nous avons également appris que les composants basés sur Javascript de Bootstrap peuvent être utilisés
dans votre page Web sans écrire une seule ligne de code JavaScript.
C' est donc là que les attributs données* viennent à notre secours.
Ainsi, vous pouvez utiliser les différents attributs que nous avons vus dans le
module précédent pour activer de nombreux composants basés sur Javascript de notre Bootstrap.
Dans le cas où vous voulez plus de flexibilité avec vos composants JavaScript
, la flexibilité totale de cette API basée sur Javascript
est disponible pour tous les composants JavaScript Bootstrap.
Vous pouvez écrire du code en utilisant la syntaxe jQuery, puis l'utiliser
ensemble pour contrôler les composants JS de votre Bootstrap.
Nous allons l'explorer un peu plus en détail dans ce module.
Avant d'aller plus loin, permettez-moi de vous donner un aperçu rapide de jQuery et de sa syntaxe afin
que nous comprenions une partie du code que nous allons écrire dans ce module.
jQuery est une
bibliothèque Java très puissante et légère qui fournit un certain nombre de composants différents.
C' est une bibliothèque riche en fonctionnalités qui permet d'écrire du code pour
faire des manipulations HTML ou DOM.
Il vous permet de faire de la manipulation CSS.
Ainsi, par exemple,
vous pouvez appliquer des classes CSS à divers éléments HTML via le code jQuery.
Il vous permet de gérer les événements HTML,
et lorsque ces événements se produisent, vous pouvez implémenter des méthodes qui sont exécutées
en réponse à l'occurrence de ces événements.
jQuery prend également en charge divers effets et
animations qui peuvent être appliqués à vos éléments HTML.
JQuery vous permet également d'interagir avec un serveur back-end en utilisant AJAX.
Bien que nous ne l'explorerons pas trop en détail dans ce cours.
Nous avons également appris que les composants JavaScript de Bootstrap
sont construits sur jQuery.
Ces composants utilisent la plupart des méthodes jQuery qui sont disponibles pour
implémenter les différentes fonctionnalités que ces composants JavaScript Bootstrap prennent en charge.
Comprenons brièvement la syntaxe jQuery.
Maintenant, si vous avez vu une partie du code que nous avons inclus
dans le module précédent, spécifiquement pour
l'info-bulle, vous vous souvenez qu'il y avait quelque chose qui a commencé par un signe de dollar.
Ainsi, la syntaxe jQuery est tout implémenté en utilisant le signe dollar.
Le signe dollar au début d'une phrase implique que cela définit et
accède aux plugins de bibliothèque de jQuery qui sont disponibles.
Maintenant, chaque fois que nous utilisons le signe du dollar, vous fournissez également un sélecteur.
Le sélecteur est utilisé pour interroger et trouver les
éléments HTML dans votre DOM auxquels vous souhaitez appliquer cette manipulation.
Il existe différentes façons de faire des sélections.
Nous les regarderons dans la diapositive suivante.
Ensuite, le troisième aspect d'une instruction jQuery est l'action que vous spécifiez.
Maintenant que vous sélectionnez un élément HTML, quel type d'action vous voulez effectuer
sur cet élément, donc c'est la troisième partie que vous verrez.
Ainsi, à titre d'exemple, vous pouvez spécifier une instruction jQuery
comme $ (« p ») dans les codes, puis .hide.
Donc, dans ce cas, ce que cela implique est que, sélectionnez tous les éléments HTML
qui sont les éléments de paragraphe, en
commençant par la balise p, puis ces éléments cachent ces éléments.
Donc, l'action à effectuer est la hauteur,
donc cela entraînera que tous les éléments p seront cachés de votre
DOM, et par conséquent de la page Web qui est rendue.
De même, vous verrez plus tard nous utiliser
une déclaration comme dire dollar,
puis entre guillemets, #mycarousel,
ce qui implique que vous spécifiez l'ID d'un élément HTML spécifique,
puis spécifiez carrousel et pause.
Nous examinerons plus de détails sur ce que cela fait réellement
dans l'une des diapositives suivantes là-bas.
Mais notez la structure de la syntaxe de l'instruction jQuery là-bas.
Vous spécifiez le sélecteur, puis vous spécifiez l'action correspondante à
effectuer sur l'élément sélectionné par ces sélecteurs.
Jetons un coup d'oeil à l'exemple Bootstrap jQuery.
Nous reviendrons à l'exemple précédent que nous avons vu plus tôt,
où nous présentons l'info-bulle.
Donc, lorsque nous introduisons l'info-bulle, nous avons spécifié le script,
puis à l'intérieur du script, nous avons dit $ (document).
Dans ce cas, le document désigne l'ensemble du document.
Donc, le sélectionné ici est pour l'ensemble du document.
Donc, pour l'ensemble du document, puis nous allons spécifier prêt.
Prêt est l'action à prendre.
Donc, lorsque le document est prêt, exécutez cette fonction qui est
spécifiée comme paramètre pour cette action prête là.
Donc, la fonction que nous avons vu être utilisée pour l'info-bulle l'a spécifiée comme $,
puis entre parenthèses, dit-il, data-toggle= » info-bulle ».
Maintenant, nous spécifions que sélectionner les éléments pour
lesquels il y a un attribut avec data-toggle="tooltip ».
Ensuite, pour les éléments qui correspondent à ces critères, effectuez cette action
appelée activer les infobulles pour ces éléments.
Et nous fermons la fonction là-bas.
Donc, cela spécifie que ce script particulier
sera activé pour les éléments pour lesquels vous avez appliqué l'info-bulle de bascule de données.
Donc, fondamentalement, pour les éléments HTML sur lesquels vous avez défini des infobulles,
vous voulez que l'infobulle soit activé là.
Donc, c'est ainsi que nous interprétons cette syntaxe de cet exemple jQuery ici.
Regardons les différentes façons de spécifier les sélecteurs.
Donc, comme nous nous rendons compte de la syntaxe de l'instruction jQuery,
nous suivons toujours dollar, puis, entre parenthèses, nous spécifions un sélecteur.
Comment spécifions-nous les sélecteurs, quelles sont les différentes façons de spécifier les sélecteurs ?
Voici quelques possibilités.
Vous pouvez spécifier un sélecteur en spécifiant un
élément HTML spécifique en spécifiant la balise.
Ainsi, vous pouvez dire p, button, h4,
h3, ou l'une des balises HTML directement.
Et donc dans ce cas, le nom de la balise HTML est spécifié entre guillemets et
cela formera votre sélecteur.
Lorsque vous appliquez un sélecteur comme celui-ci, vous dites que tous les éléments qui correspondent à
ce critère seront sélectionnés.
Ensuite, vous pouvez également spécifier un
élément DOM HTML spécifique en spécifiant l'ID de cet élément à l'aide du #id.
Ainsi, par exemple, nous utilisons #myCarousel.
Donc, dans ce cas, vous dites sélectionner cet
élément HTML particulier pour lequel l'ID est MyCarrousel.
C' est donc l'autre façon de sélectionner, en spécifiant un ID pour un élément.
La troisième possibilité est de sélectionner
des éléments par les classes qui s'y sont appliquées.
Ainsi, par exemple, vous pouvez voir entre parenthèses si vous dites .btn,
ce qui signifie que tous les éléments HTML DOM pour
lesquels vous avez appliqué la classe de bouton seront sélectionnés.
Ou vous pouvez même vous qualifier davantage en spécifiant un groupe de classes en
disant .btn.btn-default, ce qui signifie que les éléments pour
lesquels la classe bouton et la classe par défaut du bouton ont tous deux été appliqués.
C' est donc une autre façon,
en utilisant les classes qui sont appliquées à l'élément HTML.
L' autre possibilité est de spécifier un attribut qui a été appliqué
à l'élément HTML.
Ainsi, par exemple, vous pouvez dire que les attributs sont spécifiés entre crochets ici.
Ainsi, vous pouvez voir entre crochets href, et l'inclure dans la citation, ce
qui signifie que tous les éléments HTML pour lesquels l'attribut href a été appliqué.
De même, vous pouvez dire data-toggle="tooltip »,
qui enregistre essentiellement tous les éléments pour
lesquels l'attribut tooltip data-toggle a été appliqué.
En outre, en sélectionnant l'élément courant pour
lequel vous voulez faire quelque chose en disant $ (this).
Donc, pour l'élément actuel qui a déjà été sélectionné, pour
cela, faites quelque chose.
Et beaucoup plus d'autres possibilités.
Voici donc quelques exemples, donc vous me verrez utiliser certains d'entre eux
dans les exemples et l'exercice qui suit.
Non seulement cela, vous pouvez également spécifier des événements jQuery,
des événements basés sur lesquels vous répondez.
Ainsi, par exemple, les interactions de l'utilisateur
avec divers éléments de votre page Web provoqueront des événements DOM.
Ainsi, par exemple, avec une souris, l'utilisateur peut cliquer à un emplacement particulier.
Ou double-cliquez, ou lorsque la souris entre et quitte un emplacement spécifique.
Pour le clavier, vous pouvez répondre aux pressions sur les touches, clavier et clavier.
Événements pour les formulaires, lorsque le formulaire est soumis,
lorsqu'il y a un changement dans une
valeur d'élément d'entrée particulière, et lorsqu'un élément particulier est concentré, etc.
On peut même parler de tout le document.
Ainsi, lors du chargement du document, lors du redimensionnement du document,
lors du défilement ou du déchargement du document, vous pouvez répondre à ces événements.
Ainsi, dans ce cas, les méthodes d'événement jQuery qui sont prises en charge incluent ready
, click, dblclick, mousedown, on, et ainsi de suite.
Donc, ce sont toutes les méthodes d'événement qui
seront exécutées lors de l'apparition de l'un de ces événements là-bas.
Prenons un exemple du Carrousel de Bootstrap pour voir comment le
code JavaScript peut être écrit pour contrôler les actions du carrousel.
Donc, pour un carrousel, vous avez déjà vu du module précédent, la taille de l'index.
Nous avons utilisé tous ces attributs.
Nous avons donc utilisé l'attribut data-slide="prev|next », ou
nous avons dit data-slide-to et ensuite spécifié le numéro de diapositive spécifique,
où il est dit data-ride+"carrousel ».
Ensuite, nous avons spécifié l'intervalle de données, l'intervalle pour
l'action glissante à avoir lieu.
Donc, pour le carrousel, vous pouvez faire des choses comme,
par exemple, vous pouvez spécifier des contrôles basés sur JavaScript.
Vous pouvez voir $, et entre parenthèses spécifiez pour sélectionner les éléments,
les carousels, qui sont inclus dans votre page en spécifiant .carrousel.
Signifiant tous les éléments pour lesquels la classe carrousel a été appliquée,
puis après que vous utilisez le .carrousel pour spécifier quelque chose.
Donc, à titre d'exemple, vous me verrez utiliser quelque chose comme ça
dans l'exercice qui suit.
Nous dirons .carrousel et carrousel, et
à l'intérieur, vous spécifieriez interval:2000,
ce qui signifie que l'intervalle pour le glissement est de 2000 millisecondes.
Ou deux secondes, dans ce cas.
Ainsi, vous contrôlez ou modifiez une propriété particulière
de l'élément JavaScript carrousel.
Le carrousel supporte également de nombreux autres contrôles.
Ainsi, par exemple, vous pouvez dire carrousel (« cycle »),
ce qui signifie commencer à faire du vélo les éléments de gauche à droite.
Vous pouvez dire carrousel ('pause'), pour mettre en pause l'action glissante du carrousel.
Ensuite, vous pouvez dire carrousel (nombre), donc
il fait cycles le carrousel à cet élément particulier de carrousel.
Et puis vous pouvez dire carrousel ('prev'),
carrousel ('next') pour aller à l'article précédent et l'article suivant dans mon carrousel.
Ainsi, ceux-ci peuvent être invoqués directement à partir de notre code JavaScript.
De même, lorsque l'
élément de carrousel JavaScript est dans votre page Web, il provoque divers événements.
Et en fonction de l'occurrence de ces événements, vous pouvez répondre.
Ainsi, par exemple, vous pouvez dire slide.bs.carrousel.
Cet événement particulier sera déclenché lorsque la méthode d'instance de slide est appelée.
De même, slid.bs.carrousel signifie que
cet événement est déclenché lorsqu'il a terminé la transition de diapositive vers l'élément suivant.
Donc, dans votre code, vous pouvez spécifier quelque chose
comme $ ( » #myCarousel « ) .on ('slide.bs.carousel'.
Donc, lorsque cette action de diapositive démarre, appelez cette fonction,
puis faites quelque chose à l'intérieur de cette fonction là.
Donc, ce type de code peut être retourné aussi pour
répondre aux événements qui sont causés par le comportement de votre carrousel.
Après avoir examiné certains de ces exemples, nous allons passer à un exercice où nous
allons réellement écrire du code basé sur JavaScript pour contrôler notre carrousel.
Nous allons écrire du code pour inclure quelques boutons dans notre carrousel,
qui seront utilisés pour contrôler l'action de glissement du carrousel.
Donc, ce qui signifie que nous pouvons faire une pause et reprendre l'action glissante de notre carrousel.
Et nous allons activer ces boutons à partir de JavaScript.
[ MUSIQUE]