[{"data":1,"prerenderedAt":286},["ShallowReactive",2],{"lesson:t7-s05-toggle-class":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,5,"t7-s05-toggle-class","book",7,"فصل ۰۵ — روشن\u002Fخاموش‌کردنِ یک class: پلِ CSS و JS",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},4,"t7-s04-events","فصل ۰۴ — رویداد",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},6,"t7-s06-forms-js","فصل ۰۶ — کار با فرم در JavaScript",[20,24,27,32,35,38,41,44,47,50,53,57],{"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>این فصل کوچک‌ترین و مهم‌ترین قراردادِ front-end را یاد می‌گیری: \u003Cstrong>JavaScript فقط اسمِ حالت را عوض می‌کند؛ ظاهر، تمامش کارِ CSS است.\u003C\u002Fstrong> با یک خط \u003Ccode>classList.toggle\u003C\u002Fcode> یک کلیدِ چراغ می‌سازی که کلِ صفحه را به حالتِ شب می‌برد و برمی‌گرداند — و همهٔ زیبایی‌اش را استایل‌هایی انجام می‌دهند که ساختن‌شان را در ترم‌های قبل یاد گرفتی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-toggle-bridge.4e4adebce3.160.webp 160w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.320.webp 320w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.640.webp 640w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-toggle-bridge.4e4adebce3.1280.jpg\" srcset=\"\u002F_img\u002F01-image-toggle-bridge.4e4adebce3.160.jpg 160w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.320.jpg 320w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.640.jpg 640w, \u002F_img\u002F01-image-toggle-bridge.4e4adebce3.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>classList.toggle\u003C\u002Fcode> یک class را با هر کلیک بیاوری و ببری\u003C\u002Fli>\n\u003Cli>یک حالتِ کاملِ بصری (حالتِ شب) را فقط در CSS تعریف کنی و فقط با JS روشنش کنی\u003C\u002Fli>\n\u003Cli>توضیح بدهی چرا نوشتنِ رنگ و استایل داخل JavaScript تقریباً همیشه اشتباه است\u003C\u002Fli>\n\u003Cli>خرابیِ بی‌صدای «اسمِ class ناهماهنگ بینِ JS و CSS» را پیدا و رفع کنی\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>addEventListener\u003C\u002Fcode> و رویدادِ \u003Ccode>click\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> \u003Ccode>classList\u003C\u002Fcode> و کارِ \u003Ccode>add\u003C\u002Fcode> و \u003Ccode>remove\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۵:\u003C\u002Fstrong> \u003Ccode>transition\u003C\u002Fcode> — بدونِ حتی یک خطِ جدید، دوباره به کار می‌افتد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک اتاقِ مطالعه با یک دکمهٔ «چراغ» می‌بینی. استایلِ حالتِ شب در تبِ CSS آماده است؛ فقط JS مانده که کلید را به آن وصل کند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-7-javascript\u002Fsession-05-toggle-class",{"kind":21,"heading":33,"html":34},"۱. کلیدی که برمی‌گردد","\u003Ch2 id=\"۱-کلیدی-که-برمی‌گردد\">۱. کلیدی که برمی‌گردد\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DA%A9%D9%84%DB%8C%D8%AF%DB%8C-%DA%A9%D9%87-%D8%A8%D8%B1%D9%85%DB%8C%E2%80%8C%DA%AF%D8%B1%D8%AF%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>از فصل ۳ می‌توانی با \u003Ccode>classList.add\u003C\u002Fcode> یک class بگذاری و با \u003Ccode>classList.remove\u003C\u002Fcode> برش داری. برای یک تغییرِ یک‌بارمصرف کافی است، ولی برای یک \u003Cstrong>کلید\u003C\u002Fstrong> نه: کلیدِ چراغ باید بداند الان روشن است یا خاموش تا برعکسش کند. با \u003Ccode>add\u003C\u002Fcode> تنها، کلیکِ دوم هیچ کاری نمی‌کند — class از قبل هست.\u003C\u002Fp>\n\u003Cp>چیزی که می‌خواهیم یک حرکتِ رفت‌وبرگشتی است: «اگر این class را ندارد بگذار؛ اگر دارد بردار.» JavaScript همین را در یک کلمه دارد: \u003Ccode>toggle\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. حالتِ شب: CSS آماده، JS یک خط","\u003Ch2 id=\"۲-حالتِ-شب-css-آماده-js-یک-خط\">۲. حالتِ شب: CSS آماده، JS یک خط\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%AD%D8%A7%D9%84%D8%AA%D9%90-%D8%B4%D8%A8-css-%D8%A2%D9%85%D8%A7%D8%AF%D9%87-js-%DB%8C%DA%A9-%D8%AE%D8%B7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول ظاهرِ هر دو حالت باید کامل در CSS تعریف شود — در آزمایشگاه همین قاعده‌ها آماده در تبِ CSS نشسته‌اند، خط‌به‌خط بخوان‌شان — حالتِ عادی روی \u003Ccode>body\u003C\u002Fcode>، حالتِ شب پشتِ class ای به اسمِ \u003Ccode>night\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: #f6edda;\n  color: #2c2114;\n  transition: background-color 0.4s, color 0.4s;\n}\n\nbody.night {\n  background-color: #221d15;\n  color: #f0e6cf;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>body.night\u003C\u002Fcode> را از ترم ۲ می‌شناسی: «همان \u003Ccode>body\u003C\u002Fcode>، وقتی class ای به اسمِ \u003Ccode>night\u003C\u002Fcode> دارد.» تا وقتی کسی این class را نگذارد، این قاعده خواب است. حالا کلید:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const lightSwitch = document.querySelector('.light-switch');\nconst body = document.querySelector('body');\n\nlightSwitch.addEventListener('click', function () {\n  body.classList.toggle('night');\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کلیک کن — کلِ صفحه نرم به شب می‌رود؛ دوباره کلیک کن — برمی‌گردد. آن نرمی هم کارِ \u003Ccode>transition\u003C\u002Fcode> ترم ۵ است که حالا با هر toggle جان می‌گیرد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر به‌جای \u003Ccode>toggle\u003C\u002Fcode> بنویسی \u003Ccode>add\u003C\u002Fcode> و سه بار کلیک کنی چه می‌شود؟ (جواب: کلیکِ اول شب می‌شود و دیگر هیچ‌وقت برنمی‌گردد — \u003Ccode>add\u003C\u002Fcode> یک‌طرفه است، \u003Ccode>toggle\u003C\u002Fcode> رفت‌وبرگشتی.)\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. حالا خرابش کن: دو اسم که به هم نمی‌خورند","\u003Ch2 id=\"۳-حالا-خرابش-کن-دو-اسم-که-به-هم-نمی‌خورند\">۳. حالا خرابش کن: دو اسم که به هم نمی‌خورند\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AD%D8%A7%D9%84%D8%A7-%D8%AE%D8%B1%D8%A7%D8%A8%D8%B4-%DA%A9%D9%86-%D8%AF%D9%88-%D8%A7%D8%B3%D9%85-%DA%A9%D9%87-%D8%A8%D9%87-%D9%87%D9%85-%D9%86%D9%85%DB%8C%E2%80%8C%D8%AE%D9%88%D8%B1%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در JS به‌جای \u003Ccode>'night'\u003C\u002Fcode> بنویس \u003Ccode>'nigth'\u003C\u002Fcode> — جابه‌جاییِ حرفی که در تایپِ سریع دستِ همه درمی‌آید:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>lightSwitch.addEventListener('click', function () {\n  body.classList.toggle('nigth');\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>کلیک کن. هیچ اتفاقی نمی‌افتد و console هم کاملاً ساکت است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> جالب اینجاست که کدت دارد کار می‌کند! اگر با DevTools ترم ۲ به تبِ Elements نگاه کنی، می‌بینی \u003Ccode>class="nigth"\u003C\u002Fcode> واقعاً با هر کلیک می‌آید و می‌رود. خرابی جای دیگری است: در CSS هیچ قاعده‌ای برای \u003Ccode>.nigth\u003C\u002Fcode> نیست؛ قاعده‌ها برای \u003Ccode>.night\u003C\u002Fcode> نوشته شده‌اند. دو دنیا فقط با یک string به هم وصل‌اند و هیچ‌کس غلط‌گیریِ املایی نمی‌کند — نه مرورگر، نه JS. هر وقت toggle «کار نکرد»، اسمِ class را در JS و CSS کنارِ هم بگذار و حرف‌به‌حرف مقایسه کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. پل: تقسیمِ کار بینِ دو دنیا","\u003Ch2 id=\"۴-پل-تقسیمِ-کار-بینِ-دو-دنیا\">۴. پل: تقسیمِ کار بینِ دو دنیا\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%BE%D9%84-%D8%AA%D9%82%D8%B3%DB%8C%D9%85%D9%90-%DA%A9%D8%A7%D8%B1-%D8%A8%DB%8C%D9%86%D9%90-%D8%AF%D9%88-%D8%AF%D9%86%DB%8C%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>به کدت نگاه کن. JavaScript فقط \u003Cstrong>یک کلمه\u003C\u002Fstrong> را جابه‌جا می‌کند: \u003Ccode>night\u003C\u002Fcode> هست یا نیست — همین یعنی state، حالتِ فعلیِ صفحه. رنگِ پس‌زمینه، رنگِ متن، نرمیِ تغییر — همه در CSS اند، همان‌جا که شش ترم تمرینش کردی. این سلیقه نیست؛ قراردادِ کاریِ front-end است:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>CSS صاحبِ ظاهر است:\u003C\u002Fstrong> هر حالت (شب، باز، انتخاب‌شده) یک class با استایلِ کامل.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>JS صاحبِ تصمیم است:\u003C\u002Fstrong> فقط تصمیم می‌گیرد کدام حالت الان فعال باشد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> هر وقت وسطِ JS داشتی رنگ و اندازه و فونت می‌نوشتی، بایست. جای آن کد تقریباً همیشه داخلِ یک class در CSS است و سهمِ JS فقط یک \u003Ccode>toggle\u003C\u002Fcode>.\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    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main>\n      <article class="card">\n        <h1>اتاق مطالعه<\u002Fh1>\n        <p>این صفحه یک کلیدِ چراغ دارد. روشن و خاموشش کن و ببین چه چیزهایی با هم عوض می‌شوند.<\u002Fp>\n        <button class="light-switch">چراغ<\u002Fbutton>\n      <\u002Farticle>\n    <\u002Fmain>\n    <script src="script.js"><\u002Fscript>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\nbody {\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.7;\n  padding: 24px;\n  transition: background-color 0.4s, color 0.4s;\n}\n\n.card {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 360px;\n  transition: background-color 0.4s, border-color 0.4s;\n}\n\n.light-switch {\n  font-family: inherit;\n  font-size: 1rem;\n  padding: 8px 16px;\n  border: 1px solid #b98a2f;\n  border-radius: 8px;\n  background-color: #f3d491;\n  cursor: pointer;\n}\n\nbody.night {\n  background-color: #221d15;\n  color: #f0e6cf;\n}\n\nbody.night .card {\n  background-color: #2e2820;\n  border-color: #4b4133;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F\u002F script.js\nconst lightSwitch = document.querySelector('.light-switch');\nconst body = document.querySelector('body');\n\nlightSwitch.addEventListener('click', function () {\n  body.classList.toggle('night');\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n",{"kind":21,"heading":48,"html":49},"۵. همیار AI: پل را با AI هم نگه دار","\u003Ch2 id=\"۵-همیار-ai-پل-را-با-ai-هم-نگه-دار\">۵. همیار AI: پل را با AI هم نگه دار\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D9%87%D9%85%DB%8C%D8%A7%D8%B1-ai-%D9%BE%D9%84-%D8%B1%D8%A7-%D8%A8%D8%A7-ai-%D9%87%D9%85-%D9%86%DA%AF%D9%87-%D8%AF%D8%A7%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>سه قانونِ ثابتِ کار با AI را از ترم ۱ می‌شناسی؛ اینجا دوباره لازم‌شان داری:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> \u003Cstrong>«اول خودت، بعد AI»\u003C\u002Fstrong> — اول با معیارهای خودت تصمیم بگیر، بعد نظرِ AI را به‌عنوان نظرِ دوم بشنو. \u003Cstrong>«خط به خط»\u003C\u002Fstrong> — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> — و پایین‌تر یک نمونهٔ واقعی‌اش را می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ خوب.\u003C\u002Fstrong> حالا که کلیدِ چراغ را خودت ساخته‌ای، از دستیار AI ات بپرس: «غیر از حالتِ شب، چه حالت‌هایی را سایت‌های واقعی با toggle یک class روشن و خاموش می‌کنند؟ برای هرکدام فقط اسمِ class و دو خط CSS پیشنهاد بده.» دو تا از جواب‌ها را در آزمایشگاه با همان الگوی این فصل بساز و با چیزی که می‌بینی چک کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفس اشتباه می‌گوید. اگر بپرسی «یک دکمه می‌خواهم که صفحه‌ام را حالتِ شب کند»، بارها چیزی شبیه این تحویلت می‌دهد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button onclick="document.querySelector('body').style.backgroundColor = '#000000'; document.querySelector('body').style.color = '#ffffff'">حالت شب<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>خط‌به‌خط بخوانش؛ سه چیز غلط است. \u003Cstrong>اول:\u003C\u002Fstrong> آن \u003Ccode>onclick\u003C\u002Fcode> یک attribute قدیمی است که JS را داخلِ HTML می‌چپاند — همان مخلوط‌کردنِ محتوا و رفتار که ترم ۲ یادت داد از هم جدایشان کنی. رفتار جایش در فایلِ JS و \u003Ccode>addEventListener\u003C\u002Fcode> است. \u003Cstrong>دوم:\u003C\u002Fstrong> رنگ‌ها را دانه‌دانه از JS می‌نویسد؛ یعنی کارِ CSS را در JS دوباره‌سازی می‌کند و حالتِ شب دیگر یک‌جا زندگی نمی‌کند: اگر ده قاعدهٔ CSS داشته باشد، می‌شود ده خطِ JS که باید جدا نگه‌داری‌شان کنی و جدا خراب می‌شوند. \u003Cstrong>سوم:\u003C\u002Fstrong> راهِ برگشت ندارد — کلیکِ دوم همان سیاه می‌ماند؛ کلید نیست، یک درِ یک‌طرفه است. درستش همان است که خودت ساختی: یک class در CSS و یک \u003Ccode>classList.toggle\u003C\u002Fcode> در JS. از همین خانواده: اگر از AI افکتِ hover بخواهی، گاهی برایت listener می‌نویسد، در حالی که \u003Ccode>:hover\u003C\u002Fcode> ترم ۵ همان را با یک خط CSS می‌دهد. معیارِ گرفتنِ این اشتباه‌ها همان قانونِ پل است: هر جا AI داشت داخلِ JS ظاهر می‌نوشت، بایست و بپرس «این چرا class نیست؟».\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\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>\u003Ccode>classList.toggle\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کلاس‌لیست تاگِل\u003C\u002Ftd>\n\u003Ctd>اگر class نبود بگذار، اگر بود بردار — یک کلیدِ رفت‌وبرگشتی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>state\u003C\u002Ftd>\n\u003Ctd>استِیت\u003C\u002Ftd>\n\u003Ctd>حالتِ فعلیِ صفحه (شب\u002Fروز، باز\u002Fبسته) که JS تعیینش می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>onclick\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>آن‌کلیک\u003C\u002Ftd>\n\u003Ctd>attribute قدیمیِ چسباندنِ JS به تگ؛ بشناسش، ولی استفاده نکن\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>",{"kind":54,"heading":55,"html":56},"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> حالتِ شب هنوز دکمه را فراموش کرده. فقط در تبِ CSS یک قاعدهٔ \u003Ccode>body.night .light-switch\u003C\u002Fcode> بنویس که پس‌زمینه و رنگِ حاشیهٔ دکمه را تیره کند. وقتی کار کرد، به JS نگاه کن: هنوز همان یک خط است — پل همین است.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک \u003Ccode><section class="panel">\u003C\u002Fcode> با یک پاراگراف «دربارهٔ این اتاق» زیرِ کارت اضافه کن. در CSS به آن \u003Ccode>max-height: 0\u003C\u002Fcode>، \u003Ccode>overflow: hidden\u003C\u002Fcode> و یک \u003Ccode>transition\u003C\u002Fcode> بده و در قاعدهٔ \u003Ccode>.panel.open\u003C\u002Fcode> یک \u003Ccode>max-height\u003C\u002Fcode> بزرگ. حالا یک دکمهٔ دوم بگذار که با \u003Ccode>classList.toggle('open')\u003C\u002Fcode> پنل را نرم باز و بسته کند — دو کلیدِ مستقل در یک صفحه.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\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>حالا حالتِ صفحه دستِ توست. فصل بعد سراغِ گفت‌وگوی واقعی با کاربر می‌رویم: فرم. چیزی که کاربر تایپ کرده را با \u003Ccode>value\u003C\u002Fcode> می‌خوانی، با \u003Ccode>preventDefault\u003C\u002Fcode> جلوی عادتِ قدیمیِ مرورگر (بارگذاریِ دوبارهٔ صفحه) را می‌گیری، و با \u003Ccode>if\u003C\u002Fcode>\u002F\u003Ccode>else\u003C\u002Fcode> اولین تصمیمِ واقعیِ کدت را می‌گیری.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":285,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,71,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,79,83,86,89,92,95,99,103,107,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,264,267,270,273,274,275,276,279,282],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":76,"slug":77,"source":8,"term":72,"title_fa":78},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":80,"slug":81,"source":8,"term":72,"title_fa":82},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":12,"slug":84,"source":8,"term":72,"title_fa":85},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":6,"slug":87,"source":8,"term":72,"title_fa":88},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":16,"slug":90,"source":8,"term":72,"title_fa":91},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":9,"slug":93,"source":8,"term":72,"title_fa":94},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":72,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":72,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":72,"title_fa":106},10,"t1-s10-media","فصل ۱۰ — ویدیو و صدا",{"free_preview":5,"order":108,"slug":109,"source":8,"term":72,"title_fa":110},11,"t1-s11-first-project","فصل ۱۱ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":112,"source":8,"term":76,"title_fa":113},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":76,"slug":115,"source":8,"term":76,"title_fa":116},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":80,"slug":118,"source":8,"term":76,"title_fa":119},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":12,"slug":121,"source":8,"term":76,"title_fa":122},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":6,"slug":124,"source":8,"term":76,"title_fa":125},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":16,"slug":127,"source":8,"term":76,"title_fa":128},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":9,"slug":130,"source":8,"term":76,"title_fa":131},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":133,"source":8,"term":76,"title_fa":134},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":136,"source":8,"term":76,"title_fa":137},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":139,"source":8,"term":76,"title_fa":140},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":108,"slug":142,"source":8,"term":76,"title_fa":143},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":145,"source":8,"term":80,"title_fa":146},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":76,"slug":148,"source":8,"term":80,"title_fa":149},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":80,"slug":151,"source":8,"term":80,"title_fa":152},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":12,"slug":154,"source":8,"term":80,"title_fa":155},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":6,"slug":157,"source":8,"term":80,"title_fa":158},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":16,"slug":160,"source":8,"term":80,"title_fa":161},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":9,"slug":163,"source":8,"term":80,"title_fa":164},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":166,"source":8,"term":80,"title_fa":167},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":169,"source":8,"term":80,"title_fa":170},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":172,"source":8,"term":80,"title_fa":173},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":108,"slug":175,"source":8,"term":80,"title_fa":176},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":178,"source":8,"term":12,"title_fa":179},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":76,"slug":181,"source":8,"term":12,"title_fa":182},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":80,"slug":184,"source":8,"term":12,"title_fa":185},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":12,"slug":187,"source":8,"term":12,"title_fa":188},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":6,"slug":190,"source":8,"term":12,"title_fa":191},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":16,"slug":193,"source":8,"term":12,"title_fa":194},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":9,"slug":196,"source":8,"term":12,"title_fa":197},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":199,"source":8,"term":12,"title_fa":200},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":202,"source":8,"term":6,"title_fa":203},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":76,"slug":205,"source":8,"term":6,"title_fa":206},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":80,"slug":208,"source":8,"term":6,"title_fa":209},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":12,"slug":211,"source":8,"term":6,"title_fa":212},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":6,"slug":214,"source":8,"term":6,"title_fa":215},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":16,"slug":217,"source":8,"term":6,"title_fa":218},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":9,"slug":220,"source":8,"term":6,"title_fa":221},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":223,"source":8,"term":6,"title_fa":224},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":226,"source":8,"term":6,"title_fa":227},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":229,"source":8,"term":6,"title_fa":230},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":232,"source":8,"term":16,"title_fa":233},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":76,"slug":235,"source":8,"term":16,"title_fa":236},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":80,"slug":238,"source":8,"term":16,"title_fa":239},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":12,"slug":241,"source":8,"term":16,"title_fa":242},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":6,"slug":244,"source":8,"term":16,"title_fa":245},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":16,"slug":247,"source":8,"term":16,"title_fa":248},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":9,"slug":250,"source":8,"term":16,"title_fa":251},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":253,"source":8,"term":16,"title_fa":254},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":256,"source":8,"term":16,"title_fa":257},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":259,"source":8,"term":16,"title_fa":260},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":108,"slug":262,"source":8,"term":16,"title_fa":263},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",{"free_preview":5,"order":72,"slug":265,"source":8,"term":9,"title_fa":266},"t7-s01-why-js","فصل ۰۱ — چرا JavaScript؟ اولین اسکریپت",{"free_preview":5,"order":76,"slug":268,"source":8,"term":9,"title_fa":269},"t7-s02-variables","فصل ۰۲ — متغیر و مقدار",{"free_preview":5,"order":80,"slug":271,"source":8,"term":9,"title_fa":272},"t7-s03-select-change","فصل ۰۳ — پیدا کردن و تغییرِ عنصر",{"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":9,"slug":277,"source":8,"term":9,"title_fa":278},"t7-s07-lists-loops","فصل ۰۷ — فهرست و حلقه",{"free_preview":5,"order":96,"slug":280,"source":8,"term":9,"title_fa":281},"t7-s08-fetch-data","فصل ۰۸ — گرفتن داده از اینترنت",{"free_preview":5,"order":100,"slug":283,"source":8,"term":9,"title_fa":284},"t7-s09-js-capstone","فصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کن",[],1784860314219]