La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Jquery ou Javascript ? Javascript Langage très connu, très utilisé  Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence.

Présentations similaires


Présentation au sujet: "Jquery ou Javascript ? Javascript Langage très connu, très utilisé  Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence."— Transcription de la présentation:

1

2 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

3 Jquery, à quoi ça ressemble ? Code source de Jquery

4 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

5 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é

6 Sites/CMS utilisant Jquery Site du Zéro Google et ses différents services Mozilla Amazon WordPress...

7 Inclure Jquery dans votre code 2 possibilités À partir de votre serveur Jquerry.com / Download À partir de Google

8 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

9 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…)

10 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

11 Inclusion de jquery

12 Fonction de base de Jquery Test jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js jQuery(document).ready(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); On va bosser avec jQuery, c'est super !

13 réduction Test jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js jQuery(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); On va bosser avec jQuery, c'est super !

14 Encore réduit – le plus utilisé Test jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js $(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); On va bosser avec jQuery, c'est super !

15 Exercice 1 Importer Jquery et afficher une alerte (ou une console) lorsque Jquery et la page sont chargés

16 Si plusieurs bibliothèques $(function(){ // Du code en jQuery va pouvoir être tapé ici ! })(jQuery);

17

18 Sélecteurs basiques Par Document $(document); par Id $('#monId'); Par classe css $('.maClasse'); …

19 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

20 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

21 Cas des formulaires $('input[type=button]'); // un input de type button $('input:button'); //un input de type button plus rapide

22 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');

23 Tous les sélecteurs web2.com/documentation/selecteurs.php web2.com/documentation/selecteurs.php

24 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()

25 Exercice 2 Faire une image qui crée une alerte lorsqu’on clique dessus.

26 Exercice 3 Faire en sorte que lorsqu’on clique sur un paragraphe, il disparaisse en « remontant »

27 Exercice 4 Faites un document où lorsqu’on appuie sur la touche entrée, il y a une alerte

28 Liste des clés clavier Code touche

29 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


Télécharger ppt "Jquery ou Javascript ? Javascript Langage très connu, très utilisé  Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence."

Présentations similaires


Annonces Google