La base
- inclure un fichier js dans html
<script type="text/javascript" src="..."></script> - télécharger la bibliothèque, la mettre quelque part dans
votre répertoire, et la charger dans votre page, avec :
<script type="text/javascript" src="jquery.js"></script> - La fonction
$
la fonction principale de jQuery, qui permet d’accéder aux
éléments du DOM (l’arbre de la page) au moyen de sélecteurs css. $(document).ready,
événement qui fait office demain: on lui
passe en paramètre une fonction qui sera lancée quand le document
aura été complètement chargé.- Lier une fonction à un événement,
c’est une des opérations
principales en javascript. Les fonctions sont donc passées en
paramètre d’autres fonctions.
Un exemple simple
Le html :
<p>Bonjour...</p>
<p class="test">Youhou, survole-moi !!!</p>
Le js :
$(document).ready(function(){
$(".test").mouseenter(function() {
$(this).replaceWith('<p>Ahahahahaha !!!</p>')
});
});
Lorsque le document est prêt, on enclenche une action sur l’événement
mouseenter de tous les éléments de classe test (en l’occurrence,
le deuxième paragraphe).
Le paramètre de la fonction $ est un sélecteur css. La fonction est
appliquée à tous les éléments sélectionnés (ici il n’y en a qu’un).
On ajoute des effets à notre exemple
Le résultat ici, utilisant ce fichier js.
C’est en pensant aux « boutons suicides » utilisés ici que j’ai ajouté la vidéo en début de billet. Elle illustre très bien le mécanisme de déclenchement d’une action sur un événement.
Les rubriques principales de la doc (facile à lire)
J’ai utilisé chacun de ces aspects dans l’exemple.
À noter que pour l’inclusion de scripts, il est inutile avec HTML5 de préciser le type. Autrement dit, il est correct d’écrire:
à la place de:
On n’est même pas obligés de fermer la balise (
), puisqu’on est pas dans du XHTML. Ca marche également avec les styles CSS. Certains vont même jusqu’à ne pas écrire d’extension, exemple:Pour optimiser le chargement de la page pour le visiteur, on peut placer ses scripts non pas dans le
mais dans le bas de la page, en dessous du. Les navigateurs chargent la page « de haut en bas ». En utilisant cette méthode, le contenu sera chargé avant les scripts, utile s’ils sont lourds (comme Scriptaculous par exemple, alternative à jQuery), mais à ne pas appliquer si les scripts sont nécessaires pour l’affichage du contenu (ex: Un élément affiché normalement est caché au chargement par javascript).Autre astuce, n’inclure le javascript que s’il est nécessaire sur la page courante (par exemple en PHP:
if ($page == "animations") { echo("<script ...");}). C’est toujours ça de gagné.Pour finir, ne pas utiliser javascript pour des éléments essentiels d’un site, par exemple la navigation, ou alors proposer une alternative. Selon les études, 5 à 7% des utilisateurs n’ont pas de javascript (navigateurs textuels (comme Lynx), lecteurs visuels (pour les aveugles), etc). C’est peu, mais ils ne sont pas inexistants pour autant.
Les codes de mon précédent commentaire n’ont pas été affichés. Les voici (remplacez les ‘[' et ']‘ par »)
[...] il est correct d’écrire:
[script src="js/toto.js"][/script]à la place de:
[script type="text/javascript" src="js/toto.js"][/script][...] exemple:
[link rel="stylesheet" href="/css/oldschool"]Une autre technique d’optimisation du JS consiste à compiler son code (enlever tous les commentaires et les espaces). Google propose un outil en ligne qui le fait automatiquement.
Merci Baptiste (et désolé pour les problèmes de html dans la gestion des commentaires, je constate en écrivant ce commentaire que les balises autorisées sont écrites en dessous du textarea, et script n’en fait pas partie)