[ 생활코딩 - WEB2 JavaScript ] 강의 내용 정리

event

# event

: 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

- 이벤트 이용하여 사용자와 상호작용 가능

- ex) onclick, onchange 

---

버튼 두개로 day/night 모드 전환 

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

---

버튼 하나로 day/night 모드 전환 - if문 사용

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

 

---

리팩토링

# 리팩토링

: 결과의 변경 없이 코드의 구조를 재조정함

- 가독성을 높이고 유지보수 편해짐

- 중복된 코드와 비효율적인 코드 제거 

- 틈틈히 리팩토링해야 좋은 코드가 됨 

---

버튼 하나로 day/night 모드 전환 - 반복된 코드 제거 (리팩토링)

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

---

버튼 하나로 day/night 모드 전환 - a태그 글씨 변경 (배열과 for문 사용)

 

<input type="button" value="night" onclick="
    var target = document.querySelector('body');
    var alist = document.querySelectorAll('a');
    if(this.value === 'day'){
        this.value = 'night';
        for(var i = 0; i<alist.length; i++){
            alist[i].style.color='blue';
        }
        target.style.color='black';
        target.style.backgroundColor='white';
        
    }else{   
        this.value = 'day';
        for(var i = 0; i<alist.length; i++){
            alist[i].style.color='powderblue';
        }
        target.style.color='white';
        target.style.backgroundColor='black';
    }

---

버튼 하나로 day/night 모드 전환 - 함수사용

<script>
        function nightDayHandler(self) {
            var target = document.querySelector('body');
            var alist = document.querySelectorAll('a');
            if (self.value === 'day') {
                self.value = 'night';
                for (var i = 0; i < alist.length; i++) {
                    alist[i].style.color = 'blue';
                }
                target.style.color = 'black';
                target.style.backgroundColor = 'white';

            } else {
                self.value = 'day';
                for (var i = 0; i < alist.length; i++) {
                    alist[i].style.color = 'powderblue';
                }
                target.style.color = 'white';
                target.style.backgroundColor = 'black';
            }
        }
    </script>

<input type="button" value="night" onclick="nightDayHandler(this)">

---

버튼 하나로 day/night 모드 전환 - 객체 사용 & 파일로 분리

var setColor = {
  setTextColor: (color) => {
      document.querySelector('body').style.color = color;
  },
  setBackGroundColor: (color) => {
      document.querySelector('body').style.backgroundColor = color;
  },
  setLinksColor: (color) => {
      var alist = document.querySelectorAll('a');
      for (var i = 0; i < alist.length; i++) {
          alist[i].style.color = color;
      }
  }
};

function nightDayHandler(self) {
      var target = document.querySelector('body');
if (self.value === 'day') {
  self.value = 'night';
  setColor.setBackGroundColor('white');
  setColor.setTextColor('black');
  setColor.setLinksColor('blue');
} else {
  self.value = 'day';
  setColor.setBackGroundColor('black');
  setColor.setTextColor('white');
  setColor.setLinksColor('powderblue');
}
}

<script src = "color.js"></script>

---

라이브러리와 프레임워크 

# 라이브러리

: 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것

- 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않으므로 제작 의도에 맞게 작성하면 됨 

- ex) jQuery 

 

# 프레임워크 

: 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것

- 라이브러리가 포함

- 프레임워크만으로는 실행되지 않으며 기능 추가를 해야 함

- 프레임워크에 의존하여 개발해야 함

- 프레임워크가 정의한 규칙을 준수해야 함

- ex) Java - Spring / Python -Django / JavaScript - Angularjs / PHP -Laravel

 

---

버튼 하나로 day/night 모드 전환 - jQuery사용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src = "color.js"></script>

var setColor = {
  setTextColor: (color) => {
    $('body').css('color', color);
  },
  setBackGroundColor: (color) => {
    $('body').css('backgroundColor', color);
  },
  setLinksColor: (color) => {

    $('a').css('color', color);
  }
};

function nightDayHandler(self) {
  var target = document.querySelector('body');
  if (self.value === 'day') {
    self.value = 'night';
    setColor.setBackGroundColor('white');
    setColor.setTextColor('black');
    setColor.setLinksColor('blue');
  } else {
    self.value = 'day';
    setColor.setBackGroundColor('black');
    setColor.setTextColor('white');
    setColor.setLinksColor('powderblue');
  }
}

---

UI와 API

# UI

: 사용자 인터페이스 

- ex) 버튼 

# API 

: 애플리케이션 프로그램 인터페이스 

- ex) alert