nombres

Affichage d'une somme.

Dans le script ci-dessous :

Déclarer deux variables a et b.
Affecter leur les valeurs 1 et 2.
Afficher leur somme.
Affecter leur ensuite les valeurs 1.00001 et 0.00001 et afficher leur somme.
Que se passe-t-il dans ce dernier cas ? Avez-vous une explication ?

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme de flottants </title>
    </head>
    <body>
        <script>
         
        document.write("La somme a+b donne : " + (a+b) );
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme de flottants </title>
    </head>
    <body>
        <script>
        let a; // déclaration de la  variable a
        let b; // déclaration de la  variable b
        a = 1; // affectation de la valeur  1 à la variable a
        b = 2; // affectation de la valeur  2 à la variable b       
        document.write("La somme a+b donne : " + (a+b) );
        document.write('<br>'); //passage à la ligne
        
        a = 1.00001; b = 0.00001; // affectation des valeurs décimales 1.00001 et 0.00001
        document.write("La somme a+b donne : " + (a+b) );
        </script>
    </body>
</html>

On constate que le résultat obtenu n'est pas correct dans le second cas.

On retrouve ce même problème dans la quasi totalité des langages de programmation. Le problème est notamment dû au fait que la manipulation des nombres par la machine se fait en base 2 alors que nous manipulons des nombres en base 10. Les nombres que nous avons entrés sont donc traduits en base 2, les calculs sont alors effectués puis le résultat est retraduit en base 10 pour affichage.

Ce changement de base entraîne des erreurs du fait q'un nombre nécessitant un nombre fini de chiffres après la virgule dans une base peut en necéssiter une infinité ou un plus grand nombre dans une autre base. Comme la machine ne travaille qu'avec un nombre fini (majoré par une constante) de chiffres après la virgule, tout nombre nécessitant plus de chiffres que cette constante sera tronqué.

Une page web calculatrice élémentaire.

Un produit

On peut demander à l'utilisateur du navigateur d'entrer des nombres pour ensuite afficher le résultat d'une opération.

Copiez et collez le texte ci-dessous dans une page blanche d'éditeur de texte. Nommez le fichier sous la forme unNom.html. Ouvrez ensuite le fichier avec un navigateur et testez.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme et produit </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un premier nombre :  ");
        let b = prompt("Entrez un second nombre : ");
         
        alert("Le produit des nombres " + a + " et " + b + " vaut en javascript : " + (a * b) );
         
        </script>
    </body>
</html>

Une somme

Modifiez le script précédent pour afficher la somme des deux nombres entrés par l'utilisateur plutôt que le produit.
Testez ! Vous constaterez sûrement un problème. Cherchez à comprendre le problème (on pourra utiliser typeof pour mieux saisir le problème).
En demandant à l'utilisateur d'entrer des entiers naturels, on peut régler le problème avec parseInt(). Consultez cette page pour la définition de parseInt() et proposez une solution pour afficher la somme des deux entiers.
Lire ici le descriptif de l'instruction parseFloat et traitez le cas de la somme de deux flottants (rappelons que le flottant est la "représentation" d'un réel en machine).

Un produit

Exemple d'affichage obtenu pour les entrées :
entrée prompt

Exemple d'affichage obtenu pour le résultat :
résultat produit

Une somme

Lorsqu'on modifie ainsi la page :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme   </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un premier nombre :  ");
        let b = prompt("Entrez un second nombre : ");
         
        alert("La somme des nombres " + a + " et " + b + " vaut en javascript : " + (a + b) );
         
        </script>
    </body>
</html>

on constate que les deux nombres ne sont pas ajoutés mais juxtaposés.

Le problème vient du fait qu'une entrée faite à l'aide d'un prompt est toujours interprétée comme de type string (type des chaînes de caractère), même lorsqu'on entre un nombre. Or le symbole + entre deux chaînes de caractère a pour effet de concaténer (c'est à dire coller l'un derrière l'autre) les deux chaînes de caractère comme le montre l'exemple ci-dessous (à tester !) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Bonjour   </title>
    </head>
    <body>
        <script>
        let nom = prompt("Entrez votre nom.  ");
        alert("Bonjour " + nom + " ! ");
        </script>
    </body>
</html>

Vous pouvez constater que le nombre entré est converti en type string en testant la page suivante :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme   </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un  nombre :  ");          
        alert("Le type de l'entrée : " + (typeof a) );
        </script>
        
    </body>
</html>

Le problème ne se posait pas avec le produit, car le produit de deux chaînes en javascript n'existe pas : javascript modifie alors automatiquement le type des deux chaînes en entier ou en float (on parle dans ce cas de transtypage).

Voici une façon de régler le problème pour la somme de deux entiers (testez !) :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme   </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un premier entier :  ");
        let b = prompt("Entrez un second entier : ");
        
        a = parseInt(a , 10); // la chaîne a est transformée en entier
        b = parseInt(b , 10); // le paramètre 10 signale que la chaîne représente un entier en base 10
         
        alert("La somme des nombres " + a + " et " + b + " vaut en javascript : " + (a + b) );
        </script> 
        
    </body>
</html>

Variante:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme   </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un premier entier :  ");
        let b = prompt("Entrez un second entier : ");
         
        alert(`La somme des nombres ${a} et ${b} vaut en javascript ${parseInt(a,10) + parseInt(b,10)}.`);
        </script> 
        
    </body>
</html>

Et pour la somme de deux flottants :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme   </title>
    </head>
    <body>
    
    	
        <script>
        let a = prompt("Entrez un premier nombre :  ");
        let b = prompt("Entrez un second nombre : ");
        
        a = parseFloat(a); // la chaîne a est transformée en flottant
        b = parseFloat(b);  
         
        alert("La somme des nombres " + a + " et " + b + " vaut en javascript : " + (a + b) );
        </script> 
        
    </body>
</html>

Une page web calculatrice élémentaire (2).

Entrer une opération

On reprend l'idée précédente d'une calculatrice pour opérations élémentaires (somme, produit, différence, quotient).

Mais on aimerait maintenant que l'utilisateur puisse entrer directement une opération.

On commence par le code suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme et produit </title>
    </head>
    <body>
    
    	
        <script>
        let op = prompt("Entrez votre opération :  ");
        alert("Résultat : " + op );
        </script>
    </body>
</html>

Testez ce code en entrant par exemple 7*3 lorsque l'opération est demandée. Que se passe-t-il ?

eval()

Lire sur cette page le descriptif de la fonction eval() puis proposez un code permettant à l'utilisateur d'entrer une opération et de voir s'afficher ensuite le résultat de cette opération.

Une opération

L'opération entrée par l'utilisateur est directement transformée en chaîne de caractères et est donc ensuite affichée telle qu'elle a été entrée par l'utilisateur.

eval()

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Opération </title>
    </head>
    <body>
    
    	
        <script>
        let op = prompt("Entrez votre opération :  ");
        alert( op + " = " + eval(op) );
        </script>
    </body>
</html>

Exemple d'entrée et sortie obtenues :
opération entrée
résultat opération

Somme d'une chaîne de caractères et d'un entier.

Une chaîne de caractères est une suite de symboles, que l'on déclarera entre guillemets (ou entre quotes simples).

Le symbole + qui nous sert à additionner les nombres sert également à concaténer les chaînes de caractères, c'est à dire à les coller l'une derrière l'autre, comme le montre le script ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  sommer un nombre et un mot </title>
    </head>
    <body>
        <script>
        let a = 'Bonjour'; //  une première chaîne de caractères
        let b = 'Schmolldu'; // une seconde chaîne de caractères
        let c = a + b; 
        document.write("a + b = ");
        document.write(c);
        </script>
    </body>
</html>

Tester et chercher à comprendre ce qu'il se passe lorsqu'on cherche à additionner une chaîne de caractères et un entier :

En additionnant 'coucou' et 2.
En additionnant '1' et '2'.
En additionnant 1 et '2'.
En additionnant les trois valeurs : 1, 2 et 'coucou'.
En additionnant les trois valeurs : 'coucou', 1, 2.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  sommer un nombre et un mot </title>
	<style>
	#resultat{outline: black solid 1px;}
	</style>
    </head>
    <body>
        <script>
        /* une chaine + un nombre : le nombre est transformé en chaine
        et les deux sont concaténés  : */
        document.write(" 'coucou' + 2 = ");
        document.write('coucou' + 2);
        document.write('<br>'); //pour passer à la ligne
        
        /* il s'agit maintenant des chaînes '1' et '2', on obtient 
        donc une concaténation : */
        document.write(" '1' + '2' = ");
        document.write('1' + '2');
        document.write('<br>'); //pour passer à la ligne
        
        /* un nombre + une chaîne : le nombre est transformé en chaîne : */
        document.write(" 1 + '2' = ");
        document.write(1 + '2');
        document.write('<br>'); //pour passer à la ligne
         
        /* un nombre + un nombre  + une chaîne : 
        le premier + est une addition entre deux entiers,
        cette addition est effectuée. 
        Puis + entre le nombre 3 et chaîne : 
        la seule signification possible  est une concaténation */
        document.write(" 1 + 2 + 'coucou' = ");
        document.write(1 + 2 + 'coucou');
        document.write('<br>'); //pour passer à la ligne
        
        
        /* Le premier + rencontré (lecture depuis la gauche) 
        oblige à une transformation du 1 en '1'. 
        On obtient donc 'coucou1'. Le second + ne peut alors  
        être interprété que comme une concaténation de chaînes. */
        document.write(" 'coucou' + 1 + 2 = ");
        document.write('coucou' + 1 + 2);
        document.write('<br>'); //pour passer à la ligne
        </script>
    </body>
</html>

Les explications sont en commentaire dans le code ci-dessus. Veillez à vous assurer de les avoir compris.