## 소스
http://code.jquery.com/jquery-1.11.0.js
http://jsbeautifier.org 에서 정리
## 전체 구조
## functions and prototypes
### init
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;
### Tween.prototype.init
Tween.prototype.init.prototype = Tween.prototype;
### Sizzle
### setFilters
### jQuery.fn.init
### jQuery.Event
### Tween
자바스크립트에서 어렵다고 생각하는 개념이 hoisting 입니다.
![초급자를 위해 준비한 인프런 [데브옵스 · 인프라] 강의](https://okdevtv.com/images/inflearn-react-api.webp)
function abc() {
var a = 'bbb';
console.log(a) // ---- 1
function c() {
console.log(a); // --- 2
(function() {
console.log(a); // --- 3
a = 'ccc';
})();
var a;
console.log(a) // ---4
}
function d() {
console.log(a); // --- 5
// var a = 3;
}
c();
a = 'ddd';
d();
};
MacBook-Pro:~ kenu$ node --version -bash: node: command not found MacBook-Pro:~ kenu$ brew link node Linking /usr/local/Cellar/node/0.10.24... Warning: Could not link node. Unlinking... Error: Could not symlink file: /usr/local/Cellar/node/0.10.24/lib/node_modules/npm/node_modules/sha/node_modules/readable-stream/zlib.js Target /usr/local/lib/node_modules/npm/node_modules/sha/node_modules/readable-stream/zlib.js already exists. You may need to delete it. To force the link and overwrite all other conflicting files, do: brew link --overwrite formula_name To list all files that would be deleted: brew link --overwrite --dry-run formula_name MacBook-Pro:~ kenu$ brew link --overwrite node Linking /usr/local/Cellar/node/0.10.24... 1190 symlinks created MacBook-Pro:~ kenu$ node --version v0.10.24 MacBook-Pro:~ kenu$ npm --version 1.3.21
http://blog.jquery.com/2014/01/24/jquery-1-11-and-2-1-released/
하이라이트
1. 클래스 변경 시 성능향상
2. 세세하게 모듈화된 jQuery 커스텀 빌드
3. 시작 오버헤드 낮춤
4. npm 통해서 배포 https://npmjs.org/package/jquery/
npm install jquery 로 설치 가능
npm install jquery@1.11
5. bower 통해서 배포
bower install jquery 로 설치 가능
6. 기본 배포시 map 호출 제거
image from: http://teerapuch.wordpress.com/2011/09/13/intro-jquery-วิธีเริ่มต้นกับ-jquery/
프로그래밍 교육 처음에 가장 넘기 힘든 것이 개발환경을 구축하는 것입니다. 자바의 경우 JDK 설치하고, CLASSPATH 설정하고, 등등등
그래서 저는 자바스크립트가 브라우저로 쉽게 시작할 수 있는 것이라 생각하고 있었습니다.
그런데 진짜가 나타났습니다.
개발환경을 자동 지원해줍니다. 자바스크립트의 경우, 크롬브라우저가 바로 실행되고, 자바는 애플릿으로 바로 뜹니다. 안드로이드는 이클립스가 없이도 SDK만 설치해서 연결하면 됩니다. 현재는 3가지 언어를 지원합니다.
자체적으로 Processing.js 라는 언어를 사용하고 있는데, 몇 권의 서적도 나와있습니다.
"Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production."
프로세싱은 프로그래밍 언어, 개발 환경, 온라인 커뮤니티입니다. 2001년부터, 프로세싱은 기술을 이용한 시각 예술과 시각화 분야에서 소프트웨어 역량을 진흥시켜 왔습니다. 초기에 소프트웨어 스케치북으로 사용되거나, 시각화 영역에서 컴퓨터 프로그래밍 기초를 가르치기 위해 만들어졌지만, 프로세싱은 전문가들을 위한 개발 도구로 진화했습니다. 오늘날에는, 프로세싱을 사용해서 배우고, 프로토타이핑하고, 제품을 만드는 수많은 학생, 예술가, 디자이너, 연구원, 동호회원이 있습니다.
다음과 같은 특징이 있습니다.
윈도우, 맥, 리눅스 OS를 지원합니다.
jdk가 설치되어 있지 않아도, java applet이 실행됩니다. 배포 패키지에 java가 들어가 있기 때문이죠.
processing.exe를 실행하면 다음과 같은 스플래시 화면이 뜹니다. 만든 분 이름이 보이네요. Ben Fry, Casey Reas. 오픈 프로젝트이고요.
이클립스보다 메뉴가 아주 단순합니다. 툴바의 아이콘이 실행, 정지, 새파일, Open, Save, Export Application 입니다. 우측에 작업중인 언어가 Java로 표시되어 있습니다.
하지만 줘도 못먹는 화면입니다. 실행 버튼 클릭하고 아래 콘솔을 보면 null (멍~~~)해집니다. 당.황.하셨어요~~ 모드죠.
그리고, 어디서 많이 봤다 싶었는데, 아두이노의 개발환경과 똑같습니다.
팁을 하나 알려드리자면, 메뉴에서 File > Examples... 가 있습니다.
여기에 있는 코드를 보고 학습을 하면 될 것입니다.
개발 도구의 우측에 Java 라고 쓰여진 버튼을 확장 시켜서 다른 언어 모드를 추가할 수 있습니다.
안드로이드, 커피스크립트, 자바스크립트, PDE X, Tweak Mode 를 추가할 수 있습니다.
새로운 개발 플랫폼, 흥미롭습니다.
하나 더,
프로세싱을 통해서 만들어진 것들의 전람회입니다.
http://www.processing.org/exhibition/
node.js는 브라우저에서 동작하지 않기 때문에 디버깅을 돌리기 위해서는 도구가 필요합니다. 이클립스에 node.js 플러그인을 깔아서 하는 방법이 있고, node-inspector 도구를 이용하는 방법 두 가지가 있습니다. node-inspector는 크롬브라우저를 독립적으로 띄워서 크롬 인스펙터처럼 디버깅 할 수 있게 합니다.
설치
npm install -g node-inspector
node-inspector 명령이 위와 같이 설치되면 node.js 로 만들어진 프로그램을 디버그 가능한 모드로 실행합니다. 다음과 같이 node.js를 두 가지 디버그 모드로 실행할 수 있습니다. 5858 포트를 엽니다.
디버그 모드 실행
다른 명령창에서 node-inspector 를 실행합니다.
node-inspector
크롬브라우저가 따로 뜹니다.
http://localhost:8080/debug?port=5858 주소를 이용합니다.
브레이크포인트를 잡으면 실행시 디버그가 가능합니다. 변수의 메모리를 확인할 수 있고, Console탭을 통해서 this 등의 키워드가 가르키는 내용도 확인이 가능합니다. 실행된 변수 위에 마우스를 올리면 내용을 풍선도움말로 띄워서 보여줍니다.
만약 디버그모드로 떠 있는 node.js 가 없다면 다음과 같은 메시지를 보게 됩니다.
전체적인 구조는 다음과 같습니다.
관련 링크:
node.js debug:
http://nodejs.org/api/debugger.html
node-inspector
https://github.com/node-inspector/node-inspector#node-inspector
adobe가 macromedia를 인수한 뒤에 웹 생태계에 많은 영향을 주고 있습니다.
요즘 페북에서 많이 언급되는 개발용 에디터가 Brackets입니다.
매우 가볍습니다. 용량은 34메가. 참고로 이클립스 웹 개발용(JavaEE 패키지)은 247메가입니다. 1/7 사이즈입니다.
홈페이지에서 얘기하는 Code the Web은 웹 개발용 편집기라는 의미가 담겨 있습니다.
brackets의 소스는 github에서 오픈소스로 개발되고 있습니다. adobe 에서 관리하는 프로젝트입니다. https://github.com/adobe/brackets
File > Live Preview (단축키 Ctrl+Alt+P)를 통해서 HTML/CSS/JS의 라이브 편집이 가능합니다.
파일을 저장하지 않아도 크롬브라우저에서 바로 확인이 가능합니다.
자바스크립트 파일 편집할 때는 JSLint가 바로 적용됩니다. 저장할 때마다 JS의 코드를 검사해서 알려줍니다.
JSLint에서 보이는 에러를 줄이기만 해도 코드가 예뻐집니다.
윈도우, 맥, 리눅스에서 모두 사용 가능하기 때문에 sublime text와 경쟁이 될 것 같습니다. 오픈소스로 만들어지는 것이기 때문에 발전속도가 꽤 빠를 것으로 예상됩니다.
자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.
위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.
q: 검색어
apikey: 다음에서 제공받은 apikey
output: 응답결과 데이터 형태 json 또는 xml
callback: JSONP를 위해 필요한 callback 함수 이름
* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP)
브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.
크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.
우선 callbackfn 함수입니다.
function callbackfn(res) { console.log(res); }
그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.
var element = document.createElement('script');
element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";
head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다.
document.getElementsByTagName("head")[0].appendChild(element);
위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.
자바스크립트에서 더하기를 처리하는 방법에 대한 이야기입니다.
http://www.2ality.com/2012/01/object-plus-object.html 문서의 일부를 참고했습니다.
자바스크립트 두 종류의 값
1) 기본형(primitives) : undefined, null, true/false, 숫자, 문자
2) 객체(objects) : objects, arrays, functions
더하기 실행시 세 종류의 값 변환
1) 기본형
2) 숫자
3) 문자열
1) 기본형으로 변환되는 경우
내부적으로 실행되는 함수
ToPrimitive(input, PreferredType?)
1. input이 기본형인 경우, 그대로 반환
2. 다른 경우 input은 객체. obj.valueOf() 호출.
결과가 기본형이면 그것 반환
3. 아닌 경우, obj.toString() 호출.
결과가 기본형이면 그것 반환
4. 이것도 아니면, TypeError 던짐
참고 ECMAScript5.1 섹션9.1
2) 숫자로 변환되는 경우
내부 호출 함수 ToNumber()
1. 인자가 undefined 이면 NaN 반환
2. 인자가 null 이면 +0 반환
3. true는 1, false는 +0
4. 문자열은 문자열에 포함된 숫자를 변환
"324"라면 324
5. 객체라면 ToPrimitive(obj, Number) 호출해서
숫자로 가져온 값에 ToNumber() 적용
참고 ECMAScript5.1 섹션9.3
3) 문자열로 변환하는 경우
내부 호출 함수 ToString()
1. 인자가 undefined 이면 "undefined" 반환
2. 인자가 null 이면 "null" 반환
3. true는 "true", false는 "false" 각각 반환
4. 숫자는 문자열로, 예 "1.765"
5. 문자는 그대로 반환
6. 객체는 ToPrimitive(obj, String) 호출해서
숫자로 가져온 값에 ToString() 적용
참고 ECMAScript5.1 섹션9.8
검증하기 위한 객체입니다.
var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // not a primitive
},
toString: function () {
console.log("toString");
return {}; // not a primitive
}
}code from: http://www.2ality.com/2012/01/object-plus-object.html
그리고 재밌는 더하기의 경우입니다.
