javascript tome iii

Commentaires

Transcription

javascript tome iii
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JAVA SCRIP T V OL . II
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
Après le succès foudroyant du Vol I destiné à démontrer de façon pragmatique, pratique la puissance du JavaScript à résoudre même les
problèmes Mathématiques (*l’algorithmique d’analyse des nombres de Kaprekar, *le calcul du carr é d’un nombre, *le carré parfait, *les
tests conditionnels, *quelques différences entre langage C et JavaScript, mais aussi *différents éditeurs de texte et leurs particularités),
voici le VOL II qui est premièrement destiné à enrichir mon mémento personnel mais aussi à aider les autres dans leurs premiers pas dans
ce langage.
Cette démarche saugrenue, de commencer par le plus complexe pour continuer par le simple, s’explique par le fait que nous voulions
d’abord faire l’apologie du langage =JavaScript= avant de nous lancer en douceur dans ses détails.
Cette série présentera de façons très élégante, les concepts fondamentaux (de base, essentiels) permettant un engagement progressif, plus
profond et plus efficace dans ce langage.
C’est une fois de plus l’occasion de remercier, honorer, glorifier, adorer et aduler le Grand Dieu, tout Puissant Créateur de toutes choses
qui existent (et celles qui n’existent pas encore, visibles et cachées, connues et ignorées, imaginables et insoupçonnables...) pour toutes les
merveilles qu’Il a toujours accomplies depuis bien avant même la création des univers, toutes les dimensions et tout ce qui s’y trouve y
compris les intra- / extra-terrestres et les entités éthériques non-biologiques (extra-dimensionnels) qui lui doivent eux-aussi respect et
Vénérations.
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.
CHAPITRE 4 : Les FONCTIONS dans JavaScript
Les fonctions sont des blocs de texte (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 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}), 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).
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.
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 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>
On appelle la fonction par son identifiant et éventuellement avec des arguments entre parenthèses, comme
ceci :
<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
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 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 soitelle est donc ni plus ni moins un objet Function (callable object).
Exemple d’une fonction «pure» utilisée comme objet :
<script type="text/javascript">
var Fruit = function(n,s){
// Variables locale
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 :
Appel via CONSTRUCTEUR
undefined
Appel via ORDINAIRE
pomme instanceof Fruit = false
pomme instanceof Fruit = false
Ici l’instance est créé avec « new » :
<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);
////////
// 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 :
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() ».
<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>
Exécution :
Appel via CONSTRUCTEUR
3628800
Appel via ORDINAIRE
pomme instanceof Fruit = false
pomme instanceof Fruit = false
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 :
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 à 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 :
<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é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" ]