برنامه نویسی
دفعات بازدید ۴۵۸جلسه دوم ساخت ماشین حساب و طبیعی کردن آن بر اساس ماشین حساب رایانه
۱
آموزش برنامه نویسی
آموزش ساخت ماشین حساب جلسه دوم
در جلسه قبلی یاد گرفتیم چگونه می توانیم یک ماشین حساب ساده بسازیم. اما این ماشین حساب شبیه آنچه که در نرم افزار های مرسوم و دنیای واقعی می بینیم نیستند. در حقیقت اصلی ترین نکته که همان دکمه های اعداد هستند در این ماشین حساب وجود ندارد. در نتیجه در این جلسه می خواهیم دکمه های اعداد را نیز به ماشین حساب اضافه کنیم. در نتیجه از این جا شروع می کنیم.
<!DOCTYPE html>
<html >
<head>
<title>ماشین حساب</title>
<style>
button{
width: 100%;
}
#result{
background-color: grey;
color: white;
padding: 10px;
min-height: 20px;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4">
<span id="result"></span>
</td>
</tr>
<tr>
<td>
<button onClick="reset()">AC</button>
</td>
<td>
<button onClick="changeSign()">+/-</button>
</td>
<td>
<button onClick="calc('%')">%</button>
</td>
<td>
<button onClick="calc('/')">/</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('7')">7</button>
</td>
<td>
<button onClick="addChar('8')">8</button>
</td>
<td>
<button onClick="addChar('9')">9</button>
</td>
<td>
<button onClick="calc('*')">*</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('4')">4</button>
</td>
<td>
<button onClick="addChar('5')">5</button>
</td>
<td>
<button onClick="addChar('6')">6</button>
</td>
<td>
<button onClick="calc('-')">-</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('1')">1</button>
</td>
<td>
<button onClick="addChar('2')">2</button>
</td>
<td>
<button onClick="addChar('3')">3</button>
</td>
<td>
<button onClick="calc('+')">+</button>
</td>
</tr>
<tr>
<td colspan="2">
<button onClick="addChar('0')">0</button>
</td>
<td>
<button onClick="addChar('.')">.</button>
</td>
<td>
<button onClick="calc('=')">=</button>
</td>
</tr>
</table>
</body>
</html>
در این جا از یک نمونه ماشین حساب که در سیستم عامل مک وجود دارد استفاده شده است. موارد موجود دکمه اعداد ۰ تا ۹ است. دکمه ریست و درصد و نقطه اعشار و تغییر علامت عدد نیز وجود دارد.
برای منظم شدن ظاهر از جدول استفاده کردیم. تا تمام دکمه ها در جایگاه خود قرار بگیرند.برای هر ردیف یک تگ tr تعریف کردیم و برای هر ستون یک تگ td گذاشتیم. برای بعضی دکمه ها مانند دکمه صفر باید دو ستون از جدول اشغال شود در نتیجه در ویژگی colspan مقدار دو را قرار می دهیم. یا مقدار نتیجه باید کامل عرض ماشین حساب بگیرد. در نتیجه برای نتیجه مقدار ۴ را در colspan قرار میدهیم.
همچنین دیگر تغییر css برای دکمه ها بود. که چون تمام فضای موجود خود را اشغال کنند باید مقدار width یا عرض آن ها را برابر 100 درصد قرار دهیم.که در قسمت head کد در تگ style قرار دارد. چون تگ وجود دارد برای ادرس دهی همان کلمه button کافی است.
برای نمایش نتیجه اما از آیدی برای ادرس دهی استفاده می کنیم. در نتیجه قبل از آیدی از علامت # استفاده می کنیم.
برای رنگ پس زمینه خاکستری قرار دادیم. رنگ نوشته سفید. فاصله نوشته از کناره ها ۱۰ پیکسل با دستور padding انجام شد. حداقل ارتفاع را ۱۰ پیکسل قرار دادیم تا کمتر از ان نشود با دستور min-height . همچنین برای اینکه عرض محل را به صورت کامل بگیرد از دستور display:block استفاده کردیم.
در دکمه ها هم یک سری فانکشن نوشته ای که فعلا تعریف نکرده ایم . مانند پاک کردن ، تغییر علامت و اضافه کردن کاراکتر جدید می باشد.
برای تابع دکمه اعداد کد ابتدایی زیر را می نویسیم.
var result=0;
var display=‘’;
function addChar(char){
display+=char;
updateDisplay()
}
function updateDisplay()
{
document.getElementById('result').innerHTML=display
}
با هر بار کلیک بر روی اعداد فانکشن addchar صدا زده می شود و مقدار کلیک شده را به آن پاس می دهد. این مقدار به مقدار قبلی display اضافه می شود. و تابع updateDisplay صدا زده می شود که نتیجه را نمایش دهد. در این تابع مقدار پاس داده شده در المان result جایگذاری می شود.
برای محاسبات باید مقدار فعلی را را که در display وجود دارد را با عملیات درخواست شده با عبارت result ادغام کرده و در result قرار بدهیم و همچنین مقدار نمایش را برای وارد کردن مقدار جدید آماده کنیم.
در ادامه کد نهایی را می نویسیم و توضیحات و تغییرات مربوطه را پس از آن خواهیم آورد.
<!DOCTYPE html>
<html >
<head>
<title>ماشین حساب</title>
<style>
button{
width: 100%;
}
#result{
background-color: grey;
color: white;
padding: 10px;
min-height: 20px;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4">
<span id="result">0</span>
</td>
</tr>
<tr>
<td>
<button onClick="reset()">AC</button>
</td>
<td>
<button onClick="changeSign()">+/-</button>
</td>
<td>
<button onClick="calc('%')">%</button>
</td>
<td>
<button onClick="calc('/')">/</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('7')">7</button>
</td>
<td>
<button onClick="addChar('8')">8</button>
</td>
<td>
<button onClick="addChar('9')">9</button>
</td>
<td>
<button onClick="calc('*')">*</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('4')">4</button>
</td>
<td>
<button onClick="addChar('5')">5</button>
</td>
<td>
<button onClick="addChar('6')">6</button>
</td>
<td>
<button onClick="calc('-')">-</button>
</td>
</tr>
<tr>
<td>
<button onClick="addChar('1')">1</button>
</td>
<td>
<button onClick="addChar('2')">2</button>
</td>
<td>
<button onClick="addChar('3')">3</button>
</td>
<td>
<button onClick="calc('+')">+</button>
</td>
</tr>
<tr>
<td colspan="2">
<button onClick="addChar('0')">0</button>
</td>
<td>
<button onClick="addChar('.')">.</button>
</td>
<td>
<button onClick="calc('=')">=</button>
</td>
</tr>
</table>
<script>
var result=0;
var display='0';
var clear=true
var lastOperand=''
function addChar(char){
if(clear)
display=char
else
display+=char;
updateDisplay(display)
clear=false
}
function updateDisplay(value)
{
document.getElementById('result').innerHTML=value
}
function calc(operand){
display*=1
if(clear && operand!= '='){
lastOperand=operand
return;}
switch(lastOperand)
{
case '+':
result +=display
break;
case '-':
result -=display
break;
case '*':
result *=display
break;
case '/':
result /=display
break;
case '':
result=display
break;
default:
console.log('invalid operand')
return
break;
}
if(operand!= '=')
{
lastOperand=operand
display=result
updateDisplay(display)
}
else{
updateDisplay(result)
}
clear=true
}
function reset()
{
display='0'
result=0
clear=true
lastOperand=''
updateDisplay(display)
}
function changeSign()
{
display*=-1;
updateDisplay(display);
}
</script>
</body>
</html>
| 0 | |||
توضیحات
قسمت html که هیچ تغییری نکرده . و صرفا دکمه ها را در خود جای داده است . مهم ترین بخش قسمت js می باشد.
متغیر result مقدار محاسبات را در خود نگاه می دارد.
متغیر display مقدار نمایش داده شده در صفحه ماشین حساب است.
مقدار clear مشخص می کند که آیا با زدن عدد جدید باید به مقدار در صفحه اضافه شود یا جایگزین آن شود. برای زمانی که دکمه های عملیاتی انتخاب می شوند. مقدار بعدی انتخاب شده باید در صفحه جایگزین شود. در نتیجه می توانیم از این متغیر برای تشخیص آن استفاده کنیم.
مقدار lastOperand آخرین عملیاتی که انتخاب شده بود را در خود ذخیره می کند.و این متغیر است که مبنای محاسبات است.
تابع addChar برای اضافه کردن یک کاراکتر جدید به صفحه صدا زده می شود.اگر صفحه باید پاک شود مقدار جدید را جایگزین قبلی می کند وگرنه مقدار جدید را به ادامه مقدار قبلی می چسباند.
سپس حاصل را برای نمایش به تابع updateDisplay می فرستد و فلگ پاک کردن صفحه را پاک می کند.
تابع updateDisplay مقدار گرفته شده را در المان result نمایش می دهد.
تابع calc مرکز محاسبات می باشد.اول مقدار صفحه نمایش را که یک رشته است به یک عدد تبدیل می کند تا قابل محاسبه باشد.سپس اگر دکمه ا نتخاب شده چند بار انتخاب شده بود صرفا از تابع خارج می شود و مانع انجام عملیات اضافی می شود. مانند وقتی که شما برای اطمینان از اینکه دکمه جمع را زده اید یا نه چند بار آن را فشار میدهید. در این حالت توقع ندارید کار جدیدی رخ دهد. صرفا می خواهید مطمئن شوید که دکمه را فشار داده اید.برای این کار چک کردن فلگ پاک کردن کافی است. چرا که در اخرین مرحله محاسبات این فلگ ست می شود و اگر کار جدیدی رخ نداده باشد و عدد جدیدی وارد نشده باشد این فلگ هنوز مقدار ۱ دارد. پس نیاز به انجام کاری نیست. مگر اینکه دکمه وارد شده علامت مساوی باشد که مانند همه ماشین حساب ها توقع داریم اخرین عملیات دوباره تکرار شود.
سپس اخرین عملیات را چک می کنیم و بر اساس اینکه چه عملیات ریاضی است . مقدار صفحه نمایش را با مقدار نتیجه محاسبات ترکیب می کنیم.
در نهایت مقدار operand را در مقدار lastOperand می ریزیم تا برای مرحله بعد اماده شود. و حاصل را نمایش میدهیم. البته در صورتی که عملیات فعلی مخالف مساوی باشد.
در نهایت هم فلگ پاک کردن صفحه را برای ورود دیتای جدید ست می کنیم.
تابع بعدی برای ریست کردن ماشین حساب است که تمام مقادیر ها و متغیر ها را به حالت ابتدایی بر میگرداند.
تابع changeSign هم برای تغییر علامت ورودی به کار گرفته می شود.و صرفا عدد نمایش داده شده را در -۱ ضرف می کند.