์๋ฐ์คํฌ๋ฆฝํธ : ๊ฒ์ ํจ๊ณผ : sort(), reverse()
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค์ํ ํจ๊ณผ๋ค ์ค, ๊ฒ์ ํจ๊ณผ์ ๋๋ค. ์ด๋ฒ์๋ sort(), reverse() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ, ์ค๋ฆ์ฐจ์, ๋ด๋ฆผ์ฐจ์, ์ํ๋ฒณ์ ๋ฑ ์์ฑ๋ค์ด ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ ๋ ฌ๋๋๋ก ์์ ํด ๋ณด๊ฒ ์ต๋๋ค.
1. ์์ฑ ์์ฑํ๊ธฐ
const cssProperty = [
{ num: 1, name: "accent-color", desc: " ์์์ ๊ฐ์กฐ ์์์ ์ง์ ํฉ๋๋ค. " },
{ num: 2, name: "align-content", desc: " ์ฝํ
์ธ ์ฌ์ด์ ์ฝํ
์ธ ์ฃผ์ ๋น ๊ณต๊ฐ์ ํ๋ ์ค ๋ฐ์ค'์ ๊ต์ฐจ์ถ ๋๋ ๊ทธ๋ฆฌ๋์ ๋ธ๋ก ์ถ์ ๋ฐ๋ผ ๋ฐฐ์นํ๋ ๋ฐฉ์์ ๊ฒฐ์ ํฉ๋๋ค." },
{ num: 3, name: "align-items", desc: " ๊ต์ฐจ์ถ์์ ์์ดํ
์ ๋ ฌ ํ๋ ์์ฑ์
๋๋ค. ์ฃผ๋ก flex์์ item๋ค์ ์ ๋ ฌํ ๋ ์ฌ์ฉ๋ฉ๋๋ค." },
{ num: 4, name: "align-self", desc: " ํน์ item์ ์ ๋ ฌ์ ๋ฐ๋ก ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํฉ๋๋ค." },
{ num: 5, name: "all", desc: " CSS ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ ์ธํ ๋ชจ๋ ์์ฑ์ ์ด๊ธฐํํฉ๋๋ค. ์ด๊น๊ฐ, ์์๊ฐ, ์๋๋ฉด ๋ค๋ฅธ ์คํ์ผ์ํธ ์ถ์ฒ์ ๊ฐ๋ก ์ค์ ํ ์ ์์ต๋๋ค." },
{ num: 6, name: "animation", desc: " ์ ๋๋ฉ์ด์
๊ณผ ๊ด๋ จ๋ ์์ฑ์ ์ผ๊ด์ ๋ก ์ฒ๋ฆฌํฉ๋๋ค." },
{ num: 7, name: "animation-delay", desc: " ์ ๋๋ฉ์ด์
์ง์ฐ ์๊ฐ์ ์ค์ ํฉ๋๋ค." },
{ num: 8, name: "animation-direction", desc: " ์ ๋๋ฉ์ด์
์์ง์ ๋ฐฉํฅ์ ์ค์ ํฉ๋๋ค." },
{ num: 9, name: "animation-duration", desc: " ์ ๋๋ฉ์ด์
์์ง์ธ ์๊ฐ์ ์ค์ ํฉ๋๋ค." },
{ num: 10, name: "animation-fill-mode", desc: " ์ ๋๋ฉ์ด์
์ด ๋๋ ํ์ ์ํ๋ฅผ ์ค์ ํฉ๋๋ค." },
{ num: 11, name: "animation-iteration-count", desc: " ์ ๋๋ฉ์ด์
์ ๋ฐ๋ณต ํ์๋ฅผ ์ค์ ํฉ๋๋ค." },
{ num: 12, name: "animation-name", desc: " ์ ๋๋ฉ์ด์
keyframe ์ด๋ฆ์ ์ค์ ํฉ๋๋ค." },
{ num: 13, name: "animation-play-state", desc: " ์ ๋๋ฉ์ด์
์งํ์ํ๋ฅผ ์ค์ ํฉ๋๋ค." },
{ num: 14, name: "animation-timeline", desc: " ์ ๋๋ฉ์ด์
์ ํ์๋ผ์ธ์ ์ค์ ํฉ๋๋ค." },
{ num: 15, name: "animation-timing-function", desc: " ์ ๋๋ฉ์ด์
์์ง์์ ์๋๋ฅผ ์ค์ ํฉ๋๋ค." }
// ์๋ต
]
๋จผ์ , ์์ฑ๋ค์ ์คํฌ๋ฆฝํธ๋ก ์์ฑํด ์ค๋๋ค. ์ด๋ฒ์๋ num์ ์ถ๊ฐํ์ฌ, ๊ฐ ์์ฑ์ ๋ฒํธ๋ฅผ ์ ๋ ฅํด ์ฃผ์์ต๋๋ค.
2. ์์ฑ ์ถ๋ ฅํ๊ธฐ
const cssList = document.querySelector(".search__list .line");
const updateList = () => {
let listCSS = "";
cssProperty.forEach((data, index) => {
listCSS += `${data.num}. ${data.name} : ${data.desc}`;
});
cssList.innerHTML = listCSS;
}
updateList();
listCSS๋ผ๋ ๋น ๋ฌธ์์ด ์์ forEach๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑํ๋ ๋ฐฐ์ด ์ ๊ฐ ์์ฑ์ ๋ฒํธ, ์ด๋ฆ, ์ค๋ช ์ ์ถ๊ฐํด ์ค ๋ค, innerHTML๋ก ์ถ๋ ฅํด ์ฃผ์์ต๋๋ค.
3. ๋ฐ๋๋ก ์ ๋ ฌํ๊ธฐ
document.querySelector(".btn1").addEventListener("click", (e) => {
e.preventDefault();
cssProperty.reverse();
updateList();
});
btn1์ '๋ฐ๋๋ก ์ ๋ ฌํ๊ธฐ' ๋ฒํผ์ ์๋ฏธํฉ๋๋ค. ๊ฐ๋จํ๊ฒ, reverse() ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ฃผ๋ฉด ๋ฉ๋๋ค.
4. ์ค๋ฆ์ฐจ์, ๋ด๋ฆผ์ฐจ์ ์ ๋ ฌํ๊ธฐ
document.querySelector(".btn2").addEventListener("click", (e) => {
e.preventDefault();
cssProperty.sort((a,b) => {
return a.num - b.num;
});
updateList();
});
document.querySelector(".btn3").addEventListener("click", (e) => {
e.preventDefault();
cssProperty.sort((a,b) => {
return b.num - a.num;
});
updateList();
});
btn2๋ '๋ด๋ฆผ์ฐจ์ ์ ๋ ฌํ๊ธฐ', btn3์ '์ค๋ฆ์ฐจ์ ์ ๋ ฌํ๊ธฐ' ๋ฒํผ์ ์๋ฏธํฉ๋๋ค. ์์ ๊ฐ์ด sort() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ๊ฒ ์์ ํ ์ ์์ต๋๋ค.
5. ์ํ๋ฒณ์ ์ ๋ ฌํ๊ธฐ
document.querySelector(".btn4").addEventListener("click", (e) => {
e.preventDefault();
cssProperty.sort((a, b) => {
let x = a.name;
let y = b.name;
return x.localeCompare(y);
});
updateList();
});
document.querySelector(".btn5").addEventListener("click", (e) => {
e.preventDefault();
cssProperty.sort((a, b) => {
let x = a.name;
let y = b.name;
return y.localeCompare(x);
});
updateList();
});
btn4๋ '์ํ๋ฒณ์(a-z) ์ ๋ ฌํ๊ธฐ', btn5๋ '์ํ๋ฒณ์(z-a) ์ ๋ ฌํ๊ธฐ' ๋ฒํผ์ ์๋ฏธํฉ๋๋ค. ์ํ๋ฒณ ์ ๋ ฌ์ ๊ฒฝ์ฐ, ๋ฌธ์์ด์ ๋น๊ตํ๋ localeCompare() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์์ ๊ฐ์ด ์์ ํ ์ ์์ต๋๋ค.
6. ๋๋ค ์ ๋ ฌํ๊ธฐ
document.querySelector(".btn6").addEventListener("click", (e) => {
e.preventDefault();
for(let i=cssProperty.length-1; i>=0; i--){
const randomIndex = Math.floor(Math.random() * (i+1));
[cssProperty[i], cssProperty[randomIndex]] = [cssProperty[randomIndex], cssProperty[i]];
cssProperty.innerHTML += cssProperty[i]
}
updateList();
});
๋ง์ง๋ง์ผ๋ก, btn6์ '๋๋ค ์ ๋ ฌํ๊ธฐ' ๋ฒํผ์ ์๋ฏธํฉ๋๋ค. ์ ๋ฐฉ๋ฒ์
ํผ์
์์ด์ธ ์๊ณ ๋ฆฌ์ฆ์ ์ด์ฉํ ๋ฐฉ๋ฒ์
๋๋ค.
Math.random() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด 0์์ 1 ์ฌ์ด์ ๋์๋ฅผ ๋ฌด์์๋ก ์ถ๋ ฅํฉ๋๋ค.
์ฐ๋ฆฌ๋ ์ ์์ ๊ฐ์ด ํ์ํ๊ธฐ ๋๋ฌธ์, cssProperty์ ๊ธธ์ด๋งํผ ๊ณฑํด์ค ๋ค, ์์์ ์ ์ ๊ฑฐํด ์ค๋๋ค.
๊ทธ๋ฌ๋ randomIndex๋ฅผ ๊ทธ๋๋ก ์ถ๋ ฅํ๋ฉด ์ค๋ณต๋ ๊ฐ์ด ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์
๊ฐ์ฒด๊ตฌ์กฐ๋ถํดํ ๋น์ ์ด์ฉํด ์ค๋ณต๋ ๊ฐ์ ์ ๊ฑฐํด ์ค๋๋ค. ๋ชจ๋ฅด๊ฒ ๋ค๋ฉด ๊ทธ๋ฅ ์ธ์ฐ๋ฉด ๋ฉ๋๋ค.
๊ฒฐ๊ณผ
'Javascript Effect' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ : ์ฌ๋ผ์ด๋ ํจ๊ณผ : ๋ฒํผ, ๋ท๋ฉ๋ด (1) | 2022.10.18 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ : ๊ฒ์ ํจ๊ณผ : ๋ฎค์ง ํ๋ ์ด์ด (1) | 2022.10.18 |
์๋ฐ์คํฌ๋ฆฝํธ ํจ๋ด๋์ค ํจ๊ณผ : ๋ฆฌ๋น ํจ๊ณผ (4) | 2022.10.09 |
์๋ฐ์คํฌ๋ฆฝํธ ๊ฒ์ ํจ๊ณผ : filter() (4) | 2022.09.29 |
์๋ฐ์คํฌ๋ฆฝํธ ํจ๋ด๋์ค ํจ๊ณผ : ํ ์คํธ ํจ๊ณผ (2) | 2022.09.29 |
๋๊ธ