조건문, 반복문while을 활용해 화면모드 바꾸기

 

1. night이 적힌 버튼을 생성한다. 클릭할 시 야간모드 화면이 된다.

<input type="button" value='day' onclick="
document.querySelector('body').style.color='black';
document.querySelector('body').style.backgroundColor='white';
">

2. 마찬가지로 주간모드

<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black'; 
document.querySelector('body').style.color = 'white';
">

---

3. 조건문을 활용해 버튼 하나로 기능하게 만들 수 있다.

# value 값이 night인 버튼을 클릭함
-> if value가 night 라면 -> 야간모드일때의 글자색과 배경화면을 지정하고, 버튼의  value는 day로 변경한다.
-> else -> 그렇지 않다면 주간모드의 글자색과 배경화면을 지정하고  버튼의   value는 night로 바꾼다.

※value값과 주/야간 모드의 스타일은 반대여야 함에 주의.

<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';
  }
">

---

4. 리팩토링 : 중복을 제거해 깔끔한 코드를 만든다. 

#document.querySelector('body') => bodytag라는 변수로 지정함. (편의를 위해 앞에 var을 써서 변수임을 나타낼것.)
# document.querySelector('#night_day') => this

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

---

5.  반복문 while 을 사용해 야간모드 사용시 리스트 색상을 바꾸기

*[ ] Array - 배열 문법
var 변수명 = ['a', 'b', 'c', 'd']document.write(변수명[n]);  # 변수명 배열에서 n번째에 해당하는 값을 출력
document.write(변수명.length);                           # 변수명 배열의 구성요소의 총 갯수를 출력.
변수명.push('x');                                            # 이미 존재하는 변수명 배열에 'x'구성요소를 추가함.

# var alist = document.querySelectorAll('a');는 if에서 선언했으므로  else문에서 다시 쓸 필요 없다.
# i=0; 부터일 경우 h1의 색상도 바뀌므로 i=1;로 지정했다.

  <input id="night_day" type="button" value="night" onclick="
  var bodytag = document.querySelector('body');
  if(this.value === 'night')
  {
    bodytag.style.backgroundColor='black';
    bodytag.style.color = 'white';
    this.value = 'day';
    var alist = document.querySelectorAll('a');
    var i=1;
    while (i<alist.length)
     {
      console.log(alist[i]);
      alist[i].style.color='powderblue';
      i=i+1;
     }
  }

  else
  {
    bodytag.style.backgroundColor='white';
    bodytag.style.color = 'black';
    this.value = 'night';

    var alist = document.querySelectorAll('a');
    var i=1;
    while (i<alist.length)
    {
      console.log(alist[i]);
      alist[i].style.color='#4b778d';
      i=i+1;
    }
  }
  ">