Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

DECOUVERTE DES FONCTIONS JAVASCRIPT

Présentation des fonctions

Une fonction correspond à un bloc de code dont le but est d’effectuer une tâche précise.

Par exemple, la fonction alert() a été créée afin d’afficher des messages dans des boîtes de dialogue.

Le grand intérêt des fonctions est que l’on a pas à redéfinir le code de notre fonction à chaque fois : une fois notre fonction créée, nous n’avons plus qu’à l’appeler en mentionnant son nom pour pouvoir l’utiliser autant de fois que nous le voulons.

On peut dissocier deux grands types de fonctions en JavaScript : les fonctions natives et celles que nous allons créer nous mêmes.

Les fonctions natives, ou prêtes à l’emploi, sont des fonctions qui ont déjà été créées par d’autres développeurs et qui ont été intégrées au langage JavaScript lui même.

Par exemple, la fonction alert() est une fonction native : nous n’avons jamais défini son code, nous nous contentons de l’appeler pour l’utiliser.

Cependant, vous devez savoir que lorsqu'on utilise alert(), il y a tout un code long et complexe qui s'exécute pour nous permettre d'afficher notre boîte de dialogue.

Le JavaScript possède de nombreuses fonctions natives. Cela est très pratique pour nous car, encore une fois, nous n’avons qu’à appeler ces fonctions afin qu’elles effectuent les tâches voulues à notre place sans avoir à nous soucier de savoir comment elles fonctionnent.

Cependant, dans certains cas, nous aurons des besoins plus spécifiques et nous serons donc obligés de créer nous mêmes nos propres fonctions.

Création d’une fonction JavaScript

Dans cette partie, nous allons créer une première fonction JavaScript simple.

Cela va être pour nous l’occasion de voir « l’envers du décor » et de découvrir la syntaxe des fonctions en JavaScript et comment celles-ci fonctionnent.

Je vous propose de créer une fonction multiplication() dont le rôle sera de multiplier deux nombres entre eux, quels que soient ces nombres.

Pour créer une fonction en JavaScript, il faut utiliser le mot clef function (fonction en anglais), suivi du nom de la fonction que l’on souhaite créer, puis d’un couple de parenthèses et d’un couple d’accolades comme ceci :

La syntaxe des fonctions

Les noms des fonctions suivent les mêmes règles que ceux des variables. Vous pouvez donc donner le nom que vous voulez à votre fonction du moment que celui-ci commence par une lettre, ne contient pas d’espace ni de caractères spéciaux et n’est pas déjà pris nativement par le JavaScript.

Ici, j’ai choisi d’appeler ma fonction « multiplication ».

Entre les accolades, nous allons écrire le code qui doit être exécuté lorsqu’on va appeler notre fonction par la suite.

Le couple de parenthèses est très important car ce sont elles qui vont nous permettre de déclencher l’exécution de la fonction, entre autres.

A l’intérieur de ces parenthèses, nous allons également pouvoir passer ce que l’on appelle des paramètres à notre fonction.

Les paramètres correspondent à ce dont la fonction a besoin pour fonctionner.

Par exemple, dans notre cas, le rôle de notre fonction est de multiplier deux nombres entre eux. Notre fonction va donc avoir besoin de recevoir ces deux nombres.

Comme on veut pouvoir multiplier n’importe quels nombres entre eux, nous n’allons pas préciser de nombres précis ici, mais plutôt utiliser arbitrairement deux lettres comme x et y par exemple.

Nous allons ensuite nous resservir de ces deux lettres à l’intérieur du code de notre fonction bien évidemment.

Voici donc à quoi va finalement ressembler notre fonction :

Création de notre première fonction JavaScript

Ca y est, notre première fonction est créée et opérationnelle.

Pour la faire fonctionner, nous n’avons plus qu’à l’appeler grâce à son nom en précisant cette fois-ci entre parenthèses les nombres que l’on souhaite multiplier entre eux. La fonction va alors exécuter son code.

Utilisation de notre première fonction

Le fonction renvoie le résultat attendu

Essayer ce code !

Comme vous pouvez le voir, notre fonction a bien multiplié les deux nombres entre eux et a renvoyé le résultat grâce à alert(). Remarquez par ailleurs qu'on peut tout à fait inclure une autre fonction dans une fonction (ici, nous avons inclus alert() dans notre fonction multiplication()).

Pour bien comprendre : lorsque l’on a appelé notre fonction, nous lui avons passé les nombres 5 et 10 qui ont pris la place de x et y. Notre fonction a ensuite effectué le calcul « 5 * 10 » et a alerté le résultat.

L’intérêt majeur des fonctions, une fois encore, est qu’une fois créées on peut les utiliser à l’infini.

Ainsi, nous pouvons maintenant utiliser notre fonction multiplication() pour multiplier toutes sortes de nombres entre eux :

On peut utiliser notre fonction autant de fois qu’on le souhaite

Essayer ce code !

Paramètres ou arguments

Afin d’être tout à fait précis, il me semble important de bien différencier les termes paramètres et arguments.

Cela devrait également vous aider à bien comprendre ce qu’il s’est passé au dessus.

Tout d’abord, vous devez savoir que toutes les fonctions n’ont pas forcément besoin de paramètres (en revanche, la paire de parenthèses est elle obligatoire).

Pour savoir si votre fonction a oui ou non besoin de paramètres, posez vous la question de ce dont elle a besoin pour fonctionner.

Si celle-ci utilise une partie « variable » dans son code (des nombres à multiplier, un message à afficher, etc.), alors votre fonction aura besoin de ces « variables » et aura donc besoin de paramètres.

On parle de paramètre lorsque l’on crée la fonction. Un paramètre n’est qu’un « témoin ».

Lorsqu’ensuite on passe de vraies valeurs à nos fonctions, on parle alors d’arguments. Prenez bien le temps de faire cette distinction car connaître ceci aide beaucoup pour comprendre les fonctions.

Par exemple, dans notre exemple ci-dessus, les lettres x et y sont des paramètres tandis que les chiffres 5 et 10 sont des arguments qui ont été passés à notre fonction.

Faire retourner des valeurs à nos fonctions

Dans l’exemple précédent, notre fonction multiplication avait en fait deux rôles : calculer le produit de deux nombres et renvoyer le résultat avec un alert().

Cette façon de faire n’est pas toujours la meilleure. En effet, nous n’avons ici aucun contrôle sur le résultat en soi, puisque celui-ci est retourné dès que notre fonction est appelée.

Souvent, nous préférerons pouvoir récupérer le résultat d’une fonction afin de pouvoir le réutiliser ou l’afficher plus tard.

Pour faire cela, nous allons cette fois-ci utiliser une instruction return plutôt qu'un alert().

L’instruction return va retourner simplement le résultat d’une fonction, sans l'afficher.

Utilisation de l’instruction return

Pour récupérer le résultat retourné en JavaScript, il existe plusieurs solutions. Pour le moment, à notre niveau, nous allons nous contenter d’une seule : le stockage du résultat dans une variable.

De cette manière, nous allons ensuite pouvoir effectuer toutes sortes d’opérations sur notre variable ou afficher son contenu lorsque nous le voulons.

On stocke le résultat de notre fonction dans une variable

On affiche le résultat final

Essayer ce code !

Ici, nous avons placé le résultat de la multiplication de 5 par 10 dans une variable resultat. Nous avons ensuite ajouté 2 au contenu de notre variable puis avons finalement affiché son contenu.

Comme nos scripts et nos fonctions sont simples, il est possible que tout cela vous semble futile pour le moment. Cependant, je vous recommande vraiment de vous attacher à ces points qui vont s’avérer très utiles par la suite.

Attention cependant : l’instruction return met également fin à l’exécution d’une fonction, ce qui signifie que toutes les autres opérations qui suivraient un return dans une fonction seraient ignorées.

Return met fin à l’exécution d’une fonction

Essayer ce code !

Plus sur les fonctions en JavaScript

Pour le moment, nous allons nous limiter à cette première approche des fonctions.

Nous verrons plus tard dans ce cours de nouveaux types de fonctions un peu plus complexes ainsi que d’autres utilisations possibles pour nos fonctions.

Chapitre précédent

Chapitre suivant