웹개발/자바스크립트 15

[js] canvas 에 도형그리기

1. 직사각형 그리기 rect(x, y, width, height) 좌측 상단이 (x, y)이고 폭과 높이가 width와 height인 직사각형을 그립니다. fillRect(x, y, width, height) 색칠된 직사각형을 그립니다. strokeRect(x, y, width, height) 직사각형 윤곽선을 그립니다. clearRect(x, y, width, height) 특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다. See the Pen canvas-Rect by mk (@kmeijing) on CodePen. 2. 삼각형 그리기 moveTo(x, y) 펜을 x와 y로 지정된 좌표로 옮깁니다. lineTo(x, y) 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을..

[Js] Number 객체 / Number 메서드

Number 객체 메서드 객체 설명 Number.toExponential([fractionDigits]) Number를 지수표기법으로 반환된 문자열 반환 Number.toFixed([digits]) 소수점 digits 자리만큼 반환 (소수의 자리수의 길이 제한) Number.toPrecision([precision]) 인자로 전달된 길이의 수를 반환 (수의 길이 제한) Number.toString(radix) Number를 문자열로 반환 Number.valueOf() Number에 대한 원시데이터형(primitive value) 반환 Number 메서드 메서드 설명 Number.isNaN(value) 주어진 값이 NaN(Not a Number)인지 확인 Number.isFinite(value) 주어진 값..

[Js] Math 객체 / Math 메서드 / Math 프로퍼티

Math 객체 Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않습니다. 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메서드나 프로퍼티를 바로 사용할 수 있습니다. Math 메서드 메서드 설명 Math.min(x,y[,...z]) 가장 작은 수를 반환, 인자가 없으면 Infinity를 반환 Math.max(x,y[,...z]) 가장 큰 수를 반환, 인자가 없으면 Infinity를 반환 Math.random() 0과 1사이의 랜덤한 수를 반환 Math.round(x) 소수점을 가장 가까운 정수로 반환 Math.floor(x) 소수점을 가장 가까운 정..

[Js] 최대공약수(GCD) & 최소공배수(LCM) 구하기

최대공약수(GCD) 최대공약수는 두 수 a와 b의 공통된 약수 중에 가장 큰 정수이다. 최대공약수를 구하는 가장 쉬운 방법은 2부터 min(a, b)까지 모든 정수로 나누어보는 방법이다. 최대공약수가 1인 두 수를 서로소(Coprime)라고 한다. 최대공약수 구하기 See the Pen 최대공약수 by mk (@kmeijing) on CodePen. 유클리드 호제법으로 최대공약수 구하기 유클리드 호제법은 2개의 자연수의 최대공약수를 구하는 알고리즘이다. 유클리드 호제법의 기본 원리는 a를 b로 나눈 나머지를 r이라고 했을 때, GCD(a, b) = GCD(b, r)과 같다는 것이다. r이 0이라면, 그 때의 b가 최대공약수이다. See the Pen 최대공약수 - 유클리드 호제법 by mk (@kmeij..

[Js] filter() - 배열 객체 검색 & 걸러내기

filter() arr.filter(callbackFunction(element[, index[, array]])[, thisArg]); filter() 메서드는 주어진 함수의 테스트를 통과한 요소를 모아 새로운 배열로 반환합니다. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다. 매개변수 callbackFunction - element (요소값), index (요소의 인덱스), array (사용되는 배열 객체) thisArg - filter에서 사용될 this 값입니다. 선택적으로 사용되며 사용하지 않을 경우 undefined 전달 됩니다. 기본 사용 방법 See the Pen filter() by mk (@kmeijing) on CodePen. 배열 객체 검색하기 See the Pen f..

[Js] localeCompare() - 문자열과 문자열 정렬 순서 비교

localeCompare() "참조문자열".localeCompare("비교문자열"[, locales[, options]]); 참조문자열과 비교문자열의 비교하여 결과에 따른 숫자를 반환합니다. 참조문자열 이 비교문자열 보다 먼저 발생 하면 음수 비교문자열 다음에 참조문자열이 발생 하면 양수 동등하면 0을 반환합니다. 1. 사용방법 See the Pen localeCompare() by mk (@kmeijing) on CodePen. 2. 배열 정렬하기 See the Pen localeCompare() - 배열 정렬하기 by mk (@kmeijing) on CodePen. 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_O..

[Js] Object.assign()와 spread (...) - 객체 복사하기

Object.assign() Object.assign(목표객체, ...출처객체); Object.assign() 메소드는 출처 객체의 속성들을 목표 객체로 복사합니다. 수정된 목표 객체를 반환합니다. 기존 목표객체 변경 const target = { a: 'Apple', b: {name: 'Banana', color: 'yellow'}}; const source = { b: {name: 'Grape', color: 'purple'} }; const copied = Object.assign({}, target); // { a: 'Apple', b: {name: 'Banana', color: 'yellow'} } const assigned = Object.assign(target, source); // { a..

[Js] Math.random() - 랜덤숫자(난수)생성하기

Math.random() Math.random() 함수는 0 이상 1 미만의 부동소숫점 의사 난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. 1. 0 이상 1 미만의 난수 생성하기 function getRandom() { return Math.random(); } See the Pen Math.random() - 난수생성 by mk (@kmeijing) on CodePen. 2. 두 값 사이의 난수 생성하기 function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } See the Pen Math.random() - 두값사이의 난수 생성 by mk (@kmeijing) on CodePen. 3. ..

[Js] repeat() - 문자열 반복하기

문자열을 반복하는 repeat() 함수 str.repeat(count); repeat() 함수는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. count 는 양의 정수이며, 무한대보다 작아야 한다. 반환 값이 최대 문자열 크기(268,435,456( 0x10,000,000 ))보다 클 경우 에러가 난다. let str = 'abc'; str.repeat(-1); // RangeError str.repeat(0); // '' str.repeat(1); // 'abc' str.repeat(2); // 'abcabc' str.repeat(3.9); // 'abcabcabc' (count will be converted to integer) str.repeat(1/0); // RangeErr..