특정 변수에 순차적으로로 값이 저장되는 배열을 만든 후, 값을 불러오는 반복문을 적용할 수 있습니다.
예제로 확인하기 위해 기본 코드를 작성합니다. 배열과 반복문에 대한 내용이므로 title은 Loop and Array로 하겠습니다. <body> 태그 본문 영역에 태그를 작성합니다.
우선 배열을 만듭니다. var 키워드로 변수를 선언합니다.
<script> 태그로 자바스크립트의 변수 선언 키워드 var를 이용합니다. 배열 변수의 이름은 texts로 하겠습니다. 배열의 순차적으로 저장되는 값을 작성합니다. [ ] 대괄호 안에 값을 작성합니다. 인덱스를 0으로 갖는 첫 번째 값은 Minsu, 인덱스를 1로 갖는 두 번째 값은 Chulsu, 인덱스를 2로 갖는 세 번째 값은 Younghee, 인덱스를 3으로 갖는 네 번째 값은 Dongmin으로 하겠습니다. 세미콜론 ; 를 적어 마무리를 합니다.
배열에 있는 값을 불러와서 숫자가 없는 리스트를 만들겠습니다. html의 숫자가 없는 리스트를 만드는 ul 태그를 이용합니다. <ul> 태그 안에 자바스크립트 명령으로 배열의 값을 가져와 웹페이지에 쓰도록 하는 코드를 작성합니다. <script> 태그를 열고 반복 횟수를 기록하기 위한 특정 변수 i를 0으로 선업 합니다. while 반복문의 조건으로 변수 i가 texts 변수의 값의 수보다 작을 때 ture에 해당하며 반복을 지속하도록 설정합니다. 즉 i가 texts 변숫값의 개수보다 같거나 커질 때 false가 되며 반복이 종료됩니다. while( i < texts.length)와 같이 작성합니다. 값의 개수를 세는. length를 이용합니다. 중괄호 { 를 열고 값을 불러와 웹 페이지에 쓰는 자바스크립트 명령을 작성합니다.
document.write를 씁니다. <ul> 태그의 요소 형식을 맞추어 주기 위해 <li> </li> 태그를 쓰고, 그 사이에 값을 불러오도록 합니다. document.write('<li>'+texts [i]+'</li>')와 같이 쓰면 됩니다. 텍스트로 <li>를 작성하도록 '<li>'와 같이 씁니다. 텍스트와 값을 이어서 작성하도록 + 기호를 사용합니다. 변수 texts의 값을 가져오기 위해 대괄호 [ ]를 사용합니다. 가져올 값으로 숫자를 넣으면 그 숫자에 해당하는 자릿수, 즉 인덱스에 따라 값을 가져옵니다. 예를 들어 숫자 0을 대괄호 [ ]에 넣으면 인덱스 값이 0이자 첫 번째 자리에 있는 Minsu가 출력됩니다. while 반복문에서 i가 변수 texts 배열에 있는 값의 개수보다 적은 것이 true일 때 반복을 지속하도록 설정했었습니다. i = i +1을 반복문 끝에 작성해서 반복이 실행될 때마다 변수 i의 값이 1만큼 더 커지도록 합니다. </script>를 닫으면 while 반복문이 완성됩니다.
<! DOCTYPE>
<html>
<head>
<title> Loop and Array </title>
<meta charset="utf-8">
</head>
<body>
<script>
var texts = ['Minsu', 'Chulsu', 'Younghee', 'Dongmim'];
</script>
<ul>
<script>
var i =0;
while(i <texts.length){
document.write('<li>'+texts [i]+'</li>');
i = i+1;
}
</script>
</ul>
</body>
</html>
코드를 실행하면 최초 1회 실행 시 변수 i는 0으로 texts 배열 값의 개수 4보다 작아 true에 해당됩니다.
while의 ( )의 조건이 ture일 때 ( ) 이하 document.write('<li>'+texts [i]+'</li>')이 실행됩니다. 텍스트 <li>를 쓰고 i가 0인 Minsu를 불러온 후 텍스트 </li>를 씁니다. i = i+1을 반복문에 설정해 놓았기 때문에, 이번 실행으로 0이었던 i의 값은 1이 더해져 1이 됩니다. 다시 이 프로세스를 반복해도 되는지 확인하기 위해 while 반복문의 처음으로 돌아가 조건을 확인합니다. 최초 실행 후 0에서 1이 더해져 1이 된 i의 값은 여전히 texts 배열에 들어 있는 값의 개수 4개보다 작기 때문에 반복이 실행됩니다.
반복이 거듭되어 인덱스 3을 갖는 네 번째 자리의 값 Dongmin을 불러오면 i는 인덱스 3에 1이 더해져 4가 됩니다. 반복을 더 해야 하는지 확인하기 위해 while 반복문의 처음 부분으로 돌아가 조건이 true인지 확인합니다. 4가 된 i는 texts 배열 값의 개수 4보다 작지 않고 동일합니다. 즉 조건이 false가 되어 더 이상 반복이 되지 않고 while 반복문은 종료됩니다.
'코딩' 카테고리의 다른 글
| 자바스크립트 함수 Function, 매개변수 Parameter, 인자 Argument, 반환 Return (0) | 2020.09.11 |
|---|---|
| while 반복문 사용해서 본문 글자색 (0) | 2020.09.10 |
| 자바스크립트 JavaScript 반복문을 위한 while , var 변수 i = 0 선언 (0) | 2020.09.09 |
| 자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 (0) | 2020.09.08 |
| 리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 (0) | 2020.09.06 |
댓글