100 سؤال نظري جافا سكريبت

يوم جيد ، أيها الأصدقاء!



فيما يلي قائمة بأهم 100 سؤال عن أساسيات JavaScript من هذا المستودع مع إجابات قصيرة وروابط إلى Ilya Kantor Modern JavaScript Tutorial (JSR) و MDN.



تتوفر هذه القائمة ، إلى جانب أكثر من 300 سؤال تدريب ، في تطبيقي .



يطبق التطبيق آلية لحفظ السؤال المدروس ، كما يوفر العمل دون اتصال بالإنترنت.



أعتذر عن أي أخطاء محتملة وأخطاء مطبعية. هو موضع تقدير أي شكل من أشكال ردود الفعل.



إصدار 14.09.2019



انظر الى استمرار هنا .

1. كيفية إنشاء كائن؟

هناك عدة طرق للقيام بذلك. بعض منها:

الكائن الحرفي:

const object = {}

مُنشئ الكائن (غير مستحسن):

const object = new Object()

طريقة Object.create () عند استخدام هذه الطريقة ، يتم تمرير كائن إليها كوسيطة ، والتي ستصبح النموذج الأولي للكائن الجديد.

//     -  
const object = Object.create(null)

دالة المُنشئ نقوم بإنشاء دالة مُنشئ ونستخدم عامل التشغيل "new" لإنشاء مثيل لهذه الوظيفة - كائن:

function Person (name) {
    const object = {}
    object.name = name
    object.age = 30
    return object
}
const user = new Person('')

صف دراسي:

class Person {
    constructor(name) {
        this.name = name
    }
}

const user = new Person('')

JSR

MDN

2. ما هي النماذج الأولية؟

تُستخدم النماذج الأولية لإنشاء كائنات جديدة بناءً على الكائنات الموجودة. هذه التقنية تسمى الميراث النموذجي. يتوفر النموذج الأولي لمثيل كائن من خلال Object.getPrototypeOf (كائن) أو خاصية __proto__ ([[النموذج الأولي]] الخاصية المخفية الداخلية).







JSR

MDN

3. ما هو الفرق بين call () و application () و bind ()؟

من السهل شرح الفرق بين هذه الطرق بالأمثلة.

تستدعي طريقة call () دالة ذات هذه القيمة المحددة والوسيطات مفصولة بفواصل.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.call(employee1, '', ' ?') // ,  .  ?
invite.call(employee2, '', ' ?') // ,  .  ?

يستدعي التابع () دالة ذات القيمة المحددة ووسيطات الصفيف.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.apply(employee1, ['', ' ?']) // ,  .  ?
invite.apply(employee2, ['', ' ?']) // ,  .  ?

تُرجع الدالة bind () وظيفة جديدة بالقيمة المحددة هذه وتسمح لك بتمرير مصفوفة أو أي عدد من الوسائط مفصولة بفواصل إليها.

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

const inviteEmployee1 = invite.bind(employee1)
const inviteEmployee2 = invite.bind(employee2)
inviteEmployee1('', ' ?') // ,  .  ?
inviteEmployee2('', ' ?') // ,  .  ?

وبالتالي ، فإن أساليب الاستدعاء () والتطبيق () تستدعي الوظيفة بعد أن يتم ربطها بكائن. الفرق بين الاثنين هو الطريقة التي يتم بها تمرير الحجج. من السهل تذكر هذا الاختلاف مع الأحرف الأولى من العمليات: الاستدعاء هو فاصلة (فاصلة ، ج) ، التطبيق عبارة عن مصفوفة (مصفوفة ، أ). تقوم طريقة bind () بإرجاع دالة جديدة مرتبطة بالكائن المحدد.



JSR - Call / Apply

JSR - Bind

MDN - Call

MDN - Apply

MDN - Bind

4. ما هو JSON وما هي الأساليب التي يستخدمها؟

JSON هو تنسيق بيانات نصية يعتمد على بناء جملة كائن JavaScript اخترعه دوغلاس كروكفورد. يتم استخدامه لنقل البيانات عبر الشبكة وعادة ما يكون له الامتداد .json و MIME type application / json.

التحليل: يحول سلسلة JSON إلى كائن.

JSON.parse(text)

Stringification: تحويل كائن إلى سلسلة JSON لإرسالها عبر الشبكة.

JSON.stringify(object)

JSR

MDN

5. ماذا تفعل طريقة Array.slice ()؟

تعيد طريقة slice () عناصر المصفوفة المحددة كمصفوفة جديدة. تقوم بإرجاع العناصر التي تبدأ من الفهرس المحدد في الوسيطة الأولى وتنتهي بالفهرس المحدد في الوسيطة الاختيارية الثانية ، ولكن دون تضمينه. إذا كانت الوسيطة الثانية غير موجودة ، فسيتم استرداد جميع العناصر التي تبدأ من الفهرس المحدد في الوسيطة الأولى.

const arrayIntegers = [1, 2, 3, 4, 5]
const arrayIntegers1 = arrayIntegers.slice(0, 2) // [1, 2]
const arrayIntegers2 = arrayIntegers.slice(2, 3) // [3]
const arrayIntegers3 = arrayIntegers.slice(4) // [5]

لاحظ أن هذه الطريقة لا تعدل المصفوفة الأصلية ، ولكنها تُرجع مجموعة فرعية منها فقط كمصفوفة جديدة.



JSR

MDN

6. ماذا تفعل طريقة Array.splice ()؟

يتم استخدام طريقة splice () لإضافة عناصر أو إزالتها من المصفوفة. تحدد الوسيطة الأولى موضع البداية لإضافة العناصر أو إزالتها ، بينما تحدد الوسيطة الاختيارية الثانية عدد العناصر المراد إزالتها. تتم إضافة كل وسيطة لاحقة (الثالثة ، إلخ) إلى المصفوفة:

let arrayOriginal1 = [1, 2, 3, 4, 5]
let arrayOriginal2 = [1, 2, 3, 4, 5]
let arrayOriginal3 = [1, 2, 3, 4, 5]

let array1 = arrayOriginal1.splice(0, 2) //  [1, 2];   = [3, 4, 5]
let array2 = arrayOriginal2.slice(3) //  [4, 5];   = [1, 2, 3]
let array3 = arrayOriginal3.slice(3, 1, 'a', 'b', 'c') //  [4];   = [1, 2, 3, 'a', 'b', 'c']

لاحظ أن طريقة splice () تعدل المصفوفة الأصلية وتعيد مصفوفة من العناصر المستخرجة.



JSR

MDN

7. ما هو الفرق بين slice () و splice ()؟

الاختلافات الرئيسية هي كما يلي:



JSR

MDN - شريحة

MDN - لصق

8. كيف تتم مقارنة الأشياء والخرائط؟

تتشابه الكائنات مع الخرائط من حيث أنهما يسمحان لك بتعيين مفاتيح على القيم ، واسترداد القيم ، وحذف المفاتيح ، وتحديد ما إذا كانت القيمة موجودة بالمفتاح. لهذا السبب ، تم استخدام الكائنات كخرائط. ومع ذلك ، هناك بعض الاختلافات بينهما تجعل استخدام البطاقات أكثر تفضيلاً في حالات معينة.

• يمكن أن تكون مفاتيح الكائن عبارة عن سلاسل ورموز فقط ، ويمكن أن تكون مفاتيح الخريطة أي قيم ، بما في ذلك الوظائف والكائنات
• يتم ترتيب مفاتيح الخريطة ، لكن مفاتيح الكائنات ليست كذلك. لذلك عند التكرار ، يتم إرجاع مفاتيح الخريطة بترتيب إضافتها
• يمكنك الحصول على حجم الخريطة باستخدام خاصية size ويتم تحديد عدد خصائص الكائن يدويًا
• الخريطة هي كيان متكرر ، وللتكرار فوق كائن ، يجب عليك أولاً الحصول على مفاتيحها بطريقة ما ، ثم تكرارها
• عند استخدام كائن كخريطة ، تذكر أن أي كائن له نموذج أولي ، لذلك يمكن أن تتداخل مفاتيح الخريطة مع المفاتيح المحددة من قبل المستخدم. لذلك ، يجب استخدام Object.create (فارغ) لإنشاء كائن خريطة ، ولكن نادرًا ما يتم استخدام هذه الطريقة الآن.
• الكائن أدنى من الخريطة من حيث الأداء عندما يتعلق الأمر بإضافة / إزالة المفاتيح بسرعة

JSR

MDN

9. ما هو الفرق بين "==" و "===" عاملي؟

توفر JavaScript طريقتين لمقارنة القيم: الصارمة (=== ،! ==) والمجردة (== ،! ==). في مقارنة دقيقة ، تتم مقارنة القيم كما هي ، وفي مقارنة متساهلة ، إذا لزم الأمر ، يتم إجراء تحويل ضمني (صب) لأنواع القيم. تستخدم العوامل الصارمة القواعد التالية لمقارنة أنواع مختلفة من القيم:

• تتساوى سلسلتان تمامًا عندما يكون لهما نفس مجموعة الأحرف ونفس الطول ونفس الأحرف في نفس المواضع
• رقمان متساويان تمامًا إذا كانت قيمهما متساوية. هناك حالتان خاصتان:
  
  
  
  
  • NaN لا يساوي شيئًا ، بما في ذلك NaN
  • الأصفار الموجبة والسالبة تساوي بعضها البعض
  
  
  
• القيم المنطقية متساوية تمامًا عندما يكون كلاهما صحيحًا أو خاطئًا ، أي صحيحة أو خاطئة
• جسمان متساويان تمامًا إذا كانا يشيران إلى نفس الكائن (موقع الذاكرة)
• null === إرجاع undefined false و null == إرجاع غير محدد صحيح

بعض الأمثلة:

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[] == [] // 
[] === [] // false,      
{} == {} // 
{} === {} // false,      

JSR

MDN

10. ما هي وظائف لامدا أو السهم؟

وظائف الأسهم هي طريقة مختصرة لكتابة التعبيرات الوظيفية. ليس لديهم هذا ، الحجج ، الهدف الفائق والجديد. تعمل هذه الوظائف كبديل جيد للوظائف التي ليس لها طرق ، ولكن لا يمكن استخدامها كمنشئين.

function regularSum (x, y) {
    return x + y
}

const arrowSum = (x, y) => x + y

JSR

MDN

11. لماذا تسمى الوظائف كائنات من الدرجة الأولى؟

في JavaScript ، الوظائف هي كائنات من الدرجة الأولى. هذا يعني أنه يمكن استخدام الوظائف مثل المتغيرات العادية.

على سبيل المثال ، يمكن تمرير دالة كوسيطة لدالة أخرى ، وإعادتها كقيمة من دالة أخرى ، وتعيينها إلى متغير. المثال التالي يعين دالة لمعالج:

const handler = () => console.log(' -   ')
document.addEventListener('click', handler)

JSR

MDN

12. ما هي وظيفة من الدرجة الأولى؟

دالة الدرجة الأولى هي دالة لا تأخذ دالة أخرى كوسيطة ولا تُرجع دالة كقيمة:

const firstOrder = () => console.log(' -   ')

JSR

MDN

13. ما هي وظيفة الرتبة الأعلى؟

دالة الترتيب الأعلى هي دالة تأخذ وظيفة أخرى كوسيطة ، أو تُرجع دالة أخرى كقيمة:

const firstOrderFun = () => console.log(' -   ')
const higherOrder = returnFirstOrderFun => returnFirstOrderFun()
higherOrder(firstOrderFunc)

JSR

MDN

14. ما هي الوظيفة الأحادية؟

الوظيفة الأحادية (الدالة الأحادية) هي دالة تأخذ وسيطة واحدة فقط:

const unaryFun = a => console.log(a + 10) //  10        

JSR

MDN

15. ما هو الكاري؟

الكاري هو عملية تحويل دالة ذات معلمات متعددة إلى وظائف متعددة بمعامل واحد. سميت هذه العملية على اسم عالم الرياضيات هاسكل كاري. يحول Currying وظيفة n-ary إلى عدة وظائف أحادية (يقلل من أهمية الوظيفة):

const sum = (a, b, c) => a + b + c
const currySum = a => b => c => a + b + c

currySum(1) //  : b => c => 1 + b + c
currySum(1)(2) //  : c => 3 + c
currySum(1)(2)(3) //   6

يستخدم Currying لتمكين إعادة استخدام الكود (تطبيق الوظيفة الجزئية) ولإنشاء مجموعة من الوظائف.



شبيبة

16. ما هي الوظيفة الصرفة؟

الوظيفة الصرفة هي دالة تعتمد قيمتها المرتجعة فقط على الوسائط التي تم تمريرها ، بدون آثار جانبية. ببساطة ، إذا استدعيت دالة n مرة مع وسيطات n ، وكانت الدالة تُرجع دائمًا نفس القيمة ، فهي نظيفة:

//  
let numberArray = []
const impureAddNumber = number => numberArray.push(number)
// 
const pureAddNumber = number => argNumberArray => argNumberArray.concat([number])

console.log(impureAddNumber(1)) // 1
console.log(numberArray) // [1]
console.log(pureAddNumber(2)(numberArray)) // [1, 2]
console.log(numberArray) // [1]

في المثال أعلاه ، لا تعتبر impureAddNumber دالة نقية لأن طريقة push () تُرجع الطول الجديد للصفيف ، والذي يكون مستقلاً عن الوسيطة التي تم تمريرها. الوظيفة الثانية نقية لأن طريقة concat () تسلسل المصفوفتين دون آثار جانبية وتعيد مصفوفة جديدة. تعد الوظائف النقية ضرورية لاختبار الوحدة ولا تحتاج إلى حقن التبعية. يؤدي عدم وجود آثار جانبية إلى تحسين موثوقية التطبيق بسبب ضعف الاتصالات بين عناصره. أحد تجسيدات هذا المبدأ هو مفهوم الثبات ، الذي تم تقديمه في ES6 ، والذي يفضل const على let.



JSR

MDN

17. ما هي الكلمة الأساسية "Let" المستخدمة؟

يتم استخدام الكلمة الأساسية "let" للإعلان عن متغير محلي محدد النطاق. نطاق هذا المتغير مقيد بالكتلة أو المشغل أو التعبير الذي يتم استخدامه فيه. المتغيرات المعلنة بالكلمة الأساسية "var" لها نطاق عام أو وظيفي يتم تعريفها فيه:

let counter = 1
if (counter === 1) {
    let counter = 2
    console.log(counter) // 2
}
console.log(counter) // 1 ( counter,   ,   )

JSR

MDN

18. ما هو الفرق بين Let و var؟

الاختلافات الرئيسية هي كما يلي:



بعض الأمثلة:

function userDetails(username) {
    if (username) {
        console.log(salary)
        console.log(age)
        let age = 30
        var salary = 10000
    }
    console.log(salary) // 10000 (  )
    console.log(age) // SyntaxError: "age" is not defined (  )
}

JSR

MDN - دع

MDN - var

19. لماذا تم اختيار كلمة "Let" لتكون الكلمة الرئيسية؟

Let هو عامل رياضي تم استخدامه من قبل لغات البرمجة المبكرة مثل Scheme و Basic. في الوقت الحاضر ، يتم استخدام let من قبل عدد كبير من لغات البرمجة ، لذلك فإن هذه الكلمة هي أقرب بديل للاختصار "var" (متغير).



JSR

MDN

20. كيف يمكن تجاوز متغير في كتلة التبديل؟

إذا حاولت تجاوز متغير تم الإعلان عنه بالكلمة الأساسية "let" في كتلة التبديل ، فستتلقى خطأ:

let counter = 1
switch(x) {
    case 0:
        let name
        break
    case 1:
        let name // SyntaxError
        break
}

لحل هذه المشكلة ، تحتاج إلى إنشاء قالب جديد داخل العلبة - نطاق معجمي جديد:

let counter = 1
switch(x) {
    case 0: {
        let name
        break
    }
    case 1: {
        let name
        break
    }
}

JSR

MDN

21. ما هي المنطقة الميتة المؤقتة؟

إذا حاولت الوصول إلى المتغيرات المُعلنة بالكلمة الأساسية "let" أو "const" (ولكن ليس "var") قبل تعريفها (أي قبل تعيين قيمة لها ضمن النطاق الحالي) ، فسيتم طرح استثناء ReferenceError ). بمعنى آخر ، المنطقة الزمنية الميتة هي الوقت بين إنشاء سياق (نطاق) متغير وتعريفه:

function someMethod () {
    console.log(counter1) // undefined
    console.log(counter2) // ReferenceError
    var counter1 = 1
    const counter2 = 2
}

MDN

22. ما هو التعبير عن الوظيفة الذي تم استدعاؤه فورًا (IIFE)؟

IIFE هي وظيفة تسمى مباشرة بعد التعريف. قد يبدو بناء الجملة لمثل هذه الوظيفة كما يلي (أحد الخيارات ، الأكثر شيوعًا):

(function () {
    // 
})()

// ,      
(() => {
    // 
})()

السبب الرئيسي لاستخدام IIFE هو الحفاظ على خصوصية المتغيرات ، حيث لا يمكن الوصول إلى المتغيرات المعلنة داخل IIFE من البيئة الخارجية:

(function () {
    var message = 'IIFE'
    console.log(message)
})()
console.log(message) // SyntaxError: "message" is not defined

JSR

MDN

23. ما هي فوائد استخدام الوحدات؟

من بين أمور أخرى ، يمكن ذكر ما يلي:

• تحسين قابلية القراءة وصيانة الكود بشكل أسهل
• كود قابل لإعادة الاستخدام
• الحفاظ على مساحة الأسماء العالمية نظيفة

JSR

MDN

24. ما هو الحفظ أو الحفظ؟

Memoization هي طريقة لتحسين أداء وظيفة عن طريق تخزين النتائج التي تم الحصول عليها مسبقًا لتلك الوظيفة في ذاكرة التخزين المؤقت. في كل مرة يتم استدعاء الوظيفة ، تصبح الوسيطة التي تم تمريرها إليها هي فهرس ذاكرة التخزين المؤقت. إذا كانت البيانات موجودة في ذاكرة التخزين المؤقت ، يتم إرجاعها دون إعادة تنفيذ الوظيفة. خلاف ذلك ، يتم تنفيذ الوظيفة والنتيجة مكتوبة في ذاكرة التخزين المؤقت:

const memoAdd = () => {
    let cache = {}
    return value => {
        if (value in cache) {
            console.log('   ')
            return cache[value] //   , cache.value        ,     JavaScript     .    
        } else {
            console.log(' ')
            let result = value + 20
            cache[value] = result
            return result
        }
    }
}
//    memoAdd
const add = memoAdd()
console.log(add(20)) //   40
console.log(add(20)) //     40

25. ما هو الرفع؟

الرفع هو عملية نقل المتغيرات والتعبيرات الوظيفية إلى بداية نطاقها قبل تنفيذ الكود. تذكر: يتم رفع المتغيرات والتعبيرات نفسها فقط ، وليس تهيئتها (أي يتم رفع إعلان المتغير ، وليس تخصيص قيمة له):

console.log(message) // undefined
var message = '!'

بالنسبة للمترجم ، يبدو هذا الرمز كما يلي:

var message
console.log(message)
message = '!'

JSR

MDN

26. ما هي فئة؟

الفئات المقدمة في ES6 هي السكر النحوي (مغلف ، تجريد ، أو إضافة) لميراث النموذج الأولي (للنموذج الأولي لوظيفة المُنشئ). مثال على دالة منشئ:

function Bike(model, color) {
    this.model = model
    this.color = color
}

Bike.prototype.getDetails = function () {
    return ' ' + this.model + '   ' + this.color + ' .'
}

نفس المثال باستخدام فئة:

class Bike {
    constructor (color, model) {
        this.color = color
        this.model = model
    }

    getDetails () {
        return \` ${this.model}   ${this.color} .\`
    }
}

JSR

MDN

27. ما هو الإغلاق؟

الإغلاق هو مزيج من الوظيفة وبيئتها المعجمية. ببساطة ، الإغلاق هو عندما يكون لدالة داخلية وصول إلى المتغيرات المعلنة في دالة خارجية. يحتوي الإغلاق على سلسلة من ثلاثة نطاقات:

• النطاق الخاص
• نطاق الوظيفة الخارجية
• النطاق العالمي

const welcome = name => {
    const greet = message => {
        console.log(\`${message}, ${name}!\`)
    }
    return greet
}

const fun = welcome('')
fun('') // , !

JSR

MDN

28. ما هي الوحدة؟

الوحدات النمطية هي أجزاء صغيرة من التعليمات البرمجية المستقلة القابلة لإعادة الاستخدام والتي تكمن وراء العديد من أنماط التصميم. يتم تصدير معظم الوحدات النمطية ككائنات أو وظائف أو مُنشئين.



JSR

MDN

29. ما هو النطاق؟

يحدد النطاق مدى توفر المتغيرات والوظائف والكائنات في أماكن مختلفة في الكود أثناء تنفيذه. بمعنى آخر ، النطاق هو رؤية المتغيرات والموارد الأخرى في السياق الحالي لتنفيذ التعليمات البرمجية.



MDN

30. ما هو عامل الخدمة؟

عامل الخدمة هو برنامج نصي يتم تشغيله بشكل مستقل عن صفحة الويب التي يعمل عليها وإجراءات المستخدم. في الواقع ، يعمل عامل الخدمة كخادم وكيل بين التطبيق والمتصفح. القدرات الرئيسية للعاملين في الخدمة هي التالية: التأكد من أن التطبيق غير متصل بالإنترنت ، ومزامنة الخلفية الدورية ، وإشعارات الدفع ، واعتراض طلبات الشبكة ومعالجتها ، وإدارة ذاكرة التخزين المؤقت برمجيًا.



MDN

31. كيف أتفاعل مع نموذج كائن المستند (DOM) باستخدام عمال الخدمة؟

لا يتمتع عمال الخدمة بوصول مباشر إلى DOM. ومع ذلك ، يمكنهم التفاعل مع الصفحة من خلال واجهة postMessage ، ويمكن للصفحة تعديل DOM.



MDN - ServiceWorker

MDN - postMessage

32. كيفية إعادة استخدام المعلومات عند إعادة تشغيل عامل الخدمة؟

تتمثل إحدى المشكلات مع عمال الخدمة في توقفهم عن التنفيذ عندما لا يكونون قيد الاستخدام وإعادة التشغيل عند الحاجة. يمنعك هذا من إضافة معالجات أحداث الجلب والرسائل بشكل عام. لإعادة استخدام المعلومات ، من الضروري التأكد من تفاعل العاملين في الخدمة مع قاعدة بيانات مفهرسة (قاعدة بيانات مفهرسة) أو تخزين محلي (تخزين محلي).



MDN

33. ما هي قاعدة البيانات المفهرسة (IndexedDB)؟

IndexedDB هي واجهة برمجة تطبيقات ذات مستوى منخفض لتخزين كميات كبيرة من البيانات المنظمة ، بما في ذلك الملفات والنقاط الكبيرة ، من جانب العميل. تستخدم هذه الواجهة فهارس لتحسين سرعة استرداد البيانات.



JSR

MDN

34. ما هو تخزين الويب؟

تخزين الويب هو واجهة تتيح لك تخزين البيانات كأزواج مفتاح / قيمة محليًا ، أي في متصفح المستخدم ، بطريقة أكثر ملاءمة من استخدام ملفات تعريف الارتباط. يوفر التخزين على الويب آليتين للتخزين:

• التخزين المحلي (التخزين المحلي) - يخزن بيانات المستخدم الحالي لفترة زمنية غير محدودة
• تخزين الجلسة - يخزن البيانات طوال الجلسة الحالية ، أي عند إغلاق علامة تبويب المتصفح ، ستفقد البيانات

JSR

MDN

35. ما هو postMessage؟

postMessage هي طريقة للتواصل بين المصادر المختلفة لكائن النافذة (على سبيل المثال ، الصفحة والنوافذ المنبثقة التي تنشئها (نافذة منبثقة) أو صفحة وإطار iframe مضمن) عادةً ، لا تستطيع البرامج النصية الموجودة على صفحة ما الوصول إلى صفحة أخرى إذا كانت تلك الصفحة تتبع الأصل المشترك أو نهج المصدر الفردي (المصدر - البروتوكول والمضيف والمنفذ).



MDN - postMessage

36. ما هي ملفات تعريف الارتباط؟

ملف تعريف الارتباط هو جزء صغير من البيانات يتم تخزينه على كمبيوتر المستخدم لاستخدامه لاحقًا بواسطة المتصفح. يتم تخزين ملفات تعريف الارتباط كأزواج مفتاح / قيمة:

document.cookie = 'username='

JSR

MDN

37. لماذا نحتاج ملفات تعريف الارتباط؟

تُستخدم ملفات تعريف الارتباط لحفظ معلومات حول المستخدم (لا يوصى باستخدامها لتخزين المعلومات السرية). عادة ، تتكون هذه العملية من مرحلتين:

• في أول زيارة للصفحة ، يتم حفظ ملف تعريف المستخدم في ملف تعريف ارتباط
• عند إعادة زيارة الصفحة ، يتم استرداد ملف تعريف المستخدم من ملف تعريف الارتباط

JSR

MDN

38. ما هي إمكانيات ملفات تعريف الارتباط؟

بشكل افتراضي ، يتم حذف ملفات تعريف الارتباط عند إغلاق المتصفح ، ولكن يمكن تغيير ذلك عن طريق تعيين انتهاء الصلاحية بالتوقيت العالمي المنسق:

document.cookie = 'username=; expires=Sat, 5 Sep 2020 12:00:00 UTC'

بشكل افتراضي ، تنتمي ملفات تعريف الارتباط إلى الصفحة الحالية ، ولكن يمكن أيضًا تغيير ذلك عن طريق تعيين المسار:

document.cookie = 'username=; path=/services'

JSR

MDN

39. كيف أحذف ملفات تعريف الارتباط؟

يمكنك حذف ملفات تعريف الارتباط عن طريق تعيين الوقت المنقضي على أنه العمر. في هذه الحالة ، لا تحتاج إلى تحديد قيمة ملف تعريف الارتباط:

document.cookie = 'username=; expires=Sat, 05 Jun 2020 00:00:00 UTC; path=/;'

يرجى ملاحظة أنه في هذه الحالة من الضروري تحديد المسار لحذف ملف تعريف الارتباط الصحيح. لا تسمح لك بعض المتصفحات بحذف ملفات تعريف الارتباط دون تحديد هذه المعلمة.



JSR

MDN

40. ما هو الفرق بين ملفات تعريف الارتباط والتخزين المحلي وتخزين الجلسة؟

الاختلافات الرئيسية هي كما يلي:



JSR - ملفات تعريف الارتباط

MDN - ملف تعريف الارتباط

JSR - LocalStorage ، SessionStotage

MDN - تخزين الويب

41. ما هو الفرق الرئيسي بين التخزين المحلي وتخزين الجلسة؟

التخزين المحلي هو نفسه تخزين الجلسة ، باستثناء أنه في الأول ، يتم حفظ البيانات حتى عند إغلاق المتصفح وإعادة تشغيله ، وفي الثانية ، يتم حذف البيانات في نهاية الجلسة (إغلاق علامة تبويب المتصفح).



JSR

MDN

42. كيف يمكنني الوصول إلى تخزين الويب؟

يوفر كائن النافذة كائنات WindowLocalStorage و WindowSessionStorage لها خصائص localStorage و sessionStorage ، على التوالي. تنشئ هذه الخصائص مثيلًا لكائن التخزين ، والذي يمكنك من خلاله كتابة البيانات واستردادها وحذفها لمجال معين ونوع التخزين (جلسة أو محلية):

//  
localStorage.setItem('data', document.querySelector('.data').value)
//  
localStorage.getItem('data')

JSR

MDN

43. ما هي الأساليب التي يوفرها تخزين الجلسة؟

يوفر تخزين الجلسة طرقًا لقراءة البيانات وكتابتها وحذفها:

//  
sessionStorage.setItem('key', 'value')

//  
const data = sessionStorage.getItem('key')

//   
sessionStorage.removeItem('key')

//   
sessionStorage.clear()

JSR

MDN

44. ما هو الحدث الذي يحدث عند العمل مع تخزين الويب؟

عندما يتغير التخزين في سياق مستند آخر ، يتم رفع حدث التخزين:

window.onstorage = function () {}

مثال على التعامل مع هذا الحدث:

window.onstorage = event => {
    console.log(\`${event.key}  .
     : ${event.oldValue}.
     : ${event.newValue}.\`)
}

يتيح لك هذا الحدث تنفيذ نوع من الدردشة.



JSR

MDN

45. ما هي استخدامات الويب التخزينية؟

تخزين الويب أكثر أمانًا ويمكنه تخزين بيانات أكثر من ملفات تعريف الارتباط دون التأثير على الأداء. بالإضافة إلى ذلك ، لا يتم إرسال أي بيانات إلى الخادم (في حالة ملفات تعريف الارتباط ، يتم تضمين البيانات في رؤوس الطلبات والاستجابة في كل مرة يصل فيها العميل إلى الخادم). لذلك ، فإن طريقة تخزين البيانات هذه أفضل من ملفات تعريف الارتباط.



JSR

MDN

46. ​​كيف يمكنني تحديد ما إذا كان المستعرض يدعم التخزين على الويب؟

قبل استخدام تخزين الويب ، يوصى بالتحقق من دعم المتصفح لهذه الواجهة:

if (typeof(Storage) !== 'undefined') {
    // 
} else {
    // -  
}

// 
if ('Storage' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

وفقًا لـ CanIUse ، فإن دعم تخزين الويب هو 98٪ اليوم.



JSR

MDN

47. كيف يمكنني تحديد ما إذا كان المستعرض يدعم العاملين في الخدمة؟

قبل استخدام العاملين في الخدمة ، يوصى بالتحقق من دعم المتصفح لهذه الواجهة:

if (typeof(Worker) !== undefined) {
    // 
} else {
    // -  
}
// 
if ('Worker' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

وفقًا لـ CanIUse ، يبلغ دعم عامل الخدمة 94٪ اليوم.



MDN

48. أعط مثالا لعامل الويب

لاستخدام عامل الويب ، عليك القيام بما يلي.

قم بإنشاء ملف للعامل ، على سبيل المثال get-current-time.js:

const getCurrentTime = () => {
    let time = new Date().toLocaleTimeString()
    postMessage(time)
    setTimeout(() => getCurrentTime(), 1000)
}

getCurrentTime()

تُستخدم طريقة postMessage () لإرسال الرسائل إلى الصفحة.

إنشاء كائن عامل:

const worker = new Worker('get-current-time.js')

بعد ذلك نقوم بمعالجة استلام الرسائل من العامل:

<output></output>
<button></button>

worker
    .addEventListener('message', event => document.querySelector('output')
    .textContent = event.data)

سيستمر العامل في معالجة حدث الرسالة حتى بعد انتهاء البرنامج النصي الخارجي من عمله ، لذلك يجب إيقافه قسرًا:

document.querySelector('button')
    .addEventListener('click', () => worker.terminate())

إذا قمت بتعيين العامل إلى غير محدد ، فيمكنك إعادة استخدامه:

worker = undefined

MDN

49. ما هي حدود العاملين على الويب للعمل مع DOM

نظرًا لأن العاملين على الويب يتم إنشاؤهم في ملف منفصل ، فلا يمكنهم الوصول إلى الكائنات التالية:

• نافذة او شباك
• وثيقة
• الكائن الأصل - الكائن الذي بدأ العامل

MDN

50. ما هو الوعد؟

الوعد (الاتصال) هو كائن يتم تنفيذه بقيمة معينة أو يتم رفضه بخطأ. يتم الوفاء بالوعود إما بعد انقضاء فترة زمنية معينة أو بعد وقوع حدث معين. يمكن أن يكون للوعد حالة من ثلاث حالات: معلق ، تم الوفاء به ، ومرفوض.

صيغة الوعد:

const promise = new Promise((resolve, reject) => {
    // 
})

// ,   ,    
const promise = Promise.resolve(value)
promise.then(value => {
    // 
})

مثال على استخدام الوعد:

const promise = new Promise(resolve => {
    const timer = setTimeout(() => {
        resolve('  !')
        clearTimeout(timer)
    }, 5000);
}, reject => {
    reject('-   ')
})

promise
    .then(value => console.log(value))
    .catch(error => console.error(error))
    .finally(() => console.log(' ')) //     "  !"  5    " "

خوارزمية قرار الوعد:







JSR

MDN

51. لماذا الوعود مطلوبة؟

تُستخدم الوعود للعمل مع رمز غير متزامن. إنها بديل لوظائف رد الاتصال ، وتجنب ما يسمى ب "جحيم رد الاتصال" ، مما يجعل الكود أنظف وأكثر قابلية للقراءة.



JSR

MDN

52. اذكر ثلاث حالات محتملة للوعد

الوعود لها ثلاث حالات:

• معلق: المرحلة السابقة لبدء العملية
• مكتمل: اكتملت العملية بنجاح
• مرفوض: فشلت العملية. تم طرح استثناء

JSR

MDN

53. ما هي وظيفة رد الاتصال؟

رد النداء هو وظيفة يتم تمريرها إلى وظيفة أخرى كوسيطة. يتم استدعاء هذه الوظيفة (الداخلية) داخل الأصل (خارجي) لإجراء عملية عند حدوث حدث معين. لنلق نظرة على مثال بسيط:

function callback(name) {
    alert(\`, ${name}!\`)
}

function outer(cb) {
    const name = prompt(',   ')
    cb(name)
}
outer(callback)

في المثال أعلاه ، تطلب الوظيفة الخارجية اسم المستخدم وتخزنه في متغير الاسم. تقوم هذه الوظيفة بعد ذلك بتمرير الاسم إلى وظيفة رد الاتصال ، والتي تُخرج تحية باسم المستخدم.



JSR

MDN

54. لماذا نحتاج الاسترجاعات؟

عمليات الاسترجاعات مطلوبة لأن JavaScript لغة تعتمد على الأحداث. هذا يعني أنه ، على سبيل المثال ، بدلاً من انتظار استجابة لطلب أو معالجة حدث معين ، يستمر JavaScript في الاستجابة للأحداث الأخرى. ضع في اعتبارك مثالاً تصل فيه إحدى الوظائف إلى الواجهة بينما تطبع الأخرى رسالة إلى وحدة التحكم:

function first () {
    //    API
    setTimeout(() => console.log('  '), 1000)
}

function second () {
    console.log('  ')
}

first()
second()
//    "  ",  "  "

كما ترى ، لا تنتظر JavaScript حتى تكتمل الوظيفة الأولى ، لكنها تستمر في تنفيذ الكود. لذلك ، يتم استخدام عمليات الاسترجاعات لمحاكاة عدم التزامن ، مما يمنع حظر مؤشر ترابط البرنامج الرئيسي.



JSR

MDN

55. ما هو رد الجحيم؟

Callback hell هو نمط مضاد حيث تتداخل العديد من وظائف رد الاتصال مع بعضها البعض لتنفيذ منطق غير متزامن. يصعب فهم بنية الكود هذه والحفاظ عليها. قد يبدو مثل هذا:

function first () {
    return function second () {
        return function third () {
            return function fourth () {
                //  ..
            }
        }
    }
}

يعتبر هذا النهج في الترميز ممارسة سيئة ، إلا في حالات الكاري أو التطبيق الجزئي أو تكوين الوظائف.



JSR

MDN

56. ما هي الأحداث التي يرسلها الخادم (SSE)؟

الأحداث المرسلة من الخادم عبارة عن تقنية إعلام دفع تتيح للمتصفحات تلقي البيانات المحدثة من الخادم عبر اتصال HTTP دون إرسال طلب. هذه إحدى طرق الاتصال بين العميل والخادم ، عندما يتم إرسال الرسائل بواسطة الخادم فقط. تُستخدم هذه التقنية لتحديث Facebook / Twitter وأسعار المتجر وموجز الأخبار وما إلى ذلك.



JSR

MDN

57. كيف تستقبل الرسائل (الإخطارات أو الأحداث) التي يرسلها الخادم؟

يتم استخدام كائن EventSource لهذا:

if('EventSource' in window) {
    const source = new EventSource('sse.js')
    source.addEventListener('message', event => document.querySelector('output')
        .textContent = event.data)
}

JSR

MDN

58. كيف يمكنني التحقق من دعم المتصفح لـ SSE؟

يتم ذلك على النحو التالي:

if (typeof EventSource !== 'undefined') {
    // 
} else {
    // SSE  
}

// 
('EventSource' in window)
    ? console.log('ok')
    : console.warn('! ok')

وفقًا لـ CanIUse ، فإن 95٪ من المتصفحات مدعومة حاليًا بواسطة SSE.



JSR

MDN

59. ما هي الأحداث التي تحدث عند العمل مع SSE؟

فيما يلي قائمة بهذه الأحداث:



JSR

MDN

60. ما هي القواعد الأساسية للعمل مع الوعود؟

القواعد الأساسية للعمل بالوعود هي كما يلي:

• الوعد هو كائن يحتوي على طريقة مضمنة أو قياسية ثم ()
• عادة ما تنتهي مرحلة انتظار الوعد بمرحلة تحقيقه أو رفضه
• يجب ألا تتغير حالة الوعد المنفذ أو المرفوض بمجرد حله
• بعد حل الوعد ، يجب ألا تتغير قيمته أيضًا.

JSR

MDN

61. ما هو رد الاتصال في رد الاتصال؟

يمكنك تداخل عمليات الاسترجاعات داخل بعضها البعض من أجل إجراء عمليات معينة بالتتابع:

loadScript('/script1.js', script => {
    console.log(\` ${script} \`)

    loadScript('/script2.js', script => {
        console.log(\` ${script} \`)

        loadScript('/script3.js', script => {
            console.log(\` ${script} \`)
        })
    })
})

JSR

MDN

62. ما هي سلسلة الوعد؟

يُطلق على التنفيذ المتسلسل للمهام المتعددة غير المتزامنة باستخدام الوعود سلسلة الوعد. لنفكر في مثال:

new Promise((resolve, reject) => {
    const id = setTimeout(() => {
        resolve(1)
        clearTimeout(id)
    }, 1000)
}).then(result => {
    console.log(result) // 1
    return result * 2
}).then(result2 => {
    console.log(result2) // 2
    return result2 * 3
}).then(result3 => {
    console.log(result3) // 6
}).catch(error => console.error(error))

خوارزمية التنفيذ:

• الوعد الأول يحل بقيمة 1
• بعد ذلك ، تقوم الطريقة الأولى ثم () بطباعة هذه القيمة إلى وحدة التحكم وإرجاعها مضروبة في 2
• الثاني ثم () يطبع نتيجة الأول ثم () إلى وحدة التحكم (2) ويعيد النتيجة مضروبة في 3
• الأخير ثم () يطبع نتيجة الثانية ثم () إلى وحدة التحكم (6)
• يتم استخدام كتلة catch لمعالجة الأخطاء

JSR

MDN

63. ما هو Promise.all ()؟

Promise.all () هو وعد يأخذ مجموعة من الوعود الأخرى كحجة ويعيد نتائج الوعود التي تم الوفاء بها أو الخطأ إذا تم رفض أحد الوعود. بناء الجملة:

Promise.all([Promise1, Promise2, Promise3])
    .then(results => console.log(results))
    .catch(error => console.error(error))

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



JSR

MDN

64. ما هو Promise.race ()؟

يعرض Promise.race () نتيجة الوعد الأول المنجز أو المرفوض الذي تم تمريره كمجموعة من الوعود:

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, ''))

const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, ''))

Promise.race([promise1, promise2]).then(value => console.log(value)) // ""

JSR

MDN

65. ما هو النظام الصارم؟

لتمكين الوضع المتشدد ، استخدم العبارة "use strict" (أو "use strict") في بداية كل التعليمات البرمجية أو دالة فردية. تم تقديم الوضع الصارم في ES5. في هذا الوضع ، يتم حظر بعض الإجراءات ويتم طرح المزيد من الاستثناءات.



JSR

MDN

66. لماذا تحتاج إلى نظام صارم؟

يتيح لك الوضع الصارم كتابة تعليمات برمجية أكثر أمانًا عن طريق منع حدوث العديد من الأخطاء. على سبيل المثال ، لا يسمح بالإنشاء العرضي للمتغيرات العامة (بدون الكلمة الأساسية ، المتغير = القيمة) ، وتخصيص قيمة لخاصية للقراءة فقط ، خاصية لا يمكن الحصول عليها إلا باستخدام getter ، خاصية غير موجودة ومتغير أو كائن غير موجود. في الوضع غير المقيد ، لا يتم طرح أي استثناء في جميع هذه الحالات.



JSR

MDN

67. كيف يمكنني تمكين الأمان الصارم؟

يتم تمكين الوضع المتشدد من خلال عبارة "استخدام صارمة" (أو "استخدام صارمة") في بداية رمز أو وظيفة. عادة ، تتم الإشارة إلى هذه التعليمات في بداية النص ، أي في مساحة الاسم العالمية:

'use strict'
x = 3.14 // ReferenceError: "x" is not defined

إذا تم تحديد "استخدام صارم" في دالة ، فإن الوضع المتشدد ينطبق فقط على هذه الوظيفة:

x = 3.14 //   
f() // ReferenceError: "y" is not defined

function f () {
    'use strict'
    y = 3.14
}

JSR

MDN

68. ما هو النفي المزدوج المستخدمة؟

النفي المزدوج (!!) يحول القيمة إلى قيمة منطقية. إذا كانت القيمة خاطئة ، فسيتم إرجاع خطأ ، وإلا - صحيح:

const x = 1
console.log(x) // 1
console.log(!!x) // true
const y = ''
console.log(y) // ''
console.log(!!str) // false

ملحوظة:!!! ليس عامل منفصل بل عاملين! ..



MDN

JSR

69. ما هو عامل الحذف المستخدم؟

يستخدم هذا المعامل لحذف خصائص الكائنات وقيم هذه الخصائص:

'use strict'
const user = {
    name: '',
    age: 30
}

delete user.age

console.log(user) // { name: "" }

delete user // SyntaxError: Delete of an unqualified identifier in strict mode

لاحظ أنه في الوضع غير المقيد ، ستفشل محاولة حذف كائن بصمت.

نظرًا لأن المصفوفة هي أيضًا كائن ، فإن تطبيق الحذف على عنصر من المصفوفة سيؤدي إلى حذف قيمته وكتابة غير محدد إليه ، أي يتم الاحتفاظ بفهرس العنصر المحذوف من المصفوفة ولا يتغير طول المصفوفة.



JSR

MDN

70. ما هو نوع العامل المستخدم؟

يستخدم هذا العامل لتحديد نوع المتغير أو التعبير:

typeof 1 // number
typeof [] // object
typeof '' // string
typeof (1 + 2) // number

typeof null // object
typeof NaN // number

JSR

MDN

71. ما هو غير محدد؟

undefined هي القيمة القياسية (القيمة الافتراضية) (القيمة الافتراضية) غير المعرفة (ولكنها ليست مفقودة) لمتغير لم يتم تعيين قيمة له ، بالإضافة إلى متغير غير معروف. هذا هو أحد أنواع البيانات الأولية:

let name
console.log(typeof name) // undefined
console.log(typeof age) // undefined

يمكن تعيين هذه القيمة إلى متغير بشكل صريح:

user = undefined

JSR

MDN

72. ما هو باطل؟

القيمة الفارغة هي قيمة تمثل عدم وجود قيمة محددة بشكل صريح. هذا هو أحد أنواع البيانات البدائية. باستخدام القيمة null ، يمكنك إزالة قيمة المتغير:

const user = null
console.log(typeof user) // object

JSR

MDN

73. ما هو الفرق بين null و undefined؟

الاختلافات الرئيسية هي كما يلي:



JSR - JSR غير محدد

- null

MDN - undefined

MDN - null

74. ما هو التقييم؟

تقيِّم الدالة Eval () السلسلة التي تم تمريرها إليها. يمكن أن تكون السلسلة عبارة عن تعبير أو متغير أو عامل واحد أو أكثر:

console.log(eval('1 + 2')) // 3

//   
const curryCalc = x => operator => y =>
    new Promise((resolve, reject) =>
        resolve(eval(\`x${operator}y\`))
    ).then(
        result => console.log(result),
        error => console.error(' !')
    )

curryCalc(1)('+')(2) // 3
curryCalc(4)('-')(3) // 1
curryCalc(5)('x')(6) //  !

لا يوصى باستخدامه.



JSR

MDN

75. كيفية الوصول إلى محفوظات المتصفح؟

تحتوي المعلومات المتعلقة بتاريخ الحركات بين الصفحات في المستعرض على خاصية محفوظات كائن النافذة. للانتقال إلى الصفحة السابقة أو التالية ، استخدم طرق الرجوع () أو التالي () أو الانتقال ():

const goBack = () => {
    history.back()
    // 
    history.go(-1)
}

const goForward = () => history.forward()

MDN

76. ما هي أنواع البيانات الموجودة في JavaScript؟

هناك 8 أنواع رئيسية في JavaScript:

• رقم لأي رقم: عدد صحيح أو نقطة عائمة ، القيم الصحيحة محدودة بـ ± 2 ⁵³
• bigint للأعداد الصحيحة ذات الطول التعسفي
• سلسلة للسلاسل. يمكن أن تحتوي السلسلة على حرف واحد أو أكثر ، ولا يوجد نوع منفصل للحرف
• قيمة منطقية لصواب / خطأ
• خالية للقيم غير المعروفة - نوع مميز بقيمة فارغة واحدة
• undefined للقيم غير المعينة - نوع منفصل له قيمة واحدة غير محددة
• كائن لهياكل البيانات الأكثر تعقيدًا
• رمز للمعرفات الفريدة

JSR

MDN

77. ماذا يفعل NaN ()؟

تحول الدالة isNaN () القيمة إلى رقم وتتحقق مما إذا كانت NaN.

isNaN('hello') // true
isNaN(100) // false

نسخة أكثر قوة من هذه الوظيفة هي طريقة Number.isNaN () المقدمة في ES6.



JSR

MDN

78. ما هو الفرق بين المتغيرات غير المعلنة وغير المعرفة؟

الاختلافات الرئيسية هي كما يلي:



JSR

MDN

79. ما هي المتغيرات العالمية؟

في المتصفح ، تصبح الوظائف والمتغيرات العامة المعلنة بالكلمة الأساسية "var" ، أو بدون الكلمة الرئيسية (في وضع lax) ، خصائص كائن النافذة العامة (لا يعمل في الوحدات النمطية). يمكن الوصول إلى هذه المتغيرات من أي مكان في البرنامج. لا يوصى باستخدام المتغيرات العالمية. إذا كنت بحاجة إلى إنشاء متغير عام ، فمن الأفضل القيام بذلك بشكل صريح:

window.currentUser = {
    name: ''
}

// 
globalThis.currentUser = {
    name: ''
}

console.log(currentUser.name) // 

شبيبة

80. ما هي المشاكل التي ينطوي عليها إنشاء المتغيرات العالمية؟

يؤدي إنشاء متغيرات عالمية إلى تلويث مساحة الاسم العالمية ، مما قد يتسبب في حدوث تعارض بين أسماء المتغيرات. كما أنه يجعل من الصعب تصحيح الأخطاء واختبار التعليمات البرمجية الخاصة بك.



شبيبة

81. ما هو NaN؟

خاصية NaN العالمية هي قيمة ليست رقمًا. بتعبير أدق ، يشير NaN إلى أن القيمة غير صحيحة ، لكنها لا تزال رقمًا. لذلك تُرجع typeof NaN عددًا.

parseInt('bla') // NaN
Math.sqrt(-1) // NaN

MDN

82. ما هو عمل Finite ()؟

الدالة العامة isFinite () تحول الوسيطة إلى رقم وترجع صحيحًا إذا كان رقمًا عاديًا (محدودًا) ، أي لا NaN ، اللانهاية (اللانهاية الموجبة) ، اللانهاية (اللانهاية السالبة). خلاف ذلك ، يتم إرجاع خطأ.

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false

isFinite(100) // true

هناك أيضًا طريقة Number.isFinite () ، والتي ، على عكس isFinite () ، لا تحول الوسيطة إلى رقم قبل التحقق.



MDN

JSR

83. ما هو تدفق / انتشار الحدث؟

إن تدفق الأحداث (انتشار الحدث) هو الترتيب الذي يقع به الحدث على الصفحة. عندما تنقر على عنصر متداخل ضمن عناصر أخرى ، قبل أن يصل الحدث إلى العنصر الهدف ، فإنه يمر عبر جميع أسلافه بالتسلسل ، بدءًا من كائن النافذة العامة. هناك ثلاث مراحل لتكاثر الحدث:

• من أعلى إلى أسفل - مرحلة الالتقاط أو الغوص
• المرحلة المستهدفة
• من أسفل إلى أعلى - مرحلة الصعود أو الصعود (يجب عدم الخلط بينه وبين رفع المتغيرات - الرفع)

شبيبة

84. ما هو الحدث فقاعات؟

Bubbling هي مرحلة انتشار حدث ، عندما يتم تسجيل الحدث لأول مرة على العنصر الهدف ، ثم أعلى السلسلة من أسلاف هذا العنصر إلى أعلى عنصر (خارجي) - كائن النافذة العامة.



شبيبة

85. ما هو الانغماس أو التقاط الحدث؟

الانغماس هو المرحلة التي يتم فيها إطلاق الحدث ، عندما يتم تسجيله لأول مرة في أعلى عنصر (خارجي) (كائن النافذة العامة) ثم ينزل إلى أسفل سلسلة الأسلاف إلى العنصر الهدف.



شبيبة

86. كيف يتم تقديم نموذج للمعالجة؟

يمكن القيام بذلك بطرق مختلفة:

function submitForm() {
    document.forms[0].submit()
}

form.onsubmit = function(event) {
    event.preventDefault()
    // 
}

form.addEventListener('submit', event => {
    event.preventDefault()
    // 
})

يتم إرسال أي زر في النموذج افتراضيًا ، أي يعمل على تقديم نموذج.



JSR

MDN

87. كيف يمكنني الحصول على معلومات حول نظام التشغيل؟

هذه المعلومات موجودة في كائن الملاح العالمي. يمكن الحصول على بعض هذه المعلومات من خلال خاصية منصتها:

console.log(navigator.platform)

MDN

88. ما هو الفرق بين DOMContentLoaded وأحداث التحميل؟

يظهر حدث DOMContentLoaded عندما يتم تحميل مستند HTML الأصلي بالكامل وتحليله دون انتظار تحميل أوراق الأنماط أو الصور أو الإطارات بالكامل. يتم تشغيل حدث التحميل بعد تحميل الصفحة بالكامل ، بما في ذلك أي موارد إضافية.



JSR

MDN - DOMContentLoaded

MDN - تحميل

89. ما هو الفرق بين الكائنات الأصلية والمضيف (التي يملكها وقت تشغيل التعليمات البرمجية) والعناصر المخصصة؟

الكائنات الأصلية هي جزء من اللغة ويتم تعريفها في مواصفات ECMAScript. هذه الكائنات ، على سبيل المثال ، رقم ، سلسلة ، وظيفة ، كائن ، رياضيات ، RegExp ، تاريخ ، إلخ. يتم توفير كائنات المضيف بواسطة المتصفح أو وقت تشغيل آخر مثل Node.js. هذه الكائنات ، على سبيل المثال ، نافذة ، وثيقة (DOM) ، XMLHttpRequest ، واجهة برمجة تطبيقات الويب (مكدس الاستدعاءات ، قائمة انتظار المهام) ، إلخ. كائنات المستخدم هي أي كائنات تم إنشاؤها في رمز ، على سبيل المثال ، كائن تحتوي على معلومات عن المستخدم:

const user = {
    name: '',
    age: 30
}

JSR

MDN

90. ما هي الأدوات المستخدمة لتأجيل الكود؟

هذه الوسائل هي:

• أدوات المطور داخل المتصفح مثل Chrome DevTools
• تعبير المصحح
• console.log القديمة الجيدة ()

JSR

MDN - مصحح الأخطاء

MDN - وحدة التحكم

91. ما هي مزايا وعيوب الوعود مقابل الاسترجاعات؟

فوائد:

• منع الجحيم من عمليات الاسترجاعات
• السماح بتنفيذ التعليمات البرمجية غير المتزامنة بالتسلسل باستخدام ثم ()
• السماح بتنفيذ التعليمات البرمجية غير المتزامنة بالتوازي باستخدام Promise.all ()
• يحل العديد من مشكلات رد الاتصال (الاتصال متأخرًا جدًا أو مبكرًا جدًا ، مكالمات متعددة بدلاً من واحدة ، إخفاء الخطأ)

سلبيات

• تزداد صعوبة كتابة الكود
• لتوفير الدعم للمتصفحات القديمة ، هناك حاجة إلى polyfill (لم يعد هناك تقريبًا مثل هذه المتصفحات اليوم)

JSR - Promises

JSR - MDN Callbacks

- Promise

MDN - Callback

92. ما هو الفرق بين السمة وخاصية عنصر؟

عندما يقوم المتصفح بتحميل الصفحة ، يقوم بتحليل HTML وإنشاء كائنات DOM منه. بالنسبة لعقد العناصر ، تصبح معظم سمات HTML القياسية تلقائيًا خصائص كائنات DOM. أولئك. يتم تحديد سمة العنصر في الترميز ، ويتم تحديد خصائصه في DOM. على سبيل المثال ، بالنسبة لعلامة النص التي تحتوي على سمة id = "page" ، سيكون لكائن DOM الخاصية body.id = "page".

<input type="text" value=" !">
//     : type  value

const input = document.querySelector('input')
//  
console.log(input.getAttribute('value'))
//  
console.log(input.value)

//   
input.setAttribute('value', ' !')
//   
input.value = ' !'

لاحظ أن مواصفات ECMAScript تحدد أيضًا سمات خصائص الكائن - [[القيمة]] ، [[قابلة للكتابة]] ، [[تعداد]] ، و [[قابلة للتكوين]].



شبيبة

93. ما هي سياسة نفس الأصل (SOP)؟

تحظر سياسة الأصل المشترك (نفس المصدر) الوصول إلى البيانات من مصدر آخر. المصدر هو مزيج من البروتوكول والمضيف والمنفذ. افتراضيًا ، يُحظر مشاركة الموارد عبر المنشأ (CORS) ، أي يتم توفير البيانات فقط استجابة لطلب من نفس المصدر الذي توجد فيه. يمكن تغيير هذا السلوك باستخدام رؤوس HTTP الخاصة.



JSR

MDN - SOP

MDN - CORS

94. ماذا يفعل باطل 0؟

يقيّم عامل الفراغ التعبير الذي تم تمريره ويعيد القيمة غير المعرفة. عادة ، عندما نضغط على أحد الروابط ، يقوم المتصفح بتحميل صفحة جديدة أو إعادة تحميل الصفحة الحالية. يمكنك تجنب ذلك باستخدام التعبير "باطل (0)":

<a href="javascript:void(0)" onclick="alert('!')">  !
</a>

يمكن أيضًا منع عمليات إعادة تحميل الصفحة باستخدام كعب روتين بسيط:

<a href="#"> </a>
//     "#"   URL   

MDN

95. هل JavaScript لغة برمجة مترجمة أو مفسرة؟

JavaScript نفسها هي لغة برمجة مفسرة. يوزع المحرك الكود ويفسر كل سطر وينفذه. ومع ذلك ، تستخدم المتصفحات الحديثة تقنية تسمى في الوقت المناسب (تجميع JIT) حيث يتم تجميع الكود (تحسينه) قبل التنفيذ. هذا يزيد من وقت التحضير لتنفيذ الكود ، لكنه يسرع التنفيذ نفسه بشكل كبير. على سبيل المثال ، يستخدم V8 ، المحرك المستخدم في Chrome و Node.js ، مترجم الإشعال لتحليل الكود ومجمع TurboFan لتحسين الكود.



JSR

MDN

96. هل JavaScript حساس لحالة الأحرف؟

نعم ، JavaScript حساس لحالة الأحرف. لذلك ، يجب أن تكون الكلمات الرئيسية وأسماء المتغيرات والوظائف والكائنات متطابقة عند استخدامها. على سبيل المثال ، اسم const و const someName هما متغيرات مختلفة ، و typeof (1) هو رقم ، و typeOf 1 هو ReferenceError: لم يتم تعريف typeOf.



JSR

MDN

97. هل Java و JavaScript مرتبطان؟

لا ، هما لغتان برمجة مختلفتان. ومع ذلك ، فإن كلاهما ينتميان إلى لغات موجهة للكائنات ، ومثل العديد من اللغات الأخرى ، يستخدم بناء جملة مشابه (إذا ، وإلا ، من أجل التبديل ، كسر ، متابعة ، إلخ) في الأساس ، تعد Java to JavaScript حيلة تسويقية.



JSR

MDN

98. ما هو الحدث؟

الحدث هو رد فعل المتصفح على إجراء معين. يمكن أن يكون هذا الإجراء أحد إجراءات المستخدم ، على سبيل المثال ، النقر فوق زر أو إدخال نص ، أو تحميل صفحة ، أو تلقي استجابة لطلب ، وما إلى ذلك. (الإجراءات التي تؤدي إلى الأحداث ليست بالضرورة خاصة بالمستخدم). يتم تسجيل الأحداث لمزيد من المعالجة.

button.onclick = () => alert('!')

input.addEventListener('change', function() {
    p.textContent = this.value
})

window.onload = () => console.log('  ')

MDN

JSR

99. من اخترع JavaScript؟

تم إنشاء JavaScript بواسطة Brendan Eich خلال الفترة التي قضاها في Netscape Communications. كانت اللغة تسمى في الأصل Mocha ، ثم تمت إعادة تسميتها LiveScript وكانت مخصصة لكل من البرمجة من جانب العميل والبرمجة من جانب الخادم (حيث يجب أن تسمى LiveWire).



JSR

MDN