clickTest라는 메소드를 만들고 실행하는 과정이다. 메소드는 title의 색이 흰색이면 파란색으로 파란색이면 빨간색으로 바꿔라 라는 내용이다.
위의 코드는 js파일에 간단하게 online과 offline일때 콘솔에 메세지를 띄워주는 함수를 작성하고 window.addEventListener("동작",메소드)를 실행해서 wifi 접속의 유무에 따라서 콘솔에 메세지를 뿌려주는 것을 해본 것이다. 또 그 밑에는 현재의 색깔과 내가 미리 설정해 놓은 BASE_COLOR가 다를 경우 title id의 글자 색을 바꿔주는 메소드를 만들어서 실행해 본 것이다.
보통 js에서 직접적으로 css를 바꿔주는 일은 잘 하지 않는다고 한다. css, html, js 각각이 수행하는 역할과 그에 따른 영역들이 명확하게 나눠져있는 것이 코드 작성이 깔끔하고, 다음에 수정할 때도 편하기 때문이다. 위에서 직접적으로 css를 수정하는 과정을 보여준 이유는 초보자들이 가시적으로 보면서 이해하기 쉽도록 하기 위함이라고 한다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
html 파일
css 파일
js 파일
처음에 한 과정(css 직접 수정)과 달리 최종적으로 완성한 코드에서는 css 파일에 .btn(btn클래스) 그리고 .clicked(clicked 클래스) 의 css를 설정해놓고, 클릭 할 때마다 title에 class 명이 추가되거나 빠지도록 메소드를 수정했다. btn 클래스는 title에 미리 설정해 놓은 클래스 인데, cursor기능이 있어서 마우스를 가져다대면 손가락 모양이 나오도록 css를 설정해 놓았다. btn 클래스만 설정해놓고 클릭할 때 마다 clicked클래스로 변하는 로직을 설정해주면 안되는 이유는 한 번에 한 번만 수정돼서 원래 있던 클래스가 날아가 버리기 때문이다. 이걸 방지하고자 classList.contains()라는 메소드를 써서 내가 설정해 놓은 CLICKED_CLASS가 포함되어있는지를 확인해서 수정하도록 해주면 btn도 살고 clicked도 추가 수정이 되는 결과가 나온다.
근데 위에 쓴 모든 과정이 귀찮아서 미리 만들어 놓은 기능이 있다. title.classList.toggle(CLICKED_CLASS); 이다. 저 메소드에 CLICKED_CLASS만 넣어주면 조건문부터 모든 과정을 다 해결해준다. 정말 메소드를 잘 공부하고 MDN을 잘 봐야겠다고 느끼게 되었다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
위에는 그냥 클릭했을 때 CSS가 변하는 걸 가시적으로 변하는 것을 캡쳐해서 넣어봤다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
여기까지가 nicolas의 VanilaJS 무료 강의의 이론 이었다. 다음 수업부터는 이론에서 배운 내용을 토대로 Momentum이라는 것을 클론 코딩해본다고 한다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
핵심 요약 : css를 직접 수정하는 js코드는 잘 작성하지 않고, class, id 값을 발생하는 event와 비슷한 이름으로 짓고, css에 event가 발생했을 때 어떤 css를 보여주고 싶은지 사용자가 정해 놓고, event 발생시 class, id 값을 변화시키는 방식으로 하는 것이 깔끔하다. 그리고 만들어져 있는 메소드들 이 굉장히 많기 때문에 https://developer.mozilla.org/ko/docs/Web/JavaScript 을 참조해서 쓰는 것을 추천한다.
'js' 카테고리의 다른 글
| localStorage에 data 저장하고 불러오기 (3) | 2018.12.29 |
|---|---|
| make clock with vanilaJS (0) | 2018.12.29 |
| 변수의 선언과 JS 자료 저장 구조(배열) (0) | 2018.12.23 |
| Your first JS Function (0) | 2018.12.18 |
| let, const, variables, array, object (0) | 2018.12.18 |
