جلسه ۱

ابزارهای توسعه‌دهنده جاوااسکریپت: ابرقدرت‌های کدنویسی شما ⚡

مقدمه

سلام رفقای آینده‌دار کدنویسی! 👋 خوش اومدین به کانال! من Reyrove هستم و امروز قراره بریم سراغ ابزارهایی که مسیر توسعهٔ جاوااسکریپت شما رو به یه سفر پرقدرت تبدیل می‌کنن.

قبل از شروع، اون دکمهٔ لایک رو بترکون، سابسکرایب کن و توی کامنت‌ها بنویس ابزار موردعلاقه‌ت برای کدنویسی چیه — بیاین با هم یه جعبه‌ابزار خفن برای دولوپرها بسازیم!

ویرایشگرهای کد

زمین بازی اصلیِ کدنویسی شما، جایی که جادو اتفاق می‌افته:

Visual Studio Code (VS Code) – فوق‌العاده قابل‌سفارشی‌سازی، با افزونه‌های مخصوص جاوااسکریپت، تایپ‌اسکریپت، ESLint، Prettier و غیره.
Sublime Text – سبک و سریع با افزونه‌های زیاد برای توسعهٔ جاوااسکریپت.

💡 نکتهٔ حرفه‌ای: VS Code محبوب جامعه‌ست! با افزونه‌ها و ترمینال داخلی خودش، زندگی رو راحت می‌کنه.

مدیرهای پکیج

ابزارهایی برای مدیریت کتابخانه‌ها و وابستگی‌های پروژه:

npm (Node Package Manager) – مدیر پکیج پیش‌فرض Node.js برای مدیریت وابستگی‌های پروژه‌های جاوااسکریپتی.
Yarn – جایگزینی سریع و قابل‌اعتماد برای npm، مخصوص پروژه‌های بزرگ‌تر.

⚡ نکتهٔ سریع: با npm شروع کن، ولی برای پروژه‌های بزرگ‌تر سراغ Yarn برو!

ابزارهای ساخت (Build Tools)

ابزارهایی برای خودکارسازی وظایف و ساده‌سازی فرآیند ساخت:

Webpack – باندل‌کنندهٔ ماژول که فایل‌های جاوااسکریپت و سایر منابع رو پردازش و ترکیب می‌کنه.
Parcel – باندل‌کننده بدون نیاز به پیکربندی؛ سریع و عالی برای پروژه‌های کوچک تا متوسط.

لینترها و فرمت‌کننده‌ها

برای داشتن کدی تمیز و یکنواخت:

ESLint – ابزار بررسی کد جاوااسکریپت که خطاها رو شناسایی می‌کنه و استانداردهای کدنویسی رو enforce می‌کنه.
Prettier – فرمت‌کنندهٔ معروف و سخت‌گیر برای داشتن استایل کدنویسی ثابت در کل پروژه.

💡 نکتهٔ حرفه‌ای: ESLint + Prettier = کد تمیزِ بی‌نقص 😎

ابزارهای دیباگ

برای پیدا کردن و رفع باگ‌ها در کدتون:

Chrome DevTools – داخل مرورگر گوگل کروم تعبیه شده و ابزاری ضروری برای دیباگ سمت فرانت‌اند هست.
Node.js Debugger – دیباگر خط فرمان برای Node.js که با IDEهایی مثل VS Code ادغام می‌شه.

فریم‌ورک‌های تست

برای اطمینان از اینکه کدت همونطوری که باید، کار می‌کنه:

Jest – فریم‌ورک تست جامع ساخته‌شده توسط فیسبوک.
Mocha – فریم‌ورک تست انعطاف‌پذیر برای Node.js که معمولاً با کتابخانه‌های assertion استفاده می‌شه.

ابزارهای فوق‌العاده دیگر

Babel – کامپایلر جاوااسکریپت که کدهای مدرن رو به نسخه‌های سازگارتر با مرورگرها تبدیل می‌کنه.
TypeScript – نسخهٔ پیشرفته‌ای از جاوااسکریپت با پشتیبانی از تایپ‌ها، برای کاهش خطاها قبل از اجرا.
Git – سیستم کنترل نسخه برای مدیریت کد و همکاری تیمی.

⚡ نکتهٔ داغ: اول Git رو یاد بگیر — توی هر پروژه‌ای نجاتت می‌ده!

جمع‌بندی

و اینم از جعبه‌ابزار توسعه‌دهندهٔ جاوااسکریپت شما! این ابزارها سرعت، قدرت، و بهره‌وری‌تون رو چند برابر می‌کنن.

🎬 جلسه بعدی: راه‌اندازی ایستگاه نبرد توسعه‌ات در جلسه ۲!
💻 ابزارهای پیشنهادی رو در وبسایتم ببین: وبسایت من.
📬 سوال یا پیشنهاد داری؟ در لینکدین باهام در ارتباط باش: لینکدین من.
و یادت نره: لایک کن، سابسکرایب کن، و توی کامنت بگو ابزار موردعلاقه‌ت برای توسعه چیه! 💬

جلسه ۲

ایستگاه نبرد برنامه‌نویسی: مثل یه حرفه‌ای راهش بنداز!

مقدمه

سلام رفقای آینده‌ساز جاوااسکریپت! خوش اومدید دوباره به کانال! اگه تازه اومدید، من Reyrove هستم، و امروز قراره ایستگاه نبرد برنامه‌نویسی‌تون رو بسازیم تا بتونید مثل یه حرفه‌ای کد بزنید — بدون اینکه موهاتون رو بکنید 😅

قبل از اینکه بریم سر اصل مطلب، دکمه‌ی لایک رو بکوب، سابسکرایب کن، و توی کامنت بنویس که آماده‌ای سطح کد زدن‌ت رو ببری بالا — چون قول می‌دم چیزای خفنی در راهه!

چیزایی که نیاز داری

قدم اول: چک‌لیست تجهیزات! برای ساخت یه ایستگاه برنامه‌نویسی، لازم نیست میلیونر باشی — فقط چندتا ابزار کلیدی می‌خوای:

ویرایشگر کد: VS Code (رایگان، سبک، و پر از افزونه‌های کاربردی)
مرورگر: Chrome یا Firefox برای تست زنده‌ی کدها
ترمینال / خط فرمان: ساده و دوست‌داشتنی، هنوز خبری از هک کردن نیست 😏
افزونه‌ها: Prettier (مرتب‌کننده‌ی کد) و Live Server (نمایش لحظه‌ای تغییرات)

💡 نکته حرفه‌ای: محیط کاری‌ت رو تمیز نگه دار. هیچ چیز مثل دسکتاپ پر از فایل‌های بی‌ربط نمی‌تونه تمرکزت رو نابود کنه.

نصب و تنظیم VS Code

قدم دوم: VS Code رو از سایت رسمی دانلود کن.

بعد از نصب:

بازش کن و یه تم انتخاب کن — حالت تاریک؟ روشن؟ هرچی حس بهت میده!
Prettier رو نصب کن: خودش کدتو تمیز و مرتب می‌کنه تا انگار از روی صفحه‌ی مجله دراومده 😎
Live Server رو هم نصب کن: فقط یه کلیک، و تغییرات HTML/JS رو زنده تو مرورگر می‌بینی. جادوی واقعی!

⚡ نکته سریع: با کلید Ctrl + ~ ترمینال رو مستقیم توی VS Code باز کن. خداحافظی با جابه‌جایی بین برنامه‌ها مثل انسان‌های اولیه!

سازمان‌دهی پروژه‌ها

قدم سوم، نظم‌دهی. هیچ چیز بدتر از گم شدن وسط جنگل فولدرها نیست:

یه فولدر به اسم Projects بساز، جای راحت و دم‌دست
برای هر پروژه یه فولدر جدا بساز: مثل ToDoApp، PortfolioSite و غیره
هر پروژه رو با سه فایل شروع کن: index.html، style.css، و script.js — سه‌گانه‌ی مقدس 😇

💡 نکته اضافه: فایل‌هات رو با اسم‌های واضح ذخیره کن. نه از اون newfile1.jsها 😬. خودِ آینده‌ت ازت ممنون میشه.

افزونه‌ها و تجهیزات اختیاری خفن

اگه می‌خوای محیط برنامه‌نویسی‌ت رو به حالت گیمر حرفه‌ای ببری:

دو تا مانیتور برای تقسیم صفحه بین کد و مرورگر
هدفون نویز کنسلینگ برای تمرکز مطلق
یه صندلی راحت... چون هیچ‌کس موقع کدنویسی وای نمی‌ایسته مگه اینکه عضو سیرک باشه 🤹‍♂️

جمع‌بندی

و اینم از شما! ایستگاه برنامه‌نویسی‌ت رو مثل یه رئیس راه انداختی 💪

🎬 قسمت بعدی: اولین کد جاوااسکریپتی‌ت رو می‌نویسیم (جلسه ۳)!
💻 نکته‌ها و آموزش‌های بیشتر در سایت من: وب‌سایت من.
📬 سوال داری یا ایده؟ در لینکدین باهام در ارتباط باش: لینکدین من.
دکمه‌ی لایک رو بکوب، سابسکرایب کن، و توی کامنت بنویس: ایستگاه کدینگ ایده‌آل تو چیه؟ دو مانیتوره یا مینیمال و تمیز؟ 🤔

جلسه ۳

سلام جاوااسکریپت! اولین کدت بدون اشک و استرس 😅

مقدمه

سلام به همه‌ی افسانه‌های آینده‌ی جاوااسکریپت! خوش اومدی دوباره به کانال! اگه تازه اومدی، من Reyrove هستم، و امروز قراره اولین قدم‌مون رو تو دنیای JavaScript برداریم — جایی که کدها باهات حرف می‌زنن (بدون اینکه بخوای لپ‌تاپ‌ت رو پرت کنی بیرون از پنجره 😆).

قبل از اینکه شروع کنیم، دکمه‌ی لایک رو بکوب، سابسکرایب کن، و توی کامنت بنویس اگه آماده‌ای اولین جادوی JS خودت رو ببینی — چون از اینجا تازه خوش‌گذرونی شروع میشه!

جاوااسکریپت کجا زندگی می‌کنه؟

دو تا گزینه‌ی اصلی داری:

داخل فایل HTML خودت با استفاده از تگ <script>.
یا تو یه فایل جدا به اسم JavaScript که به HTML لینک میشه.

فعلاً ساده پیش می‌ریم و همه‌چیز رو تو یه فایل HTML نگه می‌داریم — کمتر بالا و پایین بپری، بیشتر کیف کنی 😎

💡 نکته‌ی حرفه‌ای: همیشه ذخیره کن! خودِ آینده‌ت بهت عشق خواهد ورزید ❤️

نوشتن اولین کدت

index.html رو باز کن. لازم نیست کل HTML رو دستی بنویسی — فقط یه علامت ! بنویس و Enter رو بزن. بوم! ساختار پایه‌ی HTML آماده‌ست 💥

حالا داخل تگ <body> اینو بنویس:

<script>
  console.log('Hello, JS!');
</script>

• console.log یعنی پیام رو بنداز تو کنسول مرورگر.

• حالا کنسول رو باز کن تا جادو رو ببینی:

Chrome: کلیدهای F12 یا Ctrl + Shift + I (در مک Cmd + Opt + I)
Firefox: کلیدهای Ctrl + Shift + K (در مک Cmd + Opt + K)

باید ببینی نوشته شده: Hello, JS! 🎉

تعامل با کاربر

<script>
  alert('Hello, JS! Welcome to your first code.');
</script>

• صفحه رو رفرش کن تا پیام پاپ‌آپ رو ببینی ✨

💡 نکته: از alert() فقط گاهی استفاده کن؛ console.log برای کار روزمره خیلی امن‌تر و خونسرده 😎

آزمایش سریع: متغیرها

<script>
  let name = 'Reyrove';
  console.log(`Hello, ${name}! You are officially coding in JS!`);
</script>

• فایل رو ذخیره کن و کنسول رو چک کن تا یه خوش‌آمد شخصی ببینی 💬

• تبریک! الان داری رشته‌ها (string) و متغیرها (variables) رو با هم ترکیب می‌کنی — جادوی پایه‌ی JS شروع شد! ✨

جمع‌بندی

و تمام! اولین کد جاوااسکریپتی‌ت اجرا شد 🎉 حالا مرورگر داره دقیقاً همون کاری رو می‌کنه که بهش گفتی — چقدر خفن شدی؟ 😎

🎬 قسمت بعدی: متغیرها و ثابت‌ها در جلسه ۴!
💻 تمرین‌ها و مثال‌های بیشتر در وب‌سایت من: وب‌سایت من.
📬 خروجی کنسول خودت رو تو لینکدین به اشتراک بذار: لینکدین من.
لایک رو بکوب، سابسکرایب کن، و بنویس که کنسول چی بهت گفت 😁

جلسه ۴

متغیرها و ثابت‌ها: بهترین دوستای جدیدت توی JS

مقدمه

سلام قهرمانای آینده‌ی جاوااسکریپت! خوش اومدین! اگه تازه اومدی، من Reyrove‌ام و امروز قراره با بهترین دوستای جدیدت توی دنیای JS آشنا شی — متغیرها و ثابت‌ها!

قبل از اینکه شروع کنیم، اون دکمه‌ی لایک رو بترکون، سابسکرایب کن و تو کامنتا بنویس آماده‌ای اولین داده‌هات رو کنترل کنی یا نه؟ 😎 قول می‌دم آسون‌تر از چیزی باشه که فکر می‌کنی!

متغیر چیه؟

متغیرها مثل ظرفای کوچیکی‌ان توی کدت که اطلاعات رو نگه می‌دارن.

توی جاوااسکریپت، سه راه برای تعریف متغیر داریم:

let – روش مدرن، قابل تغییر.
const – بعد از تعریف، دیگه تغییر نمی‌کنه.
var – سبک قدیمی، کار می‌کنه ولی یه‌سری رفتارای خاص داره.

var oldSchool = 'I am a var!';
let modern = 'I can change!';
const forever = 'I stay the same!';
console.log(oldSchool, modern, forever);

💡 نکته: برای پروژه‌های جدید از let و const استفاده کن. var فقط برای خوندن کدهای قدیمی بدرد می‌خوره.

متغیرها در عمل

let score = 0;
score = score + 10; // you can update 'let'
console.log('Your score is now ' + score);

var oldScore = 5;
oldScore = oldScore + 5; // also works, but has quirks
console.log('Old school score: ' + oldScore);

const MAX_SCORE = 100;
console.log('The max score you can get is ' + MAX_SCORE);
// MAX_SCORE = 50; // ⚠️ This would throw an error!

let انعطاف‌پذیره.
var یه‌کم عجیب رفتار می‌کنه (بعداً توضیح می‌دم).
const دوست قفل‌شده‌ی توئه 😎

🎉 این سه‌تا روش پایه‌ان که توی اکثر پروژه‌های اولیه به کارت میان!

دموی سریع

حالا یه متغیر ساده بساز و یه پیام خوش‌آمد باهاش چاپ کن:

let name = 'Reyrove';
console.log('Hello, ' + name + '! Welcome to JS!');

• با let می‌تونی مقدار name رو هر وقت خواستی عوض کنی.

• ولی اگه با const امتحانش کنی، کنسولت سرِت داد می‌زنه 😂

💡 نکته: let مثل کیف روزمره‌ات می‌مونه، const مثل گاوصندوقه، و var مثل یه جعبه‌ قدیمی که هنوز کار می‌کنه ولی باید حواست باشه چی میریزی توش.

جمع‌بندی

و تمام! حالا یاد گرفتی چجوری از متغیرها و ثابت‌ها استفاده کنی، و یه نگاهی هم به روش قدیمی‌تر var انداختی. دوستای جدیدت توی JS آماده‌ان که داده‌هات رو نگه دارن و کدت رو پویا کنن 💪

🎬 جلسه‌ی بعد: آشنایی با انواع داده‌ها (Data Types)!
💻 تمرین متغیرها رو می‌تونی از سایت من انجام بدی: وب‌سایت من.
📬 تجربه‌ات رو توی لینکدین به اشتراک بذار: پست لینکدین.
یادت نره لایک، سابسکرایب و یه کامنت خوشگل با اولین متغیری که ساختی بذاری! 💖

جلسه ۵

انواع داده‌ها: اعداد، رشته‌ها و چیزای عجیب

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با انواع داده‌ها توی جاوااسکریپت آشنا بشیم — همون دسته‌ای که باعث می‌شن کدت رفتار کنه… یا گاهی خرابکاری کنه 😎.

قبل از شروع، دکمه لایک رو بترکون، سابسکرایب کن و تو کامنت‌ها ایموجی مورد علاقتو بذار تا آماده باشیم راز جاوااسکریپت رو کشف کنیم!

آشنایی با انواع داده

انواع داده در واقع شخصیت مقادیرت هستن. به جاوااسکریپت می‌گن با چه نوع اطلاعاتی سروکار داره، تا نترکه 😅.

اصلی‌ترین انواع:

String – متن: 'Hello World!'
Number – عدد: 42, 3.14
Boolean – درست/نادرست: true / false
Undefined – هنوز مقداری نداره
Null – عمداً خالی
Object – چیزای پیچیده، مثل آرایه‌ها یا چیزای با ویژگی
Symbol – شناسه‌های یکتا (سطح پیشرفته)

let name = 'Reyrove'; // String
let age = 28;         // Number
let isCoder = true;   // Boolean
let mystery;          // Undefined
let emptyBox = null;  // Null
console.log(name, age, isCoder, mystery, emptyBox);

💡 نکته: شناخت نوع داده کمک می‌کنه از باگ‌های مخفی جاوااسکریپت جلوگیری کنی!

رشته‌ها و اعداد

رشته‌ها و اعداد عاشق ترکیب شدن:

let greeting = 'Hello';
let year = 2025;
console.log(greeting + ', JS in ' + year + '!'); // Concatenation magic

برای فهمیدن نوع داده، از typeof استفاده کن:

console.log(typeof greeting); // "string"
console.log(typeof year);     // "number"

💡 نکته: جاوااسکریپت انعطاف‌پذیره، ولی گاهی ترکیب اشتباه انواع داده می‌تونه عجیب رفتار کنه.

Boolean، Null و Undefined

Boolean مثل کلید روشن/خاموشه:

let isOnline = true;
let isAdmin = false;
console.log(isOnline, isAdmin);

• undefined = متغیر وجود داره ولی هنوز مقداری نداره.

• null = متغیر عمداً خالیه.

let notSure;        // undefined
let emptyBox = null; // empty on purpose
console.log(notSure, emptyBox);

💡 نکته: از null استفاده کن تا متغیر رو خالی کنی یا مشخص کنی که فعلاً هیچ چیزی توش نیست — مثل گذاشتنش تو یه جعبه دیجیتالی با برچسب 'هیچ‌چیز اینجا نیست'.

جمع‌بندی

و اینم تیم داده‌های جاوااسکریپت تو: رشته‌ها، اعداد، Boolean، Null، Undefined و Object. اگه اینا رو مسلط شدی، کدت مثل یه توله سگ با آموزش خوب رفتار می‌کنه نه یه راکون وحشی 🐾.

🎬 جلسه بعد: جادوی ریاضی JS با عملگرها در جلسه ۶!
💻 برای مثال‌ها، cheat sheet و تمرین‌ها به وب‌سایت من سر بزن: reyrove.github.io.
📬 سوال، ایده یا همکاری؟ تو لینکدین با من تماس بگیر: لینکدین من.
یادت نره لایک، سابسکرایب و کامنت بذاری که کدوم نوع داده برات عجیب‌ترین بود! 🚀

جلسه ۶

جادوی ریاضی JS: عملگرهایی که واقعاً کار می‌کنن

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با عملگرها و عبارات توی جاوااسکریپت آشنا بشیم — همون ابزارای جادویی که باعث می‌شن کدت حساب و کتاب کنه، مقایسه کنه و تصمیم بگیره 😎.

قبل از شروع، لایک کن، سابسکرایب کن و ایموجی مورد علاقتو تو کامنت بذار تا آماده جادوی ریاضی JS بشیم!

عملگرها چیا هستن؟

عملگرها در واقع نمادهایی هستن که به JS می‌گن با مقادیرت چی کار کنه.

چند نوع اصلی داریم:

عملگرهای ریاضی – برای محاسبات: + - * / %
عملگرهای انتساب – برای ذخیره مقادیر: =, +=, -=, *=, /=
عملگرهای مقایسه – برای مقایسه مقادیر: ==, ===, !=, !==, >, <, >=, <=
عملگرهای منطقی – برای تصمیم‌گیری: &&, ||, !

مثال جادوی ریاضی:

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333…
console.log(x % y); // 1 (remainder!)

💡 نکته: % همون "modulus" هست — عالی برای بررسی زوج/فرد بودن عدد!

انتساب و کوتاه‌نویسی

عملگرهای انتساب مقدار رو تو متغیر ذخیره می‌کنن و می‌تونی کوتاهشون هم کنی:

let score = 5;
score += 10; // مثل score = score + 10
score -= 2;  // مثل score = score - 2
console.log(score); // 13

💡 نکته: این کوتاه‌نویسی‌ها باعث می‌شن کدت تمیزتر و کوتاه‌تر باشه.

مقایسه و عملگرهای منطقی

عملگرهای مقایسه به JS کمک می‌کنن درست/نادرست تصمیم بگیره:

console.log(5 > 3);  // true
console.log(5 === '5'); // false (strict equality)
console.log(5 == '5');  // true (loose equality)

عملگرهای منطقی هم شرایط رو با هم ترکیب می‌کنن:

let isAdult = true;
let hasTicket = false;

console.log(isAdult && hasTicket); // false
console.log(isAdult || hasTicket); // true
console.log(!isAdult);             // false

💡 نکته: عملگرهای منطقی عالی‌ان برای if و تصمیم‌گیری توی کدت.

دموی سریع

بیاین یه ترکیب جادوی ریاضی انجام بدیم:

let score = 50;
let bonus = 20;
let premium = true;

// Calculations
let total = score + bonus;
let doubled = total * 2;
let winner = doubled > 100;

// Logical operations
let elite = winner && premium;
let nextLevel = winner || premium;
let basicUser = !premium;

// Results
console.log('Score:', total);
console.log('Doubled:', doubled);
console.log('Winner?', winner);
console.log('Elite?', elite);
console.log('Next Level?', nextLevel);
console.log('Basic?', basicUser);

🎉 ببین! با عملگرها می‌تونی جمع، مقایسه، ترکیب و تصمیم‌گیری رو همزمان انجام بدی.

جمع‌بندی

تبریک! قدرت عملگرهای جاوااسکریپت رو باز کردی — حالا می‌تونی کدت رو مثل یک حرفه‌ای حساب و کتاب و تصمیم‌گیری کنی! 🚀

🎬 جلسه بعد: ماجراهای تغییر نوع داده در جلسه ۷!
💻 فراموش نکن تمرین عملگرها رو تو وب‌سایت من انجام بدی: reyrove.github.io.
📬 سوال، ایده یا همکاری؟ تو لینکدین با من در تماس باش: لینکدین من.
اگه این جلسه کمکت کرد سطحت رو بالا ببری، یه لایک و کامنت بذار — حمایتت باعث می‌شه محتوای کدنویسی بیشتری برات آماده کنم! 😎

جلسه ۷

ماجرای تغییر نوع داده: جاوااسکریپت هم نمی‌دونه چی کار کنه

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با Type Conversion توی جاوااسکریپت آشنا بشیم — همون داستان درام وقتی JS سعی می‌کنه بفهمه مقدار واقعاً چه نوعیه.

قبل از شروع، لایک کن، سابسکرایب کن و تو کامنت‌ها ایموجی مورد علاقتو بذار اگه تا حالا JS باهوش بازی کرده و گیج‌ت کرده 😎.

تغییر نوع داده چیه؟

Type conversion یعنی JS یه مقدار رو از یه نوع به نوع دیگه تبدیل می‌کنه. گاهی خودش این کارو می‌کنه — بهش می‌گن type coercion — و گاهی هم خودت دستی انجام میدی.

مثال type coercion اتوماتیک:

console.log('5' - 2); // 3, JS converts '5' to number
console.log('5' + 2); // '52', JS converts 2 to string

💡 نکته: JS گاهی شیطونه، پس همیشه قبل از محاسبه یا مقایسه نوع داده‌ت رو چک کن.

تغییر نوع دستی

می‌تونی به JS بگی دقیقاً چه نوعی می‌خوای:

let str = '123';
let num = Number(str); // convert string to number
console.log(num + 1);  // 124

let bool = Boolean(0);  // false
let str2 = String(42);  // '42'

• Number(), String(), Boolean() قهرمانای تغییر نوع دستی شما هستن.

💡 نکته: با typeof دوباره چک کن:

console.log(typeof num);  // number
console.log(typeof str2); // string

درام‌های رایج Type Conversion

این قسمت جالب/عجیب می‌شه:

console.log('10' - '4');   // 6 (numbers, coercion happens)
console.log('10' + '4');   // '104' (strings, concatenation)
console.log(true + 1);     // 2 (true becomes 1)
console.log(false + 10);   // 10 (false becomes 0)

💡 نکته: همیشه مراقب + باش — وقتی حتی یه رشته باشه، ترجیح می‌ده رشته بسازه. درام تضمینی!

جمع‌بندی

و اینم Type Conversion تو JS — گاهی مفید، گاهی پر از آشوب، همیشه درام 😎.

🎬 جلسه بعد: String Theory… ولی به سبک JS در جلسه ۸!
💻 متدها و مثال‌های رشته‌ای رو تو وب‌سایت من ببین: وب‌سایت من.
📬 متد رشته‌ای مورد علاقتو تو لینکدین به اشتراک بذار: لینکدین من.
یادت نره لایک کنی، سابسکرایب کنی و کامنت بذاری با ترفند رشته‌ای مورد علاقت!

جلسه ۸

نظریه رشته‌ها… ولی با حال و هوای JS

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با رشته‌ها در JS آشنا بشیم — یعنی همه چیزی که فکر می‌کردی درباره متن می‌دونی، ولی JS یه عالمه برنامه دیگه داره 😎.

قبل از شروع، لایک کن، سابسکرایب کن و تو کامنت‌ها ایموجی مورد علاقتو بذار اگه عاشق بازی با متن تو کدی!

رشته چیه؟

رشته در واقع یه مقدار متنیه. هر چیزی داخل کوتیشن—تکی، دوتایی یا backticks—رشته محسوب می‌شه:

let single = 'Hello';
let double = "World";
let template = `JS is cool!`;

💡 نکته: از backticks برای template literals استفاده کن — خیلی قوی هست برای ترکیب متن و متغیرها.

let name = 'Reyrove';
console.log(`Hello, ${name}!`); // Hello, Reyrove!

متدهای رشته‌ای

رشته‌ها ابزارای داخلی دارن برای بریدن، دستکاری و تغییر:

let phrase = 'JavaScript is awesome';

// طول رشته
console.log(phrase.length); // 21

// حروف بزرگ و کوچک
console.log(phrase.toUpperCase()); // 'JAVASCRIPT IS AWESOME'
console.log(phrase.toLowerCase()); // 'javascript is awesome'

// دسترسی به کاراکترها
console.log(phrase[0]); // 'J'

// بریدن رشته - یک بخش از رشته رو برمی‌گردونه
console.log(phrase.slice(0, 10)); // 'JavaScript'

// جایگزینی متن
console.log(phrase.replace('awesome', 'amazing')); // 'JavaScript is amazing'

💡 نکته: رشته‌ها immutable هستن، پس اکثر متدها یه رشته جدید برمی‌گردونن و رشته اصلی تغییر نمی‌کنه.

ترکیب و Template Literals

رشته‌ها رو حرفه‌ای ترکیب کن:

let firstName = 'Reyrove';
let lastName = 'Coder';

// روش قدیمی
console.log(firstName + ' ' + lastName); // 'Reyrove Coder'

// Template literals
console.log(`${firstName} ${lastName} rocks JS!`); // 'Reyrove Coder rocks JS!'

💡 نکته: Template literals می‌تونن expressions هم بگیرن، نه فقط متغیرها:

console.log(`Next year, I will be ${2025 + 1} years old.`); // 2026

جمع‌بندی

و اینم رشته‌ها در عمق — متن‌ها رو دستکاری، ترکیب و برش بده مثل یه جادوگر JS 🪄.

🎬 جلسه بعد: عددهای جادویی به سبک JS در جلسه ۹!
💻 تمرین و cheat sheet رشته‌ای رو تو وب‌سایت من ببین: reyrove.github.io.
📬 سوال، همکاری یا فقط geek out؟ تو لینکدین با من در تماس باش: لینکدین من.
لایک، سابسکرایب و کامنت یادت نره، و ترفند رشته‌ای مورد علاقتو بهم نشون بده! 🚀

جلسه ۹

عددبازی مثل یه جادوگر JS

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با Numbers و Math در JS آشنا بشیم — یعنی چطور مثل یه جادوگر واقعی با عددها کار کنیم 🧙‍♂️.

قبل از شروع، لایک کن، سابسکرایب کن و ایموجی مورد علاقتو تو کامنت بذار اگه عاشق عددبازی هستی!

مبانی عدد

تو JS، عدد همون عدده. عدد کامل، اعشاری، حتی بزرگ — نیازی به integer vs float نیست.

let age = 25;          // integer
let price = 19.99;     // float
let bigNum = 1e6;      // 1,000,000
console.log(age, price, bigNum);

💡 نکته: با typeof نوع متغیرت رو چک کن:

console.log(typeof age); // 'number'

عملگرهای ریاضی

ریاضی تو JS ساده‌س — همون عملگرایی که قبلاً دیدیم:

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333…
console.log(x % y); // 1 (remainder!)

💡 نکته: % عالیه برای بررسی زوج/فرد بودن اعداد.

Math Object

JS یه Math object داره با همه توابع جادویی که نیاز داری:

// Math.round() - رند به نزدیک‌ترین عدد صحیح
console.log(Math.round(4.6));  // 5
console.log(Math.round(4.4));  // 4

// Math.floor() - رند به پایین
console.log(Math.floor(4.6));  // 4
console.log(Math.floor(4.1));  // 4

// Math.ceil() - رند به بالا
console.log(Math.ceil(4.1));   // 5
console.log(Math.ceil(4.6));   // 5

// Math.sqrt() - جذر
console.log(Math.sqrt(16));    // 4
console.log(Math.sqrt(25));    // 5

// Math.pow() - توان
console.log(Math.pow(2, 3));   // 8
console.log(Math.pow(5, 2));   // 25

// Math.random() - عدد تصادفی بین 0 و 1
console.log(Math.random());    // مثلا 0.723, 0.156, ...

💡 نکته: Math.random() + Math.floor() = عالی برای تاس و اعداد تصادفی.

دموی سریع

بیاین همه چیزو ترکیب کنیم:

let score = Math.floor(Math.random() * 100); // random score 0–99
console.log(`Your magical score is: ${score}`);

if(score % 2 === 0){
    console.log('Even wizard score! ⚡');
} else {
    console.log('Odd wizard score! 🧙‍♂️');
}

🎉 ببین! حالا رسماً مثل یه جادوگر JS عددبازی می‌کنی.

جمع‌بندی

و اینم Numbers و Math در JS — از عملگرهای پایه تا قدرت‌های جادویی Math object.

🎬 جلسه بعد: آرایه‌ها ۱۰۱ در جلسه ۱۰!
💻 تمرین و cheat sheet‌ها رو تو وب‌سایت من ببین: reyrove.github.io.
📬 سوال، همکاری یا ایده؟ تو لینکدین با من در تماس باش: لینکدین من.
یادت نره لایک، سابسکرایب و کامنت بذاری با ترفند عدد مورد علاقت! 🚀

جلسه ۱۰

آرایه‌ها ۱۰۱: داده‌های شما، قوانین شما

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با آرایه‌ها در JS آشنا بشیم — یعنی بهترین راه برای مدیریت لیست‌های داده.

قبل از شروع، لایک کن، سابسکرایب کن و ایموجی مورد علاقتو تو کامنت بذار اگه عاشق نظم دادن به داده‌ها تو کد هستی!

آرایه چیه؟

آرایه‌ها در واقع لیست مقادیر هستن. می‌تونن عدد، رشته، بولین، حتی آرایه یا آبجکت دیگه داشته باشن:

let fruits = ['apple', 'banana', 'cherry'];
let mixed = [1, 'hello', true, [2,3]];
console.log(fruits, mixed);

💡 نکته: آرایه‌ها صفر ایندکس هستن، یعنی اولین آیتم در index 0 قرار داره:

console.log(fruits[0]); // 'apple'
console.log(fruits[2]); // 'cherry'

متدهای آرایه

JS کلی روش برای کار با آرایه‌ها میده:

let numbers = [10, 20, 30, 40];

// اضافه و حذف
numbers.push(50);       // [10,20,30,40,50]
numbers.pop();          // حذف 50

// اضافه در اول آرایه
numbers.unshift(5);     // [5,10,20,30,40]

// حذف اولین آیتم
numbers.shift();        // حذف 5

// طول آرایه
console.log(numbers.length); // 4

// پیدا کردن ایندکس
console.log(numbers.indexOf(30)); // 2

💡 نکته: آرایه‌ها mutable هستن، پس می‌تونی مستقیم تغییرشون بدی!

حلقه زدن روی آرایه‌ها

می‌تونی به این شکل روی آرایه‌ها حلقه بزنی:

for(let i = 0; i < numbers.length; i++){
    console.log(numbers[i]);
}

// با for...of (خفن‌تر)
for(let num of numbers){
    console.log(num);
}

💡 نکته: for...of عالیه وقتی فقط میخوای مقادیر رو داشته باشی، نه ایندکس‌ها.

دموی سریع

بیاین همه چیزو با هم ترکیب کنیم:

let tasks = ['code', 'sleep', 'repeat'];
tasks.push('eat'); 
console.log("Today's tasks:");
for(let task of tasks){
    console.log(`- ${task}`);
}

🎉 ببین! حالا تو اصول آرایه‌ها رو بلدی و می‌تونی داده‌هات رو کنترل کنی مثل یه باس.

جمع‌بندی

و اینم آرایه‌ها ۱۰۱ — ذخیره، دسترسی و مدیریت لیست‌ها مثل یه حرفه‌ای.

🎬 جلسه بعد: Objects Unboxed در جلسه ۱۱!
💻 تمرین و cheat sheet‌ها رو تو وب‌سایت من ببین: reyrove.github.io.
📬 سوال، همکاری یا ایده؟ تو لینکدین با من در تماس باش: لینکدین من.
یادت نره لایک، سابسکرایب و کامنت بذاری با خفن‌ترین ترفند آرایه‌ای که بلدی! 🚀

جلسه ۱۱

آبجکت‌ها آنباکس میشن: اسرار کلید-مقدار

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم با آبجکت‌ها در JS آشنا بشیم — همون سس مخفی پشت تقریباً همه چیز تو JS.

قبل از شروع، لایک کن، سابسکرایب کن و تو کامنت‌ها بهترین آبجکت دنیای واقعی خودتو بذار — من که ماگ قهوه‌م ☕.

آبجکت چیه؟

آبجکت‌ها مثل ظرف‌هایی هستن که داده‌ها رو به شکل key-value نگه می‌دارن. مثل جعبه‌های برچسب‌خورده — به هر property یه اسم می‌دی (کلید) و مقدارشو توش می‌ذاری.

let person = {
    name: 'Reyrove',
    age: 28,
    isCoder: true
};

💡 کلیدها معمولاً رشته هستن، مقادیر می‌تونن هر چیزی باشن — عدد، رشته، آرایه، حتی آبجکت دیگه.

دسترسی به داده‌ها

می‌تونی دو روش مقادیر رو بگیری:

console.log(person.name);   // 'Reyrove' (dot notation)
console.log(person['age']); // 28 (bracket notation)

💡 نکته: bracket notation ضروریه وقتی کلیدت تو یه متغیر باشه یا فاصله داشته باشه.

اضافه، تغییر و حذف

آبجکت‌ها منعطف هستن — می‌تونی ویژگی اضافه، بروزرسانی یا حذف کنی:

// اضافه کردن
person.job = 'Developer';
console.log(person.job); // 'Developer'

// بروزرسانی
person.age = 26;
console.log(person.age); // 26

// حذف
delete person.isCoder;
console.log(person.isCoder); // undefined

// وضعیت نهایی آبجکت
console.log(person); // { name: 'Reyrove', age: 26, job: 'Developer' }

💡 حتی با const می‌تونی آبجکت‌ها رو تغییر بدی — فقط reference همون می‌مونه.

آبجکت‌های تو در تو و دموی سریع

آبجکت‌ها می‌تونن آبجکت دیگه هم داشته باشن — سبک Inception:

let user = {
    username: 'coder123',
    contact: {
        email: 'hello@example.com',
        phone: '123-456'
    }
};

console.log(user.contact.email); // 'hello@example.com'

🎯 ببین! حالا می‌تونی داده‌های ساختاریافته ذخیره کنی مثل یه حرفه‌ای.

جمع‌بندی

و اینم اصول آبجکت‌ها — ذخیره، دسترسی و مدیریت داده‌ها به سبک key-value مثل یه dev واقعی JS.

🎬 جلسه بعد: if/else ساده در جلسه ۱۲!
💻 تمرین و cheat sheet‌ها رو تو وب‌سایت من ببین: reyrove.github.io.
📬 سوال یا همکاری؟ تو لینکدین با من در تماس باش: لینکدین من.
یادت نره لایک، سابسکرایب و کامنت بذاری با روش مورد علاقت تو استفاده از آبجکت‌ها!

جلسه ۱۲

تصمیم‌گیری: if/else

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم یاد بگیریم چطور JS واقعاً فکر کنه — با قدرت if، else و else if.

قبل از شروع تصمیم‌گیری، لایک کن، سابسکرایب کن و سخت‌ترین تصمیمی که امروز گرفتی تو کامنت بذار — من که قهوه یا قهوه! ☕

دستور if

if به کد اجازه میده فقط وقتی یه شرط true هست اجرا بشه:

let age = 20;

if(age >= 18){
    console.log("You're an adult!");
}

💡 شرط داخل () باید true یا false برگردونه.

if...else

وقتی نیاز به انتخاب یا/یا داری:

let isRaining = true;

if(isRaining){
    console.log('Grab an umbrella ☔');
} else {
    console.log('Enjoy the sunshine ☀️');
}

else if

برای چند احتمال مختلف از else if استفاده کن:

let score = 85;

if(score >= 90){
    console.log('Grade: A');
} else if(score >= 75){
    console.log('Grade: B');
} else {
    console.log('Grade: C or lower');
}

💡 JS از بالا به پایین اجرا می‌کنه، پس ترتیب مهمه.

دموی سریع

بیاین یه مثال واقعی بسازیم:

let hour = 14;

if(hour < 12){
    console.log('Good morning!');
} else if(hour < 18){
    console.log('Good afternoon!');
} else {
    console.log('Good evening!');
}

🎯 ببین — برنامه‌ت حالا می‌تونه بسته به وضعیت واکنش متفاوت داشته باشه.

جمع‌بندی

و اینم if، else و else if — قلب تصمیم‌گیری کدت.

🎬 جلسه بعد: وقتی if/else خسته‌کننده میشه در جلسه ۱۳!
💻 برای مثال‌ها و تمرین‌های بیشتر، وب‌سایت من رو ببین: reyrove.github.io.
📬 سوال یا همکاری؟ تو لینکدین با من در تماس باش: لینکدین من.
لایک، سابسکرایب و کامنت یادت نره با مثال واقعی استفاده از if/else! 🚀

جلسه ۱۳

Switch It Up: وقتی if/else خسته‌کننده میشه

مقدمه

سلام قهرمانای کدنویسی! من Reyrove هستم و امروز می‌خوایم کمی switch کنیم — literally 😎.

اگه if/else هات شبیه یه جنگل درهم و برهم شدن، switch statement اینجاست که نجاتت بده.

قبل از سوئیچ کردن، لایک کن، سابسکرایب کن و ایموجی مورد علاقتو بذار — من ⚡ انتخاب کردم چون امروز قراره الکتریکی باشه.

چرا از switch استفاده کنیم؟

Switch وقتی عالیه که میخوای یه مقدار رو با چند حالت مختلف مقایسه کنی — به جای نوشتن چندین else if:

let day = 'Monday';

if(day === 'Monday'){
    console.log('Ugh… coffee first.');
} else if(day === 'Tuesday'){
    console.log('Still coffee.');
} else if(day === 'Friday'){
    console.log('Party time!');
} else {
    console.log('Just another day.');
}

خب، کمی شلوغ به نظر میرسه، نه؟ بیا راه بهترشو ببینیم…

سینتکس پایه switch

let day = 'Friday';

switch(day){
    case 'Monday':
        console.log('Ugh… coffee first.');
        break;
    case 'Tuesday':
        console.log('Still coffee.');
        break;
    case 'Friday':
        console.log('Party time!');
        break;
    default:
        console.log('Just another day.');
}

💡 break جلوی اجرای موارد بعدی رو میگیره. اگه یادت بره، JS “fall through” می‌کنه و بیشتر از چیزی که میخوای اجرا میشه.

گروه‌بندی caseها

می‌تونی چند case رو با هم گروه‌بندی کنی:

let color = 'red';

switch(color){
    case 'red':
    case 'blue':
        console.log('Primary color!');
        break;
    case 'green':
        console.log('Secondary color!');
        break;
    default:
        console.log('Color unknown.');
}

دموی سریع

مثال واقعی — منوی ساده:

let option = 2;

switch(option){
    case 1:
        console.log('Start Game');
        break;
    case 2:
        console.log('Load Game');
        break;
    case 3:
        console.log('Exit');
        break;
    default:
        console.log('Invalid option');
}

جمع‌بندی

و اینم switch — راه مرتب و تمیز برای مدیریت چند شرط بدون غرق شدن تو if/else.

جلسه ۱۴

Loops که تو رو دیوانه نمی‌کنه

مقدمه

سلام بچه‌های کدنویسی! من Reyrove هستم و امروز می‌خوایم با حلقه‌ها آشنا بشیم — یعنی اینکه کد خودش کار تکراری رو انجام بده تا تو لازم نباشه.

چرا حلقه‌ها؟

حلقه‌ها یعنی اتوماسیون. به جای کپی-پیست کردن کد صد بار، به JS میگی: “این کارو تا وقتی من نگفتم متوقف نشو، تکرار کن.” 🚀

حلقه for

کلاسیک‌ترین حلقه. وقتی تعداد دفعات مشخصی داری عالیه:

for(let i = 1; i <= 5; i++){
    console.log('Loop number ' + i);
}

حلقه while

وقتی نمی‌دونی دقیقاً چند بار تکرار میشه، تا وقتی شرط trueه:

let count = 0;

while(count < 3){
    console.log('Counting… ' + count);
    count++;
}

حلقه for…of

برای آرایه‌ها، for…of روشی راحت و مدرن:

let fruits = ['🍎', '🍌', '🍇'];

for(let fruit of fruits){
    console.log(fruit);
}

دموی سریع

مثال: چاپ لیست خرید:

let shoppingList = ['Milk', 'Eggs', 'Bread'];

for(let item of shoppingList){
    console.log('Buy: ' + item);
}

جمع‌بندی

و اینم حلقه‌ها — for، while، و for…of — کلید کمتر تکرار کردن و کد قوی‌تر.

جلسه ۱۵

توابع: جادوهای قابل استفاده در JS

مقدمه

سلام جادوگرای کدنویسی! 🧙‍♂️ من Reyrove هستم و امروز با توابع آشنا میشیم — جادوهای قابل استفاده دوباره در JS.

تابع چیه؟

توابع برنامه‌های کوچیک داخل برنامه هستن. می‌تونی کد رو بسته‌بندی کنی و هر وقت خواستی دوباره استفاده کنی — مثل copy-paste هوشمند.

تعریف تابع

function greet(){
    console.log('Hello, world!');
}

greet(); // اجرا میشه

توابع با پارامتر

function greet(name){
    console.log('Hello, ' + name + '!');
}

greet('Alice');
greet('Bob');

توابع با return

function add(a, b){
    return a + b;
}

let sum = add(5, 10);
console.log(sum); // 15

Arrow Functions

const multiply = (x, y) => x * y;
console.log(multiply(3, 4)); // 12

جمع‌بندی

و اینم توابع — جادوهای قابل استفاده و شخصی‌سازی شده در JavaScript.

جلسه ۱۶

Scope Creeps & Hoisting Surprises: رازهای JS فاش شد

مقدمه

پست… JS اسرار داره. 🤫 امروز درباره scope و hoisting صحبت می‌کنیم—چیزایی که مبتدی‌ها رو بیشتر گیج می‌کنه تا پیتزا با آناناس.

Scope چیه؟

Scope مشخص می‌کنه متغیرها کجا زندگی می‌کنن و چه کسی می‌تونه بهشون دسترسی داشته باشه.

Global → متغیر همه جا قابل دسترس.
Function → فقط داخل تابع قابل دسترس.
Block → با let و const فقط داخل { }.

let globalVar = "I'm everywhere!";

function myFunc(){
    let localVar = 'I exist only here!';
    console.log(globalVar); // works
    console.log(localVar);  // works
}

console.log(globalVar); // works
console.log(localVar);  // ❌ error

قدیمی‌های var

var فقط function-scoped هست، نه block-scoped:

if(true){
    var oldSchool = 'Still here…';
}
console.log(oldSchool); // Works! 😱

Hoisting چیه؟

JS دکلراسیون‌ها رو میاره بالا—ولی فقط دکلراسیون، نه مقداردهی.

console.log(hoistedVar); // undefined
var hoistedVar = 'Hello!';

// JS میخونه مثل:
var hoistedVar;
console.log(hoistedVar); // undefined
hoistedVar = 'Hello!';

Hoisting با توابع

sayHi(); // works!
function sayHi(){ console.log('Hi!'); }

sayBye(); // ❌ error
const sayBye = function(){ console.log('Bye!'); }

جمع‌بندی

و اینم scope و hoisting—حالا می‌دونی چرا بعضی متغیرها مثل بازی قایم‌موشک رفتار می‌کنن. 👻

جلسه ۱۷

DOM Invasion: JS با HTML ملاقات می‌کنه

مقدمه

سلام قهرمانای کدنویسی! امروز با DOM آشنا می‌شیم—پل بین JS و HTML.

DOM چیه؟

DOM مثل یه درخت بزرگه که HTMLت رو نشون میده. JS می‌تونه برگ‌ها رو برداره، تغییر بده، یا حتی ایجاد کنه. 🌳

دسترسی به عناصر

<p id="greeting">Hello!</p>

let greet = document.getElementById('greeting');
console.log(greet);

let greet = document.querySelector('#greeting');

تغییر محتوا و استایل

greet.textContent = 'Hi there!';
greet.style.color = 'blue';
greet.style.fontSize = '24px';

ایجاد و اضافه کردن عنصر

let newPara = document.createElement('p');
newPara.textContent = "I'm new here!";
document.body.appendChild(newPara);

دموی سریع

<button id="addBtn">Add Item</button>
<ul id="list"></ul>

let btn = document.getElementById('addBtn');
let list = document.getElementById('list');
btn.addEventListener('click', () => {
    let li = document.createElement('li');
    li.textContent = 'New item!';
    list.appendChild(li);
});

جمع‌بندی

و اینم اولین نگاهت به DOM—JS بالاخره با HTML ملاقات کرد و کنترلش رو گرفت.

جلسه ۱۸

Event-ually… کنترل همه چیز در DOM

مقدمه

سلام قهرمانای کدنویسی! امروز با Eventها کار می‌کنیم—کلید زنده کردن وبسایتت.

Event چیه؟

یه event یعنی اتفاقی روی صفحه—مثل کلیک، کی‌استروک یا حرکت موس 🪰. JS می‌تونه گوش بده و واکنش بده.

Event Listener کلاسیک

<button id="magicBtn">Click me!</button>

let btn = document.getElementById('magicBtn');
btn.addEventListener('click', () => {
    console.log('Button was clicked!');
    console.log('Magic activated! ✨');
});

انواع event بیشتر

mouseover → ورود موس به عنصر
keydown → فشردن کلید
submit → ارسال فرم
scroll → اسکرول صفحه

اطلاعات event

btn.addEventListener('click', (event) => {
    console.log(event);
    console.log('Clicked at: ', event.clientX, event.clientY);
});

حذف event

function sayHi(){
    console.log('Hi once!');
    btn.removeEventListener('click', sayHi);
}
btn.addEventListener('click', sayHi);

جمع‌بندی

و اینم DOM events—راز وبسایت‌های زنده و واکنش‌گرا.

جلسه ۱۹

Forms: فرم بساز، خراب نکن

مقدمه

سلام کدنویسای افسانه‌ای! امروز فرم‌ها رو می‌سازیم که واقعاً کار کنن، بدون اجازه دادن به کسی که Banana@Banana ثبت‌نام کنه. 🍌

فرم پایه HTML

<form id="signupForm">
    <input type="text" id="username" placeholder="Username" required>
    <input type="email" id="email" placeholder="Email" required>
    <button type="submit">Sign Up</button>
</form>

دستکاری ارسال فرم

let form = document.getElementById('signupForm');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // جلوگیری از رفرش خودکار
    console.log('Form submitted!');
});

Validation ساده

if(username.value.length < 3){
    alert('Username must be at least 3 characters.');
    return;
}

if(!email.value.includes('@')){
    alert('Please enter a valid email.');
    return;
}

Validation زنده

username.addEventListener('input', () => {
    username.style.borderColor = username.value.length < 3 ? 'red' : 'green';
});

پیام‌های سفارشی و باحال

email.addEventListener('input', () => {
    if(!email.value.includes('@')) email.setCustomValidity('Um… emails usually have an @ symbol? 🍵');
    else email.setCustomValidity('');
});

جمع‌بندی

فرم‌ها بدون مشکل و با Validation عالی! 🌟

جلسه ۲۰

To-Do List واقعی

مقدمه

امروز اولین اپلیکیشن واقعی JS خودمون رو می‌سازیم—To-Do List که واقعاً کار کنه. 🎉

Setup HTML

<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>

Grab عناصر

let taskInput = document.getElementById('taskInput');
let addBtn = document.getElementById('addBtn');
let taskList = document.getElementById('taskList');

اضافه کردن کار

addBtn.addEventListener('click', () => {
    let taskText = taskInput.value;
    if(taskText.trim() === '') return;

    let li = document.createElement('li');
    li.textContent = taskText;
    taskList.appendChild(li);
    taskInput.value = '';
});

تیک زدن کار انجام شده

li.addEventListener('click', () => {
    li.style.textDecoration = 'line-through';
});

حذف کار

let deleteBtn = document.createElement('button');
deleteBtn.textContent = '❌';
li.appendChild(deleteBtn);

deleteBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    li.remove();
});

جمع‌بندی کوتاه

اضافه کردن، تیک زدن، حذف کردن کارها. تبریک، اولین اپلیکیشن JS خودتو ساختی! 🎉

جمع‌بندی

حالا آماده‌ایم تا مرحله بعدی: ذخیره کارها بعد از رفرش صفحه با localStorage. 💾

جلسه ۲۱

دیتا به‌صورت فوری: JSON و localStorage مثل یک حرفه‌ای

مقدمه

سلام به همه افسانه‌های کدنویسی! من Reyrove هستم و امروز یاد می‌گیریم که برنامه‌هایمان چیزها را به خاطر بسپارند!

شما کارهایی به اپ To-Do خود اضافه می‌کنید… بعد صفحه را رفرش می‌کنید… و بوم. همه چیز پاک شد. مثل تصمیمات سال نو شما. 🥲

دیگر نه. امروز با استفاده از JSON و localStorage، برنامه شما مثل یک دوست وفادار همه چیز را به خاطر خواهد سپرد. لایک را بزنید، سابسکرایب کنید، و نظر بدهید: اگر مرورگر شما می‌توانست فقط یک چیز را برای همیشه به یاد بسپارد، آن چه بود؟ (برای من: سفارش قهوه ☕).

localStorage چیست؟

localStorage مثل یک هارد کوچک داخل مرورگر شماست. داده‌ها را به صورت key-value ذخیره می‌کند و حتی بعد از رفرش هم می‌ماند. مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Example</title>
</head>
<body>
    <h2>localStorage Demo</h2>
    <p>Open your browser console to see the output.</p>
    <p>Try refreshing the page - the data will persist!</p>

    <script>
        // Store data in localStorage
        localStorage.setItem('username', 'Reyrove');
        
        // Retrieve data from localStorage
        let savedUsername = localStorage.getItem('username');
        
        // Display in console
        console.log(savedUsername); // Reyrove
        
        // Show in alert too
        alert('Saved username: ' + savedUsername);
    </script>
</body>
</html>

آره—خیلی راحت است.

اما صبر کنید… JSON

مشکل: localStorage فقط رشته ذخیره می‌کند.

راه حل: JSON—JavaScript Object Notation. راهی است که اشیاء را به رشته تبدیل کرده و دوباره برگردانیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON & localStorage Example</title>
</head>
<body>
    <h2>Storing Objects with JSON</h2>
    <p>Open your browser console to see the output.</p>
    <p>Try refreshing the page - the object data will persist!</p>

    <script>
        // Store object data in localStorage using JSON
        let user = { name: 'Rey', age: 28 };
        localStorage.setItem('user', JSON.stringify(user));
        
        // Retrieve and parse the data back to object
        let savedUser = JSON.parse(localStorage.getItem('user'));
        
        // Display in console
        console.log(savedUser); // Complete object
        console.log(savedUser.name); // Rey
        console.log(savedUser.age); // 28
        
        // Show in alert too
        alert('Saved user: ' + savedUser.name + ', Age: ' + savedUser.age);
    </script>
</body>
</html>

به JSON مثل یک چمدان فکر کنید که داده‌ها را مرتب بسته‌بندی می‌کند.

ذخیره لیست To-Do

بیایید این را به اپ To-Do خود اضافه کنیم. هر بار که یک تسک اضافه می‌کنیم، کل لیست را ذخیره می‌کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  // store tasks
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  function renderTasks() {
      taskList.innerHTML = ''; // clear existing list
      tasks.forEach((task, index) => {
          let li = document.createElement('li');
          li.textContent = task.text;
          if (task.done) li.style.textDecoration = 'line-through';

          li.addEventListener('click', () => {
              task.done = !task.done;
              saveTasks();
              renderTasks();
          });

          let deleteBtn = document.createElement('button');
          deleteBtn.textContent = '❌';
          li.appendChild(deleteBtn);

          deleteBtn.addEventListener('click', (e) => {
              e.stopPropagation(); // avoid marking done
              tasks.splice(index, 1);
              saveTasks();
              renderTasks();
          });

          taskList.appendChild(li);
      });
  }

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;
      if(taskText.trim() === '') return;

      tasks.push({ text: taskText, done: false });
      saveTasks();
      renderTasks();

      taskInput.value = '';
  });

  // Load saved tasks on startup
  renderTasks();
</script>
</body>
</html>

حالا داریم اهداف زندگیمان را پشتیبان می‌گیریم. ✅ هر بار که تسکی اضافه، کامل یا حذف می‌کنیم، کل لیست در localStorage مرورگر ذخیره می‌شود. یعنی حتی بعد از رفرش یا بازگشت بعدی هم تسک‌ها باقی می‌مانند. مثل یک مینی کلود شخصی—ولی داخل مرورگر شما. ☁️

بارگذاری دوباره داده‌ها

در بارگذاری صفحه، داده‌ها را دوباره می‌گیریم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  let tasks = [];

  function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  // render ONE task
  function renderTask(task, index) {
      let li = document.createElement('li');
      li.textContent = task.text;
      if (task.done) li.style.textDecoration = 'line-through';

      li.addEventListener('click', () => {
          task.done = !task.done;
          saveTasks();
          refreshList();
      });

      let deleteBtn = document.createElement('button');
      deleteBtn.textContent = '❌';
      li.appendChild(deleteBtn);

      deleteBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          tasks.splice(index, 1);
          saveTasks();
          refreshList();
      });

      taskList.appendChild(li);
  }

  // refresh entire list
  function refreshList() {
      taskList.innerHTML = '';
      tasks.forEach((task, index) => renderTask(task, index));
  }

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;
      if(taskText.trim() === '') return;

      let newTask = { text: taskText, done: false };
      tasks.push(newTask);
      saveTasks();
      renderTask(newTask, tasks.length - 1);

      taskInput.value = '';
  });

  // 🔮 Load saved tasks on startup
  let saved = JSON.parse(localStorage.getItem('tasks'));
  if (saved) {
      tasks = saved;
      tasks.forEach((task, index) => renderTask(task, index));
  }
</script>
</body>
</html>

حالا تسک‌ها بعد از رفرش هم باقی می‌مانند. 🪄 مثل جادو.

چرا؟
هر بار که یک تسک اضافه یا حذف می‌کنیم، آرایه tasks کل ذخیره می‌شود (با JSON.stringify()). سپس وقتی صفحه دوباره بارگذاری می‌شود، داده‌ها از localStorage گرفته می‌شوند (با JSON.parse()) و لیست با فراخوانی renderTask() دوباره ساخته می‌شود. پس «جادو» در واقع حافظه مرورگر است که بین رفرش‌ها چیزها را به یاد می‌آورد. 📦

۱. منطق رندرینگ (بزرگترین تفاوت)

این تغییر اصلی معماری است.

ذخیره لیست To-Do (بلوک اول کد)

از یک تابع renderTasks() استفاده می‌کند.
این تابع کل لیست را پاک کرده (taskList.innerHTML = '') و سپس دوباره می‌سازد در هر تغییر (اضافه، حذف، علامت زدن).
مزیت: نوشتن ساده. عیب: برای لیست‌های طولانی کمتر بهینه است چون مرورگر کار بیشتری انجام می‌دهد.

بارگذاری دوباره داده‌ها (بلوک دوم کد)

رندر را به دو تابع تقسیم می‌کند: renderTask(task, index) و refreshList().
renderTask(task, index) فقط HTML یک تسک را می‌سازد و event listener هایش را وصل می‌کند.
refreshList() رندر کامل است که روی تمام تسک‌ها حلقه می‌زند و renderTask را صدا می‌زند.
بهبود کلیدی: در هندلر addBtn فقط تسک جدید اضافه می‌شود renderTask(newTask, tasks.length - 1) و کل لیست دوباره ساخته نمی‌شود.
مزیت: افزودن کمی بهینه‌تر است. عیب: کد کمی پیچیده‌تر.

واقعیت: برای یک اپ To-Do کوچک، تفاوت عملکرد ناچیز است. روش دوم فقط مدولارتر و آینده‌نگرتر است.

به‌روزرسانی با هر تغییر

هر وقت یک تسک اضافه، حذف یا تیک زده می‌شود، فقط saveTasks() را فراخوانی کنید. به این ترتیب، localStorage همیشه جدیدترین داده‌ها را دارد. دیگر هیچ بهانه‌ای برای نادیده گرفتن تسک‌ها باقی نمی‌ماند. 😅

خلاصه کوچک

پس: localStorage = حافظه دائم. JSON = مترجمی که به ما اجازه می‌دهد داده پیچیده را به رشته تبدیل کنیم. با هم؟ آنها غیرقابل توقف هستند.

جمع‌بندی

و این بود، شما رسماً اپ خود را به یک اپ واقعی با داده‌های پایدار ارتقا دادید.

🎬 جلسه بعد: ترفندهای مدرن JS که واقعاً استفاده خواهید کرد در جلسه ۲۲!
💻 کد کامل To-Do List با localStorage در وبسایت من: reyrove.github.io.
📬 برای همکاری یا سوال، من را در LinkedIn پیدا کنید: LinkedIn من.
فراموش نکنید لایک، سابسکرایب و کامنت بگذارید که خنده‌دارترین چیزی که در localStorage ذخیره می‌کنید چه خواهد بود. (برای من: لیست «ادامه دیدن» Netflix تا دیگر قضاوتم نکند 👀).

جلسه ۲۲

ES6+ استایل: ترفندهای مدرن JS که واقعاً استفاده می‌کنید

مقدمه

سلام به همه افسانه‌های کدنویسی! من Reyrove هستم و امروز سطح بازی جاوااسکریپت خودمون رو ارتقا می‌دیم!

آیا هنوز با تلفن‌های چرخشی پیام می‌دادید؟ 📞 نه. همین با JS قدیمی. کار می‌کند، ولی ویژگی‌های ES6+ مثل ارتقا از گوشی قدیمی به آیفون است. شیک‌تر، سریع‌تر، باحال‌تر.

قبل از اینکه ترفندهای مدرن JS رو نشون بدیم، لایک، سابسکرایب، و نظر بدید: یک چیز قدیمی که هنوز بهش چسبیدید چیه؟ (برای من؟ سی‌دی‌های سوخته. قضاوت نکنید 😅)

let و const > var

اول: var رو کنار بذارید. ما let و const رو قبلاً دیدیم، اما ES6 اونا رو استاندارد کرد.

let = متغیر قابل تغییر
const = متغیر ثابت
var = همون ex سمی که دیگه تماس نمی‌گیری 🚩

Arrow Functions

چرا function تایپ کنیم مثل سال ۲۰۰۵؟ از arrow function استفاده کنید:

// Old way
function greet(name) {
  return 'Hello ' + name;
}

// ES6 way - Arrow Function
const greet = (name) => `Hello ${name}`;

// Test both functions
console.log(greet('Rey')); // Hello Rey

تایپ کمتر، استایل بیشتر.

Template Literals

دیگه نیازی به رشته + رشته نیست. الان از backtick استفاده می‌کنیم:

let user = 'Rey';
console.log(`Welcome back, ${user}!`);

تمیزتر، زیباتر و مناسب برای استایل دادن.

Destructuring

قبلاً گرفتن داده‌ها سخت بود. الان می‌تونیم destructure کنیم:

let user = { name: 'Rey', age: 28 };
let { name, age } = user;
console.log(name, age);

بووووم. باز کردن فوری. با آرایه‌ها هم همین‌طور کار می‌کنه.

Spread & Rest Operators

می‌خوای چیزها رو کپی یا ادغام کنی؟ از spread (...) استفاده کن:

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5]; 
console.log(newArr); // [1, 2, 3, 4, 5]

و rest (...) برای جمع کردن باقی‌مانده‌هاست:

function sum(...nums){
  return nums.reduce((a, b) => a + b);
}
console.log(sum(1,2,3,4)); // 10

خیلی کارآمد.

Default Params & Modules

• Default params:

function greet(name = 'stranger'){
  console.log(`Hey ${name}`);
}
greet(); // Hey stranger

• Modules: کد خودتون رو به فایل‌ها تقسیم کنید و import/export کنید. (دیگه اسکریپت‌های بزرگ و بهم ریخته نیست 🍝).

خلاصه کوچک

خلاصه: let و const، arrow functions، template literals، destructuring، spread/rest، default params، و modules. این‌ها فقط ترفند نیستند—استاندارد مدرن هستند.

جمع‌بندی

و این هم ES6+ در عمل. باور کن—این‌ها رو یاد بگیر و دیگه به JS قدیمی نگاه نکن.

🎬 جلسه بعد: پیدا کردن باگ مخفی در جلسه ۲۳!
💻 Cheat sheet + مثال‌ها روی وبسایت من: reyrove.github.io.
📬 برای همکاری یا سوال، در LinkedIn با من تماس بگیر: LinkedIn من.
فراموش نکن لایک، سابسکرایب و کامنت بذاری که به نظرت کدوم ویژگی ES6 بهترینه. (برای من؟ Template literals 💅).

جلسه ۲۳

دیباگ بدون اشک: باگ مخفی رو پیدا کن

مقدمه

سلام به همه افسانه‌های کدنویسی! من Reyrove هستم و امروز دنبال باگ‌ها می‌گردیم!

کد می‌نویسی، همه چیز درست به نظر میاد، اجرا می‌کنیش… بوم—خطا 😭

به دنیای دیباگ خوش آمدید، یعنی شکار باگ قبل از اینکه باگ شما رو شکار کنه. بمون، لایک، سابسکرایب، و نظر بده: عجیب‌ترین باگی که تا حالا دیدی چی بود؟ (برای من یه بار خودش درست شد… که ترسناک‌تر از خود باگه 🫠).

خواندن پیام خطا

اولین قانون: وحشت نکن.

پیام‌های خطا ترسناک به نظر می‌رسند اما دقیقاً می‌گویند چه مشکلی هست.

مثال:

console.log(myVar);
➡️ 'ReferenceError: myVar is not defined'

ترجمه: شما سعی کردید چیزی که وجود ندارد را استفاده کنید. ساده است.

Console.log دوست صمیمی شماست

قدیمی اما کارآمد:

let x = 10;
console.log('x is:', x);

console.log را مثل نان ریزانه بریز تا بفهمی کجا کد خراب می‌شود.

نکته حرفه‌ای: می‌تونی چند چیز رو همزمان log کنی:

console.log({ x, y, user });

این بهت یک آبجکت تمیز برای بررسی می‌دهد.

ابزارهای توسعه

F12 بزن (یا راست‌کلیک → Inspect) برای باز کردن DevTools.

به تب Console برای خطاها برو، و تب Sources برای توقف و قدم زدن در کد.

یک breakpoint بگذار (روی شماره خط کلیک کن)، رفرش کن و کدت متوقف می‌شود تا خط به خط ببینی چی می‌گذره. حسش مثل کدنویسی ماتریکس با اسلومو 🕶️.

باگ‌های رایج

اشتباه تایپی: userNmae به جای userName 🤦
کروشه یا پرانتز گم شده:
```
if (x > 5 { console.log(x); } // nope
```
اسکوپ اشتباه: متغیرهای داخل تابع بیرون وجود ندارند.
آشفتگی آسنکرون: سعی کردی از داده قبل از آماده شدن استفاده کنی.

ترفندهای حرفه‌ای دیباگ

از console.table() برای نمایش آرایه‌ها/آبجکت‌ها به شکل مرتب استفاده کن.
debugger; در کد، DevTools را متوقف می‌کند.
پیام خطا را گوگل کن—۹۰٪ احتمال داره کسی StackOverflow قبلاً گریه کرده باشه 😅

خلاصه کوچک

دیباگ = خواندن خطا ➝ console.log ➝ DevTools ➝ رفع ➝ رقص پیروزی 🎉

جمع‌بندی

و این هم دیباگ بدون اشک—تو کدتو خراب نمی‌کنی، کدت داره تو رو آموزش می‌ده. 💪

🎬 جلسه بعد: تبریک! داشبورد همه‌کاره JS خودتو بساز در جلسه ۲۴!
💻 لیست خطاهای رایج JS + رفعشون روی وبسایت من: reyrove.github.io.
📬 برای همکاری یا کمک دیباگ، DM بده در LinkedIn: LinkedIn من.
فراموش نکن لایک، سابسکرایب و کامنت بذاری که خنده‌دارترین باگی که داشتی چی بود. (برای من: یه بار = نوشتم به جای === و یک ساعت داد زدم به صفحه 🤡).

جلسه 24

آفرین! داشبورد خفن JS خودتو بساز و وب رو به تسخیر دربیار.

شروع کار

آفرین! از 23 جلسه جهنم JS سربلند بیرون اومدی 🪄. از همون 'Hello JS' اولت تا ES6 خفن، باگ‌های کابوسی، جادوی DOM، فرم‌ها، localStorage - حالا همه قدرت‌های عالی رو داری تا اپ‌های واقعی بسازی.

قبل از اینکه بریم جلو، حتما لایک و سابسکرایب کن و توی کامنتا بگو کدوم جلسه برات جذاب‌تر بود. بیا سفر JSت رو جشن بگیریم!

یادآوری فشرده

یه مرور سریع از چیزایی که یاد گرفتی:

متغیرها و ثابت‌ها

let username = 'Reyrove'; // You can change it anytime
const maxTasks = 10;      // Constant, cannot be changed

انواع داده

const task = { title: 'Learn JS', done: false }; // Object
let score = 100; // Number
let active = true; // Boolean
let name = "Code Master"; // String

آرایه‌ها

let tasks = [task]; // Store multiple tasks in an array
tasks.push({ title: 'Practice Loops', done: false });

توابع و قابلیت‌های ES6

const toggleDone = index => tasks[index].done = !tasks[index].done; // Arrow function + toggle status

DOM و ایونت‌ها

document.getElementById('taskForm').addEventListener('submit', e => e.preventDefault()); // Prevent form reload

localStorage و JSON

localStorage.setItem('tasks', JSON.stringify(tasks)); // Save array of objects in localStorage

همه اینا قراره داشبورد خفنمون رو قدرتمند کنن.

پروژه نهایی - کد کامل با توضیح

ساختار HTML:

<form id="taskForm">
  <input type="text" id="title" placeholder="Task Title" required />
  <textarea id="desc" placeholder="Task Description" required></textarea>
  <select id="priority">
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
  </select>
  <button type="submit">Add Task</button>
</form>
<div id="taskList"></div>

چی به چیه:

<form> فیلدهای ورودی برای تسک‌ها
<input> برای عنوان تسک
<textarea> برای توضیحات
<select> برای انتخاب اولویت
<button> برای اضافه کردن
<div id="taskList"> جاییش که تسک‌ها نشون داده میشن

کد JS:

// Grab DOM elements
const taskForm = document.getElementById('taskForm'); // The form element
const taskList = document.getElementById('taskList'); // Container to display tasks

// Load tasks from localStorage or start with an empty array
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

چطوری کار میکنه:

getElementById المان‌ها رو میگیره که بتونیم روشون کار کنیم
JSON.parse(localStorage.getItem('tasks')) تسک‌های ذخیره شده رو میاره
|| [] مطمئن میشه اگه چیزی ذخیره نشده، آرایه خالی داشته باشیم

تابع نمایش تسک‌ها:

const renderTasks = () => {
  taskList.innerHTML = ''; // Clear old tasks

  tasks.forEach((task, index) => {
    const { title, desc, priority, done } = task; // Object destructuring

    const taskDiv = document.createElement('div'); // Create task container
    taskDiv.className = `task ${done ? 'done' : ''}`; // Add class 'done' if completed

    taskDiv.innerHTML = `
      <h3>${title}</h3>
      <p>${desc}</p>
      <p><strong>Priority:</strong> ${priority}</p>
      <p><strong>Status:</strong> ${done ? 'Done ✅' : 'Pending ⏳'}</p>
      <button onclick="toggleDone(${index})">Toggle Done</button>
      <button onclick="deleteTask(${index})">Delete</button>
    `;

    taskList.appendChild(taskDiv); // Add task to DOM
  });
};

کارایی که میکنه:

هر بار که رندر میکنه، لیست قبلی رو پاک میکنه
روی آرایه تسک‌ها حلقه میزنه
برای هر تسک یه <div> درست میکنه
تسک رو تجزیه میکنه که راحت‌تر بشه باهاش کار کرد
دکمه‌ها با index صدا میزنن که تسک درست رو تغییر بدن

توابع اضافه کردن، تغییر وضعیت، حذف و ذخیره:

const addTask = task => { tasks = [...tasks, task]; saveTasks(); renderTasks(); };
const toggleDone = index => { tasks[index].done = !tasks[index].done; saveTasks(); renderTasks(); };
const deleteTask = index => { tasks.splice(index, 1); saveTasks(); renderTasks(); };
const saveTasks = () => localStorage.setItem('tasks', JSON.stringify(tasks));

هر کدوم چیکار میکنن:

addTask با spread operator تسک جدید اضافه میکنه
toggleDone وضعیت done رو برعکس میکنه
deleteTask تسک رو از آرایه حذف میکنه
saveTasks آرایه رو توی localStorage ذخیره میکنه

ارسال فرم:

taskForm.addEventListener('submit', e => {
  e.preventDefault(); // Stop page reload

  const title = document.getElementById('title').value.trim();
  const desc = document.getElementById('desc').value.trim();
  const priority = document.getElementById('priority').value;

  if(!title || !desc){ alert('Please fill in all fields!'); return; }

  addTask({ title, desc, priority, done: false });
  taskForm.reset(); // Clear form
});

مراحل کار:

جلوی ریلود صفحه رو میگیره
مقادیر ورودی رو میخونه
چک میکنه که فیلدها پر باشن
addTask رو صدا میزنه
فرم رو خالی میکنه

نمایش اولیه:

renderTasks(); // Show saved tasks on page load

کارکرد:

همون اول تسک‌های ذخیره شده رو نشون میده

قدم‌های بعدی

حالا که این داشبورد خفن رو ساختی، میتونی:

اپ‌های بیشتری بسازی: ماشین حساب، بازی، سایت‌های تعاملی
فریمورک‌ها رو یاد بگیری: React, Vue, Node.js
توی پروژه‌های اوپن سورس مشارکت کنی
باگ‌گیری کنی، آزمایش کنی و قابلیت‌های جدید اضافه کنی

مهارت‌های JS تو مثل چوب جادو عمل میکنن 🪄. برو و اینترنت رو فتح کن!

جمع‌بندی نهایی

و اینم از سفر کامل جاوااسکریپت - از صفر تا ساختن یه داشبورد کامل!

🎉 آفرین که تموم 24 جلسه رو تموم کردی!
💻 برای کدهای بیشتر و آموزش‌ها، سایت من رو چک کن: reyrove.github.io
📬 سوالی داری یا میخوای همکاری کنی؟ تو لینکدین بهم پیام بده: لینکدین من
یادت نره لایک و سابسکرایب کنی و توی کامنتا بنویسی با این قدرت‌های جدید JS چی میخوای بسازی!

کیبوردت چوب جادوته، JS جادوته... حالا برو طلسم بنداز و آنلاین بدرخش 💥!

Jump to Session

جلسه ۱

ابزارهای توسعه‌دهنده جاوااسکریپت: ابرقدرت‌های کدنویسی شما ⚡

مقدمه

ویرایشگرهای کد

مدیرهای پکیج

ابزارهای ساخت (Build Tools)

لینترها و فرمت‌کننده‌ها

ابزارهای دیباگ

فریم‌ورک‌های تست

ابزارهای فوق‌العاده دیگر

جمع‌بندی

جلسه ۲

ایستگاه نبرد برنامه‌نویسی: مثل یه حرفه‌ای راهش بنداز!

مقدمه

چیزایی که نیاز داری

نصب و تنظیم VS Code

سازمان‌دهی پروژه‌ها

افزونه‌ها و تجهیزات اختیاری خفن

جمع‌بندی

جلسه ۳

سلام جاوااسکریپت! اولین کدت بدون اشک و استرس 😅

مقدمه

جاوااسکریپت کجا زندگی می‌کنه؟

نوشتن اولین کدت

تعامل با کاربر

آزمایش سریع: متغیرها

جمع‌بندی

جلسه ۴

متغیرها و ثابت‌ها: بهترین دوستای جدیدت توی JS

مقدمه

متغیر چیه؟

متغیرها در عمل

دموی سریع

جمع‌بندی

جلسه ۵

انواع داده‌ها: اعداد، رشته‌ها و چیزای عجیب

مقدمه

آشنایی با انواع داده

رشته‌ها و اعداد

Boolean، Null و Undefined

جمع‌بندی

جلسه ۶

جادوی ریاضی JS: عملگرهایی که واقعاً کار می‌کنن

مقدمه

عملگرها چیا هستن؟

انتساب و کوتاه‌نویسی

مقایسه و عملگرهای منطقی

دموی سریع

جمع‌بندی

جلسه ۷

ماجرای تغییر نوع داده: جاوااسکریپت هم نمی‌دونه چی کار کنه

مقدمه

تغییر نوع داده چیه؟

تغییر نوع دستی

درام‌های رایج Type Conversion

جمع‌بندی

جلسه ۸

نظریه رشته‌ها… ولی با حال و هوای JS

مقدمه

رشته چیه؟

متدهای رشته‌ای

ترکیب و Template Literals

جمع‌بندی

جلسه ۹

عددبازی مثل یه جادوگر JS

مقدمه

مبانی عدد

عملگرهای ریاضی

Math Object

دموی سریع

جمع‌بندی

جلسه ۱۰

آرایه‌ها ۱۰۱: داده‌های شما، قوانین شما

مقدمه

آرایه چیه؟

متدهای آرایه

حلقه زدن روی آرایه‌ها

دموی سریع

جمع‌بندی