[JavaScript] 정렬
2024. 10. 9. 23:01ㆍJavaScript
이번엔 JavaScript의 정렬에 대해서 한 번 알아보자.
출력할 js파일을 vscode에 넣어두어야한다.
const arr = [
{
"user": "TrynMst",
"champion": "퀸",
"team": "블루",
"kill": 7,
"death": 7,
"assist": 7,
"damage": 27176,
"cs": 173
},
{
"user": "강승우의 제발PLZ",
"champion": "마오카이",
"team": "블루",
"kill": 4,
"death": 6,
"assist": 17,
"damage": 22744,
"cs": 144
},
{
"user": "Hide on bush",
"champion": "산드라",
"team": "블루",
"kill": 8,
"death": 3,
"assist": 10,
"damage": 42702,
"cs": 274
},
{
"user": "128482031",
"champion": "바루스",
"team": "블루",
"kill": 14,
"death": 5,
"assist": 8,
"damage": 31350,
"cs": 277
},
...중략
]
전체코드
<style>
#root {
border: 2px solid black;
max-width: 1200px;
margin: auto;
}
.item {
display: flex;
border-bottom: 1px solid grey;
}
.item > div {
padding: 10px 20px;
flex: 2;
}
.item > div:first-child {
flex: 4;
}
.item > div:nth-child(2) {
flex: 3;
}
.columns {
background-color: #eee;
cursor: pointer;
user-select: none; /* 사용자가 드래그로 글자 및 그림을 선택할 수 없음 */
}
.item.blue {
background-color: skyblue;
}
.item.red {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="root">
<div class="columns item"> <!-- .columns : item 클래스를 추가로 작성 -->
<div order="1" class="user">
<span class="text">유저</span>
<span class="arrow"></span>
</div>
<div order="1" class="champion">
<span class="text">챔피언</span>
<span class="arrow"></span>
</div>
<div order="1" class="team">
<span class="text">팀</span>
<span class="arrow"></span>
</div>
<div order="1" class="kill">
<span class="text">킬</span>
<span class="arrow"></span>
</div>
<div order="1" class="death">
<span class="text">데스</span>
<span class="arrow"></span>
</div>
<div order="1" class="assist">
<span class="text">어시스트</span>
<span class="arrow"></span>
</div>
<div order="1" class="damage">
<span class="text">데미지</span>
<span class="arrow"></span>
</div>
<div order="1" class="cs">
<span class="text">CS</span>
<span class="arrow"></span>
</div>
</div>
<div class="main"> <!-- .main : 정렬의 대상 -->
</div>
</div>
<script src="opgg_result.js"></script> <!-- 사용할 파일 -->
<!-- div class="item ${e.team == '블루' ? 'blue' : 'red'}"
: class 이름에다가 조건에 따라서 blue 또는 red 라는 문자열을 더 추가한다
-->
<script>
console.log(arr)
// 일반 출력
function load() {
const main = document.querySelector('div.main')
arr.forEach(e => {
let tag = ''
tag += `<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`
tag += ` <div class="user">${e.user}</div>`
tag += ` <div class="champion">${e.champion}</div>`
tag += ` <div class="team">${e.team}</div>`
tag += ` <div class="kill">${e.kill}</div>`
tag += ` <div class="death">${e.death}</div>`
tag += ` <div class="assist">${e.assist}</div>`
tag += ` <div class="damage">${e.damage}</div>`
tag += ` <div class="cs">${e.cs}</div>`
tag += `</div>`
main.innerHTML += tag
})
}
window.addEventListener('DOMContentLoaded', load)
// 먼저, 클릭이벤트를 적용할 부분을 추출하자
const columns = document.querySelectorAll('.columns > div') // 모든 컬럼을 불러와서
const sort = Array.from(columns).slice(3, 8) // 3부터 8까지만 잘라낸다
const main = document.querySelector('.main') // 클릭이벤트 정렬 후 main에 내용을 넣는다
function sortHandler(event) { // 클릭이벤트
let target = event.target // 클릭 대상 (클릭한 대상이 target 으로 지정됨)
// 이벤트는 div 에 걸어도, span이 타깃이 될수도 있음(span을 클릭할수도 있기 때문)
while(target.tagName != 'DIV') { // 대상의 태그이름이 DIV가 아니라면 반복(div를 가리킬때까지 반복한다)
target = target.parentNode // 상위 요소를 대상으로 지정한다(div가 가장 상위요소임)
}
const className = target.className // 태그의 클래스이름을 문자열로 불러온다
const order = +target.getAttribute('order') // getAttribute('속성이름') : order값을 정수로 불러온다 (+기호를 붙이면 정수로 불러옴)
target.setAttribute('order', -order) // setAttribute('속성이름', 값) : 부호반전시켜서 새로 저장한다
console.log(className, order)
// 모든 span.arrow 의 내부 글자를 지운다 (삼각형 기호들이 지워질 것임)
// 항상 무엇을 클릭하든간에 모든 값을 없애버림 (kill컬럼을 클릭 후에 또 다른 컬럼을 클릭하면 kill 컬럼의 삼각형이 없어질 수 있는 이유임)
document.querySelectorAll('span.arrow').forEach(span => span.innerText = '')
// 클릭된 대상의 span.arrow 에는 order(정렬순서)에 따라서 삼각형 기호를 넣어준다
target.querySelector('span.arrow').innerText = order > 0 ? '▲' : '▼' // order가 1이면 ▲
// order가 -1이면 ▼
// main의 item들을 불러와서
const arr2 = Array.from(document.querySelectorAll('.main > .item'))
arr2.sort((e1, e2) => {
const v1 = +e1.querySelector('.' + className).innerText // 태그 내부 값을 정수로 변환
const v2 = +e2.querySelector('.' + className).innerText
const ret = v1 - v2 >= 0 ? 1 : -1 // 정렬에 필요한 정수를 반환하기 위해 준비한다 (정렬을 위한 코드)
return ret * order // 반환값의 부호가 반전되도록 1 or -1을 곱한다
// order == 1일때 arrow 는 ▼(내림차순)
// order == -1일때 arrow 는 ▲(오름차순)
})
// 정렬이 끝나면 appendChild
arr2.forEach(e => main.appendChild(e))
}
// 클릭이벤트 실행
sort.forEach(e => e.onclick = sortHandler)
</script>
</body>
</html>
단순 출력 함수 (load)
팀명에 따라 배경색을 다르게 해주고 싶어서
팀명에 조건을 넣어 주었다.
삼항연산자에 의하여 div class 명이 달라지니까 style에는 class명에 따라서 색깔을 다르게 넣어주자.
<script>
console.log(arr)
// 일반 출력
function load() {
const main = document.querySelector('div.main')
arr.forEach(e => {
let tag = ''
tag += `<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`
tag += ` <div class="user">${e.user}</div>`
tag += ` <div class="champion">${e.champion}</div>`
tag += ` <div class="team">${e.team}</div>`
tag += ` <div class="kill">${e.kill}</div>`
tag += ` <div class="death">${e.death}</div>`
tag += ` <div class="assist">${e.assist}</div>`
tag += ` <div class="damage">${e.damage}</div>`
tag += ` <div class="cs">${e.cs}</div>`
tag += `</div>`
main.innerHTML += tag
})
}
window.addEventListener('DOMContentLoaded', load)
`<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`
team의 내용이 '블루' 라면
div의 클래스명이 item blue가 됨.
'블루'가 아니라면
div의 클래스명이 item red가 됨.
팀의 이름에 따라, div 클래스명을 바꿔주고,
클래스명을 이용하여 style 태그에 background-color 를 바꿔준다.
클릭 이벤트 함수 (clickHandler)
// 먼저, 클릭이벤트를 적용할 부분을 추출하자
const columns = document.querySelectorAll('.columns > div') // 모든 컬럼을 불러와서
const sort = Array.from(columns).slice(3, 8) // 3부터 8까지만 잘라낸다
const main = document.querySelector('.main') // 클릭이벤트 정렬 후 main에 내용을 넣는다
function sortHandler(event) { // 클릭이벤트
let target = event.target // 클릭 대상 (클릭한 대상이 target 으로 지정됨)
// 이벤트는 div 에 걸어도, span이 타깃이 될수도 있음(span을 클릭할수도 있기 때문)
while(target.tagName != 'DIV') { // 대상의 태그이름이 DIV가 아니라면 반복(div를 가리킬때까지 반복한다)
target = target.parentNode // 상위 요소를 대상으로 지정한다(div가 가장 상위요소임)
}
const className = target.className // 태그의 클래스이름을 문자열로 불러온다
const order = +target.getAttribute('order') // getAttribute('속성이름') : order값을 정수로 불러온다 (+기호를 붙이면 정수로 불러옴)
target.setAttribute('order', -order) // setAttribute('속성이름', 값) : 부호반전시켜서 새로 저장한다
console.log(className, order)
// 모든 span.arrow 의 내부 글자를 지운다 (삼각형 기호들이 지워질 것임)
// 항상 무엇을 클릭하든간에 모든 값을 없애버림 (kill컬럼을 클릭 후에 또 다른 컬럼을 클릭하면 kill 컬럼의 삼각형이 없어질 수 있는 이유임)
document.querySelectorAll('span.arrow').forEach(span => span.innerText = '')
// 클릭된 대상의 span.arrow 에는 order(정렬순서)에 따라서 삼각형 기호를 넣어준다
target.querySelector('span.arrow').innerText = order > 0 ? '▲' : '▼'
// order가 1이면 ▲
// order가 -1이면 ▼
// main의 item들을 불러와서
const arr2 = Array.from(document.querySelectorAll('.main > .item'))
arr2.sort((e1, e2) => {
const v1 = +e1.querySelector('.' + className).innerText // 태그 내부 값을 정수로 변환
const v2 = +e2.querySelector('.' + className).innerText
const ret = v1 - v2 >= 0 ? 1 : -1 // 정렬에 필요한 정수를 반환하기 위해 준비한다 (정렬을 위한 코드)
return ret * order // 반환값의 부호가 반전되도록 1 or -1을 곱한다
// order == 1일때 arrow 는 ▼(내림차순)
// order == -1일때 arrow 는 ▲(오름차순)
})
// 정렬이 끝나면 appendChild
arr2.forEach(e => main.appendChild(e))
}
// 클릭이벤트 실행
sort.forEach(e => e.onclick = sortHandler)
</script>
HTML을 공부할 때와 마찬가지로 JavaScript도 F12를 눌러
개발자도구와 함께 확인해보는 것이 중요한 것 같다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX (0) | 2024.10.10 |
|---|---|
| [JavaScript] json 화면 구현 (0) | 2024.10.10 |
| [JavaScript] Search Filter (0) | 2024.10.10 |
| [JavaScript] ClickEvent (0) | 2024.10.10 |
| [JavaScript] JavaScript 기본 다지기 (0) | 2024.10.09 |