🎓 Курси Пурра • 2024

Омӯзиши JavaScript
аз Сифр то Ҳирфаӣ

Ҳамаи мафҳумҳо, нозукиҳо ва усулҳои забони JavaScript ба забони тоҷикӣ бо мисолҳои зинда

14Мавзӯъ
100+Мисол
60+Машқ
∞Имконот

Муқаддима ба JavaScript

JavaScript — забони барномасозии дунявӣ аст. Ҳар вебсайти муосир аз он истифода мебарад. Биёед аз аввал омӯзем!

1995

Brendan Eich дар 10 рӯз JavaScript-ро эҷод кард. Аввал Mocha, баъд LiveScript, сипас JavaScript ном гирифт.

1997

ECMAScript — стандарти расмии JS ба вуҷуд омад.

2009

Node.js — JS дар сервер низ кор карданро оғоз кард.

2015

ES6 (ES2015) — бузургтарин навсозии JS. Тир қалам, Classes, Promises ва ғайра.

2024

JS дар ҳар ҷо: браузер, сервер, мобайл (React Native), Desktop (Electron).

🌐

Frontend

HTML, CSS бо JS якҷо кор мекунанд. Ҳаракат, анимация, ворид кардани маълумот.

🖥️

Backend (Node.js)

Серверҳо, маълумотгоҳҳо, API-ҳо бо Node.js сохта мешаванд.

📱

Mobile

React Native ва Expo бо JS барои iOS ва Android.

🎮

Бозиҳо

Canvas API, WebGL ва Three.js барои бозиҳо ва графика.

Якуми Кодатон

Ҳар як барномачи бо ин мисоли оддӣ шурӯъ мекунад:

JavaScript
// Ин сатри шарҳ аст — браузер онро иҷро намекунад

// Чопи паёми оддӣ
console.log("Салом, Ҷаҳон!");

// Тафсирот дар console.log
console.log(42);           // Рақам
console.log(true);        // Boolean
console.log([1, 2, 3]);    // Массив

// Ба саҳифа нишон додан
alert("Хуш омадед!");

// Аз корбар ворид гирифтан
let ном = prompt("Номатонро нависед:");
alert("Салом, " + ном + "!");
💡 Маслиҳат: JS-ро дар браузер имтиҳон кунед — F12 пахш кунед, "Console" ҷадвалро кушоед ва код нависед!

Чӣ гуна ба HTML пайваст мешавад?

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Сайти Ман</title>
</head>
<body>
  <h1>Салом!</h1>
  
  <!-- Дохилии JS -->
  <script>
    console.log("Ин дохилӣ аст");
  </script>
  
  <!-- Берунии JS -->
  <script src="script.js"></script>
</body>
</html>

🎯 Санҷиши Фаҳмиш — Боби 1

4 савол • Ҳар савол 1 хол

Тағйирёбандаҳо ва Намудҳои Маълумот

Тағйирёбандаҳо — зарфҳои нигоҳ доштани маълумот мебошанд. Дар JS се роҳи эълони онҳо вуҷуд дорад.

var, let, const — Фарқияти асосӣ

⚠️ var (кӯҳна)

  • Функсияи scope
  • Hoisting дорад
  • Дубора эълон шуда мешавад
  • Глобалӣ мешавад

✅ let (тавсия)

  • Блок scope
  • Дубора эълон намешавад
  • Тағйир ёфтан мумкин
  • Hoisting нест

🔒 const (доимӣ)

  • Блок scope
  • Тағйир ёфта намешавад
  • Бояд дарҳол арзиш гирад
  • Object/Array тағйир ёфта метавонад

📌 Қоида

  • Аввал const истифода кун
  • Агар тағйир лозим — let
  • var — ҳеҷ гоҳ!
  • Номи маъноӣ бигузор
JavaScript
// ✅ const — барои доимиҳо
const ПИ = 3.14159;
const ном = "Тоҳирхоҷа";
const соли_таваллуд = 2000;

// ✅ let — барои тағйирёбандаҳо
let синну_сол = 24;
синну_сол = 25; // Мумкин аст

let ҳисоб = 0;
ҳисоб += 1; // ҳисоб = 1

// ❌ const тағйир ёфта намешавад
// ПИ = 3; → TypeError!

// ✅ Якбора чанд тағйирёбанда
let x = 1, y = 2, z = 3;

// Арзиш надоштан
let натиҷа; // undefined
console.log(натиҷа); // → undefined

Намудҳои Маълумот (Data Types)

НамудМисолtypeofТавсиф
String"Салом""string"Матн — бо '' ё "" ё `` ифода мешавад
Number42, 3.14"number"Ҳар навъ рақам
Booleantrue, false"boolean"Танҳо ду арзиш
undefinedundefined"undefined"Арзиши тасмим нашуда
nullnull"object" ⚠️Қасдан холӣ кардан
SymbolSymbol('id')"symbol"Беназир (ES6)
BigInt9007199254740991n"bigint"Рақамҳои хеле калон
Object{}, [], function"object"/"function"Намудҳои мураккаб
JavaScript — Намудҳо
// String — матн
let s1 = 'Матни оддӣ';
let s2 = "Дубора нишонаи иқтибос";
let s3 = `Template literal: ${2 + 2}`; // "Template literal: 4"

// Number
let бутун = 42;
let онот = 3.14;
let манфӣ = -100;
let беохир = Infinity;
let нарақам = NaN; // Not a Number

// Boolean
let ростӣ = true;
let дурӯғ = false;

// Санҷиши намуд
console.log(typeof "Салом");  // "string"
console.log(typeof 42);       // "number"
console.log(typeof true);     // "boolean"
console.log(typeof null);     // "object" ← хатои маъруф!

Сатрҳо (Strings) — Методҳои асосӣ

JavaScript
const матн = "JavaScript омӯзиш";

// Дарозӣ
console.log(матн.length);         // 18

// Бузург/хурд кардан
console.log(матн.toUpperCase());  // "JAVASCRIPT ОМӮЗИШ"
console.log(матн.toLowerCase());  // "javascript омӯзиш"

// Ёфтан
console.log(матн.includes("Script"));  // true
console.log(матн.indexOf("омӯзиш"));  // 11
console.log(матн.startsWith("Java")); // true

// Буридан
console.log(матн.slice(0, 10));       // "JavaScript"
console.log(матн.substring(11));     // "омӯзиш"

// Иваз кардан
console.log(матн.replace("омӯзиш", "дарс")); // "JavaScript дарс"

// Тақсим кардан
console.log("a,b,c".split(","));     // ["a", "b", "c"]

// Тозакунии фосилаҳо
console.log("  салом  ".trim());       // "салом"

// Такрор
console.log("⭐".repeat(5));          // "⭐⭐⭐⭐⭐"

Табдили намуд (Type Conversion)

JavaScript
// String → Number
Number("42")       // 42
Number("3.14")     // 3.14
Number("салом")    // NaN
parseInt("42px")  // 42
parseFloat("3.14ab") // 3.14
+"42"             // 42 (кӯтоҳ роҳ)

// Number → String
String(42)         // "42"
(42).toString()   // "42"
(3.14159).toFixed(2) // "3.14"

// Boolean табдил
Boolean(0)        // false
Boolean("")       // false
Boolean(null)     // false
Boolean(undefined) // false
Boolean(42)       // true
Boolean("салом")  // true
🖥️ Консоли зинда — Тағйирёбандаҳоро санҷед
Натиҷа:

🎯 Санҷиш — Боби 2

5 савол

Операторҳо

Операторҳо барои анҷом додани амалҳо бо маълумот истифода мешаванд — ҳисобкунӣ, муқоиса, мантиқ ва ғайра.

Операторҳои Арифметикӣ

ОператорНомМисолНатиҷа
+Ҷамъ5 + 38
-Тарҳ10 - 46
*Зарб3 * 721
/Тақсим15 / 43.75
%Боқимонда17 % 52
**Дараҷа2 ** 101024
++Зиёд карданx++x+1
--Кам карданx--x-1

Операторҳои Муқоиса

JavaScript
// Операторҳои муқоиса — ҳамеша boolean бармегардонанд
console.log(5 > 3);    // true — калонтар
console.log(5 < 3);    // false — хурдтар
console.log(5 >= 5);   // true — калон ё баробар
console.log(5 <= 4);   // false — хурд ё баробар

// == ва === — фарқи асосӣ!
console.log(5 == "5");   // true ← намудро месанҷад? ХЕР
console.log(5 === "5"); // false ← намуд ва арзиш ҳарду
console.log(5 !== "5"); // true ← баробар нест

// Ҳамеша === истифода кунед!
console.log(null == undefined);  // true (хатарнок!)
console.log(null === undefined); // false (дуруст!)

Операторҳои Мантиқӣ

JavaScript
// && — ВА (AND) — ҳарду ҳақиқӣ бошад
console.log(true && true);   // true
console.log(true && false);  // false

let синнусол = 20;
let дорад = true;
if (синнусол >= 18 && дорад) {
  console.log("Иҷозат дода шуд");
}

// || — ЁМ (OR) — ҳадди ақал яке ҳақиқӣ
console.log(false || true);  // true
console.log(false || false); // false

// ! — НЕ (NOT) — инверсия
console.log(!true);   // false
console.log(!false);  // true
console.log(!!"матн"); // true (boolean ба табдил)

// ?? — Nullish Coalescing (ES2020)
let корбар = null;
console.log(корбар ?? "Меҳмон");  // "Меҳмон"

let ном2 = "Тоҳир";
console.log(ном2 ?? "Меҳмон");    // "Тоҳир"

// ?. — Optional Chaining (ES2020)
let объект = null;
console.log(объект?.ном);    // undefined (хато нест!)
console.log(объект?.метод()); // undefined

Операторҳои Присвоение

ОператорМаъноМисол
=Присвоениеx = 5
+=Ҷамъ ва присвоениеx += 3 → x = x + 3
-=Тарҳ ва присвоениеx -= 2 → x = x - 2
*=Зарб ва присвоениеx *= 4 → x = x * 4
/=Тақсим ва присвоениеx /= 2 → x = x / 2
**=Дараҷа ва присвоениеx **= 2 → x = x ** 2
??=Агар null/undefined бошадx ??= 5

Оператори Сешакла (Ternary)

JavaScript
// шарт ? агар_ҳақ : агар_дурӯғ
let синн = 20;
let ҳолат = синн >= 18 ? "Калонсол" : "Хурдсол";
console.log(ҳолат); // "Калонсол"

// Ҷои if-else кутоҳ
const хабар = синн > 60 ? "Пири"
            : синн > 35 ? "Миёнасол"
            : синн > 18 ? "Ҷавон"
            : "Кӯдак";
console.log(хабар); // "Ҷавон"

🎯 Санҷиш — Боби 3

4 савол

Шартҳо ва Интихоб

Шартҳо ба барнома имкон медиҳанд, ки дар вазъиятҳои гуногун қарорҳои гуногун қабул кунад.

if / else if / else

JavaScript
let баҳо = 85;

if (баҳо >= 90) {
  console.log("Аъло — 5");
} else if (баҳо >= 75) {
  console.log("Хуб — 4");   // ← ин иҷро мешавад
} else if (баҳо >= 60) {
  console.log("Қаноатбахш — 3");
} else {
  console.log("Нокомёб — 2");
}

// Мисоли воқеӣ: рӯзи ҳафта
const соат = new Date().getHours();

if (соат < 12) {
  console.log("Субҳ бахайр!");
} else if (соат < 17) {
  console.log("Рӯз бахайр!");
} else {
  console.log("Шом бахайр!");
}

switch — барои чанд вариант

JavaScript
const рӯз = new Date().getDay(); // 0=Яш, 1=Душ, ...

switch (рӯз) {
  case 0:
    console.log("Якшанбе");
    break;
  case 1:
    console.log("Душанбе");
    break;
  case 2:
    console.log("Сешанбе");
    break;
  case 3:
    console.log("Чоршанбе");
    break;
  case 4:
    console.log("Панҷшанбе");
    break;
  case 5:
    console.log("Ҷумъа");
    break;
  case 6:
    console.log("Шанбе");
    break;
  default:
    console.log("Номаълум");
}

// break бе: fall-through
switch (рӯз) {
  case 6:
  case 0:
    console.log("Истироҳат!"); // Шанбе ва Якшанбе ҳарду
    break;
  default:
    console.log("Рӯзи корӣ");
}

Truthy ва Falsy — Нозукии асосӣ

⚠️ Арзишҳои "Дурӯғ" (Falsy)

Дар JS ин арзишҳо ҳамеша false ҳисоб мешаванд:

false 0 -0 0n "" '' `` null undefined NaN

✅ Ҳама чизи дигар "Ҳақиқат" (Truthy) аст

"0" "false" [] {} 42 -1 function(){}

🎯 Санҷиш — Боби 4

4 савол

Давраҳо (Loops)

Давраҳо барои такрор иҷро кардани кодхо истифода мешаванд. Дар JS чанд навъ давра вуҷуд дорад.

🔁 for

Вақте миқдори такрор маълум аст. Бештар истифода мешавад.

🔁 while

То вақте ки шарт ҳақиқӣ аст давра давом мекунад.

🔁 for...of

Барои гузаштан аз Iterable (Array, String, Map, Set).

🔁 for...in

Барои гузаштан аз хосиятҳои Объект.

JavaScript — Ҳамаи давраҳо
// ===== for давра =====
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Ақибмаширав
for (let i = 10; i >= 1; i--) {
  console.log(`Ракета: ${i}...`);
}

// ===== while давра =====
let ҳисоб = 0;
while (ҳисоб < 3) {
  console.log("Ҳисоб: " + ҳисоб);
  ҳисоб++;
}

// ===== do...while — ҳадди ақал 1 бор =====
let n = 10;
do {
  console.log("n =", n); // 1 бор иҷро мешавад
  n++;
} while (n < 5);

// ===== for...of — Massivlar =====
const меваҳо = ["себ", "нок", "зардолу"];
for (const мева of меваҳо) {
  console.log(мева); // себ, нок, зардолу
}

// Индекс бо for...of
for (const [i, мева] of меваҳо.entries()) {
  console.log(i, мева); // 0 себ, 1 нок, ...
}

// ===== for...in — Объектҳо =====
const шахс = { ном: "Тоҳир", синн: 25, шаҳр: "Душанбе" };
for (const калид in шахс) {
  console.log(калид + ": " + шахс[калид]);
}

break ва continue

JavaScript
// break — давраро бас мекунад
for (let i = 0; i < 10; i++) {
  if (i === 5) break;  // 5 га расид — тамом!
  console.log(i); // 0, 1, 2, 3, 4
}

// continue — ин итерацияро мегузарад
for (let i = 0; i < 8; i++) {
  if (i % 2 === 0) continue; // Ҷуфтро гузар
  console.log(i); // 1, 3, 5, 7 — танҳо тоқ
}

// Давраи беохир (бодиққат!)
let к = 0;
while (true) {
  к++;
  if (к > 1000) break; // Ҳатман баромад лозим!
}
🖥️ Давраҳоро санҷед
Натиҷа:

🎯 Санҷиш — Боби 5

4 савол

Функсияҳо

Функсияҳо — блокҳои коде, ки борҳо иҷро шуда метавонанд. JS дар онҳо аз ҳама гуногунтар аст.

JavaScript — Навъҳои функсия
// ===== 1. Function Declaration =====
function салом(ном) {
  return `Салом, ${ном}!`;
}
console.log(салом("Тоҳир")); // "Салом, Тоҳир!"
// Hoisting мешавад — пеш аз эълон ҳам чақирида шуда метавонад

// ===== 2. Function Expression =====
const квадрат = function(x) {
  return x * x;
};
console.log(квадрат(5)); // 25

// ===== 3. Arrow Function (ES6) =====
const ҷамъ = (a, b) => a + b;  // Кӯтоҳ!
console.log(ҷамъ(3, 4));    // 7

const мурабба = x => x ** 2;     // 1 параметр — қавс ихтиёрӣ
const саломОддӣ = () => "Салом!"; // 0 параметр

const ҳисобкун = (a, b) => {
  const натиҷа = a * b + a;
  return натиҷа;          // {} бо — return лозим
};

// ===== 4. Default Parameters =====
function хуш_омад(ном = "Меҳмон", забон = "тоҷикӣ") {
  return `Хуш омадед, ${ном}! Забон: ${забон}`;
}
console.log(хуш_омад());           // "Хуш омадед, Меҳмон! Забон: тоҷикӣ"
console.log(хуш_омад("Тоҳир"));   // "Хуш омадед, Тоҳир! Забон: тоҷикӣ"

// ===== 5. Rest Parameters =====
function ҷамъ_ҳама(...рақамҳо) {
  return рақамҳо.reduce((ҷ, р) => ҷ + р, 0);
}
console.log(ҷамъ_ҳама(1, 2, 3, 4, 5)); // 15

Scope ва Closure

JavaScript
// ===== Scope =====
let глобалӣ = "Ман ҳама ҷо дастрасам";

function намоишгар() {
  let маҳаллӣ = "Ман танҳо дар функсия";
  console.log(глобалӣ);  // ✅ Дастрас
  console.log(маҳаллӣ); // ✅ Дастрас
}
// console.log(маҳаллӣ); // ❌ ReferenceError!

// ===== Closure — "ёд доштан" =====
function ҳисобсоз(оғоз = 0) {
  let ҳисоб = оғоз;  // ин тағйирёбанда "ёд" мемонад
  
  return {
    зиёд: () => ++ҳисоб,
    кам:  () => --ҳисоб,
    арзиш: () => ҳисоб
  };
}

const к = ҳисобсоз(10);
console.log(к.зиёд()); // 11
console.log(к.зиёд()); // 12
console.log(к.кам());  // 11
console.log(к.арзиш()); // 11

Функсияҳои Дараҷаи Баланд (Higher-Order)

JavaScript
// Функсияро ҳамчун аргумент дода метавонед
function татбиқкун(рақам, амалгар) {
  return амалгар(рақам);
}

console.log(татбиқкун(5, x => x * 2));  // 10
console.log(татбиқкун(5, x => x ** 2)); // 25

// Функсия функсия бармегардонад
function зарбсоз(омил) {
  return (рақам) => рақам * омил;
}

const икки_баробар = зарбсоз(2);
const се_баробар = зарбсоз(3);

console.log(икки_баробар(7));  // 14
console.log(се_баробар(7));   // 21

// Функсияҳои IIFE — дарҳол иҷро
(function() {
  console.log("Ман дарҳол иҷро шудам!");
})();

// Arrow IIFE
(() => console.log("Ман ҳам!"))();

🎯 Санҷиш — Боби 6

5 савол

Массивҳо (Arrays)

Массив — рӯйхати тартибнок. JS-да массивҳо хеле пурқудрат мебошанд.

JavaScript — Асосҳои Массив
// Эҷоди массив
const бо_нишон = [1, 2, 3, 4, 5];
const омехта = [1, "матн", true, null, {ном: "a"}];
const холӣ = [];

// Дастрасӣ ба элементҳо
console.log(бо_нишон[0]);  // 1 (аз нул шурӯъ)
console.log(бо_нишон[4]);  // 5
console.log(бо_нишон.at(-1)); // 5 (охирин — ES2022)

// Тағйир додан
бо_нишон[0] = 100;  // [100, 2, 3, 4, 5]

// Дарозӣ
console.log(бо_нишон.length); // 5

Усулҳои асосии Массив

JavaScript
let рақ = [3, 1, 4, 1, 5, 9, 2, 6];

// ===== Иловакунӣ/Тарккунӣ =====
рақ.push(10);        // Охир иловакун  → [..., 10]
рақ.pop();           // Охиринро олиқкун → 10 бармегардад
рақ.unshift(0);     // Аввал иловакун → [0, ...]
рақ.shift();         // Аввалинро олиқкун → 0 бармегардад

// ===== Ёфтан =====
console.log(рақ.includes(5));      // true
console.log(рақ.indexOf(1));       // 1 (аввалин)
console.log(рақ.lastIndexOf(1));   // 3 (охирин)
console.log(рақ.find(x => x > 5)); // 9 (аввалин >5)

// ===== Тартиб додан =====
[3,1,4,1,5].sort()              // [1, 1, 3, 4, 5]
[3,1,4].sort((a,b) => b-a)       // [4, 3, 1] — камшаванда
[...рақ].reverse()               // Ақибмашир

// ===== Ягонагӣ =====
[...new Set([1,2,2,3,3])]          // [1, 2, 3] — такрор нест

// ===== Буридан =====
рақ.slice(1, 4)   // нусха [1,4,1] — асл тағйир намеёбад
рақ.splice(1, 2)  // [1,4] — асл тағйир меёбад!
рақ.splice(1, 0, 99) // Индекс 1 ба 99 иловакун

Усулҳои Функсионалӣ — Сарватмандтарин қисм!

JavaScript — map, filter, reduce, forEach
const рақамҳо = [1, 2, 3, 4, 5, 6, 7, 8];

// map — ҳар элементро тағйир дод, массиви нав
const мураббаҳо = рақамҳо.map(x => x ** 2);
// [1, 4, 9, 16, 25, 36, 49, 64]

// filter — шартро гузаштаниҳо
const ҷуфтҳо = рақамҳо.filter(x => x % 2 === 0);
// [2, 4, 6, 8]

// reduce — ба як арзиш
const ҷамъ = рақамҳо.reduce((аккумулятор, ҷорӣ) => аккумулятор + ҷорӣ, 0);
// 36

// Максимум бо reduce
const макс = рақамҳо.reduce((м, х) => х > м ? х : м, -Infinity);
// 8

// forEach — паймоиш, чизе бар намегардонад
рақамҳо.forEach((рақ, инд) => {
  console.log(`[${инд}] = ${рақ}`);
});

// Занҷирбандӣ (chaining) — хеле зебо!
const натиҷа = [1,2,3,4,5,6,7,8,9,10]
  .filter(x => x % 2 === 0)  // Ҷуфтҳоро гир
  .map(x => x ** 2)           // Мурабба кун
  .reduce((ҷ, х) => ҷ + х, 0); // Ҷамъ кун
// 2²+4²+6²+8²+10² = 4+16+36+64+100 = 220

// some ва every
console.log(рақамҳо.some(x => x > 5));  // true — ҳадди ақал яке
console.log(рақамҳо.every(x => x > 0)); // true — ҳамаш

// flat ва flatMap
[1, [2, 3], [4, [5]]].flat()       // [1, 2, 3, 4, [5]]
[1, [2, 3], [4, [5]]].flat(2)    // [1, 2, 3, 4, 5]

🎯 Санҷиш — Боби 7

5 савол

Объектҳо (Objects)

Объект — маҷмӯи ҷуфтҳои "калид: арзиш". Асоси ҳамаи сохторҳои мураккаб дар JS.

JavaScript
// Эҷод
const омӯзгор = {
  ном: "Шодизода Тоҳирхоҷа",
  касб: "Омӯзгор",
  мактаб: "МТМУ13",
  ноҳия: "Кӯҳистони Мастчоҳ",
  фанҳо: ["Информатика", "Математика"],
  фаъол: true,
  // Метод — функсия дар объект
  муаррифӣ: function() {
    return `${this.ном} — ${this.мактаб}`;
  }
};

// Дастрасӣ
console.log(омӯзгор.ном);           // Нишонаи нуқта
console.log(омӯзгор["касб"]);       // Нишонаи қавс
console.log(омӯзгор.муаррифӣ()); // Метод чақирдан

// Иловакунӣ ва тағйир
омӯзгор.тел = "+992...";    // Нав
омӯзгор.фаъол = false;    // Тағйир
delete омӯзгор.тел;       // Тарк

// Санҷиш
console.log("ном" in омӯзгор);          // true
console.log(омӯзгор.hasOwnProperty("ном")); // true

Усулҳои Объект

JavaScript
const ш = { а: 1, б: 2, в: 3 };

// Калидҳо, Арзишҳо, Ҷуфтҳо
console.log(Object.keys(ш));    // ["а", "б", "в"]
console.log(Object.values(ш));  // [1, 2, 3]
console.log(Object.entries(ш)); // [["а",1],["б",2],["в",3]]

// Нусхабардорӣ ва якҷоясозӣ
const нусха = { ...ш };         // Spread — сатҳи 1
const нусха2 = Object.assign({}, ш);

const объ1 = { а: 1, б: 2 };
const объ2 = { б: 99, в: 3 };
const якҷо = { ...объ1, ...объ2 }; // {а:1, б:99, в:3}

// Чуқур нусха (deep clone)
const чуқур = JSON.parse(JSON.stringify(ш));

// structuredClone (муосир)
const хело_чуқур = structuredClone(ш);

// Ёрдамчии ҳисоб
const рақамҳо = { а: 5, б: 10, в: 15 };
const ҷамъ = Object.values(рақамҳо).reduce((ҷ, р) => ҷ + р, 0);
// 30

Destructuring — хеле муфид!

JavaScript
// ===== Объект Destructuring =====
const корбар = {
  ном: "Тоҳир",
  синн: 25,
  манзил: { шаҳр: "Душанбе", кӯча: "Рӯдакӣ" }
};

const { ном, синн } = корбар;
console.log(ном, синн); // "Тоҳир" 25

// Номи нав
const { ном: исм, синн: умр } = корбар;

// Арзиши пешфарз
const { ном, забон = "тоҷикӣ" } = корбар;

// Чуқур destructuring
const { манзил: { шаҳр } } = корбар;
console.log(шаҳр); // "Душанбе"

// ===== Массив Destructuring =====
const [аввал, дуюм, ...боқӣ] = [10, 20, 30, 40];
// аввал=10, дуюм=20, боқӣ=[30, 40]

// Ҷойгузинӣ
let [а, б] = [1, 2];
[а, б] = [б, а]; // а=2, б=1

// Дар параметри функсия
function намоиш({ ном, синн = 0 }) {
  console.log(`${ном} (${синн})`);
}
намоиш(корбар); // "Тоҳир (25)"

🎯 Санҷиш — Боби 8

4 савол

DOM — Модели Объекти Ҳуҷҷат

DOM ба JS имкон медиҳад, ки HTML-саҳифаро хонад, тағйир диҳад, иловакунад ва тарк кунад.

JavaScript — Интихоби элементҳо
// ===== Интихоби элементҳо =====

// Яке — аввалинро бармегардонад
const сарлавҳа  = document.querySelector("h1");
const тугма    = document.querySelector("#тугмаи_асосӣ");
const кард     = document.querySelector(".card");

// Якчанд — NodeList
const ҳамаи_тугмаҳо = document.querySelectorAll("button");
const ҳамаи_cardҳо  = document.querySelectorAll(".card");

// Кӯҳна аммо зуд
const бо_ид = document.getElementById("асосӣ");

// ===== Тағйири мӯҳтаво =====
сарлавҳа.textContent = "Матни нав";      // Матн
сарлавҳа.innerHTML   = "<b>Матни бӯронӣ</b>"; // HTML

// ===== Атрибутҳо =====
тугма.setAttribute("disabled", "");
тугма.removeAttribute("disabled");
тугма.getAttribute("class");

// ===== Стил =====
тугма.style.backgroundColor = "#f59e0b";
тугма.style.fontSize         = "18px";
тугма.style.display          = "none";

// ===== Классҳо =====
кард.classList.add("active");
кард.classList.remove("hidden");
кард.classList.toggle("open");       // Иловакун/тарк
кард.classList.contains("active");  // true/false
JavaScript — Эҷод ва Тарккунии Элементҳо
// ===== Элементи нав =====
const рӯйхат = document.createElement("ul");
рӯйхат.className = "мева-рӯйхат";

const меваҳо = ["Себ", "Нок", "Зардолу"];
меваҳо.forEach(мева => {
  const пункт = document.createElement("li");
  пункт.textContent = мева;
  рӯйхат.appendChild(пункт);
});

document.body.appendChild(рӯйхат);

// insertAdjacentHTML — зуд ва осон
document.body.insertAdjacentHTML("beforeend", `
  <div class="card">
    <h3>Карди нав</h3>
    <p>Мӯҳтавои карт</p>
  </div>
`);

// ===== Тарккунӣ =====
const эл = document.querySelector(".кӯҳна");
эл.remove();           // Мустақим тарк (муосир)

// ===== Пайдо кардани хешу табор =====
эл.parentElement     // Волид
эл.children          // Фарзандон
эл.nextElementSibling // Ягон хоҳар
эл.previousElementSibling // Яган бародар

🎯 Санҷиш — Боби 9

4 савол

Ҳодисаҳо (Events)

Ҳодисаҳо — амалҳои корбар ё браузер. Клик, клавиатура, формаҳо ва ғайра.

JavaScript
// ===== addEventListener — усули стандартӣ =====
const тугма = document.querySelector("#тугма");

тугма.addEventListener("click", function(ҳодиса) {
  console.log("Клик шуд!");
  console.log(ҳодиса.target);   // кадом элемент
  console.log(ҳодиса.type);     // "click"
});

// Кисло мезанад
document.addEventListener("keydown", (э) => {
  console.log("Тугма:", э.key);
  if (э.key === "Enter") {
    console.log("Enter пахш шуд!");
  }
  if (э.ctrlKey && э.key === "s") {
    э.preventDefault(); // браузерро боздор
    сақлакун();
  }
});

// Форма
const форма = document.querySelector("form");
форма.addEventListener("submit", (э) => {
  э.preventDefault(); // Саҳифа аз нав набор
  const маълумот = new FormData(форма);
  console.log(маълумот.get("ном"));
});

// ===== Рӯйхати ҳодисаҳои асосӣ =====
// Mouse: click, dblclick, mouseenter, mouseleave, mousemove, mousedown, mouseup
// Keyboard: keydown, keyup, keypress
// Form: submit, change, input, focus, blur, reset
// Window: load, DOMContentLoaded, resize, scroll, online, offline
// Touch: touchstart, touchend, touchmove

Event Delegation — Усули пешрафта

JavaScript
// ❌ Бад — ҳар тугмаи алоҳида
document.querySelectorAll(".тугма").forEach(т => {
  т.addEventListener("click", идоракунак);
});

// ✅ Хуб — Event Delegation (иқтисодӣ!)
document.querySelector(".контейнер").addEventListener("click", (э) => {
  if (э.target.classList.contains("тугма")) {
    console.log("Тугма:", э.target.textContent);
  }
});
// Ҳатто тугмаҳои минбаъда ҳам кор мекунанд!

// ===== Custom Events =====
const ҳодиса_нав = new CustomEvent("мактуб_омад", {
  detail: { аз: "Тоҳир", мавзӯъ: "Салом" }
});
document.dispatchEvent(ҳодиса_нав);

document.addEventListener("мактуб_омад", (э) => {
  console.log("Мактуб аз:", э.detail.аз);
});

🎯 Санҷиш — Боби 10

4 савол

Async/Await ва Promises

JavaScript яктасиравӣ (single-threaded) аст, аммо амалҳои тӯлонӣро ғайримутазамман (asynchronous) иҷро мекунад.

JavaScript — Callbacks, Promises, Async/Await
// ===== 1. Callback (кӯҳна) =====
setTimeout(() => {
  console.log("2 сония гузашт!");
}, 2000);

// Callback Hell — бад :(
дозволоМалумот((натиҷа1) => {
  коркардКун(натиҷа1, (натиҷа2) => {
    сақлаКун(натиҷа2, (натиҷа3) => {
      console.log("Тамом!"); // ← Пирамидаи вафот!
    });
  });
});

// ===== 2. Promise =====
const ваъда = new Promise((ҳал_кун, рад_кун) => {
  const муваффақ = Math.random() > 0.5;
  
  setTimeout(() => {
    if (муваффақ) ҳал_кун("Ком шуд!");
    else         рад_кун(new Error("Иштибоҳ рӯй дод"));
  }, 1000);
});

ваъда
  .then(натиҷа => console.log(натиҷа))
  .catch(хато => console.error(хато))
  .finally(() => console.log("Ҳамеша иҷро"));

// ===== 3. Async/Await (беҳтарин!) =====
async function гирМалумот(URL) {
  try {
    const ҷавоб  = await fetch(URL);
    const маълумот = await ҷавоб.json();
    console.log(маълумот);
    return маълумот;
  } catch (хато) {
    console.error("Хато:", хато);
  }
}

гирМалумот("https://jsonplaceholder.typicode.com/posts/1");

// Promise.all — ҳамзамон
const [корбар, паём] = await Promise.all([
  fetch("/api/user").then(r => r.json()),
  fetch("/api/messages").then(r => r.json())
]);

// Promise.allSettled — ҳатто хатоҳо
const натиҷаҳо = await Promise.allSettled([...]);

// Promise.race — аввалинаш
const зудтарин = await Promise.race([...]);

🎯 Санҷиш — Боби 11

4 савол

Барномасозии Ба Объект Нигаронидашуда (ООП)

ООП — усули ташкили код бо ёрии объектҳо, классҳо ва мерос.

JavaScript — Classes
// ===== Класс =====
class Шахс {
  // Constructor — дар эҷод чақирида мешавад
  constructor(ном, синн) {
    this.ном  = ном;
    this.синн = синн;
  }
  
  // Методи оддӣ
  муаррифӣ() {
    return `${this.ном}, ${this.синн} сола`;
  }
  
  // Getter — ҳамчун хосияти хониданӣ
  get синнусол_маълумот() {
    return this.синн >= 18 ? "Калонсол" : "Хурдсол";
  }
  
  // Setter
  set синн_нав(арзиш) {
    if (арзиш < 0) throw new Error("Синн манфӣ шуда наметавонад!");
    this.синн = арзиш;
  }
  
  // Методи статикӣ — бе объект чақирида мешавад
  static муқоиса(ш1, ш2) {
    return ш1.синн - ш2.синн;
  }
}

const омӯзгор = new Шахс("Тоҳир", 35);
console.log(омӯзгор.муаррифӣ());         // "Тоҳир, 35 сола"
console.log(омӯзгор.синнусол_маълумот);  // "Калонсол"

// ===== Мерос (Inheritance) =====
class Омӯзгор extends Шахс {
  constructor(ном, синн, фан) {
    super(ном, синн); // волидро чақир!
    this.фан      = фан;
    this.хонандагон = [];
  }
  
  хонандаИлова(хонанда) {
    this.хонандагон.push(хонанда);
  }
  
  // Бозтафсир (Override)
  муаррифӣ() {
    return `${super.муаррифӣ()} — Омӯзгори ${this.фан}`;
  }
}

const ш_тоҳир = new Омӯзгор("Тоҳирхоҷа", 35, "Информатика");
console.log(ш_тоҳир.муаррифӣ());
// "Тоҳирхоҷа, 35 сола — Омӯзгори Информатика"

console.log(ш_тоҳир instanceof Омӯзгор); // true
console.log(ш_тоҳир instanceof Шахс);    // true ← мерос!

🎯 Санҷиш — Боби 12

4 савол

ES6+ — JavaScript-и Муосир

ES2015 ва версияҳои баъдӣ хеле бисёр хусусиятҳои нав оварданд. Ин ҳамаи муҳимтаринашон.

JavaScript — ES6+ Хусусиятҳо
// ===== 1. Template Literals =====
const ном = "Тоҳир", синн = 25;
console.log(`Ном: ${ном}, Синн: ${синн}`);
console.log(`2 + 2 = ${2 + 2}`);          // Ифодаҳо
console.log(`Якуми
Дуюми
Сеюми`);          // Сатрҳои бисёр

// ===== 2. Spread Operator (...) =====
const а = [1, 2, 3];
const б = [4, 5, 6];
const якҷо = [...а, ...б];           // [1,2,3,4,5,6]
const нусха = [...а];                // нусхаи алоҳида
Math.max(...а);                      // 3

// Объектда
const асл = { а: 1, б: 2 };
const кенгайтирилган = { ...асл, в: 3 }; // {а:1, б:2, в:3}

// ===== 3. Map ва Set =====
const харита = new Map();
харита.set("ном", "Тоҳир");
харита.set(42, "Рақам ҳамчун калид!");
console.log(харита.get("ном"));  // "Тоҳир"
console.log(харита.size);       // 2

const маҷмӯа = new Set([1, 2, 2, 3, 3]);
console.log([...маҷмӯа]);       // [1, 2, 3] — ягона!
маҷмӯа.add(4);
console.log(маҷмӯа.has(2));     // true

// ===== 4. Symbol =====
const ID = Symbol("id");
const obj = { [ID]: 123 };  // Беназир, такрор нест

// ===== 5. Generator Functions =====
function* ҳисобгар() {
  yield 1;
  yield 2;
  yield 3;
}

const ҳис = ҳисобгар();
console.log(ҳис.next());  // { value: 1, done: false }
console.log(ҳис.next());  // { value: 2, done: false }
console.log(ҳис.next());  // { value: 3, done: false }
console.log(ҳис.next());  // { value: undefined, done: true }

// ===== 6. WeakMap ва WeakRef =====
const заъиф = new WeakMap();  // Garbage collected шуда метавонад

// ===== 7. Modules =====
// export { тугмаи_асосӣ, функсия1 };
// export default class Асосӣ { ... }
// import { тугмаи_асосӣ } from './модул.js';
// import Асосӣ from './модул.js';
// import * as ҳама from './модул.js';

Усулҳои нав барои рақамҳо ва сатрҳо

JavaScript — ES2020–2024
// String.padStart / padEnd
"5".padStart(3, "0")    // "005"
"Салом".padEnd(10, ".") // "Салом....."

// Array.from
Array.from({length: 5}, (_,i) => i+1) // [1,2,3,4,5]
Array.from("Салом")             // ["С","а","л","о","м"]

// Object.fromEntries (ES2019)
const ҷуфтҳо = [["а",1],["б",2]];
Object.fromEntries(ҷуфтҳо)   // {а: 1, б: 2}

// Logical Assignment (ES2021)
let x;
x ||= "пешфарз";     // x = x || "пешфарз"
x &&= "нав";         // x = x && "нав"
x ??= "агар null";   // x = x ?? "агар null"

// at() — ES2022
[1,2,3].at(-1)          // 3 (охирин)
"Салом".at(-1)         // "м"

// Array groupBy (ES2024)
const шахсҳо = [{ном:"А",гурӯҳ:"9"},{ном:"Б",гурӯҳ:"10"}];
Object.groupBy(шахсҳо, ({гурӯҳ}) => гурӯҳ);
// {"9": [{ном:"А",...}], "10": [{ном:"Б",...}]}

🎯 Санҷиш — Боби 13

4 савол

Идораи Хатоҳо ва Debugging

Ҳар як барномачи бо хатоҳо рӯ ба рӯ мешавад. Меомӯзем чӣ гуна дурустона идора кунем.

JavaScript — try/catch/finally
// ===== try/catch/finally =====
try {
  const натиҷа = JSON.parse("ин матни нодуруст");
} catch (хато) {
  console.error("Хатои JSON:", хато.message);
  console.error("Намуд:", хато.name);
} finally {
  console.log("Ҳамеша иҷро мешавад");
}

// ===== Навъҳои хатоҳо =====
// ReferenceError — тағйирёбанда нест
try { console.log(нест); }
catch(э) { console.log(э instanceof ReferenceError); } // true

// TypeError — намуди нодуруст
try { null.toString(); }
catch(э) { console.log(э.name); } // "TypeError"

// SyntaxError, RangeError, URIError, EvalError

// ===== Хатои фармоишӣ =====
class ХатоиТасдиқ extends Error {
  constructor(паём, майдон) {
    super(паём);
    this.name   = "ХатоиТасдиқ";
    this.майдон = майдон;
  }
}

function тасдиқкун(ном) {
  if (!ном) throw new ХатоиТасдиқ("Ном холӣ аст!", "ном");
  if (ном.length < 2) throw new ХатоиТасдиқ("Хеле кӯтоҳ!", "ном");
  return true;
}

try {
  тасдиқкун("");
} catch (хато) {
  if (хато instanceof ХатоиТасдиқ) {
    console.log(`Майдони ${хато.майдон}: ${хато.message}`);
  }
}

Debugging бо Console

JavaScript
// Усулҳои Console
console.log("Маълумот");
console.warn("Огоҳӣ!");
console.error("Хато!");
console.info("Маълумот");
console.table([{а:1},{а:2}]); // Ҷадвалӣ
console.dir(document.body);  // Объекти детали

console.time("мӯҳлат");
// ...код...
console.timeEnd("мӯҳлат");   // Вақти иҷро

console.group("Гурӯҳи маълумот");
console.log("Якуми");
console.log("Дуюми");
console.groupEnd();

console.assert(1 === 2, "1 ба 2 баробар нест!");

// debugger — Дар браузер нигоҳ медорад
debugger; // DevTools боз бошад

🎯 Санҷиш — Боби 14

4 савол