السلام عليكم ورحمة الله وبركاته
متابعينا الكرام تحية طيبة للجميع
جئتكم اليوم لنصمم سويًا أداتنا الخاصة بلغتي html و java script لتقوم بتحويل درجاة الحرارة من سيليزي إلى فهرنهايت والعكس .
الغرض من إنشاء الأداة هو التعلم فحسب ... فهناك العديد والعديد من البرامج التي تقوم بذلك في شتى أنظمة التشغيل.
سأضع لكم الكود الخاص بإنشاء الأداة مع شرح الكود سطرًا سطرًا , وفي ختام المشاركةستجدون الأداة قابلة للتجربة الحية.
<font size="16">
<!-- تعيين حجم الخط إلى 16-->
<h1><a href="#">محول الوحدات الحرارية </a></h1>
<!-- إنشاء عنوان للأداة , وهو عبارة عن رأس بداخله رابط فارغ ليسهل على قارئات الشاشة الوصول إليه -->
<br />
<!-- سطر جديد -->
<label>فهرنهايتي إلى سيليزي <input type="radio" id="r1" name="rad" checked></label><br />
<!-- أنشأنا زر من نوع أزرار الراديو ووضعناه بداخل وسم التسميات label , ويحتوي كود إنشاء أزرار الراديو على مجموعة من الخواص.
الخاصية type وتعني نوع , وتحمل القيمة radio , أي أن هذا الكائن سيكون من نوع أزرار الراديو
id , وتعني معرف , أو هوية , ونستخدمها لاحقًا لربط هذا الزر بأوامر أخرى حيث يكون المعرف فريد من حيث المسمى ونستخدمه للإشارة على الزر
قيمة المعرف هي r1 ويمكن إعطاؤها أي قيمة أخرى.
name:وتعني اسم , ويمكنك إعطاؤه أي قيمة تشاء بين علامتي التنصيص
checked: تعني هذه الخاصية أن هذا الزر سيكون هو الزر الافتراضي المحدد , وقيمة هذه الخاصية true حيث يتم اعتبار هذه القيمة تلقائيًا ولا داعي لكتابتها
تم وضع الزر داخل الوسم <label> وذلك ليتم نطق اسم الزر بمجرد المرور عليه من خلال قارئ الشاشة.
-->
<label>سيليزي إلى فهرنهايتي <input type="radio" id="r2" name="rad"></label><br />
<!-- نفس الكود السابق بالضبط , فنحن نريد إنشاء زرًأ آخرًا لتخيير المستخدم ما إذا كان يريد التحويل من فهرنهايتي إلى سيليزي أو العكس
لكن في هذا الكود تم تغيير قيمة المعرف id إلى قيمة أخرى وهي r2 , وذلك للتمييز بينه وبين الزر الذي قبله
كما أننا لم نضف الخاصية checked فنحن أردنا أن يكون الزر المحدد هو الأول فقط
أما الخاصية name فبقيت على نفس القيمة , وهي حيلة برمجية لإلغاء التحديد عن أحد الزرين في حال تم التحديد على الآخر
وأخيرًأ بقي النوع type على نفس القيمة
-->
<label>ادخل القيمة المراد تحويلها: <input type="text" id="num" /></label>
<!-- في السطر السابقي أنشأنا مربع للكتابة ووضعناه بداخل الوسم <label>وذلك ليقوم قارئ الشاشة بقراءة المطلوب كتابته في المربع بمجرد المرور عليه
يحمل كود إنشاء مربعات التحرير عددًا من الخصائص هي:
type: وتعني النوع , وتحمل هذه الخاصية القيمة text , ويعني ذلك أن هذا العنصر سيكون مربعًأ لكتابة النصوص.
id: المعرف: وقد تحدثنا عنه في الأكواد السابقة وقلنا بأنه يستخدم للتمييز بين العناصر والإشارة إليها أثناء ربطها بالأوامر , وقد أعطيناها القيمة num.
-->
<br />
<!-- سطر جديد -->
<button onclick="convertor()">تحويل</button>
<!-- الأمر button يستخدم لإنشاء الأزرار , وقد استخدمنا أثناء إنشاء الزر خاصية واحدة تسمى onclick
وتستخدم هذه الخاصية لربط كائن ما بأمر معين , إما أن يكون هذا الأمر مدمجًا , أي أننا لا نحتاج إلى إنشاؤه , أو يكون أمر كتبناه أو سنكتبه في صفحتنا حيث يتم استدعاء الأمر مباشرة فور الضغط على هذا الكائن , وفي حالتنا هذه فالكائن هو الزر الذي نحن في طور إنشائه.
تكتب الأوامر سواء كانت مدمجة أو نحن من أنشأها... تكتب هذه الأوامر بشقيها كقيمة للخاصية onclick
ولوضع قيمة لأي خاصية من خواص html نكتبها أولًا بداخل الوسم ثم نتبعها بعلامة يساوي = ثم نكتب اسم الأمر بين علامتي تنصيص "
وفي حالتنا هذه فالأمر القابع بين علامتي التنصيص نحن من سيكتبه وسيسميه بالاسم convertor() , فهذا الأمر لن تجده في صفحات أخرى.
تم وضع اسم الزر بين كود بدء إنشاء الزر وكود إنهاء إنشاء الزر
-->
<p id="result"></p>
<!-- الكود السابق يقوم بإنشاء كائن من نوع الفقرات.
وهذا الكائن في حالتنا هذه قد وضعناه فارغًا , فنحن سنستخدمه فيما بعد لإظهار نتيجة التحويل
تم إعطاء هذا الكائن خاصية واحدة فقط وهي المعرف id , وقد أعطيناه القيمة result لنتمكن من التحكم بالكائن وإضافة النتيجة لاحقًا
-->
<!-- في السطر التالي سنكتب تعليمات java script الخاصة بكل كائن من كائنات html التي أنشأناها -->
<script type-text="javascript">
function convertor() {
// سطر إنشاء الأمر المسمى بconvertor والذي ربطناه سابقًا بالزر الخاص بالتحويل
var num = Number(document.getElementById("num").value)
/* أنشأنا متغيرًا وأسندنا إليه كائنًا
هذا الكائن هو عبارة عن مربع التحرير الذي أنشأناه سابقًا
وقد استخدمنا الأمر document.getElementById("num") لجلب هذا الكائن , حيث أن النص الموجود بين علامتي التنصيص هو عبارة عن المعرف الخاص بمربع التحرير , وتلاحظوا أننا بعد علامة إغلاق القوس الهلالي , أي علامة إغلاق الدالة , قد وضعنا نقطة ثم كتبنا الكلمة value
ويعني ذلك أننا لم نجلب كافة خواص مربع التحرير , بل اكتفينا فقط بجلب النص الذي سيكتب داخل مربع التحرير
والأمر document.getElementById("num").value قد وضعناه بين أحشاء الأمر Number كأحد معاملاته
وقد قمنا بذلك لتحويل الصيغة النصية إلى صيغة رقمية للتعامل معها لاحقًا
*/
var r1 = document.getElementById("r1")
/* أنشأنا متغيرًأ آخرًا وأسندنا إليه زر الراديو الأول بأكمله
فباستخدام الأمر document.getElementById("r1") تم التعرف على زر الراديو الذي أنشأناه سابقًا من خلال المعرف id الخاص به وهو بطبيعة الحال r1 الموجود بين علامتي التنصيص
*/
var r2 = document.getElementById("r2")
// نفس الكود السابق بالضبط مع تغيير اسم المتغير ومعرف id للزر , حيث من خلال السطر السابق استدعينا الزر الثاني
var rresult = document.getElementById("result")
// نفس الكودين السابقين ,مع تغيير اسم المتغير ومعرف id , وهنا سيجلب الكود كائن الفقرات الذي يحمل المعرف result
if (r1.checked == true) {
/* هذه جملة شرطية نتحقق بها إذا كان الزر الأول هو الزر المحدد فقم بالأوامر التالية */
result.innerHTML = (5/9)*(num-32);
/* السطر السابق سيعمل في حالة تحقق الشرط
ويقوم هذا الكود بعملية حسابية تكون قيمة مربع التحرير num أحد أطرافها
فهناك معادلة شهيرة تقول بأننا إذا أردنا تحويل الفهرنهايتي إلى سيليزي فسنعمل التالي
(5قسمة 9) مضروبة في (الدرجة الفهرنهايتية ناقص 32 )
وفي كودنا السابق قيمة الدرجة الفهرنهايتية سيكتبها المستخدم للأداة في مربع التحرير وسيقوم الكود بإدخال قيمة مربع التحرير في المعادلة
مع ملاحظة أن هذه المعادلة لا دخل لها في البرمجة , فقط هي توظيف للمعرفة العامة في عملنا
ناتج المعادلة سيتم كتابته في الفقرة التي معرفها result وستظهر للمستخدم مباشرة عند الضغط على الزر المربوط بالأمر */
} else if (r2.checked == true) {
/* عبارة else if تعني باللغة العربية أما إذا , وهذه الجملة هي ملحقة بالجملة الشرطية السابقة
وتعني باللغة العربية أما إذا كان الزر الثاني هو الزر المحدد فحينها سيكون جواب الشرط أوامرًأ يتم تنفيذها */
result.innerHTML = num*(9/5)+32;
/* هذا هو جواب الشرط الثاني الذي يقتضي تحديد الزر الثاني , وهو نفسه جواب الشرط الأول , لكن هنا قمنا بقلب المعادلة ليتم تحويل السيليزي إلى فهرنهايتي
وأيضًأ مربع التحرير هو طرف في المعادلة
تقول المعادلة بأن القيمة الفهرنهايتية تساوي القيمة السيليزية مضروبة في (9 مقسومة على 5) مضاف إليها 32
وعلى غرار الجواب السابق فسيتم تعويض قيمة الدرجة السيليزية من خلال الرقم الذي سيكتبه مستخد الأداة داخل مربع التحرير , وكذلك على غرار الجواب السابق سيتم إظهار القيمة في كائن الفقرات الذي يحمل المعرف result */
}
}
</script>
<!-- نهاية تعليمات java script -->
</font>
<!-- نهاية الكود الخاص بتغيير حجم الخط , فكل النصوص المكتوبة بين كود البداية وكود النهاية سيكون حجم خطه هو 16 -->
متابعينا الكرام تحية طيبة للجميع
جئتكم اليوم لنصمم سويًا أداتنا الخاصة بلغتي html و java script لتقوم بتحويل درجاة الحرارة من سيليزي إلى فهرنهايت والعكس .
الغرض من إنشاء الأداة هو التعلم فحسب ... فهناك العديد والعديد من البرامج التي تقوم بذلك في شتى أنظمة التشغيل.
سأضع لكم الكود الخاص بإنشاء الأداة مع شرح الكود سطرًا سطرًا , وفي ختام المشاركةستجدون الأداة قابلة للتجربة الحية.
الكود
<font size="16">
<!-- تعيين حجم الخط إلى 16-->
<h1><a href="#">محول الوحدات الحرارية </a></h1>
<!-- إنشاء عنوان للأداة , وهو عبارة عن رأس بداخله رابط فارغ ليسهل على قارئات الشاشة الوصول إليه -->
<br />
<!-- سطر جديد -->
<label>فهرنهايتي إلى سيليزي <input type="radio" id="r1" name="rad" checked></label><br />
<!-- أنشأنا زر من نوع أزرار الراديو ووضعناه بداخل وسم التسميات label , ويحتوي كود إنشاء أزرار الراديو على مجموعة من الخواص.
الخاصية type وتعني نوع , وتحمل القيمة radio , أي أن هذا الكائن سيكون من نوع أزرار الراديو
id , وتعني معرف , أو هوية , ونستخدمها لاحقًا لربط هذا الزر بأوامر أخرى حيث يكون المعرف فريد من حيث المسمى ونستخدمه للإشارة على الزر
قيمة المعرف هي r1 ويمكن إعطاؤها أي قيمة أخرى.
name:وتعني اسم , ويمكنك إعطاؤه أي قيمة تشاء بين علامتي التنصيص
checked: تعني هذه الخاصية أن هذا الزر سيكون هو الزر الافتراضي المحدد , وقيمة هذه الخاصية true حيث يتم اعتبار هذه القيمة تلقائيًا ولا داعي لكتابتها
تم وضع الزر داخل الوسم <label> وذلك ليتم نطق اسم الزر بمجرد المرور عليه من خلال قارئ الشاشة.
-->
<label>سيليزي إلى فهرنهايتي <input type="radio" id="r2" name="rad"></label><br />
<!-- نفس الكود السابق بالضبط , فنحن نريد إنشاء زرًأ آخرًا لتخيير المستخدم ما إذا كان يريد التحويل من فهرنهايتي إلى سيليزي أو العكس
لكن في هذا الكود تم تغيير قيمة المعرف id إلى قيمة أخرى وهي r2 , وذلك للتمييز بينه وبين الزر الذي قبله
كما أننا لم نضف الخاصية checked فنحن أردنا أن يكون الزر المحدد هو الأول فقط
أما الخاصية name فبقيت على نفس القيمة , وهي حيلة برمجية لإلغاء التحديد عن أحد الزرين في حال تم التحديد على الآخر
وأخيرًأ بقي النوع type على نفس القيمة
-->
<label>ادخل القيمة المراد تحويلها: <input type="text" id="num" /></label>
<!-- في السطر السابقي أنشأنا مربع للكتابة ووضعناه بداخل الوسم <label>وذلك ليقوم قارئ الشاشة بقراءة المطلوب كتابته في المربع بمجرد المرور عليه
يحمل كود إنشاء مربعات التحرير عددًا من الخصائص هي:
type: وتعني النوع , وتحمل هذه الخاصية القيمة text , ويعني ذلك أن هذا العنصر سيكون مربعًأ لكتابة النصوص.
id: المعرف: وقد تحدثنا عنه في الأكواد السابقة وقلنا بأنه يستخدم للتمييز بين العناصر والإشارة إليها أثناء ربطها بالأوامر , وقد أعطيناها القيمة num.
-->
<br />
<!-- سطر جديد -->
<button onclick="convertor()">تحويل</button>
<!-- الأمر button يستخدم لإنشاء الأزرار , وقد استخدمنا أثناء إنشاء الزر خاصية واحدة تسمى onclick
وتستخدم هذه الخاصية لربط كائن ما بأمر معين , إما أن يكون هذا الأمر مدمجًا , أي أننا لا نحتاج إلى إنشاؤه , أو يكون أمر كتبناه أو سنكتبه في صفحتنا حيث يتم استدعاء الأمر مباشرة فور الضغط على هذا الكائن , وفي حالتنا هذه فالكائن هو الزر الذي نحن في طور إنشائه.
تكتب الأوامر سواء كانت مدمجة أو نحن من أنشأها... تكتب هذه الأوامر بشقيها كقيمة للخاصية onclick
ولوضع قيمة لأي خاصية من خواص html نكتبها أولًا بداخل الوسم ثم نتبعها بعلامة يساوي = ثم نكتب اسم الأمر بين علامتي تنصيص "
وفي حالتنا هذه فالأمر القابع بين علامتي التنصيص نحن من سيكتبه وسيسميه بالاسم convertor() , فهذا الأمر لن تجده في صفحات أخرى.
تم وضع اسم الزر بين كود بدء إنشاء الزر وكود إنهاء إنشاء الزر
-->
<p id="result"></p>
<!-- الكود السابق يقوم بإنشاء كائن من نوع الفقرات.
وهذا الكائن في حالتنا هذه قد وضعناه فارغًا , فنحن سنستخدمه فيما بعد لإظهار نتيجة التحويل
تم إعطاء هذا الكائن خاصية واحدة فقط وهي المعرف id , وقد أعطيناه القيمة result لنتمكن من التحكم بالكائن وإضافة النتيجة لاحقًا
-->
<!-- في السطر التالي سنكتب تعليمات java script الخاصة بكل كائن من كائنات html التي أنشأناها -->
<script type-text="javascript">
function convertor() {
// سطر إنشاء الأمر المسمى بconvertor والذي ربطناه سابقًا بالزر الخاص بالتحويل
var num = Number(document.getElementById("num").value)
/* أنشأنا متغيرًا وأسندنا إليه كائنًا
هذا الكائن هو عبارة عن مربع التحرير الذي أنشأناه سابقًا
وقد استخدمنا الأمر document.getElementById("num") لجلب هذا الكائن , حيث أن النص الموجود بين علامتي التنصيص هو عبارة عن المعرف الخاص بمربع التحرير , وتلاحظوا أننا بعد علامة إغلاق القوس الهلالي , أي علامة إغلاق الدالة , قد وضعنا نقطة ثم كتبنا الكلمة value
ويعني ذلك أننا لم نجلب كافة خواص مربع التحرير , بل اكتفينا فقط بجلب النص الذي سيكتب داخل مربع التحرير
والأمر document.getElementById("num").value قد وضعناه بين أحشاء الأمر Number كأحد معاملاته
وقد قمنا بذلك لتحويل الصيغة النصية إلى صيغة رقمية للتعامل معها لاحقًا
*/
var r1 = document.getElementById("r1")
/* أنشأنا متغيرًأ آخرًا وأسندنا إليه زر الراديو الأول بأكمله
فباستخدام الأمر document.getElementById("r1") تم التعرف على زر الراديو الذي أنشأناه سابقًا من خلال المعرف id الخاص به وهو بطبيعة الحال r1 الموجود بين علامتي التنصيص
*/
var r2 = document.getElementById("r2")
// نفس الكود السابق بالضبط مع تغيير اسم المتغير ومعرف id للزر , حيث من خلال السطر السابق استدعينا الزر الثاني
var rresult = document.getElementById("result")
// نفس الكودين السابقين ,مع تغيير اسم المتغير ومعرف id , وهنا سيجلب الكود كائن الفقرات الذي يحمل المعرف result
if (r1.checked == true) {
/* هذه جملة شرطية نتحقق بها إذا كان الزر الأول هو الزر المحدد فقم بالأوامر التالية */
result.innerHTML = (5/9)*(num-32);
/* السطر السابق سيعمل في حالة تحقق الشرط
ويقوم هذا الكود بعملية حسابية تكون قيمة مربع التحرير num أحد أطرافها
فهناك معادلة شهيرة تقول بأننا إذا أردنا تحويل الفهرنهايتي إلى سيليزي فسنعمل التالي
(5قسمة 9) مضروبة في (الدرجة الفهرنهايتية ناقص 32 )
وفي كودنا السابق قيمة الدرجة الفهرنهايتية سيكتبها المستخدم للأداة في مربع التحرير وسيقوم الكود بإدخال قيمة مربع التحرير في المعادلة
مع ملاحظة أن هذه المعادلة لا دخل لها في البرمجة , فقط هي توظيف للمعرفة العامة في عملنا
ناتج المعادلة سيتم كتابته في الفقرة التي معرفها result وستظهر للمستخدم مباشرة عند الضغط على الزر المربوط بالأمر */
} else if (r2.checked == true) {
/* عبارة else if تعني باللغة العربية أما إذا , وهذه الجملة هي ملحقة بالجملة الشرطية السابقة
وتعني باللغة العربية أما إذا كان الزر الثاني هو الزر المحدد فحينها سيكون جواب الشرط أوامرًأ يتم تنفيذها */
result.innerHTML = num*(9/5)+32;
/* هذا هو جواب الشرط الثاني الذي يقتضي تحديد الزر الثاني , وهو نفسه جواب الشرط الأول , لكن هنا قمنا بقلب المعادلة ليتم تحويل السيليزي إلى فهرنهايتي
وأيضًأ مربع التحرير هو طرف في المعادلة
تقول المعادلة بأن القيمة الفهرنهايتية تساوي القيمة السيليزية مضروبة في (9 مقسومة على 5) مضاف إليها 32
وعلى غرار الجواب السابق فسيتم تعويض قيمة الدرجة السيليزية من خلال الرقم الذي سيكتبه مستخد الأداة داخل مربع التحرير , وكذلك على غرار الجواب السابق سيتم إظهار القيمة في كائن الفقرات الذي يحمل المعرف result */
}
}
</script>
<!-- نهاية تعليمات java script -->
</font>
<!-- نهاية الكود الخاص بتغيير حجم الخط , فكل النصوص المكتوبة بين كود البداية وكود النهاية سيكون حجم خطه هو 16 -->
ليست هناك تعليقات:
إرسال تعليق
قل شيئًا