Download
1 / 29
290 likes | 520 Views
Jquery. Jquery ou Javascript ?. Javascript Langage très connu, très utilisé Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence MIT et GNU GPL. Jquery, à quoi ça ressemble ?. Code source de Jquery. Bibliothèque ou framework ?. Bibliothèque ?
E N D
Jquery ou Javascript ? • Javascript • Langage très connu, très utilisé • Technologie incontournable • Evolution du javascript • Faciliter l’écriture du code • licence MIT et GNU GPL
Jquery, à quoi ça ressemble ? • Code source de Jquery
Bibliothèque ou framework ? • Bibliothèque ? • Ensemble de fonctions qui peuvent être insérées dans le code • Framework • Pareil sauf qu’il y a tellement de fonctions que ça influence la structure même de notre code • Constitue la base d’une application
Avantages • Uniformise les navigateurs • Interprétation du JavaScript propre à chaque navigateur • les animations • Point fort de Jquery • Les formulaires • Plus facile qu’avec du javascript seul • Ajax simplifié
Sites/CMS utilisant Jquery • Site du Zéro • Google et ses différents services • Mozilla • Amazon • WordPress • ...
Inclure Jquery dans votre code • 2 possibilités • À partir de votre serveur • Jquerry.com / Download • <script src = « cheminVersleFichier/ jquery.js »></script> • À partir de Google • <script src = « https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js » > </script>
Inclure Jquery sur votre serveur • Avantages • Développement • Vous pouvez développer sans internet (train, coupure réseau…) • Inconvénient • Déploiement • Surcharge du serveur, il travaille beaucoup plus
Chercher Jquery sur google • Avantages • Déploiement • Ce n’est pas votre serveur qui travaille • Inconvénient • Développement • Vous ne pouvez pas développer sans internet (train, coupure réseau…)
2 Jquery • Uncompress • Plus facile à lire (indentation propre) • Plus utiliser pour développer • Minified • Sans espace, sans retour à la ligne • Illisible • Mais plus léger, accélère le temps de chargement de votre page • Déploiement
Inclusion de jquery <html> <head> <!--code pour développer sans internet <script src = "../Jquery.js"></script> --> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title = "hello!"></title> </head> </html/>
Fonction de base de Jquery <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script> jQuery(document).ready(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
réduction <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script> jQuery(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
Encore réduit – le plus utilisé <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script> $(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
Exercice 1 • Importer Jquery et afficher une alerte (ou une console) lorsque Jquery et la page sont chargés
Si plusieurs bibliothèques $(function(){ // Du code en jQuery va pouvoir être tapé ici ! })(jQuery);
Sélecteurs basiques • Par Document • $(document); • par Id • $('#monId'); • Par classe css • $('.maClasse'); • …
Sélecteur et hiérarchie • Sélecteur Parent • $('p .lien'); • Sélection tous les éléments ayant la classe .lien, contenus dans un paragraphe qui joue le rôle de parent • Sélecteur frère • $('.lien + .visite'); • éléments ayant pour classe .visite, immédiatement précédés d'un élément ayant pour classe .lien • $('.lien ~ .visite'); • éléments .visite, précédés immédiatement ou non par un élément .lien
Sélecteurs particuliers • $('p:first'); // le premier paragraphe trouvé • $('a:last'); // le dernier lien de la page • $('p[id]'); // les paragraphes ayant un identifiant • $('p:eq(2)'); // le troisième paragraphe • $('input[name!=pseudo]'); // les éléments n'ayant pas « pseudo » pour nom • $('p:not(.rouge)'); // tous les paragraphes, sauf ceux ayant .rouge comme classe • $('input:not(.bleu, .vert)'); // tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe
Cas des formulaires • $('input[type=button]'); // un input de type button • $('input:button'); //un input de type button plus rapide
Performance des selecteurs • Efficacité décroissante : • Par ID(5 fois plus rapide que le suivant) • Par classe • Raccourcir les chaines ! • $('div p a'); 15 x plus lent que • $('#lien');
Tous les sélecteurs • http://jquery.developpeur-web2.com/documentation/selecteurs.php
Les événements $("#uneDiv").click(function(){ // Le code a exécuter ! }); • Clic :click() • Double-clic : dblclick() • Passage de la souris : hover() • Rentrer dans un élément : mouseenter() • Quitter un élément : mouseleave() • Presser un bouton de la souris : mousedown() • Relâcher un bouton de la souris : mouseup() • Scroller (utiliser la roulette) : scroll()
Exercice 2 • Faire une image qui crée une alerte lorsqu’on clique dessus.
Exercice 3 • Faire en sorte que lorsqu’on clique sur un paragraphe, il disparaisse en « remontant »
Exercice 4 Faites un document où lorsqu’on appuie sur la touche entrée, il y a une alerte
Liste des clés clavier • Code touche
Exercice 5 • Créer un script qui permet de faire une alerte quand on click sur un image et une autre alerte quand on passe simplement dessus
