電卓の作り方[JQuery]

基本的な電卓の作り方

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

CSSは大した記述をしていないので解説は割愛します

HTML

各数字のボタンと演算子のボタンを配置

JQuery

変数

• push_num = 押された数字を1桁ずつ配列として一時的に記憶する(例、12なら’1,2′)
• num_1 = 計算の基準となる値
• num_2 = 計算で変化させる値
• cal = 使用する演算子
• answer = .result を押した際の計算結果
• calculation = 演算子が入力されたら true になり、num_2 へ入力可能となる

数字キーを押したときの処理

• $(‘.switch’).on(‘click’,function(){ }) = .switch をクリックするとイベントが起動
• push_num.push($(this).text()); = 配列push_num に クリックしたボタンに表示されている数値を追加する
• if(calculation == tlue){ } = 変数calculation が false なら 変数num_1 に true なら変数num_2 へ 配列push_num の数値を結合( .join() )して挿入
• $(‘.display’).text(‘num_1’) = .display に 数値を表示する

演算子キーを押したときの処理

• $(‘.caculation’).on(‘click’,function(){ }) = .calculation をクリックするとイベントが起動
• cal = $(this).attr(‘id’); = 変数cal に押された演算子キーの id を取得
• calculation = true; = 変数calculation を true にする。これにより 次に入力する数値は 変数num_2 に保存される
• push_num = []; = 配列push_num に一時的に記憶していた数値をリセット
• $(‘.display’).text(”); = .display に表示されている数値をリセット

=キーを押したときの処理

• $(‘.result’).on(‘click’,function(){ }); = .result をクリックするとイベントが起動
• switch(cal){ } = 変数cal に入っている値によって処理を変更する
• case ‘値’: 処理 break; = cal に入っている値によって break までの処理を行う。値が plus の場合のみ文字列型の結合( 例: 1+1 =11 )を防ぐため、sum_1 と sum_2 という変数に pareseInt() で 数字型に変換している

ACキーを押したときの処理

• $(‘.reset’).on(‘click’,function(){ }); = .reset をクリックするとイベントが起動
• 全ての変数と配列を元の状態へ戻し、.display の表示も消す