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