Shahzod Codes

#dailytips
JavaScript da funksiyalar haqida gaplashamiz. Ular 2 xil turga bo'linib: oldindan belgilangan (predefined) va foydalanuvchi tomonidan belgilangan (user-defined) funksiyalardir. Oldindan belgilangan funksiyalar (predefined) - bu dasturga allaqachon o'rnatilgan, qurilgan funksiyalardir. Foydalanuvchi tomonidan belgilangan funksiyalar (user-defined) esa maxsus vazifalarni bajarish uchun dasturga kiritadigan funksiyalardir.

Funksiyalarni elon qilishni ham bir necha turlari bor, ular Function Declaration, Function Expression, va Arrow Function

Function declaration - Function obyektini yaratadi. Har safar chaqirilganda, oxirgi bajarilgan return bayonotida ko'rsatilgan qiymatni qaytaradi. Agar funksiya oxirigacha yetib, return topilmasa, undefined qaytaradi.

// function declartion
function shahzodCodes() {
console.log('ShahzodCodes');
}

// anonymous function
function() {
console.log('ShahzodCodes');
}

// constructor function
function ShahzodCodes() {
console.log('ShahzodCodes');
}

const shahzodCodes = new ShahzodCodes();

Function expression - Funksiya deklaratsiyasiga juda o'xshash, deyarli bir xil sintaksisga ega.
Asosiy farq - funksiya nomi ixtiyoriy, bu anonim funksiyalar yaratish imkonini beradi. IIFE (Darhol Chaqiriladigan Funksiya Ifodasi) sifatida ishlatilishi mumkin.

// function expression
const shahzodCodes = function() {
console.log('ShahzodCodes');
};

// IIFE (Darhol Chaqiriladigan Funksiya)
(function () {
console.log("ShahzodCodes");
})();

Arrow function expression - An'anaviy funksiya ifodasiga nisbatan ixchamroq alternativa. Ba'zi semantik farqlar va cheklovlarga ega:

1. O'zining this, arguments, yoki super bog'lanishlari yo'q.
2. Metod sifatida ishlatilmasligi kerak.
3. Konstruktor sifatida ishlatib bo'lmaydi (new bilan chaqirilsa TypeError yuzaga keladi).
4. new.target kalit so'ziga kirish imkoni yo'q.
5. Tanasida yield ishlatib bo'lmaydi va generator funksiya sifatida yaratib bo'lmaydi.

// arrow function
const shahzodCodes = () => console.log('ShahzodCodes');

Batafsil shu post da o'qishingiz mumkun, post da xatolar bo'lishi mumkun chunki subyektiv fiklar bor shu uchun MDN dan foydalaning.

https://medium.com/sessionstack-blog/how-javascript-works-the-different-ways-of-declaring-a-function-5-best-practices-8a0324c06fe2

#dailytips
Navigator.onLine brauzerning onlayn holatini qaytaradi. Property boolean qiymatini qaytaradi, bunda true onlayn va false oflayn ma'nosini anglatadi. Property brauzerning tarmoqqa ulanish qobiliyati o'zgarganda yangilanishlarni yuboradi. Yangilanish foydalanuvchi havolalarni ochganda yoki skript masofadagi sahifani so'raganda sodir bo'ladi.

Masalan, foydalanuvchilar internet aloqasini yo'qotgandan so'ng darhol havolalarni bosganlarida xususiyat false qiymatini qaytarishi kerak.

if (navigator.onLine) {
console.log("online");
} else {
console.log("offline");
}

Brauzerlar bu xususiyatni turlicha amalga oshiradi.
Chrome va Safari'da, agar brauzer mahalliy tarmoq (LAN) yoki routerga ulana olmasa, u oflayn hisoblanadi; boshqa barcha holatlar true qiymatini qaytaradi. Shunday qilib, brauzer false qiymatini qaytarganda oflayn ekanligini taxmin qilishingiz mumkin, ammo true qiymati brauzer internetga kira olishini anglatmaydi deb hisoblash mumkin emas. Masalan, kompyuter doimo "ulangan" bo'lgan virtual ethernet adapterlari mavjud virtualizatsiya dasturini ishga tushirayotgan holatlarda soxta ijobiy natijalar olishingiz mumkin. Shuning uchun, agar siz haqiqatan ham brauzerning onlayn holatini aniqlashni istasangiz, qo'shimcha tekshirish usullarini ishlab chiqishingiz kerak.

Tarmoq holatidagi o'zgarishlarni online va offline hodisalarini tinglash orqali kuzatishingiz mumkin.

window.addEventListener(
"offline", (e) => {
console.log("offline");
});

window.addEventListener(
"online", (e) => {
console.log("online");
});

Bu property bizga offline application lar yaratishda yordam beradi, yoki qaysidur malumotlarni user interneti bilan muammo bo'lgan paytda user store ga saqlab keyin internet stabil bo'lgan vaqtda backend ga jo'natishda ham qo'l keladi.

#dailytips
CSS da position xossasi (property) haqida gaplashamiz. Ko’pchilik interview larda beriladigan savol bo’lib to’g’ri va to’liq javob berilishni talab qilishadi, va bugun biz buni ko’rib chiqamiz.

CSS position elementning document da qanday joylashganligini belgilaydi, top, right, bottom, va left xossalari joylashtirilgan elementlarning yakuniy joylashuvini aniqlaydi.

CSS position qiymatlari:


position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

position: static

Element normal flow bo'yicha joylashtiriladi. top, right, bottom, left va z-index xossalari hech qanday ta'sir ko'rsatmaydi.

position: relative

Element normal flow bo'yicha joylashtiriladi, so'ngra top, right, bottom va left qiymatlariga asoslanib o'ziga nisbatan siljitiladi. Bu siljish boshqa elementlarning joylashuviga ta'sir qilmaydi; shuning uchun, sahifa tartibida element uchun ajratilgan joy xuddi position qiymati static bo'lgandek bo'ladi.

position: absolute

Element normal flow dan olib tashlanadi va sahifa tartibida element uchun joy ajratilmaydi. Element o'zining eng yaqin joylashtirilgan ota-elementiga (agar mavjud bo'lsa) yoki dastlabki o'z ichiga oluvchi blokka nisbatan joylashtiriladi. Uning yakuniy joylashuvi top, right, bottom va left qiymatlari orqali aniqlanadi.

position: fixed

Element normal flow dan olib tashlanadi va sahifa tartibida element uchun joy ajratilmaydi. Element o'zining dastlabki o'z ichiga oluvchi blokiga nisbatan joylashtiriladi, bu viewport hisoblanadi. Uning yakuniy joylashuvi top, right, bottom va left qiymatlari orqali aniqlanadi. Element har bir sahifada bir xil joyga joylashtiriladi.

position: sticky

Element normal flow bo'yicha joylashtiriladi, so'ngra eng yaqin aylantiriladigan ota-element va o'z ichiga oluvchi blokka nisbatan, top, right, bottom va left qiymatlariga asoslanib siljitiladi.
Bu qiymat har doim yangi joylashuv kontekstini yaratadi. Yopishqoq element "aylantirilish mexanizmi"ga ega bo'lgan eng yaqin ota-elementiga yopishadi (bu overflow xossasi hidden, scroll, auto yoki overlay bo'lganda yaratiladi).

Batafsil bu link orqali o’qing.

#dailytips
Html da Data Attribute lar bilan ishlashda juda ko'p savollar bo'ladi, shu savollar ga javob berish uchun post topishga xarakat qildim.
O'zi data-attribute lar orqali nimalar qila olamiz ?. Data attribute lar ni

data-*

bilan elon qilishni maslahat berishadi, chunki agar ular ni

data-user-width

emas width deb elon qilsak bu html ni qoidalarini buzadi.

Data attribute lar value siz ham bo'lishi mumkun.

va turli xil value bilan ham

lekin iloji boricha to'gri value yozishga harat qilish kerak ( pastdagi variant noto'gri)

va siz dash bilan data-attribute nomini uzunroq yozishingiz mumkun

Batafsil bu link orqali o'qishingiz mumkun.

Happy coding 🥳

#dailytips
CSS haqida qancha gapirsam ham kam, juda foydali yana bir CSS funksiyalar dan :where() haqida gaplashamiz. Bu funksiya pseudo class bolib argument sifatida selektor lar ro'yxatini qabul qilib, berilgan style larni ro'yxatdagi barcha element larga amal qildiradi.

header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoratíon: underline;
}

Yuqorida bizda 3 ta element bor lekin elementlar soni ko'paygan sari kod ni o'qish va u bilan ishlash qiyinlashadi. :where() shu joyda kerak bo'ladi.

:where(header, main, footer) a:hover {
color: red;
text-decoratíon: underline;
}

Batafsil bu link orqali malumot olishingiz mumkun.

Happy Coding 🥳