Client-side Javascript 1

웹 브라우저 환경

- Window 객체 : 클라이언트 측 자바스크립트 코드를 위한 전역 객체와 전역 실행 컨텍스트

- DOM(Document Object Model) : 클라이언트 측 객체 계층 구조와 이 계층 구조의 일부를 이루는 문서 객체 모델

- 이벤트 구동 프로그래밍 모델

 

Window 객체

웹 브라우저의 주요 작업은 HTML 문서를 창에 출력하는 것이다. 클라이언트 측 자바스크립트는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창을 나타낸다. Document, Window 둘다 중요하지만 Window 객체가 클라이언트 측 프로그래밍에서 전역 객체 역할을 한다. 모든 전역 변수는 Window 객체의 프로퍼티로 정의된다.

 

DOM

Window 객체의 framse[] 배열이 각 프레임을 표현하는 Window 객체들에 대한 참조를 저장한다. 표현식 document가 현재 창의 Document 객체를 가리키며 frames[1].document는 현재 창의 두 번째 프레임의 Document 객체를 가리킨다. 또한, Document 객체 안에는 HTML 폼을 나타내는 Form 객체들을 원소로 하는 forms[] 배열이 있다. 이들 중 하나의 폼을 가리키려면 다음과 같이 코드를 작성할 수 있다. 

window.document.forms[0]

폼 객체에는 각각 다양한 HTML 폼 엘리먼트(입력 필드, 버튼 등)를 나타내는 객체들을 원소로 하는 elements[] 배열이 있다. 극단적으로 모든 객체의 체인의 끝에 위치하는 객체를 참조하기 위해 다음과 같이 복잡한 표현식을 작성할 수도 있다.

parent.frames[0].document.forms[0].elements[3].options[2].text

DOM은 클라이언트 측 객체 계층 구조를 의미한다.

 

 

 

위의 그림이 사실상 표준이라고 할 수 있다. 모든 브라우저 안에서 의존할 수 있는 문서 기능의 기초를 이루기 때문에 레벨 0 DOM으로 알려져 있다.

 

이벤트 구동 프로그래밍 모델

오래 전 컴퓨터 프로그램은 일괄 처리(batch) 모드로 수행되곤 했다. 그러나 오늘날에는 포인팅 디바이스가 널리 사용되면서 이벤트에 의해 프로그램이 구동된다. 클라이언트 측 자바스크립트에서 웹 브라우저는 사용자 입력이 들어올 때 이벤트를 생성해 프로그램에게 알려준다. 이벤트가 발생하면 웹 브라우저는 이벤트에 반응하기 위해 적절한 이벤트 처리기 함수를 찾아 호출을 시도한다. 따라서 동적으로 작성하기 위해서는 그에 알맞은 이벤트 처리기를 구현 해야한다.

 

HTML에 스크립트 내장하기

- <script></script> 태그 사이에서

- <script> 태그의 src 어트리뷰트로 지정되는 외부 파일에서

- onClick이나 onmouseover 같은 HTML 어트리뷰트의 값으로 지정되는 이벤트 처리기 안에서

- 특수한 javascript 프로토콜을 사용하는 URL 안에서

 

<script> 태그

하나의 HTML 문서는 임의 개수의 <script> 엘리먼트를 포함할 수 있다. 분리된 여러 개의 스크립트들이 문서 내에 들장하는 순으로 실행된다. 비록 한 파일의 분리된 스크립트들이 HTML 파일을 읽고 파싱하는 과정에서 서로 다른 시간에 실행되지만, 그들은 결국 같은 자바스크립트 프로그램의 일부를 구성하기 때문에 한 스크립트에서 정의한 변수와 함수는 다른 스크립트에서도 사용할 수 있다.

 

외부 파일에 저장된 스크립트

<script src="../../scripts/util.js"></script>

자바스크립트 파일은 보통 .js 확장자를 가지며 다른 HTML 없이 순수한 자바스크립트 코드만 담고 있다. 

 

defer 어트리뷰트

HTML 파서는 문서의 파싱 작업 중에 자바스크립트를 만나면 파싱 작업을 멈추고 스크립트가 실행되기를 기다려야 한다. 이러한 문제를 해결하기 위해 <script> 태그에 defer 어트리뷰트를 정의했다. 만약 아무런 문서 출력물도 만들지 않는 스크립트를 작성한다면 defer로 HTML이 멈추지 않고 계속 파싱해도 안전하다는 것을 알려줄 수 있다.

 

HTML의 이벤트 처리기

스크립트 안의 자바스크립트 코드는 이 스크립트를 포함한 HTML 파일이 웹 브라우저로 읽혀 들어올 때 한 번 실행된다. 때문에 이러한 종류의 정적인 스크립트만을 사용하는 프로그램은 사용자의 행동에 동적으로 반응할 수 없다. 보다 동적인 프로그램은 이벤트가 발생했을 때 웹 브라우저에 의해 자동으로 호출되는 이벤트 처리기를 정의한다. 예를 들어, 사용자가 폼 안의 체크박스를 클릭할 때 호출되는 이벤트 처리기를 정의하려면 HTML 태그의 어트리뷰트에 처리기 코드를 지정하면 된다.

<input type="checkbox" name="options" value="giftwrap"
    onclick="giftwrap = this.checked;"
>

 

URL 안의 자바스크립트

javascript:pseudoprotocol로 지정된 URL을 사용해서 코드를 클라이언트 측에 포함할 수 있다. URL의 몸체가 자바스크립트 인터프리터에 의해 실행될 자바스크립트 코드를 담은 문자열임을 알리는 역할이다. 이 문자열은 한 줄 코드로 간주되기 때문에, 모든 문장은 반드시 세미콜론으로 분리하고 /* */ 주석을 사용해야 한다.

javascript:var now = new Date(); "<h1>The time is:</h1>" + now;

 

단일 스레드

클라이언트 측 자바스크립트는 단일 스레드이다. 스크립트를 읽고 실행하는 도중에는 문서 파싱 작업이 중단되고, 이벤트 처리기가 실행되는 중에는 웹 브라우저도 사용자 입력에 반응하지 않는다. 단일 스레드 실행은 두 이벤트 처리기가 동시에 실행되지 않음을 보장받을 수 있어 스크립트 작성이 용이하다. 그러나, 스크립트나 이벤트 처리기가 오랜 시간 동안 실행되면 안된다. 

 

자바스크립트 보안

유해한 코드에 맞서기 위한 첫 번째 대응책은 특정 기능들을 지원하지 않는 것이다. 예를 들어, 클라이언트 컴퓨터의 파일과 디렉토리들을 읽고 지울 수 없도록 하는 것이다. 두 번째 대응책은 자바스크립트가 지원하는 기능들을 제약하는 것이다. 예를 들어, socket을 사용해 다른 호스트와 연결하는 네트워킹 기능을 제공하지 않는다. 이 외에도 여러 가지 대응책들이 존재한다.