개발나라 스용공주

[생활코딩] JavaScript 왕기초 8장 - Visual Studio Code / 반복문(loop)과 배열(array) 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 8장 - Visual Studio Code / 반복문(loop)과 배열(array)

스용공주 2024. 8. 29. 15:53
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=BjkfkKdlvLo&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=22

 

 

[ 반복문과 배열 실습 개요 ]

아래 실행결과 사진은 아래 코드를 실행한 결과이다.

아래 실행결과 사진만 보면 과일 이름을 반복적으로 리스트(list) 태그의 형태로 작성하고 있는 것을 확인할 수 있다.

 

따라서 해당 실습을 만들기 위해서는 먼저 과일이름들은 배열(array)를 통해 서로 연관된 데이터를 배열로 묶어줘야한다.

그리고 해당 배열을 순차적으로 꺼내서 <li> 태그를 붙여주는 형식으로 반복문을 만들어 출력시켜주면 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <h1>Loop & Array</h1>
    <script>
        var fruit = ["Apple", "Banana", "Cherry"];
    </script>
    <ul>
        <script>
            var i = 0;
            while(i < fruit.length) {
                document.write('<li>' + fruit[i] + '</li>');
                i += 1;
            }
        </script>
    </ul>
</body>
</html>

 

 

 

[ 반복문과 배열 실습 상세 풀이 ]

먼저 배열을 만드는 방법은 아래와 같다.

<script>
        var fruit = ["Apple", "Banana", "Cherry"];
</script>

 

 

위와 같이 배열을 만들어주었다면 아래와 같이 반복문을 통해 배열의 요소들에 <li> 태그를 붙여 출력해줘야한다.

먼저 반복문을 반복시킬 횟수를 위에서 만든 배열 fruit의 길이만큼 반복시켜준다.

그리고 배열 fruit의 i번째 위치에 해당하는 요소에 <li> 태그를 붙여주는 부분을 작성해준다.

<script>
      var i = 0;
      while(i < fruit.length) {
          document.write('<li>' + fruit[i] + '</li>');
      }
</script>

 

만일 아래 코드와 같이 작성하지 않고 '<li> fruit[i] </li>'로 작성하게 된다면 실행결과가 아래 사진과 같이 나오게 된다.

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 10장 - Visual Studio Code / 함수의 활용 - 리팩토링에 함수 이용하기  (3) 2024.09.02
[생활코딩] JavaScript 왕기초 9장 - Visual Studio Code / 반복문(loop)과 배열(array) 실습 2 - 동일한 태그를 활용한 반복문  (0) 2024.08.29
[생활코딩] JavaScript 왕기초 7장 - Visual Studio Code / 리팩토링(refactoring) - 중복 제거  (0) 2024.08.26
[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습  (0) 2024.08.23
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
'WEB/JavaScript' Related Articles more
Comments