JavaScript

Bases
+
Notions avancées

Olivier Pons / 2018 - 2019

 Internet : Javascript

Objectif
JavaScript / Json / Ajax
Sommaire
1. Définition
2. Bases
3. Divers
4. jQuery
5. S.P.A.’s
Olivier Pons / 2018 – 2019
2 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1a. Le Javascript c'est quoi ?

JavaScript (souvent abrégé JS) est un langage de
programmation de scripts principalement utilisé dans les
pages web interactives mais aussi côté serveur.

C'est un langage orienté objet à prototype, c'est-à-dire que

les bases du langage et ses principales interfaces sont
fournies par des objets qui ne sont pas des instances de
classes, mais qui sont chacun équipés de constructeurs
permettant de créer leurs propriétés, et notamment une
propriété de prototypage qui permet d'en créer des objets
héritiers personnalisés.
http://fr.wikipedia.org/wiki/JavaScript

Olivier Pons / 2018 – 2019

3 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b. Les bases du langage

Bob est un homme (= objet) objet
Bob est né le 28/11/1973 propriétés
Bob peut manger, lire et calculer son âge méthodes
Bob est une instance de classe classes (OOP classique)
”développeur”
Bob est basé sur un autre objet appelé prototype (OOP prototype)
”développeur”
Bob garde ses informations et les encapsulation
méthodes qui vont avec ses informations
Bob a ses méthodes privées privé / publique
Bob/dev travaille avec Jill/graph et Jack/PM aggrégation, composition
Dev/graph/PM basés sur l'objet personne héritage
Bob:talk – Jill:talk – Jack:talk Polymorphisme/surcharge

Olivier Pons / 2018 – 2019

4 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-i. Les primitives

Par coeur : Déclarer une variable
1 – Number var a;
2 – String Initialiser une variable
3 – Boolean var a=1;
4 – undefined
5 – null (!= undefined) Les variables sont sensibles à
6 – NaN la casse
7 – Infinity Console : essayer :
8 – function var aa = 'test';
9 – object var AA = 'autre';
aa
AA
typeof(AA)

Olivier Pons / 2018 – 2019

5 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ii. Les blocs de code

Bloc simple Blocs dans des blocs
{ {
var a = 1; var a = 1;
var b = 3; var b = 3;
} {
var c = 1;
var d = 3;
}
}

Olivier Pons / 2018 – 2019

6 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ii. La syntaxe
Déclarer une variable
var tutu = 12; var t, u, v =15, yy=”o”;

Sensibles à la casse.
Tutu != tutu

Déclarer une fonction

function test() {
}

Fonction avec des paramètres

La portée est par fonction et non pas par...
bloc.

Olivier Pons / 2018 – 2019

7 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ii. La syntaxe
Erreurs classiques :
function test() {
return
(1 + 2 + 3 + 4 + 5 + 6);
}
console.log(test());

… ou encore, que donne :

3 + "30"
3 * "30"

Olivier Pons / 2018 – 2019

8 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-iii. Les opérateurs de calcul

1 + 2 3
99.99 – 1 98.99
2 * 3 6
6 / 4 1.5
6 % 3 0
255 ^ 128 127
var a=12; a++; a 13
var b=a; b--; b 12

Olivier Pons / 2018 – 2019

9 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-iv. Les opérateurs bit à bit

& Bitwise AND 0b1010 & 0b1100 // 0b1000
| Bitwise OR 0b1010 | 0b1100 // 0b1110
^ Bitwise XOR 0b1010 ^ 0b1100 // 0b0110
~ Bitwise NOT ~0b1010 // 0b0101
<< Left shift 0b1010 << 1 // 0b10100
0b1010 << 2 // 0b101000
>> Sign-propagating right shift
>>> Zero-fill right shift

Olivier Pons / 2018 – 2019

10 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-iv. Les opérateurs bit à bit

const FLAG_READ 1 // 0b001

const FLAG_WRITE 2 // 0b010
const FLAG_EXECUTE 4 // 0b100
let p = FLAG_READ | FLAG_WRITE; // 0b011
let hasWrite = p & FLAG_WRITE; // 0b010 - truthy
let hasExecute = p & FLAG_EXECUTE; // 0b000 - falsy
p = p ^ FLAG_WRITE; // 0b001 - inversé (off)
p = p ^ FLAG_WRITE; // 0b011 - inversé (on)

Olivier Pons / 2018 – 2019

11 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-v. Les opérateurs logiques

NOT logique !xx
ET logique &&
OU logique ||
var b = !true; b false
var b = !!true; b true
var b = "one"; !b false
var b = "one"; !!b true
Chaine vide : var ul=''; !ul
!null false
!undefined false
Nombre !0 false
Nombre !NaN false
Booléen !false false

Olivier Pons / 2018 – 2019

12 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-vi. Les opérateurs de comparaison

Tester :
== Vrai si égalité
=== Vrai si égalité + type 1==1
!= 1 === '1'
!== Vrai si non-égalité 1 != '2'
> Vrai si non-égalité OU types différents 1 !== '2'
>= Vrai si gauche supérieur à droite 1 > 1
< 1 <= 1
Vrai si gauche supérieur ou égal à droite 1 < 1
<= Vrai si gauche inférieur à droite 1 <= 1
Vrai si gauche inférieur ou égal à droite

Olivier Pons / 2018 – 2019

13 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-vii-a. Les structures conditionnelles

Conditions ”if” Conditions ”if-else-if”
if (a>3) { if (note>15) {
result = 'ok'; result = 'bon';
} } else if (note>10) {
result = 'moyen';
Conditions ”if-else” } else {
if (a>3) { result = 'mauvais';
result = 'ok'; }
} else {
result = 'erreur';
}

Olivier Pons / 2018 – 2019

14 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-vii-b. Les structures conditionnelles

switch (note) {
”if” imbriqués case 0:
if (a>10) { result = 'exclu';
if (a<15) { break;
result = 'moyen'; case 1:
} else { case 2:
result = 'bon'; case 3:
} result = 'bidon';
} else { break;
result = 'mauvais'; case 19:
} case 20:
result = 'normal';
break;
Opérateur ternaire default:
var result = (a==1 ? 0 : 1); result = 'à refaire';
break;
A utiliser avec parcimonie }

Olivier Pons / 2018 – 2019

15 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-vii-b. Les structures conditionnelles

Opérateur ternaire
var result = (a==1 ? 0 : 1);
A utiliser avec parcimonie…
Exemple Php, Wordpress 4.2.3
wp-admin/includes/class-wp-comments-list-table.php

(
(
('approve' == $action
|| 'unapprove' == $action
) && 2 === $i
) || 1 === $i
) ? $sep = '' : $sep = ' | ';

Olivier Pons / 2018 – 2019

16 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-viii. Les boucles

var i = 0; for (var i = 0, p='';
do { i<100;
i++; i++, p += 'test;') {
} while (i<10); /* rien */
}
var i=0;
while (i<10) { var i = 0, p='';
i++; for (;;) {
} if (++i== 100) { break; }
p += 'test';
var p=''; }
for (var i = 0; i<100; i++) {
p += 'test;';
}

Olivier Pons / 2018 – 2019

17 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ix.a. Les variables et leurs types

typeof( undefined ) "undefined"

typeof( null ) "object"
typeof( {} ) "object"
typeof( true ) "boolean"
typeof( 1 ) "number"
typeof( "" ) "string"
typeof( Symbol() ) ← ES6 "symbol"
typeof( function() {} ) "function"

Olivier Pons / 2018 – 2019

18 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ix.b. Les variables et leurs portées

La portée des variables n'est pas par blocs.
La portée des variables est par fonction.
var global=1;
function f() { var a = 123;
var local = 2; function f() {
global++; console.log(a);
return global; var a = 1;
} console.log(a);
}
f(); donnera quoi ?
f(); donnera quoi ?
Encore f(); donnera quoi ?
local donnera quoi ?

Olivier Pons / 2018 – 2019

19 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1b-ix.b. Les variables et leurs portées

Votre code : Comment JavaScript l'interprète :
var x;
var y;
if(x !== 3) { if(x !== 3) {
console.log(y); console.log(y);
var y = 5; y = 5;
if (y === 5) { if (y === 5) {
var x = 3; x = 3;
} }
console.log(y); console.log(y);
} }
if (x === 3) { if (x === 3) {
console.log(y); console.log(y);
} }

Olivier Pons / 2018 – 2019

20 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-x. Les chaines - Syntaxe

var maChaine="des caracteres"; var maChaine="\ntest\n123\n456";
var maChaine='des caracteres'; console.log(maChaine);
donne quoi ?
\ Caractère d'échappement
\\ Écrire un \ var maChaine="\ttest\t123\t456";
\n Écrire un retour chariot console.log(maChaine);
\t Écrire une tabulation donne quoi ?
\u\ Écrire un caractère unicode
var t='I \u2661 JavaScript!';
console.log(t);
donne quoi ?

Olivier Pons / 2018 – 2019

21 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xi. Les chaines - Conversion

var s1 = "un"; var s = "un";
var s2 = "deux"; S = 3 * s
var s = s1 + s2; s; donnera quoi ?
s; donnera quoi ? typeof s; donnera quoi ?
typeof s; donnera quoi ?
var s = "3";
var s1 = "un"; s = s * 3;
var s2 = "deux"; s; donnera quoi ?
var s = s1 * s2;
typeof s; donnera quoi ?
s; donnera quoi ?
typeof s; donnera quoi ?

Olivier Pons / 2018 – 2019

22 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xii. Les tableaux

var a=[]; var a=new Array();
a; donnera quoi ?
typeof a; donnera quoi ?

var a = ["12", 1, 2, 3, 5, "un"];

a; donnera quoi ?
a[3] = [5];
a; donnera quoi ?

Olivier Pons / 2018 – 2019

23 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xiii. Les tableaux – Opérations / fonctions

var a=[1,89,9];

Mettre à jour un élément A connaître par coeur :

a[1] = 12;
a; donnera quoi ?
a.push();
a.pop();
Ajouter un élément a.slice();
a[10] = 0.25; a.splice();
a; donnera quoi ? a.sort();
a.join();
a.length
Supprimer un élément
delete a[7];
a; donnera quoi ?

Olivier Pons / 2018 – 2019

24 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xiii. Les tableaux - Boucles

Différence entre ces deux boucles ?

for (let i=0; i<a.length; i++) {
console.log(a[i]);
}
for (let i in a) {
console.log(a[i]);
}

Olivier Pons / 2018 – 2019

25 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xv. Les objets - Déclaration

Tapez ce qui suit : Tapez ce qui suit :
var o = { var o = {
A: 12, A: 12,
B: "test" B: "test",
}; a: 3.25,
o b: "autre"
typeof(o); };
o
Devinez les réponses. typeof(o);

Devinez les réponses.

Olivier Pons / 2018 – 2019

26 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xvi. Les objets - Syntaxe

Un objet dans un objet :
let livre = {
titre: "Le chien des Baskerville",
publication: 1902,
auteur: {
civilite: "Sir",
nom: "Doyle",
prenom: "Arthur Conan"
}
};
Donnez quatre façons de sortir avec console.log() :
Le chien des Baskerville (Sir Arthur Conan Doyle)

Olivier Pons / 2018 – 2019

27 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xvi. Les objets - Boucles

let o = {
A: "test",
B: 2.565,
a: "autre",
b: "valeur"
};
Terminez le code pour afficher
toutes les valeurs des propriétés :
for (var i in o) {
console.log("/* Terminer le code ici */");
}

Olivier Pons / 2018 – 2019

28 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xvii. Les objets - Prédéfinis

Object
Array
Number (!) Les bases JavaScript sont ici…
Boolean La documentation
String exhaustive est impossible
Date
RegExp dans le cadre d'une initiation.

Objet particulier qui n'accepte pas "new" :

Math

Olivier Pons / 2018 – 2019

29 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xviii. Les fonctions – Déclarations

var fn = function () {
console.log('bonjour');
};
var o={
a: fn
};

Comment appeler fn qui est dans l'objet o ?

Citez les deux possibilités

Olivier Pons / 2018 – 2019

30 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1c-xix. Les fonctions – Déclarations

Une fonction est une donnée
function fn() {
console.log('bonjour');
};

var fn = function () {
console.log('bonjour')
};
var tab=[1, 2, fn, "aa"];

Comment appeler fn qui est dans le tableau tab ?

Olivier Pons / 2018 – 2019
31 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1d-i. Fonctions - Bases

En général :
function f() { return 1; }

En JavaScript :
var f = function() { return 1; }
typeof f donne quoi ?
var sum = function(a,b) { return a+b; }
var add = sum;
delete sum donne quoi ?
typeof add donne quoi ?
add(1,2) donne quoi ?

Olivier Pons / 2018 – 2019

32 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1d-ii. Fonctions – Anonymes

function invoque_et_add(a,b) {
return a() + b();
}
var un = function () { return 1; }
var deux = function () { return 2; }
>> invoque_et_add(un,deux); donne quoi ?
>> invoque_et_add(
function () { return 1; },
function () { return 2; }
);
Est il possible, si oui, donne quoi ?

Olivier Pons / 2018 – 2019

33 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1e. Fonctions – Prédéfinies

parseInt(); => '123', 'a123', '1a23', '123a'
parseFloat(); => '1.23', 'a1.23', '1a.23',
'1.a23', '1.23a', '123e-2', '1e10'
isNaN(); => NaN, 123, 1.23
isFinite(); => NaN, Infinity, 1e308, 1e309
encodeURI(); => '?test=12&val=80'
decodeURI(); => 'je%20-test'
encodeURIComponent(); => '?test=12&val=80'
decodeURIComponent(); => 'je%20-test'
eval(); => 'var a=12;'
alert(); => 'bonjour'
console.log(); => eval('var a=12;'); console.log(a);

Olivier Pons / 2018 – 2019

34 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1f-i. Fonctions – Self-invoking

(
function() {
alert('coucou');
}
) ();
(
function(name) {
alert(name);
}
) ('ceci est un test');

Olivier Pons / 2018 – 2019

35 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1f-i. Fonctions – Self-invoking

Scoping : quelles seront les sorties consoles ?
var test = 123;
if (true) {
(function () {
var test = 456;
console.log(test);
})();
console.log(test);
}
console.log(test);

Olivier Pons / 2018 – 2019

36 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

1f-ii. Fonctions – Privées

var a= function (param) {
var b=function (theinput) {
return theinput*2;
};
return 'Résultat '+ b(param);
};
a(2);
a(48);
b(test);

Olivier Pons / 2018 – 2019

37 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-i. POO – Bases

function Identite(a_nom, a_prenom) {

this.nom = a_nom;
this.prenom = a_prenom;
}

var oo = new Identite('pons', 'olivier');

console.log(oo.nomComplet());

Olivier Pons / 2018 – 2019

38 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-ii. POO – Bases

String.prototype.maFonction = function () {
return ('Ma longueur est : '+this.length);
}
);

var oo = "Test";
console.log(oo.maFonction());

Olivier Pons / 2018 – 2019

39 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-iii. POO – Bases

Expliquez ce qui suit :
function Identite(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
}
Identite.prototype.nomComplet = function () {
return this.nom+' '+this.prenom;
};
Identite.prototype.valeur = 'test';
var oo = new Identite('a', 'c');
oo.valeur='autrevaleur';
var op = new Identite('b', 'd');
console.log(oo.valeur);

Olivier Pons / 2018 – 2019

40 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-iv. POO – Bases

Déterminer un type : instanceof
function Identite(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
}
var h=new Identite('pons', 'olivier');

Que donne :
h instanceof Identite
h instanceof Object

Olivier Pons / 2018 – 2019

41 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-vi. POO – Bases

Fonction cachée : le constructeur : constructor
function Identite(nom, prenom) {
this.nom = nom;
this.prenom = prenom;
}
var h=new Identite('pons', 'olivier');

Que donne :
h.constructor
typeof(h.constructor)

Olivier Pons / 2018 – 2019

42 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2a-vi. POO – Bases

Créer des objets sans "new" :
function sansNew(a, b) {
return {
nom: a;
prenom: b;
};
}
var h=sansNew('pons', 'olivier');

Que donne :
h.nom
h.constructor

Olivier Pons / 2018 – 2019

43 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2b. POO – Objet global - Définition

Dans les navigateurs,

Deux objets globaux à connaître :
- window
- document

Olivier Pons / 2018 – 2019

44 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

2c. POO – Exceptions

Essayez :
try {
fonctionQuiNExistePas();
} catch(e) {
console.log(e.name + ' - ' + e.message);
} finally {
console.log('Finally !');
}

Olivier Pons / 2018 – 2019

45 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-i. Notions avancées

Object.defineProperty
Firefox 4+, Chrome 5+, Safari 5.1+, Opera 11.6+, IE 9+
var obj = {};
Object.defineProperty(obj, 'maprop', {
get: function() {
return maprop * 2;
},
set: function(val) {
alert('Nouvelle valeur : '+val);
maprop = val;
}
});
obj.maprop = 20;
alert(obj.maprop);

Olivier Pons / 2018 – 2019

46 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-i. Notions avancées

Object.defineProperty
Firefox 4+, Chrome 5+, Safari 5.1+, Opera 11.6+, IE 9+
var obj = {};
obj.laVie = 42;
Object.defineProperty(obj, 'laVie', {
writable: false, // Lecture seule
configurable: false // Suppression impossible
});
obj.laVie = 5;
alert(obj.laVie);

Olivier Pons / 2018 – 2019

47 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-ii. Notions avancées

Mot-clé arguments
function printf(text) {
let i = 0;
let args = Array.prototype.slice.call(arguments);
text = text.replace(/\%s/g, function(a) {
return args[++i];
});
return text;
}
printf(
"Bonjour %s! Tu as %s points",
"Olivier",
1337
);

Olivier Pons / 2018 – 2019

48 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iii. Notions avancées

Méthode call()
var brice = { nom: "Brice" };
var adeline = { nom: "Adeline" };
function hello() {
return 'Hello, je suis ${this.nom} !';
}
var a = hello();
var b = hello.call(brice);
var c = hello.call(adeline);
[a, b, c]

call sert à spécifier this

Olivier Pons / 2018 – 2019

49 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iii. Notions avancées

Méthode call()
function update(aaaa, job) {
this.annee_naissance = aaaa;
this.job = job;
}
update.call(brice, 1975, 'danseur');
update.call(adeline, 1989, 'actrice');
[brice, adeline]

call sert à spécifier this

Olivier Pons / 2018 – 2019

50 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iv. Notions avancées

Méthode apply()

apply est pareil que call mais les arguments sont un tableau
function update(aaaa, job) {
this.annee_naissance = aaaa;
this.job = job;
}
update.apply(brice, [1975, 'danseur']);
update.apply(madeline, [1989, 'actrice']);
[brice, adeline]

Olivier Pons / 2018 – 2019

51 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iii. Notions avancées

Méthode bind()

bind() associe de manière permanente permanente this

var updateBrice = update.bind(brice);

updateBrice(1904, "acteur");
updateBrice.call(adeline, 1174, "reine");
updateBrice.call(undefined, 10, "roi");

Dites ce que contient : brice

Olivier Pons / 2018 – 2019

52 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iii. Notions avancées

Méthode bind()
var TestObj = function() {
this.someValue = 100;
this.maFc = function() {
alert(this.someValue);
};
setTimeout(this.maFc, 1000);
setTimeout(this.maFc.bind(this), 2000);
}
new TestObj();

Olivier Pons / 2018 – 2019

53 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3a-iii. Notions avancées

ES6 : plus besoin de méthode bind()

var TestObj = function() {
this.location = 100;
this.maFc = () => {
alert(this.location);
};
setTimeout(this.maFc, 1000);
}
new TestObj();

Olivier Pons / 2018 – 2019

54 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3b-i. Classes
var Personne = function(nom, prenom){
this.nom = nom || 'Pons';
this.prenom = prenom || 'Olivier';
};
Personne.prototype.getNom = function() {
return 'Mon nom est ' + this.prenom +
'... ' + this.nom + ' ' + this.prenom + '.';
};
var Employe = function(nom, prenom, job) {
Personne.call(this, nom, prenom);
this.job = job || 'sans travail';
};
Employe.prototype = new Personne();
Employe.prototype.constructor = Employe;
Employe.prototype.getNomEtPosition = function() {
return 'Je suis ' + this.prenom + '... ' +
this.nom + ' ' + this.prenom + '.' +
" Mon travail : " + this.job + '.';
};

Olivier Pons / 2018 – 2019

55 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3b-ii. Classes
function buildPersonne(aNom, aPrenom) {
var personne = {},
nom = aNom || 'Olivier',
prenom = aPrenom || 'Pons';
personne.getNom = function () {
return 'Mon nom est ' + prenom +
'... ' + nom + ' ' + prenom + '.';
};
return personne;
}
function buildEmploye(aNom, aPrenom, aJob) {
var employe = buildPersonne(aNom, aPrenom),
job = aJob || 'sans emploi';
employe.getNomEtPosition = function() {
return 'Je suis ' + aPrenom + '...' + aNom + ' ' +
aPrenom + '.' + ". Mon travail : " + job + '.';
};
return employe;
}

Olivier Pons / 2018 – 2019

56 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3b-iii. Classes
Premier slide = avec des constructeurs
var ePresley = new Employe ('Elvis', 'Presley', 'Star');
console.log(ePresley.getNom());
console.log(ePresley.getNomEtPosition());

Second cas = avec les fonctions normales

var jBond = buildEmploye('James', 'Bond', 'spy');
console.log(jBond.getNom());
console.log(jBond.getNomEtPosition());

Olivier Pons / 2018 – 2019

57 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3c-i. Subtilités
Deux codes : un seul fonctionne.
Lequel ? Pourquoi ?
function Test() { function Test() {
this.t=function() { this.t=function() {
var self = this, var self = this,
other = -1, other = -1;
self.tutu = 15; self.tutu = 15;
console.log(self); console.log(self);
} }
} }
var olivier = new Test(); var olivier = new Test();

Olivier Pons / 2018 – 2019

58 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3c-ii. Subtilités
Tapez ce qui suit : Tapez ce qui suit :
var tab = []; var tab = {};
tab['a'] = 12; tab['a'] = 12;
tab['b'] = "test"; tab['b'] = "test";

Puis Puis
tab['b'] tab['b']
tab.length tab.length

Devinez les réponses. Devinez les réponses.

Il y a deux incohérences. Lesquelles ? Pourquoi ?

Olivier Pons / 2018 – 2019
59 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3c-iii. Subtilités
Le code qui suit ne fonctionne pas :
var monObj = {
nom: 'Olivier',
hiRev: function() {
function getRevNom() {
var rev = '';
for(let i=this.nom.length-1; i>=0; i--) {
rev += this.nom[i];
}
return rev;
}
return getRevNom()+' sius ej, olleH';
}
};
monObj.hiRev();
Pourquoi ?

Olivier Pons / 2018 – 2019

60 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3c-iii. Subtilités
Solution :
var monObj = {
nom: 'Olivier',
hiRev: function() {
var self = this;
function getRevNom() {
var rev = '';
for(let i=self.nom.length-1; i>=0; i--) {
rev += self.nom[i];
}
return rev;
}
return getRevNom()+' sius ej, olleH';
}
};
monObj.hiRev();

Olivier Pons / 2018 – 2019

61 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3c-iii. Subtilités
A éviter, en Php même problème qu’en JavaScript :

Olivier Pons / 2018 – 2019

62 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-i. Divers
Apprenez en jouant :
http://play.elevatorsaga.com/#challenge=1

Olivier Pons / 2018 – 2019

63 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-ii. Divers
http://nodeschool.io/
npm install -g functional-javascript-workshop
functional-javascript-workshop

Olivier Pons / 2018 – 2019

64 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-i. ES6 – class – extends

class Vehicule {
constructor (nom, type) {
this.nom = name;
this.type = type;
}
getNom () {
return this.nom;
}
}
class Voiture extends Vehicule {
constructor (nom) {
super(nom, 'voiture');
}
}
let car = new Voiture('Tesla');
console.log(car.getNom())

Olivier Pons / 2018 – 2019

65 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-i. ES6 – let – templates

let maVar; // portée par bloc (enfin !)
const MA_CONST = "T"; // constantes

String templates
let tempActuelle = 19.5;
const msg = `La température est ${tempActuelle} \u00b0C`;

Symboles = valeurs uniques

const ROUGE = Symbol();
const ORANGE = Symbol("Bonjour !");
ROUGE === ORANGE // false : un symbol est unique

Olivier Pons / 2018 – 2019

66 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-ii. ES6 – set – for .. of

Sets
>new Set([1,45,45,45,45,1])
Set {1, 45}

for .. of
const verbes = ["ri", "eu peur", "crié"];
for(let verbe of verbes) {
console.log(`J'ai...${verbe}!`);
}

Olivier Pons / 2018 – 2019

67 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-iii. ES6 – Assignations déstructurées

Destructuring assignments
const obj = { b: 2, c: 3, d: 4 };
const {a, b, c} = obj;
a; // undefined: pas de propriété "a" dans obj
b; // 2
c; // 3
d; // erreur de référence: "d" is not defined
Attention, assignation seule = parenthèses obligatoires
const obj = { b: 2, c: 3, d: 4 };
let a, b, c;
{a, b, c} = obj; // erreur
({a, b, c} = obj); // pas d'erreur

Olivier Pons / 2018 – 2019

68 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-iii. ES6 – Assignations déstructurées

let [x, y] = arr;
x; // 1
y; // 2
z; // erreur: z hasn't been defined

Opérateur ”...”
const tab = [1, 2, 3, 4, 5];
let [x, y, ...reste] = tab;
x; // 1
y; // 2
reste; // [3, 4, 5]

Olivier Pons / 2018 – 2019

69 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-iii. ES6 – Assignations déstructurées

Echanger deux valeurs

let a = 5, b = 10;
[a, b] = [b, a];
a; // 10
b; // 5

Olivier Pons / 2018 – 2019

70 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-iv. ES6 – Arguments déstructurés

Les propriétés doivent être des chaines qui correspondent
function maPhrase({ sujet, verbe, objet }) {
return `${sujet} ${verbe} ${objet}`;
}
const o = {
sujet: "Je",
verbe: "préfère",
objet: "Python",
};
maPhrase(o);

Olivier Pons / 2018 – 2019

71 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-iv. ES6 – Arguments déstructurés

Avec des tableaux
function maPhrase([ sujet, verbe, objet ]) {
return `${sujet} ${verbe} ${objet}`;
}
const arr = [ "JavaScript", "copie", "Python" ];
maPhrase(arr);

Avec les ”...”

function maFn(prefixe, ...mots) {
const retour = [];
for(let i=0; i<mots.length; i++) {
retour[i] = prefixe + mots[i];
}
return retour;
}
maFn("Py", "lône", "thon");

Olivier Pons / 2018 – 2019

72 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-v. ES6 – Arguments par défaut

Avec des tableaux

function f(a, b = "default", c = 3) {
return `${a} - ${b} - ${c}`;
}
f(5, 6, 7); // "5 - 6 - 7"
f(5, 6); // "5 - 6 - 3"
f(5); // "5 - default - 3"
f(); // "undefined - default - 3"

Olivier Pons / 2018 – 2019

73 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-vi. ES6 – Fonctions / propriétés

Avant
var o = {
nom: 'Olivier',
crier: function() { return 'Argh !'; }
}
Maintenant
var o = {
nom: 'Olivier',
crier(): { return 'Argh !'; } // plus court
}

Olivier Pons / 2018 – 2019

74 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-vii. ES6 – Notation fléchée

- Remplace le mot-clé ”function”
- Est toujours anonyme
- Si le corps n'est qu'une instruction, ”{}” facultatifs
- mot-clé arguments pas utilisable

Identiques :
const f1 = function() { return "hello!"; }
const f1 = () => "hello!";
const f2 = function(name) { return `Hello, ${name}!`; }
const f2 = name => `Hello, ${name}!`;
const f3 = function(a, b) { return a + b; }
const f3 = (a,b) => a + b;

Olivier Pons / 2018 – 2019

75 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-vii. ES6 – Mode strict

Il suffit de mettre ”use strict”
sur une ligne seule, avant le code.
Attention : ”use strict” prend en compte le scope :
- dans une fonction, que dans la fonction
- dans le scope global, il s'applique à tout
y compris aux autres scripts.
Solution, mettre tout son code dans une IIFE
(= Immediately Invoked Function Expression)
(= self invoking function)
(function() {
"use strict";
/* mon code */
})();
Olivier Pons / 2018 – 2019
76 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-viii. ES6 – Compatibilité

https://kangax.github.io/compat-table/es6/

Olivier Pons / 2018 – 2019

77 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-ix. ES6 – Evolution saine

{ {
const x = 'blue'; let x = 'blue';
console.log(x); console.log(x);
} {
console.log(typeof x); let x = 3;
{ console.log(x);
const x = 3; }
console.log(x); console.log(x);
} }
console.log(typeof x); console.log(typeof x);

Olivier Pons / 2018 – 2019

78 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-x. ES6 – Evolution saine

const arr = new Array(5).fill(1); // [1, 1, 1, 1, 1]

arr.fill("a"); // ["a", "a", "a", "a", "a"]
arr.fill("b", 1); // ["a", "b", "b", "b", "b"]
arr.fill("c", 2, 4); // ["a", "b", "c", "c", "b"]
arr.fill(5.5, -4); // ["a", 5.5, 5.5, 5.5, 5.5]
arr.fill(0, -3, -1); // ["a", 5.5, 0, 0, 5.5]

Olivier Pons / 2018 – 2019

79 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-xi. ES6 – Evolution saine

const arr = [{ id: 5, n: "Inès" },

{ id: 7, n: "Eric" }];
arr.findIndex(o => o.id === 5); // 0
arr.findIndex(o => o.n === "Eric"); // 1
arr.findIndex(o => o === 3); // -1
arr.findIndex(o => o.id === 17); // -1
arr.find(o => o.id === 5); // object
// { id: 5, n: "Inès" }
arr.find(o => o.id === 2); // null

Olivier Pons / 2018 – 2019

80 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-xii. ES6 – Exemples concrets

$(() => {
const comparator = (a, b, direction = 1) =>
a < b ? -direction : (a > b ? direction : 0),
const sortDirection = 1;
$('#t-2').find('tbody > tr').sort((a, b) => comparator(
$(a).data('book')[sortKey],
$(b).data('book')[sortKey],
sortDirection
));
});

Olivier Pons / 2018 – 2019

81 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

3d-xiii. ES6 – Exemples concrets

$(() => {
const stripe = () => {
$('#news')
.find('tr.alt')
.removeClass('alt')
Javascript / Json / AJAX
.end()
.find('tbody')
.each((i, element) => {
$(element)
.children(':visible')
.has('td')
.filter(i => (i % 4) < 2)
.addClass('alt');
});
}
stripe();
});
Olivier Pons / 2018 – 2019
82 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

4. jQuery

Voir le PDF ”jQuery 2018-2019”

Olivier Pons / 2018 – 2019

83 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Général

JavaScript
Page principale AJAX Habillage
Oui de la
Connecté ? Page
is_connected.php principale
index.php
Non

→ redirect vers login.php = choix 1

OU
→ JavaScript : création
du formulaire de connexion = choix 2

Olivier Pons / 2018 – 2019

84 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 1

Page principale

Login
Login.php

Register
Register.php

index.php

Olivier Pons / 2018 – 2019

85 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 1

GET = lire = renvoyer le formulaire

Login.php
POST = formulaire envoyé = analyser

GET = lire = renvoyer le formulaire

Register.php
POST = formulaire envoyé = analyser

Olivier Pons / 2018 – 2019

86 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 1

Navigateur

GET POST
POST Page principale
(Erreur)

index.php

POST
Login (Ok !) header redirect
Location: / (Ok !)
Login.php

Olivier Pons / 2018 – 2019

87 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 1

GET = lire = renvoyer le formulaire
POST = formulaire envoyé = analyser
if (isset($_POST['username']) &&
isset($_POST['password']) && ... ) {
/* form sent!
* → request to see if users exists:
* → if user found:
* header('Location: /');
* exit(0);
* → if user not found: continue
*/
}
/* no $_POST / or a simple GET */
?>
<html> ... </html>
<?php
}
Olivier Pons / 2018 – 2019
88 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 2

JavaScript
Habillage
Page principale AJAX de la
Connecté ?
Oui Page
principale
is_connected.php
+ Bouton
index.php Logout
Non JavaScript
Formulaire de connexion
→ Appel à is_connected.php
JavaScript → Formulaire de connexion
→ Envoi du formulaire
→ Gestion du résultat
→ Construction dynamique
Olivier Pons / 2018 – 2019
89 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 2

Appel is_connected.php qui renvoie
true ou false

- si true
→ l’utilisateur est connecté
→ afficher bouton déconnexion

- si false
→ l’utilisateur est pas connecté
→ afficher formulaire connexion

Olivier Pons / 2018 – 2019

90 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Principe – Choix 2

$(document).ready(function() {
$("#mon-form").submit(function() {
$.ajax({
url: "/ajax/login.php",
method: "POST",
dataType: "json",
data: $(this).serialize()
}).done(function(data) {
if (data == true) {
/* identification ok */
window.location.reload(true);
} else {
/* identification problem */
}ﾲ
});
return false;
});
});
Olivier Pons / 2018 – 2019
91 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Résumé

Choix 1 Choix 2
Php JavaScript Php JavaScript
login.php 100% 0% 20% 80%
logout.php 20% 80% 20% 80%
index.php 20% 80% 10% 90%

User-friendliness
12/20 20/20

Développement
Facile / rapide Complexe / long

Olivier Pons / 2018 – 2019

92 / 93
 Javascript / Json / AJAX
1 – JavaScript – Définition + bases

5a. SPA – Divers

data peut contenir un objet !
Exemple :
- si tout est ok :
{ result: true, }
- si erreur :
{ result: true,
message: "Erreur d’identification"}
→
…done(function(data) {
if (data.result == true) {
/* identification ok */
window.location.reload(true);
} else { /* use server answer, no more to do! */
alert(data.message);
}
}); …
Olivier Pons / 2018 – 2019
93 / 93