أنشئ آلة حاسبة باستخدام JavaScript و HTML و CSS في عام 2022
نشرت: 2021-01-02سواء كنت تتعلم لغة برمجة جديدة أو إطار عمل تطوير ، يأتي وقت يتعين عليك فيه العمل في مشروعات واقعية. أثناء تقدمك في الموضوع ، يجب أن تختبر مهاراتك وفهمك للغة. يعد بناء مشروع باستخدام تقنية أو إطار عمل تم تعلمه حديثًا فكرة جيدة. هناك الكثير من الأفكار المتاحة عبر الإنترنت حول ما يجب عليك إنشاؤه بمعرفتك.
تتضمن الاقتراحات الأكثر شيوعًا آلة حاسبة في JavaScript وقائمة المهام. في حين أنها تبدو سهلة ، يمكن أن تكون مهمة عندما تبدأ العمل في هذه المشاريع. هنا ، سنجعل الأمر سهلاً ومنطقيًا ومليئًا بالأحداث بالنسبة لك.
هل نبدأ؟
جدول المحتويات
المنطق قبل كل شيء آخر
عندما تبدأ العمل في مشروع ، سواء كان آلة حاسبة أو قائمة مهام ، فإن أول شيء تحتاج إلى تحديده هو المنطق.
كيف تعمل الآلة الحاسبة؟
- يمكنك إضافة رقمين أو أكثر (أي عدد من الأرقام) باستخدام مفاتيح الأرقام الموجودة في الآلة الحاسبة.
- تقوم بعد ذلك بإجراء وظائف حسابية أساسية ، مثل الجمع والطرح والضرب والقسمة على هذه الأرقام.
- يجب أن تكون الآلة الحاسبة قادرة على الحساب وإعطاء الحلول الصحيحة.
هذا هو أساس أداة الآلة الحاسبة الخاصة بك. لذلك أنت بحاجة إلى لوحة مفاتيح ووحدة عرض وعناصر وظيفية.
سيقيم زر "يساوي" الإجابة بينما سيضمن الزر "مسح" إزالة جميع المدخلات على شاشة الآلة الحاسبة.
تعلم دورات تطوير البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.
معالجة المشروع: مفتاح بناء الكود
بدلاً من التوجه إلى الكود على الفور ، تحتاج إلى معرفة كيفية التعامل مع مشروع جديد. لديك شيئان جاهزان لك: المنطق والفهم الأساسي لتقنيات الواجهة الأمامية ، مثل JavaScript و HTML و CSS.
قبل أن تبدأ في بناء الآلة الحاسبة الخاصة بك باستخدام JavaScript ، فإنك تحتاج إلى ما يلي:
- بيئة تطوير متكاملة ستساعدك في بناء مشروعك باستخدام التقنيات الثلاث.
- خادم محلي سيساعدك في اختبار الرموز الخاصة بك وإزالة الأخطاء. نتيجة لذلك ، ستتمكن من تشغيل التطبيق بشكل أسرع وبسرعة أكبر.
# 1 الشروع في العمل مع HTML
تتمثل الخطوة الأولى في جعل يديك متسخين قليلاً باستخدام HTML بحيث تكون قد صممت مخططًا للآلة الحاسبة.
توجد عشرة أزرار على الآلة الحاسبة ، تتراوح من 0 إلى 9. HTML مسؤول عن إنشاء المفاتيح لكل رقم.
بصرف النظر عن هذا ، ستحتاج إلى استخدام HTML لإنشاء مفاتيح منفصلة للوظائف الحسابية المختلفة وكذلك عند إنشاء آلة حاسبة باستخدام JavaScript .
يمكنك استخدام HTML لإضافة الزر لعرض الأرقام المدخلة أو النتائج وكذلك لمسح العرض.
تعتمد الوحدة المرئية للآلة الحاسبة بشكل كامل على HTML و CSS ، حيث يلزم إنشاء الأزرار ومعرفاتهم باستخدام HTML.
كود Boilerplate
<! DOCTYPE html>
<html lang = ”en”>
<head>
<meta charset = ”UTF-8 ″>
<meta name = ”viewport” content = ”width = device-width، initial-scale = 1.0 ″>
<link rel = ”stylesheet” type = ”text / css” href = ”css / styles.css”>
<title> آلة حاسبة </ title>
</head>
<الجسم>
الكود الفعلي لإنشاء مخطط الآلة الحاسبة
(
<! - آلة حاسبة ->
<div class = ”calculator”>
<! - عرض ->
<نوع الإدخال = ”text” class = ”display” معطل>
<! - مفاتيح ->
<div class = ”keys”>
<! - 4 صفوف من المفاتيح ->
<div class = ”row”>
<button value = ”7 ″> 7 </button>
<button value = ”8 ″> 8 </button>
<button value = ”9 ″> 9 </button>
<button value = ”+” class = ”عامل تشغيل”> + </button>
</div>
<div class = ”row”>
<button value = ”4 ″> 4 </button>
<button value = ”5 ″> 5 </button>
<button value = ”6 ″> 6 </button>
<button value = ”-” class = ”عامل تشغيل”> - </button>
</div>
<div class = ”row”>
<button value = ”1 ″> 1 </button>
<button value = ”2 ″> 2 </button>
<button value = ”3 ″> 3 </button>
<button value = ”*” class = ”عامل تشغيل”> * </button>
</div>
<div class = ”row”>
<button value = ”C” class = ”عامل تشغيل”> C </button>
<button value = ”0 ″> 0 </button>
<button value = ”/” class = ”عامل تشغيل”> / </button>
<button value = ”=” class = ”عامل تشغيل”> = </button>
</div>
</div>
</div>
<! - ينتهي جسم الآلة الحاسبة ->
<script type = ”text / javascript” src = ”js / script.js”> </script>
</body>
</html>
تعلم: أفضل 20 مشروع جافا سكريبت في جيثب للمبتدئين
# 2 النمط مع CSS
بمجرد تحديد بنية الآلة الحاسبة ، ستستخدم عناصر CSS المضمنة لتصميم الآلة الحاسبة وجعلها جذابة بصريًا وسهلة الاستخدام.
في حين أن CSS المضمنة ممتازة عندما يتعلق الأمر بتصميم وتصميم مظهر التطبيق الخاص بك ، فقد لا يكون صديقًا لكبار المسئولين الاقتصاديين. بصرف النظر عن هذا ، يمكنك أيضًا استخدام عناصر CSS الخارجية عن طريق وضع علامات عليها في نفس الدليل الجذر. يمكنك أيضًا استخدام عناصر CSS الداخلية أو المضمنة الموجودة داخل علامات <style> </style> داخل قسم الرأس.
هنا ، سنأخذك عبر الكود الذي يمكنك استخدامه لتصميم الآلة الحاسبة الخاصة بك.
(يمكنك إنشاء أشكال مختلفة من هذا الرمز إذا كنت تريد.)
/ * الأنماط الشائعة * /
* {
حشوة: 0؛
الهامش: 0؛
}
الجسم {
العرض: 100vw ؛
الارتفاع: 100 فولت
إخفاء الفائض؛
عرض: فليكس ؛
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
لون الخلفية: # 222831 ؛
عائلة الخطوط: sans-serif ؛
}
/ * نهاية الأنماط الشائعة * /
/* آلة حاسبة */
.آلة حاسبة {
العرض: 300 بكسل ؛
الحشو السفلي: 15 بكسل ؛
نصف قطر الحدود: 7 بكسل ؛
لون الخلفية: # 000 ؛
مربع الظل: 5 بكسل 8 بكسل 8 بكسل -2 بكسل rgba (0 ، 0 ، 0 ، 0.61) ؛
}
/ * نهاية نمط الآلة الحاسبة * /
/* عرض */
.عرض {
العرض: 100٪؛
الارتفاع: 80 بكسل ؛
الحدود: لا يوجد ؛
تحجيم الصندوق: مربع الحدود ؛
الحشو: 10 بكسل ؛
حجم الخط: 2rem ؛
لون الخلفية: # 00ff44 ؛
اللون: # 000 ؛
محاذاة النص: صحيح ؛
نصف قطر أعلى يسار الحد: 7 بكسل ؛
نصف قطر أعلى يمين الحد: 7 بكسل ؛
}
/ * نهاية نمط العرض * /
/* صف */
.صف {
عرض: فليكس ؛
تبرير المحتوى: مسافة بين ؛
}
/ * نهاية نمط الصف * /
/* زر */
زر {
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
نصف قطر الحدود: 50٪ ؛
الحدود: لا يوجد ؛
المخطط التفصيلي: لا شيء ؛
حجم الخط: 1.5rem ؛
لون الخلفية: # 222 ؛
اللون: #fff ؛
الهامش: 10 بكسل ؛
}
الزر: تحوم {
المؤشر: المؤشر.
}
/ * نهاية نمط الزر * /
/* المشغل أو العامل */
.المشغل أو العامل {
لون الخلفية: # 00ff44 ؛
اللون: # 000 ؛
}
/ * نهاية نمط المشغل * /
# 3 إضافة الوظائف باستخدام JavaScript
لقد ناقشنا الآن بالتفصيل الجوانب المرئية لبناء آلة حاسبة باستخدام JavaScript . لنقم ببعض البرمجة النصية للمساعدة في جعل الآلة الحاسبة عملية وتنفيذ مهام الحساب. سوف نفهم الخطوات القليلة التي يتم تضمينها في بناء كود JS ، والتي ستساعدك على تطوير الكود بشكل أسرع.
- ستحتاج إلى استدعاء علامات HTML التي قمت بإنشائها للوظائف الفردية باستخدام JavaScript. ستستخدم المحددات لاستدعاء كل من هذه المدخلات وتخزينها في متغير. ستحتاج إلى متغير لكل دالة. على سبيل المثال ، هناك متغير منفصل للعرض والأرقام ووظيفة المقاصة وكذلك يساوي الوظيفة. يمكن استخدام الدالة getElementbyID () في هذه الحالة.
- لنفترض أنك تريد إجراء عملية حسابية بسيطة لـ 20 + 30 ، ستتصل بـ 20 أولاً باستخدام الطريقة المذكورة أعلاه. قبل استدعاء 30 والوظيفة الحسابية ، ستحتاج إلى تخزين الرقم 20 الذي كان يسمى سابقًا في مكان ما. يجب أن يوفر الكود مساحة للتخزين المؤقت للأرقام لتسهيل العمليات الحسابية. ستحتفظ المصفوفة الفارغة بالرقم كسلسلة. بمجرد إضافة الرقم الآخر والدالة الحسابية ، باستخدام EVAL () ، يمكنك تقييم الأرقام والحصول على الإجابة.
- عند النقر فوق الأزرار الموجودة في الآلة الحاسبة ، فأنت تريد بعض النتائج ، إما يتم عرضها أو تقييمها. لهذا الغرض ، يجب عليك إضافة مستمعين للأحداث إلى التعليمات البرمجية الخاصة بك. بهذه الطريقة ، ستستمع الأزرار إلى النقرة. عند إضافة وظائف إلى مستمعي الأحداث ، سيقومون تلقائيًا بتنفيذ المهمة على صوت النقر.
- يجب أن ترجع وحدة العرض قيمة الزر الذي تنقر عليه. يمكنك استخدام الكائن event.target ، لأنه سيعيد قيمة العنصر الذي وقع عليه الحدث. على سبيل المثال ، تريد عرض الرقم "1" بمجرد النقر فوقه. لهذا ، ستحتاج إلى تخزين الرقم في شكل متغير. باستخدام وظيفة "if" ، ستقارن المتغير الحالي لتحديد ما إذا كان صفرًا أم لا. إذا كانت صفرًا ، فستلحقها بسلسلة فارغة بحيث لا يبدأ أي رقم بصفر. أخيرًا ، ستضيف محتويات المفتاح "1" إلى متغير العرض. نتيجة لذلك ، بمجرد تشغيل مفتاح الرقم ، سترى المحتويات في مربع العرض.
- أخيرًا ، تحتاج إلى إنشاء الوظيفة التي ستساعد في تطبيق العمليات الحسابية على الأرقام المعروضة. تأكد من أن الآلة الحاسبة في JavaScript يمكنها إجراء العمليات الحسابية بسهولة. لتمكين هذه الوظيفة ، يمكنك استخدام مجموعة من التركيبات والطرق. لقد حددنا رمز عناصر JavaScript أدناه لإطلاعك.
// حدد جميع الأزرار
أزرار const = document.querySelectorAll ('button') ؛
// حدد عنصر <input type = ”text” class = ”display” المعطل>
عرض const = document.querySelector ('. display') ؛
// إضافة eventListener إلى كل زر
الأزرار لكل (وظيفة (زر) {
button.addEventListener ("انقر" ، احسب) ؛
}) ؛
// حساب الوظيفة
دالة حساب (حدث) {
// قيمة الأزرار التي تم النقر عليها الحالية
const clickedButtonValue = event.target.value ؛
إذا (clickedButtonValue === '=') {
// تحقق مما إذا كانت الشاشة ليست فارغة ، ثم قم بالحساب فقط
إذا (display.value! == ”) {
// احسب وأظهر الإجابة للعرض
display.value = Eval (display.value) ؛
}
} else if (clickedButtonValue === 'C') {
// امسح كل شيء معروض
display.value = ”؛
} آخر {
// وإلا اربطها على الشاشة
display.value + = clickedButtonValue ؛
}
}
يجب أن تقرأ: شرح معمارية جافا ومكوناتها
تلخيص لما سبق
سواء كنت تقوم ببناء آلة حاسبة في JavaScript أو تعمل في مشروع أكثر تعقيدًا ، فإن الفكرة هي تقسيم المحتويات بطريقة منطقية ومفسرة. سيساعدك هذا في اشتقاق البنية الصحيحة وسيؤدي إلى تطبيق ويب سلس. بدلاً من البدء بالبرمجة مباشرة ، حاول أن تفهم الغرض الحقيقي من التقنية التي تستخدمها ، وسوف تقودك إلى الكود.
إذا كنت مهتمًا بمعرفة المزيد حول Java ، وتطوير البرامج المتكاملة ، فراجع برنامج upGrad & IIIT-B التنفيذي PG في تطوير البرمجيات - التخصص في تطوير المكدس الكامل المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، أكثر من 9 مشاريع ، ومهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.
