권남

사용자 도구

사이트 도구

추적: • matchit • pureftpd • bitlocker • eks • network • firefox • saml
javascript:기초

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
javascript:기초 [2011/11/14 16:31]
kwon37xi 		javascript:기초 [2022/01/22 12:44] (현재)
kwon37xi
줄 1: 줄 1:
 ====== Javascript 기초 ====== ====== Javascript 기초 ======
   * [[https://developer.mozilla.org/en/A_re-introduction_to_JavaScript|A re-introduction to JavaScript - MDN]] : JavaScript를 다시 소개합니다   * [[https://developer.mozilla.org/en/A_re-introduction_to_JavaScript|A re-introduction to JavaScript - MDN]] : JavaScript를 다시 소개합니다
 +  * [[https://ko.javascript.info/|모던 JavaScript 튜토리얼]]
 +  * [[https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript|JavaScript 재입문하기 (JS ​튜토리얼) | MDN]]
 +  * [[https://javascript.info/|The Modern JavaScript Tutorial]]
   * [[http://dev.naver.com/tech/ajaxui/ajaxui_2.php|Javascript와 함수형 프로그래밍 - 네이버 개발자센터]]   * [[http://dev.naver.com/tech/ajaxui/ajaxui_2.php|Javascript와 함수형 프로그래밍 - 네이버 개발자센터]]
- +  * [[javascript:objectoriented|Javascript 객체 지향 프로그래밍]] 
-===== 객체지향 프로그래밍 ===== +  * [[http://frends.kr/topics/javascript-core/|JavaScript. The Core]]
-  * [[http://msdn.microsoft.com/en-us/magazine/cc163419.aspx|Advanced Web Applications With Object-Oriented JavaScript]] JavaScript OO에 관한 매우 깊이 있는 소개. 필독 할 것. +
-  * [[https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript|Introduction to Object-Oriented JavaScript - MDN]] : JavaScript OO에 관한 쉬운 소개 +
-  * [[http://dev.naver.com/tech/ajaxui/ajaxui_3.php|Javascript와 객체지향 프로그래밍 - 네이버 개발자센터]] : new 관련 설명에 오류 있음. +
- +
-==== 클래스 만들기 ==== +
-원칙적으로 말해서 JS에는 class는 존재하지 않는다. 단지, 생성자 함수만 존재할 뿐이다. +
- +
-아래는 Pet 이라는 클래스를 생성한다. +
- +
-<code javascript> +
-function Pet(name) { +
-    this.name = name; // name 필드 생성 +
-} +
- +
-Pet.prototype.age = 0; // age 필드 생성 +
- +
-// toString 메소드 생성 +
-Pet.prototype.toString = function() { +
-    return "Pet name : " + this.name + ", age : " + this.age; +
-} +
- +
-var mong = new Pet("mong"); // 객체 생성 +
-mong.age = 6; +
-alert(mong); +
-</code> +
- +
-==== 상속 ==== +
-상속할 때 중요한 부분은 ''Dog.prototype = new Pet()''과 ''Dog.prototype.constructor = Dog'' 부분이다. +
- +
-<code javascript> +
-// 위에서 이어서, Pet을 상속하는 Dog 생성 +
-function Dog(name, age, breed) { +
-    Pet.call(this, name); +
-    this.age = age; +
-    this.breed = breed; +
-} +
- +
-// Dog.prototype이 Pet.prototype으로부터 상속하도록 한다. +
-Dog.prototype = new Pet(); +
- +
-// Pet 함수를 가리키는 생성자를 Dog 함수를 가리키도록 변경한다. +
-Dog.prototype.constructor = Dog; +
- +
-// toString() 메소드 오버라이드 +
-Dog.prototype.toString = function() { +
-    // 필요할 경우 부모클래스 메소드도 호출 가능 +
-    return "Dog " + Pet.prototype.toString.call(this) + ", breed : " + this.breed; +
-} +
- +
-var miro = new Dog("Miro", 7, "Pomeranian"); +
-alert(miro); +
- +
-alert("Is miro a Dog? " + (miro instanceof Dog)); +
-alert("Is miro a Pet? " + (miro instanceof Pet)); +
-alert("Is miro an Object? " + (miro instanceof Object)); +
-</code> +
- +
-==== Class 없이 객체 생성하고 메소드 추가하기 ==== +
-[[http://www.2ality.com/2011/11/javascript-classes.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+2ality+%282ality+%E2%80%93+technology%2C+life%29&utm_content=Google+Reader|JavaScript does not need classes]]를 참조하였다. +
- +
-  * 마치 class를 통해 생성한 객체처럼 필드와 메소드를 둘 수 있다. 메소드에서는 ''this.field''로 필드 값을 읽으면 된다.<code javascript> +
- +
-var jane = { +
-    name: "Jane", +
-    describe: function() { +
-        return "Person called " + this.name; +
-    } +
-}; +
- +
-console.log(jane.describe()); // Person called Jane +
-</code> +
-  * 클래스 없이 상속도 쉽게 가능하다.<code javascript> +
-var PersonProto = { +
-    describe: function () { +
-        return "Person called "+this.name; +
-    } +
-}; +
-var jane = { +
-    __proto__: PersonProto, +
-    name: "Jane" +
-}; +
-var tarzan = { +
-    __proto__: PersonProto, +
-    name: "Tarzan" +
-}; +
-console.log(jane.describe()); +
-console.log(tarzan.describe()); +
-</code> +
- +
-==== Class 객체의 method를 Event Handler Function으로 등록하기 ==== +
-Class 객체의 method는 원칙적으로 this가 객체를 가리켜야 하지만, **이벤트 핸들러로 등록되면 이벤트를 발생시킨 객체를 this로 가지게 되는 현상이 발생한다.** +
-이 문제를 해결하려면 [[http://stackoverflow.com/questions/229080/class-methods-as-event-handlers-in-javascript|Class methods as event handlers in javascript? - Stack Overflow]]에 나온 방법을 사용해야 한다. +
- +
-<code javascript> +
-ClickCounter = function(buttonId) { +
-    this._clickCount = 0; +
-    var that = this; +
-    document.getElementById(buttonId).onclick = function(){ that.buttonClicked() }; +
-} +
- +
-ClickCounter.prototype = { +
-    buttonClicked: function() { +
-        this._clickCount++; +
-        alert('the button was clicked ' + this._clickCount + ' times'); +
-    } +
-} +
-</code> +
- +
-핵심은 이벤트 핸들러를 등록할 때 **this를 that으로 매핑하고, ''that.buttonClicked()''를 호출하도록 function()으로 감싸는 부분**이다. 이렇게 하면 클래스 메소드에서는 ''this''를 원래 객체를 가리키는 것으로써 온전하게 사용할 수 있다. +
javascript/기초.1321255901.txt.gz · 마지막으로 수정됨: 2011/11/14 16:31 저자 kwon37xi

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki