본문 바로가기
BOOKS/수월한 자바스크립트

개발 초보자를 위한 상위 Top10 구하기

by IT여행자 2023. 2. 24.
728x90

안녕하세요 IT여행자입니다.

 

이번 내용은 입문 과정을 끝낸 개발 초보자분들이 배운 과정을 어떻게 응용하여 프로그램을 만들어 볼까 고민될 때 한번 만들어 볼 수 있는 프로그램을 준비해 봤습니다.

 

프로그램은 단순히 HTML, CSS, JAVASCRIPT만을 사용하였습니다.

 

개발을 잘하고 싶다면 직접 많이 만들어 봐야 한다는 것은 잘 알고 계실 거라 생각됩니다. 그리 복잡한 내용은 없으므로 차근차근 따라 만들어 보시길 바랍니다. 그럼 시작하겠습니다.

 

실행 결과 화면

 

입력 숫자의 범위는 제한이 없지만 표시되는 영역이 작으므로 -999~999까지 입력합니다. 처음 10개까지는 입력 순서대로 위쪽 영역에 표시되었다가 10개가 넘으면 입력 수들 중 상위 10개까지만 표시될 것입니다.

 

준비 파일

 

아래와 같이 3개의 파일만 있으면 됩니다.

 

  • webapp/top10.html
  • webapp/js/top10.js
  • webapp/css/top10.css

 

HTML 파일 작성

 

1) 기본 HTML 파일을 생성한 뒤 LINK 태그와 SCRIPT 태그를 사용하여 외부 파일로 작성된 CSS파일과 JAVASCRIPT 파일을 가져옵니다.

 

<head>
<meta charset="UTF-8">
<title>Top10</title>
<link rel='stylesheet' href='css/top10.css'>
<script defer src='js/top10.js'></script>
</head>

2) 전체 골격을 지정하기 위해 main태그를 작성하고 그 아래 헤딩과 TOP10숫자를 표시할 입력상자를 만듭니다. 이때 입력 상자는 사용자가 값을 직접 입력할 수 없도록 readonly 속성을 주고 작성합니다.

 

<main>
	<h1>Top10</h1>
	<div>
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
	</div>
	...
</main>

 

3) 값을 입력할 수 있는 text 상자와 추가버튼, 다시하기 버튼을 추가합니다.

 

<main>
	<h1>Top10</h1>
    ...
	<hr/>
	<div class='zone'>
		<input type='text' class='append' />
		<button type='button' class='btnAppend'>추가</button>
		<button type='button' class='btnClear'>다시</button>
	</div>
	<div class='message'>
		-999~999까지의 수를 입력하세요.
	</div>
</main>

 

위와 같은 내용으로 만들어진 top10.html 파일의 내용은 아래와 같습니다.

 

<main>
	<h1>Top10</h1>
	<div>
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
		<input type='text' class='box' readonly="readonly"/> 
	</div>
	<hr/>
	<div class='zone'>
		<input type='text' class='append' />
		<button type='button' class='btnAppend'>추가</button>
		<button type='button' class='btnClear'>다시</button>
	</div>
	<div class='message'>
		-999~999까지의 수를 입력하세요.
	</div>
</main>

 

위와 같이 html 파일을 작성한 후 실행해 보면 아래와 같은 화면이 나타납니다. 물론 css가 없기 때문입니다. 

 

css 적용 전

 

그럼 css를 작성해 보도록 하겠습니다.

 

 

CSS 파일 작성

 

1) padding 속성에 의해 요소 전체 크기가 변경되는 것을 방지하기 위해 box-sizing 속성을 모든 태그에 적용합니다.

 

*{
	box-sizing: border-box;
}

 

2) main 태그에 속성을 주어 프로그램의 전체 레이아웃을 지정해 줍니다.

 

main{
	margin: 60px auto;
	width: 900px;
	padding:30px;
	border:4px solid #33f;
	border-radius:12px;
	box-shadow:3px 3px 5px #ccc;
	text-align: center;
	
}

아마도 이런 모양일 것입니다.

 

3) 입력상자들의 크기와 버튼의 크기를 지정합니다.

 

main .box, main .append{
	width:70px;
	height:70px;
	font-size:2.0em;
	text-align: center;
	vertical-align:top;
	
}

main .btnAppend, main .btnClear{
	width:140px;
	height:70px;
	font-size:2.0em;
	text-align: center;
}

4) 메시지 영역의 스타일을 지정합니다.

 

main .message{
	margin:10px 0;
	color : #f00;
}

 

css파일의 전체 내용은 아래와 같습니다.

 

@charset "UTF-8";
/* padding에 의해 크기가 바뀌는것 방지 */
*{
	box-sizing: border-box;
}

main{
	margin: 60px auto;
	width: 900px;
	padding:30px;
	border:4px solid #33f;
	border-radius:12px;
	box-shadow:3px 3px 5px #ccc;
	text-align: center;
	
}

main .box, main .append{
	width:70px;
	height:70px;
	font-size:2.0em;
	text-align: center;
	vertical-align:top;
	
}

main .btnAppend, main .btnClear{
	width:140px;
	height:70px;
	font-size:2.0em;
	text-align: center;
}
main .message{
	margin:10px 0;
	color : #f00;
}

 

css 적용 후

 

 

자바스크립트 파일 작성

 

html 파일에 동적인 요소를 집어넣기 위한 자바 스크립트 파일을 작성하겠습니다. 태그에 지정된 class 속성값으로 이벤트를 처리할 것입니다.

 

1) top10에 대한 입력 숫자의 개수와 이를 저 정하는 배열 변수를 지정합니다. 또한 class 속성으로 태그를 가져오는 사용자 정의 함수 get을 작성해 줍니다. 이 get 함수는 프로그램 전반에서 태그의 요소를 가져오는 코드를 아주 짧게 사용하기 위한 함수입니다.

 

let count=0; //top10에 저장된 갯수
let arry=[]; // top10 배열

function get(ele){
	return document.querySelector(ele);
}

2) 실행 화면 상단에 표시된 입력상자 10개를 class명으로 가져와 Node List에 담아 둡니다. 이 Node List에 arry배열 변수에 저장된 값을 오름차 정렬시켜 대입할 것입니다.

 

let boxs = document.querySelectorAll('.box')

 

3) 프로그램이 실행되면 숫자를 입력하는 곳으로 포커스가 이동되도록 조치합니다.

 

get('.append').focus();

4) 다시 시작 버튼이 클릭되었을 때 이벤트를 처리합니다. box에 들어 있던 모든 값을 지우고 count 변숫값도 0으로 설정합니다.

 

get('.btnClear').addEventListener('click', function(){
	for(box of boxs){
		box.value = '';
	}
	count=0;
})

5) 이 프로그램에서 가장 복잡한 부분입니다. 추가 버튼이 클릭되었을 때 처리 부분입니다.

 

get('.btnAppend').addEventListener('click', function(){
	// 입력값을 숫자로 가져옴.
	let v = Number(get('.append').value);
	
	// top10에 입력한 값이 10개 이하이면 그냥 추가
	if(count<10){
		boxs[count].value = v;
		count++;
	}else{
		arry.length=0;
		//top10 상자의 값을 모두 배열에 저장
		for(box of boxs){
			arry.push(box.value);
		}  
		
		//배열값을 숫자형식으로 정렬
		arry.sort(mysort);
		// 배열의 첫번째값보다 입력값이 크면 첫번째 배열값에 대입.
		if(v > arry[0]){
			arry[0] = v;
		}
		
		arry.sort(mysort);
		
		//배열값을 다시 top10 상자에 표시
		for(i=0 ; i<10 ; i++){
			boxs[i].value = arry[i];
		}
	}
})

6) 배열을 sort() 함수를 사용하여 정렬하게 되면 기본적으로 문자열 패턴으로 정렬되기 때문에 2보다 12가 더 작은 수로 정렬됩니다. 이런 현상을 해결하기 위해 입력 상자들의 값을 숫자로 바꾸어 비교 자체를 숫자로 비교할 수 있도록 만든 함수가 mysort입니다.

mysort 함수명을 sort 함수의 인자값으로 전달하면 정렬할 때 mysort 함수의 결괏값에 따라 정렬되므로 우리가 원하는 숫자형식의 오름차순이 될 것입니다.

 

//정렬을 숫자형태로 오름차 정렬
function mysort(x, y){
	x = Number(x);
	y = Number(y);
	if(x>y) return 1;
	else return -1;
}

 

7) 마지막으로 숫자를 입력하고 엔터키를 누르면 자동으로 추가 버튼을 실행시키고 입력된 내용을 모두 선택하도록 하여 다음 입력을 보다 쉽고 편리하게 만들어 주는 이벤트입니다. 

 

get('.append').addEventListener('keyup', function(ev){
	if(ev.keyCode == 13){
		get('.btnAppend').click();
		get('.append').select();
	}
})

 

위와 같은 자바스크립트의 전체 내용은 아래와 같습니다.

 

/**
 * top10
 */

let count=0; //top10에 저장된 갯수
let arry=[]; // top10 배열

function get(ele){
	return document.querySelector(ele);
}

// top10 입력상자들을 모두 가져옴.
let boxs = document.querySelectorAll('.box')

//커서를 입력할 숫자 텍스트 상자에 위치하게함.
get('.append').focus();

// top10 상자의 값을 모두 삭제하고 카운트변수를 초기화
get('.btnClear').addEventListener('click', function(){
	for(box of boxs){
		box.value = '';
	}
	count=0;
})

get('.btnAppend').addEventListener('click', function(){
	// 입력값을 숫자로 가져옴.
	let v = Number(get('.append').value);
	
	// top10에 입력한 값이 10개 이하이면 그냥 추가
	if(count<10){
		boxs[count].value = v;
		count++;
	}else{
		arry.length=0;
		//top10 상자의 값을 모두 배열에 저장
		for(box of boxs){
			arry.push(box.value);
		}  
		
		//배열값을 숫자형식으로 정렬
		arry.sort(mysort);
		// 배열의 첫번째값보다 입력값이 크면 첫번째 배열값에 대입.
		if(v > arry[0]){
			arry[0] = v;
		}
		
		arry.sort(mysort);
		
		//배열값을 다시 top10 상자에 표시
		for(i=0 ; i<10 ; i++){
			boxs[i].value = arry[i];
		}
	}
})

get('.append').addEventListener('keyup', function(ev){
	if(ev.keyCode == 13){
		get('.btnAppend').click();
		get('.append').select();
	}
})

//정렬을 숫자형태로 오름차 정렬
function mysort(x, y){
	x = Number(x);
	y = Number(y);
	if(x>y) return 1;
	else return -1;
}

 

오타 없이 정상적으로 작성되었다면 10개까지는 입력된 순서대로 표시되었다가 11번째부터는 크기순으로 정렬되어 상위 10개까지만 표시될 것입니다.

 

자세힌 제작 영상은 아래에 링크되어 있습니다.

 

https://youtu.be/FRSLsOYLzvs

 

'BOOKS > 수월한 자바스크립트' 카테고리의 다른 글

초보 개발자를 위한 스무 고개 게임 만들기  (0) 2023.02.20

관련글

티스토리툴바