آموزش JavaScript، jQuery و React Bootcamp - Hands-On را کامل کنید

Complete JavaScript, jQuery and React Bootcamp - Hands-On

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: یاد بگیرید که از قدرت جاوا اسکریپت، جی کوئری و واکنش برای ساختن رابط های کاربری جلویی خیره کننده استفاده کنید.

آنچه یاد خواهید گرفت

  • درک مدل شیء سند (DOM)
  • دستکاری اجزای صفحه وب با استفاده از DOM
  • آموزش جاسازی جاوا اسکریپت داخلی و خارجی
  • آموزش مبانی متغیرهای جاوا اسکریپت
  • آموزش کار با اشیا در جاوا اسکریپت
  • انواع داده های مختلف را در جاوا اسکریپت بیاموزید
  • آموزش محاسبه و کار با عملگرهای حسابی
  • آموزش ایجاد اعداد تصادفی در جاوا اسکریپت
  • آموزش کار با آرایه ها از جمله آرایه های چند بعدی
  • آموزش اتصال، مرتب‌سازی و پیوستن به آرایه‌ها
  • آموزش کار با حلقه‌های جاوا اسکریپت (برای، در حالی که، انجام می‌شود)
  • آموزش کار با توابع و رویدادها در جاوا اسکریپت
  • آموزش جاسازی کتابخانه jQuery در پروژه های توسعه وب
  • سینتکس و انتخابگرهای جی کوئری را کاوش کنید
  • آموزش کار با رویدادهای jQuery
  • آموزش جابجایی اجزاء در جی کوئری
  • آموزش متحرک سازی اشیاء در جی کوئری
  • آموزش کار با توابع Callback در jQuery
  • آموزش ساخت اجزای ناوبری تعاملی در jQuery
  • روش دریافت محتوا را در جی کوئری بیاموزید
  • آموزش ساخت عناصر رابط کاربری Front-End با استفاده از کتابخانه React
  • مبانی React را کاوش کنید
  • آشنایی با ابزارهای مورد نیاز برای پروژه های React
  • آموزش استفاده از Code Pen برای آزمایش پروژه های توسعه Front-End
  • کار با Components، Props و Callbacks را در React بیاموزید
  • یاد بگیرید با رویدادها و React State Hook کار کنید
  • آموزش اشکال زدایی پروژه های React
  • سبک کلی، پویا و درون خطی اجزای رابط کاربری React را بیاموزید
  • کار با ویژگی React Key و رویدادهای چرخه حیات React
  • آموزش رندر شرطی در React
  • پروژه های React را برای Netlify و Surge اجرا کنید
  • مبانی سرور JSON و Fetch API را بیاموزید
  • آموزش ساخت ماشین حساب، Connect-4 Clone و یک سایت تجارت الکترونیک کاملا سفارشی در React
  • درک روتر React
  • با استفاده از React یک ویژگی جستجوی تجارت الکترونیک بسازید
  • آموزش اعتبارسنجی فرم ها در React

به JavaScript، jQuery و React Bootcamp خوش آمدید. در این دوره یاد خواهید گرفت که چگونه از جاوا اسکریپت به همراه دو کتابخانه قدرتمند جاوا اسکریپت برای ساخت صفحات وب پویا و تعاملی استفاده کنید. ما با معرفی دانش آموزان با مدل شیء سند (DOM) که ساختار منطقی اسناد HTML را تعریف می کند، شروع می کنیم. از آنجا به جاوا اسکریپت می‌رویم تا روش‌های مختلفی را نشان دهیم که در آن عناصر DOM می‌توانند برای افزودن تعامل به اجزای استاتیک دستکاری شوند. بخش جاوا اسکریپت دقیقاً از اصول اولیه شروع می شود که شامل جاوا اسکریپت و خروجی داده می شود. از آنجا به اعلان متغیر، عملیات حسابی، اولویت عملگر، انواع داده ها و اشیا می رویم. پس از پوشاندن پایه ها، با استفاده از آرایه ها، بیانیه های شرطی، عملگرهای مقایسه جاوا اسکریپت، بولی ها و حلقه ها به سمت عملیات پیچیده تر می رویم. در اینجا دانش آموزان یاد خواهند گرفت که قدرت واقعی جاوا اسکریپت را برای ارائه نتایج متفاوت بر اساس تعامل کاربر آزاد کنند. ما استفاده از توابع را برای مدیریت کارآمد وظایف تکراری و رویدادهای جاوا اسکریپت برای مدیریت خروجی بر اساس کنش‌ها و رویدادها بررسی خواهیم کرد. این بخش با یک پروژه عملی به پایان می رسد که در آن دانش آموزان دانش خود را برای ایجاد گالری عکس مبتنی بر وب و تغییر رنگ پس زمینه پیاده سازی می کنند.

در بخش دوم این دوره، دانش آموزان کار با jQuery را یاد می گیرند - یک کتابخانه قدرتمند جاوا اسکریپت که برای ساده کردن پیمایش و دستکاری درخت HTML DOM طراحی شده است. jQuery فوق العاده سبک، دارای ویژگی های غنی و سازگار با چند پلتفرم است. این یکی از آسان‌ترین کتابخانه‌ها برای ایجاد ویژگی‌های جاوا اسکریپت در یک صفحه وب HTML است. jQuery برای مدیریت رویداد، انیمیشن های CSS و ادغام Ajax برای تغییرات حالت رابط کاربری ناهمزمان عالی است. مشابه بخش جاوا اسکریپت، ماژول جی کوئری با پایه ها شروع می شود. این شامل دستورالعمل‌هایی در مورد جاسازی jQuery در یک صفحه وب، و مقدمه‌ای در نحو jQuery است. دانش آموزان یاد خواهند گرفت که با انتخابگرها، رویدادها و جابجایی جی کوئری کار کنند. از آنجا با استفاده از Fades، اسلایدها و عملکرد jQuery animate وارد انیمیشن ها می شویم. دانش‌آموزان همچنین در مورد زنجیره‌سازی، اشیاء قابل کشیدن، توابع پاسخ به تماس، روش دریافت محتوا، تغییر دادن کلاس‌ها و فیلتر کردن، یاد می‌گیرند. در پایان ماژول jQuery، می‌دانید که چگونه صفحات وب متحرک خیره‌کننده بسازید.

در آخرین بخش این دوره، React را بررسی خواهیم کرد - یک کتابخانه جاوا اسکریپت پیشرفته برای ساختن حالت‌های پیشرفته. - اجزای رابط کاربری هنری احتمالاً React را در برخی از داغ‌ترین برنامه‌های وب که توسط ۵۰۰ شرکت ساخته شده‌اند، دیده‌اید. به عنوان مثال، Netflix، Facebook و AirBnB همگی از React برای رابط کاربری جلویی خود استفاده می کنند. در واقع، React توسط متا در کنار جامعه ای از توسعه دهندگان مستقل توسعه یافته است. تا به امروز، React رایگان و منبع باز باقی مانده است، بنابراین پشتیبانی و مستندات زیادی دارد. برخلاف jQuery که مستقیماً با مدل شیء سند تعامل دارد، React از طریق یک DOM "مجازی" کار می کند. React از تغییرات ایجاد شده در DOM خارج از React بی اطلاع است و به روز رسانی ها را بر اساس نمایش های داخلی خود تعیین می کند. React برای ایجاد بلوک‌های کد قابل استفاده مجدد برای مؤلفه‌های UI و لایه‌بندی آن‌ها روی یکدیگر برای به حداقل رساندن تعداد دفعاتی که DOM باید در تغییرات حالت رندر شود، بهترین است.

بخش React این دوره شروع می‌شود. با یک پروژه عملی که در آن نحوه کار با اجزای کاربردی React، لوازم، توابع Callback، رویدادهای OnClick، و قلاب React State را برای ساختن یک ماشین حساب کاملا کاربردی یاد خواهید گرفت. از آنجا به پروژه شماره دو می پردازیم، جایی که شما یک کلون Connect-4 خواهید ساخت. در اینجا ما مفاهیم میانی بیشتری از جمله ارسال props، تخریب ساختار، ارسال آرگومان ها به رویدادهای کلیکی، روش های مختلف استایل سازی، و رسیدگی به تماس ها را پوشش خواهیم داد. همچنین با ویژگی کلید React، رویدادهای چرخه حیات React و رندر شرطی آشنا خواهید شد. در پایان شما یک صفحه بازی کامل چند نفره و تک نفره Connect-4 با قابلیت‌های هوش مصنوعی داخلی خواهید ساخت.

در بخش پایانی دوره، با ساختن یک صفحه کامل، قدرت React را بیشتر آزاد می‌کنیم. سایت تجارت الکترونیک با دسته بندی های مختلف محصول، ویترین محصول، ویژگی سبد خرید و موارد دیگر. در اینجا، تعدادی از مفاهیم جدید یکپارچه از جمله: سرور JSON، Fetch API و نصب روتر React را معرفی می‌کنیم. این بلوک‌های ساختمانی ضروری برای رندر کردن دسته‌های محصول، استایل فهرست محصول و پیکربندی صفحه جزئیات محصول استفاده می‌شوند. از آنجا به کامپوننت‌های سبک‌دهی‌شده می‌پردازیم، طرح‌بندی فروشگاه را بازسازی می‌کنیم، و مفهوم «زمینه» را در React بررسی می‌کنیم. در مراحل پایانی پروژه، دانشجویان سبد خرید و ویژگی پرداخت را پیکربندی خواهند کرد. ما همچنین یک ویژگی جستجوی محصول را پیاده‌سازی می‌کنیم و به دنبال آن تمرین‌های عمیقی درباره اعتبارسنجی فرم‌های ورودی در React انجام می‌دهیم.

همانطور که می‌بینید این دوره مقدار زیادی از زمینه را پوشش می‌دهد. بهترین از همه این است که Tim Maclachlan - یک توسعه دهنده ارشد مشهور با بیش از 20 سال تجربه توسعه تجاری - نویسنده مشترک آن است. به عنوان یک توسعه دهنده چند وجهی، تیم در توسعه الگوریتمی، تحلیلی و موبایل متخصص است. او تا به امروز صدها درخواست نوشته و در تعدادی از صنایع از حمل و نقل هوایی تجاری و نظامی گرفته تا بانکداری و مالی کار کرده است. تیم اشتیاق واقعی به آموزش دیگران دارد که چگونه کدنویسان بهتری شوند و مشتاقانه منتظر تعامل با دانش‌آموزان خود است. دکمه ثبت نام را بزنید و بیایید شروع کنیم.


این دوره برای چه کسانی است:

  • دانشجویان علاقه مند به کار با کتابخانه های محبوب جاوا اسکریپت
  • دانشجویان علاقه مند به ساخت اجزای رابط کاربری تعاملی با استفاده از React و jQuery
  • دانشجویان علاقه مند به تسلط بر توسعه Front-End با استفاده از جاوا اسکریپت

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

مقدمه ای بر مدل شیء سند (DOM) Intro to the Document Object Model (DOM)

  • معرفی DOM DOM Introduction

  • دستکاری DOM DOM Manipulation

توسعه جاوا اسکریپت JavaScript Development

  • مقدمه Introduction

  • قرار دادن JS JS Placement

  • جاوا اسکریپت خارجی External JavaScript

  • خروجی جاوا اسکریپت JavaScript Output

  • JavaScript InnerHTML JavaScript InnerHTML

  • کامنت گذاری جاوا اسکریپت JavaScript Commenting

  • ثابت جاوا اسکریپت JavaScript Constants

  • معرفی متغیرهای جاوا اسکریپت JavaScript Variables Introduction

  • اپراتور جاوا اسکریپت JavaScript Assignment Operator

  • عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

  • عملیات محاسباتی جاوا اسکریپت ادامه دارد JavaScript Arithmetic Operations Continued

  • اولویت اپراتور جاوا اسکریپت JavaScript Operator Precedence

  • انواع داده جاوا اسکریپت JavaScript Data Types

  • اشیاء جاوا اسکریپت JavaScript Objects

  • خروجی شی جاوا اسکریپت JavaScript Object Output

  • رشته های جاوا اسکریپت JavaScript Strings

  • طول رشته جاوا اسکریپت JavaScript String Length

  • کاراکترهای ویژه جاوا اسکریپت JavaScript Special Characters

  • اعداد تصادفی جاوا اسکریپت JavaScript Random Numbers

  • تابع حداقل و حداکثر جاوا اسکریپت JavaScript Min and Max Function

  • تابع دور ریاضی جاوا اسکریپت JavaScript Math Round Function

  • آرایه های جاوا اسکریپت JavaScript Arrays

  • ویژگی های آرایه جاوا اسکریپت JavaScript Array Attributes

  • آرایه های جاوا اسکریپت - Pop - Push - Shift - Unshift JavaScript Arrays - Pop - Push - Shift - Unshift

  • جاوا اسکریپت تغییر و حذف عناصر JavaScript Changing and Deleting Elements

  • جاوا اسکریپت پیوند یک آرایه JavaScript Splicing an Array

  • جاوا اسکریپت مرتب سازی یک آرایه JavaScript Sorting an Array

  • پیوستن آرایه های جاوا اسکریپت JavaScript Joining Arrays

  • عبارات شرطی جاوا اسکریپت JavaScript Conditional Statements

  • مقایسه جاوا اسکریپت JavaScript Comparisons

  • بولین های جاوا اسکریپت JavaScript Booleans

  • جاوا اسکریپت برای حلقه ها JavaScript For Loops

  • JavaScript For-In Loop JavaScript For-In Loop

  • JavaScript while Loops JavaScript While Loops

  • حلقه جاوا اسکریپت Do-While JavaScript Do-While Loop

  • جاوا اسکریپت شکسته و ادامه دهید JavaScript Break and Continue

  • توابع جاوا اسکریپت JavaScript Functions

  • رویدادهای جاوا اسکریپت JavaScript Events

  • JavaScript Project 1 - BG Color Changer JavaScript Project 1 - BG Color Changer

  • پروژه جاوا اسکریپت 2 - گالری عکس JavaScript Project 2 - Photo Gallery

  • پروژه جاوا اسکریپت 2 - تکمیل JavaScript Project 2 - Completion

توسعه جی کوئری jQuery Development

  • مقدمه ای بر جی کوئری Introduction to jQuery

  • جاسازی جی کوئری Embedding jQuery

  • jQuery Syntax and Selector Intro jQuery Syntax and Selector Intro

  • انتخابگر jQuery ID jQuery ID Selector

  • انتخابگر کلاس jQuery jQuery Class Selector

  • انتخابگرهای دیگر جی کوئری jQuery Other Selectors

  • فایل jQuery خارجی External jQuery File

  • معرفی رویدادهای jQuery jQuery Events Intro

  • رویدادهای jQuery - mouseenter و mouseeleave jQuery Events - mouseenter and mouseleave

  • رویدادهای jQuery - ماوس و موس jQuery Events - mousedown and mouseup

  • کنترل‌کننده‌های رویداد چندگانه jQuery jQuery Multiple Event Handlers

  • jQuery Hiding-Showing jQuery Hiding-Showing

  • jQuery Toggle jQuery Toggle

  • jQuery Fade In-Out jQuery Fade In-Out

  • jQuery Fade Toggle jQuery Fade Toggle

  • jQuery Fade To jQuery Fade To

  • jQuery Slide Down jQuery Slide Down

  • jQuery Slide Up jQuery Slide Up

  • جابجایی اسلاید جی کوئری jQuery Slide Toggle

  • jQuery Animate jQuery Animate

  • jQuery Animate - چند پارامتر jQuery Animate - Multiple Params

  • jQuery Animate - مقادیر نسبی jQuery Animate - Relative Values

  • jQuery Animate - قابلیت صف jQuery Animate - Queue Functionality

  • روش توقف جی کوئری jQuery Stop Method

  • توابع پاسخ به تماس جی کوئری jQuery Callback Functions

  • jQuery Chaining jQuery Chaining

  • jQuery Draggables jQuery Draggables

  • منوی آکاردئونی جی کوئری jQuery Accordian Menu

  • jQuery دریافت محتوا - متن و html jQuery Get Content - text and html

  • jQuery دریافت محتوا - Val jQuery Get Content - Val

  • jQuery دریافت محتوا - attr jQuery Get Content - attr

  • jQuery Set Content - text - html - val jQuery Set Content - text - html - val

  • jQuery Set Attributes - attr jQuery Set Attributes - attr

  • jQuery Append و Preprend jQuery Append and Preprend

  • jQuery - بعد و قبل jQuery - After and Before

  • jQuery Remove and Empty jQuery Remove and Empty

  • حذف فیلتر جی کوئری jQuery Filter Remove

  • jQuery اضافه کردن کلاس jQuery Add Class

  • jQuery Remove Class jQuery Remove Class

  • jQuery Toggle Class jQuery Toggle Class

React Development React Developmepment

  • مهارت های مورد نیاز Skills Required

  • React چیست؟ What is React?

React Project: یک ماشین حساب در React بسازید React Project: Build a Calculator in React

  • بررسی اجمالی پروژه Project Overview

  • سلام واکنش Hello React

  • ابزار مورد نیاز Tools Needed

  • قلم کد Code Pen

  • معرفی JSX Intro to JSX

  • کامپوننت های کاربردی در React Functional Components in React

  • چرا کامپوننت ها؟ Why Components?

  • معرفی Props در React Intro to Props in React

  • React Components، Props و Callbacks React Components, Props and Callbacks

  • ساخت تصویری ماشین حساب Building the Calculator Visuals

  • رویدادهای OnClick در React OnClick Events in React

  • عبور پارامترها در توابع پاسخ به تماس Passing Parameters in Callback Functions

  • با استفاده از React State Hook Using React State Hook

  • پیاده سازی ماشین حساب - نمایش Implementing the calculator - Display

  • پیاده سازی ماشین حساب - اپراتورها Implementing the calculator - Operators

  • اشکال زدایی در React Debugging in React

  • خلاصه ی پروژه Project Summary

React Project: ساخت Connect-4 Clone React Project: Build a Connect-4 Clone

  • بررسی اجمالی پروژه Project Overview

  • ابزار مورد نیاز Tools Needed

  • ایجاد صفحه بازی Creating the Game Board

  • دایره بازی - OnClickEvent Game Circle - OnClickEvent

  • گذراندن وسایل - تخریب - واکنش کودکان Passing Props - Destructing - React Children

  • ارسال آرگومان ها برای کلیک روی رویدادها Passing Arguments to Click Events

  • یک ظاهر طراحی داخلی Inline Styling

  • مولفه مربع به دایره Square to Circle Component

  • یک ظاهر طراحی جهانی Global Styling

  • یک ظاهر طراحی پویا Dynamic Styling

  • کلاس های دینامیک Dynamic Classes

  • رسیدگی به تماس ها Handling Callbacks

  • استفاده از React State Hook (دوباره) Using React State Hook (again)

  • به روز رسانی حلقه بازیکن Updating the Player Circle

  • راه اندازی صفحه بازی Initializing the Game Board

  • ویژگی React Key React Key Property

  • طراحی صفحه بازی - سرصفحه و پاورقی Styling the Game Board - Header and Footer

  • محاسبه برنده Calculating the Winner

  • نمایش برنده Displaying the Winner

  • تعیین یک شرط قرعه کشی Determining a Draw Condition

  • رویدادهای چرخه حیات واکنش نشان دهید React Lifecycle Events

  • راه اندازی بازی Initializing the Game

  • پیشنهاد حرکت - پیاده سازی یک پخش کننده کامپیوتری Suggesting a Move - Implementing a Computer Player

  • پخش کننده رایانه هوشمند (هوش مصنوعی اولیه) Smart Computer Player (Basic AI)

  • متغیرهای CSS CSS Variables

  • رندر مشروط Conditional Rendering

  • در Netlify مستقر شوید Deploy to Netlify

  • مستقر در Surge Deploy to Surge

  • خلاصه ی پروژه Project Summary

React Project: یک سایت تجارت الکترونیک بسازید React Project: Build an E-Commerce Site

  • بررسی اجمالی پروژه Project Overview

  • بررسی اجمالی پروژه Project Overview

  • داربست پروژه Scaffolding the Project

  • معرفی سرور JSON Intro to JSON Server

  • واکشی API Fetch API

  • سبک دادن به فروشگاه Styling the Store

  • ارائه دسته بندی ها Rendering the Categories

  • اتصال محصولات Binding the Products

  • تماس Fetch API را مجدداً تنظیم کنید Refactor the Fetch API call

  • مقابله با خطاها در Fetch API Dealing with errors in Fetch API

  • تماس Fetch API را مرتب کنید Tidy the Fetch API call

  • سبک دادن به لیست محصولات Styling the Product List

  • نصب روتر React Installing React Router

  • رفع اخطار کلیدی Fixing the Key Warning

  • روتر واکنش - صفحه جزئیات React Router - Detail Page

  • Fetch API - دریافت محصول بر اساس شناسه Fetch API - Get Product By Id

  • توضیحات محصول Product Description

  • مقدمه ای بر اجزای سبک Intro to Styled Components

  • اجزای سبک - توضیحات محصول Styled Components - Product Description

  • تنظیم خطرناک HTML (آره واقعا) Dangerously Set HTML (yeah really)

  • Refactor دسته ها Refactor the Categories

  • Layout را اصلاح کنید Refactor the Layout

  • صفحه اصلی را بازسازی کنید Refactor the Home Page

  • معرفی Context در React Intro to Context in React

  • UseContext Hook و UseReducer Hook در React UseContext Hook and UseReducer Hook in React

  • طرح بندی سبد Basket Layout

  • اجرای سبد Implementing the Basket

  • پیاده سازی آیکون های سبد Implementing Basket Icons

  • اجرای سبد کل Implementing Basket Total

  • اتمام پرداخت Finishing the Checkout

  • پرداخت - رفع وضعیت Checkout - Fixing the State

  • اجرای تایید سفارش Implementing the Order Confirmation

  • معرفی Local Storage Intro to Local Storage

  • پیاده سازی نتایج جستجو Implementing Search Results

  • جستجوی بهتر با Debouncing Better Searching with Debouncing

  • اعتبار سنجی فرم ها در React - قسمت 1 Validating Forms in React - Part 1

  • اعتبار سنجی فرم ها در React - قسمت 2 Validating Forms in React - Part 2

  • اعتبار سنجی فرم ها در React - قسمت 3 Validating Forms in React - Part 3

  • اعتبار سنجی فرم ها در React - قسمت 4 Validating Forms in React - Part 4

  • خلاصه ی پروژه Project Summary

نمایش نظرات

آموزش JavaScript، jQuery و React Bootcamp - Hands-On را کامل کنید
جزییات دوره
13h 3m
170
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
6,011
4.7 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

YouAccel Training YouAccel Training

شروع به یادگیری کنید و مهارت های مورد نیاز خود را کسب کنید! بیانیه ماموریت: برای تسهیل یک محیط جامع یادگیری آنلاین برای دانشجویان. درباره شرکت YouAccel یک ارائه دهنده پیشرو در آموزش آنلاین است ، دوره هایی را در صنایع مختلف از IT و توسعه گرفته تا تجارت ، بازاریابی ، طراحی و بهره وری ارائه می دهد. تجربه آموزش الکترونیکی ارائه شده توسط YouAccel پویا است. هر دوره در High Definition با تکالیف ، آزمونها و امتحانات مربوطه که به صورت الکترونیکی تحویل و درجه بندی می شوند ، پخش می شود. کلیه دوره های YouAccel توسط مربیان دارای گواهینامه تدریس می شود که دارای چندین سال سابقه کار در زمینه ای هستند که برای آنها آموزش می دهند. این دوره ها را می توان با سرعت شخصی برگزار کرد و در چندین سطح از جمله مبتدی ، متوسط و پیشرفته ارائه می شود. دوره های آنلاین همچنین برای راحتی بیشتر با هر دستگاه تلفن همراه سازگار هستند. با استفاده از این تجربه به یک سطح جدید شخصی ، ارتباط زنده با مربیان از طریق کنسول پیام رسانی آنلاین Udemy در دسترس است. کلیه دوره ها دارای گواهی پایان دوره هستند و محدودیت سنی اعمال نمی شود.