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

5

Un langage de programmation
Intégration dans les navigateurs Web
Standard
Restriction sur certains opérations de l’écriture et de lecture.
6

Javascript version 2.0
Basé sur ECMAScript 5
Format d’échange de données : JSON
Support de l’AJAX
Autre implémentation: ActionScript
7

Un framework ou plûtôt une librairie
Il en existe d’autres
Concept simple
Multi-navigateur
Communauté active
Paradigme conducteur: trouver/faire
8

Prototype : petit, simple et élégant
YUI: La librairie JS de Yahoo
Dojo: une librairie JS complète
mooTools: Idem
9

Léger
Simple
Apprentissage rapide
Pas complexe
Taille réduite
Intégration facile avec divers composants
10

11

Focalisation sur l’interaction HTML / Javascript
2 opérations de base:
◦Trouver quelque chose
◦Faire quelque chose avec
12

Jquery: une seule fonction
jQuery est LA fonction de jQuery.
Cette fonction à un raccourci: $
Préservation de conflit: jQuery.noConflict()
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’)
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’)
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]
16

Méthode each
Cacher toutes les div
$(‘div’).each( function() {
this.hide();
}
Affichage avec index
$(‘div’).each( function(i) {
console.log( i+’ ) ‘+this);
}
17

18

Manipulation de texte
◦$(‘div’).text(« contenu de la div »);
Manipulation de contenu html
◦$(‘div’).html(«<p>contenu de la div</p> »);
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 »);
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’});
21

22

Jquery permet de créer un framework evenementiel simple.
3 opérations de base:
◦Branchement
◦Débranchement
◦Envoi d’événement
23

Connexion d’un événement click
◦$(‘div#label’).click(function(evt) { this.hide(); }
Envoi d’un événement click
◦$(‘div#label’).click();
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’);
25

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

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
29

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

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

34

Défintion d’un fonction
Attachement de la fonction à un élément HTML
Appel de la fonction sur l’élément HTML
35

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

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

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

◦HTML
<input type=« test » name=« date »/>
◦JQuery
$("#date").datepicker();
42

◦HTML
<input type=« test » name=« langage »/>
◦JQuery sur liste
 $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
43

◦HTML
<input type=« test » name=« langage »/>
◦JQuery
$("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); ();
44

HTML
◦<div id="dialog" title=« Titre">contenu</div>
JQuery
◦$("#dialog").dialog();
46

HTML
◦<div id="progressbar"></div>
JQuery
◦$("#progressbar").progressbar({ value: 37 });
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'); }
});
});
48

HTML
◦<ul id="selectable">
◦<li>Item 1</li> <li>Item 2</li>
◦<li>Item 5</li>
◦</ul>
JQuery
◦$("#selectable").selectable({ selected: function(event, ui) { alert(‘selectionné’); } } );
49

HTML
◦<div id=« redim"></div>
JQuery
◦$("# redim ").resizable();
50

HTML
◦<ul id=« tri">
◦<li>Item 5</li>
◦</ul>
JQuery
◦$("#tri").sortable();
Liste triée:
◦$("#tri").sortable(« toArray »);
51

Documentation de Jquery
http://www.jquery.com
52

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

Javascript et JQuery

Contenu connexe

Tendances

En vedette

Similaire à Javascript et JQuery

Javascript et JQuery