Propriétés D'objets Et Leurs Attributs, Et Pseudo-Classes - JavaScript

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 hy-
pertexte ou cible de lien) est l’objet
« HTMLAnchorElement »,
2. L’élément HTML est l’objet HTMLE-

lement ou HTMLHTMLElement.
3. 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 JavaScript Tome-VI
sole du navigateur, comme suit :
JDB DIASOLUKA Nz. Luyalu -2/35- dimanche, 16. juin 2019 (12:09 )
Il ne faut pas confondre « Attribute [se-

lectors] » = « [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
sont listés ci-dessous.
Ci-dessous, une liste de [sélecteurs d’] at-

tributs 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
 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 « con-
sole.dir(HTMLAnchorElement) » au
prompt de la console du navigateur). Toutes
ces propriétés sont des attributs du proto-
type de HTMLAnchorElement (contenues
dans ce prototype), et non comme proprié-
tés propres de cet objet HTMLAnchorEle-
ment, ce qui permet à tous les éléments
<a></a> (fils de HTMLAnchorElement) de
les hériter.
Ci-dessous quelques propriétés (propres et

héritées) de l’objet HTMLAnchorEle-
ment, parent de l’élément <a><a> et de
son prototype :
etc…
etc…
On peut obtenir les attributs du prototype

en le spécifiant directement dans la com-
mande :
console.dir(HTMLAnchorElement["prototype"])
ou
console.dir(HTMLAnchorElement.prototype)
etc…
Quant à la commande qui suit :

Object.getPrototypeOf (
HTMLAnchorElement["prototype"]
)
etc…
Les [noms des] propriétés propres (Own-

Properties) du prototype de l’objet
HTMLAnchorElement sont :
Object.getOwnPropertyNames(
HTMLAnchorElement["prototype"]
)
Il ne faut pas non plus confondre les pro-

priétés et attributs ci-dessus, avec les pro-

priétés CSS (manipulables soit avec
l’attribut « style= », soit dans les feuilles
de style = l’élément <style></style>), par
exemple :

<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>

</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";
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),

:disabled (inactivé),
:checked (input type=checkbox/radio avec un check-

ness=true, ou option avec selectedness=true),
:indeterminate (input avec type=checkbox et indeter-

minate=true, ou input avec type=radio et le groupe
radio sans élément à checkness=true, ou élément pro-
gress 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 placehold-

er affiché),
:valid (élément à contrainte de validation et qui sa-

tisfait la contrainte),
:invalid (élément à contrainte de validation et qui

ne satisfait pas la contrainte),
:in-range (élément à contrainte de validation et li-

mitation 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),
: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’.
CHAPITRE 11 : LES PROPRIÉTÉS:
On peut accéder aux propriétés d’un objet de plusieurs façons :
1 Par le nom de la propriété. entre guillemets dans des crochets

2 Par le nom de la propriété précédé d’un point
3 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 test.html:14:3
Cinquante test.html:15:3
45 test.html:16:3
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
}
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>
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 attrib-
utes listed in Table 2.
Table 2: Attrib- Value Do- Description
utes of a Data main
Property At-
tribute Name
[[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]] at-
tribute using [[Set]] will not succeed.
[[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 at-
tendez 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).

// 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, enumer-
able: true, … }
// {…}
// matr: {…}
// configurable: true
// enumerable: true
// value: 45
// writable: true
// nom: {…}
// 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 }
// {…}
// enumerable: true
// value: "nomEl"
// writable: true
console.log(Object.getOwnPropertyDescriptor(
obj,"defProp"));
// Object { value: "definedProp", writable: false, enumer-
able: false, configurable: false }
// {…}
// configurable: false
// enumerable: false
// value: "definedProp"
// writable: false
</script>
Ci-dessous, voici comment on peut manipuler ces attributs :
1. Définir une propriété : avec la méthode Object.defineProperty

Object.defineProperty(
[objet]
, [property-key]
, { value: [property-value] }
)
</script>
[] = à fournir.
2. Lire une ou les propriété(s) : .avec la méthode Ob-

ject.getOwnPropertyDescriptors.

Object.getOwnPropertyDescriptors (
[objet]
)
</script>
On peut définir les propriétés d’un objet [et éventuellement les attri-
buts de ces propriétés] de plusieurs façons ;

// 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: "de-
finedProp" });
// Modèle de [Re]Définition étendue avec defineProperty

// mécanisme interne.
Object.defineProperty(obj, 'defPropX', { value: "de-
finedProp 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"
// defPropA: "Affectation ordinaire, toujours pos-
sible!"
// 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 pos-

sible!";
console.log(obj);
// Object { nom: "JavaScript", matr: "2018", dirProp: "Di-
rect 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: {…} }
// {…}
// 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, enumer-
able: true, … }
// nom: Object { value: "JavaScript", writable: true,
enumerable: true, … }
// prod: Object { get: get(), enumerable: false, config-
urable: 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
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 :

// Notez avec les virgules, que "get" et "set"
// sont propriétés de "obj".
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];
}
};
console.log("obj=",obj);
// obj=
// Object { libelle: "Nom Produit", prix: 2018, details-
Prod: 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
// obj.libelle= ECMASCRIPT_2018
// obj.prix= 10
console.log(obj.prix = "3USD");
// 3USD
console.log("obj.detailsProd=",obj.detailsProd);
// obj.detailsProd=
// Object { nomProd: "ECMASCRIPT_2018", prixProd: "3USD"
}
// {…}
// 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]
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 pro-

prié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 va-

leur de la propriété)
N.B. : Les propriété ne peuvent avoir que soit des valeurs, soit des ac-
cesseurs (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.

// Notez avec les virgules, que "get" et "set"
// sont propriétés de "obj".
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
// obj.libelle= ECMASCRIPT 2018 ES 8
// 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 (12:09 ).
Mots-clés :
élément HTML, HTML, HTMLElement, DOM,

ANCHOR, ancre, lien hypertexte, cible, cible de
lien, HTMLAnchorElement, attribut, style, Attri-
bute selectors, sélecteurs d’attribut, code HTML, pro-
priétés propres, prototype, Accéder, CSS, pro-
priétés, propriétés d’un objet, collection, itération,
itérateur, keys, attributs, getOwnPropertyDescrip-
tors, getOwnPropertyNames, getter, setter, ac-
cesseur, get, set.
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, auto-

nome 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 institu-
tion / organisation que ce soit,
étatique, paraétatique ou privé,
industriel ou commercial en rela-
tion avec le sujet pr ésenté.
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
diasfb@mail2world.com
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-
Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-Des-
Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-Des-
Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-
Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-
Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-
angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-
en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-
Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-
de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-
IMC-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-Des-
Reflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-et-
Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-
du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-
Oxymetrie-Et-Type-Respiration
• https://www.scribd.com/document/315746265/Classification-Des-
Medicaments
• https://www.scribd.com/document/315745909/Incongruences-
Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-
Oxymetrie-Et-Type-Respiration

Propriétés D'objets Et Leurs Attributs, Et Pseudo-Classes - JavaScript

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Propriétés D'objets Et Leurs Attributs, Et Pseudo-Classes - JavaScript

Transféré par

Droits d'auteur :

LES PROPRIÉTÉS D’OBJETS

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga

Tout élément (noeud) HTML est un objet

2. L’élément HTML est l’objet HTMLE-

3. Les différents éléments HTML/DOM

sole du navigateur, comme suit :

Il ne faut pas confondre « Attribute [se-

sont listés ci-dessous.

Ci-dessous, une liste de [sélecteurs d’] at-

Mais les propriétés de l’objet anchor

Ci-dessous quelques propriétés (propres et

On peut obtenir les attributs du prototype

Quant à la commande qui suit :

Les [noms des] propriétés propres (Own-

Il ne faut pas non plus confondre les pro-

priétés et attributs ci-dessus, avec les pro-

<div id="iClass" onclick="jsCSS()">

Et de surcroît, ne confondez pas tout ce qui

: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),

:enabled (non disabled),

:checked (input type=checkbox/radio avec un check-

:indeterminate (input avec type=checkbox et indeter-

:default (button par défaut, ou input par défaut et

:placeholder-shown (input ou textarea avec placehold-

:valid (élément à contrainte de validation et qui sa-

:invalid (élément à contrainte de validation et qui

:in-range (élément à contrainte de validation et li-

:out-of-range (élément à contrainte de validation et

:required (input, select ou textarea ayant attribut

:read-write (1. élément input auquel s’applique

:dir(ltr) -> tout élément avec directionnalité ‘ltr’.

:dir(rtl) -> tout élément avec directionnalité ‘rtl’.

CHAPITRE 11 : LES PROPRIÉTÉS:

On peut accéder aux propriétés d’un objet de plusieurs façons :

1 Par le nom de la propriété. entre guillemets dans des crochets

// var dObj = new dObj();

Parcourir les éléments d’une collection / itération (array, object...) avec

Object.keys -> function keys()

<script type="text/javascript"> "use strict";

let our_Aiterator2 = Object.keys(_arr);

// « let _obj » et « _obj:45 == _obj._obj=45 »

let our_Oiterator = Object.keys(_obj);

Ajouter des propriétés à un objet existant :

<script model="text/javascript"> "use strict";

CHAPITRE 12 : LES PROPRIÉTÉS ET LEURS ATTRIBUTS :

Sur https://www.ecma-international.org/ecma-262/8.0 nous lisons ceci :

6.1.7.1 Property Attributes

Une propriété ayant « false » comme valeur de l’attribut Enumerable

<script type="text/javascript"> "use strict";

// [Re]Définition brève avec defineProperty

Ci-dessous, voici comment on peut manipuler ces attributs :

<script type="text/javascript"> "use strict";

2. Lire une ou les propriété(s) : .avec la méthode Ob-

<script type="text/javascript"> "use strict";

<script type="text/javascript"> "use strict";

// Définition de propriété lors de la création

// Définition directe de propriété à partir

// [Re]Définition brève avec defineProperty

// Modèle de [Re]Définition étendue avec defineProperty

console.dir("obj.nom=",obj.nom); // obj.nom= nomEl

// Au lieu des points on peut aussi utiliser

// On peut aussi utiliser des getters et setters.