التحضير لمقابلة أمامية: 15 سؤالا

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







1. ما هو DOM؟



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



2. ما الفرق بين عنصري <span> و <div>؟



  • <span> هو عنصر مضمن.
  • <div> هو عنصر كتلة.


<div>يجب استخدام العناصر لتصميم أقسام من المستند. وتعمل العناصر <span>كحاويات لكميات صغيرة من النص ، للصور وعناصر الصفحة المماثلة الأخرى.



تجدر الإشارة إلى أنه لا يمكنك وضع عناصر الكتلة على العناصر المضمنة. إليك مثال يوضح ، من بين أشياء أخرى ، الموضع غير الصحيح لعنصر كتلة داخل عنصر مضمن (هذا جزء يتم <div>I'm illegal</div>وضعه داخل عنصر <span>):



<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>


3. ما هي العلامات الوصفية؟



العلامات الوصفية هي علامات تم العثور عليها في علامة الصفحة <head>التي تصف محتوى الصفحة. لا يتم عرض العلامات الوصفية على الصفحة. تم العثور عليها فقط في رمزها.



مهمتهم الرئيسية هي وصف محتوى الصفحات بإيجاز لمحركات البحث. هذا مثال:



<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description search engines use">
  <meta name="keywords" content="Keywords, of, your, page">
  <meta name="author" content="Me">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


4. ما الفرق بين المعرف ومحددات الفئة في CSS؟



المعرفات ( id) فريدة. يمكن أن يحتوي العنصر على معرّف واحد فقط. يمكن أن يتواجد عنصر واحد فقط بمعرف معين على الصفحة.



أسماء الفئات ( class) ليست فريدة. يمكن تعيين نفس الفئة لعناصر متعددة. يمكن تعيين فئات متعددة لعنصر.



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



5. كيف تستخدم استعلامات الوسائط في CSS؟



تستخدم استعلامات الوسائط قاعدة @mediaتتيح لك تطبيق أنماط CSS على أنواع مختلفة من المحتوى. يمكن أيضًا استخدام استعلامات الوسائط لتخصيص عناصر الصفحة بناءً على خصائص البيئة التي يتم عرض الصفحات فيها.



/*      <div>  "red"   ,      600px   */
@media only screen and (max-width: 600px) {
  div {
    background-color: red;
  }
}


6. ما هي الفئات الزائفة في CSS؟



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



هذا مثال:



/* 
     <a>,      ,     green. 
*/
a:hover {
  color: green;
}
/*     <a>      purple.*/
a:visited {
  color: purple;
}


إذا تم سؤالك عما إذا كان يمكنك تسمية أي فئات زائفة ، فإليك صفحة بها قائمة كبيرة منها.



7. ما هو الفرق بين الأنواع التالية من مواضع العناصر: نسبي ، ثابت ، مطلق ، ثابت؟



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


8. ما الفرق بين طلبات PUT و POST؟



تؤدي طلبات PUT إلى استبدال المورد الهدف بالبيانات المرسلة في الطلب. يمكن استخدامه لتحديث محتوى مورد موجود أو لإنشاء مورد جديد.



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



هناك اختلاف آخر بين طلبات PUT و POST وهو أن طلبات PUT غير فعالة ، لكن طلبات POST ليست كذلك. وهذا يعني أنه إذا تم تنفيذ طلب يتم فيه إرسال نفس البيانات ويتم تنفيذه على نفس عنوان URL عدة مرات ، فهذا يعادل تنفيذ هذا الطلب مرة واحدة. تنفيذ طلب POST عدة مرات لا يعادل تنفيذه مرة واحدة. أي أن العديد من هذه الطلبات ، على سبيل المثال ، يمكن أن تؤدي إلى إنشاء كائنات متعددة على الخادم.



9. ما هو الفرق بين تقنية الاستقصاء الطويل وبروتوكول WebSocket والأحداث التي تم إنشاؤها بواسطة الخادم؟



  • Long Polling . , , , . .
  • WebSocket .
  • , , HTTP-, .


10. -, ?



التخزين المحلي ، كما يوحي الاسم ، هو مكان يمكن للمتصفحات استخدامه لتخزين البيانات محليًا. يمكنه تخزين ما يصل إلى 10 ميغا بايت من البيانات. تخزين الجلسة هو نوع من التخزين المحلي المرتبط بالجلسة ويتم حذفه بعد اكتمالها. يمكن لتخزين الجلسة تخزين ما يصل إلى 5 ميغابايت من البيانات.



تُستخدم ملفات تعريف الارتباط لتخزين كميات صغيرة من البيانات لا تتجاوز 4 كيلوبايت. يمكن استخدامها بواسطة المتصفح ، ويمكن للخادم طلبها من المتصفح.



11. ما هو CORS؟



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



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



الوعود هي كائنات يستخدمها JavaScript عند إجراء عمليات غير متزامنة. إنها تسهل العمل مع العمليات غير المتزامنة وتوفر آليات معالجة الأخطاء أكثر ملاءمة من عمليات الاسترجاعات والأحداث.



13. ما هي الدول التي يمكن أن يكون فيها الوعد؟



يمكن أن يكون الوعد في إحدى الحالات الثلاث:



  1. تم الوفاء - العملية المرتبطة بالوعد اكتملت بنجاح.
  2. مرفوض - اكتملت العملية المرتبطة بالوعد بخطأ.
  3. معلق - الوعد في حالة معلقة ، أي أنه لا يمكن القول أنه تم بنجاح أو بوجود خطأ.


14. ما هو الرفع المتغير والوظيفة في JavaScript؟



متغيرات ووظائف الرفع هي حركة إعلاناتها إلى أعلى نطاقها (النطاق العام أو النطاق الوظيفي).



15. ما هي القيم الخاطئة في JavaScript؟



في JavaScript ، القيم الخاطئة هي قيم تصبح قيمًا عند تحويلها إلى نوع منطقي false. هذه هي القيم التالية:



  • لا شيء
  • غير معرف
  • ن
  • خاطئة
  • -0
  • 0n // قيم النوع BigInt ، عند تحويلها إلى نوع منطقي ، تتصرف بنفس سلوك قيم النوع Number


النتيجة



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



أعتقد أن هناك الكثير من أسئلة JavaScript للتحضير للمقابلة الأمامية أكثر مما تم تناوله في هذه المقالة. يمكن أن يكون تحليل الأسئلة حول TypeScript مفيدًا جدًا أيضًا.



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



ما هي الأسئلة التي تم طرحها عليك في المقابلات الأمامية؟










All Articles