JavaScript bilan tanishuv

HTML sahifaning tuzilishini, CSS esa ko'rinishini beradi. Endi uchinchi qatlam navbati — sahifaga «jon» kiritadigan JavaScript. Bu haqiqiy dasturlash tili: u hisoblaydi, qaror qabul qiladi va sahifani o'zgartiradi. Bu darsda JavaScript kodini qayerga yozishni, konsol bilan ishlashni, o'zgaruvchilar va ma'lumot turlarini o'rganamiz.

JavaScript nima?

JavaScript (qisqacha JS) — veb-sahifalarni harakatga keltiradigan dasturlash tili. HTML va CSS dasturlash tillari emas: ularda hisob-kitob, shart yoki takrorlash yo'q. JavaScript'da esa hammasi bor. Tugma bosilganda nimadir sodir bo'lishi, forma to'g'ri to'ldirilganini tekshirish, yangi xabarlarni sahifani yangilamasdan yuklash, brauzerdagi o'yinlar — bularning hammasi JavaScript.

Eng muhimi: JavaScript — brauzerlar o'zida tushunadigan yagona dasturlash tili. Chrome, Firefox, Safari, Edge — hammasining ichida JavaScript'ni bajaradigan «dvigatel» bor. Shuning uchun hech narsa o'rnatmasdan, darhol yozishni boshlash mumkin.

JavaScript qayerda ishlaydi?

• Brauzerda — veb-sahifalar ichida. Bu kursda aynan shu bilan shug'ullanamiz.
• Serverda va kompyuterda — Node.js dasturi yordamida JavaScript brauzerdan tashqarida ham ishlaydi: serverlar, buyruq qatori dasturlari, hatto VS Code'ning o'zi ham qisman JavaScript'da yozilgan.

JavaScript'ni sahifaga ulash

1-usul: <script> tegi

JavaScript kodi <script> tegi ichiga yoziladi. Odatda u <body> ning eng oxiriga qo'yiladi:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <title>Mening sahifam</title>
</head>
<body>
  <h1>Salom!</h1>
  <p>Bu sahifada JavaScript bor.</p>

  <script>
    console.log("Sahifa yuklandi!");
  </script>
</body>
</html>

Nega oxirida? Brauzer sahifani yuqoridan pastga qarab o'qiydi. Agar skript tepada tursa, u hali yaratilmagan elementlarni topa olmaydi, sahifaning ko'rinishi ham kechikadi. Oxirida tursa, skript ishga tushganda butun sahifa allaqachon tayyor bo'ladi.

2-usul: alohida script.js fayli

Haqiqiy loyihalarda JavaScript, xuddi CSS kabi (CSS asoslari darsi), alohida faylga yoziladi. Loyiha papkasi shunday ko'rinadi:

veb-sayt/
├── index.html
├── style.css
└── script.js

<head>
  <meta charset="UTF-8">
  <title>Mening sahifam</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

console.log("Salom, men script.js faylidan keldim!");

src atributi faylning yo'lini ko'rsatadi. defer («kechiktirish») esa brauzerga «bu skriptni HTML to'liq o'qib bo'lingandan keyin ishga tushir» deydi — shuning uchun bunday skriptni <head> ichiga ham qo'yish mumkin. src li <script> tegi ichiga kod yozilmaydi, lekin yopuvchi </script> tegi baribir shart.

Konsol — dasturchining daftari

console.log() buyrug'i qavs ichidagi qiymatni konsolga chiqaradi. Konsol — dasturchi uchun maxsus oyna: sahifaga tashrif buyurgan odam uni ko'rmaydi. Unda kodimiz nima qilayotganini kuzatamiz va xatolarni ko'ramiz.

• Brauzerda konsolni ochish: F12 → Console bo'limi (yoki Ctrl + Shift + J). U yerga to'g'ridan-to'g'ri JavaScript yozib, Enter bosish ham mumkin — masalan, 2 + 2.
• Bu saytda: JavaScript muharrirlari ostida Konsol oynasi bor. Kodni o'zgartiring yoki «Ishga tushirish» tugmasini bosing (Ctrl + Enter).

console.log("Salom, dunyo!");
console.log("Men JavaScript o'rganyapman");
console.log(2 + 3);
console.log("Natija:", 10 * 4);

Matn qo'shtirnoq ichida yoziladi, sonlar esa qo'shtirnoqsiz. console.log() ga vergul bilan bir nechta qiymat bersangiz, ular bo'sh joy bilan ajratib chiqariladi.

Buyruqlar, nuqta-vergul va katta harflar

Har bir qator — bitta buyruq (inglizcha statement). Buyruq oxiriga nuqta-vergul ; qo'yiladi. JavaScript ko'pincha ; siz ham tushunadi, lekin uni har doim qo'yish — yaxshi odat. Yana bir muhim qoida: JavaScript katta va kichik harflarni farqlaydi. console.log ishlaydi, Console.Log esa — yo'q.

Izohlar

Izoh (inglizcha comment) — kod ichidagi odamlar uchun yozilgan eslatma. Brauzer uni o'qimaydi:

// Bu — bir qatorli izoh. Brauzer uni tashlab o'tadi.
console.log("Bu qator ishlaydi");
// console.log("Bu qator esa ishlamaydi");

/*
  Bu — ko'p qatorli izoh.
  Kod nima qilishini tushuntirish uchun qulay.
*/
console.log("Izohlar xalaqit bermaydi"); // qator oxirida ham bo'ladi

O'zgaruvchilar: let va const

O'zgaruvchi (inglizcha variable) — qiymatni saqlab turadigan nomli «quti». Uni let so'zi bilan yaratamiz (bu e'lon qilish deyiladi):

let ism = "Aziz";
let yosh = 17;
console.log(ism);
console.log(yosh);

yosh = 18;   // let qiymatini o'zgartirish mumkin
console.log("Bir yildan keyin:", yosh);

Bu yerda = matematikadagi «teng» emas. U «o'ngdagi qiymatni chapdagi qutiga sol» degani (tayinlash, inglizcha assignment). let faqat bir marta — yaratishda yoziladi. Keyin o'zgaruvchi shunchaki nomi bilan ishlatiladi.

Agar qiymat hech qachon o'zgarmasligi kerak bo'lsa, const (inglizcha constant — «o'zgarmas») ishlatiladi. Uning qiymatini o'zgartirishga urinib ko'raylik — konsolda ataylab xato chiqaramiz:

const tugilganYil = 2008;
console.log("Tug'ilgan yil:", tugilganYil);

tugilganYil = 2010;   // XATO: const qiymatini o'zgartirib bo'lmaydi
console.log("Bu qator bajarilmaydi");

Konsolda TypeError: Assignment to constant variable — «o'zgarmasga qiymat tayinlash» xatosi chiqdi va dastur shu qatorda to'xtadi. Bu yaxshi: const bizni tasodifiy o'zgarishlardan himoya qiladi.

O'zgaruvchilarni nomlash

Nomlash qoidalari:

• Nom harf, raqam, _ va $ belgilaridan iborat bo'ladi, lekin raqam bilan boshlanmaydi.
• Bo'sh joy, tire - va apostrof mumkin emas: o'quvchi emas, oquvchi.
• let, const, if, class kabi tilning kalit so'zlari nom bo'la olmaydi.
• Katta-kichik harf farq qiladi: ism va Ism — ikki xil o'zgaruvchi.

Bir necha so'zli nomlar JavaScript'da camelCase («tuya uslubi») bilan yoziladi: birinchi so'z kichik harf bilan, keyingilari katta harf bilan boshlanadi — xuddi tuyaning o'rkachlari kabi: tugilganYil, umumiyNarx, talabalarSoni.

Ma'lumot turlari

Har bir qiymatning turi bor. Tur qiymat bilan nima qilish mumkinligini belgilaydi: sonlarni qo'shish mumkin, matnni esa harflarga bo'lish. JavaScript'ning asosiy turlari:

Qiymatning turini typeof («turi qanday») operatori aytib beradi:

let son = 42;
let kasr = 3.14;
let matn = "Salom";
let rost = true;
let bosh;             // qiymat berilmadi
let hechNarsa = null;

console.log(typeof son);        // number
console.log(typeof kasr);       // number
console.log(typeof matn);       // string
console.log(typeof rost);       // boolean
console.log(typeof bosh);       // undefined
console.log(typeof hechNarsa);  // object — tarixiy xato!

Satrlar: uch xil qo'shtirnoq

Satrni uch xil yozish mumkin: qo'shtirnoq "...", bittalik qo'shtirnoq '...' va teskari qo'shtirnoq — backtick `...` (klaviaturada Esc ostidagi, 1 dan chapdagi tugma).

let xato = 'Bu bo'ldi';    // SyntaxError: satr "bo" da tugadi
let togri = "Bu bo'ldi";   // to'g'ri

Backtick'ning o'ziga xos kuchi bor: uning ichida ${...} yordamida o'zgaruvchi yoki hisob-kitobni to'g'ridan-to'g'ri matnga qo'yish mumkin. Bu shablon satr (inglizcha template literal) deyiladi:

const ism = "Madina";
const yosh = 16;

// Eski usul: + bilan ulash
console.log("Mening ismim " + ism + ", men " + yosh + " yoshdaman.");

// Zamonaviy usul: shablon satr
console.log(`Mening ismim ${ism}, men ${yosh} yoshdaman.`);
console.log(`Kelasi yil ${yosh + 1} yoshga to'laman.`);

Natija bir xil, lekin shablon satrni yozish ham, o'qish ham osonroq: + va qo'shtirnoqlarni sanab o'tirish shart emas.

Arifmetik amallar

% (qoldiq) juda foydali: son % 2 nol bo'lsa — son juft; daqiqa % 60 — soatdan ortib qolgan daqiqalar. Amallar matematikadagi tartibda bajariladi: avval **, keyin * / %, so'ng + -. Tartibni o'zgartirish uchun qavs ishlatiladi.

O'zgaruvchining qiymatini o'zgartirishning qisqa yozuvlari ham bor:

let ball = 10;
ball = ball + 5;     // 15
ball += 5;           // 20 — "ball = ball + 5" ning qisqasi
ball -= 3;           // 17
ball *= 2;           // 34
ball++;              // 35 — bittaga oshirish
ball--;              // 34 — bittaga kamaytirish
console.log("Ball:", ball);
console.log((2 + 3) * 4, 2 + 3 * 4);   // qavsning ta'siri

Satr va son «tuzog'i»

+ belgisi ikki ish qiladi: sonlarni qo'shadi, satrlarni esa ulaydi. Agar ulardan biri satr bo'lsa, JavaScript ikkinchisini ham satrga aylantirib, ularni yopishtiradi. Boshqa amallar (-, *, /) esa satrni songa aylantirishga harakat qiladi:

console.log(5 + 3);       // 8
console.log("5" + 3);     // 53 — satrlar ulandi!
console.log("5" - 3);     // 2
console.log("5" * 3);     // 15
console.log(typeof ("5" + 3));   // string

Bu ayniqsa foydalanuvchi kiritgan ma'lumotda xavfli: formadagi maydon yoki prompt() dan kelgan qiymat doim satr bo'ladi, hatto foydalanuvchi son yozgan bo'lsa ham. Shuning uchun turni o'zimiz aylantiramiz:

const matn = "25";
const son = Number(matn);         // satrni songa aylantirish
console.log(son + 5);             // 30

console.log(String(100) + 1);     // 1001 — sonni satrga
console.log(parseInt("12px"));    // 12 — boshidagi butun sonni oladi
console.log(parseFloat("3.5 kg"));  // 3.5 — kasr sonni oladi
console.log(Number("salom"));     // NaN — «son emas»

NaN (inglizcha Not a Number — «son emas») — songa aylantirib bo'lmagan narsaning natijasi. Konsolda NaN ko'rsangiz, qayerdadir son o'rniga matn kelganini qidiring.

Taqqoslash: === va ==

Taqqoslash amallari true yoki false qaytaradi:

JavaScript'da tenglikni tekshirishning ikki usuli bor: === (qat'iy) va == (yumshoq). Yumshoq taqqoslash avval turlarni «moslashtiradi» va g'alati natijalar beradi:

console.log(5 === 5);       // true
console.log(5 === "5");     // false — turlari har xil
console.log(5 == "5");      // true  — == turga qaramaydi
console.log(0 == "");       // true  — g'alati!
console.log(10 !== 7);      // true

alert() va prompt()

Brauzerning ikkita oddiy oynasi bor: alert() xabar ko'rsatadi, prompt() esa savol berib, foydalanuvchi yozgan javobni satr sifatida qaytaradi. Quyidagi muharrirda qatorlar izohga olingan — sinab ko'rish uchun qator boshidagi // ni o'chiring:

// alert("Salom! Bu — alert oynasi.");

// const ism = prompt("Ismingiz nima?");
// console.log(`Salom, ${ism}!`);

// const yosh = Number(prompt("Yoshingiz nechada?"));
// console.log(`5 yildan keyin ${yosh + 5} yoshda bo'lasiz.`);

Bu oynalar sahifani «qotirib» qo'yadi va ko'rinishini o'zgartirib bo'lmaydi, shuning uchun haqiqiy saytlarda kam ishlatiladi. Keyingi darslarda ularning o'rniga sahifadagi kiritish maydonlari va tugmalardan foydalanamiz (DOM darsi).

Math — tayyor matematik vositalar

Math — JavaScript'ga o'rnatilgan «kalkulyator»: yaxlitlash, eng katta sonni topish, tasodifiy son va boshqalar:

console.log(Math.round(4.6));     // 5 — yaqin butun songa yaxlitlash
console.log(Math.floor(4.9));     // 4 — pastga yaxlitlash
console.log(Math.ceil(4.1));      // 5 — yuqoriga yaxlitlash
console.log(Math.max(3, 9, 2));   // 9 — eng kattasi
console.log(Math.min(3, 9, 2));   // 2 — eng kichigi
console.log(Math.random());       // 0 va 1 orasidagi tasodifiy son

// O'yin soqqasi: 1 dan 6 gacha tasodifiy butun son
const soqqa = Math.floor(Math.random() * 6) + 1;
console.log("Soqqa:", soqqa);

«Ishga tushirish» ni bir necha marta bosing — tasodifiy sonlar har safar boshqacha. Soqqa formulasini tahlil qilamiz: Math.random() * 6 — 0 dan 6 gacha (6 kirmaydi) kasr son; Math.floor uni 0–5 butun songa aylantiradi; + 1 esa 1–6 qiladi.

Python'ni bilsangiz

Agar Python kursini o'tgan bo'lsangiz, ko'p narsa tanish. Asosiy farqlar:

Mashqlar

const eni = 4;
const boyi = 6;
// shu yerdan davom eting

const eni = 4;
const boyi = 6;
const yuza = eni * boyi;
console.log(`Yuzi: ${yuza}`);

Men Dilnoza, Buxorodanman. Kelasi yil 16 yoshga to'laman.

const ism = "Dilnoza";
const shahar = "Buxoro";
const yosh = 15;
// shu yerga console.log yozing

const ism = "Dilnoza";
const shahar = "Buxoro";
const yosh = 15;
console.log(
  `Men ${ism}, ${shahar}danman. Kelasi yil ${yosh + 1} yoshga to'laman.`
);

const daqiqalar = 135;

const daqiqalar = 135;
const soat = Math.floor(daqiqalar / 60);
const qoldiq = daqiqalar % 60;
console.log(`${soat} soat ${qoldiq} daqiqa`);

O'zingizni sinang

const narx = 5000;
narx = 6000;