차이

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

@@ 줄 1: / 줄 1: @@
+====== 클래스 - 기본 ======
+내장된 기본 객체의 사용, 클래스 사용의 기본.
+<code javascript>
+var now  = new Date();
+var year = now.getFullYear();
+</code>
+내장 객체가 아닌 임의의 새로운 클래스 생성
+<code javascript>
+// 클래스이름 : MainClass와 같이 영문으로 구성되는 이름
+// 파라미터 : 파라미터1, 파라미터2, 와 같이 콤마로 구분되는 파라미터들
+//- 코드의 형식 -
+클래스이름 = function( 파라미터 )
+{
+	// ...
+}
+</code>
+실제 사용하는 코드의 예시, 함수처럼 보이지만. javascript에서는 클래스 선언과 생성자다.
+<code javascript>
+//- 간단한 예제
+MainClass = function( myId, yourName )
+{
+	this.myId = myId;
+	this.yourName = yourName;
+}
+</code>
+클래스의 변수(프로퍼티)는,
+  * 'this.프로퍼티이름' : 클래스의 프로퍼티.
+클래스의 사용은 내장 객체(클래스)를 사용하는 방법과 같다. 'new'연산자로 할당한다.
+클래스의 변수를 추가하는 방법은 prototype 키워드를 사용해서 메소드를 추가한다.
+<code javascript>
+클래스이름.prototype.함수이름 = function(파라미터) {
+//...
+}
+</code>
+사용하는 예제.
+<code javascript>
+MainClass.prototype.doSomething( cmd )
+{
+	this.cmd = cmd;
+}
+</code>
+MainClass를 사용한다면 이렇게 쓴다.
+<code javascript>
+var _mc = new MainClass( 'a', 'b' );
+_mc.doSomething( 'quit' );
+</code>
+리턴할 값이 있다면 'return' 키워드로 값을 돌려준다.
+<code javascript>
+MainClass.prototype.showResult() {
+	return 1;
+}
+</code>
+클래스의 함수 선언은 동적으로 가능하다.
+<code javascript>
+var _mc = new MainClass( 'a', 'b' );
+_mc.doSomething( 'quit' );
+_mc.printThis = function() {
+	return xx;
+}
+</code>
+====== JSON 표기 =====
+JSON = Javascript Object Notation, 데이터를 표기하는 방법
+  - 이름과 값을 쌍으로 표시
+  - 배열
+이름/값의 형식으로
+  { 이름1 : 값, 이름2 : 값 }
+<code javascript>
+var countries = { ko : '한국', jp : '일본' }
+var koName = countries.ko;
+var jpName = countries['jp'];
+</code>
+배열
+  [ 값0, 값1, 값2 ]
+<code javascript>
+var countries = [ 'ko', 'jp ]
+var koName = countries[0];
+var jpName = countries[1];
+</code>
+(이름/값) 형식과 배열 형식을 혼합해서 사용
+<code javascript>
+var _member = {
+	name : '홍길동',
+	likeColor : ['black','white']
+};
+var _msg = _member.name + "/ 색 " +
+	member.likeColor.length + "/ 첫번째 색 : " + member.likeColor[0];
+</code>
+JSON을 사용한 클래스 정의
+<code javascript>
+// 형식
+클래스이름 = function(파라미터)
+{
+}
+클래스이름.prototype =
+{
+	함수이름1 : function(파라미터) {
+	} ,
+	함수이름2 : function(파라미터) {
+	}
+}
+</code>
+JSON을 사용한 클래스 정의 - 실제 코드
+<code javascript>
+MainClass = function( myId, yourName )
+{
+	this.myId = myId;
+	this.yourName = yourName;
+}
+MainClass.prototype =
+{
+	doSomething : function( cmd )
+	{
+		this.cmd = cmd;
+	} ,
+	printThis : function() {
+		return xx;
+	}
+}
+</code>
+====== 패키지 정의하기 ======
+C++의 namespace와 같은 역할.
+선언하는 예
+<code javascript>
+var ajax = new Object();
+ajax.Request = function() {}
+ajax.Request.prototype = {
+	someFunc : function() {
+	}
+}
+</code>
+사용하는 방법
+<code javascript>
+var req = new ajax.Request();
+req.someFunc();
+</code>
+중첩 선언 가능하다.
+<code javascript>
+var ajax = new Object();
+ajax.part1 = new Object();
+ajax.part1.Request = function() {}
+ajax.part1.Request.prototype = {
+	someFunc : function() {}
+}
+var req = new ajax.part1.Request();
+</code>
+Object 클래스를 사용하지 않고, JSON 방식으로 선언할 수 있다.
+<code javascript>
+var ajax = {};
+ajax.part1 = {};
+ajax.part1.Request = function() {}
+</code>
+====== 상속 ======
+언어에서는 지원하지 않지만, prototype을 사용해서 구현은 가능
+<code javascript>
+// 부모 클래스 선언
+Daddy = function( param1 ) { //...
+	this.param1 = param1;
+}
+Daddy.prototype.getName = function() {
+	return param1;
+}
+Daddy.prototype.toString = function() {
+	return this.param1 + "xxxx desu";
+}
+// 자식클래스 - 정의
+ChildOne = function( param1 ) {
+	this.param1 = param1;
+}
+// 자식클래스 - 상속
+ChildOne.prototype = new Daddy;
+// 자식클래스 - 함수 오버라이딩
+ChildOne.prototype.toString = function() {
+	return this.param1 + "from child.";
+}
+</code>
+상속된 클래스가 사용 되는 모습
+<code javascript>
+var dad = new Daddy("p");
+var child = new ChildOne("c");
+var _msg =
+	dad.getName() + "/ " + dad.toString() + "\n" +
+	child.getName() + "/ " +	// 부모에서 상속된 getName() 실행
+	child.toString() + "\n";	// 자식쪽에서 오버라이딩된 toString() 실행
+</code>
+===== 부모의 함수 호출하기 =====
+appy(this) 함수로 부모의 함수 호출.
+<code javascript>
+// 새로운 부모
+Line = Function( x1, y1, x2, y2 ) { // ...
+}
+Line.prototype.getLength = function() {
+	return Math.sqrt(..);
+}
+// 자식 클래스 선언과 부모쪽 함수의 선언
+RatioLine = Function( x1, y1, x2, y2, ratio ) { // ...
+	this.ratio = ratio;
+}
+RatioLine.prototype = new Line;
+RatioLine.prototype.getLength = function() {
+	var _len = Line.prototype.getLength.appy(this);
+	return _len * this.ratio;
+}
+</code>
+부모 클래스의 이름을 사용하지 않고 부모의 함수 실행
+<code javascript>
+// 위의 코드에서
+RatioLine.prototype.getLength = function() {
+	// (old) : var _len = Line.prototype.getLength.appy(this);
+	var _len = this.parent.getLength.appy(this);
+	return _len * this.ratio;
+}
+</code>
+JSON 방식으로 설정하는 부분 - 패스