كيفية إنشاء آلة حاسبة باستخدام لغة اتش تي ام ال

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

جزء 1

جزء 1 من 4:

فهم الرموز البرمجية

تنزيل المقال

1
افهم وظيفة كل دالة في لغة اتش تي ام ال. تتكون الرموز البرمجية التي ستستخدمها لإنشاء الآلة الحاسبة من عدّة أجزاء لتراكيب معيّنة تعمل مع بعضها لتعريف عناصر المستند المختلفة. انقر هنا للحصول على شرح لكيفية التآلف مع هذه العملية أو أكمل قراءة المقال لتعرف وظيفة كل سطر في الرمز البرمجي الذي ستستخدمه لإنشاء الآلة الحاسبة.
- html: وظيفة هذا الجزء من التركيب هي إعلام بقية المستند بأن اللغة المستخدمة هي لغة اتش تي ام ال حيث توجد العديد من لغات البرمجة التي يمكن استخدامها ووظيفة الوسم <html> هي إعلام بقية المستند أن لغة البرمجة المستخدمة هي لغة اتش تي ام ال. ^{[١]Xمصدر بحثي}
- head: يخبر هذا الجزء المستند أن كل البيانات الموجودة تحته عبارة عن بيانات تصف بيانات أخرى، أو ما يُعرف باسم "البيانات الفوقية". يُستخدم الوسم <head> عادةً لتعريف عناصر تنسيق في المستند مثل العناوين والترويسات وما إلى ذلك. فكّر في هذا الوسم على أنه مظلّة يتم تحتها تعريف بقيّة الرموز البرمجية.^{[٢]Xمصدر بحثي}
- title: هذا هو مكان تحديد عنوان المستند وتستخدم هذه الخاصية لتحديد عنوان المستند عند فتحه في متصفح اتش تي ام ال.
- body bgcolor= "#": تحدّد هذه الخاصية لون خلفية الرموز البرمجية وجسم الصفحة ويوافق الرقم المكتوب بعد الرمز # لونًا محددًا بشكل مسبق.
- text= "": تحدّد الكلمة التي سيتم كتابتها بين علامتي الاقتباس لون النص في المستند.
- form name="": تحدد هذه الخاصية اسم نموذج يُستخدم لبناء هيكل لما يليه من بيانات بُناءً على معرفة لغة جافا سكربت لمعنى اسم النموذج، كاسم النموذج الذي سنستخدمه مثلًا "calculator" مما سيؤدّي إلى إنشاء هيكل محدد للمستند.^{[٣]Xمصدر بحثي}
- input type="": هذا هو الجزء الأهم من الرموز البرمجية حيث تخبر خاصية نوع الدخل "input type" المستند بنوعية النص الموجود في بقية الأقواس. يمكن أن تكون هذه القيم على سبيل المثال نص أو كلمة مرور أو زر (كما هو الحال في الآلة الحاسبة التي سننشئها) أو غير ذلك.^{[٤]Xمصدر بحثي}
- value="": يخبر هذا الأمر المستند بمحتويات نوع الدخل المحدد أعلاه وتكون المحتويات في الآلة الحاسبة التي نبرمجها أرقام (1-9) أو عمليات حسابية (+ أو - أو * أو / أو =).^{[٥]Xمصدر بحثي}
- onClick="": يصف هذا التركيب حدثًا ما مما يخبر المستند بضرورة حدوث شيء معين عند النقر على الزر. في حالة الآلة الحاسبة، وظيفة هذا التركيب هو تعبير كل زر في الآلة الحاسبة عن القيمة المكتوبة عليه، لذا فإنا سنكتب زر الرقم "6" بالشكل التالي document.calculator.ans.value+='6' بين علامتي الاقتباس.^{[٦]Xمصدر بحثي}
- br: يؤدّي هذا الوسم إلى إنشاء فاصل أسطر في المستند ليظهر النص الذي يليه في سطر جديد بعد النص السابق.^{[٧]Xمصدر بحثي}
- /form و /body و /html: تقوم هذه الأوامر بإنهاء الأوامر المماثلة التي تم بدؤها من قبل.^{[٨]Xمصدر بحثي}

جزء 2

جزء 2 من 4:

الرموز البرمجية لإنشاء آلة حاسبة بسيطة في لغة اتش تي ام ال

تنزيل المقال

ظلل كل النص الموجود في صندوق النص السفلي عن طريق وضع مؤشّر الفأرة أعلى الجهة اليسرى من الصندوق ثم سحبه نحو أسفل الجهة اليمنى من الصندوق ليظهر النص كله باللون الأزرق ثم استخدم اختصار لوحة المفاتيح "Command+C" في نظام ماكنتوش أو "Ctrl+C" في نظام ويندوز لنسخ الرموز البرمجية.

<html><head><title>آلة حاسبة بلغة اتش تي ام ال</title></head><body bgcolor= "#000000" text= "gold"><form name="calculator" ><input type="button" value="1" onClick="document.calculator.ans.value+='1'"><input type="button" value="2" onClick="document.calculator.ans.value+='2'"><input type="button" value="3" onClick="document.calculator.ans.value+='3'"><input type="button" value="4" onClick="document.calculator.ans.value+='4'"><input type="button" value="5" onClick="document.calculator.ans.value+='5'"><input type="button" value="6" onClick="document.calculator.ans.value+='6'"><input type="button" value="7" onClick="document.calculator.ans.value+='7'"><input type="button" value="8" onClick="document.calculator.ans.value+='8'"><input type="button" value="9" onClick="document.calculator.ans.value+='9'"><input type="button" value="-" onClick="document.calculator.ans.value+='-'"><input type="button" value="+" onClick="document.calculator.ans.value+='+'"><input type="button" value="*" onClick="document.calculator.ans.value+='*'"><input type="button" value="/" onClick="document.calculator.ans.value+='/'"><input type="button" value="0" onClick="document.calculator.ans.value+='0'"><input type="reset" value="إعادة الضبط"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>الحل هو <input type="textfield" name="ans" value=""></form></body></html>

جزء 3

جزء 3 من 4:

إنشاء الآلة الحاسبة

تنزيل المقال

1
افتح محرر نصوص على جهاز الكمبيوتر. هناك الكثير من البرامج التي يمكن استخدامها، إلا أننا ننصح باستخدام برنامج تيكست إديت أو برنامج نوت باد لأنها برامج سهلة الاستخدام وذات جودة مرتفعة.^{[٩]Xمصدر بحثي}^{[١٠]Xمصدر بحثي}
- على نظام ماكنتوش، انقر على أيقونة العدسة المُكبّرة الظاهرة أعلى الجهة اليمنى من الشاشة لفتح تطبيق سبوت لايت ثم اكتب تيكست إديت وانقر على اسم التطبيق الذي سيظهر باللون الأزرق.
- على نظام ويندوز، افتح قائمة ابدأ الموجودة أسفل الجهة اليسرى من الشاشة ثم اكتب "نوت باد" في شريط البحث وانقر على أيقونة البرنامج التي ستظهر في شريط النتائج الأيمن.
2
الصق الرموز البرمجية خاصة الآلة الحاسبة في المستند.
- على نظام ماكنتوش، انقر بداخل جسم المستند واستخدم اختصار لوحة المفاتيح "Command+V". ستحتاج بعد ذلك إلى لنقر على خيار "تنسيق" الموجود أعلى الشاشة ثم النقر على خيار "التحويل إلى نص عادي" بعد لصق الرموز البرمجية.^{[١١]Xمصدر بحثي}
- على نظام ويندوز، انقر بداخل جسم المستند واستخدم اختصار لوحة المفاتيح "Ctrl+V".
افعل ذلك عن فتح القائمة "ملف" الموجودة أعلى الجهة اليسرى من النافذة ثم النقر على خيار "حفظ باسم..." على نظام ويندوز أو "حفظ..." على نظام ماكنتوش من القائمة المنسدلة.
اكتب اسم الملف متبوعًا بالصيغة ".html" في نافذة "حفظ باسم..." ثم انقر على الخيار "حفظ". يمكنك مثلًا تسمية الملف "MyFirstCalculator.html"

جزء 4

جزء 4 من 4:

استخدام الآلة الحاسبة

تنزيل المقال

افعل ذلك عن طريق كتابة اسم الملف في تطبيق سبوت لايت أو شريط بحث قائمة ابدأ بالطريقة الموضحة في الخطوة السابقة، علمًا بأنك لن تحتاج لكتابة الامتداد "html".
سيقوم متصفّح الإنترنت الافتراضي بفتح الآلة الحاسبة في صفحة ويب جديدة.
ستظهر إجابة العمليات الحسابية التي تجريها في شريط النتائج.