Download - Les objets Introduction
Faculté I&C, Claude Petitpierre, André Maurer
Les objetsIntroduction
Faculté I&C, Claude Petitpierre, André Maurer
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
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 l’objet
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
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)
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
Faculté I&C, Claude Petitpierre, André Maurer
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()
Faculté I&C, Claude Petitpierre, André Maurer
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
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
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 syntaxemaLigne = new Line(10,10,20,10)
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
Faculté I&C, Claude Petitpierre, André Maurer
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
} }
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
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()
Faculté I&C, Claude Petitpierre, André Maurer
Hiérarchie d’objets
var o = {
a: "xyz",
b: { s: 12, g: "www", m: { } }
}
o.b.m.k = 125
Faculté I&C, Claude Petitpierre, André Maurer
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>
Faculté I&C, Claude Petitpierre, André Maurer
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>
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émentsctx.stroke()
ctx.beginPath()ctx.strokeStyle = "#00ff00“ // dessin élémentsctx.fill()
Faculté I&C, Claude Petitpierre, André Maurer
Gestion d’un arbre
mmmgauche droite
bbb gauche droite
sssgauche droite
Faculté I&C, Claude Petitpierre, André Maurer
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
Faculté I&C, Claude Petitpierre, André Maurer
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