Professional Documents
Culture Documents
Plan
• JQuery
• JQuery UI
• AngularJS
Ingénierie du Web
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 1
jQuery
Techniques élémentaires de programmation
Avant-propos
• JQuery
– Une bibliothèque javascript open-source et cross-browser
– JQuery permet par exemple de changer/ajouter une classe CSS, créer des
animations, modifier des attributs, etc.
Ingénierie du Web 2
jQuery
Techniques élémentaires de programmation
Avant-propos
• jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction
entre JavaScript (comprenant Ajax) et HTML, et a pour but de
simplifier des commandes communes de JavaScript.
– La première version date de janvier 2006.
• jQuery est "DOM centrique" et a principalement été créé dans le but
de :
– manipuler des pages (DOM + CSS) dynamiquement
– prendre en compte des données externes (AJAX)
• jQuery 1.8, par exemple, se présente comme un unique fichier
JavaScript de 91.2KB en version minimifié et 32.64KB (min + gzip)
contenant toutes les fonctions de base.
– Il peut être inclus dans toute page web en utilisant le code suivant :
Ingénierie du Web 3
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 4
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 5
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 6
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 7
jQuery
Techniques élémentaires de programmation
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq
uery.min.js">
</script>
Ingénierie du Web 8
jQuery
Techniques élémentaires de programmation
• JQUERY UI
● http://jqueryui.com/
● http://jqueryui.com/demos/
● Alternative : http://jquerytools.org/demos/
• JQUERY MOBILE
● http://jquerymobile.com/
● http://jquerymobile.com/demos/1.1.1/
Ingénierie du Web 9
jQuery
Techniques élémentaires de programmation
Le signe $
Ingénierie du Web 10
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 11
jQuery
Techniques élémentaires de programmation
• Pour attendre que le DOM soit entièrement chargé et ainsi éviter des
erreurs:
Version JavaScript
Version jQuery
Ingénierie du Web 12
jQuery
Techniques élémentaires de programmation
Exemple :
$(function() {
$('#demo1').css('color', 'red');
});
Ingénierie du Web 13
jQuery
Techniques élémentaires de programmation
Sélection d’éléments
• Possibilité de sélectionner :
• par type de bloc
• par identifiant
• par classe
• en combinant les critères
• en filtrant sur les noms d’attributs
• en faisant référence aux positions relatives dans le DOM
• en ne récupérant qu’un seul élément parmi les objets sélectionnés
• en filtrant parmi les objets sélectionnés
Ingénierie du Web 14
jQuery
Techniques élémentaires de programmation
// <ul class="test">JL</ul>
$(".test")
Ingénierie du Web 15
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 16
jQuery
Techniques élémentaires de programmation
// similaire à :
// $(selecteur, contexte)
$(".header", $("p")).show();
Ingénierie du Web 17
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 18
jQuery
Techniques élémentaires de programmation
• Possibilité d'atteindre :
– les fils (>) ;
– tous les descendants (espace) ;
– le (+) ou les (~) frères suivants
<ul> // cache 4 et 5
<li>item 1</li> $('li.trois ~ li').hide();
<li>item 2</li>
<li class="trois">item 3 // cache 4
<ol> $('li.trois + li').hide();
<li>3.1</li>
</ol> // cache les <ol>
</li> $("ul ol").hide();
<li>item 4
<ol> // ne cache rien
<li>4.1</li> $("ul > ol").hide();
</ol>
</li>
<li>item 5</li>
</ul>
Ingénierie du Web 19
jQuery
Techniques élémentaires de programmation
// frère suivant
.next(expr)
// frère précédent
.prev(expr)
// frères
.siblings(expr)
// enfants
.children(expr)
// père
.parent(expr)
Ingénierie du Web 20
jQuery
Techniques élémentaires de programmation
Autres sélecteurs
// premier paragraphe
p:first // si l'élément est visible
$("div:visible")
// dernier élément de liste
li:last // sinon
$("div:hidden")
// quatrième lien
a:nth(3) ou a:eq(3)
Ingénierie du Web 21
jQuery
Techniques élémentaires de programmation
Sélecteurs de formulaire
Ingénierie du Web 22
jQuery
Techniques élémentaires de programmation
Fonction foreach
$("table tr")
.each(function(i){
if (i % 2)
$(this).addClass("odd");
}
);
Ingénierie du Web 23
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 24
jQuery
Techniques élémentaires de programmation
Attention à la lisibilité !
Possibilité de récupérer du contenu d’un autre objet pour le passer en
paramètre :
$("div.a").html($("div.c").html());
→ met le contenu du div.c dans le div.a
Ingénierie du Web 25
jQuery
Techniques élémentaires de programmation
Attribution d'une valeur à l'attribut CSS des éléments de classe CSS «id»
en fonction de leur valeur actuelle à l'aide d'une fonction :
var tailleActuelle =
parseInt($(‘.id').css("font-size"));
$(‘.id').css("font-size",function(){
return tailleActuelle+10;
});
augmente de 10 points la taille de police de caractères
des éléments de classe «id»
Ingénierie du Web 26
jQuery
Techniques élémentaires de programmation
.addClass('laClasse')
Ajoute la classe CSS laClasse à l'élément.
.removeClass('laClasse')
Retire la classe CSS laClasse à l'élément.
.toggleClass('laClasse')
Ajoute la classe CSS laClasse à l'élément s'il ne l'a pas, la lui retire sinon.
.hasClass('laClasse')
Renvoie true si l'élément a la classeCSS laClasse, false sinon
Ingénierie du Web 27
jQuery
Techniques élémentaires de programmation
Principe de contexte
• un sélecteur reste une opération de recherche à réaliser à chaque appel. Et cela coûte en
ressources et en temps. Il est donc important de mettre en cache les sélecteurs qui vous
servent plusieurs fois. La méthode est très simple
L'avantage réside dans le fait que le navigateur n'aura plus à chercher dans
le DOM
Var sideBar = $("#sideBar");
sideBar.find("input");
Retourne tous les éléments <input> compris dans l'élément ayant pour id "sideBar"
xemple
$("#sideBar").find("input"); // 16% moins efficace
$("input", $("#sideBar")); // 23% moins efficace
$("#sideBar").children("input"); // 50% moins efficace
$("#sideBar > input"); // 70% moins efficace
$("#sideBar input"); // 77% moins efficace
// Utilisation du cache
var sideBar = $("#sideBar");
$("input", sideBar); // 5 à 10% moins efficace
Ingénierie du Web 28
jQuery
Techniques élémentaires de programmation
jQuery(document).ready(function() {
$("a").click(function () {
console.log("Id de l'élément cliqué : " + $(this).attr("id"));
});
});
Ingénierie du Web 29
jQuery
Techniques élémentaires de programmation
jQuery(document).ready(function() {
$("p").click(function(event) {
alert(this.innerHTML); //$(this).html() pour les puristes
});
});
Ingénierie du Web 30
jQuery
Techniques élémentaires de programmation
• Le souci de la méthode précédente est qu'à chaque fois que vous allez
modifier le DOM, vous allez devoir rappeler tous vos ajouts de
gestionnaire d'événements. Un peu lourd!
jQuery(document).ready(function() {
$("p").click(function(event) {
$("body").append('<p>Hello world!</p>');
});
});
Ingénierie du Web 31
jQuery
Techniques élémentaires de programmation
jQuery(document).ready(function(){
$("p").click(ajouterP);
});
Ingénierie du Web 32
jQuery
Techniques élémentaires de programmation
$.each()
• jQuery.each() est une fonction itérative, elle peut être utilisée pour
parcourir les objets et les tableaux qui sont itérés par un index
numérique, de 0 à taille-1. Les autres objets sont itérés à travers
leurs propriétés.
var array = [ 'un', 'deux', 'trois', 'quatre', 'cinq' ];
jQuery.each(array, function(index, value) {
// faire quelque chose avec `value` (ou `this` qui est `value` )
alert(index+": "+ value);
});
0: un
1: deux
2: trois
3:quatre
4: cinq
Ingénierie du Web 33
jQuery
Techniques élémentaires de programmation
$.each()
Ingénierie du Web 34
jQuery
Techniques élémentaires de programmation
$.each()
Ingénierie du Web 35
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 36
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 37
jQuery
Techniques élémentaires de programmation
La fonction serialize
Ingénierie du Web 38
jQuery
Techniques élémentaires de programmation
La fonction serialize
Ingénierie du Web 39
jQuery
Techniques élémentaires de programmation
La fonction serialize
Ingénierie du Web 40
jQuery
Techniques élémentaires de programmation
find(selector)
Ingénierie du Web 41
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 42
jQuery
Techniques élémentaires de programmation
Ingénierie du Web 43
jQuery
Techniques élémentaires de programmation
hide, show
Ingénierie du Web 44
AngularJS
Techniques élémentaires de programmation
Ingénierie du Web 45
jQuery
Techniques élémentaires de programmation
Composition
$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});
Ingénierie du Web 46
jQuery
Techniques élémentaires de programmation
Composition
$(“div:hidden”).find(“.foo”).empty().text(“Changed”).end().show();
<div> <div> <div>
<span class=“foo”> <span class=“foo”> <span class=“foo”>
Some text Some text Some text
</span> </span> </span>
</div> </div> </div>
<div style=“display:none”> <div style=“display:none”> <div style=“display:none”>
<span> <span> <span>
More text More text More text
</span> </span> </span>
<span class=“foo”> <span class=“foo”> <span class=“foo”>
Goodbye cruel world. Goodbye cruel world. </span>
</span> </span> </div>
</div> </div>
Ingénierie du Web 47
jQuery
Techniques élémentaires de programmation
If ($(‘#total’).attr(‘checked’)) {
//Traitement si cochée
}
else {
//Traitement si non cochée
}
Ingénierie du Web 48
jQuery
Techniques élémentaires de programmation
$(document).ready(function() {
$(‘#ok’).submit(function() {
if ($(‘#login’).val() ==‘’) {
alert (‘Entrer un login’);
return false;
}
})
});
Ingénierie du Web 49
jQuery
Techniques élémentaires de programmation
$(‘#nom’).focus(function() {
var field = $(this);
field.val(‘’);
});
Ingénierie du Web 50
jQuery
Techniques élémentaires de programmation
$(‘:radio’).click(function() {
//do stuff
});
Ingénierie du Web 51
jQuery
Techniques élémentaires de programmation
siblings
$(“span.none”).click( <div>
function(){
<span class=“all”>Select All</span>
$(this).siblings(“:checkbox”).removeAttr(“checked”);
} <span class=“none”>Select None</span>
);
<input name=“chk1” type=“checkbox”/>
<input name=“chk2” type=“checkbox”/>
$(“span.all”).click(
function(){ <input name=“chk3” type=“checkbox”/>
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
</div>
}
); <div>
<span class=“all”>Select All</span>
<span class=“none”>Select None</span>
or <input name=“chk4” type=“checkbox”/>
<input name=“chk5” type=“checkbox”/>
$(“span”).click(
<input name=“chk6” type=“checkbox”/>
function(){
if($(this).text()==“Select All”)) </div>
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
else if ($(this).attr(“class”)==“none”)
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);
Ingénierie du Web 52
jQuery
Techniques élémentaires de programmation
Divers
Ingénierie du Web 53
jQuery
Techniques élémentaires de programmation
Ajax
Ingénierie du Web 54
jQuery
Techniques élémentaires de programmation
Ajax/Json
<html> <?php
<head> $output = ‘’;
<title>AJAX Demo</title>
<script type=“text/javascript” src=“jquery.js”> switch($_REQUEST[‘in’]) {
</script> case ‘hello’:
<script type=“text/javascript”> $output = ‘Hello back.’;
var cnt = 0; break;
$(function(){ case ‘foo’:
$.ajaxSettings({ $output = ‘Foo you, too.’;
error:function(){alert(“Communication error!”);} break;
}); case ‘bar’:
$(“:button”).click(function(){ $output = ‘Where Andy Capp can be found.’;
var input = {in:$(“:textbox”).val(),count:cnt}; break;
$.getJSON(“ajax.php”,input,function(json){ case ‘foobar’:
cnt = json.cnt; $output = ‘This is German, right?’;
$(“.cnt”).text(cnt) break;
$(“.msg”).text(json.out); default:
}); $output = ‘Unrecognized string.’;
}); }
});
</script> $count = $_REQUEST[‘count’]+1;
</head>
<body> echo json_encode(
<p> array(
Input: ‘out’ => $output,
<input type=“textbox”/> ‘cnt’ => $count
<input type=“button” value=“Send”/> )
Output # );
<span class=“cnt”></span>:
<span class=“msg”></span> exit;
</p> ?>
</body>
Ingénierie du Web
</html>
55
jQuery
Techniques élémentaires de programmation
JSON
• 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.
• 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.
• 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]
}
}
Ingénierie du Web 56
jQuery
Techniques élémentaires de programmation
jQuery et JSON
Ingénierie du Web 57
jQuery UI
Techniques élémentaires de programmation
• 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/
• sortable : pour trier des éléments
http://jqueryui.com/demos/selectable/
Ingénierie du Web 58
jQuery UI
Techniques élémentaires de programmation
Exemple !
Ingénierie du Web 59
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
• Dans la librairie jQuery UI, le système de Drag & Drop ne forme pas
un seul et même plugin. En effet, il est décomposé en deux parties
distinctes, à savoir le plugin Draggable et le plugin Droppable
Syntaxe:
Ingénierie du Web 60
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 61
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 62
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 63
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 64
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 65
jQuery UI
Techniques élémentaires de programmation
Le plugin Draggable
Ingénierie du Web 66
jQuery UI
Techniques élémentaires de programmation
Le plugin Droppable
Ingénierie du Web 67
jQuery UI
Techniques élémentaires de programmation
Le plugin Droppable
Ingénierie du Web 68
jQuery UI
Techniques élémentaires de programmation
Ingénierie du Web 69
jQuery UI
Techniques élémentaires de programmation
Le plugin Resizable
Ingénierie du Web 70
jQuery UI
Techniques élémentaires de programmation
Le plugin Resizable
Ingénierie du Web 71
jQuery UI
Techniques élémentaires de programmation
Le plugin Resizable
Ingénierie du Web 72
jQuery UI
Techniques élémentaires de programmation
Le plugin Resizable
Ingénierie du Web 73
jQuery UI
Techniques élémentaires de programmation
Le plugin Resizable
Ingénierie du Web 74
jQuery UI
Techniques élémentaires de programmation
Le plugin Selectable
• La sélection est une action utilisée pratiquement partout : sur votre système
d'exploitation, dans les logiciels de retouche graphique, dans certaines
applications, et maintenant sur les sites web.
Ingénierie du Web 75
jQuery UI
Techniques élémentaires de programmation
Le plugin Selectable
Ingénierie du Web 76
AngularJS
Techniques élémentaires de programmation
– La vue est, quant à elle, chargée d'afficher les données du modèle pour
générer la page qui sera visible par les utilisateurs. Elle a aussi pour rôle
de transmettre les actions effectuées au contrôleur, comme le clic sur un
bouton ou la sélection d'un élément d'une liste.
Ingénierie du Web 77
AngularJS
Techniques élémentaires de programmation
– qui définit une organisation assez similaire au pattern MVC, pour sa notion
de binding.
Ingénierie du Web 78
AngularJS
Techniques élémentaires de programmation
• comme les services, dont le rôle est d'encapsuler des fonctionnalités métiers et
techniques,
• ou comme les modules, permettant de regrouper des éléments pouvant être
réutilisés dans plusieurs applications AngularJS.
Ingénierie du Web 79
AngularJS
Techniques élémentaires de programmation
Ingénierie du Web 80
AngularJS
Techniques élémentaires de programmation
MVC
Ingénierie du Web 81
AngularJS
Techniques élémentaires de programmation
MVC
Ingénierie du Web 82
AngularJS
Techniques élémentaires de programmation
MVC
Ingénierie du Web 83
AngularJS
Techniques élémentaires de programmation
MVVM
Ingénierie du Web 84
AngularJS
Techniques élémentaires de programmation
MVVM
Ingénierie du Web 85
AngularJS
Techniques élémentaires de programmation
Où intervient Angular ?
Ingénierie du Web 86
AngularJS
Techniques élémentaires de programmation
Data Binding
Ingénierie du Web 87
AngularJS
Techniques élémentaires de programmation
Ingénierie du Web 88
AngularJS
Techniques élémentaires de programmation
Architecture mono-page
Ingénierie du Web 89
AngularJS
Techniques élémentaires de programmation
Ingénierie du Web 90
AngularJS
Techniques élémentaires de programmation
Rendu et Traitement
Ingénierie du Web 91
AngularJS
Techniques élémentaires de programmation
Concepts
Ingénierie du Web 92
AngularJS
Techniques élémentaires de programmation
Concepts
Ingénierie du Web 93
AngularJS
Techniques élémentaires de programmation
Concepts
• Les controllers
– Éléments de base de la
couche de traitement de
Angular
– Un controller est un objet JS
qui sera associé à la vue
(DOM)
Ingénierie du Web 94
AngularJS
Techniques élémentaires de programmation
Concepts
Ingénierie du Web 95
AngularJS
Techniques élémentaires de programmation
Concepts
Ingénierie du Web 96
AngularJS
Techniques élémentaires de programmation
Concepts
• La directive ng-model
– C’est template qui se met sur les élèments input, textarea ou select
– Elle effectue le lien entre un élément de la View et une propriété du scope
– Si l’élément change, le scope change et si le scope change l’élément
change.
Ingénierie du Web 97
AngularJS
Techniques élémentaires de programmation
Ingénierie du Web 98
AngularJS
Techniques élémentaires de programmation
• nous devons créer un module Angular dans lequel nous allons placer
toute notre logique.
Ingénierie du Web 99
AngularJS
Techniques élémentaires de programmation
$scope
• Le concept clé ici est $scope que vous passez à toutes vos fonctions
au sein d’un contrôleur.
– $scope fait référence à l’élément courant (ou zone courante) dans le DOM
(ce qui est différent de this).
– La démo donne une petite idée de comment “pousser” des données dans le
DOM.
Les directives