JS. 배열과 반복문

배열과 반복문

<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing", "leezche"];
</script>

<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>

<h2>add</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>

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

아래는 반복문을 배우는 과정이었다.

아래 코드를 실행하면 2,3이 연속으로 3번 나올 것이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Loop</h1>
    <ul>
      <script>
        document.write('<li>1</li>');
        var i = 0;
        while(i < 3){
        document.write('<li>2</li>');
        document.write('<li>3</li>');
        i = i + 1;
      }
        document.write('<li>4</li>');
      </script>
    </ul>
  </body>
</html>

아래 코드는 배열과 반복문을 이용한 로직이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
          i = i + 1;
        }
      </script>
    </ul>
  </body>
</html>

coworkers.length 자리에 상수값을 넣으면 coworkers에 들어갈 값이 증가할 때 마다 상수값을 변경해야 하는데 개발자는

비지니스 로직까지 변경하는 것은 말이 안된다.

그러므로 coworkers.length를 사용하여 배열안에 값 갯수만 바꾸면 될 수 있도록 하는 것이다.

다음은 배열과 반복문 활용을 어떤 코드로 하는지 볼 것이다.

야간모드일 때는 글씨를 밝게 표시하고 주간모드일 때는 글씨를 보다 어둡게 처리할 것이다.

<h1><a href="index.html">WEB</a></h1>
  <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';

  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';
  this.value = 'night';

  var alist = document.querySelectorAll('a');
  var i = 0;
  while(i < alist.length){
  alist[i].style.color = 'blue';
  i = i + 1;
  }
  }
  ">
  <div id="grid">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

배열과 반복문을 사용하여 링크의 색을 바꾸었다.

주간 모드일 때는 파란색, 야간모드일 때는 파우더블루로 색이 다른 것을 확인할 수 있다.

주간 모드

야간 모드

저작자표시 (새창열림)

'🔤 Language > 🟨 JavaScript' 카테고리의 다른 글

JS. 객체 (0)	2022.01.09
JS. 함수 (0)	2022.01.08
JS. 리펙토링 중복제거 (0)	2022.01.07
JS. 조건문 (0)	2022.01.07
JS. 비교 연산자와 Boolean 데이터 타입 (0)	2022.01.07

배열과 반복문

주간 모드

야간 모드

'🔤 Language > 🟨 JavaScript' 카테고리의 다른 글

티스토리툴바