faculté i&c, claude petitpierre, andré maurer les objets introduction

Faculté I&C, Claude Petitpierre, André Maurer

Les objetsIntroduction


Création d’un unique objet

var obj1 = {

attr: 234,

str: "abcd",

}

obj1.nom = "uvw” // adjonction d'un attribut

alert(obj1.attr) // affichage d'un attribut de l’objet


Objet

var obj1 = { }

obj1.nom = "uvw” // adjonction d'un attribut

alert(obj1.nom) // affichage d'un attribut de l’objet


Objet = tableau associatif

var obj2 = {

"stroke-width": 5,

"str": "abcd2",

valeur: x // variable

}

obj2[“background-color”] = “red" // tableau associatif

a cause du -

optionnel


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)


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


Objet avec des méthodesvar obj1 = {

attr: 234,

fct: function () { . . . }

}

obj1.open = function () { . . . } // adjonction d'un

méthode

obj1.fct() // appels de méthodes de

l’objet

obj1.open()


Mot-clé thisvar 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


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


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 syntaxemaLigne = new Line(10,10,20,10)


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


Détection d’objets canvasvar leSelectionne = null créée par le développeurx = 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

} }


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


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()


Hiérarchie d’objets

var o = {

a: "xyz",

b: { s: 12, g: "www", m: { } }

}

o.b.m.k = 125


JSON<script type="text/javascript"> 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) }</script><body> <button onclick='execute1()'>Sauver</button> <button onclick='execute2()'>Restaurer</button></body>


Rappels sur canvas pour l’exercice

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Tests/test</title> <script type="text/javascript"> var ctx function initialise() { ctx = document.getElementById('canv').getContext('2d') } </script> </head>

<body onload='initialise(event)'> <canvas id="canv" width="800px" height="500px" style="border: solid 1px"></canvas> </body>


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émentsctx.stroke()

ctx.beginPath()ctx.strokeStyle = "#00ff00“ // dessin élémentsctx.fill()


Gestion d’un arbre

mmmgauche droite

bbb gauche droite

sssgauche droite


Méthode du nœud, qui insère un nom

Lorsqu’un nœud reçoit un nom:

• S’il est nouveau: il mémorise le nom

• Si le nom est plus petit que le sien:

• S’il 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


Méthode imprime

Lorsqu’un nœud reçoit la demande d’impression:

• Il demande à gauche d’imprimer et attend le retour de l’appel

• Il imprime son propre nom

• Il demande à droite d’imprimer et attend le retour de l’appel

• Il retourne l’appel à l’appelant

faculté i&c, claude petitpierre, andré maurer les objets introduction

Documents