1).innerText / .textContent / js로 html안의 content 작성

• document.querySelector("h1").innerText = "welcome";
• document.querySelector("h1").textContent = "welcome";

---

2).className / js로 html의 class를 바꿔서, html을 꾸미기

$h1.className = "yellow";

• html의 class를 yellow넣는다.
• 이전에 있던 class를 지우고 "yellow"를 넣는다.
• css에서 class yellow에 대해서 효과를 부여한다

.yellow{
  color: yellow;
} 

• 그 효과가 html에 적용된다.
• class를 넣을 때, 기존에 있던 class는 사라진다.
  • class="h1" -> .yellow넣음 -> class="yellow"

---

2.5).classList / js로 html의 class바꿔서, html꾸미기

//css

.yellowgreen {
  color: yellowgreen;
  transition: color 0.5s ease;
}
.tomato {
  color: tomato;
  transition: color 0.5s ease;
}
.font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

let $h1 = document.querySelector(".h1");

const onClick = function () {
  const clickYellowgreen = "yellowgreen";
  const clickTomato = "tomato";
  if ($h1.classList.contains(clickYellowgreen)) {
    $h1.classList.remove(clickYellowgreen);
    $h1.classList.add(clickTomato);
  } else {
    $h1.classList.remove(clickTomato);
    $h1.classList.add(clickYellowgreen);
  }
};
$h1.addEventListener("click", onClick);

• $h1.classList.contains(clickYellowgreen)

  • h1 tag안에 "yellowgreen"이란 class가 있는지 확인한다
  • 있다 -> true

• $h1.classList.remove(clickYellowgreen);

  • h1 tag안에 "yellowgreen"이란 class를 제거한다.
  • .className과 달리 이전의 class를 지우지 않는다.

• $h1.classList.add(clickYellowgreen);

  • h1 tag안에 "yellowgreen"이란 class를 추가한다.
  • .className과 달리 이전의 class를 지우지 않는다

• $h1.classList.toggle("tomato");

  • h1 tag안에 "tomato" class 없으면 -> "tomato" 추가한다.
  • h1 tag안에 "tomato" class 있으면 -> "tomato" 제거한다.

---

3).style.color / js로 색 바꾸기 / js로 css바꾸기

text.style.color = "green";

---

4) 0~100중에서 랜덤으로 숫자 뽑기

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

• Math.floor()
  • 10.7 -> 10
  • 반올림이 아니라 소숫점을 버린다.
• Math.random()
  • 0~0.99 랜덤 숫자 생성
• Math.floor(Math.random() * (number + 1));
  • number+1인 이유
  • Math.random()은 1은 안나오기 때문에 number+1을 안하면, 100을 대입하면, 무조건 100이 안나오는 경우가 발생한다.

---

5)랜덤으로 색 부여

const onClick = function () {
  $h1.style.color =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
};

• rgb(숫자,숫자,숫자)의 숫자에다가 숫자 랜덤 함수(0~255) 넣으면 된다.

---

6)이벤트 종류

//클릭 감지
$h1.addEventListener("click", onClick);

//마우스가 올라가면 감지
$h1.addEventListener("mouseenter", onClick);

//마우스가 벗어나면 감지
$h1.addEventListener("mouseleave", onClick);

---

7)window / 인터넷 창에 이벤트 설정하기

• window는 js로 html을 가져온 것이 아니라 js에 내장된 기능이다.

const windowResize = function () {
  document.body.style.backgroundColor = "tomato";
};

//윈도우 창의 크기가 변하는 것을 감지한다.
window.addEventListener("resize", windowResize);

• 이벤트 : 창 크기 변하는 것 감지
  • body tag의 배경색이 변한다.

//윈도우 창에서 복사(command+c 감지)
window.addEventListener("copy", windowResize);

//인터넷 연결 감지
window.addEventListener("online", windowResize);

//인터넷 연결 끊김 감지
window.addEventListener("offline", windowResize);

---

8)html클릭하면 토마토색 <-> 초록색 반복하여 바꾸기

//js로 색바꾸기
const onClick = function () {
  if (text.style.color !== "yellowgreen") {
    text.style.color = "yellowgreen";
  } else {
    text.style.color = "tomato";
  }
};

text.addEventListener("click", onClick);

//class를 넣어서 색 바꾸기
const onClick = function () {
  const currentColor = $h1.className;
  let newColor;
  if (currentColor !== "yellowgreen") {
    newColor = "yellowgreen";
  } else {
    newColor = "tomato";
  }
  $h1.className = newColor;
};
$h1.addEventListener("click", onClick);

//css에서 class만들기
.yellowgreen {
  color: yellowgreen;
  transition: color 0.5s ease;
}
.tomato {
  color: tomato;
  transition: color 0.5s ease;
}

---

9)코드리뷰

//js로 색바꾸기 -> 코드리뷰
const onClick = function () {
  const currentColor = text.style.color;
  let newColor;
  const changeYellowgreen = "yellowgreen";
  const changeTomato = "tomato";
  if (currentColor !== changeYellowgreen) {
    newColor = changeYellowgreen;
  } else {
    newColor = changeTomato;
  }
  text.style.color = newColor;
};

• 코드리뷰1
  • 결론 : 나중에 알아보기 쉽도록, 변수를 이용해서 바꿨다.
  • text.color.color -> 변수로 바꿨다.
  • text.style.color !== "yellowgreen";에서 text.color.color은 현재 색깔이 옐로우그린이냐? 판단하는 것이기 때문에 currentColor
  • text.style.color = "tomato"; 에서 색깔을 tomato로 바꾸는 것이기 때문에 newColor로 바꿈
• 코드리뷰2
  • 문자열을 쓰지않고, 변수에 넣어서 그 변수를 썻다.
  • 이유 : 변수는 틀리면 정의되지 않았다고, 콘솔에서 알려주기 때문이다.

---

10)js로 class추가할 때, transition사용법

8)참고

.yellowgreen {
  color: yellowgreen;
  transition: color 0.5s ease;
}
.tomato {
  color: tomato;
  transition: color 0.5s ease;
}

• 색깔이 0.5s 동안 변한다.