[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"lesson:t7-s04-events":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,4,"t7-s04-events","book",7,"فصل ۰۴ — رویداد",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},3,"t7-s03-select-change","فصل ۰۳ — پیدا کردن و تغییرِ عنصر",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},5,"t7-s05-toggle-class","فصل ۰۵ — روشن\u002Fخاموش‌کردنِ یک class: پلِ CSS و JS",[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>تا امروز هر خط JavaScript که نوشتی همان لحظهٔ باز شدنِ صفحه اجرا می‌شد و تمام. این فصل کدت را منتظر نگه می‌داری: با \u003Ccode>addEventListener\u003C\u002Fcode> به مرورگر می‌گویی «هر وقت روی این دکمه کلیک شد، این تکه‌کد را اجرا کن». آخرش صفحه‌ای داری که جواب می‌دهد — دکمه‌ای که پیامِ صفحه را عوض می‌کند، و بخشی که می‌گوید دقیقاً روی چه چیزی کلیک کرده‌ای.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-listening-button.5d0b78ab4a.160.webp 160w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.320.webp 320w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.640.webp 640w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-listening-button.5d0b78ab4a.1280.jpg\" srcset=\"\u002F_img\u002F01-image-listening-button.5d0b78ab4a.160.jpg 160w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.320.jpg 320w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.640.jpg 640w, \u002F_img\u002F01-image-listening-button.5d0b78ab4a.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>addEventListener\u003C\u002Fcode> یک عنصر را به رویدادِ \u003Ccode>click\u003C\u002Fcode> گوش‌به‌زنگ کنی\u003C\u002Fli>\n\u003Cli>functionی بنویسی که فقط وقتی رویداد اتفاق می‌افتد اجرا شود\u003C\u002Fli>\n\u003Cli>با شیءِ \u003Ccode>event\u003C\u002Fcode> بفهمی رویداد دقیقاً روی کدام عنصر افتاده\u003C\u002Fli>\n\u003Cli>فرقِ خرابیِ بی‌صدا (اسمِ رویدادِ غلط) و خرابیِ پر سر و صدا (selector غلط) را توضیح بدهی\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>document.querySelector\u003C\u002Fcode> و \u003Ccode>textContent\u003C\u002Fcode> — کلِ این فصل روی همین دو سوار است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>const\u003C\u002Fcode> و template literal.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۵:\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> — تا فرقش با کلیک را ببینی.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— دکمه‌ای می‌بینی که فعلاً کر است: کلیک می‌کنی و هیچ اتفاقی نمی‌افتد. کارِ این فصل این است که شنوایش کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-7-javascript\u002Fsession-04-events",{"kind":21,"heading":33,"html":34},"۱. کدی که منتظر می‌ماند","\u003Ch2 id=\"۱-کدی-که-منتظر-می‌ماند\">۱. کدی که منتظر می‌ماند\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DA%A9%D8%AF%DB%8C-%DA%A9%D9%87-%D9%85%D9%86%D8%AA%D8%B8%D8%B1-%D9%85%DB%8C%E2%80%8C%D9%85%D8%A7%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در ترم ۵ با \u003Ccode>:hover\u003C\u002Fcode> دیدی صفحه می‌تواند به موس جواب بدهد — ولی فقط تا وقتی موس روی عنصر است؛ برش داری، همه‌چیز برمی‌گردد. کدِ JavaScript فصل‌های قبل هم برعکسش بود: یک بار موقعِ باز شدنِ صفحه اجرا می‌شد و دیگر هیچ.\u003C\u002Fp>\n\u003Cp>چیزی که کم داریم \u003Cstrong>انتظار\u003C\u002Fstrong> است: کدی که الان اجرا نشود؛ بایستد و گوش بدهد تا یک \u003Cstrong>رویداد\u003C\u002Fstrong> بیفتد. رویداد یعنی یک اتفاق در صفحه — کلیک، تایپ، حرکتِ موس، فرستادنِ فرم. مرورگر همهٔ این اتفاق‌ها را می‌بیند؛ تو فقط باید بگویی به کدامش گوش بدهد و وقتی افتاد چه کند.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. addEventListener: گوش بده، بعد اجرا کن","\u003Ch2 id=\"۲-addeventlistener-گوش-بده-بعد-اجرا-کن\">۲. \u003Ccode>addEventListener\u003C\u002Fcode>: گوش بده، بعد اجرا کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-addeventlistener-%DA%AF%D9%88%D8%B4-%D8%A8%D8%AF%D9%87-%D8%A8%D8%B9%D8%AF-%D8%A7%D8%AC%D8%B1%D8%A7-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>صفحهٔ آزمایشگاه این بخش را دارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section class="magic">\n  <h1>دکمهٔ جادویی<\u002Fh1>\n  <p class="message">هنوز هیچ اتفاقی نیفتاده.<\u002Fp>\n  <button class="magic-button">جادو کن<\u002Fbutton>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>در تبِ JS، اول مثل فصل ۳ دکمه و پیام را پیدا کن، بعد به دکمه گوش بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const button = document.querySelector('.magic-button');\nconst message = document.querySelector('.message');\n\nbutton.addEventListener('click', function () {\n  message.textContent = 'کلیک شنیده شد! این کار JavaScript بود.';\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به \u003Ccode>addEventListener\u003C\u002Fcode> دو چیز می‌دهی. اولی یک string است: اسمِ رویدادی که باید بشنود — اینجا \u003Ccode>'click'\u003C\u002Fcode>. دومی یک \u003Cstrong>function\u003C\u002Fstrong> است: تکه‌کدی بسته‌بندی‌شده که همین حالا اجرا نمی‌شود؛ تحویلِ مرورگر می‌دهی تا هر بار رویداد افتاد خودش اجرایش کند. به همین function می‌گویند \u003Cstrong>listener\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی «جادو کن» کلیک کن — پیامِ بالای دکمه عوض می‌شود. قبل از کلیک هیچ خبری نیست: کد نوشته شده ولی منتظر است.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر سه بار پشتِ هم کلیک کنی، function چند بار اجرا می‌شود؟ (جواب: سه بار — هر رویداد یک اجرا. فقط چون هر بار همان متن را می‌نویسد، تغییری نمی‌بینی.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک عنصر می‌تواند چند listener داشته باشد — یکی برای \u003Ccode>click\u003C\u002Fcode>، یکی برای رویدادی دیگر، حتی چند تا برای خودِ \u003Ccode>click\u003C\u002Fcode>. مرورگر همه را نگه می‌دارد و سرِ هر رویداد، همه را به‌ترتیب اجرا می‌کند. برای همین اسمش \u003Ccode>addEventListener\u003C\u002Fcode> است — «اضافه کن»، نه «جایگزین کن».\u003C\u002Fp>\n\u003C\u002Fblockquote>\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%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%DB%8C-%DA%A9%D9%87-%D9%87%DB%8C%DA%86%E2%80%8C%D9%88%D9%82%D8%AA-%D9%86%D9%85%DB%8C%E2%80%8C%D8%A7%D9%81%D8%AA%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>عمداً اسمِ رویداد را غلط بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>button.addEventListener('clik', function () {\n  message.textContent = 'کلیک شنیده شد! این کار JavaScript بود.';\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>کلیک کن. هیچ. نه پیام عوض می‌شود، نه خطایی در console هست. صفحه سالم به‌نظر می‌رسد و کاملاً خراب است — همان درسِ موذیِ ترم ۱، این‌بار در JavaScript.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> مرورگر اعتراض نمی‌کند چون هر stringی می‌تواند اسمِ یک رویداد باشد؛ تو فقط به رویدادی گوش داده‌ای که هیچ‌وقت نمی‌افتد. مقایسه‌اش کن با selector غلط: اگر بنویسی \u003Ccode>querySelector('.magic-buton')\u003C\u002Fcode> چیزی پیدا نمی‌شود و \u003Ccode>addEventListener\u003C\u002Fcode> روی «هیچ» با یک خطای واقعی در console فریاد می‌زند: \u003Ccode>Cannot read properties of null\u003C\u002Fcode>. پس ترتیبِ رفعِ اشکال این است: اول console؛ اگر خطا بود selector ها را چک کن، اگر ساکت بود اسمِ رویداد را حرف‌به‌حرف بخوان.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. شیءِ event: رویداد با خودش خبر می‌آورد","\u003Ch2 id=\"۴-شیءِ-event-رویداد-با-خودش-خبر-می‌آورد\">۴. شیءِ \u003Ccode>event\u003C\u002Fcode>: رویداد با خودش خبر می‌آورد\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B4%DB%8C%D8%A1%D9%90-event-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF-%D8%A8%D8%A7-%D8%AE%D9%88%D8%AF%D8%B4-%D8%AE%D8%A8%D8%B1-%D9%85%DB%8C%E2%80%8C%D8%A2%D9%88%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>مرورگر وقتی listener ات را صدا می‌زند، یک بستهٔ اطلاعات هم دستش می‌دهد: \u003Cstrong>شیءِ رویداد\u003C\u002Fstrong>. کافی است بینِ پرانتزهای function یک اسم برایش بگذاری تا تحویلش بگیری. آن اسم یک قرارداد است، نه یک کلمهٔ جادویی — هر اسمی بگذاری کار می‌کند، ولی تقریباً همه \u003Ccode>event\u003C\u002Fcode> می‌نویسند و ما هم همین را می‌نویسیم. مهم‌ترین چیزی که تویش هست \u003Ccode>event.target\u003C\u002Fcode> است: عنصری که رویداد \u003Cstrong>واقعاً\u003C\u002Fstrong> رویش افتاد.\u003C\u002Fp>\n\u003Cp>یک بخشِ دیگر به صفحه اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section class="colors">\n  <h2>کدام دکمه؟<\u002Fh2>\n  <button>قرمز<\u002Fbutton>\n  <button>آبی<\u002Fbutton>\n  <button>سبز<\u002Fbutton>\n  <p class="which">هنوز کلیک نکرده‌ای.<\u002Fp>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و به‌جای سه listener برای سه دکمه، فقط \u003Cstrong>یکی\u003C\u002Fstrong> روی خودِ \u003Ccode><section>\u003C\u002Fcode> بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const colors = document.querySelector('.colors');\nconst which = document.querySelector('.which');\n\ncolors.addEventListener('click', function (event) {\n  which.textContent = `روی «${event.target.textContent}» کلیک کردی.`;\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>کلیک روی هر دکمه‌ای از دلِ \u003Ccode><section>\u003C\u002Fcode> رد می‌شود، پس همان یک listener همه را می‌شنود — و \u003Ccode>event.target\u003C\u002Fcode> می‌گوید کدام بود.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی «آبی» کلیک کن؛ باید بنویسد: روی «آبی» کلیک کردی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر روی خودِ جملهٔ «کدام دکمه؟» کلیک کنی چه می‌شود؟ (جواب: listener باز هم اجرا می‌شود و \u003Ccode>event.target\u003C\u002Fcode> همان \u003Ccode><h2>\u003C\u002Fcode> است — target یعنی «چیزی که واقعاً زیرِ موس بود»، نه لزوماً یک دکمه.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس: «غیر از \u003Ccode>click\u003C\u002Fcode>، پنج رویدادِ پرکاربردِ موس و صفحه‌کلید را هرکدام با یک جمله توضیح بده.» بعد دو تایش را همین‌جا در آزمایشگاه به‌جای \u003Ccode>'click'\u003C\u002Fcode> بگذار و با چشمِ خودت چک کن که واقعاً همان‌طور که AI گفت رفتار می‌کنند.\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      <section class="magic">\n        <h1>دکمهٔ جادویی<\u002Fh1>\n        <p class="message">هنوز هیچ اتفاقی نیفتاده.<\u002Fp>\n        <button class="magic-button">جادو کن<\u002Fbutton>\n      <\u002Fsection>\n\n      <section class="colors">\n        <h2>کدام دکمه؟<\u002Fh2>\n        <button>قرمز<\u002Fbutton>\n        <button>آبی<\u002Fbutton>\n        <button>سبز<\u002Fbutton>\n        <p class="which">هنوز کلیک نکرده‌ای.<\u002Fp>\n      <\u002Fsection>\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}\n\nsection {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 360px;\n  margin-block-end: 16px;\n}\n\nbutton {\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\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F\u002F script.js\nconst button = document.querySelector('.magic-button');\nconst message = document.querySelector('.message');\n\nbutton.addEventListener('click', function () {\n  message.textContent = 'کلیک شنیده شد! این کار JavaScript بود.';\n});\n\nconst colors = document.querySelector('.colors');\nconst which = document.querySelector('.which');\n\ncolors.addEventListener('click', function (event) {\n  which.textContent = `روی «${event.target.textContent}» کلیک کردی.`;\n});\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>event\u003C\u002Ftd>\n\u003Ctd>ایوِنت\u003C\u002Ftd>\n\u003Ctd>یک اتفاق در صفحه: کلیک، تایپ، حرکتِ موس\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>addEventListener\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَد ایوِنت لیسِنِر\u003C\u002Ftd>\n\u003Ctd>به عنصر می‌گوید «به این رویداد گوش بده و این function را اجرا کن»\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>listener\u003C\u002Ftd>\n\u003Ctd>لیسِنِر\u003C\u002Ftd>\n\u003Ctd>functionی که منتظرِ یک رویداد می‌ماند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>function\u003C\u002Ftd>\n\u003Ctd>فانکشِن\u003C\u002Ftd>\n\u003Ctd>تکه‌کدی بسته‌بندی‌شده که بعداً اجرا می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>event.target\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ایوِنت تارگِت\u003C\u002Ftd>\n\u003Ctd>عنصری که رویداد واقعاً رویش اتفاق افتاد\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>class="reset-button"\u003C\u002Fcode> اضافه کن که پیام را به «هنوز هیچ اتفاقی نیفتاده.» برگرداند. یک \u003Ccode>querySelector\u003C\u002Fcode> و یک listener دیگر لازم داری — و هیچ چیزِ جدیدی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> در listener اول \u003Ccode>'click'\u003C\u002Fcode> را با \u003Ccode>'dblclick'\u003C\u002Fcode> عوض کن و ببین حالا فقط دابل‌کلیک جواب می‌گیرد. بعد توضیح بده چرا وقتی \u003Ccode>'clik'\u003C\u002Fcode> نوشتی مرورگر اعتراض نکرد — دقیقاً به همان دلیلی که \u003Ccode>'dblclick'\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>الان صفحه‌ات می‌شنود. فصل بعد قشنگ‌ترین قراردادِ دنیای front-end را می‌بینی: JavaScript فقط یک class را روشن و خاموش می‌کند و همهٔ ظاهر — رنگ، حرکت، حالتِ شب — کارِ همان CSS ای است که شش ترم ساختی. یک خط \u003Ccode>classList.toggle\u003C\u002Fcode> و استایل‌هایت زنده می‌شوند.\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,72,76,79,82,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,264,267,268,269,270,273,276,279],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":12,"slug":77,"source":8,"term":69,"title_fa":78},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":6,"slug":80,"source":8,"term":69,"title_fa":81},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":16,"slug":83,"source":8,"term":69,"title_fa":84},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":86,"slug":87,"source":8,"term":69,"title_fa":88},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":9,"slug":90,"source":8,"term":69,"title_fa":91},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":69,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":69,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":69,"title_fa":103},10,"t1-s10-media","فصل ۱۰ — ویدیو و صدا",{"free_preview":5,"order":105,"slug":106,"source":8,"term":69,"title_fa":107},11,"t1-s11-first-project","فصل ۱۱ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":109,"source":8,"term":73,"title_fa":110},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":112,"source":8,"term":73,"title_fa":113},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":12,"slug":115,"source":8,"term":73,"title_fa":116},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":6,"slug":118,"source":8,"term":73,"title_fa":119},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":16,"slug":121,"source":8,"term":73,"title_fa":122},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":86,"slug":124,"source":8,"term":73,"title_fa":125},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":9,"slug":127,"source":8,"term":73,"title_fa":128},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":130,"source":8,"term":73,"title_fa":131},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":133,"source":8,"term":73,"title_fa":134},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":136,"source":8,"term":73,"title_fa":137},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":105,"slug":139,"source":8,"term":73,"title_fa":140},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":142,"source":8,"term":12,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":145,"source":8,"term":12,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":12,"slug":148,"source":8,"term":12,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":6,"slug":151,"source":8,"term":12,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":16,"slug":154,"source":8,"term":12,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":86,"slug":157,"source":8,"term":12,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":9,"slug":160,"source":8,"term":12,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":163,"source":8,"term":12,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":166,"source":8,"term":12,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":169,"source":8,"term":12,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":105,"slug":172,"source":8,"term":12,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":175,"source":8,"term":6,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":178,"source":8,"term":6,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":12,"slug":181,"source":8,"term":6,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":6,"slug":184,"source":8,"term":6,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":16,"slug":187,"source":8,"term":6,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":86,"slug":190,"source":8,"term":6,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":9,"slug":193,"source":8,"term":6,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":196,"source":8,"term":6,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":199,"source":8,"term":16,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":202,"source":8,"term":16,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":12,"slug":205,"source":8,"term":16,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":6,"slug":208,"source":8,"term":16,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":16,"slug":211,"source":8,"term":16,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":86,"slug":214,"source":8,"term":16,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":9,"slug":217,"source":8,"term":16,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":220,"source":8,"term":16,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":223,"source":8,"term":16,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":226,"source":8,"term":16,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":229,"source":8,"term":86,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":232,"source":8,"term":86,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":12,"slug":235,"source":8,"term":86,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":6,"slug":238,"source":8,"term":86,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":16,"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":69,"slug":262,"source":8,"term":9,"title_fa":263},"t7-s01-why-js","فصل ۰۱ — چرا JavaScript؟ اولین اسکریپت",{"free_preview":5,"order":73,"slug":265,"source":8,"term":9,"title_fa":266},"t7-s02-variables","فصل ۰۲ — متغیر و مقدار",{"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":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","فصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کن",[],1784860314216]