آموزش مقدماتی جاوااسکریپت (JavaScript) — راهنمای جامع برای شروع 🚀

جاوااسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی جهان است که به شما امکان می‌دهد صفحات وب را پویا و تعاملی کنید. در این آموزش، تمام مفاهیم پایه‌ای که برای شروع کار با جاوااسکریپت نیاز دارید را پوشش می‌دهیم.

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

جاوااسکریپت یک زبان برنامه‌نویسی سطح بالا، پویا و مفسری است که:

در مرورگر کاربر اجرا می‌شود (فرانت‌اند)
با Node.js می‌توان از آن برای بک‌اند نیز استفاده کرد
به صفحات وب تعاملی بودن می‌بخشد

⚙️ راه‌اندازی محیط توسعه

برای شروع به چیزهای زیادی نیاز ندارید:

یک مرورگر مدرن (Chrome, Firefox)
یک ویرایشگر کد (VS Code, Sublime Text)
کنسول توسعه‌دهنده مرورگر (با F12 قابل دسترسی است)

📜 اولین برنامه جاوااسکریپت شما


console.log("Hello World!");

این کد ساده عبارت "Hello World!" را در کنسول مرورگر نمایش می‌دهد.

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

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

برای ذخیره اطلاعات استفاده می‌شوند:


let name = "Ali";
const age = 25;
var isActive = true;

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

اعداد (Number): let score = 100;
رشته‌ها (String): let message = "Welcome";
بولین (Boolean): let isLogged = true;
آرایه (Array): let colors = ["red", "green", "blue"];
شیء (Object): let user = {name: "Ali", age: 25};

3. عملگرها (Operators)


let x = 10;
let y = 5;

console.log(x + y); // جمع
console.log(x > y); // مقایسه
console.log(x === 10); // تساوی

4. ساختارهای کنترلی

شرط if:


if (age >= 18) {
    console.log("بزرگسال");
} else {
    console.log("نوجوان");
}

حلقه for:


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

🛠️ کار با DOM (مدل شیءگرای سند)

جاوااسکریپت می‌تواند عناصر HTML را تغییر دهد:


document.getElementById("demo").innerHTML = "متن جدید";

💡 پروژه عملی ساده: ماشین حساب


<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="calculate()">محاسبه جمع</button>

<script>
function calculate() {
    let n1 = document.getElementById("num1").value;
    let n2 = document.getElementById("num2").value;
    alert(Number(n1) + Number(n2));
}
</script>