Les objets introduction
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

Les objets Introduction PowerPoint PPT Presentation


  • 45 Views
  • Uploaded on
  • Presentation posted in: General

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 = { }

Download Presentation

Les objets Introduction

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Les objets introduction

Les objetsIntroduction


Cr ation d un unique objet

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

Objet

var obj1 = { }

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

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


Objet tableau associatif

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

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

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

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

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

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

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

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

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

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

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

Hiérarchie d’objets

var o = {

a: "xyz",

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

}

o.b.m.k = 125


Les objets introduction

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

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

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

Gestion d’un arbre

mmm

gauche droite

bbb

gauche droite

sss

gauche droite


M thode du n ud qui ins re un nom

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

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


  • Login