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
        • <!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
        • 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
        • 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='';
            }
          }



Abonnez vous à notre chaîne YouTube gratuitement