Hujjat (DOM)

Brauzer muhiti va spetsifikatsiyalar

JavaScript tili dastlab veb-brauzer uchun yaratilgan. Ammo o'sha vaqtdan beri u ko'plab boshqa muhitlar va platformalarga tarqaldi. Muhit (platforma) brauzer, veb-server yoki hatto "aqlli" muzlatkich bo'lishi mumkin. Ularning har biri o'ziga xos funksionallikni taqdim etadi. JavaScript tilida bu muhitga xos qismlar host muhiti (host environment) deb ataladi. Ushbu darsda biz brauzer muhitini — u bizga qanday imkoniyatlar berishini chuqur o'rganamiz.

Til yadrosi va muhit

JavaScript kodini ikki qatlamga bo'lib tasavvur qilish qulay:

Til yadrosi (ECMAScript) — bu Array, Object, Math, String, Function kabi tilning o'zi ta'riflaydigan asosiy imkoniyatlar. Ular har qanday muhitda bir xil ishlaydi.
Host muhiti — bu muhit qo'shadigan qo'shimcha obyektlar va funksiyalar. Brauzerda bu document, alert, fetch va boshqalar. Node.js'da esa fayl tizimi, tarmoq modullari va h.k.

Ya'ni til bir xil, ammo har bir host o'z "qo'shimchalarini" beradi. Brauzer bizga sahifani boshqarish uchun ko'plab maxsus obyektlar taqdim etadi.

Shuning sababli bir xil JavaScript kodi brauzerda ishlaydi-yu, Node.js'da ishlamasligi mumkin: masalan, document obyekti faqat brauzerda mavjud. Aksincha, faylni o'qish (fs moduli) faqat Node.js'da bor.

window — brauzerdagi ildiz (root) obyekti

Brauzer muhitida barcha imkoniyatlarni birlashtiruvchi ildiz (root) obyekt bor — u window deb ataladi. Uning ikkita asosiy roli bor:

Birinchidan, u JavaScript til yadrosining global obyekti hisoblanadi (biz uni tilning "Global obyekt" mavzusida ko'rgan edik).
Ikkinchidan, u brauzer oynasini (browser window) ifodalaydi va uni boshqarish uchun metodlar taqdim etadi.

Masalan, biz uni global obyekt sifatida ishlatib, yuqori darajali (global) funksiyani chaqirishimiz mumkin:

function sayHi() {
  alert('Salom');
}

// global funksiyalar window'ning metodi sifatida ham ko'rinadi
window.sayHi(); // Salom

Va uni brauzer oynasini ifodalaydigan obyekt sifatida ishlatib, oyna balandligini bilishimiz mumkin:

alert(window.innerHeight); // ichki oyna balandligi (piksellarda)

window obyektida oynaga oid yana ko'plab metod va xossalar bor, ular bilan keyingi bo'limlarda tanishamiz.

Global funksiyalar va var bilan e'lon qilingan global o'zgaruvchilar windowning xossalari bo'ladi. Ammo let va const bunday emas! Bu zamonaviy standartning o'ziga xosligidir. Shuning uchun global miqyosda let/const ishlatilsa, ular window obyektida ko'rinmaydi.

var gVar = 5;
alert(window.gVar); // 5 (var global obyektga qo'shildi)

let gLet = 5;
alert(window.gLet); // undefined (let qo'shilmaydi)

DOM (Document Object Model)

DOM (Document Object Model — Hujjat Obyekt Modeli) sahifadagi barcha mazmunni o'zgartirishimiz mumkin bo'lgan obyektlar sifatida ifodalaydi. Uning markaziy "kirish nuqtasi" — document obyekti.

Masalan, document.body — bu <body> tegini ifodalovchi obyekt. Quyidagi kod sahifa fonini 3 soniyaga qizil qiladi:

// sahifa fonini qizil qilamiz
document.body.style.background = 'red';

// 3 soniyadan keyin qaytaramiz
setTimeout(() => document.body.style.background = '', 3000);

Bu yerda biz document.body.style.background orqali <body> tegining fon rangini o'zgartirdik. DOM yordamida biz istalgan elementni yaratishimiz, o'chirishimiz, ko'chirishimiz, mazmunini va uslubini o'zgartirishimiz mumkin.

DOM faqat JavaScript uchun emas. U tildan mustaqil. Masalan, Python kabi boshqa tillar ham DOM'dan foydalanadi. DOM spetsifikatsiyasi HTML sahifasining tuzilishini tavsiflaydi va u bilan ishlash uchun obyektlarni ta'riflaydi.

Brauzerdan tashqarida ham DOM ishlatiladi. Masalan, serverda HTML sahifalarini yuklab, ularni qayta ishlaydigan skriptlar (Node.js'dagi jsdom kabi kutubxonalar) DOM'ning faqat bir qismini qo'llab-quvvatlashi mumkin.

CSSOM — uslublar uchun

CSS qoidalari va uslublar jadvallari (stylesheets) HTML tuzilishidan farqli ravishda ifodalanadi. Ular uchun alohida spetsifikatsiya bor — CSSOM (CSS Object Model). U CSS qoidalarini qanday obyektlar sifatida ifodalash, ularni o'qish va yozishni tavsiflaydi.

CSSOM DOM bilan birga ishlatiladi. Ammo amaliyotda CSSOM kamdan-kam kerak bo'ladi, chunki odatda biz CSS qoidalarini JavaScript'dan emas, balki elementlarga class qo'shib/olib boshqaramiz. Shuning uchun bu kursda unga alohida to'xtalmaymiz.

BOM (Browser Object Model)

BOM (Browser Object Model — Brauzer Obyekt Modeli) — bu hujjatdan tashqari, brauzer bilan ishlash uchun qo'shimcha obyektlarni ifodalaydi. Masalan:

navigator obyekti brauzer va operatsion tizim haqida ma'lumot beradi. Ko'plab xossalari bor, eng mashhurlari: navigator.userAgent (joriy brauzer haqida) va navigator.platform (platforma: Windows, Linux, Mac va h.k.);
location obyekti joriy URL manzilini o'qish va brauzerni yangi manzilga yo'naltirish imkonini beradi;
alert, confirm, prompt funksiyalari ham BOM qismidir — ular hujjat bilan bevosita bog'liq emas, balki brauzer bilan foydalanuvchi o'rtasidagi muloqot vositalaridir.

alert(location.href); // joriy URL manzilini ko'rsatadi

if (confirm('Wikipedia'ga o'tamizmi?')) {
  location.href = 'https://wikipedia.org'; // brauzerni boshqa URL'ga yo'naltirish
}

alert, prompt va confirm — bular ham BOM'ning bir qismi, chunki ular to'g'ridan-to'g'ri hujjatga tegishli emas, balki brauzerning umumiy funksiyalaridir.

Spetsifikatsiyalar

BOM umumiy HTML spetsifikatsiyasining bir qismidir. Ha, to'g'ri eshitdingiz. HTML spetsifikatsiyasi https://html.spec.whatwg.org manzilida joylashgan bo'lib, u nafaqat "HTML tili" (teglar, atributlar) haqida, balki turli obyektlar, metodlar va brauzerga xos DOM kengaytmalari haqida ham gapiradi. Bu "keng ma'nodagi HTML".

Bizni qiziqtiruvchi asosiy spetsifikatsiyalar:

DOM spetsifikatsiyasi — hujjat tuzilishini, uni boshqarish va hodisalarni tavsiflaydi. Manzil: https://dom.spec.whatwg.org.
CSSOM spetsifikatsiyasi — uslublar jadvallari va CSS qoidalari, ular bilan manipulyatsiya va ularning HTML bilan bog'liqligini tavsiflaydi. Manzil: https://www.w3.org/TR/cssom-1/.
HTML spetsifikatsiyasi — HTML tili (teglar va h.k.) va shuningdek BOM (brauzer obyekt modeli) — setTimeout, alert, location va boshqalar. U DOM spetsifikatsiyasini olib, uni ko'plab qo'shimcha xossa va metodlar bilan kengaytiradi. Manzil: https://html.spec.whatwg.org.

Ayrim atamalarni alohida spetsifikatsiyalar tavsiflaydi, ularni https://spec.whatwg.org manzilida topish mumkin. Bu spetsifikatsiyalar dastlab murakkab ko'rinsa-da, biror mavzuni chuqur o'rganmoqchi bo'lganingizda juda foydali. Kundalik ishda esa MDN (Mozilla Developer Network) ko'proq qulay — u misollar bilan tushuntiradi.

Biror funksiya yoki metod haqida qidirsangiz, internet qidiruviga MDN [atama] deb yozing, masalan MDN parseInt. Bu sizni to'g'ridan-to'g'ri MDN ma'lumotnomasiga olib boradi.

Xulosa

Brauzer JavaScript'ga sahifa bilan ishlash uchun boy imkoniyatlar beradi. Uni bir necha qismga bo'lib eslab qolamiz:

window — brauzerdagi ildiz obyekt: ham global obyekt, ham brauzer oynasini ifodalaydi;
DOM — hujjat mazmuni (obyektlar sifatida). Kirish nuqtasi — document. DOM spetsifikatsiyasida tavsiflangan;
CSSOM — CSS qoidalari va uslublar jadvallarini obyektlar sifatida boshqaradi;
BOM — brauzerning boshqa funksiyalari: navigator, location, screen, alert/confirm/prompt, setTimeout va h.k. HTML spetsifikatsiyasida tavsiflangan;
Til yadrosi (ECMAScript) esa muhitdan mustaqil, u har joyda bir xil ishlaydi.