Javascript et JQuery
-
Upload
jean-marie-renouard -
Category
Engineering
-
view
248 -
download
8
description
Transcript of Javascript et JQuery
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
Jean-Marie RENOUARD ◦ [email protected]
◦ Twitter: @jmrenouard
◦ http://www.jmrenouard.fr
LightPath 2014© - http://www.jmrenouard.fr 53