Faculté I&C, Claude Petitpierre, André Maurer What is this ? (Quest ce que this ?)

Présentation au sujet: "Faculté I&C, Claude Petitpierre, André Maurer What is this ? (Quest ce que this ?)"— Transcription de la présentation:

1 Faculté I&C, Claude Petitpierre, André Maurer What is this ? (Quest ce que this ?)

2 Faculté I&C, Claude Petitpierre, André Maurer Objet window Le contenu de toute pag Web est placé dans un objet window, tel quil est décrit dans http://www.w3schools.com/htmldom/dom_obj_window.asp Cet objet possède des attributs (décrits dans le lien ci-dessus) tels que document outerHeight name window (une référence à lui-même)... et des fonctions telles que setTimeout(...) alert(...)

3 Faculté I&C, Claude Petitpierre, André Maurer Objet window On désigne normalement lattribut dun objet au moyen dun point: objet.attribut Les instructions placées à lintérieur dun objet, ne pouvant pas connaître le nom de la variable dans laquelle elles sont contenues, elles ne peuvent donc pas utiliser le point comme ci-dessus. Par convention, on peut alors aussi écrire (comme dans Java ou C++) this.document this.outerHeight this.name this.setTimeout(...) this.alert(...) Puisquil y a dans window un attribut appelé window qui référence lobjet lui-même, on donc a léquivalence this.window == this,

4 Faculté I&C, Claude Petitpierre, André Maurer Objets HTML Le symbole this est en fait défini dans tous les objets HTML ou Javascript. Par exemple, dans lélément input. Si lon veut appeler la même fonction f( ) depuis plusieurs input, on peut le faire de la manière suivante: est un objet possédant les attributs id, onclick et de nombreux autres. A lintérieur de lélément input dont lid vaut a, this est équivalent à $(a)

5 Faculté I&C, Claude Petitpierre, André Maurer Objet HTML En mettant this dans les arguments des appels placés dans les objets HTML, on peut reporter les tests et actions à faire sur lobjet dans la fonction commune. function f (event, caller) { alert(caller.id+" "+caller.value) } Par exemple, en testant caller.id dans la fonction x, on peut déterminer quel objet a été activé.

6 Faculté I&C, Claude Petitpierre, André Maurer Première façon de construire un objet Javascript var monVin = null monVin = { idv:0, region:Valais, cepage:chasselas, annee:2004 } On écrit monVin.idv pour accéder à la valeur placée dans cet attribut - Toutes les façons de construire présentées produisent exactement le même objet - Les fonctions contenues dans les objets seront vues dans une autre série de transparents - Les objets HTML sont des objets Javascript, on pourrait leur ajouter des attributs

7 Faculté I&C, Claude Petitpierre, André Maurer Deuxième façon de construire un objet Javascript var vin = { } vin.idv = 0 vin.region = Valais vin.cepage = chasselas vin.annee = 2004 var monVin monVin = { idv:12 } monVin.region = Villette

8 Faculté I&C, Claude Petitpierre, André Maurer Autre façon de construire le même objet Javascript var monVin = [ ] monVin[idv] = 0 monVin[region] = Valais monVin[cepage] = chasselas monVin[annee] = 2004 Pour accéder aux attributs de monVin on peut écrire soit monVin.idv soit monVin[idv] mais on ne peut pas connaître la longueur de monVin: typeof monVin.length == undefined

9 Faculté I&C, Claude Petitpierre, André Maurer Quatrième façon de construire un objet Javascript function Vin() { this.region = Chablais this.cepage = gamaret } vin1 = new Vin() Crée un objet équivalent à { region:Chablais, cepage:gamaret } Vin est une fonction qui na de spécial que le fait quelle utilise this. Elle est appelée au moyen de new, pour créer lobjet, pas directement.

10 Faculté I&C, Claude Petitpierre, André Maurer Appels dune fonction function Vin() { this.id = 0 } var x1 = Vin // affecte la même définition de Vin à une autre variable // on pourrait maintenant écrire new x1() var x2 = Vin() // appelle la fonction, mais comme elle ne retourne rien // (elle na pas dinstruction return), x2 restera undefined // si linstruction ci-contre est exécutée dans window (la page), // this.idv=0 va créer le nouvel attribut dans window // si elle est appelée depuis onclick dans input, elle créera // logiquement le nouvel attribut dans input, cest-à-dire // que son id sera changé var x3 = new Vin // création dun objet selon les règles précédentes x3 = new Vin() // idem

11 Faculté I&C, Claude Petitpierre, André Maurer Définition dune fonction (normale ou pour créer un objet) function Vin() { this.idv = 0 } Vin = function() { this.idv = 0; } Les deux formes de définitions ci-dessous sont absolument équivalentes. Vin est en fait une variable qui contient une définition de fonction.

12 Faculté I&C, Claude Petitpierre, André Maurer Constructeur dobjet avec arguments function Vin(r, c) { this.idv = 0 this.cepage = c this.region = r } v1 = new (Neuchâtel, chasselas) v2 = new (Rhône, pinot noir)

13 Faculté I&C, Claude Petitpierre, André Maurer Parcours des attributs dun objet var result = [ {'a':2, 'b':3} ] var key for ( key in result [0] ) { alert ( result [0] [key] ) } Les variables en rouge sont définies par lutilisateur Lordre de parcours est non-déterministe