2020-06-14 생활코딩 자습

 

자바스크립트를 이용해서 body 부분에 css 속성을 주는 실습을 해봤다.

 

웹페이지에 버튼을 클릭하면 야간모드와 주간모드를 만들어주는 실습이였다. 

 

HTML은 단지 웹페이지를 보여주는것에 그치지만 JavaScript를 이용하면 사용자와 상호적인 동작이 가능하게 해준다.

 

그 과정에서 

 

조건문을 사용해서 처음에는 야간모드/ 주간모드  버튼을 두개로해서 만들었지만, 버튼 하나로 야간/주간 모드를 변경할 수 있는 코딩도 실습해봤다. 

 

그 과정에서 boolean이라는 개념도 배웠다.  boolean은 true&false 두가지가 있다.  if라는 가정문이 참일땐 어떤 동작을 하게하고 거짓일땐 또 다른 동작을 하게하는 것이었다.

 

그리고 코딩에서 가장 중요한것 중에 하나가 리펙토링이라고 한다.

 

코딩에서 동작에 변화를 주지않는 선에서 불필요하고 중복되는 즉,  비효율적인 코딩을 줄여나가는 작업이다.

위에 코딩에서 반복적인 코딩인 document.querySelector('body') 를  변수로 만들어주는 것이었다. 

target 이라는 변수로 지정해주면  document.querySelector('body') 처럼 길게 쓰지않고 target만 써도 동작을 한다.

 

또, onclick 같은 이벤트안에서 실행되는 코드들은 onclick이 속해 있는 태그를 가르키도록 약속되어 있는 특수한 키워드가 있다.  그게 바로 this다.

 

document.querySelector('#night_day')로 해당 태그를 가르키는 코드를 다 적지않아도  this 라는 키워드로 대체하면 

비효율적인 코드를 줄이고 간단하게 만들 수 있다.