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

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

36 subscribers

51 photos

7 videos

1 file

85 links

💾 Bio: "The channel is made for learners who study most well-known coding language «JavaScript»".

▪ Telegram: t.me/absJavaScript
▪ X: twitter.com/absJavaScript

Download Telegram

About

Blog

Apps

Platform

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

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 (

,

)

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 | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

📢 10 ta "Premium" dars "bepul" o‘tildi! Sizning fikringiz muhim!

🎯 Ushbu kursning dastlabki 10 ta "Premium" darsi o‘qib chiqildi. Sizga yoqdimi? Taklif va fikrlaringizni izohlarda qoldiring!

✅ Darslar yetarlicha tushunarli bo‘ldimi?
✅ Qaysi mavzular qo‘shimcha tushuntirilishi kerak?
✅ Kelgusi darslar uchun qanday takliflaringiz bor?

✍️ Izohlarda fikr qoldirishni unutmang!

🔗 @absJavaScript

🎉2⚡1❤‍🔥1🔥1

107 viewsedited 03:01

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

10 ta "Premium" dars "bepul" o‘tildi! Fikrlaringiz qanday? Sizga yoqdimi? Oʻz fikringizni bildiring!

Anonymous Poll

Ajoyib! Davom eting! 🚀

Yaxshi, lekin yanada tushunarliroq bo‘lsa yaxshi bo‘lardi. 🤔

Yangi mavzular qo‘shilsa zo‘r bo‘lardi! 🔥

Boshqa taklifim bor, izohda yozaman! ✍️

🎉2❤‍🔥1⚡1🔥1

11 voters83 views03:04

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 | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

🇺🇿 Yoshingiz nechada?
🇺🇿 Ёшингиз нечада?
🇺🇸 How old are you? 🇷🇺 Сколько тебе лет?

Anonymous Poll

🆒2❤‍🔥1⚡1🔥1👨‍💻1

25 voters135 views03:02

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

This media is not supported in your browser

VIEW IN TELEGRAM

Ko'ring lekin yig'lamang 😁
(Yaxshiyam menda bunaqa emas 😂

🔗 @absJavaScript

🆒2❤‍🔥1🔥1😐1

164 views03:04

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

This media is not supported in your browser

VIEW IN TELEGRAM

168 views16:39

❤‍🔥2🆒2⚡1🔥1

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

🇺🇿 Eng zo'r dasturlash tili qaysi?
🇺🇿 Энг зу́р дастурлаш тили қайси?
🇺🇸 Which is the best coding language? 🇷🇺 Какой лучший язык программирования?

Anonymous Poll

Pul olib keladigani ✨

❤‍🔥2🔥2⚡1

29 voters233 views03:01

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

#Set #absJavaScript

Set

Set — bu to'plam. Faqat bunda har bir element bir marotaba foydalanishi mumkin.

let set = new Set() — yangi Set yaratildi.
set.add("abs") — qiymat qo'shildi
set.delete("abs") — qiymat olib tashlandi.
set.has("abs") — qiymat bor yo'qligi tekshiradi . Bor bo'lsa true aksida bo'lsa false
set.clear() — ma'lumotlarni tozalaydi
set.size — elementlar soni

🔗 @absJavaScript

👨‍💻2❤‍🔥1👍1🔥1

208 views03:01

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

🎉 Premium bepul darslar davom etadi! 🚀

Hurmatli dasturchilar! 🙋‍♂

📌 Sizning talablaringizga binoan, "Premium bepul" darslarimizni davom ettirishga qaror qildik!

🗓 Darslar 8-martdan boshlab yana yo‘lga qo‘yiladi! 🥳

🔹 Endi siz JavaScriptning eng muhim mavzularini tushunarli, qiziqarli va amaliy misollar bilan o‘rganishda davom etasiz.
🔹 Har bir dars sizning bilimlaringizni mustahkamlash va real loyihalar yaratish imkonini beradi.
🔹 Yo‘lda davom etamiz! 💪 Siz ham biz bilan birga o‘rganishda davom eting!

🚀 Yangiliklarni kuzatib boring, yangi darslar tez orada!

🔗 @absJavaScript

😍2❤‍🔥1👍1

82 viewsedited 03:02

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

1️⃣ #Map

Map – bu kalit-qiymat juftligi bilan ishlovchi obyekt. Oddiy obyektlardan farqli ravishda, Map har qanday turdagi kalitlarni qabul qiladi. Ularning tartibi saqlanadi va maxsus metodlari mavjud.

let map = new Map();  
map.set("name", "Ali");  
console.log(map.get("name")); // "Ali"  
map.delete("name");  
console.log(map.has("name")); // false

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

60 views12:11

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

2️⃣ #WeakSet

WeakSet – faqat obyektlarni saqlash uchun ishlatiladi. Unda primitiv qiymatlar bo‘lishi mumkin emas. WeakSet’dagi elementlarga bevosita murojaat qilib bo‘lmaydi, lekin ularning mavjudligini tekshirish mumkin.

let ws = new WeakSet();  
let obj = {name: "Ali"};  
ws.add(obj);  
console.log(ws.has(obj)); // true  
ws.delete(obj);

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

62 views03:02

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

3️⃣ #WeakMap

WeakMap – kalit sifatida faqat obyektlarni qabul qiladi. Obyekt yo‘qolib ketsa, unga bog‘liq ma’lumotlar ham avtomatik o‘chiriladi. Bu xotirani tejashga yordam beradi.

let wm = new WeakMap();  
let obj = {};  
wm.set(obj, "Ma'lumot");  
console.log(wm.get(obj)); // "Ma'lumot"  
wm.delete(obj);

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

63 views03:02

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

4️⃣ #ArrayMethods

Massivlar bilan ishlash uchun turli metodlar mavjud. Ular orqali element qo‘shish, o‘chirish, saralash va filtr qilish mumkin. Quyidagi kod misollarini ko‘rib chiqing.

let arr = [1, 2, 3, 4, 5];  
arr.push(6); // Oxiriga qo'shadi  
arr.pop(); // Oxirgi elementni o'chiradi  
arr.filter(x => x > 2); // 2dan kattalarini oladi

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

63 views03:00

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

5️⃣ #StringMethods

String metodlari matnlar bilan ishlashda juda muhim. Ular yordamida uzunlikni bilish, katta-kichik harflarga o‘zgartirish, almashtirish va boshqa ko‘plab amallarni bajarish mumkin.

let str = "JavaScript";  
console.log(str.length); // 10  
console.log(str.toUpperCase()); // "JAVASCRIPT"  
console.log(str.replace("Script", "Lang")); // "JavaLang"

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

76 views03:03

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

7⃣ #ObjectMethods

Obyektlar ustida ishlash uchun maxsus metodlar mavjud. Ushbu metodlar yordamida obyektni tahlil qilish, nusxalash va ma’lumotlarni o‘zgartirish mumkin.

let obj = {name: "Ali", age: 25};  
console.log(Object.keys(obj)); // ["name", "age"]  
console.log(Object.values(obj)); // ["Ali", 25]  
console.log(Object.entries(obj)); // [["name", "Ali"], ["age", 25]]

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

78 views03:01

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

8️⃣ #SpreadOperator

Spread operator (...) obyekt va massivlarni kengaytirish uchun ishlatiladi. Bu kodni soddalashtiradi va ma’lumotlar bilan qulay ishlash imkonini beradi.

let arr1 = [1, 2, 3];  
let arr2 = [...arr1, 4, 5];  
console.log(arr2); // [1, 2, 3, 4, 5]  

let obj1 = {a: 1, b: 2};  
let obj2 = {...obj1, c: 3};  
console.log(obj2); // {a: 1, b: 2, c: 3}

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

91 views03:02

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

9⃣ #RestOperator

Rest operator (...) bir nechta argumentlarni bitta massiv sifatida olish imkonini beradi. Bu funksiyalar bilan ishlashda juda foydali.

function sum(...numbers) {  
  return numbers.reduce((a, b) => a + b, 0);  
}  
console.log(sum(1, 2, 3, 4)); // 10

🔗 @absJavaScript | #JvSc@absJavaScript

👍3❤‍🔥1

77 views03:02