블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
2008. 7. 9. 14:41 Programing/HTML/JavaScript/CSS

JavaScript - JScript - ECMAScript version history

원문 : http://www.webmasterworld.com/forum91/68.htm

(원문을 그대로 카피했습니다)

I recently pulled together a bunch of information about JavaScript support for personal use, and thought it might be a handy reference for others. To start with, it might be good to talk about names. Mucho confusion here.

JAVASCRIPT
Netscape originally called their creation LiveScript. They had a tight partnership with Sun at the time, who had just generated a lot of marketing buzz around Java. Netscape piggy-backed on the buzz by changing the name to JavaScript. However JavaScript is not Java, not at all. But the naming confusion carries on to this very day!

JSCRIPT
Microsoft created their own version of the scripting language, which they call JScript. They made it "roughly" the same so that basic features would be supported cross-browser.

ECMAScript
ECMA is the European Computer Manfacturers Association. Netscape offered JavaScript to the ECMA for standardization in 1996. Netscape and Microsoft then both agreed to support the standards ECMA developed.

With that bit of complication handled,
here's the timeline I researched.

JavaScript 1.0
Netscape 2.0
Mar 1996

JavaScript 1.1
Netscape 3.0
Aug 1996

JavaScript 1.2
Netscape 4.0
Jun 1997

JavaScript 1.3
Netscape 4.5
Oct 1998

JavaScript 1.4
Netscape Server Only
No Client Side release

Javascript 1.5
Netscape 6.0
Nov 2000

JScript 1.0
IE 3.0 - early versions
Approx. JavaScript 1.0
Aug 1996

JScript 2.0
IE 3.0 - later versions
Approx. JavaScript 1.1
Jan 1997

JScript 3.0
IE 4.0
Approx. JavaScript 1.3
Oct 1997

Jscript 4.0
No Browser Products

JScript 5.0
IE 5.0
partly compliant with ECMAScript v3
Mar 1999

JScript 5.5
IE 5.5
Approx. JavaScript 1.5
Jul 2000

JScript 5.6
IE 6.0
Approx. JavaScript 1.5
Oct 2001

ECMAScript v1
More precisely ECMA-262
Approx. JavaScript 1.3 or JScript 3.0
June 1998

ECMAScript v2
Released for maintenance purposes only

ECMAScript v3
Approx. JavaScript 1.5 or Jscript 5.5
Dec 1999

REFERENCES:

1. [url=http://www.mozilla.org/js/language/es4/]ECMA v4 Proposal[/url]
projected for this year (2002)

2. [url=http://developer.netscape.com/docs/manuals/javascript.html]Netscape's Javascript Info[/url]

3. [url=http://msdn.microsoft.com/library/en-us/script56/html/js56jslrfJScriptLanguageReference.asp]Microsoft's JScript Info[/url]

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

IE에서 hasAttributes 대체 하기  (0) 2010.01.12
놓치기 쉬운 자바스크립트 크로스브라우징  (0) 2008.05.23
객체 초기화의 중요성  (1) 2008.05.23
오페라,사파리의 DOM Inspector  (6) 2008.04.15
Javascript OOP - 객체 생성과 property  (1) 2008.04.07
posted by 초딩입맛제주아재
2008. 5. 23. 12:05 Programing/HTML/JavaScript/CSS

놓치기 쉬운 자바스크립트 크로스브라우징

브라우저에 따라 달리 동작하는 자바스크립트 함수 몇몇을 소개합니다.
가장 기본적인 문자열 처리와 이벤트 처리에 해당하는 함수들이기 때문에 숙지하시어 개발시 활용하시기 바랍니다.

문자열 처리




이벤트 처리

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

IE에서 hasAttributes 대체 하기  (0) 2010.01.12
JavaScript - JScript - ECMAScript version history  (0) 2008.07.09
객체 초기화의 중요성  (1) 2008.05.23
오페라,사파리의 DOM Inspector  (6) 2008.04.15
Javascript OOP - 객체 생성과 property  (1) 2008.04.07
posted by 초딩입맛제주아재
2008. 4. 8. 18:07 카테고리 없음

Javascript OOP - method

Method

지난 포스트에서 Car객체를 만들어봤습니다.

function Car(name){
    this.name = name;
}

name 프로퍼티 하나만 가지고 있는 간단한 객체죠?

우리가 만든 이 Car라는 객체는 아직까지는 아무것도 할 수 없습니다.

이름만 갖고 있을 뿐 시동을 켜는것도 안되고, 문을 열 수도 없습니다.
이제 우리가 만든 이 Car에 하나하나 능력을 부여해 보도록 하겠습니다.
우선은 문을 여는 것 부터 해볼까요? (그래야 문을 열고 들어가서 시동을 걸 수 있겠죠? ^^)

먼저 문이 열린것을 확인 할 수 있는 상태변수를 하나 추가해야겠습니다.

function Car(name){
    this.name = name;
    this.isOpen = false;
}

Car.prototype.opendoor = function(){
    this.isOpen = true;
    alert('문이 열렸습니다.');
}

이제 Car의 문을 열 수 있습니다~
그런데 생소한 키워드 [prototype]이 등장했습니다.
프로토타입...시제품? prototype.js?
자바스크립트는



posted by 초딩입맛제주아재
2008. 4. 7. 15:01 Programing/HTML/JavaScript/CSS

Javascript OOP - 객체 생성과 property

Javascript OOP

최근 javascript로 OOP를 구현 하는 사례가 증가하고 있습니다.
AJAX와 함께 JSON이라는 효율적인 표기법과, prototype.js 이나 ExtJS같은 걸출한 javascript 프레임웍, 라이브러리 등이 출현하면서 javascript OOP는 점점 더 대중화가 되어가고 있습니다.
extjs sample

ExtJS 샘플

prototype.js

prototype.js


다시 말하면 javascript로 OOP를 구현하는 기술은 더이상 스페셜리스트들만 알고 있는 고급기술이 아니란거죠. 이를 다시 바꿔말하면 이제는 javascript OOP를 모르면 안된다는 말이기도 합니다~^^;;

가끔 웹서핑을 하다 페이지 소스를 보면 여기저기 많은 js 소스들에서 심심치 않게 'new' 연산자(operator)나 '{}' 같은 리터럴(object literal)을  볼 수가 있습니다.

'new'와 '{}' 은 javascript에서 객체를 생성할때 쓰는 연산자와 리터럴 입니다.


객체 생성하기

객체를 한 번 만들어 볼까요?

var car = new Car();

car라는 변수에 Car객체를 생성하여 대입하는 코드입니다.
실행하면 Car를 찾을 수 없다는 오류가 발생합니다.
클래스가 있어야겠죠?
클래스를 만들어보겠습니다.
javascript에서는 'function' 키워드를 써서 클래스 정의를 합니다. 함수 하나 만든다고 생각하시면 됩니다~

function Car(){
   
}

이제 Car객체가 만들어집니다.


Property

그런데 Car객체는 아무것도 가진게 없네요~^^ 껍데기만 있는 빈클래스는 의미가 없죠?
이제 Car에게 책임을 좀 지어줄까요?
먼저 이름을 주어야겠습니다. '애마1호기','달려라번개호' 같은 이름을 붙여준다면 더욱 애착이 가는 객체가 되겠죠?
이름은 객체의 속성(property)으로 볼 수 있습니다. javascript에서 객체의 속성은 '객체.속성이름 = 속성 값' 이렇게 할당 할 수 있습니다.

function Car(){
    this.name = '달려라번개호';
}

var car = new Car();
alert(car.name);

'달려라번개호'가 메세지 박스에 출력되네요~

그런데 저 this는 뭘까요?
이것의 이름은 달려라 번개호다?
네, 맞습니다~^^
여기서 this라는 키워드는 'new' 연산자를 통해 만들어진 Car객체의 인스턴스(instance)를 뜻합니다.

var car1 = new Car();
var car2 = new Car();
var car3 = new Car();

new 연산자가 실행될때마다, 붕어빵 기계에서 붕어빵이 나오듯 Car객체가 하나씩 만들어져서 나오게 됩니다. 이렇게 만들어진 하나하나의 객체를 인스턴스라고 하며 this란 그 인스턴스를 가리키는 것이지요~

this가 붙은 변수, 즉 객체의 property는 객체가 살아있는 동안 객체의 어느 곳에서든 사용 할 수 있습니다. 객체의 전역변수라고 생각하시면 되겠죠?

this 대신에 'var'를 붙여주면 지역 변수로 사용할 수 있습니다.

function Car(){
    var engineSize = '5000cc';
    this.name = '달려라번개호' + engineSize;
}

var car = new Car();
alert(car.name);
alert(car.engineSize);

'달려라번개호5000cc'라는 이름은 출력이 되는데, engineSize은 'undefined' 라고 나오네요~
engineSize는 객체를 만들때 name 속성을 위해 희생하고는 지역변수의 비참한 최후를 맞이한듯 합니다.
var와 this의 차이랍니다~^^

그런데 Car를 세대(car1,car2,car3) 만들었는데 이름이 모두 똑같습니다.
달려라번개호
달려라번개호
달려라번개호
이제 그만 달리고 싶네요 ㅡ.ㅡ;;

Car 객체를 생성할때 이름을 따로따로 지어주고 싶습니다.
생성자인 function Car() 를 조금 손봐줘야겠군요.

function Car(name){
    this.name = name;
}

이렇게 해주면 Car를 생성할때 원하는 이름을 지어줄 수 있습니다.

var car1 = new Car('번개호');
var car2 = new Car('천둥이');
var car3 = new Car('폭풍3호');

alert(car1.name);
alert(car2.name);
alert(car3.name);

이제 만들어진 Car객체들이 저마다 다른 이름을 가질 수 있게 되었습니다.^^


javascript로 객체 만들기~ 참 쉽죠? ^^
다음엔 Car를 움직여보도록 하겠습니다. 이름만 있는 차 보다는 타고 다닐 수 있는 차가 더 좋겠죠?
javascript object's method를 기대해 주세요~!!


'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

객체 초기화의 중요성  (1) 2008.05.23
오페라,사파리의 DOM Inspector  (6) 2008.04.15
URL, 도메인 추출 정규식 (2)  (5) 2008.02.22
URL, 도메인 추출 정규식  (0) 2008.02.20
javascript의 클로저(closure)  (2) 2007.09.21
posted by 초딩입맛제주아재
2008. 2. 22. 17:30 Programing/HTML/JavaScript/CSS

URL, 도메인 추출 정규식 (2)

어제 정규식 수정하고 포스팅 하는걸 깜빡했네요^^;;

첫 정규식에서는 도메인에 하이픈이나 한글 도메인 추출이 안됐었죠.





또다시 머리를 이리굴리고 저리굴리고 하다가 해결했습니다.





정규식을 이렇게 바꿔봤습니다.
/(http(s)?:\/\/)?\S+(\.[^(\n|\t|\s|\/))]+)+/gi

이전 것은 이랬죠.
/(http(s)?:\/\/)?\w+\.\w+(\.\w+)+/gi

\S는 공백을 제외한 문자입니다.
\S를 씀으로써 추가적인 문제가 발생할 수도 있습니다만, 그 문제는 생각하지 않기로 했습니다.
정 거슬리면 [a-zA-Z0-9가-힣] 이런 식으로 쓸 수도 있습니다만,
아직은 원하는 결과를 보여주니 도메인추출 정규식은 여기서 마무리를 지어야 겠습니다.^^;
혹시 더 좋은 방법 알고 계신분은 지도 부탁드립니다~~


'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

오페라,사파리의 DOM Inspector  (6) 2008.04.15
Javascript OOP - 객체 생성과 property  (1) 2008.04.07
URL, 도메인 추출 정규식  (0) 2008.02.20
javascript의 클로저(closure)  (2) 2007.09.21
객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점  (3) 2007.08.07
posted by 초딩입맛제주아재
2008. 2. 20. 19:18 Programing/HTML/JavaScript/CSS

URL, 도메인 추출 정규식

문자열중에서 URL(그중 프로토콜과 도메인 부분까지만...) 추출해야 하는 작업이 있었습니다.
정규식을 잘 못다뤄서 상당한 시간을 소비했네요;;;
그렇다고 결과가 썩 맘에 들지는 않습니다.
문제점이 많아서....-_-;;





코드는 간단합니다. 몇 시간 쥐어짜낸것 치고는 형편없죠....-_-;;
 
<script>
  function aa(){
      var aa = document.getElementById('aa');
      var patt = /(http(s)?:\/\/)?\w+(\.\w+)+/gi;
      var result = (aa.value.match(patt));

    aa.value = result.join('\n');
}
  </script>
 </head>

 <body>
  <textarea id="aa" cols="100" rows="10">
    * 컴퓨터 싸게 잘 사는 방법 - 가격비교 PC분야 우수업체 아싸컴! 인텔 콘로탑재 PC 최저가 178,500원.
      http://www.assacom.com
    * 컴퓨터전문 쇼핑몰 싸다컴 - 무이자할부, 전국출장A/S, 경품이벤트 무료배송, 특가HP노트북 - 싸다컴
      http://www.ssadacom.com
    * 컴퓨터전문몰 아이프로컴 - 컴퓨터22만원할인, 쿼드 40만원, 전국출장A/S, 본체10만원, USB증정.
      http://www.iprocom.co.kr
    * 인터넷 익스플로러 7 - 지금 업그레이드 하세요. 최신 Google에 최적화된 IE7
      http://www.google.com/toolbar/ie7/
    * 조립컴퓨터 강자 팝콘피씨 - 인텔최신 코어2쿼드 컴퓨터 할인판매 전국 출장A/S 저가 컴퓨터143,500원
      http://www.popcornpc.co.kr/user_pag
  </textarea>
  <input type="button" onclick="aa()">

정말 간단하죠???
풀이를 하자면
(http(s)?:\/\/)? - http 또는 https 프로토콜명이 있어도 그만 없어도 그만. '?' 는 0번 또는 1번 매칭이죠~
\w+ - 알파벳과 숫자로 된 문자열이 1개 이상 매칭~
(\.\w+)+ - .daum 처럼 닷(.) 다음에 문자열로 이루어진 패턴이 1회 이상 매칭

언뜻 보면 잘 되는 것 같습니다만 저 코드는 치명적인 버그를 갖고 있습니다...(그러니 저 코드는 쓰지마시길~^^)



문제점이 보이시나요?
아래와 같은 문제점이 저 코드안에 도사리고 있답니다...

  • www.img-daum.net 같은 하이픈(-)이 들어간  도메인은 추출을 못합니다.
  • 언더바(_)가 들어가도 마찬가지죠...
  • 한글도메인도 같은 신세입니다~

저 문제들은 오늘 퇴근하고 머리를 좀 굴려봐야겠습니다.
정규식만 제대로 이해하면 될텐데 말이죠~

내일 다시 제대로된 코드를 포스팅 하도록 하겠습니다.




'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

Javascript OOP - 객체 생성과 property  (1) 2008.04.07
URL, 도메인 추출 정규식 (2)  (5) 2008.02.22
javascript의 클로저(closure)  (2) 2007.09.21
객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점  (3) 2007.08.07
cloneNode 의 활용  (0) 2007.06.14
posted by 초딩입맛제주아재
2007. 12. 7. 18:33 카테고리 없음

Javascript 버전 확인하기

출처: http://bclary.com/2004/08/27/javascript-version-incompatibilities


아래의 코드를 실행하면 해당 브라우저에서 지원하는 javascript 코드를 확인 할 수 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Determine JavaScript Version</title>
    <style type="text/css">
      html, body { margin: 0; padding: 0}
    </style>
    <script language="javascript">
      var jsversion = 1.0;
    </script>
    <script language="javascript1.1">
      jsversion = 1.1;
    </script>
    <script language="javascript1.2">
      jsversion = 1.2;
    </script>
    <script language="javascript1.3">
      jsversion = 1.3;
    </script>
    <script language="javascript1.4">
      jsversion = 1.4;
    </script>
    <script language="javascript1.5">
      jsversion = 1.5;
    </script>
    <script language="javascript1.6">
      jsversion = 1.6;
    </script>
    <script language="javascript1.7">
      jsversion = 1.7;
    </script>
    <script language="javascript1.8">
      jsversion = 1.8;
    </script>
    <script language="javascript1.9">
      jsversion = 1.9;
    </script>
    <script language="javascript2.0">
      jsversion = 2.0;
    </script>
  </head>
  <body>
    <div>
    <script language="javascript">
      document.write('Your browser claims to support JavaScript ' + jsversion)
    </script>
    </div>
  </body>
</html>
posted by 초딩입맛제주아재
2007. 9. 21. 13:56 Programing/HTML/JavaScript/CSS

javascript의 클로저(closure)

클로저(closure)는 자유로운(구속되지 않은) 변수들을 포함하고 있는 코드 블록이다. 이러한 변수들은 코드 블록이나 글로벌 콘텍스트에서 정의되지 않고, 코드 블록이 정의된 환경에서 정의된다. "클로저"라는 명칭은 실행할 코드 블록(자유 변수의 관점에서, 변수 레퍼런스와 관련하여 폐쇄적이지 않은)과 자유 변수들에 대한 바인딩을 제공하는 평가 환경(범위)의 결합에서 탄생한 것이다. 클로저 지원의 다양함은 Scheme, Common Lisp, Smalltalk, Groovy, JavaScript, Ruby, Python에서 찾아볼 수 있다.

클로저의 가치는 함수 객체(function objects) 또는 익명 함수(anonymous functions)로서 작용하고, 유형 시스템(type system)이 데이터뿐만 아니라 코드도 나타낼 수 있어야 한다는 점에서 유형 시스템에 대한 결과도 갖고 있다. 클로저가 있는 대부분의 언어들은 함수들을 퍼스트-클래스 객체들로서 지원하는데, 함수들은 변수에 저장될 수 있고, 매개변수로서 다른 함수들에 저장되며, 동적으로 생성되고, 함수들에서 리턴된다.

- IBM developer works 인용 -


클로저란 생성시 환경의 레퍼런스를 그대로 가지고 있는 것이다.

다음 javascript 코드를 보며 설명하겠다.

<script type="text/javascript">
var example = function(){
    var i = 1;
    return function(){
        alert(i++);
    };
}();
</script>

<input type="button" onclick="example()" value="click" />

'click' 버튼을 클릭하면 계속 숫자가 증가하게 된다.
분명 i 라는 변수는 함수에서 선언된 지역 변수이다.
this.i 라고 객체 변수로 선언 했다면 쉽게 이해가 되겠지만 분명 지역변수로 선언되었다.
때문에 버튼을 클릭할때마다 i의 값은 매번 1이 되어야 한다.
하지만 계속 i는 증가한다.

그 이유가 바로 클로저에있다.

javascript 는 클로저를 지원하는 언어이기 때문에 return function(){} 이 선언되는 시점의 환경, 즉 지역변수 i의 레퍼런스를 가지고 있기 때문에 계속해서 i를 증가 시킬 수 있다.

어떻게 보면 상당히 난해한 개념이기도 하다.
하지만 간단한 원리-생성시의 환경 정보를 그대로 가지고 있다-만 파악한다면 쉽게 클로저를 사용 할 수 있을 것이다.


참고자료



'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

URL, 도메인 추출 정규식 (2)  (5) 2008.02.22
URL, 도메인 추출 정규식  (0) 2008.02.20
객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점  (3) 2007.08.07
cloneNode 의 활용  (0) 2007.06.14
수정이 가능한 텍스트2 - 인라인셀렉트박스??  (0) 2007.05.31
posted by 초딩입맛제주아재
2007. 8. 7. 01:35 Programing/HTML/JavaScript/CSS

객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점


<script type="text/javascript">
function StopWatch(){
    this.now = new Date();
    this.counter = 0;
    this.timer = null;
}

StopWatch.prototype.start = function(){
    this.timer = window.setInterval(this.counterUp,1000);
}

StopWatch.prototype.counterUp = function(){
    this.counter++;
}

StopWatch.prototype.stop = function(){
    window.clearInterval(this.timer);
    this.timer = null;
    alert(this.counter);
}

var sw = new StopWatch();
</script>

<input type="button" onclick="sw.start()" value="start" />
<input type="button" onclick="sw.stop()" value="stop" />

위에 간단한 스톱워치 객체가 있다.
객체를 생성하고 start()메서드를 호출하면 스톱워치가 작동하고 stop()메서드를 호출하면 스톱워치가 멈추고 경과된 시간을 초단위로 알려준다.

한번 스톱워치를 작동시켜보자.

start 버튼을 클릭하고 잠시 기다렸다 stop 버튼을 클릭해보자.
예상 되는 결과는 화면에 alert창이 뜨고 경과된 시간이 출력이 되는것이다.

결과가 어떠한가?
경과된 시간이 출력 됐는가?

아마도 alert 창에는 0이 출력되었을 것이다.
왜 이런 결과가 나왔을까?
코드가 잘못됐나 싶어 코드를 훑어봐도 도무지 이유를 찾을 수가 없다.
휴~

한숨은 그만 쉬고 차근차근 디버깅을 해보자.
개발자에게 디버깅은 밥 한술 먹고 반찬 한젓가락 떠 먹는것과 똑같지 않은가;;;

결과를 보면 스톱워치 객체의 counter 속성이 변하지 않았다는것을 알 수 있다.

this.counter++;

이 코드는 분명 this=StopWatch 의 인스턴스 변수 counter 를 1증가 시키는 코드다.
그런데 증가가 되지 않았다.
그렇다면 counterUp 메서드가 호출이 되지 않은 것인가?
counterUp 메서드가 제대로 호출이 되는지 확인하기 위해 counterUp메서드에 alert코드를 삽입한 후 다시 스톱워치를 작동시켜보자.

StopWatch.prototype.counterUp = function(){
    this.counter++;
    alert(this.counter);
}


NaN이라는 메세지를 확인했는가?
counter 라는 인스턴스 변수를 인식하지 못하고 있다.

바로 this가 StopWatch 가 아니라는 뜻이다.

그렇다면 우리를 혼란 속으로 빠뜨린 이 this의 정체는 무엇일까?

counterUp 메서드를 다음과 같이 고쳐보자

StopWatch.prototype.counterUp = function(){
    var str = '';
    for(var temp in this){
        str += temp + '\n';
    }
    alert(str);
}

경고창의 내용을 보면 뭔가 낯익은 단어들이 보일 것잉다.
location,opener,status 등등...
감이 오는가?

counterUp 메서드 안에서의 this의 정체는 바로 window객체였던 것이다.

우리는 분명 StopWatch 객체를 생성하고 StopWatch의 메서드인 start 와 counterUp, stop 메서드를 사용했다.
그런데 별안간 window객체라니...

window객체가 출몰하게된 자세한 이유는 여기를 참조하기 바란다.

요약하자면 setInterval 함수에 인자로 넘긴 StopWatch의 counterUp 메서드의 코드는 전달이 되지만 counterUp의 인스턴스는 전달이 되지 않는 다는 것이다.
이 부분에서 '클로저' 에 대해서 한번 검색을 해볼 것을 권한다.(Ajax In Action을 봤다면 대충 알겠지만..)

때문에 setInterval 에 의해 반복 호출 되는 counterUp는 window객체에 귀속 되게 되고
결국 this는 window객체를 가리키게 되는 것이다.

다소 설명이 애매모호하니 위의 링크를 정독 할 것을 권한다.(내 영어실력이 엄청 짧다....ㅡㅡ;)

아무튼 이제 문제는 찾았다.
this가 window 객체를 가리킨다는 것.

그렇다면 어떤 방법으로 이 문제를 해결 해야 할까?
카운터 증가를 담당하는 메서드의 주인이 window 로 넘어가 버렸으니 StopWatch의 counter 는 무의미하다.
대신 window 객체에 counter 를 달아주면 어떨까??

window.counter = 0;

요걸 start 메서드에 한번 넣어 보자.

StopWatch.prototype.start = function(){
    window.counter = this.counter;
    this.timer = window.setInterval(this.counterUp,1000);
}

그리고 stop에서 원래상태로 되돌려주자.

StopWatch.prototype.stop = function(){
    window.clearInterval(this.timer);
    this.timer = null;
    this.counter = window.counter;
    alert(this.counter);
}

자 이제 다시 스톱워치를 작동시켜 보자.

0이 아닌 다른 숫자가 보이지 않는가??

window객체에 임의로 다른 속성을 할당하는게 꺼림찍 하다면 다른 방법을 쓸 수 있다.
위에서 검색해 보길 권했던 '클로저'를 이용 하는 방법이다.

이 방법은 코드를 좀 많이 고쳐야 한다.

function StopWatch(){
    this.now = new Date();
    var counter = 0;
    this.timer = null;

    this.counterUp = function(){
        counter++;
    }

    this.stop = function(){
        window.clearInterval(this.timer);
        this.timer = null;
        alert(counter);
    }
}

StopWatch.prototype.start = function(){
    this.timer = window.setInterval(this.counterUp,1000);
}

counter변수가 인스턴스 변수가 아닌 임시 변수로 바뀌었고
counterUp과 stop 메서드가 StopWatch 객체안으로 들어왔다.

위와 같이 StopWatch 함수 안에서 메서드를 정의 하면 클로저라는 것이 자동으로 생성 되어 counter 라는 변수와 counterUp과 start 메서드간에 연결 고리가 만들어진다.
때문에 비록 지역변수인 counter 라도 StopWatch 객체가 살아 있는한 StopWatch 객체와 그 생명을 함께 하게 된다.

마무리를 해야 하는데 결론을 내기가 힘들다.
좀 복잡한 내용이고 나도 대충 이해만 한것을 풀어 쓰려니 읽는 사람들도 이해하기가 힘들 것 같다.
중간 내용은 다 잊어 버리고 처음과 끝만 보는게 그나마 이해하는데 도움이 될지도 모르겠다. ㅡㅡ;

좀더 자세한 설명을 원하는 분은 위에 링크된 MDC(Mozila Developer Center)와 Ajax in Action(부록B)를 꼭 읽어 보시길 바라며 나는 도망가야겠다;;;

혹, 이 포스팅을 보고 이건 이게 아니라 정확히 이거다~ 라고 설명해 주실 수 있는 분은 꼭! 가르침을 주시길 부탁드리며...

 

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

URL, 도메인 추출 정규식  (0) 2008.02.20
javascript의 클로저(closure)  (2) 2007.09.21
cloneNode 의 활용  (0) 2007.06.14
수정이 가능한 텍스트2 - 인라인셀렉트박스??  (0) 2007.05.31
수정이 가능한 텍스트 - 인라인 텍스트 에디터  (7) 2007.05.29
posted by 초딩입맛제주아재
2007. 5. 22. 14:49 Programing/HTML/JavaScript/CSS

Javascript 객체 들여다보기

javascript의 객체의 속성은 객체.속성이름 으로  접근이 가능하다.
그리고 또 하나 다른 표현이 있는데 바로 객체['속성이름'] 이 그것이다.

var obj = new Object();
obj.id = 'first';
obj.name = 'wave';
obj.age = '20';
obj.sex = 'male';

alert(obj.id);
alert(obj['id']);

이제 객체 안을 통째로 들여다 보는 방법을 알아보자
위에서 언급한 객체['속성이름']의 표현식을 이용하면 된다.

var msg = '';

for(var temp in obj){
  msg += temp + ' = ' + obj[temp] + '\n';
}

alert(msg);

for(A in B)는 B의 속성을 하나하나 꺼내서 A에 담는다.

어찌 보면 객체 == 배열 의 형태로 보이기도 하는데, phpschool 에 이와 관련한 재밌는 토론이 있었으니 참고하길 바란다...토론보기

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

수정이 가능한 텍스트2 - 인라인셀렉트박스??  (0) 2007.05.31
수정이 가능한 텍스트 - 인라인 텍스트 에디터  (7) 2007.05.29
What is the Flapjax.  (0) 2007.04.19
Switching Tab  (1) 2007.04.18
JavaScript: 세상에서 가장 오해가 많은 프로그래밍 언어  (2) 2007.04.06
posted by 초딩입맛제주아재
prev 1 2 next

티스토리툴바