كيفية إنشاء آلة حاسبة في جافا سكريبت: دليل خطوة بخطوة

جافا سكريبت هي واحدة من لغات البرمجة الأكثر شعبية في تطوير الشبكة. يمكنك استخدامه لإنشاء عناصر تفاعلية وتطبيقات وظيفية على صفحات الويب. الآلة الحاسبة هي أحد العناصر التي تستخدم غالبا لحل المشكلات الرياضية البسيطة.

في هذا الدليل التفصيلي ، سننظر في كيفية إنشاء الآلة الحاسبة الخاصة بك في جافا سكريبت. سوف نستخدم وظائف اللغة الأساسية مثل التعامل مع الحدث ، والعمل مع عناصر هتمل ، والعمليات الحسابية.

أولا ، سنقوم بإنشاء ترميز هتمل بسيط لآلة حاسبة لدينا. ثم سنضيف شفرة جافا سكريبت التي ستعالج إدخال المستخدم وإجراء العمليات الحسابية اللازمة. وأخيرا ، نحن نمط آلة حاسبة لدينا باستخدام كس لجعلها تبدو أكثر جاذبية ومريحة للاستخدام.

1. الخطوة 1: إعداد الآلة الحاسبة
2. الخطوة 2: إنشاء بنية هتمل
3. الخطوة 3: كتابة شفرة جافا سكريبت

الخطوة 1: إعداد الآلة الحاسبة

قبل البدء في إنشاء آلة حاسبة في جافا سكريبت ، تحتاج إلى إكمال عدد من الخطوات التحضيرية.

1. إنشاء ملف أتش تي أم أل جديد: للبدء ، تحتاج إلى إنشاء ملف أتش تي أم أل الجديد الذي سيستضيف الآلة الحاسبة.
2. لتحديد المسار إلى ملف البرنامج النصي.
4. .أدفنتليستينر()

في جافا سكريبت.

بعد الانتهاء من جميع الخطوات المذكورة أعلاه ، ستكون الآلة الحاسبة جاهزة للاستخدام. ومع ذلك ، من أجل تشغيلها الكامل ، من الضروري تنفيذ منطق إجراء العمليات الحسابية ومعالجة الأرقام المدخلة.

الخطوة 2: إنشاء بنية هتمل

بعد أن قمنا بتوصيل ملف جافا سكريبت النصي في تخطيطنا ، يمكننا البدء في إنشاء بنية هتمل للحاسبة. في هذه الخطوة ، سنضيف العناصر والعلامات الضرورية التي ستسمح للمستخدم بالتفاعل مع الآلة الحاسبة.

بادئ ذي بدء ، دعنا ننشئ حاوية يتم فيها وضع الآلة الحاسبة بأكملها:

سنضع عناصر مختلفة داخل الحاوية: أزرار ، حقل إدخال ، إلخ. لنبدأ بإنشاء جدول بأزرار بأرقام وعمليات:

7

8

9

+

4

5

6

-

1

2

3

*

0

.

=

/

وبالتالي ، قمنا بإنشاء جدول يحتوي فيه كل صف على 4 خلايا زر بأرقام ومشغلات. يتم لف كل زر في علامة ، والتي سوف تسمح لنا للقبض على النقر على زر باستخدام جافا سكريبت.

لعرض النتيجة وإدخال الأرقام ، أضف حقل إدخال وزر " مسح:

واضح

يحتوي حقل الإدخال على السمة المعطلة بحيث لا يمكن للمستخدم إدخال القيم يدويا. سيتم استخدام زر مسح لإعادة تعيين جميع القيم وبدء عملية حسابية جديدة.

الآن لدينا هيكل هتمل جاهز ، ويمكننا البدء في إضافة وظائف إلى الأزرار باستخدام جافا سكريبت.

الخطوة 3: كتابة شفرة جافا سكريبت

الآن بعد أن أنشأنا الهيكل الأساسي للآلة الحاسبة الخاصة بنا ، فقد حان الوقت لكتابة شفرة جافا سكريبت التي ستعالج القيم التي أدخلها المستخدم وإجراء العمليات الحسابية اللازمة.

1. أولا نحن بحاجة إلى الوصول إلى جميع عناصر هتمل اللازمة. Для этого мы используем методы getElementById() и querySelector(). Позже мы будем использовать эти элементы для отображения результатов и обработки событий.

let firstOperandInput = document.getElementById(‘firstOperand’);

let secondOperandInput = document.getElementById(‘secondOperand’);

let operatorSelect = document.getElementById(‘operator’);

let calculateButton = document.getElementById(‘calculateButton’);