내 잔이 넘치나이다.

함수

함수를 생성할 때는 () -> 형태의 기호를 사용합니다.

예)

randomInteger = (limit) -> 

Math.round Math.random() * limit

함수를 호출할 때는 괄호를 사용할 필요가 없습니다. 하지만 매개변수가 없을 경우에는 반드시 괄호를

사용해야 합니다.

클래스

예)

class Person

constructor: (name, language, region) ->

@name = name

@language = language

@region = region

toString: () ->

return "#{@name} - #{@language} - #{@region}"

list = [

new Person("", "", "")

new Person("", "", "")

]

console.log item.toString() for item in list

프로토타입

상속

객체

예)

person = 

name: "RintIanTta"

language: "JavaScript"

region: "Seoul, KOREA"

console.log person.name, person.language, person.region

괄호와 쉼표는 필요 없지만 반드시 들여쓰기 해야합니다.

범위 객체

[0..2]     => [0,1,2]      // 2 포함

[0...2]    => [0,1]        // 2 포함하지 않음

반복문

예)

for i in [0...10]

console.log "#{i} - Loop"

예)

for i in [9..0]

console.log "#{i} - Loop"

예)

for i in [0..10] by 2

console.log "#{i" - Loop"

예)

for key, value of person

console.log "#{key} - #{value}"

반복 조합 배열

반복 조합 배열은 반복문으로 새로운 배열을 쉽게 생성합니다.

예)

array = for key, value of person

"#{key} - #{value}"

console.log array

예)

array = []

for i in [0..100]

array.push Math.round(Math.random() * 100)

array = for item in array when item % 2 is 0

console.log array

주석

# 한 줄 주석

###

여러 줄 주석

여러 줄 주석

###

함수 호출

console.log 'Hello CoffeeScript'

console.log ('Hello CoffeeScript')

괄호를 입력해도 되고, 입력하지 않아도 됩니다.

변수 선언

number = 20

string = 'Hello CoffeeScript'

var 키워드를 사용하지 않습니다.

문자열

string1 = "Hello #{10+2} CoffeeScript"

string2 = 'Hello #{10+2} CoffeeScript'

큰 따옴표를 사용하면 문자열 내부에 특수기호 #{} 형태의 괄호로 코드를 입력할 수 있습니다.

특수기호를 입력한 큰따옴표는 내부의 값이 계산되어 출력됩니다.

string1 = "Hello" + (10+2) + " CoffeeScript"

string2 = 'Hello #{10+2} CoffeeScript'

조건문

if number %2 == 0

alert "even"

else

alert "odd"

괄호를 쓰지 않지만 반드시 들여쓰기 해야합니다.

비교 연산자와 논리 연산자

and, or

예)

if 0 < number and number < 10

또는

if 0 < number < 10            // 이런 형태의 문법도 가능

alert "o < number < 10"

else

alert "number <= 0 and 10 <= number"

자바스크립트는 원래 대규모 어플리케이션을 개발하고자 만들어진 프로그래밍 언어가 아닙니다.

따라서 다른 프로그래밍 언어와 달리 클래스를 만드는 정해진 방법도 없고 변수 범위가 엉키는 경우도

많습니다.

이러한 문제를 해결하고자 자바스크립트 컴파일 엔진이 만들어졌습니다.

자바스크립트 컴파일 엔진이란 특정한 형태의 프로그래밍 언어로 작성된 파일을 자바스크립트로 

변환하는 프로그램을 의미합니다.

대표적으로 커피스크립트와 MS의 타입스크립트, google의 다트가 있습니다.

커피스크립트는 루비 프로그래밍 언어 형식으로 자바스크립트 컴파일 엔진으로 클래스 생성과

반복 조합 배열, 함수 바인딩 등을 손쉽게 할 수 있습니다.

설치

#] npm install -g coffee-script

#] coffee

coffee>

컴파일 및 실행

#] coffee Basic        // 실행

#] coffee -c Basic   // 커피스크립트 파일 -> 자바스크립트  파일로 컴파일

function()의 default arguments

$(function(){

function args_test(){

// 함수에서 인자값을 받지 않아도 기본적으로 arguments 라는 이름으로 인자를 받는다.

// 배열로 처리하여 받는다.

var args = $.makeArray(arguments);

// arguments 이외의 값은 받지 않는다.

var args = $.makeArray(arg_value);        // 실행 안됨

var ev = args.shift();

alert(ev);

}

$(window).load(function(){

// function에서 인자값을 받지 않아도 값을 넘기면 arguments로 받는다.

args_test('test');

});

})(jQuery);

eval() - 변수를 javascript의 함수처럼 쓰는 명령어 

var i = 1;

str += "document.test.check"+i+".value";

alert(str); // document.test.check1.value

str += eval("document.test.check"+i+".value");

alert(str); // 1

기본 이벤트

textarea 태그의 기본 이벤트는 사용자가 입력한 글자를 출력하는 것입니다.

이벤트 리스너에서 내부 글자를 비워도 기본 이벤트가 실행되면서 입력한 글자(Enter)를 출력합니다.

textarea.onkeypress = function(event){

if (event.keyCode == ENTER && event.shiftKey == false){

this.value = "";

return false;    // 기본 이벤트를 제거합니다. == preventDefault();

}

}

[이벤트 실행 과정] 

이벤트 발생 -> 이벤트 리스너 실행 -> 기본 이벤트 실행

[onKeypress 이벤트의 문제] 

이벤트 발생 -> 이벤트 리스너 실행 -> [글자 제거] - > 기본 이벤트 실행 (EnterKey 출력) 

이벤트 라이브러리

DOM이 준비된 다음에 페이지의 이미지와 스타일시트를 내려받는다.

DOMContentLoaded는 페이지의 이미지와 스타일시트를 내려받기 전에 실행된다.

사용자가 페이지와 상호작용을 하기 전에 항상 DOMContentLoaded가 먼저 호출된다.

모든 브라우저가 DOMContentLoaded 이벤트를 지원하지 않는다. jQuery는 ready() 함수로 기능을 추상화

컨텍스트 변경

브라우저에서 제공하는 addEventListener()를 이용하면 기존의 지역 컨텍스트가 대상 HTML 엘리먼트

컨텍스트로 바뀐다.

jQuery의 proxy() 함수 패턴을 사용한다.

예)$("signinForm").submit($.proxy(function(){ /* ... */ }, this));

이벤트 위임

이벤트 버블링 방식은 일반적으로 자식의 이벤트를 검사할 수 있도록 부모에 리스너를 추가한다.

jQuery의 delegate() 함수에 자식 셀렉터, 이벤트 타입, 핸들러를 넘겨줘서 이벤트를 위임할 수 있다.

예)

// 모든 <li> 엘리먼트에 리스너를 추가하는 방식

$("ul li").click(function(){ /* ... */ });

// 한 개의 이벤트 리스너만 추가한다.

$("ul").delegate("li", "click", /* ... */);

이벤트 위임을 사용하면 동적으로 자식을 엘리먼트에 추가해도 추가한 자식의 이벤트가 이미 있다.

커스텀 이벤트

jQuery에서는 trigger() 함수로 커스텀 이벤트를 발생시킬 수 있다.

예)

// 커스텀 이벤트 바인드

$(".class"). bind on("refresh.widget", function(){});

// 커스텀 이벤트 발생

$(".class").trigger("refresh.widget");

trigger() 함수에 인자를 추가해서 이벤트 핸들러로 데이터를 전달할 수 있다.

$(".class"). bind on("frob.widget", function(event, data){

console.log(data);

});

$(".class").trigger("frob.widget", 5);

커스텀 이벤트와 jQuery 플러그인

사용자가 리스트 항목을 클릭하면 해당 항목에 활성 클래스를 추가하고 다른 항목의 활성 클래스 제거

<ul id="tabs">

<li data-tab="users">Users</li>

<li data-tab="groups">Groups</li>

</ul>

<div id="tabContent">

<div data-tab="users">USERS</div>

<div data-tab="groups">GROUP</div>

</div>

<style>

.active{background-color: #b0c4de;}

</style>

<script type="text/javascript">

$(function(){

$("ul#tabs").tabs("#tabContent");

})(jQuery);

</script>

<script type="text/javascript">

$.fn.tabs = function(control){

var element = $(this);

control = $(control);

element.find("li").bind("click", function(){

element.find("li").removeClass("active");

$(this).addClass("active");

var tabName = $(this).attr("data-tab");

control.find(">[data-tab]").removeClass("active");

control.find(">[data-tab='"+tabName+"']").addClass("active");

});

element.find('li:first').addClass('active');

return this;

};

</script>

수정 -> delegate(), on()

<script type="text/javascript">

$.fn.tabs = function(control){

var element = $(this);

control = $(control);

element.delegate("li", "click", function(){

// 탭 이름을 얻는다.

var tabName = $(this).attr("data-tab");

// 탭을 클릭하면 커스터 이벤트가 발생한다.

element.trigger("change.tabs", tabName);

});

// 커스텀 이벤트를 바인드한다.

element.bind on("change.tabs", function(e, tabName){

element.find("li").removeClass("active");

element.find(">[data-tab='" + tabName + "']").addClass("active");

});

element.bind on("change.tabs", function(e, tabName){

control.find(">[data-tab]").removeClass("active");

control.find(">[data-tab='"+tabName+"']").addClass("active");    

});

// 첫 번째 탭 활성화 - 초기값

var firstName = element.find("li:first").attr("data-tab");

element.trigger("change.tabs", firstName);

return this;

};

</script>

DOM 이외의 이벤트

사용자 이벤트 핸들러 라이브러리를 생성할 수 있다.

발행자/구독자 이벤트 핸들러 패턴 (http://en.wikipedia.org/wiki/Publish/subscribe)

발행자가 특정 채널로 메세지를 발행하면 채널을 구독하는 구독자는 발생자가 새 메세지를 발행했다는

알림을 수신한다.

var PubSub = {

subscribe: function(ev, callback){

// _callbacks 오브젝트가 없으면 새로 만든다.

var calls = this._callbacks || (this._callbacks = {});

// 이벤트 키에 해당하는 배열이 없으면 배열을 만든 다음 콜백을 배열에 추가한다.

(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);

return this;

},

publish: function(){

// arguments 오브젝트를 진짜 배열로 바꾼다.

// var args = Array.prototype.slice.call(arguments, 0);

var args = $.makeArray(arguments);

// 이벤트 이름을 포함하는 첫 번째 인자를 추출한다.

var ev = args.shift();

// _callbacks 오브젝트가 없거나 해당 이벤트의 배열을 포함하지 않으면 반환한다.

var list, calls, i, l;

if(!(calls = this._callbacks)) return this;

if(!(list = this._callbacks[ev])) return this;

// 콜백을 호출한다.

for(i = 0, l = list.length; i < l; i++){

list[i].apply(this, args);

}

return this;

}

};

// 사용 예제

PubSub.subscribe("wem", function(){

alert("Wem!");

});

PubSub.publish("wem");

Person('hohomom');  // undefined

- new 키워드를 이용해 생성자 함수를 호출하면

  컨텍스트가 전역(윈도우)에서 만들려고 하는 인스턴스 전용의 새로운 빈 컨텍스트로 바뀐다.

- this 키워드는 현재 인스턴스를 가리킨다.

- 생성자 함수에서 아무것도 반환하지 않으면 기본적으로 현재 컨텍스트를 가리키는 this를 반환한다.

- 기본형을 제외한 모든 타입을 반환할 수 있다.

예)

var Class = function(){

// 함수를 이용한 싱글톤으로 객체 생성

var klass = function(){ // function klass(){}

this.init.apply(this, arguments);

};

// klass 객체의 prototype 메소드 추가

klass.prototype.init = function(){ alert("p"); };

return klass;

}

var Person = new Class;

// Person을 인스턴스화할 때 호출된다. Person.prototype.init

Person.prototype.init = function(){ alert("c"); };    

// C 출력 - 인스턴스 추가한 함수 있음 (우선 호출 - ?)

Person.prototype.ini = function(){ alert("c"); };    

// P 출력 - 인스턴스 함수 없음 -> 오브젝트 프로토타입 검색

var person = new Person;

클래스 생성 방법 

문법이 복잡하고(?), 실용성도 떨어지며(?), 반복적인것 같다.

때문에 정적, 동적 프로퍼티 목록을 한눈에 파악하기 어렵다.

extend(), include() 사용

var Class = function(){

var klass = function(){

this.init.apply(this, arguments);

};

klass.prototype.init = function(){};

klass.fn = klass.prototype;

klass.fn.parent = klass;

// 클래스에 프로퍼티 추가 - extend

klass.extend = function(obj){

var extended = obj.extended;

for(var i in obj){

klass[i] = obj[i];

}

if(extended) extended(klass)

}

// 인스턴스에 프로퍼티 추가 - include

klass.include = function(obj){

var included = obj.included;

for(var i in obj){

klass.fn[i] = obj[i];

}

if (included) inclded(klass)

};

return klass;

}

extend()는 오브젝트를 인자로 받아 클래스를 만든다.

var Person = new Class;

Person.extend({

find: function(){},

exists: function(){}

});

var item = Person.find();

include()는 프로퍼티를 클래스 함수로 직접 복사하지 않고 클래스의 프로토타입으로 복사한다.

var Person = new Class;

Person.include({

save: function(){},

destroy: function(){}

});

var Person = new Class;

person.save()

클래스 상속과 프로토타입

자바스크립트는 클래스와 인스턴스를 구별하는 언어가 아니라 프로토타입 기반 언어이다.

자바스크립트에서는 새 오브젝트의 초기 프로퍼티를 얻을 때,

템플릿으로 사용할 수 있는 오브젝트인 프로토타입의 오브젝트 개념을 제공한다.

모든 오브젝트는 다른 오브젝트의 프로토타입이 되어 자신의 프로퍼티를 공유할 수 있다.

자바스크립트는 로컬 오브젝트를 검색해서 오브젝트의 프로퍼티를 가져오려고 한다.

로컬 오브젝트에서 프로퍼티를 찾지 못하면 자바스크립트는 오브젝트의 프로토타입을 다시 검색하는

동작을 반복해서 결국 Object.prototype까지 도달한다.

속성을 찾았으면 값을 반환하고 찾지 못하면 undefined를 반환한다.

즉, Array.prototype에 속성을 추가하면 자바스크립트 배열 전체에 영향을 미친다.

예)

var Animal = function(){};

Animal.prototype.breath = function(){

console.log('breath');

}

var Dog = function(){};

Dog.prototype = new Animal;

Dog.prototype.wag = function(){

console.log('wag tail');

}

var dog = new Dog;

dog.wag();

dog.breath();    // 상속받은 프로퍼티