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

زبان های برنامه نویسی سمت کاربر ، فرانت اند یا Client کدامند؟ چه زبان هایی دارای بیشترین محبوبیت و تقاضا برای طراحی فرانت اند و کلاینت سایت هستند؟ در این مقاله از روبوگراف بطور مفصل زبان های سمت کاربر و فرانت اند سایت را بررسی کرده ام ، با روبوگراف همراه باشید.

بخش های اصلی طراحی سایت

در مقاله وب سایت چیست توضیح دادم که هر سایت دارای دو بخش اصلی است.

سیستم عملیاتی که مسئول همه ی عملیات های مهم مانند ذخیره سازی اطلاعات کاربران ، مدیریت پرداخت ها و … در سمت سرور است که به آن سمت سرور یا Back End گفته می شود.

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

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

زبان های برنامه نویسی سمت کاربر سایت

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

میلیون ها پردازش توسط CPU

میلیون ها مبادله و حرکت رفت و برگشتی در مدارهای مختلف

تقسیم الکتریسیته در صفحه لمسی که با هر بار لمس ، یه نقطه دارای بار حداکثری شده و کلیک اتفاق می افتد و …

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

محفظه تلفن همراه که شامل یک صفحه لمسی ، دوربین ، دکمه های عملیاتی و … است و همه ی این ها برای برقراری ارتباط و استفاده از محتویات داخل تلفن طراحی شده است.

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

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

زبان HTML
زبان CSS
زبان JavaScript

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

زبان HTML یا Hyper Text Markup Language ، زبان اصلی و چهارچوب صفحه وب است.
با کمک این زبان است که می توانیم صفحات وب بسازیم ، لینک بسازیم ، صفحات سایت را به هم متصل کنیم ، ویدیو و تصویر را در سایت به نمایش بگذاریم و …
این زبان در سال ۱۹۹۳ توسط تیم برنرلی اختراع شد و به سرعت دنیا را گرفت و آن قدر کامل و بی نقص بود که زبان دیگری جایگزین آن نشد.
با وجود اینکه بسیاری از دوستان برنامه نویس ، HTML را یک زبان برنامه نویسی نمی دانند! اما همه می دانیم که بدون آن دنیای وب وجود نداشت.
یک صفحه وب دارای کد HTML خالص:

نمونه کد HTML:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Robograph is the best</title>
  </head>
  <body>
</html>

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

زبان Css یکی از زبان های اصلی و البته کمکی فرانت اند است.
دلیل اینکه گفتم اصلی این است که در حال حاضر هیچ سایتی پیدا نمی کنید که در آن زبان Css استفاده نشده باشد.
از دیجی کالا تا روبوگراف
ولی دلیل کمکی بودن آن این است که زبان Css در کنار HTML استفاده می شود و تقریبا بدون آن کاربرد ندارد.
از زبان Css برای طراحی ظاهری و زیباسازی صفحات وب استفاده می شود.
در تصویر قبلی دیدید که HTML خالی زیبایی چندانی ندارد و چنگی به دل نمی زند!
اما با زبان برنامه نویسی Css می توان دکمه ها را دارای رنگ های ترکیبی ، دکمه ها را نسبت به حرکت موس واکنش گرا و تصاویر را متحرک کرد.
نمونه کد Css:

h1, p {
    color: red;
    font-size: 20px;
    background-color: yellow;
}

زبان فرانت اند سایت ؛ JavaScript

زبان جاوا اسکریپت یکی از زبان های برنامه نویسی فرانت اند و از زبان های اصلی در طراحی و توسعه وب محسوب می شود.
زبان جاوا اسکریپت مزایای زیادی داشته و هم در فرانت اند و سمت کاربر و هم در بک اند و سمت سرور مورد استفاده است.
از زبان جاوا اسکریپت برای واکنش گرا کردن صفحات وب استفاده می شود.
مفهوم واکنش گرایی را می توانید در سایت روبوگراف تست کنید ، روبوگراف برای صفحه مانیتور کامیپوتر و گوشی همراه واکنش گرا شده یعنی وقتی با گوشی وارد روبوگراف می شوید ، ابعاد نوشته ها ، ابعاد تصاویر ، ظاهر آیکون ها و دکمه های سایت نسبت به وقتی که با کامپیوتر وارد می شوید ، تغییر می کند.
هوشمند شدن گوشی های همراه و اتصال آن ها به اینترنت مهم ترین استفاده از زبان JavaScript در فرانت اند یا سمت کاربر است و استفاده از سایت ها را راحت تر می کند.

نمونه کد جاوا اسکریپت:

const num1 = 5;
const num2 = 3;

// add two numbers
const sum = num1 + num2;

// display the sum
console.log('The sum of ' + num1 + ' and ' + num2 + ' is: ' + sum);

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

مطمئنا می پرسید پس زبان TypeScript و React و Node.JS و … ها چه شد پس؟
خب بیایید بررسی کنیم.
زبان هایی که توضیح دادم یعنی HTML ، Css و JavaScript مهم ترین زبان های برنامه نویسی فرانت اند و سمت کاربر هستند.
هر زبانی که به جز این ها می شنوید ، یا زبان های حاشیه ای و کمکی فرانت اند هستند ، یا مانند React زبان برنامه نویسی مجزا نیستند و یک فریم ورک برای توسعه متفاوت همان زبان هستند.
درمورد فریمورک ها در یک مقاله دیگر مفصل توضیح خواهم داد.
به پایان یکی دیگر از مقالات روبوگراف رسیدیم.
امیدوارم از مطالعه مقاله زبان های برنامه نویسی فرانت اند لذت برده باشید.
برای یادگیری بیشتر به بخش دوره ها ، دانشنامه و آموزش رایگان مراجعه کنید.

روبوگراف ، آموزش مهارت های ویژه بازار کار…

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