電卓:JavaScriptを使用して近代的な計算機を構築する方法を学ぶ

あなたはおそらく、より練習する必要がある何かで良くなることを聞いたことがある.それは、意図的な実践を通じて、筋肉の記憶を開発するので、それは本当です.それは、プロジェクトが手に入るところです.プロジェクトは、JavaScriptを学ぶための最良の方法であり、電卓は1つの最良のプロジェクトを選択することです.電卓は、UIとJavaScriptとのすべての複雑な相互作用をカバーしています.
この記事では、プレーンバニラのJavaScriptのベストプラクティスと近代的なES 6の実践を使用して完全に近代的な計算機を構築するためにかかる手順を介して歩くよ
電卓ができるようになります.

加算、乗算、除算、および操作

を減算する

削除操作

クリアすべての操作

10進数を使用する

のチェーン活動

始めましょう
プロジェクトのセットアップ:プロジェクトの設定方法
次の手順に従ってプロジェクトを設定します.

「プロジェクト」という名前の新しいフォルダを作成し、コードエディターを開きます

インデックスを作成します.HTMLスタイル.CSSとインデックス.JS

は、HTML

の中でファイルをリンクします

HTML

クラスでdivを作成します.ボディータグ内のすべてをラップする電卓.
また、クラスで別のdivを作成する必要があります.2つの入れ子にされたdivをクラスで出力します.以前のオペランドおよび現在のオペランドは、計算機画面の前のオペランドと現在のオペランドを示す
このように:

<div class="calculator">
  <div class = "output">
     <div class="previous-operand"></div>
     <div class="current-operand"></div>
  </div>
</div>

次に、“AC”から“=”ボタンに電卓上のすべてのボタンを作成する
このように:

<div class="calculator">
   <div class="output">
     <div class="previous-operand"></div>
     <div class="current-operand"></div>
   </div>
   <button class="span-two">AC</button>
   <button>DEL</button>
   <button>÷</button>
   <button>1</button>
   <button>2</button>
   <button>3</button>
   <button>*</button>
   <button>4</button>
   <button>5</button>
   <button>6</button>
   <button>+</button>
   <button>7</button>
   <button>8</button>
   <button>9</button>
   <button>-</button>
   <button>.</button>
   <button>0</button>
   <button class="span-two">=</button>
</div>

PS :覚えておいてください.スパン2は両方の“AC”と“=”ボタンを2つの列に後にスパンをする.
注意すると、おそらく“+”のシンボルを取得するために苦労している可能性があります.もしそうならば、Googleはシンボルをコピーして、それをペーストすることができます.
これまでのところ良い.
それはすべてのHTML部分のスタイルにジャンプしましょう.CSSとスタイルを計算機を開始するには、素敵に見えるようにします.

CSS

ここでは、計算機のスタイルにCSSを追加する予定です.まず、デフォルトのブラウザスタイルを削除します.

/** changing default styles of the browser **/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

次に、body要素のスタイルを変更する必要があります.

body{
   font-weight:normal;
   font-family:Gotham Rounded, sans-serif;
   background: linear-gradient(to right, rgb(0, 0, 0),rgb(0, 110, 255));
}

次に、スタイルを選択することによって画面にする必要があります.電卓(すべての異なるボタンと要素をラップ)クラスとスタイル
このように:

.calculator{
    display:grid;
    align-content:center;
    justify-content:center;
}

おお!それは垂直に集中していないようだ!あなたは与えることによってそれを修正することができます.電卓クラスの高さは、すべての時間の高さの100 %を埋めるために起こっていることを意味します.

.calculator{
    /** previously written code **/
   min-height: 100vh;
}

よろしい!その固定で、スタイリングで動きましょう.電卓クラス.ボタンを計算機のボタンのようにするには、この場合グリッドテンプレート行とグリッドテンプレート列で使用する必要があります.それで、我々は彼らに100 px幅を与えている間、コラムを4回繰り返しています.行は、100 px幅を与えて、それらに彼らの最初の最小値を120 pxの高さであるが、それの最大のそれを与えている間、5回繰り返されます
このように:

.calculator{
    display:grid;
    align-content:center;
    justify-content:center;
    min-height:100vh;
    grid-template-rows:minmax(120px, auto) repeat(5,100px);
    grid-template-columns:repeat(4,100px);
}

次に、適切にボタンを配置するには、これらを選択し、これらのスタイルを追加する必要があります.

.calculator-grid > button {
    outline: none;
    background-color:rgba(255, 255, 255, .75);
    font-size: 2rem;
    border: 1px solid #fff;
    cursor: pointer;
}

ホバー効果の追加

.calculator-grid > button:hover {
       /** previously written code **/
    background-color:rgba(255, 255, 255, .9)
}

さて、それをスタイルしましょう.「AC」と「=」ボタンを2列にするために、2つのクラスにわたります.

.span-two{
    grid-column: span 2;
}

これまでのところ、あなたのブラウザで見ることができるように、良い.出力セクションは適切にスタイルされません.
それを修正するには、実際のスタイルにする必要があります.このトリックを使用して全体として出力します.

.output{
    background-color: rgba(0, 0, 0, .75);
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-direction: column;
    padding: 9px;
    word-wrap: break-word;
    word-break: break-all;
}

CSSについての最後のものは、スタイルとスタイルです.前のオペランドと.現在のオペランド.そんなことはできる
このように:

.output .previous-operand {
    font-size : 1.5rem;
    color: rgba(255, 255, 255, .75);
} 

.output .current-operand{
    font-size: 2.5rem;
    color: #fff;
}

おめでとう!CSSを使っています.休憩して、JavaScriptである楽しい部分に戻ってください.

ジャバスクリプト

よろしい!JavaScriptをコーディングしている最も楽しい部分から始めましょう.開始するには、まず、すべての異なる番号、オペランド、すべてのボタン(クリアボタン、削除ボタンなど)を選択する必要があります.簡単にするには、HTMLの属性を追加する必要がありますを選択しやすくする必要があります.JavaScriptを使ったスタイルクラスを必要としないので、これは重要です.次のようなコードスニペットは次のようになります.

<!-- Modifying the HTML by adding attributes to be able to select by. -->


<div class="calculator">
   <div class="output">
     <div data-previous-operand class="previous-operand"></div>
     <div data-current-operand class="current-operand"></div>
   </div>
   <button data-all-clear class="span-two">AC</button>
   <button data-delete>DEL</button>
   <button data-operation>÷</button>
   <button data-number>1</button>
   <button data-number>2</button>
   <button data-number>3</button>
   <button data-operation>*</button>
   <button data-number>4</button>
   <button data-number>5</button>
   <button data-number>6</button>
   <button data-operation>+</button>
   <button data-number>7</button>
   <button data-number>8</button>
   <button data-number>9</button>
   <button data-operation>-</button>
   <button data-number>.</button>
   <button data-number>0</button>
   <button data-equals class="span-two">=</button>
</div>

はい、どうぞ.HTML要素を選択するために属性を追加したので、JavaRPTを使用して
このように:

const currentOperandElement = document.querySelector('[data-current-operand]');
const previousOperandElement = document.querySelector('[data-previous-operand]');
const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');

今ではすべてが選択され、どのように電卓を正常な計算機のように動作するようにJavaScriptを使用する方法を見てみましょう.あなたが考える必要がある最初のことは、ユーザーが入力した数の情報をすべて格納する方法です.それをする最も簡単な方法は、ちょうどクラスを使うことです
このように:

class Calculator {
  constructor(previousOperandElement, currentOperandElement) {
    this.previousOperandElement = previousOperand,
    this.currentOperandElement = currentOperand
  }

delete() {

  } 

appendNumber(number) {

  }

clear() {

  }

chooseOperation(operation) {

  }

compute() {

  }

updateDisplay() {

  }

}

だから、これまで何が起こっているの?上記のコンストラクタを保持する演算子*クラス*を作成しました.このコンストラクタは、ユーザーがすべての入力だけでなく、我々の計算機のすべての機能を入力します.これらの関数は次のようになります.

delete () :この関数は単一の数値を削除します.

append number () :この関数は、ユーザがその番号を選択する度に数値を追加します.

clear ():この関数は、すべての異なる変数をクリアします.

ChoseOperation ():この関数はユーザがどの操作を使用して有効に機能しているかを選択します.

計算() :この関数は、計算機内のすべての値を取り、画面上に表示するために必要な値を1つ計算します.

updateDisplay () :この関数は出力内の値を更新します.

次に、電卓を格納する必要がある別のプロパティを考えてみましょう.まず、ユーザが動作している現在のオペランドを知る必要があります.それで、あなたはこれらのすべての値を取り除くことができなければなりません
このように:

class Calculator {
  constructor(previousOperandElement, currentOperandElement) {
    this.previousOperandElement = previousOperand,
    this.currentOperandElement = currentOperand
    this.clear()
  }

clear() {
    this.previousOperand = "";
    this.currentOperand = "";
    this.operation = undefined;
  } 

}

注意:計算機を作成するとすぐに、clear ()関数を上記のように呼び出す必要があります.これは、我々が新しい計算機を作成するとすぐに、デフォルト値にそれらをセットするためにすべての入力をクリアする必要があるからです.
計算機が使用するすべての関数を知っているので、以前に作成した全ての変数を作成し、次のように計算機オブジェクトで動作させましょう.

const calculator = new Calculator(previousOperandElement, currentOperandElement);

次に、NumberButton関数を作りましょう
このように:

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})

さて、appendNumber ()とUpdateDisplay ()関数を作成し、それらを動作させる必要があります
このように:

class Calculator {
  /** previously written code **/

    appendNumber(number){
     if (number === "." && this.currentOperand.includes(".")) return
     this.currentOperand = this.currentOperand.toString() + number.toString()
   }
    updateDisplay(){
     this.currentOperandElement.innerText = this.currentOperand;
     this.previousOperandElement.innerText = this.previousOperand;
   }

}

次に、操作ボタンを操作しましょう.

operationButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText)
    calculator.updateDisplay()
  })
})

さて、動作するように選択操作関数を書く必要があります
このように:

class Calculator {

    /** previously written code **/

    chooseOperation(operation) {
      if (this.currentOperand === "") return
      if(this.previousOperand != "") {
        this.compute()
      }
      this.operation = operation;
      this.previousOperand = this.currentOperand;
      this.currentOperand = "";
  }

}

次に、equalsButton関数を作りましょう.

equalsButton.addEventListener('click', button => {
  calculator.compute()
  calculator.updateDisplay()
})

さあ、計算()関数を実行しましょう.

class Calculator {

    /** previously written code **/

    compute() {
    let computation
    const prev = parseFloat(this.previousOperand)
    const current = parseFloat(this.currentOperand)
    if (isNaN(prev) || isNaN(current)) return
    switch (this.operation) {
      case '+':
        computation = prev + current
        break;
      case '-':
        computation = prev - current
        break;
      case '*':
        computation = prev * current
        break;
      case '÷':
        computation = prev / current
        break;
      default:
        return
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = '';
  }

}

次に、AllClearButton機能を作りましょう.

allClearButton.addEventListener('click', button => {
  calculator.clear()
  calculator.updateDisplay()
})

次に、DeleteButton機能も作りましょう.

deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.updateDisplay()
})

では、delete ()関数の実装について説明しますが、ここでは、スライスメソッドを使用して文字列からの最後の値を取得し、
このように:

class Calculator {

  /** previously written code **/

    delete() {
    this.currentOperand = this.currentOperand.toString().slice(0, -1);
  }
}

おめでとう!今、電卓は完全にベース値で機能しますが、我々の計算機の実際の表示は、その素晴らしいです!私たちは数の間のコンマを持っていません、オペランドは前のオペランドで示されません、それで、固定される必要があります.ちょうどコードの行のカップル.まず、update display ()関数を変更して、getDisplayNumber ()関数を作成して、コンマで数値を区切る必要があります.
このように:

/** previously written code here **/
updateDisplay() {
    this.currentOperandElement.innerText =
      this.getDisplayNumber(this.currentOperand)
    if (this.operation != null) {
      this.previousOperandElement.innerText =
        `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
    } else {
      this.previousOperandElement.innerText = ''
    }
  }

/** getDisplayNumber acting like a helper function to delimit numbers with commas **/
getDisplayNumber(number) {
    const stringNumber = number.toString() // for splitting on decimal characters inside it.
    const integerDigits = parseFloat(stringNumber.split('.')[0]) // turning a string to an array.
    const decimalDigits = stringNumber.split('.')[1] // getting second portion out of the array, which is number after decimal place.
    let integerDisplay
    if (isNaN(integerDigits)) {
      integerDisplay = ''
    } else {
      integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 }) // "en" in the localeString means : english.
    }
    if (decimalDigits != null) {
      return `${integerDisplay}.${decimalDigits}`
    } else {
      return integerDisplay
    }
  }

プロジェクトの最終バージョンは次のようになります.

結論
あなたがこのプロジェクトの終わりにそれを作った今、あなたは完全に機能している現代のJavaScript計算機をあなたのブラウザーで働いています.この記事を参考にした場合は、親指を与えてください.ハッピーコーディング!