#JavaScript #Frontend #DasturlashHayoti #KodniOsonlashtir

👨‍💻 JavaScript’da qiymatni raqamga o‘tkazishning eng tez usuli

Ko‘pchilik parseInt() yoki Number() ishlatadi, lekin qisqa yo‘l ham bor:

let x = "42";
console.log(+x); // 42

+ belgisi matnni son ko‘rinishiga o‘tkazadi.

Bu usul — tez, toza va qisqa

💻 @dasturlash_hayoti — Dasturchilar hayoti, motivatsiya va IT olamidagi eng foydali maslahatlar shu yerda!

😎 Dasturchilar, diqqat!

Siz uchun JavaScript dasturlash tilidan testlar tayyorladik.
Endi navbat sizda!

👉 Agar bu testlarni kanalga joylashimizni xohlasangiz —
kommentda “+” yoki 🔥 emoji qoldiring!

Reaksiya soniga qarab @dasturlash_hayoti kanalimizda testlar seriyasini boshlaymiz

#JavaScript #Quiz #DasturlashHayoti #Frontend

#javascript #map #frontend #dasturlash

👨‍💻 JavaScript’dagi map() funksiyasi

Massivni olib, har bir elementni o‘zgartirib, yangi massiv qaytaradigan yordamchi.

Masalan:

const raqamlar = [1, 2, 3];
const ikkiBaravar = raqamlar.map(son => son * 2);
console.log(ikkiBaravar); // [2, 4, 6]

Ya’ni map() — bu for yozmasdan hamma elementni aylanib chiqish usuli.

Farqi shundaki, u yangi massiv yaratadi, eski massivni buzmaydi

💻 @dasturlash_hayoti — Dasturchilar hayoti, motivatsiya va IT olamidagi eng foydali maslahatlar shu yerda!

#JavaScript #LocalStorage #FrontEnd #JS #Dasturlash

👨‍💻 JavaScript’da LocalStorage nima va qanday ishlatiladi?

LocalStorage – bu brauzerda ma’lumotlarni saqlash imkonini beruvchi vosita. Saytni yopib ochganingizda ham ma’lumotlar saqlanib qoladi.

Asosiy xususiyatlari:
🔹Ma’lumot string sifatida saqlanadi
🔹Brauzer yopilsa ham o‘chmaydi.
🔹Faqat hozirgi domen uchun amal qiladi.

Eng ko‘p ishlatiladigan metodlar:

// Ma'lumot qo'shish
localStorage.setItem('ism', 'Jonibek');
// Ma'lumotni olish
let ism = localStorage.getItem('ism');
console.log(ism); // Jonibek
// Ma'lumotni o'chirish
localStorage.removeItem('ism');
// Hammasini tozalash
localStorage.clear();

💡 Agar obyekt yoki massiv saqlash kerak bo‘lsa, JSON.stringify va JSON.parse dan foydalaning:

let user = { name: 'Jonibek', age: 20 };
localStorage.setItem('user', JSON.stringify(user));

let getUser = JSON.parse(localStorage.getItem('user'));
console.log(getUser.name); // Jonibek

💡 LocalStorage – bu saytlar uchun “xotira” bo‘lib, foydalanuvchi ma’lumotlarini uzoq muddat saqlash imkonini beradi.

💻 @dasturlash_hayoti — Dasturchilar hayoti, motivatsiya va IT olamidagi eng foydali maslahatlar shu yerda!

Diqqat, dasturchilar!

Keyingi postlarda sizga 👨‍💻 JavaScript real loyihalarda qayerda ishlatiladi degan mini-postlar seriyasini tayyorladik.

👇 Shu postlarni kutyapsizmi?
👍 Ha, men kutyapman!
😁 Yo‘q, lekin qiziqaman

♻️ Izohlarda belgilang va biz siz uchun hamma postlarni ketma-ket chiqaramiz!

#JavaScript #webdev #poll #dasturlash_hayoti

#JavaScript #frontend #webdev #boshlovchilar

👨‍💻 JavaScript qayerda ishlatiladi?

1️⃣ Interaktiv elementlar (real kod bilan)

JavaScript saytni jonlantiradi. Foydalanuvchi biror ish qilsa — JavaScript javob qaytaradi.

🔘 Tugma bosilganda nima bo‘ladi?

<button onclick="salom()">Bos</button>

<script>
function salom() {
  alert("Salom! Tugma bosildi 😊");
}
</script>

📝 Forma tekshirish (validation)

<input type="text" id="email" placeholder="Email">
<button onclick="tekshir()">Yuborish</button>

<script>
function tekshir() {
  let email = document.getElementById("email").value;

  if (email === "") {
    alert("Emailni kiriting!");
  }
}
</script>

👉 Email bo‘sh bo‘lsa → ogohlantirish chiqadi

🪟 Modal / yashirin blok ochish

<button onclick="och()">Batafsil</button>
<p id="text" style="display:none;">Qo‘shimcha ma’lumot</p>

<script>
function och() {
  document.getElementById("text").style.display = "block";
}
</script>

👉 Tugma bosildi → yashirin matn ochildi

JavaScript bo‘lmasa:
❌ tugma ishlamaydi
❌ forma tekshirilmaydi
❌ sayt jonsiz bo‘ladi

JavaScript bilan esa:
✅ sayt javob qaytaradi
✅ foydalanuvchi bilan muloqot bo‘ladi

➡️ Keyingi post: JavaScript + API (serverdan ma’lumot olish)

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

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

🖥 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! 😅