jQueryでしょぼい電卓をつくってみた

jQueryで簡単な電卓をつくってみた
提供:photoAC「メイプル555様」

まず、jQueryとはJavaScriptライブラリのこと。
JavaScriptでは数十行になってしまうコードもjQueryなら数行でコーディングすることができます。
Web制作に興味がある方なら一度は聞いたことがあるであろうjQuery。
そのjQueryをちょっと勉強してみようと思いまして、eval関数やnew Functionを使用せず、ショボイ電卓アプリをつくってみました。
eval関数を使えばわりと楽なのですが、それでは勉強になりませんし、セキュリティ上、あまり好ましくないので、使用していません。

それはさておき。

プログラマを目指している方は電卓をつくってみましょう! 勉強になりますよ~

……ちなみに、こんな感じのショボイ電卓です。

機能は+、-、×、÷のみ
・小数点使えません
・M(メモリー)機能使えません
・ルート機能使えません
・税に関する機能も使えません

とまぁ……実用性ゼロですが勘弁してください(*_*)

下記はコードになります。

HTMLとCSS

<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.cal-base table{
	width:100%;
	height:100%;
}
.cal-base table td{
	width:25%;
	height:20%;
}
.cal-base table input{
	font-size:5vh;
	height:100%;
	width:100%;
}

</style>
</head>
<body>
<center class="cal-base">
		<table border="5">
			<tr>
				<td colspan="1" style="height:5%;">
					<input class="disp" type="text" style="width:100%;" size="20" name="disp" value="" disabled>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td><input class="cal-click" data-role="cal-number" type="button" value="7"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="8"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="9"></td>
							<td><input class="cal-click" data-role="cal-formula" type="button" value="+"></td>
						</tr>
						<tr>
							<td><input class="cal-click" data-role="cal-number" type="button" value="4"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="5"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="6"></td>
							<td><input class="cal-click" data-role="cal-formula" type="button" value="-"></td>
						</tr>
						<tr>
							<td><input class="cal-click" data-role="cal-number" type="button" value="1"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="2"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="3"></td>
							<td><input class="cal-click" data-role="cal-formula" type="button" value="*"></td>
						</tr>
						<tr>
							<td><input class="clear-btn" type="button" value="C"></td>
							<td><input class="cal-click" data-role="cal-number" type="button" value="0"></td>
							<td><input class="cal-btn" type="button" value="="></td>
							<td><input class="cal-click" data-role="cal-formula" type="button" value="/"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>	

CSSも酷い手抜きですね(+_+)時間ができたら少しずつ直していきます。

jQuery

<script type="text/javascript">
/*
電卓(四則演算のみ)
概要:
1+2=など計算式が短い場合
=(イコール)が入力された時点で計算

33+44-22*1/など計算式が長くなる場合は、バックグラウンドで分割しながら計算する
-(減算)が入力された時点で33+44を計算
*(乗算)が入力された時点で77-22を計算
/(除算)が入力された時点で55×1を計算
*/


jQuery(document).ready(function ($) {
	let num_1; //1番目の数値
	let num_2; //2番目の数値
	let math;  //四則演算子が格納される
	let minus; //マイナス値から計算する時に使用
	let formula_count; //演算子の連続入力防止
	
	num_1 = null;
	num_2 = null;
	math = null;
	minus = false;
	formula_count = 0;
	
	/*
	数値と演算子のキー入力を処理する関数
	*/
	$(".cal-click").on('click',function(){
	
		//最初のキー入力をチェックする処理
		//(+、*、/)が入力されたら変数を初期化して終了
		if(num_1 == null && math == null){
			if($(this).val() == "+" || $(this).val() == "*" || $(this).val() == "/" ){
				math = null;
				num_1 = null;
				num_2 = null;
				minus = false;
				formula_count = 0;
				return;
			}else{
				//マイナスから始める際はフラグをたてておく
				if($(this).val() == "-"){
					minus = true;
					num_1 = "-";
				}
			}
		}
		/*
		数値が入力された時の処理
		・入力された数値を電卓に表示
		・入力された数値を変数(num_1、num_2)に格納
		*/
		if($(this).attr('data-role') != 'cal-formula'){
			//最初がマイナス値の時はマイナスを数値につけてnum_1に格納
			if(minus){
				num_1 = num_1 + $(this).val();
				$(".disp").val($(".disp").val()+$(this).val());
				formula_count = 0;
				minus = false;
				return;
			}
			//例:1+2-3*4
			//num_1には「1」が格納される
			if(num_1 == null && math == null){
				$(".disp").val('');			
				$(".disp").val($(".disp").val()+$(this).val());
				formula_count = 0;			
				num_1 = $(this).val();
			//例:111+2-3*4
			//num_1には「111」が格納される
			}else if(num_1 != null && math == null){			
				$(".disp").val($(".disp").val()+$(this).val());
				formula_count = 0;
				num_1 = num_1 + $(this).val();
			//例:1+2-3*4
			//num_2には「2」が格納される
			}else if(num_2 == null && math != null){
				$(".disp").val($(".disp").val()+$(this).val());
				formula_count = 0;				
				num_2 = $(this).val();
			//例:1+222-3*4
			//num_2には「222」が格納される
			}else if(num_2 != null && math != null){
				$(".disp").val($(".disp").val()+$(this).val());
				formula_count = 0;
				num_2 = num_2 + $(this).val();
			}else{
				return;
			}

		/*
		演算子が入力された時の処理
		・formula_countが2以上になったら演算子の入力を無効にする(演算子の連続入力防止)
		・入力された演算子を電卓に表示
		・入力された演算子を変数(math)に格納
		*/
		}else{
			formula_count ++;
			if(formula_count == 2){
				formula_count = 1;
			}else if(minus){
				$(".disp").val('');
				$(".disp").val($(".disp").val()+$(this).val());
			}else if(formula_count == 1 && num_1 != null && num_2 == null) {
				math = $(this).val();
				$(".disp").val($(".disp").val()+$(this).val());
			}else if(formula_count == 1 && num_1 != null && num_2 != null){
				//	二項演算子単位で「計算」calculation()する
				//	具体的には33+44-22*1/まで入力された場合
				//	-(減算)が入力された時点で33+44を計算
				//	*(乗算)が入力された時点で77-22を計算
				//	/(除算)が入力された時点で55×1を計算
				calculation();
				num_2 = null;
				math = $(this).val();
				$(".disp").val($(".disp").val()+$(this).val());				
			}else{
				return;
			}	
		}
	});
	
	
	/*
	計算する関数
	四則演算子(+、-、*、/)
	*/
	function calculation(){
		switch (math){
			case "+":
				num_1 = Number(num_1) + Number(num_2);
				break;
			case "-":
				num_1 = Number(num_1) - Number(num_2);
				break;
			case "*":
				num_1 = Number(num_1) * Number(num_2);
				break;
			case "/":
				num_1 = Number(num_1) / Number(num_2);
				break;				
			default:
				break;
		 }
    }
	
	
	/*
	クリアキー
	電卓をクリアして変数を初期化
	*/
	$(".clear-btn").on('click',function(){
		$(".disp").val('');
		math = null;
		num_1 = null;
		num_2 = null;
		minus = false;
		formula_count = 0;
	});
	
	
	/*
	イコールキー
	・calculation()で計算して結果を電卓に表示
	・初期化
	*/
	$(".cal-btn").on('click',function(){
		calculation();
		$(".disp").val('');
		$(".disp").val(num_1);
		math = null;
		num_1 = null;
		num_2 = null;
		minus = false;
		formula_count = 0;
	});	
	
	
});
</script>

1+2=など計算式が短い場合は……
=(イコール)が入力された時点で計算します。

しかし、例えば33+44-22*1/など計算式が長くなる場合は、バックグラウンドで少しずつ計算します。
-(減算)が入力された時点で33+44を計算
*(乗算)が入力された時点で77-22を計算
/(除算)が入力された時点で55×1を計算

もちろん電卓上にそれらの計算結果は表示しません。少しずつ二項演算子単位で計算していく感じですかね。eval関数を使えばこのような処理は不要です。ただセキュリティ上、あまり好ましくありませんが。

みなさんはもっとエレガントなコードが書けるプログラマになってくださいね。

 どこでも食っていけるWeb人間になれる【Web食いオンラインスクール】

タイトルとURLをコピーしました