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

الصفحات

دورة تصميم قالب بلوجر 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 ثم نضع اشارة = وهنا نضع القيمة المطلوبة سواء قيمة ا للون او الحجم او الاتجاه

شرح الفيديو


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

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

شاهد ايضا × +
إظهار التعليقات
  • عادي
  • متطور
  • ترتيب حسب الاحدث
    عن طريق المحرر بالاسفل يمكنك اضافة تعليق متطور كتعليق بصورة او فيديو يوتيوب او كود او اقتباس فقط قم بادخال الكود او النص للاقتباس او رابط صورة او فيديو يوتيوب ثم اضغط على الزر بالاسفل للتحويل قم بنسخ النتيجة واستخدمها للتعليق
  1. غير معرف15 يناير, 2021

    ممكن تشرح ازاي نضيف حقوق خاص بينا الي القالب

    ردحذف
    الردود
    1. اكيد لكن بس نوصل لعند هالمرحلة من التصميم الشرح لازم يكون بالترتيب مو عشوائي

      حذف

X
ستحذف المقالات المحفوظة في المفضلة ، إذا تم تنظيف ذاكرة التخزين المؤقت للمتصفح أو إذا دخلت من متصفح آخر أو في وضع التصفح المتخفي