IT & Mobile

ExtJS:  개인적으로 느낀 느낌은 .. 조직도 가 잘 구현되어 있는 JS이다.

예제:  http://dev.sencha.com/deploy/ext-4.0.0/examples/#sample-3

기본: http://rhio.tistory.com/240

        http://rhio.tistory.com/350 

Sencha Touch: REF-SITE

Sencha Touch는 Mobile Web Application 개발을 위한 JavaScript Framework 입니다. Mobile에 최적화된 기능을 탑재하고있으며 폰과 태블릿 기기를 위한 Framework 입니다. Sencha Touch는 ExtJS 개발사의 Framework이며 JavaScript, CSS, HTML 등 순수 웹 기술만으로 네이티브 스타일을 표현할 수 있도록 함.

javascript관련 질문들:

javascript에는 function statement와 function expression이 존재한다.

비슷하지만 약간의 차이가 난다.

<Function>

  - function expression: var x = function fname(){}   (fname is optional) 

 => 이걸로 싱글턴 만들수 있다. class만들고 싱클턴 만드는 거 보다 less expensive.

  - function statement:   function fname(){}

<기타>

  - javascript 에 {blocks}  는  scope을 가지지 않는다. 

<슈도 파라미터 2가지>

  - arguments : parameter와 밀접한 관계가 있으므로, read-only로 사용하는 게 좋다.

       일종의 array로 최근(ES5)에 .reduce 등이 소개되었다. 
         arguments.length

         arguments[i]

  - this : function 내에서 멤버변수를위한 public 키워드처럼 동작하기도 하며, (이건 아래2번)

1. reference to the object of invocation. 

2. allows to know the concerned Object

3. allows single function object to service many functions ?

4. key to prototype inheritance

Function.prototype.bind를 통해 this를 강제로 할당 할 수 있다.

<prototype이란>

All JavaScript objects inherit the properties and methods from their prototype.

Allows you to add properties and methods to an object 

we can inherit using prototype. and by overriding construct(). => prototype is copied.

<function관련 Form종류들>

  - New폼:      new functionObject() 

  - function폼: functionObject(arg) 이 경우, var that = this; 많이 사용. inner function이 outer를 접근하기 위해서..
                     (왜냐면 자체 this가 있기 때문)

  - method폼:  functionObject(arg).method()

  - apply폼:    apply()  form  ,   유사한것으로 call도 있는데, apply는 (this,array)  call은 (this, a,b,c : each object of array)가 전달된다.

this 참고사이트:  http://mobicon.tistory.com/189  

유투브:   15분-this,  30분-closure  (English)

javascript에서 hoisting이란 

 변수나 함수를 var 로 선언하기 전에도 사용할 수 있다는 의미이다.  참고사이트

(global함수의 경우는 어디서나 사용할 수 있으므로 hoisting이 아니다.)

참고사이트:영어

In JavaScript,  a variable can be used before it has been declared.

hoisting이 왜 중요한가?

==> 크드가 잘 돌아가더라도 hoisting이 동작한 것일 수 있기 때문에, hoisting을 알아두는 것이 각종버그를 방지할 수 있다.

strict mode : "use strict";  를 사용하면  hoisting을 방지할 수 있다. (꼭 선언 후 사용하는 모드)  w3schools_js

(팁: 크롬으로 javascript 개발시 F12 키가 debug모드이다 :   메뉴엔 Ctrl-Shft-J)

JavaScript의 객체 상속도를 잘 나타낸 그림은 다음과 같다.  참고사이트:devbox

DOM구조에서 거의 모든 object들이 Node를 상속받아서 만들어 졌다고 보면된다.

그런데 개발시에는 node API를 쓰면 필요없는 tag등이 한번씩 나오는 경우가 있어서

위한 children() 함수를 더 많이 쓰게 된다. 

<많이 쓰는 코드>

    document.getElementById('aa').children  -> HTMLCollections 를 리턴함.

    (document.getElementByxxx부터 해서,  Element를 특히 많이 씀)

    document.getElementById('aa').children.item(i)  --> Element 리턴.

jquery의 경우는 : $('#aa')[0].childNodes[0].nodeValue;

  $($('h1').contents().get(0)).text(); //.get(0)=[0]

  $('h1').contents().each(function() {
          if(this.nodeType == 3) { }

    removeChild(e) 

    appendChild(e)

    document.createElement('div')

참고사이트: Javascript 재입문

parseInt( "11", 2) = 3

NaN : Not a number    

Infinity : 무한대   1/0 = Infinity

1==true : true   (type이 오토케스팅 됨)

1===true: false  (===: type 강제변환 방지: type까지 비교함. )

var names;   //names == undefined임.

  이 때, !names == !undefined  //둘다 true임. 

setTimeout(func, 100) //0.1초 후 실행.

setInterval(func,100)  //0.1초씩 반복

for (var i in a)  //a[i]사용가능,   var a=["dog","cat","chicken"]

<주의>

var z = 0.1 + 0.2;  //z=0.300....4   모든 수가 64bit float이라 계산에 오류발생 가능.

javascript는 head나 body에 모두 사용가능하다.

==의 반대말은 !=  ( <>아님)

javascript는 당근 case Sensitive하다.

<JS object>

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};  ==> prototype기반 function보단 사용용도가 약하지만, JSON은 큰 장점.

<array>

[1,2].concat([2,3]);  //Array.concat => [1,2,2,3]  혹은 arrA.concat(arrA)

[2,3,4].join()   // toString.. "2,3,4"

<기타>

navigator.userAgent;

navigator.appName ;  브라우저 name

window.btoa("abc") //=> base64 encoding.

<< My experience >>

new window['Pattern'+ i]()           //= new Pattern1 ~ new Pattern6

apply(obj, [a,b])  or   call(obj, a,b)   // 0bj->this, (a,b)   this chapter 참조.  

<key event>

document.onkeydown=checkKey;

function checkKey(e){

  if(e.keyCode=='37'){  //left Key, 38:up, 39:right, 40:down

     alert('left');

  }

}

클로져에 대해서 나름대로 정리해보면,

아래와 같은 함수에서 MyClass을 outter함수라고 부를때,

내부 함수 (gettitle)가  outter의 지역변수를 계속 사용할 수 있다는 개념.  

(javascript의 initialize비용이 비싸므로, closure를 이용해서 inner함수 안에서 if(!undefined) define을 할 수 있다.)

 ==> Point: 외부함수가 종료된 이후에도 사용할 수 있다.

var that=this 로 해서, this도 많이 사용한다고 한다. 이렇게 안하면 this가 전역변수인 window를 나타낼 수 있기 때문...

function MyClass(_title){

  var title=_title;

  return{   //json스타일 객체를 return.

     getTitle:function() { return title;},

  }

}

g=MyClass('ggg');

m=MyClass('mmm');

alert(g.geTtitle());   //m.getTilte()도 잘 동작.

참조: devbox

      Nonblock

1. Web, OSGI  를 설치한다. (for Web,  install new software 에서)

  참고사이트: http://fishbear.tistory.com/2

2. JSDT 를 설치. (for JS,  eclipse marketplace 에서)

   - jsdt for jQuery 

   - angularJS eclipse(0.10.0?)

   - jsdt for ExtJS (1.7?)

속성 js Lib에서 jQuery등 추가하고..( ECMA, jQuery, ExtJS..)

$('head').   (점찍고 Ctrl+Enter로 확인)

javascript에서의 상속은 일반적인 OO와 다르다.

그 이유는 javascript가 OO 언어가 아니고, 함수(prototype)기반 언어라서 그러하다.

대신, prototype과  prototype.constructor를 치환하는 방법으로 상속이 구현 가능하다.

<<예제>>

    function AjaxBasic(){

        if ( window.XMLHttpRequest){

            this.xhr = new XMLHttpRequest();

        }else{

            console.log("NO XHR support maybe ~ IE6");

            return;

        }

        this.xhr.onreadystatechange=function(){

            if (ajaxObj.xhr.readyState==4 && ajaxObj.xhr.status==200)

                document.body.innerHTML=ajaxObj.xhr.responseText;

        }

        //// method..  run()

        this.run = function(){ 

            this.xhr.open("GET", "test_data.txt", true);

            this.xhr.send();

        }

    }

    function MyAjax(){

        this.run = function(fileUrl){

            ajaxObj.xhr.open("GET", fileUrl, true);

            ajaxObj.xhr.send();

        }

    }

   ///Inherit =  prototype + constructor

    MyAjax.prototype = new AjaxBasic();

    MyAjax.prototype.constructor = MyAjax();