Accessibilité d

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

-

Documents
25 pages
Lire
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

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

Informations

Publié par
Publié le 24 mars 2019
Nombre de visites sur la page 0
Langue Français
Signaler un problème
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 -813572818diasfb@mail2world.com
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 )