노마드코더 바닐라 JS

여태껏... html,python,css 파일 작성하면서 와 나 이런것도 할줄알아 이정도면 할수있겠어 했던 나의 그 자부심이 자바스크립트를 하면서 와르를르... 무너졌다ㅠ.ㅠ 뭐가이렇게 복잡한거야 그치만 재미는 있어!!!! 막 신기하긴해! 근데도대체 뭔소리야!!!! 공부 열심히해봐얒...휴 일단 오늘 배운 내용

---

querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴  (여러개의 경우 제일 첫번째 것만 가져옴)

querySelectorAll - 조건에 부합하는 모든 element를 가져옴

---

addEventListener

 

아래 코드에서 보다시피 js를 통해서 style값 또한 바꿀 수 있다. (이렇게는 잘 하지 않음)

Event에는 어마어마하게 많은 명령어가 있다. 차차 배워가겠지만 addEventListener로 여러가지를 해낼 수 있었다.

 

const h1 = document.querySelector(".hello h1")

function handleMouseClick() {
  h1.style.color = "blue"
}

function handleMouseEnter() {
  h1.innerHTML = "Mouse is here!"
}

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

function handleWindowCopy() {
  alert("copier!");
}

h1.addEventListener("click", handleMouseClick);
h1.addEventListener("mouseenter", handleMouseEnter);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);

예를 몇가지 보면 click은 말그대로 클릭시, mouseenter는 마우스를 올릴때, resize는 윈도우 창을 리사이즈할때, copy는 복사할때 발생하는 이벤트를 가지고 원하는 모습이 발생할 수 있게 한다.

 

여러 element들은 아래 링크에 나와있다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

HTMLElement - Web APIs | MDN

---

if-else 와 toggle

 

 

const h1 = document.querySelector("div.hello:first-child h1")

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass=h1.classList.contains(CLICKED_CLASS);
    if(hasClass){
        h1.classList.remove(CLICKED_CLASS);
    }else{
        h1.classList.add(CLICKED_CLASS);
    }
}

h1.addEventListener("click", handelTitleClick);
init();

이 코드는 html에서 입력해둔 class가 js에서 입력하는 class에 씹히는걸 방지하기 위한 코드이다. 이는 if-else문으로 해결되며 코드를 해석해보면 

 

h1이 가지고있는 classlist중에 CLICKED_CLASS가 존재하면 h1의 클라스 리스트에서 CLICKED_CLASS를 삭제한다.

아니라면 CLICKED_CLASS를 클라스 리스트에 추가하여 나타날 수 있게 한다.

 

const h1 = document.querySelector("div.hello:first-child h1")

function handelTitleClick(){
 h1.classList.toggle("clicked")
   
}

h1.addEventListener("click", handelTitleClick);

얘는 위에 if-else 문을 엄청나게 간단하게 표현할 수 있는 토글방식이다. 

 

 좀더 알아듣기 쉽게 html을 가져와보면

  <h1 class="sexy-font">Click me!</h1>

라고 html에 입력해두고

.clicked{
  color: tomato;
  transition: color .5s ease-in-out;
}

.sexy-font{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

를 css로 부여하면

clicked 발동시에 sexy-font가 동작하지 않아 원하는 글꼴이 나오지 않는 사태가 발생한다. 그래서 위의 코드들을 사용해 h1이 clicked를 포함하고 있지 않으므로 class에 추가해서

  <h1 class="sexy-font clicked">Click me!</h1>

가 되게 하는 것이다! (정확하지 않음)

 

이분 벨로그보면 쫌더 이해가 될것 같다.

 

https://velog.io/@choi46910/JS-%EB%B0%94%EB%8B%90%EB%9D%BC-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-2