أسئلة وأجوبة فى JavaScript ؟ الجزء الرابع #4#

[x32x01]

ما هو DOM في JavaScript؟​

الجواب/
DOM (Document Object Model) هو واجهة برمجة التطبيقات (API) التي تمكن JavaScript من التفاعل مع محتوى مستندات HTML و XML. يتيح DOM للمطورين تعديل العناصر مثل النصوص، الصور، والروابط، إضافة أو إزالة عناصر من المستند.

ما الفرق بين getElementById و querySelector؟​

الجواب /
getElementById: تستخدم للبحث عن عنصر باستخدام المعرف (ID) الخاص به. تُرجع العنصر الأول الذي يطابق المعرف.
querySelector: تستخدم للبحث عن أي عنصر بناءً على مُحدد CSS مثل الفئة (.class) أو المعرف (#id)، وتُرجع العنصر الأول الذي يطابق هذا المُحدد.

كيف يمكن إضافة عنصر جديد إلى DOM باستخدام JavaScript؟​

يمكن إضافة عنصر جديد باستخدام createElement ثم إضافته باستخدام appendChild أو insertBefore. مثال:

var newDiv = document.createElement("div");
newDiv.innerHTML = "Hello World!";
document.body.appendChild(newDiv);

ما هو الفرق بين innerHTML و textContent؟​

الجواب/
innerHTML: يُستخدم للوصول إلى أو تعديل HTML داخل العنصر (يشمل العناصر الداخلية).
textContent: يُستخدم للوصول إلى أو تعديل النص داخل العنصر فقط (لا يشمل HTML).

كيف يمكن حذف عنصر من DOM؟​

يمكن حذف عنصر من DOM باستخدام removeChild أو remove. مثال:

var element = document.getElementById("myElement");
element.remove(); // أو
document.body.removeChild(element);

ما هي الأحداث events في DOM وكيف يمكن ربط حدث بعنصر؟​

الأحداث هي التفاعلات التي تحدث في الصفحة (مثل النقر أو الكتابة). يمكن ربط حدث باستخدام addEventListener. مثال:

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

ما هو classList وكيف يتم استخدامه؟​

الإجابة: classList هو خاصية توفر مجموعة من الأساليب لإضافة، إزالة، أو التبديل بين الفئات (classes) في العنصر. مثال:

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");

كيف يمكن الوصول إلى جميع العناصر التي تحمل نفس الفئة باستخدام JavaScript؟​

الإجابة: يمكن استخدام getElementsByClassName أو querySelectorAll. مثال:

var elements = document.getElementsByClassName("myClass");
// أو
var elements = document.querySelectorAll(".myClass");

ما هو مفهوم "Event Bubbling" في DOM؟​

الإجابة: "Event Bubbling" هو عملية تحدث عندما يتم إطلاق حدث في عنصر ما، ويتم تمريره إلى العناصر الأعلى في التسلسل الهرمي للDOM. يمكن منع هذه العملية باستخدام event.stopPropagation().

كيف يمكن تعديل خصائص CSS لعنصر باستخدام JavaScript؟​

يمكن تعديل خصائص CSS باستخدام خاصية style للعنصر. مثال:

var element = document.getElementById("myElement");
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";

ما هي خاصية window في DOM؟​

الإجابة: window هو الكائن الأعلى في المتصفح ويمثل النافذة أو الإطار الذي يحتوي على المستند. يوفر الوصول إلى خصائص مثل document, localStorage, وsetTimeout.

ما الفرق بين nodeName و tagName؟​

الإجابة:
nodeName: تُرجع اسم العقدة (يمكن أن يكون عنصرًا أو نصًا أو تعليقًا).
tagName: تُرجع اسم العلامة (Tag) الخاصة بالعناصر فقط.
مثال:

var element = document.getElementById("myElement");
console.log(element.nodeName); // "DIV"
console.log(element.tagName);  // "DIV"

كيف يتم استخدام dataset في DOM؟​

الإجابة: تُستخدم خاصية dataset للوصول إلى القيم الموجودة في بيانات مخصصة (custom data attributes) داخل عناصر HTML.

<div id="myElement" data-role="admin" data-id="123"></div>

var element = document.getElementById("myElement");
console.log(element.dataset.role); // "admin"
console.log(element.dataset.id);   // "123"

ما هي خاصية firstChild و lastChild؟​

الإجابة:
firstChild: تُرجع أول عقدة فرعية للعنصر.
lastChild: تُرجع آخر عقدة فرعية للعنصر.

console.log(element.firstChild); // أول عقدة (قد تكون عنصرًا أو نصًا)
console.log(element.lastChild);  // آخر عقدة

ما هي خاصية nextSibling و previousSibling؟​

الإجابة:
nextSibling: تُرجع العقدة التالية لنفس المستوى.
previousSibling: تُرجع العقدة السابقة لنفس المستوى.

console.log(element.nextSibling);
console.log(element.previousSibling);

ما الفرق بين nodeType و nodeValue؟​

الإجابة:
nodeType: تُرجع نوع العقدة (1: عنصر، 3: نص، 8: تعليق).
nodeValue: تُرجع قيمة العقدة (تُستخدم عادةً مع النصوص أو التعليقات).

console.log(element.nodeType); // 1
console.log(element.nodeValue); // null إذا كان عنصرًا

ما هي خاصية parentNode؟​

الإجابة: تُرجع العقدة الأب للعنصر الحالي.

console.log(element.parentNode);

ما الفرق بين offsetWidth و clientWidth؟​

الإجابة:
offsetWidth: عرض العنصر بما في ذلك الحواف (border) والتمرير (scrollbar).
clientWidth: عرض العنصر بدون الحواف والتمرير.

console.log(element.offsetWidth);
console.log(element.clientWidth);

ما هي خاصية scrollHeight و scrollWidth؟​

تُستخدم للحصول على أبعاد المحتوى الفعلي للعنصر (حتى لو كان خارج حدود العرض).

console.log(element.scrollHeight);
console.log(element.scrollWidth);

ما هي خاصية hasChildNodes؟​

تُستخدم للتحقق مما إذا كان للعنصر عقد فرعية.

if (element.hasChildNodes()) {
  console.log("Element has child nodes.");
}

ما هي خاصية innerHTML مقابل outerHTML؟​

الجواب/
innerHTML: تُرجع أو تُعين المحتوى داخل العنصر.
outerHTML: تُرجع أو تُعين المحتوى بما في ذلك العنصر نفسه.

console.log(element.innerHTML); // المحتوى الداخلي فقط
console.log(element.outerHTML); // العنصر مع المحتوى

ما هي خاصية attributes؟​

تُرجع جميع السمات (attributes) الخاصة بالعنصر ككائن.

var attrs = element.attributes;
for (var i = 0; i < attrs.length; i++) {
  console.log(attrs.name + " = " + attrs.value);
}

ما هي خاصية nodeValue وكيف تُستخدم؟​

تُرجع أو تُعين قيمة النصوص أو التعليقات. على سبيل المثال:

var textNode = element.firstChild;
console.log(textNode.nodeValue); // محتوى النص
textNode.nodeValue = "New Text";

ما هو BOM في JavaScript؟​

الإجابة:
BOM هو اختصار لـ Browser Object Model، وهو عبارة عن واجهة (API) توفرها المتصفحات للتفاعل مع نافذة المتصفح نفسها. يمكن من خلاله التحكم في النافذة، التنقل بين الصفحات، والتعامل مع URL، الـ cookies، والتاريخ.

ما هي أهم الكائنات التابعة لـ BOM؟​

الإجابة:
window: الكائن الأعلى في BOM، يمثل نافذة المتصفح.
document: يمثل DOM الخاص بالصفحة.
navigator: للحصول على معلومات حول المتصفح والجهاز.
location: للتعامل مع URL الحالي.
history: للتعامل مع تاريخ التصفح.
screen: للحصول على معلومات عن الشاشة مثل العرض والارتفاع.

كيف يمكن فتح نافذة جديدة باستخدام BOM؟​

الإجابة:
يمكن استخدام الدالة window.open() لفتح نافذة جديدة:

window.open("https://www.google.com", "_blank", "width=500,height=500");

كيف يمكن إعادة توجيه المستخدم إلى رابط آخر باستخدام BOM؟​

الإجابة:
يمكن استخدام location.href:

location.href = "https://www.google.com";

كيف يمكن إعادة تحميل الصفحة الحالية؟​

الإجابة:
باستخدام location.reload():

location.reload(); // تعيد تحميل الصفحة

ما الفرق بين location.href و location.assign()؟​

الإجابة:
location.href: ينقل المستخدم مباشرة إلى الصفحة الجديدة.
location.assign(): أيضًا ينقل المستخدم إلى الصفحة الجديدة ولكنه يضيفها إلى سجل التصفح (يمكنك العودة للصفحة السابقة).

كيف يمكننا التحقق من اسم المتصفح؟​

الإجابة:
باستخدام navigator.userAgent:

console.log(navigator.userAgent); // طباعة معلومات المتصفح

كيف يمكننا العودة إلى الصفحة السابقة في التاريخ؟​

الإجابة:
باستخدام history.back() أو التنقل بين الصفحات عبر history.go():

history.back(); // للرجوع إلى الصفحة السابقة
history.go(-1); // رجوع صفحة واحدة للخلف

كيف يمكننا الحصول على عرض وارتفاع نافذة المتصفح؟​

الإجابة:
باستخدام window.innerWidth و window.innerHeight:

console.log(window.innerWidth);  // عرض النافذة
console.log(window.innerHeight); // ارتفاع النافذة

كيف نستخدم setTimeout و setInterval في BOM؟​

الإجابة:
setTimeout: تنفيذ كود مرة واحدة بعد فترة معينة.
setInterval: تنفيذ كود بشكل متكرر كل فترة زمنية معينة.
مثال:

// setTimeout: ينفذ مرة واحدة
setTimeout(() => {
  console.log("مرحباً بعد 3 ثواني");
}, 3000);

// setInterval: يتكرر كل ثانية
setInterval(() => {
  console.log("مرحباً كل ثانية");
}, 1000);

كيف يمكننا إيقاف مؤقت تم تشغيله باستخدام setInterval؟​

الإجابة:
باستخدام clearInterval:

let timer = setInterval(() => {
  console.log("مرحباً");
}, 1000);

// إيقاف المؤقت بعد 5 ثوانٍ
setTimeout(() => {
  clearInterval(timer);
}, 5000);

ما هي طريقة فحص عرض الشاشة بالكامل؟​

الإجابة:
باستخدام screen.width و screen.height:

console.log(screen.width);  // عرض الشاشة
console.log(screen.height); // ارتفاع الشاشة

ما هو الـ destructuring؟​

الإجابة:
الـ destructuring هو طريقة لاستخراج القيم من المصفوفات (Arrays) أو الخصائص من (Objects) وتخزينها في متغيرات بطريقة مختصرة وسهلة.

كيف يتم استخدام destructuring مع المصفوفات؟​

الإجابة:
يمكنك استخدام الأقواس المربعة [ ] لاستخراج القيم من المصفوفة.
مثال:

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

ماذا يحدث إذا حاولت استخراج قيمة غير موجودة؟​

الإجابة:
إذا حاولت استخراج قيمة غير موجودة، سيتم تعيين المتغير إلى undefined.
مثال:

const numbers = [1, 2];
const [a, b, c] = numbers;
console.log(c); // undefined

كيف يمكن استخدام قيمة افتراضية في الـ destructuring؟​

الإجابة:
يمكنك تعيين قيمة افتراضية باستخدام علامة =.
مثال:

const numbers = [1];
const [a, b = 2] = numbers;
console.log(a, b); // 1 2

كيف يتم استخدام destructuring مع الكائنات؟​

الإجابة:
يتم استخدام الأقواس المعقوفة { } لاستخراج القيم من object
مثال:

const person = { name: "Ali", age: 25 };
const { name, age } = person;
console.log(name, age); // "Ali" 25

ماذا لو أردت إعادة تسمية المتغير عند استخراج قيمة من object ؟​

الإجابة:
يمكنك إعادة تسمية المتغير باستخدام صيغة key: newVariableName.
مثال:

const person = { name: "Ali", age: 25 };
const { name: fullName, age } = person;
console.log(fullName, age); // "Ali" 25

كيف يمكن استخدام destructuring مع القيم المتداخلة؟​

الإجابة:
يمكنك استخدام destructuring لاستخراج القيم من objects أو المصفوفات المتداخلة.
مثال:

const person = { name: "Ali", address: { city: "Riyadh", zip: 12345 } };
const { address: { city, zip } } = person;
console.log(city, zip); // "Riyadh" 12345

كيف يمكن استخدام destructuring مع المصفوفات المتداخلة؟​

الإجابة:
استخدم نفس الطريقة مع الأقواس المربعة [ ].
مثال:

const numbers = [1, [2, 3]];
const [a, [b, c]] = numbers;
console.log(a, b, c); // 1 2 3

كيف يتم استخدام destructuring مع الدوال؟​

الإجابة:
يمكنك استخدام destructuring للحصول على القيم من الوسيطات (parameters) مباشرة.
مثال:

function printPerson({ name, age }) {
  console.log(Name: ${name}, Age: ${age});
}
const person = { name: "Ali", age: 25 };
printPerson(person); // Name: Ali, Age: 25

هل يمكن دمج destructuring مع البقية (Rest Parameters)؟​

الإجابة:
نعم، يمكنك استخدام عامل الأنتشار ... للحصول على القيم المتبقية.
مثال:
مع المصفوفات:

const numbers = [1, 2, 3, 4];
const [a, b, ...rest] = numbers;
console.log(a, b, rest); // 1 2 [3, 4]

مع objects :

const person = { name: "Ali", age: 25, city: "Riyadh" };
const { name, ...rest } = person;
console.log(name, rest); // "Ali" { age: 25, city: "Riyadh" }

يعني إيه Set في JavaScript؟​

الـ Set هو نوع من البيانات (data type) في JavaScript، بيستخدم لتخزين قيم فريدة بس. يعني لو أضفت نفس القيمة أكتر من مرة، هيحتفظ بيها مرة واحدة بس.

إزاي أعمل Set جديد؟​

ممكن تعمل Set باستخدام الكلمة المفتاحية new Set().

let mySet = new Set();
console.log(mySet); // Set {}

إزاي أضيف عناصر لـ Set؟​

بتستخدم الميثود add() عشان تضيف عناصر.

let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1); // مكرر
console.log(mySet); // Set {1, 2}

إزاي أشوف لو العنصر موجود في الـ Set؟​

بتستخدم الميثود has().

let mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // true
console.log(mySet.has(5)); // false

إزاي أشيل عنصر من الـ Set؟​

بتستخدم الميثود delete().

let mySet = new Set([1, 2, 3]);
mySet.delete(2);
console.log(mySet); // Set {1, 3}

إزاي أمسح كل العناصر في الـ Set؟​

بتستخدم الميثود clear().

let mySet = new Set([1, 2, 3]);
mySet.clear();
console.log(mySet); // Set {}

إزاي أجيب عدد العناصر في الـ Set؟​

بتستخدم الخاصية size.

let mySet = new Set([1, 2, 3, 4]);
console.log(mySet.size); // 4

إزاي أعمل لوب على عناصر الـ Set؟​

ممكن تستخدم for...of أو الميثود forEach().
باستخدام for...of:

let mySet = new Set([1, 2, 3]);
for (let item of mySet) {
  console.log(item);
}
// 1
// 2
// 3

باستخدام forEach:

mySet.forEach(item => {
  console.log(item);
});
// 1
// 2
// 3

الفرق بين Set و Array؟​

الـ Set بيحتفظ بعناصر فريدة بس، إنما الـ Array ممكن يكون فيها عناصر مكررة.
الـ Set ملوش فهرسة (index) زي الـ Array.

إزاي أحوّل Set لـ Array؟​

ممكن تستخدم Array.from() أو الـ spread operator.
باستخدام Array.from():

let mySet = new Set([1, 2, 3]);
let myArray = Array.from(mySet);
console.log(myArray); // [1, 2, 3]

باستخدام spread operator:

let myArray = [...mySet];
console.log(myArray); // [1, 2, 3]

الفرق بين Set و WeakSet في JavaScript​

1. نوع العناصر المسموح بيها
Set: بيقبل أي نوع من البيانات (Strings, Numbers, Objects, Arrays, إلخ).

let mySet = new Set();
mySet.add(1); // رقم
mySet.add("hello"); // نص
mySet.add({ name: "Ali" }); // كائن
console.log(mySet);

WeakSet: بيقبل الكائنات (Objects) بس، يعني لازم القيمة تكون Object أو Array. ماينفعش تضيف أرقام أو نصوص.

let myWeakSet = new WeakSet();
myWeakSet.add({ name: "Ali" }); // صح
// myWeakSet.add(1); // غلط - يرمي خطأ
console.log(myWeakSet);

2. الـ Reference Weakness
Set: بيحتفظ بالعناصر حتى لو مافيش متغير تاني بيشير ليها. يعني الكائنات اللي جوه الـ Set مش بتتحذف لو ما بقتش مستخدمة.

let mySet = new Set();
let obj = { name: "Ali" };
mySet.add(obj);
obj = null; // الكائن لسه موجود جوه الـ Set
console.log(mySet); // Set { { name: "Ali" } }

WeakSet: بيربط الكائنات بمرجعية ضعيفة (weak reference)، يعني لو ما بقاش فيه متغير بيشير للكائن، بيتم حذفه تلقائيًا (garbage collected).

let myWeakSet = new WeakSet();
let obj = { name: "Ali" };
myWeakSet.add(obj);
obj = null; // الكائن بيتحذف تلقائيًا
console.log(myWeakSet); // WeakSet {}

حجم (Size) وتكرار العناصر
Set: بيتيح ليك تعرف عدد العناصر باستخدام size، والعناصر لازم تكون فريدة.

let mySet = new Set([1, 2, 2, 3]);
console.log(mySet.size); // 3

WeakSet: مافيش خاصية size، ومش تقدر تعرف عدد العناصر لأنه مصمم عشان يتعامل مع الـ weak references بس.

4. الـ Iteration (التكرار)
Set: ممكن تعمل تكرار على العناصر باستخدام for...of أو forEach.

let mySet = new Set([1, 2, 3]);
mySet.forEach(item => console.log(item));

WeakSet: مش ممكن تعمل تكرار على العناصر؛ لأنه مش مصمم عشان التخزين التقليدي. هو بس بيوفرلك طرق لإضافة أو حذف objects.

6. الاستخدام العملي
Set: لما تحتاج تخزين أي نوع بيانات مع ضمان إنها تكون فريدة (Unique values).

let uniqueValues = new Set([1, 2, 3, 1, 2]);
console.log(uniqueValues); // Set {1, 2, 3}

WeakSet: لما تكون عايز تخزن objects بشكل مؤقت، من غير ما تأثر على الـ Garbage Collector.

let cache = new WeakSet();
let user = { id: 1 };
cache.add(user);
user = null; // object  بيتشال من الـ WeakSet

الخلاصة
Set: مرن أكتر ومناسب للتعامل مع أنواع مختلفة من البيانات.
WeakSet: متخصص للتعامل مع الكائنات، وبيساعد في إدارة الذاكرة (Memory Management) بكفاءة.