JavaScript sintaksisi asoslari: ifoda, ko'rsatma va izoh

Qisqacha: JavaScript kodi ikki xil bo'lakdan tuziladi. Ifoda — qiymat beradigan bo'lak (2 + 3 → 5). Ko'rsatma — ish bajaradigan to'liq buyruq (console.log("Salom");). Ko'rsatmalar ; bilan tugaydi, izohlar // yoki /* */ bilan yoziladi, nomlarda esa katta-kichik harf farqlanadi.

Bu darsda

• Ifoda va ko'rsatmani farqlay olasiz.
• Nuqta-vergul qachon kerakligini va uni tashlab ketish qanday xatoga olib kelishini bilasiz.
• // va /* */ izohlarini to'g'ri joyda yoza olasiz.
• Nom (identifikator) qoidalarini va band so'zlarni bilasiz.
• SyntaxError va ReferenceError xabarlarini o'qib, sababini topa olasiz.

Oldin bilishingiz kerak: Birinchi dastur: konsol va <script> tegi, console API: nafaqat console.log.

1. Nega bu kerak?

O'tgan darslarda siz console.log(...) bilan konsolga matn va son chiqardingiz. Kod ishladi. Lekin ba'zan bitta harf yoki qavsni unutsangiz, konsolda qizil xato chiqqan bo'lishi mumkin.

Sababi shunda: JavaScript'ning ham o'z grammatikasi bor. O'zbek tilida so'zlar, gaplar va tinish belgilari bor. JavaScript'da ham shunday: "so'zlar", "gaplar" va "tinish belgilari" bor.

Farqi bitta. Odam "salom qalesan" degan yozuvni ham tushunadi. Kompyuter esa tushunmaydi — bitta vergul xato bo'lsa, butun faylni ishga tushirmaydi.

Bu darsda JavaScript grammatikasining eng asosiy qoidalarini o'rganamiz. Keyingi hamma darslar shu poydevorga quriladi.

2. Sintaksis nima?

Sintaksis (syntax) — kod qanday yozilishi kerakligi haqidagi qoidalar to'plami. Bu tilning "imlo va grammatikasi".

Masalan, satr — qo'shtirnoq ichidagi matn — albatta yopilishi kerak. Yopilmasa nima bo'ladi?

console.log("Salom);

SyntaxError: Invalid or unexpected token

SyntaxError — "sintaksis xatosi", ya'ni yozuv qoidasi buzilgan. Invalid or unexpected token — "noto'g'ri yoki kutilmagan belgi". JavaScript ochilgan qo'shtirnoqni ko'rdi, lekin uning yopilishini topolmadi.

Sintaksis xatosining bitta muhim xususiyati bor: fayldagi birorta ham qator ishlamaydi. JavaScript avval butun faylni o'qib chiqadi. Grammatik xato topsa — hech narsani bajarmaydi.

Tekshirib ko'ring: Faylda 10 ta console.log bor, 10-qatorda qo'shtirnoq yopilmagan. Nechta qator konsolga chiqadi?

3. Ifoda: qiymat beradigan bo'lak

Konsolga quyidagini yozib ko'ring:

console.log(2 + 3); // 5

Qavs ichidagi 2 + 3 — bu ifoda. JavaScript uni hisoblaydi va bitta qiymat oladi: 5.

Ifoda (expression) — hisoblanganda bitta qiymat beradigan kod bo'lagi. Kalkulyatorni eslang: 2 + 3 ni tersangiz, ekranda 5 chiqadi. Ifoda — kalkulyatorga terilgan narsa, qiymat — ekrandagi natija.

Ifodalar har xil bo'ladi:

Satr (string) — qo'shtirnoq ichidagi matn. Siz uni console.log("Salom") da allaqachon ishlatgansiz. Satrlarni String asoslari darsida batafsil o'rganamiz.

console.log(5000 * 3); // 15000
console.log((2 + 3) * 4); // 20
console.log("Choy" + "xona"); // Choyxona

Ifoda ichida boshqa ifoda bo'lishi mumkin. (2 + 3) * 4 da avval ichki 2 + 3 hisoblanadi (5), keyin 5 * 4 (20). Xuddi matematikadagidek.

3.1 Ifodani qanday tanish mumkin?

Oddiy sinov bor: bu bo'lakni console.log( ) qavsi ichiga qo'ysa bo'ladimi? Bo'lsa — demak, u qiymat beradi, ya'ni ifoda.

console.log(5000 * 3) — ishlaydi. Demak 5000 * 3 — ifoda.

Maslahat: Terminalda node deb yozib Enter bossangiz, interaktiv rejim (REPL) ochiladi. U yerda ifoda yozsangiz, qiymati darhol chiqadi: 2 + 3 → 5. Brauzer konsoli ham xuddi shunday ishlaydi. Ifodalarni sinash uchun juda qulay. Chiqish uchun Ctrl + C ni ikki marta bosing.

Tekshirib ko'ring: console.log("2 + 3") va console.log(2 + 3) nima chiqaradi?

4. Ko'rsatma: ish bajaradigan buyruq

Endi dasturni butunligicha ko'raylik:

console.log("Buyurtma qabul qilindi");
console.log("Narxi:", 5000 * 3, "so'm");

Konsolda:

Buyurtma qabul qilindi
Narxi: 15000 so'm

(Eslatma: console.log ga vergul bilan bir nechta qiymat bersangiz, ular bitta qatorda, bo'sh joy bilan chiqadi.)

Bu dasturda ikkita ko'rsatma bor — har qatorda bittadan.

Ko'rsatma (statement) — JavaScript bajaradigan bitta to'liq buyruq. Ba'zi kitoblarda uni "operator gap" deb ham atashadi. Dastur — ko'rsatmalar ro'yxati. JavaScript ularni yuqoridan pastga, birma-bir bajaradi.

Hayotdan o'xshatish: oshxonadagi retsept. "Piyozni to'g'rang." "Go'shtni qovuring." Har bir band — alohida ko'rsatma. "Ikki piyoz" esa ko'rsatma emas — bu shunchaki miqdor, ya'ni qiymat. U ko'rsatma ichida ishlatiladi.

4.1 Ifoda va ko'rsatma farqi

Ko'rsatma ichida odatda ifodalar bo'ladi. console.log(5000 * 3); — ko'rsatma, uning ichidagi 5000 * 3 — ifoda.

4.2 Qanday ko'rsatmalar bor?

Kursda ko'p turdagi ko'rsatmalarni o'rganasiz. Hozir ularning nomini bilish shart emas, faqat mavjudligini ko'ring:

• console.log(...); — konsolga chiqarish. Siz buni allaqachon bilasiz.
• let narx = 5000; — o'zgaruvchi e'lon qilish. Keyingi darsda o'rganamiz.
• if (...) { ... } — shart, for (...) { ... } — takrorlash. Ular ham bir necha darsdan keyin keladi.

Mana ko'rsatmani ifoda o'rniga qo'yib ko'ramiz:

console.log(let narx = 5000);

SyntaxError: missing ) after argument list

Tarjimasi: "argumentlar ro'yxatidan keyin ) yetishmayapti". JavaScript qavs ichida ifoda kutgan edi. let so'zini ko'rib, "bu yerda ifoda tugadi, endi ) kelishi kerak" deb o'yladi. Xato xabari ba'zan asl sababni emas, JavaScript "adashgan" joyni ko'rsatadi.

Maslahat: Qavslaringiz yopiq bo'lsa ham missing ) chiqsa — qavsni emas, qavs ichini tekshiring. Ko'pincha u yerda ifoda o'rniga ko'rsatma (let ...) turgan bo'ladi.

4.3 Ifodaning o'zi ham ko'rsatma bo'la oladi

Qatorga faqat ifoda yozib, oxiriga ; qo'ysangiz, bu ham to'g'ri ko'rsatma bo'ladi:

2 + 3;

Bu kod xato bermaydi, lekin hech narsa ham qilmaydi. JavaScript 5 ni hisoblaydi va uni hech qayerga bermaydi — natija yo'qoladi. Foydali bo'lishi uchun ifoda biror ish ichida ishlatilishi kerak, masalan console.log(2 + 3);.

Tekshirib ko'ring: Quyidagilardan qaysilari ifoda: "Toshkent", console.log("Toshkent");, 12 * 12, let yosh = 20;?

5. Nuqta-vergul va uning tuzog'i

Ko'rsatmalar oxirida ; — nuqta-vergul turadi. U o'zbek tilidagi gap oxiridagi nuqtaga o'xshaydi: "bu ko'rsatma shu yerda tugadi".

Bitta qatorga ikki ko'rsatma yozsangiz, nuqta-vergul majburiy:

console.log("Salom"); console.log("Xayr");

Konsolda:

Salom
Xayr

Nuqta-vergulsiz esa:

console.log("Salom") console.log("Xayr")

SyntaxError: Unexpected identifier 'console'

Tarjimasi: "kutilmagan nom: console". JavaScript birinchi ko'rsatma tugashini kutgan edi, lekin to'g'ridan-to'g'ri yangi nom keldi.

5.1 ASI: JavaScript o'zi nuqta-vergul qo'yadi

Qiziq tomoni: har ko'rsatma alohida qatorda bo'lsa, nuqta-vergulsiz ham ishlaydi:

console.log("Salom")
console.log("Xayr")

Konsolda:

Salom
Xayr

Buning sababi — ASI (Automatic Semicolon Insertion), ya'ni "nuqta-vergulni avtomatik qo'yish". Qator tugaganda JavaScript o'ylaydi: "keyingi qator oldingisining davomi bo'la oladimi?" Bo'la olmasa — o'zi yashirincha ; qo'yadi.

5.2 ASI tuzog'i

Muammo shunda: ba'zan keyingi qator oldingisining davomi bo'la oladi. Unda JavaScript ; qo'ymaydi va ikki qatorni bitta deb o'qiydi.

Eng xavfli holat — qator ( qavs bilan boshlanganda:

console.log("Birinchi")
(2 + 3)

Konsolda avval Birinchi chiqadi, keyin qizil xato:

TypeError: console.log(...) is not a function

Tarjimasi: "console.log(...) — funksiya emas". Nega?

JavaScript ikki qatorni bitta qilib o'qidi: console.log("Birinchi")(2 + 3). Ya'ni "console.log ning natijasini ham chaqir". console.log o'z ishini qilib, "bo'sh" natija qaytaradi — uni chaqirib bo'lmaydi. Shuning uchun TypeError — "tur xatosi" chiqdi.

Qator [ yoki ` (backtick) bilan boshlanganda ham xuddi shu tuzoq bor. Yana bittasi return bilan bog'liq — uni return va erta qaytish darsida ko'ramiz.

5.3 Qaysi yo'lni tanlash kerak?

Dasturchilar ikki guruhga bo'linadi. Birlari har ko'rsatma oxiriga ; qo'yadi. Boshqalari umuman qo'ymaydi va faqat xavfli qatorlarni eslab yuradi.

Bu kursda biz har doim ; qo'yamiz. Sabab: qoidani eslab yurish shart emas, tuzoqqa tushish ehtimoli kam.

Maslahat: Real loyihalarda nuqta-vergulni qo'lda kuzatib o'tirishmaydi. Prettier degan vosita (kodni avtomatik chiroyli qiladigan dastur) faylni saqlaganingizda hammasini o'zi qo'yadi. Uni kursda ESLint va Prettier darsida sozlaymiz, hozir bilish shart emas.

Tekshirib ko'ring: console.log("A") console.log("B") — bitta qatorda. Natija nima bo'ladi va qanday tuzatiladi?

6. Bo'sh joy va qatorlar

JavaScript ko'p hollarda bo'sh joy va qator ko'chirishga e'tibor bermaydi. Quyidagi ikki qator bir xil ishlaydi:

console.log(2+3); // 5
console.log(  2  +  3  ); // 5

Hatto bitta ko'rsatmani bir necha qatorga bo'lsa ham bo'ladi:

console.log(
  "Narxi:",
  5000 * 3
);

Konsolda:

Narxi: 15000

Lekin qo'shtirnoq ichidagi bo'sh joy muhim — u matnning bir qismi. "Salom Ali" da ikki bo'sh joy bo'lsa, konsolga ham ikki bo'sh joy chiqadi.

Bo'sh joy va chekinish (qator boshidagi surilish) — JavaScript uchun emas, odam uchun. Kodni boshqa dasturchi, ertaga esa siz o'zingiz o'qiysiz. Chiroyli joylashgan kodni o'qish ancha tez. Kursda chekinish uchun 2 ta bo'sh joy ishlatamiz.

7. Izohlar

Kod ichida odamlar uchun yozilgan eslatmalar bo'ladi. JavaScript ularni butunlay o'tkazib yuboradi.

Izoh (comment) — kod ichidagi, JavaScript bajarmaydigan matn. U faqat kodni o'qiydigan odam uchun.

7.1 Bir qatorli izoh: //

// dan qator oxirigacha bo'lgan hamma narsa — izoh:

// Choyxona uchun kichik dastur
console.log("Choy — 3000 so'm"); // bitta choyning narxi

Konsolda:

Choy — 3000 so'm

// qator boshida ham, kod oxirida ham bo'lishi mumkin. Ikkinchi holatda chap tomondagi kod ishlaydi, o'ng tomondagi izoh — yo'q.

7.2 Ko'p qatorli izoh: /* ... */

Uzun tushuntirish uchun /* bilan ochib, */ bilan yopasiz:

/*
  Bu fayl choyxona cheklarini chiqaradi.
  Muallif: Malika
  Oxirgi o'zgarish: sentabr
*/
console.log("Chek №1"); // Chek №1

7.3 Kodni vaqtincha "o'chirish"

Izohning yana bir foydasi: kod qatorini o'chirmasdan, vaqtincha ishlamaydigan qilib qo'yish mumkin.

console.log("Salom");
// console.log("Bu qator hozircha kerak emas");
console.log("Xayr");

Konsolda:

Salom
Xayr

Ikkinchi qator izohga aylandi — u bajarilmadi. Keyin // ni olib tashlasangiz, qator yana ishlaydi. Dasturchilar xatoni qidirganda buni tez-tez qiladi.

Maslahat: VS Code'da qatorni izohga aylantirish uchun Ctrl + / (Mac'da Cmd + /) bosing. Bir necha qatorni belgilab bossangiz — hammasi birdan izohga aylanadi. Qayta bossangiz — izoh olib tashlanadi.

7.4 Yaxshi izoh "nega"ni tushuntiradi

Yangi boshlovchilar ko'pincha kod nima qilishini izohga yozadi:

// ❌ Foydasiz: kodning o'zi shuni aytib turibdi
// 3000 ni 2 ga ko'paytiramiz
console.log(3000 * 2); // 6000

Yaxshi izoh kodda ko'rinmaydigan narsani — nega shunday qilinganini aytadi:

// ✅ Foydali: sababini tushuntiradi
// Juma kuni choy ikki barobar: yetkazib berish qo'shiladi
console.log(3000 * 2); // 6000

Diqqat: /* */ izohlarini bir-birining ichiga joylab bo'lmaydi. /* a /* b */ c */ yozsangiz, JavaScript birinchi */ da izohni yopadi va qolgan c */ ni kod deb o'qiydi. Natija — tushunarsiz SyntaxError. Bir necha qatorni vaqtincha o'chirish uchun // ishlatgan ma'qul.

Kursda yana bitta izoh turini ko'rasiz: /** ... */. U funksiyalarni hujjatlashtirish uchun ishlatiladi (JSDoc deyiladi). JSDoc — funksiya ustiga yoziladigan maxsus izoh: unda funksiya nima qilishi va nima qabul qilishi yoziladi. VS Code uni o'qib, funksiya nomini yozganingizda kichik yordamchi oynada ko'rsatadi. Hozircha bilish shart emas.

Tekshirib ko'ring: Qaysi qatorlar konsolga chiqadi?

js

console.log("1"); // console.log("2");
// console.log("3");
/* console.log("4"); */ console.log("5");

8. Katta-kichik harf muhim

JavaScript katta va kichik harfni farqlaydi. console va Console — ikki xil so'z. Buni console API darsida ko'rgan edik: Console.log(...) → ReferenceError: Console is not defined, console.Log(...) → TypeError: console.Log is not a function.

ReferenceError — "murojaat xatosi": siz mavjud bo'lmagan nomga murojaat qildingiz. To'g'risi — console.log, hamma harf kichik.

Bu qoida siz o'ylab topadigan nomlarga ham tegishli. Keyingi darsda ism va Ism degan ikki nom yaratsangiz — ular ikki xil narsa bo'ladi.

9. Nomlar (identifikatorlar)

Keyingi darsdan boshlab siz qiymatlarga o'zingiz nom berasiz. Masalan:

let narx = 5000;

Bu yerda let — JavaScript'ning so'zi, narx esa siz tanlagan nom. let ni keyingi darsda to'liq o'rganamiz, hozir faqat nomga qarang.

Identifikator (identifier) — dasturchi o'ylab topgan nom. U narsalarni bir-biridan ajratish uchun kerak — xuddi odamlarning ismi kabi.

9.1 Nom qoidalari

Oxirgi qoidaga alohida e'tibor bering. O'zbek so'zlarida apostrof ko'p: o'rin, g'isht. Nomda uni tashlab yozing: orin, gisht.

Nega chiziqcha mumkin emas? CSS'da font-size yozgansiz, lekin JavaScript'da - — ayirish belgisi. narx-soni ni u "narx minus soni" deb o'qiydi.

Mana qoidalar buzilganda Node'da (node fayl.js) chiqadigan xatolar:

let mijoz ismi holatini ko'ring: xato ismi da ko'rsatildi. JavaScript mijoz ni nom deb qabul qildi, keyin kutilmagan ikkinchi nom (ismi) keldi. Qoida: xato ko'rsatilgan so'zdan oldingi so'zni ham tekshiring.

Maslahat: $ va _ nomlarda ruxsat etilgan, lekin boshlovchiga ular kam kerak bo'ladi. Real kodda $ ba'zi kutubxonalarda, _ bilan boshlanadigan nomlar esa "ichki, tegmang" degan ma'noda uchraydi.

9.2 Band so'zlar (rezerv so'zlar)

Ba'zi so'zlar JavaScript'ning o'ziga tegishli. Ularni nom qilib bo'lmaydi.

Kalit so'z (keyword) — JavaScript'da maxsus ma'noga ega so'z. Masalan, let — "o'zgaruvchi yaratyapman" degani. Bunday so'zlar rezerv (band) qilingan — xuddi to'yxonadagi "band" yozuvi qo'yilgan stol kabi, u boshqa mehmonga berilmaydi.

Eng ko'p uchraydiganlari:

Bularning hammasini yodlash shart emas. Kurs davomida birma-bir o'rganasiz va ular o'z-o'zidan esda qoladi.

Band so'zni nom qilsangiz:

let class = "9-B";

SyntaxError: Unexpected token 'class'

Tarjimasi: "kutilmagan belgi: class". JavaScript let dan keyin nom kutgan edi, lekin band so'z keldi. Yechim — boshqa nom tanlash: sinf, guruh.

Maslahat: VS Code kalit so'zlarni boshqa rangda (ko'pincha ko'k yoki binafsha) bo'yaydi. Nom yozganingizda u kalit so'z rangiga kirsa — boshqa nom tanlang.

Tekshirib ko'ring: Qaysi nomlar to'g'ri: ism, 1kurs, mijoz_soni, if, yoshi, tug'ilgan_yil, $narx?

10. Ko'p uchraydigan xatolar

10.1 Qavsni yopmaslik

console.log("Salom";

SyntaxError: missing ) after argument list

Tarjimasi: "argumentlardan keyin ) yetishmayapti". Ochilgan ( yopilmagan. VS Code juft qavslarni bir xil rangga bo'yaydi — shunga qarab topasiz.

10.2 Apostrofli matnni bittalik qo'shtirnoqqa olish

JavaScript'da satrni "..." bilan ham, '...' bilan ham yozish mumkin. Lekin o'zbek matnida apostrof ko'p:

console.log('O'zbekiston');

SyntaxError: missing ) after argument list

JavaScript 'O' ni tayyor satr deb o'qidi: ' ochildi, O, ' yopildi. Keyin qolgan zbekiston' ni tushunolmadi. Yechim — apostrofli matnni qo'shtirnoqqa oling:

console.log("O'zbekiston"); // O'zbekiston

10.3 Telegram yoki Word'dan ko'chirilgan kod

Kodni Telegram, Word yoki ba'zi saytlardan ko'chirsangiz, oddiy qo'shtirnoq " "chiroyli" qo'shtirnoqqa aylanib qolishi mumkin: “Salom”.

console.log(“Salom”);

SyntaxError: Invalid or unexpected token

Ko'zga bir xil ko'rinadi, lekin JavaScript uchun “ — umuman boshqa belgi. Yechim: qo'shtirnoqlarni klaviaturadan qaytadan yozing. Kodni ulashganda esa uni oddiy matn yoki fayl sifatida yuboring.

10.4 Katta harf bilan Console

Yuqorida ko'rdik: Console.log → ReferenceError, console.Log → TypeError. ... is not defined yoki ... is not a function ni ko'rsangiz, avval nomni harfma-harf, katta-kichik harfi bilan tekshiring.

11. Mashqlar

1-mashq (oson): Ifoda yoki ko'rsatma?

Har bir bo'lak ifodami yoki ko'rsatmami — aniqlang. Sinov: "console.log( ) ichiga sig'adimi?"

1. 7 * 8
2. console.log("Samarqand");
3. "Buxoro"
4. (100 + 50) * 2

console.log(7 * 8); // 56
console.log("Buxoro"); // Buxoro
console.log((100 + 50) * 2); // 300

2-mashq (o'rta): Buzilgan kodni tuzating

Bu kodda 3 ta xato bor. Hammasini toping va tuzating. Natija 3 qator bo'lishi kerak: Taksi buyurtmasi, Manzil: Chilonzor, Narxi: 17000 so'm.

Console.log("Taksi buyurtmasi");
console.log('Manzil: Chilonzor")
console.log("Narxi:", 7000 + 4 * 2500, "so'm";

Ishora: har qatorda bittadan xato. Qo'shtirnoqlar juft bo'lishi, qavslar yopilishi va harflar to'g'ri bo'lishi kerak.

console.log("Taksi buyurtmasi");
console.log("Manzil: Chilonzor");
console.log("Narxi:", 7000 + 4 * 2500, "so'm");

Taksi buyurtmasi
Manzil: Chilonzor
Narxi: 17000 so'm

3-mashq (qiyin): ASI tuzog'ini topish

Jasur shunday kod yozdi va TypeError oldi:

console.log("Hisob:")
(3000 + 8000) * 2

1. JavaScript bu ikki qatorni qanday o'qidi?
2. Kodni shunday tuzatingki, avval Hisob:, keyin 22000 chiqsin.
3. Izoh qo'shing: nega nuqta-vergul bu yerda muhim?

// Nuqta-vergul shart: keyingi qator "(" bilan boshlansa,
// JavaScript ikki qatorni bitta deb o'qiydi (ASI tuzog'i)
console.log("Hisob:");
console.log((3000 + 8000) * 2);

Hisob:
22000

12. Real ishda

• Xato xabarlarini o'qish — dasturchining kundalik ishi. SyntaxError, ReferenceError, TypeError — eng ko'p uchraydigan uchtasi. Ularni Stack trace va JavaScript xato turlari darsida to'liq o'rganamiz.
• Prettier va ESLint — jamoalarda nuqta-vergul, bo'sh joy va chekinishni avtomatik tartibga soladigan vositalar. Kod uslubi haqida bahs qilinmaydi — vosita hal qiladi.
• Izohlar — code review'da (hamkasb kodingizni tekshirganda) "bu yerda nega shunday qildingiz?" degan savol ko'p beriladi. Yaxshi "nega" izohi bu savolga oldindan javob beradi.
• Intervyu: "Expression va statement farqi nima?" — boshlang'ich darajada beriladigan savol. Javob: "ifoda qiymat beradi, ko'rsatma ish bajaradi".

Xulosa

• Sintaksis — kod yozish qoidalari. Buzilsa SyntaxError chiqadi va fayl umuman ishlamaydi.
• Ifoda qiymat beradi (2 + 3), ko'rsatma ish bajaradi (console.log(5);).
• Har ko'rsatma oxiriga ; qo'ying — ASI tuzog'idan saqlaydi.
• Izoh: // — bir qator, /* */ — ko'p qator. Yaxshi izoh "nega"ni tushuntiradi.
• Katta-kichik harf farqlanadi: console ≠ Console.
• Nom: harf, raqam, _, $; raqam bilan boshlanmaydi; bo'sh joy, -, apostrof va band so'zlar mumkin emas.

Keyingi dars: let va const bilan o'zgaruvchilar — qiymatlarga nom berib, ularni qayta-qayta ishlatishni o'rganamiz.