Les nombres en JS

Les nombres.

Dans un langage de programmation, on manipule des objets de diverses "natures". Il est important de connaître cette nature (on parlera du type de l'objet) pour savoir quelles opérations sont possibles sur cet objet.

Un type que l'on utilisera beaucoup : number.

Entrez le code suivant dans l'ardoise (maj + F4) et testez le résultat dans la console du navigateur.

N'hésitez pas à modifier les valeurs...

 
console.log('La somme des deux nombres 2 et 3 est égale à  : '   ); // affichage d'un message
console.log(2 + 3); // affichage du résultat d'une opération

/* Utilisation de variables : */
let a = 4; // déclaration d'une variable a et affectation de la valeur 4 à cette variable
let b = 5; // déclaration d'une variable b et affectation de la valeur 5 à cette variable
console.log('Le produit des valeurs des deux variables a et b est égal  à  : '); // affichage d'un message
console.log(a * b); // affichage du résultat d'une opération

ou dans une page html :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> somme, produit, affectation, déclaration </title>
    </head>
    <body>
        <script>
        document.write('La somme des deux nombres 2 et 3 est égale à  : '   ); // affichage d'un message
		document.write(2 + 3); // affichage du résultat d'une opération
		document.write('.<br>'); //point et fin de ligne
		
		/* Utilisation de variables : */
		let a = 4; // déclaration d'une variable a et affectation de la valeur 4 à cette variable
		let b = 5; // déclaration d'une variable b et affectation de la valeur 5 à cette variable
		document.write('Le produit des valeurs des deux variables a et b est égal  à  : '); // affichage d'un message
		document.write(a * b); // affichage du résultat d'une opération
		document.write('.'); // point final
        </script>
    </body>
</html>

Le mot clef let sert à déclarer une variable. Le mot clef var a également ce rôle. Nous illustrerons plus tard des différences entre ces deux mots clefs.

Attention, toute variable utilisée devra être déclarée. Si vous oubliez de déclarer une variable, le script fonctionnera quand même sans erreur dans l'essentiel des petits programmes que nous verrons. Par contre ce genre d'erreurs deviendra vite ingérable lorsque le programme se complique un peu (nous verrons des illustrations plus tard).

Une variable ne se déclare qu'une seule fois dans un programme.

Dans un code tel que let a = 4;, il y a deux instructions : l'instruction de déclaration et l'instruction d'affectation. Ce code peut d'ailleurs se réécrire comme suit : let a; a = 4; (déclaration puis affectation). Si une variable n'est déclarée qu'une unique fois dans un programme, elle peut être affectée de nombreuses fois.

Une autre version du code précédent:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> somme, produit, affectation, déclaration </title>
    </head>
    <body>
        <script>
        document.write(`La somme des deux nombres 2 et 3 est égale à ${2+3}. <br>`); 
		
		/* Utilisation de variables : */
		let a = 4; // déclaration d'une variable a et affectation de la valeur 4 à cette variable
		let b = 5; // déclaration d'une variable b et affectation de la valeur 5 à cette variable
		document.write(`Le produit des valeurs des deux variables a et b est égal  à  ${a*b}.`);
		</script>
    </body>
</html>

Opérations et comparaisons sur les nombres

Tableau des opérations et comparaisons possibles entre deux nombres

a et b sont de type number

opérations et comparaisons
a+b	somme de a et b.
a-b	différence de a et b.
a*b	produit de a et b.
a/b	approximation de a/b.
a%b	reste de la division euclidienne de a par b ( où a et b sont entiers).
Math.pow(a,b)	a^b
a < b	true si a < b, false sinon.
a > b	true si a > b, false sinon.
a >= b	true si a ≥ b, false sinon.
a <= b	true si a ≤ b, false sinon.
a === b	true si a = b, false sinon.
a !== b	true si a ≠ b, false sinon.

Lisez et comprenez les affichages ci-dessous :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> tests de comparaison </title>
    </head>
    <body>
        <script>
        /* Les tests de comparaison renvoient un booléen, c'est à dire vrai ou faux : */
        document.write('La valeur de "2 < 3" est : ');// affichage d'un message
        document.write(2 < 3);// affichage du résultat d'une opération
        document.write('.<br>'); // point final de la phrase et ajout d'une balise html de passage à la ligne
        
        let a = 4; // déclaration d'une variable a et afffectation de la valeur 4 à cette variable
        let b = 5;// déclaration d'une variable b et afffectation de la valeur 5 à cette variable
        document.write('La valeur de "a === b" est : ');// affichage d'un message
        document.write(a === b);// affichage du résultat d'une opération
        document.write('.'); // point final de la phrase
        </script>
    </body>
</html>

Autre version:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> tests de comparaison </title>
    </head>
    <body>
        <script>
        /* Les tests de comparaison renvoient un booléen, c'est à dire vrai ou faux : */
        document.write(`La valeur de "2 < 3" est ${2<3}.<br>`);
        
        let a = 4; // déclaration d'une variable a et afffectation de la valeur 4 à cette variable
        let b = 5;// déclaration d'une variable b et afffectation de la valeur 5 à cette variable
        document.write(`La valeur de "a === b" est ${a === b}.`);
        </script>
    </body>
</html>

"Augmented assignment operators"

a et b désignant deux variables de type numérique, une instruction telle que a = a+b est souvent utile en programmation. En JavaScript, cette instruction peut aussi se réécrire sous la forme a += b.

Un tel 'raccourci' existe aussi avec les autres opérations sur les nombres (*, /, - , %).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Nombres et opérations </title>
    </head>
    <body>
        <script>
        let a = 3;// déclaration et affectation de la variable a
        document.write(`La valeur de la variable a est  ${a}.<br>`);
        
        a += 2; // on ajoute 2 à la valeur actuelle de a
        document.write(`La valeur de la variable a après l'opération "a += 2" est ${a}.`);
        </script>
    </body>
</html>

typeof

L'opérateur typeof retourne le type d'une valeur.

Faites des essais avec le code ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> typeof </title>
    </head>
    <body>
        <script>
         
        document.write(`Le type de 2 : ${typeof 2}.<br>`);  
         
        document.write(`Le type de "coucou" :  ${typeof "coucou"}.<br>`);  
         
        document.write(`Le type de 2 < 3 : ${typeof (2<3)}.<br>`);  
        
        let a;
        document.write(`Le type d'une variable non affectée  : ${typeof a}.`);  
         
         
        </script>
    </body>
</html>