강좌 : 유튜브 생활코딩

3. WEB2-JavaScript

✍기초

제어할 태그 선택

document.querySelector('selector');

스타일 효과주기

.style.backgroundColor="black"
.style.color = 'white';

완성

/* night 모드 버튼 만들기 */
<input type = "button" value = "night" onclick=" 
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color = 'white';">

---

✍조건문

비교연산자와 불리언

• 비교연산자(===)를 통해서 만들어지는 결과는 true false 둘중 하나로 표현되고 이 두개의 값을 묶어서 불리언(boolean) 이라고 부른다

조건문의 활용

• if( 불리언 ) { }

/* night_day 모드 버튼 하나로 만드기 */
<input id="night_day" type ="button" value="night" onclick="
  if(document.querySelector('#night_day').value==='night'){
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('#night_day').value = 'day';
  } else {
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day').value = 'night';
  }
">

리팩토링(Refactoring)

• 코드의 가독성을 높이는 행위
• var 변수명 : 중복되는 것을 변수로 만들어 수정하기 용이하게 하기
• this : 이벤트가 속해 있는 태그 자기자신을 가르키는 키워드

<input type ="button" value="night" onclick="
  var target = document.querySelector('body');
  if(this.value==='night'){
    target.style.backgroundColor='black';
    target.style.color = 'white';
    this.value = 'day';
  } else {
    target.style.backgroundColor='white';
    target.style.color = 'black';
    this.value = 'night';
  }
">