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

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

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

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’écriture et de lecture.

LightPath 2014© - http://www.jmrenouard.fr 6

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

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

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

Léger

Simple

Apprentissage rapide

Pas complexe

Taille réduite

Intégration facile avec divers composants

LightPath 2014© - http://www.jmrenouard.fr 10

LightPath 2014© - http://www.jmrenouard.fr 11

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

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

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

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

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

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

LightPath 2014© - http://www.jmrenouard.fr 18

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

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

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

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’événement

LightPath 2014© - http://www.jmrenouard.fr 23

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

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

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écouvre l’élément racine $(function() {

// Le code JS/Jquery de démarrage

});

LightPath 2014© - http://www.jmrenouard.fr 27

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 du contenu

◦ Changement de style CSS

◦ Afficahge du contenu

LightPath 2014© - http://www.jmrenouard.fr 29

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

LightPath 2014© - http://www.jmrenouard.fr 32

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

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

LightPath 2014© - http://www.jmrenouard.fr 35

$.fn.hideA=fuction() { This.find.element(‘a’).hide();

}

jQuery.fn.hideA=fuction() { This.find.element(‘a’).hide();

}

LightPath 2014© - http://www.jmrenouard.fr 36

$(‘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"><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

$('#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

◦ <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

◦ HTML

<input type=« test » name=« date »/>

◦ JQuery

$("#date").datepicker();

LightPath 2014© - http://www.jmrenouard.fr 42

◦ 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

◦ 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

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

HTML ◦ <div id="dialog" title=« Titre">contenu</div>

JQuery ◦ $("#dialog").dialog();

LightPath 2014© - http://www.jmrenouard.fr 46

HTML ◦ <div id="progressbar"></div>

JQuery ◦ $("#progressbar").progressbar({ value: 37 });

LightPath 2014© - http://www.jmrenouard.fr 47

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

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

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>

JQuery

◦ $("#tri").sortable();

Liste triée:

◦ $("#tri").sortable(« toArray »);

LightPath 2014© - http://www.jmrenouard.fr 51

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 œuvre

◦ jmrenouard@lightpath.fr

Jean-Marie RENOUARD ◦ jmrenouard@gmail.com

◦ Twitter: @jmrenouard

◦ http://www.jmrenouard.fr

LightPath 2014© - http://www.jmrenouard.fr 53