ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail

ISMONTIC TANGER

MODULE 105: Programmation JAVACRIPT

LES FONCTIONS

ADDARRAZI ILHAM

2024-2025
Les fonctions
On appelle fonction un sous-programme qui permet d'effectuer un ensemble
d'instructions par simple appel de la fonction dans le corps du programme
principal. Cette notion de sous-programme est généralement appelée fonction
dans les langages autres que le Javascript (toutefois leur syntaxe est
généralement différente...).

Les fonctions permettent d'exécuter dans plusieurs parties du programme une

série d'instructions, cela permet une simplicité du code et donc une taille de
programme minimale. D'autre part, une fonction peut faire appel à elle-
même, on parle alors de fonction récursive (il ne faut pas oublier dans ce cas
de mettre une condition de sortie au risque sinon de ne pas pouvoir arrêter le
programme...).

Javascript contient des fonctions prédéfinies qui peuvent s'appliquer pour un

ou plusieurs types d'objets spécifiques, on appelle ces fonctions des
méthodes.
Les fonctions
1. La déclaration d'une fonction

Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le
corps du programme il faut que le navigateur la connaisse, c'est-à-dire qu'il
connaisse son nom, ses arguments et les instructions qu'elle contient. La
définition d'une fonction s'appelle "déclaration". La déclaration d'une
fonction se fait grâce au mot clé function selon la syntaxe suivante :

function Nom_De_La_Fonction(argument1, argument2, ...) {

liste d'instructions
}
Les fonctions
2. Appel d’une fonction

Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le
corps du programme il faut que le navigateur la connaisse, c'est-à-dire qu'il
connaisse son nom, ses arguments et les instructions qu'elle contient. La
définition d'une fonction s'appelle "déclaration". La déclaration d'une
fonction se fait grâce au mot clé function selon la syntaxe suivante :

function Nom_De_La_Fonction(argument1, argument2, ...) {

liste d'instructions
}
Les fonctions

3. Portée des variables:

Les variables déclarées tout au début du script, en dehors et avant toutes
fonctions (voir plus loin...), seront toujours globales, qu'elles soient déclarées
avec var ou de façon contextuelle. On pourra donc les exploiter partout dans
le script.
Dans une fonction, une variable déclarée par le mot clé var aura une portée
limitée à cette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans
le script. D'où son nom de locale.
Par contre, toujours dans une fonction, si la variable est déclarée
contextuellement (sans utiliser le mot var), sa portée sera globale.
Les fonctions

4. Les fonctions anonymes:

Une fonction anonyme n'est pas une fonction nommée "". C'est simplement
une fonction sans nom.
Généralement, on utilisera les fonctions anonymes lorsqu’on n’a pas besoin
d’appeler notre fonction par son nom c’est-à-dire lorsque le code de notre
fonction n’est appelé qu’à un endroit dans notre script et n’est pas réutilisé.
On va pouvoir créer une fonction anonyme de la même façon qu’une fonction
classique, en utilisant le mot clef function mais en omettant le nom de la
fonction après.
Syntaxe:

function(param1, param2, …, paramN){

//traitement
}
Les fonctions

4. Les fonctions anonymes:

Il existe plusieurs façons pour exécuter une fonction anonyme:
Enfermer le code de notre fonction dans une variable et utiliser la
variable comme une fonction :
var maVariable = function(param1, param2, ...) {
// Instructions pouvant utiliser param1, param2, ...
}
Auto-invoquer notre fonction anonyme:
(function (param1, param2,…, paramN){
// Instructions pouvant utiliser param1, param2, ..});

Utiliser un évènement pour déclencher l’exécution de notre fonction:

Le JavaScript permet de répondre à de nombreux types d’évènements : clic sur
un élément, pressage d’une touche sur un clavier, ouverture d’une fenêtre, etc.
Les fonctions

5. Les fonctions fléchées:

Les fonctions fléchées sont des fonctions qui possèdent une syntaxe très
compacte, ce qui les rend très rapide à écrire. Les fonctions fléchées utilisent
le signe => qui leur a donné leur nom à cause de sa forme de flèche.
Syntaxe:
const maVariable = (param1, param2, ...) => {
// Instructions pouvant utiliser param1, param2, ...
}
// Appel de la fonction anonyme
maVariable(arg1, arg2, ...);
Exemple:
const bonjour = (prenom) => {
const message = `Bonjour, ${prenom} !`;
return message;
}
console.log(bonjour("Ali")); // "Bonjour, Ali !"
Les fonctions
6. Appel de fonctions selon des intervalles de temps
Le JavaScript met à notre disposition deux méthodes pour gérer le délai
d’exécution d’un code : les méthodes setInterval() et setTimeout().
a. La méthode setTimeout()
La méthode setTimeout() permet d’exécuter une fonction ou un bloc de code
après une certaine période définie (à la fin de ce qu’on appelle un « timer »).
Il va falloir passer deux arguments à cette méthode : une fonction à exécuter
et un nombre en millisecondes qui représente le délai d’exécution de la
fonction. Exemple:
function miseEnAttente()
Syntaxe: {
//Traitement
function mafonction() { ... } setTimeout(fonctionAExecuter, 5000); //On attend 5 secondes
avant d'exécuter la fonction
setTimeout(mafonction, 5000); }
function fonctionAExecuter()
{
//Le code écrit dans cette fonction ne sera exécuté qu'au bout
de 5 secondes
}
Les fonctions
6. Appel de fonctions selon des intervalles de temps
Le JavaScript met à notre disposition deux méthodes pour gérer le délai
d’exécution d’un code : les méthodes setInterval() et setTimeout().
a. La méthode setTimeout()
ClearTimeout interrompt le décompte de setTimeout
Cette méthode interrompt le délai et l'exécution du code associé à ce délai. Le
processus à supprimer est reconnu par l'identifieur retourné par setTimeout.

Syntaxe: clearTimeout(identifieur);

Exemple:

var x = setTimeout(mafonction, 5000);

...
clearTimeout(x);
Les fonctions
6. Appel de fonctions selon des intervalles de temps
Le JavaScript met à notre disposition deux méthodes pour gérer le délai
d’exécution d’un code : les méthodes setInterval() et setTimeout().
b. La méthode setInterval()
setInterval() déclenche une opération à intervalles réguliers.
Similaire à setTimeout, elle déclenche répétitivement la même action à
intervalles réguliers.
Syntaxe: setInterval(function, délai)
Exemple:
function hello(){console.log("Hello !!!"); }
var t=setInterval(hello,10000); //Affiche un message toutes les dix secondes.
L'action sera recommencée jusqu'à ce que l'on quitte la page ou que
clearInterval soit exécutée.
clearInterval stoppe l'action de setInterval: Stoppe le processus déclenche
par setInterval.
Exemple:
var x = setInterval(mafonction, 10000);
...
Les fonctions
6. Appel de fonctions selon des intervalles de temps
Le JavaScript met à notre disposition deux méthodes pour gérer le délai
d’exécution d’un code : les méthodes setInterval() et setTimeout().
b. La méthode setInterval()
setInterval() déclenche une opération à intervalles réguliers.
Similaire à setTimeout, elle déclenche répétitivement la même action à
intervalles réguliers.

Syntaxe: setInterval(function, délai)

Exemple:
function hello(){console.log("Hello !!!"); }
var t=setInterval(hello,3000); //Affiche un message toutes les dix secondes.
L'action sera recommencée jusqu'à ce que l'on quitte la page ou que
clearInterval soit exécutée.
Les fonctions
7. Exercices d’applications
Exercice 1:
Ecrire une fonction triangle qui prend en paramètre une valeur l et qui permet
afficher un triangle isolée forme d’étoile * .
Par exemple, pour l = 5, le script affichera :

Exercice 2:
Ecrire une procédure cadre qui prend en un nombre l de lignes et un nombre c
de colonnes, puis de réaliser un ”cadre d’étoiles” de l lignes par c colonnes.
pour l = 5 et c = 10, le script affichera :