آموزش تکنیک‌های پیشرفته AJAX و پروژه‌های نهایی - آخرین آپدیت

پروژه نهایی دوره - بخش اول: سرور و مسیرها Course Final Project - Task 1 - Server and Routes

• مقدمه بخش Introduction to Section

• تعریف نقاط پایانی RESTful API Defining RESTful API Endpoints

• ابتدا ساخت کد سمت سرور و سپس پیاده‌سازی AJAX First, We Will Build Server-Side Code and Then Only AJAX

• نگاهی گذرا به پروژه Sneak Peek

• استفاده از NPM برای نصب فریم‌ورک Express Using NPM to Install the Express Framework

• NPM و Node Modules چیستند؟ What is NPM and Node Modules

• بررسی سورس کد Express در پوشه node_modules Viewing the Express Source Code Inside the node_modules Folder

• راه‌اندازی سرور Node ما Setting Up Our Node Server

• تفاوت بین res.send() و res.end() Difference Between res.send() Versus res.end()

• تعریف مسیرها (Routes) در سرور Defining Routes on Our Server

• تعریف مسیرها در یک فایل مجزا Defining Our Routes in a Separate File

• خروجی گرفتن از مسیرها با دستور module.exports Exporting Our Routes Through the module.exports Command

• مقایسه JavaScript Modules (ES Modules) و Node Modules (CommonJS) JavaScript Modules (ES Modules) Versus Node Modules (CommonJS)

• تست آبجکت Router Testing Our Router Object

• ایجاد مسیر GET Creating the GET Route

• نصب Nodemon Installing Nodemon

• آشنایی با Postman Postman Introduction

• ایجاد مسیر POST Creating a POST Route

• تفاوت Express.json() و Express.urlencoded() Express.json() Versus Express.urlencoded()

• ایجاد تابع تولید ID منحصر‌به‌فرد Creating a Unique ID Function

• ایجاد مسیر PUT - بخش اول (استفاده از متد find) Creating a PUT Route - Part 1 (Using the find Method)

• متد Array.find() چیست؟ What is the Array.find() Method

• ایجاد مسیر PUT - بخش دوم (استفاده از متد splice) Creating a PUT Route - Part 2 (Using the splice Method)

• متد Array.splice() چیست؟ What is the Array.splice() Method

• تست مسیرها در Postman Testing Our Routes in Postman

• ایجاد مسیر DELETE Creating a DELETE Route

• جمع‌بندی بخش سرور Server Outro

پروژه نهایی دوره - بخش دوم: XMLHttpRequest (AJAX API) Course Final Project - Task 2 - XMLHttpRequest (AJAX API)

• مقدمه بخش Introduction to Section

• قرار است چه چیزی را با هم بسازیم؟ What Are We Going to Build Together?

• مرور کلی فایل‌ها و HTML HTML and File Overview

• درخواست XHR AJAX GET XHR AJAX GET Request

• رفع مشکل CORS با نوشتن یک تابع Middleware سفارشی Fixing CORS by Writing a Custom Middleware Function

• رفع مشکل CORS با نصب ماژول "cors" از طریق NPM Fixing CORS by Installing the "cors" Module with NPM

• افزودن متن پویا به درخواست GET Adding Dynamic Text to the GET Request

• ایجاد یک کتابخانه/ماژول AJAX Creating an AJAX Library/Module

• تبدیل درخواست GET به یک ماژول Converting Our GET Request into a Module

• مرور کلی درخواست GET Overview of Our GET Request

• درخواست XHR AJAX POST XHR AJAX POST Request

• بهبود درخواست GET (تبدیل فراخوانی AJAX به حالت همگام) Improving Our GET Request (Turning Our AJAX Call into a Synchronous One)

• تکمیل درخواست POST با اجرای درخواست در فایل app.js Completing the POST Request by Initiating the Request in the app.js File

• به‌روزرسانی پویا متن پاراگراف POST Updating the POST Paragraph Text Dynamically

• افزودن مدیریت خطا (Error Handling) Adding Some Error Handling

• تکمیل درخواست XHR PUT Completing the PUT XHR Request

• تکمیل درخواست XHR DELETE Completing the DELETE XHR Request

• جمع‌بندی XHR XHR Outro

پروژه نهایی دوره - بخش دوم: Fetch (AJAX API) Course Final Project - Task 2 - Fetch (AJAX API)

• مقدمه بخش Introduction to Section

• راه‌اندازی درخواست GET Fetch GET Fetch Request - Setup

• استفاده از Callback Function برای نوشتن درخواست GET Fetch Using a Callback Function to Write Our GET Fetch Request

• درخواست POST Fetch POST Fetch Request

• درخواست PUT Fetch PUT Fetch Request

• درخواست DELETE Fetch DELETE Fetch Request

• خلاصه: مطابقت درخواست‌های AJAX ما با استانداردهای RESTful Summary - Our AJAX Requests Are RESTful Compliant

• جمع‌بندی Fetch Fetch Outro

پروژه نهایی دوره - بخش دوم: Axios (AJAX API) Course Final Project - Task 2 - Axios (AJAX API)

• مقدمه بخش Section Introduction

• چالش پایه: مقدمه‌ای بر آنچه با Axios می‌سازیم Basic Challenge - Introduction to What We Are Going to Build with Axios

• نصب AXIOS Installing AXIOS

• دریافت داده‌های متنی با AXIOS Fetching Text Data with AXIOS

• دریافت داده‌های JSON با AXIOS Fetching JSON Data with AXIOS

• راه‌اندازی فایل‌های پروژه اصلی برای Axios Setting Up Our Main Course Project Files for Axios

• درخواست GET با استفاده از Axios GET Request Using Axios

• بررسی آبجکت پاسخ (Response) در Axios Inspecting the Axios Response Object

• درخواست POST با استفاده از Axios POST Request Using Axios

• درخواست PUT با استفاده از Axios PUT Request Using Axios

• درخواست DELETE با استفاده از Axios DELETE Request Using Axios

• جمع‌بندی Axios Axios Outro

پروژه نهایی دوره - بخش سوم: فرانت‌اند نهایی + APIهای AJAX + مسیرهای سرور Course Final Project - Task 3 - Final Frontend + AJAX APIs + Server Routes

• مقدمه بخش Introduction to Section

• چه چیزی قرار است بسازیم؟ What Are We Going to Build?

• HTML: نوار ناوبری (Navbar) و دکمه افزودن سگ HTML - Navbar and Add Dog Button

• HTML Entities چیستند؟ What Are HTML Entities

• HTML: مودال افزودن سگ HTML - Add Dog Modal

• HTML: مودال به‌روزرسانی سگ HTML - Update Dog Modal

• عدم نیاز به ویژگی‌های name We Don't Need the Name Attributes

• CSS: تیترها و دکمه‌ها CSS - Headings and Buttons

• CSS: مودال افزودن سگ CSS - Add Dog Modal

• CSS: مودال به‌روزرسانی سگ CSS - Update Dog Modal

• استفاده از جاوااسکریپت برای بستن مودال‌ها Using JavaScript to Close Our Modals

• CSS: جداول CSS - Tables

• درخواست AJAX GET: اجرای درخواست GET در رویداد DOMContentLoaded AJAX GET Request - Perform a GET Request on the DOMContentLoaded Event

• استفاده از جاوااسکریپت برای افزودن دکمه‌های ویرایش و حذف به جدول Using JavaScript to Add an Update and Delete Button to Our Table

• درخواست POST POST Request

• پاک‌سازی داده‌های فرم هنگام زدن دکمه Submit Clearing Form Data When a User Hits 'Submit'

• بازبینی مرحله قبلی Take a Step Back

• استفاده از متد reset() برای پاک‌سازی مقادیر فرم Using the reset() Method to Clear Form Values

• پر کردن مودال به‌روزرسانی - بخش اول: پیمایش DOM برای یافتن ID Populating the Update Modal - Part 1 - Traversing the DOM to Find the ID

• بازبینی: پیمایش در DOM Take a Step Back: Traversing the DOM

• پر کردن مودال به‌روزرسانی - بخش دوم: استفاده از متد find() برای دریافت داده‌ها Populating the Update Modal - Part 2 - Using the find() Method to GET Our Dog

• پر کردن مودال به‌روزرسانی - بخش سوم: نهایی‌سازی Populating the Update Modal - Part 3 - Finishing

• بهبود کد: ویژگی‌های Disabled و classList Improving Our Code - Disabled and classList Properties

• درخواست PUT: به‌روزرسانی اطلاعات سگ PUT Request - Updating a Dog

• درخواست DELETE: حذف سگ DELETE Request - Removing a Dog

• مرور کلی: شما مسیر طولانی و موفقی را پیمودید Recap - You Have Come a Long Way

جمع‌بندی Conclusion

• جمع‌بندی نهایی Outro