آموزش کامل و فان جاوااسکریپت! 🚀
میخوایم کاری کنیم که کدها از مانیتورت بزنن بیرون! آمادهای؟
جاوااسکریپت چیه اصلاً؟ 🤔
مغز و عضلههای وبسایت شما!
فکر کن HTML اسکلت سایته و CSS لباسشه. جاوااسکریپت میشه مغز و عضلههای اون سایت! هر کاری که باعث میشه یه سایت زنده و پویا به نظر بیاد، کار همین رفیقمون جاوااسکریپته. از لایک کردن یه پست تو اینستاگرام گرفته تا بازیهای خفنی که تو مرورگر انجام میدی. خلاصه که اگه میخوای وبسایتت از یه نقاشی ثابت به یه فیلم اکشن تبدیل بشه، به جاوااسکریپت نیاز داری!
نقشه راه یادگیری (۱۶ درس)
اولین قدمها
با هم اولین کد جاوااسکریپت رو مینویسیم و به دنیا سلام میکنیم.
متغیرها
یاد میگیریم اطلاعات رو تو جعبههای جادویی به اسم متغیر ذخیره کنیم.
شرط و حلقهها
به کامپیوتر یاد میدیم چطوری تصمیم بگیره و یه کاری رو صد بار تکرار کنه.
توابع و آرایهها
کدهامون رو دستهبندی میکنیم و یاد میگیریم چطوری یه لیست بسازیم.
کار با HTML (DOM)
وقتشه که جاوااسکریپت رو به جون HTML بندازیم و سایت رو زنده کنیم.
اشیاء و کلاسها
یاد میگیریم چطوری مثل دنیای واقعی، برای همه چیز یه «شیء» بسازیم.
جاوااسکریپت غیرهمزمان
یاد میگیریم چطوری کارهای زمانبر رو مدیریت کنیم بدون اینکه سایت هنگ کنه!
پروژه ۱: لیست کارها
وقتشه آستینها رو بالا بزنیم و یه پروژه واقعی و باحال بسازیم.
متدهای پیشرفته آرایه
با Map, Filter و Reduce مثل یه نینجا با آرایهها کار میکنیم.
کار با تاریخ و زمان
یاد میگیریم چطوری با زمان کار کنیم و تایمرهای خفن بسازیم.
ذخیرهسازی در مرورگر
اطلاعات کاربر رو روی سیستم خودش ذخیره میکنیم تا یادش نره!
مقدمهای بر API و Fetch
یاد میگیریم چطوری از سرورهای دیگه اطلاعات بگیریم و اپهای پویا بسازیم.
مدیریت خطا
کدهامون رو ضدضربه میکنیم تا با هر اشتباهی از کار نیفتن.
ماژولها در JS
یاد میگیریم کدهامون رو به فایلهای کوچیکتر تقسیم کنیم تا مدیریتشون راحتتر بشه.
مفاهیم جدید ES6+
با جدیدترین و خفنترین امکانات جاوااسکریپت آشنا میشیم.
پروژه ۲: اپ هواشناسی
یه اپلیکیشن هواشناسی واقعی با استفاده از API میسازیم!
یه نمونه از قدرت جاوااسکریپت!
ببین چقدر راحت میشه یه صفحه تعاملی ساخت. روی دکمه کلیک کن!
const magicButton = document.getElementById('magicButton');
const magicBox = document.getElementById('magicBox');
const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6'];
let colorIndex = 0;
magicButton.addEventListener('click', () => {
magicBox.textContent = 'ایول! رنگ عوض شد!';
magicBox.style.backgroundColor = colors[colorIndex];
magicBox.style.transform = 'scale(1.1)';
colorIndex = (colorIndex + 1) % colors.length;
setTimeout(() => {
magicBox.style.transform = 'scale(1)';
}, 200);
});