پروژههای مدرن جاوااسکریپت - راهنمایی عملی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- شما روی بیش از 20 پروژه هیجانانگیز کار خواهید کرد که حوزههای متنوعی از کاربردها را پوشش میدهند.
- درک ساختارهای کنترل مانند توابع، حلقهها و دستورات شرطی
- ساخت اپلیکیشنهای تعاملی با توابع constructor
- بررسی آرایهها و آبجکتها در جاوااسکریپت
- توانمندسازی شما برای بهثمر رساندن ایدههای خلاقانه خود از طریق جاوااسکریپت
پیشنیازهای دوره
- این دوره برای مبتدیان نیست. شما باید دانش پایهای خوبی از جاوااسکریپت (متغیرها، توابع، حلقهها، آرایهها و آبجکتها) داشته باشید.
- آشنایی کافی با HTML و CSS ضروری است.
- برای کدنویسی همراه ما، نیاز به یک ویرایشگر متن دارید - مثلاً ویژوال استودیو (که ما استفاده میکنیم)، Sublime Text و ++Notepad و براکتها
توضیحات دوره
به دوره «پروژههای مدرن جاوااسکریپت - راهنمایی عملی» خوشآمدید، دورهای جامع که با پروژههای واقعی و کاربردی مهارتهای شما را در جاوااسکریپت به سطح بالاتری میبرد. در طول دوره، روی بیش از 20 پروژه هیجانانگیز کار خواهید کرد که دامنه گستردهای از کاربردها را دربر میگیرد. چه بخواهید درک خود را قویتر کنید چه قصد گسترش پورتفولیوی خود را داشته باشید، این دوره ترکیبی ایدهآل از تئوری و عملی را ارائه میدهد. در این دوره، مفاهیم و تکنیکهای کلیدی جاوااسکریپت را خواهید آموخت که برای توسعه وب مدرن ضروری هستند. شما مهارت لازم برای ساخت اپلیکیشنهای جاوااسکریپت را کسب خواهید کرد. شما نحوه نوشتن کد تمیز و قابل نگهداری و همچنین اشکالزدایی مؤثر را نیز خواهید آموخت که پایهای قوی برای مسیر کدنویسی شما فراهم میکند.
نمونهای از پروژههایی که خواهید ساخت:
- Tooltips قابل کلیک واکنشگرا - ساخت Tooltips قابل کلیک واکنشگرا با رابط کاربرپسند
- شمارنده واکنشهای ایموجی - ساخت شمارنده واکنشهای ایموجی که تعداد کلیک روی هر ایموجی را میشمارد.
- منوی Offcanvas - ساخت منوی Offcanvas با افکت پوششی
- باکس مودال پاپآپ - ساخت باکس مودال پاپآپ که با محتوای طولانی قابل اسکرول است.
- پاپآپ هشدار - ساخت پاپآپ هشدار که پس از چند ثانیه ناپدید میشود.
- پاپآپ Toast - ساخت پروژه پاپآپ Toast
- کارتهای تصویری قابل گسترش - ساخت کارتهای تصویری قابل گسترش با طرحبندیهای هموار
- گالری تصویری قابل فیلتر - توسعه گالری تصویری قابل فیلتر با طرحبندی مدرن گالری واکنشگرا
- پروژه تایپ متن - ساخت پروژه تایپ متن با افکت پویای تایپ و حذف متن
- پروژه تایپرایتر (Text-To-Speech) - پیادهسازی پروژه تایپرایتر (Text-To-Speech)
- اپلیکیشن مبدل Text-To-Speech - ساخت اپلیکیشن مبدل Text-To-Speech که قادر است بین لهجهها جابجا شود.
- پلیر آلبوم ویدئویی - ایجاد پلیر آلبوم ویدئویی که امکان کلیک روی ویدئوی thumbnail را دارد.
- کاروسل تصاویر - ایجاد پروژه کاروسل تصاویر که با کلیک کردن یا به صورت اتوماتیک حرکت میکند.
- آلبوم پوشش تصویری - توسعه آلبوم با تکنیکهای مدرن پوشش تصویر
- صفحهبندی وب - نمایش صفحات وب با تکنیک صفحهبندی وب
- اپلیکیشن موزیک پلیر - ساخت اپلیکیشن موزیک پلیر که یک مودال پلی لیست دارد و میتواند به طور تصادفی رنگ پسزمینه را تغییر دهد.
- نوار پیشرفت اسکرول - ایجاد نوار پیشرفت اسکرول که با پایین رفتن پهنتر و با بالا رفتن باریکتر میشود و ترنزیشنی هموار دارد.
- افست لغزش افقی - ایجاد یک طرحبندی که با ویژگیهای scrollLeft و offsetWidth و scrollWidth به چپ و راست اسکرول میکند.
- ماشینحساب BMI - ساخت ابزاری برای محاسبه BMI با نمایش مدرن نتایج
- تحلیلگر پرداخت وام - توسعه ابزار تحلیلگر پرداخت وام برای تحلیل شرایط و سود وام
- ماشین حساب حسابی - ساخت اپلیکیشن ماشین حساب حسابی برای انجام محاسبات ساده حساب
- ماشین حساب علمی - ساخت اپلیکیشن ماشین حساب علمی برای محاسبات سینوس، تانژانت، کسینوس، ریشه دوم، ریشه مکعب، لگاریتم و غیره
- ساعت دیواری آنالوگ همراه با ساعت دیجیتال - ساخت ساعت دیواری آنالوگ با قابلیت نمایش دیجیتال
- ژنراتور رنگ تصادفی برای کدهای هگزادسیمال و RGB - تولید رنگهای تصادفی هگزادسیمال و دریافت مقدار معادل RGB و رنگ آن
- پروژه سبد خرید - ساخت پروژه سبد خرید واکنشگرا با ویژگی افزودن به سبد و محاسبه دقیق مجموع
در پایان دوره، شما یک پورتفولیوی متنوع از پروژهها خواهید داشت که توانایی شما در ساخت اپلیکیشنهای تابعی را به نمایش میگذارد. به ما در پروژههای عملی جاوااسکریپت بپیوندید و پتانسیل خود را بهعنوان برنامهنویس آشکار کنید. این دوره نه تنها مهارتهای کدنویسی شما را ارتقا میدهد بلکه شما را برای به تحقق رساندن ایدههای خلاقانهتان از طریق جاوااسکریپت توانمند میسازد. چه قصد دنبال کردن حرفه در حوزه فناوری را داشته باشید و چه بخواهید سرگرمی خود را توسعه دهید، این دوره راه موفقیت شماست.
این دوره برای چه کسانی مناسب است؟
- برنامهنویسان جاوااسکریپت که میخواهند نحوه کاربرد جاوااسکریپت در پروژهها را بیاموزند.
- ذهن خلاق که از ساخت پروژهها لذت میبرد.
- فریلنسرهایی که میخواهند پورتفولیوی خود را با پروژههای پویا گسترش دهند.
پروژههای مدرن جاوااسکریپت - راهنمایی عملی
-
مقدمه - بخش 1 15:06
-
مقدمه - بخش 2 13:11
-
پیش از شرکت در دوره ببینید 04:57
-
ویرایشگرهای کد که برای دوره قابل استفاده هستند 06:30
-
سرور لایو در ویژوال استودیو کد 02:38
-
ایجاد پوشه برای پروژههایمان 06:28
-
دانلود عکسها و ویدئوهای بدون حق امتیاز 05:24
-
دانلود موسیقی بدون حق امتیاز 02:10
-
کجا تگ اسکریپت را قرار دهیم و چرا؟ 09:27
-
ساختار اولیه tooltip 12:12
-
مبانی استایلدهی و دکمههای tooltip 15:26
-
استایلدهی به tooltips - بخش 1 23:21
-
استایلدهی به tooltips - بخش 2 18:50
-
واکنشگرایی tooltip 24:48
-
متغیر جاوااسکریپت و متد ()forEach 20:46
-
نمایش و مخفیسازی tooltip هنگام کلیک روی دکمه 15:33
-
بستن tooltip هنگام کلیک در هر جا در خارج دکمهها 19:47
-
ساختار اولیه پروژه ایموجی 07:44
-
استایلدهی به پروژه ایموجی 19:10
-
فعالسازی شمارنده هنگام کلیک روی ایموجی 21:19
-
افکت پاپآپ روی ایموجیهای کلیک شده 15:09
-
کار روی دایره شمارش 03:26
-
لینکدهی به fontawesome CDN 04:03
-
ساختار اولیه offcanvas 19:44
-
استایلدهی به offcanvas-toggle و offcanvas 19:02
-
استایلدهی به هدر offcanvas، بستن، بادی و ناوبری 19:07
-
استایلدهی به دکمه ثبتنام و overlay 11:59
-
ایجاد متغیرها و باز کردن offcanvas 18:38
-
بستن offcanvas با دکمه x و overlay 14:52
-
ساختار اولیه پروژه 19:06
-
استایلدهی به مودال و overlay 20:47
-
استایلدهی به انیمیشن مودال، هدر مودال و دکمه بستن 21:02
-
استایلدهی به دکمه dismiss 06:35
-
اعلان متغیرها و باز و بسته کردن مودال 18:00
-
بستن مودال از dismiss و کلید Esc 24:12
-
افزودن تصویر به مودال 04:50
-
کارهایی که وقتی مودال محتوای طولانی دارد باید انجام داد 10:41
-
ساختار اولیه و استایلدهی به دکمه تریگر 11:58
-
استایلدهی به کانتینر هشدار و دکمه بستن 14:05
-
ایجاد متغیرها و تابع ()showAlert 17:06
-
تابع ()hideAlert و clearTimeout 15:03
-
ساختار HTML اولیه Toast 10:24
-
استایلدهی به دکمههای Toast، آیکون بستن، تصویر Toast 16:08
-
استایلدهی به کانتینر Toast 15:06
-
ایجاد متغیرها و توابع ()showToast و ()hideToast 20:14
-
CloseBtn و CloseIcon و acceptButton 12:42
-
ساختار اولیه کارتهای تصویری قابل گسترش 11:32
-
استایلدهی به کارتهای قابل گسترش ما 17:36
-
استایلدهی به هاور کارت و کپشن 15:58
-
دستور IF - بررسی Collapsing کارتهای قبلاً باز شده 16:40
-
دستور ELSE - گسترش و Collapsing تمام کارتهای دیگر 17:47
-
ساختار اولیه پروژه 20:14
-
استایلدهی به کانتینر و دکمههای فیلتر 15:42
-
استایلدهی به آیتمهای گالری 12:15
-
استایلهای واکنشگرا 08:21
-
متغیرهای DOM جاوااسکریپت و حلقه forEach برای دکمههای فیلتر 17:13
-
دریافت مقدار فیلتر برای تعیین اینکه کدام آیتم نمایش داده یا مخفی شود 24:55
-
کدنویسی HTML و استایلدهی اولیه پروژه 18:04
-
پایان استایلدهی و افزودن Google font 11:44
-
اعلان متغیرهای جاوااسکریپت برای پروژه 18:33
-
متغیر currentWord و رشته فرعی آن 10:44
-
افکت تایپینگ با استفاده از دستور IF 13:19
-
تغییر از یک کلمه به کلمه دیگر با دستور ELSE 18:07
-
افکت حذف متن با دستور ELSE IF 16:44
-
ساختار اولیه تایپرایتر 13:44
-
استایلدهی به تایپرایتر - بخش 1 15:42
-
استایلدهی به تایپرایتر - بخش 2 14:05
-
اعلان متغیرهای مورد نیاز 12:53
-
تابع ()startTypewriter 19:47
-
تابع ()typeNextCharacter - دستور IF 15:57
-
تابع ()typeNextCharacter - دستور ELSE 13:13
-
تابع ()speakCompletedText 17:31
-
تست text-to-speech و دستکاری طول، سرعت، ارتفاع، حجم 11:21
-
ساختار اولیه اپلیکیشن 13:57
-
استایلدهی به اپلیکیشن - بخش 1 20:38
-
استایلدهی به اپلیکیشن - بخش 2 17:03
-
استایلدهی به وضعیت 07:48
-
اعلام متغیرهای DOM 12:27
-
تابع ()showStatus 18:40
-
تابع ()speak - دریافت ورودی متن، اعتبارسنجی ورودی و speak text 23:16
-
بررسی پشتیبانی مرورگر از speechSynthesis و توقف سخنرانی در حال انجام 16:29
-
زبان گفتار و انتخاب لهجه 18:05
-
تطابق صدا 19:53
-
تست ()getVoices 07:08
-
onstart ،onend و onerror 27:30
-
ساختار اولیه thumbnails و پلیر ویدئویی 14:49
-
کار روی دکمههای SVG کنترل 07:54
-
استایلدهی به ویدئو پلیر و دکمههای کنترل 18:36
-
استایلدهی به thumbnails 12:04
-
ایجاد متغیرهای ثابت 10:25
-
تابع loadVideo 15:24
-
forEach() thumbnails با رویداد کلیک 22:13
-
تابع toggleVolume 20:30
-
تابع playPauseVideo 19:11
-
تابع دکمه ویدئوی بعدی 19:32
-
تابع دکمه ویدئوی قبلی 08:52
-
مدیریت ()mainVideo.play و اطمینان از تنظیم آیکون پخش در ابتدا 08:33
-
ساختار اولیه کاروسل 21:08
-
استایلدهی به کاروسل، تصویر کاروسل و آیتم کاروسل 13:56
-
استایلدهی به کپشن و دکمههای قبلی و بعدی 21:28
-
استایلدهی به اندیکاتورها 12:02
-
ایجاد متغیرهای DOM 15:43
-
حرکت کاروسل به ایندکس فعلی 13:29
-
بروزرسانی اندیکاتورها 13:52
-
تابع ()nextImage 12:27
-
تابع ()prevImage 10:29
-
اندیکاتورهای قابل کلیک 16:03
-
پخش خودکار تصاویر کاروسل 05:27
-
پاز کردن و از سرگیری کاروسل هنگام پخش خودکار 13:47
-
ساختار اولیه پروژه 11:43
-
استایلدهی به کانتینر thumbnail و تصاویر thumbnail 18:15
-
استایلدهی به overlay 19:17
-
ایجاد متغیرهای DOM و ()thumbnails.forEach 23:42
-
تابع دکمه قبلی 20:49
-
تابع دکمه بعدی 06:29
-
تابع دکمه قبلی که دکمه قبلی را غیرفعال میکند 10:09
-
تابع دکمه بعدی که دکمه قبلی را دوباره فعال و دکمه بعدی را غیرفعال میکند 11:25
-
ساختار اولیه صفحهبندی 23:43
-
استایلدهی به طرحبندی صفحه 16:47
-
استایلدهی به صفحهبندی و دکمهها 15:14
-
ایجاد متغیرهای DOM 09:56
-
تابعی برای بروزرسانی صفحه بر اساس شماره صفحه 21:10
-
فعالسازی دکمهها و بروزرسانی صفحه فعلی 14:54
-
قابل کلیک کردن دکمههای صفحهبندی 13:58
-
درک لینک بین pageId و pageNumBtn 04:03
-
ساختار اولیه پلیر 18:02
-
ساختار آیکونهای کنترل و آیکون حجم 26:43
-
استایلدهی به پلیر - بخش 1 18:55
-
استایلدهی به پلیر - بخش 2 18:43
-
استایلدهی به پلیر - بخش 3 21:10
-
استایلدهی به پلیر - بخش 4 11:29
-
استایلدهی به پلیر - بخش 5 13:57
-
متغیرهای DOM 17:03
-
آرایه آبجکتهای لیست آهنگها 16:49
-
اعلان متغیرهای کلیدی 12:23
-
مقداردهی اولیه عناصر پلیر با تابع ()loadSong 18:48
-
آیتمهای پلی لیست 22:02
-
تابع togglePlayPause 16:46
-
دریافت رنگ تصادفی و تغییر رنگ پسزمینه 27:21
-
تابع playNextSong 22:50
-
تابع playPreviousSong 10:13
-
تابع فرمت زمان در HH:MM:SS 21:49
-
درک Object Destructuring 11:54
-
تابع updateProgress 28:00
-
تابع setProgress 24:16
-
تابع changeVolume 13:08
-
تابع toggleMute 21:44
-
نمایش و بستن مودال 23:38
-
تابع ()populatePlaylist 29:05
-
تکمیل () populatePlaylist 09:18
-
تابع playSongFromPlaylist(index) 21:37
-
افزودن نکات نهایی 06:26
-
ساختار اولیه BMI - بخش 1 17:17
-
ساختار اولیه BMI - بخش 2 13:55
-
استایلدهی بیشتر به BMI - بخش 1 12:38
-
استایلدهی بیشتر به BMI - بخش 2 19:38
-
اعلان متغیرهای مورد نیاز 20:36
-
listener تاگل یونیتها 16:08
-
دکمه محاسبه - اطمینان از چک کردن یونیتها و ریست خطاها 16:35
-
اعتبارسنجی ورودیها برای چک کردن خطاها 12:43
-
محاسبه BMI و دریافت و نمایش نتایج 23:22
-
دستهبندی BMI و توضیح آن و کلاس دستهبندی 14:08
-
کلاس دستهبندی برای استایلدهی به دستهبندیها 11:01
-
ساختار اولیه اپلیکیشن وام 15:19
-
ساختار اولیه و استایلدهی اپلیکیشن وام 17:19
-
تکمیل استایلدهی 06:28
-
ریست مجدد خطا و دریافت مقادیر ورودی 15:06
-
اعتبارسنجی مقادیر ورودی 21:04
-
محاسبه پرداخت ماهانه، کل پرداخت و کل بهره 13:40
-
کار روی تابع formatCurrency(amount) 17:24
-
نمایش مقادیر نتیجه و نمایش نتایج 15:23
-
آشنایی با این پروژه 03:35
-
ساختار اولیه این ماشینحساب 13:17
-
چیدمان دکمهها در سطر جدول 12:58
-
استایلدهی به ماشینحساب و باکس نمایش 16:35
-
استایلدهی به دکمهها 15:07
-
اعلان متغیرها و کار روی حلقه forEach دکمهها 22:37
-
دکمه DEL 09:42
-
نمایش خالی هنگام کلیک روی equals 05:27
-
ارزیابی عبارات ریاضی 17:12
-
Try و ضبط خطا (try...catch) 07:32
-
افزودن نقطه اعشار به ماشینحساب 03:01
-
ساختار اولیه 17:29
-
افزودن دکمهها - بخش 1 15:47
-
افزودن دکمهها - بخش 2 10:50
-
استایلدهی به ماشینحساب 20:06
-
ایجاد توابع append و clear و backspace 19:14
-
محاسبه تابع نتیجه 08:28
-
محاسبه درصد، ریشه دوم، ریشه مکعب، لگاریتم 10 و ln 13:14
-
محاسبه سینوس، کسینوس و تانژانت به درجه 11:08
-
محاسبه فاکتوریل 10:51
-
محاسبه مبناهای 2، 8 و 16 09:47
-
ساختار اولیه ساعت آنالوگ 19:14
-
استایلدهی کلی اعداد روی ساعت 16:40
-
قرار دادن اعداد روی ساعت 19:47
-
استایلدهی به دایره در مرکز و باکس دیجیتال 11:32
-
استایلدهی و موقعیتیابی عقربههای ساعت 19:33
-
ایجاد متغیرها و تابع ساعت 05:46
-
ایجاد ()new Date و ثابتهای عقربه ثانیه 05:02
-
کار روی زاویه درجه برای چرخش عقربه ثانیه 17:12
-
کار روی عقربه دقیقه 10:18
-
کار روی عقربه ساعت 09:31
-
ساعت دیجیتال روی ساعت دیواری 12:18
-
جمعبندی پروژه 05:39
-
ساختار HTML پروژه 09:07
-
ساختار CSS پروژه 18:33
-
ایجاد متغیرها و افزودن Listener رویداد 14:57
-
تولید رنگ هگزادسیمال تصادفی 21:16
-
تبدیل هگز تولید شده به RGB 14:05
-
فراخوانی تابع hexToRgb برای تبدیل هگز به RGB 11:21
-
دکمه کپی هگزادسیمال 22:35
-
دکمه کپی RGB 13:15
-
ساختار اولیه پروژه 19:42
-
استایلدهی بخش هدر 20:08
-
استایلدهی به کانتینر آیتمهای سبد خرید 14:13
-
استایلدهی به عناصر آیتم سبد خرید 17:16
-
استایلدهی به عناصر کانتینر محصول 19:35
-
اعلان متغیرهای DOM 09:09
-
آرایهای از آبجکتهای محصولات 11:50
-
تابع ()renderProducts 26:47
-
فراخوانی تابع ()renderProducts 12:19
-
تاگل کردن آیکون سبد خرید و بستن کانتینر آیتمهای سبد خرید از بیرون 19:06
-
تابع ()addToCartButtonListeners 28:36
-
تابع ()updateCartDisplay 19:26
-
ایجاد ساختار آیتم سبد خرید 30:22
-
فیکس کردن مشکل داپلیکیت شدن آیتم سبد خرید 06:39
-
دکمه افزایش تعداد 16:22
-
دکمه حذف 11:53
-
دکمه کاهش تعداد 24:41
-
فیکس کردن حداکثر ارتفاع 04:47
مشخصات آموزش
پروژههای مدرن جاوااسکریپت - راهنمایی عملی
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:متوسط
- تعداد درس:230
- مدت زمان :62:08:08
- حجم :29.78GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy