이번에는 이전에 만들었던 로또 번호 생성기에 정렬 기능을 추가하고 전체적으로 코드 수정을 해보았다.
추가로 로또의 보너스 번호도 추가해 보았다.
먼저 정렬 알고리즘에 대해서 알아보고 가자!
정렬 알고리즘
정렬(Sorting)이란 데이터를 특정한 기준에 따라서 순서대로 나열하는 것을 말한다. 사람들은 정렬을 쉽게 할 수 있지만 컴퓨터에게는 쉬운 일은 아니다. 컴퓨터는 사람과 다르게 규칙성을 알지 못하기 때문에 우리가 코드를 잘 짜줘야 한다.
정렬 알고리즘의 종류는 다양하다. 버블 정렬, 선택 정렬, 삽입 정렬, 퀵 정렬, 계수 정렬 등이 있다. 이 중에서 나는 오늘 배운 버블 정렬을 사용해 보았다. 찾아보니 버블 정렬이 가장 효율이 좋지 않은 정렬이라고 한다. 하지만 초보자가 이해하기 쉽고 코드가 짧은 장점이 있다고 한다.
버블 정렬
버블 정렬은 옆에 있는 값과 비교해서 더 큰 값을 뒤로 보내는 정렬이다. (오름차순 기준)
다음 그림과 같이 바로 옆에 있는 값을 비교해 앞쪽 값이 더 크다면 뒤로 보내면서 정렬을 한다.
버블 정렬 코드는 다음과 같다.
function bubleSort(arr) {
let temp;
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}1. 값을 임시로 담을 temp 변수를 선언한다.
2. 배열의 길이의 - 1 만큼 반복한다. (2개씩 비교하기 때문에)
3. 배열의 길이의 -1 - i 만큼 반복한다. (마지막 값은 정렬이 끝났기 때문에 1번씩 반복 횟수가 줄어듬)
4. 만약 왼쪽 배열의 값이 오른쪽 배열의 값보다 크다면
5. 왼쪽 배열의 값을 temp 변수에 넣는다.
6. 오른쪽 배열의 값을 왼쪽 배열에 넣는다.
7. temp 변수의 값을 오른쪽 배열의 값에 넣는다. (5 ~ 7 : swap)
버블 정렬을 이용해 수정한 코드를 보자!
로또 번호 생성기 코드
# practice.html
<!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>
<link rel="stylesheet" href="public/css/practice.css" />
</head>
<body>
<div id="wrap">
<h2>로또 번호 생성기</h2>
<div id="container">
<div id="lotto_contain">
<ul id="lotto_box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div id="result">당첨번호</div>
</div>
<div id="plus">+</div>
<div id="bonus_contain">
<div id="bonus_box">
<div id="bonus_num">6</div>
</div>
<div id="bonus_text">보너스</div>
</div>
</div>
<button id="create_num">번호 생성</button>
</div>
<script src="public/js/practice.js"></script>
</body>
</html># practice.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
#wrap {
width: 100%;
text-align: center;
}
#wrap > h2 {
font-size: 45px;
}
#container {
display: flex;
justify-content: center;
margin-top: 30px;
}
#container > #lotto_contain > #lotto_box {
width: 800px;
height: 150px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 25px;
background-color: #fafafa;
}
#container > #lotto_contain > #lotto_box > li {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
font-size: 40px;
border-radius: 50px;
color: white;
font-weight: bold;
}
#container > #lotto_contain > #result {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
color: #555;
}
#container > #plus {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
font-size: 60px;
font-weight: bold;
color: #999;
}
#container > #bonus_contain > #bonus_box {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 25px;
background-color: #fafafa;
}
#container > #bonus_contain > #bonus_box > #bonus_num {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
font-size: 40px;
border-radius: 50px;
color: white;
font-weight: bold;
}
#container > #bonus_contain > #bonus_text {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
color: #555;
}
#create_num {
margin-top: 20px;
width: 150px;
height: 50px;
}
.range_1 {
background-color: rgb(251, 196, 0);
}
.range_2 {
background-color: rgb(105, 200, 242);
}
.range_3 {
background-color: rgb(255, 114, 114);
}
.range_4 {
background-color: rgb(170, 170, 170);
}
.range_5 {
background-color: rgb(176, 216, 64);
}# practice.js
const lottoList = document.querySelectorAll("#lotto_contain > #lotto_box > li");
const bonusElement = document.querySelector("#bonus_contain > #bonus_box > #bonus_num");
const numCreateBtn = document.querySelector("#create_num");
function numCreate() {
const numList = [];
const lottoNum = [];
const result = {};
let ranNumIndex = 0;
for (let i = 0; i < 45; i++) {
numList.push(i + 1);
}
for (let i = 0; i < 7; i++) {
ranNumIndex = Math.floor(Math.random() * numList.length);
lottoNum.push(numList[ranNumIndex]);
numList.splice(ranNumIndex, 1);
}
const bonusNum = lottoNum[lottoNum.length - 1];
lottoNum.splice(lottoNum.length - 1, 1);
result["lottoNum"] = lottoNum;
result["bonusNum"] = bonusNum;
return result;
}
function rangeNum(num) {
if (num >= 1 && num <= 10) {
return "range_1";
}
if (num >= 11 && num <= 20) {
return "range_2";
}
if (num >= 21 && num <= 30) {
return "range_3";
}
if (num >= 31 && num <= 40) {
return "range_4";
}
if (num >= 41 && num <= 45) {
return "range_5";
}
}
function sorting(arr) {
let temp;
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
function resultLottoNum() {
const resultNum = numCreate();
const sortingNum = sorting(resultNum.lottoNum);
for (i = 0; i < lottoList.length; i++) {
lottoList[i].innerHTML = sortingNum[i];
lottoList[i].className = rangeNum(sortingNum[i]);
}
bonusElement.innerHTML = resultNum.bonusNum;
bonusElement.className = rangeNum(resultNum.bonusNum);
return resultNum.lottoNum;
}
resultLottoNum();
numCreateBtn.addEventListener("click", resultLottoNum);
이전과 달라진 점은 이전에는 번호를 뽑을 때 매번 1부터 45까지에서 랜덤 한 번호를 뽑았다면 이번에는 1부터 45까지 있는 배열을 생성해서 번호를 뽑을 때마다 배열에서 요소를 하나씩 제거하면서 중복을 처리했다는 점이다.
'Javascript' 카테고리의 다른 글
| [Javascript] 게시판 구현하기 (CRUD) - Create (0) | 2022.11.19 |
|---|---|
| [Javascript] 댓글 구현하기 (Create, Read) (2) | 2022.11.16 |
| [Javascript] Script 태그 위치 (0) | 2022.11.11 |
| [Javascript] Event Object (0) | 2022.11.10 |
| [Javascript] Event (Add, Remove) (0) | 2022.11.09 |