دوستان به لطف خدا رسیدیم به فصل ۱۸ ترجمهی کتاب جاوااسکریپت شیوا.
این فصل به موضوع http و فرمها در جاوااسکریپت میپردازه. پیشنهاد می کنم که از دستش ندید!
در این فصل به نحوهی عملکرد پروتوکل HTTP پرداختیم. یک کلاینت درخواستی را ارسال می کند که حاوی یک متد (معمولا GET
) و یک مسیر که معرف یک منبع است میباشد. سرویس دهنده سپس تصمیم می گیرد که با این درخواست چه کند و با یک کد وضعیت و یک بدنهی پاسخ، به درخواست جواب می دهد. هر دوی درخواست و پاسخ می توانند حاوی سرپیامها (headers) باشند که اطلاعات بیشتری را فراهم می کنند.
رابطی که از طریق آن جاوااسکریپت مرورگر می تواند درخواستهای HTTP را بسازد fetch
نامیده می شود. ساخت یک درخواست به شکل زیر می ماند:
fetch("/18_http.html").then(r => r.text()).then(text => { console.log(`The page starts with ${text.slice(0, 15)}`); });
مرورگرها از درخواستهای نوع GET
برای بازیابی منابع مورد نیاز جهت نمایش یک صفحهی وب استفاده می کنند. یک صفحه وب ممکن است حاوی فرمها نیز باشد که این امکان را فراهم می کنند که با ثبت فرم، اطلاعات ورودی کاربر برای ارسال درخواست برای یک صفحهی جدید ارسال شود.
HTML اشکال متنوعی از فیلدهای فرم را پشتیبانی می کند مانند فیلدهای متنی، چکباکسها یا، فیلدهای چندگزینهای و فیلدهای انتخاب فایل.
این فیلدها را می تواند توسط جاوااسکریپت کنترل و تغییر داد. رخداد "change"
با ایجاد تغییر در یک فیلد تولید می شود، رخداد "input"
زمانی ایجاد می شود که متنی در فیلد تایپ شود و رخدادهای مربوط به صفحهکلید هنگامی که فیلد توسط صفحهکلید در دسترس و فعال است دریافت می شوند. خاصیتهایی مثل value
(در فیلدهای text و select) یا checked
(در چکباکسها و دکمههای رادیویی) برای خواندن یا تنظیم محتوای فیلد استفاده می شوند.
زمانی که یک فرم ثبت می شود، یک رخداد "submit"
روی آن ایجاد می شود. یک گردانندهی جاوااسکریپت می تواند با فراخوانی preventDefault
مانع از ثبت فرم شود. فیلدهای فرم را نیز می تواند بیرون از برچسب form استفاده کرد.
زمانی که کاربر فایلی را از سیستم محلی فایل خود به وسیلهی فیلد انتخاب فایل گزینش می کند، رابط FileReader
را می تواند برای دسترسی به محتوای آن فایل از درون یک برنامه جاوااسکریپت استفاده کرد.
اشیاء localStorage
و sessi
را می توان برای ذخیره اطلاعات به صورت مانا که علی رغم بارگیری مجدد صفحه باقی میمانند استفاده کرد. اولین شیء، دادهها را به صورت همیشگی ذخیره می کند( یا تا هنگامی که کاربر تصمیم به حذف آنها بگیرد) و دومی تا زمانی که مرورگر بسته نشده داده ها را نگه می دارد.