개요
JavaScript에서 배열의 항목들을 버튼 클릭할 때마다 역순으로 하나씩 화면에 표시하는 방법을 알아보겠습니다. 이 기능은 배열의 마지막 요소부터 첫 번째 요소까지 순서대로 출력해야 할 때 유용합니다.
먼저 다음과 같은 이름 목록 배열이 있다고 가정해 보겠습니다.
var listOfNames = [ 'John', 'David', 'Bob' ];
그리고 클릭 버튼은 아래와 같이 작성합니다.
<button id="reverse" onclick="reverseTheArray()">버튼을 클릭하면 역순 값이 표시됩니다</button>
동작 원리
배열 항목을 역순으로 표시하기 위해서는 먼저 배열의 길이를 구한 후, 길이에서 1을 뺀 값을 인덱스로 사용합니다. 이는 배열 인덱스가 0부터 시작하기 때문입니다.
그다음, 버튼을 클릭할 때마다 해당 인덱스의 내용을 출력하고 카운트를 1씩 감소시키면 됩니다. 카운트가 0보다 작아지면 다시 배열의 마지막 인덱스로 되돌려 무한히 반복해서 사용할 수 있습니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div align="center" id='reverseTheArray'></div>
<button id="reverse" onclick="reverseTheArray()">버튼을 클릭하면 역순 값이 표시됩니다</button>
<script>
var listOfNames = [
'John',
'David',
'Bob'
];
count=listOfNames.length-1;
function reverseTheArray(){
document.getElementById('reverseTheArray').innerHTML =
listOfNames[count];
count--;
if (count<0)
count=listOfNames.length-1;
}
</script>
</body>
</html>실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장하고, 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 VS Code 편집기에서 "Open with Live Server(라이브 서버로 열기)" 옵션을 선택하면 됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
1단계
버튼을 처음 클릭하면 배열의 마지막 값인 'Bob'이 화면에 표시됩니다.
2단계
버튼을 다시 클릭하면 뒤에서 두 번째 값인 'David'가 표시됩니다. 이처럼 버튼을 클릭할 때마다 배열 항목이 역순으로 하나씩 출력되며, 모든 항목이 표시된 후에는 다시 처음부터 반복됩니다.
