# آشنایی با DOM و AJAX و JSON

تا این‌جا با HTML برای تعریف ساختار صفحه‌های وب آشنا شدی. مرورگرهای وب بعد از دریافت محتوای صفحه -که به زبان HTML نوشته شده‌اند- اون رو تفسیر می‌کنند و یه ساختار درختی از elementها ایجاد می‌کنن که DOM نامیده می‌شه.

# DOM

برای آشنایی با DOM این‌جا رو تا آخر DOM Node Lists بخون. بخش animation رو نیازی نیست (در واقع bad practice است). برای آشنایی بیشتر با event‌ها این‌جا رو بخون. برای مطالعه بیشتر درباره‌ی DOM این‌جا رو مطالعه کن.

# تمرین

کدی بنویس که:

یک دکمه به صفحه اضافه کنه.
با click روی دکمه یک سطر به جدول اضافه کنه.
با رد شدن mouse از روی هر سطر رنگ پس‌زمینه قرمز شود.

<table>
    <tr>
        <td>Row1 cell1</td>
        <td>Row1 cell2</td>
    </tr>
    <tr>
        <td>Row2 cell1</td>
        <td>Row2 cell2</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
</table>

خوبه که درباره‌ی DocumentFragment بدونی. این‌جا رو هم بخون.

# تمرین

در تمرین بالا یه input اضافه کن که کاربر تعداد سطرها رو وارد کنه و با زدن دکمه، اون تعداد سطر ایجاد بشه. این تمرین رو با fragment انجام بده.

# JSON

JSON یک فرمت سبک مستقل از زبان هست که برای انتقال داده به کار می‌ره. برای آشنایی با فرمت JSON این لینک رو مطالعه کن.

# AJAX

برای ارتباط با کدهای سمت سرور و ارسال HTTP request از مرورگر وب به سرور از AJAX استفاده می‌شه بدون این‌که نیازی به دوباره load شدن صفحه وب باشه. پیشنهاد می‌کنیم بعد از آشنایی با JavaScript و فرمت JSON، این لینک رو مطالعه کنین.

# تمرین

کدی بنویس که به آدرس زیر یه request بزنه و لیست کاربران رو صفحه به صفحه بارگذاری کنه. پایین لیست دکمه‌ای باشه که با زدن اون صفحه‌ی بعدی کاربران بارگذاری بشه. در زمان انتظار پاسخ، دکمه به یه عکس loading تغییر کنه. اگر خطایی رخ بده باید پیامی به کاربر نشون بدی. اگر لیست تمام شد دکمه باید حذف بشه. https://reqres.in/api/users?page=1&per_page=3
یک اسکریپت بنویس که یک <ul> بسازه و این فایل JSON رو بخونه و به ازای هر آیتم (object دارای name و href) یک <li> حاوی یک لینک <a> ایجاد کنه. محتوای لینک رو مقدار name و آدرس اون رو مقدار href قرار بده.
تمرین قبل رو با این فایل JSON طوری انجام بده که برای آیتم‌هایی که subset دارن، هرقدر تودرتو subset وجود داشت لیست‌های حاوی لینک‌ها رو بسازه و در نهایت در لیست اصلی نمایش بده. مثلاً ساختاری مثل این به وجود بیاره:

Link 1
- Sub-link 1-1
- Sub-link 1-2
  - Sub-sub-link 1-2-1
  - Sub-sub-link 1-2-2
  - ...
- Sub-link 1-3
Link 2
Link 3
...

← آشنایی با HTTP کنترل نسخه →