در حال بارگذاری...

مقدمهٔ JavaScript

HTML اسکلت صفحه را می‌سازد و CSS ظاهرش را درست می‌کند. ویترین که آماده شد، هنوز ساکت است تا وقتی چیزی رخ بدهد: کلیک، مقدار تایپ‌شده، یا پیامی که بعد از بارگذاری ظاهر شود. JavaScript همان زبانی است که این کارها را در مرورگر انجام می‌دهد.

JavaScript چیست؟

JavaScript یک زبان برنامه‌نویسی است. شما دستور می‌نویسید و مرورگر همان دستورها را پشت‌سرهم اجرا می‌کند. این زبان نشانه‌گذاری نیست (آن کار HTML است) و stylesheet هم نیست (آن کار CSS است). کار روزمره‌اش روی وب، رفتار صفحه است: عوض کردن متن، واکنش به کاربر، حساب کردن یک مقدار، و در جلسات بعد — گرفتن داده از سرور.

زبان اجرا، نه سند

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

📊 صفحهٔ ساکن در برابر صفحه با JavaScript

وضعیت	بدون JavaScript	با یک اسکریپت کوتاه
صفحه تازه بار شده	تیتر همان است که در HTML نوشته‌اید	اسکریپت می‌تواند بعد از بارگذاری آن تیتر را عوض کند
بازدیدکننده روی دکمه کلیک می‌کند	خود دکمه واکنش مفیدی ندارد	جلسات بعد: با کلیک کد اجرا می‌شود
به جمع یا یک بررسی نیاز دارید	HTML حساب نمی‌کند؛ CSS تصمیم نمی‌گیرد	JavaScript حساب می‌کند و بعد نتیجه را نشان می‌دهد

سه لایه را در ذهن جدا نگه دارید و کارشان را قاطی نکنید. ساختار مال HTML است. ظاهر مال CSS است. این کورس لایهٔ سوم است: صفحه چه می‌کند.

اولین نگاه به یک دستور

هر دستور یک کار مشخص است. مثال پایین یک خط در کنسول توسعه‌دهندهٔ مرورگر می‌نویسد — ابزاری برای برنامه‌نویس، نه خود صفحهٔ دیده‌شده. در طول یادگیری زیاد با کنسول کار می‌کنید.

اولین دستور

javascript

console.log("Hello, JavaScript");

این دستور چه می‌کند

console.log تابع آمادهٔ مرورگر است که در کنسول چاپ می‌کند
متن داخل گیومه یک رشته است — یعنی دادهٔ متنی
نقطه‌ویرگول دستور را تمام می‌کند (در این کورس عادت امنی است)
هنوز چیزی روی صفحه عوض نمی‌شود؛ فقط یک لاگ است
ابزار توسعه‌دهندهٔ مرورگر را باز کنید (اغلب F12) و بعد از اجرای اسکریپت، تب Console را ببینید.

دیدن JavaScript روی صفحه

برای عوض کردن چیزی که بازدیدکننده می‌بیند، اسکریپت با صفحه حرف می‌زند. در مثال پایین پاراگراف HTML با یک جمله شروع می‌شود. یک <script> داخل همان فایل، آن پاراگراف را با id پیدا می‌کند و متنش را عوض می‌کند. جای دقیق اسکریپت را جلسهٔ بعد می‌گوییم؛ اینجا یک فایل کافی است.

HTML با اسکریپت داخل صفحه

html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

چه چیزی عوض شد

بدون اسکریپت، همان پاراگراف اولیه می‌ماند. با اسکریپت، مرورگر اول HTML را می‌خواند، بعد دستورها را اجرا می‌کند، بعد جملهٔ جدید را نشان می‌دهد. اسکلت سند همان است — فقط رفتار بعد از بارگذاری فرق کرده.

JavaScript حساب هم می‌کند

چون زبان برنامه‌نویسی است، با عدد و نام کار می‌کند، نه فقط با تگ. این مثال کوچک هیچ ربطی به رنگ یا تیتر ندارد. یک جمع می‌زند و در کنسول می‌نویسد. متغیر و نوع داده را بعداً دقیق می‌خوانید؛ اینجا فقط ببینید کد می‌تواند حساب کند.

یک حساب خیلی کوچک

javascript

const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

این کورس چیست (و چه نیست)

آموزش در مرورگر می‌ماند: مبانی زبان، DOM، رویداد، فرم، و fetch. با فریمورک، Node.js یا TypeScript شروع نمی‌کنیم. بدون این ابزارها هم می‌توانید اسکریپت مفید برای صفحه بنویسید. جلسات اختیاری انتهای مسیر اضافه‌اند؛ برای مسیر اصلی لازم نیستند.

خودتان امتحان کنید

فایلی به نام intro.html بسازید.
مثال HTML با اسکریپت را در آن بچسبانید، ذخیره کنید و در مرورگر باز کنید.
پاراگراف باید جملهٔ بازنویسی‌شده را نشان بدهد، نه متن اولیهٔ HTML.
رشتهٔ داخل textContent را به جملهٔ خودتان عوض کنید، ذخیره کنید و صفحه را تازه کنید.
اختیاری: داخل همان <script> خط console.log("Hello, JavaScript"); را اضافه کنید، ذخیره و تازه کنید، و همان خط را در تب Console پیدا کنید.

اشتباهات رایج

JavaScript را راه دیگری برای نوشتن تیتر و پاراگراف دانستن — ساختار را در HTML بگذارید؛ JS وقتی لازم شد آن را عوض یا زیاد کند
انتظار داشتن که CSS به کلیک واکنش بدهد یا جمع حساب کند — CSS ظاهر است؛ منطق برنامه را اجرا نمی‌کند
تنها نسخهٔ متن مهم را داخل اسکریپت گذاشتن تا اگر JS نباشد (یا مسدود شود) صفحه خالی بماند
قاطی کردن کنسول با صفحهٔ دیده‌شده: console.log تیتر روی صفحه را عوض نمی‌کند

خلاصه

JavaScript زبان برنامه‌نویسی است که در مرورگر به صفحه رفتار می‌دهد
HTML محتوا را ساختاربندی می‌کند؛ CSS ظاهر را؛ JavaScript می‌گوید صفحه چه کار کند
هر دستور یک کار است، مثل console.log("Hello, JavaScript");
اسکریپت داخل صفحه می‌تواند عنصر را پیدا کند و بعد از بارگذاری textContent را عوض کند
JavaScript مقدار هم حساب می‌کند، نه فقط تگ را لمس می‌کند
این کورس در مرورگر می‌ماند و فریمورک لازم ندارد
با ویرایش یک اسکریپت کوچک و تازه کردن مرورگر تمرین کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان