جاوااسکریپت چیست؟ شروع برنامه‌نویسی JavaScript از صفر

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

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

در یک صفحهٔ ساده، HTML ساختار را مشخص می‌کند و CSS ظاهر را تغییر می‌دهد. JavaScript می‌تواند پس از یک رویداد، داده را بخواند و نتیجه‌ای تازه نمایش دهد؛ مثلاً با انتخاب یک گزینه، قیمت نهایی را دوباره محاسبه کند. زبان JavaScript با Java یکسان نیست. همچنین مرورگر تنها محیط اجرای آن نیست: Node.js اجرای برنامه‌های JavaScript بیرون از مرورگر را ممکن می‌کند. بااین‌حال، امکانات هر محیط فرق دارند؛ دستور مربوط به صفحهٔ وب را نمی‌توان بدون آماده‌سازی همان محیط در Node اجرا کرد.

گام اول: اولین خروجی در Console

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

const lesson = "جاوااسکریپت";
const minutes = 20;
console.log(lesson);
console.log(minutes * 2);

خروجی دو پیام، ابتدا «جاوااسکریپت» و سپس عدد 40 است. کوتیشن به موتور زبان می‌گوید مقدار اول متن است؛ مقدار دوم عدد است و می‌توان روی آن محاسبه انجام داد. اگر همان تعریف const را دوباره در یک Console اجرا کنید، بعضی مرورگرها خطای تعریف مجدد نشان می‌دهند. صفحه را تازه کنید یا نمونهٔ بعد را در فایل مستقل اجرا کنید؛ این خطا به معنای خراب‌بودن اصل مثال نیست.

گام دوم: ساخت یک پروژهٔ دو فایلی

پوشه‌ای به نام js-start بسازید و دو فایل index.html و app.js را کنار هم قرار دهید. پسوند فایل باید دقیق باشد؛ فایلی به نام app.js.txt بارگذاری نمی‌شود. محتوای فایل اول را از باکس HTML بردارید. ویژگی defer باعث می‌شود اسکریپت پس از تحلیل 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>
  <script src="./app.js" defer></script>
</head>
<body>
  <h1 id="welcome">صفحه آماده است</h1>
  <p>متن عنوان با JavaScript تغییر می‌کند.</p>
</body>
</html>

const welcome = document.querySelector("#welcome");
if (welcome) {
  welcome.textContent = "به آموزش جاوااسکریپت خوش آمدید";
}
console.log("app.js loaded");

اکنون index.html را باز کنید. باید عنوان جدید را ببینید و در Console پیام app.js loaded ظاهر شود. نام document متعلق به محیط مرورگر است و querySelector یک عنصر را از صفحه پیدا می‌کند. فعلاً لازم نیست API مربوط به DOM را حفظ کنید؛ در درس اختصاصی DOM آن را کامل تمرین می‌کنیم. این مثال از textContent استفاده می‌کند تا محتوای عنوان به‌صورت متن درج شود.

وقتی برنامه اجرا نمی‌شود، چه چیزی را بررسی کنیم؟

• آیا app.js کنار index.html قرار گرفته و مقدار src دقیقاً با نام فایل برابر است؟
• آیا تغییرها ذخیره شده‌اند؟ پس از ذخیره، صفحه را تازه کنید.
• آیا Console خطای قرمز دارد؟ ابتدا اولین خطا و شمارهٔ فایل را بخوانید.
• آیا حروف بزرگ و کوچک یکسان‌اند؟ JavaScript به این تفاوت حساس است.
• آیا کد JavaScript را در app.js گذاشته‌اید؟ تگ script بخشی از فایل HTML است.

تمرین: یک کارت معرفی کوچک بسازید

عنوان صفحه را با نام یک دورهٔ دلخواه عوض کنید و زیر آن یک بند با شناسهٔ progress قرار دهید. سپس در app.js تعداد جلسه‌های گذرانده‌شده را در متغیری ذخیره کنید و جمله‌ای مانند «۲ جلسه را تمرین کرده‌ام» نمایش دهید. فعلاً نیازی به گرفتن ورودی کاربر نیست. معیار موفقیت، تغییر واقعی متن صفحه و نبود خطای Console است؛ صرفاً کپی‌کردن کد بدون مشاهدهٔ نتیجه، تمرین را کامل نمی‌کند.

// در HTML یک عنصر با id="progress" اضافه کنید.
const completedLessons = 2;
const progress = document.querySelector("#progress");
if (progress) {
  progress.textContent = completedLessons + " جلسه را تمرین کرده‌ام";
}

پرسش‌های کوتاه

آیا برای شروع به نصب Node.js نیاز داریم؟ خیر؛ نمونه‌های مرورگری این درس با مرورگر اجرا می‌شوند. Node.js را هنگام تمرین ابزارهای خط فرمان و آزمون نصب خواهیم کرد. آیا باید از روز اول React یاد بگیریم؟ در این مسیر ابتدا خود زبان و APIهای مرورگر را یاد می‌گیریم تا رفتار چارچوب‌ها بعداً قابل فهم باشد. از کجا بدانیم آمادهٔ درس بعد هستیم؟ وقتی بتوانید دو فایل را بسازید، خروجی را تغییر دهید و محل یک خطای ساده را پیدا کنید.

منابع انگلیسی و روش تدوین

• MDN — What is JavaScript?
• https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
• MDN — Add JavaScript to your web page
• https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page

این آموزش با نگارش آموزشی مستقل به فارسی، بر پایهٔ مستندات انگلیسی بالا تدوین شده است؛ مثال‌ها و تمرین‌ها برای این مجموعه طراحی شده‌اند. در ادامه، درس «متغیرها و انواع داده» را از فهرست دوره دنبال کنید.