جاوااسکریپت (JavaScript) یک زبان برنامهنویسی سطح بالا، چندالگویی و شیءگرا است که
امروزه به عنوان قلب تپنده وب شناخته میشود. این زبان ابتدا برای پویاسازی صفحات وب ساخته شد،
اما امروزه با محیطهایی مانند Node.js در سمت سرور، موبایل و حتی دسکتاپ نیز استفاده میشود.
در این مقاله، تمام مباحث کلیدی جاوااسکریپت را از پایه تا سطح متوسط و پیشرفته
با مثالهای کاربردی پوشش میدهیم. همراه ما باشید.
💡نکته: برای اجرای کدها، میتوانید از کنسول مرورگر
(F12) یا محیطهایی مثل Node.js استفاده کنید.
🔀 متغیرها
در جاوااسکریپت برای تعریف متغیر از سه کلیدواژه var،
let و const استفاده میشود.
let و const از ES6 به بعد معرفی
شدند
و بهترین انتخاب برای کدنویسی مدرن هستند.
// تعریف متغیر با let (قابل تغییر)
let name = "محمد";
name = "علی"; // ✅ مجاز
// تعریف ثابت با const (غیرقابل تغییر)
const PI = 3.1415;
// PI = 3.14; // ❌ خطا
// var (قدیمی، استفاده نشود)
var old = "قدیمی";
const برای مقادیری که قرار نیست تغییر کنند و let برای متغیرهای قابل تغییر مناسب است.
🗄️ نوعهای داده
جاوااسکریپت دارای هشت نوع داده اصلی است: number، string، boolean، undefined، null، symbol، bigint و object. به غیر از object، بقیه نوعهای ابتدایی (Primitive) هستند.
// عدد، رشته، بولین
let age = 28;
let text = "جاوااسکریپت";
let isActive = true;
// undefined و null
let empty; // undefined
let emptyValue = null; // null
// شیء (object)
let person = {
firstName: "سارا",
lastName: "کریمی"
};
⚙️ توابع
توابع بلوکهای اصلی اجرایی در جاوااسکریپت هستند. میتوان آنها را به روشهای مختلف تعریف کرد:
// تابع عادی (Function Declaration)
function sum(a, b) {
return a + b;
}
// تابع به صورت عبارت (Function Expression)
const multiply = function(a, b) {
return a * b;
};
// تابع پیکانی (Arrow Function) — مدرن و مختصر
const divide = (a, b) => a / b;
console.log(sum(5, 3)); // 8
console.log(multiply(4, 2)); // 8
console.log(divide(10, 2)); // 5
⭐ توابع پیکانی (=>) برای کدنویسی تمیز
و
استفاده در متدهای آرایه بسیار محبوب هستند.
📋 اشیاء و آرایهها
اشیاء و آرایهها ساختارهای اصلی برای ذخیره دادههای پیچیده هستند.
// شیء (object)
let user = {
username: "ahmadi",
age: 32,
isAdmin: false,
greet() {
console.log("سلام " + this.username);
}
};
// آرایه (array)
let colors = ["قرمز", "سبز", "آبی"];
colors.push("زرد"); // اضافه کردن
console.log(colors[0]); // "قرمز"
// حلقه روی آرایه
colors.forEach((color, index) => {
console.log(`${index+1}: ${color}`);
});
📄 کار با DOM
با استفاده از DOM میتوانید عناصر صفحه را تغییر دهید، محتوا و استایل را بهصورت پویا مدیریت کنید.
// انتخاب عنصر با id
const title = document.getElementById("main-title");
if (title) title.textContent = "عنوان جدید";
// انتخاب با querySelector
const btn = document.querySelector(".btn");
if (btn) {
btn.addEventListener("click", () => {
alert("دکمه کلیک شد!");
});
}
// ایجاد عنصر جدید
const newDiv = document.createElement("div");
newDiv.innerHTML = "<p>این یک پاراگراف جدید است</p>";
document.body.appendChild(newDiv);
⚡ رویدادها
جاوااسکریپت با رویدادها (Events) کار میکند: کلیک، حرکت ماوس، فشار کلید و ...
