[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"lesson:t7-s03-select-change":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,3,"t7-s03-select-change","book",7,"فصل ۰۳ — پیدا کردن و تغییرِ عنصر",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},2,"t7-s02-variables","فصل ۰۲ — متغیر و مقدار",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},4,"t7-s04-events","فصل ۰۴ — رویداد",[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>document.querySelector\u003C\u002Fcode> عنصر را با همان selector های CSS که از ترم ۲ بلدی پیدا می‌کنی، متنش را با \u003Ccode>textContent\u003C\u002Fcode> می‌خوانی و عوض می‌کنی، و ظاهرش را با \u003Ccode>classList\u003C\u002Fcode> و \u003Ccode>style\u003C\u002Fcode> تغییر می‌دهی. آخر فصل کارتی داری که وقتی صفحه باز می‌شود، JavaScript تیترش را عوض می‌کند، وضعیتش را می‌نویسد و برجسته‌اش می‌کند — بدون این‌که دستت به HTML بخورد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-select-change.c66fcdcd99.160.webp 160w, \u002F_img\u002F01-image-select-change.c66fcdcd99.320.webp 320w, \u002F_img\u002F01-image-select-change.c66fcdcd99.640.webp 640w, \u002F_img\u002F01-image-select-change.c66fcdcd99.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-select-change.c66fcdcd99.1280.jpg\" srcset=\"\u002F_img\u002F01-image-select-change.c66fcdcd99.160.jpg 160w, \u002F_img\u002F01-image-select-change.c66fcdcd99.320.jpg 320w, \u002F_img\u002F01-image-select-change.c66fcdcd99.640.jpg 640w, \u002F_img\u002F01-image-select-change.c66fcdcd99.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>querySelector\u003C\u002Fcode> و selector های آشنا پیدا کنی و در یک \u003Ccode>const\u003C\u002Fcode> نگه داری\u003C\u002Fli>\n\u003Cli>\u003Ccode>textContent\u003C\u002Fcode> یک عنصر را بخوانی و عوض کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>classList\u003C\u002Fcode> یک class آماده را روشن و خاموش کنی و با \u003Ccode>style\u003C\u002Fcode> یک property را مستقیم بدهی\u003C\u002Fli>\n\u003Cli>خطای \u003Ccode>null\u003C\u002Fcode> را بشناسی و دو علتِ همیشگی‌اش را پیدا کنی\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> selector ها — \u003Ccode>.class\u003C\u002Fcode>، نوع، descendant. \u003Ccode>querySelector\u003C\u002Fcode> دقیقاً همین زبان را حرف می‌زند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> قانونِ «\u003Ccode>&lt;script&gt;\u003C\u002Fcode> آخرِ \u003Ccode>&lt;body&gt;\u003C\u002Fcode>» — امروز بالاخره می‌فهمی چرا.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>const\u003C\u002Fcode> و template literal.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارتِ ساکن می‌بینی. کارِ این فصل این است که از تب JS زنده‌اش کنی: این‌بار نتیجه را روی خودِ صفحه می‌بینی، نه فقط در console","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-7-javascript\u002Fsession-03-select-change",{"kind":21,"heading":33,"html":34},"۱. پلی به چیزی که از قبل بلدی","\u003Ch2 id=\"۱-پلی-به-چیزی-که-از-قبل-بلدی\">۱. پلی به چیزی که از قبل بلدی\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%BE%D9%84%DB%8C-%D8%A8%D9%87-%DA%86%DB%8C%D8%B2%DB%8C-%DA%A9%D9%87-%D8%A7%D8%B2-%D9%82%D8%A8%D9%84-%D8%A8%D9%84%D8%AF%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خبرِ خوبِ این فصل: چیزِ تازه‌ای برای «پیدا کردن» یاد نمی‌گیری. \u003Ccode>document.querySelector\u003C\u002Fcode> یک جمله بیشتر نیست: «ای سند، اولین عنصری را که به این selector می‌خورد بده به من.» و selector همان زبانی است که دو ترم است با آن CSS می‌نویسی.\u003C\u002Fp>\n\u003Cp>HTML کارتِ این فصل این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;article class=&quot;card&quot;&gt;\n  &lt;h1 class=&quot;card__title&quot;&gt;کارت من&lt;\u002Fh1&gt;\n  &lt;p class=&quot;card__status&quot;&gt;هنوز خبری نیست.&lt;\u002Fp&gt;\n&lt;\u002Farticle&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا در تب JS، تیتر را پیدا کن و متنش را بخوان:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const title = document.querySelector(&quot;.card__title&quot;);\nconsole.log(title.textContent);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>querySelector\u003C\u002Fcode> خودِ عنصر را برمی‌گرداند و ما در جعبهٔ \u003Ccode>title\u003C\u002Fcode> نگهش می‌داریم — همان \u003Ccode>const\u003C\u002Fcode> فصل قبل. بعد \u003Ccode>title.textContent\u003C\u002Fcode> یعنی «متنِ داخل این عنصر».\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در console نوشته: \u003Ccode>کارت من\u003C\u002Fcode>. JavaScript صفحه را خواند.\u003C\u002Fp>\n\u003Cp>اگر selector به چند عنصر بخورد چه؟ \u003Ccode>querySelector\u003C\u002Fcode> فقط \u003Cstrong>اولین\u003C\u002Fstrong> را می‌دهد و تمام.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. نوشتن روی صفحه — قولِ فصل ۱","\u003Ch2 id=\"۲-نوشتن-روی-صفحه-—-قولِ-فصل-۱\">۲. نوشتن روی صفحه — قولِ فصل ۱\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D9%86%D9%88%D8%B4%D8%AA%D9%86-%D8%B1%D9%88%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%E2%80%94-%D9%82%D9%88%D9%84%D9%90-%D9%81%D8%B5%D9%84-%DB%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خواندن تماشاست؛ نوشتن قدرت است. به \u003Ccode>textContent\u003C\u002Fcode> مقدار بده تا متنِ عنصر عوض شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>title.textContent = &quot;کارتِ زنده&quot;;\n\nconst writer = &quot;JavaScript&quot;;\nconst status = document.querySelector(&quot;.card__status&quot;);\nstatus.textContent = `این متن را ${writer} نوشت، نه HTML.`;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی خودِ صفحه، تیترِ کارت شده «کارتِ زنده» و زیرش نوشته «این متن را JavaScript نوشت، نه HTML.» — template literal فصل قبل هم سرِ کار آمد.\u003C\u002Fp>\n\u003Cp>این همان راهِ درستی است که فصل ۱ قولش را دادیم: \u003Ccode>document.write\u003C\u002Fcode> فقط بلد بود متن را تهِ صفحه بریزد؛ این‌جا \u003Cstrong>دقیقاً همان عنصری را که می‌خواهی\u003C\u002Fstrong> نشانه می‌گیری و عوض می‌کنی.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. وقتی querySelector چیزی پیدا نمی‌کند","\u003Ch2 id=\"۳-وقتی-queryselector-چیزی-پیدا-نمی‌کند\">۳. وقتی \u003Ccode>querySelector\u003C\u002Fcode> چیزی پیدا نمی‌کند\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%88%D9%82%D8%AA%DB%8C-queryselector-%DA%86%DB%8C%D8%B2%DB%8C-%D9%BE%DB%8C%D8%AF%D8%A7-%D9%86%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا مهم‌ترین خرابیِ این فصل را عمداً بساز. در selector یک غلطِ تایپی بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const title = document.querySelector(&quot;.card__titel&quot;);\nconsole.log(title.textContent);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>صفحه بی‌تغییر می‌ماند و console سرخ می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>Uncaught TypeError: Cannot read properties of null (reading 'textContent')\n    at script.js:3\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این پیام دو تکه دارد. \u003Ccode>null\u003C\u002Fcode> یعنی «هیچ‌چیز»: وقتی \u003Ccode>querySelector\u003C\u002Fcode> عنصری با آن selector پیدا نکند، بی‌سروصدا \u003Ccode>null\u003C\u002Fcode> برمی‌گرداند و شکایتی نمی‌کند. خطا تازه وقتی می‌ترکد که از دلِ آن هیچ‌چیز، چیزی بخواهی — این‌جا \u003Ccode>reading 'textContent'\u003C\u002Fcode>. پس ترجمهٔ واقعیِ این پیام تقریباً همیشه این است: \u003Cstrong>«selector ات به هیچ عنصری نخورد.»\u003C\u002Fstrong> selector را حرف‌به‌حرف با HTML مقایسه کن: \u003Ccode>titel\u003C\u002Fcode> باید \u003Ccode>title\u003C\u002Fcode> باشد. (در آزمایشگاه، جای \u003Ccode>script.js:3\u003C\u002Fcode> چیزی مثل \u003Ccode>about:srcdoc\u003C\u002Fcode> با شماره‌خطِ دیگری می‌نشیند — سندِ پیش‌نمایشِ آزمایشگاه است؛ خطا را با متنِ پیام بشناس، نه با فایل و شماره‌خط.)\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>و یک دامِ دوم با همان علامت: selector ات درست است ولی \u003Ccode>&lt;script&gt;\u003C\u002Fcode> را در \u003Ccode>&lt;head&gt;\u003C\u002Fcode> گذاشته‌ای. مرورگر صفحه را از بالا به پایین می‌خواند؛ در \u003Ccode>&lt;head&gt;\u003C\u002Fcode> هنوز هیچ \u003Ccode>&lt;article&gt;\u003C\u002Fcode> ای ساخته نشده، پس \u003Ccode>querySelector\u003C\u002Fcode> در آن لحظه راست می‌گوید: «چیزی نیست!» این همان چراییِ قانونِ فصل ۱ است: \u003Ccode>&lt;script&gt;\u003C\u002Fcode> آخرِ \u003Ccode>&lt;body&gt;\u003C\u002Fcode> می‌نشیند تا وقتی اجرا می‌شود، همهٔ عنصرها ساخته شده باشند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> نقطهٔ اولِ selector جزئی از خودِ selector است — همان‌طور که در CSS بود. \u003Ccode>querySelector(&quot;card__title&quot;)\u003C\u002Fcode> بدونِ نقطه یعنی «تگی به \u003Cstrong>نامِ\u003C\u002Fstrong> card__title»، که وجود ندارد و باز \u003Ccode>null\u003C\u002Fcode> می‌گیری.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>اگر هر دو مظنون را چک کردی و هنوز گیر بودی، وقتِ کمک‌گرفتن است:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> وقتی به \u003Ccode>null\u003C\u002Fcode> خوردی و پیدا نکردی چرا، HTML ات و خطِ \u003Ccode>querySelector\u003C\u002Fcode> را با هم به دستیار AI ات بده و بپرس: «چرا این selector به چیزی نمی‌خورد؟» جوابش را با دو مظنونِ همین فصل بسنج — غلطِ تایپی و جای \u003Ccode>&lt;script&gt;\u003C\u002Fcode> — و فقط وقتی قبولش کن که بعد از اصلاح، خطا واقعاً از console رفته باشد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>Checkpoint.\u003C\u002Fstrong> قبل از ادامه، جواب بده: اگر صفحه دو \u003Ccode>&lt;p class=&quot;card__status&quot;&gt;\u003C\u002Fcode> داشته باشد، \u003Ccode>querySelector(&quot;.card__status&quot;)\u003C\u002Fcode> متنِ کدام را عوض می‌کند؟ (جواب: فقط اولین را. برای گرفتنِ دومی یک نشانیِ دقیق‌تر لازم داری — مثلاً یک id.)\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. تغییرِ ظاهر: classList و style","\u003Ch2 id=\"۴-تغییرِ-ظاهر-classlist-و-style\">۴. تغییرِ ظاهر: \u003Ccode>classList\u003C\u002Fcode> و \u003Ccode>style\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D9%90-%D8%B8%D8%A7%D9%87%D8%B1-classlist-%D9%88-style\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>برای ظاهر دو دستگیره داری. اولی و بهترش \u003Ccode>classList\u003C\u002Fcode> است: class ای را که استایلش را \u003Cstrong>از قبل در CSS نوشته‌ای\u003C\u002Fstrong> روشن یا خاموش می‌کند. فرض کن در \u003Ccode>styles.css\u003C\u002Fcode> این را داری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.highlight {\n  background-color: #fff3c4;\n  border-color: #e0a800;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا از JS روشنش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>const card = document.querySelector(&quot;.card&quot;);\ncard.classList.add(&quot;highlight&quot;);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>classList.add\u003C\u002Fcode> این class را به عنصر اضافه می‌کند — انگار خودت در HTML نوشته باشی — و \u003Ccode>classList.remove(&quot;highlight&quot;)\u003C\u002Fcode> برش می‌دارد.\u003C\u002Fp>\n\u003Cp>دستگیرهٔ دوم \u003Ccode>style\u003C\u002Fcode> است: یک property را مستقیم روی عنصر می‌گذارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>status.style.color = &quot;#1b7a43&quot;;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>فقط حواست باشد property های دوکلمه‌ای مثل \u003Ccode>background-color\u003C\u002Fcode> در JS به شکلِ \u003Ccode>backgroundColor\u003C\u002Fcode> نوشته می‌شوند — خط تیره در اسمِ JavaScript مجاز نیست.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کارت زردِ برجسته شد و جملهٔ وضعیت سبز. همهٔ این‌ها هنگام بازشدنِ صفحه اتفاق افتاد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> تا می‌توانی \u003Ccode>classList\u003C\u002Fcode>، نه \u003Ccode>style\u003C\u002Fcode>. استایل باید در CSS زندگی کند — همان درسِ ترم ۶ — و JS فقط کلید را بزند. \u003Ccode>style\u003C\u002Fcode> را برای وقتی نگه دار که مقدار واقعاً از دلِ JS می‌آید.\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>&lt;!-- index.html --&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;title&gt;کارت زنده&lt;\u002Ftitle&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n  &lt;\u002Fhead&gt;\n  &lt;body&gt;\n    &lt;main&gt;\n      &lt;article class=&quot;card&quot;&gt;\n        &lt;h1 class=&quot;card__title&quot;&gt;کارت من&lt;\u002Fh1&gt;\n        &lt;p class=&quot;card__status&quot;&gt;هنوز خبری نیست.&lt;\u002Fp&gt;\n      &lt;\u002Farticle&gt;\n    &lt;\u002Fmain&gt;\n\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\u002Fscript&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>فایل \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\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\n.card {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 360px;\n}\n\n.highlight {\n  background-color: #fff3c4;\n  border-color: #e0a800;\n}\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 zende\nconst title = document.querySelector(&quot;.card__title&quot;);\nconsole.log(title.textContent);\n\ntitle.textContent = &quot;کارتِ زنده&quot;;\n\nconst writer = &quot;JavaScript&quot;;\nconst status = document.querySelector(&quot;.card__status&quot;);\nstatus.textContent = `این متن را ${writer} نوشت، نه HTML.`;\n\nconst card = document.querySelector(&quot;.card&quot;);\ncard.classList.add(&quot;highlight&quot;);\nstatus.style.color = &quot;#1b7a43&quot;;\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>\u003Ccode>document\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>داکیومِنت\u003C\u002Ftd>\n\u003Ctd>خودِ صفحه، از نگاه JavaScript\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>querySelector\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کوئری‌سِلِکتور\u003C\u002Ftd>\n\u003Ctd>اولین عنصری را که به یک selector می‌خورد برمی‌گرداند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>textContent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>تکست‌کانتِنت\u003C\u002Ftd>\n\u003Ctd>متنِ داخل یک عنصر — هم خواندنی، هم نوشتنی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>null\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>نال\u003C\u002Ftd>\n\u003Ctd>مقدارِ «هیچ‌چیز»؛ جوابِ \u003Ccode>querySelector\u003C\u002Fcode> وقتی چیزی پیدا نکند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>classList\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کلس‌لیست\u003C\u002Ftd>\n\u003Ctd>فهرست class های یک عنصر، با \u003Ccode>add\u003C\u002Fcode> و \u003Ccode>remove\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>style\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>استایل\u003C\u002Ftd>\n\u003Ctd>دادنِ مستقیمِ یک property به یک عنصر از داخل JS\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>&lt;p class=&quot;card__note&quot;&gt;یادداشت&lt;\u002Fp&gt;\u003C\u002Fcode> اضافه کن. از JS با \u003Ccode>querySelector\u003C\u002Fcode> بگیرش، متنش را با یک template literal که اسمِ خودت تویش است عوض کن، و رنگش را با \u003Ccode>style.color\u003C\u002Fcode> عوض کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> ثابت کن \u003Ccode>querySelector\u003C\u002Fcode> فقط اولی را می‌گیرد: یک \u003Ccode>&lt;p class=&quot;card__status&quot;&gt;\u003C\u002Fcode> دوم به کارت اضافه کن، متنِ \u003Ccode>.card__status\u003C\u002Fcode> را عوض کن و ببین کدام‌یک تغییر کرد. بعد به دومی یک \u003Ccode>id\u003C\u002Fcode> بده و با \u003Ccode>querySelector(&quot;#...&quot;)\u003C\u002Fcode> همان را بگیر و عوض کن. آخرش با یک selector ترکیبی که از ترم ۲ بلدی — مثل \u003Ccode>querySelector(&quot;main h1&quot;)\u003C\u002Fcode> — تیتر را بگیر و نشان بده selector های پیچیده هم همین‌جا کار می‌کنند.\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>همهٔ تغییرهای این فصل هنگامِ بازشدنِ صفحه اجرا شدند — کاربر هنوز نقشی ندارد. فصل بعد کد را به دستِ او می‌دهیم: با \u003Ccode>addEventListener\u003C\u002Fcode> و رویدادِ \u003Ccode>click\u003C\u002Fcode>، تکه‌کدت فقط وقتی اجرا می‌شود که کاربر واقعاً کلیک کند — و صفحه برای اولین بار به معنای کامل \u003Cstrong>تعاملی\u003C\u002Fstrong> می‌شود.\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,75,78,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,264,265,266,267,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":12,"slug":73,"source":8,"term":69,"title_fa":74},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":6,"slug":76,"source":8,"term":69,"title_fa":77},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":16,"slug":79,"source":8,"term":69,"title_fa":80},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":82,"slug":83,"source":8,"term":69,"title_fa":84},5,"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":12,"title_fa":110},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":12,"slug":112,"source":8,"term":12,"title_fa":113},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":6,"slug":115,"source":8,"term":12,"title_fa":116},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":16,"slug":118,"source":8,"term":12,"title_fa":119},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":82,"slug":121,"source":8,"term":12,"title_fa":122},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":86,"slug":124,"source":8,"term":12,"title_fa":125},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":9,"slug":127,"source":8,"term":12,"title_fa":128},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":130,"source":8,"term":12,"title_fa":131},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":133,"source":8,"term":12,"title_fa":134},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":136,"source":8,"term":12,"title_fa":137},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":105,"slug":139,"source":8,"term":12,"title_fa":140},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":142,"source":8,"term":6,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":12,"slug":145,"source":8,"term":6,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":6,"slug":148,"source":8,"term":6,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":16,"slug":151,"source":8,"term":6,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":82,"slug":154,"source":8,"term":6,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":86,"slug":157,"source":8,"term":6,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":9,"slug":160,"source":8,"term":6,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":163,"source":8,"term":6,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":166,"source":8,"term":6,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":169,"source":8,"term":6,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":105,"slug":172,"source":8,"term":6,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":175,"source":8,"term":16,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":12,"slug":178,"source":8,"term":16,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":6,"slug":181,"source":8,"term":16,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":16,"slug":184,"source":8,"term":16,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":82,"slug":187,"source":8,"term":16,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":86,"slug":190,"source":8,"term":16,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":9,"slug":193,"source":8,"term":16,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":196,"source":8,"term":16,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":199,"source":8,"term":82,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":12,"slug":202,"source":8,"term":82,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":6,"slug":205,"source":8,"term":82,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":16,"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":69,"slug":229,"source":8,"term":86,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":12,"slug":232,"source":8,"term":86,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":6,"slug":235,"source":8,"term":86,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":16,"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":69,"slug":262,"source":8,"term":9,"title_fa":263},"t7-s01-why-js","فصل ۰۱ — چرا JavaScript؟ اولین اسکریپت",{"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":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","فصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کن",[],1784860314212]