آموزش مقدماتی JavaScript | پروژه نهایی

طراحی پروژه

برای پروژه نهایی، یک ماشین حساب ساده طراحی می‌کنیم که چهار عمل اصلی ریاضی (جمع، تفریق، ضرب و تقسیم) را انجام می‌دهد. این پروژه به شما کمک می‌کند تا تمام مفاهیم یادگرفته‌شده مانند متغیرها، توابع، شرط‌ها، رویدادها و دستکاری DOM را در عمل به کار ببرید.

مراحل طراحی:

1. نیازمندی‌ها: ماشین حساب باید دو عدد ورودی و یک عملگر (+, -, *, /) از کاربر بگیرد و نتیجه را نمایش دهد.
2. اجزای UI: یک صفحه ساده شامل سه فیلد ورودی (عدد اول، عدد دوم، انتخاب عملگر) و یک دکمه «محاسبه» و یک بخش نمایش نتیجه.
3. ساختار DOM: از عناصر HTML مانند <input> برای ورودی‌ها، <select> برای انتخاب عملگر، <button> برای اجرا و <div> برای نمایش نتیجه استفاده می‌شود.
4. منطق برنامه: تابعی به نام calculate می‌نویسیم که مقادیر ورودی را دریافت می‌کند، با استفاده از switch یا if عملگر را تشخیص می‌دهد و نتیجه را از طریق innerText در صفحه نمایش می‌دهد.

مثال ساده از کد HTML (بدون استایل):

<input id="num1" type="number" placeholder="عدد اول">
<select id="operator">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">×</option>
  <option value="/">÷</option>
</select>
<input id="num2" type="number" placeholder="عدد دوم">
<button onclick="calculate()">محاسبه</button>
<div id="result">نتیجه</div>

در بخش بعدی (پیاده‌سازی کد) نحوه نوشتن تابع calculate و مدیریت خطاها (مانند تقسیم بر صفر) را به طور کامل توضیح خواهیم داد.