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