Jean-Marie Renouard 
LightPath 2014©
Le logo PHP est du domaine public 
http://commons.wikimedia.org/wiki/File:PHP-logo.svg 
Ce document est licencié sous l...
Présentation de l’éco système Javascript 
Bases de Jquery 
Jouer avec les données avec JQuery 
Gestion des évenements ...
Onglets et menus en Jquery 
Selecteur de date Jquery 
Champs d’autocompletion 
Boite de dialogue 
Barre de progressio...
LightPath 2014© - http://www.jmrenouard.fr 
5
Un langage de programmation 
Intégration dans les navigateurs Web 
Standard 
Restriction sur certains opérations de l’...
Javascript version 2.0 
Basé sur ECMAScript 5 
Format d’échange de données : JSON 
Support de l’AJAX 
Autre implément...
Un framework ou plûtôt une librairie 
Il en existe d’autres 
Concept simple 
Multi-navigateur 
Communauté active 
Pa...
Prototype : petit, simple et élégant 
YUI: La librairie JS de Yahoo 
Dojo: une librairie JS complète 
mooTools: Idem 
...
Léger 
Simple 
Apprentissage rapide 
Pas complexe 
Taille réduite 
Intégration facile avec divers composants 
LightP...
LightPath 2014© - http://www.jmrenouard.fr 
11
Focalisation sur l’interaction HTML / Javascript 
2 opérations de base: 
◦Trouver quelque chose 
◦Faire quelque chose av...
Jquery: une seule fonction 
jQuery est LA fonction de jQuery. 
Cette fonction à un raccourci: $ 
Préservation de confl...
Recherche d’un div avec id « titre » 
◦jQuery(‘div#titre’) 
◦jQuery(‘#titre’) 
Recherche de tous les liens a 
◦jQuery(‘a...
Recherche d’un div avec id « titre » 
◦$(‘div#titre’) 
◦$(‘#titre’) 
Recherche de tous les liens a 
◦$(‘a’) 
Recherche ...
Récupération d’un collection 
◦$(‘div’) retourne une collection de tous les div 
Taille de la collection: 
◦$(‘div’).len...
Méthode each 
Cacher toutes les div 
$(‘div’).each( function() { 
this.hide(); 
} 
Affichage avec index 
$(‘div’).each(...
LightPath 2014© - http://www.jmrenouard.fr 
18
Manipulation de texte 
◦$(‘div’).text(« contenu de la div »); 
Manipulation de contenu html 
◦$(‘div’).html(«<p>contenu ...
Manipulation de valeur d’un champ input 
◦$(‘:input#nom’).attr(«value », « Pierre »); 
◦$(‘:input#nom’).attr( 
{«value »...
Ajout de classe CSS 
◦$(‘:input#nom’).addClass(«label»); 
Retrait de classe CSS 
◦$(‘div’).removeClass(« label »); 
Dés...
LightPath 2014© - http://www.jmrenouard.fr 
22
Jquery permet de créer un framework evenementiel simple. 
3 opérations de base: 
◦Branchement 
◦Débranchement 
◦Envoi d’...
Connexion d’un événement click 
◦$(‘div#label’).click(function(evt) { this.hide(); } 
Envoi d’un événement click 
◦$(‘di...
Débranchement d’un gestionnaire 
◦$(‘div#label’).unbind(‘monEvenement’); 
Branchement d’un gestionnaire 
◦$(‘div#label’)...
LightPath 2014© - http://www.jmrenouard.fr 
26
Dés que le document est chargé: 
◦$(document).ready(function() { 
// Le code JS/Jquery de démarrage 
} 
Dés que je décou...
LightPath 2014© - http://www.jmrenouard.fr 
28
Il est possible de chaîner des opérations 
◦$(‘div#label’).html(‘<p>cool</p>’).css({‘color: ‘red’}).show(); 
◦Affectation...
LightPath 2014© - http://www.jmrenouard.fr 
30
Chargement du contenu dans une div 
◦$(‘div#main).load(‘contenuDiv.php?id=main »); 
Effectuer une requête GET 
◦$.get(ur...
LightPath 2014© - http://www.jmrenouard.fr 
32
Cacher/afficher 
◦$(‘div#label’).hide(); 
◦$(‘div#label’).show(); 
Cacher/afficher avec effet 
◦$(‘div#label’).hide(‘slo...
LightPath 2014© - http://www.jmrenouard.fr 
34
Défintion d’un fonction 
Attachement de la fonction à un élément HTML 
Appel de la fonction sur l’élément HTML 
LightPa...
$.fn.hideA=fuction() { 
This.find.element(‘a’).hide(); 
} 
jQuery.fn.hideA=fuction() { 
This.find.element(‘a’).hide(); 
} ...
$(‘div#header’).hideA(); 
LightPath 2014© - http://www.jmrenouard.fr 
37
LightPath 2014© - http://www.jmrenouard.fr 
38
Jquery 
◦$(document).ready(function() { $("#tabs").tabs(); }); 
HTML 
◦<div id="tabs"> 
<ul> 
<li><a href="#fragment-1">...
$('#tabs').tabs({ 
load: function(event, ui) { $('a',ui.panel).click( 
function() { 
$(ui.panel).load(this.href); 
return ...
◦<div id="tabs"> 
<ul> 
<li><a href="tab1.php"><span>One</span></a></li> 
<li><a href="tab2.php"><span>Two</span></a></li>...
◦HTML 
<input type=« test » name=« date »/> 
◦JQuery 
$("#date").datepicker(); 
LightPath 2014© - http://www.jmrenouard....
◦HTML 
<input type=« test » name=« langage »/> 
◦JQuery sur liste 
 $("input#langage").autocomplete({ source: ["c++", "j...
◦HTML 
<input type=« test » name=« langage »/> 
◦JQuery 
$("input#langage").autocomplete({ source: ["c++", "java", "php"...
function setupZipCodeCityAutocomplete(zipCodeInput) { 
zipCodeInput.autocomplete({ 
source: function(request, response){ 
...
HTML 
◦<div id="dialog" title=« Titre">contenu</div> 
JQuery 
◦$("#dialog").dialog(); 
LightPath 2014© - http://www.jmre...
HTML 
◦<div id="progressbar"></div> 
JQuery 
◦$("#progressbar").progressbar({ value: 37 }); 
LightPath 2014© - http://ww...
HTML 
◦<div id="droppable">Drop here</div> 
◦<div id="draggable">Drag me</div> 
JQuery 
$(document).ready(function() { ...
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>...
HTML 
◦<div id=« redim"></div> 
JQuery 
◦$("# redim ").resizable(); 
LightPath 2014© - http://www.jmrenouard.fr 
50
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> 
JQu...
Documentation de Jquery 
http://www.jquery.com 
LightPath 2014© - http://www.jmrenouard.fr 
52
LightPath: 
◦Société de conseil et d’ingénierie 
◦Formations, Conseil, Audit et mise en oeuvre 
◦jmrenouard@lightpath.fr ...
Prochain SlideShare
Chargement dans…5
×

Javascript et JQuery

1 130 vues

Publié le

Présentation de JQuery et Javascript

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×