ویرگول
ورودثبت نام
مصطفی حسینی
مصطفی حسینی
خواندن ۳ دقیقه·۲ سال پیش

فرانت اند چیست و توسعه دهنده فرانت اند چه می‌‌کند؟

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


فرانت اند چیست؟

توسعه سمت کاربرِ وب (به انگلیسی: Front End web development) عمل برنامه‌نویسی اچ‌تی‌ام‌ال(HTML)، سی‌اس‌اس(CSS) و جاوااسکریپت(JavaScript) برای تولید یک سایت یا یک برنامه کاربردی وب است که به‌طور مستقیم یک کاربر می‌تواند آن را ببیند و با آن در تعامل باشد.
ویکی‌پدیا

به طور کلی هر چیزی که در یک وبسایت می‌بینید، مثل دکمه‌ها، لینک‌ها، انیمیشن و...، توسط یک توسعه دهنده فرانت اند ساخته شده. وظیفه توسعه دهنده فرانت اند اینه که طرح یک طراح رابط کاربری(UI Designer) رو با استفاده از ابزارهای برنامه‌نویسی تبدیل به یک صفحه وبسایت بکنه تا کاربر اون رو ببینه و بتونه با اون ارتباط برقرار کنه. همچنین توسعه دهنده هنگام طراحی یک وبسایت، باید مطمئن بشه که طراحی اون در همه دستگاه‌ها(لپ‌تاپ، موبایل و ...) خوب و قابل دسترسی باشه.


مهارت‌های مورد نیاز یک توسعه‌دهنده فرانت اند چیست؟

سه ابزار اصلی یک توسعه‌دهنده فرانت اند اچ‌تی‌ام‌ال(HTML)، سی‌اس‌اس(CSS) و جاوااسکریپت(JavaScript) هستند.

اچ‌تی‌ام‌ال(HTML)

‌کلمه HTML مخفف HyperText Markup Language به معنی زبان نشانه‌گذاری فرامتنی هست. وظیفه HTML نشانه‌گذاری محتوای صفحه با استفاده از برچسب‌ها(Tag) برای توصیف نحوه نمایش اون صفحه روی مرورگرهای وب هست.

نمونه کد HTML :

<html>
  <head>
    <title>Href Attribute Example</title>
  </head>
  <body>
    <h1>Href Attribute Example</h1>
    <p>
      <a href=&quothttps://www.freecodecamp.org/contribute/&quot>The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
    </p>
  </body>
</html>

سی‌اس‌اس(CSS)

‌کلمه CSS مخفف Cascading Style Sheets به معنی شیوه‌نامه آبشاری هست. وظیفه CSS توصیف ظاهر صفحه‌ای هست که با HTML نوشته شده، مثل رنگ‌ها، نوع قلم، اندازه‌ها و ... .

نمونه کد CSS :

body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }

بخشی از صفحه اصلی ویرگول بدون CSS :


جاوااسکریپت(JavaScript)

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

این یه مثال ساده از کارکرد جاوااسکریپت هست و در عمل هرنوع عملکردی که در یک صفحه وبسایت هست به وسیله جاوااسکریپت انجام میشه.


به طور کلی میشه گفت HTML نقش بنای یک ساختمان، CSS نقش ظاهر و نمای اون و JavaScript نقش عملکرد(Functionality) اون رو داره.

منابع


توسعه دهندهفرانت انددولوپرcsshtml
مصطفی حسینی
مصطفی حسینی
https://github.com/KavrinDEV
شاید از این پست‌ها خوشتان بیاید