Table des matières
JavaScript
M4103C - Programmation Web – client riche
●
Objets et tableaux
2ème année - S4, cours - 2/4 ●
window
2021-2022
●
Liste jQuery / arbre
Marcel Bosc
●
Fermetures
●
Événements
●
Exemple : popup
Département informatique IUT de Villetaneuse Université Paris-13
1ère partie
Pas de classe
Java JavaScript
Objets et tableaux class Etudiant
{
public String prenom; nouvel
nouvel objet
objet vide
vide
}
...
Etudiant leila=new Etudiant(); var leila={};
[Link]="Leïla"; [Link]="Leïla";
...
propriété
propriété ajoutée
ajoutée
Créer un objet Propriétés dynamiques
var leila= Java JavaScript
{ Très utilisé !
prenom : "Leïla", class Etudiant
age : 22, {
specialite : "JavaScript" JSON public String prenom;
}; } var leila=
... {
Etudiant leila=new Etudiant(); prenom: "Leïla"
[Link]="Leïla"; };
Initialisateur d'objet:
[Link]=22; [Link]=22;
{ ...
créer un objet
propriete1 : valeur1, en spécifiant
propriete2 : valeur2, des propriétés objet = tableau associatif
et leurs valeurs
...
} [Link]=22; <=> leila['age']=22;
Objets et fonctions Objets et fonctions
var leila= var leila=
{ {
prenom: "Leïla" prenom: "Leïla",
}; age: 22,
[Link]=22; afficherNotes: function()
[Link]=function() {
{ ...
... }
}; };
[Link]();
[Link]();
Rappel :
fonction = valeur comme les autres
Objets et fonctions Tableaux
var joueurs=['Leïla','Tom','Aziz']; 0 Leïla
var leila=
1 Tom
{
prenom: "Leïla", 2 Aziz
joueurs[0] 'Leïla'
age: 22,
joueurs[2] 'Aziz
afficherNotes: xyz
};
[Link]('Lian'); 0 Leïla
function xyz() 1 Tom
{
... 2 Aziz
} [Link]('Aziz') 2 3 Lian
[Link]('xyz') -1
for(let i=0;i<[Link];i++){ ... }
Exemple : .animate() 2e partie
100
250 window
var options=
{
top: 100,
left: 250,
opacity: .5
millisecondes
millisecondes
};
$('#boite').animate(options,1000);
Rappel : objets DOM window
window
Un titre
un paragraphe
[Link]
HTMLElement
document [Link]
[Link]
un window pour chaque onglet
window : objet global Fonctions window / JS
Méthodes window :
a="bonjour"; window.a="bonjour";
●
[Link]() -> alert()
●
[Link] -> console
●
[Link]() -> setInterval()
●
[Link]() -> setTimeout()
●
...
window = objet global Fonctions JavaScript :
Vos variables globales sont
en réalité des propriétés de
●
parseInt()
window.
●
eval()
●
...
3e partie Fonction jQuery
sélecteur
Liste jQuery / arbre $('.xyz')
fonction chaîne
jQuery
jQuery('.xyz')
function jQuery(str,...)
{
// ...
return listejQuery;
}
jQuery : listes .eq(n)
p p
class="xyz" class="xyz"
a strong img span a strong img span
class="xyz" class="xyz" class="xyz" class="xyz"
em em
class="xyz" class="xyz"
$('.xyz') [ p, em, img, span ] $('.xyz').eq(2) [ img ]
$('a') [ a ] [ p, em, img, span ]
0 1 2 3
$('div') [ ]
.parent(), .children() .find()
p p
class="xyz" class="xyz"
a strong img span a strong img span
class="xyz" class="xyz" class="xyz" class="xyz"
em em
class="xyz" class="xyz"
$('img').parent() [ p ]
$('p').children('.xyz') [ img, span ]
$('p').children() [ a, strong, img, span ]
$('p').find('.xyz') [ em, img, span ]
$('p').children('.xyz') [ img, span ]
Enchaîner Effet sur toute la liste
p p
class="xyz" class="xyz ex"
a strong img span a strong img span
class="xyz" class="xyz" class="xyz ex" class="xyz ex"
em em
class="xyz" class="xyz ex"
$('p').children('.xyz') [ img, span ] $('.xyz').addClass('ex')
$('p').children('.xyz').eq(0) [ img ]
[ p, em, img, span ]
$('a').parent() [ p ]
Les fonctions jQuery s'appliquent
$('a').parent().find('img') [ img ] souvent à toute la liste
.each() .attr()
p
class="xyz"
<a id="lien5" class="xyz ex" href="[Link]">...</a>
a strong img span
class="xyz" class="xyz"
$('a').attr('id') 'lien5'
$('a').attr('class') 'xyz ex'
em $('a').attr('href') '[Link]'
class="xyz"
$('.xyz').each(function()
{
$(this).css('left',100*[Link]()); $('a').attr('href','[Link]'),
});
<a id="lien5" class="xyz ex" href="[Link]">...</a>
.each() :
parcourir tous les éléments de la liste ... « boucle »
Exemple : .parent() Exemple : .parent()
#champs [Link]
<ul id="champs">
{
<li><label>Nom : </label><input type="text"/></li>
background-color: #ff0;
<li><label>Prénom :</label><input type="text"/></li>
}
<li><button>Envoyer</button> </li>
</ul>
ul
id="champs"
li li li
class="actif"
label input label input button
ul
id="champs"
$('input').focus(function()
li li li {
$(this).parent().addClass('actif');
label input label input button });
4ème partie Fermetures
function exemple1()
{
var x=0;
Fermetures exemple2();
function exemple2()
{
[Link](x);
}
}
Fermeture :
Une fonction utilisant des
variables définies dans une
autre fonction contenante.
Fermetures Fermetures : facile ?
$(document).ready(function()
$(document).ready(function() {
{ var n=0;
var n=0; $('.boite').click(function()
$('.boite').click(function() {
{ $(this).css('left',100*n);
$(this).css('left',100*n); n=n+1;
n=n+1; });
}); });
});
Très utilisé, très intuitif !
Quoi ?!?
Programmation événementielle Accéder aux variables locales d'une autre fonction ?!
L'autre fonction a déjà fini d’exécuter ?!
5ème partie Événements : bubbling
body
<body>
<p>
a p
<a ...>Toc!</a> Toc!
Événements <p>
</body>
html
body
click
a
Événements : bubbling [Link]()
html
body
html
p
body $('a').click(function(e)
{
click a [Link]();
p });
click a Très utilisé
$('html').click(function(e){/* this:html [Link]:a */}); suivre lien
$('body').click(function(e){/* this:body [Link]:a */}); action
$('p' ).click(function(e){/* this:p [Link]:a */}); par défaut
$('a' ).click(function(e){/* this:a [Link]:a */});
6ème partie Exemple : popup
click
Exemple : popup
click
Exemple : HTML Exemple : liste
<div id="connectes"> <div id="connectes">
<p>Connectés : </p> <p>Connectés : </p>
<ul> <ul>
<li><span class="popup-mot" data-popup="joe" >Joe </span></li>
<li><span class="popup-mot" data-popup="joe" >Joe </span></li>
<li><span class="popup-mot" data-popup="marc">Marc</span></li>
<li><span class="popup-mot" data-popup="marc">Marc</span></li>
<li><span class="popup-mot" data-popup="lian">Lian</span></li>
<li><span class="popup-mot" data-popup="lian">Lian</span></li>
</ul> </ul>
</div> </div>
<div id="popup-joe" class="popup"> div
<span class="fermer">X</span> id="connectes"
<img class="triangle" src="[Link]" alt=""/>
<img src="[Link]" alt="joe" class="photo"/> p ul
<h2>Joe</h2>
<p>Célibataire, 22 ans.<br/>Aime les épinards.</p>
<p> li li li
<a href="...">films</a> | <a href="...">page perso</a>
</p>
span span span
</div>
Exemple : popup Exemple : CSS
<div id="popup-joe" class="popup">
containing
containing block
block .popup>.fermer
<span class="fermer">X</span> .popup
<img class="triangle" src="[Link]" alt=""/> { {
<img src="[Link]" alt="joe" class="photo"/> position: absolute; position: absolute;
<h2>Joe</h2> width: 200px; top: 0;
<p>Célibataire, 22 ans.<br/>Aime les épinards.</p> } right: 0;
<p> } fermer
<a href="...">films</a> | <a href="...">page perso</a>
</p>
</div> .popup>.triangle
{
position: absolute;
left: 10px;
div
bottom: -20px;
id="popup-joe" class="popup" }
span img img h2 p p width
class="fermer" class="triangle" class="photo"
br a a triangle
Exemple : .offset() Exemple : .offset()
$('#popup-joe').offset({left: 100,top: 50});
.popup
{
left popup top <div id="popup-joe" >...</div>
position: absolute;
...
} height
<div id="popup-joe" style="left: 100px; top: 50px">...</div>
mot cliqué
var pos=$(this).offset()
.of containing
containing block
block
fse
{
triangle 20
t()
top: 200, mot .pos
objet JS left: 80 .offset() itio n
()
} .position()
[Link]-=
$('#popup-joe').outerHeight()+20; page
page
$('#popup-joe').offset(pos);
Exemple : fermer Exemple : JS
0 $('.popup-mot').mousedown(function()
1 {
$('.popup>.fermer').mousedown(function()
2 var mot=$(this);
{
3 var id="popup-"+[Link]('data-popup');
$(this).parent().fadeOut();
4 var popup=$('#'+id);
});
5 var pos=[Link]();
6 [Link]-=[Link]()+20;
7 [Link]();
8 [Link](pos);
9 });
10
11 $('.popup>.fermer').mousedown(function()
div
12 {
id="popup-joe" class="popup"
13 $(this).parent().fadeOut();
14 });
span img img h2 p p
class="fermer" class="triangle" class="photo" <li><span class="popup-mot" data-popup="joe" >Joe </span></li>
...
br a a <div id="popup-joe" class="popup">
Ce document est distribué librement.
Sous licence GNU FDL :
[Link]
Les originaux sont disponibles au format LibreOffice
[Link]
