[BB-JS] 1. JavaScript란 무엇인가?

본 글은 자바스크립트 공부를 위해 프론트엔드 개발자를 위한 자바스크립트 프로그래밍를 정리한 글입니다.

역사

자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이다.

  • 클라이언트에서 입력을 검사하는 단순한 유효성 검사기
    • 모뎀의 느린 속도로 인해 서버에서 유효성 검사를 하기 힘들었기 때문
  • 넷스케이프의 블랜드 아이흐(Breadan Eich)가 Mocha > LiveScript > JavaScript 개발
  • 인터넷 익스플로러는 JScript(저작권 문제를 회피)
  • TC39는 JavaScript 1.1을 손질해 ECMA-262를 만들었고 이 표준은 ECMAScript라는 이름의 스크립트 언어를 정의
    • 문법과 의미를 표준화하여 일반적인 목에 쓸 수 있고 플랫폼을 가리지 않으며 제조사에 중립인 스크립트 언어를 만들기 위해

구현

자바스크립트는 ECMA-262에 정의된 것 보다 훨씬 많은 내용을 담고 있다. 자바스크립트의 구현은 다음 세가지로 나뉜다.

  • 코어 (ECMAScript)
  • 문서 객체 모델 (DOM)
  • 브라우저 객체 모델 (BOM)

ECMAScript

ECMAScript는 단순히 ECMA-262에 정의한 명세에서 설명하는 부분들을 구현한 언어이다.

  • ECMA-262에서 정의한 ECMAScript 언어는 웹 브라우저에 종속되지 않음
    • ECMAScript 언어에는 입력이나 출력을 담당하는 메서드가 없음
    • 견고한 스크립트 언어를 만들기 위한 기반 언어
    • ECMAScript를 구현하고 인터페이스를 제공한 호스트 환경들 : Browser, NodeJS, Adobe Flash 등
  • ECMAScript는 단순히 명세에서 설명하는 부분들을 구현한 언어
    • 문법
    • 타입
    • 선언문
    • 키워드
    • 예약어
    • 연산자
    • 객체
  • ECMAScript 판(여러버전)
    • 초판 : 넷스케이프의 자바스크립트 1.1과 거의 같지만 브라우저 종속적인 코드를 모두 삭제했으며, 몇몇 세세한 부분을 변경
    • 2판 : ISO/IEC-16262에 완전히 일치하도록 업데이트한 교정본, 그외 변경된 내용이 없음
    • 3판 : 문자열을 다루는 방법과 에러 정의, 숫자열 출력 등의 표준에 대한 업데이트
    • 4판 : 변수 타입 고정, 새로운 선언문, 클래스와 상속 등 언어를 완전히 새로 바꾸고자 시도하였지만 공식적으로 발행되지 않은 상태에서 폐기
    • 3.1판 : 4판이 급격한 도약이라 3판을 일부 개정하여 별도의 명세로 제안되어 채택
    • 5판 : 3판의 잠재적인 모호함을 명확히하고, JSON 객체, Object.defineProperties, 스트릭트 모드 등 새로운 기능 도입
  • ECMAScript 표준 준수란
    • 모든 타입과 값, 객체, 프로퍼티, 함수, 프로그램 문법과 시맨틱을 ECMA-262에 설명한 그대로 구현
    • 유니코드 문자 표준을 지원
  • 브라우저 지원

Document Object Model(DOM)

Docuemnt Object Model(DOM)은 XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스이다.

  • 전체 페이지를 노드의 계층 구조로 변환
    • 페이지의 각 부분은 각기 다른 데이터를 포함하는 다양한 타입의 노드로 표현
    • DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정
  • DOM이 필요한 이유
    • 인터넷 익스플로러와 넷스케이프 내비게이터의 DHTML뢰 구현차이로 인한 파편화
    • 플랫폼 독립적인 웹의 본성을 유지하기 위해 필요
  • DOM 레벨
    • DOM 레벨 1
      • 문서 구조를 표현이 목표
      • 구성
        • DOM 코어 : XML 기반 문서를 노드 트리로 변환해 문서의 어느 부분이든 쉽게 접근하고 조작이 가능하게 함
        • DOM HTML : HTML에 밀접한 객체와 메서드를 DOM 코어에 추가해 확장
    • DOM 레벨 2
      • 마우스 및 사용자 인터페이스 이벤트를 지원
      • 범위와 이동(문서 DOM을 순회하는 메서드)을 추가
      • 객체 인터페이스를 통해 캐스케이딩 스타일(CSS)를 지원
      • DOM 코어는 XML 네임스페이스를 지원하도록 확장
      • 추가된 구성
        • DOM Views : 문서의 다양한 뷰(예: CSS 스타일 적용 전후)를 추적하는 인터페이스
        • DOM 이벤트 : 이벤트와 이벤트 처리에 관한 인터페이스
        • DOM 스타일 : CSS를 통해 요소의 스타일을 바꾸는 인터페이스
        • DOM 이동과 범위 : 문서 트리를 티동하고 조작하는 인터페이스
    • DOM 레벨 3
      • 문서를 저장하고 불러오는 통일된 방법 제공
      • 문서가 유효한지 검사하는 방법 제공
      • DOM 코어는 XML 인포셋과 XPath, XML베이스를 포함해 XML 1.0 전체를 지원하도록 확장
      • 추가된 구성
        • DOM 로드와 저장 : 문서를 저장하고 불러오는 통일된 인터페이스
        • DIN 유효성 검사 : 문서가 유효한지 검사하는 인터페이스
  • 기타 DOM
    • Scalable Vector Graphic(SVG) : 크기 조절이 가능한 벡터 그래픽
    • Mathematical Markup Language(MathML) : 수학 마크업 언어
    • Synchronized Multimedia Integration Language(SMIL) : 동기화된 멀티미디어 확장 언어
  • 브라우저 지원

Browser Object Model(BOM)

Browser Object Model(BOM)는 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스이다.

  • 브라우저에 표시된 페이지와는 별개로 컨텍스트에서 브라우저와 상호작용을 제공
  • BOM을 주관하는 자바스크립트 표준이 존재하지 않음
  • HTML5에서는 BOM을 공식 명세의 일부로 표준화하고 있음
  • 브라우저에 고유한 자바스크립트 확장도 BOM의 일부로 간주
    • 브라우저 창을 새로 띄움
    • 브라우저 창을 움직이거나 크리를 조절하고 닫음
    • 브라우저의 상세 정보를 반환하는 navigator 객체
    • 불러온 페이지의 상세 정보를 반환하는 location 객체
    • 사용자의 화면 해상도에 대해 상세 정보를 반환하는 screen 객체
    • 쿠키 지원
    • XMLHttpRequest와 인터넷 익스플로러의 ActiveXObject 같은 커스텀 객체

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading