반응형
http://www.davidflanagan.com/
1. 문서 엘리먼트 드래그하기
- 17.02.Drag.js
2. 단축키 설정을 위한 Keymap 클래스
- 17.08.Keymap.js
반응형
반응형
1. 이벤트 처리기와 HTML 엘리먼트
- 메모리 누수 해결을 위해서는 IE 를 위한 프로그램에서는 최대한 중첩된 함수를 작성하지 않는다.
다른 방법은 onunload() 이벤트가 발생하면 모든 이벤트 처리기를 주의해서 제거한다.
| 이벤트 처리기 | 호출 시점 | 지원되는 엘리먼트 |
| ondblclick | 더블클릭한 경우 | 대부분의 엘리먼트 |
| onclick | 마우스를 눌렀다 떤 경우, mouseup 이벤트 후에 연달아 발생함. 기본 동작을 취소하기 위해서는 false를 반환 | 대부분의 엘리먼트 |
| onkeydown | 키를 누른 경우. 취소하려면 false를 반환 | <body> <form> |
| onload | 문서 로딩이 끝난 경우 | <body>, <frameset>, <img> |
| onunload | 문서나 프레임셋을 언로드한 경우 (해당 페이지에서 빠져나가는 경우) | <body>, <frameset> |
| onblur | 마우스 포인터나 입력 커서가 엘리먼트를 멋어나 입력 포커스를 잃어버리는 경우 | <body>, <label>, <button>, <input>, <select>, <textarea> |
| onchange | 다른 폼 엘리먼트의 값이 변한경우 | <input>, <select>, <textarea> |
- onsubmit, onclick, onkeydown, onkeypress, onmousedown, onmouseup, onreset
. false 를 반환하면 행동이 실행되는 것을 취소할 수 있다.
- onmouseover
. window status line 에 연결된 링크 url 을 보여주는 것을 막을려면 true 를 반환한다.
2. 이벤트 전파
- 이벤트 포착(capture) 단계에서는 Document 객체에서 시작하여 문서 트리 아래쪽으로 이벤트가 전파된다.
- 대상 노드에 직접 등록되어 있는 적절한 이벤트 처리기가 실행된다.
- 문서 계층 구조에 따라 대상 엘리먼트에서 Document 객체로 이벤트가 되돌아가는 bubbling phase 단계이다.
- Event.stopPropagation() 메소드를 호출하여 더 이상 이벤트가 전파되는 것을 막을 수 있다.
- Event.preventDefault() 메소드를 호출하여 <a> 클릭의 경우 기본 이벤트 처리 3단계를 거친 후 브라우저가
하이퍼 링크를 따라가는 기본적인 동작을 막을 수 있다.
3. Event 객체의 프로퍼티
- type
. 이벤트의 타입, click, mouseover 등
- target
. 이벤트가 발생한 노드
- currentTarget
. 이벤트를 처리하고 있는 노드. 만약 이벤트가 포착단계나 bubbling 단계에서 처리되는 중이라면
이 프로퍼티의 값은 target 과 다르다.
- eventPhase
. Event.CAPTURING_PHASE, Event.AT_TARGET, Event.BUBBLING_PHASE 상수 값 중 하나이다.
- bubbles
. 이벤트가 문서 트리를 따라 위로 올라가는지를 나타내는 부울 값
- cancelable
. preventDefault() 메소드를 사용하여 이벤트의 기본 행동을 취소할 수 있는지 나타내는 부울 값
4. MouseEvent 의 프로퍼티
- Button
. mousedown, mouseup, click 이벤트 동안 어떤 마우스 버튼의 상태가 바뀌었는지를 나타낸다.
버튼의 상태가 바뀌었을 때만 사용된다. 0 : 왼쪽 버튼, 1: 가운데 버튼, 2: 오른 쪽 버튼
- clientX, clientY
. 문서의 얼마나 스크롤되었는지는 상관 없이 화면상 가장 위쪽 지점에서 이벤트가 발생했으면
clientY 값은 0 이다.
. IE 이외의 다른 브라우저에서는 window.pageXOffset 과 window.pageYOffset 을 더해 줘서
창에 대한 좌표를 문서에 대한 좌표로 바꿔줄 수 있다.
- screenX, screenY
. 마우스 포인터가 사용자 모니터의 왼쪽 상단부분에 대해 상대적으로 어디에 위치하는지를 나타냄
5. IE 에서 이벤트 처리기와 메모리 누수
- IE 에서는 중첩된 함수를 이벤트 처리기로 사용할 때 메모리 누수가 발생하기 쉽다.
- 아래 함수가 호출되면 주어진 폼 엘리먼트에 이벤트 처리기가 추가된다.
- 함수는 폼 엘리먼트를 참조하지 않지만 클로저의 일부분으로 인식되는 유효범위는 폼 엘리먼트를 참조한다.
- 폼 엘리먼트는 자바 스크립트 function 객체를 참조하고 이 객체는 폼객체를 참조한다.
. false 를 반환하면 행동이 실행되는 것을 취소할 수 있다.
- onmouseover
. window status line 에 연결된 링크 url 을 보여주는 것을 막을려면 true 를 반환한다.
2. 이벤트 전파
- 이벤트 포착(capture) 단계에서는 Document 객체에서 시작하여 문서 트리 아래쪽으로 이벤트가 전파된다.
- 대상 노드에 직접 등록되어 있는 적절한 이벤트 처리기가 실행된다.
- 문서 계층 구조에 따라 대상 엘리먼트에서 Document 객체로 이벤트가 되돌아가는 bubbling phase 단계이다.
- Event.stopPropagation() 메소드를 호출하여 더 이상 이벤트가 전파되는 것을 막을 수 있다.
- Event.preventDefault() 메소드를 호출하여 <a> 클릭의 경우 기본 이벤트 처리 3단계를 거친 후 브라우저가
하이퍼 링크를 따라가는 기본적인 동작을 막을 수 있다.
3. Event 객체의 프로퍼티
- type
. 이벤트의 타입, click, mouseover 등
- target
. 이벤트가 발생한 노드
- currentTarget
. 이벤트를 처리하고 있는 노드. 만약 이벤트가 포착단계나 bubbling 단계에서 처리되는 중이라면
이 프로퍼티의 값은 target 과 다르다.
- eventPhase
. Event.CAPTURING_PHASE, Event.AT_TARGET, Event.BUBBLING_PHASE 상수 값 중 하나이다.
- bubbles
. 이벤트가 문서 트리를 따라 위로 올라가는지를 나타내는 부울 값
- cancelable
. preventDefault() 메소드를 사용하여 이벤트의 기본 행동을 취소할 수 있는지 나타내는 부울 값
4. MouseEvent 의 프로퍼티
- Button
. mousedown, mouseup, click 이벤트 동안 어떤 마우스 버튼의 상태가 바뀌었는지를 나타낸다.
버튼의 상태가 바뀌었을 때만 사용된다. 0 : 왼쪽 버튼, 1: 가운데 버튼, 2: 오른 쪽 버튼
- clientX, clientY
. 문서의 얼마나 스크롤되었는지는 상관 없이 화면상 가장 위쪽 지점에서 이벤트가 발생했으면
clientY 값은 0 이다.
. IE 이외의 다른 브라우저에서는 window.pageXOffset 과 window.pageYOffset 을 더해 줘서
창에 대한 좌표를 문서에 대한 좌표로 바꿔줄 수 있다.
- screenX, screenY
. 마우스 포인터가 사용자 모니터의 왼쪽 상단부분에 대해 상대적으로 어디에 위치하는지를 나타냄
5. IE 에서 이벤트 처리기와 메모리 누수
- IE 에서는 중첩된 함수를 이벤트 처리기로 사용할 때 메모리 누수가 발생하기 쉽다.
- 아래 함수가 호출되면 주어진 폼 엘리먼트에 이벤트 처리기가 추가된다.
- 함수는 폼 엘리먼트를 참조하지 않지만 클로저의 일부분으로 인식되는 유효범위는 폼 엘리먼트를 참조한다.
- 폼 엘리먼트는 자바 스크립트 function 객체를 참조하고 이 객체는 폼객체를 참조한다.
function addValidationHandler(form) {
form.attachEvent("onsubmit", function() { return vallidate(); });
}
form.attachEvent("onsubmit", function() { return vallidate(); });
}
- 메모리 누수 해결을 위해서는 IE 를 위한 프로그램에서는 최대한 중첩된 함수를 작성하지 않는다.
다른 방법은 onunload() 이벤트가 발생하면 모든 이벤트 처리기를 주의해서 제거한다.
반응형
반응형
1. 툴팁 만들기
/**
* 아래의 css 클래스가 정의되어야 한다.
* .tooltipShadow
* background: url(shadow.png); /* 반투명한 그림자 */
* }
* .tooltipContent {
* left: -4px; top: -4px;
* background-color: #ff0;
* border: solid black 1px;
* padding: 5px;
* font: bold 10pt sans-serif;
*
*/
function Tooltip() {
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.style.visibility = "hidden";
this.tooltip.className = "tooltipShadow";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "tooltipContent";
this.tooltip.appendChild(this.content);
}
Tootip.prototype.show = function(text, x, y) {
this.content.innerHTML = text;
this.tooltip.style.left = x + "px";
this.tooltip.style.top = y + "px";
this.tooltip.style.visibility = "visible";
if (this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function() {
this.tooltip.style.visibility = "hidden";
};
* 아래의 css 클래스가 정의되어야 한다.
* .tooltipShadow
* background: url(shadow.png); /* 반투명한 그림자 */
* }
* .tooltipContent {
* left: -4px; top: -4px;
* background-color: #ff0;
* border: solid black 1px;
* padding: 5px;
* font: bold 10pt sans-serif;
*
*/
function Tooltip() {
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.style.visibility = "hidden";
this.tooltip.className = "tooltipShadow";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "tooltipContent";
this.tooltip.appendChild(this.content);
}
Tootip.prototype.show = function(text, x, y) {
this.content.innerHTML = text;
this.tooltip.style.left = x + "px";
this.tooltip.style.top = y + "px";
this.tooltip.style.visibility = "visible";
if (this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function() {
this.tooltip.style.visibility = "hidden";
};
반응형
반응형
1. http://quirksmode.org/
- http://quirksmode.org/dom/
. Peter-Paul Koch 의 웹사이트로 W3C DOM에 대한 호환 정보
2. http://www.webdevout.net/
- http://www.webdevout.net/browser-support
. David Hammond 의 웹사이트로 DOM 호환성을 포함하여 HTML, CSS 등의 정보도 포함한다.
- http://quirksmode.org/dom/
. Peter-Paul Koch 의 웹사이트로 W3C DOM에 대한 호환 정보
2. http://www.webdevout.net/
- http://www.webdevout.net/browser-support
. David Hammond 의 웹사이트로 DOM 호환성을 포함하여 HTML, CSS 등의 정보도 포함한다.
반응형
반응형
1. </script> 태그
. document.write() 메소드나 innerHTML 프로퍼티를 사용하여 동적인 HTML을 작성할 때 동적인 HTML 안에
</script> 태그는 escape 시켜줘야 한다. HTML 파서는 문자열 안에서라도 무조건 </script> 문자열을 발견
하면 현재 실행 중인 스크립트를 중단한다.
2. URL(javascript:) pseudoprotocol 사용
. javascript: 를 사용하면 한 줄 코드로 인식한다. 여러 문장을 쓰려면 ; 으로 구분하여 쓴다.
. URL 자바스크립트가 실행될 때 새 문서로 출력되는 리턴 값이 있으면 현재 출력 중인 문서의 내용이
변경될 수 있다. 그러므로 아무런 문서 변경을 하고 싶지 않으면 아무 값도 반환하지 말아야 한다.
. void 0; 를 이용하여 아무 값도 반환하지 않을 수 있다.
. document.write() 메소드나 innerHTML 프로퍼티를 사용하여 동적인 HTML을 작성할 때 동적인 HTML 안에
</script> 태그는 escape 시켜줘야 한다. HTML 파서는 문자열 안에서라도 무조건 </script> 문자열을 발견
하면 현재 실행 중인 스크립트를 중단한다.
<script>
f1.document.write("<script>");
f1.document.write("document.write('<h1>Hello</h1>')");
f1.document.write("<\/script>");
f1.document.write("<script>");
f1.document.write("document.write('<h1>Hello</h1>')");
f1.document.write("<\/script>");
2. URL(javascript:) pseudoprotocol 사용
. javascript: 를 사용하면 한 줄 코드로 인식한다. 여러 문장을 쓰려면 ; 으로 구분하여 쓴다.
. URL 자바스크립트가 실행될 때 새 문서로 출력되는 리턴 값이 있으면 현재 출력 중인 문서의 내용이
변경될 수 있다. 그러므로 아무런 문서 변경을 하고 싶지 않으면 아무 값도 반환하지 말아야 한다.
. void 0; 를 이용하여 아무 값도 반환하지 않을 수 있다.
javascript:window.open("about:blank"); void 0;
반응형
반응형
1. 브라우저는 전역 window 객체를 가지며 모든 전역변수는 window 객체의 프로퍼티로 지정된다.
- window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.
2. window 객체의 다른 프로퍼티
- navigator
. appName : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer, FireFox : Netscape
. appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
. appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
. userAgent : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
. plattform : 하드웨어 플랫폼
※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
- frames[]
- location
. search : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
. href : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
. protocol
. host
. pathname
. hash : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
window.location.hash = "#top";
. reload() : 현재 표시된 페이지를 다시 불러오는데 사용된다.
. replace() : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
- history
- screen
. width : 모니터 스크린의 가로크기
. height : 모니터 스크리의 세로크기
- opener
. 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
- closed
. 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
- x, y
. 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
- onerror
. onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
할당된 함수가 자동으로 호출된다.
. 세개의 전달인자가 전달된다.
. 첫 번째 전달인자는 에러메세지
. 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
. 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
. 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
- document
2-1 . document 객체의 다른 프로퍼티들
- forms[]
. elements[]
. options[] : form element 의 객체가 Select 일 때만 존재
- anchors[]
- links[]
- images[]
- applets[]
- domain : 문서가 불려온 서버의 호스트 네임
- URL : window.location 과는 다르게 읽기 전용이다.
(window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
- cookie
- lastModified
- referrer
3. window 객체의 메소드
- open()
. 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
. 첫 번째 전달인자는 url 이다
. 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
반환한다.
. 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
. 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.
- close()
. document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
. 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
. 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
. 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.
- focus()
. 키보드 포커스를 창에 위치하도록 한다.
- blur()
. 창으로 하여금 키보드 포커스를 잃어버리게 한다.
- scrollBy()
. 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
- scrollTo()
. 문서를 지정한 절 대 위치로 스크롤한다.
. 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
. HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
상단 모서리에 위치하게 창을 스크롤 할 수 있다.
4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.
5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.
6. 창 위치와 크기
- IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.
※ URL 에서 전달인자 추출하기
※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
- getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
- getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기를 반환한다.
- getDocumentWidth/Height() : 문서의 크기를 반환한다.
- getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
- getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
- 브라우저 창의 크기를 반환하는 함수는 없음
※ 브라우저를 판단하기 위한 클라이언트 스니퍼(client sniffer)
- https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support
- window 객체는 생략될 수 있으므로 아래의 두 코드는 동일하다.
var userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';
window.userName = 'Ahn SeungKyu';
2. window 객체의 다른 프로퍼티
- navigator
. appName : 브라우저의 간단한 이름이다. IE : Microsoft Internet Explorer, FireFox : Netscape
. appCodeName : 코드네임으로 호환을 위해 같은 이름을 사용한다. : Mozilla
. appVersion : 버전정보이기는 하나 내부적으로 사용되는 버전 숫자로 주로 호환성때문에 낮은 버전이 세팅
. userAgent : 표준화된 서식이 존재하지 않으므로 브라우저 독립적인 파싱은 불가능하다.
. plattform : 하드웨어 플랫폼
※ https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/navigator
- frames[]
- location
. search : window.location.search 의 값은 url 중에서 ? 를 포함하여 그 이하의 name=value를 포함한다.
. href : location 객체의 toString() 메소드는 href 값을 반환하므로 location.href 대신 location 을 쓴다.
. protocol
. host
. pathname
. hash : top 이란 이름의 anchor를 정의했을 때 그 위치로 스크롤 할 수 있다.
window.location.hash = "#top";
. reload() : 현재 표시된 페이지를 다시 불러오는데 사용된다.
. replace() : 지정한 url 을 불러오는 것으로 window.location 에 url 을 대입하는 것과는 다르다.
replace()를 사용하면 최근 열어본 페이지 목록에 추가되지 않고 현재의 항목을 대신한다.
- history
- screen
. width : 모니터 스크린의 가로크기
. height : 모니터 스크리의 세로크기
- opener
. 자바스크립트 window.open()으로 열려진 창이라면 그 창을 열게한 창을 가리킨다.
사용자에 의해 열린 창이라면 (Ctrl + N) null 값을 갖는다.
- closed
. 창이 닫혔는지 확인할 때 사용한다. true 값이면 창이 닫혔다는 뜻이다.
- x, y
. 윈도우 창의 좌측 좌표(y) 와 상단좌표(y)
- onerror
. onerror 프로퍼티에 함수를 할당하면 창안에서 자바스크립트 에러가 발생할 때 마다 프로퍼티에
할당된 함수가 자동으로 호출된다.
. 세개의 전달인자가 전달된다.
. 첫 번째 전달인자는 에러메세지
. 두 번째 전달인자는 에러를 일으킨 자바스크립트 코드를 담은 문서의 URL
. 세 번째 전달인자는 문서 안에서 ㅇ러가 발생한 위치를 가리키는 줄 번호
. 할당된 함수가 true 를 반환하면 더 이상 브라우저가 에러를 출력하지 않는다.
- document
2-1 . document 객체의 다른 프로퍼티들
- forms[]
. elements[]
. options[] : form element 의 객체가 Select 일 때만 존재
- anchors[]
- links[]
- images[]
- applets[]
- domain : 문서가 불려온 서버의 호스트 네임
- URL : window.location 과는 다르게 읽기 전용이다.
(window.)location.href 는 server redirection 이 발생했을 때 처음 요청한 url 을 저장한다.
document.URL 은 server redirection 이 발생했을 때 새롭게 불려온 url 을 저장한다.
- cookie
- lastModified
- referrer
3. window 객체의 메소드
- open()
. 4가지 전달인자가 있으며 새롭게 열린 window 객체를 반환한다.
. 첫 번째 전달인자는 url 이다
. 두 번째 전달인자는 창의 이름으로 <form>, <a> 태그의 target 어트리뷰트의 값으로 유용하다.
만약 이미 존재하는 창의 이름을 전달하면 open()은 새 창을 여는 대신 단순히 이미 존재하는 창의 참조를
반환한다.
. 세 번째 전달인자는 창의 크기와 GUI 장식등을 지정하는 목록이다.
. 네 번째 전달인자는 두 번째 전달인자가 이미 존재하는 창의 이름을 지정할 때만 유용한다.
첫 번째 전달인자로 지정된 URL의 문서가 브라우저 창의 열어본 페이지 목록에 현재 항목을 덮어씌울
것인지(true), 또는 새로운 항목을 추가할 것인지(false)를 지정한다. 기본값을 false이다.
- close()
. document.close()와 구분하기 위해서 window.close() 처럼 window 를 명시적으로 적는다.
. 대부분의 브라우저는 자바스크립트 코드가 생성한 창들에 대해서만 닫을 권한을 부여한다.
. 창이 외관상 닫힌 뒤라도 window 객체는 계속 존재한다.
. 창이 닫힌 후에는 closed 프로퍼티를 제외하고는 다른 프로퍼티나 메소드에 접근할 수 없다.
- focus()
. 키보드 포커스를 창에 위치하도록 한다.
- blur()
. 창으로 하여금 키보드 포커스를 잃어버리게 한다.
- scrollBy()
. 창에 표시된 문서를 지정된 픽셀 수만큼 상하좌우로 스크롤한다.
- scrollTo()
. 문서를 지정한 절 대 위치로 스크롤한다.
. 지정된 문서 좌표가 창 문서 영역의 좌측 상단 모서리에 표시되게 문서를 옮긴다.
. HTML 엘리먼트에는 엘리먼트의 X, Y 좌표를 지정하는 offsetLeft 와 offsetTop 프로퍼티가 있다.
엘리먼트의 위치를 확인한 후에는 scrollTo() 메소드를 사용하여 그 지정된 엘리먼트가 창의 좌측
상단 모서리에 위치하게 창을 스크롤 할 수 있다.
4. 문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 전역객체로 하나의 window 객체를 공유한다.
5. window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다.
하지만 window 객체 그 자체의 수명은 창이 존재하는 한 계속해서 남는다.
window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지들을 읽고 버렸는지에 상관없이 항상 유효하다.
6. 창 위치와 크기
- IE 을 제외한 나머지 브러우저는 다음과 같이 표현한다.
// 데스크톱 띄운 브라우저 창의 전체 크기
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY
// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
// 데스크톱에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY
// HTML 문서가 표시되는 viewport 의 크기
// 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀다
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 수평, 수직 스크롤바의 위치를 나타낸다.
// 화면의 좌측 상단 모서리에 문서의 어느 부분이 위치하는지 나타난다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;
※ 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 = paris[i].indexOf('='); // 이름=값 을 추출한다.
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
var value = pairs[i].substring(pos+1); // 값을 추출한다.
value = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
args[argname] = value; // 객체의 프로퍼티로 저장한다.
}
return args
}
var args = new Object();
var query = location.search.substring(1); // 질의 문자열을 얻어온다.
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
var pos = paris[i].indexOf('='); // 이름=값 을 추출한다.
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
var value = pairs[i].substring(pos+1); // 값을 추출한다.
value = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
args[argname] = value; // 객체의 프로퍼티로 저장한다.
}
return args
}
※ 브라우저 종류에 관계없이 창의 위치와 크기 알아내기
- getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환한다.
- getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기를 반환한다.
- getDocumentWidth/Height() : 문서의 크기를 반환한다.
- getHorizontalScroll() : 수평 스크롤바의 위치를 반환한다.
- getVerticalScroll() : 수직 스크롤바의 위치를 반환한다.
- 브라우저 창의 크기를 반환하는 함수는 없음
var Geometry = {};
if (window.screenLeft === undefined) { // IE 브라우저
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screeX) { // 파이어폭스
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { // IE 이외의 브라우저
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
// DOCTYPE 이 존재하는 IE 6
} else if (document.documentElement && document.documentElement.clientWidth) {
Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
// DOCTYPE 이 없을 때 IE 6
} else if (document.body.clientWidth) {
Geometry.getViewportWidth = function() { return document.body.clientWidth; };
Geometry.getViewportHeight = function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
// 문서의 크기를 반환
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}
if (window.screenLeft === undefined) { // IE 브라우저
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
} else if (window.screeX) { // 파이어폭스
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { // IE 이외의 브라우저
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
// DOCTYPE 이 존재하는 IE 6
} else if (document.documentElement && document.documentElement.clientWidth) {
Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
// DOCTYPE 이 없을 때 IE 6
} else if (document.body.clientWidth) {
Geometry.getViewportWidth = function() { return document.body.clientWidth; };
Geometry.getViewportHeight = function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
// 문서의 크기를 반환
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; };
} else if (document.body.scrollWidth) {
Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}
※ 브라우저를 판단하기 위한 클라이언트 스니퍼(client sniffer)
- https://developer.mozilla.org/en/Browser_Detection_and_Cross_Browser_Support
반응형
반응형
1. PHP 5.2.0 이후 버전
- PHP 모듈에 라이브러리가 포함되어 있다.
- json_encode()를 호출하여 PHP변수와 데이터를 전달한다.
2. PHP 5.1 이전 버전
- http://json.org/ 에서 Services_JSON 을 클릭하면 http://pear.php.net/pepr/pepr-proposal-show.php?id=198 로 이동
- 라이브러리를 다운받는다.
- Services_JSON 객체를 생성하여 encode() 함수를 호출한다.
- PHP 모듈에 라이브러리가 포함되어 있다.
- json_encode()를 호출하여 PHP변수와 데이터를 전달한다.
$item = array(
'id' => 'coffee',
'price' => 3500,
'urls' => array('http://www.ahnseungkyu.com',
'http://www.google.com')
);
$output = json_encode($item);
print($output);
2. PHP 5.1 이전 버전
- http://json.org/ 에서 Services_JSON 을 클릭하면 http://pear.php.net/pepr/pepr-proposal-show.php?id=198 로 이동
- 라이브러리를 다운받는다.
- Services_JSON 객체를 생성하여 encode() 함수를 호출한다.
require_once('JSON.php');
$json = new Services_JSON();
$item = array(
'id' => 'coffee',
'price' => 3500,
'urls' => array('http://www.ahnseungkyu.com',
'http://www.google.com')
);
$output = $json->encode($item);
print($output);
반응형
반응형
1. http://www.webkit.org/ 에서 다운로드
2. Applications 폴더에 옮겨놓고 터미널 프롬프트창에 다음과 같이 입력
3. webkit 을 띄운다.
- 아래처럼 개발자 도구 옵션 설정
Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element context menu to access the Web Inspector.
2. Applications 폴더에 옮겨놓고 터미널 프롬프트창에 다음과 같이 입력
3. webkit 을 띄운다.
- 아래처럼 개발자 도구 옵션 설정
Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element context menu to access the Web Inspector.
반응형
반응형
1. http://www.json.org/ 사이트에서 json2.js 를 클릭하면 https://github.com/douglascrockford/JSON-js 로 이동
2. json2.js 를 다운로드
3. 다음과 같이 사용
2. json2.js 를 다운로드
3. 다음과 같이 사용
var itemDetails = JSON.parse(request.responseText);
반응형
반응형
1. DOM Level 2 방식의 이벤트 등록
2. Event 객체의 속성
- type
. 발생한 이벤트의 명 : 예)mouseover
- target (ie 에서는 srcElement)
. 이벤트가 발생한 객체, 보통 html element
3. setInerval() 과 setTimeout()
- setTimeout(a, b)
. a 함수를 b 밀리세컨드 이후에 한 번만 수행
- clearTimeout() 으로 취소
- setInterval(a, b)
. a 함수를 b 밀리세컨드 이후에 계속 수행
- clearInterval() 함수로 취소
4. DOM Tree
- element.nodeName, element.nodeValue 속성 사용
. 엔터나 공배도 node 로 인식할 수 있음. 이 경우 nodeName 이 #text 인지 확인
- document.createElement(), document.createTextNode()
. createElement() 는 html element 를 생성, createTextNode() 는 문자열을 생성
- appendChild(), insertBefore()
. appendChild() 는 맨 마지막에 자식 노드를 추가한다.
. insertBefore() 는 첫번째 전달인자의 노드를 두번째 전달인자인 노드 앞에 추가 시킨다.
- element.childNodes
. 모든 자식 노드를 배열의 형태로 리턴해준다.
. 자식 노드가 없을 때는 빈 배열이 넘어온다.
- element.firstChilde, element.lastChild, element.nextSibling, element.previousSibling, element.parentNode
- replaceNode(), removeChild(), createAttribute()
5. Node 의 프로퍼티와 메소드
- data
. NodeType 이 TextNode 일 경우 데이터를 나타낸다.
- appendData(), insertData(), deleteData(), replaceData()
6. Node 의 타입
- Element
. Node.ELEMENT_NODE : 1
- Text
. Node.TEXT_NODE : 3
- Document
. Node.DOCUMENT_NODE : 9
- Comment
. Node.COMMENT_NODE : 8
- DocumentFragment
. Node.DOCUMENT_FRAGMENT_NODE : 11
- Attr
. Node.ATTRIBUTE_NODE : 2
- IE6 에서는 NodeType 이 정의되지 않았으며 다음과 같이 사용할 수 있다.
8. DocumentFrament
. 문서 내에서 실제로 나타나지는 않고, 노드의 집합을 저장하고 저장된 노드들의 임시 저장소 역할을 담당
. 한 번에 화면에 그리므로 속도가 빠르다. (element.innerHTML 이나 Document 를 직접 제어하면 느리다.)
9. Element의 위치와 크기
- offsetLeft , offsetTop
. 엘리멘트의 X, Y 좌표
- offsetWidth, offsetHeight
. 프로퍼티의 가로와 세로 길이
- 오버플로어가 있는 엘리먼트의 Y 좌표 구하기
- z-index
. 값은 정수값으로 음수, 0 (디폴트), 양수 로 값이 작은 엘리먼트부터 큰 엘리먼트 순서로 그려진다.
. z-index 에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
(동일한 부모 컨테이너에 속한 엘리먼트)
. 일부 브라우저는 <iframe> 태그에 적용된 z-index 속성을 무시한다.
- visibility, display
. visibility : visible, hidden 값을 가진다. hidden 값을 가져도 문서 구조는 확보된 채 남아있다.
. display : block, item, none 값을 가진다. none 값을 가지면 문서 구조의 공간이 없어진다.
9. javascript 함수
- parseInt()
. 문자열을 숫자로 바꿔줌
function addEventHandler(obj, eventName, handler) {
if (document.attachEvent) {
obj.attachEvent("on" + eventName, handler);
} else if (document.addEventListener) {
obj.addEventListener(eventName, handler, false);
}
}
2. Event 객체의 속성
- type
. 발생한 이벤트의 명 : 예)mouseover
- target (ie 에서는 srcElement)
. 이벤트가 발생한 객체, 보통 html element
function getActivatedObject(e) {
var obj;
if (!e) {
// IE 옛날 버전은 event 객체를 전달하지 않음
obj = window.event.srcElement;
} else if (e.srcElement) {
// IE는 target 이 아니라 srcElement 로 넘어온다.
obj = e.srcElement;
} else {
obj = e.target;
}
return obj;
}
3. setInerval() 과 setTimeout()
- setTimeout(a, b)
. a 함수를 b 밀리세컨드 이후에 한 번만 수행
- clearTimeout() 으로 취소
var alarm = setTimeout(do, 2000);
function do() {
alert("wake up !!");
clearTimeout(alarm);
}
function do() {
alert("wake up !!");
clearTimeout(alarm);
}
- setInterval(a, b)
. a 함수를 b 밀리세컨드 이후에 계속 수행
- clearInterval() 함수로 취소
var alarm = setInterval(do, 2000);
var count = 0;
function do() {
count++;
alert("wake up !!");
if (count == 100) clearInterval(alarm);
}
var count = 0;
function do() {
count++;
alert("wake up !!");
if (count == 100) clearInterval(alarm);
}
4. DOM Tree
- element.nodeName, element.nodeValue 속성 사용
. 엔터나 공배도 node 로 인식할 수 있음. 이 경우 nodeName 이 #text 인지 확인
<div id="root">
<div id="firstParentDiv">첫번째 부모 div
<div id="firstChildDiv">첫번째 자식 div</div>
<div id="secondChildDiv">두번째 자식 div</div>
</div>
</div>
function showTree() {
var firstParent = document.getElementById('firstParentDiv');
var root = firstParent.parentNode;
var firstChild = firstParent.firstChild;
while (firstChild.nodeName == "#text") {
// 첫번째 "첫번째 부모 div" 문자열노드, 두번째 div
alert(firstChild.nodeValue);
firstChild = firstChild.nextSibling;
}
var secondChild = firstChild.nextSibling;
while (secondChild.nodeName == "#text") {
// 처음은 리턴 때문에 null 문자열노드, 두번째 div
alert(secondChild.nodeValue);
secondChild = secondChild.nextSibling;
}
secondChild = firstParent.lastChild;
while (secondChild.nodeName == "#text") {
// 처음은 리턴 때문에 null 문자열노드, 두번째 div
alert(secondChild.nodeValue);
secondChild = secondChild.previousSibling;
}
firstChild = secondChild.previousSibling;
while (firstChild.nodeName == "#text") {
// 처음은 리턴 때문에 null 문자열노드, 두번째 div
alert(firstChild.nodeValue);
firstChild = firstChild.previousSibling;
}
}- document.createElement(), document.createTextNode()
. createElement() 는 html element 를 생성, createTextNode() 는 문자열을 생성
- appendChild(), insertBefore()
. appendChild() 는 맨 마지막에 자식 노드를 추가한다.
. insertBefore() 는 첫번째 전달인자의 노드를 두번째 전달인자인 노드 앞에 추가 시킨다.
function addLetter() {
var currentWordDiv = document.getElementById('currentWord');
var p = document.createElement('p');
currentWordDiv.appendChild(p);
var letterText = document.createTextNode('제목입니다.');
p.appendChild(letterText);
}
var currentWordDiv = document.getElementById('currentWord');
var p = document.createElement('p');
currentWordDiv.appendChild(p);
var letterText = document.createTextNode('제목입니다.');
p.appendChild(letterText);
}
- element.childNodes
. 모든 자식 노드를 배열의 형태로 리턴해준다.
. 자식 노드가 없을 때는 빈 배열이 넘어온다.
<div id="me"></div>
function getChildNodes() {
var me = document.getElementById('me');
alert (me.childNodes.length);
}- element.firstChilde, element.lastChild, element.nextSibling, element.previousSibling, element.parentNode
- replaceNode(), removeChild(), createAttribute()
5. Node 의 프로퍼티와 메소드
- data
. NodeType 이 TextNode 일 경우 데이터를 나타낸다.
- appendData(), insertData(), deleteData(), replaceData()
6. Node 의 타입
- Element
. Node.ELEMENT_NODE : 1
- Text
. Node.TEXT_NODE : 3
- Document
. Node.DOCUMENT_NODE : 9
- Comment
. Node.COMMENT_NODE : 8
- DocumentFragment
. Node.DOCUMENT_FRAGMENT_NODE : 11
- Attr
. Node.ATTRIBUTE_NODE : 2
- IE6 에서는 NodeType 이 정의되지 않았으며 다음과 같이 사용할 수 있다.
if (!window.Node) {
var Node = { ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_MODE: 3
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
};
}
var Node = { ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_MODE: 3
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
};
}
8. DocumentFrament
. 문서 내에서 실제로 나타나지는 않고, 노드의 집합을 저장하고 저장된 노드들의 임시 저장소 역할을 담당
. 한 번에 화면에 그리므로 속도가 빠르다. (element.innerHTML 이나 Document 를 직접 제어하면 느리다.)
function reverse(n) {
var f = document.createDocumentFrament();
while(n.lastChild) f.appendChild(n.lastChild);
n.appendChild(f);
}
var f = document.createDocumentFrament();
while(n.lastChild) f.appendChild(n.lastChild);
n.appendChild(f);
}
9. Element의 위치와 크기
- offsetLeft , offsetTop
. 엘리멘트의 X, Y 좌표
- offsetWidth, offsetHeight
. 프로퍼티의 가로와 세로 길이
- 오버플로어가 있는 엘리먼트의 Y 좌표 구하기
function getY(element) {
var y = 0;
for (var e=element; e; e=e.offsetParent)
y += e.offsetTop;
// 엘리먼트 조상을 따라 올라가다 scrollTop 어트리뷰티가 설정된 것을 찾는다.
// document.body 에 도달하면 루프를 종료한다.
for (e=element.parentNode; e && e != document.body; e=e.parentNode)
if (e.scrollTop) y -= e.scrollTop; // 스크롤바 값을 뺀다.
return y;
}
var y = 0;
for (var e=element; e; e=e.offsetParent)
y += e.offsetTop;
// 엘리먼트 조상을 따라 올라가다 scrollTop 어트리뷰티가 설정된 것을 찾는다.
// document.body 에 도달하면 루프를 종료한다.
for (e=element.parentNode; e && e != document.body; e=e.parentNode)
if (e.scrollTop) y -= e.scrollTop; // 스크롤바 값을 뺀다.
return y;
}
- z-index
. 값은 정수값으로 음수, 0 (디폴트), 양수 로 값이 작은 엘리먼트부터 큰 엘리먼트 순서로 그려진다.
. z-index 에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
(동일한 부모 컨테이너에 속한 엘리먼트)
. 일부 브라우저는 <iframe> 태그에 적용된 z-index 속성을 무시한다.
- visibility, display
. visibility : visible, hidden 값을 가진다. hidden 값을 가져도 문서 구조는 확보된 채 남아있다.
. display : block, item, none 값을 가진다. none 값을 가지면 문서 구조의 공간이 없어진다.
9. javascript 함수
- parseInt()
. 문자열을 숫자로 바꿔줌
반응형
