در این مقاله می آموزیم که برنامه نویسی فرانت اند چست؟ چه کاربردهای دارد و به شرح چند بخش مهم فرانت اند پرداخته ایم، و به طور جداگانه مزایا و معایب دسته های زبان برنامه نویس به سبک فرانت اند را شرح داده ایم.​برنامه نویسانی که در حوزه ی وب کار می کنند، به دو دسته ی برنامه نویس بک اند و برنامه نویس فرانت اند تقسیم می شوند، در واقع برنامه نویسی وب به دو روش بک اند و فرانت اند امکان پذیر است. در ادامه ی این مقاله ما برنامه نویسی Front End را مورد بررسی قرار می دهیم.

برنامه نویسی فرانت اند چیست؟

به قسمتی از یک وبسایت یا نرم افزار که برای همه ی کاربران قابل مشاهده است، Front End  فرانت اند گفته می شود. کدهای فرانت اند برای کاربران غیرقابل فهم است،ولی در قالبهای گرافیکی و بصری قابل نمایش است، تا کاربران عادی بتوانند بدون دردسر از همه ی بخش های سایت استفاده کنند. در این بخش ها باید فرم های ورودی اطلاعاتی نظیر صدا – تصویر – ویدئو و… که برای کاربران عادی قابل درک است، قرارگیرد.

فرانت اند به دو دسته ی طراحی و توسعه رابط کاربری تقسیم شده است. در بخشطراحی، طراح با نرم افزارهای مرتبط گرافیکی مثل ادوبی ایکس دی – فیگما – فتوشاپ ظاهر سایت را طراحی می کنند. دسته ی توسعه رابط کاربری برای پیاده سازی ظاهر سایت در قالب کدهای جاوا اسکریپت – html – css نوشته می شود. لازم به ذکر است به بخشهای قابل مشاهده برای کاربران در سمت فرانت را سمت کاربر یا Client Side گفته می شود.

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

چگونه یک برنامه نویس سالیدیتی شویم؟

زبان برنامه نویسی فرانت اند:

برای برنامه ویسی به روش فرانت اند، زبانهای زیادی وجود دارد، ولی در بین این زبانها سه زبان به عنوان زبان اصلی و مهم هستند: زبان برنامه نویسی جاوا اسکریپت و css  و html ولی برنامه نویسان با ارتقا دادن هرکدام از این زبان ها توانسته اند در قالبهای جدیدی در نسخه های مختلف به وجود آورده اند. مانند زبان برنامه نویسی تاپ اسکریپت که نسخه ی ارتقا یافته ی جاوا اسکریپت است، و کدنویسی آن با بعضی از فریمورک ها مانند انگولار استفاده شده است. در ادامه قصد داریم در مورد هرکدام از کدهای برنامه نویسی فرانت اند توضیحاتی بیان کنیم.

زبان HTML : این کلمه مخفف شدهی Hyper Text Markup Languag که در فارسی به نشانه گذاری ابر متن معنا شده است. البته نمی توان زبان HTML را زبان برنامه نویسی عنوان کنیم، زیرا که این زبان نشانه گذاری است و برای هسته و بدنه ی اصلی صفحات وب نوشته می شود. زبان نشانه گذاری به این نحو است که با زبان html مانند فایلهای متنی، هرکدام از اجزای مختلف آن با یک تگ از هم جدا شده اند. با این زبان می توانیم ساختار صفحات وب را ایجاد کنیم.

مزایای زبان html 

•  یادگیری لذت بخش و آسانی دارد
•  قابل اجرا در همه ی مرورگرها است
•  متن باز و رایگان دارد
•  می توان با زبانهای سمت سرور مثل php  به راحتی آن را ادغام کرد

معایب زبان html :

• یکی از معایبی که این کدنویسی دارد استاتیک است و به زبانهای سمت سرور برای تعامل کاربر وابسته است.
• دیگر اینکه در پشتیبانی مرورگرهای قدیمی ضعف دارد.
• این کدنویسی چون قواعد منطقی برنامه نویسی ندارد باید برای هر صفحه به طور جداگانه طراحی شود.

زبان برنامه نویسی css : این کلمه مخفف Cascading Style Sheets که برای استایل دهی هر یک از اجزای صفحه وبسایت مثل تصویر – متن – کادر و… می توان استفاده کرد. در واقع باید اجزا و المان های سایت یا برنامه را با html در صفحه قرارداد، و با css برای المانها شکل و ظاهر بدهیم و شخصی سازی کنیم. باید عنوان کنیم که طراح سایت با css بدون محدودیت خلاقیت های خود در صفحات سایت را پیاده سازی می کند؛

آموزش سالیدیتی برنامه نویسی قرارداد هوشمند Smart contracts

ویژگی های زبان css

Css در ۴ نسخه css1 تا css4 عرضه شده است. در آخرین نسخه ای که عرضه شده این ویژگیها وجود دارد:

ایجاد سبک و تنظیم Font face و Emphasis

قابلیت تغییر رنگ – تخصیص رنگ برای پس زمینه و هریک عناصر دیگر متن

می توان کادر – حاشیه –و لایه بندی به صفحات وب اضافه کرد

می توان کلاس بندی گروهی از ویژگیها ایجاد کرد

می توان برای اجسام به سه روش ثابت – متغیر – وابسته به سایر اجسام

جایگاه تنظیم کرد شناخت انواع فایلها طراح میتواند متن را چپ چین یا راست چین تنظیم کند امکان استفاده تصویر در پس زمینه و اضافه کردن فرم های چند ستونی

مزایای css

1.  این کدنویسی تمیزتری خواهد بود.
2.  از یک قطعه کد css میتوان برای صفحات html هم استفاده کرد و در زمان صرفه جویی کرد.
3. برای بهبود سئو سایت بهتر است از این کد استفاده شود، و این کد به سئو سایت SEO Friendly کمک میکند.
4. این کدنویسی تأثیر بسیار خوبی در زیبایی و دسترس پذیری صفحات وب دارد
5.  پشتیبانی از صفحات وب در همه ی دستگاه و مرورگرهای مختلف و با این
6. کد نویسی تجربه کاربری خوبی می توان داشت.
7.  کد css نسبت به html ویژگیهای بیشتری برای کار با اجزای صفحات دارد
8.  برای سرعت وبسایت و زمان بارگذاری کمتر برای صفحات وب، بهتری دارد.
9.  امکان ساخت جلوه های تصویری و انیمیشنی جذاب دارد.
10.  می توان کدها را به آسانی نگه داشت
11. جلوگیری از کدنویسی کثیف و غیراصولی

معایب css

این زبان هم مانند دیگر زبانها ضعف و محدودیتهای دارد:

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

• در زمان ارجاع script های بخش کاربر و تغییر Selector ها نمی تواننامگذاری نقشها را انجام داد.

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

• به علت اینکه متن باز است، و دسترسی برای هر تغییری باز است؛ در بعضی مواقع برنامه نویس را دچار مشکل تغییرات ناخواسته می اندازد و روی کل سایت تأثیر خواهد گذاشت.

کسب درآمد دلاری با قرارداد هوشمند

زبان برنامه نویسی Javascript

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

مزایای زبان جاوا اسکریپت:

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

مزایای جاوا اسکریپت:

• سخت بودن در تشخیص خطاها و مشکل در دیباگ کردن
• ایجاد محدودیتهای که برای حفظ امنیت دارد در اجرا اسکریپت ها محدوداست.
• در مرورگرهای قدیمی اجرا نمی شود
• نفوذپذیری
• برای اجرای کدهای مخرب از کامپیوتر کاربر استفاده می کند.
• با رندر شدن روی ابزارها می تواند باعث تناقض شود.
• نداشتن یکپارچگی

دوره های آموزشی آکادمی ماکان

نتیجه گیری مقاله برنامه نویسی فرانت اند :

با خواندن این مقاله آموختیم که فرانت اند چه کاربردی دارد، چه مواقعی استفاده می شود. همچنین به این مطلب پی بردیم که برای کدنویسی موردنظر خودمان بهتر است از کدام یک از روشهای برنامه نویسی فرانت اند یا بک اند استفاده کنیم، و آموختیم که کدام یک از دسته های css –html یا جاوا اسکریپت برای برنامه نویسی موردنظر ما مناسب تر است.