javascript에서 addEventListener 함수를 이용하여 DOM Element에 이벤트 처리 함수를 추가할때 Capturing 과 Bubbling 두가지의 전달방식을 선택할 수 있다. 1. Capturing - Capturing은 이벤트가 발생한 target element의 최상위 부모부터 target element까지 순차적으로 내려오면서 이벤트가 전달되는 방식 (TopDown 방식?) 2. Bubbling - Bubbling은 이벤트가 발생한 target element부터 최상위 부모까지 순차적으로 올라가면서 이벤트가 전달되는 방식 (BottomUp 방식?) - 이벤트 처리 함수의 매개변수인 Event객체의 event.stopPropagation()함수를 이용해 부모 노드로 이벤트가 전달..
자바스크립트는 함수를 "함수문장" 과 "함수표현식" 두가지 방식으로 정의(혹은 선언?)할 수 있다.- 함수문장 예1 function foo() {}- 함수 표현식 예1 var foo = function foo() {}; "함수문장" 과 "함수 표현식"의 차이- "함수문장"으로 정의된 함수는 해당 함수를 호출하는 코드가 함수를 정의하는 문장보다 앞에 있건 뒤에 있건 유효범위(함수유효범위)만 같으면 문제가 없다. 하지만 "함수 표현식"으로 정의된 함수는 함수를 정의하는 문장보다 뒤에 있어야만 한다. - "함수문장" 과 "함수 표현식"의 차이 예제1 2 3 4 5 6 7 8 9 10 foo(); // 정상 동작 function foo() { alert('call foo');} bar(); // 비정상 동작va..
자바스크립트에서 "==" 연산자와 "===" 연산자의 차이점을 기록해 놓는다. (두번째 확인한 사실이지만... 여전히 새롭다. ㅡㅡ;;)"==" 연산자는 피연산자가 서로 다른 타입이면 타입을 강제로 변환하여 비교한다. 그리고 값을 변환하여 비교하는 규칙은 보잡하고 외우기도 쉽지 않다. 따라서 javascript에서 동등성 비교시에는 "===" 연산자를 사용하자!!!"==" 연산자 예제 '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\..
Backbone.js 를 사용하여 web application 개발할 때 참고할 만한 자료 정리 Backbone.js Tutorial 자료http://backbonetutorials.com/ Backbone.js 다양한 패턴 및 Anti 패턴 자료 http://ricostacruz.com/backbone-patterns/ SPA(Single Page Application)를 만드는 Tutorialhttp://addyosmani.com/blog/building-spas-jquerys-best-friends/ Require.js + MVC 예제http://verekia.com/requirejs/build-simple-client-side-mvc-app-require-js Require.js + jQuery ..
자바스크립트는 블록 유효범위를 지원하지 않는다. 자바스크립트는 함수 유효범위가 있다. 즉 함수 내에서 정의된 변수와 매개변수는 함수 외부에서는 유효하지 않으며, 일반적인 방법으로는 접근이 불가능하다. 반면에 이렇게 함수 내부에서 정의된 변수는 함수 내부 어느곳에서든 접근 가능하다. 심지어 함수 안에 정의된 내부 함수에서 외부 함수에서 정의한 변수와 매개변수에 접근 가능하며(this와 arguments 제외), 요 사실을 잘 이용하면 Java와 같은 객체지향 언어처럼 은닉성을 구현할 수 있다. 코드 예제1 2 3 4 5 6 7 8 9 10 11 12 var myObject = function() { var value = 0; // 함수 외부에서는 접근 불가!!! return { increment: func..
자바스크립트계의 요다로 불리고 있는 더글라스 크락포드(Douglas Crockford)의 자바스크립트 핵심가이드(javaScript The Good Parts)를 두번째로 읽기 시작했다. 개인적으로 같은 책을 두번 정독하는 것은 좋아하지 않지만 내용이 심오하다 보니 한번 가지고는 완벽히 이해가 되지 않는다. ㅠ.ㅠ두번째 읽으면서 또 다시 새롭게 다가오는 내용들을 정리해 나가 볼까 한다. 또 다시 새롭게 다가오지 않도록...javascript 함수 호출 패턴자바스크립트에는 함수를 호출하는데 "메소드 호출 패턴", "함수 호출 패턴", "생성자 호출 패턴", "apply 호출 패턴" 이렇게 네가지 패턴이 있다. (자바스크립트는 네가지 없게도 복잡하거나 난해한 부분이 많다. ㅡㅡ;;)각각의 패턴에 따라 함수내..
오늘 HTML5 와 JQuery를 사용한 대용량 파일 업로드 기능을 구현해봤다. 기본적인 요구사항을 정리하면 아래와 같았다. 1. 동영상 파일을 업로드 하기위한 기능이기 때문에 1GB 이상의 대용량 파일 업로드가 가능해야만 한다. 2. 대용량 파일 업로드이기 때문에 업로드 진행사항을 시각적으로 보여줄 수 있어야 한다. 2번 요구 사항인 업로드 진행사항을 시각적으로 보여주는 것을 개발하기에는 나의 능력을 넘어서는 부분이 라서 구글에게 물어 봤다. 덕분에 아주 이쁘고 요구사항에 딱 맞는 "jQuery-File-Upload"를 찾을 수 있었다. *참조 : http://blueimp.github.com/jQuery-File-Upload/ "jQuery-File-Upload"는 기본적으로다가 jQuery 와 Bo..
ExtJs의 data package는 application data를 조회/저장 기능을 담당하며, Model, Store, Ext.data.proxy.Proxy 클래스는 data 패키지의 핵심이다. Models and Stores data package의 핵심은 Ext.data.Model 클래스이다. Model은 어플리케이션의 테이터 타입을 표현한다. (예를 들면, e-commerce 어플리케이션의 사용자 상품, 거래 정보와 같은 데이터들) 가장 단순한 Model은 단지 해당 데이터들의 필드셋만 정의한다. 간단한 모델을 생성해 보자!!! Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: ..
jquery 예제 코드를 보다 보면 (functin() { //....})(); 형태의 구문을 자주 볼 수 있다. 하지만 해당 구문을 조금전 까지는 이해하지 못하고 있었다. 그런데 "더글라스 클락포드"의 자바스크립트 책으로 인하여 이해할 수 있게 되었다. 아직 자바스크립트에 대해서 완벽히 이해하지 못하였지만... 나름대로 이해한 내용을 정리해본다... 이렇게 정리한다고 해도 시간이 지나면 잊혀지겠지만... 그 시간을 좀더 연장할 수 있지 않을까 한다... 자바스크립트에서는 함수 문장가 함수 표현식이 있다. 1. 함수 문장 : var 문장과 함수값 조합의 축약형이다. ??? (완벽히 이해가 되지는 않는다 ㅡ.ㅡ;;) - ex) function foo() {}; 위의 구문은 다음과 동일한 의미이다. - va..
자바 스크립트의 구문은 C에서 가져온 것이다. C와 같은 구문을 갖는 다른 언어들은 블록 유효범의를 가진다. 하지만 자바스크립트는 블록 유효범위를 지원하지 않는다. 즉 블록 내에서 선언한 변수는 블록을 포함하는 함수 내부 모든 곳에서 접근할 수 있습니다. 예를 들면 다음과 같다. function foo() { var a = true; if(a) { var b = 2; } console.log(b); // '2' 정상출력 } 따라서 대부분의 언어는 일반적으로 변수가 처음 사용되는 지점에서 선언하는 것이 가장 좋지만, 자바스크립트에서는 블록 유효범위를 갖지 않기 때문에 함수에서 사용하는 모든 변수를 함수의 첫 부분에서 선언하는 것이 좋다... 나는 그 동안 자바스크립트에서도 일반적인 방식대로 변수가 처음사용..