لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
ایجاد تعامل وب سایت با جاوا اسکریپت
Building Website Interactivity with JavaScript
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
این دوره مبتنی بر پروژه عمیقاً به جاوا اسکریپت می پردازد و بر کاربردهای عملی آن در توسعه وب بدون تکیه بر چارچوب ها تمرکز می کند. مربی جو چلمن با ملزومات تعامل جاوا اسکریپت و بهبود تجربه کاربر شروع می کند و از طریق ایجاد اجزای اصلی وب و توسعه یک بازی ساده پیشرفت می کند. جو بر قابلیت دسترسی در طراحی وب تأکید می کند و اطمینان می دهد که پروژه های شما برای همه قابل استفاده است.
ساختن یک مؤلفه وب ساده و قابل استفاده مجدد و یک نمونه اولیه بازی را آزمایش کنید و بر سرگرمی و عملکرد جاوا اسکریپت مسلط شوید. این دوره که برای طراحان و توسعه دهندگان وب مبتدی و متوسط مناسب است، فقط به درک پایه ای از جاوا اسکریپت، به ویژه توابع و مدیریت رویدادها نیاز دارد. درک خود را از امکانات جاوا اسکریپت گسترش دهید و مهارت های توسعه وب خود را افزایش دهید.
سرفصل ها و درس ها
مقدمه
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
لینکدین: شبکه اجتماعی حرفهای برای ارتباط و کارآفرینی
لینکدین به عنوان یکی از بزرگترین شبکههای اجتماعی حرفهای، به میلیونها افراد در سراسر جهان این امکان را میدهد تا ارتباط برقرار کنند، اطلاعات حرفهای خود را به اشتراک بگذارند و فرصتهای شغلی را کشف کنند. این شبکه اجتماعی به کاربران امکان میدهد تا رزومه حرفهای خود را آپدیت کنند، با همکاران، دوستان و همکاران آینده ارتباط برقرار کنند، به انجمنها و گروههای حرفهای ملحق شوند و از مقالات و مطالب مرتبط با حوزه کاری خود بهرهمند شوند.
لینکدین همچنین به کارفرمایان امکان میدهد تا به دنبال نیروهای با تجربه و مهارت مورد نیاز خود بگردند و ارتباط برقرار کنند. این شبکه حرفهای به عنوان یک پلتفرم کلیدی برای بهبود دسترسی به فرصتهای شغلی و گسترش شبکه حرفهای خود، نقش مهمی را ایفا میکند. از این رو، لینکدین به عنوان یکی از مهمترین ابزارهای کارآفرینی و توسعه حرفهای در دنیای امروز مورد توجه قرار دارد.
طراح وب، نویسنده، مربی
جو Chellman یک طراح وب، نویسنده و مربی در موضوعاتی مانند وردپرس، جاوا اسکریپت و جی کوئری است.
او یک طراح وب در اواخر دهه 90 است: یک متخصص فناوری که قادر به انجام همه ی وب سایت است نیاز به زندگی دارد از آنجایی که او شروع به بازی کردن با وب کرد، او برای ساخت ده ها تن از وب سایت ها برای هنرمندان، غیر انتفاعی و کسب و کارهای کوچک، به طور مستقل و همکاری با سایر سازمان های اطراف ایالات متحده و گاهی اوقات در سراسر جهان، تلاش کرده است. او در کنفرانس ها، ملاقات ها و کارگاه های آموزشی در سراسر زادگاه فعلی خود از لس آنجلس، در موضوعاتی مانند وردپرس، دروپال، جاوا اسکریپت، جی کوئری و غیره صحبت می کند. او می توانید در Web DevelopmentJavaScriptتوسعه وبجاوا اسکریپت
نمایش نظرات