Dasturlash hayoti️️ ️

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

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

Axios bilan real API chaqirish — ODDIY MISOL BILAN! ❓ “Ma’lumotni boshqa sayt yoki serverdan qanday olib kelamiz?” degan savol bormi? Javob: Axios! STEP 1: Axios’ni o‘rnatamiz Terminalda yozing: npm install axios STEP 2: Real API chaqiramiz (masalan: foydalanuvchilar ro‘yxati) Bu API — jsonplaceholder.typicode.com saytiga tegishli va real ishda sinab ko‘rish uchun yaratilgan bepul servis. import axios from 'axios'; export default { data() { return { users: [] }; }, mounted() { axios.get('https://jsonplaceholder.typicode.com/users') .then(response => { this.users = response.data; }) .catch(error => { console.log("Xatolik:", error); }); } } STEP 3: Ma’lumotni sahifada chiqaramiz <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} - {{ user.email }} </li> </ul> 📌 Natija: ✅ Sahifa ochilishi bilan API’dan foydalanuvchilar ro‘yxati olinadi ✅ Bu ma’lumotlar users array’iga joylanadi ✅ v-for yordamida ekranga chiqariladi 💡 Real hayotda bu qanday foyda beradi? – Mahsulotlar ro‘yxati olish – Ob-havo, yangiliklar, valyuta kurslari chiqarish – Login/ro‘yxatdan o‘tish so‘rovlari – Barcha dinamik ma’lumotlar API orqali ishlaydi! Foydali deb bilsangiz: 📌Saqlab qo‘ying 📤 Do‘stlaringizga ulashing 💬Izohda fikringizni yozing #vuejs#axios#api#frontend#json#dasturlash#webdev#praktika#ulashishga_arziydi 💻@dasturlash_hayoti — bir xatoni tuzatib, ikkinchisiga tayyorlanish! 😅