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

http://commons.wikimedia.org/wiki/File:PHP-logo.svg



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


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


Un langage de programmation

Intégration dans les navigateurs Web

Standard

Restriction sur certains opérations de l’écriture et de lecture.


Javascript version 2.0

Basé sur ECMAScript 5

Format d’échange de données : JSON

Support de l’AJAX

Autre implémentation: ActionScript


Un framework ou plûtôt une librairie Il en existe d’autres

Concept simple Multi-navigateur Communauté active

Paradigme conducteur: trouver/faire


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


Focalisation sur l’interaction HTML / Javascript

2 opérations de base: ◦ Trouver quelque chose

◦ Faire quelque chose avec


Jquery: une seule fonction

jQuery est LA fonction de jQuery.

Cette fonction à un raccourci: $

Préservation de conflit: jQuery.noConflict()


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


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


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]


Méthode each Cacher toutes les div

$(‘div’).each( function() { this.hide();

}

Affichage avec index $(‘div’).each( function(i) {

console.log( i+’ ) ‘+this);

}


Manipulation de texte ◦ $(‘div’).text(« contenu de la div »);

Manipulation de contenu html ◦ $(‘div’).html(«<p>contenu de la div</p> »);


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 »);


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’});


Jquery permet de créer un framework evenementiel simple.

3 opérations de base: ◦ Branchement

◦ Débranchement

◦ Envoi d’événement


Connexion d’un événement click ◦ $(‘div#label’).click(function(evt) { this.hide(); }

Envoi d’un événement click ◦ $(‘div#label’).click();


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’);


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

});


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


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


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’);


Défintion d’un fonction

Attachement de la fonction à un élément HTML

Appel de la fonction sur l’élément HTML


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

}

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

}


$(‘div#header’).hideA();


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>


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


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


◦ HTML

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

◦ JQuery

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


◦ HTML

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

◦ JQuery sur liste

$("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });


◦ HTML

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

◦ JQuery

$("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); ();


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

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


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

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


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'); }

}); });


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é’); } } );


HTML ◦ <div id=« redim"></div>

JQuery ◦ $("# redim ").resizable();


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 »);


Documentation de Jquery http://www.jquery.com


LightPath: ◦ Société de conseil et d’ingénierie

◦ Formations, Conseil, Audit et mise en œuvre

◦ [email protected]

Jean-Marie RENOUARD ◦ [email protected]

◦ Twitter: @jmrenouard

◦ http://www.jmrenouard.fr


mailto:[email protected]

mailto:[email protected]

Javascript et JQuery

Engineering

Transcript of Javascript et JQuery