أهم 25 سؤالاً وإجابة في مقابلات عمل مطوري الويب يجب معرفتها

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

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

فيما يلي قائمة بأهم 25 سؤالاً في مقابلة مطور الويب يجب معرفتها وإجاباتها لمساعدتك على الاستعداد.

1. ما هي أدوار HTML وJavaScript وCSS في تطوير الويب؟

HTML تعني لغة ترميز النص التشعبي وهي اللغة القياسية لتطوير المستندات لنشرها على الويب. JavaScript وCSS هما من الإضافات.

تم تصميم JavaScript في الأصل كلغة برمجة من جانب العميل، حيث يتم تنفيذها في المتصفح لإنتاج المزيد من الوظائف في صفحة الويب. CSS تعني Cascading Style Sheets وتستخدم لعرض العناصر على الشاشة.

2. ما هو تصميم الويب المستجيب

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

الهدف هو أن يبدو موقع الويب جيدًا على جميع الأجهزة، وهذا يستلزم تغييرات ديناميكية تعمل على تقليل أو زيادة أحجام المربعات ومحاذاة بناءً على حجم شاشة الجهاز أو اتجاهه.

3. ما هي فوائد استخدام الإطار؟

هناك العديد من الفوائد لاستخدام إطار عمل في تطوير تطبيقات الويب. وأهم هذه الفوائد هي كما يلي:

1. عملية تطوير أسهل مع أفضل الممارسات.
2. يؤدي التطوير السريع من خلال المشاريع المبدئية إلى توفير الوقت.
3. استخدام الكود الذي تم تجربته واختباره.
4. غالبًا ما يوفر أمانًا أفضل.
5. يوفّر التكاليف، خصوصًا للمشاريع الأكبر حجمًا.

4. ما هو Callback JavaScript؟

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

من الأفضل استخدام وظائف الاستدعاء مع الوظائف غير المتزامنة التي يتعين عليها انتظار الوظائف الأخرى لإنهاء التنفيذ أولاً.

5. شرح النطاق المحلي مقابل النطاق العالمي في JavaScript

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

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

6. شرح Z-Index في CSS

مؤشر z هو خاصية عنصر تُستخدم لتحديد ترتيب العناصر في المكدس. يشير ترتيب المكدس إلى قدرة العنصر على أن يكون خلف العناصر الأخرى أو أمامها تمامًا مثل كومة البطاقات.

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

7. ما هو Marquee في HTML؟

Marque عبارة عن علامة حاوية في HTML، تُستخدم لعرض النص المتحرك. تتيح لك التحكم في اتجاه التمرير، وكذلك السرعة. ومع ذلك، فإن Marquee غير مستخدم في HTML5، وننصحك باستخدام CSS بدلاً من ذلك.

مثال على التمرير باستخدام marquee:

نص التمرير المميز

8. قم بإدراج الطرق الرئيسية لتقليل وقت تحميل الصفحة

هناك العديد من الخطوات التي يمكن للمطور اتخاذها لتحسين وقت تحميل الصفحة، وأهمها:

• تحسين الصور وتقليل حجمها
• تخلص من الأدوات غير الضرورية
• تقليل عمليات البحث إلى الحد الأدنى
• استضافة الموقع على استضافة لائقة
• استخدم صفحات الجوال المُسرّعة أو المواقع الثابتة
• تحميل الصور كسول
• تصغير الكود الخاص بك

9. ما هي الاختلافات بين Canvas وSVG؟

SVG تعني رسومات المتجهات القابلة للتطوير و العلامة هي عنصر حاوية لإنشاء رسومات، مثل الدائرة أو المربع أو القطع الناقص وما إلى ذلك. يمكنك تعديل SVG باستخدام CSS أو JavaScript، وكونها قابلة للتطوير يعني أنها تعمل بشكل جيد للمخرجات عالية الدقة.

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

10. كيف فارغة تختلف عن غير محدد?

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

في JavaScript:

متغير varA؛

var المتغيرB = null؛

تنبيه(متغير أ)؛ //يظهر غير معرف

تنبيه(متغيرB)؛ //يظهر قيمة فارغة

11. كيف يختلف المعرف عن الفئة؟

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

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

12. كيف يمكنك تحسين ميزات الأمان لموقع الويب الخاص بك؟

تتضمن الخطوات القليلة التي يمكنك اتخاذها لتحسين أمان موقع الويب ما يلي:

1. فرض سياسة قوية لكلمة المرور. وهذا يعني التحقق من أن كلمة المرور المحددة تتكون من أكثر من 8 أحرف وتحتوي على أرقام وأحرف خاصة وأحرف كبيرة وصغيرة.
2. استخدام الكابتشا أو أي إجراء مضاد للروبوت.
3. استخدام أساليب المصادقة ثنائية العوامل أو متعددة العوامل مثل كلمات المرور لمرة واحدة (OTPs) وأجهزة المصادقة اللاسلكية، عند الضرورة.
4. استخدام مضيف مزود بحماية DDoS وميزات النسخ الاحتياطي التلقائي.

13. كيف يختلف localStorage عن sessionStorage؟

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

14. قائمة تحسينات HTTP2.0 مقارنة بـ HTTP 1.1

تم نشر بروتوكول HTTP/2 في عام 2015 ويقدم تحسينات كبيرة، مثل:

1. تحسين الأمان باستخدام الثنائي بدلاً من النص.
2. أداء أفضل.
3. انخفاض زمن الوصول.
4. معالجة أفضل للأخطاء.
5. انخفاض النفقات العامة.

15. ما هو الفرق بين Git Pull و Git Merge؟

يتيح لك الأمر git pull تنزيل المحتوى من مستودع بعيد، ثم يقوم بتحديث المستودع المحلي لديك بالمحتوى الذي تم تنزيله.

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

16. كيف يختلف GET عن POST و PUT؟

يتم استخدام طريقة HTML GET بواسطة المتصفح لطلب المعلومات من الخادم، بينما يتم استخدام طريقتي POST وPUT لإرسال المعلومات من المتصفح إلى الخادم.

ولكن بينما يمكن لطلب POST ببساطة إضافة بيانات إلى مورد الخادم، يتم استخدام طلب PUT لاستبدال المورد بالكامل باستخدام حمولة الطلب.

17. قم بإدراج تنسيقات تبادل البيانات الأكثر شيوعًا

وفيما يلي تنسيقات تبادل البيانات الأكثر شيوعًا حتى الآن:

1. XML
2. YAML
3. CSV
4. JSON
5. HTTP
6. SQL

18. قم بإدراج الأنواع الثلاثة من الصناديق المنبثقة

تُستخدم المربعات المنبثقة في JavaScript لعرض الرسائل للمستخدم، وطلب الإدخال، وأحيانًا للقيام بالأمرين معًا. فيما يلي الأنواع الثلاثة من النوافذ المنبثقة في JavaScript:

1. مربع التنبيه - يعرض هذا رسالتك بالإضافة إلى زر "موافق".
2. تأكيد المربع – يتضمن مربع الحوار هذا كلاً من أزرار "موافق" و"إلغاء" التي يمكن أن تؤثر على الكود.
3. صندوق موجه – يتضمن هذا المربع مربع إدخال نص لجمع المعلومات من المستخدم.

19. اذكر الطرق المختلفة لتضمين كود CSS

هناك ثلاث طرق لتضمين CSS في مستند HTML، وهي:

1. CSS خارجي - يمكنك تضمين مستند .css باستخدام داخل المستند العلامات.
2. CSS مضمن - قم بتضمين كود CSS داخل العلامات، في أي مكان في المستند.
3. مضمنة CSS - يمكنك استخدام الزوج style=”CSS-property:value” داخل علامات HTML الخاصة بك، على سبيل المثال. بي سكوير!

20. كيف نافذة التحميل تختلف عن document.onload؟

يتم استخدام Window.onload لتشغيل كود JavaScript بمجرد أن يقوم المتصفح بتحميل شجرة DOM الخاصة بالصفحة والأساسيات الأخرى، بما في ذلك الصور وكود CSS والبرامج النصية.

على الرغم من أن document.onload يتم تنفيذه فورًا بعد أن يصبح DOM جاهزًا، إلا أن هذا قد يعني حتى قبل تحميل الصور والمكتبات الخارجية.

21. كيف تقوم بإخفاء عنصر باستخدام CSS؟

يمكنك إخفاء عنصر HTML باستخدام 3 طرق CSS وهي:

1. العرض: لا يوجد؛ - لا يتم تقديم العنصر أو عرضه.
2. الرؤية: مخفية؛ - يتم عرض العنصر ولكن لا يتم عرضه.
3. الموقع : مطلق؛ - يتم عرض العنصر وتقديمه، ولكن يتم وضعه خارج منطقة العرض.

22. ما هي أفضل استخدامات أجاكس؟

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

23. قم بإدراج بعض الميزات الجديدة في CSS3

يتضمن CSS3 العديد من الميزات الحديثة والمفيدة على CSS2، مثل:

1. زوايا مستديرة للصناديق والصور.
2. تحريك الأشياء.
3. المتغيرات والوظائف للإعلانات.
4. شبكة و Flexbox لتصميم مستجيب.
5. تدرجات الألوان الخلفية.
6. التحكم في التعتيم باستخدام rgba.
7. تأثير الظل للمربعات والنصوص.
8. انتقالات للتمرير والتركيز على العناصر.

24. ما هي أنواع الإدخال الجديدة التي تم تقديمها في HTML5؟

نوع الإدخال هو القيمة التي تعطيها لعنصر الإدخال في مستند HTML.

مثال:

or

تتضمن أنواع الإدخال الجديدة في HTML5 ما يلي:

1. التاريخ
2. لون
3. البريد الإلكتروني
4. البحث
5. الهاتف
6. شهر
7. نطاق الأرقام
8. شهر
9. URL
10. التاريخ والوقت المحلي

25. وصف عناصر الوسائط HTML5

يتضمن HTML5 المزيد من علامات العناصر للتعامل مع أنواع الوسائط والمصادر. وهي:

• - لمقاطع الفيديو MP4 وWebM وOgg.
• - تعريف مصادر متعددة بتنسيقات مختلفة.
• - لملفات الصوت MP3 وOgg وWAV.
• - حاوية لتضمين الموارد الخارجية من الصور والفيديو وصفحات الويب.
• - لتحديد مسارات الترجمة لمقاطع الفيديو.

خاتمة

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

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