Traduction
Tutoriel sur Javascript
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Tous les langages proposent des fonctions natives ou prédéfinies c'est à dire prêtes à l'emploi.
Dans tous les langages le développeur peut créer ses propres fonctions ou fonctions personnelles.
Il faut distinguer les fonctions génériques des méthodes.
Nous avons déjà utilisé dans nos scripts : parseInt(), parseFloat(), isNaN().
Ce sont des fonctions natives de JavaScript.
Les fonctions natives et génériques sont peu nombreuses en JS par contre le nombre de méthodes est impressionnant.
Il faut distinguer fonctions et méthodes.
En JavaScript, une fonction est un bloc de code indépendant appelé directement par son nom, tandis qu'une méthode est une
fonction liée à une classe, appelée via la syntaxe objet.methode(paramètres).
Par exemple, vous pouvez appliquer à un objet de type String des méthodes telles trim(), toUpperCase(), toLowerCase() etc.
JavaScript propose aussi des méthodes pour les dates, les 'arrays', les 'maps', les 'sets', etc.
Tout un chapitre est consacré aux objets natifs de JS et leurs méthodes associées:
les objets natifs de JS
Tapez les commandes suivantes dans la console !
>unechaine =" aAbBcCdD "
' aAbBcCdD '
>typeof unechaine
'string'
>unechaine.toLowerCase()
' aabbccdd '
>unechaine.toUpperCase()
' AABBCCDD '
>unechaine.trim()
'aAbBcCdD'
>parseInt(100.25)
100
>parseInt("100.25")
100
>unnombre =1234.565789
1234.565789
>unnombre.trim()
... unnombre.trim is not a function
J'applique les méthodes toUpperCase(), toLowerCase()& trim() à un objet de type String (la variable "unechaine").
Notez la syntaxe : objetString.méthode(). C'est ce qu'on appelle la notation pointée.
Si je tente d'appliquer la méthode trim() à un nombre, la console retourne une erreur.
Par contre je peux appliquer la fonction parseInt() à un nombre mais aussi à une chaine (si cette chaine
est bien sûr au format numérique).
Attention typeof n'est pas une fonction mais un opérateur.
J'ai créé une fonction personnelle nommée "mon_script()" qui est appelé par un bouton cliquable.
Dans cette fonction 'perso' j'utilise les fonctions prédéfinies isNaN(), parseInt() & parseFloat().
La fonction isNaN() retourne true si l'argument n'est pas au format numérique.
La fonction inverse(!isNaN()) retourne true si l'argument est au format numérique
(une suite de chiffres avec un point éventuel).
Attention la valeur retournée par la méthode prompt est toujours de type string même si vous avez saisi
une suite de chiffres.
Donc avant d'effectuer des calculs il faut convertir cette valeur en entier ou décimal avec
respectivement les fonctions parseInt() / parseFloat().
Saisissez une suite de lettre puis un nombre décimal au format francophone (la virgule en guise de séparateur décimal) :
vous restez dans la boucle de saisie.
Saisissez enfin un nombre avec un format correct (une suite de chiffres et le point en guise de séparateur décimal); vous sortez alors
de la boucle de saisie.
Les fonctions génériques ne répondent pas forcément à vos besoins.
Vous pouvez donc être appelé à créer et utiliser vos propres fonctions.
Si vous souhaitez utiliser vos fonctions personnelles dans différentes pages, vous pouvez bien sûr créer un fichier
de fonctions : un fichier d'extension .js.
Il s'agit d'une fonction 'perso' basique car il n'y a pas de paramètre à passer et cette fonction
ne retourne pas de valeur.
Objet de cette fonction basique : calculer la surface d'un cercle de 2 cm de rayon.
Il se présente sous forme d'une fonction nommée "mon_script()" et appelé par un bouton cliquable.
Instruction HTML:
<button onclick ="mon_script()" > Appel du script </button >
function mon_script()
{
function f_cercle()
{ // fonction qui calcule la surface d'un cercle de rayon 2 cm
var vrayon = 2 ;
var vsurface = vrayon * vrayon * 3.14 ;
alert("surface du cercle : " + vsurface + "cm2") ;
}
f_cercle() ; //appel fonction
f_cercle(); // appel fonction
alert("type de f_cercle : " + typeof f_cercle);
alert(vrayon); // erreur : vrayon is not defined
} // fin mon_script
La fonction "mon_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.
Les instructions de la fonction sont délimitées par une paire d'accolades.
Cette fonction calcule la surface d'un cercle de rayon 2cm ; n'y a donc pas d'argument à passer lors de son appel.
La fonction ne se contente pas de calculer la surface du cercle mais affiche le résultat dans une boite de dialogue
via la méthode alert().
Dans la routine principale on appelle deux fois la fonction.
Puis on demande le type de "f_cercle" ; la réponse est "function". Une fonction est en fait une variable de type function.
Puis on demande d'afficher la variable vrayon ; la console affiche le message d'erreur : "vrayon is not defined".
En effet vrayon est une variable créée au sein de la fonction donc elle est inconnue de la routine principale.
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.
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 unités.
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. Il faut alors créer une fonction avec paramètres c'est à dire qu'il faudra saisir un argument (ou
des arguments) lors de son appel.
function mon_script()
{
function fsurface_cercle(rayon,unite)
{
let surface = rayon * rayon * 3.14 ;
alert(`surface du cercle ${surface} ${unite} carrés`) ;
} // fin fonction
// appels de la fonction
fsurface_cercle(2,"cm") ; // premier appel
fsurface_cercle(15); // deuxième appel
} // fin mon_script
Notez bien l'argument de la méthode alert() dans la description de la fonction perso :
`surface du cercle ${surface} ${unite} carrés`
J'ai donc utilisé, pour éviter une concaténation fastidieuse, la notation "template strings" ou "littéraux de gabarit".
Pour en savoir davantage sur les littéraux de gabarit
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, ...).
Il s'agit donc d'une fonction avec deux paramètres.
Donc dans le cadre de l'appel de cette fonction, il faut indiquer entre parenthèses deux arguments.
Or à l'occasion du deuxième appel je ne passe qu'un paramètre et
j'obtiens en retour : "surface du cercle 706.5 undefined carrés"
function fsurface_cercle(rayon,unite='cm')
{
let surface = rayon * rayon * 3.14 ;
alert(`surface du cercle ${surface} ${unite} carrés`) ;
} // fin fonction
Notez la syntaxe : function fsurface_cercle(rayon,unite='cm') : le deuxième paramètre est optionnel et par défaut
il vaut 'cm'.
Si, par exemple, l'appel de fonction est : fsurface_cercle(15) le retour est : "surface du cercle 706.5 cm carrés"
Vérifiez vous même :
Vous savez que les fonctions et méthodes natives sont paramétrables mais en plus retournent une valeur.
Créons une fonction personnelles ayant ces mêmes caractéristiques !
Pour qu'une fonction retourne une valeur (vers la routine principale) il faut que dans sa définition celle-ci comporte
l'instruction return suivie de la variable ou expression à retourner.
...
function factoriel(n)
{
let resultat = 1;
for (let i = 2; i <= n; i++) { resultat *= i; }
return resultat;
}
document.write("Factoriel de 5:" , factoriel(5));
chiffre = prompt("saisir un chiffre positif supérieur à 1");
chiffre = parseInt(chiffre);
document.write("
Factoriel de ", chiffre, " : ", factoriel(chiffre));
...
La fonction se nomme factoriel() et exige la saisie d'un nombre lors de son appel.
Cette fonction calcule la factorielle de ce nombre et le retourne à la routine principale.
Dans celle-ci j'appelle deux fois la fonction.
Saisissez par exemple 9.
L'argument passé lors de l'appel d'une fonction peut être le mot réservé this qui désigne l'objet courant.
Thème : obtenir des infos sur les images du document HTML.
Notez bien la syntaxe : ... onclick ='fafficher(this)' ...
this est un mot réservé de JS 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 de la fonction est toujours libre.
Ici j'emploie le terme image puisque la fonction s'applique toujours à un élément IMG.
Il se résume à une fonction nommée "fafficher()".
Cette fonction peut s'appliquer à n'importe quelle image de la page du moment qu'elle est l'objet courant.
function fafficher(image)
{
let chemin = image.src ;
let texte = image.alt
alert(`chemin image : ${chemin} ` );
alert (`texte alternatif de l'image : ${texte} `) ;
} // fin fonction
Dans la définition de la fonction le paramètre se nomme 'image'.
Dans les instructions de la fonction on retrouve ce terme plusieurs fois : image.src, image.alt.
J'aurais pu avoir aussi : image.width, image.height, image.id, image.title
Cliquez successivement sur les différentes images !
Il y aurait N images, la fonction "fafficher()" serait strictement identique.
Une fonction anonyme est une fonction qui n’a pas de nom.
Pas de nom après le mot clé function mais affectation à une variable.
Syntaxe pour définir la fonction : variable = function(...) {...}
Syntaxe pour appeler la fonction : variable(argument)
Si une fonction n'est utilisée qu'une fois, il est inutile de lui donner un nom.
Dans le même bloc la fonction est définie (sans nom) et est appelée !
Syntaxe :
événement = function() //appel fonction sur un événement
{
// description de la fonction
}
Deux fonctions anonymes imbriquées dans ce script !
document.querySelector('button').onclick =function() : la fonction 'mère' est auto-invoquée : décrite et appelée
une fois (clic sur le bouton de commande).
puissance2 = function(nombre) : la fonction 'fille' assignée à la variable 'puissance2'.
Dans cette fonction la conversion de la chaine numérique nombre en number est inutile car on procède
ensuite à une multiplication ; donc la conversion est automatique.
La fonction puissance2() est une fonction personnelle inutile.
Essayez dans la console :
>let nombre = 12 >console.log(Math.pow(nombre,3)) 1728 >console.log(nombre**3) 1728
Thèmatique : nous voulons que le visiteur puisse modifier la couleur du texte des titres et paragraphes de la page.
Je vous propose trois solutions pour vous montrer l'évolution de la programmation de JavaScript de son
origine à aujourd'hui.
J'utilise dans le code HTML des attributs événementiels pour appeler à chaque fois la fonction "fcouleur()".
Recours à des fonctions auto-invoquées et détection des événements par JavaScript (technique "onEvent").
Notez que j'ai affecté à chaque bouton un ID ...
Tout le code JS est regroupé dans le conteneur SCRIPT.
let titre = document.querySelector('h1') ;
let texte = document.querySelector('p') ;
document.querySelector('#vert').onclick = function()
{titre.style.color = 'green'; texte.style.color = 'green'; }
document.querySelector('#rouge').onclick = function()
{ titre.style.color = 'red'; texte.style.color = 'red'; }
document.querySelector('#bleu').onclick = function()
{ titre.style.color = 'blue'; texte.style.color = 'blue'; }
J'utilise désormais le gestionnaire d'évènements de JS.
Grâce à la centralisation du code JS, La lisibilité de celui-ci est facilitée.
Pour en savoir plus sur la gestion des évènements en JS : Les évènements
Étudions plus en détail la première fonction auto-invoquée.
document.querySelector('#vert').onclick = function() : si clic sur le bouton identifié "vert" appel
de cette fonction anonyme.
Vous pouvez trouver que le script ci-dessus est un peu lourd.
Il le serait encore davantage si au lieu de modifier le style de deux éléments HTML, il s'agissait d'en modifier 6 ...
Il serait plus pertinent que chaque fonction anonyme appelle à son tour la même fonction.
De plus concernant la détection des événements il est préférable d'utiliser
la méthode addEventListener() (écoute d'évènement).
Désormais il y un titre et trois éléments de type P. Donc le script doit modifier désormais le DOM pour 4 éléments (et non plus 2) !
...
// une fonction nommée
function changer_couleur(couleur)
{
document.querySelector('h1').style.color = couleur ;
document.querySelector('p').style.color = couleur;
document.querySelectorAll('p')[1].style.color = couleur ;
document.querySelectorAll('p')[2].style.color = couleur ;
} // fin fonction
// appel de la fonction changer_couleur via des fonctions auto-invoquées
document.querySelector('#vert').addEventListener('click',function(){changer_couleur('green'); });
document.querySelector('#rouge').addEventListener('click',function(){changer_couleur('red'); });
document.querySelector('#bleu').addEventListener('click',function(){changer_couleur('blue'); });
...
Chaque bouton de commande est associé à une fonction auto-invoquée.
Chaque fonction auto-invoquée appelle la fonction changer_couleur() avec passage en argument de la couleur retenue.
Détection des événements via la méthode moderne addEventListener() !
Concernant la détection des événements en JS, je vous invite à revoir le chapitre en lien.
JS - les événements
Il faut alors réaliser un 'timer' !
Pour créer un 'timer' il faut faire appel aux méthodes (de l'objet window) : setInteval()/setTimeout().
La méthode setInterval() exécute la fonction anonyme chaque seconde.
let stop = setInterval ... : lorsque vous utilisez setInterval() cette méthode renvoie un identifiant
unique que vous devez stocker dans une variable.
... onclick ="clearInterval(stop) : utilisez la méthode clearInterval() argumentée avec cette variable
pour arrêter l'exécution périodique.
Cliquez sur le bouton de commande pour cesser l'incrémentation.
Il s'agit d'une fonction qui retourne un 'array' donc plusieurs valeurs.
function mon_script()
{
function fcercle(rayon)
{
let aire = Math.round(rayon * rayon * 3.14);
let circonference = Math.round(rayon * 2 * 3.14) ;
let tab =[aire, circonference];
return tab; // retourne un tableau de 2 éléments
}
let rayon =parseInt(prompt("saisir le rayon du cercle !"));
let tableau =fcercle(rayon); //appel de la fonction fcercle
document.write("aire : " + tableau[0]);
document.write("circonférence : " + tableau[1]);
} // fin mon_script
La fonction fcercle() retourne tab qui est un array.
Donc lors de l'appel de fonction la variable d'affectation "tableau" est donc un tableau indicé 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.
Précédemment je vous ai montré comment rendre la saisie d'un ou plusieurs argmuents optionnels en proposant pour ces paramètres une valeur par défaut. Mais il y a mieux encore : fonction qui accepte 2 ou 3 ou 4 ou N arguments lors de son appel.
Thème : créer une fonction qui cumule un nombre variable d'entiers : 2 ou 3 ou 4 ou 5 ou N ... Donc le nombre d'arguments à saisir lors de l'appel de la fonction est variable.
function script()
{
function fsomme(...tab)
{
let cumul = 0;
for (let valeur of tab)
{cumul+=valeur ;}
return cumul;
} // fin fsomme
// appels fonction
let cumul1 = fsomme(10,10,30);
let cumul2 = fsomme(1,2,3,4);
let cumul3 = fsomme(1000, 2000);
document.write('
Premier cumul : ', cumul1);
document.write('
Deuxième cumul : ',cumul2);
document.write('
Troisième cumul : ', cumul3);
}
Dans cette fonction, "tab" est un tableau indicé.
Dans la parenthèse ; le nom de l'objet de type 'array' doit être précédé de trois points.
Notez les différents appels de la fonction avec 3 puis 4 et enfin 2 arguments.
Avec la dernière version de ECMAScript, il est possible de définir des fonctions avec une syntaxe très simple :
la déclaration de la fonction tient en une instruction.
Thème : créer une fonction qui fait la sommme de deux nombres et multiplie le tout par un troisième nombre.
function script()
{
let x =10, y = 12, z = 13; w = 14;
// ci-dessous fonction nommmée standard
let standard = function(n1,n2,n3)
{ return (n1 + n2) * n3; };
// fonction anonyme fléchée
let flechee = (n1,n2,n3) => (n1 + n2) * n3;
document.write("
La fonction standard retourne: ", standard(x,y,z));
document.write("
La fonction fléchée retourne : " , flechee(x,y,z));
}
Les fonctions standard & flechee font exactement la même chose.
La première a une syntaxe normale alors que la seconde a un syntaxe simplifiée dite "fléché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".