Faculté I&C, Claude Petitpierre, André Maurer Les objets Introduction.

Présentation au sujet: "Faculté I&C, Claude Petitpierre, André Maurer Les objets Introduction."— Transcription de la présentation:

1 Faculté I&C, Claude Petitpierre, André Maurer Les objets Introduction

2 Faculté I&C, Claude Petitpierre, André Maurer Création dun unique objet var obj1 = { attr: 234, str: "abcd", } obj1.nom = "uvw // adjonction d'un attribut alert(obj1.attr) // affichage d'un attribut de lobjet

3 Faculté I&C, Claude Petitpierre, André Maurer Objet var obj1 = { } obj1.nom = "uvw // adjonction d'un attribut alert(obj1.nom) // affichage d'un attribut de lobjet

4 Faculté I&C, Claude Petitpierre, André Maurer Objet = tableau associatif var obj2 = { "stroke-width": 5, "str": "abcd2", valeur: x // variable } obj2[background-color] = red" // tableau associatif a cause du - optionnel

5 Faculté I&C, Claude Petitpierre, André Maurer Deux possibilités équivalentes de créer une fonction var maFct = function () {... } function maFct() {... } Les deux syntaxes créent une variable contenant une définition de fonction alert(typeof maFct)

6 Faculté I&C, Claude Petitpierre, André Maurer Les fonctions sont en fait des variables qui contiennent des définitions de fonctions var maFct = function () {... } var desFonctions = [ ] desFonctions[0] = maFct desFonctions[0]() // appel de la fonction maFct

7 Faculté I&C, Claude Petitpierre, André Maurer Objet avec des méthodes var obj1 = { attr: 234, fct: function () {... } } obj1.open = function () {... } // adjonction d'un méthode obj1.fct() // appels de méthodes de lobjet obj1.open()

8 Faculté I&C, Claude Petitpierre, André Maurer Mot-clé this var obj1 = { attr: 234, fct: function () { this.attr = 0 } // { obj1.attr = 0 } } obj1.open = function (nom) { this.attr = 10 this.unAttrib = nom // crée un nouvel attribut } obj1.fct() obj1.open("Max") x = obj1.unAttrib

9 Faculté I&C, Claude Petitpierre, André Maurer Objet décrivant un segment de droite en canvas segment = { x1 : 100 y1 : 100 x2 : 200 y2 : 100 strokeStyle : "black" }... segment.print = function () { ctx.beginPath() ctx.strokeStyle = this.strokeStyle ctx.moveTo(this.x1, this.y1) ctx.lineTo(this.x2, this.y2) ctx.stroke() } segment.print() // appel

10 Faculté I&C, Claude Petitpierre, André Maurer Création de plusieurs objets similaires function Line(_x1, _y1, _x2, _y2) { this.x1 = _x1 this.y1 = _y1 this.x2 = _x2 this.y2 = _y2 this.strokeStyle = "black" this.print = function () { ctx.beginPath() ctx.strokeStyle = this.strokeStyle ctx.moveTo(this.x1, this.y1) ctx.lineTo(this.x2, this.y2) ctx.stroke() } } maLigne = { init : Line // devient une méthode } maLigne.init(10,10,20,10) = // Même opération, autre syntaxe maLigne = new Line( 10,10,20,10)

11 Faculté I&C, Claude Petitpierre, André Maurer affichage du dessin Plusieurs objets dans un tableau var listeLignes = [ ] var x = new Line(1,1,2,1) listeLignes[0] = x (0) listeLignes[1] = new Line(1,2,1,10) (1) listeLignes.push(new Line(2,20,1,2)) (2) for (var i = 0; i<listeLignes.length; i++) { listeLignes[i].print() } [, ] 0 1 2

12 Faculté I&C, Claude Petitpierre, André Maurer Détection dobjets canvas var leSelectionne = null créée par le développeur x = event.clientX y = event.clientY for (var i = 0; i<listeLignes.length; i++) { if (listeLines[i].inside(x,y)) { listeLignes[i].strokeStyle = "red" leSelectionne = i break }

13 Faculté I&C, Claude Petitpierre, André Maurer Résumé function Constructeur (x) { this.x = x this.fct = function() { this.x = 12 } } var obj = new Constructeur (35) obj.fct() obj.nouvelle = function() {…} // def obj.nouvelle() // appel var obj = { x : 35 fct : function() { this.x = 35 } } obj.fct() obj.nouvelle = function() {…} // def obj.nouvelle() // appel

14 Faculté I&C, Claude Petitpierre, André Maurer Variable locales (privées) function Line(x1) { this.x1 = x1 var y1 = 100 globale = 200 function f() { alert(y1) } this.g = function() { this.x1 = y1 f() } maLigne = new Ligne(10,10,20,10) a = maLigne.x1 b = globale c = maLigne.y1 d = maLigne.f()

15 Faculté I&C, Claude Petitpierre, André Maurer Hiérarchie dobjets var o = { a: "xyz", b: { s: 12, g: "www", m: { } } } o.b.m.k = 125

16 Faculté I&C, Claude Petitpierre, André Maurer JSON function execute1 () { var x = { fruit: "banane", poids:120} File.write('sauvetage', JSON.stringify(x)) } function execute2 () { var y = File.read('sauvetage') var z = JSON.parse(y) alert(z.fruit+" "+z.poids) } Sauver Restaurer

17 Faculté I&C, Claude Petitpierre, André Maurer Rappels sur canvas pour lexercice Tests/test var ctx function initialise() { ctx = document.getElementById('canv').getContext('2d') }

18 Faculté I&C, Claude Petitpierre, André Maurer Rappels sur canvas Segment: ctx.moveTo(100,200) ctx.lineTo(150,250) Ligne brisée: ctx.moveTo(100,200) ctx.lineTo(100,250) ctx.lineTo(150,250) Polygone: ctx.moveTo(100,200) ctx.lineTo(100,250) ctx.lineTo(150,250) ctx.closePath() ctx.beginPath() ctx.strokeStyle = "#00ff00 // dessin éléments ctx.stroke() ctx.beginPath() ctx.strokeStyle = "#00ff00 // dessin éléments ctx.fill()

19 Faculté I&C, Claude Petitpierre, André Maurer Gestion dun arbre mmm gauche droite bbb gauche droite sss gauche droite

20 Faculté I&C, Claude Petitpierre, André Maurer Méthode du nœud, qui insère un nom Lorsquun nœud reçoit un nom: Sil est nouveau: il mémorise le nom Si le nom est plus petit que le sien: Sil a un nœud à gauche, il lui passe le nom Sinon, il crée un nœud, le mémorise et appelle sa méthode insère avec le nom Si le nom est plus grand, il fait de même pour la droite

21 Faculté I&C, Claude Petitpierre, André Maurer Méthode imprime Lorsquun nœud reçoit la demande dimpression: Il demande à gauche dimprimer et attend le retour de lappel Il imprime son propre nom Il demande à droite dimprimer et attend le retour de lappel Il retourne lappel à lappelant