-
Je vais maintenant vous initier
-
à l'utilisation de jQuery dans votre page Web.
-
La 1ère étape consiste à inclure
la bibliothèque jQuery
-
en utilisant une balise <script>.
-
Avant, on plaçait le JavaScript à l'intérieur
d'une balise ,
-
mais cette fois, je vais ajouter un attribut 'src'.
-
Et il me faut le définir avec une URL.
-
Quelle doit être cette URL ?
-
Si je travaillais sur mon propre ordinateur
-
et que j'avais téléchargé jQuery
-
dans le même répertoire que ma page Web,
-
je pourrais juste écrire 'jquery.js' ici.
-
Mais ça ne marchera pas, ici, à la Khan Academy.
-
Ici, il faut une URL absolue de jQuery
-
pointant sur un serveur en ligne quelque part.
-
Il y a une liste de ces URL sur jquery.com,
-
et j'ai l'une d'entre elles ici, que je vais coller.
-
Et voilà !
-
Bien. Maintenant, je vais discuter de quelques détails
-
à propos de cette URL.
-
Premièrement, elle commence avec 'https'.
-
Ça signifie que c'est une URL sécurisée.
-
Nous ne vous permettons que l'inclusion
de ressources sécurisées
-
dans les pages Web de la Khan Academy
-
et c'est généralement recommandé
dans le développement Web.
-
OK. Deuxièmement, elle est située
-
sur un serveur Google : googleapis.com
-
Ce serveur est appelé un CDN,
-
un réseau de diffusion de contenu
(Content Delivery Network),
-
ce qui veut dire que c'est optimisé
-
pour servir des fichiers statiques,
comme des bibliothèques JavaScript,
-
et ce, très rapidement.
-
Ce serveur Google fait partie de ceux dans
lesquels j'ai confiance,
-
et généralement, vous devez toujours
faire confiance dans les serveurs
-
par lesquels vous récupérez des scripts
-
vu qu'ils pourraient potentiellement
agir de façon malveillante sur votre page.
-
OK. Troisièmement, il y a un numéro de version
-
dans cette URL : 2.1.4.
-
La bibliothèque jQuery est en développement actif
-
et ils sortent régulièrement de nouvelles versions.
-
Les nombres les plus à gauche
-
représentent les modifications majeures de version
-
alors que les nombres les plus à droite
-
représentent les versions mineures.
-
J'utiliser jQuery 2 ici,
-
qui fonctionne sur les navigateurs modernes
-
mais pas sur IE8.
-
Sur votre propre site,
-
vous pouvez décider quelle version utiliser
en vous basant sur vos besoins.
-
Bien. Donc, jQuery est incluse.
-
Maintenant, utilisons-la
-
dans une autre balise <script>.
-
Toutes les bibliothèques JavaScript fournissent
des fonctions
-
et elles donnent les noms de ces fonctions.
-
On doit regarder dans la documentation
-
pour découvrir les noms de ces fonctions
-
et ce qu'elles font réellement.
-
Bien, la bibliothèque jQuery
fournit une fonction principale
-
qui possède un nom très court.
-
C'est juste le signe '$'.
-
Ça signifie que la 1ère chose que j'écris
-
est '$',
-
puis 2 parenthèses, car c'est une fonction,
-
et bien sûr, un point-virgule.
-
C'est vraiment bien que le nom de cette fonction
soit si court
-
car on appellera cette fonction sacrément souvent.
-
Il y a plein de choses qu'on peut passer à cette fonction,
-
mais pour cette exemple introductif,
-
je vais juste passer une chaîne de caractères "h1".
-
Quand je fais ça,
-
ça demande à jQuery de trouver
-
tous les éléments <h1> sur la page
-
pour les retourner sous forme
d'objet collection jQuery.
-
Maintenant que j'ai fait ça,
-
je peux appeler d'autres méthodes sur l'objet jQuery
-
dans le but de manipuler les élements <h1>
qui ont été trouvés.
-
Si je souhaite modifier leur texte interne à toutes,
-
je peux appeler la fonction 'text'
-
et lui passer une chaîne de caractères.
-
Ça passe !
-
Oui !
-
Et on a fini !
-
C'est notre premier morceau de jQuery.
-
On a donc inclus la bibliothèque jQuery
avec la balise ,
-
dit à jQuery de chercher toutes les <h1>
sur la page,
-
puis demandé à jQuery de modifier, à toutes, leur texte.
-
Si vous continuez, on en verra plus,
-
plus en détail,
-
avec plus de techniques pour sélectionner
et manipuler les éléments,
-
en utilisant jQuery pour répondre à des événements
utilisateur sur la page,
-
plus des trucs cools avec les animations et les effets.
Khan Academy
