طبق آمار سایت Github، جاوا اسکریپت در سال‌های اخیر پرکاربردترین زبان برنامه‌نویسی در جهان بوده است. امروزه جاوا اسکریپت را در حوزه‌های مختلف برنامه‌نویسی می‌توان به کار برد. البته مهمترین کاربرد این زبان، برنامه‌نویسی در محیط وب است. اما در بسیاری حوزه‌های دیگر مانند برنامه‌نویسی سمت سرور، برنامه‌نویسی موبایل، برنامه‌نویسی دسکتاپ، برنامه‌نویسی گرافیکی و ... می‌توان از جاوا اسکریپت استفاده کرد.
در این دوره‌ی آموزشی قصد داریم تا شما را با اصول برنامه‌نویسی با زبان قدرتمند JavaScript آشنا کنیم. در این در ابتدا بیشتر مباحث مشترکی که در تمام حوزه‌های برنامه‌نویسی با جاوا اسکریپت کاربرد دارند پوشش داده می‌شوند. سپس در دو فصل پایانی به مباحث پیشرفته‌ای مانند Ajax و برنامه‌نویسی آسنکرون می‌پردازیم. البته مباحث پیشرفته‌ی دیگری در مورد جاوا اسکریپت باقی خواهد ماند که در دوره‌های آموزشی جداگانه‌ای پوشش داده خواهند شد.
مطالب این دوره‌ی آموزشی مبتنی بر کتاب "آموزش جاوا اسکریپت : از مبتدی تا پیشرفته" است که پیشتر بر روی سایت قرار گرفته است. البته در این دوره تمرکز بیشتری بر روی جنبه‌های عملی جاوا اسکریپت خواهیم داشت و چندین پروژه‌ی عملی را در طول دوره پیاده‌سازی خواهیم کرد.
پیش‌نیاز :
- تنها پیش‌نیاز این دوره‌ی آموزشی، آشنایی با HTML و CSS در حد مقدماتی است.
فهرست دروس دوره
-
معرفی جاوا اسکریپت
-
معرفی جاوا اسکریپت و سرفصل مطالب دوره
۴۳ دقیقه -
آماده‌سازی محیط برنامه‌نویسی
۲۳ دقیقه
-
-
مبانی برنامه نویسی و دستور زبان جاوا اسکریپت
-
دستور زبان جاوا اسکریپت و شناسه‌ها
۲۳ دقیقه -
متغیرها، ثابت‌ها و انواع داده‌ها
۲۸ دقیقه -
کار با اعداد و عملگرهای محاسباتی
۴۰ دقیقه -
کار با رشته‌ها در جاوا اسکریپت
۳۵ دقیقه -
تبدیل انواع داده‌ها به یکدیگر
۲۹ دقیقه -
عملگرهای منطقی، عملگرهای مقایسه و تقدم عملگرها
۴۲ دقیقه
-
-
ساختارهای کنترلی، آرایه‌ها، مجموعه‌ها، نقشه‌ها
-
آشنایی با ساختارهای شرطی
۳۵ دقیقه -
آرایه‌ها در جاوا اسکریپت
۴۳ دقیقه -
ساختارهای تکرار (حلقه‌ها)
۳۵ دقیقه -
آشنایی با مجموعه‌ها (Sets) و نقشه‌ها (Maps)
۲۷ دقیقه
-
-
توابع در جاوا اسکریپت
-
آشنایی اولیه با توابع
۲۶ دقیقه -
نکاتی در مورد تعریف توابع و Arrow Function ها
۳۱ دقیقه -
حوزه‌ی شناسه‌ها و مفهوم Hoisting
۳۰ دقیقه -
آشنایی با توابع Callback و کاربرد آنها
۳۰ دقیقه
-
-
اشیاء در جاوا اسکریپت
-
مقدمه‌ای بر اشیاء در جاوا اسکریپت - بخش اول
۴۲ دقیقه -
مقدمه‌ای بر اشیاء در جاوا اسکریپت - بخش دوم
۳۷ دقیقه -
آشنایی با انواع مقدار و انواع ارجاع و معرفی شئ Math
۴۸ دقیقه -
آشنایی با اشیاء Date و RegExp
۳۵ دقیقه
-
-
آشنایی با DOM و تعامل با صفحات وب
-
آشنایی با مفهوم DOM و انتخاب عناصر صفحه وب
۳۶ دقیقه -
حرکت در درخت DOM و کار با صفات (Attributes) عناصر
۳۷ دقیقه -
کار با محتوا و سبک‌های عناصر - بخش اول
۳۶ دقیقه -
کار با محتوا و سبک‌های عناصر - بخش دوم
۳۱ دقیقه
-
-
رویدادها در جاوا اسکریپت
-
آشنایی با رویدادها و برنامه نویسی رویداد محور (Event-Driven)
۲۸ دقیقه -
آشنایی با رویدادهای ماوس و شئ رویداد (Event Object)
۳۵ دقیقه -
آشنایی با رویدادهای صفحه کلید و رویدادهای لمسی
۳۰ دقیقه -
آشنایی با مفهوم Event Flow و نکات تکمیلی
۴۲ دقیقه -
پروژه بازی "حدس عدد" با جاوا اسکریپت
۳۵ دقیقه -
پروژه "ماشین حساب" با جاوا اسکریپت
۴۰ دقیقه
-
-
کار با فرم ها
-
کار با فرم ها در جاوا اسکریپت - بخش اول
۴۱ دقیقه -
کار با فرم ها در جاوا اسکریپت - بخش دوم
۵۰ دقیقه
-
-
آشنایی با BOM و تعامل با مرورگر
-
معرفی BOM و آشنایی با System Dialogs
۴۴ دقیقه -
زمانبندی کارها و ایجاد انیمیشن در جاوا اسکریپت
۳۲ دقیقه -
کسب اطلاعات در مورد مرورگر و محیط اجرا
۳۷ دقیقه -
کار با پنجره ها و رویدادهای مرورگر
۳۴ دقیقه -
پروژه "ساعت دیجیتال" با جاوا اسکریپت
۲۹ دقیقه -
پروژه "اسلایدر" با جاوا اسکریپت
۴۴ دقیقه
-
-
آشنایی با خطاها و اشکال‌زدایی برنامه‌ها
-
اشکال زدایی و مدیریت خطاها - بخش اول
۳۶ دقیقه -
اشکال زدایی و مدیریت خطاها - بخش دوم
۵۸ دقیقه
-
-
آشنایی با برخی مفاهیم پیشرفته
-
خاصیت ها و متدهای توابع
۳۲ دقیقه -
توابع بازگشتی و توابع IIFE
۲۲ دقیقه -
تجزیه آرایه ها و اشیاء (Destructuring)
۲۲ دقیقه -
بستارها در جاوا اسکریپت
۱۴ دقیقه -
تکرار کننده ها و مولدها
۲۱ دقیقه -
مجموعه ها و نقشه های ضعیف
۲۹ دقیقه -
آشنایی با قالب داده JSON
۲۵ دقیقه -
کار با JSON در جاوا اسکریپت
۲۱ دقیقه
-
-
آشنایی با Ajax و برنامه نویسی آسنکرون
-
مقدمه ای بر برنامه نویسی آسنکرون
۲۱ دقیقه -
آشنایی با پروتکل HTTP
۴۵ دقیقه -
شروع کار با Ajax
۴۱ دقیقه -
ارسال و دریافت داده ها با Ajax
۴۶ دقیقه -
رویدادهای Ajax
۳۶ دقیقه -
پروژه: آپلود فایل با استفاده از Ajax
۵۱ دقیقه -
جهنم Callback
۱۸ دقیقه -
آشنایی با مفهوم Promise
۴۷ دقیقه -
آشنایی با Fetch API - بخش اول
۳۸ دقیقه -
آشنایی با Fetch API - بخش دوم
۳۷ دقیقه -
آشنایی با توابع آسنکرون
۲۵ دقیقه -
پروژه: جستجوی زنده (Live Search)
۴۸ دقیقه -
پروژه: پیمایش بینهایت (Infinite Scroll)
۴۷ دقیقه -
پروژه: ایجاد و زمانبندی انیمیشن ها
۵۰ دقیقه
-
ارتباط با مدرس (مشاهده رزومه)
| ایمیل | abbassac@gmail.com |
مشخصات دوره
- مدرس عباس مقدم
- زمان آموزش ۳۶:۲۱:۰۳
- حجم دانلود ۲.۹ گیگابایت
- وضعیت دوره تکمیل شده
- تعداد ثبت نام ۳۱۵۲ نفر
- تعداد درس ۶۲ درس
- سطح دوره مبتدی تا پیشرفته
- امتیاز دوره ۴.۹ از ۴۴۴ رای
- قیمت دوره رایگان
درباره مدرس
عباس مقدم
برنامه نویسی رو تقریباً از سال ۸۱ به صورت آماتور شروع کردم (در ابتدا با QBasic) و از سال ۸۲ برای اولین بار کار طراحی سایت رو شروع کردم (البته به صورت آماتور).
تقریباً از سال ۹۰ به صورت جدی کار برنامه نویسی وب و طراحی سایت رو دنبال میکنم.
رزومه کاریم هم تقریبا خالیه. یعنی نه پروژه آنچنانی انجام دادم و نه با شرکتها و سازمانهای بزرگی همکاری داشتم. نه با خارجی‌ها کار کردم، نه خارج رفتم و نه قصد مهاجرت دارم.
ولی به یادگیری و یاد دادن خیلی علاقه‌مندم، و امیدوارم آموزش‌های من در این سایت رضایت کاربران رو جلب کنه.
برچسب ها
سایر دوره‌های آموزشی
جهت درج دیدگاه باید وارد حساب خود شوید
دیدگاه ها
علی بهشتی
وقتی میخوام از طریق AJAX متن txt که در همان پوشه سند مربوط به بقیه فایل ها قرار دارد را لود کنم، کنسول خطای has been blocked by CORS policy میده. مگه سرورها در لوکال هاست متفاوت هست که این ایراد رو می گیره؟
برای رفع این ایراد چه کاری باید انجام داد؟
با تشکر
محمد احمدی
عباس مقدم
ولی در کل همیشه راههای مختلفی برای انجام یه کار هست
خیلی حساس نشید.
اگه کدتون کار میکنه. اوکیه
محمد احمدی
برای جابجایی className بین عناصر یک آرایه مثلا آیتم‌های یک منو حتما اول باید از for استفاده کنیم؟(برای پاک کردن کلاس).
آیا راه دیگه‌ای هست؟ من هرچی گشتم پیدا نکردم
عباس مقدم
راستش اصلا متوجه سوالتون نشدم
البته با این حال احتمالا جوابش منفیه
چون برای هر کاری معمولا راههای مختلفی وجود داره
لطفا سوالتون رو واضح تر بپرسید
Ali karam
اولی این که توی در iterator & generator ها
گفتن زمانی که دستور به yield میرسه تابع متوقف میشه و اطلاعات نشون داده میشه
و دفعه بعدی که دوباره با next صدا میزنیم
این generator میاد و yield بعدی رو اجرا میکنه
و اگر از حلقه بینهایت استفاده کنیم هیچ وقت این done مقدارش true نمیشه در نتیجه هی ادامه داره
و توی حلقه اومدین ی جا برای دنباله فیبوناتچی بعد از کد yield current کد if (i >20){return} رو نوشتین اما این کد بعد از yield قرار داره و باید اجرا نشه :/
و زمانی که به yield رسید بره بیرون و دیگه اجرا نشه ولی اجرا میشه
ایا به خاطر این هست که داخل بلاک حلقه وجود داره و داخل بالک حلقه تمام yield ها اجرا میشن؟ ممنون میشم ی توضیحی بدین
سوال دومم گفتم اگه مقاله ای که private member رو با استفاده از closure ها گفته باشه معرفی کنین ممنون میشم
علی بهشتی
دوتا سوال خدمتتون داشتم :
1- آیا از طریق inspect<network<cookies می توان پسورد حسابی که login شده رو متوجه شد؟ البته فکر کنم پسورد هش شده هست ولی بازم اگه عین عبارتی که در قسمت value ذخیره شده رو داشته باشیم، میشه لاگین شد؟ و اینکه در قسمت request cookies (در همان قسمت cookies) می تونیم name و value جدید ایجاد کنیم یا حتی مقدار قبلی ها را تغییر بدیم؟
2- از چه طریقی می توان کدهای جاوااسکریپت سایت وردپرسی را تغییر داد و بصورت آنلاین تغییرات را مشاهده کرد؟ من سایت وردپرسی دارم و زمانیکه روی دکمه "ورود/عضویت" کلیک می کنم پاپ آپ مربوط به وارد کردن شماره شماره تماس را نشان میده و من میخوام این پاپ آپ که حتما جاوااسکریپتی هست را حذف کنم و لینک مورد نظرم باز بشه.
الان وقتی روی دکمه "ورود/عضویت" ماوس رو نگه میدارم لینک siteName/my-account را در پایین نمایش میدهد ولی وقتی روی این دکمه کلیک می کنم به لینک مورد نظر نمی رود و پاپ آپ مربوطه باز می شود؟
پیشاپیش از راهنمایی و جواب شما متشکرم
عباس مقدم
1- پسورد رو نمیشه از کوکی متوجه شد. چون هیچ وقت پسورد توی کوکی ذخیره نمیشه (نه خام و نه هش شده). ولی اگه کوکی رو داشته باشید میتونید لاگین کنید. یعنی با برداشتن کوکی از روی یک مرورگر، میتونید همون کوکی رو توی مرورگر دیگه (یا ابزارهایی مثل Postman) وارد کنید و لاگین کنید. (البته یه سری حالتهای استثنا هست که این روش توشون جواب نمیده که اینجا نمیتونم توضیح بدم)
2- سوالتون خیلی کلی هست و اینجا نمیشه جواب داد
Ali karam
اقای مقدم
ب نظر شما شی گرایی وقتی میخوای سمت فرانت از جاوا اسکریپت استفاده کنی خیلی استفاده نداره درسته؟
بهتره وقتی شخص خواست node کار کنه بره سمتش بهتره چون استفاده شی گرایی اونجا بهتره
درسته
عباس مقدم
بستگی به نوع و سایز پروژه داره
مثلا تو فرانتند اگه شما با ری اکت کار کنید، شی گرایی تقریبا به هیچ دردی نمیخوره. ولی اگه با انگولار کار کنید خیلی مفیده
توی بکند هم بستگی به سایز پروژه و همینطور فریمورکی که استفاده میکنید داره
مثلا اگه با PHP کار کنید. پروژه ها به دو دسته تقسیم میشن. وردپرسی و غیر وردپرسی
توی پروژه های وردپرسی به ندرت از شئ گرایی استفاده میشه (فقط تو پروژه های خیلی بزرگ). ولی اگه با لاراول یا PHP خام کار کنید. حتی تو پروژه های کوچیک هم شی گرایی به درد میخوره
برای Node هم باز بستگی به فریمورک و سایز پروژه داره
مثلا اگه با Nest کار کنید، خیلی بیشتر با شئ گرایی سر و کار دارید تا زمانی که با Express کار میکنید
اگه بخوام خلاصه بگم
کلا تو دنیای جاوا اسکریپت شئ گرایی خیلی کمتر از سایر زبانها (مثل PHP یا Java یا #C) کاربرد داره.
ولی معنیش این نیست که به درد نمیخوره
معنیش اینه که نیازی نیست همون اول کار برید سراغش. ولی در نهایت باید یاد بگیرید و ازش استفاده کنید (مخصوصا وقتی با تایپ اسکریپت کار میکنید)
ولی تو زبانهایی مثل Java یا #C، باید از همون اول شی گرایی رو یاد بگیرید
ماهک فیاضی
چه جوری باید دوره رو ببینم؟
من هر چی روی فصل ها کلیک میکنم باز نمیشه
عباس مقدم
https://www.aparat.com/v/JIl6x?playlist=5441108
یا
https://www.youtube.com/playlist?list=PLXqEKM4SceJ3MaThrnkVba5SRSbZVEnLl
پارسا مولودی
علی بهشتی
مشاهده ویدیوهای آموزشی فقط در یوتیوب امکان پذیر هست؟
عباس مقدم
تو آپارات هم هست
هر جور که دوست دارید ببینید
ورد پرس
وقت شما بخیر
من می خواستم یک دکمه برای تغییر زبان در منوی هدر سایت بسازم بطوریکه از سایت اصلی که به زبان انگلیسی هست
example.com
به سایتی که زبان فارسی هست
example.com/fa
بطوریکه ساختار آدرس اصلی را حفظ کند مثلا
example.com/contact-us
به
example.com/fa/contact-us
برود.
توی اینترنت گشتم ولی کدها طولانی بود و در آخر به آموزش های شما مراجعه کردم و مجموعا به کد زیر رسیدم
<body>
<button style="cursor: pointer; padding:10px;" onclick="enfa()">fa</button>
<script type="text/javascript">
let enurl = window.location.href;
function enfa() {
let faurl = enurl.replace("example.com", "example.com/fa");
open(faurl, '_self');
}
</script>
</body>
و مشابه همین کد البته با برعکس کردن بعضی عناصر از سایت فارسی به سایت اصلی برگردم
اگر بخوام برای بیش از دو زبان باشه و حالت dropdown یا select بدون دکمه submit بسازم یعنی بلافاصله پس از کلیک روی زبان مربوطه بخوام به سایت با همون زبان برم از کدوم مبحث شما استفاده کنم
ممنون
ورد پرس
<button style="cursor: pointer; padding:10px;" id="enfa-button">fa</button>
<script type="text/javascript">
const button = document.getElementById('enfa-button');
button.addEventListener('click' , enfa);
let enurl = window.location.href;
function enfa(){
let faurl = enurl.replace("example.com", "example.com/fa");
open(faurl, '_self');
}
</script>