فهم كود جافا سكربت

dalia • منذ 6 سنوات

  <script type="text/javascript">
 filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show"); 
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

الكود يعبر عن فلتر بحيث ادا اخترالكل تظهر جميع الكتب وادا المستوى واحد , تظهر فقط كتب المستوى واحد وهكدا

كلمات دليلية: javescrbit

أعجبني السؤال تابع السؤال شارك السؤال

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (4)

Abdullah Alhariri • منذ 6 سنوات

الظاهر أن الفكرة العامة للـ Script واضحة لك

لذا يرجى تحديد الجزء الغير مفهوم فالـ script كبير و يطول شرحه سطراً بسطر

dalia • منذ 6 سنوات

function w3RemoveClass(element, name) ابا افهم كود الفور و الويل في الفنكشن هذي

function w3AddClass(element, name وفور واف اللي بهذي الفنكشن

xlmnxp • منذ 6 سنوات

مميز

function w3RemoveClass(element, name) ابا افهم كود الفور و الويل في الفنكشن هذي

شرح الدالة الاولى ( دالة w3RemoveClass )

/* وظيفة الدالة هي حذف صنف ( class ) او عدة اصناف ( classes ) من عنصر يتم تحديدة في الدالة.
* مدخلات الدالة:-
* element: المدخل الاول عنصر من نوع HTMLElement
* name: المدخل الثاني نص
*/
function w3RemoveClass(element, name) {
  // هنا تم تعريف ثلاث متغيرات بشكل محلي داخل الدالة هم i و arr1 و arr2
  var i, arr1, arr2;
  // هنا قام بجلب اصناف العنصر ( classes ) وقام بتحويلهم الى مصفوفة عن طريق دالة split باستخدام المسافات بينهم
  arr1 = element.className.split(" ");

  // هنا قام بتحويل النص الى مصفوفة عن طريق دالة split باستخدام المسافات بين الكلمات
  arr2 = name.split(" ");

  // هنا قام بانشاء حقل تكرار for يبدا من 0 وينتهي عند عدد الكلمات النص في المدل الثاني
  for (i = 0; i < arr2.length; i++) {

    // هنا قام بعمل حقل تكرار اخر لكن من نوع while يقوم بالتاكد اذا كان المصفوفة الاولى ( التي تحتوي على اصناف العنصر من المدخل الاول ) تحتوي على الكلمة الموجودة في النص من المدخل الثاني
    while (arr1.indexOf(arr2[i]) > -1) {
      // هنا يقوم بحذف الصنف من اصناف المصفوفة في المدخل الاول
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }

  // هنا يقوم باعادة تحريل المصفوفة الى نص والحاقها بالعنصر في المدخل الاول
  element.className = arr1.join(" ");
}

شرح الدالة الثانيه ( دالة w3AddClass )

/* وظيفة الدالة هي اضافة صنف ( class ) او عدة اصناف ( classes ) الى عنصر يتم تحديدة في الدالة.
* مدخلات الدالة:-
* element: المدخل الاول عنصر من نوع HTMLElement
* name: المدخل الثاني نص
*/
function w3AddClass(element, name) {
  // هنا تم تعريف ثلاث متغيرات بشكل محلي داخل الدالة هم i و arr1 و arr2
  var i, arr1, arr2;
  // هنا قام بجلب اصناف العنصر ( classes ) وقام بتحويلهم الى مصفوفة عن طريق دالة split باستخدام المسافات بينهم
  arr1 = element.className.split(" ");

  // هنا قام بتحويل النص الى مصفوفة عن طريق دالة split باستخدام المسافات بين الكلمات
  arr2 = name.split(" ");

  // هنا قام بانشاء حقل تكرار for يبدا من 0 وينتهي عند عدد الكلمات النص في المدل الثاني
  for (i = 0; i < arr2.length; i++){
    // يقوم بالتاكد من ان اصناف المصفوفة الاولى ( للمدخل الاول ) لا يحتوي على الصنف المرار اضافته من نص المدخل الثاني
    if (arr1.indexOf(arr2[i]) == -1) {
      // يقوم بالحاق الصنف الى عنصر المدخل الاول
      element.className += " " + arr2[i];
    }
  }
}

Abdullah Alhariri • منذ 6 سنوات

مميز

الدالة الأولى w3AddClass

هذه الدالة مسئولة عن إضافة classes إلى العنصر الممر لها

وسوف أقوم بشرح الجزء المطلوب منها فقط

for (i = 0; i < arr2.length; i++)

كما نرى في هذا السطر فهي حلقة for تقوم بالمرور على جميع عناصر المتغير arr2

بفرض أن المتغير name كانت قيمته "class1 class2 class3"

بعد تحويلة إلى array ووضعه في arr2 ستصبح قيمة arr2 كما يلي

["class1","class2","class3"]

والحلقة for ستقوم بالمرور على جميع عناصر ال arr2

if (arr1.indexOf(arr2[i]) == -1)

السطر السابق يقوم بالتحقيق إذا كان اسم الكلاس الموجود في الفهرس رقم i بداخل arr2 هو موجود بداخل arr1 أم لا

ويتم التحقق من خلال الدالة indexOf وهذه الدالة تقوم بالتحقق إذا كان العنصر الممرر لها موجود أم لا فإذا كان موجوداً ستعيد الفهرس الخاص به وإذا لم يكن موجوداً ستعيد القيمة -1

ومثال عليها :

إذا كانت قيمة i = 2

فإن قيمة

arr2[2]= "class3"

الدالة indexOf ستقوم بالتحقق هل القيمة "class3" موجودة بداخل arr1 أم لا

إذا كانت موجودة سيعيد قيمة الفهرس الخاص بها وإذا لم تكن موجودة ستعيد -1

في حالة تحقق الشرط وكان العنصر غير موجود في الarr1 سيتم تنفيذ السطر التالي

element.className += " " + arr2[i];

وهذا السطر يعني أضف إلى أسماء الـ classess الحالية التابعة للعنصر الـ class الجديد

أما الدالة الثانية w3RemoveClass

المسئولة عن حذف classess من العنصر سأقوم بشرح ال while ومابداخله فقط لأن الباقي مكرر

while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }

الـ while loop سوف تستمر طالما أن ال arr1 يوجد بها عناصر من arr2

بفرض arr1 بها العناصر التالية

["class1", "class2", "class3"]

وال arr2 بها العناصر التالية

["class1", "class3"]

سوف تستمر ال while حتى يتم حذف جميع عناصر arr2 من arr1 وذلك من خلال التعليمة

arr1.splice(arr1.indexOf(arr2[i]), 1);

وهذا السطر معناه إبدء الحذف من arr1 إبتداءً من الفهرس الخاص بالعنصر الموجود بـ arr2 عند الفهرس i

والقمة 1 تعني إحذف عنصر واحد فقط

أعتذر عن الإطالة ولكن حاولت أن أفصل قدر الإمكان وإن كان هناك أي إستفسار على الرحب والسعة

بالتوفيق ان شاء الله

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن