Aller au contenu

Fonctions et événements

Fonctions

Les fonctions sont une partie fondamentale de JavaScript.

Définition

📝 Une fonction est un ensemble d'instructions pour effectuer une tâche, qui sont regroupées dans un bloc nommé. Une fonction et ses instructions s'exécutent uniquement lorsqu'elle est appelée par son nom.

Ce sera le cas, par exemple, lorsque l'utilisateur appuiera sur un bouton ou effectuera une tâche similaire dans la page.

Exemple :

Un humain a la fonction de répondre lorsqu'il est appelé par son prénom.

On doit appeler son prénom pour que cette fonction soit déclenchée.

Si on n'appelle pas son prénom, alors la fonction de répondre ne s'exécutera pas.

Créer une fonction

Une fonction est déclarée (créée) en inscrivant les informations suivantes :

  1. mot-clé function
  2. nom de la fonction
  3. parenthèses au bout du nom
  4. optionnel au besoin, liste d'arguments (aussi appelés paramètres) à passer à la fonction, entre parenthèses et séparés par des virgules
  5. entre accolades {}, inscrire les instructions à exécuter

Le code suivant, par exemple, crée une fonction qui affiche une fenêtre à l'écran avec un message :

function afficherBonjour()
{
  alert("Bonjour à tous! Je suis une machine.");
}

Une fonction peut être appelée par une autre fonction :

function main()
{
    let valeurAuCarre;

    valeurAuCarre = calculerCarre(5);
}

function calculerCarre(nombre)
{
    let carre = nombre * nombre;

    return carre;
}

Les événements

Évidemment, l'intérêt d'utiliser du JavaScript dans un contexte web est de pouvoir lancer l'exécution du script à partir de nos pages web.

On lancera génralement l'exécution d'une fonction JavaScript lors d'un événement particulier pour répondre à une action de l'utilisateur.

Voici une liste de quelques événements de base pouvant être appelés dans les balises HTML. Ce sont des événements-attributs, puisqu'ils sont appelés en attribut aux balises :

Événement Description
onload Appelé lorsque l'élément fini de charger dans la page. Il est plus souvent utilisé sur la balise <body> pour lancer un script lorsque la page complète fini de charger.

<body onload="myFunction()">
onclick Appelé lorsque l'élément est cliqué (bouton gauche de la souris appuyé et relâché).

<p onclick="afficherSuite()">Cliquer le paragraphe pour lancer le script.</p>
onmouseover Appelé lorsque la souris passe au-dessus d'un élément.

<img onmouseover="transformerBigImg()" src="smiley.gif" alt="Smiley">
onmouseout Appelé lorsque la souris se déplace hors d'un élément.

<img onmouseout="transformerNormalImg()" src="smiley.gif" alt="Smiley">
onmousedown Appelé lorsque la bouton gauche de la souris reste appuyé su run élément.

<p onmousedown="afficherTexteCache()">Maintenir le bouton de la souris enfoncé!</p>
onmouseup Appelé lorsque le bouton gauche de la souris est relâché.

<p onmouseup="cacherTexte()">Relâcher la souris pour cacher le paragraphe!</p>

Pour une liste complète des événements-attributs possibles, voir la rubrique sur w3Schools.