جاوااسکریپت زبانیه که سایتت رو تعاملی می‌کنه؛ از تغییر متن تا عوض کردن رنگ دکمه. تو این مقاله با یه فایل HTML و یه فایل .js، اولین اسکریپتت رو می‌نویسی که با کلیک دکمه، پیام نشون می‌ده. مفاهیمی مثل متغیرها (let)، توابع و رویدادها رو یاد می‌گیری و با یه پروژه ساده، رنگ دکمه رو تغییر می‌دی. جاوااسکریپت ساده‌ست و با تمرین، می‌تونی سایتت رو زنده کنی. دست به کد بزن و از همین امروز شروع کن!

 

اگه HTML اسکلت سایتت رو ساخته و CSS بهش رنگ و لعاب داده، حالا وقتشه که یه کم زندگی بهش بدی! جاوااسکریپت (یا همون JS) زبانیه که سایتت رو تعاملی می‌کنه؛ از دکمه‌هایی که کلیک می‌شن تا فرم‌هایی که جواب می‌دن. تو این مقاله قراره از صفر با جاوااسکریپت آشنا بشی، بفهمی چطور کار می‌کنه و اولین اسکریپتت رو بنویسی. دست به کد بزنیم و شروع کنیم!

جاوااسکریپت چیه؟

جاوااسکریپت یه زبان برنامه‌نویسیه که تو مرورگر کار می‌کنه و بهت اجازه می‌ده سایتت رو پویا کنی. مثلاً می‌تونی با JS یه پیام خوش‌آمدگویی نشون بدی، یه دکمه بسازی که رنگ عوض کنه یا حتی یه بازی ساده درست کنی. برخلاف HTML و CSS که بیشتر ساختار و ظاهر رو کنترل می‌کنن، جاوااسکریپت رفتار سایت رو مدیریت می‌کنه.

این زبان تو دهه ۹۰ ساخته شد و الان یکی از مهم‌ترین ابزارهای هر طراح وب و برنامه‌نویسه. جالب اینجاست که با JS می‌تونی هم تو مرورگر کار کنی (Front-end) و هم با Node.js سمت سرور رو بسازی (Back-end).

چرا باید جاوااسکریپت یاد بگیری؟

  • تعامل: سایتت رو از حالت ثابت به یه تجربه زنده تبدیل می‌کنه.
  • تقاضای بالا: شرکت‌ها دنبال کسایی هستن که JS بلد باشن.
  • سادگی برای شروع: برای مبتدی‌ها قابل درکه و سریع نتیجه می‌گیرن.
  • همه‌جا هست: از سایت‌های کوچک تا غول‌هایی مثل گوگل ازش استفاده می‌کنن.

چطور شروع کنیم؟

برای کار با جاوااسکریپت به هیچ نرم‌افزار خاصی نیاز نداری. یه فایل HTML، یه ویرایشگر متن (مثل VS Code یا حتی Notepad) و یه مرورگر کافیه. JS رو می‌تونی به سه روش به HTML وصل کنی:

  1. داخل خط (Inline): مستقیم تو تگ HTML با onclick یا مشابه.
  2. داخلی (Internal): تو تگ <script> توی فایل HTML.
  3. خارجی (External): یه فایل .js جدا بسازی و لینک کنی.

ما با روش خارجی می‌ریم جلو چون تمیزتره و برای پروژه‌های بزرگ بهتر جواب می‌ده.

قدم ۱: فایل HTML رو آماده کن

یه فایل به اسم index.html بساز و این کد رو توش بنویس:

<!DOCTYPE html>
<html>
<head>
    <title>اولین اسکریپت من</title>
</head>
<body>
    <h1>به جاوااسکریپت خوش اومدی!</h1>
    <button id="myButton">منو کلیک کن</button>
    <p id="message"></p>
    <script src="script.js"></script>
</body>
</html>
قدم ۲: فایل جاوااسکریپت رو بساز

یه فایل به اسم script.js تو همون پوشه بساز و این کد رو توش بنویس:

// دکمه رو پیدا می‌کنیم
let button = document.getElementById("myButton");
let message = document.getElementById("message");

// وقتی دکمه کلیک می‌شه، این اتفاق می‌افته
button.addEventListener("click", function() {
    message.textContent = "تبریک! اولین اسکریپتت کار کرد!";
});
قدم ۳: تست کن

فایل index.html رو تو مرورگر باز کن. دکمه رو کلیک کن؛ می‌بینی که زیرش یه پیام ظاهر می‌شه. همین! اولین اسکریپتت رو نوشتی.

این کدها چیکار می‌کنن؟

  • document.getElementById: یه عنصر رو با آی‌دی‌ش پیدا می‌کنه (مثل myButton).
  • addEventListener: می‌گه وقتی دکمه کلیک شد، یه کاری انجام بده.
  • textContent: متن داخل پاراگراف رو عوض می‌کنه.

مفاهیم پایه جاوااسکریپت

بیایم چند تا مفهوم اصلی رو که تو این اسکریپت استفاده کردیم مرور کنیم:

۱. متغیرها (Variables)

متغیرها مثل جعبه‌هایی هستن که اطلاعات رو نگه می‌دارن. تو JS با let، const یا var تعریف می‌شن:

let name = "علی";
const age = 25;

let برای چیزاییه که ممکنه عوض بشن، const برای ثابت‌ها.

۲. توابع (Functions)

تابع یه سری دستوره که می‌تونی هر وقت بخوای صداش کنی:

function sayHello() {
    alert("سلام دنیا!");
}
sayHello(); // این خط تابع رو اجرا می‌کنه
۳. رویدادها (Events)

رویدادها مثل کلیک کردن، حرکت ماوس یا تایپ کردنن که JS بهشون واکنش نشون می‌ده:

button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "red";
});

اینجا وقتی ماوس رو دکمه می‌ره، رنگش قرمز می‌شه.

یه پروژه عملی: تغییر رنگ دکمه

بیایم یه اسکریپت بسازیم که رنگ دکمه رو با هر کلیک عوض کنه.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تغییر رنگ</title>
</head>
<body>
    <h1>رنگ دکمه رو عوض کن</h1>
    <button id="colorButton">کلیک کن</button>
    <script src="script.js"></script>
</body>
</html>
JS (فایل script.js):
let button = document.getElementById("colorButton");
let colors = ["red", "blue", "green", "yellow"];
let index = 0;

button.addEventListener("click", function() {
    button.style.backgroundColor = colors[index];
    index = (index + 1) % colors.length; // چرخش بین رنگ‌ها
});

 

این کد یه آرایه از رنگ‌ها داره و با هر کلیک، رنگ دکمه رو عوض می‌کنه. % باعث می‌شه وقتی به آخر آرایه رسید، برگرده به اول.

ابزارهای جاوااسکریپت برای مبتدی‌ها

  • کنسول مرورگر: تو DevTools (F12) می‌تونی با console.log("تست") چیزا رو تست کنی.
  • Alert: پیام ساده نشون می‌ده: alert("سلام");.
  • Prompt: از کاربر ورودی می‌گیره: let name = prompt("اسمت چیه؟");.

مشکلات رایج و راه‌حل‌ها

  • اسکریپت کار نمی‌کنه: چک کن فایل .js درست لینک شده باشه و اسم‌ها درست باشن.
  • خطای کنسول: تو DevTools خطاها رو ببین و اسم متغیرها یا تگ‌ها رو درست کن.
  • لینک قبل از لود: <script> رو آخر <body> بذار تا HTML اول لود بشه.

حالا چی یاد بگیری؟

بعد از این مقاله، می‌تونی سراغ اینا بری:

  • کار با شرط‌ها (if) و حلقه‌ها (for).
  • تغییر محتوای صفحه با DOM.
  • ساخت انیمیشن‌های ساده.

حرف آخر

جاوااسکریپت مثل یه جادو تو دستته؛ با چند خط کد می‌تونی سایتت رو زنده کنی. از همین اسکریپت ساده شروع کن، تست کن و کم‌کم چیزای جدید اضافه کن. تو "دست به کد" کنارتیم تا قدم به قدم حرفه‌ای‌تر بشی. سوالی داری؟ تو کامنت‌ها بپرس و دست به کد بزن!