Propriétés d’objets et leurs attributs - javascript tome xvi
publicité
LES PROPRIÉTÉS D’OBJETS
ET LEURS ATTRIBUTS
J AVA S C R I P T (Programmation Internet) V O L . V I
Po u r D é b u t e r
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 – 813572818
Tout élément (noeud) HTML est un objet
JavaScript. Par exemple :
1. L’élément ANCHOR (ancre = lien hypertexte ou cible de lien) est l’objet
« HTMLAnchorElement »,
2.
3.
L’élément HTML est l’objet HTMLElement ou
HTMLHTMLElement.
Les différents éléments HTML/DOM
disponibles peuvent être listés en tapant
« html » (en majuscules ou de préférence
en minuscules) sur le prompt de la con-
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
sole
du
navigateur,
JavaScript Tome-VI
comme
suit :
JDB DIASOLUKA Nz. Luyalu -2/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
JDB DIASOLUKA Nz. Luyalu -3/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Il ne faut pas confondre « Attribute [selectors] » = « [sélecteurs d’] attribut »
d’élément HTML (manipulable dans le
code HTML) avec « Propriété [d’objet
HTML/DOM] » (manipulable dans un
script). Quand vous avez par exemple
l’élément HTML « <a></a> », ses attributs
JDB DIASOLUKA Nz. Luyalu -4/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
sont listés ci-dessous.
Ci-dessous, une liste de [sélecteurs d’] attributs d’élément HTML :
accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
JDB DIASOLUKA Nz. Luyalu -5/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
valign
valuetype
vlink
Mais les propriétés de l’objet anchor
(HTMLAnchorElement) sont par exemple
(tapez
« console.dir(HTMLAnchorElement) »
au
prompt de la console du navigateur). Toutes
ces propriétés sont des attributs du prototype de HTMLAnchorElement (contenues
dans ce prototype), et non comme propriétés propres de cet objet HTMLAnchorElement, ce qui permet à tous les éléments
<a></a> (fils de HTMLAnchorElement) de
les hériter.
JDB DIASOLUKA Nz. Luyalu -6/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Ci-dessous quelques propriétés (propres et
héritées) de l’objet HTMLAnchorElement, parent de l’élément <a><a> et de
son prototype :
etc…
JDB DIASOLUKA Nz. Luyalu -7/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
etc…
On peut obtenir les attributs du prototype
en le spécifiant directement dans la commande :
console.dir(HTMLAnchorElement["prototype"])
ou
console.dir(HTMLAnchorElement.prototype)
JDB DIASOLUKA Nz. Luyalu -8/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
etc…
Quant à la commande qui suit :
Object.getPrototypeOf (
HTMLAnchorElement["prototype"]
)
JDB DIASOLUKA Nz. Luyalu -9/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
etc…
JDB DIASOLUKA Nz. Luyalu -10/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Les [noms des] propriétés propres (OwnProperties) du prototype de l’objet
HTMLAnchorElement sont :
Object.getOwnPropertyNames(
HTMLAnchorElement["prototype"]
)
JDB DIASOLUKA Nz. Luyalu -11/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Il ne faut pas non plus confondre les proJDB DIASOLUKA Nz. Luyalu -12/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
priétés et attributs ci-dessus, avec les propriétés CSS (manipulables soit avec
l’attribut « style= », soit dans les feuilles
de style = l’élément <style></style>), par
exemple :
<!-- Feuilles de style-->
<style>
[title] {
border-bottom:dotted thick hsla(303,46%,71%,0.82);
padding : 0 0 10 0
}
div {
border:dashed medium hsl(324 , 69% , 81%);
border-radius : 7pt;
width : 15em; text-align : right
}
</style>
<div id="iClass" onclick="jsCSS()">
ceci est une division<br>
<span title="Cliquez cette balise division">
Texte avec attr « TITLE »
</span>
<!-title = attribut de span
id et onclick = attributs de div
onclick est aussi un eventlistener
-->
</div>
<script>
function jsCSS(){
let i = document.getElementById("iClass");
i.style.backgroundColor = " rgba(226,143,160,0.09)";
i.style.color = "hsl(282 , 30% , 24%)";
i.style.fontWeight = "900";
JDB DIASOLUKA Nz. Luyalu -13/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
i.style.textAlign = "center";
i.style.letterSpacing = "2";
i.style.textTransform = "capitalize";
// style = attribut (propriété) CSS
// backgroundColor et ... = valeurs d'attribut
}
</script>
Et de surcroît, ne confondez pas tout ce qui
précède avec les pseudo-classes, qui sont :
:defined (tout élément défini),
:link (lien), :visited (lien visité),
:active (en cours d’activation),
:hover (lien surplombé/pointé),
:focus (ayant le contrôle),
:target (cible),
:enabled (non disabled),
JDB DIASOLUKA Nz. Luyalu -14/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
:disabled (inactivé),
:checked (input type=checkbox/radio avec un checkness=true, ou option avec selectedness=true),
:indeterminate (input avec type=checkbox et indeterminate=true, ou input avec type=radio et le groupe
radio sans élément à checkness=true, ou élément progress sans attribut content),
:default (button par défaut, ou input par défaut et
type=submit ou en état image button, ou input avec
attribute checked est coché, éléments option checkés),
:placeholder-shown (input ou textarea avec placeholder affiché),
:valid (élément à contrainte de validation et qui satisfait la contrainte),
:invalid (élément à contrainte de validation et qui
ne satisfait pas la contrainte),
:in-range (élément à contrainte de validation et limitation de plage, et ne souffrant ni de underflow
ou de overflow),
:out-of-range (élément à contrainte de validation et
limitation de plage, et souffrant de underflow ou de
overflow),
:required (input, select ou textarea ayant attribut
required),
JDB DIASOLUKA Nz. Luyalu -15/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
:optional (input, select ou textarea sans attribut
required),
:read-only,
:read-write (1. élément input auquel s’applique
l’attribut readonly, mais sans cet attribut, et non
disabled. 2. Element textarea sans attributs readonly
et disabled. 3. Éléments editing hosts ou éditables
qui ne sont ni input ni textarea.
:dir(ltr) -> tout élément avec directionnalité ‘ltr’.
:dir(rtl) -> tout élément avec directionnalité ‘rtl’.
JDB DIASOLUKA Nz. Luyalu -16/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
CHAPITRE 11 : LES PROPRIÉTÉS:
On peut accéder aux propriétés d’un objet de plusieurs façons :
1
2
3
Par le nom de la propriété. entre guillemets dans des crochets
Par le nom de la propriété précédé d’un point
Par un index
<script type="text/javascript">
"use strict";
var dObj = {
couleur:"rose",
50: "Cinquante",
age:45,
[2]:function(){console.log("Hello")},
3: "Trois",
["quatre"]:function(){console.log("quatre")}
}
//
var dObj = new dObj();
console.log(dObj["couleur"])
console.log(dObj["50"])
console.log(dObj.age)
dObj[2]()
console.log(dObj[3])
dObj["quatre"]()
console.log("=====")
for(var i in dObj)console.log(i+". "+dObj[i])
console.log(Object.values(dObj))
console.log(">===<")
for(i in dObj)console.log(dObj[i])
</script>
Exécution :
rose
Cinquante
45
test.html:14:3
test.html:15:3
test.html:16:3
JDB DIASOLUKA Nz. Luyalu -17/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Hello
test.html:7:23
Trois
test.html:18:3
quatre
test.html:9:30
=====
test.html:20:3
2. function(){console.log("Hello")}
test.html:21:21
3. Trois
test.html:21:21
50. Cinquante
test.html:21:21
couleur. rose
test.html:21:21
age. 45
test.html:21:21
quatre. function(){console.log("quatre")}
test.html:21:21
Array [
dObj(), "Trois", "Cinquante", "rose", 45, dObj()
]
test.html:22:3
>===<
test.html:23:3
dObj()
length: 0
name: "2"
prototype: Object { … }
__proto__: function ()
test.html:24:17
Trois
test.html:24:17
Cinquante
test.html:24:17
rose
test.html:24:17
45
test.html:24:17
dObj()
test.html:24:17
length: 0
name: "quatre"
prototype: Object { … }
__proto__: function ()
Parcourir les éléments d’une collection / itération (array, object...) avec
un itérateur comme “ keys ”!
Object.keys -> function keys()
Array.prototype.keys -> function keys()
<script type="text/javascript"> "use strict";
let _arr = ['ally', 'belly', 'chore'];
let our_Aiterator = _arr.keys();
console.log(our_Aiterator); // Array Iterator { }
for (let i of our_Aiterator) {
console.log(i,_arr[i]); // 0 ally , 1 belly , 2 chore
}
JDB DIASOLUKA Nz. Luyalu -18/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
let our_Aiterator2 = Object.keys(_arr);
console.log(our_Aiterator2); // Array [ "0", "1", "2" ]
for (let i of our_Aiterator2) {
console.log(i,_arr[i]); // 0 ally , 1 belly , 2 chore
}
let _obj =
{"5":'ally', b:'belly', 3:'chore', _obj:45};
// « let _obj » et « _obj:45 == _obj._obj=45 »
// ne partagent pas le même Name Space et
// n'interfèrent donc pas.
console.log(_obj);
// Object { 3: "chore", 5: "ally", b: "belly", _obj: 45 }
console.log(_obj._obj); // 45
let our_Oiterator = Object.keys(_obj);
console.log(our_Oiterator);
// Array [ "3", "5", "b", "_obj" ]
for (let i of our_Oiterator) {
console.log(i,_obj[i]);
// 3 chore , 5 ally , b belly , _obj 45
}
</script>
Ajouter des propriétés à un objet existant :
<script model="text/javascript"> "use strict";
let o = {
zumela:"Yende",
mbula:2019
}
o.sika1 = "Mosusu";
o["sika2"]="Mombamba";
console.log(o);
</script>
JDB DIASOLUKA Nz. Luyalu -19/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
CHAPITRE 12 : LES PROPRIÉTÉS ET LEURS ATTRIBUTS :
Les propriétés sont des objets dont les propriétés sont leurs attributs.
Sur https://www.ecma-international.org/ecma-262/8.0 nous lisons ceci :
6.1.7.1 Property Attributes
Attributes are used in this specification to define and explain the state of
Object properties. A data property associates a key value with the attributes listed in Table 2.
Table 2: Attributes of a Data
Property Attribute Name
Value Domain
Description
[[Value]]
Any
The value retrieved by a get access of
ECMAScript the property.
language
type
[[Writable]]
Boolean
Peut-être modifié [directement].
If false, attempts by ECMAScript code
to change the property's [[Value]] attribute using [[Set]] will not succeed.
JDB DIASOLUKA Nz. Luyalu -20/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
[[Enumerable]] Boolean
Invisible dans certains contextes.
If true, the property will be enumerated
by a for-in enumeration (see 13.7.5).
Otherwise, the property is said to be
non-enumerable.
[[Configurable]] Boolean
Peut être supprimée, ou
Son « property descriptor » changé.
If false, attempts to delete the property,
change the property to be an accessor
property, or change its attributes (other
than [[Value]], or changing [[Writable]]
to false) will fail.
Comme dit ci-dessus, [[value]] est la valeur que vous attribuez ou attendez de l’objet.
Une propriété ayant « false » comme valeur de l’attribut Enumerable
ne figurera pas dans la liste des propriétés de l’objet, générée avec
for (var in object).
<script type="text/javascript"> "use strict";
// Définition de propriété lors de la création
var obj = {nom:"nomEl",matr:45};
console.log(Object.getOwnPropertyDescriptors(obj));
// Object { nom: {…}, matr: {…} }
// {…}
//
matr: Object { value: 45, writable: true, enumerable:
true, … }
//
nom: Object { value: "nomEl", writable: true, enumerable: true, … }
// {…}
// matr: {…}
//
configurable: true
//
enumerable: true
//
value: 45
//
writable: true
// nom: {…}
//
configurable: true
JDB DIASOLUKA Nz. Luyalu -21/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
//
//
//
JavaScript Tome-VI
enumerable: true
value: "nomEl"
writable: true
console.log(obj["nom"], obj.matr);
//
nomEl
45
// [Re]Définition brève avec defineProperty
Object.defineProperty(obj, 'defProp', {
value: "definedProp" });
console.log(obj["nom"], obj['matr'], obj.matr,
obj.defProp);
//
nomEl
45
45
definedProp
console.log(Object.getOwnPropertyDescriptor(obj,"nom"));
// Object { value: "nomEl", writable: true, enumerable:
true, configurable: true }
// {…}
//
configurable: true
//
enumerable: true
//
value: "nomEl"
//
writable: true
console.log(Object.getOwnPropertyDescriptor(
obj,"defProp"));
// Object { value: "definedProp", writable: false, enumerable: false, configurable: false }
// {…}
//
configurable: false
//
enumerable: false
//
value: "definedProp"
//
writable: false
</script>
Ci-dessous, voici comment on peut manipuler ces attributs :
JDB DIASOLUKA Nz. Luyalu -22/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
1. Définir une propriété : avec la méthode Object.defineProperty
<script type="text/javascript"> "use strict";
Object.defineProperty(
[objet]
, [property-key]
, { value: [property-value] }
)
</script>
[] = à fournir.
2. Lire une ou les propriété(s) : .avec la méthode Object.getOwnPropertyDescriptors.
<script type="text/javascript"> "use strict";
Object.getOwnPropertyDescriptors (
[objet]
)
</script>
On peut définir les propriétés d’un objet [et éventuellement les attributs de ces propriétés] de plusieurs façons ;
<script type="text/javascript"> "use strict";
// Donne aussi les valeurs par défaut des attributs des
// propriétés selon les différents modes de définition.
// Définition de propriété lors de la création
var obj = {nom:"nomEl",matr:45};
// Définition directe de propriété à partir
// du monde externe
obj['dirProp']="Direct Property";
// [Re]Définition brève avec defineProperty
Object.defineProperty(obj, 'defProp', { value: "definedProp" });
// Modèle de [Re]Définition étendue avec defineProperty
// mécanisme interne.
JDB DIASOLUKA Nz. Luyalu -23/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Object.defineProperty(obj, 'defPropX', { value: "definedProp Extended",
configurable: true });
console.dir("obj.nom=",obj.nom); // obj.nom= nomEl
console.dir("obj.matr=",obj.matr); // obj.matr= 45
console.dir("obj.dirProp=",obj.dirProp);
// obj.dirProp= Direct Property
// Au lieu des points on peut aussi utiliser
// des crochets.
console.dir("obj['defProp']=",obj.defProp);
// obj['defProp']= definedProp
console.dir("obj.defPropX=",obj.defPropX);
// obj.defPropX= definedProp Extended
////////////////////////////
///// DÉBUT GETTER et SETTER
////////////////////////////
// On peut aussi utiliser des getters et setters.
// EXEMPLE DE SETTER :
Object.defineProperty(obj, "prod", {
// "get" et "set" deviendront propriétés
// de la propriété "prod" de l'objet "obj".
get: function() {
let alias1 = this.nom;
let alias2 = this.matr;
return "obj.nom= "+alias1 + " , " +
"obj.matr="+alias2;
},
set: function(details) {
var detail = details.split(" ");
this.nom = detail[0];
this.matr = detail[1];
}
})
// Accès ordinaire
console.dir("obj=",obj);
// obj=
//
Object { nom: "nomEl", matr: 45, dirProp: "Direct
Property", … }
//
{…}
//
defProp: "definedProp"
JDB DIASOLUKA Nz. Luyalu -24/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
//
defPropA: "Affectation ordinaire, toujours possible!"
//
defPropX: "definedProp Extended"
//
dirProp: "Direct Property"
//
matr: "2018"
//
nom: "JavaScript"
//
prod: Getter & Setter
//
<get>: function get()
//
<set>: function set()
// Accès par GETTER
console.dir("OBJ.PROD = : ",obj.prod);
// OBJ.PROD = : obj.nom= nomEl , obj.matr=45
// Appel de SETTER déclenché par l'affectation
// au SETTER "prod" de l'objet "obj", ce qui
// modifiera ici propriétés "nom" et "matr" de "obj"
obj.prod = "JavaScript 2018"
// nom deviendra "JavaScript"
// matr deviendra 2018
//////////////////////////
///// FIN GETTER et SETTER
//////////////////////////
obj.defPropA = "Affectation ordinaire, toujours possible!";
console.log(obj);
// Object { nom: "JavaScript", matr: "2018", dirProp: "Direct Property", defPropA: "Affectation ordinaire, toujours
possible!", … }
// {…}
// defProp: "definedProp"
// defPropX: "Affectation ordinaire, toujours possible!"
// defPropX: "definedProp Extended"
// dirProp: "Direct Property"
// matr: "2018"
// nom: "JavaScript"
// prod: Getter & Setter
// <get>: function get()
// <set>: function set()
console.log(Object.getOwnPropertyDescriptors(obj))
// Object { nom: {…}, matr: {…}, dirProp: {…}, defProp:
{…}, defPropX: {…}, prod: {…}, defPropA: {…} }
JDB DIASOLUKA Nz. Luyalu -25/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
// {…}
//
defProp: Object { value: "definedProp", writable:
false, enumerable: false, … }
//
defPropA: Object { value: "Affectation ordinaire,
toujours possible!", writable: true, enumerable: true, … }
//
defPropX: Object { value: "definedProp Extended",
writable: false, enumerable: false, … }
//
dirProp: Object { value: "Direct Property", writable:
true, enumerable: true, … }
//
matr: Object { value: "2018", writable: true, enumerable: true, … }
//
nom: Object { value: "JavaScript", writable: true,
enumerable: true, … }
//
prod: Object { get: get(), enumerable: false, configurable: false, … }
/*
defProp: {…}
configurable: false
enumerable: false
value: "definedProp"
writable: false
defPropA: {…}
configurable: true
enumerable: true
value: "Affectation ordinaire, toujours possible!"
writable: true
defPropX: {…}
configurable: true
enumerable: false
value: "definedProp Extended"
writable: false
dirProp: {…}
configurable: true
enumerable: true
value: "Direct Property"
writable: true
matr: {…}
configurable: true
enumerable: true
value: 2018
JDB DIASOLUKA Nz. Luyalu -26/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
writable: true
nom: {…}
configurable: true
enumerable: true
value: "JavaScript"
writable: true
prod: {…}
configurable: false
enumerable: false
get: function get()
set: function set()
*/
</script>
On peut aussi définir un getter et un setter directement dans le corps de
l’objet lors de la définition de cet objet :
<script type="text/javascript"> "use strict";
// Notez avec les virgules, que "get" et "set"
// sont propriétés de "obj".
var obj = {
libelle: 'Nom Produit',
JDB DIASOLUKA Nz. Luyalu -27/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
prix: 2018,
get detailsProd() {
return {nomProd:this.libelle, prixProd:this.prix};
},
set detailsProd(name) {
var parts = name.split(" ");
this.libelle = parts[0];
this.prix = parts[1];
}
};
console.log("obj=",obj);
// obj=
// Object { libelle: "Nom Produit", prix: 2018, detailsProd: Getter & Setter }
// {…}
// detailsProd: Getter & Setter
// libelle: "ECMASCRIPT_2018"
// prix: "3USD"
console.log("obj.libelle=",obj.libelle);
// obj.libelle= Nom Produit
console.log("obj.prix=",obj.prix);
// obj.prix= 2018
// AFFECTER ou MODIFIER via le SETTER
console.log(obj.detailsProd = 'ECMASCRIPT_2018 10 USD');
// ECMASCRIPT_2018 10 USD
console.log("obj.libelle=",obj.libelle);
// obj.libelle= ECMASCRIPT_2018
console.log("obj.prix=",obj.prix);
// obj.prix= 10
console.log(obj.prix = "3USD");
// 3USD
console.log("obj.detailsProd=",obj.detailsProd);
// obj.detailsProd=
//
Object { nomProd: "ECMASCRIPT_2018", prixProd: "3USD"
}
JDB DIASOLUKA Nz. Luyalu -28/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
//
//
//
JavaScript Tome-VI
{…}
nomProd: "ECMASCRIPT_2018"
prixProd: "3USD"
// AVEC YANDEX
//test.html:21
obj= {libelle: "Nom Produit", prix: 2018}
// detailsProd: (...)
// libelle: "ECMASCRIPT_2018"
// prix: "3USD"
// get detailsProd: ƒ detailsProd ()
// set detailsProd: ƒ detailsProd (name)
// __proto__: Object
//test.html:29
obj.libelle= Nom Produit
//test.html:32
obj.prix= 2018
//test.html:35
ECMASCRIPT_2018 10 USD
//test.html:38
obj.libelle= ECMASCRIPT_2018
//test.html:41
obj.prix= 10
//test.html:44
3USD
//test.html:47
obj.detailsProd = {nomProd:
"ECMASCRIPT_2018", prixProd: "3USD"}
/* obj.detailsProd =
1er {nomProd: "ECMASCRIPT_2018", prixProd: "3USD"}
A
nomProd:"ECMASCRIPT_2018"
B
prixProd:"3USD"
C
__proto__:Object
1er detailsProd:(...)
2e libelle:"ECMASCRIPT_2018"
3e prix:"3USD"
4e get detailsProd:ƒ detailsProd()
5th set detailsProd:ƒ detailsProd(name)
6e get detailsProd:ƒ detailsProd()
A
arguments:(...)
B
caller:(...)
C
length:0
D
name:"get detailsProd"
E
__proto__:ƒ ()
F
[[FunctionLocation]]:test.html:9
G
[[Scopes]]:Scopes[1]
JDB DIASOLUKA Nz. Luyalu -29/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
I
0:Global {type: "global", name: "", object: Wi
ndow}
1st set detailsProd:ƒ detailsProd(name)
A
arguments:(...)
B
caller:(...)
C
length:1
D
name:"set detailsProd"
E
__proto__:ƒ ()
F
[[FunctionLocation]]:test.html:13
G
[[Scopes]]:Scopes[1]
I
0:Global {type: "global", name: "", object: Wi
ndow}
1er __proto__:Object
*/
</script>
« get » et « set » définissent deux fonctions « accessor » pour la propriété « detailsProd ».
1. Un getter ( « get detailsProd() » ) pour accéder à la valeur de la
propriété,
et
2. Un setter ( « set detailsProd(name) » pour affecter / modifier la valeur de la propriété)
N.B. : Les propriété ne peuvent avoir que soit des valeurs, soit des accesseurs (set et get) , jamais les deux à la fois.
Vous avez remarqué ci-dessus que le prix introduit était « 10 USD »,
mais que le USD n’a pas été retenu. Si vous voulez que le setter accepte
des entrées avec des espaces, il suffit de changer le séparateur
« name.split(' ') » en « name.split(',') » et séparer deux entrées par une
virgule.
<script type="text/javascript"> "use strict";
// Notez avec les virgules, que "get" et "set"
// sont propriétés de "obj".
JDB DIASOLUKA Nz. Luyalu -30/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
var obj = {
libelle: 'Nom Produit',
prix: 2018,
get detailsProd() {
return {nomProd:this.libelle, prixProd:this.prix};
},
set detailsProd(name) {
var parts = name.split(",");
this.libelle = parts[0];
this.prix = parts[1];
}
};
// AFFECTER ou MODIFIER
console.log(obj.detailsProd = 'ECMASCRIPT 2018 ES 8, 10
USD AMÉRICAINS');
// ECMASCRIPT 2018 ES 8, 10 USD AMÉRICAINS
console.log("obj.libelle=",obj.libelle);
// obj.libelle= ECMASCRIPT 2018 ES 8
console.log("obj.prix=",obj.prix);
// obj.prix= 10 USD AMÉRICAINS
console.log("obj.detailsProd=",obj.detailsProd);
// obj.detailsProd=
//
obj.detailsProd=
// Object { nomProd: "ECMASCRIPT 2018 ES 8", prixProd: "
10 USD AMÉRICAINS" }
// {…}
// nomProd: "ECMASCRIPT 2018 ES 8"
// prixProd: " 10 USD AMÉRICAINS"
</script>
dimanche, 16. juin 2019 (10:55 ).
Mots-clés :
JDB DIASOLUKA Nz. Luyalu -31/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
élément HTML, HTML, HTMLElement, DOM,
ANCHOR, ancre, lien hypertexte, cible, cible de
lien, HTMLAnchorElement, attribut, style, Attribute selectors, sélecteurs d’attribut, code HTML, propriétés propres, prototype, Accéder, CSS, propriétés, propriétés d’un objet, collection, itération,
itérateur, keys, attributs, getOwnPropertyDescriptors, getOwnPropertyNames, getter, setter, accesseur, get, set.
JDB DIASOLUKA Nz. Luyalu -32/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé, bénévole,
sans aucun conflit d’int érêt ou
liens d'intérêts ou contrainte
promotionnelle avec qui qu’il soit
ou quelqu’organisme ou institution / organisation que ce soit,
étatique, paraétatique ou privé,
industriel ou commercial en relation avec le sujet pr ésenté.
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-DesJDB DIASOLUKA Nz. Luyalu -33/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-DesThermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-IntroductionAux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-ChristPour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelleangulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriqueesen-JS
• https://www.scribd.com/document/374789297/Format-Interne-DesObjets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secretde-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-dIMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelledu-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-EntreOxymetrie-Et-Type-Respiration
• https://www.scribd.com/document/315746265/Classification-DesMedicaments
• https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
JDB DIASOLUKA Nz. Luyalu -34/35- dimanche, 16. juin 2019 (10:55 )
PROPRIÉTÉS & ATTRIBUTS D’OBJETS
JavaScript Tome-VI
• https://www.scribd.com/document/315745725/Rapport-EntreOxymetrie-Et-Type-Respiration
JDB DIASOLUKA Nz. Luyalu -35/35- dimanche, 16. juin 2019 (10:55 )
