Javascript (3) - Les fonctions

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons traiter les fonctions. En JavaScript et comme dans les autres langages de programmation, les fonctions sont des sous-programmes qui permettent de factoriser un code qui peut se répéter à plusieurs endroits. Quand vous créez la fonction, il faut ensuite l'appeler pour pouvoir l'exploiter. En JavaScript, pour créer une fonction il suffit de la déclarer à n'importe quel endroit, mais comme je l'ai mentionné dans la séance précédente, vous mieux mettre ses codes JavaScript soit dans la balise head ou bien juste avant la fermeture de la balise body. Dans notre cas, nous allons essayer de mettre le code dans la balise head. La première chose à faire c'est déclarer la fonction grâce au mot-clé function. Et ensuite on va lui donner un nom, par exemple f. Le nom de la fonction doit respecter les mêmes règles que pour les variables, c'est-à-dire ça doit contenir que des caractères alphabétiques, numériques, le symbole souligné ou bien le symbole dollar. Alors là, on va déclarer le code de la fonction. Par exemple, on va mettre tout simplement alerte Bonjour. Bon, jusqu'ici notre fonction est bien créée, mais il faut l'appeler pour pouvoir l'exploiter. Bon, juste après, je vais mettre f. Bon, ça c'est l'appel de la fonction. Maintenant, si on exécute, on va voir que le message Bonjour sera affiché dans une sorte de boîte de dialogue que l'on appelle alerte. Voilà, donc l'alerte c'est ça. On va découvrir ces méthodes un peu plus loin avec plus de détails, mais pour le moment c'est aussi une autre manière qui permet d'afficher un message en JavaScript au lieu de recourir à chaque fois à la méthode console.log. Alors là nous avons le résultat de l'exécution de la fonction qui affiche le message Bonjour dans notre boîte de dialogue alerte. Comme pour les autres langages de programmation, on peut passer des arguments à notre fonction. Par exemple, imaginez que je veux personnaliser le message à afficher. Au lieu que ce soit Bonjour, je veux que ce soit quelque chose de différent. Donc là il suffit de passer l'argument en tant que variable. Par exemple je vais l'appeler msg pour dire message, que je mettrai ici en tant que variable. Et maintenant je passe la valeur du message au moment de l'appel de la fonction. Par exemple salut. Quand j'exécute maintenant, je vais voir que le message salut est écrit. C'est de la même façon que je pourrais passer autant d'arguments que je souhaite. Il suffit de les séparer par une virgule. Par exemple si je veux mettre 2 messages différents, par exemple message va mettre message1 et message2. Voilà, alors là, bon, je vais les concaténer par exemple avec un espace. msg2, donc là c'est msg1, et pour le message1 ça sera Salut, bon, pour le message2 ça sera À tous. Maintenant quand j'exécute, je vais avoir le résultat Salut à tous comme ceci. Notez aussi qu'une fonction peut retourner un résultat parce qu'ici nous avons exploité la fonction dans son aspect procédure. Par exemple, en langage C, il y a une petite différence entre fonction et procédure. La fonction retourne un résultat que l'on peut exploiter par la suite, alors que les procédures font un traitement au moment de l'appel et ne retournent rien. Dans ce cas, la fonction que l'on vient de créer, elle retourne effectivement rien, c'est-à-dire c'est plutôt une procédure. Mais si on veut qu'il nous retourne quelque chose, alors il suffit de mettre un truc du genre, par exemple là je vais éliminer les arguments et je mets là return bonjour, c'est-à-dire qu'au moment de l'appel de la fonction f, il va tout simplement me retourner le message bonjour. Maintenant quand j'appelle la fonction comme ça, Il va rien afficher, c'est normal parce que ça m'a retourné une valeur mais que j'ai pas exploitée. Alors là je n'ai rien, il suffit de mettre ici alert, ça veut dire que je vais afficher le résultat de retour de ma fonction qui n'est rien d'autre que le message Bonjour. Et voilà, maintenant le message est affiché correctement. Notez que JavaScript est un langage de programmation interprété, c'est-à-dire il est préférable que vous appeliez vos fonctions après leur déclaration. Ça veut dire que si vous déclarez le f juste avant, selon les navigateurs, des fois ça peut pas générer des erreurs, mais dans la plupart des cas vous aurez des erreurs parce que logiquement on peut pas exploiter une fonction qu'on n'a pas encore déclarée. Notez aussi qu'il existe les fonctions récursives, c'est-à-dire des fonctions qui s'appellent par elles-mêmes. Là par exemple, pour la fonction f, on va supposer que l'on veut tout simplement afficher un message. alerte, bonjour, et on va mettre par exemple un truc du genre concaténé avec i concaténé avec fois. Vous imaginez qu'on va afficher bonjour une fois, deux fois, etc. Alors il faut initialiser la variable i. Bon, pour le moment je vais initialiser à l'extérieur de la fonction comme ceci. À l'appel de la fonction, je vais tout simplement afficher bonjour une fois. Bon, quand j'exécute, ça affiche ceci. Imaginez que je veux qu'il m'affiche bonjour une fois, bonjour deux fois, plusieurs fois de suite. Alors il suffit d'incrémenter ici Voilà, et je rappelle la fonction. Et bien sûr, quand je fais ça, je vais tomber dans une sorte de boucle infinie parce que je mets jamais fin à l'appel de la fonction. Donc je mettrai une condition, par exemple if i est inférieur à 5, j'appelle ma fonction. Bon, sinon je mettrai par exemple return false. Bon, c'est juste une méthode qui permet de sortir de la fonction, c'est-à-dire que je vais quitter maintenant la fonction, plus la peine de continuer. Maintenant j'exécute, ça m'affiche bonjour une fois, bonjour 2 fois, bonjour 3 fois, bonjour 4 fois et bon ça s'arrête. Bon ça dépend de la condition, qu'est-ce que vous avez mis dedans. L'essentiel c'est que nous avons invoqué ce que l'on appelle une fonction récursive qui s'appelle par elle-même. Le premier appel je l'ai programmé manuellement, ça veut dire que c'est un appel que je dois effectuer la première fois par moi-même et ensuite les autres appels ils sont systématiques, ça veut dire que la fonction dans son corps elle se rappelle par elle-même et du coup cet appel va être récursif ou bien répétitif à la manière des structures itératives comme la boucle boucle while ou bien la boucle for. Vous avez constaté que j'ai déclaré la variable i à l'extérieur de la fonction et j'ai pu l'exploiter à l'intérieur. C'est normal parce que la variable i dans ce cas c'est une variable globale, ça veut dire qu'elle est reconnue un peu partout dans le script JavaScript. Bon maintenant on va faire un test, on va éliminer cette ligne, on va alléger un petit peu le corps de la fonction, on mettra tout simplement quelque chose du genre, par exemple on va initialiser la variable i égale à Bonjour. Voyons, changez, on va mettre s. Donc s contient la valeur bonjour. À l'appel de la fonction, j'imagine que j'initialise la variable s avec la valeur bonjour. Juste après, je vais mettre alert pour voir est-ce que bonjour sera vraiment reconnu à l'extérieur de la fonction. Maintenant quand j'exécute, ça m'affiche bel et bien bonjour. Ça veut dire que ma variable s est une variable globale. Bien qu'elle ait été déclarée au sein de la fonction, mais elle est reconnue aussi à l'extérieur de celle-ci. Par contre, imaginez que j'ai fait ça. Maintenant avec var, je rends ma variable locale. Il agit sur la portée de la variable. Dans ce cas, s est local à la fonction f, il ne sera pas reconnu ailleurs. Maintenant quand j'exécute le code, je n'ai rien qui s'affiche parce que j'ai une erreur. Il suffit d'afficher la console et on va voir qu'il y a une erreur ici qui me dit que la variable s n'est pas reconnue ou bien n'est pas définie. Et c'est normal. Maintenant si j'enlève var, et que j'exécute, je n'ai aucune erreur et du coup j'ai le message qui s'affiche correctement. Alors là, donc ça vous permet tout simplement d'agir sur la portée des variables. Si vous mettez var, alors ça devient local. Si vous mettez rien, alors c'est par défaut global. On se contente de ça pour aujourd'hui. Merci pour votre attention et à la vidéo prochaine.