今回はJavascriptで電卓を作ってみた
参考にしたサイトはこちらである
最初は自力で実装してみようとやってみたが最初からこけたので断念した
具体的につまずいたのは
・画面に2桁以上の数字を表記することが出来ない
変数を変える事で1桁であれば入れ替え可能だったが連続して数字を打ち込むことが出来なかった
・四則演算の記号を表示することが出来ない
（何とも初歩的な物.....）
さすがに1.2週間勉強してオセロゲームを作ったら簡単には出来るようにはならなかった（笑）
今回JavaScriptの記述はこれだけだった
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の方はこんな感じだ
<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タグに出力するのである。