JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#HTML #CSS #WebDasturlash #Frontend #Dasturlash #Tables #LearnToCode

Darsni davom etamiz…

7. HTML Jadval (Table) Yaratish

Agar siz "ma'lumotlarni tartibli" ko‘rinishda aks ettirmoqchi bo‘lsangiz, "HTML jadvallari (tables)" dan foydalanishingiz mumkin. Bugun "HTML jadval yaratish" va "asosiy teglarini" o‘rganamiz!

📌 HTML jadvalining tuzilishi

Jadval <table> tegi yordamida yaratiladi va quyidagi elementlardan iborat bo‘ladi.

📝 Amaliy misol

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>HTML Jadval</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h2>O‘quvchilar Ro‘yxati</h2>
    <table>
        <tr>
            <th>#</th>
            <th>Ism</th>
            <th>Yosh</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ali</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bekzod</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

📌 Izoh:
✅ <th> – jadval ustunlari uchun sarlavha beradi.
✅ <td> – oddiy katak (ma’lumot joylashadi).
✅ border-collapse: collapse; – chegaralarni birlashtirib, yaxlit ko‘rinish hosil qiladi.

⏮ Avvalgi postda "HTML formlar – Foydalanuvchi kiritmalarini qanday olamiz?" yoritilgan.
⏭ Keyingi postda "CSS Asoslari – Veb-sahifalarni Chiroyli Qilish" yoritiladi

🔗 @absJavaScript | #JaSc@absJavaScript

❤2❤‍🔥2⚡1

81 viewsedited 03:01

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#CSS #HTML #Frontend #WebDasturlash #LearnToCode #WebDesign #Dasturlash

Darsni davom ettiramiz…

8. CSS Asoslari – Veb-sahifalarni Chiroyli Qilish

Agar veb-sahifangiz odamlarni jalb qiluvchi bo‘lishini istasangiz, CSS dan foydalanishingiz kerak! Bugun CSS nima ekanligi va qanday ishlatilishini o‘rganamiz.

📌 CSS Nima?

CSS (Cascading Style Sheets) – bu veb-sahifaning dizaynini belgilovchi uslublar to‘plami.

🔹 HTML – veb-sahifaning skeleti
🔹 CSS – sahifaning dizayni

— — — — — — — — —

👨‍💻 CSS Qanday Ishlatiladi?

CSS kodini uch xil usulda yozish mumkin:

1️⃣ Inline CSS (HTML teglari ichida yozish)

<p style="color: blue; font-size: 18px;">Bu ko‘k rangdagi matn.</p>

✅ Tez ishlaydi, ❌ lekin kod tartibsiz bo‘lib ketishi mumkin.

— — — — — — — — —

2️⃣ Internal CSS (HTML faylning <style> qismida yozish)

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>CSS Misol</title>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Bu qizil rangdagi matn.</p>
</body>
</html>

✅ HTML bilan bir joyda, ❌ lekin kod o‘sib ketgan sari qiyinlashadi.

— — — — — — — — —

3️⃣ External CSS (Alohida .css faylda yozish)

style.css faylini yaratamiz:

p {
    color: green;
    font-size: 22px;
}

Keyin uni HTML faylga ulaymiz:

<link rel="stylesheet" href="style.css">

✅ Eng toza va katta loyihalar uchun eng yaxshi usul!

— — — — — — — — —

📌 CSS Qanday Foyda Keltiradi?

✔️ Veb-sahifani chiroyli va zamonaviy qiladi
✔️ Kodni tartibli va o‘zgartirishga qulay qiladi
✔️ Bir CSS fayl bilan bir nechta HTML sahifalarni boshqarish mumkin

⏮ Avvalgi postda "HTML jadval (Table) yaratish" mavzusi yoritilgan!
⏭ Keyingi postda "CSS ranglar va fon (Background) bilan ishlash" yoritiladi!

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2⚡1

81 viewsedited 03:03

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#CSS #WebDasturlash #Frontend #HTML #Background #Colors #LearnToCode

Darslarni davom ettiramiz…

9. CSS Ranglar va Fon (Background) Bilan Ishlash

Veb-sahifalar chiroyli ko‘rinishi uchun ranglar va fon tasvirlari muhim rol o‘ynaydi. Bugun CSS da rang berish usullari va fonni o‘zgartirish usullarini o‘rganamiz!

— — — — — — — — —

🎨 CSS Ranglarni Qanday Berish Mumkin?

CSS da ranglarni berishning 3 xil usuli bor:

1️⃣ Nom bilan (red, blue, green)

h1 {
    color: blue;
}

2️⃣ RGB kodi bilan (rgb(255, 0, 0))

p {
    color: rgb(255, 0, 0);
}

3️⃣ Hex kodi bilan (

#ff0000

#00ff00

)

h2 {
    color: #ff0000;
}

📌 RGB va Hex kodlari yordamida har qanday rangni yaratish mumkin!

— — — — — — — — —

🖼️ CSS Background – Fonni O‘zgartirish

1️⃣ Oddiy rang berish

body {
    background-color: lightgray;
}

2️⃣ Rasmni fon sifatida qo‘yish

body {
    background-image: url("background.jpg");
    background-size: cover;
    background-position: center;
}

3️⃣ Gradient fon yaratish

body {
    background: linear-gradient(to right, red, blue);
}

📌 Tushuncha:
✅ background-color – oddiy fon rangi.
✅ background-image – fon tasviri.
✅ background-size: cover; – tasvirni ekran bo‘ylab to‘liq joylashtirish.
✅ linear-gradient() – ranglarning yumshoq o‘tishini yaratadi.

— — — — — — — — —

🎯 Amaliy Misol

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>CSS Fonlar</title>
    <style>
        body {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            text-align: center;
            font-size: 24px;
            padding: 50px;
        }
    </style>
</head>
<body>
    <h1>CSS Ranglar va Fon</h1>
    <p>Bu sahifada gradient fon qo‘llanilgan.</p>
</body>
</html>

⏮ Oldingi postda "CSS asoslari – veb-sahifalarni chiroyli qilish" mavzusi yoritilgan.
⏭ Keyingi postda "CSS Shriftlar (Fonts) va Matnni Stilizatsiya Qilish" yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2👍1

94 viewsedited 03:03

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#CSS #WebDasturlash #Frontend #Fonts #Typography #HTML #LearnToCode

10. CSS Shriftlar (Fonts) va Matnni Stilizatsiya Qilish

🔗 @absJavaScript | #JaSc@absJavaScript

🔥2❤‍🔥1⚡1👍1

85 viewsedited 03:01

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#CSS #WebDasturlash #Frontend #Fonts #Typography #HTML #LearnToCode

10. CSS Shriftlar (Fonts) va Matnni Stilizatsiya Qilish

Veb-sahifada matnning ko‘rinishi juda muhim. Bugun CSS da shriftlar bilan ishlash va matnni stilizatsiya qilish usullarini o‘rganamiz!

— — — — — — — — — —

📌 CSS Font Xususiyatlari

CSS da matn va shriftlarni boshqarish uchun quyidagi xususiyatlar ishlatiladi:

— — — — — — — — — —

🖋 CSS da Oddiy Shrift Qo‘llash

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

📌 Maslahat: sans-serif, serif, monospace kabi umumiy shrift oilalarini qo‘shish yaxshiroq.

— — — — — — — — — —

🖋 Google Fonts ishlatish (Maxsus shriftlar)

1️⃣ Google Fonts saytidan shrift tanlaymiz: https://fonts.google.com
2️⃣ HTML faylga qo‘shamiz:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">

3️⃣ CSS da ishlatamiz:

p {
    font-family: 'Poppins', sans-serif;
}

— — — — — — — — — —

🎯 Amaliy Misol

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>CSS Shriftlar</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            text-align: center;
        }
        h1 {
            font-size: 32px;
            font-weight: bold;
        }
        p {
            font-size: 20px;
            line-height: 1.5;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>CSS Shriftlar va Matn</h1>
    <p>Bu yerda maxsus shrift va matn effektlari qo‘llangan.</p>
</body>
</html>

— — — — — — — — — —

~~✅ Endi veb-sahifalaringiz matnlari yanada chiroyli ko‘rinadi!~~

⏮ Avvalgi postda "CSS ranglar va fon (Background) bilan ishlash" mavzusi yoritilgan.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2👍1

116 viewsedited 03:01

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

📌 Premium bepul darslar – to‘liq ro‘yxat! 🚀

Hurmatli dasturchilar! 👨‍💻

Siz uchun "Premium bepul" darslarining to‘liq ro‘yxatini taqdim etamiz. Quyidagi havolalar orqali barcha darslarni osongina topishingiz va qayta o‘qib chiqishingiz mumkin.

📖 1-10 darslar:
1️⃣ Dars 1 –⟩ Kirish
2️⃣ Dars 2 –⟩ JavaScriptni ishlatish
3️⃣ Dars 3 –⟩ HTML, CSS va JavaScript farqi
4️⃣ Dars 4 –⟩ HTML asoslari
5️⃣ Dars 5 –⟩ HTML asosiy teglari
6️⃣ Dars 6 –⟩ HTML formlari
➕ Dars 6 —⟩ HTML formlari
7️⃣ Dars 7 –⟩ HTML jadval yaratish
➕ Dars 7 —⟩ HTML jadval yaratish
8️⃣ Dars 8 –⟩ CSS asoslari
9️⃣ Dars 9 –⟩ CSS ranglar va fon
🔟 Dars 10 –⟩ CSS shriftlar va stilizatsiya
➕ Dars 10 —⟩ CSS shriftlar va stilizatsiya

📌 Yangi darslarni kuzatib boring, eng qiziqarli mavzular oldinda!

🔗 @absJavaScript | #JaSc@absJavaScript

🎉2⚡1❤‍🔥1👍1🔥1

129 viewsedited 03:03

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

11. – JavaScript sintaksisi va konsol

🚀 JavaScriptga ilk qadam!

Assalomu alaykum, dasturlashga qiziqqan do‘stlar!
Bugun siz bilan JavaScript sintaksisi bilan tanishamiz va konsolda kod yozishni o‘rganamiz.

✍️ Sintaksis – bu dasturlash tilining grammatikasi. To‘g‘ri sintaksis yozilmasa, kod ishlamaydi.

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

🛠 console.log() – bu brauzerning konsolida ma’lumot chiqarish uchun ishlatiladi.

🖥 Konsolni ochish uchun:

• Chrome: F12 → “Console”

• Firefox: Ctrl + Shift + K

Misol:

console.log(5 + 3); // 8
console.log("Bugun dars 11");

Siz uchun vazifa:
O‘zingiz haqingizda 3 ta console.log() yozing.

⏭ Keyingi postda "O'zgaruvchilar: var, let, const" haqida o‘rganamiz.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥1👍1

131 viewsedited 04:24

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#JavaScript #Frontend #Dasturlash #LearnJS #WebDevelopment #absJavaScript

2️⃣ Dars 12 – O‘zgaruvchilar: var, let, const

💡 JavaScriptda o‘zgaruvchi — bu ma’lumotni saqlovchi konteyner.

🔹 var — eski usul (hozir kam ishlatiladi)

var ism = "Falonchi";
console.log(ism);

⚠️ var — funksional ko‘lamga ega, ya’ni faqat funksiya ichida ishlaydi.
❗ Qayta e’lon qilish mumkin, ammo bu xatolarga olib kelishi mumkin.

🔹 let — zamonaviy va xavfsiz

let yosh = 18;
yosh = 19;
console.log(yosh);

✅ let — blok ko‘lamga ega.
✍️ Qiymatini o‘zgartirish mumkin, lekin qayta e’lon qilib bo‘lmaydi.

🔹 const — o‘zgarmas qiymatlar uchun

const PI = 3.14;
console.log(PI);

🔐 const bilan e’lon qilingan qiymat hech qachon o‘zgarmaydi.
🎯 Asosan doimiy qiymatlar uchun ishlatiladi.

✅ Qachon qaysi biri ishlatiladi?

let → qiymatni keyin o‘zgartirish kerak bo‘lsa

const → butunlay o‘zgarmaydigan qiymat bo‘lsa

var → ishlatmaslik tavsiya etiladi ❌

🧪 Amaliy masala:

let ism = "Ali";
let yosh = 20;

console.log(ism + " " + yosh + " yoshda.");

🧠 Natija: Ali 20 yoshda.

⏮ Avvalgi postda "JavaScript sintaksisi va konsol" haqida tushuncha berilgan.
⏭ Keyingi postda "Ma’lumot turlari (Data Types)" haqida o‘rganamiz.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥1👍1

181 viewsedited 11:10

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#JavaScript #Frontend #Dasturlash #LearnJS #WebDevelopment #absJavaScript

2️⃣ Dars 13 – Ma’lumot turlari (Data Types)

🧠 JavaScriptda ma’lumotlar turli ko‘rinishda bo‘ladi. Har birining o‘ziga xos vazifasi bor.

🔸 Primiv (oddiy) ma’lumot turlari:
1. String – matnlar uchun

let ism = "Islombek";

2. Number – butun yoki o‘nlik sonlar

let yosh = 18;
let narx = 12.5;

3. Boolean – true yoki false

let to‘g‘ri = true;
let noto‘g‘ri = false;

4. Undefined – qiymat belgilanmagan

let x;
console.log(x); // undefined

5. Null – bo‘sh qiymat

let qiymat = null;

6. Symbol – noyob identifikator (kam ishlatiladi)
7. BigInt – katta sonlar uchun

let kattaSon = 1234567890123456789012345678901234567890n;

🔹 Obyekt turlari (Complex types):
Object

let talaba = {
  ism: "Ali",
  yosh: 20
};

Array (Massiv)

let ranglar = ["qizil", "yashil", "ko‘k"];

Function

function salomBer() {
  console.log("Salom!");
}

📌 typeof operatori
Ma’lumot turini aniqlash uchun ishlatiladi:

let yosh = 18;
console.log(typeof yosh); // number

📘 Har bir ma’lumot turi o‘z joyida ishlatiladi. Masalan, tugmani bosilganini tekshirishda boolean, ismni saqlashda string, narxda number kerak bo‘ladi.

⏮ Avvalgi postda "Oʻzgaruvchilar: var, let, const" o‘zgaruvchilari haqida tushuncha berilgan.
⏭ Keyingi postda "Operatorlar (Amallar)" haqida o‘rganamiz.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥1👍1

259 viewsedited 03:01

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#JavaScript #Frontend #Dasturlash #LearnJS #WebDevelopment #absJavaScript

2️⃣ Dars 14 – Operatorlar (Amallar)

🔧 JavaScriptda operatorlar orqali qiymatlar ustida turli hisob-kitoblar va solishtirishlar amalga oshiriladi.

🔹 Aritmetik operatorlar:

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1

➕ + — qo‘shish
➖ - — ayirish
✖️ * — ko‘paytirish
➗ / — bo‘lish
♻️ % — qoldiqni olish

🔹 Tayyorlovchi (assignment) operatorlar:

let x = 5;
x += 2; // x = x + 2
console.log(x); // 7

➡️ = – belgilash
➕ +=, ➖ -=, ✖️ *=, ➗ /=, ♻️ %=

🔹 Solishtirish operatorlari:

console.log(5 == "5");   // true
console.log(5 === "5");  // false
console.log(5 != 3);     // true
console.log(5 > 3);      // true
console.log(5 <= 5);     // true

✅ == – qiymat tengmi?
✅ === – qiymat va turi tengmi?
❌ !=, !== – teng emas
🔼 <, >, <=, >=

🔹 Mantiqiy (logical) operatorlar:

let yosh = 20;
console.log(yosh > 18 && yosh < 25); // true

&& – va
|| – yoki
! – inkor (not)

✅ Amaliy masala:

let yosh = 16;

if (yosh >= 18) {
  console.log("Siz katta yoshdasiz");
} else {
  console.log("Siz hali voyaga yetmagansiz");
}

⏮ Avvalgi postda "Ma’lumot turlari (Data Types)" haqida tushuncha berilgan.
⏭ Keyingi postda "Shart operatorlari (if, else, switch)" haqida o‘rganamiz.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥1👍1

363 viewsedited 03:00

About

Blog

Apps

Platform