-
생활코딩 WEB JavaScript 배열과 반복문프로그래밍 연습 2020. 11. 4. 13:37
생활코딩 WEB JavaScript 배열과 반복문
배열
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Array</h1> <h2>Syntax</h2> <script> var coworkers = ["egoing", "leezche"]; // 값과 값 사이는 콤마로 구분 코워커라는 변수에 배열이라는 새로운 데이터 타입이 담긴 것 // 변수를 쓴다는 것은 데이터 타입에 코워커스라는 이름을 붙인 것이라고 얘기할 수 있음 // 수납장에 물건 두개 넣은 거랑 똑같은 것 </script> <!--수납장에 넣은 물건을 꺼내는 방법--> <h2>get</h2> <script> // 첫 번째 데이터 즉 첫 번째 자리는 0 두 번째 데이터 1 index라고 부름. index 0, index 1 document.write(coworkers[0]); document.write(coworkers[1]); </script> <!--데이터 추가--> <h2>add</h2> <script> coworkers.push('duru'); coworkers.push('taeho'); </script> <!-- 데이터 개수 length 개념 정리 --> <h2>count</h2> <script> document.write(coworkers.length); </script> </body> </html>반복문
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Loop</h1> <ul> <script> document.write('<li>1</li>'); var i=0; while(i<3){ //true인 동안은 false가 될 때까지 중괄호 안이 반복적으로 실행됨 document.write('<li>2</li>'); document.write('<li>3</li>'); i=i+1 } document.write('<li>4</li>'); </script> </ul> </body> </html>출력된 결과 화면이다.
반복되는 코드를 줄여주는 역할로, for와 while이 있다.
while (true)인 경우엔 중괄호 안에서 반복적으로 실행되고
while(false)인 경우엔 반복문 밖을 벗어난다.
var 변수 i값이 0일 때
while(i<3){
<li>2<li>
<li>3<li>
i=i+1
}
var 변수에 있는 i값이 1씩 증가해서
3보다 커지면 거짓이 되어버리기 때문에
반복문 밖으로 나오게 된다.
배열과 반복문
배열은 순선대로 연관되어 있는 데이터를 잘 정리하는 것으로
순서는 0번부터 시작된다.
그러므로 var coworkers 에 있는 변수는 인덱스는 4개이다.
coworkers를 4번 실행시키기 위해 반복문을 실행한다.
<body> <h1>Loop & array</h1> <script> var coworkers=['사랑해요','감사해요','고마워요','축복해요'] //0번째 1번째 3번째 4번째 <인덱스 순서 //배열은 순서대로 연관되어 있는 데이터를 잘 정리하는 것 </script> <h2>co workers</h2> <ul> <script> var i=0; while(i<4){ document.write('<li></li>'); i=i+1; } //undefined 원소값을 찾을 수 없다. </script> </ul> </body> </html>coworkers 배열의 데이터의 인덱스값을 불러오기 위해서는
불러오고자 하는 데이터값의 순서를 입력하면 된다.
i가 데이터 인덱스값과 일치하다는 특성을 이용하여
아래처럼 수정한다.
while (i<4){
document.write('<li>'+coworkers[i]+'</li>');
}
<body> <h1>Loop & array</h1> <script> var coworkers=['사랑해요','감사해요','고마워요','축복해요'] //0번째 1번째 3번째 4번째 <인덱스 순서 //배열은 순서대로 연관되어 있는 데이터를 잘 정리하는 것 </script> <h2>co workers</h2> <ul> <script> var i=0; while(i<4){ document.write('<li>'+coworkers[i]+'</li>'); i=i+1; } //undefined 원소값을 찾을 수 없다. </script> </ul> </body> </html>
만약에 배열에 인덱스 값을 하나 더 추가해도 출력화면에는 적용되지 않느다.
그렇기 때문에 while문의 조건도 같이 변경해줘야 한다.
var coworkers=['사랑해요','감사해요','고마워요','축복해요','용서해요']
배열이 5개이므로 반복문의 값도 바꿔준다.
while (i<5){
}
인덱스 값이 4개로 줄어든 상태에서
while (i<5){
}
가 유지되면 'undefined'가 출력된다.
데이터가 바뀔 때마다 로직을 수정하는 번거로움을 없애기 위해서는
coworkers에 담긴 원소를 반복문에 옮겨준다.
while (i<coworkers.length){ }로 바꿔준다.
배열이 추가되고 제거될 때마다 자동으로 변경이 되어 출력된다.
링크를 추가할 때도 일일히 입력할 필요가 없다.
document.write('
<li><a href="http://a.com/'+coworkers[i]+'">
'+coworkers[i]+'</a></li>');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Loop & array</h1> <script> var coworkers=['사랑해요','감사해요','고마워요','축복해요','용서해요']//0번째 1번째 3번째 4번째 <인덱스 순서 //배열은 순서대로 연관되어 있는 데이터를 잘 정리하는 것 </script> <h2>co workers</h2> <ul> <script> var i=0; while(i<coworkers.length){ document.write('<li><a href="https://www.naver.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>'); i=i+1; } //undefined 원소값을 찾을 수 없다. </script> </ul> </body> </html>'프로그래밍 연습' 카테고리의 다른 글
인프런 HTML&CSS강좌 CSS3 단위 - url() - display 속성 - visibility 속성 - opacity 속성 (0) 2020.11.12 인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자 (0) 2020.11.04 인프런 HTML CSS 문자 선택자 first-letter, first-line (0) 2020.11.02 생활코딩 JavaScript 비교연산자 데이터타입 조건문 if else (0) 2020.11.02 JavaScript 데이터 타입과 변수와 대입 연산자 (0) 2020.11.02