[JavaScript] 이가 없으면 잇몸으로 | split 구분자를 이용해서 배열을 생성하고 출력하기

 

 

나의 로직

1) , 기준으로 잘라서 => 구분자 활용

2) 하나하나 출력한다 => 배열에 담아 반복문으로 출력

 

 

로직은 맞는 것 같은데, 구분자 활용법을 못 찾겠어서 배열 객체를 생성해서 그 값들을 출력하는 방식으로 기술했다.

조금 쫌생이(?) 같은 ( 그러니까 정석적인 방법..ㅎ )이 아닌 것 같은데, 뭐 어때 이가 없으면 잇몸으로 가는 것이다.

 

 

전체 코드

    <h3>문제2. 다음 보기에 있는 문자열을 ,(콤마) 기준으로 잘라내어 하나하나 출력하시오 </h3>
    <fieldset>
        <legend>보기</legend>
        <div>콜라, 사이다, 햄버거, 피자, 한약</div>
    </fieldset>

    <div id="area2" class="area"></div>
    <button onclick="test2();">확인하기</button>

    <script>
        function test2(){

            
            var str2 = ["콜라", "사이다", "햄버거", "피자", "한약"];
            var area2 = document.getElementById("area2");

            for(var i=0; i<str2.length; i++){
                area2.innerHTML += (i+1) + "." + str2[i] +"<br>";
            }

        }
    </script>

 

결과

는 다음과 같이 잘 출력 되었다.

 

 

 

---

 

그럼 이제 모범답안을 알아보자,

 

 

모범답안

   <h3>문제2. 다음 보기에 있는 문자열을 ,(콤마) 기준으로 잘라내어 하나하나 출력하시오 </h3>
    <fieldset>
        <legend>보기</legend>
        <div id="food">콜라, 사이다, 햄버거, 피자, 한약</div>
    </fieldset>

    <div id="area2" class="area"></div>
    <button onclick="test2();">확인하기</button>

    <script>
        function test2(){

            var food = document.getElementById("food");
            var area2 = document.getElementById("area2");
            var arr = food.innerHTML.split(",");

            for(var i=0; i<arr.length; i++){
                area2.innerHTML += (i+1) + "." + arr[i] +"<br>";
            }

        }
    </script>

 

만드는 법 

1) div 요소 객체의 고유한 id 값을  "food"로 지정한다.

2) 결과값을 뿌려줄 div 요소 객체의 id 값을 "area2"로 지정한다.

3) 버튼 클릭시, 이벤트로 test2() 함수를 호출한다.

4) food라는 변수 안에 아이디가 food인 div 요소 객체를 대입한다.

5) area2라는 변수에 아이디가 area2인 div 요소 객체를 대입한다.

6) arr이라는 변수에 food의 innerHTML에 접근해서 split (구분자)로 ,를 제시한다.

7) arr의 길이만큼 ( == 구분자로 구분되어진 갯수, 여기서는 5개) 반복문이 실행되는데, 이때 area2의 innerHTML에 접근해서 

결과값을 켜켜히 쌓을 것 (+=)이다.

7.2) 이때 넘버링을 위해 i 번째 인덱스의 +1을 더해서, 결과값 앞에 1. 2. 3. .. 등 번호가 부여되게끔 출력한다.