본문 바로가기
매일코딩/일상에서 코딩

1-2 자바스크립트로 우편번호 문제를 해결해보자

by 인생여희 2017. 3. 28.
반응형

우편번호 정렬 문제를 해결해보자.

알고리즘을 그려야 하지만 간단한 문제일 것 같아서 글로만 순서를 작성해 봤다.

버튼1

#우편번호 전체 개수 출력

1.텍스트 칸에 5자리 우편번호를 입력 받는다.

1-1. 앞뒤 공백 자르기를 통해서 입력된 우편번호를 3자리로 만들고 문자열 합치기로 전체 값을 하나로 합친다.

2.우편번호 총개수를 파악한다.

3.배열에 집어 넣는다.


버튼2

#우편번호 중복제거 버튼구현

4. 우편번호 중복값을 제거 한다.

5. 버튼을 누르면 중복 제거된 우편번호의 개수를 출력한다.


(우편번호 중복제거를 하지 않고)버튼3

# 우편번호별 개수를 파악해서 테이블에 출력

와...대박 1-2시간안에 끝날 줄 알았는데... 총 5시간 정도 걸린것 같다. 아오......



위의 그림에서 우편번호부분을 드래그해서 메모장에 옮긴다음 복사!



그리고 위의 텍스트 창에 붙여 넣는다. 그럼 저렇게 12345 처럼 다섯 자리 우편번호 전체가 입력된다.

그리고 <입력 버튼>과 <중복제거 버튼> <우편번호별 개수보기 버튼>을 차례로 누르면



이런식으로 우편번호별 정렬이되고 값이 쭉 출력이 된다!!!!

그대로 긁어서 메모장에 옮긴 다음 엑셀에 가져다 붙이면 끝!!ㅋㅋㅋㅋ


아래는 소스코드


<html>

<head>

<title>우편번호 정리</title>

</head>

<body>  

<h1>우편번호 자동정리</h1>



우편번호<input type="text" name="tex" id="tex">

<input type="button" name="btn" id="btn" value="입력" onclick="btn_click();"></br>

우편번호 총개수는 <input type="text" name="tex1" id="tex1" value="0">개 입니다.

</br>


중복제거 <input type="text" name="tex2" id="tex2" value="0">

  <input type="button" name="btn2" id="btn2" value="중복제거" onclick="btn_click2();"></br>

</br>

<input type="button" name="btn3" id="btn3" value="우편번호별개수보기" onclick="btn_click3();">

<span><<<<<========</span>

<br>


<div><h3>정리할 우편번호를 입력한 뒤 우편번호별 개수보기 버튼을 클릭하세요</h3></div>

<div id="test"></div>


</body>


<script type="text/javascript">


//입력한 우편번호를 담을 배열 객체 선언

var postArr = new Array();


//중복제거 버튼 클릭했을때 5자리 우편번호를 3자리로 만든값을 담을 배열 객체 선언

var afterDelPostArr = new Array();


var str;



/*

################참고###############################

아래 arr.filter..를 거쳤을 때 결과값은 아래와 같다.

elem=016index=0self=016,017,018,022,

027,030,031,033,039,040,040,045,045,

045,045,047,047,048,049,049,049,049,049,

050,050,051,051,051,051,051,051,051,051,

052,053,053,053,053,058,061,061,061,062,065,

065,067,067,072,072,073,082,085,087,087,102,104,

104,108,114,117,120,124,129,132,138,139,146,150,152,

158,162,171,177,179,181,210,214,216,219,223,223,242,244,251,257,261,263,264,273,273,

286,314,317,319,340,378,427,470,478,489,490,490,513,540,545,546,550,557,589,612,619,636

*/



//2.단계 우편번호 중복제거 버튼 클릭

function texDupArr(arr) {


//우편번호 중복값을 제거한 후 결과값을 담을 배열 선언

var deldupPostArray = new Array();


var unique = arr.filter(function(elem, index, self) {

// 0 == 숫자전체.indexOf(016)

if(index == self.indexOf(elem)){

deldupPostArray.push(elem);

};

  });

return deldupPostArray;

}

  

  


// 1단계 우편번호 입력 눌렀을 때  

function btn_click(){


//입력받은 우편번호 가져오기

var postText = document.getElementById("tex");

//입력받은 우편번호를 문자열로 저장

str=postText.value;


//우편번호 사이 공백 제거

var delSpacePostText=str.replace( /(\s*)/g, "");



//5자리 수로 나누어서 우편번호 총 개수 파악후 출력

var PostResult = document.getElementById("tex1");

PostResult.value = delSpacePostText.length/5;



//우편번호 전체를 5자리로 잘라서 배열에 추가

var num=0;

var numPlus=5;

for(var a=0;a<delSpacePostText.length;a+=5){

var result=delSpacePostText.substring(a,numPlus);

numPlus+=5; 

//5자리 우편번호를 뒤 2자리 제거후 배열에 추가한다.

postArr.push(result.substring(0, 3));

num++;

}


//@결과 postArr 배열 에는 전체 입력받은 우편번호가 앞 3자리수로 잘려 들어가있다.

};





//중복제거 버튼

function btn_click2(){


//우편번호를 3자리로 만든 값 저장할 변수

var afterDelPostVal;

//입력 받은 5자리 우편번호 뒤에 2자리 제거 후 배열에 추가

for(var a=0;a<postArr.length;a++){

afterDelPostVal=postArr[a].substring(0, 3);

//결과 값을 배열에 순차적으로 추가

afterDelPostArr.push(afterDelPostVal);


};


//중복제거 함수에 중복을 제거할 배열 삽입

var texDupArrResult= texDupArr(afterDelPostArr);

//결과 값을 나타낼 요소값을 가져온 후 출력

var texDupArrResultText = document.getElementById("tex2");

texDupArrResultText.value=texDupArrResult.length;


};




//(중복을 제거 하지 않고) 우편번호 별로 개수 출력

function btn_click3(){

//우편번호 중복값을 제거하기 전의 값을 넣을 배열 객체 선언

var beforeDelPostArr = new Array();

for (var j=0; j<postArr.length; j++) {


//postArr는 우편번호 중복값 이 들어 있는 배열

var key = postArr[j].toString(); 

  

// 배열안 특정 위치에 숫자가 존재하지 않으면

if (!beforeDelPostArr[key]) {

  

//그곳에 1을 준다.

beforeDelPostArr[key] = 1

  

} else { //배열 특정위치에 숫자가 존재 하면 

//그 배열 특정위치 값에 +1을 한다.

beforeDelPostArr[key] = beforeDelPostArr[key] + 1;

}

}

//결과 값을 테이블로 만들어서 출력할 것.

var str = "<table style='border:1px gray solid;'>"; 


for (var j in beforeDelPostArr) {


str +="<tr><td style='border:1px gray solid;'>"+j+

"</td><td style='border:1px gray solid;'>"+beforeDelPostArr[j]+

"</td></tr>";

}

str+= "</table>";


//위에서 만든 테이블을 특정 <div> 위치에 붙인다.

var divTest = document.getElementById("test");

divTest.innerHTML = str;


}


</script> 


</html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<html>
    <head>
        <title>우편번호 정리</title>
    </head>
<body>  
        <h1>우편번호 자동정리</h1>
 
 
        우편번호<input type="text" name="tex" id="tex">
                <input type="button" name="btn" id="btn" value="입력" onclick="btn_click();"></br>
    
            
        우편번호 총개수는 <input type="text" name="tex1" id="tex1" value="0">개 입니다.
            
            </br>
 
        중복제거 <input type="text" name="tex2" id="tex2" value="0">
                       <input type="button" name="btn2" id="btn2" value="중복제거" onclick="btn_click2();"></br>
            </br>        
                        <input type="button" name="btn3" id="btn3" value="우편번호별개수보기" onclick="btn_click3();">
<span><<<<<========</span>
            <br>
 
            <div><h3>정리할 우편번호를 입력한 뒤 우편번호별 개수보기 버튼을 클릭하세요</h3></div>
            <div id="test"></div>
 
</body>
 
<script type="text/javascript">
 
//입력한 우편번호를 담을 배열 객체 선언
var postArr = new Array();
 
//중복제거 버튼 클릭했을때 5자리 우편번호를 3자리로 만든값을 담을 배열 객체 선언
var afterDelPostArr = new Array();
 
var str;
 
 
/*
################참고###############################
아래 arr.filter..를 거쳤을 때 결과값은 아래와 같다.
elem=016index=0self=016,017,018,022,
027,030,031,033,039,040,040,045,045,
045,045,047,047,048,049,049,049,049,049,
050,050,051,051,051,051,051,051,051,051,
052,053,053,053,053,058,061,061,061,062,065,
065,067,067,072,072,073,082,085,087,087,102,104,
104,108,114,117,120,124,129,132,138,139,146,150,152,
158,162,171,177,179,181,210,214,216,219,223,223,242,244,251,257,261,263,264,273,273,
286,314,317,319,340,378,427,470,478,489,490,490,513,540,545,546,550,557,589,612,619,636
*/
 
 
//2.단계 우편번호 중복제거 버튼 클릭
function texDupArr(arr) {
 
//우편번호 중복값을 제거한 후 결과값을 담을 배열 선언
var deldupPostArray = new Array();
 
    var unique = arr.filter(function(elem, index, self) {
            // 0 == 숫자전체.indexOf(016)
        if(index == self.indexOf(elem)){
    
            deldupPostArray.push(elem);
        };
     });
                return deldupPostArray;    
}
  
  
 
// 1단계 우편번호 입력 눌렀을 때  
function btn_click(){
 
    //입력받은 우편번호 가져오기
    var postText = document.getElementById("tex");
        
        //입력받은 우편번호를 문자열로 저장
        str=postText.value;
 
        //우편번호 사이 공백 제거
        var delSpacePostText=str.replace( /(\s*)/g, "");
 
 
        //5자리 수로 나누어서 우편번호 총 개수 파악후 출력
        var PostResult = document.getElementById("tex1");
        PostResult.value = delSpacePostText.length/5;
 
 
        //우편번호 전체를 5자리로 잘라서 배열에 추가
        var num=0;
        var numPlus=5;
        
        for(var a=0;a<delSpacePostText.length;a+=5){
            var result=delSpacePostText.substring(a,numPlus);
            
            numPlus+=5
            
            //5자리 우편번호를 뒤 2자리 제거후 배열에 추가한다.
            postArr.push(result.substring(03));
            
            num++;
        }
 
//@결과 postArr 배열 에는 전체 입력받은 우편번호가 앞 3자리수로 잘려 들어가있다.
};
 
 
 
 
//중복제거 버튼
function btn_click2(){
 
//우편번호를 3자리로 만든 값 저장할 변수
var afterDelPostVal;
        
        //입력 받은 5자리 우편번호 뒤에 2자리 제거 후 배열에 추가
        for(var a=0;a<postArr.length;a++){
            
            afterDelPostVal=postArr[a].substring(03);
            
            //결과 값을 배열에 순차적으로 추가
            afterDelPostArr.push(afterDelPostVal);
 
};
 
        //중복제거 함수에 중복을 제거할 배열 삽입
        var texDupArrResult= texDupArr(afterDelPostArr);
        
        //결과 값을 나타낼 요소값을 가져온 후 출력
        var texDupArrResultText = document.getElementById("tex2");
        texDupArrResultText.value=texDupArrResult.length;
 
};
 
 
 
//(중복을 제거 하지 않고) 우편번호 별로 개수 출력
function btn_click3(){
    
        //우편번호 중복값을 제거하기 전의 값을 넣을 배열 객체 선언
        var beforeDelPostArr = new Array();
        
            for (var j=0; j<postArr.length; j++) {
 
            //postArr는 우편번호 중복값 이 들어 있는 배열
            var key = postArr[j].toString(); 
  
            // 배열안 특정 위치에 숫자가 존재하지 않으면
            if (!beforeDelPostArr[key]) {
  
            //그곳에 1을 준다.
            beforeDelPostArr[key] = 1
  
            } else { //배열 특정위치에 숫자가 존재 하면 
            
                //그 배열 특정위치 값에 +1을 한다.
                beforeDelPostArr[key] = beforeDelPostArr[key] + 1;
            }
        }
        
    //결과 값을 테이블로 만들어서 출력할 것.
    var str = "<table style='border:1px gray solid;'>"
 
        for (var j in beforeDelPostArr) {
 
            str +="<tr><td style='border:1px gray solid;'>"+j+
            "</td><td style='border:1px gray solid;'>"+beforeDelPostArr[j]+
            "</td></tr>";
        }
            str+= "</table>";
 
                //위에서 만든 테이블을 특정 <div> 위치에 붙인다.
                var divTest = document.getElementById("test");
                divTest.innerHTML = str;
 
}
 
</script> 
 
</html>
cs


내림차순은 따로 처리를 해줘야 한다.

예외처리나 디자인 이런건다 안했음ㅋㅋ 나중에 시간날때 한번 작업해보기로 하고

이거 하면서 느낀건 차라리 액셀을 배우는게 더 시간적으로 빨랐을 듯ㅋㅋ

에효


반응형

댓글