آموزش JavaScript

مقدمه

جاوااسکریپت (JavaScript) یکی از مهم‌ترین و پرکاربردترین زبان‌های برنامه‌نویسی وب است. در کنار HTML که ساختار صفحات وب را تعریف می‌کند و CSS که مسئول استایل‌دهی است، جاوااسکریپت (JavaScript) وظیفه ایجاد منطق، تعامل و رفتار پویا در صفحات وب را بر عهده دارد.

چرا JavaScript مهم است؟

• تنها زبان برنامه‌نویسی بومی مرورگرهاست.
• امکان ایجاد صفحات وب داینامیک و تعاملی را فراهم می‌کند.
• پایه فریم‌ورک‌هایی مانند React، Vue و Angular است.
• در سمت سرور نیز با Node.js استفاده می‌شود.

تاریخچه مختصر JavaScript

JavaScript در سال ۱۹۹۵ توسط Brendan Eich توسعه داده شد. استاندارد رسمی این زبان ECMAScript نام دارد که نسخه‌های جدید آن قابلیت‌های بسیار پیشرفته‌ای را معرفی کرده‌اند.

نحوه استفاده از JavaScript در HTML

۱. استفاده درون‌خطی (Inline)

در این روش کد JavaScript مستقیماً داخل تگ HTML قرار می‌گیرد.

مثال:

<button onclick="alert('سلام!')">
    کلیک کن
</button>

نکات:

• برای پروژه‌های بزرگ توصیه نمی‌شود.
• نگهداری کد را دشوار می‌کند.

۲. استفاده داخلی (Internal)

کد JavaScript در تگ <script> داخل فایل HTML نوشته می‌شود.

مثال:

<script>
    console.log("Hello JavaScript");
</script>

۳. استفاده خارجی (External)

بهترین و استانداردترین روش استفاده از JavaScript است.

مثال فایل JavaScript:

console.log("فایل خارجی جاوااسکریپت");

اتصال به HTML:

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

متغیرها در JavaScript

برای ذخیره داده‌ها از متغیرها استفاده می‌شود.

تعریف متغیر با var، let و const

var name = "Ali";
let age = 25;
const country = "Iran";

تفاوت‌ها:

• var: قدیمی و دارای مشکل Scope
• let: قابل تغییر، بلاک‌اسکوپ
• const: مقدار ثابت

مثال:

let count = 1;
count = 2;

const pi = 3.14;
// pi = 3.15 → خطا

انواع داده‌ها (Data Types)

در JavaScript، داده‌ها به اشکال مختلفی ذخیره و پردازش می‌شوند که به این اشکال «نوع داده» گفته می‌شود. هر نوع داده رفتار، کاربرد و محدودیت‌های خاص خود را دارد. شناخت انواع داده‌ها به برنامه‌نویس کمک می‌کند تا اطلاعات را به شکل صحیح ذخیره کند، عملیات مناسب روی آن‌ها انجام دهد و از بروز خطاهای منطقی در برنامه جلوگیری کند. JavaScript زبانی با تایپ پویا (Dynamic Typing) است، یعنی نوع متغیرها به‌صورت خودکار بر اساس مقدار آن‌ها تعیین می‌شود.

• String
• Number
• Boolean
• Null
• Undefined
• Object
• Array

مثال:

let name = "Sara";
let score = 18;
let isAdmin = false;
let user = null;
let x;

عملگرها (Operators)

عملگرها ابزارهایی هستند که برای انجام محاسبات، مقایسه مقادیر و ترکیب داده‌ها در JavaScript استفاده می‌شوند. با کمک عملگرها می‌توان عملیات ریاضی انجام داد، مقادیر را با هم مقایسه کرد یا نتیجه یک عبارت منطقی را مشخص نمود. عملگرها نقش اساسی در منطق برنامه دارند و تقریباً در تمام بخش‌های کدنویسی مورد استفاده قرار می‌گیرند.

عملگرهای ریاضی

let a = 10;
let b = 3;

a + b;
a - b;
a * b;
a / b;
a % b;

عملگرهای مقایسه‌ای

5 == "5";   // true
5 === "5";  // false
5 != 6;
5 > 3;

شرط‌ها (Conditions)

شرط‌ها به برنامه این امکان را می‌دهند که بر اساس یک وضعیت خاص تصمیم‌گیری کند. در JavaScript، شرط‌ها تعیین می‌کنند که در صورت درست یا نادرست بودن یک عبارت، چه بخشی از کد اجرا شود. با استفاده از شرط‌ها می‌توان رفتار برنامه را پویا کرد و واکنش‌های متفاوتی نسبت به ورودی کاربر یا وضعیت داده‌ها نشان داد.

if / else

let age = 20;

if (age >= 18) {
    console.log("مجاز");
} else {
    console.log("غیرمجاز");
}

switch

let day = 1;

switch (day) {
    case 1:
        console.log("شنبه");
        break;
    case 2:
        console.log("یکشنبه");
        break;
    default:
        console.log("نامشخص");
}

حلقه‌ها (Loops)

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

حلقه for

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

حلقه while

let i = 1;
while (i <= 3) {
    console.log(i);
    i++;
}

---

توابع (Functions)

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

تابع معمولی

function sum(a, b) {
    return a + b;
}

sum(2, 3);

Arrow Function

const sum = (a, b) => a + b;

آرایه‌ها (Arrays)

آرایه‌ها ساختارهایی هستند که امکان ذخیره چند مقدار مرتبط را در یک متغیر فراهم می‌کنند. هر عنصر آرایه دارای یک اندیس (index) عددی است که از صفر شروع می‌شود. آرایه‌ها در JavaScript برای مدیریت لیست‌ها، مجموعه داده‌ها و عملیات گروهی روی اطلاعات کاربرد فراوانی دارند.

let fruits = ["سیب", "موز", "پرتقال"];

fruits.push("انگور");
fruits[0];

اشیاء (Objects)

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

let user = {
    name: "Ali",
    age: 30,
    isAdmin: true
};

console.log(user.name);

رویدادها (Events)

<button id="btn">کلیک</button>

<script>
document.getElementById("btn").addEventListener("click", function () {
    alert("کلیک شد!");
});
</script>

جمع‌بندی

جاوااسکریپت (JavaScript) هسته اصلی تعامل در وب است. با یادگیری مفاهیم پایه مانند متغیرها، شرط‌ها، حلقه‌ها، توابع و رویدادها، مسیر ورود به توسعه حرفه‌ای وب برای شما هموار می‌شود. پس از این مرحله می‌توانید سراغ DOM، Fetch API و فریم‌ورک‌های مدرن بروید.