</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهHTMLدرس 3
درس 3 از 8 · ۳۰ دقیقه

داده و ساختار مناسب مسئله

ساختار صفحه‌های وب را از اولین تگ تا یک صفحه کامل و دسترس‌پذیر یاد بگیر.

۰امتیاز شما
نقشه این درس

بعد از این درس چه کاری می‌توانی انجام بدهی؟

  • داده منفرد و مجموعه را جدا کنی
  • تغییرپذیری داده را بفهمی
  • ساختار ساده و قابل جست‌وجو بسازی
به زبان زندگی واقعی

HTML را ساده بفهم

HTML مثل اسکلت و برچسب‌های یک فروشگاه است؛ مشخص می‌کند هر بخش عنوان، توضیح، تصویر یا دکمه است.

نکته مهم برای شروع HTML

به‌جای جمع‌کردن داده خام در چند ساختار متفاوت، یک منبع حقیقت و تبدیل‌های نام‌دار داشته باش.

چرا مهم است؟ کوچک‌ترین داده معنی‌دار.

اولین تمرین تو: یک عضو تازه به داده نمونه اضافه کن، یک فیلتر واقعی برای «صفحه معرفی یک محصول واقعی» بساز و نتیجه خالی را هم بررسی کن.

توضیح ساده و قدم‌به‌قدم

از یک مثال کوچک شروع کن

ساختار داده را از روی عملیاتی که زیاد انجام می‌دهی انتخاب کن. آیا ترتیب مهم است؟ مقدارها باید یکتا باشند؟ با کلید جست‌وجو می‌کنی؟ انتخاب ظرف نامناسب امروز ساده به نظر می‌رسد، اما فردا منطق و کارایی را پیچیده می‌کند.

1

۱. سؤال‌های اصلی را بنویس

نوع جست‌وجو، ترتیب و یکتایی را مشخص کن.

2

۲. قرارداد عضو را تعیین کن

هر عضو چه فیلد و چه نوعی دارد؟

3

۳. یک تبدیل واقعی بساز

فیلتر، مرتب‌سازی یا جمع را با خروجی قابل بررسی انجام بده.

نکته مهم

به‌جای جمع‌کردن داده خام در چند ساختار متفاوت، یک منبع حقیقت و تبدیل‌های نام‌دار داشته باش.

مفهوم‌های اصلی

سه قطعه‌ای که باید بفهمی

مقدار

کوچک‌ترین داده معنی‌دار.

مجموعه

چند مقدار مرتبط با ترتیب یا کلید.

تبدیل

داده را بدون گم‌کردن معنا به شکل لازم ببر.

سناریوی واقعی

صفحه معرفی محصولی که کاربر و موتور جست‌وجو هر دو ساختارش را درست بفهمند.

در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را می‌سازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص می‌کنیم.

ورودی روشنیک تغییر کوچکنتیجه قابل سنجش
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

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

مرحله ۲ از ۳ · مرتب‌کردن کد
بانک قطعه‌هاقطعه مناسب را انتخاب کن
ترتیب پاسخ تواز بالا به پایین اجرا می‌شود

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    اجرا و پیش‌نمایش

    این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا می‌شود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.

    html-data
    خروجیآماده
    یک بخش را تغییر بده و دکمه بررسی را بزن.
    بعد از هر تغییر، نتیجه را دوباره بررسی کن.
    تمرین هدایت‌شده

    یک عضو تازه به داده نمونه اضافه کن، یک فیلتر واقعی برای «صفحه معرفی یک محصول واقعی» بساز و نتیجه خالی را هم بررسی کن.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

    انتخاب ساختار از روی عادت

    2

    چند منبع حقیقت ناسازگار

    3

    نادیده‌گرفتن مجموعه خالی

    سنجش چندمرحله‌ای

    با 5 سؤال مطمئن شو که مفهوم را گرفته‌ای

    سؤال 1 از 5

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

    سؤال 2 از 5

    ساختار داده را بر چه اساسی انتخاب می‌کنیم؟

    سؤال 3 از 5

    کدام حالت باید حتماً آزمایش شود؟

    سؤال 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    سؤال 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 3

    فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟

    فقط در این صورت درس را کامل کن و سراغ مرحله بعد برو.