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