Programmation JavaScript/Fonctions utilisateur

Exceptions et erreurs

Évènement

Programmation JavaScript

Exceptions et erreurs

Évènement

Déclaration et identification

Dans tous les cas (sauf deux), la fonction nécessite un Identificateur établi avec les mêmes règles que pour les variables.
Pour déclarer une fonction, on emploie la syntaxe suivante:

Déclaration d'une fonction

function ma_fonction()

C'est à dire, utilisation du mot réservé function suivi de l'identificateur et de parenthèses. Ces dernières serviront à définir les paramètres de la fonction.

Fonction sans paramètres

La plupart des fonctions servent à effectuer des opérations sur des variables données en argument, mais ce n'est pas une obligation.

Fonction sans paramètres

function init()
{
   if (!navigator.cookieEnabled)...
}

Transmission de paramètres

Transmission classique

Les paramètres sont transmis à la fonction entre les parenthèses de la déclaration. Comme javascript est un langage à typage dynamique, les paramètres se résument à de simples identificateurs séparés par des virgules.

Transmission de paramètres (mode classique)

function display_message(s1,s2)
{
    var result = s1 + " " + s2;
    alert(result);
}

Autre mode de paramétrage

JavaScript offre beaucoup de souplesse dans l'envoi d'arguments à une fonction. Le langage ne vous oblige pas à rédiger des fonctions au nombre d'arguments préétablis.

Un mécanisme simple permet à tout moment de compter et d'accéder aux paramètres. JavaScript autorise l'appel d'une fonction en omettant les paramètres. Ceci ne déclenche pas d'erreur, mais c'est une incivilité, source de bugs.

La fonction, elle, peut à tout moment se rendre compte de la présence, absence, nombre et nature des paramètres, et ceci à travers un tableau intégré à la fonction et nommé "arguments".

Argument non-renseigné

function foo(param1)
{
   if (arguments.length==0)
        alert("fonction foo : paramètre manquant");
}

// Appel de la fonction sans paramètre :
foo(); // Affiche "paramètre manquant";

L'exemple suivant montre comment tirer partie du tableau arguments pour traiter des données dont on ne connaît pas le nombre au départ.

Propriété arguments (Array)

function concat_chaînes()
{
    result = "";
    for(i = 0; i < arguments.length; i++)     // Pour chaque argument
    {
         result +=  arguments[i] + " ";       // Ajouter le contenu et une espace à result
    }
    return result;                            // renvoyer le résultat
}
alert(concat_chaînes("Concaténation","de","chaînes")); // Affiche "Concaténation de chaînes "

Valeur renvoyée

Avec le mot réservé return, la fonction est capable de retourner une valeur au programme appelant. Cette valeur est contenue dans une donnée en tout point comparable à une variable typée.

return vide

Le mot réservé return peut s'employer sans valeur de retour, uniquement dans le but de "sortir" de la fonction. Il est possible d'utiliser plusieurs fois return dans une fonction, l'exécution sera interrompue au premier return rencontré.

return multiples

function foo(p)
{
   var resultat = "";
   if (condition_1)
      return;            // Sortie de secours
   else
      resultat = traitement(p);
   return resultat;      // Sortie normale
}

Note : Bien que parfaitement valide, cette pratique est généralement déconseillée en algorithmie. Une fonction doit s'efforcer d'avoir une entrée et une sortie. Cependant le recours à cette pratique est parfois nécessaire pour conserver une structure de code simple, par exemple pour éviter un trop grand niveau d'imbrication de conditions.

Corps de la fonction

Variables

La fonction peut avoir besoin de créer des variables pour mener à bien ses calculs. Dans ce cas, il est indispensable de garder en tête qu'une variable non-précédée du mot réservé var se révèle globale, et donc source de conflits. Une bonne pratique consiste à déclarer ses variables en début de fonction, même si rien ne vous y oblige.

Variables locales

function foo()
{
   var v1;
   var v2;
}

Sous-fonction

Une fonction peut contenir des sous-fonctions qui lui sont propre et l'aide à accomplir sa tâche.

Sous-fonction

function foo(n)
{
   function bar(p)
   {
       return p*p*p;
   }

   for (var i = 0; i < n; i++)
      bar(i);
}

Appel de la fonction

Nous pouvons admettre quatre modèles de fonction : Avec ou sans paramètres, avec ou sans valeur de retour.

Sans valeur de retour

Sans valeur de retour, la fonction est un verbe. Il suffit de la nommer avec ses paramètres, et elle s'exécute :

Fonction sans valeur de retour

<body onload="init()">

Avec valeur de retour

Si l'on a prévu que la fonction renvoie une valeur, on peut recueillir celle-ci dans une variable, ou l'utiliser directement, ou l'ignorer si bon nous semble. Le résultat renvoyé par la fonction a toutes les caractéristiques d'une variable (type, valeur, utilisabilité avec des opérateurs...

Avec valeur de retour

var le_cube_de_trois = cube(3); // Valeur de retour recueillie dans une variable
alert("Cube de 3 : " + cube(3)); // Affiche "Cube de 3 : 27" (concaténation)
cube(3); // Appel sourd de la fonction, on ignore le résultat

Sans paramètre

Les parenthèses demeurent nécessaire à l'identification complète de la fonction. Elles restent vide. (Les espaces sont possibles, ainsi que les commentaires slash-étoile)

Entre parenthèses

n = foo();
n = foo ( );
n = foo(/* J'occupe l'espace... */);

Avec paramètre

Les paramètres envoyés à une fonction peuvent être sous forme de constante, de référence à une variable ou d'expression littérale.

Types d'arguments

result = foo("Chaîne littérale", ma_var, true); // Littéral, variable et constante booléenne

Que deviennent les variables envoyées

Les variables envoyées en paramètre d'une fonction subissent ou ne subissent pas de modifications selon leur nature:

Primitives

Si la variable est d'un type primitif comme string, bool et number, le mécanisme d'appel de la fonction envoie en fait des copies de la variable. Les modifications opérées par la fonction n'ont pas de répercussion sur la variable originale, sous réserve, bien entendu qu'il n'y ait pas de collision d'identification avec une variable globale.

Variables préservées

function foo(str)
{
    str = "c'est pas si important";
}

s = "Très important";
foo(s);
alert(s); // Affiche "Très important" : pas d'altération

Instance d'un objet

Il en est tout autrement avec les instances d'un objet transmis en paramètre. Dans ce cas, le mécanisme d'appel de la fonction envoie un pointeur sur l'objet, et la fonction a toute latitude pour opérer des modifications sur les propriétés ou données de l'objet.

Objet modifié

function modif_array(tab)
{
   tab[0] = "c'est pas si important";

}
t = Array();
t[0] = "Très important";
modif_array(t);
alert(t[0]); // Affiche "c'est pas si important" : modification du contenu de l'objet

Fonction sans identificateur

Une fonction déclarée sans identificateur est une expression de type "function" qui peut être utilisée comme argument d'une fonction, ou affectée à une variable. L'invocation d'une telle fonction se fait en utilisant le paramètre ou la variable.

Fonction sans identificateur

var superieur = function(a,b){
        return a>b;
    };

if (superieur(5,4)) alert("5 > 4");

Fonction sans identificateur

function affiche(objet, f_tostring)
{
    alert( f_tostring(objet) );
}

var personne = { "nom":"clinton", "prenom":"bill" };

affiche(personne, function(o){
    return o.prenom + " " + o.nom;
    }
    );

Notation fléchée

Les versions récentes du langage Javascript supportent la notation fléchée pour la création de fonction^[1]. Dans cette notation, le ou les arguments sont spécifiés avant la flèche => qui est suivie soit d'un bloc de code à exécuter (accolades), soit d'une valeur ou expression à retourner.

Exemple de calcul de somme (bloc de code) :

donnees => {
  var somme = 0;
  for (var i=0 ; i<donnees.length ; i++)
    somme += donnees[i];
  return somme;
}

Exemple de fonction retournant la valeur d'une expression :

(a,b) => a + b;

Les deux cas se distinguent par l'utilisation d'accolades. Pour retourner une expression de type objet, comme les accolades doivent être utilisés pour ce cas, il faut entourer l'objet de parenthèses :

(a,b) => ( {
  min: a,
  max: b
} );

Références

↑ Parmi les navigateurs supportant cette syntaxe : Chrome 45, Edge 12, Firefox 22, Safari 10 et Opera 32 selon https://www.w3schools.com/js/js_arrow_function.asp

[1] Parmi les navigateurs supportant cette syntaxe : Chrome 45, Edge 12, Firefox 22, Safari 10 et Opera 32 selon https://www.w3schools.com/js/js_arrow_function.asp

[1]