Extra Opdracht

Javascript rekenmachine

In deze opdracht gaan we stap voor stap een rekenmachine bouwen.

Maak een nieuw HTML document en vul dit met de volgende code:

<!DOCTYPE html>
<html lang="nl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS Calculator</title>
  </head>
  <body>
    <div id="screen">0</div>
    <div id="numbers">
      <button >7</button>
      <button >8</button>
      <button >9</button>
      <button >4</button>
      <button >5</button>
      <button >6</button>
      <button >1</button>
      <button >2</button>
      <button >3</button>
      <button >0</button>
      <button >.</button>
    </div>
    <div id="operators">
      <button >&plus;</button>
      <button >&minus;</button>
      <button >&times;</button>
      <button >&divide;</button>
      <button >AC</button>
      <button >&equals;</button>
    </div>
  </body>
</html>


Nu gaan we wat opmaak toevoegen m.b.v. CSS:

    <style media="screen">
      #numbers   {width:160px;float:left;}
      #operators {width:110px;float:left;}
      #screen    {width:250px;text-align: right;padding: 5px;background-color: lightgray;}
      button     {width:45px;height:45px;margin:2px; border:0; border-radius:0; background-color: gray;}
    </style>

Zet de CSS op de juiste plek in het HTML document.

Om acties toe te voegen aan de knoppen gebruiken we het onClick event. Pas de HTML zo aan dat iedere knop een onCick event heeft.

<div id="numbers">
      <button onclick="JavaScript:clickNumber(7);">7</button>
      <button onclick="JavaScript:clickNumber(8);">8</button>
      <button onclick="JavaScript:clickNumber(9);">9</button>
      <button onclick="JavaScript:clickNumber(4);">4</button>
      <button onclick="JavaScript:clickNumber(5);">5</button>
      <button onclick="JavaScript:clickNumber(6);">6</button>
      <button onclick="JavaScript:clickNumber(1);">1</button>
      <button onclick="JavaScript:clickNumber(2);">2</button>
      <button onclick="JavaScript:clickNumber(3);">3</button>
      <button onclick="JavaScript:clickNumber(0);">0</button>
      <button onclick="JavaScript:clickNumber('.');">.</button>
    </div>
    <div id="operators">
      <button onclick="JavaScript:clickOperator('+');">&plus;</button>
      <button onclick="JavaScript:clickOperator('-');">&minus;</button>
      <button onclick="JavaScript:clickOperator('x');">&times;</button>
      <button onclick="JavaScript:clickOperator('/');">&divide;</button>
      <button onclick="JavaScript:clickClear();">AC</button>
      <button onclick="JavaScript:clickEquals();">&equals;</button>
    </div>

Als je nu op een knop klikt gebeurd er nog niets, we hebben ten slotte nog geen functies gedefinieerd in Javascript. Voeg een Javascript tag toe aan het HTML bestand:

<script type="text/javascript">
  function clickNumber(number){
  }
  function clickOperator(operator){
  }
  function clickEquals(){
  }
  function clickClear(){
  }
</script>

Een rekenmachine heeft een aantal stappen die het doorloopt.

Iedere stap slaan we op in een variable. Deze definieren we in het script:

var firstNumber = "";
var currentOperator = "";
var secondNumber = "";

Om bij te houden welk nummer we aan het invoeren zijn (het eerste getal of het tweede getal) gebruiken we nog een variable. Deze noemen we fase.

var fase = 1;

Om nu het eerste getal op te slaan moeten we ieder klik op een knop samenvoegen met de vorige klik. Dit doen we door een string (firstNumber) iedere keer aan te vullen met het volgende teken:

function clickNumber(number){
  if (fase==1){
   firstNumber = String(firstNumber) + String(number);
  }
  document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber;
}

We forceren de input naar een string om te voorkomen dat de getallen worden opgeteld in plaats van samengevoegd. Dit doen we met de functie String().

Na het invoeren van het eerste getal moeten we een bewerking (plus, min... ) vastleggen. Dit doen we in de volgende functie. Na het opslaan van de bewerking zetten we fase op 2 zodat we het tweede getal kunnen invoeren:

function clickOperator(operator){
  if (fase==1){
    currentOperator = String(operator);
    fase=2;
  }
  document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber;
}

Om ook het tweede getal te kunnen invoeren passen we de functie clickNumberaan:
function clickNumber(number){
  if (fase==1){
   firstNumber = String(firstNumber) + String(number);
  } else if (fase==2) {
   secondNumber = String(secondNumber) + String(number);
  }
  document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber;
}

Nu het eerste- en tweede getal zijn ingevuld met de bijbehorende bewerking kunnen we gaan rekenen door op de = te klikken. Hiervoor vullen we de functie clickEquals. Afhankelijk van de bewerking berekenen we het resultaat. We gebruiken hier de functie parseFloat om van de string een kommagetal te maken. Met stings kun je tenslotte geen berekeningen uitvoeren. Het resultaat stoppen we weer in firstNumber zodat we hier meteen weer verder mee kunnen rekenen. Daarna maken we het tweede nummer en de bewerking leeg en gaan we weer naar fase 1.
function clickEquals(){
  if (fase==2){
    if (currentOperator=='+'){
      firstNumber = parseFloat(firstNumber) + parseFloat(secondNumber);
    } else if (currentOperator=='-') {
      firstNumber = parseFloat(firstNumber) - parseFloat(secondNumber);
    } else if (currentOperator=='x') {
      firstNumber = parseFloat(firstNumber) * parseFloat(secondNumber);
    } else if (currentOperator=='/') {
      firstNumber = parseFloat(firstNumber) / parseFloat(secondNumber);
    }
    currentOperator ="";
    secondNumber = "";
    fase=1;
  }
  document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber;
}

Tot slot voegen we een laatste functie toe om de rekenmachine te reseten (AC):

function clickClear(){
  firstNumber = "";
  currentOperator ="";
  secondNumber = "";
  fase=1;
  document.getElementById("screen").innerHTML="0";
}