accessibilite elements d'array - javascript tome xxii

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JA
V
ASCRIPT (ProgrammationInternet)VOL. XXII
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
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 fléchées
dont la syntaxe est présentée ci-dessous.
Nous verrons aussi la difference entre parseInt, parseFloat et toString.
Nous verrons ensuite comment accéder (atteindre) les éléments d’une collection, d’une array, et d’un objet.
Nous verrons aussi la composition (représentation) interne de l’élément <input>.
Création de Function avec « new Function » :
<script type="text/javascript"> "use strict";
var mult = new Function('a', 'b', 'return a * b');
console.log(mult(Math.PI, Math.E));
/* 8.539734222673566 */
</script>
Fonctions fléchées :
<script type="text/javascript">
var f1 = (p1,p2) => p1*p1/p2
console.log(f1(80,182))
// 35.16483516483517
"use strict";
let pds=80, taille=182
var f2 = _ => pds*pds/taille
console.log(f2())
// 35.16483516483517
</script>
test.html:3:5
test.html:8:5
Difference entre parseInt, parseFloat et toString :

parseInt() : La fonction « parseInt() » lit dans la base spécifiée comme
J.D.B. DIASOLUKA Nz. Luyalu


JavaScript Tome-XXII
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’affiche TOUJOURS en décimal.
parseFloat() : La fonction « parseFloat() » extrait le flottant qui
commence une chaîne de caractères.
toString() : La méthode « toString() » convertit le nombre en string et le
renvoie dans la base que vous spécifiez en paramètre.
Exemple, avec ou sans « use strict » :
<script> "use strict";
var pI=parseInt("0x10 heures 30 secondes")
// Lit 0x10 [en base utilisée {hexadécimale} (10h)]
// et l'affiche TOUJOURS en décimale (16d).
const h=parseInt("0100 jours",16)
// Lit 0100 en base Hexadécimale spécifiée
// et l'affiche TOUJOURS en décimale (16d).
let o=pI.toString(8)
// Lit 16d = 0x10 [TOUJOURS en décimale]
// et l'affiche en octale (020), comme spécifié.
const o1=parseInt("010")
// La base octale n'est pas reconnue en entrée.
// Lue en décimale.
const o2=parseInt("010",8)
// Lu en octale.
console.dir(pI+" | "+h+" | "+o+" | "+o1+" | "+o2)
var pF1=parseFloat("0x10 heures 30 secondes")
// Ne lit les hexédécimaux qu'avant le 'x'
// et affiche donc TOUJOURS zéro.
var pF2=parseFloat("16.85 heures",16)
// Lit 16.85 [TOUJOURS en décimal]
// et le renvoie TOUJOURS en décimale (16.50).
var pF3=pF2*2
// pF2 avait reçu en décimal.
let fo=pF2.toString(8)
// Lit 16.85d [TOUJOURS en décimale]
// et l'affiche en octale (20.663...), comme spécifié.
const fo1=parseFloat("010")
// La base octale n'est pas reconnue en entrée.
// Lue en décimale.
Functions & Accessibilité éléments
- 2/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
const fox=parseFloat("010",8)
var
fo2=fox * 2
// Lit et renvoie en décimal.
console.dir(pF1+" | "+pF2+" | "+pF3+" | "+fo+" | "+fo1+" |
"+fo2)
//16 | 256 | 20 | 10 | 8
// 0 | 16.85 | 33.7 | 20.6631463146314632 | 10 | 20
</script>
Accessibilité des éléments d’une Collection :
<form name="fname">
<input id="r1" name="r1"
<input
name="r1"
<input
name="r3"
<input id="r4" name="r4"
<input
name="r5"
</form>
value=1>
value=2>
value=3 checked>
value=4 checked=true>
value=5 checked=checked>
<script> "use strict";
console.log(document.fname[0].value)
console.log(document.fname["r3"].value)
console.log(document.getElementById("r1").value)
// 1
// 2
// 3
console.log(document.fname[0].checked)
// false
console.log(document.fname["r3"].checked)
// true
console.log(document.getElementById("r1").checked)
// false
console.log(document.getElementById("r4").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="">
console.log(document.fname["r4"])
// <input id="r4" name="r4" value="4" checked="true">
console.log(document.fname["r5"])
Functions & Accessibilité éléments
- 3/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
// <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";
const p=Math.PI
var ar = [
"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] test.html:12:18
var r3=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 []
Functions & Accessibilité éléments
- 4/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
</script>
Accessibilité des éléments d’un Objet :
<script> "use strict";
var ob = 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,{},[]]
}
var ar=new ob(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
var r2="r2";
// 9
console.log(ar[r2])
console.log(ar["r3"])
// 2.718281828459045
​
​
​
​
​
​
​
​
​
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 []
Functions & Accessibilité éléments
- 5/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
​ //
length: 5
​ //
<prototype>: Array []
</script>
Composition du champ document.fname :
<form name="fname">
test.html:8:2
form​
0: <input name="r1" value="1">
​1: <input name="r1" value="2">
​2: <input name="r3" value="3">
​
acceptCharset: ""
​accessKey: ""
​accessKeyLabel: ""
​
action: "file:///K:/DADET/PROGS/test.html"
​attributes: NamedNodeMap [ name="fname" ]
​autocomplete: "on"
​baseURI: "file:///K:/DADET/PROGS/test.html"
​
childElementCount: 3
​childNodes: NodeList(7) [ #text, input, #text, … ]
​children: HTMLCollection { 0: input, 1: input, length: 3, … }
​classList: DOMTokenList []
​className: ""
​
clientHeight: 66
​clientLeft: 0
​clientTop: 0
​clientWidth: 67
​
contentEditable: "inherit"
​contextMenu: null
​dataset: DOMStringMap(0)
​dir: ""
​draggable: false
​elements: HTMLFormControlsCollection { 0: input , 1: input ,
length: 3, … }
​
encoding: "application/x-www-form-urlencoded"
​enctype: "application/x-www-form-urlencoded"
​firstChild: #text "
"
​firstElementChild: <input name="r1" value="1">
​hidden: false
​id: ""
​
innerHTML: "\n
<input name=\"r1\" value=\"1\">\n
<input
name=\"r1\" value=\"2\">\n
<input name=\"r3\" value=\"3\">\n "
​
innerText: ""
Functions & Accessibilité éléments
- 6/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
​isConnected: true
​isContentEditable: false
​lang: ""
​lastChild: #text " "
​lastElementChild: <input name="r3" value="3">
​length: 3
​localName: "form"
​method: "get"
​name: "fname"
JavaScript Tome-XXII
​
namespaceURI: "http://www.w3.org/1999/xhtml"
​
nextElementSibling: <script>
​nextSibling: #text ""
​noValidate: false
​nodeName: "FORM"
​nodeType: 1
​nodeValue: null
​
offsetHeight: 66
​offsetLeft: 8
​offsetParent: <body>
​offsetTop: 8
​offsetWidth: 67
​
onabort: null
​onanimationcancel: null
​onanimationend: null
​onanimationiteration: null
​onanimationstart: null
​onauxclick: null
​onblur: null
​oncanplay: null
​oncanplaythrough: null
​onchange: null
​onclick: null
​onclose: null
​oncontextmenu: null
​oncopy: null
​oncut: null
​ondblclick: null
​ondrag: null
​ondragend: null
​ondragenter: null
​ondragexit: null
​ondragleave: null
​ondragover: null
​ondragstart: null
​ondrop: null
​ondurationchange: null
​onemptied: null
​onended: null
​onerror: null
​onfocus: null
​ongotpointercapture: null
​oninput: null
Functions & Accessibilité éléments
- 7/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
​oninvalid: null
​onkeydown: null
​onkeypress: null
​onkeyup: null
​onload: null
​onloadeddata: null
​onloadedmetadata: null
​onloadend: null
​onloadstart: null
​onlostpointercapture: null
​onmousedown: null
​onmouseenter: null
​onmouseleave: null
​onmousemove: null
​onmouseout: null
​onmouseover: null
​onmouseup: null
​onmozfullscreenchange: null
​onmozfullscreenerror: null
​onpaste: null
​onpause: null
​onplay: null
​onplaying: null
​onpointercancel: null
​onpointerdown: null
​onpointerenter: null
​onpointerleave: null
​onpointermove: null
​onpointerout: null
​onpointerover: null
​onpointerup: null
​onprogress: null
​onratechange: null
​onreset: null
​onresize: null
​onscroll: null
​onseeked: null
​onseeking: null
​onselect: null
​onselectstart: null
​onshow: null
​onstalled: null
​onsubmit: null
​onsuspend: null
​ontimeupdate: null
​ontoggle: null
​ontransitioncancel: null
​ontransitionend: null
​ontransitionrun: null
​ontransitionstart: null
​onvolumechange: null
​onwaiting: null
​onwebkitanimationend: null
​onwebkitanimationiteration: null
​onwebkitanimationstart: null
​onwebkittransitionend: null
Functions & Accessibilité éléments
- 8/14 pm)
JavaScript Tome-XXII
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
​onwheel: null
​
outerHTML: "<form name=\"fname\">\n
ue=\"1\">\n
<input name=\"r1\"
name=\"r3\" value=\"3\">\n </form>"
<input name=\"r1\" valvalue=\"2\">\n
<input
​
ownerDocument: HTMLDocument file:///K:/DADET/PROGS/test.html
​
parentElement: <body>
​parentNode: <body>
​prefix: null
​previousElementSibling: null
​previousSibling: null
​
scrollHeight: 66
​scrollLeft: 0
​scrollLeftMax: 0
​scrollTop: 0
​scrollTopMax: 0
​scrollWidth: 143
​
spellcheck: false
​style: CSS2Properties(0)
​tabIndex: -1
​tagName: "FORM"
​target: ""
​textContent: "\n
\n
​title: ""
\n
\n "
​
<prototype>: HTMLFormElementPrototype { submit: submit(), reset:
reset(), checkValidity: checkValidity(), … }
Composition du champ
<input id="r4" name="r4" value="4" checked="true"> :
input#r4
​accept: ""
​accessKey: ""
​accessKeyLabel: ""
​align: ""
​alt: ""
​
attributes: NamedNodeMap(4) [ id="r4", name="r4", value="4", … ]
​
autocomplete: ""
​autofocus: false
​
baseURI: "file:///K:/DADET/PROGS/test.html"
​
checked: true
​childElementCount: 0
​childNodes: NodeList []
​children: HTMLCollection { length: 0 }
Functions & Accessibilité éléments
- 9/14 pm)
dimanche, 14. octobre 2018 (3:41
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
​classList: DOMTokenList []
​className: ""
​
clientHeight: 20
​clientLeft: 0
​clientTop: 0
​clientWidth: 141
​
contentEditable: "inherit"
​contextMenu: null
​dataset: DOMStringMap(0)
​defaultChecked: true
​defaultValue: "4"
​dir: ""
​disabled: false
​draggable: false
​files: null
​firstChild: null
​firstElementChild: null
​form: <form name="fname">
​
formAction: "file:///K:/DADET/PROGS/test.html"
​
formEnctype: ""
​formMethod: ""
​formNoValidate: false
​formTarget: ""
​height: 0
​hidden: false
​id: "r4"
​indeterminate: false
​innerHTML: ""
​innerText: ""
​isConnected: true
​isContentEditable: false
​labels: NodeList []
​lang: ""
​lastChild: null
​lastElementChild: null
​list: null
​localName: "input"
​max: ""
​maxLength: -1
​min: ""
​minLength: -1
​multiple: false
​name: "r4"
​
namespaceURI: "http://www.w3.org/1999/xhtml"
​
nextElementSibling: <input name="r5" value="5" checked="checked">
​
nextSibling: #text "
​nodeName: "INPUT"
​nodeType: 1
​nodeValue: null
"
Functions & Accessibilité éléments - 10/14 (3:41 pm)
dimanche, 14. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
​
JavaScript Tome-XXII
offsetHeight: 22
​offsetLeft: 8
​offsetParent: <body>
​offsetTop: 74
​offsetWidth: 143
​
onabort: null
​onanimationcancel: null
​onanimationend: null
​onanimationiteration: null
​onanimationstart: null
​onauxclick: null
​onblur: null
​oncanplay: null
​oncanplaythrough: null
​onchange: null
​onclick: null
​onclose: null
​oncontextmenu: null
​oncopy: null
​oncut: null
​ondblclick: null
​ondrag: null
​ondragend: null
​ondragenter: null
​ondragexit: null
​ondragleave: null
​ondragover: null
​ondragstart: null
​ondrop: null
​ondurationchange: null
​onemptied: null
​onended: null
​onerror: null
​onfocus: null
​ongotpointercapture: null
​oninput: null
​oninvalid: null
​onkeydown: null
​onkeypress: null
​onkeyup: null
​onload: null
​onloadeddata: null
​onloadedmetadata: null
​onloadend: null
​onloadstart: null
​onlostpointercapture: null
​onmousedown: null
​onmouseenter: null
​onmouseleave: null
​onmousemove: null
​onmouseout: null
​onmouseover: null
​onmouseup: null
​onmozfullscreenchange: null
Functions & Accessibilité éléments - 11/14 (3:41 pm)
dimanche, 14. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
​onmozfullscreenerror: null
​onpaste: null
​onpause: null
​onplay: null
​onplaying: null
​onpointercancel: null
​onpointerdown: null
​onpointerenter: null
​onpointerleave: null
​onpointermove: null
​onpointerout: null
​onpointerover: null
​onpointerup: null
​onprogress: null
​onratechange: null
​onreset: null
​onresize: null
​onscroll: null
​onseeked: null
​onseeking: null
​onselect: null
​onselectstart: null
​onshow: null
​onstalled: null
​onsubmit: null
​onsuspend: null
​ontimeupdate: null
​ontoggle: null
​ontransitioncancel: null
​ontransitionend: null
​ontransitionrun: null
​ontransitionstart: null
​onvolumechange: null
​onwaiting: null
​onwebkitanimationend: null
​onwebkitanimationiteration: null
​onwebkitanimationstart: null
​onwebkittransitionend: null
​onwheel: null
​
outerHTML:
"<input
checked=\"true\">"
id=\"r4\"
name=\"r4\"
value=\"4\"
​
ownerDocument: HTMLDocument file:///K:/DADET/PROGS/test.html
​
parentElement: <form name="fname">
​
parentNode: <form name="fname">
​
pattern: ""
​placeholder: ""
​prefix: null
​
previousElementSibling: <input name="r3" value="3" checked="">
​
previousSibling: #text "
"
Functions & Accessibilité éléments - 12/14 (3:41 pm)
dimanche, 14. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
​readOnly: false
​required: false
​
scrollHeight: 20
​scrollLeft: 0
​scrollLeftMax: 0
​scrollTop: 0
​scrollTopMax: 0
​scrollWidth: 141
​
selectionDirection: "forward"
​selectionEnd: 0
​selectionStart: 0
​size: 20
​spellcheck: false
​src: ""
​step: ""
​style: CSS2Properties(0)
​tabIndex: 0
​tagName: "INPUT"
​textContent: ""
​textLength: 1
​title: ""
​type: "text"
​useMap: ""
​validationMessage: ""
​
validity: ValidityState { valueMissing:
false, patternMismatch: false, … }
false,
typeMismatch:
​
value: "4"
​valueAsDate: null
​valueAsNumber: NaN
​webkitEntries: Array []
​webkitdirectory: false
​width: 0
​willValidate: true
​
<prototype>: HTMLInputElementPrototype { stepUp: stepUp(), stepDown: stepDown(), checkValidity: checkValidity(), … }
Mots-clés :
fonctions,JavaScript,objets,opérateur new,fonctions fléchées, dont la syntaxe,parseInt,parseFloat,toString,accessibilité,éléments,collection,array,objet,représentation interne,élément,input.
Functions & Accessibilité éléments - 13/14 (3:41 pm)
dimanche, 14. octobre 2018
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-XXII
D
IA
SO
LU
K
AN
z. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
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 - 991239212 - 902263541 - 813572818
[email protected]
Functions & Accessibilité éléments - 14/14 (3:41 pm)
dimanche, 14. octobre 2018