Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
JavaScript

Correction Série 01 javascript-12

Un cours complet pour maîtriser Correction Série 01 javascript-12.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
La syntaxe de base de Javascript
Où et comment insérer du JavaScript ?
Les variables en JavaScript
Exercice les variables en JavaScript
Les chaînes de caractères en JavaScript
TP les chaines de caractères en JavaScript
Les limites du langage HTML
Historique du langage JavaScript
Apport de JavaScript
Les objets JavaScript
Les opérateurs en JavaScript
Exercice divers en JavaScript Série 02
L’accès aux éléments HTML en Javascript
Les conditions if else en JavaScript
La structure switch en JavaScript
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

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