* 지역변수는 함수 전체에서 정의되어 있다. var 문이 실행되고 나서야 실제로 초기화가 이루어진다.
* 모든 객체는 객체를 초기화하는데 사용되는 생성자 함수인 constuctor 프로퍼티를 갖는다.
* 리터럴 객체 혹은 리터럴 배열 생성방법: var obj = {} , var arr = [] 이다. 생성자를 사용 호출시 new() 사용한다.
함수 전역 변수
function square(x) { return x * x; }
var a = square(4); // a에는 숫자 16이 저장된다.
var b = square; // 이제 b는 square 같은 함수를 가르킨다.
var c = b(5) ; // c에는 숫자 25가 저장된다.
var o = new Object;
o.square = function(x){ return x * x; } // 함수 리터럴
y = o.square(16); // y에는 256이 저장된다.
var a = new Array(3);
a[0] = function(x) { return x * x;}
a[1] = 20;
a[2] = a[0](a[1]); // a[2]에는 400이 저장된다.
) call()메서드
call() : 함수 f()에 두 숫자를 전달하고 이 함수를 마치 객체의 o의 메서드인 것처럼 호출하려 한 다면 다음과 같은
코드를 작성할 수 있다.
f.call(o, 1, 2);
이 표현은 다음의 코드와 유사하다.
o.m = f;
o.m(1,2);
delete o.m;
) 네임스페이스로서의 호출 객체
function init(){
// 코드는 여기에 넣는다.
// 선언된 모든 변수는 전역 네임스페이스를 어지럽히는 대신
// 호출 객체의 프로퍼티가 된다.
}
init(); // 함수를 호출하는 것을 잊어서는 안된다.
* 익명의 함수를 정의하고 호출하는 단일 표현식을 사용할 수 있다.
(function(){ // 이 함수는 이름이 없다.
// 코드는 여기에 넣는다.
// 선언된 모든 변수는 전역 네임스페이스를 어지럽히는 대신
// 호출객체의 프로퍼티가 된다.
})(); // 함수 리터럴을 종결하고 이를 지금 호출한다.
* 자바스크립트에서 함수는 다른 모든 값과 마찬가지로 데이터다. 따라서 함수는 다른 함수에 의해 반환될수 있고 객체에 프로
퍼티로 할당될 수도 있으며, 또한 배열 등에 저장될 수도 있다.
* 자바스크립트의 객체는 자신의 프로토타입에 있는 프로퍼티들을 상속받는다.
// 생성자 함수는 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화시킨다.
function Rectangle(w, h){
this.width = w;
this.height = h;
}
// 프로토타입 객체는 각 인스턴스들이 공유해야 하는 프로퍼티나 메서드를 정의한다.
// 생각) JAVA의 static 역할을 말하는 거 같다.
Rectongle.prototype.area = function(){ return this.width * this.height; }
생성자는 객체들의 클래스를 위한 이름을 정의하고 , width나 height와 같은 인스턴스마다 다를 수 있는 프로퍼티의 값을 초기화시킨다. 그리고 프로토타입 객체는 생성자와 연결되며, 이 생성자를 통해 생성되는 객체들은 프로토타입이 가진 프로터티들을 똑같이 상속받는다. 이 말은 프로토타입 객체가 메서드나 상수 같은 프로퍼티들을 위치시키기에 좋은 곳임을 의미한다.
프로토타입의 프로퍼티들은 클래스의 모든 객체가 공유하기 때문에, 모든 객체가 같이 사용하는 프로퍼티들을 정의해놓는 것
// 마지막 문자가 변수 c의 값과 같으면 참을 반환한다.
String.prototype.endWith = function(c){
return ( c == this.charAt(this.length-1) );
}
var message = "hello world";
message.endWith('h') // 거짓을 반환
message.endWith('d') // 참을 반환
** 예제 **
//생성자 함수를 정의
function Circle(radius){
// r은 인스턴스 프로퍼티이며, 생성자 안에서 저의되고 초기화된다.
this.r = radius;
}
// Circle.PI는 클래스 프로퍼티다. 이것은 생성자 함수의 프로퍼티이다.
Circle.PI = 3.14159;
// 여기에는 원의 넓이를 계산하기 위한 인스턴스 메서드가 정의되어 있다.
Circle.prototype.area = function() { return Circle.PI * this.r * this.r; };
// 이 클래스 메서드는 Circle의 두 객체들을 받아서 더 큰 반지름을 가진 것을 반환한다.
Circle.max = function(a, b){
if(a.r > b.r) return a;
else return b;
};
// 여기에 나타나있는 코드는 위에서 정의된 필드를 사용한다.
var c = new Circle(1.0); // Circle 클래스의 인스턴스를 하나 만든다.
c.r = 2.2; //인스턴 프로퍼티 r의 값을 지정한다.
var a = c.area(); // 인스턴스 메서드인 area()를 호출한다.
var x = Math.exp(Circle.PI); // 클래스 프로퍼티인 PI를 사용하여 계산을 한다.
var d = new Circle(1.2); // 다른 Circle 인스턴스를 만든다.
var bigger = Circle.max(c, b); //클래스의 메서드 max()를 사용한다.
** 예제 끝 **
* typeof는 기본 타입을 객체와 구별하는 데 가장 유용하게 사용 할 수 있다.
typeof undefined는 'undefined' 지만 typeof null은 'object'이다.
모든 배열은 객체이기 때문에 배열의 타입도 'object'다.
함수는 객체이긴 하지만 타입은 'function'이다.
* 어떤 값이 기본 타입이나 함수가 아니라 객체라고 판단하면 이에 관련하여 정보를 얻기위해 instanceof연산자를 사용한다.
x instanceof Array
객체 o에 대해서 instaceof Object는 항상 true이다.
instanceof는 함수에 대해서도 작동하며 아래의 모든 표현은 함수 f에 대해 true다.
typeof f == "function"
f instanceof Function
f instanceof Object
var d = new Date(); // Date 객체, Date는 Object를 확장한다.
var isobject = d instanceof Object; // true 평가한다.
var realobject = d.constructor == Object; // false로 평가한다.
** 13장 웹 브라우저와 자바스크립트 **
* 클라이언트 자바스크립트에서는 Document 객체가 HTML 문서를 나타낸다.
* Window 객체는브라우저 창 또는 프레임을 나타낸다.
Window 객체가 클라이언트 측 프로그래밍에서 전역 객체역할을 담당하고 있다.
* 여러 개의 창(또는 프레임)을 사용해서 애플리케이션을 작성할 수 있는데, 애플리케이션에 속한 각 창은 고유한 Window 객체를 가지며, 클라이언트 측 자바스크립트 코드의 고유한 컨텍스트를 정의한다.
** 비공식 스크립트 어트리뷰트 **
MS는 오직 익스플러에서만 작동하며 event와 for 어트리뷰트를 사용한다. << 사용하지 말자 >>
** onload
onload 이벤트 처리기는 모든 문서의 파싱이 끝나고 모든 스크립트가 실행된 후 그리고 모든 보조내용( 이미지 같은 것들 )
onload 이벤트를 방생시켜 Window객체에 onload 이벤트 처리기가로 등록된 모든 자바스크립트 코드를 실행한다.
onload 처리기가 구동되는 때는 모든 문서의 읽기 작업과 파싱 작업이 완전히 끝난 후이기 때문에 모든 문서 엘리먼트는
자바스크립트를 사용하여 조작할 수 있다.
** onunload 이벤트 처리기
사용자가 웹 페이지를 떠나 다른 곳으로 이동할 때 브라우저는 현제 페이지에 대한 자바스크립트 코드의 마지막 실행 기회를
onunload 이벤트 처리기를 구동한다.
* 클라이언트 쓰레다는 단일 쓰레드다. 싱글 쓰레드
* URL에서 전달인자 추출하기 예
function getArgs(){
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0; i<pairs.length; i++){
var pos = pairs[i].indexOf("=");
if(pos == -1) continue;
var argname = pairs[i].subtring(0, pos); // 키값을 추출한다.
var value = pairs[i].substring(pos+1); //값을 추출한다.
var = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
args[argname] = value; // 객체 프로퍼티로 저장한다.
}
return args;
}
** Document 객체 이름 짓기 **
<form name="f1"><input tpye="button" value="Push Me"></form>
document.forms[0] // 문서 내의 위치를 통해 참조
document.forms.f1 // 프로퍼티로 이름을 통해 폼 참조
document.forms["f1"] //배열 인텍스로 이름을 통해 참조
document.f1
<form nam="shipping">
..
<input type="text" name="zipcode">
..
</form>
doument.shipping.zipcode
만약 name 어트리뷰트가 모두 'n' 이라는 똑같은 이름을 사용한다면
document.n 프로퍼티는 두 원소에 대한 참조를 가지는 배열이 된다.
<form name="myform" onsumit="return validateform();">...</form>
document.myform.onsubmit = validateform;
HTML 문서의 트리 표현
* '트리라는 표현은 가족 구조를 표현하는 트리에서 빌려온 것이다.
한 노드의 바로 위에 있는 노드는 아래에 있는 노드의 부보(parent)다.
다른 노드의 바로 한 레벨 밑에 있는 노드는 위에 있는 노드의 자식(children)이다.
같은 부모를 가졌으며 같은 레벨에 있는 노드들을 형제(sibling)이다.
어떤 노드의 아래에 있는 모든 노드(레벨의 상관없이)는 위에 있는 노드의 자손(descendant)이다.
부모와 조부모를 비롯하여 어떤 노드의 위에 있는 모든 노드는 아래에 있는 노드이 조상(ancestor)이다.
* 문서의 노드 순회 예
function countTags(n){
var numtags = 0;
if(n.nodeType == 1 /*Node.ELEMENT_NODE*/)
numtags++;
var children = n.childNodes;
for(var i=0; i<children.length; i++){
numtags += countTags(childdren[i]);
}
return numtags;
}
<body onload="alert('this document has '+ countTags(document) +' tags')">
*
document.getElementByTagName("body")[0];
var tables = document.getElementByTagName("table");
alert("This document contains" + tables.length+ " tables");
var myParagraph = document.getElemetByTagName("p")[3]; //효율적이 못하다.
<p id="specialParagraph" />
var myParagraph = docment.getElementById("specialParagraph");
function id(x){
if(typeof x == "string") return document.getElementById(x);
return x;
}
var headLine = document.getElementById("headLine");
headLine.setAttribute("align", "center");
var headLine = document.getElementById("headLine");
headLine.align = "center";
** 이벤트와 이벤트 처리 **
<input type="button" value="Click Here" onclick="alert(this.onclick 또는 typeof this.onclick); ">
자바스크립트를 통해 접근하면 이벤트 처리기 프로퍼티는 함수가 된다.
이벤트 처리기에서 this 키워드는 이벤트가 발생한 객체를 참조한다. this.value -> Click Here 출력되는 걸 보면 Button엘리먼트를 참조 하는거 같다.
*--
<form name="f1">
<input type="button" name="b1" value="Pree Me" />
</form>
document.f1.b1.onclick = function(){
alert("Thanks");
}
*--
function plead(){
document.f1.b1.value += ", please!";
}
document.f1.b1.onmouseover = plead;
*--
( HTML 어트리뷰트와 자바스크립트 프로퍼티에 상관없이 ) 이벤트 처리기는 대부분 반환값을 사용하여 이벤트 특성을 나타냄
<form name="f1" action="www.naver.com"
onsubmit="if(this.elements[0].value.length==0) return false;">
<form name="f1" action="www.naver.com"
onsubmit="if(this.elements['namef'].value.length==0) return false;">
<form name="f1" action="www.naver.com"
onsubmit="if(this.namef.value.length==0) return false;">
<form name="f1" action="www.naver.com" onsubmit="if(new String(this.namef.value).trim().length==0) return false;">
<input type="text" name="namef" />
<input type="submit" value="go" />
</form>
*--
button.onclick = o.mymethod;
이 문장은 button.onclick이 o.mymethod 함수를 참조하게 만든다. mymethod함수는 이제 o와 button둘 모두의 메서드다.
this 키워드는 이제 o가 아닌 Button객체를 참조한다.
*--
<form >
<!-- 이벤트 처리기에서 this는 이벤트의 대상 엘리먼트를 참조한다. -->
<!-- 따라서 폼 내의 이웃 엘리먼트를 다음과 같이 참조할 수 있다. -->
<input id="b1" type="button" value="button1" onclick="alert(this.form.b2.value);">
<!-- 대상 엘리먼트도 유효 범위 체인 안에 있기 때문에 this를 생략할수 있다. -->
<input id="b2" type="button" value="button2" onclick="alert(form.b1.value);">
<!-- <form>도 유효 범위에 있기 때문에 생략 가능 -->
<input id="b3" type="button" value="button3" onclick="alert(b4.value);">
<!-- Document 객체는 유효 범위 체인 상에 있기 때문에 이 객체의 메서드는 -->
<!-- Document document를 앞에 붙이지 않고도 사용 할 수 있다. -->
<!-- 하지만 좋은 습관은 아니다. -->
<input id="b4" type="button" value="button4" onclick="alert(getElementById('b3').value);">
</form>
*--
함수는 자신이 호출된 곳이 아니라 자신이 정의된 곳의 유효범위를 사용하여 실행됨을 기억해야 된다.
이벤트 처리기 유효 범위에 대한 모든 설명은 이벤트 처리기를 html 어트리뷰트로 저의하는 경우에만 해당된다는 사실을
명심해라 한다.
** 폼( Form ) 객체 **
Form객체는 Document객체의 프로퍼티 중 하나인 forms[]배열의 원소를 통해 접근할 수 있다.
마지막 폼에 접근 하는 방법 : document.forms[document.forms.length-1]
현재 창에서 문서의 두 번째 폼에 속한 세 번째 엘리먼트를 참조하려면
생각)elements는 해당 폼 객체 안에 있는 여러가지 input, button, checkbox... 뜻하는 거 같다.
document.forms[1].elements[2]
*
onsubmit 처리기는 순수하게 Submit 버튼을 클릭하는 것에 의해서만 구동됨을 명심해라.
*
모든 폼 엘리먼트에는 자신이 폼을 참조하는 form프로퍼티가 있다.
폼 엘리먼트의 이벤트 처리기에서는 this.form으로 Form객체를 참조할 수 있다.
형제 관계에 있는 x라는 폼 엘리먼트를 참조하려면 this.form.x 라고 한면 된다.
*
checkbox와 radio 엘리먼트는 토글 버튼이다. ( 선택아니면 해제 )
이름이 같은 토글엘리먼트를 배열로 받기 위해
document.erverything.extras
개별 참조하려면
document.erverything.extras[0]
radio와 checkbox 엘리먼트에는 공통적으로 checked라는 프로퍼티가 있다.
페이지가 처음 로딩되었을 때 해당 엘리먼트가 선택되어 있을 것인지 여부를 나타낸다. defaultChecked
프로퍼티는 HTML checked 어트리뷰트에 해당하는 겂을 가지는 불리언 프로퍼티이다.
select 엘리먼트 속에 options[]배열 안에 저장된 Option 객체들을 표현한다.
select-multiple(다중 선택 가능) 일때는 selectIndex 프로퍼티만으로는 현재 선택되어 있는 옵션들을 모두 표현하기 충분치 않다. 이 경우 선택된 것을 판별하기 위해 options[]배열 안에 속한 모든 엘리먼트에 대한 loop문을 이용해 Option객체마다
selected프로퍼티의 값을 확인해야 한다.
그 외에 text프로퍼티를 이용해 텍스트를 변경. 이와 더블어 value프러퍼티 역시 읽고/쓰기가 가능한 문자열이다. 웹서버로 전달할 문자를 지정한다.
다음과 같이 하면 이 엘리먼트에 속한 모든 옵션들을 제거 할 수 있다.
document.addressF.countryS.options.length = 0; // 모든 옵션들을 제거
// Select 엘리먼트에서 하나의 Option 객체를 제거한다.
// 기존에 option[11]에 있던 옵션은 option[10]으로 이동한다.
document.addressF.countryS.options[10] = null;