JavaScript Practice1

JavaScript를 활용하여 자기소개 홈페이지에
NightandDayButton 주간 모드 & 야간모드 버튼을 추가해보았다.

NightandDayButton

    <input id="night_dayButton" type="button" value="night" onclick="
      nightdayHandler(this);
    ">

자기소개 홈페이지에 위의 코드를 추가하여 버튼을 추가하였다.

그 후 <script>파일을 생성하여 객체에 함수를 추가하였다.

var Links = {
  setcolor: function(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while (i < alist.length) {
      alist[i].style.color = color;
      i = i + 1;
    }
    //$('a').css('color', color);
  }
}

Links 라는 객체를 만들어서 문서 내 모든 'a'태그의 컬러를 지정하는 method를 만들었다.
while 반복문을 활용하여 alist라는 배열(array)내의 데이터들을 하나씩 불러와 color를 지정하는 방식이다.

 var Body = {
  setbackgroundcolor: function(color){
    var abody = document.querySelectorAll('body, #m-list, #m-footer');
    var i = 0;
    while (i < abody.length) {
      abody[i].style.backgroundColor = color;
      i = i + 1;
    }
    //$('body, #m-list, #m-footer').css('backgroundColor', color);
  }
}

이 방식을 이용하여 Body라는 객체 내에 문서 내 body, 복수의 id의 배경색을 지정하는 method setbackgroundcolor 또한 만들어 주었다.

• list와 footer를 sticky로 설정했기 때문에 id를 만들어 색을 따로 지정해주었다.
  querySelectorAll('body, #m-list, #m-footer')처럼 다수의 element를 지정할 수 있다.

var Button = {
  setcolor: function(color){
    document.querySelector('#night_dayButton').style.color = color;
    document.querySelector('#night_dayButton').style.borderColor = color;
  },
  setbackgroundcolor: function(color){
    document.querySelector('#night_dayButton').style.backgroundColor = color;
    //$('#night_dayButton').css('backgroundColor', color);
  }
}

Button의 객체를 만들고, setcolor와 setbackgroundcolor를 추가해주었다.
setcolor: <button>의 글자색(color)과 경계선의 색깔(borderColor)을 지정해주는 method
setbackgroundcolor: 배경색(backgroundColor)을 지정해주는 method

function nightdayHandler(self){
  var target = document.querySelector('body');
  if(self.value === 'night') {
    Body.setbackgroundcolor('black');
    self.value = 'day';
    Links.setcolor('white');
    Button.setcolor('slategray');
    Button.setbackgroundcolor('white');
  } else {
    Body.setbackgroundcolor('#FFA280');
    self.value = 'night';
    Links.setcolor('white');
    Button.setcolor('white');
    Button.setbackgroundcolor('slategray');
  }
}

마지막으로 nightdayHandler라는 함수를 추가하여 Night모드와 Day모드에 맞추어 색을 지정해주었다.

최종결과물