javascript et jquery
DESCRIPTION
Présentation de JQuery et JavascriptTRANSCRIPT
![Page 1: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/1.jpg)
Jean-Marie Renouard LightPath 2014©
![Page 2: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/2.jpg)
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
![Page 3: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/3.jpg)
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
![Page 4: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/4.jpg)
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
![Page 5: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/5.jpg)
LightPath 2014© - http://www.jmrenouard.fr 5
![Page 6: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/6.jpg)
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
![Page 7: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/7.jpg)
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
![Page 8: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/8.jpg)
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
![Page 9: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/9.jpg)
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
![Page 10: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/10.jpg)
Léger
Simple
Apprentissage rapide
Pas complexe
Taille réduite
Intégration facile avec divers composants
LightPath 2014© - http://www.jmrenouard.fr 10
![Page 11: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/11.jpg)
LightPath 2014© - http://www.jmrenouard.fr 11
![Page 12: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/12.jpg)
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
![Page 13: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/13.jpg)
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
![Page 14: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/14.jpg)
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
![Page 15: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/15.jpg)
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
![Page 16: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/16.jpg)
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
![Page 17: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/17.jpg)
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
![Page 18: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/18.jpg)
LightPath 2014© - http://www.jmrenouard.fr 18
![Page 19: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/19.jpg)
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
![Page 20: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/20.jpg)
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
![Page 21: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/21.jpg)
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
![Page 22: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/22.jpg)
LightPath 2014© - http://www.jmrenouard.fr 22
![Page 23: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/23.jpg)
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
![Page 24: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/24.jpg)
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
![Page 25: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/25.jpg)
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
![Page 26: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/26.jpg)
LightPath 2014© - http://www.jmrenouard.fr 26
![Page 27: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/27.jpg)
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
![Page 28: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/28.jpg)
LightPath 2014© - http://www.jmrenouard.fr 28
![Page 29: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/29.jpg)
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
![Page 30: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/30.jpg)
LightPath 2014© - http://www.jmrenouard.fr 30
![Page 31: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/31.jpg)
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
![Page 32: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/32.jpg)
LightPath 2014© - http://www.jmrenouard.fr 32
![Page 33: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/33.jpg)
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
![Page 34: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/34.jpg)
LightPath 2014© - http://www.jmrenouard.fr 34
![Page 35: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/35.jpg)
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
![Page 36: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/36.jpg)
$.fn.hideA=fuction() { This.find.element(‘a’).hide();
}
jQuery.fn.hideA=fuction() { This.find.element(‘a’).hide();
}
LightPath 2014© - http://www.jmrenouard.fr 36
![Page 37: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/37.jpg)
$(‘div#header’).hideA();
LightPath 2014© - http://www.jmrenouard.fr 37
![Page 38: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/38.jpg)
LightPath 2014© - http://www.jmrenouard.fr 38
![Page 39: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/39.jpg)
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
![Page 40: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/40.jpg)
$('#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
![Page 41: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/41.jpg)
◦ <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
![Page 42: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/42.jpg)
◦ HTML
<input type=« test » name=« date »/>
◦ JQuery
$("#date").datepicker();
LightPath 2014© - http://www.jmrenouard.fr 42
![Page 43: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/43.jpg)
◦ 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
![Page 44: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/44.jpg)
◦ 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
![Page 45: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/45.jpg)
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
![Page 46: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/46.jpg)
HTML ◦ <div id="dialog" title=« Titre">contenu</div>
JQuery ◦ $("#dialog").dialog();
LightPath 2014© - http://www.jmrenouard.fr 46
![Page 47: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/47.jpg)
HTML ◦ <div id="progressbar"></div>
JQuery ◦ $("#progressbar").progressbar({ value: 37 });
LightPath 2014© - http://www.jmrenouard.fr 47
![Page 48: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/48.jpg)
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
![Page 49: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/49.jpg)
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
![Page 50: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/50.jpg)
HTML ◦ <div id=« redim"></div>
JQuery ◦ $("# redim ").resizable();
LightPath 2014© - http://www.jmrenouard.fr 50
![Page 51: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/51.jpg)
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
![Page 52: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/52.jpg)
Documentation de Jquery http://www.jquery.com
LightPath 2014© - http://www.jmrenouard.fr 52
![Page 53: Javascript et JQuery](https://reader031.vdocuments.site/reader031/viewer/2022020101/559627821a28ab8b5a8b4694/html5/thumbnails/53.jpg)
LightPath: ◦ Société de conseil et d’ingénierie
◦ Formations, Conseil, Audit et mise en œuvre
Jean-Marie RENOUARD ◦ [email protected]
◦ Twitter: @jmrenouard
◦ http://www.jmrenouard.fr
LightPath 2014© - http://www.jmrenouard.fr 53