배열과 반복문을 결합하면 어떤 강력한 효과를 갖는지 살펴보자
<body>
<h1>Loop & Array</h1>
<h2>Co workers</h2>
<ul>
<li>egoing</li>
<li>leezche</li>
<li>duru</li>
<li>taeho</li>
</ul>먼저 자바스크립트를 사용하지 않고 태그를 짜보았다
만약 목록이 1억개이고 li태그가 아닌 다른 복잡한 태그이고
이것에 대해 빈번한 수정이 있다면 글목록을 작성하는 것이 어렵다
js에서 연관된 데이터를 담는 방법이 배열이고
배열에 담겨있는 데이터를 순차적으로 꺼내서
li라는 태그로 만들어주는 것을 반복문이 할수있다
코딩 순서
1 각각의 데이터를 배열에 원소(element)로 넣어준다
2 coworkers라고 하는 변수가 가리키는 이 배열에 담겨있는 데이터를 하나하나 꺼내서 li태그를 만들면 된다
-> script 태그로 바꾼뒤 document.write를 통해서 li태그를 만들어내면된다
3 네번에 걸쳐 li태그를 써야하는데 그럼 일단 4번 실행시키도록 해보자
-> while문을 쓴뒤 4번 실행시키기 위해서 카운트값을 적어두면 된다
-> var i = 0; / i = i + 1; (i의 값이 0부터 실행될 때마다 값이 1씩 증가한다)
4 마지막으로 while (i < 4) i가 4보다 작은 동안은 반복한다라고 적어주면 된다
var i = 0;
while (i < 4) {
document.write('<li></li>');
i = i + 1;
}
이때 점이 4개 나타난 것을 보면 의도에 따라 잘 동작했다는 뜻이다
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing','leezche','duru','taeho'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while (i < 4) {
document.write('<li></li>');
i = i + 1;
}
</script>
</ul>
</body>5 이제 coworkers 라고 하는 변수 안에 있는 배열에서
반복문이 실행될 때마다 하나하나의 원소값을 가져와서 위치시키면 된다
배열에서 데이터를 가져올 때는 대괄호를 하고 대괄호 안에 보고 싶은 데이터의
인덱스 값을 넣어주는데 i값이 인덱스와 일치하는 특성이 있다 +coworkers[i]+
<ul>
<script>
var i = 0;
while (i < 4) {
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script>
</ul>
그런데 이렇게 코드를 짜게 되면 멤버를 추가하거나
원소를 수정하게되면 제대로 표현되지 않는 문제가 생긴다
6 이때 while()괄호 안에 i의 값이 coworkers 배열에 담겨있는 원소의 숫자가
올수 있다면 직접 수를 입력하지 않고도 자동으로 로직이 변하게 할수있다
while (i < coworkers.length)
<script>
var coworkers = ['egoing','leezche','duru'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while (i < coworkers.length) {
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script>배열과 반복문을 결합했을 때 얻을 수 있는 폭발적 효과
js에는 신경쓸 필요가 없이 위의 데이터 자체에만 집중하면 되는
중요한 효과를 얻을 수 있다
혹시나 각각에 링크를 넣고싶다면 코드 한줄만 바꿔주면 된다
<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>
배열은 순서대로 연관된 데이터를 잘 정리 정돈 하는 것이고
반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서
자동화된 처리를 할 수 있는 문법이기 때문에 두개의 문법은 환상의 콤비같은 문법이다
다음시간에는 이 기능을 웹브라우저에서 활용할 수 있는지 살펴보자
