چرا JavaScript؟ اولین اسکریپت — ترم ۷ تاروپود

در این فصل چه می‌سازی#

این فصل درِ ورودیِ ترم ۷ است: می‌فهمی JavaScript چه چیزی به HTML و CSS اضافه می‌کند — رفتار — اولین <script> خودت را می‌نویسی، و با console مرورگر آشنا می‌شوی؛ جایی که از این به بعد خروجی‌ها و خطاهایت را آن‌جا می‌بینی. آخر فصل صفحه‌ای داری که یک جمله‌اش را نه تو، بلکه JavaScript نوشته است.

یک قولِ صادقانه هم همین اول: این ترم یک پلِ کوتاه است، نه یک دورهٔ کامل JavaScript. قرار است آن‌قدر یاد بگیری که صفحه‌هایی که در شش ترم ساختی جان بگیرند؛ عمقِ بیشتر، خودآموزِ خودش را می‌خواهد.

سه لایهٔ یک صفحهٔ وب روی هم: لایهٔ اسکلت با ساختار خطی، لایهٔ ظاهر با رنگ و بافت، و لایهٔ بالایی با چرخ‌دنده و جرقه که به صفحه حرکت می‌دهد

آخر این فصل می‌توانی:

بگویی JavaScript چه کاری می‌کند که HTML و CSS نمی‌توانند
با <script> کد JavaScript را به صفحه وصل کنی — هم داخل صفحه، هم از فایل جدا
console مرورگر را باز کنی و با console.log پیام بفرستی
یک پیام خطای JavaScript را بخوانی و بفهمی چه می‌گوید

قبل از شروع#

از ترم ۱: ساختن یک صفحهٔ HTML کامل و semantic.
از ترم ۲: وصل‌کردن فایل جدا با <link> — امروز همان الگو را با <script> تکرار می‌کنیم.

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. ضلعِ سوم: رفتار#

HTML می‌گوید صفحه چیست؛ CSS می‌گوید چه شکلی است. ولی صفحه‌های واقعی کار هم می‌کنند: دکمهٔ پسندیدن می‌شمارد، جعبهٔ جست‌وجو همان‌طور که تایپ می‌کنی پیشنهاد می‌دهد، فرم قبل از ارسال چکت می‌کند.

در ترم ۵ دیدی CSS هم کمی تعامل بلد است — به hover واکنش نشان می‌دهد، نرم جابه‌جا می‌شود. ولی CSS نمی‌تواند بشمارد، تصمیم بگیرد، یا چیزی را به‌خاطر بسپارد. یک دکمهٔ پسندیدن را تصور کن: CSS می‌تواند شکلِ «فشرده‌شدنش» را بسازد، ولی این‌که با هر کلیک عدد یکی زیاد شود؟ آن دیگر رفتار است، و برای رفتار، صفحه یک زبان سوم دارد: JavaScript.

Checkpoint. قبل از ادامه، جواب بده: «وقتی موس روی دکمه می‌آید بزرگ شود» کارِ کیست، و «وقتی روی دکمه کلیک شد یک پیام ذخیره شود» کارِ کی؟ (جواب: اولی هنوز CSS است — فقط ظاهر در یک حالت. دومی شمردن و به‌خاطرسپردن دارد: JavaScript.)

۲. `<script>`: جای JavaScript در صفحه#

مثل CSS، دو راه داری: کد را داخل خودِ صفحه بنویسی، یا در یک فایل جدا. راه اول با تگ <script> است. این را درست قبل از بسته‌شدنِ <body> بنویس:

<script>
  document.write("سلام! من JavaScript هستم.");
</script>

✅ چک کن: پایین صفحه جملهٔ «سلام! من JavaScript هستم.» را می‌بینی — جمله‌ای که در HTML وجود ندارد؛ JavaScript موقع بازشدن صفحه نوشتش.

document.write فقط برای همین سلامِ اول است — فعلاً همین‌طور بنویس؛ فصل ۳ راهِ درست و دقیقِ تغییرِ صفحه را کامل یاد می‌گیریم.

راه دوم، مثل همان کاری که با CSS و <link> کردی: کد را در فایل script.js بگذار و با src وصلش کن — فقط حواست باشد <script> برخلاف <link> تگِ بسته‌شدنِ جدا دارد:

<script src="script.js"></script>

💡 نکته: فعلاً یک قانون ساده: <script> همیشه آخرِ <body>. چراییِ دقیقش را فصل ۳ با چشم خودت می‌بینی.

۳. console: میز کارِ برنامه‌نویس#

هر مرورگری یک صفحهٔ گفت‌وگوی پنهان بین تو و JavaScript دارد: console. کاربر عادی هیچ‌وقت نمی‌بیندش؛ برنامه‌نویس هر روز تویش زندگی می‌کند.

کلید F12 را بزن (یا راست‌کلیک و «Inspect»).
در پنجره‌ای که باز شد، tab با نام Console را انتخاب کن.

پیش‌نمایشِ آزمایشگاه console را نشان نمی‌دهد — console مالِ خودِ مرورگر است. حتی وقتی داخل آزمایشگاه کار می‌کنی، همین F12 پیام‌های صفحهٔ پیش‌نمایش را هم نشانت می‌دهد.

حالا در فایل script.js این دو خط را بنویس:

console.log("سلام تاروپود!");
console.log(2 + 3);

console.log یعنی «این را در console چاپ کن». خط اول متنِ داخل گیومه را همان‌طور چاپ می‌کند؛ خط دوم گیومه ندارد، پس JavaScript اول حسابش می‌کند.

✅ چک کن: در console دو خط می‌بینی: سلام تاروپود! و عدد 5. JavaScript جمع را خودش انجام داد — با مقدارها و عددها فصل بعد حسابی آشنا می‌شویم.

🔧 اگر کار نکرد: console خالی است؟ سه مظنونِ همیشگی: اول این‌که در پنجرهٔ DevTools واقعاً tab با نام Console انتخاب شده باشد، نه Elements. دوم این‌که بعد از هر تغییر، صفحه دوباره بارگذاری شده باشد — اسکریپت فقط موقعِ بازشدنِ صفحه اجرا می‌شود. سوم، اگر از فایل جدا استفاده می‌کنی، اسمِ داخلِ src باید حرف‌به‌حرف با اسمِ فایل یکی باشد؛ اگر یکی نباشد، مرورگر همان‌جا در console یک خطای سرخِ «پیدا نشد» می‌گذارد که آدرسِ اشتباه را نشانت می‌دهد.

Checkpoint. قبل از ادامه، جواب بده: اگر بنویسی console.log("2 + 3") — با گیومه — چه چاپ می‌شود؟ (جواب: خودِ متنِ 2 + 3، نه 5. گیومه یعنی «این یک تکه متن است»، و متن حساب نمی‌شود.)

۴. خرابش کن: اولین پیام خطا#

حالا عمداً خرابش کن تا با مهم‌ترین دوستِ این ترم آشنا شوی. در script.js یک حرف را جا بینداز:

consol.log("سلام تاروپود!");

صفحه ساکت است، ولی console سرخ شده:

Uncaught ReferenceError: consol is not defined
    at script.js:2

🔧 اگر کار نکرد: این پیام را از راست به چپ نخوان، تکه‌تکه بخوان: ReferenceError یعنی «اسمی را صدا زدی که نمی‌شناسم»؛ consol is not defined می‌گوید آن اسمِ ناشناس دقیقاً چیست؛ و script.js:2 می‌گوید کجاست — فایل و شمارهٔ خط. حرف e را برگردان تا console شود، صفحه را دوباره بارگذاری کن، و پیام سرخ می‌رود. یادت هست HTML در ترم ۱ خطاها را بی‌صدا قورت می‌داد؟ JavaScript برعکس است: فریاد می‌زند و همان‌جا می‌ایستد — و این خبرِ خوبی است، چون همیشه می‌گوید کجا را نگاه کنی. یک نکتهٔ آزمایشگاه: آنجا به‌جای script.js:2 چیزی مثل about:srcdoc با شماره‌خطِ متفاوت می‌بینی — آزمایشگاه هر سه تب را در یک سندِ پیش‌نمایش می‌چیند؛ خطا را از روی متنِ پیام بشناس، نه از فایل و شماره‌خط.

همین چرخهٔ کوچک — خراب کن، پیام را بخوان، درست کن — مهم‌ترین عادتِ این ترم است؛ و برای خواندنِ پیام‌ها یک همراه هم داری:

🤖 با AI: هر وقت پیام خطایی دیدی که نفهمیدی، عینِ متنش را به دستیار AI ات بده و بپرس: «این خطا یعنی چه و کجای کدم را نگاه کنم؟» جوابش را با شمارهٔ خطی که خودِ console گفته چک کن — و خطا را فقط وقتی رفع‌شده بدان که پیام واقعاً از console رفته باشد.

کد کاملِ این فصل#

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>اولین اسکریپت من</title>
  </head>
  <body>
    <main>
      <h1>اولین اسکریپت من</h1>
      <p>ساختار از HTML، ظاهر از CSS — و از امروز، رفتار از JavaScript.</p>
    </main>

    <script>
      document.write("سلام! من JavaScript هستم.");
    </script>
    <script src="script.js"></script>
  </body>
</html>

و script.js:

// script.js
console.log("سلام تاروپود!");
console.log(2 + 3);

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
JavaScript	جاوااسکریپت	زبانِ رفتارِ صفحه؛ ضلع سوم در کنار HTML و CSS
`<script>`	اسکریپت	تگی که کد JavaScript را به صفحه وصل می‌کند
console	کنسول	صفحهٔ گفت‌وگوی مرورگر با برنامه‌نویس؛ با F12 باز می‌شود
`console.log`	کنسول-لاگ	دستورِ چاپ‌کردن یک پیام در console
ReferenceError	رفرنس‌اِرور	خطای «اسمی را صدا زدی که تعریف نشده»

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

الان JavaScript برایت حرف می‌زند، ولی هنوز حافظه ندارد. فصل بعد متغیر می‌سازی: جعبه‌هایی اسم‌دار که مقدار نگه می‌دارند — با let و const — و یاد می‌گیری متن و عدد و درست/غلط برای JavaScript سه جنسِ متفاوت‌اند.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.