فرانت اند یکی از پرتقاضا ترین شاخه های برنامهنویسی است که بر پایه یک مثلث سهگانه و ساده بنا شده است: HTML، CSS و جاوااسکریپت (JavaScript).
در ادامه به معرفی این 3 تا واژه میپردازیم با من همراه باشید.
کلمه HTML مخفف Hyper Text Markup Language (زبان نشانهگذاری ابرمتن) است. دقت کنید که HTML اصلاً یک زبان برنامهنویسی نیست، بلکه مثل آجر و تیرآهن، چهارچوب صفحه شما را تعیین میکند.
در مثال ساختمان: وقتی مهندس معمار پیریزی میکند و ستونها، دیوارها، جای پنجرهها و درها را مشخص میکند، دقیقاً دارد کار HTML را انجام میدهد.
در دنیای وب: زبان HTML به مرورگر میگوید چه چیزی در صفحه وجود دارد:
«اینجا یک عنوان اصلی باشد.»
«اینجا یک پاراگراف متن قرار بگیرد.»
«اینجا یک تصویر و زیر آن یک فرم ورود بنشیند.»
اگر یک وبسایت فقط با HTML ساخته شود، شبیه خانهای است که فقط تیرآهن و دیوارهای سیمانی خام دارد؛ همه چیز سر جای خودش هست، اما نه رنگی دارد، نه زیبایی و نه نظمی چشمنواز.
برای این رنگ و زیبایی چیکار باید بکنیم؟!
راهکار آن CSSاست.
کلمه CSS مخفف Cascading Style Sheets (شیوهنامههای آبشاری) است. وظیفه CSS تنها و تنها یک چیز است: زیباسازی و استایلدهی.
در مثال ساختمان: وقتی دیوارهای خام سیمانی را نقاشی میکنید، کاغذ دیواری مدرن میچسبانید، کفپوش لمینت پهن میکنید، نورپردازی مخفی کار میگذارید و چیدمان مبلمان را متناسب با اندازه اتاقها تنظیم میکنید، کار با CSS آغاز شده است.
در دنیای وب: اگر HTML اسکلت صفحه بود، CSS لباس شیک آن است:
رنگ پسزمینه چه باشد؟
فونت متنها چقدر بزرگ باشد و چه رنگی به خود بگیرد؟
دکمهها گوشههای گرد داشته باشند یا تیز و...
حال که ساختمان چهارچوبش ساخته شد و رنگآمیزی شد، چگونه باید از آن استفاده کنیم؟
قطعاً راهحل آن JavaScript است.
کلمه JavaScript (یا به اختصار JS) برعکس دوتای قبلی، یک زبان برنامهنویسی تمامعیار و قدرتمند است. وظیفه جاوااسکریپت ایجاد تعامل، پویایی و منطق در صفحه وب است.
در مثال ساختمان: اگر کلید برق را بزنید و چراغ روشن شود، اگر دکمه آسانسور را لمس کنید و در باز شود، یا اگر درب پارکینگ با سنسور هوشمند باز شود، پای سیستم هوشمند ساختمان در میان است؛ یعنی همان جاوااسکریپت!
در دنیای وب: جاوااسکریپت به سایت روح میبخشد:
وقتی روی دکمه «افزودن به سبد خرید» کلیک میکنید و بدون رفرش شدن صفحه، عدد سبد خرید ۱ واحد زیاد میشود.
وقتی فرم ثبتنام را پر میکنید و قبل از ارسال، خطای قرمز رنگ میدهد که «فرمت ایمیل شما اشتباه است، یا ساخت برنامه هایی مانند ماشین حساب، هواشناسی، ثبت نام در سایت های خرید و فروش.»
تمام واژه فرانت اند در همین ۳ مرحله خلاصه میشود اما دنیای استفاده از آن بیش از هزار واژه است که بتوان در مقاله آورد. یکی از ملاک های مهم برای برانگیختن خلاقیت ومهارت در این حوزه، یادگیری منظم و مستمر است.