دوره جامع و پیشرفته جاوااسکریپت

آموزش پیشرفته جاوااسکریپت در قالب 5 پروژه تدریس شده است. این دوره در بهار 1402 به صورت کامل مجددا ضبط شد.

۳۴:۳۸:۰۰
۱۸۸ جلسه
۶۱۴۵ دانشجو
۵  از  ۲۰  رای
روش دریافت:  اسپات پلیر
تاریخ انتشار :۱۴۰۲/۱/۳۱
آخرین بروزرسانی:۱۴۰۵/۸/۲
پشتیبانی: دائمی تلگرام

توضیحات دوره

آموزش پیشرفته جاوااسکریپت در قالب 5 پروژه تدریس شده است. این دوره در بهار 1402 به صورت کامل مجددا ضبط شد.

جاوااسکریپت دیگه چیه ؟

آمارهای گیت هاب و سایت stack overflow نشان میده که بازارکار جاوااسکریپت چه در ایران و چه در خارج از کشور رشد چشم گیری در این چند سال اخیر داشته. تا جایی که در سال 2019، جاوااسکریپت به عنوان محبوب ترین زبان برنامه نویسی شناخته شد. یکی از دلایل محبوب زبان برنامه نویسی جاوااسکریپت، آپدیت های زبان جاوااسکریپت هست که جذابیت این زبان را بیشتر کرده است

چرا باید جاوااسکریپت رو فرا بگیریم ؟

شما تنها با فرا گرفتن جاوااسکریپت، میتوانید برنامه هایی را برای پلتفرم های مختلف توسعه دهید. به عنوان مثال با ریکت (react.js)، vue.js و انگولار (angular) میتوان فرانت سایت را توسعه داد. به کمک nodejs، denojs و express میتوان بک اند سایت و با استفاده از React Native اپلیکیشن های مختص اندروید و ios را توسعه داد.

خب وقتی فریمورک هست، چرا جاوااسکریپت لازمه ؟

وقتی میگن از فریمورک ها و کتابخانه های جاوااسکریپت استفاده زیادی میشود یعنی اینکه ما یک سری کارهایی را که به سختی با خود جاواسکریپت انجام میدهیم، به کمک این تکنولوژی ها به سادگی قابل پیاده سازی هست. اما نباید فراموش کنیم که برای تسلط کافی روی هر کدام از این فریمورک ها، درک عمیق مفاهیم زبان جاوااسکریپت لازم هست. اگر این زبان را به خوبی یاد بگیریم، سرعت پیشرفت و یادگیری شما، خیلی بیشتر می شود. متاسفانه اکثر افراد تازه کار از این مساله غافل هستند.

چرا دوره جامع و پیشرفته جاوااسکریپت آماده شد ؟

از اوایل اسفند 99 تا اواسط خرداد 1400روی این دوره وقت گذاشتم، چون بعد از کارکردن با بیش از 125 دانش پذیر که با من کوچ خصوصی داشتن، به یک مشکل پی بردم که اکثر این افراد درک درستی از مفاهیم جاوااسکریپتی نداشتن و به همین علت یادگیری ریکت (reactjs)، vuejs و فریمورک های دیگه براشون واقعا دشوار بود. این دوره آماده شد تا شما در یک قدمی بازار کار قرار بگیرید

آیا همین دوره جاوااسکریپت کافی خواهد بود؟

مطمین باشید که اولین و آخرین دوره جاوااسکریپتی هست که شرکت خواهید کرد. مطالب، پروژه ها و پشتیبانی این دوره خیلی فراتر از آن چیزی هست که برای شروع کار با تکنولوژی های جاوااسکریپت نیاز دارید. البته شما بعد از این دوره، باید همیشه یاد بگیرید و برای خیلی از مفاهیم سرچ کنید و سرچ کردن رو طی دوره تمرین میکنیم.

برای پشتیبانی چه برنامه ای داری ؟

این دوره پشتیبانی منحصربفرد دارد. پشتیبانی به صورت گروه های ویژه تلگرامی هست و فقط خودم جوابگوی هر گونه سوال و ابهام شما چه در مسائل فنی و چه در پروسه استخدامی و رزومه سازی هستم.

صاحب، میشه بگی ساختار کلی دوره چطوریه ؟

خیلی به این فکر کردم که جاوااسکریپت رو چطور برای شما قابل فهم و کاربردی بگم. بنابراین تصمیم گرفتم دوره رو به دو بخش کلی تقسیم کنم. بخش اول که شامل فصل 1 تا 6 هست. طی این شش فصل، شما به صورت کاملا کاربردی مفاهیم بیسیک زبان برنامه نویسی جاوااسکریپت مثل الگوریتم ها، عملگراها، آرایه و آبجکت و.. رو یاد میگیرید. در پایان هر فصل تمرین هایی رو گذاشتم تا بتونم مهارت حل مساله شما رو تقویت کنم. در بخش دوم، به کمک چیزایی که در بخش اول فرا گرفتیم، پروژه میزنیم. پروژه ها از ساده شروع میشه. اما این پروژه ها واقعی هستند، پس همزمان لازم میشه که مفاهیم DOM را کاربری یاد بگیریم. در ادامه مباحث پیشرفته تر مثل async Js و برنامه نویسی شی گرا گفته میشه، پس ابتدا با مساله های کوچک این مفاهیم رو یاد میگیریم و برای هر کدام پروژه میزنیم. این دوره سه تا وبینار هم داره.

راجب پروژه ها یکم بیشتر توضیح میدی ؟

تمرین ها، چالش ها و پروژه ها با نهایت حساسیت انتخاب شدن تا همه مفاهیم و چالش هایی که در طی دوره داشتیم، مجددا استفاده بشه و مطالب تثبیت بشه. به عنوان مثال، پروژه سبد خرید به کمک برنامه نویسی شی گرا (object oriented programming) پیاده شده است. این دوره فعلا 25 تا تمرین، 4 تا چالش و 5 پروژه واقعی دارد.

سه تا وبینار توی دوره جریانش چیه ؟

بعد از کار کردن با بیش از 125 دانشجو، به این تجربه رسیدم که اگه دانشجو احساس کنه، کسی کنارش هست که کل مسیر رو رفته با اطمینان خاطر بیشتری یاد میگیره، در این مسیر تجربه های خودم رو بهش میگم و نمیذارم مسیر اشتباهی بره و یادگیری براش لذت بخش خواهد شد. این دوره سه تا وبینار یک ساعته داره که در طول دوره برگزار میشه. در این وبینارها مسائل مربوط به فرایند استخدامی، رزومه سازی، نمونه کار و سوالات فنی دانشجویان جواب داده میشه.

وجه تمایز دوره ت چیه ؟

برای من باعث افتخاره که خودم رو معلم بدونم و توی آموزش مساله ای که برام اهمیت داره اینه که توی تدریس همراه دانشجو باشم و همیشه یک مفهوم رو با طرح یک مساله تدریس میکنم. به راه حل ها فکر میکنیم و پیاده میکنیم. مساله رو پیچیده تر میکنیم و با ترکیب چیزایی که از قبل یاد گرفتیم، به بهینه ترین راه حل میرسیم. این مدل تدریس من هست. قطعا پشتیبانی، وبینارها و پروژه محور بودن از ویژگی های این دوره هست که توی هیچ دوره ی برنامه نویسی دیگه ای، وبیناری برای آسان کردن مسیر استخدامی برگزار نمیشه و بعد یادگیری دانشجو سردرگم میشه و میره دنبال دوره های دیگه. این دوره دقیقا جاییه که جلو همه ی این اتفاقات رو میگیره.

بخاطر مبلغ دوره، نمیخواهم در این دوره شرکت نمایم. پیشنهاد شما چیست؟

به دست آوردن هر چیزی بهایی دارد؛ خیلی از هزینه های زندگی به ما برنمیگرده اما شما توی این دوره روی ارتقاء کیفیت زندگی خودتان سرمایه گذاری می کنید. از امروز شروع کنید و روی رشد خودتان و مهارتتان سرمایه گذاری کنید. هر چیز ارزشمندی می‌خواهید به دست بیاورید باید ابتدا بهای آن را بپردازید.

جلسات دوره

۱what is JavaScript ?
۱۱′
۲what we need?
۵′
دانلود ویدیو
۳first code in JavaScript
۶′
دانلود ویدیو
۴Variable in JavaScript
۱۰′
دانلود ویدیو
۵data types in JavaScript
۵′
دانلود ویدیو
۶dynamic typing in Js
۷′
دانلود ویدیو
۷const VS let
۷′
دانلود ویدیو
۸Object
۱۴′
دانلود ویدیو
۹Array
۱۶′
دانلود ویدیو
۱Arithmetic operators
۱۲′
دانلود ویدیو
۲Comparison operators
۵′
دانلود ویدیو
۳Equality operators
۶′
دانلود ویدیو
۴Ternary operators
۵′
۵Logical operators - boolean
۱۲′
۶Logical operators - non-boolean
۹′
۷Nullish coalescing
۷′
۸Swap variable challenge
۳′
۹nums of week in age challenge
۶′
۱If-else
۹′
دانلود ویدیو
۲Switch Case
۱۰′
۳for loop
۸′
۴while - do while
۴′
۵For of - For in
۱۰′
۶break - continue
۴′
۷what is function
۱۱′
۸return in function
۱۶′
۹max number challenge
۴′
۱۰FizzBuzz Challenge
۱۱′
۱۱stepwise discount challenge
۱۷′
۱object property and methods in object
۱۰′
دانلود ویدیو
۲this keyword
۸′
۳factory function
۶′
۴constructor function
۸′
۵built-in constructor functions
۱۱′
۶dynamic nature of objects
۶′
۷primitive VS reference data type
۱۲′
۱Object desctructuring
۱۸′
۲template literals
۳′
۳array destructuring
۱۲′
۴spread operators
۱۶′
۵rest operator
۱۱′
۶rest operator in function
۹′
۷Set data Structure
۱۳′
۸Map data structure
۱۰′
۹an example of Map data type
۹′
۱۰array of objects
۸′
۱۱Map and Set challenge
۴′
۱function expression - function declaration
۶′
۲arrow function
۷′
۳lexical scope
۲۵′
۴default-parameters
۷′
۵pass primitive VS pass reference to function
۱۱′
۶First-class function
۷′
۷Higher order function -callback function
۱۸′
۸Higher order function usage
۱۱′
۹call apply method
۱۶′
۱۰bind method
۱۶′
۱۱closure
۱۸′
۱basic srtring methods
۱۶′
۲split join trim methods
۸′
۳search in string challenge
۱۰′
۴check email exist challenge
۸′
۵capitalize first letter of a word challenge
۱۰′
۶capitalize first letter of all words in statement challenge
۹′
۷padding in string
۱۳′
۱array baisc methods
۷′
۲slice splice concat reverse join at
۱۴′
۳foreach method
۱۱′
۴foreach on Set and Map data
۴′
۵map method
۱۸′
۶filter method
۱۱′
۷reduce method
۱۲′
۸calc average challenge- chain methods
۱۴′
۹find and findInex method
۱۵′
۱۰some and every mthod
۱۷′
۱۱sort method
۱۰′
۱Number and Math
۱۹′
۲Date and Basic methods
۱۳′
۳calculate date difference challenge
۹′
۴sort note based on date
۱۵′
۵local date
۱۰′
۶setTimeOut and setInterval
۱۱′
۷countDown timer
۱۲′
۱what is DOM ?
۱۳′
۲add element to DOM
۱۳′
۳remove and update element on DOM
۸′
۴input and change event
۱۵′
۵search on products challenge
۱۴′
۱counter project section#1
۱۲′
۲counter project section#2
۱۲′
۳modal mini project
۱۰′
۱TodoList project intro
۵′
۲Add new Todo
۱۲′
۳Filter todos
۹′
۴Delete todos
۱۰′
۵Check todo
۷′
۶Fix application bug
۸′
۷Save todos in localStorage
۲۰′
۱Why are OOP so important
۱۰′
۲prototype
۱۸′
۳add methods on prototype
۸′
۴convert constructor function to class
۱۰′
۵setter and getter
۱۶′
۶Static method and static property
۲۳′
۷4 principle of OOP
۱۶′
۸calss inheritance
۱۴′
۹class encapsulation - protected fields
۷′
۱۰private fields- private methods
۹′
۱shopping cart products basic
۸′
۲shopping cart required classes
۱۹′
۳shopping cart - addToCart
۱۳′
۴update-cart-storage
۱۳′
۵calculate cart total and items
۱۰′
۶show-save-cart items
۱۹′
۷Clear Cart Values
۱۵′
۸clear cart-items from DOM
۱۸′
۹increment cart items
۱۰′
۱۰remove decrement cart items
۱۴′
۱what is Async Javascript
۱۲′
۲callback in javascript
۱۱′
۳callback hell
۸′
۴promise and promise chain
۲۵′
۵async await
۱۰′
۶Event loop in JavaScript and node.js
۱۸′
۱What is Back-end API
۱۴′
۲how to call back-end API
۶′
۳get and post data using fetch method
۱۲′
۴error handling while using fetch method
۱۳′
۵calla API using axios
۱۸′
۶config axios
۱۹′
۷put, patch and delete method
۱۳′
۸set header in requests
۱۳′
۱مرور پروژه سرچ و فیلتر
۲′
۲HTML CSS APP Layout
۱۸′
۳render-filter-products
۱۶′
۴render filtered products on DOM
۱۷′
۱SPA introduction
۱۱′
۲define router function
۱۴′
۳Navigate function
۱۰′
۴creating page content
۷′
۵fix page refresh
۱۰′
۶sidebar style
۱۱′
۷toggle sidebar
۶′
۸transform chevron
۶′
۱module-exports
۱۲′
۲module exports methods 2
۷′
۳common Js in browserfiy
۸′
۴ES6-module-export
۱۳′
۱Note app introduction
۲′
۲Note App HTML CSS
۱۰′
۳get All Notes
۱۰′
۴save and delete Note
۱۴′
۵NoteView Class
۲۱′
۶update noteList
۱۹′
۷delete Note
۱۰′
۸stop propagation
۳′
۹active note
۱۲′
۱۰refactore code-onSelect-onAdd
۱۵′
۱۱edit-delete-note and review App
۱۲′
۱اصلا babel چی چیه ؟
۱۴′
۲adding gitignore and run scripts
۵′
۳compile javascript with babel in project
۶′
۴adding webpack to application
۸′
۵adding webpack.config.js file
۷′
۶adding babel in webpack
۱۲′
۷adding css and style loader
۹′
۸adding webpack devServer
۶′
۹minimizing and usglifying code
۶′
۱معرفی پروژه دوره
۷′
۲نصب تیلویند به کمک postCSS
۱۲′
۳توسعه فرم اضافه کردن دسته بندی
۱۶′
۴توسعه فرم اضافه کردن محصولات
۶′
۵توسعه قسمت لیست محصولات
۹′
۶چه کلاس هایی نیاز داریم ؟
۷′
۷Storage.getAllProducts
۱۴′
۸Storage.saveCategory
۸′
۹Storage.getAllProducts - saveProducts
۶′
۱۰CategoryView.AddNewCategory
۱۲′
۱۱CategoryView.setApp-createCategoryList
۱۹′
۱۲ProductView.AddNewProduct
۲۶′
۱۳search in Products
۱۲′
۱۴sort products
۹′
۱۵toggle category
۹′
۱۶delete product
۲۰′
۱متغیرهای محیطی چیست ؟ کاربردشون چیه ؟
۹′
۲جدا کردن فایل env از سورس کد پروژه
۷′
۳متغیر node_env چیست ؟ کاربردش چیه؟
۴′
۴متغیر های محیطی در ریکت
۵′

سوالات متداول

هیچ پیش نیازی از دانش برنامه نویسی نیازی نیست، فقط آشنایی با html css پیش نیاز این دوره هست.

همه ی دوره های فرانت هوکس آپدیت میشه و آپدیت ها به صورت رایگان به پنل شما اضافه میشه

بله همه ی آموزش ها بر اساس پروژه توضیح داده میشه. سه تا از پروژه ها هم بر اساس OOP تدریس می شود.

بله، پشتیبانی و دسترسی به محتوای دوره هیچ محدودیت زمانی ندارد.

مشکلی که خیلی از برنامه نویسان فرانت اند دارند اینه که از قدرت CSS خبر ندارن و از همون ابتدا سراغ فریمورک های آماده میرن که در دراز مدت بهشون ضربه بزرگی میزنه. طبیعتا یادگیری فریمورک ها خوبه ، اما هیچ وقت فریمورک هایی مثل بوتسترپ (Bootstrap)، تیلویند (TailwindCSS) و چیزای دیگه ما رو از یادگیری مفاهیم اصلی و بشدت کاربردی مثل Flex – Grid – Responsive design بی نیاز نمی کنن. یادگیری اصولی مفاهیم، بین برنامه نویس خوب و بد، تمایز ایجاد میکنه. بنابراین، تمام تمرکز من هم روی تدریس دقیق مفاهیم کاربردی HTML و CSS در طی پیاده کردن پروژه ها بوده.

۳,۲۵۹,۰۰۰
saheb mohamadi | صاحب محمدی

صاحب محمدی

مدرس دوره

داستان برنامه نویس شدن من برمیگرده به سال ۹۳. همون موقع که برای پروژه های دانشگاه (رشته مهندسی نفت) برنامه نویسی میکردم. کم کم با MATLAB آشنا شدم و بعدا وارد حوزه برنامه نویسی وب شدم و الان حدود ۱۰ ساله که شغل تخصصی من برنامه نویسی وب هست. علاقه من جاوااسکریپت و خاندانش است. به همین دلیل فرانت هوکس رو بنا کردم تا تجربه چند ساله رو در قالب دوره های پروژه محور به علاقه مندان این حوزه انتقال بدم ☘️🤍.

میتوانید دیدگاه خود را ثبت کنید