Javascript et JQuery

1 026 vues

Publié le

Présentation de JQuery et Javascript

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 026
Sur SlideShare
0
Issues des intégrations
0
Intégrations
153
Actions
Partages
0
Téléchargements
84
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript et JQuery

  1. 1. Jean-Marie Renouard LightPath 2014©
  2. 2. Le logo PHP est du domaine public http://commons.wikimedia.org/wiki/File:PHP-logo.svg Ce document est licencié sous licence ◦Attribution-NonCommercial-ShareAlike ◦CC BY-NC-SA Plus de détails: http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ LightPath 2014© - http://www.jmrenouard.fr 2
  3. 3. Présentation de l’éco système Javascript Bases de Jquery Jouer avec les données avec JQuery Gestion des évenements Démarrage avec JQuery Chaînage d’opérations Ajax et JQuery Animations en JQuery Création de plugins LightPath 2014© - http://www.jmrenouard.fr 3
  4. 4. Onglets et menus en Jquery Selecteur de date Jquery Champs d’autocompletion Boite de dialogue Barre de progression Barre de selection Drag and drop en JQuery Selection, redimensionnement et tri LightPath 2014© - http://www.jmrenouard.fr 4
  5. 5. LightPath 2014© - http://www.jmrenouard.fr 5
  6. 6. Un langage de programmation Intégration dans les navigateurs Web Standard Restriction sur certains opérations de l’écriture et de lecture. LightPath 2014© - http://www.jmrenouard.fr 6
  7. 7. Javascript version 2.0 Basé sur ECMAScript 5 Format d’échange de données : JSON Support de l’AJAX Autre implémentation: ActionScript LightPath 2014© - http://www.jmrenouard.fr 7
  8. 8. Un framework ou plûtôt une librairie Il en existe d’autres Concept simple Multi-navigateur Communauté active Paradigme conducteur: trouver/faire LightPath 2014© - http://www.jmrenouard.fr 8
  9. 9. Prototype : petit, simple et élégant YUI: La librairie JS de Yahoo Dojo: une librairie JS complète mooTools: Idem LightPath 2014© - http://www.jmrenouard.fr 9
  10. 10. Léger Simple Apprentissage rapide Pas complexe Taille réduite Intégration facile avec divers composants LightPath 2014© - http://www.jmrenouard.fr 10
  11. 11. LightPath 2014© - http://www.jmrenouard.fr 11
  12. 12. Focalisation sur l’interaction HTML / Javascript 2 opérations de base: ◦Trouver quelque chose ◦Faire quelque chose avec LightPath 2014© - http://www.jmrenouard.fr 12
  13. 13. Jquery: une seule fonction jQuery est LA fonction de jQuery. Cette fonction à un raccourci: $ Préservation de conflit: jQuery.noConflict() LightPath 2014© - http://www.jmrenouard.fr 13
  14. 14. Recherche d’un div avec id « titre » ◦jQuery(‘div#titre’) ◦jQuery(‘#titre’) Recherche de tous les liens a ◦jQuery(‘a’) Recherche des élements de classe label ◦jQuery(‘.label’) Recherche des champs input ◦jQuery(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 14
  15. 15. Recherche d’un div avec id « titre » ◦$(‘div#titre’) ◦$(‘#titre’) Recherche de tous les liens a ◦$(‘a’) Recherche des élements de classe label ◦$(‘.label’) Recherche des champs input ◦$(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 15
  16. 16. Récupération d’un collection ◦$(‘div’) retourne une collection de tous les div Taille de la collection: ◦$(‘div’).length ◦$(‘div’).size() Récupération du premier élement: ◦$(‘div’)[0] Récupération du dernier élément: ◦$(‘div’)[$(‘div’).length-1] LightPath 2014© - http://www.jmrenouard.fr 16
  17. 17. Méthode each Cacher toutes les div $(‘div’).each( function() { this.hide(); } Affichage avec index $(‘div’).each( function(i) { console.log( i+’ ) ‘+this); } LightPath 2014© - http://www.jmrenouard.fr 17
  18. 18. LightPath 2014© - http://www.jmrenouard.fr 18
  19. 19. Manipulation de texte ◦$(‘div’).text(« contenu de la div »); Manipulation de contenu html ◦$(‘div’).html(«<p>contenu de la div</p> »); LightPath 2014© - http://www.jmrenouard.fr 19
  20. 20. Manipulation de valeur d’un champ input ◦$(‘:input#nom’).attr(«value », « Pierre »); ◦$(‘:input#nom’).attr( {«value »: « Pierre », « id »: « nom »} ); Récupération de la valeur de l’attribut ◦$(‘#nom’).attr(‘value’) Retrait d’attribut ◦$(‘div’).removeAttr (« id »); LightPath 2014© - http://www.jmrenouard.fr 20
  21. 21. Ajout de classe CSS ◦$(‘:input#nom’).addClass(«label»); Retrait de classe CSS ◦$(‘div’).removeClass(« label »); Désactivation/activation de classe CSS ◦$(‘div’).toggleClass(« label »); Ajout de style CSS à la volée ◦$(‘p’).css({‘color’: ‘red’, ‘font-size’: ‘20px’}); LightPath 2014© - http://www.jmrenouard.fr 21
  22. 22. LightPath 2014© - http://www.jmrenouard.fr 22
  23. 23. Jquery permet de créer un framework evenementiel simple. 3 opérations de base: ◦Branchement ◦Débranchement ◦Envoi d’événement LightPath 2014© - http://www.jmrenouard.fr 23
  24. 24. Connexion d’un événement click ◦$(‘div#label’).click(function(evt) { this.hide(); } Envoi d’un événement click ◦$(‘div#label’).click(); LightPath 2014© - http://www.jmrenouard.fr 24
  25. 25. Débranchement d’un gestionnaire ◦$(‘div#label’).unbind(‘monEvenement’); Branchement d’un gestionnaire ◦$(‘div#label’).bind(‘monEvenement’, function() { console.log(‘monEvenement’); ◦}); Lancement de l’événement ◦$(‘div#label’).trigger(‘monEvenement’); LightPath 2014© - http://www.jmrenouard.fr 25
  26. 26. LightPath 2014© - http://www.jmrenouard.fr 26
  27. 27. Dés que le document est chargé: ◦$(document).ready(function() { // Le code JS/Jquery de démarrage } Dés que je découvre l’élément racine $(function() { // Le code JS/Jquery de démarrage }); LightPath 2014© - http://www.jmrenouard.fr 27
  28. 28. LightPath 2014© - http://www.jmrenouard.fr 28
  29. 29. Il est possible de chaîner des opérations ◦$(‘div#label’).html(‘<p>cool</p>’).css({‘color: ‘red’}).show(); ◦Affectation du contenu ◦Changement de style CSS ◦Afficahge du contenu LightPath 2014© - http://www.jmrenouard.fr 29
  30. 30. LightPath 2014© - http://www.jmrenouard.fr 30
  31. 31. Chargement du contenu dans une div ◦$(‘div#main).load(‘contenuDiv.php?id=main »); Effectuer une requête GET ◦$.get(url, params, callback); ◦$.getJSON(url, params, callback); Effectuer une requête POST ◦$.post(url, params, callback); ◦$.postJSON(url, params, callback); Chargement de script JS ◦$.getScript(url, params, callback); LightPath 2014© - http://www.jmrenouard.fr 31
  32. 32. LightPath 2014© - http://www.jmrenouard.fr 32
  33. 33. Cacher/afficher ◦$(‘div#label’).hide(); ◦$(‘div#label’).show(); Cacher/afficher avec effet ◦$(‘div#label’).hide(‘slow’); ◦$(‘div#label’).show(‘slow’); Animation d’apparition ◦$(‘div#label’).slideDown(‘fast’); ◦$(‘div#label’).fadeOut(2000); Chaînage ◦$(‘div#label’).fadeOut(2000).slideDown(‘fast’); LightPath 2014© - http://www.jmrenouard.fr 33
  34. 34. LightPath 2014© - http://www.jmrenouard.fr 34
  35. 35. Défintion d’un fonction Attachement de la fonction à un élément HTML Appel de la fonction sur l’élément HTML LightPath 2014© - http://www.jmrenouard.fr 35
  36. 36. $.fn.hideA=fuction() { This.find.element(‘a’).hide(); } jQuery.fn.hideA=fuction() { This.find.element(‘a’).hide(); } LightPath 2014© - http://www.jmrenouard.fr 36
  37. 37. $(‘div#header’).hideA(); LightPath 2014© - http://www.jmrenouard.fr 37
  38. 38. LightPath 2014© - http://www.jmrenouard.fr 38
  39. 39. Jquery ◦$(document).ready(function() { $("#tabs").tabs(); }); HTML ◦<div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>Active par défaut</p> </div> <div id="fragment-2"> ………………. </div> <div id="fragment-3"> blabla</div> </div> LightPath 2014© - http://www.jmrenouard.fr 39
  40. 40. $('#tabs').tabs({ load: function(event, ui) { $('a',ui.panel).click( function() { $(ui.panel).load(this.href); return false; }); } }); Ajout de cache via option ◦ cache: true LightPath 2014© - http://www.jmrenouard.fr 40
  41. 41. ◦<div id="tabs"> <ul> <li><a href="tab1.php"><span>One</span></a></li> <li><a href="tab2.php"><span>Two</span></a></li> <li><a href="tab3.php"><span>Three</span></a></li> </ul> </div> LightPath 2014© - http://www.jmrenouard.fr 41
  42. 42. ◦HTML <input type=« test » name=« date »/> ◦JQuery $("#date").datepicker(); LightPath 2014© - http://www.jmrenouard.fr 42
  43. 43. ◦HTML <input type=« test » name=« langage »/> ◦JQuery sur liste  $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); LightPath 2014© - http://www.jmrenouard.fr 43
  44. 44. ◦HTML <input type=« test » name=« langage »/> ◦JQuery $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); (); LightPath 2014© - http://www.jmrenouard.fr 44
  45. 45. function setupZipCodeCityAutocomplete(zipCodeInput) { zipCodeInput.autocomplete({ source: function(request, response){ $.get(« /code?term=« +request.term, response); this.options.highlightRegExp = initHighlighting(request.term); }, select: function(event, ui) { zipCodeInput.attr("value", ui.item.code); cityInput.attr("value", ui.item.town); return false; }, renderLabel: function(item) { return item.code + " " + item.town; } }); } LightPath 2014© - http://www.jmrenouard.fr 45
  46. 46. HTML ◦<div id="dialog" title=« Titre">contenu</div> JQuery ◦$("#dialog").dialog(); LightPath 2014© - http://www.jmrenouard.fr 46
  47. 47. HTML ◦<div id="progressbar"></div> JQuery ◦$("#progressbar").progressbar({ value: 37 }); LightPath 2014© - http://www.jmrenouard.fr 47
  48. 48. HTML ◦<div id="droppable">Drop here</div> ◦<div id="draggable">Drag me</div> JQuery $(document).ready(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } }); }); LightPath 2014© - http://www.jmrenouard.fr 48
  49. 49. HTML ◦<ul id="selectable"> ◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#selectable").selectable({ selected: function(event, ui) { alert(‘selectionné’); } } ); LightPath 2014© - http://www.jmrenouard.fr 49
  50. 50. HTML ◦<div id=« redim"></div> JQuery ◦$("# redim ").resizable(); LightPath 2014© - http://www.jmrenouard.fr 50
  51. 51. HTML ◦<ul id=« tri"> ◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#tri").sortable(); Liste triée: ◦$("#tri").sortable(« toArray »); LightPath 2014© - http://www.jmrenouard.fr 51
  52. 52. Documentation de Jquery http://www.jquery.com LightPath 2014© - http://www.jmrenouard.fr 52
  53. 53. LightPath: ◦Société de conseil et d’ingénierie ◦Formations, Conseil, Audit et mise en oeuvre ◦jmrenouard@lightpath.fr Jean-Marie RENOUARD ◦jmrenouard@gmail.com ◦Twitter: @jmrenouard ◦http://www.jmrenouard.fr LightPath 2014© - http://www.jmrenouard.fr 53

×