こんにちは、kazuです。
今回はJavaScriptで電卓アプリを作成しましたので、
記事にしていきます。
どのようなプログラムか
題名通りですが、電卓アプリです
HTML上で以下のような画像が表示されて数字をクリックすると
電卓と同じ感じで計算することができるアプリです。
まぁ使い方は電卓と同じです。
下にサンプル画像を貼り付けます。
画像① 何も押していない時
画像② 計算式を入力した時
画像③ ＝を押した時
実際にコードを見てみよう！
では実際にコードを見てみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CaluculatorProgram</title>
<script src="calculator.js"></script>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<!-- 電卓全体 -->
<div class="calculator_area">
<!-- 電卓数値入力部分 -->
<div class="calc_area">
<input class="calcbox" id="calc">
</div>
<!-- 電卓ボタン部分 -->
<div class="button_area">
<div class="button" onclick="update('')">
<p class="button_text">AC</p>
</div>
<div class="button" onclick="Clear()">
<p class="button_text">C</p>
</div>
<div class="button" onclick="percentage()">
<p class="button_text">%</p>
</div>
<div class="button" onclick="inputNumber( '÷' )">
<p class="button_text">÷</p>
</div>
<div class="button" onclick="inputNumber( '1' )">
<p class="button_text">1</p>
</div>
<div class="button" onclick="inputNumber( '2' )">
<p class="button_text">2</p>
</div>
<div class="button" onclick="inputNumber( '3' )">
<p class="button_text">3</p>
</div>
<div class="button" onclick="inputNumber( '×' )">
<p class="button_text">×</p>
</div>
<div class="button" onclick="inputNumber( '4' )">
<p class="button_text">4</p>
</div>
<div class="button" onclick="inputNumber( '5' )">
<p class="button_text">5</p>
</div>
<div class="button" onclick="inputNumber( '6' )">
<p class="button_text">6</p>
</div>
<div class="button" onclick="inputNumber( '+' )">
<p class="button_text">+</p>
</div>
<div class="button" onclick="inputNumber( '7' )">
<p class="button_text">7</p>
</div>
<div class="button" onclick="inputNumber( '8' )">
<p class="button_text">8</p>
</div>
<div class="button" onclick="inputNumber( '9' )">
<p class="button_text">9</p>
</div>
<div class="button" onclick="inputNumber( '-' )">
<p class="button_text">-</p>
</div>
<div class="button" onclick="inputNumber( '.' )">
<p class="button_text">.</p>
</div>
<div class="button" onclick="inputNumber( '0' )">
<p class="button_text">0</p>
</div>
<div class="button" onclick="inputNumber( '00' )">
<p class="button_text">00</p>
</div>
<div class="button" onclick="calc()">
<p class="button_text">=</p>
</div>
</div>
</div>
</body>
</html>.calculator_area{
height: 600px;
width: 400px;
border: solid 3px #000000;
}
.calc_area{
height: 60px;
width: 300px;
border: solid 3px #000000;
margin-left:40px;
margin-top: 20px;
}
.calcbox{
height: 53px;
width: 293px;
border:solid 0px;
font-size: 40px;
}
.button_area{
margin:20px;
height:480px;
width: 350px;
display:flex;
flex-wrap: wrap;
}
.button{
height:50px;
width: 15%;
margin-top:20px;
margin-left:23px;
border: solid 3px #000000;
text-align:center;
background-color: #000000;
}
.button_text{
text-align:center;
font-weight: bold;
color: #ffffff;
}// ボタンを押したとき最後の数字の後に押したボタンの数字が入力される
function inputNumber(num){
document.querySelector( '#calc' ).value += num;
}
// 最後の1文字だけ消す
function Clear(){
var calcAreaText = document.querySelector( '#calc' ).value;
var afterDeleteText = calcAreaText.slice(0, -1);
document.querySelector( '#calc' ).value = afterDeleteText;
}
// 入力されている文字を更新する
function update(updatenum){
document.querySelector( '#calc' ).value = updatenum;
}
// ×と÷を*と/の演算子に変換する
function operatorConversion(calcAreaText){
var multipliedConv = calcAreaText.replaceAll( "×" , "*" );
var dividedConv = multipliedConv.replaceAll( "÷" , "/" );
return dividedConv;
}
// 入力した計算式を計算する
function calcFunction(calcAreaTextConv){
const answer = new Function('return ' + calcAreaTextConv);
return answer;
}
// =を押したときの実装
function calc(){
var calcAreaText = document.querySelector( '#calc' ).value;
var calcAreaTextConv = operatorConversion(calcAreaText);
// 正規表現"+","-","×","÷",の文字があるか判断する
var regex = /[+\-\×\÷]/g;
// "+","-","×","÷",の文字がない場合-1になり文字があった場合-1以外になる
var branch = calcAreaText.search(regex);
if(branch!=-1){
// 計算する
try {
const answer = calcFunction(calcAreaTextConv);
update( answer());
} catch( _error ) {
update( _error );
}
} else {
//もし"+","-","×","÷",がない場合入力している場所を0にする
document.querySelector( '#calc' ).value = 0;
}
}
// %を押したときの実装
function percentage(){
var calcAreaText = document.querySelector( '#calc' ).value;
// 正規表現"+","-","×","÷",の文字があるか判断する
var regex = /[+\-\×\÷]/g;
// "+","-","×","÷",の文字がない場合-1になり文字があった場合-1以外になる
var branch = calcAreaText.search(regex);
if(branch!=-1){
// 計算する
// "+","-","×","÷"を全ての文字を配列で返す
var operatorSearch = calcAreaText.match(regex);
// 配列の中身をlengthにする0スタートの為-1
var operatorLastArray = operatorSearch.length - 1;
// 最後の演算子までの文字数を出す
var operatorLastindex = calcAreaText.lastIndexOf(operatorSearch[operatorLastArray])+1;
// 最後の演算子以降の数値を百分率計算を最初に計算できるよう"(÷100)"を追加
var calcText1 = calcAreaText.slice(0, operatorLastindex) + '(';
var calcText2 = calcAreaText.slice(operatorLastindex)+'÷100)';
var calcAreaText = calcText1+calcText2;
var calcAreaTextConv = operatorConversion(calcAreaText);
try {
const percentageAnswer = calcFunction(calcAreaTextConv);
update(percentageAnswer());
} catch( _error ) {
update( _error );
}
} else{
document.querySelector( '#calc' ).value = 0;
}
}最後に
いかがでしたでしょうか？
基本機能のみの電卓でしたが
実際にコードにしてみると結構考えるとこもありました。（百分率のところ）
正規表現とかはあまり使用したことがなかったので、
実際に使用してみて大体理解できました。
電卓問題ないので、ぜひ使ってみてください。
最後までご覧いただきありがとうございました！
関連記事
こんにちはkazuです。 本日はjavascriptで2022年までのカウントダウンタイマーを作ってみましたので、 そのコードを解説していきます。 アプリの説明 まずは、アプリの説明をしていきます。 といってもたいして説明する[…]
関連記事
こんにちはkazuです。 本日はjavascriptでアラームとタイムセールを知らせるプログラムを作ってみたので、 そのコードを解説していきます。 はじめに 今回はどのようなプログラムを作ったかといいますと、 特定の時間を変数に入[…]
関連記事
こんにちは、kazuです。 本日は文字列カウンターを作ってみましたので、 それを記事にしていきます。 なぜこのプログラムを作ったか 今回このプログラムを作ったきっかけは私事ですがプロフィール書く機会が多くなりまして プロフィール作[…]