Javascript un langage supérieur
-
Upload
fredy-fadel -
Category
Documents
-
view
579 -
download
0
Transcript of Javascript un langage supérieur
JavascriptUn langage supérieur
Au programme…
JavaScript de loin Bibliographie Introduction Les aspects négatifs Les aspects positifs Le problème avec les DOMs HTML
… Au programme…
JavaScript de près Les instructions▪ Variables▪ Expressions et opérateurs▪ Conditions▪ Boucles▪ Les types de bases
Les tableaux Les objets
… Au programme
Les fonctions, les variables et la portée Les exceptions Récursion Les « closure », ou fonctions à mémoire Les « timer » Les événements Les expressions régulières Ajax
JavaScript de loinLa place de JavaScript aujourd’hui
Bibliographie
JavaScript : the good parts de Douglas Crockford chez O'REILLY Le meilleur (très dense)
Secrets of the JavaScript Ninja (2012) de Jhon Resig et Bear Bibeault chez Manning Le meilleur qui couvre les aspects avancés du langage
Pro JavaScript Techniques de Jhon Resig chez Apress : Le meilleur qui couvre JavaScript et le DOM HTML
ppk on JavaScript de Peter-Paul Koch chez New Riders Tout sur la compatibilité entre les DOM HTML
The art and science of JavaScript Auteurs multiples dont Cameron Adams chez sitepoint Agréable à lire parce que très facile
Introduction…
Très bref historique des débuts : S'inspire de Self (1986) et de Scheme
(1998) Naissance chez Netscape : ▪ Mocha▪ LiveScript▪ JavaScript 1.0 (1995)▪ suite à négociation avec Sun
… Introduction…
JScript 1.0 (1996 Microsoft ) ECMAScript (1997)… JScript.Net (2002)… Chrome V8▪ Node.js (2009)▪ Développement serveur sans browser
Windows 8, Chakra▪ développement natif en JavaScript (2012)
… Introduction…
JavaScript 1.5 (2000)▪ ECMAScript (version 3)▪ FF (1.0), IE (6, 7, 8), Opera (6,7,8,9)
JavaScript 1.6 (2005) : FF (1.5) JavaScript 1.7 (2006) : FF (2.0) JavaScript 1.8 (2008) : FF (3.0) JavaScript 1.8.5 (2010) : FF (4.0) IE (9)
ECMAScript (5) JavaScript 2.0 (201?) : ECMAScript
(version 6)
…Introduction…
JavaScript a probablement le meilleur rapport : utilisation/connaissance
C'est un langage Minimaliste Malléable Perméable
Vous pouvez donc mettre en œuvre vos patterns préférés en les intégrant au langage C'est donc un langage de maître
…Introduction…
C'est un langage sérieux qui sert à
faire du développement pérenne.
L'organisation et le découpage du
code se font à l'aide de fonctions
Les fonctions ont de la mémoire
Closure, delegate anonyme, Lambda
…Introduction…
La notion d'objet est présente Encapsulation Données Méthodes
Pas de notion de classe a priori bien que au programme des versions futures
Mais une notion de prototype A chaque type d'objet est associé un prototype Si l'objet ne peut pas traiter la demande, il le
délègue à son prototype (qui est un autre objet)
…Introduction…
On peut facilement créer :
La notion d'événement
Des notions de réutilisation
▪ Par délégation simple ou multiple
▪ Par mécanismes d'extension personnalisés
C'est un langage dynamiquement typé
Comme le C#
…Introduction…
Types utilisateur
Les fonctions
Types de bases
Number
Boolean String Date Array Object Functio
nRegEx
p Math
…Introduction…
Syntaxiquement : c'est un langage
de la famille C, C++, C#.
Case sensitif, Accolades, Point virgules
Mêmes mots clés pour
▪ Les boucles, les conditions et les branchements
Mêmes opérateurs
▪ Logiques, arithmétiques et comparaisons
…Introduction
Sinon c'est un langage qui peut être
classé sous les catégories
Orienté Objet
Fonctionnelle
Dynamique
De plus en plus comme le C#
Langage fonctionnel ?
Frédéric Fadel Aspectize 17
Impérative (1937) Déclarative (1936)
Les aspects négatifsQui font que ce n'est pas un langage pour débutant
… Les aspects négatifs…
Absence ou pauvreté de l'outillage…
• Peu ou pas d'IntelliSense• Pas de vérification en design time• Mais si on utilise le compilateur de JScript.net on peut déceler l'essentiel des problèmes syntaxiques
…Les aspects négatifs…
… Absence ou pauvreté de l'outillage…
• Debug plus difficile• FireBug et VisualStudio permettent néanmoins de faire beaucoup de choses
…Les aspects négatifs…
… Absence ou pauvreté de l'outillage
• Refactoring : quasi impossible• Navigation dans le code :• Go to definition• Find All References…• quasi impossible
…Les aspects négatifs…
Les aspects bâclés du langage…
• Les variables globales• Syntaxe du langage• null, undefined, false, zéro et
chaine vide• dans les conditions : valent tous
faux • null == undefined
…Les aspects négatifs…
… Les aspects bâclés du langage…
• Incohérences du langage• Si T est un tableau• T.constructor == Array• typeof T== 'object'
…Les aspects négatifs…
… Les aspects bâclés du langage• Incohérences du langage• typeof NaN == 'number'
•typeof null == 'object'•0 == '0', false != 'false', false == '0'
Les aspects positifsQui font que c'est un langage de maître
Les aspects positifs…
JSON JavaScript Object Notation Syntaxe de représentation de données
qui contrairement à XML and Co ne nécessite pas des études supérieures
Possibilité de créer ses propres schémas De réutilisation D'extension D'assemblage et d'organisation
… JSON en deux slides…
… JSON en deux slides…
… Les aspects positifs…
Exemple : var p = { Nom : 'toto',
Prénoms : ['Jean', 'Alain'],
Taille : 1.52,
DateNaissance :
Salarié : true };
new Date (1980, 0, 12),
Les aspects positifs…
Si p est un objet ayant un champ Nom
p.Nom = 'toto';
Et
p [‘Nom'] = 'toto';
Expriment la même chose
… Les aspects positifs…
Si Ajouter est une fonction avec deux paramètres a et b sur un objet calc
calc .Ajouter ( 3, 4);
calc ['Ajouter'] ( 3, 4);
calc ['Ajouter'].apply (null, [3, 4]);
Expriment la même chose
… Les aspects positifs…
JavaScript peut s'enrichir avec 4 lignes de code par la notion de méthode d'extension de C# 3.0. Les voici :
Function.prototype.addMethod = function (name, f) {
if(!this.prototype[name]) this.prototype[name] = f;
return this;};
… Les aspects positifs…
Utilisation de addMethod :
Number.addMethod ('integer', function() {
return Math [this < 0 ? 'ceil' : 'floor'] (this);
});
var i = (3.16).integer ();
… Les aspects positifs…
A la mode Le web moderne ne peut pas s’en passer HTML5 Mobilité
De plus en plus d’outillage TypeScript JsFiddle FireBug…
… Les aspects positifs
De plus en plus de bibliothèques JQuery… Google, Bing… Facebook, Twitter… Raphaël, Processing, Bonsaï… MicroJS.com , des centaines d’autres…
Les DOMs HTML et le CSSLeurs problèmes majeurs vis-à-vis de JavaScript
Les DOMs HTML et le CSS…
Les champs et leur caractère readonly
Les méthodes et leurs arguments
Les événements
Leur nom et leurs paramètres
Le mécanisme d'abonnement
Varient plus ou moins
D'un browser à l'autre
D'une version à l'autre
D'un OS à l'autre
… Les DOMs HTML et le CSS
Si on se restreint aux browsers modernes :
FF (3 et plus), IE (6, 7, 8, 9, 10), Safari, Chrome…
Avec une centaine de lignes de JavaScript on
masque la quasi-totalité des différences
Pour le reste, notamment le CSS on peut
sans trop de problème se limiter au
dénominateur commun
JavaScript de prèsLes détails de la syntaxe
Les instructionsVariables, expressions, opérateurs , conditions, et boucles
Variables : vocabulaire et exemples
Déclaration var x; // x est déclaré mais vaut undefined
Déclaration et initialisation var y = 5; // y est déclaré et vaut 5
var s = ‘toto’; // s est déclaré et vaut ‘toto’
var a = 0, b = 1, c = 3.14, d = true, e = null;
Variables : vocabulaire et exemples
Déclaration et affectation var z, t; // z et t sont déclarés
z = 14; // affectation de la valeur 14 à z
t = z; // affectation de la valeur de z à t
t = z = 32; // affectation de 32 à z puis à t
Expressions et opérateurs…
Exemples : Opérateur binaires :▪ + (arithmétique addition)▪ > (comparaison supérieur à)▪ = (affectation)
Expression binaires :▪ 3 + 5 // ça vaut 8▪ 3 > 5 // ça vaut false▪ pi = 3.14 // ça vaut 3.14
Expressions et opérateurs…
Arithmétique
Binaire : +, -, *, /, %
Unaire : ++, --
Comparaison
>, <, >=, <=, !=, ==, !==, ===
Logiques
Binaire : Et (&&), Ou (||)
Unaire : Non (!)
… Expressions et opérateurs…
Numériques
AND(&), OR(|), Not(~), XOR(^), <<, >>, >>>
Affectation
=
+=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>=, >>>=
A op= B est équivalent à A = A op B
A += 3 est équivalent à A = A + 3
… Expressions et opérateurs
Conditionnel
Operateur ternaire :
▪ ? :
Expression ternaire :
▪ a ? 3 : 7 // vaut 3 si a est ‘vraie’ 7 sinon
Vérité des expressions en JavaScript
Faux : false, undefined, null, NaN,
0 (zéro), ‘’ (chaine vide)
Vrai: tout le reste
Conditions : if
if (expressionA) {
// bloc d’instructions : A
} else if (expressionB) {
// bloc d’instructions : B
} else if (expressionC) {
// bloc d’instructions : C
} else {
// instructions : D}
Conditions : switch
switch (expression) {
case expressionA : // bloc d’instructions : A break;
case expressionB : // bloc d’instructions : B break;
case default: // bloc d’instructions : C break;}
Boucles : while
while(expression) { // bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle}
Boucles : do while
do { // bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle
} while (expression);
Boucles : for
for (var n = 0; n < 5; n++) { // bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle}
TypesNumérique, chaine de caractères, booléen, date, objet, tableau, fonctions…
Types
En JavaScript tout est objet Donc objet ne veut pas dire grand-chose
! Il y a des objets simples comme ▪ les nombres, exemples : 712 ou 3.14▪ les nombres booléens : true, false
Des objets plus complexes comme▪ Les chaines de caractères▪ Les dates
Types
Les tableaux sont des objets qui permettent de ranger d’autres objets et y accéder par un index entier
On peut avoir des objets complexes qui permettent de réunir d’autres objets et y accéder par un nom.
Les fonctions sont des objets▪ Qui peuvent servir à créer d’autres objets▪ Qui peuvent servir à exécuter du code
Types et opérateur typeofvar a = 5; // typeof a === ‘number’var b = ‘toto’; // typeof b === ‘string’var c = true; // typeof c === ‘boolean’var d = new Date (); // typeof d === ‘object’var e = { }; // typeof e === ‘object’var f = [ ]; // typeof f === ‘object’var g = window.alert; // typeof g === ‘function’var h = /^a\d+/; // typeof h === ‘object’
a.constructor === Numberb.constructor === Stringc.constructor === Booleand.constructor === Datee.constructor === Objectf.constructor === Arrayg.constructor === Functionh.constructor === RegExp
true
Tableaux par l’exemple
var T1 = []; // T1 un tableau vide // T1.length vaut 0
T1.push (‘toto’); // T1.length vaut 1 // T1[0] vaut ‘toto’
// T1[3] vaut undefined
var T2 = [4, 17]; // T2 un tableau à deux éléments // T2.length vaut 2
// T2[0] vaut 4 et T2[1] vaut 17
T2 [3] = 2013; // T2.length vaut 4 // T2[3] vaut 2013 // T2[2] vaut undefined // 2 in T2 vaut false // 3 in T2 vaut true
Objets structurés par l’exemplevar O1 = {}; // O1 un objet vide
O1.Nom = ‘Duval’; // O1 a un champs ‘Nom’O1[‘Prénom’] = ‘toto’; // O1 aun champs ‘Prénom’ de plus // O1.Nom vaut ‘Duval’ // O1.Prénom vaut ‘toto’ // O1.Age vaut undefined // Nom in O1 vaut true // Age in O1 vaut false
O1.Age = 17; // O1.Age vaut maintenant 17delete O1.Prénom; // O1.Prénom vaut undefined // Age in O1 vaut true // Prénom in O1 vaut false
Objets et boucles : for in
var O2 = { Prénom : ‘toto’, Nom : ‘Duval’, Age = 17 };
// ici ça bouclera trois fois // 1 : p vaut ‘Prénom’ et O2[p] vaut ‘toto’// 2 : p vaut ‘Nom’ et O2[p] vaut ‘Duval’// 3 : p vaut ‘Age’ et O2[p] vaut 17for (var p in O2) { // bloc d’instructions
// continue; permet de passer à l’itération suivante
// break; permet de sortir de la boucle}
Exceptions : comment les attraper
…try { // instructions A
} catch (x) {
// instructions B
} finally {
// instructions C}
// instructions D
Sans Exception
dans A
Avec Exception
dans A
A (complet) A (partiel)
C B
D C
D
Exceptions : comment les lever
Si on se trouve dans une situation incohérente, exceptionnelle, qui ne devrait pas arriver
Alors il faut lever une exception
if (incoherence) {
throw { Code: 45, Message : ‘Description’ };
}
Fonctionsvariables, portée, arguments, this, modes d’appel, constructor
Fonctions : portée
// La fonction F avec : // deux paramètres a et b// deux variables locales c et d// et une fonction locale carre
function F (a, b) {
var c = 10; function carre (x) { return x * x; }
var d = 2;
return a * carre (c) + d * b;}
d
c
carre
Fonctions : appel
// La fonction F avec deux paramètres a et b
// ici a vaut 2 et b vaut 5var r1 = F(2, 5);
// ici a vaut 3 et b vaut undefined var r2 = F(3);
// ici a vaut 4 et b vaut 5 et 6 est ignoréevar r2 = F(4, 5, 6);
var nbParametres = F.length; // ici 2
Fonctions : arguments
// La fonction G avec deux paramètres a et b
function G (a, b) {
var count = arguments.length; var v1 = arguments[0]; var v2 = arguments[1]; var v3 = arguments[2];}
// Les appels a b count v1 v2 v3
G (10); // 10 * 1 10 * *G (20, 30); // 20 30 2 20 30 *G (30, 40, 50); // 30 40 3 30 40 50 // * = undefined
Fonctions ou méthodes
Orienté Objet Exemple et vocabulaire ▪ toLowerCase () est une méthode des objets
de type chaine de caractères.▪ Au lieu d’appeler une fonction et lui passer la
chaine en paramètre ▪ On prend la chaine et on appelle dessus une
méthode.
var majuscules = ‘TOTO’;var minuscules = majuscules.toLowerCase ();
Fonctions this
A l’intérieur d’une méthode, this représente l’objet ou le contexte sur lequel la méthode est appelée.
var obj = {}; // voici un objet obj.V = 5; // on lui ajoute un champs V qui vaut 5
// on lui ajoute une méthode Inc qui incrémente V
obj.Inc = function () { this.V = this.V + 1; }
// on appelle la méthode Inc
obj.Inc (); // maintenant obj.V vaut 6
Fonctions this
// La fonction H incrémente le champs V d’un objetfunction H () { this.V = this.V + 1; }
// o1 un objet avec deux champs V et W et une méthode Incvar o1 = { V : 5, W : 6, Inc : H }; // o2 un objet avec un champ V et une méthode Incvar o2 = { V : 2, Inc : H };
o1.Inc (); // appel de H avec this === o1 o1.V vaut 6o2.Inc (); // appel de H avec this === o2 o2.V vaut 3
H.call (o1); // appel de H avec this === o1 o1.V vaut 7H.call (o2); // appel de H avec this === o2 o2.V vaut 4
Fonctions constructor
// Appelé à travers new la fonction Point construit // un objet avec deux champs X et Y
function Point (x, y) { this.X = x; this.Y = y; }
// ici un objet et construit// la fonction Point est appelée avec this === l’objet// l’objet est retourné.
var p = new Point (0, 0);
Fonctions constructor
function distance (p1, p2) {
var dx = p2.X – p1.X; var dy = p2.Y – p1.Y;
return Math.sqrt (dx * dx + dy * dy);}
var a = new Point (1, 2);var b = new Point (4, 6);
var d = distance (a, b); // d vaut 5
Fonctions call et apply
function somme() {
var s = 0; for (var n = 0; n < arguments.length; n++) {
s += arguments [n]; } return s;}
var zero = somme ();var dix = somme (1, 2, 3, 4);var cent = somme.call (null, 10, 20, 30, 40);var mille = somme.apply(null, [100, 200, 300, 400]);
Fonctions : styles d’appels
Fonctions nommées Par leur nom
Fonction anonymes À travers une variable
Fonction constructeur À travers new
Pour contrôler le contexte À travers apply () ou call ()
Fonction : récursion
Une fonction peut s’appeler elle-même Attention il lui faut une condition d’arrêt
et la convergence vers cette condition Exemple scolaire: Fibonaccifunction fibonacci (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1); }
Fonctions : closure
Les closure sont des fonctions à mémoire
Contrairement à la pile qui est nettoyée à la
sortie d’une fonction, le closure est retenu
tant qu’une fonction existe.
Une fonction, quand elle est créée, a accès aux
variables qui sont dans sa portée
La notion de closure permet à une fonction de
retenir la visibilité à ses variables
Fonctions : closure
function Entiers() {
var n = 0;
var f = function () { return n++; };
return f;}
Exemple : générateur des entiers
Fonctions : closure
var g1 = Entiers();
var a1 = g1 (); // a1 vaut 0;var a2 = g1 (); // a2 vaut 1;var a3 = g1 (); // a3 vaut 2;
var g2 = Entiers();
var b1 = g2 (); // b1 vaut 0;var b2 = g2 (); // b2 vaut 1;var b3 = g2 (); // b3 vaut 2;
Usage
Fonctions : closure
Exemple : le problème 3 N + 1 ?
function Syracuse(n) {
return function () {
if (n % 2 === 0) n /= 2; else n *= 3, n += 1; return n; }; }
Fonctions : closure
Question : que valent a, b, c, d et e ?
var f = Syracuse(17);
var a = f(); var b = f(); var c = f();var d = f();var e = f();
Fonctions : closure
Fibonacci non récursive par closure
function Fibonacci() {
var a = 0, b = 1;
return function () {
var r = a + b; return a = b, b = r; }; }
Fonctions de fonction
Higer order functions Dans un univers fonctionnel tout est
fonction JavaScript peut être considéré comme un
langage fonctionnel parce qu’en JavaScript les fonctions sont des objets
Elles peuvent servir en tant que paramètre à d’autres fonctions
Les fonctions peuvent transformer des fonctions
Fonctions de fonction
function Carre (f) {
return function (x) { var r = f (x); return r * r; };}
var carreDesEntiers = Carre (Entiers ());
var a = carreDesEntiers (); // a vaut 0;var b = carreDesEntiers (); // b vaut 1;var c = carreDesEntiers (); // c vaut 4;var d = carreDesEntiers (); // d vaut 9;var e = carreDesEntiers (); // e vaut 16;
Fonction : memoize
Memoize : technique de création de cache de réponse
function memoize(f) {
return function () {
f.values = f.values || {};
var p = arguments[0];
if (p in f.values) return f.values[p]; else return f.values[p] = f.apply(null, arguments); };}
Fonction : memoize
Utilisation pour Fibonacci récursive
function fibonacci (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1); }
var memoizedFibo = memoize (fibonacci);
var fibo100 = memoizedFibo (100); // est très lent !
Fonction : anonyme
Exemple : Fibonacci recursive anonyme
var fibonacci = function (n) {
if (n < 2) return 1;
return fibonacci (n – 2) + fibonacci (n – 1); }
fibonacci = memoize (fibonacci); // va beaucoup plus vite
Fonction : partial
Transformer une fonction de N variables en une fonction de M variables (avec M < N) en fixant certains valeurs des variables
Fonction : partial
function partial(f) {
var defArgs = []; for (var n = 1; n < arguments.length; n++) defArgs.push(arguments[n]);
return function () {
var args = [];
for (var i = 0, j = 0; i < defArgs.length || j < arguments.length; i++) {
args.push((defArgs[i] === undefined) ? arguments[j++] : defArgs[i]); }
return f.apply(null, args); };}
Fonction : partial
function F (a, b) { return 100 * a + b; }
var F1 = partial (F, undefined, 3); // F1 (x) === F(x, 3)var F2 = partial (F, 5); // F2 (x) === F(5, x)
var v1 = F1 (5); // F (5, 3)var v2 = F2 (3); // F (5, 3)
Fonction : immédiates
var GMelies = (function () {
// Etat global de votre appli
return {
Main : function () {
// Point d’entrée de votre appli
} };
}) ();
Fonctions : closure et immédiates
Organiser le code Encapsulation
Approche boîte noire Cacher les complexités
Extension Cache
Adaptation Cross Browser
Fonctions : timer
Une fonction qui déclenche un appel d’une autre fonction à intervalles réguliers setInterval (action, millisecondes) clearInterval (timer)
Une fonction qui déclenche un appel d’une autre fonction au bout d’un certain délai setTimeout (action, millisecondes) clearTimeout (timer)
ÉvénementsDOM IE et W3C
Événements : DOM
Première approche Utiliser les onxxx des éléments du DOM
HTML▪ onclick▪ onmouse (down, move, up, over, out)▪ onkey (down, up, press)▪ …
Plusieurs problèmes▪ Abonnement multiples▪ Abonnement, désabonnement dynamique
Événements : DOM
Deuxième approche Abonnement et désabonnement
dynamique par API JavaScript. Problèmes▪ Différence ▪ de comportement entre IE et les autres browsers▪ API différent ▪ Noms d’événements parfois différents
▪ Mais réglable facilement
Événements : DOM
Façon IE attachEvent detachEvent Nom des événements = onxxx Pas d’argument d’événement mais window.event▪ Pas de preventDefault▪ Mais : window.event.returnValue = false
▪ Pas de stopPropagation▪ Mais : window.event.cancelBubble = true
▪ Pas de target mais ▪ Mais : window.event.srcElement
Événements : DOM
Façon W3C addEventListener removeEventListener Un argument pour le gestionnaire de
l’événement▪ Avec un preventDefault▪ Avec un stopPropagation▪ Avec un target
Événements : DOM
Adaptateur de l’argument de l’événement pour IE
function xbEvent(e) {
if (e) {
e.preventDefault = function() { e.returnValue = false; } e.stopPropagation = function() { e.cancelBubble = true; } e.target = e.srcElement; }
return e;}
Événements : DOM
Abonnement façon IE
function ieAddHandler(element, eventName, handler) {
element.attachEvent('on' + eventName, function () {
handler(element, xbEvent(window.event)); });}
Événements : DOM
Abonnement façon W3C
function w3cAddHandler(element, eventName, handler) {
element.addEventListener(eventName, function (e) {
handler(element, e);
}, false);}
Événements : DOM
Abonnement cross browser
var addHandler = (function () {
function xbEvent(e) { … } function ieAddHandler (element, eventName, handler) { … } function w3cAddHandler (element, eventName, handler) { … } return (window.addEventListener) ? w3cAddHandler : ieAddHandler;}) ();
FonctionsEvaluation dynamique
Fonctions : eval
La fonction eval permet d’évaluer du JavaScript. Quelques exemples :
var function testEval() {
var a = 16; var b = eval ('a + 5'); // b vaut 21
eval ('a = 5'); // a vaut 5 maintenant
// évaluation de JSON o.Nom vaut 'Toto' et o.Age vaut 22 var o = eval ("({Nom:'Toto', Age: 22})"); }
Fonctions : Function contructor
Le constructeur des fonctions Function permet de construire une fonction ! Exemple :
var ajouter = new Function ('a', 'b', 'return a + b;');
var sept = ajouter (3, 4);
Les Fonctions et leur prototypes
Fonctions et leur prototypes
En JavaScript chaque fonction à un prototype Le prototype est un objet Par défaut le prototype est l’objet vide Le prototype peut être défini par
programme En JavaScript quand on accède à un
champs d’un objet On cherche le champ d’abord sur l’objet Puis sur le prototype du constructeur de
l’objet
Fonctions et leur prototypes
function Point (x, y) { this.X = x; this.Y = y; }
// distance est une méthode du prototype de Point Point.prototype.distance = function (p) {
var dx = this.X - p.X; var dy = this.Y - p.Y;
return Math.sqrt(dx * dx + dy * dy);};
// le constructeur de p1 et p2 c’est la fonction Pointvar p1 = new Point (1, 1);var p2 = new Point (4, 5);
var d = p1.distance (p2); // ici d vaut 5
Fonctions et leur prototypesfunction Rectangle(largeur, longueur) { this.Largeur = largeur; this.Longueur = longueur; }
Rectangle.prototype.Surface = function () { return this.Largeur * this.Longueur; }
Rectangle.prototype.Perimetre = function () { return 2 * (this.Largeur + this.Longueur); }
function Carre (cote) { Rectangle.call (this, cote, cote); }
Carre.prototype = new Rectangle ();
Fonctions et leur prototypesvar c = new Carre (5); // c.Largeur vaut 5 // c.Longueur vaut 5var s = c.Surface (); // s vaut 25var p = c.Perimetre (); // p vaut 20
c.constructor === Carre // truec.constructor === Rectangle // false
c instanceof Carre // truec instanceof Rectangle // true
'Surface' in c // truec.hasOwnProperty ('Surface') // false
Fonctions et leur prototypes(function () {
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (action, context) {
for (var i = 0; i < this.length; i++) {
action.call(context || null, this[i], i, this); }; }})();
/* à lire : http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-tosubclass-an-array/ */
Fonctions et leur prototypesFunction.prototype.partial = function () {
var f = this; var defArgs = []; for (var n = 1; n < arguments.length; n++) defArgs.push(arguments[n]);
return function () {
var args = [];
for (var i = 0, j = 0; i < defArgs.length || j < arguments.length; i++) {
args.push((defArgs[i] === undefined) ? arguments[j++] : defArgs[i]); }
return f.apply(null, args); };}
Fonctions et leur prototypesfunction F (a, b) { return 100 * a + b; }
var F1 = F.partial (undefined, 3); // F1 (x) === F(x, 3)var F2 = F.partial (5); // F2 (x) === F(5, x)
var v1 = F1 (5); // F (5, 3)var v2 = F2 (3); // F (5, 3)
Les expressions régulièresRegExp
RegExp
Des Exemplesvar tel = /^(\d{2}(\.|\s)?){5}$/
tel.test ('0102030405') // vaut truetel.test ('010203040') // vaut falsetel.test ('01.02.03.04.05') // vaut truetel.test ('01 02 03 04 05') // vaut truetel.test ('01.02 03 04 05') // vaut true
var tel2 = new RegExp ('^\d{2}(\.|\s)?(\d{2}\1?){4}$');
tel2.test ('01.02.03.04.05') // vaut truetel2.test ('01 02 03 04 05') // vaut truetel2.test ('01.02 03 04 05') // vaut false
RegExp
Des Exemples
var s = 'a, b, c, d , e, f';
var t1 = s.split (',');
var t2 = s.split(/\s*,\s*/);
function trim(s) { return (s || "").replace(/^\s+|\s+$/g, ""); }
RegExp
Des Exemplesvar cp = /\b(\d{2})(\d{3})?\b/;
var m1 = cp.exec ('75004'); // m1[0] = '75004' // m1[1] = '75' // m1[2] = '004' // m1.index vaut 0 // m1.lastIndex vaut 5
var m2 = cp.exec ('75'); // m2[0] = '75' // m2[1] = '75' // m2[2] = '' // m2.index vaut 0 // m2.lastIndex vaut 2
var m3 = cp.exec ('7'); // m3 vaut null
AJAXXMLHttpRequest
Ajax
Inventé par Microsoft en 1998 Outlook Web Access Intégré à IE5 en 1999
Démocratisé par Google GMail 2004 Maps 2005
Terme utilisé la première 18 février 2005 Ajax: A New Approach to Web Applications
W3C : 6 avril 2006 le premier document visant la standardisation
Ajax
AJAX (Asynchronus JAvascript and XML) Asynchronus : oui mais pas forcément JavaScript : oui XML : ? ▪ Ou JSON (JavaScript Object Notation)
Applications modern HTML5 Plus de place pour du JavaScript SPA (Single Page Application)
Ajax
Les échanges
Serveur
BrowserX
ML
HT
TP
DO
M JavaScript
Essentiellement des DonnéesMais aussi du
HTML , CSS et JSDemandé par l’application
2
HTML, CSS, JavasSriptDemandé par le Browser
1
Ajax
Le code cross browserfunction getHttpRequest() {
if (typeof XMLHttpRequest === 'undefined') {
XMLHttpRequest = function () {
var isIE5 = /MSIE 5/.test (navigator.userAgent); var appId = isIE5 ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
return new ActiveXObject(appId); }; }
return new XMLHttpRequest();}
Ajax
var request = getHttpRequest();var url = '…';var async = false; // ou truevar method = 'GET'; // ou 'POST‘var postData = null;
request.open(method, url, async);
request.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function () { };
request.send(postData); // postData !== null pour ‘POST’
Ajax
request.readyState // 4 -> ResponseReady
request.getResponseHeader('content-type');
request.responseXML // si la réponse c’est du XMLrequest.responseText // si la réponse c’est du JSON
request.statusTextrequest.status
Ajax
function successful(r) {
var success = false; try {
success = (!r.status && location.protocol === 'file:') || ((r.status >= 200) && (r.status < 300)) || (r.status === 304) || (navigator.userAgent.indexOf('Safari') >= 0) && (typeof r.status === 'undefined');
} catch (e) { }
return success;}