Editions ENI Livres | Vidéos | e-Formations
Fonctions
Commandes Git
Les commandes GIT suivantes permettent d’accéder aux codes sources des chapitres précédents :
cd C:\ git clone https://github.com/EditionsENI/JavaScriptEtAngular_JS.git cd C:\JavaScriptEtAngular\JavaScript git checkout chapitre05 code . Introduction
Une fonction permet d’écrire plusieurs instructions afin de pouvoir réutiliser le bloc d’instructions sans réécrire chaque instruction. Elle est nommée et définie une seule fois, mais exécutée plusieurs fois dans le programme principal.
Des fonctions ont déjà été utilisées dans cet ouvrage. Le déroulement normal du programme est une fonction : la fonction principale. document.writeln() est une fonction. Elle affiche quelque chose sur la page web.
Fonctions simples
1. Syntaxe
Une fonction est déclarée grâce au mot-clé function suivi de son nom.
function maFonction() {
opération(s);
} À chaque appel, maFonction() effectuera les opérations situées dans son corps de fonction. Pour appeler une fonction, il suffit d’écrire son nom.
<!-- C:\JavaScriptEtAngular\JavaScript\C05\demonstration\index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>ENI éditions</title>
</head>
<body>
<script type="text/javascript">
// Définition de la fonction
function fLois() {
document.writeln("Un robot ne peut porter atteinte à un être
humain, ni, en restant passif, permettre qu'un être humain soit exposé
au danger. <br />")
document.writeln("Un robot doit obéir aux ordres qui lui
sont donnés par un être humain, sauf si de tels ordres entrent en conflit
avec la première loi. <br />");
document.writeln("Un...Fonctions et arguments
Lors de l’appel d’une fonction, il est possible de définir un ou plusieurs arguments utilisés comme variables au sein de celle-ci. Ces variables ont une portée limitée au bloc d’instructions de la fonction. Les arguments sont un moyen de passer des informations ou des données de la fonction principale vers une fonction secondaire. Une fonction peut accueillir un nombre illimité d’arguments de n’importe quel type.
1. Syntaxe de fonction avec arguments
Les arguments sont déclarés entre les parenthèses situées après le nom de fonction et ne sont pas typés. Pour rappel, JavaScript est un langage de programmation non fortement typé et c’est l’utilisation que l’on fait des variables qui définit leurs types.
function fonctionsEtArguments(argument01, argument02, argument03) {
console.log(argument01);
console.log(argument02);
console.log(argument03);
} 2. Appel de fonction avec arguments
Dès lors, pour appeler une fonction avec arguments, il suffit d’écrire son nom suivi des arguments.
<!-- C:\JavaScriptEtAngular\JavaScript\C05\demonstration\
index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>ENI éditions</title>
</head>
<body>
<script type="text/javascript">
...Retour
Une fonction n’est pas uniquement réservée à l’affichage d’éléments dans le navigateur web. Certaines fonctions retournent des informations utilisables dans d’autres fonctions.
1. Syntaxe
Il existe en réalité deux types de fonctions : les procédures, qui effectuent un certain nombre d’opérations, et les fonctions, qui traitent des informations et fournissent un résultat. Ce résultat est appelé retour de fonction.
function maFonction(argument01, argument02) {
opération(s)
return unRetour;
}
function somme(argument01, argument02) {
let retourDeFonction;
retourDeFonction = argument01 + argument02;
return retourDeFonction;
} Avec le temps et l’expérience, ce genre de fonction peut être grandement simplifié par le développeur. En effet, la variable retourDeFonction est initialisée, affectée et sert de retour à la fonction en trois lignes de code. Une première économie peut être réalisée en regroupant l’initialisation et l’affectation sur une seule ligne.
let retourDeFonction = argument01 + argument02; Une deuxième économie consiste à se passer complètement de la variable...
Fonctions ou méthodes
Parfois, le développeur veut pouvoir regrouper plusieurs fonctions ensemble au sein de son application. Soit parce qu’elles fonctionnent toutes ensemble, soit parce qu’elles se rapportent au même élément.
Lorsque plusieurs fonctions sont regroupées au sein d’un objet elles sont appelées méthodes.
D’ailleurs, contrairement à ce qui a été dit dans l’introduction de ce chapitre, writeln() est une méthode de l’objet document, et non une fonction.
En fait, une méthode et une fonction ont la même syntaxe et le même fonctionnement. Organiser son code de façon à créer des objets au sein desquels figurent des fonctions appelées méthodes, c’est faire de la programmation orientée objet. Et c’est précisément le sujet du chapitre JavaScript orienté objet.
Mise en pratique
1. Énoncé
maxDeDeuxNombres()
Écrivez une fonction maxDeDeuxNombres() qui, considérant deux nombres, retourne le plus grand.
maxDeTroisNombres()
Écrivez une fonction maxDeTroisNombres() qui, considérant trois nombres, retourne le plus grand.
maxDeTroisNombresBis()
Écrivez une fonction maxDeTroisNombreBis() qui, considérant trois nombres, retourne le plus grand en utilisant uniquement la fonction maxDeDeuxNombres() plusieurs fois si nécessaire.
factorielle()
Écrivez une fonction factorielle() qui retourne la factorielle d’un nombre entré en paramètre. La factorielle d’un nombre est le résultat de la multiplication de tous les entiers positifs inférieurs ou égaux au nombre.
-
Factorielle(1) = 1, car 1! = 1
-
factorielle(2) = 2, car 2! =2 * 1
-
factorielle(3) = 6, car 3! = 3 * 2 * 1
-
factorielle(4) = 24, car 4! = 4 * 3 * 2 * 1
2. Correction
maxDeDeuxNombres()
La fonction maxDeDeuxNombres() utilise deux nombres passés en paramètres. Si le premier est plus grand que le deuxième, elle retourne le premier, sinon elle retourne le deuxième.
<!-- C:\JavaScriptEtAngular\JavaScript\C05\miseEnPratique\
index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>ENI éditions</title>
</head>
<body>
<script type="text/javascript">
// Retourne le plus grand des deux nombres
function maxDeDeuxNombres(a, b) {
// Si le premier est plus...
