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

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

جزء 1

جزء 1 من 4:

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

تنزيل المقال

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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:

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

تنزيل المقال

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ظلل كل النص الموجود في صندوق النص السفلي عن طريق وضع مؤشّر الفأرة أعلى الجهة اليسرى من الصندوق ثم سحبه نحو أسفل الجهة اليمنى من الصندوق ليظهر النص كله باللون الأزرق ثم استخدم اختصار لوحة المفاتيح "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 
 >