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



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

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

لمحة عن لغة JavaScript

يصعب شرح جافا سكربت بشكل كامل باختصار لذالك سوف اكتفي باعطاء لمحة علمة واهم اكواد جافا سكربت ثم اقم باعطاء امثلة ولذالك انصح بمشاهدة الفيديو بالاسفل لفهم افضل
اولا الاستدعاء بالجافا سكربت بيكون عن طريق
id يكون الاستدعاء عن طريق الايدي بالشكل التالي document.getElementById("id")
class يكون الاستدعاء عن طريق الكلاس بالشكل التالي document.getElementsByClassName("name")
tagname يكون الاستدعاء عن طريق اسم التاغ بالشكل التالي document.getElementsByTagName("name")
بالطريقة الحديثة تم استبدال اكواد الاستدعاء الى التالي
id بيكون الاستدعاء document.querySelector("#id");
class بيكون الاستدعاء document.querySelectorAll(".class");
tagname بيكون الاستدعاء document.querySelectorAll("tagname");
ثانيا بعد الاستدعاء يمكننا اضافة عدة خواص ومنها
1- innerHTML ="نص"
يمكننا باستخدام هذه الخاصية تغير او اضافة نص الموجود داخل كود html مثال على ذالك اذا كان لدي كود html
<p id="test">هنا النص الذي سيتم استبداله</p>
عن طريق الجافا سكربت سوف نستبدل هذا النص بالكود التالي حيث سوف نستدعي اولا الكود الذي سيتم تغيره ثم نقوم بتغير النص
document.getElementById("test").innerHTML="هنا النص البديل"
بهذا الكود نكون استبدلنا النص بالتاغ الذي يحمل الايدي test بالنص الذي اضفناه ضمن innerHTML
2-.style.property = new style
يمكننا باستخدام هذه الخاصية تغير او اضافة ستايل لعنصر معين من ال HTML مثال على ذالك
<p id="test">هنا النص الذي سيتم تلوينه</p>
عن طريق الجافا سكربت سوف اقوم بتغير لون النص الموجود داخل كواد ال HTML
document.getElementById("test").style.color=red;
لاحظ بعد الاستدعاء عن طريق الايدي اضفنا نقطة وكلمة style ثم نقطة هنا بعد النقطة الثانية نختار ماذا سوف نظيف مثلا انا اضفت لون للنص لذالك كتبت color ايا شيئ تريد تغيره تكتبه هنا بعد النقطة الثانية مثلا تريد اضافة خلفية فتكتب بدل color نكتب background ثم نضع اشارة = وهنا نضع القيمة المطلوبة سواء قيمة ا للون او الحجم او الاتجاه

شرح الفيديو


والان الى اللقاء صديقي بدرس قادم لاتنسى صندوق التعليقات موجود خصيصا لاجلك لذالك لاتتردد في اي سؤال او استفسار ويسعدني الاجابة عليك
كاتب الموضوع: Ahmad Wael
احمد وائل عمري 28 عام من سوريا مختص صيانة حسوب وموبايل ومحب للتقنية بجميع اشكالها ولدي خبرة برمجية بتصميم مواقع الويب واتمنى ان اكون مصدر جيد لتعليم اشياء مفيدة لكم