آموزش ساخت ماشین حساب با javascript

آموزش ساخت ماشین حساب با javascript

در این مقاله از سری مقالات بخش آموزش جاوا اسکریپت ، سعی بر آن داریم تا بتوانیم آموزش ساخت ماشین حساب با javascript را از صفر تا صد با منطق الگوریتمی توضیح دهیم. تا پایان مقاله همراه ما باشید.

مقدمه ماشین حساب

از قدیم به یاد دارم که در هر زبانی، مخصوصا c++ و basic یکی از تمرین های اصلی و سخت برای بچه ها ، ساختن ماشین حساب بود. بطوری که برخی از استادان به ما میگفتن که هر کسی در هر زبانی، یک ماشین حساب قدرتمند بنویسد، آن زبان را فرا گرفته است!

البته امروزه تعریف و کاربرد زبان های برنامه نویسی بسیار تغییر کرده و پیچیدگی های فراتری از ماشین حساب پیدا کرده اند، اما باز هم از ارزش نوشتن منطق ماشین حساب کم نمیکند.

شروع به ساخت ماشین حساب

ابتدا با کد های زیر، قسمت html و css کار را ایجاد کنید. بعید بدونم این قسمت نیاز به توضیح داشته باشد، اما اگر سوالی بود در رابطه با اچ تی ام ال ، در کامنت بپرسید.

کد های زیر، قسمت اچ تی ام ال هست. کلا 4 دسته فانکشن جاوا اسکریپتی داریم که به دکمه های مربوطه داده شده است. اعداد ، فانکشن _Number را دارند. اپریشن ها یا عملگر ها فانکشن _op را دارند. به همین ترتیب دکمه clear فانکشن _clear و دکمه مساوی فانکشن _result را در خود با ایونت onclick دارد.

<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('-')">&#8211;</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>

در قسمت بعدی این استایل ها را به پروژه خود اضافه کنید.

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); }

به این شکل بایستی ایجاد شود:

آموزش ساخت ماشین حساب با جاوا اسکریپت

اما برویم سراغ قسمت اصلی یا همان مغز کد، جاوا اسکریپت!

ابتدا نیاز به تعریف چهار متغیر اصلی و سراسری برای نگهداری :

  • سلکت المان اینپوت
  • نگهداری عدد اول
  • نگهداری عدد دوم
  • نگهداری مقدار عملگر

پس کد زیر را مینویسیم:

let inputCalc = document.getElementById(`input`); let num1 let num2 let op

اصلی ترین فانکشن ساخت ماشین حساب

در این قسمت اصلی ترین بخش کد را داریم. ابتدا ببینید:

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 وظیفه ذخیره سازی نوع عملگر را برای ما دارد. کد زیر:

function _op(self) { op = self inputCalc.value = null }

با کلیک روی دکمه clear بایستی تمام داده ها ریست شود. کد زیر:

function _clear() { inputCalc.value = null num1 = null num2 = null op = null inputCalc.setAttribute(`data-status`, `on`) }

و با کلیک بروی دکمه = عدد حاصل بایستی چاپ شود.کد زیر:

function _result() { inputCalc.value = num1 }

میتوانید در قطعه کد زیر، قسمت جاوا اسکریپت را بصورت کامل ببینید.

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 }

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *