- Prototype.js를 이용하면 클래스 정의 시 명시적인 서술이 가능.
- http://www.prototypejs.org 에서 다운
- Class.create() 메소드와 prototype 속성을 사용해서 클래스 선언.
클래스의 생성자는 initialize() 메소드를 사용하여 정의
예)
Var Subject = Class.create(); // subject 클래스 선언(생성)
Subject.prototype={ // Subject 클래스를 정의
Initialize : function(){ // initialize() 메소드를 사용해서 클래스의 생성자 정의
..
..
}
Var Subject = new Subject(); // Subject클래스의 객체 subject 생성
- 클래스를 상속해서 하위 클래스 생성
- Extend()메소드를 이용하여 클래스의 상속을 처리한다.
Extend()메소드는 첫 번째 매개변수로 상속해 주는 클래스의 객체를 지정한다.
예) SubSubject.prototype = Object.extend(new Subject,{…
두번째 매개변수는 상속받는 클래스의 정의를 기술한다.
- 오버라이딩
오버라이딩은 그냥 부모 클래스랑 이름 같고 내부 정의의 기술만 다름.(그래도 구현됨.)
- DOM트리 객체를 사용해서 태그 노드의 추가와 제거
- 어케보면 신기한 기능이다.(평소에는 자주 봐온 것이지만..)
DOM에서는 html테그를 객체로 취급한다.
예)
divNode = nodeDisplay(); // 이말인 즉 divNode는 <div> 태그라는 얘기임.
function nodeDisplay(){
var divNode = null;
divNode = document.createElement(“div”);
divNode.className = “area”;
return divNode;
}
var inputNode = document.createElement(“input”); // 여기서 inputNode는 원소. Input태그를 말함.
inputNode.setAttribute(“type”,”button”); // 원소에 태그 정보를 할당해 줌.
divNode.appendChild(inputNode);//
- Document.body.appendChild(객체)를 통해서 태그 아래 객체를 추가
- Document.body.removeChild(객체)를 통해서 태그 아래 객체 삭제
- 트리 개념으로 생각하면 쉬움!
- 덧, prototype.js에서 이벤트 리스너가 Event.observe(객체id,발생되는이벤트,함수 정의 혹은 호출) 이런 식으로 정의됨.
- 매개변수 활용
매개변수 항목이 여러 개인 경우 {}(brace)를 사용해서 표현.
(예)
var backColor = { // 매개변수 객체 backColor 정의 -스타일 정의
“1” : “#3399cc” , “2” : “#9966cc” , “3” : “#ccffff”,
“4” : “#5f9ea0” , “5” : “#ffcccc”
};
1일차 느낀 점
- 약 4시간여에 걸친 첫 아작스의 경험이었다. 무엇보다 DOM구조가 기본이 된다는 점과 생각지도 못한 prototype.js를 이용한 자바스크립트의 클래스 비스무리한(거의 같다.) 구조(물론 코딩은 다르다.) 덧, 리치 클라이언트 개발이 가능하다니.. 생각보다 아작스에게는 다양한 기능들이 존재하는 것 같다.
- 그러나 아쉬운건(이건 개인적인것) 시간분배를 잘 못해가지고 오늘 하루종일 한게 아작스 공부밖에 없다. DB설계 관련해서도 공부해야 하는데…
- 아무튼!! 중요한건 재밌다는거!! ㅎㅎ 어여 책 다 파해치고 싶다… ㅜㅜ 화팅~!
