자바스크립트의 시작 - 2. Javascript 제어문, 함수, 객체

 

 

1. 프로그램, 프로그래밍, 프로그래머

프로그램에는 순서라는 의미가 있다. 프로그래밍은 이러한 순서를 만드는 행위. 프로그래머는 이러한 순서를 만드는 일을 하는 사람. 

JS는 사용자와 상호작용하고, 이를 위해 시간에 따라 여러 기능이 실행돼야 하기 때문에 프로그래밍이라는 형태를 띠게 된다. 더 나아가 시간에 따라 코드가 실행되는 것 외에 조건에 따라 다른 코드가 실행되도록 하거나, 같은 코드가 반복적으로 실행할 수 있는 방법도 고안하게 됐다. 

반면 HTML은 순서에 상관 없이 정적인 정보만을 보여준다. 조건에 따라 다른 정보가 나타나는 것도 아니고, 단순히 웹페이지에 정보를 띄울 수 있게 해주는 언어이기 때문에 프로그래밍 언어라고 볼 수 없다.

 

 

2. 조건문

프로그램이 조건에 따라 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것.

• 비교연산자: 
• 불리언: 
• ===: 
• <, >: HTML에서 꺽쇠 기호가 태그를 나타낼 때 쓰이기 때문에 혼란을 줄 수 있다. 따라서 &lt; &gt로 나타낸다.

<input id="night_day" type="button" value="night" onclick="
	if(document.querySelector('#night_day').value === 'night'){
    	document.querySelector('body').style.backgroundcColor='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'
    }
">

 

 

3. 리팩토링

비효율적인 코드를 효율적으로 만들어 가독성을 높이고 유지보수가 쉽도록 만드는 것. 단, 코드의 기능적인 면에서 변화는 없도록 해야 한다. 

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

 

 

4. 배열과 반복문

<input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body')
	if(this.value === 'night'){
    	target.style.backgroundcColor='black';
        target.style.color='white';
        this.value === 'day'
        
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = 'powderblue';
        }
    } else {
    	target.style.backgroundcolor='white';
        target.style.color='black';
        this.value === 'night'
        
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = 'powderblue';
        }
    }
">

 

 

5. 함수

함수로 코드를 만들게 되면 유지보수가 쉬워지고 코드의 길이가 짧아진다. 그리고 함수를 사용하면 두 코드가 논리적으로 같다는 것을 한 번에 알 수 있고, 코드가 어떤 일을 하는지 한 눈에 알 수 있다는 장점이 있다.

<script>
    function nightDayHandler(self){
      var target = document.querySelector('body')
      if(self.value === 'night'){
          target.style.backgroundcColor='black';
          target.style.color='white';
          self.value === 'day'

          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
              alist[i].style.color = 'powderblue';
        }
      } else {
          target.style.backgroundcolor='white';
          target.style.color='black';
          self.value === 'night'

          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
              alist[i].style.color = 'powderblue';
        }
      }
    }
</script>

 

 

6. 객체

• 객체: 함수의 기반 위에서 존재하는 개념이며 서로 연관된 함수와 변수가 많을 경우 이를 정리하기 위해 사용한다.
• 메소드: 객체에 속해 있는 함수들을 메소드라는 별도의 이름으로 부르게 된다.
• 프로퍼티: 객체에 해당하는 변수

document.querySelector('body');
// 객체        메소드

 

• 객체의 순회: 객체에 있는 모든 값들을 가져오는 방법. 파이썬과 방법은 똑같으나 표기법이 다르기에 밑에 예시로 적어본다.

for(var key in coworkers) {
  document.write(coworkers[key]+'<br>');
}

 

• 객체의 활용

<script>
    var Body = {
      setColor: function (color) {
        document.querySelector('body').style.color = color;
      },
      setBackgroundColor: function (color) {
        document.querySelector('body').style.backgroundColor = color;
      }
    }

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

    function nightDayHandler(self){
      var target = document.querySelector('body')
      if(self.value === 'night'){
          Body.setBackgroundcColor('black');
          Body.setColor('white');
          self.value === 'day'

          Links.setColor('powderblue');
        }
      } else {
          Body.setBackgroundcColor('white');
          Body.setColor('black');
          self.value === 'night'

          Links.setColor('blue');
        }
      }
    }
</script>