Advanced JavaScript Programming

민윤정

서울 강남구 청담동 96-15 동양B/D

다음 커뮤니케이션 인트라넷 사업팀

E-mail: neofox@daum.net

URL: http://www.daum.net/~neofox

Abstract:

자바를 닮은 스크립트 언어, 자바스크립트. 브라우져들이 인터프리터를 제공함에 따라 일반화되었던 이 언어는, navigator3.0발표, 출시 이후 그 기능이 보다 확장되어 서버의 부하를 어느 정도 클라이언트로 분담시키는 데까지 그 이용범위가 확대되고 있다. 이러한 자바스크 립트는 CGI, server api, Java 애플릿, plug-in들과 결합될때 보다 강력한 기능을 발휘할 수 있다. 실용화 할 수 있는 자바스크립트 응용기술들을 중심으로 인터페이스를 구성하는 방법에 대해 알아보고자 한다.

Keyword:

WWW, JavaScript, LiveConnect

1.서론

자바스크립트란 넷스케잎사에서 네비게이터2.0에서부터 구현한 객체 중심적인 스크립트 언어(object-based Script language)이다. 네비게이터와 MS의 익스플로러에서는 이 언어의 인터프리터를 내장(자바스크립트1.0)하여 자바스크립트를 포함하고 있는 페이지를 해석하여 인터랙트한 내용을 end-user에게 보여준다.

넷스케잎사에서는 네비게이터3.0을 발표하면서 기존의 HTML에 포함되어 사용되는 Client-side 자바스크립트와 함께 서버 제품군인 LiveWire에서 제공되는 스크립트언어 Server-side 자바스크립트를 발표했다. 또한 3.0버전 이상의 브라우저부터는 자바스크립트1.1, Netscape communicator에서 지원되는 자바스크립트1.2버전을 발표했다. 그 기능이나 이용범 위가 보다 확대된 자바스크립트는 보다 광범위한 가능성을 보여주고 있다. 자바스크립트는 주로 end-user가 보다 쉽게, 또 보다 interactive하게 사용할 수 있도록 하는 도구로 각광을 받고 있다.

또한 Netscape사의 서버 제품군에서 제공하고 있는 Server-side JavaScript는 MS사의 Visual Basic Script,ActiveX control의 대응으로 보이기도 한다. 어떤 도구, 어떤 언어를 선택하여 자신의 Web Site를 혹은 인트라넷 제품군을 제작할지의 여부는 전적으로 개발자의 현재 환경이나, 취향에 달려 있다고 할 수 있다. 본고에서는 효율적인 인터페이스를 구성하고 서버쪽 프로그램의 부하를 줄일 수 있는 한가지 방법으로서 자바스크립트를 설명해 보고자 한다.

2. 자바스크립트의 object들

위의 그림과 같은 구조를 가지는 Navigator object들을 navigator들이 여러속성들을 이용한 자바스크립트 구문을 만들 수 있다. 각각의 object들은 계층적인 구조를 가지며 하위 object 의 속성(property)이나 메쏘드(method)를 사용하기 위해서는 상위나 현재 위치를 지시해 주어야 한다.

예를 들어,

HTML부분 : 이와 같은 구문에서 form문내의 text1이라는 이름을 가지는 text입력란은 다음과 같이 자바스크립트 구문에서 표현될 수 있다.

document.formname.text1.value

document.form[0].text1.value

Netscape Homepage - JavaScript Object Summery 참조

Object

Properties

Methods

Event handlers

Submit

form

name

type

value

blur

click

focus

onBlur

onClick

onFocus

Anchor

none

none

none

anchors array

length

none

none

Applet

none

All public methods of the applet

none

Text

defaultValue

form

name

type

value

blur

focus

select

onBlur

onChange

onFocus

onSelect

applets array

length

none

none

Area

hash

host

hostname

href

pathname

port

protocol

search

target

none

onMouseOut

onMouseOver

Textarea

defaultValue

form

name

type

value

blur

focus

select

onBlur

onChange

onFocus

onSelect

window

closed

defaultStatus

document

Frame

frames

history

length

location

name

opener

parent

self

status

top

window

alert

blur

clearTimeOut

close

confirm

focus

open

prompt

setTimeOut

onBlur

onError

onFocus

onLoad

onUnload

Array

length

prototype

join

reverse

sort

none

Button

form

name

type

value

blur

click

focus

onBlur

onClick

onFocus

Checkbox

checked

defaultChecked

form

name

type

value

blur

click

focus

onBlur

onClick

onFocus

Date

prototype

getDate

getDay

getHours

getMinutes

getMonth

getSeconds

getTime

getTimezoneOffset

getYear

parse

setDate

setHours

setMinutes

setMonth

setSeconds

setTime

setYear

toGMTString

toLocaleString

toString

UTC

valueOf

none

document

alinkColor

Anchor

anchors

Applet

applets

Area

bgColor

cookie

domain

embeds

fgColor

Form

forms

Image

images

lastModified

linkColor

Link

links

referrer

title

URL

vlinkColor

close

open

write

writeln

none

FileUpload

form

name

type

value

blur

focus

onBlur

onChange

onFocus

Form

action

Button

Checkbox

elements

encoding

FileUpload

Hidden

length

method

name

Password

Radio

Reset

Select

Submit

target

Text

Textarea

reset

submit

onReset

onSubmit

forms array

length

none

none

Frame

frames

name

length

parent

self

window

blur

clearTimeout

focus

setTimeout

onBlur

onFocus

frames array

length

none

none

Hidden

name

type

value

none

none

history

current

length

next

previous

back

forward

go

none

history array

length

none

none

Image

border

complete

height

hspace

lowsrc

name

prototype

src

vspace

width

none

onAbort

onError

onLoad

images array

length

none

none

Link and Area

hash

host

hostname

href

pathname

port

protocol

search

target

none

onClick

onMouseOut

onMouseOver

links array

length

none

none

location

hash

host

hostname

href

pathname

port

protocol

search

reload

replace

none

Math

E

LN2

LN10

LOG2E

LOG10E

PI

SQRT1_2

SQRT2

abs

acos

asin

atan

atan2

ceil

cos

exp

floor

log

max

min

pow

random

round

sin

sqrt

tan

none

MimeType

description

enabledPlugin

type

suffixes

none

none

mimeTypes array

length

none

none

navigator

appCodeName

appName

appVersion

mimeTypes

plugins

userAgent

javaEnabled

taintEnabled

none

options array

length

none

none

options array elements

defaultSelected

index

length

selected

selectedIndex

text

value

none

none

Password

defaultValue

form

name

type

value

blur

focus

select

onBlur

onFocus

Plugin

description

filename

length

name

none

none

plugins array

length

refresh

none

Radio

checked

defaultChecked

form

length

name

type

value

blur

click

focus

onBlur

onClick

onFocus

Reset

form

name

type

value

blur

click

focus

onBlur

onClick

onFocus

Select

form

length

name

options

selectedIndex

text

type

blur

focus

onBlur

onChange

onFocus

String

length

prototype

anchor

big

blink

bold

charAt

fixed

fontcolor

fontsize

indexOf

italics

lastIndexOf

link

small

split

strike

sub

substring

sup

toLowerCase

toUpperCase

none

3. 기선언된 객체(built-in objects)

자바스크립트는 기선언된 함수(built-in function)들과 object들을 가지고 있으며, 적절히 사용한다면 보다 손쉽게 자바스크립트구문을 작성할 수 있다. 자바스크립트에서는 Array, Boolean, Date, Function, Math, Number, String등이 선언되어 제공된다. 기선언된 객체들은 각각 method와 properties를 이용해 특정값을 얻거나 특정 루틴을 수행할 수 있다. 각각의 객체들의 기능을 살펴보면,다음과 같다.

배열(Array object)

1. arrayObjectName = new Array([arrayLength])

2. arrayObjectName = new Array([element0, element1, ..., elementn])

위와 같은 방식으로 생성하고 다음과 같은 메쏘드를 갖는다.

□join : 모든 element를 하나의 스트링으로 만들어줌

□reverse : element들의 값을 역순으로 함

□sort : 알파벳 혹은 숫자순으로 정렬

Boolean object

Boolean 값이 아닌 값을 이용할 때 이를 Boolean(true,false,or null)값으로 변환하고자 할때 사용할 수 있다. 자바스크립트에서는 기본적으로 ValueOf 메쏘드를 이용하면 boolean값을 return시킬 수 있다.

Boolean object의 생성자(constructor)는 다음과 같이 선언된다.

booleanObjectName = new Boolean(value)

사용예>

bfalse = new Boolean(false)

btrue = new Boolean(true)

Date object

자바스크립트는 앞서 살펴보았듯이 특정 데이타 타입을 갖지 않는다. 따라서 Date Type이 별도로 존재하지 않는다. 그러나, 이 언어에서는 Date Object가 선언되어 특정날짜 형식을 다룰 수 있도록 지원한다.

이 객체는 여러가지 날짜를 지원할 수 있는 수많은 메쏘드들을 가지지만 properties,를 갖지는 않는다. 또한 자바와 아주 유사하게 이용되는데 1970년 1월1일을 기준으로 셋팅되어 그 이전의 날짜를 처리할 수는 없는 제한을 가진다.

생성자는 다음과 같다.

dateObjectName = new Date([parameters])

이 때 parameter의 값에 따라 다음과 같은 차이점을 가진다.

아무것도 주지 않을 경우:

현재 날짜와 시간을 얻는다. 예> today = new Date().

특정형식을 주었을 경우:

"Month day, year hours:minutes:seconds." 이 경우 시간:분:초의 값을 생략했다면 0가 셋팅된다. 예> Xmas95 = new Date("December 25, 1995 13:30:00").

정수값의 특정형식을 주었을 경우:

year, month, day의 순으로 정수값을 대입했을 경우임.	예> Xmas95 = new Date(95,11,25). Xmas95 = new Date(95,11,25,9,30,0).

<예제>

The current time is 시간을 출력하는 간단한 시계를 만드는 예제·주요 메쏘드인 get, set을 유의해 보라.

각 시간을 얻어오고 이 시간을 정해진 포맷으로 출력할 수 있도록 변수에 저장한다. 맨 마지막 부분에서는 JSClock 스크립트가 재호출(recall)되고 있는 모습을 볼 수 있다 . setTimeout은 2번째 아규먼트의 delay만큼 후 시간을 다시 셋팅해 준다.

즉, 1000 milliseconds(1 second)만에 새로운 시간값을 셋팅해주고 있다.

Function object

이 객체는 실제 인터프리터가 구문을 해석할때 이 객체를 function으로서 처리할 수 있도록 한다.

functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)

의 형식으로 선언되며 실례는 다음과 같다.

var setBGColor = new Function("document.bgColor='antiquewhite'")

이렇게 선언된 객체는 다음과 같이 이용될 수 있다.

if (colorChoice=="antiquewhite") {setBGColor()} 하지만, 이렇게 수행하기 위해서는 해당 function이 call되기 전에 다음과 같이 선언할 경우도 같은 결과를 얻는다.

function setBGColor() { document.bgColor='antiquewhite' } 차이점은 전자와 같이 object로 선언되었을 경우 setBGColor는 하나의 변수이며, 이 변수는 new 구문을 이용해 생성되었을 때부터 참조된다. 그러나 아래와 같이 function으로 선언되었을 경우 setBGColor는 변수가 아닌 함수명이 된다. 따라서 변수명과 같이 이용될 수 없다.

Math object

이 객체는 산술적인 계산을 하기위한 property와 메쏘드들을 가진다.

Math object의 메쏘드는 다음과 같다.

메쏘드	Description
abs	Absolute value
sin, cos, tan	Standard trigonometric functions; argument in radians
acos, asin, atan	Inverse trigonometric functions; return values in radians
exp, log	Exponential and natural logarithm, base e
ceil	Returns least integer greater than or equal to argument
floor	Returns greatest integer less than or equal to argument
min, max	Returns greater or lesser (respectively) of two arguments
pow	Exponential; first argument is base, second is exponent
round	Rounds argument to nearest integer
sqrt	Square root

또한 예를 들어 Math.Pi는 3.141592...의 원주율을 나타낸다. 이러한 Math object는 여러번 선언하여 사용할 필요는 없다. 다음과 같이 사용이 가능하다.

with (Math) { a = PI * r*r y = r*sin(theta) x = r*cos(theta) }

String object

mystring = new String ("Hello, World!")

와 같은 형식으로 생성한다. 이 객체는 단 하나의 property를 갖는데 바로 length이다.

x = mystring.length

라고 한다면 mystring이 13 개의 char로 이루어졌으므로 13이라는 값이 x변수에 할당된다.

Method	Description
anchor	Creates HTML named anchor
big, blink, bold, fixed, italics, small, strike, sub, sup	Creates HTML formatted string
charAt	Returns the character at the specified position in string
indexOf, lastIndexOf	Returns the position of specified substring in the string or last position of specified substring, respectively
link	Creates HTML hyperlink
split	Splits a String object into an array of strings by separating the string into substrings
substring	Returns the specified subset of the string
toLowerCase, toUpperCase	Returns the string in all lowercase or all uppercase, respectively

4. 기선언된 함수(built-in functions)

또한 자바스크립트에서는 기선언된 함수들이 있어 이를 이용할 수 있다.

IsNaN

사용법: IsNan(testvalue)

testvalue의 값이 Nan이면 (number가 아니면 )true를 number라면 false를 반환.

주로 parseInt, parseFloat 함수에서 패러미터가 숫자가 아니라면 NaN값이 반환되므로 함께 이용된다.

eval

사용법: eval(expression)

사용예:var x = 2 var y = 39 var z = "42" println(eval("x + y + 1")) println(eval(z)) parseInt parseInt(str [, radix])

radix에 따라 string을 파싱하여 해당 스트링의 10진수값을 얻는다. 즉, radix에 따라 10진수, 8진수, 16진수등으로 전환된 값을 얻을 수 있다.

string이 0x로 시작하면 16진수로 인식해 radix가 16으로 셋팅되고, 0으로 시작하면 8진수로 인식해 radix를 8로 셋팅한다. 만약 범위를 벋어났다면 Nan을 return한다.

parseFloat parseFloat(str [, radix])

escape, unescape escape, 함수는 특수문자(space,+,comma등)을 encoding하여 URL로 사용할 수 있도록 한다. GET방식으로 패러미터들을 넘길때는

반드시 escape을 시켜주어야 한다. escape된 스트링은 unescape으로 decoding한다.

예제:

myURL = "/my-cgui/cginame?OP=1 myURL += escape(value1)+" myURL += escape(value2); self.location= myURL

5. 자바스크립트의 응용

자바스크립트를 실제로 운용함에 있어 유용한 방법들을 정리해 보았다. 이러한 방법들은 혼용 사용할때 보다 유용한 루틴을 수행할 수 있다. 우리가 살펴볼 부분들은 다음과 같다.

5.1 자바스크립트 URL이용하기

5.2 쿠키 이용

5.3 client-side image map 이용하기

5.4 server-side image map 이용하기

5.5 설치된 plug-in 판단

5.6 status bar 이용하기

5.7 Live Connect

5.8 Window와 프레임 이용하기

5.1 자바스크립트 URL이용하기

URL의 형식은 보통 프로토콜(http: file: ftp: news: mailto:)등으로 시작하거나 상대적인 주소로 표현된다. 그러나 JavaScript: 라는 형식으로 시작되면 그 이후에 자바스크립트의 코드를 url로 이용할 수 있다.

예제:

: 이전 페이지로 되돌아간다.

Back

: 이전에 선언된 자바스크립트 function을 call한다.

Enter

5.2 쿠키값 이용하기

쿠키란 클라이언트쪽의 cookies.txt란 화일에 특정값을 name=value; 형식으로 저장하여 이 값을 이용해 클라이언트에 속성을 지정하여 해당서버에 접속할때 이값을 참조하여 특정 내용을 수행할 수 있도록 해주는 유용한 도구이다.

이 쿠키값을 기본적인 제한을 갖는데 그 제한은,

□ 쿠키화일에는 3백개의 쿠키값들만이 저장됨

□ 4K를 넘지 못함

□ 쿠키값은 특정서버나 도메인당 20개만이 지정됨

이 제한내에서 쿠키값을 셋팅하거나 사용할때 자바스크립트가 유용하게 사용될 수 있다. 자바스크립트는 쿠키값을 셋팅하고(expire date설정가능), 주어진 이름으로 셋팅되어 있는 쿠키값을 얻어올 수 있다.

실례를 살펴보면,

function setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())) } function getCookie(Name) { var search = Name + "=" if (document.cookie.length > 0) { // if there are any cookies offset = document.cookie.indexOf(search) if (offset != -1) { // if cookie exists offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset) // set index of end of cookie value if (end == -1) end = document.cookie.length return unescape(document.cookie.substring(offset, end)) } } }

5.3 Client-Side Image Map 이용하기

특정 URL대신 클라이언트 사이드 이미지맵에서도 비슷한 방식으로 자바스크립트를 이용할 수 있다.

5.4 ServerSide Image Map 이용하기

Click on the image

str = location.search if (str == "") document.write("

No coordinates specified.") else { commaloc = str.indexOf(",") // the location of the comma document.write("

The x value is " + str.substring(1, commaloc)) document.write("

The y value is " + str.substring(commaloc+1, str.length)) } 위의 예를 보자. 이 문서의 이름을 img.html로 저장하면 마우스가 이미지 위의 특정부분을 클릭할때마다 페이지가 reflesh된다. 그리고 else 이하 구문은 URL?x,y로 넘어오는 x값과 y값을 출력한다. 서버사이드 이미지맵은 img 태그의 ISMAP으로 정의되고 URL로 CGI를 call하여 imagemap을 수행시킨다. 이때 마우스의 클릭은 x,y값이 URL?x=number,y=numger의 형식으로 전달되게 된다.

5.5. Status bar이용하기

네비게이터 아랫부분의 status bar를 이용한다면 도움말등을 출력할 수 있다.

다음 예제는 특정 이미지위에 마우스가 갈때마다 도움말을 출력해주고 마우스가 벗어나면 값을 클리어 해주는 예이다.

(단, onMouseOut 이벤트 핸들러는 navigator3.0이상에서 구현된 자바스크립트1.1스펙이다.)

content.html

5.6 설치되어 있는 plug-in판단하기

mime types와 plugins 배열을 이용하면 특정 plug-in이 설치되어 있는지 여부를 판단할 수 있다.

mime types 배열의 속성을 이용하면 type, description, file extensions, 가능한 plug-in들을 알 수 있다.

다음은 예제로서 image/jpeg 마임타입의 속성들이다.

Expression	Value
navigator.mimeTypes["image/jpeg"].type	image/jpeg
navigator.mimeTypes["image/jpeg"].description	JPEG Image
navigator.mimeTypes["image/jpeg"].suffixes	jpeg, jpg, jpe, jfif, pjpeg, pjp
navigator.mimeTypes["image/jpeg"].enabledPlugin	null

다음은 quick time movie를 해당 브라우저가 보여줄 수 있는지를 체크해준다.

var myMimetype = navigator.mimeTypes["video/quicktime"] if (myMimetype) document.writeln("Click  to see a " + myMimetype.description) else document.writeln("Too bad, can't show you any movies.")

here

plugins 배열은 현재 브라주저에 인스톨되어 있는 플러그인들을 나타낸다.

다음은 navigator3.0에 기본으로 탑재된 LiveAudio의 경우 플러그인 배열과 속성들을 나타낸다.

Expression	Value
navigator.plugins['LiveAudio'].name	LiveAudio
navigator.plugins['LiveAudio'].description	LiveAudio-Netscape Navigator sound playing component
navigator.plugins['LiveAudio'].filename	d:\nettools\netscape\nav30\ Program\plugins\NPAUDIO.DLL
navigator.plugins['LiveAudio'].length	7

여기에서 length라는 속성값인 7은 7개의 mime types 요소를 가진다는 것을 말한다. 즉, 이 플러그인이 갖는 mime type의 속성을 찾아보면 다음과 같이 나타날 수 있다.

Expression	Value
navigator.plugins['LiveAudio'][1].type	audio/x-aiff
navigator.plugins['LiveAudio'][1].description	AIFF
navigator.plugins['LiveAudio'][1].suffixes	aif, aiff
navigator.plugins['LiveAudio'][1].enabledPlugin.name	LiveAudio

다음 스크립트는 현재 브라우저가 shockwave 를 설치했는 지의 여부를 판단해주는 예이다. var myPlugin = navigator.plugins["Shockwave"] if (myPlugin) document.writeln("") else document.writeln("You don't have Shockwave installed!")

5. 7 LiveConnect

LiveConnet를 위한 준비

라이브커넥트란 자바스크립트와 페이지내의 Java Applet, 자바스크립트와 plug-in간의 연결을 말한다. 기능적으로는 자바스크립트를 이용해 자바애플릿내의 변수, 클래스, 패키지등을 직접 억세스 한다.

플러그인이나 자바 애플릿을 자바스크립트를 이용해 제어한다.

자바스크립트의 속성이나 메쏘드를 자바 코드내에서 억세스한다.

이상의 내용을 라이브 커넥트의 기본 기능으로 볼 수 있다.

이 라이브커넥트는 navigator3.0이상에서만 지원된다. 만약 당신이 explorer를 이용한다면 Active X 컴포넌트를 이용해야 할 것이다. 또한 이러한 기능을 이용하기 위해서는 navigator의 Options메뉴의 Network Preferences에서 Language 부분을 다음과 같이 선택해야 한다.

Enable Java

Enable 자바스크립트

또한 Options 메뉴의 자바 콘솔을 이용하면 자바 애플릿을 trace하거나 LiveConnet시 내용을 trace할 수 있어 유용하다.

본격적인 LiveConnet

자바스크립트를 이용해 자바애플릿을 접근하는 방법은,

□ 자바 메쏘드를 직접 call하기

□ 자바 애플릿을 제어

□ 자바 플러그인을 제어

□ [Packages.]packageName.className.methodName

의 형식으로 public으로 선언된 메쏘드들을 직접 call할 수 있다.

다음은 그 예제이다.

var System = java.lang.System System.err.println("Greetings from 자바스크립트") var mydate = new java.util.Date() System.out.println(myDate)

자바애플릿 제어 자바애플릿의 클래스명이나 선언된 순서로 applet은 자바스크립트 코드로 다음과 같이 지정할 수 있다. document.AppletName document.Applet[index] 다음 예제는 자바스크립트를 이용해 form의 버튼을 클릭했을때 자바애플릿내의 메쏘드를 call하는 예이다.

자바코드

import java.applet.Applet; import java.awt.Graphics; public class HelloWorld extends Applet { String myString; public void init() { myString = new String("Hello, world!"); } public void paint(Graphics g) { g.drawString(myString, 25, 20); } public void setString(String aString) { myString = aString; repaint(); } } 자바스크립트 코드:

자바 플러그인 제어

자바플러그인은

document.embeds[0] document.embeds["myEmbed"] document.myEmbed 와 같이 embeds 배열또는 embed tag의 이름으로 call할 수 있다.

라이브오디오(LiveAudio)는 라이브 커넥트를 지원하는 plug-in제품이다.

다음은 라이브오디오를 제어할 수 있는 자바스크립트의 메쏘드들이다.

play({loop[TRUE, FALSE or an INT]}, '{url_to_sound}') pause() stop() StopAll() start_time({number of seconds}) end_time({number of seconds}) setvol({percentage number - without "%" sign}) fade_to({volume percent you wish to fade to - without the "%" sign}) fade_from_to({volume percent start fade}, {volume percent end fade}) start_at_beginning() stop_at_end()

다음은 직접 제어할 수는 없으나 플러그인의 상태를 알 수 있는 메쏘드들이다.

IsReady IsPlaying IsPaused GetVolume 다음은 그 예제이다.

Play the sound now!

Pause the sound now!

Stop the sound now!

Increment the Volume!

Decrement the Volume!

5.8 윈도우와 프레임 이용하기

윈도우 open:

msgWindow=window.open

("","displayWindow","toolbar=no,scrollbars=yes");

msgWindow.location = " sample.html";'

msgWindow.forms[0].inputfieldname.focus();

위와 같은 구문은 윈도우를 생성하고 해당 윈도우에 sample.html문서를 load한다.

3번째 문장은 새로 load한 문서의 form object중 inputfieldname이란 이름을 가진 태그에 focus라는 메쏘드를 적용함으로써 새로 open하는 윈도우가 기존에 띄워져있는 윈도우라도 activate시켜준다.

다음은 윈도우를 띄울때 지정할 수 있는 속성값이다. 각 속성은 1이나 0, 또는 yes/no로 지정할 수 있다.

toolbar[=yes|no]|[=1|0]	//기능버튼들을 나타냄

location[=yes|no]|[=1|0]	// 문서의 URL을 나타내는 부분

directories[=yes|no]|[=1|0]	// 네비게이터의 디렉토리 버튼

status[=yes|no]|[=1|0]	//status부분

menubar[=yes|no]|[=1|0]	// menubar부분

scrollbars[=yes|no]|[=1|0]	//스크롤바부분

resizable[=yes|no]|[=1|0]           //늘이거나 줄일 수 있는지 여부

width=pixels

height=pixels

윈도우 close: 선언한 윈도우는 다음과 같이 닫는다.

window.close()

self.close()

msgWindow.close()

프레임이 다음과 같이 선언되어 있다면 각각의 창은 다음과 같은 계층구조로 구성된다.

top

|

+--listFrame (category.html)

|

+--contentFrame (titles.html)

|

+--navigateFrame (navigate.html)

각각의 프레임은 다음과 같이 배열로 선언이 가능하다.

listFrame : top.frames[0] contentFrame : top.frames[1] navigateFrame : top.frames[2]

따라서 각각의 프레임의 내용을 바꾸거나 하려면 다음과 같은 명령으로 가능하다. top.frames[0].location = "newlocate.html"; 윈도우나 프레임의 내용을 업데이트하기 위해서 가장 손쉬운 방법은 다음과 같이 target 태그를 이용하는 방법이다. 이와 같은 HTML문은 링크를 클릭하거나 form의 수행결과가 해당 타겟으로 지정된 윈도우(또는 프레임)으로 출력된다. 프레임을 선언했다면 생성되는 계층구조는 top 프레임이나 parent, child 혹은 다른 프레임의 내용을 바꾸기 용이하게 해준다. top이란 이름은 가장 최상위 프레임을 가리키며 parent는 현재 프레임의 상위 프레임을 가리킨다. 윈도우를 open했을 경우는 해당 윈도우의 parent가 제대로 동작하지 않는데 이는 윈도우 open시 다음과 같이 해줌으로써 찾을 수 있다.

msgWin = window.open("sample.html","msgWin"); msgWin.creator = self; 새로 open한 윈도우에서는 self.creator라는 구문으로 자신을 open한 윈도우를 찾을 수 있다. (단, 이 내용은 Netscape Navigator2.02이상에서만 가능)

6.맺음말

앞서 설명한 내용들을 기반으로 자신만의 자바스크립트 코드를 작성해 보자. Client-Side JavaScript는 Document의 내용을 볼 수 있으므로 다른 여러 사이트들의 내용을 보고 참조가 가능할 것이다. 실례를 통해 앞서 설명한 object들과 각각의 경우에 있어서 자바스크립트가 어떻게 응용되고 있는지를 살펴봄으로써 개발자는 쉽게 이 언어를 익힐 수 있을 것이다.

또한 새로 출시된 netscape사의 communicator preview release2이상 버전부터는 새롭게 추가된 태그인 layer 태그와 함께 자바스크립트를 이용해 손쉽게 자신의 페이지내의 여러 객체들을 control할 수 있도록 제공한다. 이를 JavaScript Style Sheet라고 부르며 이는 communicator에서 구현이 된 방식이다.

현재까지 알려진 버그로는 table, form 태그와 혼용하여 사용될때 nested 순서를 잘 지키 지 않거나 많은 이미지들을 사용할 경우 이미지의 width, height를 지정하지 않았을 경우 브라 우저의 오동작을 일으킬 우려가 있었다. 또한 기존 텍스트 에디터를 이용해서 작성되어 왔 으므로 디버깅에 어려운 약점이 있었다. 그러나 현재는 Visual JavaScript가 발표되는 등 그 디버깅 및 제작을 할 수 있는 툴들이 나오고 있으므로 이를 이용한다면 보다 쉽게 작성이 가능할 것이다.

References

Programming JavaScript for Netscape2.0, By Tim Ritchey , 1996, New Riders 펴냄. http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html, Netscape JavaScirpt Authoring Guide. http://developer.netscape.com/library/documentation/jshtm.zip, Netscape developer Documentation Page. http://developer.netscape.com/library/documentation/communicator/js1_2.htm, What's new in Communicator. http://www.javaworld.com/jw-03-1996/jw-03-javascript.intro.html, JavaWorld beginners' Guide. http://www.microsoft.com/jscript/jsmain.htm, MicroSoft JScript.