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
#HTML #CSS #WebDasturlash #Frontend #Dasturlash #LearnToCode

5. HTML asosiy teglari โ€“ Veb-sahifaga tuzilma berish


Har bir HTML hujjati teglar orqali yaratiladi. Bugun asosiy HTML teglarini koโ€˜rib chiqamiz!

๐Ÿ“Œ Eng Muhim HTML Teglari

Quyida asosiy HTML teglar va ularning vazifalari keltirilgan:

๐Ÿ“ Amaliy Misol

<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<title>HTML Teglari</title>
</head>
<body>
<h1>Salom, HTML!</h1>
<p>Bu oddiy matn.</p>
<a href="https://google.com" target="_blank">Google-ga o'tish</a>
<img src="image.jpg" alt="RASM_TAVSIFI">
</body>
</html>

๐Ÿ“Œ Tavsiyalar:
โœ… <h1> โ€“ eng katta sarlavha, <h6> โ€“ eng kichik.
โœ… <a href="url"> โ€“ sahifani boshqa sahifaga bogโ€˜lash uchun ishlatiladi.
โœ… <img> โ€“ rasmlar uchun ishlatiladi (alt โ€“ rasm tavsifi).

โฎ
Avvalgi postda "HTML asoslari โ€“ dastlabki sahifamiz" mavzusi yoritilgan.
โญ Keyingi postda "HTML formalar va foydalanuvchi kiritmalarini" yoritiladi!

๐Ÿ”— @absJavaScript | #
#JaSc@absJavaScript
๐Ÿ”ฅ2โคโ€๐Ÿ”ฅ1โšก1๐Ÿ‘1
#HTML #CSS #WebDasturlash #Frontend #Dasturlash #Forms #LearnToCode

6. HTML formlar โ€“ Foydalanuvchi kiritmalarini qanday olamiz?


Veb-saytlarda foydalanuvchilardan maโ€™lumot olish uchun HTML formalar ishlatiladi. Bugun formalar va input turlarini oโ€˜rganamiz!

๐Ÿ“Œ Formaning Tuzilishi

HTML formasi <form> tegi ichida yaratiladi va turli input elementlarini oโ€˜z ichiga oladi.

Misol: Oddiy roโ€˜yxatdan oโ€˜tish formasi

<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="UTF-8">
<title>Roโ€˜yxatdan oโ€˜tish</title>
</head>
<body>
<h2>Roโ€˜yxatdan oโ€˜tish</h2>
<form action="submit.php" method="POST">
<label for="name">Ismingiz:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Parol:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Yuborish</button>
</form>
</body>
</html>

๐Ÿ“Œ Muhim Form Elementlari

๐Ÿ“Œ Formani Toโ€˜gโ€˜ri Ishlatish


โœ… action="submit.php" โ€“ maโ€™lumot joโ€˜natiladigan server manzili.
โœ… method="POST" โ€“ maโ€™lumot joโ€˜natish usuli (GET yoki POST).
โœ… required โ€“ foydalanuvchi ushbu maydonni toโ€˜ldirishini talab qiladi.

โฎ Avvalgi postda "HTML asosiy teglari โ€“ Veb-sahifaga tuzilma berish" yoritiladi.
โญ Keyingi postda "HTML jadval (table) yaratish" yoritiladi.

๐Ÿ”— @absJavaScript | #JaSc@absJavaScript
๐Ÿ”ฅ2โคโ€๐Ÿ”ฅ1โšก1โค1
#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
#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
#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
#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
๐Ÿ“ข 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
๐Ÿ‡บ๐Ÿ‡ฟ Yoshingiz nechada?
๐Ÿ‡บ๐Ÿ‡ฟ ะัˆะธะฝะณะธะท ะฝะตั‡ะฐะดะฐ?
๐Ÿ‡บ๐Ÿ‡ธ How old are you? ๐Ÿ‡ท๐Ÿ‡บ ะกะบะพะปัŒะบะพ ั‚ะตะฑะต ะปะตั‚?
Anonymous Poll
64%
18 -
20%
18 <-> 24
4%
25 <-> 39
4%
40 <-> 59
8%
60 +
๐Ÿ†’2โคโ€๐Ÿ”ฅ1โšก1๐Ÿ”ฅ1๐Ÿ‘จโ€๐Ÿ’ป1
๐Ÿ‡บ๐Ÿ‡ฟ Eng zo'r dasturlash tili qaysi?
๐Ÿ‡บ๐Ÿ‡ฟ ะญะฝะณ ะทัƒฬั€ ะดะฐัั‚ัƒั€ะปะฐัˆ ั‚ะธะปะธ า›ะฐะนัะธ?
๐Ÿ‡บ๐Ÿ‡ธ Which is the best coding language? ๐Ÿ‡ท๐Ÿ‡บ ะšะฐะบะพะน ะปัƒั‡ัˆะธะน ัะทั‹ะบ ะฟั€ะพะณั€ะฐะผะผะธั€ะพะฒะฐะฝะธั?
Anonymous Poll
52%
JavaScript
31%
Python
7%
C#
10%
Pul olib keladigani โœจ
โคโ€๐Ÿ”ฅ2๐Ÿ”ฅ2โšก1
#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
๐ŸŽ‰ 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
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
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