- 1 -
          
남들과 구별되는 홈페이지를 만들고 싶다. 
살아 움직이는 홈페이지를 만들고 싶다. 홈
페이지를 가진 사람은 누구나 한번쯤 생각하
는 것들이다. 그래서 멋있는 그림을 넣어 보
기도 하고, 디자인을 바꿔보기도 한다. 하지
만 홈페이지는 살아움직이지 않는다. 여기 
홈페이지에 생기를 불어넣는 방법을 소개한
다. 바로 ‘자바스크립트’가 그 해결책이다. 자
바스크립트는 몇 년전에 등장하여 네티즌에
게 서태지만큼이나 놀라운(?) 인기를 받고 
있다. 자바스크립트를 이용하면 홈페이지에 
생기가 돌게 된다. 
자바스크립트는 초보자에게 어렵다. 그러나 
전문 인터넷 프로그래머가 아닌 이상 굳이 
자세히 배울 필요가 있을까? 물론 아는 것이 
힘! 하지만 여기서는 자바스크립트를 내 홈
페이지에 어떻게 활용할 수 있는 가를 위주
로 살펴보자.
자바스크립트가 뭡니까?
자바스크립트는 넷스케이프사에서 개발한 스
크립트 언어이다. 스크립트 언어라 하는 것
은 HTML 문서에 포함되어 HTML 문서를 
보다 동적으로 하기 위해서 만든 일종의 컴
퓨터 언어를 말한다. 움직이는 글자를 만들 
수도 있고, 시계를 만들 수 있다. 하지만 프
로그램 언어라서 배우기가 좀 어렵다. 하지
만 자바스크립트를 활용하면 홈페이지에 생
기가 돈다.
자바? 자바스크립트?
자바라는 말을 혹시 들어보았는지 모르겠다. 
자바와 이름이 비슷하기 때문에 자바스크립
트를 자바라고 생가하기도 한다. 하지만 이 
두 개는 이름만 비슷하지 완전히 별개이다. 
자바스크립트는 HTML 파일 내에 같이 기
술된다. 그러나 자바는 애플릿이라고 해서 
HTML 페이지 내의 작은 공간에 로딩되어 
별도로 수행된다. 이 점이 가장 큰 차이점이
라고 볼 수 있다. 
자바스크립트가 필요한가?
HTML 문서를 만들 때 태그를 공부했다. 
HTML 태그를 이용해 인터넷에 홈페이지를 
만들었다. 자바스크립트를 이용하면 홈페이
지를 동적으로 만들 수 있을 뿐 아니라, 인
터넷 전문가의 길에 발을 내딛는 계기가 된
다. 그리고 남이 만든 홈페이지를 살펴볼 수 
있다. 요즘 잘 나가는 홈페이지는 자바스크
립트를 대부분 이용한다. 홈페이지 화면이외
에 또 하나의 창이 뜨고, 홈페이지에 시계가 
있고, 화면배색이 바뀌고... 이러한 모든 것들
이 자바스크립트에 의해서 이루어진다.
PC사랑 기고글 (4화)
내 홈페이지는 살아 움직인다
자바스크립트를 알자!
- 2 -
(그림 1) 자바스크립트 홈페이지
자바스크립트 활용하기
자바스크립트 코드는 HTML 문서에 넣어져 
있다. 이것이 어떻게 작동하는지 다음 예제
를 보면 쉽게 알 수 있다.
<html>
<head>
<title>자바스크립트 예제</title>
</head>
<body>
<center>
<h2>자바스크립트 글씨쓰기</h2>
<hr><br>
<script language="JavaScript">
document.write("자바스크립트 시작하기")
</script>
</center>
</body>
</html>
(그림 2) 자바스크립트 글씨 쓰기
얼핏보기에는 보통 HTML 문서처럼 보이지
만 중간에 일반 HTML 에서는 볼 수 없는 
새로운 내용이 추가된 것을 볼 수 있다. 파
란색부분으로 된 것이 바로 자바스크립트이
다. HTML 문서에 들어가는 자바스크립트 
문법은 다음과 같다.
<script language="JavaScript">
....
</script>
자바스크립트의 내용은 <script> 태그안에 
정의 되어 실행된다. 앞의 예에서는 
document.write() 라는 것이 사용되었다. 
document.write()는 자바스크립트에서 가장 
많이 쓰이는 것 중의 하나이므로 알아둘 필
요가 있다. 이것을 확실히(?) 이해하여야 이
와 비슷하게 점(.)으로 구성된 자바스크립트 
문법을 쉽게 이해할 수 있다. 
document.write() 태그는 ()안의 문자를 화면
에 출력하기 위해 사용된다. document 라는 
것은 현재의 문서를 의미하고, write 라는 
것은 뭔가를 출력하라는 것을 의미한다.
자바스크립트를 지원하지 않는다고?
요즘의 대부분의 브라우저인 넷스케이프, 인
터넷 익스플로어는 자바스크립트를 기본적으
로 지원하고 있다. 하지만 예전 버전의 브라
우저는 자바스크립트를 지원하지 않았다. 그
러한 게으른(?) 사용자를 위해서 자바스크립
- 3 -
트를 감추는 것이 필요하다. 감추는 방법은 
HTML 주석 태그인 <!-- -->를 이용한다. 
주석 태그 안에 있는 내용은 화면에 출력되
지 않는다. 주석 태그를 이용하지 않으면 예
전 버전의 브라우저는 자바스크립트를 파악
하지 못하고 소스코드를 화면에 그대로 출력
하게 된다. 
<script language="JavaScript">
<!--
document.write("자바스크립트 감추기")
// -->
</script>
이벤트가 무엇입니까?
이벤트는 사전에 ‘사건’이라고 정의 되어있
다. 사용자가 버튼을 클릭했을 때, Click 이
벤트가 일어나는 것이다. 다음 예제는 사용
자가 버튼을 클릭하였을 때, ‘PC 사랑’이라고 
적힌 메시지 창이 뜬다.
<html>
<head>
<title>자바스크립트 예제</title>
</head>
<body>
<center>
<h2>자바스크립트 이벤트 발생시키기</h2>
<hr><br>
<form>
<input type="button" value="예제실행" 
onClick="alert('PC 사랑')">
</form>
</center>
</body>
</html>
(그림 3) 자바스크립트 이벤트 발생시키기
<form>은 형식을 뜻하는 HTML 태그이다. 
<form> 태그 안에 <input> 태그를 이용하
여 브라우저에게 정보를 보낼 수 있다. 
onClick="alert('PC 사랑‘)이라는 새로운 자
바스크립트 명령이 나왔다. 이것은 버튼을 
클릭하였을 때 컴퓨터가 alert('PC 사랑’)를 
실행시키라는 명령이다. alert는 메시지 창을 
뜨게 하는 내장함수이다. 주의깊은 독자는 
이상한 점을 발견할 것이다. 앞에서 
document.write()명령에서는 이중따옴표(“)를 
사용했고, alert에서는 그냥 따옴표(‘)를 사용
했다. 이유는 onClick="alert('PC 사랑’)”에서 
이중따옴표와 따옴표를 모두 사용하기 때문
이다. 둘다 이중따옴표를 사용하면 컴퓨터가 
혼란스러워 할 것이다. 
자바스크립트 함수 만들기
프로그램을 만들어본 사람은 함수가 무엇인
지 쉽게 알 수 있을 것이다. 하지만 초보자
에게는 함수라는 것이 생소하기만 하다. 다
음 예제를 통해 함수가 무엇인지 살펴보자. 
- 4 -
<html>
<head>
<title>자바스크립트 예제</title>
</head>
<script language="JavaScript">
<!--
function calculation() {
var x=10;
var y=5;
var result=x+y;
alert(result);
}
// -->
</script>
<body>
<center>
<h2>자바스크립트 함수 만들기</h2>
<hr><br>
<form>
<input type="button" value="계산하기" 
onClick="calculation()">
</form>
</center>
</body>
</html>
(그림 4) 자바스크립트 함수 만들기
버튼을 누르면 calculation() 함수가 실행되
고, 10과 5를 더한 결과가 메시지 창에 뜬다.  
보통 자바스크립트 함수는 <head>와 
</head> 태그 사이에 보통 위치한다. 
calculation()함수는 세 개의 변수 x, y, 
result를 사용한다. 변수 x와 y를 더한 값을 
result에 저장하고 이를 alert()라는 내장함수
를 사용해 메시지 창에 보여준다. 
초보자에게는 어려운 내용이 될 수도 있을 
것이다. 이것만 이해하면 된다. function으로 
시작하는 것이 바로 자바스크립트 함수라는 
것과 이것들은 보통 <head>와 </head> 사
이에 위치한다는 점이다.
이것만 기억하자
자바스크립트는 초보자가 배우기에는 조금 
어렵다. 하지만 자바스크립트를 활용하는 것
은 그리 어렵지 않다. 몇가지 규칙만 알아두
면 된다. 마치 자동차가 어떻게 굴러가는 것
은 모르더라도, 운전은 잘 할 수 있듯이 말
이다. 아래 규칙만은 기억하자.
첫째, 자바스크립트 태그는 다음과 같다.
<script language="JavaScript"> ... 
</script>
이러한 자바스크립트는 보통 <head>와 
</head> 안에 위치한다. 하지만 어디에 위
치해도 관계없다.
둘째, 자바스크립트 실행은 <form> ... 
</form> 안에 <input> 명령을 이용한다.
웹저작툴로 자바스크립트를 간단히
지금까지 자바스크립트를 간단하게나마 살펴
보았다. 하지만 웹저작툴을 이용하면 매우 
간단히 홈페이지에 자바스크립트를 사용할 
수 있다. ‘커피컵’ 이라는 HTML 에디터를 
이용하여 홈페이지에 자바스크립트를 넣는 
법을 배워보도록 한다. 커피컵 HTML 에디
터는 자바스크립트, 비주얼베이직스크립트, 
CGI 등을 아이콘을 클릭함으로써 간단히 홈
페이지에 넣을 수 있다. 자세한 내용은 
http://www.coffeecup.com을 참조하면 된다.
- 5 -
(그림 5) 커피컵 홈페이지
커피컵 HTML 에디터 시작하기
커피컵 HTML 에디터는 통신이나 인터넷에
서 쉽게 쉐어웨어 버전을 구할 수 있다. 설
치가 완료되었다면 커피컵 HTML 에디터를 
실행시켜보자. 윈도우즈 작업표시줄에서 [시
작-CoffeeCup HTML Editor++ 98]를 선택
한다. 그러면 커피컵 HTML 에디터가 실행
될 것이다. 리본메뉴에서 새파일 아이콘을 
클릭하면 ‘Quick Start'라는 대화상자가 뜬
다. Title에 원하는 제목을 적고, ’Cool!' 버
튼을 클릭하여 새파일을 시작한다. 화면 왼
쪽에는 문서의 위치, 자바스크립트, 비주얼베
이직스크립트, CGI를 삽입하기 위한 표시가 
있다. 오른쪽에는 기본적인 HTML 화면이
다. 
(그림 6) 커피컵 Quick Start 화면
(그림 7) 커피컵 새파일 만들기
홈페이지에 시계를 ...
커피컵 HTML 에디터의 왼쪽 창에서 Java 
Script 항목을 클릭 한다. 여러 목록이 보일 
것이다. 여기서는 Clock을 선택한다. Clock은 
홈페이지에 시계를 넣는다는 말이다. Clock
을 선택하면 오른쪽 창의 HTML 문서에 많
은 글자들이 적힐 것이다. 이것들이 앞에서 
설명하였던 자바스크립트 소스코드들이다. 
브라우저로 이것을 확인하여 보자. 메뉴화면
에서 [Tools-Test with Favorite Browser]
를 선택한다. 문서를 저장하지 않은 경우에
는 문서를 저장하라는 메시지 창이 뜨게 된
다. 이때 예(Y)를 선택한다. 파일 저장 대화
창이 뜬다. 대화창에 파일이름을 적고 파일
을 저장한다. 넷스케이프 또는 인터넷 검색
- 6 -
기 화면이 뜨고 시계를 볼 수 있을 것이다. 
넷스케이프 4.0 이상 버전에서는 마우스의 
오른쪽 버튼을 클릭하면 HTML 문서의 소
스코드를 볼 수 있다. 
(그림 8) 자바스크립트 선택
(그림 9) 자바스크립트 시계 화면
홈페이지에 다양한 변화를 ...
커피컵 HTML 에디터는 여러 가지 Java 
Script 목록을 제시한다. 이를 이용하면 시계
뿐만 아니라, 움직이는 문자, 배경색깔이 바
뀌는 등 다양한 변화를 가질 수 있다. 
인터넷에서 자바스크립트를 구하자
국외에서는 http://www.jsworld.com 이란 
곳이 있다. 자바스크립트에 대한 모든 것을 
정리한 사이트이다. 자바스크립트 강좌코너
도 있고, 자바스크립트를 이용한 소스코너도 
있다. 대부분의 모든 자료는 여기서 구할 수 
있다. 국내에서는 
http://www3.shinbiro.com/~rothmans/ 에서 
자바스크립트 예제들을 충분히 만끽할 수 있
다. 16가지 분류로 나누어서 자바스크립트 
예제를 다루고 있다. 자바스크립트로 만든 
시계는 그 종류만 7가지이다. 기본적인 시계
에서 카운터에 이르기까지 그 종류도 가지각
색이다. 자바스크립트에 대한 자세한 내용을 
알고 싶은 분은 인터넷상의 강의자료를 참고
해도 좋을 듯 싶다. 앞에 언급한 사이트 이
외에 
http://rummelplatz.uni-mannheim.de/~skoch
에서는 자바스크립트에 대한 자세한 강의가 
있다. 한가지 흠이라면 영어로 되어 있어 영
어에 자신 있는 분이 아니라면 조금 어렵다. 
하지만 이런 분을 위해 번역된 사이트가 있
다. 바로 http://galaxy.channeli.net/gipnsem/ 
이다. 
(그림 10) http://www.jsworld.com
- 7 -
(그림 11) 국내의 자바스크립트 예제 사이트
자바스크립트를 마치며 ...
자바스크립트가 초보자에게는 어려울 것이
다. 하지만 커피컵과 같은 HTML 에디터를 
이용한다면, HTML 문서를 작성하듯이 쉽게 
자바스크립트를 이용할 수 있다. 남과 다른 
나만의 개성, 생기 있는 홈페이지를 원하는 
사람이라면, 자바스크립트가 큰 벗이 될 것
이다.
소재우
jwso@sogang.ac.kr / 현재