Behzod | IT blog

#interview #js
Quyidagi divlar jamlanmasining eng quyi chuqurligini toping?

 <div id="app">
      <div>
        <div>
          <div></div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div></div>
          </div>
        </div>
      </div>
    </div>

Javob:

const app = document.querySelector('#app');

const treeDepth = (divel, currentLevel) => {
  if (divel.children.length === 0) return currentLevel;
  currentLevel += 1;
  let maxDepth = currentLevel;
  Array.from(divel.children).forEach(element => {
    maxDepth = Math.max(treeDepth(element, currentLevel), maxDepth);
  });
  return maxDepth
};
console.log(treeDepth(app, 0));

60 views08:57

Behzod | IT blog

#interview #js

1. Nuxt js va Vue js farqi
2. SSR nima
3. Child componentdan Parentga
4. Vue js lifecycle hooklar sanang

54 views04:49

Behzod | IT blog

#interview #js

function reduce(arr, callback, initVal) {
  let acc = initVal === 'undefined' ? 'undefined' : 0;
  for (let i = 0; i < arr.length; i++) {
    if (acc !== 'undefined') {
      acc = callback(acc, arr[i], i, arr);
    } else {
      acc = arr[i];
    }
  }
  return acc
}
const numbers=[1,2,3]
console.log(reduce(numbers,function(acc,val){
  return acc+val
},0))

56 viewsedited 07:51

Behzod | IT blog

function map(arr, callback) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    const result = callback(arr[i], i, arr);
    newArr.push(result);
  }
  return newArr;
}

60 views07:52

Behzod | IT blog

function customSome(callback) {
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      return true;
    }
  }
  return false;
}

Array.prototype.customSome = customSome;

64 views07:54

Behzod | IT blog

function filter(array, callback) {
  const filteredArray = [];
  for (let i = 0; i < array.length; i++) {
    if (callback(array[i], i, array)) {
      filteredArray.push(array[i]);
    }
  }
  return filteredArray;
}

66 views07:55

Behzod | IT blog

Quyidagi funksiyani bir necha marta chaqirish orqali, counterni increment qilishni, yo'li self invoked funksiyadan foydalanish

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();
console.log(add())

58 viewsedited 11:46

Behzod | IT blog

for (var i = 1; i <= 10; i++) {
  function foo(x) {
    setTimeout(() => {
      console.log(x);
    }, 0);
  }
  foo(i);
}

52 views04:20

Behzod | IT blog

function addGlobalEventListener(type, selector, callback, options) {
  document.addEventListener(type, e => {
    if (e.target.matches(selector)) callback(e)
  }, options)
}

addGlobalEventListener("click", ".btn", () => {
  console.log("Clicked Button")
}, { once: true })

55 views13:02

Behzod | IT blog

Nullish operator qattiqroq tekshiradi logical OR(||) operatorga qaraganda

const x = false;
const y = 0;
const z = '';

const a = x || 'default';  // 'default'
const b = y || 'default';  // 'default'
const c = z || 'default';  // 'default'

const d = x ?? 'default';  // false
const e = y ?? 'default';  // 0
const f = z ?? 'default';  // ''

57 views05:47

Behzod | IT blog

Javascript dasturlash tilida bir nechta funksiya turlari bor.

1.Function declaration. Ushbu tur juda keng foydalaniladi. Function declarationda funksiya "function" kalit so'zi bilan boshlanadi va hohlagan nomingizni yozasiz.

Misol:

function myFunction(param1, param2) {
  // Function body
}

2. Function expression.
Bu turdagi funksiyani siz anonim tarzda yaratasiz va biror bir o'zgaruvchiga tenglashtirasiz.

Misol:

const myFunction = function(param1, param2) {
  // Function body
};

3. Arrow functionlar. Bu funksiya turi ES6 versiyada kirgizilgan, Bu funksiyalar doim anonimus bo'ladi.

Misol:

const myFunction = (param1, param2) => {
  // Function body
};

4. Konstrkuturli funksiyalar. Bu turdagi funksiyalar yangi funksiyali obyekt yaratish uchun ishlatiladi

Misol:

const myFunction = new Function("param1", "param2", "return param1 + param2");

58 viewsedited 05:54

Behzod | IT blog

Javascriptda first-class function nima?

First-class function biror bir o'zgaruvchiga tenglashtirilib, boshqa bir funksiya uchun argument sifatida ishlatilinishi mumkin

Misol:

function multiplyByTwo(num) {
  return num * 2;
}

function mapArray(arr, fn) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(fn(arr[i]));
  }
  return result;
}

const numbers = [1, 2, 3, 4];
const doubledNumbers = mapArray(numbers, multiplyByTwo);
console.log(doubledNumbers); // [2, 4, 6, 8]

Bu misolda multiplyByTwo nomli funksiya yaratdik. Shungdek mapArray funksiyani argumentlari, array, va funksiya qabul qiladigan qilib yaratdik. Va natijada biz multiplyByTwo funksiyasini argument sifatida ishlatishimiz va callback qilib chaqirishimiz mumkin

87 views12:13

Behzod | IT blog

#vuejs #interview

Vue.js xususiyatlarini sanab bering?

Quyida javob: 👇
https://telegra.ph/Vuejs-xususiyatlarini-sanab-bering-05-12

Telegraph

Vue.js xususiyatlarini sanab bering?

1.Virtual DOM Vue.js-dagi Virtual DOM - bu foydalanuvchiga interfeysni ko'rsatish samaradorligi oshirish uchun foydalaniladigan usul. HTML DOM-ni to'g'ridan-to'g'ri manipulyatsiya qilish o'rniga (bu sekin va resurs talab qilishi mumkin), Vue.js JavaScript…

104 viewsedited 12:39

Behzod | IT blog

https://t.me/JoshDeveloper/358

Josh*Developer

MENU:

O'zbek tilidagi barcha maqolalarim va boshqa manbalarni ushbu jadvaldan topib olasiz.
Yangi maqola chiqsa ushbu menyuga albatta qo'shib boriladi.
InshaaAlloh

JavaScript
1. Optional chaining(?.)
2. Data types(ma'lumotlar tiplari)
3. First…

83 views13:56

Behzod | IT blog

#vuejs

Bir qancha reflar yaratishni oldini ol!

reactive object orqali biz state data ni ixchamlashtirishimiz mumkin.
Quyidagi misollarni taqqoslang:

// Just a bunch a refs :/
const firstName = ref('Michael');
const lastName = ref('Thiessen');
const website = ref('michaelnthiessen.com');
const twitter = ref('@MichaelThiessen');

Endi shuni yagona reactive objectga o'tkazamiz.

// A single object to think about
const michael = reactive({
  firstName: 'Michael',
  lastName: 'Thiessen',
  website: 'michaelnthiessen.com',
  twitter: '@MichaelThiessen',
});

153 viewsedited 14:01

Behzod | IT blog

#vuejs

Vue js ilovangiz optimizatsiyasi

https://telegra.ph/Vue-js-ilovangiz-optimizatsiyasi-05-12

Telegraph

Vue js ilovangiz optimizatsiyasi

https://www.smashingmagazine.com/2022/11/optimizing-vue-app/?ck_subscriber_id=1959949541&utm_source=convertkit&utm_medium=email&utm_campaign=%F0%9F%94%A5+%28%23112%29+Ref+soup+and+optimizing+your+app%20-%2010733954

171 viewsedited 14:07

Behzod | IT blog

#js #interview

HTML DOM nima?

HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:

HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.

83 viewsedited 14:38

Behzod | IT blog

#js #interview

DOM Content Loaded hodisasi nima?

DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.

DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!

Misol:

<!DOCTYPE html>
<html>
  <head>
    <title>JS DOMContentLoaded Event</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let btn = document.getElementById("btn");
        btn.addEventListener("click", () => {
          // handle the click event
          console.log("clicked");
        });
      });
    </script>
  </head>

  <body>
    <button id="btn">Click Me!</button>
  </body>
</html>

P.S
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik

90 viewsedited 14:49

Behzod | IT blog

#js #interview

Data attributelar nima❓

✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.

Masalan:

<div
  id="test-div"
  data-first-name="Kyle"
  data-last-name="Cook"
  data-active
></div>

Uni quyidagicha o'qib olishimiz mumkin

const div = document.getElementById("test-div")

console.log(div.dataset)

{
  active: ""
  firstName: "Kyle"
  lastName: "Cook"
}

Real misol sifatida esa quyidagi kodga e'tibor bering:

<button data-modal-id="modal-1">Open Modal 1</button>
<button data-modal-id="modal-2">Open Modal 2</button>

<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>


const buttons = document.querySelectorAll("[data-modal-id]")

buttons.forEach(button => {
  button.addEventListener("click", () => {
    const modalId = button.dataset.modalId
    const modal = document.getElementById(modalId)
    modal.classList.add("show")
  })
})

Yuqorida biz 2 ta turli xil modalni ishga tushirish uchun data attributelardan foydalanib , yagona eventListener funksiya yozdik.

@seniorDevBlog

👍2

125 viewsedited 09:35

Behzod | IT blog

https://t.me/vuejs_uz/51466

Mirjalol Norqulov in VueJS_uz

Esimda boricha yozaman

HTML
- Semantik elementlar
- div va span teglarining farqi
CSS
- flex va grid layoutlar esimda qolgani shuni so'ragandi
JavaScript
- O'zgaruvchilar turlari
- Funksiyalar, objectlar
- Higher order functions, currying…

151 viewsBehzod, 10:08

Behzod | IT blog

#js #interview

Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓

✅ const myObj = { a: 1, b: 2 };
Object.defineProperty(myObj, 'a', { writable: false });

myObj.a = 3; // error: cannot assign to read only property 'a'

@seniorDevBlog

162 viewsBehzod, edited 13:20

About

Blog

Apps

Platform