#JavaScript #API #webdev #2post #boshlovchilar

👨‍💻 JavaScript qayerda ishlatiladi?

2️⃣ API bilan ishlash (server bilan muloqot)

JavaScript serverdan ma’lumot olib kelish va uni sahifada ko‘rsatish uchun ishlatiladi. Sahifani yangilamasdan ham ma’lumot keladi.

🌐 Serverdan ma’lumot olish (fetch)

<button onclick="getData()">Ma’lumotni yuklash</button>
<p id="result"></p>

<script>
function getData() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(res => res.json())
    .then(data => {
      document.getElementById("result").innerText = data.title;
    });
}
</script>

☑️ Tugma bosildi → serverdan ma’lumot keldi → sahifada chiqdi

Real-time yangilanish nimaga o‘xshaydi?
📩 Chatda xabar kelishi
📰 Yangiliklar avtomatik yangilanishi
❤️ Like bosilganda soni darhol o‘zgarishi

👉 Bularning barchasi JavaScript + API orqali ishlaydi.

Ma’lumotni sahifada dinamik ko‘rsatish
Serverdan kelgan ma’lumot:
❌ qo‘lda yozilmaydi
❌ sahifa qayta yuklanmaydi

JavaScript:
☑️ o‘zi olib keladi
☑️ o‘zi joylashtiradi

JavaScript + API bo‘lmasa:
❌ sayt sekin
❌ har safar refresh kerak

JavaScript + API bilan esa:
☑️ tez
☑️ jonli
☑️ zamonaviy sayt

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

#JavaScript #API #RealProject #webdev #dasturlash_hayoti

⚠️⚠️⚠️

Diqqat, JavaScript o‘rganuvchilar!

Keyingi post:
❌ faqat nazariya emas
☑️ JavaScript + API orqali real loyiha bo‘ladi

Ya’ni:
⏺️serverdan ma’lumot olish
⏺️sahifani yangilamasdan ishlash
⏺️hammasi real kod bilan 💻

Shunaqa amaliy post kerakmi?
👍 Ha, JS + API bilan
🔥 Yo'q, shart emas

Qiziqish bo‘lsa — bosqichma-bosqich tushuntirib chiqaramiz

#JavaScript #API #RealProject #webdev #dasturlash_hayoti

➡️ Keyingi postda nima bo‘ladi?

Keyingi darsda:
⏺️ xabarlarni bitta emas, ro‘yxat qilib chiqaramiz
⏺️ yangi xabar kelganda sahifa avtomatik yangilanadi

Ya’ni:
❌ refresh yo‘q
☑️ real-time ishlash

Post JavaScript + API asosida, to‘liq real loyiha ko‘rinishida bo‘ladi.

👉 O‘tkazib yubormang!

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

#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 😉

Dasturchilar uchun 300+ ta bepul API bir joyda!

Agar loyiha qilayotgan bo'lsangiz, bu sayt sizga juda asqatadi.

Unda quyidagi yo'nalishlar bo'yicha 300 dan ortiq bepul API jamlangan:

✅GitHub API
😀Postman API
✅Ob-havo API
✅Yangiliklar API
✅Valyuta API
✅Sun'iy intellekt API
✅Va yana yuzlab foydali API'lar

⚠️ Ayrim API'larda bepul tarif uchun so'rovlar soni cheklangan. Lekin o'rganish va shaxsiy loyihalar uchun bu limit odatda yetarli bo'ladi.

Agar portfolio yoki amaliy loyiha qilayotgan bo'lsangiz, albatta saqlab qo'ying.

🔗Havola

#DasturlashHayoti #API #Foydali

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

Ngrok — Lokal serveringizni bir soniyada internetga olib chiqing!

Backend yozayotganda (localhost) API yoki Telegram botni test qilish uchun uni doim haqiqiy serverga (hosting/VPS) yuklash shart emas. Ngrok utilitasi orqali kompyuteringizdagi loyihaga bir zumda xavfsiz Public URL (HTTPS) olishingiz mumkin.

Nima uchun bu vosita juda muhim?
Telegram botlar: Webhook'ni to'g'ridan-to'g'ri o'z kompyuteringizga ulab test qilish uchun ideal.
Jamoaviy ish: Siz yozgan API'ni frontendchi hamkasbingiz darhol o'z loyihasiga ulab ko'rishi mumkin.

Terminalda bor-yo'g'i bitta buyruq yoziladi: ngrok http 8000 (port o'zgarishi mumkin).

Munosabat bildiring:
🔥 — Bot yozganda doim shundan foydalanaman!
👍 — Zo'r narsa ekan, albatta ishlatib ko'raman.

#foydali #backend #ngrok #api #server #dasturlash

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

Ro'yxatdan o'tishni talab qilmaydigan 5 ta bepul API (Portfolio uchun)

Portfolio uchun loyiha qilyapsiz, lekin real ma'lumotlarni qayerdan olishni bilmayapsizmi? API kalit (API key) olish va ro'yxatdan o'tish bilan vaqt yo'qotmaslik uchun to'g'ridan-to'g'ri ishlaydigan tayyor API'lar ro'yxati:

🌦 1. Open-Meteo (Ob-havo)
Hech qanday avtorizatsiyasiz dunyoning istalgan koordinatasi uchun aniq ob-havo ma'lumotlarini taqdim etadi. Ob-havo ilovasini yasash uchun eng qulay tanlov.
🔗 open-meteo.com

💱 2. Frankfurter (Valyuta kurslari)
Yevropa Markaziy banki ma'lumotlari asosida ishlaydi. Valyuta kurslarini real vaqtda konvertatsiya qilish va tarixiy ma'lumotlarni olish uchun mutlaqo ochiq API.
🔗 frankfurter.app

🎬 3. TVmaze (Kino va seriallar)
Global kino va seriallar bazasi. Qidiruv tizimi, aktyorlar, reytinglar va epizodlar haqidagi barcha ma'lumotlarni hech qanday kalitsiz beradi. Kino-sayt klonini yasash uchun ayni muddao.
🔗 [tvmaze.com/api](https://tvmaze.com/api)

📝 4. JSONPlaceholder (Test ma'lumotlari)
Frontend qismini test qilish uchun klassika. Sizga tayyor foydalanuvchilar (users), maqolalar (posts), izohlar va rasmlar JSON massivini qaytaradi.
🔗 jsonplaceholder.typicode.com

🤖 5. RoboHash (Avatarlar va AI tasvirlar)
Har qanday matn yoki foydalanuvchi ismini URL manzilga qo'shsangiz, unga moslashtirilgan unikal robot rasmini (avatar) generatsiya qilib beradi. Ilovangizdagi profil sahifasini jonlantirish uchun asqotadi.
🔗 robohash.org

Reaksiya qoldiring:
🔥 — Portfolio uchun ajoyib resurslar!
👍 — Darhol saqlab qo'ydim.

#foydali #api #frontend #backend #portfolio #dasturlash

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