Retourner � la page d'accueil de TJSRetourner � la page d'accueil de TJS

Les fonctions mathématiques en JavaScript

JavaScript est tout à fait adapté pour les calculs sur le poste du visiteur, de nombreuses fonctions mathématiques ont été implémentées.

La conversion de chaînes de caractères en nombres

Pourquoi convertir ?

En JavaScript, les variables ne sont pas typées, mais il est utile de savoir transformer une chaîne en un entier ou un réel (nombre à virgule).

Imaginons ce formulaire avec 2 champs de saisie :
<form>
   Nombre 1 : <input name="nombre1" value="30"><br>
   Nombre 2 : <input name="nombre2" value="10"><br>
   <input type="button" value="Somme des 2 nombres" onclick="sommeNombre(this.form)">
</form>

La fonction sommeNombre(monFormulaire) attend en paramètre le formulaire à traiter et ajouter les 2 champs :

function sommeNombre(monFormulaire) {
  var somme=monFormulaire.nombre1.value + monFormulaire.nombre2.value;
  console.log(somme);
}

Cliquez sur le bouton et observez le résultat qui n'est pas une addition mais une concaténation...


Emulation de la console

Le tutoriel sur les chaînes de caractères peut être utile à lire.

Les fonctions de conversion

Imaginons ce script :
var chaine="3.14";
var entier=parseInt(chaine);
var reel=parseFloat(chaine);
console.log(chaine);
console.log(entier);
console.log(reel);

A l'issue de ce script, entier contient 3 et reel contient 3.14

Emulation de la console

Est-ce un nombre ?

Supposons maintenant que la variable chaine soit initialisée avec "azerty"
var chaine="azerty";
var entier=parseInt(chaine);
var reel=parseFloat(chaine);
var rate=isNaN(entier);
console.log(chaine);
console.log(entier);
console.log(reel);
console.log(rate);

A l'issue du script, entier et reel contiennent NaN, car "azerty" ne peut pas se convertir en nombre.

Emulation de la console
Pour détecter que chaine a bien le format d'un nombre, il existe une fonction isNaN(valeur) qui renvoie :
  - true  si valeur n'est pas un nombre
  - false si valeur est un nombre
Dans ce cas, rate est à vrai car la conversion a échoué.

ATTENTION, isNaN(valeur) retourne vrai si valeur  N'est PAS un nombre

Pour bien comprendre

Vous pouvez tester ces fonctions grâce à ce formulaire (essayez avec un nombre et avec une chaîne comme "azerty") :
chaine contient
entier contient isNaN(entier)=
reel   contient isNaN(reel)  =

Ces trois fonctions parseInt(), parseFloat() et isNaN sont très utiles pour manipuler des variables en étant sur d'avoir affaire à des nombres.

Cela permet par exemple de convertir une saisie dans un formulaire et de vérifier que le visiteur a bien entré un nombre (prix, quantité, âge, année, ...)

L'objet JavaScript Math

En JavaScript, la plupart des fonctions mathématiques sont des méthodes de l'objet [LINK]>Math[/LINK]. (Voir la page JavaScript, langage Objet pour plus de détail sur la programmation Objet)

Un exemple

Voici sûrement la fonction la plus utilisée, la génération d'un nombre aléatoire.
for (var i=0; i<10; i++) {
	console.log(Math.random());
}

La méthode random() est appliquée à l'objet Math et retourne un nombre réel alétaoire compris entre 0 et 1.


Emulation de la console
Toutes les autres fonctions mathématiques sont appelées sur le même principe.

Les fonctions de base

Math.abs(a) Retourne la valeur absolue de a
Math.round(a) Retourne l'entier arrondi le plus proche de a
Math.ceil(a) Retourne l'entier immédiatement supérieur (ou égal) à a
Math.floor(a) Retourne l'entier immédiatement inférieur (ou égal) à a
Math.sqrt(a) Retourne la racine carrée de a
Math.log(a) Retourne le logarithme de a
Math.ln(a) Retourne le logarithme népérien de a
Math.exp(a) Retourne l'exponentielle de a
Math.pow(a,b) Retourne a à la puissance b
Math.min(a,b) Retourne le plus petit des paramètres a ou b
Math.max(a,b) Retourne le plus grand des paramètres a ou b

Les fonctions trigonométriques

Réservées aux initiés !
Math.cos() Retourne le cosinus d'un angle en radians
Math.sin() Retourne le sinus d'un angle en radians
Math.tan() Retourne la tangente d'un angle en radians
Math.acos() Retourne l'arc cosinus en radians
Math.asin() Retourne l'arc sinus en radians
Math.atan() Retourne l'arc tangente en radians

Des exemples utiles

Tirage de dés à N faces : Générer un nombre entier aléatoire entre 1 et N

Imaginons le lancer de trois dés à 6 faces :
function aleatoire(N) {
  return (Math.floor((N)*Math.random()+1));
}

function lancerDe(f) {
  f.de1.value=aleatoire(6);
  f.de2.value=aleatoire(6);
  f.de3.value=aleatoire(6)
}

<form name="de">
  <input type="button" value="Lancer les 3 dés" onClick="lancerDe(this.form)">
  <input type="texte" name="de1" size="3"> - 
  <input type="texte" name="de2" size="3"> - 
  <input type="texte" name="de3" size="3">
</form>

La fonction aleatoire(N) retourne un nombre entier aléatoire entre 1 et N inclus.


Emulation de la console
Tutoriel écrit par webmaster mis à jour le

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 20/04/2024 05:08:57 sur php 7 en 68.42 ms