Les fonctions déclaratives

Déclaration d'une fonction

Parfois, il est nécessaire de répéter de mêmes portions de codes. Par exemple, on peut souhaiter afficher un résultat donné sous une certaine forme, ou bien faire un calcul répétitif. Dans ce cas, au lieu de réécrire plusieurs fois cette même portion de code, on définit ce que l’on appelle des fonctions. Ces fonctions peuvent accepter des paramètres, ou arguments, pour leur permettre de réaliser l’action désirée.
La déclaration d'une fonction utilise le mot clé function suivi du nom de la fonction, de parenthèses contenant les éventuels arguments, et du corps de la fonction délimité par des accolades:

  function nomDeLaFonction(param1,param2,....){
   instructions;
  }

.
Dans la définition on peut distinguer 2 parties :

l'entête de la fonction qui reprend le nom et la liste des paramètres entre parenthèses (on doit noter () si aucun paramètre n'est requis),
le corps de la fonction qui contient le code exécuté lors de l'appel de la fonction.
Dans le corps de la fonction le mot-clé return permet d'introduire une expression dont la valeur est résultat de l'appel de fonction.

Le traitement d'une fonction se termine dès qu'une expression return est rencontrée avec le résultat associé. Si le corps la fonction ne contient pas une telle expression, la fonction ne renverra aucun résultat et son traitement se termine lorsque la dernière expression du corps a été évaluée.

Exemple de fonction ne contenant pas d'argument:

 
function dateDuJour(){
aujourdhui=new Date() ;
alert(aujourdhui);
}

Les fonctions peuvent être déclarées dans la partie <head>....</head> ou dans un fichier précisé par l'attribut src, ici dateDuJour.js qui va être chargé et évalué par le navigateur.
<script type="text/javascript" src="dateDuJour.js"> </script> Dans la fenêtre contenant le code source de la page, dateDuJour.js est un hyperlien qui lorsqu'on le sélectionne permet de consulter le contenu du fichier dateduJour.js.

Exemple de fonction "retournant" une valeur
Dans le fichier vente.js, on a le code suivant:

function chiffredAffaire(quantite,prixUnitaire){
 return(quantite*prixUnitaire);
}

Un appel à la fonction peut se faire ainsi:
document.writeln("le chiffre d'affaires pour 520 articles à 3,20 € est égale à"+chiffredAffaire(520,3.20))

Manip 1:
Modifier le programme précédent en permettant la saisie de la quantité vendue et du prix unitaire.

Manip 2:

Dans un fichier temperature.js écrivez le code une fonction fahrenheitEnCelsius qui prend un paramètre numérique représentant une température exprimée en degré Fahrenheit et a pour résultat la même température exprimée en degré Celsius.
Avez-vous rédigé la partie documentation ? Si non, c'est un tort elle fait partie de la fonction et est tout aussi indispensable que le code lui-même. Pourquoi selon vous ?
Ecrivez une page HTML qui utilise la définition de cette fonction dans ce fichier pour, après avoir demandé une température en Fahrenheit affiche la valeur en Celsius correspondante.
Testez.
Définissez la fonction qui réalise la conversion inverse et testez-la également.

Portée d'une variable

La portée d'une variable désigne l'ensemble du code dans lequel elle peut être utilisée.
Il est fortement conseillé de déclarer une variable en utilisant le mot clé var.
Un nom de variable peut avoir une portée locale ou globale. Exemple: On considère le code javascript suivant:

 var heros="JAMES BOND";
  function nommer(){
  var message="My name is ";
  alert(message+heros);
  }
  nommer();
  alert(message+heros);

Tester ce bloc de codes, toutes les lignes de codes sont-elles évaluées? Sinon, pourquoi?
Quelles sont les variables locales ou globales?

Les variables définies dans une fonction sont locales à cette fonction. Elles ne sont pas définies en dehors de cette fonction. On parle de portée locale. Les variables définies en dehors de toute fonction sont globales. Elles sont toujours définies et accessibles.

Modifier le bloc de codes de la manière suivante:

  var heros="JAMES BOND";
  var message="My name is ";
  function nommer(){
  var heros="SPIDERMAN"
  alert(message+heros);
  }
  nommer();
  alert(message+heros);

Comme on peut le constater, quand on exécute la fonction, la variable locale prend le dessus sur la variable globale de même nom pendant tout le temps de l'exécution de la fonction. Mais une fois la fonction terminée (et donc, la variable locale détruite) c'est la variable globale qui reprend ses droits.

Les définitions locales l'emportent sur les définitions globales.
On dit qu'il y a masquage de la variable globale par la variable locale de même nom.