petite introduction aux fonctions JavaScript

Transcription

petite introduction aux fonctions JavaScript
Petite Introduction Aux
Fonctions JavaScript
J AVA S C R I P T (Programmation Internet) V O L . I V
Po u r D é b u t e r
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
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.
<script type="text/javascript">
console.log("dieu est dieu".toUpperCase())
</script>
Affiche :
Ces instructions en dehors d'une fonction 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 à
exécuter au cours d'une même demande (appel à la fonction) en
respectant la règle du flux.
Petite Introduction Aux Fonctions JavaScript
ECMASCRIPT définit une fonction comme ceci :
« member of the Object type that may be invoked as a subroutine ».
Les fonctions sont des blocs de texte plutôt de code (aussi appelée
« sous-programme ») que le navigateur interprète comme bloc
d’instructions pour en principe exécuter une tâche précise, et que
l’on peut appeler au besoin à partir de n’importe où : de
l’extérieur de la fonction (usage habituel) ou du sein de la fonction
même (récursion).
La syntaxe de 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èses représente les paramètres formels (=formellement déclarés),
et le contenu du bloc des accolades est le code ou corps de la
fonction. Le corps de la fonction peut aussi être vide.
Une paire de parenthèses non suivie d’accolades (« curly braces »)
indique que c’est un appel de fonction.
Le nom d’une fonction définie/déclarée, non suivi de parenthèses ni
d’accolades, est un pointeur sur (donne l’adresse-mémoire de) la
fonction.
Une fonction sert habituellement à effectuer une tâche spécifique,
et retourne (renvoie) obligatoirement une valeur (par défaut « undefined »), 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
mardi 31 juillet 2018
- 2/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
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}), un attribut 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).
Les fonctions sont considérées et traitées comme des données,
1. Pouvant être passées à d’autres fonctions en arguments et
2. Pouvant être retournées par une autre fonction comme résultat.
Il y a deux types de fonctions :
1. Les fonctions « pures » dont le résultat ne dépend que des
paramètres qu’elle prend en entrée, et n’altèrent aucunement
l’environnement dans lequel elle sont exécutées (ni par des affichages/messages, ni n’altèrent les variables globales,... et ni
même ne sollicitent des données externes [variables globales
ou externes]...).
2. Les fonctions « impures », qui naturellement ne sont pas
pures.
Exemple de fonction « pure » utilisée comme objet :
<script type="text/javascript">
var Fruit = function(n,s){
// Variables locale
mardi 31 juillet 2018
- 3/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
couleur= "rouge";
poids= 50;
console.log("Appel via "+s)
};
// 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
// TypeError: pomme is undefined
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 :
Ici l’instance est créé avec l’opérateur « new », comme de règle :
<script type="text/javascript">
var Fruit = function(n,s){
couleur="jaune"
console.log("Couleur = "+couleur)
}
// Créer une instance-objet de cette fonction
pomme=new Fruit();
// Appel de la fonction Fruit via pomme
// TypeError: pomme is undefined
console.log(pomme.couleur);
// Appel direct de la Fruit fonction
// TypeError: pomme is undefined
console.log(Fruit.couleur);
mardi 31 juillet 2018
- 4/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
////////
// Appel de la fonction ORDINAIRE
Fruit();
r = pomme instanceof Fruit;
console.log("pomme instanceof Fruit = "+r);
console.log("pomme instanceof Fruit = "+
eval(pomme instanceof Fruit));
</script>
Exécution :
Exemple de fonction « impure » :
<script type="text/javascript"> "use strict";
let quet_bmi = (pds, taille) => pds / (taille * taille);
console.log(quet_bmi(60,1.72)) // 20.281233098972418
let dias_bmi = (pds, taille) => (pds / taille) * pds;
console.log(dias_bmi(60,172)) // 20.930232558139537
</script>
Fonctions nommées et fonctions anonymes :
Il y a deux façons de déclarer une fonction en JS : Comme fonctions nommée (ayant un nom identificateur = identifiant ou comme
fonction anonyme.
Les fonctions nommées peuvent être appelées de n’importe où,
les fonctions anonymes s’exécutent (sont invoquées) juste à la fin
de leur définition (expressions de fonctions immédiatement invomardi 31 juillet 2018
- 5/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
quées) ou utiliser comme event Handler ou qu’on peut affecter à
une variable (soit la valeur qu’elle retourne, soit son adresse =
pointeur).
I. Fonctions NOMMÉES :
<script type="text/javascript">
"use strict";
/* I.1. */ function foo(p){ p() }; // Classique.
/* I.2. */ var fob = function(){}; // Affectée.
/* I.3. */ var foc = () => {}; // Fléchée.
</script>
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 :
<script type="text/javascript">
"use strict";
/* II.1. */ (function(){})(); // Inline.
/* II.2. */ !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
mardi 31 juillet 2018
- 6/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
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.
<script type="text/javascript">
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 ».
<script type="text/javascript">
v_f_id = function (){
// corps de la fonction
}
</script>
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
mardi 31 juillet 2018
- 7/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
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.
<script type="text/javascript">
// Définition de la fonction
function id_fct([paramètres]){}
// Appel à la fonction
id_fct([arguments]);
</script>
Exemple :
<script type="text/javascript">
// Définition de la fonction
function id_fct(){
console.log("dieu est transcendant".toUpperCase().split(""))
}
// Appel à la fonction
id_fct();
</script>
Exécution Avec Internet explorer 10.0.9200.17607 :
DIEU,EST,TRANSCENDANT
Exécution Avec Baidu 43.23.1008.601 :
["DIEU", "EST", "TRANSCENDANT"]
mardi 31 juillet 2018
- 8/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Exécution avec
Opéra 44.0.2510.1218 (PGO) et Yandex 17.10.1.1204
Avec FIREFOX :
Le petit script ci-dessous illustre différents types et syntaxes de définitions de fonctions.
<script type="text/javascript"> "use strict;"
// Fonction inapellable
void function qcq(p){
console.log(p);
}
// qcq("Cette fonction est inappelable.");
//
// Avec YANDEX :
// test.html:6 Uncaught ReferenceError: qcq is
// not defined at
test.html:6
//
// Avec FIREFOX :
// ReferenceError: qcq is not defined
// test.html:6:4
// Syntaxe ordinaire d'une fonction
function f0(v=1){console.log(Math.tan(v))};
f0(); // 1.5574077246549023
/******************************/
let f1 = (function() {return Math.tan(1)} )();
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
mardi 31 juillet 2018
- 9/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
//
//
//
//
//
est immédiatement exécutée (invoquée) à cause des
parenthèses qui terminent sa déclaration/définition.
Mais ici les parenthèses entourant la
définition/déclaration de la fonction anonyme
ne sont pas indispensables car affectation.
console.log(f1); // 1.5574077246549023
// console.log(f1());
//
// TypeError: f1 is not a function
// f1();
// TypeError: f1 is not a function
/******************************/
let f1 = (function(p) {return Math.tan(p)} )(1);
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.
console.log(f1); // 1.5574077246549023
// console.log(f1());
//
// TypeError: f1 is not a function
// f1();
// TypeError: f1 is not a function
/******************************/
<script type="text/javascript"> "use strict";
let f1 = (function(p=1) {return Math.tan(p)} )();
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.
console.log(f1); // 1.5574077246549023
// console.log(f1());
mardi 31 juillet 2018
- 10/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
//
// TypeError: f1 is not a function
// f1();
// TypeError: f1 is not a function
/******************************/
<script type="text/javascript"> "use strict";
const c=1;
let f1 = (function() {return Math.tan(c)} )(c);
//
// f1 reçoit ici la VALEUR DE RETOUR de la
// fonction anonyme, car cette fonction anonyme
// est immédiatement exécutée (invoquée) à cause des
// parenthèses qui terminent sa déclaration/définition.
// Mais ici les parenthèses entourant la
// définition/déclaration de la fonction anonyme
// ne sont pas indispensables car affectation.
console.log(f1); // 1.5574077246549023
// console.log(f1());
//
// TypeError: f1 is not a function
// f1();
// TypeError: f1 is not a function
/******************************/
let f2 = function() {return Math.tan(v)} (v=1);
//
// f2 reçoit ici la valeur de retour de
// la fonction anonyme.
console.log(f2); // 1.5574077246549023
/******************************/
let f3 = function(v=1) {return Math.tan(v)};
console.log(f3()); // 1.5574077246549023
let f4 = function(v=123) {console.log(Math.tan(v))};
f4(Math.log(Math.E)); // 1.5574077246549023
/*****************************/
mardi 31 juillet 2018
- 11/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
//
//
//
//
//
function(){console.log(Math.tan(1)}();
Ici les parenthèses autour de la fonction
sont obligatoires.
SyntaxError: function statement requires a name
// Mais on peut immédiatement invoquer la fonction
// anonyme en la faisant précéder d'un opérateur,
// ou bien entendu, l'entourer de parenthèses.
+function(){console.log(Math.tan(1))}();
// 1.5574077246549023
!function(){console.log(Math.tan(1))}();
// 1.5574077246549023
-function(){console.log(Math.tan(1))}();
// 1.5574077246549023
~function(){console.log(Math.tan(1))}();
// 1.5574077246549023
`${function(){console.log(Math.tan(1))}()}`;
// 1.5574077246549023
+(_=>console.log(Math.tan(1)))();
// 1.5574077246549023
~((v=1) => console.log(Math.tan(v)))();
// 1.5574077246549023
(function(){console.log(Math.tan(1))}());
// 1.5574077246549023
//
// Ici les parenthèses autour de la fonction
// sont obligatoires.
// SyntaxError: function statement requires a name
(function(){console.log(Math.tan(1))})();
// 1.5574077246549023
//
// Ici les parenthèses autour de la fonction
// sont obligatoires.
// SyntaxError: function statement requires a name
/*****************************/
let f5=function(){console.log(Math.tan(1))};
//
// Ici, il s'agit aussi d'une fonction anonyme
// On ne peut pas l'appeler par son nom.
// Mais la vaviable f3 reçoit (pointe) L'ADRESSE
mardi 31 juillet 2018
- 12/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
//
//
//
//
//
de la fonction anonyme qui n'est pas
immédiatement invoquée.
On peut donc appeler la fonction anonyme
indirectement via son adresse stockée dans
la variable f3
f5(); // 1.5574077246549023
let f6=_=>console.log(Math.tan(1));
f6()
/*****************************/
// LE PARAMÈTRE DU RESTE
let f7 = function(p1,p2,...p3) {
console.log(p1,p2,p3);
}
f7("dias",2018,"puis,",["paramètre","du"],{p:"reste"})
// dias 2018 Array [ "puis,", […], {…} ]
// dias 2018 […]
//
0: "puis,"
//
1: Array [ "paramètre", "du" ]
//
2: Object { p: "reste" }
//
length: 3
//
__proto__: Array []
/*****************************/
function ext(rayon){
let vLocExt=Math.PI;
vLocExt*=10;
const c=rayon
const ds="Dans ext, "
// fonction fermeture (closure)
const fClosure=function(intro){
return ds+intro+" "+vLocExt*Math.pow(c,2)
}
return ["avec",fClosure]
}
// CURRYING
const cv=ext(3);
let cr
cr=cv[1](cv[0])
mardi 31 juillet 2018
- 13/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
console.log("Surf=",cr)
// Surf= Dans ext, avec 282.7433388230814
console.log(Math.PI*10*3*3)
// 282.74333882308133
</script>
Rappel : le caractère ` est le code ASCII 096, obtensible avec <ALT-096> ou <ALT7><Barre Espace> ou <CTRL-ALT-7><Barre Espace> dans certains logiciels (dans
ces logiciels un double <CTRL-ALT-7><Barre Espace> produit un double ` => ``).
Revenons-en aux fonctions « void ». Contrairement au langage C,
en JavaScript on ne type normalement pas une fonction, à part
pour le type « void ».
<script type="text/javascript"> "use strict;"
// Fonction inapellable
Number (function (p){
console.log(p);
})(5);
// Avec FIREFOX :
// TypeError: Number(...) is not a function
// test.html:3:6
//
// Avec YANDEX :
// test.html:5
// Uncaught TypeError: Number(...) is
// not a function at
test.html:5
Number function (p){
console.log(p);
};
// Avec FIREFOX :
// SyntaxError: unexpected token:
// keyword 'function'
test.html:16:12
//
// Avec YANDEX :
// test.html:15
Uncaught SyntaxError:
// Unexpected token function
</script>
Appel / invocation d’une fonction :
On appelle la fonction par son identifiant et éventuellement avec
des arguments entre parenthèses, comme ceci :
mardi 31 juillet 2018
- 14/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
<script type="text/javascript">
function f_date(d,m,y){
return new Date(y,m-1,d)
}
</script>
<script type="text/javascript">
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) this.html:17
12.352855437858855 ans. this.html:18
Yandex :
Firefox :
Le type « void » de fonction :
Le type void (= « vide » en français ou « vazia » en portugais)
permet exceptionnellement de typer une fonction non destinée à
être appelée (¿).
<script type="text/javascript"> "use strict;"
// Fonction inapellable
void function qcq (p){
console.log(p);
}
qcq("Inappelable");
mardi 31 juillet 2018
- 15/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
// Avec FIREFOX :
// ReferenceError: qcq is not defined test.html:7:3
//
// Avec YANDEX :
// test.html:7 Uncaught ReferenceError:
// qcq is not defined
at test.html:7
</script>
La grande utilité des fonctions « void » c’est dans la gestion des
événements, par exemple quand on veut désactiver l’action par
défaut du clic d’un lien hypertexte. On remplace la cible du lien
par une « fonction void » avec obligatoirement une valeur « 0 »
(zéro) comme argument, et on redéfinit une nouvelle action pour le
clic ou éventuellement on peut définir de nouveaux « EventListners
/ EventHandlers ». Mais dans notre exemple-ci, le « doubleclick » est incompatible avec le click, chaque « DOUBLE-CLICK »
est accompagné d’un double click (deux clicks).
<body>
<a href="javascript:void(0);"
id="aid";
ondblclick="alert('OK!')"
>
Double Cliquez ici.
</a>
</body>
<script>
const fChange = _ =>
console.log(
"Nouveau « clickHandler »");
document.getElementById('aid').
addEventListener('click', fChange,
false);
</script>
Voici les propriétés et méthodes des EventsXxxxx , plus facile à
obtenir dans la console de FIREFOX que celle de YANDEX :
Avec FIREFOX :
mardi 31 juillet 2018
- 16/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Window
<default properties>
<prototype>: WindowPrototype
constructor: ()
length: 0
name: "Window"
prototype: WindowPrototype { … }
Symbol(Symbol.hasInstance): function Symbol.hasInstance()
<prototype>: ()
<prototype>: WindowProperties { }
<prototype>: EventTargetPrototype
addEventListener: function addEventListener()
constructor: function ()
dispatchEvent: function dispatchEvent()
removeEventListener: function removeEventListener()
<prototype>: Object { … }
Avec YANDEX :
window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
1. __proto__: Window
1. PERSISTENT: 1
2. TEMPORARY: 0
3. constructor: ƒ Window()
4. Symbol(Symbol.toStringTag): "Window"
5. __proto__: WindowProperties
1. constructor: ƒ WindowProperties()
2. Symbol(Symbol.toStringTag): "WindowProperties"
3. __proto__: EventTarget
1. addEventListener: ƒ addEventListener()
2. dispatchEvent: ƒ dispatchEvent()
3. removeEventListener: ƒ removeEventListener()
4. constructor: ƒ EventTarget()
5. Symbol(Symbol.toStringTag): "EventTarget"
6. __proto__: Object
mardi 31 juillet 2018
- 17/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Les Variables d’une fonction :
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).
Argument d’une fonction :
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 ».
Redéfinition de fonction :
En JavaScript aussi bien en mode standard qu'en mode strict, une
fonction peut être redéfinie, pouvant engendrer de graves erreurs
de temps d'exécution (omissions d'exécution) pouvant passer inaperçues, avec les contraintes suivantes:
mardi 31 juillet 2018
- 18/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
1. Une DÉFINITION de fonction et APPEL de fonction.
<script language="JavaScript"> "use strict";
function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
console.log(factor(10)) // 3628800
</script>
2. La dernière fonction redéfinie prend normalement effet à l'endroit de la redéfinition jusqu'à la fin de l'exécution du programme ou une nouvelle redéfinition, écrasant ou se substituant
à toute définition antérieure.
<script language="JavaScript"> "use strict";
function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}
function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
console.dir(factor(20))
// 2432902008176640000
</script>
3. Une définition de fonction reste active tant qu'une autre fonction
portant le même nom n'a pas encore été redéfinie dans le code
source DANS UN AUTRE BLOC DE SCRIPT.
<script language="JavaScript"> "use strict";
function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}
factor(6)
// Ceci ne calcule pas la factorielle
</script>
<script>
console.log("REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT")
</script>
<script language="JavaScript"> "use strict";
function factor(n){
if(n==1)return 1
mardi 31 juillet 2018
- 19/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
else return n*factor(n-1)
}
console.dir(factor(21))
// 51090942171709440000
</script>
Exécution :
Ceci ne calcule pas la factorielle
test.html:3:1
REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT
51090942171709440000
test.html:11:1
test.html:20:1
4. Si la redéfinition de fonction se fait dans UN MÊME BLOC DE
SCRIPT c'est la dernière définition de la fonction ayant le même
nom qui sera active (qui exécutera) et avant cette dernière redéfinition la première définition ne sera même pas appelée.
<script language="JavaScript"> "use strict";
function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}
factor(6) // N'appelle même pas !
// Notez aussi que toutes les [re]définitions sont
// dans un même élément SCRIPT.
console.log("REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT")
function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
console.dir(factor(170))
// 7.257415615307994e+306
</script>
Exécution :
REDÉFINITION DANS UN AUTRE BLOC DE SCRIPT
7.257415615307994e+306
mardi 31 juillet 2018
test.html:10:1
test.html:17:1
- 20/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
5. Remarquez ci-dessous que sans la redéfinition, la première définition est bel et bien appelée.
<script language="JavaScript"> "use strict";
function factor(n){
console.dir("Ceci ne calcule pas la factorielle")
}
factor(150)
// Ceci ne calcule pas la factorielle
test.html:3:3
console.log("REDÉFINITION DANS UN MÊME BLOC DE SCRIPT")
// REDÉFINITION DANS UN MÊME BLOC DE SCRIPT
test.html:10:1
/*
function factor(n){
if(n==1)return 1
else return n*factor(n-1)
}
*/
console.dir(factor(100))
// Ceci ne calcule pas la factorielle
// undefined
</script>
test.html:3:3
test.html:20:1
Exécution :
Ceci ne calcule pas la factorielle
test.html:3:3
REDÉFINITION DANS UN MÊME BLOC DE SCRIPT
test.html:10:1
Ceci ne calcule pas la factorielle
test.html:3:3
undefined
test.html:20:1
mardi 31 juillet 2018
- 21/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
FONCTIONS IMBRIQUÉES :
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.
En JavaScript standard (sans « use strict »), Toute fonction peut
même accéder aux variables non var de n’importe quelle autre
fonction, et ses variables 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 à la
différence qu’une fonction est « appelable ». Un objet-proprié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).
LES FONCTIONS CALLBACK :
Ce sont des fonctions ordinaires qui sont rappelées / invoquées en
principe automatiquement, pour chaque élément d’une collection
itérable, avec certaines méthodes et souvent avec un paramètre
factice.
Mais par extension toute fonction passée en argument à une autre
fonction et étant la dernière instruction dans le corps de cette fonction appelée est aussi une fonction CALLBACK.
Nous en avons parlé dans les volumes : Promises, Arrays, Itérations…
mardi 31 juillet 2018
- 22/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Aves les Arrays quelques méthodes qui invoquent automatiquement
un CALLBACK sont :
1. every(fn(val, index, @), that),
2. some(fn(val, index, @), that),
3. forEach(fn(val, index, @), that)
4. map(fn(val, index, @), that)
5. filter(fn(val, index, @), that)
6. reduce(fn(memo, val, index, @), memo?)
7. reduceRight(fn(memo, val, index, @), memo?)…
mardi 31 juillet 2018
- 23/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Valeur retournée par une fonction :
Une fonction peut retourner une entité de n’importe quel type, notamment elle peut se retourner elle-même :
Exemple d’une fonction qui se retourne elle-même :
Dans cet exemple on voit :
1. La fonction qui se retourne elle-même ( « this » ).
2. La récursion : calcule ici la factorielle de l’argument.
3. Redéfinition (écrasement) de « toString() » (fonction/méthode).
<script type="text/javascript">
var Fruit = function(n,s){
// 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.
};
// 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"));
////////
// 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>
mardi 31 juillet 2018
- 24/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Exécution :
Fonction qui s’appelle elle-même :
Récursivité (récurrence – exemple, Factorielle d’un nombre) :
<script type="text/javascript">
var vin=170;
let fact = function ( n ) {
if ( n == 0) return 1;
else return fact ( n - 1) * n ;
}
console.log(vin+"! = "+fact(vin));
</script>
// 170! = 7.257415615307994e+306
mardi 31 juillet 2018
- 25/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
Mots-clés :
fonctions,curry,currying,redéfinition,fonction fermeture,closure,paramètre du
reste,blocs de code,réutilisables,fonctions nommées,fonctions anonymes,expressions de fonctions immédiatement invoquées,eventHandler,affecter,variable,pointeur,script,types de fonction,syntaxes de
fonction.
Mercredi, 11. avril 2018 (23:34 [pm]).
Dernière mise à jour : jeudi 4 avril 2019 (10:47:24 PM).
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé, bénévole,
sans aucun conflit ou lien d’intérêt 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 - 995624714 - 902263541 - 813572818
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-deLa-Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-Des-Medicamentsen-Cac-Cas
mardi 31 juillet 2018
- 26/27 -
23:12:45 [PM]
Petite Introduction Aux Fonctions JavaScript
• https://www.scribd.com/document/377035454/Le-Hasard-Des-ThermometresNon-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-AuxFonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-PourQuoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-ObjetsJavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMCindice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-duTraitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-EtType-Respiration
• https://www.scribd.com/document/315746265/Classification-DesMedicaments
• https://www.scribd.com/document/315745909/Incongruences-Heresies-etHeterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-EtType-Respiration
mardi 31 juillet 2018
- 27/27 -
23:12:45 [PM]