درک توسعه وب

مقدمه

تاکنون تمرکز ما بر روی زبان C# و فریم‌ورک .NET بوده است. اما برای ساخت اپلیکیشن‌های وب، باید با مجموعه‌ای از تکنولوژی‌ها و پروتکل‌های استاندارد که ستون فقرات اینترنت را تشکیل می‌دهند نیز آشنا باشیم. این تکنولوژی‌ها مستقل از زبان برنامه‌نویسی سمت سرور (مانند C#، پایتون یا جاوا) هستند و توسط تمام مرورگرهای وب پشتیبانی می‌شوند. درک نقش هر یک از این اجزا برای فهمیدن اینکه چگونه یک اپلیکیشن ASP.NET Core در نهایت به یک وب‌سایت تعاملی در مرورگر کاربر تبدیل می‌شود، ضروری است. در این درس، به بررسی مفاهیم بنیادی پروتکل HTTP و سه تکنولوژی اصلی سمت کلاینت یعنی HTML، CSS و JavaScript خواهیم پرداخت.

پروتکل انتقال ابرمتن (HTTP)

Hypertext Transfer Protocol (HTTP) پروتکلی است که ارتباط بین کلاینت‌ها (معمولاً مرورگرهای وب) و سرورها را ممکن می‌سازد. این پروتکل مبتنی بر مدل "درخواست-پاسخ" (Request-Response) است.

درخواست (Request): کلاینت یک پیام درخواست HTTP را به یک آدرس مشخص (URL) روی سرور ارسال می‌کند. این درخواست شامل اطلاعاتی مانند:
- فعل HTTP: نوع عملیات درخواستی را مشخص می‌کند. رایج‌ترین افعال عبارتند از GET (برای دریافت داده)، POST (برای ارسال داده‌ی جدید)، PUT (برای به‌روزرسانی داده) و DELETE (برای حذف داده).
- هدرها (Headers): اطلاعات اضافی در مورد درخواست، مانند نوع مرورگر، فرمت‌های قابل قبول و کوکی‌ها.
- بدنه (Body): داده‌هایی که به همراه درخواست ارسال می‌شوند (معمولاً در درخواست‌های POST و PUT).
پاسخ (Response): سرور درخواست را پردازش کرده و یک پیام پاسخ HTTP را به کلاینت برمی‌گرداند. این پاسخ شامل:
- کد وضعیت (Status Code): یک عدد سه‌رقمی که نتیجه‌ی درخواست را مشخص می‌کند. کدهای رایج عبارتند از `200 OK` (موفقیت‌آمیز)، `404 Not Found` (منبع پیدا نشد) و `500 Internal Server Error` (خطای داخلی سرور).
- هدرها (Headers): اطلاعات اضافی در مورد پاسخ، مانند نوع محتوا و اطلاعات کش.
- بدنه (Body): محتوای اصلی پاسخ، که معمولاً یک سند HTML است.

تمام کاری که فریم‌ورک ASP.NET Core انجام می‌دهد، در نهایت مدیریت این چرخه‌ی درخواست و پاسخ است.

تکنولوژی‌های سمت کلاینت

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

۱. HTML (HyperText Markup Language)

HTML زبان استاندارد برای تعریف ساختار و محتوای یک صفحه‌ی وب است. این یک زبان نشانه‌گذاری است، نه یک زبان برنامه‌نویسی. HTML با استفاده از "تگ‌ها" (tags) که در داخل `<` و `>` قرار می‌گیرند، عناصر مختلف یک صفحه مانند تیترها، پاراگراف‌ها، لیست‌ها، تصاویر و لینک‌ها را مشخص می‌کند.

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

یک اپلیکیشن ASP.NET Core (با استفاده از Razor Pages یا MVC) به صورت دینامیک این کدهای HTML را تولید کرده و به عنوان بدنه‌ی پاسخ HTTP به مرورگر ارسال می‌کند.

۲. CSS (Cascading Style Sheets)

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

CSS Example

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
h1 {
  color: navy;
}

۳. JavaScript

HTML ساختار و CSS ظاهر را فراهم می‌کنند، اما JavaScript زبان برنامه‌نویسی است که تعامل و پویایی را به یک صفحه‌ی وب اضافه می‌کند. JavaScript در مرورگر کاربر اجرا شده و به ما اجازه می‌دهد تا کارهایی مانند اعتبارسنجی فرم‌ها، ایجاد انیمیشن‌ها، به‌روزرسانی بخشی از صفحه بدون نیاز به بارگذاری مجدد کامل (تکنیکی که به آن AJAX گفته می‌شود) و تعامل با کاربر را انجام دهیم.

JavaScript Example

// A simple script to handle a button click
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button was clicked!");
});

خلاصه: نقش‌ها در کنار هم

شما می‌توانید این سه تکنولوژی را به یک خانه‌ی اسکلت فلزی تشبیه کنید:

HTML مانند اسکلت و ساختار خانه است (تیرها، دیوارها، سقف).
CSS مانند دکوراسیون داخلی و نمای خارجی است (رنگ دیوارها، نوع کفپوش، مدل پنجره‌ها).
JavaScript مانند سیستم برق و لوله‌کشی است که به خانه عملکرد و تعامل می‌بخشد (روشن کردن چراغ‌ها، باز کردن شیر آب).

یک برنامه‌نویس وب فول-استک (full-stack) با .NET باید هم با کد سمت سرور (C# و ASP.NET Core) و هم با این تکنولوژی‌های سمت کلاینت آشنا باشد تا بتواند اپلیکیشن‌های وب کامل و مدرنی را بسازد.

درس قبل درس بعد