[WEB2 JavaScript] 22. 배열과 반복문

[WEB2 JavaScript] 22. 배열과 반복문 | 초코더

cloud_nice 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>