【UdemyJS】Section7笔记（共18节）浏览器中的JS：DOM和events基础

7-3 What’s the DOM and DOM Manipulation

DOM是Web API的一部分，不属于JavaScript。

*API: Application Programming Interface

7-10 Refactoring Our Code_ The DRY Principle

本章第一个小项目完成；

code (Javascript)：

'use strict';

const input = document.querySelector('.guess');
const check = document.querySelector('.check');
const score = document.querySelector('.score');
const highScore = document.querySelector('.highscore');
const again = document.querySelector('.again');
const number = document.querySelector('.number');
const body = document.querySelector('body');
let num = Math.trunc(Math.random() * 20) + 1;
let scoreNum = 20;
let highScoreNum = 0;

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

check.addEventListener('click', function () {
  if (!input.valueAsNumber) {
    displayMessage(`No number!`);
  } else if (
    input.valueAsNumber != num &&
    body.style.backgroundColor != 'rgb(96, 179, 71)'
  ) {
    if (scoreNum > 1) {
      displayMessage(input.valueAsNumber > num ? '😡Too BIG!' : '🥶Too Small!');
      scoreNum--;
      score.textContent = scoreNum;
    } else {
      displayMessage('You lose!');
      scoreNum = 0;
    }
  } else if (input.valueAsNumber === num) {
    displayMessage(`🎉That's correct!`);
    number.textContent = num;
    if (scoreNum > highScoreNum) highScoreNum = scoreNum;
    body.style.backgroundColor = '#60b347';
  }
  highScore.textContent = highScoreNum;
});

again.addEventListener('click', function () {
  num = Math.trunc(Math.random() * 20) + 1;
  console.log(`Number reset to: ${num}`);
  number.textContent = '?';
  input.value = '';
  document.querySelector('body').style.backgroundColor = '#222';
  displayMessage(`Start guessing...`);
  scoreNum = 20;
  score.textContent = scoreNum;
});

7-11 PROJECT #2_ Modal Window

querySelector(‘.class’) 只会选择第一个符合条件的元素;

querySelectorAll(‘.class’) 会选择所有符合条件的元素并返回一个“Nodelist”(节点列表)，类似array;

因为display:none无法添加动画, 所以采用切换类的方法来实现过渡;

使用forEach模拟遍历;

我还试过直接改变opacity属性, 但是不知道为什么有时候会失灵(btnShowModal.forEach(b => b.addEventListener(‘click’, showModal))处).

'use strict';

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

const toggleModal = function (show) {
  modal.classList.toggle('fade-out', !show);
  modal.classList.toggle('fade-in', show);
  overlay.classList.toggle('fade-out', !show);
  overlay.classList.toggle('fade-in', show);
};
toggleModal(false);
const showModal = function () {
  toggleModal(true);
};
const closeModal = function () {
  toggleModal(false);
};

btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
btnShowModal.forEach(b => b.addEventListener('click', showModal));
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') closeModal();
});

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.fade-in {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

7-14 PROJECT #3_ Pig Game

'use strict';

const score0 = document.querySelector('#score--0');
const score1 = document.querySelector('#score--1');
const currentEl0 = document.querySelector('#current--0');
const currentEl1 = document.querySelector('#current--1');
const player0 = document.querySelector('.player--0');
const player1 = document.querySelector('.player--1');

const dice = document.querySelector('.dice');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');
const btnNew = document.querySelector('.btn--new');

let scores = [0, 0];
let currentScores = [0, 0];
let currentPlayer = 0;

function init() {
  scores = [0, 0];
  currentScores = [0, 0];
  currentPlayer = 0;
  score0.textContent = 0;
  score1.textContent = 0;
  player0.classList.add('player--active');
  player1.classList.remove('player--active');
  player0.classList.remove('player--winner');
  player1.classList.remove('player--winner');
  displayScore();
  displayCurrent();
  dice.classList.add('hidden');
}
init();

function checkWinner(currentPlayer) {
  if (currentScores[currentPlayer] >= 100) {
    const winnerPlayer = document.querySelector(`.player--${currentPlayer}`);
    winnerPlayer.classList.add('player--winner');
    return true;
  } else {
    return false;
  }
}

function switchPlayer() {
  currentScores[currentPlayer] += scores[currentPlayer];
  if (checkWinner(currentPlayer)) {
    return;
  }
  currentPlayer = currentPlayer === 0 ? 1 : 0;
  scores = [0, 0];
  displayScore();
  displayCurrent();
  player0.classList.toggle('player--active');
  player1.classList.toggle('player--active');
}

function displayScore() {
  score0.textContent = scores[0];
  score1.textContent = scores[1];
}

function displayCurrent() {
  currentEl0.textContent = currentScores[0];
  currentEl1.textContent = currentScores[1];
}

btnRoll.addEventListener('click', () => {
  if (checkWinner(currentPlayer)) {
    return;
  }
  const diceNumber = Math.floor(Math.random() * 6) + 1;

  dice.classList.remove('hidden');
  dice.src = `dice-${diceNumber}.png`;

  if (diceNumber !== 1) {
    scores[currentPlayer] += diceNumber;
  } else {
    scores[currentPlayer] = 0;
    switchPlayer();
  }
  displayScore();
});

btnHold.addEventListener('click', () => {
  switchPlayer();
});

btnNew.addEventListener('click', init);