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

#Dasturchilik #GitHub #Sayt #Site #Profil #Profile

Sizning "Dasturchilik" akkauntingiz "GitHub" saytida boʻladi. Siz u yerga oʻzingizning "portfolio" (shaxsiy) saytingizni, oʻzingiz haqida maʼlumotingizni kiritishingiz mumkin.

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

👍2❤‍🔥1🔥1🫡1🆒1

153 viewsedited 12:26

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

#Dasturchilik #GitHub #Sayt #Site #Profil #Profile Sizning "Dasturchilik" akkauntingiz "GitHub" saytida boʻladi. Siz u yerga oʻzingizning "portfolio" (shaxsiy) saytingizni, oʻzingiz haqida maʼlumotingizni kiritishingiz mumkin. ⚡️JavaScript 💫 Hoziroq obuna…

Keyingi foydali post uchun

reaksiya

ni ayamay

bosamiz

goo

👆

tekin ekan deb 😁)

🫡3❤‍🔥1⚡1🔥1🆒1

131 viewsedited 17:31

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

#Site #Sayt #Yangilik #Diqqat

❗️ Y A N G I L I K ❗️

Sayt desktop 💻 uchun tayyor. (Kompyuter 💻 )

➖➖➖➖➖➖➖➖

Site is available for desktop 💻 versio (Computer 💻)

Ssilka

https://islombekxojamnazarov.vercel.app/

Reaksiyani portlatamiz 🎉 goo

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

❤‍🔥1🔥1🎉1🏆1🆒1

141 viewsedited 12:12

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

❄️ Happy first day of the "WINTER"

☃1❤‍🔥1👍1🔥1🆒1

90 viewsedited 07:10

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

#challenge #snow #JavaScript #absJavaScript #HTML #CSS #JS #winter

Sinab koʻringchi nima chiqar ekan 😉.

Code 👇

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>Snow</title>
</head>
<body>

<section class="section">
<div class="section-container">
<img class="section-container-img" href="https://images.app.goo.gl/8ctwMkEr5ZurDYLR6" alt="snow-icon">
<button class="print">Print</button>
</div>
</section>

</body>
</html>

*{
margin: 0;
padding: 0;
}

.section{
padding-top: 75px;
padding-bottom: 75px;
bacground-color: #2BBFFF;
}
.section-container{
margin-left: auto;
margin-right: auto;
width: 1200px;
display: flex;
justify-content: space-between;
}
.section-container-img{
width: 100px;
height: 100px;
}
.print{
padding: 10px;
color: #000;
bacground-color: #FFF;
border-radius: 8px;
border: none;
}

let btn = document.querySelector('.print');

btn.addEventListener('click', function(){
  print();
});

☃2❤‍🔥1👍1🔥1🏆1🆒1

125 viewsedited 12:21

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

#JS #CSS #HTML #absJavaScript #JavaScript #Tutorial #Foydali

Frontend dasturchi bo'lish uchun , nimalarni bilishim kerak ⁉️

Asosiysi — html , css va javascript ni bilishiz kerak.

Tekinga o'rganish uchun manbalar:

Dasturlashga kirishdan oldin , qisqacha malumot:

1⃣. https://www.youtube.com/watch?v=WXDDLyTI2Dk
2⃣. https://www.youtube.com/watch?v=KcJESju6KDs

HTML ni o'rganish uchun:

html ( boshlang'ich ) — https://www.youtube.com/watch?v=xcGtfYUfDLo&list=PLHNaMQIyrDHOZhHnc2UdQEOHrb1xM7HaF
html ( yuqori ) — https://www.youtube.com/watch?v=OdkbJgQUrZ0&list=PLXJSt32YUa4V2XJRrR2tkJTf_MPsiY32m&index=18

CSS ni o'rganish uchun:

1⃣. https://www.youtube.com/watch?v=cUz7lqCNn1A&list=PLXJSt32YUa4U3kviEXBjQ9MJud0Xi-8P8

( 9 ta darsni tugating )

2⃣. https://www.youtube.com/watch?v=Zn5uwsNdTjE&list=PLXJSt32YUa4XbOFdKE8uwCbccpD-nGaPL&index=5

( 25 ta darsni tugatish )

CSS da amalyot qilish uchun:

1⃣. https://www.youtube.com/watch?v=al4u2WER84Q
2⃣. https://www.youtube.com/watch?v=jWW18aIECWg&t=12s
3⃣. https://www.youtube.com/watch?v=hJTcMmWB888&t=2s

javascript ni o'rganish uchun:

1⃣. https://www.youtube.com/watch?v=zJuDsji3IbE&list=PLNS3PujVHR-ay0HpqbsPWccgEhJZk6K9u

(to'liq tugatish)

2⃣. https://youtu.be/CdlPHoTmZqU?si=0bnqscbKBzUOaYC3
3⃣. https://youtu.be/Q3tFsK9B6S4?si=C_vFkCNG6CI6ShHH
4⃣. https://youtu.be/lvHCgNKvODs?si=3piXfbdjmP41PUIy

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

❤‍🔥1☃1👍1🔥1🏆1🆒1

153 viewsedited 12:33

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

Hi there!
Thanks to following our team 🥳

The count of subscribers reach to about 1⃣0⃣0⃣.

👍2❤‍🔥1🔥1🎉1🎄1🆒1

162 viewsedited 13:03

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

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹 pinned «Where city are you from ?
——————————————
Qaysi viloyatdan siz ?»

16:31

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

Ishonchli va har biri uchun mukofot beriladigan "AIRDROP" li mashgʻulot taklif qilaman !

Ilova reklama qilinmayapti !!!

JavaScript | Yaratganga qaytish 🫠

👍2🆒2❤‍🔥1🔥1🥰1

107 viewsedited 09:52

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

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹 pinned Deleted message

12:19

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

#JavaScript #Dasturlash #WebDasturlash #Frontend #HTML #CSS #JS #Programmer #CodingLife #WebDevelopment #absJavaScript

1. JavaScript nima? Nega uni o‘rganish kerak?

ℹ️ JavaScript (JS) – bu veb-saytlar, dasturlar va hatto serverlarni yaratishda ishlatiladigan kuchli dasturlash tili.

🔴 JS Nimaga Kerak?

~~✅ Dinamik veb-sahifalar yaratish~~
~~✅ Tugmalar, animatsiyalar, modal oynalar qo‘shish~~
~~✅ Ma'lumotlarni qayta ishlash va API'lar bilan ishlash~~

🔴 Dastlabki "JS" kodingiz

Quyidagi kod ekranga "Salom, JavaScript!" deb chiqaradi:

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

Bu kodni browserning console oynasida yoki Node.js muhiti orqali ishlatishingiz mumkin!

❓Savol: "JavaScript" qaysi sohalarda ishlatiladi? Kommentda fikr qoldiring!

⏭ Keyingi postda "JavaScriptni qanday ishlatamiz?" yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

👍2🔥2❤‍🔥1⚡1

58 viewsedited 15:30

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

#JavaScript #Dasturlash #WebDasturlash #Frontend #HTML #JS #CodingLife #JavaScriptTutorial #absJavaScript

2. JavaScriptni Qanday Ishlatamiz?

JavaScript kodini uch xil usulda ishlatish mumkin:

1️⃣ HTML ichida <script> orqali

Eng oddiy usul – HTML hujjatining ichida yozish:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Boshlanishi</title>
</head>
<body>
    <h1>Salom, JavaScript!</h1>

    <script>
        alert("Bu JavaScript!");
    </script>
</body>
</html>

📌 Bu kod sahifa yuklanganda alert oynasini chiqaradi.

2️⃣ Alohida ".js" fayl orqali

Kodingizni alohida .js faylga yozib, HTML bilan bog‘lash yaxshiroq:

<script src="script.js"></script>

📌 Bunda barcha JavaScript kodi script.js faylida bo‘ladi.

3️⃣ Brauzer console orqali

Agar siz tezda kodni tekshirmoqchi bo‘lsangiz:
1️⃣ Chrome yoki Firefox’ni oching
2️⃣ F12 tugmasini bosing
3️⃣ Console oynasiga quyidagi kodni yozing

console.log("JavaScript ishladi!");

📌 Bu kod console’da "JavaScript ishladi!" deb chiqaradi.

⏮ Avvalgi postda "JavaScript nima? Nega uni o‘rganish kerak?" yoritilgan.
⏭ Keyingi postda "HTML, CSS va JavaScript – ularning farqi nima?" yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

🏆2❤‍🔥1👍1🔥1

74 viewsedited 03:02

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

#HTML #CSS #JS #absJavaScript

3. HTML, CSS va JavaScript –
ularning farqi nima?

ℹ️ Agar veb-dasturlashni o‘rganmoqchi bo‘lsangiz, uchta asosiy texnologiyani bilishingiz kerak:

🟠 HTML – Tuzilma (Structure)

HTML (HyperText Markup Language) – bu veb-sahifaning asosiy skeleti. U matnlar, rasmlar, tugmalar va boshqa elementlarni joylashtirish uchun ishlatiladi.

Misol:

<h1>Bu sarlavha</h1>
<p>Bu oddiy matn.</p>

🟠 CSS – Dizayn (Style)

CSS (Cascading Style Sheets) – veb-sahifalarga go‘zallik beradi. Rang, shrift, joylashuv kabi xususiyatlarni belgilaydi.

Misol:

h1 {
  color: blue;
  font-size: 24px;
}

🟠 JavaScript – Interaktivlik (Interaction)

JavaScript – bu veb-sahifaga jon beradi. Tugmalar, modal oynalar, animatsiyalar yaratish va ma’lumotlarni qayta ishlash uchun ishlatiladi.

Misol:

document.querySelector("h1").style.color = "red";

📌 HTML – skelet, CSS – bezak, JavaScript – harakat!

⏮ Oldingi postda "JavaScriptni qanday ishlatamiz?" yoritilgan.
⏭ Keyingi postda "HTML asoslari - dastlabki sahifamiz." yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2👍1

74 viewsedited 03:04

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

#HTML #CSS #WebDasturlash #Frontend #Dasturlash #WebDevelopment #LearnToCode

4. HTML asoslari – dastlabki sahifamiz

Agar veb-sahifa yaratmoqchi bo‘lsangiz, "HTML" bilan boshlash kerak! Bugun dastlabki "HTML" sahifamizni yaratamiz.

📌 HTML tuzilishi

HTML hujjati quyidagi tuzilishga ega:

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening Birinchi Sahifam</title>
</head>
<body>
    <h1>Salom, dunyo!</h1>
    <p>Bu mening birinchi HTML sahifam.</p>
</body>
</html>

🔹 <!DOCTYPE html> – HTML5 versiyasini bildiradi.
🔹 <html> – HTML hujjatini boshlaydi.
🔹 <head> – Sahifaning yashirin qismini o‘z ichiga oladi (meta ma’lumotlar, title va boshqalar).
🔹 <body> – Foydalanuvchilar ko‘radigan asosiy qismlar shu yerda bo‘ladi.

👨‍💻 HTML sahifani qanday ochamiz?

1️⃣ .html kengaytmali fayl yaratamiz (masalan, index.html).
2️⃣ Faylni "Google Chrome" yoki Firefox brauzerida ochamiz.

✅ Tayyor! Sizning birinchi veb-sahifangiz yaratildi!

⏮ Avvalgi postda "HTML, CSS va JavaScript - Ularning farqi nima?" yoritilgan.
⏭ Keyingi postda "HTML asosiy teglari" yoritiladi.

🔗 @absJavaScript | #JaSc@absJavaScript

🔥2❤‍🔥1⚡1👍1

72 viewsedited 03:00

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

#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

79 viewsedited 03:02

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

#HTML #CSS #WebDasturlash #Frontend #Dasturlash #Forms #LearnToCode

6. HTML formlar – Foydalanuvchi kiritmalarini qanday olamiz?

🔗 @absJavaScript | #JaSc@absJavaScript

🔥2❤‍🔥1⚡1👍1

67 viewsedited 03:01

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

#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

89 viewsedited 03:01

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

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

7. HTML Jadval (Table) Yaratish

🔗 @absJavaScript | #JaSc@absJavaScript

❤‍🔥2🔥2👍1

63 viewsedited 03:01

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

About

Blog

Apps

Platform