SlideShare une entreprise Scribd logo
jjQQuueerryy 
Par : Abdelhakim Bachar 
DAVEO
De JavaScript… à jQuery 
 La naissance de JavaScript 
 1995 : Brendan Eich développe pour Netscape Communications 
Corporation, un langage de script, appelé Mocha, puis LiveScript et 
finalement JavaScript 
 Javascript est intégré dans le navigateur Netscape 2. Succès immédiat. 
 La guerre des navigateurs 
 Netscape et Microsoft (avec JScript dans Internet Explorer) ont 
développé leur propre variante de JavaScript avec des fonctionnalités 
supplémentaires et incompatibles, notamment dans la manipulation du 
DOM (modèle objet du navigateur WEB) 
 1997 : Adoption du standard ECMAScript. 
Les spécifications sont rédigées dans le document Standard ECMA-262.
La naissance de la fondation Mozilla 
 Netscape perd des parts de marché face à Microsoft 
 Malgré un procès pour concurrence déloyale, Netscape, racheté par AOL est 
dissoute en 2004 
 Netscape, dans ses dernières forces, fonde la fondation principauté Mozilla, 
et lui livre le code source de Netscape Navigator 5, qui contient les 
premières briques du moteur de rendu Gecko (aujourd’hui au coeur de 
Firefox). 
 Actuellement, les navigateurs web modernes supportent tous les 
spécifications ECMAScript 
 Mais chacun a étendu les spécifications pour utiliser au mieux son propre 
navigateur, ce qui a amené à des différences d’implémentation suivant le 
navigateur…
JavaScript devenu incontournable 
 Les spécifications ECMAScript ont permis de pérenniser JavaScript 
 JavaScript permet de contrôler quasiment tous les paramètres d’une page 
WEB 
 C’est le seul langage, coté client, capable de changer dynamiquement 
l’aspect d’une page WEB 
 Avec l’arrivée de l’objet XMLHttpRequest permettant le développement 
d’applications AJAX, JavaScript est devenu incontournable dans le 
développement d’interfaces WEB évoluées (WEB2.0)
JQuery 
 Une bibliothèque javascript open-source et cross-browser 
 Elle permet de traverser et manipuler très facilement l'arbre DOM des pages 
web à l'aide d'une syntaxe fortement similaire à celle d'XPath. 
 JQuery permet par exemple de changer/ajouter une classe CSS, créer des 
animations, modifier des attributs, etc. 
 Gérer les événements javascript 
 Faire des requêtes AJAX simplement
Ce que jQuery n’est pas 
 Un substitut pour apprendre JavaScript 
 jQuery est très puissant et très pratique, mais vous devez néanmoins connaitre les 
bases de Javascript, notamment la partie “objet” du langage. 
 Voir des vlivres comme : 
 “Object Oriented Javascript de Stoyan Stefanov” ou 
 “jQuery, novice to ninja” (google est votre ami) 
 Une réponse à tout 
 Utilisez jQuery uniquement lorsque c’est nécessaire. On commence toujours par 
HTML+CSS avant de chercher des plugins jQuery magiques. 
 De nombreuses UI sont pures html+CSS
Une simple bibliothèque à importer 
 Disponible sur le site de Jquery : http://jquery.com/ 
<script type="text/javascript" src="jquery.js"></script> 
 Ou directement sur Google code 
<script type="text/javascript" src="http://ajax.googleapis.com 
ajax/libs/jquery/1/jquery.min.js”> 
</script>
La fonction jQuery() 
 jQuery repose sur une seule fonction : 
jQuery() ou $(). 
 C’est une fonction JavaScript 
 Elle accepte des paramètres 
 Elle retourne un objet 
 $ : Syntaxe issue de « Prototype »
Selecteur magique : $('anything') ! 
 $ accepte un sélecteur CSS en argument 
 $ accepte des ID : 
 $('#nomID') retourne un élément <-> document.getElementById 
 $ accepte des classes : 
 $('.nomClasse') retourne tous les éléments qui correspondent à cette classe 
 $ accepte plusieurs sélecteurs 
 $('.article, .nouvelles, .edito') 
 $ accepte des sélecteurs spécifiques : 
 $(':radio'), $(':header'), $(':first-child') 
 des sélecteurs en forme de filtres : 
 $(':checked'), $(':odd'), $(':visible') 
 plus fort: $(':contains(du texte)') 
 des attributs 
 $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
Rappel sur le DOM 
 “Le Document Object Model (DOM) est une convention cross-platform et 
independente du langage pour representier and interagir avec des objets 
dans des documents en HTML, XHTML ou XML.
Exemple de manipulation du DOM 
<html> 
<script type="text/javascript" src="http://…/jquery.min.js”></script> 
<body> 
<div id="monDiv">Bonjour</div> 
<a href="#" onClick="$('#monDiv').hide();”>disparition</a> 
</body> 
</html>
jQuery: un objet 
 les méthodes s'appliquent généralement à tous les éléments sélectionnés 
 $('.classe').hide(); 
 $('.classe').show(); 
 de nombreuses méthodes utilitaires 
 parcourir le DOM: .parent(), .next(), .children(), .parents() 
 ajouter ou retirer des classes CSS: addClass, removeClass 
 manipuler: append, wrap, prepend 
 Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même 
 on peut chaîner les appels ! 
 $('anything').parent().find('still anything').show(); 
 Cette propriété est extrêmement puissante !
Nombreux exemples interactifs 
 Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs, 
par exemple : 
 Ici : http://www.w3schools.com/jquery/jquery_examples.asp 
 Et là : http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
jQuery example d’utilisation 1 
$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”}); 
<ul> 
<li style=“background:red;”> 
<span>Changed</span> 
First item 
</li> 
<li> 
Second item 
</li> 
<li style=“background:red;”> 
<span>Changed</span> 
Third item 
</li> 
</ul> 
<ul> 
<li> 
First item 
</li> 
<li> 
Second item 
</li> 
<li> 
Third item 
</li> 
</ul> 
<ul> 
<li> 
<span>Changed</span> 
First item 
</li> 
<li> 
Second item 
</li> 
<li> 
<span>Changed</span> 
Third item 
</li> 
</ul>
jQuery example d’utilisation 2 
$(“div:hidden”).find(“.foo”).empty().text(“Changed”).end().show(); 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:none”> 
<span> 
More text 
</span> 
<span class=“foo”> 
</span> 
</div> 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:none”> 
<span> 
More text 
</span> 
<span class=“foo”> 
Goodbye cruel world. 
</span> 
</div> 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:none”> 
<span> 
More text 
</span> 
<span class=“foo”> 
Goodbye cruel world. 
</span> 
</div> 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:block”> 
<span> 
More text 
</span> 
<span class=“foo”> 
Changed 
</span> 
</div> 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:none”> 
<span> 
More text 
</span> 
<span class=“foo”> 
Changed 
</span> 
</div> 
<div> 
<span class=“foo”> 
Some text 
</span> 
</div> 
<div style=“display:none”> 
<span> 
More text 
</span> 
<span class=“foo”> 
Changed 
</span> 
</div>
jQuery example d’utilisation 3 
 Determiner si une checkbox est cochée 
if ($(‘#total’).attr(‘checked’)) { 
//Traitement si cochée 
} else { 
//Traitement si non cochée 
}
jQuery example d’utilisation 4 
 Intercepter le bouton submit d’un formulaire : 
$(document).ready(function() { 
$(‘#ok’).submit(function() { 
if ($(‘#login’).val() ==‘’) { 
alert (‘Entrer un login’); 
return false; 
} 
}) 
});
jQuery example d’utilisation 5 
 Effacer le contenu d’un champs de texte lorsqu’il a le focus 
<input name=“nom” type=“text” id=“nom” 
value=“Entrez votre nom”> 
$(‘#nom’).focus(function() { 
var field = $(this); 
field.val(‘’); 
});
jQuery example d’utilisation 6 
 Tester le clic sur n’importe quel bouton radio : 
$(‘:radio’).click(function() { 
//do stuff 
}); 
 Donner le focus au premier élément d’un formulaire: 
$(‘nom’).focus();
jQuery example d’utilisation 7 
<div> 
<span class=“all”>Select All</span> 
<span class=“none”>Select None</span> 
<input name=“chk1” type=“checkbox”/> 
<input name=“chk2” type=“checkbox”/> 
<input name=“chk3” type=“checkbox”/> 
</div> 
<div> 
<span class=“all”>Select All</span> 
<span class=“none”>Select None</span> 
<input name=“chk4” type=“checkbox”/> 
<input name=“chk5” type=“checkbox”/> 
<input name=“chk6” type=“checkbox”/> 
</div> 
$(“span.none”).click( 
function(){ 
$(this).siblings(“:checkbox”).removeAttr(“checked”); 
} 
); 
$(“span.all”).click( 
function(){ 
$(this).siblings(“:checkbox”).attr(“checked”,“checked”); 
} 
); 
$(“span”).click( 
function(){ 
Ou 
if($(this).text()==“Select All”)) 
$(this).siblings(“:checkbox”).attr(“checked”,“checked”); 
else if ($(this).attr(“class”)==“none”) 
$(this).siblings(“:checkbox”).removeAttr(“checked”); 
} 
);
Ajax 
 JQuery possède toute une panoplie de fonctions permettant de simplifier les 
requêtes Ajax 
 La plus simple : 
$('#maDiv').load('page.html'); 
 Plus complexe : 
$.get('test.html’, function(data) { faire quelque chose }); 
 Générale : 
$.ajax({ 
url: 'document.xml', 
type: 'GET', 
dataType: 'xml', 
timeout: 1000, 
error: function(){ alert('Erreur chargement'); }, 
success: function(xml){ faire quelque chose } 
});
Tutorial ajax/jQuery très complet ! 
 Ici : http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery- 
development.html
jQuery AJAX Exemple 
<html> 
<head> 
<title>AJAX Demo</title> 
<script type=“text/javascript” src=“jquery.js”> 
</script> 
<script type=“text/javascript”> 
var cnt = 0; 
$(function(){ 
$.ajaxSettings({ 
error:function(){alert(“Communication error!”);} 
}); 
$(“:button”).click(function(){ 
var input = {in:$(“:textbox”).val(),count:cnt}; 
$.getJSON(“ajax.php”,input,function(json){ 
cnt = json.cnt; 
$(“.cnt”).text(cnt) 
$(“.msg”).text(json.out); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<p> 
Input: 
<input type=“textbox”/> 
<input type=“button” value=“Send”/> 
Output # 
<span class=“cnt”></span>: 
<span class=“msg”></span> 
</p> 
</body> 
</html> 
<?php 
$output = ‘’; 
switch($_REQUEST[‘in’]) { 
case ‘hello’: 
$output = ‘Hello back.’; 
break; 
case ‘foo’: 
$output = ‘Foo you, too.’; 
break; 
case ‘bar’: 
$output = ‘Where Andy Capp can be found.’; 
break; 
case ‘foobar’: 
$output = ‘This is German, right?’; 
break; 
default: 
$output = ‘Unrecognized string.’; 
} 
$count = $_REQUEST[‘count’]+1; 
echo json_encode( 
array( 
‘out’ => $output, 
‘cnt’ => $count 
) 
); 
exit; 
?>
jQuery AJAX Fonctions 
 $.func(url[,params][,callback]) 
 $.get 
 $.getJSON 
 $.getIfModified 
 $.getScript 
 $.post 
 $(selector), inject HTML 
 load 
 loadIfModified 
 $(selector), ajaxSetup alts 
 ajaxComplete 
 ajaxError 
 ajaxSend 
 ajaxStart 
 ajaxStop 
 ajaxSuccess 
 $.ajax, $.ajaxSetup 
 async 
 beforeSend 
 complete 
 contentType 
 data 
 dataType 
 error 
 global 
 ifModified 
 processData 
 success 
 timeout 
 type 
 url
Inconvénients d’AJAX / XML 
 XML est délicat à parser en Javascript/jQuery 
$.ajax({ 
type: "GET", 
url: "courses.xml", 
dataType: "xml", 
complete : function(data, status) { 
var products = data.responseXML; 
var html = “”; 
$(products).find('product').each(function() { 
var id = $(this).attr('id'); 
var name = $(this).find('name').text(); 
var price =$(this).find('price').text(); 
html += "<li>#"+id +" - "+name+” : ”+price+"</li>”; 
}); 
$("#cousesList").html(html); 
} 
});
Inconvénients d’AJAX / Sécurité 
 pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain 
» avec XMLHttpRequest dont le résultat serait du XML (et donc du 
HTML) 
….mais pas pour des scripts Javascript ! 
 D’où l’idée de définir un modèle de données sous la forme d’objet Javascript 
 JSON 
 Voir : http://www.jsonpexamples.com/
JSON (JavaScript Object Notation) 
 format de données textuel, générique, dérivé de la notation des objets de 
JavaScript 
 permet de représenter de l'information structurée. 
 décrit par la RFC 4627 de l’IETF. 
 Exemple : 
{ "Image": { 
"Width": 800, 
"Height": 600, 
"Title": "Vue du 15ème étage", 
"Thumbnail": { 
"Url": "http://www.example.com/481989943", 
"Height": 125, 
"Width": "100" }, 
"IDs": [116, 943, 234, 38793] 
}}
Les avantages de JSON 
 Type de données générique et abstrait pouvant 
 être représenté dans n'importe quel langage de programmation 
 représenter n'importe quelle donnée concrète. 
 simple à mettre oeuvre tout en étant complet. 
 peu verbeux, lisible aussi bien par un humain que par une machine 
 facile à apprendre, syntaxe réduite 
 types de données sont connus et simples à décrire 
 indépendant du langage de programmation (bien qu'utilisant une notation JavaScript) 
 Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP 
(notamment en Ajax) 
 Standard dans les web services .Net, Java EE, etc.
Les avantages de JSON 
 Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son 
nom. Il est donc plus facile à interpréter qu'un XML. 
var donnees = eval('('+donnees_json+')'); 
 Le site json.org fournit une liste de parseurs pour d'autres langages 
 Il peut aussi être utilisé pour : 
 la sérialisation et déserialisation d'objets ; 
 l’encodage de documents ;
jQuery et JSON 
 jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ) 
 Exemple : 
<html><head> 
<script src="jquery.min.js"></script> 
</head> 
<body> 
<div id="images" style="height: 300px"></div> 
<script> 
$.getJSON("http://…/feeds/photos_public.gne? format=json”, 
function(data) { 
$.each(data.items, function(i,item) { 
$("<img/>").attr("src", 
item.media.m).appendTo("#images"); 
if ( i == 3 ) 
return false; 
}); 
}); 
</script> 
</body></html>
jQuery Plugins 
 On peut étendre facilement jQuery en utilisant des « plugins » 
 Les méthodes ajoutées sont au même niveau que les méthodes natives 
 Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet 
jQuery, appliquer la méthode à tous les éléments représentés 
 Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant 
par l'équipe de développement 
 http://plugins.jquery.com/ 
 Des menus 
http://apycom.com/ 
http://www.wizzud.com/jqDock/ 
 Galerie photo : VisualLightbox 
http://visuallightbox.com
Conclusion 
 jQuery est un framework complet et facile à utiliser 
 Bibliothèque légère à charger 
 Simplifier et unifie la syntaxe d’accès au DOM 
 Permet de faire des requètes AJAX simplement 
 UI et nombreux plugins complémentaires 
 D’autres frameworks sont disponibles et ne sont pas à oublier : il est 
possible de combiner les frameworks 
 Dojo recommandé pour application riche en widgets et nécessitant une forte 
cohérence (widgets MVC notamment)
jQuery ressources intéressantes 
 Site officiel 
 http://www.jquery.com 
 Learning Center 
 http://docs.jquery.com/Tutorials 
 http://www.learningjquery.com/ 
 http://15daysofjquery.com/ 
 http://www.roseindia.net/ajax/jquery/ 
 Support 
 http://docs.jquery.com/Discussion 
 http://www.nabble.com/JQuery-f15494.html mailing list archive 
 irc.freenode.net irc room: #jquery 
 Documentation 
 http://docs.jquery.com/Main_Page 
 http://www.visualjquery.com 
 http://jquery.bassistance.de/api-browser/ 
 jQuery Success Stories 
 http://docs.jquery.com/Sites_Using_jQuery

Contenu connexe

Tendances

jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Abdelouahed Abdou
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
Abdoulaye Dieng
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575kate2013
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
zan
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
HTML5
HTML5HTML5
HTML5
Neovov
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 

Tendances (18)

jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
Javascript
JavascriptJavascript
Javascript
 
Introduction à ajax
Introduction à ajaxIntroduction à ajax
Introduction à ajax
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
 
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
 
HTML5
HTML5HTML5
HTML5
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 

En vedette

54 los carabineros en el reino de valencia en 1903
54 los carabineros en el reino de valencia en 190354 los carabineros en el reino de valencia en 1903
54 los carabineros en el reino de valencia en 1903
aulamilitar
 
Présentation armée
Présentation arméePrésentation armée
Présentation arméeCharleees
 
Syllabus Toxicología
Syllabus ToxicologíaSyllabus Toxicología
Syllabus Toxicología
Karen Gabriela Montesinos Sanchez
 
Assemblée générale du REHEP Hiver 2014
Assemblée générale du REHEP Hiver 2014Assemblée générale du REHEP Hiver 2014
Assemblée générale du REHEP Hiver 2014
Jonathan Corvil
 
Nelson Mandela- Paula
Nelson Mandela- PaulaNelson Mandela- Paula
Nelson Mandela- Paula
dalcala56
 
Plaquette eal 20 02-2014
Plaquette eal 20 02-2014Plaquette eal 20 02-2014
Plaquette eal 20 02-2014enavantlezignan
 
Slide share
Slide shareSlide share
Slide share
kathyvaleria
 
Programa de noche. Dormitorios
Programa de noche. DormitoriosPrograma de noche. Dormitorios
Programa de noche. DormitoriosMegamobiliario
 
Periodico de español diego vargas
Periodico de español diego vargasPeriodico de español diego vargas
Periodico de español diego vargas
catcta
 
Portafolio de servicios
Portafolio de serviciosPortafolio de servicios
Portafolio de servicios
rc050590
 
10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar
aulamilitar
 
07 josé joaquín llorens bayer
07 josé joaquín llorens bayer07 josé joaquín llorens bayer
07 josé joaquín llorens bayer
aulamilitar
 
07 informe sobre morella 1822
07 informe sobre morella 182207 informe sobre morella 1822
07 informe sobre morella 1822
aulamilitar
 
Proyecto pwr
Proyecto pwrProyecto pwr
Proyecto pwr
Fomar Flores
 
áRbol de los problemasanyi
áRbol de los problemasanyiáRbol de los problemasanyi
áRbol de los problemasanyi
anyi12
 
Lahon & Partners
Lahon & Partners Lahon & Partners
Lahon & Partners BWN2012
 
04 hoja de servicios de espartero
04 hoja de servicios de espartero04 hoja de servicios de espartero
04 hoja de servicios de espartero
aulamilitar
 
P abarza leal
P abarza lealP abarza leal
P abarza leal
kavieraxd
 

En vedette (20)

54 los carabineros en el reino de valencia en 1903
54 los carabineros en el reino de valencia en 190354 los carabineros en el reino de valencia en 1903
54 los carabineros en el reino de valencia en 1903
 
Présentation armée
Présentation arméePrésentation armée
Présentation armée
 
Mon plat prèfèrè
Mon plat prèfèrèMon plat prèfèrè
Mon plat prèfèrè
 
Syllabus Toxicología
Syllabus ToxicologíaSyllabus Toxicología
Syllabus Toxicología
 
Assemblée générale du REHEP Hiver 2014
Assemblée générale du REHEP Hiver 2014Assemblée générale du REHEP Hiver 2014
Assemblée générale du REHEP Hiver 2014
 
Nelson Mandela- Paula
Nelson Mandela- PaulaNelson Mandela- Paula
Nelson Mandela- Paula
 
Plaquette eal 20 02-2014
Plaquette eal 20 02-2014Plaquette eal 20 02-2014
Plaquette eal 20 02-2014
 
Slide share
Slide shareSlide share
Slide share
 
Programa de noche. Dormitorios
Programa de noche. DormitoriosPrograma de noche. Dormitorios
Programa de noche. Dormitorios
 
Periodico de español diego vargas
Periodico de español diego vargasPeriodico de español diego vargas
Periodico de español diego vargas
 
Portafolio de servicios
Portafolio de serviciosPortafolio de servicios
Portafolio de servicios
 
10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar10 el hospital provincial y la clinica militar
10 el hospital provincial y la clinica militar
 
07 josé joaquín llorens bayer
07 josé joaquín llorens bayer07 josé joaquín llorens bayer
07 josé joaquín llorens bayer
 
Visite de la bibliothèque
Visite de la bibliothèqueVisite de la bibliothèque
Visite de la bibliothèque
 
07 informe sobre morella 1822
07 informe sobre morella 182207 informe sobre morella 1822
07 informe sobre morella 1822
 
Proyecto pwr
Proyecto pwrProyecto pwr
Proyecto pwr
 
áRbol de los problemasanyi
áRbol de los problemasanyiáRbol de los problemasanyi
áRbol de los problemasanyi
 
Lahon & Partners
Lahon & Partners Lahon & Partners
Lahon & Partners
 
04 hoja de servicios de espartero
04 hoja de servicios de espartero04 hoja de servicios de espartero
04 hoja de servicios de espartero
 
P abarza leal
P abarza lealP abarza leal
P abarza leal
 

Similaire à JQuery

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Korteby Farouk
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelierAlgeria JUG
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdfjavaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
mistersmile053
 
Jquery
JqueryJquery
Jquery
krymo
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
OualidBelbrik
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Soufiene Bouzid
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
XQuery est un langage de requête informatique permettant non seulement d'extr...
XQuery est un langage de requête informatique permettant non seulement d'extr...XQuery est un langage de requête informatique permettant non seulement d'extr...
XQuery est un langage de requête informatique permettant non seulement d'extr...
YassineJada
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab Elasticsearch
David Pilato
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérience
louschwartz
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 

Similaire à JQuery (20)

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Jug algeria x wiki-atelier
Jug algeria x wiki-atelierJug algeria x wiki-atelier
Jug algeria x wiki-atelier
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdfjavaScript(1)-2023-2024-Partie1-Mechid (1).pdf
javaScript(1)-2023-2024-Partie1-Mechid (1).pdf
 
Jquery
JqueryJquery
Jquery
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Tapestry
TapestryTapestry
Tapestry
 
XQuery est un langage de requête informatique permettant non seulement d'extr...
XQuery est un langage de requête informatique permettant non seulement d'extr...XQuery est un langage de requête informatique permettant non seulement d'extr...
XQuery est un langage de requête informatique permettant non seulement d'extr...
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab Elasticsearch
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérience
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 

JQuery

  • 1. jjQQuueerryy Par : Abdelhakim Bachar DAVEO
  • 2. De JavaScript… à jQuery  La naissance de JavaScript  1995 : Brendan Eich développe pour Netscape Communications Corporation, un langage de script, appelé Mocha, puis LiveScript et finalement JavaScript  Javascript est intégré dans le navigateur Netscape 2. Succès immédiat.  La guerre des navigateurs  Netscape et Microsoft (avec JScript dans Internet Explorer) ont développé leur propre variante de JavaScript avec des fonctionnalités supplémentaires et incompatibles, notamment dans la manipulation du DOM (modèle objet du navigateur WEB)  1997 : Adoption du standard ECMAScript. Les spécifications sont rédigées dans le document Standard ECMA-262.
  • 3. La naissance de la fondation Mozilla  Netscape perd des parts de marché face à Microsoft  Malgré un procès pour concurrence déloyale, Netscape, racheté par AOL est dissoute en 2004  Netscape, dans ses dernières forces, fonde la fondation principauté Mozilla, et lui livre le code source de Netscape Navigator 5, qui contient les premières briques du moteur de rendu Gecko (aujourd’hui au coeur de Firefox).  Actuellement, les navigateurs web modernes supportent tous les spécifications ECMAScript  Mais chacun a étendu les spécifications pour utiliser au mieux son propre navigateur, ce qui a amené à des différences d’implémentation suivant le navigateur…
  • 4. JavaScript devenu incontournable  Les spécifications ECMAScript ont permis de pérenniser JavaScript  JavaScript permet de contrôler quasiment tous les paramètres d’une page WEB  C’est le seul langage, coté client, capable de changer dynamiquement l’aspect d’une page WEB  Avec l’arrivée de l’objet XMLHttpRequest permettant le développement d’applications AJAX, JavaScript est devenu incontournable dans le développement d’interfaces WEB évoluées (WEB2.0)
  • 5. JQuery  Une bibliothèque javascript open-source et cross-browser  Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath.  JQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc.  Gérer les événements javascript  Faire des requêtes AJAX simplement
  • 6. Ce que jQuery n’est pas  Un substitut pour apprendre JavaScript  jQuery est très puissant et très pratique, mais vous devez néanmoins connaitre les bases de Javascript, notamment la partie “objet” du langage.  Voir des vlivres comme :  “Object Oriented Javascript de Stoyan Stefanov” ou  “jQuery, novice to ninja” (google est votre ami)  Une réponse à tout  Utilisez jQuery uniquement lorsque c’est nécessaire. On commence toujours par HTML+CSS avant de chercher des plugins jQuery magiques.  De nombreuses UI sont pures html+CSS
  • 7. Une simple bibliothèque à importer  Disponible sur le site de Jquery : http://jquery.com/ <script type="text/javascript" src="jquery.js"></script>  Ou directement sur Google code <script type="text/javascript" src="http://ajax.googleapis.com ajax/libs/jquery/1/jquery.min.js”> </script>
  • 8. La fonction jQuery()  jQuery repose sur une seule fonction : jQuery() ou $().  C’est une fonction JavaScript  Elle accepte des paramètres  Elle retourne un objet  $ : Syntaxe issue de « Prototype »
  • 9. Selecteur magique : $('anything') !  $ accepte un sélecteur CSS en argument  $ accepte des ID :  $('#nomID') retourne un élément <-> document.getElementById  $ accepte des classes :  $('.nomClasse') retourne tous les éléments qui correspondent à cette classe  $ accepte plusieurs sélecteurs  $('.article, .nouvelles, .edito')  $ accepte des sélecteurs spécifiques :  $(':radio'), $(':header'), $(':first-child')  des sélecteurs en forme de filtres :  $(':checked'), $(':odd'), $(':visible')  plus fort: $(':contains(du texte)')  des attributs  $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
  • 10. Rappel sur le DOM  “Le Document Object Model (DOM) est une convention cross-platform et independente du langage pour representier and interagir avec des objets dans des documents en HTML, XHTML ou XML.
  • 11. Exemple de manipulation du DOM <html> <script type="text/javascript" src="http://…/jquery.min.js”></script> <body> <div id="monDiv">Bonjour</div> <a href="#" onClick="$('#monDiv').hide();”>disparition</a> </body> </html>
  • 12. jQuery: un objet  les méthodes s'appliquent généralement à tous les éléments sélectionnés  $('.classe').hide();  $('.classe').show();  de nombreuses méthodes utilitaires  parcourir le DOM: .parent(), .next(), .children(), .parents()  ajouter ou retirer des classes CSS: addClass, removeClass  manipuler: append, wrap, prepend  Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même  on peut chaîner les appels !  $('anything').parent().find('still anything').show();  Cette propriété est extrêmement puissante !
  • 13. Nombreux exemples interactifs  Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs, par exemple :  Ici : http://www.w3schools.com/jquery/jquery_examples.asp  Et là : http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
  • 14. jQuery example d’utilisation 1 $(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”}); <ul> <li style=“background:red;”> <span>Changed</span> First item </li> <li> Second item </li> <li style=“background:red;”> <span>Changed</span> Third item </li> </ul> <ul> <li> First item </li> <li> Second item </li> <li> Third item </li> </ul> <ul> <li> <span>Changed</span> First item </li> <li> Second item </li> <li> <span>Changed</span> Third item </li> </ul>
  • 15. jQuery example d’utilisation 2 $(“div:hidden”).find(“.foo”).empty().text(“Changed”).end().show(); <div> <span class=“foo”> Some text </span> </div> <div style=“display:none”> <span> More text </span> <span class=“foo”> </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display:none”> <span> More text </span> <span class=“foo”> Goodbye cruel world. </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display:none”> <span> More text </span> <span class=“foo”> Goodbye cruel world. </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display:block”> <span> More text </span> <span class=“foo”> Changed </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display:none”> <span> More text </span> <span class=“foo”> Changed </span> </div> <div> <span class=“foo”> Some text </span> </div> <div style=“display:none”> <span> More text </span> <span class=“foo”> Changed </span> </div>
  • 16. jQuery example d’utilisation 3  Determiner si une checkbox est cochée if ($(‘#total’).attr(‘checked’)) { //Traitement si cochée } else { //Traitement si non cochée }
  • 17. jQuery example d’utilisation 4  Intercepter le bouton submit d’un formulaire : $(document).ready(function() { $(‘#ok’).submit(function() { if ($(‘#login’).val() ==‘’) { alert (‘Entrer un login’); return false; } }) });
  • 18. jQuery example d’utilisation 5  Effacer le contenu d’un champs de texte lorsqu’il a le focus <input name=“nom” type=“text” id=“nom” value=“Entrez votre nom”> $(‘#nom’).focus(function() { var field = $(this); field.val(‘’); });
  • 19. jQuery example d’utilisation 6  Tester le clic sur n’importe quel bouton radio : $(‘:radio’).click(function() { //do stuff });  Donner le focus au premier élément d’un formulaire: $(‘nom’).focus();
  • 20. jQuery example d’utilisation 7 <div> <span class=“all”>Select All</span> <span class=“none”>Select None</span> <input name=“chk1” type=“checkbox”/> <input name=“chk2” type=“checkbox”/> <input name=“chk3” type=“checkbox”/> </div> <div> <span class=“all”>Select All</span> <span class=“none”>Select None</span> <input name=“chk4” type=“checkbox”/> <input name=“chk5” type=“checkbox”/> <input name=“chk6” type=“checkbox”/> </div> $(“span.none”).click( function(){ $(this).siblings(“:checkbox”).removeAttr(“checked”); } ); $(“span.all”).click( function(){ $(this).siblings(“:checkbox”).attr(“checked”,“checked”); } ); $(“span”).click( function(){ Ou if($(this).text()==“Select All”)) $(this).siblings(“:checkbox”).attr(“checked”,“checked”); else if ($(this).attr(“class”)==“none”) $(this).siblings(“:checkbox”).removeAttr(“checked”); } );
  • 21. Ajax  JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax  La plus simple : $('#maDiv').load('page.html');  Plus complexe : $.get('test.html’, function(data) { faire quelque chose });  Générale : $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Erreur chargement'); }, success: function(xml){ faire quelque chose } });
  • 22. Tutorial ajax/jQuery très complet !  Ici : http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery- development.html
  • 23. jQuery AJAX Exemple <html> <head> <title>AJAX Demo</title> <script type=“text/javascript” src=“jquery.js”> </script> <script type=“text/javascript”> var cnt = 0; $(function(){ $.ajaxSettings({ error:function(){alert(“Communication error!”);} }); $(“:button”).click(function(){ var input = {in:$(“:textbox”).val(),count:cnt}; $.getJSON(“ajax.php”,input,function(json){ cnt = json.cnt; $(“.cnt”).text(cnt) $(“.msg”).text(json.out); }); }); }); </script> </head> <body> <p> Input: <input type=“textbox”/> <input type=“button” value=“Send”/> Output # <span class=“cnt”></span>: <span class=“msg”></span> </p> </body> </html> <?php $output = ‘’; switch($_REQUEST[‘in’]) { case ‘hello’: $output = ‘Hello back.’; break; case ‘foo’: $output = ‘Foo you, too.’; break; case ‘bar’: $output = ‘Where Andy Capp can be found.’; break; case ‘foobar’: $output = ‘This is German, right?’; break; default: $output = ‘Unrecognized string.’; } $count = $_REQUEST[‘count’]+1; echo json_encode( array( ‘out’ => $output, ‘cnt’ => $count ) ); exit; ?>
  • 24. jQuery AJAX Fonctions  $.func(url[,params][,callback])  $.get  $.getJSON  $.getIfModified  $.getScript  $.post  $(selector), inject HTML  load  loadIfModified  $(selector), ajaxSetup alts  ajaxComplete  ajaxError  ajaxSend  ajaxStart  ajaxStop  ajaxSuccess  $.ajax, $.ajaxSetup  async  beforeSend  complete  contentType  data  dataType  error  global  ifModified  processData  success  timeout  type  url
  • 25. Inconvénients d’AJAX / XML  XML est délicat à parser en Javascript/jQuery $.ajax({ type: "GET", url: "courses.xml", dataType: "xml", complete : function(data, status) { var products = data.responseXML; var html = “”; $(products).find('product').each(function() { var id = $(this).attr('id'); var name = $(this).find('name').text(); var price =$(this).find('price').text(); html += "<li>#"+id +" - "+name+” : ”+price+"</li>”; }); $("#cousesList").html(html); } });
  • 26. Inconvénients d’AJAX / Sécurité  pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest dont le résultat serait du XML (et donc du HTML) ….mais pas pour des scripts Javascript !  D’où l’idée de définir un modèle de données sous la forme d’objet Javascript  JSON  Voir : http://www.jsonpexamples.com/
  • 27. JSON (JavaScript Object Notation)  format de données textuel, générique, dérivé de la notation des objets de JavaScript  permet de représenter de l'information structurée.  décrit par la RFC 4627 de l’IETF.  Exemple : { "Image": { "Width": 800, "Height": 600, "Title": "Vue du 15ème étage", "Thumbnail": { "Url": "http://www.example.com/481989943", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] }}
  • 28. Les avantages de JSON  Type de données générique et abstrait pouvant  être représenté dans n'importe quel langage de programmation  représenter n'importe quelle donnée concrète.  simple à mettre oeuvre tout en étant complet.  peu verbeux, lisible aussi bien par un humain que par une machine  facile à apprendre, syntaxe réduite  types de données sont connus et simples à décrire  indépendant du langage de programmation (bien qu'utilisant une notation JavaScript)  Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax)  Standard dans les web services .Net, Java EE, etc.
  • 29. Les avantages de JSON  Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son nom. Il est donc plus facile à interpréter qu'un XML. var donnees = eval('('+donnees_json+')');  Le site json.org fournit une liste de parseurs pour d'autres langages  Il peut aussi être utilisé pour :  la sérialisation et déserialisation d'objets ;  l’encodage de documents ;
  • 30. jQuery et JSON  jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )  Exemple : <html><head> <script src="jquery.min.js"></script> </head> <body> <div id="images" style="height: 300px"></div> <script> $.getJSON("http://…/feeds/photos_public.gne? format=json”, function(data) { $.each(data.items, function(i,item) { $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script> </body></html>
  • 31. jQuery Plugins  On peut étendre facilement jQuery en utilisant des « plugins »  Les méthodes ajoutées sont au même niveau que les méthodes natives  Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet jQuery, appliquer la méthode à tous les éléments représentés  Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant par l'équipe de développement  http://plugins.jquery.com/  Des menus http://apycom.com/ http://www.wizzud.com/jqDock/  Galerie photo : VisualLightbox http://visuallightbox.com
  • 32. Conclusion  jQuery est un framework complet et facile à utiliser  Bibliothèque légère à charger  Simplifier et unifie la syntaxe d’accès au DOM  Permet de faire des requètes AJAX simplement  UI et nombreux plugins complémentaires  D’autres frameworks sont disponibles et ne sont pas à oublier : il est possible de combiner les frameworks  Dojo recommandé pour application riche en widgets et nécessitant une forte cohérence (widgets MVC notamment)
  • 33. jQuery ressources intéressantes  Site officiel  http://www.jquery.com  Learning Center  http://docs.jquery.com/Tutorials  http://www.learningjquery.com/  http://15daysofjquery.com/  http://www.roseindia.net/ajax/jquery/  Support  http://docs.jquery.com/Discussion  http://www.nabble.com/JQuery-f15494.html mailing list archive  irc.freenode.net irc room: #jquery  Documentation  http://docs.jquery.com/Main_Page  http://www.visualjquery.com  http://jquery.bassistance.de/api-browser/  jQuery Success Stories  http://docs.jquery.com/Sites_Using_jQuery