حتی اگر به دنیای تکنولوژی و اینترنت علاقه‌مند نباشید حتما برایتان پیش آمده است که با اتصال به اینترنت، موضوعی را در مُرورگر کامپیوتر خود جستجو کرده و روی یکی از نتایج کِلیک کرده و با وب‌سایتی روبرو شده‌اید که شامل صفحه‌ها و بخش‌های مختلفی است و هر کدام ظاهر و ویژگیهای خاص خود را دارند و با کلیک بر روی لینک‌ها و بخش‌های خاصی از وب‌سایت به صفحات مختلفی هدایت می‌شوید، سفارش ثبت می‌کنید، خرید اینترنتی انجام می‌دهید یا با توجه به نیاز خود فرم‌هایی را تکمیل و ارسال می‌کنید.
مانند هر تکنولوژی و برنامه نرم‌افزاری دیگری، وب‌سایت‌ها هم به وسیله برنامه‌نویسان و از طریق نوشتن کدهای مشخصی شکل می‌گیرند.
پیشنهاد می‌کنم با من همراه باشید تا در ادامه این نوشته به معرفی یکی از دو بخش مهم و تشکیل دهنده یک وب‌سایت یعنی برنامه‌نویسی فرانت‌اند بپردازیم.
برای شروع به معرفی کوتاه دو عنوان تخصصی فِرانت‌اِند و بَک‌اِند می‌پردازیم.
همان طور که از نام اصطلاح فِرانت‌اِند (Front-End) می‌توان حدس زد با برنامه‌نویسی در این بخش، ظاهر یک وب‌سایت شکل می‌گیرد. همان شکل و ظاهری که شما با باز کردن لینک یک وب‌سایت مشاهده می‌کنید.
اصطلاح بَک‌اِند (Back-End) هم به خوبی نمایانگر وظیفه آن است یعنی هر آنچه که در پشت صحنه یک وب‌سایت اتفاق می‌افتد و شما به عنوان کاربر وب‌سایت قادر به مشاهده آن نیستید ولی نتیجه عملیاتی که در بک‌اند اتفاق می‌افتد را می‌توانید در بخش فرانت‌اند و ظاهر وب‌سایت مشاهده کنید.
برای ساخت و شکل‌گیری یک وب‌سایت به هر دو این تکنولوژی‌ها نیاز است و بدون وجود یکی از آن‌ها وب‌سایتی نیز وجود نخواهد داشت.
یک مثال ساده برای توضیح همکاری و هماهنگی بین بخش‌های فرانت‌اند و بک‌اند این است که شما می‌توانید زمانی را تصور کنید که می‌خواهید در یک وب‌سایت ثبت‌نام کنید و حساب کاربری خود را بسازید. فُرمی که اطلاعات خود را در آن وارد می‌کنید توسط بخش فرانت‌اند ایجاد شده است و زمانی که بر روی دکمه ارسال کِلیک می‌کنید اطلاعات شما برای بخش بک‌اند ارسال شده و حساب کاربری شما ساخته می‌شود و با کمک تنظیماتی که در بخش بک‌اند برای وب‌سایت ایجاد شده است شما می‌توانید هر زمان که خواستید اطلاعات حساب کاربری خود را ویرایش کنید.
آشنایی با تکنولوژی‌ها و زبان‌های برنامه‌نویسی فرانت‌اند
۱. زبان نشانه‌گذاری HTML
این اصطلاح، مُخَفَف (Abbreviation) برای این عبارت است: Hyper Text Markup Language
زبان نشانه‌گذاری ا‌َبَرمتن‌ها (HTML): باید توجه داشته باشید که HTML با وجود اهمیت بسیار زیادی که در ساخت صفحات وب دارد اما با این حال در واقع یک زبان برنامه‌نویسی نیست. HTML پایه و اساس ساخت صفحات وب است و بدون HTML هیچ وب‌سایتی وجود نخواهد داشت.
یک وب‌سایت هم مانند هر سازه دیگری اسکلت و بدنه خاص خود را دارد و تگ‌های HTML که هر کدام کاربرد خاصی دارند بخش‌های مختلف اسکلت و چهارچوب وب‌سایت را تشکیل می‌دهند.
اولین ورژن HTML در سال ۱۹۸۹ میلادی معرفی شد و در سال ۲۰۱۴ میلادی HTML5 توسط کنسرسیوم شبکه جهانی وب (W3C) یعنی سازمانی که استانداردهای جهانی وب را پایه‌گذاری و معرفی می‌کند ایجاد شد.
زبان نشانه‌گذاری HTML از تَگ‌های مشخص با ویژگی‌هایی خاص تشکیل شده است و در ورژن پنج HTML تَگ‌های معنادار (Semantic Elements) به این زبان اضافه شدند تا موتورهای جستجو مانند گوگل بتوانند دسترسی راحت‌تَری به محتوای وب‌سایت‌ها داشته باشند و وب‌سایت‌ها را با توجه به رعایت اصول سئو، امتیازدهی کنند و بر این اساس زمانی که شما موضوعی را در گوگل جستجو می‌کنید وب‌سایت‌هایی که در نتایج اول گوگل به شما نمایش داده می‌شوند در رعایت اصول سئو موفق‌تَر عمل کرده‌اند.
۲. زبان CSS
این اصطلاح، مخفف (Abbreviation) برای این عبارت است: Cascading Style Sheets
از این زبان برای اِستایل دادن به تَگ‌های HTML استفاده می‌شود. با کمک خُصوصیت‌ها (Property) و مقدارها (Value) که در این زبان اِستایل دِهی مشخص شده است به اسکلت و چهارچوب وب‌سایت‌ها شکل، رنگ و چیدِمان خاص مورد نظرمان یا طرح گرافیکی که توسط طراح وب‌سایت (Web Designer) طراحی شده است را اضافه می‌کنیم و وب‌سایت شکل و ظاهری را پیدا می‌کند که شما به عنوان کاربر مشاهده می‌کنید.
با پیشرفت تکنولوژی و پیدایش تلفن‌های هوشمند که امکان اتصال به اینترنت را دارند این نیاز احساس شد تا وب‌سایت‌ها بتوانند در دستگاه‌های موبایل با اندازه‌های مختلف به درستی نمایش داده شوند و مفهومی به نام صفحات وب واکنش‌گرا (Responsive Web Design) به وجود آمد. طراحی صفحات واکنش‌گرا یکی دیگر از مواردی است که در سئو تاثیرگذار بوده و می‌تواند امتیاز یک وب‌سایت را در گوگل افزایش دهد.
در CSS 3 که جدیدترین ورژن CSS است امکانات و ویژگیهای خاصی اضافه شد که به ایجاد صفحات وب واکنش‌گرا کمک بسیاری می‌کند و به این ترتیب امروزه شما می‌توانید با استفاده از تلفن همراه و تبلت به راحتی وب‌سایت‌ها را در اندازه‌های استاندارد مشاهده کنید.
برای راحتی کار و استفاده از زبان CSS فِرِیم‌وُرک‌های متعددی برای آن ایجاد شده که از مهم‌ترین آن‌ها می‌توان Bootstrap و Tailwind را نام برد. این Framework ها دستورات مشخص و از پیش تعیین شده‌ای دارند و در ساخت وب‌سایت‌های بسیاری از این تکنولوژی‌ها استفاده شده است.
۳. زبان برنامه‌نویسی JavaScript
جاوااِسکریپت یک زبان برنامه‌نویسی شئ‌گرا است که در فرانت‌اند، بک‌اند، برنامه‌نویسی اپلیکیشن، ساخت برنامه‌های Desktop و... مورد استفاده قرار می‌گیرد.
زمانی که با HTML و CSS ساختار و شکل و ظاهر یک وب‌سایت را ایجاد می‌کنیم هیچ منطق و رفتاری ندارد و چِنین وب‌سایتی یک محیط خشک و اِستاتیک است که هیچ‌گونه عملیاتی در آن انجام نمی‌شود.
با کمک جاوااِسکریپت می‌توانیم به وب‌سایت اِستاتیک خود روح، رفتار و منطق (Logic) ببخشیم، درخواست‌های سمتِ سِروِر ارسال کنیم و بدون Refresh شدن صفحه، نتیجه درخواست خود را مشاهده کنیم. مانند زمانی که خرید اینترنتی انجام می‌دهیم و محصول به سبد خرید ما اضافه می‌شود.
در واقع می‌توان گفت که با کمک جاوااِسکریپت و استفاده از API ها می‌توانیم بین بخش‌های فرانت‌اند و بک‌اند ارتباط برقرار کنیم.
جاوااِسکریپت استانداردی از ECMAScript است که در سال ۲۰۱۵ میلادی ورژن جدیدی از آن با نام ES6 (ECMA-262) منتشر شد که نسبت به نُسخه قبل (ES5) بهتر و کارآمدتَر شده و نام‌های کلیدی let و const برای تعریف متغیر و همچنین نوع داده symbol و موارد دیگری به آن اضافه شده بود.
از مهم‌ترین کتابخانه‌های جاوااِسکریپت می‌توان به React ، Vue ، Angular و jQuery اشاره کرد. این Library ها در برنامه‌نویسی فرانت‌اند مورد استفاده قرار می‌گیرند.
