자바스크립트와 자바애플릿
1. 자바 스크립트(Java Script)
자바 스크립트란?
자바 스크립트의 기호
자바 스크립트의 활용
2. 자바 애플릿(Java Applet)
자바 애플릿이란
자바 애플릿의 사용
1.1 자바스크립트란?
- 일종의 HTML 확장판 성격, 클라이언트쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어.
- 쉽고 개방적이며 HTML과 자바 사이의 객체와 자원을 이어주는 독립적인 스크립트 언어로 HTML로는 불가능하게 여겨졌던 많은 것들을 구현할 수 있도록 해 주고 있다.
- 또한, 자바언어가 주로 프로그래머들이 애플릿을 만들기 위해 사용하는 반면 자바 스크립트는 CGI프로그래머나 HTML 작성자들이 웹페이지간의 상호작용과 폼의 제어를 위해 사용하고 있다.
(1) 자바 스크립트의 특징
- 자바 스크립트는 작고 쉬운 스크립트 언어이다
- HTML 자체에 포함되어 실행된다.(컴파일되지 않는다.)
- 컴파일 과정을 거치지 않고 브라우저에서 실행된다.
- 웹브라우저가 실행 가능한 모든 OS 환경에서 실행된다.
(2) 자바 스크립트와 자바의 비교
(3) 자바 스크립트의 활용 분야
- CGI와 연동하여 HTML Form 값을 검사하거나 서버 쪽으로 값을 보낼 수 있다.
- 사용자의 입력을 제어하거나 브라우저의 여러 가지 기능을 제어할 수 있다.
- 사용자에게 메시지를 보내거나 확인할 수 있다.
- 쿠키(Cookie)를 이용하여 페이지 간의 Data를 이동할 수 있다.
- Window와 프레임을 생성 및 제어할 수 있다.
- Java와 연동하여 사용할 수 있다.
- 마우스 버튼 클릭, 홈페이지 로딩 등의 이벤트를 처리할 수 있다.
1.2 자바 스크립트의 기초
(1) 자바 스크립트의 지정
- <SCRIPT> 태그를 써서 HTML문서 내에 삽입한다. 자바 스크립트를 지원하지 않는 브라우저에서는 ‘<!--’ 와 ‘//-->’를 사용하여 주석문으로 처리하도록 한다. 자바 스크립트를 사용할 때는 반드시 LANGUAGE를 지정해야 한다.
<SCRIPT LANGUAGE="JavaScript">
<!--
자바 스크립트 소스
//-->
</SCRIPT>
<!--
자바 스크립트 소스
//-->
</SCRIPT>
- onLoad, onMouseOver 등의 이벤트에 대한 자바 스크립트를 태그 안에서 직접 기술할 경우에는 <SCRITP>태그를 기술하지 않아도 된다.
<BODY onLoad="status='환영합니다.'">
(2) 자바 스크립트의 사용
자바 스크립트는 HTML문서 안에서 지정하여 사용한다. 자바 스크립트에서 사용되는 명령들은 대부분 소문자로 되어 있으므로 주의를 기울여야 한다. 다음은 가장 간단한 자바 스크립트 예제이다.
<HTML>
<HEAD>
<TITLE> 자바 스크립트 맛보기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("자바 스크립트의 가장 간단한 예입니다. 화면에 현재 내용이 출력됩니다..<BR>">
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 자바 스크립트 맛보기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("자바 스크립트의 가장 간단한 예입니다. 화면에 현재 내용이 출력됩니다..<BR>">
//-->
</SCRIPT>
</BODY>
</HTML>
1.3 자바 스크립트의 활용
(1) 경고 메시지 나타내기
alert("메시지로 사용할 텍스트")
<HTML>
<HEAD>
<TITLE> 경고 메시지 보여주기 </TITLE>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert("Welcome to My Home!!╲n")
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 경고 메시지 보여주기 </TITLE>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert("Welcome to My Home!!╲n")
//-->
</SCRIPT>
</BODY>
</HTML>
(2) 사용자의 이름 입력받기
prompt("입력받기 위한 메시지","초기값")
<HTML>
<HEAD>
<TITLE> 사용자 이름 입력 받기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("이름을 입력하세요","방문자")+"님 어서 오세요")
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 사용자 이름 입력 받기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("이름을 입력하세요","방문자")+"님 어서 오세요")
//-->
</SCRIPT>
</BODY>
</HTML>
(3) 사용자의 브라우저 확인하기
navigator.appName:사용자의 브라우저 이름
navigator.appVersion:사용자의 브라우저 버전
<HTML>
<HEAD>
<TITLE> 브라우저 확인하기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("당신이 사용하는 브라우저는")
document.write("<B>+navigator.appName+navigator.appVersion+"<B>이군요.")
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 브라우저 확인하기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("당신이 사용하는 브라우저는")
document.write("<B>+navigator.appName+navigator.appVersion+"<B>이군요.")
//-->
</SCRIPT>
</BODY>
</HTML>
(4) 접속한 날짜와 시간 알아내기
Date( ):현재의 날짜와 시간을 알아낸다.
<HTML>
<HEAD>
<TITLE> 현재 시간 알아내기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("당신은")
document.write("<B>"+Date()+"</B>에 접속하셨습니다.")
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 현재 시간 알아내기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("당신은")
document.write("<B>"+Date()+"</B>에 접속하셨습니다.")
//-->
</SCRIPT>
</BODY>
</HTML>
(5) 최종 수정한 날짜와 시간 알아내기
lastModified:최종 수정한 날짜/시간을 알아낸다.
<HTML>
<HEAD>
<TITLE> 최종 수정한 시간 알아내기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last Update:")
document.write(document.lastModified)
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE> 최종 수정한 시간 알아내기 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last Update:")
document.write(document.lastModified)
//-->
</SCRIPT>
</BODY>
</HTML>
(6) 상태바에 메시지 나타내기
onLoad=“status=‘메시지’”
onMouseOver=“status=‘메시지’”
onLoad:웹페이지를 불러올 때 발생하는 이벤트
onMouseOver:마우스가 특정 위치에 있을 때 발생하는 이벤트
onMouseOut:마우스가 특정 위치를 벗어날 때 발생하는 이벤트
<HTML>
<HEAD>
<TITLE> 상태바에 메시지 나타내기 </TITLE>
</HEAD>
<BODY onload="status='환영합니다.'">
</BODY>
</HTML>
<HEAD>
<TITLE> 상태바에 메시지 나타내기 </TITLE>
</HEAD>
<BODY onload="status='환영합니다.'">
</BODY>
</HTML>
(7) 마우스 이벤트에 따른 이미지 변환
마우스 포인터가 그림 위에 놓이면 다른 그림을 불러오고, 그림 밖으로 이동하면 다시 원래의 그림을 불러오도록 할 수 있다.
<HTML>
<HEAD>
<TITLE> 마우스 이벤트에 따른 이미지 변환 </TITLE>
</HEAD>
<BODY>
<A HREF="exam6.html" onMouseOver='document.images(0).src="on.gif"'
onMouseOut='document.images(0).src="off.gif";><IMG SRC='off.gif' border=0></A>
</BODY>
</HTML>
<HEAD>
<TITLE> 마우스 이벤트에 따른 이미지 변환 </TITLE>
</HEAD>
<BODY>
<A HREF="exam6.html" onMouseOver='document.images(0).src="on.gif"'
onMouseOut='document.images(0).src="off.gif";><IMG SRC='off.gif' border=0></A>
</BODY>
</HTML>
2 자바 애플릿(Java Applet)
- 자바 언어는 1990년대에 Internet사용을 위한 보조 언어로 Sun Microsystems사에서 만들었다.
- 자바는 객체 지향 언어(Object Oriented Language)로 인터넷 프로그래밍 언어이다.
- 자바는 플랫폼에 상관없이 자바 가상머신만 있으면 어디에서든지 실행할 수 있다.
- 자바언어로 만든 홈페이지 응용 프로그램을 자바 애플릿(Java Applet)이라고 부른다.
- 애플릿은 기본적으로 <APPLET>태그의 code나 codebase에서 지정한 URL에 있는 .class파일을 불러온다.
- 자바 애플릿을 이용하면 인터넷상에서 게임이나 채팅, 게시판 등의 기능과 메뉴, 배너 등의 기능을 구현할 수 있다.
2.2 자바 애플릿의 사용
(1) <APPLET>태그
- 자바 애플릿을 사용하기 위해서는 <APPLET>태그를 사용하여야 한다.
- HTML문서에 <APPLET>태그를 아래와 같은 형식으로 작성해 포함시키면 인터넷상에서 자바 애플릿을 실행할 수 있다. <APPLET>태그는 반드시 </APPLET>태그로 닫아야 한다.
- CODE: 실행시키고자 하는 애플릿 클래스(.class)파일 이름
- WIDTH: 애플릿이 화면에 나타날 가로 길이(픽셀 단위)
- HEIGHT: 애플릿이 화면에 나타날 세로 길이(픽셀 단위)
- CODEBASE: 클래스 파일 위치로 URL을 기입
- ALT: 브라우저가 애플릿을 실행하지 못할 때 나타나는 텍스트 도움말
- NAME: 애플릿의 이름. 이것은 같은 페이지에서 다른 애플릿과 통신을 하기 위해 사용된다.
- ALIGN: 애플릿의 위치 설정(left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom)
- VSPACE: 애플릿 사이의 공간(TOP과 BOTTOM)
- HSPACE: 애플릿 사이의 공간(LEFT와 RIGHT)
- PARAM: 애플릿이 받아들을 수 있는 매개 변수들을 지정(여러 개 사용 가능)
(2) 자바 애플릿의 활용
Marquee애플릿:글자가 아래에서 위로 흐르는 자바 애플릿
<HTML>
<HEAD>
<TITLE> 위로 흐르는 글자 애플릿 </TITLE>
</HEAD>
<BODY>
<applet code="UcodMarquee1.class" width="450" height="100">
<param name="File" Value="news.txt"> //불러올 텍스트
<param name="Target" Value="_self"> //애플릿을 실행할 프레임
<param name="GFColor" Value="FFFFFF"> //애플릿의 글자 색상
<param name="BGColor" Value="000000"> //애플릿의 뒷배경 색상
<param name="Speed" Value="70"> //텍스트가 흐르는 속도
</applet>
</BODY>
</HTML>
<HEAD>
<TITLE> 위로 흐르는 글자 애플릿 </TITLE>
</HEAD>
<BODY>
<applet code="UcodMarquee1.class" width="450" height="100">
<param name="File" Value="news.txt"> //불러올 텍스트
<param name="Target" Value="_self"> //애플릿을 실행할 프레임
<param name="GFColor" Value="FFFFFF"> //애플릿의 글자 색상
<param name="BGColor" Value="000000"> //애플릿의 뒷배경 색상
<param name="Speed" Value="70"> //텍스트가 흐르는 속도
</applet>
</BODY>
</HTML>
(3) 애플릿 메뉴 만들기
애플릿을 이용한 메뉴이다. <param name="MENU">를 추가하여 원하는 메뉴를 만들 수 있다.
<HTML>
<HEAD>
<TITLE> winmenu </TITLE>
</HEAD>
<BODY>
<applet code="fileMenu.class" width="350" height="200">
<param name="COLERS" Value="f0f0f0|c0c0c0lc0c0c0|ffffff004080">
<param name="FONTS" Value="Symbol|BOLD|14|Arial|PLAIN|12">
<param name="MENU1" Value="검색|2||야후| http://kr.yahopo.com | | | 네이버 | http://www.naver.com | | ">
http://www.academic.knou.ac.kr|||서울대학교|http://www.snu.ac.kr||">
<param name="n" Value="2">
</applet>
</BODY>
</HTML>
<HEAD>
<TITLE> winmenu </TITLE>
</HEAD>
<BODY>
<applet code="fileMenu.class" width="350" height="200">
<param name="COLERS" Value="f0f0f0|c0c0c0lc0c0c0|ffffff004080">
<param name="FONTS" Value="Symbol|BOLD|14|Arial|PLAIN|12">
<param name="MENU1" Value="검색|2||야후| http://kr.yahopo.com | | | 네이버 | http://www.naver.com | | ">
http://www.academic.knou.ac.kr|||서울대학교|http://www.snu.ac.kr||">
<param name="n" Value="2">
</applet>
</BODY>
</HTML>
** 핵심 요약 **
• - 자바 스크립트는 HTML 문서에 포함되어 실행되는 스크립트 언어이다.
• - 자바는 컴파일 언어이며 자바 언어로 만든 홈페이지 응용 프로그램을 자바 애플릿(Java Applet)이라고 부른다.
• - 자바 스크립트는 <SCRIPT>태그를 사용하여 HTML문서에 삽입한다.
• - 자바 스크립트는 <SCRIPT>태그에서 LANGEUAGE='JavaScript'를 지정해야 한다.
• - 자바 스크립트의 명령은 대소문자를 구별하므로 주의하여야 한다.
• - 브라우저 화면에 텍스트를 출력하는 명령은 document.write이다.
• - 자바 스크립트로 브라우저와 버전을 확인할 수 있다.
• - 자바 스크립트는 쿠키와 CGI와 연동하여 사용할 수 있다.
• - 자바 애플릿은 HTML과 별도의 파일로 존재하며 HTML 문서에서는 애플릿을 쓸 수 있도록 몇 가지 옵션을 지정하는 것이 전부이다.
• - 자바 애플릿은 <APPLET>태그를 사용한다.
** 연습문제 **
1. 자바 스크립트를 이용하여 방문자의 이름을 입력받은 후 메시지 박스를 사용하여 환영메시지를 보여주도록 하시오.
2. 자바 스크립트를 이용하여 그림 위로 마우스가 이동하면 그림이 바뀌고, 마우스 버튼을 누르면 ‘야후 코리아(http://kr.yahoo.com)’로 이동하는 HTML문서를 작성하시오.
3. 자바 애플릿을 HTML 문서에서 사용하는 방법을 설명하시오.
'인터넷활용' 카테고리의 다른 글
| 정보윤리 (0) | 2007.09.24 |
|---|---|
| 기타 HTML과 관련된 다른 Markup 언어들 (0) | 2007.09.24 |
| 홈페이지 작성의 실제 (0) | 2007.09.24 |
| ZSPC Super Color Chart (0) | 2007.09.24 |
| RGB Hex Triplet Color Chart (0) | 2007.09.24 |
| 홈페이지:HTML기초 (0) | 2007.09.24 |
| 다국어 웹페이지 보기 (0) | 2007.09.24 |