JavaScript bo'ylab sayohat

Bu bo'lim kod misollari orqali JavaScript tiliga qisqacha kirish qismini taqdim etadi. Ushbu kirish bobidan so'ng, biz JavaScript'ni eng quyi darajada o'rganishni boshlaymiz: 2-bob JavaScript'dagi izohlar, nuqta-vergullar va Unicode belgilari to'plami kabi tushunchalarni yoritadi. 3-bob esa yanada qiziqarliroq: u JavaScript o'zgaruvchilari va bu o'zgaruvchilarga tayinlash mumkin bo'lgan qiymatlarni tushuntiradi.

Quyida ushbu ikki bobning asosiy jihatlarini ko'rsatish uchun namuna kodi keltirilgan:

Primitiv qiymatlar


// Ikkita slash (//) belgisidan keyingi har qanday matn — bu izoh.
// Izohlarni diqqat bilan o'qing: ular JavaScript kodini tushuntiradi.

// O'zgaruvchi - bu qiymat uchun ramziy nom.
// O'zgaruvchilar `let` kalit so'zi bilan e'lon qilinadi:
let x               // x nomli o'zgaruvchini e'lon qilish.

// Qiymatlarni o'zgaruvchilarga `=` belgisi bilan tayinlash mumkin:
x = 0               // Endi x o'zgaruvchisi 0 qiymatiga ega
x                   // => 0: O'zgaruvchiga murojaat etilganda, u o'z qiymatini qaytaradi.

// JavaScript bir necha turdagi qiymatlarni qo'llab-quvvatlaydi
x = 1               // Sonlar.
x = 0.01            // Sonlar butun yoki o'nlik kasr bo'lishi mumkin.
x = 'hello world'   // Qo'shtirnoq ichidagi matnli satrlar.
x = 'JavaScript'    // Bir tirnoq ham satrlarni chegaralaydi.
x = true            // Mantiqiy (boolean) qiymat.
x = false           // Ikkinchi mantiqiy qiymat.
x = null            // `null` — "qiymat yo'q" degan ma'noni anglatuvchi maxsus qiymat.
x = undefined       // `undefined` — `null` kabi yana bir maxsus qiymat.

Murakkab (Referens) qiymatlar

JavaScript dasturlari boshqarishi mumkin bo'lgan yana ikkita juda muhim tur - bu obyektlar va massivlar. Bular 6 va 7-boblarning mavzulari, lekin ular shunchalik muhimki, siz ularni bu boblarga yetib borguncha ko'p marta uchratasiz:


// JavaScript'ning eng muhim ma'lumot turi - bu obyekt.
// Obyekt - bu nom/qiymat juftliklari to'plami yoki satrdan qiymatga ishora qiluvchi xarita.
let book = {                // Obyektlar jingalak qavslar `{}` ichiga olinadi.
  topic: 'JavaScript',      // "topic" xossasi "JavaScript" qiymatiga ega.
  edition: 7,               // "edition" xossasi 7 qiymatiga ega
}                           // Jingalak qavs obyekt oxirini belgilaydi.

// Obyekt xossalariga . yoki `[]` bilan murojaat qiling:
book.topic                  // => "JavaScript"
book['edition']             // => 7: xossa qiymatlariga murojaat qilishning boshqa usuli.
book.author = 'Flanagan'    // Tayinlash orqali yangi xossalar yarating.
book.contents = {}          // `{}` - hech qanday xossaga ega bo'lmagan bo'sh obyekt.

// `?.` yordamida xossalarga shartli murojaat (ES2020):
book.contents?.ch01?.sect1  // => undefined: `book.contents`da `ch01` xossasi yo'q.

// JavaScript shuningdek qiymatlarning massivlarini (raqamli indekslangan ro'yxatlar) qo'llab-quvvatlaydi:
let primes = [2, 3, 5, 7]   // `[` va `]` bilan chegaralangan 4 ta qiymatdan iborat massiv.
primes[0]                   // => 2: massivning birinchi elementi (0-indeks).
primes.length               // => 4: massivda nechta element borligi.
primes[primes.length - 1]   // => 7: massivning oxirgi elementi.
primes[4] = 9               // Tayinlash orqali yangi element qo'shish.
primes[4] = 11              // Yoki tayinlash orqali mavjud elementni o'zgartirish.
let empty = []              // `[]` — elementlari yo'q bo'sh massiv.
empty.length                // => 0

// Massivlar va obyektlar o'z ichida boshqa massiv va obyektlarni saqlashi mumkin:
let points = [              // 2 ta elementdan iborat massiv.
  { x: 0, y: 0 },           // Har bir element - obyekt.
  { x: 1, y: 1 },
]
let data = {                // 2 ta xossaga ega obyekt
  trial1: [[1, 2],[3, 4]],  // Har bir xossaning qiymati — massiv.
  trial2: [[2, 3],[4, 5]],  // Bu massivlarning elementlari ham massivlar.
}

Kod misollaridagi izohlar sintaksisi

Siz oldingi kodda ba'zi izohlar strelka (=>) bilan boshlanganini payqagan bo'lishingiz mumkin. Bular izohdan oldingi kod natijasida hosil bo'lgan qiymatni ko'rsatadi va bu men tomondan bosma kitobda veb-brauzer konsoli kabi interaktiv JavaScript muhitini o'xshatishga bo'lgan urinishimdir.

Bu // => ko'rinishidagi izohlar, shuningdek tasdiq (assertion) vazifasini ham bajaradi. Men kodni sinovdan o'tkazadigan va izohda ko'rsatilgan qiymatni hosil qilishini tekshiradigan maxsus vosita yozganman. Umid qilamanki, bu kitobdagi xatolarni kamaytirishga yordam beradi.

Izoh/tasdiqlarning o'zaro bog'liq ikki uslubi mavjud. Agar siz // a == 42 ko'rinishidagi izohni ko'rsangiz, bu izohdan oldingi kod bajarilgandan so'ng, a o'zgaruvchisi 42 qiymatiga ega bo'lishini anglatadi. Agar siz // ! ko'rinishidagi izohni ko'rsangiz, bu izohdan oldingi qatordagi kod istisno (exception) yuzaga keltirishini anglatadi (va undov belgisidan keyingi izohning qolgan qismi odatda qanday turdagi istisno yuzaga kelishini tushuntiradi).

Siz bu izohlarni kitob davomida qo'llanilishini ko'rishingiz mumkin.

Bu yerda ko'rsatilgan, massiv elementlarini kvadrat qavslar ichida ro'yxat qilish yoki obyekt xossalarining nomlarini ularning qiymatlariga jingalak qavslar ichida bog'lash sintaksisi initsializator ifodasi (initializer expression) deb ataladi va bu 4-bobning mavzularidan faqat bittasidir. Ifoda (expression) - bu qiymat hosil qilish uchun bajarilishi (evaluate) mumkin bo'lgan JavaScript iborasidir. Masalan, obyekt xossasi yoki massiv elementining qiymatiga murojaat qilish uchun . va []dan foydalanish ham ifoda hisoblanadi.

JavaScript'da ifodalarni hosil qilishning eng keng tarqalgan usullaridan biri bu operatorlardan foydalanishdir:


// Operatorlar yangi qiymat hosil qilish uchun qiymatlar (operandlar) ustida amal bajaradi.
// Arifmetik operatorlar eng oddiylaridan hisoblanadi:
3 + 2                     // => 5: qo'shish
3 - 2                     // => 1: ayirish
3 * 2                     // => 6: ko'paytirish
3 / 2                     // => 1.5: bo'lish
points[1].x - points[0].x // => 1: murakkab operandlar bilan ham ishlaydi
'3' + '2'                 // => "32": `+` sonlarni qo'shadi, satrlarni birlashtiradi (konkatenatsiya qiladi)

// JavaScript ba'zi qisqartirilgan operatorlarni ham taqdim etadi:
let count = 0             // O'zgaruvchini e'lon qilish
count++                   // O'zgaruvchini bir qiymatga oshirish (inkrement)
count--                   // O'zgaruvchini bir qiymatga kamaytirish (dekrement)
count += 2                // 2 qo'shish: `count = count + 2;` bilan bir xil
count *= 3                // 3 ga ko'paytirish: `count = count * 3;` bilan bir xil
count                     // => 6: o'zgaruvchi nomlari ham ifodalardir

// Tenglik va munosabat operatorlari ikki qiymatning teng,
// teng emas, kichik, katta va hokazo ekanligini tekshiradi. Ular `true` yoki `false` qiymatini qaytaradi.
let x = 2,
  y = 3                   // Bu `=` belgilari tayinlash operatori, tenglikni tekshirish emas.
x === y                   // => false: qat'iy tenglik
x !== y                   // => true: qat'iy tengsizlik
x < y                     // => true: kichik
x <= y                    // => true: kichik yoki teng
x > y                     // => false: katta
x >= y                    // => false: katta yoki teng
'two' === 'three'         // => false: ikki satr bir-biridan farq qiladi
'two' > 'three'           // => true: "tw" alifbo tartibida "th" dan keyin keladi
(false === (x > y))       // => true: `false` `false`ga teng
    
// Mantiqiy operatorlar mantiqiy (boolean) qiymatlarni birlashtiradi yoki inversiya qiladi
(x === 2) && (y === 3)    // => true: ikkala taqqoslash ham rost. `&&` — bu mantiqiy VA (AND).
(x > 3) || (y < 3)        // => false: ikkala taqqoslash ham yolg'on. `||` — bu mantiqiy YOKI (OR)
!(x === y)                // => true: `!` mantiqiy qiymatni teskarisiga o'giradi (inversiya qiladi).

JavaScript ifodalari va ko'rsatmalari

Agar JavaScript ifodalari (expressions) so'z birikmalariga o'xshasa, u holda JavaScript ko'rsatmalari (statements) to'liq gaplarga o'xshaydi. Ko'rsatmalar 5-bobning mavzusidir. Qisqacha aytganda, ifoda - bu qiymatni hisoblaydigan, lekin o'zi hech qanday amal bajarmaydigan narsadir: u dastur holatini (state) hech qanday tarzda o'zgartirmaydi. Boshqa tomondan, ko'rsatmalarning qiymati bo'lmaydi, lekin ular dastur holatini o'zgartiradi.

Yuqorida o'zgaruvchilarni e'lon qilish va tayinlash ko'rsatmalarini ko'rdingiz. Ko'rsatmalarning yana bir katta toifasi - bu shartli ko'rsatmalar va sikllar kabi boshqaruv tuzilmalaridir (control structures). Siz ularning misollarini funksiyalarni ko'rib chiqqanimizdan so'ng ko'rasiz.

Funksiyalar

Funksiya - bu bir marta aniqlab, so'ng qayta-qayta chaqira olishingiz mumkin bo'lgan nomlangan va parametrlangan JavaScript kodi blokidir. Funksiyalar rasman 8-bobgacha yoritilmaydi, lekin obyektlar va massivlar kabi, siz ularni bu bobga yetib borguningizgacha ko'p marta uchratasiz. Quyida bir nechta oddiy misollar:


// Funksiyalar - bu biz chaqirishimiz mumkin bo'lgan parametrlangan JavaScript kodi bloklari.
function plus1(x) {         // "plus1" nomli, "x" parametrli funksiyani aniqlash
  return x + 1              // Unga uzatilgan qiymatdan 1 ga katta qiymatni qaytarish
}                           // Funksiyalar jingalak qavslar ichiga olinadi

plus1(y)                    // => 4: `y`ning qiymati 3, shuning uchun bu chaqiruv 3+1 ni qaytaradi

let square = function (x) { // Funksiyalar qiymatlardir va o'zgaruvchilarga tayinlanishi mumkin
  return x * x              // Funksiya qiymatini hisoblash
}                           // Nuqtali vergul tayinlash ko'rsatmasi oxirini bildiradi

square(plus1(y))            // => 16: bir ifodada ikkita funksiyani chaqirish

ES6 va undan keyingi versiyalarda funksiyalarni aniqlash uchun qisqartirilgan sintaksis mavjud. Bu ixcham sintaksis argumentlar ro'yxatini funksiya tanasidan ajratish uchun => belgisidan foydalanadi, shuning uchun bu usulda aniqlangan funksiyalar strelkali funksiyalar (arrow functions) deb nomlanadi. Strelkali funksiyalar ko'pincha nomsiz funksiyani boshqa bir funksiyaga argument sifatida uzatish kerak bo'lganda ishlatiladi.

Yuqoridagi kod strelkali funksiyalardan foydalangan holda qayta yozilganda quyidagicha ko'rinadi:


const plus1 = (x) => x + 1  // Kiruvchi x qiymati chiquvchi x + 1 ga moslanadi
const square = (x) => x * x // Kiruvchi x qiymati chiquvchi x * x ga moslanadi
plus1(y)                    // => 4: funksiyani chaqirish o'zgarmaydi
square(plus1(y))            // => 16

Metodlar

Funksiyalarni obyektlar bilan birga ishlatganimizda, biz metodlarga ega bo'lamiz:


// Funksiyalar obyektlarning xossalariga tayinlanganda, biz ularni "metodlar" deb ataymiz.
// Barcha JavaScript obyektlari (jumladan massivlar ham) metodlarga ega:
let a = []                        // Bo'sh massiv yaratish
a.push(1, 2, 3)                   // `push()` metodi massivga elementlar qo'shadi
a.reverse()                       // Boshqa bir metod: elementlar tartibini teskari o'giradi

// Biz o'z metodlarimizni ham aniqlay olamiz. "this" kalit so'zi metod
// qaysi obyekt orqali chaqirilgan bo'lsa, o'sha obyektga ishora qiladi: bu holda, yuqoridagi `points` massiviga.
points.dist = function () {       // Nuqtalar orasidagi masofani hisoblaydigan metodni aniqlash
  let p1 = this[0]                // Metod chaqirilayotgan massivning birinchi elementi
  let p2 = this[1]                // "this" obyektining ikkinchi elementi
  let a = p2.x - p1.x             // x koordinatalaridagi farq
  let b = p2.y - p1.y             // y koordinatalaridagi farq
  return Math.sqrt(a * a + b * b) // Pifagor teoremasi, `Math.sqrt()` kvadrat ildizni hisoblaydi
}
points.dist()                     // => Math.sqrt(2): bizning 2 ta nuqtamiz orasidagi masofa

Boshqaruv tuzilmalari

Va'da qilinganidek, quyida JavaScript'ning keng tarqalgan boshqaruv tuzilmasi ko'rsatmalarini namoyish etuvchi funksiyalar keltirilgan:


// JavaScript ko'rsatmalariga C, C++, Java va boshqa tillar sintaksisidagi
// shartli ko'rsatmalar va sikllar kiradi.
function abs(x) {         // Absolyut qiymatni hisoblaydigan funksiya
  if (x >= 0) {           // `if` ko'rsatmasi...
    return x              // agar taqqoslash rost bo'lsa, shu kodni bajaradi
  }                       // `if` blokining oxiri
  else {                  // Ixtiyoriy `else` bloki, agar taqqoslash
    return -x             // yolg'on bo'lsa, o'z kodini bajaradi.
  }                       // Har bir blokda 1 ta ko'rsatma bo'lsa, `{}` shart emas
}                         // `if/else` ichidagi `return` ko'rsatmalariga e'tibor bering
abs(-10) === abs(10)      // => true

function sum(array) {     // Massiv elementlari yig'indisini hisoblash
  let sum = 0             // Boshlang'ich yig'indini 0 dan boshlaymiz.
  for (let x of array) {  // Massiv bo'ylab sikl, har bir elementni x ga tayinlaydi
    sum += x              // Element qiymatini yig'indiga qo'shish
  }                       // Siklning oxiri
  return sum              // Yig'indini qaytaradi.
}
sum(primes)               // => 28: dastlabki 5 ta tub son yig'indisi 2+3+5+7+11

function factorial(n) {   // Faktorialni hisoblash funksiyasi
  let product = 1         // Ko'paytmani 1 dan boshlaymiz.
  while (n > 1) {         // `()` ichidagi ifoda rost bo'lsa, `{}` ichidagi ko'rsatmalarni takrorlaydi.
    product *= n          // `product = product * n` uchun qisqartma
    n--                   // `n = n - 1` uchun qisqartma
  }                       // Siklning oxiri
  return product          // Ko'paytmani qaytaradi.
}
factorial(4)              // => 24: 1*4*3*2

function factorial2(n) {  // Boshqa sikl yordamida yozilgan versiya
  let i,
    product = 1           // 1 dan boshlaymiz.
  for (
    i = 2;
    i <= n;
    i++                   // `i` ni avtomatik tarzda 2 dan n gacha oshiradi.
  )
    product *= i          // Har bir iteratsiyada buni bajaradi. Bir qatorli sikl uchun `{}` shart emas.
  return product          // Faktorialni qaytarish
}
factorial2(5)             // => 120: 1*2*3*4*5

Obyektga yo'naltirilgan dasturlash

JavaScript obyektga yo'naltirilgan dasturlash (OYD, object-oriented programming - OOP) uslubini qo'llab-quvvatlaydi, lekin u klassik OYD tillaridan sezilarli darajada farq qiladi. 9-bob JavaScript'dagi OYDni ko'plab misollar bilan batafsil yoritadi. Quyida 2D geometrik nuqtalarni ifodalovchi JavaScript klassini qanday aniqlashni ko'rsatuvchi juda oddiy misol keltirilgan. Bu klass nusxalari (instances) bo'lgan obyektlar nuqtaning koordinata boshidan masofasini hisoblaydigan distance() nomli yagona metodga ega:


class Point {           // Qoida bo'yicha, klass nomlari bosh harf bilan yoziladi.
  constructor(x, y) {   // Yangi nusxalarni initsializatsiya qilish, ya'ni ishga tushirish, uchun konstruktor funksiyasi
    this.x = x          // `this` kalit so'zi initsializatsiya qilinayotgan yangi obyektga ishora qiladi.
    this.y = y          // Funksiya argumentlarini obyekt xossalari sifatida saqlaydi.
  }                     // Konstruktorlarda `return` kerak emas.

  distance() {          // Nuqtadan koordinata boshigacha masofani hisoblaydigan metod.
    return Math.sqrt(   // x² + y² ning kvadrat ildizini qaytarish.
      this.x * this.x + // `this` bu yerda `distance` metodi chaqirilayotgan
        this.y * this.y // `Point` obyektiga ishora qiladi.
    )
  }
}

// `Point` obyektlarini yaratish uchun `Point()` konstruktorini "new" kalit so'zi bilan ishlating:
let p = new Point(1, 1) // Geometrik nuqta (1,1).
// Endi `p` Point obyektining metodidan foydalanamiz:
p.distance()            // => Math.SQRT2

Keyingi boblar mavzulari

JavaScript'ning fundamental sintaksisi va imkoniyatlari bo'ylab ushbu kirish sayohatimiz shu yerda poyoniga yetadi, lekin kitob tilning qo'shimcha xususiyatlarini qamrab oluvchi mustaqil boblar bilan davom etadi:

10-bob, Modullar

Bir fayl yoki skriptdagi JavaScript kodi boshqa fayl yoki skriptlarda aniqlangan JavaScript funksiyalari va klasslaridan qanday foydalanishini ko'rsatadi.

11-bob, JavaScript Standart Kutubxonasi

Barcha JavaScript dasturlari uchun mavjud bo'lgan ichki o'rnatilgan funksiyalar va klasslarni qamrab oladi. Bunga Map va Set kabi muhim ma'lumotlar tuzilmalari, matndagi andozalarni (pattern) moslashtirish uchun RegExp klassi (regular ifodalar), JavaScript ma'lumotlar tuzilmalarini seriyalashtirish uchun funksiyalar va boshqa ko'p narsalar kiradi.

12-bob, Iteratorlar va Generatorlar

for/of siklining qanday ishlashini va o'z klasslaringizni for/of yordamida iteratsiya qilinadigan (iterable) qilishni tushuntiradi. U shuningdek generator funksiyalari va yield ko'rsatmasini ham qamrab oladi.

13-bob, Asinxron JavaScript

Bu bob JavaScript'da asinxron dasturlashni chuqur o'rganib, callback'lar va event'lar, Promise'larga asoslangan API'lar hamda async va await kalit so'zlarini qamrab oladi. Garchi JavaScript tilining yadrosi asinxron bo'lmasa-da, asinxron API'lar veb-brauzerlarda ham, Node'da ham standart yondashuv hisoblanadi va bu bob ushbu API'lar bilan ishlash usullarini tushuntiradi.