JavaScript와 응용 기술

이경만
서울시 노원구 월계동
광운 대학교 네트웍 연구회
E-mail : psycho@explore.kwangwoon.ac.kr
http://www.kwangwoon.ac.kr/~psycho/

Abstract:

이 강의에서는 자바스크립트에 대한 바른 이해와 자바와의 관계 그리고 간단한 문법을 알아 보고 자바 스크립트의 응용 기술을 예를 통해 알아 보기로 한다.

Keywords:JavaScript,LiveConnect,Cookie

1. 서론

웹이 인기 있는 요인중 가장 큰 요인은 여러 가지 멀티미디어 요소를 가진 인터액티 브한 페이지를 네트웍상에서 제공 했기 때문이라고 할 수 있다. 그리고 그다음 요인을 꼽으 라면 그러한 페이지를 작성하기가 쉽다라는 점이다. 즉 쉽고 편리한 HTML이 지금의 웹을 가능하게 해준 일등 공신 이라는 점은 누구나 인정 하는 사실이다. 하지만 HTML만으로는 인터액티브한 페이지를 만들기에는 한계에 빠지고 만다. 그래서 자바나 플러그인등 여러 기술이 생기게 된 것이고 특히 자바는 정교하고 강력할 뿐 아니라 플랫폼에 관계 없이 동작 하므로 웹 환경에 안성 맞춤 격인 언어이다. 하지만 자바나 플러그인 만으론 기존의 HTML 과 유대감이 느껴지지 않는다. 즉 HTML과 JAVA를 좀더 가깝게 해줄 다른 시스템이필요 하다.

1.1 간단한 역사와 특징

Netscape 사는 Netvigator 2.0 버전에 자바를 추가 할 때 자바와 HTML 사이에 존재 하며 두 기술을 이어줄 수 있는 것이 필요 하다는 것을 느끼고 두 개의 기술을 이어주는 강력하 고 새로운 스크립트 언어를 개발 했다. 처음에는 Live Script라는 이름으로 발표 되었으나 Sun 과 Netscape사는 팀을 구성 하여 Live Script가 웹기반의 표준 스크립트가 되도록 구 문을 자바와 유사하게 바꾸고 이름도 JavaScript 라고 바꾸었다. Netscape2.0에서 지원 하는 JavaScript는 1.0 버전이고 이를 개선하고 약속 되었던 자바와의 연계를 지원하는 JavaScript 1.1 버전을 Netscape 3.0부터 지원 하기 시작 했다. 또 MicroSoft사는 Internet Explore 3.0부터 JavaScript 1.0을 지원 하고 있다.


	JAVA SCRIPT	JAVA
실행방법	브라우저에서 해석됨 (스크립트 언어)	서버에서 컴파일된 byte code를 불러 클라이언트(브라우저)에서 해석됨
성격	Object-Base 언어 (Built-in Object만 지원 클래스 상속등의 개념없음)	Object-Oriented 언어
형태	HTML 파일내에 같이 기술	HTML파일에 작은 공간을 얻어 수행
변수	변수형을 미리 정할 필요가 없음.	미리 변수형을 정해야함.
보안	secure (html에 같이 수행 되므로)	secure (local file system에 write를 못하므로)

표.1 Java 와 JavaScript 간의 비교

정리하자면 Javascript는 쉽고 개방적이며 HTML과 자바 사이의 객체와 자원을 이 어줄 플랫폼 독립적인 스크립트 언어이다. 자바 언어가 주로 프로그래머들에 의해 애플릿을 만들기 위해 사용 되는 반면 자바 스크립트는 CGI프로그래머나 HTML 작성자들이 페이지 간의 상호 작용과 폼의 제어를 위해 사용 될 수 있고 자바 프로그래머를 위해 자바와 HTML이 상호 보완적으로 통합 되도록 디자인 되었다. 그 증거로 Netscape Navigator 3.0 의 JavaScript 1.1에서는 Live Connect 라는 기능을 지원 하는데 이는 자바와 자바스크립트 그리고 Plug-in 간의 상호 작용을 지원 한다. 이는 Live Connect를 설명 할 때 자세히 설명 하도록 하겠다.

*JavaScript 활용 분야

1. HTML Form의 값을 가공하거나 검사하여 서버 쪽에 보낼때(CGI와 연동)

2. 사용자의 입력을 제어하고 싶을 때

3. 브라우저내의 여러가지 기능을 조절하고 싶을 때

4. 사용자에게 메세지를 보내고 싶을 때 (경고나 확인)

5. Cookie를 이용한 페이지 간의 data 이동

6. Window와 프레임의 생성 및 제어

7. Java 와의 연동

8. 그외의 여러 다른 분야

*필요한 Software

우선 기본적으로 Netscape가 있어야 하며 스크립트의 작성을 위한 텍스트 에디터나 기존의 HTML에디터가 있으면 된다. 또 Netscape Gold버전에서는 자바스크립트를 효율적 으로 짤수 있다고 하지만 한글문제가 있으므로 사용 할 때 주의 하기 바란다. 또 볼랜드의 intrabuilder , 마이크로 소프트의 ActiveX Control Pad등에서 JavaScript를 지원 하므로 이 런 소프트 웨어를 사용 하면 더 편하게 작성 할 수 있다.

*Html 문서에 JavaScript 구겨 넣기

다음은 JavaScript가 들어간 HTML문서의 예이다.

<html>
<head>
<script language=JavaScript>

</script>
</head>
<body bgcolor=white>
This is HTML<br>
<script language=JavaScript>

</script>

</body>
</html>

다음은 위 파일의 실행 결과 이다.

[그림 1]

즉 JavaScript는 <Script language=JavaScript>라는 Tag 로 시작 해 </Script>라는 Tag로 끝남을 알 수 있다. ""은 JavaScript를 지원 하지 않는 브라우저를 위한 배려이다. document.write는 HTML문서에 인자를 쓰라는 method(어떤 객체어 속한 함수, C++의 Member Function)이다. 결과를 보면 Head 부분에 쓰여진 JavaScript 가 가장 먼저 수행 되 고 그후 Body 부분에서는 쓰여진 순서대로 HTML이든 JavaScript든 상관없이 실행됨을 알 수 있다. JavaScript 의 실행은 매우 간단 하다. JavaScript가 있는 HTML문서를 읽기만 해주면 되 는 것이다. 그러면 브라우저에서 자동으로 실행 해 준다. 이는 컴파일 과정이 없음으로 개발 과정이 많이 짧아지게 된다. 또 실행 하는 컴퓨터가 네트웍에 연결 될 필요 없이 로컬 파일 만으로도 실행 할 수 있다. 또 실행중 에러 메시지가 즉각즉각 나오기 때문에 디버깅등의 작업도 다른언어에 비해 굉장히 수월 하다.

2. 기본 문법

2.1 값(Values)

변수(Variables)는 다음과 같은 값을 가질 수 있다.

형변환

위와 같이 하나의 변수 I로 두 개의 서로 다른 형(data type)으로 선언을 해도 에러가 나지 않는다. 자바스크립트는 형변환에 대해 그리 엄격하지 않다. 또 한 아래와 같이 문자열 과 숫자와 같이 서로 다른 형태를 더할 수도 있다.

x에는 "The answer is 42"가 저장되고 y에는 "42 is the answer."가 들어가게 된다.

자바스크립트는 문자열과 숫자형을 다룰수 있는 몇 개의 특수한 함수를 제공한다. 숫 자형으로 변환해주고 값을 구해주는 eval이라는 함수, 문자열을 정수값으로 변환시켜주는 parseInt 함수 그리고 문자열을 부동소수점(Floating Point)형으로 변환해주는 parseFloat 함 수가 있다.

2.2 변수명(Variables Name)

자바스크립트의 식별자나 이름은 반드시 문자와 밑줄("_")로 시작해야 한다. 그 외에는 숫자(0-9)가 올 수도 있다. 문자는 알파벳 대문자(A-Z)와 소문자(a-z)이다. 자바스크 립트는 대소문자 구별(Case Sensitive)을 한다. 아래는 올바른 변수명의 예이다.

변수는 어디에서나 선언될 수 있으며, 전역 변수(global)로 선언되었을 경우에는 그 변 수를 현재 불려진 자바스크립트 어디서나 쓸 수 있고 지역변수(local)일 경우에는 변수가 속 한 함수 내에서만 사용할 수 있다.

따라서 전역변수는 함수 외부에서 선언하고, 지역변수는 함수내에서 선언한다.

Literals

Literals는 자바스크립트에서의 값을 표현하는 방법이다.

정수형(Integers)

정수형은 10진수(decimal), 16진수(hexadecimal)나 8진수(octal)의 형식으로 표현할 수 있다.

부동소수점형(Floating Point)

보통 실수형으로 소수점의 값을 갖는다. 지수형(exponent)의 형식을 가질 수도 있다. 적어도 하나이상의 숫자와 소수점이나 지수형을 가져야 한다. 다음은 그 예이다.

부울형(Boolean)

참(true)과 거짓(false)의 두가지 값을 가진다.

문자열형(String)

문자열형은 null값이나 겹따옴표(")나 따옴표(')로 둘러쌓인 문자들을 가진다.

특수 문자(Special Characters)

다음과 같은 특수 문자들을 문자열내에서 사용할 수 있다.

또한 특수문자와 같은 표현방법으로 Escaping 문자형도 쓸 수 있다. 가령 문자열내에 서 겹따옴표를 표현하고 싶을 때에는 다음과 같은 형태로 사용할 수 있다.

var a = "My Name is \"Hong Gil Dong\"."

2.3 표현식(Expression)과 연산자(Operators)

2.3.1 표현식(Expression)

표현식은 보통, 문자형들과 변수, 연산자 그리고 단순한 값으로 계산된 표현식으로 구 성된다. 그 값은 숫자형, 문자열형, 논리형 값으로 구성된다. 개념적으로 두가지 형태의 표현 식이 있는데, 값을 변수에 지정하는 것과 단순히 그 값을 갖는 것이 있다. 다음 예를 보면

x = 7

위와 같이 x에 7이라는 값을 넣은 표현식으로 그 자체가 바로 7로 나타내어 진다. 반 면에 다음과 같이

3 + 4

값을 할당하지는 않았지만 연산자 사용한 표현식으로 단순히 7을 나타내고 있다. 연산 자는 이런 표현식에서 단순히 연산자로서만 사용하였다.

자바스크립트는 다음과 같은 종류의 표현식을 사용할 수 있다.

값이 할당되지 않은 변수는 정의가 내려지지 않기 때문에 에러를 발생시킨다.

조건 표현식(Conditional Expressions)

조건 표현식은 다음과 같이 사용한다.

(condition) ? val1 : val2

만약 조건이 true라면, val1을 나타내고, 아니면 val2를 나타낸다. 예를 들면

status = (age >= 18) ? "adult" : "minor"

이것은 age라는 변수의 값이 18이상이면 status에는 "adult"의 값이 할당되고, 아니면 "minor"의 값이 할당된다.

대입 연산자(Assignment Operators)

대입 연산자에는 아래와 같은 연산자들이 있다.

=, +=, -=, *=, /=

대입연산자는 왼쪽의 연산수에 오른쪽 연산수의 값을 대입한다. 아래는 x에 y를 대입한 예이다.

x=y

나머지 연산자는 기본적인 산술연산자를 축소한 형태이다. 다음을 살펴보자.

비트단위 연산자를 이용한 대입 연산자들이 있는데, 아래와 같다.

2.3.2 연산자(Operators)

자바스크립트에는 산술, 문자열, 논리 연산자가 있다. 연산식이 두 개가 필요한 binary 연산자와 연산식이 하나인 unary 연산자가 있다.

예) 3 + 4 나 x * y

예) x++ 나 ++x.

산술 연산자(Arithmetic Operators)

+ - * /

몫(Modulus)

예) 12 % 5 는 2를 반환한다.

예)
a++ ++a
b-- --b

비트단위 연산자

AND(&) OR(|) XOR(^)

비트단위 Shift 연산자

논리 연산자(Logical Operators)

Or (||)
사용법: 표현식1 || 표현식2

Not (!)
사용법: !표현식

비교 연산자(Comparison Operators)

다음과 같은 비교 연산자가 있다.

==, >, >=, <, <=, !=

문자열 연산자(String Operators)

문자열끼리 더할 수 있다. "my " + "string" 는 "my string"와 같으며 mystring += "bet"은 mystring변수에 "bet"라는 값을 더해준다.

연산자 우선순위(Operator Precedence)

아래로 갈수록 우선순위가 높다.

comma , assignment = += -= *= /= %= <<= >>= >>>= &= ^= |= conditional ?: logical-or || logical-and && bitwise-or | bitwise-xor ^ bitwise-and & equality == != relational < <= > >= bitwise shift << >> >>> addition/subtraction + - multiply/divide * / % negation/increment ! ~ - ++ -- call, member () []

2.3.3 기본 구문 (Basic Statment)

조건문

if ... else

반목문

for , while , break , continue

객체 관련 문

for...in , new , this , with

주석문

// , /*...*/

조건문

조건문은 어떤 논리적인 조건에 따라 어떤문장을 수행 할것인가를 결정하게 해주는 문장이다.

* If ( 조건 ) {

문장1

} [ else { 문장2 } ]

조건이 맞다면 문장1을 수행 하고 틀리다면 문장2를 수행 한다.

예)
function checkData (){
if (document.form1.threeChar.value.length == 3) {
return true}
else {
alert("Enter exactly three characters. " + document.form1.threeChar.value + " is not valid.")
return false} }

반복문(loop ststment)

특정한 문장을 어떤 조건이나 특정 횟수 만큼 여러번 사용 할 때 반복문을 쓰게 된다. 자바스크립트에서는 for 문과 while문을 지원해준다. 또 continue와 break문으로 반복문을 제어한다. 또다른 반복문으로 for ... in이 있으나 편의상 객체 관련문으로 분류 하였다.

* for ( 조건값의 초기화 ; 조건 ; 조건값의 증감 ) {

반복할 문장

}

예 )
<SCRIPT language=JavaScript>
function howMany(selectObject) {
var numberSelected=0
for (i=0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected==true)
numberSelected++
}
return numberSelected
}
</SCRIPT>
<FORM NAME="selectForm">
<P><B>Choose some music types, then click the button below:</B>
<BR><SELECT NAME="musicTypes" MULTIPLE>
<OPTION SELECTED> R&B
<OPTION> Jazz
<OPTION> Blues
<OPTION> New Age
<OPTION> Classical
<OPTION> Opera
</SELECT>
<P><INPUT TYPE="button" VALUE="How many are selected?"
onClick="alert ( 'Number of options selected: ' + howMany(document.selectForm.musicTypes))">
</FORM>

* While ( 조건 ) {

반복할 문장

}

예)
n = 0
x = 0
while( n < 3 ) {
n ++;
x += n;
}

* break : while 이나 for문 안에서 사용되며 반복문의 반복을 멈추는 기능을 가진다.

예)
function testBreak(x) {
var i = 0
while (i < 6) {
if (i == 3)
break
i++
}
return i*x
}

* continue : 반복문 안에서 사용 되며 반복문중 continue문장의 다음 문장을 무시하고 다음 반복의 주기를 수행 하도록 한다.

예)
i = 0
n = 0
while (i < 5) {
i++
if (i == 3)
continue
n += i
}

객체(object) 관련문

자바 스크립트의 Object 관련 명령은 객체의 property에 관련된 for ... in ,객체 자신을 참조할 때 쓰는 this , 특정 객체를 만들 때 사용 하는 new , 특정 객체를 기본 객체로 정 하는 with 가 있다.

*for ... in

for ( 변수 in 객체이름 ) {

문장

}

변수에는 객체이름에 해당하는 객체의 property(맴버 변수,객체에 속한 변수)들이 차례 대로 들어간다.

예)
// 다음 예는 오브젝트의 property의 이름과 값을 보여 주는 함수이다.
function dump_props(obj, obj_name) {
var result = ""
for (var i in obj) {
result += obj_name + "." + i + " = " + obj[i] + "<BR>"
}
result += "<HR>"
return result
}

* new

객체_이름 = new 객체형( [인자 ... ] )

* this : 객체 안에서 자신을 참조할 때 쓰는 keyword

예)
<html>
<SCRIPT language=JavaScript>
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
</SCRIPT>
<body>
<B>Enter a number between 18 and 99:</B>
<INPUT TYPE = "text" NAME = "age" SIZE = 3
onChange="validate(this, 18, 99)">
</body>
</html>

* with : 일정 영역안에서 특정 객체를 기본 객체로 정하는 명령 , 손가락의 수고를 덜기 위해 상당히 유용하다.

with (객체형){

문장

}

예)
var a, x, y
var r=10
with (Math) {
a = PI * r * r
x = r * cos(PI)
y = r * sin(PI/2)
}

주석문

소스 코드에 설명을 담기 위해 쓰는 구문으로 주석을 단 부분은 JavaScript 인터프리 터가 해석하지 않는다.

// : 한줄에 주석을 단다.

/* ~~~ */ : 한줄 이상의 주석을 달기 위한 구문

3. Java Script Object

3.1 Object

자바 스크립트에서는 20여개의 Object를 기본으로 지원한다. Object는 Property 와 Method를 가진다.

다음은 Java Script Object는 계층(hierarchy)을 갖고 있으며 Object들은 Object의 이 름에의해 참조되고, 상위계층의 오브젝트 이름 뒤에 "."을 붙여서 하위 계층임을 표시 할 수 있다. 예를 들면

objectname.methodname

속성(Properties)

Java Script의 Object는 Properties(속성)를 가지고 있다고 했다. Property는 그 값을 지 정함으로서 정의 할수 있다. '.'으로 상위 Object와 구분한다. 다음 예제를 살펴보자.

배열과 Java Script의 Properties는 실제적으로는 연관성이 있다. 사실상 Properties와 배열은 서로 같은 값을 표현하는 방법의 차이임을 아래의 예제를 보면 알 수 있다.

위의 배열은 다음과 같이 인덱스가 숫자인 배열또는 properties식으로 표현해도 무방하 다. 지금까지의 두 예제는 다음과 같음을 알 수 있다.

위와 같이 인덱스가 스트링값과 연관 있는 형태의 배열을 associated arrary라고 한다.

함수와 메소드(Functions and Methods)

Object에서 사용된 메소드는 함수와 같은 기능을 한다고 보면 된다. 함수는 자바스크립 트에서 블록 단위로 표현되고 지정된 일을 수행하는 명령들의 집합이라 할 수 있다. 다음의 예를 보면

string이라는 변수에 인자를 넘겨 받아서, 화면에 표시해주는 함수이다. 함수는 선언만 으로는 실행 할 수 없고, 정의된 함수를 불러서 실행시켜서 사용할 수 있다. 다음과 같이 정 의하면 함수를 실행할 수 있다.

함수에서는 배열형태로 인자를 받을 수 있는데 다음의 예를 살펴보자.

list함수를 list("o", "one", 1967, "three", "etc, etc...")과 같이 지정하였다면다음과 같은 결과가 나타난다.

메소드 정의(Defining Methods)

일반적인 함수 선언과 같은 방식으로 정의하고, Object에서 메소드를 선언하기 위해서 는 다음과 같이 하면 된다.

object.methodname = function_name

미리 함수를 정의한 후에, 객체내의 메소드로 선언할 수 있다. Object에서 다음과 같이 불러낼 수 있다.

object.methodname(params);

Object 참조를 위한 this

자바스크립트는 this라는 특수한 keyword를 갖고 있는데, this는 현재의 object를 참조 할 때 사용한다. validate라는 함수는 주어진 object의 value property를 확인하여, 인수로 최 대치와 최소치값과 비교해 준다. 그 예를 살펴 보면

form 태그에서 onChange 이벤트 핸들러에서 불러내어, form 태그에서 현재의 값을 넘겨주었다.

새로운 Object 생성(Creating New Objects)

자바스크립트에는 이미 정의된 object들이 있고, 또한 사용자가 새로운 object를 생성 할 수 있다. 새로운 object를 생성하기 위해서는 먼저, object형식의 함수를 정의하고 new를 이용해 object의 instance를 생성해야 한다.

다음의 car라는 object를 생성하는 예이다. property로 make와 model 그리고 year를 정 의하였다.

이것은 실제로 다음과 같이 instance화를 시켜서 사용할 수 있다.

mycar = new car("Eagle", "Talon TSi", 1993);

mycar.make에는 "Eagle"이 저장되고, mycar.model에는 "Talon TSi" 등이 저장된다.

메소드 선언(Defining Methods)

위에서는 단순히 Property만으로 정의된 object를 살펴보았다. 여기에 메소드를 선언할 수 있는데, 다음을 살펴보자.

이미 정의된 pretty_print를 이용하여 displayCar라는 함수를 미리 정의한다. 그 다음 다 음과 같이 object 정의에서 displayCar를 메소드로 정의하면 된다.

this.displayCar = displayCar;

다음을 살펴보자.

새로운 메소드는 다음과 같이 사용할 수 있다.

자세한 method나 property는 Java Script Authoring Guide ( http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/)를 참고 하기 바란다.

3.2 Built-in Object and Function

자바 스크립트는 다음과 같은 built-in Object 와 Function을 지원 한다.

string Object

문자열 변수나 property를 선언 할 때는 string 객체를 사용 해야 한다. string 변수 이 외에도 " "으로 싸여 있는 string 상수 또한 string 객체이다. 예를 들면

에서 "Hello, World!"는 string 객체 이다. 따라서 mystring 이라는 변수도 string 객체가 된다. 또 string 객체에는 toUpperCase라는 method(객체에 속한 함수)가 있다. 이는 string 객체의 문자열의 알파벳 소문자를 대문자로 바꿔주는 함수 이다. 이 외에도 bold 체 로 바꿔 주는 bold라는 method 등도 있다. 예를들면 "Hello, World!".toUpperCase()는 "HELLO, WORLD!"를 반환할 것이다.

Math Object

Math 객체는 말그대로 수학에 관련된 객체이다. 따라서 수학에 관련된 property와 method를 가지고 있다. 예를 들면 Math.PI는 파이 값을 가지고 있다. 또 Math.sin(1.56)은 sin값을 나타 내는 method이다. 그리고 Math를 많이 쓸 때는 with명령과 같이 쓴다면 편할 것이다.

Date Object

Date 객체는 날자와 시간에 관련된 객체이다. 날자와 시간을 설정하거나 그 값을 알아 보는 method를 가지고 있다. 또 자바 스크립트에는 날자나 시간에 관련된 자료형이 없기 때문에 String형으로 그 값을 반환 하게 된다. Date 객체를 만들기 위해서는 다음과 같이 하면 된다.

객체이름 = new Date(인자)

Built-in Function

Values를 설명할 때 잠깐 언급했던 eval, parseInt, parseFloat가 바 로 Built-in Function이다. 먼저 eval 함수를 살펴보기로 한다.

eval은 주어진 문자열 인자를 받아서 자바스크립트의 표현식, 구문 등으로 바꾸어 값을 구하거나 실행시켜준다. 다음의 예는 type이 text인 input 태그에서 값을 받아서 eval에 값 을 대입해 실행시켜준다.

값에 3+3을 넣었다면 6을 되돌려 주고, document.write('test')라는 구문을 넣으면 화면 에 test라는 문자열을 표시해주도록 실행한다.

parseInt와 ParseFloat는 각각 값을 받아서 형변환을 해주는데, 만약 숫자가 아닐 경우 에는 NaN(Not a Number)를 반환한다.

3.3 HTML Object

보통 최상위 계층의 window는 생략할 수 있다. 만약에 현재 윈도우의 location을 알고 싶다 면 다음과 같이 하면 된다.

4 예제, 마우스 이벤트에 따라 변하는 그림 만들기

Internet Explore 3.0에 추가된 기능 중에 LayOut Coltrol이라는 기능이 있다. 이 기능 은 Ms가 추구 하고 있는 웹의 CD Title화에 일환으로 꽤 호평을 받았다. 특히 마우스 커서 에 따라 그림이 바뀐다거나 음악이 나오는 기능들은 디자인 적인 측면에서 커다란 이점이 다. 인터넷 익스플로어에서는 이를 ActiveX기능으로 구현 하였지만 JavaScript1.1을 이용 하 면 이 기능을 쉽게 구현 할 수 있다.

4.1 Image Object

JavaScript1.1에 추가된 기능중 하나가 Image라는 Object이다. 말그대로 HTML문서의 그림들을 객체화 시켜서 저장 할 수 있는 것이다. 다음 예를 보자.

<html>
<script language=JavaScript>
tempIamge = new Image();
tempImage.src = "turn2.jpg";
</script>
<body>
<img src="turn1.jpg" ><br>
<form>
<input type=button
onClick='document.images[0].src = tempImage.src' value="click here">
</body>
</html>

보면 우선 눈에 띄는 것은 tempImage라는 이름으로 Image라는 형으로 객체를 할당하 고

src라는 property에 그림의 URL을 적어 주면 Image객체가 할당 된 것이다. 또 document객체에 property로 images라는 배열이 있는데. 이는 문서상에 <IMG ~~>태그 로 정의한 이미지 객체들이 이 배열에 들어 가게 된다.

따라서 onClick='document.images[0].src = tempImage.src' 이부분은 문서안에 있는 첫 번째 이미지 (배열은 0부터 시작입니다.)를 tempImage로 바꾸라는 명령이 되죠.

4.2 마우스 이벤트에 따라 이미지 바꾸기

우선 다음과 같이 그림 4장을 준비 했다.

[그림 2] r1.jpg

[그림 3] r2.jpg

[ 그림 4] g1.jpg

[그림 5] g2.jpg

JavaScript1.1부터 <A > 태그에 onMouseOver onMouseOut Event를 지원 한다. 이 이벤트를 이용 하면 마우스가 링크된 영역에 들어오고 나가는 것을 판단 할 수 있다.

그럼 완성된 소스를 보자.

이렇게 해서 document의 이미지를 바꿀 수 있는 것이다. Table등을 써서 Image의 위 치를 잘 조절 하면 쉽게 재미 있는 페이지를 만들 수 있다. 또 다음장에 배우는 Live Connect등의 기술을 쓰면 마우스 이벤트에 따라 음악도 흐르게 할 수 있다. 또 이미지를 애 니메이션 GIF를 쓴다면 더욱더 재미있는 페이지가 될것이다.

5. Live Connect

Live Connect는 한 페이지 내에 있는 Java와 JavaScript 그리고 plug-in간의 통신을 가능하게 하는 기술로 Netscape Navigator 3.0 beta4 부터 지원하는 기능이다.

[그림 6]

Live Connect를 이용해 자바 스크립트로 자바와 할 수 있는 일에 대해 간단히 소개하 자면

자바 스크립트에서 같은 페이지 안에 있는 자바 애플릿의 public 변수 Method와 public Class등을 직접 사용 할 수 있다.
자바 스크립트에서 자바 구문을 그대로 쓸 수 있다.
Plug-in을 제어 할 수 있다.

※ Live Connect 기능을 이용하려면 Netscape의 Options 의 Network Preference의 Language tag의 Java와 JavaScript를 Enable 시켜 놓아야 한다.

※ Live Connect 기능을 이용하려면 Netscape의 Options 의 Network Preference의 Language tag의 Java와 JavaScript를 Enable 시켜 놓아야 한다.

5.1 JavaScript To Java 통신

5.1.1 Java를 직접 제어하자.

JavaScript 는 Java를 직접 제어가능 하다. 예를 들면 System.out.println을 JavaScript 구문 내에 써주면 Java Consol에 메시지가 표시된다. Netscape 3.0의 options 메뉴에서 Show Java Consol을 체크 해주고 다음과 같은 페이지를 만들어 들어가 보자

<html>
<script language=JavaScript>
java.lang.System.out.println("This is Test");
</script>
<body bgcolor=white>
</html>

그러면 다음과 같이 Java Consol에 This is Test라는 내용이 뜰 것이다.

JavaScript에서 Java구문을 참조하기 위해서는 자바 구문을 다음과 같이 바꿔 준다 .

[Packages.]packageName.className.methodName

Packages라는 이름은 java,sun,netscape package에서는 생략 가능 하다. 즉 java나 sun 또 netscape라는 이름은 Packages.java, Packages.sun, Packages.netscape의 생략형이 다. 예를들면 java.lang.System이라는 클래스는 Packages.java.lang.System이 나 java.lang.System이라는 이름둘다 자바 스크립트에서 사용 가능하며 그외의 package에서는 "Packages."를 꼭 붙여 주어야 한다.

변수와 method를 사용하는 방법은 자바와 같다. 예를 들면 다음과 같다.

<html>
<script language=JavaScript>
var System = java.lang.System;
System.err.println("Hello JavaScript");
</script>
<body></body>
</html>

예제에서 System이라는 변수는 java.lang.System이라는 Class를 참조 한다. 또 System Class의 err 이라는 상수는 println이라는 method를 실행 시키고 있다. 여기서 argument가 java.lang.String 형인데(그냥 String 형) JavaScript의 String Class 와 Java의 String class (java.lang.String)은 호환된다.

JavaScript에서는 심지어 Java 오브젝트를 쓸수도 할 수 있다. 예를 들면

var mydate = new java.util.Date();

5.1.2 Applet을 제어 하자!

JavaScript로 Applet를 제어 할 수 있다. 그러기 위해서는 물론 Applet의 public Class 또는 public Method나 public 변수를 잘 알고 있어야겠지만 init(), start() , stop() ,destroy() 등 처럼 Applet에서 기본적으로 있는 method는 쉽게 참조 할 수 있을 것이다. 예 를 든다면 HTML form의 버튼을 제어해서 문서내의 Java Applet을 시작하게 하거나 멈추 게 할 수 있을 것이다.

Applet을 참조 하자!

문서내의 모든 Applet은 "document.appletName" 의 형태로 JavaScript에 의해 사용 될 수 있다. 여기서 appletName은 HTML 문서의 APPLET tag에서 NAME이라 는 속성으로 정의해 주면 된다. 다음 예를 보자.

<HTML>
<script language=JavaScript>
function test_stop() {
document.testApplet.stop();
}
</script>
<BODY>
<APPLET CODE=test.class NAME=testApplet WIDTH=60 HEIGHT=30>
</APPLET>
<form name=test>
<input type=button value="stop" onClick=test_stop()>
</form>
</body></html>

위 예제에서 APPLET 태그를 살펴 보면 NAME=testApplet라는 부분을 볼 수 있을 것이다. Applet의 이름을 testApplet라고 선언한 것이다. 따라서 위 자바 스크립트 부분의 method test_stop()에서는 document.testApplet.stop()라고 해주어 testApplet의 stop() method를 쓴 것이다. 위 표현은 다음과 같이 바꿔 써도 된다.

document.applets["testApplet"].stop()
document.applets[0].stop() // 문서에서 첫 번째 applet라는 뜻 --> applets[0]

그럼 예를 하나 들어 보자 다음예는 Netscape 3.0 Authoring Guide에 있는 예 이다.

//File Name : colors.java
import java.applet.Applet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;

public class colors extends Applet implements Runnable {
Font f = new Font("TimesRoman", Font.BOLD, 48);
Color colors[] = new Color[12];
Thread myThread;
String myString;

public void init() {
// init color array
colors[0] = Color.black;
colors[1] = Color.blue;
colors[2] = Color.cyan;
colors[3] = Color.darkGray;
colors[4] = Color.gray;
colors[5] = Color.green;
colors[6] = Color.magenta;
colors[7] = Color.orange;
colors[8] = Color.pink;
colors[9] = Color.red;
colors[10] = Color.white;
colors[11] = Color.yellow;

myString = new String("Hello, world!");
}
public void start() {
if (myThread == null) {
myThread = new Thread(this);
myThread.start();
}
}
public void stop() {
if (myThread != null) {
myThread.stop();
myThread = null;
}
}
public void run() {

// display array of colors
int i = 0;
while (true) {
setForeground(colors[i]);
repaint();
i++;
try {Thread.sleep(500);}
catch(InterruptedException e) {}
if (i == colors.length)
i = 0;
}
}
public void setString(String aString) {
myString = aString;
System.out.println("myString = " + myString);
repaint();
}
public void paint(Graphics g) {
g.setFont(f);
g.drawString(myString, 15, 50);
}
}

<html>
<body >
<CENTER><H1>Flashing text applet</H1></CENTER>
<APPLET CODE="colors.class" WIDTH=1000 HEIGHT=60 NAME="colorApp">
</APPLET>
<FORM NAME=colorText>
<P>Enter new text for the flashing display:

<INPUT TYPE="text"
NAME="textBox"
LENGTH=50>

<P>Click the button to change the display:
<INPUT TYPE="button"
VALUE="Change Text"
onClick="document.colorApp.setString(document.colorText.textBox.value)">

<P><INPUT TYPE="button"
VALUE="Restart"
onClick="document.colorApp.start()">

<INPUT TYPE="button"
VALUE="Stop"
onClick="document.colorApp.stop()">

</FORM>
<P>
</body></html>

다음은 실행 결과 이다.

HTML form으로 만든 버튼과 입력창들과 자바와의 상호 작용이 완벽하게 이루어 지고 있 다.

5.2 JavaScript로 Plug-in 제어 하기

JavaScript로 플러그인을 제어할 수 있다. 하지만 플러그인의 종류는 굉장히 다양하고 기능 도 다양하다. 따라서 플러그 인마다 제공하는 자바 스크립트 함수도 다르므로 자세한 사항은 플러그인 메뉴얼을 참고해 주기 바란다. 이 강의록에서는 LiveAudio를 중심으로 설명 하겠다. 현재 Live Connect를 지원하는 플러 그인은 3.0용으로 나오는 플러그인들의 대부분이다. 특히 리얼오디오 플러그인은 리얼 오디오 플레이어 3.0 부터 Live Connect를 지원 하고 있으며 Live Connect를 지원하는 Plug-in에 대한 정보는 Live Connect Showcase Page를 참고 하 기 바란다. (http://home.netscape.com/comprod/products/navigator/version_3.0/b uilding_blocks/examples/lc_example/lc-showcase.html)

5.2.1 Live Audio Plug-in 제어

Netscape 3.0에서 기본으로 지원하는 음악 관련 Plug-in이 바로 Live Audio이다. 지원하는 음악화일은 WAV,AIFF,AU,MIDI등이다. 기본으로 지원하는 플러그인이므로 당연히 Live Connect를 지원 한다. 이에 대한 정보는 Netscape 사의 홈페이지를 참고 하기 바란다. 다음은 Live Audio에서 JavaScript를 위한 함수들이다.

*Control Function

play('true/false or int' , 'URL of SOUND')
stop()
pause()
start_time(int seconds)
end_time(int seconds)
setvol(int percent)
faade_to(int to_percent)
fade_from_to(int from_percent,int to_percent)
start_at_beginning()
stop_at_end()

*State indicator

IsReady()
IsPlaying()
IsPaused()
GetVolume()

그럼 예제를 보자.

우선 예제를 보면 Plug-in을 HTML에 끼워 넣는 <EMBED>라는 Tag가 보인다. SRC 에 "ma.wav라는 웨이브 형식의 음악 화일을 설정 했고 HIDDEN을 true로 하여 play stop버튼이라든지 볼륨조정 버튼을 모 두 없앴다. 또 autostart 를 false로 설정 하여 페이지를 읽자 마자 시작 시키는 기능을 죽였다. 위 페이 지를 읽으면 Play the sound now 와 Stop the Sound now!라는 메시지가 썰렁 하게 뜰 것이다. 그럼 Play the sound를 눌러 보자. 그러면 음악이 연주될것이다. (물론 ma.wav파일이 있어야 한다.) 또 Stop the sound 를 누 르면 음악이 멈출 것이다. 소스를 보면 Play 를 누르면 Start_music(), Stop을 누르면 Stop_music()라는 Function이 실행 되게 되있다. Start_music에서는 document.embeds[0].play(false)라고 되어있다. 이는 document객체의 첫번째 Plug-in Object (embeds[0])의 play라는 Method를 실행 하라는 뜻이다. play의 인자 false는 음악의 연속재생 기능을 off 하라는 예기이다. 결과적으로 문서의 첫번째 Plug-in 삽입 객체의 stop라는 play Method를 실행하라는 예기이다. stop의 경우도 마찬가지 이다. 한번 위에 설명했던 Method를 시험해 보기 바란다.

6. Cookie 와 JavaScript

6.1 Cookie 란 ?

웹이 사용 하고 있는 HTTP 라는 프로토콜이 일반 적으로 Connectionless(클라이언 트와 서버가 연결을 계속 이루지 않고 필요할때만 연결함)의 형태를 띄고 있고 다수의 Client의 상태 정보를 소수의 서버에서 저장 하거나 추출 하기가 상당히 까다롭다. 따라서 생겨난 것이 쿠키 인데 쿠키란 클라이언트가 저장이 필요한 정보가 생길 때 마다 클라이언 트 쪽에 일정한 형식의 데이터(쿠키)로 만들어 저장 하고 필요한 서버와 서버의 디렉토리를 접근할 때 그 정보도 같이 보내주는 형태를 취하고 있다. 이 일정한 형태의 데이터 하나하 나가 Cookie 이며 Cookie에는 Cookie 이름(name)과 값(value)을 가지고 있으며 당연히 Cookie가 효력을 가지는 서버(domain)와 디렉토리 파일명(path) 그리고 효력을 가지는 시간 (expires)을 함께 저장 하고 있다. 클라이언트 마다 300개의 Cookie를 만들 수 있으며 쿠키 별로 이름을 포함해 4KB까지 저장 할 수 있다. 즉 쿠키의 형태는 다음과 같다.

Name=Value; expire=DATE; path=PATH; domain=DOMAIN_NAME; secure

Name=Value; expire=DATE; path=PATH; domain=DOMAIN_NAME; secure

secure는 쿠키를 SSL프로토콜에서만 쓸 것인지를 결정 한다.

6.2 Cookie의 활용

쿠키가 많이 쓰일 곧은 웹 쇼핑 페이지에서 이다. 예를 들어 다음과 같은 상황을 생각 해 보자 레코드 가게 홈페이지에서 여러 가지 레코드의 샘플을 듣고 레코드를 살 때 고객이 고른 물품을 쿠키형태로 저장 하고, 최종 지불 할 때 그 쿠키값를 조사 하여 고객이 선택한 물품의 최종 가격을 계산하고 지불 하게 하는 홈페이지를 개발 한다고 하자.

우선 기존의 CGI를 이용하여 쿠키를 생성 하는 것을 생각해보자.

step0) 고객이 브라우저를 통해 페이지를 서버에서 받음.
step1) 고객이 브라우저에서 물건 선택 ( HTML Form 이용)
step2) 선택한 물건이 서버 쪽에 전달 된다. (HTTP 프로토콜을 통해)
step3) CGI에서 선택한 물건을 쿠키 정보로 만들어 클라이언트쪽에 보낸다. : CGI -> "브라우저님 이 쿠키좀 잡숴 보세요" , (브라우저 : 낼름 먹는다)
step4) 고객이 선택을 멈출때까지 step1,2,3 반복.
step5) 고객이 선택을 멈추고 지불 페이지로 간다.
step6) 지불 페이지에서 카드 번호등 지불에 필요한 세부 정보를 쓴다.
step7) 세부 정보와 쿠키정보를 서버에 집어 넣는다.
step8) 구매 완료.

CGI를 쓰면 쿠키를 만들 때 마다 서버쪽 CGI를 계속 실행 해 주어야 하고 네트웍 속도가 느린 상황 이라면 굉장히 느리게 된다. 결정적인 원인은 클라이언트 쪽에서 쿠키를 만들지 않고 서버 CGI를 거쳐 만들었다는 점이다. 하지만 JavaScript는 쿠키를 제어 할 수 있는 기능이 있다.

그럼 JavaScript로 쿠키를 처리 할 때를 상상 해 보자.

step1) 고객이 브라우저를 통해 페이지를 서버에서 받음 이때 각각의 페이지에는 JavaScript Cookie Setting 함수가 들어 있다.
setp2) 고객이 물건을 선택하면 JavaScript Cookie Setting 함수에서 클라이언트 쪽에 Cookie를 Setting해 준다. (브라우저, 혼자 쿠키를 만들어 먹다.~~)
step3) 고객이 선택을 완료 할 때 까지 1,2를 반복 한다.
step4) 고객이 선택을 완료하고 지불페이지로 간다.
step5) 지불 페이지에서 카드 번호등 지불에 필요한 세부 정보를 쓴다.
step6) 세부 정보와 쿠키정보를 서버에 집어 넣는다.
step7) 구매 완료.

눈에 보이는 것은 step 하나준 것밖에 없지만 CGI하나가 줄었고 고객이 상품 선택시 서버에 대한 Access가 반으로 줄게 된다. 이는 굉장한 성과이다.

6.3 JavaScript Cookie

함수

그럼 실제적으로 쿠키 함수를 보도록 하자. 소스에 대한 설명은 생략 하도록 하겠다. 이 소스는 Bill Dortch라는 미국인이 공개한 Cookie Library 이다. 이 라이브러리의 최신판 은 다음의 페이지에서 구할 수 있다.

http://www.freqgrafx.com/411/library.html

그럼 코드를 보자 우선 Cookie를 설정 해주는 SetCookie 함수 이다. SetCookie 함수는 인자로 이름, 값, expire 날자, path, domain, secure가 들어 가게 된다.

function SetCookie (name,value,expires,path,domain,secure) {
document.cookie = name + "=" + escape (value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}

function SetCookie (name,value,expires,path,domain,secure) { document.cookie = name + "=" + escape (value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); }

다음은 Name을 주면 Cookie값을 돌려주는 GetCookie함수 이다.

function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); }

마지막으로 쿠키를 지우는 DeleteCookie 함수 이다.

function DeleteCookie (name,path,domain) { if (GetCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } }

expire 날자를 70년1월1일로 바꾸어 쿠키를 expire 시키는 것이다.

function DeleteCookie (name,path,domain) { if (GetCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } }

7. 결론

HTML의 Tag는 날로 발전하고 그외의 장식 기술도 날로 발전해 가고 있다. 일례로 animation GIF의 등장으로 자바로 animation을 구현한 페이지는 거의 없어졌다. 또 MS의 internet Explore는 Scrolling Text를 자바가 아닌 HTML Tag로 지원 하고 Netscape 차기 버전에서도 지원 할 것이다. 또 Layout Control과 Plug-in ,ActiveX등 여러 가지 기술들이 난립하는 가운데 이러한 기술 들을 연결 해 주는 언어인 JavaScript의 입지는 앞으로도 계속 강화 될 것으로 보인다.

8. 하고 싶은말 & Reference

이문서의 최신버전은 http://www.kwangwoon.ac.kr/~psycho/javascript 에서 구하실수 있습 니다. 문서 작성에 많은 도움을 준 후배 이홍기 군에게 감사를 드립니다. 다음은 제가 이문서를 작성 하면서 참고한 URL과 서적입니다.

8.1 자바스크립트 URL :
자바스크립트 Handbook (Best of the best); 자바 스크립트의 바이블 ,!!
http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/atlas.html

Live Connect (****) ; Live Connect에 관한 간단한 설명
http://home.netscape.com/comprod/products/navigator/version_3.0/building_blocks/livec onnect/how.html

자바 스크립트 인덱스 (***) ; 자바 스크립트에 대한 예제페이지
http://www.c2.org/~andreww/javascript/

자바 스크립트 튜토리얼 (****) ; 초보자용 소개서
http://www.webconn.com/java/javascript/intro/

8.2 자바스크립트 책
Using JavaScript Special Edition , Que 출판사 , 1996 , Mark C,Reynolds & Andrew Wooldridge