[TIL]2주차 바닐라JS(2)

TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활]

2주차 TIL입니다.

작성자 : 38기_김민서

---

이번주차 모각코시간에서는 앞서 배운 js를 어떻게 써먹을지에 관련한 내용이였다.

js코드를 활용하는 방식은 대체로 아래와 같았다.

1. html의 element를 가져온다

2. event listner 코드 작성한다.

1. html의 element를 가져오기

document는 html의 정보를 담고있는 객체(Object)이다. 따라서 저번 시간에 다루었다 객체 속성의 개념을 활용해서,  js 코드에서 document.만 작성해도 여러 속성에 접근할수있다

(+전체적인 구조를 보고싶다면 console.dir(document)를 실행시키면된다)

주로 js코드에서 html 요소 가져오는방법은 크게 두가지가 있다

 1. querySelector(css selector를 사용하는방법)

 : 여러개있어도 리스트 형식이 아닌, 첫번째것만 리턴됨

만약 조건에 부합하는 요소를 모두 가져오고싶으면 querySelectorAll을쓰면 됌

 2. getElemenyBy~

id,class,tag이름으로 요소를 가져올수있다

2. event listner 코드 작성

먼저 event란 문서나 브라우저 상태변화를 브라우저가 자바스크립트 코드에 알리는 통지이다.

document의 속성들중 앞에 on이 붙어있는것들에 해당한다. 마우스를 스크롤하거나, window창의 크기를 재조정하는등등 모두 해당한다.

이때 event를 listen하는 코드를 쓴다는것은 발생한 이벤트에 대한 응답이라고 이해했다.

ex) button을 눌렀을때 js에서 아무런 설정을 해주지않는다면 페이지에서 아무런 변화가 일어나지않는다.

페이지가 응답을 어떻게해줄지 js코드에서 작성해주는것이다.

eventlistner 코드를 작성하는 방법은 크게 두가지이다

1. addEventListener 메소드 활용

2. 이벤트 리스터 프로퍼티에 리스너 등록(onClick,onmouseover..)

+html 태그내에서 속성으로서 작성하는 방법도있다

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

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

//방법1)
h1.addEventListener("click", handleTitleClick);
//방법2)
h1.onClick = handleTitleClick;

+여기서 우리가 함수를 실행하기 위해서 쓰는 syntax인 ()를 써주면 안됨!

우리가 원하는건 js를 이용해서 함수를 실행시키는것이므로, 함수이름만 써줘야함 

 

3. css요소 바꾸기_className, classList를 활용

위와 같이 h1의 색상을 바꿔주는 방법은 여러가지가 있지만 위에서는 js코드에서 변경해주었다. 이를 css 코드를 활용하여 바꿔주는 방법으로 class이름과 리스트를 활용하는 방법이 있다.

h1 색상을 h1부분을 클릭할때마다 파란색에서 빨간색으로 번갈아가면서 변경되는 코드를 작성해보자

1. js 코드에서 조건문을 활용

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

function handleTitleClick(){
    const currentColor = h1.style.color;
    let newColor;
    if (currentColor === "blue"){
        newColor = "tomato";
    }else{
        newColor = "blue";
    }
    h1.style.color = newColor;
}


h1.addEventListener("click", handleTitleClick);

2. css에서 className을 활용하여 변경하는 방법

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

function handleTitleClick(){
    if(h1.className === "active"){
        h1.className = "";
    }else{
        h1.className = "active";
    }
    
}

h1.addEventListener("click", handleTitleClick);
//style.css
h1{
    color: tomato;
    /*animation 효과 추가*/
    transition: color .5s ease-in-out;
}
.active{
    color:blue;
}

+하지만 만약 html h1태그에서 원래 클래스 이름이 있었다면 위의 코드를 실행했을때 원래 클래스 이름은 복구할수없다. 이럴땐 classList를 사용하면 된다.

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

function handleTitleClick(){
    const clickedClass = "active";
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }else{
        h1.classList.add(clickedClass);
    }
    //내장함수 toggle을 쓰면 대체가능하다
    //h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);

---

다음시간에는위의 내용을 바탕으로 momentum 크롭 확장앱을 클론코딩 해보려고한다.