ساخت ماشین حساب با جاوا اسکریپت – از صفر تا صد + کد

۷۴۱۱ بازدید

آخرین به‌روزرسانی: ۲۶ اردیبهشت ۱۴۰۲

زمان مطالعه: ۱۷ دقیقه

دانلود PDF مقاله

با جاوا اسکریپت می‌شود کارهای خارق‌العاده‌ای انجام داد، به‌خصوص اگر جاوا اسکریپت با HTML و CSS دست به دست هم دهند، آنجاست که شاهکار اصلی اتفاق می‌افتد. ساخت ماشین حساب با جاوا اسکریپت، پروژه‌ای کوچک و نسبتاً ساده است. در این مطلب آموزشی با عناصر مختلف HTML و CSS همراه با جاوا اسکریپت و شیوه‌های مدرن ES6، ماشین حسابی ساده، کد نویسی و طراحی خواهد شد.

فهرست مطالب این نوشته

پیش‌ نیازهای ساخت ماشین حساب با جاوا اسکریپت چیست؟

پیاده سازی ماشین حساب با جاوا اسکریپت

کدهای جاوا اسکریپت برای ساخت ماشین حساب

معرفی فیلم های آموزش جاوا اسکریپت

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

خروجی نهایی و سورس کد ساخت ماشین حساب با جاوا اسکریپت

سخن پایانی

پیش‌ نیازهای ساخت ماشین حساب با جاوا اسکریپت چیست؟

پیش نیاز اصلی ساخت ماشین حساب با استفاده از زبان جاوا اسکریپت، درک اصولی این زبان به همراه HTML و CSS است. همان‌طور که گفته‌ شد، با استفاده از جاوا اسکریپت می‌توان کارهای جالبی را انجام داد و برنامه‌های جذابی را برای وب ساخت. از آنجا که ماشین حساب از اجزای مختلفی تشکیل شده است، بهترین ایده برای ساختن آن با جاوا اسکریپت این است که آن را با HTML و CSS ترکیب کنیم تا یک ماشین حساب کاربردی و در عین حال جذاب بسازیم.

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

به صورت کلی، برای ساخت ماشین حساب با جاوا اسکریپت یک سری پیش‌نیازها لازم است که عبارت‌اند از:

آشنایی با نحوه استفاده از کد ادیتور
داشتن درک اولیه از جاوا اسکریپت، HTML و همچنین CSS

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس HTML و CSS در فرادرس

کلیک کنید

پیاده سازی ماشین حساب با جاوا اسکریپت

در قدم اول قبل از انجام هر کاری، باید پوشه‌ای جدید در کامپیوتر ایجاد و سه فایل با نام و فرمت‌های زیر در آن ساخته شوند:

Index با پسوند Html
Style با پسوند CSS
Script با پسوند js

برای شروع پروژه ساخت ماشین حساب جاوا اسکریپتی، باید عملکردهای اساسی یک ماشین حساب را در نظر گرفت. این عملگرها شامل جمع، تفریق، ضرب، تقسیم، حذف، پاک کردن و البته امکان استفاده از اعداد اعشاری در انجام این عملیات است. در فایل HTML، می‌توان فایل‌های CSS و JavaScript را با استفاده از کد زیر به هم ارتباط داد:

1<!DOCTYPE html>
2
3<html lang="en" dir="ltr">
4
5  <head>
6
7    <meta charset="utf-8">
8
9    <title>Calculator</title>
10
11    <link href="Calculator with Jsstyle.css" rel="stylesheet">
12
13    <script src="Calculator with JSscript.js" defer></script>

کار بعدی که باید انجام شود این است که تمام عناصر مختلف HTML اضافه شوند. برای این کار یک div ، با کلاسی به نام calculator-grid ایجاد خواهد شد.

1<div class="calculator-grid">

تمام عناصر و دکمه‌های مختلف HTML در calculator-gridباید در زیر بخشdivقرار بگیرند. تمام این عناصر در قطعه کد زیر به همین شکل اضافه شده‌اند:

1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3
4<head>
5    <meta charset="utf-8">
6    <title>Calculator</title>
7    <link href="Calculator with Jsstyle.css" rel="stylesheet">
8    <script src="Calculator with JSscript.js" defer></script>
9    <div class="calculator-grid">
10        <div class="output">
11            <div class="previous-operand"></div>
12            <div class="current-operand"></div>
13        </div>
14        <button class="span-two">AC</button>
15        <button>DEL</button>
16        <button>÷</button>
17        <button>1</button>
18        <button>2</button>
19        <button>3</button>
20        <button>*</button>
21        <button>4</button>
22        <button>5</button>
23        <button>6</button>
24        <button>+</button>
25        <button>7</button>
26        <button>8</button>
27        <button>9</button>
28        <button>-</button>
29        <button>.</button>
30        <button>0</button>
31        <button class="span-two">=</button>
32    </div>
33</head>
34<body>
35</body>
36</html>

کد HTML فوق حاوی چندین کلاسdivاست.

کلاسoutput نشان‌دهنده صفحه ماشین حساب است.
previous-operand نشان‌دهنده نتیجه عملکرد قبلی در ماشین حساب است.
کلاس current-operand عملکرد فعلی ماشین حساب را نشان می‌دهد.
کلاس span-two نشان‌ دهنده دکمه‌هایی است که ستون را در ماشین حساب تشکیل می‌دهند.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

قدم بعدی در ساخت ماشین حساب با جاوا اسکریپت، استایل‌دهی به آن است.

نقش CSS در ساخت ماشین حساب با جاوا اسکریپت چیست؟

نقش اصلی CSS در ساخت ماشین حساب با زبان جاوا اسکریپت استایل‌دهی به بدنه ماشین حساب است. در این مرحله از ساخت ماشین حساب با جاوا اسکریپت، ماشین حساب با استفاده از CSS استایل‌دهی می‌شود. ابتدا همه عناصر، از جمله عناصر before و after انتخاب می‌شوند. سپس می‌توان ویژگی box-sizing را اعمال کرده و آن را به‌ عنوان border-box قرارداد. همچنین می‌توان با استفاده از کد زیر، نوع فونت و اندازه قلم ماشین حساب را تغییر داد:

1*, *::before, *::after {
2  box-sizing: border-box;
3  font-family: Gotham Rounded, sans-serif;
4  font-weight: normal;
5}

در مرحله بعد، باید با استفاده از عنصر body، پس‌زمینه را تغییر داد:

1body {
2  margin: 0;
3  padding: 0;
4  background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
5  }

مرحله بعدی استایل دادن به calculator-grid است که قبلاً تعریف شد. این ‌همه‌ی دکمه‌ها و عناصر مختلف ماشین حساب را در بر می‌گیرد. همچنین می‌توان از ویژگیjustify-content برای تنظیم ماشین حساب در مرکز صفحه استفاده کرد. علاوه بر این، ویژگی align-content می‌تواند به تراز کردن موارد با مرکز صفحه مرورگر کمک کند. در این مرحله، ممکن است که calculator-grid به‌صورت عمودی مرتب‌ نشده باشد. می‌توان با تنظیم حداقل ارتفاع روی 100 این مشکل را برطرف کرد.

نکته دیگر در ساخت ماشین حساب با جاوا اسکریپت این است که دکمه‌ها باید در مرکز صفحه‌ نمایش قرار بگیرند و با فاصله از یکدیگر، نظم داشته باشند. برای این منظور، باید از grid-template-columns استفاده شود و سپس آن را روی تکرار تنظیم کرد که در آن هر ستون می‌تواند 100 پیکسل عرض داشته باشد. همچنین می‌توان همین کار را برای ردیف‌های grid-template انجام داد.

برای اینکه صفحه خروجی به‌ اندازه‌ای که نیاز دارد بزرگ شود و با هر تعداد از مقادیر ورودی سازگار باشد، باید مقدار minmax را روی ۱۲۰ پیکسل و حداکثر مقدار را روی خودکار تنظیم کرد. خروجی این مرحله مانند شکل زیر است.

همچنین برای قراردادن صحیح دکمه‌ها، باید تمام دکمه‌های موجود در calculator-grid را انتخاب کرده و کد CSS پایین را برای آن اعمال کرد:

1.calculator-grid {
2    display: grid;
3    justify-content: center;
4    align-items: center;
5    min-height: 100vh;
6    grid-template-columns: repeat(4, 100px);
7    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
8    }

در این مرحله، می‌توان استایل ماشین حساب را با تغییر ویژگی align-item به align-content بهبود بخشید و آن را در مرکز قرارداد. سپس باید کلاس span-two را استایل‌دهی کرد که این کار روی دکمه‌های All-clear و Delete تأثیر می‌گذارد.

استایل دهی به پنجره خروجی ماشین حساب با HTML

نکته مهم دیگر در ساخت ماشین حساب با جاوا اسکریپت، این است که به خروجی نمایش داده‌ شده در ماشین حساب باید استایل داده شود. این کار را می‌توان با افزودن متنی ساختگی انجام داد که به صورت زیر خواهد بود:

123 + برای previous-operand
456 برای current-operand

1<div class="output">
2<div class="previous-operand">123 +</div>
3<div class="current-operand">456</div>

به این ترتیب، با کمی متن ساختگی می‌توان پنجره خروجی را استایل‌دهی و سفارشی کرد. همچنین برای بهتر شدن پنجره نمایش، کاری که می‌توان انجام داد این است که خروجی را در کل عرض ماشین حساب تنظیم کرد. می‌توان این کار را با استفاده مجدد از ویژگی grid-column و تنظیم آن از ستون 1 تا ١ - انجام داد.

در مرحله بعد، رنگ پس‌زمینه با شفافیت 75 درصد به مشکی تغییر داده می‌شود. سپس، تمام عناصر داخل ظرف تراز می‌شوند. ساده‌ترین راه برای این کار استفاده از «فلکس» (flex) است. بنابراین می‌توان صفت display را روی flex و صفت align-items را روی flex-end قرار داد. با این کارعناصر خروجی در سمت راست ماشین حساب قرار می‌گیرند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

برای فاصله بین آن‌ها، می‌توان از ویژگی justify-content استفاده کرده و آن را به فاصله دور تنظیم کرد. در مرحله بعد، می‌توان padding را روی هر مقدار دلخواه تنظیم کرد. همچنین، برای اینکه عناصر خروجی در زمانی که بیش از حد طولانی می‌شوند بسته شوند، می‌توان از ویژگی word-wrap ، برای انتخاب محلی استفاده کرد که کلمات شکسته شوند. علاوه بر این، می‌توان یک word-break اضافه کرد و آن را روی break-all تنظیم کرد. باید عملوندهای قبلی و فعلی را در کلاس خروجی استایل‌دهی کرد. کد نهایی CSS در ساخت ماشین حساب با جاوا اسکریپت به این صورت ظاهر می‌شود:

1*, *::before, *::after {
2  box-sizing: border-box;
3  font-family: Gotham Rounded, sans-serif;
4  font-weight: normal;
5}
6
7body {
8  margin: 0;
9  padding: 0;
10  background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
11  }
12
13  .calculator-grid {
14    display: grid;
15    justify-content: center;
16    align-content: center;
17    min-height: 100vh;
18    grid-template-columns: repeat(4, 100px);
19    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
20    }
21
22    .calculator-grid > button {
23      cursor: pointer;
24      font-size: 2rem;
25      border: 1px, solid #FFFFFF;
26      outline: none;
27      background-color: rbga(255, 255, 255, 0.75);
28    }
29
30      .calculator-grid > button:hover {
31        background-color: #a9a9a9;
32      }
33
34      .span-two {
35        grid-column: span 2;
36        color: #adf802;
37        background-color: rgba(139, 0, 139, 0.8);
38      }
39
40      .output{
41        grid-column: 1 / -1;
42        background-color: rgba(0, 0, 0, 0.75);
43        display: flex;
44        align-items: flex-end;
45        justify-content: space-around;
46        flex-direction: column;
47        padding: 10px;
48        word-wrap: break-word;
49        word-break: break-all;
50      }
51
52      .output .previous-operand{
53        color: rgba(255,255, 255, 0.75);
54        font-size: 1.5rem;
55      }
56
57      .output .current-operand{
58        color: white;
59        font-size: 2.5rem;
60      }

در این مرحله، استایل و ظاهر ماشین حساب شکل‌ گرفته است. اکنون زمان آن است که با استفاده از جاوا اسکریپت آن را به ماشین حسابی کاربردی تبدیل کرد.

فیلم آموزش کاربردی برنامه نویسی جی کوئری jQuery در فرادرس

کلیک کنید

کدهای جاوا اسکریپت برای ساخت ماشین حساب

ابتدا باید تمام دکمه‌ها و عملیات ماشین حساب انتخاب شوند. می‌توان این کار را با قرارداد چند کلاس در فایل HTML انجام داد. با این‌ حال، از آنجایی‌ که بهتر است کلاس‌های CSS با کلاس‌های جاوا اسکریپت ترکیب نشوند، می‌توان از «ویژگی‌های داده» (Data Attributes) برای انتخاب آن‌ها استفاده کرد.

data-operation برای نشان دادن دکمه‌های عملیات
data-numbersبرای نشان دادن دکمه‌های عددی
data-all-clear برای نشان دادن دکمه All-Clear
data-delete برای نشان دادن دکمه Delete

بر اساس رای ۲۰ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

section github

کامل بهرامی (+)

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

۲ دیدگاه برای «ساخت ماشین حساب با جاوا اسکریپت – از صفر تا صد + کد»

فرانک

۲۷ شهریور، در ۱۴۰۲ ۱۱:۵۳ ق.ظ

سلام من کد های نهاییو زدم اما خروجی وقتی رو عددی کلیک میکنم عدد نمایش داده نمیشود . اصن ر. هر دکمه ای میزنم روی ماشین حساب نمایش داده نمیشه برام دلیلش چیه؟؟؟؟

پاسخ