JavaScript-da rest operatori (...) vazifasi
Rest operatori (...) bir nechta argument yoki massiv elementlarini bitta o‘zgaruvchiga yig‘ish uchun ishlatiladi. U asosan funksiya argumentlarini yoki massiv va obyektlardan ma'lumot olish uchun ishlatiladi.

function logger(a, b, ...rest) {
  console.log(a);
  console.log(b);
  console.log(rest);
}
logger(12, 10, 1, 2, 3, 4, 5, 6);

a = 12

b = 10

...rest = [1, 2, 3, 4, 5, 6]

Rest operatori (...rest) barcha ortiqcha argumentlarni massiv sifatida saqlaydi.

Logger funksiyasiga nechta argument bersangiz ham, a va b birinchi ikkita qiymatni oladi, qolganlari rest massiviga tushadi.

const cards = document.querySelectorAll(".catalog_box"),
textInfo = document.querySelector(".text");

cards.forEach(card => {
  card.addEventListener("mousemove", (e) => {
    let half = card.clientWidth / 2
    let x = e.offsetX - half 
    let y = e.offsetY - half
    textInfo.innerHTML = `${x}px | ${y}px`
    card.style.transform = `rotateY(${x/4}deg) rotateX(${-y/4}deg)`
  })
  card.onmouseout = () => card.style.transform = `rotate(0)`
})

//ORIENTED OPERATING PROGRAMMING

class Typing {
  constructor({el, interval, delay}){
    this.el = document.querySelector(el);
    this.interval = interval || 500 
    this.delay = delay == undefined ? 1000 : delay
    this.text = this.el.innerHTML.trim()
    this.el.innerHTML = ""
    setTimeout(() => this.write(i), this.delay);  
  }
  write(i = 0){
    this.el.innerHTML += this.text[i] 
    i++;
    if (i < this.text.length) {
      setTimeout(() => this.write(i), this.interval);      
    }

  }
}
new Typing({
    el: ".header__content h1" ,
    interval: 300,
    delay:1000
});

DOM

document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back

const element = document.getElementById('myElement');
console.log(element.clientWidth);  // Elementning ko'rinadigan kengligi
console.log(element.clientHeight); // Elementning ko'rinadigan balandligi

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( 'The time is 12:30' );
}

window.pageXOffset is an alias of window.scrollX.
window.pageYOffset is an alias of window.scrollY.

click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
contextmenu – when the mouse right-clicks on an element.
mouseover / mouseout – when the mouse cursor comes over / leaves an element.
mousedown / mouseup – when the mouse button is pressed / released over an element.
mousemove – when the mouse is moved.

keydown va keyup - klaviatura tugmasi bosilganda va qo'yib yuborilganda.

<input type="button" id="button" value="Button">
<script>
  button.onclick = function() {
    alert('Click!');
  };
</script>

<input id="elem" type="button" value="Click me"/>
<script>
  function handler1() {
    alert('Thanks!');
  };
  function handler2() {
    alert('Thanks again!');
  }
  elem.onclick = () => alert("Hello");
  elem.addEventListener("click", handler1); // Thanks!
  elem.addEventListener("click", handler2); // Thanks again!
</script>