قالب عالم التقنية السورية الاصدار الثالث

السلام عليكم واللهم صل على محمد وال محمد

نكمل اليوم بثامن دروس دورة تصميم قالب بلوجر 2021 من الصفر الى الاحتراف فبعد ان تكلمنا في الدروس السابقة عن 

1. مقدمة هامة ولمحة عن لغة HTML قسم اول
2. لمحة عن لغة HTML قسم ثاني
3. لمحة عن لغة CSS قسم اول
4. لمحة عن لغة CSS  قسم ثاني
5. لمحة عن لغة CSS قسم ثالث واخير
6. لمحة عن لغة javaScript قسم اول
7. لمحة عن لغة javaScript قسم ثاني

نكمل اليوم مع لغة JavaScript ونبدء بسم الله

لمحة عن جافا سكربت قسم ثالث واخير

 في الجافا سكربت نقوم بانشاء قيم ثابته او معرف عناصر تعرف باسم var

تفيد المعرفات بتسهيل كتابة الكود او الخصائص مثال على ذالك

var mytest = document.getElementById("test")

هنا قمت بانشاء معرف باسم mytest يقوم باستدعاء الكود عن طريق الايدي test

ما الفائدة من المعرف؟

الان عندما اريد تنفيذ اي من الخواص التي تعلمناها سابقا على الكود الذي يحمل الايدي test لا داعي لكتابة كود الاستدعاء كاملا فقط اكتب اسم المعرف ثم اقوم بتطبيق الخاصية مثال على ذالك

<p id="test">هنا النص الذي سيتم تلوينه</p>
var mytest = document.getElementById("test")
mytest.style.color=red;

في المثال السابق قمت بتعريف معرف باسم mytest يقوم باستدعاء الكود عن طريق الايدي ثم عن طريق اسم المعرف اعطيت لون للنص مباشرة

طبعا المعرفات تفيد عند تطبيق اكثر من خاصية على كود بايدي واحد لعدم كتابة كود الاستدعاء كاملا كل مرة اريد اضافة خاصية معينة فقط اقوم بكتابة اسم المعرف ويستخدم بكثرة عند استدعاء عن طريق الكلاس او اسم التاغ حيث من غير المعقول عند تطبيق خاصية معينة على اكثر من كود بنفس الكلاس بكل مرة اكتب كود الاستدعاء كاملا 

 نلاحظ بالامثلة السابقة جميع الاستدعائات استخدمنا الاستدعاء عن طريق الايدي وذالك لان

عند الاستدعاء بالايدي يتم تطبيق الخواص التي سوف نتعلمها مباشرة اما عند الاستدعاء عن طريق التاغ او الكلاس فنحتاج الى تحديد رقم العنصر او انشاء for او كما بالعربي حلقة دائرية 

مثال على استدعاء عن طريق كلاس او تاغ نيم مع تحديد رقم العنصر

<p>اول فقرة</p>
<p>ثاني فقرة.</p>
document.getElementsByTagName("p")[0].style.backgroundColor = "yellow";

كما نلاحظ بالمثال السابق قمنا باستدعاء عن طريق تاغ نيم ثم اعطينا ستايل وهو لون خلفية بلون اصفر نلاحظ بعد الاستدعاء يوجد رقم داخل قوسين بهذا الشكل [0] وهذا يدل على رقم العنصر في مثالنا هنا قمنا بتحديد بان اول تاغ p هو الذي سيتم تلوين خلفيته بالاصفر وقمنا باختيار رقم 0 وليس 1 لان في الجافا سكربت يبدأ العد من 0 وليس من 1 فلو وضعنا رقم 1 بدل 0 سيتم تلوين خلفية الفقرة الثانية وليس الاولى

الان لو نريد كما بالمثال السابق تلوين الخلفية بالاصفر ولكن لا نريد تلوين فقرة واحدة بل الفقرتان في هذه الحالة نحتاج الى انشاء for 

ليصبح الكود بالشكل التالي

var e = document.getElementsByTagName("p")
for(i=0; i < e.length; i++ ){
e[i].style.backgroundColor = "yellow";
}

باختصار انشئنا var تستدعي الفقرات باستخدام اسم التاغ ثم انشئنا for حددنا بداخلها قيمة i تبدأ من تساوي صفر الى i  تساوي اصغر من عدد الفقرات الكلي لدينا لان في الجاف سكربت يبدأ العد من صفر ولكن النتيجة النهائية تكون من 1 يعني مثلا بالمثال السابق يبدأ العد من 0 اي اول فقرة ثم 1 اي ثاني فقرة لكن العدد الكلي للفقرات بحسب الجافا سكربت هو 2 لذالك حددنا قيمت i النهائية اصغر من العدد الكلي ثم جعلنا ال i تكمل العد نيابة عنا في الكود ليتم بذالك وضع الخلفية باللون الاصفر لكل الفقرات الموجودة

ينطبق المثال السابق على الاستدعاء عن طريق الكلاس ايضا

كما قلت دائما مشاهدة الفيديو توضح الامور اكثر

طبعا خواص الجافا سكربت طويلة وتحتاج للكثير من الدروس لتغطيتها ولكن هذه منها اهم الخصائص تقريبا ومنها لمحة لتفهم اللغة بشكل عام

شرح الفيديو

والان الى اللقاء صديقي بدرس قادم لاتنسى صندوق التعليقات موجود خصيصا لاجلك لذالك لاتتردد في اي سؤال او استفسار ويسعدني الاجابة عليك