Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript et JQuery

1,298 views

Published on

Présentation de JQuery et Javascript

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

×