-
[WEB2 JavaScript] 22. 배열과 반복문 | 초코더JavaScript/생활코딩 2019. 11. 14. 19:14
오늘은 자바스크립트의 배열에 대해 알아볼게요~!
우선 배열이 필요한 이유에 대해 알아봅시다.
아래에는 과일을 html코드로 각각 직접 써주었습니다.
<html> <head> <meta charset="utf-8"> </head> <body> <h1>Loop & Array</h1> <h2>fruits</h2> <ul> <li>apple</li> <li>banana</li> <li>orange</li> <li>grape</li> </ul> </body> </html>자바스크립트의 배열을 쓰면 좀 더 편리하게 작성할 수 있습니다.
우선 각각의 과일들을 fruits배열에 담아두었습니다.
그리고 document.write를 이용해서 각각 list태그를 써주고 그안에 작성해 줄겁니다.
이때는 반복문이 필요합니다.
<html> <head> <meta charset="utf-8"> </head> <body> <h1>Loop & Array</h1> <script> var fruits = ["apple","banana","orange","grape"]; </script> <h2>fruits</h2> <ul> <script> document.write("<li></li>"); </script> </ul> </body> </html>4번을 반복해서 list태그를 작성해주는 코드를 짜보겠습니다.
count변수는 몇번 반복을 해줄 것인지 세는 변수입니다.
count변수를 선언해주고 총 4번 반복할 것이지만 배열은 0부터 시작하기 때문에 count < 4를 해주었습니다.
그리고 count를 1씩 증가시켜줍니다.
<html> <head> <meta charset="utf-8"> </head> <body> <h1>Loop & Array</h1> <script> var fruits = ["apple","banana","orange","grape"]; </script> <h2>fruits</h2> <ul> <script> var count = 0; while(count < 4){ document.write("<li></li>"); count += 1 } </script> </ul> </body> </html>그럼 이제 리스트 태그안에 각각의 과일들을 써보겠습니다.
아래의 코드를 추가시켜주면 배열의 count번째 값을 가져오게 됩니다.
예를 들어 fruits[0] = apple, fruits[1] = banana ...
document.write("<li>" + fruits[count] + "</li>");그런데 과일이 사라지거나 추가되면 count수와 맞지 않기 때문에 코드를 수정해줘야 합니다.
그럼 count는 어떤 걸 기준으로 반복문을 돌려줘야할까요?
바로 'fruits.length' 입니다. fruits.length는 fruits배열의 길이만큼 반복해주는 것입니다.
while(count < fruits.length){ document.write("<li>" + fruits[count] + "</li>"); count += 1 }배열과 반복문을 활용해서 a태그로 링크를 추가하는 최종코드를 짜볼게요.
작은따옴표 ' '와 큰따옴표 " "도 주의해주세요~
<html> <head> <meta charset="utf-8"> </head> <body> <h1>Loop & Array</h1> <script> var fruits = ["apple","banana","orange","grape"]; </script> <h2>fruits</h2> <ul> <script> var count = 0; while(count < fruits.length){ document.write('<li><a href="http://a.com/'+ fruits[count] +'">'+ fruits[count] +'</a></li>'); count += 1 } </script> </ul> </body> </html>
'JavaScript > 생활코딩' 카테고리의 다른 글
[WEB2 JavaScript] 25.함수, 26. 함수 : 매개변수와 인자, 27. 리턴 | 초코더 (0) 2019.11.15 [WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 18.리팩토링(refactoring) | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 14. 조건문 예고, 17.조건문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 12.제어할 태그 선택하기 | 초코더 (0) 2019.11.14