ایجاد تعامل وب سایت با جاوا اسکریپت

سرفصل ها و درس ها

مقدمه Introduction

• فایل های تمرین و فضاهای کد Exercise files and Codespaces

• آنچه شما باید بدانید What you should know

• جاوا اسکریپت برای تعامل ساخته شده است JavaScript was made for interactivity

1. ابزارها و گردش کار 1. Tools and Workflow

• استفاده از دیباگر با Codespace Using a debugger with Codespaces

• پیدا کردن یک ویرایشگر یا IDE خوب Finding a good editor or IDE

• استفاده مسئولانه از جاوا اسکریپت Using JavaScript responsibly

2. تغییر قابلیت مشاهده رمز عبور 2. Toggling Password Visibility

• چالش: فرم ثبت نام با تایید رمز عبور Challenge: Sign up form with confirmation of password

• راه حل: فرم ثبت نام با تایید رمز عبور Solution: Sign up form with confirmation of password

• همگام سازی و تعویض با یک فیلد متنی Syncing and swapping with a text field

• تغییر رمز عبور از طریق تغییر نوع Toggling the password via type change

• درک یک علامت قابل دسترس در فرم Understanding an accessible sign in form

• استفاده از ویژگی های داده برای برچسب گذاری پویا Using data attributes for dynamic labeling

3. قابل دسترسی، دیالوگ های غیر قابل قبول 3. Accessible, Dismissible Dialogs

• غیرقابل رد کردن گفتگو با پس‌زمینه Making a dialog dismissible by backdrop

• چالش: نمایش پیام ها با عناصر گفتگو Challenge: Displaying messages with dialog elements

• مدیریت گفتگوهای متعدد با نمایندگی رویداد Handling multiple dialogs with event delegation

• نمایش اطلاعات مودال به روش قدیمی Displaying modal information the old way

• بررسی یک صفحه برای انجام خلاصه طراحی Reviewing a page to fulfill a design brief

• نمایش اطلاعات مودال به روش مدرن Displaying modal information the modern way

• راه حل: نمایش پیام ها با عناصر گفتگو Solution: Displaying messages with dialog elements

• اضافه کردن یک تایمر برای اخراج خود Adding a timer for self dismissal

4. مرتب سازی داده های جدول 4. Sorting Table Data

• جمع آوری داده های جدول برای مرتب سازی Collecting table data for sorting

• کاوش یک جدول داده در دسترس Exploring an accessible data table

• نوشتن یک تابع مرتب سازی عددی سفارشی Writing a custom numerical sort function

• راه حل: مرتب کردن یک جدول از کتاب ها Solution: Sorting a table of books

• مرتب سازی آرایه ها در جاوا اسکریپت Sorting arrays in JavaScript

• نوشتن تابع مرتب سازی سفارشی Writing a custom sort function

• به روز رسانی جدول HTML با داده های مرتب شده Updating the HTML table with sorted data

• چالش: مرتب کردن جدولی از کتاب ها Challenge: Sorting a table of books

5. اجزای وب در دسترس 5. Accessible Web Components

• مروری بر تکنیک های مدرن اجزای وب An overview of modern web component techniques

• افزودن جاوا اسکریپت به عنصر سفارشی Adding JavaScript to the custom element

• ایجاد یک عنصر آدرس خیابان ایالات متحده آمریکا Creating a USA street address element

• بازسازی مثال قبلی به عنوان یک عنصر سفارشی Refactoring a previous example as a custom element

• چالش: جزء اقلام سبد خرید Challenge: Cart line item component

• راه حل: جزء اقلام سبد خرید Solution: Cart line item component

6. شروع به ساخت یک بازی 6. Starting to Build a Game

• اجرای تعامل اولیه: برای افزودن کلیک کنید Implementing basic interaction: Click to add

• امکان انداختن کاشی ها Allowing tiles to be dropped

• معکوس کردن تعامل: برای حذف کلیک کنید Reversing the interaction: Click to remove

• امکان کشیدن کاشی ها Allowing tiles to be dragged

• راه حل: نهایی کردن گیم پلی اولیه Solution: Finalizing the basic gameplay

• پشتیبانی از صفحه کلید در بازی Supporting the keyboard in the game

• افزودن انیمیشن برای نرم‌تر کردن تعاملات Adding animation to make interactions smoother

• بررسی نمونه اولیه بازی Inspecting the game prototype

• چالش: نهایی کردن گیم پلی اولیه Challenge: Finalizing the basic gameplay

نتیجه گیری Conclusion

• مراحل بعدی Next steps