کد نویسی؟!
بله درست خواندید ، کد نویسی! اگه میخواید در حوزه طراحی وب حرفه ای باشید ، باید مثل حرفه ای ها کد نویسی یاد بگیرید . نگران نباشید کد نویسی کار چندان عجیب و سختی نیست ( سخت هستا ولی نه اینقدر که فک کنید کد نویس ها جادو میکنن! ). با من همراه باشید تا شما رو با کد نویسی آشنا کنم.
کد نویسی وب شامل دو بخش است : فرانت اند - بک اند
به طراحی فرانت اند ، طراحی سمت کاربر نیز می گویند ؛ زیرا شامل کد هایی است که نتیجه اش را کاربر مشاهده می کند.
به طراحی بک اند ، طراحی سمت سرور نیز می گویند ؛ زیرا شامل کد هایی است که کاربر آنها را نمی بیند و کارش تجزیه و تحلیل اطلاعات فرستاده شده از سمت کاربر و دادن پاسخ مناسب به آنهاست.
در کل کار طراحان فرانت اند از کار برنامه نویسان بک اند راحت تر و جذاب تر است ، زیرا با ظاهر سایت کار دارند ، ولی برنامه نویسان بک اند با باطن سایت !!
در این پست ، به معرفی کد نویسی فرانت اند می پردازیم. لازمه کد نویسی فرانت اند ، تسلط به دو زبان نشانه گذاری HTML و CSS و تسلط به زبان برنامه نویسی JavaScript است. حالا چرا به HTML و CSS زبان برنامه نویسی نگفتیم ؟ علتش اینه که زبان برنامه نویسی به زبان هایی گفته میشه که توانایی تجزیه و تحلیل اطلاعات و دادن پاسخ به کاربر رو دارند ، در حالی که زبان های HTML و CSS چنین توانایی ندارند و کار اینا اسکلت بندی و ظاهر بخشیدن به سایت است. اگر بخوایم زبان های فرانت اند رو به بدن انسان تشبیه کنیم ؛ HTML اسکلت بدنه ، CSS پوست و گوشت و بافت های بدنه ، JavaScript هم مغز و اعصاب بدنه !!
خب درباره هر یک از این زبان ها توضیح کوتاهی بخوانیم تا کلیات کد نویسی وب دستمون بیاد :
HTML :
کلمه HTML مخفف کلمه HyperTextMarkupLanguage به معنی زبان نشانه گذاری ابر متن است ( ترجمه نکنیم بهتره! ) . این زبان سنگ بنای صفحات وب می باشد ، از این زبان برای سازماندهی کردن اطلاعات و تفکیک اجزای یک صفحه می توان استفاده نمود (اجزایی مانند متون، تصاویر و…)، از سوی دیگر نباید از HTML برای صفحه آرایی استفاده کرد. (منظور رنگ نوشته ها و قالب بندی متون)، این وظیفه بر دوش فناوری دیگری با عنوان CSS است.
CSS :
css (مخفف عبارت Cascading Style Sheets ) به معنی "برگه های پشت سر هم و مشبک" (😑) معمولا همراه با HTML هسته اصلی ساخت صفحات وب را تشکیل می دهند. در واقع css مکمل زبان html است و سعی در پر کردن نقاط ضعف html دارد. از آن جا که در زبان برنامه نویسی html پیاده سازی بسیاری از موارد پیشرفته طراحی امکان پذیر نیست، سی اس اس به عنوان زبان مکمل html استفاده می گردد. Html زبانی است که امکان پیاده سازی بسیاری از اصول پیشرفته طراحی در آن وجود ندارد، بنابراین کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای برای رفع مشکلات HTML زبان css را پیشنهاد داده است. Cascading Style Sheets روشی ساده و آسان برای اعمال جلوه های تصویری روی صفحات وب است. در واقع با استفاده از زبان html محتوای فایلی سایت ها نوشته شده و با استفاده از سی اس اس نحوه نمایش اطلاعات در سایت تعیین می شود. هدف از زبان css جدا نمودن محتوای متنی فایل ها از شیوه نمایش آن ها بوده است. سی اس اس زبانی است که توسط آن استایل (style) صفحات وب سایت یک بار تعریف شده و در صفحات موردنظر اعمال می گردد. فرض کنید سایت شما شامل 70 صفحه استاتیک(ثابت) می باشد و شما آن ها را به زبان HTML نوشته اید، حال می خواهید که رنگ نوشته های صفحات خود را تغییر دهید. انجام دادن این کار با html عملی زمان بر و تقریبا غیر ممکن است! اما با css شما می توانید به راحتی و در زمان کم تغییرات را روی تمامی صفحات اعمال نمایید. با استفاده از html المان های اصلی در صفحات سایت قرار گرفته و زیبا سازی سایت به وسیله سی اس اس صورت می گیرد.
JavaScript :
جاوا اسکریپت زبان برنامهنویسی پویا و مبتنی بر شی (Object-based) است که هم سمت کاربر و هم سمت سرور، برای ایجاد تعمال با صفحات وب به کار میرود. جایی که HTML و CSS ساختار اولیه و ظاهر صفحات وب را تعیین میکنند، جاوا اسکریپت نحوه عملکرد صفحات وب را کنترل میکند. اگر بخواهیم کمی حرفهایتر به این زبان نگاه کنیم، جاوا اسکریپت یک زبان محبوب مبتنی بر شی، داینامیک و مفسری است. این زبان برای برنامه نویسی سمت سرور و سمت کاربر استفاده میشود. اگر با این مفاهیم آشنایی ندارید نگران نباشید در ادامه مختصراً به آنها میپردازیم. شیگرایی یک تفکر و شیوه در برنامهنویسی است. در برنامه نویسی شیگرا کدها در واحدهای کوچکتری تقسیمبندی میشوند و در طی برنامه این واحدها باهم پیوند میخورند تا برنامهی نهایی ایجاد شود. زبان مفسری (Interpreter) زبانی است که کدهای آن به صورت خط به خط ترجمه و اجرا میشوند! این زبان مقابل زبانهای کامپایلری (Compiled) قرار میگیرد که یکباره کل کدها ترجمه و اجرا میشوند. بنابراین سرعت اجرای زبانهای مفسری نسبت به زبانهای کامپایلری کمتر است. نحوهی اجرای جاوا اسکریپت کدهای جاوا اسکریپت در سمت کاربر و به وسیلهی مرورگرها اجرا میشوند. مرورگرها دارای موتورهای پردازشی هستند که میتوانند کدهای جاوا اسکریپت را ترجمه و سپس اجرا نمایند و در آخر نتیجه را به کاربر نمایش دهند. کاربرد زبان جاوا اسکریپت چیست؟ کاربرد جاوا اسکریپت زبان جاوا اسکریپت بخاطر انعطافی که دارد بسیار مورد توجه برنامهنویسان قرار گرفته است. این زبان برای برنامه نویسی سمت کاربر و سمت سرور، کاربرد دارد. جاوا اسکریپت علاوه بر طراحی سایت، در برنامهنویسی موبایل و دسکتاپ نیز استفاده میشود. از کاربردهای دیگر این زبان توسعهی بازیهای تحت وب، ایجاد گرافیکهای دو و سه بعدی است. همچنین یادگیری این زبان نسبت به بسیاری از زبانهای دیگر سادهتر است. پس به راحتی با یادگیری آن میتوانید یک روح تازه به وبسایت خود ببخشید و با ایجاد انواع انیمیشن و تحرکات مختلف به عناصر صفحه، رابط کاربری بهتری داشته باشید.