القائمة الرئيسية

الصفحات

دورة تصميم قالب بلوجر 2021 الدرس 7 لمحة عن javascript قسم 2

دورة تصميم قوالب بلوجر


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

نكمل اليوم مع لغة 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 سيتم اضافة نص جديد

شرح الفيديو


والان الى اللقاء صديقي بدرس قادم لاتنسى صندوق التعليقات موجود خصيصا لاجلك لذالك لاتتردد في اي سؤال او استفسار ويسعدني الاجابة عليك
  • فيس بوك
  • بنترست
  • تويتر
  • واتس اب
  • لينكد ان
author-img
Ahmad Wael

عدد المقالات:

شاهد ايضا × +
إظهار التعليقات