O'qituvchi: Promis mavzusini ko'pchilik tushunishga qiynaladi lekin men sizlarga oson usul bilan tushuntirib beraman. ๐ค
โโโโ dars tugadi โโโ
O'quvchi: O'lay agar hech narsani tushunmadim ๐คฆโโ๏ธ
@abs_javascript
โโโโ dars tugadi โโโ
O'quvchi: O'lay agar hech narsani tushunmadim ๐คฆโโ๏ธ
@abs_javascript
๐คฃ16๐2โก1
HTMLCollection va NodeList
- Ikkisiham DOM elementlarining ro'yxati.
Farqi nimada ?
1. HTMLCollection tartibga solinmagan bo'lishi mumkin lekin NodeList tartinga solingan elementlarning rayxati.
2. HTMLCollection bu document elementโlardan tashkil topgan.
3. NodeList esa document nodes (element nodes, attribute nodes, va text
nodes)lardan tashkil topgan.
@abs_javascript
- Ikkisiham DOM elementlarining ro'yxati.
Farqi nimada ?
1. HTMLCollection tartibga solinmagan bo'lishi mumkin lekin NodeList tartinga solingan elementlarning rayxati.
2. HTMLCollection bu document elementโlardan tashkil topgan.
3. NodeList esa document nodes (element nodes, attribute nodes, va text
nodes)lardan tashkil topgan.
@abs_javascript
๐5
Screen
Foydalanuvchi ekrani haqida maโlumotlarni olsak boโladi.
1.screen.width
2.screen.height
3.screen.availWidth
4.screen.availHeight
5.screen.colorDepth
6.screen.pixelDepth
@abs_javascript
Foydalanuvchi ekrani haqida maโlumotlarni olsak boโladi.
1.screen.width
2.screen.height
3.screen.availWidth
4.screen.availHeight
5.screen.colorDepth
6.screen.pixelDepth
@abs_javascript
๐6
Figmada dev mode pullik bo'ldi, betadan chiqdi.
Qanday tekin yechim qilishimiz mumkin ?
Pixso
Pixso dan foydalanishingiz mumkin. Figmadan ancha qulay va tekin ( hozirgacha pul tolaganim yoq )
Figmadagi loyihalarni Pixso ga ko'chirib olib o'tsangiz bo'ladi ๐
@abs_javascript
Qanday tekin yechim qilishimiz mumkin ?
Pixso
Pixso dan foydalanishingiz mumkin. Figmadan ancha qulay va tekin ( hozirgacha pul tolaganim yoq )
Figmadagi loyihalarni Pixso ga ko'chirib olib o'tsangiz bo'ladi ๐
@abs_javascript
๐8๐ฅ1๐ฑ1
JavaScript
Figmada dev mode pullik bo'ldi, betadan chiqdi. Qanday tekin yechim qilishimiz mumkin ? Pixso Pixso dan foydalanishingiz mumkin. Figmadan ancha qulay va tekin ( hozirgacha pul tolaganim yoq ) Figmadagi loyihalarni Pixso ga ko'chirib olib o'tsangiz bo'ladiโฆ
Frontend chi dostlaringizga ulashsangiz bo'ladi ๐
๐4
๐3
JavaScript
Figmani qanday qilib Pixso olib o'tsa bo'ladi ? 1. Royxardan O'tish @abs_javascript
2. Import File - bosish kerak
@abs_javascript
@abs_javascript
JavaScript
2. Import File - bosish kerak @abs_javascript
3. Figma logosi ustiga bosamiz
@abs_javascript
@abs_javascript
JavaScript
3. Figma logosi ustiga bosamiz @abs_javascript
4. Agar figma File ko'rinishida bo'lsa , shunchaki yuklayverasiz
Agar URL manzildagi figmani joylamoqchi bo'lsangiz URL Import ni ustiga bosasiz.
@abs_javascript
Agar URL manzildagi figmani joylamoqchi bo'lsangiz URL Import ni ustiga bosasiz.
@abs_javascript
๐1
JavaScript
4. Agar figma File ko'rinishida bo'lsa , shunchaki yuklayverasiz Agar URL manzildagi figmani joylamoqchi bo'lsangiz URL Import ni ustiga bosasiz. @abs_javascript
5. Figmani linkini tashlab , importni bosasiz va malum vaqt kutub turasiz , figmani yuklab olishligi uchun.
@abs_javascript
@abs_javascript
๐2
JavaScript kodni qatorma qator o'qib boradi. Lekin bazi qatordagi ko'dlarni bajarishda biroz vaqt ketishi mumkin. Buni to'g'lash uchun asinxronlik yordam beradi.
asinxronlik ishlaydi => SetTimeout va SetInterval , XMLHttpRequest , File Upload , Asinxron funksiyalar va Promiselar.
Bu yerda hozir Event Loop ham ishlayabdi. Qanday ?
Agar siz Asinxron ishlaydigan code bo'lmasa JavaScript Runtime ( CALL STACK ) hech narsani bezovta qilmasdan ishlayveradi yani WEB API , CALLBACK QUEUE lar ishlamaydi.
Agar sizda Asinxron kod bo'ladigan bo'lsa , JavaScript Runtime dagi Asinxron kodlar WEB API bo'limiga o'tqizadi va WEB API da javayon bajariladi ( ishga tushishga tayyor bo'lib oladi ) va bajarilib bolingan kod CALLBACK QUEUE (chiqish navbatini kutish joyi ) ga uzatadi. EVENT LOOP , CALL STACK bo'sh bo'lganda CALLBACK QUEUE funksiya bor bo'lsa , CALLBACK QUEUE dagi birinchi funksiyani CALL STACK ga uzatadi. Va funksiya ishga tushadi.
@abs_javascript
asinxronlik ishlaydi => SetTimeout va SetInterval , XMLHttpRequest , File Upload , Asinxron funksiyalar va Promiselar.
Bu yerda hozir Event Loop ham ishlayabdi. Qanday ?
Agar siz Asinxron ishlaydigan code bo'lmasa JavaScript Runtime ( CALL STACK ) hech narsani bezovta qilmasdan ishlayveradi yani WEB API , CALLBACK QUEUE lar ishlamaydi.
Agar sizda Asinxron kod bo'ladigan bo'lsa , JavaScript Runtime dagi Asinxron kodlar WEB API bo'limiga o'tqizadi va WEB API da javayon bajariladi ( ishga tushishga tayyor bo'lib oladi ) va bajarilib bolingan kod CALLBACK QUEUE (chiqish navbatini kutish joyi ) ga uzatadi. EVENT LOOP , CALL STACK bo'sh bo'lganda CALLBACK QUEUE funksiya bor bo'lsa , CALLBACK QUEUE dagi birinchi funksiyani CALL STACK ga uzatadi. Va funksiya ishga tushadi.
@abs_javascript
โค2๐2
Qaysi javascript metodi Promiseni muvaffaqiyatli yakunlaganida (fulfilled) ishga tushiriladi?
Anonymous Quiz
59%
then()
15%
catch()
18%
success()
8%
try()
๐2
console.log(1);
setTimeout(()=>{ console.log(2); }, 0); console.log(3);
setTimeout(()=>{ console.log(2); }, 0); console.log(3);
Anonymous Quiz
35%
1,2,3
51%
1,3,2
7%
2,3,1
7%
3,2,1
๐7
setTimeout(()=>{
console.log(1);
}, 0) console.log(2); console.log(3); console.log(4);
console.log(1);
}, 0) console.log(2); console.log(3); console.log(4);
Anonymous Quiz
80%
2,3,4,1
15%
1,2,3,4
3%
2,3,1,4
2%
4,3,2,1
๐4
Qaysi javascript metodi Promiseni xato (rejected) holatda ishga tushiriladi?
Anonymous Quiz
0%
then()
2%
success()
33%
error()
65%
catch()
๐4โค1
JavaScript
JavaScript kodni qatorma qator o'qib boradi. Lekin bazi qatordagi ko'dlarni bajarishda biroz vaqt ketishi mumkin. Buni to'g'lash uchun asinxronlik yordam beradi. asinxronlik ishlaydi => SetTimeout va SetInterval , XMLHttpRequest , File Upload , Asinxronโฆ
JavaScript interyuning boshlanishi va tugashi ๐
1. let va var farqi ?
2. Primitive va Non-primitive farqi ?
.
.
.
.
.
.
.
33. Event Loop nima ?
@abs_javascript
1. let va var farqi ?
2. Primitive va Non-primitive farqi ?
.
.
.
.
.
.
.
33. Event Loop nima ?
@abs_javascript
๐8๐3โค1๐ณ1
JavaScript
Figmada dev mode pullik bo'ldi, betadan chiqdi. Qanday tekin yechim qilishimiz mumkin ? Pixso Pixso dan foydalanishingiz mumkin. Figmadan ancha qulay va tekin ( hozirgacha pul tolaganim yoq ) Figmadagi loyihalarni Pixso ga ko'chirib olib o'tsangiz bo'ladiโฆ
Pixso ko'pchilik figmani url orqali joylay olmayabman deyabdi. Joylanmayotgan figmani qanday qilib joylab haqida hozir post qoyaman.
pixso.net
[OFFICIAL] Pixso - A Free Online UI/UX Design Tool
Pixso is the best UI/UX collaboration tool that enables you to make great products as a team. You can prototype, design, and deliver code with Pixso.
๐4
Figmani Pixso ga joylay olishlik uchun , figma hamma uchun ochiq bo'lishligi kerak.
Siz figmani Dublicate qilsangiz , siz figmaga admin bo'lib qolasiz va uni hamma uchun ochiq manbaga aylantira olasiz.
Dublicate qilishni rasmda ko'rsatdim , Dublicate qilingan figmani URL ini Pixso ga joylab , figmani Pixsoda ochishligiz mumkin bo'ladi.
@abs_javascript
Siz figmani Dublicate qilsangiz , siz figmaga admin bo'lib qolasiz va uni hamma uchun ochiq manbaga aylantira olasiz.
Dublicate qilishni rasmda ko'rsatdim , Dublicate qilingan figmani URL ini Pixso ga joylab , figmani Pixsoda ochishligiz mumkin bo'ladi.
@abs_javascript
๐6๐ฅ3
JSON.parse() vs JSON.stringify()
JSON.parse() - json formatidagi malumotni Obyektga almashtiradi.
JSON.stringify() - Obyektni JSON dagi malumotga almashtiradi.
Ko'p holatlarda obyektlardan klone olish uchun ham ishlatiladi. klon olayotganizda obyekt ichida funksiya bo'lmasligi kerak.
@abs_javascript
JSON.parse() - json formatidagi malumotni Obyektga almashtiradi.
JSON.stringify() - Obyektni JSON dagi malumotga almashtiradi.
Ko'p holatlarda obyektlardan klone olish uchun ham ishlatiladi. klon olayotganizda obyekt ichida funksiya bo'lmasligi kerak.
@abs_javascript
๐5โค1๐ฅ1
Optional chaining nima ?
Optional chaining - biror obyektning biror property va methodโlariga โxavfsizโ kirish usuli. Bu orqali kirilgan property yoki method agar yoโq boโlsa bizga error emas, balki undefined qaytaradi.
@abs_javascript
Optional chaining - biror obyektning biror property va methodโlariga โxavfsizโ kirish usuli. Bu orqali kirilgan property yoki method agar yoโq boโlsa bizga error emas, balki undefined qaytaradi.
@abs_javascript
๐8๐ฅ2๐ณ1