'나홀로스터디/JS 완벽가이드'에 해당되는 글 13건
- 2015.03.31 10장 모듈과 네임스페이스
- 2014.12.23 쿠키와 클라이언트 측 지속성
- 2014.12.15 CSS와 DHTML
- 2014.11.26 문서 스크립팅
- 2014.11.18 웹 브라우저와 자바스크립트
10장 모듈과 네임스페이스
2015. 3. 31. 12:59 나홀로스터디/JS 완벽가이드
10장 모듈과 네임스페이스
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
10.1 모듈과 네임스페이스 생성
10.2 네임스페이스에서 심벌 가져오기
10.3 모듈 유틸리티
오늘날 자바스크립트로 작성된 많은 스크립트는 외부 모듈이나 자바스크립트 코드 라이브러리에 의존한다. 자바스크립트는 언어 자체적으로 모듈을 생성하거나 관리하기 위한 기법을 제공하지 않기 때문에 이식할 수 았으며 재사용할수 있는 자바스크립트 코드를 작성하는 것은 이 장에서 설명할 몇 가지 기본적인 관습과 관련된 문제다.
가장 중요한 관습은 두 모듈이 같은 이름을 가진 전역 프로퍼티를 정의했을 때 발생할 수 있는 이름 충돌을 피하기 위해서 네임스페이스를 사용하는 것이다. 다른 관습은 모듈 초기화 코드를 사용하는 것인데 웹 브라우저의 문서를 조작하는 모듈은 문서가 완전히 로딩된 후에야 실행되는 코드를 필요로 하기 때문에 중요하다.
10.1 모듈과 네임스페이스 생성
전역 변수를 정의하면 여러분이 작성한 모듈을 사용하는 프로그래머 혹은 다른 모듈이 그 변수를 엎어쓸 위험이 항상 존재한다. 이에 대한 해결책은 모듈에서 사용할 모든 메서드와 프로퍼티를, 그 모듈을 위해 특별히 생성한 네임스페이스 안에 정의하는 것이다.
10.2 네임스페이스에서 심벌 가져오기
고유한 네임스페이스의 문제점은 함수의 이름을 너무 길게 만든다는 것이다.
그 대안으로는 전역 네임스페이스를 사용하지 않고 입력하기 쉬운 네임스페이스로 심벌을 가져오는 방법이 있는데 중요한 점이 몇가지 있다.
첫째, 함수나 객체 또는 배열을 참조하는 심벌들만 가져올 수 있다. 만약 값이 숫자나 문자열 같은 기본 타입인 심벌을 가져온다면 단순히 그 값의 정적인 사본을 얻는다. 값에 대한 변화는 네임스페이스 안에서만 발생하며 가져온 사본에는 반영되지 않는다.
둘째, 가져오기가 모듈 사용자를 위한 것임을 이해하여 항상 완벽한 전체 심벌 이름을 사용해야 한다.
10.3 모듈 유틸리티
Module.require() 함수는 주어진 버전과 이름을 가진 모듈이 존재하는지 검사하고 만약 존재하지 않는다면 에러를 발생시킨다.
Module.importSymbols() 함수는 심벌을 전역 네임스페이스 혹은 주어진 다른 네임스페이스로 가져오는 작업을 간소화한다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
|---|---|
| CSS와 DHTML (0) | 2014.12.15 |
| 문서 스크립팅 (0) | 2014.11.26 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
쿠키와 클라이언트 측 지속성
2014. 12. 23. 14:08 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
19.1 쿠키 개요
19.2 쿠키 저장하기19.3 쿠키 읽기
19.5 쿠키의 대안들
19.5.6 지속되는 데이터와 보안
Document객체에는 cookie는 서버 측 스크립트에서도 사용되며 HTTP 프로토콜을 확장한 표준 기능 중 하나다.
19.1 쿠키 개요
'쿠키'는 이름을 가진 소량의 데이터이며 웹 브라우저에 의해 저장되고 특정 웹 페이지나 웹 사이트와 연결되어 있다. 이것은 웹 사이트에 기억력을 부여함으로써 한 페이지에서 입력되었던 자료를 다른 페이지에서 스크립트나 서버 측 프로그램이 사용할 수 있게 해주고 사용자가 웹 페이지를 떠났다가 다시 돌아 왔을때 기존의 사용자 설정이나 기타 상태 변수들을 재생할 수 있다. 쿠키는 본래 서버 측 프로그램 작성을 위해 설계되었으며 가장 하위 레벨에서 보자면 HTTP 프로토콜의 확장처럼 구현되어 있다. 쿠키 데이터는 웹 브라우저와 웹 서버 사이에서 자동으로 전송되기 때문에 클라이언트에 저장된 쿠키값을 서버 측 스크립트에서 읽거나 쓸 수 있다.
cookie는 문자열 프로퍼티로서 웹 페이지에 적용되는 하나 또는 그 이상의 쿠키를 읽고 생성하고 변경하고 삭제할 수 있다. cookie의 값을 읽으면 현재 문서에 적용되는 모든 쿠키들의 이름과 값을 담고 있는 문자열을 얻는다. 각 쿠키에는 이름과 값 외에도 그 쿠키의 유효기간, 가시범위, 보안 등을 제어하는 선택적 속성들이 존재할 수 있다. 본래 쿠키는 일시적인 존재로 쿠키에 저장되는 값은 웹 브라우저 세션 기간동안에는 보존되지만 사용자가 브라우저를 종료하면 쿠키의 값을 잃어버리게 된다.
max-age 어트리뷰트는 쿠키의 유효 기간을 초 단위로 지정한다. expires나 max-age 중 하나가 설정되어 있으면 브라우저는 나중에 이 사용자가 다시 웹 페이지를 방문할 때 사용하기 위해서 쿠키를 로컬 파일에 저장해 놓고 지정된 유효 기간이 초과된다면 파일에 저장되었던 쿠키는 브라우저에 의해 자동으로 삭제된다.
path 어트리뷰트는 어떤 쿠키와 연결된 웹 페이지를 지정하는데 쓰인다. 기본 설정으로 쿠키에 연결된(그리고 그 쿠키가 접근할 수 있는) 웹 페이지는 바로 그 쿠키를 생성한 웹 페이지, 그리고 그와 같은 디렉터리나 하위 디렉터리에 속한 모든 웹 페이지들이다.
그러나 같은 웹 서버에 있는 어떤 페이지라도 그 페이지 URL에 앞서 path 어트리뷰트에 지정했던 경로가 포함되어 있기만 하면 이 쿠키를 공유할 수 있다. 기본적으로 쿠키는 그 쿠키가 얻어진 웹 서버에 속한 페이지들에 한해서만 접근할 수 있다. 여러 웹 서버에서 쿠키를 공유하려 할때는 domain 어트리뷰트가 설정되어 있지 않다면 디폴트 도메인은 해당 페이지가 속한 웹 서버의 호스트네임이다.
secure라는 불리언 어트리뷰트는 쿠키값들이 네트워크를 통해서 전송되는 방법을 지정한다. 기본적으로 쿠키는 보안이 설정되지 않은 통상적인 HTTP 연결을 통해서 전송된다. 하지만 secure 어트리뷰트가 설정되었다면 브라우저와 서버가 오직 HTTPS 내지는 기타 보안 프로토콜로 연결되었을 때만 이 쿠키가 전송된다.
한가지 유의할 점은 쿠키 어트리뷰트가 자바스크립트 객체 프로퍼티가 아니라는 점이다.
19.2 쿠키 저장하기
일시적 쿠키를 현재 문서에 연결하려면 간단히 다음과 같은 형태의 문자열을 cookie 프로퍼티에 설정하면 된다.
// 이름 = 값
document.cookie = "vertion=" + encodeURIComponent(document.lastModified);
쿠키 값에는 세미콜론, 쉼표, 공백이 포함될수 없으므로 쿠키값을 저장하기에 앞서 코어 자바스크립트 전역 함수인 encodeURIComponent()를 사용해서 그 값을 인코딩해야 하고 인코딩된 쿠키값을 읽을 때에는 위 함수에 대응하는 decodeURIComponent() 함수를 사용해야 한다.
지속되는 쿠키를 생성하려면 max-age 어트리뷰트를 사용해서 쿠키의 유효 기간을 초 단위로 지정하면 된다.
쿠키에 설정된 값을 삭제하려면 기존과 동일한 이름, 경로, 도메인에 임의의 값을 지정하고 max-age 어트리뷰트를 0으로 설정하면 된다.
19.2.1 쿠키의 한계
쿠키는 본래 적은 데이터를 가끔 저장하려는 목적으로 설계되었다. 최소 총 300개의 쿠키를 유지할 것, 웹 서버 당 최소 스무개의 쿠키를 유지할 것(전체 웹 서버를 말하는 것이며 그 웹 서버에 속한 하나의 페이지나 하나의 사이트를 말하는것이 아님) 쿠키당 최소 4킬로바이트의 데이터를 유지하는것이 좋다.
19.3 쿠키 읽기
자바스크립트 표현식에 cookie 프로퍼티를 사용할 때 cookie 프로퍼티에서 반환되는 값은 현재 문서에 적용되는 모든 쿠키를 포함하는 문자열이다. 이 문자열은 세미콜론으로 구분된 이름=값 쌍들의 나열이며 여기서 이름은 쿠키의 이름이고 값은 문자열의 값이다. 이때 이 이름을 가진 쿠키에 설정되어 있는 어트리뷰트들은 cookie 프로퍼티를 통해 얻어지는 이름 = 값 쌍의 문자열 값에 포함되지 않는다. 특정 이름을 가진 쿠키의 값을 판별하려면 String.indexOf()나 String.substring() 메서드를 사용하거나 String.split()으로 문자열을 잘라서 개별 쿠키들로 분리하면 된다. cookie 프로퍼티에서 일단 하나의 쿠키값을 추출해 냈다면 그 쿠키를 생성할 때 사용되었던 포맷 내지는 인코딩 방법에 따라 그 값을 해석해야 한다.
19.4 쿠키 예
19.5 쿠키의 대안들
쿠키를 사용할 경우 몇가지 단점이 존재한다.
- 데이터 크기가 4킬로바이트로 제한된다.
- 오직 클라이언트측 스크립트에서만 사용되는 쿠키라 할지라도 해당 쿠키가 연결된 웹 페이지가 요청될 때마다 이 쿠키도 웹 서버로 함께 업로드된다. 만일 웹서버에서 이 쿠키를 사용하지 않는다면 이는 대역폭을 낭비할 뿐이다.
쿠키를 대신할 수 있는 대안으로는 마이크로소프트 인터넷 익스플로러와 어도비 플래시 플러그인에서 클라이언트 측에 지속성을 유지하기 위한 독점적인 기법들을 각자 나름대로 정의하고 있는데 이 둘 모두 표준은 아니다.
19.5.1 IE의 userData에 의한 지속성
인터넷 익스플로러에서는 DHTML 비헤이비어를 통해 클라이언트 측의 지속성을 가능케 한다. 이 기법에 접근하려면 문서에 속한 엘리먼트에 특별한 비헤이비어를 적용해야 하는데 이를 위한 한가지 방법은 CSS를 사용하는 것이다.
<style>.persistent{behavior:url(#default#userData)}</style>
<div id="memory" class="persistent"></div> 하지만 behavior 속성은 표준 CSS의 일부가 아니기 때문에 IE 이외의 웹 브라우저에서는 이를 간단히 무시해버릴 것이다. 어떤 엘리먼트에 behavior스타일 속성을 설정하는 일은 자바스크립트를 통해서도 할 수 있다.
var memory = document.getElementById("memory");
memory.style.behavior = "url('#default#userData')";
19.5.2 플래시의 SharedObject에 의한 속성
버전 6이나 그 이후의 플래시 플러그인에서는 SharedObject 클래스를 사용하여 클라이언트 측에 지속성을 부여할 수 있다. SharedObject 클래스는 플래시 무비의 ActionScript 코드를 사용해 스크립트로 작성될 수 있다. SharedObject 클래스를 사용하려면 먼저 다음의 ActionScript 코드를 사용해 SharedObject를 생성한다. 쿠키에서 이름을 지정하는 것과 같이 여기서도 여러분이 저장할 지속되는 데이터의 이름을 지정해야 함을 유념하라.
19.5.6 지속되는 데이터와 보안
여러분이 저장하는 모든 데이터는 암호화되지 않은 상태로 사용자의 하드디스크에 보관됨을 잊지 말아야 한다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 10장 모듈과 네임스페이스 (0) | 2015.03.31 |
|---|---|
| CSS와 DHTML (0) | 2014.12.15 |
| 문서 스크립팅 (0) | 2014.11.26 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
CSS와 DHTML
2014. 12. 15. 17:26 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
16.1 CSS 개요
16.2 DHTML과 CSS
16.3 인라인 스타일 스크립트
16.4 계산된 스타일의 스크립팅
16.5 CSS 클래스 스크립팅
16.6 스타일시트 스크립팅
css와 자바스크립트를 함께 사용하면 때로는 동적인 HTML을 표현할 수 있다.
16.1 CSS 개요
CSS에서 각 스타일은 세미콜론으로 구분된 이름/값 속성 쌍으로 지정된다. CSS 표준에서는 자주 함께 쓰이는 몇 가지 스타일 속성들을 하나로 모아놓은 단축 속성들을 지원한다.
16.1.1 문서 엘리먼트에 스타일 규칙 적용하기
문서 엘리먼트에 스타일 속성을 적용하는 방법에는 여러가지가 있는데 한 가지 방법은 각 HTML 태그의 style 어트리뷰트에 스타일 속성을 써넣는 것이다.
<p style="margin-left:1in; margin-right:1in">
CSS를 사용하는 중요한 목적 중 하나는 문서의 표현에서 내용과 구조를 분리하는 것인데 위와 같이 하면 목적을 달성할 수 없다. 문서 표현에서 구조를 분리해내려면 '스타일시트'를 사용하면 된다. 스타일시트를 사용하면 모든 스타일 정보를 한 군데로 모아서 정리할 수 있다.
또 다른 종류의 스타일시트 규칙으로는 해당 스타일을 적용할 엘리먼트의 '클래스'를 지정하는 선택자를 사용하는 형태가 있다. 마지막으로, 스타일시트에는 id 어트리뷰트로 지정된 개별 엘리먼트에 한해서만 스타일을 적용할 수 있다는 규칙도 있다.
16.1.2 문서에 스타일시트 결합시키기
HTML 문서의 <head> 태그 안에 <style>과 </style> 태그를 만들고 그 사이에 스타일시트를 넣음으로써 HTML 문서와 스타일시트를 합칠 수 있다. 한 웹사이트에 있는 둘 이상의 페이지에서 같은 스타일시트를 사용한다면 스타일시트를 HTML에 넣기보다는 그 자체를 별도의 파일로 저장하여 CSS 파일을 HTML 페이지에 포함시킬수 있다. HTML 페이지에 스타일시트를 포함시키려면 <link> 태그를 사용하면 된다. 또한 <link> 태그를 사용해서 대체 스타일시트를 지정할 수도 있다. CSS @import 지시어를 사용하여 페이지 고유의 스타일시트에 공통 CSS 파일을 포함시킬 수 있다.
16.1.3 Cascade
CSS의 C는 캐스케이딩(cascading)을 의미한다. 이 용어가 가리키는 의미는 문서의 어떤 엘리먼트에 적용되는 스타일 규칙은 다른 위쪽의 단계에서 흘러 내려온 것일 수 있다는 뜻이다.
사용자 스타일시트는 브라우저의 기본 스타일시트보다 우선한다. 문서의 저자 스타일시트가 사용자 스타일시트보다 우선한다. 인라인 스타일은 모든 것보다 우선한다는 규칙이 있다. 예외 규칙으로 사용자 스타일 속성에 !important 변경자가 포함된 값이 있으면 저자 스타일시트보다 우선한다.
16.1.4 CSS 버전
CSS1은 1996년 10월에 채택되었고 색, 폰트, 바깥 여백, 테두리 등을 비롯한 기본 스타일들에 대한 속성을 정의했다. CSS2는 1998년 5월에 정의되었고 엘리먼트가 배치될 위치를 절대적으로(absolute) 지정하는 기능이 있다.
16.2 DHTML과 CSS
DHTML 콘텐츠 개발자들에게 CSS의 가장 즁요한 기능은 보통의 CSS 스타일 속성을 사용하여 문서에 있는 각 엘리먼트의 가시성이나 크기, 정확한 위치를 지정할 수 있다는 것이다.
16.2.1 DHTML의 핵심: 절대적 위치 지정
CSS의 position 속성은 엘리먼트를 배치하는 방법을 지정한다.
static
디폴드 값이며 문서 내용의 기본 흐름을 따라 엘리먼트가 배치되게 한다. 정적(static)으로 배치된 엘리먼트는 DHTML 엘리먼트가 아니기 때문에 top, left 등의 속성으로 위치를 지정할 수 없다.
absolute
이 값으로 설정된 엘리먼트는 자신을 감싸고 있는 컨테이너 엘리먼트를 기준으로 위치가 지정된다. 절대적(absolute)으로 배치된 엘리먼트는 다른 엘리먼트들과 무관하게 독립적으로 배치되며 <body>를 기준삼은 상대적인 위치를 갖는다. 만일 다른 엘리먼트 속에 이 엘리먼트가 중첩되어 있다면 감싼 엘리먼트를 기준삼은 상대적인 위치를 갖는다.
fixed
이 값은 브라우저 창을 기준으로 하여 엘리먼트 위치를 지정할 수 있게 한다. fixed로 배치된 엘리먼트는 항상 보이며(감출 수 없다) 문서를 스크롤해도 따라 움직이지 않는다. 고정적 배치는 대부분의 최신 브라우저에서 지원되지만 특이하게도 IE6만큼은 예외다.
relative
엘리먼트의 position 속성이 relative로 설정되면 이 엘리먼트는 일단 문서의 기본 흐름을 따라 배치된 후 그 위치를 기준으로 상대적인 거리에 배치된다.
16.2.2 CSS 위치 지정 예: 그림자가 깔린 텍스트
text-shadow 속성은 CSS3에서 채택되었으나 아직 구현하지 못하는 브라우저가 있으므로 shadow.js라는 자바스크립트 모듈을 사용하여 표현할 수 있다.
16.2.3 엘리먼트 위치와 크기 알아내기
최신브라우저에서 엘리먼트의 offsetLeft와 offsetTop 프로퍼티는 해당 엘리먼트의 X좌표와 Y좌표를 반환한다. 마찬가지로 offsetWidth와 offsetHeight 프로퍼티는 가로와 세로 길이를 반환한다. 이들 프로퍼티는 읽기 전용이며 픽셀 값을 숫자 타입으로 반환한다.('px' 단위가 붙지 않는다.) 위치가 지정되지 않은 엘리먼트에서 offsetParent는 브라우저마다 다르게 처리된다. 따라서 브라우저에 관계없이 엘리먼트의 위치를 판별하려면 offsetParent가 참조하는 엘리먼트들을 따라서 루프를 돌면서 오프셋 값을 누적시키는 것이다.
function getX(e){
var x = 0; // 0에서 시작한다
while(e){ // 엘리먼트 e에서 시작한다.
x += e,offsetLeft; // 오프셋 값을 더한다.
e = e.offsetParent; // 그리고나서 offsetParnet를 따라 올라간다.
}
return x; // offsetLeft의 총합을 반환한다.
}여기서 반환하는 값은 문서 좌표인데 이 값은 CSS 좌표와 호환되며 브라우저의 스크롤바 위치에 영향을 받지 않는다. 하지만 문서내 overflow 속성이 사용된다면 오프셋을 계산하는데 좀더 복잡한 과정을 사용해야 한다.
16.2.4 제 3의 차원: z-index
z-index 속성은 엘리먼트들을 쌓아 올리는 순서를 지정하며 둘 이상의 엘리먼트들이 겹쳐있을 때 어느 것이 더 위에 위치할 것인지 가리킨다. z-index의 디폴트 값은 0이지만 z-index 속성은 정수값이다. 단, z-index에 의해 지정되는 쌓아 올리기 순서는 오직 서로 형제 관계인 엘리먼트들에게만 적용된다.
16.2.5 엘리먼트 표시(display)와 가시성(visibility)
문서 엘리먼트를 화면에 실제로 보여줄 것인지를 제어하는 두 가지 CSS 속성은 visibility와 display 속성이다. visibility는 속성값이 hidden이면 해당 엘리먼트가 보이지 않고 속성값이 visible이면 해당 엘리먼트가 보인다. 한편 disply 속성은 보다 포괄적이며 해당 항목이 표시되는 방법을 지정하는데 사용되는데 해당 엘리먼트가 블록 엘리먼트인지, 인라인 엘리먼트인지, 리스트 항목인지 등을 지정한다. 그러나 display 속성이 none으로 설정되면 해당 엘리먼트가 표시되지 않음은 물론 배치조자 되지 않는다.
visibility와 display 스타일의 속성의 차이점이라 하면 동적으로 배치된 엘리먼트에 각 스타일을 적용했을때 일어나는 효과가 서로 다르다는 것이다. 문서 구조의 기본 흐름을 따라 배치되는 엘리먼트들(position속성이 static 또는 relative일 때)에 visibility를 hidden으로 설정하면 해당 엘리먼트가 보이지 않을 뿐 할당된 공간은 그대로 남아 있게 된다. 반면 엘리먼트 display 속성을 none으로 설정하면 문서 구조상에 해당 엘리먼트를 위한 공간이 아에 할당되지 않는다. (absolute나 fixed로 지정된 엘리먼트에서는 이 두 속성의 효과가 동일하다.)
16.2.6 CSS 박스 모델과 위치 지정 세부 사항
엘리먼트의 테두리(border)란 해당 엘리먼트 주변(또는 주변의 일부분)에 그려지는 사각형으로 css속성에서 각 테두리마다 스타일을 지정할 수 있다. margin과 padding 속성은 둘다 엘리먼트 주변의 여백을 지정하는 데에 쓰이는데 margin은 엘리먼트 테두리 바깥쪽에 있는 여백을 지정하는 반면 padding은 테두리 안쪽에 있는 여백을 지정한다.
width와 height가 지정하는 크기는 오직 엘리먼트의 내용 영역뿐이다. 안쪽 여백, 테두리, 바깥 여백 등에 필요한 추가 공간은 여기에 포함되지 않는다. 테두리까지 포함하여 엘리먼트가 화면상에서 차지하는 총 면적을 구하려면 엘리먼트의 width 값에 좌우 안쪽 여백과 좌우 테두리 굵기를 더해야 한다.
16.2.6.1 인터넷 익스플로러의 변덕
윈도우용 익스플로러 버전 4부터 5.5는 width와 height 속성을 엘리먼트의 테두리와 안쪽 여백이 포함된다.(하지만 바깥 여백은 포함되지 않는다.) 브라우저는 <!DOCTYPE> 선언이 있으면 엄격한 표준을 따르지만 선언이 없다면 디폴트는 하위 호환을 따르는 방식이 된다
16.2.7 색(color), 투명성(tranceparency), 투명도(translicency)
CSS에는 색을 지정할수 있는 문법이 있는데 색을 구성하는 삼원색인 빨강, 초록, 파랑 성분값을 16진수 숫자로 지정하는 방법이 있다. 만일 엘리먼트의 배경색이나 배경 이미지를 지정하지 않는다면 그 엘리먼트의 배경은 보통 투명하다. 하지만 모든 엘리먼트가 디폴트로 투명한 것은 아니다. 투명도를 지정하려면 CSS3의 opacity 속성을 사용하는데 1은 100% 불투명한 것을(디폴트), 0은 0% 불투명(또는 100% 투명)한 것을 의미한다.
16.2.8 부분적 가시성(partial visibility):overflow와 clip
visibility 속성은 문서 엘리먼트를 완전히 감추고 싶을 때 쓰인다. 한편 overflow와 clip 속성은 엘리먼트의 일부분만을 보이려 할 때 쓸수 있다.
visible(디폴트)
필요에 따라 내용물이 지정된 크기보다 넘쳐서 엘리먼트 박스 밖으로도 그려질 수 있게 허용한다.
hidden
지정된 크기를 초과하는 내용물은 잘려나가서 보이지 않는다. 따라서 크기와 위치 지정 속성에 의해 정의된 영역 밖으로는 내용물이 전혀 그려지지 않는다.
scroll
엘리먼트 박스에 수평, 수직 스크롤바가 추가된다.
auto
내용물이 엘리먼트 크기를 초과할 때에만 스크롤바가 표시된다.
16.3 인라인 스타일 스크립트
자바스크립트 객체에는 CSS1과 CSS2 스타일 속성에 해당하는 프로퍼티가 있다. 이들 프로퍼티의 값을 설정하는 것은 style 어트리뷰트에서 해당 스타일을 설정하는 것과 동일한 효과를 일으킨다. 이들 프로퍼티를 읽으면 (스타일이 있으면) 그 엘리먼트의 style 어트리뷰트에 설정되어 있는 CSS 속성 값을 읽을 수 있는데 중요한 점은 엘리먼트의 style 프로퍼티로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일만 지정되어 있다는 것이다.
16.3.1 명명 규칙: 자바스크립트의 CSS 속성들
CSS 속성 중에는 이름 중간에 하이픈(-)이 들어가는 경우가 많다. 하지만 자바스크리비트에서 하이픈은 마이너스 기호로 해석되기 때문에 CSS2Properties 객체의 프로퍼티 이름들은 원래의 CSS 속성 이름들과 약간 다르다. CSS2Properties 프로퍼티 이름을 만들때는 하이픈을 제거하는 대신 하이픈 직후의 문자를 대문자로 바꾼다.
자바를 비롯한 몇몇 언어에서 'float'이라는 단어가 키워드로 지정되어 있으므로 CSS2Properties 객체는 CSS의 float 속성에 대응하는 프로퍼티 이름에 float 를 사용할 수 없다. 자바스크립트에서는 이 문제에 대한 해결책으로 float 속성 이름 앞에 'css'라는 접두사를 붙여 cssfloat이라는 프로퍼티를 사용할 수 있게 하였다.
16.3.2 스타일 프로퍼티를 사용하여 작업하기
CSS2Properties 객체의 스타일 프로퍼티를 사용하여 작업할 때엔 모든 값을 문자열로 지정해야 한다. 엘리먼트에 대해 자바스크립트로 수행하려면 모든 값을 따옴표로 감싸야만 한다. 또 하나, 모든 위치 지정 프로퍼티에는 단위를 필수적으로 명시해야 함을 유의하라.
HTMLElement의 style 프로퍼티에서 CSS2 Properties 객체를 얻어낼 경우 이 객체의 프로퍼티가 나타내는 것은 해당 엘리먼트의 인라인 스타일 속성 값이다. 바꿔말하면 이들 프로퍼티 중 하나를 설정한다는 것은 곧 그 엘리먼트의 style 어트리뷰트에 지정된 CSS 속성을 설정하는 것이 된다. 이 설정은 오직 그 하나의 엘리먼트에만 영향을 미치며 CSS 계층 구조에서 전파되는 모든 스타일 설정보다 이 인라인 속성이 우선한다.
16.3.3 예: CSS 툴팁
첫째, 스타일시트에는 툴팁의 그림자, 배경색, 테두리 그리고 폰트가 지정되어 있다.
둘째, Tooltip() 생성자에서 툴팁 <div> 엘리먼트가 생성될 때 position:absolute 등과 같은 속성이 인라인 스타일로 지정된다.
셋째, top, left, visibility 스타일은 Tooltip.show() 메서드에 의해 툴팁이 표시될 때 지정된다.
16.3.4 DHTML 애니메이션
움직이는 애니메이션 효과를 주려면 구현하려는 이미지의 style.left 프로퍼티를 반복적으로 증가시켜 원하는 위치에 도달시키면 된다. 다른 방법으로는 style.clip 프로퍼티를 반복적으로 변경함으로써 이미지의 보이는 부분을 픽셀 단위로 증가시킬 수도 있따. 모든 DHTML 애니메이션에는 setInterval()이나 setTimeout() 함수가 필요할 것이다.
16.4 계산된 스타일의 스크립팅
자바스크립트에서 HTML 엘리먼트의 style 프로퍼티는 HTML의 style 어트리뷰트에 대응한다. 또한 style 프로퍼티의 값으로 얻어지는 CSS2Properties 객체에는 오직 해당 엘리먼트의 인라인 스타일 정보만 저장되어 있다.
경우에 따라 어떤 엘리먼트에 적용된 모든 스타일을 정확히 알고 싶을 때가 있는데 W3C 표준에 따르면 어떤 엘리먼트의 계산된 스타일을 얻어내는 API Window 객체의 getComputedStyle() 메서드다. 이 메서드의 첫째 전달인자는 계산된 스타일을 얻어내려는 대상 엘리먼트이고 둘째 전달인자는 스타일을 얻어내려는 ":before"나 ":after" 같은 CSS 모조 엘리먼트다. getComputedStyle() 의 반환값은 CSS2Properties 객체이며 이 객테는 지정된 엘리먼트(또는 모조 엘리먼트)에 적용된 모든 스타일을 표현하고 읽기 전용이다.
IE는 getComputedStyle() 메서드를 지원하지 않지만 모든 HTML 엘리먼트에는 currentStyle 프로퍼티가 있고 이 프로퍼티가 해당 엘리먼트에 대한 계산된 스타일을 지니고 있다.
16.5 CSS 클래스 스크립팅
이 절에서는 HTML 엘리먼트의 className 프로퍼티를 사용하여 HTML class 어트리뷰트의 값을 스크립팅 하는 방법을 알아보자
16.6 스타일시트 스크립팅
16.6.1 스타일시트 활성화와 비활성화
스타일시트를 활성화 또는 비활성화시키는 스타일시트 스크립팅 기법은 가장 간단하며 호환성과 안정성면에서도 가장 우수하다. HTML DOM 레벨2 표준에는 <link>와 <script> 엘리먼트에 대해 disabled 프로퍼티가 정의되어 있는데 HTML 태그에는 이 프로퍼티에 대응하는 disabled 어트리뷰트 등이 존재하지 않는다. 하지만 자바스크립트에는 읽고 쓸 수 있는 disabled 프로퍼티가 존재한다.
16.6.2 스타일시트 객체와 스타일시트 규칙
문서에 적용되어 있는 스타일시트는 document 객체의 styleSheets[] 배열에 저장되어 있다. 배열의 엘리먼트는 CSSStyleSheet 객체이고 이 객체에는 cssRules[] 배열이 있는데 여기에 스타일시트 규칙들이 포함되어 있다. IE는 cssRules[] 프로퍼티를 지원하지 않지만 그와 동등한 rules 프로퍼티가 있다. cssRules[]또는 rules[] 배열의 엘리먼트는 CSSRules 객체다. W3C 표준에 의하면 CSSRule 객체는 어떤 종류의 CSS 규칙이라도 표현할 수 있는데 여기에는 at-규칙(at-rule)이라 불리는 @import나 @page 지시어도 포함된다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 10장 모듈과 네임스페이스 (0) | 2015.03.31 |
|---|---|
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
| 문서 스크립팅 (0) | 2014.11.26 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
문서 스크립팅
2014. 11. 26. 17:05 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
15.1 동적인 문서 내용
15.2 Document의 프로퍼티
15.3 레거시 DOM : Document 객체의 집합
15.4 W3C DOM의 개요
15.5 문서순회
15.6 문서 내 엘리먼트 찾기
15.7 문서 수정하기
15.8 문서에 새로운 내용 추가하기
클라이언트 측 자바스크립트는 정적인 HTML문서를 대화식 웹 애플리케이션으로 만들기 위해 존재한다.
모든 웹 브라우저 창(또는 프레임)은 HTML 문서를 화면에 나타내고 Window 객체는 이 창을 표현하기 위한 객체이며 여기에는 Document 객체를 참조하는 document 프로퍼티가 있다.
Document Object Model(DOM)은 문서를 구성하는 객체에 어떻게 접근할 것인가를 정의하는 API다.
15.1 동적인 문서 내용
Document 객체에 있는 write() 메서드는 두가지 방법으로 사용할 수 있는데 첫 번째 방법은 현재 파싱되고 있는 문서에 HTML을 출력하기 위해 스크립트 안에서 이 메서드를 사용하는 것이다. 하지만 현재 문서에 HTML을 출력하기 위해 write()를 사용하는 것은 이 문서가 파싱되는 동안에만 가능하기 때문에 document.write()를 <script> 태그에 있는 최상위 레벨의 코드 안에서만 호출할 수 있다.
다른 창이나 프레임에 완전히 새로운 문서를 생성하기 위해 (Document 객체의 open()과 close() 메서드와 함께) 이 write() 메서드를 사용할 수 있다. 일반적으로 문서는 이벤트 처리기 안에서 절대 자신에 대해 write()를 호출해서는 안된다.
write() 메서드는 두 개 이상의 전달인자를 받을 수 있다.
Document 객체는 writeIn() 메서드를 지원한다. 이 메서드는 전달인자를 출력한 후 끝에 줄바꿈 문자를 붙여 넣는다는 점만 제외하면 write() 메서드와 동일하다.
15.2 Document의 프로퍼티
bgColor
문서의 배경색이다. 이 프로퍼티는 <body> 태그의 bgcolor(권장하지 않는 프로퍼티) 어트리뷰트다.
cookie
자바스크립트 프로그램이 HTTP 쿠키를 읽거나 쓸 수 있게 해주는 특수한 프로퍼티다.
domain
이 프로퍼티는 같은 인터넷 도메인 안에 있는 서로 신용하는 웹 서버의 웹 페이지들끼리 서로 정보를 주고받을 때 동일 출처 정책을 완화할 수 있게 해준다.
lastModified
문서가 수정된 날자를 저장한 문자열이다.
location
URL 프로퍼티와 동의어인데 지금은 제외되었다.
referrer
웹 브라우저를 현재 페이지로 연결시켜준 링크가 있는 문서의 URL이다.
title
현재 문서의 <title>과 </title> 태그 사이에 있는 텍스트다.
URL
문서가 위치한 주소가 어디인지 나타내는 문자열이다. 이 프로퍼티의 값은 서버 리다이렉트(redirect)가 발생한 경우를 제외하면 Window 객체의 location.href 프로퍼티와 같다.
15.3 레거시 DOM : Document 객체의 집합
배열값을 가지는 Document 객체의 집합 프로퍼티들은 레거시(legacy) DOM의 심장부다.
anchors[]
문서 내의 앵커들을 표현하는 Anchor 객체의 배열이다. (앵커란 문서 내에서 이름이 붙여진 위치, <a>태그에 href 대신 name 어트리뷰트를 적어서 생성한다) Anchor 객체의 name 프로퍼티 값은 태그에 있는 name 어트리뷰트의 값이다.
applets[]
문서 내의 자바 애플릿을 표현하는 Applet 객체의 배열이다.
forms[]
문서 내의 <form> 원소를 표현하는 Form 객체의 배열이다. 각 Form 객체에는 폼 내에 포함되어 있는 폼 원소들을 표현하는 집합 프로퍼티인 elements[ ]가 있다. Form 객체는 폼이 제출되기 전에 onsubmit 이벤트 처리기를 호출한다.
imgaes[]
문서 내의 <img> 원소를 표현하는 Image 객체의 배열이다. Image 객체의 src 프로퍼티는 읽고 쓸수 있는 프로퍼티이고, 어떤 URL을 이 프로퍼티에 할당하면 브라우저가 새로운 이미지를 읽어 들여 화면에 표시한다.
links[]
문서 내의 하이퍼텍스트 링크를 표현하는 Link 객체의 배열이다. 하이퍼텍스트 링크는 <a> 태그와, 경우에 따라서는 클라이언트 측 이미지 맵에 있는 <area> 태그를 통해 생성된다. Link 객체의 href 프로퍼티는 <a> 태그의 href 어트리뷰트에 해당하고 이 어트리뷰트의 값은 링크의 URL이다. 또한 Link 객체는 protocol, hostname, pathname 같은 프로퍼티를 통해 URL의 다양한 컴포넌트를 사용할 수 있게 한다.
이 프로퍼티들의 원소 각각은 문서의 소스코드에 나타나는 순서대로 저장된다.
레거시 DOM의 집합에 속하는객체들을 사용해 스크립팅 할 수는 있찌만 이를 사용하여 문서의 구조를 변경할 수는 없다는 사실을 이해하는 것이 중요하다.
15.3.1 Document 객체 이름 짓기
번호로 인덱싱되는 Document 객체의 집합에서 생기는 문제점은 위치 기반의 인덱스가 잘못 사용되기 쉽다는 것이다. 이를 해결하기 위한 안정적인 방법은 문서 내의 중요한 원소에 이름을 부여한 후 이런 원소에 접근할 때는 각 원소에 부여된 이름을 사용하는 것이다.
<form name="f1"><input type="button" value="Push Me"></form>
document.forms[0]; // 문서 내의 위치를 통해 폼을 참조 document.forms.f1; // 프로퍼티로 이름을 통해 폼을 참조 document.forms["f1"] // 배열 인덱스로 이름을 통해 폼을 참조
<form>이나 <img>, <applet>(<a> 태그에는 해당되지 않는다)의 name 어트리뷰트를 설정하는 것은 각각에 해당하는 Form이나 Image, Applet 객체(Link나 Anchor 객체에는 해당되지 않는다)를 Document 객체의 프로퍼티로서 접근할 수 있게 해준다.
document.f1
만약 한 문서에서 두 원소의 name 어트리뷰트 값이 같으면 프로퍼티는 두 원소에 대한 참조를 가지는 배열이 된다. 일반적으로 HTML 폼에서 서로 관련된 라디오 버튼의 이름이나 체크박스의 이름은 같다. 이렇게 하면 이 이름은 라디오 버튼과 체크 박스들을 가지는 Form 객체의 프로퍼티가 되고, 이 프로퍼티의 값은 다양한 라디오 버튼이나 체크 박스 객체들에 대한 참조를 가진 배열이 된다.
15.3.2 Document 객체에 대한 이벤트 처리기
사용자와 정보를 주고받기 위해서는 HTML문서나 이 문서 내의 원소들이 사용자 이벤트에 반응할 수 있어야 한다.
document.links와 같이 객체 집합을 통해 접근되는 Document 객체에는 HTML 태그의 어트리뷰트에 해당하는 프로퍼티가 있다.
HTML에서 이벤트 처리기는 이벤트 처리기 어트리뷰트에 자바스크립트 코드 문자열을 할당하는 작업을 통해 정의된다. 하지만 자바스크립트에서는 이벤트 처리기 프로퍼티에 함수를 할당하는 작업을 통해 이벤트 처리기를 정의한다.
15.4 W3C DOM의 개요
15.4.1 문서를 트리로 표현
HTML 문서의 중첩된 태그는 DOM에서 트리로 표현되는 계층적 구조이다. HTML 문서의 트리 표현은 <body>와 <p> 같은 HTML 태그와 원소를 나타내는 노드, 텍스트의 문자열을 표현하는 노드를 가진다.
15.4.2 노드
Node 인터페이스에는 트리를 순회하거나 조작하기 위한 프로퍼티와 메서드가 정의되어 있다. Node 객체의 childeNodes 프로퍼티는 자기 자식들의 목록을 반환하고 firstChild와 lastChild, nextSibling, previousSibling, parentNode는 노드로 구성된 트리를 순회하기 위한 수단을 제공한다. appendChild()와 removeChild(), replaceChilde(), insertBefore() 같은 메서드는 여러분이 문서 트리에 노드를 삽입하거나 제거할 수 있게 해준다.
15.4.2.1 노드의 타입
문서를 나타내는 트리의 여러 노드는 각 노드의 특정한 하위 인터페이스를 통해 표현된다. 모든 Node 객체에는 노드가 어떤 타입에 속하는지를 나타내는 nodeType 프로퍼티가 정의되어 있다. DOM 트리의 최상위에 있는 노드는 Document 객체다. 이 객체의 documentElement 프로퍼티는 문서의 최상위 원소를 표현하는 Element 객체를 참조하는데 HTML 문서에서는 문서 내에 명시적이거나 비명시적으로 적혀있는 <html> 태그가 이에 해당한다.
DOM 트리에는 Document 원소가 단 한개만 존재한다. 트리 내의 대다수 노드들은 <html> 이나 <i> 같은 태그를 표현하는 Element 객체와 텍스트의 문자열을 표현하는 Text 객체다. 문서를 분석하는 파서가 문서에 있는 주석을 유지하고 있다면 이 주석은 Comment 객체를 통해 DOM 트리상에 표현된다.
15.4.2.2 어트리뷰트
Element 인터페이스에 있는 getAttribute()와 setAttribute(), removeAttribute() 메서드를 사용하여 원소의 어트리뷰트 값을 읽거나 설정, 삭제할수 있다. HTML 태그의 표준 어트리뷰트는 각 태그를 표현하는 Element 객체의 프로퍼티로도 존재한다.
어트리뷰트를 사용하여 작업을 하는 다른 방법은 어트리뷰트와 그 값을 표현하는 Attr 객체를 반환해주는 getAttributeNode() 라는 메서드를 사용하는 것이다. (이 방법을 사용하는 이유는 Attr 인터페이스에 어트리뷰트의 값이 문서상에 리터럴로 기술되어 있는지 혹은 기본값인지 판단할 수 있게 해주는 specified라는 프로퍼티가 정의되어 있기 때문이다.)
하지만 Attr 객체는 원소의 childNodes[] 배열에는 나타나지 않고 Element나 Text 노드처럼 문서 트리 상에 직접 나타나는 것도 아니라는 사실을 유의하라.
15.4.3 DOM HTML API
DOM 표준은 XML이나 HTML과 함께 사용하려는 목적으로 만들어졌다.
HTMLDocument 인터페이스에는 W3C 표준화이전에 만들어진 브라우저들이 지원했던 다양한 프로퍼티와 메서드가 정의되어 있고 id와 style, title, lang, dir, className 프로퍼티가 정의되어 있다. ('class'는 자바스크립트의 예약어이기 때문에 HTML의 class 어트리뷰트가 자바스크립트에서는 className이 되었다.) HTML 태그는 여섯가지 어트리뷰트들 이외에 다른 어트리뷰트는 추가할 수 없다.
DOM 표준은 스크립트 작성자의 편의를 도모하기 위해 HTML 어트리뷰트에 대한 프로퍼티를 정의하고 있다는 점을 유념하라. 어트리뷰트 값을 얻어내거나 설정하는 일반적인 방법은 Element 객체의 getAttribute() 와 setAtrribute() 메서드를 사용하는 것이고 HTML 표준이 아닌 어트리뷰트를 사용하여 작업할 때는 이 메서드를 사용해야 한다.
15.4.3.1 HTML 작명법
HTML은 대소문자를 구분하지 않지만 자바스크립트는 대소문자를 구분한다. HTML에 특화된 인터페이스의 프로퍼티 이름은 소문자로 시작하고 프로퍼티 이름이 여러 개의 단어로 이루어졌다면 두 번째 단어부터는 대문자로 시작한다.
15.4.4 DOM 레벨과 기능
DOM 표준에는 두 가지 버전(혹은 레벨)이 있다.
DOM 레벨 1은 1998년 10월에 표준화 되었고 여기엔 Node와 Element, Attr, Document 같은 코어 DOM 인터페이스들이 정의되어 있고 HTML에 특화된 다양한 인터페이스들도 정의되어 있다. DOM 레벨 2는 2000년 11월에 표준화 되었고 이 DOM은 코어 인터페이스에 몇가지를 수정하는것 외에도 문서 이벤트와 CSS 스타일시트에 대해서 작업할수 있는 추가적인 도구도 제공한다. 그러나 마이크로소프트는 DOM event 모듈을 구현하지 않으며 레거시 DOM, W3C DOM, IE DOM은 서로 다른 방법으로 이벤트를 처리한다.
15.4.5 DOM 인증
현재 브라우저의 수가 너무 많아졌고 표준 지원 범위도 급격하게 빨리 변화하고 있어 이 책에서 어떤 브라우저가 어떤 DOM 기능을 지원하는지 명확한 정보를 알려주기 어렵다. 따라서 웹 브라우저가 DOM을 얼마나 잘 구현하고 있는지 판단하려면 지원 여부를 확인하는 것이 필요하다.
15.4.5.1 인터넷 익스플로러에서 DOM 인증
IE는 Node 인터페이스가 정의하는 node 타입의 상수를 지원하지 않는다. 문서 내의 각 노드에는 자신이 어떤 타입인가를 나타내는 nodeType 이라는 프로퍼티가 있다는 사실을 기억하라.
15.4.6 언어에 독립적인 DOM 인터페이스
이 책은 DOM API의 자바스크립트 구현에 대해 설명하지만 구현의 객체 프로퍼티는 일반적으로 다른 언어에 있는 get/set 메서드의 쌍에 매핑된다. DOM API의 자바스크립트 구현에서 또 다른 중요한 점은 특정 DOM 객체가 자바스크립트 배열처럼 작동한다는 것이다.
DOM 객체에 namedItem() 메서드가 있다면 메서드에 문자열을 전달하는 것은 객체의 배열 인덱스로 문자열을 사용하는 것과 같다. 다음 코드는 모두 폼 원소에 접근하는 동일한 방법이다.
var f = document.forms.namedItem["myform"]; var g = document.forms["myform"]; var h = document.forms.myform;
NodeList의 원소에 접근하기 위해 배열 표현법을 사용할 수는 있지만, NodeList가 단지 배열과 유사한 객체이며 실제 Array는 아니라는 점을 반드시 기억해야 한다. DOM의 구현은 어떤 클래스를 정의하든지 상관이 없지만 다양한 DOM 인터페이스의 메서드와 프로퍼티는 반드시 정의해야 한다.
15.5 문서순회
DOM은 HTML문서를 Node 객체의 트리로 표현한다. 트리구조를 사용하여 가장 많이 이루어지는 작업은 트리의 각 노드를 차례대로 검사하면서 트리를 순회하는 것이다.
15.6 문서 내 엘리먼트 찾기
Document 객체는 모든 DOM 트리의 최상위 노드이지만 트리에 있는 HTML 엘리먼트는 표현하지 않는다. document.documentElement 프로퍼티는 문서의 최상위 엘리먼트인 <html> 태그를 참조하고 document.body 프로퍼티는 <body> 태그를 참조하는데 이 태그는 자신의 부모인 <html> 태그보다 유용하게 사용된다.
특정 타입의 HTML 엘리먼트 목록을 얻기 위해 getElementsByTagName()을 사용할수 있는데 html 태그는 대소문자를 구분하지 않기 때문에 전달되는 문자열도 대소문자가 구분되지 않는다는 점을 명심하라.
getElementByTagName()은 엘리먼트들의 배열을 반환하는 데 반해 getElementById() 메서드는 단지 id 어트리뷰트에 매칭되는 단일 엘리먼트만 반환한다.
HTML 문서의 HTMLDocument 객체에는 getElementByName() 메서드도 정의되어 있는데 이것은 엘리먼트 name 어트리뷰트를 조사하며 name 어트리뷰트는 문서 내에서 유일한 값을 가지지 않을 수도 있기 때문에 엘리먼트들의 배열을 반환한다.
클래스나 태그 이름을 통해 엘리먼트를 선택할 수 있게 해주는 getElements() 메서드에는 주어진 HTML 엘리먼트가 주어진 클래스의 멤버인지 검사하는 isMember() 메서드가 포함되어 있다.
15.7 문서 수정하기
코어 DOM API의 진정한 힘은 자바스크립트를 사용하여 문서를 동적으로 수정할 수 있다는데 있다. Text 노드 내에 있는 텍스트에는 appendData(), inserData(), deletetData(), replaceData() 메서드를 사용하여 텍스트를 덧붙이거나 새 텍스트를 추가할 수 있고 기존 텍스트를 삭제하거나 교체할 수 있다.
15.7.1 어트리뷰트 수정하기
element.setAttribute() 메서드는 텍스트 교체와 부모 바꾸기, 노드 재배열하기를 통해 문서를 수정하는것 외에도 문서의 엘리먼트에 있는 어트리뷰트를 설정하여 문서를 다양하게 변형할 수 있다.
15.7.2 DocumentFragment를 사용하여 작업하기
DocumentFragment는 문서 내에서 실제로 나타나지는 않고 노드의 집합을 저장하고 저장된 노드들의 임시 저장소 역할을 담당한다. 또한 DocumentFragment에 저장된 노드들은 DocumentFragment를 통해 마치 단일 객체인 것처럼 조작할 수 있다. DocumentFragment가 문서에 삽입되면 (Node 객체의 appendChild()나 insertBefore(), replaceChild() 메서드 중 하나를 사용하여) 그때부터는 DocumentFragment는 자신의 노드들로 대체된다.
15.8 문서에 새로운 내용 추가하기
Document.createElemnet()와 Document.createTextNode() 메서드는 새로운 Element와 Text 노드를 생성하고 이렇게 생성한 노드는 Node.appendChild(), Node.insertBefoe(), Node.replaceChild() 메서드로 문서에 추가한다.
15.8.1 노드를 생성할 때 편리하게 사용할 수 있는 메서드
테이블을 생성하기 위해 Element를 생성하고 이것의 어트리뷰트를 설정한 후 Text 노드를 생성하고 이 Text 노드를 Element에 추가하고 이것을 부모 Element에 추가하는 과정은 복잡했다. 이것은 make()라는 함수를 통해 할수 있는데 이 이름으로 Element를 생성하고 이 객체에 대한 어트리뷰트를 설정한 후 자식들을 추가한다.
15.8.2 innerHTML 프로퍼티
HTMLElement 노드의 innerHTML을 W3C에서 공식적으로 DOM의 일부분으로 승인한 적은 없지만 현대의 모든 브라우저가 지원하는 중요하고도 강력한 프로퍼티다. HTML 엘리먼트에 대해 이 프로퍼티 값을 요청했을 때 얻는것은 그 엘리먼트 자식을 표현하는 HTML 텍스트 문자열이다. 대체로 HTML 문서를 HTML 텍스트 문자열로 기술하는 것이 createElement()와 appendChild()의 호출을 나열하는 것보다 훨씬 간편하고 간단하다.
웹 브라우저는 HTML 파싱 능력이 뛰어나다. += 연산자를 사용하여 아주 적은 양의 텍스트를 innerHTML 프로퍼티에 추가하는 것은 직렬화 과정과 파싱 과정을 모두 필요로 하기 때문에 그다지 효율적이지 않다.
15.9 예: 동적으로 생성되는 목차
문서 내에서 사용자가 선택한 텍스트가 무엇인지 알아내는 기능은 표준화가 진행되진 않았지만 현재 모든 브라우저에서 기능을 제공하고 있다. Window와 Document 객체의 getSelection() 메서드가 <input>이나 <textarea> 내에 있다면 선택된 텍스트를 반환하지 않고 브라우저별 호환성 문제가 있다.
'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글
| 쿠키와 클라이언트 측 지속성 (0) | 2014.12.23 |
|---|---|
| CSS와 DHTML (0) | 2014.12.15 |
| 웹 브라우저와 자바스크립트 (0) | 2014.11.18 |
| 함수 (0) | 2014.10.27 |
| 객체와 배열 (0) | 2014.10.20 |
웹 브라우저와 자바스크립트
2014. 11. 18. 18:05 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
13.1 웹 브라우저 환경
13.2 HTML에 스크립트 내장하기
13.3 HTML의 이벤트 처리기
13.4 URL 안의 자바스크립트
13.5 자바스크립트 프로그램의 실행
13.6 클라이언트 측 호환성
13.7 접근성
13.8 자바스크립트 보안
13.9 웹과 관련된 다른 자바스크립트 내장 기법들
자바스크립트를 웹 브라우저 안에 내장하면 브라우저가 공개하는 강력하고 다영한 기능들을 스크립트 안에서 제어할수 있다.
13.1 웹 브라우저 환경
자바스크립트를 이해하려면 웹 브라우저가 제공하는 프로그래밍 환경을 이해해야만 한다.
클라이언트 측 자바스크립트에서는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창(또는 프레임)을 나타낸다. 모든 자바스크립트 구현에는 유효 범위 체인의 가장 앞에 항상 전역 객체가 위치하며 이 전역 객체의 프로퍼티들은 전역 변수들이다. 클라이언트 측 자바스크립트에서 전역 객체는 Window 객체고 이 객체에는 두 개의 자기 참조 프로퍼티 window와 self 가 있다.
Window 객체는 클라이언트 측 자바스크립트의 전역 객체이기 때문에 모든 전역 변수는 이 객체의 프로퍼티로 정의된다.
애플리케이션에 속한 각 창은 고유한 Window 객체를 가지며 클라이언트 측 자바스크립트 코드의 고유한 실행 컨텍스트를 정의한다.
웹 브라우저가 프레임으로 구분된 문서를 표시할 때에는 최상위 Window 객체의 frames[] 배열이 각 프레임을 표현하는 Window 객체들에 대한 참조를 저장한다.
클라이언트 측 자바스크립트에서 웹 브라우저는 사용자 입력이 들어올 때 이벤트를 생성하여 프로그램에게 알려준다. 이벤트가 발생하면 웹 브라우저는 이벤트에 반응하기 위해 적절한 이벤트 처리기 함수를 찾아 호출하려고 시도한다. 따라서 동적이며 상호 작용할 수 있는 클라이언트 측 자바스크립트 프로그램을 작성하기 위해선 알맞은 이벤트 처리기를 구현하여 등록함으로써 적절한 시점에 이를 호출할수 있게 해야한다.
이벤트 처리기는 사용자 입력에 의해 구동되기 때문에 예측할 수 없는 시점에 비동기적으로 호출된다.
자바스크립트의 역할은 정보의 획득과 전달을 용이하게 함으로써 사용자의 브라우징 경험을 증대시키는 일이다.
- 표의 열을 정렬함으로써 사용자가 원하는 것을 빨리 찾게 할 수 있다.
- 사용자가 문서의 내용을 깊이 파고 들어감에 따라 선택적으로 어떤 내용은 감추고 또 어떤 내용은 더 자세히 노출하는 등의 작업을 할 수 있다.
- 웹 서버와 직접 통신하여 전체 페이지를 다시 읽어오지 않고도 새로운 정보가 표시될 수 있게 함으로써 브라우징 경험이 끊이지 않고 물 흐르듯 진행되게 할 수 있다.
겸손한 자바스크립트의 첫 번째 목표는 자바스크립트 코드와 HTML 마크업을 분리하는 것이고 두번째 목표는 단계적으로 성능을 축소하는 것이다. 자바스크립트는 html내용을 강화하기 위한 용도로써 이해되고 설계되어야 하며 그 내용은 자바스크립트 코드가 없이도 사용할 수 있어야 한다.
자바스크립트의 세 번째 목표는 html 페이지의 접근성을 해치지 않게 하는것이다.(또한 이상적으로 접근성을 강화해 줄 수 있어야만 한다.)
13.2 HTML에 스크립트 내장하기
- <script> 태그의 src 어트리뷰트로 지정되는 외부 파일에서
- onclick이나 onmouseover 같은 HTML 어트리뷰트의 값으로 지정되는 이벤트 처리기 안에서
- 특수한 javascript: 프로토콜을 사용하는 URL안에서
13.2.1 <script> 태그
XHTML에서 <script> 태그의 내용은 다른 문서 내용들과 똑같이 다뤄지는데 만약 < 또는 & 문자를 포함한다면 이들 문자는 XML 마크업으로 해석된다. 이런 이유로 XHTML을 사용할 때는 모든 자바스크립트 코드를 CDATA 구역 안에 두는 것이 가장 좋다.
<script><![CDATA[
]]></script>
비록 한 파일의 분리된 스크립트들이 HTML 파일을 읽고 파싱하는 과정에서 서로 다른 시간에 실행되지만 결국 같은 자바스크립트 프로그램의 일부를 구성하기 때문에 한 스크립트에서 정의한 변수와 함수는 같은 파일에서 뒤따라 나오는 다른 모든 스크립트에서도 사용할 수 있다.
스크립트가 HTML 문서에 삽입되는 출력물을 생성할 수 있다는 것은 HTML 파서가 문서 파싱 프로세스의 일부로서 자바스크립트 스크립트를 해석해야만 한다는 것을 의미한다.
13.2.2 외부 파일에 저장된 스크립트
<script> 태그는 자바스크립트 코드를 담은 파일의 URL을 지정하는 src 어트리뷰트를 지원한다.
<script src = "../../script/utill.js"></script>
- 서로 다른 HTML 파일들이 공유하며 사용하는 함수나 자바스크립트 코드가 있다면 이들을 하나의 파일로 저장하고 필요로 하는 HTML파일에서 읽어서 사용할 수 있으므로 코드의 유지와 보수에 용이하다.
- 자바스크립트 함수들이 하나 이상의 페이지에 의해 사용된다면 이들을 분리된 자바스크립트 파일에 놓아둠으로써 브라우저가 캐시에 저장하여 더 빨리 불러오게 할 수 있다.
13.2.3 스크립트 언어 지정하기
브라우저 벤더는 어떠한 스크립트 언어라도 선택하여 지원할 수 있다. 파일의 기본 스크립트 언어는 HTTP Content-Script-Type 헤더를 사용해 지정할 수 있으며, HTML의 <meta> 태그를 사용해 이 헤더를 흉내낼 수 있다.
기본 스크립트 언어를 지정하지 않았거나 또는 기본으로 설정된 사항을 번복하고 싶을때는 <script> 태그의 type 어트리뷰트를 시용해야 한다. 그러나 type 어트리뷰트를 지원하지 않던 시절 스크립트 언어는 language 어트리뷰트를 통해 지정했다.
13.2.4 defer 어트리뷰트
스크립트에서는 document.write() 메서드를 사용해 문서에 동적으로 내용을 첨가할 수 있는데 이 때문에 HTML 파서는 문서의 파싱 작업 중에 스크립트를 만났을 때 파싱 작업을 일단 멈추고 스크립트가 실행되기를 기다려야 한다. HTML4 표준은 이러한 문제를 다루기 위하여 <script> 태그에 defer 어트리뷰트를 정의했다.
스크립트의 실행을 미루는 것은 스크립트를 외부 파일에서 불러야 할 때 특히 유용하나 브라우저에서는 이 기능이 정확하게 구현되어 있지 않음에 주의해야 한다.
13.2.5 <noscript> 태그
HTML은 자바스크립트가 브라우저에서 비활성화된 경우에만 렌더링할 내용을 담는 용도로 <noscript> 엘리먼트를 정의한다. 이상적으로는 페이지를 정교하게 만들어서 자바스크립트는 성능 향상을 위한 용도로만 사용하게 해야 하지만 이러한 작업이 여의치 않다면 <noscrip> 태그를 사용하여 사용자로 하여금 자바스크립트가 꼭 필요하다는 사실을 알리거나 대신 보여줄 내용의 링크를 제공할 수도 있다.
13.2.6 </script> 태그
document.write() 메서드나 innerHTML 프로퍼티를 사용하여 다른 스크립트를(보통 다른 창이나 프레임으로) 출력하는 스크립트를 작성할 수도 있다. HTML파서는 코드안에 "</script>"문자열을 스크립트를 끝내는 태그를 발견한 것이라 생각하기 때문에 이를 방지하기 위해서는 "</" + "script>" 같은 표현식을 사용해 출력하거나 </script>의 / 문자를 백슬래시를 사용하여 이스케이프 시퀀스로 표현할 수도 있다.
13.2.7 오래된 브라우저에서 스크립트 감추기
자바스크립트가 해로운 것이던 시절 브라우저들의 렌더링으로 HTML 주석을 사용하는 간단한 방법(<!-- // -->)이 사용되었다.
13.2.8 비공식 스크립트 어트리뷰트
event와 for 어트리뷰트를 사용하면 <script> 태그를 사용해서 이벤트 처리기를 정의할 수 있다. 이 어트리뷰트들은 오직 IE에서만 작동하며 이러한 기능은 다른 방법을 사용하여 쉽게 구현할 수 있으므로 이 어트리뷰트는 사용하지 않는것이 좋다.
13.3 HTML의 이벤트 처리기
스크립트 안의 자바스크립트 코드는 이 스크립트를 포함한 HTML 파일이 웹 브라우저로 읽혀 들어올 때 한 번 실행된다. 이벤트 처리기 정의안에는 자바스크립트 문장을 얼마든지 넣을 수 있지만 일반적으로 사용되는 기법은 <script>태그로 정의한 함수를 단순히 호출만 하는 용도로 사용하는 것이다. 겸손한 자바스크립트 패러다임을 위해서라면 문서 내용과 동작을 완전히 분리해야만 한다.
onclick
이 처리기는 <a>와 <area> 태그를 비롯해 버튼과 유사한 모든 폼 엘리먼트에서 지원하며 사용자가 엘리먼트를 클릭할 떄 구동된다.
이 이벤트 처리기는 onclick과 매우 유사하지만 사용자가 마우스를 눌렀을때와 놓았을때를 구분하여 구동된다는 것이 다르다.
이 이벤트 처리기는 마우스 포인터가 문서 엘리먼트의 위로 올라올때와 엘리먼트를 벗어날 때 구동된다.
onchange
이 이벤트 처리기는 <input>과 <select>, <textarea> 엘리먼트에서 지원하며 엘리먼트에 의해 표시된 값을 사용자가 변경한 뒤 탭이나 다른 방법을 사용해서 엘리먼트로부터 입력 포커스를 다른 곳으로 이동할 때 구동된다.
<body> 태그 안에 등장하며 문서와 문서에 연결된 외부 내용들을 완전히 불러온 후에 구동된다.
13.4 URL 안의 자바스크립트
자바스크립트 코드를 클라이언트 측에 포함시키기 위한 또 다른 방법은 javascript: 모조 프로토콜로 지정된 URL을 사용하는 것이다. 이 특별한 프로토콜 타입은 URL의 몸체가 자바스크립트 인터프리터에 의해 실행될 자바스크립트 코드를 담은 문자열임을 알리는 역할을 한다.
13.4.1 북마클릿
자바스크립트의 URL의 특별히 중요한 용도 중 하나는 북마클릿이라 부르는 즐겨찾기 툴바나 메뉴에서 손쉽게 실행할수 있게 하는것이다.
13.5 자바스크립트 프로그램의 실행
<script>와 </script> 태그 사이에 위치한 자바스크립트 문장들은 스크립트에 나타난 순서대로 실행된다.
스크립트는 HTML 문서의 <head>나 <body> 안에 나타날수 있는데 <head>안의 스크립트는 보통 다른 코드에 의해 호출될 함수들을 정의하며 또한 다른 코드에 의해 사용될 변수들을 선언하고 초기화하기도 한다. 일반적으로 문서 <head>안의 스크립트는 함수 하나를 정의하여 차후 실행을 위해 onload 이벤트 처리기에 등록한다.
만약 스크립트가 차후에 사용할 함수와 변수들을 단순히 정의하기만 하고 document.write() 호출과 같이 문서 내용을 바꾸는 어떠한 시도도 하지 않는다면 관습에 따라 이 스크립트 문서의 <body>가 아니라 <head> 안에 위치해야만 한다.
13.5.2 onload 이벤트 처리기
문서의 파싱이 끝나고 모든 스크립트가 실행된 후 모든 보조내용이 전부 불려온 후에 브라우저는 onload 이벤트를 발생시켜 Window 객체에 onload 이벤트 처리기로 등록된 모든 자바스크립트 코드를 실행한다.
onload 처리기는 <body> 태그의 onload 어트리뷰트를 설정함으로써 등록할 수 있는데 onload 처리기가 구동되는 때는 문서의 읽기 작업과 파싱 작업이 완전히 끝난 후이기 때문에 모든 문서 엘리먼트는 자바스크립트 코드를 사용하여 조작할 수 있다.
onload 이벤트 처리기는 문서 파싱 작업이 완료된 다음에 호출되기 때문에 document.write()를 호출해선 안된다.
13.5.3 이벤트 처리기와 자바스크립트 URL
문서의 읽기와 파싱 작업이 끝난 후에는 onload 처리기가 구동되며 자바스크립트 실행은 이벤트 구동 단계로 진입한다. 이 단계에서는 마우스 움직임, 클릭, 키입력과 같은 사용자 입력에 의한 비동기적 이벤트 처리기가 실행되고 자바스크립트 URL 또한 이 단계에서 비동기적으로 호출될 수 있는데 javascript:모조 프로토콜을 사용하는 href 어트리뷰트를 가진 링크를 클릭하는 경우가 이에 해당한다.
13.5.4 onunload 이벤트 처리기
사용자가 웹 페이지를 떠나 다른 곳으로 이동할 때 브라우저는 현재 페이지에 대한 자바스크립트 코드의 마지막 실행 기회로 onunload 이벤트 처리기를 구동한다. onunload 이벤트를 처리하면 웹 페이지의 onload 처리기나 다른 스크립트에 의한 효과를 되돌릴수 있다.
13.5.5 실행 컨텍스트와 Window 객체
문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 그들의 전역 객체로 하나의 Winodw 객체를 공유한다. 새 문서가 창으로 불려올 때는 언제나 그 창의 Window 객체가 기본 상태로 복원된다. Window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다. 하지만 Window 객체는 이 객체가 나타내는 창이 존재하는 한 계속해서 남는다. Window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지를 읽고 버렸는지에 상관없이 항상 유효한 상태로 남아있다.
13.5.6 클라이언트 측 자바스크립트 쓰레드 모델
클라이언트 측 자바스크립트는 단일 쓰레드다(또는 마치 그러한 것처럼 작동한다). 스크립트를 읽고 실행하는 도중에는 문서 파싱이 중단되고, 이벤트 처리기가 실행되는 중에는 웹 브라우저도 사용자 입력에 반응하지 않는다. 단일 쓰레드 실행은 코드작성시 두 이벤트가 절대로 동시에 실행되지 않음을 보장받는 동시에 스크립트나 이벤트 처리기가 절대로 오랜시간 동안 실행되어선 안됨을 의미한다.
13.5.7 읽기 중인 문서 조작하기
문서에 대한 읽기와 파싱 작업이 진행되는 동안 <script> 엘리먼트 안의 자바스크립트 코드는 document.write()를 사용하여 문서에 내용을 삽입할 수 있다. 하지만 이 작업에 대해선 표준화가 진행된바 없으며 막연한 불안이 있기도 하다. 이것에 대해 일치하는 의견이 하나 있다면 그것은 onload 이벤트가 구동된 다음의 문서 조작은 안전하다는 것이다.
문서에 포함된 이미지의 크기가 크거나 개수가 많다면 이미지에 대한 읽기 작업이 전부 완료되어 onload 이벤트가 구동되기 전에도 주요 문서의 파싱 작업은 충분히 완료될 수 있다.
웹 브라우저는 애플리케이션들을 실행하기 위한 보편적 플랫폼이며 자바스크립트는 그 애플리케이션들을 개발하기 위해 사용되는 언어다. 모든 웹 브라우저가 HTML을 출력하지만 CSS와 DOM 같은 표준을 지원하는 방식들에는 서로 차이가 있다.
온라인에서 브라우저 호환성 정보를 검색할 수 있는 사이트를 소개한다.
- http://www.quirksmode.org/dom/
13.6.1 비호환의 역사
웹 프로그래밍의 초창기는 넷스케이프와 마이크로소프트 간의 '브라우저 전쟁'으로 특징 지을수 있다. 브라우저 전쟁은 마이크로소프트가 압도적인 시장 점유를 달성하며 끝이 났고 DOM이나 CSS 같은 웹 표준들이 자리를 잡아가기 시작했다.
13.6.3 기능테스트
기능 테스트의 중요한 점은 이것이 특정 브라우저 벤더나 특정 브라우저 버전에 종속되지 않는 코드를 만들 수 있게 해준다는 것이다. 기능테스트는 어떤 기능들을 구현하는지에 관계없이 오늘날 존재하는 브라우저들과 작동함은 물론 미래의 브라우저들과도 계속하여 작동할 수 있게 한다.
document.all[] 배열은 마이크로소프트가 IE4에서 제안한것인데 이것은 자바스크립트 코드로 하여금 문서의 모든 엘리먼트를 가리킬 수 있게 했지만 표준으로 채택되지는 못했고 document.getElementById() 가 그 자리를 대신하게 되었다.
13.6.4 브라우저 테스트
기능테스트는 넓은 범위의 기능 검사를 수행할 때 잘 어울린다. 현재 브라우저 벤더나 버전을 판별하기 위한 코드는 종종 브라우저 스니퍼나 클라이언트 스니퍼라 불리기도 한다. 클라이언트 스니퍼는 넷스케이프와 IE가 서로 호환되지 않고 막 나가던 시절의 웹에서 흔히 사용되던 기법이다.
13.6.5 인터넷 익스플로러 조건부 주석
실무에서 클라이언트 측 자바스크립트 프로그래밍의 많은 비호환 문제들이 IE에 한정된 것임을 보게 될것이다. IE는 HTML과 자바스크립트 모두에서 유용하게 사용할 수 있는 조건부 주석을 지원한다.
조건부 주석은 또한 IE의 자바스크립트 인터프리터에서도 지원된다. 조건부 주석 안에서는 @if, @else, @end 키워드들이 IE의 자바스크립트 인터프리터에 의해 조건부로 실행될 코드들을 구분한다.
웹은 정보를 널리 퍼뜨리는데 매우 훌륭한 도구이며 자바스크립트 프로그램은 이러한 정보들로의 접근성을 강화하는데 사용할수 있다. 그러나 시각장애 혹은 신체장애가 있는 방문자에게 정보를 줄수 없는 코드를 작성하기 쉬우니 각별히 주의해야한다. 자바스크립트 접근성과 관련된 가장 기본적인 규칙은 자바스크립트 인터프리터가 비활성화된 상태에서도 여전히 웹 페이지가 기능을 다할 수 있게 코드를 작성하는 것이다.
접근성과 관련된 또 다른 중요한 점은 키보드는 사용할 수 있으나 마우스 같은 포인팅 장치는 사용할 수 없는 사용자들을 배려하는 것이다. 접근성을 위해서는 가능한 장치 독립적인 이벤트의 사용을 선호해야만 한다.
13.8 자바스크립트 보안
웹 브라우저에 자바스크립트 인터프리터가 도입되었다는 말은 웹 페이지를 읽어들이는 과정에서 임의의 자바스크립트 코드를 이용하는 컴퓨터에서 실행할 수 있음을 의미한다. 유해한 코드에 맞서기 위한 자바스크립트의 첫 번재 대응책은 단순히 이 언어가 특정 기능들을 지원하지 않게 하는 것이다. 두번재 대응책은 자바스크립트가 지원하는 기능들을 제약하는 것이다.
13.8.2 동일 출처 정책
동일 출처 정책은 자바스크립트 코드가 상호 작용할 수 있는 웹 문서 내용에 관한 광범위한 보안 제약이다. 이것은 보통 웹 페이지가 <iframe> 태그를 사용하여 어러 프레임으로 구성되었거나 다른 브라우저 창을 열 때 적용된다. 명확히 말하면 스크립트는 그 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티들만 읽을 수 있다. 동일 출처 정책은 XMLHttpRequest 객체와 함께 HTTP를 스크립트 안에서 직접 제어할 때에도 적용된다.
다른 서버에서 불러온 문서를 포함하는 창은 사실상 스크립트가 출입할 수 없는 구역이라고 생각해야 한다. 동일 출처 정책은 스크립트가 개인 소유의 정보를 빼돌리는 것을 방지하기 위해 필요하다
13.8.3 플러그인과 ActiveX 컨트롤 스크립팅
많은 웹 브라우저에서 자바스크립트는 인터넷 익스플로러의 ActiveX 컨트롤이나 다른 브라우저들의 플러그인 같은 소프트웨어 컴포넌트들을 실행하기 위한 '스크립트 엔진'으로 사용되곤 한다. 만약 스크립트에서 어떤 플러그인을 직접 제어할 수 있다면 웹 브라우저의 보안 아키텍처를 신뢰하는 데에서 나아가 플러그인 그 자체의 보안 아키텍처도 신뢰할 수 있어야만 한다는 것이다.
13.8.4 크로스 사이트 스크립팅
크로스 사이트 스크립팅 또는 XSS는 공격자가 공격의 대상이 된 웹 사이트로 HTML 태그나 스크립트를 주입해 넣는 종류의 보안 쟁점을 일컫는 용어다. 웹 페이지는 사용자가 전송해온 데이터에 기반하여 동적으로 문서 내용을 생성하는데 이에 앞서서 우선 사용자의 데이터에서 내장된 HTML 태그를 제거하는 식의 '검열' 과정을 거치지 않으면 이 웹 페이지는 크로스 사이트 스크립팅에 대해 취약해진다.
13.8.5 서비스 거부 공격
사악한 사이트는 무한 루프나 의미없는 계산을 끊임없이 수행함으로써 여러분의 CPU를 불통으로 만들어버릴 수도 있다. 웹 브라우저의 공격을 방어하기 위한 일반적인 방법론은 존재하지 않는다.
13.9 웹과 관련된 다른 자바스크립트 내장 기법들
클라이언트 측 자바스크립트 외에도 자바스크립트 언어를 웹에 내장하기 위한 다른 방법들이 있다.
사용자 스크립팅을 사용하면 HTML 문서가 브라우저에 의해 렌더링되기 전에 우선 사용자가 정의한 스크립트를 거쳐서 조작될 수 있다. 가장 널리 알려진 사용자 스크립팅의 예는 파이어폴스 웹 브라우저의 Greasemonkey 확장 기능이다.
SVG(Scalable Vector Graphics, 가변 벡터 도형 처리)는 XML 기반의 그래픽 포맷으로 자바스크립트 스크립트를 포함할 수 있다. 클라이언트 측 자바스크립트는 자신이 내장된 HTML 문서를 스크립팅 할수 있고 이와 마찬가지로 SVG 파일에 끼워 넣어진 자바스크립트 코드는 그 문서의 XML 엘리먼트들을 스크립트로 직접 제어할 수 있다.
XUL은 사용자 인터페이스를 기술하기 위한 XML 기반의 문법이다. 파이어폭스 웹 브라우저의 GUI는 XUL 문서로 정의되어 있다. XUL 문서 안의 자바스크립트 코드는 클라이언트 측 자바스크립트 코드와는 다른 객체와 API들을 사용하며 또한 다른 보안 모델을 따른다.
액션스크립트는 자바스크립트와 유사한 언어이며(동일한 ECMAscript 명세서에서 유래했으나 객체지향적인 방향으로 진화했다) 플래시 무비에서 사용된다. 플래시는 XML이나 HTML에 기반을 두지 않으며 플래시에 의해 제공되는 API들은 이책에서 논의되는 것과는 관련이 없다.
by 허클베리밋