Download
1 / 21
210 likes | 324 Views
Les objets Introduction. 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 = { }
E N D
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 attributde l’objet
Objet var obj1 = { } obj1.nom = "uvw” // adjonction d'un attribut alert(obj1.nom) // affichage d'un attributde l’objet
Objet = tableau associatif a cause du - var obj2 = { "stroke-width": 5, "str": "abcd2", valeur: x // variable } obj2[“background-color”] = “red" // tableau associatif 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éthodes var 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é 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
Objet décrivant un segment de droite en canvas . . . 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 segment = { x1 : 100 y1 : 100 x2 : 200 y2 : 100 strokeStyle : "black"} . . .
Création de plusieurs objets similaires function Line(_x1, _y1, _x2, _y2) {this.x1 = _x1this.y1 = _y1this.x2 = _x2this.y2 = _y2this.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)
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 affichage du dessin
Détection d’objets 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 } }
Résumé var obj = { x : 35 fct : function() { this.x = 35 } } obj.fct() obj.nouvelle = function() {…} // def obj.nouvelle() // appel function Constructeur (x) { this.x = x this.fct = function() { this.x = 12 } } var obj = newConstructeur (35) obj.fct() obj.nouvelle = function() {…} // def obj.nouvelle() // appel
Variable locales (privées) function Line(x1) {this.x1 = x1var y1 = 100 globale = 200 functionf() { 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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Tests/test</title><scripttype="text/javascript"> var ctx function initialise() { ctx = document.getElementById('canv').getContext('2d') }</script></head> <bodyonload='initialise(event)'><canvasid="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 mmm gauche droite bbb gauche droite sss gauche 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
