Formation complet jquery pour reviser ensemble

(1)

(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

(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

(5)

Les premiers

« Frameworks »



Comme il était devenu difficile de

coder du javascript pour tous les

navigateurs,

sont

apparus

des

« Frameworks »

permettant

une

spécification unique, indépendante du

navigateur

◦

PrototypeJS - www.prototypejs.org

 _{script.aculo.us}

◦

Mootools - mootools.net

◦

DoJo Toolkit - www.dojotoolkit.org

◦

Yahoo UI - developer.yahoo.com/yui/

◦

ExtJS - www.extjs.com

◦

UIZE - www.uize.com

(6)

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

(7)

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.

(8)

Une simple bibliothèque à

importer



Disponible sur le site de Jquery

http://jquery.com/



Ou directement sur Google code

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery .min.js">

(9)

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 »

(10)

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

(11)

$(anything)



$ 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]'

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

(13)

jQuery example

d’utilisation 1

(14)

jQuery example

d’utilisation 2

(15)

Determiner si une checkbox est cochée

If ($(‘#total’).attr(‘checked’)) {

//Traitement si cochée

}

else {

//Traitement si non cochée

}

(16)

Intercepter le bouton submit d’un

formulaire :

$(document).ready(function() {

$(‘#ok’).submit(function() {

if ($(‘#login’).val() ==‘’) {

alert (‘Entrer un login’);

return false;

}

})

});

(17)

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(‘’);

});

(18)

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

(19)

jQuery example

d’utilisation 7

(20)

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}

(21)

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

(22)

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

+" - <strong>"+name+"</strong> : " +price+"</li>"; }); $

(23)

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

(24)

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]

} }

(25)

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

(26)

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 ;

(27)

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://api.flickr.com/services/feeds/photos_public.gne? tags=besancon&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script> </body></html> 27

(28)

jQuery UI



http://jqueryui.com/



Un ensemble de composants graphiques

téléchargeable à l'adresse

http://jqueryui.com/download.

◦ un noyau (Core)

◦ _{des « comportements » (interactions)}

 _{draggable : pour glisser-déplacer un élément}

http://jqueryui.com/demos/draggable/

 _{droppable : pour « déposer » un élément}

http://jqueryui.com/demos/droppable/

 _{resizable : pour redimensionner un élément}

http://jqueryui.com/demos/resizable/

 _{selectable : pour sélectionner des éléments à la souris}

http://jqueryui.com/demos/selectable/

(29)

jQuery UI

◦

des « widgets »

 _{« accordéon » http://jqueryui.com/demos/accordion/}  _{« calendrier » http://jqueryui.com/demos/datepicker/}  _{boîte de dialogue http://jqueryui.com/demos/dialog/}  _{barre de progression} http://jqueryui.com/demos/progressbar/  _{curseur http://jqueryui.com/demos/slider/}  _{onglets http://jqueryui.com/demos/tabs/}

◦

des « effets »

http://jqueryui.com/demos/effect/

 _{Clignotement, disparition, apparition, éclatement,} transition…



Une collection de thèmes

http://jqueryui.com/themeroller/

(30)

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

(31)

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)