۴۵ سوال و جواب مصاحبه استخدام برنامه نویس فرانت اند

تقاضاهای زیادی برای استخدام برنامه نویس فرانت اند با حقوق مناسب وجود دارد. اگر فکر می‌کنید که مهارت‌های لازم برای تبدیل شدن به برنامه نویس فرانت‌اند را دارید، با ما همراه شوید. این مقاله در مورد سؤالات مصاحبه استخدام برنامه نویس فرانت اند است.

سوالات مصاحبه استخدام برنامه نویس فرانت اند تازه کار

۱.متا تگ‌ها در HTML چیست؟

• متا تگ‌ها آن دسته از تگ‌هایی هستند که داخل تگ Head صفحه HTML قرار می‌گیرند.
• متا تگ‌ها برای رابط کاربری نیستند؛ بلکه برای مرورگر مهم هستند.
• متا تگ‌ها همیشه به صورت جفت‌های اسمی یا ارزشی هستند.
• متا تگ‌ها شامل رمزگذاری کاراکتر، عنوان یا حتی توضیحات هستند.

۲.برخی از عناصر اصلی طراحی را بیان کنید

برخی از عناصر اساسی طراحی عبارتند از:

خط(Line): علامت خط که با هر قلم یا براش یا حتی هر لبه ای که هنگام برخورد دو شکل ایجاد می‌شود، قابل ایجاد است.

اندازه(Size): ناحیه‌ای که یک شکل اشغال می‌کند.

بافت(Texture): سطح شکل - صاف، نرم، سخت، براق و مانند اینها

رنگ(Color): نور منعکس شده از اجسام. سه ویژگی رنگ عبارت از نوع رنگ، مقدار و غلظت هستند.

۳.تعادل بار(load balancing) چیست؟

تعادل بار توزیع تمام ترافیک شبکه ورودی در سراسر سرورهای بک اند است.

۴.NPM مخفف چه چیزی است؟

NPM مخفف Node Package Manager است.

۵. scope در جاوا اسکریپت چیست؟

در جاوا اسکریپت هر تابعی محدوده خاص خودش را دارد. اساساً مجموعه ای از قوانین در مورد نحوه دسترسی به متغیرها و خود متغیرها است.

۶.جاوا اسکریپت و جی کوئری چه تفاوتی دارند؟

JQuery یک لایبرری است که با زبان جاوا اسکریپت ساخته شده است و جاوا اسکریپت خودش نوعی زبان برنامه نویسی است.

۷.خط مشی امنیت محتوا چیست؟

خط‌مشی امنیت محتوا که به نام CSP نیز شناخته می‌شود، یک هدر در HTML است که به اپراتورهای soite کنترل کاملی بر منابع بارگذاری شده در سایت می‌دهد.

۸.Cross-Site Scripting (XSS) چیست؟

هر گاه مهاجمی ‌از یک اپلیکیشن وب برای ارسال هر گونه کد مخرب، به شکل اسکریپت جانبی مرورگر، برای کاربر دیگر استفاده کند، حملهXSS رخ می‌دهد.

۹.طراحی کاربر محور چیست؟

طراح صرفاً روی طراحی‌های کاربر محور تمرکز می‌کند تا مطابق با نیاز کاربران در هر مرحله از طراحی شود.

۱۰.کال بک چیست؟

جاوا اسکریپت از کال بک‌ها استفاده می‌کند و شناخت درست آنها دشوار است. کال بک‌ها به شکل ساختار هرمی ‌روی هم چیده شده‌اند.

۱۱.چند فرمی (Polymorphism) چیست؟

کلمه Polymorphism به معنای داشتن اشکال مختلف است. برای مثال، پلی مورفیسم به یک رابط و چند تابع در فرم شی گرا اشاره دارد.

۱۲.Strict Mode چیست؟

یکی از ویژگی‌های جدید ECMAScript نسخه ۵، حالتStrict است که به شما امکان می‌دهد تا یک تابع یا یک اپلیکیشن را در یک زمینه عملیاتی «Strict» قرار دهید.

۱۳.منظور از اصل KISS چیست؟

KISS، مخفف «Keep it simple, stupid» است. که طراحی اصلی در نیروی دریایی ایالات متحده در سال ۱۹۶۰ بود. طبق اصل KISS، هر چه سیستم ساده تر باشد، بهتر کار می‌کند.

۱۴.SOLID مخفف چیست؟

S.O.L.I.D مخفف اصول طراحی شی گرا است.

S= اصل مسئولیت واحد

O= اصل باز-بسته

L= اصل تعویض لیسکوف

I= اصل جداسازی رابط

D= وابستگی

۱۵.ClickJacking چیست؟

ClickJacking حمله‌ای که به برنامه نویس فرانت اند اجازه فریب دادن کاربران را می‌دهد تا فکر کنند روی یک چیز کلیک می‌کنند، اما در واقع روی دیگری کلیک می‌کنند.

۱۶.Coercion در جاوا اسکریپت چیست؟

به تبدیل دو تایپ مختلف جاوا اسکریپت، Coercion گفته می‌شود. به دو صورت آشکار و ضمنی مطرح است.

۱۷.IIFEs چیست؟

IIFEs مخفف عبارت Immediately-Invoked Function Expression است. یعنی تابع، بلافاصله پس از ایجاد، اجرا می‌شود.

۱۸.سیستم گرید در CSS چیست؟

ساختاری که به محتوا اجازه می‌دهد تا به صورت افقی و عمودی به شیوه‌ای سازگار و قابل مدیریت قرار گیرد. دو جزء کلیدی از سیستم گرید به صورت سطرها و ستون‌ها هستند.

۱۹.میکسین (Mixin) چیست؟

میکسین یک بلوک کد است که به گروهی از اعلان‌های CSS اجازه می‌دهد تا در سایت دوباره استفاده شوند.

۲۰.راه‌های کاهش زمان بارگذاری صفحه را ذکر کنید؟

بهترین راه برای کاهش زمان بارگذاری صفحه عبارت است از:

• بهینه سازی تصویر
• کش مرورگر
• فشرده سازی و بهینه سازی محتوا

یک برنامه نویس فرانت اند، باید جواب سوالات بالا (و یا سوالات مشابه هم سطح موارد فوق) را بلد باشد. برای استخدام برنامه نویس فرانت اند باتجربه، نمونه سوالات و جواب های زیر پرسیده می‌شود:

سوالات مصاحبه استخدام برنامه نویس فرانت اند باتجربه

۱.Stringify چیست؟

برای تبدیل یک object به یکstring در جاوا اسکریپت از Stringify استفاده می‌شود.

۲.عناصر CSS Box Model را بیان کنید.

CSS Box Model از ۴ عنصر تشکیل شده است:

• Content
• Padding
• Border
• Margin

۴.مزیت Srcset چیست؟

هنگامی‌که می‌خواهیم تصاویر دقیق و متعددی را در چندین دستگاه تولید کنیم، از Srcset استفاده می‌شود. این کار به بهبود رابط کاربری کمک می‌کند.

۵.MySQL چیست؟

MySQL یک سیستم مدیریت پایگاه داده رابطه‌ای است که از SQL به عنوان زبان استاندارد خودش برای مدیریت پایگاه داده خودش استفاده می‌کند. MySQL درست مانند سایر پایگاه‌های داده از ساختار Table مانند استفاده می‌کند.

۶.MongoDB چیست؟

MongoDb یک پایگاه داده NoSQL است که عناصر داده را با استفاده از ساختار JSON مانند، نشان می‌دهد. برنامه نویس برای ایجاد تغییرات در MongoDB، باید از زبان Query MongoBD استفاده کند.

سوالات مصاحبه در مورد Git

۱.«Version Control System» چیست؟

سیستم کنترل نسخه (VCS) برنامه‌ای برای ثبت هرگونه تغییر در یک فایل یا مجموعه‌ای از داده‌ها است تا در صورت لزوم امکان بازیابی آن به نسخه قبلی وجود داشته باشد. این کار تضمین می‌کند تا همه اعضای تیم روی به روزترین نسخه فایل کار ‌کنند.

۲.تمایز بین سیستم کنترل نسخه متمرکز و توزیع شده(Centralized and Distributed)

در سیستم کنترل نسخه متمرکز:

• تمام نسخه‌های فایل در یک سرور مرکزی ذخیره می‌شود.
• هیچ برنامه نویسی یک کپی کامل از فایل‌های سیستم محلی ندارد.
• اگر سرور مرکزی پروژه از کار بیفتد، تمام داده‌های پروژه را از دست خواهید داد.

در سیستم کنترل نسخه توزیع شده:

• هر برنامه نویسی یک کپی از تمام نسخه‌های کد را روی کامپیوتر خودش دارد.
• توانایی کار آفلاین را بهبود می‌بخشد و نیاز به یک مکان پشتیبان را از بین می‌برد.
• حتی اگر سرور خراب شود، خطری وجود ندارد.

۳.Git Push و Git Pull را توضیح دهید

Git push فرمانی است که محتویات یک مخزن محلی را به یک مخزن راه دور منتقل می‌کند. پوش پس از تغییر مخزن محلی برای به اشتراک گذاشتن تغییرات با اعضای تیم در راه دور، اجرا می‌شود.

Git pull دستوری است که تغییرات را از یک مخزن راه دور می‌کشد و آن‌ها را در مخزن محلی ادغام می‌کند. از دو دستور یعنی git fetch و سپس git merge تشکیل شده است.

۴.چند دستور و تابع Git را نام ببرید

• Git Config = نام کاربری و آدرس ایمیل را پیکربندی کنید.
• Git init = یک مخزن محلی Git را راه اندازی می‌کنید.
• Git Add = یک یا چند فایل را به قسمت مرحله اضافه کنید.
• Git Diff = تغییرات ایجاد شده در فایل را مشاهده کنید.
• Git Commit = تغییرات را به جای مخزن راه دور درhead انجام دهید.
• Git reset = لغو تغییرات محلی در استیت مخزن Git
• Git Status = وضعیت دایرکتوری کاری و ناحیه مرحله بندی را نمایش می‌دهد.
• Git Merge = یک شاخه را در یک شاخه فعال ادغام کنید.
• Git Push = محتوا را از مخزن محلی به یک مخزن راه دور آپلود کنید.
• Git Pull = محتوا را از یک مخزن راه دور، واکشی و دانلود کنید.

۵.تفاوت بین Git Pull و Git Fetch را توضیح دهید

Git Fetch

• با استفاده از Git fetch فقط داده‌های جدید از یک مخزن راه دور، دانلود می‌شود.
• هیچ یک از این اطلاعات جدید را در فایل‌های کاری شما شامل نمی‌شود.
• برای به روز رسانی شاخه‌های ردیابی از راه دور، Git fetch را در هر زمانی اجرا کنید.
• دستور = git fetch origin

git fetch –-all

Git Pull

• داده‌های جدید را می‌کشد، با فایل‌های کاری فعلی یکپارچه می‌کند و شاخه HEAD فعلی را با آخرین تغییرات از سرور راه دور به‌روزرسانی می‌کند.
• سعی می‌کند تغییرات از راه دور را با تغییرات محلی ترکیب کند.
• دستور = git pull origin master

سوالات مصاحبه در مورد HTML

HTML بخشی جدایی ناپذیر از Frontend Development است. مجموعه زیر از سوالات مصاحبه استخدام برنامه نویس Frontend بر اساس HTML است.

۱.Attribute در HTML چیست؟

• ویژگی‌هایی هستند که می‌توانند به یک تگ HTML اضافه شوند تا نحوه رفتار یا نمایش تگ را تغییر ‌دهند.
• این ویژگی‌ها را درست بعد از نام تگ HTML در داخل براکت‌ها اضافه می‌کند.

۲.Marquee در HTML چیست؟

• marquee برای پیمایش متن در صفحه وب استفاده می‌شود.
• به طور خودکار تصویر یا متن را به بالا، پایین، چپ یا راست اسکرول می‌کند.
• شما باید از تگ‌های برای اجرای marquee استفاده کنید.

۳.Semantic HTML چیست؟ چگونه کار می‌کند؟

• HTML سمانتیک، نوعی کدنویسی است.
• استفاده از نشانه گذاری HTML برای تأکید بر سمانتیک یا معنای محتوا است.
• سناریوی زیر را در نظر بگیرید: تگ برای عبارات بولد در HTML سمانتیک استفاده نمی‌شود، در حالی که عنصر برای ایتالیک استفاده می‌شود.
• در عوض، از تگ‌های و استفاده می‌کنید.

۴.چگونه باید جدولی را در یک صفحه وب HTML نمایش ‌دهید؟

• برای نمایش داده‌ها در قالب جدولی، از تگ HTML table > استفاده کنید.
• همچنین برای کنترل چیدمان صفحه، مانند بخش هدر، نوار ناوبری، محتوای بدنه و بخش پاورقی هم استفاده می‌شود.

۵.SVG در HTML چیست؟

• HTML SVG یک زبان نشانه گذاری است که گرافیک‌های وکتوری و رستری را توصیف می‌کند. فایل‌های متنی XML تصاویر SVG و رفتارهای مرتبط را تعریف می‌کنند.
• معمولاً برای ترسیم نمودارهای سیستم مختصاتی مانند نمودارهای دایره‌ای و نمودارهای دو بعدی از آن استفاده می‌شود.

۶.در HTML چگونه قسمتی از متن را جدا می‌کنید؟

در HTML از تگ‌های زیر برای تقسیم تکه‌ای از متن استفاده می‌شود:

• تگ
  = کاراکتری است که برای شکستن یک خط متن استفاده می‌شود. با شکستن خط موجود، جریان متن را به یک خط جدید منتقل می‌کند.
• تگ

  = این تگ برای ایجاد یک پاراگراف متنی استفاده می‌شود.

• = این تگ برای نشان دادن متون نقل قول درشت استفاده می‌شود.

۷.چگونه صفحات وب تودرتو (Nested Web Pages) در HTML ایجاد می‌کنید؟

• باید به یک صفحه درون یک صفحه وب دیگر به عنوان یک صفحه وب تودرتو اشاره کنید.
• با استفاده از تگ built-in iframe HTML، می‌توانید صفحات وب تودرتو ایجاد کنید.

۸.بین لیست مرتب و نامرتب تمایز قائل شوید.

• یک لیست نامرتب از تگ‌های
  استفاده می‌کند و هر عنصر لیست بین تگ‌های
نوشته می‌شود.
• یک لیست مرتب شده از تگ‌های
  استفاده می‌کند و هر عنصر لیست بین تگ‌های
نوشته می‌شود.

سوالات مصاحبه در مورد CSS

۱.بهترین راه برای گنجاندن CSS Styling در HTML چیست؟

سه روش برای ترکیب CSS در HTML وجود دارد:

• زمانی از CSS درون خطی استفاده می‌کنید که فقط یک عنصر نیاز به استایلینگ دارد یا زمانی که مقدار کمی ‌استایلینگ مورد نیاز است.
• External Style Sheet: هنگامی‌که یک استایل برای بسیاری از عناصر یا صفحات HTML اعمال می‌شود، از شیوه نامه خارجی استفاده می‌کند.
• Internal Style Sheet: شیوه نامه داخلی زمانی که یک سند HTML دارای استایلی متمایز و عناصر متعدد است، استفاده می‌شود.

۳.Sass، Less و Stylus چیست؟

• Sass = مخفف «Syntactically Awesome Style Sheets» است. علامت $ معمولاً قبل از آن قرار می‌گیرد.
• = LESS مخفف «Leaner Stylesheets» است. کمتر از «@» برای تعریف متغیرها استفاده می‌کند.
• =Stylus انعطاف پذیری زیادی در نوشتن سینتکس ارائه می‌دهد. از @ یا $ برای تعریف متغیرها استفاده نمی‌کند.

۴.ویژگی Box Sizing را توضیح دهید

ویژگی Box Sizing نحوه محاسبه ارتفاع و عرض یک کادر را مشخص می‌کند.

• Content Box = عرض و ارتفاع پیش‌فرض فقط برای محتوای عنصر اعمال می‌شود. پد و حاشیه خارج از کادر اضافه شده‌اند.
• Padding Box = به ابعاد محتوای عنصر و هم به پد اضافه می‌کنید. این عمل حاشیه‌ای را به خارج از کادر اضافه می‌کند.
• Border Box = به ابعاد محتوا، پد و حاشیه اضافه می‌شود.

۵.روش‌های مختلف برای مخفی کردن یک عنصر با استفاده از CSS کدامند؟

display: none

محتوا را پنهان می‌کند و در DOM ذخیره نمی‌کند.

visibility: hidden

این فرمان، عنصر را به DOM اضافه می کند و فضا را اشغال می کند. اما برای کاربر قابل مشاهده نیست.

position: absolute

می‌توانید کاری کنید که عنصر، خارج از صفحه نمایش داده شود.

۶.«Important» در CSS به چه معناست؟

کلمه کلیدی «Important» نشان دهنده بالاترین اولویت است و خاصیت آبشاری را لغو می‌کند.