kimmgamjja

Fabric.js 는 HTML Canvas를 쉽고 강력하게 관리할 수 있게 하는 라이브러리다. 동일한 그래픽 결과물을 구현함에 있어 단순하고, 객체 집합이나 사용자 인터랙션을 지원한다 가장 큰 특징은 캔버스에 그려진 요소를 객체 형태로 관리 할 수 있다는 점이다. 이를 이용해서 캔버스의 요소들을 선택, 이동, 회전, 크기조절 할 수 있는 기능을 기본적으로 제공한다- Native Canvas API// == canvas ==// reference canvas element (with id="c")var canvasEl = document.getElementById('c');// get / 2d context / to draw / on / the "bitmap" / mentioned earliervar ct..

Textarea 태그 안에서 엔터키를 눌러도 개행이 안되는 경우가 있다 이러한 경우 자바스크립트로 엔터키로 개행을 가능하게 할 수 있다   이 링크에는https://stackoverflow.com/questions/2099661/enter-key-in-textarea  Enter key in textareaI have a textarea, On every Enter key pressed in textarea I want new line to be started with a bullet say (*). How to go about it ? No jQuery please. I can observe for the Enter key , after that...stackoverflow.com$("#txtArea"..

keyup키보드를 눌렀다가 손을 떼는 시점에서 이벤트 발생keydown키보드를 누르는 시점에서 이벤트 발생 키보드를 계속 누르고 있는 경우에 처음 한 번만 이벤트 발생keypress키보드를 누르는 시점에서 이벤트 발생키보드를 계속 누르고 있는 경우에는 이벤트 계속 발생 keypress 가 적용되는 키는 제한적이다ex) 영문, 숫자, Enter, Space  ※ keydown → keypress → keyup 순으로 이벤트 발생  * 이 링크에서 keypress, keydown, keyup 이벤트의 차이를 직관적으로 볼 수 있음https://codepen.io/yamoo9/pen/vRmeQZ DOM API - keydown, keypress, keyup, input 이벤트 간 차이...codepen.ioh..

filter() 배열의 각 요소들 중에서 원하는 조건에 맞는 요소들만으로 필터링된 배열을 생성하기 위해 사용var number = [1, 2, 3, 4];function isEven(val){ return val & 2 === 0; // 짝수인 경우 true 반환}var result = number.filter(isEven);console.log(result); // [2,4]  - 2차원 배열 필터링var people = [["kim", 20], ["lee", 30]];var filtePeople = people.filter(people => { return people[1] >= 30;});console.log(filterPeople); // ["lee",30]  https://codingeveryb..

$.param()$.param() : 맵, 컬렉션 형태의 문자열 배열을 쿼리스트링으로 변환var test = {name : "kim", age : "25"};$.param(test); // name=kim&age=25   https://blog.naver.com/javaking75/140185147895 [jQuery] jQuery 기타 - $.param() : 배열또는 객체를 쿼리스트링으로 변경  참고 API URL : http://api.jquery.com/jQuery.param/       [예...blog.naver.com

after() , insertAfter() A.after(B) : A 뒤에 B 삽입 A.insertAfter(B) : A를 B 뒤에 삽입 $("#a").after($("#b")); // $("#a") 뒤에 $("#b") 삽입// $("#a")// $("#b")$("#a").insertAfter($("#b")); // $("#a") 를 $("#b") 뒤에 삽입// $("#b")// $("#a")before(), insertBefore()A.before(B) : A 앞에 B 삽입A.insertBefore(B) : A를 B 앞에 삽입$("#a").before($("#b")); // $("#a") 앞에 $("#b") 삽입// $("#b")// $("#a")$("#a").insertBefore($(..

1. 함수로 구현자리수만큼 남은 앞부분을 0으로 채움function fillZero(width, str){ return str.length >= width ? str:new Array(width-str.length+1).join('0')+str; //남는 길이만큼 0으로 채움}2. 문자열(String) 또는 숫자 (Number) 프로토타입 메서드로 구현- 숫자 프로토타입으로 입력 길이만큼 앞에 0을 채운 문자열 반환 Number.prototype.fillZero = function(width){ let n = String(this);//문자열 변환 return n.length >= width ? n:new Array(width-n.length+1).join('0')+n; //남는 길이만큼 0으로 채움..

toFixed()numObj.toFixed([소수 부분의 자릿수]) : Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환 let numObj = 1.23456 console.log(numObj.toFixed()); // 결과: '1'console.log(numObj.toFixed(6)); // 결과: '1.234560'console.log(numObj.toFixed(3)); // 결과: '1.235'console.log(numObj.toFixed(1)); // 결과: '1.2'numObj = 0.0005678 console.log(numObj.toFixed()); // 결과: '0'console.log(numObj.toFixed(5)); // 결과: '0.00..

자바스크립트 삭제 관련 함수 .remove()     선택한 요소를 DOM트리에서 삭제, 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다- 지정한 요소와 하위 요소 모두 제거$('.test').click(function () { $('#testt1').remove();}).detach()     선택한 요소를 DOM 트리에서 삭제, 삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다.- 지정한 요소와 하위 요소 모두 제거$("#testt1").detach(); - 요소 제거 후 append로 재생성하는 경우에 사용 .empty()      선택한 요소의 자식 요소를 모두 삭제- 지정한 요소는 제거되지 않는다- 제거 되는 요소들의 데이터와 이벤트 모두 제거$("#testt11")..

find()find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환조건에 맞는 요소를 찾을 수 없다면 undefined를 반환find()는 호출되는 배열을 변경하지 않음var arr = ['A', 'B', 'C', 'A'];arr.find((item) => item == "A"); // A (arr[0])arr.find((item) => item == "D"); // undefined findIndex()findIndex() 메소드는 주어진 함수를 통과한 첫 번째 요소의 인덱스 값을 반환조건에 맞는 요소를 찾을 수 없다면 -1을 반환findIndex()는 호출되는 배열을 변경하지 않음var arr = [1,5,6,3,4,7];var evenIndex = arr.findIndex..