JavaScript (2) _ 생활코딩

JavaScript의 프로그래밍 언어적 요소(조건문, 반복문, 함수, 객체)

 

1. 조건문

: 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 역할 --> 복잡한 업무까지도 가능하도록

(1) 문법 기초

① ===  같음을 뜻하는 연산자

② if-else문

ex> toggle(현재 night이면 day로, 현재 day이면 night로 바뀌도록)

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

(2) 리팩토링

: 공장으로 다시 보내 개선 = 코드를 좀 더 효율적으로 만들기 위해 유지보수, 중복제거 등등

① this : 자기자신을 가리키는 태그는 this를 활용할 수 있다.  _______ "night_day"를 가르키면 this 쓸 수 있음

② 중복 제거 : 중복되는 값(ex> 태그)를 변수에 담으면 더 간결하고 수정에 용이하다. ____ target 변수 도입

<input id="night_day" 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';
    }
">

 

2. 반복문

(1) 문법 기초

① 배열

  - 초기화 : var example = ["hello", "nice", "to", "meet", "you"];

  - 출력 : index이용(example[0])

  - 입력 : example.push('good');

  - 길이 : example.length

② 반복문

  - while

cf> document.write() : javascript의 출력문 역할(html 태그 생성 가능)

 

(2) ex> night일 때 모든 링크의 색깔을 밝게 바꾸고 싶다!!

  - document.querySelectorAll(클래스 or 태그) : 해당하는 클래스, 태그를 모두 선택 --> 배열로 return

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

 

3. 함수(function)

: 수납상자같은 용도. 코드를 정리정돈하기 위한 도구

(1) 장점

  - 웹페이지 크기 커지는 것 방지(코드 길이 증가)

  - 수정 용이성(유지보수)

  - function의 이름 : 어떤 일을 하는 것인지 표현

 

(2) 문법

① 기본 구조

function two(){
	document.write('<li>2</li>');
}

② 매개변수(parameter), 인자(argument)

function sum(left, right){ //매개변수parameter
  document.write(left + right + '<br>');
}
sum(2, 3); //인자 argument

③ 리턴(return)

- 표현식(expression)

: 1+1 = 2. 1+1은 2에 대한 표현식!

- 함수가 어떤 결과에 대한 표현식이 되도록하기 위해 return이 필요함

- 결과를 여러곳에 다양한 용도로 활용할 수 있음

 

(3) 활용

<script>
  function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
      target.style.backgroundColor = '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';
        i = i+1;
      }
    }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='blue';
        i = i+1;
      }
    }
  }
</script>

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

 

4. 객체(Object)

: 함수와 마찬가지로 정리정돈의 수단. = 서로 연관된 변수, 함수를 같은 이름으로 그룹핑하여 정리정돈

(1) 문법

① 기본 구조

<script>
var coworkers = {
    "programmer" : "hyejung",
    "designer" : "hyeongju"
};
</script>

② 삽입

<script>
coworkers.bookkeeper = "duru";
coworkers["data scientist"] = "doyoung";
</script>

③ 출력

<script>
document.write(coworkers.programmer + "<br>");
document.write(coworkers["data scientist"] + "<br>");
</script>

 

④ 순회(Iteration) : for ~ in문 쓰기

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

⑤ 메소드(method) : 클래스 내에 소속된 함수

<script>
coworkers.showAll = function(){ //각 데이터 iterate하여 보여주는 함수
    for(var key in this){
        if(key != "showAll"){
            document.write(key + " : " +  this[key] + '<br>');
        }
    }
}
coworkers.showAll();
</script>

⑥ 프로퍼티(property) :  클래스 내에 소속된 변수

 

(2) 활용

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