JavaScript 검색 결과

해당 글 163건

keyup 이벤트 알아보기

이벤트 객체 - keyup 이 글에서는 keyup event 에 대해 알아보도록 하겠습니다. keyup event 다음의 예제는 글쓰기 입력창과 같은 곳에서 글자 입력수에 따라서 입력 가능한 글자수를 동적으로 글자 수를 세어주는 예제입니다. 아래의 textarea 에 한글이나 영문을 입력해 보시기 바랍니다. See the Pen keyup 이벤트 테스트 by jaeheekim (@jaehee) on CodePen. 위의 입력받은 키 이벤트는 keyup 을 사용했습니다. 위와 같은 것을 구현하고자 할 경우에는 keypress 이벤트는 한글로 사용할 수 없습니다. 왜 keypress 가 아닌 keyup 이벤트를 사용하는 것일까요? 영문을 입력하면 keypress 이벤트가 사용하기 좋지만 한글은 keypres..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:03

mouseover와 mouseenter 이벤트 차이

mouseover vs mouseenter 이 포스팅에서는 마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다. mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다. 다음의 소스뷰를 살펴보도록 합니다. See the Pen 마우스오버와 마우스엔터 차이 by jaeheekim (@jaehee) on CodePen. 위의 영역의 오렌지와 핑크에 마우스를 올렸다 내렸다하면 마우스오버와 마우스엔터 이벤트를 발생시킬 것입니다. mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킵니다. 반면에, mouseenter 이벤트는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:03

Event flow & Event Handling

이벤트 흐름과 이벤트 핸들링 이 글에서는 이벤트 흐름과 핸들링에 대해 알아봅니다. 이벤트 흐름 단계 단 계설 명 캡처링 단계(capture phase) 이벤트가 문서의 루트객체인 Document를 거쳐 이벤트가 발생한 타겟 객체의 부모 객체까지 전달되는 단계 타겟 단계(target phase)이벤트가 발생한 객체로 전달되는 단계 버블링 단계(bubbling phase)타겟 객체의 부모에서 Document 객체까지 전달되는 단계 Dom Level 2 - 이벤트 핸들링 addEventListener(), removeEventListener() elm.addEventListener( string type, Function handler, useCapture) addEventlistener 메소드의 매개변수 매..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:02

[자바스크립트] 이벤트 모델의 전파 과정

이벤트 전달을 막는 4가지 방법 이벤트 모델은 DOM의 구조를 두 번 순회합니다. 이벤트가 호출되면 최상위 루트에서 자식 엘리멘트들을 타고 이벤트 타깃까지 내려가는 캡쳐 단계가 일어나고 다시 반대로 이벤트의 타킷으로부터 최상위 루트까지 올라가는 버블 단계가 일어납니다. 이러한 이벤트 전파 과정을 통해서 예상치 못한 결과가 발생하는 경우가 있는데 예를 들어 부모 요소와 자식 요소 두 곳에 click 이벤트를 생성한 후 자식 요소를 클릭하여 이벤트를 호출할 때 클릭하지 않은 부모 요소에서 클릭이 발생하게 됩니다. 이런 의도치 않은 반응이 일어나 문제가 발생되는 것은 이벤트 모델의 전파과정 중 버블링 단계에서 이벤트를 발생하기 때문입니다. 하지만 event 객체에 stopPropagation() 메소드를 호출..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:02

함수 선언문과 함수 표현식에서의 세미콜론(;)

Semi Colon 일반적으로 코드를 작성할 때 함수 표현식에서는 ;(세미콜론)을 붙히고 함수 선언문으로 작성할 시에는 ;(세미콜론)을 붙이지 않는다. 이것은 하나의 관습이고 코드 작성시 권장되는 방식이다. 그리고 자바스크립트에서 세미콜론 사용을 강제하지는 않는다. 그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 하지만 세미콜론에 신경을 쓰지 않는다면 소스 압축 배포를 하거나 디버깅을 할 시에 심각한 상황에 직면하게 될 것이다. 다음의 코드 예제를 살펴보자 // 'hello world!!!' 를 출력하려는 코드 // 함수 표현식에 세미콜론을 사용하지 않음 var test = function() { return 300; } // 세미콜론 없음 (function() { con..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:01

자바스크립트 메서드 오버라이드와 오버로딩

JavaScript Method Override & Overloading 생성자 함수(클래스)를 이용하여 상속을 하다보면 종종 물려받은 부모의 기능을 그대로 사용하지 않고 재정의해야 할 경우가 발생할 수 있습니다. 이 경우를 메서드 오버라이드라고 하는데 이 글에서는 자바스크립트 오버라이드하는 방법에 대해 알아봅니다. 그리고 마지막에서는 오버로딩(overloading)에 대해서도 간단히 소개합니다. 메서드 오버라이드란? 메서드 오버라이드(override)는 자식 클래스에서 부모 클래스의 기능(method)을 재정의할 때 사용하믄 기능입니다. 오버라이드는 다음과 같은 경우에 주로 사용합니다.부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우부모 클래스의 기능을 자식 클래스에..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:01

재귀 함수(Recursive Function)

재귀 함수 함수는 함수 안에서 자기 자신을 다시 호출하는 것을 재귀함수라고 한다. 재귀 함수의 필요성과 특징에 대해 알아보도록 하자. 재귀함수는 대개 factorial(계승) 함수로 설명들을 하고 있다. 다음 코드를 보자. JavaScript function fakeFactorial(n) { var result = 1; for(var i = 1; i 1) ? n * fact(n -1) : 1; } console.log(fact(5)); // 120 위의 두번째 함수와 같이 자기 자신을 다시 호출하여 사용하는 것을 재귀 함수라고 한다. 또 다른 예제를 통해 사용법에 대해 좀 더 알아보자. JavaScript var sports = { soccer : {member: 11, time: 90}, basketb..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:00

정렬 알고리즘(선택정렬) - 오름차순,내림차순

전형적인 선택정렬 알고리즘 var sort = [33,22,11,55,44]; var temp = 0, i = 0, j; for(; i sort[j]) { temp = sort[i]; // 큰 값을 잠시 임시변수에 저장 sort[i] = sort[j]; // 작은 값을 앞으로 옮김 sort[j] = temp; // 임시변수에 넣어둔 것을 뒤로 옮김 } } } // 0번째와 그 이후로 비교후 정렬 // 1번째와 그 이후로 비교후 정렬... console.log(sort); ※ 내림 차순은 부등호만 바꾸면... 참 쉽죠~ ! ㅋ Jaehee's WebClub
JavaScript/JS 활용 & etc.. 2016. 9. 29. 12:58

배열의 합, 최대값,최소값 알고리즘

배열 Study 배열의 합과 평균 구하기 var students = [80,90,100]; var sum = 0; var avg = 0.0; for (var i=0; i < students.length; i++ ) { sum += students[i]; } console.log(sum); avg = sum / students.length; console.log(avg); 배열의 최대값 구하기 var arr = [20,77,50,40,55]; var max = 0; // 최대값이 저장될 변수 // max process for(var i = 0; i < arr.length; i++) { // max값이 현재값보다 작다면 if(max < arr[i]) { max = arr[i]; // breaking poin..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 12:58

클래스 기반(일반 언어)과 프로토타입(자바스크립트) 기반 비교

클래스 기반(일반 언어)과 프로토타입 기반 비교 클래스 기반(일반 언어) Java /* 1단계 : 클래스 정의 */ public class Prisoner { public int setence = 4; public int probation = 2; public string name; public string id; /* 2단계 : 클래스 생성자 정의*/ public Prisoner(string name, string id) { this.name = name; this.id = id; } } /* 3단계 : 객체 생성 */ Prisoner firstPrisoner = new Prisoner("Joe", "12A"); Prisoner secondPrisoner = new Prisoner("Sam", "2BC..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:43

절차 지향 방식에서 객체지향 방식(함수기반 클래스,프로토타입방식 클래스) 으로 리팩토링하기

함수기반 클래스, 프로토타입 방식 클래스 절차 지향 방식 코드 jQuery(function($){ console.time('성능'); /* Radio */ var radioBox = $('.ctm-radio'); var addClassRadio = function($input){ $input.each(function(){ if ($(this).prop('checked')){ if ($(this).parent().hasClass('ctm-radio')){ var radioName = $(this).attr('name'); $('input[name='+radioName+']').parent('.ctm-radio').removeClass('checked'); } $(this).parent().addClass(..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:42

팩토리 함수를 활용한 Object.create

팩토리 함수를 활용한 Object.create JavaScript /** * ------------------------------------------------------- * Object.create() 를 지원하지 않는 * 브라우저를 위한 크로스 브라우징 메서드 정의 * ------------------------------------------------------- */ var objectCreate = function ( arg ) { if(!arg) { return {}; } function obj() {} obj.prototype = arg; return new obj; }; Object.create = Object.create || objectCreate; var proto = { se..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:42

싱글톤(singleton) 패턴

싱글톤 싱글톤(singleton) 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴을 말합니다. 따라서 객체 리터럴도 싱글톤 패턴이라고 할 수 있습니다. javascript var singletonObj = { a : '값', b : function () { } } 그러나 객체 리터럴로는 비공개 상태 및 함수를 정의할 수는 없습니다. 규모가 큰 라이브러리에서는 흔히 외부에서 접근할 수 없는 비공개 멤버를 가지고 있습니다. 자바스크립트에서 비공개 멤버가 필요하다면 먼저 클로저(closure) 를 염두에 두어야 합니다. 즉, 비공개 멤버를 가진 싱글톤 객체를 생성하려면 클로저를 이용해야 합니다. 다음은 클로저를 이용한 싱글톤 패턴을 구현하는 예제입니다. javascript var S..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:40

네임스페이스 패턴(namespace pattern)

네임스페이스 패턴 자바스크립트 코드의 재사용과 생산성을 향상시키고자 많은 라이브러리가 나오고 있다. 이러한 라이브러리를 제작할 때 일반적으로 가장 중요한 것은 다른 모듈로부터 독립성을 보장하고 상호 간섭하지 않게끔 네임스페이스(namespace) 를 사용하는 것이다. 라이브러리를 사용하다 보면 언제든지 한쪽에서 사용한 타입명이 다른 쪽에서도 사용될 수도 있는데, 어디서 사용될 지 모르는 라이브러리를 만드는 경우라면 반드시 네임스페이스를 정의해 객체를 안전하게 분리/관리하는 것을 필수입니다. 네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해준다. 수많은 함수, 객체, 변수들로 전역 유효범위를 어지럽히지 않는 대신, 애플리케이션이..
JavaScript/JS 객체지향 프로그래밍 2016. 9. 29. 10:38