자바스크립트로 빈도 top10 문자 카운터 만들기

메인화면

결과화면

• 영문과 숫자가 입력 가능한 입력칸을 만든다.
• 확인해보기를 누르면 결과 화면으로 이어진다.
• 결과화면에는 1위 ~ 10위 까지의 영문 소문자/대문자, 숫자와 개수가 표시된다.
• 표시형식은 테이블 형태로 한다.

---

1단계 : HTML 형식으로 표현

• 메인화면의 틀을 html을 이용해서 잡아준다.

<form>
    <label for="alpha">문자 카운터(Top10)</label><br>
    <textarea id="alpha" placeholder="영어와 숫자만 입력가능합니다." rows="4" cols="50" onKeyup="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g,'');"></textarea><br>
    <input type="submit" value="확인해보기" onclick="countFrequency()" />
</form>

• 사용한 태그
  • <form>
    • <input> 태그에 작성한 type="submit" 속성을 이용하기 위해 <form> 태그를 작성하였다.
  • <label>
    • <textarea> 태그에 작성한 id="alpha" 입력칸을 "문자 카운터(Top10)" 이라는 문구와 연결하기 위해 <label> 태그를 작성하였다.
  • <textarea>
    • 입력을 문자열로 길게 받을 수 있도록 하기 위해 <input type="text"> 대신 <textarea>를 사용하였다.
  • <input>
    • <form>에 입력한 값들과 onclick="countFrequency()"를 연결하기 위해 <input> 태그를 사용하였다.

---

• 문자카운터(Top10)
  • <textarea> 태그의 onKeyup속성에 정규표현식을 이용하여 영문과 숫자만 입력받도록 하였다.
  • 이를 placeholder 속성을 이용하여 "영어와 숫자만 입력가능합니다" 라고 표시되도록 하였다.
  • "확인해보기"를 클릭하면 자바스크립트 함수 countFrequency()로 연결되도록 하였다.

---

2단계 : 자바스크립트로 countFrequency() 함수 구현

• <input> 태그의 onclick="countFrequency()" 속성을 적용하여 "확인해보기" 클릭 시 호출된다.

function countFrequency() {
    var alpha = document.getElementById("alpha").value;
    var splitedAlpha = alpha.split('');
    var alphaObj = {};
    var alphaCount = [];
    
    // a ~ z 문자 카운트
    for (i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
        var number_lowerCase = 0;
        
        for (j = 0; j < splitedAlpha.length; j++) {
            if (splitedAlpha[j] == String.fromCharCode(i)) {
                number_lowerCase++;
            }
        }
        alphaObj = {name: String.fromCharCode(i), number: number_lowerCase};
        alphaCount.push([alphaObj.name, alphaObj.number]);
        alphaCount.sort(function(a,b) {
        	return b[1] - a[1];
        });
    }
    
    // A ~ Z 문자 카운트
    for (i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
        var number_upperCase = 0;
        
        for (j = 0; j < splitedAlpha.length; j++) {
            if (splitedAlpha[j] == String.fromCharCode(i)) {
                number_upperCase++;
            }
        }
        alphaObj = {name: String.fromCharCode(i), number: number_upperCase};
        alphaCount.push([alphaObj.name, alphaObj.number]);
        alphaCount.sort(function(a,b) {
        	return b[1] - a[1];
        });
    }
    
    // 0 ~ 9 문자 카운트
    for (i = '0'.charCodeAt(0); i <= '9'.charCodeAt(0); i++) {
        var number_number = 0;
        
        for (j = 0; j < splitedAlpha.length; j++) {
            if (splitedAlpha[j] == String.fromCharCode(i)) {
                number_number++;
            }
        }
        alphaObj = {name: String.fromCharCode(i), number: number_number};
        alphaCount.push([alphaObj.name, alphaObj.number]);
        alphaCount.sort(function(a,b) {
        	return b[1] - a[1];
        });
    }
    
    // 출력하기
    document.write('<table border="1">');
    for (i = 0; i < 10; i++) {
        document.write('<tr><td>' + (i+1) + '위 </td><td>' + alphaCount[i].join('</td><td>') + '개 </td></tr>');
    }
    document.write('</table>');
}

728x90

• 사용한 변수
  • alpha : <textarea> 태그에서 id="alpha"로 받은 값을 document.getElementById("alpha").value 를 이용하여 alpha 변수에 담았다.
  • splitedAlpha : alpha 변수에 담은 값을 문자별로 나누어 splitedAlpha 변수에 담았다.
  • alphaObj : 문자와 개수를 각각 name, number로 담기 위해 alphaObj 객체를 생성하였다.
  • alphaCount : 객체의 값들을 배열로 담은 후 하나씩 빼내기 위해 alphaCount 배열을 선언하였다.
  • number_lowerCase : a ~ z 까지의 문자 개수를 표현하는 변수이다.
  • number_upperCase : A ~ Z 까지의 문자 개수를 표현하는 변수이다.
  • number_number : 0 ~ 9 까지의 문자 개수를 표현하는 변수이다.

---

• a ~ z 문자 카운트
  • 문자 a 부터 z 까지 반복문으로 돌면서 splitedAlpha 변수에 담긴 값과 같은 값이 있으면 number_lowerCase를 1씩 증가시켰다.
  • 문자를 name으로, 개수를 number로 하여 alphaObj 객체를 만들었다.
  • alphaCount 배열에 alphaObj의 name, number를 배열 형태로 넣어주고 sort() 를 이용하여 내림차순으로 정렬하였다. 
    • 배열 속의 배열 형태(이중 배열)로 만들어 alphaCount의 인덱스로 검색을 하였을 때 name, number가 한 세트로 확인될 수 있도록 만들었다.
    • 빈도수에 따른 Top10 이기 때문에 내림차순으로 표현하였다.
• A ~ Z, 0 ~ 9  문자 카운트
  • a ~ z 문자 카운트와 동일한 방식으로 진행하였다.
• 출력하기
  • 테이블 형태의 출력을 위해 <table border="1">을 선언하였다.
  • 1위 ~ 10위까지의 표현을 위해 10번의 반복을 하도록 반복문을 선언하였다.
  • 첫번째 <td></td> 값으로 ~위 를 표현하기 위해 0부터 시작하는 i값을 이용하여 (i+1)위 를 담았다.
  • alphaCount 배열에 담긴 값들을 이용하기 위해 이를 문자열로 만들어주는 .join()을 이용하였다.
    • .join()
      • alphaCount = [ [a, 1], [b, 3]] 이라고 선언되어 있을 경우 alphaCount[1].join('</td><td>') 라는 코드를 적용하면 b</td><td>3 이라는 문자열로 변환된다.
  • 개수까지 표시된 상태의 문자열에 '개 </td></tr>'을 더해서 한 번의 반복문이 돌 때 마다 <tr><td>1위 </td><td>a</td><td>1개 </td></tr> 형식으로 생성되게 만들었다.
  • 이를 마지막에 </table>을 선언함으로써 테이블을 마무리하였다.

---

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="alpha">문자 카운터(Top10)</label><br>
        <textarea id="alpha" placeholder="영어와 숫자만 입력가능합니다." rows="4" cols="50" onKeyup="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g,'');"></textarea><br>
        <input type="submit" value="확인해보기" onclick="countFrequency()" />
    </form>

    <script>
        function countFrequency() {
            var alpha = document.getElementById("alpha").value;
            var splitedAlpha = alpha.split('');
            var alphaObj = {};
            var alphaCount = [];
            
            // a ~ z 문자 카운트
            for (i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
                var number_lowerCase = 0;
                
                for (j = 0; j < splitedAlpha.length; j++) {
                    if (splitedAlpha[j] == String.fromCharCode(i)) {
                        number_lowerCase++;
                    }
                }
                alphaObj = {name: String.fromCharCode(i), number: number_lowerCase};
                alphaCount.push([alphaObj.name, alphaObj.number]);
                alphaCount.sort(function(a,b) {
                    return b[1] - a[1];
                });
            }
            
            // A ~ Z 문자 카운트
            for (i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
                var number_upperCase = 0;
                
                for (j = 0; j < splitedAlpha.length; j++) {
                    if (splitedAlpha[j] == String.fromCharCode(i)) {
                        number_upperCase++;
                    }
                }
                alphaObj = {name: String.fromCharCode(i), number: number_upperCase};
                alphaCount.push([alphaObj.name, alphaObj.number]);
                alphaCount.sort(function(a,b) {
                    return b[1] - a[1];
                });
            }
            
            // 0 ~ 9 문자 카운트
            for (i = '0'.charCodeAt(0); i <= '9'.charCodeAt(0); i++) {
                var number_number = 0;
                
                for (j = 0; j < splitedAlpha.length; j++) {
                    if (splitedAlpha[j] == String.fromCharCode(i)) {
                        number_number++;
                    }
                }
                alphaObj = {name: String.fromCharCode(i), number: number_number};
                alphaCount.push([alphaObj.name, alphaObj.number]);
                alphaCount.sort(function(a,b) {
                    return b[1] - a[1];
                });
            }
            
            // 출력하기
            document.write('<table border="1">');
            for (i = 0; i < 10; i++) {
                console.log(alphaCount);
                document.write('<tr><td>' + (i+1) + '위 </td><td>' + alphaCount[i].join('</td><td>') + '개 </td></tr>');
            }
            document.write('</table>');
        }
    </script>
</body>
</html>