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