2012/02/15 - [Study/Javascript] - 자바스크립트 공부중 - 1
2012/02/17 - [Study/Javascript] - 자바스크립트 공부중 - 2
2012/02/20 - [Study/Javascript] - 자바스크립트 공부중 - 3
2012/02/20 - [Study/Javascript] - 자바스크립트 공부중 - 4

사용자 정의 객체 만들기

객체 안에 메소드들을 생성하게 될 경우
객체가 생성될때마다 각 객체안에서 또 메소드를 가지고 있기 때문에 낭비적이면서 비효율적

ex)
function Car(name, number, owner){
  this.name = name;
  this.number = number;
  this.owner = owner; 

  this.go = function (speed) {
    move;
  }
  this.stop = function () {
    stop;
  }
}

var newCar = new Car("M3", "1234", "Mooki");
var oldCar = new Car("마티즈", "4321", "Mooki");
var momsCar = new Car("S7", "7890", "Mom");  

다음과 같이 사용할 경우
Car라는 객체 안에 go, stop 이라는 메소드가 들어있고
newCar와 oldCar가 생성될때마다 함께 생성하게 된다.

즉, 각 서로 다른 객체에 대해 유일한 데이터를 저장해야 하는 프로퍼티들과는 달리, 메소드들은 객체 사이에 공유되어야 한다.


클래스, 인스턴스

객체 클래스 - 하나의 객체에 대해 묘사. 객체가 무엇을 만드는지에 대한 윤곽을 그리는 템블릿
객체 인스턴스 - 생성되는 실질적인 객체

클래스는 설계도이고 인스턴스는 그 설계도로 만든 것을 칭한다.

- 인스턴스는 클래스로부터 생성
- 클래스는 자체적으로 메소드를 가진다.
- 메소드가 클래스에 의해 소유되면, 그 클래스의 모든 인스턴스들은 이 메소드에 접근가능

prototype - 클래스 레벨에서 메소드를 소유하고 프로퍼티를 설정할 수 있게 함

ex) 위에서 사용한 Car 객체를 prototype을 이용하여 수정
function Car(name, number){
  this.name = name;
  this.number = number;
}
Car.prototype.owner = "Mooki";  // 클래스가 가지는 프로퍼티

Car.prototype.go = function (speed) {
  move;

Car.prototype.stop = function () {
  stop;
}

var newCar = new Car("M3", "1234");
var oldCar = new Car("마티즈", "4321"); 
var momsCar = new Car("S7", "7890"); 
momsCar.owner = "Mom";  // momsCar 인스턴스만 owner를 "Mom"으로 변경 된다. 다른 인스턴스에는 영향이 없다


버그 - 벌레를 조심하자!

개발하면서 가장 신경이 쓰이는 부분중에 하나가 아닐까 싶다.
버그!

undefined ? - 정의되지 않은 ?
- 생성하지 않은 경우
- 생성을 했지만 값을 할당하지 않은 경우
- 보통 변수명이나 클래스명에서 오타가 발생했을 경우에 발견되는 경우가 많다.
- 변수나 클래스 모두 대소문자를 구분하기 때문에 잘 확인하도록 한다.

※ undefined 와 null 은 절대 같지 않다!

- 변수는 절대 자동적으로 null을 할당하지 않는다.
- 값이 정의되지 않음과 비어있음이 다름을 인식해야 한다.

모든 {}를 닫도록 한다.
- ()도 동일하다
- 들여쓰기를 통해서 헷갈리지 않도록 코딩하는 것이 좋다.

큰따옴표("), 작은따옴표(') 일관성 유지
- 큰따옴표 : 모든 HTML 속성을 둘러싸는데 사용
- 작은따옴표 : 속성 내부에 있는 자바스크립트 문자열을 둘러싸는데 사용
- 큰따옴표안에 작은 따옴표를 사용할 수 있으며 그 반대로도 사용이 가능하다.
ex)
<div onclick="alert('경고창');">큰따옴표로 묶고 안에서 작은 따옴표를 사용</div>
<div onclick='alert("경고창");'>작은따옴표로 묶고 안에서 큰 따옴표를 사용 </div> 

- 문자로 사용되는 큰따옴표, 작은따옴표 일 경우는 이스케이프 문자 사용을 권장
ex)
alert("내용을 "10자"로 입력하세요");
→  alert('내용을 "10자"로 입력하세요');  // 작은따옴표로 변경 
→  alert("내용을 \"10자\"로 입력하세요");  // 이스케이프 문자 사용(권장)

원하는 값을 추적할때
- alert()을 적극 활용한다
- 브라우저 디버그 창을 이용할 경우 console.log()도 유용하다 (IE 지원하지 않음)

객체에 접근을 시도하기 전에 반드시 생성하도록 한다.
- 웹페이지 엘리먼트들은 onload 이벤트가 발생하기 직전까지 생성되지 않는다.

절대로 지역 변수와 전역 변수의 이름을 동일하게 사용하지 않도록 한다.


XML, Ajax에 대한 설명



이걸로 책 한권이 끝났다.

추가적인 설명이 필요하거나 필요 없는 부분은 타이틀만 적었으며
세부적인 내용은 더 공부가 필요하겠다.


더 공부해야지- :)


다음은... 다른거 공부해볼까? 
Posted by Mooki

댓글을 달아 주세요