まず、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関数を使えばこのような処理は不要です。ただセキュリティ上、あまり好ましくありませんが。
みなさんはもっとエレガントなコードが書けるプログラマになってくださいね。
