5. 자바스크립트 기초

5.2 최초 예제

먼저 다음과 같은 코드를 보자.

위와 같은 코드를 메모장으로 작성하여 test.html로 저장한뒤에, 브라우져로 읽어들여보자.

분명히 BODY부분에 쓰인 TEST Document만 나타날 것 같지만 실제로는 Hello, World!라는 글자가 먼저 나오고 나중에 TEST Document라는 글자가 나오게 된다. 즉, 다음과 같이 나타나게 된다.

Hello, World! TEST Document

그럼, 위의 예제에서 배운 것을 정리해 보자.

// : 이부분은 주석문(Comment)으로 인식된다. //의 경우는 Single Line 주석이고, /* */은 여러줄에 대한 주석문이다.
document.write(""); : 이부분은 document라는 객체( 실제로 화면에 출력되는 BODY에 대응되는 객체라고 생각하면 된다.)에 "Hello, World!"라는 문장을 쓰라는 것이다.
; : 맨마지막에 ; 문자는 C언어에서온 것이지만, 약간 다른 것은 single line문장일 경우는 ;를 반드시 사용할 필요가 있는 것이 아니다. 여러문장을 하나의 줄에 쓸 때, 각 문장을 ; 로 구분하는 것이다.

실행된 결과를 보면 알겠지만, document.write라는 문장은 읽어들이면서 바로 실행이된다. 그리고 나서 HTML문을 출력하게 되어 위와 같은 결과가 나오는 것이다.

작동 시기(세부) 자바스크립트는 HTML문서 속에 포함되어서 전송되어 진다. 즉, 브라우저가 특정한 HTML을 요청하게 되면, 웹서버가 이를 브라우저에게 전송하게 된다. HTML파일을 전송 받은 브라우저는 HTML 파일을 읽어 들인다. 이렇게 읽어 들이면서 브라우저는 해당 파일에 속한 HTML 요소들에 대해서 재 정리작업(parsing)을 실시하게 되는데, 이 때, 읽어 들이다가 자바스크립트 구문을 만나면, 그 즉시 실행하게 된다. (물론 함수(function)와 같은 것들은 예외이다. 함수에 해당하는 부분은 일단 읽어들여서 저장한다.)

즉, HTML부분은 브라우저가 HTML용 처리기로 넘겨서 화면에 출력하며, 자바스크립트의 경우는 자바스크립트 인터프리터(Interpreter)로 넘겨서 처리하게 한다. 이 때, 처리하는 부분이 즉시 수행해야 하는 명령인 경우는 읽는 즉시 수행하게 되며, 그렇지 않은 정의 부분(함수, 선언)은 일단 읽어들여서 저장하게 되는 것이다.

위의 예에서 자바스크립트부분을 빼고 본다고 하면, 화면에 출력되어야 할 부분은 TEST Document라는 문자밖에는 없다. 그러나,document.write(""); 는 즉시 수행하는 문장에 속하는 자바스크립트명령이다. 이 부분은 만나는 즉시 수행되기 때문에 HTML인 TEST Document보다 먼저 실행이 된다.

그래서, 화면에 출력된 결과도, Hello, World! TEST Document 와 같이 나타나게 되는 것이다.

나중에 함수(Function)에 대하여 설명할 때, 이 부분은 다시 자세히 살펴보도록 하고, 지금 기억해야 할 것은 자바스크립트와 HTML은 맨 첫줄부터 차례로 읽어 가면서 처리된다는 것이다.

- Last Update : 2001.7.3 by Deadfire(http://www.deadfire.net)

Javascript 강좌

기 초
     - HTML문서에추가하기
     - 최초 예제
     - 함수사용하기
     - 기본 함수

문 법
     - 변 수
     - 연 산
     - 조 건 문
     - 반 복 문
     - 사용자함수

객 체
     - Object란?
     - 속성과 함수
     - 객체의 생성과사용

내장 객체
     - Date
     - Math
     - String
     - Array
     - Boolean
     - Function
     - Argument
     - Number
     - Global
     - 기 타
     - with / delete

Event 객체

네비게이터 객체
     - 네비게이터객체구조
     - 객체 접근 방법
     - navigator
     - window
     - location
     - history
     - document
     - form
     - form elements

Frame 객체

기 타
- Animation
- Audio

마치며