Accessibilité d'éléments d'array et d'objet en JavaScript

Jean-Dadet Luyalu Dr. Diasoluka

Description

On peut utiliser des littérales pour identifier/accéder aux éléments d’une Array. On peut aussi explicitement étiqueter les éléments d’une Array avec des noms littéraux au lieu de l’indexation numérique automatique :

Sujets

• Éléments d'Euclide
• Accessibilité
• Objet
• Array

Informations

• Publié par: diasoluyalu
• Publié le: 24 mars 2019
• Nombre de lectures: 2
• Langue: Français

Extrait

A C C E S S I B I LTÉ D E SÉLÉM E N T S  D ’ A R RAY & & D ’ O B J E C T JAVA S C R I P T (Programmation Internet) X X I IVO L . P o u r D é b u t a n t s

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [e-mail]

Les fonctions en JavaScript sont de simples objets exactement comme les autres, et peuvent donc être créées avec l’opérateur «new».

En plus, il existe en JavaScript un type de fonctions dit fonctions échées dont la syntaxe est présentée ci- dessous.

Nous verrons aussi la parseFloat et toString.

 diFérence entre

parseInt,

Nous verrons ensuite comment accéder (atteindre) les éléments d’unecollection, d’unearray, et d’unobjet.

Nous verrons aussi la composition (représentation) interne de l’élément<input>.

CréationdeFunctionavec«nniocFteuwn:»

<scripttype="text/javascript">"use strict"; varmult =newFunction('a','b','return a * b'); console.log(mult(Math.PI,Math.E)); /* 8.539734222673566 */ </script>

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Fonctions échées :

<scripttype="text/javascript">"use strict"; varf1= (p1,p2) => p1*p1/p2 console.log(f1(80,182)) // 35.16483516483517 test.html:3:5

letpds=80,taille=182 varf2= _ => pds*pds/taille console.log(f2()) // 35.16483516483517 test.html:8:5 </script>

DiFerence entreparseInt, parseFloat et toString :







parseInt() :fonction « parseInt() »  La lit dans la base spéciîée comme deuxième paramètre [par défaut la base correspondant au format d’écriture du nombre], l’entier qui commence une chaïne de caractères, et l’ache TOUJOURS en décimal. parseFloat() : La fonction « parseloat() » extrait le ottant qui commence une chaïne de caractères. toString() : La méthode « convertit letoString() » nombre en string et le renvoie dans la base que vous spéciîez en paramètre.

Exemple,avecousans«use strict» :

<script>"use strict"; varpI=parseInt("0x10 heures 30 secondes") // Lit 0x10 [en base utilisée {hexadécimale} (10h)] // et l'affiche TOUJOURS en décimale (16d). consth=parseInt("0100 jours",16) // Lit 0100 en base Hexadécimale spécifiée // et l'affiche TOUJOURS en décimale (16d).

Accessibilité éléments Array - 2/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII

leto=pI.toString(8) // Lit 16d = 0x10 [TOUJOURS en décimale] // et l'affiche en octale (020), comme spécifié.

consto1=parseInt("010") // La base octale n'est pas reconnue en entrée. // Lue en décimale.

consto2=parseInt("010",8) // Lu en octale.

console.dir(pI+" | "+h+" | "+o+" | "+o1+" | "+o2)

varpF1=parseFloat("0x10 heures 30 secondes") // Ne lit les hexédécimaux qu'avant le 'x' // et affiche donc TOUJOURS zéro.

varpF2=parseFloat("16.85 heures",16) // Lit 16.85 [TOUJOURS en décimal] // et le renvoie TOUJOURS en décimale (16.50).

varpF3=pF2*2 // pF2 avait reçu en décimal.

letfo=pF2.toString(8) // Lit 16.85d [TOUJOURS en décimale] // et l'affiche en octale (20.663...), comme spécifié.

constfo1=parseFloat("010") // La base octale n'est pas reconnue en entrée. // Lue en décimale.

constfox=parseFloat("010",8) varfo2=fox *2 // Lit et renvoie en décimal.

console.dir(pF1+" | "+pF2+" | "+pF3+" | "+fo+" | "+fo1+" | "+fo2)

//16 | 256 | 20 | 10 | 8 Accessibilité éléments Array - 3/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII // 0 | 16.85 | 33.7 | 20.6631463146314632 | 10 | 20 </script>

Accessibilité des éléments d’une Collection :

<formname="fname">  <inputid="r1"name="r1"value=1>  <inputclass="cR1"name="r1"value=2>  <inputname="r3"value=3checked>  <inputid="r4"name="r4"value=4checked=true>  <inputname="r5"value=5checked=checked> </form>

<script>"use strict"; console.log(document.fname[0].value)// 1 console.log(document.fname["r3"].value)// 2 console.log(document.getElementById("r1").value)// 3

console.log(document.fname[0].checked) // false console.log(document.fname["r3"].checked) // true console.log(document.querySelector(".cR1").checked) // false console.log(document.getElementById("r1").checked) // false constidx="r4"; console.log(document.getElementById(idx).checked) // true console.log(document.fname["r5"].checked) // true

console.log(document.fname[0]) // <input id="r1" name="r1" value="1">

console.log(document.getElementById("r1")) // <input id="r1" name="r1" value="1">

console.log(document.fname["r3"]) // <input name="r3" value="3" checked="">

Accessibilité éléments Array - 4/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII

console.log(document.fname["r4"]) // <input id="r4" name="r4" value="4" checked="true">

console.log(document.fname["r5"]) // <input name="r5" value="5" checked="checked">

console.log(document.fname) // <form name="fname"> </script>

Accessibilité des éléments d’une Array :

<script>"use strict"; constp=Math.PI varar = [ "R1",p,Math.E, {"R1":"yours",2:"Hers",3:"Hers","Abdel":"Name","2":"Again" }, ["Dias",45,Math.PI,{},[]] ]

console.log(ar) // Array(5) [ "R1", 3.141592653589793, 2.718281828459045, {…}, (5) […] ] // (5) […] // 0: "R1" // 1: 3.141592653589793 // 2: 2.718281828459045 // 3: Object { 2: "Again", 3: "Hers", R1: "yours", … } // 4: Array(5) [ "Dias", 45, 3.141592653589793, … ] // length: 5 // <prototype>: Array []

console.log(ar[1])// 3.141592653589793

// console.log(ar.2) // missing ) after argument list[En savoir plus]

Accessibilité éléments Array - 5/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII test.html:12:18

varr3=3;console.log(ar[r3]) // Object { 2: "Again", 3: "Hers", R1: "yours", Abdel: "Name" } // {…} // 2: "Again" // 3: "Hers" // Abdel: "Name" // R1: "yours" // <prototype>: Object { … }

console.log(ar["4"])// 2.718281828459045 // Array(5) [ "Dias", 45, 3.141592653589793, {}, [] ] // (5) […] // 0: "Dias" // 1: 45 // 2: 3.141592653589793 // 3: Object { } // 4: Array [] // length: 5 // <prototype>: Array [] </script>

Nous venons de voir ci-dessus qu’on peut utiliser des littérales pour identiîer/accéder aux éléments d’une Array. On peut aussi explicitement étiqueter les éléments d’une Array avec des noms littéraux au lieu de l’indexation numérique automatique :

<scripttype="text/javascript">"use strict"; letarr1 = []; Accessibilité éléments Array - 6/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII arr1[0] =10,arr1[5]=34,arr1[7]=67;

letarr2 = []; arr2["zero"] =10,arr2["cinq"] =34, arr2["sept"] =67;

console.dir(arr1,arr2);

console.dir(arr1[0],arr1[2],arr1[3], arr1[5],arr1[7]); console.dir(arr2["zero"],arr2["deux"], arr2["trois"],arr2["cinq"], arr2["sept"]);

for(letiinarr1) console.log(i,arr1[i]) for(letiinarr2) console.log(i,arr2[i])

for(letiofarr1) console.log(i,arr1[i]) for(letiofarr2) console.log(i,arr2[i])

for(leti=0;i<arr1.length;i++)  console.log(i,arr1[i]) for(leti="zero";i<6;i++)  console.log(i,arr2[i])// N'affiche rien ! </script>

Notez les tailles des Arrays et les labels (« keys »).

Accessibilité éléments Array - 7/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII

Accessibilité des éléments d’un Objet :

<scripttype="text/javascript">"use strict"; consteventAlias="event";

consto = { nom:"Loyenge", age:100,

[eventAlias]:{ 1977:"Médec Gén, ",

Accessibilité éléments Array - 8/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII 1980:"Spécial Opht" },

"dites qqc"(){  console.log( `${this.nom},${this.age}` ); }  };

o["dites qqc"]();

console.log(o.nom,o.age,o["nom"],o["age"]); // Loyenge 100 Loyenge 100

console.log(o.event); // Object { 1977: "Médec Gén, ", 1980: "Spécial Opht" }

console.log(o[eventAlias]); // Object { 1977: "Médec Gén, ", 1980: "Spécial Opht" }

console.log(o.event["1977"],o.event["1980"]); // Médec Gén, Spécial Opht

console.log(o.event["2000"]); // undefined

console.log(o.age); // 100

console.log(o[0],o[1]); // undefined undefined </script>

Accessibilité éléments Array - 9/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII

<script>"use strict"; varob=function(p){ this.r1="R1"; this.r2= p; this.r3= Math.E; this.r4= {"R1":"yours",2:"Hers", 3:"Hers","Abdel":"Name","2":"Again"}; this.r5= ["Dias",45,Math.PI,{},[]] }

varar=newob(9);

console.log(ar) // ob {r1: "R1", r2: 9, r3: 2.718281828459045, r4: {…}, r5: Array(5)} // {…} // r1: "R1" // r2: 9 // r3: 2.718281828459045 // r4: Object { 2: "Again", 3: "Hers", R1: "yours", … } // r5: Array(5) [ "Dias", 45, 3.141592653589793, … ] // <prototype>: Object { … }

console.log(ar[1])// undefined

console.log(ar.r1)// R1

varr2="r2";console.log(ar[r2])// 9

console.log(ar["r3"])// 2.718281828459045 Accessibilité éléments Array - 10/25 - mercredi, 26. décembre 2018 (3:49 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII

console.log(ar.r4) // Object { 2: "Again", 3: "Hers", R1: "yours", Abdel: "Name" } // {…} // 2: "Again" // 3: "Hers" // Abdel: "Name" // R1: "yours" // <prototype>: Object { … }

console.log(ar["r5"]) // Array(5) [ "Dias", 45, 3.141592653589793, {}, [] ] // (5) […] // 0: "Dias" // 1: 45 // 2: 3.141592653589793 // 3: Object { } // 4: Array [] // length: 5 // <prototype>: Array [] </script>

Avec les “keys” ( clés ) :

<formclass="cName">  <inputid="r1"name="r1"value=1>  <inputclass="cR1"name="r1"value=21>  <inputname="r3"value=3checked>  <inputid="r4"name="r4"value=14checked=true>  <inputname="r5"value=35 checked=checked> </form>

<script>"use strict"; constf = document.querySelector(".cName"), l = f.length;

for(letkoff) console.log(k,` VALUE =${k.value}, name =${k.name},\

Accessibilité éléments Array - 11/25 - mercredi, 26. décembre 2018 (3:49 )