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.