#JavaScript #API #RealProject #webdev #dasturlash_hayoti

👨‍💻 JavaScript + API: Real loyiha

Xabarlarni ro‘yxat qilib chiqarish + avtomatik yangilanish

Bu bosqichda:
- har bir xabar alohida chiqadi
- sahifa refreshsiz yangilanadi
- real chatlarga yana yaqinlashamiz

1️⃣ HTML — xabar yozish va chat oynasi

<!-- Xabar yozish -->
<input type="text" id="message" placeholder="Xabar yozing">
<button onclick="sendMessage()">Yuborish</button>

<!-- Chat ro'yxati -->
<ul id="chat"></ul>

ul — xabarlar ro‘yxat bo‘lib chiqishi uchun

2️⃣ JavaScript — xabar yuborish va ro‘yxatga qo‘shish

<script>
function sendMessage() {

  // Inputni chaqiramiz
  let input = document.getElementById("message");

  // Inputdagi qiymat
  let msg = input.value;

  // Bo‘sh xabar yuborilmasligi uchun
  if (msg === "") return;

  // Serverga xabar yuborish
  fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: JSON.stringify({ text: msg }),
    headers: {
      "Content-type": "application/json"
    }
  })
  .then(res => res.json())
  .then(data => {

    // Xabarni chat ro‘yxatiga qo‘shamiz
    addMessage(data.text);

    // Inputni tozalaymiz
    input.value = "";
  });
}
</script>

3️⃣ JavaScript — xabarni ro‘yxatga qo‘shish

<script>
function addMessage(text) {

  // Chat ro‘yxatini chaqiramiz
  let chat = document.getElementById("chat");

  // Yangi xabar uchun <li> yaratamiz
  let li = document.createElement("li");

  // Xabar matnini joylaymiz
  li.innerText = text;

  // Xabarni chatga qo‘shamiz
  chat.appendChild(li);
}
</script>

Endi:
- har bir xabar pastga qo‘shilib boradi
- eski xabarlar yo‘qolmaydi

Telegram, kommentlar, chatlar — barchasi shu mantiqda ishlaydi.

☑️ Natija
⏺️JavaScript → foydalanuvchi bilan ishlaydi
⏺️API → server bilan gaplashadi
⏺️Sayt → jonli bo‘ladi

➡️ Keyingi post:
Enter bosilganda yuborish + real-time’ga yana yaqinlashtiramiz 🔥

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

🖥 HTML, 🖥 CSS va 🖥 JS bo'yicha yirik ma'lumotnoma!

Frontend dasturlashga oid deyarli barcha texnologiyalar haqida batafsil ma'lumotlarni bitta joyda jamlagan ajoyib "spravochnik" (qo'llanma).

Dasturlashni o'rganayotganlar yoki kerakli qoidalar va kodlarni esdan chiqarib qo'yadiganlar uchun tayyor shpargalka!

➡️ Saytga o'tish: hcdev.ru

Kerak bo'lib qolishi aniq, yo'qotib qo'ymaslik uchun saqlab oling va frontendchi do'stlarga ulashing!

#foydali #frontend #html #css #javascript

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

O'zingizni JavaScript bo'yicha sinab ko'ring!

Keling, kichik bir test o'tkazamiz. Rasmda ko'rsatilgan kod ishga tushganda konsolga qanday natija chiqadi?

👇 O'z javobingiz va uning sababini izohlarda yozib qoldiring! Keyinroq to'g'ri javob va tushuntirishni e'lon qilamiz.

#savol #javascript #js #frontend #dasturlash #intervyu

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

Xo'sh, yuqoridagi JS bo'yicha savolimizning javobini e'lon qilamiz! Izohlarda faol bo'lgan hammaga rahmat. 🤝

To'g'ri javob: false

Nega aynan false? Keling, sodda qilib tushuntirib beraman: JavaScript'da Symbol ma'lumot turi har safar chaqirilganda mutlaqo yagona (unikal) qiymat yaratadi. Qavs ichidagi 'a' — bu shunchaki unga berilgan ta'rif (description) xolos.

Buni hayotiy misol bilan tushuntirsam:
tasavvur qiling, ikkita odamning ismi "Ali". Ismlari bir xil bo'lgani bilan, ular xotirada (hayotda) umuman ikki xil shaxs-ku, to'g'rimi? Dasturlashda ham xuddi shunday! Symbol('a') xotirada ikkita alohida va bir-biriga mutlaqo aloqasi yo'q unikal qiymatlarni yaratib beradi. Shuning uchun qat'iy tenglik (===) ularni teng emas deb hisoblaydi.

Katta kompaniyalardagi intervyularda shunaqa chalg'ituvchi mantiqiy savollar ko'p tushadi, shuning uchun eslab qolamiz! 😉

Kimlar birinchilardan bo'lib to'g'ri topdi? O'zimizni reaksiyalarda ko'rsatamiz:
🔥 — Men to'g'ri topgan edim!
👍 — Endi tushunib oldim, foydali bo'ldi.

#javascript #js #frontend #savol_javob #tushuntirish #intervyu

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

👍 Python, Java, C++ yoki JavaScript uchun ajoyib servis

Kodni to'g'ridan-to'g'ri brauzerda yozasiz, sayt esa siz yozgan har bir amalni bosqichma-bosqich (kod qanday ishlayotganini ichki mantiqigacha) ko'rsatib beradi. Bu nafaqat yangi o'rganuvchilar, balki tajribali dasturchilar uchun ham juda foydali.

Dastur ishga tushganda har bitta o'zgaruvchi (variable) qanday qiymat olayotganini va kod aynan qaysi qatorda turganini jonli ravishda ko'rish mumkin. Shuningdek, tizimda o'rnatilgan sun'iy intellekt (AI) yordamchisi ham mavjud.

➡️ Saytga o'tish

#foydali #dasturlash #python #javascript #js #cpp #java

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

🗓 VS Code'da ishlashni tezlashtiradigan eng foydali klaviatura qisqa tugmalari!

Har bir dasturchi bilishi kerak bo‘lgan shortcutlar bir joyda. Saqlab qo‘ying va do‘stlaringizga ham ulashing!

#VSCode #WebDasturlash #Programming #DeveloperTips #JavaScript #Frontend #Backend #Dasturchilar

💻 @dasturlash_hayoti — dasturchilar hayoti va IT memlari aralash kanal 😉

🖥 JavaScript Visualizer 9000 — JS kodini jonli "kuzatish" uchun vosita!

Bu vosita JavaScript'da yozgan kodingizni real vaqt rejimida, qadamma-qadam qanday ishlashini vizual tarzda ko'rsatib beradi. Eng qizig'i — u kodning har bir qadamiga o'zi izoh (kommentariy) berib boradi!

Asosiy imkoniyatlari:
✅O'zgaruvchilarning (variables) qiymati qanday o'zgarayotganini jonli kuzatish.
✅Funksiyalarning ishlash jarayoni va natijalarini aniq ko'rish.
✅Murakkab kodlarning "orqa fonda" qanday ishlash mantiqini yaqqol tushunish.

JavaScript'ni endi o'rganayotganlar yoki koddagi mantiqiy xatoni (bug) topa olmayotganlar uchun haqiqiy topilma!

➡️ Servisga o'tish

#foydali #javascript #js #frontend #dasturlash

💻 @dasturlash_hayoti — bir xatoni tuzatib, ikkinchisiga tayyorlanish! 😅

🎲 HTML, CSS va JS yordamida yozilgan 50+ mini veb-loyihalar!

Frontend texnologiyalarini endi o'rganayotganlar yoki amaliyot qilmoqchi bo'lganlar uchun ajoyib topilma! Biz siz uchun HTML, CSS va JavaScript yordamida turli qiziqarli interfeyslar va funksiyalar yaratishni o'rgatuvchi 51 ta loyiha jamlangan repozitoriyni topdik.

Eng qulay tomoni shundaki, kodlarni ko'chirmasdan turib ham har bir loyihani alohida saytda real vaqt rejimida (jonli) ishlatib, test qilib ko'rishingiz mumkin.

🔖 G'oya olish va amaliyot qilish uchun albatta saqlab qo'ying!

➡️ Repozitoriy bilan tanishish

#foydali #frontend #html #css #javascript #amaliyot #loyihalar

💻 @dasturlash_hayoti — bir xatoni tuzatib, ikkinchisiga tayyorlanish! 😅

⚙️ JavaScript'da Algoritmlar va Ma'lumotlar tuzilmasi

Bu repozitoriyda JavaScript asosida yozilgan ko'plab mashhur algoritmlar va ma'lumotlar tuzilmalarining (Data Structures) tayyor namunalari jamlangan.

Nimasi bilan qulay?
✔️Har bir algoritm uchun alohida README fayl ajratilgan.
✔️Kod qanday ishlashi va mantiqiy yechimlari batafsil tushuntirib berilgan.
✔️Mavzuni chuqurroq o'zlashtirish uchun qo'shimcha manbalarga (jumladan, YouTube videolariga ham) tayyor havolalar kiritilgan.

Intervyularga tayyorlanayotgan va mantiqiy fikrlashini kuchaytirmoqchi bo'lgan JS dasturchilar uchun haqiqiy xazina!

➡️ Repozitoriy bilan tanishish

#foydali #javascript #js #algoritm #dasturlash

💻 @dasturlash_hayoti — bir xatoni tuzatib, ikkinchisiga tayyorlanish! 😅

⚙️ React dasturchilar uchun eng foydali 10 ta kutubxona (library)

E'tiboringizga zamonaviy React JS ilovalarini yaratishda juda asqotadigan 10 ta asosiy kutubxona to'plamini taqdim etamiz.

Ushbu kutubxonalarning imkoniyatlarini o'zaro birlashtirish orqali siz bir xil turdagi zerikarli (rutin) ishlarga kamroq vaqt sarflaysiz. Natijada ancha ko'p funksiyali, yuqori tezlikda ishlaydigan va vizual jihatdan chiroyli ilovalarni yaratish imkoniga ega bo'lasiz.

➡️ To'liq ro'yxat bilan tanishish

Reaksiya qoldiring:
🔥 — React'chilar uchun ayni muddao!
👍 — Foydali manba, darhol saqlab qo'ydim.

#foydali #frontend #react #javascript #kutubxona #dasturlash

💻 @dasturlash_hayoti — bir xatoni tuzatib, ikkinchisiga tayyorlanish! 😅