WEBVTT

00:00:00.770 --> 00:00:02.612
Je vais maintenant vous initier

00:00:02.612 --> 00:00:05.722
à l'utilisation de jQuery dans votre page Web.

00:00:05.722 --> 00:00:09.005
La 1ère étape consiste à inclure
la bibliothèque jQuery

00:00:09.005 --> 00:00:11.542
en utilisant une balise <script>.

00:00:12.232 --> 00:00:16.122
Avant, on plaçait le JavaScript à l'intérieur
d'une balise ,

00:00:16.122 --> 00:00:20.276
mais cette fois, je vais ajouter un attribut 'src'.

00:00:20.276 --> 00:00:24.391
Et il me faut le définir avec une URL.

00:00:24.391 --> 00:00:26.566
Quelle doit être cette URL ?

00:00:26.566 --> 00:00:28.628
Si je travaillais sur mon propre ordinateur

00:00:28.628 --> 00:00:30.093
et que j'avais téléchargé jQuery

00:00:30.093 --> 00:00:32.525
dans le même répertoire que ma page Web,

00:00:32.525 --> 00:00:36.473
je pourrais juste écrire 'jquery.js' ici.

00:00:36.473 --> 00:00:39.408
Mais ça ne marchera pas, ici, à la Khan Academy.

00:00:39.408 --> 00:00:43.096
Ici, il faut une URL absolue de jQuery

00:00:43.096 --> 00:00:45.885
pointant sur un serveur en ligne quelque part.

00:00:45.885 --> 00:00:50.082
Il y a une liste de ces URL sur jquery.com,

00:00:50.622 --> 00:00:52.738
et j'ai l'une d'entre elles ici, que je vais coller.

00:00:52.738 --> 00:00:54.430
Et voilà !

00:00:54.430 --> 00:00:56.119
Bien. Maintenant, je vais discuter de quelques détails

00:00:56.119 --> 00:00:58.031
à propos de cette URL.

00:00:58.031 --> 00:01:01.820
Premièrement, elle commence avec 'https'.

00:01:01.820 --> 00:01:05.231
Ça signifie que c'est une URL sécurisée.

00:01:05.231 --> 00:01:09.231
Nous ne vous permettons que l'inclusion
de ressources sécurisées

00:01:09.231 --> 00:01:11.207
dans les pages Web de la Khan Academy

00:01:11.207 --> 00:01:15.343
et c'est généralement recommandé
dans le développement Web.

00:01:15.663 --> 00:01:18.862
OK. Deuxièmement, elle est située

00:01:18.862 --> 00:01:22.751
sur un serveur Google : googleapis.com

00:01:22.751 --> 00:01:25.385
Ce serveur est appelé un CDN,

00:01:25.385 --> 00:01:27.921
un réseau de diffusion de contenu
(Content Delivery Network),

00:01:27.921 --> 00:01:29.406
ce qui veut dire que c'est optimisé

00:01:29.406 --> 00:01:32.625
pour servir des fichiers statiques,
comme des bibliothèques JavaScript,

00:01:32.625 --> 00:01:35.388
et ce, très rapidement.

00:01:35.388 --> 00:01:38.164
Ce serveur Google fait partie de ceux dans
lesquels j'ai confiance,

00:01:38.164 --> 00:01:41.301
et généralement, vous devez toujours
faire confiance dans les serveurs

00:01:41.301 --> 00:01:43.002
par lesquels vous récupérez des scripts

00:01:43.002 --> 00:01:47.240
vu qu'ils pourraient potentiellement
agir de façon malveillante sur votre page.

00:01:47.400 --> 00:01:50.013
OK. Troisièmement, il y a un numéro de version

00:01:50.013 --> 00:01:53.807
dans cette URL : 2.1.4.

00:01:53.807 --> 00:01:56.402
La bibliothèque jQuery est en développement actif

00:01:56.402 --> 00:01:59.015
et ils sortent régulièrement de nouvelles versions.

00:01:59.015 --> 00:02:00.987
Les nombres les plus à gauche

00:02:00.987 --> 00:02:03.279
représentent les modifications majeures de version

00:02:03.279 --> 00:02:05.755
alors que les nombres les plus à droite

00:02:05.755 --> 00:02:08.134
représentent les versions mineures.

00:02:08.134 --> 00:02:10.353
J'utiliser jQuery 2 ici,

00:02:10.353 --> 00:02:12.295
qui fonctionne sur les navigateurs modernes

00:02:12.295 --> 00:02:14.484
mais pas sur IE8.

00:02:14.484 --> 00:02:15.635
Sur votre propre site,

00:02:15.635 --> 00:02:19.627
vous pouvez décider quelle version utiliser
en vous basant sur vos besoins.

00:02:19.627 --> 00:02:22.809
Bien. Donc, jQuery est incluse.

00:02:22.809 --> 00:02:24.973
Maintenant, utilisons-la

00:02:24.973 --> 00:02:28.266
dans une autre balise <script>.

00:02:30.226 --> 00:02:33.309
Toutes les bibliothèques JavaScript fournissent
des fonctions

00:02:33.309 --> 00:02:35.358
et elles donnent les noms de ces fonctions.

00:02:35.358 --> 00:02:37.010
On doit regarder dans la documentation

00:02:37.010 --> 00:02:39.262
pour découvrir les noms de ces fonctions

00:02:39.262 --> 00:02:41.761
et ce qu'elles font réellement.

00:02:41.761 --> 00:02:45.444
Bien, la bibliothèque jQuery
fournit une fonction principale

00:02:45.444 --> 00:02:47.524
qui possède un nom très court.

00:02:47.524 --> 00:02:50.637
C'est juste le signe '$'.

00:02:50.637 --> 00:02:52.259
Ça signifie que la 1ère chose que j'écris

00:02:52.259 --> 00:02:53.556
est '$',

00:02:53.556 --> 00:02:56.526
puis 2 parenthèses, car c'est une fonction,

00:02:56.526 --> 00:02:59.412
et bien sûr, un point-virgule.

00:02:59.412 --> 00:03:01.928
C'est vraiment bien que le nom de cette fonction
soit si court

00:03:01.928 --> 00:03:05.756
car on appellera cette fonction sacrément souvent.

00:03:06.226 --> 00:03:08.928
Il y a plein de choses qu'on peut passer à cette fonction,

00:03:08.928 --> 00:03:10.300
mais pour cette exemple introductif,

00:03:10.300 --> 00:03:15.254
je vais juste passer une chaîne de caractères "h1".

00:03:16.319 --> 00:03:17.697
Quand je fais ça,

00:03:17.697 --> 00:03:19.724
ça demande à jQuery de trouver

00:03:19.724 --> 00:03:23.095
tous les éléments <h1> sur la page

00:03:23.095 --> 00:03:28.050
pour les retourner sous forme
d'objet collection jQuery.

00:03:28.150 --> 00:03:29.311
Maintenant que j'ai fait ça,

00:03:29.311 --> 00:03:33.233
je peux appeler d'autres méthodes sur l'objet jQuery

00:03:33.233 --> 00:03:37.200
dans le but de manipuler les élements <h1>
qui ont été trouvés.

00:03:37.200 --> 00:03:39.939
Si je souhaite modifier leur texte interne à toutes,

00:03:39.939 --> 00:03:43.356
je peux appeler la fonction 'text'

00:03:43.356 --> 00:03:46.044
et lui passer une chaîne de caractères.

00:03:47.244 --> 00:03:48.492
Ça passe !

00:03:48.492 --> 00:03:49.792
Oui !

00:03:49.792 --> 00:03:50.804
Et on a fini !

00:03:50.804 --> 00:03:53.029
C'est notre premier morceau de jQuery.

00:03:53.029 --> 00:03:56.910
On a donc inclus la bibliothèque jQuery
avec la balise ,

00:03:56.910 --> 00:03:59.819
dit à jQuery de chercher toutes les <h1>
sur la page,

00:03:59.819 --> 00:04:03.643
puis demandé à jQuery de modifier, à toutes, leur texte.

00:04:03.643 --> 00:04:06.332
Si vous continuez, on en verra plus,

00:04:06.332 --> 00:04:07.653
plus en détail,

00:04:07.653 --> 00:04:11.117
avec plus de techniques pour sélectionner
et manipuler les éléments,

00:04:11.117 --> 00:04:14.353
en utilisant jQuery pour répondre à des événements
utilisateur sur la page,

00:04:14.353 --> 00:04:18.558
plus des trucs cools avec les animations et les effets.