# JavaScript題目03 - 計算機
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/dyKqxGV)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E03-%E8%A8%88%E7%AE%97%E6%A9%9F-b5ff277df4d0)

> 3F - 計算機

### 使用語法
* HTML、CSS（SASS）、JS（原生）

### 攻略要點
1. 【特定技術】數字位數過多時，不能因此而破版，計算機功能皆須齊全。

### 拆解步驟
1. 把各個版面區分開來刻劃，主要版面區分方式如下圖，待後面在撰寫的過程中也是以此方式做區分（CSS還是以SASS來撰寫唷~）。
* 定位的部分基本上都是用`flex`，真是個好用的語法✧◝(⁰▿⁰)◜✧
* 為了不讓數字過多時超出版面，所以在裡面增加`word-wrap: break-word`就可以讓他自動換行摟~
* 提到了`word-wrap`也來做個快速的介紹！

| CSS 語法 | 說明 |
| ---------------------- | -------------------------------- |
| word-wrap:break-word; | 依單字換行 |
| white-space:nowrap; | 絕對不換行 |
| word-break: break-all; | 文字會強迫換行，英文字會被切一半 |

2. 接下來就是克難的JavaScript部分( º﹃º )，可以分成以下幾個區塊
3. 利用`addEventListener()`監聽的語法去偵測使用者目前的行為，依照上述區塊可以分成3種類型的監聽。
* `NumberGroup.addEventListener()`
* 記錄目前點選的數字`currentText`，如果遇到第一個數字為**00**會自動帶入**0**。

* 利用<font color=orange>**正規表示式**</font>判斷是否有前個數字`prveText`的紀錄。

* `OperationGroup.addEventListener()`
* 紀錄運算子，且在此進行算式的加減乘除。

* 每點選運算子時，會去判斷算式當中應該更新運算子，或是新增；且`currentText`會自動變成0。

* 當數字 / 0的時候，會直接帶入0，不會出現 `NaN` OR `Infinity`。

* 其中因為數字中帶有小數點，會用到`parseFloat`擷取小數點數。

* 老樣子！做個關於如何轉換數字快速又簡單的介紹~(更詳細的介紹會再下面補充唷！)
| JS 語法 | 說明 |
| ---------------------- | -------------------------------- |
| parseInt() | 將字串轉換為以十進位表示的整數 |
| parseFloat() | 字串轉換為以十進位表示的浮點數 |
| Number() | 不使用運算子的狀況下，可以被用來轉換型別 |

* `ResultGroup.addEventListener()`
* 當點選 ==AC==，會將所有數字清除為0。

* 當點選 ==⌫==，刪除最後一個數字，假設刪除到最後一個時，會自動帶入0。

* 當點選 =="="==，會進行最終的運算，結束之後所有算式會重新來過，若前面無帶入運算子，則會顯示當前數字。

* 最後比較特別是有設定`final`變數，去判斷使用者是否有按下最終的結算按鈕(=)，去做參數清空為0的動作。

### 結尾
* 那時候看到題目時~~想說應該很簡單（到底誰說的）~~，加上平常比較少用克制自己全部用原生的JS寫（能寫出來就是好程式吧(･ω´･ )?），所以還是花了幾天時間來釐清，哎呀打臉來的如此之快( ´•̥̥̥ω•̥̥̥` )
* 完成之後感覺有更好或是更短的方法來解，Hummm這個部分就等之後再回過來整理吧(●⁰౪⁰●)，ㄙㄨㄚˋ。

### 參考資料
* [監聽事件](https://developer.mozilla.org/zh-TW/docs/Web/API/EventTarget/addEventListener)
* [關於強制轉型 - 數字](https://medium.com/unalai/%E8%AA%8D%E8%AD%98-parseint-parsefloat-%E8%88%87-number-%E8%BD%89%E6%8F%9B%E6%88%90%E6%95%B8%E5%AD%97%E7%9A%84%E4%B8%89%E7%A8%AE%E6%96%B9%E6%B3%95-276640aedb4e)

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~