배열
반복문
반복문은 while을 이용해주는 것!
<script>
document.write('<li>1</li>');
var i = 0;
while(i<3){
document.write('<li>2</li>');
document.wirte('<li>3</li>');
i = i+1;
}
document.write('<li>4</li>');
</script>
i=0 이라는 변수를 먼저 지정해주는 것이다.
i<3일때마다
document.write('<li>2</li>');
document.wirte('<li>3</li>');
해당 코드를 반복해서 실행하는데, 그때마다 i에 i+1을 해준다.
그래서 i가 4가 되었을 때에는, 마지막 줄 코드인 document.write('<li>4</li>');를 실행하게 된다.
배열과 반복문
다시, 나도 이렇게 body태그 안에 적어보았다.
<script>
var coworkers = ['san', 'scuba', 'seol', 'june', 'zoze'];
</script>
<h2> Co-Workers </h2>
<ol>
<script>
var i = 0;
while(i<5){
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script>
</ol>
그런데 이 코드에는, 멤버를 추가할 때마다 while문의 숫자를 계속 변경해줘야 하는 번거로움이 있다. 그것을 극복하기 위해, 코드를 업그레이드 해주자면 다음과 같다.
<script>
var coworkers = ['san', 'scuba', 'seol', 'june', 'zoze'];
</script>
<h2> Co-Workers </h2>
<ol>
<script>
var i = 0;
while(i<cowerkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script>
</ol>
이렇게 적어준다.
while(i<cowerkers.length)
이 부분에 주목해야한다. 변수로 설정한 var coworkers의 배열 갯수에 따라 반복해주는 것이다. 따라서, 우리가 일일이 하단 자바스크립트를 신경쓸 필요 없이, 상단의 배열에 추가하거나 뺄 것에만 집중하면 알아서 목록을 출력해주는 것이다.
'💻 Deep Wide Programming > Javascript & Vanila JS' 카테고리의 다른 글
[노마드코더] 바닐라 JS 1~ 1-10 (0) | 2020.08.17 |
---|---|
[생활코딩] Javascript 객체(object) 쓰기와 읽기 (0) | 2020.08.17 |
[생활코딩] 배열과 반복문의 활용 / 함수의 기본, 매개변수와 인자, 출력 (0) | 2020.08.16 |
WEB2- Javascript 7강(변수와 대입 연산자) (0) | 2020.07.29 |
[생활코딩] WEB2- Javascript 1강, 2강, 3강, 4강, 5강, 6강(script, event, console, Datatype_string 문자열과 숫자) (0) | 2020.07.29 |