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