عنصر الأزرار في html ... إنشائه , التحكم به , وربطه بأمر معين

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
زوار مدونة علوم التقنية الكرام
أرحب بكم أجمل ترحيب في هذه المشاركة الجديدة.
ضمن عدة إطلالات بدأناها لشرح بعض ما يتعلق بتصميم صفحات html وبرمجتها ؛ نستكمل ما بدأناه بشرح موضوع جديد قد يفيدكم في هذا الصدد.
وأنا إذ أطرح مثل هذه المشاركات أهدف إلى لفت انتباهكم إلى الكيفية التي تُنشأ بها التطبيقات والمواقع التي نستخدمها في حياتنا اليومية.
ولعل هذه اللفتة قد تكون سببًا لاستثارة تفكير أحدهم ليدخل في هذا المجال ويخدم به المجتمع العربي في المجال التقني.
سنتحدث اليوم بمشيئة المولى عز وجل عن عنصر الأزرار في صفحات html وكيفية التحكم به وربطه بأمر معين.

الصورة العامة لكود إنشاء الأزرار

كعادة أسماء عناصر html ؛ فهي تحمل أسماءً إنجليزية واضحة , فالزر باللغة الإنجليزية يقال له button
إذًا: نكتب كود الزر بالطريقة التالية
<button>اسم الزر </button>

شرح الكود السابق

في البداية وضعنا علامة أصغر من < كإشارة لبدء كتابة كود html وكتبنا مباشرة كلمة button التي تمثل اسم العنصر
بعدها كتبنا علامة أكبر من > للدلالة على انتهاء تعريف عنصر html
بعد ذلك كتبنا نصًا معين , وهنا بوسعك كتابة أي نص تريده أن يمثل اسمًا للزر
بعدها أنهينا أمر إنشاء الزر بكتابة </button> وهو في الحقيقة نفس الكود الذي يسبق اسم الزر مع إضافة علامة الشرطة المائلة بين كلمة button وعلامة أصغر من
وكما نعلم أن ذلك يدل  على إغلاق حيز إنشاء الأزرار.

---

أخي الكريم إن الكود الذي كتبناه سينشئ الزر بالفعل , لكن هذا الزر لن يقوم بأي مهمة
بإمكانك تجربة الزر التالي لاستيضاح الأمر

التحكم في الزر

لكي تتحكم بالزر الذي أنشأته ؛ يجب أن تتعرف في البداية على أهم خصائص العنصر <button> وهي كما يلي:
1. الخاصية disabled : تحدد هذه الخاصية ما إذا كان الزر قابلًا للضغط أم غير ذلك
تحتمل الخاصية قيمتين لا ثالث لهما إما true أو false
عند كتابة اسم الخاصية داخل كود إنشاء الزر فمباشرة يتم التعويض عنها بالقيمة true ويعني ذلك تفعيل الخاصية وبالتالي تعطيل إمكانية الضغط على الزر
تمعن في حالة الزر التالي لتكتشف فاعلية الخاصية disabled

أما في حال لو لم تكتب اسم الخاصية داخل الكود فسيتم التعويض عنها تلقائيًا بالقيمة false التي تعني هنا تعطيل مفعول الخاصية المسؤولة عن إيقاف إمكانية الضغط على الزر , والنتيجة هنا تفعيل قابلية الضغط على الزر.

2. خاصية onclick : وتحمل هذه الخاصية قيمة نصية توضع بين علامتي تنصيص , تمثل هذه القيمة النصية اسم الأمر الذي نريد تنفيذه بمجرد الضغط على الزر
وتقسم الأوامر التي يمكن تنفيذها إلى قسمَين
1. أوامر جاهزة : وهي دوال تأتي مكتوبة مسبقًا مع أكواد javascript ويكفي أن تقوم فقط بكتابة اسم الأمر لاستدعاؤه
2. أوامر المستخدم : وهنا يتطلب منك أنت القيام بكتابة تعليمات java script وإعطائها اسمًا معينًا , هذا الاسم ستكتبه داخل علامة التنصيص كقيمة للخاصية onclick
*ملاحظة :
تكتب خواص العناصر في html بعد اسم العنصر وقبل علامة أكبر من > , ويتم الفصل بينها بالمسافة
أي أننا سنكتب علامة أصغر من ثم اسم العنصر وهو في حالتنا سيكون button ثم مسافة ثم اسم الخاصية مع قيمتها ثم علامة أكبر من
ويتم اعطاء قيمة للخاصية بكتابة علامة يساوي بعد اسمها ثم كتابة القيمة التي يمكن أن تقبلها.

---

جميل .. بل أكثر من رائع .. فنحن قد تعرفنا الآن على أساس العمل.
سأكتب لكم الآن بعض التطبيقات البسيطة لما تم ذكره أعلاه , ثم سأعقب بشكل سريع على فكرة كل كود من الأكواد المكتوبة

الكود الأول.

<button onclick="showMSG()"> إظهار رسالة </button>
<script typt-text="javascript">
function showMSG() {
alert("مرحبا بك في هذا التطبيق البسيط. \n نحن نربط الآن زر html بوظيفة من نوع وظائف المستخدم. \nكتبنا هذه الوظيفة لإظهار هذه الرسالة التي تقرؤها الآن بعد أن ضغطت على الزر.")
}
</script>

النتيجة مع شرح بسيط

ينتج عن الكود السابق زر باسم إظهار رسالة.
وينفذ هذا الزر وظيفة باسم showMSG التي تم وضعها كقيمة للخاصية onclick التي قد علمنا أنها تحدد ما يتم تنفيذه عند الضغط على زر معين
بالنسبة للأمر showMSG() فهو أمر قمت أنا بإنشائه من خلال تعليمات java script
اضغط على الزر أدناه لتجرب الكود

---

الكود الثاني:

<label> تفعيل الزر <input type="checkbox" id="togle" onclick="togle()"></label>
<br />
<button onclick="alert('التاريخ والوقت الآن : \n'+Date())" disabled id="button1"> عرض التاريخ والوقت </button>
<script type-text="javascript">
function togle() {
var togle = document.getElementById("togle")
var button1 = document.getElementById("button1")
if (togle.checked == true) {
button1.disabled = false
} else {
button1.disabled = true }
}
</script>

النتيجة مع شرح بسيط

الكود السابق ظهرت فيه بعض الأمور الجديدة سأوضح منها ما هو متعلق بموضوع اليوم
في السطر الأول كتبنا كودًا يظهر مربع تحديد يقوم بتشغيل الزر وإيقاف فاعليته
السطر الثاني وجدنا الكود الخاص بنزول سطر جديد
السطر الثالث , وهو ما يهمنا , أظهر لنا زرًا باسم عرض التاريخ والوقت , نلاحظ أن كود هذا الزر يحمل 3 خواص
أولًا الخاصية onclick وتم الاسناد إليها قيمة نصية تمثل أمرًا جاهزًا من أوامر java script
هذا الأمر اسمه alert وهو يقوم بإظهار الرسائل التنبيهية
محتوى الرسالة التنبيهية هو كود آخر جاهز يعرض لنا التاريخ والوقت عند اللحظة التي سنضغط فيها على الزر.
الخاصية الثانية هي disabled ومعنا ذلك أن الزر هذا لا يمكن ضغطه بوضعه الافتراضي

الخاصية الثالثة هي id وتحمل قيمة نصية تمثل الاسم البرمجي لهذا الزر
وقد استخدمنا هذه الخاصية لنعطي الزر اسمًا يتسنى لنا استدعاؤه وتغيير خصائصه
وقد استخدمنا هذا الاسم ضمن تعليمات javascript لتغير قيمة الخاصية disabled عند تحديد/إلغاء التحديد عن المربع الموجود أعلى الزر
جرب الآن الضغط على الزر دون التحديد على المربع ثم عاود الضغط مرة أخرى بعد تحديدك للمربع.

تفعيل الزر

---

ختامًا : هذا أهم ما يتعلق بأزرار html , وبالتأكيد يمكنك ربط مهام أكثر منفعة وفائدة بالزر , ولكني استخدمت هذه الأمثلة لمجرد توضيح الفكرة.
أرجو أن تكونوا قد استفدتم من طرحي هذا , مع أطيب التمنيات لكم بدوام التوفيق
والسلام عليكم ورحمة الله وبركاته