* 배열요소 추가, 삭제 - push, pop
[배열].push(추가할 요소)배열의 push 메서드는 인자로 주어진 값을 배열의 끝에 추가한다. 또한, 배열의 새로운 길이를 반환한다. push 메서드는 원본 배열을 변경한다.
const seasons = ['spring', 'summer', 'autumn']
const arrLength = seasons.push('winter')
console.log(seasons) // 변경된 원본배열 출력
console.log(arrLength) // 변경된 배열 길이 출력위 코드는 seasons 배열에 winter 라는 문자열을 배열 끝에 추가한다.
const multiplyBySix = []
for(let i=1; i<100; i++){
multiplyBySix.push( 6 * i )
}
console.log(multiplyBySix) // 6의 배수로 이루어진 배열위 코드는 배열의 push 메서드를 사용하여 6의 배수로 이루어진 배열을 생성한다. 배열의 길이는 99이다.
const movies = ['Haprry potter', 'Doctor stranger', 'Iron man', 'Spider man', 'Widow']
const moviesInfo = []
function addMovieInfo(movie, index){
moviesInfo.push( {title: movie, id: index} )
}
movies.forEach(addMovieInfo)
console.log(moviesInfo) // 무비 ID 가 추가된 영화 목록 생성위 코드는 배열의 push 메서드를 사용하여 movies 배열로부터 무비 ID 가 추가된 moviesInfo 라는 새로운 배열을 생성한다. 즉, 문자열로만 이루어진 movies 배열을 객체를 배열요소로 가지는 moviesInfo 라는 배열로 변환한 것이다.
[배열].push(추가할 요소 1, 추가할 요소 2, 추가할 요소 3, ...)배열의 push 메서드는 다수의 값을 배열요소로 추가할 수 있다.
const cities = ['seoul', 'busan', 'daegu']
cities.push('deajeon', 'ulsan')
console.log(cities)위 코드는 cities 라는 원본 배열에 deajeon, ulsan 이라는 새로운 도시를 여러개 추가한다.
const cities = ['seoul', 'busan', 'daegu']
const citiesToAdd = ['deajeon', 'ulsan']
cities.push(...citiesToAdd)
console.log(cities)위 코드는 이전 코드 예제와 동일하게 동작하지만 스프레드 연산자(...)를 사용하였다. 이렇게 하면 cities 배열과 citiesToAdd 배열을 하나의 배열로 합칠수 있다. 하지만 이렇게 합치게 되면 cities 배열은 변경된다.
[배열].pop()배열의 pop 메서드는 배열에서 마지막 요소를 제거한다. 반환값은 제거된 배열요소이다. 빈 배열의 경우 undefined 를 반환한다.
const companies = ['Samsung', 'LG', 'Google', 'Facebook', 'Amazon']
console.log(companies.pop())위 코드는 배열의 pop 메서드를 이용하여 회사 목록에서 마지막 배열요소인 Amazon 을 제거하고 반환한다.
* 배열요소 추가, 삭제 - shift, unshift
const alphabets = ['a', 'b', 'c']
const firstAlphabet = alphabets.shift()
console.log(alphabets)
console.log(firstAlphabet)배열의 shift 메서드는 배열요소들을 왼쪽으로 이동시킨다. 즉, 배열에서 첫번째 요소는 제거되고, 제거된 첫번째 요소를 반환한다. shift 메서드는 원본배열을 변경한다. pop 메서드가 배열의 마지막 요소를 제거하는 것과 정반대로 동작한다.
const alphabets = ['a', 'b', 'c']
const arrLength = alphabets.unshift('d', 'e')
console.log(arrLength)
console.log(alphabets)배열의 unshift 메서드는 배열요소들을 오른쪽으로 이동시킨다. 즉, 새로운 배열요소를 배열의 맨 앞에 추가하고, 변경된 배열의 길이를 반환한다. unshift 메서드도 원본배열을 변경한다. push 메서드가 배열의 맨 마지막에 요소를 추가하는 것과 정반대로 동작한다.
const names = ["Andrew", "Edward", "Paul", "Chris", "John"]
while ((i = names.shift()) !== undefined) {
console.log(i)
}
// Andrew, Edward, Paul, Chris, Johnshift 메서드는 while 반복문의 조건으로도 사용이 가능하다. 해당 코드는 현재 배열의 맨 앞에 위치한 요소를 추출해서 콘솔에 출력한다.
* 배열요소 추가, 변경, 삭제 - splice
[배열].splice(변경 시작 인덱스, 삭제할 요소의 수, 추가할 요소 1, 추가할 요소2, ...)배열의 splice 메서드는 배열에 요소를 추가하거나, 변경하거나 삭제하는 등의 모든 기능을 다 수행할 수 있는 만능 메서드이다. 첫번째 인자로는 배열에서 변경을 시작할 인덱스가 들어간다. 두번째 인자는 해당 위치로부터 삭제할 배열요소의 갯수가 들어간다. 세번째 이후의 인자들은 배열에 추가할 요소들이다. 반환값으로는 제거한 요소들이 담겨져 있는 배열이다.
const fruits = ['apple', 'orange', 'watermelon']
const removedFruits = fruits.splice(1, 0, 'banana')
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열에 banana 를 추가한다. splice 메서드의 두번째 인자에 0 을 설정하면 요소를 추가하기만 한다. 제거된 요소가 없으므로 removedFruits 는 빈 배열을 출력한다.
const fruits = ['apple', 'orange', 'watermelon']
const removedFruits = fruits.splice(1, 0, 'banana', 'strawberry')
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열에 banana 와 strawberry 를 추가한다. splice 메서드의 두번째 인자에 0 을 설정하면 요소를 추가하기만 한다. 제거된 요소가 없으므로 removedFruits 는 빈 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(2, 1)
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 2번 인덱스에서 1개의 요소를 제거한다. 즉, strawberry 하나만 제거된다. 제거된 요소는 strawberry 하나이므로 removedFruits 는 strawberry 요소 하나만 가진 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(0, 3, 'pear', 'lemon')
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 0번 인덱스에서 3개의 요소를 제거한다. 즉, apple, banana, strawberry 3개가 제거된다. 또한, pear 와 lemon 이 각각 배열의 0번과 1번 인덱스로 추가된다. 제거된 요소는 apple, banana, strawberry 3개이므로 removedFruits 는 apple, banana, strawberry 요소들을 담은 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(fruits.length - 4, 2)
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 1번 인덱스에서 2개의 요소를 제거한다. 즉, banana, strawberry 2개가 제거된다. 맨 마지막 배열요소가 fruits.length - 1 이므로 fruits.length - 4 는 1번 인덱스를 의미한다. 제거된 요소는 banana, strawberry 2개이므로 removedFruits 는 banana, strawberry 요소들을 담은 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(-2, 1)
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 3번 인덱스에서 1개의 요소를 제거한다. 즉, orange 1개가 제거된다. 맨 마지막 배열요소의 인덱스가 -1번이므로 -2번은 3번 인덱스를 의미한다. 제거된 요소는 orange 1개이므로 removedFruits 는 orange 요소 하나만 담은 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(2)
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 2번 인덱스부터 모든 요소들이 제거된다. 즉, strawberry, orange, watermelon 3개가 모두 제거된다. 제거된 요소는 strawberry, orange, watermelon 3개이므로 removedFruits 는 strawberry, orange, watermelon 를 담은 배열을 출력한다.
const fruits = ['apple', 'banana', 'strawberry', 'orange', 'watermelon']
const removedFruits = fruits.splice(3, 1, 'lemon')
console.log(fruits)
console.log(removedFruits)위 코드는 배열의 splice 메서드를 이용하여 fruits 배열의 3번 인덱스에서 1개의 요소를 제거한다. 즉, orange 1개가 제거된다. 또한, 3번 인덱스에는 lemon 이 추가된다. 즉, 배열요소 3번인 orange 가 lemon 으로 변경된다. 제거된 요소는 orange 1개이므로 removedFruits 는 orange 요소 하나만 담은 배열을 출력한다.
* 배열 정렬하기 (sort, reverse)
[배열].sort()배열의 sort 메서드는 배열요소를 설정한 규칙에 따라 정렬한다. sort 메서드는 원본배열을 변경한다.
const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house']
words.sort()
console.log(words)위 코드는 단어들을 알파벳 순으로 오름차순 정렬한다.
const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house']
words.sort()
console.log(words.reverse())위 코드는 단어들을 알파벳 순으로 내림차순 정렬한다.
const numbers = [100, 3, 394, 27, 4, 82, 6, 5, 94]
numbers.sort()
console.log(numbers)위 코드는 숫자를 오름차순 정렬하려고 하였으나 결과는 아래와 같이 제대로 동작하지 않는다. 이유는 sort 메서드는 숫자를 문자열로 생각하고 앞의 자리수부터 하나씩 비교하기 때문이다. 예를 들어 100과 27을 비교하면 당연히 27이 작지만, sort 메서드는 각 숫자의 맨 앞자리인 1과 2부터 비교하기 때문이다.
그럼 숫자를 제대로 정렬하려면 어떻게 하면 될까?
[배열].sort(비교함수)배열의 sort 메서드는 비교함수를 인자로 받을수 있다. 비교함수에 이전보다 다양한 방식으로 정렬이 가능하다.
function 비교함수 이름(배열요소 1, 배열요소 2){
if(배열요소 1 > 배열요소 2) return 1 // 배열요소 1 이 크면 반환값 1을 설정함으로써 순서를 변경함
if(배열요소 1 < 배열요소 2) return -1 // 배열요소 1이 작으면 반환값 -1을 설정함으로써 순서를 변경하지 않음
return 0
}오름차순 정렬을 위한 비교함수는 위와 같은 규칙을 가진다. 배열요소 1은 배열요소 2보다 앞에 위치한다. 만약 배열요소 1이 더 크다면 반환값을 1로 설정함으로써 순서를 변경한다. 배열요소 1이 더 작다면 -1을 반환함으로써 순서를 변경하지 않도록 한다. 만약 비교하는 두 배열요소가 동일한 값을 가진다면 0을 반환하면 된다.
const numbers = [100, 3, 394, 27, 4, 82, 6, 5, 94]
// 숫자 오름차순 정렬하기
function compareNumbers(a, b){
if(a > b) return 1 // 앞의 숫자(a)가 뒤의 숫자(b)보다 크면 순서를 변경함 (1을 반환하면 순서를 변경함)
if(a < b) return -1 // 앞의 숫자(a)가 뒤의 숫자(b)보다 작으면 순서를 변경하지 않음 (-1을 반환하면 순서를 변경하지 않음)
return 0 // 두 숫자가 동일하면 순서를 변경하지 않음
}
numbers.sort(compareNumbers)
console.log(numbers)앞에서 설명한 규칙에 따라 numbers 배열을 오름차순 정렬하면 위와 같다.
위 코드는 아래와 같이 훨썬 더 간략하게 작성할 수 있다. a > b 일때 1을 반환하지만 실제로는 0보다 큰 값을 반환하면 된다. 그러므로 a - b 를 반환하면 a 가 b 보다 클때 0 보다 큰 값 (양수)을 반환하여 순서를 변경하고, a 가 b 보다 작으면 0 보다 작은 값 (음수)을 반환하여 순서가 변경되지 않는다.
const numbers = [100, 3, 394, 27, 4, 82, 6, 5, 94]
// 숫자 오름차순 정렬하기
function compareNumbers(a, b){
return a - b
}
numbers.sort(compareNumbers)
console.log(numbers)내림차순 정렬은 당연히 아래와 같이 a 와 b 의 순서를 바꿔서 빼주면 된다.
const numbers = [100, 3, 394, 27, 4, 82, 6, 5, 94]
// 숫자 내림차순 정렬하기
function compareNumbers(a, b){
return b - a
}
numbers.sort(compareNumbers)
console.log(numbers)화살표 함수를 사용하면 아래와 같이 훨씬 더 간략하게 작성할 수 있다.
const numbers = [100, 3, 394, 27, 4, 82, 6, 5, 94]
// 숫자 내림차순 정렬하기
numbers.sort( (a, b) => b - a)
console.log(numbers)
아래와 같이 객체들의 배열인 경우에는 객체의 속성(프로퍼티) 값을 기준으로 정렬할 수 있다.
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
]
// value 기준으로 정렬
items.sort(function (a, b) {
if (a.value > b.value) {
return 1
}
if (a.value < b.value) {
return -1
}
// a must be equal to b
return 0
})
console.log(items)해당 코드는 value 프로퍼티(속성)을 기준으로 배열요소를 오름차순 정렬한다.
const items = [
{ name: "Edward", value: 21 },
{ name: "Sharpe", value: 37 },
{ name: "And", value: 45 },
{ name: "The", value: -12 },
{ name: "Magnetic", value: 13 },
{ name: "Zeros", value: 37 },
]
// name 기준으로 정렬
items.sort(function (a, b) {
var nameA = a.name.toUpperCase() // ignore upper and lowercase
var nameB = b.name.toUpperCase() // ignore upper and lowercase
if (nameA < nameB) {
return -1
}
if (nameA > nameB) {
return 1
}
// 이름이 같을 경우
return 0
})
console.log(items)해당 코드는 name 프로퍼티(속성)을 기준으로 배열요소를 사전순 정렬한다.
* 연습과제 1
입력창에 사용자 정보 (이름, 연락처, 나이) 를 넣어주고, 추가 버튼을 클릭하면 아래와 같이 웹 화면에 사용자가 추가되도록 해보자!
배열의 push 메서드를 이용하여 사용자를 추가하고, forEach 메서드로 전체 사용자 리스트를 순회하면서 화면에 보여주도록 하자! isValid 함수를 이용하여 사용자 정보 (이름, 연락처, 나이) 를 모두 입력한 경우에만 사용자를 추가하고 화면에 보여주고, 그렇지 않으면 경고창을 띄우도록 하자!
코드의 일부분은 아래와 같다.
<!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>자바스크립트 연습</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<h1>User List</h1>
<div id="form">
<label>user name : <input type="text" id='user-name' class='user-info'></label><br/>
<label>user email : <input type="text" id='user-email' class='user-info'></label><br/>
<label>user age : <input type="text" id='user-age' class='user-info'></label><br/>
<button id='user-add'>추가</button>
</div>
<div id="user-list"></div>
<script src="app.js"></script>
</body>
</html>h1{
text-align: center;
color: darkorange;
}
#form{
width: 500px;
margin: 50px auto;
}
label{
font-weight: bold;
font-size: 1rem;
color: darkorange;
}
.user-info{
all: unset;
width: 100%;
height: 40px;
border-radius: 15px;
border: 2px solid darkorange;
box-sizing: border-box;
padding-left: 10px;
}
#user-list{
width: 500px;
margin: 200px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.user{
box-shadow: 1px 1px 5px 5px darkorange;
padding: 10px;
background: darkorange;
color: wheat;
font-weight: bold;
font-size: 1.1rem;
width: 300px;
margin-bottom: 20px;
}
#user-add{
all: unset;
width: 70px;
height: 30px;
background: darkorange;
color: white;
font-size: 1.2rem;
font-weight: bold;
float: right;
border-radius: 15px;
margin-top: 15px;
padding: 10px;
text-align: center;
cursor: pointer;
}const userName = document.getElementById('user-name') // 사용자 이름 입력창
const userEmail = document.getElementById('user-email') // 사용자 연락처 입력창
const userAge = document.getElementById('user-age') // 사용자 나이 입력창
const userList = document.getElementById('user-list') // 사용자 리스트 출력 위치
const submitBtn = document.getElementById('user-add') // 사용자 추가 버튼
const users = [] // 사용자 리스트 배열
// 입력창 유효성 검증
function isValid(str){
return str !== '' && str !== undefined
}
// user 정보로부터 user 에 대한 DOM 객체 생성 및 반환
function buildElement(user){
const userEl = document.createElement('div')
// 구현하기
return userEl
}
// users 배열을 이용하여 화면에 사용자 리스트 보여주기
function displayUsers(users){
// 구현하기
}
// 입력창 초기화
function initInput(){
userName.value = ''
userEmail.value = ''
userAge.value = ''
}
// 사용자 추가하기
function addUser(){
// 구현하기
}
submitBtn.addEventListener('click', addUser)
* 연습과제 2
배열의 pop 메서드를 이용하여 배열요소의 순서가 뒤바뀐 새로운 배열을 만들어보자!
const companies = ['Samsung', 'LG', 'Google', 'Facebook', 'Amazon']
const companiesReversed = []
// 구현하기
console.log(companiesReversed)
* 연습과제 3
다음은 SNS 에 등록된 나의 친구목록이다.
const friends = [
{name: 'victoria', age: 13, city: 'seoul'},
{name: 'sun', age: 34, city: 'busan'},
{name: 'johseb', age: 25, city: 'busan'},
{name: 'syleemomo', age: 9, city: 'seoul'},
{name: 'hannah', age: 41, city: 'daegu'},
{name: 'shara', age: 37, city: 'seoul'},
{name: 'martin', age: 28, city: 'daegu'},
{name: 'gorgia', age: 39, city: 'seoul'},
{name: 'nana', age: 24, city: 'busan'},
{name: 'dannel', age: 19, city: 'seoul'},
]아래와 같이 사용자가 오늘 친구를 2명 추가해서 frineds 배열의 3번째 위치에 들어가야 한다면 어떻게 하면 될까?
const newFriends = [
{name: 'Ami', aage: 27, city: 'ulsan'},
{name: 'gracias', aage: 21, city: 'ulsan'},
]결과는 아래와 같다.
* 연습과제 4
다음은 SNS 에 등록된 나의 친구목록이다.
const friends = [
{name: 'victoria', age: 13, city: 'seoul'},
{name: 'sun', age: 34, city: 'busan'},
{name: 'johseb', age: 25, city: 'busan'},
{name: 'syleemomo', age: 9, city: 'seoul'},
{name: 'hannah', age: 41, city: 'daegu'},
{name: 'shara', age: 37, city: 'seoul'},
{name: 'martin', age: 28, city: 'daegu'},
{name: 'gorgia', age: 39, city: 'seoul'},
{name: 'nana', age: 24, city: 'busan'},
{name: 'dannel', age: 19, city: 'seoul'},
]사용자가 자신을 짜증나게 하는 친구인 hannah 와 shara 를 친구목록에서 제거하려고 한다. 사용자를 기쁘게 해주자!
* 연습과제 5
다음은 SNS 에 등록된 나의 친구목록이다.
const friends = [
{name: 'victoria', age: 13, city: 'seoul'},
{name: 'sun', age: 34, city: 'busan'},
{name: 'johseb', age: 25, city: 'busan'},
{name: 'syleemomo', age: 9, city: 'seoul'},
{name: 'hannah', age: 41, city: 'daegu'},
{name: 'shara', age: 37, city: 'seoul'},
{name: 'martin', age: 28, city: 'daegu'},
{name: 'gorgia', age: 39, city: 'seoul'},
{name: 'nana', age: 24, city: 'busan'},
{name: 'dannel', age: 19, city: 'seoul'},
]사용자는 대구로 이사를 와서 서울에 사는 친구와는 더이상 연락하지 않는다. 서울에 사는 친구들을 친구목록에서 제거해보자!
* 연습과제 6
다음은 SNS 에 등록된 나의 친구목록이다.
const friends = [
{name: 'victoria', age: 13, city: 'seoul'},
{name: 'sun', age: 34, city: 'busan'},
{name: 'johseb', age: 25, city: 'busan'},
{name: 'syleemomo', age: 9, city: 'seoul'},
{name: 'hannah', age: 41, city: 'daegu'},
{name: 'shara', age: 37, city: 'seoul'},
{name: 'martin', age: 28, city: 'daegu'},
{name: 'gorgia', age: 39, city: 'seoul'},
{name: 'nana', age: 24, city: 'busan'},
{name: 'dannel', age: 19, city: 'seoul'},
]사용자는 자기보다 나이가 많은 친구와는 코드가 맞지 않아서 더이상 연락하고 싶어하지 않는다. 사용자의 나이는 현재 서른이다. friends 배열을 나이순으로 정렬한 다음 서른보다 적은 친구만 추출해보자! 결과는 아래와 같다.
* 연습과제 7
다음은 SNS 에 등록된 나의 친구목록이다.
const friends = [
{name: 'victoria', age: 13, city: 'seoul'},
{name: 'sun', age: 34, city: 'busan'},
{name: 'johseb', age: 25, city: 'busan'},
{name: 'syleemomo', age: 9, city: 'seoul'},
{name: 'hannah', age: 41, city: 'daegu'},
{name: 'shara', age: 37, city: 'seoul'},
{name: 'martin', age: 28, city: 'daegu'},
{name: 'gorgia', age: 39, city: 'seoul'},
{name: 'nana', age: 24, city: 'busan'},
{name: 'dannel', age: 19, city: 'seoul'},
]사용자는 웹 사이트에서 친구목록을 친구의 이름에 대하여 알파벳 순으로 보고 싶어한다. 어떻게 하면 될까?
결과는 위와 같다.
* 연습과제 8
현재 나는 넷플릭스와 유사한 영화 검색 사이트를 개발중이다. 아래와 같은 영화 목록을 서버에서 불러온 다음 웹 화면에 보여주기 위하여 영화 발매일 (release) 을 기준으로 최신순으로 정렬하려고 한다. 어떻게 하면 될까?
const movies = [
{title: 'Harry Potter', release: '2003-02-22'},
{title: 'Indiana Jhones', release: '2009-01-09'},
{title: 'Terminator', release: '2007-04-11'},
{title: 'Dracula', release: '2007-04-13'},
{title: 'Jurassic Park', release: '2007-05-13'},
{title: 'Iron man', release: '2012-12-18'},
{title: 'Spider man', release: '2017-03-07'}
]결과 화면은 아래와 같다.
* 연습과제 9
자바스크립트 문법 7의 연습과제 12에서 OPEN API 로부터 화장품 데이터를 가져와서 화면에 보여주었다. 이번에는 헤더에 Price 버튼을 추가한 다음 버튼을 클릭하면 가격이 낮은 순으로 정렬해서 보여주고, 다시 버튼을 클릭하면 처음 화면에 보여주었던 것처럼 출력해보자!
관련된 코드의 일부는 아래와 같다.
<!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>자바스크립트 연습</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="header">
<button id='price-btn' class="sort-btns">Price</button>
</div>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>#header{
width: 100%;
height: 70px;
position: fixed;
left: 0;
top: 0;
right: 0;
box-shadow: 1px 1px 5px 5px darkgray;
background: white;
z-index: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.sort-btns{
all: unset;
width: 100px;
height: 50px;
background: peru;
border-radius: 10px;
cursor: pointer;
color: white;
font-size: 1rem;
font-weight: bold;
text-align: center;
margin-right: 10px;
}
.sort-btns:hover{
opacity: 0.8;
}
#root{
width: 60%;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product{
flex: 200px;
height: 500px;
box-shadow: 1px 1px 5px 5px peru;
color: white;
background: peru;
margin: 10px;
overflow: hidden;
}
.product-img{
width: 100%;
height: 180px;
overflow: hidden;
}
.product-img img{
width: 100%;
height: 100%;
}
.product-name{
font-weight: bold;
font-size: 1.1rem;
text-align: center;
}
.product-description{
font-weight: 400;
font-size: 0.9rem;
text-align: center;
margin-top: 15px;
}
* 연습과제 10
아래 화면처럼 화장품 정보에 상품유형(product_type)에 대한 정보를 추가로 보여주도록 하자. 그런 다음 입력창을 추가하고, 사용자가 입력창에서 상품유형을 검색하면 해당 상품들만 추려서 보여주도록 구현해보자!
유의할 점은 다음과 같다.
// 정렬 후 검색
1) 가격순으로 정렬된 상태에서 상품유형을 검색하면 추려진 상품들도 정렬이 되어서 보여져야 한다.
// 검색 후 정렬
2) 상품유형으로 검색하여 추려진 상품들은 Price 버튼을 클릭하면 가격순으로 정렬이 되어야 한다.
코드의 일부는 아래와 같다.
<!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>자바스크립트 연습</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="header">
<button id='price-btn' class="sort-btns">Price</button>
</div>
<div id='search-box'>
<input id='search-input' type="text" placeholder="Search ..."/>
</div>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>body{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 70px;
position: fixed;
left: 0;
top: 0;
right: 0;
box-shadow: 1px 1px 5px 5px darkgray;
background: white;
z-index: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.sort-btns{
all: unset;
width: 100px;
height: 50px;
background: peru;
border-radius: 10px;
cursor: pointer;
color: white;
font-size: 1rem;
font-weight: bold;
text-align: center;
margin-right: 10px;
}
.sort-btns:hover{
opacity: 0.8;
}
#search-box{
margin: 100px auto;
text-align: center;
}
#search-input{
width: 300px;
height: 30px;
border-radius: 10px;
border: 2px solid peru;
padding: 10px;
color: peru;
font-weight: bold;
font-size: 1.1rem;
outline: peru;
}
#search-input::placeholder{
color: peru;
font-weight: bold;
font-size: 1.1rem;
}
#root{
width: 60%;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product{
flex: 200px;
height: 500px;
box-shadow: 1px 1px 5px 5px peru;
color: white;
background: peru;
margin: 10px;
overflow: hidden;
position: relative;
}
.product-img{
width: 100%;
height: 180px;
overflow: hidden;
}
.product-img img{
width: 100%;
height: 100%;
}
.product-name{
font-weight: bold;
font-size: 1.1rem;
text-align: center;
}
.product-description{
font-weight: 400;
font-size: 0.9rem;
text-align: center;
margin-top: 15px;
height: 180px;
overflow: hidden;
}
.product-type{
text-align: center;
font-size: 1.5rem;
position: absolute;
bottom: 10px;
width: 100%;
}
* 연습과제 11
다음은 택배회사에서 발송해야 할 수령자 정보와 주소지가 적힌 목록이 있다. 택배기사는 각각 자신의 지역구에 해당하는 택배만 배송하기 때문에 지역별로 분류해야 할 필요가 있다. 해당 목록을 아래와 같이 city 로 먼저 분류하고, 다시 state 로 분류해보세요!
const customers = [
{name: '나봄', age: 22, city: '서울', state: '도봉구'},
{name: '다은', age: 34, city: '부산', state: '해운대구'},
{name: '가온', age: 28, city: '대구', state: '수성구'},
{name: '보라', age: 25, city: '부산', state: '부산진구'},
{name: '해련', age: 41, city: '대구', state: '달서구'},
{name: '여름', age: 56, city: '서울', state: '중랑구'},
{name: '재찬', age: 9, city: '서울', state: '마포구'},
{name: '바다', age: 35, city: '부산', state: '해운대구'},
{name: '초롱', age: 17, city: '대구', state: '달서구'},
{name: '진솔', age: 37, city: '서울', state: '도봉구'},
{name: '한울', age: 67, city: '부산', state: '부산진구'},
{name: '승아', age: 34, city: '대구' , state: '수성구'},
{name: '다빈', age: 42, city: '부산', state: '동래구'},
{name: '잔디', age: 38, city: '대구', state: '북구'},
{name: '새롬', age: 39, city: '서울', state: '마포구'},
{name: '노을', age: 13, city: '서울', state: '구로구'},
{name: '한결', age: 24, city: '부산', state: '동래구'},
{name: '마루', age: 19, city: '서울', state: '마포구'},
]
'프론트엔드 > Javascript' 카테고리의 다른 글
| 자바스크리트 문법 10 - 2차원 배열과 배열의 확장 (0) | 2022.01.13 |
|---|---|
| 자바스크립트 문법 9 - 배열(Array) 의 다양한 메서드 3 (분해와 융합) (0) | 2021.12.30 |
| 자바스크립트 문법 7 - 배열(Array) 의 다양한 메서드 1 (검색과 조회) (0) | 2021.12.27 |
| 자바스크립트 문법 5 - 이벤트(Event) 처리하기 3 (0) | 2021.12.23 |
| 자바스크립트 문법 4 - 이벤트 (Event) 처리하기 2 (0) | 2021.12.19 |