JavaScript/Les fonctions

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction aux fonctions

Avis aux retardataires : nous employons le mot fonction issue de classe par abus de langage car une fonction issue d'une classe est appelée une méthode.

Comme dit dans le second chapitre, la plupart des méthodes disponibles directement en JavaScript appartiennent à des ensembles. Ils en existe beaucoup, par exemple l’ensemble Math (appelé aussi la classe Math) regroupe un certain nombre de méthodes permettant de gérer les nombres. Il y a la classe Array étudiée précédemment, la classe Date permettant de gérer les dates.

Attention cependant à ne pas confondre les fonctions (ou méthodes) et les attributs. Par exemple, l'attribut location n’est pas une méthode de la classe document. C’est un attribut de document.

On écrit donc document.location = 'page.html'; ou encore window.document.location = 'page.html'; On écrit une méthode issue d'une classe JavaScript de cette façon : MaClasse.maMéthode().

Parfois, une fonction peut avoir deux "versions". Une version telle que vous en avez l'habitude (nom de la fonction et arguments entre parenthèses). Cependant, il existe aussi des fonctions dites "de prototype" qui ont le même rôle mais qui ne s'adapatent qu’à un certain type d'arguments. Par exemple, la join dans le cadre d'un tableau JavaScript peut s'écrire :

join (Tableau); // méthode normale
Tableau.join(); // méthode prototype

Pour le moment, nous allons apprendre à créer des méthodes non prototype.

Première fonction

Premièrement, pour déclarer une fonction il faut le mot clé function suivi du nom de notre fonction sans caractères spéciaux (pas d'espace, de virgule...). Puis, entre accolades se trouvent les instructions de la fonction. Une fonction peut posséder des arguments (ou paramètres) qui sont des noms de variable à mettre entre parenthèses après le nom de la fonction et avant la première accolade et séparés par des virgules.

Pour commencer simplement, nous allons faire une petite fonction qui va simplement afficher la phrase "Bonjour tout le monde" un certain nombre de fois.

function afficher_phrase (phrase, n) // On déclare la fonction
{
  var term = (parseInt(n) > 1) ? '<br />' : ''; // Si n > 1, on saute une ligne à chaque fois
  var i = 1; // On démarre i à 1
  do
  {
    document.write(phrase+term);
    i++;
  }while (i <= n);
}

Voilà, notre fonction est écrite. Une précision : la fonction parseInt() permet de convertir une chaîne en un nombre.

Maintenant, comment se servir de notre fonction ?

// Appel à notre fonction
afficher_phrase ("Salut tout le monde", 10); // La phrase sera affichée 10 fois de suite

Retourner une valeur

À présent, créons une fonction de calcul. Et... qui dit calcul dit aussi que nous allons devoir renvoyer une valeur. Pour cela, il y a le mot clé return qui comme son nom l'indique veut dire "retourner" en anglais. Il est simplement suivi de la valeur à retourner.

Voici un exemple assez simple se servant de la librairie Math :

function volume_boule (rayon)
{
  return (4/3)*Math.PI*Math.pow(parseInt(rayon), 3);
}

document.write(volume_boule (10)); // On affiche le résultat : 4188.790204786391

Donc, quelques explications :

• return : il sert à retourner le résultat de la formule suivante.
• Math.PI : cela retourne la constante PI (3,14...). C’est une constante.
• Math.pow : il s'agit de la méthode permettant de mettre un nombre à un exposant (ici, le rayon est à l'exposant 3).

Ici, la fonction volume_boule() est donc de type float puisqu'elle renvoie un nombre décimal. Cependant, on aurait pu la transformer en fonction void (qui ne retourne aucune valeur) en remplaçant le return par un document.write() ou un alert().

Travail pratique

Fonction de redirection

Si vous vous sentez audacieux, vous pouvez tenter de coder une fonction simple de redirection en JavaScript. Si vous avez lu les chapitres précédents, tout est présent pour que vous puissiez y arriver. Cette fonction prend deux arguments : l'URL (l'adresse Web) de redirection (de type String) et la demande de confirmation au visiteur (de type boolean).

Corrigé

function redirection (url, a_confirmer)
{
  if (url != '')
  {
    var demande = false;
    a_confirmer = (a_confirmer == undefined) ? false : true;
    if (a_confirmer) demande = confirm("Voulez-vous être redirigé ?");
    if (!a_confirmer || demande) document.location = url; // window.location = url; marche aussi
    else return;
  }
  else return false;
}

redirection('http://fr.wikiversity.org');

Ici, rien de nouveau à part le undefined mais cette ligne était facultative. Elle permettait de rendre le paramètre "a_confirmer" facultatif. Désormais, vous savez comment faire une redirection en JavaScript. Mais je vous rassure : on peut faire ça en une ligne :)

Une méthode qui pourrait vous servir, c’est refresh() de window qui permet de rafraîchir la page (équivalent de F5).

window.refresh();
//ou
window.location.reload(true);

Attention : si une page appelle cette commande obligatoirement, elle se rafraîchira sans fin. Il faut la déclencher après une action (facultativement).