Examen 2

Examen 2 - Introduction à la programmation (pratique)
Calculatrice en Javascript
Vous allez créer une calculatrice en utilisant Javascript.
• Le champs de saisie correspond au nombre saisi par l’utilisateur en utilisant le clavier ou les
boutons de la calculatrice. Il permet d’afficher tout nombre d’entrée et tout résultat après
évaluation.
• Les boutons 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 et . sont utilisés pour ajouter un chiffre au nombre saisi dans
le champs de texte.
• Les boutons +, -, *, /, = sont utilisés pour évaluer des calculs arithmétiques.
• Le bouton c permet de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs
initiales.
Trois fichiers sont créés : calculatrice.html, jScript.js et style.css .

Une partie du code est déjà donné. Vous devez comprendre le code donné pour insérer le code HTML,
CSS et les instructions JAVASCRIPT manquants dans les trois fichiers dans les endroits indiqués par les
commentaires suivants : (10 points)
//Insérer votre code ici

Quelques notes :
Un formulaire en HTML peut avoir les éléments suivants :
- Les éléments <input> dont l'attribut type vaut "text" permettent de créer des champs de saisie
avec du texte sur une seule ligne.
- Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de
réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.
- Les éléments <input> de type button sont affichés comme des boutons poussoirs qui peuvent
être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire
d'évènement (la plupart du temps pour l'évènement click).
En JavaScript :
eval() est une fonction, rattachée à l'objet global, prédéfinie en JavaScript. Elle permet d'évaluer du
code JavaScript représenté sous forme d'une chaîne de caractères.
- eval() prend en compte un argument qui est une chaîne de caractères.

- Si cette chaîne représente une expression, eval() évaluera l'expression.
- Si l'argument utilisé représente une ou plusieurs instructions JavaScript, eval() évaluera les
instructions.
NB: eval() ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript
évalue automatiquement les expressions arithmétiques.
- Mais dans notre exemple, on utilise eval() pour faciliter l'exécution des expressions arithmétiques
de la calculatrice.
Dans le fichier jScript.jss :

La fonction val(v) permet de modifier la valeur du champs de texte de saisie
(l'élément d'identifiant "saisie_id") en lui ajoutant v à sa valeur courante.
function val(v)
{
//.........Insérer votre code ici...........// +=v; (1point)
}
//fonction pour évaluer du code JavaScript

function calculer()
{
//lire la valeur initiale de l'élément saisie_id
let x = document.getElementById("saisie_id").value;
//.........Insérer votre code ici...........//
/*déclarer une nouvelle variable locale y
et associer à y la valeur retournée de la fonction eval() prenant comme
paramètre d'entrée x pour l'évaluer (1point)
/*Modifier la valeur l'élément "saisie_id" en lui associant la valeur évaluée y
(1point)
}
Dans le document calculatrice.html :

<html>
<head>
<meta charset=UTF-8" />
<title>Calculatrice en JavaScript</title>

</head>
<body>


<div class = title >Calculatrice</div>

<table border="1">
<tr> 
<form>
<td> 
<input type="reset" value="c"/>
</td>
<td colspan="3"> 
<input type="text" id="saisie_id"/>
</td>
</form>
</tr>

<tr>
<td><input type="button" value="+"
onclick="val('+')"/> </td>
<td><input type="button" value="1"
onclick="val('1')"/> </td>
</tr>
<tr>
<td>  (0.5pt)</td>
<td>  (0.5pt)</td>
</tr>
<tr>
<td> (0.5pt)</td>
<td> (0.5pt)</td>
<td> (0.5pt)</td>
</tr>
<tr>
<td><input type="button" value="/"
onclick="val('/')"/> </td>
<td><input type="button" value="."
onclick="val('.')"/> </td>
<td><input type="button" value="="
onclick="calculer()"/> </td>
</tr>
</table>
</body>
</html>
Dans le fichier style.css :

Modifier le code css dans le fichier style.css pour modifier l’apparition de titre « Calculatrice »
et du champs du texte de saisie comme le montre la figure suivante : (1 point)

Examen 2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Examen 2

Transféré par

Droits d'auteur :

Formats disponibles

Examen 2 - Introduction à la programmation (pratique)

Trois fichiers sont créés : calculatrice.html, jScript.js et style.css .

- eval() prend en compte un argument qui est une chaîne de caractères.

Dans le fichier jScript.jss :

//fonction pour évaluer du code JavaScript

Dans le document calculatrice.html :

<div class = title >Calculatrice</div>

<!-- création des boutons

Dans le fichier style.css :

Vous aimerez peut-être aussi