Programmation Web avec JavaScript

Olivier Le Goaerolivier.legoaer@univ-pau.fr

Plan du module

Avant-proposLe noyau JavaScript JavaScript cot Client Web

Le BOM Le DOM Ajax

JavaScript cot Serveur Web Node.js (en cours de rdaction)

Avant-propos

La galaxie JavaScript

Noyau JS

Webapplication

Webapplication

Server-side(Node.js)

Adobe application

Adobe application

OpenOffice application

(macros)

OpenOffice application

(macros)

Client-side(BOM/DOM)

Flash(ActionScript) Photoshop,

Reader...(scripting)

NoSQL(JSON query,Map-Reduce)

NoSQL(JSON query,Map-Reduce)

Google ApplicationGoogle

Application

Spreadsheets(macros)

Chrome(plugin)

......

Quelques gnralits sur JS

Langage interprt (i.e. script) Ncessite un interprteur (versus. un compilateur)

Langage orient objet Langage "prototype"

Confusion frquente avec Java Aucun lien entre ces 2 langages !

Anciennement appel ECMAScript Standardis par ECMA (European Computer

Manufacturers Association)

JS, une technologie client

Serveur Webwww.twitter.comServeur Web

www.twitter.com

Client Web : Chrome

Requte http

Rponse http

Execution sur le serveur(ASP, PHP, JSP, ...)

Execution sur le client(HTML, CSS, JavaScript, ...)

1

3

24

http://www.twitter.com/http://www.twitter.com/

Navigateurs et JavaScript

Chaque navigateur intgre un interprteur de JS, plus ou moins performant SpiderMonkey (Firefox), V8 (Google Chrome), Chakra

(Internet Explorer), SquirrelFish (Safari)Permet un niveau d'interactivit plus riche

qu'avec de l'HTML simple Certains traitements simples (ex: contrle des saisies

utilisateur) peuvent tre raliss par le navigateur plutt que par le serveur

Un document HTML/CSS charg dans le navigateur peut tre "remani" dynamiquement !

Dbugger en JavaScript

Directement dans un navigateur Firebug (plugin pour Firefox et Safari) Console Dveloppeur (Chrome, IE, Safari)

Dans un environnement de dveloppement Javascript Debug Toolkit : plugin pour Eclipse

Pour dbugger sur Internet Explorer, Firefox, Safari, Chrome et Opera

Activer le mode strict (c-a-d scuris) Directive "use strict" en prambule (JS 1.8.5 et +) Vous oblige dclarer vos variables, entre autres...

Console dveloppeur

Frameworks JavaScript

DOMDOM

jQueryDojo

MooToolsAngularJSPrototypeZepto.js

DOMDOM

jQueryDojo

MooToolsAngularJSPrototypeZepto.js

UIUI

jQuery Mobilebootstrap

Ext JSScript.aculo.us

Ember.jsBackbone.js

UIUI

jQuery Mobilebootstrap

Ext JSScript.aculo.us

Ember.jsBackbone.js

2D/3D2D/3D

three.jsMatters.js

Pixi.jsBabylon.js

Voxel.js

2D/3D2D/3D

three.jsMatters.js

Pixi.jsBabylon.js

Voxel.js

Les alternatives JavaScript

Le concurrent dchu : VB Script (Microsoft) Utilis l'poque de l'hgmonie d'Internet Explorer.

N'est interprt que par ce dernier.Les ersatz compils en JavaScript

DART(Google), Script#, CoffeeScript, JSX, JavaScript Harmony, TypeScript (Microsoft), ...

Le prtendant srieux : DART (Google) Actuellement compil en JavaScript mais vise terme

supplanter JavaScript Chrome sera logiquement le 1er navigateur supporter

nativement des scripts DART

Les alternatives JavaScript

Le concurrent dchu : VB Script (Microsoft) Utilis l'poque de l'hgmonie d'Internet Explorer.

N'est interprt que par ce dernier.Les ersatz compils en JavaScript

DART(Google), Script#, CoffeeScript, JSX, JavaScript Harmony, TypeScript (Microsoft), ...

Le prtendant srieux : DART (Google) Actuellement compil en JavaScript mais vise terme

supplanter JavaScript Chrome sera logiquement le 1er navigateur supporter

nativement des scripts DART

Le noyau JavaScript

Aspects lexicaux

Chaque instruction est spare par un ; Mais pas obligatoire. Le retour la ligne suffit.

Commentaires Par ligne : // Ceci est un commentaire Par bloc : /* Ceci est un

commentaire */

Conventions Noms de variables et fonctions crits en CamelCase Noms de constantes crits en majuscule

Dclaration et typage

Dclaration (optionnelle) Variables avec le mot cl var Constantes avec le mot cl const Une variable peut tre dclare aprs avoir t utilise

(hoisting)

Typage dynamique Implicite et peut changer en cours d'excution...

var aire; const PI = 3.14;rayon = 45.761;aire = PI * rayon^2;var rayon; //hoisting

Types primitifs

Entier var annee = 2014;

Rel var prix_ttc = 45.789; //il s'agit d'un point, pas d'une virgule

Chane de caractre var message="Gangnam style"; var message='Gangnam style';

Boolen var estSympa=true;

Structures de contrles

Condition if (expr) { ... } else { ... }

Boucle while (expr) { ... } do { ... } while (expr);

Slection switch(expr) { case n:...}

Itration for (expr1; expr2; expr3) { ... } for (value in object) { ... } for each (key in object) { ... }

Enchanement with(object) { key1...}

Oprateurs arithmtiques

Oprateurs binaires

Oprateurs unaires

Symbole Fonction Champs d'application+ addition entiers ou rels

+ concatnation chanes de caractres

- soustraction entiers ou rels

* multiplication entiers ou rels

/ division relle (jamais entire) entiers ou rels

% reste de la division entire entiers

Symbole Fonction Champs d'application+ plus entiers ou rels

- moins entiers ou rels

++ pr- ou post-incrmentation entiers ou rels

-- pr- ou post-dcrmentation entiers ou rels

Oprateurs logiques

Oprateurs binaires

Oprateurs unaires

Oprateurs relationnelsSymbole Fonction

&& ET logique

|| OU logique

Symbole Fonction! NON logique

Symbole Fonction

> suprieur

>= Suprieur ou gal

< infrieur

Fonction par dclaration

La dclaration se fait l'aide du mot cl function function name(param1, param2) { ...; return value; } Peut retourner une valeur (return) ou non

Diffrencie les procdures des "vraies" fonctionsL'appel se fait de manire classique

Liaison des arguments avec les paramtres, si il y en a.Le noyau JavaScript possde dj une

bibliothque de fonctions prdfinies eval(), isNaN(), parseInt(), encodeURI(), ...

Porte et vie des variables

Variable locale Une variable dclare l'interieur d'une fonction est

seulement accessible dans cette fonctionVariable globale

Une variable dclare en dehors de toute fonction est accessible en tout point du script et de la page

Cycle de vie d'une variable Une variable locale est supprime lorsque la fonction

se termine Une variale globale est supprime la fermeture de la

page

Exemple illustratif

var price = 12.56; //variable globale, avec une valeur initiale

function getLocalTVA(country) { var tva; //variable locale la fonction. Vaut undefined cet instant if (country == 'FR') { tva = 19.6; } else if (country == 'EN') { tva = 20.0; } return tva;}

function applyFrenchTax() { price = price * (1 + getLocalTVA('FR') / 100.0); //appel de la fonction #1} //qui agit sur la variable globale

applyFrenchTax(); //appel de la fonction #2

console.log(price);

Fonction par expression

JavaScript permet d'assigner des (pointeurs sur) fonctions des variables Fonctions anonymes dont l'appel se fait au travers des

variables qui les rfrencent

var messageBox = function () { console.log("Justin Bieber"); };var messageBox2 = messageBox;var helloWorld = function (people) { console.log("Hello " + people + "!"); };messageBox = function () { console.log("Selena Gomez"); };

(function (n) { console.log(n*-1); })(48); //Fonction anonyme auto-appele

messageBox2(); //Quel est le rsultat de cet appel ?helloWorld("Olivier Le Goaer"); //Quel est le rsultat de cet appel ?

Exceptions Encadrer les portions de code susceptibles de poser

problme et traiter l'erreur le cas chant.

Bloc try/catch

try { //Run some code here }catch(err) { //Handle errors here }

Traitements des erreurs

Orientation objet Beaucoup de chose dans le langage est considr

comme objet (dont les fonctions !)Paradigme objet

Un objet est dcrit par ses proprits et ses mthodes Accs aux proprits et mthodes par un point '.' Auto-rfrence avec this Visibilit des proprits et mthodes : public/priv

Absence du concept de classe On ne peut pas dfinir de classes d'objets

Programmation Objet ?

Boolean var estSympa = new Boolean(true);

Number (entiers et rels) var annee = new Number(2014);

Array var saveurs_yop = new Array[2]; saveurs_yop[0] = "banane"; saveurs_yop[1]="kiwi";

String var message = new String("Gangnam style");

typeof(nom_variable) permet de connatre le type de la variable

Objets primitifs

var p1=new Object();p1.firstname="John";p1.age=50;p1.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }

console.log(p1.toString()); //affichera 'John a 50 ans'

Cration directe d'objet

Utilisation d'un constructeur d'objetfunction Person(_firstname, _age) { this.firstname = _firstname; //this => public, private sinon this.age = _age; this.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }}

var p1 = new Person("John", 50);console.log(p1.toString()); //affichera 'John a 50 ans'

2 faons de crer ses objets

A dfaut de classe... Duplication des mthodes entre objets semblables !

Peu performant : empreinte mmoire accrue Il faudrait un mcanisme pour partager les mthodes

...on utilise un "prototype" Proprit des objets du type spcial Function Le contenu d'un prototype (i.e. d'autres fonctions) peut

tre rutilis par les fonctions entre elles L'hritage devient possible Redfinition et surcharge de mthode supportes

De la classe au prototype

function Child(_firstname, _age) { this.firstname = _firstname; //this => public, private sinon this.age = _age;

this.pleurer = function() { console.log('Je pleure'); } this.manger = function() { console.log('Je mange'); }}

Child.prototype = new Person(); //ou = Object.create(Person.prototype)

var c1 = new Child("Justin", 3);console.log(c1.toString()); //accde une mthode du prototype de Person (hritage !)c1.pleurer(); //accde une mthode du prototype de Childdelete c1; //destruction de l'objet

Prototype : exemple

Fermeture lexicale (closure)

Fonction dfinie au sein d'une autre fonction La fonction interne (inner) accs au contexte de la

fonction externe (outer) Brise le principe habituel de porte

Dj vu avec la fonction constructeur d'un objet Les mthodes ont bien accs aux variables this.*

La fonction externe renvoie une rfrence sur la fonction interne Autrement dit, la fonction renvoie une autre fonction en

tenant compte d'un contexte prtablit

Closure : exemple de la TVA

function setTVA(_tva) { const _rate = _tva / 100.0; function apply(_price) {

return _price * (1 + _rate); } return apply; // retourne une rfrence sur l'objet fonction apply()}

var TTCconso = setTVA(19.6); //TVA des produits de consommationvar TTCculture = setTVA(7.7); //TVA des produits culturels

//Me voil avec 2 fonctions parfaitement intelligibles, // au lieu d'une seule fonction 2 paramtres (la catgorie, le taux)var totalPanier = TTCconso(109.56) + TTCconso(25.0) + TTCculture(24.3);console.log('Vous devez payer :' + totalPanier + ' ');

JSON

JavaScript Object Notation (JSON) Format lger et vraiment trs simple

Il n'existe que 2 concepts : objets { } et tableaux [ ] Est manipulable nativement par JavaScript !

Usages Sert stocker des donnes (ex: fichier de configuration) Sert changer des donnes travers le rseau, entre

clients et serveurs (ex: srialisation/dsrialisation) Sert dcrire un objet JS mais sous une forme

textuelle dans le code source

JSON : document vs. code

{ "fruits": [ { "kiwis": 3, "mangues": 4, "pommes": null }, { "panier": true }, ], "legumes": { "patates": "amandine", "figues": "de barbarie", "poireaux": false }}

var courses = { "fruits": [ { "kiwis": 3, "mangues": 4, "pommes": null }, { "panier": true }, ], "legumes": { "patates": "amandine", "figues": "de barbarie", "poireaux": false }};

if (courses.legumes.poireaux) {console.log("j'ai des poireaux !");

}courses.json

processCourses.js

JavaScript cot Client Web

Sous-programmes JS

Le code des sous-programmes se situe au niveau de l'entte d'un document Html

Soit directement

Soit par inclusion d'un fichier externe

//ici vos dfinitions de fonctions/procdures JS//...

Programme principal JS

Le code du programme principal se situe dans le corps d'un document Html C-a-d les portions de code qui ont vocation appeler

les sous-programmes

Soit dans une balise spciale

Soit via des vnements (voir diapo suivante)

var price = 6.78;

doSomething(price); //Appel d'un sous-programme

Evnements HTMLvnement lment(s) html concern(s)onLoad BODY, FRAMESET, OBJECT

onUnload BODY et FRAMESET

onError IMG, OBJECT, BODY et FRAMESET

onAbort BODY et FRAMESET

onSelect INPUT et TEXTAREA

onChange INPUT, SELECT et TEXTAREA

onSubmit FORM

onReset FORM

onFocus LABEL, INPUT, SELECT, TEXTAREA et BUTTON

onBlur LABEL, INPUT, SELECT, TEXTAREA et BUTTON

onResize BODY

onScroll BODY

onClick Quasiment tout

onMouseOver Quasiment tout

onContextMenu Quasiment tout

Directement l'aide d'attributs ddis (inline)

Ou mise en place d'couteurs d'vnement

...

var inputTag = document.getElementById('userName'); //navigation DOM (voir suite du cours) inputTag.addEventListener('blur', doSomething(), false); inputTag.addEventListener('focus', doSomethingElse(), false);

...

Deux stratgies possibles

Non intrusif :ne touche

pas au corpsdu document

Evnements et standards

Le navigateur implmente des comportements par dfaut pour les vnements Le clic gauche sur un lien hypertexte charge un

nouveau document, Un clic gauche sur un bouton soumet le formulaire, Un clic droit affiche un menu contextuel, ...

Il est possible d'inhiber ce comportement par dfaut, et le remplacer si besoin Continuer

Extensions au noyau JS

Objets de type BOM Window, Navigator, Screen, History, Location

Objets de type DOM DOM Document, DOM Elements, DOM Attributes, DOM

Events, ...

Objets de type HTML , , , , , ,

, , , , , , , , , , , , , ...

BOM: Browser Object Model

Window(fentre/onglet courant)

Window(fentre/onglet courant)

locationlocation documentdocument historyhistory navigatornavigator screenscreen

Permet de manipuler le navigateur Tous les navigateurs (IE, Firefox, Chrome, ...) sont des

logiciels qui offrent les mmes fonctionnalits de base Ouvrir/fermer des onglets, aller une URL, mmoriser la

liste des URL prcdemment consultes, etc.Arborescence d'objets

DOM

Chaque objet possde ses proprits et mthodes

Entres/sorties

Mthodes d'interaction avec l'utilisateur par le biais de la fentre du navigateur Utilisation de l'objet window

2 mthodes d'entre var user_age = window.prompt ("Quel est votre age ?"); var user_quit = window.confirm("Voulez vous quitter cette

page ?");

1 mthode de sortie window.alert("Bienvenue sur ce site !");

Divers exemples BOM

//affiche dans la console le nom de code du navigateur utilisconsole.log(window.navigator.appCodeName);

//redirige le navigateur vers une adresse quelconquewindow.location = "http://www.univ-pau.fr";

//ouvre un nouvel onglet dans le navigateurvar onglet = window.open('http://www.youtube.com');

//Fais revenir une page en arrire (similaire au boutton 'Back')window.history.back();

//Affiche dans une boite de dialogue la rsolution de l'cran utiliswindow.alert(window.screen.availWidth + "x" + window.screen.availHeight);

//Ecrit de l'html directement dans le document (et supprime l'existant)window.document.write("Bienvenue l'universit de Pau");

Exercice : Quels sont les objets ? Quelles sont les proprits ? Quelles sont les mthodes ?

DOM: Document Object Model

Reprsentation d'un document x(ht)ml sous sa forme 100% objet Les balises sont des noeuds et leurs imbrications

forment une arborescence Cette structure d'arbre est ensuite facile manipuler

L'arbre DOM est charg dans le navigateur L'arbre est parcouru par le moteur de rendu du

navigateur afin de produire l'affichage graphique Chaque modification ultrieure de cet arbre force le

rafrachissement de l'affichage graphique

Document XHTML : exemple

Bienvenue

Pour me contacter : cliquez ici

Uniquement en semaine

S'inscrire la Newsletter

mailto:olivier.legoaer@univ-pau.fr

Arbre du document XHTML

#text(9)#text(9)

#text(11)#text(11)

#text(21)#text(21)

#text(26)#text(26)#text(20)#text(20)

Proprits d'un nud

Poprits CommentaireschildNodes nuds enfants (Array)firstChild premier nud enfantlastChild dernier nud enfantnextSibling prochain nud d'un type (nud de

mme niveau)parentNode nud parentpreviousSibling nud prcdent d'un type (nud

de mme niveau)nodeName nom du nudnodeValue valeur / contenu du nudnodeType type du nudinnerHTML contenu littral html du noeud

Navigation dans l'arbre DOM

parentNode

firstChild

childNodes

nextSibling

lastChild

Mthodes d'un nud

Mthodes CommentairescreateElement() Mthode pour crer un nouvel lment

HTML dans le document (div, p, span, a, form, input, etc).

createTextNode() Mthode pour crer un nud texte.appendChild() Pour ajouter l'lment cr dans le

document. L'lment sera ajout comme tant le dernier nud enfant d'un lment parent.

insertBefore() Pour ajouter l'lment cr avant un autre nud.

removeChild() Pour supprimer un nud.

Accs direct aux nuds

Par la valeur de l'attribut id (si il existe) var result = document.getElementById("intro") ; Renverra 0 ou 1 rsultat

Par la valeur de l'attribut class (si il existe) var result = document.getElementsByClassName("joli1") ; Renverra 0 ou n rsultats

Par le nom de la balise (Tag en anglais) var result = document.getElementsByTagName("input") ; Renverra 0 ou n rsultats

Accs direct aux nuds

Par la valeur de l'attribut name (si il existe) var result = document.getElementsByName("news_email") ; Renverra 0 ou n rsultats

Par les slecteurs CSS (voir cours CSS) var result = document.querySelector("p#intro") ; Renverra 0 ou 1 rsultat, le premier trouv

var result = document.querySelectorAll("ul.joli > li") ; Renverra 0 ou n rsultats

Trs performant

Mode d'accs : comparaison

Bienvenue

function changeColor() { var htmlTag = document.childNodes[0]; var bodyTag = htmlTag.lastChild; var pTag = bodyTag.firstChild; pTag.style.color="#0000FF";}

Lorem Ipsum

Bienvenue

function changeColor() { var pTag = document.getElementById('foo'); pTag.style.color="#0000FF";}

Lorem Ipsum

Accs par navigation dans l'arbre Accs direct

Objets HTML

Aprs avoir navigu et atteint le nud de son choix, il faut agir dessus Pour cela, il est ncessaire de connatre sa vritable

nature (son type) nud ? nud ?, nud ? Etc.

Principe : les attributs Html correspondent aux proprits de l'objet (en notation CamelCase)

Exemple de code #1.1

Bienvenue

function addItem() {var ulTag = document.getElementById('list'); //navigation vers le parent

var item = document.createElement("li"); //nouveau noeud de type item.innerHTML="Lorem Ipsum";ulTag.appendChild(item); //greffe du nouveau noeud son parent

}

Pour me contacter : cliquez ici

Uniquement en semaine

mailto:olivier.legoaer@univ-pau.fr

Exemple de code #1.2

Bienvenue

function addItem(ulTag) { var item = document.createElement("li"); //nouveau noeud de type

item.innerHTML="Lorem Ipsum";ulTag.appendChild(item); //greffe du nouveau noeud son parent

}

Pour me contacter : cliquez ici

Uniquement en semaine

Auto-rfrence avec this(vite la

navigation)

mailto:olivier.legoaer@univ-pau.fr

Exemple de code #2

Bienvenue

function changeContact() { var pTag = document.getElementById("dial");

pTag.href="skype:olegoaer?call"; // changement mail Skypewindow.alert('changement du lien de contact effectu');

}

Pour me contacter :

cliquez iciUniquement en semaine

mailto:olivier.legoaer@univ-pau.fr

Asynchronous JavaScript and XML (Ajax) Un objet spcial sert effectuer des requtes/rponses

HTTP en arrire plan d'un document dj chargBouscule les habitudes de navigation par page

Une seule URL (une seule page) semble dsormais rendre toute les fonctionnalits possibles

Serveur WebServeur Web

Requte HTTP

Rponse HTTP

Requtes HTTP

Rponses HTTP +intgration au DOM courant

La technologie Ajax

Requte/rponse HTTP

Fonctionnement asynchrone (ou pas)

Choix du format de la rponse Textuel (responseText) : chanes ou alors innerHtml XML (responseXml) : accs au DOM !

/* VERSION SYNCHRONE */var xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", "http://ailleurs.com", false);xmlhttp.send();//bloqu ici en attente de la rponse...window.alert(xmlhttp.responseText);

/* VERSION ASYNCHRONE */var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { window.alert(xmlhttp.responseText); }};xmlhttp.open("GET", "http://ailleurs.com", true);xmlhttp.send();

JavaScript cot Serveur Web[avec Node.js]

JS, une technologie serveur

Serveur Webwww.twitter.comServeur Web

www.twitter.com

Client Web : Chrome

Requte http

Rponse http

Execution sur le serveur(JavaScript, PHP, JSP, ...)

Execution sur le client(HTML, CSS, JavaScript, ...)

1

3

24

http://www.twitter.com/http://www.twitter.com/

Sous le capot de Node.js

Interpteur Node.js Reprend le moteur V8 de Chrome (open source)

Modle mono-thread Gestion de la concurrence des clients diffrente des

serveurs multi-threads Oblige se tourner vers un modle non-bloquant

Modle non-bloquant Le fonctionnement asynchrone devient la rgle

Programmation sur une couche plus basse que d'autres techologies serveur

Points forts

Performances Meilleurs benchmarks que Apache par exemple

Programmation L'asynchrone est tendance ("reactive programming") Donne un second souffle au JS

Extensibilit et communaut Il existe de trs nombreux paquets (ou modules) Outillage efficace

Gestionnaire de paquets (npm) Annuaire officiel de paquets : www.npmjs.com

http://www.npmjs.com/

Asynchrone vs synchrone

1 Begin to brew a pot of coffee.

2 Go to the store while the coffee is brewing.

3 Buy cream and sugar.

4 Return home.

5 Drink coffee immediately.

6 Enjoy life.

1 Go to the store.

2 Buy cream and sugar.

3 Return home.

4 Start brewing a pot of coffee.

5 Impatiently watch the pot of coffee as it brews.

6 Experience caffeine withdrawal.

7 Crash.

Hello worldvar http = require('http'); //module http

var server = http.createServer( function(req, res) { //un callback res.end("Hello World"); });

server.listen(6464);console.log("Serveur web lanc ...");

Serveur Web127.0.0.1

Serveur Web127.0.0.1

index.js

$>node index.js

Import de modules existants

Depuis le registre var monModule = require('superModule'); Module natif : rien de spcial faire Module communautaire

Rcupration via npm superModule Install dans ./node_modules/ de votre projet

Custom var monModule = require('./foo/superModule.js');

Crer son propre module

Exports Mcanisme de publication de divers artfacts

Manifeste package.json Fichier JSON de description du module

Nom, version, autheurs, licences, ... Dpendances d'autres paquets ...

Est utilis par npm

Diapo 1Diapo 2Diapo 3Diapo 4Diapo 5Diapo 6Diapo 7Diapo 8Diapo 9Diapo 10Diapo 11Diapo 12Diapo 13Diapo 14Diapo 15Diapo 16Diapo 17Diapo 18Diapo 19Diapo 20Diapo 21Diapo 22Diapo 23Diapo 24Diapo 25Diapo 26Diapo 27Diapo 28Diapo 29Diapo 30Diapo 31Diapo 32Diapo 33Diapo 34Diapo 35Diapo 36Diapo 37Diapo 38Diapo 39Diapo 40Diapo 41Diapo 42Diapo 43Diapo 44Diapo 45Diapo 46Diapo 47Diapo 48Diapo 49Diapo 50Diapo 51Diapo 52Diapo 53Diapo 54Diapo 55Diapo 56Diapo 57Diapo 58Diapo 59Diapo 60Diapo 61Diapo 62Diapo 63Diapo 64Diapo 65Diapo 66