JavaScript چیست؟ آموزش کامل و جامع JavaScript

// یک تابع ساده برای سلام کردن
function sayHello(name) {
    return `سلام ${name}!`;
}

// استفاده از تابع
console.log(sayHello('کاربر عزیز'));

// کار با DOM
document.getElementById('greeting').innerHTML = sayHello('دوست من');

// متغیرها
let name = 'علی';
const age = 25;

// عملگرها
let sum = 10 + 5;
let isAdult = age >= 18;

// ساختارهای کنترلی
if (isAdult) {
    console.log('شما بزرگسال هستید');
} else {
    console.log('شما کودک هستید');
}

// حلقه‌ها
for (let i = 0; i < 5; i++) {
    console.log(`شماره ${i}`);
}

// انواع داده اولیه
let text = 'متن';          // String
let number = 42;           // Number
let isTrue = true;         // Boolean
let nothing = null;        // Null
let undefined;             // Undefined
let bigNumber = 9007199254740991n; // BigInt

// انواع داده پیچیده
let array = [1, 2, 3];    // Array
let object = {            // Object
    name: 'علی',
    age: 25
};

// تابع معمولی
function multiply(a, b) {
    return a * b;
}

// تابع arrow
const add = (a, b) => a + b;

// تابع به عنوان پارامتر
function processNumbers(numbers, callback) {
    return numbers.map(callback);
}

// تابع سازنده
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        return `سلام، من ${this.name} هستم`;
    }
}

// تعریف کلاس در ES6
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        return `${this.name} صدا می‌کند`;
    }
}

// وراثت
class Dog extends Animal {
    speak() {
        return `${this.name} پارس می‌کند`;
    }
}

// استفاده از کلاس
const dog = new Dog('رکس');
console.log(dog.speak()); // رکس پارس می‌کند

// انتخاب المان‌ها
const element = document.getElementById('myId');
const elements = document.getElementsByClassName('myClass');
const query = document.querySelector('.myClass');

// تغییر محتوا
element.innerHTML = 'محتوای جدید';
element.textContent = 'متن جدید';

// تغییر استایل
element.style.color = 'red';
element.classList.add('newClass');

// ایجاد المان جدید
const newDiv = document.createElement('div');
newDiv.textContent = 'المان جدید';
document.body.appendChild(newDiv);

// افزودن Event Listener
document.getElementById('myButton').addEventListener('click', function(event) {
    alert('دکمه کلیک شد!');
});

// رویداد با arrow function
const handleSubmit = (event) => {
    event.preventDefault();
    console.log('فرم ارسال شد');
};

// رویدادهای موس
element.addEventListener('mouseover', () => {
    console.log('موس روی المان قرار گرفت');
});

// رویدادهای کیبورد
document.addEventListener('keydown', (event) => {
    console.log(`کلید ${event.key} فشرده شد`);
});

// Promise
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('عملیات موفق');
    }, 2000);
});

// async/await
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('خطا در دریافت اطلاعات:', error);
    }
}

// استفاده از fetch API
fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Destructuring
const { name, age } = person;
const [first, second] = array;

// Spread operator
const newArray = [...oldArray, newItem];
const newObject = { ...oldObject, newProp: value };

// Template literals
const message = `سلام ${name}!`;

// Default parameters
function greet(name = 'کاربر') {
    return `سلام ${name}`;
}

// Modules
import { function1 } from './module';
export const function2 = () => {};

// استفاده از console
console.log('نمایش پیام');
console.warn('هشدار');
console.error('خطا');
console.table([{name: 'علی', age: 25}, {name: 'مریم', age: 30}]);

// استفاده از debugger
function findError() {
    let x = 5;
    debugger; // اجرا متوقف می‌شود
    x = x + 5;
    return x;
}

// مدیریت خطاها
try {
    // کد مشکوک به خطا
    throw new Error('خطای سفارشی');
} catch (error) {
    console.error(error.message);
} finally {
    // کد نهایی
}

function createCounter() {
    let count = 0;
    return {
        increment() {
            count++;
            return count;
        },
        decrement() {
            count--;
            return count;
        },
        getCount() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2

// اجرای همزمان چند Promise
const promise1 = fetch('/api/data1');
const promise2 = fetch('/api/data2');

Promise.all([promise1, promise2])
    .then(([result1, result2]) => {
        console.log(result1, result2);
    })
    .catch(error => console.error('خطا در دریافت اطلاعات'));

// استفاده از async/await با Promise.race
async function getFirstResponse() {
    try {
        const result = await Promise.race([
            fetch('/api/fast'),
            fetch('/api/slow')
        ]);
        return await result.json();
    } catch (error) {
        console.error('خطا در دریافت اطلاعات');
    }
}

// استفاده از WeakMap برای جلوگیری از نشت حافظه
const cache = new WeakMap();

function heavyComputation(obj) {
    if (cache.has(obj)) {
        return cache.get(obj);
    }
    
    const result = // محاسبات سنگین
    cache.set(obj, result);
    return result;
}

// استفاده از DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `المان ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

// اعتبارسنجی ورودی
function validateInput(input) {
    return input.replace(/[<>]/g, '');
}

// استفاده از CSP
// در HTML
// 

// ذخیره‌سازی امن توکن
function saveToken(token) {
    sessionStorage.setItem('token', token);
}

// استفاده از httpOnly cookies
document.cookie = "session=123; httpOnly; secure";

// تابع مورد تست
function sum(a, b) {
    return a + b;
}

// تست‌ها
describe('sum function', () => {
    test('adds 1 + 2 to equal 3', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('adds -1 + 1 to equal 0', () => {
        expect(sum(-1, 1)).toBe(0);
    });
});