Projet Calculatrice

Description de la tâche

1. Ajoutez une page à votre portfolio en affichant la directive 1650 ainsi que les assistants HTML et FORMULAIRE
   
2. Inscrivez dans le champ titre : Calculatrice Javascript
   
   
3. Sélectionnez la matière : informatique
   
   
4. Inscrivez dans le champ No de la directive : 1650
   
   
5. Insérez le titre de niveau 1 : Ma Calculatrice Javascript
   
   
6. Créez un formulaire nommé "c"
   <form name="c"> </form>
   
7. Dans ce formulaire, créez un tableau 7 rangées x 4 colonnes ayant une bordure de votre choix en utilisant le bouton TABLEAU
   
   
8. Insérez les couleurs de votre choix pour chacune de lignes ou cellules en utilisant la propriété background-color du langage css. Exemple : <td style="background-color:red;" ></td> ou <tr style="background-color:red;"></tr>
   
   
   
9. Utilisez le paramètre COLSPAN afin de fusionner les cellules des rangées 1, 6 et 7.
   Exemple : <tr><td style="background-color:red;" colspan=4></td></tr>
   
   
10. Pour chacune des rangée ayant une cellule fusionnée (colspan), supprimez les autres cellules
11. Dans la cellule 1 de la rangée 1, insérez un champ de formulaire type texte nommé "affiche"
    <input type=texte name="affiche" value="">
    
12. Dans chacune des cellules des rangées 2,3,4 et 5, insérez un bouton de formulaire ayant les paramètres suivants : Exemple pour les chiffres : <input type=button value=" 1 " onclick="c.affiche.value+=1">
    Explications :
    c.affiche.value désigne la valeur du champ nommé affiche du formulaire nommé c
    +=1 désigne : ajouter au contenu la valeur 1
    donc c.affiche.value+=1 désigne : ajouter la valeur 1 au contenu du champ nommé affiche du formulaire nommé c.
    
    
    Exemple pour les opérateurs + - * /et le point : <input type=button value=" + " onclick="c.affiche.value+='+'">
    Remarquez bien l'utilisation du délimiteur (apostrophe) afin d'identifier le contenu de type texte à ajouter : c.affiche.value+='+'.
    Ce délimiteur n'est pas utilisé si la valeur à ajouter est un nombre.
    
    
    
    Exemple pour le bouton EFFACER : <input type=button value=" EFFACER " onclick="c.affiche.value=''">
    Explications à nouveau :
    - l'expression "c.affiche.value" signifie : la valeur du champ affiche du formulaire c
    - le + signifie écrire à la suite du champ affiche
    - l'expression = 2 désigne ce qui sera écrit à la suite du champ affiche
    - dans le cas d'un contenu de type texte à ajouter, on utilise les délimiteurs '' (apostrophe)
    - dans le cas d'un contenu de type numérique (nombre) à ajouter, on n'utilise pas les délimiteurs '' (apostrophe)
    - donc en activant le bouton 2, le nombre 2 s'écrira à la suite du champ affiche de la calculatrice.
    
    Notez que :
    - le paramètre NAME est facultatif
    - le paramètre VALUE contient le texte du bouton
    - le paramètre ONCLICK définit l'action qui se produira lors de l'utilisation du bouton
    
    
    Contenu de la rangée 2 : 1 2 3 +
    Contenu de la rangée 3 : 4 5 6 -
    Contenu de la rangée 4 : 7 8 9 *
    Contenu de la rangée 5 : EFFACER 0 . /
    
    
    
13. Dans rangée 6, insérez le bouton " = ".
    
    Notez que l'évènement ONCLICK de ce bouton utilisera la fonction Javascript "eval()"
    
    
    <input type=button value=" = " onclick="c.affiche.value = eval(c.affiche.value)">
    Explications :
    - l'expression "c.affiche.value=" signifie : la valeur du champ affiche du formulaire c sera ...
    - l'expression eval(......) signifie calculer la valeur de l'expression mathématique contenu entre les parenthèses
    
    - donc en activant le bouton = , le champ affiche affichera la résultat de l'expression mathématique contenu dans le champ affiche.
    
    
    
    
14. Dans rangée 7, insérez Votre nom.
    Note : cette rangée est facultative.
    
    
15. Ajoute ensuite une autre rangée à ton tableau contenant 4 boutons :
    - Ouvrir une parenthèse
    - Fermer la parenthèse
    - Racine carré
    - Arrondir
    
    Pour les boutons ( et ) , vous devez procéder de la même façon qu'avec le bouton +.
    
    Pour les boutons Racine carré et Arrondir, vous devez procéder de la même façon qu'avec le bouton = en modifiant la fonction eval() par les fonctions Racine carré et Arrondir.
    IMPORTANT : si tu éprouves des difficultés à programmer les fonctions Arrondir et Racine Carré, consulte l'activité que tu as déjà produite : 12- Javascript : Objet Math.
    
    
16. Ajoute ensuite une autre rangée à ton tableau contenant 1 cellule en utilisant le paramètre de fusionnement de cellule (colspan=4) qui contiendra un bouton qui lancera une fonction de ton choix (voir l'activité OBJET MATH afin d'obtenir une liste des fonctions disponibles):
    
    
17. Validez le fonctionnement de votre calculatrice et corrigez au besoin.