웹 브라우저와 자바스크립트
2014. 11. 18. 18:05 나홀로스터디/JS 완벽가이드
13장 웹 브라우저와 자바스크립트
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
자바스크립트를 웹 브라우저 안에 내장하면 브라우저가 공개하는 강력하고 다영한 기능들을 스크립트 안에서 제어할수 있다.
13.1 웹 브라우저 환경
자바스크립트를 이해하려면 웹 브라우저가 제공하는 프로그래밍 환경을 이해해야만 한다.
13.2 HTML에 스크립트 내장하기
13.2.1 <script> 태그
XHTML에서 <script> 태그의 내용은 다른 문서 내용들과 똑같이 다뤄지는데 만약 < 또는 & 문자를 포함한다면 이들 문자는 XML 마크업으로 해석된다. 이런 이유로 XHTML을 사용할 때는 모든 자바스크립트 코드를 CDATA 구역 안에 두는 것이 가장 좋다.
13.2.2 외부 파일에 저장된 스크립트
<script> 태그는 자바스크립트 코드를 담은 파일의 URL을 지정하는 src 어트리뷰트를 지원한다.
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> 태그를 비롯해 버튼과 유사한 모든 폼 엘리먼트에서 지원하며 사용자가 엘리먼트를 클릭할 떄 구동된다.
onchange
이 이벤트 처리기는 <input>과 <select>, <textarea> 엘리먼트에서 지원하며 엘리먼트에 의해 표시된 값을 사용자가 변경한 뒤 탭이나 다른 방법을 사용해서 엘리먼트로부터 입력 포커스를 다른 곳으로 이동할 때 구동된다.
13.4 URL 안의 자바스크립트
자바스크립트 코드를 클라이언트 측에 포함시키기 위한 또 다른 방법은 javascript: 모조 프로토콜로 지정된 URL을 사용하는 것이다. 이 특별한 프로토콜 타입은 URL의 몸체가 자바스크립트 인터프리터에 의해 실행될 자바스크립트 코드를 담은 문자열임을 알리는 역할을 한다.
13.4.1 북마클릿
자바스크립트의 URL의 특별히 중요한 용도 중 하나는 북마클릿이라 부르는 즐겨찾기 툴바나 메뉴에서 손쉽게 실행할수 있게 하는것이다.
13.5 자바스크립트 프로그램의 실행
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 이벤트가 구동되기 전에도 주요 문서의 파싱 작업은 충분히 완료될 수 있다.
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 웹과 관련된 다른 자바스크립트 내장 기법들
클라이언트 측 자바스크립트 외에도 자바스크립트 언어를 웹에 내장하기 위한 다른 방법들이 있다.
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
13.1 웹 브라우저 환경
13.2 HTML에 스크립트 내장하기
13.3 HTML의 이벤트 처리기
13.4 URL 안의 자바스크립트
13.5 자바스크립트 프로그램의 실행
13.6 클라이언트 측 호환성
13.7 접근성
13.8 자바스크립트 보안
13.9 웹과 관련된 다른 자바스크립트 내장 기법들
자바스크립트를 웹 브라우저 안에 내장하면 브라우저가 공개하는 강력하고 다영한 기능들을 스크립트 안에서 제어할수 있다.
13.1 웹 브라우저 환경
자바스크립트를 이해하려면 웹 브라우저가 제공하는 프로그래밍 환경을 이해해야만 한다.
13.1.1 전역 실행 컨텍스트로서의 Window 객체
클라이언트 측 자바스크립트에서는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창(또는 프레임)을 나타낸다. 모든 자바스크립트 구현에는 유효 범위 체인의 가장 앞에 항상 전역 객체가 위치하며 이 전역 객체의 프로퍼티들은 전역 변수들이다. 클라이언트 측 자바스크립트에서 전역 객체는 Window 객체고 이 객체에는 두 개의 자기 참조 프로퍼티 window와 self 가 있다.
Window 객체는 클라이언트 측 자바스크립트의 전역 객체이기 때문에 모든 전역 변수는 이 객체의 프로퍼티로 정의된다.
애플리케이션에 속한 각 창은 고유한 Window 객체를 가지며 클라이언트 측 자바스크립트 코드의 고유한 실행 컨텍스트를 정의한다.
클라이언트 측 자바스크립트에서는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창(또는 프레임)을 나타낸다. 모든 자바스크립트 구현에는 유효 범위 체인의 가장 앞에 항상 전역 객체가 위치하며 이 전역 객체의 프로퍼티들은 전역 변수들이다. 클라이언트 측 자바스크립트에서 전역 객체는 Window 객체고 이 객체에는 두 개의 자기 참조 프로퍼티 window와 self 가 있다.
Window 객체는 클라이언트 측 자바스크립트의 전역 객체이기 때문에 모든 전역 변수는 이 객체의 프로퍼티로 정의된다.
애플리케이션에 속한 각 창은 고유한 Window 객체를 가지며 클라이언트 측 자바스크립트 코드의 고유한 실행 컨텍스트를 정의한다.
13.1.2 클라이언트 측 객체 계층 구조와 DOM
웹 브라우저가 프레임으로 구분된 문서를 표시할 때에는 최상위 Window 객체의 frames[] 배열이 각 프레임을 표현하는 Window 객체들에 대한 참조를 저장한다.
웹 브라우저가 프레임으로 구분된 문서를 표시할 때에는 최상위 Window 객체의 frames[] 배열이 각 프레임을 표현하는 Window 객체들에 대한 참조를 저장한다.
13.1.3 이벤트 구동 프로그래밍 모델
클라이언트 측 자바스크립트에서 웹 브라우저는 사용자 입력이 들어올 때 이벤트를 생성하여 프로그램에게 알려준다. 이벤트가 발생하면 웹 브라우저는 이벤트에 반응하기 위해 적절한 이벤트 처리기 함수를 찾아 호출하려고 시도한다. 따라서 동적이며 상호 작용할 수 있는 클라이언트 측 자바스크립트 프로그램을 작성하기 위해선 알맞은 이벤트 처리기를 구현하여 등록함으로써 적절한 시점에 이를 호출할수 있게 해야한다.
이벤트 처리기는 사용자 입력에 의해 구동되기 때문에 예측할 수 없는 시점에 비동기적으로 호출된다.
클라이언트 측 자바스크립트에서 웹 브라우저는 사용자 입력이 들어올 때 이벤트를 생성하여 프로그램에게 알려준다. 이벤트가 발생하면 웹 브라우저는 이벤트에 반응하기 위해 적절한 이벤트 처리기 함수를 찾아 호출하려고 시도한다. 따라서 동적이며 상호 작용할 수 있는 클라이언트 측 자바스크립트 프로그램을 작성하기 위해선 알맞은 이벤트 처리기를 구현하여 등록함으로써 적절한 시점에 이를 호출할수 있게 해야한다.
이벤트 처리기는 사용자 입력에 의해 구동되기 때문에 예측할 수 없는 시점에 비동기적으로 호출된다.
13.1.4 웹상에서 자바스크립트의 역할
자바스크립트의 역할은 정보의 획득과 전달을 용이하게 함으로써 사용자의 브라우징 경험을 증대시키는 일이다.
자바스크립트의 역할은 정보의 획득과 전달을 용이하게 함으로써 사용자의 브라우징 경험을 증대시키는 일이다.
- 이미지 롤오버 같은 시각 효과를 생성하여 사용자의 페이지 탐색을 넌지시 도울수 있다.
- 표의 열을 정렬함으로써 사용자가 원하는 것을 빨리 찾게 할 수 있다.
- 사용자가 문서의 내용을 깊이 파고 들어감에 따라 선택적으로 어떤 내용은 감추고 또 어떤 내용은 더 자세히 노출하는 등의 작업을 할 수 있다.
- 웹 서버와 직접 통신하여 전체 페이지를 다시 읽어오지 않고도 새로운 정보가 표시될 수 있게 함으로써 브라우징 경험이 끊이지 않고 물 흐르듯 진행되게 할 수 있다.
- 표의 열을 정렬함으로써 사용자가 원하는 것을 빨리 찾게 할 수 있다.
- 사용자가 문서의 내용을 깊이 파고 들어감에 따라 선택적으로 어떤 내용은 감추고 또 어떤 내용은 더 자세히 노출하는 등의 작업을 할 수 있다.
- 웹 서버와 직접 통신하여 전체 페이지를 다시 읽어오지 않고도 새로운 정보가 표시될 수 있게 함으로써 브라우징 경험이 끊이지 않고 물 흐르듯 진행되게 할 수 있다.
13.1.5 겸손한 자바스크립트
겸손한 자바스크립트의 첫 번째 목표는 자바스크립트 코드와 HTML 마크업을 분리하는 것이고 두번째 목표는 단계적으로 성능을 축소하는 것이다. 자바스크립트는 html내용을 강화하기 위한 용도로써 이해되고 설계되어야 하며 그 내용은 자바스크립트 코드가 없이도 사용할 수 있어야 한다.
자바스크립트의 세 번째 목표는 html 페이지의 접근성을 해치지 않게 하는것이다.(또한 이상적으로 접근성을 강화해 줄 수 있어야만 한다.)
겸손한 자바스크립트의 첫 번째 목표는 자바스크립트 코드와 HTML 마크업을 분리하는 것이고 두번째 목표는 단계적으로 성능을 축소하는 것이다. 자바스크립트는 html내용을 강화하기 위한 용도로써 이해되고 설계되어야 하며 그 내용은 자바스크립트 코드가 없이도 사용할 수 있어야 한다.
자바스크립트의 세 번째 목표는 html 페이지의 접근성을 해치지 않게 하는것이다.(또한 이상적으로 접근성을 강화해 줄 수 있어야만 한다.)
13.2 HTML에 스크립트 내장하기
- <script>와 < /script> 태그 사이에서
- <script> 태그의 src 어트리뷰트로 지정되는 외부 파일에서
- onclick이나 onmouseover 같은 HTML 어트리뷰트의 값으로 지정되는 이벤트 처리기 안에서
- 특수한 javascript: 프로토콜을 사용하는 URL안에서
- <script> 태그의 src 어트리뷰트로 지정되는 외부 파일에서
- onclick이나 onmouseover 같은 HTML 어트리뷰트의 값으로 지정되는 이벤트 처리기 안에서
- 특수한 javascript: 프로토콜을 사용하는 URL안에서
13.2.1 <script> 태그
XHTML에서 <script> 태그의 내용은 다른 문서 내용들과 똑같이 다뤄지는데 만약 < 또는 & 문자를 포함한다면 이들 문자는 XML 마크업으로 해석된다. 이런 이유로 XHTML을 사용할 때는 모든 자바스크립트 코드를 CDATA 구역 안에 두는 것이 가장 좋다.
<script><![CDATA[
]]></script>
하나의 HTML문서는 임의 개수의 <script> 엘리먼트를 포함할 수 있다.
비록 한 파일의 분리된 스크립트들이 HTML 파일을 읽고 파싱하는 과정에서 서로 다른 시간에 실행되지만 결국 같은 자바스크립트 프로그램의 일부를 구성하기 때문에 한 스크립트에서 정의한 변수와 함수는 같은 파일에서 뒤따라 나오는 다른 모든 스크립트에서도 사용할 수 있다.
스크립트가 HTML 문서에 삽입되는 출력물을 생성할 수 있다는 것은 HTML 파서가 문서 파싱 프로세스의 일부로서 자바스크립트 스크립트를 해석해야만 한다는 것을 의미한다.
비록 한 파일의 분리된 스크립트들이 HTML 파일을 읽고 파싱하는 과정에서 서로 다른 시간에 실행되지만 결국 같은 자바스크립트 프로그램의 일부를 구성하기 때문에 한 스크립트에서 정의한 변수와 함수는 같은 파일에서 뒤따라 나오는 다른 모든 스크립트에서도 사용할 수 있다.
스크립트가 HTML 문서에 삽입되는 출력물을 생성할 수 있다는 것은 HTML 파서가 문서 파싱 프로세스의 일부로서 자바스크립트 스크립트를 해석해야만 한다는 것을 의미한다.
13.2.2 외부 파일에 저장된 스크립트
<script> 태그는 자바스크립트 코드를 담은 파일의 URL을 지정하는 src 어트리뷰트를 지원한다.
<script src = "../../script/utill.js"></script>
- 커다란 블록의 자바스크립트 코드를 HTML 파일에서 제거할 수 있기 때문에 결과적으로 HTML 파일을 간단히 만들 수 있다.
- 서로 다른 HTML 파일들이 공유하며 사용하는 함수나 자바스크립트 코드가 있다면 이들을 하나의 파일로 저장하고 필요로 하는 HTML파일에서 읽어서 사용할 수 있으므로 코드의 유지와 보수에 용이하다.
- 자바스크립트 함수들이 하나 이상의 페이지에 의해 사용된다면 이들을 분리된 자바스크립트 파일에 놓아둠으로써 브라우저가 캐시에 저장하여 더 빨리 불러오게 할 수 있다.
- 서로 다른 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> 태그를 비롯해 버튼과 유사한 모든 폼 엘리먼트에서 지원하며 사용자가 엘리먼트를 클릭할 떄 구동된다.
onmousedown, onmouseup
이 이벤트 처리기는 onclick과 매우 유사하지만 사용자가 마우스를 눌렀을때와 놓았을때를 구분하여 구동된다는 것이 다르다.
이 이벤트 처리기는 onclick과 매우 유사하지만 사용자가 마우스를 눌렀을때와 놓았을때를 구분하여 구동된다는 것이 다르다.
onmouseover, onmouseout
이 이벤트 처리기는 마우스 포인터가 문서 엘리먼트의 위로 올라올때와 엘리먼트를 벗어날 때 구동된다.
이 이벤트 처리기는 마우스 포인터가 문서 엘리먼트의 위로 올라올때와 엘리먼트를 벗어날 때 구동된다.
onchange
이 이벤트 처리기는 <input>과 <select>, <textarea> 엘리먼트에서 지원하며 엘리먼트에 의해 표시된 값을 사용자가 변경한 뒤 탭이나 다른 방법을 사용해서 엘리먼트로부터 입력 포커스를 다른 곳으로 이동할 때 구동된다.
onload
<body> 태그 안에 등장하며 문서와 문서에 연결된 외부 내용들을 완전히 불러온 후에 구동된다.
<body> 태그 안에 등장하며 문서와 문서에 연결된 외부 내용들을 완전히 불러온 후에 구동된다.
13.4 URL 안의 자바스크립트
자바스크립트 코드를 클라이언트 측에 포함시키기 위한 또 다른 방법은 javascript: 모조 프로토콜로 지정된 URL을 사용하는 것이다. 이 특별한 프로토콜 타입은 URL의 몸체가 자바스크립트 인터프리터에 의해 실행될 자바스크립트 코드를 담은 문자열임을 알리는 역할을 한다.
13.4.1 북마클릿
자바스크립트의 URL의 특별히 중요한 용도 중 하나는 북마클릿이라 부르는 즐겨찾기 툴바나 메뉴에서 손쉽게 실행할수 있게 하는것이다.
13.5 자바스크립트 프로그램의 실행
13.5.1 스크립트 실행
<script>와 </script> 태그 사이에 위치한 자바스크립트 문장들은 스크립트에 나타난 순서대로 실행된다.
스크립트는 HTML 문서의 <head>나 <body> 안에 나타날수 있는데 <head>안의 스크립트는 보통 다른 코드에 의해 호출될 함수들을 정의하며 또한 다른 코드에 의해 사용될 변수들을 선언하고 초기화하기도 한다. 일반적으로 문서 <head>안의 스크립트는 함수 하나를 정의하여 차후 실행을 위해 onload 이벤트 처리기에 등록한다.
<script>와 </script> 태그 사이에 위치한 자바스크립트 문장들은 스크립트에 나타난 순서대로 실행된다.
스크립트는 HTML 문서의 <head>나 <body> 안에 나타날수 있는데 <head>안의 스크립트는 보통 다른 코드에 의해 호출될 함수들을 정의하며 또한 다른 코드에 의해 사용될 변수들을 선언하고 초기화하기도 한다. 일반적으로 문서 <head>안의 스크립트는 함수 하나를 정의하여 차후 실행을 위해 onload 이벤트 처리기에 등록한다.
문서 <body> 안의 스크립트는 <head>안의 스크립트가 하는 모든 일을 할 수 있다.
만약 스크립트가 차후에 사용할 함수와 변수들을 단순히 정의하기만 하고 document.write() 호출과 같이 문서 내용을 바꾸는 어떠한 시도도 하지 않는다면 관습에 따라 이 스크립트 문서의 <body>가 아니라 <head> 안에 위치해야만 한다.
만약 스크립트가 차후에 사용할 함수와 변수들을 단순히 정의하기만 하고 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 이벤트가 구동되기 전에도 주요 문서의 파싱 작업은 충분히 완료될 수 있다.
13.6 클라이언트 측 호환성
웹 브라우저는 애플리케이션들을 실행하기 위한 보편적 플랫폼이며 자바스크립트는 그 애플리케이션들을 개발하기 위해 사용되는 언어다. 모든 웹 브라우저가 HTML을 출력하지만 CSS와 DOM 같은 표준을 지원하는 방식들에는 서로 차이가 있다.
온라인에서 브라우저 호환성 정보를 검색할 수 있는 사이트를 소개한다.
- http://www.quirksmode.org/dom/
웹 브라우저는 애플리케이션들을 실행하기 위한 보편적 플랫폼이며 자바스크립트는 그 애플리케이션들을 개발하기 위해 사용되는 언어다. 모든 웹 브라우저가 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.7 접근성
웹은 정보를 널리 퍼뜨리는데 매우 훌륭한 도구이며 자바스크립트 프로그램은 이러한 정보들로의 접근성을 강화하는데 사용할수 있다. 그러나 시각장애 혹은 신체장애가 있는 방문자에게 정보를 줄수 없는 코드를 작성하기 쉬우니 각별히 주의해야한다. 자바스크립트 접근성과 관련된 가장 기본적인 규칙은 자바스크립트 인터프리터가 비활성화된 상태에서도 여전히 웹 페이지가 기능을 다할 수 있게 코드를 작성하는 것이다.
접근성과 관련된 또 다른 중요한 점은 키보드는 사용할 수 있으나 마우스 같은 포인팅 장치는 사용할 수 없는 사용자들을 배려하는 것이다. 접근성을 위해서는 가능한 장치 독립적인 이벤트의 사용을 선호해야만 한다.
웹은 정보를 널리 퍼뜨리는데 매우 훌륭한 도구이며 자바스크립트 프로그램은 이러한 정보들로의 접근성을 강화하는데 사용할수 있다. 그러나 시각장애 혹은 신체장애가 있는 방문자에게 정보를 줄수 없는 코드를 작성하기 쉬우니 각별히 주의해야한다. 자바스크립트 접근성과 관련된 가장 기본적인 규칙은 자바스크립트 인터프리터가 비활성화된 상태에서도 여전히 웹 페이지가 기능을 다할 수 있게 코드를 작성하는 것이다.
접근성과 관련된 또 다른 중요한 점은 키보드는 사용할 수 있으나 마우스 같은 포인팅 장치는 사용할 수 없는 사용자들을 배려하는 것이다. 접근성을 위해서는 가능한 장치 독립적인 이벤트의 사용을 선호해야만 한다.
13.8 자바스크립트 보안
13.8.1 자바스크립트가 할 수 없는 것
웹 브라우저에 자바스크립트 인터프리터가 도입되었다는 말은 웹 페이지를 읽어들이는 과정에서 임의의 자바스크립트 코드를 이용하는 컴퓨터에서 실행할 수 있음을 의미한다. 유해한 코드에 맞서기 위한 자바스크립트의 첫 번재 대응책은 단순히 이 언어가 특정 기능들을 지원하지 않게 하는 것이다. 두번재 대응책은 자바스크립트가 지원하는 기능들을 제약하는 것이다.
웹 브라우저에 자바스크립트 인터프리터가 도입되었다는 말은 웹 페이지를 읽어들이는 과정에서 임의의 자바스크립트 코드를 이용하는 컴퓨터에서 실행할 수 있음을 의미한다. 유해한 코드에 맞서기 위한 자바스크립트의 첫 번재 대응책은 단순히 이 언어가 특정 기능들을 지원하지 않게 하는 것이다. 두번재 대응책은 자바스크립트가 지원하는 기능들을 제약하는 것이다.
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 확장 기능이다.
사용자 스크립팅을 사용하면 HTML 문서가 브라우저에 의해 렌더링되기 전에 우선 사용자가 정의한 스크립트를 거쳐서 조작될 수 있다. 가장 널리 알려진 사용자 스크립팅의 예는 파이어폴스 웹 브라우저의 Greasemonkey 확장 기능이다.
SVG
SVG(Scalable Vector Graphics, 가변 벡터 도형 처리)는 XML 기반의 그래픽 포맷으로 자바스크립트 스크립트를 포함할 수 있다. 클라이언트 측 자바스크립트는 자신이 내장된 HTML 문서를 스크립팅 할수 있고 이와 마찬가지로 SVG 파일에 끼워 넣어진 자바스크립트 코드는 그 문서의 XML 엘리먼트들을 스크립트로 직접 제어할 수 있다.
SVG(Scalable Vector Graphics, 가변 벡터 도형 처리)는 XML 기반의 그래픽 포맷으로 자바스크립트 스크립트를 포함할 수 있다. 클라이언트 측 자바스크립트는 자신이 내장된 HTML 문서를 스크립팅 할수 있고 이와 마찬가지로 SVG 파일에 끼워 넣어진 자바스크립트 코드는 그 문서의 XML 엘리먼트들을 스크립트로 직접 제어할 수 있다.
XUL
XUL은 사용자 인터페이스를 기술하기 위한 XML 기반의 문법이다. 파이어폭스 웹 브라우저의 GUI는 XUL 문서로 정의되어 있다. XUL 문서 안의 자바스크립트 코드는 클라이언트 측 자바스크립트 코드와는 다른 객체와 API들을 사용하며 또한 다른 보안 모델을 따른다.
XUL은 사용자 인터페이스를 기술하기 위한 XML 기반의 문법이다. 파이어폭스 웹 브라우저의 GUI는 XUL 문서로 정의되어 있다. XUL 문서 안의 자바스크립트 코드는 클라이언트 측 자바스크립트 코드와는 다른 객체와 API들을 사용하며 또한 다른 보안 모델을 따른다.
액션스크립트
액션스크립트는 자바스크립트와 유사한 언어이며(동일한 ECMAscript 명세서에서 유래했으나 객체지향적인 방향으로 진화했다) 플래시 무비에서 사용된다. 플래시는 XML이나 HTML에 기반을 두지 않으며 플래시에 의해 제공되는 API들은 이책에서 논의되는 것과는 관련이 없다.
액션스크립트는 자바스크립트와 유사한 언어이며(동일한 ECMAscript 명세서에서 유래했으나 객체지향적인 방향으로 진화했다) 플래시 무비에서 사용된다. 플래시는 XML이나 HTML에 기반을 두지 않으며 플래시에 의해 제공되는 API들은 이책에서 논의되는 것과는 관련이 없다.
by 허클베리밋