Муқаддима ба 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 барои бозиҳо ва графика.
Якуми Кодатон
Ҳар як барномачи бо ин мисоли оддӣ шурӯъ мекунад:
// Ин сатри шарҳ аст — браузер онро иҷро намекунад // Чопи паёми оддӣ console.log("Салом, Ҷаҳон!"); // Тафсирот дар console.log console.log(42); // Рақам console.log(true); // Boolean console.log([1, 2, 3]); // Массив // Ба саҳифа нишон додан alert("Хуш омадед!"); // Аз корбар ворид гирифтан let ном = prompt("Номатонро нависед:"); alert("Салом, " + ном + "!");
Чӣ гуна ба 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
Тағйирёбандаҳо ва Намудҳои Маълумот
Тағйирёбандаҳо — зарфҳои нигоҳ доштани маълумот мебошанд. Дар JS се роҳи эълони онҳо вуҷуд дорад.
var, let, const — Фарқияти асосӣ
⚠️ var (кӯҳна)
- Функсияи scope
- Hoisting дорад
- Дубора эълон шуда мешавад
- Глобалӣ мешавад
✅ let (тавсия)
- Блок scope
- Дубора эълон намешавад
- Тағйир ёфтан мумкин
- Hoisting нест
🔒 const (доимӣ)
- Блок scope
- Тағйир ёфта намешавад
- Бояд дарҳол арзиш гирад
- Object/Array тағйир ёфта метавонад
📌 Қоида
- Аввал const истифода кун
- Агар тағйир лозим — let
- var — ҳеҷ гоҳ!
- Номи маъноӣ бигузор
// ✅ 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" | Матн — бо '' ё "" ё `` ифода мешавад |
Number | 42, 3.14 | "number" | Ҳар навъ рақам |
Boolean | true, false | "boolean" | Танҳо ду арзиш |
undefined | undefined | "undefined" | Арзиши тасмим нашуда |
null | null | "object" ⚠️ | Қасдан холӣ кардан |
Symbol | Symbol('id') | "symbol" | Беназир (ES6) |
BigInt | 9007199254740991n | "bigint" | Рақамҳои хеле калон |
Object | {}, [], function | "object"/"function" | Намудҳои мураккаб |
// 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) — Методҳои асосӣ
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)
// 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 + 3 | 8 |
- | Тарҳ | 10 - 4 | 6 |
* | Зарб | 3 * 7 | 21 |
/ | Тақсим | 15 / 4 | 3.75 |
% | Боқимонда | 17 % 5 | 2 |
** | Дараҷа | 2 ** 10 | 1024 |
++ | Зиёд кардан | x++ | x+1 |
-- | Кам кардан | x-- | x-1 |
Операторҳои Муқоиса
// Операторҳои муқоиса — ҳамеша 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 (дуруст!)
Операторҳои Мантиқӣ
// && — ВА (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)
// шарт ? агар_ҳақ : агар_дурӯғ let синн = 20; let ҳолат = синн >= 18 ? "Калонсол" : "Хурдсол"; console.log(ҳолат); // "Калонсол" // Ҷои if-else кутоҳ const хабар = синн > 60 ? "Пири" : синн > 35 ? "Миёнасол" : синн > 18 ? "Ҷавон" : "Кӯдак"; console.log(хабар); // "Ҷавон"
🎯 Санҷиш — Боби 3
Шартҳо ва Интихоб
Шартҳо ба барнома имкон медиҳанд, ки дар вазъиятҳои гуногун қарорҳои гуногун қабул кунад.
if / else if / else
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 — барои чанд вариант
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 ҳисоб мешаванд:
✅ Ҳама чизи дигар "Ҳақиқат" (Truthy) аст
🎯 Санҷиш — Боби 4
Давраҳо (Loops)
Давраҳо барои такрор иҷро кардани кодхо истифода мешаванд. Дар JS чанд навъ давра вуҷуд дорад.
🔁 for
Вақте миқдори такрор маълум аст. Бештар истифода мешавад.
🔁 while
То вақте ки шарт ҳақиқӣ аст давра давом мекунад.
🔁 for...of
Барои гузаштан аз Iterable (Array, String, Map, Set).
🔁 for...in
Барои гузаштан аз хосиятҳои Объект.
// ===== 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
// 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
Функсияҳо
Функсияҳо — блокҳои коде, ки борҳо иҷро шуда метавонанд. JS дар онҳо аз ҳама гуногунтар аст.
// ===== 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
// ===== 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)
// Функсияро ҳамчун аргумент дода метавонед 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
Массивҳо (Arrays)
Массив — рӯйхати тартибнок. JS-да массивҳо хеле пурқудрат мебошанд.
// Эҷоди массив 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
Усулҳои асосии Массив
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 иловакун
Усулҳои Функсионалӣ — Сарватмандтарин қисм!
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
Объектҳо (Objects)
Объект — маҷмӯи ҷуфтҳои "калид: арзиш". Асоси ҳамаи сохторҳои мураккаб дар JS.
// Эҷод const омӯзгор = { ном: "Шодизода Тоҳирхоҷа", касб: "Омӯзгор", мактаб: "МТМУ13", ноҳия: "Кӯҳистони Мастчоҳ", фанҳо: ["Информатика", "Математика"], фаъол: true, // Метод — функсия дар объект муаррифӣ: function() { return `${this.ном} — ${this.мактаб}`; } }; // Дастрасӣ console.log(омӯзгор.ном); // Нишонаи нуқта console.log(омӯзгор["касб"]); // Нишонаи қавс console.log(омӯзгор.муаррифӣ()); // Метод чақирдан // Иловакунӣ ва тағйир омӯзгор.тел = "+992..."; // Нав омӯзгор.фаъол = false; // Тағйир delete омӯзгор.тел; // Тарк // Санҷиш console.log("ном" in омӯзгор); // true console.log(омӯзгор.hasOwnProperty("ном")); // true
Усулҳои Объект
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 — хеле муфид!
// ===== Объект 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
DOM — Модели Объекти Ҳуҷҷат
DOM ба JS имкон медиҳад, ки HTML-саҳифаро хонад, тағйир диҳад, иловакунад ва тарк кунад.
// ===== Интихоби элементҳо ===== // Яке — аввалинро бармегардонад 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
// ===== Элементи нав ===== 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
Ҳодисаҳо (Events)
Ҳодисаҳо — амалҳои корбар ё браузер. Клик, клавиатура, формаҳо ва ғайра.
// ===== 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 — Усули пешрафта
// ❌ Бад — ҳар тугмаи алоҳида 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
Async/Await ва Promises
JavaScript яктасиравӣ (single-threaded) аст, аммо амалҳои тӯлонӣро ғайримутазамман (asynchronous) иҷро мекунад.
// ===== 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
Барномасозии Ба Объект Нигаронидашуда (ООП)
ООП — усули ташкили код бо ёрии объектҳо, классҳо ва мерос.
// ===== Класс ===== 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
ES6+ — JavaScript-и Муосир
ES2015 ва версияҳои баъдӣ хеле бисёр хусусиятҳои нав оварданд. Ин ҳамаи муҳимтаринашон.
// ===== 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';
Усулҳои нав барои рақамҳо ва сатрҳо
// 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
Идораи Хатоҳо ва Debugging
Ҳар як барномачи бо хатоҳо рӯ ба рӯ мешавад. Меомӯзем чӣ гуна дурустона идора кунем.
// ===== 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
// Усулҳои 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 боз бошад