【Javascript】Day6：JavaScript in the Browser: DOM and Events Fundamentals

What’s the DOM and DOM Manipulation

DOM: Document Object Model, a structrued representation of HTML documents.

DOM is basically a connection point between HTML documents and JavaScript code.

The DOM really is a complete representation of the HTML document.

JS is just a dialect of the ECMAScript specification

The DOM and DOM methods are actually part of something called the web APIs.

Selecting and Manipulating Elements

// textContent
console.log(document.querySelector('.message').textContent);
document.querySelector('.message').textContent = '🎉Correct Number!';

document.querySelector('.number').textContent = 13;
document.querySelector('.score').textContent = 10;

// value
document.querySelector('.guess').value = 23;
console.log(document.querySelector('.guess').value);

Handling Click Events

event listener: our code reacts to something that happens in the DOM. With it, we can wait for a certain event to happen and the react to it

An event is something that happens on the page, for example, a mouse click or a mouse moving or a key press.

// addEventListener(): listen for events in JavaScript
// argument: type of the event; event handler(tell the event listener want to do) a function value
document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  if (!guess) {
    document.querySelector('.message').textContent = '⛔ No number';
  }
});

Manipulating CSS Styles

else if (guess === secretNumber) {
    document.querySelector('.message').textContent = '🎉Correct Number!';
    // whenever manipulating a style, we always need to specify a string
    // inline styles
    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').style.width = '30rem';
  }

Refactoring Our Code: The Dry Principle

const displayMessage = function (message) {
  document.querySelector('.message').textContent = message;
};

if(guess is right){}
else {
    if (score > 1) {
      //   document.querySelector('.message').textContent = guess > secretNumber ? '📈 Too high!' : '📉 Too low!';
      displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      //   document.querySelector('.message').textContent = '🤡 You lost the game!';
      displayMessage('🤡 You lost the game!');
      document.querySelector('.score').textContent = 0;
    }
  }

Another Project

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');

// the limitation of querySelector() Method: use a querySelector which matches multiple elements, only the first one will be get selected
// const btnsShowModal = document.querySelector('.show-modal');

// type of btnsShowModal: Nodelist, like an array
const btnsShowModal = document.querySelectorAll('.show-modal');
console.log(btnsShowModal);

for (let i = 0; i < btnsShowModal.length; i++) {
  console.log(btnsShowModal[i].textContent);
}

Working With Classes

we can aggregate all of the properties that we need in one class in CSS file, then in JS file we simply add or remove these classes as needed.

When need to manipulate styles on a page, then always just export the styles into a class, just use the class in JS file.

Same function For Multiple Listeners

if the same function is used in multiple event listeners, we can specify the function as a separate function, then pass the function as an argument to multiple ‘addEventListener’ methods.

const openModal = function () {
  console.log('Button clicked');
  // add and remove classes
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

for (let i = 0; i < btnsShowModal.length; i++) {
  //   console.log(btnsShowModal[i].textContent);
  btnsShowModal[i].addEventListener('click', openModal);
}

// not calling the function
// btnCloseModal.addEventListener('click', closeModal()):call the function immediately as soon as JS executes this line
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

Handling An “ESC” Keypress Event

how to respond to keyborad events

Keyborad events are so-called global events because they do not happen on a specific element.

For the global event, we usually list an underwhole(?) document

3 types of events for the keyboard: the key down, the key press, or the key up

the information of which key was pressed will be stored in the event that is going to occur as soon as any key is pressed. And anytime that an event like this occurs, JS in fact generate an object which contains all the information about the event itself, and we can access that object in the event handler function

函数名带括号是函数调用，直接执行函数；不带括号是事件绑定，事件触发再执行

document.addEventListener('keydown', function (e) {
  console.log(e.key);

  // check if an element already has a certain class
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});