Brogrammist

Regular expression bilan linklarni tekshirishga qiziqqanlar uchun "anchorme" kutubxonasidan havola. Yana qaytaraman, bunaqa RegExp yozgingiz kelmagan bo'lardi.

JavaScript'da link yaroqliligini tekshirish Linklar o'ziga yarasha sintaksis/standartga ega. Masalan: "https://google.com?q=cat&cr=UZ" Bu link yaroqli (valid), chunki unda standart bo'yicha protokol, unda keyin "://" qo'yilib, keyin domain, keyin esa "path" va "query" parametrlar to'g'ri qo'yilgan. Buni biz "regular expression" orqali tekshirishimiz mumkin. Lekin ishoning bunaqa RegExp'ni yozishni xohlamagan bo'lardingiz. Kutubxona (library) ishlatsakchi? To'g'risi, proyektingiz kattalashgani sari har bir bayt siz uchun qimmatli. Ularni keraksiz joylari ko'p qandaydir kutubxonaga sarflashga arzimaydi. Gapning qisqasi JavaScriptning o'zida linklar bilan ishlovchi "built-in" interfeys bor. Bu URL obyekti. URL obyekti konstruktori argument sifatida string oladi. Agar string yaroqsiz link bo'lsa "exception" otiladi. Shuning uchun uni "try-catch" bilan o'rash kerak. Quyidagi funksiyani bemalol Copy&Paste qilishingiz mumkin: function isValidURL(url) { try { new URL(url); return true; } catch (error) { return false; } }; isValidURL("http://google.uz"); // true isValidURL("https//invalidcom"); // false #js #jsdaily #tips

JavaScript'da `void` operatori void o'zidan keyin keladigan ifoda qiymatini `undefined`ga aylantirib yuboradi:

void 0 === undefined; // true
void 1 === undefined; // true
void 'Hello' === undefined; // true

Yuqoridagi misollardan ko'rinib turibdiki "void" qilingan ifoda qiymati undefined'ga teng. Agar biror funksiya "return" qiladigan qiymat kerak bo'lmasa, uning oldiga void qo'yish yaxshi amaliyot (ya'ni best practice) hisoblanadi:

button.onclick = () => void doSomething();

Qiziq fakt: Ba'zi minifikatorlar undefined uzun so'z bo'lgani uchun uni void 0 bilan almashtirib ketadi. #js #jsdaily #tips

Unicode string ustida iteratsiya Quiydagi misolga e'tibor bering: const msg = 'Hell😬'; // for ... in for (let i in msg) { console.log(msg[i]); } // Output: // 'H', 'e', 'l', 'l', '??' Bilarmidingiz, "for...in" unicode string'lar bilan ishlamasligini? Agar bilmagan bo'lsangiz, qanday qilib unicode string'lar ustida to'g'ri iteratsiya qilishni ham bilib oling: // for ... of for (let c of msg) { console.log(c); } // Output: // 'H', 'e', 'l', 'l', '😬' #js #jsdaily #tips

string.charAt(index) 'ning yana bir xislati, agar index butun son bo'lmasa, uni o'zidan kichik eng katta butun songa yaxlitlaydi:

'hello'.charAt(1.23) // 'e'
// 1.23 -> 1

Unda index manfiy bo'lsachi? Yoki string'ning uzunligidan katta bo'lsachi? Bu holatda .charAt bo'sh string qaytaradi:

'hello'.charAt(100); // ''
'hello'.charAt(-34); // ''

Tabiiyki, yuqoridagi holatlarda string[index] usuli shunchaki undefined natijasini beradi. #js #jsdaily #tips

`string.charAt(i)` vs `string[i]` String'dagi bitta simvolni string[index] yoki string.charAt(index) usulida olish mumkin. Agar index'imiz [0, `string.length - 1`] oralig'ida bo'lsa, bu 2 usulning bir biridan farqi yo'q. Lekin, index'imiz "boshqachaoq" qiymat bo'lsachi? 🤔 Tekshiramiz:

'hello'[NaN]; // undefined
'hello'.charAt(NaN); // 'h'

'hello'[undefined]; // undefined
'hello'.charAt(undefined); // 'h'

Demak, [NaN] bilan holat mantiqan olinsa to'g'ri. Lekin .charAt(NaN) 'chi? Bu yerda nima bo'lyapti? Albatta "type coercion"! Ya'ni biz bergan qiymat bilvosita songa, Number'ga aylanib ketyapti:

undefined -> 0
charAt(undefined) -> charAt(0)

Shunday ekan, agar mana bunday qilsak kodimiz kutilgan natijani beradi:

'hello'.charAt('00') // 'h'

Object.is() vs === Object.is() metodini === operatori bilan ko'p holatlarda bemalol almashtirib ishlatsak bo'ladi. Lekin ular bir-biriga to'liq ekvivalent emas. Ularning asosiy farqi Object.is()`ning `NaN va ishorali nollardagi holatdir. Ishorali nollar bu: -0 va +0. Demak, === operatori 2 ta NaN qiymatni tekshirarkan false qaytaradi. Lekin Object.is(NaN, NaN) esa true natijasini beradi. Quyidagi misollarni ko'rib, o'zingiz ham tekshirib ko'ring.

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

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

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

`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

`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 '{"b":3}' 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

Long time no see! 🙂 Qiziq yangi video! Faqat CSS dan foydalanib "loader" yasash. #css #cssonly #animation https://youtu.be/Bs0maRwZQF0