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

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

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

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

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

1-يمكننا تغير قيمة موجودة مسبقا

اي مثلا يمكننا تغير ايدي موجود او كلاس موجود او رابط موجود مثال على ذالك لدينا نفس كود ال HTML السابق ولديه ايدي test ونريد تغير ال id عن طريق الجافا سكربت اقوم بالاستدعاء ثم اغير الايدي بالشكل التالي

document.getElementById("test").id = "newid";

بهدذا الكود قمت بتغير الايدي من test الى newid الامر لايقتصر على الايدي فقط بامكاني تغير اي شيئ موجود ايدي او كلاس او رابط او عنوان ولاحظو قولي موجود يعني شرط يكون الذي تريد تغيره موجود مسبقا والا لن يعمل الكود

2-يمكننا اضافة او حذف او تبديل كلاس

يمكننا عن طريق الجافا سكربت اضافة كلاس او حذف كلاس او تبديل كلاس وذالك عن طريق

اضافة كلاس عن طريق .classList.add("myclass");

حذف كلاس عن طريق .classList.remove("myclass");

تبديل كلاس عن طريق .classList.toggle("myclass")

يمكن اضافة او حذف اكثر من كلاس وذالك بوضع فاصلة بين الكلاسات مثال على ذالك

.classList.remove("myClass", "anotherClass", "thirdClass");

3-.onclick

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

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
يكون كود الجافا سكربت بهذا الشكل
function myFunction() {
  document.getElementById("demo").style.color = "red";
}

4-.addEventListener("event", myFunction);

يمكننا باستخدام هذا الخاصية انشاء حدث ومستمع مثال على ذالك

<p id='test'>عند الضغط هنا سيتم اضافة نص جديد</p>
document.getElementById("test").addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("test").innerHTML = "نص جديد";
}

نلاحط قمنا باستدعاء عن طريق الايدي ثم قمنا باضافة حدثومستمع لهذا الكود الذي قمنا باستدعائه والحدث هنا هو click اي الضغط والمستمع يمكننا تسميته باي اسم مثلا هنا اسميته myFunction ثم قمنا بانشاء وظيفة باسم myFunction تقوم باضافة نص جديد فاصبح الكود كاملة عند الضغط على الفقرة التي تحمل الايدي test سيتم اضافة نص جديد

شرح الفيديو

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