[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"lesson:t7-s02-variables":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,2,"t7-s02-variables","book",7,"فصل ۰۲ — متغیر و مقدار",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},1,"t7-s01-why-js","فصل ۰۱ — چرا JavaScript؟ اولین اسکریپت",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},3,"t7-s03-select-change","فصل ۰۳ — پیدا کردن و تغییرِ عنصر",[20,24,27,32,35,38,41,44,47,50,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>متغیر یک جعبهٔ اسم‌دار است که یک مقدار را نگه می‌دارد — این فصل با \u003Ccode>let\u003C\u002Fcode> و \u003Ccode>const\u003C\u002Fcode> متغیر می‌سازی، سه جنسِ اصلیِ مقدار (string، number، boolean) را از هم تشخیص می‌دهی، و با template literal متغیرها را وسطِ جمله می‌گذاری. آخر فصل کارتِ یک بازیکن را داری — اسم، امتیاز، وضعیت — که وقتی امتیازش عوض می‌شود، همهٔ گزارش‌هایش در console خودشان به‌روز می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.160.webp 160w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.320.webp 320w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.640.webp 640w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.1280.jpg\" srcset=\"\u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.160.jpg 160w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.320.jpg 320w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.640.jpg 640w, \u002F_img\u002F01-image-let-const-boxes.f1d4dc1ac0.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو جعبهٔ نگهدارندهٔ مقدار کنار هم: یک جعبهٔ باز با درِ برداشته که مقدار داخلش قابل تعویض است، و یک جعبهٔ قفل‌شده با قفلِ بسته که مقدارش ثابت مانده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>let\u003C\u002Fcode> متغیر بسازی و مقدارش را بعداً عوض کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>const\u003C\u002Fcode> مقداری را ثابت اعلام کنی و بگویی کِی \u003Ccode>let\u003C\u002Fcode> و کِی \u003Ccode>const\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>فرق string و number و boolean را با یک آزمایش در console نشان بدهی\u003C\u002Fli>\n\u003Cli>با template literal یک جمله بسازی که متغیرها تویش نشسته‌اند\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> وصل‌کردن \u003Ccode>script.js\u003C\u002Fcode> با \u003Ccode><script src>\u003C\u002Fcode> و بازکردن console با F12 — کل این فصل در console زندگی می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> \u003Ccode>console.log\u003C\u002Fcode> و فرقِ «متنِ داخل گیومه» با «چیزی که حساب می‌شود».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— در تب JS شروعِ کارتِ بازیکن را می‌بینی. F12 را بزن و tab با نام Console را باز نگه دار؛ هر تغییری که می‌دهی همان‌جا گزارش می‌شود","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-7-javascript\u002Fsession-02-variables",{"kind":21,"heading":33,"html":34},"۱. جعبه‌ای با اسم: let","\u003Ch2 id=\"۱-جعبه‌ای-با-اسم-let\">۱. جعبه‌ای با اسم: \u003Ccode>let\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AC%D8%B9%D8%A8%D9%87%E2%80%8C%D8%A7%DB%8C-%D8%A8%D8%A7-%D8%A7%D8%B3%D9%85-let\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فکر کن داری امتیازِ یک بازی را گزارش می‌کنی. امتیاز اولِ بازی صفر است، وسطش می‌شود ۱۲۰. اگر عدد را در ده جای کد دستی نوشته باشی، با هر تغییر باید ده جا را پیدا کنی. راهِ درست: عدد را \u003Cstrong>یک بار\u003C\u002Fstrong> در یک جعبهٔ اسم‌دار بگذار و همه‌جا اسمِ جعبه را صدا بزن. به این جعبه \u003Cstrong>متغیر\u003C\u002Fstrong> می‌گویند.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>let score = 0;\nconsole.log(score);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>خط اول را تکه‌تکه بخوان: \u003Ccode>let\u003C\u002Fcode> یعنی «یک جعبهٔ جدید بساز»، \u003Ccode>score\u003C\u002Fcode> اسمِ جعبه است، و \u003Ccode>=\u003C\u002Fcode> یعنی «این مقدار را بگذار تویش». در خط دوم \u003Ccode>score\u003C\u002Fcode> گیومه ندارد — پس متن نیست؛ JavaScript اسم را باز می‌کند و \u003Cstrong>مقدارِ داخلِ جعبه\u003C\u002Fstrong> را چاپ می‌کند: \u003Ccode>0\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>اسمِ جعبه را خودت انتخاب می‌کنی، با سه قاعده: انگلیسی باشد (مثل اسمِ class ها)، فاصله نداشته باشد، و اگر چندکلمه‌ای شد، از کلمهٔ دوم به بعد را با حرفِ بزرگ بچسبان: \u003Ccode>playerName\u003C\u002Fcode>. به این سبک \u003Cstrong>camelCase\u003C\u002Fstrong> می‌گویند و در JavaScript همه‌جا همین است.\u003C\u002Fp>\n\u003Cp>حالا مقدارش را عوض کن — دقت کن دفعهٔ دوم دیگر \u003Ccode>let\u003C\u002Fcode> نمی‌نویسی، چون جعبه از قبل هست:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>score = 120;\nconsole.log(score);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در console اول \u003Ccode>0\u003C\u002Fcode> را می‌بینی، بعد \u003Ccode>120\u003C\u002Fcode>. یک جعبه، دو لحظه، دو مقدار.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. const: قولی که پس نمی‌گیری","\u003Ch2 id=\"۲-const-قولی-که-پس-نمی‌گیری\">۲. \u003Ccode>const\u003C\u002Fcode>: قولی که پس نمی‌گیری\u003Ca class=\"head-anchor\" href=\"#%DB%B2-const-%D9%82%D9%88%D9%84%DB%8C-%DA%A9%D9%87-%D9%BE%D8%B3-%D9%86%D9%85%DB%8C%E2%80%8C%DA%AF%DB%8C%D8%B1%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بعضی مقدارها قرار نیست عوض شوند — اسمِ بازیکن وسطِ بازی عوض نمی‌شود. برای این‌ها \u003Ccode>const\u003C\u002Fcode> داری: مثل \u003Ccode>let\u003C\u002Fcode> جعبه می‌سازد، ولی درش را قفل می‌کند.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const playerName = "سارا";\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا عمداً قفل را امتحان کن. این خط را اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>playerName = "نیما";\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>console سرخ می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>Uncaught TypeError: Assignment to constant variable.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> پیام دقیقاً همین را می‌گوید: «داری روی متغیرِ ثابت مقدار می‌گذاری.» دو راه داری: اگر این مقدار واقعاً باید عوض شود، از اول با \u003Ccode>let\u003C\u002Fcode> بسازش؛ اگر نه، خطِ عوض‌کردن را بردار — همان کاری که این‌جا می‌کنیم. قانونِ حرفه‌ای‌ها ساده است: \u003Cstrong>پیش‌فرض \u003Ccode>const\u003C\u002Fcode>؛ فقط وقتی از اول می‌دانی مقدار عوض می‌شود \u003Ccode>let\u003C\u002Fcode>.\u003C\u002Fstrong> این‌طوری مرورگر خودش نگهبانِ قول‌هایت است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر \u003Ccode>score\u003C\u002Fcode> را با \u003Ccode>const\u003C\u002Fcode> ساخته بودیم، خطِ \u003Ccode>score = 120;\u003C\u002Fcode> چه می‌کرد؟ (جواب: همان \u003Ccode>TypeError\u003C\u002Fcode> را می‌داد. امتیاز ذاتش عوض‌شدن است، پس جایش \u003Ccode>let\u003C\u002Fcode> است.)\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. سه جنسِ مقدار: string، number، boolean","\u003Ch2 id=\"۳-سه-جنسِ-مقدار-string-number-boolean\">۳. سه جنسِ مقدار: string، number، boolean\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%B3%D9%87-%D8%AC%D9%86%D8%B3%D9%90-%D9%85%D9%82%D8%AF%D8%A7%D8%B1-string-number-boolean\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر مقداری که تا حالا در جعبه‌ها گذاشتیم یک \u003Cstrong>جنس\u003C\u002Fstrong> دارد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>string:\u003C\u002Fstrong> متن، همیشه داخل گیومه — \u003Ccode>"سارا"\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>number:\u003C\u002Fstrong> عدد، بدون گیومه — \u003Ccode>120\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>boolean:\u003C\u002Fstrong> فقط دو مقدارِ \u003Ccode>true\u003C\u002Fcode> یا \u003Ccode>false\u003C\u002Fcode> — مثل «بازی تمام شده؟»: \u003Ccode>const gameOver = false;\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>گیومه مرزِ بین دو دنیاست: \u003Ccode>"120"\u003C\u002Fcode> یک \u003Cstrong>متن\u003C\u002Fstrong> است که فقط شکلش شبیه عدد است. ببین این فرق کجا خودش را نشان می‌دهد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>console.log(120 + 5);\nconsole.log("120" + 5);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> خط اول \u003Ccode>125\u003C\u002Fcode> چاپ می‌کند؛ خط دوم \u003Ccode>1205\u003C\u002Fcode>!\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> وقتی یک طرفِ \u003Ccode>+\u003C\u002Fcode> متن باشد، JavaScript به‌جای جمع‌زدن \u003Cstrong>می‌چسباند\u003C\u002Fstrong>. اگر روزی جمعِ عددی‌ات «چسبید»، اولین مظنون گیومه‌های اضافه است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. template literal: متغیر وسطِ جمله","\u003Ch2 id=\"۴-template-literal-متغیر-وسطِ-جمله\">۴. template literal: متغیر وسطِ جمله\u003Ca class=\"head-anchor\" href=\"#%DB%B4-template-literal-%D9%85%D8%AA%D8%BA%DB%8C%D8%B1-%D9%88%D8%B3%D8%B7%D9%90-%D8%AC%D9%85%D9%84%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گزارشِ خشکِ \u003Ccode>120\u003C\u002Fcode> به دردِ کاربر نمی‌خورد؛ می‌خواهی بنویسی «امتیاز سارا: 120». برای جمله‌سازی، JavaScript یک گیومهٔ سوم دارد: \u003Cstrong>backtick\u003C\u002Fstrong> — علامت \u003Ccode>`\u003C\u002Fcode> روی دکمهٔ کنارِ عددِ 1 در چیدمان انگلیسیِ کیبورد. به متنی که با backtick ساخته می‌شود \u003Cstrong>template literal\u003C\u002Fstrong> می‌گویند، و جادویش این است: هرجا \u003Ccode>${}\u003C\u002Fcode> بگذاری، یک پنجره به دنیای متغیرها باز می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>console.log(`امتیاز ${playerName}: ${score}`);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> console می‌نویسد: \u003Ccode>امتیاز سارا: 120\u003C\u002Fcode>. مقدارها از جعبه‌ها آمدند و در جمله نشستند — و اگر فردا \u003Ccode>score\u003C\u002Fcode> عوض شود، همین خط خودش گزارشِ تازه را می‌سازد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> داخلِ \u003Ccode>${}\u003C\u002Fcode> هر مقداری جا می‌شود، حتی یک حسابِ کوچک: \u003Ccode>${score + 10}\u003C\u002Fcode>. ولی جمله را ساده نگه دار — حسابِ بلند را اول در یک متغیرِ اسم‌دار بگذار، بعد همان اسم را در جمله صدا بزن؛ هم خواناتر است، هم غلط‌گیری‌اش راحت‌تر.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>هنوز مطمئن نیستی گیومه و backtick و جنسِ مقدارها کِی به‌کارت می‌آیند؟ یک آزمایشِ کوچک با نظرِ دوم:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس: «در JavaScript فرقِ \u003Ccode>"120"\u003C\u002Fcode> و \u003Ccode>120\u003C\u002Fcode> چیست؟» بعد جوابش را خودت آزمایش کن: \u003Ccode>console.log("120" + 5)\u003C\u002Fcode> و \u003Ccode>console.log(120 + 5)\u003C\u002Fcode> را در آزمایشگاه بنویس و F12 را بزن. فقط چیزی را قبول کن که خروجیِ console تأییدش می‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>کارت بازیکن<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <main>\n      <h1>کارت بازیکن<\u002Fh1>\n      <p>گزارشِ این کارت در console است — F12 را بزن.<\u002Fp>\n    <\u002Fmain>\n\n    <script src="script.js"><\u002Fscript>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>script.js\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F\u002F script.js — kart-e bazikon\nconst playerName = "سارا";\nlet score = 0;\nconst gameOver = false;\n\nconsole.log(`بازیکن: ${playerName}`);\nconsole.log(`امتیاز: ${score}`);\n\nscore = 120;\nconsole.log(`امتیاز تازه: ${score}`);\nconsole.log(`بازی تمام شده؟ ${gameOver}`);\n\u003C\u002Fcode>\u003C\u002Fpre>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>variable\u003C\u002Ftd>\n\u003Ctd>وریِبل\u003C\u002Ftd>\n\u003Ctd>متغیر؛ جعبه‌ای اسم‌دار که یک مقدار نگه می‌دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>let\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>لِت\u003C\u002Ftd>\n\u003Ctd>متغیری می‌سازد که مقدارش بعداً عوض می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>const\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کانست\u003C\u002Ftd>\n\u003Ctd>متغیری می‌سازد که مقدارش قفل است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>string\u003C\u002Ftd>\n\u003Ctd>استرینگ\u003C\u002Ftd>\n\u003Ctd>مقدارِ متنی، داخل گیومه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>number\u003C\u002Ftd>\n\u003Ctd>نامبِر\u003C\u002Ftd>\n\u003Ctd>مقدارِ عددی، بدون گیومه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>boolean\u003C\u002Ftd>\n\u003Ctd>بولیَن\u003C\u002Ftd>\n\u003Ctd>مقدارِ درست\u002Fغلط: فقط \u003Ccode>true\u003C\u002Fcode> یا \u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>template literal\u003C\u002Ftd>\n\u003Ctd>تمپلِیت لیتِرال\u003C\u002Ftd>\n\u003Ctd>متنِ داخل backtick که با \u003Ccode>${}\u003C\u002Fcode> متغیر می‌پذیرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>camelCase\u003C\u002Ftd>\n\u003Ctd>کمِل‌کِیس\u003C\u002Ftd>\n\u003Ctd>سبکِ اسم‌گذاری: کلمه‌های بعدی با حرفِ بزرگ می‌چسبند، مثل \u003Ccode>playerName\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>",{"kind":51,"heading":52,"html":53},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> کارتِ خودت را بساز: یک \u003Ccode>const\u003C\u002Fcode> برای اسمت، یک \u003Ccode>let\u003C\u002Fcode> به اسم \u003Ccode>age\u003C\u002Fcode> برای سنت، و یک boolean مثل \u003Ccode>likesFootball\u003C\u002Fcode>. با دو template literal معرفی‌ات را در console چاپ کن. بعد با \u003Ccode>age = age + 1\u003C\u002Fcode> یک سال بزرگ‌ترش کن (یعنی: مقدارِ فعلی را بردار، یکی اضافه کن، دوباره در همان جعبه بگذار) و دوباره چاپ کن — جمله باید خودش عددِ تازه را بگوید.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> اول روی کاغذ پیش‌بینی کن، بعد اجرا کن: \u003Ccode>console.log(7 + 7)\u003C\u002Fcode>، \u003Ccode>console.log("7" + 7)\u003C\u002Fcode>، \u003Ccode>console.log("7" + "7")\u003C\u002Fcode>. هر سه را توضیح بده. بعد بگو چرا \u003Ccode>playerName\u003C\u002Fcode> را \u003Ccode>const\u003C\u002Fcode> کردیم ولی \u003Ccode>score\u003C\u002Fcode> را \u003Ccode>let\u003C\u002Fcode> — و از زندگیِ خودت یک مقدارِ ذاتاً \u003Ccode>const\u003C\u002Fcode> و یک مقدارِ ذاتاً \u003Ccode>let\u003C\u002Fcode> مثال بزن.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>متغیرهایت هنوز پشتِ صحنه‌اند — کاربر console را نمی‌بیند. فصل بعد دستت به خودِ صفحه می‌رسد: با \u003Ccode>document.querySelector\u003C\u002Fcode> عنصر را با همان selector هایی که از ترم ۲ بلدی پیدا می‌کنی و متن و ظاهرش را از JavaScript عوض می‌کنی — همان «راهِ درستی» که فصل ۱ قولش را داد.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":282,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,71,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,71,74,77,81,85,89,92,96,100,104,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,262,263,264,267,270,273,276,279],{"free_preview":5,"order":12,"slug":69,"source":8,"term":12,"title_fa":70},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":72,"source":8,"term":12,"title_fa":73},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":16,"slug":75,"source":8,"term":12,"title_fa":76},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":78,"slug":79,"source":8,"term":12,"title_fa":80},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":82,"slug":83,"source":8,"term":12,"title_fa":84},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":86,"slug":87,"source":8,"term":12,"title_fa":88},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":9,"slug":90,"source":8,"term":12,"title_fa":91},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":12,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":12,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":12,"title_fa":103},10,"t1-s10-media","فصل ۱۰ — ویدیو و صدا",{"free_preview":5,"order":105,"slug":106,"source":8,"term":12,"title_fa":107},11,"t1-s11-first-project","فصل ۱۱ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":12,"slug":109,"source":8,"term":6,"title_fa":110},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":6,"slug":112,"source":8,"term":6,"title_fa":113},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":16,"slug":115,"source":8,"term":6,"title_fa":116},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":78,"slug":118,"source":8,"term":6,"title_fa":119},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":82,"slug":121,"source":8,"term":6,"title_fa":122},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":86,"slug":124,"source":8,"term":6,"title_fa":125},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":9,"slug":127,"source":8,"term":6,"title_fa":128},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":130,"source":8,"term":6,"title_fa":131},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":133,"source":8,"term":6,"title_fa":134},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":136,"source":8,"term":6,"title_fa":137},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":105,"slug":139,"source":8,"term":6,"title_fa":140},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":12,"slug":142,"source":8,"term":16,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":6,"slug":145,"source":8,"term":16,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":16,"slug":148,"source":8,"term":16,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":78,"slug":151,"source":8,"term":16,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":82,"slug":154,"source":8,"term":16,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":86,"slug":157,"source":8,"term":16,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":9,"slug":160,"source":8,"term":16,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":163,"source":8,"term":16,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":166,"source":8,"term":16,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":169,"source":8,"term":16,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":105,"slug":172,"source":8,"term":16,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":175,"source":8,"term":78,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":6,"slug":178,"source":8,"term":78,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":16,"slug":181,"source":8,"term":78,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":78,"slug":184,"source":8,"term":78,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":82,"slug":187,"source":8,"term":78,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":86,"slug":190,"source":8,"term":78,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":9,"slug":193,"source":8,"term":78,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":196,"source":8,"term":78,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":199,"source":8,"term":82,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":6,"slug":202,"source":8,"term":82,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":16,"slug":205,"source":8,"term":82,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":78,"slug":208,"source":8,"term":82,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":82,"slug":211,"source":8,"term":82,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":86,"slug":214,"source":8,"term":82,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":9,"slug":217,"source":8,"term":82,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":220,"source":8,"term":82,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":223,"source":8,"term":82,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":226,"source":8,"term":82,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":12,"slug":229,"source":8,"term":86,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":6,"slug":232,"source":8,"term":86,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":16,"slug":235,"source":8,"term":86,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":78,"slug":238,"source":8,"term":86,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":82,"slug":241,"source":8,"term":86,"title_fa":242},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":86,"slug":244,"source":8,"term":86,"title_fa":245},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":9,"slug":247,"source":8,"term":86,"title_fa":248},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":250,"source":8,"term":86,"title_fa":251},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":253,"source":8,"term":86,"title_fa":254},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":256,"source":8,"term":86,"title_fa":257},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":105,"slug":259,"source":8,"term":86,"title_fa":260},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":78,"slug":265,"source":8,"term":9,"title_fa":266},"t7-s04-events","فصل ۰۴ — رویداد",{"free_preview":5,"order":82,"slug":268,"source":8,"term":9,"title_fa":269},"t7-s05-toggle-class","فصل ۰۵ — روشن\u002Fخاموش‌کردنِ یک class: پلِ CSS و JS",{"free_preview":5,"order":86,"slug":271,"source":8,"term":9,"title_fa":272},"t7-s06-forms-js","فصل ۰۶ — کار با فرم در JavaScript",{"free_preview":5,"order":9,"slug":274,"source":8,"term":9,"title_fa":275},"t7-s07-lists-loops","فصل ۰۷ — فهرست و حلقه",{"free_preview":5,"order":93,"slug":277,"source":8,"term":9,"title_fa":278},"t7-s08-fetch-data","فصل ۰۸ — گرفتن داده از اینترنت",{"free_preview":5,"order":97,"slug":280,"source":8,"term":9,"title_fa":281},"t7-s09-js-capstone","فصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کن",[],1784860314209]