타쿠꺼

마우스위치에 따른 자동스크롤 기능을 구현하는 경우, 보통 왼쪽 끝이나 오른쪽 끝쪽에 가야 스크롤이 완료가 되는데 이는 사용자가 불편해한다. 따라서 어느정도 여유공간을 남겨야 하는데 이를 만드는 공식은 가상 컨테이너 넓이값 = 실제 컨테이너 넓이값 + (여유분width * 2)스크롤 위치값 = 컨테이너에서의 위치값 * (가상컨테이너 넓이값 - wrapper넓이값) / wrapper넓이값 - 여유분width 이다. 실제 예는 아래와 같다. var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / ..

A -> B로 가는 경우, 이동값에다 좌표값을 바로 적용시키면 당연하게도 그냥 바로바로 이동이 된다.하지만 그게 아니라 이동값 += (좌표값-이동값) * 0.1 등과 같이 만들고 requestAnimationFrame함수로 계속 부르게 하면 이동값이 좌표값과 같아질때까지 특정 연산값에 의해 위치가 바뀌기 때문에 한번에 바뀌는게 아니라서 움직임에 easing 효과를 줄 수 있다.이런 easing 관련 수식은 웹에 널려있으니 알아서 찾으면 될 듯 하다. 중요한 포인트는 1. setInterval, requestAnimationFrame과 같은 함수를 사용해서 움직이는 값을 계속 변화시켜줘야 한다는 것.2. easing 함수로 그 움직임 비율 값을 조절하는 것.

간단함. ` `(그레이브)로 감싸면 된다.

bubbling이란 자식요소 -> 부모요소로 이벤트 트리거가 순차적으로 작동하는것을 말한다.즉 자식요소를 클릭하면 부모요소도 클릭되는 효과를 갖는 것이다.이는 이벤트트리거의 디폴트 값이다. capturing은 이와는 반대로 부모요소 -> 자식요소로 이벤트 트리거가 순차적으로 작동하는것을 말한다.이는 따로 설정을 해주어야 한다. 이벤트리스너 메서드의 3번째 매개변수로 true를 넘겨주면 된다.

123456789101112function outFunc() { var innerVar = 1; var innerFunc = function() { console.log(innerVar); }; return innerFunc;} var foo = outFunc();foo(); // 1cs 위와 같이 생명주기가 끝난 함수를 참조하는 내부함수(innerFunc)을 클로저라고 한다.innerFunc의 외부함수인 outFunc의 변수도 참조할 수 있다.123456789101112131415161718function outFunc(bar) { var innerFunc = function(var1, var2) { var sum = bar + (var1 - var2); return sum; }; return inne..

1. 실행 컨텍스트를 만든다.2. 변수 객체를 생성 - argumetns객체 생성 - 스코프 정보 생성 - 변수들 생성(이름만 생성. 값은 undefined) - this 바인딩3. 표현식 코드들의 실행 여기서 실행 컨텍스트는 대개 { } 로 구분되어 있는 것들을 뜻하는데, for문, if문 등도 컨텍스트로 나누는 언어도 있으나 자바스크립트에서는 오직 함수만이 실행 컨텍스트로 나눈다.

자바스크립트는 정적스코프 언어이다. 동적스코프는 함수를 호출하는 시점에서 스코프의 범위가 정해지고, 정적스코프는 함수를 작성하는 시점에서 스코프의 범위가 정해진다.함수를 작성하는 시점에서 스코프의 범위가 정해진다는 뜻을 더 명확히 하자면.. 1. 실행 컨텍스트가 생성되면 해당 컨텍스트의 변수객체에 있는 함수객체들이 생성된다.2. 이 때 함수객체들의 스코프 범위는 본인이 속해있는 컨텍스트의 스코프의 범위를 참조한다. 3. 함수가 실행되면, 함수 본인의 실행 컨텍스트를 만들고 자신이 참조하고 있던 스코프의 범위를 복사한다.4. 그 다음, 본인의 실행 컨텍스트 범위의 변수객체를 스택구조로 기존에 복사한 스코프보다 윗쪽에 배정한다. 따라서 함수객체가 포함된 컨텍스트의 위치가 스코프를 결정짓기 때문에, 만약 아래..

Math.random() 은 0(포함)부터 1(포함하지않음) 사이의 난수를 생성한다.Math.floor은 버림을 한다. 따라서 이를 이용하여 Math.floor(Math.random() * m) + n; 이렇게 하면 n ~ (n+m) 범위의 정수를 생성할 수 있다.

모든 객체는 생성됨과 동시에 __proto__프로퍼티를 갖게 되는데, 이는 프로토타입 객체를 가리킨다.객체의 기본은 Object.prototype이다.함수의 경우 __proto__는 Function.prototype을, 배열의 경우에는 Array.prototype을 가리킨다. (그 외 Boolean, Number등이 있다)여기서 Function.prototype, Array.prototype도 객체이므로 결국 이들의 __proto__는 Object.prototype을 가리킨다.따라서 결국 모든 객체는 Object.prototype으로 귀결되며, Object.prototype만이 __proto__프로퍼티가 없다.함수를 새로 정의하는 경우, 함수이름.prototype 프로퍼티를 갖게 된다.그리고 이 함수를 ..

자바스크립트에서 생성자 함수는 함수에 new를 붙이면 그것이 생성자 함수가 된다. 가령, 어떤 함수 func이 선언되었다면 var foo = new func(); 과 같이 사용하면 func함수가 생성자함수로 작동하여 객체를 반환시킨다.이 때, 생성자 함수에 return을 명시할 필요는 없다. 다만, 명시적으로 객체를 반환시키는 경우엔 해당 객체를 반환시키며, 객체가 아닌 String, Number, Boolean 등을 반환시키면 해당 반환은 무시하고 this가 바인딩된 객체를 반환시킨다.작동 메커니즘은 다음과 같다. 1. 함수가 new와 함께 호출되면, 빈 객체를 생성한다.2. 해당 객체에 this를 바인딩 시킨다.3. 함수가 실행된다.4. 해당 객체를 반환한다. 따라서 생성자 함수는 내부적으로 this..