728x90

프론트엔드 163

자바스크립트 문법 3 - 이벤트(Event) 처리하기 해답

* 연습과제 1 랜덤으로 타일의 색상 변경하기 body{ padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } #tile-container{ width: 600px; height: 600px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .tile{ width: 200px; height: 200px; box-sizing: border-box; border: 1px solid skyblue; } const tiles = document.querySelectorAll('..

자바스크립트 문법 9 - 배열(Array) 의 다양한 메서드 3 (분해와 융합) 해답

* 연습과제 1 해답 1 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: ..

자바스크립트 문법 8 - 배열(Array)의 다양한 메서드 2 (변경과 정렬) 해답

* 연습과제 1 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 } function buildElement(user){ const use..

자바스크립트 문법 7 - 배열(Array)의 다양한 메서드 1 (검색과 조회) 해답

* 연습과제 1 const lyrics = ` Sorry Sorry Sorry Sorry 내가 내가 내가 먼저 네게 네게 네게 빠져 빠져 빠져 버려 baby Shawty Shawty Shawty Shawty 눈이 부셔 부셔 부셔 숨이 막혀 막혀 막혀 내가 미쳐 미쳐 baby 바라보는 눈빛 속에 눈빛 속에 나는 마치 나는 마치 뭐에 홀린 놈 이젠 벗어나지도 못해 걸어오는 너의 모습 너의 모습 너는 마치 내 심장을 밟고 왔나봐 이젠 벗어나지도 못해 어딜 가나 당당하게 웃는 너는 매력적 착한 여자 일색이란 생각들은 보편적 도도하게 거침 없게 정말 너는 환상적 돌이킬 수 없을만큼 네게 빠져 버렸어 Sorry Sorry Sorry Sorry 내가 내가 내가 먼저 네게 네게 네게 빠져 빠져 빠져 버려 baby Sh..

자바스크리트 문법 10 - 2차원 배열과 배열의 확장

* 2차원 배열을 생성하는 방법 배열 리터럴 사용 const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]] 배열 리터럴을 사용하여 값을 초기화함과 동시에 변수에 할당할 수 있다. const _2dArray = [] const rows = 5 const columns = 2 for (let i = 0; i < rows; i++) { const element = [] for (let j = columns * i; j < columns * i + columns; j++) { element.push(j + 1) } _2dArray.push(element) } console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [..

자바스크립트 문법 9 - 배열(Array) 의 다양한 메서드 3 (분해와 융합)

* 부분 배열 만들기 - slice [배열].slice(부분배열을 추출할 인덱스 시작점, 부분배열을 추출할 인덱스 끝점) 배열의 slice 메서드는 원본배열로부터 부분배열을 추출한 다음 새로운 배열로 반환한다. 원본배열은 변경되지 않는다. 부분배열은 원본배열의 얕은 복사본이다. slice 메서드의 첫번째 인자로는 추출을 시작할 인덱스의 위치가 들어가고, 두번째 인자로는 추출을 종료할 인덱스의 위치가 들어간다. const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house'] const slicedWords = words.slice(3) console.log(slicedWords) 위 코드는 3번 인덱스부터 시작해서 배열요소들을 추..

자바스크립트 문법 8 - 배열(Array) 의 다양한 메서드 2 (변경과 정렬)

* 배열요소 추가, 삭제 - 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 배열요소 2) return 1 // 배열요..

자바스크립트 문법 7 - 배열(Array) 의 다양한 메서드 1 (검색과 조회)

* 배열 검색 - indexOf, lastIndexOf, find, findIndex, includes, filter, some, every [배열].indexOf(검색할 요소, 검색 시작 위치) 배열의 indexOf 메서드는 첫번째 인자로 검색할 배열요소가 들어간다. 두번째 인자로는 검색을 시작할 인덱스 위치값을 설정하면 된다. 검색할 요소를 찾으면 해당요소의 인덱스값을 반환하고, 검색에 실패하면 -1 을 반환한다. const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat'] const searchedAnimal = animals.indexOf('cat') console.log(searchedAnimal) animals 라는 배열에서 'cat' 이라는 ..

728x90