入社してすぐにhtmlで電卓を作ってみて！と待機中の課題を出されてやってみました。
開発経験ゼロの人間が試行錯誤でやってみたので、無理くり作ってる感じなので
ここはこうした方が良いよーとかあったらコメントしてください。
＝を押さないで連続計算している時に答えが表示できていないとかまだまだ課題があります。。。
見た目はiPhoneの見た目に。先輩にレビューいただいたら、経験から考えたらよく出来てる方だよって言ってもらえました。
同じように課題を出されて困ってる新人の方はこんな感じでやりました！っていう雰囲気を出したかったらちょうど良いかも笑
完璧に出来てるソースは他にも転がってるので。。。
CSS,HTML,JSを一緒に書いてあるのでこのままコピーしてメモ帳に貼ってブラウザに表示させればなんとなく動きます。
ただ動作や課題とかに保証は致しませんのであしからず。。。
使用に許可とかはいらないですが、コメントに何か少しでも残してくれたら嬉しいです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
<!-- .calculate {
width: 300px;
height: 400px;
background-color: #d0d0d0;
border: 1px solid;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
button {
display: block;
width: 100%;
height: 100%;
font-size: 20px;
background-color: #d0d0d0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#subDisplay {
display: block;
width: 98%;
height: 100%;
text-align: right;
font-size: 13px;
background-color: #000000;
color: #ffffff;
padding-bottom: -10;
}
#display {
display: block;
width: 98%;
height: 90%;
text-align: right;
font-size: 30px;
background-color: #000000;
color: #ffffff;
}
td {
width: 80px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.other {
background-color: #c0c0c0;
}
.operator {
background-color: #ffa400;
}
-->
</style>
<title>Calculate</title>
</head>
<body>
<script type="text/javascript">
<!--
var input = ''; //入力された値（文字列結合）
var operator = ''; //演算子
var isEqualPush = false; //＝を押した後の処理かの判定。押したらtrue
var inputArray = []; //数値と演算子を交互に格納する
var formula = ''; //途中式
var tax = 1.08; //消費税
///<summary>
///数字キーを押したときの処理を行います
///</summary>
///<param name="tmpNum">数字キーの値</param>
function push (tmpNum)
{
//＝を押した直後に数字キーを押した場合
if (isEqualPush == true) {
reset ();
}
//演算子が入力されているとき
if (operator != '') {
//数値の前にマイナスをつける
if (input != '-') {
disp(''); //表示をクリア
}
}
//.を二つ入れない為の処理
if (tmpNum != '.') {
input += tmpNum;
} else if (tmpNum == '.' && input.indexOf('.') == -1 && inputArray.indexOf('.') == -1) {
input += tmpNum;
}
disp(input);
}
///<summary>
///演算子キーを押したときの処理を行います（イコールも含む）
///</summary>
///<param name="ope">演算子キーの値</param>
function calc(ope)
{
//イコール連打時の判定
if (isEqualPush != true || ope != '=') {
var len = inputArray.length;
//四則演算子を押したときの処理
if (ope != '=') {
if (input != '') {
inputArray.push(input);
}
var len = inputArray.length;
if (inputArray[len - 1] != "+" && inputArray[len - 1] != "-" && inputArray[len - 1] != "/" && inputArray[len - 1] != "*") {
inputArray.push(ope);
} else {
//末尾の演算子を上書きして演算子を一つにする
inputArray.pop(ope);
inputArray.push(ope);
}
operator = ope;
isEqualPush = false;
input = '';
} else {
//イコール押した時の処理
inputArray.push(input);
var tmpResult = '';
tmpResult = arrayToObject(inputArray);
formula = tmpResult;
disp(eval(tmpResult));
isEqualPush = true;
input = '';
}
} else {
//イコールを連打した時の処理
var len = inputArray.length;
//末尾の演算子と数値を配列に追加する
inputArray.push(inputArray[len - 2]);
inputArray.push(inputArray[len - 1]);
var tmpResult = '';
tmpResult = arrayToObject(inputArray);
formula = tmpResult;
disp(eval(formula));
}
}
///<summary>
///+/=キーを押したときの処理を行います
///</summary>
function plusminus() {
if (input != '') {
input = -input;
disp(input);
} else {
input = '-';
disp(input);
}
isEqualPush = false;
}
///<summary>
///ACキーを押したときの処理を行います
///</summary>
function reset() {
inputArray = [];
result = 0;
input = '';
isEqualPush = false;
formula = '';
operator = '';
disp('');
}
///<summary>
///電卓への表示処理を行います
///</summary>
///<param name="view">表示する値</param>
function disp(view) {
document.getElementById('display').value = view;
}
///<summary>
///演算の為の配列からオブジェクトにする処理を行います
///</summary>
///<param name="arr">処理したい配列</param>
function arrayToObject(arr) {
var tmpArray = '';
for (var c = 0; c < arr.length; c++) {
tmpArray += arr[c];
}
return tmpArray;
}
///<summary>
///Taxキーを押したときの処理を行います
///</summary>
function addTax() {
if (isEqualPush == false) {
if (isFinite(input)) {
input = parseFloat(input) * tax;
disp(input);
}
} else {
var tmpValue = eval(formula);
formula = Math.floor(tmpValue * tax);
console.log(formula);
disp(formula);
}
}
function subDisp(view, dummy) {
if (view == '' || arguments.length == 2) {
document.getElementById('subDisplay').value = view;
}
document.getElementById('subDisplay').value += view;
}
//-->
</script>
<table class="calculate">
</tr>
<tr>
<td colspan="4">
<input type="text" id="display" readonly/>
</td>
</tr>
<tr>
<td>
<button class="other" onclick="reset();">AC</button>
</td>
<td>
<button class="other" onclick="plusminus();">+/-</button>
</td>
<td>
<button class="other" onclick="addTax();">Tax</button>
</td>
<td>
<button class="operator" onclick="calc('/');">/</button>
</td>
</tr>
<tr>
<td>
<button onclick="push(7);">7</button>
</td>
<td>
<button onclick="push(8);">8</button>
</td>
<td>
<button onclick="push(9);">9</button>
</td>
<td>
<button class="operator" onclick="calc('*');">*</button>
</td>
</tr>
<tr>
<td>
<button onclick="push(4);">4</button>
</td>
<td>
<button onclick="push(5);">5</button>
</td>
<td>
<button onclick="push(6);">6</button>
</td>
<td>
<button class="operator" onclick="calc('-');">-</button>
</td>
</tr>
<tr>
<td>
<button onclick="push(1);">1</button>
</td>
<td>
<button onclick="push(2);">2</button>
</td>
<td>
<button onclick="push(3);">3</button>
</td>
<td>
<button class="operator" onclick="calc('+');">+</button>
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="push(0);">0</button>
</td>
<td>
<button onclick="push('.')">.</button>
</td>
<td>
<button class="operator" onclick="calc('=');">=</button>
</td>
</tr>
</table>
</body>
</html>
コメント
こちらの計算機は、とても分かりやすくて助かっています。追加して欲しい機能としては、パーセント(％)と掛け算・割り算を×と÷にしていただければわかりやすくなると思います。
今後もこちらの計算機を使っていきたいと思います
プログラマーになるならこれくらいできるのは当たり前ですか？？
全く関係なくてすみません♂️
閲覧ありがとうございます。
スーパープログラマは別として、、、
現職のプログラマが電卓を作ろう！ってなったら誰でもできるかもしれません。
最初は誰も出来ません。自分も泣きながら研修受けました。
個人的にはプログラマーはフレームワークをいかに使いこなすかだと思ってます。
20年やってる上司が電卓やってみたら難しかったからすぐ止めたって言ってました笑
単純にeval()に投げて計算させているので、小数を計算させた時のJavaScript特有の誤差がそのまま出てしまいますね。
0.1 + 0.2 → 0.30000000000000004
0.11 – 0.1 → 0.009999999999999995
1.11 * 100 → 111.00000000000001
0.66 / 11 → 0.060000000000000005
etc.
使わせてもらいます
使わせていただきます。