Assalomu alaykum do'stlar! Bu kanalni dasturchi sifatida o'zimning kamtarona bilimim va tajribam bilan ulashish maqsadida ochdim. Soham frontend development bo'lgani uchun asosan shu yo'nalishga oid turli materiallar bilan o'rtoqlashish niyatidaman.

Agar kanalim orqali o'zingizga qandaydir yangilik ololsangiz, kanalni yuritish uchun ketadigan vaqat va sarflangan kaloriyalar o'zini 2 karra oqlagan bo'ladi 😁.
Nega 2 karra?
Chunki, birinchidan, kimgadir yordami tekkani uchun va ikkinchidan, ilm ulashish orqali boyigani uchun 🙂.

O'zim yozadigan maqolalardan tashqari, ingliz va rus tillaridagi foydali maqolalarni iloji boricha o'zbek tiliga tarjima qilgan holda ulashish niyatim ham bor.

JavaScript bo'yicha hali "tesha tegmagan" mavzularda videolar yaratishni boshladim. Davomli bo'ladi degan umiddaman.

https://www.youtube.com/watch?v=7dNwxIB90pU&ab_channel=BrogrammistUz

JavaScript fayllarni HTML'ga kiritganimizda shu attributlardan foydalanishimiz sahifamiz yuklanish tezligini ancha yaxshilaydi.

https://youtu.be/jYepjLCzEAI

Long time no see! 🙂
Qiziq yangi video! Faqat CSS dan foydalanib "loader" yasash.

#css #cssonly #animation

https://youtu.be/Bs0maRwZQF0

`JSON.stringify` metodida shu xususiyat borligini bilasizmi?

Obyektlarni `String`ga o'girib beruvchi bu metodni ko'pincha 1 ta parametr bilan ishlatamiz:
JSON.stringify(object)

Lekin metodda yana 2 ta (optional) parametr bor. To'liq korinishi:

JSON.stringify(
object,
?replacer,
?space
)

1. replacer - bu parametr funksiya yoki string'lar massivi bo'lishi mumkin.

Agar massiv bersak, obyektning faqat massivdagi elementlarga mos keluvchi field/maydonlarigina olinadi. Masalan:


> JSON.stringify({ a: 5, b: 3 }, ['b'])
> '{"b":3}'


Agar funksiya bo'lsa, u orqali biz field'larni filter qilishimiz mumkin:


> JSON.stringify(
{ a: 5, b: 3 },
(key, value) =>
key == 'a'
? 10
: value
)
> '{"a":10,"b":3}'



2. space - bu parametr orqali obyektimizni indentatsiya qilishimiz mumkin. Masalan space parametri 2 ga teng bo'lsa, natija quydagicha bo'ladi:


> var obj = { name: "Tony", status: { rank : 1, type: "Avenger"}}

> console.log(JSON.stringify(
obj,
undefined,
2
))

{
"name": "Tony",
"status": {
"rank": 1,
"type": "Avenger"
}
}

#js #tips #jsdaily

`EventListener` obyekti

Yaqinda `addEventListener` metodi callback sifatida faqat funksiya emas obyekt ham olishini bilib qoldim. Agar MDN Web Docs 'dan qarasangiz ham listenerga shunday tarif berilgan:

"The object that receives a notification" (link).

Ya'ni bildirishdi qabul qiluvchi obyekt! Keyin o'ylab qoldim, agar biz listener sifatida obyekt ishlata olsak, u bilan bog'liq bo'gan kodimizni o'sha obyekt bilan inkapsulyatsiya qilishimiz mumkin bo'ladi. Masalan:


const listener = {
state: {
message: "Hello",
count: 0,
},
handleEvent(event) {
this.state.count++;

console.log(
event.type,
this.state.message,
this.state.count
);
},
};

button.addEventListener(
"click", listener
);


Albatta bu usul qanchalik amaliyotga to'g'ri kelishi haqida shubham bor. Shuning uchun keyingi safar event'lar bilan ishlaganimda shu usuldan foydalanib ko'raman. Chunki tajriba qilish o'rganishning eng samarali yo'li.

#js #event #object #evenlistener #jsdaily

Nega /[A-Za-z]/.test() natijasi ‘true’?

Bilamiz .test() metodi string qabul qiladi va uni RegExp'ga ko'ra tekshiradi. Agar string mos kelsa true, aks holda false qaytaradi.

/[A-Za-z]/ esa ingliz alifbosidagi harflarni aniqlovchi RegExp.

Xo'sh, nega metodni /[A-Za-z]/ bilan argumentsiz chaqirsak true qaytaradi? RegExp'ni bo'sh qiymatga nisbatan tekshirsak false chiqishi kerakmasmidi?

Qizig'i shundaki, biz bu yerda .test() ni aslida .test(undefined) holatida chaqiryapmiz. Metod argument sifatida string olishini aytdik. Shuning uchun undefined string'ga konversiya bo'ladi va 'undefined' ga aylanadi. 'undefined' esa ingliz alifbosidagi harflardan iborat so'z! Demak natija true bo'lishi to'g'ri!

JavaScript'da tiplar dinamik bo'lgani uchun ko'pincha shunga o'shash surprizlarni uchratish mumkin. Maslahatim esa, har doim dokumentatsiyalarni ochib o'qing!

#js #jsdaily #regexp

Bugun yilning 256-kuni. Barcha hamkasblarimni Dasturchilar kuni bilan tabriklayman!
🎉🎉🎉

input.valueAsNumber

"Numeric" input elementlarning qiymatini JS orqali o'qiganimizda ularni har doim Number tipiga konversiya qilamiz. Chunki elementning .value field'i bizga har doim String qaytaradi.

Agar input elementlarning .valueAsNumber field'ini ishlatsak bu bosh og'riqdan qutilamiz. Bu field faqat "numeric" inputlar bilan ishlaydi. Ya'ni input type'imiz "number", "date", "datetime", yoki "range" bo'lishi kerak. Aks holda bu field qiymati NaN ga teng bo'ladi. Hattoki kirilgan qiymat son bo'lsa ham, lekin input type "text" bo'lsa, .valueAsNumber bizga NaN qaytaradi.

Tepadagi qisqa demonstratsiya StackBlitz'ning Twitter sahifasidan uxlatildi.

#js #jsdaily #tips