L'essentiel de JavaScript

Créer des fonctions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Étudiez le concept de fonction en JavaScript et la manière d'en créer ou de passer des paramètres. Voyez quelques trucs et astuces pour bien démarrer avec les fonctions.

Transcription

Au fur et à mesure que vos scripts vont se complexifier, votre préoccupation principale sera de garder un code clair, propre et facile à maintenir. Vous aurez donc envie de séparer vos longs Scripts en modules plus petits et réutilisables, auxquels vous allez donner des noms. Voilà l'une des définitions d'une fonction, en JavaScript, c'est-à-dire un blog de code auquel vous allez donner un nom et que vous pourrez ensuite appeler plusieurs fois. Allons voir comment cela se passe. Je déclare deux variables, « a » qui est égal à « 2 », « b » qui est égal à « 3 », je déclare ensuite une troisième variable, « result » qui est l'addition de « a » et de « b », 2 + 3 ça fait 5. Je fais un « console.log » de ce résultat, c'est pour ça que j'ai le nombre « 5 » qui apparaît ici, dans la console de mon navigateur. Si je veux faire une fonction avec tout ça, la première chose que je vais faire, c'est de délimiter, par des accolades, le blog de code que je veux insérer dans ma fonction. Je vais ouvrir une accolade, ici. Je vais fermer mon accolade un petit peu plus loin et dans ma fonction je vais avoir deux instructions. Une qui crée la variable « result » et qui la rend égale à l'addition de « a » et de « b » et la deuxième instruction qui envoie le résultat dans la console. Je vais indiquer au JavaScript que ce blog de code sera une fonction. Pour ça, je vais utiliser le mot-clé « function » et puis je vais donner un nom à ma fonction. Je vais l'appeler « addNumbers » comme ceci. Dernière chose au niveau de la syntaxe des fonctions : j'ai besoin d'une paire de parenthèses ici et je vous expliquerai dans quelques instants à quoi sert cette paire de parenthèses. Au niveau du nom des fonctions, sachez qu'une fonction, dans JavaScript, c'est une variable donc vous devez observer les mêmes règles, les mêmes restrictions que quand vous donnez des noms à vos variables. Pas d'espace, pas de caractères spéciaux, certains caractères comme le tiret sont interdits. Je peux utiliser des nombres mais pas au début, etc, etc. Vous connaissez maintenant toutes ces règles. Si je sauvegarde mon Script et que je rafraîchis ma page, vous voyez que dans ma console il n'y a plus rien du tout qui apparaît. Pourquoi ? Parce que quand je définis une fonction comme je l'ai fait ici, ces fonctions ne s'exécutent pas automatiquement. Je dois explicitement appeler ces fonctions, c'est pour ça que je vais rajouter une ligne de code, qui sera la ligne « addNumbers » avec les parenthèses et le point virgule, donc en ligne « 3 », j'appelle explicitement ma fonction. Le nombre « 5 » est maintenant bien de retour dans ma console. L'avantage c'est que je peux appeler ma fonction plusieurs fois. Regardez, je vais dupliquer ici cette ligne de code. J'appelle ma fonction « addNumbers » deux fois et j'ai le nombre « 5 » qui apparaît deux fois dans ma console. C'est très pratique et vous permet de réutiliser plusieurs fois le même bloc de code, de rappeler plusieurs fois les mêmes fonctions, sans devoir réécrire à chaque fois ces blocs de code qui sont, à chaque fois, similaires. Si vous regardez le code JavaScript sur la partie gauche de l'écran, il y a peut-être quelque chose qui vous chiffonne un petit peu. En effet j'appelle ma fonction en lignes « 3 » et « 4 » et puis je la définis entre les lignes « 6 » et « 9 ». Je l'appelle avant de la définir, c'est un petit peu particulier mais vous voyez que ça ne pose aucun problème en JavaScript, ça fonctionne très bien. En fait, le navigateur va scanner ce code une première fois, à la recherche des fonctions, il va créer les fonctions dans la mémoire de l'ordinateur et puis va scanner ce code une deuxième fois ligne par ligne, de haut en bas, pour exécuter les différentes fonctions qu'il aura créées lors du premier scan. Si ça ne pose pas de problème en JavaScript, ça nous pose un petit problème : ce n'est pas très logique. Nous allons prendre pour habitude, et considérer comme une meilleure pratique, le fait de définir nos fonctions en tête de code. Il est plus logique finalement de définir ce qu'on utilise avant de l'utiliser un petit peu plus bas. Cette fonction, vous allez voir est très flexible et je vais maintenant la rendre un peu plus sophistiquée en permettant de lui envoyer des données, des paramètres. C'est à ça que servent les parenthèses qui sont ici. Je vais pouvoir définir dans cette fonction, deux paramètres. Un paramètre que je vais appeler « num1 », un second paramètre que je vais appeler « num 2 ». Voyez que je les sépare par des virgules et, grâce à cela, à l'intérieur de cette fonction, entre les accolades qui s'ouvrent et qui se ferment, je vais avoir accès à deux variables supplémentaires : la variable « num1 » et « num2 » et plutôt que d'additionner « a » et « b », je vais additionner « num1 » et « num2 » maintenant. Le gros avantage de procéder comme ça, c'est qu'à chaque fois que j'appelle ma fonction, je vais pouvoir décider de la valeur de ces « num1 » et « num2 ». Regardez en ligne « 9 » j'appelle ma fonction une première fois et, dans les parenthèses, je vais décider que « num1 » est égal à 2 et que « num2 » est égal à 3. Par contre, la deuxième fois que j'appelle ma fonction, je vais dire que « num1 » est égal à10 et que « num2 » sera égal à 40, par exemple. Voilà, je sauvegarde, je rafraîchis ma page et vous voyez que j'ai cinq et cinquante qui arrivent dans la console, puisque la première fois j'additionne 2 et 3 ça fait 5, puis la seconde fois j'additionne 10 et 40, ça fait bien 50. Vous voyez que les fonctions sont décidément très, très flexibles, grâce à ces paramètres que je peux leur envoyer. Si je peux envoyer des paramètres dans une fonction, je peux également demander aux fonctions de me renvoyer des résultats. Pour cela, plutôt d'utiliser un « console.log » je vais utiliser le mot-clé « return » et renvoyer la valeur de la variable « result » au code qui a appelé la fonction. Donc ici, en ligne 9, j'appelle la fonction « addNumbers » en lui passant 2 et 3 comme paramètres, donc il va faire l'addition de 2 et 3 et puis il va me renvoyer le résultat, ici, en ligne « 9 ». En ligne 9, je vais stocker dans une variable que je vais appeler « addition 1 », par exemple, le résultat qui m'est retourné par cette fonction. Et je vais faire la même chose au niveau de la ligne suivante, simplement, je vais appeler cette variable « addition 2». Maintenant, je vais faire des « consoles.log » de ma variable « addition 1 » et puis de ma variable « addition 2 ». Quand je rafraîchis ma page, voyez qu'il n'y a rien qui change, c'est toujours 5 et 50, sauf qu'ici ma fonction est beaucoup plus sophistiquée puisqu'elle est capable de recevoir des données, grâce à « num1 » et « num2 » et puis elle est capable également de me renvoyer un résultat, grâce à ce mot-clé « return », résultat que je stocke dans les variables « addition 1 » et « addition 2» que je logue ensuite dans la console. Alors je vais simplifier un peu mon code, pour n'appeler ma variable qu'une seule fois, comme ceci. Que se passe-t-il quand je passe trop de paramètres ? Par exemple ici, j'appelle ma variable et je passe le paramètre 2, 3 puis 5 et 7, par exemple, donc je passe quatre paramètres à ma fonction alors qu'elle ne m'en attend que deux. Quand je rafraîchis, vous voyez que ça ne génère aucune erreur, le nombre qui est logué dans la console c'est cinq. Donc le 2 et le 3 sont pris en compte (2 plus 3 ça fait 5) et le 5 et le 7 qui sont passés à la fonction sont tout simplement ignorés par la fonction, puisque il n'y a aucun emplacement qui est prévu au niveau des variables pour stocker les valeurs que j'envoie à la fonction. C'est ignoré et il n'y a pas d'erreur, contrairement à ce qui se passerait dans d'autres langages. Si maintenant j'envoie trop peu de paramètres dans ma fonction, par exemple, je n'envoie que le paramètre 2, ça ne génère pas d'erreur non plus. Voyez que je n'ai pas de message en rouge qui me dit que ça ne fonctionne pas, simplement j'ai ici une valeur un petit peu spéciale, qui est « NaN ». « NaN » veut dire « Note et Number », ce n'est pas un nombre. Pour bien comprendre ce qui se passe, dans ma fonction, je vais faire un « console.log » de cette variable « num1 » et, juste en dessous, je vais faire également « un console.log » de cette variable « num2 », voilà. Je rafraîchis ma page et vous voyez que les deux variables « num 1 » et « num 2 » existent. La variable « num 1 » a bel et bien la valeur 2 puisque j'envoie cette valeur ici, quand j'appelle la fonction « addNumber » sur la ligne 11 et puis la variable num 2 existe mais elle n'a pas de valeur, elle est « indefined ». Elle a été créée dans la mémoire de l’ordinateur mais je n'ai pas défini de valeur pour cette variable-là. Mais qu'est-ce que j'essaye de faire en ligne 6 ? J'essaye d'additionner 2 et « undefined » et ça me donne « Note » et « Number » , une valeur un petit peu spéciale en JavaScript. On reviendra là-dessus plus tard, « Note » et « Number » est une valeur très intéressante. Vous voyez que ça ne génère pas d'erreur pour autant comme cela se passerait dans d'autres langages. Dernière petite chose que je vais vous montrer, c'est la variable « result » que je crée dans la fonction. Je vais d'abord renvoyer une deuxième donnée dans la fonction. Cette variable je la crée ici, dans la fonction, en ligne 4. On va faire une petite expérience, je vais faire un « console.log » de « result » en me disant : « Tiens, je la crée en ligne 4 donc en ligne 11, elle sera toujours disponible », eh bien, pas du tout. Vous voyez que ça génère une erreur « result is not defined». Les variables que je crée à l'intérieur des fonctions avec le mot-clé « var », ne sont disponibles que dans les fonctions en question. C'est ce qu'on appelle le « scope » des variables. En français on appelle ça « la portée » des variables. Il définit l'endroit où ces variables sont visibles. Les variables que je crée avec le mot-clé « var », dans les fonctions, ne sont visibles et disponibles que depuis l'intérieur des fonctions. Regardez, si je fais mon « console.log », dans ma fonction ici, avant le « return », ça va fonctionner. Vous voyez que « result » est égal à 5. Par contre, si je mets mon « console.log » à l'extérieur de ma fonction, j'ai une erreur, puisque cette variable « result » n'est pas disponible à l'extérieur de la fonction. Si je veux qu'elle le soit, je devrais définir cette variable, à l'extérieur de la fonction et, dans la fonction, je ne devrai plus utiliser le mot-clé « var ». A ce moment-là, les variables que je définis de cette façon sont appelées des variables globales puisqu'elles sont disponibles globalement dans l'ensemble du Script, que l'on soit à l'intérieur ou à l'extérieur des fonctions. Je crée la variable « result ». Dans la fonction, je modifie sa valeur puis je fais un « console.log » . Si je fais un « console.log » avant d’appeler la fonction, j'ai, dans ma console, la valeur « undefined » puisque la variable « result » existe mais elle n'a pas encore eu de valeur puisque la valeur est donnée par la fonction que j'appelle dans la ligne suivante. Par contre, si je fais mon « console.log » après avoir appelé ma fonction, vous voyez que la variable « result » a la valeur 5, puisque maintenant la fonction a fait son travail, a additionné les deux nombres et a mis une valeur à la variable « result ». Voilà donc, comment fonctionnent les fonctions. C'est quelque chose qui est très utile en JavaScript. Voyez que c'est très flexible, puisque je peux à la fois envoyer des données dans une fonction et puis demander à la fonction de me renvoyer des résultats.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !