강좌 : 유튜브 생활코딩

3. WEB2-JavaScript

✍배열

• 대괄호로 시작
• 값과 값사이는 콤마(,)로 구분

<script>
  var coworkers = ["홍길동", "김철수"];
</script>

배열 값 불러오기

• document.write(배열이름[]);

<script>
  document.write(cowekers[0]);  // 홍길동
  document.write(coworkers[1]);  // 김철수
</script>

배열 갯수 확인

• document.write(배열이름.length);

<script>
  document.write(coworkers.length);
</script>

배열 마지막에 값추가

• 배열이름.push('추가할 값');

<script>
  coworkers.push('김영희');
</script>

---

✍반복문

var i = 0;
while(i < 3){  // i가 3보다 작을때까지 반복
  document.write('홍길동');
  i = i+1;  // 한번돌때마다 i의 값에 1추가
}

---

✍배열과 반복문

• 배열을 리스트로 만들기

<script>
  var coworkers = ['홍길동','김철수','김영희','임꺽정'];
</script>
<ul>
  <script>
    var i=0;
    while(i<coworkers.lenght){  // 배열의 갯수만큼 반복
      document.write('<li>'+coworkers[i]+'</li>');
      i = i+1;
    }
  </script>
</ul>

• 변수에 스타일값 주기

var alist = document.querySelectorAll('a');  // 모든 a태그를 변수값으로 지정
var i = 0;
while(i < alist.length){  // 변수값만큼 반복
  alist[i].style.color = 'powderblue';  // 변수값에 style속성 추가
  i=i+1; 
}

---

✍함수

입력과 출력

• 입력 : 매개변수(parameter)와 인자(argument)
• 출력 : return

함수만들기

• fuction 함수이름(매개변수) {JavaScript code}

함수사용하기

• 리팩토링에서 아주 중요
• 함수이름(인자);

완성

// 매개변수
<script>
function nightDayHander(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="
  nightDayHander(this);
">