/**************
이벤트 핸들러 오전 9:13 2008-08-28
***************/
1.xxjavascript
.......: Netscape사에서 만든 Client side에서 실행되는 script언어
2.javascrpt 작성방법
a.<script>자바스크립트 코드</script>
b.이벤트 핸들러의 값은 자바스크립트코드를 사용할수 있다
c.<script src="외부자바스크립트문서"></script>
--이벤트 핸들러
발생한 이벤트를 인식하여 처리한다.
--종류
[안내]태그제한으로등록되지않습니다-xxonClick-사용자가 버튼등을 클릭할때 발생
[안내]태그제한으로등록되지않습니다-xxonFocus-다른입력양식으로 촛점을 이동할때 발생
[안내]태그제한으로등록되지않습니다-xxonBlur!!-현재포커스에서 다른 포커스로 이동할때 발생
[안내]태그제한으로등록되지않습니다-xxonChange-텍스트영역입력양식에서 사용자가 자료를 변경할때 발생
[안내]태그제한으로등록되지않습니다-xxonLoad-특정 웹페이지에 접속되어 실행할때 발생
xxonUnload-특정 웹페이지를 떠날때 발생
[안내]태그제한으로등록되지않습니다-xxonMouseOver-하이퍼링크로 마우스커서를 위치시킬때 발생
[안내]태그제한으로등록되지않습니다-xxonMouseout-하이퍼링크에서 마우스커서가 벗어날때 발생
[안내]태그제한으로등록되지않습니다-xxonSubmit-특정 폼의 자료를 서버로 전송시킬때 발생
1.[안내]태그제한으로등록되지않습니다-xxonClick 이벤트 핸들러로 자바스크립트 명령을 실행시킨 예
<html>
<body name="a"><center>
<form>
<INPUT type = "button" value = "배경색 변경" [안내]태그제한으로등록되지않습니다-xxonclick="document.bgColor='#e0e0e0'; ">
</form></center>
</body>
</html>
2.특정 웹 페이지가 접속되었을 때 관련 HTML 문서가 실행될 때 자동으로 동작하는 [안내]태그제한으로등록되지않습니다-xxonLoad 이벤트 핸들러를 사용하는 예
<html>
<head>
</head>
<body [안내]태그제한으로등록되지않습니다-xxonLoad="alert!!('제 홈페이지를 방문한 것을 환영합니다')" >
<h4> 특정 웹 페이지가 접속되었을 때 관련 HTML 문서가 실행될 때 자동으로 동작하는 [안내]태그제한으로등록되지않습니다-xxonLoad 이벤트 핸들러를 사용하는 예
</body>
</html>
3.접속한 웹 페이지를 떠날 경우에 자동으로 동작하는 xxonUnload 이벤트 핸들러를 사용하는 예
<html>
<head>
</head>
<body xxonUnload="alert!!('제 홈페이지를 방문해 주셔서 감사합니다.')" >
<h4> 접속한 웹 페이지를 떠날 경우에 자동으로 동작하는 xxonUnload 이벤트 핸들러를 사용하는 예 </h4>
<h5> 다른 사이트로 이동하거나 웹브러우저의 종료 버튼을 클릭하면 xxonUnload 이벤트 핸들러에 정의한 alert!! 대화 상자가 자동으로 실행됩니다. </h5>
</body>
</html>
4.암호를 묻는 자바 스크립트 예제입니다.. 클릭하세요!!
<HTML>
<HEAD>
<SCRIPT language="xxJavaScript">
//window객체 내장함수
//1.alert!!('문자') 문자를 경고창으로 출력
//2.confirm!!('문자')
// 문자를 출력하면서 경고창으로 확인|취소값을 입력받음
//3.prompt(메세지,입력란초기값)
// 메세지를 출력하면서 사용자에게 입력을 받음
function password_check()
{
passwd=window.prompt("암호를 입력하세요","");
if (passwd == "s")
{
location.href = "http://www.simmani.com";
}
else
alert!!("암호를 기억한 후 방문해 주세요 !!!");
}
</SCRIPT>
</HEAD>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><a href="xxjavascript:password_check();">암호를 묻는 자바 스크립트 예제입니다.. 클릭하세요!!
</a></p>
<p> 암호를 묻는 대화 상자에서 암호가 맞으면 심마니 검색 사이트로
이동하는 자바스크립트 예제입니다. !!</p>
<p> 참고로, 정확한 암호는 simmani입니다.</p>
</body>
</html>
5. 이미지가 변경되는 자바스크립트의 이벤트 처리 예제입니다..
<html>
<head>
</head>
<center>
<body>
<a href="xxjavascript://" [안내]태그제한으로등록되지않습니다-xxonMouseOver="document.img1.src='tiger.gif';"
[안내]태그제한으로등록되지않습니다-xxonMouseOut="document.img1.src='bird.gif';">
<img src=bird.gif name="img1"></a><br><br>
이미지가 변경되는 자바스크립트의 이벤트 처리 예제입니다.. <P>
날아가는 새 이미지에 마우스를 올려놓은 후 잠시후에 <br>
마우스를 새 이미지에서 벗어나면 호랑이 이미지로 바뀝니다.
<br>
<img src=tiger.gif>
다시 호랑이 이미지에 마우스를 올려놓으면 날아가는 새 이미지로 변경되고요 ..
</center>
</body>
</html>
/*****************************
자바스크립트의 기본
*****************************/
코딩시 지켜야 할점
-한라인에 하나이상의 문장을 기술하고자 할때는 문장사이에 ; 를 표시하여 구분
ex> alert!!("a"); alert!!("b"); (순서대로 실행된다)
-한라인에 한문장만을 기술하고자 할때는 ; 을 생략해도 상관없다
주석(comment)달기 // 나 /* 와 */
-한줄에 주석을 달아줄때는 //을 사용하고
-여러줄일?는 /*로 열고 */로 닫는다
ex>
<html>
<head>
<script language="xxJavaScript">
/* 한 라인에 여러문장을 기술할때는
반드시 세미콜론을 표시해야 한다*/
//한라인에 한문장만기술하면 생략해도 상관없다
a= 10;
b =5;
result = a + b; //105? 15
alert!!( "두수 " + a + " 과 " + b + "를 더한 결과는 " + result + " 이다");
document.write("<h3> alert!! 대화 상자에 10 + 5의 결과를 보여주는 예제입니다.</h3>");
</script>
</head>
</html>
/***********************
변수
************************/
변수이름을 만들때 주의할점
-첫 자는 반드시 영문자나 "_" 로 시작해야한다
-대,소문자를 구별해서 변수이름을 만들어야 한다
-미리정의된 예약어는 변수로 사용할수 없다(충돌)
1.변수의 선언
var변수이름; //변수선언
변수이름=값; //var선언없이 변수사용
var변수이름=값; //선언과 동시에 값 할당
var변수이름=문자열값; //변수이름은 문자열변수
변수의 초기화
var변수이름=null; //어떤값이 입력될지 현시점에서는 정할수 없을때 변수를 초기화함
var변수이름=" "; //문자로 초기화
var변수이름=0; //숫자로 초기화
변수이름=값; //허용된다
지역변수/전역변수
전역변수:변수선언이 함수밖에 있는 변수로써 페이지 전체에서 사용가능함
지역변수: 변수선언이 함수내부에 있는 변수로써 함수안에서만 사용가능함
변수명에서 대소문자를 구별하지 않아 오류가 발생한 예
<html>
<head>
<script language="xxJavaScript">
a = 10;
b = 5;
RESULT = 100;
result = a + b;
document.write(" <h3> 변수명에 대소문자가 구별되지 않아<p>");
document.write(" 10 + 5의 결과가 100이라고 잘못 나온 예제입니다.");
alert!!( a + " + " + b + " = " + RESULT);
</script>
</head>
</html>
/*****************
자바스크립트의 4가지 자료형
*****************/
수치자료형(정수형과 실수형이 있다)
1.정수형(결과는 모두10진수로 표현된다)
var a; //a는 자료형이 없다
a=10; //정수
a=-10;
a=012; //8진수입력
a=0xa; //16진수 123456789abcdef->10
<SCRIPT LANGUAGE="xxJavaScript">
//8진수 12는 10진수로 10이다.
document.write(012+"<br>")
//16진수 f는 10진수로 15이다
document.write(0xf+"<br>")
</SCRIPT>
2.실수형
a=10.1;//실수
a=1.2E-10;(지수형식)
//1.2*10^-10 지수표현법(아주크거나 작은수를 표현하는 방법)
<SCRIPT LANGUAGE="xxJavaScript">
/* 변수 r에 120000000을 1.2E+8로 표현하여 저장한다*/
r=1.2E+8
document.write(r) //120000000으로 출력이 된다
//-->
</SCRIPT>
<SCRIPT LANGUAGE="xxJavaScript">
//실수계산에서 근사치 결과가 발생하는 경우
a=10
b=5.444
result=a+b;
document.write("결과는: " +result);
//-->
</SCRIPT><BR>
3.문자열 자료형
" " ' '안에 자료는 모두 문자열로 처리한다
a="100"; //문자열
a='10'; //문자열
원래의 문자로 출력하고 싶으면
a="1\"0\"0";
<SCRIPT LANGUAGE="xxJavaScript">
//출력결과와 같이 이중따옴표(")가 출력된다
document.write("\"이중따옴표\"의 출력을 보여주는 예제입니다<BR>");
//출력결과와 같이 단일따옴표(')가 출력된다
document.write("\'단일따옴표\'의 출력을 보여주는 예제입니다<BR>");
//-->
</SCRIPT><BR>
4.불리언자료형
참과 거짓값으로 논리적인 결과를 저장하기 위한 불리언 자료형
<SCRIPT LANGUAGE="xxJavaScript">
a=false;
if(a)
document.write("true");
else
document.write("false");
</SCRIPT>
/********************
변수사용방법
*********************/
1.var를 이용하여 변수를 선언하는 방법
변수에 자료를 할당하기만 하면 변수로 선언되어 사용된다
var xxjavascript //자바스크립트 정수형 변수이다
var pi=3.14159 //pi는 실수형 변수이다
var name-"홍길동" //name은 문자열변수이다
var bool=false //bool은 불리언 변수이다
-어떤 자료형의 값을 갖게 될지 모를 때는 null값으로 초기화 해준다.
var empty=null //emtpy는 null값을 갖는 변수이다
2.묵시적인 형변환
<html>
<head>
<script language="xxJavaScript">
// 자동 형변환의 예
jungsu = 5;
silsu = 10.5;
bool = true;
string = "문자열";
/*정수 변수인 jungsu는 실수 변수인 silsu와 더하여져 자동으로 정수형 변수로 변환된다. */
jungsu = jungsu + silsu; // 5+10.5
/*실수 변수인 silsu는 정수, 문자열, 실수 그리고 불리언 변수와
+ 기호에 의해 연결되면 문자열 변수로 자동 형변환된다. */
silsu = string + silsu + bool;
document.write( jungsu + "<br>");
document.write( silsu);
</script>
</head>
</html>
'컴퓨터 > 언어,프로그래밍' 카테고리의 다른 글
| [자바스크립트] 다양한 자바스크립트 버튼 들 (0) | 2009.02.12 |
|---|---|
| 자바스크립트 window객체, loaction객체, history객체, navigator객체 (0) | 2009.02.12 |
| [JavaScript] 자바스크립트 :: 형변환 (0) | 2009.02.08 |
| 라디오버튼 활용 (0) | 2009.02.08 |
| [JavaScript] 자바스크립트 기초 (0) | 2009.02.07 |
|
|
|
|
|
|
|