본문 바로가기
Language(언어)/JavaScript

자바스크립트(JavaScript) 의 개념

by 대학교닷컴 2013. 12. 3.


1. 자바스크립트의 개념
--------------------------------------------------------------------------------
 
1.1. 자바스크립트란?

자바스크립트는 객체 지향적 프로그래밍 언어의 일종입니다. 즉, 웹 브라우저와 웹문서의 모든 요소를 객체(Object)로 인식하여 실행하고, 펄이나 C, C++ 등과 같이 서버에 설치되어 서버에서 실행되는 언어와는 달리, 사용자의 PC에서 동작하는 스크립트 언어입니다. 물론 서버측 자바스크립트도 있지만, 여기에서는 다루지 않습니다.

자바스크립트(JavaScript)는 선마이크로시스템즈라는 회사에서 LiveScript 라는 이름으로 처음 개발되었다가 네츠케이프사의 네비게이터 2.0 에 탑재되면서 자바스크립트라는 이름을 갖게 되었습니다.

자바스크립트는 버전별로 아래의 표처럼 발전되어 왔습니다. 마이크로소프트에서는 별도로 JScript를 사용하고 있습니다. 하지만 브라우저별로 완벽하게 호환되지는 않습니다

자바스크립트는 사용자 PC에서 작동하므로 그만큼 서버측의 부하를 줄일 수 있어 거의 모든 프로그래밍에서 폭 넓게 사용되고 있습니다.

 

자바스크립트                    네츠케이프                    익스플로러

자바스크립트 1.0                2.0 이상                         3.0 이상
자바스크립트 1.1                3.0 이상                          4.0 이상

자바스크립트 1.2                4.0 이상                          4.0 이상

자바스크립트 1.3                4.06 이상                         5.0 이상

자바스크립트 1.4                5.0 이상                          5.0 이상
  

1.2. 자바스크립트와 자바

자바스크립트(Java Script)와 자바(Java)는 그 이름이나 사용되는 스크립트 부분에서 상당히 유사한 면이 있기는 하지만 전혀 별개의 언어입니다. 자바스크립트는 텍스트 편집기 등으로 쉽게 내용을 읽어 볼 수 있는 반면, 자바는 코딩된 스크립트를 컴파일 하여 일반적인 텍스트 편집기 등으로 그 소스를 읽어 볼 수 없습니다.

이렇게 컴파일된 작은 프로그램을 애플릿(applet) 이라고 하며 보통은 class 라는 확장명을 갖게 됩니다.

자바스크립트는 보통의 HTML 문서안에서 스크립트의 형태로 삽입되어 사용되며, 자바 애플릿은 <OBJECT> 혹은 <APPLET> 태그등을 사용하여 웹 문서에 포함되어 사용됩니다.

 

1.3. 자바스크립트의 일반적 형태

자바스크립트는 일반적으로 아래와 같은 모양을 갖습니다.

 

01 : <SCRIPT LANGUAGE="JAVASCRIPT">
02 : <!--
03: 자바스크립트 구문
04: //-->
05: </SCRIPT>  
 

01 : <SCRIPT LANGUAGE="JAVASCRIPT">

자바스크립트를 시작하는 태그입니다. 여기에서 LANGUAGE="JAVASCRIPT" 부분은 스크립트로 사용할 언어를 자바스크립트로 하겠다는 의미로, 이것은 자바스크립트가 아닌 다른 언어에도 사용이 가능하다는 의미를 포함하고 있습니다. 또한, LANGUAGE="JAVASCRIPT1.2" 처럼 자바스크립트의 버전을 동시에 표시해 주고 웹 브라우저에서 해당 버전의 자바스크립트를 지원하지 않으면 실행 되지 않게 방지할 수도 있습니다.

02 : <!--
04 : //-->

자바스크립트를 지원하지 않는 웹브라우저인 경우에는 이 부호 안에 있는 코드 실행을 하지 않습니다. 하지만 최근의 대부분의 웹브라우저에서는 모두 자바스크립트를 지원하므로 굳이 넣어주지 않아도 에러가 생길 확률은 적습니다

 

1.4. 자바스크립트에서의 주석문

자바스크립트에서는 다음과 같은 주석문 처리가 가능합니다

 

// 이 표시는 한줄 주석문을 표시합니다

<!-- 이 표시는 한줄, 혹은 여러줄을 주석 처리합니다 ->

/* 이 표시도 한줄, 혹은 여러줄을 주석 처리합니다 */

 
 

 

1.5. 자바스크립트가 들어가는 위치

자바스크립트는 일반적으로는 HTML 문서의 <HEAD></HEAD> 사이에 들어갑니다.

하지만 <BODY></BODY> 부분에 들어가기도 하며, 두 군데 모두 들어 갈 수도 있습니다. 스크립트가 들어가는 위치는 자바스크립트의 처리시점과 관련이 있습니다. 즉, HTML 태그와 마찬가지로 위에서부터 아래로 순차적으로 처리됩니다.

또한, 한 문서내에 여러개의 자바스크립트가 들어가는 경우도 많습니다.

즉, 다음과 같은 형태가 모두 가능합니다

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
자바스크립트 구문 1
//-->
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
자바스크립트 구문 2
//-->
</SCRIPT>

</BODY>
</HTML>
 

 

1.6. 자바스크립트를 간단하게 사용하려면?

같은 내용의 길고 복잡한 자바스크립트를 여러 문서에서 같이 사용하려면 모든 문서에 동일한 스크립트를 일일이 넣어 주어야 할까요?

아래의 방식처럼 자바스크립트를 외부파일로 저장하여 간단히 불러오는 방법도 많이 사용됩니다.

HTML 문서
 
<HTML>
<HEAD>

<SCRIPT SRC="myScript.js"></SCRIPT>

</HEAD>
 샘플파일 보기
 
myScript.js
 
<!--
alert("안녕하세요? 반갑습니다")  // 괄호안의 내용으로 경고상자가 나타납니다
//-->
 

즉, <SCRIPT></SCRIPT> 라는 태그 부분과 태그내에 들어가는 스크립트 구문을 분리해 저장해 두는 거죠.

물론 위의 myScript.js 파일은 하나의 예제일 뿐 스크립트에 따라 달라집니다. 이렇게 하면 HTML 문서의 내용도 훨씬 줄어들고 문서가 깔끔해 집니다.

위의 예제를 열면 인삿말 상자가 나타납니다

js 파일은 윈도우의 메모장 등에서 텍스트 파일로 저장하여 확장명만 js 파일로 지정해 주면 됩니다.

 

댓글