📚 راهنمای فایل‌های تمرین جاوااسکریپت

دانلود اسلایدها

📋 فهرست فایل‌های تمرین

• 1
  01-console-log.html
  آشنایی با console.log و نمایش انواع داده‌ها در کنسول
  مفاهیم: console.log, console.warn, console.error, console.table
  🔗 باز کردن فایل
  📋 کپی کد

  // چاپ ساده
  console.log("سلام دنیا!");
  
  // چاپ اعداد
  console.log(42);
  console.log(3.14);
  
  // چاپ چند مقدار
  console.log("نام:", "علی", "سن:", 25);

• 2
  02-variables.html
  کار با متغیرها و ثابت‌ها
  مفاهیم: let (قابل تغییر) و const (ثابت)
  🔗 باز کردن فایل
  📋 کپی کد

  // متغیر قابل تغییر
  let name = "علی";
  console.log(name);
  
  name = "رضا"; // تغییر مقدار
  console.log(name);
  
  // ثابت (غیرقابل تغییر)
  const PI = 3.14;
  console.log(PI);
  
  // PI = 3.15; // ❌ خطا!

• 3
  03-data-types.html
  انواع داده‌ها در جاوااسکریپت
  مفاهیم: String, Number, Boolean, Array, Object
  🔗 باز کردن فایل
  📋 کپی کد

  // String
  let text = "سلام";
  
  // Number
  let age = 25;
  
  // Boolean
  let isActive = true;
  
  // Array
  let colors = ["قرمز", "آبی", "سبز"];
  console.log(colors[0]); // قرمز
  
  // Object
  let user = {
      name: "علی",
      age: 25,
      city: "تهران"
  };
  console.log(user.name); // علی

• 4
  04-loops.html
  حلقه‌ها و تکرار دستورات
  مفاهیم: for loop, for...of, for...in, nested loops
  🔗 باز کردن فایل
  📋 کپی کد

  // حلقه ساده
  for (let i = 1; i <= 5; i++) {
      console.log(i);
  }
  
  // پیمایش آرایه
  let fruits = ["سیب", "موز", "پرتقال"];
  
  for (let fruit of fruits) {
      console.log(fruit);
  }
  
  // محاسبه مجموع
  let numbers = [10, 20, 30];
  let sum = 0;
  for (let num of numbers) {
      sum += num;
  }
  console.log("مجموع:", sum); // 60

• 5
  05-functions.html
  توابع و Arrow Functions
  مفاهیم: function declaration, arrow functions, parameters, return
  🔗 باز کردن فایل
  📋 کپی کد

  // تابع معمولی
  function greet(name) {
      return "سلام " + name;
  }
  
  let message = greet("علی");
  console.log(message);
  
  // Arrow Function
  const add = (a, b) => {
      return a + b;
  };
  
  // فرم کوتاه
  const multiply = (a, b) => a * b;
  
  console.log(add(5, 3));      // 8
  console.log(multiply(4, 2)); // 8

• 6
  06-promise-async.html
  عملیات ناهمزمان
  مفاهیم: Promise, async/await, try/catch, setTimeout
  🔗 باز کردن فایل
  📋 کپی کد

  // Promise
  const promise = new Promise((resolve) => {
      setTimeout(() => {
          resolve("انجام شد!");
      }, 2000);
  });
  
  promise.then(result => {
      console.log(result);
  });
  
  // async/await
  async function getData() {
      try {
          const result = await fetchData();
          console.log(result);
      } catch (error) {
          console.error(error);
      }
  }

• 7
  07-dom-interactive.html
  کار با DOM - دکمه‌ها و ورودی‌ها
  مفاهیم: addEventListener, getElementById, input, button, textContent
  🔗 باز کردن فایل
  📋 کپی کد

  // انتخاب عنصر
  const btn = document.getElementById("myButton");
  
  // گوش دادن به کلیک
  btn.addEventListener("click", function() {
      console.log("دکمه کلیک شد!");
  });
  
  // تغییر محتوا
  const elem = document.getElementById("output");
  elem.textContent = "متن جدید";
  
  // خواندن مقدار input
  const input = document.getElementById("nameInput");
  const value = input.value;

• 8
  08-dom-advanced.html
  DOM پیشرفته
  مفاهیم: querySelectorAll, createElement, form validation, dynamic tables
  🔗 باز کردن فایل
  📋 کپی کد

  // انتخاب چند عنصر
  const buttons = document.querySelectorAll(".btn");
  buttons.forEach(btn => {
      btn.addEventListener("click", () => {
          console.log("کلیک شد");
      });
  });
  
  // ساخت عنصر جدید
  const div = document.createElement("div");
  div.textContent = "متن جدید";
  div.className = "card";
  document.body.appendChild(div);
  
  // کار با فرم
  const form = document.getElementById("myForm");
  form.addEventListener("submit", (e) => {
      e.preventDefault();
      console.log("فرم ارسال شد");
  });

• 9
  09-complete-project.html
  پروژه جامع: سیستم مدیریت دانشجویان
  ترکیب همه مفاهیم در یک پروژه واقعی
  🔗 باز کردن فایل
  📋 کپی کد

  // آرایه دانشجویان
  let students = [];
  
  // افزودن دانشجو
  function addStudent(name, grade, major) {
      const student = {
          id: Date.now(),
          name: name,
          grade: grade,
          major: major
      };
      students.push(student);
      displayStudents();
  }
  
  // نمایش دانشجویان
  function displayStudents() {
      const list = document.getElementById("list");
      list.innerHTML = "";
      
      students.forEach(student => {
          const card = createCard(student);
          list.appendChild(card);
      });
  }

🎯 مسیر پیشنهادی یادگیری:

1. مرحله اول (Console): فایل‌های 1 تا 6 را با دقت تمرین کنید
2. مرحله دوم (DOM): فایل‌های 7 و 8 را مطالعه کنید
3. مرحله سوم (پروژه): فایل 9 را بررسی کرده و سعی کنید آن را گسترش دهید
4. تمرین شخصی: پروژه‌های کوچک خودتان را بسازید