Les fonctions - Cours Javascript

Introduction

Définition

Une fonction pour schématiser est un ensemble de commandes qui sont effectuées au fur et à mesure.
Ces commandes ne sont effectuées que si la fonction est appelée.

Comment écrire une fonction

Définition

Une fonction va vous permettre de faire un script qui ne s'exécutera que si on le désire.
Il est activé grâce au gestionnaire d'événement ou par un appel direct de la fonction.

La fonction se trouve aussi entre <SCRIPT> et </SCRIPT>.

Une fonction est introduite par function puis suit le nom de la fonction suivie de parenthèses :
Exemple de code :
function nom() {
  //votre script.
}
//ou
var nom = function() {
  //votre script.
}

Les { et } contiennent l'ensemble des instructions de la fonction.
Chaque instruction donnée est suivie d'un point virgule.

Dans une fonction, il est possible de faire appel à une autre fonction dans le script javascript:
Exemple de code :
nom_de_la_fonction();


Une fonction peut être appelée par des objets différents.
Imaginons que j'ai quatre boutons de chapitres, 3 sont en construction. Je vais donc créer une seule fonction pour les trois pour alerter qu'ils sont en construction.

Appeler une fonction

Définition

Lorsque l'on parle d'appeler la fonction (dans la page HTML), on parle aussi de gestion d'événements.

L'événement appelant peut être mis dans votre code HTML.
La fonction est appelée par exemple avec l'événement "quand on clique" placé dans une balise HTML, ce qui donne :
Exemple de code :
onClick="nomdelafonction();"

Les événements sont traités dans le chapitre suivant.

On peut exécuter une fonction sans faire appel à un événement.
Dans ce cas la fonction sera effectuée dès que le navigateur lira la ligne de code.
Ce n'est possible que lorsque l'on se trouve à l'intérieur de la balise <SCRIPT> et </SCRIPT>.
Nous la noterons tout simplement :
Exemple de code :
<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
nomdelafonction();
//-->
</SCRIPT>

Exercice 1

Nous allons créer une fonction qui nous alerte quand on clique sur le lien.

Nous allons mettre dans la partie réservée au script :
Exemple de code :
function alerter() {
alert("j'ai cliqué");
}

Nous allons maintenant créer le lien :
Exemple de code :
<a href="javascript:void(0)" onclick="alerter()">Cliquez moi</A>
Ne vous préoccupez pas de javascript:void(0) nous le verrons plus tard.

Exercice 2

Nous allons créer une fonction qui nous alerte dès que la page est lu par le navigateur.

Nous allons mettre dans la partie réservée au script :
Exemple de code :
function alerter(){
  alert("j'ai cliqué");
}
alerter();

Transmettre des valeurs

Le contexte

Imaginons que vous avez trois liens.

Quand je clique sur le premier lien :
- Affiche un message d'alerte me donnant le nom du premier lien : "1",
- Affiche un message d'alerte me donnant le nom d'une page HTML.

Quand je clique sur le deuxième lien :
- Affiche un message d'alerte me donnant le nom du premier lien : "2",
- Affiche un message d'alerte me donnant le nom d'une page HTML.

Quand je clique sur le troisième lien :
- Affiche un message d'alerte me donnant le nom du premier lien : "3",
- Affiche un message d'alerte me donnant le nom d'une page HTML.

En somme nous avons trois fois la même action mais avec des paramètres différents.
Les arguments vont nous permettre de créer une seule fonction pour ces trois liens et définir les paramètres à l'appel de la fonction.

Le code

De quel paramètre avons nous besoin ?
Il nous faut un paramètre pour définir le nom, nous le nommerons "nom".
Il nous faut un paramètre pour définir le nom de la page HTML, nous le nommerons "page".
En fait le paramètre est une variable que nous déclarons dans la fonction et dont on donne la valeur à l'appel de cette dernière.

Comment écrire la fonction ?
Exemple de code :
function alerter(nom,page) {
  alert(nom);
  alert(page);
}

Comment appeler la fonction en lui donnant les paramètres ?
Il suffit de remplacer nom, et page par le paramètre à passer.
Exemple de code :
<A href="javascript:void(0);" onclick="alerter(1,'page1.html')">Premier lien </A><BR>
<A href="javascript:void(0);" onclick="alerter(2,'page2.html')">Deuxième lien </A><BR>
<A href="javascript:void(0);" onclick="alerter(3,'page3.html')">Troisième lien </A>

Attention nom est une variable de type Number car elle n'est pas entre ' et ' contrairement à la variable page qui est de type String qui est entre ' et '.
Vous remarquerez que la fonction alerter est entre guillemets par conséquence la variable page est entre apostrophe (faites attention c'est une source d'erreur fréquente).

Les arguments

Définition

Les arguments passés à la fonction sont accessibles dans un tableau (Array) appelé arguments.
Exemple de code :
function alerter(nom,page) {
  alert(arguments[0]);
  alert(arguments[1]);
}
alerter("argument0","argument1");

Pour connaître le nombre d'arguments passés vous devez utiliser length
Exemple de code :
arguments.length

Des arguments non prédéfinis

Vous pourriez donc vous passer de spécifier les arguments à passer dans la fonction alerter.
Exemple de code :
function alerter() {
  alert(arguments[0]);
  alert(arguments[1]);
}
alerter("argument0","argument1");
Chapitre gestion du temps
Chapitre les opérateurs