JavaScript bilan tanishuv - JavaScript asoslari

HTML sahifaning suyagi, CSS uning ko'rinishi. JavaScript esa uning harakati - tugma bosilganda nima bo'lishini u hal qiladi.

Uch tilning vazifasi #

Bu darslikda uchinchi qatlamni o'rganamiz

Birinchi dastur #

JavaScript

console.log("Salom, JavaScript!");

Natija

Salom, JavaScript!

console.log - ekranga chiqarish buyrug'i. Python dagi print, C dagi printf ning muqobili.

JavaScript ni qayerda ishga tushirish mumkin?

Joy	Qanday
Brauzer konsoli	`F12` → Console yorlig'i
HTML fayl ichida	`<script>` tegi orqali
Node.js	Terminalda `node fayl.js`
Onlayn	CodePen, JSFiddle, PlayCode

Eng tez usul - brauzeringizda F12 ni bosing, Console yorlig'iga o'ting va shu yerga yozing:

JavaScript

console.log("Salom!");

Bu darslikdagi barcha misollar Node.js da tekshirilgan, DOM misollari esa brauzerda.

HTML sahifaga ulash #

HTML

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>Birinchi JavaScript</title>
</head>
<body>
    <h1>Mening sahifam</h1>
    <button id="salomTugma">Bosing</button>

    <!-- skript body oxirida - HTML yuklangandan keyin ishlaydi -->
    <script src="skript.js"></script>
</body>
</html>

JavaScript

// skript.js fayli
const tugma = document.getElementById("salomTugma");

tugma.addEventListener("click", function () {
    alert("Tugma bosildi!");
});

<script> ni qayerga qo'yish kerak?

Brauzer HTML ni yuqoridan pastga o'qiydi. Agar skriptni <head> ichiga qo'ysangiz, u hali mavjud bo'lmagan elementni qidiradi va null oladi.

Uch yechim bor:

HTML

<!-- 1. body oxirida - eng oddiy -->
<script src="skript.js"></script>

<!-- 2. defer - HTML tahlil qilingach ishlaydi -->
<script src="skript.js" defer></script>

<!-- 3. async - yuklanishi bilan darhol ishlaydi -->
<script src="skript.js" async></script>

defer eng yaxshi tanlov: skript parallel yuklanadi, lekin faqat HTML tayyor bo'lgach ishga tushadi va tartib saqlanadi.

async tartibni kafolatlamaydi - bir-biriga bog'liq skriptlar uchun yaramaydi.

Kommentariyalar #

JavaScript

// Bu bir qatorlik komment

/*
   Bu ko'p qatorlik
   komment
*/

console.log("Kod ishlaydi");   // qator oxirida ham mumkin
// console.log("Bu ishlamaydi - komment ichida");

Natija

Kod ishlaydi

O'zgaruvchi bilan tanishuv #

JavaScript

let ism = "Husanboy";
let yosh = 25;
let shahar = "Namangan";

console.log("Ism   : " + ism);
console.log("Yosh  : " + yosh);
console.log("Shahar: " + shahar);

// Shablon satri - ancha qulay
console.log(`${ism}, ${yosh} yosh, ${shahar} shahridan`);

Natija

Ism   : Husanboy
Yosh  : 25
Shahar: Namangan
Husanboy, 25 yosh, Namangan shahridan

Shablon satrlari (template literals)

Oddiy qo'shtirnoq o'rniga teskari tirnoq (`) ishlatilsa, ichida ${...} orqali o'zgaruvchi qo'yish mumkin:

JavaScript

`Salom, ${ism}!`

Bu tugma klaviaturaning yuqori chap burchagida, Esc ostida joylashgan.

Afzalliklari:

+ bilan ulash shart emas;
Ichida ifoda ham yozish mumkin: `${2 + 2}`;
Ko'p qatorli matn yozish mumkin - \n kerak emas.

JavaScript

const xabar = `Birinchi qator
Ikkinchi qator`;

`console` ning boshqa imkoniyatlari #

JavaScript

console.log("Oddiy xabar");
console.warn("Ogohlantirish");
console.error("Xato xabari");

// Bir nechta qiymatni birga
console.log("Ism:", "Malika", "Yosh:", 22);

// Jadval ko'rinishida
console.table([
    { ism: "Husanboy", yosh: 25 },
    { ism: "Nodira", yosh: 23 }
]);

Natija

Oddiy xabar
Ogohlantirish
Xato xabari
Ism: Malika Yosh: 22
┌─────────┬────────────┬──────┐
│ (index) │ ism        │ yosh │
├─────────┼────────────┼──────┤
│ 0       │ 'Husanboy' │ 25   │
│ 1       │ 'Nodira'   │ 23   │
└─────────┴────────────┴──────┘

console.log va vergul farqi

JavaScript

console.log("Yosh: " + 25);     // satrga aylantiradi
console.log("Yosh:", 25);       // ikkita alohida qiymat

Vergul bilan yozish afzalroq:

Obyektlar to'liq ko'rinadi, [object Object] emas;
Brauzer konsolida ularni ochib ko'rish mumkin;
Turlar saqlanadi - son son bo'lib qoladi.

Ayniqsa obyekt bilan farq katta:

JavaScript

const foydalanuvchi = { ism: "Aziza", yosh: 24 };

console.log("Ma'lumot: " + foydalanuvchi);   // Ma'lumot: [object Object]
console.log("Ma'lumot:", foydalanuvchi);     // Ma'lumot: { ism: 'Aziza', yosh: 24 }

JavaScript qayerda ishlatiladi? #

Soha	Misollar
Frontend	Sahifa interaktivligi, formalar, animatsiya
Backend	Node.js bilan server, API
Mobil ilova	React Native, Ionic
Desktop	Electron (VS Code, Discord shu bilan yozilgan)
O'yinlar	Brauzer o'yinlari, Phaser
Avtomatlashtirish	Skriptlar, botlar

Til haqida qisqacha #

JavaScript

// JavaScript nuqta-vergulsiz ham ishlaydi
let birinchi = 10
let ikkinchi = 20
console.log(birinchi + ikkinchi)

Natija

Nuqta-vergul qo'yish yaxshi odat

JavaScript avtomatik nuqta-vergul qo'yish (ASI) mexanizmiga ega, shuning uchun yuqoridagi kod ishlaydi.

Lekin ba'zi holatlarda bu noto'g'ri natija beradi:

JavaScript

const salom = "Salom"
const xabar = salom
[1, 2].forEach(console.log)      // xato!

JavaScript buni bitta ifoda deb o'qiydi: salom[1, 2].forEach(...).

Qoida: har doim nuqta-vergul qo'ying. Bu darslikda ham shunday qilinadi.

Tarixdan qisqacha #

Yil	Voqea
1995	Brendan Eich JavaScript ni 10 kunda yaratdi
1997	ECMAScript standarti qabul qilindi
2009	Node.js - JavaScript serverga chiqdi
2015	ES6 - `let`, `const`, arrow, class, modullar
Har yil	Yangi versiya (ES2016, ES2017, ...)

JavaScript va Java - butunlay boshqa tillar

Nomlar o'xshash bo'lsa-da, ular hech qanday aloqaga ega emas.

1995-yilda Java juda mashhur edi. Netscape kompaniyasi o'z tilini reklama qilish uchun uni "JavaScript" deb atadi - bu marketing qarori edi.

Farqi:

	JavaScript	Java
Turlar	Dinamik	Statik
Bajarilishi	Interpretator	Kompilyatsiya (JVM)
Ishlatilishi	Veb, server	Korporativ, Android

Ular orasidagi bog'liqlik "avtomobil" va "avtobus" so'zlaridagi kabi - faqat nomda.

Amaliy topshiriq

Brauzeringizda F12 bosib, konsolga console.log("Salom") yozing.
HTML fayl yaratib, unga <script> orqali JS faylni ulang.
defer va async farqini o'z so'zingiz bilan tushuntiring.
Uchta o'zgaruvchi yaratib, ularni konsolga chiqaring.
Shablon satri bilan bitta jumla yig'ing.
Ko'p qatorli matnni teskari tirnoq bilan yozing.
console.warn va console.error farqini ko'ring.
console.table bilan uchta obyektni jadval qilib chiqaring.
"Yosh: " + obyekt va "Yosh:", obyekt farqini sinang.
Nuqta-vergulsiz kod xato beradigan misol toping.

Xulosa #

HTML tuzilma, CSS ko'rinish, JavaScript xatti-harakat.
console.log - ekranga chiqarishning asosiy usuli.
Skriptni body oxirida yoki defer bilan ulang.
defer tartibni saqlaydi, async saqlamaydi.
Shablon satrlari (`) o'zgaruvchi qo'yishni osonlashtiradi.
console.log da vergul ishlating, + emas.
JavaScript brauzerda ham, Node.js orqali serverda ham ishlaydi.
Nuqta-vergul qo'yish yaxshi odat - ASI xatolaridan saqlaydi.
JavaScript va Java butunlay boshqa tillar.

Keyingi bo'limda o'zgaruvchilar va ma'lumot turlarini batafsil ko'ramiz.

Uch tilning vazifasi #

Birinchi dastur #

HTML sahifaga ulash #

Kommentariyalar #

O'zgaruvchi bilan tanishuv #

console ning boshqa imkoniyatlari #

JavaScript qayerda ishlatiladi? #

Til haqida qisqacha #

Tarixdan qisqacha #

Xulosa #

Xatolik topdingizmi?

`console` ning boshqa imkoniyatlari #