Vous savez que mettre du code JavaScript dans un attribut ( dont le nom commence par "on" ) n'est pas pratique. Le nombre d'instructions est pratiquement très limité, il existe des problèmes avec les guillemets, ...

Vous savez aussi que, hormis l'appel de fonctions, le code JavaScript est mis soit dans la balise script soit dans un fichier externe d'extension .js

<script>

Dans une balise script, on met le code JavaScript.

Cliquez pour afficher un message

  <p>
    <button onclick="afficher();">Cliquez pour afficher un message</button>
  </p>

<script>
function afficher(){
   alert("On peut \"afficher\" n'importe quoi !");
}
</script>

Voyons tout de suite ce qu'est une fonction.

Une fonction

Une fonction exécutera une série d'instructions ( et renverra une valeur ou pas )

Comment définir une fonction ?

function est un mot-clé qui dit ( au programme qui lit le code ) : " ce qui suit est la définition d'une fonction."

Tous les mots-clé s'écrivent toujours tout en minuscule.

function ( en anglais ) = fonction ( en français )

Pour définir une fonction, il faut :

1. taper le mot-clé function en début de ligne,
2. taper un espace ( pour séparer le mot-clé du nom de la fonction ),
3. donner un nom ( = nom de la fonction ),
4. faire suivre de parenthèses ( () ),
5. ouvrir une accolade ( { ),
6. placer des instructions,
7. fermer l'accolade ( } ).

Important : La fonction est définie dans une balise script ou, mieux, dans un fichier externe .js

Vérifions le code suivant :

function afficher(){
   alert("On peut \"afficher\" n'importe quoi !");
}

Il existe bien le mot-clé function en début de ligne, un nom - afficher -, un ( ou plusieurs ) espace entre le mot-clé et le nom de la fonction, un nom correct de fonction, une paire de parenthèses,  aucun ou plusieurs espaces , une accolade ouvrante, une seule instruction - alert("On peut \"afficher\" n'importe quoi !"); - et une accolade fermante ( sans être suivi d'un point virgule ). Tout est bon ! La fonction a été correctement définie.

Rappel important. Toutes les instructions à l'intérieur des accolades doivent se terminent par un point virgule. Mais, il ne faut jamais mettre de point-virgule après l'accolade fermante.

Vérifions le code suivant :

Function afficher(){
   alert("On peut \"afficher\" n'importe quoi !")
};

Nous constatons trois grosses fautes !

1. Function n'est pas un mot-clé !
2. La fonction ne contient pas d'instruction !
3. Après l'accolade fermante se trouve un point-virgule !

Que fait une fonction ?

Elle exécute toutes les instructions placées entre ses accolades, uniquement si elle est appelée ...
Voyons donc tout de suite comment appeler une fonction.

Comment appeler une fonction ?

Rappel : Une fois que le code ( HTML, CSS et JavaScript ) écrit est lu, il se trouve dans la mémoire. Lorsqu'une fonction est appelée, le navigateur cherche la définition de la fonction dans la mémoire ( et non dans le fichier HTML )

Pour qu'une fonction soit utile, il faut l'appeler !

Et, comment appelle-t-on une fonction ?

Par son nom !
Suivi de la paire de parenthèses et du fameux point-virgule.

Pourquoi mettre une paire de parenthèses ? Pour distinguer le nom d'une fonction du nom d'une variable ( que nous étudierons bientôt )
Pourquoi mettre un point-virgule ? Parce qu'appeler, c'est donner un ordre ...

Regardons ce code HTML :

  <p>
    <button onclick="afficher();">Cliquez pour afficher un message</button>
  </p>

S'il n'existe qu'une seule instruction, le point-virgule n'est pas obligatoire, mais il est préférable d'en mettre un.

afficher(); est bien un appel de fonction. Car, on donne le nom d'une fonction ( qui a été définie dans une balise <script> ). Ce nom est bien suivi par une paire de parenthèses, suivies par un point-virgule.

Important : Le code de la fonction est dans une balise script ou un fichier externe. Mais, son appel est la valeur d'un attribut d'une balise.

Exemple : <button onclick="afficher();">Afficher</button>

On sait que la valeur de l'attribut onclick contient du code JavaScript; que ce code est un appel de la fonction afficher(); que les instructions contenues dans cette fonction vont être exécutées. Oui, mais quand ?

Qu'est-ce qui va déclencher l'appel de la fonction ?

L'événement click sur le bouton.

Un clic sur le bouton va déclencher l'exécution du code JavaScript contenu dans l'attribut onclick. Comme ce code est un appel de fonction, la fonction appelée va exécuter toutes les instructions comprises entre ses accolades.

<script>
function afficher(){
  alert("On peut \"afficher\" n'importe quoi !");
}
</script>

Ici, il n'y a qu'une seule instruction : un appel de la "fonction" alert().

Donc, afficher() appelle alert() ...
Une fonction peut appeler une fonction !
Toute fonction peut appeler une fonction qui appelle une fonction qui appelle une fonction qui ...
C'est très courant en programmation.

Bref, ici, un clic sur le bouton va provoquer l'affichage d'une boîte de dialogue.

Le code HTML qui contient du code JavaScript ( dans l'attribut onclick et dans la balise script ) ne devrait plus avoir de secret pour vous.

<p>
    <button onclick="afficher();">Cliquez pour afficher un message</button>
</p>

<script>
function afficher(){
   alert("On peut \"afficher\" n'importe quoi !");
}
</script>

Oui, mais dans la balise script, la fonction alert() n'y est pas définie ! Comment se fait-il alors qu'une boîte de dialogue s'affiche ?

Le langage JavaScript met à votre disposition beaucoup de "choses" toutes faites pour vous faciliter la vie, dont alert().

Concernant alert(), vous savez l'utiliser. Il suffit de mettre entre ses parenthèses tout ce que vous voulez afficher dans la boîte de dialogue, entouré de guillemets.

Nous verrons qu'on peut aussi y mettre un nombre ou la valeur d'une variable.

   alert("On peut \"afficher\" n'importe quoi !");

Rappel : Si on observe attentivement le contenu de la boîte de dialogue, on constate que les deux \ qui entourent le mot afficher ne s'affichent pas ! Vérifier en cliquant sur le bouton :

Cliquez sur ce bouton :

Cliquez pour afficher un message

\ est un caractère spécial, appelé caractère d'échappement. Nous y reviendrons.

"return" et arguments

Vous savez comment on construit une fonction et comment on l'appelle. Vous devez encore savoir que les fonctions peuvent recevoir des arguments ( en entrée ) et peuvent retourner une valeur ( en sortie )

Le mot-clé return - qui signifie en français retourner - peut être suivi d'un nombre, d'une chaîne de caractères, d'un nom de variable, d'une expression, du nom d'une autre fonction ou de rien du tout, suivi d'un point-virgule.

Ne pas oublier le point-virgule qui termine l'instruction commencée par return.

Nous verrons ce qu'est une chaîne de caractères, un nom de variable, une expression plus tard.

Après avoir retourné le contenu d'une variable ou rien, le programme quitte immédiatement la fonction. Les autres instructions de la fonction ne seront donc pas exécutées. Il exécute alors les éventuelles instructions qui suivent l'appel de la fonction qu'il vient d'abandonner.

Si la fonction ne retourne rien du tout. Le contenu de l'éventuelle variable qui recevra ce rien du tout sera undefined.

Dire : "Bonjour Thibaut !"

<p>
    <button onclick="testerReturn();">
        Dire : " Bonjour Thibaut ! "
    </button>
</p>

<script>

function direBonjour(prenom) {     /* étape 3 (donne à la variable prenom la valeur "Thibaut") */
    return "Bonjour, " + prenom + " !"; /* étape 4 (construit la phrase */
                                   /* et la renvoye à alert() de l'étape 2 */
    alert("Au revoir !");          /* Cette instruction ne sera jamais exécutée car après un return */
}

function testerReturn(){           /* étape 1 (point de départ après le clic) */
    alert(direBonjour("Thibaut")); /* étape 2 (appelle la fonction direBonjour() et lui passe "Thibaut") */
                                   /* étape 5 (alert() reçoit la phrase construite et l'affiche) */
    alert("À bientôt !");          /* étape 6 (alert() affiche ce qui lui est passé) */

}                                  /* étape 7 (point final du déroulement du programme) */

</script>

Il peut exister plusieurs return dans une fonction. Notamment, si ces return sont placées dans des if ...
Nous verrons plus tard ce qu'est un if ainsi que la signification du signe plus en JavaScript.

Un script ( comme tout programme ) commence avec une fonction et se termine lorsqu'il n'a plus d'instructions à exécuter.

Il est important de bien comprendre comment le programme "pense". Il est extrêmement logique !

Le fait de donner des arguments à une fonction, lors de sa définition, permet à la fonction d'être " alimentée " via des paramètres différents, lors de l'appel, et de retourner des résultats différents.

Le fait qu'une même fonction puisse produire des résultats différents est même le principal intérêt des fonctions.

Une même fonction peut produit des résultats différents

<p>
    <button onclick="test2();">
        Une même fonction peut produit des résultats différents
    </button>
</p>

<script>

function surface(longueur,largeur){
    return longueur * largeur; /* ici, le return est suivi d'une expression */
}

function test2(){ /* la dernière déclaration de fonctions
    = celle où commence le programme */

    var resultat;

    resultat=surface(3,2);
    alert("La surface vaut " + resultat + " m²");

    resultat=surface(7,4);
    alert("La surface vaut " + resultat + " m²");

    resultat=surface(10,6);
    alert("La surface vaut " + resultat + " m²");

}

</script>

Un script peut contenir plusieurs déclarations de fonctions.
Il est recommandé de définir les fonctions avant de les appeler.
Dans le code, la fonction qui sert de point de départ, appelée lors du clic, test2(), est donc la dernière à être déclarée.

Rappel : Ne pas oublier les accolades, ni les point-virgules.
En programmation, aucune erreur n'est admise.

Différents codes peuvent conduire au même résultat.

Une même fonction peut produit des résultats différents

  <p>
    <button onclick="test3();">
      Une même fonction peut produit des résultats différents
    </button>
  </p>
<script>

function surface3(longueur,largeur){
    alert("La surface vaut " + longueur*largeur + " m²");
}

function test3(){
    surface3(3,2);
    surface3(7,4);
    surface3(10,6);
}

</script>

Évidemment, il ne faut pas, lors de l'appel, donner plus de paramètres que la fonction n'a été prévue à recevoir. De plus, lorsqu'ils sont plusieurs, les paramètres doivent être donnés dans l'ordre prévu lors de la définition.

Le caractère d'échappement : \

Le caractère \ est un caractère - appelé caractère d'échappement - qui a une signification spéciale en JavaScript.

\ est une oblique inversée, appelée anti-slash - qui se trouve sur le clavier à gauche près de la touche majuscule. Pour la taper, il faut taper sur les deux touches : AltGr et "<"
/ est une oblique, appelée slash, utilisée comme signe de division, touche située sur le pavé numérique.

Le caractère d'échappement est un caractère qui déclenche une interprétation alternative du caractère qui le suit.

Une chaîne doit toujours être entourée de guillemets.
( Ou d'apostrophes, mais ce n'est pas recommandé )

Le premier guillemet indique le début de la chaîne. Et, le second indique la fin de la chaîne.

Or, si cette chaîne contient un guillemet, cela coupe anticipativement la chaîne ...

   alert("On peut "afficher" n'importe quoi !");

Or, la fonction alert() ne peut recevoir une chaîne de caractères suivie par on ne sait pas quoi.
Or, afficher" n'importe quoi !" = on ne sait pas quoi. Et, donc la fonction alert() n'affichera pas de boîte de dialogue. Pire ! Elle va arrêter le programme.

Vous avez été prévenu. En programmation, aucune erreur ne sera tolérée.

La solution : le caractère d'échappement

L'interprétation alternative sera alors : ne considère pas ce qui suit ( le guillemet ) comme le caractère qui débute ou termine la chaîne de caractères. Donc, ce qui suit sera interprété comme un caractère normal.

Évidemment, le caractère d'échappement ne s'affiche pas.
Toutefois, si on veut afficher le caractère d'échappement, il faut échapper le caractère d'échappement ! ( Et, donc écrire : "\\" )

Toutefois, il est possible d'afficher un retour à la ligne, en tapant dans la chaîne de caractères les deux caractères suivants : \n

n pour new line ( en français : nouvelle ligne )

Cliquez pour afficher un guillemet et un caractère d'échappement

  <p>
    <button onclick="afficherGuillemet();">
      Cliquez pour afficher un guillemet et, sur la deuxième ligne, un caractère d'échappement
    </button>
  </p>

<script>

function afficherGuillemet(){
   alert("Un guillemet : \"\net, sur la deuxième ligne, un caractère d'échappement : \\");
}

</script>

Il n'est pas affiché : \net, sur la deuxième ligne, ...
Ce qui s'affiche est une seconde ligne ( grâce à \n ) qui commence par : et, sur la deuxième ligne, ...

Cliquez pour afficher directement un résultat

<p>
    <button onclick="afficherNombre();">
    Cliquez pour afficher directement un résultat
    </button>
</p>

<script>

function afficherNombre(){
   alert(2+2);
}

</script>

alert() est une fonction puissante. Elle est capable de faire les opérations arithmétiques avant. Et, de n'afficher que le résultat.
Heureusement, qu'elle est pré-définie ...

Mais qu'est-ce qu'une variable, une condition de sortie ?
Nous verrons ces notions prochainement.