window 객체
객체 계층 구조의 최상위에 있으며, 창을 제어하는 작업을 한다. 흔히 쓰는 alert(), setTimeout() 등의 메소드와 document와 같은 프로퍼티를 지닌다.
일반적인 형식은 아래와 같이 쓴다.
- window.프로퍼티 = 값
- window.메소드()
- window.메소드(파라미터)
* Scope chain(스코프체인)
: 부모로부터 내려오는 자식변수들은 부모를 참조할 수 있지만,
부모는 자식변수를 참조할 수 없다.
ex 1)
function a() { var x = y = 1; } a();
// x는 함수 a의 지역변수이고, y는 window객체에 생성된 전역변수. 결과는 1로 동일.
ex 2)
function a() { var x = 0; }
a();
function b() { x = 4; }
b();
// b의 x라는 변수가 a에 있으므로 함수 a에서 가져온다. 없었다면 window로 생성됨.
// b의 x라는 변수가 a에 있으므로 함수 a에서 가져온다. 없었다면 window로 생성됨.
( Javascript의 기본개념과 원리들은 아래링크를 참고하자.
https://developer.mozilla.org/ko/docs/Web/JavaScript )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
window.componentManage = function() {
/*
* 최초 시작점
*/
var setSearchField = function() {
$.ajax({
type: "GET",
url: window.monitoring.remoteApiUrl + "/media"
}).done(function(o) {
drawMediaField(o.media);
});
};
/*
* 첫 필드
*/
var drawMediaField = function(mediaList) {
//필드 설정
$searchMediaField = $("#searchMediaField");
$searchMediaField.empty();
if(mediaList.length < 1) {
$searchMediaField.append(
"<option>미디어가 없습니다.</option>");
}
else {
$.each(mediaList, function(i, media) {
$searchMediaField.append(
"<option value='" + media.ID_MEDIA + "'>" +
media.V_NAME + "</option>")
});
setSectField(mediaList[0].ID_MEDIA);
setPanField(mediaList[0].ID_MEDIA);
setNField(mediaList[0].ID_MEDIA);
setAField(mediaList[0].ID_MEDIA);
}
}
......... 다른 필드 List도 만들고 설정하는 과정 .........
}();
| cs |
1. 여기서는 각각의 js에서 전역으로 이벤트들을 부르기 위해 window객체를 썼다.
2. $.ajax는 페이지 유지하면서 어떤 값을 서버로 보내기 위해 쓰는 쿼리이다.
- 특정이벤트를 서버와 http통신하여 정상완료하면 success:function(파라미터)를 붙여주는데, done()은 이와 같은기능을 한다.
- error: ~ 는 .fail(){ }로 대체가능 / complete: ~ 는 .always(){ }로 대체가능
3. append()는 지정한 id 엘리먼트에 내용을 추가하는 기능이다. 즉, $searchMediaField에 셀렉트 드롭다운 창에 내용추가할 때 쓰는 태그인 <option>의 내용을 넣는다.
4. $.each는 자바스크립트의 for(~ in ~)와 비슷하다. mediaList길이만큼 루프돌리고 리스트에 넣는다. 시험용이기 때문에 모두 [0]에 넣었다.
- for(~ in ~)은 for(var i in array) { }처럼 사용한다.
댓글 없음:
댓글 쓰기