javascript tome v

Transcription

javascript tome v

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JA
V
ASCRIPT VOL. III
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
XI.
Gestions de paramètres et nom de fonctions :
La propriété function.name (lecture seule) renvoie le nom de la fonction courante utilisée dans une instruction de fonction, ou "anonymous" (si elle a été créée de façon anonyme).
<script type="text/javascript"> "use strict";
function f(){
console.log("f() a reçu", arguments.length, "args:")
for(var i in arguments) console.log(i, arguments[i])
}
f(1,[],{},"texte",true);
// f() a reçu 5 arguments dont:
// 0 1 , 1 Array [] , 2 Object { } , 3 texte , 4 true
let f1=function(p,q,r,s,t,u){
}
console.log("f1() attend",f1.length,"arguments =\
nombre de paramètres formellement déclarés.");
// f1() attend 6 arguments =
// nombre de paramètres formellement déclarés.
console.log("f1.name=",f1.name); // f1.name= f1
// utilisée dans une instruction de fonction.
f1.displayName="nom_f1";
console.log("f1.name=",f1.name); // f1.name= f1
console.log("f1.displayName=",f1.displayName);
// f1.displayName= nom_f1
// Fonctions créées avec un constructeur
let f3 = Function();
console.log("f3.name=",f3.name); // f3.name= anonymous
let f4 = new Function();
console.log("f4.name=",f4.name); // f4.name= anonymous
console.log((new Function).name); // anonymous
// Fonction anonyme retournée
let f2 = function(){
return function(){};
}
const c=f2();
console.log("c.name=",c.name); // c.name=
var objet = {
uneMéthode1: function() {}, // anonyme
uneMéthode2: function objet_maMéthode() {}
};
console.log(objet.uneMéthode1.name); // uneMéthode1
console.log(objet.uneMéthode2.name); // objet_maMéthode
</script>
fn.length n'inclue pas les paramètres du reste et ne compte que les
paramètres situés avant le premier paramètre avec valeur par défaut.
Ne pas confondre non plus fn.length (nb de params attendus) et arguments.length (nbre d'arguments réellement passés à la fonction) qui
aussi est locale à la fonction.
<script type="text/javascript"> // "use strict";
let f1=function(p,q,r,s,t,...u){}
let f2=function(p,q,r=5,s,t,u){}
console.log("f1() attend",f1.length,"arguments.");
// f1() attend 5 arguments.
console.log("f2() attend",f2.length,"arguments.");
// f2() attend 2 arguments.
f2(1,2);
console.log("f2.arguments=",f2.arguments);
// f2.arguments= null
</script>
fn.name est readonly :
var objet = {
// anonyme
uneMéthode: function() {}
};
console.log(objet.uneMéthode.name); // uneMéthode
try{objet.uneMéthode.name = 'nvnom'}
catch(e) {console.log(e)};
// TypeError: "name" is read-only
objet.uneMéthode.name = 'nvnom';
// TypeError: "name" is read-only
</script>
J.D.B. DIASOLUKA Nz. Luyalu
2 / 24
JavaScript Tome-III
CHAPITRE 7 : async function dans JavaScript
La déclaration async function définit une fonction asynchrone. Celleci renvoie un objet AsyncFunction.
Exemple :
function ftimeout(x){
setTimeout(() => {
console.log(x,' resolved'); // ftimeout resolved
}, 5000);
return "retour de ftimeout()"
}
function resAftdel(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x+' resolved');
}, 5000);
});
}
async function asyncCall() {
console.log('calling'); // calling
var result = await resAftdel("asyncCall");
console.log(result); // asyncCall resolved
}
let ft=ftimeout;
console.log(ft("ftimeout")); // retour de ftimeout()
let fa=asyncCall();
console.log(fa); // Promise { <state>: "pending" }
// OUTPUT
// 13:09:02.310
// 13:09:02.317
// 13:09:02.318
// 13:09:07.311
// 13:09:07.319
</script>
test.html:24
test.html:18
test.html:27
test.html:4
test.html:20
->
->
->
->
->
3 / 24
retour de ftimeout()
calling
Promise {<pending>}
ftimeout resolved
asyncCall resolved
JavaScript Tome-III
Deux autres méthodes permettent de définir des fonctions asynchrones : le constructeur AsyncFunction et l’expression de fonction
asynchrone.
Expression de fonction asynchrone :
function ftimeout(x){
setTimeout(() => {
console.log(x,' resolved'); // ftimeout resolved
}, 15000);
return "retour de ftimeout()"
}
setTimeout(() => {
resolve(x+' resolved');
}, 10000);
});
}
// Expression de fonction asynchrone
let asyncCall = async function(){
}
let ft=ftimeout;
console.log(ft("ftimeout")); // retour de ftimeout()
let fa=asyncCall();
console.log(fa); // Promise { <state>: "pending" }
/* OUTPUT avec YANDEX
18:19:11.691 test.html:25 -> retour de ftimeout()
18:19:11.705 test.html:19 -> calling
18:19:11.706 test.html:28 -> Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
1 Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
A
__proto__:Promise
1 catch:ƒ catch()
2 constructor:ƒ Promise()
3 finally:ƒ finally()
4 then:ƒ then()
4 / 24
JavaScript Tome-III
5 Symbol(Symbol.toStringTag):"Promise"
6 __proto__:Object
B
[[PromiseStatus]]:"resolved"
C
[[PromiseValue]]:undefined
18:19:21.862 test.html:21 -> asyncCall resolved
18:19:26.696 test.html:4 -> ftimeout resolved */
Syntaxe :
async function name([param[, param[, ... param]]]) {
instructions
}
Valeur de retour :
Un objet AsyncFunction qui représente une fonction asynchrone qui
exécute le code contenu dans la fonction.
Lorsqu'une fonction asynchrone est appelée, elle renvoie une
promesse (promise).
Lorsque la fonction asynchrone renvoie une valeur, la promesse est résolue avec la valeur renvoyée.
Lorsque la fonction asynchrone lève une exception, la promesse est
rompue avec la valeur de l'exception.
Notez ci-dessous que Promise n’est pas explicitement définie.
function resAftdel(x) {}
}
console.log(asyncCall()); // Promise { <state>:
"pending" }
// Note: Promise n’est pas explicitement définie.
/* OUTPUT avec FIREFOX
calling
Promise { <state>: "pending" }
5 / 24
test.html:11:3
test.html:16:1
JavaScript Tome-III
Promise { "pending" }
<state>: "pending"
__proto__: PromiseProto

catch: function catch()

constructor: function Promise()
all: function all()

length: 1

name: "Promise"

prototype: PromiseProto { … }

constructor: function Promise()

finally: function finally()

then: function then()

Symbol(Symbol.toStringTag): undefined

__proto__: Object { … }

race: function race()

reject: function reject()

resolve: function resolve()

Symbol(Symbol.species): undefined

__proto__: function ()

finally: function finally()

undefined
test.html:13:3
OUTPUT avec YANDEX
23:46:11.555 test.html:11 calling
23:46:11.559 test.html:16 Promise {[[PromiseStatus]]:
"pending", [[PromiseValue]]: undefined}__proto__:
Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]:
undefined
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
A
__proto__:Promise
I
catch:ƒ catch()
II
constructor:ƒ Promise()
a
all:ƒ all()
b
arguments:(...)
c
caller:(...)
d
length:1
e
name:"Promise"
f
prototype:Promise {Symbol(Symbol.toStringTag): "Promise", constructor: ƒ, then: ƒ, catch: ƒ}
g
race:ƒ race()
h
reject:ƒ reject()
6 / 24
JavaScript Tome-III
i
j
k
resolve:ƒ resolve()
Symbol(Symbol.species):(...)
get Symbol(Symbol.species):ƒ [Symbol.species]()
l
__proto__:ƒ ()
m
[[Scopes]]:Scopes[0]
I
then:ƒ then()
II
Symbol(Symbol.toStringTag):"Promise"
III
__proto__:Object
A
[[PromiseStatus]]:"resolved"
B
[[PromiseValue]]:undefined
23:46:11.561 test.html:13 undefined */
</script>
Avec Promise explicitement définie :
setTimeout(() =>
resolve(x+' resolved') , 10000);
});
}
}
console.log(asyncCall()); // Promise { <state>:
"pending" }
/* OUTPUT
00:12:53.250 test.html:11 -> calling
00:12:53.254 test.html:16 -> Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
00:13:03.255 test.html:13 -> asyncCall resolved */
</script>
Une expression await permet à une fonction asynchrone d'interrompre
son exécution en attendant la résolution d'une promesse passée à l'expression. La fonction asynchrone poursuit son exécution quand la promesse est résolue.
7 / 24
JavaScript Tome-III
const arg=10,delay=10000;
console.log("Dans resAftdel()");
setTimeout(() => {
resolve(x);
}, delay);
});
}
// Ici, await la fonction appelée
async function add1(x) {
console.log(x,typeof x);
const a = await resAftdel(20);
console.log(a,typeof a);
const b = await resAftdel(30);
console.log(b,typeof b);
// b=... doit attendre la fin de a=...
return x + a + b;
}
// Appel normal, Affiche promise.
console.log(add1(arg));
// Pour afficher la valeur retournée par add1() :
// On exécute la fonction async, puis (then)...
// ici fonction fléchée
add1(arg).then(v => { console.log(v); });
// v est le résultat retourné par add1
// Affiche le résultat, à l'expiration du delai.
// Ici, await l'initialiation de la variable
async function add2(x) {
const a = resAftdel(20);
const b = resAftdel(30);
return x + await a + await b;
// await a et await b attendent concurrenciellement
}
add2(arg).then(v => { console.log(v); });
// v est le résultat retourné par add2
8 / 24
JavaScript Tome-III
// Affiche le résultat, à l'expiration du delai.
// OUTPUT
// 12:48:53.071
// 12:48:53.075
// 12:48:53.076
// 12:48:53.079
// 12:48:53.080
// 12:48:53.080
// 12:48:53.080
// 12:49:03.076
// 12:49:03.076
// 12:49:03.081
// 12:49:03.081
// 12:49:03.082
// 12:49:13.077
// 12:49:13.082
// 12:49:13.082
</script>
test.html:15
test.html:4
test.html:26
test.html:15
test.html:4
test.html:4
test.html:4
test.html:17
test.html:4
test.html:17
test.html:4
test.html:46
test.html:19
test.html:19
test.html:32
->
->
->
->
->
->
->
->
->
->
->
->
->
->
->
10 "number"
Dans resAftdel()
Promise {<pending>}
10 "number"
Dans resAftdel()
Dans resAftdel()
Dans resAftdel()
20 "number"
Dans resAftdel()
20 "number"
Dans resAftdel()
60
30 "number"
30 "number"
60
Ne confondez pas await et Promise.all(). Les appels à await sont exécutés en série et pas en parallèle, contrairement à Promise.all() qui exécute plusieurs promesses en parallèle.
Anatomie de la fonction Promise() à la console :
>Promise
function Promise()
Promise()
length: 1
name: "Promise"
prototype: PromiseProto
constructor: Promise()
length: 1
name: "Promise"
prototype: PromiseProto
constructor: Promise()
length: 1
name: "Promise"
prototype: PromiseProto { … }
9 / 24
JavaScript Tome-III
Et les propriétés propres de Promise :
Object.getOwnPropertyNames(Promise)
Array [ "all", "race", "reject", "resolve", "prototype", "length", "name" ]
Et les descripteurs de propriétés propres de Promise :
Object.getOwnPropertyDescriptors(Promise)
Object { all: {…}, race: {…}, reject: {…}, resolve: {…}, prototype: {…},
length: {…}, name: {…}, Symbol(Symbol.species): {…} }
{…}
all: Object { writable: true, enumerable: false, configurable: true, … }
length: Object { value: 1, writable: false, enumerable: false, … }
name: Object { value: "Promise", writable: false, enumerable: false, … }
prototype: Object { writable: false, enumerable: false, configurable: false,
… }
race: Object { writable: true, enumerable: false, configurable: true, … }
reject: Object { writable: true, enumerable: false, configurable: true, … }
resolve: Object { writable: true, enumerable: false, configurable: true, … }
Symbol(Symbol.species): Object { get: get [Symbol.species](), enumerable: false, configurable: true, … }
10 / 24
JavaScript Tome-III
CHAPITRE 8 : Les OPÉRATEURS dans JavaScript
JavaScript comporte une gamme complète d’opérateurs (arithmétiques,
logiques, bitwise, d’affectation (assignment), et autres.
I.
Computational Operators
II.
Logical Operators
III.
Bitwise Operators
Description
Unary negation
Increment
Decrement
Multiplication
Division
Modulus arithmetic
Addition
Subtraction
Symbol
++
-*
/
%
+
-
Description
Logical NOT
Less than
Greater than
Less than or equal to
Greater than or equal to
Equality
Inequality
Logical AND
Logical OR
Conditional (ternary)
Comma
Strict Equality
Strict Inequality
Symbol
!
<
>
<=
>=
==
!=
&&
||
?:
,
===
!==
Description
Bitwise NOT
Bitwise Left Shift
Bitwise Right Shift
Unsigned Right Shift
Bitwise AND
Symbol
~
<<
>>
>>>
&
11 / 24
JavaScript Tome-III
Description
Bitwise XOR
Bitwise OR
IV.
Assignment Operators
Description
Assignment
Compound Assignment
V.
Miscellaneous Operators
VI.
Equality and Strict Equality
Symbol
^
|
Symbol
=
OP= (such as +=
and &=)
Description
delete
typeof
void
instanceof
new
in
Symbol
Delete
typeof
Void
instanceof
New
In
L’opérateur d’égalité == (equality) coerce (transtype) les valeurs des différents types avant la comparaison ("1" == 1), tandis que l’opérateur
d’égalité stricte === (strict equality) les compare comme telles ("1" !== 1).
Les valeurs primitives (strings, numbers, Booleans) sont comparées par
les valeurs qu’elles renferment, qu’elles représentent. Si deux variables
renferment la même valeur, elles sont considérées comme égales.
Les objets (Array, Function, String, Number, Boolean, Error, Date et RegExp objects) sont plutôt des références (pointeurs) ; elles renferment
l’adresse de (pointent) la donnée. Ils sont comparés par référence (c’est
la valeur contenue à l’adresse-mémoire pointée qui est comparée). Si
les valeurs ainsi pointées sont égales, alors les deux objets sont égaux.
<script type="text/javascript">
"use strict";
var k=7, m=7;
console.log(k==m);
// true
console.log(k===m); // true
var p=new String("7"), q=new String("7");
console.log(p==q);
// false
console.log(p===q); // false
console.log(p.valueOf()==q.valueOf());
// true
console.log(p.valueOf()===q.valueOf());
// true
12 / 24
JavaScript Tome-III
console.log(p.toString()==q.toString());
console.log(p.toString()===q.toString());
console.log(String(p)==String(q));
console.log(String(p)===String(q));
</script>
//
//
//
//
true
true
true
true
Opérateurs modulo, égalité, ... avec les Nombres d’Armstrong :
function sr(t){
var cpt=0,mp,exp=11
console.log(t.toExponential(2)) // 1.00e+9
for(var p=0;p<=t;p++){
let m=0,r=0,n=p,ps=String(p)
/*
for(var te=0,l=ps.length;te<l;)
if(Math.pow(ps.charAt(te++),exp)>t)continue; */
for(var k=0,l=Math.log10(n);k<=l;k++){
m=n%10
if((mp=Math.pow(m,exp))>t) {
//
console.log(p+") "+mp.toExponential(2))
break // Nb svt, p.e. de 999 à 1000
}
n=(n-m)/10
r+=mp;
}
if(r==p)console.log(++cpt+") p="+p+", r="+r+" = N
d'Armstrong"+exp)
// 1) p=0, r=0 = N d'Armstrong3
// 2) p=1, r=1 = N d'Armstrong3
// 3) p=153, r=153 = N d'Armstrong3
// 4) p=370, r=370 = N d'Armstrong3
// 5) p=371, r=371 = N d'Armstrong3
// 6) p=407, r=407 = N d'Armstrong3
}
}
sr(1e9)
</script>
Pas un seul nombre d’Armstrong3 de 408 à 1e9 !
Ce qui est plus choquant, c’est qu’il n’y a aucun nombre d’Armstrong
(sauf le 0 et le 1) avec l’exposant 2, jusqu’à 1e9 :
1) p=0, r=0 = N d'Armstrong2
Si au lieu du cube des chiffres constitutifs du nombre on les élève à
l’exposants 4 (il suffit de modifier la ligne 9), on obtient les nombres
d’Armstrong à l’exposant 4 suivants, entre 1 et 1e9 :
13 / 24
JavaScript Tome-III
3) p=1634, r=1634 = N d'Armstrong4
4) p=8208, r=8208 = N d'Armstrong4
5) p=9474, r=9474 = N d'Armstrong4
Si au lieu de l’exposant 4 on utilise l’exposant 5, on obtient les nombres
d’Armstrong à l’exposant 5 suivants, entre 1 et 1e9 :
1)
2)
3)
4)
5)
6)
7)
8)
p=0, r=0 = N d'Armstrong5
p=54748, r=54748 = N d'Armstrong5
p=92727, r=92727 = N d'Armstrong5
p=93084, r=93084 = N d'Armstrong5
p=194979, r=194979 = N d'Armstrong5
Avec l’exposant 6, un seul nombre d’Armstrong outre le 0 et 1 :
3) p=548834, r=548834 = N d'Armstrong6
Avec l’exposant 7, on obtient les nombres d’Armstrong suivants :
1)
2)
3)
4)
5)
6)
7)
p=1741725, r=1741725 = N d'Armstrong7
p=4210818, r=4210818 = N d'Armstrong7
p=9800817, r=9800817 = N d'Armstrong7
p=9926315, r=9926315 = N d'Armstrong7
p=14459929, r=14459929 = N d'Armstrong7
1)
2)
3)
4)
5)
p=24678050, r=24678050 = N d'Armstrong8
p=24678051, r=24678051 = N d'Armstrong8
p=88593477, r=88593477 = N d'Armstrong8
1)
2)
3)
4)
5)
6)
p=0, r=0 = N
p=1, r=1 = N
p=146511208,
p=472335975,
p=534494836,
p=912985153,
d'Armstrong9
d'Armstrong9
r=146511208 =
r=472335975 =
r=534494836 =
r=912985153 =
N
N
N
N
d'Armstrong9
d'Armstrong9
d'Armstrong9
d'Armstrong9
Avec exp >10 pour 1e9, aucun nombre d’Armstrong outre le 0 et le 1 :
14 / 24
JavaScript Tome-III
Sinus d’un angle avec Formule de Taylor :
function sin(a,n){
var cpt=0, s, r=0
console.log("sin "+a+" s. de Taylor "+-(-n-1)+" terms")
for(var p=0;p<=n;p++){
r+=Math.pow(-1,p)*Math.pow(a,2*p+1)/fact(2*p+1)
s=Math.sin(a)
}
console.log("r = "+r)
console.log("Math.sin = "+s)
if(r==s)console.log("r="+r+" = Math.sin = "+s)
else console.log("D = "+eval(r-s))
// sinus 10 série de Taylor -> n=153
// r = -0.5440211108892695
// Math.sin = -0.5440211108893698
// D = 1.0025313912365164e-13
}
sin(10,153)
function fact(n) {
if (n == 0) return 1;
else return fact(n-1)*n ; }
</script>
CHAPITRE 9 : La FONCTION setInterval(fct,del) dans JS
<div id="idiv" style="width:200;height:60"></div>
function timeLaps() {
// The timeLaps() constructor defines `this`
// as an instance of itself.
var that=this;
// pointeur that = alias de this, mais
// n'est pas traité (reconnu, référencé) de la même
// façon que le mot-clé this.
// On peut utiliser n’importe quel nom de variable
// autorisé à la place de that ;
// essayez par exemple voglo à la place de that.
that.gb = "Hey, you";
that.delay=5000;
let t=setTimeout(function () {
// In non-strict mode, the function defines `this`
15 / 24
JavaScript Tome-III
// as the global object, which is different from
// the `this` defined by the timeLaps() constructor.
document.getElementById('idiv').innerText=
that.gb +" "+ that.delay/1000 + " secs past";
if(that.secs>=10)clearTimeout(t);
}, this.delay);
}
var p = new timeLaps();
</script>
// Hey, you 5 secs past
CHAPITRE 10 : Les FONCTIONS dans JavaScript
Une fonction est un bloc de texte (aussi appelée « sous-programme »)
que le navigateur interprète comme instructions pour exécuter une tâche précise, et que l’on peut appeler autant de fois au besoin à partir de
n’importe où : de l’extérieur de la fonction (call) ou du sein de la fonction même (récursion).
La définition d’une fonction est reconnaissable par une paire de parenthèses (vide ou non), suivie d’une paire d’accolades (curly brackets, vide
ou non). Le contenu de la paire de parenthèse représente les
paramètres formels, et le contenu du bloc des accolades est le code
ou corps de la fonction. Le corps de la fonction peut aussi être vide.
Un fonction sert habituellement à effectuer une tâche, et retourne (renvoie) obligatoirement une valeur, implicitement via l’instruction return,
habituellement le résultat de la tâche effectuée par la fonction. Par
exemple la fonction sin(x) retourne le sinus de la valeur représentée
par l’argument x, la fonction factorielle(x) retourne la factorielle du
nombre en argument.
La valeur retournée par une fonction peut être de n’importe quel type
légal (par défaut undefined), et en particulier une autre fonction
(l’adresse-mémoire de cette dernière) ou d’elle-même (fonctions récursives), une Array (p.ex. « return [v1,v2...] »), un objet (p.ex. return {x:val}),
une propriété d’objet (p.ex. « return obj.attr »), une chaîne [de caractère] (p.ex. « return "chaîne" », un nombre p.ex. « return 5 »,... ) ces valeurs de retour pouvant être représentée par des variables ou des constantes (chaînes ou scalaires).
Il y a deux façons de déclarer une fonction en JS : Comme fonctions
nommée (ayant un nom identifiant ou comme fonction anonyme.
16 / 24
JavaScript Tome-III
I. Fonctions NOMMÉES :
"use strict";
/* I.1. */
function foo(p){ p() }; // Classique.
/* I.2. */
/* I.3. */
</script>
var fob = function(){}; // Affectée.
var foc = () => {}; // Fléchée.
En fait, seule la foo() dans I.1. est une fonction nommée. fob dans I.2. et
foc dans I.3. (fonction fléchée) sont des pointeurs (alias) sur fonction
anonyme, ou alias de la fonction. Les fonctions fléchées sont TOUJOURS anonymes.
II. Fonctions ANONYMES :
"use strict";
/* II.1. */
/* II.2. */
(function(){})(); // Inline.
!function(){}(); // Exécution immédiate.
/* II.3. */
function fob(){ // FCT NOMMÉE
foo( // fob() appelle foo() (son arg= fct anonyme).
function(){console.log(Math.E)} // FCT ANONYME
)
}
fob(); // Appel de fob() juste ci-dessus.
</script>
La syntaxe de définition d’une fonction est comme suit :
Le mot clé « function », le nom (identifiant de votre goût) de la fonction (sauf quand il s’agit de fonction anonyme) suivi d’une paire de parenthèses (pouvant contenir une liste de paramètres formels séparés
par des virgules), suivie directement (éventuellement avec des espaces)
d’une paire d’accolades (le corps de la fonction) entre lesquelles se
trouve le contenu (instructions et données) de la fonction.
17 / 24
JavaScript Tome-III
function f_id(){
// corps de la fonction
}
</script>
ou alternativement le nom (identifiant) de la fonction peut précéder, plutôt on affecte l'adresse de la fonction (pointeur) à une variable ou autant de variables que l’on veut. Ces variables ne sont en fait pas des
identifiants de fonction, mais des « pointeurs sur fonctions anonymes»;
en d’autres termes « alias de fonction ».
v_f_id = function (){
// corps de la fonction
}
</script>
On appelle la fonction par son identifiant et éventuellement avec des
arguments entre parenthèses, comme ceci :
function f_date(d,m,y){
return new Date(y,m-1,d)
}
</script>
f_age = function (a){
return (new Date()-a)/(1000*3600*24*365.2475);
}
date=f_date(27,7,2005);
age=f_age(new Date(2005,7,27));
console.log(date);
console.log(age+" ans.");
</script>
Exécution :
Wed Jul 27 2005 00:00:00 GMT+0100 (Paris, Madrid)
12.352855437858855 ans.
18 / 24
this.html:17
this.html:18
JavaScript Tome-III
Déf. : Un argument d’une fonction est un paramètre passé à la fonction appelée par la fonction appelante, et qui est réceptionnée dans la
fonction appelée par le paramètre formel qui se trouve à la même position (même numéro d’ordre) que dans la liste d’arguments..
Une fonction est appelée pour effectuer une tâche dont le résultat peut
être retourné par la fonction et doit être stocké dans une variable ou
utilisé directement dans un calcul ou être directement affiché, envoyé
vers le paramètre d’une autre fonction comme argument... Par défaut
(quad il n’y a pas de directive return ou quand return ne spécifie pas
une valeur de retour) la fonction retourne « undefined ».
Une fonction peut avoir ses propres variables, on les appelle « variables
locales », ces variables locales peuvent avoir une accessibilité (visibilité)
limitée à son bloc quand elles sont déclarées avec le mot-clé var (variables locales au vrai sens du mot), ou se faire voir ou accéder à partir
de n’importe où (se comportent comme des variables globales).
Une fonction peut être imbriquée dans une autre (et ainsi de suite),
leurs variables locales à visibilité globales peuvent être accédées l’une
par l’autre et vice-versa.
Toute fonction peut même accéder aux variables non var de n’importe
quelle autre fonction, et ses variable non var peuvent être accédées en
dehors de toute fonction (dans l’espace global).
En JS « fonction » et « objet » ne sont qu’une et même chose. Un objetpropriété (membre) est créé chaque fois qu’on définit une fonction dite
« ordinaire », exactement de la même façon que quand on crée un objet.
Les fonctions sont ainsi dites « objets de première classe » car elles
peuvent être manipulées, échangées, avoir des propriétés et des méthodes, comme tout autre objet JS. Une fonction JS ordinaire soit-elle est
donc ni plus ni moins un objet Function (callable object).
Exemple d’une fonction «pure» utilisée comme objet :
var Fruit = function(n,s){
// Variables locale
couleur= "rouge";
poids= 50;
console.log("Appel via "+s)
};
19 / 24
JavaScript Tome-III
// Appel d'une fonction se retournant cô objet
pomme=Fruit(10 , "CONSTRUCTEUR");
// Appel de la fonction Fruit via pomme
// TypeError: pomme is undefined
// console.log(pomme.couleur);
// Appel direct de la Fruit fonction
console.log(Fruit.couleur);
////////
// Appel de la fonction ORDINAIRE
Fruit(null , "ORDINAIRE");
r = pomme instanceof Fruit;
console.log("pomme instanceof Fruit = "+r);
console.log("pomme instanceof Fruit = "+
eval(pomme instanceof Fruit));
</script>
Exécution :
Appel via CONSTRUCTEUR
undefined
Appel via ORDINAIRE
pomme instanceof Fruit = false
Ici l’instance est créé avec « new » :
couleur="jaune"
console.log("Couleur = "+couleur)
}
// Créer une instance-objet de cette fonction
pomme=new Fruit();
// Appel de la fonction Fruit via pomme
console.log(pomme.couleur);
// Appel direct de la Fruit fonction
20 / 24
JavaScript Tome-III
console.log(Fruit.couleur);
////////
Fruit();
</script>
Exécution :
Couleur = jaune
undefined
undefined
Couleur = jaune
pomme instanceof Fruit = true
pomme instanceof Fruit = true
Exemple d’une fonction qui se retourne elle-même :
Dans cet exemple on voit :
1) La fonction qui se retourne elle-même avec l’opérateur « this ».
2) La récursion qui calcule ici la factorielle du nombre en argument.
3) La redéfinition (écrasement) de la fonction « toString() ».
// Variables locale
couleur= "rouge";
poids= 50;
// Ds [ toString= function() { ] ci-dessous
// n est argument de la fonction ordinaire Fruit
toString= function() {
if(n==1) return 1;
else return n * toString(n--);
}
console.log("Appel via "+s)
return this; // retourne la fonction-même.
};
21 / 24
JavaScript Tome-III
// Appel d'une fonction se retournant cô objet
pomme=Fruit(10 , "CONSTRUCTEUR");
// Appel direct de la fonction imbriquée toString()
console.log(pomme.toString("IMBRIQUÉE"));
////////
Fruit(null , "ORDINAIRE");
</script>
Exécution :
Appel via CONSTRUCTEUR
3628800
Appel via ORDINAIRE
En JS des instructions peuvent s'exécuter en dehors d'un bloc de fonction, pour autant qu’elles soient au sein d’un élément SCRIPT.
console.log("dieu est dieu".toUpperCase())
</script>
Affiche :
DIEU EST DIEU
Ces instructions en dehors d'une fonctions sont exécutées sans trigger,
au temps de chargement de la page Web / document HTML, et peuvent
servir par exemple pour des annonces ou à aménager / initialiser certaines situations lors du chargement de la page.
Les fonctions regroupent dans un même bloc fonctionnel compact un
lot d'instructions (code) et de variables (données) obligatoirement à
22 / 24
JavaScript Tome-III
exécuter au cours d'une même demande (appel à la fonction) en respectant la règle du flux.
Syntaxe minimale d'une déclaration de fonction :
function id_fct(){}
Pour qu'une fonction s'exécute elle doit être appelée (invoquée) explicitement ou par un event (événement : la fonction devient alors event
handler = callback) et son bloc doit préalablement être entré/pénétré,
alors se crée son « Environnement Lexical » qui englobe ses instructions et données. À la sortie du bloc de fonction l'environnement lexical
de la fonction est généralement détruit y compris ses instructions et variables LOCALES (sauf si cette fonction retourne une autre fonction [imbriquée], dans lequel cas l'environnement lexical de la fonction englobante est conservé, la fonction imbriquée retournée par la fonction englobante gardant un lien vers l'environnement lexical de cette fonction
qui la contient, donc dans laquelle elle a été déclarée/définie). L'Environnement Lexical est une zone-mémoire allouée (réservée) au code et
aux données de la fonction.
function id_fct(paramètres){}
Une fonction non inline ne peut s'exécuter sans appel explicite.
// Définition de la fonction
function id_fct([paramètres]){}
// Appel à la fonction
id_fct([arguments]);
Exemple :
// Définition de la fonction
function id_fct(){
console.log("dieu est transcendant".toUpperCase().split(""))
}
// Appel à la fonction
id_fct();
</script>
23 / 24
JavaScript Tome-III
ExécutionAvec Internet explorer 10.0.9200.17607 :
DIEU,EST,TRANSCENDANT
ExécutionAvec Baidu 43.23.1008.601 :
["DIEU", "EST", "TRANSCENDANT"]
Exécution (Opéra 44.0.2510.1218 (PGO) et Yandex 17.10.1.1204)
Array(3)
0: "DIEU"
1: "EST"
2: "TRANSCENDANT"
length: 3
__proto__: Array(0)
Avec FIREFOX :
Array [ "DIEU", "EST", "TRANSCENDANT" ]
24 / 24
JavaScript Tome-III