まず、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食いオンラインスクール】
おすすめ記事
【JavaScriptライブラリ『jQuery』プログラミング】レトロなブラウザゲームをつくってみたよ!^^)
職場特有の人間関係や将来性に強いストレスや不安を感じている方は「在宅プログラマー」への転職（再就職）がオススメ
邪悪な人に関する記事
身近に潜んでいる陰湿で邪悪な支配者『マニピュレーター』
カバートアグレッションになる原因と対策・対処法
マニピュレーターの弱点と対策について。操りたがる人たちが恐れる『無敵の人』
『マニピュレーター』対策と弱点について。邪悪な人たちを寄せ付けない『忍びの心得』
『暗示』を得意とする邪悪な人。マニピュレーターによる洗脳とその手口について
マニピュレーターになる原因とは。共感力が欠落する経緯について。
閉塞感をともなうモラハラ。受動攻撃性パーソナリティ障害（PAPD）による『受動的攻撃行動』
今後、激増するかもしれない『職場のガスライティング』その種類と対策について
現代社会が生んだモンスター『カバートアグレッションを有するマニピュレーター』による深刻な『いじめ』
陰湿な嫌がらせと『カバートアグレッション』の違いと対処法について
『脆弱型ナルシストを見抜く』ための基準となる８つの特徴
脆弱型ナルシストに利用され、腐敗しはじめている会社の特徴５選
なぜ、あの人は「いじめ加害者」に寄り添うのか。～フライングモンキーの心理について～
脆弱な自尊心を抱えるナルシスト（NPD）に味方する厄介な取り巻き『フライングモンキー』の対策・対処法
フレネミー？ いいえ、その人は『パラノイア』です。ちょっとしたことで敵へと豹変する人たちについて
職場のサイコパス、ナルシストなどが行う「心理的虐待（ガスライティングなど）」の虐待例と対策及び対処法
ストレスフルな職場で注意すべきメンタルや身体の危険な症状
邪悪どころではない危険な性質『サディスティックパーソナリティ障害（SPD）』とは。サディストの種類やその危険性について
「近づいてはいけない人達」を初見で見極める
毒親による病的ナルシスト『自己愛性パーソナリティー障害』
ナルシストとソシオパスを見極める
職場や家庭でサイコパスの有害性に匹敵する「ソシオパス（社会病質者）」
静かに攻撃する人達『受動攻撃性パーソナリティ障害』
ナルシスト（NPD）による『ガスライティング』の特徴と対策
サイコパスが上司の場合は悲惨です。ですがサイコパスは社会的に成功している場合があります。もし上司がサイコパスに該当する場合は早めの対策を。下記はサイコパス上司とクラッシャー上司についての特徴と対策
サイコパスやサディスト、ナルシスト、反社会性の他にも危険なタイプが存在します。下記はサイコパスやサディスト、ナルシスト、反社会性の特徴をもつ危険なタイプについて
サイコパスを事前に把握し、対策することで、被害を回避、軽減できます。下記はサイコパスにおける２０の特徴と対処法について
「怒り」の種類と、その「怒り」裏に隠されているかもしれない障害のタイプをご紹介します。「怒り」で周りの人や自分に潜む「パーソナリティー障害」や「精神障害」がわかるかもしれません。
婚活で注意したいサイコパス『ハイスペック（高収入）男子』
メンタルヘルスに関する記事
無愛想な人と仕事をするときの心構え
周りの目（他人の目）が気になる人への処方箋
多くの人がついやってしまう『人から嫌われる不快な行動５選』
本物のぼっち【シゾイドパーソナリティ障害】。職場で『ぼっち』になったらどうしよう。この記事を読んでいるあなたなら大丈夫。【新社会人および就活者向け】
なぜ『おとなしい人』は意地悪な人から目を付けられるのか。なぜなら『承認欲求が強い人』と『おとなしい人』との相性は最悪だからです
HSPで仕事や人間関係に疲れる。そして生きづらい。もう限界だと思っている方へのシンプルな対処法
メンタルを強くする２つの方法と即席で強化する思考術
『傷つかない考え方』と『傷つきやすい人』について。とある『傷つきやすい人』実は○○○○○かもしれません
職場特有の人間関係や将来性に強いストレスや不安を感じている方は「在宅プログラマー」への転職（再就職）がオススメ
不安や辛い過去に響くお釈迦様の教え「一夜賢者の偈」
落ち込む（気持ちが沈む）メンタルに効果的な４つのメンタルヘルス（アジェンス思考・習慣・栄養・ハーブ）
不満（イライラ・ムカつく・ドキドキ）なメンタルに簡単でスグにできる効果的な４つのメンタルヘルス（瞑想常駐（めいそうじょうちゅう）・習慣・栄養・ハーブ）
将来が不安な方はスクールに行って手に職をつけよう。プログラミングやデザイン、英語は特にオススメ。
精神を病む前に辞めてしまおう。お金ではなく、スキルを稼ごう。スキルは転職やフリーランス、起業における最強フリーパス
『○丼』によるメンタル対策「不安・緊張（プレゼン・スピーチ・商談・転職・就職活動・面接）にかなりオススメ」
職場でメンタルを回復する方法。オキシトシンをフル活用しよう！
不安なメンタルを解消・軽減しよう！「思考・習慣・栄養・ハーブ」による４つのメンタルヘルス
「不安」を感じやすい方のための栄養とハーブ
重い生理痛やPMS、職場特有の人間関係、ライフステージによる仕事のストレスや不安がある方は「在宅プログラマー」へ転職（または再就職）しよう
