📘 JavaScript — Омӯзиши комил ва муфассал

Аз сифр то сатҳи касбӣ — ҳамаи нозукиҳои забони JavaScript бо шарҳи муфассал

👨‍🏫 Муаллиф: Шодизода Тоҳирхоҷа
Омӯзгори МТМУ №13
Ноҳияи Кӯҳистони Мастчоҳ

📌 1. Муқаддима ва таърихи JavaScript

JavaScript (JS) — забони барномасозии сатҳи баланд, динамикӣ, интерпретатсияшаванда ва чандпарадигмавӣ мебошад. Он яке аз се технологияи асосии World Wide Web дар баробари HTML ва CSS аст. JavaScript ба веб-саҳифаҳо ҳаёт мебахшад — онҳоро интерактивӣ, динамикӣ ва зинда месозад.

📜 Таърихи муфассал

Соли 1995 ширкати Netscape Communications ба муҳандиси худ Брендан Айк супориш дод, ки як забони скриптнависиро барои браузери Netscape Navigator эҷод кунад. Вай дар тӯли 10 рӯз прототипи аввалинро сохт. Номи аввала Mocha, сипас LiveScript ва ниҳоят JavaScript гузошта шуд (бо сабаби маъруфияти Java дар он замон, гарчанде JS ҳеҷ иртиботе ба Java надорад).

Соли 1997 стандарти ECMAScript (ES1) тавассути созмони Ecma International тасдиқ шуд. Версияҳои муҳимтарин:

Версия	Сол	Навигариҳои муҳим
ES3	1999	try/catch, regex, do-while, switch
ES5	2009	strict mode, JSON, forEach, map, filter, reduce
ES6 (ES2015)	2015	let/const, arrow functions, classes, modules, promises, destructuring
ES2016	2016	Array.includes(), оператори **
ES2017	2017	async/await, Object.values/entries, padStart/padEnd
ES2020	2020	BigInt, Optional chaining (?.), Nullish coalescing (??)
ES2021	2021	String.replaceAll, Promise.any
ES2022	2022	Class fields, Private methods (#), Top-level await

⚙️ Муҳити иҷрои JavaScript

JavaScript дар Engine-ҳои махсус иҷро мешавад. Машҳуртарин онҳо:

V8 — дар Chrome, Edge, Node.js
SpiderMonkey — дар Firefox
JavaScriptCore — дар Safari

💡 Қайди муҳим: JavaScript якрухона (single-threaded) аст, яъне дар як вақт танҳо як амалро иҷро мекунад. Вале бо ёрии Event Loop ва амалиётҳои номусинхронӣ метавонад бисёр вазифаҳоро "дар як вақт" идора кунад.

// Аввалин барномаи JavaScriptconsole.log("Салом, ҷаҳони JavaScript!");// Ин сатр дар консоли браузер намоиш дода мешавад. Барои кушодани консол: F12 ё Ctrl+Shift+I

📦 2. Тағйирёбандаҳо — var, let, const

Тағйирёбандаҳо барои нигоҳдории маълумот дар хотираи компютер истифода мешаванд. Дар JavaScript се роҳи эълони тағйирёбанда вуҷуд дорад.

📊 Ҷадвали муқоиса

Хусусият	var	let	const
Доираи амал (scope)	Функсионалӣ	Блокӣ {}	Блокӣ {}
Тағйирпазирӣ	✅ Бале	✅ Бале	❌ Не (аммо объект тағйир меёбад)
Такроран эълон	✅ Бале	❌ Не	❌ Не
Hoisting	✅ (undefined)	❌ (TDZ)	❌ (TDZ)
Ба объекти global илова мешавад	✅ Бале	❌ Не	❌ Не

// var — кӯҳна, тавсия намешавадvar ном = "Аҳмад";var ном = "Махмуд";// Такроран эълон — иҷозат аст (бисёр хавфнок!)console.log(ном);// "Махмуд"// let — муосир ва бехатарlet синнусол = 25;// let синнусол = 30; // SyntaxError!синнусол = 30;// Тағйир додан мумкин аст// const — доимӣconst PI = 3.14159;// PI = 3; // TypeError!const шахс = { ном: "Алӣ" };шахс.ном = "Ҳасан";// Ин мумкин аст!

💡 Қоидаи тиллоӣ: Ҳамеша const-ро истифода баред, магар он ки медонед қимат тағйир меёбад — он гоҳ let. var-ро ҳаргиз истифода набаред!

🔢 3. Намудҳои маълумот (Data Types)

JavaScript дорои 7 намуди примитивӣ ва 1 намуди ғайрипримитивӣ (Object) мебошад.

🔹 Намудҳои примитивӣ

Намуд	Мисол	Шарҳ
`string`	`"Салом"`	Матн
`number`	`42`, `NaN`	Адад (IEEE 754)
`bigint`	`123n`	Ададҳои бузург
`boolean`	`true`	Мантиқӣ
`undefined`	`undefined`	Қимати таъиннашуда
`null`	`null`	Қимати холӣ
`symbol`	`Symbol()`	Ягона ва беназир

console.log(typeof "салом");// "string"console.log(typeof 42);// "number"console.log(typeof null);// "object" — ХАТОГИИ МАЪРУФ!console.log(typeof NaN);// "number" — NaN як адад аст!

🔸 Қиматҳои falsy ва truthy

Falsy: false, 0, -0, 0n, "", null, undefined, NaN. Ҳамаи дигар truthy (аз ҷумла "0", "false", [], {}).

➕ 4. Операторҳо

Гурӯҳ	Оператор	Мисол
Арифметикӣ	`+ - * / % **`	`2**3 = 8`
Муқоиса	`== === != !==`	`5===5`
Мантиқӣ	`&& \|\| !`	`true&&false`
Nullish Coalescing	`??`	`null??"пф"`
Optional Chaining	`?.`	`obj?.p`
Spread/Rest	`...`	`[...a]`

🔀 5. Сохторҳои шартӣ

// if-elselet бал = 85;if (бал >= 90) { console.log("Аъло"); } else if (бал >= 70) { console.log("Хуб"); } else { console.log("Миёна"); }// switchswitch(рӯз){case "Душанбе":break;default:}// Тернарӣlet к = син >= 18 ? "Бале" : "Не";

Холро ворид кунед:

🔁 6. Даврҳо (Loops)

Намуд	Синтаксис
`for`	`for(let i=0;i<n;i++){}`
`while`	`while(шарт){}`
`do...while`	`do{}while(шарт)`
`for...of`	`for(let el of arr){}`
`for...in`	`for(let k in obj){}`
`forEach`	`arr.forEach(el=>{})`

⚠️ for...in-ро барои массивҳо истифода набаред!

⚙️ 7. Функсияҳо

// Function Declarationfunction ҷамъ(a,b){return a+b}// Function Expressionconst з = function(a,b){return a*b};// Arrow (ES6)const т = (a,b)=>a-b;// IIFE(function(){console.log("IIFE")})();

🧩 8. Объектҳо

const д = { ном: "Фирӯза", син: 22, муаррифӣ(){return `Салом, ${this.ном}`} };console.log(д.ном);console.log(Object.keys(д));console.log(Object.values(д));console.log(Object.entries(д));

📋 9. Массивҳо (Arrays)

let а = [1,2,3];а.push(4);а.pop();let д = а.map(x=>x*2);// [2,4,6]let ф = а.filter(x=>x>1);// [2,3]let с = а.reduce((a,b)=>a+b,0);// 6

📝 10. Сатрҳо (Strings) — омӯзиши муфассал

Сатр (String) дар JavaScript як пайдарпайии аломатҳо (character) мебошад. Ҳар як аломат дар сатр бо индекси худ дастрас аст, ки аз 0 сар мешавад. Сатрҳо дар JavaScript тағйирнопазир (immutable) ҳастанд — яъне шумо наметавонед сатри мавҷударо тағйир диҳед, балки ҳар амалиёт сатри нав бармегардонад.

📝 Роҳҳои эҷоди сатр

// Се роҳи асосии навиштани сатрlet с1 = 'Бо нохунаки ягона';// метавон "ро дар дохил истифода кардlet с2 = "Бо нохунаки дугона";// метавон 'ро дар дохил истифода кардlet с3 = `Бо бэктик (template literal)`;// метавон ҳам ' ҳам " ва ҳам тағйирёбандаҳоро истифода кард// Бо конструктори String (кам истифода мешавад)let с4 = new String("Салом");// Объекти String, на примитив!// Сатрхолии бисёрсатрӣ бо бэктикlet шеър = `Ин сатри аввал, Ин сатри дуюм, Ин сатри сеюм.`;// бисёрсатрӣ бе \n

📏 Хусусияти length

length — шумораи аломатҳои сатрро бармегардонад. Ин як хосият аст, на метод, бинобар ин қавс надорад.

let матн = "JavaScript";console.log(матн.length);// 10console.log("Салом, ҷаҳон!".length);// 14 (аломатҳои тоҷикӣ низ 1 ҳисоб мешаванд)console.log("".length);// 0 — сатри холӣ

🔍 Дастрасӣ ба аломатҳои алоҳида

let с = "JavaScript";// Бо bracket notationconsole.log(с[0]);// "J"console.log(с[4]);// "S"console.log(с[с.length - 1]);// "t" — аломати охирон// Бо методи charAt()console.log(с.charAt(0));// "J"console.log(с.charAt(100));// "" (сатри холӣ, на undefined!)// Фарқият: bracket notation индекси нодурустро undefined бармегардонадconsole.log(с[100]);// undefined

🔠 Тағйир додани ҳарфҳо (Case Methods)

let с = "JavaScript";console.log(с.toUpperCase());// "JAVASCRIPT"console.log(с.toLowerCase());// "javascript"// Барои муқоисаи бе ҳассосият ба регистр:let воридот = "СаЛоМ";if (воридот.toLowerCase() === "салом") {console.log("Дуруст аст!");}// Барои матнҳои тоҷикӣ низ кор мекунадconsole.log("Тоҷикистон".toUpperCase());// "ТОҶИКИСТОН"

🔎 Ҷустуҷӯ дар сатр

let матн = "JavaScript забони барномасозӣ аст";// indexOf — мавқеи аввалин пайдоишро бармегардонадconsole.log(матн.indexOf("забони"));// 11console.log(матн.indexOf("Python"));// -1 (ёфт нашуд)// lastIndexOf — мавқеи охирон пайдоишconsole.log("а".lastIndexOf("а"));// 0// includes — мавҷуд буданро тафтиш мекунад (true/false)console.log(матн.includes("барномасозӣ"));// trueconsole.log(матн.includes("Java", 5));// false (аз индекс 5 ҷустуҷӯ мекунад)// startsWith / endsWithconsole.log(матн.startsWith("Java"));// trueconsole.log(матн.endsWith("аст"));// true// search — монанди indexOf, аммо бо regex кор мекунадconsole.log(матн.search(/барнома/));// 20

✂️ Гирфтани зерсатр (Substring Methods)

let с = "JavaScript";// slice(start, end) — end дохил нест! Беҳтарин интихобconsole.log(с.slice(0, 4));// "Java"console.log(с.slice(4));// "Script" (то охир)console.log(с.slice(-6));// "Script" (аз охир 6 аломат)console.log(с.slice(-6, -1));// "Scrip"// substring(start, end) — монанди slice, вале қиматҳои манфиро 0 мешуморадconsole.log(с.substring(0, 4));// "Java"// substr(start, length) — кӯҳна! Аз индекс, length аломатconsole.log(с.substr(4, 3));// "Scr" (тавсия намешавад)

🔄 Иваз кардани матн

let матн = "Ман JavaScript-ро дӯст медорам";// replace — танҳо аввалин пайдоишро иваз мекунадconsole.log(матн.replace("JavaScript", "Python"));// replaceAll — ҳамаи пайдоишҳоро иваз мекунад (ES2021)let т = "сабз, сабз, кабуд";console.log(т.replaceAll("сабз", "сурх"));// "сурх, сурх, кабуд"// Бо regex барои ивази ҳама: /g флагconsole.log(т.replace(/сабз/g, "сурх"));// "сурх, сурх, кабуд"

🔗 Пайваст кардан ва тақсим кардан

// concat — пайваст кардани сатрҳоconsole.log("Салом".concat(", ", "ҷаҳон"));// "Салом, ҷаҳон"// Оператори + низ сатрҳоро пайваст мекунадconsole.log("Салом" + ", " + "ҷаҳон");// split — сатрро ба массив тақсим мекунадlet меваҳо = "себ,нок,ангур";let массивиМева = меваҳо.split(",");console.log(массивиМева);// ["себ", "нок", "ангур"]console.log("салом".split(""));// ["с","а","л","о","м"]// join — баръакси split, массивро ба сатр табдил медиҳадconsole.log(["себ","нок"].join(" ва "));// "себ ва нок"

🧹 Тоза кардани фосилаҳо

let с = " Салом, ҷаҳон! ";console.log(с.trim());// "Салом, ҷаҳон!" — фосилаҳои ду тарафconsole.log(с.trimStart());// фақат аз аввал (trimLeft низ ҳамин)console.log(с.trimEnd());// фақат аз охир (trimRight низ ҳамин)

🔢 Пур кардани сатр (padStart/padEnd)

// padStart — аз аввал то дарозии муайян пур мекунадconsole.log("42".padStart(5, "0"));// "00042"console.log("5".padStart(3, "*"));// "**5"// padEnd — аз охир пур мекунадconsole.log("салом".padEnd(10, "."));// "салом....."// Барои форматкунии рақамҳо хеле муфид астlet рақам = 7;console.log(String(рақам).padStart(2, "0"));// "07"

🔄 Такрор кардани сатр (repeat)

console.log("Салом! ".repeat(3));// "Салом! Салом! Салом! "console.log("*".repeat(10));// "**********"// repeat(0) сатри холиро бармегардонадconsole.log("мавҷ".repeat(0));// ""

📋 Template Literals (Бэктик) — муфассал

// Дохилкунии тағйирёбандаҳоlet ном = "Ораш", син = 25;let паём = `Салом, ман ${ном} ҳастам ва ${син} сол дорам.`;console.log(паём);// Дохилкунии ифодаҳоconsole.log(`2 + 2 = ${2 + 2}`);// "2 + 2 = 4"console.log(`Син ${син >= 18 ? 'калонсол' : 'ноболиғ'} аст`);// Дохилкунии даъвати функсияfunction салом(н) { return `Салом, ${н}!`; }console.log(`${салом("ҷаҳон")}`);// "Салом, ҷаҳон!"// Бисёрсатрӣ — хеле осон!let html = ` <div> <h1>${ном}</h1> <p>Син: ${син}</p> </div> `;// Tagged Templates — мавзӯи пешрафтаfunction таъкид(strings, ...values) {return strings.reduce((r,s,i) => r + s + (values[i] ? `<strong>${values[i]}</strong>` : ''), '');}console.log(таъкид`Ном: ${ном}, Син: ${син}`);

🔤 Санҷиши сатр:

🌳 11. DOM (Document Object Model) — омӯзиши муфассал

DOM (Document Object Model) — ин намояндагии сохтории ҳуҷҷати HTML дар хотираи браузер мебошад. Он ҳуҷҷатро ба шакли дарахти объектҳо табдил медиҳад, ки JavaScript метавонад онро хонда, тағйир диҳад ва идора кунад. DOM пули байни HTML ва JavaScript аст.

🏗️ Сохтори дарахти DOM

Ҳар як элементи HTML дар DOM як гиреҳ (node) мебошад. Намудҳои гиреҳҳо:

Намуди гиреҳ	nodeType	Мисол
Element	1	`<div>`, `<p>`
Attribute	2	`class="myClass"`
Text	3	Матни дохили элемент
Comment	8	`<!-- шарҳ -->`
Document	9	Худи ҳуҷҷат

🔍 Интихоб кардани элементҳо

// === Усулҳои кӯҳна (ҳанӯз кор мекунанд) ===let э1 = document.getElementById('myId');// як элемент ё nulllet э2 = document.getElementsByClassName('myClass');// HTMLCollection (зинда!)let э3 = document.getElementsByTagName('p');// HTMLCollection (зинда!)let э4 = document.getElementsByName('email');// NodeList// === Усулҳои муосир (тавсияшаванда) ===let э5 = document.querySelector('.myClass');// аввалин элемент ё nulllet э6 = document.querySelectorAll('div > p');// NodeList (статикӣ!)// querySelector метавонад селекторҳои мураккаби CSS-ро қабул кунадdocument.querySelector('#myId .myClass[data-active="true"]');document.querySelectorAll('li:nth-child(odd)');

📝 Тағйир додани мундариҷа

let э = document.querySelector('#myDiv');// textContent — танҳо матн, бе HTML (бехатартар!)э.textContent = 'Матни нав';// innerHTML — метавонад HTML дошта бошад (эҳтиёт шавед!)э.innerHTML = '<strong>Матни ғафс</strong> ва <em>каҷ</em>';// innerText — ба textContent монанд, аммо услубҳоро эҳтиром мекунадэ.innerText = 'Матни оддӣ';// outerHTML — тамоми элементро бо худаш иваз мекунадэ.outerHTML = '<section>Элементи нав</section>';

🎨 Тағйир додани атрибутҳо ва услубҳо

let э = document.querySelector('img');// Атрибутҳоэ.getAttribute('src');// хондани атрибутэ.setAttribute('src', 'rasm.jpg');// таъин кардани атрибутэ.removeAttribute('alt');// нест кардани атрибутэ.hasAttribute('src');// true/false// Data-атрибутҳоэ.dataset.userId = '123';// data-user-id="123"console.log(э.dataset.userId);// "123"// Услубҳо (inline styles)э.style.color = 'red';э.style.backgroundColor = '#f0f0f0';э.style.fontSize = '20px';// camelCase барои хосиятҳои CSS!// Илова/нест кардани классҳо (беҳтарин роҳ)э.classList.add('фаъол');э.classList.remove('ғайрифаъол');э.classList.toggle('намоён');// илова мекунад, агар набошад; нест мекунад, агар бошадconsole.log(э.classList.contains('фаъол'));// true/falseэ.classList.replace('кӯҳна', 'нав');

🏗️ Эҷод ва идоракунии элементҳо

// Эҷоди элементlet div = document.createElement('div');div.textContent = 'Элементи нав';div.classList.add('корти-нав');// Илова кардан ба саҳифаdocument.body.appendChild(div);// ба охири bodyволид.prepend(div);// ба аввали волидволид.append(div);// ба охири волидбародар.before(div);// пеш аз бародарбародар.after(div);// баъд аз бародар// Иваз карданэ.replaceWith(div);// э-ро бо div иваз мекунад// Нест карданэ.remove();// элементи э нест мешавад// Нусхабардории элементlet нусха = э.cloneNode(true);// true = бо фарзандон

🧭 Паймоиш дар дарахти DOM

let э = document.querySelector('#myDiv');э.parentElement;// волидэ.parentNode;// волид (гиреҳ)э.children;// HTMLCollection-и фарзандонэ.childNodes;// NodeList-и ҳамаи гиреҳҳои фарзандэ.firstElementChild;// аввалин фарзанди элементэ.lastElementChild;// охирон фарзанди элементэ.nextElementSibling;// бародари баъдӣэ.previousElementSibling;// бародари қаблӣ

🌳 Намунаи DOM:

🖱️ 12. Рӯйдодҳо (Events) — омӯзиши муфассал

Рӯйдодҳо (Events) ба браузер имкон медиҳанд, ки ба амалҳои корбар (клик, пахши клавиш, ҳаракати муш, ламс дар мобил) вокуниш нишон диҳад. Ин яке аз муҳимтарин қисматҳои JavaScript дар веб мебошад.

🎯 Илова кардани гӯшкунак (Event Listener)

// addEventListener — беҳтарин роҳconst тугма = document.querySelector('#myBtn');тугма.addEventListener('click', function(рӯйдод) {console.log('Клик шуд!');console.log('Элемент:', рӯйдод.target);console.log('Намуди рӯйдод:', рӯйдод.type);});// Бо arrow functionтугма.addEventListener('click', (e) => {console.log(`Клик дар координатҳои (${e.clientX}, ${e.clientY})`);});// Нест кардани гӯшкунакfunction коркард(e) { console.log('як маротиба');тугма.removeEventListener('click', коркард); }тугма.addEventListener('click', коркард);

📋 Намудҳои муҳими рӯйдодҳо

Гурӯҳ	Рӯйдодҳо	Шарҳ
Муш	`click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove`	Рӯйдодҳои муш
Клавиатура	`keydown, keyup, keypress`	Пахши тугмаҳо
Форма	`submit, change, input, focus, blur`	Рӯйдодҳои форма
Ҳуҷҷат	`DOMContentLoaded, load, scroll, resize`	Рӯйдодҳои саҳифа
Ламс	`touchstart, touchmove, touchend`	Дастгоҳҳои мобилӣ

🎈 Event Bubbling ва Capturing

Вақте рӯйдод рух медиҳад, он се марҳила дорад: Capturing (аз волид ба фарзанд), Target (дар худи элемент), Bubbling (аз фарзанд ба волид). Пешфарз bubbling аст.

// Барои фаъол кардани capturingэ.addEventListener('click', handler, true);// true = capturing// Боздоштани bubblinge.stopPropagation();// Боздоштани тамоми рафтори пешфарзe.preventDefault();// масалан, пахши линк ба саҳифаи дигар наравад

🎯 Делегатсияи рӯйдод (Event Delegation)

Ба ҷои он ки ба ҳар як фарзанд алоҳида гӯшкунак часпонем, ба волид як гӯшкунак мечаспонем ва тавассути e.target муайян мекунем, ки кадом фарзанд клик шудааст. Ин самараноктар ва осонтар аст.

// Делегатсияи рӯйдод барои рӯйхатdocument.querySelector('ul').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {console.log('Элементи LI клик шуд:', e.target.textContent);// Бо элементи нав низ кор мекунад!}});

🖱️ Намунаи рӯйдод:

⏱️ 13. Вақтсанҷҳо (Timers) — омӯзиши муфассал

JavaScript ду функсияи асосии вақтсанҷ дорад: setTimeout барои иҷрои як маротиба пас аз таъхир ва setInterval барои иҷрои такроршаванда. Ин функсияҳо номусинхронӣ ҳастанд — онҳо иҷрои кодро боз намедоранд.

⏰ setTimeout

// setTimeout — як маротиба пас аз таъхир (бо миллисония)let timerId = setTimeout(() => {console.log('Ин паём пас аз 2 сония намоиш дода мешавад');}, 2000);// 2000ms = 2 сония// Бекор кардани setTimeoutclearTimeout(timerId);// Агар то иҷро шудан бекор шавад, callback иҷро намешавад// Бо аргументҳоsetTimeout((ном, син) => {console.log(`${ном}, ${син} сол`);}, 1000, "Алӣ", 25);

🔄 setInterval

// setInterval — такроршавандаlet intervalId = setInterval(() => {console.log('Ин паём ҳар 1 сония такрор мешавад');}, 1000);// Бекор кардани setIntervalsetTimeout(() => {clearInterval(intervalId);console.log('setInterval пас аз 5 сония бекор карда шуд');}, 5000);

⏱️ Санҷиши вақтсанҷ:

📄 14. JSON (JavaScript Object Notation) — омӯзиши муфассал

JSON — формати сабук барои мубодилаи маълумот. Он ба осонӣ барои одамон хонда мешавад ва ба осонӣ тавассути мошинҳо тавлид ва таҳлил мегардад. JSON аз JavaScript сарчашма гирифтааст, аммо комилан мустақил аст.

📝 Қоидаҳои JSON

Маълумот дар ҷуфтҳои калид:қимат нигоҳ дошта мешавад
Калидҳо бояд дар нохунаки дугона бошанд
Қиматҳо метавонанд: string, number, object, array, true, false, null бошанд
Функсияҳо, undefined, Symbol ва дигар намудҳои махсус дастгирӣ намешаванд
Охирин элемент пас аз худ вергул надорад

// JSON.stringify — объектро ба сатри JSON табдил медиҳадconst корбар = { ном: "Парвиз", син: 28, маҳорат: ["HTML", "CSS"] };const json = JSON.stringify(корбар);console.log(json);// {"ном":"Парвиз","син":28,"маҳорат":["HTML","CSS"]}// JSON.stringify бо фосила (pretty print)console.log(JSON.stringify(корбар, null, 2));// JSON.parse — сатри JSON-ро ба объект табдил медиҳадconst объект = JSON.parse('{"ном":"Сорбон","син":30}');console.log(объект.ном);// "Сорбон"// Коркарди хатогиҳо ҳангоми parsetry {JSON.parse('ин JSON нест');} catch (e) {console.log('JSON нодуруст:', e.message);}

🔄 Нусхабардории амиқ бо JSON

// Нусхабардории амиқи объект бо JSONconst асл = { а: 1, б: { в: 2 } };const нусха = JSON.parse(JSON.stringify(асл));нусха.б.в = 99;console.log(асл.б.в);// 2 — тағйир наёфт!// Аммо ин усул функсияҳо ва Symbol-ҳоро нусхабардорӣ намекунад!

❌ 15. Хатогиҳо ва коркарди онҳо (Error Handling) — муфассал

Коркарди хатогиҳо барои эҷоди барномаҳои устувор зарур аст. JavaScript механизми try...catch...finally ва инчунин throw-ро барои идораи хатогиҳо пешниҳод мекунад.

🛡️ Сохтори try...catch...finally

try {// Коде, ки метавонад хатогӣ диҳадlet натиҷа = тағйирёбандаиНомавҷуд + 5;// ReferenceError!} catch (хатогӣ) {console.log('Номи хатогӣ:', хатогӣ.name);console.log('Паёми хатогӣ:', хатогӣ.message);console.log('Сатре, ки хатогӣ дод:', хатогӣ.stack);} finally {console.log('Ин блок ҳамеша иҷро мешавад!');}

🚀 Партофтани хатогиҳои фармоишӣ (throw)

function тақсим(а, б) {if (б === 0) {throw new Error('Тақсим ба сифр иҷозат нест!');}return а / б;}try {console.log(тақсим(10, 0));} catch (e) {console.log(e.message);// 'Тақсим ба сифр иҷозат нест!'}

📊 Намудҳои хатогиҳо

Намуд	Тавсиф
`Error`	Хатогии умумӣ
`SyntaxError`	Хатогии синтаксисӣ
`ReferenceError`	Тағйирёбанда ёфт нашуд
`TypeError`	Намуди нодуруст
`RangeError`	Қимат берун аз диапазон
`URIError`	Хатогии URI

🚀 16. ES6+ Хусусиятҳои муосир — муфассал

📦 Деструктуризатсия (Destructuring)

// Деструктуризатсияи массивconst [a, b, c] = [1, 2, 3];console.log(a, b, c);// 1 2 3const [first, ...rest] = [10, 20, 30, 40];console.log(first, rest);// 10, [20,30,40]// Деструктуризатсияи объектconst { ном, син, шаҳр = "Душанбе" } = { ном: "Зебо", син: 24 };console.log(ном, син, шаҳр);// "Зебо" 24 "Душанбе"// Бо номи дигарconst { ном: исм, син: сол } = { ном: "Ораш", син: 25 };console.log(исм, сол);// "Ораш" 25

📦 Spread ва Rest операторҳо

// Spread — паҳн карданconst arr1 = [1, 2];const arr2 = [...arr1, 3, 4];// [1,2,3,4]const obj1 = { a: 1 };const obj2 = { ...obj1, b: 2 };// {a:1,b:2}// Rest — ҷамъоварӣ карданfunction сум(...ададҳо) { return ададҳо.reduce((a, b) => a + b, 0); }console.log(сум(1, 2, 3, 4));// 10

📦 Default Parameters

function салом(ном = "Меҳмон", син = 18) {return `Салом ${ном}, син ${син}`;}console.log(салом());// "Салом Меҳмон, син 18"console.log(салом("Алӣ"));// "Салом Алӣ, син 18"

📦 Optional Chaining (?.) ва Nullish Coalescing (??)

// Optional Chaining — агар вуҷуд надошта бошад, undefined бармегардонад (на хатогӣ!)const кор = { ном: "А" };console.log(кор?.профиль?.email);// undefined// Nullish Coalescing — танҳо null/undefined-ро месанҷадlet қимат = 0;console.log(қимат ?? "пешфарз");// 0 (зеро 0 falsy аст, вале null/undefined нест)

⏳ 17. Promise ва async/await — муфассал

Promise — объектест, ки натиҷаи амалиёти номусинхрониро нишон медиҳад. Он метавонад дар се ҳолат бошад: pending (дар интизорӣ), fulfilled (иҷрошуда), rejected (радшуда).

🔧 Эҷоди Promise

const ваъда = new Promise((resolve, reject) => {let муваффақ = true;setTimeout(() => {if (муваффақ) {resolve('Амалиёт бо муваффақият анҷом ёфт!');} else {reject('Хатогӣ рух дод!');}}, 2000);});// Истифодаи Promiseваъда.then(натиҷа => console.log('✅', натиҷа)).catch(хато => console.log('❌', хато)).finally(() => console.log('Анҷом ёфт'));

🔄 async/await

async function гирифтаниМаълумот() {try {let ҷавоб = await fetch('https://jsonplaceholder.typicode.com/posts/1');let маълумот = await ҷавоб.json();console.log(маълумот);return маълумот;} catch (хато) {console.log('Хатогӣ:', хато);}}

🏛️ 18. Классҳо ва OOP — муфассал

Аз ES6, JavaScript синтаксиси class-ро пешниҳод мекунад. Класс ин як "қолаб" барои эҷоди объектҳо мебошад. Мерос бо extends ва даъвати конструктори волид бо super анҷом дода мешавад.

class Шахс {constructor(ном, син) {this.ном = ном;this.син = син;}муаррифӣ() {return `Ман ${this.ном}, ${this.син}-сола`;}static тавсиф() {return 'Ин як класси Шахс аст';}}class Донишҷӯ extends Шахс {constructor(ном, син, ихтисос) {super(ном, син);this.ихтисос = ихтисос;}муаррифӣ() {return super.муаррифӣ() + `, ихтисос: ${this.ихтисос}`;}}const д = new Донишҷӯ("Алӣ", 20, "Информатика");console.log(д.муаррифӣ());

🔒 19. Клоужерҳо (Closures) — муфассал

Клоужер ин функсияест, ки ба тағйирёбандаҳои доираи берунии худ дастрасӣ дорад, ҳатто пас аз он ки функсияи берунӣ иҷрояшро анҷом додааст. Ин яке аз муҳимтарин ва пурқудраттарин мафҳумҳои JavaScript аст.

function эҷодиҲисобкунак() {let шумора = 0;// Тағйирёбандаи хусусӣreturn {афзоиш: () => ++шумора,кам: () => --шумора,гирифтан: () => шумора};}const ҳ = эҷодиҲисобкунак();console.log(ҳ.афзоиш());// 1console.log(ҳ.афзоиш());// 2console.log(ҳ.гирифтан());// 2

🎯 20. Калимаи `this` — муфассал

Қимати this вобаста ба контексти даъват муайян мешавад, на ҷои эълон. Ин яке аз мафҳумҳои мураккабтарини JavaScript аст.

// Дар методи объект — this = объектconst obj = { ном: 'Майса', муаррифӣ() { return this.ном; } };console.log(obj.муаррифӣ());// "Майса"// Дар функсияи оддӣ (strict mode) — this = undefined// Дар arrow function — this аз доираи берунӣ мерос мегирад// call, apply, bind — барои таъини дастии thisfunction салом() { return `Салом, ${this.ном}`; }console.log(салом.call({ ном: 'Ашраф' }));// "Салом, Ашраф"

🧬 21. Прототипҳо — муфассал

JavaScript як забони прототипӣ аст. Ҳар як объект дорои хосияти пинҳонии [[Prototype]] мебошад, ки ба объекти дигар ишора мекунад. Ин механизми асосии мерос дар JavaScript аст.

const волид = { салом() { return 'Салом аз волид'; } };const фарзанд = Object.create(волид);фарзанд.ном = 'Фарзона';console.log(фарзанд.салом());// "Салом аз волид"console.log(фарзанд.__proto__ === волид);// true

🗺️ 22. Map, Set, WeakMap, WeakSet — муфассал

Ин сохторҳои маълумот алтернативаи қудратманди массив ва объект мебошанд. Map барои ҷуфтҳои калид-қимат (калид метавонад ҳар намуд бошад), Set барои коллексияи қиматҳои ягона.

const map = new Map();map.set('a', 1);map.set({ id: 1 }, 'объект');map.get('a');// 1const set = new Set([1, 2, 2, 3]);console.log([...set]);// [1,2,3]

🔍 23. RegExp — муфассал

Ифодаҳои регулярӣ (Regular Expressions) барои ҷустуҷӯ, тасдиқ ва ивазкунии матн дар асоси шаблонҳо истифода мешаванд. Онҳо дар JavaScript бо ду роҳ эҷод мешаванд: literal /шарт/flags ё конструктор new RegExp('шарт','flags').

const regex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;console.log(regex.test('test@example.com'));// trueconsole.log('abc 123'.match(/\d+/));// ["123"]console.log('сурх сабз сурх'.replace(/сурх/g, 'кабуд'));

🌀 24. Итераторҳо ва Генераторҳо — муфассал

Итератор объектест, ки методи next()-ро дорад ва объекти {value, done} бармегардонад. Генератор функсияест бо function* синтаксис, ки метавонад yield кунад ва иҷрояшро қатъ ва идома диҳад.

function* шумориш(то) {for (let i = 1; i <= то; i++) {yield i;}}const ген = шумориш(3);console.log(ген.next().value);// 1console.log(ген.next().value);// 2// Генератор барои идораи асинхронӣ низ муфид аст (бо yield promise)

🔮 25. Symbol — муфассал

Symbol як намуди примитивии ягона ва тағйирнопазир аст. Бештар барои эҷоди калидҳои беназир дар объектҳо истифода мешавад, то аз бархӯрди номҳо пешгирӣ кунад.

const id = Symbol('id');const obj = { [id]: '12345', ном: 'Объект' };console.log(obj[id]);// '12345'console.log(Object.keys(obj));// ['ном'] — Symbol нонамоён аст!

🪞 26. Proxy ва Reflect — муфассал

Proxy барои эҷоди як "қабати миёнарав" дар атрофи объект истифода мешавад, то амалҳои хондан, навиштан, нест кардан ва ғайраро назорат кунад.

const ҳадаф = { ном: 'Асл' };const прокси = new Proxy(ҳадаф, {get(obj, prop) {return prop in obj ? obj[prop] : `Хосияти "${prop}" мавҷуд нест`;},set(obj, prop, value) {if (prop === 'син' && value < 0) {throw new Error('Син манфӣ буда наметавонад!');}obj[prop] = value;return true;}});

🌐 27. Fetch API — муфассал

fetch як интерфейси муосир барои дархостҳои HTTP (GET, POST, PUT, DELETE) мебошад. Он Promises-ро истифода мебарад ва нисбат ба XMLHttpRequest соддатар аст.

async function гирифтан() {const ҷавоб = await fetch('https://api.example.com/data', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ ном: 'Тоҳир' })});if (!ҷавоб.ok) throw new Error(`Хатогӣ: ${ҷавоб.status}`);return ҷавоб.json();}

💾 28. Web Storage — муфассал

Web Storage ба браузер имкон медиҳад, ки маълумотро дар компютери корбар ба таври маҳаллӣ нигоҳ дорад. Ду намуд дорад: localStorage (бе муҳлати анҷом) ва sessionStorage (то баста шудани браузер).

// localStorage — маълумот то дастӣ нест кардан боқӣ мемонадlocalStorage.setItem('ном', 'Тоҳирхоҷа');let ном = localStorage.getItem('ном');localStorage.removeItem('ном');localStorage.clear();// sessionStorage — баъди бастани браузер тоза мешавадsessionStorage.setItem('вақт', 'муваққатӣ');// Танҳо сатрҳо нигоҳ дошта мешаванд. Барои объектҳо JSON истифода кунедlocalStorage.setItem('танзимот', JSON.stringify({ забо: 'tg', тема: 'торик' }));

🔄 29. Event Loop — муфассал

JavaScript якрухона аст, аммо бо ёрии Event Loop метавонад амалиётҳои номусинхрониро идора кунад. Microtasks (Promise.then, queueMicrotask) қабл аз macrotasks (setTimeout, setInterval) иҷро мешаванд.

console.log('1');setTimeout(() => console.log('2'), 0);Promise.resolve().then(() => console.log('3'));console.log('4');// Натиҷа: 1, 4, 3, 2 (microtask пеш аз macrotask!)

🧠 30. Идоракунии хотира (Memory Management) — муфассал

JavaScript дорои Garbage Collector (GC)-и худкор аст, ки объектҳои беистинодро тоза мекунад. Алгоритми асосӣ Mark-and-Sweep мебошад. Барои пешгирӣ аз memory leak: аз тағйирёбандаҳои глобалӣ кам истифода кунед, interval-ҳои нолозимро тоза кунед, ва дар хотир доред, ки клоужерҳо истинодҳоро нигоҳ медоранд.

📦 31. Модулҳо (ES6 Modules) — муфассал

Модулҳо ба мо имкон медиҳанд, ки кодро ба файлҳои алоҳида тақсим кунем. Ҳар як файл як модул аст ва метавонад export кунад ва import намояд.

// math.jsexport const PI = 3.14;export function ҷамъ(a,b){return a+b}export default function зарб(a,b){return a*b}// app.jsimport зарб, { PI, ҷамъ } from './math.js';

📏 32. Strict Mode ('use strict') — муфассал

'use strict' як директиваест, ки дар аввали скрипт ё функсия гузошта мешавад ва JavaScript-ро дар ҳолати "сахтгир" қарор медиҳад. Ин боиси он мегардад, ки хатогиҳои бесабаб нишон дода шаванд ва рафтори бехатартар таъмин гардад.

"use strict";// x = 5; // ReferenceError: x is not defined// Инчунин this дар функсияи оддӣ undefined мешавад, на window

💡 33. Маслиҳатҳо ва ҳилаҳои муфид — муфассал

🎯 Ҳилаҳои кӯтоҳнавис

// Тоза кардани такрорҳо аз массивconst ягона = [...new Set(arr)];// Иваз кардани қиматҳои ду тағйирёбанда[a, b] = [b, a];// Табдили сатр ба ададlet n = +"42";// 42// Табдили адад ба сатрlet s = 42 + "";// "42"// Гирфтани қимати пешфарзlet ном = воридот || "Номаълум";// Агар воридот falsy бошад// Кӯтоҳ кардани шартif (шарт) амал();// Ба ҷои {} барои як сатр

✅ Беҳтарин таҷрибаҳо

🐫 camelCase барои тағйирёбандаҳо ва функсияҳо
📏 PascalCase барои классҳо
🔒 Ҳамеша const-ро афзал донед
🚫 var-ро ҳаргиз истифода набаред
🔍 Ҳамеша === истифода кунед
📝 Коди худро шарҳгузорӣ кунед

🔐 34. Амният дар JavaScript — муфассал

Амният дар JavaScript як мавзӯи бисёр муҳим аст. Ҳамлаҳои маъмултарин: XSS (Cross-Site Scripting) — ворид кардани скриптҳои зараровар тавассути вуруди корбар, CSRF, ва Injection. Барои пешгирӣ: ҳамеша маълумоти корбарро пеш аз намоиш дар DOM тоза кунед (sanitize), аз innerHTML бо маълумоти корбар истифода набаред, Content Security Policy таъин кунед.

// Бехатар нест! Маълумоти корбарро мустақиман ба innerHTML нагузоред// элемент.innerHTML = вурудиКорбар; // ХАВФНОК!// Бехатар:элемент.textContent = вурудиКорбар;// Ё истифодаи DOMPurify барои тозакунӣ

🎨 35. Аниматсия бо JavaScript — муфассал

JavaScript метавонад аниматсияҳои мураккаб эҷод кунад. Ду роҳи асосӣ вуҷуд дорад: setInterval (кӯҳна) ва requestAnimationFrame (муосир ва самараноктар).

// requestAnimationFrame — барои аниматсияи ҳамворlet мавқеъ = 0;function аниматсия() {мавқеъ += 2;элемент.style.transform = `translateX(${мавқеъ}px)`;if (мавқеъ < 300) {requestAnimationFrame(аниматсия);}}requestAnimationFrame(аниматсия);

📊 36. Кор бо Forms — муфассал

Формаҳо яке аз унсурҳои муҳимтарини веб мебошанд. JavaScript ба мо имкон медиҳад, ки маълумоти формаро пеш аз ирсол тасдиқ кунем, рафтори пешфарзи ирсолро боздорем ва маълумотро ба таври номусинхронӣ ирсол кунем.

const форма = document.querySelector('form');форма.addEventListener('submit', (e) => {e.preventDefault();// Боздоштани ирсоли пешфарзconst дода = new FormData(форма);// Гирифтани маълумотconst объект = Object.fromEntries(дода);// Табдил ба объектconsole.log(объект);// Тасдиқи маълумотif (!объект.email || !объект.email.includes('@')) {alert('Email нодуруст аст!');return;}// Ирсоли номусинхронӣfetch('/api/submit', { method: 'POST', body: дода });});

📊 Намунаи форма:

🔧 37. Debugging — муфассал

Ислоҳи хатогиҳо (debugging) як маҳорати муҳим барои ҳар як барномасоз аст. Асбобҳои асосӣ: console.log(), console.table(), console.group(), калимаи калидии debugger, ва Chrome DevTools (F12).

// Усулҳои муфиди consoleconsole.log('Оддӣ');console.table([{а:1},{а:2}]);// Ҷадвалconsole.group('Гурӯҳ');// Гурӯҳбандӣconsole.time('timer');// Сабти вақтconsole.timeEnd('timer');// debugger — иҷроро қатъ мекунад// debugger; // Агар DevTools кушода бошад, иҷро қатъ мешавад

🏁 38. Хулоса ва санҷиши ниҳоӣ

Шумо акнун бо тамоми қисматҳо ва нозукиҳои JavaScript шинос шудед! Ин дониш барои оғози касби барномасозии веб кофӣ аст. Аз асосҳои тағйирёбандаҳо то мавзӯъҳои пешрафта ба монанди Event Loop, Proxy, ва async/await.

🧪 Саволҳои санҷишӣ:

typeof NaN;
0.1+0.2===0.3;
[]==![];
console.log('1'); setTimeout(()=>console.log('2'),0); Promise.resolve().then(()=>console.log('3')); console.log('4');

👨‍🏫 Муаллиф: Шодизода Тоҳирхоҷа
Омӯзгори МТМУ №13, ноҳияи Кӯҳистони Мастчоҳ
«Дониш чароғи роҳи зиндагист!»