Javascriptで電卓を作ってみた

今回はJavascriptで電卓を作ってみた

参考にしたサイトはこちらである
>https://techacademy.jp/magazine/21139

最初は自力で実装してみようとやってみたが最初からこけたので断念した

具体的につまずいたのは
・画面に2桁以上の数字を表記することが出来ない
変数を変える事で1桁であれば入れ替え可能だったが連続して数字を打ち込むことが出来なかった
・四則演算の記号を表示することが出来ない
（何とも初歩的な物.....）

さすがに1.2週間勉強してオセロゲームを作ったら簡単には出来るようにはならなかった（笑）

今回JavaScriptの記述はこれだけだった

```js
var log = document.getElementById("log");
function edit(elem) {
    log.value = log.value + elem.value;
}
function calc() {
    log.value = new Function("return "+log.value)();
}
```
とても短い、、、
今回注目して考えたのは「this・elem.value」と「new Function」である

htmlの方はこんな感じだ

```html
<body>
    <div id="dentaku">
        <input value="" action="" name="input" id="log">
        <table>
            <div>
                <button input="button" id="AC" value="" onclick="edit(this)">AC</button>
                <button input="button" id="+/-" value="" onclick="edit(this)">+/-</button>
                <button input="button" id="%" value="%" onclick="edit(this)">%</button>
                <button input="button" id="÷" value="/" onclick="edit(this)">÷</button>
            </div>
            <div>
                <button input="button" id="7" value="7" onclick="edit(this)">7</button>
                <button input="button" id="8" value="8" onclick="edit(this)">8</button>
                <button input="button" id="9" value="9" onclick="edit(this)">9</button>
                <button input="button" id="×" value="×" onclick="edit(this)">×</button>
            </div>
            <div>
                <button input="button" id="4" value="4" onclick="edit(this)">4</button>
                <button input="button" id="5" value="5" onclick="edit(this)">5</button>
                <button input="button" id="6" value="6" onclick="edit(this)">6</button>
                <button input="button" id="-" value="-" onclick="edit(this)">-</button>
            </div>
            <div>
                <button input="button" id="1" value="1" onclick="edit(this)" >1</button>
                <button input="button" id="2" value="2" onclick="edit(this)">2</button>
                <button input="button" id="3" onclick="edit(this)">3</button>
                <button input="button" id="+" value='+' onclick="edit(this)">+</button>
            </div>
            <div>
                <button input="button" id="">0</button>
                <button input="button" id="">0</button>
                <button input="button" id="">.</button>
                <button input="button"  value="=" onclick="calc()">=</button>
            </tr>
        </table>
    </div>
    <script src="./main.js"></script>
</body>
```

##this・elem.valueについて
今回はonclickの引数にthisを入れた。
この時、基本的にthisはクリックの対象を要素として持ってくる
それからthisで取得した要素をelemとして```elem.value```でクリックした数字を入れる事が出来る


また今回はhtmlで```onclick="edit(this)"```と指定したが
```onclick="edit(this.value)"```としたらthisのvauleを指定することが出来
jsの方では
```log.value = log.value + elem;```
と書いても同じように作動させることが出来る。

>参考記事
https://www.sejuku.net/blog/26119
https://style.potepan.com/articles/21691.html
https://tacamy.hatenablog.com/entry/2013/01/06/224718

##new function
これに似た関数でeval関数というのがあるがセキュリティ面などで問題がある.
どちらも文字列から関数を作るにはとても役に立つ。
またnewFunctionは無名関数に当たり、ここで```log.value```の計算を実行して
inputタグに出力するのである。