JavaScript nima va u qayerda ishlaydi: brauzer, Node.js va undan tashqari

Qisqacha: JavaScript — veb-sahifalarni "jonlantiradigan" dasturlash tili. U har bir brauzer ichida ishlaydi, Node.js orqali esa serverda, kompyuterda va telefonda ham ishlaydi. Tilning rasmiy qoidalari ECMAScript deb ataladi, JavaScript esa shu qoidalar asosidagi til. Shuning uchun bitta tilni o'rganib, saytning ham ko'rinadigan, ham server qismini yoza olasiz.

Bu darsda

• JavaScript nima ekanini va u HTML, CSS'dan nimasi bilan farq qilishini tushuntira olasiz.
• JavaScript qayerlarda ishlashini bilasiz: brauzer, server, telefon, kompyuter ilovalari.
• Dvigatel (V8, SpiderMonkey, JavaScriptCore) va ishlash muhiti (brauzer, Node.js) farqini ajrata olasiz.
• ECMAScript, TC39 va ES2015 kabi nomlarni eshitganda nima ekanini bilasiz.
• Birinchi JavaScript kodingizni brauzerda va Node.js'da ishga tushirasiz.

Oldin bilishingiz kerak: Brauzer tuzilishi va dvigatellar, Chrome DevTools I: Elements va Console, Node.js nima va uni o'rnatish, HTML nima (va nima emas).

1. Nega bu kerak?

Tabriklaymiz! Siz HTML va CSS'ni o'rgandingiz, Git bilan ishlay olasiz. Endi chiroyli sahifa yasay olasiz: sarlavha, rasm, tugma, forma.

Lekin bitta muammo bor. Tugmani bossangiz — hech narsa bo'lmaydi. Formaga telefon raqamni noto'g'ri yozsangiz — sahifa buni sezmaydi. "Savatga qo'shish" tugmasi savatga hech narsa qo'shmaydi. Sahifa chiroyli, lekin jonsiz.

Uyga o'xshatsak:

Uzum Market'da mahsulotni savatga qo'shasiz — raqam darhol o'zgaradi. Telegram Web'da xabar yozasiz — sahifa yangilanmasdan xabar chiqadi. Click'da to'lov summasini yozsangiz, komissiya o'zi hisoblanadi. Bularning hammasi — JavaScript.

Bu darsdan boshlab siz dasturlashni o'rganasiz. Boshida g'alati tuyulishi tabiiy — har bir dasturchi shu yerdan boshlagan. Keling, sekin ko'ramiz.

2. JavaScript nima?

2.1 Dasturlash tili

HTML nima ekanini eslang: u sahifaning tuzilishini belgilaydi. HTML hisoblay olmaydi, "agar... bo'lsa" deb qaror qila olmaydi. Shuning uchun HTML dasturlash tili emas, belgilash tili edi.

Dasturlash tili (programming language) — kompyuterga qadamma-qadam buyruq beradigan til. U hisoblaydi, qaror qiladi, bir ishni ko'p marta takrorlaydi.

JavaScript (qisqasi JS) — shunday dasturlash tili. Tasavvur qiling, siz taksi haydovchisiga yo'l tushuntiryapsiz: "To'g'riga yuring. Svetoforda chapga buriling. Qizil chiroq bo'lsa, to'xtang." JavaScript kodi ham xuddi shunday — kompyuterga beriladigan aniq ko'rsatmalar ketma-ketligi.

2.2 Birinchi ta'm: brauzerda JavaScript

Gapni qo'yib, amalda ko'raylik. Chrome'da istalgan saytni oching (masalan, google.com) va F12 ni bosing. DevTools darsida ko'rgan Console yorlig'iga o'ting.

Pastdagi > belgisi yoniga yozing va Enter ni bosing:

2 + 2

Konsol darhol 4 deb javob beradi. Siz hozirgina birinchi JavaScript kodingizni ishga tushirdingiz! Endi buni sinang:

alert("Salom! Men JavaScript'man.");

Ekranda xabar oynasi chiqadi. alert — brauzerga "oyna ochib, shu matnni ko'rsat" degan buyruq. Qo'shtirnoq ichidagi yozuv — matn. Matn bilan ishlashni satrlar darsida batafsil o'rganamiz.

Va endi eng qiziq tajriba:

document.body.style.background = "gold";

Sahifa foni oltin rangga bo'yaldi! Siz boshqa kompaniyaning saytini o'zgartirdingizmi? Yo'q, xavotir olmang. O'zgarish faqat sizning brauzeringizda. Sahifani yangilasangiz (F5), hammasi joyiga qaytadi.

Maslahat: Bu kodni hozir tushunish shart emas. document — brauzerdagi sahifaning o'zi, style.background — uning CSS foni. Sahifani JavaScript bilan boshqarishni brauzer qismida to'liq o'rganamiz. Hozir faqat bitta narsani sezing: JavaScript sahifani jonli o'zgartira oladi.

Tekshirib ko'ring: HTML va JavaScript'ning asosiy farqi nima?

3. JavaScript qayerda ishlaydi?

3.1 Dvigatel: kodni "tushunadigan" qism

Kompyuter protsessori faqat 0 va 1 larni tushunadi. Siz esa 2 + 2 deb yozdingiz. Buni kim tarjima qildi?

JavaScript dvigateli (engine) — JavaScript kodini o'qib, uni kompyuter bajara oladigan buyruqlarga aylantiradigan dastur. Xuddi mashinaning motori kabi: yoqilg'ini harakatga aylantiradi.

Brauzer dvigatellari darsida bu nomlarni ko'rgansiz. Eslab olamiz:

Qiziq fakt: V8 nomi kuchli mashina motoridan olingan. SpiderMonkey esa eng birinchi JavaScript dvigateli — uni 1995-yilda tilni yaratgan odamning o'zi yozgan.

Kompilyatsiya (compilation) — kodni oldindan to'liq mashina tiliga (protsessor tushunadigan buyruqlarga) o'girib qo'yish. Xuddi kitobni bir marta to'liq tarjima qilib, keyin tarjimasini o'qigandek.

Dvigatel kodni har safar boshidan tarjima qilib o'tirmaydi. Ko'p ishlatiladigan kod qismlarini u ish davomida mashina tiliga aylantirib, tezlashtiradi. Bu usul JIT (Just-In-Time) — "aynan kerak paytda" kompilyatsiya deyiladi. Shuning uchun zamonaviy JavaScript juda tez ishlaydi.

O'zingiz to'ldiring: Firefox brauzerining JavaScript dvigateli — [:SpiderMonkey]. Safari'niki esa — [:JavaScriptCore].

3.2 Ishlash muhiti: dvigatel + qo'shimcha imkoniyatlar

Dvigatelning o'zi faqat tilni tushunadi: son qo'shadi, matn yasaydi, qaror qiladi. Lekin u ekranda oyna ocha olmaydi, faylni ham o'qiy olmaydi. Buni unga ishlash muhiti beradi.

Ishlash muhiti (runtime) — dvigatel va uning atrofidagi qo'shimcha imkoniyatlar to'plami. Bir xil motorni avtobusga ham, yuk mashinasiga ham qo'yish mumkin. Motor bir xil, lekin avtobus yo'lovchi tashiydi, yuk mashinasi esa yuk.

JavaScript'ning ikki asosiy ishlash muhiti bor:

Brauzer nega fayllaringizga kira olmaydi? Xavfsizlik uchun. Tasavvur qiling: istalgan sayt kompyuteringizdagi rasmlarni o'qiy olsa nima bo'lardi! Node.js esa sizning o'z kompyuteringizda, o'zingiz ishga tushiradigan dastur. Shuning uchun unga ko'proq ruxsat berilgan.

Ikkala muhitda ham bir xil ishlaydigan narsalar bor: sonlar, matnlar, hisob-kitob va console.log. Kursda o'rganadigan til asoslarining hammasi ikkala joyda bir xil ishlaydi.

3.3 Node.js'da birinchi kod

Node.js darsida uni o'rnatgansiz. Terminalni oching (VS Code'da Ctrl + `) va shunchaki node deb yozing. > belgisi chiqadi — bu REPL, JavaScript bilan "suhbat" rejimi. REPL (Read-Eval-Print Loop) — "o'qi, bajar, natijani ko'rsat va yana kut" degani: siz bir qator yozasiz, u darhol javob beradi. Yozing:

console.log("Salom, Node.js!");

Konsolda:

Salom, Node.js!

console.log(...) — qavs ichidagi narsani ekranga chiqaradigan buyruq. Bu JavaScript'dagi eng ko'p ishlatiladigan buyruq. Uni butun kurs davomida ishlatasiz. REPL'dan chiqish uchun .exit deb yozing yoki Ctrl + C ni ikki marta bosing.

Diqqat: REPL'da console.log(...) dan keyin qo'shimcha undefined degan qator ham chiqadi. Bu xato emas. Nega shunday ekanini keyingi darsda ko'ramiz.

3.4 Deno va Bun: yangi avlod

Node.js — eng mashhur, lekin yagona emas. So'nggi yillarda yana ikkitasi paydo bo'ldi:

• Deno (2018) — Node.js'ni yaratgan Rayan Dal (Ryan Dahl) boshlagan loyiha. U Node'dagi o'z xatolarini tuzatmoqchi bo'lgan. Xavfsizroq: ruxsat bermaguningizcha fayl va internetga kira olmaydi. TypeScript'ni ham qo'shimcha sozlamasiz ishga tushiradi. TypeScript — JavaScript'ning turlar qo'shilgan ko'rinishi, uni kursda alohida o'rganamiz.
• Bun (1.0 versiyasi — 2023) — tezlikka urg'u bergan muhit. U V8 emas, Safari'ning JavaScriptCore dvigatelida ishlaydi.

Uchalasi ham bir xil JavaScript tilini ishlatadi. Farq — atrofdagi qulayliklar va tezlikda. Real ishda eng ko'p uchraydigani hali ham Node.js, shuning uchun kursda asosan uni ishlatamiz.

3.5 Brauzer va serverdan tashqari

JavaScript bugun deyarli hamma joyda:

Qiziq fakt: siz kod yozadigan VS Code ham JavaScript (aniqrog'i TypeScript) bilan yozilgan. U Electron yordamida ishlaydi: ichida kichik brauzer va Node.js bor.

React Native va Electron — JavaScript ustiga qurilgan tayyor vositalar. Ularni kursda alohida o'rganamiz, hozir nomini bilish shart emas.

Maslahat: "Brauzerda faqat JavaScript ishlaydimi?" degan savol tug'ilishi mumkin. Deyarli ha. Yana WebAssembly degan texnologiya bor: u C++ yoki Rust'da yozilgan og'ir dasturlarni brauzerda ishlatadi. Lekin u JavaScript o'rnini bosmaydi, balki uning yonida ishlaydi.

Tekshirib ko'ring: Chrome va Node.js ikkalasi ham V8 dvigatelidan foydalanadi. Unda nega Node.js'da alert ishlamaydi?

4. ECMAScript: tilning qoidalar to'plami

4.1 Nega standart kerak?

Brauzerlar ko'p, dvigatellar ham har xil. Agar har biri JavaScript'ni o'zicha tushunsa nima bo'ladi? Siz yozgan kod Chrome'da ishlab, Safari'da buzilib qoladi.

Futbolni eslang. Toshkentda ham, Madridda ham qoidalar bir xil: qo'l bilan o'ynalmaydi, 11 ta o'yinchi. Shuning uchun istalgan davlat jamoasi bir-biri bilan o'ynay oladi. Qoidalarni FIFA yozadi, jamoalar esa shu qoidalar bo'yicha o'ynaydi.

JavaScript'da ham xuddi shunday:

• ECMAScript (qisqasi ES) — tilning rasmiy qoidalari. Qaysi so'z nima qiladi, 2 + 2 nima beradi — hammasi shu hujjatda yozilgan. Rasmiy nomi — ECMA-262 standarti.
• JavaScript — shu qoidalar asosida ishlaydigan til. V8, SpiderMonkey va JavaScriptCore bir xil qoidalarga amal qiladi. Shuning uchun kodingiz hamma brauzerda bir xil ishlaydi.

Qisqasi: ECMAScript — qoidalar, JavaScript — shu qoidalar bo'yicha o'ynaladigan o'yin.

4.2 TC39: qoidalarni kim yozadi?

Standartni Ecma International tashkilotidagi TC39 qo'mitasi yozadi. Veb standartlari darsida bu nomni eshitgansiz. Qo'mitada Google, Apple, Mozilla, Microsoft kabi kompaniyalar vakillari ishlaydi.

Tilga yangi imkoniyat qo'shish uzoq yo'l. Avval kimdir taklif yozadi. Keyin taklif bir necha bosqichdan o'tadi: muhokama, sinov, brauzerlarda tajriba. Oxirgi, 4-bosqichga yetgan taklif standartga kiradi. Barcha takliflar internetda ochiq turadi — istalgan odam kuzatishi mumkin.

4.3 ES versiyalari

Standart yillar davomida yangilanib keladi. Siz eng ko'p eshitadigan nomlar:

ES6 va ES2015 — bitta versiyaning ikki nomi. 2015-yildan keyin versiyalarni yil bilan atash odat bo'ldi: ES2016, ES2017 va hozirgi yillargacha. Vakansiyada "ES6+" yoki "zamonaviy JavaScript" deb yozilsa, 2015-yildan keyingi JavaScript nazarda tutiladi. Bu kursda aynan shu zamonaviy JavaScript'ni o'rganasiz.

Maslahat: Yangi imkoniyat standartga kirgan bo'lsa ham, eski brauzerlarda hali ishlamasligi mumkin. Buni caniuse.com saytida tekshirasiz — veb standartlari darsida ko'rgansiz.

Tekshirib ko'ring: Do'stingiz "Men ES6 emas, ES2015 o'rganyapman" dedi. U nimani noto'g'ri tushungan?

5. Qisqa tarix: 10 kunda yozilgan til

JavaScript tarixi qiziq va uni bilish nomlardagi chalkashliklarni tushuntiradi.

Tilning nomi ham bir necha bor o'zgargan: avval Mocha, keyin LiveScript, oxiri JavaScript. O'sha paytda Java tili juda mashhur edi. "JavaScript" nomi shu mashhurlikdan foydalanish uchun, reklama maqsadida tanlangan.

Diqqat: Java va JavaScript — butunlay boshqa tillar. Nomi o'xshash, xolos. Xuddi qovun va qovoq kabi: nomi yaqin, lekin biri shirin meva, biri sabzavot. Vakansiyada "Java dasturchi" deb yozilgan bo'lsa, bu JavaScript emas.

"JavaScript" nomi bugun Oracle kompaniyasining savdo belgisi hisoblanadi. Standart aynan shuning uchun boshqa nom bilan — ECMAScript deb ataladi.

Oradan 30 yil o'tdi. Bugun JavaScript dunyodagi eng ko'p ishlatiladigan tillardan biri. Stack Overflow'ning dasturchilar orasidagi yillik so'rovnomasida u o'n yildan ortiq birinchi o'rinda turadi. 10 kunda yozilgan til uchun yomon natija emas!

6. Ko'p uchraydigan xatolar

6.1 Brauzer kodini Node.js'da ishga tushirish

Siz sahifa.js fayliga brauzerdagi kodni yozib, terminalda node sahifa.js deb ishga tushirdingiz:

alert("Salom!");

Terminalda qizil xato chiqadi:

ReferenceError: alert is not defined

Tarjimasi: "alert aniqlanmagan". Node.js "alert degan narsani bilmayman" demoqda. Sababi: alert — brauzerning imkoniyati, Node.js'da esa ekranda oyna yo'q. document ni ishlatsangiz ham xuddi shunday xato chiqadi: ReferenceError: document is not defined.

Qoida: document, window, alert kabi so'zlar ko'rinsa — bu kod brauzer uchun. Uni brauzerda ishga tushiring.

6.2 Java va JavaScript'ni aralashtirish

Internetda "Java darslari" deb qidirsangiz, boshqa tilga oid darslar chiqadi. Qidiruvda doim to'liq JavaScript so'zini yozing. Ko'p manbalarda qisqasi — JS ishlatiladi.

6.3 "JavaScript — faqat saytlar uchun"

Bu eski tasavvur. Yuqorida ko'rdingiz: server, telefon, kompyuter ilovalari, botlar. Bitta til bilan butun loyihani yozish mumkin. Kursimizning nomi ham shundan: JavaScript Full-stack — saytning ko'rinadigan qismi (frontend) ham, server qismi (backend) ham.

6.4 "Men ECMAScript o'rganishim kerakmi?"

Yo'q, alohida o'rganmaysiz. Siz JavaScript o'rganasiz — u ECMAScript qoidalariga amal qiladi. ECMAScript so'zini asosan versiya nomlarida uchratasiz: "ES2015", "ES6+".

7. Mashqlar

1-mashq (oson): Brauzer kalkulyatori

Chrome'da yangi yorliq oching va F12 bilan Console'ga o'ting. Oylik maoshni hisoblang: bir kunlik ish haqi 150 000 so'm, oyda 22 ish kuni. Konsolga ko'paytmani yozing. Ko'paytirish belgisi — * (yulduzcha).

Ishora: raqamlar orasiga bo'sh joy qo'ymang — 150000 deb yozing.

150000 * 22

2-mashq (o'rta): Node.js'da salom

Terminalda node buyrug'i bilan REPL'ni oching. console.log(...) yordamida Men JavaScript o'rganyapman! matnini chiqaring. So'ng .exit bilan chiqing.

Ishora: matnda apostrof (o'rganyapman) bor. Shuning uchun matnni qo'shtirnoq "..." ichiga oling.

console.log("Men JavaScript o'rganyapman!");

Men JavaScript o'rganyapman!

3-mashq (qiyin): Qaysi muhit?

Har bir kod qayerda ishlashini aniqlang: faqat brauzerda, faqat Node.js'da yoki ikkalasida.

1. console.log("Salom")
2. alert("Salom")
3. document.body.style.background = "red"
4. 2 + 2
5. process.version — Node.js versiyasini ko'rsatadi

Ishora: process — bu darsda hali uchramagan so'z. U Node.js'ning o'ziga tegishli tayyor narsa: undan dastur ishlayotgan kompyuter va Node haqida ma'lumot olinadi. Hozir bilishingiz kerak bo'lgani shu, qolganini process obyekti darsida ko'ramiz.

Keyin tekshiring: 5-kodni node REPL'ida, 3-kodni brauzer konsolida sinab ko'ring.

Bonus: Chrome'da manzil qatoriga chrome://version deb yozing. Qaysi qatorda V8 dvigatelining versiyasi yozilgan?

8. Real ishda

• Vakansiyalar. O'zbekistonda Uzum, Click, Payme, Express24 kabi kompaniyalar "Frontend", "Backend (Node.js)" va "Full-stack" dasturchilarni qidiradi. Ularning hammasida birinchi talab — JavaScript yoki TypeScript.
• Intervyu savollari. Boshlang'ich darajadagi intervyuda ko'p so'raladi: "JavaScript va ECMAScript farqi nima?", "Node.js — bu tilmi?". To'g'ri javob: Node.js — til emas, JavaScript'ni server va kompyuterda ishlatadigan ishlash muhiti.
• Kundalik ish. Dasturchi bir kunda ham brauzer konsolini, ham terminaldagi Node.js'ni ishlatadi. Qaysi kod qaysi muhit uchun ekanini ajrata olish — birinchi ko'nikma.

Xulosa

• JavaScript — sahifalarni jonlantiradigan dasturlash tili. HTML — tuzilish, CSS — ko'rinish, JS — harakat.
• Dvigatel (V8, SpiderMonkey, JavaScriptCore) kodni tushunadi va bajaradi.
• Ishlash muhiti — dvigatel va qo'shimcha imkoniyatlar: brauzerda sahifa va alert, Node.js'da fayl va server.
• Deno va Bun — Node.js'ning yangi raqobatchilari. Til bir xil, qulayliklar boshqa.
• ECMAScript — tilning rasmiy qoidalari, TC39 yozadi. ES6 = ES2015, zamonaviy JavaScript shundan boshlanadi.
• Java va JavaScript — butunlay boshqa tillar.

Keyingi dars: Birinchi dastur: konsol va <script> tegi — JavaScript'ni brauzer konsolida, HTML sahifada va Node.js'da ishga tushirishning uch usulini o'rganamiz.