Javascript에 대한 기본적인 이해

javascript

길고 긴 CSS에 대한 여정이 끝났습니다. 이제부터는 javascript에 대해 다루도록 하겠습니다.

  1. javascript의 개념
  2. javascript의 특징



javascript의 개념

javascript는 동적으로 컨텐츠를 변경하고, 멀티미디어를 다루고, 움직이는 이미지등 웹 페이지를 꾸며주도록 하는 프로그래밍 언어입니다. javascript는 크게 두 가지의 역할을 가지고 있습니다.

  1. 브라우저 조작 ( Browser Object Model : BOM )
  2. 태그 조작 ( Document Object Model : DOM )
BOM과 DOM

javascript의 runtime은 chrome, ie, firefox, safari 등의 browser입니다. 쉽게 말해서, 브라우저 위에서 동작하는 게 javascript입니다. 따라서, javascript의 사용 목적은, 이러한 browser를 다루는 것이 목적입니다.

Browser Object Model ( BOM )

BOM에는 다음과 같은 것들이 있습니다.

  1. 브라우저(window)의 크기 제어
  2. 브라우저(window) 열기/닫기
  3. 다른 웹 사이트 접속
  4. 히스토리 제어(URL)
  5. 웹 서버와 통신

이와 관련된 window 객체들은 다음과 같습니다.

  1. window – 브라우저 윈도우 모양 제어. 새 윈도우 열기/닫기
  2. window.navigator – 브라우저에 대한 다양한 정보 제공
  3. window.history - 브라우저 윈도우에 로드한 URL 리스트의 히스토리 관리
  4. window.location – 브라우저 윈도우에 로드된 HTML 페이지의 URL 관리
  5. window.screen – 브라우저가 실행되고 있는 스크린 장치에 대한 정보 제공

이렇듯 Javascript는 브라우저를 조작할 수 있는 언어입니다.


Document Object Model ( DOM )

DOM은 쉽게 말해 태그라고 생각하면 됩니다. 태그를 추가/수정/삭제 하고 제어하는 것이 DOM 입니다.

HTML 태그는 element라고 불리기도 하며, 5가지 요소로 구성됩니다.

  1. element name
  2. attribute
  3. style
  4. event listener
  5. content (innerHTML)
tag

이러한 것들을 제어하는 것을 통틀어 Document Object Model 이라고 합니다.



javascript의 특징

javascript는 다음과 같은 특징을 가지고 있습니다.

  • 이벤트 기반 - 사용자의 행위에 기반하여 명령을 수행한다.
  • 비동기 프로그래밍 - 코드가 순차적으로 실행 되는 것이 아니라 callback 기반으로 실행된다.
  • 객체 기반 - 초기의 브라우저는 메모리 점유율이 높지 않았다. 메모리를 절약하기 위해 객체 지향이 아닌 객체 기반이라는 구조를 지니고 태어났다.
  • 동적 타입 - 변수의 타입은 값의 할당에 의해 정해진다.
  • 스크립트 언어 - 컴파일이 필요 없다. 인터프리터 형식이기 때문에 쉽고 빠르게 코드를 제작할 수 있다.

이러한 특징들 때문에 발생하는 문제점과 이슈가 굉장히 많은 편입니다. C나 Java를 먼저 접한 개발자의 경우 javascript는 굉장히 어색한 언어이며, 문제점도 많은 언어입니다. 하지만 가장 빠르게 발전하고 있는 언어가 javascript이며 front-end에도 이용되고 back-end에도 이용되고, 심지어 app 개발에도 이용됩니다.

앞으로 다룰 내용은 javascript의 특징을 이해하고, 이에 대한 대응 방법에 대해 다룰 것입니다.