JavaScript (2)

khxxjxx·2021년 4월 16일
0

생활코딩

목록 보기
8/14

강좌 : 유튜브 생활코딩

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);
">
profile
코린이

0개의 댓글