'분류 전체보기'에 해당되는 글 168건

  1. 2011.12.07 자바스크립트 함수 2
  2. 2011.12.07 자바스크립트 함수 1 1
  3. 2011.12.05 자바스크립트 변수 12
  4. 2011.11.24 Javascript new 단항 연산자의 객체 인스턴스 생성 프로세스 1
  5. 2011.11.24 Javascript Statement
  6. 2011.11.24 Javascript expression 6
  7. 2011.11.24 Javascript Literal이란? 5
  8. 2011.11.21 동기와 비동기 차이점

자바스크립트 함수 2


자바스크립트 언어는 설계상 클래스 라는 계념이 존재하지 않지만, 상황에 따라
함수가 클래스를 나타내기도 합니다.

"즉, OOP 언어의 클래스 계념이 어느정도 존재 한다고 볼 수도 있습니다."


아래 예제를 보시겠습니다.

  1. function x(){
  2.  
  3.     this.x = 1;
  4.     this.y = 2;
  5. }
  6.  
  7. alert(typeof new x()); // object
  8. alert(new x().x); // 1
  9. alert(new x().y); // 2


1. x 함수 객체가 생성 됩니다.

2. x 함수 객체의 인스턴스 맴버 x, y를 추가 합니다.
 

3.  typeof new x() 의 데이터 타입은 object가 반환됩니다.

4.   new x().x 객체의 인스턴스 맴버  x값 1을  반환합니다.

5.   new x().y 객체의 인스턴스 맴버 y값 2을 반환합니다.  




마치 타 언어의 클래스 처럼 new 연산자와 맴버가 설계된 생성자를 통해 객체를 생성하지만, 유사성만 가질 뿐 앞서 말했던것처럼 자바스크립트는 클래스가 존재 하지 않습니다.

즉, "자바스크립트"에서 객체는 단순히 "key/value"로 구성되며, 언제든 생성하고 변경할 수 있습니다.




자바스크립트 함수 1


"자바스크립트" 언어 에서 함수는 객체입니다.

이유는 아래와 같습니다. 

 

  1. alert(typeof function() { return this; }); // function
  2. alert(typeof new Function('', 'return this')); // function
  3.  
  4. alert(function() { return this; }.constructor); // Function()
  5. alert(new Function('', 'return this').constructor); // Function()

 

typeof function() { return this; }  와  typeof new Function('', 'return this') 코드 모두 함수 객체를 생성한다는 것을 알 수 있습니다.


즉, function() { return this; }.constructor  와   new Function('', 'return this').constructor의 생성자 함수는 Function()이며, 둘다 함수 객체 라는 것을 다시
한번 알 수 있습니다. 


두 객체 생성 방식의 차이점으로는 첫번째 함수 객체는 암묵적으로 생성되었고 두번째 함수 객체는 명시적으로 
new 연산자를 통해 생성되었다는 것입니다.

자바스크립트 변수


아래는 자바스크립트 실행 시 변수 선언 및 정의에 대한 프로세스 입니다.


1. 자바스크립트 실행 시 모든 전역 변수(x, y)가 선언 됩니다.


- 여기서 실행 시 라는 의미는 x  전역변수 선언문인 "var x ;'" 까지 언어처리가
(인터프
리터) 되지 않았을 경우를 의미 합니다.
(코드 상 1 ~ 2 라인의 alert(x), alert(y)에 해당 합니다.)

2. "자바스크립트"는 선언만 되고 정의되지 않은 변수는 모두  "undefined" 를 참조
합니다.
(즉, 아래 결과처럼 모두 "undefined" 를 출력합니다.)

  1. alert(x); // undefiend
  2. alert(y); // undefined
  3.  
  4. var x;
  5. alert(x); // undefiend
  6. var y;
  7. alert(y); // undefined
 



var 선언문 없이 선언된 암묵적 전역변수는 변수인가?


  1. alert(x); // undefiend
  2. alert(y); // undefined
  3. alert(z); // ?
  4.  
  5. var x;
  6. alert(x); // undefiend
  7. var y;
  8. alert(y); // undefined
  9. z;
  10. alert(z);


위 코드와 같이 총 3개의 전역변수(x, y, z)가 있습니다.

하지만 x, y 와는 다르게 z는 var 선언문이 없습니다.


이 같은 전역변수를 보통 [암묵적 변수] 라고 합니다.

그리고 이런 경우 3번라인의 alert(z);는 // 'z'가 정의되지 않았다는 에러가 발생합니다.


이유는 x, y 변수와는 달리 z는 var 선언문으로 선언되지 않았으며, 즉, 자바스크립트

실행시 미리 선언되지 않기 때문입니다.



위같은 에러를 피하기 위해서는 아래와 같이 코드를 작성해야 합니다.


  1. z = undefined;
  2. alert(z);

즉, 위와 같이 암묵적 변수에 접근하기 위해서는 변수에 값을 정의 후 접근해야 에러가

나지 않습니다.




그럼 "암묵적 변수"에 대한 더 자세한 내용을 알기 위해 다음 예제를 보시겠습니다.



  1. alert(x); // undefiend
  2. alert(y); // undefined
  3.  
  4. var x = 'x';
  5.  
  6. alert(x); // undefiend
  7. alert(window.x); // x
  8. alert(window['x']); // x
  9. alert(this.x); // x
  10.  
  11. var y = 'y';
  12. alert(y); // y
  13. alert(window.y); // y
  14. alert(window['y']); // y
  15. alert(this.y); // y
  16.  
  17.  
  18. z = 'z';
  19. alert(z); // z
  20. alert(window.z); // z
  21. alert(window['z']); // z
  22. alert(this.z); // z
  23.  
  24. delete x;
  25. delete y;
  26. delete z;
  27.  
  28. alert(typeof x); // string
  29. alert(typeof y); // string
  30. alert(typeof z); // undefined



위 코드와 같이 이번 예제에서는 x, y, z 모든 변수가, 전역객체의 프로퍼티로 접근이

가능 합니다.


하지만 25 ~ 27라인의 결과를 보십시오? 뭔가 이상하지 않으신가요?


분명, 21 ~ 23라인에서 delete 연산자로 x, y, z를 모두 제거 했지만

결과를 보면 z를 제외한 x, y 2개의 변수는 제거 되지 않았습니다.



이런 결과가 나오게된 이유는 몰까요?


먼저 delete 연산자의 정의를 살펴 보겠습니다. 

delete 연산자는 객체의 속성 혹은 배열변수의 요소를 제거하는데 사용된다.


즉, delete 연산자는
객체의 프로퍼티배열변수를 제거하는
연산자 입니다.


x, y 변수도 전역 객체의 프로퍼티로 접근은 가능 하지만 엄밀히 말하자면 delete 연산자로

삭제 되지않기 때문에 객체(window)의 프로퍼티로는 볼 수 없습니다.


반대로 z는 일반 변수(x, y) 처럼 자바스크립트 실행 시 선언되지 않으며,

delete 연산자로 제거 되기 때문에 전역변수가 아닌 객체(window)의 프로퍼티로 봐야

합니다.



Javascript new 단항 연산자의 객체 인스턴스 생성 프로세스


function create_object(){

    var private_name = 'private';
    this.public_name = 'public';
}


var newObject = new create_object();

alert(newObject.private_name); //undefined
alert(newObject.public_name); //public



1. create_object 함수객체를 선언 및 정의한다.

2. create_object 함수객체안에 지역변수(private_name)와 해당 this의 프로퍼티(this.public_name)를 선언 정의한다.

3. 단항 연산자 new 뒤에 함수객체(create_object)가 오게되면 new는 어떤 객체(this)를 만들어 내부적으로 생성자(create_object)인수(arguments)로 넘겨준다.

- 여기서 생성자(create_object)란?

해당 함수객체(create_object)의 인스턴스를 new 연산자와 함께 구성하는 역활을 담당하기 때문에 기능상 의미로 생성자라 부른다.

create_object는 함수객체 이며 동시에 create_object는 클래스의 생성자 이기도 하다.

4. 첫번째 alert(newObject.private_name)의 결과가 undefined인 이유는 JS엔진은 create_object 클래스의 지역변수(private_name)class의 private와 같은 변수로써 생성자로 만들어진 인스턴스에서 접근할수없다.

5. 두번째 alert(newObject.private_name)의 결과가 'public'인 이유는 해당 지역변수(private_name)와는 다르게 생성자로 만들어진 인스턴스로 인해 접근가능하다.

Javascript Statement

Statement란? 단어뜻: [성명, 진술, 서술]


1. Expression Statement (표현문)

자바스크립트에서의 문장끝에 오는 ;(세미콜론[할당문])

2. Block Statement (복합문)

흔히 블록({})이라 불리는 이 복합문은 표현문의 집합입니다.
(이 블록은 하나의 문장처럼
사용되기 때문에 이 또한 문장입니다.)



  1. {
  2.     표현문;
  3. };
  4.  
  5.  
  6. {
  7.     var i = 0;
  8.     alert(i); // 0
  9.  
  10.     {
  11.         var i = 1;
  12.         alert(i);   // 1
  13.     }
  14.  
  15.     alert(i); // 1
  16. };


1.
바깥쪽 블록의 전역변수 i가 선언되고 안쪽 블록의 전역변수 i가 선언된다.


2. 바깥쪽 블록의 전역변수 i에 0이 정의되고 안쪽 블록의 전역변수 i에 1이 정의된다.

3. 안쪽 블록의 alert(i)는 1되고 바깥쪽 블록의 alert(i)도 1 된다.


  1. var i = 2;
  2. (function()
  3. {
  4.     alert(i); // undefined
  5.    
  6.     var i = 2; // 2
  7.     alert(i);
  8.  
  9.     if (true)
  10.     {
  11.         var i = 3;
  12.     }
  13.  
  14.     alert(i); // 3
  15.  
  16. })();


1. 전역변수 i가 선언되고 2가 정의된다.

2. 최초 alert(i)의 반환값이 "undefined" 가 나오는 이유는 "자바스크립트"의 유효범위는 Function 내부에서만 존재 하기 때문이며, 즉, 함수 내부 아래 지역변수로 i가 선언 되었기 때문입니다.

3. if문 내부에서 지역변수 i가 선언되고 3이 정의된다.

4. 마지막 alert(i)의 반환값이 "3"이 나오는 이유는 앞서 말했듯이 "자바스크립트"의
유효범위는 Function 내부에서만 존재 하기 때문입니다.



3. if, else, else if (조건문)


  1. if (true) {
  2. }
  3. else if (false) {
  4. }
  5. else{
  6. }
 

모든 if문 즉 조건문은 타 언어와 별반 다르지 않아 넘어간다.
  
  1. var is = true;
  2. switch (is){  
  3. case true :    
  4.     alert(true);      
  5.     break;
  6. case false :
  7.     alert(true);      
  8.     break;
  9. default :
  10.     alert(true);  
  11.     break;
  12. }


자바스크립트에서의 switch 비교문이 타 언어와 다른점은 비교값으로 정수 리터럴뿐만
아니라 모든 문자열이올수 있다.




4.
while, do while



  1. var sum = 0;
  2. while ( sum < 100 ) {  
  3.     sum = sum + 1;
  4. }
  5.  
  6. alert(sum); // 100
  7.  
  8.  
  9. var sum = 0;
  10. do {  
  11.     sum = sum + 1;
  12. } while ( sum < 100 );
  13.  
  14. alert(sum); // 100


5. for, for in



  1. var length = 10;
  2. for (var i = length; i--;){
  3.     alert(i); // 9 8 7 6 5 4 3 2 1 0
  4. }
  5.  
  6. var arr = [1];
  7. for (var n in arr) {
  8.     alert(arr[n]); // 1  
  9. }
  10.  
  11.  
  12. for (var n in document.body.childNodes){
  13.     alert(n); // lenght 0
  14. }

label, break, continue


break :


  1. for (i = 0; i < 10; i++) {
  2.     // i의 값이 5가 되면 순환문을 빠져나간다.
  3.     if (i === 5) break;
  4. }


continue :


  1. for (i = 0; i < 10; ++i) {
  2.     // i가 2와 같다면 continue문을 만나 아래 표현식을 생략하고 다음 i부터 순회를 시작 합니다.
  3.     if (i == 2) continue;  
  4.     alert(i);
  5. }

label :


  1. outter:
  2. for (i = 0; i < 10; i++) {
  3.     inner:
  4.     for (k = 0; k < 10; k++){
  5.         if (k === 5) break outter;
  6.  
  7.         alert(i);
  8.     }
  9. }
1. 바깥쪽에 for문에 outter label를 배치하고 안쪽 for문에 inner label을 배치한다.

2. 안쪽 for문의 조건문 if 조건식이 true라면 바깥쪽 for문 label인 outter for문의 순회를 종료시킨다.

3. alert(i)는 0이 다섯번 찍히고 종료한다.

Javascript expression



Expression(표현식)이란?

정의: 자바스크립트가 파싱하여 값으로 출력할 수 있는 모든 구문들을 의미 합니다.


1. 세부지정이나 호출


  1. . [] ()

2. 산술 연산자

  1. 1 + 11 - 11 * 11 / 1
 
3. 논리연산자


많은 언어에서 논리 연산자는 좌우 항으로 불리언을 기대하며 결과값으로 불리언을 가집니다.

하지만 자바스크립트의 &&(AND)연산자는 첫번째 피연산자가 거짓(false)일 경우,
첫번째 피연자의 값을 가지고 그렇지 않은경우는 두번째 피연산자의 결과값을 갖는다.


  1. alert(1 !== 1 && 0); // false(좌측 피연산자 1 !== 1(false))
  2. alert(1 === 1 && 0); // 0(좌측 피연산자 1 === 1(true))
  3. alert(0 && 1); // 0(좌측 피연산자 0(false))
  4. alert(1 && 0); // 0(좌측 피연산자 1(true))
  5.  
  6. var div = document.createElement('div');
  7. alert(div && div); // object(좌측 피연자 div(true));
  8. alert(!div && 0); // false(좌측 피연산자 !div(false));


4. 동등연산자


  1. ['==']:
 

두 데이터값에 타입이 다르더라도 값이 일치하면 true를 반환한다.


  1. null == undefined //true
  2. 3 == '3' //true
  3. 1 == true //true
  4. 0 == false //true
  5. null == undefined //true
  6. {a: 1} == {a: 1} //false(서로다른객체)
  7. var obj1 = obj2 = {a: 1}
  8. obj1 == obj2 //true(같은객체를 참조함
  9. (function 내부라면 obj1은 지역변수 obj2 전역변수로 선언))

두 데이터값에 타입이 같고 값이 일치하면
true를 반환한다.



  1. null == undefined //false
  2. 3 == '3' //false
  3. 1 == true //false
  4. 0 == false //false
  5. null == undefined //false
  6. {a: 1} === {a: 1} //false(서로다른객체)
  7. var obj1 = obj2 = {a: 1}
  8. obj1 === obj2 //true
  9. (같은객체를 참조함(function 내부라면 obj1은 지역변수 obj2 전역변수로 선언))


5. 관계 연산자
 

  1. >, <, >=, <=

6. Instanceof 연산자

해당 객체의 생성자 일치하면 true를 반환한다.

  1. {} instanceof Object //true
  2. {} instanceof Array //false


7. 단항 연산자

  1. delete 연산자: delete window['value'];
  2. new 연산자: new function(){;}
  3. typeof 연산자: typeof 1
  4. + : +=
  5. -:-=
  6. !:!=
 

8. 삼항 연산자

  1. ?: --> var isLogin = isLogin === true ? true : false
 



Javascript Literal이란?



Literal(데이터값)이란?


정의: 모든 데이터 타입에 들어가는 데이터값 그 자체.



1. Integer Literal?


자바스크립트에서 정수는 -9007199254740992(-253)에서 9007199254740992(253) 사이에 있는(이 두 수를 포함하여) 모든 정수를 표현할 수 있다.

단, 비트 단위연산자(bitwise operator)는 -2147483648(-231)에서 2147483647(231-1)에 이르는 32비트 정수에 대해서만 작동한다.


// 앞서 말했듯이 해당 데이타 타입이 가지는 "유한 수" 보다 크거나(+) 작은 값(-)을 할당 시 JS는 그 유한 수 이상/이하를 출력하지 못한다.
console.log(parseInt(-9007199254740992 + -1, 10));
console.log(parseInt(9007199254740992 + 1, 10));


2. Floating point Literal?

자바스크립트에서에서 실수는 정수 부분과 소수점, 소수점 이하 부분으로 표현된다.



3.14
2345.789
.33333333333333
6.02e23                // 6.02 ×× 1023
1.4738223E-32      // 1.4738223 ×× 10-32


3. String Literal
?

자바스크립트에서 문자열은 0개('') 또는 하나 이상의 Unicode 문자들이 작은따옴표('') 

혹은, 큰따옴표("")로 둘러싸인 시퀀스다



"" // 빈 문자열: 문자가 없다.
'testing'
"3.14"
'name="myform"'
"wouldn't you prefer O'Reilly's book?"
"This string\nhas two lines" // 두 줄짜리 문자열
" π is the ratio of a circle's circumference to its diameter"
.



4. Function Literal이란?


자바스크립트는 함수를 정의하는 "함수 리터럴" 문법도 제공한다.



var literal = function(x) { return x; }


이름 없는 함수(익명함수)를 프로그램 내에 리터럴 형태로 포함시킬 수 있게 한 최초의 언어인 "Lisp" 프로그램 언어를 기리는 의미에서, 이러한 방식으로 정의된 함수를 람다함수(lambda function)라고 부른다.



함수 리터널을 구현하는 또다른 방식.


var literal = new Function("x", "return x;");





5. Object Literal이란?



자바스크립트는 객체를 생성하고 프로퍼티를 지정하는 객체 리터럴 문법을 제공한다.

1. 블록안에 객체 Property를 콜론(:)으로 구별한 (key: value)형태의 값을 정의하고 각각의 Property를 쉼표(,)로 분리한다.


var obj =
{
    x: 2.3
    , y: -1.2
};

2. 객체 리터널을 아래와 같이 자바스크립트만의 표현식을 사용할 수 도 있고 중첩된 객체

활용
가능하다.


var obj =
[
    {x: {x: 2.3, y:-1.2}, y: {x: 2.3, y:-1.2}}
    , {x: {x: 2.3, y:-1.2}, y: {x: 2.3, y:-1.2}}
    , {x: {x: 2.3, y:-1.2}, y: {x: 2.3, y:-1.2}}
];



3. 또한 아래와 같은 2가지 형태의 리터널 정의도 가능하다.



var obj = new Object()
obj.name = 'test';
 
var fnObj = new function(){ this.name = 'test'; return this };



6. Regexp literal(정규 표현식 리터널)이란?


var regex = /[a-z]/g;




7. Array Literal이란?

기본 형태:

var array = new Array(1, 2, 3);


확장 형태:


var array = [1, 2, 3];




동기와 비동기 차이점


동기:
 

SYSTEM: 명령이 끝날때 까지 사용자에게 제어권을 돌려 주지 않는다.
 

WEB(기본 HTTP 요청): 서버 응답이  끝날때 까지  사용자에게 제어권을 돌려 주지 않는다.


비동기:
 

SYSTEM: 명령이 끝나기전 사용자에게 제어권을 돌려 준다.
 

WEB(XMLHttpRequest 요청): 서버 응답이 끝나기전 사용자에게 제어권을 돌려 준다.



위의 설명과 같이 동기식 과 비동식을 구분하는것은 간단하다.

어떤 루틴이 끝날때까지 제어권이 돌아오지 않으면 동기식 그렇지 않으면 비동기식인 것이다.

prev 1 ··· 14 15 16 17 next