* 자바스크립트 기초
- 브라우저가 페이지의 HTML 텍스트를 받아서 DOM 스트럭처에 parse 한다. 그 후 해당 페이지의 content들에 대한 각 층들을 구분해서 표시할 준비를 한다. 그리고 표시하기 전에 style을 적용한 후 표시한다.
- HTML은 정적인 부분을 정의하기에 아주 좋은 언어이다. 하지만 웹의 다이나믹한 부분을 구현하는데는 한계가 있다.
- 자바스크립트는 이 다이나믹한 뷰를 제공하는 클라이언트 side의 가장 강력한 스크립트 언어이다.
- 자바스크립트는 ajax, user experience, responsive web design 의 가장 중요한 부분을 구현한다.
- DOM 은 jQuery 같은 라이브러리를 사용해서 클라이언트 side의 스크립팅을 간편하게 만들어 준다. 하지만 separation of concerns 를 처리하는 문제를 해결하지는 못한다.
- 이의 해결을 위한 다른 라이브러리나 프레임워크들이 있다.
* 자바스크립트의 목적
- 자바스크립트는 객체지향언어이다. 자바스크립트로 객체를 정의하고 메소드와 프로퍼티들을 할당한다.
- 자바스크립트 객체는 배열이나 hash와 관련돼 있다. (key value pairs)
: obj[key]=value 나 obj.name = value 형식으로 키를 할당한다.
: delete obj.name 으로 delete한다.
: string key의 iteration order는 definition order 이고 numeric key는 변경할 수 있다.
- 함수(프로퍼티)는 obj.method() 형식으로 호출된다. 또한 this. 로 참조되고 프로퍼티들은 어느때나 assign되거나 remove 될 수 있다.
- 함수는 new Func(params) 로 constructor에서 실행될 때 새로운 객체를 생성할 수 있다. 이때 대개 이러한 함수의 이름은 대문자를 사용한다.
* 객체 생성하기
- obj = new Object(); , obj = {};
dot notation을 사용하는 경우
var employee ={}; - 값이 정해지지 않은 상태
employee.Id = 12345;
employee.Name = "Tom" - Key : Name, Value : Tom
employee.Name
delete employee.Name
employee => Object {Id:12345}
[]를 사용하는 경우
var employee = {};
employee["Id"] = 12345;
employee["Name"] = "Tom"
employee => Object{Id:12345, Name:"Tom"}
delete employee["Name"]
employee => Object{Id:12345}
* 객체에 존재하지 않는 프로퍼티 참조하기
- 객체에 해당 프로퍼티가 존재하지 않으면 undefined 가 return 된다.
- in operator를 사용해서 키의 존재를 확인할 수 있다.
var employee = {}
employee.Id
employee.Id === undefined
"Id" in employee => false
employee.Id = 12345
"Id" in employee => true
- for.. in을 사용해서 iterate 할 수 있다.
var employee = {}
employee.Id = 12345
employee.Name = "Tom"
for(key in employee) {console.log("Key : " + key + "Value : " + employee[key]}
==> Key : Id Value : 12345
==> Key : Name Value : Tom
* Object reference
- 객체에 할당된 변수는 그것을 reference 한다. 즉 포인터와 같은 역할을 하는데 실제 data를 가리키는 것이다.
- 이 reference 변수를 사용해서 객체의 property를 바꿀 수 있다.
- 변수는 실제로는 reference 이다. 함수의 객체에 전달할 때의 값이 아니다.
var employee = {};
employee["Id"] = 12345;
var obj = employee; - 같은 객체에 대한 새로운 point
obj.Id = 54321
employee.Id ==> 54321
* this 키워드
-객체에서 함수가 호출될 때 this 가 이 객체의 reference가 된다.
var foo = {
name : "Guest",
setName : function(){
this.name = prompt('Enter your name'); - this 는 foo 객체의 reference 가 된다.
},
getName : function(){
console.log("Your name is : " + this.name);
}
};
foo.getName(); ==> Your name is : Guest
foo.setName() - 프롬프트가 나타나면 이름을 입력한다.
foo.getName(); ==> Your name is : '프롬프트에 입력한 이름'
* 생성자 함수
- obj = {...}를 사용해 객체를 생성할 수 있다.
- 다른 방법으로는 constructor를 사용할 수 있다. 이 때 Constructor는 Pascal case 여야 한다.
- 초기에 빈 객체인데 여기에 초기화 할 때 어떤 프로퍼티를 할당해야 하는 경우 사용한다. result 는 returned 이다.
function Calculator(firstVar, secondVar) {
this.firstVar = firstVar;
this.secondVar = secondVar;
this.sum = function(){
return this.firstVar + this.secondVar;
}
}
new Calculator(5,5);
var calcObj1 = new Calculator(5,5);
var calcObj2 = new Calculator(15,15);
calcObj1.sum(); ==> 10
calcObj2.sum(); ==> 30
* 프로토타입 상속
- 자바스크립트에서 상속은 프로퍼티 베이스이다. 다른 클래스에서 클래스를 상속하는 대신 다른 객체에서 객체를 상속한다.
- 다른 객체에서 객체를 상속하기 위해서는 아래와 같이 한다.
childObject._proto_=baseObject
: 이 syntax는 크롬과 파이어폭스에서 사용된다. 다른 브라우저에서는 내부적으로 이 프로퍼티가 존재한다. (hidden)
childObject = Object.create(baseObject)
ConstructorFunction.prototype = baseObject
: 이 syntax는 최근의 모든 브라우저에서 동일하게 작동한다.
1. _proto_ 사용해서 프로토타입 상속하기
var foo {
fooVar : "Foo Variable",
fooMethod : function(){
console.log(this.fooVar);
}
}
var bar = {
barVar : "Bar Variable"
}
bar._proto_ = foo // bar 객체가 foo로부터 상속했다.
==> Object{fooVar: "Foo Variable", fooMethod:function}
bar
==> Object{barVar: "Bar Variable", fooVar: "Foo Variable", fooMethod:function}
2. Object.create() 사용해서 프로토타입 상속하기
var foo {
fooVar : "Foo Variable",
fooMethod : function(){
console.log(this.fooVar);
}
}
var bar = Object.create(foo) // bar 객체가 foo로부터 상속했다.
bar
==> Object{fooVar: "Foo Variable", fooMethod:function}
bar.barVar - "Bar Variable"
==> Object{barVar: "Bar Variable", fooVar: "Foo Variable", fooMethod:function}
3. prototype 사용해서 프로토타입 상속하기
function Employee(){
this.Id = 0;
this.Name = "";
}
function Manager(){}
Manager.prototype = new Employee(); // Manager가 Employee 객체를 상속한다.
==> Employee {Id: 0, Name: ""}
var ani1 = new Manager();
ani1
==>Manager {Id: 0, Name: ""} // new Manager로 생성되는 모든 객체는 ID와 Name을 갖게 된다.
ani1.Id = 1111;
ani1.Name = "Tom"
ani1
==> Manager {Id: 1111, Name: "Tom"}
'etc. > Responsive Web' 카테고리의 다른 글
반응형 웹 Media Query 를 위한 CSS 탬플릿 자료 (0) | 2012.07.29 |
---|