// HTML 부분
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js">
</script>
</head>
<body>
<input type="text" id = "txt" align = "center" style = "width:100pt">
<input type="button" align = "center" value="배열에 추가하기" style = "width:100pt" onclick="arrAppend()"></button>
<br>
<div>현재 배열의 값:<div id="settxt"></div></div>
<br><br>
<input type="button" align = "center" value="Shift로 꺼내기" style = "width:100pt" onclick="arrShift()"
></button>
<input type="button" align = "center" value="Pop으로 꺼내기" style = "width:100pt" onclick = "arrPop()"></button>
<br>
<input type="button" align = "center" value="Reverse로 뒤집기" style = "width:100pt" onclick="arrReverse()"></button>
<input type="button" align = "center" value="Sort로 정렬하기" style = "width:100pt" onclick="arrSort()"></button>
</body>
</html>
// JS 부분
var arr = new Array();
// 배열 객체 선언
// 자바스크립트 배열은 동적배열이라고 함.
var txt = "";
var disp = "";
function arrAppend(){ // 추가하기 버튼을 눌렀을때
// 배열 값 추가
txt = document.getElementById("txt");
// 텍스트박스의 id를 가져옴
disp = document.getElementById("settxt");
// div의 id를 가져옴
arr.push(txt.value); // 생성한 배열에 텍스트에 입력된 값을 불러온다.
disp.innerHTML += arr[arr.length-1] + ',';
// div에 추가된 배열을 출력해준다.
txt.value = "";
// 추가되면 텍스트박스는 공백으로 초기화
}
function arrShift(){ // Shift 버튼을 눌렀을때
// 배열의 첫번째 요소 제거
disp = document.getElementById("settxt");
arr.shift(); // shift함수를 사용하여 배열의 첫 요소를 제거
disp.innerHTML = ""; // 출력 초기화
for(var i=0;i<arr.length;i++){
disp.innerHTML += arr[i] + ',';
// shift를 한 후 배열값을 포문으로 다시 출력
}
}
function arrPop(){ // pop 버튼을 눌렀을때
// 배열의 마지막 요소 제거
disp = document.getElementById("settxt");
arr.pop();
// pop함수를 이용하여 배열의 끝 요소를 제거
disp.innerHTML = "";
for(var i=0;i<arr.length;i++){
disp.innerHTML += arr[i] + ',';
}
}
function arrReverse(){ // Reverse 버튼을 눌렀을때
disp = document.getElementById("settxt");
// 배열 뒤집기
arr.reverse();
// reverse 함수를 이용하여 배열 요소들을 뒤집기.
disp.innerHTML = "";
for(var i=0;i<arr.length;i++){
disp.innerHTML += arr[i] + ',';
}
}
function arrSort(){ // Sort 버튼을 눌렀을때
// 배열 요소 오름차순 정렬
disp = document.getElementById("settxt");
arr.sort((a,b) => a - b);
// sort함수를 이용하여 배열 요소들을 오름차순 정렬
// 일반적인 sort함수를 쓰면 아스키 코드값으로 정렬되어 있어 숫자 크기 그대로 나오지 않는다.
disp.innerHTML = "";
for(var i=0;i<arr.length;i++){
disp.innerHTML += arr[i] + ',';
}
}
// sort() 정렬부분 참고 사이트
반응형
'자바과정 > 과제물' 카테고리의 다른 글
| JSP 한글 전송 처리 (GET과 POST방식으로) (0) | 2021.03.08 |
|---|---|
| HTTP 에러코드 정리 (0) | 2021.03.05 |
| 세션과 쿠키 (0) | 2021.03.02 |
| 자바스크립트 String 객체 이벤트 (0) | 2021.02.26 |
| HTML 과제 : 상대경로와 절대경로 (0) | 2021.02.25 |
댓글