Language (22) 썸네일형 리스트형 JQuery animate를 pure자바스크립트로 만들기 function move(elem) { var left = 0 function frame() { left++ // update parameters elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearInterval(id) } var id = setInterval(frame, 10) // draw every 10ms } https://stackoverflow.com/questions/15521081/jquery-animate-function-equivalent-in-pure-javascript jQuery animate function equivalent in pure JavaScript Wha.. 자바스크립트 내장 함수 1. 타이머 함수 - 타이머 함수에서는 초 단위를 miliisecond(ms)로사용한다. - miliisecond(ms)는 1/1000 초이다. (즉, 5000 ms 는 5 초이다) NO 메서드 이름 설명 1 setTimeout(function, millisecond) 일정 시간 후 함수를 한번 실행합니다. 2 clearTimeout(id) 일정 시간 후 함수를 한번 실행하는 것을 중지 합니다 3 setInterval(function, millisecond) 일정 시간 마다 함수를 반복해서 실행 합니다. 4 clearInterval(id) 일정 시간 마다 함수를 반복하는 것을 중단합니다. - 예제 1) setTimeout(function, millisecond) 2) clearTimeout(id) // .. 자바스크립트 실행 순서 1. 브라우저의 javascript 동작 구조 - 번역 출처(https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/) - 원본 출처(https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) 2. 브라우저의 javascript 동작 순서 1) 동기 방식 이벤트 처리 동작 (1) JS(javascript)엔진이 javascript 코드 순차 적으로 실행 (2) code 실행 중 함수 발결 시 call stack에 넣기 (3) call stack에 넣은 함수를 실행 (4) call stack에서 실행된 .. jQuery - jQuery는 웹을 개발할 때 필요한 DOM 파싱, 이벤트 처리나, Ajax 같은 기능을 아주 쉽게 작성할 수 있게 도와주는 라이브러리이다. 1. jQuery 1.0 소스 코드 구조 대략적인 모듈과 모듈 간 인터페이스 등을 어느정도 파악하는 것이 결국엔 소스의 정확한 소스동작 원리를 파악할 수 있는 밑거름이 된다. 1)jQuery 함수 객체 - jQuery 라이브러리는 jQuery() 함수 정의부터 시작한다. function jQuery(a,c){ //Shortcut for document ready (because $(document).each() is silly) if(a && a.constructor == Function && jQuery.fn.ready) return jQuery(documen.. 함수형 프로그래밍 1. 함수형 프로그래밍의 개념 - 함수형 프로그래밍은 함수의 조합으로 작업을 수행함을 의미한다. 중요한 것은 이 작업이 이루어지는 동안 작업에 필요한 데이터와 상태는 변하지 않는다는 점이다. - 변할 수 있는 건 오로지 함수 뿐이다. 이 함수가 바로 연산의 대상이 된다. //특정 문자열을 암호화 하는 함수 --> 순수함수 (Pure function) f1 = encrypt1; f2 = encrypt2; f3 = encrypt3; //데이터 pure_value = 'zzoon'; //암호화 함수를 받아서 입력받은 함수 --> 고계함수(Higher-order function) encrypted_value = get_encrypted(x); //처리 프로세스 encrypted_value = get_encryp.. 객체지향 프로그래밍 응용 예제 1.클래스 기능을 가진 subClass 함수 - 구현 방법 · 함수의 프로토타입 체인 · extend 함수 · 인스턴스를 생성할 때 생성자 호출(여기서 생성자를 _init 함수로 정한다.) 1)subClass 함수 구조 subClass는 상속받을 클래스에 넣을 변수 및 메서드가 담긴 객체를 인자로 받아 부모 함수를 상속받는 자식 클래스를 만든다. 여기서 부모 함수는 subClass() 함수를 호출할 때 this 객체를 의미한다. var SuperClass = subClass(obj); var SubClass = SuperClass.subClass(obj); 이처럼 SuperClass를 상속받는 subClass를 만들고자 할 때, SuperCalss.subClass()의 형식으로 호출하게 구현한다. 참고로.. 객체지향 프로그래밍 0. 프롤로그 - 클래스 기반 언어 · 클래스 객체로 기본적인 형태와 기능을 정의하고, 생성자로 인스턴스를 만들어서 사용할 수 있다. · 런타임에 인스턴스의 구조를 바꿀 수 없다. · 장점 : 정확성, 안전성, 예측성 - 프로토타입 기반 언어 · 객체의 자료구조, 메서드 등을 동적으로 바꿀 수 있다. · 동적 변경 가능 1. 클래스, 생성자, 메서드 - 여러개의 인스턴스를 만들 때 비효율적인 코드 function Person(arg){ this.name = arg; this.getName = function(){ return this.name; } this.setName = function(value){ this.name = value; } } var me = new Person("zzoon"); con.. 자바스크립트 클로저 1. 클로저의 개념 - 이미 생명 주기(실행 컨텍스트)가 끝낸 외부 함수의 변수를 참조하는 함수를 클로저라고 한다. function outerFunc(){ var x = 10; var innerFunc = function(){console.log(x);} return innerFunc; } var inner = outerFunc(); inner(); //10 · innerFunc가 클로저이다. · x : 자유변수(free variable) · 클로저란 자유변수와 엮여있다 란 의미 이해 확인 function outerFunc(arg1, arg2){ var local = 8; function innerFunc(innerArg){ console.log((arg1+arg2)/(innerArg + local));.. 이전 1 2 3 다음
