در این مقاله از سری مقالات بخش آموزش جاوا اسکریپت ، سعی بر آن داریم تا بتوانیم آموزش ساخت ماشین حساب با javascript را از صفر تا صد با منطق الگوریتمی توضیح دهیم. تا پایان مقاله همراه ما باشید.
مقدمه ماشین حساب
از قدیم به یاد دارم که در هر زبانی، مخصوصا c++ و basic یکی از تمرین های اصلی و سخت برای بچه ها ، ساختن ماشین حساب بود. بطوری که برخی از استادان به ما میگفتن که هر کسی در هر زبانی، یک ماشین حساب قدرتمند بنویسد، آن زبان را فرا گرفته است!
البته امروزه تعریف و کاربرد زبان های برنامه نویسی بسیار تغییر کرده و پیچیدگی های فراتری از ماشین حساب پیدا کرده اند، اما باز هم از ارزش نوشتن منطق ماشین حساب کم نمیکند.
شروع به ساخت ماشین حساب
ابتدا با کد های زیر، قسمت html و css کار را ایجاد کنید. بعید بدونم این قسمت نیاز به توضیح داشته باشد، اما اگر سوالی بود در رابطه با اچ تی ام ال ، در کامنت بپرسید.
کد های زیر، قسمت اچ تی ام ال هست. کلا 4 دسته فانکشن جاوا اسکریپتی داریم که به دکمه های مربوطه داده شده است. اعداد ، فانکشن _Number را دارند. اپریشن ها یا عملگر ها فانکشن _op را دارند. به همین ترتیب دکمه clear فانکشن _clear و دکمه مساوی فانکشن _result را در خود با ایونت onclick دارد.
<![CDATA[
<div class="parent_calculator">
<button onclick="_clear()">clear</button>
<div class="calculator">
<input id="input" data-status="on"></input>
<div class="part1">
<button class="number_7 " onclick="_Number(this)">7</button>
<button class="number_8 " onclick="_Number(this)">8</button>
<button class="number_9 " onclick="_Number(this)">9</button>
<button class="op_1" onclick="_op('/')">/</button>
</div>
<div class="part2">
<button class="number_4 " onclick="_Number(this)">4</button>
<button class="number_5 " onclick="_Number(this)">5</button>
<button class="number_6 " onclick="_Number(this)">6</button>
<button class="op_2" onclick="_op('*')">*</button>
</div>
<div class="part3">
<button class="number_1 " onclick="_Number(this)">1</button>
<button class="number_2 " onclick="_Number(this)">2</button>
<button class="number_3 " onclick="_Number(this)">3</button>
<button class="op_3" onclick="_op('-')">–</button>
</div>
<div class="part4">
<button class="op_4" onclick="_Number(this)">.</button>
<button class="number_0 " onclick="_Number(this)">0</button>
<button class="op_5" onclick="_result(this)">=</button>
<button class="op_6" onclick="_op('+')">+</button>
</div>
</div>
</div>
]]>
در قسمت بعدی این استایل ها را به پروژه خود اضافه کنید.
<![CDATA[
body {
background-color: black;
}
.parent_calculator {
width: 250px;
height: 350px;
background-color: rgba(255, 255, 255, 0.774);
margin: 200px auto;
border-radius: 5px;
}
.calculator {
display: flex;
height: 100%;
width: 100%;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
#input {
border: 2px solid rgb(0, 0, 0);
background-color: white;
color: black;
border-radius: 5px;
width: 175px;
height: 35px;
margin: 10px 0px;
}
/* start part1 */
.part1 {
margin: 2px 0px;
}
.number_7 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_7:hover {
transform: scale(1.1);
}
.number_8 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_8:hover {
transform: scale(1.1);
}
.number_9 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_9:hover {
transform: scale(1.1);
}
.op_1 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_1:hover {
transform: scale(1.1);
}
/* end part1 */
/* start part2 */
.part2 {
margin: 2px 0px;
}
.number_4 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_4:hover {
transform: scale(1.1);
}
.number_5 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_5:hover {
transform: scale(1.1);
}
.number_6 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_6:hover {
transform: scale(1.1);
}
.op_2 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_2:hover {
transform: scale(1.1);
}
/* end part2 */
/* start part3*/
.part3 {
margin: 2px 0px;
}
.number_1 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_1:hover {
transform: scale(1.1);
}
.number_2 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_2:hover {
transform: scale(1.1);
}
.number_3 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_3:hover {
transform: scale(1.1);
}
.op_3 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_3:hover {
transform: scale(1.1);
}
/* end part3 */
/* start part4*/
.part4 {
margin: 2px 0px;
}
.op_4 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_4:hover {
transform: scale(1.1);
}
.number_0 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.number_0:hover {
transform: scale(1.1);
}
.op_5 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_5:hover {
transform: scale(1.1);
}
.op_6 {
width: 40px;
height: 40px;
border: 2px solid white;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
}
.op_6:hover {
transform: scale(1.1);
}
]]>
به این شکل بایستی ایجاد شود:
اما برویم سراغ قسمت اصلی یا همان مغز کد، جاوا اسکریپت!
ابتدا نیاز به تعریف چهار متغیر اصلی و سراسری برای نگهداری :
- سلکت المان اینپوت
- نگهداری عدد اول
- نگهداری عدد دوم
- نگهداری مقدار عملگر
پس کد زیر را مینویسیم:
<![CDATA[
let inputCalc = document.getElementById(`input`);
let num1
let num2
let op
]]>
اصلی ترین فانکشن ساخت ماشین حساب
در این قسمت اصلی ترین بخش کد را داریم. ابتدا ببینید:
<![CDATA[
function _Number(self) {
inputCalc.value += self.innerText
if (
(inputCalc.getAttribute(`data-status`)) == `on`
) {
// first step
num1 = Number(inputCalc.value)
inputCalc.setAttribute(`data-status`, `off`)
console.log(num1);
} else {
// another step
// num1 -op- num2
num2 = Number(inputCalc.value)
console.log(num2);
console.log(op);
switch (op) {
case `+`: num1 = num1 + num2; break;
case `-`: num1 = num1-num2; break;
case `*`: num1 = num1 * num2; break;
case `/`: num1 = num1 / num2; break;
}
console.log(num1);
}
}
]]>
اولا باید روی هر دکمه که کلیک میشود، عدد مربوطه در کادر بالا نوشته شود. پس خط اول تابع همین کار را انجام میدهد.
منطق و الگوریتم کلی ما برای حل ماشین حساب جاوا اسکریپت به صورت زیر است:
در اولین مرحله : عدد را از input گرفته و در متغیر num1 ذخیره کند.
در دومین مرحله : عدد را از input گرفته و در متغیر دوم ذخیره کند و با احتساب نوع عملگر که در op وجود دارد ، در switch حساب کند num1 -op- num2 و این مقدار را در num1 ذخیره کند و مجدد اگر کاربر عددی وارد کرد، آن را در num2 ذخیره کرده و جواب را همیشه در num1 ذخیره کند.
برای همین منظور از اتریبیوت data-status استفاده کردیم تا بتوانیم بار اول عدد وارد کردن را با مرتبه های بعدی محاسبه کنیم.
در ادامه ماجرا، تابع OP وظیفه ذخیره سازی نوع عملگر را برای ما دارد. کد زیر:
<![CDATA[
function _op(self) {
op = self
inputCalc.value = null
}
]]>
با کلیک روی دکمه clear بایستی تمام داده ها ریست شود. کد زیر:
<![CDATA[
function _clear() {
inputCalc.value = null
num1 = null
num2 = null
op = null
inputCalc.setAttribute(`data-status`, `on`)
}
]]>
و با کلیک بروی دکمه = عدد حاصل بایستی چاپ شود.کد زیر:
<![CDATA[
function _result() {
inputCalc.value = num1
}
]]>
میتوانید در قطعه کد زیر، قسمت جاوا اسکریپت را بصورت کامل ببینید.
<![CDATA[
let inputCalc = document.getElementById(`input`);
let num1
let num2
let op
function _Number(self) {
inputCalc.value += self.innerText
if (
(inputCalc.getAttribute(`data-status`)) == `on`
) {
num1 = Number(inputCalc.value)
inputCalc.setAttribute(`data-status`, `off`)
} else {
num2 = Number(inputCalc.value)
switch (op) {
case `+`: num1 = num1 + num2; break;
case `-`: num1 = num1-num2; break;
case `*`: num1 = num1 * num2; break;
case `/`: num1 = num1 / num2; break;
}
}
}
function _op(self) {
op = self
inputCalc.value = null
}
function _clear() {
inputCalc.value = null
num1 = null
num2 = null
op = null
inputCalc.setAttribute(`data-status`, `on`)
}
function _result() {
inputCalc.value = num1
}
]]>
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
