documenting and archiving

자바스크립트를 사용하여 웹에서 다양한 인터랙션을 개발할 때요소의 위치값이나, 너비나 높이값등을 가져와야 할 때가 많다. 이때 자바스크립트에서 제공하는 다양한 메소드들이 있는데, 종류별로 정리해보았다. 1. 요소의 크기 측정콘텐츠 영역 크기element.clientWidth: 요소의 내부 너비 (패딩 포함, 스크롤바/테두리/마진 제외)element.clientHeight: 요소의 내부 높이 (패딩 포함, 스크롤바/테두리/마진 제외)스크롤 영역 크기element.scrollWidth: 요소의 전체 콘텐츠 너비 (보이지 않는 영역 포함)element.scrollHeight: 요소의 전체 콘텐츠 높이 (보이지 않는 영역 포함)테두리를 포함한 전체 크기element.offsetWidth: 요소의 전체 너비 (패딩..

const getToday = () => { let today = new Date(); let todayYear = today.getFullYear(); let year = todayYear.toString().slice(2); let todayMonth = today.getMonth() + 1; let month = "0" + todayMonth.toString().slice(-2); let date = "0" + today.getDate().toString().slice(-2); let day = today.getDay(); const week = ['일', '월', '화', '수', '목', '금', '토']; let dayOfWeek = week[day]; return ( {year}. {mont..

function solution(score) { let answer = []; let avgArray = []; score.forEach( item => { item = (item[0] + item[1]) / 2; avgArray.push(item); }) let sortArray = avgArray.slice().sort((a, b) => b - a); avgArray.forEach( rank => { answer.push(sortArray.indexOf(rank) + 1); }) return answer; } 영어점수와 수학점수를 합한 평균을 구하고, 평균을 새로운 배열에 넣어준 뒤 내림차순으로 정렬해주었다. sort는 원본 배열이 변경되기 때문에 slice로 복사 후 새로운 배열로 만들어준 뒤 정렬..

function solution(n) { let answer = 0; let arr = []; for(let i = 1; i el !== i) } } answer = arr[n-1]; return answer; } 3의 배수나 3이 포함된 모든 숫자가 제외되어야 하기 때문에, 숫자 배열을 만들고 3의 배수나 3이 포함된 숫자를 모두 제거한 뒤 입력된 값 n의 인덱스에 해당하는 숫자를 받아오면 될 것 같다고 생각했다. 3의 배수이거나 3이 포함된 숫자이면 filter로 제외해서 배열을 만들었다. 3이 포함된 숫자를 제외하는 법은 빈 문자열을..

function solution(numbers, direction) { let answer = []; let target; if(direction == 'left') { target = numbers.splice(0, 1); numbers.push(target[0]); } else if(direction == 'right') { target = numbers.splice(numbers.length-1, 1); numbers.unshift(target[0]); } answer = numbers; return answer; } left면 numbers 배열의 첫번째 인덱스 한 개를 제거하고, 그걸 변수에 담아서 numbers 배열 맨 마지막에 추가해줬고 right면 numbers 배열의 마지막 인덱스 한 개..

function solution(s) { let answer = 0; s = s.replace(/zero/gi, 0); s = s.replace(/one/gi, 1); s = s.replace(/two/gi, 2); s = s.replace(/three/gi, 3); s = s.replace(/four/gi, 4); s = s.replace(/five/gi, 5); s = s.replace(/six/gi, 6); s = s.replace(/seven/gi, 7); s = s.replace(/eight/gi, 8); s = s.replace(/nine/gi, 9); answer = Number(s); return answer; } 문자열에 있는 숫자 텍스트들을 숫자로 변환해주는 문제. 정규식을 이용해 re..

사칙연산 함수 만들기 function calculator(a, b, operator){ if(operator === '+') { return a + b; } else if (operator === '-') { return a - b; } else if (operator === '/') { return a / b; } else if (operator === '*') { return a * b; } }; calculator(10, 20, '+') calculator(20, 5, '/') calculator(30, 3, '*') calculator(50, 7, '-') 매개변수(parameter) 함수가 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수 function func(a) { return a..

랜덤한 2개의 숫자 생성 후 사칙연산 결과 출력하기 let numA = Math.floor((Math.random() * 10) + 1); let numB = Math.floor((Math.random() * 20) + 1); `두 숫자는 ${numA}, ${numB}입니다. 두 수의 합은 ${numA + numB}입니다. 두 수의 차는 ${numA - numB}입니다. 두 수의 곱은 ${numA * numB}입니다. 큰 수를 작은 수로 나누면 ${numA / numB}입니다.` Math.random() 0 이상 ~ 1 미만의 난수를 반환한다. 1. a 이상 ~ b 미만의 난수 구하기 Math.random() * (max - min) + min; ex) 0 이상 ~ 9 미만의 난수 Math.random(..

HTML CSS .carousel { max-width: 100%; height: 200px; overflow: hidden; } .carousel .carousel-wrapper { width: 300px; height: 200px; display: flex; flex-wrap: nowrap; flex-direction: row; } .carousel .carousel-wrapper .carousel-item { width: 100px; height: 200px; } JS const carouselContainer = document.querySelector('.carousel'); const carouselWrapper = document.querySelector('.carousel-wrapper')..

노마드코더 바닐라 JS로 크롬 앱 만들기 #3.4 ~ #3.6 강의 들으며 정리. html to do list에 입력할 폼을 만들어주고 리스트를 표시할 ul 태그 작성 javascript const toDoForm = document.querySelector('.js-toDoForm'), toDoInput = toDoForm.querySelector('input'), toDoList = document.querySelector('.js-toDoList'); function init(){ loadToDos(); } init(); 변수를 선언하고 loadToDos라는 함수를 실행할 init 함수 작성 const TODOS_LS = 'toDos'; function loadToDos(){ const loaded..