فرانت اند

فرانت اند را از این سایت دریافت کنید.

سون لرن

برای اینکه بدانید برنامه نویسی فرانت اند چیست، موارد مورد نیاز برای یادگیری برنامه نویسی فرانت اند و تفاوت‌های برنامه نویس فرانت اند و بک اند را توضیح می‌دهیم.

مهدی علامه ۱۳ دقیقه ۸۱۰۱۸

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

‏وبلاگ‏ ‏برنامه نویسی‏ ‏فرانت اند‏

آیا کنجکاو هستید که بدانید برنامه نویسی فرانت اند چیست؟ شاید شما هم از جمله افرادی باشید که بارها عبارات فرانت اند و بک اند را شنیده‌اید ولی معنی و مفهوم آن‌ها را نمی‌دانستید. اغلب برنامه نویسانی که در حوزه‌ی وب کار می‌کنند، این سوال را از یکدیگر می‌پرسند: برنامه نویس بک اند هستی یا برنامه نویس فرانت اند؟

برای اینکه بدانید برنامه نویسی فرانت اند چیست و برنامه نویس Front End کیست، ابتدا باید بدانید که Front end چیست؟ ما در این مقاله، برنامه نویسی فرانت اند، موارد مورد نیاز برای یادگیری آن و تفاوت‌های برنامه نویس فرانت اند با سایر حوزه‌ها را توضیح می‌دهیم. پس در ادامه‌ی این مقاله، با وب سایت آموزش برنامه نویسی از صفر سون لرن همراه باشید تا به بررسی این موضوع بپردازیم.

Front end چیست؟

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

فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی می‌کنند. اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است. بخش قابل مشاهده‌ سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side می‌نامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا می‌شوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Backend) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری می‌گذارد.

بیشتر بخوانید :

برنامه نویسی Back End چیست؟ مهارت‌ها و زبان‌های لازم برای برنامه نویسان بک اند

زبان‌های برنامه نویسی Front end کدامند؟

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

زبان HTML

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

زبان CSS

زبان CSS (مخفف عبارت Cascading Style Sheets) به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و… ساخته شده است. در حقیقت شما اجزا و المان‌های یک سایت یا برنامه را با HTML در صفحه‌ی خود قرار می‌دهید و با استفاده از CSS شکل و ظاهر آن المان‌ها را شخصی سازی می‌کنید. پس CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند. سایر اطلاعات مربوط به CSS در مقاله‌ی CSS چیست؟ آورده شده است.

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

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

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

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

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

یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپت

اگر می‌خواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه‌ای با HTML ، CSS و JavaScript کدنویسی کنید. کدنویسی فرانت اند، نسبت به سایر حوزه‌های برنامه نویسی آسان‌تر است و منابع زیادی در اینترنت وجود دارند تا روند یادگیری را سریع‌تر کنند. علاوه بر آن، برای هر مشکلی که به آن برخورد می‌کنید، یک راه حل در انجمن‌های پرسش و پاسخ پیدا می‌شود.

منبع مطلب : 7learn.com

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

برنامه نویسی فرانت اند Front-End چیست؟ این نوع برنامه نویسی چه کاربرد و استفاده هایی دارد؟ با چه زبان های میتوان برنامه نویسی فرانت انجام داد

برنامه نویسی فرانت اند Front-End چیست و چه کاربردی دارد؟

برنامه نویسی

آخرین بروزرسانی ۱۰ مرداد ۱۴۰۱

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

اگر شما هم جزء افرادی باشید که با دنیای دیجیتال سر و کار دارند، حتما می دانید که برنامه نویسی چیست و ابزارهای مورد نیاز امروزی چگونه از طریق کد نویسی و برنامه نویسی کار می کنند. به مرور و با پیشرفته‌تر شدن بخش‌های اینترنت، وب‌سایت‌ها هم با این تغییرات هم‌مسیر و هم‌سو شدند به طوری که مفاهیم جدیدی به فهرست اصطلاحات دنیای کامپیوتر اضافه شد؛ یکی از این اصطلاحات فرانت اند Front-End است.

شاید از خود بپرسید برنامه نویسی فرانت اند Front-End چیست؟ برای دریافت این سوال ابتدا باید تعریفی از فرانت اند و متضاد آن یعنی بک اند یا Back-End داشته باشید. اگر به دنیای تکنولوژی و طراحی وب‌سایت علاقه مند هستید، پیشنهاد می‌کنیم تا انتهای این مقاله با رشدانا همراه باشید؛ چون می‌خواهیم در ارتباط با موضوع Front-End صحبت کنیم.

حتما بخوانید: طراحی سایت چیست؟ چگونه طراحی سایت یاد بگیریم؟

فرانت اند Front-End چیست؟

برای تعریف این تخصص ابتدا باید به معنای واژه Front در لغت‌نامه مراجعه کنیم که چنین معنی شده است: پیش، جلو، جلودار، به طرف جلو، روبرو و مواردی از این دست. بنابراین، می‌توان نتیجه گرفت که تخصص فرانت اند Front-End به بخش‌های جلو و مقابل اشاره دارد. یعنی تمام آن بخش‌هایی که کاربر با آن‌ها تعامل دارد و ارتباط برقرار می‌کند؛ از این رو به آن، Client Side نیز گفته می شود. طراح یا کدنویس این بخش را Front-End Developer می‌نامند. تمام آن چه که کدنویس فرانت اند طراحی می‌کند، کاربر و مخاطبان آن را می‌بینند.

تفاوت بک اند Back-End و فرانت اند Front-End چیست؟

برای درک مفهوم فرانت اند و بک اند، ابتدا باید بدانید که دو عبارت فرانت اند Front-End و بک اند Back-End از نظر مفهومی با یکدیگر تضاد دارند و به دو معنی کاملا مختلف به کار می‌روند. به این ترتیب، کدنویسی بک اند به تمام بخش‌هایی اشاره دارد که کاربر نمی‌بیند و این بخش‌ها باعث تسهیل کارایی و سرعت وبسایت می‌شوند. برنامه‌نویسی چنین بخش‌هایی توسط بک اند دولوپر یا Back-End Developer انجام می‌شود. اگر بخواهیم یک مثال در ارتباط با این موضوع داشته باشیم، مورد دیتابیس گزینه خوبی است. دیتابیس بخشی است که وبسایت اطلاعات مورد نیاز خود را از آن می‌گیرد که نیاز به کدنویسی دارد. کاربرها و مخاطبان وب‌سایت‌ها این کدها و نحوه تعامل وبسایت و دیتابیس را نمی‌بینند.

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

تفاوت UI Designer و فرانت اند Front-End چیست؟

UI Designer یا طراح رابط کاربری، مانند برنامه‌نویس فرانت اند خودش کدنویسی نمی‌کند بلکه طراحی عناصر مختلف صفحه را برعهده دارد. ابزار کار طراح رابط کاربری فوتوشاپ و اسکچ یا Xd است؛ پس کاری که طراح رابط کاربری انجام می‌دهد، شامل بخش‌های گرافیکی طراحی سایت است اما فرانت اند دولوپر این بخش‌ها را کدنویسی می‌کند.

حتما بخوانید: طراحی رابط کاربری UI چیست؟

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

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

زبان HTML

HTML یکی از زبان‌های برنامه‌نویسی نشانه‌گذاری است که برای توسعه فرانت اند سایت‌ها و وب اپلیکیشن‌ها کاربرد دارد. این زبان به اختصار از عبارت Hypertext Markup Language برگرفته شده است. پس از انتشار اولین نسخه آن در سال ۱۳۷۳، به طور منظم به‌روزرسانی شده و در هر نسخه آن ویژگی‌های کاربردی و جدیدی اضافه شده است که آخرین نسخه آن، HTML۵ می‌باشد. این زبان طوری طراحی شده که افراد مبتدی و تازه‌کار هم می‌توانند به راحتی کار خود را با یادگیری آن شروع کنند. از طرفی دیگر، از آنجایی که HTML در اکثر سایت‌های موجود در اینترنت کاربرد دارد، می‌توان آن را یکی از زبان‌های رایج در علم کامپیوتر دانست. در ادامه به چند مورد از ویژگی‌های آن اشاره می‌کنیم تا بیشتر با HTML آشنا شوید.

سهولت یادگیری HTML و استفاده از تگ‌های آن

مستقل بودن پلتفرم و عدم نیاز به وابستگی‌ها

امکان اضافه کردن تصاویر، ویدئوها و فایل‌های صوتی و…

ارائه قابلیت درج فرامتن به متون

سادگی در استفاده از HTML به عنوان یک زبان نشانه‌گذاری

استفاده از روش‌های انعطاف‌پذیر برای طراحی صفحات وب و متن‌های آن‌ها و…

منبع مطلب : www.roshdana.com