Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JavaScript : les fonctions

Examinons d'abord les fonctions natives de JavsScript c'est à dire celles qui sont proposées par le langage : des fonctions prêtes à l'emploi.

Les fonctions natives de JavaScript

Nous avons déjà utilisé dans nos scripts des fonctions JavaScript natives suivantes : alert(), prompt(), parseInt(), parseFloat(), etc.
Ces fonctions sont dites natives car elles sont déjà définies dans le langage.

Vous savez que pour utiliser une fonction (on dit appeler une fonction) il faut lui passer un argument.
Ainsi, par exemple, il pour appeler la fonction native alert() il faut passer en argument une expression plus ou moins complexe.
On peut ainsi écrire l'instruction : alert(12*12 + 1000). La fonction retournera le résultat de ce calcul : 1144 (multiplication effectuée avant l'addition).
Il faut aussi respecter la casse dans le libellé de la fonction sinon il y aura "plantage". Ainsi si vous écrivez isnan('bonjour') la console affichera le message : "isnan is not defined" ; la bonne syntaxe est isNaN(vnote).

La fonction confirm()

Parmi les fonctions natives il y a la fonction confirm Cette fonction permet de saisir une valeur logique c'est à dire TRUE ou FALSE.

Le code de la partie BODY :

Le rendu du script :

Actualisez la page pour une nouvelle exécution du script.

Comme avec la fonction prompt une boîte de dialogue s'affiche mais avec deux boutons OK et Annuler et en légende l'argument de la fonction.
Donc si vous cliquez sur OK vous saisissez TRUE et si vous cliquez sur le bouton Annuler vous saisissez FALSE.

Comme la variable vmajeur contient une booléen (ou valeur logique) on peut simplifier la syntaxe et écrire :
vmajeur au lieu de vmajeur == true
!vmajeur (un point d'exclamation qui veut NOT) au lieu de vmajeur == false

La fonction IsNaN() et son inverse

Cette fonction native retourne VRAI si la valeur testée n'est pas au format numérique.
L'inverse de cette fonction est !isNaN qui retourne VRAI si la valeur testée est au format numérique.
Je veux dire par format numérique une suite de chiffres séparés par un point éventuel (séparateur décimal).

Code de l'exemple (extrait) :

Le rendu du script :

Saisir d'abord 12 puis 12,5 puis 12.5
Actualisez la page pour une nouvelle exécution du script.

Créez ses propres fonctions

Le nombre de fonctions natives est limité et ne couvre pas tous les besoins. Donc un script contient souvent une partie dans laquelle on définit ses propres fonctions puis une partie dans laquelle on fait appel à ces fonctions.

Fonctions personnelles - niveau 1

Fonction qui calcule la surface d'un cercle de 2 cm.

Le script

Testez ce script dans un nouvel onglet !

Le script comprend deux parties :

Pour définir une fonction il faut utiliser le mot réservé function suivi du nom que vous donnez à cette fonction.
Ici il s'agit d'une fonction basique qui se nomme fsurface_cercle.
Cette fonction calcule la surface d'un cercle de rayon 2cm. Il n'y a donc pas d'argument à passer.

Dans le programme principal on appelle deux fois la fonction puis on demande l'affichage de vrayon. La console affiche le message d'erreur : "vrayon is not defined". En effet vrayon est une variable créée dans le cadre de la fonction fsurface_cercle donc elle est inconnue du programme principal.

Toute variable déclarée dans le cadre d'une fonction n'est utilisable qu'au sein de cette fonction. On dit que la variable est locale.

Je rappelle que pour afficher la console, il faut faire un clic droit dans l'onglet et sélectionner "inspecter".

Fonctions personnelles - niveau 2

La fonction de l'exemple précédent était d'un usage des plus limité : calcul de la surface d'un cercle de rayon 2 cm ...
Nous allons maintenant définir et utiliser une fonction capable de calculer la surface d'un cercle indépendamment de son rayon et unité de mesure.
C'est possible mais alors il faut alors créer une fonction personnelle avec passage d'argument lors de son appel.

Le script

Autre façon d'écrire la première ligne de définition de la fonction :
var fsurface_cercle = function(vrayon, vunite);

Cette syntaxe montre bien qu'en fait une fonction c'est une variable dont le contenu est évalué.

Test du code

Testez ce script !

Cette fonction nommée fsurface_cercle calcule la surface d'un cercle quelque soit son rayon et l'unité de mesure (cm ou dm ou décimètre ou mètre, etc.).
Il s'agit donc d'une fonction avec passage de deux paramètres.
Pour appeler cette fonction il faut donc indiquer en parenthèses deux arguments.

Lorsqu'on définit la fonction on parle de paramètres et lorsqu'on appelle cette fonction on parle d'arguments.

Dans le programme principal on appelle deux fois la fonction. Les arguments dans le premier appel sont des constantes et dans le deuxième appel les arguments passés sont des variables saisies avec la boite de dialogue prompt().

Pourquoi la dernière instruction est fausse ??? Parce que la variable vsurface est définie au niveau de la fonction ; il s'agit donc d'une variable locale qui est inconnue du programme principal.

Fonction personnelle retournant une valeur

Les fonctions natives non seulement sont paramétrables mais retournent une valeur.
Ainsi la fonction ParseInt() prend en argument une chaine et retourne un entier (ou NaN si la chaine n'est pas au format numérique).
Pour qu'une fonction personnelle retourne une valeur (vers le programme principal) il faut que dans sa définition celle-ci comporte l'instruction return suivie de la valeur à retourner.

Exemple de fonction personnelle retournant une valeur

Le script :

Testez ce script (dans un nouvel onglet) !

La fonction nommée fpuissance2 calcule le carré d'un nombre et retourne ce carré au programme principal mais ne l'affiche pas.
Pour décrire cette fonction j'ai utilisé une autre syntaxe : var nomFonction = function().
Dans le programme principal j'appelle deux fois la fonction fpuissance2.

Nous nous sommes fatigué pour rien. Car il existe une fonction native de l'objet Math : Math.pow(nombre,puissance) ...

Appel de fonction avec en argument le mot "this"

L'argument passé lors de l'appel d'une fonction peut être le mot réservé this qui désigne l'objet courant (ou actif).
Extrait de code :

Le rendu de l'exemple :

Si je clique sur la première image j'ai des infos sur celle-ci : valeurs des attributs src & alt.
Si je clique sur la deuxième image j'ai les mêmes infos pour la deuxième image.

Notez bien la syntaxe : ... onclick ='fafficher(this)' ...

this est un mot réservé de JavaScript très pratique. Il désigne l'élément HTML courant (la cible de la manipulation).

Attention pour qu'une fonction s'applique à l'élément HTML courant il faut employer le mot magique "this" comme argument lors de l'appel de la fonction mais jamais comme paramètre dans la définition de la fonction.
Le nom du paramètre pour la description est toujours libre. Ici j'emploie le terme image puisque la fonction s'applique toujours à un élément IMG.

Les fonctions anonymes

Thématique : Le visiteur doit pouvoir modifier la couleur de texte dans la page.

Solution en JS historique

Le rendu du script :

Commentaire

Pour chaque bouton on intègre un attribut événementiel. Par exemple : onclick = "fcouleur('green')

Ce qui veut dire que si vous cliquez sur ce bouton vous appelez la fonction fcouleur() avec passage d'une valeur : green.
Dans le script on déclare deux variables : titre et texte.
Ce sont des variables qui référencent des éléments du DOM.
Ainsi titre référence la première (et unique) balise de type H1 et texte référence la première balise de type P.

Pour cibler dans un script un élément HTML de la page j'utilise les nouvelles méthodes de l'objet document : querySelector() & querySelectorAll().
Ces deux méthodes acceptent comme argument un sélecteur CSS.

Inconvénient de ce codage

Notre code est tout à fait correct mais présente un inconvénient majeur : dans les instructions HTML on retrouve aussi du JS ...

Programmation plus moderne

On dissocie bien le HTML du JavaScript donc on n'appelle plus le code JS via des attributs évènementiels.
De plus nous allons remplacer la fonction nommée (avec passage de paramètre) par trois fonctions anonymes.

Le code HTML dans la solution moderne

Pour chaque balise BUTTON l'attribut "onclick" disparait par contre l'attribut ID apparait !

Le script

Dans le script nous allons aussi innover : utiliser des fonctions anonymes !

Dans le script on retrouve trois instructions reposant sur la même syntaxe : élément.événement = function {instruction1; instruction2; ... instructionN ; }

Donc dans chaque bloc on définit et on appelle une fonction sans nom : fonction anonyme.
L'appel et la définition de la fonction tient en une seule instruction.

Si vous envisagez de n'appeler qu'une fois une fonction, utilisez la syntaxe de la fonction anonyme.

Étudions plus en détail la première fonction anonyme !
Quand se déclenche cette fonction ? Sur clic du bouton affecté de l'ID vert !

Le rendu du script :

Solution définitive

A juste titre vous pouvez trouver que le script précédent est un peu lourd. Il serait plus logique que chaque fonction anonyme appelle à son tour une fonction nommée avec passage d'un argument différent à chaque fois.

Supposons que dans la page il y a désormais trois éléments de type P. Donc le script doit modifier désormais le DOM pour 4 éléments (et non plus 2) !

Le script

Chaque fonction anonyme consiste à appeler la fonction nommée "changer_couleur()" avec passage en argument de la couleur retenue.
Le script est plus court et pourtant plus simple à maintenir.

Le rendu du script :

Fonctions particulières

Fonctions qui retournent plusieurs valeurs

Si vous connaissez Python, vous savez qu'il est facile de créer dans ce langage une fonction qui retourne un tuple de valeurs. Sous JavaScript c'est aussi possible mais moyennant une astuce ...

Exemple de script

La fonction fcercle() retourne deux valeurs sous forme d'un tableau indicé nommé "tab".
Donc lors de l'appel de fonction la variable d'affectation "tableau" est un tableau avec deux éléments. Le premier élément contient l'aire et le deuxième la circonférence.
Math.round(expression) : méthode de l'objet Math pour arrondir à l'entier le plus proche.

Testez ce script dans un nouvel onglet

Les tableaux en javaScript sont traités dans le chapitre suivant.

Fonction avec un nombre variable de paramètres

Nous voulons créer une fonction qui cumule un nombre variable d'entiers : 2 ou 3 ou 4 ou 5 ou n ...

Le script

Dans cette fonction "tab" est un tableau indicé.
Dans la parenthèse le nom du tableau doit être précédé de trois points.
Emploi de la syntaxe simplifiée "for ... in" pour parcourir le tableau.

Notez les différents appels de la fonction avec 3 puis 4 et enfin 2 arguments.

Rendu du script !

Rien n'apparait dans la page web et c'est logique puisque j'ai programmé des affichages dans la console.
Rappel : pour afficher les résultats, ouvrez la console : clic droit sur la page puis sélectionnez "inspecter" puis onglet "console".
Vous voyez apparaitre : 50 puis 10 puis 3000.

Fonctions fléchées

Avec la dernière version de ECMAScript, il est possible de définir des fonctions avec une syntaxe très simple.
Thématique : fonction qui fait la sommme de deux nombres et multiplie le tout par un troisième nombre.

Le script

Les fonctions fstandard & fflechee font exactement la même chose.
La première a une syntaxe normale, standard alors que la seconde a un syntaxe simplifiée.

Dans cette syntaxe simplifiée le mot "function" disparait ; le mot "return" est remplacé par une flèche d'où l'expression "fonction fléchée".
La définition de la fonction fléchée tient en une seule instruction !
Quant à l'appel d'une fonction fléchée, il n'y a aucune différence.

Rendu du script !