آموزش جاوا اسکریپت در ۳۰ دقیقه به زبان ساده برای مبتدیان

آموزش جاوا اسکریپت در ۳۰ دقیقه به زبان ساده برای مبتدیان

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

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

جاوا اسکریپت یه زبان برنامه‌نویسی همه‌فن‌حریفه که بیشتر در صفحات وب استفاده می‌شه. وقتی وارد یه وبسایت می‌شید، ممکنه متوجه بشید که بعضی چیزها در اون صفحه فقط با کلیک یا حرکات موس شما تغییر می‌کنن؛ اینجا دقیقاً جاوا اسکریپت کارشو انجام می‌ده.

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

  • اضافه کردن تعامل به صفحات وب: مثل کلیک کردن روی دکمه‌ها یا باز شدن پنجره‌های پاپ‌آپ.
  • تغییر محتوا یا استایل یک وبسایت: مثلا تغییر رنگ یه متن بعد از کلیک رویش.
  • مدیریت داده‌ها: اعتبارسنجی فرم‌ها یا ذخیره‌ی اطلاعات کاربران.
  • ایجاد گیم‌ها و انیمیشن‌ها که در مرورگر اجرا می‌شوند.

پیش‌نیازهای یادگیری جاوا اسکریپت

نیازی نیست که قبلاً برنامه‌نویسی کرده باشید، اما بهتره چیزی از HTML و CSS بدونید. چرا؟ چون جاوا اسکریپت خیلی خوب با این دو زبان کار می‌کنه و معمولاً در کنار اونها استفاده می‌شه. مثلاً:

  • HTML مثل اسکلت یه ساختمونه.
  • CSS ظاهر و زیبایی ساختمان رو درست می‌کنه.
  • جاوا اسکریپت عملکرد ساختمان رو بهش اضافه می‌کنه؛ مثلاً یه دکمه‌ی روشن/خاموش برای چراغ یا آسانسور!

🛠 ابزار موردنیاز برای شروع

قبل از اینکه وارد برنامه‌نویسی بشیم، به دو ابزار نیاز داریم:

  1. یک مرورگر: مرورگری مثل Google Chrome یا Firefox. اینجا کد جاوا اسکریپت‌تون اجرا میشه.
  2. یک ویرایشگر کد: نرم‌افزاری مثل Visual Studio Code که برای نوشتن کد استفاده میشه.

حالا همه چیز آماده است. بیایم شروع کنیم به یادگیری مفاهیم پایه جاوا اسکریپت! 😊

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

همونطور که قبلاً توضیح دادم، متغیرها روش‌هایی برای ذخیره داده‌ها هستند. مقدار داخل متغیرها می‌تونه بعداً تغییر کنه یا ثابت بمونه، بسته به نوع متغیری که ازش استفاده می‌کنید. در جاوا اسکریپت، متغیرها با سه روش تعریف می‌شن:

تفاوت بین let، const و var

در جاوا اسکریپت، از سه کلمه کلیدی برای تعریف متغیرها استفاده می‌شه:

  • let: برای متغیرهایی که مقدارشون ممکنه تغییر کنه.
  • const: برای متغیرهایی که مقدارشون ثابت هست و قابل تغییر نیست.
  • var: روش قدیمی‌تر برای تعریف متغیرها که در نسخه‌های جدید جاوا اسکریپت کمتر استفاده می‌شه.

var چیه؟

کلمه کلیدی var قبلاً خیلی استفاده می‌شده، اما مشکلاتی داره که باعث شده let و const جایگزین اون بشن. دلیلش اینه که var رفتارهایی داره که گاهی پیش‌بینی‌پذیر نیست و می‌تونه کد رو پیچیده کنه. مثلاً:

  • var در کل اسکوپ (Scope) تابع تعریف می‌شه، حتی اگر داخل یک بلوک (مثل یک if) باشد. اما let و const فقط محدود به همون بلوک‌اند.
  • اگر اشتباهاً متغیر رو بازنویسی کنید، var خطا نمی‌ده، اما اگر از let یا const استفاده کنید، کد شما ایمن‌تر عمل می‌کنه.

مثال برای var:

function example() {
  var x = 10;
  if (true) {
    var x = 20; // این مقدار متغیر اصلی رو تغییر می‌ده
    console.log("داخل if: " + x); // خروجی: 20
  }
  console.log("خارج if: " + x); // خروجی: 20
}
example();

اما با let:

function example() {
  let x = 10;
  if (true) {
    let x = 20; // این فقط درون بلوک `if` تعریف شده و بیرون تأثیری نداره
    console.log("داخل if: " + x); // خروجی: 20
  }
  console.log("خارج if: " + x); // خروجی: 10
}
example();

پیشنهاد: از let و const استفاده کنید!

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

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

مرور سریع انواع داده‌ها:

در جاوا اسکریپت، شما می‌تونید داده‌ها رو در انواع مختلف ذخیره کنید:

  1. عدد (Number): مثلا 123 یا 3.14.
  2. متن (String): مثلاً "سلام دنیا!".
  3. منطقی (Boolean): مقادیر درست (true) یا غلط (false).
  4. مقادیر خالی (Null): به معنی “هیچی”.
  5. مقادیر تعریف‌نشده (Undefined): یعنی متغیری که مقدار‌دهی نشده.
  6. اشیاء (Object): برای ذخیره داده‌های پیچیده.

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

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

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

  • + (جمع): دو عدد رو با هم جمع می‌کنه.
  • - (تفریق): عدد اول رو از عدد دوم کم می‌کنه.
  • * (ضرب): اعداد رو در هم ضرب می‌کنه.
  • / (تقسیم): عدد اول رو بر عدد دوم تقسیم می‌کنه.
  • % (باقیمانده): باقیمانده تقسیم عدد اول بر عدد دوم رو می‌ده.

مثال‌ها:

let a = 10;
let b = 3;

console.log(a + b); // جمع (خروجی: 13)
console.log(a % b); // باقیمانده (خروجی: 1)

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

  • <: مقایسه کنید که آیا مقدار اول بزرگ‌تر است.
  • >: مقایسه کنید که آیا مقدار اول کوچک‌تر است.
  • ===: بررسی کنید که آیا دو مقدار دقیقاً برابر هستند.

مثال:

let x = 5;
let y = 10;

console.log(x > y); // خروجی: false
console.log(x === 5); // خروجی: true

۴. عبارات شرطی (Conditional Statements)

فرض کنید:
می‌خواید به کسی که سنش بالای 18 ساله هست اجازه بدهید یه فرم رو پر کنه. برای این کار می‌تونید از دستورات if و else استفاده کنید.

مثال ساده:

let age = 20;

if (age > 18) {
  console.log("اجازه دارید ثبت‌نام کنید.");
} else {
  console.log("متأسفم، اجازه ندارید ثبت‌نام کنید.");
}

۵. حلقه‌ها (Loops)

چرا حلقه‌ها؟

فکر کنید می‌خواهید به کاربر اعداد 1 تا 10 رو چاپ کنید. به جای اینکه 10 بار کد بنویسید، می‌تونید از یه حلقه استفاده کنید.

حلقه for

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

توضیح آسان:

  • i = 1: متغیر i از 1 شروع می‌شه.
  • i <= 10: حلقه تا وقتی که i کمتر یا برابر 10 هست، ادامه پیدا می‌کنه.
  • i++: هر بار مقدار i رو یک واحد زیاد می‌کنه.

۶. توابع (Functions)

توابع به شما این امکان رو می‌دهند که کدهای تکراری رو در قالبی مرتب بنویسید و هر بار که نیاز داشتید، اون‌ها رو فراخوانی کنید.

تعریف تابع

function greet(name) {
  console.log("سلام " + name + "!");
}

فراخوانی تابع

greet("علی"); // خروجی: سلام علی!
greet("مریم"); // خروجی: سلام مریم!

۷. آرایه‌ها (Arrays)

آرایه‌ها برای ذخیره مجموعه‌ای از داده‌ها در یک متغیر واحد استفاده می‌شن. مثلاً می‌تونید یه لیست از اسامی یا اعداد داشته باشید.

تعریف یک آرایه

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

console.log(fruits[0]); // خروجی: سیب
console.log(fruits.length); // طول آرایه: 3

متدهای آرایه

  • push: اضافه کردن آیتم به انتهای آرایه.
  • pop: حذف آخرین آیتم آرایه.

۸. اشیاء (Objects)

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

مثال:

let person = {
  name: "علی",
  age: 25,
  isStudent: true
};

console.log(person.name); // خروجی: علی
console.log(person["age"]); // خروجی: 25

متدها در اشیاء (Methods)

متد یعنی یک تابع که به‌عنوان یکی از ویژگی‌های شیء تعریف‌ شده.
به عبارتی، متد مثل یک قابلیت خاص هست که برای همون شیء کار می‌کنه. شما می‌تونید از متدها برای انجام کارهای خاص یا تغییر داده‌های شیء استفاده کنید.

تعریف متد در یک شیء

بیایید یه متد به شیء person اضافه کنیم که اسم شخص رو به‌همراه یه پیام خوشامدگویی در کنسول چاپ کنه:

let person = {
  name: "علی",
  age: 30,
  isStudent: false,

  // تعریف متد
  greet: function() {
    console.log("سلام، اسم من " + this.name + " است!");
  }
};

// فراخوانی متد
person.greet(); // خروجی: سلام، اسم من علی است!

توضیح کد:

  • متد greet به‌عنوان یکی از خصوصیات شیء تعریف شده.
  • از کلمه کلیدی this استفاده‌شده. this به شیء فعلی اشاره می‌کنه (در اینجا person).
  • وقتی متد رو فراخوانی می‌کنید، در واقع دارید اون دستور خاص رو اجرا می‌کنید.

چند متد در یک شیء

ما می‌تونیم هر تعداد متد که بخوایم به یک شیء اضافه کنیم. برای مثال، شیء person رو کامل‌تر می‌کنیم:

let person = {
  name: "علی",
  age: 30,
  isStudent: false,

  greet: function() {
    console.log("سلام، اسم من " + this.name + " است!");
  },

  increaseAge: function() {
    this.age += 1; // سن رو یک سال زیاد می‌کنیم
    console.log("سن فعلی: " + this.age);
  }
};

// فراخوانی متدها
person.greet();          // خروجی: سلام، اسم من علی است!
person.increaseAge();    // خروجی: سن فعلی: 31

متدهای دستکاری داده‌های شیء

شما می‌تونید از متدها برای به‌روزرسانی مقدار کلیدهای شیء استفاده کنید. بیایید متدی تعریف کنیم که وضعیت دانشجویی (isStudent) رو تغییر بده:

let person = {
  name: "علی",
  age: 30,
  isStudent: false,

  // تغییر وضعیت دانشجویی
  toggleStudentStatus: function() {
    this.isStudent = !this.isStudent; // مقدار true به false و بالعکس تغییر می‌کنه
    console.log("وضعیت دانشجویی: " + this.isStudent);
  }
};

// قبل از تغییر
console.log(person.isStudent); // خروجی: false

// بعد از تغییر
person.toggleStudentStatus();  // خروجی: وضعیت دانشجویی: true
console.log(person.isStudent); // خروجی: true

چرا متدها مهم‌اند؟

متدها به شما امکان می‌دن:

  • کدهای مرتب‌تر و قابل‌فهم‌تری بنویسید.
  • منطق‌های مرتبط با هم رو گروه‌بندی کنید. مثلاً در شیء person، تمام عملکردهای مرتبط با شخص در یک مکان (در خود شیء) نگه داشته می‌شه.
  • تعامل بیشتر بین داده‌ها و توابع به وجود بیارید. مثلاً می‌تونید داده‌های شیء رو با استفاده از متد تغییر بدید یا پردازش کنید.

خلاصه: اشیاء با متدها (یک مثال جامع)

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

let car = {
  brand: "تویوتا",
  model: "کرولا",
  year: 2015,
  mileage: 120000, // کارکرد خودرو (کیلومتر)

  // متدی برای نمایش مشخصات خودرو
  showDetails: function() {
    console.log("ماشین: " + this.brand + " " + this.model + " (" + this.year + ")");
    console.log("کارکرد: " + this.mileage + " کیلومتر");
  },

  // متدی برای افزایش کارکرد خودرو
  increaseMileage: function(km) {
    this.mileage += km;
    console.log("کارکرد جدید: " + this.mileage + " کیلومتر");
  }
};

// استفاده از متدها
car.showDetails();             // نمایش مشخصات خودرو
car.increaseMileage(500);     // افزایش 500 کیلومتر
car.showDetails();             // نمایش مشخصات به‌روزرسانی‌شده

نتیجه‌گیری:

متدها یکی از بهترین چیزهایی هستند که اشیاء رو قدرتمند و کاربردی می‌کنن. شما می‌تونید هر منطقی که برای شیءتون نیاز دارید (مثل تغییر داده‌ها یا نمایش اطلاعات) در قالب متد داخل همون شیء بنویسید. با تمرین بیشتر و کار روی پروژه‌های واقعی، بهتر متوجه کاربرد متدها می‌شید.

۹. کار با DOM (Document Object Model)

DOM یکی از ابزارهای مهم برای تعامل با HTML و تغییر محتوای صفحات وب است. مثلاً می‌تونید محتوای یک پاراگراف رو تغییر بدید یا دکمه‌ای ایجاد کنید که با کلیک بر روی اون، صفحه تغییر کنه.

مثال:

<p id="welcome">سلام دنیا!</p>
<button onclick="changeText()">کلیک کنید</button>

<script>
  function changeText() {
    document.getElementById("welcome").innerText = "متن تغییر یافت!";
  }
</script>
محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *