Back

Correction Série 01 javascript-12

Correction Série 01 javascript-12

  1. Objectifs

    • Exécuter son premier script JavaScript avec un navigateur.

  2. Exercice 01

    1. Énoncé
    2. Solution

  3. Exercice 02

    1. Énoncé



    2. Solution
      1. HTML
          2. <!DOCTYPE html>
<html lang="fr">
<head>
  <title>Calculatrice</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/
4.7.0/css/font-awesome.min.css">  
<link rel="stylesheet" href="styleCalculatrice.css" type="text/css">
<script type="text/javascript" src="jsCalculatrice.js"></script>
</head>
<body>
  <div class="calculator card">

<form id="calculatrice" name="calc">
        <input type="text" name="display" class="calculator-screen z-depth-1"
 value="" disabled />

  <div class="calculator-keys">

      <button type="button" class="btn btn-info" value="+"
 OnClick="calc.display.value+='+'">+</button>
      <button type="button" class=" btn btn-info" value="-"
OnClick="calc.display.value+='-'">-</button>
      <button type="button" class=" btn btn-info" value="*"
OnClick="calc.display.value+='*'">&times;</button>
      <button type="button" class=" btn btn-info" value="/" 
OnClick="calc.display.value+='/'">&divide;</button>

      <button type="button" value="7" class="btn btn-light"  
OnClick="calc.display.value+='7'">7</button>
      <button type="button" value="8" class="btn btn-light " 
OnClick="calc.display.value+='8'">8</button>
      <button type="button" value="9" class="btn btn-light " 
OnClick="calc.display.value+='9'">9</button>


      <button type="button" value="4" class="btn btn-light" 
OnClick="calc.display.value+='4'">4</button>
      <button type="button" value="5" class="btn btn-light " 
OnClick="calc.display.value+='5'">5</button>
      <button type="button" value="6" class="btn btn-light " 
OnClick="calc.display.value+='6'">6</button>


      <button type="button" value="1" class="btn btn-light " 
OnClick="calc.display.value+='1'">1</button>
      <button type="button" value="2" class="btn btn-light " 
OnClick="calc.display.value+='2'">2</button>
      <button type="button" value="3" class="btn btn-light " 
OnClick="calc.display.value+='3'">3</button>


      <button type="button" value="0" class="btn btn-light " 
OnClick="calc.display.value+='0'">0</button>
      <button type="button" class="btn btn-secondary" value="." 
OnClick="calc.display.value+='.'">.</button>
      <button type="button" class="btn btn-danger btn-sm"
 value="all-clear"OnClick="calc.display.value=''">AC</button>

      <button type="button" class="equal-sign btn btn-success" value="=" 
      OnClick="calc.display.value=eval(calc.display.value)">=</button>

    </div>
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/
3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
4.3.1/js/bootstrap.min.js"></script>

</body>
</html>
      2. CSS
          3. html {
      font-size: 62.5%;
      box-sizing: border-box;
    }
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: inherit;
    }
    .calculator {
      border: 1px solid #ccc;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
    }
    .calculator-screen {
      width: 100%;
      height: 80px;
      border: none;
      background-color: #252525;
      color: #fff;
      text-align: right;
      padding-right: 20px;
      padding-left: 10px;
      font-size: 4rem;
    }
    button {
      background-color: #252525;
      height: 60px;
      font-size: 3rem!important;
    }
    .equal-sign {
      height: 100%;
      grid-area: 2 / 4 / 6 / 5;
    }
    .calculator-keys {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
      padding: 20px;
    }
      3. Javascript
          4. document.onkeydown=function(evt)
{
  if((evt.keyCode>95) && (evt.keyCode<106))
  {
    var nbr = evt.keyCode-96;
    document.calc.display.value+=nbr;
  }
  else if(evt.keyCode==107)
  {
    document.calc.display.value+='+';
  }
  else if(evt.keyCode==109)
  {
    document.calc.display.value+='-';
  }
  else if(evt.keyCode==106)
  {
    document.calc.display.value+='*';
  }
  else if(evt.keyCode==110||evt.keyCode==188||evt.keyCode==190)
  {
    document.calc.display.value+='.';
  }
  else if(evt.keyCode==13)
  {
    document.calc.display.value=eval(document.calc.display.value);
  }
  else if(evt.keyCode==111)
  {
    document.calc.display.value='';
  }
}



author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Correction exercices les évènements en JavaScript Série01
8 octobre, 2022

La syntaxe de base de Javascript Les variables en JavaScript Les opérateurs en JavaScript Les événements en javascript Exercices les opérateurs en JavaScript : Série 01 (Correction) Exercices les évènements en JavaScript : Série 01 (Correction) Correction exercices les évènements …

Exercices les évènements en JavaScript : Série 01
8 octobre, 2022

La syntaxe de base de Javascript Les variables en JavaScript Les opérateurs en JavaScript Les événements en javascript Exercices les opérateurs en JavaScript : Série 01 (Correction) Exercices les évènements en JavaScript : Série 01 (Correction) Exercices les évènements en …

Correction Exercices les Fonctions en Javascript Série 01
7 mai, 2021

Les fonctions en Javascript Les fonctions, Expressions et fonctions fléchées en Javascript Exercices les fonctions en javascript Série 01 (Correction) Correction Exercices les Fonctions en Javascript Série 01 Exercice 01 Énoncé Vous pouvez visualiser l’énoncé de l’exercice Solution Rappel Une …