클라이언트 측 자바스크립트

웹 브라우저에서 자바스크립트가 하는 일

1. 웹 페이지의 Document 객체 제어(HTML 요소와 CSS 스타일 작업)
2. 웹 페이지의 Window 객체 제어 및 브라우저 제어
3. 웹 페이지에서 발생하는 이벤트 처리
4. HTTP를 이용한 통신 제어

웹 애플리케이션

• 원래 웹에서 문서를 표시하기 위한 소프트웨어였으나, 본래 기능을 뛰어넘어 웹 애플리케이션을 실행하는 운영체제로 자리매김.
• 최신 웹 브라우저는 파일 읽기와 쓰기, 데이터베이스 기능, 비동기 통신, 2,3차원 컴퓨터 그래픽스 기능, 키보드로 입력, 마우스로 드래그 앤 드롭, 멀티스레딩 등의 기능을 제공

빨라진 자바스크립트

• 크롬, 파이어폭스가 실행 중에 자바스크립트 코드를 컴파일 하는 JIT 컴파일러 (Just In Time Compiler)를 도입하면서 실행속도가 빨라짐.

자바스크립트 코드를 삽입하는 방법

• HTML에 자바스크립트를 삽입하는 방법

// 1. script 요소의 내용물로 작성하기 (인라인 스크립트)

<script>
	console.log("Hello!"); // 자바스크립트 코드
</script>

// 2. 외부 파일 읽어 들이기 (외부 스크립트)

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

// 3. 이벤트 처리기 속성에 작성하기
<input type="button" value="click" onClick="console.log('Hello');"></input>

// 4. JavaScript : URL(자바스크립트 의사 프로토콜)
<a href="javascript:console.log('I\'m pretty good');">
	What's going on?
</a>

크로스 브라우징 대책

ES5를 지원하지 않는 오래된 웹 브라우저에서도 문제 없이 웹 페이지를 표시하고 같은 기능을 사용할 수 있도록 대응하는 작업

기능성 테스트

• 모든 웹 브라우저가 지원하지 않는 기능을 사용할 때 해당 기능을 지원하는지 테스트 하는 것
• 사용하려는 기능을 지원하지 않는 환경에서는 다른 코드로 교체해서 구현
• 특정 웹 브라우저 버전에 국한되지 않은 코드를 작성할 수 있다

브라우저 테스트

• 특정 웹 브라우저에만 국한된 버그에 대처할 때 사용
• Navigator 객체를 사용하여, 웹 브라우저의 종류와 버전, OS 등을 파악하여 대책 마련
• 꼭 필요한 경우에만 사용하는 것을 권장

라이브러리를 사용해서 대응하기

• jQuery 등의 라이브러리를 사용하면 호환성 문제를 신경 쓰지 않고 코드를 작성할 수 있음

Window 객체

• 클라이언트 측 자바스크립트에서 가장 중요한 객체
• Window 객체는 전역 객체이며, 전역 변수는 Window 객체의 프로퍼티

Location 객체

• 창에 표시되는 문서의 URL을 관리
• window.location 또는 location으로 참조
• document.location 또한 Location 객체를 참조

History 객체

• 창의 웹 페이지 열람 이력을 관리
• window.history 또는 history 로 참조

Navigator 객체

• 스크립트가 실행 중인 웹 브라우저 등의 애플리케이션 정보를 관리
• window.navigator 또는 navigator 로 참조
• 브라우저 테스트에 userAgent 프로퍼티를 사용할 수 있음

Screen 객체

• 화면(모니터) 크기와 색상 등의 정보를 관리
• window.screen 또는 screen 으로 참조

Document 객체

• 창에 표시되고 있는 웹 페이지를 관리
• 웹페이지의 내용물인 DOM 트리를 읽거나 쓸 수 있음
• window.document 또는 document로 참조
• 클라이언트 측 자바스크립트에서 가장 중요한 객체 → 14장에서 자세히 다룰 예정

창 제어하기

• 웹 브라우저는 일반적으로 여러 개의 창과 탭을 표시
• 각각의 창과 탭은 별도의 브라우징 컨텍스트(사용자에게 표시되는 환경)를 제공
• 각각의 브라우징 컨텍스트는 별도의 Window 객체를 가짐
• 각 브라우징 컨텍스트(창 또는 탭)는 상호 간에 독립적이며 간섭할 수 없음
• 단, 브라우징 컨텍스트가 새로운 브라우징 컨택스트를 열때는 예외로 부모 브라우징 컨텍스트와 자식 브라우징 컨텍스트는 상호작용이 가능.

창 여닫기

// 새로운 창 또는 탭을 열 때
var w = open(url, 창의 이름, 옵션)

// 열린 창을 닫을 때
w.close();

창 제어하기

// 위치 변경

w.moveBy(10, 20); // 수평 방향(오른쪽)으로 10px 이동하고 수직 방향(아래쪽)으로 20px 이동
w.moveTo(100,20); // 창의 왼쪽 좌표(100, 150)로 이동

// 크기 변경

w.resizeBy(10, 20); // 너비를 10px, 높이를 20px 키운다
w.resize(200, 150); // 너비를 200px, 높이를 150px로 설정한다

// 페이지 스크롤
w.scrollBy(0, 100); // 아래쪽으로 100px 스크롤한다
w.scrollTo(0,0); // 시작 위치로 이동한다

다른 창 참조하기

• 부모 창과 부모 창이 open 메서드로 연 자식창은 서로의 Window 객체를 참조할 수 있다
• 상대 프로퍼티와 메서드를 참조할 수 있음
• 자식 창이 부모 창의 Window 객체를 참조할 때는 자식 창의 window 객체에 있는 opener 프로퍼티를 사용.

참고: "모던 자바스크립트 입문/ 이소 히로시 13장 웹 브라우저의 객체를 읽고 정리한 내용입니다."